/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */ @layer theme{:root,:host{--spacing:.25rem;--default-font-family:var(--font-geist-sans);--default-mono-font-family:var(--font-geist-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.relative{position:relative}.start{inset-inline-start:var(--spacing)}.table{display:table}.resize{resize:both}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}:root{--background:#fff;--foreground:#111820;--muted:#667085;--line:#11182021;--panel:#fff;--soft:#f4f7fa;--blue:#087fce;--red:#e13d45}*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--background)}body{background:var(--background);color:var(--foreground);margin:0;font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}.site-shell{min-height:100vh;overflow-x:clip}.global-header{z-index:20;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffe6;border-bottom:1px solid #11182017;grid-template-columns:minmax(12rem,1fr) auto minmax(8rem,1fr);align-items:center;gap:2rem;width:100%;padding:1rem clamp(1rem,3vw,3rem);display:grid;position:fixed;top:0;left:0}.brand{white-space:nowrap;align-items:baseline;gap:.4rem;width:max-content;font-size:.78rem;font-weight:800;display:flex}.brand strong{color:var(--blue);font-size:1.8rem;line-height:1}.desktop-nav{color:#111820ad;align-items:center;gap:clamp(1rem,3vw,2.5rem);font-size:.82rem;display:flex}.desktop-nav a,.header-cta,.hero-actions a,.recruit-content a,.contact-box a{transition:color .18s,border-color .18s,background .18s,transform .18s}.desktop-nav a:hover{color:var(--blue)}.header-cta{border:1px solid #11182047;justify-self:end;padding:.72rem 1rem;font-size:.8rem}.header-cta:hover{border-color:var(--blue);background:#087fce14}.hero{isolation:isolate;align-items:center;min-height:92vh;padding:7.5rem clamp(1rem,6vw,6rem) 6rem;display:grid;position:relative}.hero-image,.recruit-image{z-index:-3;background-image:url(../img/hero-team.jpg);background-position:50%;background-size:cover;position:absolute;inset:0}.hero-overlay{z-index:-2;background:linear-gradient(90deg,#fffffffc 0%,#fffffff0 42%,#ffffff47 74%,#ffffff7a 100%),linear-gradient(#ffffff14 48%,#fff 100%);position:absolute;inset:0}.hero:after,.recruit:after{z-index:-1;content:"";background:linear-gradient(#0000,#fff);height:34%;position:absolute;inset:auto 0 0}.hero-content{max-width:58rem}.eyebrow,.section-kicker,.section-label{color:var(--blue);text-transform:uppercase;margin:0 0 1rem;font-size:.78rem;font-weight:800}.hero h1{max-width:11ch;margin:0;font-size:6.6rem;font-weight:900;line-height:.98}.hero h1 span{display:block}.hero-copy{color:#111820c7;max-width:37rem;margin:1.6rem 0 0;font-size:1.16rem;line-height:1.9}.hero-actions{flex-wrap:wrap;gap:.8rem;margin-top:2.4rem;display:flex}.hero-actions a,.recruit-content a{background:#ffffffe6;border:1px solid #1118203d;align-items:center;min-height:3.1rem;padding:.85rem 1.25rem;font-size:.9rem;display:inline-flex}.hero-actions a:first-child,.recruit-content a{border-color:var(--blue);background:var(--blue);color:#fff;font-weight:700}.hero-actions a:hover,.recruit-content a:hover,.contact-box a:hover{transform:translateY(-2px)}.hero-strip{color:#111820ad;gap:.5rem;font-size:.7rem;display:flex;position:absolute;bottom:2rem;right:clamp(1rem,3vw,3rem)}.hero-strip span{background:#ffffffd6;border:1px solid #11182024;padding:.48rem .64rem}.section-band{border-top:1px solid var(--line);background:#fff}.about,.environment,.company,.footer{background:var(--soft)}.section-inner{width:min(1180px,100% - 2rem);margin:0 auto;padding:7rem 0}.statement-grid,.split,.message-panel,.contact-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;gap:5rem;display:grid}.statement h2,.about h2,.message h2,.section-heading h2,.story h2,.recruit h2,.contact h2{margin:0;font-size:4.2rem;font-weight:900;line-height:1.05}.statement p:last-child,.message-copy p,.recruit-content p,.contact-box p{color:#111820bd;margin:0;font-size:1.08rem;line-height:2}.commitment-card,.office-card{border:1px solid var(--line);background:var(--panel)}.commitment-card>span,.office-card>span{color:var(--red);font-weight:800}.commitment-card h3,.office-card h3{margin:.7rem 0 0;font-size:1.6rem}.commitment-card p{color:#111820ad;margin:1rem 0 0;line-height:1.8}.belief-orbit-section{min-height:230vh;position:relative}.belief-orbit-sticky{align-items:center;min-height:100vh;display:grid;position:sticky;top:0;overflow:hidden}.belief-orbit-inner{grid-template-columns:minmax(0,.82fr) minmax(34rem,1.18fr);align-items:center;gap:3rem;width:min(1180px,100% - 2rem);margin:0 auto;padding:6.5rem 0 2rem;display:grid}.belief-orbit-copy{z-index:5;position:relative}.belief-orbit-copy>p:last-child{color:#111820b3;max-width:34rem;margin:1.5rem 0 0;line-height:1.9}.belief-orbit-stage{perspective:75rem;min-height:36rem;position:relative}.belief-circle{z-index:2;text-align:center;will-change:top, left, transform;background:linear-gradient(#fff,#fff) padding-box padding-box,linear-gradient(135deg,#ff3b1f,#ff7a00 45%,#e6003a) border-box;border:4px solid #0000;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:21rem;height:21rem;padding:2.5rem;transition:top .76s cubic-bezier(.22,1,.36,1),left .76s cubic-bezier(.22,1,.36,1),transform .76s cubic-bezier(.22,1,.36,1),opacity .42s,box-shadow .76s;display:flex;position:absolute;top:11.5rem;left:50%;transform:translate(-50%);box-shadow:0 1.4rem 4rem #1b304c1f}.belief-circle:nth-child(2){background:linear-gradient(#fff,#fff) padding-box padding-box,linear-gradient(135deg,#7a00c9,#ff2fa0 58%,#3e00b5) border-box}.belief-circle:nth-child(3){background:linear-gradient(#fff,#fff) padding-box padding-box,linear-gradient(135deg,#00b3ff,#0077ff 52%,#4a00e0) border-box}.belief-circle--active{z-index:4;top:11.5rem;left:50%;transform:translate(-50%)scale(1);box-shadow:0 1.8rem 5rem #1b304c29}.belief-circle--left,.belief-circle--right{z-index:2;opacity:.94;top:1rem;transform:translate(-50%)scale(.56)}.belief-circle--left{left:24%}.belief-circle--right{left:76%}.belief-circle>span{color:var(--red);font-size:1.65rem;font-weight:900;line-height:1}.belief-circle>p{color:var(--blue);text-transform:uppercase;margin:.45rem 0 0;font-size:.82rem;font-weight:800}.belief-circle h3{margin:.8rem 0 0;font-size:2rem;line-height:1.2}.belief-circle>div{color:#111820ad;max-width:15rem;margin-top:1rem;font-size:.92rem;line-height:1.7}.message{background:#fff}.message-panel{position:relative}.message-copy{border-left:4px solid var(--blue);padding-left:2rem}.message-copy p+p{margin-top:1.4rem}.signature{color:var(--muted);gap:.35rem;margin-top:2rem;font-size:.86rem;display:grid}.signature strong{color:var(--foreground);font-size:1rem}.section-heading{max-width:54rem}.commitment-grid{border:1px solid var(--line);background:var(--line);grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:3rem;display:grid}.commitment-card{min-height:17rem;padding:2rem}.commitment-card:nth-child(3n+2){border-top:4px solid var(--blue)}.commitment-card:nth-child(3n){border-top:4px solid var(--red)}.story{background:#fff}.story-layout{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:start;gap:5rem;display:grid}.story-heading{position:sticky;top:7rem}.story-heading>span{color:var(--red);margin-bottom:1.2rem;font-size:.78rem;font-weight:900;display:inline-block}.story-content{border-top:4px solid var(--blue);padding-top:2rem}.story-portrait{background:var(--soft);margin:0 0 2.4rem;overflow:hidden}.story-portrait img{aspect-ratio:2048/894;object-fit:cover;object-position:center;width:100%;height:auto;display:block}.story-content>p{color:#111820b3;margin:0;line-height:1.9}.story-content>p+p{margin-top:1.2rem}.story-content .story-lead{color:var(--foreground);font-size:1.8rem;font-weight:900;line-height:1.45}.story-path{border-top:1px solid var(--line);margin-top:2.5rem}.story-path>div{border-bottom:1px solid var(--line);grid-template-columns:3.5rem minmax(11rem,.58fr) 1fr;align-items:start;gap:1.3rem;padding:1.6rem 0;display:grid}.story-path span{color:var(--red);font-size:1.35rem;font-weight:900}.story-path strong{font-size:1.08rem;line-height:1.55}.story-path p{color:#111820a8;margin:0;line-height:1.75}.story-footer{margin-top:2.5rem}.story-footer div>span{font-size:1.35rem;font-weight:900}.story-footer div>p{color:var(--muted);margin:.4rem 0 0;font-size:.78rem}.recruit{isolation:isolate;align-items:center;min-height:70vh;display:grid;position:relative}.recruit-image{filter:saturate(.7)}.recruit:before{z-index:-2;content:"";background:linear-gradient(90deg,#fff 0%,#fffffff0 42%,#ffffff38 100%),linear-gradient(#fff 0%,#0000 24%,#fff 100%);position:absolute;inset:0}.recruit-content{max-width:50rem}.recruit-content p{max-width:40rem;margin-top:1.5rem}.recruit-content a{margin-top:2rem}.company-heading>p:last-child{color:var(--muted);margin:1.2rem 0 0}.office-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:3rem;display:grid}.office-card{min-height:13rem;padding:1.8rem}.office-card h3{font-size:1.22rem}.office-card address{color:#111820b3;margin-top:1rem;font-style:normal;line-height:1.7}.office-card a{color:var(--blue);margin-top:.9rem;font-size:1.35rem;font-weight:900;display:inline-block}.advisor-list{border-top:1px solid var(--line);margin-top:3rem}.advisor-list div{border-bottom:1px solid var(--line);grid-template-columns:minmax(12rem,.4fr) 1fr;gap:1rem;padding:1.2rem 0;display:grid}.advisor-list span{color:var(--muted);font-size:.82rem}.contact-grid{align-items:stretch}.contact-box{border-left:4px solid var(--red);gap:1rem;padding:1rem 0 1rem 2rem;display:grid}.contact-box a{width:max-content;color:var(--blue);font-size:3.2rem;font-weight:900}.contact-box span{color:var(--muted);font-size:.82rem}.footer{border-top:1px solid var(--line);color:#11182094}.footer-inner{justify-content:space-between;gap:1rem;padding-top:2rem;padding-bottom:2rem;font-size:.82rem;display:flex}.footer p{color:var(--foreground);margin:0;font-weight:800}@media (max-width:920px){.global-header{grid-template-columns:1fr auto}.desktop-nav{display:none}.hero h1{font-size:4.4rem}.statement-grid,.split,.message-panel,.contact-grid{grid-template-columns:1fr;gap:2.5rem}.statement h2,.about h2,.message h2,.section-heading h2,.story h2,.recruit h2,.contact h2{font-size:3rem}.commitment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.story-layout{grid-template-columns:1fr;gap:2.5rem}.story-heading{position:static}.belief-orbit-inner{grid-template-columns:1fr;gap:.5rem;padding-top:5.5rem}.belief-orbit-copy{max-width:42rem}.belief-orbit-stage{min-height:32rem}.belief-circle{width:18rem;height:18rem}.belief-circle--active{top:10.5rem}.belief-circle--left,.belief-circle--right{top:-.5rem}.commitment-card:nth-child(3n+2),.commitment-card:nth-child(3n){border-top:1px solid var(--line)}.commitment-card:nth-child(2n){border-top:4px solid var(--blue)}}@media (max-width:640px){.global-header{padding:.78rem 1rem}.brand strong{font-size:1.45rem}.header-cta{padding:.62rem .72rem}.hero{min-height:88vh;padding:6rem 1rem 7rem}.hero-overlay{background:linear-gradient(90deg,#fffffff7 0%,#ffffffd1 72%,#ffffff80 100%),linear-gradient(#fff3 44%,#fff 100%)}.hero h1{font-size:3rem}.hero-copy{font-size:1rem}.hero-strip{left:1rem;right:1rem;overflow-x:auto}.section-inner{width:min(100% - 2rem,1180px);padding:4.5rem 0}.statement h2,.about h2,.message h2,.section-heading h2,.story h2,.recruit h2,.contact h2{font-size:2.35rem}.commitment-grid,.office-grid{grid-template-columns:1fr}.story-content .story-lead{font-size:1.4rem}.story-portrait{margin-bottom:1.8rem}.story-portrait img{aspect-ratio:4/3;object-position:70% center}.story-path>div{grid-template-columns:2.5rem 1fr;gap:.8rem}.story-path p{grid-column:2}.belief-orbit-section{min-height:210vh}.belief-orbit-sticky{min-height:100svh}.belief-orbit-inner{width:min(100% - 2rem,1180px);padding:4.5rem 0 1rem}.belief-orbit-copy>p:last-child{margin-top:1rem;font-size:.9rem;line-height:1.7}.belief-orbit-stage{min-height:25rem}.belief-circle{border-width:3px;width:14rem;height:14rem;padding:1.5rem}.belief-circle--active{top:9rem}.belief-circle--left,.belief-circle--right{top:0;transform:translate(-50%)scale(.56)}.belief-circle--left{left:20%}.belief-circle--right{left:80%}.belief-circle h3{margin-top:.5rem;font-size:1.35rem}.belief-circle>div{margin-top:.7rem;font-size:.74rem;line-height:1.55}.commitment-card{min-height:14rem}.message-copy,.contact-box{padding-left:1.2rem}.advisor-list div{grid-template-columns:1fr;gap:.4rem}.contact-box a{font-size:2rem}.footer-inner{flex-direction:column}}@media (prefers-reduced-motion:reduce){.belief-circle{transition:none}} /* ===== ZERO TO HERO ファーストビュー（2026-08-06 差し替え・確定FV準拠） ===== */ .zth-hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:7rem 4vw 4vw;background:#fff;overflow:hidden} .zth-wall{display:flex;gap:2vw;align-items:stretch;justify-content:center;width:100%} .zth-word{font-weight:900;font-family:"Arial Black","Helvetica Neue",sans-serif;letter-spacing:-.04em;line-height:.82;text-transform:uppercase;color:transparent;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;background-size:300% 300%;user-select:none} .zth-vertical{writing-mode:vertical-rl;transform:rotate(180deg);font-size:clamp(90px,24vw,340px)} .zw1{background-image:linear-gradient(140deg,#ff3b1f,#ff7a00,#e6003a,#ff3b1f,#b8005c,#ff7a00);animation:zthflow 9s ease-in-out infinite} .zw2{background-image:linear-gradient(220deg,#7a00c9,#ff2fa0,#3e00b5,#c400ff,#7a00c9);animation:zthflow 11s ease-in-out infinite reverse} .zw3{background-image:linear-gradient(160deg,#00b3ff,#4a00e0,#00e0c6,#0077ff,#7a00c9,#00b3ff);animation:zthflow 10s ease-in-out infinite} @keyframes zthflow{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}} .zth-copy{position:absolute;left:6vw;bottom:8vh;max-width:560px;z-index:2} .zth-en{font-weight:900;font-size:clamp(13px,1.2vw,16px);letter-spacing:.28em;color:#111820;text-transform:uppercase;margin:0 0 1rem} .zth-catch{margin:0;font-size:clamp(26px,2.7vw,40px);font-weight:900;line-height:1.5;letter-spacing:.04em;color:#111820} .zth-catch span{display:block} .zth-ja{color:#333;font-size:clamp(13px,1.3vw,16px);line-height:2;font-weight:600;margin:1rem 0 0} .zth-en,.zth-catch,.zth-ja{text-shadow:0 0 8px #fff,0 0 16px #fff,0 0 32px #fff,0 0 48px #fff} .zth-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem} .zth-cta{display:inline-block;padding:14px 38px;background:#111820;color:#fff;font-weight:700;font-size:14px;letter-spacing:.18em;border-radius:999px;transition:transform .25s,background .25s,color .25s,border-color .25s} .zth-cta:hover{transform:translateY(-2px);background:#ff3b1f;color:#fff} .zth-cta--ghost{background:#fff;color:#111820;border:1px solid #11182047} .zth-cta--ghost:hover{background:#fff;color:#ff3b1f;border-color:#ff3b1f} @media (prefers-reduced-motion:reduce){.zth-word{animation:none}} @media (max-width:640px){ .zth-hero{flex-direction:column;align-items:flex-start;justify-content:flex-start;min-height:100svh;padding:6.5rem 1rem 3rem} .zth-wall{flex-direction:column;gap:0;align-items:flex-start} .zth-vertical{writing-mode:horizontal-tb;transform:none;font-size:clamp(70px,24vw,120px)} .zth-copy{position:static;margin-top:2.2rem} } /* ===== FV背景スライドショー（2026-08-06 追加） ===== */ .zth-bg{position:fixed;top:0;left:0;width:100%;height:100svh;z-index:0} .zth-bg-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.8s ease} .zth-bg-img.is-active{opacity:1} .zth-veil{position:fixed;top:0;left:0;width:100%;height:100svh;z-index:0;background:linear-gradient(180deg,#ffffffc2 0%,#ffffffa8 55%,#ffffffdb 100%)} .zth-wall{position:relative;z-index:1} @media (prefers-reduced-motion:reduce){.zth-bg-img{transition:none}} /* ===== 働く環境カード: パステル巨大数字（イラレ版デザイン準拠・2026-08-06） ===== */ .commitment-grid{border:none;background:none;gap:1.6rem;margin-top:3rem} .commitment-grid .commitment-card{position:relative;overflow:hidden;background:#fff;border:none;border-radius:0;box-shadow:0 14px 32px rgba(30,40,60,.10);min-height:230px;padding:1.9rem 1.4rem 1.6rem 36%} .commitment-grid .commitment-card:nth-child(3n+2),.commitment-grid .commitment-card:nth-child(3n),.commitment-grid .commitment-card:nth-child(2n){border-top:none} .commitment-grid .commitment-card>span{position:absolute;z-index:0;left:-30px;bottom:-58px;font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:210px;line-height:1;letter-spacing:0} .commitment-grid .commitment-card:nth-child(1)>span{color:#FFB5A7} .commitment-grid .commitment-card:nth-child(2)>span{color:#F4A6CD} .commitment-grid .commitment-card:nth-child(3)>span{color:#DB9DEE} .commitment-grid .commitment-card:nth-child(4)>span{color:#BCB0F1} .commitment-grid .commitment-card:nth-child(5)>span{color:#A1C4FF} .commitment-grid .commitment-card:nth-child(6)>span{color:#8CDDEE;bottom:-100px} .commitment-grid .commitment-card>span::after{content:none} .commitment-grid .commitment-card h3{position:relative;z-index:1;margin:0 0 .8rem;font-size:1.45rem;font-weight:900;letter-spacing:.02em} .commitment-grid .commitment-card p{position:relative;z-index:1;margin:0;font-size:.85rem;line-height:1.75;color:#6e747c} @media (max-width:920px){ .commitment-grid .commitment-card{padding-left:32%} } @media (max-width:640px){ .commitment-grid{gap:1.4rem} .commitment-grid .commitment-card{min-height:185px;padding:1.6rem 1.2rem 1.4rem 34%} .commitment-grid .commitment-card>span{font-size:170px;bottom:-46px;left:-24px} .commitment-grid .commitment-card:nth-child(6)>span{bottom:-82px} } /* ===== 働く環境セクションの背景: 水彩テクスチャ（2026-08-06） ===== */ .environment{background:#f4f7fa url(../img/env-bg.jpg) center/cover no-repeat} .belief-orbit-sticky{background:#f4f7fa url(../img/env-bg.jpg) center/cover no-repeat} /* ===== FV文字のブラー出現（global-p.com/recruit と同一パラメータ・2026-08-06） ===== */ .gp-blur{opacity:0;filter:blur(60px);-webkit-filter:blur(60px); transition:opacity .8s cubic-bezier(.19,1,.22,1) .2s,filter .8s cubic-bezier(.19,1,.22,1) .2s,-webkit-filter .8s cubic-bezier(.19,1,.22,1) .2s} .gp-blur.is-show{opacity:1;filter:blur(0);-webkit-filter:blur(0)} .zth-copy.gp-blur{transition-delay:.5s} @media (max-width:640px){.gp-blur{filter:blur(24px);-webkit-filter:blur(24px)}} @media (prefers-reduced-motion:reduce){.gp-blur{transition:none;opacity:1;filter:none;-webkit-filter:none}} /* ===== 二重スライド（背景固定パララックス・2026-08-06） ===== FVの背景写真は画面に固定し、文字と後続セクションが上に滑って重なる */ .site-shell>section:not(.zth-hero),.site-shell>footer{position:relative;z-index:2} .site-shell>.zth-hero{z-index:1} /* ===== OUR PURPOSEセクションの背景: ビル写真（2026-08-06） ===== */ .statement{background:linear-gradient(rgba(10,16,28,.62),rgba(10,16,28,.62)),url(../img/statement-bg.jpg) center/cover no-repeat} .statement h2{color:#fff} .statement .section-kicker{color:#8ec8ff} .statement p:last-child{color:rgba(255,255,255,.9)} /* 会社概要: トップは本部のみ＋一覧ページへの導線（2026-08-06） */ .company-more{display:inline-block;margin-top:2.2rem;padding:.95rem 1.6rem;border:1px solid #11182047;font-size:.9rem;font-weight:700;transition:color .18s,border-color .18s,background .18s} .company-more:hover{color:var(--blue);border-color:var(--blue);background:#087fce14} /* ===== JOIN OUR STORYセクションの背景: 青空（2026-08-06） ===== */ .recruit .recruit-image{background-image:url(../img/sky-bg.jpg);filter:none} /* 青空を見せるためオーバーレイを軽減（2026-08-06） */ .recruit::before{background:linear-gradient(90deg,#ffffffa6 0%,#ffffff59 45%,#ffffff0d 100%)} .recruit::after{background:linear-gradient(#0000,#ffffffcc)} /* ===== News（グループのお知らせ）セクション 2026-08-07 ===== */ .news-sec{background:#fff} .news-items{border-top:1px solid var(--line);margin-top:3rem} .news-item{display:grid;grid-template-columns:7.5rem 7rem 1fr;gap:1.2rem;align-items:center;padding:1.5rem 0;border-bottom:1px solid var(--line);text-decoration:none;transition:color .18s} .news-item time{color:var(--muted);font-size:.85rem} .news-item .cat{justify-self:start;font-size:.72rem;font-weight:700;color:var(--blue);border:1px solid var(--blue);border-radius:999px;padding:.22rem .8rem;white-space:nowrap} .news-item p{margin:0;font-size:1rem;font-weight:600} .news-item:hover p{color:var(--blue)} @media (max-width:640px){ .news-item{grid-template-columns:auto auto;grid-template-rows:auto auto;gap:.5rem 1rem;padding:1.2rem 0} .news-item p{grid-column:1/3} } /* ===== RECRUITMENT MEDIA セクション（2026-08-07） ===== */ .media-lead{color:#111820b3;margin:1.2rem 0 0;line-height:1.9} .media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;margin-top:3rem} .media-card{display:block;background:#fff;border:1px solid var(--line);text-decoration:none;transition:transform .25s,box-shadow .25s} .media-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(30,40,60,.12)} .media-card img,.media-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block} .media-thumb.th1{background:linear-gradient(140deg,#ff3b1f,#ff7a00,#b8005c)} .media-thumb.th2{background:linear-gradient(160deg,#00b3ff,#4a00e0,#0077ff)} .media-cat{display:inline-block;margin:1.1rem 1.2rem 0;font-size:.72rem;font-weight:700;color:var(--blue);border:1px solid var(--blue);border-radius:999px;padding:.2rem .7rem} .media-card time{display:block;margin:.7rem 1.2rem 0;font-size:.8rem;color:var(--muted)} .media-card h3{margin:.4rem 1.2rem 1.3rem;font-size:1rem;line-height:1.65;color:#111820} @media (max-width:920px){.media-grid{grid-template-columns:1fr;gap:1.2rem}} /* FV採用導線強化（2026-08-07 ターゲット=10-30代男性・全国募集） */ .zth-bases{margin:1.2rem 0 0;font-size:.78rem;font-weight:700;letter-spacing:.06em;color:#111820c7;text-shadow:0 0 8px #fff,0 0 16px #fff} /* ===== Mediaカード モバイル: サムネ左＋テキスト右のリスト形式（2026-08-07 サンプル準拠） ===== */ @media (max-width:920px){ .media-grid{grid-template-columns:1fr;gap:2.2rem;margin-top:2.2rem} .media-card{display:grid;grid-template-columns:8.6rem 1fr;grid-template-rows:auto auto 1fr;gap:.45rem .9rem;background:none;border:none;box-shadow:none} .media-card:hover{transform:none;box-shadow:none} .media-card img,.media-thumb{grid-column:1;grid-row:1/4;width:100%;aspect-ratio:4/3;border-radius:8px} .media-cat{grid-column:2;grid-row:1;justify-self:start;margin:0;font-size:.66rem;padding:.16rem .6rem} .media-card time{grid-column:2;grid-row:1;justify-self:end;align-self:center;margin:0;font-size:.78rem} .media-card h3{grid-column:2;grid-row:2;margin:0;font-size:.92rem;line-height:1.6} } /* ===== What We Believe 回転サークルテキスト背景（2026-08-07 webdoor①方式） ===== */ .belief-ring{position:absolute;z-index:1;top:-8rem;left:-13rem;width:46rem;height:46rem;pointer-events:none;animation:belief-spin 50s linear infinite} .belief-ring svg{width:100%;height:100%;display:block} .belief-ring text{font-family:"Arial Black","Helvetica Neue",sans-serif;font-weight:900;font-size:44px;letter-spacing:.32em;fill:rgba(8,127,206,.14);text-transform:uppercase} .belief-orbit-stage{position:relative;z-index:2} @keyframes belief-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @media (max-width:640px){.belief-ring{width:28rem;height:28rem;top:-6rem;left:-12rem}} @media (prefers-reduced-motion:reduce){.belief-ring{animation:none}} /* モバイルは「人の可能性が」セクションの背景画像なし（2026-08-07） */ @media (max-width:640px){ .belief-orbit-sticky{background:#f4f7fa} } /* ===== モバイルUI余白調整（2026-08-07 オーナー指示「FV以外が窮屈」） ===== */ @media (max-width:640px){ /* 左右の余白を1rem→1.6remへ・セクション上下も拡大 */ .section-inner{width:calc(100% - 3.2rem);padding:5.2rem 0} .belief-orbit-inner{width:calc(100% - 3.2rem)} /* 見出しまわりに空気を */ .section-kicker,.section-label{margin-bottom:1.2rem} .statement h2,.about h2,.message h2,.section-heading h2,.story h2,.recruit h2,.contact h2{line-height:1.35} /* 2カラム崩しのgapを拡大 */ .statement-grid,.split,.message-panel,.contact-grid{gap:3rem} /* 代表メッセージ引用の内側余白 */ .message-copy{padding:.2rem .4rem .2rem 1.6rem} /* 働く環境カードの内側余白 */ .commitment-grid{gap:3.2rem} .commitment-grid .commitment-card{min-height:200px;padding:2rem 1.5rem 1.9rem 34%} /* Mediaリストの行間 */ .media-grid{gap:2.6rem;margin-top:2.6rem} /* 拠点カード・問い合わせ・フッター */ .office-grid{gap:1.4rem;margin-top:2.6rem} .office-card{padding:2rem 1.7rem} .contact-box{padding:1.2rem .2rem 1.2rem 1.6rem;gap:1.2rem} .footer-inner{padding-top:2.6rem;padding-bottom:2.6rem;gap:1.4rem} /* 採用CTA・会社概要ボタンの上余白 */ .recruit-content a{margin-top:2.4rem} .company-more{margin-top:2.6rem} } /* 価値観サークル内の番号を非表示（2026-08-07 オーナー指示） */ .belief-circle>span{display:none} /* ===== 共感セクション（2026-08-07 主人公=あなた化 第1弾） ===== */ .empathy{background:#fff} .empathy h2{margin:0;font-size:4.2rem;font-weight:900;line-height:1.2} .empathy-lines{margin-top:2.6rem;display:grid;gap:1.1rem} .empathy-lines p{margin:0;font-size:1.25rem;font-weight:700;color:#111820;border-left:4px solid #dfe5ee;padding-left:1.1rem} .empathy-close{margin:2.4rem 0 0;font-size:1.05rem;line-height:2;color:#111820c7} .empathy-cta{margin-top:1.8rem} @media (max-width:640px){.empathy h2{font-size:2.35rem}.empathy-lines p{font-size:1.02rem}} /* ===== セクション縦圧縮（2026-08-07 オーナー指示「各セクションを短く」） ===== */ .section-inner{padding:4.5rem 0} .belief-orbit-section{min-height:150vh} .belief-orbit-inner{padding:4rem 0 1rem} .recruit{min-height:52vh} .commitment-grid{margin-top:3rem} .media-grid{margin-top:2.4rem} .office-grid{margin-top:2.4rem} @media (max-width:640px){ .section-inner{padding:4.2rem 0} .belief-orbit-section{min-height:140vh} } /* ===== 見やすさの規律（2026-08-07 recruit.co.jp分析の適用） ===== */ /* ①背景の交互リズム: 白 ⇔ 薄ブルーグレー */ .empathy{background:#fff} .news-sec{background:#F3F5FA} .message{background:#fff} .company{background:#F3F5FA} .contact{background:#fff} .footer{background:#F3F5FA} /* ②押せるものは2種類だけ: 黒ピル（主役） / 白ピル枠付き（脇役） */ .company-more,.recruit-content a,.contact-box a.btnish{border-radius:999px} .company-more{background:#111820;color:#fff;border:none;padding:1rem 2.2rem;font-weight:700} .company-more:hover{background:#087fce;color:#fff} .recruit-content a{background:#111820;border-color:#111820;border-radius:999px;padding:1rem 2.4rem} .recruit-content a:hover{background:#087fce;border-color:#087fce} .empathy-cta{background:#111820;color:#fff} /* ===== ZERO TO HERO 5色システムで全体を染める（2026-08-07 オーナーGO） ===== 公式パレット: ZERO=#FF3B1F / TO=#C400FF / HERO=#2F7BFF + 黒#111820 + 白 */ :root{--blue:#2F7BFF;--red:#FF3B1F;--soft:#F6F7F9} /* 水彩テクスチャ廃止 → 無地のニュートラル */ .belief-orbit-sticky{background:#F6F7F9} /* 回転リングもHEROブルーに */ .belief-ring text{fill:url(#ringGrad)} /* ビル写真セクションのラベル色 */ .statement .section-kicker{color:#9CC2FF} /* 企業概要: 罫線2カラムリスト型（2026-08-07） */ .company-facts{margin-top:2.6rem} .company-facts .company-tel{color:var(--blue)} @media (max-width:640px){.company-facts div{grid-template-columns:1fr;gap:.3rem}} /* ===== 本文タイポグラフィ改善（2026-08-07 recruit.co.jp水準・Noto Sans JP） ===== */ body{color:#2D3133;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} p,address,li{letter-spacing:.03em} .statement p:last-child,.message-copy p,.recruit-content p,.contact-box p,.empathy-close,.media-lead{line-height:2.05} .commitment-card p,.office-card address,.belief-circle>div{line-height:1.85} /* 本文サイズ縮小（2026-08-07 オーナー指示） */ .statement p:last-child,.message-copy p,.recruit-content p,.contact-box p{font-size:.98rem} .belief-orbit-copy>p:last-child,.media-lead{font-size:.94rem} .empathy-lines p{font-size:1.12rem} .empathy-close{font-size:.95rem} .story-content>p{font-size:.95rem} .commitment-card p{font-size:.82rem} .office-card address{font-size:.92rem} /* ===== 自然な日本語改行（2026-08-07） ===== auto-phrase: 文節の切れ目で折り返す（Chrome系）/ balance: 見出しの行長を均等に */ .site-shell h1,.site-shell h2,.site-shell h3{text-wrap:balance} .site-shell h1,.site-shell h2,.site-shell h3,.site-shell p,.site-shell address,.site-shell strong{word-break:auto-phrase;line-break:strict} /* ===== モバイル本文をrecruit.co.jp基準に（16px・行間2.0）2026-08-07 ===== */ @media (max-width:640px){ .statement p:last-child,.message-copy p,.recruit-content p,.contact-box p,.belief-orbit-copy>p:last-child,.media-lead,.empathy-close,.story-content>p{font-size:1rem;line-height:2} .empathy-lines p{font-size:1.06rem;line-height:1.9} .commitment-card p{font-size:.9rem;line-height:1.9} .office-card address{font-size:.95rem;line-height:1.85} .media-card h3{font-size:.95rem} } /* JOIN OUR STORY + Contact 統合（2026-08-07） */ .join-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem} .join-actions a{margin-top:0} .join-tel{background:#fff!important;border:1px solid #11182047!important;color:#111820!important;font-weight:800} .join-tel:hover{border-color:var(--blue)!important;color:var(--blue)!important;background:#fff!important} .join-note{margin:1rem 0 0;font-size:.82rem;color:#111820a8} @media (max-width:640px){.join-actions{flex-direction:column;align-items:flex-start}} /* 円セクションとMediaを白背景に（2026-08-07） */ .about,.belief-orbit-sticky{background:#fff} .news-sec{background:#fff} @media (max-width:640px){.belief-orbit-sticky{background:#fff}} /* 会社概要ミニ化（2026-08-07 recruit.co.jpフッター調） */ .company-mini{padding-top:3.5rem;padding-bottom:3.5rem} .mini-facts{margin-top:1.6rem} .mini-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.4rem 0;border-bottom:1px solid var(--line);font-weight:700;font-size:1.02rem;color:#111820;text-decoration:none} .mini-facts .mini-row:first-child{border-top:1px solid var(--line)} .mini-ic{flex:none;width:2.3rem;height:2.3rem;border:1px solid var(--blue);color:var(--blue);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:400;transition:background .18s,color .18s} a.mini-row:hover .mini-ic{background:var(--blue);color:#fff} a.mini-row:hover span:first-child{color:var(--blue)} @media (max-width:640px){.mini-row{font-size:.95rem;padding:1.3rem 0}} /* ===== スクロール連動リビール（2026-08-07 JS動き付け） ===== */ .js-reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.19,1,.22,1),transform .9s cubic-bezier(.19,1,.22,1)} .js-reveal.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.js-reveal{opacity:1;transform:none;transition:none}} /* From Zeroラベル: 濃色ラベル＋薄い筆記体の二層（2026-08-07 サンプル準拠） */ .fz-mark{position:relative;display:block;margin-bottom:1.2rem} .fz-mark .section-kicker{position:relative;z-index:1;margin:0;font-size:1.05rem;letter-spacing:.12em;text-transform:uppercase;font-weight:900} .fz-script{position:absolute;left:3.5rem;top:50%;transform:translateY(-50%);height:120px;width:auto;pointer-events:none;z-index:0} @media (max-width:640px){.fz-script{height:88px;left:2.5rem}.fz-mark .section-kicker{font-size:.95rem}} /* ラベル二層デザイン 共通（2026-08-07） */ .fz-mark{position:relative;display:block;margin-bottom:1.2rem} .fz-mark .section-kicker,.fz-mark .section-label{position:relative;z-index:1;margin:0;font-size:1.02rem;letter-spacing:.12em;text-transform:uppercase;font-weight:900} .fz-script{position:absolute;left:3.2rem;top:50%;transform:translateY(-50%);height:110px;width:auto;pointer-events:none;z-index:0} .statement .fz-script{opacity:.4} .recruit .fz-script{opacity:.75} @media (max-width:640px){.fz-script{height:80px;left:2.2rem}.fz-mark .section-kicker,.fz-mark .section-label{font-size:.92rem}} /* 青空→COMPANYの境界を溶かす（2026-08-07） */ .recruit::after{background:linear-gradient(#0000,#e9f2fd)} .company{border-top:none;background:linear-gradient(180deg,#e9f2fd 0%,#F6F7F9 60%)} /* モバイル本文サイズ縮小（2026-08-07 オーナー指示「文字が大きい」） */ @media (max-width:640px){ .statement p:last-child,.message-copy p,.recruit-content p,.contact-box p,.belief-orbit-copy>p:last-child,.media-lead,.empathy-close,.story-content>p{font-size:.9rem;line-height:1.9} .empathy-lines p{font-size:.98rem;line-height:1.8} .commitment-card p{font-size:.85rem;line-height:1.8} .office-card address,.office-item address{font-size:.9rem;line-height:1.8} .media-card h3{font-size:.88rem;line-height:1.6} .mini-row{font-size:.9rem} .media-card time{font-size:.74rem} .media-cat{font-size:.62rem} } /* モバイル本文: recruit.co.jp基準の最終調整（2026-08-07 本文16px・脇役は小さく） */ @media (max-width:640px){ .statement p:last-child,.message-copy p,.recruit-content p,.belief-orbit-copy>p:last-child,.media-lead,.empathy-close,.story-content>p{font-size:1rem;line-height:2} .empathy-lines p{font-size:1rem;line-height:1.85} .media-card h3{font-size:.92rem;line-height:1.65} .mini-row{font-size:.95rem} .commitment-card p{font-size:.85rem} } /* Mediaリード文をリクルート仕様に（2026-08-07） */ .media-lead{font-size:1rem;color:#2D3133;line-height:2;letter-spacing:.06em} @media (max-width:640px){.media-lead{font-size:1.02rem;line-height:2.05;letter-spacing:.06em}} /* Mediaリード: recruit.co.jp実測値（PC16px/SP15px・lh1.75）2026-08-07 */ .media-lead{font-size:16px;line-height:1.75;color:#2D3133;letter-spacing:.05em} @media (max-width:640px){.media-lead{font-size:15px;line-height:1.75;letter-spacing:.05em}} /* ===== 本文タイポグラフィ統一（2026-08-07 recruit実測: PC16px/SP15px・lh1.75） ===== */ .statement p:last-child,.belief-orbit-copy>p:last-child,.media-lead,.recruit-content p,.empathy-close,.message-copy p,.story-content>p,.company-lead{font-size:16px;line-height:1.75;letter-spacing:.05em;color:#2D3133} .statement p:last-child{color:rgba(255,255,255,.92)} .empathy-lines p{font-size:16px;line-height:1.75;letter-spacing:.05em} .commitment-card p,.office-card address,.office-item address{font-size:14px;line-height:1.75;letter-spacing:.04em} .advisor-list span{font-size:13px} @media (max-width:640px){ .statement p:last-child,.belief-orbit-copy>p:last-child,.media-lead,.recruit-content p,.empathy-close,.message-copy p,.story-content>p,.company-lead{font-size:15px;line-height:1.75} .empathy-lines p{font-size:15px} .commitment-card p,.office-card address,.office-item address{font-size:13.5px} .media-card h3{font-size:14px;line-height:1.65} } /* 価値観サークルの縁を太く（2026-08-07） */ .belief-circle{border-width:7px} @media (max-width:640px){.belief-circle{border-width:5px}} /* 共感セクションに水彩背景（2026-08-07 働きやすい会社セクションと同じ） */ .empathy{background:#f4f7fa url(../img/env-bg.jpg) center/cover no-repeat} /* OUR PURPOSE 左右バランス調整（2026-08-07 縦センター揃え） */ .statement-grid{align-items:center} /* クライマックス見出し: 鉄板風画像（2026-08-07） */ .join-teppan-wrap{margin:0;line-height:0} .join-teppan{width:min(100%,680px);height:auto;display:block} @media (max-width:640px){.join-teppan{width:100%}} /* 「ここは、そういう人が〜」をモバイルで1行表示（2026-08-07） */ @media (max-width:640px){ .empathy-close{white-space:nowrap;font-size:clamp(11.5px,3.6vw,15px);letter-spacing:.02em} } /* 決めゼリフ系テキストのモバイル1行化（2026-08-07） */ @media (max-width:640px){ /* FVコピー2行（未来のメディアリーダー〜／あなたのストーリー〜） */ .zth-ja{white-space:nowrap;font-size:clamp(10.5px,3.55vw,14px);letter-spacing:.01em} /* 共感の3行 */ .empathy-lines p{white-space:nowrap;font-size:clamp(11px,3.9vw,15px);letter-spacing:.02em} } /* モバイル: 正面の円を大きく（2026-08-07） */ @media (max-width:640px){ .belief-circle--active{width:17.5rem;height:17.5rem;padding:1.9rem} .belief-orbit-stage{min-height:28rem} } /* クライマックス見出し: 画面全幅の切り抜きパネル（2026-08-07） */ .join-teppan-wrap{margin:0 0 .4rem;line-height:0} .join-teppan{width:100vw!important;max-width:none;margin-left:calc(50% - 50vw);height:auto;display:block} .recruit-content{max-width:none} .recruit-content p,.recruit-content .section-label,.join-actions{max-width:40rem} /* 共感セクション背景: ペイントスプラッシュ（2026-08-07） */ .empathy{background:#fff url(../img/empathy-bg.jpg) center/cover no-repeat;position:relative} .empathy::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.72)} .empathy .section-inner{position:relative;z-index:1} @media (max-width:640px){.empathy::before{background:rgba(255,255,255,.78)}} /* 共感セクション: 文字を白パネルに載せて可読性確保（2026-08-07） */ .empathy::before{background:rgba(255,255,255,.28)} .empathy .section-inner{background:#fff;padding:3.6rem 3.2rem;box-shadow:0 18px 46px rgba(20,30,50,.12)} @media (max-width:640px){ .empathy::before{background:rgba(255,255,255,.3)} .empathy .section-inner{padding:2.6rem 1.5rem;width:calc(100% - 2.4rem)} } /* From Zeroラベル: 筆記体が見出しに重ならないよう余白確保（2026-08-07） */ .fz-mark{margin-bottom:3.4rem} .fz-script{height:96px;left:3rem} @media (max-width:640px){.fz-mark{margin-bottom:2.6rem}.fz-script{height:74px;left:2rem}} /* 見出しを最前面に・筆記体は背面へ（2026-08-07 復元） */ .fz-mark{margin-bottom:1.4rem;z-index:0} .fz-script{z-index:0} .empathy h2,.statement h2,.about h2,.section-heading h2,.company-heading h2{position:relative;z-index:3} .empathy .empathy-lines,.empathy .empathy-close{position:relative;z-index:3} @media (max-width:640px){.fz-mark{margin-bottom:1.2rem}} /* ===== モバイル ハンバーガーメニュー（2026-08-07） ===== */ .nav-toggle{display:none;position:relative;z-index:60;width:44px;height:44px;padding:0;border:none;background:none;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px} .nav-toggle span{display:block;width:26px;height:2px;background:#111820;transition:transform .3s cubic-bezier(.7,0,.3,1),opacity .2s} .nav-toggle.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)} .nav-toggle.is-open span:nth-child(2){opacity:0} .nav-toggle.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} .mobile-nav{position:fixed;inset:0;z-index:50;background:#fff;transform:translateY(-100%);transition:transform .5s cubic-bezier(.7,0,.3,1);overflow-y:auto;visibility:hidden} .mobile-nav.is-open{transform:none;visibility:visible} .mobile-nav-inner{min-height:100%;display:flex;flex-direction:column;justify-content:center;padding:6.5rem 2rem 3rem} .mobile-nav a{display:block;padding:1.05rem 0;border-bottom:1px solid var(--line);font-size:1.28rem;font-weight:900;color:#111820;text-decoration:none;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.7,0,.3,1),color .2s} .mobile-nav.is-open a{opacity:1;transform:none} .mobile-nav.is-open a:nth-child(1){transition-delay:.12s} .mobile-nav.is-open a:nth-child(2){transition-delay:.18s} .mobile-nav.is-open a:nth-child(3){transition-delay:.24s} .mobile-nav.is-open a:nth-child(4){transition-delay:.30s} .mobile-nav.is-open a:nth-child(5){transition-delay:.36s} .mobile-nav a span{display:block;margin-top:.2rem;font-size:.68rem;font-weight:700;letter-spacing:.12em;color:var(--blue)} .mobile-nav a:active{color:var(--blue)} .mobile-nav-cta{margin-top:2.2rem;display:inline-block;padding:1.05rem 2.4rem;background:#111820;color:#fff!important;border-radius:999px;font-size:.95rem;font-weight:700;text-align:center;border-bottom:none!important} body.nav-locked{overflow:hidden} @media (max-width:920px){.nav-toggle{display:flex}} @media (max-width:560px){.global-header .header-cta{display:none}} @media (prefers-reduced-motion:reduce){.mobile-nav,.mobile-nav a,.nav-toggle span{transition:none}} /* ハンバーガー配置修正: ヘッダー右端に収める（2026-08-07） */ @media (max-width:920px){ .global-header{display:flex;align-items:center;gap:.9rem} .global-header .brand{margin-right:auto} .global-header .header-cta{justify-self:auto} .nav-toggle{margin-right:-6px} } /* メニュー展開中もヘッダー（ロゴ・閉じるボタン）を前面に（2026-08-07） */ @media (max-width:920px){.global-header{z-index:60}} body.nav-locked .global-header{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent} /* ===== 共感〜Media中間までを背景タイポで通す（2026-08-08） ===== */ .typo-band{position:relative;z-index:2;background:#fff url(../img/typo-bg.jpg) top center/cover no-repeat} .typo-band>section{position:relative;z-index:1} /* 旧背景（スプラッシュ・白パネル）を解除して背景タイポを見せる */ .typo-band .empathy{background:transparent} .typo-band .empathy::before{content:none} .typo-band .empathy .section-inner{background:transparent;box-shadow:none;padding:4.5rem 0} .typo-band .news-sec{background:transparent} @media (max-width:640px){ .typo-band{background-size:cover;background-position:top left} .typo-band .empathy .section-inner{padding:4.2rem 0;width:calc(100% - 3.2rem)} } /* 背景タイポ帯の中の区切り線を消す（2026-08-08） */ .typo-band>section{border-top:none} .typo-band{border-top:none} /* ===== 背景タイポ帯を斜めに切り分ける（2026-08-08） ===== */ .typo-band{clip-path:polygon(0 0,100% 0,100% calc(100% - 9vw),0 100%);padding-bottom:6vw} @media (max-width:640px){.typo-band{clip-path:polygon(0 0,100% 0,100% calc(100% - 14vw),0 100%);padding-bottom:9vw}} /* ===== 斜め切り替えを背景レイヤーのみに適用・位置を上げる（2026-08-08 復元） ===== */ .typo-band{clip-path:none!important;padding-bottom:0!important;background:#fff!important} .typo-band::before{content:"";position:absolute;inset:0;z-index:0; background:#fff url(../img/typo-bg-brand.svg) top center/cover no-repeat; clip-path:polygon(0 0,100% 0,100% 42%,0 58%)} .typo-band>section{position:relative;z-index:1} @media (max-width:640px){ .typo-band::before{clip-path:polygon(0 0,100% 0,100% 44%,0 60%);background-position:top left} } /* ===== 共感セクション内の会社紹介（2026-08-08） ===== */ .co-intro{margin-top:3.4rem;max-width:60rem} .co-what{margin:0;font-size:1.35rem;font-weight:900;line-height:1.7;color:#111820;letter-spacing:.02em} .co-sub{margin:.9rem 0 0;font-size:15px;line-height:1.9;color:#111820c7;letter-spacing:.04em} .co-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8rem;margin-top:2.6rem} .co-point{border-top:2px solid var(--blue);padding-top:1.1rem} .co-point h3{margin:0;font-size:1.05rem;font-weight:900;line-height:1.5;color:#111820} .co-point p{margin:.6rem 0 0;font-size:14px;line-height:1.85;color:#111820b3;letter-spacing:.03em} .co-link{display:inline-block;margin-top:2.2rem;padding:.95rem 2rem;border-radius:999px;background:#111820;color:#fff;font-size:.9rem;font-weight:700;text-decoration:none;transition:background .2s,transform .2s} .co-link:hover{background:var(--blue);transform:translateY(-2px)} @media (max-width:920px){.co-points{grid-template-columns:1fr;gap:1.6rem}} @media (max-width:640px){ .co-intro{margin-top:2.6rem} .co-what{font-size:1.15rem} .co-sub{font-size:14px} .co-point h3{font-size:1rem} .co-point p{font-size:13.5px} } /* 会社紹介の追加段落（2026-08-08 A案） */ .co-sub2{margin-top:1rem} /* ===== OUR PURPOSE と Company の背景を統一（2026-08-08） ===== */ .company{border-top:none!important; background:linear-gradient(rgba(10,16,28,.62),rgba(10,16,28,.62)),url(../img/statement-bg.jpg) center/cover no-repeat!important; background-attachment:scroll} /* 暗い背景に合わせて文字と罫線を反転 */ .company .section-label{color:#9CC2FF} .company .mini-row{color:#fff;border-bottom-color:rgba(255,255,255,.28)} .company .mini-facts .mini-row:first-child{border-top-color:rgba(255,255,255,.28)} .company .mini-ic{border-color:rgba(255,255,255,.7);color:#fff} .company a.mini-row:hover span:first-child{color:#9CC2FF} .company a.mini-row:hover .mini-ic{background:#fff;color:#111820;border-color:#fff} /* 2セクションの継ぎ目をなくす */ .statement{padding-bottom:0} .statement .section-inner{padding-bottom:3.2rem} .company .section-inner{padding-top:2.6rem} /* ===== OUR PURPOSE + Company を背景写真1枚で通す（2026-08-08） ===== */ .purpose-band{position:relative;z-index:2; background:linear-gradient(rgba(10,16,28,.62),rgba(10,16,28,.62)),url(../img/statement-bg.jpg) center/cover no-repeat} .purpose-band>section{background:none!important;border-top:none!important;position:relative;z-index:1} /* ===== From Zeroを最上部へ移動したのに伴う背景の付け替え（2026-08-08） ===== */ /* From Zero（今の場所が）＝背景タイポ＋下端を斜めカット */ .empathy{background:#fff!important;position:relative;overflow:hidden} .empathy::before{content:"";position:absolute;inset:0;z-index:0; background:#fff url(../img/typo-bg-brand.svg) top center/cover no-repeat; clip-path:polygon(0 0,100% 0,100% 80%,0 94%)} .empathy .section-inner{position:relative;z-index:1;background:transparent!important;box-shadow:none!important;padding:5rem 0!important} /* Media側は白地に戻す（背景タイポは上部のみ） */ .typo-band{background:#fff!important} .typo-band::before{content:none} @media (max-width:640px){ .empathy::before{clip-path:polygon(0 0,100% 0,100% 84%,0 96%);background-position:top left} .empathy .section-inner{padding:4.2rem 0!important;width:calc(100% - 3.2rem)} } /* From Zero周辺の区切り線を消す（2026-08-08） */ .empathy{border-top:none!important;border-bottom:none!important} .empathy + .section-band,.empathy + section{border-top:none!important} .about.belief-orbit-section{border-top:none!important} /* ===== WHAT WE DO セクション（2026-08-08 新設） ===== */ .whatwedo{background:#fff;border-top:none} .wwd-body{margin-top:2.4rem;max-width:62rem} .wwd-lead{margin:0;font-size:1.35rem;font-weight:900;line-height:1.75;color:#111820;letter-spacing:.02em} .wwd-text{margin:1.3rem 0 0;font-size:16px;line-height:1.95;letter-spacing:.05em;color:#111820c7} @media (max-width:640px){ .wwd-lead{font-size:1.12rem;line-height:1.7} .wwd-text{font-size:15px;line-height:1.9;margin-top:1.1rem} .wwd-body{margin-top:1.8rem} } /* WHAT WE DO: 見出しなし・本文のみ（2026-08-08） */ .whatwedo .wwd-body{margin-top:0} /* WHAT WE DO: セクションの余白と文字を大きく（2026-08-08） */ .whatwedo{display:flex;align-items:center;min-height:78vh} .whatwedo .section-inner{padding:8rem 0;width:100%} .wwd-lead{font-size:1.9rem;line-height:1.8} .wwd-text{font-size:17px;line-height:2.1;margin-top:1.8rem} .wwd-body{max-width:66rem} @media (max-width:640px){ .whatwedo{min-height:auto} .whatwedo .section-inner{padding:5.5rem 0} .wwd-lead{font-size:1.32rem;line-height:1.75} .wwd-text{font-size:15.5px;line-height:2;margin-top:1.4rem} } /* ===== WHAT WE DO をサンプル構成に（2026-08-08） ===== */ .whatwedo{position:relative;background:#fff;display:block;min-height:auto} .whatwedo .section-inner{padding:9rem 0 7rem} /* 左端の縦組みラベル */ .wwd-vlabel{position:absolute;left:clamp(1rem,3.5vw,3.5rem);top:9rem; writing-mode:vertical-rl;font-size:.68rem;font-weight:700;letter-spacing:.34em; color:#111820;padding-top:1.6rem} .wwd-vlabel::before{content:"";position:absolute;top:0;left:50%;width:1px;height:1.1rem;background:#111820} /* 本文：短い行を積む */ .whatwedo .wwd-body{max-width:34rem;margin:0 auto} .whatwedo .wwd-body p{margin:0 0 2.4rem;font-size:15px;line-height:2.35;letter-spacing:.06em;color:#111820} .whatwedo .wwd-body p:last-child{margin-bottom:0} /* 下部のブランドワード */ .wwd-sign{margin-top:5.5rem;text-align:center} .wwd-word{margin:0;font-family:"Archivo Black","Arial Black","Helvetica Neue",sans-serif; font-weight:900;font-size:clamp(2.4rem,6.4vw,4.6rem);letter-spacing:.02em;line-height:1;color:#111820} .wwd-tag{margin:1.1rem 0 0;font-size:clamp(.95rem,1.5vw,1.2rem);font-weight:700;letter-spacing:.42em;color:#111820} @media (max-width:640px){ .whatwedo .section-inner{padding:6rem 0 4.5rem} .wwd-vlabel{top:6rem;font-size:.62rem} .whatwedo .wwd-body{max-width:none;padding-left:2.2rem} .whatwedo .wwd-body p{font-size:14px;line-height:2.2;margin-bottom:2rem} .wwd-sign{margin-top:4rem} .wwd-tag{letter-spacing:.3em} } /* WHAT WE DO: 文字の実幅で中央揃え＋英語コピー（2026-08-08） */ .whatwedo .wwd-body{width:max-content;max-width:min(100%,40rem);margin-left:auto;margin-right:auto} .wwd-word{font-size:clamp(2.1rem,5.6vw,4rem);letter-spacing:.01em} @media (max-width:640px){ .whatwedo .wwd-body{width:auto;max-width:none;padding-left:2.2rem} } /* ===== 縦組みラベルのアニメーション（2026-08-08） ===== */ .wwd-vlabel span{display:inline-block;opacity:0;transform:translateY(14px); transition:opacity .6s cubic-bezier(.19,1,.22,1),transform .6s cubic-bezier(.19,1,.22,1)} .wwd-vlabel.is-in span{opacity:1;transform:none} .wwd-vlabel span:nth-child(1){transition-delay:.30s} .wwd-vlabel span:nth-child(2){transition-delay:.36s} .wwd-vlabel span:nth-child(3){transition-delay:.42s} .wwd-vlabel span:nth-child(4){transition-delay:.48s} .wwd-vlabel span:nth-child(5){transition-delay:.54s} .wwd-vlabel span:nth-child(6){transition-delay:.60s} .wwd-vlabel span:nth-child(7){transition-delay:.66s} .wwd-vlabel span:nth-child(8){transition-delay:.72s} .wwd-vlabel span:nth-child(9){transition-delay:.78s} .wwd-vlabel span:nth-child(10){transition-delay:.84s} /* 上の縦線：登場時に伸び、その後ゆっくり脈打つ */ .wwd-vlabel::before{height:0;transition:height .7s cubic-bezier(.7,0,.3,1)} .wwd-vlabel.is-in::before{height:1.1rem;animation:wwdline 3.2s ease-in-out 1.2s infinite} @keyframes wwdline{0%,100%{height:1.1rem;opacity:1}50%{height:2rem;opacity:.55}} @media (prefers-reduced-motion:reduce){ .wwd-vlabel span{opacity:1;transform:none;transition:none} .wwd-vlabel::before{height:1.1rem;transition:none} .wwd-vlabel.is-in::before{animation:none} } /* ===== WHAT WE DO: モバイル余白＋ラベル常時アニメ（2026-08-08） ===== */ @media (max-width:640px){ /* 縦ラベルと本文が重ならないよう左に十分な余白を取る */ .wwd-vlabel{left:1rem;top:5.4rem} .whatwedo .wwd-body{padding-left:0;margin-left:3.6rem;margin-right:1.2rem} .whatwedo .section-inner{padding:5.5rem 0 4.5rem;width:calc(100% - 2rem)} .whatwedo .wwd-body p{font-size:14.5px;line-height:2.25;margin-bottom:2.2rem} .wwd-sign{margin-top:4.5rem;padding:0 1rem} } /* 縦ラベル：文字も常時ゆっくり上下に揺れ続ける */ .wwd-vlabel.is-in span{animation:wwdFloat 4.2s ease-in-out infinite} .wwd-vlabel.is-in span:nth-child(1){animation-delay:0s} .wwd-vlabel.is-in span:nth-child(2){animation-delay:.12s} .wwd-vlabel.is-in span:nth-child(3){animation-delay:.24s} .wwd-vlabel.is-in span:nth-child(4){animation-delay:.36s} .wwd-vlabel.is-in span:nth-child(5){animation-delay:.48s} .wwd-vlabel.is-in span:nth-child(6){animation-delay:.60s} .wwd-vlabel.is-in span:nth-child(7){animation-delay:.72s} .wwd-vlabel.is-in span:nth-child(8){animation-delay:.84s} .wwd-vlabel.is-in span:nth-child(9){animation-delay:.96s} .wwd-vlabel.is-in span:nth-child(10){animation-delay:1.08s} @keyframes wwdFloat{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(4px);opacity:.55}} @media (prefers-reduced-motion:reduce){.wwd-vlabel.is-in span{animation:none}} /* ===== 縦組みラベル: 登場アニメを繰り返す（2026-08-08） ===== */ /* 1サイクル = 線が伸びる → 文字が1字ずつ立ち上がる → 少し留まって消える */ .wwd-vlabel.is-in span{ opacity:0;transform:translateY(14px);transition:none; animation:wwdRise 7s cubic-bezier(.19,1,.22,1) infinite} .wwd-vlabel.is-in span:nth-child(1){animation-delay:.30s} .wwd-vlabel.is-in span:nth-child(2){animation-delay:.38s} .wwd-vlabel.is-in span:nth-child(3){animation-delay:.46s} .wwd-vlabel.is-in span:nth-child(4){animation-delay:.54s} .wwd-vlabel.is-in span:nth-child(5){animation-delay:.62s} .wwd-vlabel.is-in span:nth-child(6){animation-delay:.70s} .wwd-vlabel.is-in span:nth-child(7){animation-delay:.78s} .wwd-vlabel.is-in span:nth-child(8){animation-delay:.86s} .wwd-vlabel.is-in span:nth-child(9){animation-delay:.94s} .wwd-vlabel.is-in span:nth-child(10){animation-delay:1.02s} @keyframes wwdRise{ 0% {opacity:0;transform:translateY(14px)} 10% {opacity:1;transform:translateY(0)} 72% {opacity:1;transform:translateY(0)} 86% {opacity:0;transform:translateY(-8px)} 100% {opacity:0;transform:translateY(14px)} } /* 縦線も同じ周期で伸びては消える */ .wwd-vlabel.is-in::before{height:1.1rem;transition:none; animation:wwdLineLoop 7s cubic-bezier(.7,0,.3,1) infinite} @keyframes wwdLineLoop{ 0% {height:0;opacity:1} 8% {height:1.1rem;opacity:1} 72% {height:1.1rem;opacity:1} 88% {height:0;opacity:0} 100% {height:0;opacity:0} } @media (prefers-reduced-motion:reduce){ .wwd-vlabel.is-in span{animation:none;opacity:1;transform:none} .wwd-vlabel.is-in::before{animation:none;height:1.1rem;opacity:1} } /* ===== 回転リングを断ち切らず、画面外へ自然にはみ出させる（2026-08-08） ===== */ .belief-orbit-sticky{overflow:visible!important} .belief-orbit-section{overflow:visible} .site-shell{overflow-x:clip} /* リングを大きくし、左上へ抜けるように配置 */ .belief-ring{width:52rem;height:52rem;top:-14rem;left:-17rem} @media (max-width:920px){.belief-ring{width:38rem;height:38rem;top:-10rem;left:-14rem}} @media (max-width:640px){.belief-ring{width:30rem;height:30rem;top:-8rem;left:-13rem}} /* 回転リングを一回り小さく（2026-08-08） */ .belief-ring{width:44rem;height:44rem;top:-11rem;left:-14rem} @media (max-width:920px){.belief-ring{width:33rem;height:33rem;top:-8.5rem;left:-12rem}} @media (max-width:640px){.belief-ring{width:26rem;height:26rem;top:-6.5rem;left:-11rem}} /* ===== OUR PURPOSE に Join Our Story のコピーとCTAを統合（2026-08-08） ===== */ .purpose-copy p{margin:0;color:rgba(255,255,255,.92);font-size:16px;line-height:1.95;letter-spacing:.05em} .purpose-copy p + p{margin-top:1.5rem} .purpose-cta{display:inline-block;margin-top:2.4rem;padding:1.05rem 2.4rem;border-radius:999px; background:#fff;color:#111820;font-size:.95rem;font-weight:800;text-decoration:none; transition:background .2s,color .2s,transform .2s} .purpose-cta:hover{background:var(--blue);color:#fff;transform:translateY(-2px)} @media (max-width:640px){ .purpose-copy p{font-size:15px;line-height:1.9} .purpose-cta{margin-top:2rem;width:100%;text-align:center} } /* ===== 各セクションの英字ラベルを「伝わらない〜」と同じ書体設定に統一（2026-08-08） ===== 基準: font-weight:700 / letter-spacing:.3em */ .section-label,.section-kicker,.eyebrow,.wwd-vlabel{ font-weight:700!important;letter-spacing:.3em!important} .media-cat,.co-point h3{letter-spacing:.12em} @media (max-width:640px){ .section-label,.section-kicker,.eyebrow{letter-spacing:.22em!important} } /* ===== 見出しの行バランス調整＋ナビ（2026-08-08） ===== */ /* 「あなたの可能性が、会社の未来をつくる」を2行に収める */ .belief-orbit-inner{grid-template-columns:minmax(0,1fr) minmax(30rem,1.05fr)} .belief-orbit-copy h2{font-size:clamp(1.7rem,2.9vw,2.75rem);line-height:1.45;white-space:nowrap} @media (max-width:920px){ .belief-orbit-inner{grid-template-columns:1fr} .belief-orbit-copy h2{font-size:clamp(1.5rem,5.4vw,2.2rem);white-space:nowrap} } @media (max-width:640px){ .belief-orbit-copy h2{font-size:clamp(1.25rem,6.2vw,1.75rem);white-space:normal} } /* OUR PURPOSE: 左右カラムの上端を揃える（2026-08-08） */ .statement-grid{align-items:start!important} .statement-grid>div:first-child{padding-top:0} .statement-grid .section-kicker{margin-top:0} .purpose-copy>p:first-child{margin-top:0} @media (max-width:920px){.statement-grid{align-items:start!important}} /* ===== 主要セクションの見出しサイズを統一（2026-08-08） 基準＝「あなたの可能性が、会社の未来をつくる」 clamp(1.7rem,2.9vw,2.75rem) ===== */ .news-sec .section-heading h2, .statement h2{font-size:clamp(1.7rem,2.9vw,2.75rem)!important;line-height:1.45!important} @media (max-width:920px){ .news-sec .section-heading h2, .statement h2{font-size:clamp(1.5rem,5.4vw,2.2rem)!important} } @media (max-width:640px){ .news-sec .section-heading h2, .statement h2{font-size:clamp(1.25rem,6.2vw,1.75rem)!important} } /* OUR PURPOSE: 見出しと本文の間隔を詰める（2026-08-08） */ .statement-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1fr)!important;gap:3rem!important} @media (max-width:920px){ .statement-grid{grid-template-columns:1fr!important;gap:1.8rem!important} } /* OUR PURPOSE: 左カラムを見出しの幅ぴったりにして余白を解消（2026-08-08） */ .statement-grid{grid-template-columns:max-content minmax(0,1fr)!important;gap:3.2rem!important} @media (max-width:920px){ .statement-grid{grid-template-columns:1fr!important;gap:1.6rem!important} } /* WHAT WE DO: モバイルの本文を小さく（2026-08-08） */ @media (max-width:640px){ .whatwedo .wwd-body p{font-size:12.5px!important;line-height:2.1!important; letter-spacing:.04em;margin-bottom:1.8rem!important} .whatwedo .wwd-body{margin-left:3.2rem;margin-right:1rem} .wwd-word{font-size:clamp(1.7rem,8.4vw,2.4rem)} .wwd-tag{font-size:.8rem;letter-spacing:.2em} } @media (max-width:390px){ .whatwedo .wwd-body p{font-size:12px!important} } /* WHAT WE DO: モバイルでも本文を画面中央に（2026-08-08） */ @media (max-width:640px){ .whatwedo .wwd-body{width:max-content!important;max-width:calc(100% - 5rem)!important; margin-left:auto!important;margin-right:auto!important;padding-left:0!important} } /* WHAT WE BELIEVE: 3つの円をもう少し下へ（2026-08-08） */ .belief-orbit-stage{padding-top:5rem} @media (max-width:920px){.belief-orbit-stage{padding-top:3rem}} @media (max-width:640px){.belief-orbit-stage{padding-top:2rem}} /* 回転リングをさらに下へ（2026-08-08） */ .belief-ring{top:-4rem} @media (max-width:920px){.belief-ring{top:-2.5rem}} @media (max-width:640px){.belief-ring{top:-1.5rem}} /* ===== モバイル: FV背景写真を顔が入る位置にトリミング（2026-08-08） ===== */ @media (max-width:640px){ .zth-bg-img{background-size:cover} /* 1: 夜のオフィス（立っている人物が右寄り） */ .zth-bg .zth-bg-img:nth-child(1){background-position:72% 40%} /* 2: 面談カット（顔が右上） */ .zth-bg .zth-bg-img:nth-child(2){background-position:74% 28%} /* 3: 面談カット */ .zth-bg .zth-bg-img:nth-child(3){background-position:66% 30%} /* 4-5: 集合写真（顔は上寄り） */ .zth-bg .zth-bg-img:nth-child(4){background-position:center 32%} .zth-bg .zth-bg-img:nth-child(5){background-position:center 30%} /* 6: 集合カット */ .zth-bg .zth-bg-img:nth-child(6){background-position:center 28%} } /* ===== TOPICS（読み物）と INFORMATION（お知らせ）を分離（2026-08-08） ===== */ .media-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .info-sec{background:#fff} .info-list{margin-top:2.6rem;border-top:1px solid var(--line)} .info-row{display:grid;grid-template-columns:8rem 1fr;gap:1.4rem;align-items:baseline; padding:1.35rem 0;border-bottom:1px solid var(--line);text-decoration:none;transition:color .18s} .info-row time{font-size:.85rem;color:var(--muted);letter-spacing:.06em} .info-row span{font-size:1rem;font-weight:600;color:#111820;line-height:1.7} .info-row:hover span{color:var(--blue)} @media (max-width:640px){ .info-row{grid-template-columns:1fr;gap:.35rem;padding:1.2rem 0} .info-row time{font-size:.78rem} .info-row span{font-size:.92rem} } /* INFORMATION: 見出しを控えめに（2026-08-08） */ .info-sec .section-heading h2{font-size:clamp(1.15rem,1.9vw,1.6rem)!important;line-height:1.5!important} .info-sec .section-inner{padding-top:3.5rem} .info-sec .info-list{margin-top:1.8rem} @media (max-width:640px){ .info-sec .section-heading h2{font-size:1.1rem!important} .info-sec .section-inner{padding-top:3rem} } /* INFORMATION: 全体をコンパクトに（2026-08-08） */ .info-sec .section-inner{padding-top:3rem;padding-bottom:3.5rem} .info-sec .info-list{margin-top:1.4rem} .info-row{grid-template-columns:6.5rem 1fr;gap:1rem;padding:.95rem 0} .info-row time{font-size:.76rem} .info-row span{font-size:.9rem;font-weight:500;line-height:1.6} @media (max-width:640px){ .info-sec .section-inner{padding-top:2.6rem;padding-bottom:3rem} .info-row{padding:.85rem 0;gap:.2rem} .info-row time{font-size:.72rem} .info-row span{font-size:.85rem} } /* ===== イントロアニメーション（2026-08-08） ===== */ body.intro-lock{overflow:hidden} .intro{position:fixed;inset:0;z-index:200;background:#fff;display:flex;align-items:center;justify-content:center; pointer-events:none} .intro-inner{text-align:center;position:relative;z-index:1} .intro-logo{display:block;font-size:clamp(.72rem,1.4vw,.86rem);font-weight:700;letter-spacing:.34em;color:#111820; opacity:0;transform:translateY(10px);animation:introLogo 1.1s cubic-bezier(.19,1,.22,1) .15s forwards} .intro-logo em{font-style:normal;color:var(--blue);font-size:1.5em;font-weight:900;letter-spacing:0} .intro-word{display:block;margin-top:1.1rem;font-family:"Archivo Black","Arial Black",sans-serif; font-size:clamp(2.2rem,7vw,5rem);line-height:1;letter-spacing:-.02em;white-space:nowrap} .intro-word i{display:inline-block;font-style:normal;opacity:0;transform:translateY(24px); color:transparent;-webkit-background-clip:text;background-clip:text;background-size:200% 200%; animation:introRise .9s cubic-bezier(.19,1,.22,1) forwards} .intro-word i:nth-child(1){background-image:linear-gradient(140deg,#ff3b1f,#e6003a,#ff7a00);animation-delay:.45s} .intro-word i:nth-child(2){background-image:linear-gradient(220deg,#7a00c9,#ff2fa0,#c400ff);animation-delay:.60s;margin:0 .28em} .intro-word i:nth-child(3){background-image:linear-gradient(160deg,#00b3ff,#4a00e0,#0077ff);animation-delay:.75s} @keyframes introLogo{to{opacity:1;transform:none}} @keyframes introRise{to{opacity:1;transform:none}} /* 幕が上へ開く */ .intro-curtain{position:absolute;inset:0;background:#fff;transform-origin:top; animation:introOpen .9s cubic-bezier(.7,0,.25,1) 2.1s forwards} @keyframes introOpen{to{transform:scaleY(0)}} .intro.is-done{opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s} /* イントロ中はFVの文字を伏せ、明けてから立ち上げる */ body.intro-lock .zth-wall,body.intro-lock .zth-copy{opacity:0} @media (prefers-reduced-motion:reduce){ .intro{display:none} body.intro-lock{overflow:auto} body.intro-lock .zth-wall,body.intro-lock .zth-copy{opacity:1} } /* ===== イントロ文字をFVと同じ太さに（2026-08-09） ===== Archivo BlackはiPhoneに無く、太さ指定なしだと標準ウェイトへ落ちて細く見えていた。 FVの .zth-word と同じ font-weight:900 ＋ 同じフォールバック順に統一する。 */ .intro-word{font-family:"Arial Black","Helvetica Neue",sans-serif;font-weight:900;letter-spacing:-.03em} .intro-word i{font-weight:900;-webkit-text-fill-color:transparent} @media (max-width:640px){ /* 横1行だと390px幅で見切れるため、FVと同じ縦3行に積む */ .intro-word{display:flex;flex-direction:column;align-items:center;gap:.02em; font-size:clamp(3rem,20vw,5.5rem);line-height:.98} .intro-word i:nth-child(2){margin:0} } /* ===== FV: 動画×写真の交互切り替え（2026-08-09） ===== 動画は常に再生し続け、その上に写真をかぶせて出し入れする。 写真が消えたとき動画は止まっていないので「続き」から見える。 */ .zth-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:center 38%;pointer-events:none} .zth-bg-img{transition:opacity .7s ease} @media (max-width:640px){.zth-video{object-position:center 30%}} @media (prefers-reduced-motion:reduce){.zth-video{display:none}} /* ===== FV写真の表示位置を再指定（2026-08-09） ===== .zth-bg の先頭に