/* ------------------
--------RESET--------
------------------ */
@charset "UTF-8";
/*! destyle.css v4.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.css */

/* Reset box-model and set borders */
/* ============================================ */

*,
::before,
::after {
    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
}

/* Document */
/* ============================================ */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */

html {
    line-height: 1.15;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
    -webkit-tap-highlight-color: transparent;
    /* 3*/
}

/* Sections */
/* ============================================ */

/**
 * Remove the margin in all browsers.
 */

body {
    margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
    display: block;
}

/* Vertical rhythm */
/* ============================================ */

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
    margin: 0;
}

/* Headings */
/* ============================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Lists (definition) */
/* ============================================ */

dt {
    font-weight: bold;
}

dd {
    margin-left: 0;
}

/* Grouping content */
/* ============================================ */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
    box-sizing: content-box;
    /* 1 */
    height: 0;
    /* 1 */
    overflow: visible;
    /* 2 */
    border-top-width: 1px;
    margin: 0;
    clear: both;
    color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
    font-family: monospace, monospace;
    /* 1 */
    font-size: inherit;
    /* 2 */
}

address {
    font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
    background-color: transparent;
    text-decoration: none;
    color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
    text-decoration: underline dotted;
    /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: inherit;
    /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

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

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Replaced content */
/* ============================================ */

/**
 * Prevent vertical alignment issues.
 */

svg,
img,
embed,
object,
iframe {
    vertical-align: bottom;
}

/* Forms */
/* ============================================ */

/**
 * Reset form fields to make them styleable.
 * 1. Make form elements stylable across systems iOS especially.
 * 2. Inherit text-transform from parent.
 */

button,
input,
optgroup,
select,
textarea {
    -webkit-appearance: none;
    /* 1 */
    appearance: none;
    vertical-align: middle;
    color: inherit;
    font: inherit;
    background: transparent;
    padding: 0;
    margin: 0;
    border-radius: 0;
    text-align: inherit;
    text-transform: inherit;
    /* 2 */
}

/**
 * Correct cursors for clickable elements.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
    cursor: pointer;
}

button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled {
    cursor: default;
}

/**
 * Improve outlines for Firefox and unify style with input elements & buttons.
 */

:-moz-focusring {
    outline: auto;
}

select:disabled {
    opacity: inherit;
}

/**
 * Remove padding
 */

option {
    padding: 0;
}

/**
 * Reset to invisible
 */

fieldset {
    margin: 0;
    padding: 0;
    min-width: 0;
}

legend {
    padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
    vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
    overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

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

/**
 * Correct the outline style in Safari.
 */

[type="search"] {
    outline-offset: -2px;
    /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

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

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Fix font inheritance.
 */

::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}

/**
 * Fix appearance for Firefox
 */
[type="number"] {
    -moz-appearance: textfield;
}

/**
 * Clickable labels
 */

label[for] {
    cursor: pointer;
}

/* Interactive */
/* ============================================ */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
    display: list-item;
}

/*
 * Remove outline for editable content.
 */

[contenteditable]:focus {
    outline: auto;
}

/* Tables */
/* ============================================ */

/**
1. Correct table border color inheritance in all Chrome and Safari.
*/

table {
    border-color: inherit;
    /* 1 */
    border-collapse: collapse;
}

caption {
    text-align: left;
}

td,
th {
    vertical-align: top;
    padding: 0;
}

th {
    text-align: left;
    font-weight: bold;
}

:root {
    /* --notoSans: "Noto Sans Japanese", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    --minchoOld: "Zen Old Mincho", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
    --minchoGothic: "Zen Kaku Gothic New", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif; */

    --main: #212A74;
    --sub:#4B226F;
    --white: #fff;
    --accent: #D3B36A;
    --subtxt: #303030;
    --gray: #D9D9D9;
}

/*====================================*/
/* base contents */
/*====================================*/
html {
    font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: .1em;
    font-feature-settings: "palt";
    -webkit-font-feature-settings: "palt";
    color: #1C1C1C;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    word-break: break-all;
}

@media screen and (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

#halloween_month {
    overflow-x: hidden;
}

body {
    background-color: var(--white);
}

img {
    max-width: 100%;
    width: 100%;
    height: auto;
}

/* ------------------------
    edit contents
------------------------- */
/* 指定フォント ここから */


/* --Vidaloka-- */
@font-face {
    font-family: "Vidaloka";
    src: url('../fonts/hotellabo/NotoSansJP-Regular.ttf') format('truetype');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "NotoSans";
    src: url('../fnt/NotoSerifJP-Regular.otf') format('truetype');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "NotoSans";
    src: url('../fnt/NotoSerifJP-Bold.otf') format('truetype');
    font-weight: bold;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url('../fnt/Inter-Medium.ttf') format('truetype');
    font-display: swap;
}

body {
    /* font-family: "NotoSans", serif; */
}

/* ----pc,sp/on_off---- */
.pc {
    display: none;
}

.tb {
    display: none;
}

.sp {
    display: block;
}

@media screen and (min-width: 768px) {
    .tb {
        display: block;
    }

    .sp {
        display: none;
    }
}

@media screen and (min-width: 1200px) {
    .pc {
        display: block;
    }

    .tb {
        display: none;
    }
}

/* ----inner---- */
.inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 5rem 1.1rem;
}

