:root {
    --header-height: 80px;
    --font-sans: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    --font-serif: "Yu Mincho", "Hiragino Mincho ProN", serif;
    --font-header: "Yu Mincho", "Hiragino Mincho ProN", serif;
    --font-catch : "Yu Mincho", "Hiragino Mincho ProN", serif;
    --text-color: #333;
    --underline-color : #DC0100;
}

/* ──────────── リセット ──────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
    font-family: var(--font-sans);
    color: var(--text-color);
    line-height:1.9;
}

/* ──────────── グラデーション背景 ──────────── */
.grad-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        45deg,
        #fde4ec 0%, #fbe1dc 7%, #fbe6d1 14%, #fcf1d4 21%, #fbeecb 28%, #eef9e2 35%,
        #e8f7d9 42%, #e0f6e8 49%, #d8f1fa 56%, #dfe8ff 63%, #e5e1ff 70%, #ecd9ff 77%,
        #f3def1 84%, #fde4ec 91%, #fffafa 100%
    );
    background-size: 300% 300%;
    animation: gradientShift 8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    25%  { background-position: 50% 0%; }
    50%  { background-position: 100% 50%; }
    75%  { background-position: 50% 100%; }
    100% { background-position: 0% 50%; }
}

/* ──────────── ヘッダー ──────────── */
header {
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    background: transparent;
    z-index: 5;
    font-family: var(--font-header);
    transition: background-color 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}
/* スクロール後に白背景を付与 */
header.scrolled {
    background: rgba(255,255,255,0.5);

    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.logo img {
    width: 160px;
    height: auto;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 2rem;
}
nav a {
    text-decoration: none;
    color: var(--text-color);
    font-size: 0.95rem;
    font-weight: 500;
    transition: opacity 0.2s;
}
nav a:hover { opacity: 0.6; }

/* ─── ヘッダードロップダウン ─── */
.has-dropdown{ position:relative; }

.dropdown{
position:absolute;
top:100%; left:0;
display:none;
list-style:none;
padding:.6rem 0;
background:#fff;
border:1px solid #ddd;
border-radius:4px;
min-width:180px;
background:rgba(255,255,255,.6);
backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.35);
border-radius:6px;
box-shadow:0 4px 18px rgba(0,0,0,.12);

z-index:20;
}
.has-dropdown:hover .dropdown{ display:block; }

.dropdown a{
display:block;
padding:.45rem 1rem;
white-space:nowrap;
color:var(--text-color);
font-size:.9rem;
text-decoration:none;
}
.dropdown a:hover{
background:#f5f5f5;
}


/* ──────────── FV ──────────── */
.hero {
    height: 100dvh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-top: var(--header-height);
    z-index: 0;
}
.hero h1 {
    position: relative;
    z-index: 1;
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 300;
    letter-spacing: 0.12em;
    color: #444444;
    text-shadow: 0 4px 8px rgba(103, 103, 103, 0.3);
    font-family: var(--font-catch);
}
.saitama-map {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 60%;
    width: 60%;
    height: auto;
    opacity: 0.75;
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.9));
}

/* レスポンシブ微調整 */
@media (max-width: 600px) {
    :root { --header-height: 64px; }
    .logo img { width: 120px; }
    nav ul { gap: 1.2rem; }
    .hero h1 {
        font-size: clamp(1.4rem, 6vw, 2rem);
        letter-spacing: 0.08em;
        position: static;
        text-align: center;
        margin-bottom: 1.5rem;
    }
    .saitama-map {
        position: static;
        width: 90%;
        max-width: 360px;
        margin-top: 1.5rem;
    }
    .hero {
        flex-direction: column-reverse;
        justify-content: flex-start;
        align-items: center;
        padding-top: calc(var(--header-height) + 7rem); /* ←ヘッダー分＋余白 */
        height: auto; /* ←必要なら高さを可変に */
        min-height: 100dvh;
    }
    }

/* ─── scroll-down配置 ─── */
.scroll-down_01{
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 180px;
    height: 180px;
    color: #030303;
    text-decoration: none;
    font-family: "Yu Mincho", serif;
}
.scroll-down_01:hover{ opacity: .7; }

.circle-text_01{
    position: absolute;
    inset: 0;
    animation: rotate 20s linear infinite;
}
.circle-text_01 span{
    position: absolute;
    left: 50%;
    font-size: 16px;
    transform-origin: 0 90px;
}

