@charset "UTF-8";

/* =========================================
   Base Styles & Reset
   ========================================= */
:root {
    --primary-color: #0056b3;
    --secondary-color: #f8f9fa;
    --accent-color: #ea5514;
    --accent-yellow: #ffc107;
    --text-color: #333333;
    --link-color: #0056b3;
    --white: #ffffff;
    --base-font: 'Noto Sans JP', "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    --ink-bg: #f2f2f2;
    --ink-text: #1a1a1a;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0; padding: 0;
    font-family: var(--base-font);
    font-size: 16px; line-height: 1.6;
    color: var(--text-color);
    background-color: var(--white);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { margin-top: 0; line-height: 1.3; font-weight: 700; }
p { margin-top: 0; margin-bottom: 1rem; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: var(--link-color); text-decoration: none; transition: 0.3s; }
a:hover { opacity: 0.8; }

/* =========================================
   Components (共通パーツ)
   ========================================= */
.container { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 20px; }
section { padding: 80px 0; }
.section-title { text-align: center; font-size: 1.8rem; margin-bottom: 30px; position: relative; padding-bottom: 15px; }
.section-title::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background-color: var(--accent-yellow); }
.section-lead { text-align: center; margin-bottom: 40px; max-width: 800px; margin: 0 auto; }

.btn { display: inline-block; font-weight: 700; text-align: center; padding: 12px 30px; border-radius: 50px; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border: none; cursor: pointer; text-decoration: none; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 8px rgba(0,0,0,0.15); opacity: 1; }
.btn-primary { color: var(--white); background-color: var(--primary-color); border-color: var(--primary-color); }
.btn-large { padding: 15px 40px; font-size: 1.2rem; }

/* =========================================
   1. Hero Section (ファーストビュー)
   ========================================= */
