/* ============================================================
   Design Studio I.D — お試しホームページ制作 LP（追加分）
   ★ styles.css（White × Prism Luxe）を継承。ここは LP 固有の差分のみ。
   既存の変数（--gold / --ink / --cream / --glass 等）をそのまま利用。
   ============================================================ */

/* ── Hero：既存 .hero の背景・プリズム演出を活かしつつ2カラム化 ── */
.hero.trial-hero{min-height:auto;display:block;overflow:hidden;}
.trial-hero-inner{position:relative;z-index:5;display:grid;grid-template-columns:1fr .82fr;
  gap:90px;align-items:center;padding:168px 0 112px;}
.trial-hero-copy{max-width:600px;}

/* 中間幅（タブレット〜小型ノート）で詰まるのを防ぎ、早めに1カラム化 */
@media (max-width:1080px){
  .trial-hero-inner{grid-template-columns:1fr;gap:52px;padding:134px 0 82px;}
  .trial-hero-copy{max-width:660px;}
  .trial-preview{max-width:460px;margin:0 auto;padding:14px 8px 30px;}
  .trial-hero h1 br{display:none;}
}

.trial-badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--serif);font-size:11.5px;
  letter-spacing:.16em;color:var(--gold-deep);font-weight:600;text-transform:uppercase;
  background:var(--glass);border:1px solid var(--line);padding:8px 16px;border-radius:999px;margin-bottom:26px;
  box-shadow:inset 0 0 12px rgba(255,255,255,.6);}
.trial-badge .dot{width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-soft));box-shadow:0 0 8px rgba(231,207,143,.8);}

.trial-hero h1{font-size:clamp(29px,4.6vw,50px);font-weight:700;line-height:1.42;letter-spacing:.01em;
  color:var(--ink);margin-bottom:24px;}
.trial-lead{font-size:16px;line-height:2.05;color:var(--ink-soft);margin-bottom:30px;}
.trial-lead strong{color:var(--ink);font-weight:700;}

.trial-price{margin-bottom:32px;}
.trial-price-label{display:block;font-family:var(--serif);font-size:12px;letter-spacing:.14em;
  color:var(--gold-deep);font-weight:600;margin-bottom:6px;text-transform:uppercase;}
.trial-price .price-card-amount{align-items:baseline;}
.trial-price .num{font-size:clamp(46px,8.5vw,66px);line-height:1;}
.trial-price .unit{font-size:22px;font-weight:700;color:var(--ink);}
.trial-price .from{font-size:14px;}

.btn-hero{padding:18px 40px;font-size:15px;}
.trial-cta-note{font-size:13px;color:var(--ink-mute);margin-top:16px;letter-spacing:.02em;}

/* ============================================================
   Hero デバイスモック：白基調・実写・静止（浮遊/傾き/ダークなし）
   ブラウザ＋スマホで「完成イメージ」と「スマホ対応」を実写で提示
   ============================================================ */
.trial-preview{position:relative;padding:14px 8px 34px;}
.device{position:relative;z-index:1;}
/* 背後のやわらかな光（サイトのプリズムに調和） */
.device::before{content:'';position:absolute;inset:0% -4% -8% 2%;z-index:0;filter:blur(40px);opacity:.5;pointer-events:none;
  background:
    radial-gradient(50% 50% at 64% 26%,rgba(231,207,143,.5),transparent 60%),
    radial-gradient(50% 50% at 28% 82%,rgba(180,206,255,.34),transparent 60%);}

/* ブラウザウィンドウ（明るい・静止） */
.dv-browser{position:relative;z-index:1;border-radius:14px;overflow:hidden;background:#fff;
  border:1px solid var(--line);
  box-shadow:0 34px 74px rgba(120,110,80,.18),0 8px 20px rgba(120,110,80,.10);}
