/* 上から下へ、展示・中央案内・横の工程・反転・連絡先と構成を変える。 */
.hero{display:flex;align-items:stretch;min-height:calc(100svh - 88px);padding-block:40px 56px}
.hero__inner{display:flex;flex-direction:column;width:100%;max-width:1440px;padding-inline:48px}
.hero__service{margin:0}
.hero__composition{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto;align-items:end;gap:40px;min-height:0;margin-top:auto;padding-top:96px}
.hero__heading{grid-column:1/-1;grid-row:1}
.hero h1{font-size:clamp(52px,9.5vw,136px);line-height:1.03}
.hero__copy{grid-column:1/-1;grid-row:2;align-self:end;justify-self:start;width:100%;max-width:none}
.hero__actions{flex-wrap:wrap;gap:12px}
.hero__actions .text-link{background:#fff;border:1px solid var(--line);border-radius:999px;padding:15px 20px;margin:0;line-height:1.8}
.hero__actions .button,.hero__actions .text-link{font-size:14px}
/* 制作事例は画像を大きく展示し、その下へ案件情報を置く。 */
.works>.container>.lead-label{justify-content:center}
.works__heading{display:block;text-align:center}
.works__case{display:block;margin-top:48px}
.works__shot{max-width:1000px;margin-inline:auto}
.works__desc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:16px 70px;max-width:1000px;margin:38px auto 0}
.works__meta{grid-column:1;grid-row:1;margin:0;align-self:start}
.works__desc h3{grid-column:1;grid-row:2;font-size:clamp(28px,2.7vw,38px);margin:0}
.works__desc>p{grid-column:2;grid-row:1/span 2;font-size:16px;line-height:2}
.works__details{grid-column:2;grid-row:3;margin:0}
.works__desc>.text-link{grid-column:1;grid-row:3;align-self:start}
.works__note{max-width:850px;margin:42px auto 0;text-align:center}
/* 費用案内は中央の見出しから、相談事項の一覧へ続く。 */
#plans .lead-label{justify-content:center}
#plans .split{display:block}
#plans .split__heading{display:block;max-width:740px;margin-inline:auto;text-align:center}
#plans .split__heading p{margin-top:24px}
.quote-description{display:grid;grid-template-columns:1fr 1fr;gap:22px 48px;max-width:1000px;margin:40px auto 0}
.quote-description>p+p{margin-top:0}
.quote-details{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:48px;margin:12px 0 0;border-top:0}
.quote-details>div{display:block;padding:24px 0;border-top:1px solid var(--line);border-bottom:0}
.quote-details dt{font-size:16px;margin-bottom:10px}
.quote-details dd{font-size:16px}
.quote-description>.quote-note{grid-column:1/-1;max-width:720px;margin-inline:auto;text-align:center;font-size:15px}
.quote-description>.text-link{grid-column:1/-1;justify-self:center;margin-top:0}
/* 工程は箱を使わず、横に連なる4段階として見せる。 */
#flow .container{display:block}
#flow .lead-label{justify-content:center}
#flow .flow-copy{max-width:760px;margin-inline:auto;text-align:center}
#flow h2{max-width:none}
#flow .flow-intro{max-width:none;margin-top:24px}
#flow .flow-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;margin:52px 0 0;border-top:0}
.flow-steps li{display:flex;flex-direction:column;gap:12px;padding:24px 0 0;border-top:1px solid var(--green);border-bottom:0}
.flow-steps__num{font-family:'Space Grotesk',sans-serif;font-size:34px;line-height:1.3;padding-top:0}
.flow-steps__span{font-size:15px;margin:0;min-height:2em}
.flow-steps h3{font-size:22px;line-height:1.7;margin:0}
.flow-steps>li>p:not(.flow-steps__num):not(.flow-steps__span){font-size:16px;line-height:2}
/* FAQは幅を絞った縦のリスト。 */
.faq>.container{max-width:1040px}
.faq .lead-label{justify-content:center}
.faq .split{display:block}
.faq .split__heading{text-align:center;margin-bottom:38px}
.faq summary{font-size:17px;padding-block:24px}
.faq details p{line-height:2}
/* 制作窓口は詳細を左、見出しを右へ反転させる。 */
.about .split{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:90px;align-items:center}
.about .split__heading{grid-column:2;grid-row:1}
.about__body{grid-column:1;grid-row:1}
.about__details>div{padding-block:18px}
/* 連絡先は中央に大きく配置し、左右分割の繰返しを終える。 */
.contact .lead-label{justify-content:center}
.contact .split{display:block;max-width:1040px;margin-inline:auto}
.contact .split__heading{text-align:center;max-width:780px;margin-inline:auto}
.contact .split__heading p{max-width:650px;margin:24px auto 0}
.contact__info{margin-top:44px;padding-top:36px;text-align:center;border-top-color:var(--green)}
.contact__name{margin-bottom:18px;font-size:16px}
.contact__email{justify-content:center;gap:26px;font-size:clamp(24px,3.9vw,54px);line-height:1.5;letter-spacing:-.025em;color:var(--green)}
.contact__phone{font-size:25px;margin-top:18px}
.contact__tools{justify-content:center;margin-top:22px}
.contact__note{max-width:720px;margin:22px auto 0}
.contact__privacy{margin-top:16px}
@media(max-width:1100px) and (min-width:769px){
 .hero__composition{column-gap:32px}
 .works__desc{column-gap:40px}
 #flow .flow-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 48px}
 .about .split{gap:44px}
}
@media(max-width:768px){
 .hero{min-height:calc(100svh - 74px);padding-block:22px 40px}
 .hero__inner{padding-inline:20px}
 .hero__composition{display:grid;grid-template-columns:1fr;min-height:0;gap:32px;padding-top:64px}
 .hero__heading{grid-column:1;grid-row:1;width:100%}
 .hero h1{font-size:clamp(43px,13.3vw,72px);line-height:1.03}
 .hero__copy{grid-column:1;grid-row:2;width:100%;max-width:none;margin:0}
 .hero__actions{flex-wrap:wrap;gap:10px}
 .hero__actions .button,.hero__actions .text-link{padding-inline:10px}
 .hero__actions .button{gap:12px}
 .works__case{margin-top:32px}
 .works__desc{display:block;margin-top:28px}
 .works__desc h3{margin-top:16px}
 .works__desc>p{margin-top:22px}
 .works__details{margin-top:24px}
 .works__desc>.text-link{margin-top:24px}
 .works__note{text-align:left;margin-top:30px}
 #plans .split__heading{text-align:left}
 #plans .lead-label{justify-content:flex-start}
 .quote-description{display:block;margin-top:30px}
 .quote-description>p+p{margin-top:18px}
 .quote-details{grid-template-columns:1fr;margin-top:28px}
 .quote-details>div{padding-block:20px}
 .quote-description>.quote-note{text-align:left;margin-top:22px}
 .quote-description>.text-link{margin-top:24px}
 #flow .flow-copy{text-align:left}
 #flow .lead-label{justify-content:flex-start}
 #flow .flow-steps{grid-template-columns:1fr;gap:0;margin-top:34px}
 .flow-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px 18px;padding-block:24px}
 .flow-steps__num{grid-column:1;grid-row:1/span 3;font-size:27px}
 .flow-steps__span,.flow-steps h3,.flow-steps>li>p:not(.flow-steps__num){grid-column:2;min-height:0}
 .faq .split__heading{margin-bottom:28px}
 .faq summary{font-size:16px;line-height:1.9}
 .about .split{display:flex;flex-direction:column;gap:30px;align-items:stretch}
 .about .split__heading{order:0}
 .about__body{order:1}
 .contact__info{margin-top:32px;padding-top:28px}
 .contact .split__heading h2{font-size:28px}
 .contact__email{font-size:clamp(22px,5.6vw,36px);gap:12px;letter-spacing:-.035em}
 .contact__phone{font-size:23px}
}