@font-face{font-family:'icoset';src:url("/cmn/css/fonts/icoset.eot");src:url("/cmn/css/fonts/icoset.eot#iefix") format("embedded-opentype"),url("/cmn/css/fonts/icoset.ttf") format("truetype"),url("/cmn/css/fonts/icoset.woff") format("woff"),url("/cmn/css/fonts/icoset.svg#icoset") format("svg");font-weight:normal;font-style:normal}

.fix:after{
  content: ".";
  display: block;
  height: 0;
  font-size:0;
  clear: both;
  visibility:hidden; }
.fix{
  display: inline-block; }
/* Hides from IE Mac */
* html .fix{
  height: 1%; }
.fix{
  display:block; }
.fl { float: left; }
.fr { float: right; }

.pc_only{
    display: block;
}

.sp_only{
    display: none;
}

.inner {
	max-width: 1920px;
	margin: 0 auto; }

#contents a{
    text-decoration: none;	
}

.block{
	width: 65%;
}

#sec01 {
padding: 60px 0;
}

#sec01 .inner .cont01 {
font-family: 'Sawarabi Gothic', sans-serif;
}
#sec01 .cont h2 {
	margin: 0 0 5%; }
#sec01 .cont p {
	padding: 0 5%;
	text-align: center;
}
#sec01 .inner .cont01 > div{
    width: 100%;
   max-width: 1000px;
    margin: auto;
	text-align: center;
}
#sec01 .inner .cont01 h2{
    margin-bottom: 1rem;
	width: 67%;
	font-size: 1.8rem;
	margin: auto;
	letter-spacing: 0.2rem;
}

#sec01 .inner .cont01 .brand_logo_top{
    width: 30%;
    margin: auto;
}

#sec01 .inner .cont01 h2{
    font-size: 2rem;
    line-height: 1.5;
    margin-bottom: 20px;
	text-align: center;
}

.brand_area_inner h3{
    font-size: 2rem;
    border-bottom: 1px solid #333;
    width: 70%;
    margin: 0 auto 1.6rem;
    padding-bottom: 0.5rem;
}



#sec02 {
	background-color: #e7eaef; }
#sec02 .inner {
	position: relative;
	background: url("/feature/the-sweets/rollcake/images/sec02_bg01.jpg") no-repeat right top / 50% auto; }
#sec02 .inner > span {
	display: block;
	padding-top: 86%;
	width: 100%; }
#sec02 .cont01 {
	width: 36%;
	position: absolute;
	top: 0;
	left: 21%;
	margin-top: 8%;
	z-index: 2;
	height: 63%;
	text-align: center;
	background: url("/feature/the-sweets/rollcake/images/sec02_bg02.jpg") no-repeat center top / 100% 100%; }
#sec02 .cont01 p {
	font-size: 21px;
	line-height: 2;
	text-shadow: 0 -1px 9px #ffffff,
		-1px 0 9px #ffffff,
		1px 0 9px #ffffff,
		0 1px 9px #ffffff,
		0 0 9px #ffffff; }
#sec02 .cont02 {
	width: 37%;
	position: absolute;
	left: 54%;
	bottom: 0;
	text-align: center;
	background-color: #00275e; }
#sec02 .cont02 p {
	font-size: 21px;
	line-height: 2;
	color: #ffffff; }

#sec03 .inner {
	padding: 5% 0; }

#sec04 {
	margin-top: 10px;
	position: relative; }
#sec04 .inner {
	max-width: none;
	max-height: 1405px;
	background: url("/feature/the-sweets/rollcake/images/sec04_bg01.jpg") no-repeat right top / 50% auto; }
#sec04 .inner > span {
	display: block;
	padding-bottom: 87%;
	width: 100%; }
#sec04 .cont01 {
	width: 50%;
	padding: 0 10%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #fc8d7c; }
#sec04 .cont01 img {
	display: block;
	margin: 0 auto;
}
#sec04 .cont01 p {
	padding: 0 10% 5%;
	font-size: 21px;
	line-height: 2;
	color: #ffffff; }
#sec04 .cont02 {
	position: absolute;
	bottom: 0;
	left: 0;
	margin-bottom: 2%;
	width: 50%;
	padding: 0 13%; }
.sec04_item_wrap li {
	vertical-align: top; }
.sec04_item_wrap li + li {
	margin-top: 5%; }
