/****************************************************************************************************

merit.css

****************************************************************************************************/
img{
width: 100%;
}

.img{
position: relative;
}
.note{
position: absolute;
right: 5px;
bottom: 5px;
}
.white{
color: #fff;
}

span.anchorlink {
	top: -140px;
}
@media screen and (max-width: 979px) {
span.anchorlink {
	top: -130px;
}
}
@media screen and (max-width: 767px) {
span.anchorlink {
	top: -100px;
}
}


/*** bg_paleGreen **********************************/
.bg_paleGreen{
	background-color: #f2f5ef;
}

.nami_hd{
	position: relative;
}
.nami_hd:after{
	content: "";
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url("../../common/images/nami_hd_fff.svg") top left no-repeat;
	background-size: contain;
}

.nami_ft{
	position: relative;
}
.nami_ft:before{
	content: "";
	position: absolute;
	z-index: 1;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: url("../../common/images/nami_ft_fff_reverse.svg") bottom left no-repeat; /*url("../../common/images/nami_ft_fff.svg")*/
	background-size: contain;
}


@media screen and (max-width: 767px) {
.hd_wrap .nami_ft:before{
	background: none;
}
}



/*** sec **********************************/
.sec_hd{
	position: relative;
}
.sec_isogo{
	position: relative;
	padding: 8% 0 6%;
	z-index: 2;
}
.sec_gourmet{
	padding: 6% 0 0;
}
.sec_park{
	padding: 6% 0 4%;
}
.sec_wrap.sec_shio{
	padding: 12% 0 10%;
}
.sec_shiomidai{
	padding: 4% 0  2%;
}
.sec_wrap{
	position: relative;
	z-index: 2;
	padding: 12% 0 10%;
}
.land_wrap{
	position: relative;
	z-index: 2;
	padding: 14% 0 10%;
}


@media screen and (max-width: 767px) {
.sec_hills{
	padding: 12% 0;
}
.sec_isogo{
	padding: 14% 0 6%;
}
.sec_park{
	padding: 10% 0 6%;
}
.sec_wrap.sec_shio{
	padding: 14% 0 12%;
}
.sec_shiomidai{
	padding: 6% 0  0;
}
.sec_wrap{
	padding: 16% 0 12%;
}
.land_wrap{
	padding: 20% 0 12%;
}
}


/*** h1〜  **********************************/
h1.h1_ttl{
	font-size: 30px;
	font-size: clamp(22px, 3vw, 30px);
	margin-bottom: 0.8em;
}
h1.h1_ttl .supText{
	font-size: 14px;
	font-size: clamp(10px, 3vw, 14px);
}

h2.h2_ttl_img{
	text-align: center;
	margin-bottom: 2.5em;
}
h2.h2_ttl_img img{
	width: auto;
	height: 30px;
}

