@charset "UTF-8";
/* CSS Document */
@media screen and (max-width: 1024px) {
  .pc {
    display: none;
  }
}

/*共通*/
.spt80{
    margin-top: 80px!important;	
}
.spt100{
    margin-top: 100px!important;	
}
.bgred{
    background-color: #963535;	
}
.bgbrown{
    background-color: #786758;	
}
.bgnavy{
    background-color: #586078;		
}

/*ボタン*/
a.cp_btn {
  position: relative;
  display: block;
  width: 160px;
  padding: 0.8em;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: #c88632;
  border: 1px solid #fff;
  overflow: hidden;
margin:  3rem auto 2rem;
}
a.cp_btn:before {
  content: "";
  position: absolute;
  top: 0px;
  left: -150px;
  height: 100%;
  width: 160px;
  background: #fff;
  opacity: 0.3;
  transition: .4s;
}

a.cp_btn:hover{
color: #fff;
}

a.cp_btn:hover:before {
  left: 0;
}

#container a {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
  color: inherit;
}

.caramelsand {
  line-height: 1.5;
  font-size: 1.8rem;
  font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
}
.main_image_area {
  background-image: url("/feature/the-sweets/caramelsand/images/bg_main.png");
  background-size: cover;
  background-position: center center;
  position: relative;
  /*height: 700px;*/
  width: 100%;
  /*z-index: 200;*/
  z-index: 0;
  padding-top: 55%;
}

.main_image_area:before{
  content: '';
  position: absolute;
  /*background-image: url(/feature/the-sweets/caramelsand/images/fig_no1logo.png);*/
  background-image: url(/feature/the-sweets/caramelsand/images/fig_19M.svg);
  top: 30px;
  right: 200px;
  width: 150px;
  height: 150px;
  background-repeat: no-repeat;
  -webkit-background-size: 100% 100%;
  background-size: 100%;
}

.main_image_area .m-btn{
    width: 100%;
    position: absolute;
    top: 60%;
    left: 50%;
    text-align: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}




.caramel_logo {
  position: absolute;
  top: 5%;
  left: 5%;
}
.sub_title {
  color: #fff;
  font-size: 3rem;
  margin-bottom: 1.5rem;
}
.text {
  padding: 0 5rem 5rem;
  color: #ffffff;
  font-size: 1.6rem;
  line-height: 1.8;
  text-align: justify;
}
.top_text_area {
  min-height: 300px;
  border-bottom-right-radius: 2000px 300px;
  border-bottom-left-radius: 2000px 300px;
  margin-top: -300px;
  margin-left: -200px;
  margin-right: -200px;
  position: relative;
  /*z-index: 100;*/
  z-index: -1;
  background-color: #806B5C;
 /* height: 50vh;*/
  height: 550px;
	
	
}
.top_text_area .sub_title {
  font-size: 3.5rem;
}
.top_text_area .text {
  width: 980px;
  text-align: center;
  margin: auto;
  margin-top: 270px;
  font-size: 2rem;
}

@media screen and (max-width: 1024px) {
  .top_text_area .text p {
text-align: justify;}
}

.bg-brown {
  background-color: #b79c86;
  min-height: 300px;
  border-bottom-right-radius: 2000px 300px;
  border-bottom-left-radius: 2000px 300px;
  margin-left: -200px;
  margin-right: -200px;
  padding-left: 200px;
  padding-right: 200px;
  padding-top: 150px;
  padding-bottom: 150px;
}
.main_area {
  position: relative;
  /*z-index: 50;*/
  z-index: -2;
  margin-top: -10rem;
}


.flex {
  display: flex;
}
.flex_1 {
  width: 48%;
  order: 1;
  margin: auto;
}
.flex_2 {
  width: 48%;
  order: 2;
  margin: auto;
}
.product .image {
  margin-bottom: 30px;
}

@media screen and (max-width: 1199px) and (min-width: 0px){
.main_content .flex_2 img {
	width: auto;
 }
}
 .image .wow .fadeIn .flex_2{
  text-align: center;
	}


.lineup {
  background-color: #f3f3f3;
  padding-top: 6rem;
  padding-bottom: 3rem;
  margin-top: -1rem;
  position: relative;
  z-index: 30;
}
.main_content {
  width: 1200px;
  margin: auto;
  padding-top: 5rem;
}
@media screen and (max-width: 1024px) {
  .main_content {
    width: 100%;
  }
}
.main_content .image {
  text-align: center;
}
.main_content .text {
  padding: 0px 5rem;
  font-size: 1.8rem;
}