.sec04_item_wrap li a {
	display: block;
	line-height: 1.6;
	text-align: center;
	padding-bottom: 4%; }
.sec04_item_wrap li a:hover {
	color: #000000;
	text-decoration: none;
	box-shadow: inset 0 0 0 1px #c9c9c9; }
.sec04_item_wrap li a h3 {
	padding: 0 4%;
	font-size: 18px;
	font-weight: bold; }
#sec04 .cont03 {
	position: absolute;
	top: 32%;
	right: 0;
	padding: 4% 3% 0 0; }
#sec04 .cont03 a {
	padding: 5%;
	background-color: rgba( 255, 255, 255, .5);
	position: relative;
	display: inline-block;
	font-weight: bold;
	line-height: 1.6; }
#sec04 .cont03 a:hover {
	color: #000000; }

#sec05 .inner {
	position: relative;
	text-align: center; }
#sec05 .inner > span {
	display: block;
	padding-bottom: 100rem;
	width: 100%;
	background: url("/feature/the-sweets/rollcake/images/sec05_bg01.jpg") no-repeat center bottom / cover;
	/*margin-bottom: 3%;*/  }

#sec05 .cont01 {
	width: 100%;
	position: absolute;
	padding-top: 3%;
	top: 0;
	left: 0; }

#sec05 .cont01 h2 {
    text-align: center;
    font-size: 3.6rem;
    font-weight: 600;
    margin: 20px 0 20px;
    color: #ffffff;
}
#sec05 .cont01 p {
	font-size: 18px;
	line-height: 2; 
	color: #ffffff;
}
#sec05 .cont01 .btn_wrap {
	margin-top: 2%; }

.sec05_item_wrap {
	padding-top: 3%;
	text-align: center; }
.sec05_item_wrap li {
	width: 25%;
	display: inline-block;
	vertical-align: top;
	margin: 0 5px;
	padding: 10px;
    background-color: white;
    min-height: 460px;}
.sec05_item_wrap li a {
	display: block;
	line-height: 1.6;
	text-align: center;
	padding-bottom: 8%; }
.sec05_item_wrap li a:hover {
	color: #000000;
	text-decoration: none; }
.sec05_item_wrap li a h3 {
	padding: 0 8%;
	margin-bottom: 5%;
	font-size: 18px;
	font-weight: bold; }
.sec05_item_wrap li a img {
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
		-ms-transition: all .3s ease;
		 -o-transition: all .3s ease;
			transition: all .3s ease; }
.sec05_item_wrap li a:hover img {
	-webkit-transform: translateY(-8%);
	   -moz-transform: translateY(-8%);
		-ms-transform: translateY(-8%);
		 -o-transform: translateY(-8%);
			transform: translateY(-8%); }

#sec05 .sec05_item_wrap li h3{
	font-size: 1.8rem;
    font-weight: 600;
    margin: 12px 0 8px;
}

#sec05 .sec05_item_wrap li p{
	font-size: 1.5rem;
    line-height: 1.5;
    text-align: left;
	color: #000;
}

#sec06 {
	overflow: hidden;
	background: url("/feature/the-sweets/rollcake/images/sec06_bg01.jpg") no-repeat center center / cover; }
#sec06 .inner {
	position: relative; }
#sec06 .inner > span {
	display: block;
	padding-top: 56%;
	width: 100%; }
#sec06 .cont01 {
	width: 100%;
	text-align: right;
	position: absolute;
	margin-top: 5.6%;
	top: 0;
	right: 45%;
	background-color: rgba(0 ,0 ,0 ,.5);
	padding: 4%; }
#sec06 .cont01 h2 {
	margin-bottom: 3%;
	display: inline-block;
	width: 19%; }
#sec06 .cont01 p {
	font-size: 20px;
	line-height: 2;
	color: #ffffff; }

#sec08 {
	overflow: hidden;
	background: url("/feature/the-sweets/rollcake/images/sec08_bg01.jpg") no-repeat center center / cover; }
#sec08 .inner {
	position: relative; }
#sec08 .inner > span {
	display: block;
	padding-top: 56%;
	width: 100%; }
#sec08 .cont01 {
	width: 100%;
	position: absolute;
	margin-top: 5.6%;
	top: 0;
	left: 42%;
	background-color: rgba(0 ,0 ,0 ,.5);
	padding: 4%; }
