/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: 0.67em 0
}

hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

img {
    border-style: none
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: 0.35em 0.75em 0.625em
}

legend {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type="checkbox"],
[type="radio"] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
p,
span,
ul,
ol,
li,
dl,
dt,
dd,
table,
tr,
th,
td,
form,
select,
option,
address,
pre,
strong,
em,
figure {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 100%;
    font-style: normal;
    margin: 0;
    padding: 0;
    text-decoration: none
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0
}

html {
    font-size: 62.5%
}

@media screen and (max-width: 768px) {
    a [href^="tel:"] {
        pointer-events: none
    }
}

em {
    font-style: normal
}

img {
    border: 0;
    height: auto;
    max-width: 100%;
    vertical-align: bottom;
    width: auto
}

li {
    list-style: none
}

p {
    margin-bottom: 20px
}

strong {
    font-weight: bold
}

table {
    border-collapse: collapse
}

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

@font-face {
    font-family: 'Noto Sans JP Woff';
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/NotoSansJPSubsetWoff-Regular.woff") format("woff")
}

@font-face {
    font-family: 'Noto Sans JP Woff';
    font-style: normal;
    font-weight: 900;
    src: url("../fonts/NotoSansJPSubsetWoff-Black.woff") format("woff")
}

@font-face {
    font-family: 'Fredericka the Great Woff';
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/FrederickatheGreat-Regular.woff") format("woff")
}

body {
    background-color: #fff;
    background-size: auto;
    color: #333;
    font-size: 1.6rem;
    /* font-family: 'Noto Sans JP', 'Noto Sans JP Woff', "メイリオ", Meiryo, "Meiryo UI", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif, Arial, Helvetica; */
    font-weight: 400;
    line-height: 1.5;
    overflow-x: hidden
}

@media screen and (max-width: 960px) {
    body {
        font-size: 1.5rem
    }
}

@media screen and (max-width: 414px) {
    body {
        font-size: 1.4rem
    }
}

.layout-header {
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(1, 94, 234, 0.7)), to(rgba(0, 192, 250, 0.7)));
    background-image: linear-gradient(90deg, rgba(1, 94, 234, 0.7), rgba(0, 192, 250, 0.7));
    background-position: left top;
    background-repeat: no-repeat;
    border-bottom: 30px solid rgba(2, 116, 237, 0.4);
    color: #fff;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99
}

@media screen and (max-width: 991px) {
    .layout-header {
        border-bottom-width: 15px
    }
}

@media screen and (max-width: 600px) {
    .layout-header {
        border-bottom-width: 10px
    }
}

.globalHeader {
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 15px;
    width: 100%
}

.globalHeader .globalNav {
    font-family: 'Noto Sans JP', 'Noto Sans JP Woff', sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    font-display: swap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 95px;
    margin: 0 auto;
    width: 100%;
    z-index: 110
}

.globalHeader .globalNav .brandLogo {
    background-color: #fff;
    border: 11px solid #fff;
    border-radius: 0 0 65px 65px;
    height: 130px;
    max-width: 130px;
    margin-right: 20px;
    padding: 0;
    position: relative;
    width: 130px;
    z-index: 120
}

.globalHeader .globalNav .brandLogo a {
    display: block;
    width: 100%
}

.globalHeader .globalNav .globalNavInner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 95px;
    width: calc(100% - 150px)
}

.globalHeader .globalNav .globalNavInner .brandName {
    color: #fff;
    line-height: 1;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
    width: 280px;
    text-align: center;
}

.globalHeader .globalNav .globalNavInner .brandName:hover,
.globalHeader .globalNav .globalNavInner .brandName:active,
.globalHeader .globalNav .globalNavInner .brandName:focus {
    color: rgba(255, 245, 64, 0.95);
    text-decoration: none
}

.globalHeader .globalNav .globalNavInner .brandName p {
    font-size: 1.6rem;
    line-height: 1;
    margin: 0
}

.globalHeader .globalNav .globalNavInner .brandName p span {
    display: block;
    font-size: 2.4rem;
    letter-spacing: -1px;
    padding: 2px 0;
    line-height: 1.2
}

.globalHeader .globalNav .globalNavInner .globalInfo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    max-width: 610px;
    width: calc(100% - 260px)
}

.globalHeader .globalNav .globalNavInner .globalTel {
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 1;
    margin-right: 30px;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
    width: calc(100% - 280px)
}

.globalHeader .globalNav .globalNavInner .globalTel:hover,
.globalHeader .globalNav .globalNavInner .globalTel:active,
.globalHeader .globalNav .globalNavInner .globalTel:focus {
    color: rgba(255, 245, 64, 0.95);
    opacity: 1;
    text-decoration: none
}

.globalHeader .globalNav .globalNavInner .globalTel:hover .iconTel img,
.globalHeader .globalNav .globalNavInner .globalTel:active .iconTel img,
.globalHeader .globalNav .globalNavInner .globalTel:focus .iconTel img {
    opacity: inherit
}

.globalHeader .globalNav .globalNavInner .globalTel .iconTel {
    margin-right: 10px
}

.globalHeader .globalNav .globalNavInner .globalTel .dataTel p {
    line-height: 1;
    margin-bottom: 0
}

.globalHeader .globalNav .globalNavInner .globalTel .dataTel .heading {
    font-size: 1.5rem;
    margin-bottom: 1px
}

.globalHeader .globalNav .globalNavInner .globalTel .dataTel .telNo {
    font-family: 'Noto Sans JP', 'Noto Sans JP Woff', sans-serif;
    font-size: 3.6rem;
    font-weight: 900;
    font-display: swap
}

.globalHeader .globalNav .globalNavInner .globalTel .dataTel .openTime {
    font-size: 1.2rem;
    margin-top: 5px
}

.globalHeader .globalNav .globalNavInner .headerBtn.btn {
    margin: 0;
    max-width: 250px
}

.globalHeader .globalNav .globalNavInner .headerBtn.btn a {
    font-size: 2.2rem;
    line-height: 1;
    padding: 24px 12px 24px 12px
}

.globalHeader .globalMenu {
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 30px;
    margin-bottom: -30px;
    padding-left: 150px;
    width: 100%;
    z-index: 105
}

.globalHeader .globalMenu .item {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    margin: 0 5px 0 0;
    position: relative
}

.globalHeader .globalMenu .item>a {
    background-color: rgba(0, 160, 233, 0.9);
    color: #fff;
    display: block;
    font-size: 1.8rem;
    letter-spacing: 2px;
    line-height: 1;
    padding: 6px 15px;
    text-align: center;
    -webkit-transition: 0.25s;
    transition: 0.25s;
    width: 100%
}

.globalHeader .globalMenu .item>a:hover,
.globalHeader .globalMenu .item>a:active,
.globalHeader .globalMenu .item>a:focus {
    background-color: rgba(0, 62, 115, 0.9);
    text-decoration: none
}