.arrow_01{
    position: absolute;
    top: 50%; left: 50%;
    width: 28px; height: 46px;
    transform: translate(-50%, -50%);
    animation: scroll_01 3s infinite;
}
.arrow_01::before{
    content: "";
    position: absolute;
    top: 0; left: 50%;
    width: 1px; height: 100%;
    background: #444;
    transform: translateX(-50%);
}
.arrow_01::after{
    content: "";
    position: absolute;
    bottom: 2px; left: 50%;
    width: 12px; height: 12px;
    border-bottom: 1px solid #444;
    border-right: 1px solid #444;
    transform: translateX(-50%) rotate(45deg);
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes scroll_01 {
    0% {
        transform: translate(-50%, -50%) translateY(-10px);
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) translateY(10px);
        opacity: 0;
    }
}

/* 横幅・見出し・アクセントカラー */
.container{
    padding: 0 18%;
    text-align: center;
}
.heading{
    font-family: var(--font-serif);
    font-size: 40px;
    position: relative;
    display: inline-block;
    margin-bottom: 50px;
}
.heading::after{
    content: "";
    position: absolute;
    bottom: -0.1rem;
    left: 50%;
    width: 60px;
    height: 3px;
    background: var(--underline-color);
    transform: translateX(-50%);
}
.accent_red{
    color: #DC0100;
}
@media (max-width: 600px){
    .container {
      padding-inline: clamp(16px, 6vw, 24px);
    }
    .heading {
        font-size: clamp(22px, 6vw, 28px);
        margin-bottom: 32px;
      }
}


/* ──────────── Saicolorとは？ ──────────── */
.intro{
    margin-top: 140px;
}
@media (max-width: 600px){
  .intro p {
    font-size: 0.95rem;
    line-height: 1.7
  }
  .intro {
    margin-top: 80px;
  }
}


/* ──────────── 彩の国の６つの色旅 ──────────── */
ruby rt{
    font-size:.3em;
}

.card-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    margin-top:5rem;
}

.card{
    display:block;
    box-shadow:0 6px 18px rgba(0,0,0,.18);
    transition:transform .25s ease, box-shadow .25s ease;
}

 /* ホバー時：少し浮き上がるイメージ */
.card:hover{
    transform:translateY(-8px);
    box-shadow:0 12px 28px rgba(0,0,0,.20);
}

.card img{
    width:100%;
    display:block;
    border-radius:2px;
}

/* 大画面ではカードの最小幅を広げて列数を減らす */
@media (min-width: 1450px){
    .card-grid{
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* 260→320 */
        gap: 2.2rem;
    }
}

@media (max-width: 600px){
    .card-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
        margin-top: 2.5rem;
    }
}
/* ──────────── Color Picker ──────────── */
.visually-hidden{
    position:absolute!important;
    width:1px;height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    clip-path:inset(50%);
    border:0;
    padding:0;
    margin:-1px;
}

.picker-wrap{
    margin-top: 28px;
    display:flex; flex-direction:column; align-items:center; gap: 40px;
}

.color-well{
    --picked:#ffffff; /* JSで上書き */
    width: clamp(180px, 24vw, 260px);
    height: clamp(180px, 24vw, 260px);
    border-radius: 50%;
    border: 1px solid #cfcfcf;
    background: var(--picked);
    box-shadow: inset 0 0 0 8px rgba(255,255,255,.35), 0 4px 14px rgba(0,0,0,.08);
    cursor: pointer;
    position:relative;
}
.color-well:focus-visible{ outline: 3px solid #0d62aa66; outline-offset: 4px; }
.color-well::after{
    content:"タップ／クリックして色を選ぶ";
    position:absolute; inset:auto 0 10px 0;
    text-align:center; font-size:.8rem; color:#666; opacity:.9;
    pointer-events: none;
}

.result-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(160px, 260px));
    gap: 32px;
    justify-content:center;
}

.result-card{
    display:block; background:#fff;
    border: 1px solid #ddd;
    border-radius: 2px;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    width: min(26vw, 260px);
    overflow:hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.result-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,.16);
}
.result-card img{
    width:100%; height:100%; object-fit:cover; display:block;
}

#color_picker{ padding-bottom: 40px; }

@media (min-width: 1450px){
    .result-grid{
        grid-template-columns: repeat(3, minmax(320px, 400px));
        gap: 1rem;
    }
    @media (min-width: 1450px){
        .result-card{
            width: min(24vw, 320px);
            max-width: 340px;
            margin-inline: auto;
        }
    }
}


