/* font */
@import url('https://fonts.googleapis.com/css?family=Cabin|Cabin+Sketch|Noto+Sans+JP&display=swap');

/* ------------------------------------------------------------------ */
/* Base
/* ------------------------------------------------------------------ */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   vertical-align: baseline;
   background: transparent;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
   display: block;
}

audio,
canvas,
video {
   display: inline-block;
}

*,
*:before,
*:after {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}
body {
   background: #DDC49D url('../images/bg.jpg');
   font-family: 'Cabin', 'Noto Sans JP', sans-serif;
   font-weight: normal;
   font-size: 15px;
   line-height: 1.6em;
   color: #653013;
   letter-spacing: 0.03em;

   -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
   -webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4, h5, h6 {
   font-weight: normal;
   font-family: 'Cabin', 'Noto Sans JP', sans-serif; 
   letter-spacing: 0.05em;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 38px; }
h2 { font-size: 36px; }
h3 { font-size: 22px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 14px; }
a, a:visited {
   text-decoration: none;
   outline: 0;
   color: #653013;
}
a:hover, a:focus { opacity: 0.9; }
p a, p a:visited { line-height: inherit; }
svg { height: 0; width: 0; }

a.button, a.button:visited {
   display: block;
   text-align: center;
   color: #FFF9EA;
   letter-spacing: 0.05em;
   cursor: pointer;
}
section {
   overflow: hidden;
}
.protected_img {
   -webkit-user-select: none;
   user-select: none;
   -webkit-touch-callout: none;   
}

.w100 {
   width: 100%;
}
.w50 {
   width: 50%;
}
.pc { display: none; }
@media only screen and (min-width: 930px) {
   .pc { display: block; }
}
.tb { display: none; }
@media only screen and (max-width: 930px) {
   .tb { display: block; }
}
.sp { display: none; }
@media only screen and (max-width: 480px) {
   .sp { display: block; }
}
.not-sp { display: none; }
@media only screen and (min-width: 480px) {
   .not-sp { display: block; }
}

/* -----------------------------------------------
  animation
----------------------------------------------- */

.animated {
   animation-duration: 1.5s;
}

/*-- 上下 --*/
@keyframes hovering {
   from { 
      transform: translateY(0px); 
   }
   to { 
      transform: translateY(-7px); 
   }
}
/*-- 小さめSwing（大ロゴ用） --*/
@keyframes swinging {
   from { 
     transform: rotate(-2deg);
     transform-origin: center middle;
   }
   to { 
     transform: rotate(2deg);
     transform-origin: center middle;
   }
}  
/*-- 大きめSwing --*/
@keyframes swinging2 {
   from { 
     transform: rotate(-4deg);
     transform-origin: center middle;
   }
   to { 
     transform: rotate(4deg);
     transform-origin: center middle;
   }
}  
/*-- 底面着地Swing --*/
@keyframes swinging3 {
   from { 
     transform: rotate(-4deg);
     transform-origin: center bottom;
   }
   to { 
     transform: rotate(4deg);
     transform-origin: center bottom;
   }
}  
span.balloon {
  display: block;
  animation: hovering 2s ease-in-out infinite alternate 0s;
}
span.balloon>span {
  display: block;
  animation: swinging2 3s ease-in-out infinite alternate 0s;
}
span.balloon_a>span {
  width: 84px;
  height: 98px;
  background: url(../images/balloon_a.svg) no-repeat;
  background-size: 84px;
}
span.balloon_b>span {
  width: 84px;
  height: 98px;
  background: url(../images/balloon_b.svg) no-repeat;
  background-size: 84px;
}

.is_bounce {
  animation: bouncing 3s ease-in-out 0ms infinite normal;
}
@keyframes bouncing {
   0%, 32% { 
      transform: translateY(0px); 
   }
   8% { 
      transform: translateY(-4px); 
   }
   16% { 
      transform: translateY(0px); 
   }
   24% { 
      transform: translateY(-4px); 
   }
}


/* -----------------------------------------------
  loading
----------------------------------------------- */
.loading {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #C9AA79;
   z-index: 20000;
}
.loading span {
   display: block;
   position: absolute;
   top: calc(50% - 49px);
   left: calc(50% - 42px);
   width: 84px;
   height: 98px;
   background: url("../images/balloon_a.svg") 50% 50% no-repeat;
   animation: swinging3 3s ease-in-out infinite alternate 0s;
}

/* -----------------------------------------------
  header
----------------------------------------------- */
#logo {
   width: 180px;
   height: 64px;
   background: url(../images/logo_m.png) left center no-repeat;
   background-size: 160px;
   margin-left: 40px;
}
#logo.top {
   background: unset;
}
header {
   background: unset;
   box-shadow: none;
   width: 100vw;
   position: absolute;
   left: 0;
   top: 0;
   z-index: 900;
}
header .header_inner {
   width: 100%;
   margin: 0 auto;
   display: flex;
}
nav {
   flex: 1;
   letter-spacing: 0.1em;
   margin-right: 40px;
}

