/* CSS Document */

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

	common

 ================================================== */
 #container{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-size: 16px;
	letter-spacing: 0.05rem !important;
	line-height: 1.8;
}
/*
	section, div
================================ */
#container section{
	padding: 80px 0;
}
/* .sec_inner -------------------- */
#container .sec_inner{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}
/*
	h2
================================ */
#container section h2{
	font-size: 30px;
	font-weight: bold;
	text-align: center;
}
/*
	p
================================ */
/* .catch -------------------- */
#container section .catch{
	margin: 20px auto 0;
	text-align: center;
}
#container section a.red_link{
	transition: all .3s;
}
#container section a.red_link:hover{
	opacity: .5;
	text-decoration: none !important;
}
/*
	link
================================ */
#container #flow_area a.red_link,
#container #flow_area .attention a.red_link,
#container #flow_area .step_inner a.red_link,
#container #flow_area .notes a.red_link,
#container #qa_area dd a.red_link{
	color: #c83150;
	text-decoration: underline !important;
}
#container #flow_area a.red_link:hover,
#container #flow_area .attention a.red_link:hover,
#container #flow_area .step_inner a.red_link:hover,
#container #flow_area .notes a.red_link:hover,
#container #qa_area dd a.red_link:hover{
	text-decoration: none !important;
}



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

	#main_visual

 ================================================== */
#container #main_visual{
	margin: 0 auto;
	padding: 0;
}



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

	#point_area

 ================================================== */
/*
	.img_box
================================ */
#container #point_area .img_box{
	margin: 30px auto;
	text-align: center;
}
/*
	.point_box
================================ */
#container #point_area .point_box{
	margin: 0 auto;
}
/* h3 -------------------- */
#container #point_area .point_box h3{
	margin: 0 auto;
	font-size: 20px;
	text-align: center;
}
#container #point_area .point_box p{
	text-align: center;
}
/*
	.point_list
================================ */
#container #point_area .point_list{
	margin: 30px auto;
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
  	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
}
#container #point_area .point_list li{
	width: 49%;
	background-color:#eeece1;
}
/* dl -------------------- */
#container #point_area .point_list li dl{
	padding: 10px;
}
/* dt -------------------- */
#container #point_area .point_list li dt{
	position: relative;
	margin: 0 auto;
	text-align: center;
}
/* p */
#container #point_area .point_list li dt .img_box{
	width: 100%;
	max-width: 200px;
}
#container #point_area .point_list li dt .point_img{
	position: absolute;
	width: 100%;
	max-width: 100px;
	top: -40px;
	left: 20px;
}
/* dd -------------------- */
#container #point_area .point_list li dd{
	padding: 10px;
	text-align: center;
}
/*
	.notes
================================ */
#container #point_area .notes{
	margin: 30px auto;
	padding: 10px;
	font-size: 14px;
	border: 1px solid #000;
}

#container #point_area .attention{
	text-align:center;
	font-weight:bold;
	font-size:1.3rem;
	margin-top:5px;
}


/*-------------------------------------

coupon-area

-------------------------------------*/
#container .coupon-area{
    text-align:center;
    padding: 0 0 80px;
}

#container .coupon-area .date {
    text-align: center;
    margin: 20px auto;
    padding: 10px 0;
}

#container .coupon-area .date span {
    font-weight:bold;
    display:block;
}

#container .coupon-area .small {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 10px;
}
#container .flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 10px;
}
.purple {
    background-color: #efebf3;
}

#container .coupon-area h2 span {
	display:block;
	
}

@media screen and (min-width:960px) {
	#container .coupon-area h2 span {
        font-size: 1.5rem;
    }
    #container .coupon-area .date span {
        font-size: 2.4rem;
    }
    #container .coupon-area .date {
        width:50%;
    }
	#container .inner {
        max-width: 1080px;
        width: 100%;
        margin: auto;
        padding: 0;
    }
	.flex.column_pc4_sp2 li {
        width: 23%;
    }
}



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

	#flow_area

 ================================================== */