/* スマホ：1列～2列に可変 */
@media (max-width: 840px){
    .result-grid{
        grid-template-columns: 1fr;
        max-width: 320px;
        margin-inline: auto;
        gap: 1.2rem;
    }

    .result-card {
        width: 100%;
        max-width: 320px;
    }
}


@media (max-width: 600px){
    .result-grid {
        gap: 1.2rem;
        max-width: 320px;
        margin-inline: auto;
    }
    .result-card {
        width: 100%;
        max-width: 320px;
    }
}


/* ────────────下層ページ専用ヘッダー（白背景）──────────── */
.detail-page header{
    position:fixed;
    background: rgba(255, 255, 255, 0.5); /* 半透明の白 */
    z-index:10;
}

/* ヒーロー画像がヘッダーと重ならないようオフセット */
.detail-page .spot-hero{
    margin-top:0;
}

/* ドロップダウンも白ヘッダー上で見やすく */
.detail-page .dropdown{
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(4px);
    border:1px solid #ddd;
}

/* ヒーロー画像 */
.spot-hero img{
    width:100%;
    height:auto;
    display: block;
}
@media (max-width: 600px){
    .spot-hero img {
      height: 40vh;          /* 画面の高さの40%を確保 */
      object-fit: cover;     /* はみ出す分はトリミング */
    }
  }
  

/* ────────────下層ページ──────────── */

/*  見出し & カラードット & テキストアクセント*/
.spot-intro .container{
    text-align:left;
}
.spot-head{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    margin: 0 auto 1.8rem;
}
.spot-dot{
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--spot-color, #777);
    flex-shrink:0;
}
.spot_heading{
    font-family: var(--font-serif);
    font-size: 40px;
    margin: 0;
    text-align: left;
}

.accent_purple{
    color: #7e548c;
}
.accent_blue{
    color: #6FC3DF;
}
.accent_green{
    color: #8BC34A;
}
.accent_orange{
    color: #E86B37;
}
.accent_gray{
    color: #888B9C;
}
.accent_yellow{
    color: #F6C443;
}

/* 説明文だけ中央揃えにする */
.spot-intro .container p{
    text-align:center;
}

@media (max-width: 600px){
    .spot_heading {
      font-size: clamp(22px, 6vw, 28px); /* 見出しを小さめに調整 */
    }
  
    .spot-intro {
      margin-top: 80px; /* 余白を詰める */
    }
  
    .spot-intro .container p {
      font-size: 0.95rem;  /* 本文を少し小さめに */
      line-height: 1.7;    /* 読みやすい行間 */
      text-align: left;  /* ←中央より左揃えにすると読みやすい */
    }
  }
  

/* 画像+基本データ */
.spot-info .container{
    display:grid;
    grid-template-columns:minmax(260px,1fr) 1fr;
    gap:3rem;
    align-items:center;
    margin-top:4rem;
}

.spot-photo img{
    width:100%;
    max-width: 400px;
    height:auto;
    border-radius:2px;
}
.spot-data{
    display: grid;
    grid-template-columns: 8rem 1fr;
    row-gap: 1.2rem;
    font-size:1.05rem;
    line-height:1.8;
    text-align: left;
}
.spot-data dt{
    font-weight:600;
    color:var(--spot-color);   /* ページごとのアクセントカラー */
}

.spot-data dd{
    grid-column: 2;
    margin: 0;
}

@media (max-width:1030px){
    .spot-info .container{
        grid-template-columns:1fr;   /* ← 1 列グリッドに */
        gap:1rem;
    }

    .spot-photo img{
        max-width:100%;
        margin:0 auto;
    }

    .spot-data{
        margin-top:1rem;
        justify-self:center;
    }
}
@media (max-width: 600px){
    .spot-info .container {
        margin-top: 2.5rem;
        gap: 1.5rem;
    }

    .spot-photo img {
        max-width: 100%;
        border-radius: 4px;
    }

    .spot-data {
        font-size: 0.95rem;
        row-gap: 1rem;
    }

    .spot-data dt {
        width: 5.5rem;
    }
}


/* おすすめ撮影スポット*/

.gallery-grid{
    display: grid;
    grid-template-columns:repeat(auto-fit,minmax(0,320px));
    justify-items:center;
    justify-content: center;
    column-gap: 1rem;
    row-gap: 1.2rem;
}