/*ラインナップ*/
.caramelsand .m-brand.is-caramelsand{
  margin-top: -100px;
  padding-top: 100px;
}

.caramelsand .m-brand{
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding-bottom: 160px;
}

/*.caramelsand .m-brand.is-caramelsand::before{
  width: 500px;
  height: 653px;
  background: url(/feature/the-sweets/caramelsand/images/bg_caramelsand_right.png) center/cover no-repeat;
  margin-top: 120px;
}*/

.caramelsand .m-brand::after, .caramelsand .m-brand::before{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 75%;
  content: '';
}

.caramelsand .m-brandInner{
  max-width: 950px;
  margin: 0 auto;
}

.caramelsand .m-brandIntro{
  margin: 100px 0 40px;
}
.caramelsand .m-brandIntro .sub_title{
  color: #333;
  text-align: center;
  font-size: 3rem;
  margin-bottom: 1.5rem;
  line-height: 0.8;
}
.caramelsand .m-brandIntro .sub_title span{
  font-size: 1.6rem;
}

.caramelsand .m-brandLogo{
  max-width: 250px;
  margin: 0 auto;
}

.caramelsand .m-brandTxt{
 font-size: 24px;
 font-size: 1.5rem;
 text-align: center;
 line-height: 1.8;
 margin-top: 30px;	
}

/*.caramelsand .m-chocoSection{
 z-index: 2;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: justify;
 -webkit-justify-content: space-between;
 -ms-flex-pack: justify;
 justify-content: space-between;	
}*/

/*.caramelsand .m-chocoItem.is-caramelsand{
 -webkit-flex-basis: 800px;
 -ms-flex-preferred-size: 800px; 
 flex-basis: 800px;
 margin-top: 150px;
}*/

/*.caramelsand .m-itemsLead.is-caramelsand{
 background-color: #786758;
}*/

.caramelsand .m-itemsLead{
 font-size: 22px;
 font-size: 1.5rem;
 padding: 15px 0;
 text-align: center;
 color: #fff;	
}
.caramelsand .m-itemsLead.title{
 padding: 15px 0 0;
 font-size: 2.6rem;
 margin-bottom: -10px;
}


/*.caramelsand .m-itemsList.is-caramelsand{
 max-width: 800px;
}*/

.caramelsand .m-itemsList{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #e8ded5;
    padding-bottom: 30px;
}

.soldout a {
	position: relative;
	pointer-events: none
}
/*.soldout a:before {
	position: absolute;
	top: 30%!important;
	right: auto!important;
	left: 10%!important;
	z-index: 5;
	display: block;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 80%;
	height: 40px;
	padding: 8px 5px 0;
	color: #fff;
	font-weight: 700;
	font-size: 2rem;
	font-family: Noto Serif JP, serif;
	line-height: 1;
	text-align: center;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	content: "sold out"
}
.soldout a img {
	opacity: .5
}
.soldout a:before {
	top: 50%!important;
	left: 50%!important;
	z-index: 5;
	width: 20pc;
	height: auto;
	padding: 2rem;
	font-size: 4.6rem;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}*/

.soldout a .m-itemsPic {
  position: relative;
}
.soldout a .m-itemsPic::before {
  content: "sold out";
  display: block;
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  color: #fff;
  font-family: Noto Serif JP, serif;
	line-height: 1;
  font-size: 2rem;
  font-weight: bold;
  white-space: nowrap;
}
.soldout a .m-itemsPic::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  background-color:rgba(0,0,0,0.5);
}


.caramelsand .m-itemsList.is-caramelsand>li a{
 display: block;
 padding: 0 15px 30px;
 transition: all 0.3s ease 0s;
}

.caramelsand .m-itemsPic{
 overflow: hidden;
 -webkit-box-ordinal-group: 2;
 -webkit-order: 1;
 -ms-flex-order: 1;
 order: 1;
 margin-top: 30px;
}

.caramelsand .m-itemsPic img{
 -webkit-transition: all .5s;
 transition: all .5s;
}

.caramelsand .m-itemsName{
 font-size: 20px;
 font-size: 1.5rem;
 min-height: 3em;
 margin-top: 10px;
 -webkit-box-ordinal-group: 3;
 -webkit-order: 2;
 -ms-flex-order: 2;
 order: 2;	
}