.hero-section {
    position: relative; padding: 80px 0 100px; color: var(--white); text-align: center;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('img/top_sp.png') no-repeat center center / cover;
}
.hero-main-campaign { display: inline-block; font-size: 2.8rem; font-weight: 900; line-height: 1.2; margin: 10px 0 20px; text-shadow: 2px 2px 10px rgba(0,0,0,0.8); }
.hero-description-box { max-width: 800px; margin: 0 auto 30px; background: rgba(0,0,0,0.3); padding: 20px; border-radius: 8px; }
.hero-description-box p { font-size: 1.1rem; line-height: 1.8; margin-bottom: 0; }
.tse-text-banner { display: inline-block; background: rgba(15, 35, 80, 0.9); color: #ffd700; font-weight: 700; font-size: 0.9rem; padding: 8px 20px; border: 1px solid #cfaa56; margin-bottom: 20px; box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
.campaign-banner { display: flex; align-items: center; justify-content: center; margin-bottom: 40px; max-width: 500px; margin: 0 auto; }
.campaign-medal { flex-shrink: 0; width: 90px; height: 90px; background-color: #e3c96c; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid #fff; z-index: 2; margin-right: -25px; box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
.campaign-ribbon { background: linear-gradient(to right, #b71c1c, #d32f2f); color: var(--white); font-size: 1rem; font-weight: 700; padding: 12px 15px 12px 35px; border-radius: 4px; flex-grow: 1; box-shadow: 0 4px 8px rgba(0,0,0,0.2); }

/* =========================================
   2. Store Intro & Company Section (修正箇所)
   ========================================= */
.section-store-intro { text-align: center; }

/* 画像ギャラリー修正 */
.store-carousel-wrapper {
    margin-bottom: 40px;
}

.store-images {
    display: grid;
    gap: 15px; /* 余白を少し広げる */
}

/* PC：左に大きくメイン、右に縦に2つサブ */
@media screen and (min-width: 768px) {
    .store-images {
        grid-template-columns: 2.2fr 1fr; /* 左メインが大きく */
        grid-template-rows: 1fr 1fr;
        height: 500px; /* 全体の高さを固定 */
    }
    .store-images .img-main {
        grid-column: 1 / 2;
        grid-row: 1 / 3; /* メインを縦2列使う */
        border-radius: 12px 0 0 12px;
    }
    .store-images .img-sub:nth-child(2) {
        border-radius: 0 12px 0 0;
    }
    .store-images .img-sub:nth-child(3) {
        border-radius: 0 0 12px 0;
    }
}

/* スマホ：メインの下にサブが横並び */
@media screen and (max-width: 767px) {
    .store-images {
        grid-template-columns: 1fr 1fr;
    }
    .store-images .img-main {
        grid-column: 1 / 3; /* メインを横2列使う */
        border-radius: 8px 8px 0 0;
        aspect-ratio: 16 / 9; /* メインの高さを比率で固定 */
    }
    .store-images .img-sub:nth-child(2) {
        border-radius: 0 0 0 8px;
    }
    .store-images .img-sub:nth-child(3) {
        border-radius: 0 0 8px 0;
    }
}

.store-images img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像をはみ出させず切り取る */
    display: block;
}

/* 店舗情報詳細 */
.store-details-grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 40px; text-align: left; }
.store-info dl { display: flex; flex-wrap: wrap; margin: 0; }
.store-info dt { width: 100px; font-weight: 700; padding: 12px 0; border-bottom: 1px solid #eee; color: var(--primary-color); }
.store-info dd { width: calc(100% - 100px); padding: 12px 0; border-bottom: 1px solid #eee; margin-left: 0; }

.store-features li { position: relative; padding-left: 25px; margin-bottom: 10px; font-weight: bold; }
.store-features li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-yellow); }

/* 会社紹介 */
.company-intro-box { background-color: #f9f9f9; border: 1px solid #eee; border-radius: 12px; padding: 40px 30px; margin: 40px 0; text-align: center; }
.company-badge { display: inline-block; background-color: var(--accent-color); padding: 5px 15px; border-radius: 20px; margin-bottom: 10px; font-weight: 700; color: #fff; }
.highlight { background: linear-gradient(transparent 60%, #ffeb3b 60%); font-weight: bold; }
.trust-points { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 30px; }
.trust-item { background-color: #fff; width: calc(33.333% - 20px); min-width: 250px; padding: 25px 20px; border-radius: 8px; border-bottom: 3px solid var(--primary-color); box-shadow: 0 3px 10px rgba(0,0,0,0.05); }
.trust-icon { font-size: 2.5rem; margin-bottom: 15px; display: block; }
.store-sub-text { text-align: center; font-weight: 700; background-color: var(--secondary-color); padding: 20px; border-radius: 8px; }

/* =========================================
   3. ink Brand Section & Gallery
   ========================================= */
.section-brand-ink { background-color: var(--ink-bg); color: var(--ink-text); padding: 100px 0; }
.brand-logo-area { text-align: center; margin-bottom: 30px; }
.brand-logo { max-width: 200px; height: auto; }

.brand-concept-box { text-align: center; max-width: 800px; margin: 0 auto 60px; }
.brand-main-copy { font-size: 2rem; line-height: 1.4; margin-bottom: 25px; letter-spacing: 0.05em; }
.concept-body p { font-size: 1rem; color: #444; line-height: 1.8; }

.brand-points-title { text-align: center; font-size: 1.5rem; margin-bottom: 40px; position: relative; padding-bottom: 15px; }
.brand-points-title::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 2px; background: var(--ink-text); }

.brand-points-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-bottom: 60px; }
.brand-point-card { background: #fff; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.05); display: flex; flex-direction: column; transition: transform 0.3s; }
.brand-point-card:hover { transform: translateY(-5px); }
.brand-point-img { aspect-ratio: 16 / 10; overflow: hidden; }
.brand-point-img img { width: 100%; height: 100%; object-fit: cover; }
.brand-point-text { padding: 25px; flex-grow: 1; text-align: left; }
.point-number { font-size: 0.85rem; color: var(--primary-color); font-weight: 700; display: block; margin-bottom: 8px; letter-spacing: 0.1em; }
.point-heading { font-size: 1.25rem; margin-bottom: 15px; line-height: 1.4; }
.brand-point-text p { font-size: 0.95rem; color: #555; line-height: 1.7; margin: 0; }

.brand-gallery { width: 100%; overflow: visible; margin-top: 80px; max-width: 1200px; margin-left: auto; margin-right: auto; }
.gallery-title { text-align: center; font-size: 1.5rem; margin-bottom: 30px; }
.ink-swiper { width: 100%; padding: 20px 0 60px !important; }
.ink-swiper .swiper-slide { aspect-ratio: 16 / 9; border-radius: 15px; transition: 0.4s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.15); opacity: 0.4; overflow: hidden; }
.ink-swiper .swiper-slide-active { opacity: 1; }
.ink-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =========================================
   4. Recommended (こんな方におすすめ) 
   ========================================= */
.section-recommended { background-color: var(--primary-color); color: var(--white); padding: 80px 0; }
.section-recommended .section-title { color: var(--white); }
.section-recommended .section-title::after { background-color: var(--accent-yellow); }
.checklist { background-color: rgba(255, 255, 255, 0.1); padding: 30px; border-radius: 8px; max-width: 800px; margin: 0 auto 40px; }
.checklist li { margin-bottom: 15px; padding-left: 35px; position: relative; font-size: 1.1rem; font-weight: 700; text-align: left; }
.checklist li::before {
    content: ""; position: absolute; left: 0; top: 3px; width: 24px; height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffc107'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat;
}
.recommended-land-area { background-color: #fff; border-radius: 12px; padding: 40px 30px; margin: 0 auto 40px; max-width: 900px; color: var(--text-color); text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
.rec-land-title { font-size: 1.4rem; color: var(--primary-color); margin-bottom: 15px; border-bottom: 2px dashed #ddd; padding-bottom: 15px; display: inline-block; font-weight: 700; }
.land-points { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.land-point-item { background-color: var(--secondary-color); width: calc(33.333% - 20px); min-width: 250px; padding: 25px 20px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform 0.3s; }
.land-point-item p { font-weight: 700; margin: 0; }
.point-icon { font-size: 2.5rem; margin-bottom: 10px; display: block; }
.recommended-closing { font-size: 1.25rem; font-weight: 700; margin-top: 20px; text-align: center; color: #fff; }

/* =========================================
   5. Campaign Section (参加特典)
   ========================================= */
.section-campaign-gold { background: linear-gradient(135deg, #e6c972 0%, #f8b500 100%); text-align: center; color: #3e2723; }
.gold-benefit-label { background: rgba(255,255,255,0.9); color: #d32f2f; padding: 8px 30px; border-radius: 50px; display: inline-block; margin-bottom: 30px; font-weight: bold; }
.campaign-content-gold { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.campaign-image-gold img { border-radius: 12px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); max-width: 500px; }
.campaign-usage ul { text-align: left; display: inline-block; padding-left: 20px; list-style: disc; }

.benefit-box-framed {
    border: 4px solid #ea5514; border-radius: 24px; padding: 70px 25px 50px; margin-top: 80px;
    position: relative; background-color: #ffffff; box-shadow: 0 20px 40px rgba(234, 85, 20, 0.15);
    display: flex; flex-direction: column; align-items: center;
}
.benefit-emphasis-tag {
    position: absolute; top: -28px; left: 50%; transform: translateX(-50%) rotate(-2deg);
    background: linear-gradient(135deg, #ff9800 0%, #ea5514 100%);
    color: #fff; font-size: 1.8rem; font-weight: 900; padding: 12px 60px;
    border-radius: 60px; border: 4px solid #fff; box-shadow: 0 8px 20px rgba(234, 85, 20, 0.3); z-index: 10;
}
.benefit-big-icon { font-size: 6rem; display: block; margin-bottom: 20px; animation: giftBounce 3s infinite ease-in-out; }
@keyframes giftBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }

.benefit-monitor-banner-outer { margin-top: 40px; text-align: center; }
.benefit-monitor-banner-outer img { width: 100%; max-width: 900px; border-radius: 12px; box-shadow: 0 15px 35px rgba(0,0,0,0.3); border: 2px solid #fff; transition: 0.3s; }
.benefit-monitor-banner-outer img:hover { transform: scale(1.01); }
.benefit-monitor-note { font-size: 0.95rem; font-weight: 700; margin-top: 15px; color: #3e2723; }
.campaign-summary-gold { background: #d32f2f; color: #fff; padding: 20px; border-radius: 12px; margin-top: 40px; }
.highlight-white { color: #ffeb3b; font-weight: 700; }
.gold-separator { border: 0; border-top: 2px dashed #3e2723; opacity: 0.3; margin: 40px 0; width: 100%; }

/* =========================================
   6. Flow & 7. FAQ (Accordion)
   ========================================= */
.section-flow { background-color: var(--secondary-color); }
.flow-steps { display: flex; flex-direction: column; gap: 30px; margin: 40px 0; }
.step-item { background: #fff; padding: 30px; border-radius: 12px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.step-number { display: inline-block; background: var(--accent-yellow); padding: 4px 15px; border-radius: 20px; font-weight: bold; margin-bottom: 15px; }

.faq-container { max-width: 850px; margin: 0 auto; }
.faq-item { margin-bottom: 15px; border: 1px solid #eeeeee; border-radius: 10px; overflow: hidden; background-color: #fff; text-align: left; }
.faq-question { display: block; position: relative; padding: 20px 60px 20px 25px; font-weight: 700; color: var(--primary-color); background-color: #fcfcfc; cursor: pointer; list-style: none; }
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after { content: '＋'; position: absolute; right: 25px; top: 50%; transform: translateY(-50%); font-size: 1.2rem; transition: 0.3s; }
.faq-item[open] .faq-question { background-color: #f0f7ff; border-bottom: 1px solid #eee; }
.faq-item[open] .faq-question::after { content: 'ー'; transform: translateY(-50%) rotate(180deg); }
.faq-answer { padding: 20px 25px; line-height: 1.8; background-color: #fff; }

/* =========================================
   8. Instagram (Elfsight)
   ========================================= */
.section-instagram-follow { background-color: #fafafa; padding: 80px 0; }
.insta-follow-card { border: 1px solid #dbdbdb; border-radius: 12px; padding: 40px 20px; text-align: center; background: #fff; max-width: 900px; margin: 0 auto; }
.insta-header { display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 30px; }
.insta-icon { font-size: 2.5rem; }
.insta-main { font-size: 1.5rem; margin: 0; }
.btn-insta { background: linear-gradient(45deg, #f09433, #bc1888); color: #fff; padding: 15px 40px; border-radius: 50px; font-weight: bold; display: inline-block; margin-top: 30px; }

/* =========================================
   9. Form Tabs
   ========================================= */
.section-form { background-color: #f4f4f4; }
.form-tabs { display: flex; justify-content: center; gap: 5px; margin-bottom: 30px; }
.tab-btn { flex: 1; max-width: 300px; padding: 15px; border: 2px solid #ccc; background: #eee; cursor: pointer; border-radius: 10px 10px 0 0; font-weight: bold; }
.tab-btn.active { background: #fff; border-color: var(--primary-color); color: var(--primary-color); }
.tab-date { font-size: 0.8rem; color: #666; display: block; margin-bottom: 3px; }
.tab-content { display: none; background: #fff; padding: 30px 15px; border-radius: 0 0 10px 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.tab-content.active { display: block; }
.form-badge { text-align: center; padding: 12px; margin-bottom: 25px; font-weight: 700; border-radius: 6px; }
.form-badge.consult { background: #e3f2fd; color: #1976d2; }
.form-badge.visit { background: #fff3e0; color: #e65100; }

/* =========================================
   10. Footer & Fixed CTA
   ========================================= */
.footer { background: #222; color: #fff; text-align: center; padding: 60px 0 30px; }
.footer img { max-width: 150px; filter: brightness(0) invert(1); margin-bottom: 20px; }
.fixed-cta { position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(255,255,255,0.95); padding: 15px 0; z-index: 2000; box-shadow: 0 -3px 15px rgba(0,0,0,0.1); }
.btn-fixed { display: block; width: 90%; margin: 0 auto; text-align: center; animation: pulse 2s infinite; font-weight: bold; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }

/* =========================================
   Responsive Styles
   ========================================= */
@media screen and (min-width: 768px) {
    .hero-section { min-height: 85vh; padding: 120px 0; background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('img/kagoshima_video.gif'); }
    .hero-main-campaign { font-size: 4rem; }
    .store-details-grid { grid-template-columns: 1fr 1fr; }
    .campaign-content-gold { flex-direction: row; align-items: flex-start; justify-content: center; gap: 60px; }
    .flow-steps { flex-direction: row; gap: 20px; }
    .step-item { flex: 1; position: relative; }
    .step-item:not(:last-child)::after { content: "▶"; position: absolute; right: -20px; top: 40%; font-size: 1.5rem; color: #ccc; }
    .fixed-cta { display: none; }
}

@media screen and (max-width: 767px) {
    body { padding-bottom: 80px; } /* 固定CTAとコンテンツの重なり防止 */
    .hero-main-campaign { font-size: 2.2rem; }
    .hero-description-box p { text-align: left; font-size: 0.95rem; }
    .benefit-emphasis-tag { font-size: 1.4rem; padding: 8px 40px; top: -22px; }
    .benefit-big-icon { font-size: 4.5rem; }
    /* スマホでの店舗情報 dt dd の並びを修正 */
    .store-info dt { width: 100%; border-bottom: none; }
    .store-info dd { padding-top: 0; padding-bottom: 15px; border-bottom: 1px solid #eee; margin-left: 0; }
    .trust-item { width: 100%; }
    /* スマホでの「おすすめ」リストの見え方調整 */
    .checklist li { font-size: 1rem; }
}