nav>ul {
   width: 100%;
   display: flex;
   justify-content: flex-end;
   align-items: center;
   list-style: none;
   height: 64px;
}
nav>ul li a {
   display: block;
   padding: 10px;
}
nav>ul li a.header_conversion {
   padding: 6px;
}
nav>ul li a.header_conversion span {
   background-color: #CE3939;
   border-radius: 12px;
   padding: 8px 15px;
   font-size: 13px;
}

/* -----------------------------------------------
  top
----------------------------------------------- */
#top {
   height: 730px;
   padding-top: 80px;
}
.top_inner {
   position: relative;
   max-width: 1000px;
   margin: 0 auto;
}
.top_logo {
   visibility: hidden;
   position: absolute;
   top: 100px;
   left: 20px;
   z-index: 10;
   width: 296px;
   height: 290px;  
   animation: swinging 3s ease-in-out infinite alternate 0s;
}
.top_logo_entity {
   background-image: url('../images/logo_l.png');
   background-size: contain;
   background-repeat: no-repeat;
   width: 100%;
   height: 100%;  
   animation: hovering 3.5s ease-in-out infinite alternate 0s;
}
.top_main_box {
   visibility: hidden;
   position: absolute;
   width: fit-content;
   top: 0px;
   right: 20px;
   z-index: 1;
}
.top_main {
   width: 690px;
   height: 540px;
   -webkit-clip-path: url(#top_mask_main);
   clip-path: url(#top_mask_main);
   object-fit: cover;
}
.top_kid1_box {
   visibility: hidden;
   position: absolute;
   width: fit-content;
   top: 430px;
   right: 170px;
   z-index: 3;
}
.top_kid2_box {
   visibility: hidden;
   position: absolute;
   width: fit-content;
   top: 410px;
   right: 20px;
   z-index: 2;
}
.top_kid {
   width: 168px;
   height: 168px;
   -webkit-clip-path: url(#top_mask_kid);
   clip-path: url(#top_mask_kid);
}
.top_info {
   visibility: hidden;
   position: absolute;
   top: 450px;
   left: 40px;
   z-index: 1;
   font-size: 14px;
 }
.top_info_links {
   display: flex;
   margin: 7px 0;
}
.top_info_access {
   width: 90px;
   height: 24px;
   background-color: #653013;
   border-radius: 10px;
   color: #FFF9EA;
   font-size: 13px;
   margin: 0 5px 0 0;
   line-height: 1;
   padding-top: 5px;
}
.top_info_sns {
   display: block;
   width: 30px;
   height: 24px;
   text-align: center;
}
.top_info_sns i {
   font-size: 24px;
}
.top_announce {
   display: block;
   border: 1px solid #CE3939;
   padding: 6px 12px;
   text-align: center;
   cursor: pointer;
   margin-top: 20px;
}

/* -----------------------------------------------
  concept
----------------------------------------------- */
#concept {
   background-color: rgba(255, 255, 255, 0.3);
   padding: 40px 40px 70px;
}
#concept h1 {
   visibility: hidden;
   position: relative;
   max-width: 850px;
   min-height: 110px;
   font-size: 22px;
   text-align: center;
   margin: 10px auto;
   padding: 35px 60px 30px 0;
   line-height: 1.7em;
}
#concept h1 .balloon {
   position: absolute;
   top: 0;
   right: 0;
}
#concept p {
   margin-bottom: 15px;
}
.concept_content {
   max-width: 1000px;
   margin: 0 auto;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}
