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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* 見出し */
.article h2,
.article h3{
  background: none; 
  border: none;    
  border-radius: 0; 
}
.white {
  color: #ffffff;
}
.black {
  color: #222222 !important;
}
.article h1{
  color: #ffffff;
}
/* 見出しと本文の左端をピッタリそろえる */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content p {
  margin-left: 0;
  padding-left: 0;
}
/* 投稿は見出しを非表示にする */
.single-post h1.entry-title {
	display: none;
}
h1{
 display: none;
}
.site-name-text {
display: none;
}
/* タイトル2 */
h2.title-2 {
position: relative;
padding: 16px 32px;
font-size: 24px;
letter-spacing: 0.1em;
display: block;
box-sizing: border-box;
max-width: 520px;
text-align: center;
margin: 40px auto; 
}

.title-2::before, .title-2::after {
content:'';
position: absolute;
left: 50%;
transform: translateX(-50%);
background: #C22B2B;
width: 40px;
height: 3px;
rotate: -25deg;
display: inline-block;
}

.title-2::before {
top: -8px;
}

.title-2::after {
bottom: 8px;
}
/* タイトル3 */
h1.title-3 {
  position: relative;
  padding: 8px 32px;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #fff;
  font-weight: 700;
  display: block;
  box-sizing: border-box;
  max-width: 520px;
  text-align: center; 
  margin: 40px auto;
}

.title-3::before, .title-3::after {
  content:'';
  position: absolute;
  background: #fff;
  width: 40px;
  height: 3px;
  rotate: -60deg;
  display: inline-block;
}

.title-3::before {
  top: 44%;
  left: 0;
}

.title-3::after {
  bottom: 44%;
  right: 0;
}

.title-3 span::before, .title-3 span::after {
  content:'';
  position: absolute;
  background: #fff;
  width: 40px;
  height: 3px;
  display: inline-block;
}

.title-3 span::before {
  left: 30px;
  top: 4px;
}

.title-3 span::after {
  right: 28px;
  bottom: 4px;
}
/* 画面幅いっぱいに広げる共通クラス */
.cstm-blk-fullwide {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
}
body {
  background-color: #3B3B3B !important;
}
.main {
  background-color: transparent;
}
/*固定ページの投稿日、更新日、投稿者名を非表示にする*/
.page .date-tags,
.page .author-info {
    display: none;
}
/* 右端のフローティングボタン専用スタイル */
.wp-block-button.floating-banner .wp-block-button__link {
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;

writing-mode: vertical-rl;

color: #fff !important;
background-color: #C22B2B !important;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1;

height: 150px;
padding-block: 0.3em;
padding-inline: 0.7em;
border-radius: 10px 0 0 10px;
transition: opacity 0.25s;
}
/* 右端に固定するレイアウト用 */
.wp-block-button.floating-banner {
	position: fixed;     
	right: 0;           
	top: 40%;           
	transform: translateY(-50%);
	z-index: 9999;      
}

/* 英語だけ小さく */
.wp-block-button.floating-banner .reservation-en {
font-size: 12px;
white-space: nowrap;
margin-block-end: 0.1em;
}

/* ========== ボタン装飾 ========== */
.btn-skew {
  display: block;
  margin: 2em auto;
  width: 100%;
  max-width: 250px;
  padding: 16px 16px;
  position: relative;
  overflow: hidden;
  border-radius: 9999px;   
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  cursor: pointer;

}

.btn-skew span {
  position: relative;
  z-index: 3;
  color: #ffffff;          
  transition: color 0.2s ease;
}

/* スライドしてくる色用 */
.btn-skew::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 100%;
  border-radius: inherit;
  transform: translateX(-130%) skewX(-25deg);
  transition: transform 0.5s ease;
}

