/* ===== 大洋電化 トップページ CSS ===== */

/* ★ トップは1カラム全幅（SWELLサイドバーを非表示にし、独自トップを全幅化）
   ※このtop.cssはフロントページのみ読み込まれるため、#content等を直接指定しても他ページに影響しない */
#content{display:block;max-width:100%;margin:0;padding-left:0;padding-right:0}
/* SWELLの .top #content{padding-top:4em} を確実に打ち消す（#body_wrapで詳細度を上げる） */
#body_wrap.top #content{padding-top:0}
#content > .l-sidebar,#sidebar.l-sidebar{display:none}
#content > .taiyo-top{width:100%;max-width:100%;margin:0}

.taiyo-top *{box-sizing:border-box}
/* トークン（色・余白）は tokens.css の :root に一元化。.taiyo-top はそれを継承して使う。 */
.taiyo-top{
  font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",YuGothic,"Noto Sans JP",sans-serif;
  color:var(--ink);line-height:1.8;background:var(--cream);
}
.taiyo-top img{display:block;max-width:100%}
.taiyo-top .wrap{max-width:1140px;margin:0 auto;padding:0 var(--s5)}
.taiyo-top a{color:inherit}

/* hero */
.taiyo-top .hero{background:linear-gradient(150deg,#eef6fc,#e7f2fb 60%,#fce9d6);position:relative;overflow:hidden;padding:0}
.taiyo-top .hero .wrap{display:grid;grid-template-columns:1.08fr 1fr;gap:var(--s7);align-items:center;padding:var(--s7) var(--s5) var(--s9)}
.taiyo-top .badge{display:inline-block;background:var(--navy);color:#fff;font-weight:800;font-size:14px;padding:var(--s2) var(--s4);border-radius:24px;margin-bottom:var(--s5)}
.taiyo-top .hero h1{font-size:52px;color:var(--navy);font-weight:900;line-height:1.3;white-space:nowrap}
.taiyo-top .hero h1 .hl{color:var(--orange)}
.taiyo-top .hero .lead{font-size:19px;margin-top:var(--s5);font-weight:500;max-width:24em}
.taiyo-top .hero .lead .ac{color:var(--navy);font-weight:800}
.taiyo-top .br-sp{display:none}
.taiyo-top .hero .pc-pt{display:inline}
.taiyo-top .hero-img{border-radius:20px;border:5px solid #fff;box-shadow:0 18px 40px rgba(19,69,110,.24)}
.taiyo-top .ctarow{display:flex;gap:var(--s4);margin-top:var(--s6);flex-wrap:wrap}
.taiyo-top .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;font-weight:800;padding:0 30px;height:60px;border-radius:30px;font-size:18px;line-height:1;transition:.15s}
.taiyo-top .btn:hover{transform:translateY(-2px)}
.taiyo-top .btn.tel{background:var(--orange-cta);color:#fff;box-shadow:0 6px 0 #9e4711}
.taiyo-top .btn.line{background:var(--lg);color:#fff;box-shadow:0 6px 0 #04a544}
.taiyo-top .btn.ghost{background:#fff;color:var(--navy);box-shadow:0 5px 0 #cfd9e2;gap:8px}
.taiyo-top .btn svg{width:22px;height:22px;fill:currentColor}
/* ゴーストボタン末尾の「▸」はCSS三角形で描画（グリフだと上寄りになるため）。align-items:centerで上下中央（base.cssと同方針） */
.taiyo-top .btn.ghost::after{content:"";width:0;height:0;border-style:solid;border-width:5px 0 5px 7.5px;border-color:transparent transparent transparent currentColor;flex:none;position:relative;top:.5px}

/* section common */
.taiyo-top section{padding:var(--s9) 0}
.taiyo-top h2.t{font-size:34px;color:var(--navy);font-weight:900;text-align:center;letter-spacing:.02em}
.taiyo-top h2.t .en{display:block;color:var(--orange-cta);font-size:14px;letter-spacing:.2em;margin-bottom:6px}
.taiyo-top .bar{width:54px;height:6px;background:var(--orange);border-radius:4px;margin:var(--s4) auto var(--s6)}
.taiyo-top .lead-c{text-align:center;color:var(--muted);font-size:17px;max-width:34em;margin:0 auto var(--s7);font-weight:500}

/* grid cards */
.taiyo-top .grid{display:grid;gap:var(--s5)}
.taiyo-top .g3{grid-template-columns:repeat(3,1fr)}
.taiyo-top .card{background:#fff;border:2px solid var(--line);border-radius:24px;overflow:hidden;text-decoration:none;color:inherit;transition:.2s;display:flex;flex-direction:column;text-align:center}
.taiyo-top .card:hover{transform:translateY(-5px);border-color:var(--orange2);box-shadow:0 14px 30px rgba(19,69,110,.12)}
.taiyo-top .card .ph{aspect-ratio:1/1;max-width:200px;width:100%;margin:var(--s5) auto var(--s4);border-radius:18px;overflow:hidden;background:#fdf6ea}
.taiyo-top .card .ph img{width:100%;height:100%;object-fit:cover}
.taiyo-top .card h3{font-size:20px;color:var(--navy);margin-bottom:var(--s2)}
/* 本文をflex-growで伸ばし、カード高さ・下端を自然に揃える（後付けpaddingを排除） */
.taiyo-top .card p{font-size:15px;color:var(--muted);padding:0 var(--s5);flex-grow:1}
.taiyo-top .card .tag{display:inline-block;background:var(--orange-cta);color:#fff;font-size:12px;font-weight:800;padding:3px 12px;border-radius:14px;margin:var(--s5) auto var(--s2)}
.taiyo-top .card .more{margin-top:auto;padding-top:var(--s3);padding-bottom:var(--s5);color:var(--orange-cta);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;gap:6px;line-height:1.2}
/* 「くわしく」の矢印はCSS三角形で描画（文字グリフだと上寄りになるため）。align-items:centerで上下中央 */
.taiyo-top .card .more::after{content:"";width:0;height:0;border-style:solid;border-width:4.5px 0 4.5px 7px;border-color:transparent transparent transparent currentColor;flex:none;position:relative;top:.5px}

.taiyo-top .why{background:#fff}
/* 理由カードは末尾が本文（.moreなし）。本文をflex-growで伸ばして下端を揃え、下余白はトークン準拠(s5)で確保 */
.taiyo-top .why .card p{padding-bottom:var(--s5)}
/* 理由タグと見出しの間を広げ、見出しと本文を詰めてバランス調整 */
.taiyo-top .why .card .tag{margin-bottom:var(--s3)}
.taiyo-top .why .card h3{margin-bottom:4px}
.taiyo-top .why .card:hover{transform:none;border-color:var(--line);box-shadow:none}
.taiyo-top .services{background:linear-gradient(var(--cream),var(--cream2))}

/* story */
.taiyo-top .story{background:#fff}
.taiyo-top .story .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--s7);align-items:center}
.taiyo-top .story-img{border-radius:20px;box-shadow:0 14px 30px rgba(19,69,110,.16)}
.taiyo-top .story .en{color:var(--orange-cta);font-weight:800;letter-spacing:.2em;font-size:14px}
.taiyo-top .story h2{font-size:30px;color:var(--navy);font-weight:900;margin:var(--s2) 0 var(--s4);line-height:1.5}
.taiyo-top .story p{font-size:17px;margin-bottom:var(--s4)}

/* subsidy */
.taiyo-top .subsidy{background:var(--orange-cta);padding:0}   /* section既定の上下paddingを打ち消す（旧 style="padding:0" を移設） */
.taiyo-top .subsidy .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;padding:var(--s6) var(--s5)}
.taiyo-top .subsidy .txt{color:#fff}
.taiyo-top .subsidy .txt b{font-size:23px;display:block}

/* cta band */
.taiyo-top .ctaband{background:var(--navy);text-align:center;padding:var(--s9) var(--s5)}
.taiyo-top .ctaband h2{color:#fff;font-size:28px;font-weight:900;margin-bottom:var(--s2)}
.taiyo-top .ctaband p{color:#cfe0f0;font-size:16px;margin-bottom:var(--s5)}
.taiyo-top .ctaband .ctarow{justify-content:center}

/* responsive */
@media(max-width:820px){
  .taiyo-top .hero .wrap{grid-template-columns:1fr;gap:var(--s5);padding:var(--s6) var(--s5) var(--s7);text-align:center}
  .taiyo-top .hero h1{font-size:38px;white-space:normal}
  .taiyo-top .hero .lead{margin-left:auto;margin-right:auto}
  .taiyo-top .hero .ctarow{justify-content:center}
  .taiyo-top .br-sp{display:inline}
  .taiyo-top .hero .pc-pt{display:none}
  .taiyo-top .g3{grid-template-columns:1fr}
  .taiyo-top .story .wrap{grid-template-columns:1fr;gap:var(--s5)}
  .taiyo-top .story .wrap>div:last-child{text-align:center}
  .taiyo-top h2.t{font-size:26px}
  .taiyo-top .subsidy .wrap{flex-direction:column;text-align:center;padding-bottom:var(--s7)} /* 縦積み時はボタン下に余白を確保（影＋白ピルで下が詰まって見えるため 32→48px） */
}

/* ===== 最新のお知らせ（静止・3枚グリッド。シニア配慮で自動スクロールは廃止） ===== */
.taiyo-top .news{background:var(--cream)}
.taiyo-top .ncard{background:#fff;border:2px solid var(--line);border-radius:20px;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:.2s}
.taiyo-top a.ncard:hover{transform:translateY(-5px);border-color:var(--orange2);box-shadow:0 14px 30px rgba(19,69,110,.12)}
.taiyo-top .ncard.is-ph{cursor:default}
.taiyo-top .ncard .nph{aspect-ratio:16/10;background:#fdf6ea;overflow:hidden}
.taiyo-top .ncard .nph img{width:100%;height:100%;object-fit:cover}
.taiyo-top .ncard .nph.noimg{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--sky),#dcebf8)}
.taiyo-top .ncard .nph.noimg svg{width:46px;height:46px;fill:var(--navy2);opacity:.5}
.taiyo-top .ncard .nbody{padding:var(--s4) var(--s5) var(--s5);display:flex;flex-direction:column;gap:var(--s2);flex-grow:1}
.taiyo-top .ncard .nmeta{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.taiyo-top .ncard .ncat{display:inline-block;background:var(--navy);color:#fff;font-size:12px;font-weight:800;padding:2px 11px;border-radius:12px;letter-spacing:.04em}
.taiyo-top .ncard.is-ph .ncat{background:var(--orange-cta)}
.taiyo-top .ncard time{font-size:13px;color:var(--muted);font-weight:700}
.taiyo-top .ncard h3{font-size:17px;color:var(--navy);font-weight:800;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.taiyo-top .news-more{text-align:center;margin-top:var(--s7)}

/* タブレット中間（821〜1024px）：3カラムは窮屈なので2カラムに、ヒーロー見出しを少し縮小 */
@media (min-width:821px) and (max-width:1024px){
  .taiyo-top .g3{ grid-template-columns:repeat(2,1fr); }
  .taiyo-top .why .g3{ grid-template-columns:repeat(3,1fr); }
  .taiyo-top .news .g3{ grid-template-columns:repeat(3,1fr); }
  .taiyo-top .hero h1{ font-size:44px; white-space:normal; }
}

/* 見出し・リード文の折り返し最適化（指示書#9・base.cssの.taiyo版と同等） */
.taiyo-top h1,.taiyo-top h2,.taiyo-top h2.t,.taiyo-top .lead,.taiyo-top .lead-c{
  text-wrap:balance; word-break:keep-all; overflow-wrap:anywhere;
}
/* 本文段落は行を埋めて折り返す（右に大きな空きを作らない）。中央寄せのリード/見出しは上のルールでbalance維持。 */
.taiyo-top p, .taiyo-top li{ text-wrap:wrap; word-break:normal; overflow-wrap:anywhere; }

/* ===== 電話番号の可視表示（指示書#20） ===== */
.taiyo-top .hero-tel{margin-top:var(--s3);font-size:14px;color:var(--navy);font-weight:700;line-height:1.6}
.taiyo-top .hero-tel a{color:var(--navy);font-weight:900;font-size:17px;text-decoration:none;letter-spacing:.02em}
.taiyo-top .hero-tel span{display:inline-block;color:var(--muted);font-weight:500;font-size:12px;margin-left:6px}
.taiyo-top .ctaband .cta-tel{margin-top:var(--s5);font-size:15px;color:#cfe0f0;font-weight:700}
.taiyo-top .ctaband .cta-tel a{display:inline-block;color:#fff;font-weight:900;font-size:26px;text-decoration:none;letter-spacing:.02em;margin-left:2px}
@media screen and (max-width:820px){
  .taiyo-top .ctaband .cta-tel a{font-size:23px}
}

/* ===== ご依頼の流れ（指示書#25） ===== */
.taiyo-top .flow-steps{max-width:760px;margin:var(--s6) auto 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s4)}
.taiyo-top .flow-steps li{display:flex;gap:var(--s4);align-items:flex-start;background:#fff;border:2px solid var(--line);border-radius:18px;padding:var(--s5)}
.taiyo-top .flow-steps .fno{flex:none;width:40px;height:40px;border-radius:12px;background:var(--navy);color:#fff;font-weight:900;font-size:18px;display:flex;align-items:center;justify-content:center}
.taiyo-top .flow-steps h3{font-size:18px;color:var(--navy);font-weight:900;margin-bottom:4px}
.taiyo-top .flow-steps p{font-size:15px;color:var(--muted);line-height:1.8}
.taiyo-top .flow-promise{max-width:760px;margin:var(--s5) auto 0;text-align:center;font-weight:800;color:var(--orange-cta);font-size:14.5px;line-height:1.9}

/* FAQ導線セクション（旧インラインstyleを移設：指示書#28-H・見た目1px不変） */
.taiyo-top .faq-link{ padding:var(--s7) 0 var(--s8); text-align:center; }
.taiyo-top .faq-link p{ color:var(--muted); font-weight:500; margin-bottom:var(--s4); }