/*
 * 花論珈琲茶房 公式サイト 補助スタイル (Laravel 統合後)
 *
 * 旧サイトの common.css / main.css / index.css / add.css がメインで、
 * このファイルは旧サイトに無かった追加要素（フォーム / モバイル safe-area /
 * 動画ラッパー）のみを定義する。旧 CSS と競合するスタイルは置かない。
 *
 * cb: 2026-05-22
 */

:root {
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left, 0px);
    --safe-right:  env(safe-area-inset-right, 0px);
}

/* iPhone のノッチ等で content がオーバーラップしないように補強 */
@supports (padding: env(safe-area-inset-bottom)) {
    .sns_sp { padding-bottom: calc(8px + var(--safe-bottom)) !important; }
    #footer { padding-bottom: calc(40px + var(--safe-bottom)) !important; }
}

/* SP 用スタイルの適用上限を 767px → 999px へ広げている (layouts/app.blade.php の
   common-s.css / main-s.css / index-s.css の media 属性)。
   旧サイトは「1000px 以上の PC」と「767px 以下の SP」しか想定しておらず、
   その間 (横向きスマホ・タブレット) では PC レイアウトの固定幅
   (#header_in 1000px / .mainImg_cover・#contents・#footer の min-width:1000px) が
   そのまま効き、全ページが横スクロールしていたため。
   common.css の `@media (min-width:768px) { .sp { display:none !important } }` だけは
   旧ファイル側に残るので、768〜999px で SP 画像が消えないよう打ち消す。 */
@media (min-width: 768px) and (max-width: 999px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

/* ハンバーガーボタンは SP 専用 (旧 common-s.css の指定が SP メディアクエリ
   のみで PC では生 <button> が表示されてしまうのを抑止) */
@media (min-width: 1000px) {
    #header .sp_menu_btn,
    #header .sp_menu {
        display: none !important;
    }
}

/* ヘッダーの nav (お知らせ〜採用情報) をロゴと TEL の中間に置く。
   common.css の width:530px はグローバルナビが 9 項目あった頃 (gnav01〜gnav09) の固定幅で、
   現在の 6 項目は 404px しか使わず右に 126px の空きが残る。
   #header_right は justify-content:flex-end なので、その空きがまるごと nav の右側に出て
   「ロゴにくっついて左に寄っている」ように見えていた。
   余白を nav の左右へ均等に配分して中央に置き直す。
   SP は #header ul#navi が非表示 (ハンバーガー) なので PC のみ。 */
@media (min-width: 1000px) {
    #header ul#navi {
        width: auto;
        flex: 1;
        justify-content: center;
        /* .tel の margin-left:20px は nav の箱の外なので、そのままだと
           中央が電話アイコン側に 20px 足りない。その分を箱に取り込む */
        margin-right: -20px;
    }
}

/* トップページの MV 動画 (旧 inc/mv_movie.php の inline style 相当) */
.mv_movie { width: 100%; height: 100%; }
.mv_movie video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ここだけ 767px 止まりなのは意図的。SP スタイル全体は 999px まで広げているが、
   正方形のヒーローは「縦持ちスマホ」前提の見せ方で、横向き (844x390 等) に当てると
   画面高さより背の高い動画になりキャッチコピーが画面外へ落ちる。
   768〜999px は旧 index-s.css の値 (動画の実寸比) のままにする。 */
@media (max-width: 767px) {
    /* 動画は 1050x450 (約 21:9) で、SP 幅だと高さ 167px の細い帯になり
       ファーストビューが埋まらない。枠を正方形にして object-fit: cover で
       中央をトリミングする (元動画は写真グリッド主体なので左右が切れても成立する) */
    #topimg {
        aspect-ratio: 1 / 1;
        height: auto;
    }

    /* クーポンは動画の下、木目背景 (#info_sec) の上端に小さめで置く。
       in-flow のままだと見出しテキストの行数で位置が動くので絶対配置にするが、
       基準にできるのは高さ 155px 固定・上下中央寄せの #topimg_box しかない。
       #topimg は正方形なので高さ = 100vw、その下端までの距離は (100vw - 155px) / 2。
       これに動画下端からの余白 32px を足して「木目の上から 32px」に固定する
       (固定 px だと画面幅ごとに動画の下端との距離がずれる)。 */
    .top-banner {
        position: absolute;
        top: calc(100% + (100vw - 155px) / 2 + 32px);
        bottom: auto;
        left: 0;
        right: 0;
        width: 200px;
        margin: 0 auto;
    }

    /* クーポン (高さ 84px) と上下の余白ぶんを空けて Information 見出しを置く。
       32px + 84px + 36px = 152px */
    #info_sec { padding-top: 152px; }
}