.gallery-grid figure{
    width:100%;
    max-width:320px;
    text-align:center;
}

.gallery-grid img{
    width:100%;
    height:auto;
    border-radius:4px;
}

.spot-meta{
    margin-top:.8rem;
    font-size:.85rem;
    color:#666;
    letter-spacing:.05em;
}

.spot-desc{
    margin-top:.3rem;
    font-size:.9rem;
    line-height:1.7;
}

@media (min-width: 1450px){
    .gallery-grid{
        grid-template-columns: repeat(auto-fit, minmax(0, 400px));
        column-gap: 1.4rem;
    }
    .gallery-grid figure{
        max-width: 400px;
    }
    .gallery-grid img{
        width: 100%; height: auto;
    }
}


@media(max-width:1030px){
    .gallery-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width: 600px){
    .gallery-grid {
        gap: 1rem;
    }

    .gallery-grid figure {
        max-width: 100%;
    }

    .spot-meta {
        font-size: 0.8rem;
    }

    .spot-desc {
        font-size: 0.9rem;
        line-height: 1.6;
    }
}



/*  アクセス  */
.spot-access .container{
    text-align:center;
}

.access-box{
    background:#f0f0f2;
    padding:3.75rem 2rem;
    border-radius:4px;
    margin:0 auto;
}
.accent_heading{
    display:block;
    text-align:center;
    margin:0 0 2rem;
}
.access-list{
    width:fit-content;
    margin:0 auto;
    text-align: left;
    display:grid;
    grid-template-columns:5rem 1fr;
    row-gap:1.2rem;
}

.access-list dt{
    font-weight:600;
    color:var(--spot-color);
}

.access-list dd{
    margin:0;
}

@media(max-width:600px){
    .access-box {
        padding: 28px 1rem;    /* 余白をさらに詰めてスッキリ */
        border-radius: 4px;    /* 角丸で柔らかく */
      }
    
      .access-heading {
        font-size: 1.3rem;     /* 見出しは小さめ */
        margin-bottom: 1.2rem;
      }
    
      .access-list {
        row-gap: 0.8rem;       /* 項目間の余白を詰める */
        font-size: 0.9rem;     /* 本文サイズも少し抑える */
      }
}

/*  ギャラリー  */
.thumb-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:1.2rem;
    justify-items:center;
    max-width:700px;
    margin:0 auto;
}

.thumb-grid img{
    width:100%;
    border-radius:4px;
    cursor:pointer;
}
/* ---- 拡大表示 ---- */
.thumb-grid img{
    width:100%;
    border-radius:4px;
    transition:transform .25s ease;
}

.thumb-grid img:hover{
    transform:scale(1.08);
    z-index:1;
    cursor:default;
}
@media (min-width: 1450px){
    .thumb-grid{
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* 200→260 */
        max-width: 1000px;
        gap: 1.5rem;
    }
    .thumb-grid img{
        max-width: 100%;
        height: auto;
    }
}


/* ------- 戻るボタン ------- */
.button{
    margin: 80px 0;
}
.button a {
    background: #eee;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 240px;
    padding: 10px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    text-decoration: none;
}
.button a:before {
    content: '';
    position: absolute;
    top: calc(50% - 2px);
    right: -2em;
    transform: translateY(calc(-50% - 2px)) rotate(30deg);
    width: 12px;
    height: 2px;
    background-color: #DC0100;
    transition: 0.3s;
}
.button a:after {
    content: '';
    position: absolute;
    top: 50%;
    right: -2em;
    transform: translateY(-50%);
    width: 60px;
    height: 2px;
    background-color: #DC0100;
    transition: 0.3s;
}
.button a:hover:before, .button a:hover:after {
    right: -2.5em;
}
.button a:hover {
    background: #ffeded;
    color: #DC0100;
}

@media (max-width: 600px){
        .button {
          margin-bottom: 30px;
        }
    .button a {
      width: 90%;
      max-width: 320px;
      margin-inline: auto;
      padding: 14px 0;
      font-size: 1rem;
      border-radius: 6px;
    }
    .button a::before,
    .button a::after {
      display: none; /* スマホでは矢印装飾を非表示 */
    }
  }
  

/* うちわ */
.spot-hero p{
    text-align: right;
    padding-right: 7%;
    font-size: 10px;
}

/* ----------全スポット--------- */

