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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.post-date, .post-update{
  font-size: 14px; /*フォントサイズ*/
  padding-right: 4px; /*右余白*/
  display: inline; /*横並びで縦中央揃え*/
}

.cat-label, .cat-label-311 {
	font-size:14px;
}

.entry-card-title, .card-title, .e-card-title {
	color:#00008b;
}

.entry-card-snippet, .card-snippet, .e-card-snippet{
  font-size: 16px;
  line-height: 1.5em;
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  .tagline{
    display: none;
  }

  /* メタスライダー */
  .metaslider{
    font-size: 12px;
  }

  /* モバイルフッターメニュー */
  .mobile-footer-menu-buttons .menu-button,
  .mobile-footer-menu-buttons .menu-button:hover,
  .mobile-footer-menu-buttons .menu-button a,
  .navi-menu-content,
  .menu-drawer a,
  .menu-drawer a:hover{
    background-color: #ffadcd;
    color: black;
  }

  /* モバイルヘッダーメニュー */
  .search-menu-button.menu-button,
  .navi-menu-button.menu-button{
    height: 55px;
    padding-top: 8px;
    background-color: #ffadcd;
    color: black;
  }

  .logo-menu-button.menu-button{
    height: 55px;
    background-color: #ffadcd;
  }

  /* モバイルスライドインメニュー */
  .navi-menu-content{
    left: auto;
    right: 0;
    transform: translateX(101%);
    height: 95%;
  }

  .fa-times{
    color: black; /* 閉じるボタンの色 */
    font-size: 0.8em;
  }

  ul.menu-drawer:before{
    background-color: #ffadcd; /* Menu背景色 */
    font-size: 1.2em;
  }

  ul.menu-drawer:after{
    background-color: #fff;
  }

  .menu-drawer a{
    color: black !important; /* 文字色 */
    font-size: 1.2em;
    font-weight: 900;
  }

  .menu-drawer a:hover{
    background-color: #ffadcd;
  }

  .menu-drawer a .fas,
  .menu-drawer a .far,
  .menu-drawer a .fa,
  .menu-drawer a .fab{
    margin-right: 3px;
  }

  .sub-menu li{
    font-size: 0.8em;
  }
}




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

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

/************************************
** 追加CSSから移植（統合ブロック）
************************************/

/* キャッチフレーズ */
.tagline{
  font-weight: bold;
  font-size: 16pt;
  margin-bottom: -20px;
}

/* reCAPTCHAバッジ（※規約的に注意：消す場合は代替表示推奨） */
.grecaptcha-badge { visibility: hidden; }

/* Simple Lightbox（っぽい）表示のフォント */
#slb_viewer_wrap .slb_theme_slb_baseline *{
  font-family: 'Yu Mincho', 'Hiragino Mincho Pro', 'MS PMincho', 'MS Mincho', serif;
  font-size: 18px;
}

/* グローバルメニュー調整 */
.navi-in .menu-header .item-label{
  font-size: 16px;
  font-weight: bold;
}

#navi .navi-in > ul > li{
  border-left: 1px solid #ffffff;
}
#navi .navi-in > ul > li:last-child{
  border-right: 1px solid #ffffff;
}
.navi-in > ul > .menu-item-has-children > a::after{
  right: 10px;
}

/* 協賛ボタン */
#support-btn {
  position: fixed;
  bottom: 80px;
  right: 15px;
  background: #f9d7e4;
  color: #c2185b;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  text-decoration: none;
  z-index: 9999;
  opacity: 0.9;
  transition: all 0.2s ease;
}
#support-btn:hover {
  opacity: 1;
  transform: scale(1.05);
  background: #e0b0b0;
}

/* モバイルフッターボタンSNSの設定 */
.sns-dropdown {
  position: fixed;
  bottom: 60px; /* モバイルフッターの上 */
  left: 10px;
  background: #fff;
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 9999;
  width: 150px;
}

.sns-dropdown a {
  display: block;
  margin-left: 10px;
  color: #333;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  line-height: 2.5;
}

.sns-dropdown a:hover {
  text-decoration: underline;
}

/* 767px以下：協賛ボタン表示 */
@media screen and (max-width: 767px) {
  #support-btn { display: block; }
}

/* 480px以下 */
@media screen and (max-width: 480px){
  .tagline { font-size: 14px; }

  #slb_viewer_wrap .slb_theme_slb_baseline *{
    font-family: 'Yu Mincho', 'Hiragino Mincho Pro', 'MS PMincho', 'MS Mincho', serif;
    font-size: 12px;
  }
}
/* =========================
   Front hero (PC)
   ========================= */
