/* ==========================================================================
   邑三庫株式会社 / Yusanko Co., Ltd.
   style.css
   ========================================================================== */

:root{
  /* --- Palette (logoから抽出) --- */
  --ink:        #16302E;   /* 最暗：本文・見出し */
  --pine:       #2C6B63;   /* 主色：深青緑 */
  --pine-soft:  #4A8B82;
  --coral:      #EE7A54;   /* 強調：珊瑚橙 */
  --coral-deep: #D45F3B;
  --sand:       #F6F2EC;   /* 背景：温砂 */
  --paper:      #FFFFFF;
  --mist:       #E4EAE7;   /* 罫線・分割 */
  --grey:       #6B7A77;   /* 補助テキスト */

  --shadow-s: 0 1px 2px rgba(22,48,46,.06), 0 2px 8px rgba(22,48,46,.04);
  --shadow-m: 0 4px 12px rgba(22,48,46,.08), 0 12px 32px rgba(22,48,46,.06);

  --maxw: 1140px;
  --gut: 24px;

  --ff-disp: "Zen Old Mincho","Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --ff-body: "Zen Kaku Gothic New","Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --ff-mono: "IBM Plex Mono","SFMono-Regular",Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.9;
  color:var(--ink);
  background:var(--sand);
  font-feature-settings:"palt";
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--pine);text-decoration:none;transition:color .2s;}
a:hover{color:var(--coral);}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);}

/* --- 言語切替 --- */
[data-lang]{display:none !important;}
html[lang="ja"] [data-lang="ja"],
html[lang="en"] [data-lang="en"]{display:revert !important;}
/* テーブル・リスト要素は revert が不安定なため明示指定 */
html[lang="ja"] th[data-lang="ja"],html[lang="en"] th[data-lang="en"]{display:table-cell !important;}
html[lang="ja"] td[data-lang="ja"],html[lang="en"] td[data-lang="en"]{display:table-cell !important;}
html[lang="ja"] ol[data-lang="ja"],html[lang="en"] ol[data-lang="en"]{display:block !important;}
html[lang="ja"] ul[data-lang="ja"],html[lang="en"] ul[data-lang="en"]{display:block !important;}
html[lang="ja"] li[data-lang="ja"],html[lang="en"] li[data-lang="en"]{display:list-item !important;}
html[lang="ja"] option[data-lang="ja"],html[lang="en"] option[data-lang="en"]{display:block !important;}
/* モバイル表示ではテーブルをブロック化するため上書き（@media 側で再定義）*/

/* ==========================================================================
   Header
   ========================================================================== */
.hdr{
  position:sticky;top:0;z-index:100;
  background:rgba(246,242,236,.88);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--mist);
}
.hdr__in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  height:72px;display:flex;align-items:center;gap:20px;
}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.brand img{width:40px;height:40px;}
.brand__txt{display:flex;flex-direction:column;line-height:1.2;}
.brand__ja{font-family:var(--ff-disp);font-size:17px;font-weight:600;letter-spacing:.06em;color:var(--ink);}
.brand__en{font-size:10px;letter-spacing:.18em;color:var(--grey);text-transform:uppercase;}

.nav{margin-left:auto;display:flex;align-items:center;gap:28px;}
.nav a{font-size:14px;color:var(--ink);letter-spacing:.04em;position:relative;padding:6px 0;}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;
  background:var(--coral);transition:width .25s;
}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%;}

