/* ==========================================================================
   Front Page — Japanese Traditional Guide
   Scoped under .jt-front to avoid conflicts with SWELL/global styles.
   ========================================================================== */
.jt-front{
  --jt-font:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --jt-ink:#182026;
  --jt-muted:#69716a;
  --jt-deep:#24382f;
  --jt-green:#49684e;
  --jt-gold:#a27a3d;
  --jt-paper:#fffdf7;
  --jt-soft:#f4efe4;
  --jt-line:#e4d9c8;
  --jt-hero:url("assets/hero-japanese-calm.png");

  position:relative;
  font-family:var(--jt-font);
  color:var(--jt-ink);
  background:
    radial-gradient(circle at 15% 0%,rgba(162,122,61,.08),transparent 30rem),
    linear-gradient(180deg,#fffdf8 0%,#f7f1e7 100%);
  overflow:hidden;
}
.jt-front *{box-sizing:border-box}
.jt-front a{color:inherit;text-decoration:none}

/* faint grid texture (only on home) */
body.home::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.34;
  background-image:
    linear-gradient(90deg,rgba(36,56,47,.045) 1px,transparent 1px),
    linear-gradient(180deg,rgba(36,56,47,.035) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 74%);
          mask-image:linear-gradient(180deg,#000,transparent 74%);
}

.jt-front .jt-shell{
  width:min(1120px,calc(100% - 40px));
  margin:0 auto;
  position:relative;
  z-index:1;
}

/* --- Hero --- */
.jt-front .jt-hero{
  position:relative;
  isolation:isolate;
  min-height:610px;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--jt-line);
  background:
    linear-gradient(90deg,rgba(255,253,247,.99) 0%,rgba(255,253,247,.94) 30%,rgba(255,253,247,.62) 54%,rgba(255,253,247,.12) 78%),
    var(--jt-hero);
  background-size:auto,cover;
  background-position:center,right center;
}
.jt-front .jt-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg,rgba(255,253,247,.2),rgba(255,253,247,.82)),
    radial-gradient(circle at 68% 52%,transparent 0 16rem,rgba(24,32,38,.18) 35rem);
}
.jt-front .jt-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:110px;
  background:linear-gradient(180deg,transparent,var(--jt-paper));
  pointer-events:none;
}
.jt-front .jt-hero-copy{
  width:min(650px,100%);
  padding:92px 0 88px;
}
.jt-front .jt-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-bottom:22px;
  color:var(--jt-gold);
  font-family:var(--jt-font);
  font-size:12px;
  line-height:1.1;
  letter-spacing:.24em;
}
.jt-front .jt-eyebrow::before{content:"";width:46px;height:1px;background:var(--jt-gold)}
.jt-front .jt-hero h1{
  margin:0;
  font-family:var(--jt-font);
  font-weight:500;
  font-size:clamp(38px,5.4vw,64px);
  line-height:1.22;
  letter-spacing:.06em;
  line-break:strict;
  color:var(--jt-ink);
}
.jt-front .jt-line,
.jt-front .jt-phrase{display:inline-block;white-space:nowrap}
.jt-front .jt-wide-break{display:block}
.jt-front .jt-lead{
  width:min(540px,100%);
  margin:24px 0 0;
  color:#3c473f;
  font-family:var(--jt-font);
  font-size:16px;
  line-height:2;
  letter-spacing:.05em;
  line-break:strict;
  word-break:normal;
  overflow-wrap:normal;
  text-wrap:pretty;
}
.jt-front .jt-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:34px;
}
.jt-front .jt-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:50px;
  padding:0 22px;
  border:1px solid #cdbfaa;
  border-radius:4px;
  background:rgba(255,253,247,.86);
  color:var(--jt-deep);
  font-family:var(--jt-font);
  font-size:14px;
  letter-spacing:.08em;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.jt-front .jt-btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(36,56,47,.18)}
.jt-front .jt-btn-primary{
  border-color:var(--jt-deep);
  background:var(--jt-deep);
  color:#fff;
  box-shadow:0 16px 34px rgba(36,56,47,.22);
}
.jt-front .jt-btn-primary:hover{background:#1c2c25}
.jt-front .jt-trust-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  width:min(620px,100%);
  margin-top:34px;
}
.jt-front .jt-trust{
  min-height:86px;
  border:1px solid rgba(228,217,200,.9);
  border-radius:6px;
  background:rgba(255,253,247,.82);
  padding:15px 16px;
  box-shadow:0 14px 30px rgba(84,69,42,.08);
}
.jt-front .jt-trust strong{
  display:block;
  color:var(--jt-deep);
  font-family:var(--jt-font);
  font-size:16px;
  font-weight:500;
  letter-spacing:.08em;
}
.jt-front .jt-trust span{
  display:block;
  margin-top:7px;
  color:var(--jt-muted);
  font-size:12px;
  line-height:1.6;
  line-break:strict;
}

