@charset "utf-8";
/* ========================================
common.css
------------------------------------------
last update:2018.02.15
======================================== */

h1{
	font-size:150%;
	font-family: Garamond,"Times New Roman",游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
}
/* h2{} */

/*h6{
	font-size:200%;
	padding: .1em 0;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	margin:0 0 20px;}*/
h6{
	box-sizing:border-box;
	font-size:200%;
	width:100%;
	color: #505050;/*文字色*/
	padding: 0.5em;/*文字周りの余白*/
	display: inline-block;/*おまじない*/
	line-height: 1.3;/*行高*/
	background: #dbebf8;/*背景色*/
	vertical-align: middle;/*上下中央*/
	border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
	margin:0 0 20px;}
h6:before {
content: '●';
color: white;
margin-right: 8px;
}

h7{
	box-sizing:border-box;
	font-size:200%;
	width:65%;
	color: #505050;/*文字色*/
	padding: 0.5em;/*文字周りの余白*/
	display: inline-block;/*おまじない*/
	line-height: 1.3;/*行高*/
	background: #dbebf8;/*背景色*/
	vertical-align: middle;/*上下中央*/
	border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
	margin:0 0 20px;}
h6:before {
content: '●';
color: white;
margin-right: 8px;
}

h4{
	font-size:190%;
	font-family: Garamond,"Times New Roman",游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
	margin:0 0 10px;}


/* ----------------------------------------
 - html
---------------------------------------- */
html, body {
	background: #fff;
	margin: 0;
	padding: 0;
	font-size: 62.5%;/*基本を10pxで設定*/
}

.bx-controls-direction {
	display: none !important;
}

/* ----------------------------------------
 - body
---------------------------------------- */
body {
	font-style: normal;
	font-weight:100;
	font-size: 16px;
	font-size: 1.6rem;
	color: #333;
	line-height: 2;
	/*font-feature-settings: "palt";*/
	-webkit-text-size-adjust: none; /* 文字の拡大縮小を防ぐ */

	font-family: Garamond,"Times New Roman",游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
}
@media screen and (max-width: 768px) {
	body {
		font-size: 1.4rem;
		line-height: 1.8;
	}
}



/* ----------------------------------------
 - wrapper
---------------------------------------- */
.wrapper {
	width: 100%;
	box-sizing: border-box;
	max-width: 1000px;
	padding: 0 5rem;
	margin: 0 auto;
	position: relative;
}
@media screen and (max-width: 768px) {
.wrapper {
	width: 100%;/*630px*/
	max-width: none;
	box-sizing: border-box;
	padding: 0 8%;/*60px*/
}
}

/* ----------------------------------------
 - #Container
---------------------------------------- */
#Container {
	width: 100%;
	margin: 0 auto;
	position: relative;
	text-align: left;
}

#Content {
	position: relative;
}

/* ----------------------------------------
 - display
---------------------------------------- */
#Container ._pc {
	display: block !important;
}
#Container ._sp {
	display: none !important;
}

@media screen and (max-width: 768px) {
	#Container ._pc {
		display: none !important;
	}
	#Container ._sp {
		display: block !important;
	}
}

/* ----------------------------------------
 - 共通パーツ
---------------------------------------- */

/* ----------------------------------------
 - header
---------------------------------------- */
.header {
	width: 100%;
	/* height: 76px; */
	position: absolute;
	top: 0;
	z-index: 20;
}

@media screen and (max-width : 768px) {
	.header {
		position: relative;
	}
}

.header.fixed {
	position: fixed;
	z-index: 20;
	/* background-color: #f2f2f2; */
}

.header__inner {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.header__inner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
}

header.fixed .header__inner::before {
	backdrop-filter: blur(10px);
	opacity: .85;
}


/*wrapper*/
header .wrapper {/*900px*/
	height: 76px;
	max-width: 1280px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	line-height: 1;
}
header .wrapper h1.site-logo,
header .wrapper p.site-logo {
	width: 100%; /*27.5%*/
	max-width: 213px;
	height: auto;
	display: block;
	margin: 0;
	padding: 0;
	line-height: 1;
}

@media screen and (max-width: 1199px) {
	header .wrapper {
		display: block;
		padding: 0 1.5% .5em;
		height: auto;
	}

	header .wrapper h1.site-logo {
		margin: 0 auto;
		padding-top: 1em;
	}
}

