@charset "utf-8";
/* mio-welcome.css｜澪重工 Welcome 下層6ページ（3minutes・whats・company・future・sustainability・newdock）の改変
   ・文字の指定（書体・大きさ・太さ・字間・行間）はベースの部品に上書きしない。新しい部品の文字はベースにある段（45・30・22・17・15・14・13・12px／700・500）から選ぶ
   ・形は角丸0・左上を落とした角（var(--cut)）・燕尾旗。丸いボタン・丸い矢印・hover の拡大は使わない */

/* 共通：数字が並ぶ所の注記（1ページ1回） */
.content .sample-note { margin: 18px 0 0 0; text-align: right; font-size: 12px; color: #676c6e; }
.c-whats .list .sample-note { margin: 40px auto 0 auto; padding: 0 20px; max-width: 1120px; }
.c-newdock .sections .sample-note { margin: 0 auto; padding: 0 20px; max-width: 1060px; }

/* 共通：燕尾の小さな札（ボタン・見出しの札） */
.c-whats .list .block .foot a,
.c-whats .stage-index a,
.c-company .year-index a { border-radius: 0; }

/*============================================================
	3minutes：場面6つの映像プレーヤー
*/
.c-3minutes { background-color: var(--paper); }
.c-3minutes .movie .heading h2 span { border-radius: 0; padding-right: 1.5em; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%); }
.mio-reel .screen { position: relative; overflow: hidden; aspect-ratio: 16 / 9; clip-path: var(--cut); background-color: #dcdfdf; }
.mio-reel .scene { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.7s ease; }
.mio-reel .scene.is-active { opacity: 1; z-index: 1; }
.mio-reel .scene img { width: 100%; height: 100%; object-fit: cover; }
.mio-reel .scene figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 34px 30px 34px; background: linear-gradient(to top, rgba(29, 35, 38, 0.5), rgba(29, 35, 38, 0)); color: #fff; }
.mio-reel .scene figcaption em { display: block; font-style: normal; font-size: 13px; letter-spacing: 0.12em; }
.mio-reel .scene figcaption b { display: block; margin: 6px 0 0 0; font-size: 22px; line-height: 1.4; }
.mio-reel .play { position: absolute; top: 24px; right: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 12px 22px 12px 30px; border: 0; background: var(--main); color: #fff; font-size: 13px; letter-spacing: 0.12em; cursor: pointer; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%); }
.mio-reel .play::before { content: ""; width: 10px; height: 12px; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.mio-reel.is-playing .play::before { clip-path: none; width: 10px; height: 10px; }
.mio-reel .bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 5px; background: rgba(255, 255, 255, 0.35); }
.mio-reel .bar i { display: block; width: 0; height: 100%; background: var(--main); }
.mio-reel .chapters { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin: 4px 0 0 0; }
.mio-reel .chapters button { display: block; width: 100%; padding: 14px 14px 16px 16px; border: 0; background: var(--ground); color: var(--ink); text-align: left; cursor: pointer; transition: background-color 0.3s, color 0.3s; }
.mio-reel .chapters em { display: block; font-style: normal; font-size: 13px; color: var(--main); }
.mio-reel .chapters span { display: block; margin: 4px 0 0 0; font-size: 15px; line-height: 1.4; }
.mio-reel .chapters li.is-active button { background: var(--ink); color: #fff; }
.mio-reel .chapters li.is-active em { color: #fff; }
.os-pc .mio-reel .chapters button:hover { background: var(--sub); color: #fff; }
.os-pc .mio-reel .chapters button:hover em { color: #fff; }
.os-pc .mio-reel .play:hover { background: var(--ink); }

.mio-next { padding: 110px 0 130px 0; }
.mio-next .container { max-width: 1000px; }
.mio-next .next-head { display: flex; align-items: center; gap: 14px; font-size: 22px; line-height: 1.4; }
.mio-next .next-head .en { padding: 5px 18px 5px 10px; background: var(--ink); color: #fff; font-size: 13px; letter-spacing: 0.1em; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%); }
.mio-next .next-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 26px 0 0 0; }
.mio-next .next-card { position: relative; display: block; clip-path: var(--cut); background: var(--ground); }
.mio-next .next-card::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); }
.mio-next .next-card:hover::after { transform: none; }
.mio-next .gcard { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; }
.mio-next .gcard em { position: absolute; top: 28px; left: 30px; padding: 5px 16px 5px 9px; background: var(--ink); color: #fff; font-style: normal; font-size: 13px; letter-spacing: 0.1em; line-height: 1; clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%); }
.mio-next .gcard b { position: absolute; top: 70px; left: 30px; font-size: 30px; line-height: 1.38; color: var(--ink); }
.mio-next .gcard img { position: absolute; right: 5%; bottom: 9%; width: 44%; height: auto; }
.mio-next .gcard-dock img { width: 40%; right: 8%; bottom: 14%; }
@media screen and (max-width: 767px) {
	.mio-reel .screen { clip-path: var(--cut-sm); }
	.mio-reel .scene figcaption { padding: 40px 16px 16px 16px; }
	.mio-reel .scene figcaption em { font-size: 12px; }
	.mio-reel .scene figcaption b { font-size: 15px; }
	.mio-reel .play { top: 12px; padding: 8px 14px 8px 22px; font-size: 12px; }
	.mio-reel .chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mio-reel .chapters button { padding: 10px 10px 12px 12px; }
	.mio-reel .chapters span { font-size: 14px; }
	.mio-next { padding: 60px 0 70px 0; }
	.mio-next .container { padding: 0 20px; }
	.mio-next .next-head { font-size: 17px; }
	.mio-next .next-list { grid-template-columns: 1fr; gap: 14px; }
	.mio-next .gcard em { top: 18px; left: 18px; font-size: 12px; }
	.mio-next .gcard b { top: 50px; left: 18px; font-size: 22px; }
}

/*============================================================
	whats：船の一生の9場面
*/
.c-whats { background-color: var(--paper); }
.c-whats .main { background-color: var(--ground); }
.c-whats .main .detail .symbol img { width: 440px; max-width: 100%; }
.c-whats .stage-index { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 44px auto 0 auto; padding: 0 20px; }
.c-whats .stage-index a { display: flex; align-items: center; justify-content: center; width: 58px; height: 40px; background: #fff; color: var(--ink); font-size: 14px; clip-path: var(--cut-tab); transition: background-color 0.3s, color 0.3s; }
.os-pc .c-whats .stage-index a:hover { background: var(--ink); color: #fff; }

.c-whats .list { padding: 80px 0 140px 0; }
.c-whats .list .container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: start; max-width: 1120px; }
.c-whats .list .block { padding: 0; scroll-margin-top: 120px; }
.c-whats .list .block::before { display: none; }
.c-whats .list .block:nth-child(3n+2) { transform: translateY(80px); }
.c-whats .list .block .in { min-height: 420px; padding: 34px 30px 32px 30px; background: var(--ground); clip-path: var(--cut); text-align: left; }
.c-whats .list .block:nth-child(3n+2) .in { background: #e4ecea; }
.c-whats .list .block .ill { position: absolute; top: 20px; right: 16px; width: 46%; pointer-events: none; }
.c-whats .list .block h2,
.modal-whats-window .block h2 { text-align: left; }
.c-whats .list .block h2 span,
.modal-whats-window .block h2 span { color: var(--main); }
.c-whats .list .block h2 small,
.modal-whats-window .block h2 small { display: block; margin: 8px 0 0 0; font-size: 15px; line-height: 1.4; }
.c-whats .list .block h2::after,
.modal-whats-window .block h2::after { margin: 14px 0 0 0; width: 26px; height: 4px; background-color: var(--main) !important; }
.c-whats .list .block:nth-child(even) h2::after,
.modal-whats-window .frame:nth-child(even) .block h2::after { background-color: var(--sub) !important; }
.c-whats .list .block .lead { margin: 0; padding: 22px 0 26px 0; max-width: none; text-align: left; }
.c-whats .list .block .foot a { margin: 0; width: 150px; border: 0; background: var(--ink); color: #fff; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
.os-pc .c-whats .list .block .foot a:hover { background-color: var(--main); }
/* モーダル：角を落とした白い紙・上に青緑の帯 */
.modal-whats-window .frame { border: 0; border-radius: 0; box-shadow: none !important; clip-path: var(--cut); background: linear-gradient(var(--main), var(--main)) left top / 100% 8px no-repeat, #fff; }
.modal-whats-window .frame:nth-child(even) { background: linear-gradient(var(--sub), var(--sub)) left top / 100% 8px no-repeat, #fff; }
.modal-whats-window .block h2 { padding: 0 0 0 4px; }
.modal-whats-window .block .image { overflow: hidden; clip-path: var(--cut-sm); }
.modal-whats-window .block .image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.modal-whats-window .block .detail::before { display: none; }
@media screen and (max-width: 979px) {
	.c-whats .list .container { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
	.c-whats .list .block:nth-child(3n+2) { transform: none; }
	.c-whats .list .block:nth-child(even) { transform: translateY(60px); }
	.c-whats .list .block:nth-child(3n+2) .in { background: var(--ground); }
	.c-whats .list .block:nth-child(even) .in { background: #e4ecea; }
}
@media screen and (max-width: 767px) {
	.c-whats .main .detail .head .symbol { flex-basis: 120px; }
	.c-whats .stage-index { margin: 28px auto 0 auto; gap: 4px; }
	.c-whats .stage-index a { width: 15vw; height: 9vw; font-size: 13px; }
	.c-whats .list .block .in { min-height: 0; padding: 26px 20px 24px 22px; clip-path: var(--cut-sm); }
	.c-whats .list .block .ill { width: 42%; top: 14px; right: 10px; }
	.modal-whats-window .frame { clip-path: var(--cut-sm); }
}
@media screen and (max-width: 680px) {
	.c-whats .list { padding: 40px 0 60px 0; }
	.c-whats .list .container { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 0 20px; }
	.c-whats .list .block:nth-child(even) { transform: none; }
}

/*============================================================
	company：数字の札・100年の年表
*/
.c-company .info .views > div { display: flex; flex-direction: column; gap: 20px; }
.c-company .info .block { margin: 0; border-radius: 0; clip-path: var(--cut); background-color: #fff; text-align: left; padding: 8px 32px 34px 32px; }
.c-company .info .block h3 { display: flex; align-items: center; gap: 10px; }
.c-company .info .block h3::before { content: ""; flex: none; width: 10px; height: 12px; background: var(--main); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.c-company .info .block02 { background-color: var(--sub); color: #fff; }
.c-company .info .block02 h3::before { background: #fff; }
.c-company .info .block07 { background-color: var(--main); color: #fff; }
.c-company .info .block07 h3::before { background: #fff; }
.c-company .info .block07 .note { color: #fff; }
.c-company .info .block .logo { margin: 0; padding: 22px 0 0 0; max-width: 220px; }
.c-company .info .block .portrait { margin: 0; padding: 20px 0 12px 0; max-width: none; }
.c-company .info .block .portrait img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; clip-path: var(--cut-sm); }
.c-company .info .block .icon { margin: 0 0 0 auto; padding: 18px 0 0 0; max-width: 160px; }
.c-company .info .block .ratio { padding: 18px 0 0 0; }
.c-company .info .block .ratio-bar { display: flex; height: 46px; clip-path: var(--cut-sm); }
.c-company .info .block .ratio-bar i { display: block; flex-shrink: 0; height: 100%; }
.c-company .info .block .r1 { background: var(--main); }
.c-company .info .block .r2 { background: var(--sub); }
.c-company .info .block .r3 { background: var(--ink); }
.c-company .info .block .r4 { background: #8fbcbd; }
.c-company .info .block .ratio-legend { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 18px 0 0 0; font-size: 15px; }
.c-company .info .block .ratio-legend li { display: flex; align-items: center; gap: 8px; }
.c-company .info .block .ratio-legend li i { flex: none; width: 12px; height: 12px; }
.c-company .info .block .ratio-legend b { margin-left: auto; font-size: 22px; }
.c-company .info .sample-note { margin-top: 6px; }

.c-company .history .year-index { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 30px 0 0 0; }
.c-company .history .year-index a { display: block; padding: 10px 20px 10px 26px; background: #fff; color: var(--ink); font-size: 14px; clip-path: var(--cut-tab); transition: background-color 0.3s, color 0.3s; }
.os-pc .c-company .history .year-index a:hover { background: var(--ink); color: #fff; }
.c-company .history .list { position: relative; border-radius: 0; clip-path: var(--cut); padding: 20px 48px; }
.c-company .history .list .block { position: relative; padding: 40px 0 40px 0; scroll-margin-top: 120px; }
.c-company .history .list .block .year { position: relative; padding: 0 8px 0 34px; }
.c-company .history .list .block .year::before { content: ""; position: absolute; top: 4px; left: 0; width: 16px; height: 20px; background: var(--main); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); }
.c-company .history .list .block:nth-child(even) .year::before { background: var(--sub); }
.c-company .history .list .block .year dt { color: var(--main); }
.c-company .history .list .block .year dt::after { width: 26px; height: 4px; background-color: var(--sub); }
.c-company .history .list .block .image ul li { flex: none; }
.c-company .history .list .block .image .b01 { width: 300px; }
.c-company .history .list .block .image .b02 { width: 170px; }
.c-company .history .list .block .image img { width: 100%; clip-path: var(--cut-sm); background-color: #dcdfdf; }
@media screen and (min-width: 980px) {
	/* 偶数の年は、写真を本文の右に置いて並びを変える */
	.c-company .history .list .block:nth-child(even) .detail { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 34px; align-items: start; }
	.c-company .history .list .block:nth-child(even) .image { margin: 0; }
	.c-company .history .list .block:nth-child(even) .image ul { flex-direction: column; gap: 14px; }
	.c-company .history .list .block:nth-child(even) .image .b01 { width: 260px; }
	.c-company .history .list .block:nth-child(even) .image .b02 { width: 170px; }
}
@media screen and (max-width: 767px) {
	.c-company .info .views > div { gap: 14px; }
	.c-company .info .block { padding: 6px 22px 26px 22px; clip-path: var(--cut-sm); }
	.c-company .history .year-index { justify-content: flex-start; gap: 4px; }
	.c-company .history .year-index a { padding: 8px 12px 8px 18px; font-size: 13px; }
	.c-company .history .list { padding: 6px 20px; clip-path: var(--cut-sm); }
	.c-company .history .list .block { padding: 28px 0; }
	.c-company .history .list .block .image .b01,
	.c-company .history .list .block .image .b02 { width: 100%; }
}

/*============================================================
	future：3段の流れ・船を囲む4つ・4つの航路
*/
.c-future .worth .list h4 { border-radius: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%); }
.c-future .worth .list h4:nth-of-type(2) { background-color: #e4ecea; }
.c-future .flow .block .frame { border-radius: 0; clip-path: var(--cut); }
.c-future .flow .block .heading { top: 0; }
.c-future .flow .block .frame { padding-top: 96px; }
.c-future .flow .block .heading h2 { border-radius: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 50%, 100% 100%, 0 100%, 22px 50%); }
.c-future .flow .block02 .heading h2 { background-color: var(--main); }
.c-future .flow .block03 .heading h2 { background-color: var(--sub); }
.c-future .flow .arrow { width: 64px; height: 44px; border: 0; background: var(--main); clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 54%, 50% 100%, 0 54%); }
.c-future .flow .block01 .list li span { border: 0; border-radius: 0; background: var(--ground); clip-path: var(--cut-sm); }
.c-future .flow .block .detail .subhead { border: 0; background: var(--ground); clip-path: var(--cut-sm); }
.c-future .flow .block02 .hub { display: grid; grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 14px 26px; margin: 10px auto 0 auto; max-width: 820px; }
.c-future .flow .block02 .hub img { grid-column: 2; grid-row: 1 / span 2; width: 100%; }
.c-future .flow .block02 .hub span { padding: 12px 22px; background: var(--ink); color: #fff; font-size: 20px; line-height: 1.3; }
.c-future .flow .block02 .hub .h1, .c-future .flow .block02 .hub .h3 { grid-column: 1; justify-self: end; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%); padding-left: 30px; }
.c-future .flow .block02 .hub .h2, .c-future .flow .block02 .hub .h4 { grid-column: 3; justify-self: start; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%); padding-right: 30px; }
.c-future .flow .block02 .hub .h1 { grid-row: 1; }
.c-future .flow .block02 .hub .h2 { grid-row: 1; background: var(--main); }
.c-future .flow .block02 .hub .h3 { grid-row: 2; background: var(--main); }
.c-future .flow .block02 .hub .h4 { grid-row: 2; }
.c-future .flow .block03 .list li .box { border-radius: 0; clip-path: var(--cut-sm); }
.c-future .flow .block03 .list li .box::before { top: 0; left: auto; right: 0; width: 8px; height: 100%; border-width: 0; background: var(--main); }
.c-future .flow .block03 .list li:nth-child(2) .box::before, .c-future .flow .block03 .list li:nth-child(3) .box::before { background: var(--sub); }
.c-future .keyword .list .block { border-radius: 0; clip-path: var(--cut); gap: 40px; }
.c-future .keyword .list .block .num { top: 26px; left: 40px; width: auto; color: var(--main); }
.c-future .keyword .list .block .detail { padding-top: 60px; }
.c-future .keyword .list .block .image { padding: 0; }
.c-future .keyword .list .block .image img,
.c-future .keyword .list .block01 .image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; clip-path: var(--cut-sm); }
@media screen and (min-width: 980px) {
	/* 偶数の航路は写真を左に・幅も変えて、同じ並びを繰り返さない */
	.c-future .keyword .list .block:nth-child(even) { flex-direction: row-reverse; }
	.c-future .keyword .list .block:nth-child(even) .num { left: auto; right: 40px; }
	.c-future .keyword .list .block:nth-child(even) .image { flex-basis: 42%; }
	.c-future .keyword .list .block:nth-child(even) .detail { flex-basis: 58%; }
	.c-future .keyword .list { margin-top: 50px; }
	.c-future .keyword .list .block:nth-child(odd) { margin-right: 60px; }
	.c-future .keyword .list .block:nth-child(even) { margin-left: 60px; }
}
@media screen and (max-width: 979px) {
	.c-future .flow .block02 .hub { grid-template-columns: 1fr 1fr; }
	.c-future .flow .block02 .hub img { grid-column: 1 / span 2; grid-row: 1; max-width: 300px; margin: 0 auto; }
	.c-future .flow .block02 .hub span { justify-self: stretch !important; text-align: center; }
	.c-future .flow .block02 .hub .h1 { grid-column: 1; grid-row: 2; }
	.c-future .flow .block02 .hub .h2 { grid-column: 2; grid-row: 2; }
	.c-future .flow .block02 .hub .h3 { grid-column: 1; grid-row: 3; }
	.c-future .flow .block02 .hub .h4 { grid-column: 2; grid-row: 3; }
}
@media screen and (max-width: 767px) {
	.c-future .flow .block .frame { padding-top: 60px; clip-path: var(--cut-sm); }
	.c-future .flow .arrow { width: 44px; height: 30px; }
	.c-future .flow .block02 .hub { gap: 8px; }
	.c-future .flow .block02 .hub span { padding: 10px 12px; font-size: 14px; }
	.c-future .keyword .list .block { clip-path: var(--cut-sm); padding-top: 30px; }
	.c-future .keyword .list .block .num { top: 18px; left: 20px; }
	.c-future .keyword .list .block .detail { padding-top: 46px; }
}

/*============================================================
	sustainability：3本柱・取り組み5つ・人の章
*/
.c-sustainability .pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 36px auto 0 auto; padding: 0 20px; transition-delay: 0.9s; }
.c-sustainability .pillars li { display: flex; align-items: center; gap: 12px; padding: 12px 34px 12px 16px; background: #fff; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%); }
.c-sustainability .pillars img { width: 34px; height: auto; transform: rotate(-4deg); }
.c-sustainability .pillars b { font-size: 17px; }
.c-sustainability .environment .list .frame { position: relative; height: 100%; border-radius: 0; clip-path: var(--cut); }
.c-sustainability .environment .list .block { display: flex; flex-direction: column; }
.c-sustainability .environment .list .frame .tag { display: inline-block; margin: 0 0 14px 0; padding: 5px 18px 5px 10px; background: var(--ink); color: #fff; font-style: normal; font-size: 13px; letter-spacing: 0.1em; line-height: 1; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%); }
.c-sustainability .environment .list .block01 .frame { background-color: var(--main); color: #fff; }
.c-sustainability .environment .list .block01 .frame .tag { background: #fff; color: var(--ink); }
.c-sustainability .environment .list .block01 .row { display: flex; align-items: flex-end; gap: 24px; }
.c-sustainability .environment .list .block01 .big { flex: none; font-size: 60px; line-height: 1; }
.c-sustainability .environment .list .block01 .big small { font-size: 50%; }
.c-sustainability .environment .list .block02 .image { flex: none; width: 130px; max-width: none; }
.c-sustainability .environment .list .block03 .frame { background-color: var(--sub); color: #fff; }
.c-sustainability .environment .list .block03 .frame .tag { background: var(--main); }
.c-sustainability .environment .list .block03 .row { gap: 34px; align-items: flex-start; }
.c-sustainability .environment .list .block03 .lead { padding: 0; }
.c-sustainability .environment .list .block03 .image { flex: none; width: 44%; max-width: none; }
.c-sustainability .environment .list .block .image img { width: 100%; clip-path: var(--cut-sm); }
.c-sustainability .environment .list .block04 .image img { max-width: none; aspect-ratio: 16 / 9; object-fit: cover; }
.c-sustainability .environment .list .block05 .row { display: block; }
.c-sustainability .environment .list .block05 .lead { padding: 0; }
.c-sustainability .environment .list .block05 .image { margin: 15px 0 0 0; }
.c-sustainability .environment .list .block05 .image img { max-width: none; aspect-ratio: 16 / 9; object-fit: cover; }
.c-sustainability .environment .sample-note { margin-top: 0; }
.c-sustainability .diversity .image span { border-radius: 0; clip-path: var(--cut); }
.c-sustainability .diversity .image img { width: 100%; }
@media screen and (max-width: 979px) {
	.c-sustainability .environment .list .block03 .image { width: 100%; }
}
@media screen and (max-width: 767px) {
	.c-sustainability .pillars { gap: 6px; }
	.c-sustainability .pillars li { padding: 8px 24px 8px 10px; gap: 8px; }
	.c-sustainability .pillars img { width: 26px; }
	.c-sustainability .pillars b { font-size: 15px; }
	.c-sustainability .environment .list .frame { clip-path: var(--cut-sm); }
	.c-sustainability .environment .list .block01 .big { font-size: 50px; }
	.c-sustainability .environment .list .block02 .row { display: flex; gap: 14px; }
	.c-sustainability .environment .list .block02 .image { width: 80px; margin: 0; }
	.c-sustainability .diversity .image span { border-radius: 0; clip-path: var(--cut-sm); }
}

/*============================================================
	newdock（元のクラス名は使わない。元の文字の段：見出し85px→SP50px・本文 SP14px を写す）
*/
.c-newdock .cmn-hero .headline br { display: none; }
.c-newdock .dock-plan { margin: 44px auto 0 auto; padding: 0 20px; max-width: 800px; text-align: left; transition-delay: 0.9s; }
.c-newdock .dock-plan li { display: grid; grid-template-columns: 110px minmax(0, 1fr) 120px; align-items: center; gap: 16px; margin: 0 0 8px 0; font-size: 15px; }
.c-newdock .dock-plan li i { display: block; width: var(--w); height: 24px; background: #c5cfcd; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.c-newdock .dock-plan li.is-new i { background: var(--main); }
.c-newdock .dock-plan li.is-new span, .c-newdock .dock-plan li.is-new b { color: var(--main); }

.c-newdock .sections { padding: 110px 0 100px 0; }
.c-newdock .section { position: relative; margin: 0 0 170px 0; }
.c-newdock .section .container { position: relative; display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 70px; align-items: start; max-width: 1060px; }
.c-newdock .section .detail { position: relative; padding: 20px 0 0 0; }
.c-newdock .section .detail .no { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--main); }
.c-newdock .section .detail .no::before { content: ""; width: 26px; height: 4px; background: var(--main); }
.c-newdock .section .detail .no span { color: #8a9294; }
.c-newdock .section .detail h2 { margin: 12px 0 0 0; font-size: 85px; line-height: 1.1; }
.c-newdock .section .detail .fig { margin: 18px 0 0 0; font-size: 22px; line-height: 1.4; }
.c-newdock .section .detail .fig b { margin: 0 4px; font-size: 45px; line-height: 1; color: var(--main); }
.c-newdock .section .detail .lead { margin: 15px 0 20px 0; }
.c-newdock .section .images { position: relative; }
.c-newdock .section .images span { display: block; overflow: hidden; clip-path: var(--cut); background-color: #dcdfdf; }
.c-newdock .section .images img { width: 100%; height: 100%; object-fit: cover; }
.c-newdock .section .images .image02 { position: absolute; width: 36%; }
.c-newdock .section .images .image02 span { clip-path: var(--cut-sm); }
/* 01：大きな全景を画面の右端まで */
.c-newdock .section01 .images { margin-right: calc((1060px - 100vw) / 2); }
.c-newdock .section01 .images .image01 span { aspect-ratio: 16 / 9; clip-path: polygon(26px 0, 100% 0, 100% 100%, 0 100%, 0 26px); }
.c-newdock .section01 .images .image02 { left: -46px; bottom: -46px; width: 24%; }
/* 02：文と写真を左右入れ替え、小さい写真は右上へ */
.c-newdock .section02 .container { grid-template-columns: minmax(0, 1fr) 400px; }
.c-newdock .section02 .detail { grid-column: 2; grid-row: 1; padding-top: 90px; }
.c-newdock .section02 .images { grid-column: 1; grid-row: 1; margin-right: 40px; }
.c-newdock .section02 .images .image02 { right: -40px; bottom: -50px; width: 26%; }
/* 03：写真を左に寄せて画面の左端まで */
.c-newdock .section03 .images { margin-right: 0; }
.c-newdock .section03 .images .image01 { margin-left: 60px; }
.c-newdock .section03 .images .image02 { left: 0; bottom: -60px; width: 28%; }
/* 04・05：写真1枚を小さめに、横に並べて1段に */
@media screen and (min-width: 980px) {
	.c-newdock .sections { display: flex; flex-wrap: wrap; align-items: flex-start; }
	.c-newdock .sections > * { flex: 0 0 100%; min-width: 0; }
	.c-newdock .sections > .section04, .c-newdock .sections > .section05 { flex: 0 0 50%; margin-bottom: 60px; }
}
.c-newdock .section04 .container, .c-newdock .section05 .container { display: block; max-width: none; padding: 0 40px 0 max(20px, calc((100vw - 1060px) / 2)); }
.c-newdock .section05 .container { padding: 160px max(20px, calc((100vw - 1060px) / 2)) 0 40px; }
.c-newdock .section04 .detail, .c-newdock .section05 .detail { padding: 0 0 26px 0; }
.c-newdock .section04 .detail h2, .c-newdock .section05 .detail h2 { font-size: 85px; }
@media screen and (max-width: 1240px) {
	.c-newdock .section01 .images { margin-right: -20px; }
}
@media screen and (max-width: 979px) {
	.c-newdock .section .container { grid-template-columns: 1fr; gap: 30px; }
	.c-newdock .section02 .container { grid-template-columns: 1fr; }
	.c-newdock .section02 .detail, .c-newdock .section02 .images { grid-column: 1; grid-row: auto; padding-top: 0; margin-right: 0; }
	.c-newdock .section01 .images { margin-right: -20px; }
	.c-newdock .section .images .image02 { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 46%; margin: -60px 0 0 auto; }
	.c-newdock .section03 .images .image01 { margin-left: 0; }
	.c-newdock .section04 .container, .c-newdock .section05 .container { padding: 0 20px; }
}
@media screen and (max-width: 767px) {
	.c-newdock .cmn-hero .headline { height: auto; }
	.c-newdock .dock-plan { margin-top: 30px; }
	.c-newdock .dock-plan li { grid-template-columns: 76px minmax(0, 1fr) 84px; gap: 8px; font-size: 13px; }
	.c-newdock .dock-plan li i { height: 18px; }
	.c-newdock .sections { padding: 50px 0 40px 0; }
	.c-newdock .section { margin: 0 0 70px 0; }
	.c-newdock .section .container { padding: 0 25px; }
	.c-newdock .section .detail h2,
	.c-newdock .section04 .detail h2, .c-newdock .section05 .detail h2 { font-size: 50px; }
	.c-newdock .section .detail .fig { font-size: 17px; }
	.c-newdock .section .detail .fig b { font-size: 30px; }
	.c-newdock .section .detail .lead { margin: 10px 0 0 0; font-size: 14px; }
	.c-newdock .section01 .images { margin-right: -25px; }
	.c-newdock .section .images span { clip-path: var(--cut-sm); }
	.c-newdock .section01 .images .image01 span { clip-path: var(--cut-sm); }
	.c-newdock .section04 .container, .c-newdock .section05 .container { padding: 0 25px; }
}

/* 見出しの型を区切りごとに変える（番号を見出しの下に置く区切り・03は中央寄せで写真を下に積む） */
.c-newdock .section .detail .no-after { margin: 14px 0 0 0; }
.c-newdock .section .detail .no-after + .fig { margin-top: 10px; }
.c-newdock .section03 .container { display: block; max-width: 1060px; }
.c-newdock .section03 .detail { padding: 0; text-align: center; }
.c-newdock .section03 .detail .no { justify-content: center; }
.c-newdock .section03 .detail .lead { max-width: 640px; margin-left: auto; margin-right: auto; text-align: left; }
.c-newdock .section03 .images { margin: 40px 0 0 0; }
.c-newdock .section03 .images .image01 { margin: 0 0 0 0; width: 78%; }
.c-newdock .section03 .images .image01 span { aspect-ratio: 16 / 9; }
.c-newdock .section03 .images .image02 { left: auto; right: 0; bottom: -60px; width: 30%; }
@media screen and (max-width: 979px) {
	.c-newdock .section03 .images .image01 { width: 100%; }
	.c-newdock .section03 .images .image02 { position: relative; right: auto; bottom: auto; width: 46%; margin: -60px 0 0 auto; }
}

/* 文字の折り返し：文節で折り、最後の行を短くしない（担当6ページだけ） */
.c-3minutes, .c-whats, .c-company, .c-future, .c-sustainability, .c-newdock { word-break: auto-phrase; text-wrap: pretty; }
.c-3minutes h2, .c-3minutes h3, .c-whats h2, .c-whats h3, .c-company h2, .c-company h3, .c-future h2, .c-future h3, .c-sustainability h2, .c-sustainability h3, .c-newdock h2, .c-newdock h3, .c-whats .modal-title, .c-3minutes .chapters button { text-wrap: balance; }