@charset "utf-8";

/*------------------------------------------------*/
/* スマホ対応 */
/*------------------------------------------------*/
.pc_hide { display: none;  }
.sp_hide { display: block; }
@media screen and (max-width: 480px){
	.pc_hide { display: block; }
	.sp_hide { display: none;  }
}

/*全体の設定
---------------------------------------------------------------------------*/
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
	margin: 0px;
	padding: 0px;
	-webkit-text-size-adjust: none;
	color: #383838;
	font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
	font-size: 18px;
	line-height: 2;
	background: #fff;
}

h1,h2,h3,h4,p,dl,dd {margin: 0; font-weight: normal;}
img {
	width:100%;
	max-width: 100%;
	height: auto;
	vertical-align: top;
}

.mincho{
	font-family: "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif !important;
}

/*リンク
---------------------------------------------------------------------------*/
a:hover {opacity: 0.7;}

/*ボタン
---------------------------------------------------------------------------*/
button{
	transition: 0.3s;
}
button:hover {
	cursor:pointer;
	opacity: 0.7;
}

/*ヘッダー
---------------------------------------------------------------------------*/
header {
	max-width: 1500px;
	margin:0 auto;
	padding: 15px 35px;
}
header #header {
	display: flex;
	justify-content: space-between;
}

header #header #logo {
	max-width : 241px;
	max-height: 71px;
}

header #header .h_r {
	display: flex;
	justify-content: flex-end;
}
header #header .h_r_c {
	margin-right: 15px;
}
header #header .h_r_c .freedial {
	background:url(../img/00_freedial@2x.png) center left no-repeat;
	background-size: 48px;
	padding-left: 50px;
	font-size: 35px;
	line-height: 1.5em;
	margin-top: 10px;
}
header #header .h_r_c .hours {
	text-align: right;
	line-height: 1em;
}

header #header .h_r .inq {
	max-width: 168px;
	margin-top: 20px;

}
header #header .h_r .inq img {
	text-align: right;
}

/*メイン
---------------------------------------------------------------------------*/
main {
	max-width: 1500px;
	width     : 100%;
	margin:0 auto;
	padding: 0 0;
}
.main_img{
	max-width : 1500px;
	margin-bottom: 50px;
}
.main_img img{
	max-width : 1500px;
}

/*コンテンツ共通
---------------------------------------------------------------------------*/
.wrap {
	max-width: 1500px;
	margin: 0 auto;
	padding: 0 0;
}
.wrap h2 {
	color: #FFF;
	text-align: center;
	padding: 25px 10px;
	font-size: 37px;
	line-height: 1em;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	font-weight: normal;
}
.contents{
	max-width: 1000px;
	width: 95%;
	margin: 0 auto;
}
.gradient {
	background: transparent linear-gradient(83deg, #9CC9C9 0%, #71C1C1 28%, #1B51A3 100%) 0% 0% no-repeat padding-box;
}


/*リピート部分
---------------------------------------------------------------------------*/
.wrap_rpt {
	text-align:center;
	margin-bottom: 70px;
}

.wrap_rpt .beauty {
	font-size: 45px;
	color: #fff;
	margin-bottom: 45px;
}

.wrap_rpt .cont_repeat_01 {
	margin: 45px auto 70px;
	max-width: 90%;
}
.wrap_rpt .btn_area {
	margin-bottom: 27px;
}
.btn_area a:hover img {
	transform: translate(3px, 3px);
}


/*NMNとは
---------------------------------------------------------------------------*/
.wrap_about {
	margin-bottom: 150px;
}

.wrap_about h2 {
	background-image: url(../img/04_about_bk@2x.jpg);
}
.cont_about {
	margin: 70px 0 20px;
	display: flex;
}

dl.cont_about_l {
	max-width: 45%;
	margin-left: 75px;
	margin-right: 20px;
}
dl.cont_about_l dt {
	color: #A5882A;
	font-size: 30px;
}
dl.cont_about_l dt .sm {
	font-size: 20px;
}
.mb90 {margin-bottom: 90px;}
.mb55 {margin-bottom: 55px;}

/*この商品をおすすめする理由
---------------------------------------------------------------------------*/
.wrap_reason {
	margin-bottom: 150px;
}
.wrap_reason h2 {
	background-image: url(../img/05_reason_bk@2x.jpg);
}

.cont_reason {
	padding: 0 35px;
	margin-top: 90px;
}
.cont_reason span.r {
	font-size: 20px;
	background-color: #A5882A;
	color: #fff;
	padding: 5px 14px;
}
.cont_reason h3 {
	color: #A5882A;
	font-size: 26px;
}
.cont_reason_l,.cont_reason_r {
	max-width:50%;
}

.cont_reason_l {
	padding-right: 55px;
}
.cont_reason_r {
	padding-right: 40px;
}

.cont_reason_01 {
	margin-bottom: 90px;
	display: flex;
	justify-content:space-between;
	flex-wrap:wrap;
	justify-content: center;
	align-items: center;
}
#rv {
	flex-direction: row-reverse;
	margin-bottom: 0;
}

