@charset "utf-8";
/* mio-top.css｜澪重工 トップの改変 */

/* ========== FV：信号旗の紙片 ========== */
.fv-stage { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 2; pointer-events: none; }
.fv-stage-sp { display: none; }
/* 文字は紙片より上の層（紙片が見出し・本文に刺さって見えないように・大串FB 10/22） */
#fv .main { z-index: 3; pointer-events: none; }
.beginning .tx { z-index: 3; }
.pc-piece { position: absolute; top: 0; left: 0; display: block; will-change: transform; }
.pc-piece svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pc-piece > svg { opacity: 0; transform: translateY(-46px) rotate(-14deg) scale(0.6); transition: opacity 0.5s ease, transform 0.9s cubic-bezier(0.2, 0.9, 0.2, 1.15); transition-delay: calc(0.35s + var(--i) * 0.06s); }
body.animation-ready .pc-piece > svg { opacity: 1; transform: none; }
.pc-wake > svg { transform: translateX(-30%) scaleX(0.2); transform-origin: 0 50%; transition-duration: 0.6s, 1.6s; transition-delay: 0.2s; }
@media screen and (max-width: 767px) {
	.fv-stage-pc { display: none; }
	.fv-stage-sp { display: block; }
}

/* FV の英字：航跡の向きに、右へ一段ずつずらして積む */
.main .title { top: 50%; left: 8.5%; margin: 0; width: auto; transform: translateY(-54%); font-style: italic; font-weight: 700; font-size: clamp(46px, 7.2vw, 132px); line-height: 0.98; letter-spacing: -0.015em; color: var(--ink); }
.main .title > span { margin: 0; padding: 0; }
.main .title > span:nth-child(2) { margin-left: 1.55em; }
.main .title > span:nth-child(3) { margin-left: 0.7em; color: var(--main); }
.main .title span span { position: relative; display: block; overflow: visible; height: auto; padding: 0 0.12em 0.06em 0; clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(0.77, 0, 0.175, 1); }
.main .title > span:nth-child(1) span { transition-delay: 0.7s; }
.main .title > span:nth-child(2) span { transition-delay: 0.85s; }
.main .title > span:nth-child(3) span { transition-delay: 1s; }
body.animation-ready .main .title span span { clip-path: inset(0 -10% 0 0); }
@media screen and (max-width: 767px) {
	.main .title { left: 7%; top: 46%; width: auto; font-size: 11.2vw; }
	.main .title > span { margin: 0; }
}

/* FV の小さなバナー（右下） */
@media screen and (min-width: 768px) { .main-banner { display: flex; gap: 12px; } }
.main-banner .mb { position: relative; display: block; overflow: hidden; width: 216px; height: 92px; border-radius: var(--r-card); clip-path: var(--cut-sm); background: var(--ink); color: #fff; }
.main-banner .mb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; transition: transform 0.5s ease; }
.main-banner .mb span { position: absolute; left: 16px; bottom: 13px; font-size: 14px; line-height: 1.25; }
.main-banner .mb em { font-style: normal; font-size: 13px; letter-spacing: 0.06em; }
.main-banner .mb:hover img { transform: scale(1.06); }

/* ========== 本文の書き出し（ver3）：右に縦書きの見出しを載せた青緑の縦の燕尾旗、左に画面の端から出る墨の帯（本文・2段）
   元の「赤い札と水色の札を中央付近に上下に重ね、見出し→本文の順に載せる」骨組みをやめた（大串FB『そのスクロールしたときの画面が元と似過ぎかも』）。
   紙片が弧を描いて飛び、行き過ぎて止まり、旗と帯に組み上がって文字が入る流れ（1.3秒）は保つ。縦書きは右から左へ読むので、見出し（右）→本文（左）の順に目が流れる ========== */
