@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){
  /*必要ならばここにコードを書く*/
}



/* ================== 5カラム固定レイアウト（PC） ================== */

.page-template-top-page .wrap {
  width: 100%;
} 

.page-template-top-page .main {
  padding: 0px;
}


/* このテンプレートのページだけ効かせるスコープ */
.page-template-top-page .hero-collage5 {
  display: grid;                                  /* Gridレイアウトを使う */
  grid-template-columns: repeat(5, 1fr);          /* 横5等分（= 5マス） */
  grid-auto-rows: 280px;                          /* 基本の行高＝1マスの高さ */
  gap: 0px;                                       /* マス間の余白 */
  width: 100%;
  margin: 0 auto;
  padding: 0px;
  box-sizing: border-box;
}

/* 画像の見え方（共通） */
.page-template-top-page .hero-collage5 .hero-item img {
  width: 100%; height: 100%;                      /* スロットにピッタリ填める */
  object-fit: cover;                               /* はみ出しは自然にトリミング */
  display: block; 
  border-radius: 0px; /* 角丸＆行間の隙間対策 */
  opacity: 0;
  animation: heroFade .9s ease forwards; /* ふわっと表示 */
}
@keyframes heroFade { to { opacity: 1; } }

/* ---- 行と列の“座標”を固定：テンプレートエリア ---- */
/*  Row1: [ tallL ][  wide  ][ normal1 ][ tallR ]         */
/*  Row2: [   .   ][ s-wide ][   .     ]                  */
/*  Row3: [ normal2 ][ normal3 ][  wide2  ][ normal4 ]    */
.page-template-top-page .hero-collage5 {
  grid-template-areas:
    "tallL  wide   wide   normal1 tallR"
    ".      swide  swide  swide   ."
    "normal2 normal3 wide2 wide2  normal4";
  /* ↑ 各文字列が「横5マス×縦3行」を定義している */
}

/* ---- スロット（座標）に各カードを割当 ---- */
.page-template-top-page .hero-collage5 .cell-tallL  { grid-area: tallL;  }
.page-template-top-page .hero-collage5 .cell-wide1  { grid-area: wide;   }
.page-template-top-page .hero-collage5 .cell-n1     { grid-area: normal1;}
.page-template-top-page .hero-collage5 .cell-tallR  { grid-area: tallR;  }
.page-template-top-page .hero-collage5 .cell-swide  { grid-area: swide;  }
.page-template-top-page .hero-collage5 .cell-n2     { grid-area: normal2;}
.page-template-top-page .hero-collage5 .cell-n3     { grid-area: normal3;}
.page-template-top-page .hero-collage5 .cell-wide2  { grid-area: wide2;  }
.page-template-top-page .hero-collage5 .cell-n4     { grid-area: normal4;}

/* ---- 大きさの“縦横スパン”を指定（エリアサイズと一致させる） ---- */
.page-template-top-page .hero-collage5 .tall   { grid-row: span 2; }  /* 縦2マス */
.page-template-top-page .hero-collage5 .wide   { /* 横2マス：エリア側が2列分なので追加指定不要 */ }
.page-template-top-page .hero-collage5 .s-wide { /* 横3マス：エリア側が3列分なので追加指定不要 */ }

/* ================== スマホ（<=767px）は2列に崩して自然配置 ================== */
@media (max-width: 767px) {
  .page-template-top-page .hero-collage5 {
    grid-template-columns: repeat(2, 1fr);        /* 2列に切替 */
    grid-auto-rows: 160px;
    grid-template-areas: none;                    /* 座標固定を解除して“自然配置”に */
  }
  .page-template-top-page .hero-collage5 .wide   { grid-column: span 2; } /* 横2マス＝全幅 */
  .page-template-top-page .hero-collage5 .s-wide { grid-column: span 2; } /* 同上 */
  .page-template-top-page .hero-collage5 .tall   { grid-row: span 2; }    /* 縦長は維持 */
}