#sec08 .cont01 h2 {
	margin-bottom: 3%;
	display: inline-block;
	width: 22%; }
#sec08 .cont01 p {
	font-size: 20px;
	line-height: 2;
	color: #ffffff; }
#sec09 .inner h2{
    text-align: center;
    font-size: 3.6rem;
    font-weight: 600;
    margin: 40px 0;
    color: #4b4949;
}
#sec09 .inner p{
    text-align: center;
    margin: 10px auto 20px;
    /*width: 930px;*/
}
#sec09 .item_wrap2 li h3 span.type{
    font-size: 1.3rem;	
}

#sec09 .item_wrap2 li.new:before{
    content: "NEW";
    display: block;
    position: absolute;
    top: 18px;
    right: 10px;
    z-index: 5;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #4193e8;
    color: #fff;
    font-size: 2.3rem;
    line-height: 3.2;
    text-align: center;
    font-weight: 400;
}
#sec10 {
	overflow: hidden;
	background: url("/feature/the-sweets/rollcake/images/sec10_bg01.jpg") no-repeat center center / cover; }
#sec10 .inner {
	position: relative; }
#sec10 .inner > span {
	display: block;
	padding-top: 56%;
	width: 100%; }
#sec10 .cont01 {
	width: 100%;
	text-align: right;
	position: absolute;
	margin-top: 5.6%;
	top: 0;
	right: 43%;
	background-color: rgba(0 ,0 ,0 ,.5);
	padding: 3%; }
#sec10 .cont01 h2 {
    font-size: 4rem;
    line-height: 1.2;
    color: #ffffff;
	margin-bottom: 3%;
	display: inline-block;
	width: 60%;
}
#sec10 .cont01 h2 span{
    font-size: 3.5rem;
}
#sec10 .cont01 p {
	font-size: 20px;
	line-height: 2;
	color: #ffffff; }

/*#sec11{
	background-color: #f6f5f3;
}*/
#sec11 .item_wrap2 li{
	width: 30%;
}
#sec11 .item_wrap2 li h3 span.type{
	font-size: 1.3rem;
}
#sec11 .item_wrap2 li h3 span.limited{
	color: #ca4325;
}

#sec07 .inner,
#sec09 .inner,
#sec11 .inner {
	padding: 3% 0; }

#all_btn {
	margin: 0 auto;
	width: 60%;
	text-align: center;
	padding: 5% 0; }
.item_wrap {
	padding-bottom: 3%;
	text-align: center; }
.item_wrap li {
	width: 24%;
	margin: 0 2%;
	display: inline-block;
	vertical-align: top; }
.item_wrap li a {
	display: block;
	line-height: 1.6;
	text-align: center;
	padding-bottom: 8%; }
.item_wrap li a:hover {
	color: #000000;
	text-decoration: none;
	box-shadow: inset 0 0 0 1px #c9c9c9; }
.item_wrap li a h3 {
	padding: 0 8%;
	margin-bottom: 5%;
	font-size: 18px;
	text-align: left;
	font-weight: bold; }
.item_wrap li a p {
	font-size: 15px;
	text-align: left;
	padding: 0 8%; }
.item_wrap2 {
	text-align: center; }
.item_wrap2 li {
	position: relative;
	width: 25%;
	margin: 0 1.5%;
	display: inline-block;
	vertical-align: top; }
.item_wrap2 li a {
	display: block;
	line-height: 1.6;
	text-align: center;
	padding-bottom: 8%; }
.item_wrap2 li a:hover {
	color: #ff8a17;
	text-decoration: none;
	box-shadow: 0 0 0 1px #ff8a17; }
.item_wrap2 li a h3 {
	/*padding: 0 3%;*/
	font-size: 18px;
	font-weight: bold; }
.btn_wrap {
	margin-top: 2%;
	text-align: center; }
.btn {
	width: 19%;
	padding: 1.5% 1% 1.5% 0;
	display: inline-block;
	position: relative;
	z-index: 1;
	color: #ffffff;
	border: solid 1px #000000;
	font-size: 15px;
	text-align: center;
	color: #000000;
	font-weight: bold; }
.btn:before {
	content: "";
	font-family: icoset;
	font-size: 1.8rem;
	line-height: 1;
	margin-top: -9px;
	right: 4%;
	top: 50%;
	z-index: 2;
	position: absolute; }
.btn:hover {
	color: #ffffff;
	text-decoration: none; }
.btn:after {
	content: "";
	width: 0;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	z-index: -1;
	background-color: #fc8d7c;
	transition: all 0.2s ease-in 0.1s; }
.btn:hover:after {
	width: 100%; }

@media (max-width: 1599px) {

#sec04 .cont01 p {
	font-size: 16px; }
.sec04_item_wrap li a h3 {
	font-size: 15px; }
}
@media (max-width: 1299px) {

#sec01 .cont h2 {
	padding: 6% 0 0 7%; }
#sec01 .cont p {
	font-size: 2rem; }
