@charset "UTF-8";


/* ▼▼▼ トップ
======================================================*/
/* ▼ 共通
----------------------------------------*/
.t_red{
	color: #DC3C36;
}
h1 img{
	width: 100%;
}
/* ▼ RoomClipが教えてくれる、QAIS -air- 03のホント
----------------------------------------*/
.real_box{
	width: 90%;
	max-width: 681px;
	padding: 30px 6%;
	margin: 70px auto;
	position: relative;
	}
	.real_box::before{
		content: "";
		width: 100%;
		height: 100%;
		border: 8px solid #F6F5F4;
		margin: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: -1;
	}
	.real_box::after{
		content: "";
		width: 80%;
		height: 110%;
		background: #fff;
		margin: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: -1;
	}
	.real_box > div{
		position: relative;
		z-index: 9;
	}
	.real_box p{
		text-align: center;
	}
	.real_box .real_box_title{
		padding-left: 4%;
		margin-bottom: 20px;
		color: #443311;
		font-size: 34px;
		line-height: 1.4;
		font-weight: 500;
	}
	.real_box .large{
		font-size: 22px;
		font-weight: 500;
	}

/* ▼ section
----------------------------------------*/
section{
	overflow: hidden;
	padding: 60px 0;
	}
	section .sec_no{
		font-size: 328px;
		color: #fff;
		line-height: 1;
		position: absolute;
		top: -135px;
		right: 0;
	}
	/* タイトル */
	section .title_box{
		margin-bottom: 50px;
		position: relative;
	}
	section .title_box p{
		margin-bottom: 10px;
		text-align: center;
	}
	section .title_box p:nth-child(1){
		margin-bottom: 15px;
	}
	section .title_box h2{
		margin-bottom: 15px;
		color: #DC3C36;
		font-size: 32px;
		text-align: center;
		font-weight: 500;
		line-height: 1.4;
	}
	section .title_box .kome{
		margin-bottom: 0;
		color: #868686;
		font-size: 12px;
	}
	/* スライダー */
	section .real_voice_slider{
		margin-bottom: 45px;
	}
	section .real_voice_slider li{
		background: #fff;
		padding: 0 20px 20px;
		margin: 80px 10px 0;
		position: relative;
	}
	section .real_voice_slider li::before{
		content: "";
		width: 101.8%;
		height: 80px;
		background: url(../img/slide_bg.png)no-repeat top center/100%;
		position: absolute;
		top: -79px;
		left: -0.8%;
		right: 0;
	}
	section .real_voice_slider li > p{
		margin-bottom: 15px;
	}
	section .real_voice_slider li > p[data-mh="real_voice_comment"]{
		margin-bottom: 80px;
	}
	section .real_voice_slider .voice_no{
		width: 90%;
		border-top: 1px solid #D6D6D6;
		border-bottom: 1px solid #D6D6D6;
		padding: 9px 40px;
		position: absolute;
		bottom: 20px;
	}
	section .real_voice_slider .voice_no::before{
		content: "";
		width: 28px;
		height: 27px;
		background: url(../img/icon_camera.svg)no-repeat center/cover;
		margin: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
	}
	section .real_voice_slider .voice_no p{
		font-size: 14px;
		line-height: 1.4;
		font-weight: 500;
	}
	section .real_voice_slider .voice_no p:nth-child(2){
		color: #9B9B9B;
		font-weight: normal;
	}
	/* 使用後のアンケート */
	.questionnaire{
		max-width: 784px;
		background: url(../img/questionnaire_bg_pc.png)no-repeat center/100% 100%;
		padding: 30px 6% 60px;
		margin: 0 auto;
	}
	.questionnaire h3{
		margin-bottom: 20px;
		color: #443311;
		font-size: 26px;
		font-weight: 500;
		text-align: center;
	}
	.questionnaire h3::after{
		display: inline-block;
		content: "";
		width: 25.4px;
		height: 32.44px;
		margin-left: 10px;
		background: url(../img/icon_questionnaire.svg)no-repeat center/cover;
		vertical-align: -5px;
	}
	.questionnaire p{
		color: #443311;
	}
	.questionnaire .qa_box01{
		width: 260px;
		margin-right: 30px;
		border-right: 1px dashed #DDDBD8;
	}
	.questionnaire .qa_box01 p{
		font-weight: 500;
	}
	.questionnaire .qa_box02{
		width: calc(100% - 290px);
	}
	.questionnaire .qa_box02 ul li{
		padding-left: 15px;
		position: relative;
	}
	.questionnaire .qa_box02 ul li::before{
		content: "";
		width: 8px;
		height: 8px;
		background: #DC3C36;
		position: absolute;
		top: 12px;
		left: 0;
	}
	.questionnaire .qa_box02 ul li:not(:last-child){
		margin-bottom: 10px;
	}