@media screen and (max-width: 768px) {
	header {
		width: 100%;
	}
	/*wrapper*/
	header .wrapper {
		height: auto;
		display: flex;
		/*height: 4rem;*/
		height: 90px;
		padding: 0 2.5% 0 0;
		position: relative;
	}

	header .wrapper h1.site-logo {
		padding-top: 0;
	}

	header .wrapper h1.site-logo,
	header .wrapper p.site-logo {
		max-width: none;
		width: 27.5%;
		max-width: none;
		width: 100%;/*45.2%*/
		max-width: 340px;

		box-sizing: border-box;
		margin: 0 0 0 2.13%;
		font-size: 1rem;
	}
	header .wrapper h1.site-logo a:hover,
	header .wrapper p.site-logo a:hover {
		-moz-opacity: 1;
		opacity: 1;
	}
}
@media screen and (max-width: 480px) {
	/*wrapper*/
	header .wrapper {
		/*height: auto;*/
		height: 4.5rem;
		position: relative;
	}
	header .wrapper h1.site-logo,
	header .wrapper p.site-logo {
		width: 100%;/*45.2%*/
		max-width: 200px;
		box-sizing: border-box;
		margin: 0 0 0 2.13%;
		font-size: 1rem;
	}
}

/* ----------------------------------------
 - #Gnav
---------------------------------------- */
header .wrapper #Gnav {
	width: 100%;
	position: relative;
	text-align: center;
	margin: .8em auto 0;

	display: flex;
	justify-content: flex-end;
	align-items: center;

	z-index: 10;
}
header .wrapper #Gnav ul {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	font-size: 1.4rem;
	font-weight: bold;
}

header .wrapper #Gnav ul li span {
	display: inline-block;
	padding: 0 .3em 0 .25em;
	color: #666;
}

header .wrapper #Gnav ul li a,
header .wrapper #Gnav #Gnav07 a {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	zoom:1;/* 重要！ */
	letter-spacing: .1rem;
}
header .wrapper #Gnav ul li a:hover,
header .wrapper #Gnav #Gnav07 a:hover {
	-khtml-opacity: 0.7;
	opacity: 0.7 !important;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* For IE 8 */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); /* For IE 5-7 */
	zoom:1;/* 重要！ */
}

header .wrapper #Gnav #Gnav07 {/*EC*/
	margin-left: 3rem;
}
header .wrapper #Gnav #Gnav07 a {/*EC*/
	width: 30px;
	height: 30px;
	display: block;
	background: url(../images/ico_gnav_shopping.png) center center no-repeat;
	background-size: contain;

	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

/*#Btn_hambuger*/
header .wrapper #Gnav #Btn_hambuger {
	display: none;
}
/*#Gnav_sp*/
header #Gnav_sp {
	width: 43%;
	height: 100vh;
	box-sizing: border-box;
	padding: 1.5rem;

	position: fixed;
	top: 9rem; right: 0;
	margin-right: -100%;
	background-color: rgba(219,219,219,0.9);

	box-shadow:-5px 5px 10px 0px rgba(0,0,0,0.3);

	z-index: 9;
}
header #Gnav_sp  #Btn_close {
	width: 100%;
	height: 3rem;
	display: flex;
	justify-content: center;
    align-items: center;
	text-align: center;
	border: #000 solid 1px;
	margin-top: 2rem;
	font-size: 1.4rem;
}

@media screen and (max-width: 1199px) {
	header .wrapper #Gnav {
		display: block;
		margin: 0 auto;
		padding-top: 1em;
	}

	header .wrapper #Gnav ul {
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center
	}
}

