/* ═══════════════════════════════════════════════════
   合同会社AKI ── 公式サイト
   軸：和紙と藍。明朝で組み、余白で語る。
   JSが動かなくても全部読める（.js が付いたときだけ隠して動かす）
   ═══════════════════════════════════════════════════ */

:root{
  --paper:      #f7f4ec;   /* 和紙の地 */
  --paper-2:    #efeade;
  --paper-3:    #e6dfd0;
  --card:       #fffdf8;
  --ink:        #1b1d20;
  --ink-2:      #575c63;
  --ink-3:      #8a8f96;
  --ink-4:      #b2b6bb;
  --rule:       #ddd5c6;
  --rule-2:     #c8beab;

  --ai:         #2a3f63;   /* 藍 */
  --ai-l:       #3d5c8f;
  --ai-bg:      #e8ecf3;

  --sumi:       #22262b;   /* 墨 */

  --sh-1: 0 1px 2px rgba(27,29,32,.05);
  --sh-2: 0 2px 8px rgba(27,29,32,.05), 0 12px 32px rgba(27,29,32,.06);
  --sh-3: 0 6px 18px rgba(27,29,32,.08), 0 24px 60px rgba(27,29,32,.09);

  --r-m: 10px;
  --r-l: 18px;

  --mincho: "Yu Mincho","YuMincho","Hiragino Mincho ProN","HGS明朝E",serif;
  --gothic: "Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;

  --measure: 720px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--gothic);color:var(--ink);background:var(--paper);
  font-size:16px;line-height:2.0;letter-spacing:.015em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"palt" 1;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ai)}

.mi{font-family:var(--mincho);font-weight:600;letter-spacing:.06em;font-feature-settings:"palt" 0}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 26px}

