@charset "UTF-8";

/* =========================================
   1. Variables & Global Rules (変数と全体設定)
   ========================================= */
:root {
    --col-pink: #F48FB1;
    --col-mint: #7ED1C2;
    --col-blue: #7FA8F5;
    --col-yellow: #FFD966;
    --col-white: #FFFFFF;
    --col-text: #3A3A3A;
    
    --font-jp: "Zen Maru Gothic", sans-serif;
    --font-en: "Pacifico", cursive;
    --font-dot: "DotGothic16", sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    overflow-x: hidden;
    width: 100%;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-jp);
    color: var(--col-text);
    line-height: 1.8;
    background-color: var(--col-white);
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.7;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    border-radius: 10px;
}

.container {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 0;
}

/* =========================================
   2. Typography (フォントと見出し設定)
   ========================================= */

/* 英語の筆記体（Pacifico）を一括適用する要素 */
.en,
.section-title,
.e-section-title,
.sim-content h2 {
    font-family: var(--font-en);
}

/* ドットフォント（DotGothic16）を一括適用する要素 */
h2, h3,
.hero-title, .story-card h2,
.btn-link, .btn-primary, .btn-shop, .btn-blue, .btn-yellow,
.p-hero-text .p-title, .size-box h4, .usage-header, .usage-card h3, .usage-card h4, .usage-card strong,
.spec-container dt, .color-note h3, .color-note h4,
.p-gallery-section .center-text,
.modal-info dl dt, .case-info dl dt,
.e-section-title span,
.e-card h3, .e-card-header .price,
.art-block h3, .art-point h4, .art-spec dt,
.font-badge, .font-info h4,
.color-box h3, .color-name,
.onepoint-grid p,
.plan-badge,
.intro-title {
    font-family: var(--font-dot);
}

/* セクションタイトル共通設定 */
.section-title,
.e-section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 40px;
    color: var(--col-white);
    text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
}

/* 英語タイトルの下の日本語サブタイトル */
.e-section-title span {
    display: block;
    font-size: 1.3rem;
    color: inherit;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.1);
    margin-top: 10px;
}

/* 共通のグレーテキスト（説明文など） */
.e-lead-text, 
.e-catalog-desc,
.e-color-section .center-text {
    text-align: center;
    color: #666;
    margin-bottom: 40px;
    font-weight: 500;
}

.center-text {
    text-align: center;
    margin-bottom: 30px;
    font-weight: bold;
}

/* =========================================
   3. Decorations (装飾・波線・ステッチ・キラキラ)
   ========================================= */

/* ステッチ線 */
.stitch-line {
    width: 100%;
    height: 3px;
    background: transparent;
}
.stitch-line.white { border-top: 4px dashed rgba(255,255,255,0.7); }
.stitch-line.color { border-top: 4px dashed var(--col-pink); }