@media screen and (min-width: 768px) {
    .inner {
        padding: 7rem 1.1rem 7rem;
    }
}

/* ----indent---- */
.indent-S {
    display: inline-block;
    padding-left: 1rem;
    text-indent: -1rem;
}

.indent-M {
    display: inline-block;
    padding-left: 1.5rem;
    text-indent: -1.5rem;
}

.indent-L {
    display: inline-block;
    padding-left: 2rem;
    text-indent: -2rem;
}

/* ----button---- */
.hov:hover {
    opacity: .5;
    transition: all .3s;
    text-decoration: none;
}

.btn {
    display: block;
    margin: 4rem auto 3rem;
    padding: 1.5rem 0;
    transition: all .3s;
    width: 100%;
    font-size: .9rem;
}

.btn02 {
    display: inline-block;
    margin: 2.5rem auto 0rem;
    padding: .7rem 0;
    transition: all .3s;
    width: 100%;
    font-size: .9rem;
}

.btn03 {
    display: inline-block;
    margin: 2.5rem auto 0rem;
    padding: 1rem 0;
    transition: all .3s;
    width: 100%;
    font-size: .9rem;
}

@media screen and (min-width: 768px) {
    .btn, .btn02 {
        max-width: 320px;
    }

    .btn03 {
        margin-bottom: 2.5rem;
        max-width: 400px;

    }
}

/* ----button-bg---- */
.btn-1, .btn-4 {
    position: relative;
    background-color: var(--white);
    border: 1px solid var(--white);
    color: var(--sub);
    text-align: center;
    letter-spacing: .15em;
    border-radius: 50px;
}

.btn-2 {
    position: relative;
    background-color: #fff;
    border: 1px solid #CCA161;
    color: #CCA161;
    text-align: center;
    letter-spacing: .15em;
    border-radius: 50px;
}

.btn-3 {
    position: relative;
    display: inline-block;
    background-color: #236C8A;
    border: 1px solid #236C8A;
    color: #fff;
    text-align: center;
    letter-spacing: .15em;
    border-radius: 50px;
    text-align: center;
}

.btn-1:hover, .btn-4:hover {
    background-color: var(--sub);
    border: 1px solid var(--sub);
    color: var(--white);
}

.btn-2:hover {
    background-color: initial;
    border: 1px solid white;
    color: white;
}

.btn-3:hover {
    background-color: initial;
    border: 1px solid #236C8A;
    color: #236C8A;
}

.btn-2::after, .btn-1::after {
    position: absolute;
    top: 50%;
    right: 7%;
    width: 8px;
    height: 8px;
    transform: translateY(-50%) rotate(45deg);
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    content: "";
}

.btn-3::after {
    display: inline-block;
    position: absolute;
    padding-left: 40px;
    background: url(../img/moon.svg) no-repeat left;
    content: "";
    height: 25px;
    vertical-align: middle;
    width: 25px;
    top: 50%;
    right: 3%;
    transform: translateY(-50%);
}

