@charset "utf-8";

@media screen and (min-width: 769px) {
	body {
		font-size: 1.8em;/*18px*/
    }
	
	/*margin*/
	.mb20{margin:0 0 20px 0;}
	.mb40{margin:0 0 40px 0;}
	.mb60{margin:0 0 60px 0;}
	.mb80{margin:0 0 80px 0;}

	/*padding*/
	.ptb80{padding: 8rem 0;}
	.ptb140{padding:14rem 0;}

	.contents{
		max-width:1000px;
		width: 86%;
		margin:0 auto;
	}
	
	/*flex*/
	.flex{
		display: flex;
		flex-wrap: wrap;
	}
	.flex-bt{
		justify-content: space-between;
	}
	.align-c{
		align-items: center;
	}
	.order2{order: 2;}

	/*====================================
	 HEADER
	====================================*/

	/*====================================
	 MAIN
	====================================*/
	.main{
		background: linear-gradient(180deg, #ECF4FA 0%, #FFF9E9 100%);
		min-height: 980px;
	}

	.main .contents{
		max-width: 1110px;
	}
	h2{
		font-size: 5.4rem;
	}
	h2 .f-en{
		font-size: 7rem;
	}
	h3{
		font-size: 4rem;
	}
	#wrap .fs-bg{
		font-size: 6rem;
	}
	#wrap .fs-mini{
		font-size: 2.5rem;
	}
	
	/*cta*/
	.cta .seal-ph{
		margin: 0 auto;
		width: 65%;
	}
	.cta .first{
		margin-bottom: -3rem;
		font-size: 3rem;
	}
	.cta .first span {
		padding: 1.5rem 4rem;
	}
	.cta .product{
		margin: 0 6% 4rem;
	}
	.cta .product .list1 {
		display: flex;
		flex-direction: initial;
		justify-content: center;
	}
	.cta .product .list1 li {
		display: inline-block;
	}
	.cta .product h3 {
		padding: 1.5rem;
		font-size: 3.6rem;
	}
	.cta .gentei {
		font-size: 2.8rem;
	}
	.cta .product ul {
		padding: 2rem;
		gap: 1rem;
	}
	.cta .product .list1 li {
		padding: 0.75rem;
	}
	.cta .product li{
		font-size: 2rem;
	}
	.cta .price-box {
		gap:3rem;
	}
	.cta .price-box .align-c{
		align-items: baseline;
		gap: 1rem;
	}
	.cta .offbox {
		padding: 1rem;
		font-size: 2rem;
		text-align: right;
	}
	.cta .offbox .num {
		font-size: 4.8rem;
	}
	.cta .offbox span{
		font-size: 2.4rem;
	}
	.cta .tujo {
		font-size: 2rem;
	}
	.cta .price {
		font-size: 2.4rem;
	}
	.cta .price .num {
		font-size: 7.5rem;
	}
	.cta .product .caution {
		padding: 0 0 4rem;
		text-align: center;
	}

	.cta .kaiketsu .contents{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.cta .kaiketsu h2 {
		font-size: 3.6rem;
	}
	.cta .kaiketsu figure {
		width: 25%;
		top: -7rem;
		left: unset;
		transform: unset;
		margin-bottom: -8rem;
		margin-right: 2rem;
	}
  
	/*onayami*/
	.onayami{
		background: #C5C5C5;
		/*linear-gradient(180deg, #252525 0%, #c4c4c4 20%, #FBF4DB 40%, #EAD8BF 100%)*/
	}
	.onayami .name .txt {
		font-size: 5.6rem;
	}
	.onayami .tape-img{
		width: 80%;
		margin: 0 auto 4rem;
	}
	.onayami h3{
		margin: -10rem auto 0;
	}
	.after h2{
		max-width: 65%;
		margin: 0 auto;
	}
	.after{
		padding: 0 0 8rem;
	}
	.kieta .contents,
	.cover .contents{
		max-width: 860px;
	}
	.kieta h4 {
		margin-bottom: -1.5rem;
		padding: 0.5rem 4rem 2rem;
		font-size: 3.6rem;
	}
	.kieta h4::after {
		width: 40px;
		height: 20px;
		bottom: -18px;
	}
	.kieta h4 span{
		font-size: 2.2rem;
	}
	.kieta ul li {
		padding: 0.5rem 0 0 3rem;
		font-size: 2.4rem;
	}
	.kieta ul li::before {
		width: 22px;
		height: 22px;
		top: 24px;
	}
	.cover figure{
		margin: 0 auto 2rem;
		width: 70%;
	}
	.cover .box-blur{
		padding: 3rem;
	}
	.onayami .one {
		padding: 6rem 0;
		background: url("../images/onayami_bg_sp.webp") no-repeat center top -150px #000;
		background-size: cover;
	}
	.onayami .one h4 {
		font-size: 3rem;
	}
	.onayami .one h4 span {
		font-size: 4.4rem;
	}
  
	/*reason*/
	.reason .ttl {
		padding: 7rem 0 3rem;
	}
	.reason h3 .step {
		margin-bottom: 2rem;
		font-size: 2.2rem;
	}
	.reason h3 .step::before {
		font-size: 6.8rem;
		left: 8.5rem;
	}
	.reason h3 .step::after {
		width: 300px;
		left: 17rem;
	}
	.reason figure{
		margin: 2rem 0 0 0;
		width: 58%;
	}
	.reason p{
		padding: 3rem;
		width: calc(40% - 6rem);
		left: -4rem;
	}
	.reason .box-wrap2 figure{
		margin: 1rem 0 0rem 0%;
		width: 57%;
		order: 1;
	}
	.reason .box-wrap2 p{
		left: 4.5rem;
		width: calc(41% - 6rem);
	}
	.reason .box{
		margin: 2rem auto;
		width: 100%;
	}
	.reason .p-box-last{
		width: calc(100% - 6rem);
		left: 0;
	}
	
	/*long*/
	.long h2{
		font-size: 2.8rem;
	}
	.long h2 span{
		font-size: 4.2rem;
	}
	.long .box-wrap{
		display: flex;
		justify-content: space-between;
	}
	.long .box-wrap dl{
		width: 48%;
		margin: 0;
	}
	.long dt{
		left: 2.5rem;
	}
	.long dd {
		padding: 2rem 2.5rem 7rem;
	}
	
	/*howto*/
	.howto .contents{
		max-width: 860px;
	}
	.howto .num span {
		padding: 0.25rem 3rem;
		font-size: 2.4rem;
	}
	.howto dl{
		padding: 3rem;
	}
	.howto dt {
		font-size: 3rem;
	}
	.howto .finish::before,
	.howto .finish::after{
		height: 120px;
		top: -119px;
	}
	.howto .finish {
		padding: 8rem 0;
	}
	.finish .box-wrap{
		padding: 0 0 4rem;
	}
	#wrap .finish .fs-bg {
		font-size: 4.8rem;
	}
	.finish h3{
		font-size: 2.8rem;
	}
	.finish h3 .f-marker{
		font-size: 4.4rem;
	}
	
	/*support*/
	.support .ttl-box{
		padding: 1rem 0;
		font-size: 2.2rem;
	}
	.support dl {
		width: 49%;
	}
	.support .w-box1{
		padding: 3rem 3rem 1rem;
	}

	/*voice*/
	.voice .ttl{
		padding: 7rem 0 3rem 0;
	}
	.voice .ttl p{
		font-size: 2rem;
	}
	.voice .contents{
		max-width: 860px;
	}
	.voice .box-wrap{
		margin: 0 0 4rem;
	}
	.voice .ttl-box figure img{
		margin: 0 0 -5.5rem -15%;
		width: 160px;
		height: 160px;
	}
	.voice .ttl-box h3{
		font-size: 5rem;
	}
	.voice .txt-box{
		padding: 3rem 4rem;
	}
	.voice .txt-box h4{
		margin: 2rem 0;
		padding-bottom: 2rem;
		font-size: 3rem;
	}
	
	/*faq*/
	#wrap .faq dt{
		padding-left: 4.4rem;
		font-size: 2.4rem;
	}
	.faq dt::before {
		font-size: 3.6rem;
	}
	.faq dt, .faq dd {
		padding: 2.5rem 0;
	}
	
	/*about*/
	.about{
		padding: 0 0 6rem;
	}
	.about .contents{
		padding-top: 40px;
		max-width: 860px;
	}
	.about .box-wrap{
		padding: 4rem;
	}
	.about .logo-bg{
		width: 40%;
	}
	
	.btm-bnr p {
		font-size: 3.6rem;
	}
	.btm-bnr p a {
		padding: 2rem 4rem;
	}
	
	footer{
		padding: 6rem 0 16rem;
	}
	footer ul{
		display: flex;
		justify-content: center;
		gap:40px;
	}
	
	#scrollUp {
		bottom: 14rem;
		right: 0;
	}

}