@charset "utf-8";/* 文字エンコーディングを指定する */

/* =======================================================
                    共通設定__start
======================================================= */
* { margin:0; padding:0; box-sizing:border-box; }

:root {
	--global-fonts:'Noto Sans JP', sans-serif;
	--global-size: 16px;
    --global-line-hight:150%;
    --global-letter-spacing:6%;
    --primary-Black:#444444;
    --primary-White:#ffffff;
    --primary-FukuokaGreen: #00574B;
	--primary-FukuokaBrown: #534741;
    --primary-FukuokaBrown--op:#F2F2F2;
    --primary-WHILLBlue:#0075B8;
    --primary-Aqua:#009FB8;
    --primary-Orange:#F3AE00;
    --primary-Green:#15BD39;
    --primary-Grey:#BBBBBB;
    --primary-lightGrey:#EDF0F0;
}

body {
    font-family: var(--global-fonts);
    font-size: var(--global-size);
    line-height: var(--global-line-hight);
    letter-spacing: var(--global-letter-spacing);
    width: 100%;
    margin: 0 auto;
    overflow-x: hidden;/* 主にWindows対策：これがないとスクロールバーまで100vwに含まれる */
}

/* 全セクションのインナーコンテナを一括指定 */
.main_container,
.design_container,
.function_container,
.lineup_container,
.shop_container,
.inquiry_container {
    max-width: 1366px; /* サイトの最大コンテンツ幅 */
    width: 100%;
    margin: 0 auto;
    padding: 0 20px; /* ★重要：画面が縮んだときに端にくっつかないための予防策 */
    box-sizing: border-box;
}

.sp-only {
    display: none;
}

/* 2. スマホ表示（768px以下）の時だけ改行タグを有効化 */
@media screen and (max-width: 768px) {
    .sp-only {
        display: inline;
    }
}

/* =======================================================
                    共通設定__end
======================================================= */

/* =======================================================
                    共通吹き出し__start
======================================================= */
.design h2,
.function h2,
.lineup h2 {
    position: relative;
    display: inline-block;
    border-radius: 40px;
    padding: 24px 58px;
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 24px;
}

h2:before {
content: "";
    /* 小さな四角形を作る */
    width: 20px; /* お好みのサイズ（三角形の高さになります） */
    height: 20px; /* お好みのサイズ（三角形の高さになります） */
    border-radius: 4px; /* ここで角を丸くする（数値を大きくするとより丸くなる） */
    
    /* 配置する */
    position: absolute;
    /* topとleftで位置を調整 */
    top: calc(100% - 12px); /* 100%（底辺）から5pxだけ上へ移動 */
    left: 72%; /* 中央(50%)から右(60%)へ移動（お好みで調整してください） */
    
    /* 回転させて三角形に見せる */
    transform: rotate(45deg); /* 45度回転 */
}
/* =======================================================
                    共通吹き出し__end
======================================================= */

/* =======================================================
                    共通吹き出しcolor__start
======================================================= */
/* design */
.design_bubble{
    background:var(--primary-Aqua);
}

.design_bubble::before {
    background:var(--primary-Aqua);
}
/* function */
.function_bubble{
    background:var(--primary-Green);
}

.function_bubble::before {
    background:var(--primary-Green);
}
/* lineup */
.lineup_bubble{
    background:var(--primary-Orange);
}

.lineup_bubble::before {
    background:var(--primary-Orange);
}

/* =======================================================
                    共通吹き出しcolor__end
======================================================= */

/* =======================================================
            HERO動画部分__start (画面横幅いっぱい)
   ======================================================= */
.hero_header {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

@media screen and (max-width: 768px) {
    .hero_header {
        min-height: 340px;
    }
}

.header_video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none; /* 動画へのホバー・クリックなどのマウス操作を無効化 */
}

.header_copy {
    position: absolute;
    top: 24px;
    left: 32px;
    color: var(--primary-White);
    font-size: 1.5rem;
    font-weight: bold;
    z-index: 2;
}

.header_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    height: auto;
    z-index: 2;
}

@media screen and (max-width: 768px) {
    .header_copy {
        top: 16px;
        left: 24px;
        font-size: 1.25rem;
    }
}
/* =======================================================
                    HERO動画部分__end
   ======================================================= */

/* =======================================================
                    メイン部分__start
   ======================================================= */