.is-caramelsand .ico-delivery{
    background: #A71111;
    color: #FFF;
    display: inline-block;
    padding: 1px 15px;
    font-size: 1.4rem;
    margin: 2px 5px;	
}

.caramelsand .m-itemsName, .caramelsand .m-itemsPrice, .caramelsand .m-itemsTxt{
 margin-right: 8px;
 margin-left: 8px;	
}
.caramelsand .m-itemsPrice.is-hanbai{
 font-size: 19px;
 font-size: 1.5rem;
 font-weight: 700;
}

.caramelsand .m-itemsPrice{
 -webkit-box-ordinal-group: 4;
 -webkit-order: 3;
 -ms-flex-order: 3;
 order: 3;
}

.caramelsand .m-itemsPrice.is-hanbai:before{
 font-weight: 400;
 content: '販売価格：';	
}

.caramelsand .m-itemsPrice:after{
 font-weight: 400;
 content: '（税込）';
}

.caramelsand .m-itemsPrice.is-normalM{
 font-size: 17px;
 font-size: 1.1rem;
}

.caramelsand .m-itemsPrice{
 -webkit-box-ordinal-group: 4;
 -webkit-order: 3;
 -ms-flex-order: 3;
 order: 3;	
}

.caramelsand .m-itemsPrice.is-normalM:before{
 content: '価格(M)：';	
}

.caramelsand .m-itemsPrice:after{
 font-weight: 400;
 content: '（税込）';	
}

.caramelsand .m-itemsTxt{
 font-size: 17px;
 font-size: 1.1rem;
 margin-top: 10px;
 -webkit-box-ordinal-group: 5;
 -webkit-order: 4;
 -ms-flex-order: 4;
 order: 4;
}

.m-btn{
    line-height: 1.1;
    text-align: center;
    max-width: 80%;
    margin: 30px auto 0;
}

.m-btn.m-btnBuy span, .m-btn>span{
 display: block;	
}
.m-itemsPic img:hover, .m-btn span:hover{
	opacity: 0.6;
	transition: 0.8s;
}

.m-btn>span{
 font-size: 22px;
 font-size: 1.4rem;
 position: relative;
 width: 100%;
 max-width: 350px;
 margin: 0 auto;
 padding: 14px 10px;
}

.m-btn a, .m-btn>span{
 text-decoration: none!important;
 background: #714b1c;
 color: #fff;
 text-align: center;	
 border-radius: 10px;
 font-size: 1.7rem;
}

.m-btn>span:before{
 position: absolute;
 right: 20px;
 margin-top: -8px;
 opacity: 0;
 color: #fff;
 -webkit-font-feature-settings: normal;
 font-feature-settings: normal;	
}

.m-btn_none>span{
    background: #B1B1B1;
}
.m-btn span:after{
 position: absolute;
 top: 2px;
 left: 2px;
 width: -webkit-calc(100% - 6px);
 width: calc(100% - 6px);
 height: -webkit-calc(100% - 6px);
 height: calc(100% - 6px);
 content: '';
 border: 1px solid #fff;
 border-radius: 10px;
}

.caramelsand .m-itemsList>li.soldout::after{
 z-index: 1;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,.2);	
}

.caramelsand .m-itemsList.is-caramelsand>li{
 -webkit-flex-basis: 190px;
 -ms-flex-preferred-size: 190px;
 flex-basis: 190px;	
}

.caramelsand .m-itemsList.is-caramelsand>li.nolink{
	padding: 0 15px 30px;
}

.caramelsand .m-itemsList>li{
 position: relative;	
}

/*.caramelsand .m-brand.is-caramelsand::after{
 width: 380px;
 height: 295px;
 -webkit-transform: translateX(-860px);
 -ms-transform: translateX(-860px);
 transform: translateX(-860px);
 background: url(/feature/the-sweets/caramelsand/images/bg_caramel_left.png) center/cover no-repeat;
}*/

.caramelsand .m-brand::after{
 top: 550px;
 left: 56%;
}

/*女性がもらって嬉しい手土産WARD*/
.caramelsand .Popular{
 background: url(/feature/the-sweets/caramelsand/images/bg_no1.jpg) center/cover no-repeat;	
 /*height: 1700px;*/
 border-bottom-right-radius: 2000px 300px;
 border-bottom-left-radius: 2000px 300px;
 margin-top: -70px;
 position: relative;
 z-index: -3;
}

