@charset "utf-8";
/* =========================================================
   リセット（sanitize.css 由来）

   もとの app.css は 491KB あったが、その大半は UUUM コーポレートサイト・
   jQuery UI・slick のスタイルで、当サイトでは 3,971 ルール中 44 しか
   使われていなかった。要素セレクタ（＝リセット部分）だけを残している。
   ========================================================= */

*, ::before, ::after { background-repeat: no-repeat; box-sizing: border-box; }
::before, ::after { text-decoration: inherit; vertical-align: inherit; }
html { cursor: default; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; line-height: 1.15; tab-size: 4; text-size-adjust: 100%; word-break: break-word; -webkit-font-smoothing: subpixel-antialiased; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx){html { -webkit-font-smoothing: antialiased; }}
body { margin: 0px; }
h1 { font-size: 2em; margin: 0.67em 0px; }
hr { height: 0px; overflow: visible; }
main { display: block; }
nav ol, nav ul { list-style: none; }
pre { font-family: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Liberation Mono", monospace; font-size: 1em; }
a { background-color: transparent; }
abbr[title] { text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Oxygen Mono", "Liberation Mono", monospace; font-size: 1em; }
small { font-size: 80%; }
::selection { background-color: rgb(179, 212, 252); color: rgb(0, 0, 0); text-shadow: none; }
audio, canvas, iframe, img, svg, video { vertical-align: middle; }
audio, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0px; }
img { border-style: none; }
svg { fill: currentcolor; }
svg:not(:root) { overflow: hidden; }
table { border-collapse: collapse; }
button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; }
button, input, select { margin: 0px; }
button { overflow: visible; text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { appearance: button; }
fieldset { padding: 0.35em 0.75em 0.625em; }
input { overflow: visible; }
legend { color: inherit; display: table; max-width: 100%; white-space: normal; }
progress { display: inline-block; vertical-align: baseline; }
select { text-transform: none; }
textarea { margin: 0px; overflow: auto; resize: vertical; }
[type="checkbox"], [type="radio"] { padding: 0px; }
[type="search"] { appearance: textfield; outline-offset: -2px; }
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
::-webkit-input-placeholder { color: inherit; opacity: 0.54; }
::-webkit-search-decoration { appearance: none; }
::-webkit-file-upload-button { appearance: button; font: inherit; }
details { display: block; }
dialog { background-color: white; border: solid; color: black; display: block; height: fit-content; left: 0px; margin: auto; padding: 1em; position: absolute; right: 0px; width: fit-content; }
dialog:not([open]) { display: none; }
summary { display: list-item; }
canvas { display: inline-block; }
template { display: none; }
a, area, button, input, label, select, summary, textarea, [tabindex] { touch-action: manipulation; }
[hidden] { display: none; }
[aria-busy="true"] { cursor: progress; }
[aria-controls] { cursor: pointer; }
[aria-disabled], [disabled] { cursor: not-allowed; }
[aria-hidden="false"][hidden]:not(:focus) { clip: rect(0px, 0px, 0px, 0px); display: inherit; position: absolute; }
html { font-family: sans-serif; height: 100%; text-size-adjust: 100%; }
body { margin: 0px; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0px; }
[hidden], template { display: none; }
a { background: transparent; }
a:active, a:hover { outline: 0px; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
dfn { font-style: italic; }
h1 { font-size: 2em; margin: 0.67em 0px; }
mark { background: rgb(255, 255, 0); color: rgb(0, 0, 0); }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border: 0px; }
svg:not(:root) { overflow: hidden; }
figure { margin: 1em 40px; }
hr { box-sizing: content-box; height: 0px; }
pre { overflow: auto; }
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }
button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0px; }
button { overflow: visible; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
input { line-height: normal; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0px; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }
input[type="search"] { appearance: textfield; box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { appearance: none; }
fieldset { border: 1px solid rgb(192, 192, 192); margin: 0px 2px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0px; padding: 0px; }
textarea { overflow: auto; }
optgroup { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0px; }
td, th { padding: 0px; }
iframe { border: 0px; }
html { font-size: 13px; text-rendering: optimizelegibility; text-size-adjust: none; }
body { backface-visibility: hidden; background-color: rgb(255, 255, 255); font-family: Lato, 游ゴシック, "Yu Gothic", 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; line-height: 1.8; overflow-wrap: break-word; }
@media only screen and (max-width: 768px){body { font-family: Lato, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }}
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
p, li, dt, dd, th, td, pre { line-break: strict; }
a { text-decoration: none; }
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, address { list-style-type: none; margin: 0px; padding: 0px; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
img { vertical-align: middle; }
pre { white-space: pre-wrap; }
[data-aos^="none"][data-aos^="none"] { opacity: 1; }
[data-aos="fade-up-half"] { transform: translate3d(0px, 50px, 0px); }
[data-aos="fade-up-quant"] { transform: translate3d(0px, 25px, 0px); }
[data-aos="fade-up-bit"] { transform: translate3d(0px, 10px, 0px); }
[data-aos][data-aos][data-aos-duration="50"], body[data-aos-duration="50"] [data-aos] { transition-duration: 50ms; }
[data-aos][data-aos][data-aos-delay="50"], body[data-aos-delay="50"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="100"], body[data-aos-duration="100"] [data-aos] { transition-duration: 0.1s; }
[data-aos][data-aos][data-aos-delay="100"], body[data-aos-delay="100"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="150"], body[data-aos-duration="150"] [data-aos] { transition-duration: 0.15s; }
[data-aos][data-aos][data-aos-delay="150"], body[data-aos-delay="150"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="200"], body[data-aos-duration="200"] [data-aos] { transition-duration: 0.2s; }
[data-aos][data-aos][data-aos-delay="200"], body[data-aos-delay="200"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="250"], body[data-aos-duration="250"] [data-aos] { transition-duration: 0.25s; }
[data-aos][data-aos][data-aos-delay="250"], body[data-aos-delay="250"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="300"], body[data-aos-duration="300"] [data-aos] { transition-duration: 0.3s; }
[data-aos][data-aos][data-aos-delay="300"], body[data-aos-delay="300"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="350"], body[data-aos-duration="350"] [data-aos] { transition-duration: 0.35s; }
[data-aos][data-aos][data-aos-delay="350"], body[data-aos-delay="350"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="400"], body[data-aos-duration="400"] [data-aos] { transition-duration: 0.4s; }
[data-aos][data-aos][data-aos-delay="400"], body[data-aos-delay="400"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="450"], body[data-aos-duration="450"] [data-aos] { transition-duration: 0.45s; }
[data-aos][data-aos][data-aos-delay="450"], body[data-aos-delay="450"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="500"], body[data-aos-duration="500"] [data-aos] { transition-duration: 0.5s; }
[data-aos][data-aos][data-aos-delay="500"], body[data-aos-delay="500"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="550"], body[data-aos-duration="550"] [data-aos] { transition-duration: 0.55s; }
[data-aos][data-aos][data-aos-delay="550"], body[data-aos-delay="550"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="600"], body[data-aos-duration="600"] [data-aos] { transition-duration: 0.6s; }
[data-aos][data-aos][data-aos-delay="600"], body[data-aos-delay="600"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="650"], body[data-aos-duration="650"] [data-aos] { transition-duration: 0.65s; }
[data-aos][data-aos][data-aos-delay="650"], body[data-aos-delay="650"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="700"], body[data-aos-duration="700"] [data-aos] { transition-duration: 0.7s; }
[data-aos][data-aos][data-aos-delay="700"], body[data-aos-delay="700"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="750"], body[data-aos-duration="750"] [data-aos] { transition-duration: 0.75s; }
[data-aos][data-aos][data-aos-delay="750"], body[data-aos-delay="750"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="800"], body[data-aos-duration="800"] [data-aos] { transition-duration: 0.8s; }
[data-aos][data-aos][data-aos-delay="800"], body[data-aos-delay="800"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="850"], body[data-aos-duration="850"] [data-aos] { transition-duration: 0.85s; }
[data-aos][data-aos][data-aos-delay="850"], body[data-aos-delay="850"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="900"], body[data-aos-duration="900"] [data-aos] { transition-duration: 0.9s; }
[data-aos][data-aos][data-aos-delay="900"], body[data-aos-delay="900"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="950"], body[data-aos-duration="950"] [data-aos] { transition-duration: 0.95s; }
[data-aos][data-aos][data-aos-delay="950"], body[data-aos-delay="950"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="1000"], body[data-aos-duration="1000"] [data-aos] { transition-duration: 1s; }
[data-aos][data-aos][data-aos-delay="1000"], body[data-aos-delay="1000"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="1050"], body[data-aos-duration="1050"] [data-aos] { transition-duration: 1.05s; }
[data-aos][data-aos][data-aos-delay="1050"], body[data-aos-delay="1050"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="1100"], body[data-aos-duration="1100"] [data-aos] { transition-duration: 1.1s; }
[data-aos][data-aos][data-aos-delay="1100"], body[data-aos-delay="1100"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="1150"], body[data-aos-duration="1150"] [data-aos] { transition-duration: 1.15s; }
[data-aos][data-aos][data-aos-delay="1150"], body[data-aos-delay="1150"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="1200"], body[data-aos-duration="1200"] [data-aos] { transition-duration: 1.2s; }
[data-aos][data-aos][data-aos-delay="1200"], body[data-aos-delay="1200"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="1250"], body[data-aos-duration="1250"] [data-aos] { transition-duration: 1.25s; }
[data-aos][data-aos][data-aos-delay="1250"], body[data-aos-delay="1250"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="1300"], body[data-aos-duration="1300"] [data-aos] { transition-duration: 1.3s; }
[data-aos][data-aos][data-aos-delay="1300"], body[data-aos-delay="1300"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="1350"], body[data-aos-duration="1350"] [data-aos] { transition-duration: 1.35s; }
[data-aos][data-aos][data-aos-delay="1350"], body[data-aos-delay="1350"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="1400"], body[data-aos-duration="1400"] [data-aos] { transition-duration: 1.4s; }
[data-aos][data-aos][data-aos-delay="1400"], body[data-aos-delay="1400"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="1450"], body[data-aos-duration="1450"] [data-aos] { transition-duration: 1.45s; }
[data-aos][data-aos][data-aos-delay="1450"], body[data-aos-delay="1450"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="1500"], body[data-aos-duration="1500"] [data-aos] { transition-duration: 1.5s; }
[data-aos][data-aos][data-aos-delay="1500"], body[data-aos-delay="1500"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="1550"], body[data-aos-duration="1550"] [data-aos] { transition-duration: 1.55s; }
[data-aos][data-aos][data-aos-delay="1550"], body[data-aos-delay="1550"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="1600"], body[data-aos-duration="1600"] [data-aos] { transition-duration: 1.6s; }
[data-aos][data-aos][data-aos-delay="1600"], body[data-aos-delay="1600"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="1650"], body[data-aos-duration="1650"] [data-aos] { transition-duration: 1.65s; }
[data-aos][data-aos][data-aos-delay="1650"], body[data-aos-delay="1650"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="1700"], body[data-aos-duration="1700"] [data-aos] { transition-duration: 1.7s; }
[data-aos][data-aos][data-aos-delay="1700"], body[data-aos-delay="1700"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="1750"], body[data-aos-duration="1750"] [data-aos] { transition-duration: 1.75s; }
[data-aos][data-aos][data-aos-delay="1750"], body[data-aos-delay="1750"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="1800"], body[data-aos-duration="1800"] [data-aos] { transition-duration: 1.8s; }
[data-aos][data-aos][data-aos-delay="1800"], body[data-aos-delay="1800"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="1850"], body[data-aos-duration="1850"] [data-aos] { transition-duration: 1.85s; }
[data-aos][data-aos][data-aos-delay="1850"], body[data-aos-delay="1850"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="1900"], body[data-aos-duration="1900"] [data-aos] { transition-duration: 1.9s; }
[data-aos][data-aos][data-aos-delay="1900"], body[data-aos-delay="1900"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="1950"], body[data-aos-duration="1950"] [data-aos] { transition-duration: 1.95s; }
[data-aos][data-aos][data-aos-delay="1950"], body[data-aos-delay="1950"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="2000"], body[data-aos-duration="2000"] [data-aos] { transition-duration: 2s; }
[data-aos][data-aos][data-aos-delay="2000"], body[data-aos-delay="2000"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="2050"], body[data-aos-duration="2050"] [data-aos] { transition-duration: 2.05s; }
[data-aos][data-aos][data-aos-delay="2050"], body[data-aos-delay="2050"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="2100"], body[data-aos-duration="2100"] [data-aos] { transition-duration: 2.1s; }
[data-aos][data-aos][data-aos-delay="2100"], body[data-aos-delay="2100"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="2150"], body[data-aos-duration="2150"] [data-aos] { transition-duration: 2.15s; }
[data-aos][data-aos][data-aos-delay="2150"], body[data-aos-delay="2150"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="2200"], body[data-aos-duration="2200"] [data-aos] { transition-duration: 2.2s; }
[data-aos][data-aos][data-aos-delay="2200"], body[data-aos-delay="2200"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="2250"], body[data-aos-duration="2250"] [data-aos] { transition-duration: 2.25s; }
[data-aos][data-aos][data-aos-delay="2250"], body[data-aos-delay="2250"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="2300"], body[data-aos-duration="2300"] [data-aos] { transition-duration: 2.3s; }
[data-aos][data-aos][data-aos-delay="2300"], body[data-aos-delay="2300"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="2350"], body[data-aos-duration="2350"] [data-aos] { transition-duration: 2.35s; }
[data-aos][data-aos][data-aos-delay="2350"], body[data-aos-delay="2350"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="2400"], body[data-aos-duration="2400"] [data-aos] { transition-duration: 2.4s; }
[data-aos][data-aos][data-aos-delay="2400"], body[data-aos-delay="2400"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="2450"], body[data-aos-duration="2450"] [data-aos] { transition-duration: 2.45s; }
[data-aos][data-aos][data-aos-delay="2450"], body[data-aos-delay="2450"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="2500"], body[data-aos-duration="2500"] [data-aos] { transition-duration: 2.5s; }
[data-aos][data-aos][data-aos-delay="2500"], body[data-aos-delay="2500"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="2550"], body[data-aos-duration="2550"] [data-aos] { transition-duration: 2.55s; }
[data-aos][data-aos][data-aos-delay="2550"], body[data-aos-delay="2550"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="2600"], body[data-aos-duration="2600"] [data-aos] { transition-duration: 2.6s; }
[data-aos][data-aos][data-aos-delay="2600"], body[data-aos-delay="2600"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="2650"], body[data-aos-duration="2650"] [data-aos] { transition-duration: 2.65s; }
[data-aos][data-aos][data-aos-delay="2650"], body[data-aos-delay="2650"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="2700"], body[data-aos-duration="2700"] [data-aos] { transition-duration: 2.7s; }
[data-aos][data-aos][data-aos-delay="2700"], body[data-aos-delay="2700"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="2750"], body[data-aos-duration="2750"] [data-aos] { transition-duration: 2.75s; }
[data-aos][data-aos][data-aos-delay="2750"], body[data-aos-delay="2750"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="2800"], body[data-aos-duration="2800"] [data-aos] { transition-duration: 2.8s; }
[data-aos][data-aos][data-aos-delay="2800"], body[data-aos-delay="2800"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="2850"], body[data-aos-duration="2850"] [data-aos] { transition-duration: 2.85s; }
[data-aos][data-aos][data-aos-delay="2850"], body[data-aos-delay="2850"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="2900"], body[data-aos-duration="2900"] [data-aos] { transition-duration: 2.9s; }
[data-aos][data-aos][data-aos-delay="2900"], body[data-aos-delay="2900"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="2950"], body[data-aos-duration="2950"] [data-aos] { transition-duration: 2.95s; }
[data-aos][data-aos][data-aos-delay="2950"], body[data-aos-delay="2950"] [data-aos] { }
[data-aos][data-aos][data-aos-duration="3000"], body[data-aos-duration="3000"] [data-aos] { transition-duration: 3s; }
[data-aos][data-aos][data-aos-delay="3000"], body[data-aos-delay="3000"] [data-aos] { }
[data-aos][data-aos][data-aos-easing="linear"], body[data-aos-easing="linear"] [data-aos] { transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75); }
[data-aos][data-aos][data-aos-easing="ease"], body[data-aos-easing="ease"] [data-aos] { transition-timing-function: ease; }
[data-aos][data-aos][data-aos-easing="ease-in"], body[data-aos-easing="ease-in"] [data-aos] { transition-timing-function: ease-in; }
[data-aos][data-aos][data-aos-easing="ease-out"], body[data-aos-easing="ease-out"] [data-aos] { transition-timing-function: ease-out; }
[data-aos][data-aos][data-aos-easing="ease-in-out"], body[data-aos-easing="ease-in-out"] [data-aos] { transition-timing-function: ease-in-out; }
[data-aos][data-aos][data-aos-easing="ease-in-back"], body[data-aos-easing="ease-in-back"] [data-aos] { transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045); }
[data-aos][data-aos][data-aos-easing="ease-out-back"], body[data-aos-easing="ease-out-back"] [data-aos] { transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); }
[data-aos][data-aos][data-aos-easing="ease-in-out-back"], body[data-aos-easing="ease-in-out-back"] [data-aos] { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
[data-aos][data-aos][data-aos-easing="ease-in-sine"], body[data-aos-easing="ease-in-sine"] [data-aos] { transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); }
[data-aos][data-aos][data-aos-easing="ease-out-sine"], body[data-aos-easing="ease-out-sine"] [data-aos] { transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); }
[data-aos][data-aos][data-aos-easing="ease-in-out-sine"], body[data-aos-easing="ease-in-out-sine"] [data-aos] { transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); }
[data-aos][data-aos][data-aos-easing="ease-in-quad"], body[data-aos-easing="ease-in-quad"] [data-aos] { transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); }
[data-aos][data-aos][data-aos-easing="ease-out-quad"], body[data-aos-easing="ease-out-quad"] [data-aos] { transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
[data-aos][data-aos][data-aos-easing="ease-in-out-quad"], body[data-aos-easing="ease-in-out-quad"] [data-aos] { transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); }
[data-aos][data-aos][data-aos-easing="ease-in-cubic"], body[data-aos-easing="ease-in-cubic"] [data-aos] { transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); }
[data-aos][data-aos][data-aos-easing="ease-out-cubic"], body[data-aos-easing="ease-out-cubic"] [data-aos] { transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
[data-aos][data-aos][data-aos-easing="ease-in-out-cubic"], body[data-aos-easing="ease-in-out-cubic"] [data-aos] { transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); }
[data-aos][data-aos][data-aos-easing="ease-in-quart"], body[data-aos-easing="ease-in-quart"] [data-aos] { transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); }
[data-aos][data-aos][data-aos-easing="ease-out-quart"], body[data-aos-easing="ease-out-quart"] [data-aos] { transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
[data-aos][data-aos][data-aos-easing="ease-in-out-quart"], body[data-aos-easing="ease-in-out-quart"] [data-aos] { transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); }
[data-aos^="fade"][data-aos^="fade"] { opacity: 0; transition-property: opacity, transform, -webkit-transform; }
[data-aos="fade-up"] { transform: translate3d(0px, 100px, 0px); }
[data-aos="fade-down"] { transform: translate3d(0px, -100px, 0px); }
[data-aos="fade-right"] { transform: translate3d(-100px, 0px, 0px); }
[data-aos="fade-left"] { transform: translate3d(100px, 0px, 0px); }
[data-aos="fade-up-right"] { transform: translate3d(-100px, 100px, 0px); }
[data-aos="fade-up-left"] { transform: translate3d(100px, 100px, 0px); }
[data-aos="fade-down-right"] { transform: translate3d(-100px, -100px, 0px); }
[data-aos="fade-down-left"] { transform: translate3d(100px, -100px, 0px); }
[data-aos^="zoom"][data-aos^="zoom"] { opacity: 0; transition-property: opacity, transform, -webkit-transform; }
[data-aos="zoom-in"] { transform: scale(0.6); }
[data-aos="zoom-in-up"] { transform: translate3d(0px, 100px, 0px) scale(0.6); }
[data-aos="zoom-in-down"] { transform: translate3d(0px, -100px, 0px) scale(0.6); }
[data-aos="zoom-in-right"] { transform: translate3d(-100px, 0px, 0px) scale(0.6); }
[data-aos="zoom-in-left"] { transform: translate3d(100px, 0px, 0px) scale(0.6); }
[data-aos="zoom-out"] { transform: scale(1.2); }
[data-aos="zoom-out-up"] { transform: translate3d(0px, 100px, 0px) scale(1.2); }
[data-aos="zoom-out-down"] { transform: translate3d(0px, -100px, 0px) scale(1.2); }
[data-aos="zoom-out-right"] { transform: translate3d(-100px, 0px, 0px) scale(1.2); }
[data-aos="zoom-out-left"] { transform: translate3d(100px, 0px, 0px) scale(1.2); }
[data-aos^="slide"][data-aos^="slide"] { transition-property: transform, -webkit-transform; }
[data-aos="slide-up"] { transform: translate3d(0px, 100%, 0px); }
[data-aos="slide-down"] { transform: translate3d(0px, -100%, 0px); }
[data-aos="slide-right"] { transform: translate3d(-100%, 0px, 0px); }
[data-aos="slide-left"] { transform: translate3d(100%, 0px, 0px); }
[data-aos^="flip"][data-aos^="flip"] { backface-visibility: hidden; transition-property: transform, -webkit-transform; }
[data-aos="flip-left"] { transform: perspective(2500px) rotateY(-100deg); }
[data-aos="flip-right"] { transform: perspective(2500px) rotateY(100deg); }
[data-aos="flip-up"] { transform: perspective(2500px) rotateX(-100deg); }
[data-aos="flip-down"] { transform: perspective(2500px) rotateX(100deg); }
html { height: 100%; margin: 0px; }

/* フォントは public/css/fonts.css（必要な範囲だけに絞った自己ホスト版）で読み込む。
   ここから google-fonts-1/2.css を @import すると 334KB を二重に読むことになるので外した。 */
/**
 * Swiper 9.4.1
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2023 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: June 13, 2023
 */
@font-face {
  font-family: swiper-icons;
  src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');
  font-weight: 400;
  font-style: normal;
}
:root {
  --swiper-theme-color: #007aff;
}