h3.h3_ttl{
	font-size: 30px;
	font-size: clamp(22px, 3vw, 30px);
	text-align: center;
	margin-bottom: 0.8em;
}
h3 .h3_small{
	font-size: 80%;
}
h3.h3_ttl .supText{
	font-size: 14px;
	font-size: clamp(10px, 3vw, 14px);
}
.list_shiomidai h3.h3_ttl{color: #004c4c;}

h3.h3_land{
	font-size: 24px;
	font-size: clamp(20px, 2.2vw, 24px);
	color: #004c4c;
	margin-bottom: 0.8em;
}
h3.h3_land.center{
	text-align: center;
}

h4.h4_ttl{
	font-size: 24px;
	font-size: clamp(18px, 2.4vw, 24px);
	color: #004c4c;
	text-align: center;
	margin-bottom: 0.8em;
}
h4.h4_land{
	font-size: 24px;
	font-size: clamp(18px, 2.4vw, 24px);
	color: #004c4c;
	margin-bottom: 0.8em;
}
h4.h4_land.center{
	text-align: center;
}
h4.h4_facility{
	font-size: 20px;
	font-size: clamp(17px, 2vw, 20px);
	line-height: 1.2em;
}
h4.h4_facility .h4_small{
	font-size: 12px;
	font-size: clamp(11px, 2.4vw, 12px);
	line-height: 1.2em;
}

@media screen and (max-width: 1000px) {
h2.h2_ttl_img img{
	height: 26px;
}
}

@media screen and (max-width: 767px) {
h2.h2_ttl_img img{
	height: 22px;
}

h3.h3_land,
h4.h4_land{
	text-align: center;
}
}



/*** hd **********************************/
.hd {
	width: 100%; /*90%*/
	padding-top: 0; /*50px*/
	margin: 0 auto;
}
.hd .pc{
	display: block;
}
.hd .sp{
	display: none;
}


@media screen and (max-width: 767px) {
.hd {
	width: 100%;
	padding-top: 20px;
}
.hd .pc{
	display: none;
}
.hd .sp{
	display: block;
}
}



/*** hd_inner **********************************/
.hd_inner{
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
}
.hd_inner .photo{
	position: relative;
	order: 2;
	width: 60.3333333%; /*68.3333333%*/
	align-self: flex-end;
}
.hd_inner .txt{
	position: relative;
	z-index: 1;
	order: 1;
	width: 30%; /*29.1666667%*/
	max-width: 340px;
	align-self: center;
	margin: 0 auto;
	padding: 0 4% 10em;
	/*padding-bottom: 10em;*/
}
.hd_inner .photo img{
	width: 100%;
	height: auto;
}

.hd_inner .photo .pc{}
.hd_inner .photo .sp{ display: none;}

.hd_inner .photo figcaption{
	position: absolute;
	z-index: 1;	
	right: 10px; /*0*/
	bottom: 6%;
	text-align: right;
}

.hd_inner .txt .icon{
	display: block;
	padding: 0 0 3em 5em;
}
.hd_inner .txt .icon img{
	width: auto;
	height: 70px;
}


@media screen and (max-width: 1024px) {
.hd_inner .photo{
	/*width: 60%;*/
}
.hd_inner .txt{
	/*width: 38%;*/
	padding-bottom: 8em;
}
.hd_inner .txt .icon{
	padding-left: 4em;
}
.hd_inner .txt .icon img{
	height: 50px;
}
}


@media screen and (max-width: 767px) {
.hd_inner .photo{
	order: 1;
	width: 100%;
}
.hd_inner .txt{
	order: 2;
	width: 90%;
	margin: 0 auto;
	text-align: center;
	padding: 3em 0;
}
.hd_inner .txt .icon{
	display: none;
}
.hd_inner .photo .pc{ display: none;}
.hd_inner .photo .sp{ display: block;}

.hd_inner .photo figcaption{
	position: relative;
	right: 10px;
	bottom: 0;
}
}


/*** section top **********************************/
.sec_top{
margin: 4% auto 3em;
}
.sec_top figure{
margin-bottom: 6%;
}
.sec_top figcaption{
	text-align: right;
  margin: 4px 0 0;
}
.sec_top h3{
text-align: center;
}

@media screen and (max-width: 767px) {
.sec_top{
margin: 0 auto 2em;
}
.sec_top figure{
margin-bottom: 5em;
}
}



/*******************************************************************
facility_wrap 
********************************************************************/

/*** facility_first_list **********************************/
.facility_list.first{
	width: 90%;
	max-width: 1024px;
	margin:0 auto;
	align-items: flex-end;
}
.facility_list.first .facility_img{
	width: 66.015625%;
}
.facility_list.first .facility_detail{
	width: 29.296875%;
}

@media screen and (max-width: 1000px) {
	.facility_list.first .facility_detail .pc {
		display: block;
	}
.facility_list.first .facility_detail dt img{
	width: auto;
	height: 45px;
	margin-left: 4px;
}
	.facility_list.first .facility_detail .sp {display: none;}
}

@media screen and (max-width: 767px) {
.facility_list.first{
	width: 100%;
}
.facility_list.first .facility_img{
	width: 100%;
}

.facility_list.first .facility_detail .sp {
	display: block;
}
.facility_list.first .facility_detail .pc {
	display: none;
}
.facility_list.first .facility_detail{
	width: 90%;
	margin: 1em auto 0;
}
.facility_list.first	.facility_detail dt img{
	height: 30px;
}
}
/*** END facility_first_list **********************************/


.facility_list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 4em auto;
}
.facility_list li{
	margin-bottom: 3em;
}
.facility_list li:last-child{
	margin-bottom: 0;
}
.facility_list.col3 li{
	width: 30%;/*29.296875*/
}
.facility_list.col4 li{
	width: 22.851562%;
}

