@charset "utf-8";
.related_contents{
	--rc-bg:#97cce6;
	--f-color:#ffffff;
	background:var(--rc-bg);
	padding:0 40px;
}
.rel-wrap{
	width:100%;
	max-width:1600px;
	margin:0 auto;
	padding:80px 0;
	container-type:inline-size;
}
.rel-title{
	display:flex;
	align-items:center;
	gap:20px;
	color:var(--f-color);
	padding:0;
}
.rel-title__en{
	font-size:clamp(24px, 3.5cqw, 42px);
	font-weight:600;
	line-height:1.1;
	letter-spacing:.02em;
}
.rel-title__ja{
	font-size:clamp(18px, 1.925cqw, 26px);
	font-weight:700;
	line-height:1.1;
	letter-spacing:.02em;
}
.rel-rule{
	height:1px;
	background:var(--f-color);
	margin:2% 0 0 0;
	border:0;
}
.rel-grid{
	display:grid;
	row-gap:2.7rem;
	margin-top:2.4rem;
}
.row{
	display:grid;
	justify-content:center;
}
.row-top,
.cols-2{
	grid-template-columns:repeat(2, 48.75%);
	column-gap:2.5%;
	--card-ar:2.608695652;     /* 780/299 */
	--photo-frac:0.707888889;
	--pad-t:40px; 
	--pad-r:16px; 
	--pad-b:20px; 
	--pad-l:20px;
	--text-gap:5px;
	--fs-en:clamp(14px, 1.25cqw, 20px);
	--fs-ja:clamp(16px, 1.375cqw, 22px);
	--icon-w:25%;
	--icon-mb:20px;
}
.row-bottom,
.cols-3{
	grid-template-columns:repeat(3, 31.625%);
	column-gap:2.5625%;
	--card-ar:2.024;           /* 506/250 */
	--photo-frac:0.707888889;
	--pad-t:40px;
	--pad-r:8px; 
	--pad-b:20px; 
	--pad-l:20px;
	--text-gap:8px;
	--fs-en:clamp(13px, 1.0cqw, 16px);
	--fs-ja:clamp(13px, 1.125cqw, 18px);
	--icon-w:42%;
	--icon-mb:20px;
}
.cols-4{
	grid-template-columns:repeat(4, 23.125%);
	column-gap:2.5%;
	--card-ar:2.608695652;
	--photo-frac:0.707888889;
	--pad-t:40px; 
	--pad-r:14px; 
	--pad-b:20px;
	--pad-l:20px;
	--text-gap:8px;
	--fs-en:clamp(13px, 1.0cqw, 16px);
	--fs-ja:clamp(15px, 1.125cqw, 18px);
	--icon-w:42%;
	--icon-mb:20px;
}
.cols-5{
	grid-template-columns:repeat(5, 18%); /* 288/1600 */
	column-gap:2.5%;                        /* 40/1600 */
	--card-ar:2.608695652;
	--photo-frac:0.707888889;
	--pad-t:40px; 
	--pad-r:14px; 
	--pad-b:20px; 
	--pad-l:20px;
	--text-gap:8px;
	--fs-en:1.6rem;
	--fs-ja:1.8rem;
	--icon-w:42%;
	--icon-mb:20px;
}
.rel-card{
	position:relative;
	display:grid;
	grid-template-columns:
		calc(100% - (99.8% * var(--photo-frac, 0.707888889)))
		calc(100% * var(--photo-frac, 0.707888889));
	aspect-ratio:var(--card-ar, 2.608695652);
	background:#fff;
	border-radius:20px;
	color:#111;
	overflow:hidden;
	contain:paint;
	--ph-ox: 50%;
	--ph-oy: 50%;
	--ph-tx-p: 0;
	--ph-ty-p: 0;
	--ph-scale: 1;
	text-decoration:none;
	transition:transform .2s ease, box-shadow .2s ease;
	box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.rel-card:hover{
	transform:translateY(-2px);
	box-shadow:0 6px 16px rgba(0,0,0,.12);
	text-decoration:none;
}


.rel-card__text{
	padding:var(--pad-t,  calc(40px * 1))
	        var(--pad-r,  calc(16px * 1))
	        var(--pad-b,  calc(20px * 1))
	        var(--pad-l,  calc(24px * 1));
	display:flex;
	flex-direction:column;
	gap:var(--text-gap, 6px);
	align-items:flex-start;
}
.rel-card__en{
	font-size:var(--fs-en, clamp(14px, 1.25cqw, 20px));
	font-weight:700;
	line-height:1.15;
	letter-spacing:.02em;
	color:var(--color-base);
}
.rel-card__ja{
	font-size:var(--fs-ja, clamp(16px, 1.375cqw, 22px));
	font-weight:900;
	line-height:1.12;
}
.rel-card__en,
.rel-card__ja{
	text-decoration:none;
}
.rel-card__icon{
	width:var(--icon-w, 25%);
	margin-top:auto;
	margin-bottom:var(--icon-mb, 50px);
}
.rel-card__photo{ width:100%; height:100%; overflow:hidden; }
.rel-card__photo > img{
	display:block;         
	width:100%;
	object-fit:cover;
	object-position: var(--ph-ox,50%) var(--ph-oy,50%);
	transform-origin:50% 50%;
	transform:
	translate(calc(var(--ph-tx-p, 0) * 1%), calc(var(--ph-ty-p, 0) * 1%))
	scale(var(--ph-scale, 1));
	backface-visibility:hidden;
	will-change:transform;
}
@media (max-width:1280px) and (min-width:811px){
	.rel-wrap{
		padding:60px 0;
	}
	.rel-title{
		gap:16px;
	}
	.rel-title__en{
		font-size:clamp(22px, 3.2cqw, 36px);
	}
	.rel-title__ja{
		font-size:clamp(18px, 2.1cqw, 26px);
	}
	.rel-rule{
		margin:1.5% 0 0 0;
	}
	.rel-grid{
		row-gap:1.9rem;
	}
	.rel-grid .row,
	.rel-grid .row-top,
	.rel-grid .row-bottom{
		grid-template-columns:repeat(2, 48.75%);
		column-gap:1.9rem;
		row-gap:1.9rem;
		--card-ar:2.6;
		--photo-frac:0.65;
	}
	.row-top,
	.cols-2,
	.row-bottom,
	.cols-3,
	.cols-4,
	.cols-5{
		--pad-t:20px;
		--pad-r:8px;
		--pad-b:20px;
		--pad-l:18px;
		--text-gap:10px;
		--fs-en:clamp(14px, 1.85cqw, 22px);
		--fs-ja:clamp(16px, 1.95cqw, 30px);
		--icon-w:22%;
		--icon-mb:-5px;
	}
}
@media (max-width:810px){
	.related_contents{
		padding:0 30px;
	}
	.rel-title{
		gap:16px;
	}
	.rel-title__en{
		font-size:clamp(18px, 6cqw, 32px);
	}
	.rel-title__ja{
		font-size:clamp(16px, 4.8cqw, 20px);
	}
	.rel-rule{
		margin-top:12px;
	}
	.rel-grid{
		row-gap:1.5rem;
	}
	.rel-grid .row,
	.rel-grid .row-top,
	.rel-grid .row-bottom,
	.rel-grid .cols-2,
	.rel-grid .cols-3,
	.rel-grid .cols-4,
	.rel-grid .cols-5{
		grid-template-columns:1fr;
		column-gap:0;
		row-gap:1.5rem;
	}
	.row-top,
	.cols-2,
	.row-bottom,
	.cols-3,
	.cols-4,
	.cols-5{
		--card-ar:calc(714 / 376);
		--photo-frac:calc(506 / 714);
		--pad-t:40px;
		--pad-r:10px;
		--pad-b:20px;
		--pad-l:18px;
		--text-gap:20px;
		--fs-en:1.38rem;
		--fs-ja:1.48rem;
		--icon-w:30%;
		--icon-mb:20px;
	}
	.rel-card{
		grid-template-columns:
			calc(100% - (100% * var(--photo-frac)))
			calc(100% * var(--photo-frac));
		grid-template-rows:1fr;
		aspect-ratio:var(--card-ar);
	}
	.rel-card__photo{
		height:100%;
	}
	.rel-card__photo > img{
		width:100%;
		height:100%;
		object-fit:cover;
	}
}
@media (max-width:600px){
	.rel-wrap{
		padding:48px 0;
	}
	.rel-title{
		gap:16px;
	}
	.rel-title__en{
		font-size:clamp(18px, 6cqw, 30px);
	}
	.rel-title__ja{
		font-size:clamp(16px, 3.8cqw, 22px);
	}
	.rel-rule{
		margin-top:12px;
	}
	.rel-grid{
		row-gap:1.25rem;
	}
	.rel-grid .row,
	.rel-grid .row-top,
	.rel-grid .row-bottom,
	.rel-grid .cols-2,
	.rel-grid .cols-3,
	.rel-grid .cols-4,
	.rel-grid .cols-5{
		grid-template-columns:1fr;
		column-gap:0;
		row-gap:1.25rem;
	}
	.row-top,
	.cols-2,
	.row-bottom,
	.cols-3,
	.cols-4,
	.cols-5{
		--card-ar:calc(714 / 376);
		--photo-frac:calc(506 / 714);
		--pad-t:35px;
		--pad-r:10px;
		--pad-b:16px;
		--pad-l:12px;
		--text-gap:14px;
		--fs-en:0.99rem;
		--fs-ja:1.03rem;
		--icon-w:30%;
		--icon-mb:10px;
	}
	.rel-card{
		grid-template-columns:
			calc(100% - (100% * var(--photo-frac)))
			calc(100% * var(--photo-frac));
		grid-template-rows:1fr;
		aspect-ratio:var(--card-ar);
	}
	.rel-card__photo{
		height:100%;
	}
	.rel-card__photo > img{
		width:100%;
		height:100%;
		object-fit:cover;
	}
}
@media (max-width:480px){
	.rel-wrap{
		padding:40px 0;
	}
	.rel-title{
		gap:10px;
	}
	.rel-title__en{
		font-size:clamp(15px, 6cqw, 24px);
	}
	.rel-title__ja{
		font-size:clamp(14px, 4cqw, 14px);
	}
	.rel-rule{
		margin-top:10px;
	}
	.rel-grid{
		row-gap:1rem;
	}
	.row-top,
	.cols-2,
	.row-bottom,
	.cols-3,
	.cols-4,
	.cols-5{
		--card-ar:calc(714 / 376);
		--photo-frac:calc(506 / 714);
		--pad-t:28px;
		--pad-r:5px;
		--pad-b:14px;
		--pad-l:8px;
		--text-gap:10px;
		--fs-en:0.8rem;
		--fs-ja:1.0rem;
		--icon-w:30%;
		--icon-mb:20%;
	}
}
.rel-card.photo1{ --ph-ox: 50%; --ph-oy: 50%; --ph-tx-p: 14;  --ph-ty-p: 14; --ph-scale: 1.4; --fs-en:1.40rem;	--fs-ja:1.18rem; }
.rel-card.photo1-2{ --ph-ox: 50%; --ph-oy: 50%; --ph-tx-p: -20;  --ph-ty-p: 14; --ph-scale: 1.4; --fs-en:1.40rem;	--fs-ja:1.20rem; }
.rel-card.rel-lg.photo2{ --ph-ox: 50%; --ph-oy: 50%; --ph-tx-p: 0;  --ph-ty-p: -10; --ph-scale: 1.0; --fs-en:1.40rem;	--fs-ja:1.20rem; }
.rel-card.photo3{ --ph-ox: 50%; --ph-oy: 50%; --ph-tx-p: -8;  --ph-ty-p: 8; --ph-scale: 1.18; }
.rel-card.photo4{ --ph-ox: 50%; --ph-oy: 50%; --ph-tx-p: 0;  --ph-ty-p: 8; --ph-scale: 1.18; }
.rel-card.photo5{ --ph-ox: 56%; --ph-oy: 50%; --ph-tx-p: 0;  --ph-ty-p: -12; --ph-scale: 1.00; }
.rel-card.photo8{ --ph-ox: 56%; --ph-oy: 50%; --ph-tx-p: 0;  --ph-ty-p: -8; --ph-scale: 1.04; }
.rel-card.photo11{ --ph-ox: 50%; --ph-oy: 50%; --ph-tx-p: 0;  --ph-ty-p: 13; --ph-scale: 1.26; }
.rel-card.photo12{ --ph-ty-p: -4; }
.rel-card.rel-lg.photo9{ --ph-ty-p:-25; }
.rel-card.rel-sm.photo9{ --ph-ty-p:-10; }
.rel-card.rel-sm.photo2{ --ph-ty-p: 0; --ph-scale: 1.1; }

@media (max-width:1280px){
	.rel-card.photo1{ --ph-ox: 50%; --ph-oy: 50%; --ph-tx-p: 14;  --ph-ty-p: 20; --ph-scale: 1.45; --fs-en:1.40rem;	--fs-ja:1.12rem;}
	.rel-card.photo1-2{ --ph-ox: 50%; --ph-oy: 50%; --ph-tx-p: -20;  --ph-ty-p: 20; --ph-scale: 1.45; --fs-en:1.40rem;	--fs-ja:1.12rem;}
	.rel-card.rel-lg.photo2{ --ph-ox: 50%; --ph-oy: 50%; --ph-tx-p: 0;  --ph-ty-p: -10; --ph-scale: 1.0; --fs-en:1.40rem;	--fs-ja:1.30rem; }
	.rel-card.photo8{ --ph-ox: 56%; --ph-oy: 50%; --ph-tx-p: 0;  --ph-ty-p: -15; --ph-scale: 1.04; }
	.rel-card.rel-sm.photo9{ --ph-ty-p:-15; }
	.rel-card.photo11{--ph-ty-p: 3; --ph-scale: 1.06; }
	.rel-card.rel-sm.photo2{ --ph-ty-p: 0; --ph-scale: 1; }
}
@media (max-width:810px){
	.rel-card.photo1{ --ph-ox: 24%; --ph-oy: 50%; --ph-tx-p: 0;  --ph-ty-p: 0; --ph-scale: 1.01; --fs-en:1.38rem; --fs-ja:1.48rem;}
	.rel-card.photo1-2{ --ph-ox: 82%; --ph-oy: 50%; --ph-tx-p: 0;  --ph-ty-p: 0; --ph-scale: 1.01; --fs-en:1.38rem; --fs-ja:1.48rem;}
	.rel-card.rel-lg.photo2{ --ph-ox: 50%; --ph-oy: 50%; --ph-tx-p: 0;  --ph-ty-p: 0; --ph-scale: 1.0; --fs-en:1.40rem;	--fs-ja:1.48rem; }
	.rel-card.photo8{ --ph-ox: 56%; --ph-oy: 50%; --ph-tx-p: 0;  --ph-ty-p: 0; --ph-scale: 1.04; }
	.rel-card.photo4{ --ph-ox: 50%; --ph-oy: 50%; --ph-tx-p: 0;  --ph-ty-p: 0; --ph-scale: 1.0; }
	.rel-card.photo5{ --ph-ox: 50%; --ph-oy: 50%; --ph-tx-p: 0;  --ph-ty-p: 0; --ph-scale: 1.00; }
	.rel-card.photo11{--ph-ty-p: 0; --ph-scale: 1.00; }
	.rel-card.photo12{ --ph-ty-p: 0; }
	.rel-card.rel-lg.photo9{ --ph-ty-p: 0; }
	.rel-card.rel-sm.photo9{ --ph-ty-p: 0; }
}
@media (max-width:600px){
	.rel-card.photo1,
	.rel-card.photo1-2,
	.rel-card.rel-lg.photo2{ --fs-en:0.99rem; --fs-ja:1.03rem;}
}
/* 改行 */
.rel-card__ja{ white-space:nowrap; }
.rel-card__ja br{ display:revert; }

@media (min-width:1681px){
	.rel-card__ja br[class*="range-"]:not(.range-1681up){ display:none; }
}
@media (max-width:1680px) and (min-width:1481px){
	.rel-card__ja br[class*="range-"]:not(.range-1481-1680){ display:none; }
}
@media (max-width:1480px) and (min-width:1281px){
	.rel-card__ja br[class*="range-"]:not(.range-1281-1480){ display:none; }
}
@media (max-width:1280px) and (min-width:811px){
	.rel-card__ja br[class*="range-"]:not(.range-811-1280){ display:none; }
}
@media (max-width:810px){
	.rel-card__ja br[class*="range-"]:not(.range-810down){ display:none; }
}
@media (min-width:1481px){
	.rel-card__ja .br-1480down{ display:none; }
}
@media (max-width:1480px){
	.rel-card__ja .br-1480up{ display:none; }
}