@charset "utf-8";

@import url("https://biken-k.com/html/user_data/css/bootstrap.custom.min.css"); /* only Grid system CSS */

/* --------------------------------
	Common style
-------------------------------- */
/*
html {
	/*font-size: 62.5%;  62.5%を指定すると「1.0 rem = 10px」
} */
html {
	font-size:clamp(9px, 0.694444444vw,11px);
}


body {
	font-size: 1.6rem;
	line-height: 1.6;
	color:#212121;
	background: #fff;
	animation:Body 2.5s forwards;
	opacity:0;
}
@keyframes Body{
	0%{opacity:0;}
	100%{opacity:1;}
}
a {
	color: #0092c4;
	text-decoration: none;
	cursor: pointer;
}
a:hover,
a:focus,
a:active {
	color: #33a8d0;
	text-decoration: none;
	outline: none;
}

textarea {
	/* for chrome fontsize bug */
	font-family: sans-serif;
}

ul,
ol {
	list-style: none;
	margin: 0;
	padding: 0;
}
dl,
dt,
dd,
li {
	margin: 0;
	padding: 0;
}
img {
	max-width: 100%;
}

hr {
	color: #ccc;
}

h2{
	color:#323232;
	padding-bottom: 0.78125vw;
	font-size: 30px;
	font-family: "Zen Old Mincho", serif;
	font-weight: 400;
	font-style: normal;
}
h2 span{
	font-size:18px;
	display: block;
}
h2.about_title{
	font-size:52px;
}
h2.about_title span{
	margin-bottom: 1em;
}
.zen-old-mincho-regular {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
}


.container-fluid {
	width:100%;
	max-width: 100%;
	padding-left:0;
	padding-right:0;
}
.section-inner{
	width:70vw;
	max-width: 1220px;
	margin-left: auto;
	margin-right: auto;
}
.section-inner.is-small{
	width:52.08333333vw;
}

/*--- Flex ---*/
.l-flex{
	display: flex;
	justify-content:space-between;
}
.wrap_list{
	flex-wrap: wrap;
}
.wrap_list .col-sm-4{
	flex:0 0 calc((100% - 2.083333334vw) / 3);
}
.wrap_list .col-sm-3{
	width: calc(25% - (1.041666667vw / 2));
}
.wrap_list .col-sm-3:nth-child(4n){
	/* flex:0 0 calc((100% - 3.125000001vw) / 4); */
	margin-right:-1.041666667vw;
}
.flex-center{
	justify-content: center;
}

.row {
	margin-left: 0;
	margin-right: 0;
	padding-bottom: 0;
	display: flex;
	gap:1.041666667vw;
}
.row:before,
.row:after{
	display: none;
}
.row.is-wrap{
	flex-wrap:wrap;
}
.row.is-as{
	align-items: flex-start;
}
.row.is-ac{
	align-items:center;
}
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
	padding-left: 0;
	padding-right: 0;
	float: none;
}

.is-wrap .col-sm-3 {
	width: calc((100% - 3.125000001vw) / 4);
}
.is-wrap .col-sm-4 {
	width: calc((100% - 2.083333334vw) / 3);
}
.is-wrap .col-sm-6 {
	width: calc((100% - 3.125000001vw) / 2);
}

.center {
	text-align: center;
}
.left-txt {
	text-align: left;
}
.right-txt {
	text-align: right;
}

/* ボタン */
.btn {
	overflow: hidden;
	/* min-width: 15.625vw; */
	max-width: 100%;
	/* height: 2.65625vw; */
	margin-top: 0.520833333vw;
	margin-bottom: 0.520833333vw;
	padding: 0.5vw 4em;
	border:1px solid #212121;
	background-color: #fff;
	border-radius: 0.260416667vw;
	color:#212121;
	transition: opacity 1s;
	/* display: inline-block; */
	display: flex;
	align-items: center;
	justify-self: flex-start;
	font-size:1.6rem;
	position: relative;
}
/* .btn:after{
	content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 1px solid #5779aa;
    border-right: 1px solid #5779aa;
    transform: translateY(0) translateX(0.3em) rotate(45deg);
	transition: transform 0.5s;
	position: absolute;
    right: 1.5em;
} */
.btn.is-center {
	margin-left:auto;
	margin-right:auto;
}
.btn.is-small {
	width: 11.97916667vw;
	/* height: 1.822916667vw; */
}
.btn.is-twoline {
	/* width: 20.46875vw; */
	/* height: 3.489583333vw; */
}
.btn.is-black{
	background:#212121;
	color: #fff;
}
.btn.is-black:after{
	border-color:#fff;
}
.btn.is-cart{
	background:#3dad6f;
	border-color: #3dad6f;
	color:#fff;
	padding: 1rem 4rem;
}
.btn.is-cart:before{
	content:"";
	display: inline-block;
	width:1.090494792vw;
	height: 0.90928645vw;
	background:url("../img/product/cart.svg")no-repeat center;
	margin-right:0.4em;
}
.btn.is-cart:after{
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
}
.btn:hover{
	opacity:0.6;
}
.btn:hover:after{
    transform: translateY(0) translateX(1em) rotate(45deg);
}

/* 下線リンク */
.link_under{
	color:#212121;
	text-decoration: underline;
	transition: opacity 0.2s;
}
.link_under:hover{
	color:#212121;
	opacity:0.8;
	text-decoration: none;
}
/*--- ヘッダー ---*/
.header_logo_area .header_logo{
	margin: 0 0 10px 0;
}
.header_upper{
	display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.822916667vw;
}
.header_upper .header_logo_area img{
	height:3.645833333vw;
}
.header_upper .h_menu{
	gap:1.041666667vw;
	list-style: none;
}
.h_menu img{
	height: 2.8125vw;
}
/*--- ヘッダーメニュー ---*/
#header #category {
	padding-top:0;
	border-top:1px solid #c9c9c9;
	border-bottom:1px solid #c9c9c9;
}
#header .category-nav{
	background:#fff;
	border:none;
	margin:0;
	padding:0;
    display: flex;
}
#header .category-nav > li{
	width: 25%;
	border-top: none;
	border-bottom: none;
	border-left:1px solid #c9c9c9;
	background:#fff;
	color:#212121;
	float:none;
	text-align: center;
}
#header .category-nav > li:last-child{
	border-right:1px solid #c9c9c9;
}
#header .category-nav li a,
#header .h_menu li a {
	background-color: #fff;
	color:#212121;
}
.category-nav .arrow::after{
	width: 0.401041667vw;
	height: 0.364583333vw;
	background:url(../img/header/arrow.svg)no-repeat center 100%;
	transform:none;
	border: none;
	margin-top: -4px;
}