/* --- Section common --- */
.jt-front .jt-section{
  padding:72px 0;
  border-bottom:1px solid rgba(228,217,200,.72);
  background:rgba(255,253,247,.58);
}
.jt-front .jt-section-alt{background:rgba(244,239,228,.62)}
.jt-front .jt-section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:28px;
  margin-bottom:28px;
}
.jt-front .jt-label{
  color:var(--jt-gold);
  font-family:var(--jt-font);
  font-size:11px;
  line-height:1;
  letter-spacing:.25em;
}
.jt-front h2{
  margin:9px 0 0;
  font-family:var(--jt-font);
  font-weight:500;
  font-size:29px;
  line-height:1.42;
  letter-spacing:.07em;
  line-break:strict;
  color:var(--jt-ink);
}
.jt-front .jt-section-note{
  max-width:420px;
  color:var(--jt-muted);
  font-size:13px;
  line-height:1.85;
  line-break:strict;
  word-break:normal;
  overflow-wrap:normal;
  text-wrap:pretty;
}

/* --- Steps --- */
.jt-front .jt-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.jt-front .jt-step{
  position:relative;
  min-height:166px;
  border:1px solid var(--jt-line);
  border-radius:6px;
  background:rgba(255,253,247,.86);
  padding:24px 20px;
}
.jt-front .jt-step-num{
  color:var(--jt-gold);
  font-family:var(--jt-font);
  font-size:14px;
  line-height:1;
  letter-spacing:.18em;
}
.jt-front .jt-step h3{
  margin:24px 0 9px;
  font-family:var(--jt-font);
  font-weight:500;
  font-size:16px;
  letter-spacing:.06em;
  color:var(--jt-ink);
}
.jt-front .jt-step p{
  margin:0;
  color:var(--jt-muted);
  font-size:12px;
  line-height:1.75;
}
.jt-front .jt-step::after{
  content:"";
  position:absolute;
  top:24px;
  right:20px;
  width:24px;
  height:24px;
  border-top:1px solid var(--jt-gold);
  border-right:1px solid var(--jt-gold);
  opacity:.45;
}

/* --- Area --- */
.jt-front .jt-area-grid{
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:30px;
  align-items:stretch;
}
.jt-front .jt-area-panel{
  border:1px solid var(--jt-line);
  border-radius:6px;
  background:
    linear-gradient(135deg,rgba(255,253,247,.94),rgba(255,253,247,.72)),
    var(--jt-hero);
  background-size:auto,1200px auto;
  background-position:center,65% 64%;
  padding:30px;
}
.jt-front .jt-area-panel p{
  margin:18px 0 0;
  color:#485048;
  font-size:13px;
  line-height:1.9;
  line-break:strict;
  word-break:normal;
  overflow-wrap:normal;
  text-wrap:pretty;
}
.jt-front .jt-pref-list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  align-content:start;
}
.jt-front .jt-pref-list a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  border:1px solid #d9cbb8;
  border-radius:4px;
  background:rgba(255,253,247,.88);
  color:#344139;
  font-family:var(--jt-font);
  font-size:13px;
  letter-spacing:.06em;
  transition:.2s;
}
.jt-front .jt-pref-list a:hover{border-color:var(--jt-deep);color:var(--jt-deep)}
.jt-front .jt-pref-list a.jt-featured{background:var(--jt-deep);color:#fff;border-color:var(--jt-deep)}
.jt-front .jt-pref-list a.jt-all{
  grid-column:span 4;
  background:rgba(36,56,47,.04);
  border-style:dashed;
}

/* --- Cards --- */
.jt-front .jt-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.jt-front .jt-card{
  display:block;
  min-height:176px;
  border:1px solid var(--jt-line);
  border-radius:6px;
  background:#fffdf7;
  padding:24px;
  box-shadow:0 18px 34px rgba(84,69,42,.07);
  transition:transform .2s ease,box-shadow .2s ease;
}
.jt-front .jt-card:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 44px rgba(84,69,42,.12);
}
.jt-front .jt-card small{
  color:var(--jt-gold);
  font-family:var(--jt-font);
  font-size:12px;
  line-height:1;
  letter-spacing:.2em;
}
.jt-front .jt-card h3{
  margin:16px 0 9px;
  font-family:var(--jt-font);
  font-weight:500;
  font-size:18px;
  letter-spacing:.07em;
  color:var(--jt-ink);
}
.jt-front .jt-card p{
  margin:0;
  color:var(--jt-muted);
  font-size:13px;
  line-height:1.85;
}

