/* ============================================================
   三日（MIKKA）── 英語・中国語・タイ語ページの見た目
   ★色は本体サイト（_公開用_craft）の黒地・金に合わせています。
   ★タイ語は行の高さを広めに取らないと、上下の記号が切れます。
   ============================================================ */
:root{
  /* ★2026-09-21：日本語の本体サイト（_公開用_craft）と同じ配色に合わせた。
     別サイトに見えると、日本語ページと行き来したときに損をするため。
     地 #080c11／文字 #adbec4／見出し #eed7ad／差し色 #cdbb91（金） */
  --ink:#adbec4;      /* 本文 */
  --head:#eed7ad;     /* 見出し */
  --bg:#080c11;       /* 地 */
  --bg2:#0d1219;      /* 一段明るい面 */
  --sub:#7d7057;      /* 補足 */
  --line:#293e3040;   /* 罫線 */
  --accent:#cdbb91;   /* 差し色・リンク（金） */
  --accent-d:#e3ce9d;
  --maxw:980px; --pad:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:70px}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro JP","Hiragino Sans",
    "Noto Sans JP","Noto Sans SC","Noto Sans Thai",sans-serif;
  color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;
  line-height:1.8;letter-spacing:.01em;
}
/* ★タイ語は声調記号が上下に伸びるので、行間を広く取る */
html[lang="th"] body{line-height:2.05}
html[lang="th"] h1,html[lang="th"] h2,html[lang="th"] h3{line-height:1.55}
a{color:var(--accent-d);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.wrap.narrow{max-width:700px}
section{padding:64px 0}
section.grey{background:var(--bg2)}
h1{font-size:clamp(30px,6vw,50px);line-height:1.3;letter-spacing:.01em;font-weight:500;color:#fff}
h2{font-size:clamp(21px,3.6vw,28px);line-height:1.5;margin-bottom:16px;font-weight:500;color:#fff}
h2.mt{margin-top:46px}
h3{font-size:16px;margin:30px 0 10px;font-weight:500;color:var(--head)}
p{margin-bottom:14px}
.small{font-size:13px;color:var(--sub);line-height:1.8}
.eyebrow{font-size:11px;letter-spacing:.2em;color:var(--accent);margin-bottom:14px;
  text-transform:uppercase}

/* ナビ・言語切替 */
nav{position:sticky;top:0;z-index:50;background:rgba(8,12,17,.9);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid rgba(205,187,145,.16)}
.nav-in{height:56px;display:flex;align-items:center;gap:16px}
.brand{font-size:18px;font-weight:500;color:#fff;white-space:nowrap}
.brand span{font-size:10px;letter-spacing:.14em;color:var(--sub);margin-left:5px}
.lang{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap;align-items:center}
.lang a{font-size:12px;color:var(--ink);opacity:.66;padding:6px 9px;border-radius:980px;
  white-space:nowrap;line-height:1.4}
.lang a:hover{opacity:1;text-decoration:none;background:rgba(205,187,145,.12)}
.lang a[aria-current]{opacity:1;background:var(--accent);color:#0d1219}
footer .lang{margin:18px 0 0;justify-content:flex-start}
footer .lang a{color:var(--ink);opacity:.7}
footer .lang a:hover{background:rgba(205,187,145,.12)}

/* ヒーロー */
.hero{padding:78px 0 66px;background:var(--bg);border-bottom:1px solid var(--line);color:var(--ink)}
.hero .eyebrow{color:var(--accent)}
.hero .lede{font-size:clamp(15px,2.6vw,18px);margin:22px 0 28px;max-width:680px}
.hero .lede b{font-weight:500;color:var(--head)}
.hero .small{color:var(--sub)}

.btn{display:inline-block;background:transparent;color:var(--accent) !important;
  border:1px solid var(--accent);border-radius:980px;padding:14px 32px;font:inherit;
  font-size:15px;font-weight:500;cursor:pointer;margin:6px 0 8px;line-height:1.4}
.btn:hover{background:var(--accent);color:#0d1219 !important;text-decoration:none}

/* 料金カード */
.cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin:26px 0 12px}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:26px}
.card.accent{border-color:var(--accent)}
.ct{font-size:15px;font-weight:500;margin-bottom:6px;color:#fff}
.ct small{display:block;font-size:12px;font-weight:400;color:var(--sub);margin-top:3px}
.cp{font-size:27px;font-weight:500;color:var(--head);margin:10px 0 4px;line-height:1.3}
.cd{font-size:12px;color:var(--sub);margin-bottom:12px}
.card p:last-child{margin-bottom:0;font-size:14px}

.two{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:34px}
ul{list-style:none}
.tick li,.cross li{position:relative;padding-left:26px;margin-bottom:8px;font-size:15px}
.tick li:before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:500}
.cross li:before{content:"×";position:absolute;left:0;color:var(--sub);font-weight:700}

/* 流れ */
.flow{list-style:none;counter-reset:s;margin-top:22px}
.flow li{display:flex;gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}
.flow .n{font-size:13px;font-weight:700;color:var(--accent);padding-top:3px;min-width:26px}
.flow h3{margin:0 0 4px;font-size:16px}
.flow p{margin:0;font-size:14px;color:var(--sub)}

/* フォーム */
.form{max-width:600px;margin-top:20px}
.form label{display:block;font-size:13px;color:var(--sub);margin:16px 0 6px}
.form input,.form textarea{width:100%;font:inherit;font-size:16px;color:#e8ece8;
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--bg2)}
.form input:focus,.form textarea:focus{outline:2px solid var(--accent);outline-offset:1px;
  border-color:transparent}
.form textarea{min-height:130px;resize:vertical}
.req{color:var(--accent);font-size:11px;margin-left:5px}
.hp{position:absolute;left:-9999px}

footer{background:var(--bg);border-top:1px solid var(--line);color:var(--sub);
  padding:44px 0 36px;font-size:13px;line-height:1.85}
footer .legal{color:var(--sub);font-size:12.5px}
footer .links{margin-top:14px}
footer .links a{color:var(--accent)}

@media(max-width:760px){
  section{padding:48px 0}
  .hero{padding:52px 0 46px}
  .nav-in{height:auto;padding-top:10px;padding-bottom:10px;flex-wrap:wrap;gap:6px}
  .lang{margin-left:auto}
  .lang a{padding:5px 7px;font-size:11px}
}