.btn-4::after {
    display: inline-block;
    position: absolute;
    padding-left: 40px;
    background: url(../img/sun.svg) no-repeat left;
    content: "";
    height: 25px;
    vertical-align: middle;
    width: 25px;
    top: 50%;
    right: 3%;
    transform: translateY(-50%);
}

header {
    position: relative;
}

/* ----text---- */
.txt-XXS,
.txt-XS,
.txt-S,
.txt-M,
.txt-L,
.txt-XL {
    line-height: 1.5;
}

.txt-XXS {
    font-size: .6rem;
}

.txt-XS {
    font-size: .75rem;
}

.txt-S {
    font-size: .85rem;
}

.txt-M {
    font-size: .9rem;
}

.txt-L {
    font-size: 1.2rem;
}

.txt-XL {
    font-size: 1.5rem;
}

.txt-XL {
    font-size: 1.7rem;
}

.fl,
.col_2,
.col_3,
.col_2_3,
.col_2_4,
.col_3_5 {
    display: flex;
    flex-flow: row wrap;
}

.col_1 {
    display: block;
}

.col_1_2 {
    display: flex;
}

.col_1>* {
    display: block;
    width: 100%;
}

.col_1_2>* {
    flex-basis: 100%;
}

.col_right>*:last-child {
    flex-basis: calc(75% - .9rem);
}

.col_3>* {
    flex-basis: calc(100% / 3 - .8rem);
}

.col_2_3>*,
.col_2_4>* {
    flex-basis: calc(100% / 2 - .5rem);
}

.col_3_5>* {
    flex-basis: calc(100% / 3 - .8rem);
}

.cols>* {
    width: 100%;
    min-width: 0;
}

.col-25 {
    flex: 0 0 25%;
    max-width: 25%;
}

.col-50 {
    flex: 0 0 50%;
    max-width: 50%;
}


.gap_1 {
    gap: 1.5rem;
}

.gap_2 {
    gap: 2rem;
}

.gap_3 {
    gap: 3rem;
}

@media screen and (max-width: 768px) {
    .gap_3 {
        gap: 2rem;
    }
}

.fld-clm {
    flex-direction: column;
}

@media screen and (min-width: 768px) {
    .col_1_2 {
        display: flex;
        justify-content: space-between;
    }

    .col_1_2>* {
        flex-basis: calc(100% / 2 - .8rem);
    }

    .col_1_3>* {
        flex-basis: calc(100% / 2 - 1.2rem);
        margin-bottom: 0;
    }
}

@media screen and (min-width: 1200px) {
    .flex {
        display: flex;
    }

    .col_1_3>* {
        flex-basis: calc(100% / 3 - 1.5rem);
        margin-bottom: 0;
    }

    .col_right>*:last-child {
        flex-basis: calc(80% - .9rem);
    }

    .col_2_3>* {
        flex-basis: calc(100% / 3 - 2rem);
        margin-bottom: 0;
    }

    .col_2_4>* {
        flex-basis: calc(100% / 4 - 1.5rem);
        margin-bottom: 0;
    }

    .col_3_5>* {
        flex-basis: calc(100% / 5 - .5rem);
        margin-bottom: 0;
    }
}

@media screen and (max-width: 768px) {
    .col_1_2 {
        flex-direction: column;
    }
}

.jf_fs {
    justify-content: flex-start;
}

.jf_sb {
    justify-content: space-between;
}

.jf_c {
    justify-content: center;
}

.jf_e {
    justify-content: space-evenly;
}

.jf_fe {
    justify-content: flex-end;
}

.item-c {
    align-items: center;
}

/* ----grid-layout---- */
.grid,
.grid_1_2,
.grid_1_3,
.grid_2_3,
.grid_2,
.grid_3,
.grid_4,
.grid_2_4 {
    display: grid;
}

.grid_1_2 {
    grid-template-columns: 1fr;
}

.grid_2_3,.grid_2_4 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
}

.grid_2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid_3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid_4 {
    grid-template-columns: repeat(4, 1fr);
}

@media screen and (min-width:600px) {
    .grid_1_2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid_1_3,.grid_2_3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid_2_4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .reverse > *:last-child {
        order: -1;
    }
}

