@charset "UTF-8";

/*!
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
*/

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

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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








/* ============================================
   兵庫県図書教材協会 サイト用 追加CSS
   Cocoon「外観 > カスタマイズ > 追加CSS」
   (または「テーマファイルエディター」側のCSS)に貼り付け
   ============================================ */

:root{
  --hlta-accent: #C9A863; /* アクセントカラー(ゴールド) */
  --hlta-sub:    #E7EEF6; /* サブカラー(ブルーグレー) */
}


/* ============================================
   共通・ヘッダー周り
   ============================================ */

/* ヘッダー直下に出る「アピールエリア」等の帯を強制非表示 */
#appeal-area,
.appeal-area,
#appeal-content,
.appeal-content{
  display: none !important;
}

/* PCヘッダーナビ:ホバー時に下線が伸びるアニメーション */
#navi .navi-in > ul > li > a{
  position: relative !important;
  padding-bottom: 6px !important;
  transition: opacity .2s !important;
}
#navi .navi-in > ul > li > a::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 0% !important;
  height: 2px !important;
  background-color: var(--hlta-accent, #C9A863) !important;
  transition: width .25s ease !important;
}
#navi .navi-in > ul > li > a:hover::after{
  width: 100% !important;
}
#navi .navi-in > ul > li > a:hover{
  opacity: .85 !important;
}
/* ホバー時の背景色は透明に(下線だけで表現) */
#navi .navi-in > ul > li > a:hover{
  background-color: transparent !important;
}

/* PC版:メニューとヒーローの間に少し余白をつける */
@media screen and (min-width: 1024px){
  #navi,
  .navi{
    padding-bottom: 12px !important;
  }
}