.swiper,
swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
}

.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}

.swiper-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}

.swiper-horizontal {
  touch-action: pan-y;
}

.swiper-vertical {
  touch-action: pan-x;
}

.swiper-slide,
swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}

.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}

.swiper-3d {
  perspective: 1200px;
}

.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
  transform-style: preserve-3d;
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}

.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}

.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}

.swiper-vertical.swiper-css-mode > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}

.swiper-centered > .swiper-wrapper::before {
  content: '';
  flex-shrink: 0;
  order: 9999;
}

.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}

.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  -webkit-margin-start: var(--swiper-centered-offset-before);
  margin-inline-start: var(--swiper-centered-offset-before);
}

.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}

.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  -webkit-margin-before: var(--swiper-centered-offset-before);
  margin-block-start: var(--swiper-centered-offset-before);
}

.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}

@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
  height: 1px;
  width: var(--swiper-virtual-size);
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
  width: 1px;
  height: var(--swiper-virtual-size);
}

:root {
  --swiper-navigation-size: 44px;
}

.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: var(--swiper-navigation-top-offset, 50%);
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - var(--swiper-navigation-size) / 2);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-next.swiper-button-hidden,
.swiper-button-prev.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}

.swiper-navigation-disabled .swiper-button-next,
.swiper-navigation-disabled .swiper-button-prev {
  display: none !important;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, 10px);
  right: auto;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: 'prev';
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: 'next';
}

.swiper-button-lock {
  display: none;
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 0.3s opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

.swiper-pagination-disabled > .swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
  display: none !important;
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}

.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}

.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.swiper-pagination-bullet:only-child {
  display: none !important;
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical > .swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 0.2s transform, 0.2s top;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 0.2s transform, 0.2s left;
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
:host(.swiper-horizontal.swiper-rtl) .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 0.2s transform, 0.2s right;
}

.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}

.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}

.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: var(--swiper-pagination-progressbar-size, 4px);
  left: 0;
  top: 0;
}

.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-vertical > .swiper-pagination-progressbar {
  width: var(--swiper-pagination-progressbar-size, 4px);
  height: 100%;
  left: 0;
  top: 0;
}

.swiper-pagination-lock {
  display: none;
}

.swiper-scrollbar {
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  position: relative;
  -ms-touch-action: none;
  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
}

.swiper-scrollbar-disabled > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
  display: none !important;
}

.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
  position: absolute;
  left: var(--swiper-scrollbar-sides-offset, 1%);
  bottom: var(--swiper-scrollbar-bottom, 4px);
  top: var(--swiper-scrollbar-top, auto);
  z-index: 50;
  height: var(--swiper-scrollbar-size, 4px);
  width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}

.swiper-scrollbar.swiper-scrollbar-vertical,
.swiper-vertical > .swiper-scrollbar {
  position: absolute;
  left: var(--swiper-scrollbar-left, auto);
  right: var(--swiper-scrollbar-right, 4px);
  top: var(--swiper-scrollbar-sides-offset, 1%);
  z-index: 50;
  width: var(--swiper-scrollbar-size, 4px);
  height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  left: 0;
  top: 0;
}

.swiper-scrollbar-cursor-drag {
  cursor: move;
}

.swiper-scrollbar-lock {
  display: none;
}

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.swiper-zoom-container > canvas,
.swiper-zoom-container > img,
.swiper-zoom-container > svg {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.swiper-slide-zoomed {
  cursor: move;
  touch-action: none;
}

.swiper .swiper-notification,
swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}

.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}

.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}

.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}

.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube {
  overflow: visible;
}

.swiper-cube .swiper-slide {
  pointer-events: none;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}

.swiper-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-cube.swiper-rtl .swiper-slide {
  transform-origin: 100% 0;
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-next + .swiper-slide,
.swiper-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible;
}

.swiper-cube .swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-right,
.swiper-cube .swiper-slide-shadow-top {
  z-index: 0;
  backface-visibility: hidden;
}

.swiper-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 0;
}

.swiper-cube .swiper-cube-shadow:before {
  content: '';
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  filter: blur(50px);
}

.swiper-flip {
  overflow: visible;
}

.swiper-flip .swiper-slide {
  pointer-events: none;
  backface-visibility: hidden;
  z-index: 1;
}

.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-flip .swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-right,
.swiper-flip .swiper-slide-shadow-top {
  z-index: 0;
  backface-visibility: hidden;
}

.swiper-creative .swiper-slide {
  backface-visibility: hidden;
  overflow: hidden;
  transition-property: transform, opacity, height;
}

.swiper-cards {
  overflow: visible;
}

.swiper-cards .swiper-slide {
  transform-origin: center bottom;
  backface-visibility: hidden;
  overflow: hidden;
}
@charset "UTF-8";
/* Mixin - Background
--------------------------- */
/* Parts - Device
--------------------------- */
@media screen and (max-width: 767px) {
  .pc-only {
    display: none !important;
  }
  .sp-only {
    display: block !important;
  }
}
@media screen and (min-width: 768px) {
  .pc-only {
    display: block !important;
  }
  .sp-only {
    display: none !important;
  }
}
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
  all: unset;
  display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove list styles (bullets/numbers) */
ol,
ul {
  list-style: none;
}

button {
  all: unset;
  display: revert;
}

figure {
  margin: 0;
}

/* For images to not be able to exceed their container */
/* removes spacing between cells in tables */
table {
  border-collapse: collapse;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
  white-space: revert;
}

h4 {
  margin: 0;
}

html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

:root {
  --color-10th-bg: #f0fbff;
  --color-text-white: #ffffff;
  --color-text-black: #113544;
  --color-blue: #0095d3;
  --color-lblue: #11a7e6;
  --color-pblue: #d4ecf5;
  --color-green: #77c1b3;
  --color-lgreen: #7accbd;
  --color-red: #f77e62;
}

html {
  font-size: 62.5%;
}

body {
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  letter-spacing: 0.1em;
  font-feature-settings: 'palt';
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* antialiased は macOS で線を細らせるので使わない（読みやすさ優先） */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: unset;
  /* YakuHanJP は UUUM の Adobe Fonts キット由来で読めなくなったため外した */
  font-family: 'Readex Pro', 'Zen Kaku Gothic New', 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', メイリオ,
    Meiryo, sans-serif;
  font-size: 1.6rem;
  color: var(--color-text-black);
  background-color: var(--color-10th-bg);
}

.l-glink-container {
  position: relative;
}

/* モバイルで .glink-container を opacity: 0 にして is-loaded で戻す指定が
   ここにあったが、削除した。ローディングのオーバーレイ（不透明・全面）が
   既に本体を隠しており、二重に隠すと FV（＝LCP）の描画がオーバーレイ解除
   まで計上されず、Core Web Vitals を大きく悪化させていたため */

.l-section {
  width: 100%;
}

a {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.js-loading {
  pointer-events: none;
  background-color: var(--color-10th-bg);
  position: fixed;
  height: 100vh;
  height: 100svh;
  left: 0;
  top: 0;
  z-index: 1111;
}
.js-loading .p-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}
.js-loading .p-loading span {
  --loading-img-width: 25rem;
  --loading-img-margin: 14rem;
  display: block;
  animation: marquee-horizontal 5s linear infinite;
  will-change: transform;
  display: flex;
  backface-visibility: hidden;
  overflow: hidden;
  width: calc(8 * (var(--loading-img-width) + var(--loading-img-margin)));
  padding: 10px 0;
}
@media screen and (max-width: 767px) {
  .js-loading .p-loading span {
    --loading-img-width: 15rem;
    --loading-img-margin: 8rem;
  }
}
.js-loading .p-loading span img {
  width: var(--loading-img-width);
  margin-right: var(--loading-img-margin);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  white-space: nowrap;
  will-change: transform;
  -o-object-fit: contain;
  object-fit: contain;
  transform: translateY(105%);
}
.js-loading .p-loading span img:nth-child(odd) {
  animation: updown 1.7s ease-in-out infinite 3.1s;
}
.js-loading .p-loading span img:nth-child(even) {
  animation: updown 1.7s ease-in-out infinite 2.4s;
}

/* 読み込み前は画面上に隠しておく。
   transform を使うと子要素の position:fixed（メニューオーバーレイ）が
   ビューポート基準にならないため top で動かす */
header {
  top: -130px;
}

.glink-container {
  position: relative;
}
.glink-container::after {
  opacity: 0;
}

.l-mainVisual-inner {
  position: relative;
}

.c-mainV-bg {
  width: 100%;
  height: 250vh;
  min-height: 2000px;
  border-radius: 9999px 9999px 0 0;
  position: absolute;
  left: 0;
  /* キャッチコピーは濃紺なので、青いドームに掛からない位置から始める。
     コピーの高さは px 基準（font-size の clamp）なので rem 側の下限も持たせる */
  top: max(26vh, 26rem);
  background-color: var(--color-blue);
  z-index: -1;
}

.is-loaded header {
  top: 16px;
  transition: top 1s cubic-bezier(0.86, 0, 0.11, 1) 0.6s;
}
@media screen and (max-width: 767px) {
  .is-loaded header {
    top: 0;
    transition: none;
  }
}
.is-loaded .glink-container::after {
  opacity: 1;
}

@keyframes loading-anim {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  1% {
    transform: translate(0, 0) rotate(1.5deg);
  }
  2% {
    transform: translate(0, 0) rotate(0deg);
  }
  3% {
    transform: translate(0, 0) rotate(1.5deg);
  }
  4% {
    transform: translate(0, 0) rotate(0deg);
  }
  5% {
    transform: translate(0, 0) rotate(1.5deg);
  }
  6% {
    transform: translate(0, 0) rotate(0deg);
  }
  7% {
    transform: translate(0, 0) rotate(1.5deg);
  }
  8% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
@keyframes marquee-horizontal {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-25%);
  }
}
@keyframes updown {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: -0.5%;
  }
  100% {
    margin-top: 0;
  }
}
header {
  position: fixed;
  /* top は初期状態（-130px）と .is-loaded（16px）が管理する */
  z-index: 100;
  padding: 14px 12px 14px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-10th-bg);
  width: 97%;
  left: 1.5%;
  border-radius: 1000px;
}
header h1 {
  width: 64px;
}
header h1 img {
  width: 100%;
}
/* =========================================================
   ナビは全画面幅でハンバーガーに統一。
   ヘッダーにはロゴとボタンだけを出し、項目は全画面オーバーレイで見せる
   ========================================================= */
header ul {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  height: 100svh;
  width: 100%;
  background: var(--color-10th-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 背の低い画面で溢れたときに先頭が切れないように */
  justify-content: safe center;
  padding: 0 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  overflow-y: auto;
}
header ul.is-active {
  opacity: 1;
  pointer-events: auto;
}
header ul li {
  width: 100%;
  margin: 0.8rem 0;
  border-radius: 0 12rem 12rem 0;
  overflow: hidden;
}
header ul .c-menu-item {
  display: block;
  padding: 4vh 26px 4vh 16px;
  background: #def3fb;
  cursor: pointer;
}
header ul .c-menu-item span {
  display: block;
  /* 目に留まる強さを出す。900 は fonts.css に自己ホストしてある */
  font-weight: 900;
  color: #0b2027;
}
header ul .c-menu-item span::after {
  content: attr(data-text);
  display: block;
  margin-top: 4px;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--color-blue);
}
header ul .c-menu-item:hover,
header ul .c-menu-item:focus-visible {
  background: #cdedf9;
}
header ul .c-menu-item:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: -3px;
}
/* 現在いるページの項目。コーラルの点はキャッチコピー「革命」の差し色 */
header ul .c-menu-item[aria-current='page'] {
  background: #c3e6f6;
}
header ul .c-menu-item[aria-current='page'] span::before {
  content: '';
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.55em;
  border-radius: 50%;
  background: var(--color-red);
}
/* スポットイラストのアイコンは PC のオーバーレイでだけ出す */
.c-menu-ico {
  display: none;
}
/* PC はピルを互い違いに振って、手作業の揺らぎを出す */
@media screen and (min-width: 768px) {
  header ul li {
    width: min(92%, 620px);
    margin: 0.8rem auto;
  }
  header ul li:nth-child(odd) {
    border-radius: 8px 12rem 12rem 8px;
    transform: translateX(-18px);
  }
  header ul li:nth-child(even) {
    border-radius: 12rem 8px 8px 12rem;
    transform: translateX(18px);
  }
  header ul .c-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.4rem;
    padding: 1.5rem 4rem;
    text-align: left;
  }
  .c-menu-ico {
    display: block;
    width: 76px;
    height: 76px;
    flex-shrink: 0;
  }
  header ul .c-menu-item span {
    min-width: 11em;
    font-size: 2.2rem;
    letter-spacing: 0.1em;
  }
  header ul .c-menu-item span::after {
    font-size: 1.25rem;
    margin-top: 6px;
  }
}
/* ハンバーガーボタン（全幅共通） */
header button {
  width: 40px;
  height: 40px;
  position: relative;
  display: block;
  z-index: 1;
}
header button::before,
header button::after {
  content: '';
  height: 3px;
  width: 100%;
  border-radius: 3px;
  background-color: var(--color-blue);
  display: block;
  position: absolute;
  transform-origin: center center;
}
header button::before {
  top: 50%;
  left: 0;
  transform: translateY(calc(-50% + 6px));
  transition: transform 0.4s ease;
}
header button::after {
  top: 50%;
  left: 0;
  transform: translateY(calc(-50% - 6px));
  transition: transform 0.4s ease;
}
header button.is-active::before {
  top: 50%;
  left: 0;
  transform: translateY(-50%) rotate(-20deg);
  transition: transform 0.4s ease;
}
header button.is-active::after {
  top: 50%;
  left: 0;
  transform: translateY(-50%) rotate(20deg);
  transition: transform 0.4s ease;
}
/* メニューを開いてもロゴと×ボタンはオーバーレイの上に残す */
header .c-logo {
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  header {
    width: 100%;
    left: 0;
    background: none;
    top: 0;
    padding: 10px 16px 0;
  }
  header h1 {
    width: 50px;
    position: relative;
    z-index: 1;
  }
  header ul .c-menu-item {
    padding: 5vh 26px 5vh 16px;
  }
}

footer {
  height: 16vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 3rem;
  letter-spacing: 0rem;
}

/* メインビジュアル
/* l-mainVisual
------------------------------------------------------------*/
.l-mainVisual {
  width: 100%;
  /* ヘッダーは position:fixed・top:16px・高さ約72px の不透明なピル。
     キャッチコピーがその下に潜らないよう、px の下限を必ず確保する */
  padding-top: max(11rem, 12vh);
  padding-bottom: 5vh;
  position: relative;
  z-index: 1;
}

/* PC はファーストビューの高さを使い切る。
   キャッチコピーの高さは font-size の clamp 由来で可変なので、
   残りをイラストに flex で配分し、下に余白が残らないようにする */
