@charset "utf-8";

@media (max-width: 1024px){
	.page-header.type1 .container .visual_tit {gap: 50px;}
	
	.s1 .heart {font-size: 26px;}
	
	.s1 #arti1 .why .box dl dt {font-size: 22px;}
	
	.s1 #arti3 .advantage {padding: 69px 60px 60px;}
}

@media (max-width: 768px) {
	.page-header .container h2 {font-size: 40px;}
	.page-header .container p {font-size: 20px;}
	
	.page-header.type1 {height: auto; padding: 50px 0;}
	.page-header.type1 .container {padding-top: 0;}
	.page-header.type1 .container .visual_tit {gap: 20px; flex-wrap: wrap;}
	.page-header.type1 .container .visual_tit figure {max-width: 200px;}
	.page-header.type1 .container .visual_tit .tit h2 {text-align: center;}
	.page-header.type1 .container .visual_tit .tit h2::before {left: 50%; transform: translateX(-50%);}
	.page-header.type1 .container .visual_tit .tit p {text-align: center;}
	
	.tab > .container {padding: 0;}
	.tab ul li a {font-size: 16px; line-height: 1.3;}
	
	.s1 {padding: 100px 0 140px;}
	.s1 article ~ article {margin-top: 130px;}
	.s1 .heart {font-size: 22px; padding-left: 30px;}
	.s1 .heart ~ .heart {margin-top: 80px;}
	.s1 .p48 {padding-left: 0;}
	.s1 article p {font-size: 18px;}
	.s1 article p br {display: none;}
	.s1 .mt22 {margin-top: 10px;}
	.s1 .mt50 {margin-top: 20px;}
	.s1 .mt60 {margin-top: 30px;}
	.s1 .mt100 {margin-top: 50px;}
	.s1 .mt120 {margin-top: 60px;}
	.s1 h5.start-tit {font-size: 20px; padding-left: 20px;}
	.s1 h5.start-tit::before {left: 5px; top: 13px;}
	.s1 .start .item {padding: 15px; gap: 20px; margin-top: 30px;}
	.s1 .start .item ~ .item {margin-top: 15px;}
	.s1 .start .item figure {max-width: 50px;}
	.s1 .start .item dl {gap: 10px;}
	.s1 .start .item dl dt {font-size: 20px; max-width: 80px; padding-right: 10px;}
	.s1 .start .item dl dt::after {height: 18px;}
	.s1 .start .item dl dd {font-size: 18px;}
	
	.s1 article .upper h3 {font-size: 26px;}
	.s1 article .upper h3::before {font-size: 80px;}
	.s1 article .upper h5 {font-size: 30px; margin-top: 15px;}
	.s1 .tip {margin-top: 80px; padding: 16px 20px 40px;}
	.s1 .tip h4 {font-size: 26px;}
	.s1 .tip h4 > span {margin-left: 0; display: block;}
	.s1 .tip h5 {font-size: 22px; padding-left: 35px;}
	.s1 .tip h5::before {width: 30px; background-size: 30px auto; top: -7px;}
	.s1 .tip p br {display: none;}
	.s1 .tip small {margin-top: 30px;}
	
	.s1 .tip.ty2 {margin-top: 60px; padding: 20px; flex-wrap: wrap; gap: 20px;}
	.s1 .tip.ty2 figure {margin-top: 0;}
	.s1 .tip.ty2 .txt {width: 100%;}
	.s1 .tip.ty2 .txt h5 > span {font-size: 20px; margin-left: 5px;}
	
	.s1 .tip.ty3 figure {max-width: 180px; margin: 0 auto;}
	.s1 .tip.ty3 h5 {background-position: 0 50%;}
	.s1 .tip.ty3 .txt h5 > span {margin-top: 0;}
	
	.s1 .tip.ty4 {flex-wrap: wrap; gap: 15px}
	.s1 .tip.ty4 .txt {width: 100%;}
	
	.s1 article .step {margin-top: 50px;}
	.s1 article .step .num {font-size: 20px;}
	.s1 article .step .num span {font-size: 18px; padding: 0 15px 3px 15px; margin-right: 10px;}
	.s1 article .step small {font-size: 16px;}
	
	.s1 #arti1 .why {margin-top: 40px;}
	.s1 #arti1 .why .box {padding: 25px; gap: 20px; flex-wrap: wrap;}
	.s1 #arti1 .why .box dl {width: 100%;}
	.s1 #arti1 .why .box dl dt {font-size: 20px;}
	.s1 #arti1 .why .box dl dd {font-size: 18px;}
	.s1 #arti1 .why .box dl dd > i {font-size: 16px;}
	.s1 #arti1 .why .box dl dd br {display: none;}
	.s1 #arti1 .why .box dl dd > small {font-size: 16px; margin-top: 15px;}
	
	.s1 #arti3 .upper {margin-top: 60px;}
	.s1 #arti3 .advantage {padding: 30px 15px;}
	.s1 #arti3 .advantage h4 {font-size: 28px;}
	.s1 #arti3 .advantage h4 strong {font-size: 24px;}
	.s1 #arti3 .advantage h5 {font-size: 24px; align-items: center;}
	.s1 #arti3 .advantage h5 > img {max-width: 30px;}
	.s1 #arti3 .advantage p strong {font-size: 18px;}
	.s1 #arti3 .advantage figure {max-width: 280px; margin: 5px auto;}
	.s1 #arti3 h6 {font-size: 20px; line-height: 46px;}
	.s1 #arti3 .know-how {margin-top: 50px;}
	.s1 #arti3 .know-how p.dot {font-size: 18px;}
	.s1 #arti3 .know-how p {font-size: 16px;}
	.s1 #arti3 .know-how .info {padding: 20px 15px;}
	.s1 #arti3 .know-how .upper {margin: 80px 0;}
	
	.s1 #arti4 a {max-width: 200px; line-height: 50px; font-size: 18px; margin-top: 40px;}
	.s1 #arti4 .upper.mt140 {margin-top: 100px;}
	
	.s1 .start .d-day.mt20 p strong > br {display: block;}
}