.beginning { padding: 128px 0 200px 0; }
.beginning .wrapper { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; max-width: none; margin: 0; padding: 0; }
.beginning h2 { grid-column: 2; grid-row: 1; position: relative; display: block; margin: 0 max(64px, calc((100vw - 1240px) / 2)) 0 0; padding: 52px 44px 108px 44px; writing-mode: vertical-rl; font-size: 60px; line-height: 1.62; font-weight: 700; letter-spacing: 0.1em; }
.beginning h2 .tcy { text-orientation: upright; letter-spacing: 0.02em; }
.beginning .plate { position: absolute; inset: 0; z-index: 0; display: block; }
.beginning .tx { position: relative; display: block; }
/* 札は紙片が飛んできて伸びたもの＝別の動きで開かない。見える・見えないは top.js が紙片の到着に合わせて決める */
.beginning h2 .plate { background: var(--main); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 64px), 0 100%); opacity: 0; }
.beginning .lead { grid-column: 1; grid-row: 1; position: relative; margin: 128px 72px 0 0; padding: 74px 88px 82px max(60px, calc((100vw - 1240px) / 2 + 20px)); max-width: none; font-size: 17px; line-height: 2.2; font-weight: 500; }
.beginning .lead .tx { columns: 2; column-gap: 76px; }
.beginning .lead .plate { background: var(--sub); clip-path: polygon(0 0, calc(100% - 80px) 0, 100% 80px, 100% 100%, 0 100%, 0 50%); opacity: 0; }
.beginning .lead p { margin: 0 0 1em 0; break-inside: avoid; }
.beginning .lead p.en { margin-top: 1.4em; font-style: italic; font-weight: 700; font-size: 19px; letter-spacing: 0.02em; }
.beginning .lead .tx { opacity: 0; transform: translateY(14px); transition: all 0.7s ease 0.9s; }
.beginning h2 .tx { opacity: 0; transform: translateY(10px); transition: all 0.6s ease 0.7s; }
body.change-content .beginning .tx { opacity: 1; transform: none; }
@media screen and (min-width: 768px) and (max-width: 1100px) {
	.beginning .lead .tx { columns: 1; }
}
@media screen and (max-width: 767px) {
	.beginning { padding: 24vw 0 22vw 0; }
	.beginning .wrapper { display: block; }
	.beginning h2 { width: fit-content; margin: 0 6vw 0 auto; padding: 7vw 6vw 17vw 6vw; font-size: 7.7vw; line-height: 1.6; }
	.beginning h2 .plate { clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9vw), 0 100%); }
	.beginning .lead { margin: 12vw 6vw 0 0; padding: 10vw 7vw 11vw 7vw; font-size: 3.75vw; line-height: 2.2; }
	.beginning .lead .tx { columns: 1; }
	.beginning .lead .plate { clip-path: polygon(0 0, calc(100% - 11vw) 0, 100% 11vw, 100% 100%, 0 100%, 0 50%); }
	.beginning .lead p.en { font-size: 4vw; }
}