@media screen and (min-width: 768px) {
  .l-mainVisual {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    padding-bottom: 2.5vh;
  }

  .l-mainVisual > .c-mv-copy {
    flex: 0 0 auto;
  }

  /* 高さを確実に伝えるため、img まで flex のチェーンで繋ぐ */
  .l-mainVisual > .l-mainVisual-inner {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
  }

  .l-mainVisual > .l-mainVisual-inner .p-mainVisual-inner {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .l-mainVisual > .l-mainVisual-inner .c-mv-base {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* 高さいっぱいに伸ばし、横に広い画面では max-width 側で頭打ちにする。
     どちらで頭打ちになっても contain で比率を保つ */
  .l-mainVisual > .l-mainVisual-inner .c-mv-base img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: min(86%, 1400px);
    margin: 0 auto;
    object-fit: contain;
    object-position: 50% 100%;
  }
}
@media screen and (max-width: 767px) {
  .l-mainVisual {
    /* SP のヘッダーは背景なし・高さ約45px。ロゴと被らない位置まで下げる */
    padding-top: max(7.5rem, 17%);
    padding-bottom: 0;
  }
}

.portrait .l-mainVisual-inner {
  width: 90%;
}

.l-mainVisual-inner {
  /* SP 用のフォールバック。PC では上の flex 指定が上書きする */
  width: min(90%, 96vh);
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  --base-width: 1448;
  --base-height: 1086;
}
.l-mainVisual-inner .p-mainVisual-inner {
  width: 100%;
  position: relative;
}
.l-mainVisual-inner .p-mainVisual-inner .c-mv-base {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.l-mainVisual-inner .p-mainVisual-inner .c-mv-base img {
  width: 100%;
  height: auto;
}
.l-mainVisual-inner .p-mainVisual-inner .c-mv-parts {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  position: absolute;
}
.l-mainVisual-inner .p-mainVisual-inner .c-mv-parts img {
  width: 100%;
}
.l-mainVisual-inner .p-mainVisual-inner .c-parts-baby {
  width: calc(197 / var(--base-width) * 100%);
  top: calc(1542 / var(--base-height) * 100%);
  left: calc(2064 / var(--base-width) * 100%);
}
.l-mainVisual-inner .p-mainVisual-inner .c-parts-cat {
  width: calc(207 / var(--base-width) * 100%);
  top: calc(400 / var(--base-height) * 100%);
  left: calc(2144 / var(--base-width) * 100%);
  animation-delay: 0s;
}
.l-mainVisual-inner .p-mainVisual-inner .c-parts-cloud01 {
  width: calc(198 / var(--base-width) * 100%);
  top: calc(1342 / var(--base-height) * 100%);
  left: calc(2124 / var(--base-width) * 100%);
  animation-delay: 1s;
}
.l-mainVisual-inner .p-mainVisual-inner .c-parts-cloud02 {
  width: calc(196 / var(--base-width) * 100%);
  top: calc(681 / var(--base-height) * 100%);
  left: calc(140 / var(--base-width) * 100%);
}
.l-mainVisual-inner .p-mainVisual-inner .c-parts-earing {
  width: calc(437 / var(--base-width) * 100%);
  top: calc(1152 / var(--base-height) * 100%);
  left: calc(96 / var(--base-width) * 100%);
}
.l-mainVisual-inner .p-mainVisual-inner .c-parts-girl {
  width: calc(129 / var(--base-width) * 100%);
  top: calc(1362 / var(--base-height) * 100%);
  left: calc(964 / var(--base-width) * 100%);
}
.l-mainVisual-inner .p-mainVisual-inner .c-parts-human {
  width: calc(103 / var(--base-width) * 100%);
  top: calc(580 / var(--base-height) * 100%);
  left: calc(1304 / var(--base-width) * 100%);
}
.l-mainVisual-inner .p-mainVisual-inner .c-parts-jet {
  width: calc(235 / var(--base-width) * 100%);
  top: calc(80 / var(--base-height) * 100%);
  left: calc(2084 / var(--base-width) * 100%);
  animation-delay: 0.5s;
}
.l-mainVisual-inner .p-mainVisual-inner .c-parts-keyholder {
  width: calc(317 / var(--base-width) * 100%);
  top: calc(1342 / var(--base-height) * 100%);
  left: calc(266 / var(--base-width) * 100%);
}
.l-mainVisual-inner .p-mainVisual-inner .c-parts-man {
  width: calc(106 / var(--base-width) * 100%);
  top: calc(640 / var(--base-height) * 100%);
  left: calc(1000 / var(--base-width) * 100%);
}
.l-mainVisual-inner .p-mainVisual-inner .c-parts-senior {
  width: calc(123 / var(--base-width) * 100%);
  top: calc(760 / var(--base-height) * 100%);
  left: calc(1370 / var(--base-width) * 100%);
}
.l-mainVisual-inner .p-mainVisual-inner .c-parts-ship {
  width: calc(411 / var(--base-width) * 100%);
  top: calc(90 / var(--base-height) * 100%);
  left: calc(4 / var(--base-width) * 100%);
  animation-delay: 0.9s;
}
.l-mainVisual-inner .p-mainVisual-inner .c-parts-wave {
  width: calc(115 / var(--base-width) * 100%);
  top: calc(30 / var(--base-height) * 100%);
  left: calc(500 / var(--base-width) * 100%);
}
.l-mainVisual-inner .p-mainVisual-inner .c-parts-woman {
  width: calc(172 / var(--base-width) * 100%);
  top: calc(1108 / var(--base-height) * 100%);
  left: calc(1014 / var(--base-width) * 100%);
}
.l-mainVisual-inner .p-mainVisual-inner .c-parts-woman2 {
  width: calc(155 / var(--base-width) * 100%);
  top: calc(1258 / var(--base-height) * 100%);
  left: calc(1924 / var(--base-width) * 100%);
  animation-delay: 1s;
}
.l-mainVisual-inner .a-upAndDown {
  animation: UpAndDown 7s steps(1) infinite;
}
.l-mainVisual-inner .a-reversal {
  animation: reversal 12s steps(1) infinite;
  transform-origin: center center;
}
.l-mainVisual-inner .a-leftAndRight {
  animation: LeftAndRight 7s steps(1) infinite;
}
.l-mainVisual-inner .a-rightandLeft {
  animation: RightandLeft 7s steps(1) infinite;
}
.l-mainVisual-inner .a-Diagonal {
  animation: Diagonal 6s steps(1) infinite;
}
.l-mainVisual-inner .a-flashing {
  animation: flashing 5s steps(1) infinite;
}
.l-mainVisual-inner .a-wave-swing {
  animation: wave-swing 6s steps(1) infinite;
  transform-origin: left bottom;
}
.l-mainVisual-inner .a-warking {
  animation: warking 9s steps(1) infinite;
}
.l-mainVisual-inner .a-warking2 {
  animation: warking-second 9s steps(1) infinite;
}
@keyframes reversal {
  0% {
    transform: scale(1, 1);
  }
  20% {
    transform: scale(-1, 1);
  }
  40% {
    transform: scale(1, 1);
  }
  60% {
    transform: scale(-1, 1);
  }
  80% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(-1, 1);
  }
}
@keyframes warking {
  0% {
    transform: scale(1, 1) translateX(0px);
  }
  20% {
    transform: scale(1, 1) translateX(10px);
  }
  40% {
    transform: scale(-1, 1) translateX(0px);
  }
  60% {
    transform: scale(-1, 1) translateX(10px);
  }
  80% {
    transform: scale(1, 1) translateX(0px);
  }
  100% {
    transform: scale(1, 1) translateX(10px);
  }
}
@keyframes warking-second {
  0% {
    transform: scale(1, 1) translate(0, 0px);
  }
  20% {
    transform: scale(1, 1) translate(4px, -4px);
  }
  40% {
    transform: scale(-1, 1) translate(0, 0px);
  }
  60% {
    transform: scale(-1, 1) translate(4px, -4px);
  }
  80% {
    transform: scale(1, 1) translate(0, 0px);
  }
  100% {
    transform: scale(1, 1) translate(4px, -4px);
  }
}
@keyframes flashing {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes UpAndDown {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(5px);
  }
  40% {
    transform: translateY(0);
  }
  60% {
    transform: translateY(5px);
  }
  80% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(5px);
  }
}
@keyframes LeftAndRight {
  0% {
    transform: rotate(10deg);
  }
  20% {
    transform: rotate(14deg);
  }
  40% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(14deg);
  }
  80% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(14deg);
  }
}
@keyframes RightandLeft {
  0% {
    transform: rotate(-4deg);
  }
  20% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(-4deg);
  }
  60% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(-4deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes Diagonal {
  0% {
    transform: translate(4px, -4px);
  }
  20% {
    transform: translate(0);
  }
  40% {
    transform: translate(-4px, 4px);
  }
  60% {
    transform: translate(0);
  }
  80% {
    transform: translate(4px, -4px);
  }
  100% {
    transform: translate(0);
  }
}
@keyframes wave-swing {
  0% {
    transform: rotate(-20deg);
  }
  14% {
    transform: rotate(-10deg);
  }
  28% {
    transform: rotate(-5deg);
  }
  42% {
    transform: rotate(0);
  }
  56% {
    transform: rotate(5deg);
  }
  70% {
    transform: rotate(-10deg);
  }
  84% {
    transform: rotate(-20deg);
  }
}

/* TOWN
/* l-town
------------------------------------------------------------*/
.l-town {
  width: 100%;
  position: relative;
  z-index: 1;
  height: 200vh;
  margin-top: -12%;
}
@media (max-aspect-ratio: 1/0.78) {
  .l-town {
    height: 100vh;
  }
}

.l-town-inner {
  width: 55%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  --base-width: 2389;
  --base-height: 1863;
}
@media screen and (max-width: 767px) {
  .l-town-inner {
    width: 88%;
  }
}
.l-town-inner .p-town-inner {
  width: 100%;
  position: relative;
}
.l-town-inner .p-town-inner .c-mv-base {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.l-town-inner .p-town-inner .c-mv-base img {
  width: 100%;
  height: auto;
}
.l-town-inner .p-town-inner .c-mv-parts {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  position: absolute;
}
.l-town-inner .p-town-inner .c-mv-parts img {
  width: 100%;
}
.l-town-inner .p-town-inner .c-parts-baby {
  width: calc(197 / var(--base-width) * 100%);
  top: calc(1542 / var(--base-height) * 100%);
  left: calc(2064 / var(--base-width) * 100%);
}
.l-town-inner .p-town-inner .c-parts-cat {
  width: calc(207 / var(--base-width) * 100%);
  top: calc(400 / var(--base-height) * 100%);
  left: calc(2144 / var(--base-width) * 100%);
  animation-delay: 0s;
}
.l-town-inner .p-town-inner .c-parts-cloud01 {
  width: calc(198 / var(--base-width) * 100%);
  top: calc(1342 / var(--base-height) * 100%);
  left: calc(2124 / var(--base-width) * 100%);
  animation-delay: 1s;
}
.l-town-inner .p-town-inner .c-parts-cloud02 {
  width: calc(196 / var(--base-width) * 100%);
  top: calc(681 / var(--base-height) * 100%);
  left: calc(140 / var(--base-width) * 100%);
}
.l-town-inner .p-town-inner .c-parts-earing {
  width: calc(437 / var(--base-width) * 100%);
  top: calc(1152 / var(--base-height) * 100%);
  left: calc(96 / var(--base-width) * 100%);
}
.l-town-inner .p-town-inner .c-parts-girl {
  width: calc(129 / var(--base-width) * 100%);
  top: calc(1362 / var(--base-height) * 100%);
  left: calc(964 / var(--base-width) * 100%);
}
.l-town-inner .p-town-inner .c-parts-human {
  width: calc(103 / var(--base-width) * 100%);
  top: calc(580 / var(--base-height) * 100%);
  left: calc(1304 / var(--base-width) * 100%);
}
.l-town-inner .p-town-inner .c-parts-jet {
  width: calc(235 / var(--base-width) * 100%);
  top: calc(80 / var(--base-height) * 100%);
  left: calc(2084 / var(--base-width) * 100%);
  animation-delay: 0.5s;
}
.l-town-inner .p-town-inner .c-parts-keyholder {
  width: calc(317 / var(--base-width) * 100%);
  top: calc(1342 / var(--base-height) * 100%);
  left: calc(266 / var(--base-width) * 100%);
}
.l-town-inner .p-town-inner .c-parts-man {
  width: calc(106 / var(--base-width) * 100%);
  top: calc(640 / var(--base-height) * 100%);
  left: calc(1000 / var(--base-width) * 100%);
}
.l-town-inner .p-town-inner .c-parts-senior {
  width: calc(123 / var(--base-width) * 100%);
  top: calc(760 / var(--base-height) * 100%);
  left: calc(1370 / var(--base-width) * 100%);
}
.l-town-inner .p-town-inner .c-parts-ship {
  width: calc(411 / var(--base-width) * 100%);
  top: calc(90 / var(--base-height) * 100%);
  left: calc(4 / var(--base-width) * 100%);
  animation-delay: 0.9s;
}
.l-town-inner .p-town-inner .c-parts-wave {
  width: calc(115 / var(--base-width) * 100%);
  top: calc(30 / var(--base-height) * 100%);
  left: calc(500 / var(--base-width) * 100%);
}
.l-town-inner .p-town-inner .c-parts-woman {
  width: calc(172 / var(--base-width) * 100%);
  top: calc(1108 / var(--base-height) * 100%);
  left: calc(1014 / var(--base-width) * 100%);
}
.l-town-inner .p-town-inner .c-parts-woman2 {
  width: calc(155 / var(--base-width) * 100%);
  top: calc(1258 / var(--base-height) * 100%);
  left: calc(1924 / var(--base-width) * 100%);
  animation-delay: 1s;
}
.l-town-inner .a-upAndDown {
  animation: UpAndDown 7s steps(1) infinite;
}
.l-town-inner .a-reversal {
  animation: reversal 12s steps(1) infinite;
  transform-origin: center center;
}
.l-town-inner .a-leftAndRight {
  animation: LeftAndRight 7s steps(1) infinite;
}
.l-town-inner .a-rightandLeft {
  animation: RightandLeft 7s steps(1) infinite;
}
.l-town-inner .a-Diagonal {
  animation: Diagonal 6s steps(1) infinite;
}
.l-town-inner .a-flashing {
  animation: flashing 5s steps(1) infinite;
}
.l-town-inner .a-wave-swing {
  animation: wave-swing 6s steps(1) infinite;
  transform-origin: left bottom;
}
.l-town-inner .a-warking {
  animation: warking 9s steps(1) infinite;
}
.l-town-inner .a-warking2 {
  animation: warking-second 9s steps(1) infinite;
}
@keyframes reversal {
  0% {
    transform: scale(1, 1);
  }
  20% {
    transform: scale(-1, 1);
  }
  40% {
    transform: scale(1, 1);
  }
  60% {
    transform: scale(-1, 1);
  }
  80% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(-1, 1);
  }
}
@keyframes warking {
  0% {
    transform: scale(1, 1) translateX(0px);
  }
  20% {
    transform: scale(1, 1) translateX(10px);
  }
  40% {
    transform: scale(-1, 1) translateX(0px);
  }
  60% {
    transform: scale(-1, 1) translateX(10px);
  }
  80% {
    transform: scale(1, 1) translateX(0px);
  }
  100% {
    transform: scale(1, 1) translateX(10px);
  }
}
@keyframes warking-second {
  0% {
    transform: scale(1, 1) translate(0, 0px);
  }
  20% {
    transform: scale(1, 1) translate(4px, -4px);
  }
  40% {
    transform: scale(-1, 1) translate(0, 0px);
  }
  60% {
    transform: scale(-1, 1) translate(4px, -4px);
  }
  80% {
    transform: scale(1, 1) translate(0, 0px);
  }
  100% {
    transform: scale(1, 1) translate(4px, -4px);
  }
}
@keyframes flashing {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes UpAndDown {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(5px);
  }
  40% {
    transform: translateY(0);
  }
  60% {
    transform: translateY(5px);
  }
  80% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(5px);
  }
}
@keyframes LeftAndRight {
  0% {
    transform: rotate(10deg);
  }
  20% {
    transform: rotate(14deg);
  }
  40% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(14deg);
  }
  80% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(14deg);
  }
}
@keyframes RightandLeft {
  0% {
    transform: rotate(-4deg);
  }
  20% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(-4deg);
  }
  60% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(-4deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes Diagonal {
  0% {
    transform: translate(4px, -4px);
  }
  20% {
    transform: translate(0);
  }
  40% {
    transform: translate(-4px, 4px);
  }
  60% {
    transform: translate(0);
  }
  80% {
    transform: translate(4px, -4px);
  }
  100% {
    transform: translate(0);
  }
}
@keyframes wave-swing {
  0% {
    transform: rotate(-20deg);
  }
  14% {
    transform: rotate(-10deg);
  }
  28% {
    transform: rotate(-5deg);
  }
  42% {
    transform: rotate(0);
  }
  56% {
    transform: rotate(5deg);
  }
  70% {
    transform: rotate(-10deg);
  }
  84% {
    transform: rotate(-20deg);
  }
}

/* OUR MESSAGE
/* .section-message
------------------------------------------------------------*/
body {
  --section-margin: 6%;
  --section-spMargin: 8px;
}

.section-message {
  background: linear-gradient(180deg, transparent 0%, transparent 20%, var(--color-blue) 20%, var(--color-blue) 100%);
  color: var(--color-text-white);
  position: relative;
}
.section-message[data-sticky-name='01'] {
  padding-bottom: 40vh;
}
@media screen and (max-width: 767px) {
  .section-message[data-sticky-name='01'] {
    padding-bottom: 25vh;
  }
}
.section-message[data-sticky-name='01'] .scrub-text {
  width: 100%;
  position: relative;
  overflow: hidden;
  height: 26rem;
  top: 10%;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  position: sticky;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 1024px) {
  .section-message[data-sticky-name='01'] .scrub-text {
    height: 20rem;
  }
}
@media screen and (max-width: 767px) {
  .section-message[data-sticky-name='01'] .scrub-text {
    height: 14rem;
  }
}
.section-message[data-sticky-name='01'] .scrub-text p {
  position: absolute;
  white-space: nowrap;
  display: flex;
  justify-content: flex-start;
  font-weight: 400;
  color: var(--color-10th-bg);
  opacity: 0.1;
  font-size: 22rem;
  letter-spacing: -1.5rem;
  will-change: transform;
}
.section-message[data-sticky-name='01'] .scrub-text p span {
  line-height: 1;
  display: inline-block;
  padding-right: 6rem;
}
@media screen and (max-width: 1024px) {
  .section-message[data-sticky-name='01'] .scrub-text p {
    font-size: 9rem;
    letter-spacing: -0.6rem;
  }
  .section-message[data-sticky-name='01'] .scrub-text p span {
    padding-right: 4rem;
  }
}
.section-message[data-sticky-name='01'] .p-sticky-illust {
  position: fixed;
  opacity: 1;
  animation: wobbling_y 0.7s ease-in-out infinite alternate;
}
@media screen and (max-width: 767px) {
  .section-message[data-sticky-name='01'] .p-sticky-illust {
    position: static;
    transform: translateY(0);
    animation: none;
  }
}
.section-message[data-sticky-name='01'] .p-sticky-illust img {
  width: 100%;
}
.section-message[data-sticky-name='01'] .p-sticky-illust01 {
  top: 125%;
  width: 24vw;
  left: 2%;
  transform: translateY(30%);
  max-width: 480px;
}
@media screen and (max-width: 767px) {
  .section-message[data-sticky-name='01'] .p-sticky-illust01 {
    width: 60%;
    margin: auto;
    transform: translateY(0);
  }
}
.section-message[data-sticky-name='01'] .p-sticky-illust02 {
  top: 120%;
  width: 24vw;
  right: 2%;
  max-width: 480px;
}
@media screen and (max-width: 767px) {
  .section-message[data-sticky-name='01'] .p-sticky-illust02 {
    width: 60%;
    margin: auto;
    transform: translateY(0);
  }
}
@keyframes wobbling_y {
  0% {
    margin-top: 0px;
  }
  100% {
    margin-top: 30px;
  }
}
.section-message[data-sticky-name='01'] .p-message-text {
  margin-bottom: 14rem;
  z-index: 1;
  position: relative;
}
@media screen and (max-width: 767px) {
  .section-message[data-sticky-name='01'] .p-message-text {
    padding: 0 var(--section-spMargin);
  }
}
@media screen and (max-width: 767px) {
  .section-message[data-sticky-name='01'] .p-message-text {
    margin-top: -22%;
    margin-bottom: 4rem;
  }
}
.section-message[data-sticky-name='01'] .p-message-text h2 {
  text-align: center;
  font-size: 10rem;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 7rem;
  color: var(--color-10th-bg);
}
@media screen and (max-width: 767px) {
  .section-message[data-sticky-name='01'] .p-message-text h2 {
    font-size: 6.5rem;
    margin-bottom: 3rem;
  }
}
.section-message[data-sticky-name='01'] .p-message-text p {
  font-size: 2rem;
  text-align: center;
  line-height: 2.8;
}
@media screen and (max-width: 767px) {
  .section-message[data-sticky-name='01'] .p-message-text p {
    font-size: 1.5rem;
    line-height: 2;
  }
}
.section-message[data-sticky-name='01'] .p-message-text p.mb20 {
  margin-bottom: 2rem;
}
@media screen and (max-width: 767px) {
  .section-message[data-sticky-name='01'] .p-message-text p.mb20 {
    margin-bottom: 2rem;
  }
}
.section-message[data-sticky-name='01'] .p-message-text .logo {
  /* 署名画像は原寸 136px。あまり拡大すると粗が出るので 180px で頭打ち */
  width: 180px;
  margin: 5rem auto 0;
}
.section-message[data-sticky-name='01'] .p-message-text .logo img {
  width: 100%;
}
.section-message[data-sticky-name='01'] .p-greeting-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  max-width: 1280px;
  padding: 0 var(--section-margin);
  margin: 14rem auto 0;
  position: relative;
  z-index: 1;
}
.section-message[data-sticky-name='01'] .p-greeting-wrap .c-image {
  width: 40%;
  position: sticky;
  top: 0;
  padding-top: 10rem;
}
.section-message[data-sticky-name='01'] .p-greeting-wrap .c-image-inner {
  width: 100%;
  position: relative;
  border-radius: 9999px;
  overflow: hidden;
  aspect-ratio: 16/22;
}
.section-message[data-sticky-name='01'] .p-greeting-wrap .c-image-inner img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.section-message[data-sticky-name='01'] .p-greeting-wrap .c-message {
  width: 60%;
  padding-left: 8%;
  padding-top: 10rem;
}
.section-message[data-sticky-name='01'] .p-greeting-wrap .c-message h3 {
  font-size: 2.2rem;
  font-weight: 700;
  background-color: var(--color-lblue);
  padding: 20px 30px;
  margin-bottom: 4.5rem;
  border-radius: 100px 100px 100px 0;
  display: inline-block;
}
@media screen and (max-width: 767px) {
  .section-message[data-sticky-name='01'] .p-greeting-wrap .c-message h3 {
    margin-bottom: 2.5rem;
    font-size: 2rem;
  }
}
.section-message[data-sticky-name='01'] .p-greeting-wrap .c-message p {
  font-size: 1.8rem;
  margin-bottom: 2rem;
  text-align: left;
  line-height: 2.4;
}
@media screen and (max-width: 767px) {
  .section-message[data-sticky-name='01'] .p-greeting-wrap .c-message p {
    margin-bottom: 1.6rem;
    line-height: 2;
    font-size: 1.5rem;
  }
}
.section-message[data-sticky-name='01'] .p-greeting-wrap .c-message p.date {
  font-size: 1.4rem;
  margin-bottom: 0;
}
.section-message[data-sticky-name='01'] .p-greeting-wrap .c-message p.name {
  font-size: 2.2rem;
  line-height: 1.5;
}
.section-message[data-sticky-name='01'] .p-greeting-wrap .c-message p:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  .section-message[data-sticky-name='01'] .p-greeting-wrap {
    margin-top: 4rem;
    display: block;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .section-message[data-sticky-name='01'] .p-greeting-wrap {
    padding: 0 var(--section-spMargin);
  }
}
@media screen and (max-width: 767px) {
  .section-message[data-sticky-name='01'] .p-greeting-wrap .c-image {
    padding-top: 3rem;
    width: 100%;
    position: static;
    margin-bottom: 2.5rem;
  }
  .section-message[data-sticky-name='01'] .p-greeting-wrap .c-message {
    padding-left: 0;
    padding-top: 3rem;
    width: 100%;
  }
}

/* MESSAGE
/* .section-message-thanks
------------------------------------------------------------*/
.section-message-thanks {
  background-color: var(--color-blue);
  color: var(--color-text-white);
  padding: 5vh 0 0;
  position: relative;
  z-index: 1;
  --bg-bottom-position: 7%;
}
.section-message-thanks .c-sectionMessage-bg {
  width: 100%;
  height: 100%;
  border-radius: 9999px 9999px 0 0;
  position: absolute;
  left: 0;
  top: -2%;
  background-color: var(--color-lblue);
  z-index: 0;
}
@media screen and (max-width: 1024px) {
  .section-message-thanks .c-sectionMessage-bg {
    top: 0%;
  }
}
.section-message-thanks .c-sectionMessage-bg-after {
  width: 100vw;
  height: 51.5000000747vw;
  position: absolute;
  left: 0;
  bottom: var(--bg-bottom-position);
  transform: translateY(100%);
  background: url('../img/img-h-circle-bottom.svg') center bottom no-repeat, var(--color-blue);
  background-size: cover;
  z-index: 1;
}
@media screen and (max-width: 1024px) {
  .section-message-thanks .c-sectionMessage-bg-after {
    bottom: 0;
  }
}
.section-message-thanks .p-content {
  position: relative;
  z-index: 1;
}
.section-message-thanks .p-content::after {
  content: '';
  width: 100%;
  height: 50%;
  position: absolute;
  left: 0;
  bottom: var(--bg-bottom-position);
  background-color: var(--color-lblue);
  z-index: -1;
}
@media screen and (max-width: 1024px) {
  .section-message-thanks .p-content::after {
    bottom: 0;
  }
}
.section-message-thanks h2.c-section-title {
  text-align: center;
  font-size: 10rem;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 10rem;
}
.section-message-thanks h2.c-section-title span {
  display: block;
  margin: 1.2rem auto 0;
  font-size: 2rem;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .section-message-thanks h2.c-section-title {
    font-size: 6.5rem;
    margin-bottom: 3rem;
  }
  .section-message-thanks h2.c-section-title span {
    font-size: 1.8rem;
    line-height: 1.6;
    font-weight: 500;
  }
}
.section-message-thanks .p-message-wrap {
  max-width: 1280px;
  margin: auto;
  padding: 0 calc(var(--section-margin) / 2);
}
.section-message-thanks .p-message-wrap li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: var(--color-blue);
  padding: 20px;
  border-radius: 20px 160px 160px 20px;
  margin-bottom: 30px;
}
.section-message-thanks .p-message-wrap li .c-image {
  width: 220px;
  height: 220px;
  border-radius: 10px;
  position: relative;
}
.section-message-thanks .p-message-wrap li .c-image img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.section-message-thanks .p-message-wrap li .c-text {
  width: calc(100% - 220px);
  padding-left: 4rem;
}
.section-message-thanks .p-message-wrap li .c-text .c-text-01 {
  margin-bottom: 0.4rem;
}
.section-message-thanks .p-message-wrap li .c-text .c-text-02 {
  margin-bottom: 1rem;
}
.section-message-thanks .p-message-wrap li .c-text .mb {
  margin-bottom: 1rem;
}
@media screen and (max-width: 1024px) {
  .section-message-thanks .p-message-wrap li {
    display: block;
    border-radius: 1200px 1200px 40px 40px;
    padding: 1.4rem 1.4rem 2.4rem;
  }
  .section-message-thanks .p-message-wrap li .c-image {
    width: 100%;
    height: 50%;
    padding-top: 100%;
    border-radius: 1200px 1200px 40px 40px;
    margin-bottom: 1.3rem;
    overflow: hidden;
  }
  .section-message-thanks .p-message-wrap li .c-text {
    width: 100%;
    padding-left: 0;
  }
  .section-message-thanks .p-message-wrap li .c-text .c-text-01 {
    font-size: 1.4rem;
    margin-bottom: 0.4rem;
  }
  .section-message-thanks .p-message-wrap li .c-text .c-text-02 {
    font-size: 1.7rem;
    margin-bottom: 0.6rem;
  }
  .section-message-thanks .p-message-wrap li .c-text .mb {
    margin-bottom: 0.6rem;
  }
  .section-message-thanks .p-message-wrap li .c-text .c-message-text {
    font-size: 1.3rem;
    line-height: 1.8;
  }
}
@media screen and (max-width: 767px) {
  .section-message-thanks .p-message-wrap li .c-image {
    height: 100%;
  }
}
@media screen and (max-width: 1024px) {
  .section-message-thanks .p-message-wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .section-message-thanks .p-message-wrap li {
    width: 48%;
  }
}
@media screen and (max-width: 767px) {
  .section-message-thanks .p-message-wrap {
    display: block;
  }
  .section-message-thanks .p-message-wrap li {
    width: 100%;
  }
}