#header .h_menu li ul{
	background:#fff;
	right: 0;
	left:auto;
	position: absolute;
}

#header .h_menu li ul li a{
	width: 100%;
    display: block;
    padding: 10px;
	border-bottom: 1px solid #e8e8e8;
    white-space: nowrap;
}
#header .h_menu li ul li:hover{
	background:#F3EEE6;
}


#header .category-nav li .gn_big_menu{
	width:100vw;
	height: auto;
	padding: 1.5vw 0px;
	position: fixed;
	top: 100%;
	left: 0;
	background: #fff;
	z-index: 10000;
    box-shadow: 0px 6px 4px rgba(0, 0, 0, 0.2);
	display:none;
}
#header .category-nav li .gn_big_menu.active{
  display:block;
}
#header .category-nav li .gn_big_menu .inner_s{
  opacity:0;
  transition: opacity 0.2s;
  padding: 35px 0 30px;
}
#header .category-nav li .gn_big_menu.active .inner_s{
  animation:gn_big_active 0.2s linear 0.3s forwards;
  transition: opacity 0.2s;
}
@keyframes gn_big_active{
  0%{opacity:0;}
  100%{opacity:1;}
}
/*--- メニュータイトル ---*/
#header .category-nav li .gn_big_menu .gn_big_title_box{
  width:300px;
  max-width: 100%;
  /* background:#00a2aa; */
}
#header .category-nav li .gn_big_menu .gn_big_title_box h2{
  color:#212121;
  border-left:none;
  padding-left:5px;
  padding-top: 0;
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
  border-top: none;
  position: relative;
}
#header .category-nav li .gn_big_menu .gn_big_title_box a:hover{
  opacity:0.8;
  transition: opacity 0.2s;
}
#header .category-nav li .gn_big_menu .gn_big_title_box a::after{
  content: url("../img/gn/dropdown_icon_white.svg");
  position: absolute;
  top:4px;
  right:10px;
}
/*--- メニュー内容 ---*/
#header .category-nav li .gn_big_menu .gn_big_list_box{
  width:100%;
  padding-left:2.5em;
  /* background: #00a2aa; */
}
#header .category-nav li .gn_big_menu .gn_big_list_box ul{
  /* width:33%;
  max-width:300px; */
  margin: 0;padding:0;
  display: flex;
  flex-wrap: wrap;
  gap:1%;
}
#header .category-nav li .gn_big_menu .gn_big_list_box ul li{
  height:auto;
  margin-bottom:1%;
  text-align: left;
  overflow:visible;
  padding: 6px 0;
}

#header .category-nav li .gn_big_menu .gn_big_list_box .w18{
  width:19%;
}
#header .category-nav li .gn_big_menu .gn_big_list_box .w24{
  width:24%;
}
#header .category-nav li .gn_big_menu .gn_big_list_box ul li.title_line{
  /* height: calc(3em - 8px); */
  padding-top:8px;
  border-bottom: 1px solid #ddd;
}
#header .category-nav li .gn_big_menu .gn_big_list_box ul li a{
	height: auto;
    color: #212121;
    text-align: left;
    display: flex;
    padding: 10px;
    white-space: normal;
    position: relative;
    transition: opacity 0.2s;
    background: none;
    border-bottom: 0;
    font-size: 1.4rem;
    line-height: 1.4;
    align-items: center;
}
#header .category-nav li .gn_big_menu .gn_big_list_box ul li a img{
	width:75px;
}
#header .category-nav li .gn_big_menu .gn_big_list_box ul li a:hover{
  /* color:#00a2aa; */
  opacity:0.8;
  transition: opacity 0.2s;
}
#header .category-nav li .gn_big_menu .gn_big_list_box ul li a::after{content: "";transform:translateY(-2px) rotate(45deg);width:9px;height:9px;border-top:2px solid #212121;border-right:2px solid #212121;display: inline-block;margin-left:0.5em;position: absolute;right: 2px;top: 50%;transform: translateY(calc(-50% - 1px)) rotate(45deg);}
#header .category-nav li .gn_big_menu .gn_big_list_box ul.icon-none li a::after{display:none;}
#header .category-nav li .gn_big_menu .gn_big_list_box ul li a.none::after{display: none;}

#header .category-nav li .gn_big_menu .gn_big_list_box ul.sub{width: auto;}
#header .category-nav li .gn_big_menu .gn_big_list_box ul.sub li{padding-left:0.9em;}
#header .category-nav li .gn_big_menu .gn_big_list_box ul.sub li a::before{margin-right:0.2em;}
#header .category-nav li .gn_big_menu .gn_big_list_box ul.sub li:first-child{padding-top:14px;}

#header .category-nav li .gn_big_menu .gn_big_list_box .white_back{border-left:1px solid #3f3f3f;padding-left: 10px;position: relative;}
#header .category-nav li .gn_big_menu .gn_big_list_box .white_back::before{content:"";height:100%;border-left:1px solid #000000;position: absolute;top: 0;left: 0px;}


.slick-prev,
.slick-next{
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	width:3.645833333vw;
	height:6.666666667vw;
	font-size:0;
	background:url(../img/top/slide-arrow.webp)no-repeat;
	background-size:cover;
	border:none;
}
.slick-prev{
	left:-5vw;
}
.slick-next{
	right:-5vw;
	transform: translateY(-50%) rotate(180deg);
}

