@charset "UTF-8";

/****************************
	リセット
*****************************/
html {
	color:#000;
	background-color: #FFF;
	max-width: 750px;
	margin: 0 auto;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
	margin:0;
	padding:0;
}
body {
	width: 100%;
	font-family:"Noto Sans Japanese","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#000;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
td {
	border: solid 1px;
	padding: 1em;
}
a {
	color:#000;
	text-decoration: none;
}
img {
	width: 100%;
	vertical-align: bottom;
	padding: 0;
	margin: 0;
	border:0;
}

/****************************
	共通設定
*****************************/
p {
	display: block;
	margin: 0 auto;
	line-height: 1.9;
	font-family:"Noto Sans Japanese","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #444;
}
ul {
	max-width: 90%;
	margin: 0 auto;
	margin-top: 5%;
	margin-bottom: 30%;
	line-height: 1.9;
	color: #444;
	font-size: .89em;
}
li {
	margin-top:2%;
	list-style: none;
}
a {
	color: #444;
}

/****************************
	PC/SP 表示出し分け
*****************************/
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

/****************************
	フッター アコーディオン
*****************************/
.accbox label {
	display: block;
	font-size: 1em;
	font-weight: 400;
	margin: 1.5px 0;
	padding : 3px;
	color :#fff;
	background :#007F8F;
	cursor :pointer;
	text-align: left;
}
.accbox label span {
	position: relative;
	display: inline-block;
	padding-left: 20px;
}
.accbox label span:before {
	content: '';
	width: 6px;
	height: 6px;
	border: 0px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 50%;
	left: 5%;
	margin-top: -4px;
}
.accbox input {
	display: none;
}
.accbox .accshow {
	height: 0;
	padding: 0;
	overflow: hidden;
	opacity: 0;
	transition: 0.8s;
}
.cssacc:checked + .accshow {
	height: auto;
	opacity: 1;
	margin-bottom: 20px;
}
#shopping_guide {
	padding-bottom: 3%;
}
#shopping_guide .sg_ttl {
	/*background: #FF8370;
	padding: 5px 0 5px 15px;*/
	color: white;
	font-size: 1.1em;
	/*margin: 5% 0 2%;*/
}
#shopping_guide .sg_ttl_sub {
	padding: 5px 5px 5px 15px;
	font-weight: bold;
	margin: 4% 0 1%;
	font-size: 16px;
	line-height: 2;
}
#shopping_guide p {
	padding: 5px 5px 5px 15px;
	font-size: 16px;
	line-height: 2;
}
#shopping_guide img {
	padding: 5px 0 5px 15px;
	margin-bottom: 5%;
}
.small {
	font-size: 14px;
	display:block;
	padding: 1% 0;
	line-height: 1.75;
}

/****************************
	フッター
*****************************/
footer {
	font-size: 1.1em;
	line-height: 1.75;
}
footer ul {
	float: left;
	width: 70%;
	margin: 7% 0 20% 0!important;
}
footer ul li{
	padding: 0 0 3% 10%!important;
	font-size: 0.9em;
	text-decoration: underline;
}
footer p.totop {
	float: right;
	width: 20%;
	margin: 3% 5%;
}
.copy {
	padding: 0 0 3%;
	text-align: center;
	font-size: 0.8em;
	clear: both;
}

/****************************
	FV下ボタン
*****************************/
.cart {
	position: relative;
	display: flex;
	justify-content: center;
}
.cart .btn_5 {
	width: 95%;
	position: absolute;
    top: 29%;
	right:2.25%;
}
.cart .btn_3 {
	width: 68%;
	position: absolute;
    top: 71%;
	left: 3%;
}
.cart .btn_1 {
	width: 25%;
	position: absolute;
    top: 84%;
	right: 3.45%;
}

/****************************
	オファーボタン
*****************************/
#offer .btn_5 {
	width: 85%;
	bottom: 7%;
	right:7.4%;
}
#offer .btn_3 {
	width: 85%;
	bottom: 8%;
	right:7.4%;
}
#offer .btn_1 {
	width: 37%;
	bottom: 35%;
	right:12%;
} 


