@charset "UTF-8";

/* ------------------------------------------
	BASIC STYLES
--------------------------------------------- */
*,*:before,*:after {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing:border-box;
}
body{
	color:#645541;
	font-size:14px;
	padding:0;
	margin:0;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	text-size-adjust:100%;
	background-color:#fff;
	text-align:left;
	line-height: 1.6;	/* line-heightでは単位を記載しない（px指定は例外） */
}

@media screen and (min-width: 768px){
	body{
		max-width:800px;
		width: 50vw;
		font-size:1.2rem;
		margin:0 auto;
	}
	}
img{
	display:block;
	width:100%;
}
p{
	width:100%;
	padding:3% 7%;
	margin:0;
	line-height: 1.5;
	color: #645541;
}
@media screen and (min-width: 768px){
	p{
		font-size:1.2rem;
		line-height:1.8;
	}
	}
#top_realtime_num {
		position: fixed;
		top: 26px;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 1em;
		background-color: #868686;
		color: #FFF;
		padding: 7px;
		opacity: 0.7;
		z-index: 999;
	}

/* マージンボトム */
.mb50{
	margin-bottom: 50px;
}
.mb10{
	margin-bottom: 10vh;
  }

/* ------------------------------------------
	CLEARFIX
--------------------------------------------- */
section:after,
.gridarea:after{
	content:" ";
	display:block;
	clear:both;
}

.clearfix:after
{
	content:" ";
	display:block;
	clear:both;
}
/* ------------------------------------------
	HEADER
--------------------------------------------- */
#fv img{
	display:block;
	width:100%;
}
@media screen and (max-width: 767px){
	#fv img{
		display:block;
		width:100%;
		/* margin-top:-20px;	 */
	}
}
/* ------------------------------------------
	Main
--------------------------------------------- */
.content_img{
	display:flex;
	flex-direction:column;		
	flex-wrap:nowrap;				
	margin:0 auto;
}
.small{
	font-size:0.7rem;
}
@media screen and (min-width: 768px){
	.small {
		font-size:1rem;
	}
	}
@media screen and (min-width: 768px){
		.hikaku {
			display:flex;
			flex-direction:row;		
			flex-wrap:nowrap;				
			margin:0 auto;
			margin-bottom:5%;
		}
		}
@media screen and (min-width: 768px){
		.narabe {
			width:50%;
		}
		}
.yokoni{
		padding:0 7% 10% 7%;
	}
	@media screen and (min-width: 768px){
		.yokoni {
			width:50%;
			padding:3%;
		}
		}
.honya{
	padding:3% 7% 7% 7%;
}
@media screen and (min-width: 768px){
.straight,.mist{
			display:flex;
			flex-direction:column;		
			flex-wrap:nowrap;			
			margin:0 auto;
}
}
@media screen and (min-width: 768px){
	.narabe1 {
		width:100%;
	}
	}
.yokoni1{
	padding-bottom:10%;
}
@media screen and (min-width: 768px){
	.yokoni1 {
		width:100%;
		padding:0 10% 3%;
	}
	}
.cvbuttan{
	width:100%;
	padding:0;
}
.cvbuttan-img:hover {
  filter: opacity(70%);
  cursor: pointer;
}
.btn-center {
	text-align: center;
	margin-bottom: 80px;
}
.btn-center:hover {
	filter: opacity(70%);
	cursor: pointer;
  }
.btn-square {
  display: inline-block;
  width: 80%;
  padding: 2em 1em;
  text-decoration: none;
  background: #A1DB8B;/*ボタン色*/
  color: #FFF;
  border-bottom: solid 4px #70C163;
  border-radius: 3px;
  margin-bottom: 50px;
}
.btn-square:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}
#osusume{
	margin:5% auto;
	padding:0;
	width:90%;
	border: 1px solid #645541;
}
.yokonagashi{
	background-color: #f5f5f5;
	width:90%;
	margin:5% auto;
}
.yokonagashi h3{
	font-size:1rem;
	text-align: center;
	color: red;
	padding:5% 5% 0;
}
@media screen and (min-width: 768px){
	.yokonagashi h3{
		font-size:1.5rem;
	}
	}
.yokonagashi p{
	margin:0 auto;
	font-size: 0.8rem;
	padding:3% 5%;
}
@media screen and (min-width: 768px){
	.yokonagashi p{
		font-size:1rem;
	}
	}
.yokonagashi:last-child{
	padding-bottom:2%;
}
.yokonagashi ul{
	display: block;
	line-height: 2;
	font-size: 0.8rem;
	width: 90%;
	margin:0 auto;
	list-style-image:url(../img/attention.png);
}
@media screen and (min-width: 768px){
	.yokonagashi ul {
		width:90%;
		font-size:1rem;
	}
	}