/* HISTORY
/* .section-history
------------------------------------------------------------*/
.section-history {
  --text-block-w: 50%;
  --image-block-w: 40%;
  background-color: var(--color-10th-bg);
  padding: 0 0 20vh;
  position: relative;
  margin-top: 25%;
}
@media screen and (max-width: 767px) {
  .section-history {
    padding: 0 0 20vh;
  }
}
.section-history .p-sticky-wrap {
  height: 240vh;
  background: linear-gradient(180deg, var(--color-blue) 0%, var(--color-blue) 99%, transparent 99%, transparent 100%);
}
.section-history .p-sticky-wrap .p-sticky-circle {
  height: 100vh;
  width: 100vw;
  position: sticky;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0%;
  overflow: hidden;
}
.section-history .p-sticky-wrap .p-sticky-circle span.c-sticky-circle {
  display: block;
  background-color: var(--color-10th-bg);
  width: 3000px;
  height: 3000px;
  border-radius: 50%;
  transform: scale(0, 0);
  z-index: 0;
  position: absolute;
  transform-origin: center center;
}
@media screen and (min-width: 1920px) {
  .section-history .p-sticky-wrap .p-sticky-circle span.c-sticky-circle {
    width: 2500px;
    height: 2500px;
  }
}
@media screen and (min-width: 2000px) {
  .section-history .p-sticky-wrap .p-sticky-circle span.c-sticky-circle {
    width: 3400px;
    height: 3400px;
  }
}
@media screen and (max-width: 1920px) {
  .section-history .p-sticky-wrap .p-sticky-circle span.c-sticky-circle {
    width: 2500px;
    height: 2500px;
  }
}
@media screen and (max-width: 1500px) {
  .section-history .p-sticky-wrap .p-sticky-circle span.c-sticky-circle {
    width: 2000px;
    height: 2000px;
  }
}
@media screen and (max-width: 1000px) {
  .section-history .p-sticky-wrap .p-sticky-circle span.c-sticky-circle {
    width: 1700px;
    height: 1700px;
  }
}
.section-history .p-sticky-wrap .c-sticky-illust {
  position: sticky;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  z-index: 1;
  width: 35vw;
  top: 50%;
  transform: translateY(-50%);
  margin: auto;
}
@media screen and (max-width: 767px) {
  .section-history .p-sticky-wrap .c-sticky-illust {
    width: 55vw;
    transform: translateY(-35%);
  }
}
.section-history .p-sticky-wrap .c-sticky-illust img {
  width: 100%;
  animation: wobbling_y 0.7s ease-in-out infinite alternate;
  position: relative;
  z-index: 1;
}
.section-history h2.c-section-title {
  text-align: center;
  font-size: 10rem;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 10rem;
}
.section-history h2.c-section-title span {
  display: block;
  margin: 1.2rem auto 0;
  font-size: 2rem;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .section-history h2.c-section-title {
    font-size: 6.5rem;
    margin-bottom: 3rem;
  }
  .section-history h2.c-section-title span {
    font-size: 1.8rem;
    line-height: 1.6;
    font-weight: 500;
  }
}
.section-history .content-history {
  z-index: 1;
  position: relative;
}
.section-history .content-history .p-history-block {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.section-history .content-history .p-history-block .p-image-fixed {
  width: var(--image-block-w);
  position: sticky;
  display: flex;
  align-items: center;
  top: 50%;
}
@media screen and (max-width: 767px) {
  .section-history .content-history .p-history-block .p-image-fixed {
    display: none;
  }
}
.section-history .content-history .p-history-block .p-image-fixed .p-image-block {
  width: 100%;
  position: absolute;
}
.section-history .content-history .p-history-block .p-image-fixed .c-image-inner {
  display: flex;
  justify-content: flex-end;
  background: var(--color-blue);
  border-radius: 0 1000px 1000px 0;
  width: 100%;
}
.section-history .content-history .p-history-block .p-image-fixed .c-image-inner .c-image {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 30vw;
  border-radius: 0 14px 14px 0;
}
.section-history .content-history .p-history-block .p-image-fixed .c-image-inner .c-image img {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.section-history .content-history .p-history-block .p-image-fixed .c-image-inner .c-image img:first-child {
  top: 0;
  opacity: 1;
}
.section-history .content-history .p-history-block .p-history-wrap {
  position: relative;
  width: var(--text-block-w);
  margin-top: 14rem;
  padding-right: var(--section-margin);
}
@media screen and (max-width: 767px) {
  .section-history .content-history .p-history-block .p-history-wrap {
    margin-top: 4rem;
    width: 100%;
    padding-right: 0;
    padding-left: 40px !important;
  }
}
.section-history .content-history .p-history-block .p-history-wrap .p-history-item {
  width: 100%;
  position: relative;
  padding-bottom: 40vh;
}
@media screen and (max-width: 767px) {
  .section-history .content-history .p-history-block .p-history-wrap .p-history-item {
    padding-bottom: 20vh;
  }
}
.section-history .content-history .p-history-block .p-history-wrap .p-history-item:last-child {
  padding-bottom: 0;
}
.section-history .content-history .p-history-block .p-history-wrap .p-history-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--color-pblue);
  z-index: -1;
}
.section-history .content-history .p-history-block .p-history-wrap .p-history-item:last-child::before {
  display: none;
}
.section-history .content-history .p-history-block .p-history-wrap .p-history-item h3 {
  font-size: 7.5rem;
  font-weight: 400;
}
.section-history .content-history .p-history-block .p-history-wrap .p-history-item h3 span {
  position: relative;
}
.section-history .content-history .p-history-block .p-history-wrap .p-history-item h3 span::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 9.3rem;
  height: 9.3rem;
  border-radius: 50%;
  background: var(--color-text-white);
  z-index: -1;
  transition: background 0.3s ease;
  transform: translate(-39%, -20%);
}
.section-history .content-history .p-history-block .p-history-wrap .p-history-item h3 span.active::after {
  transition: background 0.3s ease;
  background: var(--color-lblue);
}
@media screen and (max-width: 767px) {
  .section-history .content-history .p-history-block .p-history-wrap .p-history-item h3 {
    font-size: 5.5rem;
  }
  .section-history .content-history .p-history-block .p-history-wrap .p-history-item h3 span::after {
    width: 6.3rem;
    height: 6.3rem;
  }
}
.section-history .content-history .p-history-block .p-history-wrap .p-history-item .p-history-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 40px;
  padding-left: 6vw;
}
@media screen and (max-width: 767px) {
  .section-history .content-history .p-history-block .p-history-wrap .p-history-item .p-history-content {
    padding-top: 6px;
    display: block;
  }
}
.section-history .content-history .p-history-block .p-history-wrap .p-history-item .p-history-content .c-sp-image {
  width: var(--image-block-w);
  justify-content: flex-end;
  background: var(--color-blue);
  border-radius: 0 1000px 1000px 0;
  display: none;
}
@media screen and (max-width: 767px) {
  .section-history .content-history .p-history-block .p-history-wrap .p-history-item .p-history-content .c-sp-image {
    width: 100%;
    border-radius: 1000px 0 0 1000px;
    display: block;
  }
}
.section-history
  .content-history
  .p-history-block
  .p-history-wrap
  .p-history-item
  .p-history-content
  .c-sp-image
  .c-image-inner {
  width: 35vw;
  height: 35vw;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}
.section-history
  .content-history
  .p-history-block
  .p-history-wrap
  .p-history-item
  .p-history-content
  .c-sp-image
  .c-image-inner
  img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .section-history
    .content-history
    .p-history-block
    .p-history-wrap
    .p-history-item
    .p-history-content
    .c-sp-image
    .c-image-inner {
    width: 90%;
    height: 56vw;
    border-radius: 14px;
    margin-bottom: 2rem;
  }
}
.section-history .content-history .p-history-block .p-history-wrap .p-history-item .p-history-content .c-text {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .section-history .content-history .p-history-block .p-history-wrap .p-history-item .p-history-content .c-text {
    padding-right: var(--section-spMargin);
  }
}
.section-history .content-history .p-history-block .p-history-wrap .p-history-item .p-history-content .c-text h4 {
  font-size: 2.1rem;
  font-weight: 500;
  margin-bottom: 3rem;
}
@media screen and (max-width: 767px) {
  .section-history .content-history .p-history-block .p-history-wrap .p-history-item .p-history-content .c-text h4 {
    margin-bottom: 1rem;
    font-size: 1.9rem;
  }
}
.section-history .content-history .p-history-block .p-history-wrap .p-history-item .p-history-content .c-text p {
  font-size: 1.6rem;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .section-history .content-history .p-history-block .p-history-wrap .p-history-item .p-history-content .c-text p {
    font-size: 1.5rem;
  }
}

/* 10TH CONTENTS
/* .section-history
------------------------------------------------------------*/
.section-10thcontents {
  position: relative;
  z-index: 1;
}
.section-10thcontents .c-sticky-illust {
  position: sticky;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  z-index: 0;
  width: 30vw;
  margin: auto;
}
.section-10thcontents .c-sticky-illust img {
  width: 100%;
  animation: wobbling_y 0.7s ease-in-out infinite alternate;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .section-10thcontents .c-sticky-illust {
    width: 60vw;
    height: 70vw;
    position: static;
  }
  .section-10thcontents .c-sticky-illust img {
    animation: none;
  }
}
.section-10thcontents .c-10thcontents-bg {
  width: 100%;
  height: 90%;
  border-radius: 9999px 9999px 0 0;
  position: absolute;
  left: 0;
  top: 10%;
  background-color: var(--color-blue);
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .section-10thcontents .c-10thcontents-bg {
    top: 5%;
    height: 110%;
  }
}
.section-10thcontents h2.c-section-title {
  text-align: center;
  font-size: 10rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-10th-bg);
  position: relative;
  z-index: 2;
}
.section-10thcontents h2.c-section-title span {
  display: block;
  margin: 1.2rem auto 0;
  font-size: 2rem;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .section-10thcontents h2.c-section-title {
    font-size: 6.5rem;
    margin-bottom: 3rem;
  }
  .section-10thcontents h2.c-section-title span {
    font-size: 1.8rem;
    line-height: 1.6;
    font-weight: 500;
  }
}
.section-10thcontents .side-scroll-list-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
}
.section-10thcontents .side-scroll-list-wrapper .scrub-text-10thcontent {
  width: 100%;
  position: relative;
  overflow: hidden;
  height: 26rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
}
.section-10thcontents .side-scroll-list-wrapper .scrub-text-10thcontent p {
  color: var(--color-text-white);
  position: absolute;
  white-space: nowrap;
  display: flex;
  justify-content: flex-start;
  font-weight: 400;
  opacity: 0.1;
  font-size: 22rem;
  letter-spacing: -1.5rem;
  will-change: transform;
}
.section-10thcontents .side-scroll-list-wrapper .scrub-text-10thcontent p span {
  line-height: 1;
  display: inline-block;
  padding-right: 10rem;
}
@media screen and (max-width: 767px) {
  .section-10thcontents .side-scroll-list-wrapper .scrub-text-10thcontent p {
    font-size: 16rem;
    letter-spacing: -0.6rem;
  }
}
.section-10thcontents .side-scroll-list-wrapper .side-scroll-list {
  display: flex;
  gap: 0 14rem;
  padding-left: var(--section-margin);
  padding-right: var(--section-margin);
}
@media screen and (max-width: 1024px) {
  .section-10thcontents .side-scroll-list-wrapper .side-scroll-list {
    gap: 0 6rem;
  }
}
@media screen and (max-width: 767px) {
  .section-10thcontents .side-scroll-list-wrapper .side-scroll-list {
    gap: 0 3rem;
  }
}
.section-10thcontents .side-scroll-list-wrapper .side-scroll-list .side-scroll-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 830px;
}
.section-10thcontents .side-scroll-list-wrapper .side-scroll-list .side-scroll-item .c-10thContent-item {
  width: 100%;
  background-color: var(--color-lblue);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 2rem 2rem 4rem;
  border-radius: 20px 500px 500px 20px;
}
.section-10thcontents .side-scroll-list-wrapper .side-scroll-list .side-scroll-item .c-10thContent-item .mySwiper {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  -o-object-fit: cover;
  object-fit: cover;
}
.section-10thcontents
  .side-scroll-list-wrapper
  .side-scroll-list
  .side-scroll-item
  .c-10thContent-item
  .mySwiper
  .swiper-pagination {
  text-align: left;
  padding-left: 20px;
}
@media screen and (max-width: 767px) {
  .section-10thcontents
    .side-scroll-list-wrapper
    .side-scroll-list
    .side-scroll-item
    .c-10thContent-item
    .mySwiper
    .swiper-pagination {
    padding-left: 10px;
    top: 0;
    bottom: auto;
  }
}
.section-10thcontents
  .side-scroll-list-wrapper
  .side-scroll-list
  .side-scroll-item
  .c-10thContent-item
  .mySwiper
  .swiper-pagination
  .swiper-pagination-bullet {
  background: var(--color-10th-bg);
  opacity: 1;
  width: 10px;
  height: 10px;
}
.section-10thcontents
  .side-scroll-list-wrapper
  .side-scroll-list
  .side-scroll-item
  .c-10thContent-item
  .mySwiper
  .swiper-pagination
  .swiper-pagination-bullet-active {
  background-color: var(--color-blue);
}
.section-10thcontents .side-scroll-list-wrapper .side-scroll-list .side-scroll-item .c-10thContent-item .c-text {
  width: 45%;
  color: var(--color-10th-bg);
  padding-right: 3.4rem;
}
.section-10thcontents .side-scroll-list-wrapper .side-scroll-list .side-scroll-item .c-10thContent-item .c-text h3 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 2rem;
}
.section-10thcontents .side-scroll-list-wrapper .side-scroll-list .side-scroll-item .c-10thContent-item .c-text p {
  font-size: 1.5rem;
  margin-bottom: 3rem;
  line-height: 1.8;
  word-break: break-all;
}
.section-10thcontents
  .side-scroll-list-wrapper
  .side-scroll-list
  .side-scroll-item
  .c-10thContent-item
  .c-text
  .c-button {
  background: var(--color-10th-bg);
  display: inline-block;
  color: var(--color-text-black);
  font-size: 1.5rem;
  padding: 20px 94px 20px 18px;
  border-radius: 10px 60px 60px 10px;
}
.section-10thcontents .side-scroll-list-wrapper .side-scroll-list .side-scroll-item .c-10thContent-item .c-image {
  --thumbnail-size: 55%;
  width: var(--thumbnail-size);
  height: 0;
  padding-top: var(--thumbnail-size);
  position: relative;
  border-radius: 20px 500px 500px 20px;
  overflow: hidden;
  z-index: 1;
}
.section-10thcontents .side-scroll-list-wrapper .side-scroll-list .side-scroll-item .c-10thContent-item .c-image img {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  -o-object-fit: cover;
  object-fit: cover;
}
.section-10thcontents
  .side-scroll-list-wrapper
  .side-scroll-list
  .side-scroll-item
  .c-10thContent-item
  .c-image
  .c-label {
  font-size: 1.4rem;
  background-color: var(--color-10th-bg);
  padding: 3px 8px;
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  border-radius: 4px;
}
@media screen and (max-width: 767px) {
  .section-10thcontents
    .side-scroll-list-wrapper
    .side-scroll-list
    .side-scroll-item
    .c-10thContent-item
    .c-image
    .c-label {
    left: auto;
    right: 10px;
  }
}
@media screen and (max-width: 1024px) {
  .section-10thcontents .side-scroll-list-wrapper .side-scroll-list .side-scroll-item {
    width: 45vw;
  }
  .section-10thcontents .side-scroll-list-wrapper .side-scroll-list .side-scroll-item .c-10thContent-item {
    padding: 2rem;
    border-radius: 20px 20px 500px 500px;
    display: block;
  }
  .section-10thcontents .side-scroll-list-wrapper .side-scroll-list .side-scroll-item .c-10thContent-item .c-text {
    width: 100%;
    padding-right: 0;
    margin-bottom: 3rem;
  }
  .section-10thcontents .side-scroll-list-wrapper .side-scroll-list .side-scroll-item .c-10thContent-item .c-text h3 {
    margin-bottom: 1rem;
    font-size: 1.8rem;
  }
  .section-10thcontents .side-scroll-list-wrapper .side-scroll-list .side-scroll-item .c-10thContent-item .c-text p {
    line-height: 1.5;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
  }
  .section-10thcontents
    .side-scroll-list-wrapper
    .side-scroll-list
    .side-scroll-item
    .c-10thContent-item
    .c-text
    .c-button {
    padding: 14px 94px 14px 18px;
  }
  .section-10thcontents .side-scroll-list-wrapper .side-scroll-list .side-scroll-item .c-10thContent-item .c-image {
    overflow: hidden;
    width: 100%;
    padding-top: 90%;
    border-radius: 20px 20px 500px 500px;
  }
}
@media screen and (max-width: 767px) {
  .section-10thcontents .side-scroll-list-wrapper .side-scroll-list .side-scroll-item {
    width: 75vw;
  }
}

/* SUSTAINABILITY
/* .section-sustainability
------------------------------------------------------------*/
.c-interval-sustainability {
  width: 100%;
  height: 30vh;
  display: block;
  background-color: var(--color-10th-bg);
}

