@charset "utf-8";
/* mio-lower.css｜澪重工 下層ページ共通の改変（各カテゴリの CSS の上に重ねる） */

/* ページ見出し：写真の帯（右下の角を落とす）＋赤い燕尾旗のページ名 */
.cmn-hero { justify-content: center; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), calc(100% - 46px) 100%, 0 100%); background-color: #dcdfdf; }
.cmn-hero::before { background-color: #dcdfdf; }
.cmn-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(to top, rgba(29, 35, 38, 0.28), rgba(29, 35, 38, 0)); pointer-events: none; }
.cmn-hero .headline { z-index: 1; width: auto; height: auto; min-height: 112px; padding: 26px 96px 30px 52px; }
.cmn-hero .headline::before { background-image: none !important; background-color: #0f7579; clip-path: polygon(0 0, 100% 0, calc(100% - 52px) 50%, 100% 100%, 0 100%); width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; margin: 0 !important; }
.cmn-hero .caption { z-index: 1; }
.cmn-breadcrumbs { display: flex; align-items: center; gap: 10px; }
.cmn-breadcrumbs .bc-flag { width: 30px; height: auto; transform: rotate(-4deg); }
@media screen and (max-width: 767px) {
	.cmn-hero { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), calc(100% - 6vw) 100%, 0 100%); }
	.cmn-hero .headline { min-height: 0; padding: 4vw 13vw 4.6vw 6vw; font-size: 5.6vw; }
	.cmn-hero .headline::before { clip-path: polygon(0 0, 100% 0, calc(100% - 7vw) 50%, 100% 100%, 0 100%); }
	.cmn-breadcrumbs .bc-flag { width: 6vw; }
}

/* 見出しの飾り：航跡の波線（ornament-line は core.css で差し替え済み） */
.cmn-heading-border h2 > span::before { border-width: 0; clip-path: var(--cut-sm); }
.cmn-heading-doubleline h2::before, .cmn-heading-doubleline h2::after { background-color: #2b3138; }

/* ボタン：角を落とした白い札 */
.cmn-btn-primary { border: 0; border-radius: 0; clip-path: var(--cut-sm); background-color: #fff; }
.os-pc .cmn-btn-primary:hover { background-color: #1d2326; color: #fff; }

/* 白いパネル共通（各ページで使う時は class="mio-panel" か、ページの CSS で clip-path: var(--cut)） */
.mio-panel { background: #fff; clip-path: var(--cut); }

/* 見出しの写真（元の CSS 背景は none。仮枠／納品写真を img で敷く） */
.cmn-hero > .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cmn-hero::before { display: none; }