@charset "UTF-8";
/* base.css 2.0.4 2019.5.31 */
/*===========
    ベース
===========*/
html { font-size: 62.5%; }
body {
    font-family: 'Nunito', 'Noto Sans JP', 'YuGothic', sans-serif;
    font-size: 3.413vw;
    /* letter-spacing: -0.03rem; */
}

section, nav { padding: 25px 0; }
/* section, nav { padding: 80px 0; margin: -55px 0; } */
section.page-header { padding: 0; }

h1, h2, h3, h4, h5, h6 { margin-bottom : .853vw; }

p, ul { margin-bottom: 0; }

span.break::before { content:'\A'; white-space: pre; }

main { padding-top: 80px; background-color: #f7f3ed; }

.col-6-left { padding-right: 7.5px; }
.col-6-right { padding-left: 7.5px; }

span.br-sp::before, span.br-sp-pc::before { content: "\A"; white-space: pre; }


/*============
    背景色
============*/
.bg-white { background: #fff; }
.bg-beige { background: #f7f3ed; }
.bg-thick-beige { background: #cea971; }


/*============
　　 パーツ
============*/
.section-title { text-align: center; }
.section-title h2, .section-title h3 { font-size: 4.26vw; font-weight: bold; letter-spacing: .426vw; }
.section-title p { font-size: 2.6vw; line-height: 3.2vw; margin-bottom: .2rem; }


.slash {
    position: relative;
    display: inline-block;
    padding: 0 45px;
}

.slash:before, .slash:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 44px;
  height: 2px;
  background-color: black;
}

.slash:before { -webkit-transform: rotate(60deg); transform: rotate(60deg); left:0; }
.slash:after { -webkit-transform: rotate(-60deg); transform: rotate(-60deg); right: 0; }


/*=============
     ボタン
==============*/
.btn { margin: 2.13vw 0; padding: 1.6vw 1.6vw; font-size: 4.26vw; }
.btn-large { padding: 3.84vw 6.826vw; }
.btn-wrapper { margin: 3.84vw 0; text-align: center; }
.btn-wrapper h5 { font-size: 3.84vw; font-weight: bold; }
.btn-wrapper p { margin-bottom: 0!important; }
.btn-beige { background: #cea971; color: #fff; }
.btn-beige:hover { background: #dbc097; color: #fff; }
.color-beige { color: #cea971; }

/* .btn-beige-outline { background: #fff; border: 2px solid #cea971; border-radius: 6.826vw; color: #000; } */
.btn-beige-outline { background: #fff; border-radius: 6.826vw; color: #666; }
.btn-beige-outline i { color: #cea971; }

/* border: 2px solid #cea971; */
border-radius: 6.826vw;
.btn-beige-outline:hover { background: #dbc097; color: #fff; }

.btn-black-outline { background: #fff; border: 2px solid #000; color: #000; }
.btn-black-outline:hover { color: #000; opacity: 0.6; text-decoration: none; }

.btn.disabled { opacity: 0.5; }

.btn-right-arrow::after {
    font-family: "Font Awesome 5 Free";
    content: "\f054";
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-weight: bold;
    line-height: 1;
    padding-left: .5rem;
}


/*=============
　　サブメニュー
==============*/
.sub-menu ul {
    list-style-type: none;
    padding-left: 0;
}
.sub-menu ul.inline li { display: inline-block; }
.sub-menu .btn
.sub-menu .btn-block { display: block; }
.sub-menu .btn-md-inline { display: block; }


/* p { font-size: 3.413vw; line-height: 5.973vw; margin-bottom: 0; color: #333; } */
p { font-size: 3.413vw; color: #333; }

a { color: #cea971; }
a:hover { color: #cea971; opacity: 0.6; text-decoration: none; }

small { font-size: 60%; }

/*===============
* slickカスタマイズ
===============*/
.slick-prev, .slick-next { display: none!important; }
.slick-dots { text-align: right; }
.slick-dots li { margin: 0; width: 15px; height: 10px; }
.slick-dots li button::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 5px;
    border: 2px solid #cea971;
    opacity: 1;
}
.slick-active button::before {
    opacity: 1;
    background-color: #cea971;
}



.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    background-color: rgba(0, 0, 0, .8);
}

.loader-inner {
    position: absolute;
    top: 50%;
    left: 50%;
}

.loader-wrapper.hidden {
    display: none;
}


/*===============
ページネーション
===============*/
ul.pagination { margin: 0 auto; }
.page-link { border: none; font-size: 4.26vw; color: #000; font-weight: bold; }
.page-item.disabled .page-link { color: #bebebe; }
.page-item .page-link { display: table-cell; width: 10vw; height: 10vw; border-radius: 5vw; text-align: center; vertical-align: middle; }
.page-item.active .page-link { background-color: #cea971; }


/*===============
* 共通 見出し
===============*/
h5.normal {
    font-size: 3.84vw;
    font-weight: 600;
}


/*===============
* 共通 リスト
===============*/
ul.normal {
    padding-inline-start: 20px;
    margin-block-start: .5rem;
}


/*===============
* 共通 ページヘッダー
===============*/
.header-images img { width: 100%; height: calc(75%*1365/2048); border-radius: 25px; }

.page-header-title { text-align: center; margin-top: 3.84vw; }
.page-header-title h1 { font-size: 3.84vw; font-weight: bold; letter-spacing: .384vw; }
.page-header-title h2 { font-size: 3.413vw; }
.page-header-title::before {
    content: '';
    display: inline-block;
    width: 40px;
    height: 40px;
    background-size: contain;
    vertical-align: bottom;
}
.page-header-title.costume::before { background-image: url(../images/icon/icon-costume.png); }
.page-header-title.flow::before { background-image: url(../images/icon/icon-xylophone.png); }
.page-header-title.faq::before { background-image: url(../images/icon/icon-faq.png); }
.page-header-title.gallery::before { background-image: url(../images/icon/icon-gallery.png); }
.page-header-title.inquiry::before { background-image: url(../images/icon/icon-contact.png); }
.page-header-title.news::before { background-image: url(../images/icon/icon-camera.png); }
.page-header-title.plan::before { background-image: url(../images/icon/icon-plan.png); }
.page-header-title.product::before { background-image: url(../images/icon/icon-box.png); }
.page-header-title.privacy::before { background-image: url(../images/icon/icon-camera.png); }
.page-header-title.reserve::before { background-image: url(../images/icon/icon-calendar.png); }
.page-header-title.studio::before { background-image: url(../images/icon/icon-camera.png); }


/*===============
* 割引価格 表記
===============*/
.fixed-price.discounting {
    text-decoration: line-through;
    text-decoration-color: #dc3545;
    text-decoration-style: double;
}

div.discount { width: 100%; text-align: center; }
div.discount-detail { background-color: #dc3545; padding: 1.2vw; }
div.discount-detail p { color: #fff; font-size: 3.2vw; line-height: 3.4vw; }
div.discount-price p { color: #dc3545; font-size: 5.12vw; font-weight: 600; text-align: center; }

/*===============
* coming soon!
===============*/
.comingsoon { text-align: center; }
.comingsoon img { width: 300px; }

/*===============
* グローバルナビバー
===============*/
header {
    width: 100%;
    position: fixed;
    z-index: 99;
    background-color: #f7f3ed;
}

.header-pc-container { display: none; }
/* .pc-bottom-menu { display:none; } */

.bottom-menu {
    display: inline-block;
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 99;
}

.bottom-menu ul {
    list-style-type: none;
    padding-left: 0;
}

.bottom-menu li {
    display: inline-block;
    padding: 0 2px;
}

.bottom-menu img {
    height: 60px;
}


.header-container, .header-menu {
    width: 100%;
    height: 80px;
    position: relative;
    z-index: 99;
    display: block;
}

nav.overlay-menu { padding: 0; }
.overlay-menu, .sp-menu {
    display: block;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: rgba(255, 255, 255, 1.0);
    transition: 0.5s ease-in-out;
    opacity: 0;
    z-index: -100;
}

.open {
    opacity: 1.0;
    transition: 0.5s ease-in-out;
    z-index: 100;
}

.menu-item-list { text-align: center; }
.menu-item-list ul { list-style-type: none; padding-left: 0; }
.menu-item-list ul.contents-menu-list li { padding: 2.13vw 0; }
.menu-item-list ul.contents-menu-list li a { font-size: 4.28vw; font-weight: bold; color: #000; display: block; }
.menu-item-list ul.important-menu-list li a { font-weight: bold; }

.menu-sns { position: absolute; top: 29px; left: 20px; }
.menu-sns .fab { font-size: 8.52vw; margin: 0 .384vw; }
.menu-sns a { color: #000; }
.menu-sns a:hover { color: #000; }

.sns-inside-menu { text-align: center; }
.sns-inside-menu li { display: inline-block; }
.sns-inside-menu .fab { font-size: 10vw; margin: 2vw; }
.sns-inside-menu a { color: #555555; }
.sns-inside-menu a:hover { color: #626262; }

.menu-btn-wrapper { display: inline-block; position: absolute; top: 10px; right: 20px; }
.menu-btn-wrapper ul { display: inline-block; list-style-type: none; padding-left: 0; }
.menu-btn-wrapper ul li { display: inline-block; }
.reserve-inquiry-btn-list { position: fixed; bottom: 10px; }
.reserve-inquiry-btn-list li { margin-top: 5px; }

.menu-btn-item { cursor: pointer; }
.menu-btn-item a:hover { opacity: 1; }
.menu-btn-item img { width: 60px; }
.menu-btn { cursor: pointer; position: absolute; top: 10px; right: 20px; }
.menu-btn img { width: 60px; }

.header-container h1, .header-menu h1 {
    display: inline-block;
    margin-bottom: 0px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateY(0%) translateX(-50%);
    -webkit-transform: translateY(0%) transform(-50%);
}

.header-container h1 img, .header-menu h1 img { height: 80px; padding: 15px 0; }

.sp-menu-list img {
    width: 100px;
}

.sp-menu-content ul {
    list-style-type: none;
    padding-inline-start: 0;
    -webkit-padding-start: 0;
    margin: 0 auto;
    text-align: center;
}

.sp-menu-content li {
    display: inline-block;
    padding: 10px 5px;
}

.sp-menu-inquiry { text-align: center; padding-top: 20px; }
.sp-menu-inquiry img { height: 50px; }
.sp-menu-reserve { text-align: center; padding: 20px 0; }
.sp-menu-reserve img { height: 50px; }

.sp-menu-reserve-non-web-reserve-wrap {
    padding: 20px 30px;
}

.sp-menu-reserve-non-web-reserve {
    border: 2px solid #cea971;
    border-radius: 20px;
}

.sp-menu-reserve-non-web-reserve p {
    text-align: center;
    margin-bottom: 0;
}

.tel-link {
    font-size: 6.826vw;
    font-weight: 600;
    padding: 5px 0;
}

.tel-link a { color: #000; }
.tel-link a:hover { color: #000; }

.sp-menu-sns {
    text-align: center;
    font-size: 3rem;
    color: #cea971!important;
}

.remodal {
    padding: 10px;
    border-radius: 20px;
}

.remodal-confirm, .remodal-cancel {
    font-size: 3.84vw;
}

/*====================
* ページ共通 / セクション
====================*/
section.header { padding: 120px 0 40px 0; }   /* グローバルナビバー用80px */

section.header h2 { text-align: center; }

section.header h2 img { width: 80px; }






.container-section { padding-top: 40px; padding-bottom: 40px; }

.section-title { padding-bottom: 20px; }
.section-title img { width: 100px; }

.row-eq-height {
    display: flex;
    flex-wrap: wrap;
}



.child-page-top-section {
    text-align: left;
}

.child-page-top-section h4, .internal-link h4 {
    font-size: 4.26vw;
    font-weight: 600;
    margin-bottom: 4.26vw;
    text-align: center;
}

.child-page-top-section h4 span, .internal-link h4 span {
    position: relative;
    display: inline-block;
    margin-bottom: 1em;
}

.child-page-top-section h4 span:before, .internal-link h4 span:before {
    content: '';
    position: absolute;
    bottom: -15px;
    display: inline-block;
    width: 100px;
    height: 4px;
    left: 50%;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #cea971;
    border-radius: 2px;
}

.child-page-top-section p, .internal-link p {
    font-size: 3.413vw;
    line-height: 5.973vw;
    letter-spacing: 0;
    text-align: left;
}

.link-btn { text-align: center; }