.btn-skew:hover::before {
  transform: translateX(-10%) skewX(-25deg);
}
.btn-skew {
  margin-bottom: 40px;
}
/* 通常：黄色、ホバー：赤 */
.btn1 {
  border: 2px solid #E1B259;      
  background-color: #E1B259;      
}

.btn1::before {
  background-color: #C22B2B;     
}

.btn1:hover {
  border-color: #C22B2B;         
}
/* 通常：赤、ホバー：黄色 */
.btn2 {
  border: 2px solid #C22B2B;     
  background-color: #C22B2B;     
}

.btn2::before {
  background-color: #E1B259;    
}

.btn2:hover {
  border-color: #E1B259;       
}

/* ボタンリンク：中央揃え＋上下余白 */
.move-line-left {
  text-decoration: none;     
  position: relative;        
  color: #333;               
  padding-bottom: 6px;      
  font-weight: bold;        
  display: inline-block;    
}

/* 下から伸びる赤いライン */
.move-line-left::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #C22B2B; 
  transition: width 0.4s ease;
}

/* ホバーで全幅に広がる */
.move-line-left:hover::before {
  width: 100%;
}

/* 文字色は変えない */
.move-line-left:hover {
  color: #333333;
}

/* タグを押せない（クリック無効）にする */
.wp-block-post-terms a {
  pointer-events: none;
  cursor: default;   
}

/* ===== ボックスメニュー ===== */
/* 通常：白背景／赤アイコン／黒文字 */
.box-menu {
	background: #ffffff;   
	color: #333333;        
    box-shadow: none;  
	border: 2px solid #ffffff !important;
}

.box-menu a {
	color: inherit;       
	text-decoration: none;
}

/* アイコン：通常は赤 */
.box-menu-icon {
	color: #C22B2B;       
}

/* ホバー：赤背景／白アイコン／白文字 */
.box-menu:hover {
	background: #C22B2B;   
	color: #ffffff;        
	border: 2px solid #C22B2B !important;
	box-shadow: none;  
}

.box-menu:hover a {
	color: #ffffff;        
}

.box-menu:hover .box-menu-icon {
	color: #ffffff;       
}
/* ===== 円弧＆波（カスタムHTML版） ===== */

/* 円弧（上向き・下向き）の SVG 共通設定 */
:where(.cstm-blk-path-lower-cir, .cstm-blk-path-upper-cir) svg {
  display: block;
  fill: #f6f6f6;
  width: 100%;
  height: 6vmin;   
}
.path-white svg {
  fill: #ffffff;
}

.path-black svg {
  fill: #3B3B3B;
  background-color: #ffffff;
}
/* 波（上向き・下向き）の SVG 共通設定 */
:where(.cstm-blk-path-lower-wave, .cstm-blk-path-upper-wave) svg {
  display: block;
  width: 100%;
  height: 7vmin;
}

/* 上側に付けるブロック（境目の食い違い防止） */
.cstm-blk-path-upper-cir,
.cstm-blk-path-upper-wave {
  margin-bottom: 0 !important;
}

/* 上向きはほんの少し下にずらす */
:where(.cstm-blk-path-upper-cir, .cstm-blk-path-upper-wave) {
  transform: translateY(1px);
}

/* 下向きはほんの少し上にずらす */
:where(.cstm-blk-path-lower-cir, .cstm-blk-path-lower-wave) {
  transform: translateY(-1px);
}
/* ==== トップページの投稿カード一覧（3列グリッド） ==== */
/* グリッド */
.top-posts .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/* カード本体 */
.top-posts .wp-block-post {
	background-color: #ffffff;
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	padding: 6px 6px 6px;
	overflow: hidden;
	margin-top: 20px;
　 border: 2px solid transparent;
　 transition: border-color 0.25s ease,
              transform 0.25s ease,
              box-shadow 0.25s ease; 
}

/* アイキャッチ */
.top-posts .wp-block-post-featured-image img {
	display: block;
	width: auto;
	height: 160px;       
	object-fit: cover;
    margin-left: auto;   
	margin-right: auto;
}

