@charset "UTF-8";

:root {
  --ezec-teal: #2ca79b;
  --ezec-blue: #3a8fcc;
  --ezec-navy: #13325c;
  --ezec-gradient: linear-gradient(120deg, var(--ezec-teal), var(--ezec-blue));
  --ezec-blue-tint: #eaf3f8;
  --ezec-ink: #13325c;
  --ezec-paper: #ffffff;
  --ezec-light: #f2f4f7;
  --ezec-line: #d7e0e6;
}

body { background: var(--ezec-paper); color: var(--ezec-ink); }
main { overflow: hidden; }
#top main > section { margin-top:0; }
.renewal-wrap { width: min(1120px, 88%); margin: 0 auto; }
.renewal-tag { display:inline-block; margin:29px 0 0 18px; font-size:1.5rem; font-weight:700; vertical-align:top; white-space:nowrap; }
.renewal-hero { position:relative; display:flex; align-items:center; height:calc(100vh - 80px); height:calc(100svh - 80px); min-height:0; padding:clamp(40px,6vh,70px) 0; overflow:hidden; background:#fff; }
.renewal-hero-slides,.renewal-hero-slides span { position:absolute; inset:0; }
.renewal-hero-slides { z-index:0; }
.renewal-hero-slides span { opacity:0; background-position:center right; background-size:cover; background-repeat:no-repeat; transform:scale(1); transition:opacity 1.2s ease,transform 7s ease; }
.renewal-hero-slides span.is-active { opacity:1; transform:scale(1.06); }
/* スライド背景画像はJS側でランダムなプールから動的にinline styleとして設定（index.html末尾のスクリプト参照） */
.renewal-hero:before { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(90deg,rgba(255,255,255,.98) 0,rgba(255,255,255,.95) clamp(220px,24vw,400px),rgba(255,255,255,.65) clamp(500px,50vw,760px),rgba(255,255,255,0) clamp(650px,60vw,920px)); pointer-events:none; }
.renewal-hero .renewal-wrap { position:relative; z-index:2; margin:0; padding-left:clamp(24px,6vw,100px); width:100%; max-width:none; }
.renewal-hero-dots { position:absolute; z-index:3; right:4%; bottom:28px; display:flex; gap:9px; }
.renewal-hero-dots span { width:28px; height:4px; background:rgba(0,0,0,.28); transition:background-color .35s ease,width .35s ease; }
.renewal-hero-dots span.is-active { width:48px; background:var(--ezec-teal); }
.renewal-hero-copy { max-width:670px; }
.renewal-area { margin:0 0 22px; color:#222; font-size:1.45rem; font-weight:700; }
.renewal-hero-small { display:inline-block; margin:0 0 16px; padding:8px 15px; color:#fff; background:var(--ezec-gradient); font-size:1.8rem; font-weight:700; }
.renewal-hero h1 { margin:0; font-size:clamp(4.6rem, 1.745rem + 3.71vw, 6.2rem); line-height:1.32; letter-spacing:.02em; font-weight:700; color:var(--ezec-ink); }
.renewal-hero h1 .renewal-copy-accent { color:var(--ezec-ink); }
.renewal-lead { margin:28px 0 0; font-size:2rem; line-height:2; font-weight:500; }
.renewal-actions { display:flex; gap:25px; align-items:center; margin-top:38px; }

/*=================================================================
  ヒーローの表示演出：タグ・見出しは1文字ずつのアニメーション（JS側で
  index.html末尾のスクリプトが文字をspanに分割し、animation-delayを
  順番に付与）。それ以外はフェード／ポップで緩急をつける。tech-d.co.jp等の
  マーカー帯型の演出とは異なる、Ezec独自のバリエーション。
=================================================================*/
@keyframes heroReveal { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes heroCharIn {
  from { opacity:0; transform:translateY(.5em) rotate(6deg); }
  to { opacity:1; transform:translateY(0) rotate(0deg); }
}
@keyframes heroPop {
  0% { opacity:0; transform:scale(.8) translateY(10px); }
  65% { opacity:1; transform:scale(1.06) translateY(0); }
  100% { opacity:1; transform:scale(1) translateY(0); }
}
@keyframes heroUnderline { to { transform:scaleX(1); } }
@keyframes heroAccentColor { to { color:var(--ezec-teal); } }

.renewal-hero-copy .renewal-area { opacity:0; animation:heroReveal .7s cubic-bezier(.22,1,.36,1) .15s forwards; }
.renewal-hero-copy .renewal-hero-small,
.renewal-hero-copy h1 .renewal-heading-line { opacity:1; }
.hero-char { display:inline-block; opacity:0; animation:heroCharIn .7s cubic-bezier(.22,1,.36,1) forwards; }
.renewal-hero-copy h1 .renewal-copy-accent { position:relative; display:inline-block; animation:heroAccentColor .01s linear 1.3s forwards; }
.renewal-hero-copy h1 .renewal-copy-accent:after {
  content:""; position:absolute; left:0; right:0; bottom:-.04em; height:.05em; border-radius:2px;
  background:var(--ezec-gradient); transform:scaleX(0); transform-origin:left;
  /* 下線は演出の一番最後に伸びるよう、JS側でヒーロー全体の所要時間から逆算した値を --hero-underline-delay に設定 */
  animation:heroUnderline .6s cubic-bezier(.22,1,.36,1) var(--hero-underline-delay, 2.6s) forwards;
}
.renewal-hero-copy .renewal-lead { opacity:0; animation:heroReveal .7s cubic-bezier(.22,1,.36,1) forwards; animation-delay:2s; }
.renewal-hero-copy .renewal-btn { opacity:0; animation:heroPop .6s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay:2.35s; }
.renewal-hero-copy .renewal-link { opacity:0; animation:heroReveal .6s cubic-bezier(.22,1,.36,1) forwards; animation-delay:2.7s; }
@media (prefers-reduced-motion: reduce) {
  .renewal-hero-copy .renewal-area,
  .hero-char,
  .renewal-hero-copy .renewal-lead,
  .renewal-hero-copy .renewal-btn,
  .renewal-hero-copy .renewal-link { opacity:1; animation:none; transform:none; }
  .renewal-hero-copy h1 .renewal-copy-accent { animation:none; color:var(--ezec-teal); }
  .renewal-hero-copy h1 .renewal-copy-accent:after { animation:none; transform:scaleX(1); }
}

/*=================================================================
  ヒーロー以外の見出し・コピーの表示演出：スクロールで画面に入ったタイミングで
  1文字ずつ表示（index.html末尾のスクリプトがIntersectionObserverで発火、
  .char-reveal に .is-char-revealed が付与されたら開始）。
=================================================================*/
.char-reveal-char { display:inline-block; opacity:0; }
.char-reveal.is-char-revealed .char-reveal-char { animation:heroCharIn .55s cubic-bezier(.22,1,.36,1) forwards; }
.renewal-btn { display:inline-block; min-width:250px; padding:16px 38px; border-radius:40px; text-align:center; color:#fff; font-size:1.7rem; font-weight:700; }
.renewal-btn-red { background:var(--ezec-gradient); }
.renewal-btn-black { background:#111; }
.renewal-link { display:inline-block; padding:8px 20px 8px 3px; border-bottom:2px solid var(--ezec-teal); font-size:1.6rem; font-weight:700; }
.renewal-btn:after,.renewal-link:after,#g-nav .gnav-contact a:after { content:""; display:inline-block; width:7px; height:7px; margin-left:10px; margin-bottom:1px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); vertical-align:middle; transition:transform .2s ease; }
.renewal-btn:hover:after,.renewal-link:hover:after,#g-nav .gnav-contact a:hover:after { transform:rotate(45deg) translate(2px,-2px); }
.renewal-intro,.renewal-services,.renewal-strengths,.renewal-ec-story,.renewal-works,.renewal-voices,.renewal-price,.renewal-flow,.renewal-faq,.renewal-news { padding:clamp(120px,10vw,150px) 0 clamp(150px,12vw,190px); }
.renewal-intro { position:relative; overflow:hidden; background:var(--ezec-light); }
.renewal-intro:before { content:""; position:absolute; z-index:0; top:-90px; right:-110px; width:440px; height:440px; background-image:radial-gradient(circle,rgba(19,50,92,.09) 1.5px,transparent 1.8px),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><circle cx='100' cy='100' r='90' fill='%232ca79b' fill-opacity='0.16'/></svg>"); background-size:20px 20px,cover; background-repeat:repeat,no-repeat; pointer-events:none; }
.renewal-intro .renewal-wrap { position:relative; z-index:1; }
.renewal-intro .renewal-two-col { grid-template-columns:1.18fr .82fr; gap:55px; align-items:center; }
.renewal-intro-heading { display:flex; flex-direction:column; }
.renewal-intro h2 { font-size:3.4rem; }
.renewal-intro h2 .renewal-copy-accent { color:var(--ezec-teal); }
.renewal-copy-chunk { display:inline-block; }
.renewal-intro-visual { position:relative; height:330px; margin:10px 10px 0 0; }
.renewal-intro-visual:after { content:""; position:absolute; z-index:0; inset:18px -10px -10px 18px; border-radius:18px; background:var(--ezec-gradient); }
.renewal-intro-visual img { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; border-radius:18px; border:3px solid #111; }
.renewal-intro-lead { display:grid; grid-template-columns:1fr; gap:14px; width:min(860px,100%); margin:55px auto 0; padding:35px 40px; border-top:3px solid #111; border-bottom:3px solid #111; background:#fff; }
.renewal-intro-lead p { margin:0; font-size:1.7rem; line-height:2; }
.renewal-label { margin:0 0 30px; color:var(--ezec-teal); font-size:1.5rem; font-weight:700; letter-spacing:.08em; }
.renewal-label:before { content:""; display:inline-block; width:30px; height:3px; margin-right:12px; background:var(--ezec-teal); vertical-align:middle; }
.renewal-two-col { display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.renewal-two-col h2,.renewal-section-head h2,.renewal-ec-story > .renewal-wrap > h2 { margin:0; font-size:clamp(3.2rem, 1.059rem + 2.78vw, 4.4rem); line-height:1.55; }
.renewal-heading-line { display:inline-block; white-space:nowrap; }
.renewal-copy p { margin:0 0 20px; font-size:1.8rem; line-height:2.05; }
.renewal-problem { width:min(1080px,100%); margin:65px auto 0; padding:44px 42px; border-radius:20px; background:#e3f2f0; }
.renewal-problem-question { width:fit-content; margin:0 auto 32px; padding:14px 36px; border-radius:14px; background:var(--ezec-gradient); color:#fff; font-size:clamp(2.4rem, 0.081rem + 3.02vw, 3.7rem); font-weight:900; text-align:center; }
.renewal-problem-inner { width:min(760px,100%); margin:0 auto; }
.renewal-problem ul { display:grid; grid-template-columns:1fr; gap:20px; margin:0; padding:0; list-style:none; }
.renewal-problem li { padding-left:42px; background:url("../images/top_about_check.svg") left 3px/32px auto no-repeat; font-size:1.95rem; line-height:1.6; font-weight:700; }
.renewal-problem-answer { margin:38px 0 0; color:var(--ezec-ink); font-size:clamp(1.9rem, 0.116rem + 2.32vw, 2.9rem); font-weight:900; text-align:center; }
.renewal-problem-answer strong { padding:0 .14em; color:var(--ezec-teal); font-size:1.1em; }
.renewal-problem-arrow { display:block; width:34px; height:34px; margin:18px auto 0; color:var(--ezec-teal); }
.renewal-services { position:relative; overflow:hidden; background:#fff; }
.renewal-services:before { content:""; position:absolute; z-index:0; bottom:-140px; left:-120px; width:420px; height:420px; background-image:radial-gradient(circle,rgba(58,143,204,.10) 1.5px,transparent 1.8px),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><circle cx='100' cy='100' r='90' fill='%233a8fcc' fill-opacity='0.13'/></svg>"); background-size:20px 20px,cover; background-repeat:repeat,no-repeat; pointer-events:none; }
.renewal-services .renewal-wrap { position:relative; z-index:1; }
.renewal-section-head { display:grid; grid-template-columns:1fr 390px; gap:70px; align-items:end; margin-bottom:55px; }
.renewal-section-head > p { margin:0; font-size:1.7rem; line-height:1.9; }
.renewal-service-grid { display:grid; grid-template-columns:1fr 1fr; gap:55px 36px; }
.renewal-service-card { overflow:hidden; padding-bottom:30px; border:2px solid #1b1b1b; border-radius:20px; background:#fff; box-shadow:0 8px 0 rgba(0,0,0,.09); }
.renewal-service-visual { position:relative; height:300px; margin-bottom:26px; overflow:hidden; border-radius:0; background:#eee; border-bottom:2px solid #1b1b1b; }
.renewal-service-photo { width:100%; height:100%; object-fit:cover; }
.renewal-service-visual:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.18)); }
.renewal-number { position:absolute; z-index:2; top:18px; right:22px; color:var(--ezec-teal); font-size:7rem; line-height:1; font-weight:900; text-shadow:3px 3px 0 #fff; }
.renewal-service-body { padding:0 28px; text-align:center; }
.renewal-service-en { margin:0 0 6px; color:#888; font-size:1.35rem; font-weight:700; letter-spacing:.08em; }
.renewal-service-card h3 { margin:0 0 18px; font-size:3rem; line-height:1.4; }
.renewal-service-body > p:not(.renewal-service-en) { min-height:88px; margin:0; font-size:1.6rem; line-height:1.85; }
.renewal-service-card ul { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:24px 0 18px; padding:0; list-style:none; }
.renewal-service-card li { padding:5px 12px; border-radius:20px; background:var(--ezec-light); font-size:1.3rem; }
.renewal-service-prices { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; margin:0 0 22px; border-top:2px solid #111; border-bottom:2px solid #111; text-align:left; }
.renewal-service-prices > p { margin:0 12px; padding:6px 10px; border-radius:5px; background:var(--ezec-gradient); color:#fff; font-size:1.2rem; line-height:1.4; font-weight:700; white-space:nowrap; }
.renewal-service-prices dl { margin:0; padding:5px 14px 5px 0; }
.renewal-service-prices dl > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:7px 0; }
.renewal-service-prices dl > div + div { border-top:1px solid #ccc; }
.renewal-service-prices dt { font-size:1.2rem; line-height:1.4; }
.renewal-service-prices dd { margin:0; color:var(--ezec-teal); font-size:1.65rem; line-height:1.3; font-weight:700; white-space:nowrap; }
.renewal-service-card a { color:var(--ezec-teal); font-size:1.5rem; font-weight:700; text-decoration:underline; text-underline-offset:5px; }
.renewal-service-card a:after,.renewal-ec-link a:after { content:""; display:inline-block; width:6px; height:6px; margin-left:8px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); vertical-align:1px; transition:transform .2s ease; }
.renewal-service-card a:hover:after,.renewal-ec-link a:hover:after { transform:rotate(45deg) translate(2px,-2px); }
.renewal-service-wide { grid-column:1 / -1; display:grid; grid-template-columns:1.08fr .92fr; gap:45px; align-items:center; margin-top:10px; padding:38px; border-radius:22px; background:#eaf3fb; }
.renewal-service-wide .renewal-service-visual { height:300px; margin:0; border:2px solid #1b1b1b; border-radius:16px; }
.renewal-service-wide .renewal-service-visual picture { display:block; width:100%; height:100%; }
.renewal-service-wide .renewal-service-body { padding:0; }
.renewal-service-wide .renewal-service-body > p:not(.renewal-service-en) { min-height:0; }
.renewal-service-note { margin:30px 0 0; font-size:1.3rem; line-height:1.7; text-align:center; }

.renewal-strengths { position:relative; overflow:hidden; background:var(--ezec-gradient); }
.renewal-strengths .renewal-label { color:#fff; }
.renewal-strengths .renewal-label:before { background:#fff; }
.renewal-strengths .renewal-section-head h2,.renewal-strengths .renewal-two-col h2 { color:#fff; }
.renewal-strengths .renewal-section-head > p,.renewal-strengths .renewal-two-col + p { color:rgba(255,255,255,.88); }
.renewal-strengths:before { content:""; position:absolute; z-index:0; top:-90px; right:-90px; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,.08); }
.renewal-strengths:after { content:""; position:absolute; z-index:0; bottom:-120px; left:-60px; width:320px; height:320px; border-radius:50%; background:rgba(255,255,255,.06); }
.renewal-strengths .renewal-wrap { position:relative; z-index:1; }
.renewal-strength-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.renewal-strength-grid article { position:relative; overflow:hidden; padding:0 0 30px; border-radius:18px; background:#fff; box-shadow:0 8px 0 rgba(0,0,0,.1); }
.renewal-strength-grid img { width:100%; height:210px; object-fit:cover; }
.renewal-strength-grid h3,.renewal-strength-grid p { margin-left:25px; margin-right:25px; }
.renewal-strength-grid h3 { margin-top:26px; margin-bottom:12px; font-size:2.2rem; line-height:1.45; }
.renewal-strength-grid p { margin-bottom:0; font-size:1.5rem; line-height:1.9; }
.renewal-strength-number { position:absolute; z-index:2; top:16px; right:18px; color:var(--ezec-teal); font-size:5.8rem; line-height:1; font-weight:900; text-shadow:3px 3px 0 #fff; }
.renewal-ec-story { background:#fff; text-align:center; }
.renewal-ec-story.is-light { background:var(--ezec-light); }
.renewal-ec-story > .renewal-wrap > h2 { margin-bottom:28px; }
.renewal-ec-intro { width:min(800px,100%); margin:0 auto 45px; font-size:1.7rem; line-height:2; text-align:left; }
.renewal-meaning-grid { display:grid; grid-template-columns:repeat(3,1fr); border:2px solid #111; border-radius:18px; overflow:hidden; text-align:left; }
.renewal-meaning-grid article { padding:36px; border-right:1px solid #999; }
.renewal-meaning-grid article:last-child { border:0; }
.renewal-meaning-grid strong { display:block; color:#111; font-family:"Arial Black",Arial,Helvetica,sans-serif; font-size:clamp(2rem,2vw,2.5rem); line-height:1.25; font-weight:900; font-style:italic; letter-spacing:.01em; white-space:nowrap; }
.renewal-meaning-grid strong span { color:var(--ezec-teal); font-size:1.18em; }
.renewal-meaning-grid h3 { margin:12px 0; font-size:2.4rem; }
.renewal-meaning-grid p { margin:0; font-size:1.5rem; line-height:1.8; }
.renewal-ec-link { margin:35px 0 0; font-size:1.6rem; font-weight:700; }
.renewal-ec-link a { color:var(--ezec-teal); text-decoration:underline; text-underline-offset:5px; }

.renewal-works { background:var(--ezec-light); }
.renewal-works-title { margin:0; font-size:4.4rem; line-height:1.45; }
.renewal-works-lead { width:min(760px,100%); margin:22px 0 50px; font-size:1.7rem; line-height:2; }
.renewal-work-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }
.renewal-work-grid.is-single { grid-template-columns:1fr; max-width:460px; margin:0 auto; }
.renewal-work-grid.is-single .renewal-work-photo { height:290px; }
.renewal-work-grid.is-two { grid-template-columns:repeat(2,1fr); max-width:850px; margin:0 auto; }
.renewal-work-grid article { overflow:hidden; border:2px solid #1b1b1b; border-radius:18px; background:#fff; box-shadow:0 7px 0 rgba(0,0,0,.08); }
.renewal-work-photo { height:300px; overflow:hidden; border-bottom:2px solid #1b1b1b; background:#ddd; }
.renewal-work-photo img { width:100%; height:100%; object-fit:cover; }
.renewal-work-body { padding:26px 26px 30px; }
.renewal-work-date { margin:0 0 10px; color:#8a94a3; font-size:1.2rem; font-weight:700; letter-spacing:.04em; }
.renewal-work-type { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 12px!important; }
.renewal-work-type span { padding:4px 11px; border-radius:20px; background:#e3f2f0; color:var(--ezec-teal); font-size:1.2rem; font-weight:700; letter-spacing:.05em; }
.renewal-work-grid h3 { margin:0 0 8px; font-size:2.5rem; font-weight:700; }
.renewal-work-title { margin:0 0 14px; color:var(--ezec-teal); font-size:1.75rem; font-weight:700; }
.renewal-work-body > p:last-child { margin:0; font-size:1.5rem; line-height:1.8; }
.renewal-works-more { margin-top:48px; }
.works-genre-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.works-genre-grid > div { padding:32px 26px; border-radius:18px; background:#fff; box-shadow:0 7px 0 rgba(0,0,0,.06); }
.works-genre-grid h3 { margin:0 0 12px; font-size:1.9rem; font-family:"Archivo",Arial,sans-serif; color:var(--ezec-teal); }
.works-genre-grid p { margin:0; font-size:1.4rem; line-height:1.8; color:#444; }
.renewal-voices { background:#fff; }
.renewal-voices-title { margin:0; font-size:4.4rem; line-height:1.45; }
.renewal-voices-lead { width:min(760px,100%); margin:22px 0 48px; font-size:1.7rem; line-height:2; }
.renewal-voice-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.renewal-voice-grid.is-single { grid-template-columns:1fr; max-width:640px; margin:0 auto; }
.renewal-voice-grid article { position:relative; padding:38px 38px 32px; border:3px solid #111; border-radius:18px; background:var(--ezec-light); }
.renewal-voice-grid article:before { content:"“"; position:absolute; top:-26px; left:24px; color:var(--ezec-teal); font-size:8rem; line-height:1; font-weight:900; }
.renewal-voice-catch { position:relative; margin:0 0 22px; color:var(--ezec-teal); font-size:2.1rem; font-weight:900; line-height:1.5; }
.renewal-voice-person { position:relative; display:flex; align-items:center; gap:20px; margin-bottom:18px; }
.renewal-voice-photo { flex:0 0 158px; width:158px; height:158px; display:grid; place-items:center; overflow:hidden; border:3px solid #111; border-radius:50%; background:#fff; color:#999; font-family:Arial,Helvetica,sans-serif; font-size:1.2rem; font-weight:700; }
.renewal-voice-photo img { width:100%; height:100%; object-fit:cover; }
.renewal-voice-person p { margin:0; }
.renewal-voice-person strong { display:block; color:var(--ezec-ink); font-size:1.7rem; font-weight:700; }
.renewal-voice-person small { display:block; margin-top:6px; color:#666; font-size:1.4rem; line-height:1.6; }
.renewal-voice-service { display:inline-block; margin:0 0 8px; padding:5px 16px; border-radius:20px; background:var(--ezec-teal); color:#fff; font-size:1.3rem; font-weight:700; letter-spacing:.04em; }
.renewal-voice-grid blockquote { position:relative; margin:0; font-size:1.7rem; line-height:1.9; }
.renewal-price { background-color:#eaf3f8; background-image:radial-gradient(circle,rgba(44,167,155,.12) 1.5px,transparent 1.7px); background-size:19px 19px; }
.renewal-price-table-wrap { overflow-x:auto; border:1px solid #bbb; background:#fff; }
.renewal-price-table { width:100%; min-width:760px; border-collapse:collapse; }
.renewal-price-table th,.renewal-price-table td { padding:17px 20px; border-bottom:1px solid #bbb; text-align:left; vertical-align:middle; }
.renewal-price-table thead th { background:var(--ezec-gradient); color:#fff; font-size:1.4rem; }
.renewal-price-table tbody th { width:27%; background:#eaf3fb; font-size:1.5rem; }
.renewal-price-table tbody th a { color:#111; text-decoration:none; }
.renewal-price-table tbody td { font-size:1.4rem; line-height:1.65; }
.renewal-price-table tbody td:last-child { width:21%; color:var(--ezec-teal); font-size:2.1rem; font-weight:700; white-space:nowrap; }
.renewal-price-table tbody td:last-child small { font-size:.55em; font-weight:500; }
.renewal-price-table tbody tr:last-child th,.renewal-price-table tbody tr:last-child td { border-bottom:0; }
.renewal-price-note { margin:18px 0 0; font-size:1.3rem; line-height:1.7; text-align:center; }
.renewal-center { margin:40px 0 0; text-align:center; }
.renewal-flow { background:var(--ezec-light); }
.renewal-flow > .renewal-wrap > h2,.renewal-faq > .renewal-wrap > h2,.renewal-news > .renewal-wrap > h2 { margin:0 0 55px; font-size:4.4rem; line-height:1.55; }
.renewal-flow-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:0; padding:0; list-style:none; }
.renewal-flow-grid li { padding:28px 24px; border-radius:16px; background:#fff; border-top:7px solid var(--ezec-teal); }
.renewal-flow-grid .step-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.renewal-flow-grid .step-icon { display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:52px; height:52px; border-radius:13px; background:var(--ezec-gradient); color:#fff; box-shadow:0 8px 18px rgba(44,167,155,.28); }
.renewal-flow-grid .step-icon svg { display:block; width:26px; height:26px; }
.renewal-flow-grid span { color:var(--ezec-teal); font-size:4.8rem; line-height:1; font-weight:900; }
.renewal-flow-grid h3 { margin:20px 0 12px; font-size:2rem; line-height:1.45; }
.renewal-flow-grid p { margin:0; font-size:1.4rem; line-height:1.85; }
.renewal-faq { background:#fff; }
.renewal-faq-list { border-top:2px solid #111; }
.renewal-faq-list details { border-bottom:1px solid #999; }
.renewal-faq-list summary { position:relative; padding:24px 60px 24px 56px; cursor:pointer; list-style:none; font-size:1.8rem; font-weight:700; }
.renewal-faq-list summary::-webkit-details-marker { display:none; }
.renewal-faq-list summary:before { content:"Q"; position:absolute; left:10px; top:16px; color:var(--ezec-teal); font-size:2.8rem; font-weight:900; }
.renewal-faq-list summary:after { content:"＋"; position:absolute; right:12px; top:20px; color:var(--ezec-teal); font-size:2rem; }
.renewal-faq-list details[open] summary:after { content:"−"; }
.renewal-faq-list details p { margin:0; padding:0 56px 26px; font-size:1.6rem; line-height:1.9; }
/* ヒーロー直下に配置。直後の.renewal-introがグレー背景のため白にして区切り、余白は詰める */
.renewal-news { padding:clamp(64px,6vw,90px) 0 clamp(72px,7vw,100px); background:#fff; }
.renewal-news > .renewal-wrap > h2 { margin-bottom:0; }
.renewal-news-list { margin:40px 0 0; padding:0; list-style:none; border-top:2px solid #111; }
.renewal-news-item { display:flex; align-items:center; gap:20px; padding:22px 4px; border-bottom:1px solid #999; flex-wrap:wrap; }
.renewal-news-date { flex:0 0 auto; color:#8a94a3; font-size:1.3rem; font-weight:700; letter-spacing:.03em; }
.renewal-news-cat { flex:0 0 auto; padding:4px 14px; border-radius:20px; background:#e3f2f0; color:var(--ezec-teal); font-size:1.2rem; font-weight:700; letter-spacing:.05em; }
.renewal-news-title { flex:1 1 260px; font-size:1.6rem; line-height:1.7; }
.renewal-contact { position:relative; overflow:hidden; padding:110px 0; background:var(--ezec-gradient); color:#fff; text-align:center; }
.renewal-contact:before { content:""; position:absolute; z-index:0; top:-90px; right:-90px; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,.08); }
.renewal-contact:after { content:""; position:absolute; z-index:0; bottom:-120px; left:-60px; width:320px; height:320px; border-radius:50%; background:rgba(255,255,255,.06); }
.renewal-contact .renewal-wrap { position:relative; z-index:1; }
.renewal-contact .renewal-label { color:#fff; }
.renewal-contact .renewal-label:before { background:#fff; }
.renewal-contact h2 { margin:0 0 24px; font-size:4rem; line-height:1.5; }
.renewal-contact-lead { margin:0 0 42px; font-size:1.8rem; line-height:1.9; }
.renewal-contact-actions { display:flex; align-items:center; justify-content:center; gap:36px; flex-wrap:wrap; }
.renewal-contact .renewal-btn { color:var(--ezec-teal); background:#fff; }
.renewal-contact .renewal-btn-outline { color:#fff; background:transparent; border:2px solid #fff; }
.renewal-contact-tel { margin:26px 0 0; font-size:1.6rem; color:rgba(255,255,255,.85); }
.renewal-contact-tel a { font-size:1.4em; color:#fff; font-weight:700; letter-spacing:.03em; text-decoration:none; }
.renewal-contact-tel a:hover { text-decoration:underline; }

@media screen and (max-width: 768px) {
  #top .header { height:54px; }
  .renewal-tag { margin:16px 0 0 10px; font-size:1.15rem; }
  .renewal-wrap { width:90%; }
  /* 縦画面向け：横（左右）の白グラデではなく、上下に白ぼかしを入れて中央にスライド写真を見せる構成に切替 */
  .renewal-hero { height:calc(100vh - 54px); height:calc(100svh - 54px); min-height:0; margin-top:0; padding:0; align-items:stretch; background-position:center center; }
  .renewal-hero-slides { inset:auto; top:50%; left:0; right:0; height:60vh; transform:translateY(-50%); }
  .renewal-hero-slides span { background-position:var(--hero-pos-sp, center center); }
  .renewal-hero:before {
    background:linear-gradient(180deg,
      #fff 0%, rgba(255,255,255,.8) 14%, rgba(255,255,255,0) 32%,
      rgba(255,255,255,0) 64%, rgba(255,255,255,.8) 82%, #fff 100%);
  }
  .renewal-hero .renewal-wrap { display:flex; height:100%; padding-top:28px; padding-bottom:24px; padding-right:24px; }
  .renewal-hero-copy { display:flex; flex-direction:column; justify-content:space-between; width:100%; max-width:none; height:100%; }
  br.hero-break-1 { display:none; }
  .renewal-hero-dots { right:5%; bottom:16px; gap:6px; }
  .renewal-hero-dots span { width:18px; height:3px; }
  .renewal-hero-dots span.is-active { width:30px; }
  .renewal-two-col,.renewal-section-head { grid-template-columns:1fr; gap:35px; }
  .renewal-intro .renewal-two-col { grid-template-columns:1fr; gap:35px; }
  .renewal-intro .renewal-two-col h2 { font-size:clamp(1.75rem, 1.036rem + 2.23vw, 3rem); }
  .renewal-intro-visual { height:240px; margin-right:8px; }
  .renewal-intro-lead { grid-template-columns:1fr; gap:18px; margin-top:45px; padding:28px 20px; }
  .renewal-intro-lead p { font-size:1.6rem; }
  .renewal-area { margin-bottom:8px; font-size:1.1rem; line-height:1.5; }
  .renewal-hero-small { margin-bottom:8px; font-size:1.3rem; }
  .renewal-hero h1 { font-size:clamp(2.2rem, 1.46rem + 2.1vw, 3.2rem); line-height:1.35; }
  .renewal-lead { margin-top:0; font-size:1.4rem; line-height:1.6; }
  .renewal-actions { align-items:flex-start; flex-direction:column; gap:8px; margin-top:14px; }
  .renewal-btn { width:100%; }
  /* メインコピー・サブコピー・ボタンに、ぼかしの白フチをつけて写真の上でも読みやすくする（角張った縁にならないよう多重text-shadowでぼかす） */
  .renewal-hero-copy h1,
  .renewal-hero-copy .renewal-lead,
  .renewal-hero-copy .renewal-link { text-shadow:0 0 10px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 20px #fff; }
  .renewal-hero-copy .renewal-btn { box-shadow:0 0 20px 8px rgba(255,255,255,.85); }
  .renewal-intro,.renewal-services,.renewal-strengths,.renewal-ec-story,.renewal-works,.renewal-voices,.renewal-price,.renewal-flow,.renewal-faq,.renewal-news { padding:80px 0 100px; }
  .renewal-two-col h2,.renewal-section-head h2,.renewal-ec-story > .renewal-wrap > h2,.renewal-works-title,.renewal-voices-title { font-size:clamp(2.2rem, 1.486rem + 2.23vw, 3.2rem); line-height:1.5; }
  .renewal-heading-line { white-space:normal; }
  .renewal-copy p { font-size:1.7rem; }
  .renewal-problem { margin-top:40px; padding:30px 20px; }
  .renewal-problem-question { font-size:clamp(1.5rem, 0.5rem + 4vw, 2.4rem); white-space:nowrap; margin-bottom:20px; padding:10px 20px; border-radius:10px; }
  .renewal-problem-answer { font-size:1.9rem; }
  .renewal-problem ul { grid-template-columns:1fr; gap:14px; }
  .renewal-problem li { font-size:1.55rem; padding-left:34px; background-size:24px auto; }
  .renewal-service-grid,.renewal-meaning-grid,.renewal-work-grid,.renewal-work-grid.is-two,.renewal-strength-grid,.renewal-voice-grid,.renewal-flow-grid { grid-template-columns:1fr; }
  .works-genre-grid { grid-template-columns:1fr 1fr; }
  .renewal-service-grid { gap:45px; }
  .renewal-service-visual { height:230px; }
  .renewal-number { font-size:5.5rem; }
  .renewal-icon { width:82px; height:82px; }
  .renewal-icon img { width:58px; max-height:62px; }
  .renewal-service-body { padding:0 22px; }
  .renewal-service-body > p:not(.renewal-service-en) { min-height:0; }
  .renewal-service-wide { grid-column:auto; display:block; margin-top:0; padding:20px; }
  .renewal-service-wide .renewal-service-visual { height:auto; aspect-ratio:4 / 3; margin-bottom:26px; }
  .renewal-meaning-grid article { border-right:0; border-bottom:1px solid #999; }
  .renewal-work-photo { height:260px; }
  .renewal-work-grid h3 { font-size:2.1rem; }
  .renewal-price-table th,.renewal-price-table td { padding:14px 16px; }
  .renewal-news { padding:56px 0 64px; }
  .renewal-news > .renewal-wrap > h2 { margin-bottom:0; }
  .renewal-flow > .renewal-wrap > h2,.renewal-faq > .renewal-wrap > h2,.renewal-news > .renewal-wrap > h2 { margin-bottom:35px; font-size:clamp(2.2rem, 1.486rem + 2.23vw, 3.2rem); line-height:1.5; }
  .renewal-strength-grid img { height:190px; }
  .renewal-voice-grid article { padding:34px 24px 26px; }
  .voice-catch-break { display:none; }
  .renewal-voice-catch { font-size:1.8rem; }
  .renewal-voice-person { gap:14px; }
  .renewal-voice-photo { flex-basis:84px; width:84px; height:84px; }
  .renewal-voice-person strong { font-size:1.4rem; white-space:nowrap; }
  .renewal-voice-person small { font-size:1.25rem; white-space:nowrap; }
  .renewal-voice-service { font-size:1.15rem; padding:4px 12px; }
  .renewal-faq-list summary { padding-left:48px; font-size:1.6rem; line-height:1.65; }
  .renewal-faq-list details p { padding-left:48px; padding-right:20px; font-size:1.5rem; }
  .renewal-contact { padding:75px 0; }
  /* 下層ページ(.under-cta)のSP設定に合わせる */
  .renewal-contact h2 { font-size:clamp(2rem, 1.286rem + 2.232vw, 3rem); }
  .renewal-contact-lead { font-size:1.7rem; }
  .renewal-contact-actions { flex-direction:column; gap:22px; }
  .renewal-contact .renewal-btn { width:100%; }

  /* SP: 可読性向上のため本文・リード文をNoto Sans JPに統一し、最小15px・行間を詰める(見出しはZen Maru Gothicを維持) */
  body { font-family:'Noto Sans JP', sans-serif; }
  h1, h2, h3, h4, h5, h6 { font-family:'Zen Maru Gothic', sans-serif; }
  .renewal-intro-lead p { line-height:1.75; }
  .renewal-copy p { line-height:1.75; }
  .renewal-section-head > p { line-height:1.75; }
  .renewal-service-body > p:not(.renewal-service-en) { line-height:1.7; }
  .renewal-service-note { font-size:1.5rem; }
  .renewal-strength-grid p { line-height:1.7; }
  .renewal-ec-intro { line-height:1.75; }
  .renewal-meaning-grid p { line-height:1.7; }
  .renewal-works-lead { line-height:1.75; }
  .renewal-work-body > p:last-child { line-height:1.7; }
  .works-genre-grid p { font-size:1.5rem; line-height:1.7; }
  .renewal-voices-lead { line-height:1.75; }
  .renewal-voice-grid blockquote { line-height:1.75; }
  .renewal-price-table thead th { font-size:1.5rem; }
  .renewal-price-table tbody td { font-size:1.5rem; }
  .renewal-price-note { font-size:1.5rem; }
  .renewal-flow-grid p { font-size:1.5rem; line-height:1.7; }
  .renewal-faq-list details p { line-height:1.7; }
  .renewal-contact-lead { line-height:1.7; }
  .footer-brand p { font-size:1.5rem; line-height:1.7; }
  .footer-col li { font-size:1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .renewal-hero-slides span { transition:none; transform:none; }
}

/*=================================================================
  フッター（サイトマップ形式の4カラムグリッド）
=================================================================*/
.site-footer .content { padding:64px 0 36px; }
@media screen and (max-width: 768px) {
  .site-footer .content { padding-left:6%; padding-right:6%; }
}
.footer-grid { display:grid; grid-template-columns:1.3fr max-content max-content max-content; gap:20px; text-align:left; }
.footer-brand + .footer-col { padding-left:48px; }
.footer-brand + .footer-col + .footer-col { padding-left:60px; }
.footer-brand .footer-logo-img { display:block; width:220px; height:auto; margin-bottom:20px; }
.footer-brand p { margin:0; font-size:1.4rem; line-height:1.9; color:rgba(255,255,255,.75); }
.footer-col h4 { margin:0 0 18px; color:#8fd6cc; font-size:1.2rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.footer-col ul { margin:0; padding:0; list-style:none; }
.footer-col li { margin-bottom:12px; font-size:1.4rem; line-height:1.5; }
.footer-col li.sub { margin-top:-4px; padding-left:16px; font-size:1.25rem; }
.footer-col li.sub a { color:rgba(255,255,255,.6); }
.footer-col a { color:rgba(255,255,255,.82); text-decoration:none; }
.footer-col a:hover { color:#fff; text-decoration:underline; }
.footer-area { margin:36px 0 0; padding-top:28px; border-top:1px solid rgba(255,255,255,.14); font-size:1.3rem; color:rgba(255,255,255,.6); text-align:center; }
.site-footer .credit { margin-top:16px; }

.under-cta .under-cta-tel { display:block; margin-top:26px; font-size:1.5rem; color:rgba(255,255,255,.85); }
.under-cta-tel a { font-size:1.4em; color:#fff; font-weight:700; letter-spacing:.03em; text-decoration:none; }
.under-cta-tel a:hover { text-decoration:underline; }

@media screen and (max-width:1199px) {
  /* 可変版・SP共通：4カラムを1行に詰め込まず、社名を1行、Service/Menu/Contactを3列で下段に */
  .footer-grid { grid-template-columns:repeat(3,1fr); row-gap:56px; }
  .footer-brand { grid-column:1 / -1; }
  .footer-brand + .footer-col,
  .footer-brand + .footer-col + .footer-col { padding-left:0; }
}
@media screen and (max-width:600px) {
  .footer-grid { grid-template-columns:1fr; }
}

/*=================================================================
  可変版（769〜1199px）：PC⇔SPの橋渡し。3〜4カラムのグリッドを2カラムへ、
  固定幅サイドバーをfr比率へ変更し、詰まりを解消する。見出しは各セレクタの
  基本ルール側でclamp()化して連続的に縮小させているため、ここでは触らない。
=================================================================*/
@media screen and (min-width:769px) and (max-width:1199px) {
  .renewal-section-head { grid-template-columns:1.9fr 1fr; gap:40px; }
  .renewal-work-grid { grid-template-columns:repeat(2,1fr); }
  .works-genre-grid { grid-template-columns:repeat(2,1fr); }
  .renewal-flow-grid { grid-template-columns:repeat(2,1fr); gap:24px; }

  /* 「Ezecという名前に込めたこと」：nowrapの英字見出しが1frカラムの最小幅を超えて全体を押し広げていたため、
     1frをminmax(0,1fr)にして縮小を許可。それでも収まらない場合は折り返しに切り替える */
  .renewal-meaning-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .renewal-meaning-grid article { padding:24px; }
  .renewal-meaning-grid strong { white-space:normal; font-size:clamp(1.6rem,2.4vw,2.5rem); }

  /* 料金表：min-width:760pxが769px幅のラッパーに収まりきらず、料金（税別）列が横スクロールしないと見えなかった。
     paddingと料金の文字サイズを詰め、min-widthを縮小してスクロールなしで全カラムが収まるようにする */
  .renewal-price-table { min-width:0; }
  .renewal-price-table th,.renewal-price-table td { padding:12px 12px; }
  .renewal-price-table tbody td:last-child { width:26%; font-size:1.6rem; }

  /* フッター：左右の余白がPCは0のため、769px直近だと文字が画面端まで詰まる */
  .site-footer .content { padding-left:5%; padding-right:5%; }
  .footer-grid { gap:16px; }
}

/*=================================================================
  ヘッダー・フッター：ブレークポイントでの段階的な切替ではなく、769〜1200pxで
  clamp()により連続的に縮小させる（1200px以上はPC値のまま）。
  768px以下はsp_common.css側が別途スタイルするため、min-width:769pxで明示的に
  範囲を区切り、SP側のルールに干渉しないようにする。
=================================================================*/
@media screen and (min-width:769px) {
  header .box-logo { width:clamp(190px, 11.58px + 23.2vw, 290px); padding-left:clamp(14px, 6.66px + 0.61vw, 20px); }
  header .logo-01 { width:clamp(150px, 44.73px + 13.69vw, 209px); }
  header .box-gnav { width:calc(100% - clamp(190px, 11.58px + 23.2vw, 290px)); }
  #g-nav ul li a { padding:0 clamp(6px, -15.41px + 2.78vw, 18px); font-size:clamp(1.15rem, .615rem + .7vw, 1.45rem); }
  #g-nav ul li.has-dropdown .dropdown { width:clamp(210px, 156.47px + 6.96vw, 240px); }
  /* 矢印付きボタンなので縮小率は控えめに（幅・文字サイズとも下限を高めに設定） */
  #g-nav .gnav-contact a { width:clamp(160px, 97.55px + 8.12vw, 195px); margin:15px clamp(8px, -4.49px + 1.62vw, 15px) 0; font-size:clamp(1.3rem, 1.032rem + .35vw, 1.45rem); }
}

/* フッター：769px以下は社名1行＋Service/Menu/Contactを3列で下段に並べる構成（上のmax-width:1199pxブロックを参照）のため、
   ここでは対応エリア文言の文字サイズだけ縮小する */
@media screen and (min-width:769px) and (max-width:1199px) {
  .footer-area { font-size:1.2rem; }
}