.dame{
	border-bottom:1px solid #645541;
}
.video{
		width:100%;
		padding-bottom: 56.25%;
		height:0px;
		position: relative;
		}
.video iframe{
		position: absolute;
		top: 0;
		left: 0;
		width:100%;
		height: 100%;
		} 
.tsk_link{
		color: #a1db8b;
    	text-decoration-style: dashed;
}
.tsk_text{
		font-family: "Noto Serif JP";
		color: #a1db8b;
}

@media only screen and (max-width: 768px) {
    .caution {
        padding: 10px 25px 0;
     }
  }

  .yokohaba{
	padding-left: 5%;
	padding-right: 5%;
}
@media screen and (min-width: 768px){
	.yokonagashi ul {
		padding-left: 0px;
		padding-right: 0px;
	}
	}
.yokohaba h3{
	font-size: 1.4rem;
}







  
/* ------------------------------------------
	ギフトカード
--------------------------------------------- */
.box{
    width: 80%;
    background: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
	padding: 0 3% 5%;
	margin:3% auto;
}
.box img{
	width:50%;
	margin:0 auto;
	padding-top:3%;
}
.box p{
	display: block;
	margin:0 auto;
	font-size: 0.8rem;
}
@media screen and (min-width: 768px){
	.box p {
		font-size:0.9rem;
		display:block;
		margin: 0 auto;
		text-align: center;
	}
	}
.box h1{
	display: block;
	text-align: center;
	font-size:2rem;
	font-family:"Noto Serif JP";
	color: #e92d73;
	background-color: #fff;
	margin:3% auto;
	line-height: 0.8;
}
@media screen and (min-width: 768px){
	.box h1 {
		font-size:4rem;
	}
	}
.kikangentei {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #645541;
    text-align: center;
    padding: 8% 0 1%;
    width: 30%;
    margin: 0 auto;
    border-bottom: 2px solid #645541;
}
@media screen and (min-width: 768px){
.kikangentei {
    font-size: 1.6rem;
    padding: 8% 0 1%;
    width: 30%;
    margin: 0 auto;
}
}
.giftfont {
    font-size: 2.5rem;
    display: block;
    text-align: center;
    font-family: "Noto Serif JP";
    font-weight: 700;
    color: #cca6dd;
    background-color: #fff;
    padding-top: 5%;
}
@media screen and (min-width: 768px){
	.giftfont {
    font-size: 3.5rem;
    padding-top: 3%;
}
}
.box span{
	font-size:1.2rem;
}
@media screen and (min-width: 768px){
	.box span {
		font-size:2rem;
	}
	}
.box h2{
	font-size:1.3rem;
	display: block;
	text-align: center;
	font-family:"Noto Serif JP";
	color: #e92d73;
	background-color: #fff;
	margin:3% auto;
}
@media screen and (min-width: 768px){
	.box h2 {
		font-size:1.6rem;
		display:block;
		background:none;
		text-align: center;
		margin: 0 auto;
		padding-bottom: 0;
	}
	}
.view_timer img{
	width:100%;
	padding:3% 0;
}
@media screen and (min-width: 768px){
	.view_timer img {
		width:90%;
	}
	}
/* ------------------------------------------
	h1-h4
--------------------------------------------- */
 h1{
	font-size:1.8rem;
	display: block;
	text-align: center;
	font-family:"Noto Serif JP";
	color: #e92d73;
	background-color: #fff;
	margin: 0;
}
@media screen and (min-width: 768px){
	h1 {
		font-size:2rem;
		display:block;
		background:none;
		text-align: center;
		margin: 0 auto;
	}
	} 