/* メニュー写真の縦横比を統一 (旧 main.css には .img の指定が無く、画像のアスペクト比でガタつくため) */
.menu_cover .menu_list .img {
    width: 220px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
    background-color: #f3efe8;
}
.menu_cover .menu_list .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 999px) {
    .menu_cover .menu_list .img {
        width: 100%;
        aspect-ratio: 4 / 3;
    }
}

/* 店舗一覧のエリア絞り込み (旧サイトの店舗名リンク一覧を置き換え)
   配色は既存の .lower_shopsec__list に合わせてブラウン #683e28 を使う */
.shop-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.shop-filter li {
    margin: 0;
}
.shop-filter__btn {
    display: block;
    /* このサイトは全体が content-box なので指定しないと padding 分だけ広がり 5 つが 1 行に収まらない */
    box-sizing: border-box;
    min-width: 150px;
    padding: 12px 24px;
    font-size: 18px;
    text-align: center;
    color: #683e28;
    background: #fff;
    border: 2px solid #683e28;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
.shop-filter__btn:hover,
.shop-filter__btn:focus-visible,
.shop-filter__btn.is-active {
    background: #683e28;
    color: #fff;
}
/* 絞り込みで対象外になった店舗 (JS 無効時はサーバ側で同じクラスが付く) */
.shop-card.is-filtered-out {
    display: none;
}

/* トップページ: Instagram 専用セクション (YouTube セクションの直前)
   背景はフォトギャラリー (#photo_sec) と同じタイルを敷いて白浮きを防ぐ。
   SP 側の background-size も #photo_sec に合わせている (下部のメディアクエリ)。
   下の #youtube_sec は #special_sec と同じ木目タイルなので、値が別なことに注意 */
#instagram_sec {
    padding: 60px 20px;
    text-align: center;
    background: url(../img/top/photo_bg.jpg);
}
#instagram_sec h2 {
    margin: 0 0 30px;
}
#instagram_sec h2 img {
    max-width: 200px;
    height: auto;
}
#instagram_sec .container {
    max-width: 1100px;
    margin: 0 auto;
}
/* 旧サイトは content-box + ul に既定のパディングが付くので明示的に潰しておく */
#instagram_sec .insta_grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
#instagram_sec .insta_grid a {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f0ece6;
}
#instagram_sec .insta_grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease, opacity .3s ease;
}
#instagram_sec .insta_grid a:hover img {
    transform: scale(1.06);
    opacity: .85;
}
/* 共通の a.more は width:160px 固定で、右端 (right:10px) に矢印が重なる。
   「Instagram で見る」は文字数が多いので幅と右パディングを広げる (#youtube_sec と同じ対処) */
#instagram_sec a.more {
    width: 240px;
    padding: 0 40px 0 20px;
    margin-top: 50px;
}

/* トップページ: YouTube 専用セクション (ブログの直前)
   背景は #special_sec と同じ木目タイル
   (bg_white.jpg はファイル名と違い木目画像。旧サイトからの命名をそのまま使っている) */
#youtube_sec {
    padding: 60px 20px;
    text-align: center;
    background: url(../img/common/bg_white.jpg) repeat;
}
#youtube_sec h2 {
    margin: 0 0 30px;
}
#youtube_sec h2 img {
    max-width: 260px;
    height: auto;
}
#youtube_sec .container {
    max-width: 960px;
    margin: 0 auto;
}
#youtube_sec .youtube_frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}
#youtube_sec .youtube_frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* 共通の a.more は width:160px 固定で、右端 (right:10px) に矢印が重なる。
   「YouTube で見る」は文字数が多いので幅と右パディングを広げて矢印との重なりを防ぐ */
#youtube_sec a.more {
    width: 230px;
    padding: 0 40px 0 20px;
    margin-top: 50px;
}