@media screen and (max-width: 768px) {
	header .wrapper #Gnav {
		display: flex;
		margin: .8em auto 0;
		padding-top: 0;
	}

	header .wrapper #Gnav ul {
		display: none;
	}
	/*#Gnav_sp*/
	header #Gnav_sp {
		/*display: block;*/
		top: 9rem; right: 0;
	}
	header #Gnav_sp ul {
		/*display: none;*/
		font-size: 1.6rem;
	}
	header #Gnav_sp ul li {
		padding: 2rem 0;
		border-bottom: #363636 solid 1px;
		line-height: 1;
	}

	/*#Btn_hambuger*/
	header .wrapper #Gnav #Btn_hambuger {
		display: block;

		width: 100%;/*5.067*/
		max-width: 6.6vw;
		height: 6.4vw;
		background: url(../images/btn_hambuger.png) center center no-repeat;
		background-size: contain;

		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;

		cursor: pointer;
	}
	header .wrapper #Gnav #Btn_hambuger._active {
		background: url(../images/btn_hambuger_active.png) center center no-repeat;
		background-size: contain;
	}

	header .wrapper #Gnav #Gnav07 {/*EC*/
		width:  7.06vw;/*5.82%*/
		height: 7.06vw;
		margin-right: 3.2vw;
		display: block;
	}
	header .wrapper #Gnav #Gnav07 a {/*EC*/
		width: 100%;
		height: 7.06vw;
		display: block;

		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}
}
@media screen and (max-width: 480px) {
	/*#Gnav_sp*/
	header #Gnav_sp {
		/*display: block;*/
		top: 4.5rem; right: 0;
	}
}

/* ----------------------------------------
 - #ShopList
---------------------------------------- */
/*
#Container #ShopList {
	width: 100%;
	max-width: 800px;
	box-sizing: border-box;
	margin: 14rem auto 0;
	padding: 3rem 3rem 2rem;
	border: #bfbfbf solid 2px;
}
#Container #ShopList .wrapper {
	width: 100%;
	max-width: 800px;
}

#Container #ShopList .wrapper h3 {
	width: 31%;
	margin: 0 auto;
	line-height: 1;
	font-size: 1rem;
	margin-top: 1em;
}

#ShopList .rspImg span {
	padding-top: 1em;
	font-size: 1.4rem;
	display: block;
	text-align: center;
}
#Container #ShopList .wrapper .shops {
	/* display: flex;
	justify-content: space-between;
	padding-top: 3rem;
}


#Container #ShopList .wrapper .shops ul {
	display: flex;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	width: 100%;
	padding: 1em 0 0 0;
	font-size: 1.4rem;
	line-height: 1.6;
}
#Container #ShopList .wrapper .shops ul li {
	margin: 0 2% 0 0;
	padding-bottom: 1em;
	width: 48%;
}
#Container #ShopList .wrapper ul li a {
	text-decoration: underline;
}
#Container #ShopList .wrapper ul li dd {
	font-size: 1.1rem;
	padding-top: .25em
}
@media screen and (max-width: 768px) {
	/*
	#Container #ShopList {
		width: calc(86% - 4px);
		max-width: none;
		margin: 3rem 8%;
		padding: 2rem;
	}
	#Container #ShopList .wrapper {
		max-width: none;
		padding: 0;
		flex-direction: column;
	}

	#Container #ShopList .wrapper h3 {
		width: 64%;
	}
	*/
	/*
	#Container #ShopList .wrapper .shops {
		width: 100%;
		/* flex-direction: column;
	}
	#Container #ShopList .wrapper .shops ul {
		width: 100%;
		font-size: 1.3rem;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: start;
	}
	#Container #ShopList .wrapper .shops ul li {
		margin: 0 auto;
		width: auto;
		text-align: center;
	}
}
*/
.br375 {
	display: none;
}

@media screen and (max-width: 400px) {
	.br375 {
		display: block;
	}
}

/* ----------------------------------------
 - #BuyNow_btn
---------------------------------------- */
#Container #BuyNow_btn {
	width: 100%;
	max-width: 800px;
	margin: 5rem auto;
}
#Container #BuyNow_btn .wrapper {
	width: 100%;
	border: #bfbfbf solid 2px;
	padding: 2rem 0;
	display: flex;
	justify-content: center;
	align-items: center;

	box-shadow:4px 4px 8px 0px rgba(0,0,0,0.3);
	-webkit-box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.3);
}
#Container #BuyNow_btn .wrapper p {
	width: 37.375%;
}
@media screen and (max-width: 768px) {
#Container #BuyNow_btn {
	width: 86%;
	max-width: none;
	margin: 3rem 8%;
}
#Container #BuyNow_btn .wrapper p {
	width: 63.88%;
}
}