h2 {
	color:#645541;
	font-size:1.4rem;
	font-weight:bold;
	line-height:1.2;
	display:inline-block;
	background-color: #fcced0;
	padding:0;
	margin:0;
}
@media screen and (min-width: 768px){
	h2 {
		font-size:1.6rem;
		display:inline-block;
		background:linear-gradient(transparent 70%, #fcced0 80%);
		padding:2% 0 0 0;
	}
	}

h3 {
	font-size:1.4rem;
	font-family:"Noto Serif JP";
	font-weight:700;
	line-height:1.2;
	margin-top:2%;
	margin-bottom:1%;
}
@media screen and (min-width: 768px){
	h3 {
		font-size:2.0rem;
		margin-bottom:0.7rem;
	}
	}
/* ------------------------------------------
	GLOBAL
--------------------------------------------- */
.marumori{
	list-style: none;
	margin: 0;
	padding: 0 5%;
	font-size:0.9rem;
	line-height:1.5rem;
}
.marumori:last-child{
	padding-bottom:5%;
}
@media screen and (min-width: 768px){
	.marumori {
		font-size:1rem;
		line-height:1.6;
	}
	}
.marumaru::before{
	content: "";
	width:10px;
	height:10px;
	display: inline-block;
	background-color: #cca6dd;
	border-radius:50%;
	margin:0 5px 0 0;
	font-size:0.3rem;
}
@media screen and (min-width: 768px){   
	.pc { display:block; }
	.sp { display:none; }
  }
  @media screen and (max-width: 768px){   
	.pc { display:none; }
	.sp { display:block; }
  }
.akan{
	  font-size: 0.9rem;
	  font-weight: 700;
	  line-height: 1.7;
  }
  @media screen and (min-width: 768px){
	.akan {
		font-size:1.1rem;
	}
	}
/* ------------------------------------------
	CART
--------------------------------------------- */
  .cart{
	  width: 100%;
	  padding-top:5%;
  }
	.cart .box { 
	  margin-top:20px;
	  padding:5%;
	 }
	@media screen and (max-width:768px) {
		.cart .box {
		  width: 90%;
		}
	}
	
  .cart li { 
	  margin-top:30px;
	 }
  .cart li:first-child { 
	  margin-top:0px;
	 }
  .name{
	  font-size:2.5rem;
	  padding:5%;
	  color: red;
  }
  @media screen and (max-width:768px){
	  .name { 
		  font-size:3rem;
		 }
  } 
.touten{
	font-size: 2.5rem;
	display: block;
	text-align: center;
	padding-top:5%;
	color: red;
}
@media screen and (max-width:768px){
	.touten { 
		font-size:2rem;
	   }
} 
input[type="submit"] { 
	width:50%!important;
	height:100px!important;
	font-weight:bold;
	font-size:20px!important;
	box-shadow: 0 6px 0px #279338!important;
	background: -moz-linear-gradient(top, #7ec594, #31ad37)!important;
	background: -webkit-linear-gradient(top, #7ec594, #31ad37)!important;
	background: linear-gradient(to bottom, #7ec594, #31ad37)!important;
	/*グラデーション以外は省略*/
	border: 1px solid #7ec594!important;
	text-shadow: 0 -1px #31ad37!important;
}

@media screen and (max-width:768px){
	input[type="submit"] { width:100%!important; }
}
.chui{
	display:block;
	width: 80%;
	margin:0 auto;
	font-size: 0.8rem;
}
@media screen and (min-width: 768px){
	.chui{
		font-size:1rem;
	}
	}
/* ------------------------------------------
	TABLE
--------------------------------------------- */
.hontai{
	width:100%;
	border-collapse: collapse;
	border-spacing: 0;
	margin-top:3%;
	font-size:0.9rem;
	line-height:1.5rem;
  }
  @media screen and (min-width: 768px){
	.hontai {
		font-size:1rem;
		line-height:1.6;
	}
	}
  .hontai th{
	padding:10px 20px;
	text-align: center;
	vertical-align: center; 
  }
  /* .hontai tr{
	  border-bottom:1px dotted #645541;
  } */
  .hontai td{
	  padding:10px 20px;
	  vertical-align: center; 
  }
  .hontai tr:nth-child(odd){
	background-color: #eee
  } */
  /* ------------------------------------------
	Q&A
--------------------------------------------- */
#more{
	margin:5% 5%;
}
.tab {
	width: 90%;
	position: relative;
	margin-bottom: 1px;
	margin:3% auto;
	color: #645541;
	overflow: hidden;
  }
#more input {
	position: absolute;
	opacity: 0;
	z-index: -1;
  }
  label {
	position: relative;
	display: block;
	padding: 0 0 0 1em;
	font-weight: bold;
	line-height: 2;
	cursor: pointer;
	border-bottom:3px solid #fcced0;
  }
  .tab-content {
	max-height: 0;
	overflow: hidden;
	-webkit-transition: max-height .15s;
	-o-transition: max-height .15s;
	transition: max-height .15s;
	color: #645541;
  }
  .tab-content p {
	margin: 1.5em;
  }
  /* :checked */
  input:checked ~ .tab-content {
	max-height: 100%;
  }
  /* Icon */
  label::after {
	position: absolute;
	right: 0;
	top:0;
	display: block;
	width:  1.5em;
	height: 1.5em;
	line-height: 2;
	text-align: center;
	-webkit-transition: all .35s;
	-o-transition: all .35s;
	transition: all .35s;
	font-size:1.4rem;
  }
  input[type=checkbox] + label::after {
	content: "+";
	top: center;
  }
  input[type=radio] + label::after {
	content: "\25BC";
  }
  input[type=checkbox]:checked + label::after {
	transform: rotate(45deg);
  }
  input[type=radio]:checked + label::after {
	transform: rotateX(45deg);
  }
.kyuchan{
	display:inline-block;
	font-size:1.2rem;
	margin:0 1%;
	font-family:"Noto Serif JP";
}
.honbun{
	display: inline-block;
	max-width:75%;
	font-size:0.9rem;
	line-height: 1.2;
	vertical-align: baseline;
	font-family:"Noto Serif JP";
}
@media screen and (min-width: 768px){
	.honbun {
		width:190%;
		font-size:1rem;
	}
	}
/* ------------------------------------------
	text
--------------------------------------------- */
.text{
	display: inline-block;
	width:100%;
	padding:0 5%;
}
.syousai{
	line-height:1.5rem;
	padding:0 3%;
	margin:0;
}
.text h2{
	margin-top:3%;
	padding:3%;
}
.text h3{
	padding:3% 3% 0 3%;
	line-height: 1.2;
}
.text h3:first-child{
	padding-top:0;
	margin:0;
  }
@media screen and (min-width: 768px){
	.text p{
		font-size:1.1rem;
	}
	}
.text a{
	color:#e92d73;
	text-decoration: none;
}
.text a:hover{
	color:#fcced0;
}
/* ------------------------------------------
	FOOTER
--------------------------------------------- */
footer{
	display:block;
	width:100%;
	margin:0 auto;
	text-align: center;
	border-top:2px solid #cb362b;
}
@media screen and (min-width: 768px){
	footer{
		width:90%;
	}
}
footer a{
	color:#292828;
	text-align: center;
	text-decoration: none;
	font-size:0.9rem;
}
footer  a:hover{
	color:#645541;
}
.footers{
	display: inline-block;
	width:90%;
	padding:20px 0;
	border-bottom:2px solid #cb362b;
}
@media screen and (min-width: 768px){
	.footers{
		width:70%;
	}
}
.footers ul{
	margin: 0;
	padding: 0;
}
.footers a{
	display: inline-block;
    padding:10px 0;
}
/* .footers a.policy_link:after{
    content: ' ▼';
} */
/* .footers .policy_main{
	text-align: left;
	font-size:0.9rem;
	display: none;
	line-height:normal
}
.footers .policy_main p{
	font-size:0.9rem;
	padding: 0;
}
.footers .policy_main dt{
	font-weight: bold;
}
.footers .policy_main dd{
	margin-left: 1em;
}
.footers .policy_main ol {
	list-style-type: decimal;
	padding-left: 1.5em;
}
@media screen and (min-width: 768px){
	.footers .policy_main ol {
		padding-left: 2.5em;
	}
} */
.footers img {
    width: 50%;
    padding: 12px 0;
    margin: 0 auto;
}
.pmark{
	display:flex;
	align-items: center;
	justify-content: space-between;
    padding: 0 20%;
}

.pmark img{
	width:10%;
}

/*----------------------
商品エリア
----------------------*/
.h_product{
	text-align: center;
}
.product_cnt{
	margin-top: 50px;
	width:80%;
	margin:50px auto 0;
}
@media screen and (max-width: 768px) {
	.product_cnt{
		width:100%;
	}
}
.product_cnt .product_image{
	text-align: center;
}
.product_cnt img{
	max-width: 350px;
	width: 100%;
}

.product_cnt table{
	margin: 0 auto;
	font-size: 18px;
	max-width: 350px;
}

@media screen and (max-width: 768px) {
	.product_cnt table{
		width:100%;
		font-size: 14px;
	}
}

.product_cnt table th{
	text-align: left;
	padding: 20px 0 10px 0 ;
}

.product_cnt table td{
	padding: 20px 0 10px 25px ;
}
@media screen and (max-width: 768px) {
	.product_cnt table th{
		padding: 0 0 10px 0 ;
		white-space: nowrap;
	}
	
	.product_cnt table td{
		padding: 0 0 10px 16px ;
	}
}
.product_cnt .shortRed{
	color:#ea6363;
	font-size: small;
	font-weight: normal;
}

/* 購入数のプラスマイナスボタンの調整 */
.product_cnt .spinner_btn{
	font-size:16px;
	text-align: center;
	vertical-align: middle;
	width: 40px;
	height:40px;
	cursor:pointer;
	/* padding: 5px; */
    background-color: #ddd;
	border: 1px solid #333;
	border-radius: 5px;
	display: inline-block;
	line-height: 40px;
}

/* 購入数のフォームサイズ */
.product_cnt #product1_amount, .product_cnt #product2_amount{
	width: 50px;
	height:40px;
}
.product_cnt select{
	width: 190px;
	height: 40px;
}

/* セレクトボックスのエラーメッセージ */
.errorMessage{
	display: none;
	font-size: 12px;
	color:#ea6363;
}

/*---------------------
ボタンの設定 
---------------------*/

.product_cnt .getbasket{
	margin-top: 32px;
}

@media screen and (max-width: 767px) {
	.product_cnt .getbasket{
		margin-top: 16px;
	}
}

/* ボタンを画像にする場合 */
.product_cnt .getbasket input[type="image"]{
	width: 100%;
	max-width: 350px;
	transition: all 0.9s;
	text-align: center;
	display: block;
	margin: 0 auto;
}
.product_cnt .getbasket input[type="image"]:hover{
	opacity: 0.8;
}

/* ボタンデザインをCSSで設定する場合 */
.addCart {
	border-radius:6px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	padding:5px 30px !important;
	background:#333;/* ボタンの色指定*/
	color:#fff;/* ボタンの文字色指定*/
	font-size:14px;
	line-height:2;
	font-weight:bold;
	cursor:pointer;
}

/*---------------------
アナウンスエリア
---------------------*/
.announce_msg_area02{
	color: red;
	margin: 0 10%;
}

/*-------------------------------------------
カウントダウン
-----------------------------------------------*/
.cd-bg{
	text-align: center;
	margin:40px 0 20px 0;
}
.cd-bg .countdownA,
.cd-bg .countdownB,
.cd-bg .countdownC {
  display: none;  /* 初期状態で全て非表示 */
}
.cd-bg .countdownA:not(:empty),
.cd-bg .countdownB:not(:empty),
.cd-bg .countdownC:not(:empty)  {
  display: block;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  text-align: center;
  font-weight: bold;
  padding: 20px;
  color: #fff;
  background-color: #694c4b;
  font-size: 1.05vw;
  line-height: 1.5;
  white-space: normal;
}
.cd_top {
	margin:0;
}
@media screen and (max-width: 767px){
	.cd-bg{
		margin:2vh 0;
	}
	.cd-bg .countdownA:not(:empty),
	.cd-bg .countdownB:not(:empty),
	.cd-bg .countdownC:not(:empty)  {
	  display: inline;
	  padding: 0px 8px;
	  font-size: 1.4rem;
	  line-height: 1.5;
	  white-space: pre-line;
	}
	.cd_top {
		margin:2vh 0;
	}	
}

/* 製品情報 */
.Table {
	width: 100%;
	border-top: solid 2px #333;
	border-bottom: solid 2px #333;
	border-collapse: collapse;
	background: #fff;
	font-size: 16px;
  }
  @media screen and (max-width: 767px) {
	.Table {
	  font-size: 12px;
	}
  }
  .Table-Head-Row {
	border-top: solid 2px #333;
	border-bottom: solid 2px #333;
  }
  .Table-Head-Row-Cell {
	padding-top: 0.75em;
	padding-bottom: 0.75em;
	padding-left: 0.5em;
	padding-right: 0.5em;
  }
  .Table-Body-Row {
	border-top: solid 2px #333;
	border-bottom: solid 2px #333;
  }
  .Table-Body-Row-Cell {
	padding-top: 0.75em;
	padding-bottom: 0.75em;
	padding-left: 0.5em;
	padding-right: 0.5em;
  }

  dt {
    line-height: 1.5;
    margin-bottom: 10px;
  }
  dd {
    line-height: 1.5;
  }

/* ホバースタイル */
  .opcity:hover {
	opacity: 0.6;
  }

/* 下部固定ボタン */
.fixed-banner {
    position: fixed;
    bottom: 0;
    width: 100%;
    /* background-color: #fff;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); */
    text-align: center;
    /* padding: 10px 0; */
}
@media screen and (max-width: 767px){
	.fixed-banner {
		left: 0;
	}
}
@media screen and (min-width: 768px){
	.fixed-banner {
		max-width: 800px;
		width: 50vw;
	}
}

.bonusPeriod {
	text-align: center;
	padding: 1rem 0 1.5rem 0;
    font-size: 1.8rem;
    font-weight: bold;
    font-family: "Noto Serif JP";
	color: #fb6d0e;
}
@media screen and (min-width: 768px){
	.bonusPeriod {
		padding: 1rem 0 2rem 0;
		font-size: 2.6rem;
	}
}