@charset "UTF-8";
/* home.css — トップページ専用 */

/* ====== HERO 切替ステージ ====== */
.hero-stage .hero{display:none;}
.hero-stage[data-hero="a"] .hero--a,
.hero-stage[data-hero="b"] .hero--b,
.hero-stage[data-hero="c"] .hero--c{display:block;}

.hero__en{font-size:12px;letter-spacing:.32em;color:var(--sage);font-weight:500;text-transform:uppercase;margin-bottom:18px;}
.hero__ttl{font-size:var(--fs-hero);font-weight:400;letter-spacing:.14em;line-height:1.55;margin-bottom:26px;}
.hero__ttl span{display:block;}
.hero__lead{font-size:var(--fs-lead);color:var(--ink-soft);line-height:2.2;max-width:30em;margin-bottom:34px;}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;}

/* 案A：左キャッチ＋右blob */
.hero--a{padding:72px 0 84px;}
.hero--a .hero__inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.hero__media{position:relative;pointer-events:none;}
.hero__photo{width:100%;aspect-ratio:6/5;pointer-events:none;}
/* 有機的な楕円（正円ではなく少し崩した形）— 参考サイト準拠 */
image-slot.hero__photo::part(frame),
image-slot.hero__photo::part(ring){border-radius:46% 54% 42% 58% / 58% 46% 54% 42%!important;}
.hero__photo .ph__label{text-align:center;}

/* ヒーロー登場モーション（body.anim-in 中のみ—JSが2秒後に解除し確実に表示） */
@media (prefers-reduced-motion:no-preference){
  body.anim-in .hero--a .hero__en{animation:riseIn .7s .1s cubic-bezier(.22,1,.36,1) both;}
  body.anim-in .hero--a .hero__ttl span{animation:riseIn .85s cubic-bezier(.22,1,.36,1) both;}
  body.anim-in .hero--a .hero__ttl span:nth-child(1){animation-delay:.2s;}
  body.anim-in .hero--a .hero__ttl span:nth-child(2){animation-delay:.32s;}
  body.anim-in .hero--a .hero__ttl span:nth-child(3){animation-delay:.44s;}
  body.anim-in .hero--a .hero__lead{animation:riseIn .85s .58s cubic-bezier(.22,1,.36,1) both;}
  body.anim-in .hero--a .hero__cta{animation:riseIn .85s .7s cubic-bezier(.22,1,.36,1) both;}
  body.anim-in .hero--a .hero__media{animation:photoIn 1.15s .3s cubic-bezier(.22,1,.36,1) both;}
  .leaf{animation:leafFloat 7s ease-in-out infinite;}
  .hero__media .leaf:last-child{animation-delay:-3.5s;}
}
@keyframes photoIn{from{opacity:0;transform:scale(.94) translateY(20px);}to{opacity:1;transform:none;}}
@keyframes leafFloat{0%,100%{translate:0 0;}50%{translate:0 -7px;}}

/* 案B：フルブリード背景＋カード */
.hero--b{position:relative;padding:0;}
.hero--b__bg{position:absolute;inset:0;width:100%;height:100%;border-radius:0;border:none;}
.hero--b__card-wrap{position:relative;display:flex;min-height:560px;align-items:center;padding-top:60px;padding-bottom:60px;}
.hero--b__card{background:rgba(255,253,249,.93);backdrop-filter:blur(3px);border-radius:var(--radius-lg);
  padding:52px 54px;max-width:560px;box-shadow:var(--shadow);}

/* 案C：左右2分割 */
.hero--c{padding:64px 0 80px;}
.hero--c__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;}
.hero--c__photo{width:100%;aspect-ratio:5/4;border-radius:var(--radius-lg);}

/* ====== 安心メッセージ帯 ====== */
.assure{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:46px 56px;text-align:center;box-shadow:var(--shadow-sm);overflow:visible;}
.assure p{font-size:var(--fs-lead);line-height:2.2;color:var(--ink);}
.assure p span{display:inline-block;}/* 文節単位で改行 */
.assure strong{color:var(--sage-deep);font-weight:700;}