.main {
    text-align: center;
    padding-bottom: 104px;
    /* 以下、背景のドットのあしらい */
    background-color: var(--primary-White);
    background-image: radial-gradient(rgba(0, 0, 0, 0.08) 2px, transparent 2px);
    background-size: 25px 25px;
}
/* 実際には非表示_start */
.main_look {
    background-color: var(--primary-Aqua);
    display: none;
}

.main_ride {
    background-color: var(--primary-Green);
    display: none;
}

.main_go {
    background-color: var(--primary-Orange);
    display: none;
}
/* 実際には非表示_end */

.main_bubble{
    max-width: 488px;
    margin:0 auto;
    transform: translateY(-20px);
}

.main_bubble--img{
    display: block;
    max-width: 100%;
}

.main_logo {
    max-width: 550px;
    height: auto;
    margin: 0 auto 25px;
    display: block;
}

.main_title {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.6;
    color: var(--primary-FukuokaBrown);
    margin-bottom: 60px;
}

/* 特長カード（2列） */
.main_feature {
    display: flex;
    justify-content: center;
    gap: 40px;
    list-style: none;
    margin-bottom: 80px;
}

.main_feature li {
    width: 492px;
    background-color: var(--primary-FukuokaBrown--op);
    border-radius: 16px;
    overflow: hidden;
    text-align: left;
}

.main_feature img {
    width: 100%;
    height: 328px;
    object-fit: cover;
    display: block;
}

.main_heading {
    font-size: 1.5rem;
    line-height: 150%;
    font-weight: bold;
    color: var(--primary-FukuokaBrown);
    padding: 20px 24px 8px;
}

.main_content {
    color: var(--primary-FukuokaBrown);
    padding: 0 24px 24px;
}

/* main_catch 写真部分 (画面横幅いっぱい) */
.main_catch_area {
    position: relative;
    width: 100vw;
    margin-left: calc((100% - 100vw) / 2);
    margin-top: 80px;
    margin-bottom: 80px;
    /* 上下に十分な余白を取り、最小高さを確保（文字量に応じて高さが可変） */
    min-height: 794px;/* 写真の最小天地サイズを指定 */
    padding: 150px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
}

/* 背景写真 */
.main_greet {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*filter: brightness(0.65);  文字の視認性を上げるために少し暗く */
    z-index: 1;
}