.haigou {
	display: flex;
	justify-content:space-between;
	flex-wrap:wrap;
	margin-bottom: 90px;
}
.haigou dl {
	max-width: 45%;
	margin-bottom: 35px;
}
.haigou dt {
	border-bottom: #383838 solid 1px;
	padding-bottom: 5px;
	margin-bottom: 20px;
}

/*お客様の声
---------------------------------------------------------------------------*/
.wrap_voice {
	margin-bottom: 150px;
}
.wrap_voice .gradient h2 {
	padding: 15px 10px;
}
.wrap_voice h2 .sm {
	font-size: 24px;
}
.cont_voice {
	background-image: url(../img/06_voice_bk@2x.jpg);
	padding: 30px 35px;
}
.voice {
	background: #FFF;
	padding: 40px;
	margin-bottom: 20px;
}
.voice:last-child {
	margin-bottom: 0;
}

/*よくあるご質問
---------------------------------------------------------------------------*/
.wrap_faq {
	margin-bottom:50px;
}
.wrap_faq h2 {
	background: #A5882A;
}
.cont_faq {
	background: #E5DDC3;
	padding: 30px 35px;
}
.cont_faq h3 {
	color: #A5882A;
	font-size: 26px;
}
.cont_faq .qa {
	background: #FFF;
	/* font-size: 18px; */
	padding: 28px 40px;
	margin-bottom: 15px;
}
.cont_faq .qa:last-child {margin-bottom: 0;}


/*商品詳細
---------------------------------------------------------------------------*/
.wrap_detail {
	margin-bottom: 150px;
}
.wrap_detail h2 {
	background: #84C8C8;
}

.wrap_detail table{
	border-spacing: 0;
}
.wrap_detail table th,
.wrap_detail table td {
	padding: 30px 15px;
	font-weight: normal;
	text-align: left;
	border-bottom: #383838 solid 1px;
}
.wrap_detail table th {
	width: 180px;
	font-size: 20px;
}
.wrap_detail table td {
	margin-left: 0;
}
.wrap_detail .b_l {
	padding-left: 40px;
	border-left: #383838 solid 1px;
}


/*購入はこちら
---------------------------------------------------------------------------*/
.wrap_purchase {
	margin-bottom: 90px;
}
.wrap_purchase h2 {
	background-image: url(../img/04_about_bk@2x.jpg);
}
.cont_purchase {
	margin-top: 50px;
	display: flex;
	justify-content: space-between;
}
.cont_purchase .p_l {
	padding-right: 45px;
}
.cont_purchase .p_r {
	max-width: 50%;
}
.cont_purchase .btn_area {
	margin: 20px 0;
}
.mb20 {
	margin-bottom: 20px;
}
.mb8 {
	margin-bottom: 8px;
}


/*ご利用ガイド
---------------------------------------------------------------------------*/
.wrap_joho {
	padding: 30px 0 0 0;
	background: #ffffff;
}
.cont_joho{
	line-height:1.6;
	background: #ffffff;
}
.cont_joho h2{
	font-size: 27px;
	background:#383838;
	padding: 15px 0;
	margin-bottom: 30px;
}
.cont_joho h3{
	font-size: 14px;
	font-weight: bold;
	line-height:28px;
	text-align: center;
	background:#F0F0F0;
}
.cont_joho_box{
	display: flex;
	justify-content:space-between;
}
.cont_joho_naka{
	width:33%;
	text-align: center;
	font-size: 12px;
	line-height:1.6rem;
}
.cont_joho_box p{
	margin: 0 0;
	padding: 0 12px;
	text-align: left;
}
.cont_joho_box p.naka1{
	padding-left: 1.5rem;
}
.joho_img img{
	max-width:306px;
}
.joho_img2 img{
	max-width:291px;
}