/* 波線 */
.wave-line {
    display: block;
    width: 100%;
    height: 40px;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;
    transform: rotate(180deg);
    margin-top: -1px;
    margin-bottom: -2px;
    position: relative;
    z-index: 2;
}
.wave-line.pink { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23F48FB1'/%3E%3C/svg%3E"); }
.wave-line.mint { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%237ED1C2'/%3E%3C/svg%3E"); }
.wave-line.blue { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%237FA8F5'/%3E%3C/svg%3E"); }
.wave-line.yellow { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23FFD966'/%3E%3C/svg%3E"); }

/* 背景色の共通クラス */
.pink-bg { background-color: var(--col-pink); }
.mint-bg { background-color: #F0FBFA; }
.mint-solid-bg { 
    background-color: var(--col-mint); 
}

.yellow-check-bg {
    background-color: white;
    background-image:
        linear-gradient(90deg, rgba(255, 217, 102, 0.2) 50%, transparent 50%),
        linear-gradient(rgba(255, 217, 102, 0.2) 50%, transparent 50%);
    background-size: 30px 30px;
}
.mint-check-bg {
    background-color: white;
    background-image:
        linear-gradient(90deg, rgba(126, 209, 194, 0.2) 50%, transparent 50%),
        linear-gradient(rgba(126, 209, 194, 0.2) 50%, transparent 50%);
    background-size: 30px 30px;
}

/* ギンガムチェック設定 */
.simulation-section {
    background-color: white;
    background-image:
      linear-gradient(90deg, rgba(244, 143, 177, 0.15) 50%, transparent 50%),
      linear-gradient(rgba(244, 143, 177, 0.15) 50%, transparent 50%);
    background-size: 20px 20px;
    text-align: center;
    padding: 80px 0 0 0;
}
.p-intro-section {
    background-color: white;
    background-image:
        linear-gradient(90deg, rgba(127, 168, 245, 0.15) 50%, transparent 50%),
        linear-gradient(rgba(127, 168, 245, 0.15) 50%, transparent 50%);
    background-size: 30px 30px;
    text-align: center;
    padding: 60px 0 0 0;
}

/* キラキラドット絵 */
.sparkle-container {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 50;
}
.pixel-star {
    position: absolute;
    width: 6px; height: 6px;
    animation: twinkle 1.5s infinite steps(1);
}
.color-pink { --star-col: var(--col-pink); }
.color-yellow { --star-col: var(--col-yellow); }
.color-mint { --star-col: var(--col-mint); }
.color-blue { --star-col: var(--col-blue); }

.shape-circle {
    background: transparent; 
    box-shadow: 
        0 -18px var(--star-col), 0 18px var(--star-col), 
        -18px 0 var(--star-col), 18px 0 var(--star-col),
        -12px -12px var(--star-col), 12px -12px var(--star-col), 
        -12px 12px var(--star-col), 12px 12px var(--star-col);
}
.shape-cross {
    background: var(--star-col);
    box-shadow: 
        -6px 0 var(--star-col), 6px 0 var(--star-col), 
        0 -6px var(--star-col), 0 6px var(--star-col);
}
.shape-long {
    background: var(--star-col);
    box-shadow: 
        -6px 0 var(--star-col), 6px 0 var(--star-col), 
        0 -6px var(--star-col), 0 6px var(--star-col),
        -18px 0 var(--star-col), 18px 0 var(--star-col), 
        0 -18px var(--star-col), 0 18px var(--star-col);
}

.ps-1 { top: 12%; left: 6%;  animation-delay: 0s;   transform: scale(1.2); }
.ps-2 { top: 32%; left: 8%;  animation-delay: 0.7s; transform: scale(0.7); }
.ps-3 { top: 55%; left: 4%;  animation-delay: 0.3s; transform: scale(1.3); }
.ps-4 { top: 75%; left: 7%;  animation-delay: 1.1s; transform: scale(0.7); }
.ps-5 { top: 90%; left: 5%;  animation-delay: 0.5s; transform: scale(1.4); }
.ps-6 { top: 15%; right: 7%; animation-delay: 0.2s; transform: scale(0.6); }
.ps-7 { top: 35%; right: 5%; animation-delay: 0.9s; transform: scale(1.2); }
.ps-8 { top: 62%; right: 8%; animation-delay: 0.4s; transform: scale(1.3); }
.ps-9 { top: 82%; right: 4%; animation-delay: 1.3s; transform: scale(0.8); }

@keyframes twinkle {
    0%   { opacity: 0; }
    50%  { opacity: 1; }
    100% { opacity: 0; }
}

/* =========================================
   4. UI Elements (ボタン・バッジ・ナビ・モーダル)
   ========================================= */

/* ボタン共通 */
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s;
    font-size: 0.95rem; 
}
.btn:hover {
    transform: translateY(-2px);
}
.btn-primary { background-color: var(--col-pink); color: white; }
.btn-blue { background-color: var(--col-blue); color: white; }
.btn-yellow { background-color: var(--col-yellow); color: #665500; }
.btn-line { border-bottom: 2px solid white; color: white; }
.btn-shop {
    background-color: #eee;
    color: var(--col-text);
    min-width: 0;
    width: 110px;
    padding: 12px 5px;
    text-align: center;
}
.btn-link {
    display: inline-block;
    margin-top: 15px;
    color: var(--col-yellow);
    font-weight: bold;
    border-bottom: 1px solid var(--col-yellow);
}

/* 3Dボタン装飾 */
.btn-3d {
    box-shadow: 0 4px 0px white !important;
    border: 2px solid white;
    transform: translateY(0);
    transition: transform 0.1s, box-shadow 0.1s;
}
.btn-3d:hover {
    transform: translateY(3px);
    box-shadow: 0 1px 0px white !important;
}

/* ヒーローエリアのボタンレイアウト */
.p-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
    align-items: flex-start;
}
.p-btn-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* トップへ戻るボタン */
.page-top-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px; height: 50px;
    background-color: var(--col-pink);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 1000;
    transition: transform 0.2s, background-color 0.2s;
}
.page-top-btn:hover {
    transform: translateY(-3px);
    background-color: #f1719c;
    color: white;
}

/* ヘッダー・ナビゲーション */
.header {
    position: fixed;
    top: 0; width: 100%; height: 70px;
    background: rgba(255,255,255,0.9);
    display: flex;
    /* justify-content: space-between; ←修正 */
    justify-content: flex-start; /* ★ロゴを左寄せ */
    align-items: center;
    padding: 0 5%;
    z-index: 2000; /* 通常ヘッダー */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.logo {
    font-family: var(--font-en);
    font-size: 1.5rem;
    color: var(--col-pink);
}
.hamburger {
    cursor: pointer;
    width: 30px;
    height: 20px;
    /* position: relative; ←削除 */
    position: fixed; /* ★追加：画面固定 */
    top: 25px;       /* ★追加：上からの位置 (headerの中央に見えるように調整) */
    right: 5%;      /* ★追加：右からの位置 */
    z-index: 3000;  /* ★修正：最前面 */
    transition: 0.3s;
}
.hamburger span {
    display: block;
    width: 100%; height: 2px;
    background: var(--col-pink);
    position: absolute;
    transition: 0.3s;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 9px; }
.hamburger span:nth-child(3) { bottom: 0; }
.hamburger.active span:nth-child(1) { transform: rotate(45deg); top: 9px; }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg); bottom: 9px; }

.nav-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100vh;
    /* background: rgba(255,245,247,0.98); ←修正 */
    background: rgba(255, 255, 255, 0.98); /* ★白ベースに変更 */
    display: flex;
    justify-content: center; align-items: center;
    opacity: 0; visibility: hidden;
    transition: 0.4s; 
    z-index: 2500;  /* ★修正：header(2000)とhamburger(3000)の間 */
}
.nav-overlay.active { opacity: 1; visibility: visible; }
.nav-list { list-style: none; text-align: center; }
.nav-list li { margin: 15px 0; }
.nav-list a { font-size: 1.2rem; color: var(--col-text); font-weight: bold; }
.sub-link a { font-size: 1rem; font-weight: normal; color: #666; }

/* =========================================
   Navigation Overlay Gingham Check (4 colors)
   ★追加：4色のチェック柄背景
   ========================================= */

/* 共通設定 */
.nav-overlay.nav-pink-check,
.nav-overlay.nav-mint-check,
.nav-overlay.nav-blue-check,
.nav-overlay.nav-yellow-check {
    background-size: 30px 30px;
    background-color: white; /* 白ベース */
    background-image:
        linear-gradient(90deg, var(--check-line) 50%, transparent 50%),
        linear-gradient(var(--check-line) 50%, transparent 50%);
}

/* 各色の線定義 */
.nav-overlay.nav-pink-check   { --check-line: rgba(244, 143, 177, 0.15); }
.nav-overlay.nav-mint-check   { --check-line: rgba(126, 209, 194, 0.2); }
.nav-overlay.nav-blue-check   { --check-line: rgba(127, 168, 245, 0.15); }
.nav-overlay.nav-yellow-check { --check-line: rgba(255, 217, 102, 0.2); }

/* ギャラリーモーダル */
.modal {
    display: none;
    position: fixed; z-index: 3000;
    left: 0; top: 0; width: 100%; height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(5px);
}
.modal-content {
    background-color: #fff;
    margin: 5% auto; padding: 0;
    width: 90%; max-width: 800px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    position: relative;
    animation: zoomIn 0.3s;
}
@keyframes zoomIn {
    from {transform: scale(0.9); opacity: 0;}
    to {transform: scale(1); opacity: 1;}
}
.close-btn {
    color: #aaa;
    float: right; font-size: 2rem; font-weight: bold;
    position: absolute; right: 20px; top: 10px;
    cursor: pointer; z-index: 10;
}
.close-btn:hover { color: var(--col-pink); }
.modal-body { display: flex; flex-wrap: wrap; align-items: center; }
.modal-img-box { flex: 1; min-width: 300px; }
.modal-img-box img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px 0 0 20px; }
.modal-info { flex: 1; min-width: 300px; padding: 40px; }

/* =========================================
   ギャラリーモーダル
   ========================================= */

/* 情報リストのデザイン大枠 */
.modal-info dl { 
    display: flex; 
    flex-wrap: wrap; 
    align-items: stretch; /* 左右の点線の高さをピシッと揃える */
    margin: 0; 
}

/* 共通設定 */
.modal-info dl dt, .modal-info dl dd {
    display: flex; 
    align-items: center; /* ★念願の上下中央揃え！ */
    margin: 0;
    padding: 12px 5px;   /* 上下均等に戻す */
    border-bottom: 2px dashed var(--col-pink);
    line-height: 1.6;
}

/* タイトル（左） */
.modal-info dl dt { 
    width: 40%; 
    color: var(--col-pink); 
    font-weight: bold; 
    font-size: 0.95rem; 
}

/* 内容（右） */
.modal-info dl dd { 
    width: 60%; 
    font-size: 0.8rem; 
    color: #555; 
}

.case-info { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dashed #ccc; }
.case-info:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.case-title {
    display: inline-block;
    background: #f4f4f4; color: var(--col-text);
    padding: 5px 15px; border-radius: 20px;
    font-size: 0.9rem; font-weight: bold; margin-bottom: 10px;
}

/* =========================================
   5. Sections (トップページ・各セクション)
   ========================================= */

/* Hero (Top Page) */
.hero-section {
    background-color: var(--col-pink);
    padding-top: 80px;
    color: white;
}
.hero-container {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
}
.hero-text { flex: 1; min-width: 300px; padding-right: 20px; margin-bottom: 30px; }
.hero-title { font-size: 2rem; margin-bottom: 20px; line-height: 1.4; }
.hero-title .en { font-size: 3rem; color: #FFF5F7; }
.cursor { animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-image { flex: 1; min-width: 300px; text-align: center; }
.hero-image img { border: 5px solid white; transform: rotate(3deg); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

/* Story */
.story-section { background-color: var(--col-white); text-align: center; }
.story-card {
    border: 2px dashed var(--col-pink);
    border-radius: 20px; padding: 40px;
    max-width: 600px; margin: 0 auto;
}
.story-card h2 { color: var(--col-pink); font-size: 2rem; margin-bottom: 20px; text-shadow: 2px 2px 0px rgba(0,0,0,0.1);}
.story-card p { margin-bottom: 20px; }

/* Features */
.features-section { background-color: var(--col-mint); }
.features-section .point-text h3 { color: var(--col-mint); border-color: var(--col-mint); }
.features-section .point-img img { aspect-ratio: 3 / 2; object-fit: cover; }

/* Lineup (Products) */
.products-section { background-color: var(--col-yellow); }
.products-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }
.product-card {
    background: white; border-radius: 20px; overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s;
    width: 100%; max-width: 320px; flex: 1 1 280px;
}
.product-card:hover { transform: translateY(-5px); }
.product-img { overflow: hidden; aspect-ratio: 1 / 1; width: 100%; }
.product-img img { border-radius: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.product-card:hover .product-img img { transform: scale(1.1); }
.product-info { padding: 20px; text-align: center; border-top: 2px dashed var(--col-yellow); }
.product-info h3 { margin-bottom: 10px; color: #555; font-size: 1.1rem; }

/* Simulation Area */
.simulation-section .container { padding-bottom: 60px; }
.sim-content {
    background: rgba(255,255,255,0.9);
    display: inline-block; padding: 40px 60px;
    border-radius: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border: 3px dashed var(--col-pink);
}
.sim-content h2 { color: var(--col-pink); margin-bottom: 20px; font-size: 2rem; text-shadow: 2px 2px 0px rgba(0,0,0,0.1);}
.sim-content p { margin-bottom: 30px; }

/* Reviews (Voice) */
.reviews-section { background-color: var(--col-blue); }
.reviews-section .container { max-width: 1280px; width: 95%; }
.review-card {
    background: white; padding: 30px; border-radius: 20px;
    text-align: center; margin: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    position: relative; display: flex; flex-direction: column; justify-content: space-between;
    min-height: 100%;
}
.review-card::after {
    content: ""; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
    border-width: 15px 15px 0; border-style: solid; border-color: white transparent transparent transparent;
    z-index: 1;
}
.stars { color: var(--col-yellow); font-size: 1.5rem; margin-bottom: 10px; }
.review-text { 
    flex-grow: 1; 
    margin-bottom: 15px; 
    font-size: 0.85rem;  /* ★文字を小さく */
    line-height: 1.7;    /* ★行間を少し広げて読みやすく */
    color: #444;         /* ★少しだけグレーにして長文の重さを軽減 */
}
.review-text.long-text {
    font-size: 0.75rem; /* さらに小さく */
    line-height: 1.6;   /* 行間も少し詰める */
    letter-spacing: 0.02em;
}
.review-text.long-long-text {
    font-size: 0.7rem; /* さらに小さく */
    line-height: 1.5;   /* 行間も少し詰める */
    letter-spacing: 0.02em;
}
.review-source {
    margin-top: 15px; padding-top: 15px; border-top: 1px dashed #eee;
    font-size: 0.8rem; color: #888; text-align: right; line-height: 1.4;
}
.review-source .platform {
    display: inline-block; background: #f0f0f0; padding: 2px 6px;
    border-radius: 4px; font-size: 0.7rem; margin-right: 5px; color: #555;
}

/* Swiper Pagination */
.swiper { padding-bottom: 50px !important; }
.reviews-section .swiper { padding-bottom: 80px !important; }
.swiper-pagination { bottom: 0px !important; }
.swiper-pagination-bullet {
    width: 12px; height: 12px; background: var(--col-pink); opacity: 0.4;
    margin: 0 6px !important; transition: all 0.3s;
}
.swiper-pagination-bullet-active {
    opacity: 1; background: transparent; width: 20px; height: 20px;
    transform: scale(1.5); position: relative; vertical-align: middle; top: -5px;
}
.swiper-pagination-bullet-active::after {
    content: "\f004"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    color: var(--col-pink); font-size: 20px;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.reviews-section .swiper-pagination-bullet { background: white; opacity: 0.5; }
.reviews-section .swiper-pagination-bullet-active { background: transparent; opacity: 1; }
.reviews-section .swiper-pagination-bullet-active::after { color: white; }

/* Footer */
.footer-section { background-color: #ffffff; text-align: center; padding-bottom: 20px; position: relative; z-index: 1; }
.footer-section .section-title { color: var(--col-text); text-shadow: 2px 2px 0px rgba(0,0,0,0.1); }
.shop-links { display: flex; justify-content: center; gap: 10px; margin: 30px 0; flex-wrap: nowrap; }
.footer-bottom { margin-top: 50px; border-top: 1px solid #eee; padding-top: 30px; }
.footer-logo { font-family: var(--font-en); font-size: 1.5rem; color: #ccc; margin-bottom: 10px; }
.social-link { font-size: 2rem; color: var(--col-pink); display: inline-block; margin-bottom: 10px; }
.copyright { font-size: 0.8rem; color: #aaa; }

/* =========================================
   6. Product Detail Page (商品詳細ページ)
   ========================================= */

/* Hero (Product) */
.p-hero-section {
    background-color: var(--col-yellow); padding-top: 100px; padding-bottom: 0; color: var(--col-text);
}
.p-hero-container {
    display: flex; flex-wrap: wrap-reverse; align-items: center; justify-content: center;
    gap: 40px; padding-bottom: 60px;
}
.p-hero-text { flex: 1; min-width: 300px; }
.p-hero-text .catch { font-size: 1.1rem; margin-bottom: 10px; font-weight: bold; color: #665500; }
.p-hero-text .p-title { font-size: 2.2rem; margin-bottom: 10px; color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,0.1); }
.p-hero-text .price { font-size: 1.5rem; font-weight: bold; margin-bottom: 30px; }
.p-hero-text .price .tax { font-size: 0.9rem; font-weight: normal; }
.p-hero-image { flex: 1; min-width: 300px; text-align: center; }
.p-hero-image img { border: 8px solid white; border-radius: 20px; transform: rotate(-3deg); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

/* Intro (Gingham) */
.p-intro-section .container { padding-bottom: 60px; }
.intro-box {
    border: 3px dashed var(--col-blue); border-radius: 20px; padding: 40px;
    display: inline-block; max-width: 800px; background: white; 
    color: var(--col-text); font-weight: 500; box-shadow: 0 5px 15px rgba(127, 168, 245, 0.2);
}
.intro-box p { margin-bottom: 20px; }
.intro-box p:last-child { margin-bottom: 0; }
.intro-title { color: var(--col-blue); font-size: 2rem; margin-bottom: 20px; text-shadow: 2px 2px 0px rgba(0,0,0,0.1); }

/* Points */
.p-points-section { background: var(--col-pink); padding-top: 60px; }
.p-points-section .container { padding-bottom: 60px; }
.p-points-section .section-title { color: white; }
.points-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.point-item { background: white; padding: 15px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.point-img { margin-bottom: 15px; }
.point-img img { border-radius: 5px; width: 100%; }
.point-text h3 {
    color: var(--col-pink); margin-bottom: 10px; font-size: 1.2rem;
    border-bottom: 2px dashed var(--col-pink); display: inline-block; padding-bottom: 5px; 
}
.point-text p { font-size: 0.95rem; line-height: 1.6; }

/* Size and Guide */
.p-size-section { background: var(--col-mint); padding-top: 60px; }
.p-size-section .container { padding-bottom: 60px; }
.p-size-section .section-title { color: white; }
.size-compare-block {
    display: flex; flex-wrap: wrap; background: white; border-radius: 20px;
    padding: 30px; margin-bottom: 50px; align-items: center; gap: 30px;
}
.size-img-large { flex: 1; min-width: 300px; }
.size-desc { flex: 1; min-width: 300px; }
.size-box { margin-bottom: 20px; border-left: 5px solid var(--col-mint); padding-left: 15px; }
.size-box h4 { font-size: 1.2rem; margin-bottom: 5px; color: var(--col-mint); }

.usage-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.usage-card {
    background: white; border-radius: 15px; overflow: hidden;
    box-shadow: 0 5px 10px rgba(0,0,0,0.05); text-align: center; padding-bottom: 20px;
}
.usage-header { padding: 10px; color: white; font-weight: bold; margin-bottom: 15px; }
.s-color { background: var(--col-pink); }
.m-color { background: var(--col-yellow); color: #665500; }
.l-color { background: var(--col-blue); }
.usage-card img { width: 90%; max-width: 400px; margin-bottom: 15px; }
.usage-card p { padding: 0 15px; font-size: 0.9rem; margin-bottom: 20px; line-height: 1.6; }
.usage-card p:last-child { margin-bottom: 0; }
@media (min-width: 769px) {
    .usage-card.full-width {
        grid-column: 1 / -1; /* グリッドの端から端まで（3つ分）の幅を取る */
        max-width: 700px;    /* 横に間延びしないように最大幅を制限 */
        margin: 0 auto;      /* 中央寄せ */
        width: 100%;
    }
}

/* Gallery */
.p-gallery-section { background: white; padding-top: 60px; padding-bottom: 0; }
.p-gallery-section .section-title { color: var(--col-blue); }
.gallerySwiper { padding-bottom: 40px; }
.gallerySwiper .swiper-slide { width: 250px; }
.gallerySwiper img { border-radius: 15px; width: 100%; cursor: pointer; transition: filter 0.3s; }
.gallerySwiper img:hover { filter: brightness(0.9); }

/* Color Variation */
.p-color-section { background: white; padding-top: 60px; }
.p-color-section .container { padding-bottom: 60px; }
.color-guide-img {
    text-align: center;
    margin-bottom: 0px; /* 下の説明文との余白 */
}
.color-guide-img img {
    width: 100%;
    max-width: 400px; /* PCで大きくなりすぎない丁度いいサイズ */
    /*aspect-ratio: 1 / 1; /* 完全な正方形にトリミング */
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 3px dashed var(--col-blue); /* タイトルに合わせてブルーのステッチ枠 */
}
.color-note {
    background: #ffffff; padding: 40px 20px; border-radius: 20px; text-align: center; max-width: 800px; margin: 0 auto;
}
.color-balls { margin-top: 30px; }
.color-balls span {
    display: inline-block; width: 25px; height: 25px; border-radius: 50%; margin: 0 5px;
    border: 2px solid white; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Spec */
.p-spec-section { background: var(--col-blue); border-top: none; position: relative; z-index: 1; }
.spec-container {
    background: white; padding: 40px; border-radius: 20px; border: 3px solid #eee; max-width: 800px; margin: 0 auto;
}
dl { display: flex; flex-wrap: wrap; margin-bottom: 30px; }
dt { width: 30%; font-weight: bold; color: var(--col-pink); padding: 10px 0; border-bottom: 1px solid #eee; }
dd { width: 70%; padding: 10px 0; border-bottom: 1px solid #eee; }
.s-item { display: block; margin-bottom: 10px; padding-left: 20px; position: relative; }
.s-item::before { content: "✦"; position: absolute; left: 0; color: var(--col-pink); font-size: 1.1rem; line-height: 1.2; }
.s-sep { display: none; }

/* 刺繍オプションへのリンク */
.embroidery-link-box { text-align: center; margin-top: 10px; padding-top: 10px; border-top: none; }
.embroidery-link-box p { font-weight: bold; color: var(--col-mint); margin-bottom: 15px; }

/* =========================================
   Designs Section (商品ページ：選べるデザイン)
   ========================================= */
.p-design-section {
    padding-top: 60px;
}
.p-design-section .container {
    padding-bottom: 60px;
}

.design-grid {
    display: grid;
    /* 画面幅に合わせて自動で列数を調整（最小200px） */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.design-card {
    background: white;
    border-radius: 15px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 2px dashed #eee;
    transition: transform 0.2s, border-color 0.2s;
}

.design-card:hover {
    transform: translateY(-3px);
    border-color: var(--col-pink);
}

.design-img {
    margin-bottom: 15px;
}

.design-img img {
    width: 100%;
    aspect-ratio: 4 / 3; /* 写真を少し横長で統一して綺麗に並べる */
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #f4f4f4;
}
/* =========================================
   デザインカードの文字設定（Designs / Customize 共通）
   ========================================= */

/* タイトル（ドットフォント・ピンク） */
.design-card h3 {
    font-family: var(--font-dot);
    color: var(--col-pink);
    font-size: 1.15rem;
    margin-bottom: 5px;
    line-height: 1.4;
}

/* 金額（ドットフォント・テキストカラー） */
.design-card h3 span {
    font-family: var(--font-dot);
    color: var(--col-text); /* 引き締まるように通常の文字色（濃いグレー/黒）に */
    font-size: 1rem;
}

/* 内容（通常フォント・少し柔らかいグレー） */
.design-card p {
    font-family: var(--font-jp);
    font-weight: normal;
    font-size: 0.9rem;
    color: var(--col-text); /* 説明文は少し柔らかいグレーにして読みやすく */
    line-height: 1.5;
}

/* =========================================
   7. Embroidery Options Page (刺繍オプションページ)
   ========================================= */

/* Hero (Embroidery) */
.e-hero-section { background-color: var(--col-mint); padding-top: 100px; padding-bottom: 0; }
.e-hero-section .container { padding-bottom: 50px; }
.e-hero-section .p-hero-text { text-align: left; }
.e-hero-section .p-hero-text .p-title { color: white; }

/* 3 Types Cards */
.e-types-section { background: white; padding: 60px 0 0; }
.e-types-section .container { padding-bottom: 60px; }
.e-type-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.e-card {
    background: white; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); border: 3px dashed #eee;
    overflow: visible !important; position: relative;
}
.e-card.pink { border-color: var(--col-pink); }
.e-card.yellow { border-color: var(--col-yellow); }
.e-card.blue { border-color: var(--col-blue); }
.e-card-header { padding: 20px; text-align: center; color: white; border-radius: 12px 12px 0 0; }
.e-card.pink .e-card-header { background: var(--col-pink); }
.e-card.yellow .e-card-header { background: var(--col-yellow); color: #665500; }
.e-card.blue .e-card-header { background: var(--col-blue); }
.e-card-header h3 { font-size: 1.3rem; margin-bottom: 5px; }
.e-card-header .price { font-weight: bold; font-size: 1.3rem; }
.e-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 3px dashed #eee; }
.e-card.pink img { border-bottom-color: var(--col-pink); }
.e-card.yellow img { border-bottom-color: var(--col-yellow); }
.e-card.blue img { border-bottom-color: var(--col-blue); }
.e-card-body { padding: 20px; border-radius: 0 0 12px 12px; }
.e-card-body p { margin-bottom: 10px; font-size: 0.95rem; }
.e-card-body .note { font-size: 0.85rem; color: #666; margin-bottom: 0; }

/* 人気No.1 バッジ */
.badge-popular {
    position: absolute; top: -15px; right: -15px;
    background-color: var(--col-yellow); color: #665500;
    width: 80px; height: 80px; border-radius: 50%;
    display: flex; justify-content: center; align-items: center; text-align: center;
    font-weight: bold; font-size: 1.1rem; line-height: 1.2;
    border: 3px dashed white; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transform: rotate(15deg); z-index: 10;
}

/* Colors Grid */
.e-color-section { background: white; padding: 60px 0 0; }
.e-color-section .container { padding-bottom: 60px; }
.e-color-section .e-section-title, .e-color-section .e-section-title span { color: var(--col-text) !important; }
.color-wrap { display: flex; flex-direction: column; max-width: 1000px; margin: 40px auto 0; }
.color-box { flex: 1; text-align: center; }
.color-box h3 { display: inline-block; padding: 8px 20px; border-radius: 20px; color: white; margin-bottom: 15px; }
.gloss-title { background-color: var(--col-mint); }
.matte-title { background-color: var(--col-pink); }
.color-desc { font-size: 0.9rem; margin-bottom: 20px; min-height: 50px; }

.color-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 25px; }
.color-item {
    display: flex; align-items: center; gap: 15px; background: #fff;
    padding: 5px 10px; border-radius: 8px; border: 2px dashed #eee;
    transition: transform 0.2s, border-color 0.2s;
}
.color-item:hover { transform: translateY(-2px); border-color: var(--col-mint); }
.color-item img { width: 60px; height: 30px; border-radius: 4px; object-fit: cover; border: 1px solid #f4f4f4; }
.color-name { font-size: 1.05rem; font-weight: bold; color: var(--col-text); text-align: left; line-height: 1.3; }

/* プランアイコン（バッジ） */
.plan-badges { display: flex; justify-content: center; gap: 15px; margin: 10px 0 25px 0; }
.plan-badge { 
    display: inline-block; 
    font-size: 0.95rem; 
    padding: 6px 16px; 
    border-radius: 30px; 
    font-weight: bold; 
    background: white; 
    box-shadow: 0 0 0 2px white, 0 4px 8px rgba(0,0,0,0.1); 
}
.badge-simple { color: #665500; border: 2px solid var(--col-pink); }
.badge-custom { color: #665500; border: 2px solid var(--col-yellow); }

/* One Point Grid */
.e-catalog-section { padding: 60px 0 0; }
.e-catalog-section .container { padding-bottom: 60px; }
.onepoint-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 20px; text-align: center; }
.onepoint-grid .item { background: white; padding: 15px; border-radius: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.onepoint-grid img { width: 80px; height: 80px; margin-bottom: 10px; }
.onepoint-grid p { font-size: 0.9rem; font-weight: bold; color: var(--col-text); }

/* Fonts List */
.font-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.font-item {
    display: flex; align-items: center; background: white; border-radius: 15px;
    padding: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border: 2px solid transparent;
}
.font-item:hover { border-color: var(--col-mint); }
.font-info { flex: 1; padding-right: 20px; }
.font-badge {
    display: inline-block; background: var(--col-mint); color: white;
    width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%;
    font-weight: bold; font-family: var(--font-dot); margin-bottom: 10px;
}
#s-text .font-badge { background: var(--col-blue); }
.font-info h4 { font-size: 1.2rem; color: var(--col-text); margin-bottom: 5px; }
.font-info .limit { font-size: 0.85rem; color: #666; line-height: 1.4; }
.font-img { flex: 1; text-align: right; }
.font-img img { max-width: 200px; border-radius: 10px; }

/* Treasure Art */
.e-art-section { background-color: var(--col-blue); padding-top: 60px; color: white; }
.e-art-section .container { padding-bottom: 60px; }
.art-content { max-width: 800px; margin: 0 auto; }
.art-block { background: white; color: var(--col-text); border-radius: 20px; padding: 30px; margin-bottom: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.art-block h3 { color: var(--col-pink); border-bottom: 2px dashed var(--col-pink); padding-bottom: 10px; margin-bottom: 20px; font-size: 1.3rem; }
.art-block p { margin-bottom: 15px; line-height: 1.6; }
.art-block .note { font-size: 0.9rem; color: #e83e8c; }
.art-point-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0; }
.art-point { padding: 20px; border-radius: 15px; }
.art-point.good { background: #F0FBFA; border: 2px solid var(--col-mint); }
.art-point.bad { background: #FFF5F7; border: 2px solid var(--col-pink); }
.art-point h4 { text-align: center; margin-bottom: 15px; }
.art-point.good h4 { color: var(--col-mint); }
.art-point.bad h4 { color: var(--col-pink); }
.art-point ul { list-style: none; padding: 0; }
.art-point li { margin-bottom: 10px; padding-left: 1.5em; position: relative; font-size: 0.95rem; }
.art-point.good li::before { content: "◎"; color: var(--col-mint); position: absolute; left: 0; font-weight: bold; }
.art-point.bad li::before { content: "△"; color: var(--col-pink); position: absolute; left: 0; font-weight: bold; }
.art-spec { display: flex; flex-wrap: wrap; margin: 0; }
.art-spec dt { width: 100%; color: var(--col-pink); font-weight: bold; font-size: 1.1rem; padding: 15px 0 5px; border-bottom: none; }
.art-spec dd { width: 100%; font-size: 0.95rem; color: var(--col-text); padding: 0 0 15px; border-bottom: 1px dashed #ccc; line-height: 1.6; }
.art-spec dd:last-child { border-bottom: none; }

/* =========================================
   Cherished Art 製作イメージ（ビフォーアフター）
   ========================================= */

.art-works {
    display: flex;
    flex-direction: column;
    gap: 20px; /* セット同士の隙間 */
    margin-top: 30px;
}

/* 1セットのまとまり（背景をつけて分かりやすく） */
.art-pair {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: #fafafa;
    padding: 20px;
    border-radius: 15px;
    border: 2px dashed #eee;
}

/* 画像とラベルの枠 */
.art-before, .art-after {
    flex: 1;
    text-align: center;
}

/* 画像を正方形で綺麗にトリミング */
.art-before img, .art-after img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    background: white; /* 透過画像が入った時用の白背景 */
}

/* 間の矢印アイコン */
.art-arrow {
    color: var(--col-pink);
    font-size: 1.8rem;
}

/* PC表示時のみの設定 */
@media (min-width: 768px) {
    .sp-br {
        display: none;
    }
}

/* スマホ表示時の微調整 */
@media (max-width: 768px) {
    .art-pair {
        padding: 15px 10px;
        gap: 10px;
    }
    .art-arrow {
        font-size: 1.2rem; /* 矢印を少し小さく */
    }
    .art-label {
        font-size: 0.75rem; /* スマホでも1行に収まるように小さく */
    }
}

/* =========================================
   8. Responsive Adjustments (スマホ対応一括)
   ========================================= */

@media (max-width: 768px) {
    /* 共通・余白調整 */
    .hero-title { font-size: 1.5rem; }
    .hero-title .en { font-size: 2.2rem; }
    .section-title, .e-section-title { font-size: 2rem; }
    .sim-content { padding: 30px 20px; width: 90%; }
    .story-card { padding: 15px; width: 100%; }
    .features-section .feature-item { width: 85%; margin: 0 auto; }
    
    /* 商品ページ調整 */
    .p-hero-container { flex-direction: column-reverse; text-align: center; }
    .p-hero-text .p-title { font-size: 1.8rem; }
    .p-buttons { align-items: center; }
    .p-btn-bottom { justify-content: center; }
    
    /* モーダル調整 */
    .modal-img-box img { border-radius: 20px 20px 0 0; }
    .modal-info { padding: 30px 20px; }
    
    /* ボタンサイズ微調整 */
    .btn-yellow, .btn-blue, .btn-line, .btn-primary { font-size: 0.85rem !important; padding: 10px 15px; }
    .page-top-btn { width: 45px; height: 45px; bottom: 15px; right: 15px; font-size: 1.2rem; }
    
    /* 刺繍ページ調整 */
    .e-hero-section .p-hero-text { text-align: center; }
    .e-hero-section .p-btn-bottom { justify-content: center; }
    .color-wrap { flex-direction: column; }
    .color-desc { min-height: auto; }
    .color-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .color-item { gap: 10px; padding: 4px 8px; }
    .color-item img { width: 50px; height: 25px; }
    .color-name { font-size: 0.75rem !important; }
    .font-item { flex-direction: column; text-align: center; }
    .font-info { padding-right: 0; margin-bottom: 15px; }
    .font-img { text-align: center; }
    .art-point-grid { grid-template-columns: 1fr; }

    /* その他ユーティリティ */
    .sp-block { display: block; }
    .keep-text { display: inline-block; }

}

@media (max-width: 600px) {
    /* Specやモーダルのdl/dtレイアウトを縦並びに */
    dt, dd { width: 100%; border: none; }
    dt { padding-bottom: 0; margin-top: 15px; }
    dd { padding-top: 5px; border-bottom: 1px solid #eee; }
    .spec-container dt, .spec-container dd { width: 100%; border: none; }
    .spec-container dt { padding-bottom: 0; margin-top: 15px; }
    .spec-container dd { padding-top: 5px; border-bottom: 1px solid #eee; }
}

@media (max-width: 480px) {
    .intro-box { padding: 40px 15px; width: 100%; }
}