@charset "UTF-8";
html{
	font-size: 18px;
	line-height: 1.4;
}
img{ max-width: 100%; height: auto; }
#main p,#main div{ font-family: 'YakuHanJP','Noto Sans JP', "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; }

#main a{ transition: opacity 0.25s linear; }
#main a:hover{ opacity: 0.7; -ms-filter: "alpha(opacity=70)"; }
.sp { display: none; }
#main br.sp{ display: none; }
.font-sizedown {font-size: 80%;}
.font-bold {font-weight: bold;}
.top-sp5 {
	margin-top: 5px;
}
.top-sp10 {
    margin-top: 10px;
}
.top-sp20 {
	margin-top: 20px;
}
.js-inview{ opacity: 0; transition: opacity 0.5s; }


.date {
    color: #FFFFFF;
    background-color: #3299CC;
    display: inline-block;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 10px;
    padding-right: 10px;
}
#main .content   {
	padding: 0;
	margin-top: auto;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: auto;
	background-color: #5F2800;
	overflow: hidden;
	width: 100%;
	background-image: url(../image/left.webp);
	background-position: left top;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: 42% auto;
}
#main .content .main-content {
	background-image: url(../image/right.webp);
	background-repeat: no-repeat;
	background-size: 38% auto;
	background-position: right top;
	background-attachment: fixed;
}
.content .main-content .inner {
	margin: auto;
	width: 50%;
	background-image: linear-gradient(180deg, rgba(65, 194, 196, 1), rgba(153, 223, 224, 1));
	padding-bottom: 5%;
}
.main-content .inner .header.sub {
	height: 215px;
	overflow: hidden;
}
.main-content .inner .section {
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	margin-top: 10%;
}
.main-content .inner .section .ttl {
	margin-bottom: 8%;
}
.main-content .inner .section .ttl2 {
	margin-bottom: 8%;
	margin-top: 10%;
	margin-left: auto;
	margin-right: auto;
	width: 80%;
}
.main-content .inner .vt-date {
	margin-left: auto;
	margin-right: auto;
	width: 75%;
}
.main-content .inner .coupon {
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	margin-top: 5%;
}
.main-content .inner .navi-area {
	margin-left: auto;
	margin-right: auto;
	width: 70%;
	margin-top: 10%;
	padding-bottom: 10%;
}
.inner .navi-area .btnwrap {
	position: relative;
	margin-top: 20%;
}
.navi-area .btnwrap .navibtn  {
	position: absolute;
	width: 100%;
	bottom: -30px;
}
.section .choco .photo {
	position: relative;
}
.cut01 {
	border-radius: 67% 33% 33% 67% / 66% 58% 42% 34%;
}
.cut02 {
	border-radius: 17% 83% 55% 45% / 52% 53% 47% 48% 
}
.cut03 {
	border-radius: 52% 48% 57% 43% / 52% 53% 47% 48% 
}
.deco01 {
	position: absolute;
	width: 100%;
}
.deco02 {
	position: absolute;
	width: 32%;
	right: 0%;
	top: 0%;
}
.deco03 {
	position: absolute;
	width: 21%;
	left: -3%;
	bottom: 14%;
}
.deco04 {
	position: absolute;
	width: 43%;
	left: -3%;
	top: -5%;
}
.deco05 {
	position: absolute;
	width: 28%;
	top: -5%;
	right: -4%;
}
.deco06 {
	position: absolute;
	width: 22%;
	left: -4%;
	bottom: 15%;
}
.inner .section .choco + .choco {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px dashed #FFFFFF;
}
.choco-copy  {
	color: #6A2D00;
	font-weight: bold;
}
.txt {
	color: #000000;
}
.subtxt01 {
	position: absolute;
	font-weight: bold;
	left: 24%;
	bottom: 8%;
}
.subtxt02 {
	position: absolute;
	font-weight: bold;
	bottom: 26%;
	right: 2%;
}
.subtxt03 {
	position: absolute;
	font-weight: bold;
	top: 19%;
	right: 38%;
}
.subtxt04 {
	position: absolute;
	font-weight: bold;
	bottom: 7%;
	right: 30%;
}
.gentei {
	position: absolute;
	font-weight: bold;
	bottom: 7%;
	width: 20%;
	z-index: 20;
	left: 7%;
}
.choco-brand-w {
	color: #FFFFFF;
	font-weight: bold;
	background-color: #DE5A77;
	display: inline-block;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 1.5rem;
	margin-top: 5px;
}
.choco-brand-j {
	color: #FFFFFF;
	font-weight: bold;
	background-color: #049DA0;
	display: inline-block;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 1.5rem;
	margin-top: 5px;
}
.choco-brand-d {
	color: #FFFFFF;
	font-weight: bold;
	background-color: #905343;
	display: inline-block;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 1.5rem;
	margin-top: 5px;
}
.choco-brand-h {
	color: #FFFFFF;
	font-weight: bold;
	background-color: #EC6A01;
	display: inline-block;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 1.5rem;
	margin-top: 5px;
}
.choco-brand-p {
	color: #FFFFFF;
	font-weight: bold;
	background-color: #EC6013;
	display: inline-block;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 1.5rem;
	margin-top: 5px;
}
.choco-brand-o {
	color: #FFFFFF;
	font-weight: bold;
	background-color: #0478B3;
	display: inline-block;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 1.5rem;
	margin-top: 5px;
}
.choco-brand-c {
	color: #FFFFFF;
	font-weight: bold;
	background-color: #D9335A;
	display: inline-block;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 1.5rem;
	margin-top: 5px;
}
.hatsu {
	color: #FF0004;
	background-color: #FFFFFF;
	border: 1px solid #FF0004;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	padding-right: 5px;
	margin-right: 3px;
	font-size: 80%;
}
.new {
	color: #FF0004;
	background-color: #FFFFFF;
	border: 1px solid #FF0004;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	margin-right: 3px;
	font-size: 80%;
	display: inline-block;
}
.kagiri {
	color: #000000;
	font-size: 80%;
	display: inline-block;
	margin-left: 3px;
}
.kikan {
	color: #6A2D00;
	background-color: #FFFFFF;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	padding-right: 5px;
	text-align: center;
	font-weight: bold;
}
.brand .index-ttl {
	width: 50%;
	padding-top: 10%;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 10%;
}
.brand dl {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}
.brand dl dt {
	color: #000000;
	font-weight: bold;
	float: left;
	margin-top: 0px;
	padding-top: 0px;
}
.brand dl dd {
    display: block;
    padding-left: 6%;
    color: #000000;
}


#page-top {
	position: fixed;
	bottom: 20px;
	right: 30px;
	width: 50px;
	z-index: 90;
}
.page-back {
    width: 60px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #673D19;
    padding-right: 10px;
    padding-left: 10px;
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #FFFFFF;
    text-decoration: none;
}
.inner .section .back {
	text-align: center;
	margin-top: 10%;
}
.backbtn {
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	width: 20%;
	text-align: center;
	color: #FFFFFF;
	text-decoration: none;
	background-color: #6A2D00;
}




html {
  scroll-behavior: smooth;
}

.fade. {
	opacity: 0;
	transition-duration: .5s;
	transform: translateY(10px);
}
.fade-in {
	opacity: 1;
	transform: translateY(0px);
}