@charset "utf-8";

/* =================================================================================
   1. サイト全体の基本設定
   - ここでは、サイト全体の文字のフォント、色、背景色など、基本的なデザインを指定します。
   - どのページにも共通で適用される、いわばサイトの「憲法」のような部分です。
================================================================================= */
body {
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif; /* PCやスマホで美しく表示されやすい日本語フォントを指定 */
    margin: 0; /* ブラウザが勝手につける余白をリセット */
    font-size: 16px; /* サイトの基準となる文字の大きさ */
    line-height: 1.8; /* 行と行の間隔。1.8倍に設定し、読みやすくする */
    color: #333; /* 基本の文字色。真っ黒(#000)より少し柔らかい */
    background-color: #f9f9f9; /* 背景色。真っ白(#fff)より少し落ち着いた色に */
}

/* 画像が親要素からはみ出さないようにするおまじない */
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom; /* 画像の下にできる謎の隙間を消す対策 */
}

/* リンク文字の基本デザイン */
a {
    color: #8b4513; /* リンク色を茶系に（お店のテーマカラー） */
    text-decoration: none; /* リンクの下線を消す */
}

/* 見出しのデザイン */
h1, h2 {
    text-align: center; /* 見出しを中央揃えに */
}
h1 {
    font-size: 1.5em; /* 基準文字サイズ(16px)の1.5倍の大きさ */
}
h2 {
    font-size: 1.4em;
    border-bottom: 2px solid #8b4513; /* 見出しの下に茶系の線を引く */
    padding-bottom: 0.5em; /* 線と文字の間の余白 */
}

/* リスト（箇条書き）の黒い点を消す */
ul {
    list-style: none;
    padding-left: 0;
}

/* 各コンテンツエリアの内側の余白を管理する便利クラス */
.inner {
    padding: 20px;
}

/* 汎用的なボタンのデザイン */
.button {
    display: inline-block; /* ボタンのように振る舞わせる */
    background-color: #8b4513; /* 茶系 */
    color: #fff;
    padding: 10px 30px;
    border-radius: 5px; /* 角を少し丸くする */
}


/* =================================================================================
   2. トップページ（index.html）用のデザイン
   - トップページだけで使われる、特別なデザインを指定します。
================================================================================= */

/* --- ヘッダー（ロゴ）エリア --- */
header {
    background-color: #fff;
    padding: 1em;
    text-align: center;
    border-bottom: 1px solid #eee;
}
header h1 {
    margin: 0;
    font-size: 1.5em;
}

/* --- メインビジュアル（一番上の大きな写真）エリア --- */
.hero {
    position: relative; /* 中の文字(h1)を重ねるための基準点にする */
    text-align: center;
}
.hero h1 {
    position: absolute; /* hero画像を基準に、絶対位置で配置 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 要素自身の大きさの半分ずつズラして、完璧な中央揃えにするテクニック */
    width: 90%;
    color: white;
    background-color: rgba(0, 0, 0, 0.5); /* 文字が読みやすいように、半透明の黒い背景を敷く（0.5は透明度）*/
    padding: 1em; /* 文字の周りの余白 */
}

/* --- 「当店のこだわり」セクション --- */
.concept {
    background-color: #fff;
    text-align: center;
}

