/* merchant — サイト共通スタイル */
:root{
  --ink:#141414;
  --text:#1A1A1A;
  --sub:#4A4A4A;
  --mute:#6E6E6E;
  --faint:#8A8A8A;
  --line:#E9E3D9;
  --cream:#F4F0E9;
  --ph1:#F1ECE3;
  --ph2:#E5DDD0;
  --line-green:#06C755;
  --wrap:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:88px}
body{margin:0;background:#FFFFFF;color:var(--text);font-family:'Noto Sans JP',sans-serif;font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--ink)}
a:hover{color:#444444}
h1,h2,h3,p,ul,dl{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.en{font-family:'Inter',sans-serif}
.nw{display:inline-block}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100;background:#fff;padding:8px 12px}

/* ヘッダー */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{width:56px;height:56px}
.brand-name{font-family:'Shippori Mincho',serif;font-size:28px;font-weight:800;letter-spacing:0;line-height:1}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-tag{font-family:'Shippori Mincho',serif;font-size:10px;font-weight:700;color:var(--ink);letter-spacing:.2em;margin-bottom:5px;white-space:nowrap}
.brand-line{display:flex;align-items:baseline;gap:8px}
.brand-kana{font-family:'Shippori Mincho',serif;font-size:11px;font-weight:600;color:var(--mute);letter-spacing:.18em;white-space:nowrap}
.gnav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:500}
.gnav a{text-decoration:none;color:var(--ink)}
.pill{display:inline-flex;align-items:center;min-height:44px;padding:10px 20px;border-radius:999px;background:var(--ink);color:#fff!important;text-decoration:none;font-weight:700}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:999px;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:18px;height:1.5px;background:var(--ink);position:relative;content:""}
.menu-btn span::before{position:absolute;top:-6px}
.menu-btn span::after{position:absolute;top:6px}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:14px 28px;border-radius:999px;text-decoration:none;font-weight:700;transition:opacity .2s}
.btn:hover{opacity:.85}
.btn-line{background:var(--line-green);color:#fff!important}
.btn-ghost{border:1px solid #CFCFCC;color:var(--ink);font-weight:500}
.btn-ink{background:var(--ink);color:#fff!important}
.chip{font-size:12px;color:var(--sub);background:var(--cream);padding:4px 12px;border-radius:999px}

/* ヒーロー */
.hero .wrap{padding-top:120px;padding-bottom:128px;display:flex;justify-content:center}
.hero-inner{max-width:760px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--mute)}
.hero h1{font-family:'Shippori Mincho',serif;font-weight:700;font-size:54px;line-height:1.4;letter-spacing:.04em}
.hero .lead{font-size:17px;color:var(--sub);max-width:520px}
.row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}

/* セクション共通 */
.sec{padding:104px 0}
.sec-cream{background:var(--cream)}
.label{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:.16em;color:var(--faint);margin-bottom:8px}
.h2{font-size:32px;font-weight:700;line-height:1.5;margin-bottom:16px}
.intro{max-width:760px;color:var(--sub);margin-bottom:40px}

/* WHAT WE DO */
.what{border-top:1px solid var(--line);padding:112px 0 96px}
.what-head{display:flex;flex-wrap:wrap;gap:16px 64px;align-items:flex-end;justify-content:space-between;margin-bottom:56px}
.what-head h2{font-size:32px;font-weight:700;line-height:1.6}
.what-head p{max-width:400px;font-size:15px;color:var(--sub)}
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px 32px}
/* 区切り線は各項目のいちばん上（画像の上）。線 → 画像 → 番号 → 見出し → 文章 の順で1つのまとまりに見せる */
.card{text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--ink);padding-top:20px}
.card .ph{margin-bottom:6px}
.card .ttl{font-size:22px;font-weight:700}
.card .desc{font-size:14px;color:var(--sub)}
.card .more{font-size:14px;font-weight:700}
.card .soon{font-size:14px;font-weight:700;color:var(--faint)}

/* 写真枠（実写真に差し替える場所） */
.ph{position:relative;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,var(--ph1),var(--ph2));aspect-ratio:4/3}
.ph img{width:100%;height:100%;object-fit:cover}
.ph-dark::before{content:"";position:absolute;inset:0;background:rgba(15,15,15,.52);z-index:1;transition:background .4s}
.card:hover .ph-dark::before{background:rgba(15,15,15,.42)}
.ph-cap{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Shippori Mincho',serif;font-weight:700;font-size:22px;letter-spacing:.24em;text-align:center}
.ph[data-note]::after{content:attr(data-note);position:absolute;left:16px;bottom:12px;font-size:12px;color:var(--faint)}

/* 動き */
.lift{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.lift:hover,.card:hover .lift{transform:translateY(-4px);box-shadow:0 16px 36px -18px rgba(0,0,0,.3)}
.arw{display:inline-block;transition:transform .3s}
.card:hover .arw,.lift:hover .arw{transform:translateX(6px)}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.in{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.in.d1{animation-delay:.1s}.in.d2{animation-delay:.3s}.in.d3{animation-delay:.5s}.in.d4{animation-delay:.7s}
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .rv.show{opacity:1;transform:none}

/* 買取 */
.stats{display:flex;flex-wrap:wrap;gap:16px;margin:-8px 0 64px}
.stats>div{flex:1 1 200px;background:#fff;border-radius:16px;padding:24px 28px;display:flex;flex-direction:column;gap:2px}
.sn{font-family:'Inter','Noto Sans JP',sans-serif;font-size:40px;font-weight:700;line-height:1.2;color:var(--ink)}
.sn small{font-size:16px;font-weight:700;margin-left:4px}
.sl{font-size:13px;color:var(--mute)}
.reasons-title{font-size:22px;font-weight:700;margin-bottom:24px}
.reasons{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-bottom:64px}
.reason{border-top:2px solid var(--ink);padding-top:18px}
.reason .rn{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;color:var(--faint)}
.reason h4{margin:6px 0 8px;font-size:18px;font-weight:700}
.reason p{font-size:14px;color:var(--sub)}
.boxes{display:flex;flex-wrap:wrap;gap:20px}
.box{flex:1 1 340px;min-width:0;background:#fff;border-radius:16px;padding:36px;display:flex;flex-direction:column;gap:14px}
.box h3{font-size:22px;font-weight:700}
.box p,.box ul{color:var(--sub);font-size:15px}
.box ul{padding-left:20px}
.spec{display:grid;grid-template-columns:7em 1fr;gap:6px 12px;font-size:15px}
.spec dt{color:var(--mute)}
.spec dd{margin:0}
.steps{margin-top:56px;display:flex;flex-wrap:wrap;gap:20px}
.step{flex:1 1 220px;min-width:0;border-top:2px solid var(--ink);padding-top:18px}
.step svg{display:block;margin-bottom:10px}
.step .n{font-family:'Inter',sans-serif;font-size:13px;font-weight:700}
.step .t{margin-top:4px;font-weight:700}
.step .d{margin-top:4px;font-size:14px;color:var(--sub)}

/* Web */
.cases{display:flex;flex-wrap:wrap;gap:20px}
.case{flex:1 1 340px;min-width:0;background:var(--cream);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.case .ph{border-radius:0;aspect-ratio:auto;height:240px;background:linear-gradient(135deg,#ECE5DA,var(--cream));border-bottom:1px solid var(--line)}
.case .ph img{object-position:top left}
.case-body{padding:28px;display:flex;flex-direction:column;gap:10px}
.case .tag{font-size:13px;color:var(--mute);font-weight:700}
.case h3{font-size:20px;font-weight:700}
/* 実績：円グラフ（円の全体＝これまでの時間、色の部分＝ツール導入後）と、→での比較 */
.case{container-type:inline-size}
.cmp{display:grid;grid-template-columns:140px minmax(0,1fr);grid-template-areas:"ring l" "ring ba" "ring lg";column-gap:24px;row-gap:6px;align-content:center;align-items:center;margin:8px 0 4px}
.ring{grid-area:ring;position:relative;width:140px;height:140px}
.ring svg{display:block;width:100%;height:100%}
.ring-bg{fill:#fff;stroke:#E3DBCE;stroke-width:12}
.ring-fg{fill:none;stroke-width:12;stroke-linecap:round}
.ring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2}
.ring-c strong{font-family:'Inter',sans-serif;font-size:30px;font-weight:800;color:var(--ink)}
.ring-c span{font-size:11px;font-weight:700;color:#5E5E5E}
.cmp-l{grid-area:l;align-self:end;font-size:13px;font-weight:700;color:#5E5E5E}
.ba{grid-area:ba;display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;line-height:1.1}
.ba .b{font-family:'Inter','Noto Sans JP',sans-serif;font-size:22px;font-weight:700;color:#6B6B6B}
.ba svg{width:32px;height:24px;flex:none;fill:none;stroke:#1F9070;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ba strong{font-family:'Inter','Noto Sans JP',sans-serif;font-size:44px;font-weight:800;color:var(--ink)}
.legend{grid-area:lg;align-self:start;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:#5E5E5E}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:50%;flex:none}
.legend .k0{background:#E3DBCE;border:1px solid #CFC6B8}
.legend .k1{background:#1F9070}
/* カードの幅が狭い時（スマホ・タブレット）：→の比較は円の下に、白い帯で1行に */
@container (max-width:500px){
  .cmp{grid-template-columns:112px minmax(0,1fr);grid-template-areas:"ring l" "ring lg" "ba ba";column-gap:18px;row-gap:8px}
  .ring{width:112px;height:112px}
  .ring-c strong{font-size:25px}
  .ring-c span{font-size:10px}
  .legend{flex-direction:column;gap:8px}
  .cmp-l{align-self:end}
  .ba{margin-top:8px;background:#fff;border-radius:12px;padding:12px 16px;flex-wrap:nowrap}
  .ba .b{font-size:18px;white-space:nowrap}
  .ba svg{width:28px;height:21px}
  .ba strong{font-size:36px;white-space:nowrap}
}
/* とても狭い画面（幅320pxの端末など）：1行に収まるよう数字を少し小さく */
@container (max-width:300px){
  .cmp{grid-template-columns:96px minmax(0,1fr);column-gap:14px}
  .ring{width:96px;height:96px}
  .ring-c strong{font-size:21px}
  .cmp-l{font-size:12px}
  .ba{padding:12px;gap:6px}
  .ba .b{font-size:15px}
  .ba svg{width:22px;height:17px}
  .ba strong{font-size:30px}
}
.case p.d{font-size:15px;color:var(--sub)}
.services{margin-top:32px;display:flex;flex-wrap:wrap;gap:16px}
.service{flex:1 1 260px;min-width:0;border:1px solid var(--line);border-radius:12px;padding:24px}
.service svg{display:block;margin-bottom:12px}
.service h3{font-size:17px;font-weight:700;margin-bottom:6px}
.service p{font-size:14px;color:var(--sub)}
.note{margin-top:32px;font-size:15px;color:var(--sub)}

/* 絵本 */
.ehon{display:flex;gap:40px;align-items:center;border-radius:16px;padding:48px;background:#fff}
.cover{flex:0 0 180px;height:240px;border-radius:8px;background:var(--cream);box-shadow:0 12px 28px -16px rgba(0,0,0,.3);position:relative;overflow:hidden}
.cover img{display:block;width:100%;height:100%;object-fit:cover}
.ehon-body{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:12px}
.ehon-body h2{font-size:28px;font-weight:700}
.ehon-body p{color:var(--sub)}
.ehon-body .badge{color:#fff}
.badge{align-self:flex-start;font-size:13px;font-weight:700;color:#fff;background:var(--ink);border-radius:999px;padding:4px 16px}

/* 会社概要 */
.about .wrap{display:flex;flex-wrap:wrap;gap:56px}
.prof{flex:1 1 380px;min-width:0;display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
.avatar{flex:0 0 160px;width:160px;height:160px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--ph1),var(--ph2))}
.avatar img{width:100%;height:100%;object-fit:cover}
.prof-body{flex:1 1 200px;min-width:0}
.prof-body .role{font-size:13px;color:var(--mute)}
.prof-body .name{font-size:24px;font-weight:700}
.prof-body .roman{font-family:'Inter',sans-serif;font-size:13px;color:var(--mute);margin-bottom:12px}
.prof-body .bio{font-size:15px;color:var(--sub)}
.info{flex:1 1 420px;min-width:0}
.info dl{display:grid;grid-template-columns:10.5em 1fr;font-size:14px;border-top:1px solid var(--line)}
.info dt,.info dd{padding:12px 0;border-bottom:1px solid var(--line);margin:0}
.info dt{color:var(--mute);padding-right:12px}
.sp-br{display:none}

/* お問い合わせ */
.contact-cards{display:flex;flex-wrap:wrap;gap:20px}
.cc{flex:1 1 280px;min-width:0;background:#fff;color:var(--ink);border-radius:16px;padding:32px;display:flex;flex-direction:column;gap:8px;text-decoration:none}
.cc .t{font-size:20px;font-weight:700}
.cc .d{font-size:14px;color:var(--sub)}
.cc .tel{font-family:'Inter',sans-serif;font-size:28px;font-weight:700;letter-spacing:.02em;color:var(--ink);text-decoration:none}
.cc .go{margin-top:12px;align-self:flex-start;font-weight:700;font-size:14px;padding:10px 20px;border-radius:999px}

/* フッター */
.site-footer{border-top:1px solid var(--line);color:var(--mute);font-size:13px}
.site-footer .wrap{padding-top:32px;padding-bottom:32px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.site-footer .brand img{width:44px;height:44px}
.site-footer .brand-name{font-size:20px}

/* スマホ */
@media (max-width:860px){
  .menu-btn{display:inline-flex}
  /* メニューは上からふわっと下りてくる。閉じている間は見えず、押せない */
  .gnav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 20px;display:flex;
    opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;box-shadow:0 12px 24px rgba(20,20,20,.06);
    transition:opacity .28s ease,transform .32s cubic-bezier(.2,.7,.2,1),visibility 0s linear .32s}
  .gnav.open{opacity:1;visibility:visible;transform:none;pointer-events:auto;
    transition:opacity .28s ease,transform .32s cubic-bezier(.2,.7,.2,1),visibility 0s}
  .gnav a{padding:14px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateY(-6px);transition:opacity .25s ease,transform .3s ease}
  .gnav.open a{opacity:1;transform:none}
  .gnav.open a:nth-child(2){transition-delay:.04s}
  .gnav.open a:nth-child(3){transition-delay:.08s}
  .gnav.open a:nth-child(4){transition-delay:.12s}
  .gnav.open a:nth-child(5){transition-delay:.16s}
  /* 三本線 → × に変わる */
  .menu-btn span,.menu-btn span::before,.menu-btn span::after{transition:transform .3s ease,background-color .2s ease,top .3s ease}
  .menu-btn[aria-expanded="true"] span{background:transparent}
  .menu-btn[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
  .menu-btn[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
  .gnav .pill{margin-top:14px;justify-content:center;border-bottom:none}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .hero .wrap{padding-top:72px;padding-bottom:80px}
  .hero h1{font-size:36px}
  .hero .lead{font-size:15px}
  .sec{padding:72px 0}
  .what{padding:72px 0}
  .cards3{gap:64px}
  .h2,.what-head h2{font-size:24px}
  .box,.ehon{padding:24px}
  /* 絵本：スマホでもPCと同じく画像を左に置く */
  .ehon{gap:16px;padding:20px}
  .cover{flex-basis:108px;height:144px}
  .ehon-body{flex:1 1 0;gap:6px}
  .ehon-body h2{font-size:20px}
  .ehon-body p{font-size:14px;line-height:1.7}
  .ehon-body .label{font-size:11px;letter-spacing:.1em;margin-bottom:0}
  .ehon-body .badge{font-size:12px;padding:2px 12px}
  /* 代表：写真の右に名前、紹介文はその下に全幅で置く */
  .prof{display:grid;grid-template-columns:96px 1fr;column-gap:16px;row-gap:0;align-items:center}
  .avatar{grid-column:1;grid-row:1 / span 3;width:96px;height:96px}
  .prof-body{display:contents}
  .prof-body .role,.prof-body .name,.prof-body .roman{grid-column:2}
  .prof-body .role{align-self:end}
  .prof-body .roman{align-self:start;margin-bottom:0}
  .prof-body .bio{grid-column:1 / -1;margin-top:16px}
  .case-body,.cc{padding:24px}
  .info dl{grid-template-columns:6.5em 1fr}
  .sp-br{display:inline}
  .spec{grid-template-columns:5.5em 1fr;font-size:14px}
  /* 数字カードはスマホでも横3列 */
  .stats{flex-wrap:nowrap;gap:8px;margin-bottom:48px}
  .stats>div{flex:1 1 0;min-width:0;padding:16px 6px;align-items:center;text-align:center;border-radius:12px}
  .sn{font-size:24px}
  .sn small{font-size:11px;margin-left:2px}
  .sl{font-size:11px;line-height:1.5}
  .reasons-title{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .in{animation:none}
  .js .rv{opacity:1;transform:none;transition:none}
  .lift,.arw,.btn{transition:none}
  .gnav,.gnav a,.menu-btn span,.menu-btn span::before,.menu-btn span::after{transition:none !important}
}