:root{
  --bg:#ffffff;
  --bg-soft:#f6f6f3;
  --line:#e6e1d7;
  --text:#111111;
  --muted:#666666;
  --gold:#b6903b;
  --gold-soft:#d7c08a;
  --max:1240px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:"Noto Sans JP",sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none;margin:0;padding:0}
p,h1,h2,h3{margin:0}

.nav-toggle{display:none}

/* =========================
   TOP BAR / HEADER
========================= */
.topbar{
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  letter-spacing:.12em;
  position:relative;
  transition:.3s ease;
}

.topbar a{
  color:var(--gold);
}

.topbar-close{
  position:absolute;
  right:16px;
  border:0;
  background:none;
  font-size:18px;
  cursor:pointer;
  color:inherit;
}

.site-header{
  z-index:40;
  transition:.35s ease;
}

/* =========================
   TOP PAGE
========================= */
body.page-home .site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  background:transparent;
}

body.page-home .topbar{
  border-bottom:0.5px solid rgba(255,255,255,.18);
  color:#fff;
  background:transparent;
}

body.page-home .header-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:20px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

body.page-home .icon-link{
  font-size:11px;
  letter-spacing:.12em;
  color:#fff;
  transition:.3s ease;
}

body.page-home .menu-btn span{
  display:block;
  height:1px;
  background:#fff;
  transition:.3s ease;
}

body.page-home .site-header.is-solid{
  background:rgba(255,255,255,.94);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  backdrop-filter:blur(10px);
}

body.page-home .site-header.is-solid .topbar{
  color:#111;
  background:#fff;
  border-bottom:1px solid var(--line);
}

body.page-home .site-header.is-solid .icon-link{
  color:#222;
}

body.page-home .site-header.is-solid .menu-btn span{
  background:#111;
}

/* =========================
   SUB PAGES
========================= */
body.page-sub .site-header{
  position:sticky;
  top:0;
  background:rgba(255,255,255,.94);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  backdrop-filter:blur(10px);
}

body.page-sub .topbar{
  border-bottom:1px solid var(--line);
  color:#111;
  background:#fff;
}

body.page-sub .header-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:20px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

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

.header-actions{
  display:flex;
  align-items:center;
  gap:20px;
}

body.page-sub .icon-link{
  font-size:11px;
  letter-spacing:.12em;
  color:#222;
  transition:.3s ease;
}

.menu-btn{
  width:34px;
  height:22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  cursor:pointer;
}

body.page-sub .menu-btn span{
  display:block;
  height:1px;
  background:#111;
  transition:.3s ease;
}

.site-header.is-solid .menu-btn span{
  background:#111;
}

/* =========================
   GLOBAL NAV
========================= */
.global-nav{
  max-height:0;
  overflow:hidden;
  transition:max-height .5s ease;
  border-top:0.5px solid rgba(0,0,0,.04);
  background:#fff;
}

.nav-toggle:checked ~ .site-header{
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  backdrop-filter:blur(10px);
}

.nav-toggle:checked ~ .site-header .topbar{
  color:#111;
  background:#fff;
  border-bottom:1px solid var(--line);
}

.nav-toggle:checked ~ .site-header .icon-link{
  color:#222;
}

.nav-toggle:checked ~ .site-header .menu-btn span{
  background:#111;
}

.nav-toggle:checked ~ .site-header .menu-btn span:nth-child(1){
  transform:translateY(10px) rotate(45deg);
}

.nav-toggle:checked ~ .site-header .menu-btn span:nth-child(2){
  opacity:0;
}

.nav-toggle:checked ~ .site-header .menu-btn span:nth-child(3){
  transform:translateY(-10px) rotate(-45deg);
}

.nav-toggle:checked ~ .site-header .global-nav{
  max-height:900px;
  border-top:0.5px solid rgba(0,0,0,.04);
}

.global-nav-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:34px 28px 40px;
}

.global-nav-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  gap:32px;
  align-items:start;
}

.global-nav-main{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px;
}

.global-nav-sub{
  display:flex;
  flex-direction:column;
  gap:20px;
  align-items:flex-start;
}

.global-nav-sub .nav-col{
  width:100%;
}