/*--- フッターバナー ---*/
#footer_banner .flex-center{
	gap:2.7%;
}
#footer_banner .flex-center a{
	width:40.5%;
}
#footer_banner .flex-center .pc{
	margin-top: 1.041666667vw;
}
#footer_banner .flex-center .pc img{
	width:100%;
}

/*--- フッター ---*/
#footer{
	padding-top: 0;
	background:#fff;
}
#footer a,
#footer a:hover {
    color: #212121;
}
#footer a:hover {
    opacity:0.7;
}
#footer .section-inner{
}

/*--- 4つのポイント ---*/
.footer-upper{
	border-top:1px solid #dcdcdc;
}
#footer .footer-upper ul li{
	width: 25%;
	border-right: 1px solid #dcdcdc;
	padding: 2vw 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	text-align: left;
}
#footer .footer-upper li:last-child{
	border-right:none;
}
#footer .footer-upper li span{
	font-size:13px;
}
/*--- フッターメイン部分 ---*/
#footer .footer-main{
	background:#333;
	padding:70px 0;
}
/*--- 問い合わせリンク ---*/
#footer .footer-btn{
	width: calc(50% - 15px);
	color: #fff;
	background: #5c5c5c;
	border-radius: 20px;
	padding: 24px 0 20px;
	text-align: center;
}
#footer .footer-btn:hover,
#footer .footer-btn:focus{
	color: #fff;
	opacity:0.8;
}
#footer .footer-btn h3{
	margin-top: 0px;
	font-size: 18px;
	margin-bottom: 13px;
}
#footer .footer-btn p{
	color: #fff;
	font-size: 27px;
	display: block;
	margin-bottom: 10px;
}
#footer .footer-btn p.mail:after{
	content:"";
	width:10px;
	height: 10px;
	display: inline-block;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: translateY(-5px) rotate(45deg);
	margin-left: 10px;
}
#footer .footer-btn p img{
	transform: translateY(-4px);
}
#footer .footer-btn span{
	font-size: 13px;
}
#footer ul li{
	display: block;
	text-align: left;
}
/*--- フッターメニュー ---*/
.footer-menu-box{
	justify-content:flex-start;
	gap: 3em;
}
.footer-menu{
	width:11em;
	max-width: 100%;
	color:#fff;
	margin-top: 20px;
}
.footer-menu.footer-menu-wide{
	width:22em;
}
.footer-menu h4{
	width:100%;
	border-bottom:1px solid #fff;
	color:#fff;
	padding-bottom: 10px;
	margin-bottom:10px;
}
#footer .footer-menu ul li{
	margin-left: 0;
}
#footer .footer-menu ul li a{
	color:#fff;
}
/*--- コピーライト ---*/
.footer_logo_area{
	margin-top:0;
	background:#fff;
	color: #333;
}
.shikon-font{
	color:#8f6799;
}
.shiso-font{
	color:#30c758;
}

/*-------------------------------------------------------------- トップ ---*/
.front_page #contents{
	padding-top: 0;
}
.intro{
	padding-top: 0;
	background: #f5f5f5;
}
.intro .row{
	align-items: stretch;
}
.intro .row > div{
	background:#fff;
	border-radius: 0.78125vw;
	/* padding:0.78125vw 0.625vw; */
	padding-bottom:0 !important;
	overflow: hidden;
	height: 110px;
}
.intro .banner_box{
	justify-content: flex-start;
	gap: 0.520833333vw;
    align-items: center;
	color:#212121;
	transition: opacity 0.5s;
	height: 100%;
}
.intro .banner_box:hover{
	opacity:0.8;
}
.intro .banner_box img{
	height:auto;
}
.intro .banner_box h3{
	font-size:2rem;
	font-weight: bold;
	margin:0;
}
.intro .banner_box p{
	margin:0;
}

#contents.top_contents{
	padding-top:0;
}
/*--- 人気商品 ---*/
.popular,
.category{
	padding-top:1.5625vw;
	padding-bottom:1.5625vw;
}
.popular-slide{
	margin-left:-0.520833333vw;
	margin-right:-0.520833333vw;
}
.popular-slide .popular-box{
	margin-left:0.520833333vw;
	margin-right:0.520833333vw;
}
.popular-slide .popular-box a{
	color:#212121;
}
.product_list .row{
	flex-wrap:wrap;
	margin-left:-0.5208333335vw;
	margin-right:-0.5208333335vw;
	gap:0;
}
.product_list .col-sm-3{
	padding:0 0.5208333335vw;
	margin-bottom:0.78125vw;
}
.product_list a{
	color:#212121;
	transition:opacity 0.5s;
}
.product_list a:hover{
	opacity:0.8;
}
.product_list figure{
	border:1px solid #c9c9c9;
}
.product_list .text-box{
	padding-top: 1em;
}
.product_list h3{
	font-size:1.6rem;
    margin-top: 0.416666667vw;
}
.product_list p{
	font-size:1.4rem;
	color:#777777;
}
.product_list p.price{
	font-size:1.6rem;
	color:#212121;
}
.product_list p.price span{
	font-size:2rem;
	font-weight: bold;
}
.category_tag{
	color:#fff;
	background:#8f6799;
	line-height:1.5625vw;
	border-radius:0.78125vw;
	padding:2px 2em 0;
	display: inline-block;
}
.category_tag.is-shiso{
	color:#212121;
	background:#baf7ca;
}

