@charset "utf-8";

/* ------------------------------------------------------------ common */

.sec { padding: 100px 0;}
.sec h3 { font-size: 50px; letter-spacing: 0.24em; font-family: dnp-shuei-mincho-pr6, sans-serif; font-weight: 400; text-align: center;}
.sec h3 img { display: block; margin: 0 auto 19px;}
.sec h3 span { display: block; font-size: 20px; letter-spacing: 0.24em; font-family: mrs-eaves-xl-serif, serif; font-weight: 400; margin: 0 auto 21px;}

.under:after { display: block; content: ""; width: 79px; height: 2px; background: url(../images/common/pic_under.png) no-repeat center center / 100%; margin: 30px auto 0;}

.circle-arrow{ display: inline-block; position: relative; margin-left: 10px; width: 20px; height: 20px; border-radius: 100px; background: #371016; vertical-align: -4px; }
.circle-arrow:before{ position: absolute; content: ""; top: 50%; left: 55%; transform: translate(-50%,-50%); width: 5px; height: 7px; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); }


/* #bnrs .s_inner { width: 1000px; } */
#bnrs ul { display: flex; justify-content: center; }
#bnrs ul li { width: 340px; margin: 0 0 0 10px; }
#bnrs ul li:first-child { margin: 0; }
#bnrs ul li a { display: block; }
#bnrs ul li a img { width: 100%; height: auto; }



/* ------------------------------------------------------------ fv */

#fv { position: relative; height: 900px;}
#fv .slide { position: relative; text-align: center; width: 100%; height: 900px;}
#fv .item01 { background: url(../images/index/fv_01.jpg?=02) no-repeat center bottom / cover;}
#fv .item02 { background: url(../images/index/fv_02.jpg) no-repeat center center / cover;}
#fv .item03 { background: url(../images/index/fv_03.jpg?=01) no-repeat center center / cover;}
#fv .slide-dots { margin: 0; padding: 0; text-align: center; position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); 
-webkit-transform: translateX(-50%);}
#fv .slide-dots li { display: inline-block; margin: 0 10px;}
#fv .slide-dots li button { position: relative; text-indent: -9999px;}
#fv .slide-dots li button::before { position: absolute; content: ""; cursor: pointer; width: 10px; height: 10px; border-radius: 50%; top: 0; left: 0; background: #fff;}
#fv .slide-dots li.slick-active button::before { background: #770216;}
#fv button { background: none; border: none; outline: none; padding: 0 7px;}
#fv .slick-dotted.slick-slider { margin-bottom: 0;}
#fv .fv_txt { position: absolute; top: 220px; left: 8%;}
#fv .fv_txt h1 { margin: 0 auto;  }
#fv .fv_txt h1 img { margin-bottom: 0;}
#fv .fv_txt img { margin: 0 auto 40px;}

#fv .scroll { position: absolute; bottom: 36px; left: 2.5%; font-size: 14px; letter-spacing: 0.1em; font-family: mrs-eaves-xl-serif, serif; font-weight: 400; color: #fff; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl;}
#fv .scroll:after { content: ""; display: inline-block; width: 1px; height: 70px; background-color: #fff; margin-top: 13px; animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;}

@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/* #cp_hbanner { background: url(../images/index/bg_left.png) no-repeat left 121px / 230px, url(../images/index/bg_pattern_1.jpg) left top / 40px;} */
#cp_hbanne .sec { padding: 100px 0 50px 0;}
.cp_banner { text-align: center; padding: 60px 0; }


/* ------------------------------------------------------------ concept */

#concept { }

#concept .concept { position: relative; background: url(../images/index/bg_concept_01.png) no-repeat 80% 10% / 230px, url(../images/index/bg_concept_02.png) no-repeat -50px 30% / 496px, url(../images/index/bg_concept_03.jpg) no-repeat right top / 100px, url(../images/index/bg_concept_04.png) no-repeat left bottom / 90px, url(../images/index/bg_pattern_1.jpg) left top / 40px; padding: 184px 0 116px; z-index: 1;}
#concept .concept .flex { position: relative; display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row-reverse;}
#concept .concept .flex:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); content: ""; width: 105%; height: 120%; background-color: rgba(255,255,255,0.3); z-index: -1;}
#concept .concept h2 { font-size: 30px; font-family: dnp-shuei-mincho-pr6, sans-serif; font-weight: 500; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; margin-left: 65px; line-height: 2;}
#concept .concept h2 span { display: block; font-size: 20px; font-family: mrs-eaves-xl-serif, serif; font-weight: 400; margin-left: 18px;}
#concept .concept p { writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl;}
#concept .concept .txt { font-size: 18px; line-height: 3; letter-spacing: 0.1em; margin-left: 40px;}
#concept .concept .big { font-size: 30px; letter-spacing: 0.04em; font-family: dnp-shuei-mincho-pr6, sans-serif; font-weight: 500; margin-top: 280px;}
#concept .concept img { width: 150px; height: auto; margin-top: auto;}