/* --- Cost --- */
.jt-front .jt-cost-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.jt-front .jt-plan{
  border:1px solid #d9cbb8;
  border-radius:6px;
  background:linear-gradient(180deg,#fffdf7,#f8f2e7);
  padding:26px;
}
.jt-front .jt-plan h3{
  margin:0 0 16px;
  font-family:var(--jt-font);
  font-weight:500;
  font-size:18px;
  letter-spacing:.07em;
  color:var(--jt-ink);
}
.jt-front .jt-price{
  padding:14px 0;
  border-top:1px solid var(--jt-line);
  border-bottom:1px solid var(--jt-line);
  color:var(--jt-green);
  font-family:var(--jt-font);
  font-size:32px;
  letter-spacing:.02em;
}
.jt-front .jt-price span{font-size:14px;color:var(--jt-muted)}
.jt-front .jt-plan p{
  margin:16px 0 0;
  color:var(--jt-muted);
  font-size:12px;
  line-height:1.8;
  line-break:strict;
  word-break:normal;
  overflow-wrap:normal;
  text-wrap:pretty;
}

/* --- CTA --- */
.jt-front .jt-cta{
  position:relative;
  overflow:hidden;
  padding:58px;
  border:1px solid #74835f;
  border-radius:6px;
  background:
    linear-gradient(90deg,rgba(36,56,47,.92),rgba(36,56,47,.72)),
    var(--jt-hero);
  background-size:auto,cover;
  background-position:center,right 58%;
  color:#fff;
}
.jt-front .jt-cta h2{
  max-width:680px;
  margin:0;
  color:#fff;
  font-size:30px;
}
.jt-front .jt-cta p{
  max-width:620px;
  margin:18px 0 28px;
  color:rgba(255,255,255,.84);
  font-size:14px;
  line-height:1.9;
}
.jt-front .jt-cta .jt-btn{
  background:#fffdf7;
  color:var(--jt-deep);
  border-color:#fffdf7;
}
.jt-front .jt-cta .jt-btn:hover{background:#fff}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  .jt-front .jt-shell{width:min(100% - 28px,680px)}
  /* SP: 画像をテキストの背景に配置 + 白ベールで視認性確保 */
  .jt-front .jt-hero{
    min-height:auto;
    display:block;
    background:
      linear-gradient(180deg,
        rgba(255,253,247,.55) 0%,
        rgba(255,253,247,.78) 35%,
        rgba(255,253,247,.92) 70%,
        rgba(255,253,247,.98) 100%
      ),
      var(--jt-hero) center 25% / cover no-repeat !important;
    padding:0;
  }
  .jt-front .jt-hero::before{display:none}
  .jt-front .jt-hero::after{
    display:block;
    height:60px;
  }
  .jt-front .jt-hero-copy{padding:48px 0 64px}
  .jt-front .jt-lead{font-size:15px;line-height:1.95}
  .jt-front .jt-trust-row,
  .jt-front .jt-steps,
  .jt-front .jt-cards,
  .jt-front .jt-cost-grid,
  .jt-front .jt-area-grid{grid-template-columns:1fr}
  .jt-front .jt-section{padding:54px 0}
  .jt-front .jt-section-head{display:block}
  .jt-front .jt-section-note{margin-top:14px}
  .jt-front .jt-pref-list{grid-template-columns:repeat(2,1fr)}
  .jt-front .jt-pref-list a.jt-all{grid-column:span 2}
  .jt-front .jt-cta{padding:38px 24px}
  .jt-front .jt-cta h2{font-size:25px;line-height:1.5}
}
@media (max-width:520px){
  .jt-front .jt-hero-actions .jt-btn{width:100%}
  .jt-front .jt-trust{min-height:auto}
  .jt-front .jt-hero h1{font-size:35px;line-height:1.28}
  .jt-front h2{font-size:24px;line-height:1.5}
  .jt-front .jt-wide-break{display:none}
  .jt-front .jt-btn{height:48px}
  .jt-front .jt-trust strong{font-size:15px}
  .jt-front .jt-step h3,
  .jt-front .jt-card h3,
  .jt-front .jt-plan h3{font-size:17px}
}