/*====================================*/
/* 装飾 */
/*====================================*/
/* ---- 文字装飾 ---- */
.point {
    color: var(--main);
    font-weight: bold;
    font-size: 1.5rem;
}

@media screen and (max-width: 768px) {
    .point {
        font-size: 1.2rem;
    }
}

.view.under-line {
    display: inline-block;
    padding-bottom: 4px;
    position: relative;
    z-index: 100;
}

.view.under-line.on::after {
    background: linear-gradient(transparent 0%, #D3B36A 0%);
    bottom: 20%;
    opacity: .8;
    content: '';
    display: inline;
    height: 12px;
    left: 0;
    position: absolute;
    width: 0;
    z-index: -1;
}

.view.under-line.on::after {
    width: 100%;
    animation: under-line 1s ease both;
}

@keyframes under-line {
    0% {
        width: 0;
        transform: translate(0, 0);
    }

    100% {
        width: 100%;
        transform: translate(0, 0);
    }
}

.img__box {
    border-radius: 5px;
}

.img__box img {
    /* border-radius: 5px; */
    /* border: 1px solid var(--white); */
}

/* ----フェードインアニメーション---- */
.view.view-fix,
.view.view-slideup,
.view.view-slidedown,
.view.view-slidein-L,
.view.view-slidein-R {
    opacity: 0;
}

.view.view-fix.on {
    opacity: 1;
    animation: view-fix 1s ease both;
}

.view.view-slideup.on {
    opacity: 1;
    animation: view-slideup 1s ease both;
}

.view.view-slidedown.on {
    opacity: 1;
    animation: view-slidedown 1s ease both;
}

.view.view-slidein-L.on {
    opacity: 1;
    animation: view-slidein-L 1s ease both;
}

.view.view-slidein-R.on {
    opacity: 1;
    animation: view-slidein-R 1s ease both;
}

@keyframes view-fix {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes view-slideup {
    0% {
        opacity: 0;
        transform: translate(0, 35px);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes view-slidedown {
    0% {
        opacity: 0;
        transform: translate(0, -35px);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes view-slidein-L {
    0% {
        opacity: 0;
        transform: translate(-35px, 0);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes view-slidein-R {
    0% {
        opacity: 0;
        transform: translate(35px, 0);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

/*====================================*/
/* mv */
/*====================================*/
.mv_box {
    position: relative;
    z-index: 0;
}

.mv_box .mv {
    height: 100vh;
    object-fit: cover;
    height: 100vh;
    object-position: 50% 50%;
}

.mv_box .logo {
    position: absolute;
    width: 250px;
    top: 5%;
    left: 5%;
}

.mv_box .ttl__box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--white);
    font-weight: bold;
    font-family: "NotoSans", serif;
    text-align: center;
    width: 100%;
}

.mv_box .ttl__box .main__ttl {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    display: inline-block;
    line-height: 4.2rem;
    text-shadow: 2px 3px 3px rgb(26, 34, 92,0.3);
}

@media screen and (max-width: 768px) {
    .mv_box .logo {
        position: absolute;
        width: 200px;
        top: 5%;
        left: 5%;
    }
    .mv_box .ttl__box .main__ttl {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }
}

.mv_box .ttl__box .main__ttl mark {
    background-color: var(--accent);
    color: var(--white);
    padding: .4rem .7rem;
}

.mv_box .ttl__box .sub__ttl {
    font-size: 1.5rem;
    text-shadow: 2px 3px 3px rgb(26, 34, 92,0.3);
}

.mv_box .ttl__box .sub__ttl .num {
    font-size: 2.5rem;
}

/*====================================*/
/* party */
/*====================================*/
.heading {
    max-width: 850px;
    margin: auto;
}

.heading .flex {
    gap: 3rem;
    position: relative;
}

.heading .txt {
    line-height: 2.1;
}

.heading .col_1_2 .left__box {
    width: 40%;
}

.heading .col_1_2 .right__box {
    width: 60%;
}

#about {
    position: relative;
    /* background: linear-gradient(180deg, #241716 7.79%, #231816 47.21%, #895E56 77.56%); */
}

#about .bg-bat01 {
    position: absolute;
    /* top: 25%; */
    width: 100%;
    left: 0;
    z-index: -1;
}

#about .bg-bat02 {
    position: absolute;
    top: 0;
    right: 0;
    width: 60vw;
    z-index: -1;
}

#about .bg-bat03 {
    position: absolute;
    bottom: 2%;
    right: 0;
}

@media screen and (max-width: 768px) {
    #about .bg-bat01 {
        /* position: absolute; */
        /* top: 25%; */
        /* right: 0; */
    }
    
    #about .bg-bat02 {
        /* position: absolute; */
        /* bottom: -7%; */
        /* left: 0; */
        /* width: 300px; */
    }
    
    #about .bg-bat03 {
        position: absolute;
        bottom: 32.5%;
        right: 0;
        width: 300px;
    }
}

#about .inner {
    padding-top: 6rem;
}

