/* =================================
          　色・フォントサイズ・余白 root化
           ================================= */
        :root {
            /* */
            --color-main: #0068A2;
            --color-logo: #0A8081;
            --color-bg: #ffffff;
            --color-gray: #F2F2F2;
            --color-svg: #6D6D6D;
            --color-text: #020101;
            --color-text-muted: #999999;
            --color-btn-secondary: #FF9900;
            --color-btn-important: #F7419C;
            --color-sub: #4EACA1;


            /* FontStyle */
            --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

            --font-size-xs: 0.75rem;    /* 12px */
            --font-size-sm: 0.875rem;   /* 14px */
            --font-size-normal: 1rem;     /* 16px */
            --font-size-18: 1.125rem;   /* 18px */
            --font-size-20: 1.25rem;    /* 20px */
            --font-size-24: 1.5rem;    /* 24px */
            --font-size-32: 2.0rem;  /* 30px */
            --font-size-4xl: 2.25rem;   /* 36px */

            --font-weight-normal: 400;
            --font-weight-medium: 500;
            --font-weight-semibold: 600;
            --font-weight-bold: 700;

            --line-height-tight: 1.25;
            --line-height-normal: 1.4;
            --line-height-relaxed: 1.6;

            /* Spacing */
            --spacing-0: 0;
            --spacing-4: 0.25rem;  /* 4px */
            --spacing-8: 0.5rem;   /* 8px */
            --spacing-16: 1rem;     /* 16px */
            --spacing-24: 1.5rem;   /* 24px */
            --spacing-32: 2rem;     /* 32px */
            --spacing-40: 2.5rem;  /* 40px */
            --spacing-48: 3rem;    /* 48px */
            --spacing-64: 4rem;    /* 64px */
            --spacing-80: 5rem;    /* 80px */

            /* Border Radius */
            --radius-none: 0;
            --radius-sm: 0.25rem; /* 4px */
            --radius-base: 0.5rem;    /* 8px */
            --radius-xl: 0.75rem;   /* 12px */
            --radius-2xl: 1rem;     /* 16px */

            /* Breakpoints (for container queries) */
            --breakpoint-sm: 480x;
            --breakpoint-lg: 1200px;
        }
       

        /* ---------------------------------------- */
        /* body */

        body {
        font-family: "Noto Sans JP";
        margin: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;

        }

        .contact-form-container {
            flex: 1;
        }
        a,p,ul,ol,button 
        {
            margin: 0;
            padding: 0;
            list-style: none;
            border: none;
        }
        button {
            cursor: pointer;
            transition: all 0.2s ease;

        }
        button:disabled {
            background-color: #ccc; /* グレーにする */
            cursor: not-allowed;    /* カーソルを「禁止マーク」にする */
            opacity: 0.6;           /* 半透明にする */
        }
        h1,h2 {
        all: unset;
        }


        button:active {
        transform: translateY(2px); 
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
        }
        input,select{
        appearance: none;
        -webkit-appearance: none;
        text-decoration: none;
        }
        .margin8 {
        margin: 8px;
        }

        /* header */
        header {
        width: 100%;
        box-sizing: border-box;
        max-width: 1400px;
        margin: 0 auto;
        display: flex;
        padding: 16px 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        align-self: stretch;
        }

        .header-frame {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        }

        .header-frame a ,.header-left p {
        color: #7A7979;
        font-size: 12px;
        text-decoration: none;
        }

        .header-left p{
            font-size: 12px;
            line-height: 1.3;
        }
        
        .logo-frame {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        }

        .logo-title {
        color: var(--color-logo);
        font-size: var(--font-size-24);
        font-weight: var(--font-weight-bold);
        }

        .logo-frame img {
        width: 100%;
        max-width: 160px;
        height: auto;
        flex-shrink: 0;
        }

        .header-left,
        .header-right,
        .title-flex {
        display: flex;
        align-items: center;
        gap: 8px;
        }

        .flex-nogap,
        .flex-auto {
        display: flex;
        align-items: center;
        }
        .flex-nogap.wrap,
        .flex-auto.wrap{
            flex-wrap: wrap;
        }

        .flex-auto {
        width:100% ;
        justify-content: space-between;
        }
        .flex-nogap.start,.flex-auto.start{
            align-items: start;
        }

        .flex-nogap.end,.flex-auto.end{
            align-items: flex-end;
        }

        .flex-auto.unset {
        justify-content: unset;

        }                
        .header-nav {
        position: relative;
        color: #565656;
        font-size: 12px;
        }

        .header-nav img,
        .header-nav-sp img {
        width: 32px;
        height: 32px;
        aspect-ratio: 1/1;
        }

        .border-active {
        border-bottom: 1.5px solid #4EACA1;
        }

        .header-bottom-line {
        width: 100%;
        height: 1px;
        background: #F1F0F0;
        }

        .header-nav-sp {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        }

        .header-nav-sp p {
        color: #7A7979;
        font-size: 8px;
        }

        .header-hum {
        display: flex;
        width: 24px;
        height: 32px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 4px;
        }

        .header-hum span {
        height: 4px;
        flex-shrink: 0;
        align-self: stretch;
        border-radius: 8px;
        background: #4EACA1;
        }


        .header-nav-item {
        position: relative;
        }

        /**
        header .login{
            margin: 0 16px ;
        }**/

        .header-nav-item:not(.register)::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -4px;
        transform: translateX(-50%);
        width: 0;
        height: 2.5px;
        background: var(--color-sub);
        border-radius: 4px;
        opacity: 0;
        transition: all 0.3s ease;
        }

        .header-nav-item:not(.register):hover::after {
        width: 100%;
        opacity: 1;
        }

        .header-nav-item.is-active::after {
        width: 110%;
        opacity: 1;
        }

        .header-right.pc {
            display: none;
        }

        .header-right.sp {
            display: flex;
            gap: 4px;
        }

        @media (min-width: 1200px) {

        .margin8 {
            margin: 8px;
        }

        .header-right.pc {
            display: flex;
        }

        .header-right.sp {
            display: none;
        }
        }

        @media (max-width: 1200px) {
        .logo-frame img {
            width: 100%;
            max-width: 142px;
        }
        header {
            padding: 12px 8px;
            border-bottom: solid 1px #BCBBBA;
        }
        .header-bottom-line{display: none;}
        .logo-frame {
            gap: 0;
        }

        .header-left {
            line-height: 1.2;
            gap: 4px;
        }

        .header-left p {
            font-size: 10px;
        }
        .flex-auto.sp-unset {
        justify-content: unset;

        }
        }

        /* ---------------------------------------- */
        /* ヘッダー　ラジオボタン制御 */

        #menu-toggle {
        display: none;
        }

        .login-menu {
        display: none;
        }
        /* 基本のheader-right(PC用は横並び) */
        .header-right.pc {
        display: flex;
        }

        .menu-close-btn {
        display: none;
        }
        /* SP用のメニュー表示設定 */
        @media (max-width: 1200px) {
        .header-nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(0, 0, 0, 0.8); /* オーバーレイ背景 */
            display: none; /* 初期状態は非表示 */
            z-index: 1000;
        }
        /* メニューが開いたときだけ×ボタンを表示 */
        #menu-toggle:checked ~ .header-nav .menu-close-btn {
            display: block;
            position: absolute;
            font-weight: bold;
            top: 20px;
            right: 20px;
            font-size: 32px;
            color: #D9D9D9;
            cursor: pointer;
            z-index: 1001;
            line-height: 1;
            text-align: center;
        }
        /* メニューが開いているときだけ下線を表示 */
        #menu-toggle:checked ~ .header-nav .header-nav-item {
            position: relative;
            border-bottom: 1px solid #D9D9D9;
                padding-bottom: 4px;
        }
        /* チェックが入ったらナビゲーションを表示 */
        #menu-toggle:checked ~ .header-nav {
            display: flex;
        }
        #menu-toggle:checked ~ .header-nav .login-default {
            display: none; /* 通常のログインを非表示 */
        }
        
        #menu-toggle:checked ~ .header-nav .login-menu {
            display: flex; /* ボタン版を表示 */
            gap: 10px;
            width: 100%;
        }
        
        /* ボタンのスタイル */
        #menu-toggle:checked ~ .header-nav .login-buttons .login-btn,
        #menu-toggle:checked ~ .header-nav .login-buttons .register {
            flex: 1;
            padding: 12px 20px;
            border: none;
            cursor: pointer;
            font-size: 14px;
        }
        
        #menu-toggle:checked ~ .header-nav .login-buttons .login-btn {
            color: #4EACA1;
            background: #FFF;
            border: solid 1px #4EACA1;
        }
        /* header-rightを縦並びに変更 */
        #menu-toggle:checked ~ .header-nav .header-right.pc {
            display: flex;
            align-items: unset;
            flex-direction: column;
            gap: 12px;
            background: white;
            width: 80%;
            max-width: 400px;
            height: 100vw;
            margin-left: auto;
            padding: 20px;
            overflow-y: auto;
            justify-content: center;
            border-radius: 12px;
        }

        /* メニューが開いているときは::afterを無効化 */
        #menu-toggle:checked ~ .header-nav .header-nav-item:not(.register)::after {
            display: none;
        }
        #menu-toggle:checked ~ .header-nav .header-nav-item:not(.register):hover::after {
            display: none;
        }
        #menu-toggle:checked ~ .header-nav .header-nav-item.is-active::after {
            display: none;
        }
    }
        /* ---------------------------------------- */
        /* ログイン・マイページ切り替え */

        .auth-toggle {
        display: none;
        }

        .logged-in-only {
        display: none;
        }

        #logged-in:checked ~ .header-nav .logged-out-only {
        display: none;
        }

        #logged-in:checked ~ .header-nav .logged-in-only {
        display: block;
        }

        /* ---------------------------------------- */
        /* パンくずリスト */
       
        .breadcrumb {
        width: 100%;
        max-width: 950px;
        padding: 8px 16px;
        }

        .breadcrumb ol {
        display: flex;
        flex-wrap: wrap; 
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 4px 8px; 
        align-items: center;
        }

        .breadcrumb li {
        font-size: 12px;
        display: flex;
        align-items: center;        }

        .breadcrumb li:not(:last-child)::after {
        content: ">";
        margin-left: 8px;
        color: #666;
        flex-shrink: 0;
        }

        .breadcrumb a,footer a,footer li a,
        .review-frame .main .bottom .frame a{
        color: #2B4588;
        white-space: nowrap;
        }

        .breadcrumb a:hover {
        text-decoration: underline;
        }

        .breadcrumb li[aria-current="page"] {
        color: #333;
        font-weight: normal;
        }

        @media (max-width: 1200px) {
       .breadcrumb {
            width: 100%;
            box-sizing: border-box;
            padding: 8px ;
         }
         .breadcrumb ol {
            gap:4px;
         }
         .breadcrumb li {
         }
        .breadcrumb a {
            white-space: normal;
            word-break: break-all;
        }
       

        }


        /* ---------------------------------------- */
        /* ボタンデザイン */
        button{
            display: flex;
            padding: 8px;
            justify-content: center;
            align-items: center;
            border-radius: 16px;
            text-align: center;
        }
        button.plain{
            background: none;
            border: none;
            padding: 0;
            margin: 0;
            font: inherit;
            color: inherit;
            cursor: pointer;
            outline: inherit;

        }

        button.register{
            padding: 12px 14px;
            border-radius: 8px;
        }
        button.register a{
            font-weight: 700;
            color: #FFF;
        }
        button.mypage{
            color: #FFF;
            background:#F3790F;            
        }
        button.button-light{

            color:#4EACA1;
            background: #FFF;
            border: solid 1px #4EACA1;

        }
        button.button-dark,.main-dark{
            color: #FFF;
            background:#4EACA1;
        }
        button.button-light:hover{
            background: #e5e5e5;
        }
        
        button.button-dark:hover{
            background: #1f7c7c;
        }

        /* ---------------------------------------- */
        /* メイン直前 */

        .margin0{
            margin: 0 auto;
        }

        .main-container{
            flex: 1;
            max-width: 950px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 24px;
            align-self: stretch;
            padding-bottom: 48px;
        }


        /* ---------------------------------------- */
        /* topページ */
        .top-visual{
            width: 100%;
            display: flex;
            gap: 32px;
            
        }
        .top-visual img{
            flex: 1 1 auto;
            max-width: 100%;
            height: 306px;
            min-width: 0; 
            object-fit: cover;
        }
        .select-box{
            flex: 0 0 auto;
            width: 328px;
            background:#4EACA1;
            padding: 8px;
            border-radius: 16px;
        }
        .select-box .title{
            padding: 8px;
            padding-bottom: 16px;
            color: #fff;
            font-weight: 700;
        }
        .sp-cate .wrapper,
        .select-box .wrapper{
            padding: 16px;
            background: #fff;
            border-radius: 8px;
        }
        .sp-cate .select-wrapper,
        .cate-sidebar .select-wrapper,
        .select-box .select-wrapper{
            position: relative;
            display: inline-block;
            width: 120px;
            flex-shrink: 0; }

        .sp-cate .select-wrapper2,
        .cate-sidebar .select-wrapper2,           
        .select-box .select-wrapper2{
            position: relative;
            display: inline-block;
            flex: 1; 
        }

        .sp-cate .select-wrapper2 select,
        .cate-sidebar .select-wrapper2 select, 
        .select-box .select-wrapper2 select{
            width: 100%;
        }

        .sp-cate select,
        .cate-sidebar select, 
        .select-box select,
        input.select{
            width: 100%;
            padding: 6px 8px;
            border-radius: 8px;
            border: 1px solid #B0B0B0;
            background: #F1F0F0;
        }
        .select-box select input::placeholder {
            color: #B0B0B0;
        }
        .select-box select {
            padding-right: 28px; 
            font-size: 14px;
            cursor: pointer;
            
            /* テキスト配置 */
            display: flex;
            align-items: center;
        }

        .select-box select:focus {
            outline: none;
            border-color: #888;
        }


        .select-wrapper select:invalid,
        .select-wrapper2 select:invalid {
            color: #B0B0B0; 
        }

        .select-wrapper select:valid,
        .select-wrapper2 select:valid {
            color: #333; 
        }

        .select-wrapper select option,
        .select-wrapper2 select option {
            color: #333;
        }


        /* 未選択時（空のoptionが選択されている時）は薄い色 */
        
        .select-wrapper select.before,
        .select-wrapper2 select.before {
            color: #B0B0B0; 
        }

        /* 選択後（空でないoptionが選択されている時）は通常の色 */
        .select-wrapper2 select.before:has(option:not([value=""]):checked),
        .select-wrapper select.before:has(option:not([value=""]):checked) {
            color: #333; 
        }

        /* カスタム矢印アイコン */
        .select-wrapper::after,
        .select-wrapper2::after {
            content: "∨";
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            color: #B0B0B0;
            font-size: 12px;
            pointer-events: none;
        }

        /* オプションのスタイル */
        select option {
            background: #fff;
            color: #333;
            padding: 8px;
        }
       
        .top-banner{
            max-width: 800px;
            align-items: center;
            gap:12px;
            display: flex;
            flex-direction: column;
        }
        .top-banner .description{
            font-size: 14px;
        }

        .top-banner .banner-text1,
        .t404 .banner-text1{
            color: #565656;
            font-size: 20px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }


        .t404{
            padding: 32px 0;
        }
        .image404{
            width: 150px;
            height: auto;
        }

        .top-banner .banner-text2{
            color: #4EACA1;
            font-size: 28px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }

        .top-banner img{
            width: 100px;
            height: auto;

        }

        .feature p{
            font-size: 14px;
        }

        .flex-column.feature img{
            width: 96%;
            aspect-ratio: 16/9;
            object-fit: cover;
        }
        .shop-section-wrapper{
            width: 100vw;background:
            var(--color-gray);
        }



        @media (max-width: 1200px) {
        .flex-column.feature img{
            width: 90%;
        }

        .main-container.sp8pad{
            padding:8px;
            margin-bottom: 32px;
        }
           .sp-wrap{
            flex-wrap: wrap;
            justify-content: center;
           }
            .top-banner .banner-text1{
            font-size: 18px;

            }

            .top-banner .banner-text2
            {font-size: 20px;}

            .top-banner .description{
                padding: 16px;
                font-size: 12px;
            }
            .feature p {
                max-width: 300px;
            }
        }

        @media (max-width: 400px) {
            .top-banner .banner-text2
            {font-size: 18px;}
        }

        /*  ------------------ */
        /*shop-stats------------ */
        .stats-frame{
            width: 100%;
            margin: 0 auto;
            box-sizing: border-box;
            display: flex;
            gap: 12px;
            justify-content: center;
            margin-bottom: 32px;

        }
        .stats-card{
            color: #565656;
            background: #f5f5f5;
            border-radius: 8px; 
            width: 48%;
            padding: 16px;
        }
        .stats-card__main{
            font-weight: bold;
            align-items: flex-end;
        }

		.stats-card__label{font-size: 24px;margin-bottom: 4px;}
		.stats-card__value{color: var(--color-sub); font-size: 32px; }
		.stats-card__unit{font-size: 20px; margin-bottom: 8px;}




        /*  ------------------ */
        /*new-shop------------ */

        .new-shop .carousel-container {
            position: relative;
        }

        .new-shop .carousel-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-180%);
            width: 48px;
            height: 48px;
            background: none;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
            transition: opacity 0.3s ease;
            padding: 0;
        }

        .new-shop .carousel-arrow:hover {
            opacity: 0.7;
        }

        .new-shop .carousel-arrow-left {
            left: -40px;
        }

        .new-shop .carousel-arrow-right {
            right: -40px;
        }

        .new-shop .carousel-arrow svg {
            color: #333;
        }

        @media (min-width:1200px) {
            .shop-section-title.slide{
                width: 33%;
            }
        }

        @media (max-width:1200px) {
            .stats-frame{
                display: none;
            }

            .new-shop .carousel-arrow {
                width: 40px;
                height: 40px;
            }

            .new-shop .shop-section-title{
                max-width: 80vw;
            }
         
        .new-shop .carousel-arrow-left {
            left: -4px;
        }

        .new-shop .carousel-arrow-right {
            right: -4px;
        }

        }

        /*  ------------------ */
        /*new-shop 追加クラス------- */

        .sc-wrapper {
            width: 100%;
            box-sizing: border-box;
        }

        /* スライダーエリア */
        .sc-slider {
        }

        /* --- 矢印ボタンのデザイン --- */
        .carousel-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        background: white;
        border: 1px solid #ddd;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        transition: all 0.3s;
        }

        .carousel-arrow:hover {
        background: #f0f0f0;
        border-color: #999;
        }

        .carousel-arrow-left {
        left: 0;
        }

        .carousel-arrow-right {
        right: 0;
        }


        /* --- 各スライドアイテムのデザイン --- */

        /* Slick用アイテムコンテナ */
        .sc-item {
            /* 左右に隙間(gap)を作るためにマージンを使用 */
            margin: 0 10px; 
            outline: none; 
        }

        /* アイテム内部の実体 */
        .sc-item__inner {
            display: flex;
            flex-direction: column;
            height: 100%;
            background: #fff; 
        }

        /* 店舗名リンク */
        .sc-item__head {
            display: block;
            margin-bottom: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sc-item__link {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            text-decoration: none;
            transition: opacity 0.2s;
        }
        .sc-item__link:hover {
            opacity: 0.7;
        }

        .sc-item__img-box {
            width: 100%;
            margin-bottom: 12px;
        }

        .sc-item__img {
            aspect-ratio: 16 / 9;
            width: 100%;
            object-fit: cover;
        }

        .sc-item__body {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .sc-item__title {
            font-size: 14px;
            font-weight: bold;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .sc-item__text {
            font-size: 14px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 5;
            overflow: hidden;
        }


        /* ナビゲーションアイコン */
        .slider-dots,.slick-dots {
            display: flex;
            justify-content: center;
            gap: 6px;
        }
        .slider-dots{
            margin-bottom: 20px;
        }
        .slick-dots{
            padding: 16px;
        }
        .dot,.slick-dots li button {
            font-size: 0; 
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: white;
            border: 1px solid var(--color-svg);
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .slick-dots li button{
            padding: 0;
            width: 10px;
            height: 10px;
        } 
        .dot.active,.slick-dots li.slick-active button {
            border: 1px solid var(--color-sub);
            background-color:var(--color-sub);
        }


        

        /* --- レスポンシブ対応 --- */

        /* 1200px未満 (SP/Tablet扱い) */
        @media (max-width: 1200px) {
            .sc-wrapper {
                padding: 0 40px; 
                max-width: 100%; 
            }
            
            .sc-slider { margin: 0 -5px; }
            .sc-item { margin: 0 5px; }
            
            .sc-arrow {
                width: 32px;
                height: 32px;
            }
        }
        
        /*  ------------------ */
        /*エリアから探す------- */
        .area-container {
            width: 100%;
            flex-direction: column;
            display: flex;
            align-items: center;
        }

        .region-row {
            width: 100%;
            display: flex;
            border-bottom: 1px solid #e0e0e0;
            align-items: center;
        }

        .region-label {
            flex-shrink: 0;
            width: 200px;
            padding: 8px 12px;
            font-size: 18px;
            color: var(--color-sub);
            font-weight: 700;
        }

        .region-label.blue {
            color: #0099cc;
        }
        .region-label.bg1 {
            font-size: 18px;
        }
        .region-label.bg2 {
            font-size: 20px;
        }
        .prefectures {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            padding: 0 12px;
            gap: 0;
        }

        .prefecture
         {
            color: #333;
            text-decoration: none;
            padding: 0 8px;
            position: relative;
        }
        .prefecture1 {
        }
        
        .prefecture2 {
            color: #333;
            text-decoration: none;
            padding: 0 8px;
            position: relative;
        }
        .prefecture:not(:last-child)::after {
            content: '|';
            position: absolute;
            right: -1px;
            color: #ccc;
        }

        @media (max-width: 1200px) {
            .area-container{
                width: 100%;
                gap:16px;
            }
            .region-row {
                flex-direction: column;
                border-bottom: none;
                align-items: unset;
            }

            .region-label {
                width: 100%;
                box-sizing: border-box;
                border-bottom: none;
                padding: 0 12px;
            }

            .prefectures {
                border-bottom: none;
            }

            .region-row:last-child .prefectures {
                border-bottom: none;
            }
        }

        /*  ------------------ */
        /*カテゴリから探す------- */
        .category-grid{
            display: grid;
            max-width: 100%;
            box-sizing: border-box;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            align-self: flex-start;          
        }
        .category-item {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        img.category-icon {
            width: 32px;
            height: 32px;
            flex-shrink: 0;
        }

        .category-content {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .category-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            line-height: 1.4;
        }

        .category-subtitle {
            /*margin-left: 12px;*/
            font-size: 14px;
            color: #666;
            line-height: 1.4;
        }

        @media (max-width: 1200px) {

        .category-grid {
                grid-template-columns: 1fr;
                padding: 8px;
            }
        }

        /*  ------------------ */
        /*よくある質問------- */
        .question-area-wrapper{
            width: 100%;
            /*background-color: var(--color-gray); width: 100vw;*/
        }

        .question-area{
            padding:  32px 0;
            max-width: 950px;
            margin: 0 auto;
        }


        .faq-item {
            width: 100%;
            border-bottom: 1px solid #e0e0e0;
        }

        .toggle {
            display: none;
        }

        .toggle-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0px;
            cursor: pointer;
            user-select: none;
            border-bottom: solid 1px #D9D9D9;
        }
        .toggle:checked + .toggle-header {
            border-bottom: none;
        }

        .faq-question {
            font-size: 20px;
            font-weight: 600;
            color: #333;
        }
        .answer-text {
            padding: 0 32px;
            font-size: 16px;
            color: #333;
            line-height: 1.8;
            padding-bottom: 1rem;
        }
        
        @media (min-width: 1200px) {

                .question-area-wrapper {
                    width: 950px;
            }
        }
        @media (max-width: 1200px) {

        .question-area-wrapper {
         
            }
        .question-area{
            padding: 16px;
        }
        .faq-question{
            font-size: 18px;
        }
        .plus-minus.lg {
            width: 24px;
            height: 24px;
        }
        }


        .new-reviews{
            box-sizing: border-box;

        }
        .new-reviews .frame{
           border:solid 1px var(--color-sub); 
           padding:16px;            
        }
        .new-reviews .date{
            flex-shrink: 0;
        }

        @media (max-width: 1200px) {
        .new-reviews{
            padding: 8px;
        }
        .new-reviews .frame{
            padding: 24px 12px;
        }
        .new-reviews .user-icon{
            width: 48px;
            height: 48px;
        }

        .new-reviews .gap24 {
                gap: 16px;
            }
        .new-reviews .flex-auto {
                align-items: unset;
            }

        }


        .user-guide-wrapper{
            text-align: center;
            width: 100vw;

            padding: 16px 0;
            font-size: 24px;
        }

        .user-guide{
            display: flex;
            flex-direction: column;
            gap: 16px;
            align-self: flex-start;
        }

        .user-guide-frame {
            border: solid 2px var(--color-sub);
            border-radius: 16px; 
            align-self: center;   
            max-width: 950px;
        }

        .user-guide-frame p{
            line-height: 1.8;
            text-align: left;
            padding: 24px;
        }

        .user-guide .title{
            padding: 16px 0;
            font-size: 24px;
            font-weight: 600;
        }
        .user-guide .title .number,
        .user-guide .about{
           color:  #4EACA1;
           margin-right: 16px;
            font-weight: 600;
        }

        .user-guide .description{
            font-size: 16px;
            margin-left: 24px;
        }

        .user-guide img{
            width: 100%;
            max-width: 900px;
        }
        .wait-area{
            width: 100%;
            display: flex;
            flex-direction: column;
            
        }

        .wait-area .attention{
            width: 100%;
            background-color: rgb(255, 234, 0);
            padding: 2px;
            text-align: center;
            justify-content: center;
            font-style: italic;
        }

        .wait-area .title{
            font-size: 32px;
            font-weight: bold;
            color: var(--color-sub);
        }
        .wait-area .sub{
            font-size: 14px;
            font-weight: 400;
            color: var(--color-sub);

        }
        .wait-area .item-container{
            width: 100%;
            box-sizing: border-box;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px 24px; 
            padding: 16px;
        }

        .wait-area .item-container img{
            width: 88px;
            aspect-ratio: 1/1;
            object-fit: cover;
        }

        .wait-area .item-description{
            flex: 1;
        }



        .wait-area .item-description .title{
            font-size: 16px;
            font-weight: bold;
            padding-bottom: 8px;
            border-bottom: solid 2px var(--color-sub);
            color: #000;
        }
        
        .wait-area .item-description .sub{
            font-size: 14px;
            padding-top: 8px;
            color: #000;

        }
        .wait-area-wrapper{
            border-radius: 16px;
            border: solid 2px var(--color-sub);
        }
            
            @media (max-width: 768px) {
            .wait-area-wrapper{
                margin: 8px;
            }
            .wait-area .item-container{
            grid-template-columns: 1fr;
            padding: 8px;
            }

            .user-guide-frame p{
                padding: 12px;
            }

            .user-guide{
            padding: 16px;

           }
           .user-guide .description{
            margin-left: 0px;
            flex-wrap: wrap;
           }
            .user-guide .title{
                flex-direction: column;
                gap:16px;
            }

           .user-guide img{
            max-width: unset;
            width: 100%;

           }

        }

        .shop-section-wrapper{
            width: 100vw;background:
            var(--color-gray);
        }
        .shop-section{
            max-width: 950px;
            padding: 32px 0px;
            margin: 0 auto;
            display: flex;
            align-items: stretch;
            gap: 16px;
            align-self: stretch;
        }

        .shop-section > .flex1 {
            flex: 1;
        }
        .shop-section-detail{
            display: flex;
            padding: 16px;
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
            border-radius: 8px;
            background: white;
            position: relative;
        }
        .shop-section-detail .nav{
            display: flex;
            width: 48px;
            padding: 4px 2px;            
            align-items: center;
            border-radius: 4px;
            background: #DCEEEC;
            font-size: 10px;
        }
        .shop-section-detail .nav.none{
            display: none;
        }
        .shop-section-detail .favorite-shop,
        .main-contents .favorite-shop{
            position: absolute;
            top: 4px;
            right: 12px;
            display: flex;
            justify-content: center;
            z-index: 9;
         }
        .shop-rank-wrapper .favorite-shop-sp{
            position: absolute;
            /*top: 8px;*/
            right: 8px;
        }


        .sm-text{
            font-size: 8px;
        }

        .shop-section-title{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
            width: 100%;
            box-sizing: border-box;

        }
        .main-contents .shop-section-title{
            padding-right: 32px;

        }

        .ranking-banner-title{
            font-size: 24px;
            color: #4EACA1;
            font-weight: bold;
                                }

        .shop-section-title .title{
            color: var(--color-text, #212121);
            font-size: 20px;
            font-style: normal;
            font-weight: 700;
        }

        .shop-section-title .title.nowrap-hidden {
            display: -webkit-box;
            -webkit-line-clamp: 1; /* 行数を指定。2にすれば2行まで表示 */
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .shop-section-title .title.left{
            text-align: left;
            display: -webkit-box;       
            -webkit-box-orient: vertical;      
            -webkit-line-clamp: 2;             
            overflow: hidden;                  
            text-overflow: ellipsis;          
        }
        .shop-section-title .purchase span{
            margin-left: 0.5rem;
        }

        .shop-section-address{
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .shop-section-address.purchase,
        .shop-section-address button.frame{
            color: var(--color-sub);
        }

        .shop-section-address{
            font-size: 13px;
        }
        .shop-section-address .frame{
            display: flex;
            padding: 2px 8px;
            justify-content: center;
            align-items: center;
            border-radius:  4px;
            border: 1px solid #4EACA1;
            background: #FFF;
        }
        .shop-section-address.purchase button.frame{
            font-size: 12px;
        }

        .shop-section-comment{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            align-self: stretch;
        }
        .shop-section-comment .title{
            color: var(--color-text, #212121);
            font-size: 14px;
            font-weight: 700;
        }
        .shop-section-comment p{
            color: var(--color-text, #212121);
            font-size: 14px;
            display: -webkit-box;       
            -webkit-box-orient: vertical;      
            -webkit-line-clamp: 4;             
            overflow: hidden;                  
            text-overflow: ellipsis;  
        }

        /*
        .shop-section img{
            width: 100%;
            height: 200px; 
            object-fit: cover;
            object-position: center;
            border-radius: 16px;
            display: block;
        }
        */
        .shop-list-container .main-contents .shop-rank-wrapper{
            position: relative;
        }
        .shop-list-container .main-contents img.shop-rank{
            width: 52px;
            position: absolute;
            top: -4px;
            left: -8px;
        }



        .main-contents .flex-column{
            align-self: unset;
        }

        .shop-img-wrapper{
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                border-radius: 16px;
        }        
        @media (min-width: 1200px) {
            /* .purchase を持っていない時だけ順序を変更 */
            .shop-section-address:not(.purchase) {
                order: 2;
            }

            .shop-section-title {
                order: 1;
            }

            .shop-section-comment {
                order: 3;
            }
            .main-contents .shop-section-detail .shop-section-title,
            .main-contents .shop-section-detail .shop-section-address,
            .main-contents .shop-section-detail .shop-section-comment {
                order: 0; 
            }
            .shop-rank-wrapper .favorite-shop-sp,
            .shop-section-detail .favorite-shop-sp{
                display: none;
            }
        .shop-list-container.review-section{
            max-width: 58%;
            min-height: 64px;
            min-width: 300px;
        }

        .cate-list.review-section{
           max-width: 32%;
            padding-top: 16px; 
            
        }
        }

        @media (max-width: 1200px) {

            .shop-section-address {
                order: 1; 
            }
            .shop-section-title {
                order: 2; 
            }
            .shop-section-comment,
            .main-contents .shop-section-detail .shop-section-address
            {
                order: 3;
            }
            
            .cate-list.review-section{
                max-width: 100%;
                box-sizing: border-box;
                padding: 16px;
            }

            .shop-list-container.review-section{
                max-width: 100%;
                min-width: 300px;
            }
            .shop-section{
                padding: 8px 0;
            }
            .shop-section-detail{
                padding: 8px;
            }
            .main-contents .favorite-shop,
            .shop-section-detail .favorite-shop,
            .shop-section-detail .sp-hide{
                display: none;
            }
            .shop-section-detail .favorite-shop-sp{
                display: block;
            }
           .margin0{
            margin: 0;
           }
           .main-container{
            width:100%;
            max-width: none;
            gap:8px;

           }

           .shop-container{
            padding: 16px 8px;
           }
           .shop-section-detail{
            border-radius: 0;
            background: none;
            align-self: start;
            width: 100%;
            box-sizing: border-box;
           }
           .shop-img-wrapper{
            aspect-ratio: 16/9;
            width: 100vw;
            border-radius: 0;
           }
           .shop-list-container .main-contents .shop-rank-wrapper img{
            width: 100%;
            border-radius: 16px;
           }
           .shop-list-container .main-contents .shop-rank-wrapper img.shop-rank{
            width: 42px;
            position: absolute;
            top: 0;
            left: -2px;
            border-radius: 16px 0 0 0;       
            }           
           /*sp 画像優先*/        
            .shop-section ,.sp-column{
                max-width: unset;
                flex-direction: column; /* 縦並び */

            }

            .shop-section > div:nth-child(1) {
                order: 2;
            }
            .shop-section > div:nth-child(2) {
                order: 1;
            }
            .shop-section-wrapper{
                background: none;
                width: 100%;
            }

            .shop-section img{
                width: 100vw;
                border-radius: 0;
            }

        }


    

        /* ---------------------------------------- */
        /* タブエリア メニュー*/

        .tab-container{
            display: flex;
            width: 100%;
            padding: 32px 0;
            flex-direction: column;
            align-items: center;
            gap: 32px;
            }
   
         .tab-menu{
            display: flex;
            max-width: 800px;
            padding: 0 100px;
            justify-content: space-between;
            align-items: flex-start;
            align-self: stretch;
            font-weight: 600;
            position: relative;
        }
         .tab-menu::after
         {    
            content: "";
            position: absolute;
            left: 50%;
            bottom: -18px;
            transform: translateX(-50%);
            width: 96%;
            height: 2px;
            background: var(--color-gray);
            border-radius: 4px;
         }
        .tab-menu.pad{
            padding: 24px 0;
            gap: 42px;
        }
        .tab-menu.pad::after {
            bottom: 8px;
            width: 106%;
        }

        .tab-menu__item {
            position: relative;
            padding: 0.6rem 0;
            cursor: pointer;
            font-size: 1.25rem;
            transition: color 0.15s;
            }

        @media (max-width: 1200px) {
         .tab-menu::after{
            bottom: -5px;
         }
         .tab-menu.pad::after{
            bottom: 4px;
         }

         .tab-menu {
            margin: 16px 0;
            padding:8px 16px;
            
         }

         .tab-menu__item  {
            padding: 0.3rem 0;
            font-size: 16px;
         }

        .tab-menu.pad{
            padding: 16px 0;
            margin: 4px 0;
            gap: clamp(20px, calc(20px + (100vw - 320px) * 0.1), 72px);
            font-weight: 600;
            
        }
        .tab-container {
            padding: 0;
            gap: 0;
        }
        }

        /* ---------------------------------------- */
        /* 掲載順　マウスオーバー */

        /* テキスト */
        .hover-text {
            color: var(--color-sub);
            cursor: pointer;
        }

        /* モーダル本体（最初は非表示） */
        .hover-modal {
            display: none;
            position: absolute;
            top: 120%;    /* テキストの下に表示 */
            right: 0;
            background: #fff;
            padding: 12px 16px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            width: 240px;
            z-index: 1000;
        }

        /* 親にホバーしたとき表示 */
        .hover-container:hover .hover-modal {
            display: block;
        }

        /* 親全体の位置基準 */
        .hover-container {
            position: relative;
            display: inline-block;
        }

        @media (max-width: 1200px) {
         .hover-container {
            font-size: 12px;
            
         }
         }
        /* ---------------------------------------- */
        /* タブエリア 基本情報 */
        .tab-contents{
            width: 100%;
            display: flex;
            padding: 0 16px;
            flex-direction: column;
            align-items: center;
            gap: 32px;
            }

        .tab-main{
            display: flex;
            align-items: flex-start;
            align-self: stretch;

        }
        .tab-table{
            max-width: 670px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            align-self: stretch;
        }
        .table-frame{
            display: flex;
            align-items: center;
            align-self: stretch;
        }
        .table-frame .left{
            display: flex;
            width: 160px;
            padding: 8px 12px;
            align-items: center;
            align-self: stretch;
            border: 1px solid #D9D9D9;
            background: #F5F5F5;
            font-size: 16px;
        }

        .table-frame .right{
            display: flex;
            padding: 8px 12px;
            align-items: self-start;
            gap: 8px;
            flex: 1 0 0;
            align-self: stretch;
            flex-wrap: wrap;
            border: 1px solid #D9D9D9;
        }
        
        .table-frame .right a{
            font-size: 16px;
            color: #4EACA1;
        }
        .table-frame .right{
            font-size: 16px;
            color: #7A7979;
        }

        .table-frame .right .frame1{
            display: flex;
            padding: 2px 8px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 6px;
            border: 1px solid #4EACA1;
        }
        .table-frame .right .frame2{
            display: flex;
            padding: 2px 4px;
            justify-content: center;
            align-items: center;
            border-radius: 6px;
            color: white;
            background: #7A7979;
        }
        .tab-comment{
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
        }
        .tab-comment .comment{
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;
            align-self: stretch;
            flex-wrap: wrap;          
        }

        .tab-comment .comment p{
            color: #7A7979;
            font-size: 16px;
            font-weight: 400;
        }
        .title-flex .title,.feature-title{
            color: #7A7979;
            font-family: "Noto Sans JP";
            font-size: 24px;
            font-weight: 700;
        }
        .title-flex .title.top{
            color:#565656;
        }

        .title-flex.relative img{
            position:absolute;
            left: 50%;
            transform: translateX(-50%) translateY(16%) translateX(-260%) ;
        }

        .title-flex.relative img.area-img{
            transform: translateX(-140%) translateY(8%) translateX(-260%) ;
           
        }
        .title-flex.relative img.cate-img{
            transform: translateX(-160%) translateY(8%) translateX(-260%) ;
           
        }

        .title-flex.relative img.rank-img{
            transform: translateX(-170%) translateY(8%) translateX(-260%) ;
           
        }        
        .title-flex.relative img.rank-img-lg{
            transform: translateX(-270%) translateY(8%) translateX(-260%) ;
           
        }        

        .title-flex.relative img.question-img{
            transform: translateX(-80%) translateY(8%) translateX(-260%) ;
           
        }
        .title-flex.relative img.wait{
            transform: translateX(-320%) translateY(8%) translateX(-260%) ;
           
        }
        .title-flex .title .below{
            color: #4EACA1;
            font-size: 14px;
        }

        .title-flex.column{
            flex-direction: column;
        }

        @media (max-width: 1200px) {
        .tab-table{max-width: 800px;
                    }
            .title-flex.relative img.rank-img,
            .title-flex.relative img.rank-img-lg,
            .title-flex.relative img.question-img,
            .title-flex.relative img.cate-img,
            .title-flex.relative img.wait{
                transform: unset;
            }
            .sp8 .title-flex .below {
                display: none;
            }
    
           .wait-area{
            align-items: center;
            
           }

           .wait-area img.dummy{
            width: 100%;
           }
        }
            


        /*タブメニュー制御*/
        /* ラジオボタンを非表示 */
        .tab-radio {
            display: none;
        }

        .tab-contents {
            display: none;
        }

        #content1:checked ~ .tab-main #content1,
        #content2:checked ~ .tab-main #content2,
        #content3:checked ~ .tab-main #content3,
        #content4:checked ~ .tab-main #content4,
        #content5:checked ~ .tab-main #content5
         {
            display: flex;
        }

        .tab-menu__item {
            cursor: pointer;
            position: relative; 
        }
        #content1:checked ~ .tab-menu li:nth-child(1) .tab-menu__item,
        #content2:checked ~ .tab-menu li:nth-child(2) .tab-menu__item,
        #content3:checked ~ .tab-menu li:nth-child(3) .tab-menu__item,
        #content4:checked ~ .tab-menu li:nth-child(4) .tab-menu__item,
        #content5:checked ~ .tab-menu li:nth-child(5) .tab-menu__item {
            color: var(--color-sub);
        }
        #content1:checked ~ .tab-menu li:nth-child(1) .tab-menu__item::after,
        #content2:checked ~ .tab-menu li:nth-child(2) .tab-menu__item::after,
        #content3:checked ~ .tab-menu li:nth-child(3) .tab-menu__item::after,
        #content4:checked ~ .tab-menu li:nth-child(4) .tab-menu__item::after,
        #content5:checked ~ .tab-menu li:nth-child(5) .tab-menu__item::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -6px;
            transform: translateX(-50%);
            width: 120%;
            height: 4px;
            background: var(--color-sub);
            border-radius: 4px;
            z-index: 9;
        }

        /* ---------------------------------------- */
        /* pagination 旧デザイン */

        .pagination {
            display: grid; 
            padding-bottom: 16px;
            align-self: center;   
            grid-template-columns: repeat(10, auto);
            gap: 8px 10px; 
        }
        .pagination a {
            font-size: 20px;
            font-weight: bold;
            color: #4EACA1;
            position: relative;
            padding-bottom: 4px;
            transition: 0.3s;
        }
        .pagination a.active{
            text-decoration: none;
        }
        .pagination a.active::after {
            text-decoration: none;

        }
        .pagination a:hover {
            color: #1f7c7c;
        }


        /* ---------------------------------------- */
        /* pagination 新デザイン */

        .pagination-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            align-self: center;
            gap: 24px;
        }

        .pagination-wrapper .pagination {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 16px 0;
        }

        .pagination-wrapper .pagination button {
            width: 42px;
            height: 42px;
            border: 1px solid #4EACA1;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.6);
            color: #4EACA1;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
        }


        .pagination-wrapper .pagination button:hover:not(.active),
        .pagination-wrapper .pagination button.active {
            background: #4EACA1;
            color: white;
            border-color: #4EACA1;
        }

        .pagination-wrapper .pagination .dots {
            color: #a0aec0;
            font-weight: bold;
            padding: 0 5px;
        }

        /* 矢印ボタンのスタイル調整 */
        .pagination-wrapper .pagination button.arrow {
            color: #4EACA1;
        }

        @media (max-width: 1200px) {
            .pagination-wrapper .pagination {
                padding: 12px 0;
                gap: 6px;
            }

            .pagination-wrapper .pagination button {
                width: 32px;
                height: 32px;
                font-size: 14px;
            }
        }

        @media (max-width: 480px) {

        .pagination-wrapper .pagination button {
            width: 28px;
            height: 28px;
            font-size: 13px;
        }
        }

        /* ---------------------------------------- */
        /* タブエリア クチコミ */

        .review-container,.purchase-container{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;

        }
        .review-title{
            display: flex;
            flex-direction: column;
            align-self: stretch;
            gap: 2px;
        }
        .review-sort{
            display: flex;
            padding: 2px 8px;
            align-items: flex-end;
            border: 1px solid #D9D9D9;
            font-size: 12px;
        }
        .review-result{
        }

        .review-frame,.purchase-frame{
            display: flex;
            padding: 8px;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            align-self: stretch;
            background:var(--color-gray);
        }

        .review-frame .main{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            gap: 16px;
            align-self: stretch;
            background: #fff;
            border: solid 1px #BCBBBA;
        }

        .review-frame .main .header{
            display: flex;
            padding: 16px 8px;
            align-items: center;
            align-content: center;
            gap: 16px;
            align-self: stretch;
            flex-wrap: wrap;
            border-bottom: 2px solid #BCBBBA;
            background:#DCEEEC;
        }



        .review-frame .main .header .name{       

        }

        .review-frame .main .header .total-review{  
            color: var(--color-text, #212121);
        }

        .review-frame .main .header .total-review span{  
            margin-left: 0.5rem;
            font-size: 24px;    
        }

        .review-frame .main .bottom{
            display: flex;
            padding: 0 8px 16px 8px;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            gap: 16px;
            align-self: stretch;
        }

        .review-frame .main .bottom .frame{
            display: flex;
            align-items: center;
            align-content: center;
            align-self: stretch;
            flex-wrap: wrap;
            font-size: 14px;
        }

        .review-frame .main .bottom .section{
            padding-bottom: 16px;
            border-bottom: 1px solid #BCBBBA;        
        }


        .review-frame .main .bottom .frame span{
            margin-right: 1rem;
        }
        .review-frame .main .bottom .frame.date{
            font-size: 16px;
            font-weight: 700;
            align-self: flex-end;
        }

        @media (max-width: 1200px) {

        .review-frame .main .header{
            gap: 8px;
        }


        .review-frame .main .bottom .frame{
            font-size: 14px;
            gap: 8px;
        }

        .review-frame .main .bottom .section{
            font-size: 12px;
        }

        .review-frame .main .bottom .frame span{
            margin-right: 0;
        }

         .exchange{
            display: none;
        }
        }



        /* ---------------------------------------- */
        /* タブメニュー　買取実績 */

        .purchase-frame .main{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            align-self: stretch;
            background: #fff;
            border: solid 1px #BCBBBA;
        }


        .purchase-frame .main .header{
            /*position: relative;*/
            display: flex;
            /*padding: 2px;*/
            align-items: center;
            align-content: center;
            align-self: stretch;
        }

        .purchase-frame .main .header .ribbon{
            /*position: absolute;*/
            top: 0;
            left: 0;
            width: 80px;
            height: 80px;
            background: linear-gradient(to bottom right,#7e7e7e  0%, #9a9a9a 50%, transparent 50%);
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            padding: 2px 0 0 2px;  
            flex-shrink: 0;  
        }
        .purchase-frame .main .header .ribbon .text{
                color: white;
                font-size: 14px;
                margin-left:2px;
        }

        .purchase-frame .main .header .title{
            font-size: 20px;
            font-weight: 700;
        }


        .purchase-frame .main .bottom{
            display: flex;
            padding: 8px;
            flex-direction: column;
            align-self: stretch;
        }
        .purchase-frame .main .bottom img{
            width: 180px;
            height: auto;
        }

        .purchase-frame .main .bottom .title{
            font-size: 16px;
            font-weight: 700;
        }
        .purchase-frame .main .bottom .price{
            font-size: 32px;
            font-weight: 700;
            color: red;
        }
        .purchase-frame .main .bottom .condition,
        .purchase-frame .main .bottom .date{
            font-size: 14px;
        }

        .purchase-frame .main .bottom .comment{
            margin-bottom: 1rem;
        }


        /* ---------------------------------------- */
        /* タブエリア キャンペーン */

        .campaign-frame{
            display: flex;
            padding: 16px 8px;
            flex-direction: column;
            align-items: start;
            gap: 16px;
            align-self: stretch;
        }
        .campaign-frame .decoration{
            border-top: 1px solid #D9D9D9;
            border-bottom: 1px solid #D9D9D9;
        }

        .campaign-frame label{
            align-self: center;
            width: 242px;
            padding: 4px;
            flex-shrink: 0;
            background: #4EACA1;
        }
        .campaign-frame div{
            font-size: 20px;
        }

        .campaign-frame .title{
            color:#4EACA1;
            font-weight: 700;
        }
        .campaign-frame .title.black{
            color: black;
        }

        .campaign-frame label{
            color: white;
            font-size: 16px;
        }

        /* ---------------------------------------- */
        /* タブエリア サイドバー */
        .tab-sidebar,.cate-sidebar{
            display: flex;
            width: 242px;
            padding: 0 8px;
            flex-direction: column;
            align-items: flex-start;
            gap: 32px;
            flex-shrink: 0;
            box-sizing: border-box;
        }
        .cate-sidebar{
            margin-top: 24px; /*メインエリアの余白に合わせる*/
            gap: 16px;
            border: 6px solid #F5F5F5;
            background: #FFF;
        }

        .cate-sidebar button{
            width: 100px;
        }

        .tab-sidebar .contact{
            display: flex;
            padding: 32px 16px;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            align-self: stretch;
            border-radius: 12px;
            border: 8px solid var(--color-bg-gray, #F2F2F2);
            background: #FFF;
        }

        
        .tab-sidebar .contact a,
        .flex-column.contact a{
            color: #7A7979;
         }
        
        .contact-btn{
            width: 100%;
            max-width: 320px;
            font-size: 12px;
        }
        .contact-btn.line{
            width: 160px;
        }
        .contact-btn p{
            font-size: 12px;
        }

        .contact-btn span{
            font-size: 16px;
        }

        .flex-column{
            display: flex;
            flex-direction: column;
            align-items: center;
            align-self: stretch;            
        }

        .flex-column.unset{
            flex-direction: unset;
        }
        .flex-column.left,
        .flex-column.sp{
            align-items: unset;
        }
        .flex-column.self-unset{
            align-self: unset;
        }
        .flex-column.new-shop{
            width: 100%;
            box-sizing: border-box;
            padding: 8px;
        }
        .padding8{padding: 8px;}
        .padding16{padding:16px;}
        .padding16-0{padding:16px 0;}
        .gap4{gap:4px;}
        .gap8{gap:8px;}
        .gap12{gap:12px;}
        .gap16{gap:16px;}
        .gap24{gap:24px;}
        .gap32{gap:32px;}
        .gap48{gap:48px;}
        .gap08{gap:0 8px;}
        .flex-column8 img{
            width:100%;
        }
        .pick-up img{
            width: 100%;  
            border-radius: 6px;
        }
        .flex1{
            flex: 1;
        }
        .pick-up p,
        .slider p{
            font-size: 14px;
            display: -webkit-box;       
            -webkit-box-orient: vertical;      
            -webkit-line-clamp: 3;             
            overflow: hidden;                  
            text-overflow: ellipsis;          
        }
         .table-frame .right .iframe{
        max-width: 400px; 
        }

        @media (min-width: 1200px) {
        .tab-table .iframe-sp{
            display: none;
        }
        }
        @media (max-width: 1200px) {

        .tab-table .iframe-sp iframe{
            max-width: 100%;
        }
        .flex-column.sp{
            align-items: unset;
        }
        .tab-main{
            padding: 16px 0;
        }


         .tab-contents{
            flex-direction: column;
            padding: 0 8px ;
         }

         .tab-sidebar,.cate-sidebar {
           display: none;
         }
         
         .table-frame .left{
            width: 96px;
            padding: 8px ;
            font-size: 12px;
         }       
         .table-frame .right{
            display: flex;
            padding: 8px;
            align-items: self-start;
            gap: 8px;
            font-size: 12px;
         }
        .table-frame.pc,
         .table-frame .right .frame1.pc{
            display: none;
         }

         .table-frame .right .frame2.pc{
            display: none;
         }

         .table-frame .right .iframe{
            display: none;
         }
        
         .table-frame .right p,.table-frame .right a{
            font-size: 12px;
         }

         .tab-comment {
            align-items: start;
            gap: 4px;
            margin-top: 24px;
         }

        
         .tab-comment .title {
            font-size: 14px; 
            color: #020101;          
         }
         .tab-comment .comment p ,.slider p{
            font-size: 12px; 
         }

         .title-flex.relative {
            flex-direction: unset;
            align-self: center;
         }

        .title-flex.relative .title,
        .title-flex.relative .ranking-banner-title{
            order: 2;
         }
         .title-flex.relative img,
        .title-flex.relative img.area-img{
            width: 32px;
            position: unset;
            transform: none;
            order: 1;
            aspect-ratio: 1 / 1;
           }
        }

        @media (min-width: 1200px) {

        .table-frame .right .frame1.sp{
            display: none;
        }
        .table-frame .right .frame2.sp{
            display: none;
        }

        .margin8.sp{

            display: none;
        }}

        
        /* ---------------------------------------- */
        /* カテゴリー サイドバー */
        .cate-sidebar .cate-title {
        display: flex;
        padding: 16px 8px;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        border-bottom: 1px solid #B0B0B0;
        }

        .cate-sidebar .cate-title .left,
        .cate-sidebar .cate-title .right,
        .cate-sidebar .cate-list .right,
        .cate-sidebar .cate-list .left,
        .cate-list .history-label
        {
        color: #565656;
        font-size: 16px;
        font-weight: bold;
        }

        .cate-sidebar .cate-list .left ,
        .cate-list .history-label

        {
        font-size: 14px;
        font-weight: 400;
        }

        .cate-sidebar .cate-list {
        display: flex;
        padding: 0 8px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        align-self: stretch;
        }

        .cate-sidebar .cate-list .area {
        display: flex;
        flex-direction: column;
        align-self: stretch;
        }

        /* チェックボックスの見た目 */
        input.box,.select-box input.box {
        border: 1px solid #D9D9D9;
        width: 18px;
        height: 18px;
        cursor: pointer;
        position: relative;
        }

        .select-box input.box{
        border-radius: 50%;        
        }

        input.box:checked,
        .select-box input.box:checked {
        background-color: #333;
        border-color: #333;
        }

        input.box:checked::after,
        .select-box input.box:checked::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 5px;
        width: 4px;
        height: 8px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(45deg);
        }

        .toggle {
        display: none;
        }

        /* ラベル全体（クリックで開閉） */
        .area-label {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        user-select: none;
        width: 100%;
        }

        .area-label.child{
        box-sizing: border-box;
        padding-left: 24px;
        }
        /* SVGスタイル */
        .plus-minus {
        width: 20px;
        height: 20px;
        stroke: #666;
        stroke-width: 2;
        transition: transform 0.3s ease, stroke 0.3s ease;
        }
        .plus-minus.lg {
            width: 28px;
            height: 28px;
        }

        .plus-minus .vertical {
        transition: opacity 0.3s ease;
        }
        .plus-minus.active .vertical {
        display: none;
        }
        /* サブリスト */
        .sub-list{
        display: none;
        padding-left: 24px;
        margin-top: 6px;
        flex-direction: column;
        gap: 6px;
        }

        .sub-list.open{
            display: block;
        }
        .sub-list label,
        .select-box label{
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        color: #565656;
        }

        .toggle:checked ~ .sub-list,
        .toggle:checked ~ .toggle-content {
        display: flex;
        }

        /* コンテンツ（デフォルト非表示） */
        .toggle-content {
            display: none;
        }

        /* ＋ → − アニメーション */
        .toggle:checked + .toggle-header .plus-minus .vertical,
        .toggle:checked + .area-label .plus-minus .vertical {
            opacity: 0;
        }

        .toggle:checked + .toggle-header .plus-minus,
        .toggle:checked + .area-label .plus-minus {
            transform: rotate(180deg);
            stroke: #333;
        }

        /* --- 検索ボックス --- */
        .cate-list .search-area {
            width: 100%;
        }


                /* 検索ボタン（追加） */
        .cate-list .search-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            min-width: 28px;
            border-radius: 50%;
            background: transparent;
            border: none;
            padding: 0;
            cursor: pointer;
        }
        .cate-list .search-box {
            display: flex;
            align-items: center;
            gap: 8px;
            height: 32px;                 
            padding: 8px 12px;
            border-radius: 16px;          
            background: #F1F0F0;         
            box-sizing: border-box;
        }

        .cate-list .search-box .search-input {
            flex: 1;
            border: none;
            background: transparent;
            outline: none;
            font-size: 15px;
            color: #8d8d8d;
            padding: 0;
        }

        .cate-list .search-box .search-input::placeholder {
            color: #A8A8A8;
        }

        /* クリアボタン（丸い白背景／薄い枠） */
        .cate-list .search-clear {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            min-width: 28px;
            border-radius: 50%;
            background: #FFFFFF;
            border: 1px solid #E0E0E0;
            padding: 0;
            cursor: pointer;
        }

        /* アイコン線の共通スタイル */
        .cate-list .icon-x {
            width: 12px;
            height: 12px;
            stroke: #9A9A9A;
            stroke-width: 1;
            stroke-linecap: round;
            fill: none;
        }

        /* hover/focus states */
        .cate-list .search-clear:hover .icon-x,
        .cate-list .search-clear:focus .icon-x {
        stroke: #666;
        }
        .cate-list .search-box:focus-within {
        box-shadow: 0 0 0 3px rgba(0,0,0,0.03); /* 軽いフォーカスリング */
        }

        /* --- 履歴リスト --- */
        .cate-list .history-list {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;          
        box-sizing: border-box;
        }

        /* 履歴アイテム（横並び：テキスト／右端に削除ボタン） */
        .cate-list .history-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-left: 16px;
        }


        /* 削除ボタン（軽い円形） */
        .cate-list .history-delete {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: transparent;
        border: 1px solid #EAEAEA;
        cursor: pointer;
        padding: 0;
        }

        .cate-list .history-delete .icon-x {
        stroke: #B0B0B0;
        width: 20px;
        height: 20px;
        }

        .cate-list .history-delete:hover {
        background: #FFF;
        border-color: #D0D0D0;
        }

        .cate-list .history-delete:hover .icon-x {
        stroke: #666;
        }



        /*追加分*/

        /* 履歴リストのブラウザデフォルトCSSを無効化 */
        .cate-list .history-list ul {
            margin: 0;
            padding: 0;
        }

        .cate-list .history-list li {
            list-style: none;
            margin: 0;
            padding: 0;
            display: -webkit-box;       
            -webkit-box-orient: vertical;      
            -webkit-line-clamp: 1;             
            overflow: hidden;                  
            text-overflow: ellipsis;  
        }

        /* 履歴は初期状態で非表示 */
        .cate-list .history-list {
            display: none;
        }

        .cate-list .search-area:focus-within .history-list,
        .cate-list .history-list:active {
            display: flex;
        }

        .cate-list .search-area {
            position: relative;
        }

        .cate-list .history-list {
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            width: 100%;
            background: #fff;
            padding: 8px;
            z-index: 20;
            border: solid 1px #D9D9D9;
            color: #7e7e7e;
            font-size: 14px;
            box-sizing: border-box;
            max-height: 40vw; 
            overflow-y: auto;
            flex-direction: column;
        }


        /* 下部の「もっと見る」誘導（グラデーション） */
        .cate-list .history-list.show-more::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 32px;
            background: linear-gradient(
                to bottom,
                rgba(255,255,255,0),
                rgba(255,255,255,0.9)
            );
            pointer-events: none;
        }

        /* ↓ アイコン */
        .cate-list .history-list.show-more::before {
            content: "";
            position: absolute;
            bottom: 8px;
            left: 50%;
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid #9A9A9A;
            transform: translateX(-50%);
            pointer-events: none;
        }


        .price-range {
            display: flex;
            width: 100%;
            align-items: center;
            gap: 2px;
        }

        .price-input {
            flex: 1;
            width: 40%;
            padding: 8px;
            border: none;
            border-radius: 16px;
            background: #F1F0F0;;
            outline: none;
        }

        .price-input:focus {
            border-color: #999;
            box-shadow: 0 0 0 3px rgba(0,0,0,0.03); /* 軽いフォーカスリング */

        }

        .price-separator {
            color: #333;
            font-size: 14px;
            white-space: nowrap;
        }

        .price-unit {
            color: #333;
            font-size: 14px;
        }

        /* ---------------------------------------- */
        /* sp 用の追加 */

        .purchase-toggle {
            display: none;
        }

        .purchase-header {
            display: none;
        }

        @media (max-width: 1200px) {
            .cate-list .search-box .search-input{
                width: 76vw;
            }
            .flex-nogap.wrap0{
            flex-wrap: wrap;
            gap: 0 8px;
            }
            .purchase-header {
                width: 100%;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 8px;
                cursor: pointer;
                font-size: 14px;
                position: relative;
            }
            
            /* ボーダーラインを常に表示 */
            .purchase-header::after {
                content: "";
                position: absolute;
                bottom: -16px;
                left: 8px;
                right: 8px;
                border-top: 1px solid #D9D9D9;
            }
            
            .purchase-header + .flex-column {
                display: none;
            }
            
            .purchase-toggle:checked + .purchase-header + .flex-column {
                display: flex;
            }
            
            .purchase-toggle:checked + .purchase-header .vertical {
                opacity: 0;
            }
        }
        /* ---------------------------------------- */
        /* タブ下 */

         .tab-bottom{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 42px;
            flex-shrink: 0;
         }
         .section{
            
         }
         .section-title {
            font-size: 24px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: #555;
         }
        .section-title img {
            width: 2rem;
            height: auto;
         }

        .slider {
            width: 100%;
            display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 16px;
        }
        /* 5番目以降を非表示 */
        .slider > div:nth-child(n+5) {
            display: none;
        }
        .slider img  {
            width: 100%;
            border-radius: 6px;
            object-fit: cover; 
            aspect-ratio: 7/4;
        }

        .slider span.price{
            font-size: 20px; font-weight: bold; color: red; margin-left:6px;
        }
        .slider .center{
            align-self: center;
        }

        .see-more-wrapper{
            display: flex;
            justify-content: flex-end;
            align-self: flex-end; 

        }
        .see-more-wrapper a{
            color: #7A7979;
            font-size: 14px;
            font-weight: 700;
            text-decoration-line: underline;
            text-underline-position: from-font;
        }
    

        .cate-container{
            width: 100%;
        }
        .cate-container ul{
            display: flex;
            align-items: flex-start;
            align-content: flex-start;
            gap: 8px;
            align-self: stretch;
            flex-wrap: wrap;
            padding: 16px;
        }
        .cate-container li{
            display: flex;
            padding: 4px 8px;
            justify-content: center;
            align-items: center;
            border-radius: 6px;
            border: 1px solid #7A7979;
            
        }

        .cate-container label span {
            display: block;
            margin: 0;
            padding: 0;
        }
        .cate-container label {
            display: block;
            cursor: pointer;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .cate-container a,
        .cate-container label{
            text-decoration: none;
            color: #7A7979;
            text-align: center;
            font-size: 14px;
        }
        .cate-container input[type="checkbox"] {
            display: none;
        }

        .cate-container li:has(input[type="checkbox"]:checked) {
            border: 1px solid var(--color-sub);
        }

        .cate-container li:has(input[type="checkbox"]:checked) span {
            color: var(--color-sub);
        }
       


        @media screen and (max-width: 1200px) {
            .see-more-wrapper{
                align-self: unset;
            }

            .see-more-wrapper a {
                color: #4EACA1;
            }

            .see-more-wrapper a span {
            margin-left: 0.5em; 
            }
            .sp-cateline{    
                border-top: solid 1px #BCBBBA;
                border-bottom: solid 1px #BCBBBA;
                padding: 32px 0;
            }
            .cate-container{padding:16px; box-sizing: border-box;}
            .cate-container a,.cate-container span{font-size: 10px;}
            .cate-container ul{padding: 8px;}
            .tab-bottom{width: auto; padding: 32px 8px;}
            .tab-bottom .title-flex .title{font-size: 20px;}
            .tab-bottom .title-flex .title-sp{font-size: 24px; align-self: center;}
            .tab-bottom .title-flex .below{display: none;}
            .tab-bottom .title-flex .title-sp .below{display: block;}
            .slider > div{width: 100%;}
            .slider > *:nth-child(n+5) {display: none; /* 5枚目以降を非表示 */}
            .slider {
                padding: 8px;
                grid-template-columns: repeat(2, 1fr); /* 2カラム */
                grid-auto-rows: auto; /* 自動で2列分の高さに */
                gap: 8px;
            }
        }
        @media (min-width: 1200px) {
            .see-more-wrapper.sp{
                display: none;
            }
            
            .see-more-wrapper span{
                display: none;
            }
            .tab-bottom .sp{
                display: none;

        }
        }


        /*shop-list*/
        .shop-list-container{
            display: flex;
            padding: 10px 16px;
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
        }

        .shop-list-container .comment{
            font-size: 14px;
        }

        .shop-list-container .header{
            width: 100%;
            box-sizing: border-box;
            display: flex;
            padding: 10px 16px;
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;        
        }

        .shop-list-container .sp-cate{
            width: 100%;
            padding:  8px 0;
        }

        .shop-list-container .sp-cate .frame{
            display: flex;
            padding: 0 8px;            
            align-self: stretch;
        }
        .shop-list-container .sp-cate span{
            width: 64px;
            color: #4EACA1;
            font-size: 14px;
            font-weight: 700;
        }


        .shop-list-container .sp-cate label{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
            flex: 1 0 0;
            position: relative;
        }
        label.search-label{
            height: 28px;
            align-self: stretch;
            border-radius: 16px;
            background: #F1F0F0;
        }
        .shop-list-container .sp-cate label .change-button{
            position: absolute;
            top: 4px;
            right: 4px;
            background: #B0B0B0;
            padding: 2px 8px;
            font-size: 12px;
            font-weight: 700;
            color: #565656;

        }
        .shop-list-container .header .title{
            color: #000;
            font-size: 24px;
            font-weight: 700;

        }
        .shop-list-container .main{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 32px;        
        }
        
        .shop-list-container .main-contents{   
            display: flex;
            padding: 8px;
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
            align-self: stretch;
            border-radius: 8px;
            border: 1px solid #D9D9D9;
            background: #FFF;
            position: relative;
            filter: drop-shadow(2px 4px 4px #dedede);
        }
        .contact-form-shop-detail img.shop,
        .shop-list-container .main-contents img.shop{ 
            width: 200px;
            align-self: stretch;
            object-fit: cover;
            aspect-ratio: 16 / 9;
        }

        .shop-list-container .main-contents img.user{ 
            width: 72px;
            height: 72px;
            aspect-ratio: 1/1;
        }  
        .shop-list-container .main-contents img.map{
            width: 20px;
            align-self: unset;
            
        }
        .shop-list-container .main-contents .icon{
            display: flex;
            width: 42px;
            height: 38px;
            justify-content: center;
            align-items: center;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 700;
            text-align: center;
        }

        .shop-list-container .main-contents .icon.a{
            color: white;
            background: #FFAD3A;
        } 
        .shop-list-container .main-contents .icon.b{
            color: white;
            background: #FF7EA7;
        }         
        .shop-list-container .main-contents .icon.c{
            color: white;
            background: #3A61FF;
        }         
        .shop-list-container .main-contents .icon.d{
            color: white;
            background: #E9797B;
        } 
        .shop-list-container .main-contents .purchase-list{
            display: flex;
            padding: 8px 0;
            align-items: center;
            gap: 2px;
            align-self: stretch;
            border-top: 1px solid #D9D9D9;
            font-size: 12px;
        }
        .shop-list-container .main-contents .purchase-list .wrap{
            font-size: 14px;
        }

        .shop-list-container .main-contents .details{
            display: flex;
            padding: 8px 80px;
        }
        .shop-list-container .main-contents .details-wrapper{
            margin: 16px;
            align-self: center;

        }
        .shop-left .icon-area{
            padding:8px 0;
        }
        .shop-left .icon-area img{
            width: 46px;
            height: 46px;
        } 

        /*タグのONでの切り替え*/

        .shop-left .icon-area img.cash_on{
            content: url("../image/tag_cash2.png");
        } 
        .shop-left .icon-area img.company_on{
            content: url("../image/tag_company2.png");
        } 
        .shop-left .icon-area img.coupon_on{
            content: url("../image/tag_coupon2.png");
        } 
        .shop-left .icon-area img.open_on{
            content: url("../image/tag_open2.png");
        } 
        .shop-left .icon-area img.parking_on{
            content: url("../image/tag_parking2.png");
        } 


        @media (max-width: 1200px) {
        .shop-list-container .main-contents .purchase-list{
            align-items: start;
        }

        .shop-list-container .main-contents .purchase-list .sp-wrap{
            flex-wrap: wrap;
            justify-content: start;
           }
            .shop-list-container{
                padding: 8px;
            }
            .shop-list-container .header{
                padding: 4px;
            }
            .shop-list-container .header a            
            {
                display: none;
            }  
            .shop-list-container .main-contents img.shop{ 
                width: calc(100vw - 34px);
                border-radius: 8px;
            }
            
            .shop-list-container span.achive{
                display: none;
            }


            .shop-list-container .main-contents img.user{ 
                width: 60px;
                height: 60px;
                aspect-ratio: 1/1;
                margin-top: -4px;
            }  
        }
             
        @media (min-width: 1200px) {
            .shop-list-container .header .sp-cate{
            display: none;}


        }

        /* ---------------------------------------- */
        /* shop-list　sp画面用grid */
        .shop-grid-container {
            display: flex;
            gap: 16px;
            width: 100%;
        }


        @media (max-width: 1200px) {
            .shop-grid-container {
                display: grid;
                grid-template-columns: 1fr; /* 1カラムに変更 */
                grid-template-areas:
                "image"
                "title"
                "icons"
                "nav"
                "comment"
                "address"
                "achievement"
                "map-section";
                gap: 8px;
            }
            
            /* 子要素を親レベルに展開 */
            .shop-left,
            .shop-right {
                display: contents;
            }
            
            
            .shop-left > img {
                grid-area: image;
            }
            
            .shop-left .flex-auto.sp-unset {
                grid-area: icons;
            }
            
            .shop-left .achive {
                grid-area: achievement;
            }
            
            .shop-right .flex-nogap.gap4 {
                grid-area: nav;
            }
            
            .shop-section-title {
                grid-area: title;
            }
            /*
            .shop-section-comment {
                grid-area: comment;
            }*/
            
            .shop-section-address {
                grid-area: address;
            }
            .map-section{
                grid-area: map-section;
            }
            
            }

    
        /* ---------------------------------------- */
        /* Iphone 買取実績 ver5 */

        .shop-list-container .achive-list{
            display: flex;
            flex-wrap: wrap;
            gap:8px;
        }

        .shop-list-container .achive-frame{
            max-width: 48%;
            border: solid 1px #4EACA1;
            padding-bottom: 20px;
        }

        .shop-list-container .achive-frame-header{
            box-sizing: border-box;
            height: 76px;
            width: 100%;
            padding: 8px 12px;
            background :#4EACA1;
            display: flex;
            align-items: start;

        }
        .shop-list-container .achive-frame-main{
            width: 100%;
            position: relative;  
        }
        .shop-list-container .achive-frame-main img{
            max-width: 100%;
            max-height: 150px;
            box-sizing: border-box;
        }
        .shop-list-container .achive-frame-header .title {
            font-size:20px ;
            font-weight: 700;
            color: white;
            display: -webkit-box;          
            -webkit-box-orient: vertical;   
            -webkit-line-clamp: 2;         
            overflow: hidden;               
            text-overflow: ellipsis;       

        }

        .shop-list-container .white-circle {
            flex-shrink: 0;
            width: 40px;
            height: 36px;
            background: white;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;

        }
        .shop-list-container .star-icon {
            width: 30px;
            height: 30px;
        }

        .shop-list-container .achive-frame-main .ribbon{
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 80px 80px 0 0;
            border-color: #DCEEEC transparent transparent transparent; /* 色は適宜変更 */
            z-index: 10;
        } 
        

        .shop-list-container .achive-frame-main .ribbon .text {
            position: absolute;
            top: -76px;
            left: 6px;
            color: #1e1e1e;
            font-size: 14px;
            line-height: 1.3;
            transform-origin: left top;
            white-space: nowrap;
        }

        .shop-list-container .achive-frame-main .shop-title {
            display: -webkit-box;          
            -webkit-box-orient: vertical;   
            -webkit-line-clamp: 1;         
            overflow: hidden;               
            text-overflow: ellipsis;       

        }

        .shop-list-container .achive-frame-main .description {
            height: 92px;
            display: -webkit-box;          
            -webkit-box-orient: vertical;   
            -webkit-line-clamp: 4;         
            overflow: hidden;               
            text-overflow: ellipsis;       

        }
        /* ---------------------------------------- */
        /* フッター */
        footer{
            background: var(--color-gray);
            padding:32px;
        }
        footer .info{
            box-sizing: border-box;
            width: 100%;
            max-width: 780px;
        }
        footer ul{
            display: flex;
            justify-content: flex-end;
            align-items: flex-start;
        }

        footer li{
            font-size: 14px;
            display: flex;
            padding: 0 8px;
            align-items: center;
        }

        footer li a{
            text-decoration: none;
        }

        footer li:not(:last-child) {
            border-right: 1px solid var(--text-gray, #BCBBBA);
        }

        footer img{
            width: 100px;
            
        }

        /* モバイル対応 */
        @media (max-width: 1200px) {
            .shop-list-container .achive-frame{
                max-width: unset;
                width: 100%;
                    }
            footer {
                background-color: white;
                display: flex;
                flex-direction: column;
                margin-bottom: 32px;
                padding: 16px;
            }
            
            footer .info {
                flex-direction: column;
                align-items: center;
                max-width: 100%;
                order: 1;
                gap:32px;
            }
            
            footer img {
                order: 2;
            }
            
            footer nav {
                order: 1;
            }
            
            footer ul {
                flex-direction: column;
                align-items: normal;
                padding: 0;
            }
            
            footer li:first-child {
                border-top: 1px solid #BCBBBA;
            }

            footer li {
                padding: 12px 4px;
                border-right: none !important;
                border-bottom: 1px solid #BCBBBA;
                position: relative;
                
            }

            footer.gap32{
                gap: 16px;
            }

            footer li a {
                width: 100%;
                color: var(--color-text);
            }
            
            footer li::after {
                content: '>';
                position: absolute;
                right: 20px;
                
            }
            
            footer .copyright {
                text-align: center;
                order: 3;
            }
        }

        /* ---------------------------------------- */
        /* favicons */
        .favorite {
            display: flex;
            justify-content: center;
            align-items: center;
            width: max-content;
        }
        .favorite span {
            display: block;
            margin: 0 0.1rem;
            width: 1.0rem;
            height: 1.0rem;
            mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M287.9%200c9.2%200%2017.6%205.2%2021.6%2013.5l68.6%20141.3%20153.2%2022.6c9%201.3%2016.5%207.6%2019.3%2016.3s.5%2018.1-5.9%2024.5L433.6%20328.4l26.2%20155.6c1.5%209-2.2%2018.1-9.7%2023.5s-17.3%206-25.3%201.7l-137-73.2L151%20509.1c-8.1%204.3-17.9%203.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1%20218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9%2019.3-16.3l153.2-22.6L266.3%2013.5C270.4%205.2%20278.7%200%20287.9%200zm0%2079L235.4%20187.2c-3.5%207.1-10.2%2012.1-18.1%2013.3L99%20217.9%20184.9%20303c5.5%205.5%208.1%2013.3%206.8%2021L171.4%20443.7l105.2-56.2c7.1-3.8%2015.6-3.8%2022.6%200l105.2%2056.2L384.2%20324.1c-1.3-7.7%201.2-15.5%206.8-21l85.9-85.1L358.6%20200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9%2079z%22%2F%3E%3C%2Fsvg%3E');
            mask-position: center;
            mask-repeat: no-repeat;
            mask-size: contain;
            cursor: pointer;
            opacity: 0.5;
            background-color: orange;
        }
        .favorite span.on {
            mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M316.9%2018C311.6%207%20300.4%200%20288.1%200s-23.4%207-28.8%2018L195%20150.3%2051.4%20171.5c-12%201.8-22%2010.2-25.7%2021.7s-.7%2024.2%207.9%2032.7L137.8%20329%20113.2%20474.7c-2%2012%203%2024.2%2012.9%2031.3s23%208%2033.8%202.3l128.3-68.5%20128.3%2068.5c10.8%205.7%2023.9%204.9%2033.8-2.3s14.9-19.3%2012.9-31.3L438.5%20329%20542.7%20225.9c8.6-8.5%2011.7-21.2%207.9-32.7s-13.7-19.9-25.7-21.7L381.2%20150.3%20316.9%2018z%22%2F%3E%3C%2Fsvg%3E');
            opacity: 1.0;
        }
        .favorite.nopointer span {
            cursor: default;
        }
        .favorite.mini {
            font-size: 0.75rem;
            margin-bottom: 0.15rem;
        }
        .favorite.mini span {
            width: 0.75rem;
            height: 0.75rem;
        }

        .padding0{
            padding: 0;
        }





        /* ---------------------------------------- */
        /* お問い合わせ・ */
        
        .contact-form-container {
            width: 100%;
            max-width: 950px;
            margin: 0 auto;
            margin-bottom: 48px;
        }

        .contact-form-container h2{
            padding:16px 0;
        }
        .contact-form-container .question-area-wrapper h2{
            padding:0;
        }
        .contact-form-title {
            display: block;
            font-weight: bold;
            font-size: 24px;
            margin-bottom: 20px;
            
        }

        .contact-form-subtitle {
            display: block;
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 16px;
        }



        .contact-form-row {
            display: flex;
            align-items: start;
            gap: 16px;
            margin-bottom: 24px;
        }


        .contact-form-label {
            font-size: 16px;
            font-weight: 400;
            min-width: 210px;
        }
    
        .contact-form-label.review-section{
            display: flex;
            justify-content: space-between;
            font-weight: bold;
        }
        .contact-form-label.borderless {
            min-width: none;
        }
        .contact-form-label.review-section-sub{
            font-weight: bold;
        }
        .contact-form-label span {
            margin-left: 14px;
            padding: 1px 8px;
            background-color: #E82929;
            color: white;
            font-size: 12px;
            border-radius: 4px;
        }

        .contact-form-field {
            flex: 1;
        }

        .contact-form-field input[type="radio"] {
            appearance: auto;
            -webkit-appearance: radio;
            width: auto;
            height: auto;
        }
        .contact-form-input,
        .contact-form-select,
        .contact-form-textarea {
            padding: 8px 12px;
            font-size: 16px;
            border: none;
            border-radius: 8px;
            background-color: #fff;
            border: solid 1px #D9D9D9;
            color: #757575;

        }
        .contact-form-textarea.heightless {
            min-height: unset;
        }

        /* ベースのコンテナ */
        .rating-wrapper {
            display: flex;
            width: 48px;
            justify-content: center;
            border: solid 1px #d9d9d9;
            border-radius: 24px;
            align-self: start;
        }


        /* 共通のスター設定 */
        .rating {
            direction: rtl;
            display: inline-flex;
            font-size: 20px;
        }

        /* ラジオボタンを隠す */
        .rating input[type="radio"] {
            display: none;
        }

        /* デフォルトの星の状態（縁取りのみ） */
        .rating label {
            cursor: pointer;
            display: inline-block;
            color: transparent; /* 中を透明に */
            -webkit-text-stroke: 1px #d9d9d9;
            text-stroke: 1px #d9d9d9;
            transition: all 0.2s; /* 変化を滑らかに */
        }

        /* --- カラー定義（リファクタリング） --- */

        /* 通常時（.rating のみ） */
        .rating input:checked ~ label,
        .rating label:hover,
        .rating label:hover ~ label {
            color: var(--color-sub);
            -webkit-text-stroke: 1px var(--color-sub);
        }

        /* favoriteクラスがついている時 */
        .rating.favorite.on > label,
        .rating.favorite input:checked ~ label,
        .rating.favorite label:hover,
        .rating.favorite label:hover ~ label {
            color: var(--color-btn-secondary);
            -webkit-text-stroke: 1px var(--color-btn-secondary);
        }

        /* outlineクラスがある場合の特殊処理（必要に応じて） */
        .rating-outline label {
            -webkit-text-stroke: 1px #ffffff;
            text-stroke: 1px #ffffff;
        }

        /* 説明テキストのスタイル */
        .instruction {
            direction: ltr; 
            font-size: 14px;
            color: #D9D9D9;
            margin-left: 10px;
            align-self: center;
        }

        .contact-form-input{
            box-sizing: border-box;
            width: 100%;
           
        }

        .select-wrapper select option.before,
        .contact-form-select:invalid,
        .contact-form-input::placeholder,
        .contact-form-textarea::placeholder {           
        color:#D9D9D9;
        opacity: 1;  
        }

        .contact-form-select:invalid {
            color: #D9D9D9; 
        }

        .contact-form-select:valid {
            color: #7A7979; 
        }
        .contact-form-select option {
            color: #7A7979;
        }
        .contact-form-select {
            width: 182px;
            appearance: none;
            background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="12" viewBox="0 0 16 12" xmlns="http://www.w3.org/2000/svg"><path d="M8 12 L0 0 L16 0 Z" fill="%23999"/></svg>');
            background-repeat: no-repeat;
            background-position: right 12px center;
        }

        .contact-form-terms-box {
            background-color: #fff;
            padding: 20px;
            border-radius: 12px;
            max-height: 120px;
            overflow-y: scroll;
            border: solid 1px #D9D9D9;
            margin: 48px 0;
        }

        .profile-form-label{
            width: 20%;
            min-width: 210px;
        }

        .contact-form-terms-box div {
            font-size: 12px;
            line-height: 1.6;
        }
        .contact-form-terms.title  {
            font-weight: bold;
            margin-bottom: 8px;
            font-size: 14px;
        }

        .contact-form-checkbox-wrapper {

            margin: 20px 0;
        }

        .contact-form-checkbox-label {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 16px;
            justify-content: center;
        }
         .contact-form-checkbox-label.start{
            align-items: start;
 
        }

        .contact-form-shop-detail{
            width: 100%;
            box-sizing: border-box;
            padding: 4px;
            border: solid 1px #D9D9D9;
            border-radius: 8px;
        }

        .contact-form-checkbox-label .description{
            color: #7A7979;
            max-width: 500px;
            padding: 16px 0;
        }
        /*旧チェックボックス デザイン
        .contact-form-checkbox {
            width: 36px;
            height: 32px;
            border-radius: 12px;
            background: #fff;
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
            cursor: pointer;
            flex-shrink: 0;
        }
        */
        .contact-form-checkbox {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            background: #fff;
            border:solid 1px #D9D9D9;
            cursor: pointer;
            flex-shrink: 0;
        }
        .contact-form-checkbox:checked {
            background-color: #4EACA1;
            position: relative;
        }

        .contact-form-checkbox:checked::after {
            content: '';
            position: absolute;
            left: 10px;
            top: 5px;
            width: 6px;
            height: 12px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }
        .contact-form-submit-btn {
            width: 100%;
            max-width: 200px;
            margin: 32px auto;
            cursor: pointer;
        }

        .contact-form-textarea {
            box-sizing: border-box;
            width: 100%;
            padding: 12px 16px;
            font-size: 16px;
            border: none;
            border-radius: 8px;
            background-color: #fff;
            font-family: sans-serif;
            resize: vertical;
            min-height: 120px;
            border: solid 1px #D9D9D9;

        }
        .contact-form-guide-toggle {
            margin-bottom: 16px;
        }

        .contact-form-guide-content {
            margin-left: 8px;
        }
        .contact-form-guide-header {
            display: flex;
            align-items: center;
            gap :16px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
        }

        .contact-form-guide-title {
            color: #4EACA1;
            margin:8px ;
            
        }

        .contact-form-guide-arrow {
            font-size: 12px;
            transition: transform 0.3s;
        }

        .contact-form-guide-checkbox:checked + .contact-form-guide-header .contact-form-guide-arrow {
            transform: rotate(180deg);
        }


        .contact-form-guide-text {
            width: 240px;
            padding: 16px;
            border-radius: 8px;
            border: solid 1px #4EACA1;
            font-size: 14px;
            line-height: 1.8;
        }
        @media (min-width: 1200px) {
        .rating-wrapper{
            position: absolute;
            top: 8px;
            right: 8px;
        }
            .contact-form-checkbox-label{
                justify-content: unset;
                padding-left:35%;
                gap:8px;
            }

            .contact-form-row.center {
            align-items: center;
            padding-bottom: 16px;
        }}
        @media (max-width: 1200px) {
        .rating-wrapper{
            top: 0;
            right: 0;
        }
            .contact-form-checkbox-label{
                justify-content: unset;
                padding-left:16px;
                gap:8px;
            }

            .contact-form-checkbox-label .description{
            padding-right: 8px;
            font-size: 14px;  
            margin-left: -32px;      
                    }
            .contact-form-label.review-section{
                max-width: 60%;
            }
            .contact-form-container{
                box-sizing: border-box;
                padding: 8px;
            }
            .contact-form-content {
            }
        .contact-form-checkbox-label.unset {
            justify-content: unset;
        }
            .contact-form-title{
            }
            .contact-form-row {
                flex-direction: column;
                gap: 8px;
                margin-bottom: 32px;
            }

            .contact-form-label {
                min-width: auto;
            }
            .contact-form-row {
            align-items: unset;
        }
        }

        .policy-form-title,.policy-form-title.sub{
            text-align: center;
            font-weight: bold;
            border-bottom: solid 1px #dedede;
            padding-bottom: 16px;
            font-size: 1.75rem;
        }
        .policy-form-title.sub{
            display: block;
            text-align: left;
            border-bottom: none;
            font-size: 1.5rem;

        }
        .policy-description{
            padding-bottom: 16px;
        }
        .policy-item {
            display: flex; /* フレックスコンテナとして設定 */
            margin-bottom: 1.5em; /* 項目間のスペース */
        }
        .policy-container{
            padding: 32px 0;
        }
        .item-number {
            flex-shrink: 0;
            font-weight: bold;
            text-align: right; 
            padding-right: 6px; 
        }
        .policy-section-title {
            display: block;
            font-size: 1.25rem;
            font-weight: bold;
            margin-bottom: 1.5rem;
            text-align: left;
        }

        .policy-sub-list {
            margin-top: 1em;    
            /*padding-left: 1em; */
        }

        .policy-sub-list .policy-item {
            margin-bottom: 0.5em; 
        }
        .policy-sub-list .policy-item .item-number {
            padding-right: 0;
        }
        .item-content {
            flex-grow: 1;
        }

        .policy-sub-list {
            margin-top: 1em;
        }

        .policy-sub-list .item-number {
            /*padding-right: 8px;*/
            font-weight: normal; 
        }

        .policy-description {
            margin-bottom: 2rem;
        }

        .policy-form-title.sub {
            margin-top: 2rem;
            margin-bottom: 1rem;
        }
         @media (max-width: 1200px) {
        .policy-container{
            padding: 24px 0;
        }

        
    }