/* --- 「シーン別のご案内」メニュー --- */
.menu ul {
    display: flex;   /* flexboxを使い、中のli要素を横並びにする */
    flex-wrap: wrap; /* 画面に収まらない場合は折り返す */
    gap: 10px;       /* 各項目間の隙間 */
}
.menu li {
    flex-basis: calc(33.333% - 10px); /* 画面幅の約1/3の幅を指定し、3列に見せる */
    text-align: center;
}
.menu a {
    display: block; /* リンクエリアをliいっぱいに広げる */
    padding: 15px 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* --- 「店内写真」「お知らせ」など --- */
.salon-info, .news {
    background-color: #fff;
}
.news li {
    border-bottom: 1px dotted #ccc;
    padding: 10px 0;
}

/* --- フッター（ページの一番下） --- */
footer {
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    color: #666;
}


/* =================================================================================
   3. 下層ページ（トップページ以外）用のデザイン
   - 成人式ページや浴衣ページなど、すべての下層ページに共通するデザインを指定します。
================================================================================= */
.page-content {
    background-color: #fff;
    padding: 2em 0;
}
.page-content h1 {
    font-size: 2em;
    color: #333;
    background: none; /* トップページのh1と違い、背景は不要なのでリセット */
    text-align: left;
    padding: 0;
    margin-bottom: 1em;
    border-bottom: 2px solid #8b4513; /* 代わりに下線を引く */
    padding-bottom: 0.5em;
}
.page-content h2 {
    text-align: left; /* h2も左揃えに */
}

/* --- パンくずリスト（ホーム > ゆかた > ... のような現在地表示） --- */
.breadcrumb {
    font-size: 0.9em;
    color: #666;
    border-bottom: 1px solid #eee;
    padding-bottom: 1em;
    margin-bottom: 2em;
}

/* --- 持ち込み／レンタル選択ページ --- */
.choice-container {
    display: grid; /* gridを使い、ボックスを並べる */
    gap: 2em;      /* ボックス間の隙間 */
    margin: 3em 0;
}
.choice-box {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    padding: 2em;
    border-radius: 8px;
    text-align: center;
    display: flex;         /* flexboxを使い、中の要素を縦に並べる */
    flex-direction: column;
}
.choice-box h2 {
    border-bottom: none;
    font-size: 1.8em;
    margin-top: 0;
}
.choice-box .button {
    margin-top: auto; /* ボタンをボックスの一番下に配置するテクニック */
}
.button-rental {
    background-color: #e60012; /* レンタルボタンだけ色を変えて目立たせる */
}
.rental-flow {
    border: 2px dotted #8b4513;
    padding: 1.5em;
    border-radius: 8px;
    background-color: #fffaf0;
}


/* =================================================================================
   4. レンタル浴衣カタログ・予約機能用のデザイン
   - 浴衣の検索から予約完了までの、一連の機能ページに適用するデザインです。
================================================================================= */

/* --- 日付選択フォーム --- */
.date-selector {
    background-color: #fff;
    padding: 2em 0;
    border-bottom: 1px solid #eee;
}
.date-selector .inner {
    max-width: 800px;
    text-align: center;
}

/* --- 浴衣カタログ（カード型レイアウト） --- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* スマホでは2列表示 */
    gap: 1.5em;
    margin-top: 2em;
}
.product-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden; /* 角丸からはみ出た部分を隠す */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 薄い影をつけて立体感を出す */
    transition: transform 0.2s; /* マウスを乗せた時のアニメーション */
}
.product-card:hover {
    transform: translateY(-5px); /* マウスを乗せると少し浮き上がる */
}
.product-card img {
    aspect-ratio: 1 / 1; /* 画像の縦横比を1:1（正方形）に保つ */
    object-fit: cover;   /* 画像が歪まないように、正方形の中にきれいに収める */
}
.product-info {
    padding: 1em;
    text-align: center;
}
.product-name {
    font-weight: bold;
    margin: 0 0 0.5em 0;
}
.product-price {
    color: #c00;
    font-weight: bold;
}
.product-price span {
    font-size: 0.8em;
    font-weight: normal;
    color: #333;
}

/* --- 浴衣詳細ページ --- */
.product-detail-container {
    background-color: #fff;
    padding: 1.5em;
    border-radius: 8px;
}
.product-detail-image img {
    border-radius: 8px;
    border: 1px solid #eee;
}
.product-detail-info .product-name {
    font-size: 1.8em; /* h1と同じスタイルを適用 */
    margin: 0 0 0.5em 0;
    padding: 0;
    border: none;
    text-align: left;
    background: none;
    color: #333;
}
.product-description {
    margin: 1.5em 0;
    line-height: 1.7;
    border-top: 1px solid #eee;
    padding-top: 1.5em;
}
.yoyaku-flow-box {
    margin-top: 2em;
    padding: 1.5em;
    background-color: #fffaf0;
    border-radius: 8px;
    text-align: center;
}