/*--- カテゴリー ---*/
.category .row{
	padding:0.520833333vw 0;
}
.category .col-sm-6,
.category .col-sm-4{
	border:1px solid #c9c9c9;
	background:#fff;
	color: #212121;
	border-radius: 10px;
    overflow: hidden;
}
.category .col-sm-6 .content_text{
	width:47%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.category .col-sm-6 h3,
.category .col-sm-4 h3{
	font-size:1.8rem;
	/* font-size:3rem; */
}

.category .col-sm-4{
	justify-content: flex-start;
	gap:0.520833333vw;
}
.category .col-sm-4 img{
	width: 6.875vw;
}
.category .col-sm-4 .content_text{
	display: flex;
	justify-content: center;
	align-items: center;
}
/* .category .col-sm-4 h3{
	font-size:2.3rem;
} */

/*--- 男女問わず ---*/
.about_text{
	position: relative;
	padding-top:16.35416667vw;
	padding-bottom:4.166666667vw;
}
.about_text h2{
	text-align: left;
	padding-bottom:1.5em;
}
.about_text .section-inner{
	z-index:10;
	position: relative;
}
.about_text:before{
	content:"";
	display: block;
	width:100%;
	height:24.84375vw;
	position: absolute;
	top:0;
	z-index:0;
	background:url("../img/top/about_back1.webp")no-repeat top center;
	background-size: 100%;
}
.about_text:after{
	content:"";
	display: block;
	width:100%;
	height:27.44791667vw;
	position: absolute;
	bottom:0;
	z-index:0;
	background:url("../img/top/about_back2.webp")no-repeat bottom center;
	background-size: 100%;
}
.about_text .btn{
	justify-self: center;
	background:none;
}

/*--- 説明 ---*/
.about_point{
	padding-top: 3.229166667vw;
	/* padding-bottom: 3.229166667vw; */
}
.about_point .row{
	margin-bottom: 3.229166667vw;
}
.about_point h3{
	margin-bottom: 1.5625vw;
}
.about_point p{
	margin-bottom: 1.0625vw;
}

/*--- 悩み ---*/
.concerns{
	padding-top: 3.229166667vw;
	padding-bottom: 3.229166667vw;
}
.concerns .col-sm-3{
	border:1px solid #c9c9c9;
	padding:0.520833333vw;
	display: flex;
	flex-direction: column;
	border-radius:10px;
}
.concerns .col-sm-3 a,
.contents .col-sm-4 a{
	color:#212121;
}
.concerns .col-sm-3 figure{
	text-align: center;
}
.concerns .col-sm-3 img{
	/* height: 12.5vw; */
}
.concerns .col-sm-3 .title_box{
	font-size:2.5rem;
	height: 3em;
	display: flex;
	/* justify-content: center; */
	align-items: center;
}
.concerns .col-sm-3 h3{
	font-size:2rem;
	/* text-align: center; */
}
.concerns .col-sm-3 a{
	margin-top: auto;
}

/*--- お客様の声 ---*/
.voice{
	padding-top: 3.229166667vw;
	padding-bottom: 3.229166667vw;
	background:#d9e5f5;
}
.voice_slide{
	margin:1.5625vw -0.520833333vw;
}
.voice_slide li{
	border:1px solid #c9c9c9;
	background:#fff;
	margin-left:0.520833333vw;
	margin-right:0.520833333vw;
}
.voice_slide li a{
	color:#212121;
    width: 100%;
    height: 100%;
	display: block;
	padding:0.520833333vw 1.041666667vw;
	transition: opacity 0.5s;
}
.voice_slide li a:hover{
	opacity:0.5;
}
.voice_slide li p{
	padding-top: 1em;
}
.voice_slide li span:last-child{
	color:#777777;
}
.voice .flex-center{
	gap:1.041666667vw;
}
.voice_slide .slick-track {
  display: flex;
}
.voice_slide .slick-slide {
  height: auto !important;
}

/*--- ---*/
.contents{
	padding:3.489583333vw 0;
}
.contents .col-sm-4 a{
	display: flex;
	flex-direction: column;
	height:100%;
}
.contents .col-sm-4 .title_box{
	font-size:2rem;
	height: 4em;
	display: flex;
	/* justify-content: center; */
	align-items: center;
}
.contents .col-sm-4 h3{
	font-size:2rem;
	/* text-align: center; */
}
.contents .col-sm-4 .btn{
	margin-top: auto;
}

/* --------------------------------------- 商品一覧ページ -------------------------------- */
.category_txt_box{
    background: #fff;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
    border-radius: 5px;
	padding:1.041666667vw 1.5vw;
	border:1px solid #c9c9c9;
	text-align: left;
	line-height: 2.2;
}
.category_txt_box h2{
    padding-bottom: 1.2vw;
}
.list-category-section{
	background:#F3EEE6;
	padding:30px 0 20px;
	line-height:2;
}
.product_list{
	margin-top: 1.5625vw;
}

.category-list{
	display:flex;
	gap:20px;
}
.category-list li{
	border: 1px solid #c9c9c9;
    border-radius: 10px;
}
.category-list li p{
	padding:10px 5px;
	margin-bottom:0;
}

/* --------------------------------------- 悩み一覧ページ -------------------------------- */
.nayami-txt-inner{
	background:#f3eee6;
	padding-top:3em;
	padding-bottom:3em;
	margin-bottom:4em;
}
.nayami-txt-inner h2{
	padding-bottom: 1.78125vw;
}
.nayami-txt-inner p{
	line-height: 2;
}

/* --------------------------------------- 商品詳細ページ -------------------------------- */
.product_box .l-flex{
	gap:4%;
}
.product_box .product_image{
	width:40%;
}
.product-slide{
	border:1px solid #c9c9c9;
}
.product_image .product-slide img{
    width: 100%;
}
.product_image .slick-prev,
.product_image .slick-next{
    width: 1.645833vw;
    height: 2.666667vw;
    background-size: contain;
}
.product_image .slick-prev{
    left: -2vw;
}
.product_image .slick-next{
    right: -2vw;
}
.product_image .thumbnail-slide{
    width: calc(100% - 4vw);
    margin-left: 2vw;
    margin-right: 2vw;
}
.product_image .thumbnail-slide li{
	border:1px solid #c9c9c9;
}
.big-image{
	border:1px solid #c9c9c9;
}
.thumbnail-image{
	flex-wrap: wrap;
	gap:2%;
	margin-top:20px;
}
.thumbnail-image li{
	width:23.5%;
	margin-bottom: 10px;
	cursor: pointer;
	border:1px solid #c9c9c9;
}

.product_info{
	width:56%;
}
.product_info h3{
	font-size:2rem;
	line-height:1.6;
	font-weight: bold;
	color:#636363;
}
.category_tab.gray{
	background:#636363;
}
.product_info .category_tab{
	padding-bottom:1.302083333vw;
}
.product_info .cart_box{
	padding-bottom:1.5625vw;
	border-bottom:1px solid #C9C9C9;
}
.product_info b{
	font-size:1.6rem;
}
.product_info .price{
	font-size:3rem;
}
.product_info .point{
	font-size:2rem;
}
.product_info .teika{
	color:#636363;
}
.product_info input[type="number"]{
	width: 65%;
	/* height: 2.65625vw; */
	margin-top: 0.520833333vw;
	margin-bottom: 0.520833333vw;
}

.product_text{
	padding-top:1.5625vw;
}
.product_text h4{
    font-size: 1.8rem;
    color: #034854;
    line-height: 1.5;
}
.product_text .cont-txt{
	padding-left: 6em;
    text-indent: -6em;
}

.product_btn_box{
	padding-top:0.833333333vw;
}

/*--- 関連商品 ---*/
.popular-slide.product_slide h3{
	font-size:18px;
}

/*--- 商品詳細 ---*/
.main_visual{
	text-align: center;
}
.soudan {
    width: 100%;
    max-width: 760px;
	margin: 0 auto;
	display: inline-block;
	text-align: left;
	border: 20px solid #ededed;
}
.soudan_tel{
	background-image:none;
	padding-left:0;
	margin-left:0;
	font-size: 3.8rem;
	text-align: left;
}
.soudan_tel:before{
	content: url(../img/common/ico_tel.png);
    transform: translateY(9px);
    display: inline-block;
    margin-right: 1rem;
}
.soudan_day{
	text-align: left;
}
.product_detail,
.product_osusume,
.product_seibun,
.product_haigou,
.about_use,
.about_point,
.product_voice{
	padding:1.5625vw 0;
}
.product_osusume_box{
	width:100%;
	max-width:760px;
	padding:1.041666667vw;
	border-radius:1.041666667vw;
	background: #8F6799;
	margin: 0 auto;
}
.product_osusume_box ul{
	width:100%;
	padding:1.822916667vw 2.864583333vw;
	background: #fff;
	border-radius:0.520833333vw;
}
.product_osusume_box ul li{
	padding:0.520833333vw 0;
}
.product_osusume_box ul li:before{
	content:"";
	display: inline-block;
	width:1.458333333vw;
	height:1px;
	border-bottom:1px solid #C9C9C9;
	margin-right:1em;
	transform:translateY(-0.260416667vw);
}
.product_seibun dl{
	display: flex;
	gap:2%;
	border-bottom:1px solid #C9C9C9;
	padding:2.083333333vw 0;
}
.product_seibun dl dt{
	width:32.4%;
}
.product_seibun dl dd{
	width:65.6%;
}
.product_seibun dl dd h3{
	font-size:3rem;
}
.product_seibun dl dd h3:after{
	content:"";
	display: block;
	width:3.125vw;
	height:1px;
	border-bottom:1px solid #C9C9C9;
	margin:1em 0;
}
.product_seibun dl dd h4{
	color:#768E6B;
	font-weight: bold;
}

.product_haigou .l-flex{
	background:#FFEFD7;
	padding:1.041666667vw;
}

/*--- ご使用方法 ---*/
.about_use .use_table{
	border-spacing: 0.260416667vw;
	border-collapse: separate;
	margin: 0 0 20px;
}
.use_table th{
	text-align: center;
	background:#FFB0F0;
    border-radius: 5px;
}
.use_table th,
.use_table td{
	margin:0.260416667vw;
    padding: 0.260416667vw 1vw;
}
.about_use .center{
	padding:1.041666667vw 0;
	color:#777777;
	position:relative;
}
/* .about_use .center:after{
	content:"";
	display: block;
	width:4.6875vw;
	height:6.71875vw;
	position: absolute;
	top: 50%;
	right:calc(50% - 16.80208333vw);
	transform:translateY(-50%);
	background:url("../img/product/use_icon.webp")no-repeat 100%;
	background-size:cover;
} */
.about_use .col-sm-3 figure{
	border:1px solid #c9c9c9;
	margin-bottom: 0.78125vw;
	text-align: center;
}
.use-list li{
	position: relative;
	margin-bottom:20px;
}
.use-list li:before{
	content:"";
	border: 2px solid #034854;
    color: #034854;
	background: #fff;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 1px;
	font-size:2rem;
	font-weight: bold;
}
.use-list li:first-child:before{
	content:"1";
}
.use-list li:nth-child(2):before{
	content:"2";
}
.use-list li:nth-child(3):before{
	content:"3";
}
.use-list li:nth-child(4):before{
	content:"4";
}
.use-list li:nth-child(5):before{
	content:"5";
}
.use-list li:nth-child(6):before{
	content:"6";
}

.use-list li.is-current figure{
	margin-top: -3px;
    border: 4px solid #FF99E0;
}
/*--- ポイント ---*/
.point_table{
	margin: 1.041666667vw 0;
	width: 100%;
}
.point_table th,
.point_table td{
	border:1px solid #876B46;
	padding:1.041666667vw 0.260416667vw;
	text-align: center;
}
.point_table th{
	background:#FFEFD7;
	font-weight: bold;
}

.product_caution{
	border:5px solid #FF99E0;
	text-align: left;
	padding: 0 2em;
	margin-bottom:1.520833333vw;
}
.product_caution h3{
	font-size:2rem;
	font-weight: bold;
	margin-bottom:0.520833333vw;
}

/*--- リンク ---*/
.product-link-list a{
	margin-bottom:20px;
}

/*--- お客様の声 ---*/
/* .product_voice h2{
	background:#C9C9C9;
	font-size:1.5625vw;
	padding:1.197916667vw;
	text-align: left;
} */
.product_voice .product_voice_box{
	position: relative;
	padding-bottom: 2.041667vw;
}
/* .product_voice .product_voice_box:after{
	content:"";
	display: block;
	width:3.125vw;
	height:1px;
	border-bottom:1px solid #C9C9C9;
	margin-top:2.041667vw;
} */
.product_voice_box h3{
	font-size:1.6rem;
	font-weight: bold;
	margin-top: 0;
	margin-bottom:0.833333333vw;
}



#detail_free_box__freearea{
	border-top: none;
    border-bottom: none;
}
#detail_free_box__freearea > h2{
	display: none;
}
.h3, h3 {
    font-size: 24px;
}

