@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 (Splide) 1135x600 固定（静的=LCP / Splide=上に重ねる）
 * ------------------------------------------------- */

.front-hero{
  position: relative;
}

/* 静的ヒーロー（LCP） */
.front-hero-static{
  display: block;
  max-width: 1135px;
  height: 600px;
  margin: 0 auto;
  overflow: hidden;
}

/* Splideを重ねるホスト（最初は透明） */
.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;
}

/* Splide起動後にフェードイン＆クリック有効 */
.front-hero-splide-host.is-ready{
  opacity: 1;
  pointer-events: auto;
}

/* track/list/slide の高さ固定（PC） */
.front-hero .splide__track,
.front-hero .splide__list,
.front-hero .splide__slide{
  height: 600px;
}

/* 画像：PCは枠に合わせてcoverで安定 */
.front-hero .front-hero__img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 画像クリック全体 */
.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;
}
/* Splide表示後は、静的ヒーローのキャプションだけ消す */
.front-hero.front-hero--splide-ready .front-hero-static .hero-caption{
  display: none;
}
/* スマホ：切らない（contain） */
@media (max-width: 767px){
  .front-hero-static{
    max-width: 100%;
    height: auto;
  }

  .front-hero-splide-host{
    max-width: 100%;
    height: auto;
  }

  /* ★スマホではhiddenで切らない */
  .front-hero-static,
  .front-hero-splide-host{
    overflow: visible;
  }

	  .front-hero .splide__pagination{
    bottom: 44px;
  }
	
  .front-hero .splide__track,
  .front-hero .splide__list,
  .front-hero .splide__slide{
    height: auto;
  }

  .front-hero .front-hero__img{
    width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: contain;
    background: #000;
  }

  /* ★クリック領域も自然高さに */
  .front-hero .hero-link{
    height: auto;
  }

  .front-hero .hero-caption{
font-size: 11px;
    line-height: 1.3;
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: normal;
    max-width: calc(100% - 16px);
    box-sizing: border-box;
    z-index: 5;
  }
}