/* 既存メダルを復元し、明るい青・白・黄色で実績を引き立てる。 */ #authority.authority-light { position: relative; isolation: isolate; overflow: hidden; padding: 52px 20px 34px; color: #012d85; background: radial-gradient(ellipse at 92% 0%,#e5f1ff 0%,transparent 44%),linear-gradient(145deg,#fff 0%,#f6fbff 65%,#fff 100%); } #authority.authority-light::before { content: none; } #authority.authority-light::after { content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 230px; height: 460px; opacity: .62; background: url('../images/tokai_authority_roofline.svg') center bottom / 1400px auto no-repeat; } #authority .authority-light__inner { position: relative; padding: 0; background: none; border: 0; box-shadow: none; } #authority .authority-light__heading { margin: 0 0 32px; text-align: center; font-weight: 900; } #authority .authority-light__thanks { display: block; color: #012d85; font-size: 20px; line-height: 1.5; letter-spacing: .12em; } #authority .authority-light__brand { display: block; font-size: 21px; line-height: 1.4; margin-top: 3px; } #authority .authority-light__achievement { position: relative; display: flex; justify-content: center; align-items: baseline; gap: 10px; width: fit-content; margin: 7px auto 0; padding: 0 38px 12px; } #authority .authority-light__achievement::after { content: ''; position: absolute; bottom: 0; left: 12%; right: 10%; height: 7px; background: #f4d363; transform: skew(-24deg); } #authority .authority-light__five { position: relative; display: block; font-family: 'Bebas Neue',Arial,sans-serif; font-size: 176px; font-weight: 400; line-height: 1; color: #ddb32e; text-shadow: 0 2px 0 #a48018; } #authority .authority-light__words { color: #012d85; font-size: 72px; line-height: 1.1; letter-spacing: -.035em; white-space: nowrap; } #authority .authority-light__words > span { font-size: .85em; } #authority .authority-light__medals { position: relative; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 16px; padding: 0; margin: 0; list-style: none; } #authority .authority-light__medals li { min-width: 0; text-align: center; } #authority .authority-light__medals picture { width: 100%; max-width: 201px; margin: 0 auto 13px; } #authority .authority-light__medals img { width: 100%; height: auto; } #authority .authority-light__medals p { color: #012d85; font-size: 15px; line-height: 1.7; font-weight: 500; } #authority .authority-light__intro { display: block; min-height: 3.4em; } #authority .authority-light__medals p strong { display: block; font-size: 16px; font-weight: 900; } #authority .authority-light__closing { position: relative; margin-top: 46px; padding-top: 22px; border-top: 1px solid #dbe6f4; } #authority .authority-light__promise { display: block; width: 100%; aspect-ratio: 1257 / 280; overflow: hidden; } #authority .authority-light__promise img { display: block; width: 100%; height: auto; transform: translateY(-30%); } #authority .authority-light__notes { margin-top: 24px; padding-top: 18px; border-top: 1px solid #dbe6f4; } #authority .tokai-authority__survey { color: #49566c; font-size: 12px; line-height: 1.8; text-align: center; } @media (min-width: 768px) and (max-width: 1000px) { #authority .authority-light__medals { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 28px 20px; max-width: 760px; margin: auto; } #authority .authority-light__medals li { grid-column: span 2; } #authority .authority-light__medals li:nth-child(4) { grid-column: 2 / span 2; } } @media (max-width: 767px) { #authority.authority-light { padding: 37px 15px 30px; } #authority.authority-light::before { height: 10px; } #authority.authority-light::after { top: 195px; height: 640px; background-size: 1050px auto; opacity: .38; } #authority .authority-light__heading { margin-bottom: 28px; } #authority .authority-light__thanks { font-size: 16px; } #authority .authority-light__brand { font-size: 16px; } #authority .authority-light__achievement { padding: 0 8px 8px; gap: 6px; margin-top: 8px; } #authority .authority-light__achievement::after { height: 5px; left: 9%; right: 5%; } #authority .authority-light__five { font-size: clamp(108px,30vw,126px); } #authority .authority-light__words { font-size: clamp(39px,11vw,48px); } #authority .authority-light__medals { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px 14px; } #authority .authority-light__medals li { grid-column: span 2; } #authority .authority-light__medals li:last-child { grid-column: 2 / span 2; } #authority .authority-light__medals picture { margin-bottom: 12px; } #authority .authority-light__medals p { font-size: 14px; } #authority .authority-light__medals p strong { font-size: 15px; } #authority .authority-light__closing { margin-top: 32px; padding-top: 20px; } #authority .authority-light__promise { aspect-ratio: 750 / 625; } #authority .authority-light__promise img { transform: translateY(-16.10738255%); } #authority .authority-light__notes { margin-top: 20px; } #authority .tokai-authority__survey { font-size: 11px; text-align: left; } } /* 背景の線画は外縁へ限定し、文字・メダルの領域には重ねない。 */ #authority.authority-light::after { mask-image: linear-gradient(to right,#000 0%,#000 9%,transparent 14%,transparent 86%,#000 91%,#000 100%); } /* 元コピーを金のリボンへ。区切り線を除き、締めは淡い青の帯でまとめる。 */ #authority .authority-light__ribbon { position: relative; display: block; isolation: isolate; width: fit-content; max-width: calc(100% - 36px); margin: 0 auto 19px; padding: 0 18px 8px; } #authority .authority-light__ribbon::before { content: ''; position: absolute; z-index: -2; inset: 9px 0 0; background: #c29a2d; clip-path: polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%); } #authority .authority-light__ribbon::after { content: ''; position: absolute; z-index: -1; left: 18px; right: 18px; bottom: 0; height: 8px; background: #94701f; clip-path: polygon(0 0,100% 0,calc(100% - 8px) 100%,8px 100%); } #authority .authority-light__ribbon > span { display: block; padding: 12px 40px; background: linear-gradient(110deg,#e2b848,#f8e4a1 48%,#e7bf56); color: #173360; font-size: 25px; line-height: 1.35; font-weight: 900; letter-spacing: .08em; border-top: 1px solid #fbeec7; border-bottom: 1px solid #bd9128; } #authority .authority-light__brand { font-size: 19px; margin-top: 0; } #authority .authority-light__achievement { align-items: center; gap: 9px; margin-top: 7px; padding: 0 20px; } #authority .authority-light__achievement::after { content: none; } #authority .authority-light__five { font-size: 116px; line-height: .98; } #authority .authority-light__words { font-size: 72px; } #authority .authority-light__heading { margin-bottom: 30px; } #authority .authority-light__closing { margin-top: 42px; padding: 28px 22px; border: 0; background: #e6f1ff; } #authority .authority-light__closing::before { content: ''; position: absolute; z-index: -1; inset: 0; left: calc((100% - 100vw)/2); right: calc((100% - 100vw)/2); background: linear-gradient(100deg,#eef6ff,#dfeeff 55%,#eef6ff); } #authority .authority-light__notes { margin-top: 22px; padding-top: 0; border: 0; } @media(max-width:767px) { #authority.authority-light { padding-top: 30px; } #authority .authority-light__ribbon { max-width: 100%; margin-bottom: 15px; padding: 0 13px 6px; } #authority .authority-light__ribbon > span { padding: 10px 20px; font-size: clamp(17px,4.8vw,20px); letter-spacing: .05em; white-space: nowrap; } #authority .authority-light__ribbon::after { left: 13px; right: 13px; height: 6px; } #authority .authority-light__brand { font-size: 15px; } #authority .authority-light__achievement { padding: 0; gap: 6px; margin-top: 8px; } #authority .authority-light__five { font-size: clamp(70px,20vw,82px); } #authority .authority-light__words { font-size: clamp(39px,11vw,48px); } #authority .authority-light__heading { margin-bottom: 24px; } #authority .authority-light__closing { margin-top: 30px; padding: 24px 0; } #authority .authority-light__notes { margin-top: 22px; } } /* 締めの写真・コピー・安心ポイントを独立配置。元画像の画素はそのまま使用。 */ #authority .authority-light__notes { margin-top: 20px; } #authority .authority-light__closing.promise-blue { position: relative; display: grid; grid-template-columns: 230px minmax(0,1fr); grid-template-rows: auto auto; gap: 20px 28px; align-items: center; padding: 36px 0 30px; margin-top: 64px; background: none; } #authority .authority-light__closing.promise-blue::before { content: ''; z-index: -1; top: 0; bottom: 0; left: calc((100% - 100vw)/2); right: calc((100% - 100vw)/2); background: linear-gradient(115deg,#075cbe,#043c96 80%); clip-path: polygon(0 18px,100% 0,100% 100%,0 100%); } #authority .promise-blue__copy { grid-column: 2; grid-row: 1; margin: 0; text-align: center; font-weight: 900; line-height: 1.25; } #authority .promise-blue__copy strong { display: block; font-size: 58px; letter-spacing: -.035em; color: #ffe16c; white-space: nowrap; } #authority .promise-blue__copy > span { display: block; margin-top: 6px; color: #fff; font-size: 30px; letter-spacing: .03em; } #authority .promise-blue__staff { position: relative; align-self: end; grid-column: 1; grid-row: 1 / span 2; display: block; width: 230px; aspect-ratio: 237 / 280; overflow: hidden; margin-top: -70px; } #authority .promise-blue__staff img { position: absolute; max-width: none; width: calc(1257 / 237 * 100%); height: auto; left: 0; top: calc(-120 / 280 * 100%); } #authority .promise-blue__points { display: grid; grid-column: 2; grid-row: 2; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 13px; margin: 0; padding: 0; list-style: none; } #authority .promise-blue__badge { display: block; position: relative; width: 100%; max-width: 134px; margin: auto; aspect-ratio: var(--crop-width) / var(--crop-height); overflow: hidden; } #authority .promise-blue__badge img { position: absolute; max-width: none; width: calc(1257 / var(--crop-width) * 100%); height: auto; left: calc(-1 * var(--crop-x) / var(--crop-width) * 100%); top: calc(-1 * var(--crop-y) / var(--crop-height) * 100%); } @media(min-width:768px) and (max-width:1000px) { #authority .authority-light__closing.promise-blue { grid-template-columns: 180px minmax(0,1fr); gap: 18px; } #authority .promise-blue__staff { width: 180px; } #authority .promise-blue__copy strong { font-size: clamp(35px,4.9vw,48px); } #authority .promise-blue__copy > span { font-size: 25px; } #authority .promise-blue__points { gap: 6px; } } @media(max-width:767px) { #authority .authority-light__closing.promise-blue { display: block; padding: 36px 0 24px; margin-top: 28px; } #authority .authority-light__closing.promise-blue::before { clip-path: polygon(0 10px,100% 0,100% 100%,0 100%); } #authority .promise-blue__copy { margin-bottom: 24px; } #authority .promise-blue__copy strong { font-size: clamp(29px,8.3vw,36px); letter-spacing: -.05em; } #authority .promise-blue__copy > span { margin-top: 6px; font-size: 23px; } #authority .promise-blue__points { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 22px 8px; position: relative; } #authority .promise-blue__points li { grid-column: span 2; min-width: 0; } #authority .promise-blue__points li:nth-child(4) { grid-column: 3 / span 2; } #authority .promise-blue__points li:nth-child(5) { grid-column: 5 / span 2; } #authority .promise-blue__staff { position: absolute; bottom: 24px; left: 0; width: calc((100% - 16px) / 3); margin: 0; } } /* 人物の上端を青い帯から少し出し、切り替えに親しみを添える。 */ #authority.authority-light { padding-bottom: 0; } #authority .promise-blue__points li:first-child .promise-blue__badge { clip-path: ellipse(50% 50% at 50% 50%); } @media(min-width:1001px) { #authority .authority-light__closing.promise-blue { grid-template-columns: 250px minmax(0,1fr); gap: 20px 22px; } #authority .promise-blue__staff { width: 250px; transform: translateY(-36px); } #authority .promise-blue__copy strong { font-size: 55px; } } @media(min-width:768px) and (max-width:1000px) { #authority .promise-blue__staff { transform: translateY(-40px); } } /* 仕上げ：人物の下端を青背景に接続し、次のセクションとは白い余白で区切る。 */ #authority .authority-light__closing.promise-blue { margin-bottom: 24px; } #authority .authority-light__closing.promise-blue::after { content: ''; position: absolute; left: calc((100% - 100vw)/2); right: calc((100% - 100vw)/2); top: 100%; height: 24px; background: #fff; } #authority .promise-blue__copy strong { font-weight: 900; letter-spacing: -.065em; } @media(min-width:768px) { #authority .authority-light__closing.promise-blue { padding-top: 18px; padding-bottom: 18px; row-gap: 14px; } #authority .promise-blue__copy { line-height: 1.15; } #authority .promise-blue__staff { position: absolute; left: 0; bottom: 0; margin: 0; transform: none; } } @media(min-width:768px) and (max-width:1000px) { #authority .authority-light__closing.promise-blue { grid-template-columns: 210px minmax(0,1fr); } #authority .promise-blue__staff { width: 210px; } } @media(max-width:767px) { #authority .authority-light__closing.promise-blue { margin-bottom: 16px; } #authority .authority-light__closing.promise-blue::after { height: 16px; } #authority .promise-blue__staff { bottom: 0; } #authority .promise-blue__copy strong { letter-spacing: -.075em; } } @media(min-width:768px) { #authority .promise-blue__staff { grid-column: auto; grid-row: auto; } } #authority .promise-blue__copy strong { -webkit-text-stroke: .3px currentColor; } /* 住宅街は装飾用イメージ。コピー周辺を白く、外縁・下部に街並みを残す。 */ #authority .authority-light__closing.promise-blue { margin-bottom: 14px; } #authority .authority-light__closing.promise-blue::before { background-image: radial-gradient(ellipse at 62% 18%,rgba(255,255,255,.99) 0%,rgba(255,255,255,.95) 25%,rgba(255,255,255,.30) 72%),linear-gradient(to bottom,#fff 0%,rgba(255,255,255,.87) 20%,rgba(240,248,255,.58) 100%),url('../images/tokai_promise_neighborhood.webp'); background-size: cover; background-position: center bottom; background-repeat: no-repeat; clip-path: polygon(0 0,100% 0,100% calc(100% - 6px),0 100%); } #authority .authority-light__closing.promise-blue::after { height: 14px; } #authority .promise-blue__copy strong { position: relative; width: fit-content; margin: 0 auto; padding-bottom: 6px; color: #012d85; } #authority .promise-blue__copy strong::after { content: ''; position: absolute; height: 5px; width: 36%; left: 32%; bottom: 0; background: #f4d363; transform: skew(-15deg); } #authority .promise-blue__copy > span { color: #012d85; } @media(max-width:767px) { #authority .authority-light__closing.promise-blue { margin-bottom: 8px; } #authority .authority-light__closing.promise-blue::before { background-image: radial-gradient(ellipse at 50% 10%,#fff 0%,rgba(255,255,255,.96) 26%,rgba(255,255,255,.35) 75%),linear-gradient(to bottom,#fff,rgba(240,248,255,.64)),url('../images/tokai_promise_neighborhood.webp'); background-position: left bottom; clip-path: polygon(0 0,100% 0,100% calc(100% - 4px),0 100%); } #authority .authority-light__closing.promise-blue::after { height: 8px; } #authority .promise-blue__copy strong::after { height: 4px; } } /* 文字組みの仕上げ。元の高解像度メダルを約2倍の画素密度で表示する。 */ #authority .authority-light__ribbon { margin-bottom: 14px; } #authority .authority-light__achievement { gap: 1px; align-items: baseline; padding: 12px 0 0; margin-top: 4px; } #authority .authority-light__five { font-family: 'Arial Black',Arial,sans-serif; font-weight: 900; font-size: 104px; line-height: 1; letter-spacing: -.065em; color: #c39a28; text-shadow: 0 1px 0 #97731b; } #authority .authority-light__five::before { content: ''; position: absolute; width: 34px; height: 21px; left: 50%; top: -12px; transform: translateX(-42%); background: url('../images/tokai_authority_crown.svg') center / contain no-repeat; } #authority .authority-light__words { display: inline-flex; align-items: baseline; font-size: 76px; line-height: 1; letter-spacing: -.065em; font-weight: 900; } #authority .authority-light__words > span { font-size: 1em; } #authority .authority-light__words .authority-light__kanmuri { color: #c39a28; } #authority .authority-light__words .authority-light__bang { font-size: .82em; margin-left: -.08em; } #authority .promise-blue__copy strong { display: flex; justify-content: center; align-items: baseline; letter-spacing: -.07em; font-size: 56px; } #authority .promise-blue__copy .promise-blue__quote { font-size: .62em; position: relative; top: -.10em; letter-spacing: -.18em; } #authority .promise-blue__copy .promise-blue__bang { font-size: .85em; margin-left: -.1em; } #authority .promise-blue__badge { max-width: 124px; } #authority .promise-blue__badge img { width: calc(2378 / var(--crop-width) * 100%); } #authority .authority-light__closing.promise-blue { margin-bottom: 0; } #authority .authority-light__closing.promise-blue::before { clip-path: none; } #authority .authority-light__closing.promise-blue::after { content: none; } @media(min-width:768px) and (max-width:1000px) { #authority .promise-blue__copy strong { font-size: clamp(35px,4.9vw,48px); } } @media(max-width:767px) { #authority .authority-light__ribbon { margin-bottom: 12px; } #authority .authority-light__achievement { padding-top: 9px; margin-top: 4px; } #authority .authority-light__five { font-size: clamp(66px,18vw,75px); } #authority .authority-light__five::before { width: 26px; height: 16px; top: -9px; } #authority .authority-light__words { font-size: clamp(43px,12.2vw,51px); } #authority .promise-blue__copy strong { font-size: clamp(31px,8.8vw,38px); } /* 直下の既存背景画像に含まれる白い上端だけを、同じ青で埋める。内部素材は変更しない。 */ #authority + .art-direct::after { content: ''; position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: calc(36 / 828 * 100vw); background: #1850ad; pointer-events: none; } } /* 括弧は本文に沿う自然な大きさと字間へ揃える。 */ #authority .promise-blue__copy .promise-blue__quote { font-size: .86em; top: 0; letter-spacing: 0; margin-inline: .025em; line-height: 1; } /* 生成した高解像度メダル：384pxの原寸領域を最大124pxで表示。 */ #authority .promise-blue__badge { clip-path: circle(50% at 50% 50%); } #authority .promise-blue__points li:first-child .promise-blue__badge { clip-path: circle(50% at 50% 50%); } #authority .promise-blue__badge img { width: calc(2172 / var(--crop-width) * 100%); } /* メディア掲載専用。既存LPの青・白・黄色とフォントを共有。 */ #media { padding: 64px 20px 56px; background: #0148a2; color: #fff; } #media .media-inner { width: 100%; max-width: 1000px; margin: auto; } #media .media-heading { margin: 0 0 42px; text-align: center; font-weight: 900; } #media .media-heading__ribbon { position: relative; display: inline-block; margin: 0 0 20px; padding: 7px 22px; background: #fff200; color: #012d85; font-size: 20px; line-height: 1.3; } #media .media-heading__ribbon::before,#media .media-heading__ribbon::after { content: ''; position: absolute; top: 8px; width: 20px; height: 100%; background: #fff200; } #media .media-heading__ribbon::before { right: 100%; clip-path: polygon(0 0,100% 0,100% 100%,0 100%,30% 50%); } #media .media-heading__ribbon::after { left: 100%; clip-path: polygon(0 0,100% 0,70% 50%,100% 100%,0 100%); } #media .media-heading__main { display: block; font-size: 50px; line-height: 1.36; letter-spacing: .015em; } #media .media-heading__main > span { color: #fff200; } #media .media-tv { overflow: hidden; color: #012d85; background: #fff; border: 2px solid #fff; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,25,82,.15); } #media .media-tv__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 28px; background: #012d85; color: #fff; font-size: 18px; font-weight: 900; border-bottom: 4px solid #fff200; } #media .media-tv__bar > span:last-child { font-size: 14px; font-weight: 700; } #media .media-tv__body { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; padding: 28px; align-items: center; } #media .media-tv__intro img { width: 100%; height: auto; } #media .media-tv__intro h3 { font-size: 23px; font-weight: 900; line-height: 1.45; margin-top: 18px; } #media .media-tv__intro p { margin-top: 9px; color: #333; font-size: 14px; line-height: 1.8; } #media .media-tv__video-label { font-size: 16px; font-weight: 700; line-height: 1.5; margin: 0 0 10px; } #media .media-tv__video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #eef3fa; } #media .media-tv__intro h3 > span { display: inline-block; } #media .media-publications { margin-top: 42px; } #media .media-block-title { margin: 0 0 20px; font-size: 28px; font-weight: 900; line-height: 1.4; } #media .media-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; } #media .media-card { display: flex; flex-direction: column; background: #fff; color: #012d85; border: 1px solid #b5ccea; border-radius: 10px; overflow: hidden; } #media .media-card__title { padding: 11px 18px; font-size: 18px; font-weight: 700; line-height: 1.5; background: #012d85; color: #fff; } #media .media-card__image { display: flex; align-items: center; justify-content: center; padding: 20px 20px 12px; flex: 1; } #media .media-card__image picture { width: 100%; } #media .media-card__image img { display: block; width: 100%; height: auto; object-fit: contain; } #media .media-card__image:focus-visible { outline-offset: -4px; } #media .media-card__footer { padding: 0 20px 18px; color: #555; } #media .media-card__footer p { font-size: 13px; line-height: 1.7; margin-bottom: 8px; } #media .media-card__footer > span { display: block; text-align: right; color: #012d85; font-size: 12px; } #media .media-reviews { margin-top: 42px; padding: 26px; background: #ecf4ff; color: #012d85; border-radius: 10px; } #media .media-reviews h3 { font-size: 26px; font-weight: 900; line-height: 1.4; margin-bottom: 20px; } #media .media-reviews__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; } #media .media-reviews__grid img { width: 100%; height: auto; } @media (max-width: 767px) { #media { padding: 42px 15px 40px; } #media .media-heading { margin-bottom: 28px; } #media .media-heading__ribbon { font-size: 16px; padding: 6px 16px; margin-bottom: 16px; } #media .media-heading__main { font-size: clamp(24px,6.8vw,32px); letter-spacing: 0; line-height: 1.45; } #media .media-tv__bar { padding: 11px 18px; font-size: 17px; } #media .media-tv__bar > span:last-child { font-size: 12px; } #media .media-tv__body { grid-template-columns: minmax(0,1fr); gap: 24px; padding: 18px; } #media .media-tv__intro h3 { font-size: 22px; margin-top: 14px; } #media .media-tv__intro h3 > span { display: block; } #media .media-tv__intro p { font-size: 14px; } #media .media-publications { margin-top: 30px; } #media .media-block-title { font-size: 24px; margin-bottom: 16px; } #media .media-cards { grid-template-columns: minmax(0,1fr); gap: 18px; } #media .media-card__title { font-size: 17px; padding: 10px 16px; } #media .media-card__image { padding: 16px 14px 10px; } #media .media-card__footer { padding: 0 16px 16px; } #media .media-reviews { margin-top: 30px; padding: 20px 16px; } #media .media-reviews h3 { font-size: 24px; margin-bottom: 16px; } #media .media-reviews__grid { grid-template-columns: minmax(0,1fr); gap: 16px; } } /* 関連する2素材を共有の白い枠内に配置。 */ #media .media-cards { grid-template-columns: minmax(0,1fr); } #media .media-card__items { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } #media .media-card__item { min-width: 0; display: flex; flex-direction: column; } @media (max-width: 767px) { #media .media-card__items { grid-template-columns: minmax(0,1fr); } #media .media-card__item + .media-card__item { border-top: 1px solid #e3ebf6; } }