@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: 740px;}
#spot.spot .tit {margin-bottom: 20px;}

#area4 {position: relative; text-align: center;}
#area4 .inr-c {position: absolute; left: 50%; top: 3em; transform:translateX(-50%);}
#area4 .item {background-color: #fff;}
#area4 .tit_mf1 {color: #000; font-family: 'GmarketSans'; font-size: 1.2em; letter-spacing:-0.03em; line-height: 1.5; font-weight: 600;}
#area4 .tit_mf1 span {font-weight: 100; font-size: 1.2em; letter-spacing:-0.075em;}




.boxs {z-index: 1; position: relative; border-radius: 0; width: 100%; background-color: #fff; box-sizing:border-box;}
.boxs .com {display: flex; flex-direction: row-reverse;}
.boxs .icon1 img {max-height: 1.5em;}
.boxs .lin {padding: 5px 50px; background-color: #4d85c1;}
.boxs .lin p {color: #fff; font-weight: 600;}
.boxs .lin p em {font-size: .9em; font-weight: 300;}
.boxs .txt {flex:1; word-break:keep-all; -webkit-box-sizing: border-box; moz-box-sizing: border-box; box-sizing: border-box;}
.boxs .txt > p {padding: 20px 50px 50px; text-align: left;}
.boxs .txt > p.pp {padding-bottom: 20px;}
.boxs .tit_mf1 {position: relative; padding: 50px 50px 20px; margin-bottom: 0; font-weight: 100; font-family: 'yg-jalnan'; display: flex; align-items:center; justify-content: space-between;}
.boxs .tit_mf1.pp {padding-top: 20px;}
.boxs .tit_mf1 > div {position: relative; display: inline-flex; align-items:center;}
.boxs .tit_mf1 strong {z-index: 1; position: relative; display: inline-block; padding-top: .1em; margin-right: .3em; font-size: 1.3em; color: #1e65b1;}
.boxs .tit_mf1 span {font-size: .8em;}
.boxs .img {flex-shrink: 0; width: 26%;}
.boxs .img img {width: 100%;}
.boxs .com2 {position: relative;}
.boxs .icon2 {z-index: 2; overflow:hidden; position: absolute; left: 50px; margin-top: -30px; width: 116px; height: 116px; border-radius: 20px;}
.boxs .com2 .lin {position: relative; padding-left: 190px;}
.boxs .com2 .lin::after {content:""; position: absolute; left: 20px; top: 50%; width: 20px; height: 1px; background-color: #fff;}
.boxs .com2 .lin::before {content:""; position: absolute; left: 20px; top: 50%; width: 20px; height: 1px; background-color: #fff; transform:rotate(90deg);}
.boxs .com2 > p {padding: 20px 40px 40px 190px;}
.boxs .com2.ty2 .lin {padding-left: 50px;}
.boxs .com2.ty2 > p {padding-left: 50px;}





.box_float.al-c {align-items:center; margin-top: -40px;}
.box_float.al-b {align-items:flex-end; margin-top: -80px;}



.spot .tit {display: inline-block; }
.spot .img {margin: 0 auto;}
.warm2_wrap {max-width:1235.99px; margin: 0 auto;}

#area1 {padding: 0;}




#spot.spot .inr-c {margin-bottom: 90px;}
#spot.spot .tit {padding-top: 10px; font-family: 'yg-jalnan'; font-size: 53px;}
#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%);}



@media all and (max-width:960px){
	.boxs .tit_mf1 {padding: 25px 30px 20px;}
	.boxs .img {width: 35%;}
	.boxs .lin {padding: 5px 30px;}
	.boxs .txt > p {padding: 20px 30px 30px;}

	.boxs .icon2 {width: 80px; height: 80px; border-radius: 12px; margin-top: -20px;}
	.boxs .com2 .lin {padding-left: 150px;}
	.boxs .com2 > p {padding: 20px 30px 30px 150px;}

	.boxs .tit_mf1 strong {font-size: 1.1em;}
	.boxs .tit_mf1 span {font-size: .7em;}
	.boxs .icon1 img {max-height: 1em;}

	#area4 .inr-c {position: static; padding-top: 2em; margin-bottom: -1em;width: 90%; left: 0; transform:translateX(0);}
}


@media all and (max-width:798px){ 
	 #area4 .tit_mf1 {position: static; width: 100%; font-size: .9em; margin-bottom: 0; box-sizing:border-box;}

	 .warm2_wrap .tit_mf1 strong {font-size: 1em;}

	#spot.spot {height: 300px; }
	#spot.spot .inr-c {padding-left: 0; margin-bottom: 50px;}
	#spot.spot p.t1 {margin-bottom: .5em !important; font-size: 1em !important; margin-bottom: 0;}
	#spot.spot .tit {letter-spacing:-0.0325em; font-size: 26px; margin-bottom: 15px; padding-top: 0;}

	.p_summary {margin-top: 2px !important;}

	.tit_mf1 {margin-bottom: .6em;}
	.tit_mf1 > span {display: block; font-size: .75em; letter-spacing:-0.0325em;}



	.warm2_wrap .tit_mf1 strong {margin-right: 0; font-size: .9em;}

	.box_float.ml2 .item {margin-bottom: 0;}
	.box_float.ml2 .item:first-child {margin-bottom: 30px;}



	#area4 {padding-top: 0; padding-bottom: 3em; min-height: 250px;}
	#area4 .tit_mf1 span {font-size: 1.15em;}


	.txt_icon1 {text-align: right; margin-top: -50px;}
	.txt_icon2 {padding-bottom: 0; width: 100%; left: 0; padding: 2em 0;}
	.txt_icon2 img {max-width: 80%;}

	.box_float.al-b {margin-top: 0;}
	.boxs .tit_mf1 > div {width: 100%; display: block;}
	.boxs .tit_mf1 > div.icon1 {padding: 5px 0; text-align: right;}


	
}

@media all and (max-width:480px){ 
	.boxs .com {display: block;}
	.boxs .tit_mf1 {display: block; padding: 20px 15px 0;}
	.boxs .tit_mf1 > div {width: 100%; display: block;}
	.boxs .tit_mf1 > div.icon1 {padding: 5px 0; text-align: right;}


	.boxs .img {width: 100%;}

	.boxs .lin {padding: 5px 15px;}
	.boxs .txt > p {padding: 20px 15px 30px;}
	.boxs .com2 > p {padding: 20px 15px 20px;}

	.boxs .com2 .lin {padding-left: 100px;}
	.boxs .icon2 {width: 60px; height: 60px; margin-top: -15px; left: 30px; border-radius: 10px;}
	.boxs .com2 .lin::before {width: 10px; left: 13px;}
	.boxs .com2 .lin::after {width: 10px; left: 13px;}
}