/* --------------------------------------- ご利用ガイド -------------------------------- */
.title-bar-box{
	padding:1em;
	background:#F3EEE6;
	font-size:1.8rem;
	font-weight: bold;
	text-align:left;
	color:#212121;
	margin-bottom:1.1em;
}
.guide-list div{
	border: 1px solid #c9c9c9;
    /* display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; */
	padding:10px 0;
}
.guide-list div h4{
	font-weight:bold;
	font-size:1.6rem;
	margin-bottom:1em;
}
.guide-list div .telnum{
	font-size:3rem;
	line-height: 1;
}
.guide-list div .teltxt{
	color:#595959;
}

.red{
	color:#f00;
}
.indent-text{
	line-height: 1.8;
	margin-bottom: 20px;
}
.indent-text p{
	padding-left:1em;
	text-indent:-1em;
	margin-bottom: 0;
}
.indent-text p:before{
	content:url("../img/common/text-icon.svg");
	display:inline;
	transform:translateY(1px);
}
.indent-text img{
	margin-top: 5px;
	margin-bottom: 5px;
}
.indent-text img,
.indent-text ul{
	margin-left:1em;
}
ul.dot-list{
	list-style:"・";
	padding-left:1em;
}
ul.bar-list{
	list-style:" － ";
	padding-left:1em;
}