.concept_photo {
   visibility: hidden;
   width: 440px;
   height: 250px;
   background-image: url(../images/top_concept_photo_2.jpg), url(../images/top_concept_photo_1.jpg);
   background-size: 120px, 330px;
   background-repeat: no-repeat, no-repeat;
   background-position: right 40px bottom, left 40px top;
}
.concept_text {
   visibility: hidden;
   width: 50%;
}
.for_kids_link {
   display: block;
   width: 380px;
   height: 44px;
   margin: 25px 0;
   padding: 15px;
   font-size: 14px;
   line-height: 1em;
   text-align: center;
   background: url(../images/button_down_arrow.svg) no-repeat right 20px center #DDC49D;
   background-size: 16px;
   border-radius: 20px;
   visibility: hidden;
}


/* -----------------------------------------------
  feature
----------------------------------------------- */
#feature {
   text-align: center;
   padding: 60px 20px;
}
#feature h2 {
   visibility: hidden;
   position: relative;
   background: url(../images/title_line.svg) no-repeat center bottom 9px;
   max-width: 650px;
   min-height: 100px;
   text-align: center;
   margin: 0 auto;
   padding-top: 35px;
}
#feature h2 img {
   width: 388px;
}
#feature h2 .balloon {
   position: absolute;
   top: 0;
   left: 0;
}
.feature_content {
   max-width: 1000px;
   margin: 0 auto;
   padding: 40px 0 20px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}
.feature_box {
   visibility: hidden;
   width: 33%;
   position: relative;
}

.feature_box img {
   width: 264px;
   height: 230px;
   -webkit-clip-path: url(#feature_mask);
   clip-path: url(#feature_mask);
   object-fit: cover;
}
.feature_box a {
   position: absolute;
   top: 150px;
   right: 25px;
   font-size: 12px;
   line-height: 1.3em;
   width: 114px;
   height: 84px;
   background-image: url(../images/button_right_arrow.svg), url(../images/feature_link.svg);
   background-repeat: no-repeat, no-repeat;
   background-position: right 7px center, center center;
   padding: 27px 0 0;
}
.feature_box p {
   margin: 10px 0 0;
}
.feature_box span {
   display: block;
   font-size: 12px;
   color: #9B715B;
   letter-spacing: 0;
}

/* -----------------------------------------------
  menu_summary
----------------------------------------------- */
#menu_summary {
}
#menu_summary h2 {
   visibility: hidden;
   text-align: center;
   font-size: 36px;
   font-family: 'Cabin Sketch';
   letter-spacing: 0.2em;
   margin: 70px 0 60px;
   width: 100%;
   line-height: 0;
}
.menu_summary_box {
   max-width: 960px;
   margin: 0 auto;
   padding: 20px;
   background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .8)), url(../images/menu_summary_bg.jpg) no-repeat center center;
   background-size: cover;
}
.menu_summary_box_frame {
   position: relative;
   width: 100%;
   border: 2px dashed #DDC49D;
   padding: 0 20px;
}
.menu_summary_text {
   visibility: hidden;
   position: relative;
   max-width: 360px;
   margin: 0 auto;
}
.menu_summary_text img {
   position: absolute;
   top: 0;
   right: -20px;
   width: 126px;
   animation: swinging3 3s ease-in-out infinite alternate 0s;
}
.menu_summary_text ul {
   list-style: inside;
   margin: 30px 0;
   line-height: 2.2em;
}
.top_menu_caption {
   font-size: 14px;
}
.top_menu_title {
   font-size: 24px;
}
.top_menu_price {
   font-size: 22px;
   text-align: center;
}
.top_menu_price span {
   font-size: 12px;
}
.top_menu_link {
   visibility: hidden;
   width: 300px;
   height: 50px;
   margin: 40px auto 50px;
   background-color: #653013;
   border-radius: 20px;
   padding-top: 14px;
}