.global-nav-sub .nav-col ul{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.nav-col h2{
  font-size:12px;
  letter-spacing:.14em;
  margin-bottom:16px;
  color:var(--gold);
  font-weight:500;
}

.nav-col li{
  margin-bottom:12px;
}

.nav-col a{
  font-size:14px;
  color:#4a4a4a;
}

.nav-banner{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:220px;
  padding:22px;
  border:1px solid var(--line);
  background:linear-gradient(135deg,#fff,#f7f5ef 60%,#eee6d0);
}

.nav-banner-label{
  font-size:10px;
  letter-spacing:.14em;
  color:var(--gold);
  margin-bottom:10px;
}

.nav-banner strong{
  font-family:"Noto Serif JP",serif;
  font-size:26px;
  font-weight:500;
  margin-bottom:6px;
}

.nav-banner small{
  font-size:12px;
  color:#555;
}

.nav-banner.small-banner{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  width:100%;
  max-width:260px;
  min-height:auto;
  padding:14px 16px;
  background:#111;
  color:#fff;
  border-radius:6px;
  border:none;
}

.nav-banner.small-banner .nav-banner-label{
  font-size:10px;
  letter-spacing:.12em;
  opacity:.6;
  margin-bottom:4px;
  color:#fff;
}

.nav-banner.small-banner strong{
  font-size:14px;
  font-weight:500;
  line-height:1.4;
  margin-bottom:0;
}

.nav-banner.small-banner small{
  display:none;
}

/* =========================
   HERO
========================= */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  overflow:hidden;
  border-bottom:none;
}

.hero-media{
  position:absolute;
  inset:0;
}

.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.22) 100%),
    radial-gradient(circle at 20% 30%, rgba(182,144,59,.12), transparent 20%),
    radial-gradient(circle at 80% 60%, rgba(182,144,59,.08), transparent 24%);
}

.hero-copy{
  position:relative;
  z-index:2;
  max-width:var(--max);
  margin:0 auto;
  padding:20vh 28px 12vh;
}

.eyebrow{
  font-size:20px;
  letter-spacing:.18em;
  color:#d9c291;
  margin-bottom:18px;
}

.hero h2{
  font-family:"Noto Serif JP",serif;
  font-size:58px;
  line-height:1.34;
  font-weight:500;
  letter-spacing:.03em;
  color:#fff;
}

.hero h2 small{
  display:block;
  margin-top:16px;
  font-size:20px;
  font-weight:400;
  letter-spacing:.08em;
  color:#fff;
}

.scroll-indicator{
  position:absolute;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  font-size:10px;
  letter-spacing:.24em;
  color:#fff;
  z-index:2;
  opacity:.7;
  transition:.3s ease;
}

.scroll-indicator:hover{
  opacity:1;
}

.scroll-indicator em{
  display:block;
  width:1px;
  height:44px;
  background:rgba(255,255,255,.72);
  position:relative;
}

.scroll-indicator em::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  width:8px;
  height:8px;
  border-right:1px solid #fff;
  border-bottom:1px solid #fff;
  transform:translateX(-50%) rotate(45deg);
}

/* =========================
   LEAD BLOCK
========================= */
.lead-block{
  max-width:var(--max);
  margin:0 auto;
  padding:50px 28px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:60px;
  align-items:center;
  overflow:visible;
}

.lead-block.reverse .lead-figure{order:2}
.lead-block.reverse .lead-copy{order:1}

.lead-figure{
  border:none;
  background:linear-gradient(180deg,#fff,#faf8f3);
  padding:18px;
  position:relative;
  width:100%;
  margin-left:0;
  margin-right:0;
}

.lead-figure img{
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
  display:block;
}

.section-en{
  font-size:25px;
  letter-spacing:.18em;
  color:var(--gold);
  margin-bottom:14px;
}

.lead-copy h2{
  font-family:"Noto Serif JP",serif;
  font-size:35px;
  line-height:1.55;
  font-weight:500;
  margin-bottom:24px;
}

.lead-text p{
  font-size:14px;
  line-height:2.05;
  color:#333;
  margin-bottom:14px;
}

.arrow-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  font-size:13px;
  letter-spacing:.08em;
}

.arrow-link span{
  color:var(--gold);
}
.story-section{
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 120px 28px;
  background: url("../img/story.jpg") no-repeat center center;
  background-size: cover;
}

.story-section::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.38);
}

.story-section .inner{
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin-left: auto;
}

.story-section .section-en{
  color:var(--gold);
}
.story-section h2,
.story-section .lead-text p,
.story-section .arrow-link{
  color: #fff;
}