.facility_detail{
	margin: 1em 0 0;
	text-align: justify;
}
.facility_detail dt{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding-bottom: 0.8em;
	margin-bottom: 1em;
	border-bottom: 1px solid #004c4c;
	text-align: left;
}
.facility_detail dt img{
	width: auto;
	height: 45px;
	/*margin-left: 6px;*/
}
.facility_detail dd p{
	padding: 0;
}

.sec_kamiooka .facility_list li:last-child .h4_facility,
.sec_kamiooka .facility_list li:last-child .facility_detail .cap10{
line-height: 1em;
}

@media screen and (min-width: 1001px) {
	.facility_detail .sp {display: none;}
}
@media screen and (min-width: 1200px) {
.facility_detail dt img{
	height: 60px;
}
}

@media screen and (max-width: 1000px) {
.facility_list{
	margin: 3em auto;
}
	.facility_detail .pc {display: none;}
	.facility_detail dt img{
	height: 30px;
}
.facility_list.col3 li,
.facility_list.col4 li{
	width: 48%;
}
.sec_kamiooka .facility_list li:last-child .h4_facility,
.sec_kamiooka .facility_list li:last-child .facility_detail .cap10{
line-height: 1.2em;
}
}

@media screen and (max-width: 560px) {
.facility_detail dt img,
.facility_list.first .facility_detail dt img{
	height: 24px;
margin: 0;
}
}
@media screen and (max-width: 460px) {
.sec_kamiooka .facility_list.col4 .facility_detail dt{
align-items: flex-start;
flex-direction: column;
}
.sec_kamiooka .facility_list.col4 .facility_detail h4:not(:last-child){
margin-bottom: 12px;
}
}


/*************************************************************************************
sec_merit
**************************************************************************************/
.sec_merit {
margin: 4% auto 3em;
}
.sec_merit figure{
max-width: 800px;
margin: 2em auto 0;
}

@media screen and (max-width: 767px) {
.sec_merit {
margin: 14% auto 4em;
}
}


/*************************************************************************************
sec_isogo
**************************************************************************************/
.sec_isogo dl.land_detail{
flex-direction: row-reverse;
}
.sec_isogo .facility_list.first{
	flex-direction: row-reverse;
}

/*************************************************************************************
gourmet
**************************************************************************************/
.sec_gourmet .h2_ttl_img{
position: relative;
text-align: center;
margin-bottom: 2em;
}
.sec_gourmet .h2_ttl_img span {
height: 30px;
position: relative;
z-index: 1;
display: inline-block;
background-color: #fff;
padding: 0 20px;
}

.sec_gourmet .h2_ttl_img::after {
position: absolute;
z-index: 0;
content: "";
top: 15px;
left: 0;
width: 100%;
height: 1px;
background-color: #004c4c;
}

@media screen and (max-width: 767px) {
.sec_gourmet .h2_ttl_img span {
height: 22px;
padding: 0 10px;
}

.sec_gourmet .h2_ttl_img::after {
top: 11px;
}
}


/*************************************************************************************
sec_shiomidai
**************************************************************************************/
/*.sec_shiomidai p{
line-height: 1.2em;
margin-top: 4px;
}*/

