/* amsel inc. — 共通スタイル
   2026-10-05 ／ 旧 amseln.com の1枚HTMLから抽出し、3言語で共有
   色・フォント・余白は原版のまま。追加したのは言語切替(.langsw)と
   モバイルの表示崩れ修正の2点のみ（末尾のコメント参照） */

:root{
  --ink:#1b1a16;
  --ink-soft:#5b574e;
  --paper:#fbfaf6;
  --line:#e3e0d6;
  --yellow:#ffd400;
  --maxw:1060px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Shippori Mincho',serif;
  font-weight:400;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.lat{font-family:'Jost',sans-serif;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(251,250,246,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.navbar{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px;}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink);}
.brand img{height:34px;width:auto;display:block;}
.brand .nm{font-family:'Jost',sans-serif;font-weight:400;font-size:23px;letter-spacing:.04em;}
.navright{display:flex;align-items:center;gap:38px;}
nav ul{display:flex;gap:38px;list-style:none;}
nav a{font-family:'Jost',sans-serif;text-decoration:none;color:var(--ink-soft);font-size:13px;letter-spacing:.16em;text-transform:uppercase;transition:color .2s;}
nav a:hover{color:var(--ink);}

/* ---------- 言語切替 ---------- */
.langsw{display:flex;align-items:center;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.14em;}
.langsw a,.langsw .cur{text-decoration:none;padding:0 .6em;transition:color .2s;}
.langsw a{color:var(--ink-soft);}
.langsw a:hover{color:var(--ink);}
.langsw .cur{color:var(--ink);position:relative;}
.langsw .cur::after{content:"";position:absolute;left:.6em;right:.6em;bottom:-6px;height:2px;background:var(--yellow);}
.langsw .sep{color:var(--line);font-size:11px;}

/* ---------- hero ---------- */
.hero{padding:128px 0 116px;text-align:center;}
.hero .bird{width:min(312px,100%);height:auto;display:block;margin:0 auto 44px;}
.eyebrow{font-family:'Jost',sans-serif;font-weight:400;font-size:14px;letter-spacing:.42em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:40px;}
.eyebrow .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--yellow);margin:0 .7em 2px;vertical-align:middle;}
.hero h1{font-size:clamp(38px,5.6vw,68px);font-weight:600;line-height:1.42;letter-spacing:.02em;}
.hero h1 .y{position:relative;}
.hero h1 .y::after{content:"";position:absolute;left:0;right:0;bottom:.12em;height:.16em;background:var(--yellow);z-index:-1;opacity:.9;}
.hero .lead{margin:46px auto 0;max-width:640px;font-size:18px;color:var(--ink-soft);line-height:2.05;}

/* ---------- section scaffolding ---------- */
section{padding:104px 0;}
.seclabel{display:flex;align-items:center;gap:20px;margin-bottom:56px;}
.seclabel .mark{width:8px;height:8px;background:var(--yellow);transform:rotate(45deg);flex:none;}
.seclabel .idx{font-family:'Jost',sans-serif;font-size:12px;font-weight:500;letter-spacing:.14em;color:var(--ink-soft);}
.seclabel .en{font-family:'Jost',sans-serif;font-size:clamp(23px,2.5vw,30px);font-weight:300;letter-spacing:.05em;color:var(--ink);}
.seclabel .ja{font-size:13px;letter-spacing:.24em;color:var(--ink-soft);}
.seclabel .rule{flex:1;height:1px;background:var(--line);}
.seclabel.center{justify-content:center;}

/* ---------- mission ---------- */
.mission{border-top:1px solid var(--line);}
.mission .body{max-width:840px;}
.mission .lead-st{font-size:clamp(21px,2.5vw,28px);line-height:2.15;font-weight:500;letter-spacing:.015em;}
.mission .em{border-bottom:2px solid var(--yellow);padding-bottom:2px;}
.mission .flow{margin-top:2.3em;}
.mission .flow p{font-size:clamp(21px,2.5vw,28px);line-height:2.15;font-weight:500;letter-spacing:.01em;}
.mission .flow p + p{margin-top:1.5em;}
.mission .body .small{font-size:clamp(17px,1.8vw,20px);color:var(--ink-soft);font-weight:400;line-height:2.15;margin-top:2.4em;}

/* ---------- company ---------- */
.company{border-top:1px solid var(--line);}
.table{border-top:1px solid var(--line);}
.row{display:grid;grid-template-columns:230px 1fr;gap:24px;padding:30px 4px;border-bottom:1px solid var(--line);align-items:baseline;}
.row dt{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);}
.row dd{font-size:clamp(21px,2.2vw,26px);font-weight:500;line-height:1.5;color:var(--ink);}
.row dd .ja-label{display:block;font-size:13px;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:7px;font-weight:400;font-family:'Shippori Mincho',serif;}
.row dd a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--yellow);}

/* ---------- contact ---------- */
.contact{border-top:1px solid var(--line);text-align:center;}
.contact h2{font-size:clamp(28px,3.6vw,42px);font-weight:600;line-height:1.5;margin-bottom:14px;}
.contact p.sub{color:var(--ink-soft);font-size:17px;margin-bottom:46px;}
.mail{display:inline-flex;align-items:center;gap:14px;font-family:'Jost',sans-serif;font-size:clamp(24px,3.4vw,38px);font-weight:300;letter-spacing:.02em;color:var(--ink);text-decoration:none;padding-bottom:8px;border-bottom:1.5px solid var(--ink);transition:gap .25s,border-color .25s;}
.mail:hover{gap:22px;border-color:var(--yellow);}
.mail .arrow{font-size:.7em;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:48px 0;}
.foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.foot .l{display:flex;align-items:center;gap:12px;}
.foot img{height:26px;}
.foot .nm{font-family:'Jost',sans-serif;font-size:18px;letter-spacing:.04em;white-space:nowrap;}
.foot small{color:var(--ink-soft);font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:.08em;}

/* ---------- mobile ---------- */
/* 原版からの変更点はここだけ：
   ① .wrap の左右余白 40px → 26px（360px幅で本文が読める幅を確保）
   ② nav は原版どおり隠すが、.langsw は残す（言語切替はスマホでも要る）
   ③ .hero .bird は width:min(312px,100%) に変更（原版は 312px 固定で
      360px 幅のとき横スクロールが出ていた） */
@media(max-width:680px){
  .wrap{padding:0 26px;}
  nav{display:none;}
  .navright{gap:0;}
  .row{grid-template-columns:1fr;gap:6px;}
  .hero{padding:84px 0 76px;}
  section{padding:76px 0;}
  .seclabel{gap:14px;margin-bottom:40px;}
}