.lang{display:flex;border:1px solid var(--mist);border-radius:999px;overflow:hidden;background:var(--paper);}
.lang button{
  border:0;background:none;cursor:pointer;font-family:inherit;
  padding:5px 12px;font-size:11px;letter-spacing:.1em;color:var(--grey);transition:.2s;
}
.lang button[aria-pressed="true"]{background:var(--pine);color:#fff;}

.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto;}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;transition:.3s;border-radius:2px;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;min-height:calc(100vh - 72px);display:flex;align-items:center;overflow:hidden;}
#stars{position:absolute;inset:0;width:100%;height:100%;z-index:0;}
.hero__in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:80px var(--gut);width:100%;}
.hero__eyebrow{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.24em;
  color:var(--coral);text-transform:uppercase;margin:0 0 22px;
}
.hero h1{
  font-family:var(--ff-disp);font-weight:600;
  font-size:clamp(30px,5.4vw,60px);line-height:1.42;
  letter-spacing:.02em;margin:0 0 28px;max-width:19em;
}
.hero h1 em{font-style:normal;color:var(--pine);}
.hero__lead{font-size:clamp(15px,1.6vw,17px);color:var(--grey);max-width:40em;margin:0 0 40px;}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 30px;border-radius:999px;font-size:14px;letter-spacing:.06em;
  border:1.5px solid transparent;cursor:pointer;font-family:inherit;transition:.25s;
}
.btn--fill{background:var(--pine);color:#fff;}
.btn--fill:hover{background:var(--ink);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-m);}
.btn--line{border-color:var(--pine);color:var(--pine);background:transparent;}
.btn--line:hover{background:var(--pine);color:#fff;transform:translateY(-2px);}
.btn--coral{background:var(--coral);color:#fff;}
.btn--coral:hover{background:var(--coral-deep);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-m);}

/* ==========================================================================
   Sections
   ========================================================================== */
.sec{padding:104px 0;}
.sec--paper{background:var(--paper);}
.sec--ink{background:var(--ink);color:var(--sand);}
.sec--ink .sec__label{color:var(--coral);}
.sec--ink h2,.sec--ink h3{color:var(--sand);}
.sec--ink p{color:rgba(246,242,236,.72);}

.sec__label{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.24em;
  color:var(--coral);text-transform:uppercase;margin:0 0 14px;
}
.sec__title{
  font-family:var(--ff-disp);font-weight:600;
  font-size:clamp(24px,3.4vw,38px);line-height:1.5;letter-spacing:.02em;margin:0 0 20px;
}
.sec__lead{color:var(--grey);max-width:44em;margin:0 0 56px;font-size:15.5px;}
.sec--ink .sec__lead{color:rgba(246,242,236,.7);}

/* --- 事業カード --- */
.biz{display:grid;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));gap:26px;}
.card{
  background:var(--paper);border:1px solid var(--mist);border-radius:4px;
  padding:38px 32px;position:relative;transition:.3s;overflow:hidden;
}
.card::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:2.5px;
  background:linear-gradient(90deg,var(--pine),var(--coral));
  transform:scaleX(0);transform-origin:left;transition:transform .4s;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);border-color:transparent;}
.card:hover::before{transform:scaleX(1);}
.card__no{font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;color:var(--coral);margin-bottom:16px;}
.card h3{font-family:var(--ff-disp);font-size:19px;font-weight:600;margin:0 0 8px;line-height:1.6;}
.card__sub{font-size:11px;letter-spacing:.1em;color:var(--grey);margin:0 0 18px;text-transform:uppercase;}
.card p{font-size:14.5px;color:var(--grey);margin:0;line-height:1.95;}
.card__tag{
  display:inline-block;margin-top:18px;padding:4px 12px;border-radius:999px;
  font-size:11px;letter-spacing:.08em;background:var(--sand);color:var(--grey);border:1px solid var(--mist);
}

/* --- MIRA --- */
.mira{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center;}
.mira__visual{position:relative;aspect-ratio:1/1;max-width:440px;width:100%;margin:0 auto;}
#miraCanvas{width:100%;height:100%;border-radius:50%;}
.mira__quote{
  font-family:var(--ff-disp);font-size:clamp(19px,2.4vw,26px);line-height:1.85;
  margin:0 0 26px;color:var(--sand);
}
.mira__quote span{color:var(--coral);}
.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin:32px 0 36px;}
.pill{
  padding:7px 16px;border:1px solid rgba(246,242,236,.22);border-radius:999px;
  font-size:12px;letter-spacing:.06em;color:rgba(246,242,236,.8);
}

/* --- 会社概要テーブル --- */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;}
.tbl th,.tbl td{padding:20px 4px;border-bottom:1px solid var(--mist);text-align:left;vertical-align:top;}
.tbl th{width:180px;font-weight:600;color:var(--pine);letter-spacing:.06em;font-size:13.5px;}
.tbl td{color:var(--ink);line-height:1.9;}

/* --- 提携先 --- */
.partners{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;}
.partner{
  background:var(--paper);border:1px solid var(--mist);border-radius:4px;padding:24px 26px;
  border-left:3px solid var(--pine);
}
.partner b{display:block;font-size:15px;font-weight:600;margin-bottom:5px;line-height:1.6;}
.partner small{font-size:11.5px;color:var(--grey);letter-spacing:.06em;}

/* --- 沿革 --- */
.hist{list-style:none;margin:0;padding:0;}
.hist li{display:flex;gap:28px;padding:18px 0;border-bottom:1px solid var(--mist);}
.hist time{font-family:var(--ff-mono);font-size:13px;color:var(--coral);flex-shrink:0;width:110px;letter-spacing:.04em;}
.hist p{margin:0;font-size:14.5px;}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;}
.info dl{margin:0;}
.info dt{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.18em;color:var(--coral);text-transform:uppercase;margin-bottom:6px;}
.info dd{margin:0 0 26px;font-size:14.5px;line-height:1.85;}