/* ============== カードのホバー演出（軽め・可読優先） ============== */
/* マウスやキーボードフォーカスで、少しだけ持ち上げる＆影を出す */
.page-template-top-page .hero-collage5 .hero-item {
  transition: transform .2s ease, box-shadow .2s ease; /* ふわっと変化（速すぎず遅すぎず） */
  will-change: transform;                               /* GPUにヒントを与えてカクつき軽減 */
}

/* マウスホバー */
.page-template-top-page .hero-collage5 .hero-item:hover {
  transform: translateY(-4px);                          /* 4pxだけ上に持ち上げる */
  box-shadow: 0 8px 20px rgba(0,0,0,.12);               /* うっすら影 */
}

/* キーボード操作でも気づけるよう :focus-visible にも適用 */
.page-template-top-page .hero-collage5 .hero-item:focus-visible {
  outline: 3px solid #5aa7ff;                           /* 視認しやすい青ライン */
  outline-offset: 2px;
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  border-radius: 12px;                                   /* 角のにじみを軽減 */
}

/* 動きを苦手とする利用者（OS設定）にはアニメを止める */
@media (prefers-reduced-motion: reduce) {
  .page-template-top-page .hero-collage5 .hero-item,
  .page-template-top-page .hero-collage5 .hero-item:hover,
  .page-template-top-page .hero-collage5 .hero-item:focus-visible {
    transition: none;
    transform: none;
    box-shadow: none;
  }
}


/* ===== ハンバーガー（1個のトグルボタン） 左上固定 & 3本線→×  ===== */
:root{ --om-ui-gap: 12px; } /* 端末のノッチ回避余白 */