.flex_box{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.col2{
width: 48.6%;/*47.460937*/
}

.life_box{
margin-bottom: 5%;
}
.life_box:last-child{
margin-bottom: 0;
}


.life_ttl{
position: relative;
text-align: center;
margin-bottom: 2em;
}
.life_ttl span {
height: 26px;
position: relative;
z-index: 1;
display: inline-block;
background-color: #fff;
padding: 0 20px;
}

.life_ttl::after {
position: absolute;
z-index: 0;
content: "";
top: 13px;
left: 0;
width: 100%;
height: 1px;
background-color: #004c4c;
}
.life_ttl img{
height: 26px;
}


.life_shop{
margin-top: 6%;
}
.life_shop li{
margin-bottom: 1em;
}
.sec_shiomidai ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.sec_shiomidai ul .w486{
width: 48.6%;
}
.sec_shiomidai ul .w486 p{
line-height: 1.3em;
padding-top: 8px;
}
.sec_shiomidai ul .w486 img{
width: 100%;
height: auto;
}
.sec_shiomidai ul .flex_box li{
margin-bottom: 1em;
}

@media screen and (max-width: 767px) {
.sec_shiomidai ul .w486{
width: 100%;
margin-bottom: 1em;
}
.col2{
width: 48.6%;/*47.460937*/
}

.life_shop{
margin-top: 8%;
}
.life_ttl{
margin-bottom: 1.4em;
}
.life_ttl span {
height: 22px;
padding: 0 14px;
}
.life_ttl::after {
top: 11px;
}
.life_ttl img{
height: 22px;
}
}


/*** life_info **********************************/
.tabcontents-list{
display: flex;
justify-content: space-between;
}
.life_map{
	margin: 4em 0 0;
}
.map_point{
	width: 65%;
	height: 600px;
	/*width: calc(100% - 390px);*/
}
.map_point {
position: relative;
}
/*.map_point .lifemap_marker{
position: relative;
} */
.lifemap_marker iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}