/* ═══ ヘッダ ═══════════════════════════════ */
.head{
  position:sticky;top:0;z-index:40;
  background:rgba(247,244,236,.88);
  backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s ease,box-shadow .4s ease;
}
.head.stuck{border-bottom-color:var(--rule);box-shadow:var(--sh-1)}
.head-in{
  max-width:var(--measure);margin:0 auto;padding:15px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{
  font-family:var(--mincho);font-weight:600;font-size:18px;
  color:var(--ink);text-decoration:none;letter-spacing:.16em;
  font-feature-settings:"palt" 0;white-space:nowrap;
}
.head .to-contact{
  font-size:12.5px;background:var(--sumi);color:#fff;text-decoration:none;
  padding:10px 18px;border-radius:999px;letter-spacing:.06em;white-space:nowrap;
  transition:background-color .25s ease,transform .15s var(--ease);
}
.head .to-contact:hover{background:var(--ai);transform:translateY(-1px)}

/* ═══ FV ═══════════════════════════════════ */
.fv{padding:66px 0 0;position:relative}
.fv-kicker{
  font-size:11px;letter-spacing:.24em;color:var(--ink-3);margin-bottom:26px;
}
.fv h1{
  font-family:var(--mincho);font-weight:600;
  font-size:34px;line-height:1.72;letter-spacing:.06em;
  font-feature-settings:"palt" 0;
}
.fv .lead{
  font-size:15px;color:var(--ink-2);margin-top:30px;line-height:2.1;
}
.fv-shot{
  margin-top:44px;width:100vw;position:relative;left:50%;transform:translateX(-50%);
}
.fv-shot img{width:100%}
.fv-claim{
  font-family:var(--mincho);font-weight:600;
  font-size:20px;letter-spacing:.1em;text-align:center;
  margin:36px 0 0;color:var(--ai);font-feature-settings:"palt" 0;
}

/* ═══ 実績 ═══════════════════════════════ */
.stats{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--rule);margin:70px 0 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.stat{background:var(--paper);padding:28px 18px;text-align:center}
.stat .v{
  font-family:var(--mincho);font-weight:600;color:var(--ai);
  font-size:34px;line-height:1.2;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.stat .v small{font-size:15px;margin-left:3px;letter-spacing:.04em}
.stat .k{font-size:11.5px;color:var(--ink-3);margin-top:12px;line-height:1.7;letter-spacing:.04em}

/* ═══ セクション ═══════════════════════════ */
.sec{padding:96px 0 0}
.sec-en{
  font-size:10.5px;letter-spacing:.28em;color:var(--ai);margin-bottom:14px;
}
.sec h2{
  font-family:var(--mincho);font-weight:600;
  font-size:27px;line-height:1.7;letter-spacing:.07em;
  font-feature-settings:"palt" 0;
}
.sec .desc{
  font-size:14.5px;color:var(--ink-2);margin-top:22px;line-height:2.1;
}

/* ═══ 事業内容 ═══════════════════════════ */
.svc{margin-top:44px}
.svc-item{
  background:var(--card);border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--sh-2);margin-bottom:26px;
}
.svc-shot img{width:100%;aspect-ratio:3/2;object-fit:cover}
.svc-body{padding:26px 24px 24px}
.svc-no{
  font-family:var(--mincho);font-weight:600;font-size:13px;
  color:var(--ai);letter-spacing:.14em;
}
.svc-item h3{
  font-family:var(--mincho);font-weight:600;
  font-size:20px;line-height:1.7;letter-spacing:.05em;margin-top:8px;
  font-feature-settings:"palt" 0;
}
.svc-en{font-size:10.5px;letter-spacing:.2em;color:var(--ink-4);margin-top:7px}
.svc-item p{font-size:14.5px;color:var(--ink-2);line-height:2.05;margin-top:16px}
.svc-tags{
  font-size:11.5px;color:var(--ink-3);line-height:1.9;letter-spacing:.03em;
  margin-top:18px;padding-top:15px;border-top:1px solid var(--rule);
}

/* ═══ 強み ═══════════════════════════════ */
.str{margin-top:44px}
.str-item{
  background:var(--paper-2);border-radius:var(--r-l);
  padding:30px 26px;margin-bottom:18px;
}
.str-no{
  font-family:var(--mincho);font-weight:600;font-size:22px;
  color:var(--ai);letter-spacing:.04em;
}
.str-item h3{
  font-family:var(--mincho);font-weight:600;
  font-size:19px;line-height:1.75;letter-spacing:.05em;margin-top:10px;
  font-feature-settings:"palt" 0;
}
.str-item p{font-size:14.5px;color:var(--ink-2);line-height:2.05;margin-top:14px}

/* ═══ 進め方 ═══════════════════════════════ */
.flow{margin-top:44px;list-style:none}
.flow li{
  position:relative;padding:0 0 34px 52px;
}
.flow li:last-child{padding-bottom:0}
.flow li::before{
  content:attr(data-no);
  position:absolute;left:0;top:-2px;
  font-family:var(--mincho);font-weight:600;font-size:19px;
  color:var(--ai);letter-spacing:.02em;
}
.flow li::after{
  content:"";position:absolute;left:12px;top:26px;bottom:6px;width:1px;
  background:var(--rule);
}
.flow li:last-child::after{display:none}
.flow b{display:block;font-size:16.5px;letter-spacing:.03em;margin-bottom:7px}
.flow span{font-size:14px;color:var(--ink-2);line-height:2.0}

/* ═══ 哲学 ═══════════════════════════════ */
.phil{
  margin-top:96px;padding:0;position:relative;
}
.phil-shot{width:100vw;position:relative;left:50%;transform:translateX(-50%)}
.phil-shot img{width:100%}
.phil-body{
  max-width:var(--measure);margin:0 auto;padding:44px 26px 0;text-align:center;
}
.phil h2{
  font-family:var(--mincho);font-weight:600;
  font-size:25px;line-height:1.8;letter-spacing:.07em;
  font-feature-settings:"palt" 0;
}
.phil p{font-size:14.5px;color:var(--ink-2);line-height:2.15;margin-top:26px}

/* ═══ 代表 ═══════════════════════════════ */
.prof{
  margin-top:44px;background:var(--card);border-radius:var(--r-l);
  box-shadow:var(--sh-2);overflow:hidden;
}
.prof-shot img{width:100%;aspect-ratio:16/10;object-fit:cover}
.prof-body{padding:30px 26px}
.prof-name{
  font-family:var(--mincho);font-weight:600;font-size:24px;letter-spacing:.1em;
  font-feature-settings:"palt" 0;
}
.prof-en{font-size:11px;letter-spacing:.2em;color:var(--ink-4);margin-top:8px}
.prof-role{font-size:13px;color:var(--ai);margin-top:14px;letter-spacing:.04em}
.prof-body p{font-size:14.5px;color:var(--ink-2);line-height:2.1;margin-top:20px}

.hist{margin-top:30px;padding-top:26px;border-top:1px solid var(--rule);list-style:none}
.hist li{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:14px 0}
.hist .y{
  font-family:var(--mincho);font-weight:600;font-size:14px;color:var(--ai);
  letter-spacing:.04em;font-variant-numeric:tabular-nums;
}
.hist b{display:block;font-size:14.5px;letter-spacing:.02em}
.hist span{display:block;font-size:13px;color:var(--ink-2);line-height:1.95;margin-top:5px}

/* ═══ 会社概要 ═══════════════════════════ */
.info{
  margin-top:44px;background:var(--card);border-radius:var(--r-l);
  box-shadow:var(--sh-1);overflow:hidden;
}
.info dl{display:grid;grid-template-columns:92px 1fr}
.info dt{
  padding:17px 16px;font-size:12.5px;color:var(--ink-3);
  background:var(--paper-2);border-bottom:1px solid var(--rule);letter-spacing:.04em;
}
.info dd{
  padding:17px 18px;font-size:14.5px;line-height:1.95;
  border-bottom:1px solid var(--rule);
}
.info dl>:nth-last-child(-n+2){border-bottom:none}
.info dd small{display:block;font-size:12px;color:var(--ink-3);margin-top:6px;line-height:1.8}

/* ═══ お問い合わせ ═══════════════════════ */
.contact{
  margin-top:96px;background:var(--sumi);color:#fff;
  padding:70px 26px 66px;text-align:center;
  width:100vw;position:relative;left:50%;transform:translateX(-50%);
}
.contact .en{font-size:10.5px;letter-spacing:.28em;color:rgba(255,255,255,.5);margin-bottom:18px}
.contact h2{
  font-family:var(--mincho);font-weight:600;
  font-size:27px;line-height:1.7;letter-spacing:.07em;
  font-feature-settings:"palt" 0;
}
.contact p{
  font-size:14px;color:rgba(255,255,255,.72);margin-top:22px;line-height:2.05;
}
.contact .btn{
  display:inline-block;margin-top:32px;
  background:var(--paper);color:var(--sumi);text-decoration:none;
  font-size:15.5px;font-weight:700;padding:18px 44px;border-radius:999px;
  letter-spacing:.06em;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.contact .btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.24)}
.contact .note{font-size:11.5px;color:rgba(255,255,255,.5);margin-top:18px}

/* ═══ フッタ ═══════════════════════════════ */
.foot{padding:44px 0 56px;text-align:center}
.foot .brand{font-size:15px;display:inline-block}
.foot nav{
  display:flex;gap:22px;flex-wrap:wrap;justify-content:center;
  margin-top:22px;
}
.foot nav a{font-size:12.5px;color:var(--ink-2);text-decoration:none}
.foot nav a:hover{color:var(--ink)}
.foot .c{font-size:11px;color:var(--ink-4);margin-top:26px;letter-spacing:.06em}

/* ═══ 挙動 ═══════════════════════════════ */
::selection{background:var(--ai-bg);color:var(--ink)}

.js .rv{
  opacity:0;transform:translateY(18px);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out);
}
.js .rv.in{opacity:1;transform:none}

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

@media(max-width:400px){
  .fv h1{font-size:29px}
  .sec h2,.contact h2{font-size:24px}
  .stat .v{font-size:29px}
  .prof-name{font-size:21px}
}