/* Layout: 白基調の一段組。大きな写真に白い見出しを重ね、藤（花房）の紫と陽だまりの黄色は小さな差し色にだけ使う */
:root{
  --paper:#FFFFFF;      /* 白 */
  --paper-2:#F7F7F8;    /* 交互のセクションに使う、ごく淡いグレー */
  --ink:#2E3448;
  --ink-soft:#5F6577;
  --line:#E6E6EB;
  --wisteria:#7A61B8;   /* 藤色（差し色） */
  --wisteria-tint:#EEE8FA;
  --sun:#F4C062;        /* 陽だまり */
  --sun-tint:#FFF3D9;
  --on-ink:#FFFFFF;
  --banner:#FFFFFF;        /* 上部バナー：白 */
  --photo-shade:rgba(22,26,40,.62); /* 写真の上の白い文字を読みやすくする影 */
  color-scheme:light;      /* ダークモードでも白ベースのまま */
  --f-display:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  --f-sharp:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --f-latin:"Jost","Futura","Helvetica Neue",sans-serif;
  --s-1:clamp(2.1rem,1.4rem + 3vw,3.6rem);
  --s-2:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);
  --s-3:1.2rem;
  --s-body:1rem;
  --s-small:.82rem;
  --wrap:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--s-body);line-height:1.9;letter-spacing:.03em;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--paper)}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.45;text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font-family:var(--f-latin);font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:var(--wisteria);display:flex;align-items:center;gap:.8em}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
:focus-visible{outline:2px solid var(--wisteria);outline-offset:3px;border-radius:2px}

/* 試作バナー */
.proto{background:var(--banner);color:var(--ink-soft);font-size:var(--s-small);text-align:center;padding-block:.45rem;border-bottom:1px solid var(--line)}

/* ヘッダー */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--paper) 95%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.85rem}
.logo{display:flex;flex-direction:column;text-decoration:none;line-height:1.2}
.logo b{font-family:var(--f-latin);font-weight:500;letter-spacing:.24em;font-size:1rem}
.logo span{font-size:.7rem;color:var(--ink-soft);letter-spacing:.12em}
nav.global{display:flex;align-items:center;gap:1.4rem;font-size:.86rem}
nav.global a{text-decoration:none}
nav.global a:not(.btn):hover{color:var(--wisteria)}
.btn{display:inline-flex;align-items:center;gap:.6em;background:var(--ink);color:var(--on-ink);text-decoration:none;padding:.75em 1.5em;border:1px solid var(--ink);border-radius:999px;font-size:.88rem;white-space:nowrap;letter-spacing:.08em;cursor:pointer;font-family:var(--f-body)}
.btn:hover{background:var(--wisteria);border-color:var(--wisteria);color:var(--on-ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{color:var(--on-ink)}
nav.global .links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
/* 狭い画面でもメニューはまとめず、すべての項目を並べて表示する */
@media (max-width:1180px){
  header.site .wrap{flex-wrap:wrap;row-gap:.5rem}
  nav.global{display:contents}
  nav.global .btn{order:2}
  nav.global .links{order:3;flex-basis:100%;gap:.3rem 1.1rem;font-size:.84rem;padding-top:.5rem;border-top:1px solid var(--line)}
}

/* ヒーロー：大きな写真に、会社のコンセプトワードを重ねる */
.hero .wrap{padding-block:clamp(1.2rem,3vw,2.2rem) clamp(2.5rem,5vw,4rem)}
.hero .stage{position:relative;display:grid}
.hero .photo{position:relative;border-radius:32px;overflow:hidden;aspect-ratio:16/9;max-width:100%;background:var(--wisteria-tint)}
.hero .photo img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;display:block}
.hero .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--photo-shade) 0%,rgba(22,26,40,.38) 45%,rgba(22,26,40,0) 78%)}
.hero .sun{position:absolute;width:clamp(90px,14vw,180px);aspect-ratio:1;border-radius:50%;background:var(--sun);opacity:.75;right:-18px;top:-22px;z-index:2}
.hero .concept{position:absolute;inset:0;z-index:1;display:grid;align-content:center;gap:clamp(.8rem,2vw,1.4rem);padding:clamp(1.4rem,5vw,4.5rem);max-width:min(40rem,62%)}