/* -----------------------------------------------
  conversion
----------------------------------------------- */
#conversion {
   padding: 0 20px;   
}
.hotpepper_l {
   visibility: hidden;
   max-width: 960px;
   height: 90px;
   background-color: #CE3939;
   border-radius: 30px;
   font-size: 22px;
   margin: 100px auto;
   padding-top: 34px;
}

/* -----------------------------------------------
  for_kids
----------------------------------------------- */
#for_kids {
   padding: 20px;
}
#for_kids h2 {
   visibility: hidden;
   position: relative;
   max-width: 650px;
   min-height: 110px;
   text-align: center;
   font-size: 22px;
   padding-top: 45px;
   margin: 0 auto 45px;
   background: url(../images/title_line_red.svg) no-repeat center bottom 15px;
}
#for_kids h2 .balloon {
   position: absolute;
   top: 0;
   right: -20px;
}
.for_kids_content {
   position: relative;
   margin-top: 30px;
   width: 930px;
   height: 390px;
   margin: 0 auto;
}
.for_kids_point {
   visibility: hidden;
   position: absolute;
   width: 188px;
   height: 172px;
   background: url(../images/forkids_point_bg.svg) no-repeat;
   color: #FFF9EA;
   text-align: center;
   padding-top: 60px;
   line-height: 1.5em;
}
.for_kids_point_1 {
   top: 0px;
   left: 0px;
}
.for_kids_point_2 {
   top: 140px;
   left: 140px;
}
.for_kids_point_3 {
   top: 0px;
   left: 280px;
}
.for_kids_point_4 {
   top: 140px;
   left: 420px;
   padding-top: 75px;
}
.for_kids_point_5 {
   top: 0px;
   left: 618px;
   width: 312px;
   height: 290px;
   background: url(../images/forkids_point_l_bg.svg) no-repeat;
}
.for_kids_point ul {
   width: 250px;
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   margin: 10px auto;
}
.for_kids_point li {
   height: 30px;
   background-color: #F0E2CB;
   border-radius: 15px;
   padding: 5px 15px;
   margin: 5px;
   color: #653013;
   font-size: 14px;
}

/* -----------------------------------------------
  access
----------------------------------------------- */
#access {
   text-align: center;
}
#access h2 {
   visibility: hidden;
   font-size: 36px;
   font-family: 'Cabin Sketch';
   letter-spacing: 0.2em;
   margin: 30px 0;
   width: 100%;
}
#access span {
   margin: 0 7px;
}
#access iframe {
   width: 100%;
   height: 500px;
   border: none;
   margin: 30px 0 10px;
}
.access_info {
   visibility: hidden;
}
.access_map_info {
   max-width: 1000px;
   margin: 0 auto;
}
.access_map_info a {
   display: block;
   width: 210px;
   height: 28px;
   margin: 0 20px 80px auto;
   background: url(../images/link_right_arrow.svg) center bottom no-repeat;
}