/* ----inner---- */
#benefit .inner {
    padding: 15rem 1.1rem 32rem;
}

@media screen and (max-width: 768px) {
    #benefit .inner {
        padding: 3rem 1.1rem 14rem;
    }
}


#about::before {
    position: absolute;
    /* content: ""; */
    top: -5px;
    left: 0;
    width: 100%;
    height: 10px;
    background-color: #241716;
}

#about .img__box {
    margin-bottom: 1rem;
}

@media screen and (max-width: 768px) {
    #about  .left__box.img__box {
        position: absolute;
        z-index: 10;
        /* left: -1rem; */
        top: -1rem;
    }

    #about .left__box.img__box img {
        width: 90px;
    }
}

#about .img__box .img img {
    border-radius: 20px;
    border: 5px solid var(--accent);
}

@media screen and (max-width: 768px) {
    #about .img__box .img img {
        border: 2.5px solid var(--accent);
    }
}

#about .img__box .frame img{
    border: none;
}

#about .ttl__box {
    position: relative;
    text-align: center;
    color: var(--main);
    font-weight: bold;
    letter-spacing: .1rem;
    font-size: 2rem;
    margin-bottom: -1.3rem;
    z-index: 1;
    line-height: 1.3;
}

@media screen and (max-width: 768px) {
    #about .ttl__box {
        text-align: right;
    }
}

#about .txt__box {
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
}

#about .txt__box .txt {
    width: calc(100% - 4rem);
}

#about .txt__box .ttl {
    margin-top: -8rem;
    margin-right: 1rem;
}

#about .txt__box .ttl img {
    width: 4rem;
}

@media screen and (max-width: 768px) {
    .ttl__box .frame {
        max-width: 350px;
        margin: 0 auto 2rem;
    }
    .ttl__box .ja {
        margin-bottom: .5rem;
        font-size: 1rem;
    }
    .ttl__box .en {
        font-size: 2rem;
        font-weight: bold;
        line-height: 1.2;
    }
}

.ttl__box .frame img {
    max-width: 617px;
    text-align: center;
    color: var(--accent);
}

.detail .txt {
    color: var(--subtxt);
    margin-bottom: 1.5rem;
}

.detail {
    background-color: var(--white);
    padding: 2.7rem;
    border-radius: 65px;
}

@media screen and (max-width: 768px) {
    .detail {
        padding: 2rem 2.2rem;
        border-radius: 40px;
    }
}

.detail .txt__box {
    border-bottom: 2px dotted var(--subtxt);
    font-weight: bold;
}

.detail .txt__box .ttl {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    .detail .txt__box .ttl {
        font-size: 1.5rem;
    }
}

.detail_list {
    display: grid;
    grid-template-columns: 1fr 3.5fr;
    font-size: .85rem;
    column-gap: .8rem;
    row-gap: 1rem;
}

.detail_list dt {
    padding: .5rem 1rem;
    text-align: center;
    height: 2.3rem;
    white-space: nowrap;
}

.detail_list dd {
    padding: .5rem 0 .5rem .5rem;
}

.detail_list .lunch {
    background-color: var(--accent);
}

.detail_list .dinner {
    background-color: var(--sub);
    color: var(--white);
}

.detail_list .place {
    border: 1px solid var(--subtxt);
}

.detail__box {
    place-items: end;
}

#event .bg-bat04 {
    width: 300px;
    position: absolute;
    top: 48%;
    right: 0;
}