.top-posts .wp-block-post-title {
	margin: 0;
}

.top-posts .wp-block-post-title a {
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	color: #222;
	text-decoration: none;
}
/* ホバー時 */
.top-posts .wp-block-post:hover {
  transform: translateY(-4px);        
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}

/* =====グループごとに白い四角で囲むカード==== */
.white-card {
  background-color: #ffffff;         
  border-radius: 16px;               
  padding: 20px 20px;                
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); 
  margin: 24px auto;             
}
	
.white-card2 {
  background-color: #ffffff;
  color: #333333;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  margin: 24px auto;
  padding: 20px;
  text-align: left;   
}

.white-card2 h3 {
  text-align: left;   
  margin-top: 0;
  margin-bottom: 8px;
}

.white-card2 p {
  text-align: left; 
  margin: 8px 0 8px;  
}
/* =====シナリオ用の見出し==== */
h2.scenario  {
   position: relative;
   text-align: center;
   padding: 1em;
   color:#fff; 
   font-size: 40px;
}
h2.scenario::before,
h2.scenario::after {
   position: absolute;
   content: '';
   width: 30%; 
   height: 2px; 
   background: #C22B2B; 
}

h2.scenario::before {
   left: 0;
   top: 0;
}
h2.scenario::after {
   right: 0;
   bottom: 0;
}

h3.scenario  {
  background-color: #C22B2B;      
  display: inline-block;
  color: #fff;                    
  border-radius: 0 99px 99px 0;   
  padding: 6px 16px;            
}
/* =====コンテンツページ==== */
/* 投稿一覧ページ用 */
.posts-archive .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);  
	gap: 20px;
	margin-top: 20px;
}

/* 各カード */
.posts-archive .wp-block-post {
	background-color: #ffffff;
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 6px 8px 8px;
	overflow: hidden;
	border: 8px solid transparent;   
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	text-align: center; 
}

/* ホバー時に赤い枠線を出す */
.posts-archive .wp-block-post:hover {
	border-color: #C22B2B;            
	box-shadow: 0 10px 28px rgba(0,0,0,0.16);  
}
.posts-archive .wp-block-post-featured-image {
	margin: 0 0 4px;
	overflow: hidden;
}

.posts-archive .wp-block-post-featured-image img {
	display: block;
	width: auto;
	height: 220px;        
	object-fit: cover;
	margin-left: auto;   
	margin-right: auto;
}
.posts-archive .wp-block-post-title {
	margin: 0 0 4px;
         text-align: center;  
}

.posts-archive .wp-block-post-title a {
	display: block;
	font-size: 18px;
	font-weight: 700;
	color: #222;
	text-decoration: none;
}

/* タグ行全体（余白だけ） */
.posts-archive .wp-block-post-terms {
	margin: 2px 0 0;
	font-size: 12px;
}