/* --- 予約フォーム・完了ページ --- */
.form-container, .thank-you-container { /* 2つのページで共通のデザインを使う */
    max-width: 600px;
    margin: 0 auto; /* 中央揃え */
    background-color: #fff;
    padding: 2em;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.confirmation-summary {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    padding: 1.5em;
    border-radius: 8px;
    margin-bottom: 2em;
}
.yoyaku-item {
    display: flex;
    align-items: center;
    gap: 1.5em;
}
.yoyaku-item img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
}

/* --- 最終確認ページの注意書き --- */
.caution-box {
    margin-top: 2em;
    padding: 1em 1.5em;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 0.9em;
}
.caution-box p {
    margin: 0;
    line-height: 1.7;
}



/* =================================================================================
   5. レスポンシブ対応（PC用のデザインを上書き）
   - @media ... { } の中に書いたデザインは、指定した画面幅以上の場合にのみ適用されます。
   - 「モバイルファースト」の考え方に基づき、PC用のデザインは最後にまとめて書きます。
================================================================================= */

/* --- 画面幅が768px以上（タブレットなど）になった時のデザイン --- */
@media (min-width: 768px) {

    /* 全体のコンテンツ幅を少し広げ、中央揃えに */
    .inner {
        max-width: 980px;
        margin-left: auto;
        margin-right: auto;
    }
    .page-content .inner {
        max-width: 800px; /* 下層ページは少し狭いまま */
    }

    /* トップページ：「こだわり」セクションを横並びに */
    .concept .inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    /* トップページ：「お知らせ」を2列に */
    .news ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    /* トップページ：「店内写真」を横並びに */
    .photo-grid {
        display: flex;
        gap: 10px;
    }

    /* 下層ページ：「持ち込み／レンタル」を2列に */
    .choice-container {
        grid-template-columns: 1fr 1fr;
    }
    
    /* カタログページ：浴衣一覧を3列に */
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* 詳細ページ：写真と情報を横並びに（画像優先の比率） */
    #yukata-detail {
        display: grid;
        grid-template-columns: 1.5fr 1fr; /* 画像側を1.5、情報側を1の比率に */
        gap: 2.5em;
        align-items: flex-start;
        padding: 2.5em;
    }
}

/* --- さらに広い画面用（横幅1024px以上）のデザイン --- */
@media (min-width: 1024px) {
    .page-content .inner {
        max-width: 980px; /* コンテンツ全体の最大幅を広げる */
    }
    .product-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    #yukata-detail {
        grid-template-columns: 2fr 1fr;
    }
} /* ★★★おそらく、ここの閉じカッコが抜けていました★★★ */


/* =================================================================================
   6. 汎用フォーム部品のデザイン
   - お客様情報入力フォームや、各ページのボタンなどに共通で使うデザインです。
================================================================================= */