#sec01{background: #F4F3F0;}
#sec02{background: #EBE8E1;}
#sec03{background: #F4F3F0;}
/* ▼	gallery
----------------------------------------*/
#gallery h2{
	width: 90%;
	margin: 0 auto 15px;
	text-align: center;
	}
	#gallery ul.gallery_list{
		display: flex;
		flex-wrap: wrap;
		max-width: 1000px;
		margin: 0 auto;
	}
	#gallery ul.gallery_list li{
		width: 25%;
		border-right: 1px solid #fff;
	}
	#gallery ul.gallery_list li:nth-child(4n){
		border-right: none;
	}
	#gallery ul.gallery_list li img{
		width: 100%;
	}
	/* ▼	ライトボックス
	----------------------------------------*/
	body #cboxContent{
		overflow: visible;
		}
		body #cboxOverlay{
			background: rgba(0,0,0,.5);
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			opacity: 1!important;
		}
		body #cboxLoadedContent{
			margin: 0;
		}
		body #cboxTopCenter{
			height: 40px;
		}
		body #cboxClose{
			width: 30px;
			height: 30px;
			top: -40px;
			background: url(../../../common/img/icon_colorbox_close.png)no-repeat center center/contain!important;
		}

/* ▼	sec_products
----------------------------------------*/
#sec_products{
	padding-top: 0;
	}
	#sec_products .flex_box{
		align-items: center;
	}
	#sec_products .flex_box .photo{
		max-width: 608px;
	}
	#sec_products .flex_box .txt{
		padding: 0 0 0 5%;
	}
	#sec_products .flex_box .txt .products_name{
		margin-bottom: 10px;
		text-align: center;
	}
	#sec_products .flex_box .txt .detail{
		margin-bottom: 10px;
		font-size: 14px;
		text-align: center;
	}
	#sec_products .flex_box .txt .price{
		margin-bottom: 10px;
		text-align: center;
	}
	#sec_products .arrow_btn.img a::after{
		display: none;
	}
/* ボタン */
.mv_link_btn .clear_present{
	max-width: 280px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 7px;
	padding: 20px 25px;
	margin: 0 auto 15px;
	letter-spacing: .064em;
	}
	/* 料金 */
	.price .italic{
		display: inline-block;
		margin-right: 5px;
		font-size: 36px;
		font-weight: 300;
		line-height: 1;
		font-style: italic;
		font-family: 'Roboto', sans-serif;
		}
		.price .small{
			font-size: 12px;
			font-weight: 400;
		}
	.mv_link_btn .clear_present .flex_box p{
		color: #035B7F;
		font-size: 14px;
		font-weight: bold;
	}
	.mv_link_btn .clear_present .flex_box.box_01{
		justify-content: center;
		margin-bottom: 10px;
	}
	.mv_link_btn .clear_present .flex_box.box_01 p:nth-child(1):before {
		/* content: "【QAIS公式ストア限定】"; */
		display: block;
		margin-bottom: 5px;
		font-size: 11px;
		text-align: center;
	}
	.mv_link_btn .clear_present .flex_box.box_01 p{
		font-size: 14px;
		line-height: 1.6;
        display: none;
	}
	.mv_link_btn .clear_present .flex_box.box_02{
		margin-bottom: 15px;
	}
	.mv_link_btn .clear_present .flex_box.box_02 p{
		background: #DFEEF4;
		padding: 4px 9px;
	}
	.mv_link_btn .clear_present .flex_box.box_02 p:not(:last-child){
		margin-right: 5px;
	}
	.mv_link_btn .btn_list{
		width: 100%;
		max-width: 280px;
		margin: 0 auto;
	}
	.mv_link_btn .btn_list p{
		flex: 1;
		border: 1px solid #ddd;
		border-radius: 7px;
	}
	.mv_link_btn .btn_list p:not(:last-child){
		margin-right: 10px;
	}
	.mv_link_btn .btn_list p a{
		display: block;
	}


/* バナー */
.bnr_link{
	max-width: 85%;
	margin: 0 auto 60px;
	}
	.bnr_link p{
		text-align: center;
	}
	.bnr_link p:not(:last-child){
		margin-bottom: 25px;
	}