.section-sustainability {
  position: relative;
  z-index: 1;
  background: url('../img/img-h-circle-bottom-gr.svg') center bottom no-repeat;
  background-size: contain;
  padding-bottom: 50vw;
  margin-top: -15%;
}
@media screen and (max-width: 767px) {
  .section-sustainability {
    margin-top: 0;
  }
}
.section-sustainability .c-sticky-illust {
  position: sticky;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  z-index: 0;
  width: 30vw;
  margin: auto;
}
.section-sustainability .c-sticky-illust img {
  width: 100%;
  animation: wobbling_y 0.7s ease-in-out infinite alternate;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .section-sustainability .c-sticky-illust {
    width: 60vw;
    height: 70vw;
    position: static;
  }
  .section-sustainability .c-sticky-illust img {
    animation: none;
  }
}
.section-sustainability .c-sustainability-bg {
  width: 100%;
  height: 140%;
  border-radius: 9999px 9999px 0 0;
  position: absolute;
  left: 0;
  top: -2%;
  background-color: var(--color-green);
  z-index: -1;
}
.section-sustainability .p-section-inner {
  position: relative;
  padding-top: 20vh;
}
@media screen and (max-width: 767px) {
  .section-sustainability .p-section-inner {
    padding-top: 10vh;
  }
}
.section-sustainability .p-section-inner .p-text-block {
  display: block;
  padding: 0 var(--section-margin);
  background: linear-gradient(180deg, transparent 0%, transparent 40%, var(--color-green) 40%, var(--color-green) 100%);
}
@media screen and (max-width: 767px) {
  .section-sustainability .p-section-inner .p-text-block {
    display: block;
    padding-bottom: 3rem !important;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .section-sustainability .p-section-inner .p-text-block {
    padding: 0 var(--section-spMargin);
  }
}
.section-sustainability .p-section-inner .p-text-block .p-text-block-inner {
  max-width: 1280px;
  margin: auto;
}
.section-sustainability .p-section-inner .p-text-block h2.c-section-title {
  text-align: left;
  font-size: 10rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-10th-bg);
  position: relative;
  z-index: 2;
  margin-bottom: 3rem;
}
.section-sustainability .p-section-inner .p-text-block h2.c-section-title span {
  display: block;
  margin: 1.2rem auto 0;
  font-size: 2rem;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .section-sustainability .p-section-inner .p-text-block h2.c-section-title {
    text-align: center;
    width: 100%;
    font-size: 4rem;
    margin-bottom: 3rem;
  }
  .section-sustainability .p-section-inner .p-text-block h2.c-section-title span {
    font-size: 1.8rem;
    line-height: 1.6;
    font-weight: 500;
  }
}
.section-sustainability .p-section-inner .p-text-block .c-text {
  color: var(--color-text-white);
  text-align: center;
  padding-bottom: 6rem;
}
.section-sustainability .p-section-inner .p-text-block .c-text p {
  font-size: 1.8rem;
  margin-bottom: 2rem;
  text-align: left;
  line-height: 2.4;
}
@media screen and (max-width: 767px) {
  .section-sustainability .p-section-inner .p-text-block .c-text p {
    margin-bottom: 0.5rem;
    line-height: 2;
    font-size: 1.5rem;
  }
}
.section-sustainability .p-section-inner .p-text-block .c-text p.date {
  font-size: 1.4rem;
  margin-bottom: 0;
}
.section-sustainability .p-section-inner .p-text-block .c-text p.name {
  font-size: 2.2rem;
  line-height: 1.5;
}
.section-sustainability .p-section-inner .p-text-block .c-text p:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  .section-sustainability .p-section-inner .p-text-block .c-text {
    width: 100%;
    padding-bottom: 1rem;
  }
}
.section-sustainability .p-section-inner .p-sustainability-block {
  padding: 0 var(--section-margin);
  background-color: var(--color-green);
}
@media screen and (max-width: 1024px) {
  .section-sustainability .p-section-inner .p-sustainability-block {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 767px) {
  .section-sustainability .p-section-inner .p-sustainability-block {
    padding: 0;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .section-sustainability .p-section-inner .p-sustainability-block {
    padding: 0 var(--section-spMargin);
  }
}
.section-sustainability .p-section-inner .p-sustainability-block li {
  margin-bottom: 4rem;
}
.section-sustainability .p-section-inner .p-sustainability-block li:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 1024px) {
  .section-sustainability .p-section-inner .p-sustainability-block li {
    width: 48%;
  }
}
@media screen and (max-width: 767px) {
  .section-sustainability .p-section-inner .p-sustainability-block li {
    width: 100%;
  }
}
.section-sustainability .p-section-inner .p-sustainability-block .p-sustainability-item {
  background-color: var(--color-lgreen);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4rem;
  border-radius: 20px 500px 500px 20px;
}
@media screen and (max-width: 1024px) {
  .section-sustainability .p-section-inner .p-sustainability-block .p-sustainability-item {
    padding: 2rem 2rem 2.4rem;
    border-radius: 10px;
    display: block;
  }
}
.section-sustainability .p-section-inner .p-sustainability-block .p-sustainability-item .c-text {
  width: 55%;
  color: var(--color-10th-bg);
  padding-left: 3.4rem;
  padding-right: 7rem;
}
@media screen and (max-width: 1024px) {
  .section-sustainability .p-section-inner .p-sustainability-block .p-sustainability-item .c-text {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}
.section-sustainability .p-section-inner .p-sustainability-block .p-sustainability-item .c-text .c-date {
  font-size: 1.3rem;
  margin-bottom: 0.2rem;
}
.section-sustainability .p-section-inner .p-sustainability-block .p-sustainability-item .c-text h3 {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 2rem;
}
@media screen and (max-width: 1024px) {
  .section-sustainability .p-section-inner .p-sustainability-block .p-sustainability-item .c-text h3 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }
}
.section-sustainability .p-section-inner .p-sustainability-block .p-sustainability-item .c-text p {
  font-size: 1.5rem;
  margin-bottom: 3rem;
  line-height: 2;
}
@media screen and (max-width: 1024px) {
  .section-sustainability .p-section-inner .p-sustainability-block .p-sustainability-item .c-text p {
    text-align: left;
    margin-bottom: 2rem;
    font-size: 1.4rem;
  }
}
.section-sustainability .p-section-inner .p-sustainability-block .p-sustainability-item .c-text .c-button {
  background: var(--color-10th-bg);
  display: inline-block;
  color: var(--color-text-black);
  font-size: 1.5rem;
  padding: 20px 94px 20px 18px;
  border-radius: 10px 60px 60px 10px;
}
.section-sustainability .p-section-inner .p-sustainability-block .p-sustainability-item .c-text .c-button .c-button {
  padding: 14px 94px 14px 18px;
}
@media screen and (max-width: 1024px) {
  .section-sustainability .p-section-inner .p-sustainability-block .p-sustainability-item .c-text {
    width: 100%;
    height: 75%;
  }
}
.section-sustainability .p-section-inner .p-sustainability-block .p-sustainability-item .c-image {
  --thumbnail-size: 45%;
  width: var(--thumbnail-size);
  height: 0;
  padding-top: calc(var(--thumbnail-size) / 16 * 9);
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}
@media screen and (max-width: 1024px) {
  .section-sustainability .p-section-inner .p-sustainability-block .p-sustainability-item .c-image {
    --thumbnail-size: 100%;
    margin-bottom: 1rem;
  }
}
.section-sustainability .p-section-inner .p-sustainability-block .p-sustainability-item .c-image img {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  -o-object-fit: cover;
  object-fit: cover;
}

/* PHOTO
/* .section-photo
------------------------------------------------------------*/
.section-photo {
  margin-top: -20vh;
  margin-bottom: 80vh;
}
.section-photo .slider-automove .swiper-wrapper {
  transition-timing-function: linear;
  pointer-events: none;
  height: auto !important;
}
.section-photo .slider-automove .swiper-wrapper .swiper-slide {
  width: 40vw;
  background: var(--color-lblue);
  padding: 0.9rem;
  overflow: hidden;
  height: auto !important;
  border-radius: 8px;
  margin-right: 8rem;
}
@media screen and (max-width: 767px) {
  .section-photo .slider-automove .swiper-wrapper .swiper-slide {
    width: 80vw;
    padding: 0.5rem;
    margin-right: 3rem;
  }
}
.section-photo .slider-automove .swiper-wrapper .swiper-slide img {
  width: 100%;
  border-radius: 6px;
}
.section-photo.photo-area {
  padding: 0 var(--section-margin);
}
.section-photo .c-photo-left {
  border: 4px solid var(--color-lblue);
  --w-photo-left: 64vw;
  position: relative;
  width: var(--w-photo-left);
  height: 0;
  padding-top: calc(var(--w-photo-left) * 0.65);
  border-radius: 10px;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .section-photo .c-photo-left {
    --w-photo-left: 80vw;
  }
}
.section-photo .c-photo-left img {
  width: 100%;
  height: 100%;
  bottom: 0;
  position: absolute;
  -o-object-fit: cover;
  object-fit: cover;
}
.section-photo .c-photo-right {
  border: 4px solid var(--color-lblue);
  --w-photo-right: 40vw;
  position: relative;
  width: var(--w-photo-right);
  height: 0;
  padding-top: calc(var(--w-photo-right) * 0.65);
  margin-left: auto;
  border-radius: 10px;
  overflow: hidden;
  margin-top: -2%;
}
@media screen and (max-width: 767px) {
  .section-photo .c-photo-right {
    --w-photo-right: 76vw;
  }
}
.section-photo .c-photo-right img {
  width: 100%;
  height: 100%;
  bottom: 0;
  position: absolute;
  -o-object-fit: cover;
  object-fit: cover;
}

/* SHARE
/* .section-share
------------------------------------------------------------*/
.section-share h2.c-section-title {
  text-align: center;
  font-size: 10rem;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 6vw;
  color: var(--color-text-black);
  position: sticky;
  bottom: 0;
}
.section-share h2.c-section-title span {
  display: block;
  margin: 1.2rem auto 0;
  font-size: 2rem;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .section-share h2.c-section-title {
    font-size: 6.5rem;
    margin-bottom: 3rem;
  }
  .section-share h2.c-section-title span {
    font-size: 1.8rem;
    line-height: 1.6;
    font-weight: 500;
  }
}
.section-share .scrub-text-share {
  width: 100%;
  position: relative;
  overflow: hidden;
  height: 26rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  .section-share .scrub-text-share {
    height: 10rem;
  }
}
.section-share .scrub-text-share p {
  color: var(--color-lblue);
  opacity: 0.15;
  position: absolute;
  white-space: nowrap;
  display: flex;
  justify-content: flex-start;
  font-weight: 400;
  font-size: 22rem;
  letter-spacing: -1.5rem;
  will-change: transform;
}
.section-share .scrub-text-share p span {
  line-height: 1;
  display: inline-block;
  padding-right: 10rem;
}
@media screen and (max-width: 767px) {
  .section-share .scrub-text-share p {
    font-size: 10rem;
    letter-spacing: -0.6rem;
  }
}
.section-share .p-sticky-sns {
  position: relative;
}
.section-share .p-sticky-sns .c-sns-item {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 100vh;
}
.section-share .p-sticky-sns .c-sns-item .c-card {
  border-radius: 10px;
  height: 50vh;
  width: 35vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .section-share .p-sticky-sns .c-sns-item .c-card {
    margin: 0 auto 16px;
    height: 60vh;
  }
}
.section-share .p-sticky-sns .c-sns-item .c-card .c-image {
  width: 66%;
  margin: 0 auto;
}
.section-share .p-sticky-sns .c-sns-item .c-card .c-image img {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .section-share .p-sticky-sns .c-sns-item .c-card .c-image {
    margin: 0 auto 10px;
  }
}
.section-share .p-sticky-sns .c-sns-item .c-card.twitter {
  background-color: var(--color-lblue);
  transform: rotate(9deg);
}
.section-share .p-sticky-sns .c-sns-item .c-card.line {
  background-color: var(--color-green);
  transform: rotate(-9deg);
}
.section-share .p-sticky-sns .c-sns-item .c-card.line .c-image {
  margin-bottom: 1rem;
}
.section-share .p-sticky-sns .c-sns-item .c-card.copy {
  background-color: var(--color-red);
}
.section-share .p-sticky-sns .c-sns-item .c-card p {
  text-align: center;
  color: var(--color-text-white);
  font-size: 2.2rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}
.section-share .p-sticky-sns .c-sns-item .c-card i {
  display: block;
  margin: 10px auto;
  width: 46px;
}
.section-share .p-sticky-sns .c-sns-item .twitter i {
  width: 64px;
  height: 64px;
  background-color: #000;
  border-radius: 32px;
  padding: 16px;
}
.section-share .p-sticky-sns .c-sns-item .c-card i img {
  width: 100%;
}
.section-share .p-sticky-sns .c-sns-item:nth-child(1) {
  z-index: 6;
}
.section-share .p-sticky-sns .c-sns-item:nth-child(2) {
  z-index: 5;
}
.section-share .p-sticky-sns .c-sns-item:nth-child(3) {
  z-index: 4;
}
.section-share .p-sticky-sns .c-sns-item:nth-child(4) {
  z-index: 3;
}
.section-share .p-sticky-sns .c-sns-item:nth-child(5) {
  z-index: 2;
}
.section-share .p-sticky-sns .c-sns-item:nth-child(6) {
  z-index: 1;
}

/*
     FILE ARCHIVED ON 13:13:35 Apr 10, 2024 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 11:49:59 Aug 01, 2026.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  capture_cache.get: 2.024
  load_resource: 169.15
  PetaboxLoader3.resolve: 119.712
  PetaboxLoader3.datanode: 42.746
*/
/* =========================================================
   ブログ
   - トップ MY WORDS の記事カード（既存 .p-message-wrap を踏襲）
   - blog/ 配下の記事ページ / 一覧ページ
   配色・書体は style-10th.css のトークンをそのまま使う
   ========================================================= */

/* ---------------------------------------------------------
   記事カード（トップ / 一覧 共通）
   --------------------------------------------------------- */
.c-blog-card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  color: var(--color-text-white);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.c-blog-card:hover {
  opacity: 0.82;
}

.c-blog-meta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 0.8rem;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
}

.c-blog-meta time {
  opacity: 0.9;
}

.c-blog-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.3em 1.1em 0.3em 0.85em;
  border: 1px solid currentColor;
  border-radius: 9999px;
  font-size: 1.2rem;
  line-height: 1.4;
  white-space: nowrap;
}

/* チップ内のカテゴリアイコン */
.c-cat-ico {
  width: 1.5em;
  height: 1.5em;
  flex-shrink: 0;
}

/* カテゴリアーカイブの見出しに置く大きめのアイコン */
.c-cat-title-ico {
  width: 1.3em;
  height: 1.3em;
  vertical-align: -0.28em;
  margin-right: 0.35em;
}

.c-blog-more {
  display: inline-block;
  margin-top: 1.4rem;
  font-size: 1.3rem;
  letter-spacing: 0.14em;
}

.c-blog-more::after {
  content: '';
  display: inline-block;
  width: 2.4em;
  height: 1px;
  margin-left: 0.8em;
  vertical-align: middle;
  background-color: currentColor;
  transition: width 0.3s ease;
}

.c-blog-card:hover .c-blog-more::after {
  width: 3.4em;
}

/* サムネイルは縮ませない（親が flex のため） */
.c-blog-card > .c-image {
  flex-shrink: 0;
}

/* ボタン
   既存の .c-button は .section-10thcontents 配下でしか定義されていないため、
   ブログで使う分だけここでスタイルを与える */
.c-blog-viewall .c-button,
.c-blog-back .c-button,
.c-notfound-actions .c-button {
  display: inline-block;
  padding: 1.6rem 6.4rem 1.6rem 2.4rem;
  border-radius: 10px 60px 60px 10px;
  background: var(--color-blue);
  color: var(--color-text-white);
  font-size: 1.5rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.c-blog-viewall .c-button:hover,
.c-blog-back .c-button:hover,
.c-notfound-actions .c-button:hover {
  opacity: 0.82;
}

/* 一覧の下の「VIEW ALL POSTS」 */
.c-blog-viewall {
  margin-top: 4rem;
  text-align: center;
}

@media screen and (max-width: 1024px) {
  .c-blog-card {
    display: block;
  }

  .c-blog-meta {
    font-size: 1.2rem;
  }
}

/* ---------------------------------------------------------
   記事ページ / 一覧ページの外枠
   --------------------------------------------------------- */
.l-blog-page {
  background-color: var(--color-10th-bg);
}

/* 下層ページのヘッダーもトップと同じ固定ピル＋ハンバーガー（style-10th.css）を使う。
   SP はトップだと FV に重ねるため透明だが、下層は本文が下を通るので面を敷く */
@media screen and (max-width: 767px) {
  .l-blog-page header {
    background: var(--color-10th-bg);
    padding-bottom: 10px;
  }
}

.c-blog-nav {
  color: var(--color-blue);
  font-size: 1.3rem;
  letter-spacing: 0.16em;
  text-decoration: none;
}

.c-blog-nav:hover {
  text-decoration: underline;
}

.l-blog-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 6rem calc(var(--section-margin, 6%) / 2) 8rem;
}

@media screen and (max-width: 767px) {
  .c-blog-nav {
    font-size: 1.2rem;
  }

  .l-blog-main {
    padding-top: 3.5rem;
    padding-bottom: 5rem;
  }
}

/* ---------------------------------------------------------
   記事本文
   --------------------------------------------------------- */
.p-article .c-blog-meta {
  color: var(--color-blue);
  margin-bottom: 1.6rem;
}

.c-article-title {
  font-size: 3.4rem;
  line-height: 1.5;
  font-weight: 700;
  margin-bottom: 3rem;
}

.c-article-title span {
  display: block;
  margin-top: 1rem;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-blue);
  letter-spacing: 0.14em;
}

.c-article-hero {
  margin-bottom: 4rem;
  border-radius: 20px;
  overflow: hidden;
  background-color: var(--color-pblue);
}

.c-article-hero img {
  display: block;
  width: 100%;
  height: auto;
}

.c-article-body p {
  margin-bottom: 2.4rem;
  font-size: 1.6rem;
  line-height: 2.1;
}

.c-article-body p:last-child {
  margin-bottom: 0;
}

.c-article-sign {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-pblue);
  font-size: 1.4rem;
  color: var(--color-blue);
  text-align: right;
}

@media screen and (max-width: 767px) {
  .c-article-title {
    font-size: 2.4rem;
    margin-bottom: 2rem;
  }

  .c-article-hero {
    margin-bottom: 2.6rem;
  }

  .c-article-body p {
    font-size: 1.5rem;
    line-height: 2;
    margin-bottom: 2rem;
  }
}

/* ---------------------------------------------------------
   前後の記事
   --------------------------------------------------------- */
.c-blog-pager {
  display: flex;
  gap: 2rem;
  margin-top: 5rem;
}

.c-blog-pager-item {
  flex: 1 1 0;
  min-width: 0;
  padding: 2rem;
  border-radius: 16px;
  background-color: #fff;
  color: var(--color-text-black);
  font-size: 1.4rem;
  line-height: 1.7;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.c-blog-pager-item span {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 1.2rem;
  color: var(--color-blue);
  letter-spacing: 0.1em;
}

.c-blog-pager-item.is-next {
  text-align: right;
}

a.c-blog-pager-item:hover {
  transform: translateY(-3px);
}

.c-blog-pager-item.is-empty {
  background-color: transparent;
}

.c-blog-back {
  margin-top: 4rem;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .c-blog-pager {
    flex-direction: column;
    gap: 1.2rem;
  }

  .c-blog-pager-item.is-empty {
    display: none;
  }

  .c-blog-pager-item.is-next {
    text-align: left;
  }
}

/* ---------------------------------------------------------
   記事一覧ページ
   --------------------------------------------------------- */
.p-blog-list {
  margin-top: 4rem;
}

.p-blog-list li {
  background-color: var(--color-blue);
  padding: 20px;
  border-radius: 20px 160px 160px 20px;
  margin-bottom: 24px;
}

.p-blog-list li .c-image {
  width: 200px;
  height: 200px;
  border-radius: 10px;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.p-blog-list li .c-image img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.p-blog-list li .c-text {
  width: calc(100% - 200px);
  padding-left: 3rem;
}

.p-blog-list .c-text-02 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 0.8rem;
}

.p-blog-list .c-message-text {
  font-size: 1.4rem;
  line-height: 1.9;
}

@media screen and (max-width: 1024px) {
  .p-blog-list li {
    border-radius: 20px;
    padding: 1.6rem;
  }

  .p-blog-list li .c-image {
    width: 100%;
    height: 0;
    padding-top: 56%;
    border-radius: 14px;
    margin-bottom: 1.4rem;
  }

  .p-blog-list li .c-text {
    width: 100%;
    padding-left: 0;
  }

  .p-blog-list .c-text-02 {
    font-size: 1.8rem;
  }
}

/* =========================================================
   モバイル調整

   トップの記事カードは旧「お祝いメッセージ」用の指定を継いでおり、
   1024px 以下でサムネイルが正方形（padding-top: 100%）になって
   1 枚あたり 600px 超の高さになっていた。ブログ一覧としては重すぎるので、
   横長のサムネイルに変えてカードを圧縮する。
   ========================================================= */
@media screen and (max-width: 1024px) {
  .section-message-thanks .p-message-wrap li {
    border-radius: 20px 20px 40px 40px;
    padding: 1.2rem 1.2rem 2rem;
  }

  .section-message-thanks .p-message-wrap li .c-image {
    height: 0;
    padding-top: 52%;
    border-radius: 14px;
    margin-bottom: 1.4rem;
  }

  .section-message-thanks .p-message-wrap li .c-image img {
    object-position: 50% 42%;
  }

  .section-message-thanks .p-message-wrap li .c-text {
    padding: 0 0.6rem;
  }

  .c-blog-meta {
    margin-bottom: 0.6rem;
  }

  .section-message-thanks .p-message-wrap li .c-text .c-text-02 {
    font-size: 1.6rem;
    line-height: 1.6;
    margin-bottom: 0.6rem;
  }

  .section-message-thanks .p-message-wrap li .c-text .c-message-text {
    font-size: 1.3rem;
    line-height: 1.85;
  }

  .c-blog-more {
    margin-top: 1rem;
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 767px) {
  .section-message-thanks .p-message-wrap li {
    margin-bottom: 1.6rem;
  }

  .c-blog-viewall {
    margin-top: 3rem;
  }

  .c-blog-viewall .c-button,
  .c-blog-back .c-button {
    padding: 1.4rem 4.8rem 1.4rem 2rem;
    font-size: 1.4rem;
  }

  /* 記事ページ側 */
  .l-blog-main {
    padding-left: var(--section-spMargin);
    padding-right: var(--section-spMargin);
  }

  .p-blog-list li .c-image {
    padding-top: 52%;
  }
}

/* =========================================================
   サムネイルをやめた記事カード

   使える画像が UUUM のアートワークしかなかったため、
   カードから画像を外してテキスト主体にした。
   左に色帯を置いて、カードとしての輪郭を保つ。
   ========================================================= */
.section-message-thanks .p-message-wrap li,
.p-blog-list li {
  position: relative;
  overflow: hidden;
}

.section-message-thanks .p-message-wrap li .c-text,
.p-blog-list li .c-text {
  width: 100%;
  padding-left: 0;
}

.c-blog-card {
  display: block;
}

/* 記事ページのリード文（旧ヒーロー画像の位置） */
.c-article-lead {
  margin-bottom: 3.4rem;
  padding: 2rem 2.4rem;
  border-left: 3px solid var(--color-blue);
  background: rgba(255, 255, 255, 0.7);
  font-size: 1.5rem;
  line-height: 1.95;
}

@media screen and (max-width: 767px) {
  .c-article-lead {
    margin-bottom: 2.6rem;
    padding: 1.6rem 1.8rem;
    font-size: 1.45rem;
  }
}

/* PC：画像がなくなり 1 枚 1,194px の細長い帯になってしまうので 2 カラムに */
@media screen and (min-width: 768px) {
  .section-message-thanks .p-message-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem;
    align-items: start;
  }

  .section-message-thanks .p-message-wrap li {
    display: block;
    margin-bottom: 0;
    padding: 3.2rem 3.4rem;
    border-radius: 24px;
  }

  .p-blog-list li {
    padding: 3rem 3.4rem;
    border-radius: 24px;
  }
}

/* =========================================================
   記事内の回遊パーツ（シェア / 著者 / 関連記事）
   ========================================================= */

/* --- シェア --- */
.p-share-inline {
  margin-top: 4.4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--color-pblue);
}

.c-share-label {
  margin-bottom: 1.4rem;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  color: var(--color-blue);
}

.p-share-inline ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
}

.p-share-inline .c-share-btn {
  min-height: 46px;
  padding: 0 2.2rem;
  font-size: 1.35rem;
  font-family: inherit;
}

/* --- 著者ボックス --- */
.p-author {
  display: flex;
  gap: 2.4rem;
  align-items: flex-start;
  margin-top: 3.2rem;
  padding: 2.8rem 3rem;
  border-radius: 20px;
  background: #fff;
}

.c-author-photo {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-pblue);
  position: relative;
}

.c-author-photo img {
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 104%;
  height: auto;
  transform: translateX(-50%);
}

.c-author-role {
  margin-bottom: 0.6rem;
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  color: var(--color-blue);
}

.c-author-name {
  margin-bottom: 1rem;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.3;
}

.c-author-name span {
  margin-left: 0.8rem;
  font-size: 1.15rem;
  font-weight: 500;
  opacity: 0.6;
}

.c-author-text {
  font-size: 1.4rem;
  line-height: 1.9;
}

.c-author-links {
  display: flex;
  gap: 1.6rem;
  margin-top: 1.4rem;
}

.c-author-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--color-blue);
  font-size: 1.35rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --- 関連記事 --- */
.p-related-posts {
  margin-top: 5rem;
  padding-top: 4rem;
  border-top: 1px solid var(--color-pblue);
}

.p-related-posts ul {
  list-style: none;
}

.p-related-posts li + li {
  margin-top: 1rem;
}

.p-related-posts a {
  display: block;
  padding: 1.8rem 2rem;
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.p-related-posts a:hover {
  transform: translateY(-2px);
}

/* カテゴリのタグがアーカイブへのリンクになった分 */
a.c-blog-cat {
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

a.c-blog-cat:hover {
  background: currentColor;
}

.p-article a.c-blog-cat:hover {
  background: var(--color-blue);
  color: #fff;
}

@media screen and (max-width: 767px) {
  .p-author {
    flex-direction: column;
    gap: 1.6rem;
    padding: 2.4rem 2rem;
    border-radius: 18px;
  }

  .c-author-photo {
    width: 80px;
    height: 80px;
  }

  .p-share-inline ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .p-share-inline li:last-child {
    grid-column: 1 / -1;
  }

  .p-share-inline .c-share-btn {
    width: 100%;
  }
}

/* =========================================================
   本文に差し込む画像・動画

   画像には width / height を必ず付けているので、
   読み込み中もこの比率ぶんの場所が確保され、レイアウトがずれない。
   ========================================================= */
.c-figure {
  margin: 3.4rem 0;
}

.c-figure img,
.c-figure video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: var(--color-pblue);
}

.c-figure-caption {
  margin-top: 1.2rem;
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--color-blue);
  text-align: center;
}

/* 動画は背景を敷いて、読み込み前でも枠が分かるように */
.c-figure.is-video video {
  background: #0d2530;
}

/* YouTube 等の埋め込み。16:9 を保つ */
.c-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #0d2530;
}

.c-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media screen and (max-width: 767px) {
  .c-figure {
    margin: 2.6rem 0;
  }

  .c-figure img,
  .c-figure video,
  .c-embed {
    border-radius: 12px;
  }

  .c-figure-caption {
    margin-top: 0.9rem;
    font-size: 1.2rem;
    text-align: left;
  }
}