.story-section .arrow-link span{
  color: #d7c08a;
}
/* =========================
   BANNERS / JOURNAL / FAQ
========================= */
.banner-grid{
  max-width:var(--max);
  margin:0 auto;
  padding:14px 28px 40px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.banner-card{
  border:1px solid var(--line);
  background:#fff;
  overflow:hidden;
}

.banner-card img{
  width:100%;
  aspect-ratio:3 / 1;
  object-fit:cover;
}

.banner-card div{
  padding:18px 18px 22px;
}

.banner-card h3{
  font-family:"Noto Serif JP",serif;
  font-size:24px;
  font-weight:500;
  margin-bottom:8px;
}

.banner-card p{
  font-size:13px;
  line-height:1.8;
  color:#555;
}

.journal-section,
.faq-section,
.page-section{
  max-width:var(--max);
  margin:0 auto;
  padding:56px 28px 64px;
}

.journal-section .section-head,
.faq-section .section-head{
  justify-content:center;
  text-align:center;
}

.journal-section .section-head h2,
.faq-section .section-head h2{
  width:100%;
}
.faq-button{
  text-align:center;
  margin-top:20px;
}

.faq-button a{
  display:inline-block;
  padding:14px 26px;
  border:1px solid var(--gold);
  color:var(--gold);
  text-decoration:none;
  font-size:14px;
  letter-spacing:0.06em;
  transition:all .3s ease;
}

.faq-button a:hover{
  background:var(--gold);
  color:#fff;
}
.page-section{
  padding-top:160px;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:26px;
}

.section-head h2 strong{
  display:block;
  font-family:"Noto Serif JP",serif;
  font-size:34px;
  font-weight:500;
  line-height:1;
}

.section-head h2 small{
  display:block;
  margin-top:8px;
  font-size:13px;
  color:var(--gold);
}

.journal-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.journal-card{
  border:1px solid var(--line);
  background:#fff;
  display: flex;
  flex-direction: column;
  transition: 0.3s;
}
.journal-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.journal-card img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.journal-card-body h3 {
  min-height: 3.5em;
}

.journal-card-body p {
  min-height: 4em;
}
.tag{
  display:inline-block;
  font-size:11px;
  color:var(--gold);
  letter-spacing:.12em;
  margin-bottom:16px;
}

.visual-journal-card img{
  width:100%;
  aspect-ratio:1.4 / 1;
  object-fit:cover;
  border-bottom:1px solid var(--line);
}

.journal-card-body{
  padding:22px;
  flex: 1;
}

.journal-card h3{
  font-size:21px;
  line-height:1.7;
  font-family:"Noto Serif JP",serif;
  font-weight:500;
  margin-bottom:14px;
}

.journal-card p{
  font-size:13px;
  line-height:1.95;
  color:#555;
}

.faq-list{
  border-top:1px solid var(--line);
}

.faq-list details{
  border-bottom:1px solid var(--line);
  padding:20px 0;
}

.faq-list summary{
  cursor:pointer;
  font-size:15px;
  list-style:none;
  position:relative;
  padding-right:30px;
}

.faq-list summary::-webkit-details-marker{
  display:none;
}

.faq-list summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:0;
  color:var(--gold);
  font-size:22px;
  line-height:1;
}

.faq-list details[open] summary::after{
  content:"−";
}

.faq-list p{
  margin-top:14px;
  font-size:13px;
  line-height:1.9;
  color:#555;
  max-width:760px;
}

.faq-list a{
  color:var(--gold);
}

/* =========================
   FOOTER
========================= */
.site-footer{
  margin-top:24px;
  border-top:1px solid var(--line);
  background:var(--bg-soft);
}

.footer-contact,
.footer-bottom{
  max-width:var(--max);
  margin:0 auto;
  padding:28px;
}

.footer-contact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--line);
}

.footer-contact h2 strong{
  display:block;
  font-family:"Noto Serif JP",serif;
  font-size:30px;
  font-weight:500;
}

.footer-contact h2 small{
  display:block;
  margin-top:8px;
  font-size:13px;
  color:#666;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-contact p{
  margin-top:10px;
  font-size:13px;
  color:#555;
  line-height:1.9;
}

.footer-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:220px;
  height:48px;
  border:1px solid #111;
  background:#111;
  color:#fff;
  font-size:12px;
  letter-spacing:.12em;
}

.footer-bottom{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:24px;
}

.footer-logo{
  font-family:"Noto Serif JP",serif;
  font-size:20px;
  letter-spacing:.12em;
}

.footer-bottom img{
  height:28px;
  width:auto;
}