.list_wrap{
	/*width: calc(100% - 780px);*/
	width: 32.5%;
	/*display: flex;
	justify-content: space-between;
	flex-flow: wrap;
	margin: 2em 0 5em;*/
}
/*.list_wrap .list_block{
	width: 49%;
}*/
p.p_life_cateName{
	font-size: 22px;
	font-size: clamp(16px, 2.2vw, 22px);
	text-align: center;
	color: #805458;
	margin-top: 1.5em;
}
.park p.p_life_cateName{ color: #698159;}
.education p.p_life_cateName{ color: #6285a1;}
.medical p.p_life_cateName{ color: #675572;}
.culture p.p_life_cateName{ color: #997850;}
.bank p.p_life_cateName{ color: #a46787;}


@media screen and (max-width: 1024px) {
.tabcontents-list{
	flex-direction: column;
}
	.map_point{
	width: 100%;
}
.list_wrap{
	width: 100%;
	margin: 1em auto 0;
}
}

@media screen and (max-width: 767px) {
.list_wrap .list_block{
	width: 100%;
}
.life_map{
	margin: 3em 0 0;
}
.map_point{
	height: 500px;
	/*width: calc(100% - 390px);*/
}
}
@media screen and (max-width: 440px) {
.map_point{
	height: 400px;
	/*width: calc(100% - 390px);*/
}
}



/*** float_info **********************************/
.float_info{
	/*width: 100%;*/
/*	font-size: 14px;*/
	font-size: 13px;
	font-size: clamp(12px, 2vw, 13px);
}
.float_info tr{
	border-bottom: 1px solid #777;
	display: flex;
	align-items: center;
	justify-content: space-between;
	}
.float_info th{
	position: relative;
	width: auto;
	/*width: calc(100% - 145px);*/
	padding: 1em 0;
	padding-right: 10px;
}
.float_info td{
	text-align: right;
	width: auto; /*145px*/
	padding: 1em 0;
}

/*.float_info th .name{
	position: relative;
	z-index: 1;
	background-color: #f2f5ef;
	padding-right: 10px;
}*/

.float_info th .num{
	display: inline-block;
	font-family: 'Oswald', sans-serif; 
	font-weight: 400;
	font-size: 12px;
	line-height: 17px;
	text-align: center;
	color: #fff;
	width: 18px;
	height: 18px;
	margin: -8px 5px 0 0;
	border-radius: 50% 50%;
}

.bank .float_info th .num{ background-color: #954f0e;}
.education .float_info th .num{ background-color: #004385;}
.park .float_info th .num{ background-color: #007f5a;}
.culture .float_info th .num{ background-color: #ef8337;}
.medical .float_info th .num{ background-color: #595757;}
.shopping .float_info th .num{ background-color: #ec7986;}

.float_info th .cap10.resp_autowrap{
	display: block;
	margin-top: 4px;
}


@media screen and (max-width: 1024px) {
	.float_info{
	font-size: 16px;
	font-size: clamp(13px, 2vw, 16px);
}

.float_info th .num{
	font-size: 15px;
	line-height: 23px;
	width: 24px;
	height: 24px;
	margin-right: 8px;
}
.float_info th .cap10.resp_autowrap{
	display: inline-block;
	margin-top: 4px;
	margin-left: 4px;
}
}
@media screen and (max-width: 767px) {
.float_info th{
	width: auto;
}
.float_info th:after{
	border: none;
}
.float_info th .num{
	font-size: 12px;
	line-height: 20px;
	width: 20px;
	height: 20px;
}
}

@media screen and (max-width: 440px) {
.float_info th .cap10.resp_autowrap{
	display: block;
	margin-left: 0;
}

.float_info th .num{
	line-height: 19px;
}
}

.wrap_bnr{
margin: 4em 0;
}
.wrap_bnr figure{
max-width: 800px;
margin: auto;
border: 1px solid #000;
}

.wrap_bnr figure a:hover{
opacity: 0.5;
}

/*************************************************************************************
*************************************************************************************

print

*************************************************************************************
**************************************************************************************/
@media print {

}



/*************************************************************************************
*************************************************************************************
sec_merit
*************************************************************************************
**************************************************************************************/

.top_btn {
	display: flex ;
	justify-content: space-between;
	gap: 10px;
	width: 90%;
	margin: 0 auto;
	pointer-events: auto !important;
}

.top_btn > a {
	width: calc((100% - 30px)/4);
	display:block;
}

.top_btn > a:hover img {
	filter: brightness(1.05) !important; /* 画像をパッと明るくして光らせる効果 */
	opacity: 0.9 !important;              /* ほんの少しだけ透明感を出す */
	cursor: pointer;           /* 指マークにする */
}

.top_btn img {
	width:100%;
	height:auto;
	vertical-align: bottom;
}

.note{
position: absolute;
right: 6px;
bottom: 4px;
font-size: 10px;
}

.note_white{
color: #fff
}

/*******************************************************************
merit1,3 section layout
********************************************************************/
/* セクション全体の余白と最大幅の制限 */
.merit1 {
	margin: 30px auto 0;
	padding: 200px 20px;
	position: relative;
	z-index: 5; /* 波形背景より前面に出すため */
}

.merit1 .image_MR {
	position: relative; /* 子要素(.note)の配置基準にします */
	width: 55%;         /* PC時の画像エリアの幅 */
}

.merit1 .image_MR img {
	display: block;
	width: 100%;
	height: auto;
}

/* PC時の横並びレイアウト（Flexbox） */
.movieWrapper {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px; /* 要素間の余白 */
}

.imageWrapper_1 {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px; /* 要素間の余白 */
}

/* 動画エリアの幅と16:9の比率維持 */
.iframeWrapper {
	position: relative;
	padding-top: 30.93%; /* 55%に対する16:9の比率を計算 */
	box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 軽い影で動画を引き締める */
	width: 100%;
}
.iframeWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* テキストエリアの幅 */
.txtArea {
	width: 41%;
	text-align: justify;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* 「MERIT 1」の大きな飾り文字（深い緑色） */
.num_deco {
	display: block;
	font-size: 35px;
	font-size: clamp(32px, 3.5vw, 42px);
	font-family: "Times New Roman", Georgia, serif;
	color: #004c4c; /* お手持ちのCSSの深い緑色に統一 */
	line-height: 1;
	margin-bottom: 15px;
	letter-spacing: 0.05em;
}

/* タイトル（太字、やや大きめ） */
.txtArea .ttl {
	font-size: 22px;
	font-size: clamp(18px, 2vw, 22px);
	color: #333;
	line-height: 1.4;
	margin-bottom: 20px;
	border-bottom: 1px solid black;
	padding-bottom: 12px;
	line-height: 1.1;
}

/* 本文テキスト */
.txtArea .txt {
	font-size: 15px;
	line-height: 1.75;
	color: #444;
	margin: 0;
}

.movie {
	width:100%;
	height:auto;

}


/*--------------------------------------------------
 タブレット・スマホ用のレスポンス対応 (767px以下)
--------------------------------------------------*/
@media screen and (max-width: 767px) {
	/* 1. 親要素を折り返し可能にする */
	.top_btn {
		flex-wrap: wrap;       /* 子要素がはみ出た時に折り返す設定 */
		justify-content: center; /* 中央に寄せる（隙間を均等にしたい場合は space-between でも可） */
		gap: 10px;             /* スマホ時のボタン同士の縦横の隙間（お好みで調整してください） */
	}

	/* 2. ボタン1つの横幅を「2列並び」のサイズに変更する */
	.top_btn > a {
		/* 全体100%から隙間分（10px）を引いた幅を、2等分（半分）にする計算 */
		width: calc((100% - 10px) / 2); 
	}

	/* 3. 画像の横幅を親要素（aタグ）に追従させる */
	.top_btn img {
		width: 100%;           /* 固定値の240pxを解除し、スマホ画面幅に合わせる */
		height: auto;
	}

	.merit1 {
		padding: 80px 15px;
	}
	
	.merit1 .image_MR {
		width: 100%;    /* スマホ時は横幅いっぱいに広げる */
	}

	/* 縦並びに変更 */
	.movieWrapper {
		flex-direction: column;
		gap: 25px;
	}
	
	.imageWrapper_1 {
		flex-direction: column;
		gap: 25px;
	}

	/* 横幅を100%いっぱいに広げる */
	.iframeWrapper {
		width: 100%;
		padding-top: 56.25%; /* スマホ時も16:9を維持 */
	}
	
	.txtArea {
		width: 100%;
	}
	
	.num_deco {
		margin-bottom: 10px;
	}
	
	.txtArea .ttl {
		margin-bottom: 15px;
	}
}


/*******************************************************************
merit2,4 section layout
********************************************************************/
/* セクション全体の余白と最大幅 */
.merit2 {
	margin: 0 auto;
	padding: 80px 20px;
	position: relative;
	z-index: 5;
}

/* PC時の横並び（テキストを左、画像を右にするためにrow-reverseを指定） */
.merit2 .imagewrapper_2 {
	display: flex;
	flex-direction: row-reverse; 
	justify-content: space-between;
	align-items: flex-end; /* 画像とテキストを下揃えにする */
	gap: 40px;
}

/* 画像エリアの幅 */
.merit2 .image_MR {
	width: 55%;
	position:relative;
}
.merit2 .image_MR img {
	display: block;
	width: 100%;
	height: auto;
}

/* テキストエリア全体の調整 */
.merit2 .txtArea {
	width: 41%;
	text-align: justify;
	display: flex;
	flex-direction: column;
	justify-content: flex-end; /* テキスト内の要素を完全に下吸着させる */
}

/* 「MERIT 2」の飾り文字 */
.merit2 .num_deco {
	display: block;
	font-size: 42px;
	font-size: clamp(32px, 3.5vw, 42px);
	font-family: "Times New Roman", Georgia, serif;
	color: #004c4c;
	line-height: 1;
	margin-bottom: 15px;
	letter-spacing: 0.05em;
}

/* タイトル（下線を画像の下端にぴったりとくっつける） */
.merit2 .txtArea .ttl {
	font-size: 22px;
	font-size: clamp(18px, 2vw, 22px);
	color: #333;
	margin-bottom: 20px;
	border-bottom: 1px solid #004c4c; /* デザインの下線 */
	padding-bottom: 4px;              /* 文字と下線の隙間を詰める */
	line-height: 1.3;                 /* 2行になるための自然な行高 */
}

/* 本文テキスト */
.merit2 .txtArea .txt {
	font-size: 15px;
	line-height: 1.75;
	color: #444;
	margin: 0;
}

.schedule img{
	border: 1px solid black;
	box-sizing: border-box;
	margin-bottom: 200px;
	padding:20px;
}

.view p{
	margin-right:20px;
	font-size:10px;
	text-align: right;
}

/*--------------------------------------------------
 タブレット・スマホ用のレスポンス対応 (767px以下)
--------------------------------------------------*/
@media screen and (max-width: 767px) {
	.merit2 {
		padding: 55px 15px;
	}
	
	/* スマホ時は通常の縦並び（画像が上、テキストが下）に戻す */
	.merit2 .imagewrapper_2 {
		flex-direction: column;
		gap: 25px;
	}
	
	.merit2 .image_MR {
		width: 100%;
	}
	
	.merit2 .txtArea {
		width: 100%;
	}
	
	.merit2 .num_deco {
		margin-bottom: 10px;
	}
	
	.merit2 .txtArea .ttl {
		margin-bottom: 15px;
	}

	.schedule img{
		border: 1px solid black;
		box-sizing: border-box;
		margin-bottom: 100px;
		padding:5px;
	}
}

/* ===================================================================
   merit1 竣工動画エリアの縦並び専用レイアウト（追加分）
   =================================================================== */

/* 1. 動画セクション全体の配置調整（写真・テキストブロックの下に配置） */
.merit1 div.movie.mx1024 {
    display: flex !important;
    flex-direction: column !important; /* 上から下に確実に縦並びにする */
    align-items: flex-start !important; /* 左揃え */
    width: 100% !important;
    height: auto !important;
    margin-top: 60px !important;        /* 写真・テキストとの間の余白 */
}

/* 2. 「竣工動画」テキストの調整 */
.merit1 div.movie.mx1024 .txt {
    font-size: 22px !important;
    font-size: clamp(18px, 2vw, 22px) !important; /* タイトルと同じサイズ感に統一 */
    font-weight: bold !important;
    color: #333 !important;
    text-align: left !important;
}

/* 3. 動画プレイヤーのコンテナを16:9で画面幅いっぱいに広げる */
.merit1 div.movie.mx1024 picture {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;    /* 横幅に合わせて自動で16:9のサイズを維持 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; /* 軽い影で動画を引き締める */
}

/* 4. iframe（YouTube本体）をコンテナいっぱいに広げる */
.merit1 div.movie.mx1024 iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* --- タブレット・スマホ用のレスポンス対応 (767px以下) --- */
@media screen and (max-width: 767px) {
    .merit1 div.movie.mx1024 {
        margin-top: 10px !important;    /* スマホ時は上の余白を少し狭く */
    }
    .merit1 div.movie.mx1024 .txt {
        margin-bottom: 15px !important; /* スマホ時は動画との余白を少し狭く */
    }
}



.movie-txt{
	background-color: #004c4c;
	color:#ffffff !important;
	padding:15px;
	text-align:center!important;
	font-size:20px;
	width:100%;
	box-sizing: border-box;
	margin-bottom:10px;
}