#sec02 .inner p {
	font-size: 14px; }
#sec04 .inner {
	background-size: 60% auto; }
#sec04 .inner > span {
	padding-bottom: 105%; }
#sec04 .cont01 {
	width: 40%;
	left: 0;
	padding: 0 3%; }
#sec04 .cont01 p {
	font-size: 16px; }
#sec04 .cont02 {
    left: 8%;
    width: 25%;
    padding: 0;
    margin-bottom: 7%; }
.sec04_item_wrap li a h3 {
	font-size: 13px; }
/*#sec05 .inner > span {
	padding-bottom: 3%; }*/
.sec05_item_wrap li {
	width: 27%; }
.sec05_item_wrap li a h3 {
	font-size: 13px; }
#sec04 .cont03 a {
	font-size: 13px; }

.item_wrap li,
.item_wrap2 li {
	width: 25%; }
.item_wrap li a h3,
.item_wrap2 li a h3 {
	font-size: 16px; }
.item_wrap li a p {
	font-size: 12px; }
.btn {
	width: 27%;
	padding: 2% 1% 2% 0;
	font-size: 13px; }

#sec06 .cont01 p,
#sec08 .cont01 p,
#sec10 .cont01 p {
	font-size: 15px; }
}

/*soldout*/
.end *, .end a,
.soldout > a{
    pointer-events: none;
}
.soldout {
  position: relative;
}
.soldout::before{
  display: block;
  content: "SOLD OUT";
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: 1;
  align-content:center;
  height: 100%;
  width: 100%;
  background-color:#00000080;
  color: #FFF;
  text-align: center;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 40px;
}

.lineup_logo{
    width: 11%;
    display: block;
    margin: auto;
    line-height: 2.3;
}

.brand_logo{
	width: 1000px;
    margin: auto;
    margin-top: 50px;
    border: 1px solid #333;
    padding: 20px;
	box-sizing: content-box;
}

#brand_lineup_area{
	background-color: #e7e7e7;
    padding: 60px 0;
}

.lineup_title{
    width: 60%;
    margin: 0 auto 30px;
}


.lineup_outer{
max-width: 1000px;
    width: 100%;
    margin: auto;
}

.lineup_outer .pic_lineup_title{
    width: 60%;
	margin: 0 auto 30px;}

.lineup_inner{
	 display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
  	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.lineup_inner .lineup_item{
	width: 30%;
	margin-bottom: 30px;
	height: 100%;
}

.lineup_inner .lineup_item:nth-last-of-type(-n+3){
margin-bottom: 0;

}


.lineup_inner .lineup_item a:hover{
	color: #ff8a17;
	text-decoration: none;
	box-shadow: inset 0 0 0 1px #ff8a17; }

.lineup_inner .lineup_item p{
text-align: center;
margin-top: 10px;
padding-bottom: 10px;
}

.lineup_inner .lineup_item a{
display: block;
}


.button {
  width: 100%;
  max-width: 450px;
  margin: 45px auto 0;
}
.button a {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 1em 0;
  width: 100%;
  color: #fff;
  background-color: #333;
  transition: .3s;
  box-shadow: rgba(0, 0, 0, .15) 1.95px 1.95px 2.6px
}
.button a:after {
  content: '';
  margin-left: 5px;
  width: 5px;
  height: 5px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(45deg)
}
.button a:hover {
  text-decoration: none;
  background-color: #bbb
}


/* ========================================

	#shop

 ======================================== */
#shop{
	padding: 60px 0;
	background-color: #f7f7f7;
}
/*
	h2
================================ */
#shop h2{
    color: #333;
	text-align: center;
}

