/* ========================================
   RORO船LP - media.css (Responsive)
   ======================================== */

/* --- Section 4: Tablet narrow --- */
@media (max-width: 1024px) {
	.lp-structure__layout {
		grid-template-columns: 1fr 1fr;
		column-gap: 32px;
	}

	/* --- Section 6: Merits tablet --- */
	.lp-merits__card--large {
		grid-column: span 6;
		min-height: 0;
	}

	.lp-merits__card--small {
		grid-column: span 3;
	}

}

/* --- Section 4: Single column --- */
@media (max-width: 820px) {
	.lp-structure__layout {
		grid-template-columns: 1fr;
		grid-template-areas:
			"ramp-photo"
			"ramp-text"
			"deck-photo"
			"deck-text";
		row-gap: 24px;
	}

	.lp-structure__text--ramp,
	.lp-structure__text--deck {
		padding-top: 0;
	}

	.lp-structure__photo--ramp img,
	.lp-structure__photo--deck img {
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.lp-flow__grid {
		grid-template-columns: 1fr;
	}

	.lp-flow__arrow::before {
		content: '▼';
	}

	.lp-flow__arrow {
		margin: -4px 0;
	}
}

/* --- Main mobile breakpoint --- */
@media (max-width: 767px) {

	:root {
		--lp-section-py: 48px;
	}

	/* --- Headings --- */
	.lp-heading {
		font-size: 24px;
	}

	.lp-subheading {
		font-size: 18px;
	}

	/* --- Buttons --- */
	.lp-cta__buttons {
		flex-direction: column;
		align-items: center;
	}

	/* --- Cards --- */
	.lp-card-grid--4,
	.lp-card-grid--3 {
		grid-template-columns: 1fr;
	}

	/* --- Hero --- */
	.lp-hero {
		min-height: 400px;
	}

	/* SP: 幅が狭くなっても右側の船が画面内に残るよう右寄せ表示 */
	.lp-hero__bg {
		background-position: 78% 50%;
	}

	.lp-hero__content {
		padding: 48px 20px;
	}

	.lp-hero__title {
		font-size: 32px;
	}

	.lp-hero__subtitle {
		font-size: 16px;
	}

	/* --- Summary --- */
	.lp-summary__box {
		padding: 26px 18px;
	}

	.lp-summary__box::before,
	.lp-summary__box::after {
		width: 36px;
		height: 36px;
		border-width: 3px;
	}

	.lp-summary__box::before {
		border-right: none;
		border-bottom: none;
	}

	.lp-summary__box::after {
		border-left: none;
		border-top: none;
	}

	.lp-summary__title {
		font-size: 26px;
	}

	.lp-summary__list li {
		grid-template-columns: 56px 1fr;
		min-height: 72px;
	}

	.lp-summary__num {
		font-size: 20px;
	}

	.lp-summary__num::after {
		right: 8px;
		height: 36px;
	}

	.lp-summary__text {
		font-size: 16px;
	}

	/* --- About --- */
	.lp-about .lp-heading {
		font-size: 40px;
	}

	.lp-about__lead p {
		font-size: 15px;
	}

	.lp-about__timeline {
		margin-left: 0;
	}

	/* --- Cards --- */
	.lp-card {
		min-height: auto;
	}

	.lp-card__title {
		font-size: 20px;
	}

	/* --- Compare --- */
	.lp-compare__header h2 {
		font-size: 32px;
	}

	.lp-compare__header--small h2 {
		font-size: 28px;
	}

	/* --- Merits --- */
	.lp-merits__header h2 {
		font-size: 38px;
	}

	.lp-merits__grid {
		grid-template-columns: 1fr;
	}

	.lp-merits__card--large,
	.lp-merits__card--small {
		grid-column: auto;
	}

	.lp-merits__card--driver,
	.lp-merits__card--co2 {
		grid-template-columns: 1fr;
	}

	.lp-merits__num {
		font-size: 68px;
		top: 2px;
		left: 18px;
	}

	.lp-merits__card h3 {
		margin-top: 30px;
	}

	.lp-merits__big-percent strong {
		font-size: 72px;
	}

	.co2-bar {
		grid-template-columns: 92px 1fr;
	}

	.lp-merits__cases em {
		font-size: 17.5px;
	}

	.lp-merits__co2-main strong {
		font-size: 64px;
	}

	.lp-merits__small-layout {
		grid-template-columns: 90px 1fr;
	}

	.lp-merits__small-icon img {
		width: 72px;
		height: 72px;
	}

	.lp-merits__case-grid {
		grid-template-columns: 1fr;
	}

	.route-cta,
	.final-cta {
		margin-top: 40px;
	}

	/* --- Demerits --- */
	.lp-demerits__header h2 {
		font-size: 30px;
	}

	.lp-demerits__card {
		grid-template-columns: 120px 1fr;
		gap: 0 24px;
		padding: 28px 24px;
	}

	.lp-demerits__icon-circle {
		width: 96px;
		height: 96px;
	}

	.lp-demerits__icon-circle img {
		width: 56px;
		height: 56px;
	}

	.lp-demerits__content h3 {
		font-size: 22px;
	}

	.lp-demerits__solution {
		padding: 16px 18px;
	}

	.lp-demerits__solution-watermark {
		width: 96px;
		height: 96px;
	}

	.lp-demerits__solution-text strong {
		font-size: 18px;
	}

	.lp-demerits__solution-text strong img {
		width: 25px;
		height: 25px;
	}

	/* --- Routes --- */
	.roro-route-container {
		width: min(100% - 40px, 1120px);
	}

	.route-stats {
		gap: 26px;
	}

	.route-stat {
		min-width: auto;
	}

	.route-stat-wide {
		min-width: auto;
	}

	.stat-number {
		font-size: 68px;
	}

	.stat-unit,
	.stat-small {
		font-size: 24px;
	}

	.map-card {
		min-height: auto;
	}

	.map-card .route-map-image,
	.map-placeholder {
		height: auto;
		min-height: 400px;
		aspect-ratio: 16 / 9;
	}

	.ship-table {
		width: 100%;
		min-width: 0;
		table-layout: auto;
		font-size: 11.5px;
	}

	.ship-table .th-word {
		display: block;
	}

	.ship-table th {
		white-space: normal;
		font-size: 10px;
		letter-spacing: 0;
		line-height: 1.3;
		text-align: center;
		vertical-align: middle;
		padding: 8px 2px;
	}

	.ship-table td {
		font-size: 11.5px;
		white-space: nowrap;
	}

	.ship-table th,
	.ship-table td {
		padding: 8px 3px;
	}

	.ship-table-wrap {
		overflow-x: auto;
	}

	/* --- Future/Trends (1000px) --- */
	.problem-inner {
		grid-template-columns: 280px 130px 280px;
		gap: 18px;
	}

	.problem-arrow {
		font-size: 22px;
	}

	.problem-arrow::after {
		right: -34px;
		border-top-width: 52px;
		border-bottom-width: 52px;
		border-left-width: 34px;
	}

	.support-section {
		grid-template-columns: 1fr;
	}

	.support-cards {
		grid-template-columns: repeat(3, 1fr);
	}

	.support-card-head h4 {
		min-height: 0;
	}
}

/* --- Section 5: Tablet --- */
@media (max-width: 980px) {
	.lp-compare__ship-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.lp-compare__panel--left,
	.lp-compare__panel--right {
		border-radius: 10px;
	}

	.lp-compare__axis {
		display: none;
	}

	.lp-compare__choice-grid {
		grid-template-columns: 1fr;
		width: 100%;
	}

	.lp-compare__ferry-wrap {
		overflow-x: auto;
	}

	.lp-compare__ferry-table {
		min-width: 0;
		font-size: 12px;
	}

	.lp-compare__ferry-table th {
		white-space: nowrap;
	}

	.lp-compare__ferry-table th,
	.lp-compare__ferry-table td {
		padding: 8px 6px;
	}
}

/* --- Section 5: Small mobile --- */
@media (max-width: 640px) {
	.lp-compare__panel-head {
		height: 50px;
		font-size: 21px;
	}

	.lp-compare__panel-visual {
		height: 80px;
	}

	.lp-compare__panel-row {
		height: auto;
		min-height: 50px;
		padding: 10px 14px;
		font-size: 14px;
	}

	.lp-compare__choice-card {
		padding: 18px 18px 16px;
	}

	.lp-compare__choice-head {
		font-size: 16px;
	}

	.lp-compare__choice-list li {
		font-size: 14px;
	}

	.lp-compare__alert {
		grid-template-columns: 1fr;
		text-align: center;
		justify-items: center;
		gap: 16px;
		padding: 24px 20px;
	}

	.lp-compare__alert-body h3 {
		font-size: 20px;
	}

	.lp-compare__alert-body h3 strong {
		font-size: 24px;
	}

	.lp-compare__alert-body p span {
		font-size: 17px;
	}
}

/* --- Section 6: Small mobile --- */
@media (max-width: 520px) {
	.lp-merits__header h2 {
		font-size: 32px;
	}

	.lp-merits__card--large h3 {
		font-size: 20px;
	}

	.lp-merits__card--small h3 {
		font-size: 18px;
	}

	.lp-merits__big-percent strong {
		font-size: 78px;
	}

	.lp-merits__big-unit {
		font-size: 40px;
	}

	.lp-merits__co2-main strong {
		font-size: 56px;
	}

	.lp-merits__small-layout {
		grid-template-columns: 1fr;
	}

	.lp-merits__small-icon {
		padding-top: 0;
	}

}

/* --- Section 7: Small mobile --- */
@media (max-width: 640px) {
	.lp-demerits__header h2 {
		font-size: 26px;
	}

	.lp-demerits__card {
		grid-template-columns: 1fr;
		padding: 24px 20px;
		text-align: center;
	}

	.lp-demerits__icon-area {
		justify-content: center;
		margin-bottom: 16px;
	}

	.lp-demerits__icon-circle {
		width: 88px;
		height: 88px;
	}

	.lp-demerits__icon-circle img {
		width: 48px;
		height: 48px;
	}

	.lp-demerits__content {
		text-align: left;
	}

	.lp-demerits__content h3 {
		font-size: 20px;
		text-align: center;
	}

	.lp-demerits__solution {
		padding: 14px 16px;
	}

	.lp-demerits__solution-divider {
		display: none;
	}

	.lp-demerits__solution-text {
		text-align: left;
	}
}

/* --- Section 8: Small mobile --- */
@media (max-width: 640px) {
	.roro-route-section {
		padding: 40px 0 56px;
	}

	.roro-route-container {
		width: min(100% - 32px, 1120px);
	}

	.route-header {
		text-align: left;
	}

	.route-header h2 {
		font-size: 34px;
	}

	.route-header p {
		font-size: 15px;
	}

	.route-stats {
		gap: 14px;
		margin: 24px 0;
	}

	.route-stat {
		justify-content: center;
	}

	.stat-divider {
		width: 1px;
		height: 38px;
	}

	.stat-number {
		font-size: 42px;
	}

	.stat-unit,
	.stat-small {
		font-size: 15px;
	}

	.map-legend {
		top: 16px;
		left: 16px;
		min-width: 180px;
		padding: 12px 14px;
	}

	.legend-item {
		font-size: 13px;
		gap: 10px;
	}

	.legend-line {
		width: 24px;
		height: 3px;
	}

	.legend-dot {
		width: 13px;
		height: 13px;
	}

	.route-description {
		font-size: 16px;
		text-align: left;
	}

	.ship-table-section h3 {
		font-size: 23px;
	}

	.ship-table th,
	.ship-table td {
		font-size: 11.5px;
		padding: 8px 3px;
	}

	.ship-table th {
		font-size: 10px;
	}

	.route-cta {
		padding: 28px 20px;
	}

	.route-cta h3 {
		font-size: 28px;
	}

	.route-cta p {
		font-size: 15px;
	}

	.route-cta .cta-buttons {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.lp-roro .u-button > * {
		min-width: 0;
		width: 100%;
		max-width: 100%;
	}

}

/* --- Section 9: Future/Trends mobile --- */
@media (max-width: 760px) {
	.roro-future-container {
		width: min(100% - 32px, 1320px);
	}

	.future-header h2 {
		font-size: 30px;
	}

	.problem-visual {
		padding: 24px 0;
	}

	.problem-inner {
		min-height: auto;
		grid-template-columns: 1fr;
		width: min(420px, calc(100% - 32px));
		margin: 0 auto;
	}

	.problem-bg {
		width: 100%;
		opacity: 0.18;
	}

	.problem-card {
		min-height: auto;
	}

	.problem-arrow {
		width: 84px;
		height: 84px;
		border-radius: 50%;
		margin: 0 auto;
	}

	.problem-arrow::after {
		display: none;
	}

	.future-lead {
		text-align: left;
		font-size: 15px;
	}

	.support-text h3 {
		font-size: 30px;
	}

	.support-cards {
		grid-template-columns: 1fr;
	}

	.support-image {
		height: 170px;
	}

	/* SP: 右側の神珠丸＋トラックが見切れないよう右寄せ表示 */
	.final-cta-bg {
		object-position: 72% 40%;
	}

	.final-cta-content {
		padding: 28px 20px 24px;
	}

	.final-cta h3 {
		font-size: 22px;
	}

	.final-cta > .final-cta-content > p {
		font-size: 15px;
	}

	.final-cta-buttons {
		grid-template-columns: 1fr;
	}
}

/* --- Section 4: Small mobile --- */
@media (max-width: 560px) {
	.lp-structure {
		padding-top: 24px;
	}

	.lp-structure .lp-heading--underline {
		font-size: clamp(22px, 6.6vw, 30px);
	}

	.lp-structure .lp-heading--underline::after {
		width: 90px;
	}

	.lp-structure__text h3 {
		font-size: 22px;
	}

	.lp-structure__text p {
		font-size: 14.5px;
		line-height: 1.9;
	}

	.lp-spec-num {
		font-size: 20px;
	}

	.lp-spec-figure {
		gap: 4px 10px;
	}

	.lp-cargo__table-wrap {
		overflow-x: auto;
	}

	/* SPは2列表を画面内に収める（横スクロールさせない） */
	.lp-cargo__table {
		min-width: 0;
	}

	.lp-cargo__table thead th,
	.lp-cargo__table tbody td {
		padding: 8px 12px;
	}

	.lp-cargo__table thead th {
		font-size: 12.5px;
	}

	.lp-cargo__table tbody td {
		font-size: 12px;
		line-height: 1.5;
	}

	.lp-cargo__table thead th:first-child,
	.lp-cargo__table tbody td:first-child {
		width: 6.5em;
	}

	.lp-flow__card {
		min-height: auto;
	}
}

/* --- About intro: モバイル縦積み --- */
@media (max-width: 768px) {
	.lp-about__intro {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.lp-about__photo::before {
		top: 8px;
		left: 8px;
		right: -8px;
		bottom: 4px;
	}
}

@media (max-width: 980px) {
	.lp-sitelinks__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.lp-sitelinks__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.lp-sitelinks {
		margin-bottom: -124px;
	}
}

/* ============ SPタイポグラフィスケール統一 ============ */
@media (max-width: 767px) {
	.lp-roro .lp-heading--underline,
	.lp-roro .lp-summary__title {
		/* 長い日本語見出し（例:「RORO船の仕組みと構造」）が iPhone 幅で1文字だけ折返す問題対策。
		   幅に応じて縮小し、タブレット幅では従来の30pxを維持 */
		font-size: clamp(22px, 6.6vw, 30px);
	}

	.lp-roro .lp-demerits__content h3,
	.lp-roro .support-text h3,
	.lp-roro .final-cta h3,
	.lp-roro .ship-table-section h3,
	.lp-roro .problem-card h3 {
		font-size: 24px;
	}

	.lp-roro .lp-structure__text h3,
	.lp-roro .lp-merits__card--large h3,
	.lp-roro .lp-merits__card--small h3 {
		font-size: 20px;
	}
}

/* --- SP最終調整（2026-07-30 cowork検証済み）: 地図の歪み解消・表フォント統一 --- */
@media (max-width: 767px) {
	/* 地図: 実画像は自然比（aspect-ratio/min-heightはプレースホルダ専用） */
	.map-card .route-map-image {
		height: auto;
		aspect-ratio: auto;
		min-height: 0;
	}
	.map-placeholder {
		min-height: 400px;
		aspect-ratio: 16 / 9;
	}
	/* フェリー比較表を他表とフォント統一（thead th / tbody td で詳細度を合わせる） */
	.lp-compare__ferry-table thead th {
		font-size: 12.5px;
	}
	.lp-compare__ferry-table tbody td {
		font-size: 12px;
		line-height: 1.5;
	}
	.lp-compare__ferry-table thead th,
	.lp-compare__ferry-table tbody td {
		padding: 8px 10px;
	}
	/* 船舶表(7隻)を11/11に微調整 */
	.ship-table th {
		font-size: 11px;
	}
	.ship-table td {
		font-size: 11px;
	}
}

/* --- SP: 日本語の不自然な改行対策（2026-07-30 cowork調査反映） --- */
@media (max-width: 767px) {
	/* 文節境界で折り返す（対応ブラウザのみ。非対応は現状どおりで無害） */
	.lp-roro h1,
	.lp-roro h2,
	.lp-roro h3,
	.lp-roro h4,
	.lp-roro p,
	.lp-roro li,
	.lp-roro td,
	.lp-roro .lp-summary__text,
	.lp-roro .lp-card__text {
		word-break: auto-phrase;
	}
	/* PC専用の改行はSPで無効化（1行に入る文の不自然な2段化を防ぐ） */
	.lp-roro br.u-pc-only {
		display: none;
	}
}

/* --- SP: ヒーローCTAは内容幅に固定（全幅化しない） --- */
@media (max-width: 767px) {
	.lp-roro .u-button.lp-hero__cta > * {
		width: auto;
		max-width: none;
	}
}