#container #flow_area{
	background: #eeece1;
}
/*
	ul.step
================================ */
#container #flow_area ul.step{
	margin: 30px auto 0;
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
  	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
}
#container #flow_area ul.step li{
	width: 24%;
	padding: 20px;
	border-radius: 4px;
	background-color: #fff;
}
/*
	ul.step_inner
================================ */
#container #flow_area ul.step_inner > li{
	padding: 30px;
	background-color: #fff;
}
#container #flow_area ul.step_inner > li + li{
	margin-top: 20px;
}
/* dl -------------------- */
#container #flow_area ul.step_inner dl{
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
  	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
	align-items: center;
	background-color: #38A3A5;
}
/* dt ----- */
#container #flow_area ul.step_inner dl dt{
	width: 12%;
	color: #fff;
	text-align: center;
	font-weight: bold;
}
/* dd ----- */
#container #flow_area ul.step_inner dl dd{
	width: 88%;
	padding: 0 20px;
	background-color: #fff;
}
#container #flow_area ul.step_inner dl dd .dl_btn{
	width: 100%;
	max-width: 250px;
}
/* h3 ----- */
#container #flow_area ul.step_inner dl dd h3{
	font-weight: bold;
}
/*
	ul.notes
================================ */
#container #flow_area ul.notes{
	width: 100%;
	margin: 20px auto 0;
	padding: 10px;
	font-size: 13px;
	border: 2px #c83150 solid;
}
/*
	dl
================================ */
/* dt -------------------- */
#container #flow_area ul.step li dt{
	font-size: 20px;
	text-align: center;
}
/* dd -------------------- */
#container #flow_area ul.step li dd div{
	width: 80%;
	max-width: 150px;
	margin: 10px auto;
}
/* p ----- */
#container #flow_area ul.step li .midashi{
	font-weight: bold;
	text-align: center;
}
#container #flow_area ul.step li .detail{
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.6;
}
/*
	div.accordion
================================ */
/*
	チェックボックスを非表示
================================ */
#container #flow_area .accordion-hidden{
  display: none;
}
/*
	Question部分
================================ */
#container #flow_area .accordion-open {
	position: relative;
	display: block;
	width: 100%;
	max-width: 450px;
	margin: 30px auto 0;
	padding: 14px 10px 18px;
	cursor: pointer;
	color: #fff;
	text-align: center;
	background: #333;
	transition: all .3s;
	box-shadow: rgb(0 0 0 / 15%) 1.95px 1.95px 2.6px;
}
#container #flow_area .accordion-open:hover{
	opacity: .7;
}
#container #flow_area .accordion-open::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	margin: auto;
	width: 8px;
	height: 8px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	transform: rotate(135deg);
}
/*
	Answer部分は最初は表示しない
================================ */
#container #flow_area .accordion-close {
  display: block;
  height: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  transition: .5s;
}
/* チェックボックスにチェックが入ったらAnswer部分を表示 */
#container #flow_area .accordion-hidden:checked + .accordion-open + .accordion-close {
  height: auto;
  opacity: 1;
}
/*
	div.attention
================================ */
#container #flow_area .attention{
	margin:  20px auto;
	padding: 20px;
	/*background-color: #fcd5b5;*/
}
/* h3 ---------- */
#container #flow_area .attention h3{
	text-align: center;
	font-size: 20px;
	font-weight: bold;
}
/* p ---------- */
#container #flow_area .attention p{
	text-align: center;
}
/*
	.inquiry_box
================================ */
#container #flow_area .inquiry_box{
	margin: 40px auto 0;
	text-align: center;
}
/* .img_box -------------------- */
#container #flow_area .inquiry_box .img_box{
	width: 100%;
	max-width: 60px;
	margin: 0 auto;
}
#container #flow_area .inquiry_box .img_box + p{
	margin-top: 10px;
}



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

	#easysearch_area

 ================================================== */