#concept .bg { width: 100%; height: auto;}

/* ------------------------------------------------------------ specialties */
h4.under { font-size: 40px; font-family: dnp-shuei-mincho-pr6, sans-serif; font-weight: 400; letter-spacing: 0.2em; text-align: center; margin-bottom: 60px;}

#specialties { background: url(../images/index/bg_left.png) no-repeat left 121px / 230px, url(../images/index/bg_pattern_1.jpg) left top / 40px;}
#specialties:before { display: block; content: ""; width: 1100px; height: 30px; background: url(../images/common/bg_pattern_3.png) repeat-x left center / 36px; opacity: 0.4; margin: 0 auto 100px;}

#specialties h3 { margin-bottom: 100px;}
#specialties .content { position: relative; margin-bottom: 100px;}

#specialties .content:after { display: block; content: ""; width: 100%; height: 30px; background: url(../images/common/bg_pattern_3.png) repeat-x left center / 36px; opacity: 0.4; margin-top: 100px;}

#specialties .content:last-child { margin-bottom: 0;}
#specialties .content:last-child:after { display: none;}

#specialties .content.con1 h4 { margin-bottom: 90px;}

#specialties .content .flex { display: flex; justify-content: space-between; align-items: flex-start; flex-flow: row-reverse; margin-bottom: 80px;}
#specialties .content .flex:last-child { margin-bottom: 0;}
#specialties .content.con3 .flex { margin-bottom: 100px;}
#specialties .content .flex img { border-radius: 20px; box-shadow: 19.284px 22.981px 60px 0px rgba(0, 0, 0, 0.3);}
#specialties .content .flex .left { width: 380px;}
#specialties .content .flex .left h5 { font-size: 36px; line-height: 1.556; font-family: dnp-shuei-mincho-pr6, sans-serif; font-weight: 500; margin-bottom: 36px;}
#specialties .content .flex .left p { line-height: 2.25;}
#specialties .con3 .flex .left p { margin-bottom: 34px;}

#specialties .content .flex .item { width: 320px;}
#specialties .content .flex .item img { width: 100%; height: auto; margin-bottom: 40px;}
#specialties .content .flex .item h5 { font-size: 28px; font-family: dnp-shuei-mincho-pr6, sans-serif; font-weight: 500; margin-bottom: 30px;}
#specialties .content .flex .item h5 span { font-size: 18px; font-family: dnp-shuei-mincho-pr6, sans-serif; font-weight: 400; margin-left: 10px;}
#specialties .content .flex .item p { font-size: 14px; line-height: 2;}

#specialties .content .flex_r { flex-flow: row; }
#specialties .content .flex_r img { }
#specialties .content .flex .right { width: 380px;}
#specialties .content .flex .right h5 { font-size: 36px; line-height: 1.556; font-family: dnp-shuei-mincho-pr6, sans-serif; font-weight: 500; margin: -10px 0 30px; font-feature-settings: "palt";}
#specialties .content .flex .right p { font-size: 16px; line-height: 2.25;}

#specialties .content .tips { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; padding: 50px;  background: url(../images/index/bg_pattern_5.jpg) repeat left top / 36px; border-radius: 30px; }
#specialties .content .tips img { }
#specialties .content .tips .right { }
#specialties .content .tips .right h6 { font-size: 30px; font-family: dnp-shuei-mincho-pr6, sans-serif; font-weight: 500; color: #fff; margin-bottom: 46px;}
#specialties .content .tips .right p { color: #fff;}
#specialties .content .tips .right p:nth-of-type(1) { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dotted #6e484f;}
#specialties .content .tips .right p span { display: inline-block; width: 80px; padding: 7px 0; font-size: 14px; font-weight: 200; color: #fff; text-align: center; border: 1px solid #fff; margin-right: 20px;}
#specialties .content .tips .right p em { display: block; margin-left: 104px; margin-top: 0.5em;}