/* =========================================================
   MY ROOTS — iPhone モックのスワイプ年表

   9 つの章を 3 つの時代（CHAPTER 01-03）に束ね、
   時代ごとにアクセントカラーを切り替える。
   色は style-10th.css のトークンをそのまま使用。
   ========================================================= */

.section-roots {
  --accent: var(--color-blue);
  --accent-soft: rgba(0, 149, 211, 0.14);
  position: relative;
  /* 前セクションの青い面がここまで伸びてくるので、自前の背景で切る。
     本文が青地に半分かかって読めなくなるのを防ぐ */
  z-index: 2;
  background: var(--color-10th-bg);
  overflow: hidden;
  padding: 9rem 0 11rem;
}

.section-roots[data-era='1'] {
  --accent: #4faa9c;
  --accent-soft: rgba(119, 193, 179, 0.2);
}

.section-roots[data-era='2'] {
  --accent: #ef6a4b;
  --accent-soft: rgba(247, 126, 98, 0.18);
}

/* 背面の淡いグロー。時代が変わると色が移る */
.c-roots-bg {
  position: absolute;
  left: 50%;
  top: 12%;
  width: 130vw;
  max-width: 1600px;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, var(--accent-soft) 0%, rgba(240, 251, 255, 0) 62%);
  transition: background 0.9s ease;
  pointer-events: none;
  z-index: 0;
}

.section-roots .c-section-title {
  position: relative;
  z-index: 2;
}

.p-roots {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.6rem, 3vw, 4rem);
  max-width: 1320px;
  margin: 5rem auto 0;
  padding: 0 clamp(2rem, 4vw, 5rem);
}

/* ---------------------------------------------------------
   年表レール
   --------------------------------------------------------- */
.p-roots-rail {
  flex-shrink: 0;
}

.p-roots-rail ol {
  display: flex;
  flex-direction: column;
  list-style: none;
}

.c-roots-rail-head {
  margin: 2.4rem 0 0.8rem;
  padding-left: 3.4rem;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--color-text-black);
  opacity: 0.72;
}

.p-roots-rail li:first-child .c-roots-rail-head,
.c-roots-rail-head:first-child {
  margin-top: 0;
}

.c-roots-rail-head span {
  display: block;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  opacity: 0.55;
}

.c-roots-rail-head[data-era='0'] {
  color: var(--color-blue);
}

.c-roots-rail-head[data-era='1'] {
  color: #4faa9c;
}

.c-roots-rail-head[data-era='2'] {
  color: #ef6a4b;
}

.c-roots-rail-item {
  position: relative;
  display: block;
  width: 100%;
  padding: 0.75rem 0 0.75rem 3.4rem;
  border: 0;
  background: transparent;
  color: var(--color-text-black);
  font-family: inherit;
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  text-align: left;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.35s ease, color 0.35s ease, transform 0.35s ease;
}

/* 縦のガイド線 */
.c-roots-rail-item::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0;
  width: 1px;
  height: 100%;
  background: currentColor;
  opacity: 0.3;
}

.c-roots-rail-item::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: var(--color-10th-bg);
  transform: translateY(-50%);
  transition: background-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.c-roots-rail-item:hover {
  opacity: 0.72;
}

.c-roots-rail-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.c-roots-rail-item.is-past {
  opacity: 0.6;
}

.c-roots-rail-item.is-past::after {
  background: currentColor;
}

.c-roots-rail-item.is-current {
  opacity: 1;
  color: var(--accent);
  font-weight: 700;
  transform: translateX(3px);
}

.c-roots-rail-item.is-current::after {
  background: var(--accent);
  transform: translateY(-50%) scale(1.25);
  box-shadow: 0 0 0 5px var(--accent-soft);
}

/* ---------------------------------------------------------
   ステージ（端末＋操作パーツ）
   --------------------------------------------------------- */
.p-roots-stage {
  position: relative;
  flex-shrink: 0;
}

/* 背後に浮かぶ巨大な年号 */
.c-roots-ghost {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 150%;
  height: 1em;
  transform: translate(-50%, -50%);
  font-size: clamp(11rem, 17vw, 20rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--accent);
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.c-roots-ghost-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(0.14em);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.c-roots-ghost-item.is-current {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------
   端末
   --------------------------------------------------------- */
.c-roots-tilt {
  position: relative;
  z-index: 1;
  perspective: 1400px;
}

.c-iphone {
  position: relative;
  width: clamp(266px, 29vw, 318px);
  aspect-ratio: 9 / 19.3;
  padding: 10px;
  border-radius: 52px;
  transform-style: preserve-3d;
  /* チタンフレームの明暗。左右の縁だけ明るくして金属の張りを出す */
  background:
    linear-gradient(100deg,
      #8d949c 0%, #4c5158 4%, #2a2e33 12%,
      #1c1f23 50%,
      #2a2e33 88%, #545a61 96%, #9aa1a9 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 40px 70px -26px rgba(17, 53, 68, 0.6),
    0 14px 28px -14px rgba(17, 53, 68, 0.36),
    0 2px 4px rgba(17, 53, 68, 0.2);
}

/* フレーム上下のアンテナ帯 */
.c-iphone-rail {
  position: absolute;
  inset: 0;
  border-radius: 52px;
  pointer-events: none;
}

.c-iphone-rail::before,
.c-iphone-rail::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.16);
}

.c-iphone-rail::before {
  top: 15%;
}

.c-iphone-rail::after {
  bottom: 15%;
}

.c-iphone-btn {
  position: absolute;
  border-radius: 2px;
  background: linear-gradient(180deg, #6c737b, #3a4046 30%, #2b3036 70%, #5a6068);
}

.c-iphone-btn.is-mute {
  left: -2px;
  top: 15.5%;
  width: 3px;
  height: 24px;
}

.c-iphone-btn.is-vol-up {
  left: -2px;
  top: 22%;
  width: 3px;
  height: 44px;
}

.c-iphone-btn.is-vol-down {
  left: -2px;
  top: 30.5%;
  width: 3px;
  height: 44px;
}

.c-iphone-btn.is-power {
  right: -2px;
  top: 26%;
  width: 3px;
  height: 70px;
}

.c-iphone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 43px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5) inset;
}

/* Dynamic Island（右端にカメラ） */
.c-iphone-island {
  position: absolute;
  left: 50%;
  top: 10px;
  width: 86px;
  height: 25px;
  border-radius: 999px;
  background: #0a0c0e;
  transform: translateX(-50%);
  z-index: 6;
}

.c-iphone-island i {
  position: absolute;
  right: 7px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2f3d4a 0%, #10161c 55%, #05080b 100%);
  transform: translateY(-50%);
}

/* ステータスバー */
.c-iphone-status {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  padding: 0 22px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-text-black);
}

.c-iphone-icons {
  display: flex;
  align-items: center;
  gap: 5px;
}

.c-iphone-icons i {
  display: block;
  background: var(--color-text-black);
}

.c-iphone-icons .is-signal {
  width: 16px;
  height: 10px;
  -webkit-clip-path: polygon(0 68%, 3px 68%, 3px 100%, 0 100%, 4.5px 100%, 4.5px 46%, 7.5px 46%, 7.5px 100%, 9px 100%, 9px 24%, 12px 24%, 12px 100%, 13px 100%, 13px 0, 16px 0, 16px 100%, 0 100%);
  clip-path: polygon(0 68%, 3px 68%, 3px 100%, 0 100%, 4.5px 100%, 4.5px 46%, 7.5px 46%, 7.5px 100%, 9px 100%, 9px 24%, 12px 24%, 12px 100%, 13px 100%, 13px 0, 16px 0, 16px 100%, 0 100%);
}

.c-iphone-icons .is-wifi {
  width: 14px;
  height: 10px;
  -webkit-mask:
    radial-gradient(circle at 50% 100%, #000 2.4px, transparent 2.5px),
    radial-gradient(circle at 50% 100%, transparent 4.6px, #000 4.7px 6.2px, transparent 6.3px),
    radial-gradient(circle at 50% 100%, transparent 8.4px, #000 8.5px 10px, transparent 10.1px);
  mask:
    radial-gradient(circle at 50% 100%, #000 2.4px, transparent 2.5px),
    radial-gradient(circle at 50% 100%, transparent 4.6px, #000 4.7px 6.2px, transparent 6.3px),
    radial-gradient(circle at 50% 100%, transparent 8.4px, #000 8.5px 10px, transparent 10.1px);
}

.c-iphone-icons .is-battery {
  position: relative;
  width: 23px;
  height: 11px;
  border-radius: 3.5px;
  background: transparent;
  border: 1px solid currentColor;
  color: var(--color-text-black);
  opacity: 0.9;
}

.c-iphone-icons .is-battery::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  right: 5px;
  border-radius: 1.5px;
  background: var(--color-text-black);
}

.c-iphone-icons .is-battery::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 50%;
  width: 2px;
  height: 4px;
  border-radius: 0 2px 2px 0;
  background: currentColor;
  transform: translateY(-50%);
}

/* アプリバー＋ストーリー風のセグメント */
.c-iphone-appbar {
  flex-shrink: 0;
  padding: 0.4rem 20px 1.2rem;
}

.c-iphone-appname {
  margin-bottom: 0.9rem;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent);
  transition: color 0.5s ease;
}

.c-iphone-segs {
  display: flex;
  gap: 3px;
}

.c-iphone-seg {
  flex: 1 1 0;
  height: 3px;
  border-radius: 999px;
  background: rgba(17, 53, 68, 0.14);
  transition: background-color 0.4s ease, transform 0.4s ease;
}

.c-iphone-seg.is-past {
  background: rgba(17, 53, 68, 0.34);
}

.c-iphone-seg.is-current {
  background: var(--accent);
  transform: scaleY(1.6);
}

/* 画面のガラス反射。傾きに追従して動く */
.c-iphone-glare {
  position: absolute;
  inset: -20%;
  background: linear-gradient(112deg,
    rgba(255, 255, 255, 0) 34%,
    rgba(255, 255, 255, 0.5) 46%,
    rgba(255, 255, 255, 0.16) 52%,
    rgba(255, 255, 255, 0) 62%);
  opacity: 0.5;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 5;
  will-change: transform;
}

.c-iphone-home {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 106px;
  height: 5px;
  border-radius: 999px;
  background: rgba(17, 53, 68, 0.24);
  transform: translateX(-50%);
  z-index: 6;
}

/* ---------------------------------------------------------
   画面の中身
   --------------------------------------------------------- */
.js-roots-swiper {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  margin: 0;
  overflow: hidden;
  cursor: grab;
}

.js-roots-swiper:active {
  cursor: grabbing;
}

.js-roots-swiper .swiper-wrapper {
  height: 100%;
}

/* EffectCreative 用（swiper/css/effect-creative 相当。CDN 不使用のため自前で持つ） */
.swiper-creative .swiper-slide {
  overflow: hidden;
  backface-visibility: hidden;
  transition-property: transform, opacity, height;
}

.c-roots-slide {
  height: 100%;
  box-sizing: border-box;
  background: linear-gradient(178deg, #ffffff 0%, #ffffff 42%, var(--color-10th-bg) 100%);
}

.c-roots-slide-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2.6rem 22px 4.6rem;
  scrollbar-width: none;
}

/* ページ番号は画面の下端へ */
.c-roots-slide-inner .c-roots-page {
  margin-top: auto;
}

.c-roots-slide-inner::-webkit-scrollbar {
  display: none;
}

.c-roots-chapter {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
  transition: color 0.5s ease;
}

.c-roots-chapter span {
  padding-left: 0.7rem;
  border-left: 1px solid currentColor;
  font-weight: 500;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.c-roots-year {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 1.8rem;
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--color-text-black);
}

.c-roots-age {
  padding: 0.3em 0.9em;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: background-color 0.5s ease;
}

.c-roots-title {
  position: relative;
  margin-bottom: 1.7rem;
  padding-bottom: 1.7rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.65;
}

.c-roots-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 2px;
  background: var(--accent);
  transition: background-color 0.5s ease;
}

.c-roots-text {
  font-size: 1.35rem;
  line-height: 2;
  letter-spacing: 0.03em;
}

.c-roots-page {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 2.4rem;
  color: var(--accent);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: color 0.5s ease;
}

.c-roots-page span {
  font-size: 1.1rem;
  font-weight: 500;
  opacity: 0.55;
}

/* ---------------------------------------------------------
   操作パーツ
   --------------------------------------------------------- */
.c-roots-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
  margin-top: 3.4rem;
}

.c-roots-arrow {
  position: relative;
  width: 54px;
  height: 54px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.5s ease, opacity 0.3s ease, transform 0.3s ease;
}

.c-roots-arrow::before {
  content: '';
  position: absolute;
  left: 53%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: border-color 0.3s ease;
}

.c-roots-arrow.is-next::before {
  left: 47%;
  transform: translate(-50%, -50%) rotate(-135deg);
}

.c-roots-arrow:hover:not(.swiper-button-disabled) {
  background: var(--accent);
  transform: scale(1.06);
}

.c-roots-arrow:hover:not(.swiper-button-disabled)::before {
  border-color: #fff;
}

.c-roots-arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.c-roots-arrow.swiper-button-disabled {
  opacity: 0.25;
  cursor: default;
}

.c-roots-counter {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 5.8em;
  justify-content: center;
  color: var(--accent);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  transition: color 0.5s ease;
}

.c-roots-counter i {
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  opacity: 0.5;
}

.c-roots-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.8rem;
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  text-align: center;
  opacity: 0.55;
}

/* 左右に揺れる指のヒント */
.c-roots-hint span {
  width: 22px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
  position: relative;
  flex-shrink: 0;
}

.c-roots-hint span::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
  animation: rootsHint 2.4s ease-in-out infinite;
}

@keyframes rootsHint {
  0%, 100% { transform: translate(0, -50%); }
  50% { transform: translate(12px, -50%); }
}

.c-roots-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------
   タブレット以下：レールを横並びにして上へ
   --------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .section-roots {
    padding: 8rem 0 10rem;
  }

  .p-roots {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 3rem;
    margin-top: 4rem;
  }

  .p-roots-read {
    width: 100%;
  }

  .p-roots-rail {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .p-roots-rail::-webkit-scrollbar {
    display: none;
  }

  .p-roots-rail ol {
    flex-direction: row;
    align-items: flex-end;
    width: max-content;
    margin: 0 auto;
    padding: 0 1.4rem;
  }

  .c-roots-rail-head {
    margin: 0 0.6rem 0 1.6rem;
    padding: 0 0 0.2rem;
    font-size: 1.15rem;
    text-align: center;
    white-space: nowrap;
  }

  .c-roots-rail-head span {
    font-size: 0.95rem;
  }

  .c-roots-rail-item {
    width: auto;
    padding: 2.4rem 1.3rem 0;
    font-size: 1.35rem;
    text-align: center;
    white-space: nowrap;
  }

  .c-roots-rail-item.is-current {
    transform: none;
  }

  .c-roots-rail-item::before {
    left: 0;
    top: 0.6rem;
    width: 100%;
    height: 1px;
  }

  .c-roots-rail-item::after {
    left: 50%;
    top: 0.6rem;
    width: 11px;
    height: 11px;
    transform: translate(-50%, -50%);
  }

  .c-roots-rail-item.is-current::after {
    transform: translate(-50%, -50%) scale(1.25);
  }

  .c-roots-ghost {
    font-size: clamp(9rem, 26vw, 15rem);
    opacity: 0.1;
  }
}