@media (max-width: 999px) {
    #instagram_sec {
        padding: 40px 15px;
        /* 背景タイルの縮小率は元セクション #photo_sec (index-s.css) と同じ */
        background-size: 250px;
    }
    #instagram_sec h2 img {
        max-width: 150px;
    }
    /* SP は 3 列 x 2 行 (PC は 6 列 x 1 行) */
    #instagram_sec .insta_grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }
    #instagram_sec a.more {
        margin-top: 35px;
    }

    #youtube_sec {
        padding: 40px 15px;
        /* 木目タイルの縮小率は元セクション #special_sec (index-s.css) と同じ */
        background-size: 219px;
    }
    #youtube_sec h2 img {
        max-width: 200px;
    }
    #youtube_sec a.more {
        margin-top: 35px;
    }
}

/* 店舗詳細のメインビジュアル見出し。
   .title.access は旧サイトでは「アクセス」の画像 1 枚で、main-s.css が SP 幅を
   その画像に合わせて 60.5px に固定している。店舗一覧 (/shop) は今も画像なので
   この指定が要るが、店舗詳細 (body#shop_show) は店舗名のテキストのため
   40px の文字が 1 文字ずつ折り返され縦書きのように見えてしまう。詳細だけ横書きに戻す */
@media (max-width: 999px) {
    #shop_show #main_image .title.access {
        width: auto;
        max-width: 92%;
        font-size: 24px;
        line-height: 1.4;
    }
}

/* 店舗詳細の店名下に出るメイン画像 (hero_image_url) は SP では出さない。
   運用上 shop_images の 1 枚目に同じ写真を登録しているため、真下のスライダーと
   同じ写真が 2 枚続いてしまう。PC は右カラム (.lower_shopsec__imagemap) に出るので影響なし。
   add.css の対応する指定が 820px 区切りなので、打ち消す側も同じ幅に合わせる
   (821〜999px は add.css 側で右カラム表示に切り替わり、この画像は元から非表示)。 */
@media (max-width: 820px) {
    .lower_shopsec__header img.lower_shopsec__headerimage {
        display: none;
    }
}

/* 店舗詳細の写真スライダー (管理画面で登録した shop_images) */
.shop-gallery {
    margin: 24px 0 30px;
}
/* 写真ごとに縦横比が違うと 1 枚めくるたびに高さが激しく変わる (縦長は横長の 2 倍以上に
   なる) ため、横長写真の見え方に合わせて枠の比率を固定し、はみ出す分は中央基準で
   切り抜く。3:2 は 4:3 と 16:9 の中間なので、どちらの写真でも切り落ちが最小になる */
.shop-gallery__item {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    /* 縦長写真を contain で収めたときに左右へ出る余白の色 (読込中の下地も兼ねる) */
    background: #fff;
}
.shop-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* 縦長写真は cover だと上下が大きく切れて一部しか見えないため、全体が入るように縮小する。
   枠の高さは 3:2 のままなので他の写真と縦サイズは揃い、左右に余白が出る。
   縦長かどうかは実寸でしか判定できないので show.blade.php の JS が is-portrait を付ける */
.shop-gallery__item.is-portrait img {
    object-fit: contain;
}
/* 2 枚以上 = slick スライダー。初期化前に全スライドが縦に並ぶのを防ぐ */
.shop-gallery--slider .shop-gallery__item {
    display: none;
}
.shop-gallery--slider .shop-gallery__item:first-child,
.shop-gallery--slider.slick-initialized .shop-gallery__item {
    display: block;
}
.shop-gallery--slider .slick-prev,
.shop-gallery--slider .slick-next {
    width: 40px;
    height: 40px;
    z-index: 1;
}
.shop-gallery--slider .slick-prev {
    left: 10px;
}
.shop-gallery--slider .slick-next {
    right: 10px;
}
.shop-gallery--slider .slick-prev:before,
.shop-gallery--slider .slick-next:before {
    font-size: 30px;
    color: #fff;
    text-shadow: 0 0 6px rgba(0, 0, 0, .6);
    opacity: 1;
}
.shop-gallery--slider .slick-dots {
    position: static;
    margin-top: 12px;
}
.shop-gallery--slider .slick-dots li button:before {
    font-size: 10px;
    color: #683e28;
    opacity: .35;
}
.shop-gallery--slider .slick-dots li.slick-active button:before {
    color: #683e28;
    opacity: 1;
}