.cont_joho ul{
	margin: 0 0;
	padding: 0 5px 0 1.5rem;
	text-align: left;
	list-style-type: none;
}
.cont_joho ul > li{
	list-style-type: decimal;
}

.cont_joho ul.ul_hasso{
	margin: 0 0;
	padding: 0 5px 0 2.5rem;
	text-align: left;
	list-style-type: none;
}
.cont_joho ul.ul_hasso > li{
	list-style-type: disc;
}

.cont_joho ol{
	margin: 0 0;
	padding: 0 5px;
	text-align: left;
	list-style-type: none;
}
.cont_joho ol > li{
	counter-increment: cnt;
	margin-left: 1.5rem;
}
.cont_joho ol > li:before {
  content: "("counter(cnt) ") ";
	margin-left: -1.5rem;
}


/*フッター
---------------------------------------------------------------------------*/
footer {
	width:100%;
	clear: both;
	text-align: center;
	margin-top: 60px;
}
footer #footer_nav{
	max-width: 1200px;
	margin: 20px auto;
}
footer #footer_nav .footer_a{
	margin-bottom: 10px;
}
footer #footer_nav .footer_a a{
	padding: 5px 20px;
	color:#333;
	text-decoration: none;
	border-right:1px solid #333;
}
footer #footer_nav .footer_a a:last-child{
	border-right:0px solid #333;
}
footer #footer_nav a:hover{
	color:#E60012;
	text-decoration: underline;
}

footer #copy{
	width:100%;
	clear: both;
	text-align: center;
	height: 50px;
	line-height:50px;
	padding: 0px;
	color:#fff;
	background: #E60012;
}
footer #copy a {
	color:#fff;
	text-decoration: none;
	border: none;
}
footer #copy a:hover {
	color:#fff;
	text-decoration: underline;
}
footer #copy2{ display: none; }


/*サイドボタン
---------------------------------------------------------------------------*/
#side1{
	width:   140px;
	height: 165px;
	position: fixed;
	top: 28%;
	right: 0;
	right: -140px;
	z-index   :99;
}
#side2{
	width:   140px;
	height: 140px;
	position: fixed;
	top: -webkit-calc(28% + 165px + 2px);
	top: calc(28% + 165px + 2px);
	right: 0;
	right: -140px;
	z-index   :99;
}
#side3{
	width:   140px;
	height: 140px;
	position: fixed;
	top: -webkit-calc(28% + 165px + 140px + 4px);
	top: calc(28% + 165px + 140px + 4px);
	right: 0;
	right: -140px;
	z-index   :99;
}

#side1sp,#side2sp,#side3sp{ display: none; }

/*ページアップ
---------------------------------------------------------------------------*/
#pageup{
	width:  50px;
	height: 50px;
	position: fixed;
	right: 0;
	z-index   :99;
}




/*=========================================================================*/
/*画面幅768px以下の設定
---------------------------------------------------------------------------*/
@media screen and (max-width:768px){
	/* ヘッダー */
	header {
		padding: 10px 20px;
	}
	header #header .h_r {
		display: flex;
		justify-content: flex-end;
	}
	header #header .h_r_c {
		margin-right: 15px;
	}
	header #header .h_r_c .freedial {
		font-size: 20px;
	}
	header #header .h_r_c .hours {
		font-size: 16px;
	}
	header #header .h_r .inq {
		margin-top: 10px;
	}

	/* フッター */
	footer #footer_nav{
		margin: 0;
	}
	footer #footer_nav .footer_a{
		margin-bottom: 0;
	}
	footer #footer_nav .footer_a a{
		display: block;
		width:100%;
		padding: 10px 20px;
		text-align: left;
		border-right:0px solid #333;
		border-top:1px solid #333;
	}

	/* リピート部分 */
	.wrap_rpt .beauty {
		font-size: 30px;
		margin-bottom: 30px;
	}
	.wrap_rpt .cont_repeat_01 {margin: 30px auto 50px;}
	.wrap_rpt .btn_area {margin-bottom: 20px;}

	/* NMNとは */
	.wrap_about dl.cont_about_l {
		margin-left: 10px;
		max-width: 100%;
	}
}