@media (max-width: 480px) {
	.page-header .container h2 {font-size: 34px;}
	.page-header .container h2::before {width: 38px; background-size: 38px auto;}
	.page-header .container p {font-size: 18px;}
	
	.tab ul li a {font-size: 14px; height: 52px;}
	
	.s1 .heart {font-size: 20px;}
	.s1 article p {font-size: 16px;}
	
	
	.s1 #arti1 figure.m-20 {margin-top: 0;}
	.s1 #arti1 .why .box {padding: 25px 15px; gap: 10px;}
	.s1 #arti1 .why .box dl dt {font-size: 18px;}
	.s1 #arti1 .why .box dl dd {font-size: 16px;}
	.s1 #arti1 .why .box dl dd > i {font-size: 14px; display: block;} 
	.s1 #arti1 .why .box dl dd > small {font-size: 14px;}
	
	.s1 article .upper h3 {font-size: 22px;}
	.s1 article .upper h5 {font-size: 26px;}
	
	.s1 .tip h4 {font-size: 22px;}
	.s1 .tip h5 {font-size: 20px;}
	.s1 .tip.ty2 .txt h5 > span {font-size: 18px;}
	.s1 h5.start-tit {font-size: 18px;}
	.s1 article .step .num {font-size: 18px;}
	.s1 article .step .num span {font-size: 16px; margin-right: 5px;}
	.s1 .start .item dl dt {font-size: 18px;}
	.s1 .start .item dl dd {font-size: 16px;}
	.s1 .start .item {padding: 10px 30px;}
	
	.s1 #arti3 .advantage h5 {font-size: 22px;}
	.s1 #arti3 .advantage h4 {font-size: 24px;}
	.s1 #arti3 .advantage h4 strong {font-size: 22px; line-height: 1.2;}
	.s1 #arti3 .advantage small {font-size: 14px;}
	.s1 .start .d-day {background-size: 330px auto; padding: 10px 15px 33px;}
	.s1 .start .d-day > span {font-size: 18px;}
	.s1 .start .d-day p {font-size: 16px; margin-top: 29px;}
	.s1 .start .d-day.mt20 {padding: 15px;}
	.s1 .start .d-day.mt20 p {margin-top: 20px;}
	.s1 #arti3 h6 {font-size: 16px;}
	.s1 #arti3 .know-how h5 {font-size: 18px; max-width: 220px;}
	.s1 #arti3 .know-how p.dot {font-size: 16px;}
	.s1 #arti3 .know-how p {font-size: 14px;}
	
	.s1 #arti5 .real-cont {margin-top: 40px;}
}