/*  */
.beginners-list li{
	border:1px solid #c9c9c9;
}
.beginners-list li a{
    width: 100%;
    height: 100%;
	padding: 0.6em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	text-align: left;
    padding-bottom: 1.1em;
    font-size: 1.4rem;
    color: #212121;
	transition: background 0.5s;
}
.beginners-list li a:hover{
	background:#F3EEE6;
}
.beginners-list li a:after{
	content:"";
	width:1.7rem;
	height:1.7rem;
	border-right: 2px solid #5779aa;
    border-bottom: 2px solid #5779aa;
	transform:rotate(45deg);
	display:block;
	transition: transform 0.5s;
}

.beginners-list li a:hover:after{
    transform:translateY(10px) rotate(45deg);
}
.commit-title{
	display: flex;
	gap:2rem;
	font-weight: bold;
	margin-top: 2em;
}
.commit-title b{
	font-size:3.2rem;
}
.commit-title span{
	font-size:2.4rem;
}

/* --------------------------------------- 今月のお買い得アイテムページ -------------------------------- */
.campain-box{
	background: #ff6100;
	box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
	border-radius: 1.388888889vw;
	padding: 1.041666667vw 4.5vw;
	text-align: center;
	line-height: 1.8;
	font-size: 2.6rem;
	color: #fff;
	display: inline-block;
	margin: 1.5vw auto 3vw;
}
.campain-box span{
	font-size:1.6rem;
	display: block;
}
.point-container{
	background:linear-gradient(0deg,#fff,#d9e5f5);
	padding:2.5625vw 0;
}
.point-container .product_list .row{
	justify-content: center;
}
.point-container .point-item-title{
	font-size:1.7em;
	display: inline-block;
	margin-bottom:8px;
}

/* --------------------------------------- よくあるご質問ページ -------------------------------- */
.faq-link-list{
	justify-content: center;
	padding:1vw 0 3vw;
}
.faq-link-list li{
	border-bottom:1px solid #c9c9c9;
	position: relative;
}
.faq-link-list li a{
	color:#212121;
	transition: opacity 0.5s;
	padding:0 10px;
}
.faq-link-list li a:hover{
	opacity:0.8;
}
.faq-link-list li a:before{
	content:"";
	width:7px;
	height:7px;
	display: inline-block;
	border-top:2px solid #c9c9c9;
	border-right:2px solid #c9c9c9;
	transform: translateY(-3px) rotate(45deg);
	margin-right:0.5em;
}
/*--*/
.faq_box{
	background:#f3eee6;
	padding:1.388888889vw;
	margin-bottom: 1.388888889vw;
}
.faq_box .faq_inner{
	background:#fff;
	padding:1.388888889vw;
	border-radius:1.041666667vw;
}
.faq_box h3{
	margin-top:0;
	margin-bottom:0;
	padding-bottom:2vw;
	/* border-bottom:1px solid #c9c9c9; */
	font-size:2rem;
	font-weight: bold;
	text-align: center;
}
.faq_box dl{
	/* padding:0.694444444vw 1.041666667vw;
	border-bottom:1px solid #c9c9c9; */
}
.faq_box dt{
	background: url(../img/faq/q-icon.svg) no-repeat top left;
    background-position-x: 1em;
    background-position-y: calc(1em + 3px);
    background-color: #f3eee6;
    padding: 1em 1em 1em 2.5em;
}
.faq_box dd{
	margin-top:15px;
    padding: 0.5em 1em 3em 2.5em;
	background:url(../img/faq/a-icon.svg)no-repeat top left;
    background-position-x: 1em;
    background-position-y: calc(0.5em + 3px);
}
.faq_telnum{
	font-size:36px;
}

/* --------------------------------------- お客様の声ページ -------------------------------- */
/* -- ボタン -- */
.voice-btn li{
	font-size:1.8rem;
	border:1px solid #c9c9c9;
	margin-bottom:20px;
	transition: background 0.5s, color 0.5s;
}
.voice-btn li a{
	width:100%;
	height:100%;
	display: block;
	padding:1em;
	color:#212121;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.voice-btn li a:after{
	content:"";
	display: block;
	width: 10px;
	height: 10px;
	margin:2px auto;
	transform:rotate(45deg);
	border-bottom:2px solid;
	border-right:2px solid;
	border-color:#212121;
}
/*--- 紫根 ---*/
.voice-btn li#shikon-voice-btn{
	border:1px solid #8F6799;
	background:none;
}
.voice-btn li#shikon-voice-btn a{
	color:#212121;
}
.voice-btn li#shikon-voice-btn a:after{
	border-color:#212121;
}
.voice-btn li#shikon-voice-btn.active,
.voice-btn li#shikon-voice-btn:hover{
	background:#8F6799;
}
.voice-btn li#shikon-voice-btn.active a,
.voice-btn li#shikon-voice-btn:hover a{
	color:#fff;
}
.voice-btn li#shikon-voice-btn.active a:after,
.voice-btn li#shikon-voice-btn:hover a:after{
	border-color:#fff;
}
/*--- 紫蘇 ---*/
.voice-btn li#shiso-voice-btn{
	border:1px solid #baf7ca;
}
.voice-btn li#shiso-voice-btn.active,
.voice-btn li#shiso-voice-btn:hover{
	border:1px solid #baf7ca;
	background:#baf7ca;
}
/*  */
.voice-age{
	font-size:2.4rem;
	font-weight: bold;
	margin-bottom: 1em;
}
/* --各項目-- */
.voice-item{
	text-align: center;
}
.voice-item .voice-txt{
	padding-top: 1.6vw;
	margin-top: 0.6vw;
	background:url("../img/voice/voice_txt.svg")no-repeat top center;
}
.voice-item .voice-txt p{
	margin-top: 0.6vw;
}
.voice-item a{
	color:#212121;
}