#event .bg-bat05 {
    position: absolute;
    left: 0;
    bottom: -5%;
}

@media screen and (max-width: 768px) {
    #event .bg-bat05 {
        bottom: -7.5%;
    }
}

#event {
    position: relative;
}

#event .detail__box {
    place-items: center;
    margin-bottom: 6rem;
}

@media screen and (max-width: 768px) {
    #event .detail__box:last-child {
        margin-bottom: initial;
    }
}

.detail {
    position: relative;
}

.detail__box .hat {
    position: absolute;
    top: -35px;
    left: -35px;
}

.detail__box .goast {
    position: absolute;
    bottom: -5px;
    right: -40px;
}

@media screen and (max-width: 768px) {
        .detail__box .hat {
        width: 60px;
        top: -20px;
        left: -15px;
    }
    
    .detail__box .goast {
        position: absolute;
        width: 75px;
        bottom: -5px;
        right: -15px;
    }
}

#about .detail__box .img__box {
    position: relative;
    margin-bottom: 0;
}

.detail__box .img__box .sub {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 240px;
}

.detail__box .detail__area .btn {
    margin-top: 2.5rem;
}

/*====================================*/
/* benefit */
/*====================================*/
#benefit {
    font-family: "NotoSans", serif;
    position: relative;
}

#benefit .benefit__item {
    box-shadow: 10px 10px 0px 0px rgb(211 179 106);
    border-radius: 15px;
}

#benefit .benefit__item:not(:last-child) {
    margin-bottom: 5rem;
}

#benefit .benefit-bg {
    position: absolute;
    z-index: -20;
    width: 100%;
    overflow: hidden;
    margin-top: -20.5rem;
}

#benefit .benefit-bg img {
    width: 100%;
    object-fit: cover;
    height: 2700px;
    object-position: 50% 50%;
    zoom: 125%;
}

#benefit .benefit__ttl__box {
    background-color: var(--main);
    padding: 2rem 3rem;
    border-radius: 15px 15px 0 0;
}

#benefit .benefit__ttl__box .ttl__box {
    position: relative;
    padding: .8rem 0;
}

#benefit .benefit__ttl__box .ttl__box .txt {
    position: absolute;
    background-color: var(--white);
    padding: .2rem 1rem;
    border-radius: 5px;
    color: var(--main);
    top: 50%;
    left: 0;
    transform: translate(0%,-50%);
    font-size: 1.5rem;
    font-weight: bold;
    font-family: initial;
}

#benefit .benefit__ttl__box .ttl__box .txt .num {
    font-size: 1.8rem;
}

#benefit .benefit__ttl__box .ttl__box .ttl {
    color: var(--white);
    font-size: 2.5rem;
    text-align: center;
    font-family: "NotoSans", serif;
}

#benefit .benefit__ttl__box .ttl__box .ttl.line-break {
    font-size: 2rem;
}

#benefit .benefit__cnt {
    background-color: var(--white);
    text-align: center;
    padding: 2.5rem 3rem 3rem;
    border-radius: 0 0 15px 15px;
}

#benefit .benefit__txt {
    line-height: 2.5rem;
    margin-bottom: 2.5rem;
}

@media screen and (max-width: 768px) {
    #benefit .benefit__cnt {
        padding: 1.5rem 1rem 2rem;
    }
    #benefit .benefit__ttl__box .ttl__box {
        padding: 1.2rem 0 0;
        margin: auto;
    }
    #benefit .benefit__ttl__box .ttl__box .ttl {
        font-size: 1.5rem;
    }
    #benefit .benefit__ttl__box .ttl__box .ttl.line-break {
        font-size: 1.5rem;
    }
    #benefit .benefit__ttl__box {
        padding: 1rem 1rem 2rem;
        text-align: center;
    }

    #benefit .benefit__ttl__box .ttl__box .txt {
        position: initial;
        padding: .2rem .2rem;
        color: var(--main);
        display: inline-block;
        transform: initial;
        font-size: 1rem;
        margin: auto;
        width: 100px;
        text-align: center;
        margin-bottom: 1rem;
    }
    #benefit .benefit__ttl__box .ttl__box .txt .num {
        font-size: 1.5rem;
    }
}

