@font-face {
    font-family: 'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#spot.spot {height: auto;}

#area4 {position: relative; z-index: 1;}
#area4 .item {background-color: #fff;}
#area4 .tit_mf1 {color: #1760d2; font-family: 'GmarketSans'; letter-spacing:-0.03em; line-height: 1.5; font-weight: 700;}
#area4 .tit_mf1 span {font-size: 1.2em; letter-spacing:-0.075em;}


.boxs {z-index: 1; position: relative; margin-bottom: 5%; display: flex; align-items:flex-end; flex-grow:1; border-radius: 0; width: 100%; box-sizing:border-box;}
.boxs .img {position: relative; z-index: 1; min-width: 45%;}
.boxs .img img {width: 100%;}
.boxs .txt {
	position: relative;
	padding:2em;
	word-break:keep-all; -webkit-box-sizing: border-box; moz-box-sizing: border-box; box-sizing: border-box; 
}
.boxs .txt:after {
	content:"";
	position: absolute; left: -82%; bottom: 0; width: 182%; height: 100%;
	border-top: 2px dashed #1760d2; border-bottom: 2px dashed #1760d2;
	background-image: url('/2025_10/images/warm2/bg.png');
	background-repeat: no-repeat;
	background-position: 0 bottom;
	background-size: 100% auto;
}
.boxs .txt > * {position: relative; z-index: 1;}
.boxs .txt p {text-align: left;}
.boxs .tit_mf1 {position: relative; padding-top: 0; font-weight: 300; color: #1760d2; text-align: left;}
.boxs .tit_mf1 strong {display: block; margin-right: .3em;}
.boxs .tit_mf1 span {font-size: .8em;}

.boxs.ty2 {align-items:center;}
.boxs.ty2 .img {min-width: 30%; text-align: center;}
.boxs.ty2 .img img {width: 80%;}
.boxs.ty2 .txt:after {left: -43%; width: 143%;}


.boxs .txt .ico {position: absolute; bottom: 100%;}
.boxs .txt .ico.ty1 {right: 0; width: 30%; margin-bottom: 4px;}
.boxs .txt .ico.ty2 {right: 0; width: 55%; margin-bottom: 4px;}
.boxs .txt .ico.ty3 {right: 0; top:100%; width: 30%;}
.boxs .txt .ico.ty4 {right: 0; width: 25%; margin-bottom: 4px;}
.boxs .txt .ico.ty5 {right: 40%; bottom: auto; top: 100%; width: 40%;}




.item {margin-bottom: 2em;}
.item p {position: relative; z-index: 1;}


.im_tit {position: absolute; left: 0; bottom: 100%;}
.im_tit.ty1 {width: 25%; left: 3%;}
.im_tit.ty2 {width: 100%; bottom: 96%; text-align: center;}


.spot .tit {display: inline-block; }
.spot .img {margin: 0 auto;}
.warm2_wrap {max-width:1235.99px; margin: 0 auto;}

#area1 {padding: 0;}

.tit_icon {text-align: center; position: relative; margin-left: -2em; width: calc(100% + 4em);}
.tit_icon.ty1 {margin-bottom: -4em; margin-left: 0; width: 100%;}
.tit_icon.ty2 {margin-bottom: -5em;}
.tit_icon.ty3 {margin-bottom: -5em;}



#spot.spot .inr-c {margin-bottom: 90px;}
#spot.spot .tit {padding-top: 10px; font-family: 'yg-jalnan';}
#spot.spot .tit em {position: relative;}
#spot.spot .tit em::after {content:""; position: absolute; left: 50%; top: -.4em; width: .2em; height: .2em; background-color: #e54459; border-radius: 50%; transform:translateX(-50%);}


.box_float .item {text-align: left;}



@media all and (max-width:1120px){
	.boxs .img.icon3 {width: 20%;}
	.boxs .img.icon4 {top: -17%;}
} 



@media all and (max-width:798px){ 
	 #area4 img {width: 50%;}
	 #area4 .tit_mf1 {position: static; width: 100%; font-size: .9em; padding: 1em; box-sizing:border-box;}

	 .warm2_wrap .tit_mf1 strong {font-size: 1em;}

	#spot.spot .inr-c {padding-left: 0;}
	#spot.spot p.t1 {font-size: 1em !important;}
	#spot.spot .tit {letter-spacing:-0.0325em; font-size: 30px;}

	.boxs {display: block; margin-bottom: 3em;}
	.boxs .txt {margin-right: 0; padding: 1em;}
	.boxs .txt:after {left: 0; width: 100%;}
	.boxs.ty2 .img {padding-bottom: 2em;}
	.boxs.ty2 .img img {width: 40%;}
	.boxs.ty2 .txt:after {left: 0; width: 100%;}
	.boxs .img {text-align: center;}
	.boxs .img img {width: 80%;}
	.p_summary {margin-top: 2px !important;}

	.tit_mf1 {margin-bottom: .6em;}
	.tit_mf1 > span {display: block; font-size: .75em; letter-spacing:-0.0325em;}

	.tit_icon {margin-left: -1em; width: calc(100% + 2em);}
	.tit_icon.ty1 {margin-bottom: -2em;}

	.im_tit.ty1 {width: 15%;}
	.im_tit.ty2 {position: static;}

	.boxs .txt .ico.ty1 {margin-bottom: 0;}
	.boxs .txt .ico.ty2 {margin-bottom: 0;}

}