/*
	.inner
================================ */
#shop .inner{
    max-width: 1000px;
    width: 100%;
}
#shop .inner::after{
  content:"";
  display: block;
  width:32%;
}
#shop .inner .item_shop{
	margin: 0 auto 30px;
    align-items: center;
}
/*
	.inner.flex
================================ */
#shop .inner.flex{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
#shop .inner.flex::after {
    display: none;
}
#shop .inner.flex .item_shop {
	margin: 60px 0 30px;
}
/* 2店舗以上の時 -------------------- */
#shop .inner.flex.flexs{
    justify-content: space-between;
}
#shop .inner.flex.flexs::after{
    content:"";
    display: block;
    width:32%;
}
/*
	figure
================================ */
#shop figure figcaption{
	margin:10px 10px 0;
	font-size: 14px;
	font-weight: bold;
}
/*
	.item_shop
================================ */
#shop .item_shop{
	background-color: #fff;
    display: flex;
    justify-content: space-around;
}
/* .detail -------------------- */
#shop .detail{
	padding: 20px;
}
/* p ------------ */
#shop .detail .name{
	margin-bottom: 5px;
	font-size: 2.4rem;
}
#shop .detail p{
	font-size: 14px;
}
/* .map_btn ----- */
#shop .detail .map_btn{
	margin: 10px 0;
}
#shop .detail .map_btn a{
	padding: 2px 14px;
	color: #fff;
	text-align: center;
	line-height: 1;
	background-color: #5697ef;
	border: 1px solid #5697ef;
	border-radius: 50px;
	transition: all .3s;
}
#shop .detail .map_btn a:hover{
	color: #5697ef;
	background-color: #fff;
}
/* .time ----- */
#shop .detail .time span{
	display: inline-block;
}
/* .popup ----- */
#shop .detail .popup{
	display: inline-block;
	margin: 10px 0 0;
	padding: 4px 14px;
	color: #fff;
	text-align: center;
	line-height: 1;
	background-color: #be9c5c;
	border-radius: 50px;
}
/*
	横2列の時
================================ */
#shop .inner.flex .item_shop{
	width: 32%;
	display: block;
    justify-content: normal;
}


/*anker_area*/
 .anker_area{
     position: absolute;
    background-color: #000;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 20px 10px;
     z-index: 90;
     font-family: 'Sawarabi Gothic', sans-serif;
}

 .anker_area .logo{
display: flex;
align-items: center;
padding-left: 60px;
}

 .anker_area .logo img{
     /*width: 40%*/
}

 .anker_area ul{
width:20%;
display: flex;
justify-content: space-around;
margin: 0 2% 0 0;
}


 .anker_area ul li a{
color: #fff; 
}

.anker_area.fixed {
    position: fixed;
    top: 0;
    z-index: 100;
}



.brand_area_inner .about_logo{
background-color: #fff;
    padding: 15px;
    width: 100%;
    max-width: 1000px;
    margin: auto;
    border: 1px solid #333;
    text-align: left;
}

.brand_area_inner .about_logo h3{
font-size: 1.8rem;
margin-bottom: 15px;
width: 100%;
}

.brand_area_inner .about_logo p{
width: 100%!important;
}

.salad{
    margin: auto;
    padding: 30px;
    text-align: center;
}

.salad p{
    text-align: left;
    display: inline-block;
}


.block_outer{
    margin: 0 auto 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.block_outer .brand_logo_top{
    margin: 0 auto 45px;
}


.block_outer .block .block_inner{
    margin-bottom: 30px;
}

.block_outer .block .block_inner:last-child{
    margin-bottom: 0;
}

.block_outer .block .block_inner .pic{
margin: auto;
width:40%;
}
    
/*infomation_area*/
.infomation_area{
    background-color:#000;
    color: #fff;
    padding: 60px 3%;
    text-align: left;
}

.infomation_area dl{
	padding: 5px 0;
	text-align: left;
}
.infomation_area dl + dl{
	border-top: 1px #fff dotted;
}

.infomation_area a{
color: #fff;
}
.infomation_area a:hover{
	color: #ff8a17;
}
.infomation_area .inner{
    text-align: center;
    max-width: 1000px;
    width: 100%;
    margin: auto;
}



.the-sweets  h2{
    font-size: 2.4rem!important;
    margin-bottom: 45px!important;
    text-align: center
}

.the-sweets h2 span{
display: block;
font-size: 1.2rem;
}