.front-hero{
  position: relative;
}

.front-hero-static{
  display: block;
  max-width: 1135px;
  height: 600px;
  margin: 0 auto;
  overflow: hidden;
}

.front-hero-splide-host{
  position: absolute;
  inset: 0;
  max-width: 1135px;
  height: 600px;
  margin: 0 auto;
  left: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  overflow: hidden;
  background: #000;
}

.front-hero-splide-host.is-ready{
  opacity: 1;
  pointer-events: auto;
}

.front-hero .splide__track,
.front-hero .splide__list,
.front-hero .splide__slide{
  height: 600px;
}

.front-hero .front-hero__img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* PCは迫力優先 */
}

.front-hero .hero-link{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.front-hero .hero-caption{
  position: absolute;
  left: 20px;
  bottom: 20px;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  text-shadow: 0 2px 6px rgba(0,0,0,0.7);
  background: rgba(0,0,0,0.4);
  padding: 6px 12px;
  border-radius: 6px;
}

.front-hero.front-hero--splide-ready .front-hero-static .hero-caption{
  display: none;
}


/* =========================
   Front hero mobile fix (safe)
   - PCは触らない
   - Androidは切れない + ずれない
   - iPhoneは静的画像の残りっぱなしを止める
   ========================= */

/* 1) スマホ共通：vhやaspect-ratioで箱を作らない（ズレの原因） */
@media (max-width: 767px){

  /* host/slideの高さ固定を解除して、内容に任せる */
  .front-hero-splide-host{
    height: auto !important;
    aspect-ratio: auto !important;
  }

  .front-hero .splide__track,
  .front-hero .splide__list,
  .front-hero .splide__slide{
    height: auto !important;
  }

  /* 画像は切らない（下切れ解消） */
  .front-hero .front-hero__img{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    background: #000;
    display: block;
  }

  .front-hero .hero-link{
    height: auto !important;
  }

  /* overflow: visible が事故るのでやめる */
  .front-hero-static,
  .front-hero-splide-host{
    overflow: hidden !important;
  }
}


/* =========================
   Android：キャプション文字サイズ調整
   ========================= */
@media (max-width: 767px){
  @supports not (-webkit-touch-callout: none){

    .front-hero .hero-caption{
      font-size: 10px;      /* ← ここ好みで 9〜11px */
      line-height: 1.25;
      padding: 3px 6px;
    }
  }
}

/* =========================
   iPhone（iOS Safari）専用：最小安定パッチ
   - 重ね構造は維持（static + splide）
   - Splideのtransformは絶対に触らない
   - “縦増殖”を箱固定で止める
   ========================= */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 767px){

    /* 1) iPhoneは「箱」を作って高さ暴走を止める */
    .front-hero-static{
      height: auto !important;
      max-width: 100% !important;
    }

    .front-hero-splide-host{
      /* PCの重ね設計を維持 */
      position: absolute !important;
      inset: 0 !important;
      left: 0; right: 0;
      margin: 0 auto;

      max-width: 100% !important;
      overflow: hidden !important;
      background: #000;

      /* ★ここがキモ：縦増殖ストッパー（どっちか選んでOK） */
      aspect-ratio: 1150 / 600 !important; /* 推し：安定 */
      height: auto !important;
    }

    /* 2) Splide内部は「箱に100%追従」 */
    .front-hero .splide__track,
    .front-hero .splide__list,
    .front-hero .splide__slide{
      height: 100% !important;
    }

    /* 3) 縦積みを防止（listを横1列に固定） */
    .front-hero .splide__list{
      display: flex !important;
      flex-direction: row !important;
      align-items: stretch !important;
    }
    .front-hero .splide__slide{
      flex: 0 0 100% !important;
    }

    /* 4) 画像：iPhoneは切らない方針ならcontainでOK */
    .front-hero .front-hero__img{
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important;
      display: block !important;
      background: #000;
    }

    .front-hero .hero-link{
      width: 100% !important;
      height: 100% !important;
    }

    /* 5) 静的画像は “残す” → Splide準備できたら透明化（display:none禁止） */
    .front-hero.front-hero--splide-ready .front-hero-static{
      opacity: 0;
      pointer-events: none;
    }
  }
}
/* =========================
   iPhone：キャプション文字サイズ微調整
   ========================= */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 767px){

    .front-hero .hero-caption{
      font-size: clamp(11px, 3.2vw, 14px);
      line-height: 1.25;
      padding: 4px 8px;
      border-radius: 5px;
    }

  }
}