.hero .concept .eyebrow{color:#FFFFFF}
.hero h1{font-family:var(--f-sharp);font-weight:300;font-size:clamp(2.1rem,1.1rem + 4vw,4.3rem);line-height:1.35;letter-spacing:.06em;color:#FFFFFF}
.hero h1 b{font-weight:700;color:#FFFFFF}
.hero h1 .sm{display:block;font-size:.5em;letter-spacing:.12em;margin-bottom:.3em}
.hero .concept p{color:#FFFFFF;font-size:clamp(.92rem,.85rem + .3vw,1.05rem);max-width:30em}
.hero .tate{position:absolute;right:clamp(1rem,3vw,2.4rem);bottom:clamp(1rem,3vw,2.4rem);z-index:1;writing-mode:vertical-rl;font-family:var(--f-display);font-weight:700;font-size:clamp(.95rem,.8rem + .6vw,1.3rem);letter-spacing:.2em;color:var(--ink);background:color-mix(in srgb,var(--paper) 90%,transparent);padding:1em .55em;border-radius:999px}
.hero .cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.4rem}
.hero .cta .btn{background:#FFFFFF;color:var(--ink);border-color:#FFFFFF}
.hero .cta .btn:hover{background:var(--wisteria);border-color:var(--wisteria);color:#FFFFFF}
.hero .cta .btn.ghost{background:transparent;color:#FFFFFF;border-color:#FFFFFF}
@media (max-width:720px){
  .hero .photo{aspect-ratio:3/4;border-radius:24px}
  .hero .photo::after{background:linear-gradient(0deg,rgba(22,26,40,.78) 0%,rgba(22,26,40,.45) 55%,rgba(22,26,40,.1) 100%)}
  .hero .concept{max-width:none;align-content:end;padding:1.4rem}
  .hero .tate{bottom:auto;top:1rem;right:1rem}
}

/* セクション共通 */
section.block{padding-block:clamp(3.5rem,8vw,6.5rem)}
section.block.alt{background:var(--paper-2)}
.head{display:grid;gap:.9rem;margin-bottom:clamp(2rem,4vw,3rem);max-width:40rem}
.head h2{font-size:var(--s-2)}
.head p{color:var(--ink-soft)}

/* 立場別の入口 */
.doors{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.door{background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;padding:0 1.4rem 1.6rem;display:grid;gap:.8rem;align-content:start;text-decoration:none;transition:transform .2s,box-shadow .2s;box-shadow:none}
.door:hover{transform:translateY(-3px);box-shadow:0 6px 0 var(--sun)}
@media (prefers-reduced-motion:reduce){.door{transition:none}.door:hover{transform:none}}
.door .thumb{display:block;width:calc(100% + 2.8rem);max-width:none;margin:0 -1.4rem .4rem;aspect-ratio:16/10;object-fit:cover}
.door .verb{font-family:var(--f-display);font-size:1.6rem;font-weight:600}
.door .who{font-size:var(--s-small);color:var(--wisteria);letter-spacing:.1em}
.door p{font-size:.9rem;color:var(--ink-soft)}
.door .go{font-family:var(--f-latin);font-size:.75rem;letter-spacing:.2em;margin-top:.4rem}
@media (max-width:900px){.doors{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.doors{grid-template-columns:1fr}}

/* ワンストップ */
.onestop{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.onestop .text{display:grid;gap:1.2rem;min-width:0}
.onestop .text p{color:var(--ink-soft)}
.worries{display:grid;gap:.6rem;padding:0;margin:0;list-style:none}
.worries li{padding:.75rem 1.1rem;background:var(--paper);border:1px solid var(--line);border-radius:14px;font-size:.92rem}
.worries li::before{content:"「";color:var(--wisteria)}
.worries li::after{content:"」";color:var(--wisteria)}
.ring{position:relative;aspect-ratio:1;max-width:420px;width:100%;margin-inline:auto}
.ring svg{width:100%;height:100%}
.ring text{font-family:var(--f-body);fill:var(--ink)}
@media (max-width:820px){.onestop{grid-template-columns:1fr}}

/* 事業内容 */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.svc{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:1.8rem 1.5rem;display:grid;gap:.7rem;align-content:start}
.svc .en{font-family:var(--f-latin);font-size:.7rem;letter-spacing:.24em;color:var(--wisteria);text-transform:uppercase}
.svc h3{font-size:1.25rem}
.svc p{font-size:.9rem;color:var(--ink-soft)}
@media (max-width:900px){.services{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.services{grid-template-columns:1fr}}

/* 買取 */
.kaitori{background:var(--paper-2);color:var(--ink)}
.kaitori .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding-block:clamp(3.5rem,8vw,6rem)}
.kaitori .eyebrow{color:var(--wisteria)}
.kaitori h2{font-size:var(--s-2)}
.kaitori .text{display:grid;gap:1.2rem;min-width:0}
.kaitori .text p{opacity:.85}
.range{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:1.6rem;display:grid;gap:1rem}
.range dl{display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.4rem;margin:0}
.range dt{font-size:var(--s-small);opacity:.7;letter-spacing:.1em}
.range dd{margin:0;font-family:var(--f-display);font-size:1.15rem;font-variant-numeric:tabular-nums}
.kaitori .btn:hover{background:var(--wisteria);border-color:var(--wisteria);color:var(--on-ink)}
.note{font-size:.72rem;opacity:.7}
@media (max-width:820px){.kaitori .wrap{grid-template-columns:1fr}}

/* アフターサービス */
.after{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}
.after .text{display:grid;gap:1.2rem;align-content:start;min-width:0}
.after .text p{color:var(--ink-soft)}
.trouble{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.trouble div{border-top:3px solid var(--sun);padding-top:.8rem;display:grid;gap:.3rem}
.trouble b{font-family:var(--f-display);font-size:1.05rem}
.trouble span{font-size:.86rem;color:var(--ink-soft)}
@media (max-width:820px){.after{grid-template-columns:1fr}}

/* ご相談の流れ */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;counter-reset:step;list-style:none;padding:0;margin:0}
.flow li{display:grid;gap:.5rem;align-content:start;position:relative;padding-top:2.6rem}
.flow li::before{counter-increment:step;content:"STEP " counter(step);position:absolute;top:0;left:0;font-family:var(--f-latin);font-size:.72rem;letter-spacing:.22em;color:var(--wisteria)}
.flow li::after{content:"";position:absolute;top:1.6rem;left:0;right:-1.5rem;height:1px;background:var(--line)}
.flow li:last-child::after{right:0}
.flow b{font-family:var(--f-display);font-size:1.1rem}
.flow span{font-size:.88rem;color:var(--ink-soft)}
@media (max-width:820px){.flow{grid-template-columns:1fr 1fr}.flow li::after{right:0}}
@media (max-width:480px){.flow{grid-template-columns:1fr}}

/* FAQ */
.faq{display:grid;gap:0;border-top:1px solid var(--line);max-width:52rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:baseline;padding:1.2rem .2rem;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-family:var(--f-display);color:var(--wisteria);font-size:1.15rem}
.faq summary::after{content:"＋";color:var(--ink-soft)}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 .2rem 1.3rem 2.1rem;color:var(--ink-soft);font-size:.94rem}

/* 会社概要 */
.company{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.company table{width:100%;border-collapse:collapse;font-size:.94rem}
.company th,.company td{text-align:left;padding:1rem .4rem;border-bottom:1px solid var(--line);vertical-align:top}
.company th{width:8.5em;font-weight:500;color:var(--ink-soft);white-space:nowrap}
.todo{display:inline-block;font-size:.72rem;background:var(--wisteria-tint);color:var(--wisteria);padding:.05em .6em;margin-left:.4em;letter-spacing:.06em}
@media (max-width:820px){.company{grid-template-columns:1fr}}

/* お問い合わせ */
.contact .wrap{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(2rem,5vw,4rem)}
.contact .text{display:grid;gap:1.2rem;align-content:start;min-width:0}
.contact .text p{color:var(--ink-soft)}
.mail{font-family:var(--f-latin);font-size:1.15rem;letter-spacing:.06em;user-select:all}
form{display:grid;gap:1.1rem}
.field{display:grid;gap:.35rem}
.field label{font-size:.86rem;font-weight:500}
.req{color:var(--wisteria);font-size:.75rem;margin-left:.4em}
input,select,textarea{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);padding:.75em .9em;width:100%;border-radius:10px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--wisteria);outline-offset:0;border-color:var(--wisteria)}
textarea{min-height:9rem;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips label{display:inline-flex;align-items:center;gap:.4em;border:1px solid var(--line);border-radius:999px;padding:.4em 1em;font-size:.86rem;cursor:pointer;background:var(--paper)}
.chips input{width:auto;accent-color:var(--wisteria)}
.chips label:has(input:checked){border-color:var(--wisteria);background:var(--wisteria-tint)}
.chips.radio label{border-radius:10px}
.sent{border:1px solid var(--wisteria);border-radius:12px;background:var(--wisteria-tint);padding:1rem 1.2rem;font-size:.92rem}
@media (max-width:820px){.contact .wrap{grid-template-columns:1fr}}

/* フッター */
footer{border-top:1px solid var(--line);font-size:var(--s-small);color:var(--ink-soft)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-block:2rem}
footer nav{display:flex;flex-wrap:wrap;gap:1.2rem}
footer a{text-decoration:none}

/* 下層ページ */
.sub-hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding-block:clamp(1.4rem,3vw,2.4rem) clamp(2.5rem,5vw,4rem)}
.crumb{font-size:var(--s-small);color:var(--ink-soft);display:flex;gap:.5em;flex-wrap:wrap}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--wisteria)}
.sub-hero .text{display:grid;gap:1rem;min-width:0}
.sub-hero .verb-lg{font-family:var(--f-display);font-weight:700;font-size:clamp(2.6rem,1.6rem + 4vw,4.4rem);line-height:1.1;letter-spacing:.04em}
.sub-hero .verb-lg small{display:block;font-size:.32em;color:var(--wisteria);letter-spacing:.14em;margin-bottom:.6em}
.sub-hero h1{font-size:var(--s-2)}
.sub-hero .text p{color:var(--ink-soft)}
.sub-hero .pic{position:relative}
.sub-hero .pic img{width:100%;max-width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:28px;display:block;position:relative;z-index:1}
.sub-hero .pic::before{content:"";position:absolute;width:30%;aspect-ratio:1;border-radius:50%;background:var(--sun);opacity:.6;left:-5%;bottom:-8%}
.jump{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.jump a{font-size:.84rem;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:.35em 1em;background:var(--paper)}
.jump a:hover{border-color:var(--wisteria);color:var(--wisteria)}
@media (max-width:820px){.sub-hero .wrap{grid-template-columns:1fr}.sub-hero .pic{order:-1}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.panel-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:clamp(1.4rem,3vw,2.2rem);display:grid;gap:1rem;align-content:start;min-width:0}

.panel-card h3{font-size:1.3rem}
.panel-card .en{font-family:var(--f-latin);font-size:.7rem;letter-spacing:.24em;color:var(--wisteria);text-transform:uppercase}
.panel-card p{color:var(--ink-soft);font-size:.94rem}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.92rem}
.ticks li{display:grid;grid-template-columns:1.2em 1fr;gap:.5em}
.ticks li::before{content:"";width:.7em;height:.7em;border-radius:50%;background:var(--sun);margin-top:.55em}
@media (max-width:820px){.split{grid-template-columns:1fr}}

.worries.grid{grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){.worries.grid{grid-template-columns:1fr}}

.flow.long{grid-template-columns:repeat(3,1fr);row-gap:2.2rem}
.flow.long li::after{right:0}
@media (max-width:820px){.flow.long{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.flow.long{grid-template-columns:1fr}}

.tablebox{overflow-x:auto;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:.4rem 1.2rem}

.compare{width:100%;border-collapse:collapse;font-size:.92rem;min-width:520px}
.compare th,.compare td{padding:.95rem .6rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:0}
.compare thead th{font-family:var(--f-display);font-size:1.02rem}
.compare thead th.hl{color:var(--wisteria)}
.compare tbody th{font-weight:500;color:var(--ink-soft);white-space:nowrap;width:9em}
.compare td.num,.compare th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.compare tr.total th,.compare tr.total td{font-weight:700;color:var(--ink)}
.caption{font-size:.76rem;color:var(--ink-soft);margin-top:.8rem}

.memo{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--sun);border-radius:20px;padding:clamp(1.3rem,3vw,2rem);display:grid;gap:.8rem}
.memo h3{font-size:1.15rem}
.memo p,.memo li{font-size:.92rem}
.memo ul{margin:0;padding-left:1.2em;display:grid;gap:.3rem}

.sub-cta .wrap{padding-block:clamp(3rem,6vw,4.5rem)}
.sub-cta .box{background:var(--paper-2);border:1px solid var(--line);border-radius:28px;padding:clamp(1.8rem,4vw,3rem);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}
.sub-cta h2{font-size:var(--s-2)}
.sub-cta p{color:var(--ink-soft);margin-top:.4rem}
.others{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem;font-size:.88rem;align-items:center}
.others a{text-decoration:none;border-bottom:1px solid var(--line)}
.others a:hover{color:var(--wisteria);border-color:var(--wisteria)}
.stack{display:grid;gap:clamp(1.5rem,3vw,2.2rem)}

/* 文字の折り返し：文節（意味のまとまり）で改行し、1文字だけの行を作らない */
body{margin:0;word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
.hero .tate{word-break:normal;overflow-wrap:normal;white-space:nowrap}
.hero{overflow-x:clip}
p,li,dd,td,summary,.faq .a,.flow span,.svc p,.door p{text-wrap:pretty}
.compare tbody th,.compare td.num{white-space:nowrap;text-wrap:nowrap}
/* 1920×1080 など広い画面 */
@media (min-width:1600px){
  :root{--wrap:1320px}
  .hero .concept{max-width:min(60rem,76%)}
}

/* まずは気軽にご相談ください */
.consult{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.consult-card{border:1px solid var(--line);border-radius:24px;padding:clamp(1.6rem,3.5vw,2.6rem);display:grid;gap:1rem;align-content:start;background:var(--paper)}
.consult-card .kicker{font-size:.84rem;color:var(--wisteria);font-weight:500}
.consult-card h3{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem)}
.consult-card p{color:var(--ink-soft);font-size:.94rem}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.tags li{font-size:.8rem;border:1px solid var(--line);border-radius:999px;padding:.15em .9em;background:var(--paper-2)}
.consult-card .btn{justify-self:start;margin-top:.4rem}
@media (max-width:820px){.consult{grid-template-columns:1fr}}

/* CSR・SDGs・採用（文章中心のページ） */
.sub-hero.textonly .wrap{grid-template-columns:1fr}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.prose{max-width:46rem;display:grid;gap:1rem;color:var(--ink-soft)}
.logo b,.logo span,nav.global .links a{white-space:nowrap}
@media (max-width:720px){.hero .tate{display:none}}
@media (max-width:1180px){html{scroll-padding-top:140px}}