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

/************************************
** 基本デザイン（枠・見出しなど）
************************************/
/* 🌼 枠デザイン：実線 */
.waku1 { padding: 1em; border: 3px solid #81aed8; }

/* 🌼 枠デザイン：角丸 */
.waku2 { padding: 1em; border: 3px solid #81aed8; border-radius: 10px; }

/* 🌼 枠デザイン：破線 */
.waku3 { padding: 1em; border: 3px solid #81aed8; border-radius: 10px; }

/* 🌼 枠デザイン：二重線 */
.waku4 { padding: 1em; border: 5px double #81aed8; border-radius: 10px; }

/* 🌼 枠デザイン：上下のみ */
.waku5 { padding: 1em; border-top: 5px solid #81aed8; border-bottom: 5px solid #81aed8; border-radius: 10px; }

/* 🌼 汎用の区切り線（空色の破線）を表示するためのクラス */
.custom-divider {
  border-top: 2px dashed skyblue;
  margin: 2em auto;
  width: 90%;
  max-width: 800px;
}

/* 🌼 スマホ表示時の区切り線の余白調整 */
@media screen and (max-width: 768px) {
  .custom-divider {
    margin: 1.5em auto;
  }
}

/************************************
** サイトタイトル・アイキャッチ非表示
************************************/
.site-name-text { display: none; }
.eye-catch img.logo { display: none; }

/************************************
** グローバルメニュー調整
************************************/
.navi-in .menu-header .item-label {
  font-size: 18px;
  font-weight: 650;
  font-family: RiiPopkkR;
}
#navi .navi-in > ul > li { border-right: 1px solid #81aed8; }
#navi .navi-in > ul > li:last-child { border-right: none; }

/************************************
** Contact Form 7 フォーム装飾
************************************/
div[id^="wpcf7-f"] {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 10px;
  max-width: 600px;
  margin: auto;
}
.wpcf7-form .required {
  background-color: #ff0000;
  color: #ffffff;
  padding: 2px 5px;
  border-radius: 3px;
  margin-left: 10px;
  font-size: 12px;
}

/************************************
** ヘッダー・メイン余白調整
************************************/
.header-in, .navi, #header { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.main, .container, .content, #breadcrumb, #top-ad { margin-top: 0 !important; padding-top: 0 !important; }

/************************************
** リンクホバー色
************************************/
a:hover { color: #2f6291 !important; }
.menu-item a:hover { background-color: #81aed8 !important; color: #ffffff !important; }

/************************************
** 共通画像スタイル（全幅表示）
************************************/
.fullwidth-img {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-1 * ((100vw - 100%) / 2)) !important;
  height: auto !important;
  display: block !important;
  box-sizing: border-box !important;
}
.wp-block-custom-html { width: 100vw !important; max-width: 100vw !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; }
.wp-block-custom-html img.fullwidth-img {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-1 * ((100vw - 100%) / 2)) !important;
  height: auto !important;
  display: block !important;
  box-sizing: border-box !important;
}

/************************************
** PC・モバイル切り替え用クラス
************************************/
.pc { display: block !important; }  /* PCで表示 */
.mb { display: none !important; }   /* モバイルで非表示 */

/************************************
** モバイルメニュー・検索アイコン調整
************************************/
.mobile-menu-buttons .menu-caption,
.mobile-menu-buttons .menu-icon { color: #81aed8; }
span.fas.fa-bars::before { color: #81aed8; }
.mobile-menu-buttons .menu-button { color: #81aed8; background-color: #fff; }
.menu-close-button { padding-top: 15px; padding-left: 25px; padding-bottom: 30px; text-align: left; font-size: 1.3em; }

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

/*834px以下*/
@media screen and (max-width: 834px){ /* 必要ならここに追加 */ }

/* 768px以下（PC・モバイル切り替え） */
@media screen and (max-width: 768px) {
  .pc { display: none !important; } /* PC用は非表示 */
  .mb { display: block !important; } /* モバイル用は表示 */

  /* 🌼 PC専用中央寄せ画像はスマホでは非表示 */
  .wp-block-image.pc-center { display: none !important; }

  /* 🌼 モバイル専用中央寄せ画像 */
  .wp-block-image.mb-center img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 600px以下（スマホ対応） */
@media screen and (max-width: 600px) {
  .button-row {
    flex-direction: column; /* ボタンを縦並びに */
    gap: 20px;
  }
  .cc-imagewrapper img {
    width: 80%; /* 画像を縮小 */
    margin: 0 auto; /* 中央寄せ */
  }
}

/*480px以下*/
@media screen and (max-width: 480px){ /* 必要ならここに追加 */ }

/************************************
** 共通レイアウト
************************************/
/* 横スクロール防止 */
body { overflow-x: hidden; }

/* 横並びボタン配置（PC横並び／スマホ縦並び） */
.button-row {
  display: flex;
  justify-content: center;   /* 中央寄せ */
  gap: 40px;                 /* ボタン間の余白を広めに */
  flex-wrap: wrap;
  margin: 40px 0;
}

/* PC用：ボタンを大きめに横並び */
.button-row .cc-imagewrapper {
  flex: 1 1 45%;     /* 横幅の45%ずつで並べる */
  max-width: 500px;  /* 上限を設定して大きすぎないように */
  text-align: center;
}

/* スマホ用（600px以下）：縦並びに切り替え */
@media screen and (max-width: 600px) {
  .button-row {
    flex-direction: column; /* 縦並び */
    gap: 20px;
  }
  .button-row .cc-imagewrapper {
    flex: 1 1 auto;
    width: 100%;            /* 横幅いっぱいに */
  }
  .cc-imagewrapper img {
    width: 80%;             /* 画像を少し縮小 */
    margin: 0 auto;
  }
}

/* 画像中央揃えとホバー演出 */
.cc-imagewrapper { text-align: center; }
.cc-imagewrapper img { max-width: 100%; height: auto; transition: transform 0.3s ease; }
.cc-imagewrapper a:hover img { transform: scale(1.05); }

/* SNSアイコン横並び */
.sns-inline { display: flex; }

/* 🌼 固定幅の画像を中央寄せ */
.wp-block-image.pc-center img { display: block; margin-left: auto; margin-right: auto; }

/************************************
** モバイルスライドインメニュー
************************************/
/* 🌼 メニュー全体のリンクスタイル */
.menu-drawer a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.5em 1em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  text-decoration: none;
  font-size: 1em;
  color: #545454;
}

/* 🌼 メニュー内の画像（アイコン） */
.menu-drawer a img {
  width: 40px;
  height: auto;
  margin-bottom: 0.1em;
  margin-right: 1em;
}

/* 🌼 メニュー内のテキスト */
.menu-drawer a span {
  font-size: 1em;
  color: #545454;
  text-align: left;
}

/* 🌼 サブメニュー（階層メニュー） */
.menu-drawer .sub-menu { padding: 0; }
.menu-drawer .sub-menu li { font-size: 0.9em; }

/* 🌼 現在選択中のメニュー項目 */
.menu-drawer .current-menu-item > a,
.menu-drawer .current-menu-parent > a,
.menu-drawer .sub-menu .current-menu-item > a {
  background-color: transparent;
  border: 2px solid #6DA5D8;
  border-radius: 8px;
}

/* 🌼 ×アイコンの位置調整 */
.menu-close-button {
  padding-top: 15px;
  padding-left: 25px;
  padding-bottom: 10px; /* 30px → 10px に調整 */
  text-align: left;
  font-size: 2em;
}

/* 🌼 メニュー全体の背景色 */
.navi-menu-content { background-color: #ffffff; }

/* 🌼 アイコン＋テキストを横並びにしたい場合の補助クラス */
.menu-icon-label {
  display: flex;
  align-items: center;
}
.menu-icon-label img {
  width: 60px;
  height: auto;
  margin-right: 0.5em;
}
.menu-icon-label .menu-text {
  font-size: 1em;
  color: #545454;
}

/************************************
** ブロック装飾
************************************/
/* 🌼 Cocoonブロック装飾の背景色を白に上書き */
.block-style-dashed {
  background-color: #ffffff !important;
  border: 2px dashed #000000;
}

/************************************
** 目次デザイン調整（枠線なし）
************************************/
.toc {
  background-color: #f5fbff; /* 淡いブルー背景 */
  padding: 1.5em 1.8em;
  margin-bottom: 2em;
  overflow: hidden;
}

.toc-title {
  background-color: #81aed8; /* タイトル背景色 */
  color: #ffffff;
  font-size: 1.2em;
  padding: 0.8em 1em;
  font-weight: bold;
  display: flex;
  align-items: center;
  line-height: 1.4;
}

/* 丸アイコンを正円＆中央揃えにする（差し替え） */
.toc-title:before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: "\f03a";              /* 必要に応じて他アイコンへ変更可 */
  font-size: 18px;

  /* 正円の枠を固定寸法で作る */
  width: 28px;
  height: 28px;
  border-radius: 50%;

  /* 中身（アイコン）を中央に配置 */
  display: inline-flex;
  justify-content: center;
  align-items: center;

  /* 視覚調整 */
  margin-right: 10px;
  color: #81aed8;
  background-color: #ffffff;
  line-height: 1;                /* 親line-heightの影響を遮断 */
  box-sizing: border-box;
  /* 枠線を付けたい場合：
  border: 1px solid #81aed8;
  */
}

.toc-list { padding-top: 1em; }

.toc-list > li {
  font-weight: bold;
  color: #5a6e7f;
  margin: 0.6em 0;
}

.toc-list > li li {
  font-weight: normal;
  color: #8195a2;
  margin: 0.4em 0;
}

/* ロゴとメニューの垂直揃え */
.header-logo {
  vertical-align: middle;
}

.nav-menu li {
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px;
}

/* メニュー全体の中央揃え */
.nav-menu {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* PC表示時のみグローバルナビの上に余白を追加 */
@media screen and (min-width: 769px) {
  .navi {
    margin-top: 20px !important; /* 好みで調整 */
  }
}

@media screen and (min-width: 769px) {
  .header-in {
    padding-top: 20px; /* 上に余白を追加して全体を下げる */
  }
}

/************************************
** 🌼 no-page 固定ページ (ID=1598) 専用CSSまとめ
************************************/

/* 🌼 ヘッダー全体を非表示 */
body.page-id-1598 header#header,
body.page-id-1598 #header-container,
body.page-id-1598 #header-in {
  display: none !important;
}

/* 🌼 フッターメニューを非表示 */
body.page-id-1598 footer,
body.page-id-1598 #footer,
body.page-id-1598 .footer,
body.page-id-1598 .footer-bottom,
body.page-id-1598 .navi-footer {
  display: none !important;
}

/* 🌼 パンくずリストの「ホーム」テキストを非表示 */
body.page-id-1598 .breadcrumb-caption:first-child {
  display: none !important;
}

/* 🌼 パンくずリストの家アイコンを非表示 */
body.page-id-1598 .breadcrumb-home {
  display: none !important;
}