/* ====== 事業内容 ====== */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.svc-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s;min-height:300px;display:flex;}
.svc-card:hover{opacity:1;transform:translateY(-5px);box-shadow:var(--shadow);}
/* 背景画像：カード全面（タップは透過） */
.svc-card__bg,img.svc-card__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  border-radius:calc(var(--radius) - 1px);pointer-events:none;}
/* カード全体をタップ可能に（スマホで「詳しく見る」以外も反応） */
.svc-card__tap{position:absolute;inset:0;z-index:2;border-radius:inherit;}
.svc-card__body{position:relative;z-index:3;pointer-events:none;display:flex;flex-direction:column;
  align-items:flex-start;gap:13px;padding:32px 30px 28px;width:100%;border-radius:calc(var(--radius) - 1px);
  background:linear-gradient(180deg,rgba(255,253,249,.18) 0%,rgba(255,253,249,.82) 46%,rgba(255,253,249,.94) 100%);}
.svc-card__icon{width:42px;height:42px;color:var(--sage-deep);background:rgba(255,253,249,.9);
  border-radius:14px;padding:8px;box-sizing:content-box;border:1px solid var(--sage-line);}
.svc-card h3{font-size:var(--fs-h3);font-weight:500;letter-spacing:.06em;}
.svc-card p{font-size:14.5px;color:var(--ink-soft);line-height:1.95;}
.svc-card__more{margin-top:auto;font-size:13.5px;color:var(--sage-deep);font-weight:500;letter-spacing:.04em;pointer-events:auto;white-space:nowrap;
  display:inline-block;transition:transform .3s cubic-bezier(.22,1,.36,1),color .25s;}
.svc-card:hover .svc-card__more{transform:translateX(5px);}
.svc-card__more:hover{color:var(--brand);opacity:1;}
.svc-card--cta{background:var(--sage-bg);border-color:var(--sage-line);}
.svc-card--cta .svc-card__body{align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(180deg,rgba(238,240,232,.3) 0%,rgba(238,240,232,.85) 60%,rgba(238,240,232,.9) 100%);}
.svc-card--cta .svc-card__more{margin-top:0;}
.svc-card--cta h3{line-height:1.6;width:100%;}
/* 背景未選択のカードにだけ表示するヒント（画像を入れると自動で消える） */
.svc-card__hint{position:absolute;top:14px;right:16px;z-index:1;pointer-events:none;display:none;
  align-items:center;gap:5px;font-size:11px;color:#9a917f;background:rgba(255,253,249,.85);
  border:1px dashed #cfc6b5;border-radius:var(--pill);padding:4px 11px;letter-spacing:.04em;}
.svc-card:has(.svc-card__bg:not([data-filled])) .svc-card__hint{display:inline-flex;}

/* ====== 買取について ====== */
.buy-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;}
.buy-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 14px;
  display:flex;flex-direction:column;align-items:center;gap:16px;box-shadow:var(--shadow-sm);transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;}
.buy-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.buy-card__icon{width:68px;height:68px;border-radius:50%;background:var(--sage-bg);border:1px solid var(--sage-line);
  display:flex;align-items:center;justify-content:center;color:var(--sage-deep);flex:none;
  transition:transform .35s cubic-bezier(.22,1,.36,1),background .3s;}
.buy-card:hover .buy-card__icon{transform:translateY(-4px) rotate(-4deg);background:#fff;}
.buy-card__icon svg{width:30px;height:30px;}
.buy-card span{font-size:15px;font-weight:500;letter-spacing:.04em;text-align:center;}

/* ====== 買取セクション：うっすら背景画像 ====== */
#kaitori{position:relative;}
#kaitori .wrap{position:relative;z-index:1;}
.section-bg{position:absolute;inset:0;width:100%;height:100%!important;z-index:0;}
image-slot.section-bg::part(frame){background:transparent!important;border-radius:0!important;}
image-slot.section-bg::part(ring){border-radius:0!important;}
image-slot.section-bg::part(image){opacity:.14;}
.bg-hint{position:absolute;top:16px;right:18px;z-index:1;pointer-events:none;display:none;
  align-items:center;gap:5px;font-size:11px;color:#9a917f;background:rgba(255,253,249,.85);
  border:1px dashed #cfc6b5;border-radius:var(--pill);padding:4px 11px;letter-spacing:.04em;}
#kaitori:has(.section-bg:not([data-filled])) .bg-hint{display:inline-flex;}

/* ====== 当社の特徴 ====== */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.feat-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow-sm);transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;}
.feat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.feat-card__no{position:absolute;top:22px;right:26px;font-size:34px;font-weight:300;color:var(--sage-line);letter-spacing:.04em;}
.feat-card__img,img.feat-card__img{width:100%;aspect-ratio:16/10;margin-bottom:22px;pointer-events:none;
  object-fit:cover;object-position:center;border-radius:24px;display:block;}