.caramelsand .Popular .no1title{
	text-align: center;
	display: flex;
	padding-top: 150px;
	margin-bottom: 650px;
	justify-content: center;
}
.caramelsand .Popular .no1title .swingpop{
	display: flex;
	flex-wrap: wrap;
	/* max-width: 750px; */
	width: 300px;
	/* margin: 0 auto; */
}
.caramelsand .Popular .no1title .swingpop li{
	width: 49%;
}
.caramelsand .Popular .no1title .swingpop li:first-of-type{
	margin-right: 2%;
}
.caramelsand .Popular .no1text{
	width: 40%;
}

.caramelsand .Popular .secret h2{
    text-align: center;
    font-size: 1.8em;
    color: white;
    font-weight: normal;
    line-height: 0.8;
}

.caramelsand .Popular .secret h2 span{
	font-size: 1.6rem;
}

.caramelsand .voice h2{
    text-align: center;
    font-size: 1.8em;
    /*color: white;*/
    font-weight: normal;
	line-height: 0.8;
    margin-top: 10px;
}

.caramelsand .voice h2 span{
	font-size: 1.6rem;
}

.caramelsand .Popular .secret{
    text-align: center;
    padding-bottom: 50px;
}

.caramelsand .Popular .secret .secretimg{
	width: 70%;
}

@media screen and (max-width: 1199px) and (min-width: 0px){
.no1logo {
    width: auto;
    max-width: none;
    height: auto;
    vertical-align: top;
  }
}



/*シーン*/
.scene {
  background-color: #ffffff;
  /*padding-top: 15rem;*/
  padding-bottom: 15rem;
  position: relative;
  z-index: 30;
}
.item_scene {
  background-color: #ffffff;
  margin: 3rem;
  padding: 1rem;
  text-align: center;
  width: 33%;
}
.inner_scene {
  width: 1200px;
  margin: auto;
}
@media screen and (max-width: 1024px) {
  .inner_scene {
    width: 100%;
    margin: auto;
  }
}
.item_scene .image {
  margin-bottom: 3rem;
}
.item_scene .text {
  color: #333;
  text-align: center;
  font-size: 2rem;
  padding: 0 1rem;
}
@media screen and (max-width: 1024px) {
  .item_scene .text {
    text-align: left;
    font-size: 1.6rem;
  }
}
.scene .sub_title {
  text-align: center;
  color: #333;
  line-height: 0.8;
}
.scene .sub_title span {
  font-size: 1.6rem;
}

/*ご購入者の声*/

.caramelsand .voice{
    background-color: #b79c86;
    padding: 60px;	
	border-bottom-right-radius: 2000px 300px;
    border-bottom-left-radius: 2000px 300px;
}

.caramelsand .voice h2{
    text-align: center;
    font-size: 1.8em;
    color: white;
    font-weight: normal;
	line-height: 0.8;
}

.caramelsand .voice h2 span{
	font-size: 1.6rem;
}

