/* ============================================================ 株式会社アモーレながすぎ 採用サイト デザインカンプ v3 方向：求人媒体メインビジュアル文法（モノクロ人物 × 極彩色 × 極太ゴシック） Design tokens — 実装時はこの値をそのまま使ってください ============================================================ */ :root{ /* --- Color --- */ --ink: #141414; /* 黒帯・見出し・袋文字の縁 */ --ink-80: #3B3733; --ink-55: #6E6862; --white: #FFFFFF; --paper: #F7F3EA; /* 地色（わずかに暖色） */ --paper-2: #EDE6D8; --red: #E8341F; /* メイン。面・大きな文字 */ --red-d: #B8210F; /* 小さな文字・ボタン地（AA確保） */ --yellow: #FFC61E; /* ハイライト面。必ず黒文字と組む */ --lime: #9ED13A; --cyan: #23BFD4; --orange: #F5821F; /* --- Brand colors（識別ドット） --- */ --b-hachiban:#D4322A; --b-komeda:#7A5230; --green:#00B34A; /* ヘッダー帯 */ --green-d:#009A40; --green-deep:#0B5D34; /* 沿革などの濃い緑 */ /* --- Type --- */ --display:"Dela Gothic One","Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif; --brush:"Reggae One","Dela Gothic One",sans-serif; --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo,sans-serif; --latin:"Jost","Helvetica Neue",Arial,sans-serif; /* --- Space --- */ --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:88px; --s8:112px; --wrap:1180px; --ease:cubic-bezier(.22,.61,.36,1); --header-h:72px; /* --- ペイント飛沫のマスク形状（色は background で差し替え） --- */ --splat-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='%23000'%3E%3Cpath d='M100 16c12 0 18 14 28 20 12 7 28 0 34 12 6 12-6 22-4 36 2 14 18 22 14 36-4 14-22 12-32 22-10 10-8 28-22 32-14 4-22-10-36-12-14-2-26 10-36 0-10-10-2-24-8-36-6-12-22-16-20-30 2-14 18-16 24-28 6-12 0-28 12-34 12-6 22 6 36 4 6-1 6-22 10-22z'/%3E%3Cellipse cx='30' cy='30' rx='11' ry='8' transform='rotate(-30 30 30)'/%3E%3Cellipse cx='172' cy='44' rx='10' ry='7' transform='rotate(25 172 44)'/%3E%3Ccircle cx='182' cy='124' r='6'/%3E%3Ccircle cx='16' cy='108' r='7.5'/%3E%3Cellipse cx='46' cy='180' rx='9' ry='12'/%3E%3Ccircle cx='140' cy='188' r='6.5'/%3E%3Ccircle cx='190' cy='172' r='4.5'/%3E%3Ccircle cx='8' cy='152' r='4'/%3E%3Ccircle cx='92' cy='4' r='4.5'/%3E%3Ccircle cx='156' cy='10' r='3.5'/%3E%3Ccircle cx='6' cy='62' r='3.5'/%3E%3Ccircle cx='196' cy='88' r='3'/%3E%3Ccircle cx='70' cy='196' r='3.5'/%3E%3Ccircle cx='120' cy='196' r='2.5'/%3E%3Ccircle cx='44' cy='6' r='3'/%3E%3C/g%3E%3C/svg%3E"); --splat-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 120'%3E%3Cg fill='%23000'%3E%3Cpath d='M18 62c8-18 30-16 46-24 15-8 24-24 42-22 17 2 22 20 38 26 16 6 36-4 48 8 12 12 2 28 6 42 3 12-12 22-26 18-16-5-24-20-42-20-18 0-30 16-48 16-18 0-30-14-46-18-14-4-22-12-18-26z'/%3E%3Cellipse cx='14' cy='16' rx='9' ry='6' transform='rotate(-20 14 16)'/%3E%3Ccircle cx='228' cy='20' r='7'/%3E%3Ccircle cx='116' cy='6' r='5.5'/%3E%3Cellipse cx='234' cy='96' rx='6' ry='8'/%3E%3Ccircle cx='6' cy='94' r='5'/%3E%3Ccircle cx='180' cy='114' r='6'/%3E%3Ccircle cx='60' cy='114' r='5'/%3E%3Ccircle cx='198' cy='4' r='3.5'/%3E%3Ccircle cx='84' cy='2' r='3'/%3E%3Ccircle cx='140' cy='118' r='3.5'/%3E%3C/g%3E%3C/svg%3E"); /* 切り抜き人物のシルエット（カンプ用。実装時は切り抜きPNGに差し替え） */ --silhouette:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300'%3E%3Cg fill='%23000'%3E%3Cpath d='M100 16c22 0 37 18 37 42s-15 44-37 44-37-20-37-44 15-42 37-42z'/%3E%3Cpath d='M100 110c31 0 54 11 66 32 10 18 14 43 16 74 2 33 4 62 6 84H12c2-22 4-51 6-84 2-31 6-56 16-74 12-21 35-32 66-32z'/%3E%3C/g%3E%3C/svg%3E"); } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.85; font-feature-settings:"palt"; letter-spacing:.02em; overflow-x:hidden; } img,svg,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} ul,ol{margin:0;padding:0;list-style:none} h1,h2,h3,h4,p{margin:0} :focus-visible{outline:3px solid var(--red-d); outline-offset:3px} /* ---------- Layout ---------- */ .wrap{width:min(100% - 40px, var(--wrap)); margin-inline:auto; position:relative; z-index:3} .wrap-w{width:min(100% - 32px, 1400px); margin-inline:auto; position:relative; z-index:3} section{position:relative} section[id]{scroll-margin-top:calc(var(--header-h) + 12px)} @media (max-width:760px){ section[id]{scroll-margin-top:96px} } .sec{padding:var(--s8) 0; position:relative; overflow:hidden} .sec--dark{background:var(--ink); color:var(--white)} .sec--yellow{background:var(--yellow)} .sec--paper2{background:var(--paper-2)} /* ---------- 共通パーツ ---------- */ /* 黒帯の見出しラベル */ .tape{ display:inline-block; background:var(--ink); color:var(--white); font-family:var(--sans); font-weight:900; font-size:clamp(15px,2vw,21px); line-height:1.5; padding:8px 22px; letter-spacing:.06em; transform:rotate(-1.2deg); } .tape--red{background:var(--red)} .tape--yellow{background:var(--yellow); color:var(--ink)} /* 袋文字（白字＋黒フチ） */ .stroke{ color:var(--white); -webkit-text-stroke:7px var(--ink); paint-order:stroke fill; } @supports not (paint-order: stroke){ .stroke{-webkit-text-stroke:0; text-shadow: 3px 0 0 var(--ink),-3px 0 0 var(--ink),0 3px 0 var(--ink),0 -3px 0 var(--ink), 3px 3px 0 var(--ink),-3px 3px 0 var(--ink),3px -3px 0 var(--ink),-3px -3px 0 var(--ink);} } /* セクション見出し */ .sec-head{margin-bottom:var(--s6); position:relative; z-index:3} .sec-en{font-family:var(--latin); font-size:12px; letter-spacing:.3em; color:var(--red-d); font-weight:600; margin-bottom:12px} .sec--dark .sec-en{color:var(--yellow)} .sec-title{ font-family:var(--display); font-size:clamp(26px,4.6vw,50px); line-height:1.42; letter-spacing:.01em; } .sec-title em{font-style:normal; color:var(--red)} .sec--dark .sec-title em{color:var(--yellow)} .sec-lead{margin-top:var(--s3); max-width:44em; font-size:14.5px; line-height:2.05; color:var(--ink-80); font-weight:500} .sec--dark .sec-lead{color:#D6CFC7} .sec--yellow .sec-lead{color:#4A3808} /* マーカー（黄色い蛍光ペン） */ .mk{background:linear-gradient(transparent 58%, var(--yellow) 58%, var(--yellow) 94%, transparent 94%); font-weight:700} .sec--yellow .mk{background:linear-gradient(transparent 58%, var(--white) 58%, var(--white) 94%, transparent 94%)} /* ペイント飛沫 */ .splat{position:absolute; pointer-events:none; z-index:0; -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat; background:var(--c); opacity:.85} /* モノクロ写真の指定（参考事例と同じ処理） */ .mono{filter:grayscale(1) contrast(1.08) brightness(1.02)} /* 写真プレースホルダ */ .ph{ position:relative; overflow:hidden; background:linear-gradient(145deg,#D9D4CC 0%,#A8A29A 55%,#7C7770 100%); display:flex; align-items:flex-end; } .ph::after{content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.16) 0 2px, transparent 2px 9px)} .ph__note{ position:relative; z-index:2; margin:auto var(--s2) var(--s2); font-size:10.5px; line-height:1.65; letter-spacing:.04em; color:var(--ink); background:rgba(255,255,255,.93); border-left:3px solid var(--red); padding:6px 10px; max-width:90%; font-weight:500; } .ph__note b{display:block; font-size:9.5px; letter-spacing:.16em; color:var(--red-d); font-family:var(--latin); font-weight:600} .ph--portrait{aspect-ratio:3/4} .ph--cut{aspect-ratio:3/4.6} /* ボタン */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 34px; background:var(--red-d); color:#fff; font-family:var(--sans); font-weight:900; font-size:15px; letter-spacing:.03em; border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink); transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .25s var(--ease); white-space:nowrap; } .btn:hover{transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); background:var(--red)} .btn--sm{padding:11px 22px; font-size:13px; border-width:2px; box-shadow:3px 3px 0 var(--ink)} .btn--sm:hover{box-shadow:1px 1px 0 var(--ink)} .btn--lg{padding:24px 60px; font-family:var(--display); font-weight:400; font-size:clamp(24px,2.6vw,30px)} .btn--yellow{background:var(--yellow); color:var(--ink)} .btn--yellow:hover{background:#FFD75C} .btn--white{background:var(--white); color:var(--ink)} .btn--white:hover{background:var(--yellow)} .btn__arw{width:18px; height:9px; flex:none} /* 六角形バッジ */ .hex{ clip-path:polygon(50% 0%, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%); background:var(--orange); color:var(--white); text-align:center; padding:22px 10px; display:grid; place-content:center; min-height:132px; } .hex small{display:block; font-size:12px; font-weight:700; letter-spacing:.04em; line-height:1.5} .hex b{display:block; font-family:var(--display); font-size:clamp(24px,3.4vw,34px); line-height:1.15; letter-spacing:.01em} .hex b i{font-style:normal; font-family:var(--sans); font-weight:900; font-size:.46em; margin-left:3px} .hex--red{background:var(--red)} .hex--ink{background:var(--ink)} /* ============================================================ Header ============================================================ */ /* ヒーローがモノクロ写真の上に乗るため、未スクロール時も暗いスクリムを敷いて白文字を成立させる */ .hd{position:fixed; inset:0 0 auto 0; z-index:100; height:var(--header-h); display:flex; align-items:center; background:var(--green); border-bottom:3px solid var(--ink); transition:background .35s var(--ease), height .35s var(--ease)} .hd.is-stuck{background:var(--green-d); height:62px} .hd__inner{width:min(100% - 28px,1400px); margin-inline:auto; display:flex; align-items:center; gap:var(--s4)} .logo{display:flex; align-items:center; gap:11px; flex:none} .logo__mark{background:var(--white); display:grid; place-items:center; padding:6px 9px; flex:none; border:2px solid var(--ink)} .logo__mark img{display:block; height:26px; width:auto} .logo__txt{line-height:1.2} .logo__txt b{display:block; font-family:var(--display); font-size:15px; letter-spacing:.03em; color:var(--white)} .logo__txt span{display:block; font-family:var(--latin); font-size:13px; letter-spacing:.2em; color:var(--yellow); font-weight:700; margin-top:2px} .gnav{margin-left:auto; display:flex; align-items:center; gap:var(--s3)} .gnav a{font-size:13px; font-weight:700; letter-spacing:.04em; white-space:nowrap; color:var(--white); padding:4px 2px; border-bottom:3px solid transparent; transition:.25s var(--ease)} .gnav a:hover{border-bottom-color:var(--yellow); color:var(--yellow)} .gnav .btn{color:#fff} .burger{display:none; width:46px; height:46px; margin-left:auto; position:relative; flex:none; background:var(--ink)} .burger span{position:absolute; left:12px; width:22px; height:3px; background:var(--yellow); transition:.3s var(--ease)} .burger span:nth-child(1){top:15px} .burger span:nth-child(2){top:22px} .burger span:nth-child(3){top:29px} .is-open .burger span:nth-child(1){top:22px; transform:rotate(45deg)} .is-open .burger span:nth-child(2){opacity:0} .is-open .burger span:nth-child(3){top:22px; transform:rotate(-45deg)} .drawer{position:fixed; inset:0; z-index:99; background:var(--ink); color:#fff; padding:calc(var(--header-h) + 20px) 28px 40px; transform:translateY(-100%); transition:transform .5s var(--ease); overflow-y:auto; display:flex; flex-direction:column; gap:6px} .is-open .drawer{transform:translateY(0)} .drawer a{font-family:var(--sans); font-weight:900; font-size:21px; padding:11px 0; border-bottom:2px solid #2E2A26} .drawer a span{font-family:var(--latin); font-size:10px; letter-spacing:.2em; color:var(--yellow); display:block; font-weight:600} /* ============================================================ HERO ============================================================ */ .hero{position:relative; overflow:hidden; background:var(--paper); padding-top:var(--header-h); padding-bottom:var(--s6)} .hero__stage{position:relative; min-height:0} .hero__media{position:absolute; inset:0; z-index:0; overflow:hidden} .hero__media::before{content:""; position:absolute; inset:0; background:linear-gradient(150deg,#CFC9C1 0%,#9C968E 50%,#6E6862 100%)} .hero__video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover} /* 斜めのカラー帯 */ .hero__bands{position:absolute; inset:-14% -10%; z-index:1; transform:skewX(-14deg); display:flex; gap:3.4%} .hero__bands i{display:block; flex:1; max-width:88px} .hero__bands i:nth-child(1){background:var(--red); opacity:.94} .hero__bands i:nth-child(2){background:var(--yellow); opacity:.92; margin-top:14%} .hero__bands i:nth-child(3){background:var(--lime); opacity:.9; margin-top:-8%} .hero__bands i:nth-child(4){background:var(--cyan); opacity:.85; margin-top:22%} .hero__bands i:nth-child(5){background:var(--orange); opacity:.9; margin-top:-14%} .hero__veil{position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, rgba(20,20,20,.28) 0%, rgba(20,20,20,.06) 34%, rgba(20,20,20,.55) 100%)} /* 背景に敷くブランドロゴ（カンプでは文字で代用。実装時は正規ロゴ画像に差し替え） */ .hero__logos{position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden} .hlogo{ position:absolute; font-family:var(--display); font-weight:400; font-synthesis:none; font-feature-settings:normal; line-height:.9; letter-spacing:.02em; color:rgba(255,255,255,.42); -webkit-text-stroke:2px rgba(20,20,20,.22); paint-order:stroke fill; } .hlogo--1{left:2%; top:13%; font-size:clamp(44px,7.6vw,108px); transform:rotate(-8deg)} .hlogo--2{right:2%; bottom:17%; font-size:clamp(42px,7vw,100px); transform:rotate(7deg); text-align:right} /* 実装時はこの2つを に置き換えるだけ */ .hero__logonote{ position:absolute; right:16px; top:calc(var(--header-h) + 14px); z-index:6; max-width:290px; font-size:10.5px; line-height:1.65; font-weight:500; color:var(--ink); background:rgba(255,255,255,.94); border-left:3px solid var(--red); padding:6px 10px; } .hero__logonote b{display:block; font-family:var(--latin); font-size:9.5px; font-weight:600; letter-spacing:.16em; color:var(--red-d)} /* 切り抜き人物 */ .hero__cast{position:absolute; inset:auto 0 0 0; z-index:4; display:flex; align-items:flex-end; justify-content:center; gap:min(3vw,40px); padding:0 20px} .hero__cast .cut{width:min(25vw,290px); position:relative} .hero__cast .cut:nth-child(2){width:min(28vw,320px); z-index:2} /* カンプでは人物シルエットでマスクし、切り抜き素材が入る想定を示している */ .hero__cast .ph{-webkit-mask:var(--silhouette) center bottom/contain no-repeat; mask:var(--silhouette) center bottom/contain no-repeat} .hero__cast .ph .ph__note{display:none} .cut__note{ position:absolute; left:0; bottom:10px; z-index:5; font-size:10.5px; line-height:1.6; letter-spacing:.03em; color:var(--ink); background:rgba(255,255,255,.94); border-left:3px solid var(--red); padding:6px 9px; font-weight:500; } .cut__note b{display:block; font-size:9.5px; letter-spacing:.16em; color:var(--red-d); font-family:var(--latin); font-weight:600} /* コピー */ .hero__copy{position:relative; z-index:20; text-align:center; padding:clamp(110px,10.5vw,190px) 16px clamp(56px,6vw,96px)} .hero__kicker{position:relative; z-index:21; display:inline-flex; align-items:center; gap:clamp(6px,1.4vw,20px); margin-bottom:var(--s3); flex-wrap:wrap; justify-content:center} .hero__kicker span{position:relative; z-index:1; color:var(--ink); font-family:var(--display); font-weight:400; font-synthesis:none; font-feature-settings:normal; font-size:clamp(19px,3.1vw,38px); padding:20px 34px; letter-spacing:.03em} .hero__kicker span::before{content:""; position:absolute; inset:-16% -12%; z-index:-1; -webkit-mask:var(--splat-b) center/100% 100% no-repeat; mask:var(--splat-b) center/100% 100% no-repeat; background:var(--yellow)} .hero__kicker span:last-of-type::before{background:var(--lime); -webkit-mask-image:var(--splat-a); mask-image:var(--splat-a)} .hero__kicker em{font-style:normal; font-family:var(--display); font-size:clamp(58px,10.5vw,140px); line-height:.86; color:var(--red); -webkit-text-stroke:9px var(--white); paint-order:stroke fill; letter-spacing:.01em; filter:drop-shadow(0 3px 0 rgba(20,20,20,.35))} .hero h1{font-family:var(--display); font-size:clamp(28px,6.6vw,84px); line-height:1.3; letter-spacing:-.005em} .hero h1 .l{display:block} .hero h1 em{font-style:normal; color:var(--red); -webkit-text-stroke:7px var(--ink); paint-order:stroke fill} .hero h1 .y{color:var(--yellow); -webkit-text-stroke:7px var(--ink); paint-order:stroke fill} .hero__band{ margin-top:var(--s4); background:var(--red); color:#fff; display:inline-block; font-family:var(--display); font-weight:400; font-synthesis:none; font-feature-settings:normal; font-size:clamp(15px,2vw,26px); line-height:1.35; padding:11px 20px; letter-spacing:.01em; transform:rotate(-1.4deg); border:4px solid var(--ink); box-shadow:9px 9px 0 var(--ink); -webkit-text-stroke:0; } /* 六角バッジの列 */ .hero__hex{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2); margin-top:var(--s5); position:relative; z-index:9} /* ============================================================ Brand logo bar（ヒーロー直下） ロゴ許諾取得済み。実装時は .blogo を に置き換える ============================================================ */ .logobar{background:var(--ink); color:var(--white); padding:var(--s5) 0; overflow:hidden} .logobar__in{display:grid; grid-template-columns:auto 1fr; gap:var(--s5); align-items:center} .logobar__l{ font-family:var(--sans); font-weight:900; font-size:13px; line-height:1.55; letter-spacing:.06em; border-right:3px solid var(--yellow); padding-right:var(--s3); white-space:nowrap; } .logobar__set{display:flex; align-items:center; gap:clamp(24px,5vw,72px); flex-wrap:wrap} .blogo{ font-family:var(--display); font-weight:400; font-synthesis:none; font-feature-settings:normal; font-size:clamp(26px,4.4vw,52px); line-height:1.1; letter-spacing:.03em; color:var(--white); } .logobar__note{grid-column:2; font-size:11px; font-weight:500; color:#8E8880; letter-spacing:.03em} /* ============================================================ Reveal ============================================================ */ .rv{opacity:0; transform:translateX(-52px); transition:opacity .75s var(--ease), transform .75s var(--ease)} .rv-x{transform:translateX(52px)} /* 右から入る */ .rv-u{transform:translateY(28px)} /* 下から入る */ .rv.is-in{opacity:1; transform:none} .rv-d1{transition-delay:.08s} .rv-d2{transition-delay:.16s} .rv-d3{transition-delay:.24s} .rv-d4{transition-delay:.32s} .rv-d5{transition-delay:.4s} .vhead--banner{display:block; margin-bottom:0} .vhead--banner .sec-head{margin-bottom:var(--s3)} .visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} .vbanner{margin:0 0 var(--s5); border:4px solid var(--ink); box-shadow:12px 12px 0 var(--ink); background:var(--white); overflow:hidden} .vbanner img{display:block; width:100%; height:auto} @media (max-width:640px){ .vbanner{box-shadow:6px 6px 0 var(--ink); border-width:3px} } /* ---- 大正／令和の写真カード：飛び込みアニメーション ---- */ .era.rv{opacity:1; transform:none} .era .era__i{opacity:0} .era.is-in .era__i:nth-child(1){animation:eraSlamL .85s cubic-bezier(.18,1.35,.3,1) .05s both} .era.is-in .era__i:nth-child(2){animation:eraSlamR .85s cubic-bezier(.18,1.35,.3,1) .35s both} .era .era__tag{opacity:0} .era.is-in .era__i:nth-child(1) .era__tag{animation:tagPop .5s cubic-bezier(.2,1.6,.35,1) .75s both} .era.is-in .era__i:nth-child(2) .era__tag{animation:tagPop .5s cubic-bezier(.2,1.6,.35,1) 1.05s both} @keyframes eraSlamL{0%{opacity:0; transform:translateX(-46vw) rotate(-14deg) scale(.7)} 70%{opacity:1; transform:translateX(10px) rotate(2deg) scale(1.03)} 100%{opacity:1; transform:none}} @keyframes eraSlamR{0%{opacity:0; transform:translateX(46vw) rotate(14deg) scale(.7)} 70%{opacity:1; transform:translateX(-10px) rotate(-2deg) scale(1.03)} 100%{opacity:1; transform:none}} @keyframes tagPop{from{opacity:0; transform:scale(.4) rotate(-10deg)} to{opacity:1; transform:none}} /* VALUESバナーも同じ勢いで */ .vbanner.rv{opacity:1; transform:none} .vbanner{opacity:0} .vbanner.is-in{animation:bannerSlam .9s cubic-bezier(.18,1.35,.3,1) both} @keyframes bannerSlam{0%{opacity:0; transform:translateY(90px) scale(.82) rotate(-2deg)} 65%{opacity:1; transform:translateY(-8px) scale(1.02) rotate(.5deg)} 100%{opacity:1; transform:none}} @media (prefers-reduced-motion:reduce){ .era .era__i,.era .era__tag,.vbanner{opacity:1; animation:none !important} } /* ---- ジャンプするスタッフの切り抜き（散りばめ） ---- */ .jump img{display:block; width:100%; height:auto; filter:drop-shadow(0 14px 22px rgba(20,20,20,.28))} :root{--hj:clamp(110px,12vw,210px)} .hjump{position:absolute; z-index:5; bottom:2%; pointer-events:none; width:var(--hj)} .hjump--l{left:clamp(4px,1.5vw,28px); --rot:-8deg} .hjump--r{right:clamp(4px,1.5vw,28px); --rot:8deg} .hjump--top{right:clamp(8px,3vw,60px); bottom:auto; top:6%; width:clamp(100px,11vw,190px); --rot:10deg; z-index:4} .scat{position:absolute; z-index:2; pointer-events:none; max-width:12vw} .popcut.jump{--rot:-6deg} .popcut--r.jump{--rot:7deg} .jump{transform:rotate(var(--rot,0deg))} /* スクロールで飛び込む */ .jump.is-in{animation:jumpIn .8s cubic-bezier(.2,1.45,.35,1) both} .jump--r.is-in{animation-name:jumpInR} @keyframes jumpIn{0%{opacity:0; transform:translate(-60px,80px) rotate(calc(var(--rot,0deg) - 18deg)) scale(.6)} 70%{opacity:1; transform:translate(4px,-10px) rotate(calc(var(--rot,0deg) + 3deg)) scale(1.06)} 100%{opacity:1; transform:rotate(var(--rot,0deg))}} @keyframes jumpInR{0%{opacity:0; transform:translate(60px,80px) rotate(calc(var(--rot,0deg) + 18deg)) scale(.6)} 70%{opacity:1; transform:translate(-4px,-10px) rotate(calc(var(--rot,0deg) - 3deg)) scale(1.06)} 100%{opacity:1; transform:rotate(var(--rot,0deg))}} .jump:not(.is-in){opacity:0} /* ふわふわ浮く */ .jump.is-in img{animation:jumpFloat 3.2s ease-in-out 1s infinite} @keyframes jumpFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)}} @media (max-width:1100px){ .scat{display:none} } @media (max-width:920px){ .scat{display:none} .hjump{width:clamp(80px,22vw,130px); bottom:auto; top:8px; z-index:5} .hjump--l{left:4px} .hjump--r,.hjump--top{right:4px; top:8px} } @media (max-width:640px){ .hjump{display:none} .hero__brandrow{width:min(100% - 24px,100%)} } @media (prefers-reduced-motion:reduce){ .jump{opacity:1 !important; animation:none !important} .jump img{animation:none !important} } /* ---- About: 3枚コラージュ（大正／令和／社長） ---- */ .collage{position:relative; width:100%; aspect-ratio:1/1.02; margin:var(--s2) 0 0} .collage__i{position:absolute; margin:0; background:var(--white); border:4px solid var(--ink); box-shadow:10px 10px 0 var(--ink); overflow:hidden} .collage__i img{display:block; width:100%; height:100%; object-fit:cover} .collage__i figcaption{position:absolute; left:0; bottom:0; font-family:var(--sans); font-weight:900; font-size:10.5px; line-height:1.45; letter-spacing:.04em; background:var(--ink); color:var(--white); padding:5px 9px} .collage__i--1{left:0; top:0; width:56%; aspect-ratio:4/3; transform:rotate(-4deg); z-index:1} .collage__i--1 img{filter:sepia(.5) contrast(1.05)} .collage__i--2{left:22%; top:30%; width:58%; aspect-ratio:1/1; transform:rotate(2deg); z-index:3; box-shadow:10px 10px 0 var(--red)} .collage__i--3{right:0; top:6%; width:38%; aspect-ratio:3/4; transform:rotate(5deg); z-index:2; box-shadow:10px 10px 0 var(--yellow)} .collage__i--3 img{filter:grayscale(1) contrast(1.08)} .msg__art .msg__stamp{z-index:5} .collage__i{opacity:0} .msg__art.is-in .collage__i--1{animation:colIn1 .8s cubic-bezier(.2,1.4,.35,1) .1s both} .msg__art.is-in .collage__i--3{animation:colIn3 .8s cubic-bezier(.2,1.4,.35,1) .4s both} .msg__art.is-in .collage__i--2{animation:colIn2 .8s cubic-bezier(.2,1.4,.35,1) .7s both} @keyframes colIn1{0%{opacity:0; transform:translate(-40vw,40px) rotate(-18deg) scale(.6)} 70%{opacity:1; transform:translate(8px,-6px) rotate(-1deg) scale(1.04)} 100%{opacity:1; transform:rotate(-3deg)}} @keyframes colIn3{0%{opacity:0; transform:translate(40vw,-40px) rotate(20deg) scale(.6)} 70%{opacity:1; transform:translate(-8px,6px) rotate(2deg) scale(1.04)} 100%{opacity:1; transform:rotate(4deg)}} @keyframes colIn2{0%{opacity:0; transform:translateY(120px) rotate(-8deg) scale(.5)} 70%{opacity:1; transform:translateY(-10px) rotate(3deg) scale(1.05)} 100%{opacity:1; transform:rotate(1.5deg)}} @media (prefers-reduced-motion:reduce){ .collage__i{opacity:1; animation:none !important} } @media (max-width:900px){ .collage{max-width:520px; margin-inline:auto} } .hero__kicker em.is-done{animation:heroPop .5s cubic-bezier(.2,1.6,.35,1)} @keyframes heroPop{0%{transform:scale(1)} 50%{transform:scale(1.14) rotate(-2deg)} 100%{transform:scale(1)}} /* ---- About: タイトル横から写真を大きく広げる ---- */ .msg--about{grid-template-columns:1fr 1.05fr; align-items:start; gap:var(--s5)} .msg--about .msg__left{min-width:0} .msg--about .sec-head{margin-bottom:var(--s4)} .msg--about .collage{aspect-ratio:1/1.32; margin-top:0} .msg--about .collage__i--1{left:0; top:2%; width:64%; aspect-ratio:4/3; transform:rotate(-3deg); z-index:1} .msg--about .collage__i--3{right:0; top:0; width:42%; aspect-ratio:3/4; transform:rotate(4deg); z-index:2} .msg--about .collage__i--2{left:14%; top:44%; width:78%; aspect-ratio:1/1; transform:rotate(1.5deg); z-index:3} .msg--about .msg__stamp{top:-28px; right:-10px; z-index:5} @media (max-width:900px){ .msg--about{grid-template-columns:1fr} .msg--about .collage{max-width:100%; aspect-ratio:1/1.25} } /* ---- Values: バナー + 価値観バッジ ---- */ .vhead.vhead--banner{display:block; margin-bottom:var(--s5)} .vhero{display:grid; grid-template-columns:1fr 200px; gap:var(--s4); align-items:center} .vbadges{list-style:none; margin:0; padding:0; display:grid; gap:14px} .vbadge{display:grid; grid-template-columns:72px 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:center; background:var(--white); border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink); padding:10px 12px; transform:rotate(var(--r,0deg))} .vbadge svg{grid-row:1 / span 2; width:72px; height:72px} .vbadge b{font-family:var(--display); font-weight:400; font-size:24px; line-height:1.1; color:var(--ink)} .vbadge small{font-family:var(--sans); font-weight:900; font-size:10px; letter-spacing:.2em; color:var(--red)} .vbadge--1{--r:-2deg} .vbadge--2{--r:1.5deg; margin-left:10px} .vbadge--3{--r:-1deg} .vbadge.is-in svg{animation:valPop .6s cubic-bezier(.2,1.5,.4,1) .3s both} @media (max-width:900px){ .vhero{grid-template-columns:1fr} .vbadges{grid-template-columns:repeat(3,1fr); gap:10px} .vbadge{grid-template-columns:1fr; grid-template-rows:auto auto auto; justify-items:center; text-align:center; padding:10px 6px; margin:0 !important} .vbadge svg{grid-row:auto; width:56px; height:56px} .vbadge b{font-size:18px} } /* ---- 表紙「109」：パタパタ式（split-flap）カウンター ---- */ .hero__kicker em.flap{display:inline-flex; gap:clamp(6px,.8vw,12px); -webkit-text-stroke:0; filter:none; color:var(--white); line-height:1; letter-spacing:0; font-size:clamp(110px,16vw,230px); transform:rotate(-2deg); margin:0 clamp(6px,1vw,16px); perspective:1200px} .flap__d{position:relative; display:block; width:.74em; height:1em; border-radius:.06em; background:var(--ink); box-shadow:6px 6px 0 var(--red), 0 0 0 4px var(--ink); font-family:var(--display); font-weight:400; transform-style:preserve-3d} .flap__d b{position:absolute; left:0; right:0; height:50%; overflow:hidden; display:block; background:var(--ink); color:var(--white); backface-visibility:hidden; font-weight:400} .flap__d b::before{content:attr(data-v); position:absolute; left:0; right:0; height:200%; line-height:1em; text-align:center} .flap__d .st,.flap__d .ft{top:0; border-radius:.06em .06em 0 0; border-bottom:2px solid rgba(255,255,255,.2)} .flap__d .sb,.flap__d .fb{bottom:0; border-radius:0 0 .06em .06em} .flap__d .st::before,.flap__d .ft::before{top:0} .flap__d .sb::before,.flap__d .fb::before{top:-100%} .flap__d .ft,.flap__d .fb{display:none; z-index:2} .flap__d .ft{transform-origin:bottom} .flap__d .fb{transform-origin:top} .flap__d.is-flip .ft{display:block; animation:flapTop var(--fd,.14s) ease-in both} .flap__d.is-flip .fb{display:block; animation:flapBot var(--fd,.14s) ease-out var(--fd,.14s) both} @keyframes flapTop{from{transform:rotateX(0)} to{transform:rotateX(-90deg)}} @keyframes flapBot{from{transform:rotateX(90deg)} to{transform:rotateX(0)}} .flap__d.is-hidden{display:none} /* .hero__kicker span の装飾（吹き出し・余白・小さい文字）をタイルには適用しない */ .hero__kicker em.flap .flap__d{font-size:1em; padding:0; margin:0; letter-spacing:0; color:var(--white); z-index:auto; line-height:1} .hero__kicker em.flap .flap__d::before{display:none; content:none} @media (max-width:920px){ .hero__kicker{flex-direction:column; align-items:center; gap:2px} .hero__kicker em.flap{margin:10px 0 14px; font-size:clamp(88px,22vw,150px)} .hero__kicker span{font-size:clamp(18px,4.2vw,26px); padding:12px 26px} } } } /* ---- 数字カードのラベルをカラフルに ---- */ .num__label{color:var(--ink); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); transform:rotate(-1.5deg); display:inline-block} .nums .num:nth-child(1) .num__label{background:var(--red); color:var(--white)} .nums .num:nth-child(2) .num__label{background:var(--yellow)} .nums .num:nth-child(3) .num__label{background:var(--cyan)} .nums .num:nth-child(4) .num__label{background:var(--lime)} .nums .num:nth-child(5) .num__label{background:var(--orange,#F28C28); color:var(--white)} .nums .num:nth-child(6) .num__label{background:var(--purple,#7B61C9); color:var(--white)} /* 人を知る・沿革・シフト例のラベルも色付きに */ .pc__tag{background:var(--yellow); color:var(--ink); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink)} .pc:nth-child(2) .pc__tag{background:var(--cyan)} .pc:nth-child(3) .pc__tag{background:var(--lime)} .pc:nth-child(4) .pc__tag{background:var(--red); color:var(--white)} .collage__i figcaption{background:var(--yellow); color:var(--ink)} .collage__i--2 figcaption{background:var(--red); color:var(--white)} .shift__h{background:var(--red); color:var(--white)} /* ---- Entry: 2つの応募ルート ---- */ .routes{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); text-align:left; position:relative; z-index:3; margin-top:var(--s5)} .route{background:var(--white); border:3px solid var(--ink); box-shadow:8px 8px 0 var(--ink); padding:var(--s4) var(--s4) var(--s4)} .route--web{box-shadow:8px 8px 0 var(--red)} .route--tel{box-shadow:8px 8px 0 var(--yellow)} .route__tag{display:inline-block; font-family:var(--sans); font-weight:900; font-size:12px; letter-spacing:.06em; border:2px solid var(--ink); padding:4px 10px; margin-bottom:12px; transform:rotate(-1.5deg)} .route--web .route__tag{background:var(--red); color:var(--white)} .route--tel .route__tag{background:var(--yellow)} .route__t{font-family:var(--sans); font-weight:900; font-size:clamp(19px,2.2vw,26px); line-height:1.4; margin-bottom:10px; letter-spacing:.02em} .route__d{font-size:13.5px; line-height:1.9; font-weight:500; color:var(--ink-80); margin-bottom:var(--s3)} .route .btn{width:100%; justify-content:center; padding:18px 24px; font-size:clamp(20px,2.2vw,26px)} .btn--ghost{background:var(--white); color:var(--ink)} .btn--ghost:hover{background:var(--yellow)} .route__tel{display:block; font-family:var(--display); font-size:clamp(30px,3.6vw,44px); color:var(--ink); text-decoration:none; line-height:1.1} .route__meta{font-size:12.5px; font-weight:700; color:var(--ink-80); margin:6px 0 var(--s3)} @media (max-width:760px){ .routes{grid-template-columns:1fr} } /* ============================================================ MOTION PASS：サイト全体に動きを ============================================================ */ /* 1) 背景のペイント（splat）がゆっくり漂う */ .splat{animation:splatDrift 9s ease-in-out infinite alternate} .splat:nth-of-type(2n){animation-duration:12s; animation-direction:alternate-reverse} @keyframes splatDrift{0%{transform:translate(0,0) rotate(0deg) scale(1)} 100%{transform:translate(18px,-14px) rotate(6deg) scale(1.06)}} /* 2) セクション見出し：赤い部分が下からポンと出て、下線がスッと引かれる */ .sec-title em{position:relative; display:inline-block; z-index:0} .sec-title em::after{content:""; position:absolute; left:0; right:0; bottom:.04em; height:.18em; background:var(--yellow); z-index:-1; transform:scaleX(0); transform-origin:left} .sec-head.is-in .sec-title em{animation:titlePop .6s cubic-bezier(.2,1.5,.35,1) .25s both} .sec-head.is-in .sec-title em::after{animation:underline .5s cubic-bezier(.2,.8,.2,1) .6s both} @keyframes titlePop{0%{transform:translateY(.35em) rotate(-4deg) scale(.7); opacity:0} 100%{transform:none; opacity:1}} @keyframes underline{from{transform:scaleX(0)} to{transform:scaleX(1)}} .sec-en{display:inline-block} .sec-head.is-in .sec-en{animation:enSlide .5s cubic-bezier(.2,.8,.2,1) both} @keyframes enSlide{from{opacity:0; transform:translateX(-24px); letter-spacing:.6em} to{opacity:1; transform:none}} /* 3) カード類：出現時にポップ（reveal に弾みを足す） */ .num.rv,.cul__i.rv,.step.rv,.job.rv,.store.rv,.flow__i.rv,.pc.rv,.route.rv,.val.rv,.brand.rv,.vbadge.rv{transform:translateY(34px) scale(.94)} .num.rv.is-in,.cul__i.rv.is-in,.step.rv.is-in,.job.rv.is-in,.store.rv.is-in,.flow__i.rv.is-in,.pc.rv.is-in,.route.rv.is-in,.val.rv.is-in,.brand.rv.is-in,.vbadge.rv.is-in{ transition-timing-function:cubic-bezier(.2,1.4,.35,1); transition-duration:.7s} /* 4) 数字カード：数字が出る瞬間に少し弾む */ .num__val{display:inline-block} .num.is-in .num__val{animation:numBump .6s cubic-bezier(.2,1.6,.35,1) 1.2s both} @keyframes numBump{0%{transform:scale(1)} 50%{transform:scale(1.12) rotate(-2deg)} 100%{transform:scale(1)}} /* 5) ラベル・タグ：ゆらゆら（軽く） */ .num__label,.pc__tag,.route__tag,.era__tag,.job__type{animation:tagWobble 4s ease-in-out infinite} @keyframes tagWobble{0%,100%{transform:rotate(-1.5deg)} 50%{transform:rotate(1.5deg)}} /* 6) ボタン：エントリー系は呼吸するように、ホバーで跳ねる */ .btn--lg,.spcta a{animation:btnBreath 2.6s ease-in-out infinite} @keyframes btnBreath{0%,100%{box-shadow:5px 5px 0 var(--ink)} 50%{box-shadow:9px 9px 0 var(--ink); transform:translate(-2px,-2px)}} .btn:hover{animation:none} .btn__arw{transition:transform .25s cubic-bezier(.2,1.4,.35,1)} .btn:hover .btn__arw{transform:translateX(6px)} .header .btn,.gnav .btn{animation:btnNudge 6s ease-in-out infinite} @keyframes btnNudge{0%,88%,100%{transform:none} 91%{transform:rotate(-3deg) scale(1.06)} 94%{transform:rotate(3deg) scale(1.06)} 97%{transform:rotate(-2deg)}} /* 7) ロゴ・写真：ホバーでちょっと傾く */ .hbrand img,.brand__logo,.shift__logo,.collage__i,.era__i,.pc__ph{transition:transform .3s cubic-bezier(.2,1.4,.35,1)} .hbrand:hover img,.brand:hover .brand__logo{transform:rotate(-3deg) scale(1.04)} .collage__i:hover,.era__i:hover{transform:rotate(0deg) scale(1.03) !important; z-index:9} .pc:hover .pc__ph{transform:rotate(-1.5deg) scale(1.02)} /* 8) 価値観バッジ・六角バッジ：ふわふわ */ .vbadge svg,.hex b{display:inline-block; animation:bob 3.4s ease-in-out infinite} .vbadge--2 svg{animation-delay:.6s} .vbadge--3 svg{animation-delay:1.2s} .hex:nth-child(2) b{animation-delay:.4s} .hex:nth-child(3) b{animation-delay:.8s} .hex:nth-child(4) b{animation-delay:1.2s} @keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}} /* 9) タイムライン：年号が転がってくる */ .hist__row.is-in dt{animation:dtRoll .6s cubic-bezier(.2,1.4,.35,1) both} @keyframes dtRoll{from{opacity:0; transform:translateX(-30px) rotate(-12deg)} to{opacity:1; transform:none}} /* 10) 1日の流れ：ドットが順に点灯 */ .day.is-on .day__i{animation:dayIn .5s cubic-bezier(.2,1.3,.35,1) both} .day.is-on .day__i:nth-child(2){animation-delay:.1s} .day.is-on .day__i:nth-child(3){animation-delay:.2s} .day.is-on .day__i:nth-child(4){animation-delay:.3s} .day.is-on .day__i:nth-child(5){animation-delay:.4s} .day.is-on .day__i:nth-child(6){animation-delay:.5s} @keyframes dayIn{from{opacity:0; transform:translateX(-18px)} to{opacity:1; transform:none}} /* 11) 店舗地図：カード選択時に地図がポンと弾む */ .storemap.is-swap .storemap__frame{animation:mapPop .45s cubic-bezier(.2,1.4,.35,1)} @keyframes mapPop{0%{transform:scale(.97)} 60%{transform:scale(1.01)} 100%{transform:scale(1)}} @media (prefers-reduced-motion:reduce){ .splat,.num__label,.pc__tag,.route__tag,.era__tag,.job__type,.btn--lg,.spcta a,.header .btn,.gnav .btn,.vbadge svg,.hex b{animation:none !important} } /* ---- 求人詳細モーダル ---- */ .jmodal{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:16px} .jmodal[hidden]{display:none} .jmodal__bg{position:absolute; inset:0; background:rgba(20,20,20,.72)} .jmodal__box{position:relative; width:min(760px,100%); max-height:90vh; overflow:auto; background:var(--paper); border:4px solid var(--ink); box-shadow:14px 14px 0 var(--red); padding:var(--s5) var(--s4) var(--s4); animation:jmIn .45s cubic-bezier(.2,1.4,.35,1); font-family:var(--sans); font-weight:500} @keyframes jmIn{from{opacity:0; transform:translateY(40px) rotate(-1.5deg) scale(.92)} to{opacity:1; transform:none}} .jmodal__x{position:absolute; top:10px; right:10px; width:44px; height:44px; border:3px solid var(--ink); background:var(--yellow); font-size:26px; font-weight:900; line-height:1; cursor:pointer; box-shadow:3px 3px 0 var(--ink)} .jmodal__x:hover{background:var(--red); color:#fff} .jmodal__head{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px} .jmodal__type{font-family:var(--sans); font-weight:900; font-size:12px; background:var(--ink); color:#fff; padding:5px 10px; border:2px solid var(--ink); box-shadow:2px 2px 0 var(--ink)} .jmodal__type.is-part{background:var(--yellow); color:var(--ink)} .jmodal__brand{font-size:13px; font-weight:800; color:var(--ink-80)} .jmodal__ttl{font-family:var(--sans); font-weight:900; font-size:clamp(20px,2.6vw,28px); line-height:1.4; margin-bottom:var(--s4); color:var(--ink); letter-spacing:.02em} .jmodal__body dl{display:grid; grid-template-columns:1fr; gap:14px; margin:0} .jmodal__body dt{display:inline-block; margin-bottom:8px; font-family:var(--sans); font-weight:900; font-size:13px; letter-spacing:.06em; padding:6px 12px; border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); background:var(--yellow); color:var(--ink); transform:rotate(-1deg)} .jmodal__body dd{margin:0 0 6px 0; padding:14px 18px; background:var(--white); border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink); font-family:var(--sans); font-weight:500; font-size:14px; line-height:2} .jmodal__body dd b{font-weight:900; background:linear-gradient(transparent 60%, var(--yellow) 60%); padding:0 2px} /* 各項目ごとにラベルの色を変える */ .jmodal__body dl > dt:nth-of-type(1){background:var(--red); color:#fff} .jmodal__body dl > dt:nth-of-type(2){background:var(--yellow)} .jmodal__body dl > dt:nth-of-type(3){background:var(--cyan)} .jmodal__body dl > dt:nth-of-type(4){background:var(--lime)} .jmodal__body dl > dt:nth-of-type(5){background:#F28C28; color:#fff} .jmodal__body dl > dt:nth-of-type(6){background:#B79BE6; color:#fff} .jmodal__body dl > dt:nth-of-type(7){background:var(--ink); color:#fff} .jmodal__body dl > dt:nth-of-type(8){background:var(--red); color:#fff} .jmodal__foot{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:var(--s5); padding-top:var(--s4); border-top:2px dashed var(--ink)} .jmodal__tel{font-weight:900; font-size:14px; color:var(--ink); text-decoration:underline} .job{cursor:pointer} .job .job__detail{display:none} @media (max-width:560px){ .jmodal__box{padding:var(--s5) var(--s3) var(--s3)} .jmodal__body dd{padding:12px 14px; font-size:13.5px} } .values .val{transition-duration:.9s} @media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} } /* ============================================================ Message ============================================================ */ .msg{display:grid; grid-template-columns:1.15fr 1fr; gap:var(--s6); align-items:center} .msg__body p{margin-bottom:var(--s3); font-size:15px; line-height:2.1; color:var(--ink-80); font-weight:500} .msg__body p:last-child{margin-bottom:0} .msg__body strong{color:var(--ink); font-weight:900} .msg__sign{margin-top:var(--s4); font-size:13px; color:var(--ink-55); font-weight:700} .msg__sign b{display:block; font-family:var(--sans); font-weight:900; font-size:20px; color:var(--ink); margin-top:6px} .msg__art{position:relative} .msg__art .ph{border:4px solid var(--ink); box-shadow:12px 12px 0 var(--yellow)} .msg__stamp{ position:absolute; right:-14px; top:-26px; z-index:4; width:120px; height:120px; border-radius:50%; background:var(--red); color:#fff; display:grid; place-content:center; text-align:center; font-family:var(--display); line-height:1.2; transform:rotate(-9deg); border:3px solid var(--ink); } .msg__stamp b{display:block; font-size:38px} .msg__stamp small{font-family:var(--sans); font-weight:900; font-size:11px; letter-spacing:.04em} /* ============================================================ Numbers ============================================================ */ .nums{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); position:relative; z-index:3} .num{background:var(--white); border:3px solid var(--ink); padding:var(--s4) var(--s3) var(--s3); box-shadow:8px 8px 0 var(--ink); position:relative; transition:transform .18s var(--ease), box-shadow .18s var(--ease)} .num:hover{transform:translate(4px,4px); box-shadow:4px 4px 0 var(--ink)} .num__label{display:inline-block; background:var(--ink); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.05em; padding:5px 12px; margin-bottom:var(--s2)} .num__val{font-family:var(--display); font-size:clamp(54px,7.4vw,96px); line-height:.96; color:var(--ink); letter-spacing:-.01em} .num__val small{font-size:.3em; margin-left:4px; font-family:var(--sans); font-weight:900} .num__val .u{color:var(--red)} .num__note{font-size:12px; color:var(--ink-80); line-height:1.85; margin-top:var(--s2); font-weight:500; word-break:normal} @media (max-width:640px){ .num{padding:var(--s3) var(--s3) var(--s3)} .num__val{font-size:56px} .num__note{font-size:13px} } .num--hero{background:var(--yellow)} .nums .num:nth-child(2){background:#FFE1B0} .nums .num:nth-child(2){display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:center; gap:0 var(--s4)} .nums .num:nth-child(2) .num__label{grid-column:1; justify-self:start} .nums .num:nth-child(2) .num__val{grid-column:1} .nums .num:nth-child(2) .num__note{grid-column:1; margin-top:var(--s2)} .nums .num:nth-child(2) .num__logos{grid-column:2; grid-row:1 / span 3; flex-direction:column; align-items:center; justify-content:center; gap:var(--s3); margin-top:0} .nums .num:nth-child(2) .num__logos{min-width:0} .nums .num:nth-child(2) .num__logos img{height:auto; width:min(100%,300px); max-width:100%} .nums .num:nth-child(3){background:#CDEBF4} .nums .num:nth-child(4){background:#E2F3C8} .nums .num:nth-child(5){background:#FFD6CC} .nums .num:nth-child(6){background:#E6E0F6} .num__logos{display:flex; align-items:center; gap:14px; margin-top:var(--s3); flex-wrap:wrap} .num__logos img{height:clamp(30px,3.4vw,44px); width:auto; display:block} .nums .num:nth-child(2){grid-column:span 2} .nums .num:nth-child(6){grid-column:span 3; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:0 var(--s4)} .nums .num:nth-child(6) .num__label{grid-column:1; justify-self:start} .nums .num:nth-child(6) .num__val{grid-column:1} .nums .num:nth-child(6) .num__note{grid-column:2; grid-row:1 / span 2; margin-top:0; font-size:14px} @media (max-width:900px){ .nums .num:nth-child(2),.nums .num:nth-child(6){grid-column:span 1; display:block} .nums .num:nth-child(2) .num__logos{flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--s3); margin-top:var(--s4)} .nums .num:nth-child(2) .num__logos img{height:auto; width:min(44%,220px); max-width:44%} .nums .num:nth-child(6) .num__note{margin-top:var(--s2)} .num__logos img{height:26px} } .num--hero .num__val{font-size:clamp(64px,9vw,118px)} /* ============================================================ People ============================================================ */ .people{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); position:relative; z-index:3} .pc{display:block; background:var(--yellow); border:3px solid var(--ink); box-shadow:9px 9px 0 var(--ink); transition:transform .18s var(--ease), box-shadow .18s var(--ease); position:relative} .pc:hover{transform:translate(4px,4px); box-shadow:5px 5px 0 var(--ink)} .pc:nth-child(2){background:var(--lime)} .pc:nth-child(3){background:var(--cyan)} .pc__ph{position:relative; border-bottom:3px solid var(--ink); overflow:hidden} .pc__no{position:absolute; left:0; top:0; z-index:3; background:var(--ink); color:var(--yellow); font-family:var(--display); font-size:15px; padding:6px 14px} .pc__body{padding:var(--s3)} .pc__tag{display:inline-block; background:var(--ink); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.06em; padding:4px 11px; margin-bottom:12px} .pc__q{font-family:var(--sans); font-weight:900; font-size:20px; line-height:1.6; margin-bottom:12px} .pc__meta{font-size:11.5px; line-height:1.7; font-weight:700; color:#3A3000} .pc__meta b{display:block; font-family:var(--sans); font-weight:900; font-size:19px; color:var(--ink); margin-top:3px} .pc__txt{font-size:13px; line-height:1.95; margin-top:12px; font-weight:500; background:var(--white); border:2px solid var(--ink); padding:13px 15px} .pc__more{display:inline-block; margin-top:var(--s2); background:var(--ink); color:#fff; font-family:var(--latin); font-size:11px; letter-spacing:.14em; font-weight:600; padding:7px 16px} /* ============================================================ Movie ============================================================ */ .yt{position:relative; aspect-ratio:16/9; overflow:hidden; cursor:pointer; border:4px solid var(--ink); box-shadow:12px 12px 0 var(--red)} .yt__ph{position:absolute; inset:0} .yt__ph .ph__note{margin:var(--s2) var(--s2) auto; max-width:56%} .yt__veil{position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,20,20,0) 40%,rgba(20,20,20,.62))} .yt__play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; width:96px; height:96px; border-radius:50%; background:var(--red); color:#fff; border:4px solid var(--ink); display:grid; place-items:center; transition:transform .2s var(--ease)} .yt:hover .yt__play{transform:translate(-50%,-50%) scale(1.08)} .yt__play svg{width:28px; height:32px; margin-left:5px; fill:currentColor} .yt__cap{position:absolute; left:0; bottom:0; z-index:3; padding:var(--s3)} .yt__cap b{display:inline-block; background:var(--ink); color:#fff; font-family:var(--sans); font-weight:900; font-size:clamp(16px,2.2vw,25px); padding:7px 16px; line-height:1.5} .yt__cap span{display:inline-block; background:var(--yellow); color:var(--ink); font-size:11.5px; font-weight:700; padding:4px 12px; margin-top:7px} .yt iframe{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:4} .mv-shorts{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin-top:var(--s4)} .short{position:relative; aspect-ratio:9/16; overflow:hidden; border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink)} .short .ph{position:absolute; inset:0} .short__lab{position:absolute; left:0; top:0; z-index:3; background:var(--lime); color:var(--ink); font-family:var(--latin); font-size:10.5px; font-weight:600; letter-spacing:.14em; padding:5px 12px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink)} .mv-note{margin-top:var(--s4); background:var(--white); border:3px solid var(--ink); padding:var(--s3); font-size:13px; line-height:1.95; font-weight:500; color:var(--ink-80)} .mv-note b{color:var(--ink); font-weight:900} /* ============================================================ Brands ============================================================ */ .brands{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3); position:relative; z-index:3} .brand{background:var(--white); border:3px solid var(--ink); box-shadow:8px 8px 0 var(--ink); padding:var(--s4); display:flex; flex-direction:column; gap:12px; transition:transform .18s var(--ease), box-shadow .18s var(--ease); position:relative; overflow:hidden} /* 背景に敷くブランドロゴ（カンプでは文字で代用。実装時は各FCの正規ロゴに差し替え） */ .brand__wm{ position:absolute; right:-14px; bottom:-18px; z-index:0; pointer-events:none; font-family:var(--display); font-weight:400; font-synthesis:none; font-feature-settings:normal; font-size:clamp(46px,6vw,74px); line-height:.94; text-align:right; letter-spacing:.02em; color:var(--ink); opacity:.1; } .brand > *:not(.brand__wm){position:relative; z-index:1} .brand__stores{display:flex; flex-wrap:wrap; gap:6px} .brand__stores li{display:flex; align-items:baseline; gap:5px; border:2px solid var(--ink); padding:4px 10px} .brand__stores b{font-size:12.5px; font-weight:900} .brand__stores span{font-family:var(--display); font-weight:400; font-synthesis:none; font-size:13px; color:var(--red-d)} .brand:hover{transform:translate(4px,4px); box-shadow:4px 4px 0 var(--ink)} .brand__top{display:flex; align-items:center; gap:14px} .brand__chip{width:20px; height:20px; border:2px solid var(--ink); flex:none} .brand__name{font-family:var(--sans); font-weight:900; font-size:22px; line-height:1.45} .brand__logo{display:block; height:clamp(38px,4.6vw,62px); width:auto; margin-bottom:4px} .brand__name span{display:block; font-family:var(--latin); font-size:10px; letter-spacing:.16em; color:var(--ink-55); font-weight:600; margin-top:2px} .brand__desc{font-size:13.5px; line-height:2; color:var(--ink-80); font-weight:500} .brand__desc b{color:var(--ink); font-weight:900} .brand__stat{margin-top:auto; padding-top:12px; border-top:2px dashed var(--ink); display:flex; align-items:baseline; gap:8px} .brand__stat b{font-family:var(--display); font-size:30px; color:var(--red)} .brand__stat span{font-size:11.5px; font-weight:700; color:var(--ink-55)} /* ============================================================ Career ============================================================ */ .career{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s2); position:relative; z-index:3} .step{background:var(--white); border:3px solid var(--ink); padding:var(--s3) 18px var(--s3); position:relative; box-shadow:6px 6px 0 var(--ink)} .step::after{content:""; position:absolute; right:-15px; top:50%; transform:translateY(-50%); z-index:4; border-left:12px solid var(--ink); border-top:11px solid transparent; border-bottom:11px solid transparent} .step:last-child::after{display:none} .step__stage{display:inline-block; background:var(--red); color:#fff; font-family:var(--latin); font-size:10px; font-weight:600; letter-spacing:.14em; padding:4px 10px; margin-bottom:12px} .step:first-child .step__stage{background:var(--ink)} .step__ttl{font-family:var(--sans); font-weight:900; font-size:18px; margin-bottom:10px; line-height:1.4} .step__txt{font-size:12.5px; line-height:1.9; color:var(--ink-80); font-weight:500} .step__entry{display:inline-block; margin:10px 5px 0 0; font-size:10.5px; font-weight:700; color:var(--ink); background:var(--yellow); border:2px solid var(--ink); padding:3px 10px} .career__note{margin-top:var(--s5); background:var(--yellow); border:3px solid var(--ink); padding:var(--s3) var(--s4); font-size:14px; line-height:2; font-weight:500; position:relative; z-index:3} .career__note b{font-weight:900} .career__note + .career__note{margin-top:var(--s3)} /* ============================================================ Culture ============================================================ */ .cul{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4) var(--s3); position:relative; z-index:3} .cul__i{text-align:center} .cul__circ{width:100%; max-width:210px; margin-inline:auto; aspect-ratio:1/1; border-radius:50%; border:3px solid var(--ink); display:grid; overflow:hidden; place-content:center; padding:20px 26px; margin-bottom:14px; transition:transform .2s var(--ease)} .cul__i:hover .cul__circ{transform:translateY(-6px)} .cul__i:nth-child(4n+1) .cul__circ{background:var(--yellow)} .cul__i:nth-child(4n+2) .cul__circ{background:var(--lime)} .cul__i:nth-child(4n+3) .cul__circ{background:var(--cyan)} .cul__i:nth-child(4n+4) .cul__circ{background:var(--orange)} .cul__ico{width:38px; height:38px; margin:0 auto 10px; stroke:var(--ink); fill:none; stroke-width:1.8} .cul__t{font-family:var(--sans); font-weight:900; font-size:clamp(13px,1.15vw,15.5px); line-height:1.5; max-width:100%; word-break:auto-phrase; overflow-wrap:break-word} .cul__d{font-size:12.5px; line-height:1.9; color:var(--ink-80); font-weight:500; padding:0 6px} /* ============================================================ A Day ============================================================ */ .tabs{display:flex; gap:6px; margin-bottom:var(--s4); flex-wrap:wrap; position:relative; z-index:3} .tab{font-family:var(--sans); font-weight:900; font-size:13.5px; padding:12px 24px; border:3px solid var(--ink); background:var(--white); transition:.2s var(--ease)} .tab.is-on{background:var(--red); color:#fff} .day{display:none; grid-template-columns:repeat(5,1fr); gap:var(--s2); position:relative; z-index:3} .day.is-on{display:grid} .day__i{background:var(--white); border:3px solid var(--ink); padding:18px; box-shadow:5px 5px 0 var(--ink)} .day__t{font-family:var(--display); font-size:25px; color:var(--red); line-height:1.1; margin-bottom:10px} .day__h{font-size:13.5px; font-weight:900; margin-bottom:8px} .day__d{font-size:12px; line-height:1.85; color:var(--ink-80); font-weight:500} /* ============================================================ Jobs ============================================================ */ .filters{display:flex; flex-direction:column; gap:14px; position:relative; z-index:3} .frow{display:flex; align-items:center; gap:8px; flex-wrap:wrap} .frow__l{font-family:var(--sans); font-weight:900; font-size:12.5px; width:104px; flex:none} .chip{padding:9px 18px; border:2px solid var(--ink); background:var(--white); font-size:12.5px; font-weight:700; transition:.2s var(--ease)} .chip:hover{background:var(--yellow)} .chip.is-on{background:var(--ink); color:#fff} .jobs__count{margin-top:var(--s4); font-family:var(--sans); font-weight:900; font-size:14px} .jobs__count b{font-size:32px; color:var(--red); margin:0 5px} .jobs{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3); margin-top:var(--s2); position:relative; z-index:3} .job{background:var(--white); border:3px solid var(--ink); box-shadow:7px 7px 0 var(--ink); padding:var(--s3); display:flex; flex-direction:column; gap:12px; transition:transform .18s var(--ease), box-shadow .18s var(--ease)} .job:hover{transform:translate(4px,4px); box-shadow:3px 3px 0 var(--ink)} .job.is-hide{display:none} .job__top{display:flex; align-items:center; gap:9px; flex-wrap:wrap} .job__type{font-size:11px; font-weight:900; padding:4px 12px; background:var(--red); color:#fff} .job__type.is-part{background:var(--lime); color:var(--ink)} .job__brand{font-size:11.5px; font-weight:700; color:var(--ink-55)} .job__brand i{display:inline-block; width:9px; height:9px; margin-right:6px; border:1.5px solid var(--ink)} .job__ttl{font-family:var(--sans); font-weight:900; font-size:20px; line-height:1.55} .job__tags{display:flex; flex-wrap:wrap; gap:6px} .job__tags span{font-size:11px; font-weight:700; border:2px solid var(--ink); padding:3px 9px} .job__foot{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:12px; border-top:2px dashed var(--ink)} .job__pay{font-size:12.5px; font-weight:700} .job__pay b{font-family:var(--display); font-size:22px; color:var(--red)} .job__night{display:inline-block; margin-left:8px; font-size:10.5px; font-weight:900; letter-spacing:.02em; background:var(--red-d); color:#fff; padding:3px 7px; vertical-align:2px} .job__go{font-family:var(--latin); font-size:11px; font-weight:600; letter-spacing:.14em} .jobs__empty{display:none; padding:var(--s6); text-align:center; font-weight:700; background:var(--white); border:3px dashed var(--ink)} .jobs__empty.is-on{display:block} /* ============================================================ Entry ============================================================ */ .entry{text-align:center} .entry__badges{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:var(--s4); position:relative; z-index:3} .entry__badges span{font-family:var(--sans); font-weight:900; font-size:13px; background:var(--white); color:var(--ink); border:3px solid var(--ink); padding:7px 18px; box-shadow:4px 4px 0 var(--ink)} .entry__h{font-family:var(--display); font-size:clamp(26px,5.2vw,58px); line-height:1.38; margin-bottom:var(--s3); position:relative; z-index:3} .entry__lead{max-width:34em; margin:0 auto var(--s6); font-size:14.5px; line-height:2.05; font-weight:500; position:relative; z-index:3} .flow{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); max-width:900px; margin:0 auto var(--s6); position:relative; z-index:3} .flow__i{background:var(--white); border:3px solid var(--ink); padding:var(--s3); box-shadow:6px 6px 0 var(--ink)} .flow__n{font-family:var(--display); font-size:14px; background:var(--red); color:#fff; width:42px; height:42px; display:grid; place-content:center; margin:0 auto 12px; border:2px solid var(--ink)} .flow__t{font-family:var(--sans); font-weight:900; font-size:16px; margin-bottom:8px} .flow__d{font-size:12.5px; line-height:1.9; color:var(--ink-80); font-weight:500} .entry__tel{margin-top:var(--s4); font-size:13px; font-weight:700; position:relative; z-index:3} .entry__tel2{display:inline-block; margin-top:10px; font-size:12.5px; font-weight:700; color:var(--ink-80)} .entry__tel b{display:block; font-family:var(--display); font-size:clamp(28px,4vw,42px); margin-top:4px; letter-spacing:.01em} /* ============================================================ Footer: 黒ベース × カラフル枠のチップ ============================================================ */ .ft{position:relative; background:var(--ink); color:#B6AFA8; padding:var(--s7) 0 0} .ft__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s5); align-items:start} .ft .logo__mark{background:var(--yellow); color:var(--ink)} .ft .logo__txt b{color:var(--white)} .ft .logo__txt span{color:var(--yellow); font-weight:700} .ft__info{font-size:12.5px; line-height:2; margin-top:var(--s3); font-weight:500; color:#D6CFC0} .ft__h{display:inline-block; font-family:var(--sans); font-weight:900; font-size:12px; letter-spacing:.12em; color:var(--ink); background:var(--yellow); border:2px solid var(--white); box-shadow:3px 3px 0 var(--white); padding:5px 12px; margin-bottom:var(--s3); transform:rotate(-1.5deg)} .ft__list{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px 12px; columns:auto} .ft__list li{margin:0} .ft__list li a{display:inline-block; padding:6px 12px; font-family:var(--sans); font-weight:900; font-size:13px; color:var(--ink); background:var(--white); border:2px solid var(--white); box-shadow:3px 3px 0 var(--c1,var(--yellow)), 5px 5px 0 var(--white); transition:transform .15s var(--ease), box-shadow .15s var(--ease)} .ft__list li a:hover{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--c1,var(--yellow)), 3px 3px 0 var(--white); text-decoration:none} .ft__list li:nth-child(6n+1) a{--c1:var(--yellow)} .ft__list li:nth-child(6n+2) a{--c1:var(--cyan)} .ft__list li:nth-child(6n+3) a{--c1:var(--lime)} .ft__list li:nth-child(6n+4) a{--c1:var(--red)} .ft__list li:nth-child(6n+5) a{--c1:#F28C28} .ft__list li:nth-child(6n+6) a{--c1:#B79BE6} .ft__btm{margin-top:var(--s6); padding:14px 18px; border-top:1px solid #2E2A26; font-size:11px; display:flex; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; font-weight:500; color:#EDE6D8} .ft__btm span{color:#fff} .ft__design{color:#fff; display:inline-flex; align-items:center; gap:8px} .ft__design .by{font-family:'Herr Von Muellerhoff','Snell Roundhand','Zapfino','Brush Script MT',cursive; font-weight:400; font-size:22px; line-height:1; color:rgba(255,255,255,.75); transform:rotate(-6deg); display:inline-block} .ft__koesa{display:inline-flex; align-items:center} .ft__koesa img{height:20px; width:auto; display:block} @media (max-width:760px){ .ft__grid{grid-template-columns:1fr 1fr} .ft__grid>div:first-child{grid-column:1 / -1} } /* ============================================================ 固定CTA／校正モード ============================================================ */ .spcta{position:fixed; left:0; right:0; bottom:0; z-index:90; display:none; padding:9px 12px calc(9px + env(safe-area-inset-bottom)); background:var(--ink); gap:9px} .spcta .btn{flex:1; padding:13px 6px; font-size:12.5px; box-shadow:none; border-width:2px} .spcta .btn:hover{transform:none; box-shadow:none} .proof-btn{position:fixed; right:14px; bottom:14px; z-index:95; background:var(--ink); color:var(--yellow); font-family:var(--sans); font-weight:900; font-size:11px; padding:11px 17px; border:2px solid var(--yellow)} body.proof .proof-btn{background:var(--red); color:#fff; border-color:#fff} body.proof .is-dummy{outline:3px dashed var(--red); outline-offset:3px; background:rgba(232,52,31,.09); position:relative} body.proof .is-dummy::before{content:"要確認"; position:absolute; top:-11px; left:-3px; z-index:20; background:var(--red); color:#fff; font-size:9.5px; font-weight:700; padding:1px 7px; font-family:var(--sans); line-height:1.7; white-space:nowrap} body.proof .ph,body.proof .hero__media,body.proof .yt{outline:3px dashed var(--cyan); outline-offset:-3px} /* ============================================================ 極太表示体（Dela Gothic One）を使う要素の共通指定 ★重要 1) font-weight:400 を明示する h1/h2/b は既定で太字になる。Dela はウェイトが1種類しかないため、 ブラウザが「合成ボールド」をかけ、画数の多い漢字が塗りつぶされる。 2) font-synthesis:none で合成を明示的に禁止する 3) 詰め（palt）を切り、字間をわずかに開ける この3点を外すと、漢字が潰れて読めなくなります。 ============================================================ */ .sec-title,.hero h1,.entry__h,.hex b,.num__val,.msg__stamp,.msg__stamp b,.btn--lg, .brand__stat b,.day__t,.job__pay b,.entry__tel b,.flow__n,.pc__no,.logo__txt b, .hero__kicker em,.tape{ font-family:var(--display); font-weight:400; font-synthesis:none; font-feature-settings:normal; letter-spacing:.035em; } /* ============================================================ Responsive ============================================================ */ @media (max-width:1100px){ .cul{grid-template-columns:repeat(2,1fr)} .career{grid-template-columns:repeat(2,1fr); gap:var(--s3)} .step::after{display:none} .day{grid-template-columns:repeat(3,1fr); row-gap:var(--s3)} .msg{grid-template-columns:1fr; gap:var(--s5)} } @media (max-width:900px){ :root{--s7:56px; --s8:72px} /* SPはヒーローの写真を出さないため、ヘッダーは常に黒地にする */ .hd{background:var(--ink)} .gnav{display:none} .burger{display:block} .hero__stage{min-height:0; padding-bottom:0} .hero__copy{position:static; padding:calc(var(--header-h) + 28px) 16px var(--s4)} .hero__cast{position:relative; padding:0} .hero__media,.hero__bands,.hero__veil,.hero__logos,.hero__logonote{display:none} .logobar__in{grid-template-columns:1fr; gap:var(--s3)} .logobar__l{border-right:0; border-left:3px solid var(--yellow); padding:0 0 0 var(--s2)} .logobar__note{grid-column:1} .hero{background:var(--paper)} .hero__cast{background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%)} .hero__hex{grid-template-columns:repeat(2,1fr)} .nums{grid-template-columns:repeat(2,1fr)} .people{grid-template-columns:1fr; gap:var(--s5)} .brands{grid-template-columns:1fr} .jobs{grid-template-columns:1fr} .flow{grid-template-columns:1fr} .spcta{display:flex} body{padding-bottom:72px} .proof-btn{bottom:82px} .stroke,.hero h1 em,.hero h1 .y{-webkit-text-stroke-width:5px} } @media (max-width:640px){ .wrap,.wrap-w{width:min(100% - 24px,100%)} .nums{grid-template-columns:1fr} .cul{grid-template-columns:1fr} .career{grid-template-columns:1fr} .day{grid-template-columns:1fr} .mv-shorts{grid-template-columns:1fr} .short{aspect-ratio:4/5} .hero__hex{grid-template-columns:repeat(2,1fr)} .frow__l{width:100%} .btn--lg{width:100%; padding:20px 20px} .hero__cast .cut:nth-child(3){display:none} .hero__cast .cut{width:44vw} } /* ============================================================ 融合版で追加 — 日本語の折り返し / ヒーロー写真 / 沿革 ============================================================ */ body,h1,h2,h3,h4,p,li,dd,dt{word-break:auto-phrase; line-break:strict; overflow-wrap:break-word} .nw{white-space:nowrap} /* ヒーローに実写(生成)メインビジュアルを敷く */ .hero__photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center right} @media (max-width:820px){ .hero__photo{object-position:72% center} } /* 背景ブランドロゴ(白1色) */ .hlogo{display:block; opacity:.5; filter:drop-shadow(0 2px 6px rgba(20,20,20,.35))} .hlogo--1{left:2%; top:12%; width:clamp(140px,20vw,300px); transform:rotate(-8deg)} .hlogo--2{right:2%; bottom:16%; width:clamp(130px,19vw,280px); transform:rotate(7deg)} /* ロゴバー：正規ロゴを白いプレートに載せる */ .blogo{display:flex; align-items:center; background:var(--white); padding:14px 22px; border:3px solid var(--ink); box-shadow:5px 5px 0 var(--yellow)} .blogo img{height:clamp(28px,3.8vw,46px); width:auto} .logobar__set{gap:clamp(18px,3vw,44px)} /* 大正 → 令和 の対比 */ .era{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); margin-bottom:var(--s6)} .era__i{margin:0; border:3px solid var(--ink); background:var(--white); box-shadow:8px 8px 0 var(--ink)} .era__ph{border-bottom:3px solid var(--ink); background:#EFEAE1; aspect-ratio:16/11; overflow:hidden} .era__ph img{width:100%; height:100%; object-fit:cover; display:block; filter:sepia(.35) contrast(1.05)} .era__ph--now{background:#fff; display:grid; place-items:center} .era__ph--now img{filter:none; width:100%; height:auto; max-height:100%; object-fit:contain} .era__ph--empty{display:grid; place-items:center; text-align:center; background:repeating-linear-gradient(45deg,#E7E1D6 0 10px,#DCD5C8 10px 20px)} .era__ph--empty span{font-size:12.5px; font-weight:900; color:var(--ink-80); line-height:1.8} .era__ph--empty small{font-size:11px; font-weight:700; color:var(--ink-55)} .era__i figcaption{padding:var(--s3); display:flex; flex-direction:column; gap:8px} .era__tag{align-self:flex-start; font-family:var(--latin); font-weight:600; font-size:11.5px; letter-spacing:.16em; background:var(--green-deep); color:var(--white); padding:4px 11px} .era__tag--now{background:var(--red-d)} .era__i b{font-family:var(--sans); font-weight:900; font-size:clamp(16px,1.9vw,21px); line-height:1.55} .era__d{font-size:13px; line-height:1.95; color:var(--ink-80); font-weight:500} @media (max-width:760px){ .era{grid-template-columns:1fr; gap:var(--s3)} } /* 沿革 */ .hist{border:3px solid var(--ink); background:var(--white)} .hist__h{background:var(--green-deep); color:var(--white); font-family:var(--sans); font-weight:900; font-size:clamp(16px,2vw,22px); padding:15px 22px; letter-spacing:.08em; line-height:1.6} .hist dl{margin:0} .hist__row{display:grid; grid-template-columns:auto 1fr; border-bottom:2px solid var(--paper-2)} .hist__row:last-child{border-bottom:0} .hist dt{font-family:var(--latin); font-weight:600; font-size:clamp(17px,2vw,22px); color:var(--red-d); padding:15px 18px; border-right:2px solid var(--paper-2); font-variant-numeric:tabular-nums; white-space:nowrap; display:flex; align-items:center} .hist dd{margin:0; padding:15px 20px; font-size:14.5px; line-height:1.9} .hist__who{display:inline-block; font-size:11px; font-weight:900; letter-spacing:.06em; padding:3px 9px; margin-right:10px; vertical-align:2px; white-space:nowrap} .hist__who--g{background:var(--paper-2); color:#4A4038} .hist__who--c{background:var(--green-deep); color:var(--white)} .hist__date{display:inline-block; margin-right:10px; font-size:12px; font-weight:900; color:var(--ink-55); white-space:nowrap} .hist__row.rv{opacity:0; transform:translateX(-40px); transition:opacity .6s var(--ease), transform .6s var(--ease)} .hist__row.rv.is-in{opacity:1; transform:none} @media (max-width:560px){ .hist dt{font-size:16px; padding:12px 10px} .hist dd{padding:12px 12px; font-size:13.5px} } /* ============================================================ 切り抜き写真（POPに、セクションからはみ出させる） 写真が届いたら .popcut__ph を に置き換えるだけ ============================================================ */ .popcut{position:absolute; z-index:6; display:block; pointer-events:none; filter:drop-shadow(0 12px 24px rgba(20,20,20,.22))} .popcut img{display:block; width:100%; height:auto} .popcut__ph{display:block; width:100%; aspect-ratio:3/4.4; background:linear-gradient(150deg,#D9D4CC 0%,#ADA7A0 55%,#807A73 100%); -webkit-mask:var(--silhouette) center bottom/contain no-repeat; mask:var(--silhouette) center bottom/contain no-repeat} .popcut__tag{position:absolute; display:block; max-width:150px; left:44px; bottom:6px; font-size:10px; line-height:1.5; letter-spacing:.03em; color:var(--ink); background:rgba(255,255,255,.94); border-left:3px solid var(--green); padding:5px 8px; font-weight:600} .popcut{z-index:2; width:min(200px, calc((100vw - var(--wrap)) / 2 - 24px))} .popcut--l{left:12px; bottom:4%} .popcut--r{right:12px; top:4%} @media (max-width:1440px){ .popcut{display:none} } /* ヒーローの帯の両側に置くブランドロゴ（読み込み時に外から飛んでくる） */ .hero__brandrow{position:relative; z-index:10; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; overflow:visible; justify-items:center; gap:clamp(24px,6vw,120px); margin-top:clamp(26px,4.5vw,60px); width:min(100% - (var(--hj) + 24px) * 2, 1440px); margin-inline:auto} .hero .hero__band{margin-top:clamp(20px,3vw,34px); position:relative; z-index:14} @media (max-width:1100px){ :root{--hj:clamp(100px,10vw,150px)} .hjump{bottom:auto; top:14%} } .hbrand{position:relative; z-index:10; min-width:0; display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; max-width:760px} .hbrand img{display:block; width:min(100%,760px); max-width:100%; height:auto; object-fit:contain; filter:drop-shadow(0 3px 10px rgba(20,20,20,.5)) drop-shadow(0 0 2px rgba(255,255,255,.9))} .hbrand b{font-family:var(--sans); font-weight:900; font-size:clamp(12px,1.4vw,18px); letter-spacing:.05em; background:var(--green-deep); color:var(--white); padding:7px 16px; white-space:nowrap; transform:rotate(-1deg)} .hbrand i{display:block; margin-top:7px; font-style:normal; font-family:var(--sans); font-weight:900; font-size:clamp(11px,1.15vw,14px); letter-spacing:.08em; color:var(--ink); background:rgba(255,255,255,.92); padding:5px 14px; white-space:nowrap; transform:rotate(-1deg)} .hbrand--l{transform:none} .hbrand--r{transform:none} .hbrand--r img{width:min(100%,640px)} @keyframes flyInL{from{transform:translateX(-46vw) rotate(-16deg)} to{transform:none}} @keyframes flyInR{from{transform:translateX(46vw) rotate(16deg)} to{transform:none}} @media (max-width:760px){ .hero__brandrow{grid-template-columns:1fr 1fr; gap:10px} .hbrand img{max-width:210px} .hbrand b{font-size:10.5px; padding:3px 9px} } /* 大事にしている価値観 */ #values{background-color:#FFF3A8; isolation:isolate} #values .sec-en{color:var(--red-d)} #values .sec-title{color:var(--ink)} #values .sec-title em{color:var(--red)} #values .sec-lead{color:#3B3200} #values .sec-head{max-width:100%; margin-bottom:0} .vhead{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s5); align-items:center; margin-bottom:var(--s6)} .vph{margin:0} .vph img{display:block; width:100%; height:auto; border:3px solid var(--ink); box-shadow:9px 9px 0 var(--ink)} @media (max-width:860px){ .vhead{grid-template-columns:1fr; gap:var(--s4)} } @media (max-width:860px){ #values .sec-head{max-width:100%} } #values > .wrap{position:relative; z-index:3} #values .splat{opacity:.25} .values{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3)} .val{position:relative; overflow:hidden; background:var(--white); color:var(--ink); border:3px solid var(--ink); box-shadow:8px 8px 0 var(--yellow); padding:var(--s4) var(--s3) var(--s4); text-align:center} .val__bg{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; z-index:0} .val__bg svg{width:94%; height:auto; max-height:88%} .val > *:not(.val__bg){position:relative; z-index:1} .val:nth-child(1) .val__bg svg{fill:#C79A00; opacity:.10} .val:nth-child(2) .val__bg svg{fill:#5E8B12; opacity:.10} .val:nth-child(3) .val__bg svg{fill:none; stroke:#127C8C; stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round; opacity:.16} .val__ico{display:grid; place-items:center; width:clamp(66px,7.4vw,92px); aspect-ratio:1; margin:0 auto var(--s2); border:3px solid var(--ink); border-radius:50%;} .val__ico svg{width:62%; height:62%; fill:var(--ink); stroke:none} .val__ico--1{background:var(--yellow)} .val__ico--2{background:var(--lime)} .val__ico--3{background:var(--cyan)} @media (prefers-reduced-motion:no-preference){ .val.is-in .val__ico{animation:valPop .6s cubic-bezier(.2,1.5,.4,1) .25s both} } @keyframes valPop{0%{transform:scale(.4) rotate(-18deg)}100%{transform:none}} .val b{display:block; font-family:var(--display); font-weight:400; font-synthesis:none; font-size:clamp(38px,6vw,72px); line-height:1.1; letter-spacing:.02em} .val__sub{display:inline-block; font-style:normal; font-family:var(--sans); font-weight:900; font-size:13px; letter-spacing:.04em; background:var(--yellow); color:var(--ink); padding:6px 12px; margin-bottom:14px; line-height:1.6; box-decoration-break:clone; -webkit-box-decoration-break:clone} .val span{display:block; font-family:var(--latin); font-weight:600; font-size:11px; letter-spacing:.3em; color:var(--red-d); margin:6px 0 14px} .val p{font-size:13.5px; line-height:2; color:var(--ink-80); font-weight:500; text-align:left} .val p + p{margin-top:12px} @media (max-width:860px){ .values{grid-template-columns:1fr} } /* READ MORE で開くインタビュー */ .pc__more{cursor:pointer; font:inherit} .pc__full{margin-top:var(--s2); background:var(--white); border:2px solid var(--ink); padding:var(--s3)} .pc__full[hidden]{display:none !important} .pc__full dl{margin:0} .pc__full dt{font-weight:900; font-size:13.5px; line-height:1.75; color:var(--ink); margin-bottom:8px; display:flex; align-items:flex-start; gap:10px; word-break:normal} .pc__full dt::before{content:""; flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--yellow) var(--qi) center/20px 20px no-repeat; border:2px solid var(--ink); margin-top:-2px} .pc__full dt:nth-of-type(1){--qi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E")} .pc__full dt:nth-of-type(2){--qi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M6 20v-6l4-3 4 4 4-7v12'/%3E%3C/svg%3E")} .pc__full dt:nth-of-type(3){--qi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 14c.8 1.4 2 2 3.5 2s2.7-.6 3.5-2'/%3E%3Cpath d='M9 9.5h.01M15 9.5h.01'/%3E%3C/svg%3E")} .pc__full dd{margin:0 0 var(--s3) 44px; font-size:13px; line-height:2; color:var(--ink-80); font-weight:500; word-break:normal; text-align:justify} @media (max-width:560px){ .pc__full dd{margin-left:0} } .pc__full dd:last-of-type{margin-bottom:0} .pc__note{margin-top:var(--s2); font-size:11px; line-height:1.6; color:var(--red-d); font-weight:700} /* スタッフ紹介の実写 */ .pc__img{display:block; width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center 22%} /* 商品の切り抜き（部分的に配置。写真が届いたら .prod__ph を に置き換え） */ .prod{position:absolute; z-index:6; pointer-events:none; filter:drop-shadow(0 10px 20px rgba(20,20,20,.28)); transform-origin:center} .prod img{max-width:100%} .prod img{display:block; width:100%; height:auto} .prod__tag{position:absolute; left:50%; transform:translateX(-50%); bottom:-26px; white-space:nowrap; font-size:10.5px; font-weight:700; letter-spacing:.03em; color:var(--ink); background:rgba(255,255,255,.94); border-left:3px solid var(--red); padding:4px 8px} @media (max-width:920px){ .prod{display:none} } /* シフトのパターン */ .shift{margin-top:var(--s5); border:3px solid var(--ink); background:var(--white)} .shift__h{background:var(--ink); color:var(--white); font-family:var(--display); font-weight:400; font-size:clamp(17px,2.2vw,23px); padding:13px 20px; letter-spacing:.03em} .shift__body{padding:var(--s3) var(--s3) var(--s4)} .shift__lead{font-size:14px; line-height:1.95; color:var(--ink-80); font-weight:500; margin-bottom:var(--s3)} .shift__brand{margin-bottom:var(--s4)} .shift__brand:last-of-type{margin-bottom:0} .shift__logo{display:block; height:clamp(46px,5.6vw,74px); width:auto; margin-bottom:var(--s3)} .shift__list{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2)} .shift__i{border:2px solid var(--ink); padding:14px 14px 16px; display:flex; flex-direction:column; gap:7px} .shift__i:nth-child(1){background:#FFF6D9} .shift__i:nth-child(2){background:#EAF7DA} .shift__i:nth-child(3){background:#DDF2F6} .shift__i:nth-child(4){background:#FDE7DC} .shift__t{font-family:var(--latin); font-weight:600; font-size:11.5px; letter-spacing:.2em; color:var(--red-d)} .shift__time{font-family:var(--display); font-weight:400; font-size:clamp(17px,2vw,22px); line-height:1.2; font-variant-numeric:tabular-nums} .shift__d{font-size:12.5px; line-height:1.8; font-weight:500; color:var(--ink-80)} .shift__d b{display:inline-block; margin-top:4px} .shift__up{display:inline-block; margin-top:8px; font-style:normal; font-weight:900; font-size:12px; background:var(--red-d); color:#fff; padding:4px 9px; letter-spacing:.02em; line-height:1.5} .shift__note{margin-top:var(--s3); font-size:12.5px; line-height:1.9; font-weight:700} @media (max-width:860px){ .shift__list{grid-template-columns:repeat(2,1fr)} } @media (max-width:520px){ .shift__list{grid-template-columns:1fr} } /* ============================================================ ヒーローの登場アニメーション（読み込み時に順番に決まる） ============================================================ */ @media (prefers-reduced-motion:no-preference){ .hero__kicker span{animation:kPop .55s cubic-bezier(.2,1.5,.35,1) both} .hero__kicker span:nth-of-type(1){animation-delay:.10s} .hero__kicker span:nth-of-type(2){animation-delay:.20s} .hero__kicker em{animation:kNum .7s cubic-bezier(.16,1.4,.3,1) .30s both} .hero h1 .l:nth-child(1){animation:hIn .8s cubic-bezier(.2,.9,.25,1) .42s both} .hero h1 .l:nth-child(2){animation:hInR .8s cubic-bezier(.2,.9,.25,1) .54s both} .hbrand--l{animation:flyInL .95s cubic-bezier(.18,.85,.25,1) .70s backwards} .hbrand--r{animation:flyInR .95s cubic-bezier(.18,.85,.25,1) .80s backwards} .hero .hero__band{animation:bandIn .7s cubic-bezier(.2,1.3,.35,1) 1.15s both} .hero__hex li{animation:hexUp .6s cubic-bezier(.2,1.2,.35,1) both} .hero__hex li:nth-child(1){animation-delay:1.35s} .hero__hex li:nth-child(2){animation-delay:1.45s} .hero__hex li:nth-child(3){animation-delay:1.55s} .hero__hex li:nth-child(4){animation-delay:1.65s} .hbrand b{animation:kPop .5s cubic-bezier(.2,1.5,.35,1) 1.05s both} } @keyframes kPop{from{opacity:0; transform:scale(.5) rotate(-10deg)} to{opacity:1; transform:none}} @keyframes kNum{0%{opacity:0; transform:translateY(-38px) scale(.55)} 100%{opacity:1; transform:none}} @keyframes hIn{from{opacity:0; transform:translateX(-70px)} to{opacity:1; transform:none}} @keyframes hInR{from{opacity:0; transform:translateX(70px)} to{opacity:1; transform:none}} @keyframes bandIn{from{opacity:0; transform:translateY(26px) rotate(-6deg) scale(.9)} to{opacity:1; transform:rotate(-1.4deg)}} @keyframes hexUp{from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none}} /* 市ごとのバッジ */ .cities{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); margin-bottom:var(--s5); position:relative; z-index:3} .city{list-style:none; border:3px solid var(--ink); box-shadow:7px 7px 0 var(--ink); padding:var(--s3) var(--s2); text-align:center; display:flex; flex-direction:column; align-items:center; gap:3px} .city--c1{background:#FFE08A} .city--c2{background:#CFEBB6} .city--c3{background:#BFE4F2} .city--c4{background:#F6CFC2} .city__pref{font-size:11.5px; font-weight:900; letter-spacing:.1em; color:var(--ink-80)} .city__name{font-family:var(--sans); font-weight:900; font-size:clamp(20px,2.6vw,30px); line-height:1.2} .city__en{font-family:var(--latin); font-weight:600; font-size:10.5px; letter-spacing:.24em; color:var(--red-d)} .city__n{margin-top:8px; font-family:var(--display); font-weight:400; font-size:clamp(26px,3.4vw,40px); line-height:1} .city__n i{font-style:normal; font-family:var(--sans); font-weight:900; font-size:.4em; margin-left:3px} @media (max-width:760px){ .cities{grid-template-columns:repeat(2,1fr); gap:var(--s2)} } /* 店舗一覧 */ .stores{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); position:relative; z-index:3} .store{background:var(--white); border:3px solid var(--ink); box-shadow:7px 7px 0 var(--ink); padding:var(--s3); display:flex; flex-direction:column; gap:9px} .store__brand{align-self:flex-start; font-size:11.5px; font-weight:900; letter-spacing:.05em; padding:4px 11px; color:var(--white)} .store__brand--h{background:var(--b-hachiban)} .store__brand--k{background:var(--b-komeda)} .store__name{font-family:var(--sans); font-weight:900; font-size:20px; line-height:1.4} .store__addr{font-size:13px; line-height:1.85; color:var(--ink-80); font-weight:500} .store__act{margin-top:auto; padding-top:10px; border-top:2px dashed var(--ink); display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap} .store__tel{font-family:var(--latin); font-weight:600; font-size:17px; letter-spacing:.02em; text-decoration:none} .store__map{font-size:12px; font-weight:900; background:var(--green-deep); color:var(--white); padding:6px 12px; text-decoration:none; white-space:nowrap} .store__map:hover{background:var(--ink)} /* ---- Stores: embedded Google Map ---- */ .storemap{position:relative; margin-bottom:var(--s5); border:3px solid var(--ink); box-shadow:7px 7px 0 var(--ink); background:var(--white); z-index:3} .storemap__frame{width:100%; height:440px; border:0; display:block; filter:grayscale(1) contrast(1.08)} .storemap__bar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-top:3px solid var(--ink); background:var(--white)} .storemap__now{font-weight:900; font-size:15px} .storemap__now small{display:block; font-size:11px; font-weight:700; color:var(--ink-55); letter-spacing:.05em} .storemap__open{font-size:12px; font-weight:900; background:var(--red-d); color:var(--white); padding:8px 14px; text-decoration:none; white-space:nowrap} .storemap__open:hover{background:var(--ink)} .store{cursor:pointer; transition:transform .2s, box-shadow .2s} .store:hover{transform:translate(-2px,-2px); box-shadow:9px 9px 0 var(--ink)} .store.is-on{background:var(--red); color:var(--white); border-color:var(--ink)} .store.is-on .store__addr, .store.is-on .store__name{color:var(--white)} .store.is-on .store__act{border-color:rgba(255,255,255,.7)} .store.is-on .store__tel{color:var(--white)} .store:focus-visible{outline:3px solid var(--red); outline-offset:3px} @media (max-width:560px){ .storemap__frame{height:300px} .storemap__bar{flex-direction:column; align-items:flex-start} } @media (max-width:900px){ .stores{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .stores{grid-template-columns:1fr} } /* ============================================================ HERO v4 ── 「抜き文字の中で、現場が動いている」 左：8番グリーンの面を、極太ゴシックで“くり抜く”。 穴の向こうで実際の店舗映像が流れる。 右：同じ映像がそのまま見えている。 境目：コメダのブラウンで1本の線。2ブランドの会社であることを、 装飾ではなく構造で示す。 ============================================================ */ .hero{padding:0; background:var(--ink); overflow:hidden} .hv{position:relative; width:100%; height:min(100svh,880px); min-height:540px; overflow:hidden; background:#101010} .hv__video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; filter:saturate(1.08) contrast(1.05) brightness(1.06)} .hv__grade{position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.14) 72%,rgba(0,0,0,.46) 100%)} .hv__ko{position:absolute; left:0; top:0; width:54%; height:100%; z-index:2; display:block; border-right:18px solid var(--b-komeda)} .hv__ko--sp{display:none} .hv__reveal{display:none} /* 映像の出どころを明示する小さな注記 */ .hv__note{position:absolute; right:16px; bottom:14px; z-index:3; font-size:11px; letter-spacing:.06em; font-weight:700; color:#fff; background:rgba(20,20,20,.72); padding:5px 11px} /* ヒーロー直下の黒帯：109年カウンター ＋ 導線 */ .hv__bar{background:var(--ink); color:#fff; border-top:4px solid var(--b-komeda)} .hv__bar-in{width:min(100% - 32px,1400px); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding:18px 0 20px; flex-wrap:wrap} .hv__kick{display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:.04em; font-size:clamp(14px,1.5vw,17px); color:#fff} .hv__kick .hv__y{color:var(--yellow)} /* 既存の巨大サイズを、黒帯におさまる寸法へ上書き */ .hv__kick em.flap{display:inline-flex; gap:5px; -webkit-text-stroke:0; filter:none; color:#fff; line-height:1; letter-spacing:0; font-size:clamp(40px,5.2vw,62px); transform:rotate(-2deg); margin:0 4px; perspective:900px} .hv__cta{display:flex; gap:14px; flex-wrap:wrap} @media (max-width:820px){ /* スマホは「抜き文字パネル1枚」に集約。映像はMOVIEセクションで通して見せる */ .hv{height:auto; aspect-ratio:390/470; min-height:0; background:var(--green); border-bottom:10px solid var(--b-komeda)} .hv__grade{display:none} .hv__ko--pc{display:none} .hv__ko--sp{display:block; width:100%; height:100%; border-right:0} .hv__reveal{display:none} .hv__note{right:10px; bottom:10px; font-size:10px} .hv__bar-in{justify-content:center; text-align:center; gap:var(--s2); padding:16px 0 18px} .hv__cta{width:100%} .hv__cta .btn{flex:1 1 auto; justify-content:center} } @media (prefers-reduced-motion:reduce){ .hv__video{display:none} .hv{background:#101010 url(../hero-poster.jpg) center/cover no-repeat} } .mv-real{position:relative; border:4px solid var(--ink); box-shadow:12px 12px 0 var(--yellow); background:#000} .mv-real__v{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#000} .mv-real .yt__cap{position:static; background:var(--ink); color:#fff; padding:14px 18px; font-size:13px; line-height:1.7; border-top:4px solid var(--ink)} .mv-real .yt__cap b{font-size:16px; font-weight:900; letter-spacing:.02em} .mv-real .yt__cap span{background:none; color:#C9C3BB; display:inline; padding:0; font-size:13px; font-weight:500; letter-spacing:.02em; transform:none; border:0; box-shadow:none} /* 縦型ショートはスクロールで見えたときに読み込む（初期表示を軽く保つ） */ .short__v{background:#1b1b1b} @media (max-width:760px){ .mv-real{box-shadow:7px 7px 0 var(--yellow)} } /* ============================================================ v5 ADD-ON LAYER ／ 2026 1. キネティック帯（スクロール速度に連動する流れ文字） 2. 反転フラップ「あなたの行き先」— このサイトの署名 3. 縦型ショート・リール（スワイプ＋タップで音） 4. 微粒子グレイン（紙の手触り） 既存のトークン（--ink / --yellow / --red / --paper）をそのまま使用。 ============================================================ */ /* ---------- 4. グレイン ---------- */ body::after{ content:""; position:fixed; inset:0; z-index:9990; pointer-events:none; opacity:.055; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:multiply; } @media (prefers-reduced-motion: reduce){ body::after{opacity:.03} } /* ---------- 1. キネティック帯 ---------- */ .kmq{ background:var(--ink); color:var(--paper); overflow:hidden; position:relative; z-index:4; border-top:4px solid var(--yellow); border-bottom:4px solid var(--yellow); padding:14px 0; user-select:none; } .kmq__t{ display:flex; width:max-content; will-change:transform } .kmq__g{ display:flex; align-items:center; flex:none } .kmq__w{ font-family:var(--display); font-size:clamp(26px,4.4vw,54px); line-height:1; padding:0 .32em; white-space:nowrap; letter-spacing:.01em; } .kmq__w--o{ color:transparent; -webkit-text-stroke:1.5px var(--paper); } .kmq__d{ flex:none; width:clamp(10px,1.3vw,16px); aspect-ratio:1; background:var(--yellow); transform:rotate(45deg) } @media (max-width:640px){ .kmq{padding:10px 0; border-width:3px} } /* ヒーローの小リンク */ .hv__dq{ display:inline-flex; align-items:center; gap:8px; margin-top:12px; font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--ink); border-bottom:2px solid currentColor; padding-bottom:2px; } .hv__dq b{ background:var(--ink); color:var(--yellow); font-size:11px; padding:2px 7px; border-bottom:0 } .sec--dark .hv__dq, .hv__bar .hv__dq{ color:inherit } /* ---------- 2. 反転フラップボード ---------- */ .dq{ background:#0B0B0B; color:#fff; padding:var(--s8) 0; position:relative; overflow:hidden } .dq::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.25; background:repeating-linear-gradient(180deg, transparent 0 3px, rgba(255,255,255,.045) 3px 4px); } .dq__head{ position:relative; z-index:2; max-width:720px; margin-bottom:var(--s5) } .dq__ttl{ font-family:var(--display); font-size:clamp(30px,5.4vw,58px); line-height:1.18; margin:0 0 14px; } .dq__ttl i{ font-style:normal; color:var(--yellow) } .dq__lead{ font-size:14.5px; line-height:1.95; color:#C9C4BC; font-weight:500 } /* 板 */ .dqb{ position:relative; z-index:2; background:#121212; border:3px solid #000; box-shadow:12px 12px 0 var(--yellow); margin-bottom:var(--s5); } .dqb__bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--green-deep,#0B5D34); color:#fff; padding:9px 16px; font-family:var(--latin); font-size:12px; letter-spacing:.16em; font-weight:600; } .dqb__bar span{ font-family:var(--sans); letter-spacing:.06em; font-weight:700 } .dqb__clock{ font-variant-numeric:tabular-nums; color:var(--yellow) } .dqb__rows{ padding:10px 12px 14px } .dqr{ display:grid; grid-template-columns:84px minmax(0,1fr); align-items:center; gap:14px; padding:9px 4px; border-bottom:1px dashed #2C2C2C; } .dqr:last-child{ border-bottom:0 } .dqr__l{ font-size:11.5px; font-weight:900; letter-spacing:.12em; color:#8E887F; writing-mode:horizontal-tb; white-space:nowrap; } .dqr__v{ display:flex; flex-wrap:wrap; gap:2px; min-width:0 } .fc{ position:relative; display:inline-block; min-width:.66em; padding:3px 2px 4px; background:#1C1C1C; border-radius:2px; color:var(--yellow); font-family:var(--sans); font-weight:900; font-size:clamp(17px,2.5vw,27px); line-height:1.15; font-variant-numeric:tabular-nums; text-align:center; box-shadow:inset 0 -1px 0 rgba(0,0,0,.6); } .fc::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:#000; opacity:.6 } .fc--sp{ background:transparent; box-shadow:none; min-width:.3em } .fc--sp::after{ display:none } .fc.is-turn{ color:#6E6862; transform:scaleY(.86) } .fc.is-set{ animation:fcSet .22s var(--ease) } @keyframes fcSet{ 0%{transform:scaleY(.7)} 60%{transform:scaleY(1.06)} 100%{transform:scaleY(1)} } .dqr--sm .fc{ font-size:clamp(13px,1.8vw,18px); min-width:.6em } .dqr--pay .fc{ color:#fff } @media (max-width:640px){ .dqb__rows{ padding:6px 8px 10px } .dqr{ grid-template-columns:1fr; gap:5px; padding:8px 2px } .dqr__l{ font-size:10.5px } .dqb{ box-shadow:7px 7px 0 var(--yellow) } } /* 設問 */ .dq__ask{ position:relative; z-index:2; display:grid; gap:var(--s3) } .dqq{ border-top:1px solid #262626; padding-top:var(--s3) } .dqq__q{ font-size:14px; font-weight:900; margin-bottom:12px; color:#fff } .dqq__q em{ font-style:normal; color:var(--yellow); margin-right:8px; font-family:var(--latin) } .dqq__o{ display:flex; flex-wrap:wrap; gap:9px } .dqo{ border:2px solid #3A3A3A; background:transparent; color:#E6E1D8; font-size:13.5px; font-weight:700; padding:9px 16px; border-radius:999px; transition:background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease); } .dqo:hover{ border-color:var(--yellow); color:#fff } .dqo.is-on{ background:var(--yellow); border-color:var(--yellow); color:var(--ink) } /* 結果 */ .dq__out{ position:relative; z-index:2; margin-top:var(--s5); display:none; gap:14px; flex-wrap:wrap; align-items:center } .dq__out.is-on{ display:flex } .dq__note{ order:9; flex:1 1 100%; font-size:12.5px; line-height:1.9; color:#B6B0A8; font-weight:500; min-width:0; margin:0 } .dq__btn{ display:inline-block; background:var(--yellow); color:var(--ink); font-weight:900; font-size:15px; padding:15px 28px; border:3px solid #000; box-shadow:6px 6px 0 #000; transition:transform .16s var(--ease), box-shadow .16s var(--ease); } .dq__btn:hover{ transform:translate(3px,3px); box-shadow:3px 3px 0 #000 } .dq__btn--g{ background:transparent; color:#fff; border-color:#4A4A4A; box-shadow:none } .dq__btn--g:hover{ transform:none; border-color:var(--yellow) } .dq__again{ order:5; background:none; border:0; color:#8E887F; font-size:12.5px; font-weight:700; text-decoration:underline; text-underline-offset:4px; padding:8px 0; } .dq__again:hover{ color:var(--yellow) } /* ---------- 3. 縦型ショート：スマホは横スワイプ ---------- */ #movie .mv-shorts{ row-gap:var(--s5) } #movie .short:nth-child(4){ box-shadow:8px 8px 0 var(--lime) } #movie .short:nth-child(5){ box-shadow:8px 8px 0 var(--orange) } #movie .short:nth-child(6){ box-shadow:8px 8px 0 var(--paper) } /* ---------- 縦型ショート：枠いっぱいに映像、キャプションは映像の上 ---------- */ #movie .short{ background:#000; border:3px solid var(--paper); box-shadow:8px 8px 0 var(--red) } #movie .short:nth-child(2){ box-shadow:8px 8px 0 var(--yellow) } #movie .short:nth-child(3){ box-shadow:8px 8px 0 var(--cyan) } #movie .short__v{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; display:block } #movie .short__cap{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:28px 12px 11px; font-size:12.5px; font-weight:900; color:#fff; background:linear-gradient(to top, rgba(0,0,0,.8), transparent); } @media (max-width:760px){ #movie .short{ box-shadow:6px 6px 0 var(--red) } #movie .short:nth-child(2){ box-shadow:6px 6px 0 var(--yellow) } #movie .short:nth-child(3){ box-shadow:6px 6px 0 var(--cyan) } } @media (max-width:760px){ #movie .mv-shorts{ display:flex; grid-template-columns:none; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:0 20px 18px; margin-inline:calc(50% - 50vw); scrollbar-width:none; } #movie .mv-shorts::-webkit-scrollbar{ display:none } #movie .short{ flex:0 0 min(74vw,300px); scroll-snap-align:center } } .mv-swipe{ margin-top:12px; font-size:12px; font-weight:700; color:#B6B0A8; letter-spacing:.04em } @media (min-width:761px){ .mv-swipe{ display:none } } /* ヒーロー黒帯の中では白抜き */ .hv__cta .hv__dq{ color:#fff } /* ---------- 5. 個人情報の取り扱い（モーダル） ---------- */ .pvm .jmodal__box{ box-shadow:14px 14px 0 var(--green-deep,#0B5D34) } .pvm .jmodal__ttl{ font-family:var(--sans); font-weight:800; letter-spacing:.01em; font-size:clamp(18px,2.6vw,25px); line-height:1.45; margin:0 0 var(--s3); padding-right:52px } .pv{ font-size:14px; line-height:1.95; color:var(--ink-80) } .pv__lead{ background:var(--white); border:2px solid var(--ink); padding:14px 16px; font-size:13.5px; margin:0 0 var(--s4) } .pv h4{ font-size:15px; font-weight:900; color:var(--ink); margin:var(--s4) 0 6px; padding-left:12px; border-left:6px solid var(--yellow) } .pv p{ margin:0 0 6px } .pv ul{ list-style:none; padding:0; margin:0 0 6px } .pv li{ position:relative; padding-left:18px; margin-bottom:2px } .pv li::before{ content:""; position:absolute; left:2px; top:.75em; width:7px; height:7px; background:var(--red) } .pv b{ color:var(--ink); font-weight:900 } .pv__q{ display:inline-block; background:var(--yellow); color:var(--ink); font-size:11.5px; font-weight:900; padding:1px 8px; margin-left:4px } .pv__contact{ background:var(--paper-2); border:2px dashed var(--ink-55); padding:14px 16px; margin-top:10px; font-weight:700; color:var(--ink) } .pv__contact a{ color:var(--red-d); text-decoration:underline; text-underline-offset:3px; word-break:break-all } .pv__rev{ margin-top:var(--s3); font-size:12px; color:var(--ink-55) } .entry__pv{ margin-top:var(--s3); font-size:12.5px; font-weight:700; line-height:1.9; color:var(--ink-80); position:relative; z-index:3; } .entry__pv button{ font-weight:900; color:var(--ink); text-decoration:underline; text-underline-offset:4px; cursor:pointer; padding:0; } .entry__pv button:hover{ color:var(--red-d) } /* ---------- 6. エントリー：ブランド別のマイナビ導線 ---------- */ .entpick{ display:grid; gap:10px; margin-top:var(--s3) } .entpick__b{ display:block; position:relative; background:var(--white); border:3px solid var(--ink); padding:14px 44px 14px 18px; font-weight:900; font-size:15.5px; color:var(--ink); box-shadow:5px 5px 0 var(--ink); transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease); } .entpick__b small{ display:block; font-size:11.5px; font-weight:700; color:var(--ink-55); margin-top:3px; letter-spacing:.02em } .entpick__b::after{ content:""; position:absolute; right:18px; top:50%; width:14px; height:14px; margin-top:-8px; border-right:3px solid currentColor; border-top:3px solid currentColor; transform:rotate(45deg); } .entpick__b:hover{ background:var(--yellow); transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink) } .entpick__b--nc{ background:var(--ink); color:var(--paper); box-shadow:5px 5px 0 var(--yellow) } .entpick__b--nc small{ color:#A9A39A } .entpick__b--nc:hover{ background:var(--ink); color:var(--yellow) } .entpick__b.is-wait{ background:transparent; border-style:dashed; border-color:var(--ink-55); color:var(--ink-55); box-shadow:none; cursor:default; pointer-events:none; } .entpick__b.is-wait small{ color:var(--ink-55) } .entpick__b.is-wait::after{ opacity:.4 } .entpick__wait{ margin-top:12px; font-size:12.5px; font-weight:700; line-height:1.9; color:var(--ink-80); border-left:5px solid var(--yellow); padding-left:12px; } .entpick__wait a{ text-decoration:underline; text-underline-offset:3px; font-weight:900 } /* ---------- 7. フッターのリンクをカラフルなボタンに ---------- */ .ft .ft__list{ gap:12px 12px } .ft .ft__list li > a, .ft .ft__list li > .ft__pv{ display:inline-block; padding:9px 15px; font-family:var(--sans); font-weight:900; font-size:13.5px; border:2px solid var(--ink); border-radius:0; cursor:pointer; text-align:left; box-shadow:4px 4px 0 var(--white); transition:transform .14s var(--ease), box-shadow .14s var(--ease), filter .14s var(--ease); } .ft .ft__list li > a:hover, .ft .ft__list li > .ft__pv:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--white); filter:brightness(1.07); } .ft .ft__list li:nth-child(6n+1) > a, .ft .ft__list li:nth-child(6n+1) > .ft__pv{ background:var(--red); color:#fff } .ft .ft__list li:nth-child(6n+2) > a, .ft .ft__list li:nth-child(6n+2) > .ft__pv{ background:var(--yellow); color:var(--ink) } .ft .ft__list li:nth-child(6n+3) > a, .ft .ft__list li:nth-child(6n+3) > .ft__pv{ background:var(--cyan); color:var(--ink) } .ft .ft__list li:nth-child(6n+4) > a, .ft .ft__list li:nth-child(6n+4) > .ft__pv{ background:var(--lime); color:var(--ink) } .ft .ft__list li:nth-child(6n+5) > a, .ft .ft__list li:nth-child(6n+5) > .ft__pv{ background:var(--orange); color:var(--ink) } .ft .ft__list li:nth-child(6n+6) > a, .ft .ft__list li:nth-child(6n+6) > .ft__pv{ background:var(--green); color:#fff } @media (max-width:640px){ .ft .ft__list li > a, .ft .ft__list li > .ft__pv{ font-size:12.5px; padding:8px 12px; box-shadow:3px 3px 0 var(--white) } } /* ---------- 8. 見出しを袋文字に（太い書体の可読性対策） ---------- */ .dq__ttl{ font-family:var(--sans); font-weight:700; font-size:clamp(24px,4.1vw,45px); line-height:1.36; letter-spacing:.025em; paint-order:stroke fill; -webkit-text-stroke:2px var(--red); text-stroke:2px var(--red); } .dq__ttl i{ color:var(--yellow) } @media (max-width:640px){ .dq__ttl{ -webkit-text-stroke-width:1.4px; text-stroke-width:1.4px } } @supports not (paint-order:stroke){ .dq__ttl{ -webkit-text-stroke:0; text-shadow:-1px 0 var(--red), 1px 0 var(--red), 0 -1px var(--red), 0 1px var(--red) } } /* ---------- 9. ヒーローの六角形：黒帯と同化していたので色を分ける ---------- */ .hero__hex .hex--ink{ background:var(--cyan); color:var(--ink) } .hero__hex .hex--ink small{ color:var(--ink) } /* ---------- 10. ヒーロー：モノクロ化＋パネルを細く ---------- */ .hv__video{ filter:grayscale(1) contrast(1.12) brightness(1.04) } .hv__ko--pc{ width:28% } @media (max-width:900px){ .hv__ko--pc{ width:100% } } /* ---------- 11. ヘッダーのナビもカラフルなボタンに ---------- */ .gnav{ gap:7px } .gnav a:not(.btn){ font-size:11.5px; font-weight:900; letter-spacing:0; padding:5px 9px; border:2px solid var(--ink); border-bottom:2px solid var(--ink); color:var(--ink); transition:transform .13s var(--ease), filter .13s var(--ease); } .gnav a:not(.btn):hover{ transform:translateY(-2px); filter:brightness(1.08); color:var(--ink); border-bottom-color:var(--ink) } .gnav a:not(.btn):nth-of-type(6n+1){ background:var(--red); color:#fff } .gnav a:not(.btn):nth-of-type(6n+2){ background:var(--yellow) } .gnav a:not(.btn):nth-of-type(6n+3){ background:var(--cyan) } .gnav a:not(.btn):nth-of-type(6n+4){ background:var(--lime) } .gnav a:not(.btn):nth-of-type(6n+5){ background:var(--orange) } .gnav a:not(.btn):nth-of-type(6n+6){ background:var(--white) } .gnav a:not(.btn):nth-of-type(6n+1):hover{ color:#fff } @media (max-width:1280px){ .gnav{ display:none } .burger{ display:block } } /* ドロワーも同じ配色に */ .drawer a:not(.btn){ border-left:8px solid var(--yellow) } .drawer a:not(.btn):nth-of-type(6n+1){ border-left-color:var(--red) } .drawer a:not(.btn):nth-of-type(6n+2){ border-left-color:var(--yellow) } .drawer a:not(.btn):nth-of-type(6n+3){ border-left-color:var(--cyan) } .drawer a:not(.btn):nth-of-type(6n+4){ border-left-color:var(--lime) } .drawer a:not(.btn):nth-of-type(6n+5){ border-left-color:var(--orange) } .drawer a:not(.btn):nth-of-type(6n+6){ border-left-color:var(--green) } /* ---------- 12. 行き先ボード：ブロードウェイの劇場前 ---------- */ .dq{ background:linear-gradient(180deg,#140E0B 0%,#1B120D 55%,#0C0807 100%) } .dq__city{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; filter:sepia(.22) saturate(.9) contrast(1.02); } /* ブロードウェイの街並み（薄く／レトロ調） */ .dq__city::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:min(100%,920px); background-image:url("../img/6549978b641a.jpg"); background-size:cover; background-position:center 42%; background-repeat:no-repeat; opacity:.55; -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 20%, #000 100%); mask-image:linear-gradient(180deg, transparent 0%, #000 20%, #000 100%); } /* 通りの光と靄 */ .dq__city::after{ content:""; position:absolute; inset:0; background: radial-gradient(110% 60% at 50% 58%, rgba(255,176,74,.20), transparent 66%), linear-gradient(180deg, rgba(10,7,5,.80) 0%, rgba(10,7,5,.34) 34%, rgba(10,7,5,.68) 72%, rgba(10,7,5,.88) 100%); } .dq::before{ opacity:.16 } /* 既存の走査線を弱める */ /* マーキー（電球枠） */ .dqmq{ position:relative; z-index:2; padding:15px; margin-bottom:var(--s5); background:linear-gradient(180deg,#3A1A12,#24100B); border:3px solid #000; box-shadow:0 0 0 3px #6B3A22, 14px 14px 0 rgba(0,0,0,.55); } .dqmq .dqb{ margin-bottom:0; box-shadow:0 10px 26px rgba(0,0,0,.6) } .dqmq__b{ position:absolute; z-index:3; pointer-events:none; background-image:radial-gradient(circle, #FFF0C4 0 1.7px, rgba(255,206,120,.55) 2.3px, rgba(255,180,80,0) 4.6px); background-size:15px 15px; background-position:center; animation:bulbGlow 2.4s ease-in-out infinite; } .dqmq__b--t{ top:1px; left:1px; right:1px; height:14px } .dqmq__b--b{ bottom:1px; left:1px; right:1px; height:14px; animation-delay:1.2s } .dqmq__b--l{ top:15px; bottom:15px; left:1px; width:14px; animation-delay:.6s } .dqmq__b--r{ top:15px; bottom:15px; right:1px; width:14px; animation-delay:1.8s } @keyframes bulbGlow{ 0%,100%{opacity:.55} 50%{opacity:1} } @media (prefers-reduced-motion:reduce){ .dqmq__b{ animation:none; opacity:.85 } } @media (max-width:640px){ .dqmq{ padding:11px; box-shadow:0 0 0 2px #6B3A22, 8px 8px 0 rgba(0,0,0,.5) } .dqmq__b{ background-size:12px 12px } .dqmq__b--t,.dqmq__b--b{ height:11px } .dqmq__b--l,.dqmq__b--r{ width:11px; top:11px; bottom:11px } } /* ---------- 13. スタッフ紹介：01の横にインタビュー動画 ---------- */ .people{ grid-template-columns:repeat(6,1fr); align-items:stretch } .people > .pc:nth-of-type(1){ grid-column:span 3 } .people > .pvid{ grid-column:span 3 } .people > .pc:nth-of-type(n+2){ grid-column:span 2 } /* .pvid を挟んだぶん、既存の nth-child による色分けがズレるので指定し直す */ .people > .pc:nth-of-type(1){ background:var(--yellow) } .people > .pc:nth-of-type(2){ background:var(--lime) } .people > .pc:nth-of-type(3){ background:var(--cyan) } .people > .pc:nth-of-type(4){ background:var(--orange) } .pvid__frame{ position:relative; height:100%; min-height:460px; background:var(--ink); border:3px solid var(--ink); box-shadow:9px 9px 0 var(--cyan); overflow:hidden; } .pvid__v{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) } .pvid__ph{ position:absolute; inset:0; display:grid; align-content:center; gap:10px; padding:26px; background:linear-gradient(150deg,#1C1917,#0E0C0B); text-align:left; } .pvid__frame.is-live .pvid__ph{ display:none } .pvid__badge{ justify-self:start; background:var(--cyan); color:var(--ink); font-family:var(--latin); font-size:11px; font-weight:600; letter-spacing:.16em; padding:4px 10px; } .pvid__t{ font-family:var(--display); font-size:clamp(19px,2.2vw,27px); line-height:1.5; color:#fff; margin:0 } .pvid__n{ font-size:11.5px; line-height:1.85; color:#9A938B; font-weight:600; margin:0 } .pvid__n b{ color:var(--yellow) } .pvid__play{ position:absolute; right:14px; bottom:14px; z-index:3; width:56px; height:56px; border-radius:50%; background:var(--yellow); color:var(--ink); border:3px solid var(--ink); font-size:17px; line-height:1; display:none; place-items:center; padding-left:3px; } .pvid__frame.is-live .pvid__play{ display:grid } .pvid__play:hover{ transform:scale(1.06) } @media (max-width:1100px){ .pvid__frame{ height:auto; min-height:0; aspect-ratio:16/9 } .people{ grid-template-columns:repeat(2,1fr) } .people > .pc:nth-of-type(1), .people > .pvid, .people > .pc:nth-of-type(n+2){ grid-column:span 1 } } @media (max-width:700px){ .people{ grid-template-columns:1fr } } /* ---------- 14. ヒーローの枠をゴールドに ---------- */ .hv__gold{ position:absolute; top:0; bottom:0; left:28%; width:18px; z-index:3; pointer-events:none; transform:translateX(-100%); background:linear-gradient(90deg,#5C4412 0%,#9A7620 16%,#D8B63F 38%,#F7E9AE 50%,#D8B63F 62%,#9A7620 84%,#5C4412 100%); box-shadow:0 0 14px rgba(216,182,63,.28); } .hv__ko--pc{ border-right-color:#8A6A1E } .hv__bar{ border-top:4px solid #C9A227 } @media (max-width:900px){ .hv__gold{ display:none } .hv__note{ top:calc(var(--header-h) + 8px) !important; bottom:auto !important } } /* ---------- 15. ボタンを少しずつ傾ける ---------- */ .gnav a:not(.btn){ --rot:0deg; transform:rotate(var(--rot)) } .gnav a:not(.btn):hover{ transform:rotate(var(--rot)) translateY(-3px) } .gnav a:not(.btn):nth-of-type(5n+1){ --rot:-2.2deg } .gnav a:not(.btn):nth-of-type(5n+2){ --rot:1.4deg } .gnav a:not(.btn):nth-of-type(5n+3){ --rot:-.7deg } .gnav a:not(.btn):nth-of-type(5n+4){ --rot:2.3deg } .gnav a:not(.btn):nth-of-type(5n+5){ --rot:-1.5deg } .gnav .btn{ transform:rotate(1.8deg) } .gnav .btn:hover{ transform:rotate(1.8deg) translateY(-3px) } .ft .ft__list li > a, .ft .ft__list li > .ft__pv{ --rot:0deg; transform:rotate(var(--rot)) } .ft .ft__list li > a:hover, .ft .ft__list li > .ft__pv:hover{ transform:rotate(var(--rot)) translate(2px,2px) } .ft .ft__list li:nth-child(5n+1) > a, .ft .ft__list li:nth-child(5n+1) > .ft__pv{ --rot:-2.6deg } .ft .ft__list li:nth-child(5n+2) > a, .ft .ft__list li:nth-child(5n+2) > .ft__pv{ --rot:1.8deg } .ft .ft__list li:nth-child(5n+3) > a, .ft .ft__list li:nth-child(5n+3) > .ft__pv{ --rot:-1.1deg } .ft .ft__list li:nth-child(5n+4) > a, .ft .ft__list li:nth-child(5n+4) > .ft__pv{ --rot:3deg } .ft .ft__list li:nth-child(5n+5) > a, .ft .ft__list li:nth-child(5n+5) > .ft__pv{ --rot:-2deg } @media (prefers-reduced-motion:reduce){ .gnav a:not(.btn), .gnav .btn, .ft .ft__list li > a, .ft .ft__list li > .ft__pv{ --rot:0deg; transform:none } } /* ---------- 16. おためし勤務ルート ---------- */ .routes{ grid-template-columns:repeat(3,1fr) } @media (max-width:1040px){ .routes{ grid-template-columns:1fr } } .route--try{ box-shadow:8px 8px 0 var(--cyan) } .route--try .route__tag{ background:var(--cyan) } .route--try .btn--ghost:hover{ background:var(--cyan) } .route--try .route__meta{ margin-top:12px; margin-bottom:0 } .route--try .route__d b{ background:linear-gradient(transparent 62%, var(--cyan) 62%); font-weight:900; color:var(--ink) } /* ---------- 17. 奨学金返還支援バンド ---------- */ .schol{ background:var(--green-deep,#0B5D34); color:#fff; padding:var(--s8) 0; position:relative; overflow:hidden } .schol::before{ content:""; position:absolute; inset:0; opacity:.18; pointer-events:none; background:repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.06) 22px 24px) } .schol__in{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s5); align-items:center; position:relative; z-index:3 } .schol__tag{ display:inline-block; background:var(--yellow); color:var(--ink); font-weight:900; font-size:clamp(13px,1.6vw,17px); letter-spacing:.05em; padding:10px 20px; transform:rotate(-1.4deg); margin-bottom:20px; border:3px solid #000; box-shadow:5px 5px 0 #000 } .schol__h{ font-family:var(--sans); font-weight:900; font-size:clamp(23px,3.6vw,38px); line-height:1.45 } .schol__h em{ font-style:normal; color:var(--yellow) } .schol__p{ margin-top:16px; font-size:14px; line-height:2; color:#DCD6CC; font-weight:500; max-width:40em } .schol__num{ display:flex; gap:22px; flex-wrap:wrap; margin-top:var(--s3) } .schol__num b{ display:inline-flex; align-items:baseline; gap:4px; font-family:var(--sans); font-weight:700; font-size:clamp(26px,3.4vw,38px); line-height:1.1; color:var(--yellow); background:#0A0806; border-radius:3px; padding:8px 12px 10px; font-variant-numeric:tabular-nums; box-shadow:inset 0 -2px 0 rgba(0,0,0,.6) } .schol__num span{ font-size:11.5px; font-weight:700; letter-spacing:.04em; color:#B8B2A8 } .schol__num i{ font-style:normal; font-size:.4em; font-weight:900; color:#fff } .schol__num p{ margin:0 } .schol__num span{ display:block; margin-top:8px } .schol__btn{ display:inline-block; background:var(--yellow); color:var(--ink); font-weight:900; font-size:clamp(18px,2.2vw,24px); line-height:1.5; text-align:center; padding:30px 40px; border:5px solid #000; box-shadow:12px 12px 0 #000; white-space:nowrap; transition:transform .16s var(--ease), box-shadow .16s var(--ease) } .schol__btn small{ display:block; font-size:12.5px; font-weight:700; letter-spacing:.05em; margin-top:8px; color:var(--ink-80) } .schol__btn:hover{ transform:translate(4px,4px); box-shadow:5px 5px 0 #000 } @media (max-width:900px){ .schol__in{ grid-template-columns:1fr; gap:var(--s4) } .schol__btn{ display:block; white-space:normal } } /* ---------- 18. 応募される方へのメッセージ（3つの入口） ---------- */ .cmsg{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin-top:var(--s5); position:relative; z-index:3 } .cmsg__i{ background:var(--white); border:3px solid var(--ink); box-shadow:8px 8px 0 var(--ink); padding:var(--s4) var(--s3) var(--s3); position:relative } .cmsg__i:nth-child(1){ box-shadow:8px 8px 0 var(--red) } .cmsg__i:nth-child(2){ box-shadow:8px 8px 0 var(--cyan) } .cmsg__i:nth-child(3){ box-shadow:8px 8px 0 var(--lime) } .cmsg__to{ display:inline-block; background:var(--ink); color:#fff; font-size:11.5px; font-weight:900; letter-spacing:.05em; padding:5px 12px; margin-bottom:14px } .cmsg__h{ font-weight:900; font-size:clamp(17px,1.9vw,20px); line-height:1.6; margin-bottom:12px } .cmsg__h em{ font-style:normal; background:linear-gradient(transparent 62%, var(--yellow) 62%) } .cmsg__t{ font-size:13.5px; line-height:2; color:var(--ink-80); font-weight:500 } .cmsg__t + .cmsg__t{ margin-top:10px } .cmsg__v{ margin-top:14px; padding-top:12px; border-top:2px dashed var(--ink-55); font-size:12px; font-weight:900; color:var(--ink) } .cmsg__v span{ display:inline-block; background:var(--yellow); padding:2px 8px; margin-right:6px } @media (max-width:1000px){ .cmsg{ grid-template-columns:1fr } } .cmsg__all{ margin-top:var(--s4); background:var(--ink); color:#fff; padding:22px 26px; font-size:clamp(14px,1.8vw,18px); font-weight:700; line-height:1.9; text-align:center; position:relative; z-index:3; box-shadow:8px 8px 0 var(--yellow) } .cmsg__all b{ color:var(--yellow); font-weight:900 } @media (max-width:640px){ .cmsg__all{ padding:18px; text-align:left; box-shadow:6px 6px 0 var(--yellow) } } /* ---------- 19. タイミーおためし勤務：店舗ごとのボタン ---------- */ .routes .route--wide{ grid-column:1 / -1 } .tmgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:var(--s3) } .tmb{ display:flex; align-items:center; gap:10px; background:var(--white); border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:10px 12px; cursor:pointer; min-width:0; transition:transform .14s var(--ease), box-shadow .14s var(--ease), background .14s var(--ease); } .tmb--h{ box-shadow:4px 4px 0 var(--b-hachiban) } .tmb--k{ box-shadow:4px 4px 0 var(--b-komeda) } .tmb__logo{ height:26px; width:auto; flex:none } .tmb__n{ font-weight:900; font-size:14px; line-height:1.4; min-width:0 } .tmb:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); background:var(--yellow) } .tmb.is-wait{ background:transparent; border-style:dashed; border-color:var(--ink-55); box-shadow:none; cursor:default; pointer-events:none; opacity:.72 } .tmgrid__wait{ margin-top:14px; font-size:12.5px; font-weight:700; line-height:1.9; color:var(--ink-80); border-left:5px solid var(--cyan); padding-left:12px } .tmgrid__wait a{ text-decoration:underline; text-underline-offset:3px; font-weight:900 } @media (max-width:1040px){ .tmgrid{ grid-template-columns:repeat(3,1fr) } } @media (max-width:700px){ .tmgrid{ grid-template-columns:repeat(2,1fr) } .tmb__n{ font-size:13px } } /* ---------- 20. 人を知る：準備中の枠 ---------- */ .pc--soon{ background:var(--paper-2) } .pc__ph--soon{ position:relative; aspect-ratio:4/5; background: repeating-linear-gradient(135deg, #DDD5C4 0 14px, #E7E0D1 14px 28px); display:grid; place-items:center } .pc__soon{ font-weight:900; font-size:14px; line-height:1.8; color:var(--ink-55); text-align:center; letter-spacing:.04em } .pc--soon .pc__txt{ color:var(--ink-55) } /* ============================================================ v6 最終レイヤー：MANIFESTO / BRAND SWITCH / STORIES / おためし導線 ============================================================ */ /* ---------- MANIFESTO ---------- */ .mf{position:relative; background:var(--ink); color:var(--white); height:210vh} .mf__in{position:sticky; top:0; height:100vh; max-width:var(--wrap); margin:0 auto; padding:calc(var(--header-h) + 24px) 24px 40px; display:flex; flex-direction:column; justify-content:center} .mf__en{font-family:var(--latin); font-weight:600; font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--yellow); margin:0 0 28px} .mf__txt{font-family:var(--display); font-weight:400; font-synthesis:none; letter-spacing:.02em; font-size:clamp(28px,5.4vw,78px); line-height:1.32; margin:0} .mf__txt em{font-style:normal} .mf__txt .c{opacity:.13; transition:opacity .22s linear, color .22s linear} .mf__txt .c.on{opacity:1} .mf__txt .c.hl.on{color:var(--yellow)} .mf__nums{list-style:none; margin:clamp(28px,5vh,56px) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,64px); opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .6s var(--ease)} .mf.is-done .mf__nums{opacity:1; transform:none} .mf__nums b{display:block; font-family:var(--display); font-weight:400; font-synthesis:none; color:var(--yellow); font-size:clamp(40px,6vw,88px); line-height:1} .mf__nums b i{font-style:normal; font-family:var(--sans); font-weight:900; font-size:.34em; color:var(--white); margin-left:4px} .mf__nums span{display:block; margin-top:8px; font-size:13px; font-weight:700; color:rgba(255,255,255,.78)} @media (max-width:600px){ .mf{height:190vh} .mf__txt{font-size:clamp(24px,7.4vw,34px)} .mf__nums{gap:18px 26px} .mf__nums li{min-width:40%} } /* ---------- BRAND SWITCH ---------- */ .bsw{position:relative; height:250vh; --bsw-c:#D4322A; background:var(--bsw-c)} .bsw__stage{position:sticky; top:0; height:100vh; overflow:hidden; color:var(--white); display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:clamp(24px,4vw,64px); max-width:var(--wrap); margin:0 auto; padding:calc(var(--header-h) + 20px) 24px 70px} .bsw__txt{position:relative; min-height:360px} .bsw__p{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; opacity:0; transform:translateY(30px); transition:opacity .5s var(--ease), transform .5s var(--ease); pointer-events:none} .bsw__p.is-on{opacity:1; transform:none} .bsw__kick{font-family:var(--latin); font-weight:600; font-size:12px; letter-spacing:.24em; color:var(--yellow); margin:0 0 14px} .bsw__name{font-family:var(--display); font-weight:400; font-synthesis:none; letter-spacing:.02em; font-size:clamp(40px,5.8vw,92px); line-height:1.1; margin:0; white-space:nowrap; text-shadow:6px 6px 0 var(--ink)} .bsw__copy{font-family:var(--display); font-weight:400; font-synthesis:none; font-size:clamp(20px,2.6vw,34px); line-height:1.5; margin:22px 0 0} .bsw__tags{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-wrap:wrap; gap:8px} .bsw__tags li{font-size:13px; font-weight:900; padding:6px 12px; background:var(--white); color:var(--ink); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink)} .bsw__vids{position:relative; justify-self:center; height:min(64vh,600px); aspect-ratio:9/16} .bsw__v{position:absolute; inset:0; border:4px solid var(--ink); box-shadow:12px 12px 0 var(--ink); background:#111; overflow:hidden; opacity:0; transform:rotate(3deg) scale(.92); transition:opacity .5s var(--ease), transform .6s cubic-bezier(.2,1.3,.35,1)} .bsw__v--k{transform:rotate(-3deg) scale(.92)} .bsw__v.is-on{opacity:1; transform:rotate(-2deg)} .bsw__v--k.is-on{transform:rotate(2deg)} .bsw__v video{width:100%; height:100%; object-fit:cover; display:block} .bsw__v span{position:absolute; left:10px; bottom:10px; font-size:11px; font-weight:900; background:var(--yellow); color:var(--ink); padding:3px 8px; white-space:nowrap} .bsw__meter{position:absolute; left:24px; right:24px; bottom:22px; display:flex; align-items:center; gap:12px; font-size:12px; font-weight:900; max-width:520px} .bsw__meter i{flex:1; height:4px; background:rgba(255,255,255,.3); position:relative} .bsw__meter b{position:absolute; left:0; top:0; bottom:0; width:0; background:var(--yellow)} .bsw__end{position:absolute; right:24px; bottom:18px; margin:0; font-weight:900; font-size:14px; opacity:0; transform:translateY(10px); transition:.5s var(--ease)} .bsw.is-end .bsw__end{opacity:1; transform:none} .bsw__end .sp{display:none} @media (max-width:820px){ .bsw{height:230vh} .bsw__stage{grid-template-columns:1fr; grid-template-rows:auto 1fr; align-items:start; gap:14px; padding:calc(var(--header-h) + 12px) 18px 96px} .bsw__txt{min-height:0; height:clamp(210px,31vh,260px)} .bsw__p{justify-content:flex-start} .bsw__name{font-size:clamp(34px,10.5vw,56px); text-shadow:4px 4px 0 var(--ink)} .bsw__copy{font-size:18px; margin-top:10px} .bsw__tags{margin-top:12px} .bsw__tags li{font-size:11px; padding:4px 8px} .bsw__vids{height:min(40vh,380px); width:auto; align-self:start; margin-top:6px} .bsw__v{box-shadow:7px 7px 0 var(--ink)} .bsw__meter{display:none} .bsw__end{left:18px; right:18px; bottom:82px; font-size:12.5px; text-align:left; background:var(--ink); padding:8px 12px; line-height:1.6} .bsw__end .sp{display:inline} } @media (max-width:820px) and (max-height:700px){ .bsw__vids{height:30vh} } /* ---------- STORIES ---------- */ .stories{margin:0 0 var(--s6); position:relative; z-index:3} .stories__h{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin:0 0 12px; font-family:var(--latin); font-weight:600; font-size:13px; letter-spacing:.24em} .stories__h span{font-family:var(--sans); letter-spacing:.02em; font-size:12px; font-weight:700; color:var(--ink-55)} .stories__ig{margin-left:auto; font-family:var(--sans); letter-spacing:0; font-size:12px; font-weight:900; color:var(--red-d)} .stories__row{display:flex; gap:clamp(12px,2vw,22px); overflow-x:auto; padding:6px 4px 14px; scrollbar-width:none; -webkit-overflow-scrolling:touch} .stories__row::-webkit-scrollbar{display:none} .story-b{flex:0 0 auto; width:96px; border:0; background:none; padding:0; cursor:pointer; text-align:center; font:inherit; color:var(--ink)} .story-b__r{display:block; width:96px; height:96px; border-radius:50%; padding:4px; background:conic-gradient(from 200deg, var(--red), var(--orange), var(--yellow), var(--lime), var(--cyan), var(--red)); transition:transform .25s cubic-bezier(.2,1.5,.4,1)} .story-b:hover .story-b__r{transform:scale(1.07) rotate(-4deg)} .story-b.is-seen .story-b__r{background:#BDB5A7} .story-b__r img{display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; border:3px solid var(--paper); background:var(--paper-2)} .story-b__r img.mono{filter:grayscale(1) contrast(1.05)} .story-b__n{display:block; margin-top:7px; font-size:12px; font-weight:900; line-height:1.35} .story-b:focus-visible{outline:3px solid var(--red); outline-offset:3px; border-radius:8px} @media (max-width:600px){ .story-b{width:78px} .story-b__r{width:78px; height:78px} .story-b__n{font-size:11px} } /* ---------- STORY VIEWER ---------- */ .sv{position:fixed; inset:0; z-index:10000; background:rgba(12,12,12,.94); display:flex; align-items:center; justify-content:center} .sv[hidden]{display:none} .sv__f{position:relative; height:min(92vh,860px); aspect-ratio:9/16; background:#000; border:3px solid var(--white); overflow:hidden; animation:svIn .35s cubic-bezier(.2,1.3,.35,1)} @keyframes svIn{from{transform:scale(.9); opacity:0} to{transform:none; opacity:1}} @media (max-width:600px){ .sv__f{width:100%; height:100%; aspect-ratio:auto; border:0} } .sv__bars{position:absolute; top:10px; left:10px; right:10px; display:flex; gap:4px; z-index:4} .sv__bars i{flex:1; height:3px; background:rgba(255,255,255,.35); overflow:hidden} .sv__bars b{display:block; height:100%; width:0; background:var(--white)} .sv__hd{position:absolute; top:22px; left:12px; right:8px; z-index:4; display:flex; align-items:center; gap:10px; color:var(--white); font-size:13px; font-weight:900; text-shadow:0 1px 4px rgba(0,0,0,.6)} .sv__hd img{width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid var(--white); background:#333} .sv__x{margin-left:auto; background:none; border:0; color:var(--white); font-size:34px; line-height:1; cursor:pointer; padding:0 8px} .sv__m{position:absolute; inset:0; background:#111} .sv__m video,.sv__m img{width:100%; height:100%; object-fit:cover; display:block} .sv__m img.mono{filter:grayscale(1) contrast(1.05); object-position:50% 20%} .sv__cap{position:absolute; left:0; right:0; bottom:0; z-index:4; padding:90px 18px 24px; color:var(--white); background:linear-gradient(transparent, rgba(0,0,0,.82)); pointer-events:none} .sv__cap small{display:inline-block; background:var(--yellow); color:var(--ink); font-size:11px; font-weight:900; padding:3px 8px; margin-bottom:10px} .sv__cap p{margin:0; font-family:var(--display); font-weight:400; font-synthesis:none; letter-spacing:.02em; font-size:clamp(18px,2.4vh,23px); line-height:1.5} .sv__cta{pointer-events:auto; display:inline-block; margin-top:14px; background:var(--red); color:var(--white); border:2px solid var(--white); box-shadow:4px 4px 0 var(--ink); padding:10px 16px; font-size:13px; font-weight:900; text-decoration:none} .sv__nav{position:absolute; top:70px; bottom:130px; z-index:3; width:38%; background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent} .sv__nav--p{left:0; width:30%} .sv__nav--n{right:0; width:70%} body.sv-open{overflow:hidden} /* ---------- 店舗カード：おためし勤務 ---------- */ .store__try{flex:1 0 100%; display:flex; justify-content:space-between; align-items:center; margin-top:2px; font-size:12.5px; font-weight:900; text-decoration:none; color:var(--ink); background:var(--yellow); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); padding:7px 12px; transition:transform .15s, box-shadow .15s} .store__try:hover{transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink)} .store__try span{font-family:var(--latin)} .store.is-on .store__try{box-shadow:3px 3px 0 var(--ink)} @media (prefers-reduced-motion: reduce){ .mf{height:auto} .mf__in{position:relative; height:auto; padding:var(--s8) 24px} .mf__txt .c{opacity:1} .mf__txt .c.hl{color:var(--yellow)} .mf__nums{opacity:1; transform:none} .bsw__p,.bsw__v,.sv__f{transition:none; animation:none} } /* ---------- マイナビ：店舗を選んで応募 ---------- */ .store__job{flex:1 0 100%; display:flex; justify-content:space-between; align-items:center; font-size:12.5px; font-weight:900; text-decoration:none; color:var(--white); background:var(--red-d); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); padding:7px 12px; transition:transform .15s, box-shadow .15s} .store__job:hover{transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink)} .store__job span{font-family:var(--latin)} .store.is-on .store__job{background:var(--ink); border-color:var(--white)} .shoppick{margin:18px 0 6px} .shoppick__h{font-size:13px; font-weight:900; margin:0 0 10px} .shoppick__g{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px} .shoppick__b{display:flex; flex-direction:column; gap:2px; padding:9px 12px 10px; text-decoration:none; color:var(--ink); background:var(--white); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); border-left-width:8px; transition:transform .15s, box-shadow .15s} .shoppick__b--hachiban{border-left-color:var(--b-hachiban)} .shoppick__b--komeda{border-left-color:var(--b-komeda)} .shoppick__b:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink)} .shoppick__b small{font-size:10.5px; font-weight:700; color:var(--ink-55)} .shoppick__b b{font-size:15px; font-weight:900} .shoppick__b span{font-size:11px; font-weight:900; color:var(--red-d); margin-top:2px} .shoppick--ent{grid-column:1 / -1; background:var(--paper); border:2px dashed var(--ink); padding:14px; margin:4px 0 8px} .entpick__b.is-open{outline:3px solid var(--red); outline-offset:2px} /* ---------- スタッフ紹介:動画枠なし → 3列×2段にそろえる ---------- */ @media (min-width:1101px){ .people > .pc:nth-of-type(1){ grid-column:span 2 } } /* ============================================================ v8（2026-10-01）: 下層ページ（/stores/ と /jobs/）への導線 ============================================================ */ .store__page{flex:1 0 100%; display:flex; justify-content:space-between; align-items:center; font-size:12.5px; font-weight:900; text-decoration:none; color:var(--ink); background:var(--white); border:2px solid var(--ink); padding:7px 12px; margin-bottom:8px} .store__page span{font-family:var(--latin)} .store__page:hover{background:var(--yellow)} .store--dark .store__page{background:transparent; color:var(--white); border-color:var(--white)} .jobs__pages{margin-top:10px; font-size:13px; color:var(--ink-55); display:flex; flex-wrap:wrap; align-items:center; gap:8px} .jobs__pages a{display:inline-block; color:var(--ink); text-decoration:none; font-weight:700; border:2px solid var(--ink); border-radius:999px; padding:2px 12px; background:var(--white)} .jobs__pages a:hover{background:var(--yellow)}