@charset "UTF-8";
/*320-599*/
@media screen and (min-width:0) and ( max-width:599px) {
	#header-area{text-align: center; height: 20px; line-height:2; font-size: 9px;}
	.pc-block{display: none;}
	.container{padding-left: 6px; padding-right: 6px;}
	header{height: auto; position: relative;}
	header h1{line-height: 0;}
	header h1 img{width: auto; height: 34px ;margin-top: 9px;}
	#loopSlide{margin-top: 0;}
	#sp-right-text{width: 47%; float: right; font-size: 12px; margin: 12px 0 10px; text-align: justify; line-height: 1.45; font-weight: 600;}
	#sp-right-text span{font-weight: bold; color: #ce6273;}
	#wrap-r-contact-botton{background-color: #e8e8e8; padding-bottom: 3px; z-index: 9999; text-align: center; transition: .3s; border-top: 1px solid #d7d7d7;border-bottom: 1px solid #d7d7d7;}
	#wrap-r-contact-botton ul{display: flex;}
	#wrap-r-contact-botton ul li{
		width: 49%;
	}
	#wrap-r-contact-botton ul li:last-child{
		margin-left: 6px;
	}
	#wrap-r-contact-botton .btn{
		height: 55px;
		font-size: 1em;
	}
	button i{
		left: 15px;
		top: 15px;
		width:20px;
	}
	.btn-freetell label{
		margin: 11px 0 4px;
	}
	.sp-btn-freetell label{
		font-size: 1em;
		margin: 0;

	}
	.sp-btn-freetell label span{
		display: block;
		font-size: 1em;
		margin: 0 0 18px;
	}
	.btn-contact span {
		margin: 11px 0 8px;
	}
	.btn-line span {
		font-size: 0.9em;
		margin: 13px 0 8px;
	}
	.sp-btn-freetell .add-font{
		display: none;
	}
	.is-fixed{ position: fixed; bottom: 0; left: 0; z-index:9999; width: 100%;}
	.is-hide { transform: translateY(200%); display: none !important;}
	.simply-scroll .simply-scroll-clip,
	.simply-scroll-container,
	.simply-scroll-clip,
	.simply-scroll .simply-scroll-list,
	.simply-scroll .simply-scroll-list li{width: 380px; height: 420px; z-index: 1000; overflow: hidden;}
	#loopSlide li img{width: 380px; height: 420px; z-index: 1001;}
	.simply-scroll .simply-scroll-clip,
	.simply-scroll-container{
		width:  100%;
	}
	.sp-block{display: block;}
	#mainimg{z-index: 2000;}
	#mainimg img{height: 100%;}
	button p{font-size: 1.5em; top: -26px; left: 8px;}
	.call-button {top: -42px; font-size: 21px; font-weight: bold; line-height: 1;}
	#card-last-text {width: 68%; line-height: 1.2; margin-top: 12px;}
	.card-text .card-cost{font-size: 3em; margin-top: 6px;}
	.card-text img{width: 140px;}
	#wrap-prodcts .swiper-wrapper{margin-left:-2px;}
	#wrap-prodcts section h5{padding: 3px; margin-top: 6px;}
	#wrap-prodcts section h5 span { display: block; font-size: 0.6em;}
	#wrap-prodcts .swiper-slide{width: 50%;}
	#wrap-prodcts section{width: 100%;}
	#wrap-prodcts .swiper-button-prev{left: 12px;}
	#wrap-prodcts .swiper-button-next{right: 12px;}
	.wrap-contact{padding: 48px 6px;}
	.wrap-contact-botton h4,
	.wrap-contact-botton h3{font-size: 1.7em;}
	.wrap-contact .contact-botton .btn{
		width: 100%;
		height: 55px;
		border-radius: 6px;
		font-size: 1.35em;
		padding-left: 30px;
	}
	.wrap-contact .contact-botton .btn i{
		top: 10px;
		left: 10px;
		width: 20px;
	}
	.wrap-contact .btn-freetell span{
		margin-top: 13px;
	}
	.wrap-contact .btn-contact span {
		margin: 14px 0 7px;
	}
	.wrap-contact .contact-botton .call-button{top: -42px;}
	.line-botton{background-color: #ffe876; border: none; height: 80px; border-radius:12px; padding: 0; }
	.wrap-contact-botton .line-botton h3{border: none; text-align: center; font-size: 1.2em; padding:31px; margin-left: 16px;}
	.line-botton img{width: 50px; position: relative;top: -90px; left:20px;}
	.text-block{ width: 100%;}
	.line-botton .l-text{width: 100%; padding: 0 ; margin: -62px 0; font-size: 0.75em; }
	.line-botton .l-text br,
	.l-qr{display: none;}
	.one-point{ border-radius: 10px; padding: 12px; font-weight: bold; font-size: 1.2em;}
	#wrap-cost .card-title{margin-top: 3px;}
	#wrap-cost .card-title span{width: 46%; border-radius:7px; line-height: 1.5;font-size: 0.35em; margin-top: 4px;}
	.card-text .text-overline{font-size: 1em; margin-top: 22px;}
	#wrap-cost .card-title .last-text{margin-top: 12px;}
	#wrap-cheap section .icons{width: 60px;}
	#wrap-cheap section h3{width: 50%; position: relative;top: -50px; left: 72px;}
	#wrap-cheap section .text p{font-size: 1.2em; margin-top: -48px;}
	#wrap-flow h3{font-size: 1.8em; }
	#wrap-flow h3 span{font-size: 0.8em; width: 40%;  text-align: center; display: block; margin-bottom: 12px;}
	#wrap-flow section p {font-size: 1.2em;}
	#wrap-flow .btn p{top: -52px;}
	#wrap-area section{font-size: 1em;}
	.tableCompare table{font-size: 1em;}
	.tableCompare th{height: 72px;}
	.gradient_2{font-size: 1.3em;}
	.tableCompare .center{text-align: center; padding-left: 0;}
	.tableCompare .center span{float: none; text-align: center; width: 100%; margin:12px 0;}
	.tableCompare table .center img{height: 45px;}
	.tableCompare table img{margin: auto; height: 30px;}
	#wrap-company table,
	#wrap-contact-form,
	#contact-form h3{font-size: 1em;}
	.wrap-content-block { padding: 12px 0 24px;}
	#contact-form h3{padding: 12px;}
	#contact-form{padding-bottom: 6px;}
	#contact-form section{padding: 12px 12px 0;}
	#contact-form .small-text{font-size: 0.7em;}
	#contact-form .radiobtn div,
	#contact-form select,
	#contact-form #form-checkbox{font-size: 0.75em;}
	#contact-form .radiobtn input{top: 3px;}
	#contact-form section h4{font-size: 0.7em;}
	#contact-form input,
	#contact-form textarea{border: 1px solid #ccc; font-size:0.8em;}
	#contact-form select,
	#contact-form .form-control{height:36px; font-size: 0.8em;}
	#radio-section {
		font-size: 0.8em;
	}
	#contact-form select{
		width: 50%;
	}
	.radio03{
		padding: 5px 25px;
	}
	#flex-radio{
		display: grid;
		grid-template-columns: repeat(3, 1fr); /* 縦軸に4列 */
		grid-template-rows: repeat(4, 1fr); /* 横軸に3行 */
	}
	  
	#contact-form #flex-radio label{
		font-size: 0.8em;
		padding: 3px 0 3px 30px;
	}
	.formErrorContent{top: -23px; left: -69px; font-size: 0.6em;line-height: 35px;}
	.formErrorArrow{ top: -25px; left: -63px;}

	.content-line{font-size: 1.2em; padding: 12px 0;}
	#pack-limit{font-size: 0.8em; padding: 3px;}
	#pack-limit span{padding: 3px; font-size: 0.6em;}
	#cost-mainimg-sp{ margin-top: -40px;}
	#saiyasu-title{margin-top: 0;}
	#cost-title h2,
	#title-kirei h2,
	#wrap-prodcts h2{font-size: 1.5em;}
	#cost-title p{font-size:1.26em;}
	#cost-table{font-size:1em;}
	#cost-table td,
	#cost-table th,
	#cost-table tbody td{padding: 6px 0;}
	#cost-table tbody .last img{width: 55%;}
	#kaitori-text img{width:88%;left: 7%; top: 47%; }
	#cost-table th span{padding: 6px;}
	#cost-table th span img{top:10px;}
	#wrap-warning .wrap-img img{width: 100%;}
	#wrap-warning{padding: 12px 0;}
	#photo h2 img {width: 100%; margin: 24px 0;}
	#photo h3{font-size: 1.25em;}
	#photo section{height: auto;}

	#title-kirei .animated { width: 90%; left: 3.8%;}
	.wrap-contact2 .contactContent-btn {
		margin-bottom:  12px;
	}
	.wrap-contact2 .contactContent-btn ul{bottom: 1px;}
	.wrap-contact2 .contactContent-btn li{width: 49%; padding: 2px}
	.section-title{font-size: 2em;}
	#form-btn{width: 200px; height: 55px; margin: 12px auto 24px;}
	#page_top {
	    width: 40px;
	    height: 40px;
	    position: fixed;
	    right: 6px;
	    bottom: 67px;
	    background: #3db7df;
	    border-radius: 6px;
	}
	#page_top a {
	    position: relative;
	    display: block;
	    width: 40px;
	    height: 40px;
	    text-decoration: none;
	}
	#page_top a::before {
    	content: '';
    	color: #fff;
    	position: absolute;
    	width: 10px;
    	height: 10px;
    	top: -4px;
    	bottom: 0;
    	right: 3px;
    	left: 0;
    	margin: auto;
    	text-align: center;
    	 border-right: 10px solid transparent;
		 border-bottom:15px solid #fff;
		 border-left: 10px solid transparent;
    }
    footer p{line-height:1.5;}
    footer br{display:block;}
    #wrap-thanks{margin-top: 0;}
    #wrap-flow-btn li{width: 100%; margin-bottom: 12px;}
    #wrap-sp-line{ display: block; width: 100%; position: relative;}
	#wrap-sp-line .wrap-img{
		width: 100%;
		min-height: 110px;
		border: 17px solid #00c200;;
		border-left: 2px solid #00c200;
		border-right: 2px solid #00c200;
		border-radius: 6px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 5px 0;

	}
	#sp-line-main{
		width: 59%;
	}
	#wrap-sp-line a{
		width: 37%;
	}


    .is-fixed#wrap-r-contact-botton .wrap-botton{width: 42%; display: block; float: left;}
	.is-fixed#wrap-r-contact-botton .wrap-botton i{display: none;}
	.is-fixed#wrap-r-contact-botton .wrap-botton button p,
	.is-fixed#wrap-r-contact-botton .wrap-botton .call-button{ top: 0;left: 0;}
	.is-fixed#wrap-r-contact-botton .wrap-botton .call-button{ top: -5px;}
	.is-fixed#wrap-r-contact-botton .wrap-botton:last-child{margin-left: 5px;}


	#colna-info{margin-top: 0; }
	.modal__bg{top: 0; left: 0;}
	.wrap_modal__content{width: 95%; left: 2.5%; height: 95vh;}
	.modal-content{padding:10px 0;}

	#wrap-cost .small-tetx{font-size: 0.9em;}
	#wrap-worries .wrap-contact-botton{
		margin-top: 18px;
		margin-bottom: 12px;
	}
	
	/* fontsize統一 */
	#wrap-cost .small-text p,
	#title-kirei p,
	#photo .comment{
		font-size: 1.2em;
	}
	/* 深夜用css */
	#info-text{
		font-size: 0.9em;
	}
	#colna-info{
		padding: 5px;
	}
	#info-text label{
		text-align: center;
	}
}
/*600px～959px*/
@media screen and (min-width:600px) and ( max-width:959px) {
	#header-area{text-align: center; height: 20px; line-height:2; font-size: 9px;}
	.pc-block{display: none;}
	.container{padding-left: 6px; padding-right: 6px;}
	header{height: auto; position: relative;}
	header h1{line-height: 0;}
	header h1 img{width: auto; height: 34px ;margin-top: 9px;}
	#loopSlide{margin-top: 0;}
	#sp-right-text{width: 47%; float: right; font-size: 12px; margin: 12px 0 10px; text-align: justify; line-height: 1.45; font-weight: 600;}
	#sp-right-text span{font-weight: bold; color: #ce6273;}
	#wrap-r-contact-botton{background-color: #e8e8e8; padding-bottom: 3px; z-index: 9999; text-align: center; transition: .3s; border-top: 1px solid #d7d7d7;border-bottom: 1px solid #d7d7d7;}
	#wrap-r-contact-botton ul{display: flex;}
	#wrap-r-contact-botton ul li{
		width: 49%;
	}
	#wrap-r-contact-botton ul li:last-child{
		margin-left: 6px;
	}
	#wrap-r-contact-botton .btn{
		height: 55px;
		font-size: 1em;
	}
	button i{
		left: 15px;
		top: 15px;
		width:20px;
	}
	.btn-freetell label{
		margin: 11px 0 4px;
	}
	.sp-btn-freetell label{
		font-size: 1em;
		margin: 0;

	}
	.sp-btn-freetell label span{
		display: block;
		font-size: 1em;
		margin: 1px 0 16px;
	}
	.btn-contact span {
		margin: 11px 0 8px;
	}
	.btn-line span {
		font-size: 0.9em;
		margin: 13px 0 8px;
	}
	.sp-btn-freetell .add-font{
		display: none;
	}
	.is-fixed{ position: fixed; bottom: 0; left: 0; z-index:9999; width: 100%;}
	.is-hide { transform: translateY(200%); display: none !important;}
	.sp-block{display: block;}
	#mainimg{z-index: 2000;}
	#mainimg img{height: 100%;}
	button p{font-size: 1.5em; top: -26px; left: 8px;}
	.call-button {top: -42px; font-size: 21px; font-weight: bold; line-height: 1;}
	#card-last-text {width: 68%; line-height: 1.2; margin-top: 12px;}
	.card-text .card-cost{font-size: 3em; margin-top: 6px;}
	.card-text img{width: 140px;}
	#wrap-prodcts .swiper-wrapper{margin-left:-2px;}
	#wrap-prodcts section h5{padding: 3px; margin-top: 6px;}
	#wrap-prodcts section h5 span { display: block; font-size: 0.6em;}
	#wrap-prodcts .swiper-slide{width: 50%;}
	#wrap-prodcts section{width: 100%;}
	#wrap-prodcts .swiper-button-prev{left: 12px;}
	#wrap-prodcts .swiper-button-next{right: 12px;}
	.wrap-contact{padding: 48px 6px;}
	.wrap-contact-botton h4,
	.wrap-contact-botton h3{font-size: 1.7em;}
	.wrap-contact .contact-botton .btn{
		width: 100%;
		height: 55px;
		border-radius: 6px;
		font-size: 1.5em;
		padding-left: 30px;
	}
	.wrap-contact .contact-botton .btn i{
		top: 10px;
		left: 10px;
		width: 20px;
	}
	.wrap-contact .btn-freetell span{
		margin-top: 13px;
	}
	.wrap-contact .btn-contact span {
		margin: 14px 0 7px;
	}
	.wrap-contact .contact-botton .call-button{top: -42px;}
	.line-botton{background-color: #ffe876; border: none; height: 80px; border-radius:12px; padding: 0; }
	.wrap-contact-botton .line-botton h3{border: none; text-align: center; font-size: 1.2em; padding:31px; margin-left: 16px;}
	.line-botton img{width: 50px; position: relative;top: -90px; left:20px;}
	.text-block{ width: 100%;}
	.line-botton .l-text{width: 100%; padding: 0 ; margin: -62px 0; font-size: 0.75em; }
	.line-botton .l-text br,
	.l-qr{display: none;}
	.one-point{ border-radius: 10px; padding: 12px; font-weight: bold; font-size: 1.2em;}
	#wrap-cost .card-title{margin-top: 3px;}
	#wrap-cost .card-title span{width: 46%; border-radius:7px; line-height: 1.5;font-size: 0.35em; margin-top: 4px;}
	.card-text .text-overline{font-size: 1em; margin-top: 22px;}
	#wrap-cost .card-title .last-text{margin-top: 12px;}
	#wrap-cheap section .icons{width: 60px;}
	#wrap-cheap section h3{width: 50%; position: relative;top: -50px; left: 72px;}
	#wrap-cheap section .text p{font-size: 1.2em; margin-top: -48px;}
	#wrap-flow h3{font-size: 1.8em; }
	#wrap-flow h3 span{font-size: 0.8em; width: 40%;  text-align: center; display: block; margin-bottom: 12px;}
	#wrap-flow section p {font-size: 1.2em;}
	#wrap-flow .btn p{top: -52px;}
	#wrap-area section{font-size: 1em;}
	.tableCompare table{font-size: 1em;}
	.tableCompare th{height: 72px;}
	.gradient_2{font-size: 1.3em;}
	.tableCompare .center{text-align: center; padding-left: 0;}
	.tableCompare .center span{float: none; text-align: center; width: 100%; margin:12px 0;}
	.tableCompare table .center img{height: 45px;}
	.tableCompare table img{margin: auto; height: 30px;}
	#wrap-company table,
	#wrap-contact-form,
	#contact-form h3{font-size: 1em;}
	.wrap-content-block { padding: 12px 0 24px;}
	#contact-form h3{padding: 12px;}
	#contact-form{padding-bottom: 6px;}
	#contact-form section{padding: 12px 12px 0;}
	#contact-form .small-text{font-size: 0.5em;}
	#contact-form .radiobtn div,
	#contact-form select,
	#contact-form #form-checkbox{font-size: 0.75em;}
	#contact-form .radiobtn input{top: 3px;}
	#contact-form section h4{font-size: 0.7em;}
	#contact-form input,
	#contact-form textarea{border: 1px solid #ccc; font-size:0.8em;}
	#contact-form select,
	#contact-form .form-control{height:36px;}
	#contact-form select{
		width: 20%;
	}
	.formErrorContent{top: -23px; left: -69px; font-size: 0.6em;line-height: 35px;}
	.formErrorArrow{ top: -25px; left: -63px;}
	#radio-section span{
		font-size: 0.8em;
	}
	#flex-radio{
		display: grid;
		grid-template-columns: repeat(3, 1fr); /* 縦軸に4列 */
		grid-template-rows: repeat(4, 1fr); /* 横軸に3行 */
	}
	  
	#contact-form label{
		font-size: 0.8em;
		padding: 3px 10px 3px 30px;
	}
	.content-line{font-size: 1.2em; padding: 12px 0;}
	#pack-limit{font-size: 0.8em; padding: 3px;}
	#pack-limit span{padding: 3px; font-size: 0.6em;}
	#cost-mainimg-sp{ margin-top: -40px;}
	#saiyasu-title{margin-top: 0;}
	#cost-title h2,
	#title-kirei h2,
	#wrap-prodcts h2{font-size: 1.5em;}
	#cost-title p{font-size:1.26em;}
	#cost-table{font-size:0.8em;}
	#cost-table td,
	#cost-table th,
	#cost-table tbody td{padding: 6px 0;}
	#cost-table tbody .last img{width: 55%;}
	#kaitori-text img{width:88%;left: 7%; top: 47%; }
	#cost-table th span{padding: 6px;}
	#cost-table th span img{top:10px;}
	#wrap-warning .wrap-img img{width: 100%;}
	#wrap-warning{padding: 12px 0;}
	#photo h2 img {width: 100%; margin: 24px 0;}
	#photo h3{font-size: 1.25em;}
	#photo section{height: auto;}

	#title-kirei .animated { width: 90%; left: 3.8%;}
	.wrap-contact2 .contactContent-btn {
		margin-bottom:  12px;
	}
	.wrap-contact2 .contactContent-btn ul{bottom: 18px;}
	.wrap-contact2 .contactContent-btn li{width: 49%; padding: 2px}
	.section-title{font-size: 2em;}
	#form-btn{width: 200px; height: 55px; margin: 12px auto 24px;}
	#page_top {
	    width: 40px;
	    height: 40px;
	    position: fixed;
	    right: 6px;
	    bottom: 67px;
	    background: #3db7df;
	    border-radius: 6px;
	}
	#page_top a {
	    position: relative;
	    display: block;
	    width: 40px;
	    height: 40px;
	    text-decoration: none;
	}
	#page_top a::before {
    	content: '';
    	color: #fff;
    	position: absolute;
    	width: 10px;
    	height: 10px;
    	top: -4px;
    	bottom: 0;
    	right: 3px;
    	left: 0;
    	margin: auto;
    	text-align: center;
    	 border-right: 10px solid transparent;
		 border-bottom:15px solid #fff;
		 border-left: 10px solid transparent;
    }
    footer p{line-height:1.5;}
    footer br{display:block;}
    #wrap-thanks{margin-top: 0;}
    #wrap-flow-btn li{width: 100%; margin-bottom: 12px;}
    #wrap-sp-line .wrap-img{
		width: 100%;
		min-height: 110px;
		border: 20px solid #00c200;;
		border-left: 2px solid #00c200;
		border-right: 2px solid #00c200;
		border-radius: 6px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 5px 0;

	}
	#sp-line-main{
		width: 59%;
	}
	#wrap-sp-line a{
		width: 37%;
	}

    .is-fixed#wrap-r-contact-botton .wrap-botton{width: 42%; display: block; float: left;}
		.is-fixed#wrap-r-contact-botton .wrap-botton i{display: none;}
		.is-fixed#wrap-r-contact-botton .wrap-botton button p,
		.is-fixed#wrap-r-contact-botton .wrap-botton .call-button{ top: 0;left: 0;}
		.is-fixed#wrap-r-contact-botton .wrap-botton .call-button{ top: -5px;}
		.is-fixed#wrap-r-contact-botton .wrap-botton:last-child{margin-left: 5px;}


		#colna-info{margin-top: 0; }
		.modal__bg{top: 0; left: 0;}
		.wrap_modal__content{width: 95%; left: 2.5%; height: 95vh;}
		.modal-content{padding:10px 0;}

		#wrap-cost .small-tetx{font-size: 0.9em;}
		#wrap-worries .wrap-contact-botton{
			margin-top: 18px;
			margin-bottom: 12px;
		}
}
/*960px～1280*/
@media screen and (min-width:960px) and ( max-width:1280px) {
	.container{max-width: 960px;}
	#header-button{width: 60%;}
	.simply-scroll .simply-scroll-list,
	.simply-scroll-container,
	.simply-scroll .simply-scroll-clip{width: 100%; height: 400px;}
	.simply-scroll-clip,
	.simply-scroll .simply-scroll-list li{width: 400px; height: 400px; z-index: 1000; overflow: hidden;}
	#loopSlide li img{width: 400px; height: 400px; z-index: 1001;}
	#mainimg{z-index: 2000; height: 100%;}
	#mainimg img{height: 100%;}
	#card-last-text {width: 68%; line-height: 1.2; margin-top: 12px;}
	.card-text .card-cost{font-size: 3.8em;}
	.line-botton .l-text{font-size:0.8em;}
	#wrap-prodcts .swiper-wrapper{margin-left:-2px;}
	#wrap-prodcts section h5{padding: 3px; margin-top: 6px;}
	#wrap-prodcts section h5 span { display: block; font-size: 0.6em;}
	#wrap-prodcts .swiper-slide{width: 50%;}
	#wrap-prodcts section{width: 100%;}
	#wrap-prodcts .swiper-button-prev{left: 12px;}
	#wrap-prodcts .swiper-button-next{right: 12px;}
	#wrap-cost .card-title span{font-size: 0.4em;}
	.btn{
		font-size: 1.25em;
	}
	#header-button li {
		margin-left: 6px;
	}
	.wrap-contact .contact-botton .btn{
		font-size: 2.85em;
	}
	header{
		z-index: 9999;
	}
}