/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
color #5e503c #857055 #d1b086 #fff4e6
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	/*これはスマホ時のメニュー削除*/
	.header-container-in.hlt-top-menu {
		display: none;
	}
}

/*834px以下*/
@media screen and (max-width: 834px){
	/*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

.date-tags{
	display:none;
}
.author-info{
	display:none;
}
/* ─────────  ロゴを左寄せ  ───────── */
@media (max-width: 1023px){
  /* 親 <li>：検索・メニューの横並びを崩さず左端へ */
  .logo-menu-button{
    margin-left:5vw;          /* 左端に密着                */
    margin-right:auto;      /* 残り幅を右側に寄せる       */
  }

  /* ロゴを内包する <a> を横並び左寄せに */
  .logo-menu-button > a{
    display:flex;           /* 横並びレイアウト           */
    justify-content:flex-start;
    align-items:center;     /* 縦中央揃え（任意）         */
    width:100%;             /* <a> を <li> 全幅に伸ばす   */
  }

  /* 実際のロゴ画像（必要ならサイズ微調整だけ） */
  .logo-menu-button img{
    margin:0;               /* 余計な中央寄せを消す       */
    display:block;
    height:auto;            /* 高さはテーマ既定に合わせる*/
  }
}
/* ─────────  end  ───────── * /
/*Recaptcha削除*/
.grecaptcha-badge { visibility: hidden; }
/*上ボタン*/
.go-to-top {
  right: 20px; /*右から20px*/
  bottom: 55px; /*下から55px*/
}

.go-to-top-button {
  height: 50px;
  width: 50px;
  border-radius: 50%; /*丸くする*/
  font-size: 30px; /*アイコンフォントのサイズ*/
  background:#d1b086;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .2); /*影*/
}

/*ホバー時*/
.go-to-top-button:hover {
  height: 55px;
  width: 55px;
  background: #857055;
} 

/*ブログカード＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*--------------------------------------
  ブログカード 全体ホバー版（ラベルも含む）
--------------------------------------*/

/* 上の親要素は余白なしでOK */
.wp-block-cocoon-blocks-blogcard {
  margin: 0;
  width: 100%;
}

/* --- ここから blogcard-wrap 全体にホバー効果をかける --- */
/* 推奨: カードの高さを十分に確保 */
.blogcard-wrap {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 2px 5px #ccc;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  width: 100%;
  position: relative;
  transition: all 0.5s;
  height: auto;
}

/* ホバー時に全体が浮き上がる */
.blogcard-wrap:hover {
  transform: translateY(-5px);
  box-shadow: 0 7px 34px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
  background-color: #f5f5f5; /* ←薄い灰色を追加！ */
}

/* --- 画像設定 --- */
.blogcard-thumbnail {
  width: 100%;
}

.blogcard-thumbnail img {
  width: 100%;
  height: auto;
  border-radius: 20px 20px 0 0;
  display: block;
}

/* --- ラベル設定 --- */
.blogcard-label {
  position: absolute;
  top: -10px;
  left: 10px;
  background: #5e503c;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  z-index: 10;
  transition: all 0.3s;
}

/* --- テキストエリア設定 --- */
.blogcard-content {
  padding: 8px 20px 8px;
  height: auto;
  display: block; /* ← これに変更 */
}

.blogcard-title {
  font-size:0.8em;
  color: #333;
  font-weight: 700;
  margin-bottom: 0.5em;
  display: block !important;
  visibility: visible !important;
}

.blogcard-site {
  text-align: center;
  border-top: 1px solid #eee;
  padding: 10px 0 0;
  font-size: 0.5em;
  color: #5e503c;
}

.blogcard-site:hover {
  color: #857055;
}

/* 一番下のリンク部分（サイトURL）を非表示 */
.blogcard-footer {
  display: none;
}

/* 文字部分の左の余白を削除 */
.blogcard-content {
    margin-left: 0px;
}
/*タイトルの字数制限（1行で点々）*/
.blogcard-wrap .blogcard-title {
    /* 複数行表示用のスタイル */
	font-size: 1em;
	color: #333;
	font-weight: 700;
	margin-bottom: 0.5em;
	line-height: 1.4;
	white-space: normal;
	overflow: visible;
	text-overflow: unset;
	-webkit-line-clamp: unset;
	display: block;
	height: auto;
	max-height: none;
}

/*画像余白削除*/
.blogcard-thumbnail {
  margin: 0 !important;
  padding: 0 !important;
}

.blogcard-thumbnail img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ←これを新しく追加！！ */
figure.blogcard-thumbnail {
  margin: 0 !important;
  padding: 0 !important;
}
/*変なボーダー削除*/
.cf{
    border: none;
}
/*ブログカード終＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*H2デザイン*/
.article h2, .article h3, .article h4, .article h5, .article h6 {
    margin-bottom: 2em;
	padding: 0;
}

.entry-content h2 {
  color:rgb(255, 255, 255);
  display: block;
  width: 100%;
  padding: 1em;
  box-sizing: border-box;
  line-height: 1.3;
  background: #857055;
  border-radius: 25px 0 0 25px;
  font-size: clamp(20px, 4vw, 30px);
}

/*H2リセット*/
.article h2::before {
border-top: none;
}
.article h2::after {
border-bottom: none;
}
.article h2{
border: none;
}
.article h3::before {
border-top: none;
}
.article h3::after {
border-bottom: none;
}
.article h3{
border: none;
}
/*メニュー太文字*/
.item-label{
	font-weight: bold;
}
/*上部余白削除*/
main.main, div.sidebar {
   padding: 0px 16px;
}


/* ===============================
    インターンカードのデザイン改善
   =============================== */
/* 全体のカラースキーム（以前の定義を再掲） */
:root {
--primary-color: #5e503c;
--secondary-color: #d1b086;
--light-background: #fffaf5;
--border-color: #fff4e6;
--hover-border-color: #ffe9cc;
--text-color-dark: #333;
--text-color-medium: #666;
--text-color-light: #857055;
--shadow-base: rgba(0, 0, 0, 0.08);
--shadow-hover: rgba(0, 0, 0, 0.15);
}

/* カード全体をフレックスコンテナにする */
.intern-card {
border: 2px solid var(--border-color);
background-color: var(--light-background);
padding: 20px; /* パディングを調整 */
margin-bottom: 25px;
border-radius: 12px;
box-shadow: 0 2px 6px var(--shadow-base);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
display: flex; /* フレックスボックスを適用 */
align-items: flex-start; /* 上端を揃える */
overflow: hidden;
position: relative;
line-height: 1.4em !important;
}

.intern-card:hover {
border-color: var(--hover-border-color);
box-shadow: 0 8px 20px var(--shadow-hover);
transform: translateY(-5px) scale(1.01);
}

.intern-card.opened {
background-color: #f7e7d3;
border-color: #d1b086;
transition: background-color 0.3s ease, border-color 0.3s ease;
flex-direction: column; /* 開いたら縦並びに戻す（必要に応じて） */
align-items: stretch; /* 幅を最大限に広げる */
}

.intern-card.opened:hover {
transform: none;
box-shadow: 0 2px 8px var(--shadow-base);
}

/* 画像コンテナ */
.card-image-container {
width: 150px; /* 画像の幅を固定 */
margin-right: 15px; /* 文字との間に余白 */
flex-shrink: 0; /* 縮小しない */
border-radius: 8px; /* 角丸 */
overflow: hidden; /* 画像がはみ出さないように */
}

.card-image-container img {
display: block;
width: 100%;
height: auto;
object-fit: cover; /* アスペクト比を維持しつつ領域を埋める */
}

/* テキストコンテンツ */
.card-content {
flex-grow: 1; / 残りのスペースをすべて使う */
}

/* タイトル（企業名） */
.intern-card h3 {
font-size: 22px;
font-weight: 700;
margin-top: 0; / 上の余白を調整 /
margin-bottom: 10px; / 下の余白を調整 */
color: var(--text-color-dark);
line-height: 1.6em;
}

/* 常に表示される項目 */
.card-content p {
line-height: 1.6;
margin: 3px 0;
font-size: 15px;
color: var(--text-color-medium);
}

/* 折りたたみ内の項目 */
.toggle-content {
margin-top: 1em;
}

.toggle-content h4 {
margin-top: 1em;
font-size: 17px;
font-weight: 600;
color: var(--text-color-dark);
border-bottom: 2px solid var(--border-color);
padding-bottom: 5px;
}

.toggle-content p {
margin: 8px 0 1em;
font-size: 14px;
color: var(--text-color-medium);
line-height: 1.2em;
}

/* もっと見るボタン */
.toggle-button {
display: block;
width: 100%;
text-align: center;
padding: 10px 0;
margin-top: 10px; /* 上の余白を調整 */
background-color: transparent;
border: 1px solid var(--secondary-color);
border-radius: 6px;
font-weight: bold;
color: var(--primary-color);
cursor: pointer;
transition: all 0.3s ease;
}

.toggle-button:hover {
background-color: var(--secondary-color);
color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* タグボタン */
.multi-select-section {
margin-top: 15px; /* 上に余白を追加 */
}

.multi-select-section .label {
font-weight: bold;
margin-bottom: 8px;
display: block;
font-size: 14px;
color: var(--text-color-dark);
}

.multi-select-section .multi-select-buttons {
display: flex; /* 横並びにする */
flex-wrap: wrap; /* 折り返しを許可 */
gap: 5px; /* ボタン間の余白 */
}

.multi-select-buttons button {
padding: 8px 16px;
background-color: #f7f2ea;
border: 1px solid #e0d9cd;
border-radius: 20px;
cursor: pointer;
font-size: 13px;
color: var(--text-color-medium);
font-weight: 500;
transition: all 0.3s ease;
margin: 0; /* デフォルトのmarginをリセット */
}

.multi-select-buttons button.selected {
background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
transform: translateY(-1px);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.multi-select-buttons button:hover:not(.selected) {
background-color: #e6dfd4;
}

/* 通常のメニュー文字 */
.item-label {
color: var(--text-color-light);
transition: color 0.3s ease;
}

/* ホバー時：親のリンクにマウスを乗せたとき文字を濃く */
a:hover .item-label {
color: var(--primary-color);
}

/* カードの会社名リンク */
.company-link {
font-weight: bold;
display: inline-block;
transition: .3s ease-in-out;
transform: scale(1);
color: #084A96;
text-decoration: none;
}

.company-link:hover {
transform: scale(1.05);
color: #007bff;
text-decoration: underline;
}

/* 画像に関する以前のスタイルは、新しい構造に合わせて調整が必要 /
/ すべての画像に下余白（例：20px）をつける - card-image-container内のimgに適用 */
img {
margin-bottom: 20px;
margin-top: 15px;
display: block;
max-width: 100%;
height: auto;
border-radius: 8px;
} */

/* ただし、no-margin クラスが付いている画像は除外 - 必要に応じて調整 */
img.no-margin {
margin: 0 !important;
} */

/* OGP画像のスマホ対応調整 - 必要に応じて調整 */
.og-image-container {
width: 100%;
overflow: hidden;
border-radius: 8px;
margin-top: 10px;
margin-bottom: 15px;
}

.og-image-container img {
width: 100% !important;
height: auto !important;
margin: 0 auto !important;
display: block;
object-fit: cover;
box-sizing: border-box;
}

/* モバイル表示での調整 */
@media screen and (max-width: 768px) { /* 768px以下の画面幅で適用 */
.intern-card {
flex-direction: column; /* 縦並びに戻す */
align-items: stretch; /* 幅を最大限に広げる */
padding: 15px;
}

.card-image-container {
width: 100%; /* 幅を100%に */
margin-right: 0; /* 右の余白をなくす */
margin-bottom: 10px; /* 下に余白を追加 */
}

.intern-card h3 {
font-size: 20px;
}

.multi-select-section .multi-select-buttons {
justify-content: flex-start; /* 左寄せにする */
}

.multi-select-buttons button {
padding: 6px 12px;
font-size: 12px;
margin-right: 5px;
margin-bottom: 5px;
}