/*=========================================================================*/
/*画面幅480px以下の設定
---------------------------------------------------------------------------*/
@media screen and (max-width:480px){
	body {
		font-size: 14px;
		line-height: 1.5;
	}

	/* ヘッダー */
	header {padding: 5px 10px;}
	header #logo {width: 40%;}

	/* リピート部分 */
	.wrap_rpt {margin-bottom: 40px;}
	.wrap_rpt .beauty {
		font-size: 18px;
		margin-bottom: 20px;
		padding: 20px 15px;
	}
	.wrap_rpt .cont_repeat_01 {margin: 20px auto;}
	.wrap_rpt .btn_area {margin-bottom: 15px;}
	.wrap h2 {
		padding: 15px;
		font-size:25px;
	}

	/* NMNとは */
	.wrap_about {margin-bottom: 70px;}
	.cont_about {display: unset;}
	dl.cont_about_l {margin-bottom: 20px;}
	dl.cont_about_l dt {
		font-size: 22px;
		margin: 10px 0;
	}
	.cont_about_r {
		max-width: 70%;
		margin: 0 auto;
	}
	.mb90 {margin-bottom: 20px;}
	.mb55 {margin-bottom:40px;}

	/* この商品をおすすめする理由 */
	.wrap_reason {margin-bottom: 40px;}
	.cont_reason {
		margin-top: 20px;
		padding: 0 10px;
	}
	.cont_reason_01 {
		display: unset;
	}
	.cont_reason .mincho .r {
		font-size: 16px;
		padding: 5px 8px;
	}
	.cont_reason .mincho h3 {
		margin-top: 5px;
		margin-bottom: 10px;
		font-size: 20px;
	}
	.cont_reason_l {
		max-width: 70%;
		margin: 0 auto 20px;
		padding: 0;
	}
	.cont_reason_r {
		max-width: 100%;
		padding: 0;
		margin-bottom: 50px;
	}
	.haigou {display: unset;}
	.haigou dl {
		max-width: 100%;
		margin-bottom: 20px;
	}
	.haigou dl:last-child {
		margin-bottom: 50px;
	}

	/* お客様の声 */
	.wrap_voice {margin-bottom: 40px;}
	.wrap_voice h2 .sm {font-size: 19px;}
	.cont_voice{padding: 13px 15px;}
	.voice {
		padding: 15px 20px;
		margin-bottom: 10px;
	}

	/* よくある質問 */
	.cont_faq {padding: 13px 15px;}
	.cont_faq .qa {
		padding: 15px 20px;
	}
	.cont_faq .qa h3 {font-size: 18px;}

	/* 商品詳細 */
	.wrap_detail {margin-bottom: 50px;}
	.wrap_detail table th,
	.wrap_detail table td {
		padding: 10px 5px;
	}
	.wrap_detail table th {
		padding-left:5px;
		font-size: 18px;
		width: 140px;
	}
	.wrap_detail .b_l {
		padding-left: 10px;
	}

	/* 購入はこちら */
	.wrap_purchase {margin-bottom: 50px;}
	.cont_purchase {
		display: unset;
	}
	.cont_purchase .p_l {
		max-width: 70%;
		margin: 20px auto;
	}
	.cont_purchase .p_r {
		max-width: 100%;
		padding: 0 10px;
	}

	/* ご利用ガイド */
	.cont_joho_box{flex-direction: column;}
	.cont_joho_naka{width: 100%; margin: 0 auto;}

	/* フッター */
	footer #copy2{
		display: block;
		width:  100%;
		height:  50px;
	}

	/*サイドボタン
	---------------------------------------------------------------------------*/
	#side1,#side2,#side3{ display: none; }
	#side1sp{
		display: block;
		width:  188px;
		height: 50px;
		position: fixed;
		left: 0;
		bottom: -50px;
		z-index   :99;
	}
	#side2sp{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 93px;
		height:  50px;
		position: fixed;
		left: 189px;
		bottom: -50px;
		background-color: #84C8C8;
		z-index   :99;
	}
	#side3sp{
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc((100% - (188px + 93px + 2px)));
		height:  50px;
		line-height:1.0;
		position: fixed;
		left: 283px;
		bottom: -50px;
		text-align:center;
		background-color: #84C8C8;
		z-index   :99;
	}
	#side3sp a{
		font-size:13px;
		text-align:center;
		color:#ffffff;
		text-decoration: none;
	}
}