/* ========== 航跡の線 ========== */
.sections { position: relative; }
.wake-line { position: absolute; top: 0; left: 0; width: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.wake-line path { fill: none; stroke-linecap: round; }
.wake-line .wake-under { stroke: rgba(29, 35, 38, 0.16); stroke-width: 2; stroke-dasharray: 1 11; }
.wake-line .wake-path { stroke: var(--sub); stroke-width: 3; transition: stroke-dashoffset 0.25s linear; }
.section, .section-banner { z-index: 1; }

/* ========== セクションの見出し：国際信号旗 ========== */
.section .sec-flag { display: flex; align-items: center; gap: 12px; margin: 0 0 20px 0; }
.section .sec-flag img { width: 52px; height: auto; transform: rotate(-4deg); }
.section .sec-flag span { font-size: 11px; letter-spacing: 0.09em; line-height: 1.36; color: var(--ink); }
.section-business .sec-flag { justify-content: flex-end; }
.section-culture .sec-flag, .section-recruit .sec-flag { justify-content: center; }
.section .section-header h2 { line-height: 1.06; letter-spacing: -0.01em; }
.section .section-header h3 { display: inline-flex; align-items: center; gap: 10px; margin: 14px 0 26px 0; }
.section .section-header h3::before { content: ""; width: 26px; height: 8px; background: url('/demos/mio-recruit/assets/svg/ornament-line.svg') left center/100% 100% no-repeat; }
@media screen and (max-width: 767px) {
	.section .sec-flag { gap: 2.6vw; margin: 0 0 3.4vw 0; }
	.section .sec-flag img { width: 11vw; }
	.section .sec-flag span { font-size: 14px; letter-spacing: 0.07em; }
	.section .section-header h2 { font-size: 11vw; }
	.section .section-header h3 { margin: 2.4vw 0 3.6vw 0; }
	.section-recruit .sec-flag { justify-content: flex-start; }
}

/* ========== カード：鋼板を切ったように、左上の角を落とす ========== */
.section .section-menu .thumb { border-radius: var(--r-card); clip-path: var(--cut); background: #dcdfdf; }
.section-menu .thumb > span { aspect-ratio: 1 / 1; overflow: hidden; }
.section-menu .thumb > span img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.section-menu .box:hover .thumb > span img { transform: scale(1.05); }
.section-menu .thumb::after { content: ""; position: absolute; top: 0; right: 0; width: 46px; height: 34px; background: var(--main); clip-path: polygon(0 0, 100% 0, 100% 100%, 72% 50%); transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 2; }
.section-menu .box:hover .thumb::after { transform: none; }
.section-menu .title { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin: 16px 0 0 4px; font-size: 19px; text-align: left; }
.section-menu .title::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; background: var(--sub); clip-path: polygon(0 0, 100% 50%, 0 100%); }
@media screen and (max-width: 767px) {
	.section-menu .thumb { clip-path: var(--cut-sp); }
	.section-menu .title { margin: 3vw 0 0 1vw; font-size: 4.2vw; gap: 2vw; }
}

/* 絵のカード（Movie・Special）：白い紙に切り紙と大きな見出し */
.gcard { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--paper); text-align: left; }
.gcard em { position: absolute; top: 26px; left: 28px; padding: 5px 10px 5px 9px; background: var(--ink); color: #fff; font-style: normal; font-size: 11px; letter-spacing: 0.1em; line-height: 1; clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%); padding-right: 16px; }
.gcard b { position: absolute; top: 66px; left: 28px; font-size: 26px; line-height: 1.38; font-weight: 700; letter-spacing: 0.04em; color: var(--ink); }
.section-menu .thumb .gcard img { position: absolute; inset: auto -6% -4% auto; width: 62%; height: auto; object-fit: contain; }
.section-menu .thumb .gcard-whats img { width: 70%; right: 8%; bottom: 10%; transform: rotate(-5deg); }
.section-menu .thumb .gcard-love img { width: 74%; right: -4%; bottom: 2%; }
.gcard-love b { color: var(--main); }
@media screen and (max-width: 767px) {
	.gcard em { top: 5vw; left: 5vw; font-size: 11px; }
	.gcard b { top: 13vw; left: 5vw; font-size: 22px; }
}
/* 社員4人のカード */
.qcard { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; aspect-ratio: 1 / 1; background: var(--paper); }
.section-menu .thumb .qcard img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; border-radius: var(--r-img); }
.qcard em { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-3deg); padding: 10px 18px 10px 16px; background: #fff; color: var(--ink); font-style: normal; font-size: 18px; letter-spacing: 0.02em; white-space: nowrap; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%); padding-right: 26px; }