@media screen and (max-width: 1200px) {
    .globalHeader .globalNav .globalNavInner .globalTel {
        margin-right: 20px;
        width: 270px
    }
    .globalHeader .globalNav .globalNavInner .globalTel .iconTel {
        width: 60px
    }
    .globalHeader .globalNav .globalNavInner .globalTel .dataTel .heading {
        font-size: 1.4rem;
        margin-bottom: 2px
    }
    .globalHeader .globalNav .globalNavInner .globalTel .dataTel .telNo {
        font-size: 2.8rem
    }
    .globalHeader .globalNav .globalNavInner .globalTel .dataTel .openTime {
        font-size: 1.2rem;
        margin-top: 3px
    }
    .globalHeader .globalNav .globalNavInner .headerBtn.btn {
        max-width: 240px
    }
    .globalHeader .globalNav .globalNavInner .headerBtn.btn a {
        font-size: 2.2rem;
        padding: 19px 12px 19px 12px
    }
}

@media screen and (max-width: 991px) {
    .globalHeader .globalNav .brandLogo {
        border-width: 5px 8px 8px 8px;
        border-radius: 0 0 60px 60px;
        height: 118px;
        max-width: 118px;
        margin-right: 15px;
        width: 118px
    }
    .globalHeader .globalNav .globalNavInner {
        width: calc(100% - 133px)
    }
    .globalHeader .globalNav .globalNavInner .brandName {
        width: 70%
    }
    .globalHeader .globalNav .globalNavInner .brandName p {
        font-size: calc(3 * ((100vw - 600px) / 391) + 1.3rem)
    }
    .globalHeader .globalNav .globalNavInner .brandName p span {
        font-size: calc(5 * ((100vw - 600px) / 391) + 1.9rem)
    }
    .globalHeader .globalNav .globalNavInner .globalInfo {
        position: fixed;
        bottom: 0;
        background-image: -webkit-gradient(linear, left top, right top, from(rgba(1, 94, 234, 0.7)), to(rgba(0, 192, 250, 0.7)));
        background-image: linear-gradient(90deg, rgba(1, 94, 234, 0.7), rgba(0, 192, 250, 0.7));
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin: 0;
        left: 0;
        max-width: 100%;
        padding: 2px 10px;
        width: 100%
    }
    .globalHeader .globalNav .globalNavInner .globalTel {
        background-color: #0274ed;
        border-radius: 10px;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin: 0 5px 0 0;
        max-width: 240px;
        padding: 6px 2px;
        width: 100%
    }
    .globalHeader .globalNav .globalNavInner .globalTel:hover,
    .globalHeader .globalNav .globalNavInner .globalTel:active,
    .globalHeader .globalNav .globalNavInner .globalTel:focus {
        background-color: #003e73;
        color: #fff
    }
    .globalHeader .globalNav .globalNavInner .globalTel .iconTel {
        margin-right: 4px;
        width: 32px
    }
    .globalHeader .globalNav .globalNavInner .globalTel .dataTel .heading {
        display: none
    }
    .globalHeader .globalNav .globalNavInner .globalTel .dataTel .telNo {
        font-size: 1.5rem
    }
    .globalHeader .globalNav .globalNavInner .globalTel .dataTel .openTime {
        font-size: 1.0rem;
        margin-top: 3px
    }
    .globalHeader .globalNav .globalNavInner .globalTel .dataTel .openTime span {
        display: none
    }
    .globalHeader .globalNav .globalNavInner .headerBtn {
        max-width: 240px;
        width: 100%
    }
    .globalHeader .globalNav .globalNavInner .headerBtn.btn {
        max-width: 240px
    }
    .globalHeader .globalNav .globalNavInner .headerBtn.btn a {
        font-size: 1.6rem;
        padding: 13px 12px 15px 12px
    }
    .globalHeader .globalMenu {
        display: none
    }
}

@media screen and (max-width: 600px) {
    .globalHeader .globalNav {
        height: 75px
    }
    .globalHeader .globalNav .brandLogo {
        border-width: 5px;
        border-radius: 0 0 38px 38px;
        height: 76px;
        max-width: 76px;
        margin-right: 8px;
        width: 76px
    }
    .globalHeader .globalNav .globalNavInner {
        height: 75px;
        width: calc(100% - 136px)
    }
    .globalHeader .globalNav .globalNavInner .brandName {
        width: 100%
    }
    .globalHeader .globalNav .globalNavInner .brandName p {
        font-size: 1.2rem
    }
    .globalHeader .globalNav .globalNavInner .brandName p span {
        font-size: 1.6rem
    }
    .globalHeader .globalNav .globalNavInner .headerBtn {
        max-width: 140px;
        width: 100%
    }
    .globalHeader .globalNav .globalNavInner .headerBtn.btn {
        max-width: 240px
    }
    .globalHeader .globalNav .globalNavInner .headerBtn.btn a {
        font-size: 1.4rem;
        padding: 14px 8px 16px 8px
    }
}

.hamburgerMenu {
    display: none
}

@media screen and (max-width: 991px) {
    .hamburgerMenu {
        background-color: transparent;
        border: 0;
        cursor: pointer;
        display: inline-block;
        height: 28px;
        margin: 9px 5px 8px auto;
        padding: 0;
        position: absolute;
        right: 15px;
        top: 33px;
        width: 38px
    }
    .hamburgerMenu:focus {
        outline-style: none
    }
    .hamburgerMenu::before {
        color: #fff;
        content: "MENU";
        display: block;
        font-family: 'Noto Sans JP', 'Noto Sans JP Woff', sans-serif;
        font-size: 1.3rem;
        font-weight: 400;
        font-display: swap;
        left: 0;
        position: absolute;
        text-decoration: none;
        text-align: center;
        top: -18px;
        white-space: nowrap;
        width: 100%
    }
    .hamburgerMenu span {
        background-color: #fff;
        border-radius: 4px;
        display: inline-block;
        left: 0;
        height: 4px;
        position: absolute;
        -webkit-transition: all .4s;
        transition: all .4s;
        width: 100%
    }
    .hamburgerMenu span:nth-of-type(1) {
        top: 0
    }
    .hamburgerMenu span:nth-of-type(2) {
        top: 12px
    }
    .hamburgerMenu span:nth-of-type(3) {
        bottom: 0
    }
    .hamburgerMenu.is-active::before {
        content: "CLOSE";
        top: -20px
    }
    .hamburgerMenu.is-active span:nth-of-type(1) {
        -webkit-transform: translateY(10px) rotate(-45deg);
        transform: translateY(10px) rotate(-45deg)
    }
    .hamburgerMenu.is-active span:nth-of-type(2) {
        opacity: 0
    }
    .hamburgerMenu.is-active span:nth-of-type(3) {
        -webkit-transform: translateY(-15px) rotate(45deg);
        transform: translateY(-15px) rotate(45deg)
    }
}

@media screen and (max-width: 600px) {
    .hamburgerMenu {
        top: 23px
    }
}

body {
    position: relative
}

.layout-contents {
    margin: 0 auto;
    position: relative;
    z-index: 10;
    overflow: hidden
}

.sectionInner {
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 15px;
    width: 100%
}

.sectionInner.wide {
    margin: 0 auto;
    max-width: 1200px;
    padding: 0;
    width: 100%
}

@media screen and (max-width: 600px) {
    .sectionInner {
        max-width: 545px
    }
}

.footer .scrollTop {
    position: fixed;
    bottom: 120px;
    right: 120px;
    z-index: 10
}

.footer .scrollTop a {
    background: #ff830a;
    border-radius: 10px;
    display: block;
    height: 80px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    -webkit-transition: 0.25s;
    transition: 0.25s;
    width: 80px
}

