/* =========================================================
   AOgiri Forest — スタイルシート
   色を変えたいときは、下の :root の値を書き換えます。
   ========================================================= */
:root{
  color-scheme:light;
  --forest:#274EA2;--forest-2:#1A3D8B;--forest-deep:#001F65;
  --moss:#5B84A8;--moss-light:#AEDCE8;--leaf-tint:#E3F3F7;
  --ivory:#F4F9FB;--kinari:#E8F1F5;--beige:#BFD6E3;--paper:#FBFDFE;
  --line:#D3E3EA;--ph:#CFE0E8;--ph-2:#D7E6ED;--ph-ink:#7E9AAA;
  --ink:#22303B;--ink-2:#3F5867;--ink-3:#5A7481;--clay:#B15A2E;
  --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --gothic:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --serif-en:"Cormorant Garamond","Times New Roman",serif;
  --viet:"Be Vietnam Pro",var(--gothic);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* ---------- 言語ごとのフォント ---------- */
/* ラテン文字の言語（ベトナム語・スペイン語・ポルトガル語・フランス語・ドイツ語） */
html:is([lang="vi"],[lang="es"],[lang="pt"],[lang="fr"],[lang="de"]) body{font-family:var(--viet)}
html:is([lang="vi"],[lang="es"],[lang="pt"],[lang="fr"],[lang="de"]) :is(.h2,.h3,.pname,.quote,.hero h1,.msg p){font-family:var(--viet);font-weight:600;letter-spacing:.02em}
/* 繁体字中国語・韓国語・タイ語（フォントは選んだときだけ読み込み） */
html[lang="zh-Hant"] body{font-family:"Noto Sans TC",var(--gothic)}
html[lang="zh-Hant"] :is(.h2,.h3,.pname,.quote,.hero h1,.msg p){font-family:"Noto Serif TC",var(--mincho)}
html[lang="ko"] body{font-family:"Noto Sans KR",var(--gothic);word-break:keep-all}
html[lang="ko"] :is(.h2,.h3,.pname,.quote,.hero h1,.msg p){font-family:"Noto Serif KR",var(--mincho)}
html[lang="th"] body{font-family:"Noto Sans Thai",var(--gothic);letter-spacing:0;line-height:2}
html[lang="th"] :is(.h2,.h3,.pname,.quote,.hero h1,.msg p){font-family:"Noto Serif Thai","Noto Sans Thai",serif;letter-spacing:0}
/* 長い単語がはみ出さないように（ドイツ語など） */
html:is([lang="de"],[lang="fr"],[lang="es"],[lang="pt"]) :is(.h2,.h3,.hero h1,.btn){hyphens:auto;overflow-wrap:anywhere}
body{margin:0;background:linear-gradient(90deg,#7794b6,#dffaff);color:var(--ink);font-family:var(--gothic);font-size:15px;line-height:1.9;letter-spacing:.04em;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--forest)}
a:focus-visible,button:focus-visible{outline:2px solid var(--moss);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding-inline:48px}
.sec{padding-block:140px}
.sec-tight-top{padding-top:0}
.pre{white-space:pre-line}
.en{font-family:var(--serif-en);font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:var(--moss)}
.h2{font-family:var(--mincho);font-weight:500;font-size:38px;line-height:1.6;letter-spacing:.08em;color:var(--forest);margin:14px 0 0;text-wrap:balance}
.lead{font-size:16px;line-height:2.2;color:var(--ink-2);margin:0;max-width:40em}
.lead-narrow{max-width:460px}
.muted{color:var(--ink-3)}
.stack{display:flex;flex-direction:column;gap:20px;margin-top:36px}
.story{gap:28px}
.story-title{font-size:clamp(24px,2.6vw,32px)}
html[lang="ja"] .story-title{word-break:keep-all}
.story-sign{font-family:var(--mincho);font-size:22px;color:var(--forest);letter-spacing:.08em;margin-top:12px}
.center{text-align:center}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- header ---------- */
.head{position:sticky;top:0;z-index:20;background:rgba(244,249,251,.95);border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.head-in{display:flex;align-items:center;justify-content:space-between;height:76px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--forest)}
.logo-t{white-space:nowrap;font-family:var(--serif-en);font-size:24px;letter-spacing:.06em;font-weight:500;line-height:1.1;display:block}
.logo-s{font-size:10px;letter-spacing:.2em;color:var(--ink-3);display:block;line-height:1.4}
.nav{display:flex;gap:28px;align-items:center}
.nav a.nl{text-decoration:none;color:var(--ink);font-family:var(--serif-en);font-size:15px;letter-spacing:.14em}
.nav a.nl:hover{color:var(--moss)}
.langsw{position:relative;display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:0 10px 0 12px;color:var(--ink-3);background:var(--paper)}
.langsw:focus-within{outline:2px solid var(--moss);outline-offset:2px}
.langsw select{appearance:none;-webkit-appearance:none;border:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235A7481' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right center;padding:0 16px 0 0;min-height:36px;font:inherit;font-family:var(--gothic);font-size:13px;letter-spacing:.04em;color:var(--ink);cursor:pointer;outline:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 30px;border-radius:999px;text-decoration:none;font-family:var(--gothic);font-size:14px;letter-spacing:.12em;border:1px solid var(--forest);cursor:pointer;transition:background .2s,color .2s}
.btn-p{background:var(--forest);color:var(--ivory)}.btn-p:hover{background:var(--forest-2);color:var(--ivory)}
.btn-o{background:transparent;color:var(--forest)}.btn-o:hover{background:var(--forest);color:var(--ivory)}
.btn-l{background:var(--ivory);color:var(--forest);border-color:var(--ivory)}.btn-l:hover{background:var(--kinari)}
.btn-lo{background:transparent;color:var(--ivory);border-color:rgba(244,249,251,.7)}.btn-lo:hover{background:var(--ivory);color:var(--forest)}
.btn-s{min-height:44px;padding:0 22px;font-size:13px}
.btn-block{width:100%}
.btn[disabled]{opacity:.6;cursor:wait}
.cta{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- hero ---------- */
.hero{position:relative;min-height:760px;background:var(--forest-deep);color:var(--ivory);overflow:hidden;display:flex;align-items:flex-end}
/* ヒーロー写真を入れるとき：.hero-bg に background-image を指定し、.hero-ph と .hero-cap を削除します */
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,31,101,.15),rgba(0,31,101,.65))}
.hero-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(244,249,251,.14)}
.hero-ph svg{width:min(520px,80vw);height:auto}
.hero-cap{position:absolute;right:24px;top:24px;font-size:11px;letter-spacing:.14em;color:rgba(244,249,251,.66);border:1px dashed rgba(244,249,251,.4);padding:6px 12px;border-radius:4px}
.hero-in{position:relative;padding-block:160px 120px;width:100%}
/* ヒーロー右上のロゴ（文字を白く調整した版） */
.hero-logo{position:absolute;right:24px;top:24px;z-index:1;width:clamp(200px,34vw,480px);height:auto}
.hero .en{color:var(--moss-light)}
.hero h1{font-family:var(--mincho);font-weight:500;font-size:58px;line-height:1.55;letter-spacing:.1em;margin:22px 0 28px}
.hero p{font-size:17px;line-height:2.2;margin:0 0 48px;color:#D9EBF2}

/* ---------- photo placeholder ----------
   実際の写真に差し替えるときは <div class="ph ..."> 全体を
   <img class="photo ratio-1x1" src="images/xxx.jpg" alt="説明"> に置き換えます */
.ph{position:relative;background:var(--ph);border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--ph-ink);max-width:100%}
.ph-cap{position:absolute;left:12px;bottom:12px;right:12px;width:fit-content;font-size:11px;letter-spacing:.1em;color:var(--ink-3);background:rgba(244,249,251,.88);padding:4px 10px;border-radius:3px;line-height:1.6}
.photo{display:block;width:100%;object-fit:cover;border-radius:4px}
.ratio-4x5{aspect-ratio:4/5}.ratio-1x1{aspect-ratio:1/1}.ratio-3x2{aspect-ratio:3/2}.ratio-4x3{aspect-ratio:4/3}
.pcard .ph{background:var(--ph-2)}

.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:96px;align-items:center}
.split-top{align-items:start}
.pad-top{padding-top:44px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}

