@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
* {
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}
html{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "pkna" 1, "palt" 1, "kern" 1;
  font-kerning: normal;
}
a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
}
html,
body {
    margin: 0px;
    height: 100%;
}
/* a blue color as a generic focus style */
button:focus-visible {
    outline: 2px solid #4a90e2 !important;
    outline: -webkit-focus-ring-color auto 5px !important;
}
a {
    text-decoration: none;
}
.fixed{
    position: fixed;
    max-height: 100lvh;
}
:root {
    --logoblue: rgba(81, 133, 197, 1);
    --logogreen: rgba(19, 174, 103, 1);
    --logoblack: rgba(35, 24, 21, 1);
    --logowhite: rgba(255, 255, 255, 1);
    --filesection: rgba(233, 233, 233, 1);
    --filestatus: rgba(204, 204, 204, 1);
    --filephotographorder: rgba(255, 0, 0, 1);
    --filephotographselect: rgba(255, 157, 0, 1);
    --filephotographok: rgba(3, 200, 0, 1);
    --filephotographtext: rgba(255, 255, 255, 1);
    --h2-font-family: "Shippori Mincho", Helvetica;
    --h2-font-weight: 400;
    --h2-font-size: 48px;
    --h2-letter-spacing: 4.800000190734863px;
    --h2-line-height: 48px;
    --h2-font-style: normal;
    --h3-font-family: "Shippori Mincho", Helvetica;
    --h3-font-weight: 400;
    --h3-font-size: 36px;
    --h3-letter-spacing: 3.5999999046325684px;
    --h3-line-height: 61.20000076293945px;
    --h3-font-style: normal;
    --h4-font-family: "Shippori Mincho", Helvetica;
    --h4-font-weight: 400;
    --h4-font-size: 28px;
    --h4-letter-spacing: 1.399999976158142px;
    --h4-line-height: 47.599998474121094px;
    --h4-font-style: normal;
    --h5-font-family: "Shippori Mincho", Helvetica;
    --h5-font-weight: 400;
    --h5-font-size: 24px;
    --h5-letter-spacing: 1.2000000476837158px;
    --h5-line-height: 40.79999923706055px;
    --h5-font-style: normal;
    --h6-font-family: "Shippori Mincho", Helvetica;
    --h6-font-weight: 400;
    --h6-font-size: 20px;
    --h6-letter-spacing: 1px;
    --h6-line-height: 34px;
    --h6-font-style: normal;
    --text-l-font-family: "Shippori Mincho", Helvetica;
    --text-l-font-weight: 400;
    --text-l-font-size: 16px;
    --text-l-letter-spacing: 2.4000000953674316px;
    --text-l-line-height: 54px;
    --text-l-font-style: normal;
    --text-m-font-family: "Shippori Mincho", Helvetica;
    --text-m-font-weight: 400;
    --text-m-font-size: 15px;
    --text-m-letter-spacing: 0.75px;
    --text-m-line-height: 30px;
    --text-m-font-style: normal;
    --text-strong-font-family: "Shippori Mincho", Helvetica;
    --text-strong-font-weight: 800;
    --text-strong-font-size: 15px;
    --text-strong-letter-spacing: 0.75px;
    --text-strong-line-height: 30px;
    --text-strong-font-style: normal;
    --text-s-font-family: "Shippori Mincho", Helvetica;
    --text-s-font-weight: 400;
    --text-s-font-size: 13px;
    --text-s-letter-spacing: 0.6499999761581421px;
    --text-s-line-height: 26px;
    --text-s-font-style: normal;
    --text-SS-font-family: "Shippori Mincho", Helvetica;
    --text-SS-font-weight: 400;
    --text-SS-font-size: 12px;
    --text-SS-letter-spacing: 0.6000000238418579px;
    --text-SS-line-height: 24px;
    --text-SS-font-style: normal;
    --menu-l-font-family: "Shippori Mincho", Helvetica;
    --menu-l-font-weight: 400;
    --menu-l-font-size: 24px;
    --menu-l-letter-spacing: 1.5px;
    --menu-l-line-height: 28.799999237060547px;
    --menu-l-font-style: normal;
    --menu-m-font-family: "Shippori Mincho", Helvetica;
    --menu-m-font-weight: 400;
    --menu-m-font-size: 16px;
    --menu-m-letter-spacing: 0.8479999899864197px;
    --menu-m-line-height: 19.200000762939453px;
    --menu-m-font-style: normal;
    --menu-s-font-family: "Shippori Mincho", Helvetica;
    --menu-s-font-weight: 400;
    --menu-s-font-size: 12px;
    --menu-s-letter-spacing: 1.100000023841858px;
    --menu-s-line-height: 14.399999618530273px;
    --menu-s-font-style: normal;
    --menu-language-font-family: "Shippori Mincho", Helvetica;
    --menu-language-font-weight: 400;
    --menu-language-font-size: 10px;
    --menu-language-letter-spacing: 2px;
    --menu-language-line-height: 10px;
    --menu-language-font-style: normal;
    --date-font-family: "Shippori Mincho", Helvetica;
    --date-font-weight: 800;
    --date-font-size: 13px;
    --date-letter-spacing: 2.5999999046325684px;
    --date-line-height: 13px;
    --date-font-style: normal;
    --button-font-family: "Shippori Mincho", Helvetica;
    --button-font-weight: 400;
    --button-font-size: 15px;
    --button-letter-spacing: 0.75px;
    --button-line-height: 15px;
    --button-font-style: normal;
    --copyright-font-family: "Shippori Mincho", Helvetica;
    --copyright-font-weight: 800;
    --copyright-font-size: 11px;
    --copyright-letter-spacing: 2.200000047683716px;
    --copyright-line-height: 11px;
    --copyright-font-style: normal;
    --tate-h1-tate-font-family: "Shippori Mincho", Helvetica;
    --tate-h1-tate-font-weight: 400;
    --tate-h1-tate-font-size: 48px;
    --tate-h1-tate-letter-spacing: 4.800000190734863px;
    --tate-h1-tate-line-height: 62.400001525878906px;
    --tate-h1-tate-font-style: normal;
    --tate-h2-tate-font-family: "Shippori Mincho", Helvetica;
    --tate-h2-tate-font-weight: 400;
    --tate-h2-tate-font-size: 36px;
    --tate-h2-tate-letter-spacing: 3.5999999046325684px;
    --tate-h2-tate-line-height: 46.79999923706055px;
    --tate-h2-tate-font-style: normal;
    --tate-h3-tate-font-family: "Shippori Mincho", Helvetica;
    --tate-h3-tate-font-weight: 400;
    --tate-h3-tate-font-size: 28px;
    --tate-h3-tate-letter-spacing: 1.399999976158142px;
    --tate-h3-tate-line-height: 33.599998474121094px;
    --tate-h3-tate-font-style: normal;
    --wf-h1-font-family: "Noto Sans JP", Helvetica;
    --wf-h1-font-weight: 700;
    --wf-h1-font-size: 36px;
    --wf-h1-letter-spacing: 0px;
    --wf-h1-line-height: 170.00000476837158%;
    --wf-h1-font-style: normal;
    --wf-h2-font-family: "Noto Sans JP", Helvetica;
    --wf-h2-font-weight: 700;
    --wf-h2-font-size: 24px;
    --wf-h2-letter-spacing: 0px;
    --wf-h2-line-height: 170.00000476837158%;
    --wf-h2-font-style: normal;
    --wf-h3-font-family: "Noto Sans JP", Helvetica;
    --wf-h3-font-weight: 700;
    --wf-h3-font-size: 20px;
    --wf-h3-letter-spacing: 0px;
    --wf-h3-line-height: 170.00000476837158%;
    --wf-h3-font-style: normal;
    --wf-h4-font-family: "Noto Sans JP", Helvetica;
    --wf-h4-font-weight: 700;
    --wf-h4-font-size: 18px;
    --wf-h4-letter-spacing: 0px;
    --wf-h4-line-height: 170.00000476837158%;
    --wf-h4-font-style: normal;
    --wf-text-strong-font-family: "Noto Sans JP", Helvetica;
    --wf-text-strong-font-weight: 700;
    --wf-text-strong-font-size: 16px;
    --wf-text-strong-letter-spacing: 0px;
    --wf-text-strong-line-height: 170.00000476837158%;
    --wf-text-strong-font-style: normal;
    --wf-text-font-family: "Noto Sans JP", Helvetica;
    --wf-text-font-weight: 400;
    --wf-text-font-size: 16px;
    --wf-text-letter-spacing: 0px;
    --wf-text-line-height: 170.00000476837158%;
    --wf-text-font-style: normal;
    --wf-text-s-font-family: "Noto Sans JP", Helvetica;
    --wf-text-s-font-weight: 400;
    --wf-text-s-font-size: 14px;
    --wf-text-s-letter-spacing: 0px;
    --wf-text-s-line-height: 170.00000476837158%;
    --wf-text-s-font-style: normal;
    --wf-text-SS-font-family: "Noto Sans JP", Helvetica;
    --wf-text-SS-font-weight: 700;
    --wf-text-SS-font-size: 13px;
    --wf-text-SS-letter-spacing: 0px;
    --wf-text-SS-line-height: 170.00000476837158%;
    --wf-text-SS-font-style: normal;
    --wf-button-font-family: "Noto Sans JP", Helvetica;
    --wf-button-font-weight: 700;
    --wf-button-font-size: 16px;
    --wf-button-letter-spacing: 0px;
    --wf-button-line-height: 100%;
    --wf-button-font-style: normal;
    --wf-copyright-font-family: "Noto Sans JP", Helvetica;
    --wf-copyright-font-weight: 400;
    --wf-copyright-font-size: 12px;
    --wf-copyright-letter-spacing: 0px;
    --wf-copyright-line-height: 100%;
    --wf-copyright-font-style: normal;
    --styleguide-h1-font-family: "Noto Sans JP", Helvetica;
    --styleguide-h1-font-weight: 700;
    --styleguide-h1-font-size: 48px;
    --styleguide-h1-letter-spacing: 2.4px;
    --styleguide-h1-line-height: 100%;
    --styleguide-h1-font-style: normal;
    --styleguide-h2-font-family: "Noto Sans JP", Helvetica;
    --styleguide-h2-font-weight: 700;
    --styleguide-h2-font-size: 32px;
    --styleguide-h2-letter-spacing: 1.6px;
    --styleguide-h2-line-height: 100%;
    --styleguide-h2-font-style: normal;
    --styleguide-h3-font-family: "Noto Sans JP", Helvetica;
    --styleguide-h3-font-weight: 700;
    --styleguide-h3-font-size: 16px;
    --styleguide-h3-letter-spacing: 0.8px;
    --styleguide-h3-line-height: 100%;
    --styleguide-h3-font-style: normal;
    --styleguide-text-font-family: "Noto Sans JP", Helvetica;
    --styleguide-text-font-weight: 400;
    --styleguide-text-font-size: 18px;
    --styleguide-text-letter-spacing: 0.9px;
    --styleguide-text-line-height: 200%;
    --styleguide-text-font-style: normal;
    --styleguide-text-strong-font-family: "Noto Sans JP", Helvetica;
    --styleguide-text-strong-font-weight: 700;
    --styleguide-text-strong-font-size: 18px;
    --styleguide-text-strong-letter-spacing: 0.9px;
    --styleguide-text-strong-line-height: 200%;
    --styleguide-text-strong-font-style: normal;
}