#container #easysearch_area{
	background-color: #f7f7f7;
}
/*
	.lead
================================ */
#container #easysearch_area .lead {
	text-align: center;
}
/*
	.easy_search
================================ */
#container #easysearch_area .easy_search {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}
/*
	.select_outer
================================ */
#container #easysearch_area .select_outer {
	zoom: 1;
}
#container #easysearch_area .select_outer input,
#container #easysearch_area .select_outer select {
	-webkit-box-shadow: none;
	box-shadow: none;
	border: 1px solid #444;
	font-size: 1.3rem;
	border-radius: 0;
	padding: 5px 26px 5px 8px;
	height: 36px;
	width: 100%;
}
#container #easysearch_area .select_outer {
	display: flex;
	justify-content: space-around;
	padding: 10px;
	margin: 20px auto 0;
}
#container #easysearch_area .select_outer .select {
	width: 45%;
	position: relative;
	background: #fff;
}
#container #easysearch_area .select_outer .select ~ .select:before {
	content: "\e91b";
	font-family: defico;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display: inline-block;
	vertical-align: middle;
	font-size: 1.4rem;
	position: absolute;
	left: -2.2em;
	top: 13px;
}
#container #easysearch_area .select_outer .select select {
  position: relative;
  z-index: 1;
  background: transparent;
}
/*
	.button
================================ */
#container #easysearch_area .button {
  width: 40%;
  margin: 30px auto
}
#container #easysearch_area .btn-submit,
#container #easysearch_area .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
}
#container #easysearch_area .btn-submit:hover{
	opacity: .6;
}
#container #easysearch_area .button .btn-submit:after,
#container #easysearch_area .button a:after {
  content: '';
  margin-left: 5px;
  width: 5px;
  height: 5px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(45deg)
}
#container #easysearch_area .button a:hover {
  text-decoration: none;
  background-color: #bbb
}




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

	#osusume_area

 ================================================== */
/*
	.link_box
================================ */
#container #osusume_area .link_box{
	width: 100%;
	margin: 30px auto;
	transition: all .3s;
}
#container #osusume_area .link_box:hover{
	opacity: .8;
}
/*
	.btn_box
================================ */
#container #osusume_area .btn_box{
	width: 100%;
	max-width: 300px;
	margin: 40px auto 0;
	text-align: center;
}
#container #osusume_area .btn_box a{
	display: block;
	padding: 10px;
	color: #fff;
	background: #333;
	transition: all .3s;
}
#container #osusume_area .btn_box a:hover{
	opacity: .6;
	text-decoration: none !important;
}


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

	#qa_area

 ================================================== */
#container #qa_area{
	background: #eeece1;
}
/*
	dl
================================ */
#container #qa_area dl{
	margin: 40px auto 0;
}
/* dt -------------------- */
#container #qa_area dt{
	font-weight: bold;
}
/* dd -------------------- */
#container #qa_area dd{
	margin: 5px auto 30px;
	padding: 20px;
	background-color: #fff;
}




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

	#ooguchi_area

 ================================================== */
#container #ooguchi_area .form_btn{
	margin: 40px auto 0;
	width: 100%;
	max-width: 300px;
	line-height: 1.3;
}
#container #ooguchi_area .form_btn a{
	display: block;
	padding: 10px;
	color: #fff;
	text-align: center;
	background-color: #333;
	transition: all .3s;
}
#container #ooguchi_area a:hover{
	opacity: .6;
	text-decoration: none !important;
}
#container #ooguchi_area .form_btn a span{
	display: block;
	font-size: 14px;
}



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

	お酒はまとめて注文不可

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

.alcohol p{
	background-color: #c83150 ;
	color: white;
	display: inline;
	padding: 2px 0;
}

/*-------------------------------------

coupon-area

-------------------------------------*/
#okoudengaeshi .coupon-area{
    text-align:center;
    padding: 0 0 80px;
}

#okoudengaeshi .coupon-area .date {
    text-align: center;
    margin: 20px auto;
    padding: 10px 0;
}

#okoudengaeshi .coupon-area .date span {
    font-weight:bold;
    display:block;
}

#okoudengaeshi .coupon-area .small {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 10px;
}
@media screen and (min-width:960px) {
    #okoudengaeshi .coupon-area .date span {
        font-size: 2.4rem;
    }
    #okoudengaeshi .coupon-area .date {
        width:50%;
    }
}

.copy-text {
    cursor: pointer;
  }