/* タグのボタン：通常は黄色 */
.posts-archive .wp-block-post-terms a {
	display: inline-block;
	margin: 2px 2px 0 0;
	padding: 4px 8px;
	border-radius: 9999px;
	background-color: #E1B259;  
	color: #333;               
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* ホバー時に赤にする */
.posts-archive .wp-block-post-terms a:hover {
	background-color: #C22B2B;  
	color: #fff;                
}
/* =====フッター==== */
.footer {
  margin-top: 0 !important;
}
/* フッター左エリア全体を中央寄せ */
.footer-left {
	text-align: center;
}
/* フッターセンターを非表示にする */
.footer-center {
	display: none;
}
/* 右側フッターエリア全体の余白 */
.footer-right {
	padding: 16px 20px;
}
/* メニュー全体（ul）のリセット */
.footer-right .widget-footer-right .menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* 各メニュー行の間隔 */
.footer-right .widget-footer-right .menu > li {
	margin-bottom: 4px; 
}
/* メニューリンクの基本スタイル */
.footer-right .widget-footer-right .menu > li > a {
	font-weight: 500;   
	font-size: 14px;
}

/* ホバー時 */
/* PC右フッター + モバイルフッター、両方に適用 */
.footer-right .widget-footer-right .menu > li > a:hover,
.footer-widgets-mobile .footer-mobile .widget-footer-mobile .menu > li > a:hover {
  color: #ffd460;
  background: #E1B259;
}
/* 現在のページのメニューだけ強調 */
.footer-right .widget-footer-right .menu > li.current-menu-item > a,
.footer-widgets-mobile .footer-mobile .widget-footer-mobile .menu > li.current-menu-item > a {
  font-weight: 700;
  color: #ffffff;
}
/* =====スライドメニュー==== */
  .mobile-menu-buttons .menu-caption{
    display: none;
  }
  .mobile-menu-buttons{
    align-items: center;
  }
/*モバイルメニュー背景色*/
/* スライドメニュー */
.navi-menu-content .menu-drawer a,
.navi-menu-content .menu-drawer a:visited {
	color: #333333;
	text-align: center;
	font-weight: bold;
}
.navi-menu-content {
	left: auto;
	right: 0;
	transform: translateX(105%);
	background-color: rgba(255,255,255,0.7);
	opacity: 0;
}

.menu-drawer a {
	display: block;          
	padding: 8px 12px;       
	border-radius: 50px;   
	transition: background-color 0.2s ease, color 0.2s ease;
    margin :8px;
}

/* マウスオーバー時の背景＋文字色 */
.menu-drawer a:hover {
	background-color: #C22B2B;  
	color: #ffffff;             
}

/* サブメニュー */
.sub-menu li {
	margin-left: -14px;
	font-size: 0.9em;
	color: #C22B2B;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*834px以下*/
@media screen and (max-width: 834px){
  /*トップページカード*/
	.top-posts .wp-block-post-template {
	grid-template-columns: repeat(2, 1fr);
	}
	.posts-archive .wp-block-post-template {
	grid-template-columns: repeat(2, 1fr);
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*トップページカード*/
  .top-posts .wp-block-post-template {
	grid-template-columns: 1fr;
	justify-items: center;  
	}
	.posts-archive .wp-block-post-template {
	grid-template-columns: 1fr;
	justify-items: center;  
	} 
/* カード本体：最大幅を決めて左右を揃える */
.top-posts .wp-block-post {
width: 90%;
margin-top: 20px;
margin-left: 0;
margin-right: 0;
}
.posts-archive .wp-block-post {
width: 90%;
margin-top: 20px;
margin-left: 0;
margin-right: 0;
}
	
/* posts-archiveの画像全体表示 */
.posts-archive .wp-block-post-image img {
width: 100%;
height: auto;
object-fit: contain;
}
  /*ホワイトカード*/
  .white-card {
    padding: 16px 14px;
    border-radius: 12px;
    margin: 16px 20px;
  }
  /*フッター*/
 .footer-widgets-mobile,
  .footer-mobile {
    display: flex;
    flex-direction: column; 
    align-items: center;    
    text-align: center;
  }
 .footer-widgets-mobile .footer-mobile .widget-footer-mobile {
    max-width: 420px;       
    margin: 0 auto;         
    padding: 0 16px;      
  }

  .footer-widgets-mobile .footer-mobile .widget-footer-mobile .menu > li > a {
    display: block;
    width: 100%;
    padding: 10px 40px;    
	  margin:4px 0px;
  }
  /*ボタン*/
　.btn-skew {
		padding: 8px 16px;   
		margin: 1.5em auto;  
		font-size: 0.9rem;   
}
	/* スマホで非表示 */
 .wp-block-button.floating-banner {
display: none;
}
	h2.title-2 {
font-size: 17px;
text-align: center;
}
  .wp-block-group.content-box.is-layout-constrained > * {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
}