/* -----------------------------------------------
  footer
----------------------------------------------- */
footer {
   width: 100%;
   height: 300px;
   background-color: rgba(101, 48, 19, 0.2);
   text-align: center;
   padding: 60px 0 20px;
   font-size: 14px;
}
footer p {
   line-height: 1.4em;
}
.footer_logo {
   display: block;
   width: 200px;
   height: 70px;
   margin: 0 auto 10px;
   background: url(../images/logo_m.png) no-repeat center center;
   background-size: 200px;
}
.footer_info_links {
   display: flex;
   flex-wrap: nowrap;
   margin: 7px 0;
   width: 150px;
   margin: 5px auto;
}

/* -----------------------------------------------
  page_header
----------------------------------------------- */
#page_header {
   text-align: center;
   padding: 135px 0 0;
}
#page_header h1 {
   visibility: hidden;
   width: 480px;
   height: 260px;
   margin: 0 auto;
   padding: 120px 0;
   background: url(../images/page_header_bg.svg) no-repeat center center;
   font-size: 36px;
   font-family: 'Cabin Sketch';
   letter-spacing: 0.2em;
   color: #fff;
}
.page_title_comment {
   visibility: hidden;
   font-size: 13px;
   color: #9B715B;
   margin: 20px auto 0;
}

/* -----------------------------------------------
  menu_page
----------------------------------------------- */
#menu_page {
   max-width: 960px;
   margin: 0 auto;
   display: flex;
   flex-wrap: wrap;
   padding: 0 20px;
}
#menu_page h2 {
   visibility: hidden;
   position: relative;
   width: 100%;
   max-width: 650px;
   height: 98px;
   text-align: center;
   font-size: 30px;
   letter-spacing: 0.2em;
   padding-top: 30px;
   margin: 50px auto 40px;
   background: url(../images/title_line.svg) no-repeat center bottom 7px;
}
#menu_page h2>span.caption {
   display: block;
   font-size: 13px;
   letter-spacing: 0.03em;
   line-height: 2.0em;
}
#menu_page h2 .balloon {
   position: absolute;
   top: 0;
   right: -20px;
}
#menu_page h3 {
   font-size: 18px;
   font-weight: bold;
   margin: 10px 0 15px;
   letter-spacing: 0.06em;
}
#menu_page h3>span {
   margin-left: 20px;
   font-weight: normal;
}
#menu_page hr {
   visibility: hidden;
   width: 100%;
   border: dashed #C19781 0.5px;
   margin: 20px 0;
}
#menu_page>div>span {
   font-size: 13px;
   color: #9B715B;
   display: block;
   margin: -2px 0 5px;
   line-height: 1.5em;
}
#menu_page>div>span.menu_caption {
   margin-top: -12px;
}
.menu_img_m {
   width: 45%;
   float: right;
   margin: 10px 0 15px 10px;
}
.menu_img_s {
   width: 150px;
   margin: 10px 20px 15px 10px;
   float: right;
}
.menu_box {
   visibility: hidden;
   margin-bottom: 20px;
}
.comment_box {
   visibility: hidden;
   clear: right;
   padding: 15px;
   background-color: rgba(255, 255, 255, 0.3);
   font-size: 14px;
   line-height: 1.5em;
   margin-bottom: 30px;
}
.comment_box>p {
   font-weight: bold;
   margin-bottom: 5px;
}
.comment_box>p>span {
   font-size: 13px;
   font-weight: normal;
   margin-left: 20px;
   color: #9B715B;
}
.comment_box>ul {
   list-style: none;
   display: flex;
   flex-wrap: wrap;
}
.caption_box {
   visibility: hidden;
   margin: 20px 0;
}