/*--- お客様の声詳細ページ ------*/
.voice_comment{
	border: 1px solid #c9c9c9;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: baseline;
	position: relative;
}
.voice_comment:before{
	content:"";
	position: absolute;
	top:50%;
	left:-10px;
	border-top: 1px solid #c9c9c9;
	border-left: 1px solid #c9c9c9;
	display: block;
	width:20px;
	height:20px;
	background: #fff;
    transform: rotate(-45deg);
}

/* --------------------------------------- パララックス -------------------------------- */
.parallax-bg{
	height:530px;
	background-position: center 0;
	background-size: 170% auto;
	background-repeat: no-repeat;
	/* background-attachment: fixed; */
	overflow: hidden;
	background-image: url('../img/top/bg_image2.webp');
}
@media (max-width: 768px) {
    .parallax-bg { 
	height:230px;background-attachment: scroll; }
  }
/* --------------------------------------- お肌タイプ診断ページ -------------------------------- */
.skin_point_box{
	border:10px solid #F3EEE6;
	padding:1vw;
	background-position: center center;
}
.counselor_box{
	background:#F3EEE6;
	padding:2rem;
}

.counselor_inner{
	background:#fff;
	border-radius:1rem;
	padding:2rem;
}

/* --------------------------------------- お肌タイプ診断ページ -------------------------------- */
@media (max-width: 768px) {
	.hair_point{
        gap: 10px !important;
	}
}
.hair_point_box{
	border:2px solid #F7BAEE;
	padding:1rem;
}