/* 店舗一覧カード (タップで詳細ページへ) */
.shop-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 32px;
    margin: 50px 0 0;
    padding: 0;
    list-style: none;
}
.shop-card {
    margin: 0;
}
.shop-card__link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
    background: #fff;
    border: 1px solid #e0d8cf;
    transition: box-shadow .2s, transform .2s;
}
.shop-card__link:hover,
.shop-card__link:focus-visible {
    box-shadow: 0 6px 18px rgba(104, 62, 40, .18);
    transform: translateY(-3px);
}
.shop-card__thumb {
    aspect-ratio: 3 / 2;
    overflow: hidden;
}
.shop-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.shop-card__body {
    padding: 20px 22px 24px;
}
.shop-card__name {
    margin: 0;
    font-size: 20px;
    font-weight: bold;
    color: #683e28;
}
.shop-card__address {
    margin: 6px 0 0;
    font-size: 14px;
    color: #8a7a6d;
}
.shop-card__text {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.8;
}
.shop-card__more {
    display: inline-block;
    margin: 16px 0 0;
    font-size: 14px;
    color: #683e28;
}
.shop-card__more::after {
    content: " ▶";
    font-size: 11px;
}
.shop-filter__empty {
    margin: 40px 0;
    text-align: center;
}

@media (max-width: 999px) {
    .shop-filter {
        gap: 8px;
    }
    .shop-filter__btn {
        min-width: 0;
        padding: 10px 16px;
        font-size: 15px;
    }
    .shop-cards {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 30px;
    }
    .shop-card__name {
        font-size: 18px;
    }
}

/* 完了ページ (/contact/thanks, /survey/thanks) の「トップに戻る」ボタン。
   旧 main.css の `.thanks_cover a` (height:50px / line-height:44px / padding-right:5px) と
   共通の `.menu-btn` (padding:14px 0) が重なって padding が `14px 5px 14px 0` になり、
   文字が下 (上余白 27px 対 下余白 2px) と左 (右へ 5px) にずれていた。
   padding-right:5px は旧サイトで右に矢印画像を重ねていた名残で、このボタンに矢印は無い。
   高さや line-height に依存しない flex の中央寄せへ置き換える。 */
.thanks_cover a.menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

/* お問合せフォーム (旧サイトに無い新規 UI) */
.contact-form { max-width: 720px; margin: 24px auto; }
.contact-form .form-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 12px 24px;
    margin: 0 0 16px;
    align-items: start;
}
.contact-form dt { font-weight: bold; padding-top: 6px; margin: 0; }
.contact-form dd { margin: 0; }
.contact-form .required { color: #d04040; margin-left: 4px; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    font-size: 16px;
    font-family: inherit;
    line-height: 1.5;
    box-sizing: border-box;
}
.contact-form textarea { resize: vertical; min-height: 160px; }
.form-actions { margin-top: 24px; text-align: center; }
.form-errors {
    background-color: #fdecea;
    border: 1px solid #e8a09b;
    color: #8a1f1a;
    padding: 12px 16px;
    margin: 16px 0;
    border-radius: 4px;
}
.form-errors ul { margin: 0; padding-left: 20px; }