/* メッセージテキスト */
.main_catch {
    position: relative;
    z-index: 2;
    color: var(--primary-White);
    font-size: 1.25rem;
    line-height: 210%;
    font-weight: 700;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

/* メイン動画 */
.main_video {
    margin: 80px auto 0 auto;
    text-align: center;
}

.main_video_title {
    font-size: 2rem;
    font-weight: bold;
    line-height: 150%;
    color: var(--primary-FukuokaBrown);
    margin-bottom: 30px;
}

/* 動画枠コンテナ */
.video_wrapper {
    position: relative;
    width: 100%;
    max-width: 860px;
    aspect-ratio: 16 / 9;
    margin: 0 auto 20px;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
}

/* サムネイル（初期表示） */
.video_poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.poster_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 白丸の再生ボタン（CSSでデザイン生成） */
.play_button {
    position: absolute;
    width: 68px;
    height: 68px;
    border: solid 3px var(--primary-White);
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

/* 再生ボタン内の「▶」マーク */
.play_button::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent var(--primary-White);
    margin-left: 4px; /* 三角形の位置の微調整 */
}

/* ホバー時の演出 */
.video_wrapper:hover .play_button {
    transform: scale(1.1);
}

/* クリック後にサムネイルを消す用クラス */
.video_poster.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* 動画本体 */
.main_video_embedded {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 動画下のキャッチ文コンテナ */
.main_video_catch {
    position: relative;
    display: inline-block;
    color: var(--primary-FukuokaBrown);
    line-height: 1.8;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 50px; /* 左右にクォーテーションが入る余白を確保 */
}

/* 前のクォーテーション（“） */
.main_video_catch::before {
    content: "“";
    position: absolute;
    top: -12px;
    left: 0;
    font-size: 5rem;
    color: #D8D8D8; /* 擬似要素_クォーテーション.png の淡いグレー */
    line-height: 1;
    transform: translateY(6px);
}

/* 後ろのクォーテーション（”） */
.main_video_catch::after {
    content: "”";
    position: absolute;
    top: -6px;
    right: 0;
    font-size: 5rem;
    color: #D8D8D8;
    line-height: 1;
}

@media screen and (max-width: 768px) {
    .main_bubble{
        max-width: 292px;
        transform: translateY(-10px);
    }
    .main_logo {
        max-width: 318px;
        margin: 0 auto 17px;
    }
    .main_title {
        font-size: 1rem;
    }
    /* 特長カード（2列） */
    .main_feature {
        flex-direction: column;
        align-items: center;    
        gap: 24px;
        margin-bottom: 50px;
    }

    .main_feature li {
        width: 100%;
        max-width: 727px;
    }

    .main_feature img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;   /* 727px近くまで広がっても綺麗に見える16:9比率 */
        object-fit: cover;
    }

    .main_catch_area {
        min-height: 360px;   /* スマホ時の最小高さ */
        padding: 100px 20px;  /* 上下左右の余白を詰めてコンパクト化 */
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .main_catch {
        text-align: left;
        padding: 0;
    }

    /* 改行調整 */
    .main_catch .pc-only,
    br.pc-only {
        display: none;
    }

    .main_video_catch {
        text-align: left;
    }

}
/* =======================================================
                        メイン部分__end
   ======================================================= */

/* =======================================================
    DESIGN部分__start (画面横幅いっぱい)
   ======================================================= */
.design_container{
    padding: 0; /* sectionに一括でかけているpaddingの解除 */
}

.design_container .section_copy{
    padding:0 20px;
}

.design {
    position: relative;
    left: 50%;
    transform: translateX(-50%); /* 画面中央を基準にして左右両端へ100vw広げる */
    width: 100vw;
    padding: 40px 0 0;
    text-align: center;
    background-color: var(--primary-White);
    margin-bottom: 40px;
}
/* 中のコンテナの幅制限（max-width）を完全に解除 */
.design_container {
    width: 100%;
    max-width: none;
}

/* designとfunctionで使用している吹き出し下の文字 */
.section_copy {
    font-size: 1.25rem;
    line-height: 150%;
    font-weight: bold;
    color: var(--primary-FukuokaBrown);
    margin-bottom: 50px;
}

/* 1枚に結合された全幅画像の表示設定 */
.design_img_single {
    width: 100%;
    height: auto;
    display: block;
}
/* =======================================================
                    DESIGN部分__end
   ======================================================= */

/* =======================================================
                    FUNCTION部分__start
   ======================================================= */
.function {
    padding: 80px 0;
    text-align: center;
    background-image: url(../img/whill_func-bk.jpg);
    background-size: cover;
}

.function_feature {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 均等な2列指定（4つの要素で2×2に並ぶ） */
    gap: 40px;
    max-width: 1024px;
    margin: 0 auto 80px;
    list-style: none;
    text-align: left;
}

.function_feature li {
    background-color: var(--primary-White);
    border-radius: 16px;
    overflow: hidden;
    text-align: left;
}

.function_img {
    width: 100%;
    height: 328px;
    object-fit: cover;
    display: block;
}

.function_caption {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 150%;
    color: var(--primary-FukuokaBrown);
    padding:20px 24px 8px;
}

.function_content {
    line-height: 150%;
    color: var(--primary-FukuokaBrown);
    padding:0 24px 24px;
}

.function_fc {
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary-FukuokaBrown);
    margin-bottom: 19px;
    line-height: 150%;
}

.function_fccopy {
    font-size: 16px;
    color: var(--primary-FukuokaBrown);
    margin-bottom: 20px;
}

.functionvideo_wrapper{
    margin-bottom: 80px;
}

.function_video {
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
}

/* ===================================================================
            FUNCTION動画エリア (サムネイル重ね合わせ & 再生設定)_start
   =================================================================== */
/* 動画コンテナ */
.functionvideo_wrapper {
    position: relative;
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
    margin: 0 auto 80px;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
}

/* サムネイル（初期表示） */
.functionvideo_poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.functionvideo_wrapper:hover .play_button {
    transform: scale(1.1);
}

/* クリック後にサムネイルを消すクラス */
.functionvideo_poster.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* 動画本体 */
.function_video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* ===================================================================
            FUNCTION動画エリア (サムネイル重ね合わせ & 再生設定)_end
   =================================================================== */

@media (max-width: 768px) {
    .function_feature {
        grid-template-columns: 1fr;  /* 1列指定に変更（縦1列にスタック） */
        gap: 24px;                  /* スマホ表示時のカード同士の縦間隔 */
        margin-bottom: 40px;
    }

    /* スマホ画面での画像高さ・比率の自動最適化 */
    .function_img {
        height: auto;
        aspect-ratio: 16 / 9;       /* 画面幅に合わせて綺麗に伸縮する16:9比率 */
    }
}
/* =======================================================
                    FUNCTION部分__end
   ======================================================= */

/* =======================================================
                    LINE UP追加基本設定
   ======================================================= */
.lineup_all {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
}

/* =======================================================
                    LINE UP__start
======================================================= */
.lineup {
    margin: 80px 0;
}

.lineup_container {
    display: flex;
    flex-direction: column; /* 縦並びにする */
    align-items: center; /* 横方向で中央揃えにする */
}

.lineup_copy {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--primary-FukuokaBrown);
    margin-bottom: 30px;
}