.footer .scrollTop a::after {
    bottom: 0;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    content: "";
    display: block;
    height: 20px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 10px;
    width: 20px
}

.footer .scrollTop a:hover,
.footer .scrollTop a:active,
.footer .scrollTop a:focus {
    background-color: #ff5c0a
}

@media screen and (max-width: 991px) {
    .footer {
        padding-bottom: 50px
    }
    .footer .scrollTop {
        bottom: 140px;
        right: 90px
    }
    .footer .scrollTop a {
        height: 70px;
        width: 70px
    }
    .footer .scrollTop a::after {
        height: 18px;
        top: 9px;
        width: 18px
    }
}

@media screen and (max-width: 600px) {
    .footer .scrollTop {
        bottom: 120px;
        right: 70px
    }
    .footer .scrollTop a {
        height: 60px;
        width: 60px
    }
    .footer .scrollTop a::after {
        height: 15px;
        top: 8px;
        width: 15px
    }
}

.footer {
    background-color: #fbf6ee;
    padding-top: 40px;
    width: 100%
}

.footer .copyWrapper {
    background-color: #fbf6ee;
    border-top: 1px solid #333;
    margin-top: 70px;
    width: 100%
}

.footer .copy {
    color: #333;
    font-size: 1.6rem;
    margin: 0;
    padding: 12px 15px;
    text-align: center
}

.footer .footerInner {
    margin: 0 auto;
    max-width: 990px;
    padding: 0 15px;
    width: 100%
}

.footer .footerMenuWrapper {
    margin-bottom: 80px;
    width: 100%
}

.footer .footerMenuWrapper .footerMenu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.footer .footerMenuWrapper .footerMenu .item {
    border-right: 1px solid #333;
    border-left: 1px solid #333;
    line-height: 1;
    margin: 0 0 0 -1px;
    padding: 0 0.5em
}

.footer .footerMenuWrapper .footerMenu .item a {
    color: #333
}

.footer .footerMenuWrapper .footerMenu .item a:hover,
.footer .footerMenuWrapper .footerMenu .item a:active,
.footer .footerMenuWrapper .footerMenu .item a:focus {
    color: #003e73
}

.footer .footerInfo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.footer .footerInfo .footerMap {
    width: 50%
}

.footer .footerInfo .footerMap .mapWrapper iframe {
    height: 400px;
    max-width: 400px;
    width: 100%
}

.footer .footerInfo .storeInfo {
    width: 50%
}

.footer .footerInfo .storeInfo .heading {
    font-size: 3.0rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 50px
}

.footer .footerInfo .storeInfo .heading span {
    display: block;
    font-size: 2.0rem;
    font-weight: 400;
    margin-bottom: 10px
}

.footer .footerInfo .storeInfo .infoData .hidden {
    display: none
}

.footer .footerInfo .storeInfo .infoData a {
    color: #333
}

.footer .footerInfo .storeInfo .infoData a:hover,
.footer .footerInfo .storeInfo .infoData a:active,
.footer .footerInfo .storeInfo .infoData a:focus {
    color: #003e73
}

.footer .footerInfo .storeInfo .infoData dt.sns {
    opacity: 0
}

.footer .footerInfo .storeInfo .infoData dd {
    margin-bottom: 0.8em
}

.footer .footerInfo .storeInfo .infoData dd span {
    display: inline-block
}

.footer .footerInfo .storeInfo .infoData .sns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0.5em
}

.footer .footerInfo .storeInfo .infoData .sns .icon {
    margin-right: 20px;
    width: 31px
}

.footer .footerInfo .storeInfo .infoData .sns a {
    width: calc(100% - 51px)
}

