@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 :#00638E;
	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: 100%;
	position: absolute;
    top: 30.5%;
	right:-0.2%;
}
.cart .btn_3 {
	width: 67%;
	position: absolute;
    top: 71%;
	left: 3%;
}
.cart .btn_1 {
	width: 25%;
	position: absolute;
    top: 83%;
	right: 4.5%;
}


/****************************
offerボタン
*****************************/
.offer {
	position: relative;
}
.offer .btn_5 {
	width: 82%;
	position: absolute;
    top: 68%;
	right:9%;
}
.offer .btn_3 {
	width: 82%;
	position: absolute;
    top: 66%;
	right: 9%;
}
.offer .btn_1 {
	width: 38%;
	position: absolute;
    top: 40%;
	right: 10.5%;
}



/****************************
	ボタンアニメーション
*****************************/
@-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%;
}


/****************************
	動画
*****************************/

.Container {
	overflow: hidden;
}
.overlayArea {
  position: relative;
}

.overlayItem {
  position: absolute;
  box-sizing: border-box;
}

.video_01 {
  width: 80%;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid #4fabbb;   /* ← 緑の枠 */
}

.Container {
  overflow: hidden;
}


/****************************
 slider
*****************************/
/****************************
 slider
*****************************/
/* ======================
   Slider Overlay FIXED
====================== */

/* 基準になる親 */
.slider_wrapper{
  position: relative;
}

/* 背景画像 */
.slider_wrapper p{
  margin: 0;
}

.slider_wrapper p img{
  width: 100%;
  display: block;
}

/* スライダーを強制的に上に重ねる */
.slider{
  position: absolute !important;
  top: 	25% !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 10 !important;
}

/* 念のため */
.slider img{
  width: 100%;
  display: block;
}
/* 余白調整 */
.slider .slick-slide {
  padding: 0 10px;
}

/* ボタン本体 */
.slider .slick-arrow {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border: none;
  background: none;
  border-radius: 0;
  cursor: pointer;
  z-index: 2 !important;
  padding: 0;
}

/* 既存のSlickデフォルト矢印を完全消去 */
.slider .slick-arrow::before {
  content: none;
}

/* 線で作る矢印 */
.slider .slick-prev::after,
.slider .slick-next::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border-top: 5px solid #0f8a8a;   /* ← 色はここ */
  border-right: 5px solid #0f8a8a;
}

/* 右矢印（＞） */
.slider .slick-next::after {
  transform: rotate(45deg);
  right: 14px;
}

/* 左矢印（＜） */
.slider .slick-prev::after {
  transform: rotate(-135deg);
  left: 14px;
}

/* 左右位置 */
.slider .slick-prev {
  left: 7% !important;
}

.slider .slick-next {
  right: 7% !important;
}




/****************************
	FAQ
*****************************/
.accordionContainer {
	width: 100%;
	margin: 0 auto;
	padding-top: 8%;
	padding-bottom: 7.5%;
	background-color: #b1cfcd;
}
.accordion__item {
	position: relative;
	width: 89.4%;
	margin: 0 auto;
	z-index: 1;
	margin-bottom: 4%;
	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: 35px;
	height: 35px;
	top: 50%;
	right: 5.1%;
	margin-top: -17px;
	background-color: #0060a6;
	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);
}