.lineup_mass {
    display: flex;
    align-items: center; /* 上下のセンター合わせ */
    color: var(--primary-FukuokaBrown); /* 中身の文字全部を制御 */
}

.lineup_img {
    width: 257px;
    height: 221px;
    margin-right: 56px;
}

.lineup_spec {
    display: flex;
    flex-direction: column;  /* 中の要素を縦に並べる */
    align-items: flex-start; /* 中の要素全体を左端に揃える */
    text-align: left;        /* テキストを左揃えにする */
}

.lineup_phrase {
    font-size: 1.25rem;
    font-weight: bold;
    padding-bottom: 10px;
}

.lineup_name {
    font-size: 2rem;
    font-weight: bold;
    padding-bottom: 20px;
}

.lineup_price {
    font-size: 24px;
    font-weight: bold;
    padding-bottom: 10px;
}

.lineup_caption {
    font-size: 14px;
    padding-bottom: 15px;
}

.lineup_hp {
    font-size: 0.875rem;
    color: var(--primary-WHILLBlue);
    width: 219px;
    height: 33px;
    border-radius: 16px;
    border: 2px solid var(--primary-WHILLBlue);
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.longway{
    font-size: 1.1rem;
}
/* =======================================================
                    LINE UP__end
======================================================= */

/* =======================================================
                    店舗一覧__start
======================================================= */
.shop_area {
    width: 100vw;
    margin-left: calc((100% - 100vw) / 2);
    background-color: var(--primary-lightGrey);
    padding: 50px 0 80px 0;
}

.shop_container {
    display: flex;
    flex-direction: column; /* 縦並びにする */
    align-items: center; /* 横方向で中央揃えにする */
    color: var(--primary-FukuokaBrown); /* 中身の文字全部を制御 */
}

.shop_container > div {
    width: 100%;
}

.shop_logo {
    max-width: 380px;
    margin-bottom: 30px;
}

.shop_heading {
    margin-bottom: 55px;
}
.shop_list {
    display: grid;
    /* 画面を均等割りせず、中身のサイズ（auto）に合わせます */
    grid-template-columns: auto auto; 
    /* コメントアウトを外して、リスト全体を画面の中央に配置します */
    justify-content: center; 
    gap: 24px 50px; /* ここの50pxがそのまま隙間として適用されます */
    margin-bottom: 40px;
    width: 100%;
}

.shop_mass {
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

.shop_name {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 150%;
    margin-bottom: 20px;
}

.shop_car {
    font-size: 18px;
    padding-bottom: 9px;
    margin-top: auto; 
}

.shop_address {
    font-size: 16px;
    font-style: normal;
    line-height: 1.5;
    margin-bottom: 9px;
}

.shop_address span {
    font-size: 20px;
    font-weight: bold;
}

.shop_deco {
    display: flex;
    gap: 5px; 
    margin-top: 12px;
    border-bottom: solid 1px #aaa;
    padding-bottom: 24px;
    width: fit-content;
}

li:last-child .shop_deco {
    border-bottom: none;
}

.shop_deco p {
    font-size: 14px;
    font-weight: 700;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 9.5px 30.5px;
    white-space: nowrap;
    
    /* ベースの網全てに透明な枠線を敷いてサイズを均一化 */
    border: 1px solid transparent; 
    box-sizing: border-box;
}

/* =========================================
    1050px以下
   ========================================= */
@media (max-width: 1050px) {
    .shop_list {
        grid-template-columns: repeat(2, 1fr); /* 50%ずつの均等割り */
        gap: 24px 20px;
        align-items: stretch; /* 左右のカードの高さを揃える */
    }

    .shop_deco {
        width: 100%;
    }

    .shop_deco p {
        flex: 1;
        padding: 8px 0;
        font-size: 13px;
        text-align: center;
    }
}

/* =========================================
    870px以下
   ========================================= */
@media (max-width: 870px) {
    .shop_list {
        gap: 24px 15px;
        padding: 0 5px;
    }

    .shop_name {
        font-size: 1.25rem;
    }

    .shop_address {
        font-size: 14px;
        word-break: break-word;
    }
    
    .shop_address span {
        font-size: 18px;
    }

    .shop_deco p {
        padding: 6px 0;  
        font-size: 11px; 
    }
}

.shop_barrier {
    background-color: #C1EACB;
}

.shop_toilet {
    background-color: #C8DDEF;
}

.shop_parking {
    background-color: #F6E0B2;
}

.shop_gray {
    color: #bbbbbb !important;
    background-color: transparent !important;
    border: 1px solid #bbbbbb !important;
} 
/* =======================================================
                    店舗一覧__end
======================================================= */

/* =======================================================
ボタン本体の設定_start
======================================================= */
.external-link {
    font-size: 20px;
    font-weight: bold;
    color: var(--primary-White);
    width: 100%;
    max-width: 1024px;
    height: 62px;
    background: #0075B8;
    border-radius: 31px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    text-decoration: none;
    position: relative; 
    border: 3px solid var(--primary-White); 
    box-sizing: border-box;
}

/* 右側に置く矢印（＞）の設定 */
.external-link::after {
    content: "";
    position: absolute; /* 親（.external-link）を基準に自由に動かす */
    right: 32px; /* 右から32pxの位置 */
    top: 50%; /* 上から50%の位置にして… */
    
    width: 12px;
    height: 12px;
    
    /* 矢印の色と太さ（文字色に合わせて白にしています） */
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    
    /* Y軸（縦方向）に半分戻しつつ、45度回転させて「＞」の形にする */
    transform: translateY(-50%) rotate(45deg);
}

.store{
    text-align: center;
}

.store_all {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.store_contact {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}

.store_list {
    font-size: 20px;
    font-weight: bold;
    color: #00574B;
    width: 500px;
    max-width: calc(100% - 40px); /* ★追加：スマホで画面幅を超えないように保護 */
    height: 62px;
    background: #ffffff;
    border-radius: 31px;
    border: 2px solid #00574B;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px;/* ★中央揃え（margin: 0 auto）に修正 */
    margin-bottom: 20px;
    text-decoration: none;
    position: relative;
}

/* 右側に置く矢印（＞）の設定 */
.store_list::after {
    content: "";
    position: absolute; /* 親（.external-link）を基準に自由に動かす */
    right: 32px; /* 右から32pxの位置 */
    top: 50%; /* 上から50%の位置にして… */
    
    width: 12px;
    height: 12px;
    
    /* 矢印の色と太さ（文字色に合わせて白にしています） */
    border-top: 2px solid #00574B;
    border-right: 2px solid #00574B;
    
    /* Y軸（縦方向）に半分戻しつつ、45度回転させて「＞」の形にする */
    transform: translateY(-50%) rotate(45deg);
}
/* =======================================================
ボタン本体の設定_end
======================================================= */

/* =======================================================
よくある質問_start
======================================================= */
.inquiry {
    margin: 80px 0;
}

.shop_area h4,
.inquiry h4 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 67px;
    text-align: center;
    color: var(--primary-FukuokaBrown);
}

.inquiry_qa {
    margin-bottom: 40px;
}

/* Qの部分 */
.inquiry_q {
    position: relative;
    display: flex;
    width: 1024px;                 /* 基本は1024px */
    max-width: calc(100vw - 40px); /* 画面が狭い時は左右20px空けて縮む */
    box-sizing: border-box;        /* 枠線や余白を幅の計算に含める */
    min-height: 121px;             /* テキストが改行して伸びても大丈夫なように変更 */
    height: auto;
    padding-top: 20px;             /* 縦の余白を確保 */
    padding-bottom: 20px;
    align-items: center;
    padding-left: 36px;
    border: solid 1px #dddddd;
    margin: 0 auto;
    cursor: pointer;
    list-style: none;
}

/* summaryのデフォルトの三角マークを消す */
.inquiry_q::-webkit-details-marker {
    display: none;
}

/* Qの丸 */
.question_mark {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-White);
    width: 48px;
    height: 48px;
    background: var(--primary-WHILLBlue);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

/* 質問文 */
.question_content {
    font-size: 1.25rem;
    font-weight: bold;
    margin: 0 30px;
    padding-right: 20px;
}

/* 矢印 */
.inquiry_q::after {
    content: "";
    position: absolute;
    right: 30px;
    width: 12px;
    height: 12px;
    border-top: 2px solid #ababab;
    border-left: 2px solid #ababab;
    transform: rotate(45deg);
}

/* 閉じたときの矢印 */
details:not([open]) .inquiry_q::after {
    transform: rotate(225deg);
}


/* Aの部分 */
.inquiry_a {
    display: flex;
    width: 1024px;
    max-width: calc(100vw - 40px);
    box-sizing: border-box;
    min-height: 121px;
    height: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    align-items: center;
    padding-left: 36px;
    border: solid 1px #dddddd;
    border-top: none;
    margin: 0 auto;
}

/* Aの丸 */
.answer_mark {
    font-size: 24px;
    font-weight: bold;
    color: #0075B8;
    width: 48px;
    height: 48px;
    background: #ffffff;
    border-radius: 50%;
    border: 2px solid #0075B8;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 回答文 */
.answer_content {
    font-size: 16px;
    line-height: 1.5;
    margin: 0 30px;
}
/* =======================================================
よくある質問_end
======================================================= */

/* ========================================
    レスポンシブ
========================================= */
@media screen and (max-width: 768px) {
  /* メディアクエリの場所 */
    .lineup_mass {
        flex-direction: column; /* 要素を「縦並び」に変更する */
        align-items: center;
        width: 100%; 
    }

    /* 画像：PC用の右余白(56px)を消して中央にする */
    .lineup_img {
        margin-right: 0;          /* ★原因だった右余白を0にリセット */
        margin-bottom: 20px;      /* 代わりに画像とテキストの間に縦余白を追加 */
    }

    /* テキストブロック：枠自体は中央で、中のテキストは左揃えを維持 */
    .lineup_spec {
        align-items: flex-start;  /* 中の要素（価格やボタンなど）は左揃え */
        text-align: left;         /* テキストは左揃え */
        width: 100%;
        max-width: 330px;         /* テキストエリアの幅を整えて中央配置 */
    }

    /* 取扱店舗ボタンもスマホ幅に自動調整 */
    .store_list {
        width: calc(100% - 40px);
    }
    
    /* Q&A枠のはみ出し防止 */
    .inquiry_q, 
    .inquiry_a {
        width: calc(100% - 40px);
        height: auto;
        min-height: 80px;
        padding: 20px;
        box-sizing: border-box;
    }

      /* 店舗リストを1列（1fr）に変更 */
    .shop_list {
        grid-template-columns: 1fr; /* ★縦1列に切り替え */
        width: 100%;
        margin: 0 auto 40px;
        box-sizing: border-box;
    }

    .shop_mass {
        width: 100%;
    }

    /* --- 2. 下の水色の部分を幅いっぱいに広げる --- */
    .shop_deco {
        display: flex;
        gap: 4px;
        width: 100%;
        box-sizing: border-box;
    }

    .shop_deco p {
        flex: 1;
        padding: 6px 2px;
        font-size: 12px;
        white-space: nowrap;
        text-align: center;
        box-sizing: border-box;
    }

    /* QとAの枠の設定をスマホ用にリセット */
    .inquiry_q, 
    .inquiry_a {
        width: calc(100% - 40px); /* 1024px固定を解除し、画面幅-40pxにする */
        height: auto; /* 121px固定を解除。文字が改行されても枠が自動で伸びるようにする */
        min-height: 80px; /* 余白が詰まりすぎないように最低限の高さを指定 */
        padding: 20px; /* スマホだとpadding-left:36pxは広すぎるので調整 */
        box-sizing: border-box; /* paddingとborderをwidthの中に含める（はみ出し防止の必須設定） */
    }

    /* スマホだと文字が大きすぎたり、余白が広すぎたりするので微調整 */
    .question_content,
    .answer_content {
        flex: 1; /* 左の丸マークと右の矢印の間の「残りの幅」をすべてこの文字エリアにする */
        margin: 0 15px; /* スマホ用に左右の余白を少し狭める */
        word-break: break-word; /* 英語の長いURLなどが入っても、枠を突き破らずに強制改行させる */
    }

    .question_content {
        line-height: 1.5;
    }

}