/* --- フォーム全体の入れ物 --- */
.customer-form .form-group {
    margin-bottom: 1.5em;
}
.customer-form label {
    display: block;
    margin-bottom: 0.5em;
    font-weight: bold;
}
.customer-form input[type="text"],
.customer-form input[type="email"],
.customer-form input[type="tel"] {
    width: 100%;
    padding: 0.8em;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* --- 2つのボタンを横並びにするための親要素 --- */
.form-buttons {
    margin-top: 2em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
}

/* --- ボタンのデザイン --- */
.back-button, .submit-button {
    display: block;
    width: 100%;
    padding: 1em;
    border-radius: 5px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    font-size: 1em;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.2s;
}
.back-button:hover, .submit-button:hover {
    opacity: 0.8;
}

/* 戻るボタン（グレー） */
.back-button {
    background-color: #6c757d;
    color: #fff;
}

/* 進むボタン（赤色） */
.submit-button {
    background-color: #e60012;
    color: #fff;
}

/* PC表示の時だけ、ボタンの幅を自動調整 */
@media (min-width: 768px) {
    .form-buttons {
        justify-content: center;
    }
    .back-button, .submit-button {
        width: auto;
        padding: 0.8em 2em;
    }
}

/* --- 持ち物リストのデザイン --- */
.motimono-section {
    margin-top: 3em;
}
.motimono-list {
    border: 1px solid #eee;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
}
.motimono-list dt, .motimono-list dd {
    margin: 0;
    padding: 1em;
}
.motimono-list dt {
    background-color: #f9f9f9;
    font-weight: bold;
    border-bottom: 1px solid #eee;
}
.motimono-list dd {
    border-bottom: 1px solid #eee;
}
.motimono-list dt:last-of-type, .motimono-list dd:last-of-type {
    border-bottom: none;
}
@media (min-width: 768px) {
    .motimono-list {
        display: grid;
        grid-template-columns: 200px 1fr; /* 左を固定、右を可変に */
    }
    .motimono-list dt, .motimono-list dd {
        border-bottom: none;
        border-right: 1px solid #eee;
        border-top: 1px solid #eee;
    }
}

/* --- レンタルご案内（アコーディオン） --- */
.rental-guide {
    background-color: #fff;
    padding: 2em 0;
}
.accordion-item {
    border-bottom: 1px solid #ddd;
}
.accordion-item:first-of-type {
    border-top: 1px solid #ddd;
}
.accordion-title {
    font-size: 1.2em;
    padding: 1em 1.5em;
    cursor: pointer;
    position: relative;
    list-style: none; /* summaryの黒い三角を消す（Chrome用） */
}
.accordion-title::-webkit-details-marker {
    display: none; /* summaryの黒い三角を消す（Safari用） */
}
.accordion-title::after {
    content: '+';
    position: absolute;
    right: 1.5em;
    font-size: 1.2em;
    transition: transform 0.3s;
}
.accordion-content {
    padding: 0 1.5em;
    line-height: 1.7;
    background-color: #f9f9f9;
}
.accordion-content p:first-child {
    padding-top: 1.5em;
}
.accordion-content p:last-child {
    padding-bottom: 1.5em;
    margin-bottom: 0;
}

/* ★★★アコーディオンが開いた時のアニメーション★★★ */
.accordion-item[open] > .accordion-title::after {
    transform: rotate(45deg);
}

 /* --- 男女別セクションのスタイル --- */ .gender-section { margin-top: 3em; } .gender-section h4 { font-size: 1.5em; text-align: center; background-color: #8b4513; color: #fff; padding: 0.5em; border-radius: 5px; }

/* --- ヘアスタイルギャラリーへのリンク --- */
.gallery-link-section {
    margin: 3em 0;
    text-align: center;
}
.gallery-link-banner {
    display: block;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 1.5em;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s;
}
.gallery-link-banner:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}
.gallery-link-banner img {
    display: block;
    width: 100%;
}
.gallery-link-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 1em 2em;
    border-radius: 5px;
    font-size: 1.2em;
    font-weight: bold;
    border: 2px solid #fff;
}

/* --- PhotoSwipeのキャプションを画像の下に表示するための調整 --- */
.pswp__caption {
    position: static; /* 位置の固定を解除 */
    text-align: center;
    padding: 15px;
    background-color: #000; /* 背景を黒にする */
}
.pswp__caption__center {
    max-width: none;
    padding: 0;
}
.pswp--open {
    background-color: #000; /* 全体の背景も黒で統一 */
}

/* =================================================================================
   7. PhotoSwipeギャラリー用のデザイン
================================================================================= */

/* --- サムネイル画像の一覧 --- */
.my-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 画面幅に合わせて列数を自動調整 */
    gap: 15px; /* 画像間の隙間 */
}
.my-gallery figure {
    margin: 0;
}
.my-gallery img {
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.my-gallery figcaption {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
    display: none; /* 初期状態では非表示（SEOのためには残す） */
}

/* --- PhotoSwipeのキャプションを画像の下に表示するための調整 --- */
.pswp__caption {
    position: static;
    text-align: center;
    padding: 15px;
    background-color: #000;
}
.pswp__caption__center {
    max-width: none;
    padding: 0;
}
.pswp--open {
    background-color: #000;
}
/* --- よくあるご質問（FAQ）セクション --- */
.faq-section {
    padding: 2em 0;
}

/* =================================================================================
   ★ハンバーガーメニューとページ内ナビゲーション（ここから追加）
================================================================================= */

/* --- ヘッダーの調整（ロゴとボタンを横並びに） --- */
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px; /* PC表示でも広がりすぎないように */
    margin: 0 auto;
    padding: 0 20px;
}
.header-logo {
    margin: 0;
}