.dv-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;
  background:linear-gradient(180deg,#fff,#faf7f1);border-bottom:1px solid var(--line-soft);}
.dv-bar .d{width:10px;height:10px;border-radius:50%;flex:none;}
.dv-bar .r{background:#f4c9c4;}.dv-bar .y{background:#f3dfb0;}.dv-bar .g{background:#cbe6cb;}
.dv-url{margin-left:8px;flex:1;display:flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.03em;
  color:var(--ink-mute);background:var(--cream);border:1px solid var(--line-soft);border-radius:999px;padding:5px 12px;}
.dv-url svg{width:9px;height:9px;stroke:var(--gold-deep);fill:none;stroke-width:2;flex:none;}

.dv-shot{position:relative;aspect-ratio:16/10.5;overflow:hidden;}
.dv-shot img{width:100%;height:100%;object-fit:cover;}
.dv-shot::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,16,10,.06) 0%,rgba(20,16,10,.10) 42%,rgba(20,16,10,.42) 100%);}
.dv-nav{position:absolute;top:15px;left:20px;right:20px;z-index:2;display:flex;align-items:center;justify-content:space-between;}
.dv-nav .lg{font-family:var(--serif);font-weight:700;font-size:13px;letter-spacing:.16em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.3);}
.dv-nav .mn{display:flex;gap:7px;}
.dv-nav .mn i{width:14px;height:2px;border-radius:2px;background:rgba(255,255,255,.75);}
.dv-copy{position:absolute;left:24px;bottom:26px;z-index:2;}
.dv-eyebrow{display:block;font-family:var(--serif);font-size:9px;letter-spacing:.4em;color:var(--gold-soft);margin-bottom:9px;}
.dv-title{font-family:var(--serif);font-weight:700;font-size:clamp(24px,4vw,32px);line-height:1.05;color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.45);}
.dv-btn{display:inline-block;margin-top:15px;font-size:9.5px;font-weight:700;letter-spacing:.1em;color:#3a2f14;
  background:linear-gradient(90deg,#f5e4b2,#e7cf8f);padding:7px 16px;border-radius:999px;
  box-shadow:0 6px 16px rgba(184,146,63,.4);}

/* スマホ（同じサイトのレスポンシブ表示＝スマホ対応の実証） */
.dv-phone{position:absolute;right:2px;bottom:-10px;z-index:3;width:26%;min-width:92px;max-width:118px;
  padding:5px;border-radius:20px;background:linear-gradient(160deg,#fff,#f2ede3);
  box-shadow:0 22px 44px rgba(120,110,80,.26),inset 0 0 0 1px rgba(255,255,255,.7);}
.dv-phone-shot{position:relative;aspect-ratio:9/18;overflow:hidden;border-radius:14px;background:#000;}
.dv-phone-shot img{width:100%;height:100%;object-fit:cover;object-position:62% 42%;}
.dv-phone-shot::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(20,16,10,.34));}
.dv-phone-notch{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:32%;height:5px;border-radius:999px;
  background:rgba(0,0,0,.4);z-index:2;}

/* ── Trust strip（広告の3訴求／既存 .problem-ic を流用） ── */
.trial-trust{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;}
.trial-trust-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:38px 0;}
.trial-trust-item{display:flex;align-items:center;gap:16px;justify-content:center;}
.trial-trust-item .problem-ic{margin:0;width:52px;height:52px;flex:none;}
.trial-trust-item b{display:block;font-size:15px;font-weight:700;color:var(--ink);line-height:1.5;}
.trial-trust-item span{font-size:12.5px;color:var(--ink-soft);}

/* ── ✦ チェックリスト（お悩み／既存 service-includes と同トーン） ── */
.trial-checks{max-width:720px;margin:0 auto;list-style:none;border-top:1px solid var(--line);}
.trial-checks li{display:flex;gap:16px;align-items:flex-start;padding:20px 6px;border-bottom:1px solid var(--line);
  font-size:16px;line-height:1.8;color:var(--ink);}
.trial-checks li::before{content:'✦';color:var(--gold);font-size:13px;line-height:1.85;flex:none;}
.trial-checks-after{text-align:center;font-size:clamp(17px,2.4vw,20px);font-weight:700;color:var(--ink);
  line-height:1.9;margin-top:44px;}

/* ── ストーリー ── */
.trial-story{background:var(--cream);}
.trial-story-body{max-width:680px;margin:0 auto;}
.trial-story-body p{font-size:16px;line-height:2.1;color:var(--ink-soft);margin-bottom:22px;}
.trial-story-body p strong{color:var(--ink);}
.trial-tags{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:2px 0 24px;}
.trial-tags li{font-family:var(--serif);font-weight:700;font-size:13px;color:var(--gold-deep);
  border:1px solid var(--line);border-radius:999px;padding:7px 16px;background:var(--glass);}
.trial-quote{font-size:clamp(20px,3.4vw,27px);font-weight:700;line-height:1.7;color:var(--ink);
  border-left:3px solid var(--gold);padding:8px 0 8px 24px;margin:10px 0 26px;}
