/* ===== 1024px以下：「Tさんの1日」各アイテムを1カード表示（写真→タイトル→コメント→ミニインフォ→豆知識） ===== */
@media (max-width: 1024px) {
/* センター情報（時刻）をカードの上に表示 */
#timeline .timeline-center { order: -1; margin-bottom: 0.4rem; }
#timeline .timeline-step { display: none !important; }
/* アイテムを1カラム化し、左右のラッパーを透過して中身で順序制御 */
#timeline .timeline > .timeline-item {
display: flex !important;
flex-direction: column !important;
gap: 0; /* 写真と本文の間のgapを無くす */
align-items: center; /* 中央寄せ */
max-width: 600px; /* カード全体の最大幅 */
margin-left: auto;
margin-right: auto; /* カード全体を中央配置 */
}
#timeline .timeline > .timeline-item .timeline-left,
#timeline .timeline > .timeline-item .timeline-right {
padding: 0 !important;
display: contents; /* 子要素（写真/本文）を直接並べ替えるため */
}
/* どのケースでも「写真」を先頭、「本文」を次に配置 */
#timeline .timeline > .timeline-item .timeline-photo { order: 1; }
#timeline .timeline > .timeline-item .timeline-content { order: 2; }
/* reverse有無に依らず、上記order指定で最終順序を保証（念のため左右の順序衝突を無視） */
#timeline .timeline > .timeline-item.reverse .timeline-right { order: 0; }
#timeline .timeline > .timeline-item.reverse .timeline-left { order: 0; }
/* 写真サイズと間隔最適化 */
#timeline .timeline-photo {
width: 100%; /* 親コンテナ（カード）の幅に合わせる */
}
#timeline .timeline-photo .photo-placeholder {
width: 100% !important;
max-width: none !important;
margin-bottom: 0;
border-radius: 12px 12px 0 0 !important; /* カード上辺と連結 */
box-shadow: none !important; /* カード内に収めるため影を外す */
border: 2px solid rgba(46, 134, 193, 0.25); /* 周囲枠（上左右） */
border-bottom: 0; /* 下側は本文カード側に委譲 */
height: 300px !important; /* 1024px以下は縦幅300pxで固定 */
padding-top: 0 !important; /* 比率トリックを無効化 */
aspect-ratio: auto !important; /* アスペクト比制御を解除 */
background-size: cover !important; /* はみ出しをトリム（中央基準） */
background-position: center center !important;
}
/* 本文の内側余白と各ブロックの間隔の微調整 */
#timeline .timeline-content {
width: 100%; /* 親コンテナ（カード）の幅に合わせる */
border-radius: 0 0 12px 12px !important;
border: 2px solid rgba(46, 134, 193, 0.25) !important; /* 周囲枠（下左右） */
border-top: 0 !important; /* 上側は写真側の枠と連結 */
overflow: hidden; /* 角丸内に要素を収める */
box-shadow: 0 8px 25px rgba(74, 144, 226, 0.15);
background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFF 100%);
box-sizing: border-box;
}
#timeline .timeline-content h3 { margin-top: 0; }
#timeline .timeline-content .mini-info { margin-top: 0.25rem; }
#timeline .timeline-content .trivia { margin-top: 0.25rem; }
/* ミニインフォ直下の豆知識は少し間隔を広げる */
#timeline .timeline-content .mini-info + .trivia { margin-top: 1.5rem !important; }
/* ミニインフォ: ラベルと値で2カラム化し、2行目はコロン位置から開始 */
#timeline .mini-info .info-item {
display: grid;
grid-template-columns: auto 1fr;
column-gap: .5rem;
align-items: start;
}
#timeline .mini-info .info-label::after { content: "："; }
#timeline .mini-info .info-label { white-space: nowrap; font-weight: 700; color: #2E86C1; }
#timeline .mini-info .info-value { white-space: normal; }
/* 時間バッジ下に短い接続ラインを描画（カード上辺へ） */
#timeline .timeline-time {
position: relative;
margin-bottom: 0.2rem;
margin-left: auto;
margin-right: auto; /* 常に中央配置 */
}
#timeline .timeline-time::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -12px;
width: 2px;
height: 12px; /* 接続の縦線 */
background: #4A90E2;
border-radius: 1px;
}
}
/* ===== 1024px以上：ミニインフォのコロン表示を確実に ===== */
@media (min-width: 1025px) {
#timeline .mini-info .info-label::after { content: "：" !important; }
#timeline .mini-info .info-item {
display: grid !important;
grid-template-columns: auto 1fr !important;
column-gap: .5rem !important;
align-items: start !important;
}
}
/* ===== 成長ストーリー: ラベルと値で2カラム化し、2行目はコロン位置から開始 ===== */
.growth-content .growth-item {
display: grid;
grid-template-columns: auto 1fr;
column-gap: .5rem;
align-items: start;
margin-bottom: .8rem;
}
.growth-content .growth-item:last-child { margin-bottom: 0; }
.growth-content .growth-label::after { content: "："; }
.growth-content .growth-label { white-space: nowrap; font-weight: 700; color: #2E86C1; }
.growth-content .growth-value { white-space: normal; color: #000; }
/* ===== 768px以下：タイムライン写真高さを300pxで固定 ===== */
@media (max-width: 768px) {
#timeline .timeline-photo .photo-placeholder {
height: 300px !important;
padding-top: 0 !important;
aspect-ratio: auto !important;
background-size: cover !important;
background-position: center center !important;
}
/* コメント内の顔写真の下に余白を追加（重なり回避・視認性向上） */
#timeline .timeline-comment .comment-content {
padding-bottom: 1rem !important;
margin-bottom: 4rem !important;
text-align: left !important; /* スマホでは左揃え */
}
}
/* ===== FAQ: 回答展開時に背景が拡大しないように（transform無効化） ===== */
#faq.faq-section .faq-item,
#faq.faq-section .faq-item:hover,
#faq.faq-section .faq-item.active,
#faq.faq-section .faq-item .faq-question,
#faq.faq-section .faq-item .faq-answer,
#faq.faq-section .faq-item .faq-answer.active {
transform: none !important;
}
#faq.faq-section .faq-item {
transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease !important;
}
/* 最終対策: FAQ内のtransform/animationを全面無効化（拡大演出の根絶） */
#faq.faq-section,
#faq.faq-section * {
transform: none !important;
animation: none !important;
will-change: auto !important;
}
#faq.faq-section .faq-item,
#faq.faq-section .faq-item .faq-question,
#faq.faq-section .faq-item .faq-answer {
transition-property: box-shadow, border-color, background-color, color, height, max-height !important;
}
/* JavaScript由来のアニメーションクラスを無効化 */
#faq.faq-section .faq-item.scroll-animate,
#faq.faq-section .faq-item.animate,
#faq.faq-section .faq-item.scroll-animate *,
#faq.faq-section .faq-item.animate * {
transform: none !important;
animation: none !important;
opacity: 1 !important;
will-change: auto !important;
}
/* 回答部分のアニメーションは復活（背景拡大とは無関係） */
#faq.faq-section .faq-item .faq-answer,
#faq.faq-section .faq-item.scroll-animate .faq-answer,
#faq.faq-section .faq-item.animate .faq-answer {
transition: max-height 0.3s ease, padding 0.3s ease !important;
}
/* トグルアイコンは回転させず横のままに保持 */
#faq.faq-section .faq-item .toggle-icon,
#faq.faq-section .faq-item.scroll-animate .toggle-icon,
#faq.faq-section .faq-item.animate .toggle-icon,
#faq.faq-section .faq-item.active .toggle-icon,
#faq.faq-section .faq-item.scroll-animate.active .toggle-icon,
#faq.faq-section .faq-item.animate.active .toggle-icon {
transform: none !important; /* 常に無変形で横のまま */
transition: none !important; /* 回転アニメーション無効化 */
}
/* FAQセクション全体でscale等の変形を一切禁止 */
#faq.faq-section .faq-item,
#faq.faq-section .faq-item *,
#faq.faq-section .faq-item::before,
#faq.faq-section .faq-item::after {
transform: none !important;
scale: 1 !important;
zoom: 1 !important;
}
/* 右下 固定ジャンプボタン（常時表示） */
.entry-fab {
position: fixed !important; /* 常に画面右下に固定 */
right: 20px !important;
bottom: 20px !important;
z-index: 9999 !important; /* 最前面に表示 */
display: inline-block !important; /* JSからのdisplay操作を無効化 */
}
.interview-qa-cards { display: grid; gap: 1rem; max-width: 100%; margin: 0 auto; }
.interview-qa-card { background: #FFFFFF; border: 1px solid rgba(0,0,0,0.06); border-radius: 14px; box-shadow: 0 10px 24px rgba(22,58,99,0.08); padding: 1rem 1.2rem; --label-size: 32px; --label-gap: .6rem; }
.interview-qa-card .qa-q { display: flex; align-items: center; gap: var(--label-gap); margin-bottom: .5rem; }
.interview-qa-card .qa-q .qa-label { display: inline-flex; align-items: center; justify-content: center; width: var(--label-size); height: var(--label-size); line-height: 1; text-align: center; border-radius: 50%; background: #2E86C1; color:#fff; font-weight: 800; }
.interview-qa-card .qa-q .qa-avatar { display: inline-block; width: var(--label-size); height: var(--label-size); border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 2px 8px rgba(15,23,42,0.15); border: 2px solid rgba(255,255,255,0.9); }
/* 顔写真アバターサイズ拡大（インタビューセクション全体） */
#interview.interview-section .interview-qa-card { --label-size: 80px; --label-gap: 1rem; }
.interview-qa-card .qa-q h3 { margin: 0; font-size: 1.1rem; color: #163A63; }
#interview.interview-section .interview-qa-card .qa-q h3 { font-size: 1.8rem !important; line-height: 1.2; }
.interview-qa-card .qa-body { display: block !important; flex-direction: unset !important; gap: unset !important; align-items: unset !important; overflow: visible; }
.interview-qa-card .qa-a, .interview-qa-card .qa-img { order: initial; width: 100%; position: relative; z-index: 0; }
.interview-qa-card .qa-a { order: 1; }
.interview-qa-card .qa-img { order: 2; }
.interview-qa-card .qa-a, .interview-qa-card .qa-img { min-width: 0; }
.interview-qa-card .qa-a { color: #1F2A37; line-height: 1.9; padding-left: 0; margin-left: 0; }
.interview-qa-card .qa-a .qa-speaker { font-weight: 800; color: #2E86C1; margin-right: .4rem; }
.interview-qa-card .qa-a .q-line { font-weight: 800; color: #163A63; background: rgba(46,134,193,0.10); border-left: 4px solid var(--brand-600); padding: .3rem .5rem; padding-left: 1rem; border-radius: 4px; }
.interview-qa-card .qa-a .a-line { position: relative; padding-left: .25rem; }
.interview-qa-card .qa-a .a-line::before { content: ""; }
.interview-qa-card .qa-img .photo-placeholder { height: auto; min-height: 200px; border-radius: 10px; border: 1px solid rgba(46,134,193,0.15); box-shadow: 0 8px 20px rgba(22,58,99,0.08); }
/* 質問（q-line）を直前の回答（a-line）から少し下げる */
#interview.interview-section .interview-qa-card .qa-a .a-line + .q-line { margin-top: 0.6rem; }
/* 最終上書き: 全画面で回答→次の質問の上下間隔を確実に確保 */
#interview.interview-section .interview-qa-card .qa-a .a-line + .q-line { margin-top: 0.8rem !important; }
/* 回答行: 1行目は左端（「－」表示）、折り返し行のみ全角1文字分インデント */
#interview.interview-section .interview-qa-card .qa-a .a-line {
padding-left: 1.2em !important;
text-indent: -1.2em !important;
}
/* ===== 768-1024px: タイムライン写真を確実に小さく（高詳細度で上書き） ===== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
html body section#timeline.timeline-section .container .timeline .timeline-item .timeline-photo .photo-placeholder,
html body section.timeline-section .container .timeline .timeline-item .timeline-photo .photo-placeholder,
html body .timeline-section #timeline .timeline .timeline-item .timeline-left .timeline-photo .photo-placeholder,
html body .timeline-section #timeline .timeline .timeline-item .timeline-right .timeline-photo .photo-placeholder,
html body #timeline .timeline-photo .photo-placeholder,
body section#timeline .timeline-photo .photo-placeholder {
max-width: clamp(420px, 52vw, 640px) !important; /* ビューポート依存で確実に縮小 */
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* 明示的にカード内の要素サイズ・配置を統一（他スタイルの干渉を排除） */
.interview-qa-cards .qa-q .qa-label { font-size: 0.95rem; }
.interview-qa-cards .qa-q h3 { font-size: 1.1rem; line-height: 1.4; overflow-wrap: anywhere; word-break: break-all; hyphens: auto; }
.interview-qa-cards .qa-a p { font-size: 1rem; line-height: 1.9; margin: 0; overflow-wrap: anywhere; word-break: break-all; hyphens: auto; }
.interview-qa-cards .qa-img .photo-placeholder { width: 100%; max-width: 100%; }
@media (max-width: 768px) {
.interview-qa-card .qa-body { display: block !important; grid-template-columns: unset !important; }
.interview-qa-card .qa-img .photo-placeholder { height: auto !important; min-height: 180px !important; }
#interview.interview-section .interview-qa-card .qa-a { display: block !important; }
#interview.interview-section .interview-qa-card .qa-img { display: block !important; margin-top: 1rem !important; }
}
/* ===== スマホ幅で右切れ防止（インタビューQAカード） ===== */
@media (max-width: 480px) {
.interview-section .container { padding-inline: 0; box-sizing: border-box; width: 100%; max-width: 100%; }
.interview-qa-cards { width: 100%; max-width: 100%; box-sizing: border-box; }
.interview-qa-card { width: 100%; max-width: 100%; margin: 0; padding: 0.9rem 0.9rem; box-sizing: border-box; overflow: hidden; border-radius: 14px; border: 1px solid rgba(46, 134, 193, 0.22); box-shadow: 0 10px 24px rgba(22,58,99,0.08); }
.interview-qa-card .qa-q h3 { word-break: auto-phrase; overflow-wrap: anywhere; }
#interview.interview-section .interview-qa-card .qa-q,
#interview.interview-section .interview-qa-card .qa-a,
#interview.interview-section .interview-qa-card .qa-img { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
#interview.interview-section .interview-qa-card .qa-img { margin-top: 1rem !important; }
.interview-qa-card .qa-img .photo-placeholder { width: 100%; max-width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 14px; border: 1px solid rgba(46, 134, 193, 0.22); box-shadow: 0 10px 24px rgba(22,58,99,0.08); }
}
/* タブレット等（非PC）でもインタビューは全幅に */
@media (max-width: 1024px) {
.interview-section .container { padding-left: 0; padding-right: 0; width: 100%; max-width: 100%; }
.interview-qa-cards { width: 100%; max-width: 100%; }
}
/* ===== 1024px以下: 質問ハイライトの左余白を確実に確保 ===== */
@media (max-width: 1024px) {
.interview-qa-card .qa-a .q-line { padding-left: 1.2rem !important; }
}
/* ===== 質問ハイライト: 擬似要素でライン＋確実な余白を全画面で保証 ===== */
#interview.interview-section .interview-qa-card .qa-a .q-line {
position: relative;
border-left: none !important;
padding-left: 1.2rem !important;
}
#interview.interview-section .interview-qa-card .qa-a .q-line::before {
content: "";
position: absolute; left: 0; top: 0; bottom: 0;
width: 4px; background: var(--brand-600); border-radius: 2px;
}
/* ===== 768px～1024px: インタビューカード内縦並び強制 ===== */
@media (min-width: 769px) and (max-width: 1024px) {
#interview.interview-section .interview-qa-card { display: block !important; }
#interview.interview-section .interview-qa-card .qa-q { display: flex !important; align-items: center !important; width: 100% !important; margin-bottom: 1rem !important; }
#interview.interview-section .interview-qa-card .qa-body { display: block !important; width: 100% !important; }
#interview.interview-section .interview-qa-card .qa-a { display: block !important; width: 100% !important; margin: 0 !important; }
#interview.interview-section .interview-qa-card .qa-img { display: block !important; width: 100% !important; margin: 1rem 0 0 0 !important; }
}
/* ===== インタビューQ&Aカード: 洗練スタイル強化 ===== */
.interview-qa-cards { gap: 1.2rem; }
.interview-qa-card {
position: relative;
background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFF 100%);
border: 1px solid rgba(46, 134, 193, 0.18);
box-shadow:
0 14px 32px rgba(22, 58, 99, 0.12),
0 0 0 1px rgba(255,255,255,0.65) inset;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.interview-qa-card::before {
content: "";
position: absolute; inset: 0 auto auto 0; height: 4px; width: 100%;
background: linear-gradient(90deg, var(--brand-600), var(--brand-500));
border-top-left-radius: 14px; border-top-right-radius: 14px;
}
.interview-qa-card:hover {
transform: translateY(-3px);
box-shadow:
0 18px 44px rgba(22, 58, 99, 0.16),
0 0 0 1px rgba(255,255,255,0.7) inset;
border-color: rgba(46, 134, 193, 0.28);
}
.interview-qa-card .qa-q .qa-label {
background: linear-gradient(180deg, var(--brand-600), var(--brand-500));
box-shadow: 0 6px 14px rgba(46, 134, 193, 0.35);
}
.interview-qa-card .qa-q h3 {
font-weight: 800;
letter-spacing: .01em;
}
.interview-qa-card .qa-a p {
display: flex; align-items: flex-start; gap: .5rem;
}
.interview-qa-card .qa-a .qa-speaker {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; min-width: 24px;
border-radius: 999px;
background: rgba(46,134,193,0.12);
color: var(--brand-600);
font-weight: 800;
line-height: 1; text-align: center;
}
.interview-qa-card .qa-a p + p { margin-top: .35rem; }
.interview-qa-card .qa-img .photo-placeholder {
position: relative; overflow: hidden;
border-radius: 12px;
box-shadow: 0 14px 32px rgba(22,58,99,0.14);
}
.interview-qa-card .qa-img .photo-placeholder .photo-overlay {
position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.25) 100%) !important;
}
.interview-qa-card .qa-img .photo-placeholder .photo-overlay .photo-caption {
position: absolute; left: 10px; bottom: 10px;
display: inline-block; padding: .25rem .5rem; border-radius: 999px;
background: rgba(255,255,255,0.85); color: #163A63; font-weight: 700; font-size: .8rem;
}
.interview-qa-card:focus-within { outline: 3px solid rgba(46,134,193,0.35); outline-offset: 2px; }
/* PC幅: インタビュー2カラム（写真が右に来る設計を維持） */
@media (min-width: 992px) {
.interview-qa-cards { grid-template-columns: 1fr 1fr; }
}
/* ===== 社内本音インタビュー: ホバーでアニメーションしない ===== */
#interview.interview-section .interview-qa-card { transition: none !important; }
#interview.interview-section .interview-qa-card:hover {
transform: none !important;
box-shadow:
0 14px 32px rgba(22, 58, 99, 0.12),
0 0 0 1px rgba(255,255,255,0.65) inset !important;
border-color: rgba(46, 134, 193, 0.18) !important;
}
/* ===== インタビューQA: テキストブロックとボディ幅の完全一致 ===== */
.interview-qa-card .qa-body { width: 100%; max-width: 100%; margin: 0; padding: 0; }
.interview-qa-card .qa-a { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; padding-left: 0 !important; }
/* ===== インタビューQA: 全デバイスで Q&A → 画像 の縦並びを強制 ===== */
.interview-qa-card .qa-body { display: block !important; }
.interview-qa-card .qa-body::after { content: ""; display: block; clear: both; }
.interview-qa-card .qa-a,
.interview-qa-card .qa-img { display: block !important; width: 100% !important; float: none !important; clear: both; }
.interview-qa-card .qa-img { margin-top: .8rem !important; }
.interview-qa-card .qa-img .photo-placeholder {
background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* ===== 最終アプローチ: 全デバイス縦並び強制（最高セレクタ優先度） ===== */
#interview.interview-section .interview-qa-card {
display: block !important;
}
#interview.interview-section .interview-qa-card .qa-q {
display: flex !important;
align-items: center !important;
width: 100% !important;
margin-bottom: 1rem !important;
}
#interview.interview-section .interview-qa-card .qa-body {
display: block !important;
flex-direction: unset !important;
grid-template-columns: unset !important;
width: 100% !important;
clear: both !important;
}
#interview.interview-section .interview-qa-card .qa-a,
#interview.interview-section .interview-qa-card .qa-img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
float: none !important;
position: static !important;
order: unset !important;
flex: none !important;
grid-area: unset !important;
}
#interview.interview-section .interview-qa-card .qa-a {
margin: 0 !important;
}
#interview.interview-section .interview-qa-card .qa-img {
margin: 1rem 0 0 0 !important;
clear: both !important;
}
@media (min-width: 1px) {
#interview.interview-section .interview-qa-card .qa-body { display: block !important; }
#interview.interview-section .interview-qa-card .qa-a { display: block !important; }
#interview.interview-section .interview-qa-card .qa-img { display: block !important; margin-top: 1rem !important; }
}
/* ===== インタビューQA: 幅/ボックスサイズ/左右余白を完全揃え ===== */
.interview-qa-card .qa-body,
.interview-qa-card .qa-a,
.interview-qa-card .qa-img,
.interview-qa-card .qa-img .photo-placeholder {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
.interview-qa-card .qa-img .photo-placeholder { display: block; }
/* moved to the top by build step */
/* ===== インタビューQ&A レイアウト ===== */
.interview-qa { display: grid; gap: 1rem; max-width: 900px; margin: 0 auto; }
.qa { background: #FFFFFF; border: 1px solid rgba(0,0,0,0.06); border-radius: 14px; box-shadow: 0 10px 24px rgba(22,58,99,0.08); padding: 1rem 1.2rem; }
.qa-q { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.qa-q .qa-label { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #2E86C1; color:#fff; font-weight: 800; }
.qa-q h3 { margin: 0; font-size: 1.1rem; color: #163A63; }
.qa-a { margin-left: calc(28px + .6rem); color: #1F2A37; line-height: 1.9; }
.qa-a .qa-speaker { font-weight: 700; color: #2E86C1; margin-right: .4rem; }
@media (max-width: 768px) { .qa-a { margin-left: 0; } }
/* ===== インタビュー：一連の流れレイアウト ===== */
.interview-flow { max-width: 900px; margin: 0 auto; display: grid; gap: 1.2rem; }
.flow-header .flow-lead { color: #1F2A37; line-height: 1.9; margin-top: .4rem; }
.flow-profile { display: flex; align-items: center; gap: .8rem; }
.flow-profile .profile-photo { width: 84px; height: 84px; border-radius: 50%; border: 2px solid rgba(46,134,193,0.25); }
.flow-profile .profile-meta { display: grid; gap: .2rem; }
.profile-name { font-weight: 800; color: #163A63; }
.profile-role { color: #2E86C1; font-weight: 700; font-size: .95rem; }
.exchange { background: #FFFFFF; border: 1px solid rgba(0,0,0,0.06); border-radius: 14px; box-shadow: 0 10px 24px rgba(22,58,99,0.08); padding: 1rem 1.2rem; }
.exchange .q { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.exchange .q .q-label { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #2E86C1; color:#fff; font-weight: 800; }
.exchange .q p { margin: 0; font-weight: 700; color: #163A63; }
.exchange .a { color: #1F2A37; line-height: 1.9; }
.exchange .a .a-speaker { font-weight: 700; color: #2E86C1; margin-right: .4rem; }
.flow-photo .photo-placeholder { height: 320px; border-radius: 14px; border: 1px solid rgba(46,134,193,0.15); box-shadow: 0 10px 24px rgba(22,58,99,0.08); }
.pull-quote { position: relative; padding: 1rem 1.2rem 1rem 2.2rem; border-left: 4px solid #2E86C1; background: rgba(46,134,193,0.06); border-radius: 8px; }
.pull-quote .mark { position: absolute; left: 8px; top: 2px; color: #2E86C1; font-size: 1.6rem; font-weight: 900; }
/* ===== Tさんの1日（タイムライン）: 非PCで画像の角丸を無効化 ===== */
@media (max-width: 1024px) {
.timeline-photo .photo-placeholder,
.timeline > .timeline-item .timeline-photo .photo-placeholder,
.timeline > .timeline-item:last-of-type .photo-placeholder {
border-radius: 0 !important;
}
}
/* タイムラインの特定見出しで後半を改行時にひと塊にする */
.nowrap { white-space: nowrap !important; }
/* =============================
概要: 株式会社コモリ 求職者向けLPのスタイルシート
役割: カラー/余白スケール、共通UI、各セクションの見た目調整
ルール: コメントはUTF-8。変更はセクション単位で記録
============================= */
:root {
--brand-700: #1f4f82;
--brand-600: #2E86C1;
--brand-500: #4A90E2;
--ink-900: #0f172a;
--ink-800: #111111;
--ink-600: #334155;
--ink-500: #475569;
--line-200: rgba(15, 23, 42, 0.12);
--line-100: rgba(15, 23, 42, 0.08);
--card-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
/* spacing scale */
--space-2xs: 4px;
--space-xs: 8px;
--space-sm: 12px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
}
/* ===== 最終上書き: 社内インタビュー背景をwagara_wave1.pngに変更 ===== */
#interview.interview-section {
background: linear-gradient(rgba(255,255,255,0.82), rgba(255,255,255,0.82)), url('images/wagara_wave1.png') center/cover no-repeat !important;
background-attachment: scroll !important;
}
#interview.interview-section::before { display: none !important; content: none !important; }
/* ===== インタビュー内の写真: 影・グラデーションを除去 ===== */
.interview-section .photo-placeholder { box-shadow: none !important; }
.interview-section .photo-overlay { background: none !important; }
/* ===== インタビュー内の画像サイズと余白を厳密に調整 ===== */
.interview-section .interview-photo .photo-placeholder {
margin-bottom: 0 !important;
width: 100% !important;
max-width: 400px !important;
height: auto !important;
aspect-ratio: auto !important;
border-width: 1px !important;
}
.interview-section .interview-photo .photo-placeholder img {
display: block;
width: 100%;
height: auto;
}
body {
color: var(--ink-800);
}
/* リセット: 余白やボックスサイズの初期化 */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-md) 0; line-height: 1.25; }
p { margin: 0 0 var(--space-md) 0; }
img { max-width: 100%; display: block; }
/* 見出し（共通） */
.section-title {
color: var(--ink-900);
text-shadow: none;
letter-spacing: .02em;
font-size: clamp(1.6rem, 2.5vw, 2.2rem);
margin-bottom: 2rem;
word-break: keep-all; /* 単語途中で折り返さない */
overflow-wrap: normal; /* 不要な分割を避ける */
text-align: center; /* 中央寄せ */
}
/* セクションの上下余白 */
section { padding: var(--space-2xl) 0; }
@media (max-width: 768px) { section { padding: var(--space-xl) 0; } }
/* コンテナの左右余白 */
.container { padding-inline: var(--space-md); }
/* 各セクションの背景（白ベース） */
.timeline-section,
.job-info-section,
.interview-section,
.faq-section,
.steps-section,
.about-section { background: #FFFFFF; }
/* カード系UIの共通枠線/影 */
.timeline-content,
.job-card,
.faq-item,
.interview-card,
.step {
background: #FFFFFF;
border: 1px solid var(--line-100);
border-radius: 12px;
box-shadow: var(--card-shadow);
}
/* タイムラインのカードを背景から浮き立たせる（強調） */
.timeline-section .timeline-content {
background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFF 100%);
border: 1px solid rgba(46, 134, 193, 0.25);
box-shadow:
0 16px 40px rgba(22, 58, 99, 0.12), /* 外側の柔らかい影 */
0 0 0 1px rgba(255, 255, 255, 0.6) inset; /* 内側の薄いリングで輪郭を常時表示 */
position: relative;
z-index: 1;
}
/* モバイルでも見失わないように影/枠をやや強める */
@media (max-width: 768px) {
.timeline-section .timeline-content {
border-color: rgba(46, 134, 193, 0.3);
box-shadow:
0 12px 28px rgba(22, 58, 99, 0.14),
0 0 0 1px rgba(255, 255, 255, 0.65) inset;
}
}
/* ボタン類の共通外観 */
.line-btn,
.submit-btn,
.floating-btn button,
.entry-fab {
background: var(--brand-600);
border: 1px solid rgba(255,255,255,0.2);
box-shadow: 0 8px 18px rgba(46, 134, 193, 0.28);
border-radius: 999px;
}
.line-btn:hover,
.submit-btn:hover,
.floating-btn button:hover,
.entry-fab:hover {
background: var(--brand-700);
}
/* ヒーローのオーバーレイ濃さ */
.hero-overlay {
background: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 50%, transparent 100%);
}
/* キャッチコピー（ヒーロー） */
.main-copy {
font-size: clamp(2.2rem, 5vw, 3.2rem);
line-height: 1.25;
letter-spacing: 0.02em;
word-break: keep-all; /* 単語途中で折り返さない */
overflow-wrap: normal;
text-wrap: balance; /* 改行時に視認性を保つ */
}
p {
color: var(--ink-600);
}
/* フォームの共通入力欄 */
.application-form input,
.application-form textarea,
.application-form select {
width: 100%;
padding: 0.9rem 1rem;
border-radius: 10px;
border: 1px solid var(--line-200);
font-size: 1rem;
box-sizing: border-box;
}
/* セレクトの下向き三角形（ドロップダウン矢印）を左寄せ気味に表示 */
.application-form select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.75rem center; /* 右端から0.75rem内側に */
background-size: 10px 6px;
padding-right: 2.2rem; /* 矢印分の余白を確保 */
}
.application-form {
position: relative;
}
.application-form .form-status {
margin-top: 1rem;
font-size: 0.95rem;
font-weight: 600;
color: var(--brand-700);
min-height: 1.5rem;
transition: color 0.2s ease;
}
.application-form .form-status.is-success {
color: #0f8a5f;
}
.application-form .form-status.is-error {
color: #b42318;
}
.submit-btn[disabled] {
opacity: 0.7;
cursor: not-allowed;
}
/* IE用（矢印を非表示） */
select::-ms-expand { display: none; }
/* 募集エリアのラジオボタン整列 */
.application-form .radio-group {
display: flex;
flex-direction: column;
gap: 0.4rem;
align-items: flex-start;
}
.application-form .radio-group label {
display: inline-flex !important; /* 後段の.form-group labelのdisplay:blockを上書き */
align-items: center;
gap: 0.12rem; /* 少しだけ間を空ける（汎用） */
column-gap: 0.12rem; /* Safariフォールバック */
margin: 0; /* 余計な外側余白を排除 */
padding: 0; /* 余計な内側余白を排除 */
white-space: nowrap; /* 1行に固定 */
letter-spacing: 0; /* 文字間隔の上書きで空き抑制 */
}
.application-form .radio-group input[type="radio"],
.application-form .radio-group input[type="checkbox"] {
margin: 0 !important; /* 既定の左右マージンを完全に無効化 */
margin-right: 0.12rem !important; /* テキストとの最小間隔（汎用） */
width: auto !important; /* 汎用input{width:100%}の影響を無効化 */
height: auto !important; /* 高さも既定に */
padding: 0 !important; /* 汎用paddingの影響を無効化 */
inline-size: auto; /* 横幅は内容にフィット */
flex: 0 0 auto; /* 伸縮させない */
display: inline-block; /* インライン要素として扱う */
align-self: center; /* ベースライン差を抑える */
transform: translateY(0.5px);
}
/* iOS/Safariのユーザーエージェントスタイルによる余白を除去 */
.application-form .radio-group input[type="radio"],
.application-form .radio-group input[type="checkbox"] {
-webkit-appearance: auto;
appearance: auto;
padding: 0; /* UAによるpaddingを抑制 */
}
/* ラベル直後テキストの先頭空白を視覚的に無効化（HTMLの半角空白対策） */
.application-form .radio-group label { text-indent: 0; }
.application-form .radio-group label input[type="radio"] + *,
.application-form .radio-group label input[type="checkbox"] + * { margin-left: 0; }
/* Safari/iPadでのline-height起因のズレを抑制 */
.application-form .radio-group label input[type="radio"] + *,
.application-form .radio-group label input[type="checkbox"] + * { line-height: 1; }
/* iOS特有の左右余白（-webkit-padding-start等）を無効化 */
.application-form .radio-group label { -webkit-padding-start: 0 !important; padding-inline-start: 0 !important; }
.application-form .radio-group input[type="radio"],
.application-form .radio-group input[type="checkbox"] { -webkit-padding-start: 0 !important; padding-inline-start: 0 !important; }
/* ===== iPhone向け微調整（幅480px以下）: ラジオとテキストの間隔をさらに詰める ===== */
@media (max-width: 480px) {
.application-form .radio-group label { gap: 0.08rem; column-gap: 0.08rem; }
.application-form .radio-group input[type="radio"],
.application-form .radio-group input[type="checkbox"] { margin-right: 0.08rem !important; }
}
/* ===== iPhone幅(<=480px)の右はみ出し対策（改行と横幅の最終上書き） ===== */
@media (max-width: 480px) {
/* 1) 「株式会社コモリについて」→ about-cta の本文改行を許可 */
.about-cta { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: hidden; }
.about-cta p {
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
text-wrap: pretty;
}
/* 2) 募集要項カード群のはみ出し防止（1カラム固定＋改行許可） */
#job-info .container { padding-inline: 16px !important; box-sizing: border-box; }
.job-cards { grid-template-columns: 1fr !important; width: 100% !important; max-width: 100% !important; margin-inline: auto !important; gap: 1rem !important; }
.job-card { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: hidden; }
#job-info .job-card p,
#job-info .job-card .detail-item p,
#job-info .job-details p {
white-space: normal !important;
overflow-wrap: normal !important; /* 単語途中での強制改行を禁止 */
word-break: normal !important; /* 単語途中で折り返さない */
line-break: strict !important; /* 和文の禁則で自然改行 */
hyphens: none !important; /* ハイフネーション無効 */
text-wrap: wrap !important; /* バランス改行は使わない */
}
/* 3) エントリーフォーム注意文（電話受付時間含む）を改行 */
.entry-section .application-form .form-note p {
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
}
}
.application-form input:focus,
.application-form textarea:focus,
.application-form select:focus {
outline: none;
border-color: var(--brand-600);
box-shadow: 0 0 0 4px rgba(46, 134, 193, 0.15);
}
/* サマリー円（数字で見る）の影を弱める */
.stat-circle {
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}
/* ベース: 初期化 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Sans JP', sans-serif;
line-height: 1.6;
color: #2C3E50;
background-color: #FAFBFC;
}
/* コンテナ */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 30px;
}
/* スマホ横/小型デバイスでの改行制御（見出しや本文等） */
@media (max-width: 768px), (orientation: landscape) and (max-width: 1024px) {
h1, h2, h3, h4, h5, h6,
p, strong,
.section-title, .main-copy, .sub-copy,
.timeline-content h3,
.faq-question h3,
.question h3,
.option-header h3,
.job-details p,
.detail-item strong,
.stat-number,
.stat-title {
word-break: keep-all; /* 単語途中で折り返さない */
overflow-wrap: normal; /* 不要な分割を避ける */
text-wrap: balance; /* 視認性の高い改行 */
line-break: strict; /* 和文の禁則を強める */
}
}
/* 超小画面向けのフォント縮小など */
@media (max-width: 360px) {
.section-title { font-size: clamp(1.5rem, 6.5vw, 1.8rem); }
.timeline-content h3 { font-size: clamp(1.05rem, 4.6vw, 1.2rem); }
.option-header h3 { font-size: clamp(1.1rem, 6.2vw, 1.4rem); }
}
/* FAQの改行ポリシー（読みやすさ重視） */
.faq-question h3,
.faq-answer p {
word-break: keep-all; /* 単語途中で折り返さない */
overflow-wrap: break-word;/* 必要時のみ単語分割 */
line-break: strict; /* 和文の禁則を強める */
text-wrap: balance; /* バランス良く改行 */
}
/* 繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ繧ｿ繧､繝医Ν */
.section-title {
text-align: center;
font-size: 3rem;
font-weight: 700;
margin-bottom: 2rem;
color: #2E86C1;
position: relative;
text-shadow: 2px 2px 4px rgba(46, 134, 193, 0.1);
}
/* 莨夂､ｾ邏ｹ莉九そ繧ｯ繧ｷ繝ｧ繝ｳ */
.about-section { padding: 4rem 0; overflow-x: hidden; }
.philosophy-hero {
font-size: clamp(2rem, 8vw, 5rem);
font-weight: 900;
letter-spacing: 0.12em;
text-align: center;
color: #000000;
text-shadow: 0 2px 8px rgba(22,58,99,0.06);
margin: 0 0 0.4rem 0; /* 名言行を近づける */
line-height: 1.1;
user-select: none;
font-family: 'Zen Old Mincho', serif;
}
.philosophy-sub {
text-align: center;
font-size: clamp(0.9rem, 2.6vw, 1.1rem);
color: #111111;
opacity: .9;
margin: 0 0 2.2rem 0; /* 名言の下の余白を拡大 */
}
.about-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr; /* 繝・く繧ｹ繝茨ｼ壼・逵・*/
gap: 2rem;
align-items: center;
}
.about-text .about-lead {
font-size: 1.05rem;
line-height: 1.9;
color: #1F2A37;
margin-bottom: 1rem;
text-wrap: normal; /* 蜿ｳ遶ｯ縺ｾ縺ｧ菴ｿ縺｣縺ｦ縺九ｉ謚倩ｿ斐＠ */
white-space: normal; /* 騾壼ｸｸ縺ｮ遨ｺ逋ｽ蜃ｦ逅・*/
display: block;
width: 100%; /* p繧呈ｨｪ蟷・＞縺｣縺ｱ縺・↓ */
}
.about-points { list-style: none; padding: 0; margin: 0; width: 100%; --label-col: 6.5em; }
.about-points li {
background: #F8FBFF;
border: 1px solid rgba(74, 144, 226, 0.15);
border-radius: 10px;
padding: 0.8rem 1rem;
margin-bottom: 0.6rem;
display: grid;
grid-template-columns: var(--label-col) 1fr; /* 繝ｩ繝吶Ν蟷・ｒ蝗ｺ螳・*/
column-gap: 0.1rem; /* 雉ｪ蝠上→蝗樒ｭ斐・髢馴囈繧堤強繧√ｋ */
width: 100%; /* 蝗幄ｧ抵ｼ亥推鬆・岼・峨ｂ讓ｪ蟷・ｒ邨ｱ荳 */
}
.about-points li span {
font-weight: 700;
color: #2E86C1;
white-space: nowrap;
display: block; /* 1蛻礼岼縺ｮ蝗ｺ螳壼ｹ・ｦ∫ｴ */
}
.about-photo .photo-placeholder { height: 320px; }
.about-photo { margin-top: 12px; }
/* 会社紹介スライドショー */
.about-slider {
position: relative;
width: 100%;
height: 320px;
border-radius: 0;
overflow: hidden;
box-shadow: 0 12px 30px rgba(0,0,0,0.18);
border: 1px solid rgba(0,0,0,0.06);
--slide-duration: 0.6s; /* ドットのフィルと同期させる */
}
.about-slide {
position: absolute;
inset: 0;
background-position: center;
background-size: cover;
opacity: 1; /* スライド方式では基本的に不透明のまま */
transform: translateX(100%); /* JS制御で移動 */
will-change: transform;
}
/* CSSアニメーションで左右スライド（JS不要） */
@keyframes aboutSlide {
/* 0%時点では右から入る準備 */
0% { transform: translateX(100%); }
/* 5%で中央に到達し、そのまま表示 */
5% { transform: translateX(0%); }
25% { transform: translateX(0%); }
/* 30%で左に抜けていく */
30% { transform: translateX(-100%); }
100% { transform: translateX(-100%); }
}
.about-slider .about-slide { animation: aboutSlide 16s ease-in-out infinite; }
.about-slider .about-slide:nth-child(1) { animation-delay: -0.8s; } /* 16sの5%分を先行させ初期から表示 */
.about-slider .about-slide:nth-child(2) { animation-delay: 3.2s; }
.about-slider .about-slide:nth-child(3) { animation-delay: 7.2s; }
.about-slider .about-slide:nth-child(4) { animation-delay: 11.2s; }
@media (max-width: 768px) {
.about-slider { height: 240px; }
}
/* ===== 769-1024px: 会社紹介スライドショーを画面幅に応じて縮小（ボタン同様の追従） ===== */
@media (min-width: 769px) and (max-width: 1024px) {
/* スライドの親はブロックに戻し、縦並びで中央寄せ（子をautoマージンで中央へ） */
.about-photo { display: block !important; }
/* 幅はビューポート連動、上限/下限つき。高さはclampで連動 */
.about-photo .about-slider,
.about-slider {
width: clamp(420px, 60vw, 680px) !important;
max-width: 100% !important;
height: clamp(240px, 38vw, 340px) !important; /* 画面が狭くなるほど小さく */
margin: 0 auto 0 auto !important; /* 中央寄せ */
display: block !important; /* 行内要素化を防止 */
}
/* ドットは幅指定を解除し、スライダー直下で中央寄せ */
.about-dots { width: auto !important; max-width: none !important; margin: 10px auto 0 !important; }
}
/* ===== 「株式会社コモリについて」: スライド以外の要素を中央寄せ（左右余白の偏りを是正） ===== */
@media (min-width: 769px) {
.about-section .container { margin-left: auto; margin-right: auto; }
.about-section .about-grid { margin-left: auto; margin-right: auto; justify-content: center; }
/* スライドショー(.about-photo)以外を中央に寄せる */
.about-section .about-grid > *:not(.about-photo) { justify-self: center; }
.about-section .philosophy-hero,
.about-section .philosophy-sub,
.about-section .about-text,
.about-section .about-cta { margin-left: 0; margin-right: 0; justify-self: stretch; }
}
/* ドットインジケーター */
.about-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 10px;
}
.about-dots .dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(0,0,0,0.25);
position: relative;
overflow: hidden; /* 内側のフィル用 */
cursor: pointer;
}
/* フィル用の擬似要素を使い、スライドと同じ周期で濃くする */
.about-dots .dot::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: rgba(0,0,0,0.9);
transform: scale(0);
opacity: 0;
animation: none; /* JS制御に切り替え */
transition: transform var(--slide-duration) ease, opacity var(--slide-duration) ease; /* スライドと同期 */
transform-origin: center;
}
@keyframes dotPulse {
0% { transform: scale(0); opacity: 0; }
5% { transform: scale(1); opacity: 1; }
25% { transform: scale(1); opacity: 1; }
30% { transform: scale(0); opacity: 0; }
100% { transform: scale(0); opacity: 0; }
}
/* 各ドットのディレイはスライドと一致させる */
.about-dots .dot.active::after { transform: scale(1); opacity: 1; }
/* 念のためベース背景も黒に寄せる（ブラウザ差異対策） */
.about-dots .dot.active { background: rgba(0,0,0,0.9) !important; }
.about-cta {
margin-top: 1.25rem;
padding: 1.25rem 1.4rem;
background: linear-gradient(180deg, rgba(22, 58, 99, 0.92) 0%, rgba(22, 58, 99, 0.85) 100%);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
box-shadow: 0 18px 45px rgba(22, 58, 99, 0.25);
position: relative;
overflow: hidden;
width: 100%; /* 親グリッドにフィット */
max-width: 100%; /* はみ出し防止 */
box-sizing: border-box; /* paddingを幅に含める */
}
.about-cta::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px;
background: #4A90E2; /* 左側のアクセントバー */
}
.philosophy-card {
border-left: 4px solid #2E86C1;
background: linear-gradient(180deg, rgba(46,134,193,0.06) 0%, rgba(46,134,193,0.02) 100%);
}
.philosophy-card h3 {
color: #163A63;
}
.about-cta h3 {
font-size: 1.25rem;
color: #FFFFFF;
margin-bottom: 0.4rem;
font-weight: 800;
}
.about-cta p {
margin-bottom: 0.8rem;
color: #E6EFF9;
}
.about-apply-btn {
display: inline-block;
padding: 0.75rem 1.25rem;
border-radius: 999px;
text-align: center; /* 繝懊ち繝ｳ譁・ｭ励ｒ荳ｭ螟ｮ謠・∴ */
background: #FFFFFF;
color: #1F2A37;
border: 1px solid rgba(255,255,255,0.2);
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
/* 「応募はこちらから」ボタンの視認性を保つ（ホバー時も白ボタンのまま） */
.about-apply-btn:hover,
.about-apply-btn:focus {
background: #FFFFFF !important;
color: #0f172a !important;
border-color: rgba(0,0,0,0.08) !important;
box-shadow: 0 12px 26px rgba(0,0,0,0.25) !important;
transform: translateY(-1px);
}
.about-apply-btn:focus-visible {
outline: 3px solid rgba(74,144,226,0.35);
outline-offset: 3px;
}
/* 繧ｹ繝槭・譎ゑｼ壼供髮・ｦ句・縺励ｒ1陦後↓蜿弱ａ繧具ｼ医℃繧翫℃繧翫∪縺ｧ諡｡螟ｧ縺励√・縺ｿ蜃ｺ縺鈴亟豁｢・・*/
@media (max-width: 480px) {
.about-cta h3 {
white-space: nowrap; /* 蠑ｷ蛻ｶ1陦・*/
font-size: clamp(0.9rem, 4.8vw, 1.45rem); /* 縺輔ｉ縺ｫ蜿弱∪繧企㍾隕悶〒蠕ｮ隱ｿ謨ｴ */
line-height: 1.1;
max-width: 100%;
}
.about-cta { padding-inline: 0.75rem; } /* 蜀・・菴咏區繧偵ｄ繧・ｸ帙ｉ縺・*/
}
/* 縺輔ｉ縺ｫ迢ｭ縺・ｫｯ譛ｫ蜷代￠縺ｮ菫晞匱・亥承蛻・ｌ髦ｲ豁｢繧貞━蜈茨ｼ・*/
@media (max-width: 380px) {
.about-section .container { padding-inline: 12px; }
.about-cta h3 { font-size: clamp(0.85rem, 4.2vw, 1.3rem); }
}
/* 超狭幅端末（例: 310px前後）で右端の見切れを防ぎ、サイズは維持して自然改行 */
@media (max-width: 360px) {
.about-cta h3 {
white-space: normal !important; /* 強制一行を解除 */
overflow-wrap: anywhere; /* 必要に応じて改行 */
word-break: auto-phrase; /* 日本語の自然改行に配慮 */
text-wrap: balance; /* 行の視認性を保つ */
font-size: 1.25rem !important; /* 文字サイズは変更しない */
line-height: 1.25;
max-width: 100%;
}
}
/* 讌ｵ蟆冗判髱｢・・20px・牙髄縺代・迚ｹ蛻･蟇ｾ蠢・*/
@media (max-width: 320px) {
/* 譬ｪ蠑丈ｼ夂､ｾ繧ｳ繝｢繝ｪ縺ｫ縺､縺・※ */
.about-section .container { padding-inline: 6px; }
.about-section .section-title { font-size: 1.4rem; }
.about-grid {
width: 100%;
max-width: 100%;
box-sizing: border-box;
grid-template-columns: 1fr;
gap: 1rem;
overflow: hidden;
}
.about-text {
width: 100%;
max-width: 288px;
margin: 0;
box-sizing: border-box;
overflow: hidden;
}
.about-photo {
width: 95%;
max-width: 273px;
margin: 0 auto;
box-sizing: border-box;
overflow: hidden;
}
.about-text .about-lead {
font-size: 0.9rem;
line-height: 1.7;
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding-inline: 2px;
overflow-wrap: break-word;
word-break: auto-phrase;
overflow: hidden;
}
.about-points {
--label-col: 3.5em;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.about-points li {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 0.5rem 0.3rem;
grid-template-columns: var(--label-col) 1fr;
column-gap: 0.3rem;
align-items: center;
overflow-wrap: break-word;
word-break: auto-phrase;
overflow: hidden;
}
.about-points li span {
align-self: center;
margin-left: 0.5rem;
width: calc(100% - 0.5rem);
box-sizing: border-box;
}
.about-cta {
padding: 0.6rem 0.3rem;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.about-cta h3 { font-size: clamp(0.9rem, 4.2vw, 1.3rem); }
.about-cta p {
font-size: 0.85rem;
line-height: 1.5;
overflow-wrap: break-word;
word-break: auto-phrase;
}
.about-apply-btn { padding: 0.7rem 0.8rem; font-size: 0.9rem; }
/* 笳銀雷縺輔ｓ縺ｮ縺皮ｴｹ莉・*/
.intro-section .container { padding-inline: 8px; }
.intro-content { padding: 0.8rem; }
.intro-lead { font-size: 0.95rem; line-height: 1.8; }
.intro-facts { --label-col: 5em; }
.intro-facts li { font-size: 0.9rem; padding: 0.6rem 0.5rem; }
.section-title { font-size: 1.6rem; }
/* 笳銀雷縺輔ｓ縺ｮ荳譌･ */
.timeline-section .container { padding-inline: 6px; }
.timeline { padding-inline: 4px; }
.timeline-left, .timeline-center, .timeline-right {
width: 100%;
max-width: 272px;
box-sizing: border-box;
overflow: hidden;
}
.timeline-content { padding: 0.8rem; font-size: 0.9rem; }
.timeline-comment .comment-content {
padding: 0.8rem;
font-size: 0.8rem;
line-height: 1.5;
margin-bottom: 1.5rem;
}
.timeline-comment .comment-content::after {
display: none !important;
}
.timeline-comment .comment-content .face-photo {
width: 25px;
height: 25px;
bottom: -22px;
right: 45px;
}
.mini-info { padding: 1rem; }
.mini-info .info-item { font-size: 0.85rem; }
.trivia-content, .growth-content { padding: 0.8rem; font-size: 0.9rem; }
.timeline-time { font-size: 0.9rem; padding: 0.4rem 0.8rem; }
.timeline-step { font-size: 0.8rem; }
/* 笳銀雷縺輔ｓ縺ｮ譛ｬ髻ｳ繧､繝ｳ繧ｿ繝薙Η繝ｼ */
.interview-section .container { padding-inline: 8px; }
.interview-cards { gap: 0.8rem; }
.interview-card { padding: 0.8rem; }
.interview-card .question { padding: 0.8rem 1rem; }
.interview-card .answer { padding: 0.8rem 1rem; }
.interview-card .question h3 { font-size: 1rem; }
.interview-card .answer p { font-size: 0.9rem; line-height: 1.6; }
.checklist ul li, .career-path .path-flow span { font-size: 0.85rem; }
.question .emoji { width: 1.8rem; height: 1.8rem; min-width: 1.8rem; font-size: 0.8rem; }
/* 繝偵・繝ｭ繝ｼ繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ */
.hero-container { padding: 0 1rem; }
.hero-text-content { padding: 1.2rem; max-width: 100%; }
.main-copy { font-size: 1.3rem; line-height: 1.25; }
.sub-copy { font-size: 0.85rem; }
.sub-copy p { font-size: 0.85rem; }
.copy-line { font-size: 1.5rem; line-height: 1.2; overflow-wrap: break-word; word-break: auto-phrase; }
}
@media (max-width: 768px) {
.about-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.about-photo .photo-placeholder { height: 240px; }
.about-cta { padding: 0.9rem 1rem; width: 100%; max-width: 100%; box-sizing: border-box; }
.about-points { --label-col: 6.2em; } /* 繧ｹ繝槭・譎ゅ・繝ｩ繝吶Ν蟷・*/
/* 蜿ｳ蛻・ｌ蟇ｾ遲厄ｼ壼・蛛ｴ菴咏區縺ｨ謚倩ｿ斐＠繧定ｪｿ謨ｴ */
.about-section .container { padding-inline: 16px; }
.about-text .about-lead, .about-points li {
overflow-wrap: anywhere;
word-break: auto-phrase;
}
}
@media (max-width: 400px) {
.about-grid {
width: 100%;
max-width: calc(100vw - 32px);
margin: 0 auto;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
.about-text {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 0;
}
.about-text .about-lead {
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow-wrap: anywhere;
word-break: auto-phrase;
line-height: 1.7;
padding-right: 0.5rem;
}
.about-section .container {
padding-inline: 12px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.about-cta { width: 100%; max-width: 100%; box-sizing: border-box; margin-left: 0; margin-right: 0; }
}
/* 500px以下: 「現在、一緒に働く仲間を募集しています」カードとスライドショーの右切れ防止を強制 */
@media (max-width: 500px) {
.about-section .container {
width: 100%;
max-width: 100%;
padding-inline: 12px; /* 余白を少し抑える */
box-sizing: border-box;
overflow: hidden;
}
.about-grid,
.about-text,
.about-photo,
.about-cta {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.about-photo .about-slider,
.about-slider {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
box-sizing: border-box !important; /* 境界線を含めて幅計算 */
overflow: hidden !important;
}
.about-dots { padding-inline: 0 !important; }
}
/* ===== 768px以下: 数字で見る（丸内の色付きテキスト）強制小型化 ===== */
@media (max-width: 768px) {
/* 元サイズ（0.8/0.9/1.1/0.7）から"少しだけ"小さく */
#stats .stat-circle .stat-icon-text { font-size: 0.90rem !important; }
#stats .stat-circle .stat-title { font-size: 1.00rem !important; }
#stats .stat-circle .stat-number { font-size: 1.30rem !important; transform: translateY(-1px) !important; }
#stats .stat-circle .stat-subtitle { font-size: 0.78rem !important; }
}
.section-title::after {
content: '';
display: block;
width: 120px;
height: 4px;
background: linear-gradient(135deg, #4A90E2 0%, #2E86C1 100%);
margin: 1.5rem auto;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
}
/* ヒーロー（ファーストビュー） */
.hero-section {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
color: white;
overflow: hidden;
}
/* ===== ヒーロー: 画像の実表示高にセクションを追従（ビューポート高と画像比率の両取り） ===== */
.hero-section { height: 100vh; }
@supports (height: 100dvh) {
.hero-section { height: 100dvh; }
}
/* 安全策としてコンテンツのはみ出しがあればセクション高を拡張 */
.hero-section::after {
content: '';
display: block;
height: 0;
/* 将来、画像の実サイズに応じた計算が必要な場合にフック可能 */
}
/* ===== ヒーロー: 見出し/サブの文字サイズを画面幅に応じて可変（最終上書き） ===== */
.hero-section .main-copy {
font-size: clamp(1.9rem, 5.2vw, 3.6rem) !important; /* 右端切れ防止のためやや控えめに */
line-height: 1.22 !important;
text-wrap: balance !important;
overflow-wrap: anywhere !important;
word-break: auto-phrase !important;
max-width: 100% !important;
display: flex !important; /* 各行を縦に積む */
flex-direction: column !important;
align-items: flex-start !important; /* 行幅をテキスト長にフィット */
gap: 0.15em !important; /* 行間の微調整 */
width: 100% !important; /* 行ブロック(100%)を受けるため全幅化 */
overflow: visible !important; /* 子のmax-content横溢れを可視化 */
}
.hero-section .hero-text-content { overflow: visible !important; }
.hero-section .sub-copy,
.hero-section .sub-copy p {
font-size: clamp(1rem, 2.8vw, 1.6rem) !important;
}
@media (max-width: 768px) {
.hero-section .sub-copy,
.hero-section .sub-copy p {
font-size: clamp(0.8rem, 3.5vw, 1.2rem) !important;
}
}
@media (max-width: 480px) {
.hero-section .main-copy { font-size: clamp(1.7rem, 6vw, 2.4rem) !important; }
}
/* ===== ヒーロー見出し: 常に3行構成に固定（各行をブロック化） ===== */
.hero-section .copy-line {
display: inline-block !important; /* テキスト幅に合わせる */
white-space: nowrap !important; /* 各段を必ず1行に固定 */
word-break: keep-all !important; /* 単語途中で改行しない */
overflow-wrap: normal !important; /* 強制分割をしない */
max-width: 100% !important;
position: relative !important; /* 疑似要素でハイライトを描画 */
background: none !important; /* ハイライト背景を廃止 */
border: none !important; /* 枠線も廃止 */
padding: 0 !important; /* 行内余白をリセット */
isolation: isolate !important; /* 子z-indexの基準を独立させる */
}
/* ヒーロータイトル各行の"下線ハイライト" */
.hero-section .copy-line {
padding-bottom: 0.08em !important; /* 下線のための余白 */
}
.hero-section .copy-line::after {
content: '' !important;
position: absolute !important;
left: -0.25em; width: calc(100% + 0.5em); bottom: 0.02em; /* 行端から左右に延長 */
height: 0.18em; /* 下線の太さ */
background: rgba(255, 255, 255, 0.36); /* 白ベースの半透明（背景になじむ） */
border-radius: 2px; /* やや角丸で柔らかく */
pointer-events: none; /* クリック等の干渉なし */
z-index: -1; /* 文字の背面に配置（isolateで安全） */
}
/* 最後の行だけ下線をさらに延長 */
.hero-section .main-copy .copy-line:last-child::after {
left: -0.4em !important;
width: calc(100% + 0.8em) !important;
}
/* ハイライトを疑似要素で描画し、左右に"にじみ"を持たせてはみ出しを防止 */
.hero-section .copy-line::before {
content: none !important; /* 疑似要素のハイライトも廃止 */
}
/* 最終行はテキスト幅に完全一致（fit-content）でハイライトを適用 */
.hero-section .main-copy .copy-line:last-child {
display: inline-block !important;
width: -moz-fit-content !important; /* Firefox */
width: fit-content !important; /* 主要ブラウザ */
}
.hero-corner-image {
position: absolute;
top: 0;
left: 0;
z-index: 3; /* 背景より上に重ねる（オーバーレイの上） */
pointer-events: none; /* クリック等の操作を透過 */
padding: 10px; /* 端の余白（任意） */
}
.hero-corner-image img {
display: block;
width: clamp(120px, 18vw, 320px); /* 画面幅に応じてロゴサイズを可変 */
height: auto;
opacity: 0.9; /* 背景となじませる */
}
/* 繧ｹ繝槭・・育ｸｦ蜷代″・峨〒縺ｯ縺輔ｉ縺ｫ2蜻ｨ繧雁､ｧ縺阪￥ */
@media (max-width: 768px) {
.hero-corner-image img {
width: clamp(160px, 28vw, 380px);
}
}
/* 繧ｹ繝槭・・域ｨｪ蜷代″・峨〒繧・蜻ｨ繧雁､ｧ縺阪￥縲るｫ倥＆蟆上＆縺・ｫｯ譛ｫ繧堤岼螳峨↓驕ｩ逕ｨ */
@media (orientation: landscape) and (max-height: 480px) {
.hero-corner-image img {
width: clamp(180px, 30vw, 420px);
}
}
.hero-background-image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000;
background-image: url('images/0069-DSC_3376.jpg');
background-size: cover !important; /* セクション全体を常に覆う */
background-position: 60% center !important; /* 画像中心より少し右側を使用 */
background-repeat: no-repeat !important;
box-shadow: none; /* 四隅のインセット影を解除 */
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* 下方向へ濃くなる黒いグラデーション */
background:
linear-gradient(to bottom, rgb(0, 14, 36,0) 0%, rgba(0, 14, 36,0) 35%, rgba(0, 14, 36,0.75) 80%, rgba(0, 14, 36,0.95) 100%);
}
/* ヒーロー全体に金粉テクスチャを重ねる */
.hero-overlay::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('images/金箔1.png');
background-repeat: no-repeat; /* 1枚のみ */
background-position: left center; /* 左揃え */
background-size: auto 100%; /* 縦幅にフィット */
pointer-events: none; /* クリック操作に干渉しない */
opacity: 0.75; /* 視認性を高める */
}
/* 右側：金箔2を縦幅フィットで右揃え */
.hero-overlay::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('images/金箔2.png');
background-repeat: no-repeat; /* 1枚のみ */
background-position: right center; /* 右揃え */
background-size: auto 100%; /* 縦幅にフィット */
pointer-events: none; /* クリック操作に干渉しない */
opacity: 0.75; /* 視認性を高める */
}
.hero-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
width: 100%;
position: relative;
z-index: 2;
}
.hero-content {
display: flex;
align-items: center;
min-height: 80vh;
}
.hero-text-content {
max-width: clamp(560px, 56vw, 900px); /* タイトル画像の収まりを調整して少し小さく */
text-align: left;
padding: 2rem;
background: none; /* 背景装飾なし */
border-radius: 0; /* 丸みなし */
backdrop-filter: none; /* ぼかしなし */
border: none;
}
/* 基本値はモバイル〜タブレットのバランスに合わせる */
.catch-copy { margin-top: 2rem; }
.main-copy {
font-size: 4rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 2rem;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}
.title-image {
width: 100%;
max-width: min(72vw, 900px); /* やや控えめなサイズに */
height: auto;
/* 左上から光が当たり、右下にだけ落ちる影（シャープ） */
filter: drop-shadow(12px 14px 4px rgba(0, 0, 0, 0.70)) drop-shadow(24px 28px 10px rgba(0, 0, 0, 0.38));
display: block;
margin: 0 auto;
}
@media (max-width: 1024px) {
.title-image {
max-width: clamp(60vw, 70vw, 85vw); /* タブレットでも少し控えめに */
}
}
/* PC専用の位置・間隔調整 */
@media (min-width: 1025px) {
.catch-copy { margin-top: 1rem !important; }
.main-copy { margin-bottom: 2rem !important; } /* さらに詰める */
.hero-section .sub-copy {
padding-top: 0 !important; /* さらに詰める */
margin-left: 3.2rem !important; /* 右へ移動（左マージンで右寄せ） */
text-align: left; /* 可読性維持 */
}
}
.copy-line {
display: inline-block; /* 各行の要素化のみ維持 */
margin: 0.12em 0;
background: none; /* ハイライト廃止 */
border: none; /* 枠線廃止 */
padding: 0; /* 余白リセット */
backdrop-filter: none; /* ぼかし廃止 */
box-shadow: none; /* 影も廃止 */
}
.sub-copy {
font-size: 1.5rem;
margin-bottom: 2rem;
opacity: 1;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
color: #ffffff; /* 繝偵・繝ｭ繝ｼ縺ｮ繧ｵ繝悶さ繝斐・縺ｯ逋ｽ */
}
@media (min-width: 769px) {
.hero-section .sub-copy {
margin-left: 2.2rem;
padding-top: 1rem;
}
}
/* 繧ｵ繝悶さ繝斐・蜀・・谿ｵ關ｽ繧ょｿ・★逋ｽ縺ｫ縺吶ｋ */
.sub-copy p { color: #ffffff; }
/* ヒーロー内の採用バナー */
.recruit-banner {
margin-top: 1.5rem;
font-size: clamp(1.3rem, 3.6vw, 2rem);
font-weight: 900;
letter-spacing: 0.02em;
color: #ffffff;
}
.hero-image {
margin: 3rem 0;
}
/* 画像プレースホルダー（共通） */
.photo-placeholder {
width: 100%;
height: 240px;
background: #ddd center/cover no-repeat; /* 仮画像でも整って見える */
display: block; /* 蟄舌・荳ｭ螟ｮ謠・∴縺ｯ隕ｪ縺ｮflex縺ｧ陦後≧縲り・霄ｫ縺ｯ繝悶Ο繝・け縺ｧ蟷・00%縺ｫ */
border-radius: 0; /* 角丸をなくす（共通） */
position: relative;
overflow: hidden;
box-shadow: 0 8px 25px rgba(74, 144, 226, 0.3);
border: 3px solid white;
margin-bottom: 1rem;
aspect-ratio: 4/3;
}
/* 繧ｿ繧､繝繝ｩ繧､繝ｳ蜀・・蜀咏悄繧ｵ繧､繧ｺ隱ｿ謨ｴ・亥､ｧ縺阪↑繧ｵ繧､繧ｺ・・*/
.timeline-photo .photo-placeholder {
height: 340px; /* デフォルト高さ（PC基準） */
margin-bottom: 0;
width: 100%;
max-width: 100%; /* 460px制限を撤去して枠いっぱいに */
aspect-ratio: 4/3;
border-radius: 0; /* 角丸をなくす */
box-shadow: 0 15px 40px rgba(74, 144, 226, 0.25);
}
/* 会社紹介の画像は角丸なし */
.about-photo .photo-placeholder { border-radius: 0; }
/* T.Gさんのご紹介のメイン写真も角丸なし */
.intro-photo .main-photo { border-radius: 0; }
.main-photo {
height: 400px;
border-radius: 0; /* 念のため角丸をリセット */
}
.photo-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
color: white;
padding: 1.5rem;
text-align: center;
}
.photo-caption {
font-size: 1.2rem;
font-weight: 700;
line-height: 1.5;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.9);
letter-spacing: 0.5px;
/* 注意: キャプションの視認性は photo-overlay で担保 */
}
/* 蠕捺擂縺ｮ繝励Ξ繝ｼ繧ｹ繝帙Ν繝繝ｼ */
.placeholder-image,
.placeholder-video {
background: rgba(255, 255, 255, 0.1);
border: 2px dashed rgba(255, 255, 255, 0.3);
border-radius: 12px;
padding: 3rem 2rem;
text-align: center;
color: rgba(255, 255, 255, 0.8);
font-style: italic;
margin: 1rem 0;
}
/* 繝輔Ο繝ｼ繝・ぅ繝ｳ繧ｰ繝懊ち繝ｳ */
.floating-btn {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
}
.floating-btn button {
background: linear-gradient(135deg, #4A90E2 0%, #2E86C1 100%);
color: white;
border: none;
padding: 15px 25px;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 15px rgba(74, 144, 226, 0.4);
transition: all 0.3s ease;
}
.floating-btn button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(74, 144, 226, 0.6);
}
/* 蜿ｳ荳句崋螳壹・繧ｨ繝ｳ繝医Μ繝ｼ繝懊ち繝ｳ */
.entry-fab {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 1100;
background: linear-gradient(135deg, #4A90E2 0%, #2E86C1 100%);
color: #fff;
text-decoration: none;
font-weight: 800;
letter-spacing: 0.5px;
padding: 1.1rem 1.8rem; /* 繝懊ち繝ｳ繧ｵ繧､繧ｺ諡｡螟ｧ */
font-size: 1.05rem; /* 譁・ｭ励し繧､繧ｺ繧ょｰ代＠諡｡螟ｧ */
border-radius: 999px; /* 荳ｸ縺・ｽ｢迥ｶ */
box-shadow: 0 10px 24px rgba(46, 134, 193, 0.35);
border: 1px solid rgba(255,255,255,0.25);
}
/* 浮遊「応募はこちらから」ホバー時に背景色と同化しないよう強制 */
.entry-fab:hover {
background: linear-gradient(135deg, #5AA4F0 0%, #3A8ACB 100%) !important;
box-shadow: 0 14px 36px rgba(46, 134, 193, 0.45);
transform: translateY(-2px);
color: #fff;
border-color: rgba(255,255,255,0.35);
}
@media (max-width: 480px) {
.entry-fab {
right: 14px;
bottom: 14px;
padding: 1rem 1.4rem; /* 繝｢繝舌う繝ｫ繧ゅｄ繧・僑螟ｧ */
border-radius: 999px; /* 荳ｸ繧堤ｶｭ謖・*/
font-size: 1rem;
}
}
/* 繧ｿ繧､繝繝ｩ繧､繝ｳ */
/* ===== 繧ｿ繧､繝繝ｩ繧､繝ｳ 繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ ===== */
.intro-section {
padding: 3rem 0;
background: #FFFFFF;
}
/* ===== 「Tさんのご紹介」背景の装飾（三角形） ===== */
.intro-section { position: relative; overflow: hidden; }
.intro-section::before,
.intro-section::after {
content: "";
position: absolute;
pointer-events: none;
z-index: 0; /* 背景として下層に配置 */
}
/* 左上の三角形 */
.intro-section::before {
top: 0;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: min(22vw, 280px) min(22vw, 280px) 0 0; /* 可変サイズ */
border-color: rgba(74, 144, 226, 0.12) transparent transparent transparent;
}
/* 右下の三角形 */
.intro-section::after {
right: 0;
bottom: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 min(26vw, 320px) min(26vw, 320px); /* 可変サイズ */
border-color: transparent transparent rgba(46, 134, 193, 0.10) transparent;
}
/* コンテンツは装飾の上に表示 */
.intro-section .container { position: relative; z-index: 1; }
/* 豬ｷ繝ｻ豬｢縺ｮ繧､繝｡繝ｼ繧ｸ縺ｮ莉募・繧・*/
.wave-divider {
width: 100%;
height: 0 !important; /* 非表示のため高さ0 */
display: none !important; /* 完全に非表示 */
background: none !important; /* 背景も無効化 */
}
.intro-card {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"title title"
"photo content"; /* タイトルを写真+文章の上で中央揃え */
gap: 2rem;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.intro-photo { grid-area: photo; }
.intro-content { grid-area: content; }
/* 「T.Gさんのご紹介」タイトルを中央揃え */
.intro-card .intro-title { grid-area: title; text-align: center; margin-bottom: 0; }
/* 写真を右側文章の高さの中央に配置（縦中央・左右中央） */
.intro-photo {
align-self: center;
display: flex;
align-items: center;
justify-content: center;
}
.intro-photo .main-photo {
height: 320px;
background-position: center; /* 逕ｻ蜒上・隕九○譁ｹ縺ｯ荳ｭ螟ｮ縺ｫ謌ｻ縺・*/
}
/* 逕ｻ蜒上ヶ繝ｭ繝・け閾ｪ菴薙ｒ荳九↓驟咲ｽｮ・医ョ繧ｹ繧ｯ繝医ャ繝暦ｼ・*/
@media (min-width: 1025px) {
.intro-photo {
margin-top: 2.5rem;
}
}
/* 768px以下のレイアウト崩れ対策（1カラム化＋順序固定） */
@media (max-width: 768px) {
.intro-card {
grid-template-columns: 1fr;
grid-template-areas:
"title"
"photo"
"content";
gap: 0.75rem;
align-items: start;
}
.intro-card .intro-title {
grid-area: title;
text-align: center;
margin-bottom: 0; /* タイトル直下の余白をなくす */
}
.intro-photo {
grid-area: photo;
align-self: stretch;
display: flex;
align-items: center;
justify-content: center;
}
.intro-photo .main-photo {
width: 100%;
height: auto; /* 画像の縦横比を維持してリサイズ */
aspect-ratio: 4 / 3;
background-position: center;
}
.intro-content {
grid-area: content;
text-align: left; /* 本文は左寄せで読みやすく */
}
}
.intro-content .section-title {
margin-bottom: 1rem;
}
.intro-lead {
font-size: 1.05rem; /* about 縺ｨ蜷御ｸ */
line-height: 1.9; /* about 縺ｨ蜷御ｸ */
color: #1F2A37;
}
.intro-content p:not(.intro-lead){
font-size: 1.05rem;
line-height: 1.9;
text-wrap: pretty; /* 閾ｪ辟ｶ縺ｪ謾ｹ陦・*/
}
.intro-content li {
font-size: 1.0rem;
line-height: 1.8;
text-wrap: pretty; /* 閾ｪ辟ｶ縺ｪ謾ｹ陦・*/
}
@media (max-width: 480px) {
.intro-content p:not(.intro-lead),
.intro-content li {
overflow-wrap: anywhere; /* 髟ｷ縺・腰隱槭・蠑ｷ蛻ｶ謾ｹ陦・*/
word-break: auto-phrase; /* 譁・ｯ蜊倅ｽ阪〒謚倩ｿ斐＠・亥ｯｾ蠢懊ヶ繝ｩ繧ｦ繧ｶ縺ｧ譛牙柑・・*/
}
}
.intro-facts {
margin-top: 1rem;
list-style: none;
padding: 0;
}
.intro-facts { --label-col: 6.5em; }
.intro-facts li {
background: #F8FBFF;
border: 1px solid rgba(74, 144, 226, 0.15);
border-radius: 10px;
padding: 0.8rem 1.25rem 0.8rem 1.25rem; /* 蟾ｦ蛛ｴ縺ｫ蟆代＠菴咏區繧定ｿｽ蜉 */
margin-bottom: 0.6rem;
display: grid; /* 繝ｩ繝吶Ν縺ｨ譛ｬ譁・ｒ2繧ｫ繝ｩ繝縺ｧ驟咲ｽｮ */
grid-template-columns: var(--label-col) 1fr; /* 蜈ｨ繧｢繧､繝・Β縺ｧ繝ｩ繝吶Ν蟷・ｒ蝗ｺ螳・*/
column-gap: 0.1rem; /* 繝ｩ繝吶Ν縺ｨ譛ｬ譁・・髢馴囈・亥ｰ代＠迢ｭ縺擾ｼ・*/
align-items: start; /* 荳顔ｫｯ謠・∴ */
}
.intro-facts li span {
display: block; /* 繧ｰ繝ｪ繝・ラ1蛻礼岼縺ｮ蝗ｺ螳壼ｹ・ｦ∫ｴ */
white-space: nowrap; /* 繝ｩ繝吶Ν繧呈釜繧願ｿ斐＆縺ｪ縺・*/
min-width: 0; /* 菴呵ｨ医↑譛蟆丞ｹ・ｒ謦､蟒・*/
font-weight: 700;
color: #2E86C1;
}
/* 魄ｮ蠎ｦ繝昴ャ繝暦ｼ医け繝ｪ繝・け縺ｧ髢矩哩・・*/
.info-pop {
margin-top: 1rem;
border: 1px solid rgba(46,134,193,0.2);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 6px 16px rgba(15,23,42,0.06);
}
.info-pop-header {
background: rgba(46,134,193,0.08);
color: #1f4f82;
font-weight: 700;
padding: .9rem 1rem;
}
.info-pop-content {
display: none;
padding: 1rem 1.2rem;
color: #334155;
}
.info-pop.active .info-pop-content {
display: block;
}
@media (max-width: 768px) {
.intro-card { grid-template-columns: 1fr; grid-template-areas: "content" "photo"; gap: 0.8rem; }
.intro-photo .main-photo { height: 230px; }
/* 繧ｹ繝槭・縺ｧ繧ゅΛ繝吶Ν蛻怜ｹ・ｒ蝗ｺ螳壹＠縺ｦ譁・ｭ謠・∴・亥ｰ代＠迢ｭ繧・ｼ・*/
.intro-facts { --label-col: 6.2em; }
.intro-facts li { column-gap: 0.35rem; } /* 繝｢繝舌う繝ｫ縺ｯ縺輔ｉ縺ｫ隧ｰ繧√ｋ */
}
/* ===== 768px超: 「Tさんのご紹介」レイアウト安定化（2カラム＋タイトル見出しは全幅） ===== */
@media (min-width: 769px) {
#intro .intro-card {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
grid-template-areas:
"title title"
"photo content";
column-gap: 2rem;
row-gap: 1.25rem;
align-items: start;
}
#intro .intro-title { grid-area: title; }
#intro .intro-photo { grid-area: photo; }
#intro .intro-content { grid-area: content; }
/* 写真の表示安定化（高さ可変、トリミングは中央） */
#intro .intro-photo .main-photo { height: clamp(260px, 32vw, 380px); }
#intro .intro-photo .photo-placeholder {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
}
/* 1024px〜1439px/1440px以上で右側テキストを画像の高さの中央に揃える */
@media (min-width: 1024px) and (max-width: 1439px) {
#intro .intro-content { align-self: center; }
}
@media (min-width: 1440px) {
#intro .intro-content { align-self: center; }
}
@media (max-width: 480px) {
/* 縺輔ｉ縺ｫ蟆上＆縺・判髱｢蜷代￠縺ｫ蠕ｮ隱ｿ謨ｴ */
.intro-facts { --label-col: 6em; }
}
.timeline-section {
padding: 4rem 0;
background: #FFFFFF;
}
.timeline-section .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
width: 100%; /* 遶ｯ譛ｫ蟷・↓遒ｺ螳溘↓繝輔ぅ繝・ヨ */
box-sizing: border-box; /* 繝代ョ繧｣繝ｳ繧ｰ霎ｼ縺ｿ險育ｮ・*/
}
/* ===== タイムライン（共通） ===== */
.timeline-progress { display: none; }
.progress-bar { display: none; }
.progress-fill { display: none; }
.progress-time { display: none; }
.current-time { display: none; }
/* ===== タイムライン（レイアウト） ===== */
.timeline {
position: relative;
max-width: 1000px;
margin: 0 auto;
width: 100%; /* 陦悟・菴薙ｒ逕ｻ髱｢蟷・↓繝輔ぅ繝・ヨ */
box-sizing: border-box;
}
/* ===== 中央線 ===== */
.timeline-line {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 3px;
background: #4A90E2;
transform: translateX(-50%);
z-index: 1;
}
/* ===== タイムラインアイテム ===== */
.timeline-item {
display: flex;
align-items: stretch;
margin-bottom: 3rem;
position: relative;
}
/* ===== 左右カラム（画像/本文） ===== */
.timeline-left,
.timeline-right {
flex: 1;
padding: 0 2rem;
}
.timeline-center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
z-index: 10;
gap: 0.5rem;
}
/* ===== ステップ番号バッジ ===== */
.timeline-step {
background: rgba(255, 255, 255, 0.9);
color: #4A90E2;
font-size: 0.8rem;
font-weight: 700;
padding: 0.3rem 0.8rem;
border-radius: 15px;
border: 2px solid #4A90E2;
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.2);
}
/* ===== 時刻バッジ ===== */
.timeline-time {
background: #4A90E2;
color: white;
padding: 1.2rem 2rem;
border-radius: 30px;
font-weight: 800;
font-size: 1.4rem;
text-align: center;
box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
white-space: nowrap;
min-width: 100px;
letter-spacing: 1px;
}
/* ===== 繧ｿ繧､繝繝ｩ繧､繝ｳ邁｡邏蛹厄ｼ・繧ｫ繝ｩ繝繧ｰ繝ｪ繝・ラ・・===== */
.timeline-item {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 2rem;
row-gap: 1.5rem;
align-items: start;
}
.timeline-center {
grid-column: 1 / -1; /* 荳企Κ縺ｫ譎る俣繝舌ャ繧ｸ繧貞・蟷・〒驟咲ｽｮ */
order: initial;
margin-bottom: 0.5rem;
}
.timeline-left,
.timeline-right {
padding: 0; /* 菴咏區繧堤ｰ｡邏蛹・*/
}
/* 逕ｻ蜒上→譁・ｫ縺ｮ鬮倥＆繧貞粋繧上○繧具ｼ郁｡悟・縺ｧ縺ｮ縺壹ｌ髦ｲ豁｢・・*/
.timeline-left > .timeline-photo,
.timeline-right > .timeline-photo,
.timeline-left > .timeline-content,
.timeline-right > .timeline-content {
height: 100%;
}
.timeline-line {
display: none; /* 荳ｭ螟ｮ邱壹・髱櫁｡ｨ遉ｺ縺ｧ繧ｹ繝・く繝ｪ */
}
.timeline-step {
display: none; /* 繧ｹ繝・ャ繝礼分蜿ｷ縺ｯ髱櫁｡ｨ遉ｺ縺ｧ諠・ｱ繧貞宍驕ｸ */
}
/* ===== 蜀咏悄繧ｳ繝ｳ繝・リ・域棧縺ｪ縺怜､ｧ縺阪↑陦ｨ遉ｺ・・===== */
.timeline-photo {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
/* 譫縺ｨ繝代ョ繧｣繝ｳ繧ｰ繧貞炎髯､縺励※繝輔Ν繧ｵ繧､繧ｺ陦ｨ遉ｺ */
}
/* ===== 譁・ｫ繧ｳ繝ｳ繝・リ ===== */
.timeline-content {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 8px 25px rgba(74, 144, 226, 0.15);
border: 2px solid #f0f8ff;
height: 100%;
}
.timeline-content h3 {
font-size: 1.8rem;
color: #2E86C1;
margin-bottom: 1.5rem;
font-weight: 800;
line-height: 1.3;
text-shadow: 1px 1px 2px rgba(46, 134, 193, 0.1);
word-break: keep-all; /* 隱槭・騾比ｸｭ謾ｹ陦後ｒ遖∵ｭ｢ */
overflow-wrap: normal; /* 莉ｻ諢丈ｽ咲ｽｮ縺ｧ縺ｮ蛻・牡繧堤ｦ∵ｭ｢ */
}
/* ===== 繧ｳ繝｡繝ｳ繝医・諠・ｱ繧ｨ繝ｪ繧｢ ===== */
.timeline-comment .comment-header {
font-size: 1.1rem;
font-weight: 700;
color: #4A90E2;
cursor: pointer;
margin-bottom: 0;
padding: 0.5rem;
background: transparent; /* 豼・＞髱偵・繝上う繝ｩ繧､繝医ｒ蟒・ｭ｢ */
border-radius: 8px;
transition: all 0.3s ease;
/* 二行目も中央揃えになるようフレックスで中央配置＋折返し */
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: .25em;
text-align: center;
}
.timeline-comment .comment-header:hover {
background: transparent; /* 繝帙ヰ繝ｼ譎ゅｂ閭梧勹濶ｲ繧貞・縺輔↑縺・*/
transform: translateY(-1px);
}
.timeline-comment .comment-header::after {
content: "（タップで表示）";
}
.timeline-comment .comment-content {
font-size: 1.1rem;
line-height: 1.7;
color: #444;
padding: 1.5rem;
background: #f8fbff;
border: 2px solid #4A90E2;
border-radius: 15px;
word-wrap: break-word;
overflow-wrap: break-word;
font-style: italic;
position: relative;
display: none;
margin-top: 0.5rem;
margin-bottom: 2rem;
box-shadow: 0 4px 15px rgba(74, 144, 226, 0.15);
}
/* ===== 「Tさんの1日」: コメントと顔写真はホバーで動かさない ===== */
#timeline .timeline-comment,
#timeline .timeline-comment *,
#timeline .timeline-comment .comment-header,
#timeline .timeline-comment .comment-content,
#timeline .timeline-comment .comment-content .face-photo {
transition: none !important;
transform: none !important;
}
#timeline .timeline-comment:hover,
#timeline .timeline-comment .comment-header:hover,
#timeline .timeline-comment .comment-content:hover,
#timeline .timeline-comment .comment-content .face-photo:hover {
transform: none !important;
}
.timeline-comment .comment-content::after {
display: none !important;
}
.timeline-comment .comment-content .face-photo {
position: absolute;
bottom: -40px;
right: 40px;
width: 40px;
height: 60px;
border-radius: 50%;
background: url('images/goya_face.jpg') center/cover no-repeat;
border: 3px solid #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
z-index: 10;
}
.timeline-comment .comment-content.active {
display: block;
}
.mini-info {
background: rgba(74, 144, 226, 0.08);
border-radius: 15px;
padding: 1.5rem;
margin-top: 5rem;
border: 2px solid rgba(74, 144, 226, 0.2);
position: relative;
overflow: hidden;
}
.mini-info .info-item {
font-size: 1rem;
color: #2E86C1;
font-weight: 600;
margin-bottom: 0.6rem;
word-wrap: break-word;
overflow-wrap: break-word;
padding: 0.3rem 0;
border-bottom: 1px solid rgba(74, 144, 226, 0.1);
}
/* 繧ｹ繝槭・・壹さ繝ｭ繝ｳ蠕後〒謾ｹ陦鯉ｼ医Λ繝吶Ν繧・陦檎岼縲∵悽譁・ｒ2陦檎岼・・*/
@media (max-width: 768px) {
.mini-info .info-item {
display: block;
text-align: left;
}
.mini-info .mini-label { display: block; white-space: nowrap; }
.mini-info .mini-body { display: block; white-space: normal; margin-left: 0; }
}
.mini-info .info-item:last-child {
border-bottom: none;
margin-bottom: 0;
}
.trivia-header,
.trivia .trivia-content {
font-size: 1rem;
line-height: 1.6;
}
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
z-index: 1;
}
.timeline::before {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 100%;
background:
linear-gradient(to bottom,
#4A90E2 0%,
#3A7BC8 25%,
#2E86C1 50%,
#2471A3 75%,
#1F5F99 100%);
border-radius: 2px;
box-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
}
.timeline-item {
position: relative;
margin-bottom: 2rem;
display: flex;
align-items: flex-start;
}
/* ===== 繝ｬ繧ｹ繝昴Φ繧ｷ繝悶ョ繧ｶ繧､繝ｳ ===== */
/* 繝ｬ繧ｹ繝昴Φ繧ｷ繝悶ョ繧ｶ繧､繝ｳ・夂ｵｱ險医そ繧ｯ繧ｷ繝ｧ繝ｳ */
@media (max-width: 768px) {
.stats-grid {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1.5rem;
padding: 1rem 0;
}
.stat-circle {
width: 180px;
height: 180px;
padding: 0.8rem; /* さらに上に寄せる */
}
.stat-circle .stat-icon-text {
font-size: 0.7rem; /* さらに小さく */
margin-bottom: 0.4rem;
padding: 0.3rem 0.6rem;
}
.stat-circle .stat-title {
font-size: 0.78rem; /* さらに小さく */
margin-bottom: 0.1rem; /* さらに上へ */
}
.stat-circle .stat-number {
font-size: 0.75rem; /* さらに小さく */
margin-bottom: 0.06rem;
transform: translateY(-8px); /* さらに上に上げる */
}
.stat-circle .stat-subtitle {
font-size: 0.6rem; /* さらに小さく */
line-height: 1.2;
}
/* 繧ｹ繝槭・譎ゑｼ壻ｸ頑ｮｵ2縺､縺ｮ縺ｿ謨ｰ蛟､繧貞ｰ代＠荳九￡繧・*/
.stats-grid .stat-circle:nth-child(1) .stat-number,
.stats-grid .stat-circle:nth-child(2) .stat-number {
margin: 0.55rem 0 0.22rem 0;
}
}
/* 繧ｹ繝槭・縺ｮ繧ｿ繧､繝繝ｩ繧､繝ｳ繧偵梧凾髢・竊・譁・ｫ 竊・逕ｻ蜒上榊崋螳壹↓縺励∽ｽ咏區繧定ｩｰ繧√ｋ */
@media (max-width: 768px) {
.timeline-item {
display: grid !important;
grid-template-columns: 1fr;
row-gap: 0.35rem; /* 譁・ｫ縺ｨ逕ｻ蜒上・髢馴囈繧偵＆繧峨↓迢ｭ縺・*/
margin-bottom: 0.8rem; /* 谺｡縺ｮ譎る俣縺ｾ縺ｧ縺ｮ髢馴囈繧ら強縺・*/
align-items: start;
text-align: left;
justify-items: center; /* 蟄占ｦ∫ｴ繧剃ｸｭ螟ｮ縺ｫ驟咲ｽｮ */
width: 100%; /* 陦悟・菴薙ｒ逕ｻ髱｢蟷・↓繝輔ぅ繝・ヨ */
box-sizing: border-box;
}
/* 1陦檎岼: 譎る俣繝舌ャ繧ｸ・井ｸｭ螟ｮ・・*/
.timeline-item > .timeline-center { grid-row: 1; margin-bottom: 0.15rem; justify-content: center; width: 100%; display: flex; }
/* 2陦檎岼: 譁・ｫ繧ｳ繝ｳ繝・リ・亥ｷｦ蜿ｳ縺ｩ縺｡繧峨↓縺ゅ▲縺ｦ繧ゑｼ・*/
.timeline-item > .timeline-right:has(.timeline-content),
.timeline-item > .timeline-left:has(.timeline-content) { grid-row: 2; }
/* 3陦檎岼: 逕ｻ蜒上さ繝ｳ繝・リ・亥ｷｦ蜿ｳ縺ｩ縺｡繧峨↓縺ゅ▲縺ｦ繧ゑｼ・*/
.timeline-item > .timeline-right:has(.timeline-photo),
.timeline-item > .timeline-left:has(.timeline-photo) { grid-row: 3; }
.timeline-left, .timeline-right { padding: 0; width: 100%; box-sizing: border-box; }
.timeline-photo { margin: 0; justify-content: center; width: 100%; display: flex; }
.timeline-content { padding: 1rem; } /* 譁・ｫ繝懊ャ繧ｯ繧ｹ縺ｮ菴咏區繧堤ｸｮ蟆・*/
/* 繝溘ル諠・ｱ縺ｯ繧ｹ繝槭・譎ゅ・蟾ｦ謠・∴繧呈・遉ｺ */
.mini-info, .mini-info .info-item { text-align: left; }
}
/* 讌ｵ蟆冗ｫｯ譛ｫ・・Phone SE/X 邵ｦ縺ｪ縺ｩ・牙髄縺托ｼ・has()髱樔ｾ晏ｭ倥〒鬆・ｺ上→荳ｭ螟ｮ蟇・○繧貞ｼｷ蛻ｶ */
@media (max-width: 400px) {
.timeline-section { overflow-x: hidden; }
.timeline-section .container { padding-inline: 12px; }
.timeline { width: 100%; max-width: 100%; margin-inline: auto; }
.timeline-item {
display: grid !important;
grid-template-columns: 1fr;
grid-template-areas:
"center"
"content"
"photo";
justify-items: center;
align-items: start;
width: 100%;
box-sizing: border-box;
margin-inline: 0; /* 蜿ｳ隕句・繧碁亟豁｢ */
}
.timeline-center { grid-area: center; width: 100%; display: grid; place-items: center; }
.timeline-center { justify-items: center; }
.timeline-left .timeline-content, .timeline-right .timeline-content { grid-area: content; width: 100%; box-sizing: border-box; }
.timeline-left .timeline-photo, .timeline-right .timeline-photo { grid-area: photo; width: 100%; display: flex; justify-content: center; box-sizing: border-box; }
/* 譎る俣繝舌ャ繧ｸ縺ｯGrid縺ｧ荳ｭ螟ｮ・・ransform縺縺ｨ蜿ｳ蟇・ｊ縺ｫ隕九∴繧狗腸蠅・・蟇ｾ遲厄ｼ・*/
.timeline-time { position: static; left: auto; transform: none; margin-inline: auto; display: inline-block; }
/* 蜀咏悄縺ｯ逕ｻ髱｢蟷・・縺ｫ蠢・★蜿弱ａ繧・*/
.timeline-photo .photo-placeholder { max-width: calc(100vw - 24px); width: 100%; height: auto; aspect-ratio: 4/3; }
}
@media (max-width: 480px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.stat-circle {
width: 150px;
height: 150px;
padding: 0.8rem;
}
.stat-circle .stat-icon-text {
font-size: 0.7rem;
padding: 0.3rem 0.6rem;
}
.stat-circle .stat-title {
font-size: 0.8rem;
}
.stat-circle .stat-number {
font-size: 1rem;
}
.stat-circle .stat-subtitle {
font-size: 0.65rem;
}
}
@media (max-width: 768px) {
.timeline-item {
flex-direction: column;
align-items: center;
text-align: center;
}
.timeline-left,
.timeline-right {
padding: 1rem 0;
width: 100%;
}
.timeline-center { order: -1; margin-bottom: 1rem; width: 100%; display: flex; justify-content: center; }
.timeline-line {
display: none;
}
.timeline-photo {
margin-bottom: 1rem;
height: auto;
/* min-height蜑企勁縺ｧ繧医ｊ譟碑ｻ溘↑繧ｵ繧､繧ｺ蟇ｾ蠢・*/
width: 100%;
display: flex;
justify-content: center;
box-sizing: border-box;
}
.timeline-content {
height: auto;
}
.timeline-time { font-size: 1.2rem; padding: 1rem 1.4rem; margin-left: auto; margin-right: auto; }
.timeline-step {
font-size: 0.7rem;
padding: 0.2rem 0.6rem;
}
.timeline-progress {
max-width: 90%;
margin: 1.5rem auto 2rem;
}
.timeline-content h3 {
font-size: 1.5rem;
}
.timeline-comment .comment-content {
font-size: 1rem;
padding: 1.2rem;
}
.mini-info .info-item {
font-size: 0.95rem;
}
}
/* ===== 譎る俣繝舌ャ繧ｸ縺ｮ豼・ｷ｡螟牙喧 ===== */
/* 以前の時間バッジの個別色指定は撤廃（全体をシックに統一） */
/* ===== 繝ｪ繝輔ぃ繧､繝ｳ繝｡繝ｳ繝茨ｼ壼・菴薙・豢礼ｷｴ蠎ｦ繧帝ｫ倥ａ繧倶ｸ頑嶌縺・===== */
/* 繧ｿ繧､繝昴げ繝ｩ繝輔ぅ縺ｮ隕狗峩縺・*/
body {
color: #1F2A37; /* 繧・ｄ豺ｱ縺・げ繝ｬ繝ｼ縺ｧ蜿ｯ隱ｭ諤ｧ蜷台ｸ・*/
}
/* 繝・せ繧ｯ繝医ャ繝暦ｼ夂判蜒上ｒ蜿榊ｯｾ蛛ｴ縺ｮ譁・ｫ繝懊ャ繧ｯ繧ｹ縺ｮ窶應ｸｭ髢凪昴↓謠・∴繧具ｼ域凾髢薙→譁・ｫ縺ｮ菴咲ｽｮ縺ｯ荳榊､会ｼ・*/
@media (min-width: 1025px) {
.timeline-item {
display: grid; /* 蟾ｦ | 荳ｭ螟ｮ(譎る俣) | 蜿ｳ 縺ｮ3繧ｫ繝ｩ繝 */
grid-template-columns: 1fr auto 1fr; /* 蟾ｦ蜿ｳ縺ｮ蛻励ｒ蝮・ｭ峨↓蛻・牡 */
column-gap: 2rem;
align-items: stretch; /* 陦後・鬮倥＆縺ｯ螟ｧ縺阪＞譁ｹ・域枚遶・峨↓蜷医ｏ縺帙ｋ */
}
.timeline-left { grid-column: 1; display: flex; min-width: 0; }
.timeline-center{
grid-column: 2; /* 譌｢蟄倥・菴咲ｽｮ繧堤ｶｭ謖・*/
align-self: start; /* 陦後・蜈磯ｭ縺ｫ謠・∴繧・*/
display: flex; flex-direction: column;
align-items: flex-start; /* 繝舌ャ繧ｸ繧貞ｷｦ蟇・○・・ｸ雁ｯ・○ */
justify-content: flex-start;
margin-top: 0;
}
.timeline-right {
grid-column: 3;
display: flex;
min-width: 0;
overflow: visible;
width: 100%;
max-width: none;
}
/* 逕ｻ蜒丞・縺縺醍ｸｦ荳ｭ螟ｮ縺ｫ驟咲ｽｮ縲よ枚遶蛛ｴ縺ｯ鬮倥＆荳譚ｯ縺ｧ謠・∴繧・*/
.timeline-left:has(.timeline-photo),
.timeline-right:has(.timeline-photo) {
align-items: center;
width: 100%;
}
.timeline-left:has(.timeline-content),
.timeline-right:has(.timeline-content) {
align-items: stretch;
width: 100%;
}
.timeline-photo {
margin: 0;
width: auto;
max-width: none;
display: flex;
justify-content: center;
align-items: center;
}
.timeline-content { height: auto; }
.timeline-time { margin-top: 0; }
/* 譛蠕後・繧ｿ繧､繝繝ｩ繧､繝ｳ・・7:15・峨・譎る俣繝舌ャ繧ｸ縺縺台ｸｭ螟ｮ蟇・○縺ｫ陬懈ｭ｣ */
.timeline > .timeline-item:last-of-type .timeline-center {
align-items: center !important;
width: 100%; /* 荳ｭ螟ｮ繧ｻ繝ｫ繧貞・蟷・桶縺・↓ */
}
.timeline > .timeline-item:last-of-type .timeline-center .timeline-time {
margin-left: auto;
margin-right: auto;
justify-self: center; /* 霑ｽ蜉縺ｮ菫晞匱・・rid縺ｮ閾ｪ蟾ｱ謨ｴ蛻暦ｼ・*/
}
/* 17:15縺ｮ逕ｻ蜒上ｒ13:00縺ｨ蜷後§菴咲ｽｮ縺ｫ謠・∴繧倶ｿｮ豁｣ */
.timeline > .timeline-item:last-of-type .timeline-right {
width: auto !important;
max-width: none !important;
overflow: visible !important;
justify-content: center !important;
}
.timeline > .timeline-item:last-of-type .timeline-photo {
width: auto !important;
max-width: none !important;
display: flex !important;
justify-content: center !important;
}
.timeline > .timeline-item:last-of-type .photo-placeholder {
width: 340px !important;
height: 255px !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
border-radius: 20px !important;
box-shadow: 0 15px 40px rgba(74, 144, 226, 0.25) !important;
margin: 0 auto !important;
}
}
/* 讓ｪ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ髦ｲ豁｢縺ｨ蟾ｦ蜿ｳ縺ｮ縺ｯ縺ｿ蜃ｺ縺怜ｯｾ遲・*/
html, body {
max-width: 100%;
overflow-x: hidden;
}
/* 繧ｳ繝ｳ繝・リ縺ｮ蟾ｦ蜿ｳ菴咏區繧堤ｵｱ荳 */
.container {
width: min(1200px, 100%);
margin-inline: auto;
padding-inline: 20px;
box-sizing: border-box;
}
.section-title {
letter-spacing: 0.02em;
font-weight: 800;
color: #163A63; /* 豺ｱ縺・ヶ繝ｫ繝ｼ縺ｧ菫｡鬆ｼ諢・*/
}
/* 繧ｫ繝ｼ繝峨・蠖ｱ縺ｨ隗剃ｸｸ繧呈而縺医ａ縺ｧ荳願ｳｪ縺ｫ */
.timeline-content,
.stat-circle,
.job-card,
.faq-item,
.interview-card,
.step {
border-radius: 14px;
box-shadow: 0 10px 24px rgba(22, 58, 99, 0.08);
border: 1px solid rgba(22, 58, 99, 0.08);
}
/* 荳崎ｦ√↑蠑ｷ縺・げ繝ｩ繝・・繧ｷ繝ｧ繝ｳ繧定ｻｽ貂帙＠縲√ヵ繝ｩ繝・ヨ蟇・ｊ縺ｫ */
.line-btn,
.submit-btn,
.floating-btn button {
background: linear-gradient(135deg, #2E7BC6 0%, #245E96 100%);
}
.line-btn:hover,
.submit-btn:hover,
.floating-btn button:hover {
box-shadow: 0 10px 24px rgba(36, 94, 150, 0.25);
}
/* 繧ｿ繧､繝繝ｩ繧､繝ｳ縺ｮ譎る俣繝舌ャ繧ｸ繧剃ｸ願ｳｪ縺ｫ */
/* タイムライン時間バッジ: シックなデザイン */
.timeline-time {
color: #ffffff;
background: linear-gradient(180deg, #1f4f82 0%, #163A63 100%);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 8px 18px rgba(22, 58, 99, 0.25);
backdrop-filter: blur(4px);
padding: 0.6rem 1rem;
border-radius: 999px;
font-weight: 800;
letter-spacing: 0.03em;
}
/* ステップ小バッジもトーンを統一 */
.timeline-step {
color: #334155;
background: rgba(255,255,255,0.85);
border: 1px solid rgba(15, 23, 42, 0.10);
border-radius: 999px;
padding: 0.25rem 0.7rem;
font-weight: 700;
}
/* 邨ｱ險医・荳ｸ繧ｫ繝ｼ繝峨・濶ｲ縺ｮ蠖ｩ蠎ｦ繧貞ｰ代＠關ｽ縺ｨ縺・*/
.stat-circle:nth-child(1) {
background: #FFFFFF;
}
.stat-circle:nth-child(2) {
background:#FFFFFF;
}
.stat-circle:nth-child(3) {
background: #FFFFFF;
}
.stat-circle:nth-child(4) {
background: #FFFFFF;
}
.stat-circle:nth-child(5) {
background: #FFFFFF;
}
/* 繝輔か繝ｼ繧ｫ繧ｹ繝ｪ繝ｳ繧ｰ縺ｮ譏守｢ｺ蛹厄ｼ医く繝ｼ繝懊・繝画桃菴懊・荳願ｳｪ縺ｪ繧｢繧ｯ繧ｻ繧ｷ繝薙Μ繝・ぅ・・*/
.interview-card:focus,
.faq-item:focus,
.timeline-comment:focus,
.line-btn:focus,
.submit-btn:focus,
.floating-btn button:focus {
outline: 3px solid rgba(46, 123, 198, 0.35);
outline-offset: 3px;
}
/* FAQ縺ｮ雉ｪ蝠剰レ譎ｯ繧偵ｈ繧翫ヵ繝ｩ繝・ヨ縺ｫ */
.faq-question {
background: rgba(22, 58, 99, 0.04);
border-color: rgba(22, 58, 99, 0.12);
}
/* 蜈･蜉帙ヵ繧ｩ繝ｼ繝繧ゆｸ願ｳｪ縺ｫ */
input, textarea, select {
border-radius: 10px;
border: 1px solid rgba(22, 58, 99, 0.15);
box-shadow: 0 4px 12px rgba(22, 58, 99, 0.04) inset;
}
input:focus, textarea:focus, select:focus {
border-color: #2E7BC6;
box-shadow: 0 0 0 4px rgba(46, 123, 198, 0.18);
}
/* 繧ｿ繧､繝繝ｩ繧､繝ｳ縺ｮ蜀咏悄繧ｭ繝｣繝励す繝ｧ繝ｳ閭梧勹繧貞ｰ代＠阮・￥縺励※荳雁刀縺ｫ */
.photo-overlay {
background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.55) 100%);
}
.timeline-comment,
.trivia,
.growth-story {
background: #F0F8FF; /* 閭梧勹縺ｮ蝗幄ｧ偵・蝪励ｊ縺､縺ｶ縺励ｒ蠕ｩ豢ｻ */
border-radius: 15px;
padding: 1.2rem;
margin: 1.5rem 0;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid rgba(74, 144, 226, 0.15);
box-shadow: 0 4px 15px rgba(74, 144, 226, 0.1);
}
.timeline-comment:hover,
.trivia:hover,
.growth-story:hover {
background: #E8F4FD; /* 縺ｻ繧薙・繧頑ｿ・￥ */
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(74, 144, 226, 0.15);
}
/* --- タイムライン「Tさんコメント」: 大きな青枠を撤去し、本文のみをカード化 --- */
.timeline-comment {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
cursor: default !important;
}
.timeline-comment .comment-header { display: none !important; }
.timeline-comment .comment-content {
display: block !important; /* 常時表示 */
background: #FFFFFF;
border: 1px solid rgba(74, 144, 226, 0.35); /* 常時エッジを可視化 */
border-radius: 12px;
padding: 0.9rem 1rem;
margin-bottom: 3.5rem; /* 下の情報枠との間隔を拡大 */
box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.18) inset; /* 枠の淵を常時表示 */
}
.timeline-comment .comment-header::after { content: none !important; }
.trivia-header,
.growth-header {
font-weight: 700;
font-size: 1.1rem;
color: #2E86C1;
margin-bottom: 0;
padding: 0.5rem;
background: transparent; /* 譁・ｭ励・繝上う繝ｩ繧､繝医・辟｡縺・*/
border-radius: 8px;
transition: all 0.3s ease;
text-align: left;
}
.timeline-comment .comment-header {
font-size: 1.1rem;
font-weight: 700;
color: #4A90E2;
cursor: pointer;
margin-bottom: 0;
padding: 0.5rem;
background: transparent; /* 豼・＞髱偵・繝上う繝ｩ繧､繝医ｒ蟒・ｭ｢ */
border-radius: 8px;
transition: all 0.3s ease;
text-align: left;
}
.trivia-header::after,
.growth-header::after {
content: "（クリックで表示）";
}
@media (max-width: 768px) {
.trivia-header::after,
.growth-header::after {
content: "\A（タップで表示）";
white-space: pre;
font-size: 0.95em;
opacity: 1;
margin-left: 0;
}
.timeline-comment .comment-header::after {
content: "\A（タップで表示）";
white-space: pre;
font-size: 0.95em;
opacity: 1;
margin-left: 0;
}
.trivia-header,
.growth-header,
.timeline-comment .comment-header {
text-align: center;
}
}
.trivia-header::before {
content: '';
font-size: 1.2rem;
}
.growth-header::before {
content: '';
font-size: 1.2rem;
}
.trivia-content,
.growth-content {
display: none;
padding: 1rem;
color: #000; /* 文字色を黒に統一 */
font-size: 1rem;
line-height: 1.6;
background: rgba(255, 255, 255, 0.7);
border-radius: 10px;
border-left: none; /* 左の緑ラインを廃止 */
margin-top: 0.5rem;
}
.trivia-content.active,
.growth-content.active {
display: block;
}
.info-item {
color: #495057;
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.info-item:last-child {
margin-bottom: 0;
}
/* 繧､繝ｳ繧ｿ繝薙Η繝ｼ */
.interview-section {
padding: 3rem 0;
background: #66B2FF; /* 濃い水色 */
position: relative;
overflow: hidden;
}
/* ===== インタビュー（ナラティブ）新レイアウト ===== */
.interview-article { display: flex; flex-direction: column; gap: 2rem; }
.interview-intro { max-width: 900px; margin: 0 auto 0.5rem auto; color: #1F2A37; line-height: 1.9; }
.interview-quote { position: relative; margin: 0.75rem 0 0.75rem 0; padding: 0.9rem 1.1rem 0.9rem 2.2rem; background: rgba(46, 134, 193, 0.06); border-left: 4px solid #2E86C1; border-radius: 8px; }
.interview-quote .quote-mark { position: absolute; left: 10px; top: 4px; font-size: 2rem; color: #2E86C1; line-height: 1; }
.interview-quote p { margin: 0; color: #1F2A37; }
.interview-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0.8rem; align-items: stretch; justify-items: center; max-width: 1100px; margin: 0 auto; }
.interview-row.reverse { grid-template-columns: 1fr 1.1fr; }
.interview-row.reverse .interview-photo { order: 2; }
.interview-row.reverse .interview-text { order: 1; }
.interview-photo { position: relative; justify-self: center; align-self: stretch; display: flex; align-items: center; justify-content: center; height: 100%; }
.interview-photo { justify-self: center; }
.interview-photo .photo-placeholder { width: 100%; max-width: 560px; border-radius: 0; overflow: hidden; position: relative; border: 1px solid rgba(46,134,193,0.15); margin-inline: auto; }
.interview-photo .photo-placeholder img { max-width: 100%; width: auto; height: auto; display: block; margin: 0 auto; }
.interview-text h3 { color: #2E86C1; margin-bottom: 0.6rem; }
.interview-text p { color: #1F2A37; line-height: 1.9; }
.interview-text .mini-info { display: grid; grid-template-columns: 1fr; gap: 0.4rem; padding: 0.8rem 1rem; background: #F8FBFF; border: 1px solid rgba(74,144,226,0.15); border-radius: 10px; }
@media (max-width: 1024px) {
.interview-row, .interview-row.reverse { grid-template-columns: 1fr; }
.interview-row.reverse .interview-photo { order: 1; }
.interview-row.reverse .interview-text { order: 2; }
}
@media (max-width: 768px) {
.interview-article { gap: 1rem; }
.interview-intro { padding-inline: 8px; }
.interview-row { gap: 0.5rem; grid-template-columns: 1fr; }
/* 768px以下は常に 文章 → 画像 の順に並べる */
.interview-row .interview-text { order: 1; }
.interview-row .interview-photo { order: 2; }
.interview-row.reverse .interview-text { order: 1; }
.interview-row.reverse .interview-photo { order: 2; }
.interview-text h3 { margin-bottom: 0.4rem; }
/* カードは画面幅に収まるよう強制 */
.interview-article .interview-row { width: 100%; max-width: 100%; margin: 0 auto; padding: 0.9rem; box-sizing: border-box; }
.interview-text, .interview-photo { width: 100%; max-width: 100%; }
.interview-section .interview-photo .photo-placeholder { max-width: 80% !important; width: 80% !important; }
/* 右端切れ防止のためのパディングと折り返し強化 */
.interview-section .container { padding-inline: 12px; }
.interview-text p, .interview-text h3 { overflow-wrap: anywhere; word-break: auto-phrase; }
.interview-text .mini-info, .interview-text .interview-quote { max-width: 100%; width: 100%; }
.interview-row, .interview-text, .interview-photo { overflow: hidden; }
.interview-section * { box-sizing: border-box; }
}
/* デスクトップで文章を縦中央＋横中央寄せ、列全体を中央に集約 */
@media (min-width: 769px) {
.interview-row { justify-content: center; grid-template-columns: minmax(0, 520px) minmax(0, 560px); gap: 0.6rem; }
/* reverse行はデスクトップで「文章 写真」の順に配置 */
.interview-row.reverse .interview-text { grid-column: 1; }
.interview-row.reverse .interview-photo { grid-column: 2; }
/* 文章の位置に応じて片側余白を大きくする */
.interview-row:not(.reverse) .interview-text { margin-right: 2rem; }
.interview-row.reverse .interview-text { margin-left: 2rem; }
.interview-text {
display: flex;
flex-direction: column;
justify-content: center; /* 縦中央 */
align-items: center; /* 横中央（ブロック自体を中央へ） */
max-width: 520px;
margin-inline: auto;
text-align: left; /* テキスト自体は左寄せを維持 */
}
.interview-text h3,
.interview-text p,
.interview-text .mini-info,
.interview-text .interview-quote { width: 100%; }
}
/* ===== インタビュー各ブロックを白い四角（カード）にする ===== */
.interview-article .interview-row {
background: #FFFFFF;
border: 1px solid rgba(0,0,0,0.06);
border-radius: 12px;
padding: 1.25rem;
position: relative;
}
.interview-cards {
display: grid;
grid-template-columns: 1fr; /* 1繧ｫ繝ｩ繝蝗ｺ螳壹〒髫｣縺ｮ遨ｺ逋ｽ逋ｺ逕溘ｒ髦ｲ豁｢ */
gap: 1rem; /* 繧ｫ繝ｼ繝蛾俣縺ｮ菴咏區繧貞悸邵ｮ */
max-width: 900px; /* 蜿ｯ隱ｭ諤ｧ縺ｨ隕也ｷ夂ｧｻ蜍輔・譛驕ｩ蛹・*/
margin: 0 auto;
z-index: 1;
position: relative;
}
.interview-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 50px rgba(74, 144, 226, 0.15);
border: 1px solid rgba(74, 144, 226, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
backdrop-filter: blur(10px);
width: 100%;
max-width: 100%;
box-sizing: border-box;
position: relative;
}
/* 繧､繝ｳ繧ｿ繝薙Η繝ｼ蜀・・蜀咏悄縺ｯ蟶ｸ縺ｫ豁｣縺励＞豈皮紫縺ｧ陦ｨ遉ｺ・域ｨｪ髟ｷ縺､縺ｶ繧碁亟豁｢・・*/
.interview-card .photo-placeholder {
height: auto; /* 蝗ｺ螳夐ｫ倥＆繧定ｧ｣髯､ */
aspect-ratio: 4 / 3; /* 豈皮紫繧貞崋螳・*/
}
/* Q1蝗樒ｭ斐・髢｢騾｣逕ｻ蜒上・蟆代＠蟆上＆繧√↓・域ｯ皮紫縺ｯ邯ｭ謖・ｼ・*/
.interview-card .related-image .photo-placeholder {
width: 100%;
max-width: 420px; /* 繝・せ繧ｯ繝医ャ繝励〒蟆代＠蟆上＆縺剰｡ｨ遉ｺ */
margin-inline: auto; /* 荳ｭ螟ｮ蟇・○ */
}
.interview-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 40px rgba(74, 144, 226, 0.2);
}
.question {
padding: 1.6rem; /* 隕句・縺励・菴咏區繧貞悸邵ｮ */
display: flex;
align-items: center;
gap: 1rem; /* 隕∫ｴ髢薙・髢馴囈繧堤ｸｮ蟆・*/
background: linear-gradient(135deg, #4A90E2 0%, #2E86C1 100%);
color: white;
}
.emoji {
font-size: 2.0rem; /* Q逡ｪ蜿ｷ繧偵＆繧峨↓邵ｮ蟆・*/
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
}
.question h3 {
flex: 1;
font-size: 1.05rem; /* 隕句・縺励ｒ蟆上＆縺・*/
line-height: 1.4; /* 陦碁俣繧定ｩｰ繧√ｋ */
font-weight: 600;
margin: 0; /* 菴咏區繧偵↑縺上☆ */
}
.toggle-btn {
font-size: 0.8rem; /* 全端末で「タップで回答」文字を小さく */
opacity: 0.8;
}
@media (max-width: 768px) {
/* 繧､繝ｳ繧ｿ繝薙Η繝ｼ・壹せ繝槭・縺ｧ Q逡ｪ蜿ｷ縺ｨ雉ｪ蝠乗枚繧貞酔荳陦後√ヨ繧ｰ繝ｫ縺ｯ縺昴・荳九↓蜈ｨ蟷・〒陦ｨ遉ｺ */
.interview-card .question {
display: grid;
grid-template-columns: auto 1fr; /* Q逡ｪ蜿ｷ | 雉ｪ蝠乗枚 */
align-items: center;
column-gap: .6rem;
row-gap: .35rem;
padding: 1.0rem 1.2rem;
}
.interview-card .emoji { grid-column: 1; font-size: 2.0rem; }
.interview-card .question h3 {
grid-column: 2;
margin: 0;
font-size: 1.05rem;
line-height: 1.4;
text-wrap: pretty; /* 閾ｪ辟ｶ縺ｪ謾ｹ陦・*/
}
.interview-card .question .toggle-btn {
grid-column: 1 / -1; /* 繧ｫ繝ｼ繝牙・蟷・〒驟咲ｽｮ */
width: 100%;
margin-top: 0;
text-align: center; /* 蜈ｨ蟷・・荳ｭ螟ｮ縺ｫ譁・ｭ鈴・鄂ｮ */
}
.answer { padding: 1rem; }
.answer p { font-size: 1rem; line-height: 1.7; }
}
/* 繧ｹ繝槭・譎ゑｼ壹ち繧､繝繝ｩ繧､繝ｳ縺ｮ繧ｳ繝｡繝ｳ繝医・繝・ム繧・陦梧ｧ区・縺ｫ螟画峩 */
@media (max-width: 768px) {
.timeline-comment .comment-header {
display: inline;
white-space: normal;
}
/* 謌宣聞繧ｹ繝医・繝ｪ繝ｼ繝ｻ雎・衍隴倥ｂ蜷梧ｧ倥↓莠梧ｮｵ蛹・*/
.growth-header { display: inline; white-space: normal; }
.trivia-header { display: block; white-space: normal; }
}
/* 繧ｹ繝槭・譎ゑｼ壹Α繝区ュ蝣ｱ縺ｮ繝ｩ繝吶Ν繧呈隼陦後＠縺ｦ隱ｭ縺ｿ繧・☆縺擾ｼ医さ繝ｭ繝ｳ蠕後〒謾ｹ陦鯉ｼ・*/
@media (max-width: 768px) {
.mini-info .info-item {
white-space: normal; /* 1陦悟宛髯舌ｒ隗｣髯､ */
}
/* 逍台ｼｼ隕∫ｴ縺ｧ繧ｳ繝ｭ繝ｳ逶ｴ蠕後↓謾ｹ陦後ｒ謖ｿ蜈･・亥・隗偵さ繝ｭ繝ｳ諠ｳ螳夲ｼ峨り｡碁ｭ縺ｫ譚･繧玖ｪ槭・荳区ｮｵ縺ｸ */
.mini-info .info-item::after {
content: "";
display: block; /* 2陦後↓蛻・￠繧句柑譫・*/
}
}
/* 繧ｹ繝槭・縺ｧ蝗樒ｭ斐′蜿ｳ縺ｫ隕句・繧後ｋ蝠城｡後・菫晞匱・亥ｹ・ｨ育ｮ励→謚倩ｿ斐＠繧貞ｼｷ蛹厄ｼ・*/
@media (max-width: 768px) {
.interview-card { width: 100%; max-width: 100%; box-sizing: border-box; margin-inline: 0; overflow: hidden; }
.interview-card .answer { width: 100%; box-sizing: border-box; }
.interview-card .answer p,
.interview-card .answer li { overflow-wrap: anywhere; word-break: auto-phrase; }
}
/* 繝｢繝舌う繝ｫ蟆ら畑謾ｹ陦悟宛蠕｡ */
.sp-br { display: none; }
@media (max-width: 424px) { .sp-br { display: initial; } }
/* 蜍滄寔隕・・ｼ壼腰隱樣比ｸｭ縺ｧ謾ｹ陦後＠縺ｪ縺・ｼ医せ繝槭・蜆ｪ蜈医〒蜴ｳ譬ｼ縺ｫ・・*/
@media (max-width: 768px) {
#job-info .job-details p {
word-break: keep-all; /* 譌･譛ｬ隱槭・遖∝援縺ｧ縺ｯ縺ｪ縺・′闍ｱ蜊倩ｪ槭・騾比ｸｭ謾ｹ陦後ｒ髦ｲ縺・*/
overflow-wrap: normal; /* 莉ｻ諢丈ｽ咲ｽｮ縺ｧ縺ｮ蛻・牡繧堤ｦ∵ｭ｢ */
line-break: strict; /* 蜿･隱ｭ轤ｹ縺ｪ縺ｩ縺ｮ遖∝援蜃ｦ逅・ｒ蜴ｳ縺励ａ縺ｫ */
text-wrap: balance; /* 陦梧忰縺ｮ繝舌Λ繝ｳ繧ｹ繧偵→繧具ｼ郁ｪ樣比ｸｭ繧貞牡繧翫↓縺上￥縺吶ｋ・・*/
}
}
.answer {
padding: 1.0rem 1.4rem; /* 蝗樒ｭ斐お繝ｪ繧｢縺ｮ菴咏區繧偵＆繧峨↓蝨ｧ邵ｮ */
display: none;
width: 100%;
box-sizing: border-box; /* 繝代ョ繧｣繝ｳ繧ｰ繧貞性繧√※100%蜀・↓蜿弱ａ繧・*/
}
.answer.active {
display: block;
}
/* 蝗樒ｭ斐ユ繧ｭ繧ｹ繝医・隱ｭ縺ｿ繧・☆縺輔→繝懊Μ繝･繝ｼ繝諢溘ｒ蜷台ｸ・*/
.answer p {
font-size: 1.0rem; /* 譛ｬ譁・ｒ繧・ｄ蟆上＆縺・*/
line-height: 1.6; /* 陦碁俣繧定ｩｰ繧√ｋ */
margin: 0 0 0.5rem 0; /* 谿ｵ關ｽ髢薙・菴咏區遏ｭ邵ｮ */
overflow-wrap: anywhere; /* 髟ｷ縺・ｪ槭・謚倩ｿ斐＠繧定ｨｱ蜿ｯ */
word-break: auto-phrase; /* 譁・ｯ蜊倅ｽ阪・謚倩ｿ斐＠・亥ｯｾ蠢懊ヶ繝ｩ繧ｦ繧ｶ・・*/
}
.answer-section {
margin-bottom: 1.1rem; /* 繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ髢薙・菴咏區繧貞悸邵ｮ */
}
.answer-header {
font-weight: 600;
color: #2E86C1;
margin-bottom: 1rem;
font-size: 1.1rem;
}
.answer-section { margin-bottom: 0.8rem; }
.related-image {
margin-top: 1rem;
}
.skill-graph,
.career-path {
background: #F0F8FF;
border-radius: 10px;
padding: 1.5rem;
margin-top: 1rem;
border: 1px solid rgba(74, 144, 226, 0.1);
}
.graph-title {
font-weight: 600;
margin-bottom: 1rem;
color: #2E86C1;
}
.graph-placeholder {
background: rgba(74, 144, 226, 0.1);
padding: 2rem;
border-radius: 8px;
text-align: center;
color: #4A90E2;
}
/* 謌宣聞繧ｿ繧､繝繝ｩ繧､繝ｳ・医ョ繝｢・・*/
.growth-timeline {
position: relative;
padding-left: 1.2rem;
border-left: 3px solid #3A7BC8;
display: grid;
gap: 0.75rem;
}
.growth-item {
position: relative;
padding-left: 0.6rem;
}
.growth-time {
font-weight: 800;
color: #2E86C1;
margin-bottom: 0.15rem;
}
.growth-desc {
color: #455a64;
line-height: 1.6;
}
@media (max-width: 768px) {
.growth-timeline { padding-left: 1rem; }
.growth-item { padding-left: 0.5rem; }
/* 繧ｹ繝槭・譎ゅ・蟾ｦ菴咏區・・.0rem・峨↓蜷医ｏ縺帙※荳ｸ菴咲ｽｮ繧貞・陬懈ｭ｣ */
.growth-item::before { left: calc(-1rem - 6.5px); }
.growth-time { font-size: 0.95rem; }
.growth-desc { font-size: 0.95rem; }
}
.checklist {
margin-top: 1rem;
}
.checklist h4 {
color: #2E86C1;
margin-bottom: 0.75rem;
}
/* 繝励Ξ繝ｼ繝ｳ縺ｪ邂・擅譖ｸ縺搾ｼ医メ繧ｧ繝・け繝懊ャ繧ｯ繧ｹ縺ｯ髱櫁｡ｨ遉ｺ蛹厄ｼ・*/
.plain-list { margin: 0; padding-left: 1.1rem; }
.plain-list li { margin: 0.25rem 0; color: #444; line-height: 1.7; }
.path-flow {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
}
.path-flow span {
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-weight: 600;
}
.path-flow span:nth-child(1),
.path-flow span:nth-child(2),
.path-flow span:nth-child(3),
.path-flow span:nth-child(4) {
background: #4A90E2;
}
/* 邨ｱ險医そ繧ｯ繧ｷ繝ｧ繝ｳ */
.stats-section {
padding: 4rem 0;
background: linear-gradient(135deg, #F8FBFF 0%, #FFFFFF 100%);
overflow-x: hidden; /* 繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ蜀・・縺ｯ縺ｿ蜃ｺ縺鈴亟豁｢縺ｮ縺溘ａ讓ｪ繧ｮ繝｣繝・・邵ｮ蟆・*/
}
/* 讓ｪ荳ｦ縺ｳ繧ｰ繝ｪ繝・ラ繝ｬ繧､繧｢繧ｦ繝・*/
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.25rem 1.25rem; /* 縺ｯ縺ｿ蜃ｺ縺鈴亟豁｢縺ｮ縺溘ａ讓ｪ繧ｮ繝｣繝・・邵ｮ蟆・*/
align-items: stretch; /* 鬮倥＆謠・∴ */
justify-items: center; /* 蜷・い繧､繝・Β荳ｭ螟ｮ */
justify-content: center; /* 繝医Λ繝・け閾ｪ菴薙ｂ荳ｭ螟ｮ縺ｫ */
max-width: 1200px; /* 繧ｵ繧､繝医・譛螟ｧ蟷・↓蜷医ｏ縺帙ｋ */
margin: 0 auto;
padding: 2rem 20px; /* 蟾ｦ蜿ｳ繝代ョ繧｣繝ｳ繧ｰ繧定ｿｽ蜉 */
box-sizing: border-box;
}
/* 蛻･繧｢繝励Ο繝ｼ繝・ｼ喨Pad Air 讓ｪ逕ｻ髱｢繧偵ヴ繝ｳ繝昴う繝ｳ繝医〒荳頑嶌縺搾ｼ・68縲・024px 縺九▽讓ｪ蜷代″・・*/
@media (min-width: 820px) and (max-width: 1024px) and (orientation: landscape) {
.stats-grid { column-gap: 2vw; row-gap: 1vw; }
.stats-grid .stat-circle { --circle: 210px; padding-top: 0.2rem; }
.stat-circle .stat-icon-text { font-size: 0.85rem; padding: 0.2rem 0.5rem; }
.stat-circle .stat-title { font-size: 0.95rem; margin-bottom: 0.15rem; line-height: 1.1; }
.stat-circle .stat-number { font-size: 1.15rem; margin: 0.05rem 0 0.1rem; line-height: 1.05; }
.stat-circle .stat-subtitle { font-size: 0.78rem; margin-top: 0; line-height: 1.15; }
}
/* 荳ｸ縺・き繝ｼ繝峨ョ繧ｶ繧､繝ｳ */
.stat-circle {
--circle: clamp(240px, 22vw, 300px);
--accent-color: #2E86C1;
background: #FFFFFF; /* 蝪励ｊ縺､縺ｶ縺励・逋ｽ縺ｧ邨ｱ荳 */
color: #111111; /* 蝓ｺ譛ｬ譁・ｭ苓牡縺ｯ鮟堤ｳｻ縺ｫ邨ｱ荳 */
border-radius: 50%;
width: var(--circle);
height: var(--circle);
display: flex;
flex-direction: column;
justify-content: flex-start; /* 荳雁ｯ・○ */
align-items: center; /* 讓ｪ譁ｹ蜷代・荳ｭ螟ｮ謠・∴ */
gap: 0.2rem;
text-align: center;
padding: 0.4rem 1rem 0.6rem; /* 縺輔ｉ縺ｫ荳翫↓蟇・○繧・*/
border: 4px solid var(--accent-color); /* 譫縺縺題牡驕輔＞ */
box-shadow: 0 10px 28px rgba(22, 58, 99, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
margin: 0 auto;
position: relative;
overflow: hidden;
box-sizing: border-box;
}
/* 蜷・・縺ｫ荳雁刀縺ｧ隱螳溘↑濶ｲ縺ｮ繝舌Μ繧ｨ繝ｼ繧ｷ繝ｧ繝ｳ */
.stat-circle:nth-child(1) { --accent-color: #c1382e; }
.stat-circle:nth-child(2) { --accent-color: #1E5F8A; }
.stat-circle:nth-child(3) { --accent-color: #449D44; }
.stat-circle:nth-child(4) { --accent-color: #EC971F; }
.stat-circle:nth-child(5) { --accent-color: #6F5499; }
.stat-circle:hover {
transform: translateY(-6px) scale(1.03);
box-shadow: 0 16px 40px rgba(22, 58, 99, 0.15);
}
.stat-circle::before { display: none; }
/* 荳ｸ縺・き繝ｼ繝牙・縺ｮ隕∫ｴ繧ｹ繧ｿ繧､繝ｫ */
.stat-circle .stat-icon-text {
font-size: 1rem;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 0.6rem;
padding: 0.35rem 0.8rem;
background: transparent;
border: 2px solid var(--accent-color);
border-radius: 999px;
text-transform: uppercase;
z-index: 2;
position: relative;
color: var(--accent-color);
text-shadow: none;
}
.stat-circle .stat-title {
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 0.28rem 0; /* 謨ｰ蟄励ｒ荳九￡繧九◆繧∽ｸ雁・縺ｮ菴咏區繧貞ｰ代＠蠅励ｄ縺・*/
text-shadow: none;
line-height: 1.2;
z-index: 2;
position: relative;
color: #111111; /* 繧ｿ繧､繝医Ν縺ｯ鮟・*/
}
.stat-circle .stat-number {
font-size: 1.7rem;
font-weight: 900;
margin: 0.38rem 0 0.22rem 0; /* 縺輔ｉ縺ｫ荳九↓驟咲ｽｮ縺励▽縺､荳句・繧りｩｰ繧√ｋ */
text-shadow: none;
letter-spacing: 0.4px;
color: var(--accent-color); /* 謨ｰ蟄励・縺ｿ濶ｲ莉倥″ */
z-index: 2;
position: relative;
line-height: 1.2;
}
.stat-circle .stat-subtitle {
font-size: 0.95rem;
line-height: 1.3;
opacity: 0.95;
font-weight: 500;
text-shadow: none;
z-index: 2;
position: relative;
color: #111111; /* 陬懆ｶｳ繧るｻ・*/
letter-spacing: 0.3px;
margin: 0.18rem 0 0 0; /* 謨ｰ蟄礼峩荳九・菴咏區繧偵ｄ繧・｢ｺ菫昴＠縺ｦ隕冶ｦ壹ヰ繝ｩ繝ｳ繧ｹ隱ｿ謨ｴ */
}
/* 蟆代＠縺壹ｉ縺励※蜍輔″縺ｮ縺ゅｋ驟咲ｽｮ縺ｫ・域焚蟄怜ｼｷ隱ｿ縺ｮ縺溘ａ縺ｮ隕也ｷ夊ｪ伜ｰ趣ｼ・*/
.stats-grid .stat-circle:nth-child(odd) {
transform: none; /* W驟咲ｽｮ縺ｫ蜷医ｏ縺帷┌蜉ｹ蛹・*/
}
.stats-grid .stat-circle:nth-child(even) {
transform: none; /* W驟咲ｽｮ縺ｫ蜷医ｏ縺帷┌蜉ｹ蛹・*/
}
/* 繝・せ繧ｯ繝医ャ繝励〒W蟄怜梛驟咲ｽｮ・井ｸ・繝ｻ荳・・・*/
@media (min-width: 1025px) {
.stats-grid {
display: flex; /* 雜・ｯ・寔驟咲ｽｮ縺ｮ縺溘ａflex縺ｫ */
flex-wrap: wrap; /* 3+2縺､/荳区ｮｵ2縺､縺ｮW蟄励が繝輔そ繝・ヨ */
justify-content: center; /* 蜈ｨ菴謎ｸｭ螟ｮ謠・∴ */
column-gap: 5rem; /* 讓ｪ譁ｹ蜷代・髢馴囈縺ｯ迴ｾ迥ｶ邯ｭ謖・*/
row-gap: 1rem; /* 邵ｦ譁ｹ蜷代・髢馴囈縺縺醍強繧√ｋ */
max-width: 1200px;
margin-inline: auto;
}
.stats-grid .stat-circle { margin: 0; } /* 螟門・菴咏區縺ｯ繧ｼ繝ｭ縺ｫ */
/* 荳頑ｮｵ3縺､/荳区ｮｵ2縺､縺ｮW蟄励が繝輔そ繝・ヨ */
.stats-grid .stat-circle:nth-child(-n+3) { transform: translateY(-10px); }
.stats-grid .stat-circle:nth-child(n+4) { transform: translateY(10px); }
/* 逕ｻ髱｢蟷・′迢ｭ縺・→縺阪・閾ｪ蜍輔Ξ繧､繧｢繧ｦ繝医〒蜿弱ａ繧・*/
@media (max-width: 1024px) {
.stats-grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
max-width: 100%;
}
.stat-circle { width: 220px; height: 220px; }
}
/* 繝・せ繧ｯ繝医ャ繝玲凾・・C・峨・縺ｿ・壽枚蟄励ｒ荳蝗槭ｊ螟ｧ縺阪￥縺励∝・菴薙ｒ繧・ｄ荳九￡繧・*/
@media (min-width: 1025px) {
.stat-circle { padding: 1.5rem 1rem 1.3rem; }
.stat-circle .stat-icon-text { font-size: 1.1rem; }
.stat-circle .stat-title { font-size: 1.25rem; margin-bottom: 0.4rem; }
.stat-circle .stat-number { font-size: 1.95rem; margin: 0.65rem 0 0.3rem 0; }
.stat-circle .stat-subtitle { font-size: 1.02rem; margin-top: 0.24rem; }
}
}
/* 豎ゆｺｺ諠・ｱ */
.job-info-section {
padding: 3rem 0;
background: linear-gradient(rgba(255,255,255,0.82), rgba(255,255,255,0.82)), url('images/wagara_design1.png') center/cover no-repeat;
overflow-x: hidden; /* 蟆冗判髱｢縺ｧ縺ｯ縺ｿ蜃ｺ縺鈴亟豁｢ */
}
/* 蜿ｳ蛻・ｌ蟇ｾ遲厄ｼ壽･ｵ蟆冗判髱｢縺ｧ縺ｮ螳牙・繝代ョ繧｣繝ｳ繧ｰ繧貞ｼｷ蛻ｶ */
@media (max-width: 360px) {
#job-info .container { padding-inline: 12px !important; }
.job-cards { gap: 1rem; }
.job-card { border-radius: 16px; }
}
.job-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
max-width: 1300px;
margin: 0 auto;
z-index: 1;
position: relative;
}
.job-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 25px;
padding: clamp(1rem, 4vw, 3rem); /* 逕ｻ髱｢蟷・↓蠢懊§縺ｦ蜀・・菴咏區繧貞庄螟峨↓縺励※縺ｯ縺ｿ蜃ｺ縺励ｒ髦ｲ豁｢ */
box-shadow: 0 15px 50px rgba(74, 144, 226, 0.15);
border: 2px solid rgba(74, 144, 226, 0.1);
backdrop-filter: blur(10px);
/* 繝帙ヰ繝ｼ蜉ｹ譫懊ｒ辟｡蜉ｹ蛹・*/
/* transition: transform 0.3s ease, box-shadow 0.3s ease; */
}
/* 繝帙ヰ繝ｼ蜉ｹ譫懊ｒ辟｡蜉ｹ蛹・*/
/* .job-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 60px rgba(74, 144, 226, 0.2);
} */
.job-card h3 {
color: #2E86C1;
font-size: 2.2rem;
margin-bottom: 2rem;
text-align: center;
padding-bottom: 1rem;
border-bottom: 3px solid rgba(74, 144, 226, 0.3);
text-shadow: 1px 1px 2px rgba(46, 134, 193, 0.1);
}
/* 驥崎ｦ∵ュ蝣ｱ繝斐Ν */
.job-summary {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
justify-content: center;
}
.summary-pill {
background: #fff;
border: 1px solid rgba(46, 134, 193, 0.25);
color: #163A63;
padding: 0.5rem 0.8rem; /* 福利厚生側のサイズに統一 */
border-radius: 999px;
font-weight: 700;
font-size: 0.95rem; /* 全カードで同一サイズに固定 */
box-shadow: 0 4px 16px rgba(22, 58, 99, 0.07);
}
/* ===== 募集要項: バッジサイズを福利厚生側に統一（全画面） ===== */
#job-info .summary-pill {
font-size: 0.95rem !important;
padding: 0.5rem 0.8rem !important;
line-height: 1.2 !important;
}
@media (max-width: 768px) {
#job-info .summary-pill {
font-size: 0.95rem !important; /* 以前の縮小ルールを上書き */
padding: 0.5rem 0.8rem !important;
}
}
.job-details {
display: grid;
gap: clamp(0.75rem, 2.5vw, 1.5rem); /* 菴咏區繧ょ庄螟峨↓縺励※蟆冗判髱｢縺ｧ縺ｮ讓ｪ蛻・ｌ繧呈椛蛻ｶ */
}
.detail-item {
display: block;
margin-bottom: 0.5rem;
padding: clamp(0.5rem, 2.5vw, 0.8rem) clamp(0.6rem, 3vw, 1rem);
border-radius: 12px;
/* 繝帙ヰ繝ｼ蜉ｹ譫懊ｒ辟｡蜉ｹ蛹・*/
/* transition: background 0.2s ease; */
background: #fff;
border: 1px solid rgba(74, 144, 226, 0.12);
}
/* ===== 募集要項: 職種など各詳細（detail-item）の枠線を完全に除去 ===== */
#job-info .job-card .detail-item {
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
/* 繝帙ヰ繝ｼ蜉ｹ譫懊ｒ辟｡蜉ｹ蛹・*/
/* .detail-item:hover {
background: rgba(74, 144, 226, 0.04);
} */
.detail-item strong {
color: #163A63;
display: block;
margin: 0;
}
.detail-item p {
color: #495057;
line-height: 1.5;
margin: 0;
}
/* 繧ｹ繝・ャ繝・*/
.steps-section {
padding: 3rem 0;
background: #FFFFFF;
}
.steps {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr; /* 繧ｹ繝・ャ繝・竊・遏｢蜊ｰ 竊・繧ｹ繝・ャ繝・竊・遏｢蜊ｰ 竊・繧ｹ繝・ャ繝・*/
align-items: stretch; /* 縺吶∋縺ｦ縺ｮ繧ｻ繝ｫ繧貞酔縺倡ｸｦ蟷・↓ */
max-width: 1000px; /* 讓ｪ蟷・↓菴呵｣輔ｒ謖√◆縺帙ｋ */
margin: 0 auto;
column-gap: 0.4rem; /* 繧ｫ繝ｼ繝牙酔螢ｫ縺ｮ讓ｪ髢馴囈繧貞ｰ代＠迢ｭ繧√ｋ */
row-gap: 0.75rem;
}
.step {
background: white;
border-radius: 15px;
padding: 1.5rem;
text-align: center;
box-shadow: 0 8px 32px rgba(74, 144, 226, 0.1);
border: 1px solid rgba(74, 144, 226, 0.1);
width: 100%;
max-width: 310px; /* 蟆代＠迢ｭ繧√ｋ */
transition: transform 0.3s ease;
height: 100%; /* 繧ｰ繝ｪ繝・ラ繧ｻ繝ｫ縺ｮ鬮倥＆縺ｫ蜷医ｏ縺帙ｋ */
display: flex; /* 蜀・Κ繧堤ｸｦ譁ｹ蜷代↓謨ｴ蛻・*/
flex-direction: column;
}
.step:hover {
transform: translateY(-3px);
}
.step-number {
font-size: 1.8rem;
font-weight: 800;
margin-bottom: 1rem;
color: #2E86C1;
background: rgba(74, 144, 226, 0.1);
padding: 0.8rem;
border-radius: 50%;
width: 3.5rem;
height: 3.5rem;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid rgba(74, 144, 226, 0.2);
margin: 0 auto 1rem;
}
.step-icon {
position: relative;
width: 7rem;
height: 5.5rem;
margin: 0 auto 0rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.step-icon img {
width: 250%;
height: 250%;
object-fit: contain;
}
/* 繧ｹ繝・ャ繝励い繧､繧ｳ繝ｳ縺ｮ蠖｢迥ｶ螳夂ｾｩ */
.icon-edit::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M14.06,9L15,9.94L5.92,19H5V18.08L14.06,9M17.66,3C17.41,3 17.15,3.1 16.96,3.29L15.13,5.12L18.88,8.87L20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18.17,3.09 17.92,3 17.66,3M14.06,6.19L3,17.25V21H6.75L17.81,9.94L14.06,6.19Z'/%3E%3C/svg%3E") no-repeat center;
background-size: 20px 20px;
}
.icon-message::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M20,2H4A2,2 0 0,0 2,4V22L6,18H20A2,2 0 0,0 22,16V4C22,2.89 21.1,2 20,2M6,9V7H18V9H6M14,13V11H18V13H14M6,13V11H12V13H6Z'/%3E%3C/svg%3E") no-repeat center;
background-size: 20px 20px;
}
.icon-star::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'/%3E%3C/svg%3E") no-repeat center;
background-size: 20px 20px;
}
/* 繝帙ヰ繝ｼ譎ゅ・諡｡螟ｧ蜉ｹ譫懊ｒ辟｡蜉ｹ蛹厄ｼ亥炎髯､貂医∩・・*/
.step h3 {
color: #2E86C1;
margin-bottom: 1rem;
font-size: 1.3rem;
}
.step-arrow {
font-size: 2rem;
color: #4A90E2;
text-align: center;
align-self: stretch; /* 陦碁ｫ倥＞縺｣縺ｱ縺・↓莨ｸ縺ｰ縺・*/
display: flex; /* 荳ｭ螟ｮ驟咲ｽｮ */
align-items: center;
justify-content: center;
}
/* FAQ */
.faq-section {
padding: 3rem 0;
background: #e6f2ff !important; /* 水色単色背景に変更 */
background-attachment: scroll; /* 閭梧勹繧偵せ繧ｯ繝ｭ繝ｼ繝ｫ縺ｨ荳邱偵↓蜍輔°縺・*/
background-size: cover; /* 閭梧勹繧ｵ繧､繧ｺ繧貞崋螳・*/
background-position: center; /* 閭梧勹菴咲ｽｮ繧貞崋螳・*/
position: relative;
overflow: hidden; /* 蟆冗判髱｢縺ｧ縺ｯ縺ｿ蜃ｺ縺鈴亟豁｢ */
}
.faq-items {
max-width: 1100px;
margin: 0 auto;
display: grid;
gap: 1.5rem;
z-index: 1;
position: relative;
padding-bottom: 1.5rem;
}
.faq-item {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
overflow: clip; /* 繧ｳ繝ｳ繝・Φ繝・・縺ｯ縺ｿ蜃ｺ縺励ｒ螳悟・縺ｫ繧ｯ繝ｪ繝・・ */
box-shadow: 0 12px 40px rgba(74, 144, 226, 0.15);
border: 2px solid rgba(74, 144, 226, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
backdrop-filter: blur(10px);
}
.faq-item:hover {
transform: translateY(-3px);
box-shadow: 0 15px 50px rgba(74, 144, 226, 0.2);
}
.faq-item:hover {
transform: translateY(-2px);
}
.faq-question {
padding: 2rem 2.5rem;
display: grid; /* 蛻･繧｢繝励Ο繝ｼ繝・ｼ壹げ繝ｪ繝・ラ縺ｧ邵ｦ荳ｭ螟ｮ繧貞宍蟇・喧 */
grid-template-columns: auto 1fr auto; /* 邨ｵ譁・ｭ・| 雉ｪ蝠・| 繝医げ繝ｫ */
align-items: center; /* 3繧ｻ繝ｫ縺吶∋縺ｦ邵ｦ荳ｭ螟ｮ */
column-gap: 1.2rem;
background: rgba(74, 144, 226, 0.05);
color: #2E86C1;
border: 1px solid rgba(74, 144, 226, 0.1);
}
/* ===== FAQ: トグルアイコンは回転させない（横向きの - を維持） ===== */
.faq-item .toggle-icon {
display: inline-block;
transform: none !important;
}
.faq-item.active .toggle-icon {
transform: none !important;
}
.faq-question .emoji {
background: transparent; /* 閭梧勹繧帝乗・縺ｫ */
padding: 0; /* 繝代ョ繧｣繝ｳ繧ｰ繧貞炎髯､ */
border-radius: 0; /* 隗剃ｸｸ繧貞炎髯､ */
width: 3rem;
height: 3rem;
min-width: 3rem;
display: flex;
align-items: center;
justify-content: center;
border: none; /* 譫邱壹ｒ蜑企勁 */
justify-self: center; /* 繧ｻ繝ｫ蜀・ｸｭ螟ｮ */
align-self: center; /* 邵ｦ荳ｭ螟ｮ繧貞ｼｷ蛻ｶ */
}
.faq-question .emoji img {
width: 2.2rem;
height: 2.2rem;
object-fit: contain;
filter: brightness(0); /* 逕ｻ蜒上ｒ鮟定牡縺ｫ螟画鋤 */
}
.faq-question h3 {
font-size: 1.4rem;
font-weight: 700;
color: #2E86C1;
margin: 0; /* 荳贋ｸ九・菴咏區繧呈賜髯､縺励※螳溯ｳｪ荳ｭ螟ｮ縺ｫ */
line-height: 1.3; /* 陦碁俣繧呈紛縺医※隕冶ｦ夂噪荳ｭ螟ｮ繧貞叙繧翫ｄ縺吶￥ */
align-self: center; /* 邵ｦ荳ｭ螟ｮ */
}
.toggle-btn {
font-size: 1.5rem;
transition: transform 0.3s ease;
justify-self: center; /* 繧ｻ繝ｫ荳ｭ螟ｮ */
align-self: center; /* 邵ｦ荳ｭ螟ｮ */
}
/* 元の回転設定を無効化（上記の設定で既に対応済み）
.faq-item.active .toggle-icon {
transform: rotate(45deg);
} */
.faq-answer {
padding: 0 2rem;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease !important; /* 高さと余白のみアニメーションに */
}
.faq-answer.active {
padding: 1.5rem 2rem;
max-height: 1200px; /* 蜀・ｮｹ縺悟・繧後↑縺・ｈ縺・ｸ企剞諡｡螟ｧ */
}
.faq-answer p {
color: #495057;
line-height: 1.6;
}
/* 繧ｨ繝ｳ繝医Μ繝ｼ */
.entry-section {
padding: 3rem 0;
background: #FFFFFF;
}
.entry-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 2rem;
max-width: 1300px;
margin: 0 auto;
z-index: 1;
position: relative;
}
.entry-options.is-single {
grid-template-columns: minmax(0, 720px);
justify-content: center;
}
.entry-option {
background: rgba(255, 255, 255, 0.95);
border-radius: 25px;
padding: 3rem;
box-shadow: 0 15px 50px rgba(74, 144, 226, 0.15);
border: 2px solid rgba(74, 144, 226, 0.1);
backdrop-filter: blur(10px);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.entry-option.is-hidden {
display: none;
}
/* ===== エントリーフォーム: カード（まずは気軽に相談／本格的に応募）のホバー演出を無効化 ===== */
.entry-option:hover {
transform: none !important;
box-shadow: 0 15px 50px rgba(74, 144, 226, 0.15) !important; /* 通常時と同じに固定 */
}
.option-header {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 2rem;
}
.option-icon {
font-size: 1.2rem;
font-weight: 800;
color: #2E86C1;
background: none;
padding: 0;
border-radius: 0;
border: none;
margin-bottom: 0;
min-width: auto;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* エントリーフォームのアイコン画像を元のアイコンサイズ相当に縮小 */
.option-icon img {
width: 2.4rem;
height: 2.4rem;
object-fit: contain;
display: inline-block;
vertical-align: middle;
}
@media (max-width: 480px) {
.option-icon img {
width: 2.2rem;
height: 2.2rem;
}
}
.option-header h3 {
color: #2E86C1;
font-size: 2rem;
font-weight: 700;
text-shadow: 1px 1px 2px rgba(46, 134, 193, 0.1);
margin-bottom: 0.5rem;
}
.line-contact {
text-align: center;
}
.line-btn {
background: linear-gradient(135deg, #4A90E2 0%, #2E86C1 100%);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
margin-bottom: 2rem;
transition: transform 0.3s ease;
box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
}
.line-btn:hover {
transform: translateY(-2px);
}
.qr-placeholder {
background: #F0F8FF;
border: 2px dashed rgba(74, 144, 226, 0.3);
border-radius: 10px;
padding: 3rem;
margin: 2rem auto;
max-width: 200px;
color: #4A90E2;
}
.application-form {
background: white;
border-radius: 15px;
padding: 0 2rem 2rem; /* 荳雁・縺ｮ菴咏區繧堤┌縺励↓ */
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
color: #2E86C1;
font-weight: 600;
}
.required {
color: #e74c3c;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 0.75rem;
border: 2px solid rgba(74, 144, 226, 0.2);
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.3s ease;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: #4A90E2;
box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}
.submit-btn {
width: 100%;
background: linear-gradient(135deg, #4A90E2 0%, #2E86C1 100%);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 50px;
font-size: 1.2rem;
font-weight: 600;
cursor: pointer;
transition: transform 0.3s ease;
margin-bottom: 1rem;
box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
}
.submit-btn:hover {
transform: translateY(-2px);
}
.form-note {
text-align: center;
color: #6c757d;
font-size: 0.9rem;
}
.site-footer {
background:
linear-gradient(0deg, rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
url("images/0204-GRL_2769.jpg") center/cover no-repeat;
color: #ffffff;
text-align: center;
margin-top: 3rem;
padding: clamp(2.4rem, 6vw, 4rem) 0;
}
.site-footer .footer-message {
text-align: center;
max-width: 1000px;
margin: 0 auto 1.5rem;
padding: 0 1rem;
}
.site-footer .footer-title {
font-size: clamp(1.6rem, 3.8vw, 2.4rem);
line-height: 1.35;
margin: 0 0 .6rem;
color: #ffffff; /* 文字は白 */
}
.site-footer .footer-sub {
font-size: clamp(0.95rem, 2.2vw, 1.2rem);
opacity: .95;
margin: 0;
color: #ffffff; /* 文字は白 */
}
.site-footer, .site-footer * { color: #ffffff; }
.site-footer .contact-info { color: #ffffff; }
.site-footer .contact-info p { color: #ffffff; }
/* 荳驛ｨ繝｢繝舌う繝ｫ遶ｯ譛ｫ縺ｧ蜿ｳ蟇・ｊ縺ｫ隕九∴繧句撫鬘後・菫晞匱縺ｨ縺励※縲∝ｼｷ蛻ｶ逧・↓荳ｭ螟ｮ蟇・○ */
@media (max-width: 768px) {
.site-footer .footer-message,
.site-footer .footer-title,
.site-footer .footer-sub,
.site-footer .contact-info,
.site-footer .contact-info p {
text-align: center !important;
text-align-last: center;
margin-left: auto;
margin-right: auto;
}
.site-footer { padding: clamp(1.6rem, 5vw, 2.6rem) 0; }
/* ===== 768px以下: Tさんの一日セクション - カードと写真を隣接、他の間隔は拡大 ===== */
/* timeline-left/rightの上下パディングを削除してカードと写真を隣接させる */
.timeline-left, .timeline-right {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.timeline-left .timeline-content, .timeline-right .timeline-content {
margin-bottom: 0.1rem !important;
}
.timeline-left .timeline-photo, .timeline-right .timeline-photo {
margin-top: 0.05rem !important;
margin-bottom: 2rem !important; /* 写真と次の時間ボタンの間隔を大きく */
}
/* 時間バッジとカードの間隔も大きく */
.timeline-item {
margin-bottom: 2.5rem !important; /* 各時間セクション間の間隔を大きく */
}
.timeline-center {
margin-bottom: 1.0rem !important; /* 時間バッジとカードの間隔を大きく */
}
/* 繧ｹ繝槭・縺ｧ縺ｯ髢｢騾｣逕ｻ蜒上ｒ縺輔ｉ縺ｫ荳谿ｵ蟆上＆縺上＠縺ｦ蜿弱∪繧翫ｒ謾ｹ蝟・*/
.interview-card .related-image .photo-placeholder {
max-width: 340px;
}
}
/* 繧ｹ繝槭・逕ｻ髱｢譎ゑｼ壼承隕句・繧碁亟豁｢縺ｨ荳ｭ螟ｮ蟇・○縺ｮ螳牙ｮ壼喧・医ヵ繧ｩ繝ｳ繝医→菴咏區繧よ怙驕ｩ蛹厄ｼ・*/
@media (max-width: 768px) {
.site-footer .footer-title {
display: block;
width: 100%;
margin-top: clamp(0.6rem, 3vw, 1.2rem);
font-size: clamp(1.35rem, 6.2vw, 1.8rem);
line-height: 1.3;
overflow-wrap: anywhere;
word-break: auto-phrase;
}
.site-footer .footer-sub {
display: block;
width: 100%;
font-size: clamp(0.95rem, 4.6vw, 1.1rem);
line-height: 1.55;
overflow-wrap: anywhere;
word-break: auto-phrase;
}
}
.contact-info {
background: rgba(255,255,255,0.16);
border-radius: 16px;
padding: clamp(1rem, 3vw, 2rem);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.26);
z-index: 1;
position: relative;
}
.contact-info p {
margin-bottom: 0.5rem;
}
.contact-info p:last-child {
margin-bottom: 0;
}
/* 繝ｬ繧ｹ繝昴Φ繧ｷ繝悶ョ繧ｶ繧､繝ｳ */
@media (max-width: 768px) {
.container {
padding: 0 20px;
}
.main-copy {
font-size: 2.5rem;
}
.sub-copy {
font-size: 1.2rem;
}
.section-title {
font-size: 2.2rem;
}
.interview-cards,
.job-cards,
.entry-options {
grid-template-columns: 1fr;
}
.timeline {
max-width: 95%;
}
.faq-items {
max-width: 95%;
}
.job-cards {
grid-template-columns: 1fr;
}
.entry-options {
grid-template-columns: 1fr;
}
.floating-btn {
bottom: 20px;
}
.floating-btn button {
padding: 12px 20px;
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.main-copy { font-size: 1.9rem; line-height: 1.28; }
.section-title { font-size: 1.8rem; }
.interview-card .question, .faq-question { padding: 0.5rem 2rem; }
.interview-card .answer, .faq-answer.active { padding: 0.5rem 2rem; }
.container {
padding: 0 15px;
}
.timeline,
.faq-items { width: 100%; max-width: 100%; padding-inline: 12px; box-sizing: border-box; overflow: hidden; }
/* FAQ・夂ｸｦ蟷・悸邵ｮ・医せ繝槭・縺ｮ縺ｿ・・*/
.faq-section { padding: 2rem 0 3rem 0; }
.faq-items { gap: 1rem; padding-top: 1rem; padding-bottom: 1rem; }
.faq-item { width: 100%; max-width: 100%; box-sizing: border-box; margin-inline: 0; overflow: hidden; }
.faq-question { padding: 0.5rem 0.75rem; column-gap: 0.6rem; min-height: 56px; width: 100%; box-sizing: border-box; }
.faq-question h3 { word-break: normal; overflow-wrap: anywhere; text-wrap: pretty; }
.faq-question .emoji { width: 2.2rem; height: 2.2rem; min-width: 2.2rem; background: transparent; }
.faq-question .emoji img { width: 2rem; height: 2rem; filter: brightness(0); }
.toggle-icon { flex: 0 0 auto; }
.faq-question h3 { font-size: 1rem; }
/* 蝗樒ｭ斐・蛻晄悄迥ｶ諷九〒縺ｯ螳悟・縺ｫ髫縺呻ｼ井ｽ咏區繧ｼ繝ｭ縲∝｢・阜繧りｦ九○縺ｪ縺・ｼ・*/
.faq-answer { padding: 0 0.75rem; max-height: 0; overflow: hidden; border-top: none; width: 100%; box-sizing: border-box; }
/* 螻暮幕譎ゅ・縺ｿ菴咏區繧剃ｸ弱∴縺ｦ隱ｭ縺ｿ繧・☆縺・*/
.faq-answer.active { padding: 0.6rem 0.5rem; max-height: 1000px; }
.faq-answer p { font-size: 0.95rem; line-height: 1.6; margin: 0.2rem 0 0 0; }
/* 繧ｹ繝・ャ繝励・繝｢繝舌う繝ｫ縺ｧ邵ｦ荳ｦ縺ｳ縺ｫ謌ｻ縺呻ｼ倶ｸｭ螟ｮ謠・∴ */
.steps-section { padding: 1.5rem 0; }
.steps {
display: flex;
flex-direction: column;
gap: 0.5rem;
max-width: 360px;
align-items: center; /* 蟄占ｦ∫ｴ繧剃ｸｭ螟ｮ縺ｫ */
margin: 0 auto; /* 繧ｳ繝ｳ繝・リ閾ｪ菴薙ｂ荳ｭ螟ｮ */
}
.step-arrow {
align-self: center; /* 遏｢蜊ｰ閾ｪ霄ｫ繧剃ｸｭ螟ｮ縺ｫ */
transform: rotate(90deg); /* 蜿ｳ蜷代″竊偵ｒ荳句髄縺阪↓蝗櫁ｻ｢ */
font-size: 1.4rem;
line-height: 1;
margin: 0; padding: 0;
}
.step {
padding: 0.75rem 0.9rem;
max-width: 100%;
}
.step-number {
font-size: 1.2rem;
width: 2.2rem; height: 2.2rem;
padding: 0.4rem;
margin: 0 auto 0.5rem;
}
.step-icon {
width: 4rem; height: 4rem;
margin: 0 auto 0.5rem;
}
.step h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.step p { font-size: 0.9rem; line-height: 1.35; margin: 0; }
/* 繧ｨ繝ｳ繝医Μ繝ｼ・医せ繝槭・縺ｮ邵ｦ髟ｷ繧貞悸邵ｮ・・*/
.entry-section { padding: 1.5rem 0; }
.entry-options { gap: 1rem; }
.entry-option { padding: 1.1rem; border-radius: 16px; }
.option-header { gap: 0.8rem; margin-bottom: 0.5rem; align-items: center; }
.option-icon {
width: 3rem; height: 3rem; /* 繧｢繧､繧ｳ繝ｳ縺ｮ繝懊ャ繧ｯ繧ｹ繧呈ｭ｣譁ｹ蠖｢縺ｫ */
padding: 0; /* 蜀・・菴咏區縺ｯ繧ｼ繝ｭ縺ｫ */
display: grid; place-items: center; /* 荳ｭ螟ｮ驟咲ｽｮ */
}
.option-header h3 {
font-size: clamp(1.25rem, 6.8vw, 1.6rem); /* 縺輔ｉ縺ｫ螟ｧ縺阪￥ */
line-height: 1.05; /* 繝舌Λ繝ｳ繧ｹ濶ｯ縺丈ｸｭ螟ｮ隕九∴ */
white-space: nowrap; /* 1陦後〒蜿弱ａ繧・*/
}
.option-header { align-items: center; } /* 隕句・縺励ｒ繧｢繧､繧ｳ繝ｳ荳ｭ螟ｮ縺ｫ謠・∴繧・*/
/* 蛻･繧｢繝励Ο繝ｼ繝・ｼ壹げ繝ｪ繝・ラ縺ｧ繧｢繧､繧ｳ繝ｳ縺ｨ隕句・縺励ｒ蜴ｳ蟇・ｸｭ螟ｮ蜷医ｏ縺・*/
.option-header { display: grid; grid-template-columns: 3.2rem 1fr; column-gap: 1.2rem; }
.option-icon { flex: none; width: 3rem; height: 3rem; }
.option-header h3 {
display: flex;
align-items: center;
min-height: 3rem; /* 繧｢繧､繧ｳ繝ｳ縺ｨ蜷後§邵ｦ蟷・↓邨ｱ荳 */
line-height: 1; /* 陦碁ｫ倥〒繧ｺ繝ｬ縺ｪ縺・ｈ縺・↓ */
padding-left: 0.15rem; /* 譁・ｭ励ｒ蟆代＠蜿ｳ縺ｸ */
transform: none; /* 菴咲ｽｮ縺壹ｌ陬懈ｭ｣繧定ｧ｣髯､ */
}
/* 繝輔か繝ｼ繝縺ｮ蜀・・蟷・ｒ迢ｭ縺擾ｼ医き繝ｼ繝牙ｹ・・縺昴・縺ｾ縺ｾ・・*/
.entry-option .application-form { max-width: 320px; margin-inline: auto; }
.line-contact { text-align: center; }
.line-btn {
display: inline-flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 320px;
margin-inline: auto;
text-align: center;
}
.qr-placeholder { padding: 1.2rem; margin: 1rem auto; max-width: 160px; }
.application-form { padding: 1rem; }
.application-form { padding-top: 0; } /* 荳雁・菴咏區繧貞炎髯､ */
.form-group { margin-bottom: 0.9rem; }
.form-group input, .form-group textarea { padding: 0.6rem; font-size: 0.95rem; }
.submit-btn { padding: 0.9rem 1.2rem; font-size: 1.05rem; }
}
/* 繝帙ヰ繝ｼ繧ｨ繝輔ぉ繧ｯ繝・*/
.hover-lift {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* クリック可能な要素のみ移動アニメーションを許可 */
.hover-lift:is(a, button, [role="button"], .submit-btn, .line-btn, .about-apply-btn, .entry-fab, .faq-item, .timeline-comment, .trivia, .growth-story):hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
@media (max-width: 768px) {
.timeline-photo {
width: 100%;
margin-bottom: 0;
}
.timeline-photo .photo-placeholder {
height: 250px;
max-width: 100%;
border-radius: 15px;
}
.timeline-content {
width: 100%;
padding: 1.5rem;
margin-bottom: 0;
}
.timeline-content h3 {
font-size: 1.2rem;
text-align: left;
margin-bottom: 0.8rem;
word-break: keep-all; /* 繝｢繝舌う繝ｫ縺ｧ繧りｪ槭・騾比ｸｭ縺ｧ謾ｹ陦後＠縺ｪ縺・*/
overflow-wrap: normal;
}
.timeline-content p {
font-size: 0.95rem;
text-align: left;
margin-bottom: 0.8rem;
}
.photo-placeholder {
height: 200px;
border-radius: 12px;
margin-bottom: 1rem;
}
.timeline-photo .photo-placeholder {
height: 220px;
max-width: 100%;
}
.main-photo {
height: 300px;
}
.photo-overlay {
padding: 1rem;
}
.photo-caption {
font-size: 1.1rem;
line-height: 1.4;
letter-spacing: 0.3px;
/* 繝代ョ繧｣繝ｳ繧ｰ縺ｯ photo-overlay 縺ｧ邂｡逅・*/
}
/* 繝偵・繝ｭ繝ｼ逕ｻ蜒・*/
.hero-image .photo-placeholder {
height: 250px;
}
/* 繝偵・繝ｭ繝ｼ繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ・医せ繝槭・逕ｨ・・*/
.hero-section {
min-height: 70vh;
}
/* 繝偵・繝ｭ繝ｼ閭梧勹逕ｻ蜒擾ｼ医せ繝槭・逕ｨ縺ｫ逕ｻ髱｢縺ｫ繝輔ぅ繝・ヨ・・*/
.hero-background-image {
background-size: cover; /* 逕ｻ髱｢蜈ｨ菴薙↓繝輔ぅ繝・ヨ */
background-position: center; /* 荳ｭ螟ｮ蝓ｺ貅悶〒繝医Μ繝溘Φ繧ｰ */
}
.hero-text-content {
max-width: 100%;
padding: 1.5rem;
text-align: center;
}
.main-copy {
font-size: 2.2rem;
line-height: 1.3;
}
.title-image {
max-width: 90vw;
}
.sub-copy {
font-size: 1rem;
}
}
/* iPad繝ｻ繧ｹ繝槭・縺ｮ讓ｪ逕ｻ髱｢譎ゑｼ壹ヲ繝ｼ繝ｭ繝ｼ莉･螟悶・蜀咏悄繧帝壼ｸｸ豈皮紫縺ｧ陦ｨ遉ｺ・域ｨｪ髟ｷ縺､縺ｶ繧碁亟豁｢・・*/
@media (orientation: landscape) and (max-width: 1024px) {
/* 蜈ｱ騾壹・蜀咏悄譫縺ｯ鬮倥＆蝗ｺ螳壹ｒ繧・ａ縺ｦ繧｢繧ｹ繝壹け繝域ｯ斐〒蛻ｶ蠕｡ */
.photo-placeholder {
aspect-ratio: 4 / 3;
height: auto !important;
width: 100%;
max-height: 70vh; /* 逕ｻ髱｢縺ｫ蟇ｾ縺励※驕主ｺｦ縺ｫ螟ｧ縺阪￥縺ｪ繧峨↑縺・ｈ縺・ｸ企剞 */
}
/* 繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ蛟句挨縺ｮ鬮倥＆謖・ｮ壹ｂ謇薙■豸医☆ */
.timeline-photo .photo-placeholder,
.about-photo .photo-placeholder,
.interview-card .photo-placeholder,
.main-photo {
height: auto !important;
aspect-ratio: 4 / 3;
}
/* 謨ｰ蟄励〒隕九ｋ・・ｼ壽ｨｪ逕ｻ髱｢・医せ繝槭・繝ｻiPad・峨〒繧８蟄鈴・鄂ｮ・井ｸ・繝ｻ荳・・峨↓縺励∝ｹ・・縺ｫ蜿弱ａ繧・*/
.stats-grid {
display: flex;
flex-wrap: wrap; /* 3 + 2 縺ｫ謚倥ｊ霑斐☆ */
justify-content: center; /* 荳ｭ螟ｮ謠・∴ */
column-gap: 2.4vw; /* 讓ｪ髢馴囈繧貞庄螟峨〒隱ｿ謨ｴ */
row-gap: 1.2vw; /* 邵ｦ髢馴囈繧呈而縺医ａ縺ｫ */
max-width: 100vw; /* 逕ｻ髱｢蟷・ｒ雜・∴縺ｪ縺・*/
margin-inline: auto;
padding-inline: 2vw; /* 遶ｯ縺ｮ菴咏區繧堤｢ｺ菫・*/
box-sizing: border-box;
}
.stats-grid .stat-circle {
--circle: min(28vw, 220px); /* 蜀・ｒ繧・ｄ蟆上＆繧√↓縺励※讓ｪ蟷・↓繝輔ぅ繝・ヨ */
margin: 0; /* 螟門・菴咏區繧呈遠縺｡豸医＠ */
}
/* iPad Air 讓ｪ逕ｻ髱｢蜷代￠・壻ｸｸ蜀・ユ繧ｭ繧ｹ繝医ｒ縺輔ｉ縺ｫ蟆上＆縺上∝・菴薙ｒ荳雁ｯ・○ */
.stat-circle .stat-icon-text { font-size: clamp(0.68rem, 1.5vw, 0.85rem); padding: 0.2rem 0.5rem; }
.stat-circle .stat-title { font-size: clamp(0.8rem, 1.8vw, 0.95rem); line-height: 1.1; margin-bottom: 0.2rem; }
.stat-circle .stat-number { font-size: clamp(0.8rem, 2.6vw, 1.1rem); margin: 0.1rem 0 0.1rem 0; line-height: 1.05; }
.stat-circle .stat-subtitle { font-size: clamp(0.62rem, 1.5vw, 0.78rem); line-height: 1.15; margin-top: 0; }
/* W蟄励・荳贋ｸ九が繝輔そ繝・ヨ */
.stats-grid .stat-circle:nth-child(-n+3) { transform: translateY(-8px); }
.stats-grid .stat-circle:nth-child(n+4) { transform: translateY(8px); }
/* 荳ｸ蜀・ユ繧ｭ繧ｹ繝医ｒ蟆代＠縺縺醍ｸｮ蟆上＠縺ｦ蜿弱∪繧翫ｒ濶ｯ縺上☆繧・*/
.stat-circle .stat-icon-text {
font-size: clamp(0.7rem, 1.6vw, 0.9rem);
padding: 0.25rem 0.6rem;
letter-spacing: 0.8px;
}
.stat-circle .stat-title {
font-size: clamp(0.85rem, 2vw, 1rem);
line-height: 1.15;
}
.stat-circle .stat-number {
font-size: clamp(0.85rem, 2.8vw, 1.2rem); /* iPad讓ｪ縺ｧ蟆代＠蟆上＆縺・*/
letter-spacing: 0.2px;
margin: 0.15rem 0 0.1rem 0; /* 荳頑婿蜷代↓隧ｰ繧√※蜈ｨ菴薙ｒ荳翫∈ */
line-height: 1.05;
word-break: keep-all;
overflow-wrap: normal;
white-space: normal;
text-wrap: balance;
}
.stat-circle .stat-number br { display: inline; }
.stat-circle .stat-subtitle {
font-size: clamp(0.65rem, 1.6vw, 0.8rem);
line-height: 1.15;
margin-top: 0; /* 菴咏區繧定ｩｰ繧√※荳雁ｯ・○ */
}
}
/* iPad 邵ｦ逕ｻ髱｢・・68縲・024px・牙髄縺托ｼ壹ち繧､繝繝ｩ繧､繝ｳ縺ｮ蟠ｩ繧後ｒ荳ｭ螟ｮ謠・∴縺ｧ螳牙ｮ壼喧 */
@media (min-width: 769px) and (max-width: 1024px) {
.timeline-section .container { padding-inline: 20px; }
.timeline { max-width: 900px; margin: 0 auto; }
.timeline-line { display: none; }
/* 繝｢繝舌う繝ｫ蜷梧ｧ倥∵凾髢凪・譁・ｫ竊堤判蜒上・鬆・〒1繧ｫ繝ｩ繝陦ｨ遉ｺ縲ゆｸｭ螟ｮ縺ｫ蟇・○縺ｦ螳牙ｮ壼喧 */
.timeline-item {
display: grid !important;
grid-template-columns: 1fr;
row-gap: 0.8rem;
align-items: start;
text-align: left;
margin-bottom: 1.25rem;
}
.timeline-item > .timeline-center { grid-row: 1; margin-bottom: 0.25rem; display: flex; justify-content: center; }
.timeline-item > .timeline-right:has(.timeline-content),
.timeline-item > .timeline-left:has(.timeline-content) { grid-row: 2; }
.timeline-item > .timeline-right:has(.timeline-photo),
.timeline-item > .timeline-left:has(.timeline-photo) { grid-row: 3; }
.timeline-left, .timeline-right { padding: 0; width: 100%; }
.timeline-content { width: 100%; max-width: 680px; margin: 0 auto; }
.timeline-photo { margin: 0 auto; }
.timeline-photo .photo-placeholder { width: 80% !important; max-width: 80% !important; height: auto; aspect-ratio: 4/3; margin-inline: auto; }
.timeline-time { font-size: 1.3rem; padding: 1rem 1.6rem; }
/* 繝偵・繝ｭ繝ｼ閭梧勹繧堤判髱｢繧ｵ繧､繧ｺ縺ｫ繝輔ぅ繝・ヨ・・Pad邵ｦ・・*/
.hero-background-image {
background-size: cover; /* 菴咏區縺ｪ縺丞・髱｢縺ｫ繝輔ぅ繝・ヨ */
background-position: center; /* 荳ｭ螟ｮ蝓ｺ貅悶〒繝医Μ繝溘Φ繧ｰ */
}
/* 繝偵・繝ｭ繝ｼ蟾ｦ荳翫・陬・｣ｾ逕ｻ蜒擾ｼ喨Pad縺ｧ縺ｯ繧ゅ≧2蜻ｨ繧雁､ｧ縺阪￥ */
.hero-corner-image img {
width: clamp(200px, 34vw, 520px);
}
/* 縲・・＆繧薙・縺皮ｴｹ莉具ｼ・Pad邵ｦ・会ｼ壼承隕句・繧悟ｯｾ遲厄ｼ倶ｸｭ螟ｮ蟇・○ */
.intro-section { overflow-x: hidden; }
.intro-section .container { padding-inline: 20px; }
.intro-card { grid-template-columns: 1fr; grid-template-areas: "content" "photo"; gap: 1.25rem; max-width: 900px; margin-inline: auto; }
.intro-content { max-width: 760px; margin-inline: auto; }
.intro-photo .main-photo { height: auto; aspect-ratio: 4/3; max-width: 640px; margin-inline: auto; }
.intro-content li { overflow-wrap: anywhere; word-break: auto-phrase; }
.intro-content p:not(.intro-lead) { overflow-wrap: anywhere; word-break: auto-phrase; }
.intro-facts { --label-col: 6.2em; }
}
/* ===== スマホ向け: T.G.さんのご紹介の表示順と左揃え調整 ===== */
@media (max-width: 768px) {
.intro-card {
grid-template-columns: 1fr;
grid-template-areas:
"title"
"content"
"photo";
gap: 0.75rem;
align-items: start;
}
.intro-card .intro-title {
text-align: center;
margin-bottom: 0;
}
.intro-content {
text-align: left;
}
.intro-photo {
grid-area: photo;
align-self: stretch;
display: flex;
align-items: center;
justify-content: center;
}
}
/* iPad Air 讓ｪ逕ｻ髱｢・・180px蟷・Φ螳夲ｼ牙ｰら畑縺ｮ蠕ｮ隱ｿ謨ｴ */
@media (min-width: 1100px) and (max-width: 1200px) and (orientation: landscape) {
/* W蟄励ｒ螳牙ｮ壼喧・壻ｸ頑ｮｵ(1,3,5) 荳区ｮｵ(2,4)・丞・菴薙ｒ荳ｭ螟ｮ蟷・↓蜿弱ａ繧・*/
.stats-grid {
display: grid;
grid-template-columns: repeat(5, minmax(170px, auto)); /* 縺輔ｉ縺ｫ繝医Λ繝・け蟷・ｒ邵ｮ蟆・*/
column-gap: 0rem; /* 讓ｪ髢馴囈繧偵＆繧峨↓隧ｰ繧√ｋ */
row-gap: 0.6rem; /* 邵ｦ髢馴囈繧偵＆繧峨↓隧ｰ繧√ｋ */
justify-items: center;
align-items: start;
justify-content: center;
width: min(920px, 100%); /* 縺輔ｉ縺ｫ荳ｭ螟ｮ蟷・ｒ隧ｰ繧√ｋ */
margin-inline: auto;
}
.stats-grid .stat-circle { --circle: 270px; padding-top: 0.8rem; }
.stats-grid .stat-circle:nth-child(1) { grid-column: 1; grid-row: 1; }
.stats-grid .stat-circle:nth-child(2) { grid-column: 3; grid-row: 1; }
.stats-grid .stat-circle:nth-child(3) { grid-column: 5; grid-row: 1; }
.stats-grid .stat-circle:nth-child(4) { grid-column: 2; grid-row: 2; }
.stats-grid .stat-circle:nth-child(5) { grid-column: 4; grid-row: 2; }
/* 荳ｸ蜀・ユ繧ｭ繧ｹ繝医ｒ蟆代＠螟ｧ縺阪￥・・＆繧峨↓荳九∈ */
.stat-circle .stat-icon-text { font-size: 1.05rem; padding: 0.35rem 0.75rem; }
.stat-circle .stat-title { font-size: 1.2rem; margin-bottom: 0.45rem; line-height: 1.2; }
.stat-circle .stat-number { font-size: 1.8rem; margin: 0.7rem 0 0.4rem; line-height: 1.2; }
.stat-circle .stat-subtitle { font-size: 1.0rem; margin-top: 0.25rem; line-height: 1.3; }
}
/* iPad 縦画面（他セクションの崩れ対策・中央揃え） */
@media (min-width: 769px) and (max-width: 1024px) {
/* 共通コンテナをやや狭めて中央に */
.container { width: min(1000px, 100%); padding-inline: 24px; margin-inline: auto; }
/* 株式会社コモリについて（1カラムにして中央に） */
.about-grid { grid-template-columns: 1fr; gap: 1.25rem; }
.about-text { max-width: 780px; margin: 0 auto; }
.about-photo .photo-placeholder { height: auto; aspect-ratio: 4/3; max-width: 640px; margin: 0 auto; }
/* 数字で見る（グリッドで中央寄せ・円をやや小さく） */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
justify-items: center;
justify-content: center;
gap: 1rem 1rem;
max-width: 1000px;
margin-inline: auto;
}
.stat-circle { --circle: min(34vw, 240px); }
/* 募集要項（1カラムで中央・パディング可変） */
.job-cards { grid-template-columns: 1fr; gap: 1.25rem; max-width: 900px; }
.job-card { padding: clamp(1.25rem, 3vw, 2rem); }
/* インタビュー（1カラム中央） */
.interview-cards { grid-template-columns: 1fr; max-width: 900px; margin-inline: auto; gap: 1.25rem; }
.question { padding: 1.8rem; }
.answer { padding: 1.2rem 1.6rem; }
/* FAQ・亥ｹ・宛髯舌＠縺ｦ荳ｭ螟ｮ謠・∴・・*/
.faq-items { max-width: 900px; margin-inline: auto; padding-inline: 20px; }
.faq-item { width: 100%; box-sizing: border-box; }
/* 蠢懷供縺ｯ邁｡蜊假ｼ・繧ｹ繝・ャ繝暦ｼ育ｸｦ遨阪∩繝ｻ荳ｭ螟ｮ・・*/
.steps { display: flex; flex-direction: column; gap: 0.8rem; align-items: center; max-width: 720px; margin-inline: auto; }
.step-arrow { transform: rotate(90deg); }
/* 繧ｨ繝ｳ繝医Μ繝ｼ・医ヵ繧ｩ繝ｼ繝蟷・ｒ蛻ｶ髯舌＠縺ｦ荳ｭ螟ｮ・・*/
.entry-options { grid-template-columns: 1fr; max-width: 900px; margin-inline: auto; }
.application-form { max-width: 520px; margin-inline: auto; }
}
/* =========================== */
/* 表示装飾の強制無効化（矢印などの疑似要素） */
/* =========================== */
.timeline-comment .comment-content::before {
content: none !important;
display: none !important;
}
.mini-info .info-item::before {
content: none !important;
display: none !important;
}
/* ・ｽ・ｽﾊ真・ｽﾊ置・ｽﾌ確・ｽ・ｽ・ｽﾈ適・ｽp */
/* =========================== */
.timeline-comment .comment-content .face-photo {
right: 60px !important;
}
@media (max-width: 320px) {
.timeline-comment .comment-content .face-photo {
right: 45px !important;
}
}
/* ・ｽE・ｽ・ｽ・ｽ・ｽ・ｽO・ｽp・ｽ`・ｽi・ｽ・ｽ・ｽ・ｽ・ｽo・ｽ・ｽ・ｽﾌ尻・ｽ・ｽ・ｽj・ｽﾌ確・ｽ・ｽ・ｽﾈ削除 */
.timeline-comment .comment-content::after {
content: none !important;
display: none !important;
border: none !important;
width: 0 !important;
height: 0 !important;
}
/* ・ｽ・ｽﾊ真・ｽA・ｽC・ｽR・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽﾉ右・ｽﾉ移難ｿｽ */
.timeline-comment .comment-content .face-photo {
right: 80px !important;
}
@media (max-width: 320px) {
.timeline-comment .comment-content .face-photo {
right: 60px !important;
}
}
/* ・ｽ・ｽﾊ真・ｽ・ｽ・ｽE・ｽ[・ｽﾟゑｿｽ・ｽﾉ配・ｽu・ｽi・ｽﾊア・ｽv・ｽ・ｽ・ｽ[・ｽ`・ｽj */
.timeline-comment .comment-content .face-photo {
right: 10px !important;
left: auto !important;
}
@media (max-width: 320px) {
.timeline-comment .comment-content .face-photo {
right: 8px !important;
left: auto !important;
}
}
/* ・ｽm・ｽ・ｽ・ｽﾉ右・ｽ[・ｽﾉ配・ｽu・ｽ・ｽ・ｽ驍ｽ・ｽﾟの追会ｿｽ・ｽX・ｽ^・ｽC・ｽ・ｽ */
.timeline-comment .comment-content {
position: relative !important;
}
.timeline-comment .comment-content .face-photo {
position: absolute !important;
right: 10px !important;
bottom: -40px !important;
margin-left: 0 !important;
margin-right: 0 !important;
transform: none !important;
}
/* ・ｽ・ｽﾊ真・ｽ・ｽ・ｽm・ｽ・ｽ・ｽﾉ右・ｽ[・ｽﾉ配・ｽu - ・ｽﾅ終・ｽ・ｽ・ｽ・ｽ */
.timeline-comment .comment-content .face-photo {
right: 5px !important;
left: unset !important;
margin: 0 !important;
transform: translateX(0) !important;
}
@media (max-width: 320px) {
.timeline-comment .comment-content .face-photo {
right: 5px !important;
left: unset !important;
}
}
/* ・ｽ・ｽﾊ真・ｽﾌ確・ｽ・ｽ・ｽﾈ右・ｽ[・ｽz・ｽu・ｽﾌゑｿｽ・ｽﾟのコ・ｽ・ｽ・ｽe・ｽi・ｽ・ｽ・ｽ・ｽ */
.timeline-comment .comment-content {
overflow: visible !important;
position: relative !important;
}
/* ・ｽ・ｽﾊ真・ｽA・ｽC・ｽR・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ蛯ｫ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ */
.timeline-comment .comment-content .face-photo {
width: 75px !important;
height: 75px !important;
}
@media (max-width: 320px) {
.timeline-comment .comment-content .face-photo {
width: 55px !important;
height: 55px !important;
}
}
/* ・ｽ・ｽﾊ真・ｽA・ｽC・ｽR・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽﾉ大き・ｽ・ｽ・ｽ・ｽ・ｽ・ｽi・ｽ・ｽ・ｽ・ｽﾈ擾ｿｽj */
.timeline-comment .comment-content .face-photo {
width: 80px !important;
height: 80px !important;
border-radius: 50% !important;
background-size: cover !important;
background-position: center !important;
}
@media (max-width: 320px) {
.timeline-comment .comment-content .face-photo {
width: 60px !important;
height: 60px !important;
}
}
/* 鬘費ｿｽE逵溘い繧､繧ｳ繝ｳ繧剃ｸ蝗槭ｊ螟ｧ縺阪￥縺吶ｋ - 譛邨ら沿 */
.timeline-comment .comment-content .face-photo {
width: 80px !important;
height: 80px !important;
border-radius: 50% !important;
background-size: cover !important;
background-position: center !important;
}
@media (max-width: 320px) {
.timeline-comment .comment-content .face-photo {
width: 60px !important;
height: 60px !important;
}
}
/* ・ｽ・ｽﾊ真・ｽ・ｽ・ｽm・ｽ・ｽ・ｽﾉ右・ｽ[・ｽﾉ配・ｽu・ｽ・ｽ・ｽ驍ｽ・ｽﾟの追会ｿｽ・ｽX・ｽ^・ｽC・ｽ・ｽ */
.timeline-comment .comment-content {
position: relative !important;
}
.timeline-comment .comment-content .face-photo {
position: absolute !important;
right: 10px !important;
bottom: -40px !important;
margin-left: 0 !important;
margin-right: 0 !important;
transform: none !important;
}
/* ・ｽ・ｽﾊ真・ｽ・ｽ・ｽm・ｽ・ｽ・ｽﾉ右・ｽ[・ｽﾉ配・ｽu - ・ｽﾅ終・ｽ・ｽ・ｽ・ｽ */
.timeline-comment .comment-content .face-photo {
right: 5px !important;
left: unset !important;
margin: 0 !important;
transform: translateX(0) !important;
}
@media (max-width: 320px) {
.timeline-comment .comment-content .face-photo {
right: 5px !important;
left: unset !important;
}
}
/* ・ｽ・ｽﾊ真・ｽﾌ確・ｽ・ｽ・ｽﾈ右・ｽ[・ｽz・ｽu・ｽﾌゑｿｽ・ｽﾟのコ・ｽ・ｽ・ｽe・ｽi・ｽ・ｽ・ｽ・ｽ */
.timeline-comment .comment-content {
overflow: visible !important;
position: relative !important;
}
/* ・ｽ・ｽﾊ真・ｽA・ｽC・ｽR・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽE・ｽﾉ移難ｿｽ */
.timeline-comment .comment-content .face-photo {
right: -10px !important;
left: auto !important;
}
@media (max-width: 320px) {
.timeline-comment .comment-content .face-photo {
right: -5px !important;
left: auto !important;
}
}
/* ・ｽX・ｽ}・ｽz・ｽ・ｽﾊでコ・ｽ・ｽ・ｽ・ｽ・ｽg・ｽ嘯ﾌ包ｿｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ */
@media (max-width: 768px) {
.timeline-comment .comment-content {
font-size: 0.85rem !important;
line-height: 1.6 !important;
margin-bottom: 75px !important; /* 顔写真のスペースを確保 */
}
}
@media (max-width: 480px) {
.timeline-comment .comment-content {
font-size: 0.8rem !important;
line-height: 1.5 !important;
margin-bottom: 70px !important; /* 顔写真のスペースを確保 */
}
}
@media (max-width: 320px) {
.timeline-comment .comment-content {
font-size: 0.75rem !important;
line-height: 1.5 !important;
margin-bottom: 65px !important; /* 顔写真のスペースを確保 */
}
}
/* ・ｽX・ｽ}・ｽz・ｽ・ｽﾊでのア・ｽC・ｽR・ｽ・ｽ・ｽT・ｽC・ｽY・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ */
@media (max-width: 768px) {
.timeline-comment .comment-content .face-photo {
width: 50px !important;
height: 50px !important;
}
}
@media (max-width: 480px) {
.timeline-comment .comment-content .face-photo {
width: 45px !important;
height: 45px !important;
}
}
@media (max-width: 320px) {
.timeline-comment .comment-content .face-photo {
width: 40px !important;
height: 40px !important;
bottom: -30px !important;
}
}
/* ・ｽX・ｽ}・ｽz・ｽﾅのア・ｽC・ｽR・ｽ・ｽ・ｽﾊ置・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ */
@media (max-width: 768px) {
.timeline-comment .comment-content .face-photo {
bottom: -35px !important;
}
}
@media (max-width: 480px) {
.timeline-comment .comment-content .face-photo {
bottom: -32px !important;
}
}
@media (max-width: 320px) {
.timeline-comment .comment-content .face-photo {
bottom: -28px !important;
right: -3px !important;
}
}
/* ・ｽX・ｽ}・ｽz・ｽA・ｽC・ｽR・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽﾉ擾ｿｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ - ・ｽ・ｽ・ｽ・ｽ・ｽK・ｽp */
@media (max-width: 768px) {
.timeline-comment .comment-content .face-photo {
width: 85px !important;
height: 85px !important;
bottom: -65px !important;
right: 10px !important;
}
}
@media (max-width: 480px) {
.timeline-comment .comment-content .face-photo {
width: 80px !important;
height: 80px !important;
bottom: -60px !important;
right: 8px !important;
}
}
@media (max-width: 320px) {
.timeline-comment .comment-content .face-photo {
width: 75px !important;
height: 75px !important;
bottom: -55px !important;
right: 5px !important;
}
}
/* ・ｽf・ｽX・ｽN・ｽg・ｽb・ｽv・ｽ・ｽ768px・ｽﾈ会ｿｽ・ｽﾌア・ｽC・ｽR・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ蛯ｫ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ */
/* 1024px以下で顔写真を下に配置し、コメント領域に余白確保 */
@media (max-width: 1024px) {
.timeline-comment .comment-content .face-photo {
bottom: -45px !important;
}
.timeline-comment .comment-content {
margin-bottom: 55px !important;
}
}
/* ・ｽf・ｽX・ｽN・ｽg・ｽb・ｽv (769px・ｽﾈ擾ｿｽ) */
@media (min-width: 769px) {
.timeline-comment .comment-content .face-photo {
width: 80px !important;
height: 80px !important;
bottom: -45px !important;
}
}
/* ・ｽ・ｽ・ｽo・ｽC・ｽ・ｽ (768px・ｽﾈ会ｿｽ) - ・ｽﾅ終・ｽﾝ抵ｿｽ */
@media (max-width: 768px) {
.timeline-comment .comment-content .face-photo {
width: 32px !important;
height: 32px !important;
bottom: -25px !important;
}
}
/* ・ｽX・ｽ}・ｽz・ｽA・ｽC・ｽR・ｽ・ｽ・ｽT・ｽC・ｽY・ｽ・ｽK・ｽﾘに抵ｿｽ・ｽ・ｽ */
@media (max-width: 768px) {
.timeline-comment .comment-content .face-photo {
width: 50px !important;
height: 50px !important;
bottom: -30px !important;
}
}
@media (max-width: 480px) {
.timeline-comment .comment-content .face-photo {
width: 45px !important;
height: 45px !important;
bottom: -28px !important;
}
}
@media (max-width: 320px) {
.timeline-comment .comment-content .face-photo {
width: 42px !important;
height: 42px !important;
bottom: -26px !important;
}
}
/* ・ｽf・ｽX・ｽN・ｽg・ｽb・ｽv・ｽ・ｽ768px・ｽﾈ会ｿｽ・ｽ・ｽ蛯ｫ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ */
/* ・ｽf・ｽX・ｽN・ｽg・ｽb・ｽv (769px・ｽﾈ擾ｿｽ) */
@media (min-width: 769px) {
.timeline-comment .comment-content .face-photo {
width: 90px !important;
height: 90px !important;
bottom: -45px !important;
}
}
/* 768px・ｽﾈ会ｿｽ・ｽi・ｽ^・ｽu・ｽ・ｽ・ｽb・ｽg・ｽX・ｽ}・ｽz・ｽ・ｽﾊ） */
@media (max-width: 768px) and (min-width: 481px) {
.timeline-comment .comment-content .face-photo {
width: 60px !important;
height: 60px !important;
bottom: -35px !important;
}
}
/* ・ｽﾅ新・ｽﾌ設抵ｿｽﾅ上書・ｽ・ｽ - ・ｽf・ｽX・ｽN・ｽg・ｽb・ｽv・ｽ・ｽ768px・ｽﾈ会ｿｽ・ｽ・ｽ蛯ｫ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ */
@media (max-width: 768px) {
.timeline-comment .comment-content .face-photo {
width: 60px !important;
height: 60px !important;
bottom: -35px !important;
}
}
/* 480px・ｽﾈ会ｿｽ・ｽﾌア・ｽC・ｽR・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ闖ｬ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ */
@media (max-width: 480px) {
.timeline-comment .comment-content .face-photo {
width: 38px !important;
height: 38px !important;
bottom: -24px !important;
}
}
@media (max-width: 320px) {
.timeline-comment .comment-content .face-photo {
width: 35px !important;
height: 35px !important;
bottom: -22px !important;
}
}
/* 480px莉･荳具ｿｽE繧｢繧､繧ｳ繝ｳ繧剃ｸ蝗槭ｊ蟆上＆縺上☆繧・- 譛邨ら沿 */
@media (max-width: 480px) {
.timeline-comment .comment-content .face-photo {
width: 38px !important;
height: 38px !important;
bottom: -24px !important;
}
}
@media (max-width: 320px) {
.timeline-comment .comment-content .face-photo {
width: 35px !important;
height: 35px !important;
bottom: -22px !important;
}
}
/* ・ｽX・ｽ・ｽ}・ｽz・ｽ・ｽﾊでゑｿｽ90px・ｽ・ｽ・ｽ・ｽ・ｽm・ｽ・ｽ・ｽﾉ修・ｽ・ｽ */
/* ・ｽ・ｽ・ｽ・ｽﾌ的・ｽﾈ優・ｽ・ｽx・ｽﾅス・ｽ}・ｽz・ｽT・ｽC・ｽY・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ・ｽK・ｽp */
@media screen and (max-width: 768px) {
.timeline-comment .comment-content .face-photo {
width: 80px !important;
height: 80px !important;
bottom: -28px !important;
}
}
@media screen and (max-width: 480px) {
.timeline-comment .comment-content .face-photo {
width: 65px !important;
height: 65px !important;
bottom: -24px !important;
}
}
@media screen and (max-width: 320px) {
.timeline-comment .comment-content .face-photo {
width: 60px !important;
height: 60px !important;
bottom: -20px !important;
}
}
/* ・ｽf・ｽX・ｽN・ｽg・ｽb・ｽv・ｽﾌみゑｿｽ90px・ｽ・ｽK・ｽp・ｽi・ｽX・ｽ}・ｽz・ｽ・ｽ・ｽO・ｽj */
@media screen and (min-width: 769px) {
.timeline-comment .comment-content .face-photo {
width: 90px !important;
height: 90px !important;
bottom: -45px !important;
}
}
/* ・ｽC・ｽ・ｽ・ｽ^・ｽr・ｽ・ｽ・ｽ[・ｽ・ｽFAQ・ｽﾌ背・ｽi・ｽ・ｽ・ｽX・ｽN・ｽ・ｽ・ｽ[・ｽ・ｽ・ｽﾆ一緒・ｽﾉ難ｿｽ・ｽ・ｽ・ｽ・ｽ - ・ｽm・ｽ・ｽ・ｽﾈ設抵ｿｽ */
.interview-section,
.faq-section {
background-attachment: scroll !important;
}
/* 480px・ｽﾈ会ｿｽ・ｽ・ｽFAQ・ｽA・ｽC・ｽe・ｽ・ｽ・ｽY・ｽﾌ上部・ｽ]・ｽ・ｽ・ｽ・ｽ・ｽm・ｽ・ｽ・ｽﾉ追会ｿｽ */
@media (max-width: 480px) {
.faq-items {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
}
/* ・ｽX・ｽL・ｽ・ｽ・ｽK・ｽ・ｽ・ｽO・ｽ・ｽ・ｽt・ｽﾌ表・ｽ・ｽ・ｽ・ｽ・ｽm・ｽ・ｽ・ｽﾉゑｿｽ・ｽ・ｽ */
.skill-graph {
display: block !important;
visibility: visible !important;
background: #F0F8FF !important;
border-radius: 10px !important;
padding: 1.5rem !important;
margin-top: 1rem !important;
border: 1px solid rgba(74, 144, 226, 0.1) !important;
}
.graph-title {
display: block !important;
font-weight: 600 !important;
margin-bottom: 1rem !important;
color: #2E86C1 !important;
}
.graph-placeholder {
display: block !important;
background: rgba(74, 144, 226, 0.1) !important;
padding: 2rem !important;
border-radius: 8px !important;
text-align: center !important;
color: #4A90E2 !important;
min-height: 60px !important;
}
/* ・ｽ・ｽ・ｽ・ｽ・ｽO・ｽ・ｽ・ｽt・ｽﾌス・ｽ^・ｽC・ｽ・ｽ */
.graph-container {
background: white;
border-radius: 8px;
padding: 1.5rem;
margin-top: 1rem;
}
.graph-bars {
display: flex;
justify-content: space-around;
align-items: flex-end;
height: 200px;
border-bottom: 2px solid #ddd;
margin-bottom: 1rem;
}
.bar-group {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
.bar {
width: 40px;
background: linear-gradient(to top, #4A90E2, #2E86C1);
border-radius: 4px 4px 0 0;
margin-bottom: 0.5rem;
min-height: 10px;
transition: all 0.3s ease;
}
.bar:hover {
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(74, 144, 226, 0.3);
}
.bar-label {
font-size: 0.8rem;
color: #666;
text-align: center;
font-weight: 500;
}
.graph-legend {
text-align: center;
color: #4A90E2;
font-weight: 600;
font-size: 0.9rem;
}
@media (max-width: 480px) {
.graph-bars {
height: 150px;
}
.bar {
width: 30px;
}
.bar-label {
font-size: 0.7rem;
}
}
/* ・ｽ^・ｽC・ｽ・ｽ・ｽ・ｽ・ｽC・ｽ・ｽ・ｽ`・ｽ・ｽ・ｽﾌス・ｽL・ｽ・ｽ・ｽK・ｽ・ｽ・ｽO・ｽ・ｽ・ｽt */
/* 繧ｷ繝ｳ繝励Ν縺ｪ邵ｦ邱壹→笳上・繝ｼ繧ｫ繝ｼ縺ｮ繧ｹ繧ｭ繝ｫ鄙貞ｾ励げ繝ｩ繝・*/
.skill-timeline {
background: white;
border-radius: 12px;
padding: 1.5rem;
margin-top: 1rem;
box-shadow: 0 4px 20px rgba(74, 144, 226, 0.1);
border: 1px solid rgba(74, 144, 226, 0.1);
position: relative;
}
.skill-timeline::before {
content: '';
position: absolute;
left: 1.5rem;
top: 1.5rem;
bottom: 1.5rem;
width: 2px;
background: #4A90E2;
z-index: 1;
}
.skill-item {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
position: relative;
min-height: 3rem;
padding-left: 3rem;
}
.skill-item:last-child {
margin-bottom: 0;
}
.skill-marker {
width: 1.2rem;
height: 1.2rem;
background: #4A90E2;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: bold;
position: absolute;
left: 1.5rem;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
box-sizing: border-box;
margin-left: -1.35rem;
}
.skill-content {
flex: 1;
}
.skill-period {
font-weight: 700;
color: #2E86C1;
font-size: 1.1rem;
margin-bottom: 0.3rem;
}
.skill-description {
color: #555;
font-size: 0.9rem;
line-height: 1.4;
}
/* 繝ｬ繧ｹ繝昴Φ繧ｷ繝門ｯｾ蠢・*/
@media (max-width: 768px) {
.skill-timeline {
padding: 1rem;
}
.skill-item {
padding-left: 2.5rem;
margin-bottom: 1rem;
}
.skill-timeline::before {
left: 1.2rem;
}
.skill-marker {
left: 1.2rem;
width: 1rem;
height: 1rem;
font-size: 0.7rem;
}
.skill-period {
font-size: 1rem;
}
.skill-description {
font-size: 0.85rem;
}
}
.skill-timeline-period {
font-weight: 600;
color: #2E86C1;
font-size: 1rem;
margin-bottom: 0.3rem;
}
.skill-timeline-description {
color: #666;
font-size: 0.9rem;
line-height: 1.4;
}
.timeline-period {
font-weight: 600;
color: #2E86C1;
font-size: 1rem;
margin-bottom: 0.3rem;
}
.timeline-description {
color: #666;
font-size: 0.9rem;
line-height: 1.4;
}
@media (max-width: 480px) {
.timeline-graph {
padding: 1rem;
}
.timeline-graph::before {
left: 2.25rem;
}
.timeline-item {
min-height: 2.5rem;
padding-left: 0;
}
.timeline-marker {
width: 1.2rem;
height: 1.2rem;
font-size: 0.7rem;
left: 2.25rem;
transform: translate(-50%, -50%);
}
.timeline-content {
min-height: 2.5rem;
text-align: left;
}
.timeline-period {
font-size: 0.9rem;
}
.timeline-description {
font-size: 0.8rem;
}
/* 繧ｹ繧ｭ繝ｫ鄙貞ｾ励げ繝ｩ繝募ｰら畑縺ｮ繝｢繝舌う繝ｫ繧ｹ繧ｿ繧､繝ｫ */
.skill-timeline-item {
min-height: 2.5rem;
padding-left: 3rem;
}
.skill-timeline-marker {
width: 1.2rem;
height: 1.2rem;
font-size: 0.7rem;
left: 0.5rem !important;
transform: translate(-50%, -50%);
}
.skill-timeline-content {
min-height: 2.5rem;
text-align: left;
}
.skill-timeline-period {
font-size: 0.9rem;
}
.skill-timeline-description {
font-size: 0.8rem;
}
/* 320px莉･荳九〒縺ｮ譛ｬ髻ｳ繧､繝ｳ繧ｿ繝薙Η繝ｼ繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ縺ｮ譁・ｭ励し繧､繧ｺ隱ｿ謨ｴ */
.interview-section .section-title {
font-size: 1.5rem !important;
}
.interview-card .question .emoji {
font-size: 0.8rem !important;
}
.interview-card .question h3 {
font-size: 1rem !important;
}
}
/* ・ｽX・ｽL・ｽ・ｽ・ｽK・ｽ・ｽ・ｽO・ｽ・ｽ・ｽt・ｽﾌ具ｿｽ・ｽ・ｽ・ｽﾊ置・ｽ・ｽ・ｽ・ｽ */
.skill-timeline-marker {
left: 0.75rem !important;
position: absolute !important;
}
.timeline-graph::before {
left: 0.75rem !important;
}
@media (max-width: 480px) {
.skill-timeline-marker {
left: 0.5rem !important;
}
.timeline-graph::before {
left: 0.5rem !important;
}
}
/* 320px以下の極小画面向け（インタビュー見出し等の最終微調整） */
@media (max-width: 320px) {
.interview-section .section-title {
font-size: 1.3rem !important;
line-height: 1.3 !important;
}
.interview-card .question .emoji {
font-size: 0.9rem !important;
padding: 0.3rem 0.5rem !important;
}
.interview-card .question h3 {
font-size: 0.9rem !important;
line-height: 1.4 !important;
}
.interview-card .question {
padding-left: 0.5rem !important;
}
.interview-card .toggle-btn {
font-size: 0.8rem !important;
}
.interview-card .answer {
font-size: 0.85rem !important;
}
.interview-card .answer-header {
font-size: 0.9rem !important;
}
.interview-card .answer p {
font-size: 0.8rem !important;
line-height: 1.5 !important;
}
.interview-card {
border-radius: 14px !important;
overflow: hidden !important;
}
.interview-card .question,
.interview-card .answer {
border-radius: 14px !important;
overflow: hidden !important;
}
}
/* interview-card scroll-animate・ｽﾌ余・ｽ・ｽ・ｽｳゑｿｽ・ｽ・ｽ */
.interview-card.scroll-animate {
margin: 0 !important;
padding: 0 !important;
}
.interview-card.scroll-animate .question {
margin: 0 !important;
padding: 1.6rem !important;
}
.interview-card.scroll-animate .answer {
margin: 0 !important;
padding: 1rem !important;
}
/* ・ｽX・ｽL・ｽ・ｽ・ｽ}・ｽ[・ｽJ・ｽ[・ｽﾌ具ｿｽ・ｽ・ｽ・ｽﾊ置・ｽ・ｽ・ｽ・ｽ */
.skill-marker {
left: 1.5rem !important;
position: absolute !important;
transform: translate(-50%, -50%) !important;
}
@media (max-width: 768px) {
.skill-marker {
left: 1.2rem !important;
}
}
/* ・ｽX・ｽL・ｽ・ｽ・ｽ}・ｽ[・ｽJ・ｽ[・ｽﾌ位置・ｽ・ｽ・ｽ・ｽﾌ擾ｿｽﾉ撰ｿｽ・ｽm・ｽﾉ配・ｽu */
.skill-timeline::before {
left: 1.5rem !important;
z-index: 1 !important;
}
.skill-marker {
left: 1.5rem !important;
position: absolute !important;
transform: translate(-50%, -50%) !important;
margin-left: -1.35rem !important;
}
@media (max-width: 768px) {
.skill-timeline::before {
left: 1.2rem !important;
}
.skill-marker {
left: 1.2rem !important;
margin-left: -0.9rem !important;
}
}
/* ・ｽc・ｽ・ｽ・ｽﾌ抵ｿｽ・ｽ・ｽ・ｽｲ撰ｿｽ */
.skill-timeline::before {
top: 1.5rem !important;
bottom: 1.5rem !important;
}
/* ・ｽC・ｽ・ｽ・ｽ^・ｽr・ｽ・ｽ・ｽ[・ｽ・ｽFAQ・ｽZ・ｽN・ｽV・ｽ・ｽ・ｽ・ｽ・ｽﾌ背・ｽi・ｽg・ｽ・ｽ・ｽh・ｽ~ */
.interview-section,
.faq-section {
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-attachment: scroll !important;
}
/* ・ｽ囀W・ｽJ・ｽ・ｽ・ｽﾌ背・ｽi・ｽg・ｽ・ｽ・ｽ・ｽ・ｽ・ｽS・ｽﾉ防・ｽ~ */
.interview-card .answer,
.faq-item .faq-answer {
background: transparent !important;
background-image: none !important;
}
/* ・ｽZ・ｽN・ｽV・ｽ・ｽ・ｽ・ｽ・ｽS・ｽﾌの背・ｽi・ｽ・ｽ・ｽﾅ抵ｿｽ */
.interview-section,
.faq-section {
position: relative;
overflow: hidden;
}
.interview-section::before { display: none !important; }
/* ・ｽw・ｽi・ｽg・ｽ・ｽ・ｽ・ｽ・ｽ・ｽS・ｽﾉ防・ｽ~・ｽ・ｽ・ｽ驪ｭ・ｽ・ｽ・ｽI・ｽ[・ｽo・ｽ[・ｽ・ｽ・ｽC・ｽh */
/* 蜿､縺・ｨｭ螳壹ｒ蜑企勁 - 譁ｰ縺励＞險ｭ螳壹↓鄂ｮ縺肴鋤縺・*/
/* ・ｽC・ｽ・ｽ・ｽ^・ｽr・ｽ・ｽ・ｽ[・ｽ・ｽFAQ・ｽZ・ｽN・ｽV・ｽ・ｽ・ｽ・ｽ・ｽﾌ背・ｽi・ｽg・ｽ・ｽ・ｽ・ｽ・ｽ・ｽS・ｽﾉ防・ｽ~ */
.interview-section,
.faq-section {
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-attachment: scroll !important;
position: relative !important;
overflow: hidden !important;
}
/* ・ｽ囀W・ｽJ・ｽ・ｽ・ｽﾌ背・ｽi・ｽg・ｽ・ｽ・ｽ・ｽ・ｽ・ｽS・ｽﾉ防・ｽ~ */
.interview-card .answer,
.faq-item .faq-answer {
background: transparent !important;
background-image: none !important;
background-size: initial !important;
background-position: initial !important;
background-repeat: initial !important;
background-attachment: initial !important;
}
/* ・ｽZ・ｽN・ｽV・ｽ・ｽ・ｽ・ｽ・ｽS・ｽﾌの背・ｽi・ｽ・ｽ・ｽﾅ抵ｿｽ */
.interview-section::before,
.faq-section::before {
content: '';
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: linear-gradient(rgba(255,255,255,0.82), rgba(255,255,255,0.82)), url('images/wagara_wave1.png') center/cover no-repeat !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-attachment: scroll !important; /* ・ｽX・ｽN・ｽ・ｽ・ｽ[・ｽ・ｽ・ｽﾆ一緒・ｽﾉ難ｿｽ・ｽ・ｽ */
z-index: -1 !important;
pointer-events: none !important;
transform: none !important;
transition: none !important;
}
/* 回答展開時の背景拡大を完全に防止する最終的な設定 */
.interview-section,
.faq-section {
background: none !important;
background-image: none !important;
background-size: initial !important;
background-position: initial !important;
background-repeat: initial !important;
background-attachment: initial !important;
position: relative !important;
overflow: hidden !important;
}
/* 回答部分の背景を完全に制御 */
.interview-card .answer,
.faq-item .faq-answer {
background: transparent !important;
background-image: none !important;
background-size: initial !important;
background-position: initial !important;
background-repeat: initial !important;
background-attachment: initial !important;
position: relative !important;
z-index: 1 !important;
}
/* セクション全体の背景を完全に固定 - FAQのみ水色背景の疑似要素 */
.faq-section::before {
content: '';
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
background: #e6f2ff !important; /* FAQ背景は水色単色 */
z-index: -1 !important;
pointer-events: none !important;
transform: none !important;
transition: none !important;
will-change: auto !important;
}
/* インタビューセクションの疑似要素は無効化（直接背景で対応） */
.interview-section::before {
display: none !important;
content: none !important;
}
/* 回答展開時の背景拡大を完全に防止 */
.interview-card,
.faq-item {
background: rgba(255, 255, 255, 0.95) !important;
position: relative !important;
z-index: 2 !important;
}
/* 回答展開時の背景拡大を完全に防止 - 強制オーバーライド */
.interview-card .answer.active,
.faq-item .faq-answer.active {
background: rgba(255, 255, 255, 0.98) !important;
background-image: none !important;
background-size: initial !important;
background-position: initial !important;
background-repeat: initial !important;
background-attachment: initial !important;
position: relative !important;
z-index: 3 !important;
}
/* 768pxの時に画像の縦横比率を維持する設定 */
@media (max-width: 768px) {
/* 会社紹介セクションの画像 */
.about-photo .photo-placeholder {
height: auto !important;
aspect-ratio: 4/3 ;
max-width: 100% !important;
width: 100% !important;
}
/* さんのご紹介セクションの画像 */
.intro-photo .main-photo {
height: auto !important;
aspect-ratio: 4/3 !important;
max-width: 100% !important;
width: 100% !important;
}
/* さんの一日セクションの画像 */
.timeline-photo .photo-placeholder {
height: auto !important;
aspect-ratio: 4/3 ;
max-width: 100% !important;
width: 100% !important;
}
/* その他の写真枠も統一 */
.photo-placeholder {
height: auto !important;
aspect-ratio: 4/3 !important;
max-width: 100% !important;
width: 100% !important;
}
/* メイン写真も統一 */
.main-photo {
height: auto !important;
aspect-ratio: 4/3 !important;
max-width: 100% !important;
width: 100% !important;
}
}
/* 768pxの時に画像サイズを少し小さくする調整 */
@media (max-width: 768px) {
/* 会社紹介セクションの画像 */
.about-photo .photo-placeholder {
height: auto !important;
aspect-ratio: 4/3 !important;
max-width: 90% !important;
width: 90% !important;
margin: 0 auto !important;
}
/* 768pxの時に応募は簡単！3ステップのカードが右に切れないようにする設定 */
@media (max-width: 768px) {
/* ステップセクションの調整 */
.steps-section {
padding: 2rem 1rem !important;
overflow: hidden !important;
}
/* ステップ全体のレイアウト調整 */
.steps {
display: flex !important;
flex-direction: column !important;
gap: 1rem !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 0.5rem !important;
box-sizing: border-box !important;
}
/* 個別ステップの調整 */
.step {
width: 100% !important;
max-width: 100% !important;
padding: 1.2rem !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
/* ステップ矢印の調整 */
.step-arrow {
transform: rotate(90deg) !important;
font-size: 1.5rem !important;
margin: 0.5rem 0 !important;
align-self: center !important;
}
/* ステップアイコンの調整 */
.step-icon {
width: 5rem !important;
height: 4rem !important;
margin: 0 auto 0.5rem !important;
}
.step-icon img {
width: 200% !important;
height: 200% !important;
}
/* ステップ番号の調整 */
.step-number {
width: 3rem !important;
height: 3rem !important;
font-size: 1.5rem !important;
padding: 0.6rem !important;
}
/* ステップ見出しの調整 */
.step h3 {
font-size: 1.1rem !important;
margin-bottom: 0.8rem !important;
}
/* ステップ説明文の調整 */
.step p {
font-size: 0.9rem !important;
line-height: 1.4 !important;
}
}
/* 768pxの時に株式会社コモリについて、さんのご紹介、さんの一日セクションの画像を全て少し小さくする設定 */
@media (max-width: 768px) {
/* 株式会社コモリについてセクションの画像 */
.about-photo .photo-placeholder {
height: auto !important;
aspect-ratio: 4/3 !important;
max-width: 75% !important;
width: 75% !important;
margin: 0 auto !important;
}
/* さんのご紹介セクションの画像 */
.intro-photo .main-photo {
height: auto !important;
aspect-ratio: 4/3 !important;
max-width: 70% !important;
width: 70% !important;
margin: 0 auto !important;
}
/* さんの一日セクションの画像 */
.timeline-photo .photo-placeholder {
height: auto !important;
max-width: 75% !important;
width: 75% !important;
margin: 0 auto !important;
}
/* その他の写真枠も少し小さく */
.photo-placeholder {
aspect-ratio: 4/3 !important;
max-width: 75% !important;
width: 75% !important;
margin: 0 auto !important;
}
/* メイン写真も少し小さく */
.main-photo {
height: auto !important;
aspect-ratio: 4/3 !important;
max-width: 70% !important;
width: 70% !important;
margin: 0 auto !important;
}
}
/* 768pxの時に画像をもう少し小さくする調整 */
@media (max-width: 768px) {
/* 株式会社コモリについてセクションの画像 */
.about-photo .photo-placeholder {
height: auto !important;
aspect-ratio: 4/3 !important;
max-width: 65% !important;
width: 65% !important;
margin: 0 auto !important;
}
/* さんのご紹介セクションの画像 */
.intro-photo .main-photo {
height: auto !important;
aspect-ratio: 4/3 !important;
max-width: 60% !important;
width: 60% !important;
margin: 0 auto !important;
}
/* さんの一日セクションの画像 */
.timeline-photo .photo-placeholder {
height: auto !important;
max-width: 65% !important;
width: 65% !important;
margin: 0 auto !important;
}
/* その他の写真枠ももう少し小さく */
.photo-placeholder {
aspect-ratio: 4/3 !important;
max-width: 65% !important;
width: 65% !important;
margin: 0 auto !important;
}
/* メイン写真ももう少し小さく */
.main-photo {
height: auto !important;
aspect-ratio: 4/3 !important;
max-width: 60% !important;
width: 60% !important;
margin: 0 auto !important;
}
}
/* 768pxの時に数字で見る！コモリの働きやすさセクションの丸の中の色付きの文字を少し大きくし、位置を下にする設定 */
@media (max-width: 768px) {
/* 丸の中の色付きの文字（アイコンテキスト）を少し大きく */
.stats-grid .stat-circle .stat-icon-text {
font-size: 1.1rem !important;
padding: 0.4rem 0.8rem !important;
line-height: 1.2 !important;
}
/* 丸の中の色付きの文字の位置を下に */
.stats-grid .stat-circle .stat-icon-text {
margin-top: 0.3rem !important;
transform: translateY(0.2rem) !important;
}
/* 丸の中のタイトルも少し大きく */
.stats-grid .stat-circle .stat-title {
font-size: 1.3rem !important;
margin-bottom: 0.6rem !important;
line-height: 1.2 !important;
}
/* 丸の中の数字も少し大きく */
.stats-grid .stat-circle .stat-number {
font-size: 2.2rem !important;
margin: 0.8rem 0 0.5rem 0 !important;
line-height: 1.1 !important;
}
/* 丸の中のサブタイトルも少し大きく */
.stats-grid .stat-circle .stat-subtitle {
font-size: 1.1rem !important;
margin-top: 0.3rem !important;
line-height: 1.3 !important;
}
/* 丸全体のパディングを調整して文字の位置を下に */
.stats-grid .stat-circle {
padding-top: 1rem !important;
padding-bottom: 1.2rem !important;
}
}
/* 768pxの時に数字で見る！コモリの働きやすさセクションの丸の中の文字を適切なサイズと位置に調整 */
@media (max-width: 768px) {
/* 丸の中の色付きの文字（アイコンテキスト）を適切なサイズに */
.stats-grid .stat-circle .stat-icon-text {
font-size: 1rem !important;
padding: 0.3rem 0.7rem !important;
line-height: 1.2 !important;
}
/* 丸の中の色付きの文字の位置を適切に */
.stats-grid .stat-circle .stat-icon-text {
margin-top: 0.1rem !important;
transform: translateY(0.1rem) !important;
}
/* 丸の中のタイトルを適切なサイズに */
.stats-grid .stat-circle .stat-title {
font-size: 1.2rem !important;
margin-bottom: 0.5rem !important;
line-height: 1.2 !important;
}
/* 丸の中の数字を適切なサイズに */
.stats-grid .stat-circle .stat-number {
font-size: 2rem !important;
margin: 0.6rem 0 0.4rem 0 !important;
line-height: 1.1 !important;
}
/* 丸の中のサブタイトルを適切なサイズに */
.stats-grid .stat-circle .stat-subtitle {
font-size: 1rem !important;
margin-top: 0.2rem !important;
line-height: 1.3 !important;
}
/* 丸全体のパディングを適切に調整 */
.stats-grid .stat-circle {
padding-top: 0.8rem !important;
padding-bottom: 1rem !important;
}
}
/* 768pxの時に数字で見る！コモリの働きやすさセクションの丸の中の文字を控えめに調整 */
@media (max-width: 768px) {
/* 丸の中の色付きの文字（アイコンテキスト）を控えめに */
.stats-grid .stat-circle .stat-icon-text {
font-size: 0.95rem !important;
padding: 0.25rem 0.6rem !important;
line-height: 1.2 !important;
}
/* 丸の中の色付きの文字の位置を控えめに */
.stats-grid .stat-circle .stat-icon-text {
margin-top: 0 !important;
transform: none !important;
}
/* 丸の中のタイトルを控えめに */
.stats-grid .stat-circle .stat-title {
font-size: 1.1rem !important;
margin-bottom: 0.4rem !important;
line-height: 1.2 !important;
}
/* 丸の中の数字を控えめに */
.stats-grid .stat-circle .stat-number {
font-size: 1.9rem !important;
margin: 0.5rem 0 0.3rem 0 !important;
line-height: 1.1 !important;
}
/* 丸の中のサブタイトルを控えめに */
.stats-grid .stat-circle .stat-subtitle {
font-size: 0.95rem !important;
margin-top: 0.1rem !important;
line-height: 1.3 !important;
}
/* 丸全体のパディングを控えめに調整 */
.stats-grid .stat-circle {
padding-top: 0.6rem !important;
padding-bottom: 0.8rem !important;
}
}
/* 768pxの時に数字で見る！コモリの働きやすさセクションの丸の中の文字をほぼ元の状態に戻す */
@media (max-width: 768px) {
/* 丸の中の色付きの文字（アイコンテキスト）をほぼ元の状態に */
.stats-grid .stat-circle .stat-icon-text {
font-size: 0.9rem !important;
padding: 0.2rem 0.5rem !important;
line-height: 1.2 !important;
}
/* 丸の中の色付きの文字の位置をほぼ元の状態に */
.stats-grid .stat-circle .stat-icon-text {
margin-top: 0 !important;
transform: none !important;
}
/* 丸の中のタイトルをほぼ元の状態に */
.stats-grid .stat-circle .stat-title {
font-size: 1rem !important;
margin-bottom: 0.3rem !important;
line-height: 1.2 !important;
}
/* 丸の中の数字をほぼ元の状態に */
.stats-grid .stat-circle .stat-number {
font-size: 1.8rem !important;
margin: 0.4rem 0 0.2rem 0 !important;
line-height: 1.1 !important;
}
/* 丸の中のサブタイトルをほぼ元の状態に */
.stats-grid .stat-circle .stat-subtitle {
font-size: 0.9rem !important;
margin-top: 0 !important;
line-height: 1.3 !important;
}
/* 丸全体のパディングをほぼ元の状態に調整 */
.stats-grid .stat-circle {
padding-top: 0.5rem !important;
padding-bottom: 0.7rem !important;
}
}
/* 768pxの時に先輩85％が未経験スタート、月給25万～、ステップアップ支援制度ありの3つのみ字を小さくして上に寄せる設定 */
@media (max-width: 768px) {
/* 基本情報のsummary-pillを小さくして上に寄せる */
.job-card:first-child .summary-pill {
font-size: 0.75rem !important;
padding: 0.25rem 0.5rem !important;
margin-bottom: 0.25rem !important;
transform: translateY(-0.2rem) !important;
}
/* 給与の説明文を小さくして上に寄せる */
.job-card:first-child .detail-item:nth-child(4) p {
font-size: 0.8rem !important;
line-height: 1.3 !important;
margin-top: 0.15rem !important;
transform: translateY(-0.1rem) !important;
}
/* 応募条件の説明文を小さくして上に寄せる */
.job-card:first-child .detail-item:nth-child(7) p {
font-size: 0.8rem !important;
line-height: 1.3 !important;
margin-top: 0.15rem !important;
transform: translateY(-0.1rem) !important;
}
/* 基本情報のjob-summary全体を上に寄せる */
.job-card:first-child .job-summary {
margin-bottom: 0.6rem !important;
transform: translateY(-0.3rem) !important;
}
/* 基本情報のjob-details全体を上に寄せる */
.job-card:first-child .job-details {
transform: translateY(-0.2rem) !important;
}
}
/* 768pxの時に先輩85％が未経験スタート、月給25万～、ステップアップ支援制度ありの3つのみ字をもっと小さくする設定 */
@media (max-width: 768px) {
/* 基本情報のsummary-pillをもっと小さく */
.job-card:first-child .summary-pill {
font-size: 0.75rem !important;
padding: 0.25rem 0.5rem !important;
margin-bottom: 0.25rem !important;
transform: translateY(-0.2rem) !important;
}
/* 給与の説明文をもっと小さく */
.job-card:first-child .detail-item:nth-child(4) p {
font-size: 0.8rem !important;
line-height: 1.3 !important;
margin-top: 0.15rem !important;
transform: translateY(-0.1rem) !important;
}
/* 応募条件の説明文をもっと小さく */
.job-card:first-child .detail-item:nth-child(7) p {
font-size: 0.8rem !important;
line-height: 1.3 !important;
margin-top: 0.15rem !important;
transform: translateY(-0.1rem) !important;
}
/* 基本情報のjob-summary全体を上に寄せる */
.job-card:first-child .job-summary {
margin-bottom: 0.6rem !important;
transform: translateY(-0.3rem) !important;
}
/* 基本情報のjob-details全体を上に寄せる */
.job-card:first-child .job-details {
transform: translateY(-0.2rem) !important;
}
}
/* エントリーフォームセクションの背景は白（カードのみ和柄） */
.entry-section {
background: #FFFFFF !important;
}
/* 終端調整（空白行のみ） */
/* ここでファイルを正しく終了するためのダミーコメント */
}
/* 全端末で「タップで回答」を小さくする（強制上書き） */
.interview-card .question .toggle-btn {
font-size: 0.8rem !important;
line-height: 1.2;
}
/* 768px以下の全ケースで、数字で見るセクションの色付き文字をわずかに下げる（強制上書き） */
@media (max-width: 768px) {
.stats-grid .stat-circle .stat-icon-text {
transform: translateY(0.24rem) !important;
margin-top: 0.28rem !important;
}
}
/* 768px以下で stat-number の上余白を増やして数字を下げる（強制上書き） */
@media (max-width: 768px) {
.stats-grid .stat-circle .stat-number {
margin-top: 0.6rem !important;
}
}
/* 全画面サイズでタイムライン見出しの自然な改行を促進 */
.timeline-content h3 {
word-break: keep-all; /* 単語途中での不自然な分割を避ける */
overflow-wrap: anywhere; /* 必要時のみ適切に折り返す */
text-wrap: balance; /* 文節単位でバランス良く改行 */
line-break: strict; /* 和文の禁則を有効に */
word-break: auto-phrase; /* 対応ブラウザでは自然な位置で改行（実験的） */
}
/* 480px以下: 呉屋さんの一日セクションで（タップで回答）を中央寄せ */
@media (max-width: 480px) {
#timeline .timeline-comment .comment-header {
text-align: center !important;
width: 100%;
display: block;
padding-top: 0.25rem; /* 上の余白を縮小 */
padding-bottom: 0.25rem;/* 下の余白も控えめに */
}
#timeline .timeline-comment .comment-header::after {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0.05rem; /* さらに上余白を詰める */
line-height: 1.0; /* 行高をさらに詰める */
font-size: 0.9em; /* 文字サイズをわずかに小さく */
white-space: pre;
}
/* 成長ストーリー（タップで表示）も中央寄せ＆余白を詰める */
#timeline .growth-header {
text-align: center !important;
width: 100%;
display: block;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
#timeline .growth-header::after {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0.1rem;
line-height: 1.1;
white-space: pre;
}
}
/* 非PC端末でインタビューQAカード本文を左右いっぱいに広げる（強制上書き） */
@media (max-width: 1024px) {
/* 画像と本文を縦積みに固定 */
.interview-qa-card .qa-body { grid-template-columns: 1fr !important; }
/* 本文の左余白を完全に除去し、横幅100%を保証 */
.interview-qa-card .qa-a,
.interview-qa-card .qa-a p {
margin-left: 0 !important;
padding-left: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
}
/* 非PC端末で、単語途中でも改行して左右いっぱいに表示（強制上書き） */
@media (max-width: 1024px) {
/* 強すぎる一括指定をやめ、本文に限定して改行を許可 */
.interview-qa-card .qa-a,
.interview-qa-card .qa-a p {
white-space: normal !important; /* 通常の改行（端到達時のみ折返し） */
overflow-wrap: normal !important; /* 早期改行を抑止 */
word-break: normal !important; /* 早期改行を抑止（必要時のみ改行） */
hyphens: none !important; /* 自動ハイフネーションは行わない */
}
/* 左寄りの原因となる左マージンを撤去し、要素を全幅化 */
.interview-qa-card .qa-body { grid-template-columns: 1fr !important; justify-items: stretch !important; }
.interview-qa-card .qa-a { margin-left: 0 !important; padding-left: 0 !important; margin-right: 0 !important; padding-right: 0 !important; width: 100% !important; max-width: 100% !important; display: block !important; }
.interview-qa-card .qa-a p { display: block !important; width: 100% !important; max-width: 100% !important; margin-right: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; }
/* Aラベルを段落の上に独立配置し、pをフル幅に */
.interview-qa-card .qa-a .qa-speaker { display: block !important; margin-right: 0 !important; margin-bottom: 0.2rem !important; }
/* #interview配下に限定したさらに強い特異性の上書き */
#interview .interview-qa-cards .interview-qa-card .qa-body { grid-template-columns: 1fr !important; justify-items: stretch !important; }
#interview .interview-qa-cards .interview-qa-card .qa-a { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; display: block !important; }
#interview .interview-qa-cards .interview-qa-card .qa-a p {
display: block !important;
width: calc(100% - 0.6rem) !important; /* pの横幅をやや小さく */
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
white-space: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
hyphens: none !important;
text-align: left !important;
}
}
/* 1024px以下の全画面で、.qa-a に左マージンを追加しつつ右端溢れを防止 */
@media (max-width: 1024px) {
.interview-qa-card .qa-a { margin-left: 0.6rem !important; width: calc(100% - 0.6rem) !important; max-width: calc(100% - 0.6rem) !important; }
#interview .interview-qa-cards .interview-qa-card .qa-a { margin-left: 0.6rem !important; width: calc(100% - 0.6rem) !important; max-width: calc(100% - 0.6rem) !important; }
/* 早期改行を完全無効化（ID付きで高特異性） */
#interview .interview-qa-cards .interview-qa-card .qa-a p {
white-space: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
text-wrap: pretty !important; /* 自然な位置でのみ改行 */
}
}
/* 769px〜1024px: インタビューカードが画面幅いっぱいにならないように調整 */
@media (min-width: 769px) and (max-width: 1024px) {
#interview.interview-section .container {
padding-left: 16px !important;
padding-right: 16px !important;
padding-inline: 16px !important;
box-sizing: border-box;
}
#interview .interview-qa-cards {
max-width: 92vw !important; /* 画面より少し狭く */
margin-left: auto !important;
margin-right: auto !important;
}
#interview .interview-qa-card {
width: 100% !important;
max-width: 920px !important; /* 安全な上限 */
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box;
}
}
/* PC幅: インタビューQ&A画像の縦横比を固定して横長化を防止 */
@media (min-width: 1025px) {
#interview .interview-qa-card .qa-img .photo-placeholder {
width: clamp(260px, 32vw, 420px) !important; /* 縦横比は維持したままサイズを縮小 */
height: auto !important;
aspect-ratio: 4 / 3 !important;
background-size: cover !important;
background-position: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* 1024px以下: 「数字で見る」丸内の色付き大文字を少し拡大 */
@media (max-width: 1024px) {
#stats .stat-circle .stat-number { font-size: clamp(1.4rem, 3.0vw, 1.65rem) !important; line-height: 1.15 !important; }
#stats .stat-circle .stat-icon-text { font-size: clamp(0.90rem, 2.1vw, 1.0rem) !important; }
}
/* 768px以下でも同値を明示適用（他の既存ルールを上書き） */
@media (max-width: 768px) {
#stats .stat-circle .stat-number { font-size: clamp(1.8rem, 3.5vw, 1.8rem) !important; line-height: 1.15 !important; }
#stats .stat-circle .stat-icon-text { font-size: clamp(1.1rem, 2.5vw, 1.5rem) !important; }
}
/* 480px以下でも同値を明示適用（他の既存ルールを上書き） */
@media (max-width: 480px) {
#stats .stat-circle .stat-number { font-size: clamp(1.8rem, 3.5vw, 1.8rem) !important; line-height: 1.15 !important; }
#stats .stat-circle .stat-icon-text { font-size: clamp(1.1rem, 2.5vw, 1.5rem) !important; }
}
/* 募集要項: 給与・応募条件の本文サイズを全画面で統一（他の項目と同一） */
#job-info .job-card:first-child .detail-item:nth-child(4) p,
#job-info .job-card:first-child .detail-item:nth-child(7) p {
font-size: 1rem !important;
line-height: 1.5 !important;
}
/* 非PC端末で、インタビューQAカード内の文章を両端揃えにして右端まで確実に届かせる */
@media (max-width: 1024px) {
.interview-qa-card .qa-a,
.interview-qa-card .qa-a p,
.interview-qa-card .qa-q h3 {
text-align: left !important; /* 字間を変えないため左揃えに戻す */
text-justify: auto !important; /* 文字間均等化を無効化 */
letter-spacing: normal !important; /* 字間は常に通常 */
hyphens: manual !important; /* 自動ハイフンを禁止（改行のみで制御） */
}
}
/* ラストラインも強制的に両端揃えにする擬似要素トリック（非PC端末） */
@media (max-width: 1024px) {
.interview-qa-card .qa-a p::after {
content: none !important; /* 強制両端揃えを撤回 */
display: none !important;
width: auto;
height: auto;
}
}
/* ===== 1024px以上: 縦横比を維持したままQA画像サイズを縮小 ===== */
@media (min-width: 1024px) {
#interview .interview-qa-card .qa-img .photo-placeholder {
width: clamp(220px, 26vw, 320px) !important; /* 小さめの上限に調整 */
height: auto !important; /* 縦横比維持 */
aspect-ratio: 4 / 3 !important; /* 比率固定 */
background-size: cover !important;
background-position: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* ===== 768px以上: インタビューQAカードは常に 左=文章 / 右=写真 ===== */
@media (min-width: 768px) {
#interview .interview-qa-card .qa-body {
display: grid !important;
grid-template-columns: 1fr 0.9fr !important;
align-items: start !important;
column-gap: 0.8rem !important;
}
#interview .interview-qa-card .qa-a { order: 1 !important; }
#interview .interview-qa-card .qa-img { order: 2 !important; }
}
/* ===== 769px〜1440px: QAカードの行レイアウト『質問 画像 / 回答』に再配置 ===== */
@media (min-width: 769px) and (max-width: 1440px) {
#interview .interview-qa-card {
display: grid !important;
grid-template-columns: 1fr 0.9fr !important; /* 左:質問/回答, 右:画像 */
grid-template-rows: auto auto !important; /* 1行目: 質問+画像, 2行目: 回答 */
grid-template-areas:
"q img"
"a img" !important;
align-items: start !important;
gap: 0.8rem !important;
}
/* 内部の .qa-body を透過して子要素を親グリッドに参加させる */
#interview .interview-qa-card .qa-body { display: contents !important; }
#interview .interview-qa-card .qa-q { grid-area: q !important; margin-bottom: 0 !important; }
#interview .interview-qa-card .qa-a { grid-area: a !important; }
#interview .interview-qa-card .qa-img { grid-area: img !important; }
}
/* ===== 768pxちょうどの時も『質問 画像 / 回答』に固定 ===== */
@media (width: 768px) {
#interview .interview-qa-card {
display: grid !important;
grid-template-columns: 1fr 0.9fr !important;
grid-template-rows: auto auto !important;
grid-template-areas:
"q img"
"a img" !important;
align-items: start !important;
gap: 0.8rem !important;
}
#interview .interview-qa-card .qa-body { display: contents !important; }
#interview .interview-qa-card .qa-q { grid-area: q !important; margin-bottom: 0 !important; }
#interview .interview-qa-card .qa-a { grid-area: a !important; }
#interview .interview-qa-card .qa-img{ grid-area: img !important; }
}
/* ===== 768px以上: 画像をカード縦方向の中央に配置 ===== */
@media (min-width: 768px) {
#interview .interview-qa-card .qa-img {
align-self: center !important; /* グリッドセル内で縦中央 */
display: flex !important; /* 画像自体も中央寄せ */
align-items: center !important;
justify-content: center !important;
}
#interview .interview-qa-card .qa-img .photo-placeholder {
margin: 0 auto !important;
}
}
/* ===== モバイル: Tさんの1日（タイムライン）画像を大きく（横幅いっぱい） ===== */
@media (max-width: 768px) {
/* 親カラムの最大幅制限を解除し、横幅いっぱいに */
#timeline.timeline-section .timeline-left,
#timeline.timeline-section .timeline-center,
#timeline.timeline-section .timeline-right {
max-width: 100% !important;
width: 100% !important;
}
/* 画像ラッパーを中央寄せ＋横幅いっぱいに */
#timeline.timeline-section .timeline-photo {
width: 100% !important;
max-width: 100% !important;
display: flex !important;
justify-content: center !important;
margin: 0 auto !important;
}
/* 実際の画像プレースホルダーを広げる（安全余白を考慮） */
#timeline.timeline-section .timeline-photo .photo-placeholder {
width: 100% !important;
max-width: calc(100vw - 12px) !important; /* 左右の最小余白6px×2を確保 */
height: 250px !important;
margin: 0 auto !important;
}
}
/* ===== 769-1024px: 写真と次の時間バッジの間隔を拡大 ===== */
@media (min-width: 769px) and (max-width: 1024px) {
/* タイムライン各アイテムの縦間隔を広げる */
#timeline .timeline .timeline-item {
margin-bottom: 0 !important; /* マージン相殺を避ける */
padding-bottom: 1.2rem !important; /* 写真直下に確実な余白を付与 */
}
/* 写真直下にも余白を追加（次アイテムの時間バッジとの距離を確保） */
#timeline .timeline .timeline-item .timeline-photo .photo-placeholder {
margin-bottom: 1rem !important; /* 視覚的な余白を増やす */
}
/* 次アイテム全体を下げる（前アイテムとの距離をさらに確保） */
#timeline .timeline .timeline-item + .timeline-item {
margin-top: 2.4rem !important;
}
}
/* ===== iPhone想定（<=480px）: インタビューQAの本文が右端まで届くよう幅・改行を是正 ===== */
@media (max-width: 480px) {
/* 左寄せの原因となる左マージンと幅の縮小を撤回し、フル幅に */
#interview .interview-qa-cards .interview-qa-card .qa-a {
margin-left: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/* 段落はブロックでフル幅、早期改行を抑止し通常の折返しに */
#interview .interview-qa-cards .interview-qa-card .qa-a p {
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
white-space: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
hyphens: auto !important;
text-align: left !important;
}
}
/* ===== 1441px以上: 『質問 画像 / 回答』レイアウトを統一（画像は縦中央） ===== */
@media (min-width: 1441px) {
#interview .interview-qa-card {
display: grid !important;
grid-template-columns: 1fr 0.9fr !important;
grid-template-rows: auto auto !important;
grid-template-areas:
"q img"
"a img" !important;
align-items: stretch !important;
gap: 0.8rem !important;
}
#interview .interview-qa-card .qa-body { display: contents !important; }
#interview .interview-qa-card .qa-q { grid-area: q !important; margin-bottom: 0 !important; }
#interview .interview-qa-card .qa-a { grid-area: a !important; }
#interview .interview-qa-card .qa-img{ grid-area: img !important; align-self: center !important; display: flex !important; align-items: center !important; justify-content: center !important; }
}
/* ===== 1024px以上: 質問の直下に回答を密着配置（縦の空間を詰める） ===== */
@media (min-width: 1024px) {
/* 親カードを2列2行のグリッドにして、QとAを別行に配置（重なり回避） */
#interview .interview-qa-card {
display: grid !important;
grid-template-columns: 1fr 0.9fr !important;
grid-template-rows: auto auto !important;
grid-template-areas:
"q img"
"a img" !important;
column-gap: 0.8rem !important;
row-gap: 0 !important;
align-items: start !important;
}
/* ラッパは透過。QとAをそれぞれのセルへ */
#interview .interview-qa-card .qa-body { display: contents !important; margin: 0 !important; padding: 0 !important; }
#interview .interview-qa-card .qa-q { grid-area: q !important; margin: 0 !important; padding: 0 !important; }
#interview .interview-qa-card .qa-a { grid-area: a !important; margin: 0 !important; padding: 0 !important; }
/* 画像は右セルで縦中央 */
#interview .interview-qa-card .qa-img { grid-area: img !important; align-self: center !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; }
}
/* ===== 768px以上: 「A」と回答本文を質問の開始位置に揃える（右へオフセット） ===== */
@media (min-width: 768px) {
#interview .interview-qa-card { --label-size: 32px; --label-gap: .6rem; }
#interview .interview-qa-card .qa-a {
display: flex !important;
align-items: flex-start !important;
margin: 0 !important;
padding: 0 !important;
}
#interview .interview-qa-card .qa-a .qa-speaker {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: var(--label-size) !important;
height: var(--label-size) !important;
flex: 0 0 var(--label-size) !important;
margin-right: var(--label-gap) !important;
}
#interview .interview-qa-card .qa-a p { margin: 0 !important; }
}
/* ===== 768px〜1024px: 回答の「A」を左揃え（カード左端に寄せる） ===== */
@media (min-width: 768px) and (max-width: 1024px) {
#interview .interview-qa-card .qa-a { margin-left: 0 !important; padding-left: 0 !important; }
#interview .interview-qa-card .qa-a .qa-speaker {
margin-left: 0 !important;
justify-content: flex-start !important;
text-align: left !important;
}
}
/* ===== 634px〜767px: 数字で見る！丸内の色付き数字を少し小さく ===== */
@media (min-width: 634px) and (max-width: 767px) {
#stats .stat-circle .stat-number {
font-size: 1.35rem !important; /* やや大きめに再調整 */
line-height: 1.15 !important;
}
}
/* ===== 別アプローチ（最終優先）: 親のグリッドを無効化し、.qa-body で Q と A を同一セルに積む ===== */
@media (min-width: 1024px) {
#interview .interview-qa-card { display: block !important; }
#interview .interview-qa-card .qa-body {
display: grid !important;
grid-template-columns: 1fr 0.9fr !important;
grid-template-areas: "text img" !important;
column-gap: 0.8rem !important;
row-gap: 0 !important;
align-items: start !important;
margin: 0 !important; padding: 0 !important;
}
#interview .interview-qa-card .qa-q { grid-area: text !important; margin: 0 !important; padding: 0 !important; }
#interview .interview-qa-card .qa-a { grid-area: text !important; margin: 0 !important; padding: 0 !important; }
#interview .interview-qa-card .qa-img {
grid-area: img !important;
align-self: center !important;
display: flex !important; align-items: center !important; justify-content: center !important;
margin: 0 !important; padding: 0 !important;
}
}
/* 1440pxちょうどでも同様に行間ゼロを強制 */
@media (width: 1440px) {
#interview .interview-qa-card { gap: 0 0.8rem !important; row-gap: 0 !important; grid-row-gap: 0 !important; }
#interview .interview-qa-card .qa-body { gap: 0 0 !important; row-gap: 0 !important; grid-row-gap: 0 !important; margin: 0 !important; padding: 0 !important; }
#interview .interview-qa-card .qa-q { margin-top: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }
#interview .interview-qa-card .qa-a { margin-top: 0 !important; margin-bottom: 0 !important; }
}
/* ===== qa-q: 下側の余白を少しだけ追加（全幅共通） ===== */
#interview .interview-qa-card .qa-q { margin-bottom: 0.35rem !important; }
/* ===== 数字で見る！: 丸サイズと連動して色付きの数字サイズを可変（全画面） ===== */
#stats .stat-circle { --stat-number-scale: 0.12; }
#stats .stat-circle .stat-number {
font-size: calc(var(--circle) * var(--stat-number-scale)) !important; /* 例: 直径の約28% */
line-height: 1.1 !important;
}
/* ===== 数字で見る！（最終上書き）: 文字サイズと間隔を常に丸サイズに連動 ===== */
#stats .stat-circle {
/* 必要に応じて比率を調整してください */
--stat-icon-text-scale: 0.065; /* 上段の小ラベル（例: 休日/給与） */
--stat-title-scale: 0.080; /* タイトル（例: 完全週休2日制） */
--stat-number-scale: 0.110; /* 色付き数字（例: 年間休日120日以上） */
--stat-subtitle-scale: 0.060; /* 下段サブ（例: プライベートも充実） */
--stat-gap-scale: 0.040; /* タイトルと数字の間隔 */
}
#stats .stat-circle .stat-icon-text {
font-size: calc(var(--circle) * var(--stat-icon-text-scale)) !important;
transform: none !important;
}
#stats .stat-circle .stat-title {
font-size: calc(var(--circle) * var(--stat-title-scale)) !important;
margin: 0 0 calc(var(--circle) * var(--stat-gap-scale)) 0 !important;
line-height: 1.15 !important;
}
#stats .stat-circle .stat-number {
font-size: calc(var(--circle) * var(--stat-number-scale)) !important;
line-height: 1.1 !important;
margin: 0 0 calc(var(--circle) * 0.018) 0 !important; /* 数字→サブの間隔（約1.8%） */
}
#stats .stat-circle .stat-subtitle {
font-size: calc(var(--circle) * var(--stat-subtitle-scale)) !important;
line-height: 1.15 !important;
}
#stats .stat-circle .stat-subtitle .stat-note {
font-size: 0.9em !important; /* 少し小さく */
color: #6c757d !important; /* グレー */
}
#stats .stat-circle .stat-number .stat-note {
font-size: 15px !important; /* 少し小さく */
color: #6c757d !important; /* グレー */
display: inline-block !important; /* マージンを効かせるためブロック化 */
line-height: 1 !important; /* 行の高さを詰める */
margin-top: -0.5rem !important; /* 数字行との縦間隔を詰める */
}
/* 数字で見る: 給与の注釈を別アプローチで詰める（brを抑制し、注釈をブロック化） */
#stats .stat-circle .stat-number br + .stat-note {
display: block !important; /* 注釈をブロック化して行間を制御 */
line-height: 1.05 !important; /* 高さをわずかに詰める */
margin-top: 0.1rem !important; /* 改行分ではなく最小マージンで制御 */
}
/* 注釈(.stat-note)を含む数値ブロック（=給与）に限り、直前のbrのみ無効化 */
#stats .stat-circle .stat-number:has(.stat-note) br:last-of-type {
display: none !important;
}
/* ===== タイムライン: コメントクリック時のフォーカス枠を無効化 ===== */
#timeline .timeline-comment:focus,
#timeline .timeline-comment:focus-visible,
#timeline .timeline-comment .comment-header:focus,
#timeline .timeline-comment .comment-header:focus-visible,
#timeline .timeline-comment .comment-content:focus,
#timeline .timeline-comment .comment-content:focus-visible {
outline: none !important;
outline-offset: 0 !important;
box-shadow: none !important; /* ブラウザ依存のフォーカスリング対策 */
}
/* ===== 「株式会社コモリについて」応募はこちらボタン: 下線除去＋右下FABと同じホバー演出 ===== */
.about-apply-btn,
.about-apply-btn:hover,
.about-apply-btn:focus {
text-decoration: none !important;
}
.about-apply-btn:hover {
background: linear-gradient(135deg, #5AA4F0 0%, #3A8ACB 100%) !important;
box-shadow: 0 14px 36px rgba(46, 134, 193, 0.45) !important;
transform: translateY(-2px) !important;
color: #fff !important;
border-color: rgba(255,255,255,0.35) !important;
}
/* ===== エントリーフォーム: LINE/応募ボタンの下線除去＋右下FABと同じホバー演出 ===== */
.entry-section .line-btn,
.entry-section .line-btn:hover,
.entry-section .line-btn:focus,
.entry-section .submit-btn,
.entry-section .submit-btn:hover,
.entry-section .submit-btn:focus {
text-decoration: none !important;
}
.entry-section .line-btn:hover,
.entry-section .submit-btn:hover {
background: linear-gradient(135deg, #5AA4F0 0%, #3A8ACB 100%) !important;
box-shadow: 0 14px 36px rgba(46, 134, 193, 0.45) !important;
transform: translateY(-2px) !important;
color: #fff !important;
border-color: rgba(255,255,255,0.35) !important;
}
/* ===== タイムライン: クリック/タップ誘導の波動アニメーション（全デバイス） ===== */
@keyframes timeline-wave-pulse { 0% { transform: scale(0.85); opacity: .45; } 60% { transform: scale(1.28); opacity: 0; } 100% { transform: scale(1.34); opacity: 0; } }
@keyframes timeline-wave-pulse-strong { 0% { transform: scale(0.95); opacity: .32; } 70% { transform: scale(1.38); opacity: 0; } 100% { transform: scale(1.42); opacity: 0; } }
#timeline .timeline-comment .comment-header,
#timeline .trivia .trivia-header,
#timeline .growth-story .growth-header { position: relative; isolation: isolate; overflow: visible; cursor: pointer; }
#timeline .timeline-comment .comment-header::after,
#timeline .trivia .trivia-header::after,
#timeline .growth-story .growth-header::after,
#timeline .timeline-comment .comment-header::before,
#timeline .trivia .trivia-header::before,
#timeline .growth-story .growth-header::before {
content: ""; position: absolute; inset: -6px; border-radius: 999px; pointer-events: none;
background: radial-gradient(circle, rgba(74,144,226,0.28) 0%, rgba(74,144,226,0.0) 60%); opacity: 0; z-index: -1;
}
#timeline .timeline-comment .comment-header::after,
#timeline .trivia .trivia-header::after,
#timeline .growth-story .growth-header::after { animation: timeline-wave-pulse 1.6s ease-out infinite; }
#timeline .timeline-comment .comment-header::before,
#timeline .trivia .trivia-header::before,
#timeline .growth-story .growth-header::before { animation: timeline-wave-pulse-strong 1.6s ease-out infinite; animation-delay: .5s; }
#timeline .timeline-comment .comment-header:hover::after,
#timeline .trivia .trivia-header:hover::after,
#timeline .growth-story .growth-header:hover::after,
#timeline .timeline-comment .comment-header:focus-visible::after,
#timeline .trivia .trivia-header:focus-visible::after,
#timeline .growth-story .growth-header:focus-visible::after {
background: radial-gradient(circle, rgba(74,144,226,0.40) 0%, rgba(74,144,226,0.0) 60%);
}
/* --- 要望対応: 波動はボタン外側で強調。テキストは変更しない（shadow波） --- */
@keyframes timeline-outer-glow {
0% { box-shadow: 0 0 0 0 rgba(74,144,226,0.36); }
60% { box-shadow: 0 0 0 14px rgba(74,144,226,0.00); }
100% { box-shadow: 0 0 0 18px rgba(74,144,226,0.00); }
}
/* 既存の擬似要素アニメーションは無効化して、外側の箱影だけを波動化 */
#timeline .timeline-comment .comment-header::before,
#timeline .timeline-comment .comment-header::after,
#timeline .trivia .trivia-header::before,
#timeline .trivia .trivia-header::after,
#timeline .growth-story .growth-header::before,
#timeline .growth-story .growth-header::after { animation: none !important; opacity: 0 !important; }
/* 外側のリングがふわっと広がる。テキスト・背景は変更しない */
#timeline .timeline-comment .comment-header,
#timeline .trivia .trivia-header,
#timeline .growth-story .growth-header {
animation: none !important; /* 内側の波動は消す */
box-shadow: none !important;
border-radius: 999px; /* 角を丸く保つ（見た目維持） */
background: transparent; /* ボタン自体の背景は変えない */
}
/* --- 波動の発生源をボタン大枠に変更（.trivia/.growth-story/.timeline-comment） --- */
#timeline .trivia,
#timeline .growth-story { position: relative; isolation: isolate; }
/* 枠から外に広がるリング（大枠に適用） */
#timeline .trivia::after,
#timeline .growth-story::after {
content: ""; position: absolute; inset: -10px; border-radius: 18px; pointer-events: none;
box-shadow: 0 0 0 0 rgba(74,144,226,0.32);
animation: timeline-outer-glow 2.8s ease-out infinite;
}
/* 低速端末配慮 */
@media (prefers-reduced-motion: reduce) {
#timeline .trivia::after,
#timeline .growth-story::after { animation: none !important; box-shadow: none !important; }
}
/* コメント枠には波動を適用しない（外枠アニメを明示的に無効化） */
#timeline .timeline-comment { position: relative; }
#timeline .timeline-comment::after { content: none !important; animation: none !important; box-shadow: none !important; }
@media (prefers-reduced-motion: reduce) {
#timeline .timeline-comment .comment-header::before,
#timeline .timeline-comment .comment-header::after,
#timeline .trivia .trivia-header::before,
#timeline .trivia .trivia-header::after,
#timeline .growth-story .growth-header::before,
#timeline .growth-story .growth-header::after { animation: none !important; opacity: 0 !important; }
}
/* ===== タップ/クリックのヒント表示をデバイス別に出し分け ===== */
.toggle-hint { font-size: 1.1rem; color: #6b8ebf; font-weight: 700; margin-left:0; display: inline-block; white-space: nowrap; text-align: center;}
.toggle-hint .hint-touch,
.toggle-hint .hint-click { margin-left: 0 !important; }
.timeline-section #timeline .toggle-hint,
#timeline .toggle-hint { color: #2E86C1 !important; } /* 豆知識と同系色に統一 */
.toggle-hint .hint-touch { display: none; }
.toggle-hint .hint-click { display: inline; } /* デフォルトはクリック案内を表示 */
/* タッチ端末（スマホ/タブレット）: タップで展開 */
@media (hover: none) and (pointer: coarse) {
.toggle-hint .hint-touch { display: inline; }
.toggle-hint .hint-click { display: none !important; }
}
/* ホバー可能なデバイス（一般的なPC）: クリックで展開 */
@media (hover: hover) and (pointer: fine) {
.toggle-hint .hint-click { display: inline; }
.toggle-hint .hint-touch { display: none; }
}
/* ===== 成長ストーリー見出し内のヒントを常に中央揃え ===== */
#timeline .growth-story .growth-header {
display: flex !important;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: .25em;
text-align: center;
}
#timeline .growth-story .growth-header .toggle-hint,
#timeline .growth-story .growth-header .toggle-hint .hint-touch,
#timeline .growth-story .growth-header .toggle-hint .hint-click {
margin-left: 0 !important;
margin-right: 0 !important;
text-align: center;
align-self: center;
}
/* ===== 「株式会社コモリについて」スライドショー: ドットの滑らかな移り変わり ===== */
.about-slider { --slide-duration: 0.6s; } /* JSのDURATIONと同期 */
.about-dots .dot {
cursor: pointer;
position: relative;
background: rgba(0,0,0,0.3) !important; /* 常時薄いグレーを維持して消失防止 */
transition: background-color var(--slide-duration) ease;
}
.about-dots .dot::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.9);
border-radius: inherit;
opacity: 0; /* フェードのみでクロスフェード */
transition: opacity var(--slide-duration) ease;
}
.about-dots .dot.active { outline: none; }
.about-dots .dot.active::after {
opacity: 1; /* 濃い黒をフェードイン */
}
/* ===== 「株式会社コモリについて」スライドショー: 768px/1024pxで正しい縦横比を維持 ===== */
@media (max-width: 768px) {
.about-slider {
height: auto !important;
aspect-ratio: 4 / 3 !important; /* 画像の縦横比を固定 */
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.about-slider {
height: auto !important;
aspect-ratio: 4 / 3 !important; /* 画像の縦横比を固定 */
}
}
/* ===== 「株式会社コモリについて」: リード文は右端でのみ自然改行（強制改行を無効化） ===== */
.about-section .about-text .about-lead {
white-space: normal !important; /* 通常の改行ルールに戻す */
word-break: normal !important; /* 任意の場所での分割を禁止 */
overflow-wrap: normal !important; /* 任意分割を無効化して自然改行に */
max-width: var(--about-lead-max, 68ch) !important; /* リード文の視認性に適した幅 */
margin-left: auto !important;
margin-right: auto !important; /* ブロック自体を中央寄せ */
}
.about-section .about-text .about-lead br {
display: none !important; /* 段落内の手動改行を無効化 */
}
/* リード幅のデフォルト（必要に応じて上位で再定義可能） */
.about-section { --about-lead-max: 68ch; }
/* ===== 「Tさんのご紹介」: 文章は右端到達時のみ自然に折返し（重み付けなし） ===== */
/* 全画面サイズで最高優先度でintro-leadの改行を統一 */
body section#intro.intro-section .container .intro-card .intro-content p.intro-lead,
#intro.intro-section .intro-card .intro-content .intro-lead,
.intro-section .intro-card .intro-content .intro-lead {
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin: 0 0 1rem 0 !important;
padding: 0 !important;
/* 改行はブラウザ標準の自然折返しのみ */
white-space: normal !important; /* 強制非改行は使わない */
word-break: normal !important; /* 単語途中での分割を避ける */
overflow-wrap: normal !important; /* 任意分割を行わない */
text-wrap: wrap !important; /* balance/pretty等は使わない */
line-break: strict !important; /* 和文の禁則を適用 */
hyphens: none !important;
/* 基本スタイルも統一 */
font-family: inherit !important;
font-size: 1.05rem !important;
line-height: 1.9 !important;
color: #1F2A37 !important;
text-align: left !important;
}
/* モバイル専用追加ルール */
@media (max-width: 768px) {
body section#intro.intro-section .container .intro-card .intro-content p.intro-lead,
#intro.intro-section .intro-card .intro-content .intro-lead,
.intro-section .intro-card .intro-content .intro-lead {
/* モバイルでも同じルールを強制 */
text-justify: none !important;
text-rendering: auto !important;
font-feature-settings: normal !important;
font-kerning: auto !important;
text-size-adjust: 100% !important;
}
/* 768px以下でも確実にintro-leadだけは任意改行させない */
.intro-content p:not(.intro-lead) {
overflow-wrap: anywhere;
word-break: auto-phrase;
text-wrap: pretty;
}
}
/* ===== iOS Safari対策: 「Tさんのご紹介」リード文の
を確実に有効化 ===== */
@supports (-webkit-touch-callout: none) {
/* iOS全体: 自動テキストサイズ調整を固定 */
html, body { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }
#intro.intro-section .intro-card .intro-content .intro-lead {
white-space: pre-line !important; /* 強制的に
や\n を改行として扱う */
}
#intro.intro-section .intro-card .intro-content .intro-lead br {
display: inline !important; /*
を確実に表示 */
content: "" !important;
}
}
/* ===== 「株式会社コモリについて」リード文:
を有効化（全デバイス最終上書き） ===== */
.about-section .about-text .about-lead br { display: inline !important; }
/* ===== 応募は簡単！3ステップ: 真ん中(2)のカードのアイコン画像のみ少し小さく ===== */
#steps .steps > .step:nth-child(3) .step-icon img {
transform: scale(0.9);
transform-origin: center;
}
/* ===== 応募は簡単！3ステップ: 各ステップのホバーアニメーションを廃止 ===== */
/* ステップはデフォルトで移動しない。リンクが含まれる場合でも step 自体は固定 */
#steps .step { transition: none !important; }
#steps .step:hover { transform: none !important; box-shadow: var(--card-shadow) !important; }
/* ===== 1024px以下: 「Tさんの1日」顔写真の位置を少し下に（最終上書き） ===== */
@media (min-width: 1025px){
.timeline-comment .comment-content .face-photo { bottom: -60px !important; }
.timeline-comment .comment-content { margin-bottom: 55px !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
.timeline-comment .comment-content .face-photo { bottom: -60px !important; }
.timeline-comment .comment-content { margin-bottom: 55px !important; }
}
@media (min-width: 481px) and (max-width: 768px) {
.timeline-comment .comment-content .face-photo { bottom: -65px !important; }
.timeline-comment .comment-content { margin-bottom: 50px !important; }
}
@media (min-width: 321px) and (max-width: 480px) {
.timeline-comment .comment-content .face-photo { bottom: -50px !important; }
.timeline-comment .comment-content { margin-bottom: 30px !important; }
}
@media (max-width: 320px) {
.timeline-comment .comment-content .face-photo { bottom: -45px !important; }
.timeline-comment .comment-content { margin-bottom: 30px !important; }
}
/* ===== mini-info: 上マージンを小さく（最終上書き） ===== */
.timeline-content .mini-info { margin-top: 80px !important; }
@media (max-width: 480px) {
.timeline-content .mini-info { margin-top: 60px !important; }
}
/* ===== 780px以下: 会社紹介リード文はどこでも改行可能に（強制上書き） ===== */
@media (max-width: 780px) {
.about-section .about-text .about-lead {
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: break-word !important; /* 英数語も適宜改行 */
text-wrap: wrap !important;
}
}
/* ===== iPad幅(768-1024px): PC同等表示（フレームいっぱい・トリミングあり） ===== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
/* タイムライン写真の背景画像を全面表示（詳細度最大化でトリミング防止） */
html body section#timeline.timeline-section .container .timeline .timeline-item .timeline-photo .photo-placeholder,
html body section.timeline-section .container .timeline .timeline-item .timeline-photo .photo-placeholder,
html body .timeline-section #timeline .timeline .timeline-item .timeline-left .timeline-photo .photo-placeholder,
html body .timeline-section #timeline .timeline .timeline-item .timeline-right .timeline-photo .photo-placeholder,
html body #timeline .timeline-photo .photo-placeholder,
body section#timeline .timeline-photo .photo-placeholder {
background-size: cover !important; /* PCと同じくフレームいっぱい */
background-position: center center !important;
background-repeat: no-repeat !important;
/* 768-1024pxでは比率固定を行わない（下位メディアクエリの高さ制御を優先） */
width: 100% !important;
max-width: 100% !important;
min-height: 200px !important; /* 最小高さ確保 */
object-fit: contain !important; /* imgタグへの対応 */
}
}
/* ===== iOS/Safari・古いブラウザ対策: aspect-ratio未対応時の高さ確保 ===== */
@supports not (aspect-ratio: 1 / 1) {
/* タイムラインの画像プレースホルダーに4:3のパディングボックスで高さを与える */
#timeline .timeline-photo .photo-placeholder {
position: relative !important;
height: auto !important;
min-height: 240px !important; /* 極端なゼロ高さを回避 */
width: 100% !important;
display: block !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: cover !important; /* PCと同じくフレームいっぱい */
}
#timeline .timeline-photo .photo-placeholder::before {
content: "";
display: block;
width: 100%;
padding-top: 75%; /* 4:3 比率の疑似要素で高さを確保 */
}
}
/* ===== iOS Safariを明示的に含む追加の保険（WebKit特徴検出） ===== */
@supports (-webkit-touch-callout: none) {
@media (min-width: 768px) and (max-width: 1024px) {
#timeline .timeline-photo .photo-placeholder {
background-size: contain !important;
background-position: center center !important;
background-repeat: no-repeat !important;
min-height: 220px !important;
}
}
}
/* ===== iPad横(例: 1180px)帯の追加カバー: 1025px〜1366pxで高さ確保と全面表示 ===== */
@media (min-width: 1025px) and (max-width: 1366px) {
#timeline .timeline-photo .photo-placeholder {
display: block !important;
background-size: cover !important; /* PCと同じくフレームいっぱい */
background-position: center center !important;
background-repeat: no-repeat !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 4 / 3 !important;
min-height: 260px !important; /* 横持ちiPadでの高さ0回避 */
visibility: visible !important; /* まれな不可視化対策 */
opacity: 1 !important;
margin: 0 auto !important; /* 中央に固定 */
}
}
/* 1025-1366px: タイムライン写真をやや小さく（高詳細度で強制） */
@media screen and (min-width: 1025px) and (max-width: 1366px) {
html body section#timeline.timeline-section .container .timeline .timeline-item .timeline-photo .photo-placeholder,
html body section.timeline-section .container .timeline .timeline-item .timeline-photo .photo-placeholder,
html body .timeline-section #timeline .timeline .timeline-item .timeline-left .timeline-photo .photo-placeholder,
html body .timeline-section #timeline .timeline .timeline-item .timeline-right .timeline-photo .photo-placeholder,
html body #timeline .timeline-photo .photo-placeholder,
body section#timeline .timeline-photo .photo-placeholder {
max-width: clamp(520px, 48vw, 780px) !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* ===== iPad帯の横位置とサイズをPCと同様に（中央寄せ＋最大幅解除） ===== */
@media (min-width: 768px) and (max-width: 1366px) {
#timeline .timeline-left > .timeline-photo,
#timeline .timeline-right > .timeline-photo {
width: 100% !important;
max-width: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
margin: 0 auto !important;
}
#timeline .timeline-photo .photo-placeholder {
width: auto !important;
max-width: 100% !important; /* 460pxなどの上限を解除 */
margin: 0 auto !important; /* 左寄り防止 */
}
}
/* ===== 全デバイス共通: 右はみ出し防止（改行と幅の安全化） ===== */
/* 768-1024px: Tさんの一日 セクションの画像をやや小さく（中央寄せ） */
@media (min-width: 768px) and (max-width: 1024px) {
/* 直前の 768-1366px の100%指定を上書きするために詳細度を上げる */
#timeline .timeline .timeline-item .timeline-photo .photo-placeholder,
#timeline .timeline-photo .photo-placeholder {
max-width: clamp(420px, 52vw, 640px) !important;
width: 100% !important;
margin: 0 auto !important;
}
#timeline .timeline-left > .timeline-photo,
#timeline .timeline-right > .timeline-photo { justify-content: center !important; }
}
/* about-cta の本文は常に自然改行 */
.about-cta p {
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
text-wrap: pretty;
}
/* 募集要項カード本文は常に自然改行 */
#job-info .job-card p,
#job-info .job-card .detail-item p,
#job-info .job-details p {
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
line-break: auto !important;
}
/* カードの横はみ出し防止（幅とボックスサイズを安全化） */
.job-cards { max-width: 100% !important; box-sizing: border-box !important; }
.job-card { max-width: 100% !important; box-sizing: border-box !important; overflow: hidden; }
/* エントリーフォーム注意文（電話受付時間など）も常に自然改行 */
.entry-section .application-form .form-note p {
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
}
/* ===== 768px以下: Tさんのご紹介 全幅画像 / コモリについて 影オフ ===== */
@media (max-width: 768px) {
/* Tさんのご紹介: 画像を横幅いっぱいに */
#intro .intro-photo,
#intro .intro-photo .main-photo,
#intro .intro-photo .photo-placeholder {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
display: block !important;
}
/* コモリについて: ボタンとスライドショーの影を無効化 */
.about-apply-btn,
.about-apply-btn:hover,
.about-apply-btn:focus { box-shadow: none !important; }
.about-slider { box-shadow: none !important; }
}
/* ===== iOS Safari専用: インタビュー本文は全幅＆通常折返し、ヒーローの拡大抑止 ===== */
@supports (-webkit-touch-callout: none) {
/* 社員本音インタビュー: 本文段落のflexを解除し、幅縮小・早期改行を無効化 */
#interview .interview-qa-card .qa-a,
#interview .interview-qa-card .qa-a p {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin-left: 0 !important;
padding-left: 0 !important;
white-space: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
text-wrap: wrap !important;
text-align: left !important;
}
#interview .interview-qa-card .qa-a p {
display: block !important; /* 既存の display:flex を解除 */
gap: 0 !important; /* Safariでの意図せぬ縮小を防止 */
}
/* ヒーロー: アドレスバー変動時の拡大抑止（安定vhを使用） */
.hero-section {
height: 100svh !important;
min-height: 100svh !important;
}
.hero-background-image {
background-attachment: scroll !important;
transform: none !important; /* 念のため拡大演出を無効化 */
will-change: auto !important;
}
/* ヒーロー1行目（サブコピー先頭）の読み込み時の揺れを抑止 */
.hero-section .sub-copy,
.hero-section .sub-copy p,
.hero-section .sub-copy p:first-child,
.hero-section .sub-copy p:first-child strong {
/* フォントのスワップによる見た目のサイズ変動を防ぐため、iOSは常にシステムフォントを使用 */
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Helvetica Neue", Arial, sans-serif !important;
-webkit-font-smoothing: antialiased !important;
/* バランス改行由来のレイアウト再計算を避ける */
text-wrap: wrap !important;
white-space: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
/* フォント読み込み前後でのメトリクス差異を低減 */
font-synthesis: none !important; /* 疑似ボールド/イタリック無効化 */
font-size-adjust: from-font !important; /* x-ハイトに基づく調整（対応環境） */
-webkit-text-size-adjust: 100% !important;
line-height: 1.25 !important; /* 行高を固定して垂直揺れを防止 */
}
/* 最低1行分の高さを先に確保（読み込み中の垂直シフト抑止） */
.hero-section .sub-copy p:first-child { min-height: 1.25em !important; }
}
/* ===== 全画面サイズ共通: .trivia の上余白を付与 ===== */
.trivia { margin-top: 5rem !important; }
.growth-story { margin-top: 5rem !important; }
/* ===== 全画面サイズ共通: 豆知識・成長ストーリーの淵を濃い青に ===== */
.trivia,
.growth-story { border: 2px solid var(--brand-600) !important; }