/* ---------- values ---------- */
.sec-title{text-align:center;margin-bottom:64px}
.vcard{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:48px 40px}
.vcard p{margin:0}
.vicon{width:56px;height:56px;border-radius:50%;background:var(--leaf-tint);color:var(--forest);display:flex;align-items:center;justify-content:center;margin-bottom:28px}
.vlabel{font-family:var(--serif-en);font-size:14px;letter-spacing:.2em;color:var(--moss)}
.h3{font-family:var(--mincho);font-weight:500;font-size:22px;letter-spacing:.08em;color:var(--forest);margin:6px 0 16px;line-height:1.6}

.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:56px;flex-wrap:wrap}

/* ---------- products ---------- */
.bg-kinari{background:var(--kinari)}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:44px}
.pill{min-height:44px;padding:0 20px;border-radius:999px;border:1px solid #B9D0DC;background:transparent;color:var(--ink);font-family:var(--serif-en);font-size:14px;letter-spacing:.14em;cursor:pointer}
.pill:hover{border-color:var(--forest)}
.pill[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:var(--ivory)}
.pcard{display:flex;flex-direction:column;gap:18px}
.pcard .desc{margin:0 0 14px;font-size:14px}
.tag{font-family:var(--serif-en);font-size:13px;letter-spacing:.18em;color:var(--moss)}
.pname{font-family:var(--mincho);font-weight:500;font-size:19px;color:var(--forest);margin:2px 0 6px;letter-spacing:.06em;line-height:1.6}
.more{font-size:13px;letter-spacing:.12em;text-decoration:none;border-bottom:1px solid var(--forest);padding-bottom:2px;color:var(--forest)}
.empty{text-align:center;padding-block:40px;color:var(--ink-3)}

/* ---------- co-creation ---------- */
.band{background:var(--forest);color:var(--ivory)}
.band .en{color:var(--moss-light)}
.band .h2{color:var(--ivory)}
.band .lead{color:#DCEAF0}
.forms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(244,249,251,.18);border:1px solid rgba(244,249,251,.18);border-radius:6px;overflow:hidden;margin:64px 0 56px}
.form-i{background:var(--forest);padding:36px 30px}
.form-i .h3{color:var(--ivory);font-size:20px}
.form-i p{margin:0;font-size:14px;line-height:2;color:#C7DEE8}

/* ---------- makers ---------- */
.maker{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center;padding-block:56px;border-top:1px solid var(--line)}
.maker .pname{font-size:17px}
.maker .desc{margin:0 0 18px;font-size:14px}
.quote{font-family:var(--mincho);font-size:24px;line-height:1.9;color:var(--forest);letter-spacing:.06em;margin:18px 0 22px}

/* ---------- business ---------- */
.svc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin:56px 0}
.svc-i{background:var(--ivory);border-radius:6px;padding:32px 26px;border:1px solid #D3E4EB}
.svc-i svg{color:var(--moss)}
.svc-i .h3{font-size:18px;margin:16px 0 10px}
.svc-i p{margin:0;font-size:13px;line-height:2;color:var(--ink-2)}
.who{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.chip{font-size:13px;letter-spacing:.08em;padding:6px 16px;border-radius:999px;background:var(--ivory);border:1px solid var(--beige);color:var(--ink-2)}

/* ---------- journal ---------- */
.jcard{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--ink)}
.jcard:hover .pname{color:var(--moss)}
.jcard .pname{margin:0}
.jmeta{display:flex;gap:14px;align-items:center;font-size:12px;letter-spacing:.14em;color:var(--ink-3)}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:88px}
.contact .lead{margin-top:28px}
.topics{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--line)}
.topics li{padding:16px 0;border-bottom:1px solid var(--line);font-size:15px}
.fbox{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:48px}
.frow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.field label{font-size:13px;letter-spacing:.1em;color:var(--ink-2)}
.req{font-size:11px;color:var(--clay);margin-left:6px}
.field input,.field select,.field textarea{font:inherit;font-size:16px;min-height:50px;padding:12px 16px;border:1px solid #B9D0DC;border-radius:4px;background:var(--ivory);color:var(--ink);width:100%}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--moss);outline-offset:1px}
.field [aria-invalid="true"]{border-color:var(--clay)}
.consent{display:flex;gap:12px;align-items:flex-start;margin:4px 0 26px;font-size:14px;line-height:1.8;color:var(--ink-2)}
.consent input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--forest)}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.fnote{margin:16px 0 0;font-size:14px;line-height:1.9;color:var(--forest);background:var(--leaf-tint);padding:14px 18px;border-radius:4px}
.fnote.is-error{color:#8A3A16;background:#FBEDE6}
.fnote.is-success{color:#1F5A3A;background:#E4F4EA}

/* ---------- message & footer ---------- */
.msg{background:var(--forest);color:var(--ivory);text-align:center}
.msg p{font-family:var(--mincho);font-size:26px;line-height:2.3;letter-spacing:.12em;margin:28px 0 0}
.foot{background:var(--forest-deep);color:#B7CCD9;padding-block:72px 40px;font-size:13px}
.foot-in{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot .logo-t{color:var(--ivory)}
.foot-addr{margin:10px 0 0;line-height:2}
.foot a{color:#B7CCD9;text-decoration:none;font-family:var(--serif-en);letter-spacing:.14em;font-size:14px}
.foot a:hover{color:var(--ivory)}
.fnav{display:grid;grid-template-columns:repeat(3,auto);gap:12px 40px}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:56px 0 0;font-size:12px;letter-spacing:.12em;color:#90A8B5}
.foot-bottom a{font-family:var(--gothic);font-size:12px;letter-spacing:.08em}

/* ---------- privacy page ---------- */
.doc{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:64px 72px;max-width:880px;margin:0 auto}
.doc h1{font-family:var(--mincho);font-weight:500;font-size:32px;letter-spacing:.08em;color:var(--forest);margin:12px 0 32px;line-height:1.6}
.doc h2{font-family:var(--mincho);font-weight:500;font-size:20px;color:var(--forest);margin:48px 0 12px;letter-spacing:.06em;padding-bottom:8px;border-bottom:1px solid var(--line)}
.doc p,.doc li{color:var(--ink-2)}
.doc ul,.doc ol{padding-left:1.4em}
.doc .meta{margin-top:56px;text-align:right;color:var(--ink-3);font-size:14px}
.ph-text{background:#FFF3C9;padding:0 4px;border-radius:2px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .svc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .forms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav a.nl{display:none}
  .split,.contact{gap:56px}
}
@media (max-width:760px){
  body{font-size:14px}
  .wrap{padding-inline:16px}
  .sec{padding-block:88px}
  .sec-tight-top{padding-top:0}
  .h2{font-size:26px}
  .lead{font-size:15px;line-height:2.1}
  .head-in{height:64px;gap:8px}
  .logo-t{font-size:20px}
  .logo-s{display:none}
  .nav{gap:8px}
  .langsw{padding:0 8px 0 10px}
  .langsw svg{display:none}
  .langsw select{font-size:12px;max-width:96px}
  .nav .btn-s{padding:0 14px;font-size:12px;letter-spacing:.04em}
  .hero{min-height:600px}
  .hero-logo{right:16px;top:16px;width:min(62vw,260px)}
  .hero-in{padding-block:140px 72px}
  .hero h1{font-size:30px;line-height:1.7;letter-spacing:.06em}
  .hero p{font-size:15px}
  .cta .btn{width:100%}
  .pad-top{padding-top:0}
  .split,.contact,.maker{grid-template-columns:minmax(0,1fr);gap:40px}
  .g3{grid-template-columns:minmax(0,1fr);gap:40px}
  .svc,.forms{grid-template-columns:minmax(0,1fr)}
  .frow{grid-template-columns:minmax(0,1fr);gap:0}
  .fbox{padding:28px 20px}
  .vcard{padding:36px 28px}
  .quote{font-size:20px}
  .msg p{font-size:17px;line-height:2.2;letter-spacing:.06em}
  .maker{padding-block:40px}
  .fnav{grid-template-columns:repeat(2,auto)}
  .doc{padding:36px 20px}
  .doc h1{font-size:24px}
}
@media (max-width:440px){
  .nav .btn-s{display:none}
}