/* components */

.button-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 24px 96px;
    position: relative;
    flex: 0 0 auto;
    background-color: #ffffff;
    text-decoration: none;
    transition: all .5s;
    outline: none;
}

.text-wrapper-12,.button-white-inner {
    color: #088c62;
    position: relative;
    width: fit-content;
    font-family: var(--button-font-family);
    font-weight: var(--button-font-weight);
    font-size: var(--button-font-size);
    text-align: center;
    letter-spacing: var(--button-letter-spacing);
    line-height: var(--button-line-height);
    white-space: nowrap;
    font-style: var(--button-font-style);
    transition: all .5s;
}

.button-white:hover .text-wrapper-12,.button-white:hover .button-white-inner{
    color: #204f5e;
}
.menu-bt{
    transition: opacity .5s;
}
.menu-bt:hover{
    opacity: .5;
}

.button-s {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0px 8px 16px;
    position: relative;
    flex: 0 0 auto;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-color: #088c63;
    transition: all .5s;
}

.button-s:hover{
    border-bottom: 1px solid #204f5e;
}

.button-s:hover .text-wrapper-12{
    color: #204f5e;
}
.button-grad span,.button-s span,.button-white span{
    pointer-events: none;
    width: 100%;
    height: 100%;
}
.button-grad {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 48px;
    position: relative;
    flex: 0 0 auto;
    background: linear-gradient(
        90deg,
        rgba(8, 140, 99, 1) 0%,
        rgba(32, 79, 94, 1) 75%
    );
    transition: all 1s;
    place-items: center;
    box-sizing: border-box;
}
.button-grad::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #088c63;
    opacity: 0;
    transition: all .5s;
    cursor: pointer;
    top: 0;
    left: 0;
    place-items: center;
    box-sizing: border-box;
}
.button-grad:hover::before{
    opacity: 1;
}

