/* 採用ページ（/recruit/）。プロトタイプ recruit260910 の CSS を .rc-top／.rc-sub の配下にスコープして移植（260917）。 共通CSSと同名のクラス11個は rc- 付きに改名。色と書体の変数は本サイトのもの。元は scratchpad/port_recruit.py で生成 */ .rc-top{--kinari:#F5F0EB;--gold-t:#7A6244;--gold-l:#B59C7E;--sub:#4E4A43;--kehai:.08;--jp:var(--serif-jp);--en:'Marcellus',serif;--it:var(--serif-en)} .rc-top *{margin:0;padding:0;box-sizing:border-box} .rc-top[data-fsize="std"]{font-size:16px} .rc-top[data-fsize="l"]{font-size:18px} .rc-top[data-fsize="xl"]{font-size:19.5px} .rc-top{font-size:var(--fs-body,1rem)} .rc-top{font-family:var(--jp);font-weight:300;background:var(--paper);color:var(--ink);line-height:2;font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased;overflow-x:clip}/* 260922：hidden だと内側の position:sticky が効かない（社員の一日の写真が貼り付かない）。clip は巻き取りだけで同じ効果 */ .rc-top img{display:block;max-width:100%} .rc-top a{color:var(--ink);text-decoration:none;transition:color .35s} .rc-top a:hover{color:var(--gold)} /* ── 260924：文字の大きさの段階（トンマナ）── これまで場当たりに足してきた結果、固定の指定が127か所・28種類まで増えていた （本文まわりだけで .90／.94／.96／.98／1.00／1.02 の6段階。画面では見分けがつかない差）。 6つの段階に寄せる。各指定は var(--fs-X, いまの値) の形にしてあるので、 **この変数を定義しないかぎり現状のまま**。表示設定の「文字の段階」で切り替えて見比べる。 --fs-h3 1.12rem 小見出し・カードの題 （いま 1.02〜1.20 の6段階） --fs-body 1rem 本文 （いま .90〜1.02 の6段階） --fs-sub .92rem 補助・説明 （いま .88〜.96） --fs-note .82rem 注記・ラベル （いま .82〜.88） --fs-en .76rem 英字の小さい字 （いま .72〜.80） --fs-mini .68rem いちばん小さい英字 （いま .58〜.70） 節の見出し（clamp）と、下のバー（px）は対象外。器の高さが決まっているため */ .rc[data-tone="scale"]{ --fs-h3:1.12rem; --fs-body:1rem; --fs-sub:.92rem; --fs-note:.82rem; --fs-en:.76rem; --fs-mini:.68rem; } .rc-top p{text-wrap:pretty} /* ── 260924：日本語の折り返し。本サイト（corp.css 49行目）と挙動を揃える ── A：word-break:auto-phrase で文節を守る。「コミュニケー／ション」のような割れ方を防ぐ。 未対応のブラウザ（iPhone の Safari を含む）では直前の normal に落ち、何も起きない。 B：どうしてもここで折りたい、という指定が来たときのために .nb を用意する。 文節を で包むと、その境目でだけ折れる。全ブラウザで効く。 ※ .nb は関連会社ページ（group.css）で「絶対に折らない」の意味で使われている。 同じ名前で意味が違うので、必ず .rc の下でスコープすること（AGENTS.md の約束） */ .rc-top h1,.rc-top h2,.rc-top h3,.rc-sub h1,.rc-sub h2,.rc-sub h3, .rc .rc-sec-title,.rc-top .h-catch,.rc-top .h-lead, .rc-top .sec-lead,.rc-sub .sec-lead, .rc-top .card-jp,.rc-top .q-q,.rc-top .bm-jp{ overflow-wrap:normal;word-break:normal;word-break:auto-phrase} /* JS が動かないときは本サイトと同じ。動けば下の [data-rcw] で文節の区切りに */ /* B：文節で折る。使った箇所だけ効く（使わなければ何も起きない） */ .rc .nb{display:inline-block} /* ── 260928 夕：見出し・短い案内文・ラベル・問い・ボタンは、文節の区切りで折る ── Chrome の word-break:auto-phrase は Safari（iPhone・Mac）で効かず、見出しなどが語の途中で折れていた。 recruit-wrap.js が、これらの部品にだけ文節の区切り（）を入れて data-rcw を付ける。ここで keep-all にし、そこでだけ折れるようにする。 入りきらない長いまとまりのときだけ、その中で折る（anywhere）。 本文（段落・箇条・表の値・よくある質問の答え・私たちの言葉など）は、本サイトと同じく行を埋めて自然に折る（corp.css の p・li・dd の決まりのまま）。 ※ はじめ本文にもかけたら、行の右が大きく空いてがたついた（宮腰さんの確認 9/28。本サイトのトンマナに合わない。原田さん） */ .rc [data-rcw]{word-break:keep-all;overflow-wrap:anywhere} .rc-top h1,.rc-top h2,.rc-top h3{font-weight:400} .rc-top ::selection{background:rgba(139,115,85,.18)} .rc-top[data-bright]{transition:filter .4s} .rc-top .nav{position:fixed;top:0;left:0;right:0;z-index:400;display:flex;align-items:center;justify-content:space-between;gap:2vw;padding:1.5rem clamp(20px,4vw,52px);background:rgba(251,249,246,0);transition:background .5s,border-color .5s,padding .5s;border-bottom:1px solid transparent} .rc-top.scrolled .nav{background:rgba(251,249,246,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom-color:var(--line);padding-top:1rem;padding-bottom:1rem} /* 260927：表示設定「冒頭でのヘッダーの背景」。on（260927 夜から既定）のときは、冒頭でもスクロール後と同じ背景（紙色の半透明・ぼかし・下の罫線）を出す。 1180px 以下はもともと背景ありなので、効くのはパソコンの幅だけ。ヘッダーの高さは、下の「ヘッダーの高さを本サイトにそろえる」（901px 以上で固定） */ .rc-top[data-navbg="on"] .nav{background:rgba(251,249,246,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom-color:var(--line)} .rc-top .brand{display:grid;gap:.18rem;line-height:1.5} .rc-top .b-en{font-family:var(--en);font-size:var(--fs-sub,.92rem);letter-spacing:.2em;color:var(--ink)} .rc-top .b-jp{font-size:var(--fs-en,.72rem);letter-spacing:.18em;color:var(--gold-t)} .rc-top .rc-nav-links{display:flex;gap:clamp(14px,2vw,32px);align-items:center} .rc-top .rc-nav-links a{font-size:var(--fs-note,.86rem);letter-spacing:.12em;color:#3A3A36;position:relative;padding-bottom:.2rem} .rc-top .rc-nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:right .4s} .rc-top .rc-nav-links a:hover::after{right:0} .rc-top .nav-home{display:grid;gap:.1rem;border:1px solid var(--line);padding:.5rem 1rem;line-height:1.6;background:rgba(251,249,246,.6)} .rc-top .nav-home .h-jp{font-size:var(--fs-en,.78rem);letter-spacing:.13em;color:var(--sub)} .rc-top .nav-home .h-en{font-family:var(--en);font-size:var(--fs-note,.84rem);letter-spacing:.15em;color:var(--ink)} .rc-top .nav-home:hover{border-color:var(--gold)} .rc-top .nav-burger{display:none} .rc-top .hero{min-height:100svh;display:grid;place-items:center;padding:clamp(104px,14vh,164px) 6vw calc(clamp(72px,9vh,104px) + 92px);text-align:center;position:relative} .rc-top .hero-in{display:grid;justify-items:center;gap:clamp(26px,4.2vh,54px);max-width:1000px;width:100%} .rc-top[data-fx-rise="1"] .hero-in>*{animation:heroRise 1s cubic-bezier(.2,.8,.2,1) both} .rc-top[data-fx-rise="1"] .h-label{animation-delay:.06s} .rc-top[data-fx-rise="1"] .h-catch{animation-delay:0s} .rc-top[data-fx-rise="1"] .h-lead{animation-delay:1.9s} .rc-top[data-fx-rise="1"] .h-btns{animation-delay:2.15s} .rc-top[data-fx-rise="1"] .h-areas{animation-delay:2.35s} .rc-top[data-fx-rise="1"] .h-sub{animation-delay:2.55s} .rc-top[data-fx-rise="1"] .h-cue{animation:heroRise 1s cubic-bezier(.2,.8,.2,1) 2.7s both} @keyframes heroRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .rc-top[data-fx-rise="1"] .h-btns a{animation:heroRise .9s cubic-bezier(.2,.8,.2,1) both} .rc-top[data-fx-rise="1"] .h-btns a:nth-child(1){animation-delay:2.2s} .rc-top[data-fx-rise="1"] .h-btns a:nth-child(2){animation-delay:2.32s} .rc-top[data-fx-rise="1"] .h-areas a{animation:heroRise .8s cubic-bezier(.2,.8,.2,1) both} .rc-top[data-fx-rise="1"] .h-areas a:nth-child(1){animation-delay:2.42s} .rc-top[data-fx-rise="1"] .h-areas a:nth-child(2){animation-delay:2.5s} .rc-top[data-fx-rise="1"] .h-areas a:nth-child(3){animation-delay:2.58s} .rc-top[data-fx-rise="1"] .h-areas a:nth-child(4){animation-delay:2.66s} .rc-top[data-fx-rise="1"] .h-areas a:nth-child(5){animation-delay:2.74s} .rc-top[data-fx-rise="1"] .h-areas a:nth-child(6){animation-delay:2.82s} /* 260927 夜：RECRUIT を 150％に（原田さん）。既定で 16.4px → 24.6px */ .rc-top .h-label{font-family:var(--en);font-size:calc(var(--fs-note,.82rem) * 1.5);letter-spacing:.4em;color:var(--gold-t)} .rc-top .h-catch{font-size:clamp(1.75rem,4.2vw,3.2rem);letter-spacing:.16em;line-height:1.8;color:var(--ink)} @media (max-width:600px){.rc-top .h-catch{font-size:clamp(1.25rem,7.2vw,1.4rem);letter-spacing:.1em;line-height:1.75} /* 冒頭だけ倍率の上限を115％に。130％にするとキャッチが4行になるため（デザイン側の助言 b）。 外側の zoom を打ち消す形で掛けるので、100〜115％のときは何も起きない */ .rc-top .hero{zoom:calc(min(1.15, var(--rc-zoom,1)) / var(--rc-zoom,1))}} .rc-top .h-lead{font-size:clamp(.95rem,1.2vw,1.08rem);letter-spacing:.1em;color:var(--sub);max-width:34em;line-height:2.1} .rc-top .h-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,1.6vw,24px)} .rc-top .h-btns a{display:grid;gap:.28rem;border:1px solid var(--gold);padding:1.05rem clamp(20px,2.4vw,38px);min-width:13.5em;background:var(--gold);color:#FFFCF6;box-shadow:0 4px 20px rgba(139,115,85,.2);transition:background .4s,border-color .4s,color .4s,transform .4s} .rc-top .h-btns .bt-jp{font-size:var(--fs-body,1.05rem);letter-spacing:.14em} .rc-top .h-btns .bt-sub{font-size:var(--fs-en,.78rem);letter-spacing:.12em;color:rgba(255,252,246,.82);transition:color .4s} .rc-top .h-btns a:hover{background:var(--ink);border-color:var(--ink);color:var(--kinari);transform:translateY(-2px)} .rc-top .h-btns a:hover .bt-sub{color:rgba(245,240,235,.78)} .rc-top .h-areas{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,2.6vw,46px)} .rc-top .h-areas a{display:grid;gap:.2rem;justify-items:center} .rc-top .h-areas .a-jp{font-size:var(--fs-body,1rem);letter-spacing:.13em} .rc-top .h-areas .a-en{font-family:var(--it);font-style:normal;font-size:var(--fs-en,.78rem);letter-spacing:.1em;color:var(--gold-t)} .rc-top .h-sub{font-family:var(--en);font-size:var(--fs-en,.76rem);letter-spacing:.32em;color:var(--gold-t)} .rc-top .h-btns a.bt-mynavi{background:var(--ink);border-color:var(--ink);color:var(--kinari);box-shadow:0 4px 22px rgba(27,42,74,.18)} .rc-top .h-btns a.bt-mynavi .bt-sub{color:rgba(245,240,235,.76)} .rc-top .h-btns a.bt-mynavi:hover{background:var(--gold);border-color:var(--gold);color:#fff} .rc-top .h-btns a.bt-mynavi:hover .bt-sub{color:rgba(255,255,255,.8)} .rc-top .h-cue{position:absolute;left:0;right:0;bottom:26px;display:grid;justify-items:center;gap:.5rem} .rc-top .h-cue span{font-family:var(--it);font-style:normal;font-size:var(--fs-en,.74rem);letter-spacing:.2em;color:var(--gold-t)} .rc-top .h-cue i{width:1px;height:38px;background:linear-gradient(to bottom,var(--gold-l),transparent);animation:cue 2.6s ease-in-out infinite} @keyframes cue{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}} .rc-top .hero-in{position:relative;z-index:2} .rc-top .h-cue{z-index:2} .rc-top .hero-bg,.rc-top .hero-hint,.rc-top .hero-tint,.rc-top .hero-sen{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .rc-top .hero-sen{display:none;-webkit-mask-image:radial-gradient(ellipse 46% 52% at 50% 50%,transparent 0%,transparent 40%,#000 82%);mask-image:radial-gradient(ellipse 46% 52% at 50% 50%,transparent 0%,transparent 40%,#000 82%)} .rc-top[data-fx-sen="1"] .hero-sen{display:block} .rc-top .hero-sen svg{width:104%;height:100%;display:block;margin-left:-2%} .rc-top .hero-sen.anim svg{animation:senDrift 34s ease-in-out infinite alternate} @keyframes senDrift{from{transform:translate3d(-1.2%,0,0)}to{transform:translate3d(1.2%,-0.8%,0)}} .rc-top .hero-icons{position:absolute;inset:0;z-index:0;pointer-events:none;display:none} .rc-top[data-fx-sen="1"][data-senkind="icons"] .hero-icons,.rc-top[data-fx-sen="1"][data-senkind="kiso"] .hero-icons{display:block} .rc-top[data-senkind="icons"] .hero-sen,.rc-top[data-senkind="kiso"] .hero-sen{display:none!important} .rc-top .hero-icons figure{position:absolute;margin:0;width:calc(clamp(120px,15vw,208px) * var(--sen-size,1));opacity:0;transition:opacity 2.2s ease} .rc-top[data-senkind="kiso"] .hero-icons figure{width:calc(clamp(168px,21vw,300px) * var(--sen-size,1))} .rc-top .hero-icons figure.on{opacity:1} .rc-top .hero-icons svg{width:100%;height:auto;display:block;overflow:visible} .rc-top .hero-icons svg g{stroke:var(--gold)} .rc-top .hero-icons svg path,.rc-top .hero-icons svg rect,.rc-top .hero-icons svg ellipse,.rc-top .hero-icons svg circle,.rc-top .hero-icons svg line,.rc-top .hero-icons svg polyline{fill:none;stroke:var(--gold);stroke-width:var(--sen-w,1.2);stroke-opacity:var(--sen-op,.16);vector-effect:non-scaling-stroke;stroke-dasharray:1000;stroke-dashoffset:1000} .rc-top[data-scalestroke="on"] .hero-icons svg path,.rc-top[data-scalestroke="on"] .hero-icons svg rect,.rc-top[data-scalestroke="on"] .hero-icons svg ellipse,.rc-top[data-scalestroke="on"] .hero-icons svg circle,.rc-top[data-scalestroke="on"] .hero-icons svg line,.rc-top[data-scalestroke="on"] .hero-icons svg polyline{vector-effect:none} .rc-top .hero-icons figure.on svg path,.rc-top .hero-icons figure.on svg rect,.rc-top .hero-icons figure.on svg ellipse,.rc-top .hero-icons figure.on svg circle,.rc-top .hero-icons figure.on svg line,.rc-top .hero-icons figure.on svg polyline{animation:iconDraw 4.6s cubic-bezier(.42,0,.3,1) both} @keyframes iconDraw{to{stroke-dashoffset:0}} @media (max-width:900px){.rc-top .hero-icons figure{width:96px}} .rc-top .hero-sen path{fill:none;stroke:var(--gold);stroke-width:var(--sen-w,1.2);stroke-opacity:var(--sen-op,.16);stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:0} .rc-top .hero-sen.anim path{animation:senDraw 16s cubic-bezier(.45,0,.3,1) infinite both} @keyframes senDraw{0%{stroke-dashoffset:1000;stroke-opacity:0}18%{stroke-opacity:var(--sen-op,.16)}62%{stroke-dashoffset:0;stroke-opacity:var(--sen-op,.16)}84%{stroke-dashoffset:0;stroke-opacity:0}100%{stroke-dashoffset:-1000;stroke-opacity:0}} .rc-top .hero-bg{margin:0;opacity:0;transition:opacity 1.4s ease} .rc-top .hero-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.72)} /* 260927：背後の写真を数枚重ね、.on の1枚だけを出す。入れ替えはゆっくりのフェードだけ */ .rc-top .hero-bg img{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease} .rc-top .hero-bg img.on{opacity:1} @media (prefers-reduced-motion:reduce){.rc-top .hero-bg img{transition:none}} .rc-top[data-fx-kehai="1"] .hero-bg{opacity:var(--kehai,.08)} .rc-top .hero-hint img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease;filter:saturate(.62)} .rc-top .hero-hint img.on{opacity:.2} .rc-top .hero-tint{opacity:0;transition:opacity 1.6s ease,background 1.6s ease} .rc-top[data-fx-jikoku="1"] .hero-tint{opacity:1} .rc-top[data-hour="morning"] .hero-tint{background:linear-gradient(175deg,rgba(178,198,224,.2),transparent 58%)} .rc-top[data-hour="day"] .hero-tint{background:linear-gradient(175deg,rgba(255,252,244,.24),transparent 52%)} .rc-top[data-hour="evening"] .hero-tint{background:linear-gradient(185deg,rgba(224,186,148,.2),transparent 62%)} .rc-top[data-hour="night"] .hero-tint{background:linear-gradient(185deg,rgba(120,130,158,.22),transparent 66%)} .rc-top .hc-seg{display:inline-block;white-space:pre} .rc-top[data-fx-yomi="1"] .h-catch.anim .hc-seg{animation:segIn .62s ease both} @keyframes segIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce),print{.rc-top .hero-icons figure svg path,.rc-top .hero-icons figure svg rect,.rc-top .hero-icons figure svg ellipse,.rc-top .hero-icons figure svg circle,.rc-top .hero-icons figure svg line,.rc-top .hero-icons figure svg polyline{animation:none;stroke-dashoffset:0} .rc-top .hero-sen.anim svg{animation:none} .rc-top .hero-sen.anim path{animation:none;stroke-dashoffset:0} .rc-top[data-fx-yomi="1"] .h-catch.anim .hc-seg{animation:none;opacity:1;transform:none} .rc-top .band-echo{opacity:1;transform:none}} .rc-top .rc-sec{padding:clamp(90px,13vh,170px) clamp(24px,7vw,110px);position:relative} .rc-top .rc-sec-head{display:grid;gap:1rem;margin-bottom:clamp(46px,6vw,84px);max-width:46em} .rc-top .rc-sec-label{font-family:var(--en);font-size:var(--fs-en,.78rem);letter-spacing:.3em;color:var(--gold-t)} .rc-top .rc-sec-title{font-size:clamp(1.45rem,2.7vw,2.05rem);letter-spacing:.2em} .rc-top .sec-lead{font-size:var(--fs-body,1rem);letter-spacing:.07em;color:var(--sub);line-height:2.2} .rc-top .rule{width:36px;height:1px;background:var(--gold-l)} .rc-top .fade{opacity:0;transform:translateY(18px);transition:opacity 1.1s ease,transform 1.1s ease} .rc-top .fade.rc-in{opacity:1;transform:none} /* 260929 夜：終わったら元の形に戻す（both → backwards）。最後の形を保つと要素ごとに描画の層が残りやすく、段落が描かれなくなる一因になる（下の 260929 夜の節） */ .rc-top[data-fx-rise="1"] .fade.rc-in>.pil,.rc-top[data-fx-rise="1"] .fade.rc-in>.num,.rc-top[data-fx-rise="1"] .fade.rc-in>.card,.rc-top[data-fx-rise="1"] .fade.rc-in>.e-row,.rc-top[data-fx-rise="1"] .fade.rc-in>a,.rc-top[data-fx-rise="1"] .fade.rc-in>.st,.rc-top[data-fx-rise="1"] .fade.rc-in>.day-row,.rc-top[data-fx-rise="1"] .fade.rc-in>.qa-i,.rc-top[data-fx-rise="1"] .fade.rc-in>p{animation:groupRise .85s cubic-bezier(.2,.8,.2,1) backwards} @keyframes groupRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .rc-top[data-fx-rise="1"] .fade.rc-in>*:nth-child(1){animation-delay:.02s} .rc-top[data-fx-rise="1"] .fade.rc-in>*:nth-child(2){animation-delay:.11s} .rc-top[data-fx-rise="1"] .fade.rc-in>*:nth-child(3){animation-delay:.2s} .rc-top[data-fx-rise="1"] .fade.rc-in>*:nth-child(4){animation-delay:.29s} .rc-top[data-fx-rise="1"] .fade.rc-in>*:nth-child(5){animation-delay:.38s} .rc-top[data-fx-rise="1"] .fade.rc-in>*:nth-child(6){animation-delay:.47s} .rc-top[data-fx-rise="1"] .fade.rc-in>*:nth-child(7){animation-delay:.56s} .rc-top[data-fx-rise="1"] .fade.rc-in>*:nth-child(8){animation-delay:.65s} .rc-top[data-fx-rise="0"] .hero-in>*,.rc-top[data-fx-rise="0"] .h-cue{animation:none} @media (prefers-reduced-motion:reduce){.rc-top[data-fx-rise="1"] .hero-in>*,.rc-top[data-fx-rise="1"] .h-cue,.rc-top[data-fx-rise="1"] .fade.rc-in>*{animation-duration:.01s}} .rc-top .band{background:var(--kinari)} .rc-top .band-head{padding:clamp(90px,13vh,170px) clamp(24px,7vw,110px) clamp(40px,5vw,64px)} .rc-top .band-track{position:relative;touch-action:pan-y} .rc-top .band-stage{position:sticky;top:0;height:100vh;overflow:hidden} .rc-top .band-rail{display:flex;height:100%;will-change:transform;transition:transform .1s linear} .rc-top .band-card{flex:0 0 100vw;height:100%;display:grid;grid-template-columns:1.05fr 1fr} .rc-top .band-photo{position:relative;overflow:hidden;background:#E4DDD2} .rc-top .band-photo img{width:100%;height:100%;object-fit:cover} .rc-top .band-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(27,42,74,.08),transparent 55%)} .rc-top .band-photo::before{content:"";position:absolute;z-index:2;inset:0 -1px 0 auto;width:0;background:linear-gradient(90deg,rgba(255,255,255,0),#fff);transition:width .5s ease;pointer-events:none} .rc-top[data-blend="soft"] .band-photo::before{width:34%} /* 260925（9/24 打合せ）：ぼかしのときに文章側の枠線が残り、境目に線が見えていた */ .rc-top[data-blend="soft"] .band-tx{position:relative;z-index:3;border-left:0} @media (max-width:900px){.rc-top[data-blend="soft"] .band-tx{border-top:0}} .rc-top .band-tx{background:#fff;color:var(--ink);display:grid;align-content:center;gap:1.6rem;padding:clamp(40px,6vw,88px);border-left:1px solid var(--line)} .rc-top .band-no{font-family:var(--it);font-style:normal;font-size:var(--fs-body,1.05rem);letter-spacing:.16em;color:var(--gold-t)} .rc-top .band-st{font-size:clamp(1.08rem,1.5vw,1.34rem);letter-spacing:.08em;line-height:2.4;max-width:25em} .rc-top .band-meta{display:grid;gap:.35rem} .rc-top .band-role{font-size:var(--fs-sub,.92rem);letter-spacing:.18em;color:var(--ink)} .rc-top .band-role-en{font-family:var(--it);font-style:normal;font-size:var(--fs-en,.76rem);letter-spacing:.14em;color:var(--gold-t)} .rc-top[data-nensu="off"] .yr,.rc-top[data-nensu="off"] .q-w .yr{display:none} /* 260926 「私たちの言葉」の .q-w .yr（下の321行目）に強さで負けて年数が出ていた */ .rc-top[data-bandmove="nav"] .band-track{height:auto!important} .rc-top[data-bandmove="nav"] .band-stage{position:static;height:auto;min-height:min(80vh,760px)} .rc-top[data-bandmove="nav"] .band-card{height:auto;min-height:min(80vh,760px)} .rc-top[data-bandmove="nav"] .band-photo{min-height:min(56vh,560px)} .rc-top[data-bandmove="nav"] .band-tx{padding-bottom:calc(clamp(40px,6vw,88px) + 62px)} .rc-top[data-bandmove="nav"] .band-rail{transition:transform 1s cubic-bezier(.65,0,.3,1)} .rc-top .band-arrows{position:absolute;left:0;right:51.2%;bottom:30px;display:none;justify-content:center;align-items:center;gap:14px;z-index:6;pointer-events:none} .rc-top .band-arrows button,.rc-top .band-arrows .bc{pointer-events:auto} .rc-top[data-bandmove="nav"] .band-arrows{display:flex} .rc-top[data-bandmove="nav"] .band-dots{left:auto;right:calc(51.2% + 24px);transform:none;bottom:94px} .rc-top .band-arrows button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(139,115,85,.5);background:rgba(251,249,246,.92);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 14px rgba(27,42,74,.14);transition:background .35s,color .35s,border-color .35s,opacity .35s} .rc-top .band-arrows button:hover{background:var(--ink);border-color:var(--ink);color:var(--kinari)} .rc-top .band-arrows button[disabled]{opacity:.32;cursor:default} .rc-top .band-arrows button[disabled]:hover{background:rgba(251,249,246,.92);color:var(--ink);border-color:rgba(139,115,85,.5)} .rc-top .band-arrows .bc{font-family:var(--it);font-style:normal;font-size:var(--fs-en,.76rem);letter-spacing:.1em;color:var(--sub);min-width:3.6em;text-align:center} .rc-top .band-dots{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);display:flex;gap:12px;z-index:5} .rc-top .band-dots button{width:7px;height:7px;border-radius:50%;border:0;background:rgba(27,42,74,.22);cursor:pointer;padding:0;transition:background .4s,transform .4s} .rc-top .band-dots button.on{background:var(--gold);transform:scale(1.5)} .rc-top[data-morelink="off"] .band-more{display:none} .rc-top .band-more{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1.4rem;padding:clamp(50px,7vw,90px) clamp(24px,7vw,110px) clamp(90px,12vh,150px);background:var(--kinari)} .rc-top .bm-l{display:grid;gap:.7rem;max-width:34em} .rc-top .bm-jp{font-size:clamp(1.15rem,2vw,1.5rem);letter-spacing:.18em} .rc-top .bm-note{font-size:var(--fs-sub,.92rem);letter-spacing:.05em;color:var(--sub);line-height:2.1} .rc-top .bm-go{display:inline-flex;align-items:center;gap:1rem;border:1px solid var(--gold);padding:1.1rem 2.5rem;font-size:var(--fs-body,.98rem);letter-spacing:.16em;white-space:nowrap;transition:background .4s,color .4s,border-color .4s} .rc-top .bm-go i{font-family:var(--it);font-style:normal;font-size:var(--fs-en,.8rem);color:var(--gold-t)} .rc-top .bm-go:hover{background:var(--ink);border-color:var(--ink);color:var(--kinari)} .rc-top .bm-go:hover i{color:var(--gold-l)} .rc-top .kachi{background:var(--kinari)} /* 260918：仕事の全体像を本サイトの工程図（.fb）に差し替え。帯は .fb 側の幅（最大1360px）で広がる */ /* 260922：仕事の全体像の図の出し分け。工程図と価値創造の図を別々に入・切（既定はどちらも出す） */ .rc-top[data-fig-flow="0"] .k-flow{display:none} .rc-top[data-fig-weave="0"] .k-wrap{display:none} /* 260927：価値創造の図を、本サイト（サービス・工程）と同じ図（.k-main）にできる（既定）。 図そのものの見た目は index.astro が service.css から抜き出し、.rc-top .k-main の中だけに当てている。ここは出し分けと器だけ */ .rc-top .k-main{display:none} /* 261001：価値創造の図の見出しは、ほかの節の見出しと同じく左の余白にそろえ、図だけを最大1360pxで中央に置く（原田さん。広い画面で見出しだけ内側に入っていた）。工程の帯（.k-flow）と同じ並び。スマホの図を止める仕組み（.is-pin）にはかけない */ @media (min-width:761px){.rc-top .k-main .k-pin{max-width:1360px;margin-left:auto;margin-right:auto}} .rc-top[data-kachistyle="main"] .k-main{display:block} .rc-top[data-kachistyle="main"] .k-wrap{display:none} .rc-top[data-fig-weave="0"] .k-main{display:none} /* スマホは本サイトと同じく、図の比率を保ったまま帯の中だけ横にスクロール（service.css の 760px・860px と同じ） */ @media (max-width:760px){ .rc-top .k-main .vc-stage{overflow-x:auto;-webkit-overflow-scrolling:touch} .rc-top .k-main .vc-figure{min-width:860px} } /* 260927 夜：価値創造の図の見出し（原田さん）。本サイトの /service/ と同じ見出しと一文を、ほかの節と同じ見出しの形で出す（index.astro）。 表示設定「価値創造の図の見出し」で入・切（既定は出す） */ .rc-top[data-kmainhead="off"] .k-main-head{display:none} /* 260927 夜：スマホ（760px 以下）で図を画面に止め、縦のスクロールで横に流す（原田さん）。JS が .is-pin を付けたときだけ効く（index.astro）。 止める位置（top）・器の高さ・横の位置は JS が入れる。止めている間は横スワイプさせない（縦のスクロールで動かすため） */ .rc-top .k-main.is-pin .k-pin-in{position:sticky} .rc-top .k-main.is-pin .vc-stage{overflow:hidden} .rc-top .k-main.is-pin .vc-figure{will-change:transform} /* 260928：止めて流しているときの一言と進み具合の線（宮腰さんの確認「横スクロールがわかりにくい」）。図の下端に重ねる */ .rc-top .k-pin-hint{display:none} .rc-top .k-main.is-pin .k-pin-hint{display:flex;position:absolute;left:12px;right:12px;bottom:10px;align-items:center;gap:.7rem;pointer-events:none;font-size:11px;letter-spacing:.08em;color:var(--sub)} .rc-top .k-pin-hint span{background:rgba(251,249,246,.92);padding:.2rem .5rem;white-space:nowrap} .rc-top .k-pin-hint .k-pin-bar{flex:1;height:1px;background:rgba(27,42,74,.14);position:relative} .rc-top .k-pin-hint .k-pin-bar b{position:absolute;left:0;top:-1px;height:3px;width:0;background:var(--gold-l)} .rc-top .k-flow{max-width:1360px;margin:0 auto clamp(64px,8vw,120px)} .rc-top .k-flow .fb{--fb-w:100%;margin-inline:0} .rc-top .k-flow-more{margin-top:clamp(28px,3.4vw,44px);font-size:var(--fs-sub,.9rem);letter-spacing:.06em;text-align:right} .rc-top .k-flow-more a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-l,#C9B084);padding-bottom:.15em} .rc-top .k-flow-more a:hover{color:var(--ink)} .rc-top .k-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:clamp(28px,3.4vw,52px);align-items:start;max-width:1560px} .rc-top .k-fig{position:relative;aspect-ratio:1672/941;background:#fff;border:1px solid var(--line);container-type:inline-size} .rc-top .k-fig>svg{position:absolute;inset:0;width:100%;height:100%} .rc-top .k-fig .weft-l{stroke:#B59C7E;stroke-width:2.4;opacity:.55;transition:opacity .4s,stroke-width .4s} .rc-top .k-fig .weft-l.lit{opacity:1;stroke-width:4.4} .rc-top .k-fig .warp{fill:none;stroke-width:3;stroke-linecap:round;opacity:.5;transition:opacity .4s,stroke-width .4s} .rc-top .k-fig .warp.lit{opacity:1;stroke-width:5} .rc-top .k-fig .noderow{opacity:.45;transition:opacity .4s} .rc-top .k-fig .noderow.lit{opacity:1} .rc-top .k-labels{position:absolute;inset:0;pointer-events:none} .rc-top .k-labels button,.rc-top .k-labels .k-out,.rc-top .k-labels .k-vision{pointer-events:auto} .rc-top .k-labels>*{position:absolute} .rc-top .k-hd{display:grid;gap:.15rem;line-height:1.6} .rc-top .k-hd .rc-jp{font-size:clamp(9px,1.3cqw,15px);letter-spacing:.12em;color:var(--ink);white-space:nowrap} /* 260922：本サイトの図（案 a）と同じ形。3つの表題を同じ高さ（17％）に、生まれるものの線を右の VISION の帯まで延ばす */ .rc-top .k-hd-warp{left:2.4%;top:17%} .rc-top .k-hd-weft{left:30.2%;top:17%} .rc-top .k-hd-val{left:73%;top:17%} .rc-top .k-col{top:30.5%;transform:translate(-50%,-100%);display:grid;justify-items:center;background:transparent;border:0;border-bottom:1px solid transparent;padding:clamp(2px,.4cqw,6px) clamp(3px,.6cqw,9px);font-family:var(--jp);font-weight:300;color:var(--ink);cursor:pointer;transition:border-color .3s,color .3s} .rc-top .k-col .rc-jp{font-size:clamp(9px,1.4cqw,16px);letter-spacing:.1em;white-space:nowrap} .rc-top .k-col:hover,.rc-top .k-col.on{border-bottom-color:var(--gold);color:var(--gold-t)} .rc-top .k-cap{right:83.2%;transform:translateY(-50%);display:flex;align-items:center;gap:clamp(4px,.85cqw,12px);background:transparent;border:0;padding:clamp(2px,.35cqw,5px) clamp(3px,.5cqw,8px);font-family:var(--jp);font-weight:300;color:var(--ink);cursor:pointer;text-align:right;transition:color .3s} .rc-top .k-cap .tx{display:grid;gap:.12rem;line-height:1.7} .rc-top .k-cap .rc-jp{font-size:clamp(9px,1.4cqw,16px);letter-spacing:.09em;white-space:pre-line;line-height:1.75} .rc-top .k-cap:hover,.rc-top .k-cap.on{color:var(--gold-t)} .rc-top .k-ic{width:clamp(14px,2.3cqw,28px);height:clamp(14px,2.3cqw,28px);flex:0 0 auto;fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s} .rc-top .k-cap.on .k-ic,.rc-top .k-cap:hover .k-ic{stroke:var(--ink)} .rc-top .k-out{left:73%;max-width:14.5%;box-sizing:border-box;transform:translateY(-50%);display:flex;align-items:center;gap:clamp(4px,.85cqw,12px);background:#fff;border:0;padding:clamp(2px,.35cqw,5px) clamp(3px,.5cqw,8px);font-family:var(--jp);font-weight:300;color:var(--ink);text-align:left;cursor:pointer;transition:color .3s} .rc-top .k-out:hover,.rc-top .k-out.on{color:var(--gold-t)} .rc-top .k-out .tx{display:grid;gap:.2rem;line-height:1.7;min-width:0} .rc-top .k-out .rc-jp{font-size:clamp(9px,1.45cqw,17px);letter-spacing:.11em;white-space:nowrap} .rc-top .k-out .sub{font-size:clamp(7.5px,1.05cqw,13px);letter-spacing:.04em;color:var(--sub);line-height:1.8} .rc-top .k-vision{right:0;top:6%;height:88%;width:11.5%;background:var(--gold);border-radius:46% 0 0 46% / 50% 0 0 50%;display:flex;align-items:center;justify-content:center;gap:.6cqw} .rc-top .k-vision .vt{writing-mode:vertical-rl;font-size:clamp(9px,1.5cqw,17px);letter-spacing:.12em;line-height:1.8;color:#FFFCF7;font-weight:300;white-space:nowrap} .rc-top .k-vision .vl{writing-mode:vertical-rl;font-family:var(--en);font-size:clamp(6px,.7cqw,9px);letter-spacing:.24em;color:#F0E6D6;opacity:.65} .rc-top .k-win{position:sticky;top:104px;background:#fff;border:1px solid var(--line);border-top:2px solid var(--gold);padding:clamp(24px,2.4vw,34px);display:grid;gap:.5rem} .rc-top .k-win .w-kind{font-family:var(--it);font-style:normal;font-size:var(--fs-en,.78rem);letter-spacing:.12em;color:var(--gold-t)} .rc-top .k-win .w-fig{display:block;margin:.5rem 0 .3rem} .rc-top .k-win .w-ic{width:46px;height:46px;fill:none;stroke:var(--gold);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round} .rc-top .k-win .w-jp{font-size:var(--fs-h3,1.2rem);letter-spacing:.14em;line-height:1.9;color:var(--ink)} .rc-top .k-win .w-en{font-family:var(--it);font-style:normal;font-size:var(--fs-en,.78rem);letter-spacing:.1em;color:var(--gold-t)} .rc-top .k-win .w-body{margin-top:.7rem;font-size:var(--fs-body,.98rem);letter-spacing:.03em;line-height:2.2;color:#33322E} .rc-top .k-win .w-q{margin-top:1.3rem;padding-left:1.2rem;border-left:1px solid var(--gold-l);font-size:var(--fs-sub,.96rem);letter-spacing:.02em;line-height:2.25;color:var(--ink)} .rc-top .k-win .w-q::before{content:"「"} .rc-top .k-win .w-q::after{content:"」"} .rc-top .k-win .w-role{margin-top:.9rem;font-size:var(--fs-note,.84rem);letter-spacing:.16em;color:var(--gold-t)} .rc-top .k-hint{margin-top:1.2rem;font-size:var(--fs-note,.84rem);letter-spacing:.05em;color:var(--gold-t);font-style:normal} @media (max-width:1180px){.rc-top .k-wrap{grid-template-columns:1fr} .rc-top .k-win{position:static}} @media (max-width:680px){.rc-top .k-fig{aspect-ratio:4/3} .rc-top .k-hd-warp,.rc-top .k-hd-weft,.rc-top .k-hd-val{top:12%} .rc-top .k-col{top:26%}} .rc-top .k-fig .weft-l,.rc-top .k-fig .warp{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s cubic-bezier(.55,0,.3,1),opacity .4s,stroke-width .4s} .rc-top .k-fig.drawn .weft-l,.rc-top .k-fig.drawn .warp{stroke-dashoffset:0} .rc-top .k-fig .noderow circle{transition:opacity .5s ease,r .3s cubic-bezier(.34,1.56,.64,1),fill .3s} .rc-top .k-fig .noderow{opacity:0;transition:opacity .6s ease} .rc-top .k-fig.drawn .noderow{opacity:.45} .rc-top .k-fig.drawn .noderow.lit{opacity:1} .rc-top .k-hit{cursor:pointer} .rc-top[data-kachistyle="touch"] .k-hit{display:none} .rc-top .k-hit circle{fill:transparent} .rc-top .k-dotmark{opacity:0;transition:opacity .45s ease,r .3s cubic-bezier(.34,1.56,.64,1)} .rc-top .k-fig.drawn .k-dotmark{opacity:1} .rc-top .k-dotmark.on{r:11} .rc-top .k-win .w-cross{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;font-size:var(--fs-note,.86rem);letter-spacing:.1em;color:var(--gold-t)} .rc-top .k-win .w-cross i{font-style:normal;color:var(--gold-l)} .rc-top .k-hint{transition:opacity .4s} .rc-top .q-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.4rem 2.6rem;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:clamp(24px,2.6vw,34px);margin-bottom:clamp(46px,6vw,84px);max-width:1240px} .rc-top .q-shuffle{display:inline-flex;align-items:center;gap:.7rem;background:transparent;border:1px solid var(--gold);color:var(--ink);padding:.85rem 1.9rem;font-family:var(--jp);font-weight:300;font-size:var(--fs-sub,.92rem);letter-spacing:.14em;cursor:pointer;transition:background .35s,color .35s,border-color .35s} .rc-top .q-shuffle:hover{background:var(--ink);border-color:var(--ink);color:var(--kinari)} .rc-top .q-shuffle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .55s ease} .rc-top .q-shuffle:hover svg{transform:rotate(-180deg)} .rc-top[data-qmode="all"] .q-shuffle{display:none} .rc-top .q-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:clamp(26px,3vw,45px);max-width:1240px} .rc-top .q-card{animation:cardRise .85s cubic-bezier(.2,.8,.2,1) both} @keyframes cardRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} .rc-top .q-tmp{font-size:var(--fs-en,.72rem);letter-spacing:.1em;color:var(--gold-l);font-style:normal} .rc-top[data-note="off"] .q-tmp{display:none} @media (prefers-reduced-motion:reduce){.rc-top .k-win.rc-in>*,.rc-top .q-card{animation-duration:.01s}} .rc-top .q-card{display:grid;gap:1rem;align-content:start;background:rgba(255,255,255,.55);border:1px solid var(--line);box-shadow:0 4px 22px rgba(27,42,74,.05);padding:clamp(26px,2.4vw,36px) clamp(22px,2vw,30px);transition:box-shadow .4s,border-color .4s} .rc-top .q-card:hover{box-shadow:0 8px 30px rgba(27,42,74,.08);border-color:var(--gold-l)} .rc-top .q-ph{aspect-ratio:4/3;background:#EDE7DE;border:1px solid var(--line);display:grid;place-items:center} .rc-top .q-ph span{font-size:var(--fs-mini,.68rem);letter-spacing:.14em;color:var(--sub);text-align:center;padding:0 1.4rem;line-height:1.9} .rc-top .q-ph.has{border-color:transparent} .rc-top .q-ph img{width:100%;height:100%;object-fit:cover} .rc-top .q-q{font-size:var(--fs-h3,1.12rem);letter-spacing:.13em;color:var(--gold-t)} .rc-top .q-a{font-size:var(--fs-body,1rem);letter-spacing:.04em;line-height:2.25} .rc-top .q-w{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;font-size:var(--fs-sub,.9rem);border-bottom:1px solid var(--line);padding-bottom:.85rem} .rc-top .q-w .ro{letter-spacing:.16em;color:var(--ink);font-weight:400} .rc-top .q-w .yr{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--it);font-style:normal;font-size:var(--fs-note,.86rem);letter-spacing:.08em;color:var(--gold-t)} .rc-top .q-w .yr .ln{display:block;width:16px;height:1px;background:var(--gold-l)} .rc-top .q-note{margin-top:clamp(30px,3.4vw,46px);font-size:var(--fs-note,.82rem);letter-spacing:.05em;color:var(--gold-t);font-style:normal} .rc-top[data-note="off"] .q-note{display:none} .rc-top .ichinichi{background:var(--kinari)} .rc-top .day-tabs{display:flex;gap:12px;margin-bottom:clamp(36px,4.5vw,58px)} .rc-top .day-tabs button{background:transparent;border:1px solid var(--line);padding:.85rem 2rem;font-family:var(--jp);font-weight:400;font-size:var(--fs-body,1rem);letter-spacing:.14em;color:var(--ink);cursor:pointer;transition:background .35s,color .35s,border-color .35s} .rc-top .day-tabs button:hover{border-color:var(--gold-l)} .rc-top .day-tabs button.on{background:var(--ink);border-color:var(--ink);color:var(--kinari)} .rc-top .day-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44%);gap:clamp(34px,4.5vw,68px);align-items:start;max-width:1240px} .rc-top .day-list{display:grid;border-top:1px solid var(--line)} .rc-top .day-row{display:grid;grid-template-columns:9.5em 1fr;gap:.3rem 1.8rem;align-items:baseline;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);border-left:2px solid transparent;padding:1.15rem 1rem 1.15rem .9rem;font-family:var(--jp);font-weight:300;color:var(--ink);cursor:pointer;transition:background .3s,border-color .3s,padding-left .3s} .rc-top .day-row:hover,.rc-top .day-row.on{background:#fff;border-left-color:var(--gold)} .rc-top .day-row.on{padding-left:1.2rem} .rc-top .day-row .day-h{transition:color .3s} .rc-top .day-row.on .day-h{color:var(--gold-t)} .rc-top .day-scene{position:sticky;top:104px;display:grid;gap:1.4rem} .rc-top .day-fig{position:relative;background:#E4DDD2;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--line)} .rc-top .day-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease} .rc-top .day-fig img.on{opacity:1} .rc-top .day-cap{display:grid;gap:.6rem} .rc-top .day-cap .c-t{font-family:var(--it);font-size:var(--fs-sub,.9rem);letter-spacing:.06em;color:var(--gold-t)} .rc-top .day-cap .c-h{font-size:var(--fs-h3,1.14rem);letter-spacing:.12em;line-height:1.9} .rc-top .day-cap .c-d{font-size:var(--fs-sub,.96rem);letter-spacing:.03em;line-height:2.2;color:var(--sub)} .rc-top .day-hint{font-size:var(--fs-note,.82rem);letter-spacing:.06em;color:var(--gold-t);font-style:normal} .rc-top .day-t{font-family:var(--it);font-size:var(--fs-sub,.95rem);letter-spacing:.06em;color:var(--gold-t)} .rc-top .day-h{font-size:var(--fs-body,1.06rem);letter-spacing:.09em} .rc-top .day-d{font-size:var(--fs-sub,.94rem);letter-spacing:.03em;color:var(--sub);margin-top:.5rem;line-height:2.1} .rc-top .vis-ja{font-size:clamp(1.3rem,2.5vw,1.95rem);letter-spacing:.2em;line-height:2} .rc-top .vis-en{display:none} .rc-top .vis-intro{margin-top:1.7rem;font-size:var(--fs-body,1.02rem);letter-spacing:.07em;color:var(--sub)} .rc-top .pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:clamp(30px,3.4vw,54px);margin-top:clamp(48px,6vw,84px);max-width:1180px} .rc-top .pil{display:grid;gap:.85rem;align-content:start;border-top:1px solid var(--line);padding-top:1.6rem} .rc-top .pil-en{display:none} .rc-top .pil-jp{font-size:var(--fs-h3,1.12rem);letter-spacing:.15em} .rc-top .pil-b{font-size:var(--fs-body,.98rem);letter-spacing:.03em;line-height:2.25;color:#33322E} .rc-top .koto-close{margin-top:clamp(46px,5.5vw,76px);font-size:var(--fs-body,1.02rem);letter-spacing:.08em;line-height:2.4;max-width:42em;border-left:1px solid var(--gold-l);padding-left:1.8rem} .rc-top .message{background:#fff} .rc-top .msg-wrap{max-width:44em} .rc-top .msg-catch{font-size:clamp(1.3rem,2.4vw,1.85rem);letter-spacing:.2em;line-height:2;color:var(--ink)} .rc-top .msg-sub{margin-top:1.5rem;font-size:var(--fs-body,1.06rem);letter-spacing:.13em;color:var(--gold-t)} .rc-top .msg-body{display:grid;gap:1.6rem;margin-top:2.2rem} .rc-top .msg-body p{font-size:var(--fs-body,1.02rem);letter-spacing:.04em;line-height:2.45;color:#33322E} .rc-top .msg-sign{margin-top:2.4rem;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:16px} /* 260928 夕：本サイトのご挨拶（greeting.css の .gr-sign）と同じ組み方に。社名と肩書きは小さく、お名前は大きく、右寄せ */ .rc-top .msg-sign .role{font-size:.84rem;color:var(--ink-soft);letter-spacing:.06em} .rc-top .msg-sign .name{font-family:var(--serif-jp);font-weight:400;font-size:1.4rem;color:var(--navy);letter-spacing:.18em} @media (max-width:768px){.rc-top .msg-sign{flex-direction:column;align-items:flex-end;gap:6px}} /* 260926：社長のお写真。表示設定で出すときだけ（既定は出さない）。PC は文章の左、スマホは上 */ .rc-top .msg-ph{display:none;margin:0} .rc-top[data-msgphoto="on"] .msg-ph{display:block} .rc-top .msg-ph img{width:100%;height:auto;display:block;object-fit:cover} @media (min-width:901px){ .rc-top[data-msgphoto="on"] .msg-wrap{max-width:none;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:clamp(32px,5vw,80px);align-items:start} } @media (max-width:900px){ .rc-top[data-msgphoto="on"] .msg-ph{margin-bottom:2rem} } .rc-top .msg-note{margin-top:1.6rem;font-size:var(--fs-note,.82rem);letter-spacing:.05em;color:var(--gold-t);font-style:normal} .rc-top[data-note="off"] .msg-note,.rc-top[data-note="off"] .ph-note{display:none} /* 260922 .qa-note は本文なので note=off でも出す */ .rc-top .e-thanks:empty,.rc-top .q-note:empty,.rc-top .msg-note:empty{display:none} .rc-top .motome{background:var(--kinari)} .rc-top .mt-body{display:grid;gap:clamp(30px,3.6vw,52px);max-width:46em} .rc-top .mt-body p{font-size:var(--fs-body,1.02rem);letter-spacing:.05em;line-height:2.45;color:#33322E} .rc-top .mt-core{color:var(--sub)!important} .rc-top .mt-after{font-size:clamp(1.1rem,2vw,1.45rem)!important;letter-spacing:.14em!important;line-height:2.3!important;color:var(--ink)!important;border-left:2px solid var(--gold);padding:.4rem 0 .4rem 1.9rem} .rc-top .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:clamp(22px,2.6vw,36px);max-width:1180px} .rc-top .card{border:1px solid var(--line);padding:2.1rem 1.9rem;display:grid;gap:.9rem;align-content:start;background:rgba(255,255,255,.4);transition:border-color .4s} /* 260928：新卒・キャリアの枠はリンクではないので、ホバーで色を変えない（リンクがあるように見えるため。宮腰さんの確認） */ .rc-top .card-jp{font-size:var(--fs-h3,1.14rem);letter-spacing:.15em} .rc-top .card-d{font-size:var(--fs-sub,.94rem);letter-spacing:.03em;color:var(--sub);line-height:2.2} .rc-top .briefing{margin-top:2rem;font-size:var(--fs-sub,.94rem);letter-spacing:.07em;color:var(--sub)} .rc-top .flow{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:clamp(46px,5.5vw,76px)} .rc-top .flow .st{border:1px solid var(--line);padding:.8rem 1.8rem;font-size:var(--fs-sub,.96rem);letter-spacing:.14em;background:rgba(255,255,255,.4)} .rc-top .flow .ar{color:var(--gold-t);font-size:var(--fs-sub,.9rem)} .rc-top .qa-list{margin-top:clamp(40px,5vw,64px);max-width:52em;border-top:1px solid var(--line)} .rc-top .qa-list .qa-i{padding:1.3rem 0;border-bottom:1px solid var(--line);display:flex;gap:1.2rem;align-items:baseline} .rc-top .qa-list .qa-q{font-family:var(--it);font-style:normal;font-size:var(--fs-sub,.9rem);color:var(--gold-t)} .rc-top .qa-list .qa-t{font-size:var(--fs-body,1.02rem);letter-spacing:.07em} .rc-top .qa-more{margin-top:clamp(28px,3vw,40px)} .rc-top .qa-more a{display:inline-flex;align-items:baseline;gap:1rem;border:1px solid var(--gold);padding:1.05rem 2.6rem;font-size:var(--fs-body,1rem);letter-spacing:.14em;transition:background .4s,color .4s,border-color .4s} .rc-top .qa-more a i{font-family:var(--it);font-style:normal;font-size:var(--fs-en,.8rem);color:var(--gold-t)} .rc-top .qa-more a:hover{background:var(--ink);border-color:var(--ink);color:var(--kinari)} .rc-top .qa-more a:hover i{color:var(--gold-l)} .rc-top .qa-note{margin-top:1.4rem;font-size:var(--fs-note,.82rem);letter-spacing:.05em;color:var(--gold-t);font-style:normal} .rc-top .entry{background:var(--kinari)} .rc-top .e-table{max-width:56em;border-top:1px solid var(--line)} .rc-top .e-row{display:grid;grid-template-columns:11em 1fr;gap:1.6rem;padding:1.4rem 0;border-bottom:1px solid var(--line)} .rc-top .e-k{font-size:var(--fs-sub,.94rem);letter-spacing:.15em;color:var(--gold-t)} .rc-top .e-v{font-size:var(--fs-body,1.02rem);letter-spacing:.05em} .rc-top .e-close{margin-top:clamp(48px,6vw,84px);display:grid;gap:1rem} .rc-top .e-thanks{font-size:var(--fs-body,1.02rem);letter-spacing:.07em;color:var(--sub)} .rc-top .e-invite{font-size:clamp(1.25rem,2.3vw,1.7rem);letter-spacing:.2em;line-height:2} .rc-top .e-mynavi{margin-top:clamp(38px,4.5vw,58px)} .rc-top .mv-btn{display:inline-flex;align-items:center;gap:clamp(18px,2.4vw,34px);background:var(--ink);color:var(--kinari);border:1px solid var(--ink);padding:1.5rem clamp(26px,3vw,48px);box-shadow:0 6px 28px rgba(27,42,74,.2);transition:background .4s,border-color .4s,transform .4s} .rc-top .mv-btn:hover{background:var(--gold);border-color:var(--gold);color:#fff;transform:translateY(-2px)} .rc-top .mv-logo{display:grid;place-items:center;background:#fff;border-radius:3px;padding:.7rem .95rem;flex:0 0 auto} .rc-top .mv-logo img{width:clamp(58px,5vw,74px);height:auto} .rc-top .h-btns a.bt-mynavi{grid-template-columns:auto 1fr;align-items:center;gap:0 1.1rem;text-align:left} .rc-top .h-btns a.bt-mynavi .bt-logo{grid-row:span 2;display:grid;place-items:center;background:#fff;border-radius:3px;padding:.5rem .6rem} .rc-top .h-btns a.bt-mynavi .bt-logo img{width:44px;height:auto} .rc-top .mv-tx{display:grid;gap:.36rem} .rc-top .mv-jp{font-size:var(--fs-h3,1.16rem);letter-spacing:.16em} .rc-top .mv-sub{font-size:var(--fs-note,.86rem);letter-spacing:.08em;color:rgba(245,240,235,.84)} .rc-top .mv-btn:hover .mv-sub{color:rgba(255,255,255,.82)} .rc-top .mv-ar{font-size:var(--fs-sub,.9rem);color:var(--gold-l)} .rc-top .mv-btn:hover .mv-ar{color:#fff} @media (max-width:600px){.rc-top .mv-btn{flex-direction:column;align-items:flex-start;gap:1rem}} .rc-top .e-cta{margin-top:clamp(26px,3vw,38px);display:flex;flex-wrap:wrap;gap:1.2rem} .rc-top .e-cta a{display:inline-flex;align-items:baseline;gap:1rem;border:1px solid var(--gold);padding:1.2rem 3rem;font-size:var(--fs-body,1.04rem);letter-spacing:.16em;transition:background .4s,color .4s,border-color .4s} .rc-top .e-cta a i{font-family:var(--it);font-style:normal;font-size:var(--fs-en,.8rem);color:var(--gold-t)} .rc-top .e-cta a:hover{background:var(--ink);border-color:var(--ink);color:var(--kinari)} .rc-top .e-cta a:hover i{color:var(--gold-l)} .rc-top .foot{border-top:1px solid var(--line);padding:2.4rem clamp(24px,7vw,110px);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;font-size:var(--fs-note,.84rem);letter-spacing:.1em;color:var(--sub)} .rc-top .foot a{border-bottom:1px solid var(--line);padding-bottom:.15rem;color:var(--sub)} .rc-top .foot a:hover{color:var(--gold);border-color:var(--gold)} .rc-top #brightVeil{position:fixed;inset:0;z-index:500;pointer-events:none;opacity:0;transition:opacity .5s ease,background .5s ease} .rc-top .rc-to-top{position:fixed;right:26px;bottom:26px;z-index:900;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;gap:1px;background:rgba(27,42,74,.86);color:var(--kinari);backdrop-filter:blur(6px);border:1px solid rgba(139,115,85,.5);box-shadow:0 6px 24px rgba(27,42,74,.22);opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);transition:opacity .4s,transform .4s cubic-bezier(.2,.8,.2,1),visibility .4s,background .3s,border-color .3s} .rc-top .rc-to-top.rc-show{opacity:1;visibility:visible;transform:none} .rc-top .rc-to-top:hover{background:var(--gold);border-color:var(--gold);transform:translateY(-3px)} .rc-top .tt-l{font-family:var(--it);font-style:normal;font-size:var(--fs-mini,.58rem);letter-spacing:.16em;opacity:.9} .rc-top[data-b-kachi="0"] [data-block="kachi"],.rc-top[data-b-shigoto="0"] [data-block="shigoto"],.rc-top[data-b-kotoba="0"] [data-block="kotoba"],.rc-top[data-b-ichinichi="0"] [data-block="ichinichi"],.rc-top[data-b-koto="0"] [data-block="koto"],.rc-top[data-b-message="0"] [data-block="message"],.rc-top[data-b-motome="0"] [data-block="motome"],.rc-top[data-b-saiyo="0"] [data-block="saiyo"],.rc-top[data-b-entry="0"] [data-block="entry"]{display:none} @media (max-width:1180px){.rc-top .rc-nav-links{display:none}} @media (max-width:900px){.rc-top .band-card{grid-template-columns:1fr;grid-template-rows:42vh 1fr} .rc-top .band-tx{border-left:0;border-top:1px solid var(--line)} .rc-top .band-photo::before{inset:auto 0 -1px 0;width:auto!important;height:0;background:linear-gradient(180deg,rgba(255,255,255,0),#fff)} .rc-top[data-blend="soft"] .band-photo::before{height:38%} .rc-top[data-bandmove="nav"] .band-stage,.rc-top[data-bandmove="nav"] .band-card{height:auto;min-height:0} .rc-top[data-bandmove="nav"] .band-photo{min-height:38vh} .rc-top .band-arrows{right:0} .rc-top[data-bandmove="nav"] .band-dots{right:auto;left:50%;transform:translateX(-50%);bottom:94px} .rc-top .day-wrap{grid-template-columns:1fr} .rc-top .day-scene{position:static;order:-1} .rc-top .day-fig{aspect-ratio:16/10} .rc-top .msg-ph img{aspect-ratio:4/3} .rc-top .day-row{grid-template-columns:1fr;gap:.35rem} .rc-top .e-row{grid-template-columns:1fr;gap:.4rem}} @media (prefers-reduced-motion:reduce){.rc-top .fade{opacity:1;transform:none} .rc-top .h-cue i{animation:none}} .rc-sub{--kinari:#F5F0EB;--gold-t:#7A6244;--gold-l:#B59C7E;--sub:#4E4A43;--jp:var(--serif-jp);--en:'Marcellus',serif;--it:var(--serif-en)} .rc-sub *{margin:0;padding:0;box-sizing:border-box} .rc-sub{font-family:var(--jp);font-weight:300;background:var(--paper);color:var(--ink);line-height:2;font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased} .rc-sub img{display:block;max-width:100%} .rc-sub a{color:var(--ink);text-decoration:none;transition:color .35s} .rc-sub a:hover{color:var(--gold)} .rc-sub p{text-wrap:pretty} .rc-sub h1,.rc-sub h2,.rc-sub h3{font-weight:400} .rc-sub ::selection{background:rgba(139,115,85,.18)} .rc-sub .nav{position:fixed;top:0;left:0;right:0;z-index:400;display:flex;align-items:center;justify-content:space-between;gap:2vw;padding:1rem clamp(20px,4vw,52px);background:rgba(251,249,246,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .rc-sub .brand{display:grid;gap:.18rem;line-height:1.5} .rc-sub .b-en{font-family:var(--en);font-size:var(--fs-sub,.92rem);letter-spacing:.2em} .rc-sub .b-jp{font-size:var(--fs-en,.72rem);letter-spacing:.18em;color:var(--gold-t)} .rc-sub .rc-nav-links{display:flex;gap:clamp(14px,2vw,30px);align-items:center} .rc-sub .rc-nav-links a{font-size:var(--fs-note,.86rem);letter-spacing:.12em;color:#3A3A36;position:relative;padding-bottom:.2rem} .rc-sub .rc-nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:right .4s} .rc-sub .rc-nav-links a:hover::after,.rc-sub .rc-nav-links a[aria-current]::after{right:0} .rc-sub .rc-nav-links a[aria-current]{color:var(--gold-t)} @media (max-width:1000px){.rc-sub .rc-nav-links{display:none}} .rc-sub .head{padding:clamp(120px,17vh,190px) clamp(24px,7vw,110px) clamp(48px,6vw,80px);border-bottom:1px solid var(--line)} .rc-sub .head .kicker{font-family:var(--en);font-size:var(--fs-en,.78rem);letter-spacing:.3em;color:var(--gold-t)} .rc-sub .head h1{font-size:clamp(1.7rem,3.3vw,2.5rem);letter-spacing:.2em;margin-top:1rem} .rc-sub .head .rule{width:36px;height:1px;background:var(--gold-l);margin:1.4rem 0} .rc-sub .head p{font-size:var(--fs-body,1rem);letter-spacing:.06em;color:var(--sub);max-width:44em;line-height:2.2} .rc-sub .crumb{display:flex;gap:.7rem;align-items:baseline;font-size:var(--fs-note,.82rem);letter-spacing:.08em;color:var(--sub);margin-bottom:1.4rem} .rc-sub .crumb i{font-style:normal;color:var(--gold-l)} .rc-sub .rc-sec{padding:clamp(64px,8vw,110px) clamp(24px,7vw,110px);border-bottom:1px solid var(--line)} .rc-sub .rc-sec:last-of-type{border-bottom:0} .rc-sub .sec-h{display:grid;gap:.9rem;margin-bottom:clamp(36px,4.5vw,60px)} .rc-sub .sec-h .rc-en{font-family:var(--en);font-size:var(--fs-en,.76rem);letter-spacing:.3em;color:var(--gold-t)} .rc-sub .sec-h h2{font-size:clamp(1.3rem,2.4vw,1.75rem);letter-spacing:.18em} .rc-sub .sec-h p{font-size:var(--fs-body,1rem);letter-spacing:.05em;color:var(--sub);max-width:44em} .rc-sub .qa{max-width:56em;border-top:1px solid var(--line)} .rc-sub .qa details{border-bottom:1px solid var(--line)} .rc-sub .qa summary{display:flex;gap:1.1rem;align-items:baseline;padding:1.35rem .4rem;cursor:pointer;list-style:none;transition:background .3s} .rc-sub .qa summary::-webkit-details-marker{display:none} .rc-sub .qa summary:hover{background:#fff} .rc-sub .qa summary .q{font-family:var(--it);font-style:normal;font-size:var(--fs-body,1rem);color:var(--gold-t);flex:0 0 auto} .rc-sub .qa summary .t{font-size:var(--fs-body,1.06rem);letter-spacing:.09em;line-height:1.9;flex:1 1 auto} .rc-sub .qa summary .mk{flex:0 0 auto;width:12px;height:12px;position:relative;margin-top:.55rem} .rc-sub .qa summary .mk::before,.rc-sub .qa summary .mk::after{content:"";position:absolute;background:var(--gold);transition:transform .35s,opacity .35s} .rc-sub .qa summary .mk::before{left:0;top:5px;width:12px;height:1px} .rc-sub .qa summary .mk::after{left:5px;top:0;width:1px;height:12px} .rc-sub .qa details[open] summary .mk::after{transform:scaleY(0);opacity:0} .rc-sub .qa .a{padding:0 .4rem 1.7rem 2.6rem;font-size:var(--fs-body,1rem);letter-spacing:.04em;line-height:2.3;color:#33322E} .rc-sub .qa .a p+p{margin-top:1.1rem} .rc-sub .qa .a ul{list-style:none;display:grid;gap:.5rem;margin-top:.8rem} .rc-sub .qa .a li{padding-left:1.2rem;position:relative} .rc-sub .qa .a li::before{content:"";position:absolute;left:0;top:1em;width:8px;height:1px;background:var(--gold-l)} .rc-sub .tbl{margin-top:1.4rem;width:100%;max-width:36em;border-collapse:collapse;font-size:var(--fs-body,.98rem)} .rc-sub .tbl caption{text-align:left;font-size:var(--fs-note,.88rem);letter-spacing:.14em;color:var(--gold-t);padding-bottom:.7rem} .rc-sub .tbl th,.rc-sub .tbl td{border-bottom:1px solid var(--line);padding:.85rem 1rem;text-align:left;font-weight:300;letter-spacing:.06em} .rc-sub .tbl thead th{font-size:var(--fs-note,.86rem);letter-spacing:.14em;color:var(--gold-t);border-bottom-color:var(--gold-l)} .rc-sub .tbl tbody th{font-size:var(--fs-body,.98rem)} .rc-sub .tbl td{font-family:var(--it);text-align:right;width:7em} .rc-sub .rows{max-width:58em;border-top:1px solid var(--line)} .rc-sub .row{display:grid;grid-template-columns:12em 1fr;gap:1.6rem;padding:1.35rem 0;border-bottom:1px solid var(--line)} .rc-sub .row .k{font-size:var(--fs-sub,.94rem);letter-spacing:.15em;color:var(--gold-t)} .rc-sub .row .v{font-size:var(--fs-body,1.02rem);letter-spacing:.05em;line-height:2.2} .rc-sub .row .v ul{list-style:none;display:grid;gap:.4rem} .rc-sub .row .v li{padding-left:1.2rem;position:relative} .rc-sub .row .v li::before{content:"";position:absolute;left:0;top:1em;width:8px;height:1px;background:var(--gold-l)} @media (max-width:760px){.rc-sub .row{grid-template-columns:1fr;gap:.4rem}} .rc-sub .flow{display:grid;gap:0;max-width:40em} .rc-sub .flow .st{display:flex;align-items:center;gap:1.3rem;border:1px solid var(--gold-l);background:#fff;padding:1.1rem 1.6rem} .rc-sub .flow .st svg{flex:0 0 auto;width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round} .rc-sub .flow .st span{font-size:var(--fs-body,1.06rem);letter-spacing:.16em} .rc-sub .flow .ar{display:grid;place-items:center;height:34px;color:var(--gold-l)} .rc-sub .flow .ar svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} .rc-sub .cta{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:clamp(36px,4.5vw,56px)} .rc-sub .cta a{display:inline-flex;align-items:baseline;gap:1rem;border:1px solid var(--gold);background:var(--gold);color:#FFFCF6;padding:1.15rem 2.8rem;font-size:var(--fs-body,1.04rem);letter-spacing:.14em;transition:background .4s,color .4s,border-color .4s} .rc-sub .cta a i{font-family:var(--it);font-style:normal;font-size:var(--fs-en,.8rem);color:rgba(255,252,246,.8)} .rc-sub .cta a:hover{background:var(--ink);border-color:var(--ink);color:var(--kinari)} .rc-sub .cta a:hover i{color:var(--gold-l)} .rc-sub .cta a.mv{background:var(--ink);border-color:var(--ink);color:var(--kinari);gap:1.4rem;align-items:center;padding:1rem 2.2rem;box-shadow:0 6px 26px rgba(27,42,74,.18)} .rc-sub .cta a.mv:hover{background:var(--gold);border-color:var(--gold);color:#fff} .rc-sub .cta a.mv .lg{display:grid;place-items:center;background:#fff;border-radius:3px;padding:.5rem .65rem} .rc-sub .cta a.mv .lg img{width:54px} .rc-sub .note{margin-top:1.6rem;font-size:var(--fs-note,.86rem);letter-spacing:.05em;color:var(--gold-t);font-style:normal} .rc-sub .foot{border-top:1px solid var(--line);padding:2.4rem clamp(24px,7vw,110px);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;font-size:var(--fs-note,.84rem);letter-spacing:.1em;color:var(--sub)} .rc-sub .foot a{border-bottom:1px solid var(--line);padding-bottom:.15rem;color:var(--sub)} .rc-sub .foot a:hover{color:var(--gold);border-color:var(--gold)} .rc-sub .rc-to-top{position:fixed;right:26px;bottom:26px;z-index:900;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;gap:1px;background:rgba(27,42,74,.86);color:var(--kinari);border:1px solid rgba(139,115,85,.5);box-shadow:0 6px 24px rgba(27,42,74,.22);opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);transition:opacity .4s,transform .4s cubic-bezier(.2,.8,.2,1),visibility .4s,background .3s,border-color .3s} .rc-sub .rc-to-top.rc-show{opacity:1;visibility:visible;transform:none} .rc-sub .rc-to-top:hover{background:var(--gold);border-color:var(--gold);transform:translateY(-3px)} .rc-sub .rc-to-top .l{font-family:var(--it);font-style:normal;font-size:var(--fs-mini,.58rem);letter-spacing:.16em;opacity:.9} @media print{.rc-sub .nav,.rc-sub .rc-to-top{display:none}} /* ── Astro 版での上書き（260918・原案のヘッダーに戻した）── ・ナビは原案どおり画面上部に固定（社名＋採用情報／節のリンク／HOME →）。本サイトのヘッダーは出さない（Base.astro の chrome="recruit"） ・フッターと「TOPへ」は本サイトのもの。原案の独自フッターは出さない ・スマホ（節のリンクが横に並ばない幅）は、原案では節のリンクを隠していた。ここでは社名の下に横スクロールの1行で出す（B案・260918） */ .rc .foot{display:none} .rc .nav a[aria-current]{color:var(--gold-t)} /* 本サイトの文字の倍率（125％）が乗るので、原案の値のままでは 1366px で節のリンクが2行に折れる。 1行に収まるよう字を少し絞り、どの幅でも語の途中で折れないようにする */ .rc .brand,.rc .nav-home,.rc .rc-nav-links a{white-space:nowrap} /* HOME の箱は子ページにも同じ形で（原案の子ページには無かった部品） */ .rc-sub .nav-home{display:grid;gap:.1rem;border:1px solid var(--line);padding:.5rem 1rem;line-height:1.6;background:rgba(251,249,246,.6)} .rc-sub .nav-home .h-jp{font-size:var(--fs-en,.78rem);letter-spacing:.13em;color:var(--sub)} .rc-sub .nav-home .h-en{font-family:var(--en);font-size:var(--fs-note,.84rem);letter-spacing:.15em;color:var(--ink)} .rc-sub .nav-home:hover{border-color:var(--gold)} @media (max-width:1500px){ .rc-top .rc-nav-links{gap:clamp(10px,1.3vw,22px)} .rc-top .rc-nav-links a{font-size:var(--fs-en,.76rem);letter-spacing:.07em} .rc .b-en{font-size:var(--fs-note,.84rem);letter-spacing:.16em} .rc .b-jp{font-size:var(--fs-mini,.66rem);letter-spacing:.12em} .rc .nav-home{padding:.4rem .8rem} } @media (max-width:1180px){ .rc-top .nav{flex-wrap:wrap;row-gap:.55rem;background:rgba(251,249,246,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom-color:var(--line);padding-top:.9rem;padding-bottom:.6rem} .rc-top .rc-nav-links{display:flex;order:3;flex:1 0 100%;gap:1.3rem;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:.1rem 0 .2rem} .rc-top .rc-nav-links::-webkit-scrollbar{display:none} .rc-top .rc-nav-links a{flex:0 0 auto;font-size:var(--fs-en,.8rem);letter-spacing:.1em} .rc-top .rc-nav-links a::after{display:none} .rc-top .hero{padding-top:clamp(170px,22vh,220px)} } @media (max-width:1000px){ .rc-sub .nav{flex-wrap:wrap;row-gap:.55rem;padding-top:.9rem;padding-bottom:.6rem} .rc-sub .rc-nav-links{display:flex;order:3;flex:1 0 100%;gap:1.3rem;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:.1rem 0 .2rem} .rc-sub .rc-nav-links::-webkit-scrollbar{display:none} .rc-sub .rc-nav-links a{flex:0 0 auto;font-size:var(--fs-en,.8rem);letter-spacing:.1em} .rc-sub .rc-nav-links a::after{display:none} .rc-sub .head{padding-top:clamp(180px,23vh,230px)} } /* 260927 夜：ヘッダーの高さを本サイトにそろえる（原田さん）。 本サイトのヘッダーは、スクロールしても高さが変わらず、下層ページで 111.2px（トップは 113.6px。②で実測）。 採用のヘッダーはこれまで、トップが 冒頭 131.6px→スクロール後 111.6px（1181〜1500px）、下層ページが 112.8px など、幅と状態で 101.6〜135.6px だった。 901px 以上は、トップも下層ページも 111.2px で固定する。900px 以下（下に固定のバーがある形）は変えない 260928：本サイトの社名の行間を詰めた（9/25 の一覧表の再調整依頼）ため、本サイトのヘッダーが 108.5px（1024〜1920px・トップも下層も。③で実測）になった。それに合わせ直す */ @media (min-width:901px){ .rc{--rc-navh-fix:108.5px} /* --rc-navh（recruit-nav.js が測って :root に入れる値。引き出し・スマホの写真の位置で使う）とは別の名前にする */ .rc-top .nav,.rc-top.scrolled .nav,.rc-sub .nav{min-height:var(--rc-navh-fix);padding-top:0;padding-bottom:0} } /* 260927 夜：冒頭の文字を少し下げる（原田さん）。パソコンの幅では、ヘッダーの下から Scroll の目印の上までの間の中ほどに置く。 上＝ヘッダー＋clamp(28px,5vh,72px)、下＝Scroll の目印の分（下から 26px＋高さ約 78px）＋同じ量。 収まらない低い画面では冒頭が画面より高くなり、Scroll の目印が下へ押し出される（文字とボタンを優先）。 実測：表示領域 1366×768・1440×789・1280×800 で Scroll の目印まで画面に入る。1366×625・1280×600・1280×583 でもボタンまで画面に入る。 ※これまでは上の余白が 104px で、表示領域の高さ 743px 以下では RECRUIT がヘッダー（131.6px）の下に潜っていた */ @media (min-width:1181px){ .rc-top .hero{padding-top:calc(var(--rc-navh-fix) + clamp(28px,5vh,72px));padding-bottom:calc(104px + clamp(28px,5vh,72px))} } /* 901〜1180px は文字の位置を変えない。ただし低い画面（高さ 610px 以下。例：表示領域 1045×562 のパソコン）では、 RECRUIT を大きくしたぶんボタンが画面の下に出るので、上の余白をヘッダー＋28px に詰める */ @media (min-width:901px) and (max-width:1180px) and (max-height:610px){ .rc-top .hero{padding-top:calc(var(--rc-navh-fix) + 28px)} } @media (max-width:600px){ /* 冒頭のボタン：文字の倍率125％だと iPhone 幅で「エントリー」が途中で折れる → 字を少し絞り、語の途中で折らない */ .rc-top .h-btns a{min-width:0;width:100%;padding-left:1rem;padding-right:1rem} .rc-top .h-btns .bt-jp{font-size:var(--fs-body,.98rem);letter-spacing:.1em;white-space:nowrap} .rc-top .h-btns .bt-sub{font-size:var(--fs-en,.72rem);letter-spacing:.08em;white-space:nowrap} .rc .b-en{font-size:var(--fs-note,.82rem)} .rc .b-jp{font-size:var(--fs-mini,.66rem)} .rc .nav-home{padding:.4rem .7rem} .rc .nav-home .h-jp{font-size:var(--fs-mini,.7rem)} .rc .nav-home .h-en{font-size:var(--fs-en,.76rem)} } /* 260922：現行の採用サイトの文言を入れた募集要項の体裁と、先方に埋めていただく空欄 */ .rc-sub .lead-line{margin:0 0 1.6rem;font-size:var(--fs-body,1rem);letter-spacing:.06em;line-height:2.1;color:var(--ink)} .rc-sub .sub-h{margin:2.2rem 0 1rem;font-family:var(--jp);font-weight:400;font-size:var(--fs-body,1.06rem);letter-spacing:.12em;color:var(--ink);border-left:2px solid var(--gold);padding-left:.7rem} .rc-sub .sub-h:first-of-type{margin-top:1rem} .rc-sub .rows .v ul{margin:.4rem 0 0;padding-left:0;list-style:none} /* 260928 夕：黒丸をやめ「－」（li::before）だけに。「・－」と二重に出ていた（宮腰さんの確認） */ .rc-sub .rows .v li{font-size:var(--fs-sub,.94rem);letter-spacing:.03em;line-height:2;color:var(--sub)} /* 260928 夕：現行の採用サイトと同じく、「※」の注記は次の行に */ .rc-sub .v .v-note{display:block;margin-top:.15rem} /* 空欄：貴社にご記入いただく欄。罫線だけを引いておく */ .rc-sub .v.blank{display:block;min-height:1.9em;border-bottom:1px dashed var(--gold-l);opacity:.6} /* 260922：冒頭の節への入口（上のメニューと同じ）と、下端の Scroll の入・切 */ .rc-top[data-heroareas="off"] .h-areas{display:none} .rc-top[data-herocue="off"] .h-cue{display:none} /* 冒頭のボタン2つは同じ幅に（広いほうに合わせる） */ .rc-top .h-btns{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(min-content,1fr);justify-content:center;align-items:stretch} .rc-top .h-btns a{min-width:0;align-content:center} @media (max-width:600px){.rc-top .h-btns{grid-auto-flow:row;grid-auto-columns:auto}} /* 260922：文字の大きさの倍率。rem も clamp(vw) もまとめて効かせるため zoom を使う（ブラウザの拡大と同じ効き方）。 recruit.css は採用ページでしか読まれないので、footer もここで一緒に拡大する */ .rc-top,.rc-sub{zoom:var(--rc-zoom,1)} /* 260929：フッターは本サイトと共通（9/29 のお打ち合わせ）なので、採用ページの倍率を掛けず、本サイトと同じ大きさで出す（Base.astro の 120％）。 以前はここで footer にも --rc-zoom を掛けていた */ /* ── 260929 夜：採用ページの文字を 80％に（文字だけ。写真・枠・余白の大きさは変えない）── 9/29 のお打ち合わせ「確認用の本サイトに合わせて小さく（90％を試して、もっと小さく、2割ぐらい）。RECRUIT の文字はこのまま」。 はじめは倍率（zoom）で全体を縮めたが、写真と枠まで小さくなった（原田さん 9/29 夜「文字だけ縮小」）→ 文字の大きさだけに --rc-t を掛ける。 ・掛けるもの：文字の段階（--fs-*）、見出し・キャッチ・導入文などの clamp、em の基準（data-fsize）、社長の署名 ・掛けないもの：ヘッダー・メニュー（本サイトと同じ大きさ）、RECRUIT の文字、図の中の文字（図の大きさで決まる）、下の固定バー、必須の札 ・トップは表示設定の「大きさ」（fsPc・fsTb・fsSp。既定 80）を recruit-top-render.js が --rc-t に入れる。下のページはここの値（同じにする） ・ここから 5％ずつ大きく・小さくをいただく（--rc-t と既定の fs を変える） */ :root{--rc-t:.8} .rc[data-tone="scale"],.rc-sub{--fs-h3:calc(1.12rem * var(--rc-t,1)); --fs-body:calc(1rem * var(--rc-t,1)); --fs-sub:calc(.92rem * var(--rc-t,1)); --fs-note:calc(.82rem * var(--rc-t,1)); --fs-en:calc(.76rem * var(--rc-t,1)); --fs-mini:calc(.68rem * var(--rc-t,1))} .rc .nav,.rc .rc-drawer{--fs-h3:1.12rem; --fs-body:1rem; --fs-sub:.92rem; --fs-note:.82rem; --fs-en:.76rem; --fs-mini:.68rem} .rc-top[data-fsize="std"]{font-size:calc(16px * var(--rc-t,1))} .rc-top[data-fsize="l"]{font-size:calc(18px * var(--rc-t,1))} .rc-top[data-fsize="xl"]{font-size:calc(19.5px * var(--rc-t,1))} .rc-top .h-label{font-size:calc(.82rem * 1.5)} /* RECRUIT は掛けない（24.6px のまま） */ .rc-top .h-catch{font-size:calc(clamp(1.75rem,4.2vw,3.2rem) * var(--rc-t,1))} @media (max-width:600px){.rc-top .h-catch{font-size:calc(clamp(1.25rem,7.2vw,1.4rem) * var(--rc-t,1))}} .rc-top .h-lead{font-size:calc(clamp(.95rem,1.2vw,1.08rem) * var(--rc-t,1))} .rc-top .rc-sec-title{font-size:calc(clamp(1.45rem,2.7vw,2.05rem) * var(--rc-t,1))} .rc-top .band-st{font-size:calc(clamp(1.08rem,1.5vw,1.34rem) * var(--rc-t,1))} .rc-top .bm-jp{font-size:calc(clamp(1.15rem,2vw,1.5rem) * var(--rc-t,1))} .rc-top .vis-ja{font-size:calc(clamp(1.3rem,2.5vw,1.95rem) * var(--rc-t,1))} .rc-top .msg-catch{font-size:calc(clamp(1.3rem,2.4vw,1.85rem) * var(--rc-t,1))} .rc-top .mt-after{font-size:calc(clamp(1.1rem,2vw,1.45rem) * var(--rc-t,1))!important} .rc-top .e-invite{font-size:calc(clamp(1.25rem,2.3vw,1.7rem) * var(--rc-t,1))} .rc-top .msg-sign .role{font-size:calc(.84rem * var(--rc-t,1))} .rc-top .msg-sign .name{font-size:calc(1.4rem * var(--rc-t,1))} .rc-sub .head h1{font-size:calc(clamp(1.7rem,3.3vw,2.5rem) * var(--rc-t,1))} .rc-sub .sec-h h2{font-size:calc(clamp(1.3rem,2.4vw,1.75rem) * var(--rc-t,1))} /* 260929 夜：「手がけた空間を見る」（私たちの仕事の下）は、デスクトップでも文章の下にボタンを置く（原田さん） */ .rc-top .band-more{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:1.6rem} /* 260929：英語サイトへのリンクは、採用のページからは当面出さない（9/29 のお打ち合わせ）。フッターは本サイトと共通なので、採用のページでだけ隠す */ body:has(.rc) footer a[href*="en.kobayashi-kk.net"]{display:none} /* ── 260929：ヘッダーの3つのボタン（新卒エントリー・キャリア採用・HOME）を小さくし、HOME と同じ2段で同じ高さにそろえる ── 9/29 のお打ち合わせ「よくある質問をメニューに入れる。ボタンをもっとコンパクトに、HOME のように2段に」。 ボタンを詰めた分で、メニューに「よくある質問」が入る（ヘッダーはページの倍率の外なので、ここの大きさがそのまま出る） */ @media (min-width:901px){ .rc .rc-nav-right,.rc .rc-nav-cta{gap:.5rem} .rc .rc-nav-cta a,.rc .rc-nav-right .nav-home{box-sizing:border-box;height:54px;padding:0 .85rem;line-height:1.35} .rc .rc-nav-cta a{display:flex;align-items:center;gap:.5rem} .rc .rc-nav-cta .c-t,.rc .rc-nav-right .nav-home{display:grid;align-content:center;gap:.12rem} .rc .rc-nav-cta .c-s,.rc .rc-nav-right .nav-home .h-jp{font-size:.62rem;letter-spacing:.1em} .rc .rc-nav-cta .c-m,.rc .rc-nav-right .nav-home .h-en{font-size:.72rem;letter-spacing:.1em} .rc .rc-nav-new .c-s{color:rgba(255,252,246,.78)} .rc .rc-nav-career .c-s{color:var(--sub)} .rc .rc-nav-new img{height:16px} } /* 260929：私たちの仕事の送りは番号だけにする（ドットと番号が重なり、位置もそろっていなかった。9/29 のご依頼⑪⑭）。 白い送りの丸には黒い縁（写真の明るいところで見えにくいため。9/29 のお打ち合わせ） */ .rc-top .band-dots{display:none!important} .rc-top .band-arrows button,.rc-top .band-arrows button[disabled]:hover{border-color:var(--ink)} /* ── 260929 夜：スクロールを行き来すると、文字が段落ごとに描かれなくなることがある（原田さん。Chrome）── カードの枠は描かれて、中の見出しや本文だけが段落ごとに抜ける。現れる動きの不具合ではなく（一度出したら出したまま）、 ブラウザの描画の手持ち（GPU のメモリ）が足りず、描き損じた段落がそのまま残っていると見た。見た目は変えずに負担を減らす： ・私たちの言葉のカードの浮き上がり（cardRise。最後の形を保つ）は、並べ替えのないとき（すべて表示）は使わない。現れ方は .fade だけ ・私たちの仕事の帯（写真5枚を横に並べた、画面5つ分の幅の帯）を常に別の層にしておく指定をやめる。層になるのは送りで動く間だけ （あわせて recruit-top-render.js：送りの位置は translate3d ではなく translateX、スクロールのたびに同じ番号を書き直さない） */ .rc-top[data-qmode="all"] .q-card{animation:none} .rc-top[data-bandmove="nav"] .band-rail{will-change:auto} /* 260929 夜：送り（矢印と番号）は、写真の中央ではなく帯全体の中央の下に置く（原田さん）。 これまでは写真の側（左半分）の中央。900px 以下は、もとから写真の下端の中央（下の 260924 の指定）なので変えない */ .rc-top .band-arrows{right:0} /* ── 260922 スマホの手当て ──────────────────────────────── 1. 編む図：横に広い図なので、スマホでは横スクロールで実寸のまま見せる（本サイトの価値創造の図と同じ考え方） 2. 社員の一日：写真と説明を画面の上に貼り付けたまま、下の時間の並びを触れるようにする */ /* 1. 編む図（k-fig）をスマホでは横スクロールに。つぶれた 4/3 の縮小をやめる */ .rc-top .k-scrollhint{display:none} @media (max-width:680px){ .rc-top .k-fig{aspect-ratio:auto;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;border:0;background:transparent} /* 文字の大きさは container query（cqw）で決まるので、器を .k-inner に移して実寸で効かせる */ .rc-top .k-fig .k-inner{position:relative;width:760px;aspect-ratio:1672/941;background:#fff;border:1px solid var(--line);container-type:inline-size} .rc-top .k-fig>svg,.rc-top .k-fig .k-labels{position:absolute;inset:0} .rc-top .k-hd-warp,.rc-top .k-hd-weft,.rc-top .k-hd-val{top:17%} .rc-top .k-col{top:30.5%} } /* 2. 社員の一日：スマホでは写真と説明を上に貼り付ける（下の行を押しても見える） */ @media (max-width:900px){ .rc-top .day-scene{position:sticky;top:0;z-index:3;background:var(--kinari);padding:.6rem 0 .9rem;margin-bottom:.2rem;box-shadow:0 10px 18px -12px rgba(27,42,74,.25)} .rc-top .day-fig{aspect-ratio:16/9} .rc-top .day-cap{gap:.3rem} .rc-top .day-cap .c-h{font-size:var(--fs-body,1rem);line-height:1.7} .rc-top .day-cap .c-d{font-size:var(--fs-sub,.9rem);line-height:1.9} } /* 260922：社員の一日。スマホでは写真の下の固定の欄（時刻・見出し・説明）をやめ、写真だけを貼り付ける。 説明は下の時間の行に出す（同じ文が2か所に出ないように） */ .rc-top .day-row .day-d{display:none} @media (max-width:900px){ .rc-top .day-cap{display:none} .rc-top .day-scene{padding-bottom:.5rem} .rc-top .day-row .day-d{display:block;margin-top:.35rem;font-size:var(--fs-sub,.9rem);letter-spacing:.02em;line-height:1.95;color:var(--sub)} } /* 260922：貼り付く写真は、ヘッダー（採用のナビ）の下に止める */ @media (max-width:900px){ .rc-top .day-scene{top:calc(var(--rc-navh, 150px) + 4px)} } /* ── 260924：帯のナビ（ドットと矢印）を、スマホでも写真の下端に置く ── パソコン・タブレットでは写真に重なる位置（.band-track の下端＝写真の下端）に出るが、 スマホでは写真の下に文章が積まれるため、同じ指定だと文章のさらに下へ落ちていた。 スマホの写真の高さは .band-card の grid 1行目＝42vh（実測 812px 画面で 341px）なので、 そこを基準に置き直す */ @media (max-width:900px){ .rc-top[data-bandmove="nav"] .band-arrows{ top:calc(42vh - 60px);bottom:auto;left:0;right:0;justify-content:center} .rc-top[data-bandmove="nav"] .band-dots{ top:calc(42vh - 88px);bottom:auto;left:50%;right:auto;transform:translateX(-50%); padding:5px 10px;border-radius:999px;background:rgba(251,249,246,.82)} /* 写真の上に出るので、送りの丸は少し小さく */ .rc-top[data-bandmove="nav"] .band-arrows button{width:42px;height:42px} } /* ── 260922 スマホのメニューの形（横スクロール／ハンバーガー／ハンバーガー＋下のバー）── .rc の data-navsp で切り替える。パソコン幅では従来どおり（この節はスマホ・タブレットだけ） */ .rc .rc-burger,.rc .rc-drawer,.rc .rc-bar{display:none} @media (max-width:1180px){ .rc[data-navsp="burger"] .rc-nav-links,.rc[data-navsp="bar"] .rc-nav-links{display:none} .rc[data-navsp="burger"] .nav-home,.rc[data-navsp="bar"] .nav-home{display:none} .rc[data-navsp="burger"] .rc-burger,.rc[data-navsp="bar"] .rc-burger{display:grid;gap:7px;background:transparent;border:0;padding:.4rem;cursor:pointer} .rc .rc-burger i{display:block;width:26px;height:1.4px;background:var(--ink);transition:transform .3s,opacity .3s} .rc .rc-burger.on i:nth-child(1){transform:translateY(8.4px) rotate(45deg)} .rc .rc-burger.on i:nth-child(2){opacity:0} .rc .rc-burger.on i:nth-child(3){transform:translateY(-8.4px) rotate(-45deg)} .rc[data-navsp="burger"] .nav,.rc[data-navsp="bar"] .nav{flex-wrap:nowrap;row-gap:0} /* 引き出し */ .rc .rc-drawer{position:fixed;inset:0;z-index:390;background:rgba(27,42,74,.32);opacity:0;pointer-events:none;transition:opacity .3s} .rc[data-navsp="burger"] .rc-drawer,.rc[data-navsp="bar"] .rc-drawer{display:block} .rc .rc-drawer.on{opacity:1;pointer-events:auto} .rc .rc-drawer-in{position:absolute;top:0;right:0;bottom:0;width:min(320px,86vw);background:var(--paper);border-left:1px solid var(--line);padding:calc(var(--rc-navh,140px) + 12px) 1.6rem 2rem;display:grid;align-content:start;gap:.2rem;transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1);overflow-y:auto} .rc .rc-drawer.on .rc-drawer-in{transform:none} .rc .rc-drawer-in a{display:block;padding:.95rem .2rem;border-bottom:1px solid var(--line);font-family:var(--jp);font-weight:300;font-size:var(--fs-body,1rem);letter-spacing:.1em;color:var(--ink)} .rc .rc-drawer-in .rc-drawer-home{margin-top:1.4rem;border:1px solid var(--gold-l);border-bottom:1px solid var(--gold-l);text-align:center;color:var(--gold-t)} .rc .rc-drawer-in .rc-drawer-home .h-en{display:block;font-family:var(--en);font-size:var(--fs-en,.72rem);letter-spacing:.14em} /* 下の固定バー（260923 デザイン側の助言） ・押すところは藍（送信ボタンと同じ墨）。金茶ベタに白文字は 4.1対1 で本文の基準（4.5対1）に届かない ・HOME は地を塗らず、紙色のバーにそのまま載せる。境目は色の差ではなく縦の細線で示す ・英字は外す。高さ56pxに2段積むと英字が11pxになり読めない ・倍率（zoom）の対象から外す。器の高さが決まっているため */ .rc[data-navsp="bar"] .rc-bar{display:grid;grid-template-columns:1fr 1.7fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:380; background:rgba(251,249,246,.96);border-top:1px solid var(--line); zoom:calc(1 / var(--rc-zoom, 1)); transform:translateY(102%);transition:transform .4s cubic-bezier(.2,.8,.2,1)} .rc[data-navsp="bar"].rc-bar-on .rc-bar{transform:none} /* 高さが決まっている器なので、文字は rem ではなく px で持つ（本文の倍率に引きずられないように） */ .rc .rc-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px; padding:8px 4px calc(8px + env(safe-area-inset-bottom,0px)); font-family:var(--jp);font-weight:300;font-size:13px;line-height:1.35;letter-spacing:.04em;color:var(--ink);text-align:center} .rc .rc-bar .rc-bar-home{position:relative;background:transparent} .rc .rc-bar .rc-bar-home i{display:flex;align-items:center;gap:.25em;font-family:var(--en);font-style:normal;font-size:11px;letter-spacing:.12em;color:var(--gold-t)} /* 仕切りは色の差ではなく縦の細線で */ .rc .rc-bar a+a::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:24px;background:var(--line)} .rc .rc-bar .rc-bar-new,.rc .rc-bar .rc-bar-career{position:relative} .rc .rc-bar .rc-bar-new{background:var(--ink);color:#FFFCF6} .rc .rc-bar .rc-bar-new:active{background:var(--gold)} /* マイナビはアイコンを左に置いて1行に。列を広げたぶん、マークも大きくできる */ .rc .rc-bar .rc-bar-new{flex-direction:row;gap:6px} .rc .rc-bar .rc-bar-new img{height:22px;width:auto;display:block;background:#fff;border-radius:2px;padding:2px 4px} .rc .rc-bar .rc-bar-new span{font-size:12.5px;letter-spacing:.02em} .rc .rc-bar .rc-bar-new+a::before{background:transparent} .rc .rc-bar .rc-bar-career{background:var(--gold);color:#FFFCF6} .rc .rc-bar .rc-bar-career:active{background:var(--ink)} .rc .rc-bar svg{width:11px;height:11px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} /* 下のバーのぶん、ページの終わりに余白。足元（フッター）は .rc の外にあるので body に付ける */ body:has(.rc[data-navsp="bar"]){padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))} } /* TOPへ戻る丸ボタン：下のバーが出ているスマホでは出さない（画面上端のタップで戻れるため）。 タブレット幅では残し、バーに重ならない高さへ上げる。 ※ #toTop は Base.astro が body の直下に置いているので、.rc の子孫ではない。 260922 に書いた .rc[data-navsp="bar"] .to-top は一度も当たっていなかった */ @media (max-width:760px){ body:has(.rc[data-navsp="bar"]) .to-top,.rc[data-navsp="bar"] .rc-to-top{display:none} } @media (min-width:761px) and (max-width:900px){ body:has(.rc[data-navsp="bar"]) .to-top,.rc[data-navsp="bar"] .rc-to-top{bottom:78px} } /* ── 260922→260923：応募フォーム。組みの方向（ラベル上・器いっぱい・2列→1列）はそのまま、 デザイン側の助言で次を直した ── ・入力欄の文字は 16px 以上（iOSは16px未満だと触れた瞬間に画面が拡大する） ・枠は罫線の色（#DAD2C6）だと白い欄の上で 1.4対1 しか出ない。入力欄の枠は3対1が目安なので一段濃く ・角は0。サイトのボタン・カード・表がすべて角が立っているため ・「必須」は札をやめて金茶の文字だけ（金茶ベタに白の小さな字は読みにくい） ・エラーは赤ではなく赭（そお）色 */ .rc-sub .form{max-width:58em;display:grid;gap:1.4rem;margin-top:.4rem;--f-line:#A89C88;--f-err:#A0522D} .rc-sub .f-two{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem} .rc-sub .f-row{display:grid;gap:.5rem;min-width:0;margin-bottom:.6rem} .rc-sub .f-row label{display:flex;align-items:baseline;font-family:var(--jp);font-weight:300;font-size:var(--fs-sub,.94rem);letter-spacing:.12em;color:var(--gold-t)} .rc-sub .f-row label em{font-style:normal;font-size:.66rem;line-height:1.5;letter-spacing:.06em;color:#fff;background:var(--gold);border-radius:3px;padding:2px 7px;margin-left:8px;align-self:center} /* 260928 夕：本サイトのお問い合わせ（contact.css の .req）と同じ札に */ .rc-sub .f-row input,.rc-sub .f-row select,.rc-sub .f-row textarea{ width:100%;box-sizing:border-box;min-height:48px;padding:.75rem .9rem; font-family:var(--jp);font-weight:300;font-size:max(16px,1rem);letter-spacing:.04em;line-height:1.8;color:var(--ink); background:#fff;border:1px solid var(--f-line);border-radius:0; transition:border-color .3s,box-shadow .3s} .rc-sub .f-row textarea{min-height:10em;resize:vertical;line-height:2} /* 選択の欄の三角は自前で描く（端末ごとの見た目の差をなくす）。線の太さは他のアイコンと同じ1.4px */ .rc-sub .f-row select{appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237A6244' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6'/%3E%3C/svg%3E"); background-position:right 1rem center;background-size:15px 15px;background-repeat:no-repeat;padding-right:2.8rem} .rc-sub .f-row input:focus,.rc-sub .f-row select:focus,.rc-sub .f-row textarea:focus{ outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(139,115,85,.12)} .rc-sub .f-row input:user-invalid,.rc-sub .f-row select:user-invalid,.rc-sub .f-row textarea:user-invalid{border-color:var(--f-err)} .rc-sub .f-row input::placeholder,.rc-sub .f-row textarea::placeholder{color:#B3ACA1} /* 個人情報の取り扱いへの同意（お問い合わせと同じ文言） */ .rc-sub .f-agree{display:flex;align-items:flex-start;gap:.7rem;margin:.6rem 0 0; font-family:var(--jp);font-weight:300;font-size:var(--fs-sub,.92rem);letter-spacing:.06em;line-height:1.9;color:var(--ink);cursor:pointer} .rc-sub .f-agree input{flex:0 0 auto;width:20px;height:20px;min-height:0;margin-top:.35em;accent-color:var(--ink);border-radius:0} .rc-sub .f-agree a{color:var(--gold-t);text-decoration:underline;text-underline-offset:.25em} /* 送信 */ .rc-sub .f-send{margin-top:.4rem} .rc-sub .f-send button{justify-self:start;min-width:16em;min-height:56px;padding:.9rem 2.4rem; font-family:var(--jp);font-weight:300;font-size:var(--fs-body,1.02rem);letter-spacing:.18em;color:#FFFCF6; background:var(--ink);border:1px solid var(--ink);border-radius:0;cursor:pointer; transition:background .35s,border-color .35s,color .35s,transform .35s} .rc-sub .f-send button:hover{background:var(--gold);border-color:var(--gold);transform:translateY(-1px)} .rc-sub .f-note{font-size:var(--fs-note,.84rem);letter-spacing:.04em;line-height:2;color:var(--sub)} /* 260929：応募業種は2つから選ぶ（いまの採用サイトのフォームと同じ）。見出しは他の欄の見出しと同じ見た目 */ .rc-sub .f-radios .f-lab{display:flex;align-items:baseline;font-family:var(--jp);font-weight:300;font-size:var(--fs-sub,.94rem);letter-spacing:.12em;color:var(--gold-t)} .rc-sub .f-radios .f-lab em{font-style:normal;font-size:.66rem;line-height:1.5;letter-spacing:.06em;color:#fff;background:var(--gold);border-radius:3px;padding:2px 7px;margin-left:8px;align-self:center} .rc-sub .f-radios .f-opts{display:flex;flex-wrap:wrap;gap:.6rem 2rem} .rc-sub .f-radios .f-opts label{display:flex;align-items:center;gap:.6rem;font-size:var(--fs-body,1rem);letter-spacing:.06em;color:var(--ink);cursor:pointer} .rc-sub .f-radios .f-opts input{width:18px;height:18px;min-height:0;margin:0;padding:0;border:0;background:none;box-shadow:none;accent-color:var(--ink)} .rc-sub .f-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* 260926 自動投稿よけの欄。人には見えない */ .rc-sub .f-done{margin:0;padding:1rem 1.2rem;border:1px solid var(--f-line);font-size:var(--fs-sub,.94rem);letter-spacing:.06em;line-height:1.9;color:var(--ink)} .rc-sub .f-done.is-error{border-color:var(--f-err);color:var(--f-err)} .rc-sub .f-send button:disabled{opacity:.6;cursor:default;transform:none} @media (max-width:760px){ .rc-sub .f-two{grid-template-columns:1fr} .rc-sub .form{gap:1.2rem} .rc-sub .f-send button{width:100%;justify-self:stretch;text-align:center} } /* ── 260925（9/24 打合せ）：パソコンの幅でもエントリーの入口を常に見せる ── 下のバーと同じ3つ（HOME／新卒エントリー／キャリア採用）をヘッダーに置く。 900px 以下では下のバーが受けるので出さない（260927 に 1180px → 900px。下の 260927 の節を参照） */ .rc .rc-nav-right{display:flex;align-items:center;gap:.6rem} .rc .rc-nav-cta{display:none} @media (min-width:901px){ .rc .rc-nav-cta{display:flex;align-items:stretch;gap:.6rem} .rc .rc-nav-cta a{display:flex;align-items:center;gap:.45em;padding:.5rem 1rem;line-height:1.6;white-space:nowrap;letter-spacing:.08em;font-size:var(--fs-note,.84rem)} .rc .rc-nav-new{background:var(--ink);color:#FFFCF6} .rc .rc-nav-new img{height:20px;width:auto;display:block;background:#fff;border-radius:2px;padding:2px 4px} .rc .rc-nav-new:hover{background:var(--gold)} .rc .rc-nav-career{border:1px solid var(--line);background:rgba(251,249,246,.6);color:var(--ink)} .rc .rc-nav-career:hover{border-color:var(--gold)} } /* ── 260926：ヘッダーの導線は、幅に応じて3段階にする ── 9/24 打合せ「メニューは少し少なくして、エントリーの3つを上に」。節のリンクは6つ→4つにして （recruit-top-defaults.js の navAreas）、字の大きさと余白は打合せのときのまま。 9/25 に字と余白を詰めて6つのまま収めていたのは戻した（.66rem／.64rem → 打合せ時の .76rem／.86rem） 1360px 以上 新卒エントリー＋キャリア採用＋HOME（実測：1360 で余り23px） 1181〜1359px 新卒エントリー＋HOME（実測：1181 で余り21px） 1180px 以下 下の固定バーが3つを受ける → 260927（原田さん）：下のバーはタブレットの縦とスマホ（900px 以下）だけに。901〜1180px は、節のリンクをハンバーガーに入れ、 新卒エントリー＋キャリア採用＋HOME を上に出す（下の 260927 の節） */ @media (min-width:1181px) and (max-width:1359px){ /* .rc .rc-nav-cta a の display:flex に勝つよう、クラスを重ねる */ .rc .rc-nav-cta a.rc-nav-career{display:none} } /* 260927（原田さん）：下の固定バーはタブレットの縦とスマホ（900px 以下）だけに出す。1180px のパソコンでも出ていた。 900px は、このページの並びがスマホ向けに変わる幅（帯・柱など）。タブレットの縦は 744〜834px、スマホの横は 667〜932px。 901〜1180px（タブレットの横・パソコン）は、バーを出さずに上の入口（新卒エントリー・キャリア採用・HOME）を見せる。 節のリンクは入りきらないので、ハンバーガーの中のまま。ページの終わりの、バーのための余白も要らない */ @media (min-width:901px) and (max-width:1180px){ .rc[data-navsp="bar"] .rc-bar{display:none} body:has(.rc[data-navsp="bar"]){padding-bottom:0} .rc[data-navsp="bar"] .nav-home{display:grid} } /* 子ページ（募集要項など）の節のリンクも、ボタンが並ぶ幅ではトップと同じ大きさに。 打合せの時点では子ページにボタンが無く、.86rem のままでは 1181px・1366px ではみ出す */ @media (min-width:1181px) and (max-width:1500px){ .rc-sub .rc-nav-links{gap:clamp(10px,1.3vw,22px)} .rc-sub .rc-nav-links a{font-size:var(--fs-en,.76rem);letter-spacing:.07em} } /* ── 260928：宮腰さんの確認（9/28 昼）の直し ── */ /* 採用情報の「よくある質問」は Q&A のページの答えへつなぐ。右端に矢印 */ .rc-top .qa-list a.qa-i{color:inherit;text-decoration:none} .rc-top .qa-list a.qa-i .qa-go{margin-left:auto;padding-left:1rem;color:var(--gold-t);font-size:var(--fs-sub,.9rem)} .rc-top .qa-list a.qa-i:hover .qa-t{color:var(--gold-t)} /* 260928 夕：「よくある質問」3問は、その場で答えを開く（質問のページと同じ＋の印。宮腰さんの確認・原田さん） */ .rc-top .qa-list details.qa-i{display:block;padding:0} .rc-top .qa-list details.qa-i summary{display:flex;gap:1.2rem;align-items:baseline;padding:1.3rem 0;cursor:pointer;list-style:none} .rc-top .qa-list details.qa-i summary::-webkit-details-marker{display:none} .rc-top .qa-list details.qa-i summary:hover .qa-t{color:var(--gold-t)} .rc-top .qa-list .qa-mk{margin-left:auto;flex:0 0 auto;width:12px;height:12px;position:relative;align-self:center} .rc-top .qa-list .qa-mk::before,.rc-top .qa-list .qa-mk::after{content:"";position:absolute;background:var(--gold);transition:transform .35s,opacity .35s} .rc-top .qa-list .qa-mk::before{left:0;top:5px;width:12px;height:1px} .rc-top .qa-list .qa-mk::after{left:5px;top:0;width:1px;height:12px} .rc-top .qa-list details[open] .qa-mk::after{transform:scaleY(0);opacity:0} .rc-top .qa-list .qa-a{padding:0 0 1.5rem 2.6rem;font-size:var(--fs-body,1rem);letter-spacing:.04em;line-height:2.1;color:#33322E} .rc-top .qa-list .qa-a p+p{margin-top:.9rem} .rc-top .qa-list .qa-a ul{list-style:none;display:grid;gap:.4rem;margin:0;padding:0} .rc-top .qa-list .qa-a li{padding-left:1.2rem;position:relative} .rc-top .qa-list .qa-a li::before{content:"";position:absolute;left:0;top:1em;width:8px;height:1px;background:var(--gold-l)} .rc-top .qa-list .qa-a a{border-bottom:1px solid var(--line);padding-bottom:.1rem} .rc-sub details[id]{scroll-margin-top:calc(var(--rc-navh,90px) + 20px)} @media (max-width:760px){ /* スマホで本文が左に寄り、右が大きく空く：Safari の text-wrap:pretty が行を短くそろえるため。普通の折り返しに（本サイトも 768px 以下で同じ手当て） */ .rc-top p,.rc-sub p{text-wrap:wrap} } @media (max-width:600px){ /* 選考の流れ：縦に並べ、矢印も下向きに（右向きのまま折り返していたため） */ .rc-top .flow{flex-direction:column;align-items:flex-start;gap:.55rem} .rc-top .flow .ar{display:inline-block;transform:rotate(90deg);margin-left:1.9rem;line-height:1} /* 社員の一日のタブ：2つを同じ幅にして、文字を1行に（営業が縦に、クリエイティブが2行に折れていたため） */ .rc-top .day-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px} .rc-top .day-tabs button{padding:.85rem .4rem;letter-spacing:.06em;white-space:nowrap} /* 手がけた空間を見る／よくある質問をすべて見る／募集要項を見る などのボタン：画面の幅に収め、和文と英字はそれぞれ1行に */ .rc-top .bm-go,.rc-top .qa-more a,.rc-top .e-cta a{display:flex;flex-wrap:wrap;width:100%;justify-content:space-between;align-items:baseline;gap:.3rem 1rem;padding:1.05rem 1.2rem;letter-spacing:.1em;white-space:nowrap} /* 260928 夕：下層ページの「募集要項を見る」「キャリアエントリー」なども、トップと同じ形に（宮腰さんの確認） */ .rc-sub .cta a{display:flex;flex-wrap:wrap;width:100%;justify-content:space-between;align-items:baseline;gap:.3rem 1rem;padding:1.05rem 1.2rem;letter-spacing:.1em;white-space:nowrap} .rc-sub .cta a.mv{align-items:center;padding:1rem 1.2rem} /* 英字はいつも和文の下に（本サイトのメニューの「和文／英字」と同じ並び。入るときだけ右に寄るのをやめる。宮腰さんの確認） */ .rc-top .bm-go i,.rc-top .qa-more a i,.rc-top .e-cta a i,.rc-sub .cta a i{flex-basis:100%} } /* 260928：採用ページでは斜体を使わない（原田さん。全ページ）。本サイトの 260827 の決定（font-style はすべて normal）と同じ。 上の指定はすべて normal に直した。i・em は既定で斜体になるので、ここで打ち消す */ .rc i,.rc em,.rc cite,.rc-top i,.rc-sub i{font-style:normal}