/* 令和さんサイト 共通CSS(全ページで同じ部分:配色・メニュー・フッター・ボタン・FAQ・アニメーションなど) */
:root{
    --bg: #FAF9F6;
    --bg-soft: #F3F1EC;
    --ink: #242320;
    --ink-soft: #55524A;
    --indigo: #2E3A5C;
    --indigo-deep: #1E2740;
    --vermillion: #B23A2E;
    --blush: #E9CBC4;
    --mist: #D9E1E8;
    --line: rgba(36,35,32,0.12);
    --serif: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', sans-serif;
    --sans: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', sans-serif;
  }
*{ box-sizing:border-box; margin:0; padding:0; }
::selection{ background: rgba(178,58,46,0.18); color: var(--ink); }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--bg-soft); }
::-webkit-scrollbar-thumb{ background: var(--vermillion); border-radius:10px; border:2px solid var(--bg-soft); }
::-webkit-scrollbar-thumb:hover{ background: var(--indigo); }
html{ scrollbar-color: var(--vermillion) var(--bg-soft); scrollbar-width: thin; }
html{ scroll-behavior:smooth; }
body{
    font-family: var(--sans);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.9;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
img{ display:block; width:100%; height:100%; object-fit:cover; }
a{ color:inherit; }
.wrap{ max-width: 980px; margin:0 auto; padding: 0 28px; }
section{ position:relative; }
/* photo reveal: monochrome -> color as it enters view */
  .photo-reveal{
    filter: grayscale(85%) brightness(0.92) contrast(1.02);
    transition: filter 1.4s ease, transform 0.6s ease;
  }
.photo-reveal.is-color{ filter: grayscale(0%) brightness(1) contrast(1); }
.photo-frame:hover .photo-reveal{ transform: scale(1.035); }
.photo-frame{ overflow:hidden; }
/* ---------- パンくずリスト ---------- */
.breadcrumb{
  max-width: 980px; margin: 0 auto; padding: 86px 28px 0;
  font-size: 0.78rem; color: var(--ink-soft);
}
.breadcrumb a{ color: var(--ink-soft); text-decoration:underline; text-underline-offset:2px; }
.breadcrumb a:hover{ color: var(--vermillion); }
.breadcrumb [aria-current="page"]{ color: var(--ink); }
@media (max-width: 760px){
  .breadcrumb{ padding-top: 76px; font-size: 0.72rem; }
}

/* ---------- TOP BAR / NAV ---------- */
  .topbar{
    position: fixed;
    top:0; left:0; right:0;
    z-index: 55;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding: 22px 28px;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    color: #FBF8F2;
    mix-blend-mode: difference;
  }
.topbar a{ text-decoration:none; }
.scroll-dots{
    position: fixed; right: 24px; top:50%;
    transform: translateY(-50%);
    z-index: 45;
    display:flex; flex-direction:column; gap: 16px;
  }
.scroll-dots a{
    width:7px; height:7px; border-radius:50%;
    background: rgba(255,255,255,0.5);
    mix-blend-mode: difference;
    transition: transform 0.3s ease, background 0.3s ease;
  }
.scroll-dots a.active{ transform: scale(1.5); background:#fff; }
@media (max-width: 760px){
  .scroll-dots{ display:none; }
}
/* ---------- HERO ---------- */
  .hero{
    position:relative;
    height: 100vh;
    min-height: 560px;
    overflow:hidden;
    color:#FBF8F2;
  }
.hero-photo{ position:absolute; top:-20%; bottom:-20%; left:0; right:0; will-change:transform; }
.hero-photo img{
    filter: brightness(0.72) saturate(1.05);
    animation: heroZoom 16s ease-out forwards;
  }
@keyframes heroZoom{
  from{ transform: scale(1); }
  to{ transform: scale(1.09); }
}
.hero-scrim{
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(20,24,38,0.35) 0%, rgba(20,24,38,0.12) 38%, rgba(15,18,28,0.72) 100%);
  }
.hero-inner{
    position:relative; z-index:2;
    height:100%;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding-bottom: 76px;
  }
.hero-tag{
    display:inline-flex; align-items:center; gap:10px;
    font-size:0.82rem; color:#EFE6DA;
    margin-bottom: 22px;
    opacity:0; animation: rise 0.9s ease-out 0.2s forwards;
  }
.hero-tag .dot{ width:5px; height:5px; border-radius:50%; background: var(--blush); }
.hero h1{
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(2.6rem, 8vw, 4.4rem);
    line-height: 1.22;
    opacity:0; animation: rise 1s ease-out 0.35s forwards;
  }
.hero p.lead{
    margin-top: 22px;
    max-width: 28em;
    font-size: 1.04rem;
    color: #EAE2D5;
    opacity:0; animation: rise 1s ease-out 0.5s forwards;
  }
.hero-actions{
    margin-top: 34px;
    display:flex; gap:14px; flex-wrap:wrap;
    opacity:0; animation: rise 1s ease-out 0.65s forwards;
  }
@keyframes rise{
  from{opacity:0; transform:translateY(16px);}
  to{opacity:1; transform:translateY(0);}
}
.btn{
    display:inline-flex; align-items:center; gap:8px;
    padding: 13px 26px;
    border-radius: 2px;
    font-size: 0.95rem; font-weight:500;
    text-decoration:none;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  }
.btn-primary{ background: var(--vermillion); color:#FBF4EF; }
.btn-primary:hover{ background:#8F2E24; transform: translateY(-1px); }
.btn-line{ border:1px solid rgba(251,248,242,0.5); color:#FBF8F2; }
.btn-line:hover{ border-color: rgba(251,248,242,0.9); transform: translateY(-1px); }
.btn-outline{ border:1px solid var(--indigo); color: var(--indigo); }
.btn-outline:hover{ background: var(--indigo); color:#FBF8F2; transform: translateY(-1px); }
.btn:active{ transform: scale(0.97); }
@media (prefers-reduced-motion: reduce){
  .btn:active{ transform:none; }
}
/* ---------- decorative blobs ---------- */
  .blob{ position:absolute; z-index:0; pointer-events:none; }
.about-grid{
    display:grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 60px;
    align-items:center;
  }
.about p{ max-width: 32em; font-size: 1.01rem; color: var(--ink-soft); }
.about-figure::before{
    content:'';
    position:absolute;
    inset: 18px -18px -18px 18px;
    background: var(--mist);
    clip-path: polygon(5% 0%, 100% 0%, 100% 90%, 94% 100%, 0% 100%, 0% 10%);
    z-index:-1;
  }
.stat .num{ font-family: var(--serif); font-size: 2rem; color: var(--indigo); line-height:1; }
.stat .label{ font-size: 0.82rem; color: var(--ink-soft); margin-top:6px; }
/* ---------- NEWS ---------- */
  .news{ padding: 72px 0 130px; }
.news-badge{
    display:inline-block; align-self:flex-start;
    font-size: 0.76rem; letter-spacing:0.04em;
    color: var(--vermillion);
    border: 1px solid rgba(178,58,46,0.35);
    padding: 5px 12px; border-radius: 2px;
    margin-bottom: 16px;
  }
.news-body h3{ font-family: var(--serif); font-weight:600; font-size:1.6rem; color:var(--indigo); margin-bottom:12px; }
.news-body p{ color: var(--ink-soft); max-width: 30em; }
.activities .kicker{ margin-bottom: 56px; }
.activity{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items:center;
    padding: 64px 0;
  }
.activity + .activity{ border-top: 1px solid var(--line); }
.activity:nth-child(even) .activity-figure{ order:2; }
.activity:nth-child(even) .activity-body{ order:1; }
.activity-figure{ aspect-ratio: 5/4; overflow:hidden; clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%, 0 90%); }
.activity:nth-child(even) .activity-figure{ clip-path: polygon(0 4%, 92% 0, 100% 96%, 8% 100%, 0 96%); }
.activity-body p{ max-width: 32em; color: var(--ink-soft); }
.activity-note{
    display:inline-block; margin-top:16px;
    font-size:0.83rem; color: var(--vermillion);
    border:1px solid rgba(178,58,46,0.3);
    padding:5px 12px; border-radius:2px;
  }
/* flagship sansa block: richer collage */
  .flagship{ padding: 64px 0 20px; border-top:1px solid var(--line); }
.flagship-grid{
    display:grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 30px;
    align-items:start;
  }
.flagship-main{
    position:relative;
    aspect-ratio: 4/5;
    overflow:hidden;
    clip-path: polygon(0 0, 96% 0, 100% 8%, 100% 100%, 4% 100%, 0 92%);
  }
.flagship-main::before{
    content:'';
    position:absolute;
    inset: 18px -18px -18px 18px;
    background: var(--blush);
    clip-path: polygon(0 0, 96% 0, 100% 8%, 100% 100%, 4% 100%, 0 92%);
    z-index:-1;
  }
.flagship-side{ display:flex; flex-direction:column; gap:24px; }
.flagship-accent{ aspect-ratio: 5/4; overflow:hidden; clip-path: polygon(4% 0,100% 0,100% 88%,92% 100%,0 100%,0 12%); }
.flagship-text{ padding-top: 6px; }
.flagship-text p{ color:var(--ink-soft); max-width:30em; }
.panel .kicker{ margin-bottom: 44px; }
.panel-table{
    display:grid; grid-template-columns:1fr 1fr;
    background: var(--bg-soft);
    border-radius: 6px; overflow:hidden;
    box-shadow: 0 22px 46px -34px rgba(36,35,32,0.25);
  }
.panel-col{ display:flex; flex-direction:column; justify-content:center; }
.panel-col + .panel-col{ border-left:1px solid var(--line); }
.panel-col h4{ font-family:var(--serif); font-weight:600; font-size:1.25rem; color:var(--indigo); margin-bottom:14px; }
.panel-col .price{ font-size:1.5rem; color:var(--vermillion); margin-bottom:12px; }
.panel-col .price small{ font-size:0.86rem; color:var(--ink-soft); font-weight:400; }
.panel-col ul{ list-style:none; }
.panel-col li{ font-size:0.94rem; color:var(--ink-soft); padding-left:1.1em; position:relative; margin-top:8px; }
.panel-col li::before{ content:'・'; position:absolute; left:0; color:var(--vermillion); }
.page-top{ padding-top:150px; }
/* ---------- CTA ---------- */
  .cta{ position:relative; height: 62vh; min-height:420px; color:#FBF8F2; overflow:hidden; }
.cta-photo{ position:absolute; inset:0; }
.cta-photo img{ filter: brightness(0.5) saturate(1.05); }
.cta-inner{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding: 0 28px; }
.cta h2{ font-family:var(--serif); font-weight:700; font-size: clamp(1.8rem, 5vw, 2.5rem); margin-bottom:16px; }
.cta p{ color:#E9E1D3; max-width:28em; margin-bottom:30px; }
footer.site-footer{
    display:block; padding: 44px 0 30px; margin-top: 30px;
    background: var(--bg-soft, #F3F1EC); border-top: 1px solid var(--line);
    font-size:0.84rem; color: var(--ink-soft);
  }
.site-footer .sf-main{ display:flex; justify-content:space-between; align-items:flex-start; gap:28px 40px; flex-wrap:wrap; }
.site-footer .sf-brand{ display:flex; align-items:center; gap:14px; }
.site-footer .sf-logo{ width:52px; height:52px; border-radius:50%; flex:none; background:#F3E6D2; box-shadow:0 0 0 2px #fff, 0 6px 14px -6px rgba(0,0,0,0.35); }
.site-footer .sf-name{ font-family: var(--serif); font-weight:700; font-size:1.05rem; color: var(--indigo); letter-spacing:0.04em; }
.site-footer .sf-sub{ font-size:0.78rem; margin-top:2px; }
.site-footer .sf-links{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px 36px; }
.site-footer .sf-links a{ color: var(--indigo); text-decoration:none; font-size:0.86rem; padding:2px 0; border-bottom:1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; }
.site-footer .sf-links a:hover{ color: var(--vermillion); border-bottom-color: var(--vermillion); }
.site-footer .sf-links a[aria-current="page"]{ color: var(--vermillion); font-weight:700; }
.site-footer .sf-bottom{ margin-top:26px; padding-top:18px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:10px 20px; flex-wrap:wrap; }
.site-footer .sf-sns{ display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; }
.site-footer .sf-ig{ display:inline-flex; align-items:center; gap:10px; color: var(--ink-soft); text-decoration:none; }
.site-footer .sf-ig-badge{ width:30px; height:30px; border-radius:50%; border:1.5px solid var(--vermillion); color: var(--vermillion); display:inline-flex; align-items:center; justify-content:center; transition: background 0.2s ease, color 0.2s ease; }
.site-footer .sf-ig:hover .sf-ig-badge{ background: var(--vermillion); color:#fff; }
.site-footer .sf-copy{ font-size:0.76rem; color:#8a877e; }
@media (min-width: 761px){
  .site-footer .sf-links{ grid-template-columns: repeat(4, auto); gap:12px 34px; }
}
@media (max-width: 760px){
  .about-grid{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .about-figure{ order:-1; max-width: 420px; margin: 0 auto; }
  .news-card{ grid-template-columns:minmax(0,1fr); }
  .activity, .activity:nth-child(even){ grid-template-columns:minmax(0,1fr); gap:28px; padding: 44px 0; }
  .activity-figure, .activity:nth-child(even) .activity-figure{ order:1; }
  .activity-body, .activity:nth-child(even) .activity-body{ order:2; }
  .flagship-grid{ grid-template-columns:minmax(0,1fr); }
  .panel-table{ grid-template-columns:minmax(0,1fr); }
  .panel-col + .panel-col{ border-left:none; border-top:1px solid var(--line); }
  .stat-row{ gap:28px; }
  .page-top{ padding-top:104px; }
  .news{ padding: 48px 0 84px; }
  .flagship{ padding: 40px 0 8px; }
  .panel-col{ padding: 28px 22px; }
  .kicker{ font-size: 1.2rem; }
  .news-body{ padding: 28px 26px; }
}
@media (prefers-reduced-motion: reduce){
  .hero-tag,.hero h1,.hero p.lead,.hero-actions{ animation:none; opacity:1; }
  .hero-photo img{ animation:none; }
  .photo-reveal{ filter:none; transition:none; }
}
a:focus-visible, button:focus-visible{ outline:2px solid var(--vermillion); outline-offset:3px; }
.topbar-brand{ text-decoration:none; display:flex; align-items:center; gap:8px; }
.brand-mark{ display:block; flex-shrink:0; width:42px; height:42px; border-radius:50%; visibility:hidden; }
.brand-badge{ position:fixed; top:22px; left:28px; z-index:60; }
.brand-badge img{ display:block; width:42px; height:42px; border-radius:50%; object-fit:cover; box-shadow: 0 2px 10px rgba(20,18,14,0.35); }
/* ---------- HOME LINK GRID ---------- */
  .home-links{ padding: 28px 0 120px; position:relative; overflow:hidden; }
.home-links::before{
    content:'';
    position:absolute; inset: -30px;
    background-image:
      radial-gradient(circle, var(--blush) 0%, var(--blush) 36%, transparent 70%),
      radial-gradient(circle, var(--mist) 0%, var(--mist) 30%, transparent 66%),
      radial-gradient(circle, #D8A438 0%, #D8A438 22%, transparent 60%);
    background-size: 80px 80px, 60px 60px, 100px 100px;
    background-position: 4px 8px, 46px 50px, 140px 20px;
    filter: blur(10px);
    opacity: 0.5;
    z-index: 0;
  }
.link-grid{
    position:relative; z-index:1;
    display:grid; grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
.link-grid a{
    background: var(--bg);
    border-radius: 10px;
    padding: 36px 32px;
    text-decoration:none; color: var(--ink);
    display:block;
    box-shadow: 0 20px 40px -28px rgba(36,35,32,0.3);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
.link-grid a:hover{ transform: translateY(-3px); box-shadow: 0 24px 44px -26px rgba(36,35,32,0.38); }
.link-grid h3{ font-family: var(--serif); font-weight:600; color:var(--indigo); font-size:1.2rem; margin-bottom:10px; }
.link-grid p{ font-size:0.9rem; color: var(--ink-soft); }
.link-grid .arrow{ display:inline-flex; align-items:center; gap:10px; margin-top:16px; font-size:0.82rem; color: var(--vermillion); }
.link-grid .arrow-circle{
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:26px; height:26px; border-radius:50%;
    border:1.5px solid var(--vermillion); font-size:0.78rem; line-height:1;
    transition: transform 0.25s ease, background 0.2s ease, color 0.2s ease;
  }
.link-grid a:hover .arrow-circle{ transform: translateX(5px); background: var(--vermillion); color:#fff; }
.link-grid a.is-featured{ border-left: 4px solid var(--vermillion); }
.link-grid a.is-featured .arrow{ margin-top:14px; }
@media (max-width: 760px){
  .link-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (min-width: 761px){
  .link-grid a.is-featured{
    grid-column: 1 / -1;
    display:flex; align-items:center; justify-content:space-between; gap:28px;
  }
  .link-grid a.is-featured .link-grid-body{ max-width:640px; }
  .link-grid a.is-featured .arrow{ margin-top:0; flex:none; }
}
/* ---------- メニュー(明るいオフホワイト・中央寄せ・波紋で開く) ---------- */
  .nav-toggle{
    position:fixed; top:16px; right:16px; z-index:80;
    min-height:44px; padding:0 20px; border:none; border-radius:999px;
    background:#2c2c2c; color:#f7f6f2;
    font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:0.1em; line-height:1;
    cursor:pointer;
    box-shadow:0 0 0 1px rgba(247,246,242,0.28), 0 8px 20px -10px rgba(0,0,0,0.5);
  }
.nav-overlay{
    position:fixed; inset:0; z-index:90; height:100vh; height:100dvh;
    display:flex; flex-direction:column;
    padding:min(24px,3vh) 24px min(36px,4vh);
    background:transparent; color:#2c2c2c;
    visibility:hidden; pointer-events:none; overflow:hidden;
    transition:visibility 0s 0.8s;
  }
.nav-overlay.is-active{ visibility:visible; pointer-events:auto; transition:visibility 0s; }
.center-ripple{
    position:fixed; z-index:0; top:50%; left:50%; width:0; height:0; border-radius:50%;
    background:#f7f6f2; transform:translate(-50%,-50%); pointer-events:none;
    transition:width 0.8s ease-out, height 0.8s ease-out;
  }
.nav-overlay.is-active .center-ripple{ width:max(250vw,250vh); height:max(250vw,250vh); }
.nav-overlay .close-btn{
    position:relative; z-index:1; align-self:flex-end; width:44px; height:44px;
    background:none; border:none; color:#2c2c2c; font-size:30px; line-height:1; cursor:pointer;
  }
.nav-list{
    position:relative; z-index:1; list-style:none; margin:auto 0; padding:0; text-align:center;
    display:flex; flex-direction:column; gap:min(10px,1.2vh);
  }
.nav-list a{
    display:block; padding:8px 20px; color:#2c2c2c; text-decoration:none;
    font-family:var(--serif); font-weight:500; font-size:18px; letter-spacing:0.1em; line-height:1.6;
    transition:opacity 0.3s;
  }
.nav-list a:hover{ opacity:0.5; }
.nav-list a[aria-current="page"]{ color:var(--vermillion); font-weight:700; }
.nav-footer{ position:relative; z-index:1; text-align:center; font-size:11px; color:#767676; letter-spacing:0.15em; line-height:1.8; }
.nav-list li, .nav-overlay .close-btn, .nav-footer{
    opacity:0; transform:translateY(12px); transition:opacity 0.3s, transform 0.3s;
  }
.nav-overlay.is-active .nav-list li,
  .nav-overlay.is-active .close-btn,
  .nav-overlay.is-active .nav-footer{
    opacity:1; transform:none; transition-delay:calc(0.3s + var(--i, 0) * 0.06s);
  }
@media (min-width: 761px){
  .nav-list{ gap:0; }
  .nav-list a{ padding:9px 20px; font-size:16px; }
  .nav-list{ display:grid; grid-template-columns:repeat(2,auto); justify-content:center; column-gap:36px; }
  .nav-footer{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .center-ripple, .nav-list li, .nav-overlay .close-btn, .nav-footer{ transition-duration:0.01s; transition-delay:0s !important; }
}
/* メニュー下部のきつね(提灯を持った令和さんのマスコット) */
  .nav-fox{
    position:relative; z-index:1; display:block;
    width: clamp(84px, 20vw, 130px); height:auto;
    margin: 4px auto 10px;
    opacity:0; transform:translateY(12px);
    transition:opacity 0.3s, transform 0.3s;
  }
.nav-overlay.is-active .nav-fox{ opacity:1; transform:none; transition-delay:calc(0.3s + 8 * 0.06s); }
@media (min-width: 761px){
  .nav-fox{ width: clamp(64px, 14vw, 90px); margin: 2px auto 6px; }
  .nav-fox{ display:none; }
}
/* ---------- ボタンの動き(浮き上がる影・押した感触) ---------- */
  .btn{ border-radius:6px; transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.btn:active{ transform: translateY(1px) scale(0.985); box-shadow:none; }
@media (hover: hover){
  .btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 14px 24px -12px rgba(178,58,46,0.55); }
  .btn-outline:hover{ transform: translateY(-3px); box-shadow: 0 14px 24px -12px rgba(46,58,92,0.45); }
  .btn-line:hover{ transform: translateY(-3px); box-shadow: 0 14px 24px -12px rgba(0,0,0,0.45); }
}
@media (prefers-reduced-motion: reduce){
  .btn, .btn:hover, .btn:active{ transition:none; transform:none; }
}