@charset "utf-8";
/* CSS Document */

	body{
			padding: 0px!important;
			background-color:#f0efef!important;
			margin: 0!important;
			font-family:'Quicksand','Yu Gothic', 'Hiragino Sans', Meiryo, 'sans-serif'!important;
	}
	h1.fs-c-heading--page{
		display: none;
	}
	@media(max-width: 1200px){
		.fs-l-main{
			padding: 0px!important;
			background-color:#f0efef!important;
			margin: 0!important;
			font-family:'Quicksand','Yu Gothic', 'Hiragino Sans', Meiryo, 'sans-serif'!important;
		}
	}
	h1,h2,h3,h4{
		letter-spacing: 0.1em;
		font-weight: bold;
		line-height: 1.6em;
	}
	h2{
		color: #333;
		margin-left: 20px;
		letter-spacing: 0.3em;
		font-weight: 500;
		margin-bottom: 20px;
		font-size: 20px
	}
	
	.fuwa_lp_main{
		display: block;
		width: 100%;
	}
	.mainimage img{
		width: 100%;
	}
	.subimage{
		width: 100%;
		margin-top: -15%;
		text-align: right;
	}
	.subimage img{
		width: 80%;
	}
	.info1{
		margin: 70px 0 100px;
	}
	.info1 h1{
		font-size: 17px;
		display: block;
		text-align: center;
		color: #333;
		margin-bottom: 70px;
		position: relative;
		letter-spacing: 0.2em;
		line-height: 1.6em;
	}
	.info1 h1::before{
		width: 40px;
		height: 40px;
		content: "";
		border-top: 1px solid #333;
		border-left: 1px solid #333;
		position: absolute;
		top: -30px;
		left: 20px;
	}
	.info1 h1::after{
		width: 40px;
		height: 40px;
		content: "";
		border-bottom: 1px solid #333;
		border-right: 1px solid #333;
		position: absolute;
		bottom: -30px;
		right: 20px;
	}
	.info1>p{
		font-weight: bold;
		text-align:center; 
		letter-spacing: 0.1em;
		font-size: 15px;
		line-height: 2.0em;
		color: #333;
	}
	/*お礼*/
	.gratitude{
		background-color: #847076;
		padding: 70px 8%;
		color: #fff;
	}
	.gratitude p img{
		width: 100%;
	}
	.gratitude p:last-child{
		font-size: 14px;
		padding: 0 8%;
		letter-spacing: 0.1em;
		line-height: 1.6em;
		text-align: center;
	}
	.gratitude p strong{
		font-size: 38px!important;
		display: block;
		margin: 0 auto;
		letter-spacing: 0.2em;
		line-height: 1.0em;
	}
	.gratitude p strong span{
		display: block;
		font-size: 13px;
		letter-spacing: 0.7em;
	}
	/*受賞歴*/
	.award{
		margin: 50px 0;
	}
	.award p{
		text-align: center;
		font-weight: bold;
		letter-spacing: 0.2em;
	}
	.award ul{
		display: flex;
		list-style: none;
		justify-content: center;
	}
	.award ul li{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-right: 1px solid #333;
	}
	.award ul li img{
		width: 70%;
	}
	.award ul li:last-child img{
		width: 30%;
	}
	.award ul li:last-child{
		border: none;
	}
	
	/*ラインナップ*/
	.before-lineup img.member-coupon{
		width: 100%;
	}
	.before-lineup>p{
		margin-top: 40px;
		text-align: center;
		letter-spacing: 0.2em;
		font-weight: 600;
	}
	.fuwaribu_lineup{
		position: relative;
		margin-bottom: 80px;
	}
	.lineup_slideshow{
		width: 100%;
		margin: 0 auto;
		position: relative;
		overflow: hidden;
	}
	ul.lineup_item-slides{
		list-style: none;
		display: flex;
		width: calc( 60% * 8);
		padding: 0;
		position: relative;
		margin: 0 auto;
		transform: translateX(-8%);
	}
	ul.lineup_item-slides li{
		width: 60%;
		padding: 0.5%;
		font-size: 13px;
		font-weight: 500;
		line-height: 1.8em;
		font-size: 14px;
		letter-spacing: 0.1em;
		text-align: center;
		line-height: 1.6em;
		position: relative;
	}
	ul.lineup_item-slides li a{
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 10;
		top: 0;
		left: 0;
	}
	ul.lineup_item-slides li img{
		width: 100%;
	}
	
	
	.fuwaribu_lineup .next::before{
		border-top: 5px solid #fff;
		border-right: 5px solid #fff;
	}
	.fuwaribu_lineup .prev::before{
		border-top: 5px solid #fff;
		border-right: 5px solid #fff;
	}
	/*問題提起*/
	.problem{
		position: relative;
		margin-bottom: 100px;
	}
	.problem .checklist{
		width: 90%;
		margin: auto;
		background-color: #fff;
		border-radius: 50px;
		padding: 30px 0px 60px 0px;
		font-weight: bold;
		letter-spacing: 0.1em;
	}
	.problem .checklist h4{
		text-align: center;
		color:#847076;
		font-size: 20px;
		letter-spacing: 0.15em;
	}
	.problem .checklist ul{
		list-style:"□ ";
		display: flex;
		flex-direction: column;
		gap: 20px;
		color: #847076;
		width: 70%;
		margin: 20px auto;
	}
	.problem .answer h4{
		font-size: 16px;
		margin-bottom: 20px;
	}
	.problem .answer{
		width: 65%;
		background-color: #847076;
		border-radius: 50px 0 0 50px;
		letter-spacing: 0.1em;
		padding: 40px 20px 40px 40px;
		color: #fff;
		margin-left: auto;
		margin-top: -10%;
	}
	.problem .answer p{
		font-size: 13px;
		line-height: 1.8em;
	}
	
	/*商品特徴まとめ*/
	.feature{
		position: relative;
		margin-bottom: 150px
	}
	.feature span{
		font-size: 130px;
		color: #fff;
		font-weight: bold;
		position: absolute;
		top: -80px;
		z-index: 1;
		right: 30px;
	}
	.feature:nth-child(2n) span{
		left: 30px!important;
	}
	.feature:nth-child(2n) .slideimage p{
		border-radius: 50px 0 0 50px !important;
		margin-left: auto;
	}
	.feature:nth-child(2n) .text h3{
		text-align: left;
	}
	.slideimage{
		position: relative;
		z-index: 2;
	}
	.slideimage p{
		width: 80%;
		overflow: hidden;
		border-radius: 0 50px 50px 0;
	}
	.slideimage img{
		width: 100%;
	}
	.feature .text{
		width: 85%;
		margin: 30px auto 40px;
		color: #777;
	}
	.feature .text h3{
		text-align: right;
		font-size: 19px;
		letter-spacing: 0.1em;
		margin-bottom: 10px;
	}
	.feature .text p{
		font-size: 13.5px;
		font-weight: 500;
		line-height: 1.9em;
		letter-spacing: 0.05em;
	}
	
	.column{
		display: flex;
	}
	.column p{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.column p:first-child{
		width: calc(100% - 200px);
		font-size: 13.5px;
		font-weight: bold;
		letter-spacing: 0.2em;
		line-height: 1.8em;
		position: relative;
		color: #777;
	}
	.column p:first-child::before{
		width: 90px;
		height: 0px;
		content: "";
		border-bottom: 2px solid #777;
		position: absolute;
		top: 15%;
		right: -100%;
		left: -100%;
		margin: auto;
		transform: rotate(20deg)
	}
	.column p:first-child::after{
		width: 90px;
		height: 0px;
		content: "";
		border-bottom: 2px solid #777;
		position: absolute;
		bottom: 15%;
		right: -100%;
		left: -100%;
		margin: auto;
		transform: rotate(-20deg)
	}
	.column p:last-child{
		border-radius: 50%;
		overflow: hidden;
		width: 60%;
		min-width: 160px;
		aspect-ratio:1/1;
		position: relative;
		margin-right: 5%;
		border: 5px solid #fff;
	}
	.column img{
		width: 170%;
		max-width: 170%;
		position: absolute;
		right: -105%;
		left: -100%;
		top: 0%;
		margin: auto;
	}
	.oshiri img{
		width: 175%!important;
		max-width: 175%;
		position: absolute;
		right: -100%!important;
		left: -127%!important;
		top: -12%;
		margin: auto;
	}
	
	/*カラー*/
	.color{
		margin-bottom: 150px;
	}
	.color ul{
		display: flex;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.color ul p{
		text-align: center;
		font-size: 14px;
		letter-spacing: 0.3em;
		font-weight: bold;
		color: #777;
	}
	.color ul img{
		width: 100%;
	}
	.color .text{
		margin: 5% 10%;
	}
	.color .text h3{
		text-align: center;
		color: #777;
		margin-bottom: 20px;
		font-size: 18px;
	}
	.color .text p{
		font-size: 13.5px;
		font-weight: 500;
		line-height: 1.9em;
		letter-spacing: 0.05em;
		color: #777;
	}
	
	/*ビオリコットンについて*/
	.about_biore{
		background-color: #617071;
		padding: 100px 0;
	}
	.about_biore h3{
		color: #fff;
		text-align: center;
		font-size: 17px;
		line-height: 2.0em;
		letter-spacing: 0.2em;
		margin-bottom: 50px;
	}
	.about_biore>p>img{
		width: 100%;
		border-radius: 50px;
	}
	.about_biore>p{
		font-size: 13.5px;
		color: #fff;
		padding: 5% 10%;
		margin: 10% 0;
		letter-spacing: 0.1em;
	}
	.about_biore h4{
		color: #fff;
		text-align: center;
		font-size: 15px;
		line-height: 2.0em;
		letter-spacing: 0.2em;
		margin-bottom: 20px;
	}
	.social{
		display: flex;
	}
	.social .slideimage{
		width: 40%;
	}
	.social .slideimage p{
		width: 100%;
	}
	.social div:last-child{
		width: 50%;
		padding: 5%;
		font-size: 13px;
		line-height: 1.8em;
		letter-spacing: 0.05em;
		color: #fff;
	}
	.social div:last-child p{
		font-size: 13px!important;
	}
	.biore_cotton{
		width: 85%;
		margin: 50px auto;
		border: 3px solid #fff;
		padding: 20px 0 40px;
	}
	.biore_cotton h4{
		margin-bottom: 20px;
	}
	.biore_cotton ul{
		width: 85%;
		list-style:none;
		color: #fff;
		font-weight: 500;
		font-size: 14px;
		letter-spacing: 0.15em;
		display: flex;
		flex-direction: column;
		padding: 0 5%;
		margin: auto;
	}
	.biore_cotton li{
		padding: 15px 0;
		position: relative;
		line-height: 1.6em;
	}
	.biore_cotton li::before{
		position: absolute;
		content: "";
		width: 100%;
		height: 0;
		border-bottom: 1px solid #fff;
		bottom: 0;
	}
	.about_biore>ul{
		display: flex;
		list-style: none;
		padding: 0;
	}
	.about_biore>ul img{
		width: 100%;
	}
	
	/*ユーザーボイス*/
	.user_voice{
		padding: 50px 0 100px 0;
	}
	.user_voice h2{
		margin-bottom: 50px;
	}
	.user_voice .slide_voice{
	}
	.user_voice ul li{
		background-color: #fff;
	}
	
	/*faq*/
	.faq{
		padding-bottom: 100px;
	}
	.faq h2{
		margin-bottom: 50px;
	}
	.faq h5{
		padding: 5% 7%;
		margin: 0;
		position: relative;
		font-size: 14px;
	}
	.faq div{
		border-top: 2px solid #777;
	}
	.faq div:last-child{
		border-bottom: 2px solid #777;
	}
	.faq h5::before{
		content: "";
		width: 7px;
		height: 7px;
		border-top: 2px solid #777;
		border-right: 2px solid #777;
		position: absolute;
		right: 5%;
		top: -100%;
		bottom: -100%;
		margin: auto;
		transform: rotate(45deg);
		transition: 0.1s;
	}
	.faq h5.open::before{
		transform: rotate(135deg);
	}
	.faq ul{
		display: none;
		list-style:"A . ";
		font-size: 14px;
		font-weight: 600;
		padding: 5% 7% 5% 9%;
	}
	.faq ul li{
		color: #617071;
		letter-spacing: 0.05em;
		line-height: 1.9em;
	}
	
	/*スライドショー*/
	.user_voice{
		position: relative;
	}
	.user_voice>p{
		font-size: 12px;
		letter-spacing: 0.1em;
		font-weight: 600;
		text-align: center;
	}
	.slideshow-slides{
		list-style: none;
		display: flex;
		width: calc( 80% * 4);
		padding: 0;
		position: relative;
		margin: 0 auto;
		transform: translateX(-22%);
		gap:10px
	}
	.slideshow-slides li{
		width: 80%;
		padding: 2%;
		font-size: 13px;
		font-weight: 500;
		line-height: 1.8em;
	}
	.slideshow-slides li p{
		font-size: 13px;
		font-weight: 500;
		line-height: 1.8em;
	}
	.slideshow-slides li h5{
		font-size: 14px;
		font-weight: 600;
		margin-bottom: 20px;
		line-height: 1.6em;
	}
	.slideshow{
		width: 100%;
		margin: 0 auto;
		position: relative;
		overflow: hidden;
	}
	.next{
		width: 40px;
		height: 100%;
		position: absolute;
		right: 0%;
		top: 0%;
		margin: auto;
		z-index: 1000;
	}
	.prev{
		width: 40px;
		height: 100%;
		position: absolute;
		left: 0%;
		top: 0%;
		margin: auto;
		z-index: 1000;
	}
.next::before{
		content: "";
		width: 30px;
		height: 30px;
		border-top: 3px solid #000;
		border-right: 3px solid #000;
		transform: rotate(45deg);
		position: absolute;
		right: 40%;
		top: -100%;
		bottom: -120%;
		margin: auto;
		z-index: 900;
	}
	.prev::before{
		content: "";
		width: 30px;
		height: 30px;
		border-top: 3px solid #000;
		border-right: 3px solid #000;
		transform: rotate(-135deg);
		position: absolute;
		left: 40%;
		top: -100%;
		bottom: -120%;
		margin: auto;
		z-index: 900;
	}
.only-pc{
	display: none;
}
/*hinnaについて*/

.about_hinna{
	margin: 140px 0;
}
.about_hinna p img{
	width: 100%;
}
.about_hinna h3{
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-align: center;
}
.about_hinna h3 img{
	width: 40px;
	display: block;
	margin: 20px auto;
}
.about_hinna p{
	display: block;
	font-size: 13px;
	letter-spacing: 0.15em;
}
.about_hinna p:last-child{
	width: 85%;
	display: block;
	margin: auto;
}

/*=============ここからPC用レスポンシブ==============*/
@media(min-width: 641px){
	.fs-l-main .fs-l-pageMain{
		flex:0 0 640px!important;
	}
	.fs-l-main{
		padding: 0px!important;
		background-color:#f0efef!important;
		font-family:'Quicksand','Yu Gothic', 'Hiragino Sans', Meiryo, 'sans-serif'!important;
		max-width:100%!important;
	}
	.only-sp{
		display: none;
	}
	.only-pc{
		display: block;
	}
	.subimage{
		margin-top: -10%;
	}
	.subimage img{
		width: 60%;
	}
	.info1{
		margin: 140px 0 ;
	}
	.info1 h1{
		font-size: 28px;
	}
	.info1>p{
		font-size:18px;
	}
	.gratitude{
		padding: 70px 16%;
	}
	.gratitude p:last-child{
		font-size: 15px;
	}
	.problem .checklist h4{
		font-size: 24px;
	}
	.checklist{
		padding: 60px 0px 80px 0px;
	}
	.checklist li{
		font-size: 18px;
		letter-spacing: 0.1em;
	}
	.problem .answer h4{
		font-size: 20px;
	}
	.problem .answer p{
		font-size: 16px;
	}
	.feature span{
		font-size: 200px;
		top: -110px;
		right: 60px;
	}
	.feature .text{
		margin: 40px auto 60px;
	}
	.feature .text h3{
		font-size: 26px;
		letter-spacing: 0.2em;
	}
	.feature .text p{
		font-size: 17px;
		font-weight: 500;
		letter-spacing: 0.15em;
		line-height:2.2em; 
	}
	.column p:first-child{
		width: calc(100% - 350px);
		font-size: 18px;
	}
	.column p:last-child{
		width: 300px;
		height: 300px;
	}
	.color ul p{
		font-size: 20px;
		margin: 20px 0px;
		
	}
	.color .text h3{
		font-size: 26px;
		letter-spacing: 0.2em;
	}
	.color .text p{
		font-size: 17px;
		letter-spacing: 0.15em;
		line-height: 2.2em;
	}
	.before-lineup>p{
		font-size: 20px;
	}
	.about_biore h3{
		font-size: 26px;
	}
	.about_biore h4{
		font-size: 24px;
	}
	.about_biore>p{
		font-size: 17px;
		letter-spacing: 0.15em;
		line-height: 2.2em;
	}
	.social div:last-child p{
		font-size: 17px!important;
		letter-spacing: 0.15em;
		line-height: 2.2em;
	}
	.social .slideimage{
		width: 50%;
	}
	.biore_cotton{
		width: 75%;
		margin: 80px auto;
		padding:40px 0 60px;
	}
	.biore_cotton ul{
		font-size: 18px;
	}
	.about_biore>p{
		font-size: 17px;
		letter-spacing: 0.15em;
		line-height: 2.2em;
	}
	.user_voice>p{
		font-size: 17px;
	}
	.slideshow-slides{
		gap:30px;
	}
	.slideshow-slides li{
		padding:2%;
	}
	.slideshow-slides li h5{
		font-size: 20px;
	}
	.slideshow-slides li p{
		font-size: 16px;
		line-height: 2.2em;
		letter-spacing: 0.15em;
	}
	.faq ul{
		font-size:17px;
		letter-spacing: 0.15em;
		line-height: 2.2em;
	}
	.faq h5{
		font-size: 20px;
		font-weight: 600;
		letter-spacing: 0.15em;
	}
	.about_hinna p:last-child{
		width: 85%;
		display: block;
		margin: 20px auto;
		font-size: 17px;
		line-height: 2.2em;
		
	}
}