/* --- ハンバーガーメニューのボタン（三本線） --- */
.hamburger-button {
    display: block;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 100; /* 他の要素より手前に表示 */
}
.hamburger-button span {
    display: block;
    width: 30px;
    height: 2px;
    background-color: #333;
    margin: 6px auto;
    transition: all 0.3s;
}

/* --- ハンバーガーメニュー本体（普段は隠れている） --- */
.global-nav {
    display: none; /* ★★★これが重要！普段は非表示にする★★★ */
    background-color: #fff;
    border-bottom: 1px solid #eee;
}
.global-nav ul {
    margin: 0;
}
.global-nav a {
    display: block;
    padding: 1em 20px;
    border-top: 1px solid #eee;
    color: #333;
    text-align: center;
}

/* --- ページ内リンク（目次） --- */
.page-nav {
    margin: 2em 0;
    padding: 1.5em; /* 少し余白を広げます */
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    border-radius: 8px;
}
.page-nav ul {
    margin: 0;
    /* display: flex; を削除、またはコメントアウトすることで、縦並びに戻ります */
}
/* ★★★ここからが追加・修正箇所★★★ */
.page-nav li {
    margin-bottom: 0.8em; /* 各行の間の余白 */
}
.page-nav li:last-child {
    margin-bottom: 0; /* 最後の行だけ余白をなくす */
}
.page-nav a {
    color: #0000ee; /* デフォルトに近い青色 */
    text-decoration: underline; /* クリックできることが分かりやすいように、下線を引く */
}
.page-nav a:hover {
    color: #551a8b; /* マウスを乗せた時の色（紫系） */
}
/* ★★★ここまでが追加・修正箇所★★★ */


/* =================================================================================
   ★ハンバーガーメニューとページ内ナビゲーション（ここまで追加）
================================================================================= */

/* --- 詳細料金表 --- */
.price-table-section {
    margin: 3em 0;
}
.price-table-wrapper {
    overflow-x: auto; /* ★スマホで見た時、テーブルがはみ出たら横スクロールさせる */
    -webkit-overflow-scrolling: touch; /* ★スマホでのスクロールを滑らかにする */
}
.price-table {
    width: 100%;
    min-width: 600px; /* ★テーブルの最小幅を指定 */
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.9em;
}
.price-table th, .price-table td {
    border: 1px solid #ddd;
    padding: 1em 0.8em;
    text-align: center;
    vertical-align: middle;
}
.price-table thead th {
    background-color: #4CAF50; /* 緑系のヘッダー */
    color: white;
    font-weight: bold;
}
.price-table tbody th {
    background-color: #f2f2f2;
    font-weight: bold;
    width: 80px;
}
.price-table td strong {
    font-size: 1.2em;
    display: block;
}
.price-table td span {
    font-size: 0.8em;
    display: block;
    color: #666;
}

/* --- お問い合わせセクション --- */
.contact-section {
    margin: 3em 0;
    text-align: center;
}
.contact-buttons {
    display: flex;
    flex-direction: column; /* スマホでは縦並び */
    gap: 1em;
    margin-top: 1.5em;
}
.contact-button-phone, .contact-button-mail {
    font-size: 1.1em;
    padding: 1em;
}
.contact-button-phone {
    background-color: #4CAF50; /* 電話は緑系 */
}
.contact-button-mail {
    background-color: #007bff; /* メールは青系 */
}
.button-icon {
    margin-right: 0.5em;
}

/* --- フッターのお問い合わせ --- */
.footer-contact {
    background-color: #f2f2f2;
    padding: 2em 0;
    text-align: center;
}
.footer-contact h3 {
    margin-top: 0;
}
.footer-info {
    margin-top: 2em; /* 順番が変わったので調整 */
}

/* PC表示ではボタンを横並びに */
@media (min-width: 768px) {
    .contact-buttons {
        flex-direction: row; /* 横並びにする */
        justify-content: center;
    }
}