:root{
  --bg:#0a0f16; --bg2:#0e1620; --panel:#0e1620; --line:#1d2a3a;
  --text:#f2f5f7; --muted:#8a97a5; --accent:#c73e4b; --gold:#c9a86a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Zen Kaku Gothic New","Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-weight:300;line-height:1.9}
.serif{font-family:"Shippori Mincho","Yu Mincho","Hiragino Mincho ProN",serif;font-weight:500}
.lat{font-family:Marcellus,Georgia,serif}
a{color:var(--gold)}

/* nav */
nav.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 28px;background:linear-gradient(180deg,#0a0f16f2,#0a0f16d8);backdrop-filter:blur(10px);border-bottom:1px solid #1d2a3a66}
.nav-brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--text);flex-shrink:0}
.nav-brand img{height:26px;width:auto;align-self:center}
.nav-brand .k{font-family:"Shippori Mincho","Yu Mincho",serif;font-size:21px;letter-spacing:5px;font-weight:600}
.nav-brand .l{font-family:Marcellus,Georgia,serif;font-size:10px;letter-spacing:4px;color:var(--gold)}
.nav-links{display:flex;gap:26px;overflow-x:auto;scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{color:#cbd5df;text-decoration:none;font-size:12.5px;letter-spacing:2.5px;white-space:nowrap;padding:4px 0}
.nav-links a:hover{color:var(--text)}
.nav-links a.on{color:var(--text);border-bottom:1px solid var(--gold)}
.langs{display:flex;gap:14px;flex-shrink:0}
.langs a{color:#66727f;text-decoration:none;font-size:11.5px;letter-spacing:1px}
.langs a.on{color:var(--gold)}
/* メニューが7項目あるので、1段に収まらない幅では 2段（ロゴ＋言語 / メニュー）にする */
@media (max-width:1080px){
  nav.top{flex-wrap:wrap;row-gap:6px}
  .nav-links{order:3;width:100%;gap:22px}
}
@media (max-width:720px){
  nav.top{padding:12px 16px 8px}
  .nav-links{gap:18px}
  .nav-links a{letter-spacing:1.5px;font-size:12px}
  .langs{gap:12px}
}

/* hero */
.hero{position:relative;display:flex;align-items:center;overflow:hidden;background:var(--bg)}
.hero.tall{min-height:86vh}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hero .bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:reduce){.hero .bg video{display:none}}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0a0f166b 0%,#0a0f1640 40%,#0a0f16 100%)}
.hero-inner{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:72px 24px;display:flex;align-items:center;gap:48px;width:100%}
.hero-inner.center{flex-direction:column;text-align:center;justify-content:center}
.hero-text{flex:1;min-width:0}
.badge{display:inline-block;font-family:Marcellus,Georgia,serif;font-size:11.5px;letter-spacing:7px;color:var(--gold);margin-bottom:26px;text-transform:uppercase}
h1{margin:0 0 18px;font-family:"Shippori Mincho","Yu Mincho",serif;font-size:clamp(30px,4.8vw,56px);line-height:1.5;font-weight:500;letter-spacing:4px;text-shadow:0 4px 40px #000a}
.hero-sub{font-size:clamp(14px,1.8vw,16.5px);color:#cbd5df;max-width:600px;margin:0 0 34px;letter-spacing:1.5px}
.hero-inner.center .hero-sub{margin-inline:auto}
.cta{display:inline-block;background:#f2f5f7;color:#0a0f16;text-decoration:none;
  padding:15px 44px;font-size:13px;letter-spacing:4px;font-weight:500}
.cta.ghost{background:transparent;border:1px solid #f2f5f766;color:var(--text);margin-left:12px}
.hero-art{display:none}
@media (max-width:720px){
  .hero-inner{flex-direction:column;text-align:center;padding-top:48px}
  .hero-sub{margin-inline:auto}
  .cta.ghost{margin-left:0;margin-top:12px}
}

/* sections */
section{max-width:1100px;margin:0 auto;padding:84px 24px}
h2{font-family:"Shippori Mincho","Yu Mincho",serif;font-size:clamp(22px,3vw,30px);margin:0 0 10px;letter-spacing:4px;font-weight:500}
.h2-sub{font-family:Marcellus,Georgia,serif;color:var(--gold);font-size:11px;letter-spacing:5px;text-transform:uppercase;margin-bottom:28px}
.lead{color:var(--muted);max-width:760px;font-size:15px;margin:0 0 14px;letter-spacing:.5px}
.lead b,.card p b{color:var(--text)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:30px}
.card{background:transparent;border-top:1px solid var(--gold);padding:22px 2px 0;text-decoration:none;display:block}
.card .num{font-family:Marcellus,Georgia,serif;font-size:11px;color:var(--gold);letter-spacing:3px}
.card h3{margin:10px 0 8px;font-family:"Shippori Mincho","Yu Mincho",serif;font-size:18px;letter-spacing:2px;font-weight:500;color:var(--text)}
.card p{margin:0;color:var(--muted);font-size:13.5px}
.card .soon-tag{display:inline-block;font-size:10.5px;color:var(--gold);border:1px solid #c9a86a55;padding:2px 12px;margin-top:14px;letter-spacing:2px}
.card.tile{border-top:none;padding:0;position:relative;overflow:hidden}
.card.tile img{width:100%;height:250px;object-fit:cover;display:block}
.card.tile .tbody{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,#0a0f16d9,transparent);padding:52px 20px 16px}
.card.tile .tbody h3{margin:0 0 2px}
.card.tile .tbody p{display:none}
.card.tile .num{display:none}
/* 行き先のタイルは、名前の下に短い説明(世界自然遺産 など)を出す */
.cards.places .card.tile .num{display:block;font-family:inherit;font-size:12px;letter-spacing:2px;margin-top:4px}
.cards.places .card.tile .tbody h3{font-size:22px}
.alt{background:transparent;border-block:1px solid #1d2a3a66}
.alt-inner{max-width:1100px;margin:0 auto;padding:84px 24px}

/* lists / steps */
.steps{display:flex;flex-direction:column;gap:0;margin:26px 0 0;padding:0;list-style:none;max-width:780px}
.steps li{border-bottom:1px solid var(--line);padding:20px 4px;color:var(--muted);font-size:14px;letter-spacing:.5px}
.steps li b{color:var(--text);display:block;margin-bottom:4px;font-family:"Shippori Mincho","Yu Mincho",serif;font-size:15.5px;letter-spacing:2px;font-weight:500}
.faq{max-width:780px;margin-top:24px}
.faq details{border-bottom:1px solid var(--line);padding:16px 4px}
.faq summary{cursor:pointer;color:var(--text);font-size:14.5px;letter-spacing:1px}
.faq p{color:var(--muted);font-size:13.5px;margin:12px 0 0}

/* contact */
.contact-box{border:1px solid var(--line);padding:64px 32px;text-align:center;background:linear-gradient(180deg,var(--bg2),var(--bg))}
.handles{margin-top:26px;color:var(--muted);font-size:13px;letter-spacing:1px}
.handles b{color:var(--text);letter-spacing:2px}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:30px}
.gallery figure{margin:0;position:relative;overflow:hidden}
@media (min-width:721px){.gallery.two{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery.two img{height:340px}}
.gallery img{width:100%;height:280px;object-fit:cover;display:block}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,#0a0f16d9,transparent);
  padding:44px 18px 12px;font-family:Marcellus,Georgia,serif;font-size:11px;color:#cbd5df;letter-spacing:2.5px}

/* film samples */
.films{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px;max-width:900px}
.films figure{margin:0}
.films .yt,.films iframe{display:block;position:relative;width:100%;aspect-ratio:9/16;border:0;background:var(--bg2);overflow:hidden}
.films .yt img{width:100%;height:100%;object-fit:cover;display:block}
.films .play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border:1px solid #f2f5f7cc;border-radius:50%;background:#0a0f1699}
.films .play::after{content:"";position:absolute;left:23px;top:18px;border-style:solid;border-width:11px 0 11px 17px;border-color:transparent transparent transparent #f2f5f7}
.films .yt:hover .play,.films .yt:focus-visible .play{background:#0a0f16d9;border-color:var(--gold)}
.films figcaption{font-family:Marcellus,Georgia,serif;font-size:11px;color:#cbd5df;letter-spacing:2.5px;padding:10px 2px 0}
@media (max-width:720px){.films{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/* journal */
.post{max-width:760px;margin:0 auto;padding:64px 24px}
.post h1{font-size:clamp(26px,4vw,40px);text-shadow:none;letter-spacing:2px}
.post h2{margin-top:48px;font-size:23px;letter-spacing:2px}
.post p,.post li{color:var(--muted);font-size:15px}
.post .meta{font-family:Marcellus,Georgia,serif;color:var(--gold);font-size:11px;letter-spacing:3px;margin-bottom:20px}
.post strong{color:var(--text)}
.post .tip{border:1px solid var(--line);border-left:2px solid var(--gold);padding:16px 20px;font-size:13.5px}
.post img{width:100%;height:auto;display:block;margin:10px 0 4px}
.post .imgcap{font-family:Marcellus,Georgia,serif;font-size:11px;color:#66727f;letter-spacing:2px;margin:4px 0 20px}
.postlist{display:flex;flex-direction:column;gap:0;margin-top:24px}
.postlist a{display:block;border-bottom:1px solid var(--line);padding:22px 4px;text-decoration:none}
.postlist a b{color:var(--text);font-family:"Shippori Mincho","Yu Mincho",serif;font-size:17px;letter-spacing:1px;display:block;margin-bottom:6px;font-weight:500}
.postlist a span{color:var(--muted);font-size:13px}

footer{border-top:1px solid var(--line);padding:34px 28px 48px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;color:#66727f;font-size:11.5px;letter-spacing:1.5px;line-height:2;text-align:left}
footer a{color:#66727f}
@media (max-width:720px){footer{flex-direction:column;text-align:center}}

/* タイ語(2026-10-09 追加): タイ文字は Zen Kaku Gothic / Shippori Mincho に無いので Noto Thai を先に当てる。字間は詰める */
html[lang="th"] body{font-family:"Noto Sans Thai","Zen Kaku Gothic New",sans-serif;line-height:1.85}
html[lang="th"] .serif{font-family:"Noto Serif Thai","Shippori Mincho",serif}
html[lang="th"] :not(.nav-brand, .nav-brand *, .lat){letter-spacing:normal!important}  /* 字間を空けるとタイ文字の母音・声調記号がばらけて読みにくい */

/* 墨絵の挿絵(雪鶴の由来など)。縁はぼかして背景に溶かす */
.art-split{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.art-text{min-width:0}
.art-img img,.art-img video{width:100%;max-width:100%;display:block;
  -webkit-mask-image:radial-gradient(ellipse 70% 68% at 50% 50%,#000 55%,transparent 100%);
  mask-image:radial-gradient(ellipse 70% 68% at 50% 50%,#000 55%,transparent 100%);
  animation:art-float 9s ease-in-out infinite}
.art-img video{animation:none}
@keyframes art-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.art-img .art-still{display:none}
@media (prefers-reduced-motion:reduce){.art-img img{animation:none}.art-img video{display:none}.art-img .art-still{display:block}}
.card-art{display:block;width:100%;max-width:100%;margin:0 0 14px;aspect-ratio:4/3;object-fit:cover;
  -webkit-mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,#000 50%,transparent 100%);
  mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,#000 50%,transparent 100%)}
@media (max-width:800px){.art-split{grid-template-columns:1fr}.art-img{order:-1;max-width:520px;margin:0 auto}}
.cards:has(.card-art){grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.cards:has(> :nth-child(8):last-child){grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.card .card-more{display:inline-block;margin-top:10px;color:var(--gold);font-size:18px;transition:transform .2s}
a.card:hover .card-more{transform:translateX(4px)}