#benefit .benefit__img__box {
    position: relative;
}

.balloon__box {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(25%, -50%);
}

@media screen and (max-width: 768px) {
    .balloon__box img {
        width: 80px;
    }
}

#benefit .benefit-frame {
    position: absolute;
    bottom: 0;
}

/*====================================*/
/* event */
/*====================================*/
#event {
    position: relative;
    background: linear-gradient(180deg, #241716 7.79%, #231816 47.21%, #895E56 77.56%);
}

#event::before {
    position: absolute;
    content: "";
    top: -5px;
    left: 0;
    width: 100%;
    height: 10px;
    background-color: #241716;
}

/*====================================*/
/* greeting */
/*====================================*/
#greeting {
    position: relative;
    background: url(../imgs/greeting-bg.jpg) #0c0c0c no-repeat center;
    background-attachment: fixed;
    background-size: cover;
    overflow: hidden;
    width: 100%;
    padding-top: 6.5rem;
}

#greeting .inner {
    padding-top: 5rem;
    padding-bottom: 0;
}

@media screen and (max-width: 768px) {
    #greeting .inner {
        padding-top: 2rem;
        padding-bottom: 0;
    }
}

#greeting::before {
    position: absolute;
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 100vw solid transparent;
    border-left: 100vw solid transparent;
    border-top: 150px solid #885e56;
    border-bottom: 0;
}

@media screen and (max-width: 768px) {
    #greeting::before {
        border-top: 70px solid #885e56;
    }
}

#greeting .ttl__box {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 1;
}

@media screen and (max-width: 768px) {
    #greeting .ttl__box {
        width: 300px;
        max-width: 300px
        ;
    }
}

#greeting .txt__box {
    text-align: center;
}

#greeting .txt {
    color: var(--white);
    line-height: 2.2;
}

#greeting .greeting__box {
    align-items: center;
}

/*====================================*/
/* footer */
/*====================================*/
.footer {
    position: relative;
}

.footer .inner {
	padding-bottom: 2rem;
	padding-top: 3rem;
}

.cnt_inner {
    max-width: 800px;
    margin: 0 auto 2rem;
}

.footer {
	background: var(--main);
	color: #fff;
	/* padding: 3.3rem 0 1.5rem; */
	font-weight: normal;
}
.footer h2 {
	text-align: center;
	font-size: 1.8rem;
	letter-spacing: .05em;
	font-weight: normal;
	margin-bottom: 1.1rem;
}
[lang="en"] .footer h2 {
	letter-spacing: 0;
}
.footer .sns {
	/* width: 31.9rem; */
	margin: 0 auto 2.5rem;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
	font-feature-settings: "palt";
}
.footer .sns li + li {
	margin-top: 1rem;
}
.footer .sns li a {
	position: relative;
	border: 1px solid #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 7rem;
	padding-left: 6.3rem;
	font-size: 1rem;
	font-weight: normal;
}
[lang="en"] .footer .sns li a {
	padding-left: 6rem;
}
[lang="en"] .footer .sns li:last-child a,
[lang="en"] .footer .sns li:nth-child(3) a {
	letter-spacing: -.05em;
}
.footer .sns li a::before {
	content: '';
	display: block;
	width: 3.2rem;
	height: 3.3rem;
	background: url(../img/insta-icn.svg) no-repeat left top / 100% auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 1.3rem;
	margin: auto 0;
}
.footer .sns li.face a::before {
	background-image: url(../img/facebook-icn.svg);
}
.footer .sns li a::after {
	content: '';
	content: '';
	display: block;
	width: .7rem;
	height: .7rem;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: scaleY(.7) rotate(45deg);
	position: absolute;
	top: 0;
	bottom: 0;
	right: 1.3rem;
	margin: auto 0;
}
.footer .sns li a span {
	font-size: .8rem;
}
.footer .note {
	/* width: 32.5rem; */
	margin: 0 auto;
	font-size: 1rem;
	/* letter-spacing: .05em; */
	font-feature-settings: "palt";
	line-height: 1.8;
	padding-right: 1rem;
	font-weight: normal;
}
.footer .note li {
	margin-left: 1em;
	text-indent: -1em;
}
.footer .links {
	text-align: center;
	/* margin: 5.5rem 0 5rem; */
}
.footer .links img {
	/* height: 4.2rem; */
	width: auto;
	display: inline;
}
.footer .links li + li {
	margin-top: 1.5rem;
}
.footer .links img {
	/* height: 4.2rem; */
	width: auto;
	display: inline;
}
.footer .links li:nth-child(3) img {
	height: 6.2rem;
}
.footer .group_link {
	text-align: center;
	font-size: 1.5rem;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
	font-feature-settings: "palt";
}
.footer .copyright {
	text-align: center;
	font-size: .8rem;
	display: block;
	line-height: 1.3;
	margin-top: 1.5rem;
	letter-spacing: .035em;
	color: var(--main);
	background-color: var(--white);
	padding: 1rem 0;
}
#pageTop {
	position: fixed;
	bottom: 1.2rem;
	right: 1.2rem;
	font-size: 1rem;
	z-index: 1100;
	display: none;
}
#pageTop a {
	display: block;
	z-index: 5000;
	padding: 7px 14px 7px;
	text-decoration: none;
	text-align: center;
	border-radius: .3rem;
	background: #fff;
	transition: all .2s ease;
	width: 3.5rem;
	height: 3.5rem;
	position: relative;
}
#pageTop a::after {
	content: '';
	display: block;
	width: 1.4rem;
	height: 1.4rem;
	border-top: .2rem solid #bf9e59;
	border-right: .2rem solid #bf9e59;
	transform: rotate(-45deg);
	position: absolute;
	top: .7rem;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.footer .btn {
    position: relative;
    background-color: var(--white);
    border: 1px solid var(--white);
    color: var(--main);
    text-align: center;
    letter-spacing: .15em;
    border-radius: 50px;
    max-width: 450px;
}