.button-grad-inner {
    color: #ffffff;
    position: relative;
    width: fit-content;
    font-family: var(--button-font-family);
    font-weight: var(--button-font-weight);
    font-size: var(--button-font-size);
    text-align: center;
    letter-spacing: var(--button-letter-spacing);
    line-height: var(--button-line-height);
    white-space: nowrap;
    font-style: var(--button-font-style);
}

.footer {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 20px;
    color: #fff;
    font-family: 'Shippori Mincho', serif;
}
.footer .back {
    max-width: 100%;
    width: 100%;
    height: 724px;
    position: absolute;
    margin: 0 !important;
    z-index: 0;
    background-image: url(/assets/img/front/footer-back.webp);
    background-repeat: no-repeat;
    background-size: cover;
}
.footer .back-icon {
position: absolute;
top: 0px;
left: 0px;
width:100%;
height: 724px;
object-fit: cover;
}
.footer .blur {
position: absolute;
top: 0px;
left: 0px;
backdrop-filter: blur(8px);
background-color: rgba(255, 255, 255, 0.01);
width: 100%;
height: 724px;
}
.footer .contact {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 160px 64px;
    gap: 64px;
    z-index: 1;
}
.footer .contact-title {
    width: 100%;
    position: relative;
    font-size: 36px;
    letter-spacing: 3.6px;
    line-height: 61.2px;
    display: inline-block;
    max-width: 1312px;
}
.footer .footer-button-1 {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    max-width: 1312px;
    color: #088c63;
}
.footer .footer-button-2 {
    height: 180px;
    flex: 1;
    backdrop-filter: blur(4px);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #088c63;
    text-decoration: none;
    
    transition: all .5s;
}
.footer .footer-button-2 .footer-div{
    color: #088c63;
    
    transition: all .5s;
}
.footer .footer-button-2:hover{
    background-color: #088c63;
}
.footer .footer-button-2:hover .footer-div{
    /* color:#204F5E; */
    color:#fff;
    border-bottom: #fff;
}
.footer .text {
    border-bottom: 1px solid #088c63;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 8px 8px;
    transition: all .5s;
}
.link-s a:hover{
    opacity: .5;
}
.footer .footer-button-2:hover .text{
    /* border-bottom: 1px solid #204F5E */
    border-bottom: 1px solid #FFF
}
.footer .footer-div {
    position: relative;
    letter-spacing: 1px;
    line-height: 34px;
    color: #fff;
}
.footer .footer-button-3 {
    height: 180px;
    flex: 1;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.footer .link-s {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    max-width: 1312px;
}
.footer .link-s a{
    transition: all .5s;
    font-size: 16px;
    letter-spacing: 0.8px;
    line-height: 27.2px;
}
.footer .line-icon {
    height: 16px;
    width: 1px;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    opacity: 0.5;
}
.footer2 {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    z-index: 2;
    text-align: left;
    font-size: 13px;
    background-image: url(/assets/img/front/04432a7f99e767e0e33acf21bfa0431e7e6fc7d6.webp);
}
.footer .menu {
    align-self: stretch;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 192px 160px;
}
.footer .footer-contents {
    width: 1120px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    max-width: 1120px;
}
.footer .footer-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
}
.footer .logo-icon {
    width: 274px;
    height: 44px;
}
.footer .text3 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}
.footer .tel-0288-77-1221 {
    position: relative;
    letter-spacing: 0.65px;
    line-height: 26px;
    opacity: 0.7;
    -webkit-touch-callout: none;
    color: #fff;
}
.footer .p {
    margin: 0;
}
.footer .sns {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 12px;
}