@media screen and (max-width: 991px) {
    .footer {
        padding-top: 40px
    }
    .footer .copyWrapper {
        margin-top: 60px
    }
    .footer .copy {
        font-size: 1.5rem;
        padding: 12px 15px
    }
    .footer .footerMenuWrapper {
        margin-bottom: 60px
    }
    .footer .footerMenuWrapper .footerMenu {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
    .footer .footerMenuWrapper .footerMenu .item {
        margin-bottom: 5px
    }
    .footer .footerInfo {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
    .footer .footerInfo .footerMap {
        text-align: center;
        width: 100%
    }
    .footer .footerInfo .footerMap .mapWrapper iframe {
        height: 400px;
        max-width: 585px
    }
    .footer .footerInfo .storeInfo {
        margin-top: 30px;
        max-width: 585px;
        width: 100%
    }
    .footer .footerInfo .storeInfo .heading {
        font-size: 2.8rem;
        margin-bottom: 40px
    }
    .footer .footerInfo .storeInfo .heading span {
        font-size: 1.9rem;
        margin-bottom: 8px
    }
    .footer .footerInfo .storeInfo .infoData {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
    .footer .footerInfo .storeInfo .infoData dt {
        margin-bottom: 0.5em;
        width: 5em
    }
    .footer .footerInfo .storeInfo .infoData dt.sns {
        font-size: 1.2rem;
        width: 100%
    }
    .footer .footerInfo .storeInfo .infoData dd {
        margin-bottom: 0.5em;
        width: calc(100% - 5em)
    }
    .footer .footerInfo .storeInfo .infoData .sns {
        margin-bottom: 0.5em;
        width: 100%
    }
    .footer .footerInfo .storeInfo .infoData .sns .icon {
        margin-right: 15px
    }
    .footer .footerInfo .storeInfo .infoData .sns a {
        width: calc(100% - 46px)
    }
}

@media screen and (max-width: 600px) {
    .footer .footerInner {
        max-width: 545px
    }
    .footer .copy {
        font-size: 1.4rem
    }
    .footer .footerMenuWrapper {
        margin-bottom: 50px
    }
}

@media screen and (max-width: 414px) {
    .footer .copyWrapper {
        margin-top: 50px
    }
    .footer .copy {
        font-size: 1.3rem;
        padding: 12px 10px
    }
    .footer .footerMenuWrapper {
        margin-bottom: 40px
    }
    .footer .footerInfo .storeInfo .infoData {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
    .footer .footerInfo .storeInfo .infoData dt {
        margin-bottom: 0.5em;
        width: 5em
    }
    .footer .footerInfo .storeInfo .infoData dt.sns {
        font-size: 1.2rem;
        width: 100%
    }
    .footer .footerInfo .storeInfo .infoData dd {
        margin-bottom: 0.5em;
        width: calc(100% - 5em)
    }
    .footer .footerInfo .storeInfo .infoData .sns {
        margin-bottom: 0.5em;
        width: 100%
    }
    .footer .footerInfo .storeInfo .infoData .sns .icon {
        margin-right: 7px;
        width: 20px
    }
    .footer .footerInfo .storeInfo .infoData .sns a {
        font-size: 1.3rem;
        width: calc(100% - 27px)
    }
}

.heading--hidden {
    font-size: 0;
    height: 0;
    margin: 0;
    position: absolute;
    opacity: 0;
    width: 0
}

.heading--pagu {
    display: block;
    font-family: 'Noto Sans JP', 'Noto Sans JP Woff', sans-serif;
    font-size: 3.6rem;
    font-weight: 400;
    font-display: swap;
    line-height: 1;
    margin: 0 auto 20px;
    padding: 40px 0;
    text-align: center
}

.heading--pagu span {
    display: inline-block;
    padding: 0 0 0 65px;
    position: relative
}

.heading--pagu span::before {
    background-position: left top;
    background-repeat: no-repeat;
    bottom: 0;
    content: "";
    display: block;
    margin: auto;
    position: absolute;
    top: 0
}

.reasons .heading--pagu span {
    padding: 0 0 0 65px
}

.reasons .heading--pagu span::before {
    background-image: url("../img/top/paguppy_reason.png?20200612");
    height: 100px;
    left: -6px;
    width: 58px
}

.quickCheckIn .heading--pagu span {
    padding: 0 0 0 65px
}

.quickCheckIn .heading--pagu span::before {
    background-image: url("../img/top/paguppy_checkin.png");
    height: 113px;
    left: -6px;
    width: 59px
}

@media screen and (max-width: 991px) {
    .heading--pagu {
        font-size: calc(6 * ((100vw - 600px) / 391) + 3.0rem);
        margin: 0 auto 20px;
        padding: 30px 0;
        text-align: center
    }
    .heading--pagu span {
        text-align: left
    }
}

@media screen and (max-width: 600px) {
    .heading--pagu {
        font-size: 2.7rem
    }
}

@media screen and (max-width: 414px) {
    .heading--pagu {
        font-size: 2.3rem
    }
}

.heading--case {
    font-size: 2.0rem;
    font-weight: 400;
    margin-bottom: 20px;
    padding: 0 0 150px 0;
    position: relative
}

.heading--case::before {
    content: attr(data-title);
    display: block;
    font-family: 'Fredericka the Great', 'Fredericka the Great Woff', cursive;
    font-size: 13rem;
    font-weight: 400;
    font-display: swap;
    letter-spacing: 1px;
    left: 0;
    position: absolute;
    text-shadow: 4px 4px 2px rgba(51, 51, 51, 0.5)
}

.heading--case::after {
    background-position: left top;
    background-repeat: no-repeat;
    content: "";
    display: block;
    margin: auto;
    position: absolute
}

@media screen and (max-width: 600px) {
    .heading--case {
        font-size: calc(4 * ((100vw - 320px) / 280) + 1.6rem);
        padding-bottom: calc(20vw + 25px)
    }
    .heading--case::before {
        font-size: calc(44 * ((100vw - 320px) / 280) + 8.6rem)
    }
}

.group .heading--case::after {
    background-image: url("../img/top/paguppy_case1.png");
    height: 85px;
    left: calc(60px * 5);
    top: -4px;
    width: 63px
}

.family .heading--case::after {
    background-image: url("../img/top/paguppy_case2.png");
    height: 97px;
    left: calc(60px * 5.7);
    top: -16px;
    width: 73px
}

.luxury .heading--case::after {
    background-image: url("../img/top/paguppy_case3.png");
    height: 94px;
    left: calc(60px * 4.6);
    top: -12px;
    width: 65px
}

@media screen and (max-width: 600px) {
    .group .heading--case::after {
        background-size: 10vw;
        top: calc(-2vw + 13px);
        height: 85px;
        left: 13em;
        width: 10vw
    }
    .family .heading--case::after {
        background-size: 10vw;
        top: calc(-2vw + 13px);
        left: 15.7em;
        width: 10vw
    }
    .luxury .heading--case::after {
        background-size: 10vw;
        top: calc(-2vw + 13px);
        left: 13.5em;
        width: 10vw
    }
}

.txt--left {
    text-align: left !important
}

.txt--center {
    text-align: center !important
}

.txt--right {
    text-align: right !important
}

.image {
    margin-bottom: 30px
}

@media screen and (max-width: 600px) {
    .image {
        margin-bottom: 20px
    }
}

.with-line {
    border: 1px solid #bbb
}

.newline {
    display: inline-block;
    font-weight: inherit
}

.spacing--narrow1 {
    font-weight: inherit;
    letter-spacing: -1px
}

.spacing--narrow2 {
    letter-spacing: -2px
}

.spacing--narrow3 {
    font-weight: inherit;
    letter-spacing: -3px
}

.only--pc {
    display: block
}

.only--sp {
    display: none
}

@media screen and (max-width: 600px) {
    .only--pc {
        display: none
    }
    .only--sp {
        display: block
    }
}

a.disabled {
    color: #777;
    pointer-events: none
}

.ui-widget {
    font-family: 'Noto Sans JP', 'Noto Sans JP Woff', "メイリオ", Meiryo, "Meiryo UI", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif, Arial, Helvetica;
    font-weight: 400
}

.ui-datepicker th {
    font-weight: 900
}

.ui-widget-header {
    border: 0 solid rgba(153, 153, 153, 0.3);
    background: #d9efff;
    color: #333;
    font-weight: 900
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    border: 1px solid rgba(153, 153, 153, 0.3);
    background: #fff;
    font-weight: 400;
    color: #333;
    border-radius: 5px;
    text-align: center
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    border: 1px solid rgba(0, 160, 233, 0.5);
    background: rgba(217, 239, 255, 0.75);
    font-weight: 400;
    color: #333
}

.hero {
    background: #d9efff url("../img/top/bg_hero.jpg") no-repeat bottom center;
    background-size: cover;
    height: 825px;
    width: 100%
}

.hero .sectionInner {
    padding-top: 125px;
    max-width: 1170px
}

.hero .heroContents {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 30px;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.hero .heroBox {
    margin-right: calc(30/1170*100%);
    max-width: 780px;
    width: calc(780/1170*100%)
}

.hero .heroBox .titleBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 30px
}

.hero .heroBox .titleBox .heroLogo {
    width: 240px
}

.hero .heroBox .titleBox .title {
    margin-left: 20px
}

.hero .heroBox .titleBox .title .heading--sub {
    background-color: #fff;
    border-radius: 20px;
    color: #00a0e9;
    font-size: 1.65rem;
    margin: 12px 0 25px 0;
    padding: 1px 10px 3px;
    text-align: center;
    max-width: 520px;
    width: 100%
}

.hero .heroBox .titleBox .title .heading--sub>br {
    display: none
}

.hero .heroBox .titleBox .title .heading--sub span {
    color: #003e73;
    font-size: 2.4rem;
    padding: 0 4px
}

.hero .heroBox .titleBox .title .heading {
    max-width: 515px;
    width: 100%
}

.hero .heroBox .pointBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.hero .heroBox .pointBox .item {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 30px;
    margin-left: 15px;
    padding: 18px 8px 20px;
    text-align: center;
    width: 250px
}

.hero .heroBox .pointBox .item:first-child {
    margin-left: 0
}

.hero .heroBox .pointBox .item .merit {
    font-family: 'Noto Sans JP', 'Noto Sans JP Woff', sans-serif;
    font-size: 2.8rem;
    font-weight: 900;
    font-display: swap;
    line-height: 1;
    margin: 15px auto
}

.hero .heroBox .pointBox .item .merit span {
    margin-top: 8px;
    display: inline-block
}

.hero .heroBox .pointBox .item .text {
    line-height: 1.2;
    margin-bottom: 0
}

.hero .reserveBox {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 15px;
    max-width: 360px;
    width: calc(360/1170*100%)
}

.hero .reserveBox .heading--reserve {
    background-color: #00a0e9;
    border-radius: 15px 15px 0 0;
    color: #fff;
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 1;
    padding: 19px 15px 19px 90px;
    position: relative
}

.hero .reserveBox .heading--reserve::before {
    background: url("../img/top/paguppy_reserve.png?20200612") no-repeat top center;
    bottom: 0;
    content: "";
    left: 10px;
    height: 74px;
    position: absolute;
    width: 64px
}

.hero .reserveBox .reserveBoxInner {
    padding: 30px 20px 20px 20px
}

.hero .reserveBox .reserveBoxInner .reserveInput .heading {
    font-size: 2.4rem;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1;
    margin-bottom: 5px
}

.hero .reserveBox .reserveBoxInner .reserveInput input,
.hero .reserveBox .reserveBoxInner .reserveInput select {
    background: #fff url("../img/top/bg_input.png") no-repeat right center;
    border: 1px solid rgba(153, 153, 153, 0.5);
    border-radius: 5px;
    cursor: pointer;
    font-size: 2.0rem;
    line-height: 1;
    padding: 8px 15px;
    position: relative;
    width: 100%
}

.hero .reserveBox .reserveBoxInner .reserveInput input {
    margin-bottom: 10px
}

.hero .reserveBox .reserveBoxInner .reserveInput select {
    margin-bottom: 30px
}

.hero .reserveBox .reserveBoxInner .reserveInput .selectTime {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    align-items: center;
    border: 1px solid rgba(153, 153, 153, 0.5);
    border-radius: 5px;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    font-size: 2.0rem;
    height: 50px;
    padding: 14px 15px;
    width: 100%
}

.hero .reserveBox .reserveBoxInner .reserveInput .selectTime::-ms-expand {
    display: none
}

.hero .reserveBox .reserveBoxInner .btn {
    font-size: 2.4rem;
    max-width: 320px;
    padding: 23px 10px
}

@media screen and (max-width: 1200px) {
    .hero .heroContents {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-top: 62px
    }
    .hero .heroBox .titleBox .title .heading--sub {
        font-size: 1.4rem;
        padding: 3px 5px 6px
    }
    .hero .heroBox .titleBox .title .heading--sub span {
        font-size: 1.9rem
    }
    .hero .heroBox .pointBox .item .text {
        font-size: 1.4rem
    }
    .hero .reserveBox .heading--reserve {
        font-size: calc(3 * ((100vw - 991px) / 209) + 1.9rem);
        padding: 19px 10px 19px 70px
    }
    .hero .reserveBox .heading--reserve::before {
        left: 10px;
        height: 67px;
        width: 58px;
        background-size: 58px
    }
    .hero .reserveBox .reserveBoxInner {
        padding: 20px
    }
    .hero .reserveBox .reserveBoxInner .reserveInput .heading {
        font-size: 2.1rem
    }
    .hero .reserveBox .reserveBoxInner .reserveInput input {
        margin-bottom: 10px
    }
    .hero .reserveBox .reserveBoxInner .reserveInput select {
        margin-bottom: 20px
    }
}

@media screen and (max-width: 991px) {
    .hero {
        height: auto
    }
    .hero .heroContents {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-top: 10px
    }
    .hero .heroBox {
        margin: 0 auto;
        width: 100%
    }
    .hero .heroBox .titleBox {
        margin-bottom: 10px
    }
    .hero .heroBox .titleBox .title .heading--sub {
        font-size: 1.2rem;
        padding: 2px 3px 4px
    }
    .hero .heroBox .titleBox .title .heading--sub span {
        font-size: 1.7rem
    }
    .hero .heroBox .pointBox .item {
        padding: 15px 8px 15px
    }
    .hero .heroBox .pointBox .item .point {
        margin: auto;
        max-width: 210px
    }
    .hero .heroBox .pointBox .item .merit {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: 2.0rem;
        margin: 10px auto
    }
    .hero .heroBox .pointBox .item .merit span {
        margin-top: 0;
        width: 70px
    }
    .hero .reserveBox {
        margin: 20px auto 30px;
        max-width: 780px;
        width: 100%
    }
    .hero .reserveBox .heading--reserve {
        font-size: 1.8rem;
        padding: 13px 10px 13px 70px
    }
    .hero .reserveBox .heading--reserve::before {
        left: 15px;
        height: 57px;
        width: 50px;
        background-size: 50px
    }
    .hero .reserveBox .reserveBoxInner {
        padding: 10px 15px
    }
    .hero .reserveBox .reserveBoxInner .reserveInput .heading {
        font-size: 1.8rem
    }
    .hero .reserveBox .reserveBoxInner .reserveInput input,
    .hero .reserveBox .reserveBoxInner .reserveInput select {
        font-size: 1.6rem;
        padding: 6px 10px
    }
    .hero .reserveBox .reserveBoxInner .reserveInput input {
        margin-bottom: 10px;
        width: 54%
    }
    .hero .reserveBox .reserveBoxInner .reserveInput select {
        margin-bottom: 10px;
        width: 43%
    }
    .hero .reserveBox .reserveBoxInner .btn {
        font-size: 1.8rem;
        padding: 14px 10px
    }
}

@media screen and (max-width: 600px) {
    .hero .sectionInner {
        padding-top: 85px
    }
    .hero .heroContents {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-top: 20px
    }
    .hero .heroBox {
        margin: 0 auto;
        max-width: 515px;
        width: 100%
    }
    .hero .heroBox .titleBox {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-bottom: 10px
    }
    .hero .heroBox .titleBox .heroLogo {
        margin: auto;
        width: 220px
    }
    .hero .heroBox .titleBox .title {
        margin: auto
    }
    .hero .heroBox .titleBox .title .heading--sub {
        font-size: 1.3rem;
        margin: 20px 0;
        padding: 1px 3px 3px
    }
    .hero .heroBox .titleBox .title .heading--sub span {
        font-size: 1.7rem
    }
    .hero .heroBox .pointBox {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
    .hero .heroBox .pointBox .item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin: 0 auto 10px;
        padding: 6px 10px 8px 5vw;
        width: 100%
    }
    .hero .heroBox .pointBox .item .point {
        width: 100px;
        max-width: 100px
    }
    .hero .heroBox .pointBox .item .point img {
        margin-bottom: 3px
    }
    .hero .heroBox .pointBox .item .merit {
        font-size: 1.9rem;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        margin: 0 auto;
        padding-left: 0.5em;
        width: calc(100% - 100px)
    }
    .hero .heroBox .pointBox .item .merit span {
        margin-top: 0;
        width: 60px
    }
    .hero .heroBox .pointBox .item .text {
        font-size: 1.6rem;
        text-align: left;
        width: 100%
    }
    .hero .heroBox .pointBox .item .text>br {
        display: none
    }
    .hero .reserveBox {
        max-width: 515px
    }
    .hero .reserveBox .heading--reserve {
        font-size: 1.7rem;
        padding: 13px 10px 13px 70px
    }
    .hero .reserveBox .reserveBoxInner .reserveInput .heading {
        font-size: 1.6rem
    }
    .hero .reserveBox .reserveBoxInner .reserveInput input,
    .hero .reserveBox .reserveBoxInner .reserveInput select {
        font-size: 1.4rem;
        padding: 7px 10px
    }
    .hero .reserveBox .reserveBoxInner .reserveInput input {
        width: 60%
    }
    .hero .reserveBox .reserveBoxInner .reserveInput select {
        width: 38%
    }
    .hero .reserveBox .reserveBoxInner .btn {
        font-size: 1.8rem;
        padding: 14px 10px
    }
}

@media screen and (max-width: 414px) {
    .hero .heroContents {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-top: 10px
    }
    .hero .heroBox {
        margin: 0 auto;
        width: 100%
    }
    .hero .heroBox .titleBox .title .heading--sub {
        line-height: 1.2;
        padding: 4px 3px 4px
    }
    .hero .heroBox .titleBox .title .heading--sub>br {
        display: inline
    }
    .hero .heroBox .titleBox .title .heading--sub span {
        font-size: 1.7rem
    }
    .hero .heroBox .pointBox .item .text {
        font-size: 1.5rem
    }
}

.reasons {
    background: #fbf6ee url("../img/top/bg_reason_item.png") no-repeat right bottom;
    padding: 30px 0 10.4vw;
    position: relative
}

.reasons::after {
    bottom: 0;
    border-left: 100vw solid #fff;
    border-top: 10.4vw solid transparent;
    content: "";
    position: absolute
}

.reasons .leadText {
    margin: auto;
    max-width: 960px
}

.reasons .whatReason {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 50px
}

.reasons .whatReason .image {
    margin-bottom: 0;
    position: relative;
    width: 585px
}

.reasons .whatReason .image .symbol {
    left: -70px;
    position: absolute;
    top: 0
}

.reasons .whatReason .content {
    position: relative;
    width: 585px
}

.reasons .whatReason .content .list {
    margin-left: 10px
}

.reasons .whatReason .content .list .item {
    margin-bottom: 50px;
    width: 450px
}

.reasons .whatReason .content .list .item:nth-child(1) {
    margin-left: 0;
    width: 470px;
    margin-top: 50px;
}

.reasons .whatReason .content .list .item:nth-child(2) {
    margin-left: 60px
}

.reasons .whatReason .content .list .item:nth-child(3) {
    margin-left: 120px
}

.reasons .whatReason .content .list .item .heading {
    font-size: 2.6rem;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 0.75em
}

.reasons .whatReason .content .symbol {
    bottom: -20px;
    left: -131px;
    position: absolute
}

@media screen and (max-width: 1440px) {
    .reasons {
        background-size: 300px
    }
    .reasons .whatReason .image .symbol {
        left: -20px;
        position: absolute;
        top: 0
    }
}

@media screen and (max-width: 1200px) {
    .reasons .whatReason .content {
        width: calc(585/1170*100%)
    }
    .reasons .whatReason .content .list {
        margin-left: 0
    }
    .reasons .whatReason .content .list .item {
        margin-bottom: 40px;
        width: calc(450/585*100%)
    }
    .reasons .whatReason .content .list .item:nth-child(1) {
        width: calc(470/585*100%)
    }
    .reasons .whatReason .content .list .item:nth-child(2) {
        margin-left: 40px
    }
    .reasons .whatReason .content .list .item:nth-child(3) {
        margin-left: 80px
    }
    .reasons .whatReason .content .list .item .heading {
        font-size: 2.4rem;
        margin-bottom: 0.65em
    }
    .reasons .whatReason .content .symbol {
        left: -185px
    }
}

@media screen and (max-width: 991px) {
    .reasons {
        background-size: 200px
    }
    .reasons .whatReason {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-top: 25px
    }
    .reasons .whatReason .image {
        max-width: 585px;
        width: 100%
    }
    .reasons .whatReason .image .symbol {
        left: 0;
        position: relative;
        top: 0
    }
    .reasons .whatReason .content {
        margin-top: 20px;
        max-width: 585px;
        width: 100%
    }
    .reasons .whatReason .content .list .item {
        margin-bottom: 30px;
        max-width: 585px;
        width: 100%
    }
    .reasons .whatReason .content .list .item:nth-child(1) {
        max-width: 585px;
        width: 100%
    }
    .reasons .whatReason .content .list .item:nth-child(2) {
        margin-left: 0
    }
    .reasons .whatReason .content .list .item:nth-child(3) {
        margin-left: 0
    }
    .reasons .whatReason .content .list .item .heading {
        font-size: 2.2rem;
        margin-bottom: 0.6em
    }
    .reasons .whatReason .content .symbol {
        left: auto;
        right: -4px;
        top: -221px;
        width: 230px
    }
}

@media screen and (max-width: 600px) {
    .reasons {
        background-size: 150px
    }
    .reasons .whatReason .content .symbol {
        top: -32vw;
        width: 32vw
    }
}

@media screen and (max-width: 414px) {
    .reasons {
        background-size: 120px
    }
    .reasons .content .list .item .heading {
        font-size: 2.0rem
    }
}

.case {
    position: relative;
    width: 100%
}

.case .caseInner {
    width: 100%
}

.case .sectionInner {
    position: relative
}

.case .casePhoto {
    display: none
}

.case .content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.case .content .recommend {
    color: #333;
    font-size: 1.6rem;
    line-height: 1;
    width: 100%
}

.case .content .recommend span {
    background-color: #333;
    border-radius: 0 11px 11px 0;
    color: #fff;
    display: inline-block;
    font-size: 1.6rem;
    line-height: 1;
    margin-right: 10px;
    padding: 2px 16px 4px 10px
}

.case .content .image {
    margin: 0;
    width: 160px
}

.case .content .heading {
    color: #333;
    font-family: 'Noto Sans JP', 'Noto Sans JP Woff', sans-serif;
    font-size: 4.5rem;
    font-weight: 900;
    font-display: swap;
    padding-left: 10px;
    width: calc(100% - 160px)
}

.case .content .text {
    background: rgba(255, 255, 255, 0.7);
    color: #333;
    margin: 30px 0;
    width: 100%
}

.case .content .btn {
    margin-left: 0
}

.case .symbol--1,
.case .symbol--2,
.case .symbol--3,
.case .charm--1,
.case .charm--2 {
    position: absolute;
    z-index: 10
}

@media screen and (max-width: 1440px) {
    .case .content .heading {
        font-size: calc(9 * ((100vw - 991px) / 449) + 3.6rem)
    }
}

@media screen and (max-width: 991px) {
    .case .casePhoto {
        display: block;
        margin: 0 auto 10px;
        max-width: 350px;
        text-align: center;
        width: 100%
    }
    .case .content .recommend span {
        font-size: 1.4rem;
        margin-right: 8px;
        padding: 2px 12px 3px 8px
    }
    .case .content .heading {
        font-size: 3.5rem
    }
    .case .content .text {
        margin: 25px 0
    }
    .case .content .btn {
        margin-left: auto
    }
}

@media screen and (max-width: 600px) {
    .case .casePhoto {
        width: 85%
    }
    .case .content .recommend {
        font-size: 1.4rem
    }
    .case .content .recommend span {
        font-size: 1.2rem;
        margin-right: 5px;
        padding: 2px 8px 3px 4px
    }
    .case .content .image {
        text-align: center;
        width: 100%
    }
    .case .content .heading {
        font-size: calc(7 * ((100vw - 320px) / 280) + 2.8rem);
        margin: 0;
        text-align: center;
        width: 100%
    }
    .case .content .text {
        margin: 25px 0
    }
    .case .content .btn {
        margin-left: auto
    }
}

.case.group {
    background: url("../img/top/case1_photo1.png") no-repeat right top;
    color: #9f00e9;
    margin: -34px auto 0;
    max-width: 1440px
}

.case.group .caseInner {
    background: url("../img/top/case1_photo4.jpg") no-repeat left 100%
}

.case.group .sectionInner {
    padding: 100px 550px 100px 195px
}

.case.group .content .recommend span {
    background-color: #9f00e9
}

.case.group .symbol--1 {
    left: 0;
    top: 23px
}

.case.group .symbol--2 {
    bottom: 0;
    right: 44%
}

.case.group .charm--1 {
    right: 12.5%;
    top: -80px
}

.case.group .charm--2 {
    top: 54%;
    right: 15%
}

@media screen and (max-width: 1440px) {
    .case.group {
        background-size: 43.5vw;
        background-position-y: 3vw
    }
    .case.group .caseInner {
        background-size: 24.75vw
    }
    .case.group .sectionInner {
        padding: 100px calc(550 / 1440 * 100vw) 100px calc(195 / 1440 * 100vw)
    }
    .case.group .symbol--1 {
        left: 10px;
        width: 11.3vw
    }
    .case.group .symbol--2 {
        width: 9.6vw
    }
    .case.group .charm--1 {
        right: 10.4vw;
        top: -5.6vw;
        width: 16.3vw
    }
    .case.group .charm--2 {
        right: calc(15vw - 10%);
        width: calc(22.7vw * 1.2)
    }
}

@media screen and (max-width: 991px) {
    .case.group {
        background-image: none
    }
    .case.group .caseInner {
        background-position: 90% 67%;
        background-size: 150px
    }
    .case.group .sectionInner {
        padding: 50px 15px;
        max-width: 585px;
        width: 100%
    }
    .case.group .casePhoto {
        margin: 0 auto 10px 10%
    }
    .case.group .symbol--1 {
        top: 25%;
        width: 13%
    }
    .case.group .symbol--2 {
        display: none
    }
    .case.group .charm--1 {
        right: 5%;
        top: 20%;
        width: 33%
    }
    .case.group .charm--2 {
        right: 0;
        top: 36%;
        width: 41%
    }
}

@media screen and (max-width: 600px) {
    .case.group .caseInner {
        background-image: none
    }
    .case.group .casePhoto {
        margin-bottom: 40px
    }
    .case.group .charm--2 {
        top: 35%
    }
}

.case.family {
    background: #fbf6ee;
    color: #24cc02;
    margin: 26px auto 0;
    padding: 10.4vw 0 10.4vw;
    position: relative;
    overflow: hidden
}

.case.family::before {
    top: 0;
    border-bottom: 10.4vw solid transparent;
    border-left: 100vw solid #fff;
    content: "";
    position: absolute
}

.case.family::after {
    bottom: 0;
    border-left: 100vw solid #fff;
    border-top: 10.4vw solid transparent;
    content: "";
    position: absolute
}

.case.family .caseInner {
    background: url("../img/top/case2_photo4.jpg") no-repeat right 91%;
    max-width: 1440px;
    margin: -140px auto -2.2vw;
    position: relative
}

.case.family .caseInner::before {
    background: url("../img/top/case2_photo1.png") no-repeat left top;
    content: "";
    display: block;
    left: 0;
    height: 651px;
    position: absolute;
    top: 83px;
    width: 625px;
    z-index: 5
}

.case.family .sectionInner {
    padding: 100px 60px 100px 550px;
    z-index: 10
}

.case.family .content .recommend span {
    background-color: #24cc02
}

.case.family .content .text {
    background: rgba(251, 246, 238, 0.7);
    max-width: 455px
}

.case.family .symbol--1 {
    right: -2%;
    top: 19%
}

.case.family .symbol--2 {
    right: 6%;
    top: 30%
}

.case.family .symbol--3 {
    bottom: 0;
    left: 45%
}

.case.family .charm--1 {
    left: 13%;
    top: 0
}

.case.family .charm--2 {
    bottom: -50px;
    left: 13%
}

@media screen and (max-width: 1440px) {
    .case.family .caseInner {
        background-size: 24.75vw
    }
    .case.family .caseInner::before {
        background-size: 39.5vw;
        background-position-y: center
    }
    .case.family .sectionInner {
        padding: 100px calc(60 / 1440 * 100vw) 100px calc(580 / 1440 * 100vw)
    }
    .case.family .content .heading {
        font-size: calc(9 * ((100vw - 991px) / 449) + 3.4rem)
    }
    .case.family .symbol--3 {
        bottom: 0;
        left: 45%
    }
    .case.family .charm--1 {
        top: 3vw;
        width: 16.3vw
    }
    .case.family .charm--2 {
        bottom: -3vw;
        left: calc(15vw - 10%);
        width: 25vw
    }
}

@media screen and (max-width: 991px) {
    .case.family {
        margin: 0 auto
    }
    .case.family .caseInner {
        margin: 0 auto;
        background-position: 88% 61%;
        background-size: 160px
    }
    .case.family .caseInner::before {
        background-image: none
    }
    .case.family .sectionInner {
        padding: 50px 15px;
        max-width: 585px;
        width: 100%
    }
    .case.family .casePhoto {
        margin: 0 5% 10px auto
    }
    .case.family .content .heading {
        font-size: 3.5rem
    }
    .case.family .symbol--1 {
        display: none
    }
    .case.family .symbol--2 {
        display: none
    }
    .case.family .symbol--3 {
        bottom: auto;
        left: 80%;
        top: 20%;
        width: 18%
    }
    .case.family .charm--1 {
        top: 22%;
        width: 33%
    }
    .case.family .charm--2 {
        bottom: auto;
        top: 36%;
        width: 41%
    }
}

@media screen and (max-width: 600px) {
    .case.family .content .heading {
        font-size: calc(7 * ((100vw - 320px) / 280) + 2.8rem)
    }
    .case.family .caseInner {
        background-image: none
    }
    .case.family .casePhoto {
        margin-bottom: 40px
    }
}

.case.luxury {
    background: url("../img/top/case3_photo1.jpg") no-repeat right center;
    color: #00bae8;
    margin: -70px auto 80px;
    max-width: 1440px
}

.case.luxury .caseInner {
    background: url("../img/top/case3_photo4.jpg") no-repeat left center
}

.case.luxury .sectionInner {
    padding: 100px 510px 100px 195px
}

.case.luxury .content .recommend span {
    background-color: #00bae8
}

.case.luxury .symbol--1 {
    left: 0;
    top: 23px
}

.case.luxury .symbol--2 {
    bottom: 50px;
    right: 43%
}

.case.luxury .symbol--3 {
    bottom: -30px;
    right: 54%
}

.case.luxury .charm--1 {
    right: 12.5%;
    top: 0
}

.case.luxury .charm--2 {
    top: 63%;
    right: 14%
}

@media screen and (max-width: 1440px) {
    .case.luxury {
        background-size: 41vw;
        margin: -70px auto 5vw
    }
    .case.luxury .caseInner {
        background-size: 24.75vw;
        background-position-y: calc(20% + 8vw)
    }
    .case.luxury .sectionInner {
        padding: 100px calc(510 / 1440 * 100vw) 100px calc(195 / 1440 * 100vw)
    }
    .case.luxury .symbol--1 {
        left: 10px;
        width: 11.3vw
    }
    .case.luxury .charm--1 {
        right: 10.4vw;
        top: 2vw;
        width: 16.3vw
    }
    .case.luxury .charm--2 {
        right: calc(15vw - 10%);
        width: calc(22.7vw * 1.2)
    }
}

@media screen and (max-width: 991px) {
    .case.luxury {
        background-image: none;
        margin: -20px auto
    }
    .case.luxury .caseInner {
        background-position: 90% 67%;
        background-size: 150px
    }
    .case.luxury .sectionInner {
        padding: 50px 15px;
        max-width: 585px;
        width: 100%
    }
    .case.luxury .casePhoto {
        margin: 0 auto 10px 10%
    }
    .case.luxury .symbol--1 {
        top: 23%;
        width: 13%
    }
    .case.luxury .symbol--2 {
        display: none
    }
    .case.luxury .symbol--3 {
        display: none
    }
    .case.luxury .charm--1 {
        right: 5%;
        top: 20%;
        width: 33%
    }
    .case.luxury .charm--2 {
        right: 0;
        top: 36%;
        width: 41%
    }
}

@media screen and (max-width: 600px) {
    .case.luxury .caseInner {
        background-image: none
    }
    .case.luxury .casePhoto {
        margin-bottom: 40px
    }
    .case.luxury .charm--2 {
        top: 34%
    }
}

.quickCheckIn {
    background: #d9efff url("../img/top/bg_case_bottom.png") no-repeat top center;
    padding: 130px 0 140px 0;
    overflow: hidden;
    width: 100%
}

.quickCheckIn .leadText {
    margin: auto;
    max-width: 960px
}

.quickCheckIn .howToUse {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 50px
}

.quickCheckIn .howToUse .image {
    margin-bottom: 0;
    position: relative;
    padding-left: 135px;
    padding-top: 72px;
    width: 535px
}

.quickCheckIn .howToUse .image .symbol {
    left: 0;
    position: absolute;
    top: 0
}

.quickCheckIn .howToUse .content {
    background-color: #fff;
    margin-left: 65px;
    padding: 40px;
    position: relative;
    width: 570px
}

.quickCheckIn .howToUse .content .heading {
    font-size: 2.6rem;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 1em;
    position: relative;
    z-index: 20
}

.quickCheckIn .howToUse .content .list {
    margin-bottom: 30px;
    padding-left: 1.25em
}

.quickCheckIn .howToUse .content .list .item {
    list-style-type: decimal;
    margin-bottom: 0.8em
}

.quickCheckIn .howToUse .content .symbol {
    position: absolute;
    right: -110px;
    top: -105px
}

@media screen and (max-width: 1440px) {
    .quickCheckIn .howToUse .image {
        padding-left: 0;
        text-align: right;
        width: calc(535/1170*100%)
    }
    .quickCheckIn .howToUse .image .symbol {
        width: 200px
    }
    .quickCheckIn .howToUse .content {
        margin-left: calc(65/1170*100%);
        padding: 35px;
        width: calc(570/1170*100%)
    }
    .quickCheckIn .howToUse .content .symbol {
        opacity: 0.7;
        right: -3vw;
        top: -70px;
        width: 220px
    }
}

@media screen and (max-width: 991px) {
    .quickCheckIn {
        padding: 120px 0 100px 0
    }
    .quickCheckIn .howToUse {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-top: 30px
    }
    .quickCheckIn .howToUse .image {
        text-align: center;
        max-width: 585px;
        padding-top: 30px;
        width: 100%
    }
    .quickCheckIn .howToUse .image .symbol {
        width: 180px
    }
    .quickCheckIn .howToUse .content {
        margin: 30px auto 0;
        max-width: 585px;
        width: 100%
    }
    .quickCheckIn .howToUse .content .heading {
        font-size: 2.4rem
    }
    .quickCheckIn .howToUse .content .symbol {
        right: -10vw;
        top: -50px;
        width: 200px
    }
}

@media screen and (max-width: 414px) {
    .quickCheckIn {
        padding: 120px 0 80px 0
    }
    .quickCheckIn .howToUse .image .symbol {
        left: -15px;
        width: 150px
    }
    .quickCheckIn .howToUse .content {
        padding: 30px
    }
}


/*# sourceMappingURL=home-styles.css.map */

.insta-feeds.insta-feeds-pc {
    background-color: #fbf6ee;
}

.insta-feeds.insta-feeds-sp {
    width: 100%;
    margin: 15px 0 0;
}

.insta-feeds .insta-gallery-feed[data-feed_layout=gallery] .insta-gallery-list .insta-gallery-item {
    min-width: 25%!important;
}

.insta-feeds.insta-feeds-sp {
    display: none;
}

.insta-feeds.insta-feeds-pc {
    display: block;
}

@media screen and (max-width: 600px) {
    .insta-feeds.insta-feeds-sp {
        display: block;
    }
    .insta-feeds.insta-feeds-pc {
        display: none;
    }
}

.insta-feeds-ttl {
    text-align: center;
    font-size: 22px;
    padding-top: 15px;
    margin-bottom: 10px;
}

.insta-feeds-ttl:before {
    content: url(../img/icon_instagram_40.png);
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px;
}

.insta-feeds-sp .insta-feeds-ttl {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    padding-top: 10px;
}

div.wp-gr.wpac {
    border-radius: 5px!important;
    background-color: #FFF!important;
    padding: 15px!important;
    border: 1px solid rgba(0, 160, 233, 0.9)!important;
}

.wp-gr.wpac .wp-google-list .wp-google-place {
    border-bottom: 1px solid rgba(0, 160, 233, 0.9)!important;
    padding-bottom: 10px!important;
}

@media screen and (max-width: 600px) {
    .slide-pc {
        display: none;
    }
}

@media screen and (min-width: 601px) {
    .slide-sp {
        display: none;
    }
}

.globalMenu .item select {
    background-color: rgba(0, 160, 233, 0.9);
    color: #fff;
    display: block;
    font-size: 1.8rem;
    letter-spacing: 2px;
    line-height: 1;
    padding: 0px 10px;
    text-align: center;
    -webkit-transition: 0.25s;
    transition: 0.25s;
    width: 100%;
    border: none;
}

.quickCheckIn .howToUse {
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.quickCheckIn .howToUse .image-wrap {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 50px;
    position: relative;
}

.quickCheckIn .howToUse .image-wrap .image {
    padding-top: 40px;
}

.quickCheckIn .howToUse .content .heading {
    text-align: center;
}

@media screen and (max-width: 991px) {
    .quickCheckIn .howToUse .image-wrap {
        -webkit-justify-content: center;
        justify-content: center;
        margin-left: -15px;
        margin-bottom: 20px;
    }
    .quickCheckIn .howToUse .content .symbol {
        display: none;
    }
    .quickCheckIn .howToUse .image-wrap .image.shop-img-pc {
        display: none;
    }
    .quickCheckIn .howToUse .image-wrap .image {
        width: 50%;
        padding-left: 15px;
    }
}

@media screen and (min-width: 992px) {
    .quickCheckIn .howToUse .image-wrap .image {
        padding-left: 40px;
        width: 33.33333333%;
    }
    .quickCheckIn .howToUse .content {
        width: 70%;
        margin: 0 auto;
    }
    .quickCheckIn .howToUse .content .symbol {
        top: -37px;
        width: 200px;
        right: -83px;
    }
}