/****************************
	ボタンアニメーション
*****************************/
@-webkit-keyframes bounce {
	from, 20%, 53%, 80%, to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	40%, 43% {
		-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		-webkit-transform: translate3d(0, -30px, 0);
		transform: translate3d(0, -30px, 0);
	}
	70% {
		-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0);
	}
	90% {
		-webkit-transform: translate3d(0, -4px, 0);
		transform: translate3d(0, -4px, 0);
	}
}
@keyframes bounce {
	from, 20%, 53%, 80%, to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	40%, 43% {
		-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		animation-timing-function: cubic-bezier(0.655, 0.05, 0.855, 0.06);
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0);
	}
	70% {
		-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		animation-timing-function: cubic-bezier(0.655, 0.05, 0.855, 0.06);
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0);
	}
	90% {
		-webkit-transform: translate3d(0, -4px, 0);
		transform: translate3d(0, -4px, 0);
	}
}
.bounce {
	-webkit-animation-name: bounce;
	animation-name: bounce;
	-webkit-transform-origin: center bottom;
	transform-origin: center bottom;
}
.animated {
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}


/******************************************
	フローティングバナー（ボット起動ボタン）
*******************************************/
/*SP*/
@media only screen and (max-width: 750px) {
	.botbnr {
		width: 90%;
		position: fixed;
		margin: 0 auto;
		bottom: 1%;
		right: 1%;
		z-index: 100;
	}
	.botbnr img {
		border: none;
		vertical-align: bottom;
		margin: 0 auto;
		display: block;
		max-width: 600px;
		width: 100%!important;
	}
}
/*PC*/
@media only screen and (min-width: 751px) {
	.botbnr {
		width: 635px;
		position: fixed;
		margin: 0 auto;
		bottom: 1%;
		right: 1%;
		z-index: 100;
	}
	.botbnr img {
		border: none;
		vertical-align: bottom;
		margin: 0 auto;
		display: block;
	}
}
/*指定タグ位置で消える設定*/
.is-fixed {
	display: none!important;
}


/******************************************
	fadeUp
*******************************************/
.fadeUp{
	animation-name:fadeUpAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
}

@keyframes fadeUpAnime{
	from {
	  opacity: 0;
	  transform: translateY(100px);
	}
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger{
	opacity: 0;
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger{
	opacity: 0;
}

/*========= レイアウトのためのCSS ===============*/
.box{
	width: 100%;
}


/****************************
	動画
*****************************/
.overlayArea {
	position: relative;
}
.overlayItem {
	position: absolute;
}
.video_01 {
	width: 85%;
	top: 11.5%;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.Container {
	overflow: hidden;
}


/****************************
	slider
*****************************/
.slider_wrapper {
	position: relative;
}
/*------ スライダーの横幅 ------*/
div.slider{
	width:100%;
  /*--margin:0 auto;--*/
	position: absolute;
	top: 28%;
	max-width: 750px;
}
/*------ スライダー画像 ------*/
.slider img{
	width:100%;
}
/*-------- 高さ調整 ----------*/
.slider .slick-slide{
	height:auto!important;
}
/*---------- 矢印 ----------*/
.slider .slick-arrow{
	width: initial!important;
	height: initial!important;
	z-index:2!important;
}
.slider .slick-next{
	right:3%!important;
}
.slider .slick-prev{
	left:3%!important;
}
.slider .slick-arrow:before{
	font-size: 60px!important;
	color: #16746B;
}


/****************************
	FAQ
*****************************/
.accordionContainer {
	width: 100%;
	margin: 0 auto;
	padding-top: 32.3%;
	padding-bottom: 7.5%;
	background: center top/100% auto no-repeat url("../../LP_images/mol/faq_bg.jpg");
}
.accordion__item {
	position: relative;
	width: 89.4%;
	margin: 0 auto;
	z-index: 1;
	margin-bottom: 2.7%;
	border-radius: 5px;
	overflow: hidden;
}
.accordion__btn {
	position: relative;
	cursor: pointer;
	user-select: none;
	background: white;
}
.accordion__content {
	overflow: hidden;
	transition-duration: .3s;
	background: #FFF;
}
.accordion__content.js-close {
	height: 0;
	opacity: 0;
}
.accordion__content.js-open {
	opacity: 1;
}
.accordion__state {
	position: absolute;
	width: 34px;
	height: 34px;
	top: 50%;
	right: 5.1%;
	margin-top: -17px;
	background-color: #42948F;
	border-radius: 50%;
}
@media screen and (max-width: 750px) {
	.accordion__state {
	  width: 4.53333vw;
	  height: 4.53333vw;
	  margin-top: -2.26667vw;
	}
}
.accordion__state::before, .accordion__state::after {
	position: absolute;
	content: "";
	display: block;
	width: 55%;
	height: 2px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background: #FFFFFF;
}
.accordion__state::after {
	transform: rotate(90deg);
	transition: .2s all ease-in-out;
}
.js-active .accordion__state::after {
	transform: rotate(0);
}