@media screen and (max-width: 767px) {
  /* 端末が画面の 7 割を占めると、スワイプしてから本文まで遠すぎる。
     端末＋操作パーツで 1 画面の 2/3 に収め、本文が視界に入るようにする */
  .c-iphone {
    width: min(56vw, 224px);
  }

  .c-roots-slide-inner {
    padding: 1.8rem 16px 3.4rem;
  }

  .c-roots-chapter {
    font-size: 0.95rem;
    margin-bottom: 1rem;
  }

  .c-roots-year {
    font-size: 2.6rem;
    margin-bottom: 1.2rem;
  }

  .c-roots-title {
    font-size: 1.5rem;
    margin-bottom: 1.2rem;
    padding-bottom: 1.2rem;
  }

  .c-iphone-appbar {
    padding: 0.3rem 16px 0.9rem;
  }

  .c-iphone-status {
    height: 40px;
    padding: 0 16px;
    font-size: 1rem;
  }

  .c-roots-control {
    gap: 1.6rem;
    margin-top: 2.8rem;
  }

  .c-roots-arrow {
    width: 48px;
    height: 48px;
  }

  .c-roots-hint {
    font-size: 1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-roots-hint span::after {
    animation: none;
  }

  .c-roots-ghost-item {
    transition: opacity 0.2s ease;
    transform: none;
  }
}

/* =========================================================
   モバイル調整
   ========================================================= */
@media screen and (max-width: 1024px) {
  /* 端末と操作パーツを確実に中央へ（stage の幅は操作列で決まるため） */
  .p-roots-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .c-roots-ghost {
    top: 42%;
  }
}

@media screen and (max-width: 767px) {
  .section-roots {
    padding: 7rem 0 8rem;
  }

  .p-roots {
    margin-top: 3.4rem;
    padding: 0 var(--section-spMargin);
  }

  /* 端末は縦に長いので、狭い画面では高さを抑えて 1 画面に収める */
  .c-roots-slide-inner {
    padding: 0.4rem 16px 3.6rem;
  }

  .c-roots-year {
    font-size: 2.5rem;
    margin-bottom: 1.2rem;
  }

  .c-roots-title {
    font-size: 1.6rem;
    margin-bottom: 1.4rem;
    padding-bottom: 1.4rem;
  }

  .c-roots-text {
    font-size: 1.3rem;
    line-height: 1.9;
  }

  .c-roots-hint {
    max-width: 26rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
  }
}

/* =========================================================
   本文（端末の外）

   もとは幅 260px の画面の中に 13.5px で押し込んでいて、
   1 行 18 文字しか入らず読み物として成立していなかった。
   端末は「いま何章のどこか」を示す目次に徹し、
   本文は横の余白に、ふつうの記事と同じ大きさで置く。
   ========================================================= */
.p-roots-read {
  position: relative;
  z-index: 2;
  min-height: 32rem;
  padding-left: clamp(1.6rem, 2.5vw, 3.4rem);
  border-left: 1px solid var(--color-pblue);
}

.c-read {
  display: none;
}

.c-read.is-current {
  display: block;
  animation: readIn 0.5s ease both;
}

@keyframes readIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.c-read-chapter {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.6rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
  transition: color 0.5s ease;
}

.c-read-chapter span {
  padding-left: 0.8rem;
  border-left: 1px solid currentColor;
  font-weight: 500;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.c-read-year {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.4rem;
  font-size: clamp(3rem, 3.6vw, 4.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-black);
}

.c-read-age {
  padding: 0.35em 1em;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: background-color 0.5s ease;
}

.c-read-title {
  position: relative;
  margin-bottom: 2.2rem;
  padding-bottom: 1.8rem;
  font-size: clamp(1.9rem, 2.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.6;
}

.c-read-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 2px;
  background: var(--accent);
  transition: background-color 0.5s ease;
}

.c-read-text {
  font-size: 1.6rem;
  line-height: 2.1;
  letter-spacing: 0.02em;
}

@media screen and (max-width: 1024px) {
  .p-roots-read {
    width: 100%;
    min-height: 0;
    padding-left: 0;
    padding-top: 3rem;
    border-left: 0;
    border-top: 1px solid var(--color-pblue);
  }
}

@media screen and (max-width: 767px) {
  .p-roots-read {
    padding-top: 2.6rem;
  }

  .c-read-title {
    margin-bottom: 1.8rem;
    padding-bottom: 1.6rem;
  }

  .c-read-text {
    font-size: 1.55rem;
    line-height: 2;
  }
}

/* =========================================================
   MY BELIEFS / MY VISION / PROFILE / SHARE
   旧 10TH CONTENTS・SUSTAINABILITY・街イラスト・写真セクションを
   置き換えた、個人サイト用のセクション群。
   ========================================================= */

/* 横スクロールの保険。
   装飾テキストや背景円は各所で意図的にはみ出しており、
   スクロール演出の途中で横方向のスクロールが発生することがある。
   overflow-x: clip なら（hidden と違い）スクロールコンテナを作らないので、
   内部の position: sticky や lenis のスクロールを壊さずに刈り取れる */
.l-glink-container {
  overflow-x: clip;
}

/* ---------------------------------------------------------
   FV のキャッチコピー

   イラストの上、青いドーム（top: 20vh）より上の明るい面に置く。
   1 文字ずつ span に分けてあり、ローディング解除後に順に立ち上がる。
   --------------------------------------------------------- */
.c-mv-copy {
  position: relative;
  z-index: 2;
  margin-bottom: min(2%, 1.4vh);
  text-align: center;
}

.c-mv-copy-main {
  /* 文字がせり上がる分をここで刈り取る（マスク代わり）。
     上下に余白を足して同じ分だけ相殺し、行間は変えない */
  overflow: hidden;
  padding: 0.14em 0;
  margin: -0.14em 0;
  font-size: clamp(3.2rem, 5vw, 6.8rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: var(--color-text-black);
}

/* JS が動かない環境でもそのまま読める初期値にしておき、
   演出の開始位置は GSAP 側の fromTo で与える */
.c-mv-copy-main span {
  display: inline-block;
  opacity: 1;
}

.c-mv-copy-main .is-accent {
  color: var(--color-blue);
}

.c-mv-copy-sub {
  margin-top: 1.3rem;
  font-size: 1.4rem;
  letter-spacing: 0.14em;
  color: var(--color-text-black);
  opacity: 0.72;
}

.c-mv-copy-sub i {
  margin: 0 0.2em;
  font-style: normal;
  opacity: 0.5;
}

@media screen and (max-width: 767px) {
  .c-mv-copy {
    margin-bottom: 2.2vh;
  }

  .c-mv-copy-main {
    font-size: clamp(2.8rem, 9vw, 4.4rem);
    letter-spacing: 0.02em;
  }

  .c-mv-copy-sub {
    margin-top: 1.2rem;
    font-size: 1.15rem;
    letter-spacing: 0.1em;
  }
}

/* ---------------------------------------------------------
   「このサイトをつくった理由」の人物写真

   背景を抜いた切り抜き画像なので、ピル型の枠いっぱいに
   cover で敷かず、下端を合わせて contain で置く。
   枠には淡い白のグラデーションを入れて、面として成立させる。
   --------------------------------------------------------- */
.section-message[data-sticky-name='01'] .p-greeting-wrap .c-image-inner {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.06) 100%);
}

.section-message[data-sticky-name='01'] .p-greeting-wrap .c-image-inner img {
  left: 50%;
  top: auto;
  bottom: 0;
  width: 86%;
  height: auto;
  max-height: 90%;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: 50% 100%;
}

/* ---------------------------------------------------------
   セクション見出し

   既存 CSS の .c-section-title は .section-history / .section-10thcontents /
   .section-sustainability など「旧セクション名にスコープされた指定」しか
   持っておらず、置き換えた新セクションでは素の h2 のまま出ていた。
   ここで共通の実体を与える（旧スコープ指定のほうが詳細度が高いので、
   MY WORDS・SHARE など既存側の見た目は変わらない）。
   --------------------------------------------------------- */
.c-section-title {
  text-align: center;
  font-size: clamp(4.4rem, 9vw, 10rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
}

.c-section-title .title-ja {
  display: block;
  margin: 1.6rem auto 0;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

/* SHARE の見出しは旧レイアウト用に position: sticky が入っているので戻す */
.p-share h2.c-section-title {
  position: static;
  margin-bottom: 0;
}

/* 明るい面に置く見出し（section-vision 用） */
.c-section-title.is-light,
.c-section-title.is-light span {
  color: var(--color-text-white);
}

/* ---------------------------------------------------------
   MY BELIEFS
   --------------------------------------------------------- */
.section-beliefs {
  padding: 12rem 0 13rem;
}

.p-beliefs {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--section-margin);
}

.p-beliefs-lead {
  margin: 5rem auto 6rem;
  font-size: 1.8rem;
  line-height: 2.2;
  text-align: center;
}

.p-beliefs-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
  list-style: none;
}

.c-belief {
  position: relative;
  display: flex;
  gap: 2rem;
  padding: 3.4rem 3rem;
  border-radius: 20px 70px 70px 20px;
  background: #fff;
  box-shadow: 0 18px 40px -30px rgba(17, 53, 68, 0.55);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.c-belief:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -30px rgba(17, 53, 68, 0.6);
}

.c-belief-no {
  flex-shrink: 0;
  width: 3.4rem;
  color: var(--color-blue);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.c-belief-no::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 1.2rem;
  background: var(--color-blue);
  opacity: 0.35;
}

.c-belief-tag {
  display: inline-block;
  margin-bottom: 1.2rem;
  padding: 0.35em 1.1em;
  border: 1px solid var(--color-blue);
  border-radius: 999px;
  color: var(--color-blue);
  font-size: 1.2rem;
  letter-spacing: 0.06em;
}

.c-belief-title {
  margin-bottom: 1.4rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.65;
}

.c-belief-text {
  font-size: 1.45rem;
  line-height: 2.05;
}

@media screen and (max-width: 1024px) {
  .section-beliefs {
    padding: 8rem 0 9rem;
  }

  .p-beliefs-list {
    grid-template-columns: 1fr;
  }

  .p-beliefs-lead {
    margin: 3.5rem auto 4rem;
    font-size: 1.6rem;
    line-height: 2;
  }
}

@media screen and (max-width: 767px) {
  .p-beliefs {
    padding: 0 var(--section-spMargin);
  }

  .c-belief {
    flex-direction: column;
    gap: 1.6rem;
    padding: 2.6rem 2.2rem;
    border-radius: 16px 40px 40px 16px;
  }

  .c-belief-no {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    width: auto;
    font-size: 2.2rem;
  }

  .c-belief-no::after {
    width: 40px;
    margin-top: 0;
  }

  .c-belief-title {
    font-size: 1.8rem;
  }

  .c-belief-text {
    font-size: 1.4rem;
    line-height: 1.95;
  }
}

/* ---------------------------------------------------------
   MY VISION
   --------------------------------------------------------- */
.section-vision {
  padding: 0 var(--section-margin);
}

.p-vision {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 10rem clamp(2.4rem, 6vw, 8rem) 11rem;
  border-radius: 60px;
  background: linear-gradient(160deg, var(--color-lblue) 0%, var(--color-blue) 62%, #0079ac 100%);
  color: var(--color-text-white);
  overflow: hidden;
}

/* 右上に沈む大きな円 */
.p-vision::after {
  content: '';
  position: absolute;
  right: -12%;
  top: -28%;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.p-vision > * {
  position: relative;
  z-index: 1;
}

.c-vision-quote {
  margin: 5rem 0 6rem;
  padding-left: clamp(2rem, 4vw, 4rem);
  border-left: 3px solid var(--color-red);
}

.c-vision-quote p {
  font-size: clamp(2.2rem, 3vw, 3.4rem);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.02em;
}

/* PC は見出しと引用を横に並べ、導入部の縦の消費を圧縮する */
@media screen and (min-width: 768px) {
  .p-vision {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: clamp(3rem, 5vw, 6rem);
    align-items: center;
    padding-top: 7rem;
    padding-bottom: 8rem;
  }

  .p-vision > .c-section-title {
    grid-column: 1;
    text-align: left;
    font-size: clamp(4.4rem, 6.4vw, 7.2rem);
  }

  .p-vision > .c-section-title .title-ja {
    margin: 1.4rem 0 0;
  }

  .p-vision > .c-vision-quote {
    grid-column: 2;
    margin: 0;
  }

  .p-vision > .c-vision-quote p {
    font-size: clamp(2rem, 2.4vw, 2.7rem);
    line-height: 1.9;
  }

  .p-vision > .c-vision-figures,
  .p-vision > .c-vision-text,
  .p-vision > .c-more {
    grid-column: 1 / -1;
  }

  .p-vision > .c-vision-figures {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
}

/* 数字は青地に白の半透明パネルだと沈むので、FV のクリーム地に
   濃紺の数字を置いてコントラストを取る。目標チップはコーラル */
.c-vision-figures {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 5vw, 6rem);
  margin-bottom: 6rem;
  padding: 3.4rem clamp(2rem, 4vw, 4rem);
  border-radius: 12px 48px 48px 12px;
  background: #fdf8ee;
  color: var(--color-text-black);
}

.c-figure {
  flex: 1 1 200px;
}

/* 2 つの数字の間に手書き風の区切り */
.c-figure + .c-figure {
  border-left: 1px dashed rgba(17, 53, 68, 0.22);
  padding-left: clamp(2rem, 4vw, 4.5rem);
}

.c-figure-label {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.3em 1.1em;
  border-radius: 999px;
  background: var(--color-red);
  color: #fff;
  font-size: 1.1rem;
  letter-spacing: 0.14em;
}

.c-figure-num {
  font-size: clamp(4rem, 6vw, 6.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-text-black);
}

.c-figure-num span {
  margin-left: 0.2em;
  font-size: 0.32em;
  font-weight: 700;
  color: var(--color-blue);
}

.c-figure-note {
  margin-top: 0.8rem;
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  color: rgba(17, 53, 68, 0.62);
}

.c-vision-text p {
  margin-bottom: 2.2rem;
  font-size: 1.6rem;
  line-height: 2.15;
}

.c-vision-text p:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 767px) {
  .section-vision {
    padding: 0 var(--section-spMargin);
  }

  .p-vision {
    padding: 6rem 2.2rem 6.5rem;
    border-radius: 32px;
  }

  .c-vision-quote {
    margin: 2.6rem 0 3.2rem;
  }

  .c-vision-quote p {
    font-size: 1.9rem;
    line-height: 1.85;
  }

  .c-vision-figures {
    gap: 1.6rem;
    margin-bottom: 4rem;
    padding: 2.2rem 1.8rem;
  }

  /* 目標の数字 2 つは SP でも横に並べる（縦積みだと間延びする） */
  .c-figure {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
  }

  .c-figure + .c-figure {
    padding-left: 1.6rem;
  }

  .c-figure-label {
    margin-bottom: 0.7rem;
    font-size: 1.1rem;
  }

  .c-figure-num {
    font-size: clamp(2.9rem, 8.6vw, 4rem);
  }

  .c-figure-note {
    margin-top: 0.5rem;
  }

  .c-vision-text p {
    font-size: 1.5rem;
    line-height: 2;
    margin-bottom: 1.8rem;
  }
}

/* ---------------------------------------------------------
   PROFILE
   --------------------------------------------------------- */
.section-profile {
  padding: 13rem 0 12rem;
}

.p-profile {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
  max-width: 1120px;
  margin: 6rem auto 0;
  padding: 0 var(--section-margin);
}

.p-profile-card {
  padding: 4rem clamp(2.4rem, 3vw, 3.6rem);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 40px -32px rgba(17, 53, 68, 0.5);
}

.c-card-title {
  margin-bottom: 2.6rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--color-pblue);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.c-def-row {
  display: flex;
  gap: 1.6rem;
  padding: 1.4rem 0;
  border-bottom: 1px dashed rgba(17, 53, 68, 0.16);
}

.c-def-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.c-def-row dt {
  flex-shrink: 0;
  width: 7.5em;
  color: var(--color-blue);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 0.06em;
}

.c-def-row dd {
  font-size: 1.45rem;
  line-height: 1.9;
}

.c-profile-sign {
  width: 150px;
  margin: 3.4rem 0 0 auto;
}

.c-profile-sign img {
  width: 100%;
  height: auto;
}

/* ネット上の情報について */
.p-facts {
  max-width: 1120px;
  margin: 2.4rem auto 0;
  padding: 0 var(--section-margin);
}

.p-facts-inner {
  padding: 4.4rem clamp(2.4rem, 4vw, 5rem);
  border-radius: 24px;
  border: 1px solid var(--color-pblue);
  background: rgba(255, 255, 255, 0.6);
}

.c-facts-label {
  display: inline-block;
  margin-bottom: 1.4rem;
  padding: 0.4em 1.2em;
  border-radius: 999px;
  background: var(--color-blue);
  color: var(--color-text-white);
  font-size: 1.2rem;
  letter-spacing: 0.1em;
}

.c-facts-title {
  margin-bottom: 2rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
}

.c-facts-text,
.c-facts-note {
  font-size: 1.45rem;
  line-height: 2.05;
}

.c-facts-list {
  margin: 2.4rem 0;
  padding: 2.4rem 2.6rem;
  border-radius: 16px;
  background: var(--color-10th-bg);
  list-style: none;
}

.c-facts-list li {
  position: relative;
  padding-left: 2.8rem;
  font-size: 1.45rem;
  line-height: 1.9;
}

.c-facts-list li + li {
  margin-top: 1.2rem;
}

/* チェックマーク */
.c-facts-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.55em;
  width: 12px;
  height: 6px;
  border-left: 2px solid var(--color-blue);
  border-bottom: 2px solid var(--color-blue);
  transform: rotate(-45deg);
}

.c-facts-note {
  margin-top: 2.4rem;
  opacity: 0.85;
}

.c-facts-link {
  margin-top: 2.4rem;
}

.c-facts-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--color-blue);
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.c-facts-link a::after {
  content: '';
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

@media screen and (max-width: 1024px) {
  .section-profile {
    padding: 9rem 0 8rem;
  }

  .p-profile {
    grid-template-columns: 1fr;
    margin-top: 4rem;
  }
}

@media screen and (max-width: 767px) {
  .p-profile,
  .p-facts {
    padding: 0 var(--section-spMargin);
  }

  .p-profile-card {
    padding: 3rem 2.2rem;
  }

  .c-card-title {
    font-size: 2rem;
  }

  /* 縦積みにすると 10 項目で画面何枚ぶんにも伸びるので、
     SP でもラベルと値を横並びのまま詰める */
  .c-def-row {
    gap: 1.2rem;
    padding: 1.1rem 0;
  }

  .c-def-row dt {
    width: 5.5em;
    line-height: 1.85;
  }

  .c-def-row dd {
    flex: 1;
    min-width: 0;
  }

  .p-facts-inner {
    padding: 3.2rem 2.2rem;
  }

  .c-facts-list {
    padding: 2rem 1.8rem;
  }
}

/* ---------------------------------------------------------
   SHARE
   --------------------------------------------------------- */
.section-share {
  padding: 0 0 10rem;
}

.p-share {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--section-margin);
  text-align: center;
}

.p-share-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: 5rem;
  list-style: none;
}

.c-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.6rem 3rem;
  border: 1px solid var(--color-blue);
  border-radius: 999px;
  background: transparent;
  color: var(--color-blue);
  font-size: 1.45rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.c-share-btn i {
  display: block;
  width: 18px;
  line-height: 0;
}

.c-share-btn i img {
  width: 100%;
  height: auto;
  transition: filter 0.3s ease;
}

.c-share-btn p {
  margin: 0;
}

.c-share-btn:hover,
.c-share-btn.is-active {
  background: var(--color-blue);
  color: var(--color-text-white);
}

.c-share-btn:hover i img,
.c-share-btn.is-active i img {
  filter: brightness(0) invert(1);
}

@media screen and (max-width: 767px) {
  .section-share {
    padding-bottom: 6rem;
  }

  .p-share {
    padding: 0 var(--section-spMargin);
  }

  .p-share-list {
    flex-direction: column;
    margin-top: 3.5rem;
  }

  .c-share-btn {
    justify-content: center;
    width: 100%;
  }
}

/* ---------------------------------------------------------
   ナビ 6 項目目（SP のメニュー背景）
   --------------------------------------------------------- */
@media screen and (max-width: 767px) {
  header ul {
    justify-content: flex-start;
    padding-top: 12vh;
    padding-bottom: 6vh;
    overflow-y: auto;
  }

  header ul .c-menu-item {
    padding: 3.6vh 26px 3.6vh 16px;
  }
}

/* =========================================================
   モバイル調整
   ========================================================= */
@media screen and (max-width: 767px) {
  /* --- WHO I AM の下端：署名のあと 25vh(=211px) が空くので詰める --- */
  .section-message[data-sticky-name='01'] {
    padding-bottom: 9vh;
  }

  /* --- FV：イラストを画面幅いっぱいまで使う --- */
  .l-mainVisual-inner {
    width: 100%;
    max-width: none;
  }

  /* --- WHO I AM：UUUM 由来の装飾イラストが本文と重なるので出さない --- */
  .section-message[data-sticky-name='01'] .p-sticky-illust01,
  .section-message[data-sticky-name='01'] .p-sticky-illust02 {
    display: none;
  }

  /* --- セクション間の余白を詰める --- */
  .section-beliefs {
    padding: 7rem 0 7.5rem;
  }

  .section-profile {
    padding: 7.5rem 0 7rem;
  }

  .section-share {
    padding-bottom: 7rem;
  }

  .p-beliefs-lead {
    margin: 3rem auto 3.4rem;
    text-align: left;
  }

  .p-profile {
    margin-top: 3.4rem;
  }

  .p-share-list {
    margin-top: 3rem;
  }
}

/* =========================================================
   ロゴ（テキスト組み）

   画像ロゴ（UUUM のもの）をやめて、サイトの書体で組んだ
   ワードマークに置き換えた。h1 が実テキストになるので
   読み上げと検索の両面でも素直になる。
   ========================================================= */
.c-logo {
  width: auto;
  line-height: 1;
}

.c-logo a,
a.c-logo {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.c-logo a:hover,
a.c-logo:hover {
  opacity: 0.7;
}

.c-logo-main {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.07em;
  color: var(--color-text-black);
  white-space: nowrap;
}

.c-logo-sub {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.2em;
  color: var(--color-blue);
  white-space: nowrap;
}

/* style-10th.css の `header h1 { width: 64px }` と
   SP の `width: 50px` を打ち消す */
header h1.c-logo {
  width: auto;
}

@media screen and (max-width: 767px) {
  header h1.c-logo {
    width: auto;
    position: relative;
    z-index: 1;
  }

  .c-logo-main {
    font-size: 1.9rem;
    letter-spacing: 0.05em;
  }

  .c-logo-sub {
    font-size: 0.9rem;
    letter-spacing: 0.16em;
  }
}

/* メニューを開いている間はロゴを白背景の上に置くため色を保つ */
.l-blog-page .c-logo-main {
  color: var(--color-text-black);
}

/* ヘッダーナビの見た目（全幅ハンバーガーのオーバーレイ）は
   style-10th.css に一元化した */

/* =========================================================
   個別ページへの導線（トップの各セクション末尾）
   ========================================================= */
.c-more {
  margin-top: 5rem;
  text-align: center;
}

.c-more-link {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  min-height: 56px;
  padding: 0 3.2rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--color-blue);
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.c-more-link i {
  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.c-more-link:hover {
  background: var(--color-blue);
  color: var(--color-text-white);
}

.c-more-link:hover i {
  transform: rotate(45deg) translate(2px, -2px);
}

/* 次セクションのドーム背景（.c-sectionMessage-bg はパララックスで
   最大 1000px せり上がる・z-index:0）が「もっと読む」に覆い被さって
   ボタンが埋もれるため、前面のレイヤーに出す（bg-after の z:1 より上） */
.section-message .c-more {
  position: relative;
  z-index: 2;
}

/* 青地のセクション（MY VISION / WHO I AM）では白抜きに */
.section-message .c-more-link,
.p-vision .c-more-link {
  color: var(--color-text-white);
}

.section-message .c-more-link:hover,
.p-vision .c-more-link:hover {
  background: var(--color-text-white);
  color: var(--color-blue);
}

/* ナビが span から a になったので、リンクの既定スタイルを打ち消す */
a.c-menu-item {
  color: inherit;
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  .c-more {
    margin-top: 3.2rem;
  }

  .c-more-link {
    min-height: 52px;
    padding: 0 2.4rem;
    font-size: 1.4rem;
  }
}

/* FV のコピーが h1 になったので、内側の span をブロックに戻す */
.c-mv-copy-title {
  display: block;
  font-weight: inherit;
}

.c-mv-copy-title .c-mv-copy-main,
.c-mv-copy-title .c-mv-copy-sub {
  display: block;
}

/* =========================================================
   文字の太さ

   Zen Kaku Gothic New は 400 / 500 / 700 の 3 ウェイトしか無い。
   長い本文を 700 にすると読みづらくなるので 500 のままにして、
   細く見えやすい「小さい文字」と「見出し・ラベル系」を 700 に上げる。
   ========================================================= */

/* リード文・導入文 */
.c-page-lead,
.c-article-lead,
.p-beliefs-lead,
.c-vision-quote p,
.c-page-quote p {
  font-weight: 700;
}

/* 小さい文字（11〜13px 帯）はここが一番細く見える */
.c-blog-meta,
.c-blog-cat,
.c-blog-more,
.c-breadcrumb,
.c-mv-copy-sub,
.c-figure-label,
.c-figure-note,
.c-roots-hint,
.c-roots-chapter,
.c-belief-tag,
.c-facts-label,
.c-mini-meta,
.c-related-en,
.c-logo-sub,
.c-loading-sub,
.c-subnav a i,
.c-blog-pager-item span,
.c-iphone-appname,
.c-iphone-status {
  font-weight: 700;
}

/* 見出しの日本語サブタイトル・ナビ・ボタン類 */
.c-section-title .title-ja,
.c-subnav a span,
.c-menu-item span,
.c-more-link,
.c-share-btn,
.c-blog-viewall .c-button,
.c-blog-back .c-button,
.c-roots-rail-item,
.c-roots-counter,
.c-article-sign,
.c-profile-sign,
.p-latest .c-mini-title,
.c-page-link a,
.c-facts-link a {
  font-weight: 700;
}

/* 英字の大見出しは Readex Pro（ローカルは 400 まで）なので 400 で止める */
.c-section-title,
.c-mv-copy-main,
.section-message[data-sticky-name='01'] .p-message-text h2 {
  font-weight: 400;
}

/* FV を <picture> でくるんだので、高さの受け渡しを繋ぐ */
.c-mv-base picture {
  display: block;
}

@media screen and (min-width: 768px) {
  .l-mainVisual > .l-mainVisual-inner .c-mv-base picture {
    height: 100%;
  }
}

/* フッターのサイト内リンク（クロールと回遊の下支え） */
footer {
  flex-direction: column;
  gap: 2rem;
  height: auto;
  padding-top: 6rem;
  padding-bottom: 4rem;
}

.c-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.4rem;
  max-width: 900px;
  padding: 0 var(--section-margin);
}

.c-footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--color-blue);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.c-footer-nav a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media screen and (max-width: 767px) {
  footer {
    padding-top: 4rem;
    padding-bottom: 3rem;
  }

  .c-footer-nav {
    gap: 0.4rem 1.8rem;
    padding: 0 var(--sp-gutter, 20px);
  }
}

/* =========================================================
   WHO I AM 両脇のスポットイラスト
   （UUUM 10th の構図に合わせて左右に配置。テキストと重なる幅では出さない）
   ========================================================= */
.section-message[data-sticky-name='01'] .c-side-illust {
  position: absolute;
  width: 21vw;
  max-width: 420px;
  pointer-events: none;
  animation: wobbling_y 0.9s ease-in-out infinite alternate;
}

.section-message[data-sticky-name='01'] .c-side-illust img {
  width: 100%;
  height: auto;
}

.section-message[data-sticky-name='01'] .c-side-illust-left {
  left: 2%;
  top: 41%;
  transform: translateY(-50%);
}

.section-message[data-sticky-name='01'] .c-side-illust-right {
  right: 2%;
  top: 21%;
  transform: translateY(-50%);
}

@media screen and (max-width: 1280px) {
  .section-message[data-sticky-name='01'] .c-side-illust {
    display: none;
  }
}

/* =========================================================
   下部セクションのスポットイラスト（WHO I AM と同じ生成画風）
   ========================================================= */

/* MY VISION：カード右下、「再生」を表す水やり。
   overflow: hidden のカード角にわずかに沈めて収める */
.p-vision .c-vision-illust {
  position: absolute;
  right: clamp(2rem, 4vw, 6rem);
  bottom: 6.5rem;
  width: min(23%, 270px);
  z-index: 0;
  pointer-events: none;
  animation: wobbling_y 1s ease-in-out infinite alternate;
}

.p-vision .c-vision-illust img {
  width: 100%;
  height: auto;
}

/* 本文がイラストの下に潜らないよう、表示中は右に逃がす */
@media screen and (min-width: 1025px) {
  .c-vision-text p {
    padding-right: 27%;
  }
}

