@charset "UTF-8";
/* global */
@media only screen and (min-width: 1001px) {
	.sp {display: none !important;}
}
@media only screen and (max-width: 1000px) {
	.pc {display: none !important;}
}


/* ------------------------------------------------------------
	01. リセット
	------------------------------------------------------------ */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,img,b,i,dl,dt,dd,ol,ul,li,label,
table,caption,tbody,tfoot,thead,tr,th,td,footer,header {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: normal;
	line-height: 1;
	vertical-align: bottom;
}

body {line-height: 1;}
footer,header {display: block;}
ul,ol,dl {list-style: none;}

a {
	margin: 0;
	padding: 0;
	border: 0;
	color: #000;
	text-decoration: none;
	vertical-align: middle;
	background: transparent;
	outline: none;
}

img {vertical-align: bottom;}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

input,select {vertical-align: middle;}


/* ------------------------------------------------------------
		02. コンテナ制御
		------------------------------------------------------------ */

body {
	width:100%;
	max-width:430px;
	margin:0px auto;
	font-family:"Helvetica", "Arial", "ヒラギノ角ゴシック", "メイリオ", sans-serif;
}

.whole {
	width:100%;
	max-width: 430px;
	margin:0px auto;
	padding:0 10px;
//	border:solid 1px silver;
}

.whole img {width:100%;}


@media only screen and (min-width: 1001px) {
	body {max-width:1200px;}
	.whole {width:100%; max-width:1000px;}
}


/* ------------------------------------------------------------
		03. 汎用クラス
		

<div class="fset setbox">
	<!-- 値段 -->
	
	<!-- ●カート -->
	
</div><!-- .setbox -->

		------------------------------------------------------------ */

.tar {text-align:right;}
.tac {text-align:center;}
.tal {text-align:left;}

.fdc {flex-direction:column;}
.fnw {flex-wrap:nowrap;}
.jcc {justify-content: center;}
.jcb {justify-content: space-between;}
.ais {align-items: flex-start;}


/* 横並びflex基本セット */
.fset {
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	gap:30px;
}

/*setbox運用*/
.setbox {
	clear:both;
	display:flex;
	flex-direction:row;
	justify-content:flex-end;
	align-items: flex-end;
	flex-wrap:wrap;
	gap:10px;
}

.pic {text-align:center;}

/* 特集意図 */
h1 {
	font-size:18px;
	font-weight:bold;
}

/* 商品名 h3 */
h3 {
	font-size:26px;
	font-weight:bold;
	margin:18px 0;
}
h3.aboveRuby {margin-bottom:0;}
h3.belowRuby {margin-top:0;}


/* キャッチコピー h4 */
h4 {font-size:20px;}


/* 小見出し h5 */
h5 {
	font-size:16px;
	font-weight:bold;
}

/*詳細説明部分*/
div.detail {font-size:16px;}

/* 商品名のふりがな的な span */
span.ruby {font-size:14px;}

/* 可読性コントロール */
h1, h3, h4, h5, div.detail {line-height:125%;}

@media only screen and (min-width: 1001px) {
	h1 {font-size:27px;}
	h3{font-size:36px; margin:27px 0;}
	h4 {font-size:30px;}
	h5 {font-size:24px;}
	div.detail {font-size:22px;}
	.ruby {font-size:21px;}
}


/* 値段記載の箱 div */
div.price {
	display:flex;
	flex-wrap:wrap;
	justify-content: center;
	align-items: center;
	font-size:18px;
	line-height:100%;
}

/* 送料無料タグ span */
span.tag {
	display:inline-block;
	background-color: #000;
	color: #fff;
	font-size:16px;
	text-align:center;
	border:black 5px solid;
	margin-left:5px;
}

/* 別途送料500円 span */
span.fee {
	display:inline-block;
	text-align: center;
	font-size:12px;
	border:1px #666 solid;
	padding: 2px 5px;
	margin-left:5px;
}

@media only screen and (min-width: 1001px) {
	div.price {font-size:24px;}
	span.tag {font-size:20px;}
	span.fee {font-size:16px;}
}


/* カートボタン関係 div & a */
div.cart {text-align:right;}

div.cart a.url {
	display:inline-block;
	color:#FFFFFF;
	background-color:#007DA5;
	padding:12px;
	margin-left:5px;
	text-align:center;
}
div.cart a.url:hover {background-color:#009FBE;}


/* ------------------------------------------------------------
		04. エリア用クラス
		------------------------------------------------------------ */

/* トップ画像からページ内リンクメニュー付近 */
#headArea img{width:100%;}
#menu {
	display:flex;
	flex-wrap:nowrap;
	justify-content: space-between;
	align-items:center;
}
.menuBtn {
	margin:0;
	padding:2px;
	font-size:15px;
	line-height:125%;
	text-align:center;
}
.vbar {
	width:1px;
	height:32px;
	border-left:solid 1px #000;
	margin:0;
	padding:0;
}

@media only screen and (min-width: 1001px) {
	#menu{justify-content:center;}
	.menuBtn {
		margin:0 10px;
		padding:10px;
		font-size:26px;
	}
	.vbar{height:50px;}
}




/* ルルドボーテ専用 card1,2 */
.card1{
	width:100%;
	display:flex;
	flex-wrap:nowrap;
	justify-content: space-between;
}
.card1 .pic {width:45%;}
.card1 .txt {
	width:calc(55% - 30px);
	display:block;
}
@media only screen and (min-width: 1001px) {
	.card1 .pic {width:35%;}
	.card1 .txt {width:calc(65% - 30px);}
}

.card2 {
	width:100%;
	display:block;
}
.card2 .pic {width:100%;}
.card2 .txt {width:100%;}
.card2 .detail{width:100%;}

