/*
Theme Name: KidsPhoto Studios
Author: KidsPhoto
Description: ポータルサイト用カスタムテーマ
Version: 1.0
*/
/* ===== Global Design Tokens & Base ===== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Kiwi+Maru:wght@500&display=swap');

:root {
  --bg-base: #fdfaf5;
  --main-color: #ffb38a;
  --main-color-light: #fff0e6;
  --accent-brown: #8d7366;
  --accent-yellow: #f4d06f;
  --white: #ffffff;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: var(--bg-base);
  color: var(--accent-brown);
  -webkit-tap-highlight-color: transparent;
}

.app-container {
  max-width: 600px;
  margin: 0 auto;
  background-color: var(--bg-base);
  min-height: 100vh;
  position: relative;
}

/* index.php 部品 */
.hero-overlay {
  background: white;
  box-shadow: 0 10px 25px rgba(141, 115, 102, 0.08);
  position: relative;
  z-index: 50; /* メインビジュアルより前に出す */
}

.btn-main {
  background-color: var(--main-color);
  color: var(--white);
  transition: transform 0.1s ease;
}
.btn-main:active { transform: scale(0.98); }

/* --- 【修正版】メインビジュアル・スライド --- */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  /* 消えるときは一瞬（0s）にするのがコツです */
  transition: opacity 0s; 
  z-index: 5;
}
.slide.active {
  opacity: 1;
  visibility: visible;
  /* 現れるときだけ、時間をかけてふわっとさせる */
  transition: opacity 1.5s ease-in-out;
  z-index: 10;
}

/* 【最重要】メインビジュアル上のテキスト・検索窓を復活させる */
#slider-container .absolute,
#slider-container .hero-overlay,
#slider-container h2,
#slider-container p {
  z-index: 60 !important; /* スライド(10)より確実に前に出す */
  position: relative;
}

/* --- 【スライド式に変更】キャンペーンバナー --- */
#campaign-banner-slider {
    position: relative;
    overflow: hidden; /* 枠外の画像は見えなくする */
    display: flex;    /* 横並びの土台 */
}

.banner-slide {
    position: relative !important; /* absoluteから変更 */
    flex: 0 0 100%;             /* 1枚で幅いっぱいに */
    width: 100%;
    opacity: 1 !important;      /* スライドなので透明度は常に1 */
    visibility: visible !important;
    transition: transform 0.6s cubic-bezier(0.45, 0, 0.55, 1); /* スライドのアニメーション */
    display: block !important;
}