.footer .btn-1 {
    position: relative;
    background-color: var(--white);
    border: 1px solid var(--white);
    color: var(--main);
    text-align: center;
    letter-spacing: .15em;
    border-radius: 50px;
}

.footer .btn-1:hover {
    background-color: var(--main);
    border: 1px solid var(--white);
    color: var(--white);
}

@media only screen and (min-width: 769px) {
	.footer {
	}
	.footer h2 {
		font-size: 2rem;
	}
	.footer .sns {
		margin: 0 auto 3rem;
	}
	.footer .sns ul {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.footer .sns li {
		flex-basis: calc(100% / 2 - .5rem);
		margin-bottom: 1rem;
	}
	.footer .sns li + li {
		margin-top: 0;
	}
	.footer .sns li a {
		border-width: 2px;
		padding-left: 7.2rem;
		font-size: 1.1rem;
		letter-spacing: 0 !important;
	}
	.footer .sns li a::before {
		width: 3.7rem;
		height: 3.7rem;
		left: 1.7rem;
	}
	.footer .sns li a::after {
		border-top: 2px solid var(--white);
		border-right: 2px solid var(--white);
		transform: scaleY(.8) rotate(45deg);
		top: .3rem;
	}
	.footer .sns li a span {
	}
	.footer .note {
		font-size: .8rem;
		padding-right: 2.2rem;
	}
	.footer .links {
		display: flex;
		justify-content: center;
		align-items: center;
		left: -.9rem;
	}
	.footer .links img {
	}
	.footer .links li:nth-child(3) img {
		height: 8.4rem;
	}
	.footer .links li + li {
		margin: 0 0 0 6.6rem;
	}
	.footer .links li + li:nth-child(2) {
		margin-left: 6.4rem;
	}
	.footer .group_link {
		font-size: 1.729rem;
	}
	.footer .copyright {
		margin-top: 1rem;
		letter-spacing: .035em;
	}
	#pageTop {
		position: fixed;
		bottom: 2rem;
		right: 2rem;
		font-size: 1.1rem;
	}
	#pageTop a {
		width: 6rem;
		height: 6rem;
	}
	#pageTop a::after {
		width: 2.4rem;
		height: 2.4rem;
		border-top: .5rem solid #bf9e59;
		border-right: .5rem solid #bf9e59;
		top: 1.7rem;
	}
}