/* 矢印：進む向きを指す燕尾旗 */
.ctr { gap: 14px; }
.section .ctr a, .ctr a { width: 58px; height: 46px; border: 0; border-radius: var(--r-btn); background: var(--ink); color: #fff; font-size: 15px; }
.section .ctr .prev { clip-path: var(--cut-prev); padding-right: 8px; background: #fff; color: var(--ink); }
.section .ctr .next { clip-path: var(--cut-next); padding-left: 8px; }
.os-pc .section .ctr a:hover, .ctr a:hover { background: var(--main); color: #fff; }
@media screen and (max-width: 767px) {
	.ctr a { width: 13vw; height: 10.4vw; font-size: 3.6vw; }
}

/* ========== 大きなバナー2枚 ========== */
.section-banner a.bn { position: relative; display: block; overflow: hidden; width: 453px; max-width: 100%; aspect-ratio: 453 / 210; border-radius: var(--r-card); clip-path: var(--cut); background: var(--ink); color: #fff; }
.section-banner .bn-img { position: absolute; inset: 0; }
.section-banner .bn-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.62; transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s; }
.section-banner a.bn:hover img { opacity: 0.5; transform: scale(1.05); }
.section-banner .bn-tx { position: absolute; left: 30px; bottom: 26px; right: 30px; }
.section-banner .bn-tx em { display: block; margin: 0 0 8px 0; font-style: normal; font-size: 13px; letter-spacing: 0.12em; color: #fff; }
.section-banner .bn-tx b { display: block; font-size: 26px; line-height: 1.4; font-weight: 700; letter-spacing: 0.04em; }
.section-banner .bn-zero .bn-tx em::before { content: ""; display: inline-block; width: 18px; height: 12px; margin: 0 8px 0 0; background: url('/demos/mio-recruit/assets/svg/flag-c.svg') center/cover; vertical-align: -1px; }
.section-banner .bn-elec .bn-tx em::before { content: ""; display: inline-block; width: 18px; height: 12px; margin: 0 8px 0 0; background: url('/demos/mio-recruit/assets/svg/flag-w.svg') center/cover; vertical-align: -1px; }
@media screen and (max-width: 767px) {
	.section-banner a.bn { width: 100%; clip-path: var(--cut-sp); }
	.section-banner .bn-tx { left: 5vw; bottom: 5vw; }
	.section-banner .bn-tx em { font-size: 2.8vw; }
	.section-banner .bn-tx b { font-size: 5.6vw; }
}

/* ========== 各セクションの切り紙（ver3：各セクション1つだけ＝役割のあるものだけ残す） ==========
   Welcome＝MIO の切り文字／Business＝クレーンのフック／Meet＝拡声器と吹き出し／Culture＝浮き輪とマグ／Recruit＝旗5枚の旗列 */
.section .parts img { display: block; width: 100%; height: auto; }
.parts-letters { top: auto; bottom: -70px; right: 50%; left: auto; margin: 0 330px 0 0; width: 210px; transform: rotate(-4deg); z-index: 2; }
/* 航跡の線が文字の隙間を通って M から線が飛び出して見えないよう、切り文字の裏を地の色で埋める（線は文字の裏をくぐる） */
.parts-letters img { background: var(--ground); }
.parts-hook { top: -150px; left: 50%; margin-left: 420px; width: 190px; transform: rotate(6deg); }
.parts-mega { top: -40px; right: 50%; margin-right: 360px; width: 250px; transform: rotate(-3deg); }
@media screen and (max-width: 767px) {
	.parts-letters { top: -14vw; bottom: auto; right: 4vw; margin: 0; width: 36vw; }
	.parts-hook { top: -24vw; left: 4vw; right: auto; margin: 0; width: 24vw; }
	.parts-mega { top: -14vw; right: 4vw; margin: 0; width: 38vw; }
}

/* ========== Recruit の2つの箱 ========== */
.section-recruit .section-menu .block .box { position: relative; height: 150px; border-radius: var(--r-card); clip-path: var(--cut); background: #fff; }
.section-recruit .section-menu .block .box span.en { margin: 10px 0 0 0; font-size: 14px; line-height: 1.36; color: var(--sub); }
.section-recruit .section-menu .block .box::after { content: ""; position: absolute; right: 26px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: currentColor; -webkit-mask: var(--icon-thin-next) center/contain no-repeat; mask: var(--icon-thin-next) center/contain no-repeat; }
.section-recruit .section-menu .block a.box:hover { background: var(--ink); color: #fff; }
.section-recruit .section-menu .block a.box:hover span.en { color: #fff; }
@media screen and (max-width: 767px) {
	.section-recruit .section-menu .block .box { height: 26vw; clip-path: var(--cut-sp); }
}


/* ========== FV（ver3） ========== */
/* News：航跡の帯（墨）に重なっても読めるよう、地の色の札に載せる・文字は15px */
@media screen and (min-width: 768px) {
	.main-news { left: 28px; right: auto; bottom: 22px; max-width: 560px; padding: 14px 22px 12px 20px; background: rgba(241, 244, 243, 0.94); clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px); }
	.main-news h3 { margin: 0 0 8px 0; }
	.main-news dl { font-family: var(--font-ja); }
	.main-news .slider .slick-dots { margin: 6px 0 0 -5px; }
}

/* ========== 余白（ver3）：かたまりの間を約1.4倍に（大串FB『もうちょい余白感欲しい』） ========== */
.section .sec-flag { margin: 0 0 28px 0; }
.section .section-header h3 { margin: 18px 0 36px 0; }
.section .section-header .lead p + p { margin-top: 0.2em; }
.section-menu .title { margin-top: 22px; }
@media screen and (min-width: 980px) {
	/* 特集バナー：中央に2枚並べる元の形をやめ、大小2枚を段違いに置く */
	.section-banner { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 430px); justify-content: center; align-items: start; gap: 0 96px; padding: 150px 50px 60px 50px; }
	.section-banner > div:nth-child(2) { margin-top: 150px; }
	.section-banner a.bn { width: 100%; }
	.section-banner > div:nth-child(1) a.bn { aspect-ratio: 600 / 300; }
	/* Welcome・Business・Meet：上下に広い間（元は0） */
	.sections .section { margin-top: 210px; }
	.sections .section .section-container { min-height: 640px; }
	/* カード：元の正方形をやめ、縦長（4:5）を1枚ずつ上下にずらして並べる＝航跡の波のような段 */
	.sections .section .section-menu-slider-pc .block { width: 380px; }
	.sections .section .section-menu-slider-pc .thumb > span { aspect-ratio: 4 / 5; }
	.sections .section .section-menu-slider-pc .slick-slide:nth-child(even) .box { margin-top: 64px; }
	.sections .section .section-menu-slider-pc .slick-track { padding-bottom: 64px; }
	/* Meet Us：見出しを上・本文を右に置き、カードはその下で画面の端まで流す（元の「見出しの横にスライダー」をやめる） */
	.sections .section-meet .section-container { display: block; min-height: 0; }
	.sections .section-meet .section-header { left: auto; padding: 0; display: grid; grid-template-columns: auto minmax(0, 440px); grid-template-areas: "flag flag" "h2 lead" "h3 lead"; column-gap: 120px; align-items: end; justify-content: space-between; }
	.sections .section-meet .sec-flag { grid-area: flag; }
	.sections .section-meet .section-header h2 { grid-area: h2; }
	.sections .section-meet .section-header h3 { grid-area: h3; margin-bottom: 0; }
	.sections .section-meet .section-header .lead { grid-area: lead; align-self: end; padding-bottom: 4px; }
	.sections .section.section-meet .section-menu-wrap { position: relative; top: auto; left: auto; right: auto; transform: none; margin: 84px 0 0 max(50px, calc((100vw - 1220px) / 2 + 50px)); }
	.sections .section-meet .ctr-pc { justify-content: flex-start; }
	.parts-mega { top: -150px; right: auto; left: 50%; margin: 0 0 0 330px; }
	/* Culture：中央寄せの3枚並び（元）をやめ、左に見出し・右に大1＋小2の写真 */
	.section-culture { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); column-gap: 96px; align-items: center; max-width: 1220px; margin: 230px auto 0 auto; padding: 0 50px; text-align: left; }
	.section-culture .section-container { max-width: none; margin: 0; padding: 0; }
	.section-culture .sec-flag { justify-content: flex-start; }
	.section-culture .section-header .lead p br { display: none; }
	.section-culture .section-menu-pc { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto; gap: 28px 28px; margin: 0; padding: 0; }
	.section-culture .section-menu-pc .block { width: auto; margin: 0; padding: 0; }
	.section-culture .section-menu-pc .block:first-child { grid-row: 1 / span 2; }
	.section-culture .section-menu-pc .block:first-child .thumb > span { aspect-ratio: 4 / 5; }
	.section-culture .section-menu-pc .block:not(:first-child) .thumb > span { aspect-ratio: 4 / 3; }
	.section-culture .section-menu-outer { grid-column: 1 / -1; }
	.section-culture .parts-pc { top: -130px; left: -20px; margin: 0; width: 240px; }
	/* Recruit：中央の見出し＋白い箱2つ（元）をやめ、左に見出し・右に横長の行2本 */
	.section-recruit { margin: 230px 0 0 0; padding: 0 0 200px 0; text-align: left; }
	.section-recruit .section-container { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); column-gap: 96px; align-items: center; padding: 0 50px; }
	.section-recruit .sec-flag { justify-content: flex-start; }
	.section-recruit .section-header { padding-top: 0; }
	.section-recruit .section-menu { display: block; margin: 0; }
	.section-recruit .section-menu .block { width: auto; margin: 0 0 24px 0; padding: 0; text-align: left; }
	.section-recruit .section-menu .block .box { flex-direction: row; justify-content: flex-start; align-items: center; gap: 28px; height: 128px; padding: 0 90px 0 48px; }
	.section-recruit .section-menu .block .box span.en { margin: 0; }
	.section-recruit .parts-pc { top: -120px; left: -10px; margin: 0; width: 300px; }
}
@media screen and (max-width: 767px) {
	.section-banner { padding: 26vw 25px 4vw 25px; }
	.section-banner > div { margin-bottom: 14vw; }
	.section { margin-top: 36vw; }
	.section-culture { margin-top: 36vw; }
	.section-recruit { margin-top: 34vw; padding-bottom: 16vw; }
	.section .section-menu-slider-sp { margin-top: 10vw; }
	.section .sec-flag { margin-bottom: 4.4vw; }
	.section .section-header h3 { margin: 3.4vw 0 5vw 0; }
	.section-culture .parts-sp { top: -24vw; left: auto; right: 4vw; width: 40vw; }
	.section-recruit .parts-sp { top: -22vw; left: auto; right: 4vw; width: 46vw; }
	.section-recruit .section-header { padding-top: 0; }
	.section-recruit .section-menu .block .box { flex-direction: row; justify-content: flex-start; align-items: center; gap: 4vw; padding: 0 12vw 0 6vw; }
	.section-recruit .section-menu .block .box span.en { margin: 0; }
	.main-scroll { left: 22vw; }
	.main-banner { display: flex; flex-direction: column; gap: 8px; }
	.main-banner .mb { width: 42vw; height: 15vw; }
	.main-banner .mb span { left: 3vw; bottom: 2.4vw; font-size: 3vw; }
	.main-banner .mb em { font-size: 2.7vw; }
}

/* ========== 見出しの型をセクションごとに変える（ver3・原則 J-038・J-040＝文字の仕様は統一・型は変える） ==========
   Welcome＝特大・左（見出しの横にカード）／Business＝横長の写真の帯に重ねる（中央）／Meet＝見出し上・本文右の上下組み／Culture＝英字見出しを縦組み／Recruit＝FV と同じ斜体の英字で締める */
.biz-band { display: none; }
@media screen and (min-width: 980px) {
	/* Business：港の写真の帯（右端は航跡の線を見せるため画面の9割で止め、右上を落とす）に見出しを白で重ね、カードを帯の下端に食い込ませる */
	.sections .section.section-business .section-container { position: relative; display: block; max-width: none; min-height: 0; margin: 0; padding: 120px 50px 230px 50px; width: 90%; }
	.section-business .biz-band { display: block; position: absolute; inset: 0; overflow: hidden; clip-path: polygon(0 0, calc(100% - 90px) 0, 100% 90px, 100% 100%, 0 100%); }
	.section-business .biz-band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
	.section-business .biz-band::after { content: ""; position: absolute; inset: 0; background: rgba(29, 35, 38, 0.42); }
	.sections .section.section-business .section-header { left: auto; padding: 0; text-align: center; color: #fff; z-index: 1; }
	.section-business .sec-flag { justify-content: center; }
	.section-business .sec-flag span { color: #fff; }
	.section-business .section-header h3::before { filter: brightness(0) invert(1); }
	.sections .section.section-business .section-menu-wrap { position: relative; top: auto; left: auto; right: auto; transform: none; z-index: 2; margin: -170px 0 0 max(50px, calc((100vw - 1220px) / 2 + 50px)); }
	.sections .section.section-business .ctr-pc { justify-content: flex-start; }
	.section-business .parts-hook { top: -110px; left: auto; right: 6%; margin: 0; }
	/* Culture：英字の見出しを縦組みにして左に立て、旗・和文・本文をその右に */
	.section-culture { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); }
	.section-culture .section-header { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "h2 flag" "h2 h3" "h2 lead"; column-gap: 44px; align-items: start; }
	.section-culture .section-header h2 { grid-area: h2; writing-mode: vertical-rl; line-height: 1; margin: 0; }
	.section-culture .section-header .sec-flag { grid-area: flag; margin-top: 6px; }
	.section-culture .section-header h3 { grid-area: h3; margin-top: 0; }
	.section-culture .section-header .lead { grid-area: lead; }
	.section-culture .section-header .lead p br { display: inline; }
	/* Recruit：FV の英字と同じ斜体で締める */
	.section-recruit .section-header h2 { font-style: italic; letter-spacing: -0.01em; }
}
@media screen and (max-width: 979px) {
	.sections .section.section-business .section-container { position: relative; padding-top: 14vw; padding-bottom: 14vw; }
	.section-business .biz-band { display: block; position: absolute; inset: 0; overflow: hidden; clip-path: polygon(0 0, calc(100% - 12vw) 0, 100% 12vw, 100% 100%, 0 100%); }
	.section-business .biz-band img { width: 100%; height: 100%; object-fit: cover; }
	.section-business .biz-band::after { content: ""; position: absolute; inset: 0; background: rgba(29, 35, 38, 0.45); }
	.section-business .section-header { text-align: center; color: #fff; }
	.section-business .section-header .lead { margin: 0; }
	.section-business .sec-flag { justify-content: center; }
	.section-business .sec-flag span { color: #fff; }
	.section-business .section-header h3::before { filter: brightness(0) invert(1); }
	.section-recruit .section-header h2 { font-style: italic; }
}

/* ニュースの送り点のボタン：ベースの太さ 400（body の 500 を引き継がない） */
.main-news .slider .slick-dots li button, .main-news .slider > button { font-weight: 400; }