/* ----------------------------------------
 - footer
---------------------------------------- */
footer {
	width: 100%;
	height: auto;
	background-color: #f2f2f2;
}
/*wrapper*/
footer .wrapper {
	width: 100%;
	box-sizing: border-box;
	max-width: 1000px;
	padding: 0 5rem;
	height: 76px;

	display: flex;
	justify-content: space-between;
	align-items: center;
	line-height: 1;
}

footer .wrapper ul.fnav {
	display: flex;

}
footer .wrapper ul.fnav a {
	font-size: 1.3rem;
	font-weight: bold;
}
footer .wrapper ul.fnav li:first-child {
	margin-right: 2em;
}

@media screen and (max-width: 768px) {
/*wrapper*/
footer .wrapper {
	padding: 1em 8%;
	height: auto;

	font-size: 1rem;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.6;
	text-align: left;
}
footer .wrapper ul.fnav a {
	font-size: 1.1rem;
}
footer .wrapper p.cpr {
	color: #808080;
}
}


/* ----------------------------------------
 - モーダルウィンドウ
 - body#Modal
---------------------------------------- */
body#Modal {
	background-color: rgba(255,255,255,0);
	padding: 5rem 5%;

}
body#Modal h2 {
	width: 37.5%;
	margin-top: -4%;
	z-index: 10;
	position: absolute;
	top: 0%;
	left: 0;
}
body#Modal .wrapper {
	width: 100%;
	max-width: 800px;
	height: auto;
	/*max-height: 400px;*/
	max-height: 80vh;
	box-sizing: border-box;
	background: rgb(238,238,238); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(223,223,222,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(223,223,222,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(223,223,222,1) 100%); /* W3C, IE10+, FF16+, Chrome26+,*/

	padding: 2rem;
	position: relative;

	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	/*align-items: center;*/
}
body#Modal .wrapper .inner {
	width: 100%;
	height: auto;
	/*max-height: 320px;*/
	max-height: calc(80vh - 80px);
	box-sizing: border-box;
	padding: 4rem 3rem 4rem 4rem;
	z-index: 8;
	overflow: auto;
}
body#Modal .wrapper .inner p {
	padding-top: 1em;
	padding-right: 2em;
}
body#Modal .inner::-webkit-scrollbar{
    width: 10px;
}
body#Modal .inner::-webkit-scrollbar-thumb{
    background: #c9caca;
    border-radius: 8px;
	-webkit-border-radius: 8px;
	/*border: #f5f5f5 solid 2px;*/
	border-left: #9e9e9e solid 1px;
	border-right: #9e9e9e solid 1px;
	box-sizing: border-box;
}
body#Modal .inner::-webkit-scrollbar-track {
	background: #f5f5f5;
	border: #9e9e9e solid 1px;
}
/*body#Modal .inner::-webkit-scrollbar-track-piece:start{
    background: #f5f5f5;
	-webkit-box-shadow: inset 0 0 6px #f5f5f5;
	box-shadow: inset 0 0 6px #f5f5f5;
}*/
/*body#Modal .inner::-webkit-scrollbar-track-piece:end{
    background: #f5f5f5;
	-webkit-box-shadow: inset 0 0 6px #f5f5f5;
	box-shadow: inset 0 0 6px #f5f5f5;
}*/

body#Modal .btn-wrapper {
	width: 100%;
	display: flex;
}
body#Modal .btn-wrapper .btn {
	width: 21.3%;
	display: flex;
	border: #000 solid 1px;
	margin-top: 4rem;
	margin-left: 2rem;
}
body#Modal .btn-wrapper .btn a {
    width: 100%;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 768px) {
body#Modal .wrapper {
	padding: 2rem 1rem;
}
body#Modal .wrapper .inner {
	padding: 0 1em;
}
body#Modal .wrapper .inner p {
	padding-right: 1em;
}
body#Modal h2 {
	width: 60%;
	margin-top: -7%;
}
body#Modal .btn-wrapper .btn {
	width: 50%;
	margin-top: 2rem;
	margin-left: 1em;
}

body#Modal .wrapper {
	max-height: 80vh;
}
body#Modal .wrapper .inner {
	max-height: calc(80vh - 80px);
}
}