@media screen and (max-width: 1024px) {
  .p-vision .c-vision-illust {
    display: none;
  }
}

/* SHARE：メガホンがボタン列を向くよう左側に置く */
.section-share {
  position: relative;
}

.section-share .c-share-illust {
  position: absolute;
  left: 4%;
  bottom: 4rem;
  width: min(16vw, 240px);
  pointer-events: none;
  animation: wobbling_y 0.9s ease-in-out infinite alternate;
}

.section-share .c-share-illust img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 1280px) {
  .section-share .c-share-illust {
    display: none;
  }
}

/* =========================================================
   ローディングの切り替え幕
   オーバーレイのふわっとしたフェードをやめ、黒い幕が
   下から覆う → 上へ抜ける、で本体を見せる（js: loading.ts）
   ========================================================= */
.js-loading-wipe {
  position: fixed;
  inset: 0;
  z-index: 1112;
  background: #0e1116;
  transform: translateY(101%);
  pointer-events: none;
}

/* =========================================================
   個別ページ（/about/ /roots/ /beliefs/ /vision/ /profile/）
   ブログ記事ページと同じ枠組みの上で、読み物としての体裁を整える。
   ========================================================= */

/* ---------------------------------------------------------
   下層ページのヘッダー
   ナビは全ページ共通のハンバーガー（style-10th.css）に統一した。
   ヘッダーが fixed になったぶん、本文の開始位置を下げる
   --------------------------------------------------------- */
.l-blog-page {
  padding-top: 104px;
}

@media screen and (max-width: 767px) {
  .l-blog-page {
    padding-top: 60px;
  }
}

/* ---------------------------------------------------------
   404 ページ
   --------------------------------------------------------- */
.p-notfound {
  text-align: center;
  padding-top: 2rem;
}

.c-notfound-img {
  width: min(46vw, 260px);
  height: auto;
  margin: 0 auto 2.4rem;
}

.p-notfound .c-page-title {
  margin-bottom: 1.6rem;
}

.c-notfound-text {
  font-size: 1.5rem;
  line-height: 2;
  margin-bottom: 3.2rem;
}

.c-notfound-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2rem;
}

/* ---------------------------------------------------------
   パンくず
   --------------------------------------------------------- */
.c-breadcrumb {
  max-width: 900px;
  margin: 2.4rem auto 0;
  padding: 0 calc(var(--section-margin, 6%) / 2);
}

.c-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  list-style: none;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}

.c-breadcrumb li + li::before {
  content: '›';
  margin-right: 0.6rem;
  opacity: 0.5;
}

.c-breadcrumb a {
  color: var(--color-blue);
  text-decoration: none;
}

.c-breadcrumb a:hover {
  text-decoration: underline;
}

.c-breadcrumb li[aria-current] {
  opacity: 0.6;
}

/* ---------------------------------------------------------
   本文
   --------------------------------------------------------- */
.c-page-title {
  font-size: clamp(2.6rem, 4.4vw, 4rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
  margin-bottom: 2.4rem;
}

/* ---------------------------------------------------------
   ページ冒頭：見出し＋リード文の横に FV と同じ世界観の
   スポットイラストを置く。無いページは従来どおり全幅
   --------------------------------------------------------- */
.c-page-head.has-spot {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}

.c-page-head.has-spot .c-page-head-text {
  flex: 1;
  min-width: 0;
}

/* リード文の下余白は head の外側で持つ（イラストとの天地センターを保つ） */
.c-page-head.has-spot .c-page-lead {
  margin-bottom: 0;
}

.c-page-head.has-spot {
  margin-bottom: 4.4rem;
}

.c-page-spot {
  width: clamp(150px, 21vw, 220px);
  height: auto;
  flex-shrink: 0;
}

@media screen and (max-width: 767px) {
  .c-page-head.has-spot {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-bottom: 3.2rem;
  }

  .c-page-spot {
    width: 150px;
    margin: 2.4rem auto 0;
  }
}

.c-page-lead {
  margin-bottom: 4.4rem;
  padding: 2.2rem 2.6rem;
  border-left: 3px solid var(--color-blue);
  border-radius: 0 12px 12px 0;
  background: rgba(255, 255, 255, 0.72);
  font-size: 1.55rem;
  line-height: 2;
}

/* 全幅の罫線は資料っぽく見えるので、短いツートーンの下線に。
   青＋コーラルはキャッチコピー「可能性に革命を。」の配色 */
.c-page-h2 {
  margin: 5rem 0 2.2rem;
  padding-bottom: 1.5rem;
  position: relative;
  font-size: clamp(2rem, 2.8vw, 2.6rem);
  font-weight: 700;
  line-height: 1.5;
}

.c-page-h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 4.6rem;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--color-blue) 0 68%, var(--color-red) 68% 100%);
}

.c-page-h2:first-child {
  margin-top: 0;
}

.c-page-body p {
  margin-bottom: 2.4rem;
  font-size: 1.6rem;
  line-height: 2.1;
}

.c-page-quote {
  margin: 3rem 0;
  padding: 2.4rem 2.8rem;
  border-radius: 16px;
  background: var(--color-blue);
  color: var(--color-text-white);
}

.c-page-quote p {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.85;
}

.c-page-note {
  margin: 3rem 0;
  padding: 1.8rem 2.2rem;
  border: 1px dashed var(--color-blue);
  border-radius: 12px;
  font-size: 1.45rem !important;
  line-height: 1.9 !important;
  color: var(--color-blue);
}

.c-page-list {
  margin: 0 0 3rem;
  padding: 2.4rem 2.8rem;
  border-radius: 16px;
  background: #fff;
  list-style: none;
}

.c-page-list li {
  position: relative;
  padding-left: 2.8rem;
  font-size: 1.55rem;
  line-height: 1.9;
}

.c-page-list li + li {
  margin-top: 1.2rem;
}

.c-page-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.6em;
  width: 12px;
  height: 6px;
  border-left: 2px solid var(--color-blue);
  border-bottom: 2px solid var(--color-blue);
  transform: rotate(-45deg);
}

.c-page-table {
  width: 100%;
  margin: 0 0 3rem;
  border-collapse: collapse;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}

.c-page-table th,
.c-page-table td {
  padding: 1.6rem 2rem;
  border-bottom: 1px solid var(--color-pblue);
  font-size: 1.5rem;
  line-height: 1.85;
  text-align: left;
  vertical-align: top;
}

.c-page-table tr:last-child th,
.c-page-table tr:last-child td {
  border-bottom: 0;
}

.c-page-table th {
  width: 11em;
  color: var(--color-blue);
  font-weight: 700;
  white-space: nowrap;
}

.c-page-link {
  margin-bottom: 3rem;
}

.c-page-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--color-blue);
  font-size: 1.45rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.c-page-link a::after {
  content: '';
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* ---------------------------------------------------------
   最新記事 / 関連ページ
   --------------------------------------------------------- */
.p-latest,
.p-related {
  margin-top: 6rem;
  padding-top: 4rem;
  border-top: 1px solid var(--color-pblue);
}

.c-related-title {
  margin-bottom: 2.4rem;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.p-latest ul {
  list-style: none;
}

.p-latest li + li {
  margin-top: 1rem;
}

.p-latest a {
  display: block;
  padding: 1.8rem 2rem;
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.p-latest a:hover {
  transform: translateY(-2px);
}

.c-mini-meta {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  color: var(--color-blue);
}

.c-mini-title {
  display: block;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-text-black);
}

.p-related ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  list-style: none;
}

/* ベタ塗りの箱色ではなく、FV のピルと同じ「左が平らで右が丸い」形。
   青ベタ 6 連は既製テンプレの顔になるので、白地＋差し色に寄せる */
.p-related a {
  display: block;
  padding: 1.8rem 2.4rem;
  border-radius: 8px 60px 60px 8px;
  border-left: 3px solid var(--color-blue);
  background: rgba(255, 255, 255, 0.85);
  text-align: left;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.p-related a:hover {
  background: #def3fb;
  transform: translateX(4px);
}

.c-related-en {
  display: block;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  color: var(--color-red);
}

.c-related-ja {
  display: block;
  margin-top: 0.4rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-black);
}

/* ---------------------------------------------------------
   モバイル
   --------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .c-breadcrumb {
    margin-top: 1.6rem;
    padding-left: var(--sp-gutter, 20px);
    padding-right: var(--sp-gutter, 20px);
    font-size: 1.15rem;
  }

  .c-page-lead {
    margin-bottom: 3.2rem;
    padding: 1.8rem 1.8rem;
    font-size: 1.5rem;
    line-height: 1.95;
  }

  .c-page-h2 {
    margin: 3.6rem 0 1.8rem;
    padding-bottom: 1.2rem;
  }

  .c-page-body p {
    font-size: 1.5rem;
    line-height: 1.95;
    margin-bottom: 2rem;
  }

  .c-page-quote {
    padding: 2rem;
    border-radius: 14px;
  }

  .c-page-quote p {
    font-size: 1.6rem;
    line-height: 1.75;
  }

  .c-page-list,
  .c-page-table {
    border-radius: 14px;
  }

  .c-page-list {
    padding: 2rem 1.8rem;
  }

  .c-page-list li {
    font-size: 1.5rem;
  }

  /* 表は縦積みにして横スクロールを出さない */
  .c-page-table,
  .c-page-table tbody,
  .c-page-table tr,
  .c-page-table th,
  .c-page-table td {
    display: block;
    width: auto;
  }

  .c-page-table tr {
    padding: 1.6rem 1.8rem;
    border-bottom: 1px solid var(--color-pblue);
  }

  .c-page-table tr:last-child {
    border-bottom: 0;
  }

  .c-page-table th,
  .c-page-table td {
    padding: 0;
    border-bottom: 0;
  }

  .c-page-table th {
    margin-bottom: 0.4rem;
    font-size: 1.25rem;
    white-space: normal;
  }

  .p-latest,
  .p-related {
    margin-top: 4rem;
    padding-top: 3rem;
  }

  .p-related ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------------------------------------------------------
   よくある質問（/faq/）
   --------------------------------------------------------- */
.c-faq-item {
  margin-bottom: 1.2rem;
  /* 均一の角丸は既製品っぽいので、サイト共通の「左が平ら」の形に */
  border-radius: 6px 28px 28px 6px;
  border-left: 3px solid var(--color-pblue);
  background: #fff;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.c-faq-item[open] {
  border-left-color: var(--color-blue);
}

.c-faq-item summary {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  padding: 2.2rem 2.6rem;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
  list-style: none;
}

.c-faq-item summary::-webkit-details-marker {
  display: none;
}

.c-faq-item summary::before {
  content: 'Q';
  flex-shrink: 0;
  color: var(--color-blue);
  font-size: 1.9rem;
  line-height: 1.5;
}

.c-faq-item summary::after {
  content: '';
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin: 0.6em 0 0 auto;
  border-right: 2px solid var(--color-blue);
  border-bottom: 2px solid var(--color-blue);
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.c-faq-item[open] summary::after {
  transform: rotate(-135deg);
}

.c-faq-a {
  display: flex;
  gap: 1.4rem;
  padding: 0 2.6rem 2.4rem;
}

.c-faq-a::before {
  content: 'A';
  flex-shrink: 0;
  color: var(--color-green);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.7;
}

.c-faq-a > div,
.c-faq-a p {
  font-size: 1.55rem;
  line-height: 2;
}

.c-faq-a .c-page-link {
  margin: 1.4rem 0 0;
}

@media screen and (max-width: 767px) {
  .c-faq-item summary {
    padding: 1.8rem 1.8rem;
    gap: 1rem;
    font-size: 1.6rem;
  }

  .c-faq-a {
    padding: 0 1.8rem 2rem;
    gap: 1rem;
  }

  .c-faq-a p {
    font-size: 1.5rem;
    line-height: 1.95;
  }
}

/* =========================================================
   モバイル設計

   PC 由来の指定がそのまま残っていて、スマホでは
   ・左右の余白が 8px しかなく文字が画面端に張り付く
   ・セクションごとに余白量がバラバラ
   ・本文 14px・行間もまちまち
   ・タップ領域が 44px を切るものがある
   という状態だったので、ここで一度モバイル基準に揃える。

   このファイルは最後に読み込むこと。
   ========================================================= */

:root {
  /* 余白の段階（8 の倍数） */
  --sp-gutter: 20px;   /* 画面左右 */
  --sp-gap-s: 1.2rem;
  --sp-gap-m: 2rem;
  --sp-gap-l: 3.2rem;
  --sp-section: 8rem;  /* セクションの上下 */
  --sp-radius: 18px;   /* カードの角丸 */
}

@media screen and (max-width: 767px) {
  body {
    /* 旧 8px。左右の余白はこの変数を見ている箇所が多いので、ここで一括して広げる */
    --section-spMargin: var(--sp-gutter);
    --section-margin: var(--sp-gutter);
  }

  /* -------------------------------------------------------
     1. 左右の余白を全セクションで揃える
     ------------------------------------------------------- */
  .p-beliefs,
  .p-profile,
  .p-facts,
  .p-share,
  .p-roots,
  .section-vision,
  .section-message-thanks .p-message-wrap,
  .l-blog-main {
    padding-left: var(--sp-gutter);
    padding-right: var(--sp-gutter);
  }

  .p-message-text,
  .section-message[data-sticky-name='01'] .p-greeting-wrap {
    padding-left: var(--sp-gutter);
    padding-right: var(--sp-gutter);
  }

  /* -------------------------------------------------------
     2. セクションの縦リズムを揃える
     ------------------------------------------------------- */
  .section-beliefs,
  .section-profile,
  .section-roots {
    padding-top: var(--sp-section);
    padding-bottom: var(--sp-section);
  }

  .section-share {
    padding-top: 0;
    padding-bottom: var(--sp-section);
  }

  .c-section-title {
    font-size: 4.4rem;
  }

  .c-section-title .title-ja {
    margin-top: 1.2rem;
    font-size: 1.4rem;
  }

  /* -------------------------------------------------------
     3. 本文の読みやすさ（15px / 行間 1.9 に統一）
     ------------------------------------------------------- */
  .c-belief-text,
  .c-facts-text,
  .c-facts-note,
  .c-facts-list li,
  .c-def-row dd,
  .c-vision-text p,
  .p-beliefs-lead,
  .section-message[data-sticky-name='01'] .p-greeting-wrap .c-message p {
    font-size: 1.5rem;
    line-height: 1.9;
  }

  .section-message[data-sticky-name='01'] .p-message-text p {
    font-size: 1.5rem;
    line-height: 1.95;
  }

  /* 見出し・カードタイトル */
  .c-belief-title,
  .c-card-title,
  .c-facts-title,
  .section-message-thanks .p-message-wrap li .c-text .c-text-02 {
    font-size: 1.8rem;
    line-height: 1.55;
  }

  /* 補助テキスト */
  .c-blog-meta,
  .c-def-row dt,
  .c-figure-note,
  .c-roots-hint {
    font-size: 1.25rem;
  }

  .c-mv-copy-sub {
    font-size: 1.25rem;
  }

  /* -------------------------------------------------------
     4. カードの形をひとつに（角丸・余白・影）
     ------------------------------------------------------- */
  .c-belief,
  .p-profile-card,
  .p-facts-inner,
  .section-message-thanks .p-message-wrap li,
  .p-blog-list li {
    border-radius: var(--sp-radius);
    padding: 2.4rem 2rem;
    margin-bottom: var(--sp-gap-s);
  }

  .p-beliefs-list {
    gap: var(--sp-gap-s);
  }

  .p-profile {
    gap: var(--sp-gap-s);
  }

  .p-facts {
    margin-top: var(--sp-gap-s);
  }

  .p-vision {
    border-radius: var(--sp-radius);
    padding: 5.6rem var(--sp-gap-m) 6rem;
  }

  .c-vision-figures {
    border-radius: var(--sp-radius);
  }

  /* -------------------------------------------------------
     5. タップ領域を 44px 以上に
     ------------------------------------------------------- */
  .c-roots-arrow {
    width: 52px;
    height: 52px;
  }

  .c-roots-rail-item {
    min-height: 48px;
    padding-top: 2.6rem;
  }

  .c-share-btn,
  .c-blog-viewall .c-button,
  .c-blog-back .c-button {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .c-blog-viewall .c-button,
  .c-blog-back .c-button {
    padding: 0 2.4rem;
    border-radius: 999px;
  }

  .c-facts-link a,
  .c-blog-more {
    min-height: 44px;
    align-items: center;
  }

  /* 6 項目目だけ nth-child の指定がなく背景が抜けていた。
     もともと項目ごとに違う画像を敷いていた名残なので、全項目を同じ面に揃える */
  header ul .c-menu-item {
    min-height: 56px;
    display: flex;
    align-items: center;
    background: #def3fb;
    border-radius: 0 12rem 12rem 0;
  }

  /* ハンバーガーは 36px しかなく指で押しづらい */
  header button.js-menu-trigger {
    width: 44px;
    height: 44px;
  }

  /* 年表レールは端まで流したいので ol 側で余白を持つ */
  .p-roots-rail ol {
    padding-left: var(--sp-gutter);
    padding-right: var(--sp-gutter);
  }

  /* -------------------------------------------------------
     6. 装飾の整理
     ------------------------------------------------------- */
  /* 背景の流れる大きな文字は SP では邪魔になるので薄く・低く */
  .section-message[data-sticky-name='01'] .scrub-text {
    height: 12rem;
    opacity: 0.5;
  }

  /* will-change は「これから動く」という GPU への予約。
     SP ではこの文字を動かさない（scrubText.ts）ので、予約したままだと
     画面数枚ぶんの幅のテクスチャを確保し続けるだけになる。 */
  .section-message[data-sticky-name='01'] .scrub-text p,
  .scrub-text-10thcontent p,
  .scrub-text-share p {
    will-change: auto;
  }

  /* 端末のガラスの反射。
     傾きはポインタのある環境だけの演出（roots.ts の hover:hover 判定）なので
     SP では一切動かないが、mix-blend-mode が付いているだけで
     iPhone モック全体が毎フレーム合成し直される。SP では外す。 */
  .c-iphone-glare {
    mix-blend-mode: normal;
    will-change: auto;
    opacity: 0.28;
  }

  /* 傾きに使う 3D 空間も、SP では作らない。
     ページ送りの奥行きは Swiper 自身が .swiper-3d に perspective:1200px を
     付けて作っているので、こちらを外しても動きは変わらない。
     3D コンテキストがあると中の要素がすべて 3D 合成の経路に乗るため、
     使わないなら無いほうがよい。 */
  .c-roots-tilt {
    perspective: none;
  }

  .c-iphone {
    transform-style: flat;
  }

  /* -------------------------------------------------------
     8. スクロール連動する大きな面をレイヤーに固定する

     この 2 つは 390x2000 前後の単色ドーム（角丸 9999px）で、
     スクロール量に合わせて位置が変わり続ける。
     scrub は「アニメーション」ではなく連続したスタイル変更なので、
     ブラウザが自動でレイヤーに逃がしてくれるとは限らず、
     そうならなかった場合はこの大きな丸いマスクを毎フレーム塗り直すことになる。

     will-change で先にレイヤーを取っておくと、1 回描いたものを
     動かすだけになる。上で外している will-change とは逆の判断だが、
     あちらは「動かないのに予約している」、こちらは「実際に動く」ので付ける。
     ------------------------------------------------------- */
  .c-mainV-bg,
  .c-sectionMessage-bg {
    will-change: transform;
  }

  /* 記事一覧の左右余白は上で付けているので二重にしない */
  .section-message-thanks .p-content {
    padding-left: 0;
    padding-right: 0;
  }

  /* -------------------------------------------------------
     7. 読み進めやすさ

     Playwright で計測したところ、フレームレート（中央値 6.9ms）も
     フリック後の惰性（966ms）も問題がなかった。
     読みづらさの原因は速度ではなく組版のほうだったので、ここで直す。
     ------------------------------------------------------- */

  /* WHO I AM の本文が中央揃えだった。
     PC は <br class="pc-only"> で改行位置を決め打ちしているので中央でも整うが、
     SP はその br が消えて自然改行になるため、行頭が毎行ずれて
     次の行の入り口を目で探すことになる。日本語の長文では左揃え一択。 */
  .section-message[data-sticky-name='01'] .p-message-text p {
    text-align: left;
  }

  /* body の letter-spacing: 0.1em は見出し向けの値。
     15px の本文に効くと 1 行 18 文字まで減って視線が何度も折り返す。
     本文だけ 0.04em に締めて、1 行 22〜23 文字にする。 */
  .section-message[data-sticky-name='01'] .p-message-text p,
  .p-greeting-wrap .c-message p,
  .c-belief-text,
  .c-vision-text p,
  .c-facts-text,
  .c-facts-note,
  .c-def-row dd,
  .p-beliefs-lead,
  .c-blog-card .c-text .c-message-text {
    letter-spacing: 0.04em;
  }

  /* 記事の抜粋だけ 13px と、本文より 2px 小さかった。
     一覧は「読むかどうか」を決める場所なので、本文と同じ大きさにする。 */
  .p-blog-list .c-blog-card .c-text .c-message-text,
  .section-message-thanks .p-message-wrap li .c-text .c-message-text {
    font-size: 1.5rem;
    line-height: 1.9;
  }

  /* 経歴の本文だけ 15.5px / 行送り 2.0 で、他（15px / 1.9）と揃っていなかった */
  .c-read-text {
    font-size: 1.5rem;
    line-height: 1.9;
  }

  /* セクションの間隔は 93 / 80 / 160 / 80 / 80 / 80 で、
     roots → beliefs だけ上下の余白が重なって倍の 160px 空いていた。
     ここで話が途切れて見えるので、他と同じ 80px に揃える。
     （section-message の下の 9vh は sticky 演出の助走なので触らない） */
  .section-roots {
    padding-bottom: 0;
  }
}

/* -------------------------------------------------------
   ローディング（全幅共通・画像をやめてテキストに）
   ------------------------------------------------------- */
.js-loading .p-loading {
  gap: 1.6rem;
}

.c-loading-name {
  font-size: clamp(3.6rem, 11vw, 7rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--color-blue);
}

.c-loading-sub {
  font-size: clamp(1.3rem, 3.4vw, 1.6rem);
  letter-spacing: 0.18em;
  color: var(--color-text-black);
  opacity: 0.6;
}