.footer-bottom ul{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.footer-bottom li a{
  font-size:12px;
  color:#555;
}

.copyright{
  font-size:11px;
  color:#777;
  text-align:right;
}

/* =========================
   PAGE COMMON
========================= */
.page-title{
  font-family:"Noto Serif JP",serif;
  font-size:42px;
  font-weight:500;
  margin-bottom:16px;
}

.page-lead{
  font-size:14px;
  line-height:2;
  color:#444;
  max-width:820px;
  margin-bottom:36px;
}

.info-card{
  border:1px solid var(--line);
  background:#fff;
  padding:24px;
  margin-bottom:18px;
}

.info-card h2{
  font-family:"Noto Serif JP",serif;
  font-size:24px;
  font-weight:500;
  margin-bottom:14px;
}

.info-card p,
.info-card li{
  font-size:14px;
  line-height:2;
  color:#444;
}

.info-card ul{
  list-style:disc;
  padding-left:20px;
}

/* =========================
   LARGE DESKTOP
========================= */
@media (min-width:1200px){
  .lead-figure{
    width:115%;
  }

  .lead-block:not(.reverse) .lead-figure{
    margin-left:-15%;
    margin-right:0;
  }

  .lead-block.reverse .lead-figure{
    margin-left:0;
    margin-right:-15%;
  }
}

/* =========================
   TABLET
========================= */
@media (max-width:980px){
  .global-nav-layout{
    grid-template-columns:1fr;
    gap:24px;
  }

  .global-nav-main{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 20px;
  }

  .global-nav-sub{
    border-top:1px solid var(--line);
    padding-top:20px;
  }

  .banner-grid,
  .lead-block,
  .footer-bottom,
  .journal-grid{
    grid-template-columns:1fr;
  }

  .lead-block.reverse .lead-figure,
  .lead-block.reverse .lead-copy{
    order:initial;
  }

  .hero h2{
    font-size:42px;
  }

  .nav-toggle:checked ~ .site-header .global-nav{
    max-height:calc(100svh - 68px);
    overflow-y:auto;
  }
}

/* =========================
   MOBILE
========================= */
@media (max-width:640px){
  .topbar{
    height:32px;
    font-size:10px;
    padding:0 36px 0 12px;
  }

  .header-inner{
    padding:16px 16px;
  }

  .global-nav-inner{
    padding:14px 14px 18px;
  }

  .global-nav-layout{
    gap:12px;
  }

  .global-nav-main{
    grid-template-columns:1fr;
    gap:10px;
  }

  .global-nav-sub{
    gap:8px;
    padding-top:8px;
  }

  .nav-col h2{
    margin-bottom:6px;
    font-size:10px;
    letter-spacing:.08em;
    line-height:1.2;
  }

  .nav-col ul{
    margin:0;
  }

  .nav-col li{
    margin-bottom:4px;
    line-height:1.2;
  }

  .nav-col a{
    font-size:12px;
    line-height:1.35;
    display:block;
  }

  .global-nav-sub .nav-col ul{
    gap:4px;
  }

  .nav-banner.small-banner{
    width:100%;
    max-width:none;
    padding:10px 12px;
  }

  .nav-banner.small-banner .nav-banner-label{
    margin-bottom:2px;
    font-size:9px;
    letter-spacing:.08em;
  }

  .nav-banner.small-banner strong{
    font-size:12px;
    line-height:1.3;
  }

  .nav-banner.small-banner small{
    display:none;
  }

  .nav-toggle:checked ~ .site-header .global-nav{
    max-height:calc(100svh - 68px);
    overflow-y:auto;
  }

  .hero-copy,
  .lead-block{
    padding-left:16px;
    padding-right:16px;
  }

  .lead-figure{
    width:auto;
    margin-left:-16px;
    margin-right:-16px;
    padding:0;
    border:none;
  }

  .lead-figure img{
    width:100%;
    height:auto;
    display:block;
  }

  .banner-grid,
  .journal-section,
  .faq-section,
  .page-section,
  .footer-contact,
  .footer-bottom{
    padding-left:16px;
    padding-right:16px;
  }

  .header-actions{
    gap:14px;
  }

  .icon-link{
    display:none;
  }

  .hero{
    min-height:100vh;
    min-height:100svh;
    min-height:100dvh;
  }

  .hero h2{
    font-size:31px;
    line-height:1.55;
  }

  .lead-copy h2{
    font-size:25px;
  }

  .section-head h2 strong{
    font-size:25px;
  }

  .banner-card h3{
    font-size:20px;
  }

  .footer-contact{
    align-items:flex-start;
    flex-direction:column;
  }

  .footer-button{
    width:100%;
  }

  .footer-bottom{
    gap:16px;
  }

  .copyright{
    text-align:left;
  }

  .page-title{
    font-size:32px;
  }
}