/*fancybox*/
.fancybox-opened .fancybox-skin {
    -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0) !important;
    -moz-box-shadow: 0 0 0 rgba(255, 255, 255, 0) !important;
    box-shadow: 0 0 0 rgba(255, 255, 255, 0) !important;
}
.fancybox-skin,.fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp,
.fancybox-wrap, .fancybox-desktop, .fancybox-type-iframe, .fancybox-opened,
.fancybox-image, .fancybox-iframe {
	background-color: rgba(255,255,255,0) !important;
}

/*----------
問題提起・提案
----------*/

#problem dl{ box-sizing:border-box;width:80%; margin:0 auto; display:table;}
#problem dd {
    display: table-cell;
    vertical-align: middle;
	width:70%;}
#problem  dd.problem_img{width:30%;}
#problem  dd img{ width:100%;}
@media screen and ( max-width:900px )
{
#problem dl{width:100%;}
#problem  dt{ width:60%;}
#problem  dd{ width:40%;}
}

#problem dd p{
    padding:1.5em 2em;
    line-height:1.5;
    margin:0 0 2em;
    border:1px solid #ccc;
    font-size:100%;
    text-align:center;
    color:#999;
    font-weight:bold;
    border-radius:100%;
    background:#fff;
    position:relative;}

#problem p:before{
    position:absolute;
    bottom:-1em;
    right:10%;
    content:"";
    display:block;
    border:1px solid #ccc;
    width:40px;
    height:40px;
    background:#fff;
    border-radius:100%;}

#problem p:after{
    bottom:-2em;
    right:5%;
    position:absolute;
    content:"";
    display:block;
    border:1px solid #ccc;
    width:20px;
    height:20px;
    background:#fff;
    border-radius:100%;}

#problem dd:nth-child(2n) p:before{
    position:absolute;
    bottom:-1em;
	left:10%;
    content:"";
    display:block;
    border:1px solid #ccc;
    width:40px;
    height:40px;
    background:#fff;
    border-radius:100%;}

#problem dd:nth-child(2n)  p:after{
    bottom:-2em;
	left:5%;
    position:absolute;
    content:"";
    display:block;
    border:1px solid #ccc;
    width:20px;
    height:20px;
    background:#fff;
    border-radius:100%;}
#problem div.problem_img1{ width:50%; margin:0 auto;}
#problem div.problem_img2{ width:70%; margin:0 auto;}
#problem div img{width:100%;}
@media screen and ( max-width:700px )
{
#problem div.problem_img1{ width:70%; margin:0 auto;}
#problem div.problem_img2{ width:100%; margin:0 auto;}
	}

/*----------
お客様の声
----------*/

h5 {
	position: relative;
	padding: .5em .75em;
	background-color: #f0f0f0;
	border-radius: 6px;
	margin:0 0 20px 10px;
	font-size:120%;}
h5::after {
	position: absolute;
	/*top: 100%;*/
	left: -22px;
	content: '';
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-right: 15px solid #f0f0f0;}

h5:nth-child(2n) {
	position: relative;
	padding: .5em .75em;
	background-color: #f0f0f0;
	border-radius: 6px;
	margin:0 10px 20px 0;
	font-size:120%;}
h5:nth-child(2n)::after {
	position: absolute;
	/*top: 100%;*/
	left: 99.5%;
	content: '';
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-left: 15px solid #f0f0f0;}
h5 span{ font-size:80%;}

/*----------
list
----------*/

p2 { margin:0 0 20px;}
ul2, ol {
	list-style: none;
	font-family: Garamond,"Times New Roman",游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
	line-height: 1.4;
	margin:0 0 0 30px;}
li2 {	margin-top: .5em;}
li2:first-child {	margin-top: 0;}
li2:last-child { margin-bottom:20px;}

/* diamond */
.sample07 li {	position: relative;}
.sample07 li::after {
	display: block;
	content: '';
	position: absolute;
	top: .5em;
	left: -1em;
	width: 8px;
	height: 8px;
	background-color: #666;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);}

/* check mark */
.sample08 li {	position: relative;}
.sample08 li::after {
	display: block;
	content: '';
	position: absolute;
	top: .5em;
	left: -1em;
	width: 8px;
	height: 3px;
	border-left: 2px solid #666;
	border-bottom: 2px solid #666;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}