.caramelsand .voice h3 span{
	background: linear-gradient(transparent 50%, #f5ee1038 50%);
}

.caramelsand .voice .voiceboxframe img{
	display: block;
    margin: 0 auto;
}

.caramelsand .voice .Outerframe{
    max-width: 1000px;
    margin: 50px auto 60px;
    position: relative;
    background-image: -webkit-repeating-linear-gradient(135deg, #f8fbfc, #f8fbfc 8px, #483a07 0, #483a07 16px);
    background-image: repeating-linear-gradient(-45deg, #f9f6f3, #f9f6f3 8px, #483a07 0, #483a07 16px);
    padding: 30px;
}

.caramelsand .voice .Outerframe:before{
	content: '';
    position: absolute;
    top: -60px;
    right: -230px;
    width: 408px;
    height: 487px;
    background-image: url(/feature/the-sweets/caramelsand/images/fig_deco_pick.png);
    background-repeat: no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100%;
}

.caramelsand .voice .Outerframebox{
	background-color: #f9f6f3;
    padding: 10px;
}

.caramelsand .voice .voicebox{
    margin: 0 auto;
    padding: 30px 30px;
    min-width: 120px;
    max-width: 75%;
    /*border: solid 1px #000000;*/
    box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.4);
	margin-top: 30px;
	background-color: #ffffff;
}

.caramelsand .voice .voicebox h3{
	border-bottom: dashed 1px #000000;
	padding-bottom: 10px;
}

.caramelsand .voice .voicebox p{
	padding-top: 10px;
	
}




/*.caramelsand .voice .balloon1-left{
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 500px;
  padding: 30px 30px;
  min-width: 120px;
  max-width: 40%;
  color: #555;
  font-size: 16px;
  background: #e0edff;
}

.caramelsand .voice .balloon1-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #e0edff;
}

.caramelsand .voice .balloon1-left p {
  margin: 0;
  padding: 0;
}

.caramelsand .voice .balloon1-right {
  position: relative;
  display: inline-block;
  margin: 1.5em 15px 1.5em 400px;
  padding: 30px 30px;
  min-width: 120px;
  max-width: 40%;
  color: #555;
  font-size: 16px;
  background: #e0edff;
}

.caramelsand .voice .balloon1-right:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #e0edff;
}

.caramelsand .voice .balloon1-right p {
  margin: 0;
  padding: 0;
}
*/

/*ラインナップ*/
.item_lineup {
  background-color: #ffffff;
  margin: 3rem;
  text-align: center;
  width: 33%;
}
.inner_lineup {
  width: 1200px;
  margin: auto;
}
@media screen and (max-width: 1024px) {
  .inner_lineup {
    width: 100%;
    margin: auto;
  }
}

.lineup .sub_title {
  text-align: center;
  color: #333;
  line-height: 0.8;
}
.lineup .sub_title span {
  font-size: 1.6rem;
}


#brand_lineup_area{
	background-color: #e7e7e7;
}

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

.lineup_outer{
width: 1000px;
    margin: auto;
    padding: 50px 0;
}

.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-of-type(n+4){
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;
font-size: 14px;
}

.lineup_inner .lineup_item a{
display: block;
}



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

	221117 追加

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

	.btn_list

 ======================================== */
.main_image_area .btn_list{
	width: 100%;
	max-width: 800px;
    position: absolute;
    top: 70%;
    left: 50%;
    text-align: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
/*
	li
================================ */
.main_image_area .btn_list li{
	width: 49%;
	max-width: 350px;
	margin: 30px auto 0;
	text-align: center;
	line-height: 1.1;
}
/* span -------------------- */
.main_image_area .btn_list li span{
	display: block;
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 14px 10px;
	color: #fff;
	font-size: 1.7rem;
	text-align: center;	
	text-decoration: none!important;
	background: #714b1c;
	border-radius: 10px;
}
/* hover ------------ */
.main_image_area .btn_list li span:hover{
	opacity: 0.6;
	transition: 0.8s;
}
/* before ------------ */
.main_image_area .btn_list li span:before{
	position: absolute;
	right: 20px;
	margin-top: -8px;
	opacity: 0;
	color: #fff;
	-webkit-font-feature-settings: normal;
	font-feature-settings: normal;	
}
/* after ------------ */
.main_image_area .btn_list li span:after{
	position: absolute;
	top: 2px;
	left: 2px;
	width: -webkit-calc(100% - 6px);
	width: calc(100% - 6px);
	height: -webkit-calc(100% - 6px);
	height: calc(100% - 6px);
	content: '';
	border: 1px solid #fff;
	border-radius: 10px;
}
/* ========================================

	#popup

 ======================================== */
#popup{
	padding: 60px 0;
	background-color: #f4d39b;
}
/*
	h2
================================ */
#popup h2{
	margin: 0 auto 2rem;
    color: #333;
	font-size: 3rem;
	text-align: center;
    line-height: 0.8;
}
#popup h2 span{
	font-size: 1.6rem;
}
#popup h2 + p{
	text-align: center;
}
/*
	.inner
================================ */
#popup .inner{
	width: 1200px;
    margin: 60px auto 0;
	/*justify-content: space-between;
	flex-wrap: wrap;*/
}
/*#popup .inner::after{
  content:"";
  display: block;
  width:32%;
}*/
#popup .inner .item_shop{
	width: 32%;
	margin: 0 auto;
}
/*
	figure
================================ */
#popup figure figcaption{
	margin:10px 10px 0;
	font-size: 14px;
	font-weight: bold;
}
/*
	.item_shop
================================ */
#popup .item_shop{
	background-color: #fff;
}
/* .detail -------------------- */
#popup .detail{
	padding: 20px;
}
/* p ------------ */
#popup .detail p{
	font-size: 14px;
}
/* .map_btn ----- */
#popup .detail .map_btn{
	margin: 10px 0;
}
#popup .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;
}
#popup .detail .map_btn a:hover{
	color: #5697ef;
	background-color: #fff;
}
/* .time ----- */
#popup .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;
}


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

	.Popular.coffee
	.Popular.starbucks

 ======================================== */