.trial-sign{text-align:right;font-family:var(--serif);font-size:14px;color:var(--ink-mute);letter-spacing:.06em;}

/* ── 制作フロー：既存 .process-steps を5ステップに ── */
.process-steps.is-5{grid-template-columns:repeat(5,1fr);}
.process-steps.is-5 .step p{font-size:13px;}
@media (max-width:1024px){
  .process-steps.is-5{grid-template-columns:repeat(3,1fr);gap:34px 20px;}
  .process-steps.is-5::before{display:none;}
}
@media (max-width:600px){ .process-steps.is-5{grid-template-columns:1fr;} }

/* ── 価格の理由：既存 .sol-card を2カラムで ── */
.trial-reasons{display:grid;grid-template-columns:1fr 1fr;gap:24px;position:relative;z-index:1;}
.trial-reasons .sol-card{padding:40px 34px;}
.trial-reasons .sol-kicker{font-family:var(--serif);font-size:12px;font-weight:700;letter-spacing:.1em;
  color:var(--gold-deep);text-transform:uppercase;margin-bottom:16px;display:block;}
.trial-reasons .sol-card h3{font-size:21px;line-height:1.5;margin-bottom:16px;}
.trial-reasons .sol-card p{font-size:15px;line-height:2;color:var(--ink-soft);}
.trial-reasons .sol-card p+p{margin-top:14px;}

/* 充当フロー図 */
.trial-alloc{display:flex;align-items:stretch;justify-content:center;gap:16px;flex-wrap:wrap;
  margin-top:44px;position:relative;z-index:1;}
.alloc-node{background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);padding:24px 32px;
  text-align:center;min-width:220px;backdrop-filter:blur(8px);box-shadow:inset 0 0 12px rgba(255,255,255,.5);}
.alloc-node .t{font-family:var(--serif);font-size:12px;letter-spacing:.12em;color:var(--gold-deep);
  text-transform:uppercase;margin-bottom:8px;}
.alloc-node .v{font-size:21px;font-weight:700;color:var(--ink);}
.alloc-node.is-hi{border-color:var(--gold-soft);background:linear-gradient(160deg,rgba(231,207,143,.18),var(--glass));}
.alloc-node.is-hi .v{color:var(--gold-deep);}
.alloc-arrow{display:grid;place-items:center;font-family:var(--serif);font-size:11px;letter-spacing:.1em;
  color:var(--gold-deep);text-transform:uppercase;}
.alloc-arrow svg{width:30px;height:30px;stroke:var(--gold);fill:none;stroke-width:1.6;margin-bottom:4px;}

/* ── こんな方におすすめ ── */
.trial-fit{display:grid;grid-template-columns:1fr 1fr;gap:2px 40px;max-width:820px;margin:0 auto;list-style:none;}
.trial-fit li{display:flex;gap:14px;align-items:center;padding:18px 4px;border-bottom:1px solid var(--line);
  font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.6;}
.trial-fit li svg{width:20px;height:20px;flex:none;stroke:var(--gold-deep);fill:none;stroke-width:2;}

/* ── 最後のCTA（既存 .cta-panel を利用） ── */
.trial-final-lead{font-size:clamp(18px,3vw,24px);font-weight:700;color:var(--ink);line-height:1.7;margin-bottom:14px;}

/* ── Responsive ── */
@media (max-width:860px){
  .container{padding:0 24px;}      /* スマホの左右余白を広げる */
  .trial-hero-inner{grid-template-columns:1fr;gap:44px;padding:112px 0 68px;}
  .trial-preview{max-width:400px;padding:12px 6px 26px;}
  .trial-hero h1 br{display:none;}
  .trial-trust-inner{grid-template-columns:1fr;gap:8px;padding:28px 0;}
  .trial-trust-item{justify-content:flex-start;max-width:340px;margin:0 auto;width:100%;}
  .trial-reasons{grid-template-columns:1fr;gap:16px;}
  .trial-reasons .sol-card{padding:30px 26px;}
  .trial-alloc{flex-direction:column;align-items:center;}
  .alloc-arrow svg{transform:rotate(90deg);}
  .trial-fit{grid-template-columns:1fr;gap:0;}
}
@media (max-width:420px){
  .container{padding:0 20px;}
  .trial-preview{max-width:320px;}
}