@charset "utf-8";

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

			初期設定

--------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
}

html {
	line-height: 1;
}

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS P ゴシック", "MS P Gothic", sans-Serif;
	margin: 0;
	padding: 0;
	color: #333333;
	background: #f5f5f5;
}

/* ul 要素
-------------------------------------- */
ul {
	list-style-type: none;
}

ul.check { margin: 40px 0; }
ul.check li {
	position: relative;
	padding-left: 22px;
	line-height: 2.6rem;
}
ul.check li::before {
    content: url(../images/checkbox.png);
	position: absolute;
	top: 52%;
	left: 0;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}


ul.normal {
	padding: 20px 0;
}

ul.normal li {
	list-style-type: none;
    margin-bottom: 15px;
    padding-left: 1.5em;
    text-indent: -1.1em;
    font-weight: bold;
    line-height: 1.6rem;
}

ul.normal li::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
    content: "\f111";
	padding-right: 6px;
}

/* p 要素
-------------------------------------- */
p {
	line-height: 2.2rem;
	font-size: 113%;
}

/* フォント要素
-------------------------------------- */
.fw_b { font-weight: bold; }
.fc_red { color: #CC0000; }
.fc_yellow { color: #fdd23e; }

.under {
	font-weight: bold;
	color: #CC0000;
	text-decoration: underline;
}

/* a 要素
-------------------------------------- */
a { color: #ff6262; }
a:hover {
	text-decoration: none;
	color: #ec0808;
}

/* img 要素
-------------------------------------- */
img.aligncenter{display: block; margin: 16px auto}
img.alignleft{display:block;float:left; margin-right: 16px; margin-bottom: 16px;}
img.alignright{display:block;float:right; margin-left: 16px; margin-bottom: 16px;}

img.sp { display: none; }

/* clearfix 要素
-------------------------------------- */
.clearfix::after, 
.clearfix::before {
	content: ".";
    display: block;
    clear: both;
    height: 0;
    font-size: 0.1em;
    line-height: 0;
    visibility: hidden;
    overflow: hidden;
}
.clearfix {
	min-height: 1px;
}

br.sp490 { display: none; }
br.sp640 { display: none; }
br.sp768 { display: none; }

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

	メイン

--------------------------------------- */
.container {
	width: 1000px;
	background: #fff;
	margin: 0 auto;
	padding: 0;
	-webkit-box-shadow: 0 4px 6px 4px rgba(0,0,0,.1);
    box-shadow: 0 4px 6px 4px rgba(0,0,0,.1);
}


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

	ヘッダー

--------------------------------------- */
header {
	width: 100%;
	padding: 0;
}

header .inner {
	width: 1000px;
	margin: 0 auto;
	-webkit-box-shadow: 0 -4px 6px 4px rgba(0,0,0,.1);
    box-shadow: 0 -4px 6px 4px rgba(0,0,0,.1);
}
header .inner img { width: 100%; }

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

	コンテンツ共通

--------------------------------------- */
section {
	width: 100%;
	padding: 40px 0;
}
section:last-child { margin-bottom: 0; }

section .wrapper {
	width: 900px;
	margin: 0 auto;
	position: relative;
	padding: 20px 0 40px;
}

.txtBlock { padding: 30px 0; }

/* セクションタイトル
-------------------------------------- */
.mainTit {}
.mainTit h2 {
	color: #8a002a;
	font-size: 300%;
}
.mainTit h2::before {}

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

	仕入れと販売価格について

--------------------------------------- */
section.shiire { padding-top: 80px; }
section .wrapper.shiire {
    padding: 20px 0 0;
}

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

	導入事例

--------------------------------------- */
.donyuBlock {margin: 40px auto; }
.donyuBlock img { max-width: 960px; }

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

	こんな治療院･サロンにおすすめのサプリです

--------------------------------------- */
.osusumeBlock:not(:last-child) { margin: 20px auto 80px; }
.osusumeTit { max-width: 658px; }

.shosai_wrapper {
	border: #ca002a 1px solid;
	border-radius: 10px;
	margin: 20px auto;
	padding: 18px 40px;
}

.osusumeBlock ul { margin-left: 28px; }
.osusumeBlock ul li {
	font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	font-size: 175%;
	font-weight: bold;
	line-height: 2.2rem;
	padding: 8px 0;
	list-style: circle;
}

.whyBlock {
	position: relative;
}
.whyBlock::before {
	position: absolute;
	content: url(../images/why_subtit.svg);
	width: 488px;
	left: 2%;
	top: 0;
}
.whyBlock .txtBlock {}
.whyBlock .txtBlock p {
	font-size: 88%;
	padding: 28px;
	border: #8a002a 6px solid;
	border-radius: 10px;
}

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

	商品説明

--------------------------------------- */
.setsu_titBlock { position: relative; }
.setsu_titBlock .product_img {
	 max-width: 340px;
	 position: absolute;
	 right: 0;
	 top: -80px;
}
.setsu_titBlock .product_img img { width: 100%; }

.koukaBlock { max-width:  578px; }
.koukaBlock ul {
	-js-display: flex;
    display: flex;
	-webkit-justify-content: space-between; /* Safari */
    justify-content: space-between;
	margin: 40px auto;
}
.koukaBlock ul li {
	width: 20%;
}

.setsu_titBlock p.setsuTit {
	color: #99908a;
    font-weight: bold;
    font-size: 237.5%;
    letter-spacing: -0.06em;
    line-height: 3.8rem;
}

/* 素材へのこだわり
-------------------------------------- */
.setsu_shosaiArea { margin: 64px auto 0; }
.setsu_shosaiArea:not(:last-child) { margin-bottom: 80px; }
.setsuBlock {
	-js-display: flex;
    display: flex;
	-webkit-justify-content: space-between; /* Safari */
    justify-content: space-between;
}
.setsu_shosaiArea h2.shosaiTit {
	color: #fff;
    font-weight: bold;
    font-size: 150%;
    padding: 14px 0;
    max-width: 294px;
    text-align: center;
    border-radius: 30px;
	margin-bottom: 60px;
}
.setsu_shosaiArea.kodawari h2.shosaiTit { background: #ff505c; }

.setsu_shosaiArea .txtBlock { padding: 0 20px 0 0; }
.setsu_shosaiArea.kodawari .setsuBlock img.setsusub {
	max-width: 480px;
	padding-bottom: 20px;
}
.setsu_shosaiArea.kodawari .setsuBlock img.setsu_img {
	width: 260px;
	height: 260px;
	border: #ff505c 2px solid;
	border-radius: 50%;
}

/* 厳選された成分
-------------------------------------- */
.setsu_shosaiArea.gensen h2.shosaiTit { background: #509fff; }

.setsu_shosaiArea.gensen .setsuBlock img.setsusub {
	max-width: 498px;
	padding-bottom: 20px;
}
.setsu_shosaiArea.gensen .setsuBlock img.setsu_img {
	width: 200px;
	height: 200px;
	border: #509fff 2px solid;
	border-radius: 50%;
}

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

	開発者松元とあなたとのお約束

--------------------------------------- */
.yakusokuBlock {
	max-width: 860px;
	margin: 40px auto;
	
}
.yakusokuTit {
	background: #8a002a;
	border-radius: 38px;
	padding: 6px 0;
}
.yakusokuTit img { padding-left: 10px; }

.yakusokuTit.num001 img { max-width: 306px; }
.yakusokuTit.num002 img { max-width: 440px; }
.yakusokuTit.num003 img { max-width: 236px; }
.yakusokuTit.num004 img { max-width: 474px; }

.yakusokuBlock .shosai_wrapper {
	border: none;
	padding: 0 40px;
	margin: 0 auto;
}









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

	スターターキットのご紹介

--------------------------------------- */
.starterArea img.aligncenter { margin-bottom: 0; }
.starterArea_wrapper {
	background: url(../images/starter_bg.jpg) top center no-repeat;
	background-size: contain;
}

.kakakuBlock {
	max-width: 840px;
	margin: 0 auto;
	padding-top: 580px;
}
.kitBlock {
	background: rgba(255, 255, 255, .8);
	border: #ca002a 4px solid;
	border-radius: 20px;
}
.kitBlock_wrapper {
    padding: 40px 32px;
}
.kitBlock ul {
	background: #8a002a;
	border-radius: 4px;
	-js-display: flex;
	display: flex;
	-webkit-justify-content: flex-start; /* Safari */
	justify-content: flex-start;
	flex-wrap: wrap;
	padding: 20px 10px 20px 40px;
}
.kitBlock ul li {
	padding: 10px 0;
    color: #fff;
    font-weight: bold;
    font-size: 175%;
    position: relative;
    padding-left: 16px;
    margin-right: 50px;
}
.kitBlock ul li::before {
	position: absolute;
	left: -20px;
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.kitBlock ul li.p001::before {content: "①"; }
.kitBlock ul li.p002::before {content: "②"; }
.kitBlock ul li.p003::before {content: "③"; }
.kitBlock ul li.p004::before {content: "④"; }

.kakakuBlock img.price {
	margin: 40px auto;
	max-width: 544px;
}

.kakakuBlock p.chu {
	max-width: 544px;
    margin: 20px auto 40px;
    font-size: 84%;
    color: #000;
	line-height: 1.6rem;
}

.tokutenBlock {
    border: #8a002a 2px dotted;
	border-radius: 10px;
}
.tokutenBlock:not(:last-child) { margin-bottom: 40px; }
.tokuten_wrapper { padding: 30px 44px; }
.tokutenBlock .tokutenTit {
	max-width: 518px;
	margin:  0 auto 20px;
}
.tokutenBlock img.tokuten2 {
	max-width: 542px;
	margin: 40px auto;
}
.tokutenBlock img.tokuten_file { max-width: 200px; }
.tokutenBlock img.tokuten_file03 { max-width: 240px; }
.tokutenBlock p { font-size: 100%; }
.tokutenBlock p span.chu {
	font-size: 88%;
	font-weight: bold;
}

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

	お申込み

--------------------------------------- */
.btnBlock {
	margin: 0 auto;
    text-align: center;
    padding: 60px 0;
}
.btnBlock a:hover {
	opacity: .8;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.btnBlock img { max-width: 840px; }

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

	お申込みの流れ

--------------------------------------- */
.flowBlock {
	border: #ca002a 1px solid;
    background: #fffefe;
    border-radius: 6px;
    padding: 30px 0;
    position: relative;
    margin: 20px auto 40px;
    width: 94%;
}

.flowBlock p { padding: 16px 30px 0 80px; }

.flowBlock.num01::before { content: '1'; }
.flowBlock.num02::before { content: '2'; }
.flowBlock.num03::before { content: '3'; }
.flowBlock.num04::before { content: '4'; }
.flowBlock.num05::before { content: '5'; }

.flowBlock::before {
	position: absolute;
    top: 0;
    left: 0;
    background: #ca002a;
    color: #fff;
    padding: 12px 16px;
    font-size: 113%;
    font-weight: bold;
}

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

	追伸

--------------------------------------- */
.tsuishinARea img.tsuishin {
	max-width: 300px;
	border: #8a002a 2px solid;
	border-radius: 50%;
}
.tsuishinARea p { font-size: 100%; }

.btnBlock {  padding: 20px 0 80px; }
.btnBlock.last_order img { max-width: 766px; }


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

	フォームエリア

--------------------------------------- */
span.required {
	color: #fff;
    background: #e43636;
    font-weight: normal;
    font-size: 75%;
    padding: 7px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

/* balloon- bottom */
#balloon-bottom {
	position: relative;
    display: block;
    width: auto;
    color: #F6F6F6;
    line-height: 1.6rem;
    text-align: center;
    background: #19283C;
    z-index: 0;
    margin: 40px auto;
    font-size: 113%;
    padding: 22px 30px;
}
#balloon-bottom:after {
	content: "";
	position: absolute;
	bottom: -10px; left: 50%;
	margin-left: -10px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #19283C transparent transparent transparent;
}

p.chu {
	font-size: 88%;
    color: #7f7f7f;
    line-height: 1.2rem;
}

.dispInput.flex {
	-js-display: flex;
	display: flex;
	-webkit-justify-content: space-between; /* Safari */
	justify-content: space-between;
}


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

	フッター

--------------------------------------- */
footer {
	width: 100%;
    padding-top: 40px;
    padding-bottom: 20px;
    text-align: center;
    background: #0539af;
    color: #fff;
	font-size: 88%;
}

footer a {
	color: #fff;
}

.copyright {
	font-size: 75%;
	margin-top: 20px;
}

/* トップへ戻る
-------------------------------------- */
#page-top {
    position: fixed;
    bottom: 16px;
    right: 16px;
}

#page-top a {
    width: 50px;
	height: 50px;
	border-radius: 50%;
	font-size: 100%;
	color: #fff;
	font-weight: bold;
	background-color: #ef8e92;
	border: #fff 1px solid;
	text-align: center;
	display: block;
	text-decoration: none;
}

#page-top a i {
	position: relative;
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	display: block;
}


#sec007 {
	background: none;
}

.uno_word {
    width: 92%;
    border: #ec0808 1px solid;
    border-radius: 6px;
    margin: 40px auto;
    background: #fff6f6;
}

.uno_word p {
    padding: 38px;
}