@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;
}
* {
  box-sizing: border-box;
  }

/****************************
	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 :#FF9783;/*◀ラベルの色変更ここから！*/
	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;
}
.red {
	color: #FF5053;
}

/****************************
	フッター
*****************************/
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;
}

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

/****************************
	カルーセル：選ばれる5つの理由
*****************************/
.LPO {
	position: relative;
}
.LPO_gif {
	width: 75%;
	position: absolute;
	top: 30%;
	left: 13.2%;
}


/****************************
	オファー（cart03）：ボタンのみ
*****************************/
.cart03 {
	position: relative;
}
.cart03 .NB_btn {
	width: 46%;
	position: absolute;
	top: 11%;
	left: 4%;
}
.cart03 .LB_btn {
	width: 46%;
	position: absolute;
	top: 11%;
	right: 4%;
}
.cart03 .konyu {
	width: 100%;
	position: absolute;
	top: -7%;
	margin: 0 auto!important;
}

/****************************
	オファー（cart04）：メイン
*****************************/
.cart04 {
	position: relative;
}
.cart04 .NB_btn {
	width: 46%;
	position: absolute;
    top: 69%;
	left: 5%;
}
.cart04 .LB_btn {
	width: 46%;
	position: absolute;
    top: 69%;
	right: 4%;
}

/****************************
	GIFアニメ
*****************************/
.gif_bg{
	background : #FFF;
	background-size: cover;
	background-position: center;
	padding-top: 20px;
	padding-bottom: 20px;
}
.gif_bg img{
	display: block;
	width: 90%;
	margin: 0 auto;
}

/******************************************
	フローティングバナー（ボット起動ボタン）
*******************************************/
/*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;
}

/****************************
	slider
*****************************/
.slider_wrapper {
	position: relative;
}
.slider_wrapper2{
	background: url("../../LP_images/cf/carousel_bg.jpg");
	background-size: 100%;
	background-repeat: repeat-y;
}

/*------ スライダーの横幅 ------*/
div.slider{
	width:100%;
  /*--margin:0 auto;--*/
	position: absolute;
	top: 42%;
	max-width: 750px;
}

/*------ スライダー画像 ------*/
.slider img{
	width:100%;
}
.slider2 img{
	width:100%;
}
/*-------- 高さ調整 ----------*/
.slider .slick-slide{
	height:auto!important;
}
.slider2 .slick-slide{
	height:auto!important;
}
/*---------- 矢印 ----------*/
.slider .slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2 !important;

  /* ブラウン〜金のグラデーション背景 */
  background: linear-gradient(135deg, #6b4e2e, #d6b36a);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.slider2 .slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2 !important;

  /* ブラウン〜金のグラデーション背景 */
  background: linear-gradient(135deg, #6b4e2e, #d6b36a);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* 白三角の基本形 */
.slider .slick-prev::before,
.slider .slick-next::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  opacity: 1;
}
.slider2 .slick-prev::before,
.slider2 .slick-next::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  opacity: 1;
}

/* 左矢印 */
.slider .slick-prev::before {
  border-width: 13px 18px 13px 0;
  border-color: transparent #ffffff transparent transparent;
  margin-left: -4px;
}
.slider2 .slick-prev::before {
  border-width: 13px 18px 13px 0;
  border-color: transparent #ffffff transparent transparent;
  margin-left: -4px;
}

/* 右矢印 */
.slider .slick-next::before {
  border-width: 13px 0 13px 18px;
  border-color: transparent transparent transparent #ffffff;
  margin-right: -4px;
}
.slider2 .slick-next::before {
  border-width: 13px 0 13px 18px;
  border-color: transparent transparent transparent #ffffff;
  margin-right: -4px;
}

/* 左右の位置調整 */
.slider .slick-prev {
  left: 3% !important;
}
.slider2 .slick-prev {
  left: 3% !important;
}
.slider .slick-next {
  right: 3% !important;
}
.slider2 .slick-next {
  right: 3% !important;
}

/* ------- slick矢印のホバー動作を無効化（デザイン維持） ------- */
.slider .slick-prev::before,
.slider .slick-next::before {
  opacity: 1 !important;          /* 常に100%表示 */
  transition: none !important;    /* フェードなどのアニメーション無効 */
  transform: none !important;     /* 位置が動かないよう固定 */
}
.slider2 .slick-prev::before,
.slider2 .slick-next::before {
  opacity: 1 !important;          /* 常に100%表示 */
  transition: none !important;    /* フェードなどのアニメーション無効 */
  transform: none !important;     /* 位置が動かないよう固定 */
}

.slider .slick-prev:hover::before,
.slider .slick-next:hover::before {
  opacity: 1 !important;
  transform: none !important;
}
.slider2 .slick-prev:hover::before,
.slider2 .slick-next:hover::before {
  opacity: 1 !important;
  transform: none !important;
}

.slider .slick-prev,
.slider .slick-next {
  background: linear-gradient(to bottom, #8B5A2B, #D4AF37) !important;
  transition: none !important;
}
.slider2 .slick-prev,
.slider2 .slick-next {
  background: linear-gradient(to bottom, #8B5A2B, #D4AF37) !important;
  transition: none !important;
}

.slider .slick-prev:hover,
.slider .slick-next:hover {
  background: linear-gradient(to bottom, #8B5A2B, #D4AF37) !important;
}
.slider2 .slick-prev:hover,
.slider2 .slick-next:hover {
  background: linear-gradient(to bottom, #8B5A2B, #D4AF37) !important;
}