.card2 .pic .galle {margin-top:30px;}
.card2 .pic .galle img {width:calc(20% - 8px);}

@media only screen and (min-width: 1001px) {
	.card2 {
		display:flex;
		flex-wrap:nowrap;
		justify-content: space-between;
	}
	.card2 .pic {width:calc(50% - 15px);}
	.card2 .txt {width:calc(50% - 15px);}
}




/* マイクロカレント＆ドクターエア専用 card3 */
.card3 {
	width:100%;
	display:block;
}
.card3 .pic{width:100%;}
.card3 .detail {width:100%;}

@media only screen and (min-width: 1001px) {
	.card3 {
		display:flex;
		flex-wrap:nowrap;
		justify-content: space-between;
	}
	.card3 .pic{
		width:calc(50% - 15px);
		margin-right:30px;
	}
	.card3 .txt {width:calc(50% - 15px);}
}





/* 横2列の小コーナー用 card4 */
.tr {
	width:100%;
	display:block;
}
.overCard4 {
	width:100%;
	display:flex;
	flex-direction:column;
}
.card4 {
	width:100%;
	display:flex;
	flex-wrap:nowrap;
	justify-content: space-between;
}
.card4 .pic {width:calc(45% - 15px);}
.card4 .txt {width:calc(55% - 15px);}

@media screen and (min-width: 1001px) {
	.tr {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
	.overCard4 {width:calc(50% - 15px);}
	.card4 {width:100%;}
	.card4 .txt h3 {font-size:28px; margin:30px 0 20px 0;}
	.card4 .txt h3.aboveRuby {margin-bottom:0;}
	.card4 .txt h3.belowRuby {margin-top:0;}
	.card4 .txt h4 {font-size:24px;}
	.card4 .txt p {font-size:80%;}
	.card4 .txt div.cart a.url {font-size:90%;}
}




/* テラピスト・リファ・エイミー専用 card5 */
.card5 {display:block;}
.card5 .pic {width:100%;}
.card5 .txt {width:100%;}
.card5 .detail {width:100%;}

.card5 .pic .galle {
	margin-top:30px;
	display:flex;
	flex-wrap:nowrap;
	justify-content: space-between;
}
.card5 .galle img {width:calc(20% - 10px);}

@media screen and (min-width: 1001px) {
	.card5 {
		width:100%;
		display:flex;
	flex-wrap:nowrap;
	justify-content: space-between;
	}
	.card5 .pic {width:calc(50% - 15px);}
	.card5 .txt {width:calc(50% - 15px);}
}




/* WTBスカルプ専用クラス card6 */
.card6 {
	width:calc(50% - 15px);
	display:flex;
	flex-direction:column;
}
.innerCard6 {
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	gap:30px;
}
.card6 .innerCard6 .pic {width:calc(45% - 15px);}
.card6 .innerCard6 .txt {width:calc(55% - 15px);}

@media screen and (min-width: 1001px) {
	.card6 .txt h3 {font-size:28px; margin:30px 0 20px 0;}
	.card6 .txt h3.aboveRuby {margin-bottom:0;}
	.card6 .txt h3.belowRuby {margin-top:0;}
	.card6 .txt h4 {font-size:24px;}
	.card6 .txt p {font-size:80%;}
	.withCard6 {font-size:80%;}
}

@media screen and (max-width: 1000px) {
	.card6 {width:100%;}
}





/* HA SHEET専用 card7 */
.card7{
	border:#000 2px solid;
	padding:8px;
}

.card7 .innerCard7 {
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	gap:30px;
}

.card7 .innerCard7 .pic {width:calc(50% - 15px);}
.card7 .innerCard7 .txt {width:calc(50% - 15px);}

@media screen and (max-width: 1000px) {
	.card7 .innerCard7 {display:block;}
	.card7 .innerCard7 .pic {width:100%;}
	.card7 .innerCard7 .txt {width:100%;}
}




















/* ------------------------------------------------------------
		05. 独立パーツ
		------------------------------------------------------------ */

/* 空白制御 div */
/* 商品名h3の前後はスタイルに含有記載 */
.belowFV {height:50px;}			/* FV下 */
.belowH1 {height:20px}			/* 日本語タイトルの下 */

.belowAnchor {height:60px;}	/* ページ内リンクメニュー下 */
.between {height:100px;}						/* コンテンツ間（フラッグの上） */
.aboveM {height:50px;}							/* 中見出し上（商品ごとの区切り） */
.aboveS {height:30px;}							/* 小見出し上（中タイトルの上） */
.belowS {height:20px; clear:both;}	/* 小見出し下（中タイトルの下） */
.aboveBtn {height:40px; clear:both;}/* ボタン上 */
.yohaku {height:30px; clear:both;}	/* 記事間の余白 */

@media screen and (mim-width: 1001px) {
	.belowFV {height:100px;}
	.belowH1 {height:40px}
	.belowAnchor {height:70px;}

	.belowS {height:30px;}
	.aboveBtn {height:30px;}
	.yohaku {height:40px;}
}


/* 黒フラッグ div&h2 */
div.flag {
	padding:1px 0;
	border-bottom:#000 1px solid;
	text-align:right;
	font-size:12px;
}
h2.flag{
	display:inline-block;
	padding:0.5em 1em;
	background-color:#000;
	color:#fff;
	font-size:125%;
	margin-bottom:16px;
}

@media screen and (mim-width: 1001px) {
	div.flag {font-size:16px;}
}


/* ※印 */
.kome {
	font-size:9px;
	vertical-align:top;
}

.attend{
	font-size:9px;
	text-align:right;
}
@media screen and (mim-width: 1001px) {
	.kome {font-size:12px;}
	.attend{font-size:12px;}
}