/*
	.coffee
================================ */
.caramelsand .Popular.coffee{
	background: url(/feature/the-sweets/caramelsand/images/coffee/coffee_bg.jpg) center/cover no-repeat;
}
/*
	.starbucks
================================ */
.caramelsand .Popular.starbucks{
	position: relative;
	background: url(/feature/the-sweets/caramelsand/images/starbucks/starbucks_bg.jpg) center/cover no-repeat;
}
/* figure -------------------- */
.caramelsand .Popular.starbucks figure{
	position: absolute;
	width: 50%;
	max-width: 250px;
    top: 170px;
    right: 80px;
}
/* .txt_box -------------------- */
.caramelsand .Popular.starbucks .txt_box{
	position: absolute;
    bottom: 48%;
    right: 8%;
	color: #fff;
}
/* h3 ------------ */
.caramelsand .Popular.starbucks .txt_box h3{
	margin-bottom: 5px;
	font-size: 2.2rem;
	font-weight: bold;
}
/*
	common
================================ */
.caramelsand .Popular.coffee,
.caramelsand .Popular.starbucks{
	padding-top: 60px;
	height: 1000px;
	background-position-y: 6%;
}
/*
	h2
================================ */
.caramelsand .Popular.coffee .flavor_ttl,
.caramelsand .Popular.starbucks .flavor_ttl{
	text-align: center;
	font-size: 2em;
	color: white;
	font-weight: bold;
	line-height: 1.6;
	text-shadow: 0 0 10px rgb(0 0 0 / 40%), 0 0 10px rgb(0 0 0 / 40%), 0 0 10px rgb(0 0 0 / 40%);
}
.caramelsand .Popular.coffee .flavor_ttl span,
.caramelsand .Popular.starbucks .flavor_ttl span{
	display: block;
}



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

	.m-brand.is-coffee
	.caramelsand .m-brand.is-starbucks

 ======================================== */
.caramelsand .m-brand.is-coffee,
.caramelsand .m-brand.is-starbucks{
	padding-top: 100px;
}



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

	.m-brand.is-starbucks

 ======================================== */
/*.caramelsand .m-brand.is-starbucks{
	padding-bottom: 50px;
}*/



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

	.m-brand.is-coffee

 ======================================== */
.caramelsand .m-brand.is-coffee{
	padding-bottom: 50px;
}



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

	.all_product

 ======================================== */
#wrapper .all_product{
	max-width: 450px;
	margin: 30px auto 0;
	padding: 0 0 200px;
	line-height: 1.1;
    text-align: center;
	border-radius: 10px;
}
#wrapper .all_product a{
	display: block;
	padding: 14px 10px;
	color: #fff;
	background-color: #714b1c;
	border-radius: 10px;
}
#wrapper .all_product a:hover{
	opacity: 0.6;
    transition: 0.8s;
}
/*#wrapper .all_product p span{
	display: block;
	position: relative;
}
#wrapper .all_product p span:after {
    position: absolute;
    top: 2px;
    left: 2px;
    width: -webkit-calc(100% - 6px);
    width: calc(100% - 6px);
    height: -webkit-calc(100% - 6px);
    height: calc(100% - 6px);
    content: '';
    border: 1px solid #fff;
    border-radius: 10px;
}*/

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

	#shop

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

/*
	.inner
================================ */
#shop .inner{
    max-width: 1000px;
    width: 100%;
    margin: auto;
	justify-content: space-between;
	flex-wrap: wrap;
}
#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: inherit;
	justify-content: center;
	flex-wrap: wrap;
}
/* 2店舗以上の時 -------------------- */
#shop .inner.flex.flexs{
    display: flex;
    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;
}
#shop h2{
    text-align: center;
    color: #333;
    line-height: 1;
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

#shop h2 span{
font-size: 1.8rem;
display: block;
}

/*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;
}

/*
	横2列の時
================================ */
#shop .inner.flex .item_shop{
	width: 32%;
	margin: 0 0 30px;
	display: block;
    justify-content: normal;
}


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

.button{
        max-width: 450px;
    margin: 45px auto 0;
    padding: 0;
    line-height: 1.1;
    text-align: center;
    border-radius: 10px;
}

.button a{
        display: block;
    padding: 14px 10px;
    color: #fff;
    background-color: #714b1c;
    border-radius: 10px;
}