/* ▼▼▼ 480px〜768px
======================================================*/
@media screen and (max-width: 768px) {

	/* ▼ RoomClipが教えてくれる、QAIS -air- 03のホント
	----------------------------------------*/
	.real_box{
		max-width: 311px;
		padding: 20px 30px 30px;
		margin: 40px auto;
		}
		.real_box::before{
			border: 4px solid #F6F5F4;
		}
		.real_box p:nth-child(2){
			text-align: left;
		}
		.real_box .real_box_title{
			margin-bottom: 20px;
			font-size: 20px;
		}
		.real_box .real_box_title img{
			width:54px;
		}
		.real_box .large{
			font-size: 16px;
		}

	/* ▼ section
	----------------------------------------*/
	section{
		padding: 40px 0;
		}
		section .sec_no{
			font-size: 163px;
			top: -75px;
		}
		/* タイトル */
		section .title_box{
			margin-bottom: 40px;
		}
		section .title_box p:nth-child(1){
			margin-bottom: 10px;
		}
		section .title_box p img{
			width: 127px;
		}
		section .title_box h2{
			font-size: 24px;
		}
		section .title_box p:nth-child(3){
			text-align: left;
		}
		/* スライダー */
		section .real_voice_slider{
			max-width: 312px;
			margin: 0 auto 40px;
		}
		section .real_voice_slider li{
			margin: 80px 5px 0;
		}
		/* arrow */
		.real_voice_slider .slick-next:before{
			display: block;
			content: "";
			width: 12px;
			height: 12px;
			border-top: 2px solid #443311;
			border-left: 2px solid #443311;
			-webkit-transform: rotate(135deg);
			transform: rotate(135deg);
		}
		.real_voice_slider .slick-prev{
			left: -15px;
		}
		.real_voice_slider .slick-prev:before{
			display: block;
			content: "";
			width: 12px;
			height: 12px;
			border-top: 2px solid #443311;
			border-left: 2px solid #443311;
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg);
		}

		/* 使用後のアンケート */
		.questionnaire{
			max-width: 330px;
			background: url(../img/questionnaire_bg_sp.png)no-repeat center/105% 100%;
			padding: 30px 30px 40px;
			margin: 0 auto;
			position: relative;
			right: -5px;
		}
		.questionnaire h3{
			margin-bottom: 15px;
			font-size: 18px;
		}
		.questionnaire h3::after{
			display: inline-block;
			content: "";
			width: 25.4px;
			height: 32.44px;
			margin-left: 10px;
			background: url(../img/icon_questionnaire.svg)no-repeat center/cover;
			vertical-align: -5px;
		}
		.questionnaire .qa_box01{
			width: 100%;
			padding-bottom: 20px;
			margin:0 auto 20px;
			border-right: none;
			border-bottom: 1px dashed #DDDBD8;
		}
		.questionnaire .qa_box01 p{
			text-align:center;
		}
		.questionnaire .qa_box02{
			width: 100%;
		}
		.questionnaire .qa_box02 ul li{
			padding-left: 15px;
		}
		.questionnaire .qa_box02 ul li::before{
			top: 10px;
		}
		.questionnaire .qa_box02 ul li:not(:last-child){
			margin-bottom: 5px;
		}

	/* ▼	gallery
	----------------------------------------*/
		#gallery ul.gallery_list li,
		#gallery ul.gallery_list li:nth-child(4n){
			width: 33.333333%;
			border-right: 1px solid #fff;
		}
		#gallery ul.gallery_list li:nth-child(3n){
			border-right: none;
		}

	/* ▼	sec_products
	----------------------------------------*/
	#sec_products{
		padding: 40px 0;
		}
		#sec_products .flex_box .photo{
			margin-bottom: 40px;
		}
		#sec_products .flex_box .txt{
			padding: 0;
		}
		#sec_products .flex_box .txt h2{
			text-align:center;
		}
		#sec_products .flex_box .txt .arrow_btn a{
			margin:0 auto;
		}
	/* ボタン */
	.clear_present .flex_box,
	.mv_link_btn .btn_list{
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
		margin: 0 auto;
		}
		.mv_link_btn .clear_present .flex_box.box_01 p{
			font-feature-settings: 'palt' 1;
		}
		.mv_link_btn .clear_present .flex_box.box_02{
			justify-content: center;
		}
		.mv_link_btn .clear_present .flex_box.box_02 p{
			font-size: 13px;
		}
	/* バナー */
	.bnr_link{
		margin: 0 auto 0;
	}
}