/* ドットの修正（画像の上に浮かせる） */
#campaign-banner-slider .absolute.bottom-2 {
    z-index: 30;
}
/* --- 【統合】お気に入り一覧のデザイン（外観から移動） --- */
.favorites-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
}
.fav-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.fav-image, .fav-image img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    display: block !important;
}
.fav-content {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.view-link {
    background: #f39800;
    color: #fff !important;
    padding: 8px 12px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    font-size: 0.85rem;
}

/* --- 以下、既存のスタイルを維持 --- */

/* アコーディオン */
.region-content { display: none; }
.region-content.open { display: block; }
.prefecture-detail { display: none; }
.prefecture-detail.open { display: block; }

/* Studio Hero & Details (以下、元のコード通り) */
.studio-main-image{ margin: 0 0 14px; border-radius: 18px; overflow: hidden; }
.studio-main-image img{ width: 100%; height: 320px; object-fit: cover; display: block; }
@media (min-width: 768px){ .studio-main-image img{ height: 420px; } }
.studio-detail h1{ margin: 10px 0 14px; font-size: 22px; line-height: 1.25; color: #2b2b2b; }

/* --- お問い合わせフォームのスマホ表示修正（ここから） --- */

/* 1. フォーム全体が画面を突き抜けないようにする */
.contact-main, .contact-container, .contact-body, .wpcf7-form {
    max-width: 100% !important;
    overflow-x: hidden !important; /* 横揺れ防止 */
}

/* 2. 入力欄のサイズをスマホに最適化 */
.wpcf7-form-control {
    width: 100% !important; /* 幅を100%に固定 */
    max-width: 100% !important;
    box-sizing: border-box !important; /* 余白を含めて100%にする（重要） */
    padding: 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    font-size: 16px !important; /* iPhoneでのズームを防止 */
    background: #fff !important;
    margin-top: 5px !important;
    -webkit-appearance: none; /* デフォルトのデザインをリセット */
}

/* 3. 送信ボタンを中央に配置 */
.wpcf7-submit {
    width: auto !important;
    min-width: 200px;
    background: #ff8c00 !important;
    color: #fff !important;
    border: none !important;
    padding: 15px 30px !important;
    border-radius: 50px !important;
    font-weight: bold !important;
    display: block !important;
    margin: 20px auto !important;
}

/* 4. スマホでの余白調整 */
@media (max-width: 768px) {
    .contact-body {
        padding: 20px !important;
        margin: 0 10px !important;
    }
}
/* --- お問い合わせフォームのスマホ表示修正（ここまで） --- */

/* -----------------------------------------------------------------
   投稿本文内のデザイン装飾 (single.php 用)
----------------------------------------------------------------- */

/* 1. 見出し2 (h2) - 落ち着いた茶色の左ボーダー */
.entry-content h2 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #4a4a4a;
    padding: 0.5rem 0 0.5rem 1rem;
    border-left: 5px solid #d4c1b0; /* サイトカラーに合わせたベージュ */
    background: #fdfbf9;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

/* 2. 見出し3 (h3) - 下線デザイン */
.entry-content h3 {
    font-size: 1.25rem;
    font-weight: bold;
    color: #5d5d5d;
    padding-bottom: 0.5rem;
    border-bottom: 2px dashed #f5efe6;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

/* 3. 段落 (p) の行間と余白 */
.entry-content p {
    margin-bottom: 1.8rem;
    line-height: 2;
}

/* 4. 箇条書き (ul / li) */
.entry-content ul {
    background: #fcfcfc;
    border: 1px solid #f5efe6;
    padding: 1.5rem 1.5rem 1.5rem 2.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.entry-content ul li {
    list-style-type: disc;
    color: #8d7366;
    margin-bottom: 0.5rem;
}

/* 5. 強調文字 (strong) */
.entry-content strong {
    background: linear-gradient(transparent 70%, #fef3c7 70%); /* 薄い黄色マーカー風 */
    font-weight: bold;
}

/* 6. 画像の角丸 */
.entry-content img {
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

//* --- エリア検索：3列デザイン維持・崩れ防止 --- */

/* 1. 全ての階層（地方・県・市）の土台を3列で完全固定 */
#area-accordion-container, 
#area-accordion-container .grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
}

/* 2. ボタンを3列の枠の中に正しく配置する */
#area-accordion-container .contents {
    display: contents !important;
}

/* 3. 展開エリアを「次の行の全幅（3列分）」に指定して、横のボタンを押し出さないようにする */
#area-accordion-container .accordion-content {
    grid-column: 1 / span 3 !important;
    width: 100% !important;
}

/* JSのhiddenクラスとの整合性を保つ */
#area-accordion-container .accordion-content.hidden {
    display: none !important;
}

/* ボタン内の文字サイズ維持 */
#area-accordion-container button span {
    font-size: 11px !important;
    font-weight: bold !important;
}
/* =================================================================
   目次：スマホ最適化・おしゃれ可愛いVer.
   ================================================================= */

#toc_container {
    background-color: #fffaf0 !important;
    border: 3px solid #ffb38a !important; 
    border-radius: 30px !important;
    padding: 25px 20px !important; 
    margin: 30px auto !important;
    width: 95% !important; 
    box-shadow: 6px 6px 0px #f5efe6 !important;
    background-image: none !important;
}

/* 階層ごとの余計な装飾をリセット */
#toc_container ul, 
#toc_container li, 
#toc_container ul.toc_list ul {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* リスト全体の枠：スマホで幅を確保 */
#toc_container ul.toc_list {
    list-style: none !important;
    padding: 0 !important; 
    margin: 0 !important;
}

/* 親項目（h2相当） */
#toc_container ul.toc_list > li {
    margin-bottom: 15px !important;
    padding-left: 25px !important;
    position: relative;
    line-height: 1.6 !important;
}

/* 子項目（h3相当）：スマホで右に寄りすぎないよう調整 */
#toc_container ul.toc_list ul {
    margin-top: 10px !important;
    padding-left: 15px !important; 
}

#toc_container ul.toc_list ul li {
    font-size: 0.9rem !important;
    margin-bottom: 8px !important;
    padding-left: 20px !important;
    position: relative;
}

/* 文頭の丸アイコン（親） */
#toc_container ul.toc_list > li::before {
    content: "●";
    position: absolute;
    left: 0;
    color: #ffb38a;
    font-size: 0.9rem;
}

/* 文頭の丸アイコン（子） */
#toc_container ul.toc_list ul li::before {
    content: "○";
    position: absolute;
    left: 0;
    color: #ffb38a;
    font-size: 0.8rem;
    top: 2px;
}

/* リンクのデザイン */
#toc_container a {
    color: #8d7366 !important;
    text-decoration: none !important;
    background: linear-gradient(transparent 75%, #fff0e6 75%);
    font-weight: 500;
}

/* スマホ専用の最終微調整 */
@media (max-width: 768px) {
    #toc_container {
        padding: 20px 15px !important;
    }
}