.form{background:var(--paper);border:1px solid var(--mist);border-radius:4px;padding:40px;}
.field{margin-bottom:22px;}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:8px;letter-spacing:.04em;}
.field label .req{color:var(--coral);font-size:11px;margin-left:6px;}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1px solid var(--mist);border-radius:3px;
  font-family:inherit;font-size:14.5px;color:var(--ink);background:var(--sand);transition:.2s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--pine);background:var(--paper);box-shadow:0 0 0 3px rgba(44,107,99,.1);
}
.field textarea{min-height:150px;resize:vertical;}
.field .err{display:none;color:var(--coral-deep);font-size:12px;margin-top:6px;}
.field.is-error input,.field.is-error textarea,.field.is-error select{border-color:var(--coral-deep);}
.field.is-error .err{display:block;}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--grey);margin-bottom:26px;line-height:1.75;}
.consent input{width:16px;height:16px;flex-shrink:0;margin-top:4px;}
.hp{position:absolute;left:-9999px;}
.form__msg{padding:15px 18px;border-radius:3px;font-size:14px;margin-bottom:22px;display:none;}
.form__msg.ok{display:block;background:rgba(44,107,99,.1);color:var(--pine);border:1px solid rgba(44,107,99,.3);}
.form__msg.ng{display:block;background:rgba(212,95,59,.1);color:var(--coral-deep);border:1px solid rgba(212,95,59,.3);}

/* ==========================================================================
   Footer
   ========================================================================== */
.ftr{background:var(--ink);color:rgba(246,242,236,.62);padding:64px 0 30px;font-size:13.5px;}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;margin-bottom:48px;}
.ftr__brand{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.ftr__brand img{width:38px;height:38px;}
.ftr__brand span{font-family:var(--ff-disp);font-size:17px;color:var(--sand);letter-spacing:.06em;}
.ftr h4{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.18em;color:var(--coral);text-transform:uppercase;margin:0 0 18px;font-weight:400;}
.ftr ul{list-style:none;margin:0;padding:0;}
.ftr li{margin-bottom:11px;}
.ftr a{color:rgba(246,242,236,.62);}
.ftr a:hover{color:var(--coral);}
.ftr__btm{border-top:1px solid rgba(246,242,236,.12);padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:12px;color:rgba(246,242,236,.42);}

/* ==========================================================================
   Page header (下層)
   ========================================================================== */
.phdr{background:var(--paper);border-bottom:1px solid var(--mist);padding:76px 0 60px;}
.phdr h1{font-family:var(--ff-disp);font-size:clamp(26px,3.8vw,40px);font-weight:600;margin:0 0 12px;letter-spacing:.03em;}
.phdr p{margin:0;color:var(--grey);font-size:15px;}
.crumb{font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;color:var(--coral);margin:0 0 18px;text-transform:uppercase;}

/* --- 本文（規約系） --- */
.prose h2{font-family:var(--ff-disp);font-size:20px;font-weight:600;margin:52px 0 16px;padding-left:14px;border-left:3px solid var(--coral);line-height:1.6;}
.prose h3{font-size:16px;font-weight:600;margin:32px 0 10px;}
.prose p,.prose li{font-size:14.5px;line-height:2.05;color:var(--ink);}
.prose ul,.prose ol{padding-left:22px;}
.prose li{margin-bottom:9px;}

/* ==========================================================================
   Reveal
   ========================================================================== */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.rv.in{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
  html{scroll-behavior:auto;}
  .rv{opacity:1;transform:none;}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  .mira{grid-template-columns:1fr;gap:48px;}
  .contact{grid-template-columns:1fr;gap:44px;}
  .ftr__grid{grid-template-columns:1fr 1fr;gap:34px;}
}

@media (max-width:768px){
  .sec{padding:72px 0;}
  .burger{display:block;}
  .nav{
    position:fixed;top:72px;left:0;right:0;
    background:var(--paper);flex-direction:column;align-items:flex-start;
    gap:0;padding:0 var(--gut);margin:0;
    max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;
    border-bottom:1px solid var(--mist);box-shadow:var(--shadow-m);
  }
  .nav.open{max-height:70vh;padding:14px var(--gut) 26px;overflow-y:auto;}
  .nav a{width:100%;padding:15px 0;border-bottom:1px solid var(--mist);font-size:15px;}
  .nav a::after{display:none;}
  .nav .lang{margin-top:18px;}
  .hero{min-height:auto;padding:64px 0 76px;}
  .hero__in{padding:0 var(--gut);}
  .hero__cta .btn{width:100%;justify-content:center;}
  .tbl tr,.tbl tbody{display:block;width:100%;}
  html[lang="ja"] .tbl th[data-lang="ja"],html[lang="en"] .tbl th[data-lang="en"],
  html[lang="ja"] .tbl td[data-lang="ja"],html[lang="en"] .tbl td[data-lang="en"],
  .tbl th:not([data-lang]),.tbl td:not([data-lang]){display:block !important;width:100%;padding:0;border:0;}
  .tbl th{padding-top:20px !important;}
  .tbl td{padding:6px 0 20px !important;border-bottom:1px solid var(--mist) !important;}
  .hist li{flex-direction:column;gap:5px;}
  .hist time{width:auto;}
  .form{padding:28px 22px;}
  .ftr__grid{grid-template-columns:1fr;gap:32px;}
  .ftr__btm{flex-direction:column;}
}