/* --------------------------------------- PC -------------------------------- */
@media only screen and (min-width: 768px) {
	a[href^="tel:"] {
		pointer-events: auto;
	}
}
/* --------------------------------------- SP -------------------------------- */
@media (max-width: 768px) {
	body {
		font-size: 16px;
	}
	a[href^="tel:"] {
		pointer-events: auto;
	}
	.section-inner {
		width: 100%;
		padding: 0 10px;
	}
	.section-inner.is-small{
		width: 100%;
	}
	.row,.l-flex{
		flex-direction: column;
	}
	.row{
		gap:20px;
	}
	.is-row{
		flex-direction: row;
	}
	.is-cmn-rev{
		flex-direction: column-reverse;
	}
	.category_tag {
		line-height: 26px;
		border-radius: 13px;
	}
	.btn {
		width: 100%;
		max-width: 100%;
		height: 50px;
		margin-top: 10px;
		margin-bottom: 10px;
		border-radius: 5px;
	}
	.btn.is-small {
		width: 100%;
		/* height: 35px; */
	}
	.btn.is-twoline {
		width: 100%;
		/* height: 62px; */
	}

	h2.about_title{
		font-size:32px;
	}
	/*--------- ヘッダー --------*/
	.header_upper{
		flex-direction: column;
		padding: 10px;
	}
	.header_upper .h_menu{
		gap:10px;
		margin-top: calc(16vw + 10px);
	}
	.header_logo_area{
		margin-right: 0;
		display: none;
	}
	.header_upper .header_logo_area img{
		width: 80%;
		height:auto;
	}
	.h_menu img {
		height: 11vw;
	}
	#header .h_menu li ul li {
		float: left;
		overflow: hidden;
		width: 100%;
		height: 0;
		transition: 0.2s;
	}
	.h_mmpoint{
		width: 100%;
		margin-top: 30px;
	}
	.h_mmpoint #monthly a{
		height: 45px;
	}
	.drawer-open .drawer .section-inner{
		padding:0;
	}
	.gn_big_list_box{
		gap:0;
	}
	.gn_big_list_box .w18{
		width: 100%;
	}
	.gn_big_list_box .w18 img{
		display: none;
	}
	.gn_big_list_box .row{
		gap:0;
	}

	#btn_menu{
		position: absolute;
		right: 15px;
        top: 50%;
        z-index: 11;
        transform: translateY(-50%);
	}
	/*--- sp用Fix ---*/
	.fix_header{
		width:100%;
		height:16vw;
		position: fixed;
		left: 0;
		top: 0px;
		z-index: 10;
		padding: 10px 0 0;
		background: #fff;
	}
	.fix_header .fix_h_wrap{
		width:100%;
		height:100%;
		position: relative;
		text-align: center;
	}
	.fix_header .fix_h_wrap img{
		max-height: 100%;
		max-width: 60%;
	}

	.drawer{
		top: 16vw;
	}
	.drawer-open .drawer{
	        top: 16vw;
		height: calc(100% - 16vw);
	}

	/*--------- フッター --------*/
	.footer-upper .section-inner > .l-flex{
		flex-direction: row;
		flex-wrap: wrap;
	}
	#footer .footer-upper ul li{
	    width: 50%;
		justify-content: flex-start;
	}
	#footer .footer-upper ul li:nth-child(2){
	    border-right:none;
	}
	#footer .footer-btn{
		width: 100%;
		margin-bottom: 30px;
	}
	#footer .footer-btn h3{
		font-size: 16px;
	}
	#footer .footer-btn a{
		font-size: 25px;
	}
	.footer-menu-box{
		gap:2em;
	}
	.footer-menu,
	.footer-menu.footer-menu-wide{
		width: 100%;
	}

	/*--------- トップページ --------*/
	/*--- トップ ---*/
	.intro{
		padding-bottom:20px;
	}
	.intro .banner_box {
		gap: 10px;
	}
	.intro .banner_box img {
		width: 30%;
	}
	.intro .banner_box h3 {
		font-size: 20px;
	}
	/*--- 人気商品 ---*/
	.popular,
	.category{
		padding-top:30px;
		padding-bottom:30px;
	}
	.popular-box h3 {
		font-size: 16px;
		margin-top: 8px;
	}
	.popular-box p {
		font-size: 15px;
	}
	.popular-box p.price {
		font-size: 14px;
	}
	.popular-box p.price span {
		font-size: 20px;
	}
	/*--- カテゴリ ---*/
	.category .row{
		margin-bottom:20px;
	}
	.category .col-sm-6 h3,
	.category .col-sm-4 h3 {
		font-size: 20px;
	}
	.category .col-sm-6 img,
	.category .col-sm-6 .content_text {
		width: 50%;
	}
	.category .col-sm-4{
		gap: 10px;
	}
	.category .col-sm-4 img {
		width: 30%;
	}
	.category .col-sm-4 .content_text {
		width: calc(70% - 10px);
	}
	/*--- 男女問わず ---*/
	.about_text {
		padding-top: 240px;
		padding-bottom: 20px;
	}
	.about_text:before,
	.about_text:after {
		height: 50%;
	}
	.about_point h3 {
		margin-bottom: 20px;
	}

	/*--- ---*/
	.wrap_list .col-sm-3 {
		width:100%;
		padding: 8px;
	}
	.concerns .col-sm-3 img {
		max-width: 64%;
		height: auto;
	}
	.concerns .col-sm-3 .title_box {
		font-size: 20px;
		height: 4em;
	}
	.concerns .col-sm-3 h3 {
		font-size: 20px;
	}

	/*--- ---*/
	.voice_slide li {
		margin-left: 4px;
		margin-right: 4px;
		padding: 10px;
	}

	/*--- ---*/
	.contents .col-sm-4 .title_box {
		font-size: 20px;
		height: 3em;
	}
	.contents .col-sm-4 h3 {
		font-size: 20px;
	}

	#footer ul{
		margin-top: 20px;
	}
	#footer_banner .flex-center {
		gap: 20px;
		margin-bottom: 20px;
	}
	#footer_banner .flex-center a {
		width: 100%;
	}
	#footer .section-inner li {
		border-right: 0;
		margin: 0 0 23px;
		display: block;
	}

	/*--------------------------------------------------------*/
	.product_list {
		margin-top: 20px;
	}
	.product_list .row{
		flex-wrap:wrap;
		gap:4%;
	}
	.product_list .row{
		flex-wrap:wrap;
		gap:4%;
	}
	.product_list .col-xs-6 {
		width: 48%;
	}
	.product_box .product_image {
		width: 100%;
	}
	.product_info{
		width:100%;
	}
	.product_info h3 {
		font-size: 20px;
		margin-top: 0;
	}
	.product_info p {
		margin: 10px 0;
	}
	.product_info b {
		font-size: 20px;
	}
	.product_info .price {
		font-size: 40px;
	}
	.product_info .point {
		font-size: 20px;
	}
	.product_info input[type="text"] {
		height: 50px;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.product_info .cart_box {
		padding-bottom: 20px;
	}
	.product_text {
		padding-top: 20px;
	}

	/*---  ---*/
	.product_osusume_box {
		width: 100%;
		padding: 10px;
		border-radius: 10px;
	}
	.product_osusume_box ul {
		padding: 15px;
		border-radius: 5px;
	}
	.product_seibun dl dd h3 {
		font-size: 22px;
	}
	.product_seibun dl{
		flex-direction: column-reverse;
		padding: 20px 0 3px;
	}
	.product_seibun dl dt,
	.product_seibun dl dd {
		width: 100%;
	}
	/*--- ---*/
	.about_use .use_table {
		border-spacing: 10px;
	}
	.use_table th,
	.use_table td {
		margin: 0;
		padding: 5px;
	}
	.about_use .row{
		gap: 10px;
        flex-wrap: wrap;
	}
	.about_use .row .col-xs-6{
		width:calc(50% - 10px);
	}
	.product_caution h3 {
		font-size: 20px;
		margin-bottom: 10px;
	}
	.product_voice_box h3 {
		font-size: 16px;
		margin-bottom: 16px;
	}
	.product_voice .product_voice_box {
		padding-bottom: 20px;
	}
	.product_voice .product_voice_box:after {
		width: 100%;
		margin-top: 20px;
	}
	.soudan p{
		width: 100%;
	}
}