.nav-toggle{
  position: fixed; /* 画面基準で左上に固定 */
  top: calc(env(safe-area-inset-top, 0px) + var(--om-ui-gap));
  left: calc(env(safe-area-inset-left, 0px) + var(--om-ui-gap));
  z-index: 10020;  /* 暗幕より手前に */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;             /* タップ領域確保 */
  padding: 8px 12px;
  background: rgba(0,0,0,.08);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle:hover{ background: rgba(0,0,0,.12); }
.nav-toggle:focus{ outline: 2px solid #2684ff; outline-offset: 2px; }

/* 3本線の見た目 */
.nav-toggle-bars{ position: relative; width: 22px; height: 16px; display: inline-block; }
.nav-toggle-bars span{
  position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; border-radius: 2px;
  transform-origin: center;
  transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle-bars span:nth-child(1){ top: 0; }
.nav-toggle-bars span:nth-child(2){ top: 7px; }
.nav-toggle-bars span:nth-child(3){ top: 14px; }

/* モーダル開時に × へ変形（中央線は消す） */
body.om-nav-open .nav-toggle-bars span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
body.om-nav-open .nav-toggle-bars span:nth-child(2){ opacity: 0; }
body.om-nav-open .nav-toggle-bars span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* 背面スクロール停止（JSで .om-nav-open を付与） */
body.om-nav-open{ overflow: hidden; }

/* モーダルのレイヤーを明示（任意：競合回避） */
.om-modal,
.om-modal-bg,
.modal-content.menu-content{
  z-index: 10000;
  width: 100%;
  max-width: none;
}

.om-modal-inner {
  padding: 0 40px;
}

/* もし以前の×ボタン(.om-modal-close)が残っていたら隠す */
.om-modal-close{ display: none !important; }

/* ========== モーダル内の“マニア”タイル群 ========== */

/* UL自体の並び：スマホ2列、タブレット3列、PC4列 */
.mania-anchor-list{
  display: grid;                 /* グリッドで並べる */
  grid-template-columns: repeat(2, 1fr); /* まずは2列 */
  gap: 12px;                     /* タイル間の余白 */
  padding: 0; margin: 0; list-style: none;
}
@media (min-width: 600px){
  .mania-anchor-list{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px){
  .mania-anchor-list{ grid-template-columns: repeat(4, 1fr); }
}

/* 各タイル（li） */
.mania-anchor-list .mania-card{
  position: relative;            /* 子要素のabsolute基準にする */
  overflow: hidden;              /* 角丸からはみ出す部分を隠す */
  border-radius: 14px;           /* 角丸 */
  min-height: 160px;             /* 最低高さ（画像がない時の保険） */
  aspect-ratio: 4/3;             /* 画像アスペクトを維持したい場合 */
}
.mania-anchor-list .mania-card > a{
  display: block;                /* タイル全体をクリック可能化 */
  width: 100%; height: 100%; color: inherit; text-decoration: none;
}

/* 背景画像（全面にフィット） */
.mania-anchor-list .mania-card .bg{
  position: absolute; inset: 0;  /* 親いっぱいに広げる */
}
.mania-anchor-list .mania-card .bg img{
  width: 100%; height: 100%;
  object-fit: cover;             /* 余白なしでトリミング */
  display: block;                /* 余計な隙間を消す */
  filter: brightness(0.92);      /* ほんのり暗くして文字を読みやすく */
  transition: transform .25s ease;
}

/* ホバーで背景画像をわずかにズーム（PC向けの視覚効果） */
@media (hover: hover){
  .mania-anchor-list .mania-card:hover .bg img{
    transform: scale(1.03);
  }
}

/* “New” バルーン表示位置（右上） */
.mania-anchor-list .mania-card .new-flg{
  position: absolute; top: 8px; right: 8px;
  width: 60px; pointer-events: none; /* クリックを邪魔しない */
}
.mania-anchor-list .mania-card .new-flg img{ width: 100%; height: auto; }
.mania-anchor-list .mania-card .new-flg.is-hide{ display: none; } /* JSで切替 */

/* ラベル（ボタン風）を左下に固定 */
.mania-anchor-list .mania-card .mania-ttl-wrap{
  position: absolute; left: 10px; bottom: 10px; right: 10px;
  display: flex; justify-content: flex-start;
}

/* ボタン風の見た目（最低限） */
.om-button{ font-size: 14px; line-height: 1; }
.om-button .om-button-inner{
  display: inline-flex; align-items: center; gap: .5em;
  padding: 10px 12px; border-radius: 999px; /* pill 形状 */
  background: rgba(255,255,255,.9);         /* デフォルト。上書きはstyle属性で */
  backdrop-filter: blur(2px);               /* うっすら背景をぼかす（対応環境） */
}
.om-button .om-button-label{ font-weight: 700; }

/* 画像と文字のコントラスト確保のため、文字に薄い影 */
.mania-anchor-list .mania-card .om-button-label{
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/************************************
** クレーンゲーム特集：KVセクション
** 目的：特集ページの冒頭に、アイキャッチとなるビジュアル＋テキストを配置
************************************/

/* クレーンゲーム特集のKVエリア */
.page-crane-game .kv-crane {
  background-color: #f8f8f8;
  text-align: center;
  padding: 60px 20px;
}

.kv-crane {
  position: relative;                /* テキストを画像の上に重ねるための基盤 */
  width: 100%;
  height: 60vh;                      /* 表示エリアの高さ（viewportの60%） */
  min-height: 300px;                /* スマホでも潰れないよう最低高さを指定 */
  overflow: hidden;                 /* はみ出た要素を非表示 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.kv-crane__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;                /* 画像を枠いっぱいにトリミング表示 */
  display: block;
}

.kv-crane__text {
  position: absolute;               /* 画像の上に重ねて配置する */
  z-index: 10;
  color: white;
  text-align: center;
  padding: 1em;
  max-width: 90%;
}

.kv-crane__title {
  font-size: 2.4rem;
  font-weight: bold;
  text-shadow: 0 2px 5px rgba(0,0,0,0.6);  /* 可読性向上のため影を付ける */
  margin: 0 0 0.5em;
}

.kv-crane__lead {
  font-size: 1.2rem;
  line-height: 1.6;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* ===== スマホ対応（文字サイズと配置調整） ===== */
@media screen and (max-width: 767px) {
  .kv-crane {
    height: 50vh;
    min-height: 200px;
  }

  .kv-crane__title {
    font-size: 1.6rem;
  }

  .kv-crane__lead {
    font-size: 1rem;
  }
}


/* ===============================
 * 多言語切り替えリンク（テキスト表示）スタイル
 * =============================== */

.language-switcher {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各言語リンクの外観 */
.language-switcher a {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  color: #333;
  background-color: #fff;
  transition: all 0.2s ease;
}

/* ホバー時の演出 */
.language-switcher a:hover {
  background-color: #4674b2;  /* ホバー時の背景 */
  color: #fff;                /* テキスト色反転 */
  border-color: #4674b2;
}

/* 現在の言語を強調（色を変える） */
.language-switcher .current-lang a {
  background-color: #4674b2;
  color: #fff;
  border-color: #4674b2;
}


/* ===============================
 * 店舗カードのグリッドレイアウト
 * =============================== */
.store-list__grid {
  display: grid;                         /* グリッドレイアウト */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* 可変カラム */
  gap: 24px;                             /* カード間のスペース */
  padding: 20px 0;
}

/* ===============================
 * 店舗カード全体
 * =============================== */
.store-card {
  background: #fff;                      /* 背景白 */
  border: 1px solid #ddd;                /* 薄い枠線 */
  border-radius: 12px;                   /* 角丸 */
  overflow: hidden;                      /* 子要素がはみ出さないように */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* ほんのり影 */
  transition: transform 0.2s ease;
}

.store-card:hover {
  transform: translateY(-4px);           /* ホバー時に少し浮かせる */
}

/* ===============================
 * カード内の画像
 * =============================== */
.store-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ===============================
 * 店舗名タイトル
 * =============================== */
.store-card__title {
  font-size: 18px;
  margin: 12px;
  text-align: center;
  color: #333;
  font-weight: bold;
}


/* ===============================
 * 店舗アーカイブ一覧ページのスタイル
 * =============================== */

/* アーカイブのKV部分 */
.archive-spot .spot-archive-kv {
  background: #f8f8f8;
  text-align: center;
  padding: 40px 20px;
}

.spot-archive-kv__title {
  font-size: 28px;
  margin-bottom: 8px;
}

.spot-archive-kv__lead {
  font-size: 16px;
  color: #555;
}

/* 店舗カード一覧（グリッド表示） */
.spot-archive-list__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 店舗カード */
.spot-card {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s;
}

.spot-card:hover {
  transform: translateY(-4px);
}

.spot-card__thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.spot-card__title {
  font-size: 18px;
  padding: 12px;
  color: #333;
  text-align: center;
}


/* ===============================
 * 店舗カード（アーカイブ一覧用）
 * =============================== */

.spot-card {
  border: 1px solid #ccc;           /* 枠線 */
  padding: 12px;                    /* 内側余白 */
  border-radius: 8px;               /* 角丸 */
  background: #fff;                 /* 背景白 */
  transition: box-shadow 0.2s ease;
}

.spot-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* ホバー時に影を出す */
}

.spot-card__thumb img {
  width: 100%;                      /* 幅いっぱいに表示 */
  height: auto;                     /* 高さは自動調整 */
  border-radius: 6px;               /* 画像の角も丸める */
}

.spot-card__title {
  font-size: 18px;                  /* タイトル文字サイズ */
  font-weight: bold;               /* 太字 */
  margin: 0.5em 0;
}

.spot-card__address,
.spot-card__tel,
.spot-card__hours {
  font-size: 14px;                  /* 情報系は少し小さめ */
  color: #555;                      /* 少し薄い文字色 */
  margin: 0.2em 0;
}

.spot-card__link a {
  display: inline-block;
  color: #0073aa;                   /* 青系のリンク色 */
  text-decoration: underline;
  margin-top: 6px;
}