/* -----------------------------------------------
  subpage_header
----------------------------------------------- */
#subpage_header {
   text-align: center;
   padding: 165px 0 50px;
}
#subpage_header h1 {
   visibility: hidden;
   font-size: 40px;
   font-family: 'Cabin Sketch';
   letter-spacing: 0.1em;
   line-height: 1.2em;
}
#subpage_header h1>span {
   display: block;
   font-size: 15px;
   font-family: 'Cabin', 'Noto Sans JP', sans-serif;
   letter-spacing: 0.03em;
   margin-top: -10px;
}
.page_description {
   visibility: hidden;
   position: relative;
   max-width: 460px;
   height: 230px;
   background: url(../images/page_description_bg.svg) no-repeat center center;
   margin: 40px auto 0;
   padding: 90px 0;
}
.page_description .balloon {
   position: absolute;
   top: 0;
   right: -20px;
}
.subpage_title_comment {
   visibility: hidden;
   font-size: 13px;
   color: #9B715B;
   margin: 20px auto 0;
}

/* -----------------------------------------------
  subpage
----------------------------------------------- */
#subpage {
   max-width: 960px;
   margin: 0 auto 100px;
   padding: 0 20px;
}

.gallery {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}
.gallery a {
   visibility: hidden;
   display: block;
   box-sizing: border-box;
   width: 25%;
   padding: 5px;
   margin: 0;
   line-height: 0;
}
.gallery a img {
   width: 100%;
   border: 3px rgba(255, 255, 255, 0.7) solid;
   margin: 0;
}


/* ------------------------------------------------------------------ */
/* Modal Dialog
/* ------------------------------------------------------------------ */
.modal-overlay {
   z-index: 1000;
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   background-color: rgba(0,0,0,.5);
 }
.modal-content {
   position: fixed;
   display: none;
   z-index: 1010;
   box-sizing:border-box;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   background-color: #e5e2d4;
   width: calc(100% - 20px);
   max-width: 700px;
   height: calc(100vh - 60px);
   max-height: 700px;
 }
a.modal-close {
   position:absolute;
   top: 0;
   right: 15px;
   color: #653013;
   font-size: 35px;
   line-height: 1;
   font-weight: normal;
   text-decoration: none;
   cursor: pointer;
 }

.modal-container {
   margin: 0;
}
.modal-inner {
   display: block;
   padding: 60px 60px 35px;
   height: calc(100vh - 150px);
   overflow-y: scroll;
}
.modal-bottom-button {
   position: absolute;
   bottom: 40px;
   left: 50%;
   transform: translateX(-50%);
}
.modal-content h4 {
   text-align: center;
   margin: 0 auto 15px;
   padding-bottom: 10px;
   font-size: 18px;
   background: url(../images/title_line.svg) no-repeat center bottom;
}
.modal-content div.reservation-info {
   margin-bottom: 28px;
   text-align: center;
}
.modal-content div.reservation-info img.qr {
   width: 120px;
}
.modal-content div.reservation-info a.button-line {
   display: block;
   margin: 15px auto;
}
.modal-content p.reservation-tel {
   width: 100%;
   text-align: center;
   font-size: 20px;
   font-weight: 700;
   margin-bottom: 7px;
}
.modal-content ul {
   margin: 10px auto;
   list-style-position: inside;
}
.modal-content ul.reservation-line {
   list-style: none;
   display: flex;
}
.modal-content ul.reservation-line li {
   width: 50%;
   text-align: center;
   line-height: 1.5;
   margin: 5px;
   background-color: #ffffff;
   border-radius: 10px;
   padding: 15px 10px 10px;
}
.modal-content ul.reservation-line li p.title {
   margin-bottom: 10px;
}
.modal-content ul.reservation-line li p.caption {
   color: #9B715B;
   font-size: 13px;
   margin-bottom: 15px;
}
.modal-content div.note {
   text-align: center;
   margin: 10px auto 3px;
   font-size: 14px;
}
.modal-content div.notice {
   text-align: center;
   font-size: 12px;
   color: #9B715B;
   line-height: 1.5;
}
.modal-bottom-close {
   width: 120px;
   height: 50px;
   background-color: #653013;
   border-radius: 18px;
   color: #FFF9EA;
   font-size: 13px;
   line-height: 1;
   padding-top: 18px;
}