.mouseon { width: 100%; padding: 11px 0 12px; background: #e1d0d6; border: 1px solid #371016; border-radius: 5px; cursor: pointer; text-align: center;}
#specialties .content .mouseon img { vertical-align: -6px; box-shadow: none; border-radius: 0; margin-right: 5px;}
.mouseon:hover + .mouse_over{ display: block;}
.mouse_over:hover{ display: block;}
.mouse_over{ display: none; position: absolute; top:0; right:0;}
#specialties .content .modal-container { display: none;}
#specialties .content .mouse_over .what,
#specialties .content .modal-container .what { width: 380px; background: #fff; padding: 40px; border-radius: 20px; box-shadow: 19.284px 22.981px 60px 0px rgba(0, 0, 0, 0.3); }
#specialties .content .mouse_over .what img,
#specialties .content .modal-container .what img { display: block; margin: 0 auto 40px; box-shadow: none; border-radius: 0;}
#specialties .content .mouse_over .what .title,
#specialties .content .modal-container .what .title { font-size: 24px; font-weight: 500; margin-bottom: 34px; line-height: 1; text-align: center;}
#specialties .content .mouse_over .what .main,
#specialties .content .modal-container .what .main { font-size: 16px; line-height: 2; margin: 0;}

/* ------------------------------------------------------------ menu */

#menu { }
#menu h3 { margin-bottom: 73px;}
#menu .flex { display: flex; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 30px;}
#menu .flex .item { display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 56px;}
#menu .flex .item img { width: 40%; height: auto;}
#menu .flex .item p { width: 30%; font-size: 24px; line-height: 1.667; font-family: dnp-shuei-mincho-pr6, sans-serif; font-weight: 500; text-align: center;}
#menu .flex .item p .cap { text-align: left; }
#menu .btns { display: block; position: relative; width: 440px; padding: 42px 0; font-size: 16px; color: #fff; text-align: center; background: #371016; border-radius: 50px; margin: 0 auto 87px;}
#menu .btns:after { position: absolute; content: ""; top: 50%; border-top: solid 2px #fff; border-right: solid 2px #fff; width: 15px; height: 15px; transform: translateY(-50%) rotate(45deg); -webkit-transform: translateY(-50%) rotate(45deg); right: 10%; }
#menu #topping { display: none;}
#menu #topping .flex .item { display: block; width: calc(100%/3); margin-bottom: 56px;}
#menu #topping .flex .item img { width: 100%; height: auto; margin-bottom: 40px;}
#menu #topping .flex .item p { width: 100%; font-size: 24px; line-height: 1.667; font-family: dnp-shuei-mincho-pr6, sans-serif; font-weight: 500; text-align: center;}
#menu #topping .flex .item p span { display: block; font-size: 16px; font-family: dnp-shuei-mincho-pr6, sans-serif; font-weight: 500; margin-bottom: 0.5em; }
#menu #topping .drink { text-align: center; margin-bottom: 50px;}
#menu #topping .drink p { display: inline-block; font-size: 20px; padding: 20px; border: 1px solid #371016; text-align: center;}
#menu #topping .close { display: block; width: 160px; font-size: 16px; border-bottom: 1px solid #371016; padding: 0 5px 2px; margin: 0 auto 60px;}
#menu #topping .close img { vertical-align: 2px; margin-right: 5px;}

#bnrs{ text-align: center;}
#menu .deli h4 { font-size: 30px; line-height: 1.867; font-family: dnp-shuei-mincho-pr6, sans-serif; font-weight: 500; text-align: center; margin-bottom: 40px;}
#menu .deli a { }

#menu .cap{ display: block; font-size: 15px; line-height: 150%; padding: 20px 0 0; }
#menu .allergy { line-height: 150%; margin-bottom: 20px; display: block; font-size: 18px; font-family: dnp-shuei-mincho-pr6, sans-serif; font-weight: 500; text-align: center; text-decoration: underline;}
#menu .deliveryallergy{ margin-bottom: 78px; }

.option{ width: 500px; margin: 0 auto; padding: 0 0 90px; font-family: dnp-shuei-mincho-pr6, sans-serif; }
.option h5{ padding: 0 0 30px; font-size: 25px; text-align: center; }
.option p{ font-size: 17px; line-height: 200%; }


/* ------------------------------------------------------------ movie */

#movie { position: relative; background: url(../images/index/bg_pattern_2.jpg) left top / 40px; z-index: 1; overflow: hidden;}
#movie h3 { margin-bottom: 94px;}
#movie .movie { position: relative; width: 800px; margin: 0 auto 90px; z-index: 2;}
#movie .movie:before,
#movie .movie:after { position: absolute; content: ""; z-index: -1;}
#movie .movie:before { top: -70px; left: -210px; width: 323px; height: 225px; background: url(../images/index/pic_16.png) no-repeat center center / 100%;}
#movie .movie:after { bottom: -110px; right: -250px; width: 457px; height: 225px; background: url(../images/index/pic_17.png) no-repeat center center / 100%;}
#movie .movie .iframeWraper { position: relative; padding-bottom: 56.25%; overflow: hidden;}
#movie .movie iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 30px; box-shadow: 19.284px 22.981px 60px 0px rgba(0, 0, 0, 0.3);}



/* ------------------------------------------------------------ shop */

#shop { background: url(../images/index/bg_left.png) no-repeat left 121px / 104px, url(../images/index/bg_right.png) no-repeat right 764px / 174px, url(../images/index/bg_pattern_1.jpg) left top / 40px;}
#shop h3 { margin-bottom: 60px;}
#shop .map { margin-bottom: 80px;}
#shop .shop { width: 900px; margin: 0 auto 92px;}
#shop .shop h4 { font-size: 26px; letter-spacing: 0.1em; font-family: mrs-eaves-xl-serif, serif; font-weight: 400; margin-bottom: 30px;}
#shop .shop div { }
#shop .shop div dl { display: flex; border-bottom: 1px dotted #371016; padding: 30px 0;}
#shop .shop div dl:first-child { border-top: 1px dotted #371016;}
#shop .shop div dl dt { width: 240px; font-weight: 500;}
#shop .shop div dl dd { width: 660px; letter-spacing: 0.1em;}
#shop .shop div dl dd a{ margin: 0 10px 0 0; color: #371016; }
#shop .shop div dl dd a .border{ padding: 0 0 3px; border-bottom: 1px solid #371016; }

#shop .mind { width: 80%; padding: 50px 0 38px; text-align: center; background: url(../images/index/bg_pattern_4.jpg) repeat left top / 36px; border-radius: 30px; margin: auto;}
#shop .mind h5 { font-size: 26px; font-family: dnp-shuei-mincho-pr6, sans-serif; font-weight: 500; margin-bottom: 15px;}
#shop .mind p { font-size: 14px; line-height: 2.444;}


/* ------------------------------------------------------------ bnrs */

#menu #bnrs { text-align: center;}
#menu #bnrs h3 { font-size: 16px; font-family: source-han-sans-japanese, sans-serif; text-align: center; color: #000; font-weight: 500; margin: 0 0 20px; line-height: 140%; letter-spacing: 0;}
#menu #bnrs  a { display: inline-block; width: 340px;}
#menu #bnrs a img { width: 100%; height: auto;}

#menu .cap{ font-size: 13px; padding: 10px 0 0; }


/* ----------------------------- mobile ------------------------------- */
@media only screen and (max-width: 768px) {


/* ------------------------------------------------------------ common */

.sec { padding: 50px 0;}
.sec h3 { font-size: 30px; }
.sec h3 img { width: 33px; height: auto; margin: 0 auto 10px;}
.sec h3 span {font-size: 15px; margin: 0 auto 20px;}

.under:after { width: 60px; height: 2px; background: url(../images/common/pic_under.png) no-repeat center center / 100%; margin: 20px auto 0;}


#bnrs .s_inner { width: 100%; }
#bnrs ul { display: block; }
#bnrs ul li { width: 100%; margin: 0 0 20px; text-align: center; }
#bnrs ul li:first-child { margin: 0 0 20px; }
#bnrs ul li a img {width: 100%; max-width: 340px; height: auto; }


/* ------------------------------------------------------------ fv */

#fv { position: relative; height: 85vh;}
#fv .slide { position: relative; text-align: center; width: 100%; height: 85vh;}
#fv .item01 { background: url(../images/index/fv_01.jpg) no-repeat center bottom / cover;}
#fv .item02 { background: url(../images/index/fv_02.jpg) no-repeat center center / cover;}
#fv .item03 { background: url(../images/index/fv_03.jpg) no-repeat center center / cover;}
#fv .slide-dots { margin: 0; padding: 0; text-align: center; position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); 
-webkit-transform: translateX(-50%);}
#fv .slide-dots li { display: inline-block; margin: 0 10px;}
#fv .slide-dots li button { position: relative; text-indent: -9999px;}
#fv .slide-dots li button::before { position: absolute; content: ""; cursor: pointer; width: 10px; height: 10px; border-radius: 50%; top: 0; left: 0; background: #fff;}
#fv .slide-dots li.slick-active button::before { background: #770216;}
#fv button { background: none; border: none; outline: none; padding: 0 7px;}
#fv .slick-dotted.slick-slider { margin-bottom: 0;}
#fv .fv_txt { top: auto; bottom: 8%;}
#fv .fv_txt h1 { margin: 0 auto;  width: 94px;}
#fv .fv_txt h1 img { margin-bottom: 0;}
#fv .fv_txt img { margin: 0 auto 10px;}

#fv .scroll { bottom: 36px; left: 2.5%; font-size: 11px;}
#fv .scroll:after { height: 35px; background-color: #fff; margin-top: 13px;}

.cp_banner{ padding: 30px 0; }


/* ------------------------------------------------------------ concept */

#concept { }
#concept .concept { position: relative; background: url(../images/index/bg_concept_01.png) no-repeat 60% 5% / 168px, url(../images/index/bg_concept_02.png) no-repeat -100px 30% / 275px, url(../images/index/bg_concept_03.jpg) no-repeat right top / 50px, url(../images/index/bg_concept_04.png) no-repeat left bottom / 75px, url(../images/index/bg_pattern_1.jpg) left top / 40px; padding: 132px 0 62px;}
#concept .concept .flex { display: block; width: 80%; margin: 0 auto;}
#concept .concept .flex:before { width: 105%; height: 105%; }
#concept .concept h2 { width: 50%; font-size: 25px; margin: 0 0 35px auto; line-height: 1.4;}
#concept .concept h2 span { display: block; font-size: 15px; margin-left: 16px;}
#concept .concept p { writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb;}
#concept .concept .txt { font-size: 14px; line-height: 2.429; margin: 0 0 30px;}
#concept .concept .big { font-size: 20px; margin: 0; text-align: right;}
#concept .concept img { position: absolute; top: 320px; left: 0; width: 100px; }

#concept .bg { width: 100%; height: auto;}

/* ------------------------------------------------------------ specialties */

h4.under { font-size: 25px; margin-bottom: 25px;}

#specialties { background: url(../images/index/bg_left.png) no-repeat left 121px / 132px, url(../images/index/bg_pattern_1.jpg) left top / 40px;}
#specialties:before { width: 90%; height: 15px; background: url(../images/common/bg_pattern_3.png) repeat-x left center / 18px; opacity: 0.6; margin: 0 auto 50px;}

#specialties h3 { line-height: 140%; margin-bottom: 50px;}
#specialties .content { position: relative; margin-bottom: 50px;}
#specialties .content:after { width: 100%; height: 15px; background: url(../images/common/bg_pattern_3.png) repeat-x left center / 18px; margin-top: 50px; opacity: 0.6;}

#specialties .content:last-child { margin-bottom: 0;}
#specialties .content:last-child:after { display: none;}

#specialties .content.con1 h4 { margin-bottom: 25px;}

#specialties .content .flex { display: block;  margin-bottom: 45px;}
#specialties .content .flex:last-child { margin-bottom: 0;}
#specialties .content.con3 .flex { margin-bottom: 0px;}

#specialties .content .flex img { width: 100%; height: auto; margin-bottom: 35px; border-radius: 20px; box-shadow: 19.284px 22.981px 60px 0px rgba(0, 0, 0, 0.3);}
#specialties .content .flex .left { width: 100%;}
#specialties .content .flex .left h5 { font-size: 23px; line-height: 1.435; margin-bottom: 25px;}
#specialties .content .flex .left p { font-size: 13px; line-height: 1.769;}

#specialties .content .flex .item { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 35px;}
#specialties .content .flex .item img { width: 43%; height: auto; margin-bottom: 0; border-radius: 10px;}
#specialties .content .flex .item div { width: 50%;}
#specialties .content .flex .item h5 { font-size: 19px; margin-bottom: 15px;}
#specialties .content .flex .item h5 span { font-size: 12px; margin-left: 3px;}
#specialties .content .flex .item p { font-size: 12px; line-height: 1.913;}

#specialties .content .flex_r { }
#specialties .content .flex_r img { }
#specialties .content .flex .right { width: 100%;}
#specialties .content .flex .right h5 { font-size: 23px; line-height: 1.435; margin: -10px 0 30px; }
#specialties .content .flex .right p { font-size: 13px; line-height: 1.769; margin-bottom: 34px;}


.mouseon { width: 100%; padding: 15px 0; background: #e1d0d6; border: 1px solid #371016; border-radius: 5px; cursor: pointer; text-align: center;}
#specialties .content .mouseon img { width: 18px; vertical-align: -2px; box-shadow: none; margin-bottom: 0; border-radius: 0;}
.mouseon:hover + .mouse_over{ display: none;}
.mouse_over:hover{ display: none;}
.mouse_over{ display: none;}
#specialties .content .modal-container{ display: none; position: fixed; top:0; left:0; width: 100%; height: 100vh; background-color: rgba(0,0,0,0.4); z-index: 30;}
#specialties .content .modal-container.active { display: block;}
#specialties .content .modal-container .modal-body { position: relative; width: 100%; height: 100%;}
#specialties .content .modal-container .what { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); width: 90%;  padding: 35px 5%;}
#specialties .content .modal-container .modal-body .modal-close { position: absolute; top: -50px; right: 0; font-size: 40px; text-align: right; cursor: pointer; color: #fff;}

#specialties .content .modal-container .what img  {width: 30px; margin: 0 auto 25px; box-shadow: none; border-radius: 0;}
#specialties .content .modal-container .what .title { font-size: 20px; margin-bottom: 25px; line-height: 1; text-align: center;}
#specialties .content .modal-container .what .main { font-size: 13px; line-height: 1.769; margin: 0;}

/* ------------------------------------------------------------ menu */

#menu { }
#menu h3 { margin-bottom: 73px;}
#menu .flex { display: block; margin-bottom: 50px;}
#menu .flex .item { display: block; width: 100%; margin-bottom: 56px;}
#menu .flex .item img { width: 100%; height: auto; margin-bottom: 20px;}
#menu .flex .item p { width: 100%; font-size: 22px; line-height: 1.667;}
#menu .flex .item p span { display: block; font-size: 13px;}
#menu #topping .flex { display: flex; margin-bottom: 0;}
#menu #topping .flex .item { width: 50%; margin-bottom: 56px;}
#menu #topping .flex .item img { width: 100%; height: auto; margin-bottom: 20px;}
#menu #topping .flex .item p { font-size: 22px; line-height: 1.667;}
#menu #topping .flex .item p span { display: block; font-size: 13px;}

#menu .btns { width: 100%; padding: 24px 0; font-size: 16px; margin: 0 auto 50px;}
#menu .btns:after { border-top: solid 2px #fff; border-right: solid 2px #fff; width: 10px; height: 10px; right: 10%; }


/* ------------------------------------------------------------ movie */

#movie { }
#movie h3 { margin-bottom: 50px;}
#movie .movie { width: 100%; margin: 0 auto 90px;}
#movie .movie:before { top: -120px; left: -60px; width: 161px; height: 225px;}
#movie .movie:after { bottom: -125px; right: -100px; width: 228px; height: 225px;}
#movie .movie .iframeWraper { position: relative; padding-bottom: 56.25%; overflow: hidden;}
#movie .movie iframe { border-radius: 20px; }

.option{ width: 100%; }
.option h5{ padding: 0 0 20px; font-size: 20px; line-height: 150%; }
.option p{ font-size: 14px; line-height: 200%; }



/* ------------------------------------------------------------ shop */

#shop { background: url(../images/index/bg_left.png) no-repeat left 121px / 104px, url(../images/index/bg_right.png) no-repeat right 764px / 122px, url(../images/index/bg_pattern_1.jpg) left top / 40px;}
#shop h3 { margin-bottom: 40px;}
#shop .map { width: 100%; margin-bottom: 40px;}
#shop .map iframe { width: 100%; height: 200px;}
#shop .shop { width: 100%; margin: 0 auto 60px;}
#shop .shop h4 { font-size: 20px; margin-bottom: 20px;}
#shop .shop div { }
#shop .shop div dl { padding: 20px 0; font-size: 14px;}
#shop .shop div dl dt { width: 25%; line-height: 1.4;}
#shop .shop div dl dd { width: 70%; line-height: 1.4;}

#shop .mind { width: 100%; padding: 19px 25px 20px; text-align: center; background: url(../images/index/bg_pattern_4.jpg) repeat left top / 36px; border-radius: 30px;}
#shop .mind h5 { font-size: 22px; line-height: 1.6; margin-bottom: 15px;}
#shop .mind p { font-size: 14px; line-height: 2;}



}