/* 固定ヘッダー分の押し下げ */
.detail-page main{
    padding-bottom: var(--header-height);
    padding-top: calc(var(--header-height) + 4px);
}


  /* 全スポットだけ左右余白を控えめに */
.all-spot .container{
    padding-inline: clamp(16px, 4vw, 64px);
}

.spot-grid{
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 285px); /* PCは3列固定 */
    gap: 30px;
    justify-content: center;
    margin: auto;
}

/* 画像カード（影・ホバー） */
.spot-img{
    display:block; background:#fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    transition: transform .15s ease, box-shadow .15s ease;
    width:285px;
    height:335px;
    overflow:hidden;

}
.spot-img:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0,0,0,.16);
}
.spot-img:focus-visible{
    outline: 3px solid #0d62aa66; outline-offset: 4px;
}

.spot-img img{
    display:block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (min-width: 1450px){
    .spot-grid{
        grid-template-columns: repeat(3, 340px); /* 285px → 340px */
        gap: 36px;
    }
    .spot-img{
        width:340px;
        height:400px;
    }
}


/* タブレット：2列 */
@media (max-width: 1100px){
    .spot-grid{ grid-template-columns: repeat(2, 285px); }
}

/* スマホ：1列（幅に合わせて縮む） */
@media (max-width: 640px){
    .spot-grid{
        grid-template-columns: 1fr;
    }
    .spot-img{
        width: 100%;
        height: auto;
        aspect-ratio: 285 / 335;
    }
    .spot-img img{
        height: 100%;
    }
}



/* ------------footer------------ */
footer {
    text-align: center;
    font-size: 0.85rem;
    color: #555;
    padding: 20px 0;
}

/* スマホでは文字サイズを少し小さく */
    @media (max-width: 600px){
    footer {
        font-size: 0.75rem;
        padding: 16px 0;
    }
}

/* =========================
（body.home）
========================= */
body.home{ --scroll-diameter: clamp(120px, 24vw, 180px); }

/* コンテナの左右余白・最大幅を調整（indexのみ） */
.home .container{
    width: min(100% - 32px, 1100px);
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 48px);
    text-align: center;
}

/* FVの横スクロール防止＆サイズ可変 */
.home .hero{ height:100dvh; width:100%; }
.home .saitama-map{ width: clamp(280px, 60vw, 780px); max-width:85vw; }

/* スクロール誘導のサイズ可変 */
.home .scroll-down_01{
    width: var(--scroll-diameter);
    height: var(--scroll-diameter);
    bottom: clamp(12px, 4vh, 40px);
    right: clamp(12px, 4vw, 40px);
}
.home .circle-text_01 span{
    font-size: clamp(12px, 1.8vw, 16px);
    transform-origin: 0 calc(var(--scroll-diameter) / 2 - 10px);
}

/* モバイルナビ（indexのみ反映） */
.nav-toggle{
    display:none; border:0; background:transparent; padding:.6rem; margin-left:auto;
    width:44px; height:44px; color:#333; cursor:pointer;
}
.nav-toggle::before{
    content:""; display:block; width:24px; height:2px; margin:0 auto;
    background:currentColor; box-shadow:0 -7px 0 0 currentColor, 0 7px 0 0 currentColor;
}
.has-dropdown:focus-within .dropdown{ display:block; }

    @media (max-width: 600px){
    /* indexのヘッダーだけ固定＆押し下げ */
    header{
        position:fixed;
        z-index:20;
        transition: background-color 0.4s ease, box-shadow 0.4s ease;
    }
    body.home{ padding-top: var(--header-height);
    }
    /* モバイル時：サブメニューは通常フローで、初期は閉じる */
body.nav-open .has-dropdown > .dropdown{
    position: static;     /* ← これで下にずれて他メニューを押し出す */
    display: none;        /* ← 初期は非表示 */
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

/* 親 <li> に .open が付いた時だけ開く */
body.nav-open .has-dropdown.open > .dropdown{
    display: block;
}

.nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }

/* メニューをドロワー風に */
nav > ul{
        position:fixed;
        top:var(--header-height);
        left:0;
        right:0;
        display:none;
        flex-direction:column;
        gap:0;
        background:rgba(255,255,255,.98);
        backdrop-filter:blur(10px);
        border-bottom:1px solid #eaeaea;
        padding:12px 16px;
        z-index:19;
    }
body.nav-open nav > ul {
        display: flex;
    }
/* 初期は閉じる */
.has-dropdown > .dropdown { display:none; }
    }