/* スマホ幅:ヘッダー直後の隙間を常にゼロに固定 */
@media screen and (max-width: 1023px){
  #content,
  #content-in,
  #main,
  .content,
  .main{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  #header-container,
  .header-container{
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* ヘッダーとヒーローの間の余白を、上のPC/スマホ設定以外では詰めておく */
#content,
#content-in,
#main,
.content,
.main{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
#header-container,
.header-container{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* 本当の原因:.entry-content の margin-top: 1em が
   最初のブロック(ヒーロー)を押し下げていた。
   詳細度を上げて確実に上書きする */
#content .entry-content,
article .entry-content,
.page .entry-content,
body .entry-content{
  margin-top: 0 !important;
}

/* 「固定ページのタイトルを非表示にする」を使うと、
   bodyに no-page-title クラスが付き、タイトル自体は消えるが
   囲っていた箱(article-header等)の余白だけ残ることがあるため
   その余白を強制的にゼロにする */
body.no-page-title .article-header,
body.no-page-title .page .article-header,
body.no-page-title #content .entry-header,
body.no-page-title article > header{
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: none !important;
}
body.no-page-title #content article{
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* ============================================
   タイトル
   ============================================ */
/* ヒーロー(カバーブロックに hlta-hero クラスを付与) */
.hlta-hero.wp-block-cover{
  min-height: 480px;
  /* コンテナ幅の制限を無視して画面いっぱいに広げる(フルブリード) */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
}
.hlta-hero .wp-block-cover__inner-container{
  max-width: 640px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 40px;
  padding-right: 40px;
}
.hlta-hero h1{
  font-family: "Noto Serif JP", serif;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.4;
}
.hlta-hero p{
  font-size: 16px;
  line-height: 1.9;
}


/* ============================================
   セクション共通の見出し
   ============================================ */
/* コクーン標準の見出し装飾(背景色・枠線・box-shadow)を
   このデザイン内で使う見出しだけリセットする */
.hlta-section-title,
.hlta-subtitle,
.hlta-card h3,
.hlta-material h3{
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  margin-left: 0 !important;
  color: var(--hlta-main, #16325C) !important;
}

/* hlta-subtitle: カラム内などの左寄せサブ見出し用 */
.hlta-subtitle{
  font-size: 18px !important;
  margin-bottom: 16px !important;
}

/* hlta-section-title: 中央寄せ+下線アクセント */
.hlta-section-title{
  text-align: center;
  position: relative;
  padding-bottom: 16px !important;
}
.hlta-section-title::after{
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--hlta-accent);
  margin: 12px auto 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}


/* ============================================
   記事ページ用の見出し(固定ページの本文中の区切り見出しに)
   見出しブロック(H2)の追加CSSクラスに hlta-article-title
   ============================================ */
.hlta-article-title{
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 0 16px !important;
  margin: 40px 0 20px !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--hlta-main, #16325C) !important;
  border-left: 5px solid var(--hlta-accent, #C9A863) !important;
  line-height: 1.4 !important;
}
/* ページ内の最初の見出しは、上の余白を詰める */
.hlta-article-title:first-child{
  margin-top: 0 !important;
}


/* ============================================
   記事ページ用のミニ目次(学校教材についてなど)
   カラムブロック(親)の追加CSSクラスに hlta-toc
   中の各段落にリンクを設定するだけでOK
   ============================================ */
.hlta-toc.wp-block-columns{
  border-bottom: 2px solid var(--hlta-sub, #E7EEF6) !important;
  margin-bottom: 40px !important;
  gap: 8px !important;
}
.hlta-toc .wp-block-column{
  flex-basis: auto !important;
}
.hlta-toc p{
  margin: 0 !important;
}
.hlta-toc a{
  display: inline-block !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--hlta-text, #333333) !important;
  text-decoration: none !important;
  border-bottom: 3px solid transparent !important;
  transition: color .2s, border-color .2s !important;
}
.hlta-toc a:hover{
  color: var(--hlta-main, #16325C) !important;
  border-bottom-color: var(--hlta-accent, #C9A863) !important;
}
/* スマホ幅:横並びのままスクロールできるようにする */
@media screen and (max-width: 600px){
  .hlta-toc.wp-block-columns{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .hlta-toc a{
    white-space: nowrap !important;
    padding: 10px 14px !important;
  }
}


/* ============================================
   記事ページ用の概要テーブル(協会概要など)
   テーブルブロック自体の追加CSSクラスに hlta-profile-table
   (グループで囲む必要はなし)
   ============================================ */
.hlta-profile-table{
  border-collapse: collapse !important;
  width: 100% !important;
}
/* コクーン標準の背景画像・縞模様を完全に消す */
.hlta-profile-table,
.hlta-profile-table tbody,
.hlta-profile-table tr,
.hlta-profile-table th,
.hlta-profile-table td{
  background-image: none !important;
  background-color: transparent !important;
}
/* 各行の下に1pxの下線(おしゃれな区切り線) */
.hlta-profile-table tr{
  border-bottom: 1px solid var(--hlta-sub, #E7EEF6) !important;
}
.hlta-profile-table th,
.hlta-profile-table td{
  padding: 16px !important;
  text-align: left !important;
  vertical-align: top !important;
  border: none !important;
  font-size: 15px !important;
}
.hlta-profile-table th{
  width: 160px !important;
  color: var(--hlta-main, #16325C) !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}
.hlta-profile-table td{
  color: var(--hlta-text, #333333) !important;
  line-height: 1.8 !important;
}
/* スマホ幅:表を縦積みにして見やすくする */
@media screen and (max-width: 600px){
  .hlta-profile-table,
  .hlta-profile-table tbody,
  .hlta-profile-table tr,
  .hlta-profile-table th,
  .hlta-profile-table td{
    display: block !important;
    width: 100% !important;
  }
  .hlta-profile-table th{
    border-bottom: none !important;
    padding-bottom: 4px !important;
  }
  .hlta-profile-table td{
    padding-top: 4px !important;
    padding-bottom: 16px !important;
  }
}


/* ============================================
   協会について
   ============================================ */
/* カラムブロックに hlta-about クラスを付与 */
.hlta-about.wp-block-columns{
  align-items: center;
  gap: 48px;
}
.hlta-about img{ border-radius: 6px; }


/* ============================================
   活動内容
   ============================================ */
/* 各カラムに hlta-card クラスを付与(親カラムには不要) */
.hlta-card{
  background: var(--hlta-sub);
  border-radius: 6px;
  padding: 32px 20px !important;
  text-align: center;
}
.hlta-card i{
  display: block;
  font-size: 36px;
  color: var(--hlta-main, #16325C);
  margin: 0 auto 16px;
}
.hlta-card h3{ font-size: 16px; margin-bottom: 10px; }
.hlta-card p{ font-size: 13px; line-height: 1.8; }


/* ============================================
   学校教材について
   ============================================ */
/* 各画像に hlta-material クラスを付与 */
.hlta-material img{
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 6px;
}


/* ============================================
   お知らせ
   ============================================ */
/* 静的リストの場合: リストブロックに hlta-news-list
   クエリーループの場合: 投稿テンプレート(ul)に hlta-news-list */
.hlta-news-list.wp-block-list{
  list-style: none;
  padding-left: 0;
}
.hlta-news-list li{
  padding: 14px 0;
  border-bottom: 1px solid var(--hlta-sub);
  font-size: 14px;
}

/* クエリーループ:1件ずつの見た目は子要素の li に指定 */
.hlta-news-list > li{
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--hlta-sub);
}
.hlta-news-list > li *{
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.hlta-news-list .wp-block-post-date{
  font-size: 13px;
  color: var(--hlta-subtext, #666666);
  flex-shrink: 0;
}
.hlta-news-list .wp-block-post-title,
.hlta-news-list .wp-block-post-title a{
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--hlta-text, #333333) !important;
  text-decoration: none !important;
}


/* ============================================
   会員企業
   ============================================ */
/* 各カラムに hlta-member-box クラスを付与 */
.hlta-member-box{
  background: var(--hlta-sub);
  border-radius: 4px;
  text-align: center;
  padding: 16px 8px !important;
  font-size: 13px;
}
/* 会員企業の行(hlta-members-wrap)と次のボタンとの余白を確保 */
.hlta-members-wrap{
  margin-bottom: 16px !important;
}


/* ============================================
   お問い合わせCTA(フッターウィジェット:カスタムHTML)
   <div class="hlta-cta">
     <div class="hlta-cta-text"><h2>...</h2><p>...</p></div>
     <a href="#" class="hlta-btn">...</a>
   </div>
   ============================================ */
.hlta-cta{
  background: var(--hlta-main, #16325C);
  padding: 48px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.hlta-cta h2{
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 6px !important;
  font-size: 18px !important;
  color: #FFFFFF !important;
}
.hlta-cta p{
  font-size: 13px !important;
  color: #d7e0ea !important;
  margin: 0 !important;
}
.hlta-btn{
  display: inline-block;
  background: #FFFFFF;
  color: var(--hlta-main, #16325C) !important;
  padding: 12px 28px;
  border-radius: 4px;
  font-size: 14px;
  text-decoration: none !important;
  flex-shrink: 0;
  transition: opacity .2s;
}
.hlta-btn:hover{ opacity: .85; }


/* ============================================
   サイト全体の「詳しく見る」等のボタン
   (コクーン標準の「ボタン」ブロックに自動で適用、
   クラス追加は不要)
   ============================================ */
.wp-block-button__link{
  position: relative !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
  box-shadow: 0 2px 6px rgba(22, 50, 92, .15) !important;
}
.wp-block-button__link:hover{
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 20px rgba(22, 50, 92, .25) !important;
  color: #FFFFFF !important;
}
.wp-block-button__link:active{
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(22, 50, 92, .2) !important;
}
/* 濃紺の背景に乗せる場合(フッターCTA等)は影を落ち着かせる */
.hlta-cta .wp-block-button__link,
.hlta-btn{
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15) !important;
}
.hlta-cta .wp-block-button__link:hover{
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .25) !important;
  opacity: 1 !important;
  color: var(--hlta-main, #16325C) !important;
}
.hlta-btn:hover{
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .25) !important;
  opacity: 1 !important;
  color: var(--hlta-main, #16325C) !important;
}


/* ============================================
   レスポンシブ(スマホ幅)
   学校教材について: 親カラムに hlta-materials-wrap
   会員企業:       親カラムに hlta-members-wrap
   (どちらも「モバイル表示時に縦に並べる」はチェックを外す)
   ============================================ */
@media (max-width: 600px){

  .hlta-hero .wp-block-cover__inner-container{
    max-width: 100%;
    padding: 0 20px;
  }

  /* 学校教材について: 6枚 → 2列×3段(grid採用) */
  .hlta-materials-wrap{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
  .hlta-materials-wrap > .hlta-material{
    width: auto !important;
    flex: none !important;
  }

  /* 会員企業: 3列 → 2列(grid採用) */
  .hlta-members-wrap{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .hlta-members-wrap > .hlta-member-box{
    width: auto !important;
    flex: none !important;
  }

  /* お問い合わせCTA: 縦積みで中央寄せに */
  .hlta-cta{
    flex-direction: column;
    text-align: center;
    padding: 32px 20px;
  }

  /* 協会について: 画像とテキストの順番はそのまま、余白だけ調整 */
  .hlta-about.wp-block-columns{
    gap: 24px;
  }
}


/* ============================================
   お問い合わせフォーム(Contact Form 7)
   ============================================ */
.wpcf7-form{
  max-width: 640px;
}
.wpcf7-form p{
  margin-bottom: 24px;
}
.wpcf7-form label{
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--hlta-text, #333333);
  margin-bottom: 8px;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form select{
  width: 100%;
  border: 1px solid var(--hlta-sub, #E7EEF6);
  border-radius: 4px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--hlta-text, #333333);
  background: #FFFFFF;
  transition: border-color .2s;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus{
  outline: none;
  border-color: var(--hlta-main, #16325C);
}
.wpcf7-form textarea{
  min-height: 160px;
  resize: vertical;
}
.wpcf7-form input[type="submit"]{
  background: var(--hlta-main, #16325C);
  color: #FFFFFF;
  border: none;
  border-radius: 4px;
  padding: 14px 40px;
  font-size: 15px;
  cursor: pointer;
  transition: opacity .2s;
}
.wpcf7-form input[type="submit"]:hover{
  opacity: .85;
}
.wpcf7-form .wpcf7-not-valid-tip{
  font-size: 13px;
  color: #c0392b;
  margin-top: 6px;
}
.wpcf7-form .wpcf7-response-output{
  border-radius: 4px !important;
  padding: 14px !important;
  font-size: 14px;
}


/* ============================================
   ハンバーガーメニュー(スマホ用)
   方針:
   1. 元のアイコン(≡・×)はfa-bars/fa-timesの::beforeごと消す
   2. #navi-menu-open(ラベル本体)に直接2本線を描画
   3. :checkedで2本線を回転・重ね合わせて×に
   4. パネル(#navi-menu-content)は画面の70%幅で固定、
      右からスライドインし、背景はヘッダーと同じ濃紺
   ============================================ */

/* 「メニュー」の文字キャプションは非表示、アイコンだけにする */
.navi-menu-caption{
  display: none !important;
}

/* ボタン行を画面最前面に固定 */
.mobile-header-menu-buttons{
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 2147483647 !important;
  box-shadow: none !important;
}
.navi-menu-button{
  padding: 8px 16px !important;
}

/* 元のアイコン(≡・×)を完全に消す */
.navi-menu-icon,
.navi-menu-icon *,
.navi-menu-close-button,
.navi-menu-close-button *{
  display: none !important;
}
.fa-bars::before,
.fa-times::before{
  content: "" !important;
  display: none !important;
}

/* ハンバーガー本体(#navi-menu-open に2本線を描画) */
#navi-menu-open{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
}
#navi-menu-open::before,
#navi-menu-open::after{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  height: 2px !important;
  background-color: var(--hlta-main, #16325C) !important;
  border-radius: 2px !important;
  transition: all .3s ease !important;
  transform-origin: center center !important;
}
#navi-menu-open::before{
  top: calc(50% - 5px) !important;
  width: 22px !important;
  transform: translateX(-50%) rotate(0deg) !important;
}
#navi-menu-open::after{
  top: calc(50% + 5px) !important;
  width: 22px !important;
  transform: translateX(-50%) rotate(0deg) !important;
}

/* メニューが開いた状態(:checked)→ ×に変形 */
#navi-menu-input:checked ~ #navi-menu-open::before{
  top: 50% !important;
  transform: translateX(-50%) rotate(45deg) !important;
}
#navi-menu-input:checked ~ #navi-menu-open::after{
  top: 50% !important;
  transform: translateX(-50%) rotate(-45deg) !important;
}

/* パネル本体:画面の70%幅で固定し、右からスライドイン */
#navi-menu-content{
  position: fixed !important;
  top: 0 !important;
  left: auto !important;
  right: 0 !important;
  width: 70vw !important;
  height: 100vh !important;
  max-width: none !important;
  background-color: var(--hlta-main, #16325C) !important;
  padding: 90px 24px 24px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  z-index: 2147483647 !important;
  box-shadow: -4px 0 24px rgba(0, 0, 0, .25) !important;
  transform: translateX(100%) !important;
  transition: transform .35s ease !important;
}
#navi-menu-input:checked ~ #navi-menu-open ~ #navi-menu-content,
#navi-menu-input:checked ~ #navi-menu-content{
  transform: translateX(0) !important;
}
#navi-menu-content ul{
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#navi-menu-content li{
  border-bottom: 1px solid rgba(255, 255, 255, .2) !important;
}
#navi-menu-content a{
  display: block !important;
  padding: 16px 4px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  transition: color .2s !important;
}
#navi-menu-content a:hover{
  color: var(--hlta-accent, #C9A863) !important;
}