.footer .footer-sns {
    height: 16px;
    width: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer .instagram-icon {
flex: 1;
position: relative;
max-width: 100%;
overflow: hidden;
max-height: 100%;
}
.footer .footer-right {
display: flex;
align-items: flex-start;
justify-content: flex-end;
gap: 48px;
font-size: 12px;
}
.footer .footer-small {
display: flex;
align-items: flex-start;
justify-content: flex-end;
gap: 24px;
}
.footer .div7 {
    width: 12px;
    position: relative;
    letter-spacing: 1.1px;
    line-height: 14.4px;
    display: inline-block;
    flex-shrink: 0;
    color: #fff;
    text-decoration: none;
    transition: all .5s;
}
.footer .div7 span{
    transform: rotate(90deg);
    display: inline-block;
}
.footer .footer-menu {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 32px;
    font-size: 16px;
}
.footer .div14 {
    width: 18px;
    position: relative;
    letter-spacing: 0.85px;
    line-height: 19.2px;
    display: inline-block;
    flex-shrink: 0;
    color: #fff;
    text-decoration: none;
    transition: all .5s;
}
.footer .div14:hover,.footer .div7:hover{
    opacity: .5;
}
.footer .copyright {
    align-self: stretch;
    background-color: #204f5e;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 160px;
    opacity: 0.5;
    text-align: center;
    font-size: 11px;
}
.footer .hana-no-yado {
    flex: 1;
    position: relative;
    letter-spacing: 2.2px;
    line-height: 11px;
    font-weight: 800;
    display: inline-block;
    max-width: 1120px;
}

.is-fadeable{
    opacity: 0;
    transition: all 3s cubic-bezier(0.22, 1, 0.36, 1);
    transform: translateY(30px);
}

.is-fadeable.is-fade-in{
    opacity: 1;
    transform: translateY(0);
}

.connection{
    width: 100%;
    height: 600px;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0px 0px 4px;
    box-sizing: border-box;
    text-align: center;
    font-size: 28px;
    color: #fff;
    font-family: 'Shippori Mincho', serif;
}
.stay-page-banner{
    background-image: url(/assets/img/page/stay-page-banner.webp);
    width: 100%;
    height: 100%;
    background-size: cover;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
}
.stay-page-banner-large{
    width: 100%;
    position: relative;
    font-size: 28px;
    letter-spacing: 1.4px;
    line-height: 47.6px;
    font-family: 'Shippori Mincho', serif;
    color: #fff;
    text-align: center;
    display: inline-block;
}
.stay-page-banner-small{
    width: 100%;
    position: relative;
    font-size: 15px;
    letter-spacing: 0.75px;
    line-height: 30px;
    font-family: 'Shippori Mincho', serif;
    color: #fff;
    text-align: center;
    display: inline-block;
}
.connection-banner {
    height: 100%;
    flex: 1;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    text-align: center;
    font-size: 28px;
    color: #fff;
    font-family: 'Shippori Mincho', serif;
    text-decoration: none;
}
.connection-banner-inner{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
}
.connection-banner-inner::before{
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
    transition: all .5s;
}
.connection-banner:hover .connection-banner-inner::before{
    opacity: 0.2;
}
.connection-banner-inner span{
    width: 28px;
    position: relative;
    letter-spacing: 1.4px;
    line-height: 33.6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.header__hmbgr{
    position: fixed;
    top: 0;
    z-index: 999999;
    visibility: hidden;
    opacity: 0;
    transition:
        visibility 0s linear,
        opacity 0.3s ease;
    transition-behavior: allow-discrete;
    right: 0;
}
.header__hmbgr.show{
    visibility: visible;
    opacity: 1;
    pointer-events: none;

}
.header__hmbgr.open.show{
    pointer-events: all;
}
.header__hmbgr .icons{
    display: flex;
    flex-direction: column;
    width: 44px;
    height: 32px;
    position: absolute;
    right:64px;
    top: 64px;
    pointer-events: all;
}
.header__hmbgr .icons span{
    background-color: #088C63;
    height: 2px;
    width: 44px;
    position: absolute;
    transition: all .5s;
}
.header__hmbgr .icons span:nth-child(1){
    top:0;
}
.header__hmbgr .icons span:nth-child(2){
    top:15px
}
.header__hmbgr .icons span:nth-child(3){
    top:30px
}

.header__hmbgr.open .icons span{
    background-color: #fff;
}

.header__hmbgr.open .icons span:nth-child(1){
    top:15px;
    transform: rotate(45deg);
}
.header__hmbgr.open .icons span:nth-child(2){
    top:15px;
    opacity: 0;
}
.header__hmbgr.open .icons span:nth-child(3){
    top:15px;
    transform: rotate(-45deg);
}

.header__hmbgr .header__hmbgr-contents{
    visibility: hidden;
    opacity: 0;
    width: 100vw;
    height: 100dvh;
    transition:
        visibility 0s linear 0.3s,
        opacity 0.3s ease;
    transition-behavior: allow-discrete;
    display: flex;
}
.header__hmbgr.open .header__hmbgr-contents{
    visibility: visible;
    opacity: 1;
    transition:
        visibility 0s linear,
        opacity 0.3s ease;
    transition-behavior: allow-discrete;
}
.header__hmbgr-contents-left{
    flex: 1 1 auto;
    background-image: url(/assets/img/front/menu.webp);
    background-size: cover;
    background-position-x: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header__hmbgr-contents-right{
    padding: 64px;
    background-image: url(/assets/img/front/04432a7f99e767e0e33acf21bfa0431e7e6fc7d6.webp);
    background-size: cover;
    max-width: 928px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.header__hmbgr-contents-lang{
    display: flex;
    align-self: flex-end;
    justify-content: center;
    align-items: center;
    height: 32px;
    margin-right: 88px;
    gap: 8px;
}
.header__hmbgr-contents-lang a,.header__hmbgr-contents-lang span{
    align-items: center;
    position: relative;
    font-size: 13px;
    letter-spacing: 2.6px;
    line-height: 13px;
    font-weight: 800;
    font-family: 'Shippori Mincho', serif;
    color: #fff;
    flex: 0 0 auto;
    height: auto;
}
.header__hmbgr-contents-lang-split,.header__hmbgr-contents-lang-button{
    opacity: .5;
}
.header__hmbgr-contents-main{
    display: flex;
    flex-direction: row-reverse;
    gap: 96px;
    justify-content: space-evenly;
}
.header__hmbgr-contents-main-nav{
    display: flex;
    flex-direction: column;
    writing-mode: vertical-rl;
    gap:48px;
}
.header__hmbgr-contents-main-nav a{
    position: relative;
    font-size: 24px;
    letter-spacing: 4.8px;
    line-height: 28.8px;
    font-family: 'Shippori Mincho', serif;
    color: #fff;
    text-align: left;
    display: inline-block;
}
.header__hmbgr-contents-main-other{
    display: flex;
    flex-direction: column;
    writing-mode: vertical-rl;
    gap: 32px;
}
.header__hmbgr-contents-main-other a{
    position: relative;
    font-size: 16px;
    letter-spacing: 3.2px;
    line-height: 19.2px;
    font-family: 'Shippori Mincho', serif;
    color: #fff;
    text-align: left;
    display: inline-block;
}

.header__hmbgr-contents-footer{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.header__hmbgr-contents-footer-info{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.header__hmbgr-contents-footer-info address{
    position: relative;
    font-size: 12px;
    letter-spacing: 0.6px;
    line-height: 24px;
    font-family: 'Shippori Mincho', serif;
    color: #fff;
    text-align: left;
    opacity: 0.7;
}


.header-fixed-banner{
    position:fixed;
    bottom: 80px;
    right:24px;
    min-width: 174px;
    z-index: 99999;
}
.header-fixed-banner a{
    position: absolute;
}
.header-fixed-banner a.in-active{
    pointer-events: none;
    opacity: 0;
}
.header-fixed-banner .button-white{
    box-sizing: border-box;
    border:1px solid rgb(8, 140, 99);
    padding: 23.5px 47.5px;
}
.header-fixed-banner .button-white:hover{
    background-color:rgb(8, 140, 99);
}
.header-fixed-banner .button-white:hover .button-white-inner{
    color:#fff;
}
.mb{
    display: none;
}
.header__hmbgr-contents-footer .sns{
    display: flex;
    gap: 16px;
}
@media screen and (max-width:768px){
    .pc{
        display: none;
    }
    .header-fixed-banner{
        position:fixed;
        bottom: 12px;
        right:3.2vw;
        width: fit-content;
        display: grid;
        min-width: auto;
    }
     .header-fixed-banner a{
        position: relative;
        grid-area: 1/1;
        box-sizing: border-box;
     }
    .header-fixed-banner .button-white,.button-white,.button-grad{
        padding: 12px 24px;
    }
    .footer .contact{
        padding:clamp(24px, 12.8vw, 48px) clamp(10px, 5.33vw, 20px);
        gap: clamp(12px, 6.4vw, 24px);
    }
    .footer .contact-title{
        font-size: 24px;
        letter-spacing: 2.4px;
        line-height: 40.8px;
    }
    .footer .footer-button-1{
        flex-direction: column;
    }
    .footer .footer-button-2{
        flex: 0 0 auto;
        width: 100%;
        height: 100px;
        place-items: center;
    }
    .contents  .footer-button-2 .text{
        position: relative;
        left: auto;
    }
    .footer .back{
        background-position: center;
    }
    .footer .link-s{
        flex-direction: column;
        gap: 8px;
        letter-spacing: 0.8px;
        line-height: 27.2px;
    }
    .footer .link-s svg{
        display: none;
    }
    .footer2 .menu .footer-contents{
        flex-direction: column;
        width: 100%;
    }
    .footer .menu{
        padding: clamp(32px, 17vw, 64px) clamp(16px, 8.5vw, 32px);
    }
    .footer .footer-contents{
        align-items: center;
        justify-content: center;
        gap: 64px;
    }
    .footer .footer-left{
        gap: 36px;
    }
    .footer .text3{
        text-align: center;
        align-items: center;
    }
    .footer .footer-right{
        flex-direction: row-reverse;
        width: fit-content;
        height: 190px;
    }
    .footer .footer-right .footer-menu{
        flex-direction: column-reverse;
        width: fit-content;
        gap: 0;
        justify-content: space-between;
        height: 100%;
    }
    .footer .footer-right .footer-small{
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
        height: 100%;
        flex: 1;
        justify-content: space-between;
        gap: 0;
    }
    .footer .div14,.footer .div7{
        width: 100%;
    }
    .footer .div7 span {
        transform: rotate(0deg);
        display: inline-block
    }
    .footer .copyright{
        padding: 24px 32px;
    }
    .header__hmbgr{
        visibility: visible;
        opacity: 1;
        pointer-events: none;
    }

    .header__hmbgr .icons{
        top: clamp(24px, 4.1vw, 64px);
        right: clamp(24px, 4.1vw, 64px);
    }
    .header__hmbgr .icons{
        width: clamp(32px, 4.4vw, 44px);
        height: clamp(24px, 2.4vw, 32px);
    }
    .header__hmbgr .icons span{
        background-color: #fff;
        width: 100%;
    }
    .header__hmbgr.show .icons span{
        background-color: #088C63;
    }
    .header__hmbgr.open .icons span{
        background: #fff;
    }
     .header__hmbgr.open{
        pointer-events: auto;
     }
    .header__hmbgr .icons span:nth-child(2) {
        top: clamp(10px, 1vw, 15px);
    }
    .header__hmbgr .icons span:nth-child(3) {
        top: clamp(20px, 2vw, 30px);
    }
    .header__hmbgr-contents-left {
        background: none;
        position: absolute;
        top: clamp(24px, 4.1vw, 64px);
        left: clamp(24px, 4.1vw, 64px);
        width: 20vw;
        height: auto;
    }
    .header__hmbgr-contents-left svg{
        width:100%;
        height: auto;
    }
    .header__hmbgr-contents-right{
        padding: 0;
        justify-content: flex-start;
    }
    .header__hmbgr-contents-main{
        flex-direction: column;
        margin-top: calc(20vw + clamp(24px, 4.1vw, 64px) + 61px);
        gap: clamp(24px,4.1vw,48px);
    }
    .header__hmbgr-contents-main-nav{
        gap: clamp(16px, 8.5vw, 32px);
    }
    .header__hmbgr-contents-main-other{
        justify-content: space-between;
    }
    .header__hmbgr-contents-main-nav a{
        font-size: 20px;
        letter-spacing: 1px;
        line-height: 24px;
    }
    .header__hmbgr-contents-footer{
        flex-direction: column;
        padding:clamp(24px, 4.1vw, 64px) clamp(24px, 4.1vw, 64px);
        padding-top: 0;
        flex: 1;
    }
    .header__hmbgr-contents-footer-info{
        /* margin: clamp(24px, 4.1vw, 64px) 0; */
        align-items: center;
        margin: auto;
    }
    .header__hmbgr-contents-footer address{
        display: none;
    }
    .header__hmbgr-contents-footer-social{
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
    }
    .header__hmbgr-contents-lang.mb{
        display: flex;
        margin-right: 32px;
    }
    .header__hmbgr .button-white{
       padding: 24px 32px;
    }
    .connection{
        height: 44.3lvh;
    }
    .connection-banner-inner span{
        font-size: 20px;
        letter-spacing: 1px;
        line-height: 24px;
    }
    .header__hmbgr-contents-footer-social .sns{
        display: flex;
        gap: 12px;
    }
    .mobile-scroll-wrapper{
      gap: 16px;    
      width: 100%;
      overflow-x: scroll;
      display: inline-block;
      padding-bottom: 32px;
    }
    .mobile-scroll-wrapper::-webkit-scrollbar {
        height: 2px;
        background: rgba(128,128,128,0.3);
    }
    .mobile-scroll-wrapper::-webkit-scrollbar-thumb{
        background: rgb(8, 140, 99);
        border-radius: 5%;
    }

    .header__hmbgr-contents-main-nav,.header__hmbgr-contents-main-other{
        height: fit-content;
        min-height: 0;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