.privacy-agree {
    margin: 24px 0 12px;
    text-align: center;
    font-size: 14px;
}
.privacy-agree a { color: #4A2C2A; text-decoration: underline; }
.privacy-check { display: inline-block; margin-top: 8px; cursor: pointer; }
.privacy-check input[type="checkbox"] { margin-right: 6px; vertical-align: middle; }

@media (max-width: 999px) {
    .contact-form .form-row { grid-template-columns: 1fr; gap: 6px; }
    .contact-form dt { padding-top: 0; }
}

/* お客様アンケート (/survey)
   設問数が多く回答欄も選択肢中心なので、/contact とは別の体裁にする。
   共通クラスを直接いじると /contact 側の見た目まで変わるため、body#survey 配下に限定する。
   なお body は font-size:62.5% (=10px) で p にだけ 16px が当たっているため、
   dt / dd はサイズを明示しないと 10px で描画される。 */
#survey .survey-heading {
    font-size: 22px;
    font-weight: bold;
    text-align: left;
    color: #4A2C2A;
    margin: 0 0 12px;
}
#survey .contact_cover .lead {
    text-align: left;
}
#survey .contact-form .form-row {
    /* 項目名を大きくした分ラベル列を広げないと「メールアドレス(確認用)」等が折り返す */
    grid-template-columns: 260px 1fr;
    /* 各行は下線のみ (先頭行だけ上線を足す)。上下線 + マイナスマージンで重ねると
       ブラウザの拡大縮小時に重なりが端数になり、線が太く見える行が出るため */
    border-bottom: 1px solid #000;
    /* 罫線と入力欄が近いと窮屈に見えるので上下に余白をとる */
    padding: 28px 0;
    margin: 0;
}
#survey .contact-form .form-row:first-of-type {
    border-top: 1px solid #000;
}
/* 姓 / 名 は「ラベル + 入力欄」を横に 2 組並べる。入力欄は他より狭く */
#survey .contact-form .name-fields {
    display: flex;
    align-items: center;
    gap: 12px;
}
#survey .contact-form .name-fields .name-label {
    flex: none;
    font-size: 16px;
}
#survey .contact-form .name-fields input {
    flex: none;
    width: 130px;
    min-width: 0;
}
#survey .contact-form .name-fields input:first-of-type {
    margin-right: 12px;
}
/* 年齢は input[type="number"] のため共通フォームの入力欄スタイルに載らない */
#survey .contact-form input[type="number"] {
    width: 100px;
    padding: 10px 12px;
    border-radius: 4px;
    background-color: #fff;
    font-size: 16px;
    font-family: inherit;
    line-height: 1.5;
    box-sizing: border-box;
}
/* 入力欄の枠線は罫線と同じ黒で揃える */
#survey .contact-form input[type="text"],
#survey .contact-form input[type="email"],
#survey .contact-form input[type="number"],
#survey .contact-form input[type="date"],
#survey .contact-form select,
#survey .contact-form textarea {
    border: 1px solid #000;
}
/* 日付も共通の入力欄スタイルの対象外なのでブラウザ既定 (幅 97px) のままだった */
#survey .contact-form input[type="date"] {
    /* 他の入力欄と同じく回答欄いっぱいに広げ、日付表記は中央寄せにする */
    width: 100%;
    text-align: center;
    padding: 10px 12px;
    border-radius: 4px;
    background-color: #fff;
    font-size: 16px;
    font-family: inherit;
    line-height: 1.5;
    box-sizing: border-box;
}
#survey .contact-form dt {
    font-size: 17px;
    font-weight: normal;
    padding-top: 0;
}
#survey .contact-form dd {
    font-size: 16px;
}
/* 選択肢は横並びだと項目名との対応が読み取りづらいので縦に積む */
#survey .radio-item {
    display: block;
    margin-bottom: 8px;
    cursor: pointer;
}
#survey .radio-item:last-child {
    margin-bottom: 0;
}
#survey .radio-item input[type="radio"] {
    margin-right: 6px;
    vertical-align: middle;
}
/* 選択肢が 2 つだけの設問 (性別) は横に並べる */
#survey .contact-form dd.radio-inline .radio-item {
    display: inline-block;
    margin: 0 32px 0 0;
}

/* プライバシーポリシーへの導線と送信ボタン */
#survey .privacy-agree a {
    color: #D2691E;
}
/* 送信ボタンはフォーム末尾から少し離して置く */
#survey .form-actions {
    margin-top: 56px;
}
#survey .survey-submit {
    display: block;
    /* .menu-btn の max-width:300px / width:80% を上書きしないと横幅を広げられない */
    width: 100%;
    max-width: 520px;
    padding: 24px 40px;
    font-size: 18px;
    font-weight: bold;
    color: #D2691E;
    /* 塗りつぶさず、枠線オレンジ + 中はクリーム (ブランド Accent) */
    background-color: #F5F0E8;
    border: 3px solid #D2691E;
    /* 両サイドだけカーブさせる (上下は直線) */
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
#survey .survey-submit:hover,
#survey .survey-submit:focus-visible {
    color: #fff;
    background-color: #D2691E;
    opacity: 1;
}

@media (max-width: 999px) {
    /* SP は共通ルールで 1 カラムになるのでラベル列の指定を戻す */
    #survey .contact-form .form-row { grid-template-columns: 1fr; }
    #survey .survey-heading { font-size: 19px; }
    #survey .contact-form dt { font-size: 16px; }
    #survey .contact-form dd { font-size: 15px; }

    /* 姓 / 名 の入力欄が 130px 固定のため、この行だけ最小幅 340px を要求し、
       幅 360px の端末でページ全体に 1px の横スクロールが出ていた。
       width:0 にしないと <input> 既定の 20 文字ぶんの固有幅が min-content として
       残るので、幅は flex-grow で作り max-width で元の 130px に留める */
    #survey .contact-form .name-fields input {
        flex: 1 1 0;
        width: 0;
        max-width: 130px;
    }
}