.feat-card h3{font-size:var(--fs-h3);font-weight:500;letter-spacing:.06em;margin-bottom:12px;}
.feat-card p{font-size:14.5px;color:var(--ink-soft);line-height:2;}

/* ====== at home バナー ====== */
.athome-banner{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:40px 50px;
  box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s;}
.athome-banner:hover{opacity:1;transform:translateY(-4px);box-shadow:0 22px 50px rgba(70,60,45,.1);}
.athome-banner__tag{display:inline-block;font-size:12px;background:var(--sage);color:#fff;padding:5px 14px;border-radius:var(--pill);letter-spacing:.06em;margin-bottom:14px;}
.athome-banner h3{font-size:var(--fs-h3);font-weight:500;letter-spacing:.06em;margin-bottom:10px;}
.athome-banner p{font-size:14.5px;color:var(--ink-soft);line-height:1.9;}
.athome-banner__btn{display:inline-flex;align-items:center;gap:10px;padding:16px 34px;background:var(--ink);color:#fff;
  border-radius:var(--pill);font-weight:500;letter-spacing:.04em;white-space:nowrap;flex:none;}
.athome-banner__btn svg{transition:transform .3s cubic-bezier(.22,1,.36,1);}
.athome-banner:hover .athome-banner__btn svg{transform:translate(3px,-3px);}

/* ====== 会社概要 split ====== */
.about-split{display:grid;grid-template-columns:1.1fr 1fr;gap:54px;align-items:center;}
.about-split__img{width:100%;aspect-ratio:4/3;border-radius:var(--radius-lg);pointer-events:none;}
.about-split__txt h2{font-size:var(--fs-h2);font-weight:500;letter-spacing:.1em;margin:10px 0 20px;}
.about-split__txt p{font-size:15px;color:var(--ink-soft);line-height:2.1;margin-bottom:28px;}

/* ====== お知らせ ====== */
.news-list{max-width:840px;margin:0 auto;border-top:1px solid var(--line);}
.news-list li{border-bottom:1px solid var(--line);}
.news-list a{display:flex;align-items:center;gap:22px;padding:22px 8px;flex-wrap:wrap;transition:background .3s,padding-left .3s cubic-bezier(.22,1,.36,1);}
.news-list a:hover{opacity:1;background:var(--cream-2);padding-left:18px;}
.news-list time{font-size:14px;color:var(--ink-soft);letter-spacing:.04em;flex:none;width:96px;}
.news-cat{font-size:12px;color:var(--sage-deep);border:1px solid var(--sage-line);border-radius:var(--pill);padding:3px 14px;flex:none;}
.news-ttl{font-size:15px;}

/* ====== ヒーロー案 切替 UI（レビュー用） ====== */
.hero-switch{position:fixed;right:18px;bottom:18px;z-index:300;display:flex;align-items:center;gap:6px;
  background:rgba(70,65,59,.92);color:#fff;padding:8px 10px;border-radius:var(--pill);box-shadow:0 10px 30px rgba(0,0,0,.25);}
.hero-switch__lbl{font-size:11px;letter-spacing:.06em;padding:0 6px;opacity:.85;}
.hero-switch button{width:30px;height:30px;border-radius:50%;border:none;background:rgba(255,255,255,.16);color:#fff;font-size:13px;font-weight:600;}
.hero-switch button.is-active{background:var(--sage);}

/* ====== Responsive ====== */
@media (max-width:860px){
  .hero--a .hero__inner{grid-template-columns:1fr;gap:36px;}
  .hero__media{order:-1;width:min(100%,400px);justify-self:center;margin:0;}
  .hero--c__grid{grid-template-columns:1fr;gap:32px;}
  .svc-grid{grid-template-columns:1fr 1fr;}
  .buy-grid{grid-template-columns:repeat(3,1fr);}
  .feat-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto;}
  .about-split{grid-template-columns:1fr;gap:30px;}
  .athome-banner{padding:32px 30px;justify-content:center;text-align:center;}
}
@media (max-width:560px){
  .svc-grid{grid-template-columns:1fr;}
  .buy-grid{grid-template-columns:1fr 1fr;}
  .hero--b__card{padding:36px 28px;}
  .assure{padding:34px 26px;}
  .assure p span{display:inline;}/* スマホは通常改行（左揃え） */
  .news-list a{gap:8px 16px;}
}