@font-face {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/jp/assets/font/NotoSansJP-Regular.woff2") format("woff2")
}

@font-face {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/jp/assets/font/NotoSansJP-Medium.woff2") format("woff2")
}

@font-face {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/jp/assets/font/NotoSansJP-SemiBold.woff2") format("woff2")
}

@font-face {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/jp/assets/font/NotoSansJP-Bold.woff2") format("woff2")
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/jp/assets/font/Roboto-Regular.woff2") format("woff2")
}

:root {
    --transition: all 0.3s ease, outline 0s ease
}

html {
    font-size: 62.5%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth
}

html.pop {
    background: red
}

@media print,
screen and (min-width: 1240px) {
    :target {
        scroll-margin-top: 112px
    }
}

@media only screen and (max-width: 1239px) {
    :target {
        scroll-margin-top: 45px
    }
}

body {
    position: relative;
    width: 100%;
    min-width: 320px;
    background: #fff;
    color: #363636;
    font-size: 1.6em;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    line-height: 160%;
    scrollbar-gutter: stable;
    overflow-x: hidden
}

@media print,
screen and (min-width: 1240px) {
    body {
        padding-top: 64px
    }
}

@media only screen and (max-width: 1239px) {
    body {
        padding-top: 45px
    }
}

.is-overlay body {
    overflow: hidden
}

*:focus-visible {
    border-radius: 4px;
    outline: 2px solid #0371ee
}

a,
a::before,
a::after {
    transition: var(--transition)
}

b {
    font-weight: 700
}

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

.mainContents {
    padding-bottom: 1px;
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .mainContents {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .mainContents {
        font-size: 1.5rem
    }
}

.none {
    display: none !important
}

@media print,
screen and (min-width: 1240px) {
    .sp-only {
        display: none !important
    }

    .sp-show {
        display: none !important
    }

    .pc-hide {
        display: none !important
    }
}

@media only screen and (max-width: 1239px) {
    .pc-only {
        display: none !important
    }

    .pc-show {
        display: none !important
    }

    .sp-hide {
        display: none !important
    }
}

.inline {
    display: inline
}

.iblock {
    display: inline-block
}

.block {
    display: block
}

@media print,
screen and (min-width: 1240px) {
    .pc-inline {
        display: inline
    }

    .pc-iblock {
        display: inline-block
    }

    .pc-block {
        display: block
    }
}

@media only screen and (max-width: 1239px) {
    .sp-inline {
        display: inline
    }

    .sp-iblock {
        display: inline-block
    }

    .sp-block {
        display: block
    }
}

.overlayBg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .7);
    visibility: collapse;
    opacity: 0;
    z-index: 500;
    transition: var(--transition)
}

.is-overlay .overlayBg {
    visibility: visible;
    opacity: 1
}

.contantHeader {
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

.contantHeader.flex-cr {
    justify-content: center
}

@media print,
screen and (min-width: 1240px) {
    .contantHeader {
        gap: 32px;
        margin-top: 64px;
        margin-bottom: 32px;
        padding-right: calc((100% - 1080px)/2);
        padding-left: calc((100% - 1080px)/2)
    }

    .contantHeader.pc-flex-cr {
        justify-content: center
    }
}

@media only screen and (max-width: 1239px) {
    .contantHeader {
        gap: 16px;
        margin-top: 16px;
        margin-bottom: 16px;
        padding-right: max(16px, (100% - 720px)/2);
        padding-left: max(16px, (100% - 720px)/2)
    }

    .contantHeader.sp-flex-cr {
        justify-content: center
    }
}

@media print,
screen and (min-width: 1240px) {
    .wrap {
        padding: 0 calc((100% - 1080px)/2)
    }

    .wrap.bg-grad,
    .wrap.pc-bg-grad {
        margin-bottom: 48px;
        padding-top: 32px !important;
        padding-bottom: 32px;
        background: linear-gradient(164deg, #1A91FF 6.92%, #243FCE 95.35%)
    }

    .wrap.bg-grad .section,
    .wrap.pc-bg-grad .section {
        margin-bottom: 32px;
        padding: 32px;
        border-radius: 4px;
        background: #fff
    }

    .wrap.bg-grad .section:last-child,
    .wrap.pc-bg-grad .section:last-child {
        margin-bottom: 0
    }
}

@media only screen and (max-width: 1239px) {
    .wrap {
        padding: 0 max(16px, (100% - 720px)/2)
    }

    .wrap.bg-grad,
    .wrap.sp-bg-grad {
        margin-bottom: 32px;
        padding-top: 16px !important;
        padding-bottom: 16px;
        background: linear-gradient(164deg, #1A91FF 6.92%, #243FCE 95.35%)
    }

    .wrap.bg-grad .section,
    .wrap.sp-bg-grad .section {
        margin-bottom: 16px;
        padding: 16px;
        border-radius: 2px;
        background: #fff
    }

    .wrap.bg-grad .section:last-child,
    .wrap.sp-bg-grad .section:last-child {
        margin-bottom: 0
    }
}

.bgWrap.bg-grad {
    background: linear-gradient(164deg, #1A91FF 6.92%, #243FCE 95.35%)
}

@media print,
screen and (min-width: 1240px) {

    .bgWrap.bg-grad,
    .bgWrap.pc-bg-grad {
        padding: 32px calc((100% - 1080px)/2);
        background: linear-gradient(164deg, #1A91FF 6.92%, #243FCE 95.35%)
    }

    .bgWrap.bg-grad .section,
    .bgWrap.pc-bg-grad .section {
        margin-bottom: 32px;
        padding: 32px;
        border-radius: 4px;
        background: #fff
    }

    .bgWrap.bg-grad .section:last-child,
    .bgWrap.pc-bg-grad .section:last-child {
        margin-bottom: 0
    }
}

@media only screen and (max-width: 1239px) {

    .bgWrap.bg-grad,
    .bgWrap.sp-bg-grad {
        padding: 16px max(16px, (100% - 720px)/2);
        background: linear-gradient(164deg, #1A91FF 6.92%, #243FCE 95.35%)
    }

    .bgWrap.bg-grad .section,
    .bgWrap.sp-bg-grad .section {
        margin-bottom: 16px;
        padding: 16px;
        border-radius: 2px;
        background: #fff
    }

    .bgWrap.bg-grad .section:last-child,
    .bgWrap.sp-bg-grad .section:last-child {
        margin-bottom: 0
    }
}

.contantHeader+.section,
.contantHeader+form>.section:first-child,
.marinaHeader+.section {
    padding-top: 0
}

.section.bg-grad {
    background: linear-gradient(164deg, #1A91FF 6.92%, #243FCE 95.35%)
}

.section.bg-blue {
    background: #eef4fa
}

.section-header {
    display: flex;
    align-items: center
}

.section>*[class*=Ttl] {
    margin-bottom: 16px
}

@media print,
screen and (min-width: 1240px) {
    .section {
        margin-bottom: 48px;
        padding: 32px calc((100% - 1080px)/2)
    }

    .section.bg-grad,
    .section.bg-blue {
        padding-top: 32px !important;
        padding-bottom: 32px
    }

    .section.pc-bg-grad {
        padding-top: 32px !important;
        padding-bottom: 32px;
        background: linear-gradient(164deg, #1A91FF 6.92%, #243FCE 95.35%)
    }

    .section.pc-bg-blue {
        padding-top: 32px !important;
        padding-bottom: 32px;
        background: #eef4fa
    }

    .section-header {
        gap: 16px 24px;
        margin-bottom: 24px
    }

    .section-header:last-child {
        margin-bottom: 0
    }

    .section-content {
        margin-bottom: 32px
    }

    .section-content:last-child {
        margin-bottom: 0
    }

    .section-content.bg-gray,
    .section-content.pc-bg-gray {
        padding: 16px;
        background: #f7f7f7
    }

    .section-indent {
        max-width: 896px;
        margin: 0 auto 32px
    }

    .section-indent:last-child {
        margin-bottom: 0
    }
}

@media only screen and (max-width: 1239px) {
    .section {
        padding: 32px max(16px, (100% - 720px)/2)
    }

    .section.bg-grad,
    .section.bg-blue {
        padding-top: 16px !important;
        padding-bottom: 16px
    }

    .section.sp-bg-grad {
        padding-top: 16px !important;
        padding-bottom: 16px;
        background: linear-gradient(164deg, #1A91FF 6.92%, #243FCE 95.35%)
    }

    .section.sp-bg-grad .section-inner {
        padding: 16px;
        border-radius: 2px;
        background: #fff
    }

    .section.sp-bg-blue {
        padding-top: 16px !important;
        padding-bottom: 16px;
        background: #eef4fa
    }

    .section-header {
        justify-content: space-between;
        gap: 8px 16px;
        margin-bottom: 16px
    }

    .section-header:last-child {
        margin-bottom: 0
    }

    .section-content {
        margin-bottom: 16px
    }

    .section-content:last-child {
        margin-bottom: 0
    }

    .section-content.bg-gray,
    .section-content.sp-bg-gray {
        padding: 16px;
        background: #f7f7f7
    }

    .section-indent {
        margin-bottom: 16px
    }

    .section-indent:last-child {
        margin-bottom: 0
    }
}

.contantHeader+.indentSection,
.contantHeader+form>.indentSection:first-child {
    padding-top: 0
}

.indentSection-link {
    display: flex;
    flex-direction: column;
    margin-top: 32px;
    gap: 16px
}

.indentSection.bg-yellow {
    background: #fff9e5
}

.indentSection.bg-grad {
    background: linear-gradient(164deg, #1A91FF 6.92%, #243FCE 95.35%)
}

@media print,
screen and (min-width: 1240px) {
    .indentSection {
        margin-bottom: 48px;
        padding: 32px calc((100% - 824px)/2)
    }

    .indentSection-content+.indentSection-content {
        margin-top: 32px
    }

    .indentSection-content.bg-gray,
    .indentSection-content.pc-bg-gray {
        padding: 16px;
        background: #f7f7f7
    }

    .indentSection.bg-yellow {
        padding-top: 32px !important;
        padding-bottom: 32px
    }

    .indentSection.sp-bg-yellow {
        padding-top: 32px !important;
        padding-bottom: 32px;
        background: #fff9e5
    }

    .indentSection.bg-grad {
        padding-top: 32px !important;
        padding-bottom: 32px
    }

    .indentSection.pc-bg-grad {
        padding-top: 32px !important;
        padding-bottom: 32px;
        background: linear-gradient(164deg, #1A91FF 6.92%, #243FCE 95.35%)
    }
}

@media only screen and (max-width: 1239px) {
    .indentSection {
        padding: 32px max(16px, (100% - 720px)/2)
    }

    .indentSection-content+.indentSection-content {
        margin-top: 16px
    }

    .indentSection-content.bg-gray,
    .indentSection-content.sp-bg-gray {
        padding: 16px;
        background: #f7f7f7
    }

    .indentSection.bg-yellow {
        padding-top: 16px !important;
        padding-bottom: 16px
    }

    .indentSection.sp-bg-yellow {
        padding-top: 16px !important;
        padding-bottom: 16px;
        background: #fff9e5
    }

    .indentSection.bg-grad {
        padding-top: 16px !important;
        padding-bottom: 16px
    }

    .indentSection.sp-bg-grad {
        padding-top: 16px !important;
        padding-bottom: 16px;
        background: linear-gradient(164deg, #1A91FF 6.92%, #243FCE 95.35%)
    }
}

.shadowBox-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px
}

.shadowBox-ttl {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em;
    font-weight: 700
}

.shadowBox-subttl {
    font-weight: 700
}

@media print,
screen and (min-width: 1240px) {
    .shadowBox {
        gap: 32px;
        padding: 32px 40px 48px;
        border-radius: 4px;
        background: #fff;
        box-shadow: 0px 2px 6px 0px rgba(5, 41, 66, .15)
    }

    .shadowBox-spbox:not(:last-child) {
        margin-bottom: 32px
    }

    .shadowBox-spbox:not(:nth-child(1)) {
        padding-top: 32px;
        border-top: 1px solid #e6e6e6
    }

    .shadowBox-section:not(:last-child) {
        margin-bottom: 32px
    }

    .shadowBox-section:not(:nth-child(1)) {
        padding-top: 32px;
        border-top: 1px solid #e6e6e6
    }

    .shadowBox-section.line-none {
        padding-top: 0;
        border-top: none
    }

    .shadowBox-section.pc-bg-gray {
        padding: 32px 40px;
        border-top: none;
        background: #f7f7f7
    }

    .shadowBox-indent {
        padding-right: 80px;
        padding-left: 80px
    }

    .shadowBox-indent:not(:last-child) {
        margin-bottom: 32px
    }

    .shadowBox-indent:not(:nth-child(1)) {
        padding-top: 32px;
        border-top: 1px solid #e6e6e6
    }

    .shadowBox-indent.line-none {
        padding-top: 0;
        border-top: none
    }

    .shadowBox-input {
        padding-right: 80px;
        padding-left: 80px
    }

    .shadowBox-input:not(:last-child) {
        margin-bottom: 32px
    }

    .shadowBox-input:not(:nth-child(1)) {
        padding-top: 32px;
        border-top: 1px solid #e6e6e6
    }

    .shadowBox-input.line-none {
        padding-top: 0;
        border-top: none
    }

    .shadowBox-ttl {
        margin-bottom: 24px
    }

    .shadowBox-subttl {
        margin-bottom: 16px;
        font-size: 1.6rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .shadowBox-btn:not(:last-child) {
        margin-bottom: 32px
    }

    .shadowBox-btn:not(:nth-child(1)) {
        padding-top: 32px;
        border-top: 1px solid #e6e6e6
    }

    .shadowBox-btn.line-none {
        padding-top: 0;
        border-top: none
    }

    .shadowBox-btn.pc-col-2 {
        flex-direction: row
    }

    .shadowBox-btn.pc-col-2>* {
        width: min(auto, 50%) !important
    }

    .shadowBox-btn.pc-col-3 {
        justify-content: center;
        flex-direction: row
    }

    .shadowBox-btn.pc-col-3>* {
        width: calc(33.33% - 10.66px);
        margin: 0
    }
}

@media only screen and (max-width: 1239px) {
    .shadowBox-spbox {
        gap: 16px;
        padding: 23px 15px;
        border: 1px solid #e6e6e6;
        border-radius: 2px;
        background: #fff;
        box-shadow: 0px 2px 6px 0px rgba(5, 41, 66, .15)
    }

    .shadowBox-spbox+*:not(.shadowBox-spbox) {
        margin-top: 32px
    }

    .shadowBox-spbox:not(:last-child) {
        margin-bottom: 8px
    }

    .bg-grad .shadowBox-spbox,
    .shadowBox-spbox .sp-bg-grad {
        padding: 24px 16px;
        border: none
    }

    .shadowBox-section:not(:last-child) {
        margin-bottom: 32px
    }

    .shadowBox-spbox .shadowBox-section:not(:last-child) {
        margin-bottom: 16px
    }

    .shadowBox-spbox .shadowBox-section:not(:nth-child(1)) {
        padding-top: 16px;
        border-top: 1px solid #e6e6e6
    }

    .shadowBox-indent:not(:last-child) {
        margin-bottom: 32px
    }

    .shadowBox-spbox .shadowBox-indent {
        padding-right: max(0px, (100% - 520px)/2);
        padding-left: max(0px, (100% - 520px)/2)
    }

    .shadowBox-spbox .shadowBox-indent:not(:last-child) {
        margin-bottom: 16px
    }

    .shadowBox-spbox .shadowBox-indent:not(:nth-child(1)) {
        padding-top: 16px;
        border-top: 1px solid #e6e6e6
    }

    .shadowBox-input:not(:last-child) {
        margin-bottom: 32px
    }

    .shadowBox-spbox .shadowBox-input {
        padding-right: max(0px, (100% - 520px)/2);
        padding-left: max(0px, (100% - 520px)/2)
    }

    .shadowBox-spbox .shadowBox-input:not(:last-child) {
        margin-bottom: 16px
    }

    .shadowBox-spbox .shadowBox-input:not(:nth-child(1)) {
        padding-top: 16px;
        border-top: 1px solid #e6e6e6
    }

    .shadowBox-ttl {
        margin-bottom: 16px
    }

    .shadowBox-subttl {
        margin-bottom: 12px;
        font-size: 1rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .shadowBox-btn:not(:last-child) {
        margin-bottom: 32px
    }

    .shadowBox-spbox .shadowBox-btn:not(:last-child) {
        margin-bottom: 16px
    }
}

.movieBox {
    position: relative;
    aspect-ratio: 16/9
}

.movieBox-movie {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%
}

label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer
}

button,
button::before,
button::after {
    transition: var(--transition);
    cursor: pointer
}

input[type=date],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week] {
    display: block;
    position: relative;
    padding: 8px 12px;
    width: 100%;
    border-radius: 4px;
    border: 1px solid #727272;
    background: #fff;
    color: #363636;
    line-height: 160%;
    text-overflow: ellipsis
}

@media print,
screen and (min-width: 1240px) {

    input[type=date],
    input[type=datetime-local],
    input[type=email],
    input[type=month],
    input[type=number],
    input[type=password],
    input[type=search],
    input[type=tel],
    input[type=text],
    input[type=time],
    input[type=url],
    input[type=week] {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {

    input[type=date],
    input[type=datetime-local],
    input[type=email],
    input[type=month],
    input[type=number],
    input[type=password],
    input[type=search],
    input[type=tel],
    input[type=text],
    input[type=time],
    input[type=url],
    input[type=week] {
        font-size: 1.2rem
    }
}

input[type=date]::placeholder,
input[type=datetime-local]::placeholder,
input[type=email]::placeholder,
input[type=month]::placeholder,
input[type=number]::placeholder,
input[type=password]::placeholder,
input[type=search]::placeholder,
input[type=tel]::placeholder,
input[type=text]::placeholder,
input[type=time]::placeholder,
input[type=url]::placeholder,
input[type=week]::placeholder {
    color: #8b8b8b
}

input[type=date]:placeholder-shown,
input[type=datetime-local]:placeholder-shown,
input[type=email]:placeholder-shown,
input[type=month]:placeholder-shown,
input[type=number]:placeholder-shown,
input[type=password]:placeholder-shown,
input[type=search]:placeholder-shown,
input[type=tel]:placeholder-shown,
input[type=text]:placeholder-shown,
input[type=time]:placeholder-shown,
input[type=url]:placeholder-shown,
input[type=week]:placeholder-shown {
    border-color: #acacac
}

input[type=date][disabled],
input[type=datetime-local][disabled],
input[type=email][disabled],
input[type=month][disabled],
input[type=number][disabled],
input[type=password][disabled],
input[type=search][disabled],
input[type=tel][disabled],
input[type=text][disabled],
input[type=time][disabled],
input[type=url][disabled],
input[type=week][disabled] {
    background: #f0f0f0;
    color: #acacac
}

input[type=date].is-error,
input[type=datetime-local].is-error,
input[type=email].is-error,
input[type=month].is-error,
input[type=number].is-error,
input[type=password].is-error,
input[type=search].is-error,
input[type=tel].is-error,
input[type=text].is-error,
input[type=time].is-error,
input[type=url].is-error,
input[type=week].is-error {
    border-color: #de1818
}

@media print,
screen and (min-width: 1240px) {

    input[type=date].width-50,
    input[type=datetime-local].width-50,
    input[type=email].width-50,
    input[type=month].width-50,
    input[type=number].width-50,
    input[type=password].width-50,
    input[type=search].width-50,
    input[type=tel].width-50,
    input[type=text].width-50,
    input[type=time].width-50,
    input[type=url].width-50,
    input[type=week].width-50 {
        max-width: 50%
    }
}

.inputIcon {
    position: relative;
    border-radius: 4px;
    background: #fff
}

.inputIcon:has(input[disabled]) {
    background: #f0f0f0
}

.inputIcon:has(input[disabled]) input {
    background: none
}

.inputIcon input {
    position: relative;
    background: none;
    z-index: 1
}

.inputIcon[class*=icon-lt]::before,
.inputIcon[class*=icon-rt]::after {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    background: #0371ee;
    mask-position: center center;
    mask-size: contain;
    mask-repeat: no-repeat;
    transform: translateY(-50%);
    z-index: 0;
    content: ""
}

.inputIcon[class*=icon-lt]::before {
    left: 12px
}

.inputIcon[class*=icon-lt] input {
    padding-left: 40px
}

.inputIcon[class*=icon-rt]::after {
    right: 12px
}

.inputIcon[class*=icon-rt] input {
    padding-right: 40px
}

.inputIcon.icon-lt-arrow_down::before,
.inputIcon.icon-rt-arrow_down::after {
    mask-image: url(/jp/assets/icon/icon-arrow_down.svg)
}

.inputIcon.icon-lt-boat::before,
.inputIcon.icon-rt-boat::after {
    mask-image: url(/jp/assets/icon/icon-boat.svg)
}

.inputIcon.icon-lt-calendar::before,
.inputIcon.icon-rt-calendar::after {
    mask-image: url(/jp/assets/icon/icon-calendar.svg)
}

.inputIcon.icon-lt-place::before,
.inputIcon.icon-rt-place::after {
    mask-image: url(/jp/assets/icon/icon-place.svg)
}

.inputIcon.icon-lt-search::before,
.inputIcon.icon-rt-search::after {
    mask-image: url(/jp/assets/icon/icon-search.svg)
}

.inputIcon.icon-lt-time::before,
.inputIcon.icon-rt-time::after {
    mask-image: url(/jp/assets/icon/icon-time.svg)
}

.inputNum {
    position: relative;
    max-width: 140px
}

.inputNum input[type=number]::-webkit-outer-spin-button,
.inputNum input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none
}

.inputNum input[type=number] {
    -moz-appearance: textfield
}

.inputNum-unit {
    position: absolute;
    top: 50%;
    color: #8b8b8b;
    transform: translateY(-50%)
}

.inputNum-plus,
.inputNum-minus {
    position: absolute;
    color: #0371ee;
    text-align: center;
    font-size: 0
}

.inputNum-plus *,
.inputNum-minus * {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    background: #0371ee;
    transform: translate(-50%, -50%)
}

@media print,
screen and (min-width: 1240px) {
    .inputNum input {
        padding-right: calc(48px + 1em + 8px)
    }

    .inputNum-unit {
        right: 48px
    }

    .inputNum-plus,
    .inputNum-minus {
        right: 1px;
        width: 40px;
        border-left: 1px solid #acacac
    }

    .inputNum-plus {
        top: 1px;
        bottom: 50%
    }

    .inputNum-plus::after {
        position: absolute;
        right: 4px;
        bottom: -0.5px;
        left: 4px;
        height: 1px;
        background: #e6e6e6;
        content: ""
    }

    .inputNum-plus * {
        mask: url(/jp/assets/icon/icon-arrow_up.svg) center center/contain no-repeat
    }

    .inputNum-minus {
        top: 50%;
        bottom: 1px
    }

    .inputNum-minus * {
        mask: url(/jp/assets/icon/icon-arrow_down.svg) center center/contain no-repeat
    }
}

@media only screen and (max-width: 1239px) {
    .inputNum input {
        padding-left: 36px;
        padding-right: calc(32px + 1em + 8px)
    }

    .inputNum-unit {
        right: 32px
    }

    .inputNum-plus,
    .inputNum-minus {
        top: 1px;
        bottom: 1px;
        width: 24px
    }

    .inputNum-plus {
        right: 1px;
        border-left: 1px solid #acacac
    }

    .inputNum-plus * {
        mask: url(/jp/assets/icon/icon-add.svg) center center/contain no-repeat
    }

    .inputNum-minus {
        left: 1px;
        border-right: 1px solid #acacac
    }

    .inputNum-minus * {
        mask: url(/jp/assets/icon/icon-minus.svg) center center/contain no-repeat
    }
}

.inputTel {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 288px
}

.inputPass {
    position: relative;
    border-radius: 4px;
    background: #fff
}

.inputPass:has(input[disabled]) {
    background: #f0f0f0
}

.inputPass:has(input[disabled]) input {
    background: none
}

.inputPass input {
    position: relative;
    padding-right: 40px;
    background: none
}

.inputPass button {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%)
}

.inputPass button>* {
    display: block;
    width: 20px;
    height: 20px;
    background: #5a5a5a;
    mask: url(/jp/assets/icon/icon-password.svg) center center/contain no-repeat;
    font-size: 0;
    overflow: hidden
}

.inputPass button::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 22px;
    background: #5a5a5a;
    transform: translate(-50%, -50%) rotate(-45deg);
    opacity: 0;
    content: ""
}

.inputPass.js-inputPassShow.is-show button::after {
    opacity: 1
}

.confirmPass {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px
}

.confirmPass input {
    flex: 1;
    width: fit-content;
    min-width: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    outline: none
}

.confirmPass button {
    position: relative
}

.confirmPass button>* {
    display: block;
    width: 20px;
    height: 20px;
    background: #5a5a5a;
    mask: url(/jp/assets/icon/icon-password.svg) center center/contain no-repeat;
    font-size: 0;
    overflow: hidden
}

.confirmPass button::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 22px;
    background: #5a5a5a;
    transform: translate(-50%, -50%) rotate(-45deg);
    opacity: 0;
    content: ""
}

.confirmPass.js-inputPassShow.is-show button::after,
.confirmPass.js-textPassShow.is-show button::after {
    opacity: 1
}

@media print,
screen and (min-width: 1240px) {
    .confirmPass {
        width: fit-content
    }

    .confirmPass input {
        font-size: 1.6rem;
        line-height: 160%
    }
}

textarea {
    display: block;
    padding: 8px 12px;
    width: 100%;
    border-radius: 4px;
    border: 1px solid #727272;
    background: #fff;
    color: #363636;
    line-height: 160%;
    overflow: auto
}

@media print,
screen and (min-width: 1240px) {
    textarea {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    textarea {
        font-size: 1.2rem
    }
}

textarea::placeholder {
    color: #8b8b8b
}

textarea:placeholder-shown {
    border-color: #acacac
}

textarea[disabled] {
    background: #f0f0f0;
    color: #acacac
}

textarea.is-error {
    border-color: #de1818
}

select {
    display: inline-block;
    padding: 8px 40px 8px 12px;
    border-radius: 4px;
    border: 1px solid #acacac;
    background: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 8.115L18.885 6L12 12.87L5.115 6L3 8.115L12 17.115L21 8.115Z" fill="%235A5A5A"/></svg>') center right 12px/16px 16px no-repeat #fff;
    color: #363636;
    line-height: 160%;
    white-space: nowrap;
    text-overflow: ellipsis
}

@media print,
screen and (min-width: 1240px) {
    select {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    select {
        font-size: 1.2rem
    }
}

select:focus {
    outline: 2px solid #0371ee
}

select.is-error {
    border-color: #de1818 !important
}

select option {
    color: #363636
}

select option:first-child {
    color: #8b8b8b
}

@media print,
screen and (min-width: 1240px) {
    select.width-50 {
        width: 100%;
        max-width: 50%
    }
}

@media only screen and (max-width: 1239px) {
    select {
        width: 100%
    }
}

select.selectIcon {
    padding-left: 44px !important
}

select.selectIcon.icon-lt-people {
    background: url(/jp/assets/icon/icon-arrow_down.svg) center right 12px/20px 20px no-repeat, url(/jp/assets/icon/icon-people.svg) center left 12px/20px 20px no-repeat #fff
}

input[type=checkbox] {
    display: inline-block;
    width: 17px;
    height: 17px;
    border-radius: 4px;
    border: 1px solid #5a5a5a;
    background: #f7f7f7;
    vertical-align: middle
}

input[type=checkbox]:checked {
    border-color: #0371ee;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>') center center/100% auto no-repeat #0371ee
}

input[type=checkbox][disabled] {
    border-color: #acacac
}

input[type=checkbox][disabled]+* {
    color: #acacac
}

input[type=checkbox][disabled]:checked {
    border-color: #acacac;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>') center center/100% auto no-repeat #acacac
}

label input[type=checkbox]+img {
    width: 24px;
    height: 24px
}

input[type=checkbox].is-error {
    border-color: #de1818
}

label:has(input[type=checkbox]) {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    label:has(input[type=checkbox]) {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    label:has(input[type=checkbox]) {
        font-size: 1.2rem
    }
}

.inputCheck:has(label) {
    display: flex;
    flex-flow: column
}

.inputCheck:has(label) label {
    width: fit-content
}

.inputCheck:has(label).width-100 label {
    width: 100%
}

.inputCheck:has(label) input {
    flex-shrink: 0
}

.inputCheck:has(label) span {
    flex: 1
}

.inputCheck:has(label) b {
    display: inline-block;
    margin-left: auto
}

.inputCheck:has(label).col-inline {
    flex-flow: wrap;
    gap: 8px 16px
}

.inputCheck:has(label).is-error input[type=radio] {
    border-color: #de1818
}

@media print,
screen and (min-width: 1240px) {
    .inputCheck:has(label) {
        gap: 8px
    }

    .inputCheck:has(label) label:has(input[type=checkbox]) {
        font-size: 1.6rem;
        line-height: 160%
    }

    .inputCheck:has(label).pc-col-4 {
        flex-flow: wrap;
        gap: 8px
    }

    .inputCheck:has(label).pc-col-4 label {
        width: calc(25% - 6px)
    }
}

@media only screen and (max-width: 1239px) {
    .inputCheck:has(label) {
        gap: 12px
    }

    .inputCheck:has(label) label {
        align-items: start
    }

    .inputCheck:has(label) span {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        max-height: 3.2em
    }

    .inputCheck:has(label) b {
        margin-top: auto;
        font-size: 1.5rem;
        line-height: 160%;
        line-height: 130%
    }

    .inputCheck:has(label).sp-col-2 {
        flex-flow: wrap;
        gap: 8px
    }

    .inputCheck:has(label).sp-col-2 label {
        width: calc(50% - 4px)
    }
}

.inputCheck.bg-gray {
    justify-content: center;
    align-items: start;
    width: 100%;
    padding: 16px 24px;
    background: #f7f7f7;
    font-weight: bold;
}

.inputCheck.bg-gray input[type=checkbox] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.passengerCheck {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.passengerCheck b {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .passengerCheck b {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .passengerCheck b {
        font-size: 1.5rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .passengerCheck p {
        font-size: 1.4rem;
        line-height: 160%
    }
}

@media only screen and (max-width: 1239px) {
    .passengerCheck p {
        font-size: 1rem;
        line-height: 160%
    }
}

input[type=radio] {
    display: inline-block;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    border: 1px solid #5a5a5a;
    background: #f7f7f7;
    vertical-align: middle
}

input[type=radio]:checked {
    border-color: #0371ee;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fff"><path d="M12,0C5.37,0,0,5.37,0,12c0,6.63,5.37,12,12,12s12-5.37,12-12C24,5.37,18.63,0,12,0z M12,18c-3.31,0-6-2.69-6-6s2.69-6,6-6s6,2.69,6,6S15.31,18,12,18z"/></svg>') center center/100% auto no-repeat #0371ee
}

input[type=radio][disabled] {
    border-color: #acacac
}

input[type=radio][disabled]+* {
    color: #acacac
}

label input[type=radio]+img {
    width: 24px;
    height: 24px
}

input[type=radio].is-error {
    border-color: #de1818
}

label:has(input[type=radio]) {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    label:has(input[type=radio]) {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    label:has(input[type=radio]) {
        font-size: 1.2rem
    }
}

.inputRadio {
    display: flex;
    flex-flow: column
}

.inputRadio label {
    width: fit-content
}

.inputRadio.width-100 label {
    width: 100%
}

.inputRadio input {
    flex-shrink: 0
}

.inputRadio span {
    flex: 1
}

.inputRadio b {
    display: inline-block;
    margin-left: auto
}

.inputRadio.col-inline {
    flex-flow: wrap;
    gap: 8px 16px
}

.inputRadio.is-error input[type=radio] {
    border-color: #de1818
}

@media print,
screen and (min-width: 1240px) {
    .inputRadio {
        gap: 8px
    }

    .inputRadio label:has(input[type=radio]) {
        font-size: 1.6rem;
        line-height: 160%
    }

    .inputRadio.pc-col-inline {
        flex-flow: wrap;
        gap: 8px 16px
    }
}

@media only screen and (max-width: 1239px) {
    .inputRadio {
        gap: 12px
    }

    .inputRadio label {
        align-items: start
    }

    .inputRadio span {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        max-height: 3.2em
    }

    .inputRadio b {
        margin-top: auto;
        font-size: 1.5rem;
        line-height: 160%;
        line-height: 130%
    }
}

.inputCoupon {
    display: flex;
    flex-flow: column
}

.inputCoupon label {
    align-items: normal;
    width: 100%
}

.inputCoupon input {
    flex-shrink: 0
}

.inputCoupon-name {
    max-height: 3.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.inputCoupon-limit {
    display: flex;
    align-items: center;
    white-space: nowrap;
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .inputCoupon-limit {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {
    .inputCoupon-limit {
        font-size: 1rem
    }
}

.inputCoupon-point {
    display: flex;
    justify-content: end;
    align-items: center;
    width: 4.5em;
    line-height: 160%;
    white-space: nowrap
}

@media print,
screen and (min-width: 1240px) {
    .inputCoupon-point {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .inputCoupon-point {
        font-size: 1.5rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .inputCoupon {
        gap: 12px
    }

    .inputCoupon input {
        margin: 3px 0
    }

    .inputCoupon .tipCou {
        margin: 2px 0
    }

    .inputCoupon-name {
        flex: 1;
        font-size: 1.6rem;
        line-height: 160%
    }
}

@media only screen and (max-width: 1239px) {
    .inputCoupon {
        gap: 12px
    }

    .inputCoupon label {
        flex-wrap: wrap;
        gap: 0 8px
    }

    .inputCoupon .tipCou {
        margin-top: 1px
    }

    .inputCoupon-name {
        width: calc(100% - 40px - 8px - 19px - 8px);
        font-size: 1.2rem;
        line-height: 160%
    }

    .inputCoupon-limit {
        margin-left: 27px
    }

    .inputCoupon-point {
        margin-left: auto
    }
}

.input {
    display: flex
}

.errorTxt {
    margin-top: 4px;
    color: #de1818;
    font-size: 1.2rem;
    line-height: 160%
}

.inputError {
    display: flex;
    color: #de1818;
    gap: 4px
}

.inputError::before {
    display: block;
    background: url(/jp/assets/icon/icon-caution.svg) center center/contain no-repeat;
    content: ""
}

.inputError>* {
    flex: 1
}

@media print,
screen and (min-width: 1240px) {
    .inputError {
        margin-bottom: 24px;
        font-size: 1.8rem;
        line-height: 160%
    }

    .inputError::before {
        width: 32px;
        height: 32px
    }
}

@media only screen and (max-width: 1239px) {
    .inputError {
        margin-bottom: 16px;
        font-size: 1rem;
        line-height: 160%
    }

    .inputError::before {
        width: 16px;
        height: 16px;
        content: ""
    }
}

.totalPrice {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #e1ecf7
}

.totalPrice-num {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .totalPrice-num {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .totalPrice-num {
        font-size: 1.2rem
    }
}

.totalPrice-num b {
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em
}

@media print,
screen and (min-width: 1240px) {
    .totalPrice-num b {
        font-size: 2rem
    }
}

@media only screen and (max-width: 1239px) {
    .totalPrice-num b {
        font-size: 1.8rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .totalPrice {
        padding: 8px 12px
    }
}

@media only screen and (max-width: 1239px) {
    .totalPrice {
        padding: 8px
    }
}

.agreeCheck {
    display: flex;
    flex-direction: column;
    gap: 16px;
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .agreeCheck {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .agreeCheck {
        font-size: 1.2rem
    }
}

.agreeCheck-link {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 16px;
    border-radius: 4px;
    border: 1px solid #e6e6e6;
    color: #000;
    cursor: pointer
}

.agreeCheck-link::after {
    width: 16px;
    height: 16px;
    background: #5a5a5a;
    mask: url(/jp/assets/icon/icon-modal.svg) center center/contain no-repeat;
    content: ""
}

.agreeCheck-link * {
    flex: 1
}

.agreeCheck-checkbox {
    text-align: center
}

.inputSet {
    display: flex;
    flex-direction: column;
    gap: 16px;
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .inputSet {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .inputSet {
        font-size: 1.5rem
    }
}

.inputSet+.inputSet {
    margin-top: 16px
}

.inputSet-item {
    width: 100%
}

.inputSet-item.marina {
    padding: 12px 8px;
    background: #f7f7f7
}

.inputSet-item.line-top {
    padding-top: 16px;
    border-top: 1px dashed #e6e6e6
}

.inputSet-item.line-bottom {
    padding-bottom: 16px;
    border-bottom: 1px dashed #e6e6e6
}

.inputSet-label {
    display: flex;
    align-items: center;
    width: fit-content;
    padding: 2px 0;
    font-weight: 700
}

.inputSet-label-required {
    display: inline-block;
    color: #de1818;
    line-height: 130%;
    letter-spacing: .02em
}

@media print,
screen and (min-width: 1240px) {
    .inputSet-label-required {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {
    .inputSet-label-required {
        font-size: 1rem
    }
}

.inputSet-input {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .inputSet-input {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .inputSet-input {
        font-size: 1.5rem
    }
}

.inputSet-input.bg-gray {
    padding: 16px 12px;
    background: #f7f7f7
}

.inputSet-add {
    margin-top: 8px
}

.inputSet-group {
    display: flex;
    flex-wrap: wrap
}

.inputSet-group label {
    display: block
}

.inputSet-group-label {
    display: block;
    margin-bottom: 4px;
    padding: 2px 0;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: .02em
}

@media print,
screen and (min-width: 1240px) {
    .inputSet-group-label {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {
    .inputSet-group-label {
        font-size: 1rem
    }
}

.inputSet-group input[type=date],
.inputSet-group input[type=datetime-local],
.inputSet-group input[type=email],
.inputSet-group input[type=month],
.inputSet-group input[type=number],
.inputSet-group input[type=password],
.inputSet-group input[type=search],
.inputSet-group input[type=tel],
.inputSet-group input[type=text],
.inputSet-group input[type=time],
.inputSet-group input[type=url],
.inputSet-group input[type=week],
.inputSet-group select {
    width: 100%
}

.inputSet-date {
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

.inputSet-date+.inputSet-date {
    margin-top: 8px
}

.inputSet-date-sp {
    background: #e1ecf7;
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .inputSet-date-sp {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .inputSet-date-sp {
        font-size: 1.2rem
    }
}

.inputSet-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .inputSet-price {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .inputSet-price {
        font-size: 1.2rem
    }
}

.inputSet-price-num {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .inputSet-price-num {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .inputSet-price-num {
        font-size: 1.2rem
    }
}

.inputSet-price-num b {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .inputSet-price-num b {
        font-size: 1.8rem
    }
}

@media only screen and (max-width: 1239px) {
    .inputSet-price-num b {
        font-size: 1.7rem
    }
}

.inputSet-point {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.inputSet-coupon {
    padding: 16px 12px;
    background: #f7f7f7
}

.inputSet-confirm {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .inputSet-confirm {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .inputSet-confirm {
        font-size: 1.5rem
    }
}

.inputSet-confirm-suppl {
    margin-top: 4px;
    padding: 4px 8px;
    background: #f7f7f7
}

.inputSet-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 16px
}

.inputSet-discount {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px 16px
}

.inputSet-discount>*:first-child {
    flex: 1
}

.inputSet-txt {
    margin-bottom: 4px;
    font-size: 1.2rem;
    line-height: 160%
}

.inputSet-error {
    margin-top: 4px;
    color: #de1818;
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .inputSet-error {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {
    .inputSet-error {
        font-size: 1rem
    }
}

.inputSet-error-important {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #fff6f6;
    font-weight: 700
}

.inputSet-error-important::before {
    width: 20px;
    height: 20px;
    background: #de1818;
    mask: url(/jp/assets/icon/icon-info.svg) center center/contain no-repeat;
    content: ""
}

.inputSet-error-important>* {
    flex: 1
}

@media print,
screen and (min-width: 1240px) {
    .inputSet-item {
        gap: 8px
    }

    .inputSet-item.marina {
        margin-left: 16px;
        width: auto
    }

    .inputSet-label {
        margin-bottom: 8px;
        font-size: 1.4rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .inputSet-label-sub {
        color: #4a4a4a
    }

    .inputSet-group {
        gap: 8px 16px
    }

    .inputSet-group .pc-width-50 {
        width: calc(50% - 8px)
    }

    .inputSet-group .pc-width-33 {
        width: calc(33% - 10.66px)
    }

    .inputSet-group .pc-width-25 {
        width: calc(25% - 12px)
    }

    .inputSet-date {
        gap: 8px 16px
    }

    .inputSet-date .pc-width-50 {
        width: calc(50% - 8px)
    }

    .inputSet-date .pc-width-33 {
        width: calc(33% - 10.66px)
    }

    .inputSet-date .pc-width-25 {
        width: calc(25% - 12px)
    }

    .inputSet-date-sp {
        padding: 8px 16px
    }

    .inputSet-price-txt {
        font-size: 1.6rem;
        line-height: 160%
    }

    .inputSet-point {
        font-size: 1.4rem;
        line-height: 160%
    }

    .inputSet-point-num {
        font-size: 1.8rem;
        line-height: 160%
    }

    .inputSet-confirm {
        padding-left: 16px
    }

    .inputSet-confirm-suppl {
        font-size: 1.2rem;
        line-height: 160%
    }

    .inputSet-discount {
        gap: 4px 16px
    }
}

@media only screen and (max-width: 1239px) {
    .inputSet-item {
        gap: 4px
    }

    .inputSet-label {
        margin-bottom: 4px;
        font-size: 1rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .inputSet-label-sub {
        font-weight: 400
    }

    .inputSet-group {
        gap: 8px
    }

    .inputSet-group .sp-width-100 {
        width: 100%
    }

    .inputSet-group .sp-width-50 {
        width: calc(50% - 4px)
    }

    .inputSet-group .sp-width-max50 {
        max-width: calc(50% - 4px)
    }

    .inputSet-date {
        gap: 4px 8px
    }

    .inputSet-date .sp-width-100 {
        width: 100%
    }

    .inputSet-date .sp-width-50 {
        width: calc(50% - 4px)
    }

    .inputSet-date .sp-width-max50 {
        max-width: calc(50% - 4px)
    }

    .inputSet-date-sp {
        padding: 4px 16px
    }

    .inputSet-point {
        font-size: 1rem;
        line-height: 160%
    }

    .inputSet-point-num {
        font-size: 1.5rem;
        line-height: 160%
    }

    .inputSet-confirm-suppl {
        font-size: 1rem;
        line-height: 160%
    }

    .inputSet-discount {
        gap: 4px 8px
    }
}

.confirmSet {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background: #f7f7f7;
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .confirmSet {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .confirmSet {
        font-size: 1.5rem
    }
}

.confirmSet+.confirmSet {
    margin-top: 16px
}

.confirmSet-item {
    width: 100%
}

.confirmSet-item.line-top {
    padding-top: 16px;
    border-top: 1px dashed #e6e6e6
}

.confirmSet-item.line-bottom {
    padding-bottom: 16px;
    border-bottom: 1px dashed #e6e6e6
}

.confirmSet-label {
    display: flex;
    align-items: center;
    width: fit-content;
    padding: 2px 0;
    font-weight: 700
}

.confirmSet-label-required {
    display: inline-block;
    color: #de1818;
    line-height: 130%;
    letter-spacing: .02em
}

@media print,
screen and (min-width: 1240px) {
    .confirmSet-label-required {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {
    .confirmSet-label-required {
        font-size: 1rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .confirmSet-item {
        gap: 8px
    }

    .confirmSet-item.marina {
        margin-left: 16px;
        width: auto
    }

    .confirmSet-label {
        margin-bottom: 8px;
        font-size: 1.4rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .confirmSet-label-sub {
        color: #4a4a4a
    }

    .confirmSet-content {
        padding-left: 16px
    }
}

@media only screen and (max-width: 1239px) {
    .confirmSet-item {
        gap: 4px
    }

    .confirmSet-label {
        margin-bottom: 4px;
        font-size: 1rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .confirmSet-label-sub {
        font-weight: 400
    }
}

.inputStar {
    display: flex;
    flex-direction: row-reverse;
    gap: 0;
    position: relative;
    width: min(100%, 440px);
    padding-top: 1.6em;
    text-align: center
}

.inputStar input {
    display: none
}

.inputStar label {
    flex-direction: column;
    flex-shrink: 0;
    gap: 4px;
    width: 9.0909%
}

.inputStar label::before {
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.9993%2023.028L24.2394%2028.0013L22.0527%2018.628L29.3327%2012.3213L19.746%2011.508L15.9993%202.66797L12.2527%2011.508L2.66602%2012.3213L9.94602%2018.628L7.75935%2028.0013L15.9993%2023.028Z%22%20fill%3D%22%23e0e0e0%22%2F%3E%3C%2Fsvg%3E") center center/contain no-repeat;
    content: ""
}

.inputStar label span {
    color: #8b8b8b
}

.inputStar label b {
    position: absolute;
    line-height: 160%;
    font-weight: 400
}

@media print,
screen and (min-width: 1240px) {
    .inputStar label b {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {
    .inputStar label b {
        font-size: 1rem
    }
}

.inputStar label:first-child b {
    top: 0;
    right: 0
}

.inputStar label:last-child b {
    top: 0;
    left: 0
}

.inputStar label:hover::before,
.inputStar label:hover~label::before,
.inputStar label:has(input:checked)::before,
.inputStar label:has(input:checked)~label::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.9993%2023.028L24.2394%2028.0013L22.0527%2018.628L29.3327%2012.3213L19.746%2011.508L15.9993%202.66797L12.2527%2011.508L2.66602%2012.3213L9.94602%2018.628L7.75935%2028.0013L15.9993%2023.028Z%22%20fill%3D%22%23EA7000%22%2F%3E%3C%2Fsvg%3E")
}

.inputStar label:hover span,
.inputStar label:hover~label span,
.inputStar label:has(input:checked) span,
.inputStar label:has(input:checked)~label span {
    color: #363636
}

.inputStar.is-confirm label {
    pointer-events: none
}

@media print,
screen and (min-width: 1240px) {
    .inputStar label {
        padding: 0 4px
    }
}

@media only screen and (max-width: 1239px) {
    .inputStar label {
        padding: 0 2px
    }
}

.inputTable {
    width: 100%;
    margin-top: 16px
}

.inputTable th {
    background: #eef4fa;
    vertical-align: middle
}

.inputTable th span,
.inputTable th b {
    display: inline-block
}

.inputTable td {
    vertical-align: middle
}

@media print,
screen and (min-width: 1240px) {

    .inputTable,
    .inputTable tr,
    .inputTable th,
    .inputTable td {
        border: 1px solid #e6e6e6
    }

    .inputTable th,
    .inputTable td {
        padding: 16px 24px
    }
}

@media only screen and (max-width: 1239px) {
    .inputTable {
        border-top: 1px solid #e6e6e6;
        border-left: 1px solid #e6e6e6
    }

    .inputTable,
    .inputTable thead,
    .inputTable tbody,
    .inputTable tr,
    .inputTable th,
    .inputTable td {
        display: block;
        width: 100%
    }

    .inputTable th,
    .inputTable td {
        border-right: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6
    }

    .inputTable th {
        padding: 8px 12px
    }

    .inputTable td {
        padding: 16px 12px 24px
    }
}

.primaryTtl {
    color: #363636;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em
}

@media print,
screen and (min-width: 1240px) {
    .primaryTtl {
        font-size: 3rem
    }
}

@media only screen and (max-width: 1239px) {
    .primaryTtl {
        font-size: 1.8rem
    }
}

.primaryTtl.clr-wh {
    color: #fff
}

@media print,
screen and (min-width: 1240px) {
    .primaryTtl.pc-clr-wh {
        color: #fff
    }
}

@media only screen and (max-width: 1239px) {
    .primaryTtl.sp-clr-wh {
        color: #fff
    }
}

.secondaryTtl {
    color: #363636;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em
}

@media print,
screen and (min-width: 1240px) {
    .secondaryTtl {
        font-size: 2.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .secondaryTtl {
        font-size: 1.6rem
    }
}

.secondaryTtl.clr-wh {
    color: #fff
}

@media print,
screen and (min-width: 1240px) {
    .secondaryTtl.pc-clr-wh {
        color: #fff
    }
}

@media only screen and (max-width: 1239px) {
    .secondaryTtl {
        text-align: center
    }

    .secondaryTtl.sp-clr-wh {
        color: #fff
    }
}

.tertiaryTtl {
    color: #363636;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em
}

@media print,
screen and (min-width: 1240px) {
    .tertiaryTtl {
        font-size: 2rem
    }
}

@media only screen and (max-width: 1239px) {
    .tertiaryTtl {
        font-size: 1.4rem
    }
}

.tertiaryTtl.clr-wh {
    color: #fff
}

@media print,
screen and (min-width: 1240px) {
    .tertiaryTtl.pc-clr-wh {
        color: #fff
    }
}

@media only screen and (max-width: 1239px) {
    .tertiaryTtl.sp-clr-wh {
        color: #fff
    }
}

.noteTxt {
    padding-left: 1em;
    color: #4a4a4a;
    line-height: 160%;
    text-indent: -1em
}

@media print,
screen and (min-width: 1240px) {
    .noteTxt {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .noteTxt {
        font-size: 1.2rem
    }
}

.noteList {
    color: #4a4a4a;
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .noteList {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .noteList {
        font-size: 1.2rem
    }
}

.noteList>* {
    padding-left: 1em;
    text-indent: -1em
}

.noteList.em-2>* {
    padding-left: 2em;
    text-indent: -2em
}

.resultNum {
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em
}

@media print,
screen and (min-width: 1240px) {
    .resultNum {
        font-size: 1.8rem
    }
}

@media only screen and (max-width: 1239px) {
    .resultNum {
        font-size: 1.6rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .resultNum {
        font-weight: 700
    }
}

@media only screen and (max-width: 1239px) {
    .resultNum {
        width: 100%;
        font-weight: 400
    }
}

.resultHmNum {
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em;
    font-weight: 700
}

@media print,
screen and (min-width: 1240px) {
    .resultHmNum {
        font-size: 3rem
    }
}

@media only screen and (max-width: 1239px) {
    .resultHmNum {
        font-size: 1.8rem
    }
}

.resultLetterNum {
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em
}

@media print,
screen and (min-width: 1240px) {
    .resultLetterNum {
        font-size: 1.8rem
    }
}

@media only screen and (max-width: 1239px) {
    .resultLetterNum {
        font-size: 1.6rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .resultLetterNum {
        font-weight: 700
    }
}

@media only screen and (max-width: 1239px) {
    .resultLetterNum {
        font-weight: 400
    }
}

[data-tip] {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0);
    background: #fff;
    line-height: 130%;
    letter-spacing: .02em;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0
}

@media print,
screen and (min-width: 1240px) {
    [data-tip] {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {
    [data-tip] {
        font-size: 1rem
    }
}

[data-tip=重要] {
    border-color: #ea7000;
    color: #ea7000
}

[data-tip=大切] {
    border-color: #0371ee;
    color: #0065ab
}

[data-tip=緊急] {
    border-color: #de1818;
    color: #de1818
}

[data-tip=限定] {
    width: fit-content !important;
    background: #e4005a;
    color: #fff;
    line-height: 160%;
    font-weight: 400;
    line-height: 130%
}

@media print,
screen and (min-width: 1240px) {
    [data-tip=限定] {
        font-size: 1rem
    }
}

@media only screen and (max-width: 1239px) {
    [data-tip=限定] {
        font-size: .8rem
    }
}

[data-tip=予定] {
    width: fit-content !important;
    border-color: #ea7000;
    background: none;
    color: #ea7000;
    font-weight: 400
}

@media print,
screen and (min-width: 1240px) {
    [data-tip] {
        width: 48px;
        height: 24px;
        border-radius: 24px
    }

    [data-tip=限定] {
        height: 22px;
        padding: 0 12px
    }

    [data-tip=予定] {
        height: 30px;
        padding: 0 12px;
        line-height: 130%;
        letter-spacing: .02em
    }
}

@media print,
screen and (min-width: 1240px)and (min-width: 1240px) {
    [data-tip=予定] {
        font-size: 1.4rem
    }
}

@media only screen and (min-width: 1240px)and (max-width: 1239px) {
    [data-tip=予定] {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {
    [data-tip] {
        width: 44px;
        height: 20px;
        border-radius: 20px
    }

    [data-tip=限定] {
        height: 18px;
        padding: 1px 8px 0
    }

    [data-tip=予定] {
        height: 18px;
        padding: 1px 8px 0;
        line-height: 160%;
        line-height: 130%
    }
}

@media only screen and (max-width: 1239px)and (min-width: 1240px) {
    [data-tip=予定] {
        font-size: 1rem
    }
}

@media only screen and (max-width: 1239px)and (max-width: 1239px) {
    [data-tip=予定] {
        font-size: .8rem
    }
}

.searchBtn,
.fillBtn,
.lineBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid rgba(0, 0, 0, 0);
    text-align: center;
    cursor: pointer;
    transition: var(--transition)
}

.searchBtn.size-l,
.searchBtn.size-m,
.fillBtn.size-l,
.fillBtn.size-m,
.lineBtn.size-l,
.lineBtn.size-m {
    border-radius: 8px
}

.searchBtn.size-s,
.searchBtn.size-xs,
.fillBtn.size-s,
.fillBtn.size-xs,
.lineBtn.size-s,
.lineBtn.size-xs {
    border-radius: 4px
}

.searchBtn.size-s[class*=icon-]::before,
.searchBtn.size-s[class*=icon-]::after,
.searchBtn.size-xs[class*=icon-]::before,
.searchBtn.size-xs[class*=icon-]::after,
.fillBtn.size-s[class*=icon-]::before,
.fillBtn.size-s[class*=icon-]::after,
.fillBtn.size-xs[class*=icon-]::before,
.fillBtn.size-xs[class*=icon-]::after,
.lineBtn.size-s[class*=icon-]::before,
.lineBtn.size-s[class*=icon-]::after,
.lineBtn.size-xs[class*=icon-]::before,
.lineBtn.size-xs[class*=icon-]::after {
    width: 12px;
    height: 12px
}

.searchBtn.size-l,
.fillBtn.size-l,
.lineBtn.size-l {
    gap: 32px;
    padding: 16px;
    font-weight: 700;
    line-height: 130%
}

@media print,
screen and (min-width: 1240px) {

    .searchBtn.size-l,
    .fillBtn.size-l,
    .lineBtn.size-l {
        font-size: 1.8rem
    }
}

@media only screen and (max-width: 1239px) {

    .searchBtn.size-l,
    .fillBtn.size-l,
    .lineBtn.size-l {
        font-size: 1.6rem
    }
}

.searchBtn.size-l[class*=icon-]::before,
.searchBtn.size-l[class*=icon-]::after,
.fillBtn.size-l[class*=icon-]::before,
.fillBtn.size-l[class*=icon-]::after,
.lineBtn.size-l[class*=icon-]::before,
.lineBtn.size-l[class*=icon-]::after {
    width: 20px;
    height: 20px
}

.searchBtn.size-m,
.fillBtn.size-m,
.lineBtn.size-m {
    gap: 12px;
    padding: 12px 16px;
    font-weight: 700;
    line-height: 130%
}

@media print,
screen and (min-width: 1240px) {

    .searchBtn.size-m,
    .fillBtn.size-m,
    .lineBtn.size-m {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {

    .searchBtn.size-m,
    .fillBtn.size-m,
    .lineBtn.size-m {
        font-size: 1.4rem
    }
}

.searchBtn.size-m[class*=icon-]::before,
.searchBtn.size-m[class*=icon-]::after,
.fillBtn.size-m[class*=icon-]::before,
.fillBtn.size-m[class*=icon-]::after,
.lineBtn.size-m[class*=icon-]::before,
.lineBtn.size-m[class*=icon-]::after {
    width: 16px;
    height: 16px
}

.searchBtn.size-s,
.fillBtn.size-s,
.lineBtn.size-s {
    gap: 8px;
    padding: 8px;
    font-weight: 700;
    line-height: 130%
}

@media print,
screen and (min-width: 1240px) {

    .searchBtn.size-s,
    .fillBtn.size-s,
    .lineBtn.size-s {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {

    .searchBtn.size-s,
    .fillBtn.size-s,
    .lineBtn.size-s {
        font-size: 1.1rem
    }
}

.searchBtn.size-xs,
.fillBtn.size-xs,
.lineBtn.size-xs {
    gap: 8px;
    padding: 4px 8px;
    font-weight: 700;
    line-height: 130%
}

@media print,
screen and (min-width: 1240px) {

    .searchBtn.size-xs,
    .fillBtn.size-xs,
    .lineBtn.size-xs {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {

    .searchBtn.size-xs,
    .fillBtn.size-xs,
    .lineBtn.size-xs {
        font-size: 1.1rem
    }
}

@media print,
screen and (min-width: 1240px) {

    .searchBtn,
    .fillBtn,
    .lineBtn {
        width: 364px;
        max-width: 100%
    }

    .searchBtn.pc-size-l,
    .searchBtn.pc-size-m,
    .fillBtn.pc-size-l,
    .fillBtn.pc-size-m,
    .lineBtn.pc-size-l,
    .lineBtn.pc-size-m {
        border-radius: 8px
    }

    .searchBtn.pc-size-s,
    .searchBtn.pc-size-xs,
    .fillBtn.pc-size-s,
    .fillBtn.pc-size-xs,
    .lineBtn.pc-size-s,
    .lineBtn.pc-size-xs {
        border-radius: 4px
    }

    .searchBtn.pc-size-s[class*=icon-]::before,
    .searchBtn.pc-size-s[class*=icon-]::after,
    .searchBtn.pc-size-xs[class*=icon-]::before,
    .searchBtn.pc-size-xs[class*=icon-]::after,
    .fillBtn.pc-size-s[class*=icon-]::before,
    .fillBtn.pc-size-s[class*=icon-]::after,
    .fillBtn.pc-size-xs[class*=icon-]::before,
    .fillBtn.pc-size-xs[class*=icon-]::after,
    .lineBtn.pc-size-s[class*=icon-]::before,
    .lineBtn.pc-size-s[class*=icon-]::after,
    .lineBtn.pc-size-xs[class*=icon-]::before,
    .lineBtn.pc-size-xs[class*=icon-]::after {
        width: 12px;
        height: 12px
    }

    .searchBtn.pc-size-l,
    .fillBtn.pc-size-l,
    .lineBtn.pc-size-l {
        gap: 32px;
        padding: 16px;
        font-size: 1.8rem;
        font-weight: 700;
        line-height: 130%
    }

    .searchBtn.pc-size-l[class*=icon-]::before,
    .searchBtn.pc-size-l[class*=icon-]::after,
    .fillBtn.pc-size-l[class*=icon-]::before,
    .fillBtn.pc-size-l[class*=icon-]::after,
    .lineBtn.pc-size-l[class*=icon-]::before,
    .lineBtn.pc-size-l[class*=icon-]::after {
        width: 20px;
        height: 20px
    }

    .searchBtn.pc-size-m,
    .fillBtn.pc-size-m,
    .lineBtn.pc-size-m {
        gap: 12px;
        padding: 12px 16px;
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 130%
    }

    .searchBtn.pc-size-m[class*=icon-]::before,
    .searchBtn.pc-size-m[class*=icon-]::after,
    .fillBtn.pc-size-m[class*=icon-]::before,
    .fillBtn.pc-size-m[class*=icon-]::after,
    .lineBtn.pc-size-m[class*=icon-]::before,
    .lineBtn.pc-size-m[class*=icon-]::after {
        width: 16px;
        height: 16px
    }

    .searchBtn.pc-size-s,
    .fillBtn.pc-size-s,
    .lineBtn.pc-size-s {
        gap: 8px;
        padding: 8px;
        font-size: 1.2rem;
        font-weight: 700;
        line-height: 130%
    }

    .searchBtn.pc-size-xs,
    .fillBtn.pc-size-xs,
    .lineBtn.pc-size-xs {
        gap: 8px;
        padding: 4px 8px;
        font-size: 1.2rem;
        font-weight: 700;
        line-height: 130%
    }
}

@media only screen and (max-width: 1239px) {

    .searchBtn,
    .fillBtn,
    .lineBtn {
        width: 100%
    }

    .searchBtn.sp-size-l,
    .searchBtn.sp-size-m,
    .fillBtn.sp-size-l,
    .fillBtn.sp-size-m,
    .lineBtn.sp-size-l,
    .lineBtn.sp-size-m {
        border-radius: 8px
    }

    .searchBtn.sp-size-s,
    .searchBtn.sp-size-xs,
    .fillBtn.sp-size-s,
    .fillBtn.sp-size-xs,
    .lineBtn.sp-size-s,
    .lineBtn.sp-size-xs {
        border-radius: 4px
    }

    .searchBtn.sp-size-s[class*=icon-]::before,
    .searchBtn.sp-size-s[class*=icon-]::after,
    .searchBtn.sp-size-xs[class*=icon-]::before,
    .searchBtn.sp-size-xs[class*=icon-]::after,
    .fillBtn.sp-size-s[class*=icon-]::before,
    .fillBtn.sp-size-s[class*=icon-]::after,
    .fillBtn.sp-size-xs[class*=icon-]::before,
    .fillBtn.sp-size-xs[class*=icon-]::after,
    .lineBtn.sp-size-s[class*=icon-]::before,
    .lineBtn.sp-size-s[class*=icon-]::after,
    .lineBtn.sp-size-xs[class*=icon-]::before,
    .lineBtn.sp-size-xs[class*=icon-]::after {
        width: 12px;
        height: 12px
    }

    .searchBtn.sp-size-l,
    .fillBtn.sp-size-l,
    .lineBtn.sp-size-l {
        gap: 32px;
        padding: 16px;
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 130%
    }

    .searchBtn.sp-size-l[class*=icon-]::before,
    .searchBtn.sp-size-l[class*=icon-]::after,
    .fillBtn.sp-size-l[class*=icon-]::before,
    .fillBtn.sp-size-l[class*=icon-]::after,
    .lineBtn.sp-size-l[class*=icon-]::before,
    .lineBtn.sp-size-l[class*=icon-]::after {
        width: 20px;
        height: 20px
    }

    .searchBtn.sp-size-m,
    .fillBtn.sp-size-m,
    .lineBtn.sp-size-m {
        gap: 16px;
        padding: 12px 16px;
        font-size: 1.4rem;
        font-weight: 700;
        line-height: 130%
    }

    .searchBtn.sp-size-m[class*=icon-]::before,
    .searchBtn.sp-size-m[class*=icon-]::after,
    .fillBtn.sp-size-m[class*=icon-]::before,
    .fillBtn.sp-size-m[class*=icon-]::after,
    .lineBtn.sp-size-m[class*=icon-]::before,
    .lineBtn.sp-size-m[class*=icon-]::after {
        width: 16px;
        height: 16px
    }

    .searchBtn.sp-size-s,
    .fillBtn.sp-size-s,
    .lineBtn.sp-size-s {
        gap: 8px;
        padding: 8px;
        font-size: 1.1rem;
        font-weight: 700;
        line-height: 130%
    }

    .searchBtn.sp-size-xs,
    .fillBtn.sp-size-xs,
    .lineBtn.sp-size-xs {
        gap: 8px;
        padding: 4px 8px;
        font-size: 1.1rem;
        font-weight: 700;
        line-height: 130%
    }
}

.searchBtn.width-all,
.fillBtn.width-all,
.lineBtn.width-all {
    width: 100%
}

.searchBtn.width-fit,
.fillBtn.width-fit,
.lineBtn.width-fit {
    width: fit-content
}

@media print,
screen and (min-width: 1240px) {

    .searchBtn.pc-width-all,
    .fillBtn.pc-width-all,
    .lineBtn.pc-width-all {
        width: 100%
    }

    .searchBtn.pc-width-fit,
    .fillBtn.pc-width-fit,
    .lineBtn.pc-width-fit {
        width: fit-content
    }
}

@media only screen and (max-width: 1239px) {

    .searchBtn.sp-width-all,
    .fillBtn.sp-width-all,
    .lineBtn.sp-width-all {
        width: 100%
    }

    .searchBtn.sp-width-fit,
    .fillBtn.sp-width-fit,
    .lineBtn.sp-width-fit {
        width: fit-content
    }
}

.searchBtn[class*=icon-]::before,
.searchBtn[class*=icon-]::after,
.fillBtn[class*=icon-]::before,
.fillBtn[class*=icon-]::after,
.lineBtn[class*=icon-]::before,
.lineBtn[class*=icon-]::after {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    content: ""
}

.searchBtn.icon-lt-add::before,
.fillBtn.icon-lt-add::before,
.lineBtn.icon-lt-add::before {
    mask: url(/jp/assets/icon/icon-add.svg) center center/contain no-repeat
}

.searchBtn.icon-rt-add::after,
.fillBtn.icon-rt-add::after,
.lineBtn.icon-rt-add::after {
    mask: url(/jp/assets/icon/icon-add.svg) center center/contain no-repeat
}

.searchBtn.icon-lt-arrow::before,
.fillBtn.icon-lt-arrow::before,
.lineBtn.icon-lt-arrow::before {
    mask: url(/jp/assets/icon/icon-arrow_left.svg) center center/contain no-repeat
}

.searchBtn.icon-rt-arrow::after,
.fillBtn.icon-rt-arrow::after,
.lineBtn.icon-rt-arrow::after {
    mask: url(/jp/assets/icon/icon-arrow_right.svg) center center/contain no-repeat
}

.searchBtn.icon-lt-blank::before,
.fillBtn.icon-lt-blank::before,
.lineBtn.icon-lt-blank::before {
    mask: url(/jp/assets/icon/icon-link.svg) center center/contain no-repeat
}

.searchBtn.icon-rt-blank::after,
.fillBtn.icon-rt-blank::after,
.lineBtn.icon-rt-blank::after {
    mask: url(/jp/assets/icon/icon-link.svg) center center/contain no-repeat
}

.searchBtn.icon-lt-down::before,
.fillBtn.icon-lt-down::before,
.lineBtn.icon-lt-down::before {
    mask: url(/jp/assets/icon/icon-arrow_down.svg) center center/contain no-repeat
}

.searchBtn.icon-rt-down::after,
.fillBtn.icon-rt-down::after,
.lineBtn.icon-rt-down::after {
    mask: url(/jp/assets/icon/icon-arrow_down.svg) center center/contain no-repeat
}

.searchBtn.icon-lt-pdf::before,
.fillBtn.icon-lt-pdf::before,
.lineBtn.icon-lt-pdf::before {
    mask: url(/jp/assets/icon/icon-pdf.svg) center center/contain no-repeat
}

.searchBtn.icon-rt-pdf::after,
.fillBtn.icon-rt-pdf::after,
.lineBtn.icon-rt-pdf::after {
    mask: url(/jp/assets/icon/icon-pdf.svg) center center/contain no-repeat
}

.searchBtn.icon-lt-star::before,
.fillBtn.icon-lt-star::before,
.lineBtn.icon-lt-star::before {
    mask: url(/jp/assets/icon/icon-star.svg) center center/contain no-repeat
}

.searchBtn.icon-rt-star::after,
.fillBtn.icon-rt-star::after,
.lineBtn.icon-rt-star::after {
    mask: url(/jp/assets/icon/icon-star.svg) center center/contain no-repeat
}

.searchBtn.icon-lt-modal::before,
.fillBtn.icon-lt-modal::before,
.lineBtn.icon-lt-modal::before {
    mask: url(/jp/assets/icon/icon-modal.svg) center center/contain no-repeat
}

.searchBtn.icon-rt-modal::after,
.fillBtn.icon-rt-modal::after,
.lineBtn.icon-rt-modal::after {
    mask: url(/jp/assets/icon/icon-modal.svg) center center/contain no-repeat
}

.searchBtn.icon-lt-movie::before,
.fillBtn.icon-lt-movie::before,
.lineBtn.icon-lt-movie::before {
    mask: url(/jp/assets/icon/icon-movie.svg) center center/contain no-repeat
}

.searchBtn.icon-rt-movie::after,
.fillBtn.icon-rt-movie::after,
.lineBtn.icon-rt-movie::after {
    mask: url(/jp/assets/icon/icon-movie.svg) center center/contain no-repeat
}

.searchBtn.icon-lt-empty::before,
.fillBtn.icon-lt-empty::before,
.lineBtn.icon-lt-empty::before {
    background: none !important
}

.searchBtn.icon-rt-empty::after,
.fillBtn.icon-rt-empty::after,
.lineBtn.icon-rt-empty::after {
    background: none !important
}

.searchBtn.icon-lt-none::before,
.fillBtn.icon-lt-none::before,
.lineBtn.icon-lt-none::before {
    display: none
}

.searchBtn.icon-rt-none::after,
.fillBtn.icon-rt-none::after,
.lineBtn.icon-rt-none::after {
    display: none
}

.searchBtn:not(.width-auto)>*,
.fillBtn:not(.width-auto)>*,
.lineBtn:not(.width-auto)>* {
    flex: 1
}

.searchBtn:disabled,
.searchBtn.is-disabled,
.fillBtn:disabled,
.fillBtn.is-disabled,
.lineBtn:disabled,
.lineBtn.is-disabled {
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0) !important;
    background: #e0e0e0 !important;
    color: #acacac !important
}

.searchBtn:disabled[class*=icon-rt]::after,
.searchBtn:disabled[class*=icon-lt]::before,
.searchBtn.is-disabled[class*=icon-rt]::after,
.searchBtn.is-disabled[class*=icon-lt]::before,
.fillBtn:disabled[class*=icon-rt]::after,
.fillBtn:disabled[class*=icon-lt]::before,
.fillBtn.is-disabled[class*=icon-rt]::after,
.fillBtn.is-disabled[class*=icon-lt]::before,
.lineBtn:disabled[class*=icon-rt]::after,
.lineBtn:disabled[class*=icon-lt]::before,
.lineBtn.is-disabled[class*=icon-rt]::after,
.lineBtn.is-disabled[class*=icon-lt]::before {
    background: #acacac !important
}

.searchBtn:disabled.icon-lt-empty::before,
.searchBtn.is-disabled.icon-lt-empty::before,
.fillBtn:disabled.icon-lt-empty::before,
.fillBtn.is-disabled.icon-lt-empty::before,
.lineBtn:disabled.icon-lt-empty::before,
.lineBtn.is-disabled.icon-lt-empty::before {
    background: none !important
}

.searchBtn:disabled.icon-rt-empty::after,
.searchBtn.is-disabled.icon-rt-empty::after,
.fillBtn:disabled.icon-rt-empty::after,
.fillBtn.is-disabled.icon-rt-empty::after,
.lineBtn:disabled.icon-rt-empty::after,
.lineBtn.is-disabled.icon-rt-empty::after {
    background: none !important
}

.searchBtn {
    background: linear-gradient(135deg, #f27400 10%, #df3600 89%);
    color: #fff
}

.searchBtn[class*=icon-rt]::after,
.searchBtn[class*=icon-lt]::before {
    background: #fff
}

.searchBtn:hover {
    opacity: .8
}

.fillBtn {
    background: #ea7000;
    color: #fff
}

.fillBtn[class*=icon-rt]::after,
.fillBtn[class*=icon-lt]::before {
    background: #fff
}

.fillBtn:hover {
    background: #d14b00
}

.lineBtn {
    color: #ea7000;
    border: 1px solid #ea7000;
    background: #fff
}

.lineBtn[class*=icon-rt]::after,
.lineBtn[class*=icon-lt]::before {
    background: #ea7000
}

.lineBtn:hover {
    background: #fff7e9
}

.lineBtn.clr-bl {
    color: #0371ee;
    border-color: #0371ee
}

.lineBtn.clr-bl[class*=icon-rt]::after,
.lineBtn.clr-bl[class*=icon-lt]::before {
    background: #0371ee
}

.lineBtn.clr-bl:hover {
    background: #e4f2ff
}

.lineBtn.icon-lt-badge::before,
.lineBtn.icon-rt-badge::after {
    display: none
}

.lineBtn.icon-lt-badge>*,
.lineBtn.icon-rt-badge>* {
    display: flex;
    align-items: center;
    gap: 8px
}

.lineBtn.icon-lt-badge>*>*,
.lineBtn.icon-rt-badge>*>* {
    display: flex;
    align-items: center;
    flex: 0;
    height: 12px;
    padding: 0 4px;
    border-radius: 1.3em;
    background: #de1818;
    color: #fff;
    font-size: 1rem;
    line-height: 160%;
    line-height: 100%;
    font-weight: 400
}

.textBtn {
    display: flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
    color: #0371ee;
    cursor: pointer
}
.textBtn2 {
    align-items: center;
    gap: 4px;
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
    color: #0371ee;
    cursor: pointer
}

.textBtn.size-s {
    font-size: 1.2rem;
    line-height: 130%;
    text-decoration: underline;
    text-decoration: none
}

.textBtn.size-s:hover {
    text-decoration: none
}

.textBtn.size-s[class*=icon-]::before,
.textBtn.size-s[class*=icon-]::after {
    width: 12px;
    height: 12px
}

.textBtn.size-m {
    font-size: 1.4rem;
    line-height: 130%;
    text-decoration: underline;
    text-decoration: none
}

.textBtn.size-m:hover {
    text-decoration: none
}

.textBtn.size-l {
    font-size: 1.6rem;
    line-height: 130%;
    text-decoration: underline;
    text-decoration: none
}

.textBtn.size-l:hover {
    text-decoration: none
}

.textBtn[class*=icon-lt]::before,
.textBtn[class*=icon-rt]::after {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background: #0371ee;
    content: ""
}

.textBtn.icon-lt-account_circle::before {
    mask: url(/jp/assets/icon/icon-account_circle.svg) center center/contain no-repeat
}

.textBtn.icon-rt-account_circle::after {
    mask: url(/jp/assets/icon/icon-account_circle.svg) center center/contain no-repeat
}

.textBtn.icon-lt-arrow::before {
    mask: url(/jp/assets/icon/icon-arrow_left.svg) center center/contain no-repeat
}

.textBtn.icon-rt-arrow::after {
    mask: url(/jp/assets/icon/icon-arrow_right.svg) center center/contain no-repeat
}

.textBtn.icon-lt-blank::before {
    mask: url(/jp/assets/icon/icon-link.svg) center center/contain no-repeat
}

.textBtn.icon-rt-blank::after {
    mask: url(/jp/assets/icon/icon-link.svg) center center/contain no-repeat
}

.textBtn.icon-lt-delete::before {
    mask: url(/jp/assets/icon/icon-delete.svg) center center/contain no-repeat
}

.textBtn.icon-rt-delete::after {
    mask: url(/jp/assets/icon/icon-delete.svg) center center/contain no-repeat
}

.textBtn.icon-lt-down::before {
    mask: url(/jp/assets/icon/icon-arrow_down.svg) center center/contain no-repeat
}

.textBtn.icon-rt-down::after {
    mask: url(/jp/assets/icon/icon-arrow_down.svg) center center/contain no-repeat
}

.textBtn.icon-lt-help::before {
    mask: url(/jp/assets/icon/icon-help.svg) center center/contain no-repeat
}

.textBtn.icon-rt-help::after {
    mask: url(/jp/assets/icon/icon-help.svg) center center/contain no-repeat
}

.textBtn.icon-lt-info::before {
    mask: url(/jp/assets/icon/icon-info.svg) center center/contain no-repeat
}

.textBtn.icon-rt-info::after {
    mask: url(/jp/assets/icon/icon-info.svg) center center/contain no-repeat
}

.textBtn.icon-lt-menu::before {
    mask: url(/jp/assets/icon/icon-menu.svg) center center/contain no-repeat
}

.textBtn.icon-rt-menu::after {
    mask: url(/jp/assets/icon/icon-menu.svg) center center/contain no-repeat
}

.textBtn.icon-lt-modal::before {
    mask: url(/jp/assets/icon/icon-modal.svg) center center/contain no-repeat
}

.textBtn.icon-rt-modal::after {
    mask: url(/jp/assets/icon/icon-modal.svg) center center/contain no-repeat
}

.textBtn.icon-lt-none::before {
    display: none
}

.textBtn.icon-rt-none::after {
    display: none
}

.textBtn.clr-wh {
    color: #fff
}

.textBtn.clr-wh[class*=icon-lt]::before,
.textBtn.clr-wh[class*=icon-rt]::after {
    background: #fff
}

.textBtn:hover {
    text-decoration: underline !important
}

@media print,
screen and (min-width: 1240px) {
    .textBtn.pc-size-s {
        font-size: 1.2rem;
        line-height: 130%;
        text-decoration: underline;
        text-decoration: none
    }

    .textBtn.pc-size-s:hover {
        text-decoration: none
    }

    .textBtn.pc-size-s[class*=icon-]::before,
    .textBtn.pc-size-s[class*=icon-]::after {
        width: 12px;
        height: 12px
    }

    .textBtn.pc-size-m {
        font-size: 1.4rem;
        line-height: 130%;
        text-decoration: underline;
        text-decoration: none
    }

    .textBtn.pc-size-m:hover {
        text-decoration: none
    }

    .textBtn.pc-size-l {
        font-size: 1.6rem;
        line-height: 130%;
        text-decoration: underline;
        text-decoration: none
    }

    .textBtn.pc-size-l:hover {
        text-decoration: none
    }

    .textBtn.pc-clr-wh {
        color: #fff
    }

    .textBtn.pc-clr-wh[class*=icon-lt]::before,
    .textBtn.pc-clr-wh[class*=icon-rt]::after {
        background: #fff
    }
}

@media only screen and (max-width: 1239px) {
    .textBtn.sp-size-s {
        font-size: 1.2rem;
        line-height: 130%;
        text-decoration: underline;
        text-decoration: none
    }

    .textBtn.sp-size-s:hover {
        text-decoration: none
    }

    .textBtn.sp-size-s[class*=icon-]::before,
    .textBtn.sp-size-s[class*=icon-]::after {
        width: 12px;
        height: 12px
    }

    .textBtn.sp-size-m {
        font-size: 1.4rem;
        line-height: 130%;
        text-decoration: underline;
        text-decoration: none
    }

    .textBtn.sp-size-m:hover {
        text-decoration: none
    }

    .textBtn.sp-size-l {
        font-size: 1.6rem;
        line-height: 130%;
        text-decoration: underline;
        text-decoration: none
    }

    .textBtn.sp-size-l:hover {
        text-decoration: none
    }

    .textBtn.sp-clr-wh {
        color: #fff
    }

    .textBtn.sp-clr-wh[class*=icon-lt]::before,
    .textBtn.sp-clr-wh[class*=icon-rt]::after {
        background: #fff
    }
}

.textLink {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
    color: #363636;
    text-decoration: underline;
    text-indent: 0;
    cursor: pointer
}

.textLink[class*=icon-lt]::before,
.textLink[class*=icon-rt]::after {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    background: #0371ee;
    content: ""
}

.textLink.icon-lt-account_circle::before {
    mask: url(/jp/assets/icon/icon-account_circle.svg) center center/contain no-repeat
}

.textLink.icon-rt-account_circle::after {
    mask: url(/jp/assets/icon/icon-account_circle.svg) center center/contain no-repeat
}

.textLink.icon-lt-arrow::before {
    mask: url(/jp/assets/icon/icon-arrow_left.svg) center center/contain no-repeat
}

.textLink.icon-rt-arrow::after {
    mask: url(/jp/assets/icon/icon-arrow_right.svg) center center/contain no-repeat
}

.textLink.icon-lt-blank::before {
    mask: url(/jp/assets/icon/icon-link.svg) center center/contain no-repeat
}

.textLink.icon-rt-blank::after {
    mask: url(/jp/assets/icon/icon-link.svg) center center/contain no-repeat
}

.textLink.icon-lt-delete::before {
    mask: url(/jp/assets/icon/icon-delete.svg) center center/contain no-repeat
}

.textLink.icon-rt-delete::after {
    mask: url(/jp/assets/icon/icon-delete.svg) center center/contain no-repeat
}

.textLink.icon-lt-help::before {
    mask: url(/jp/assets/icon/icon-help.svg) center center/contain no-repeat
}

.textLink.icon-rt-help::after {
    mask: url(/jp/assets/icon/icon-help.svg) center center/contain no-repeat
}

.textLink.icon-lt-info::before {
    mask: url(/jp/assets/icon/icon-info.svg) center center/contain no-repeat
}

.textLink.icon-rt-info::after {
    mask: url(/jp/assets/icon/icon-info.svg) center center/contain no-repeat
}

.textLink.icon-lt-menu::before {
    mask: url(/jp/assets/icon/icon-menu.svg) center center/contain no-repeat
}

.textLink.icon-rt-menu::after {
    mask: url(/jp/assets/icon/icon-menu.svg) center center/contain no-repeat
}

.textLink.icon-lt-modal::before {
    mask: url(/jp/assets/icon/icon-modal.svg) center center/contain no-repeat
}

.textLink.icon-rt-modal::after {
    mask: url(/jp/assets/icon/icon-modal.svg) center center/contain no-repeat
}

.textLink.icon-lt-place::before {
    mask: url(/jp/assets/icon/icon-place.svg) center center/contain no-repeat
}

.textLink.icon-rt-place::after {
    mask: url(/jp/assets/icon/icon-place.svg) center center/contain no-repeat
}

.textLink.icon-lt-none::before {
    display: none
}

.textLink.icon-rt-none::after {
    display: none
}

.textLink:hover {
    text-decoration: none !important
}

.accBtn {
    display: flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
    cursor: pointer
}

.accBtn.size-s {
    font-size: 1.2rem;
    line-height: 130%;
    text-decoration: underline
}

.accBtn.size-s:hover {
    text-decoration: none
}

.accBtn.size-m {
    font-size: 1.4rem;
    line-height: 130%;
    text-decoration: underline
}

.accBtn.size-m:hover {
    text-decoration: none
}

.accBtn.size-l {
    font-size: 1.6rem;
    line-height: 130%;
    text-decoration: underline
}

.accBtn.size-l:hover {
    text-decoration: none
}

.accBtn::after {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background: #5a5a5a;
    transition: none;
    mask: url(/jp/assets/icon/icon-accordion_open.svg) center center/contain no-repeat, url(/jp/assets/icon/icon-accordion_close.svg) left 16px center/contain no-repeat;
    content: ""
}

.accBtn.clr-wh {
    color: #fff
}

.accBtn.clr-wh::after {
    background: #fff
}

.js-accordion.is-open>.accBtn::after {
    mask: url(/jp/assets/icon/icon-accordion_open.svg) left 16px center/contain no-repeat, url(/jp/assets/icon/icon-accordion_close.svg) center center/contain no-repeat
}

.js-accordion.is-open>.accBtn[data-accordion-close]::before {
    content: attr(data-accordion-close)
}

.js-accordion.is-open>.accBtn[data-accordion-close] * {
    display: none
}

.checkAccBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #0371ee;
    background: #fff;
    color: #0371ee;
    font-weight: 700;
    line-height: 130%;
    text-align: center;
    cursor: pointer;
    transition: var(--transition)
}

@media print,
screen and (min-width: 1240px) {
    .checkAccBtn {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .checkAccBtn {
        font-size: 1.4rem
    }
}

.checkAccBtn>* {
    flex: 1
}

.checkAccBtn::before,
.checkAccBtn::after {
    width: 16px;
    height: 16px;
    content: ""
}

.checkAccBtn::after {
    background: #0371ee;
    transition: none;
    mask: url(/jp/assets/icon/icon-accordion_open.svg) center center/contain no-repeat, url(/jp/assets/icon/icon-accordion_close.svg) left 16px center/contain no-repeat
}

.checkAccBtn:hover {
    background: #e4f2ff
}

.checkAccBtn:disabled,
.checkAccBtn.is-disabled {
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    background: #e0e0e0;
    color: #acacac
}

.checkAccBtn:disabled::before,
.checkAccBtn.is-disabled::before {
    background: #acacac
}

.js-accordion.is-open>.checkAccBtn::after,
.js-ruleAccordion.is-open>.checkAccBtn::after {
    mask: url(/jp/assets/icon/icon-accordion_open.svg) left 16px center/contain no-repeat, url(/jp/assets/icon/icon-accordion_close.svg) center center/contain no-repeat
}
.js-resultAccordion.is-open>.checkAccBtn::after {
    mask: url(/jp/assets/icon/icon-accordion_open.svg) left 16px center/contain no-repeat, url(/jp/assets/icon/icon-accordion_close.svg) center center/contain no-repeat
}

.js-accordion.is-open>.checkAccBtn[data-accordion-close]::before,
.js-ruleAccordion.is-open>.checkAccBtn[data-accordion-close]::before {
    content: attr(data-accordion-close)
}

.js-accordion.is-open>.checkAccBtn[data-accordion-close] *,
.js-ruleAccordion.is-open>.checkAccBtn[data-accordion-close] * {
    display: none
}

.closeBtn {
    display: block;
    cursor: pointer
}

.closeBtn::before {
    display: block;
    width: 32px;
    height: 32px;
    background: #fff;
    mask: url(/jp/assets/icon/icon-close.svg) center center/contain no-repeat;
    content: ""
}

.closeBtn>* {
    display: none
}

.closeBtn:hover {
    opacity: .7
}

.telBtn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    white-space: nowrap
}

.telBtn::before {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    mask: url(/jp/assets/icon/icon-phone.svg) center center/contain no-repeat;
    content: ""
}

@media print,
screen and (min-width: 1240px) {
    .telBtn {
        pointer-events: none;
        width: 192px;
        min-height: 34px;
        padding: 8px 16px;
        color: #363636;
        font-size: 1.6rem;
        line-height: 130%;
        font-weight: 700;
        line-height: 100%
    }

    .telBtn:hover {
        text-decoration: underline
    }

    .telBtn::before {
        background: #363636
    }
}

@media only screen and (max-width: 1239px) {
    .telBtn {
        width: 64px;
        min-height: 26px;
        padding: 4px 8px;
        border: 1px solid #ea7000;
        border-radius: 20px;
        color: #ea7000;
        font-size: 1.2rem;
        line-height: 130%;
        font-weight: 400;
        line-height: 100%
    }

    .telBtn:hover {
        text-decoration: underline
    }

    .telBtn::before {
        background: #ea7000
    }

    .telBtn::after {
        content: "電話"
    }

    .telBtn:hover {
        text-decoration: none !important;
        background: #fff9e5
    }

    .telBtn>* {
        display: none
    }
}

.webBtn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border: 1px solid #ea7000;
    white-space: nowrap;
    color: #ea7000
}

.webBtn:hover {
    text-decoration: none !important;
    background: #fff9e5
}

@media print,
screen and (min-width: 1240px) {
    .webBtn {
        width: 192px;
        min-height: 34px;
        padding: 8px 16px;
        border-radius: 24px;
        font-size: 1.6rem;
        line-height: 130%;
        font-weight: 400;
        line-height: 100%
    }

    .webBtn:hover {
        text-decoration: underline
    }
}

@media only screen and (max-width: 1239px) {
    .webBtn {
        width: 64px;
        min-height: 26px;
        padding: 4px 8px;
        border-radius: 20px;
        font-size: 1.2rem;
        line-height: 130%;
        font-weight: 400;
        line-height: 100%
    }

    .webBtn:hover {
        text-decoration: underline
    }
}

.btnSide {
    display: flex;
    align-items: center;
    gap: 16px
}

.btnSide>* {
    margin: 0
}

@media print,
screen and (min-width: 1240px) {
    .btnSide {
        justify-content: center
    }

    .btnSide.flex-rev,
    .btnSide.pc-flex-rev {
        flex-direction: row-reverse
    }
}

@media only screen and (max-width: 1239px) {
    .btnSide {
        flex-direction: column
    }

    .btnSide.flex-rev,
    .btnSide.sp-flex-rev {
        flex-direction: column-reverse
    }
}

.eventCard {
    display: flex;
    flex-wrap: wrap
}

*:not(.js-eventInfo)>.eventCard.swiper-wrapper {
    align-items: stretch
}

.eventCard-item {
    display: flex;
    height: auto
}

.eventCard-link {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    border: 1px solid #e6e6e6;
    background: rgba(255, 255, 255, .9);
    color: #363636;
    box-shadow: 0px 0px 16px 8px rgba(2, 111, 187, .02);
    overflow: hidden;
    transition: var(--transition)
}

.eventCard-cat {
    position: absolute;
    top: 8px;
    padding: 4px 8px;
    border-radius: 20px;
    background: #fff9e5;
    color: #ea7000;
    font-size: 1rem;
    line-height: 160%;
    line-height: 130%
}

.eventCard-img {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: contain
}

.eventCard-body {
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex: 1;
    position: relative
}

.eventCard-area {
    position: absolute;
    bottom: calc(100% - 4px);
    padding: 4px 8px;
    background: #fff;
    font-size: 1rem;
    line-height: 160%;
    line-height: 130%;
    font-weight: 700
}

.eventCard-marina {
    margin-bottom: 4px;
    font-size: 1rem;
    line-height: 160%
}

.eventCard-ttl {
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-size: 1.2rem;
    line-height: 130%;
    letter-spacing: .02em;
    font-weight: 700
}

.eventCard-ttl::after {
    position: absolute;
    top: 50%;
    background: #0371ee;
    transform: translateY(-50%);
    mask: url(/jp/assets/icon/icon-arrow_right.svg) center center/contain no-repeat;
    content: ""
}

.eventCard-date {
    overflow: hidden;
    font-size: 1rem;
    line-height: 160%;
    text-overflow: ellipsis;
    white-space: nowrap
}

.eventCard-price {
    overflow: hidden;
    font-size: 1rem;
    line-height: 160%;
    text-overflow: ellipsis;
    white-space: nowrap
}

@media print,
screen and (min-width: 1240px) {
    .eventCard {
        gap: 16px
    }

    .eventCard-item {
        width: calc(25% - 12px)
    }

    .eventCard-link:hover {
        transform: translateY(-5px)
    }

    .eventCard-cat {
        right: 12px
    }

    .eventCard-body {
        padding: 12px
    }

    .eventCard-ttl {
        position: relative;
        padding-right: 24px;
        -webkit-line-clamp: 2;
        max-height: 2.6em
    }

    .eventCard-ttl::after {
        right: 0;
        width: 20px;
        height: 20px
    }
}

@media only screen and (max-width: 1239px) {
    .eventCard {
        gap: 8px
    }

    .eventCard-item {
        width: calc(50% - 4px)
    }

    .eventCard-cat {
        right: 8px
    }

    .eventCard-body {
        position: relative;
        padding: 8px 28px 8px 8px
    }

    .eventCard-ttl {
        -webkit-line-clamp: 3;
        max-height: 3.9em
    }

    .eventCard-ttl::after {
        right: 8px;
        width: 12px;
        height: 12px
    }
}

@media only screen and (max-width: 479px) {
    .eventCard.sp-col-1 .eventCard-item {
        width: 100%
    }
}

.boatCard {
    display: flex;
    flex-wrap: wrap
}

.boatCard-item {
    border-radius: 4px;
    border: 1px solid #e6e6e6;
    background: rgba(255, 255, 255, .9);
    color: #363636;
    box-shadow: 0px 0px 16px 8px rgba(2, 111, 187, .02);
    overflow: hidden;
    transition: var(--transition)
}

.boatCard-img-link {
    display: block;
    position: relative
}

.boatCard-img-link[data-boatimg-trigger],
.boatCard-img-link:is(a[href]) {
    cursor: pointer
}

.boatCard-img-link[data-boatimg-trigger] {
    aspect-ratio: 16/9;
    object-fit: cover
}

.boatCard-img-link[data-boatimg-trigger]::before,
.boatCard-img-link[data-boatimg-trigger]::after {
    position: absolute;
    z-index: 1;
    content: ""
}

.boatCard-img-link[data-boatimg-trigger]::before {
    right: 4px;
    bottom: 4px;
    width: 20px;
    height: 20px;
    border-radius: 2px;
    background: rgba(0, 0, 0, .3)
}

.boatCard-img-link[data-boatimg-trigger]::after {
    right: 8px;
    bottom: 8px;
    width: 12px;
    height: 12px;
    background: #fff;
    mask: url(/jp/assets/icon/icon-modal.svg) center center/contain no-repeat
}

.boatCard-img {
    display: block;
    aspect-ratio: 16/9;
    object-fit: cover
}

.boatCard-body {
    padding: 8px
}

.boatCard-body-link {
    display: block
}

.boatCard-info {
    display: flex;
    align-items: center;
    gap: 4px
}

.boatCard-info [data-tip] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 16px;
    background: #fff9e5;
    color: #ea7000;
    line-height: 130%;
    letter-spacing: .02em;
    font-weight: bold
}

@media print,
screen and (min-width: 1240px) {
    .boatCard-info [data-tip] {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {
    .boatCard-info [data-tip] {
        font-size: 1rem
    }
}

.boatCard-info p {
    line-height: 160%;
    line-height: 130%
}

@media print,
screen and (min-width: 1240px) {
    .boatCard-info p {
        font-size: 1rem
    }
}

@media only screen and (max-width: 1239px) {
    .boatCard-info p {
        font-size: .8rem
    }
}

.boatCard-ttl {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.boatCard-ttl>* {
    flex: 1
}

.boatCard-ttl::after {
    background: #0371ee;
    mask: url(/jp/assets/icon/icon-arrow_right.svg) center center/contain no-repeat;
    content: ""
}

.boatCard-txt {
    margin-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media print,
screen and (min-width: 1240px) {
    .boatCard {
        gap: 24px
    }

    .boatCard-item {
        width: calc(25% - 18px)
    }

    .boatCard-item:hover {
        transform: translateY(-5px)
    }

    .boatCard-body {
        padding: 12px
    }

    .boatCard-info {
        margin-bottom: 8px
    }

    .boatCard-ttl {
        font-size: 1.4rem;
        line-height: 130%;
        letter-spacing: .02em;
        font-weight: 700
    }

    .boatCard-ttl::after {
        width: 20px;
        height: 20px
    }

    .boatCard-txt {
        font-size: 1.4rem;
        line-height: 160%
    }
}

@media only screen and (max-width: 1239px) {
    .boatCard {
        gap: 8px
    }

    .boatCard-item {
        width: calc(50% - 4px)
    }

    .boatCard-body {
        padding: 8px 8px 16px
    }

    .boatCard-info {
        margin-bottom: 4px
    }

    .boatCard-ttl {
        font-size: 1rem;
        line-height: 130%;
        letter-spacing: .02em;
        font-weight: 700
    }

    .boatCard-ttl::after {
        width: 12px;
        height: 12px
    }

    .boatCard-txt {
        font-size: 1rem;
        line-height: 160%;
        line-height: 130%
    }
}

.movieCard {
    display: flex;
    flex-wrap: wrap
}

.movieCard-item {
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    border: 1px solid #e6e6e6;
    background: rgba(255, 255, 255, .9);
    color: #363636;
    box-shadow: 0px 0px 16px 8px rgba(2, 111, 187, .02);
    overflow: hidden;
    transition: var(--transition)
}

.movieCard-img {
    display: block;
    aspect-ratio: 16/9;
    object-fit: cover
}

.movieCard-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    padding: 8px
}

.movieCard-ttl {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.movieCard-ttl::after {
    background: #0371ee;
    mask: url(/jp/assets/icon/icon-movie.svg) center center/contain no-repeat;
    content: ""
}

@media print,
screen and (min-width: 1240px) {
    .movieCard {
        gap: 40px 24px
    }

    .movieCard-item {
        width: calc(25% - 18px)
    }

    .movieCard-item:hover {
        transform: translateY(-5px)
    }

    .movieCard-body {
        padding: 12px
    }

    .movieCard-ttl {
        font-size: 1.4rem;
        line-height: 130%;
        letter-spacing: .02em;
        font-weight: 700
    }

    .movieCard-ttl::after {
        width: 20px;
        height: 20px
    }
}

@media only screen and (max-width: 1239px) {
    .movieCard {
        gap: 8px
    }

    .movieCard-item {
        width: calc(50% - 4px)
    }

    .movieCard-body {
        padding: 8px 8px 16px
    }

    .movieCard-ttl {
        font-size: 1rem;
        line-height: 130%;
        letter-spacing: .02em;
        font-weight: 700
    }

    .movieCard-ttl::after {
        width: 12px;
        height: 12px
    }
}

.reserveCard {
    display: flex;
    flex-wrap: wrap
}

.reserveCard-item {
    width: 100%;
    background: #fff;
    box-shadow: 0px 2px 6px 0px rgba(5, 41, 66, .15)
}

.reserveCard-boat-img {
    float: left;
    aspect-ratio: 16/9;
    object-fit: cover
}

.reserveCard-boat-spec {
    display: flex;
    align-items: center
}

.reserveCard-boat-name {
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em
}

@media print,
screen and (min-width: 1240px) {
    .reserveCard-boat-name {
        font-size: 2rem
    }
}

@media only screen and (max-width: 1239px) {
    .reserveCard-boat-name {
        font-size: 1.4rem
    }
}

.reserveCard-boat-nickname {
    display: flex;
    align-items: center
}

.reserveCard-boat-nickname:is(a) {
    cursor: pointer
}

.reserveCard-boat-nickname:is(a):hover {
    text-decoration: underline
}

.reserveCard-boat-nickname>* {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    max-height: 1.6em
}

.reserveCard-boat-nickname::after {
    background: #0371ee;
    mask: url(/jp/assets/icon/icon-info.svg) center center/contain no-repeat;
    content: ""
}

.reserveCard-boat-capa {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 4px 12px;
    border-radius: 29px;
    background: #ea7000;
    color: #fff;
    line-height: 130%;
    letter-spacing: .02em;
    font-weight: 700;
    white-space: nowrap
}

@media print,
screen and (min-width: 1240px) {
    .reserveCard-boat-capa {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {
    .reserveCard-boat-capa {
        font-size: 1rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .reserveCard {
        margin-right: -24px;
        margin-left: -24px;
        padding: 0 24px
    }

    .reserveCard-item {
        margin-top: 24px;
        padding: 24px;
        border-radius: 4px
    }

    .reserveCard-boat-img {
        width: 140px;
        margin: 0 16px 24px 0
    }

    .reserveCard-boat-spec {
        gap: 8px 16px;
        margin-bottom: 12px
    }

    .reserveCard-boat-name {
        white-space: nowrap
    }

    .reserveCard-boat-nickname {
        gap: 16px;
        font-size: 1.4rem;
        line-height: 160%
    }

    .reserveCard-boat-nickname::after {
        width: 20px;
        height: 20px
    }

    .reserveCard-boat-facility {
        margin-bottom: 16px
    }

    .reserveCard-plan {
        clear: both
    }
}

@media only screen and (max-width: 1239px) {
    .reserveCard {
        margin-right: -16px;
        margin-left: -16px;
        padding: 0 16px
    }

    .reserveCard-item {
        margin-top: 16px;
        padding: 12px;
        border-radius: 2px
    }

    .reserveCard-boat {
        position: relative;
        margin-bottom: 8px;
        padding-bottom: 21px
    }

    .reserveCard-boat-img {
        width: 100px;
        margin: 0 8px 8px 0
    }

    .reserveCard-boat-spec {
        gap: 4px;
        flex-wrap: wrap
    }

    .reserveCard-boat-name {
        width: 100%;
        font-size: 1.2rem
    }

    .reserveCard-boat-nickname {
        gap: 4px;
        margin-bottom: 8px;
        font-size: 1rem;
        line-height: 160%
    }

    .reserveCard-boat-nickname::after {
        width: 16px;
        height: 16px
    }

    .reserveCard-boat-capa {
        position: absolute;
        left: 0;
        bottom: 0
    }

    .reserveCard-boat-facility {
        clear: both;
        margin-bottom: 8px
    }
}

.reservePlanList {
    display: flex;
    flex-wrap: wrap
}

.reservePlanList-item {
    position: relative;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    background: #0371ee;
    color: #fff;
    text-align: center;
    transition: .4s background linear;
    cursor: pointer
}

.reservePlanList-item:hover {
    background: #0250c5
}

.reservePlanList-item::after {
    position: absolute;
    top: 50%;
    right: 4px;
    background: #fff;
    transform: translateY(-50%);
    mask: url(/jp/assets/icon/icon-arrow_right.svg) center center/contain no-repeat;
    content: ""
}

.reservePlanList-item.is-disabled {
    background: #f0f0f0;
    color: #acacac;
    cursor: default
}

.reservePlanList-item.is-disabled::after {
    background: #acacac
}

.reservePlanList-item.is-disabled-time {
    border-color: #e6e6e6
}

.reservePlanList-time {
    margin-bottom: 2px;
    padding-bottom: 4px;
    border-bottom: .5px solid #e6e6e6;
    line-height: 160%;
    font-weight: 700
}

@media print,
screen and (min-width: 1240px) {
    .reservePlanList-time {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .reservePlanList-time {
        font-size: 1.2rem
    }
}

.reservePlanList-price {
    line-height: 160%;
    line-height: 130%
}

@media print,
screen and (min-width: 1240px) {
    .reservePlanList-price {
        font-size: 1rem
    }
}

@media only screen and (max-width: 1239px) {
    .reservePlanList-price {
        font-size: .8rem
    }
}

.reservePlanList-price * {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .reservePlanList-price * {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .reservePlanList-price * {
        font-size: 1.2rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .reservePlanList {
        gap: 16px
    }

    .reservePlanList-item {
        width: calc(20% - 12.8px);
        padding: 8px 24px 8px 8px
    }

    .reservePlanList-item::after {
        width: 16px;
        height: 16px
    }
}

@media only screen and (max-width: 1239px) {
    .reservePlanList {
        gap: 8px
    }

    .reservePlanList.js-reserveCardList {
        display: block;
        flex-wrap: nowrap;
        height: 0;
        margin: 0 -12px;
        opacity: 0;
        overflow-y: hidden;
        transition: opacity .3s linear
    }

    .reservePlanList.js-reserveCardList.slick-initialized {
        height: auto;
        opacity: 1
    }

    .reservePlanList.js-reserveCardList .slick-list {
        padding: 0 8px !important
    }

    .reservePlanList.js-reserveCardList .slick-slide {
        margin: 0 4px
    }

    .reservePlanList-item {
        width: calc(50% - 4px);
        padding: 8px 20px 8px 8px
    }

    .reservePlanList-item::after {
        width: 12px;
        height: 12px
    }

    .reservePlanList-time {
        line-height: 130%
    }

    .reservePlanList-price * {
        line-height: 130%
    }
}
.js-resultAccordion [data-accordion-content] {
    overflow: hidden;
    transition: .3s all ease
}

.js-resultAccordion:not(.is-open) [data-accordion-content] {
    position: relative
}

.js-resultAccordion:not(.is-open) [data-accordion-content]::after {
    position: absolute;
    top: 70%;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 80%);
    z-index: 10;
    content: ""
}

@media print,screen and (min-width: 1240px) {
    .js-resultAccordion [data-accordion-content] {
        padding-bottom:32px
    }

    .js-resultAccordion:not(.is-open) [data-accordion-content] {
        height: 185px
    }
}
@media only screen and (max-width: 1239px) {
    .marinaBoatModal .modal-header {
        padding-right:16px;
        padding-left: 16px;
    }
}
@media only screen and (max-width: 1239px) {
    .js-resultAccordion [data-accordion-content] {
        padding-bottom:16px
    }

    .js-resultAccordion:not(.is-open) [data-accordion-content] {
        height: 185px
    }
}

.planCard {
    display: flex;
    flex-direction: column
}

.planCard-item {
    background: rgba(255, 255, 255, .9);
    overflow: hidden;
    box-shadow: 0px 2px 6px 0px rgba(5, 41, 66, .15)
}

.planCard-ttl {
    display: flex;
    gap: 16px;
    background: #0371ee;
    color: #fff;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em
}

@media print,
screen and (min-width: 1240px) {
    .planCard-ttl {
        font-size: 1.8rem
    }
}

@media only screen and (max-width: 1239px) {
    .planCard-ttl {
        font-size: 1.6rem
    }
}

.planCard-ttl span {
    line-height: 160%;
    font-weight: 400
}

@media print,
screen and (min-width: 1240px) {
    .planCard-ttl span {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .planCard-ttl span {
        font-size: 1.2rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .planCard {
        gap: 32px
    }

    .planCard-item {
        display: flex;
        flex-wrap: wrap;
        gap: 0 16px;
        padding: 0 24px 24px;
        border-radius: 4px
    }

    .planCard-ttl {
        width: calc(100% + 48px);
        margin: 0 -24px 24px;
        padding: 16px 24px
    }

    .planCard-boat {
        width: 567px
    }

    .planCard-price {
        width: 440px
    }
}

@media only screen and (max-width: 1239px) {
    .planCard {
        gap: 24px
    }

    .planCard-item {
        padding: 0 16px 24px;
        border-radius: 2px
    }

    .planCard-ttl {
        width: calc(100% + 32px);
        margin: 0 -16px 16px;
        padding: 12px 16px
    }

    .planCard-boat {
        margin-bottom: 24px
    }
}

.deciList {
    list-style-type: decimal;
    margin-left: 2em
}

.deciList1 {
    list-style-type: decimal;
    margin-left: 1em
}

.discList {
    list-style: disc;
    margin-left: 2em
}

.discList>*+* {
    margin-top: 4px
}

.topNewsList-link,
.newNewsList-link,
.newsList-link {
    width: 100%;
    cursor: pointer
}

.topNewsList-link::after,
.newNewsList-link::after,
.newsList-link::after {
    background: #5a5a5a;
    mask: url(/jp/assets/icon/icon-modal.svg) center center/contain no-repeat;
    content: ""
}

.topNewsList-marina,
.newNewsList-marina,
.newsList-marina {
    font-weight: 700
}

.topNewsList-link:hover .topNewsList-ttl,
.topNewsList-link:hover .newNewsList-ttl,
.topNewsList-link:hover .newsList-ttl,
.newNewsList-link:hover .topNewsList-ttl,
.newNewsList-link:hover .newNewsList-ttl,
.newNewsList-link:hover .newsList-ttl,
.newsList-link:hover .topNewsList-ttl,
.newsList-link:hover .newNewsList-ttl,
.newsList-link:hover .newsList-ttl {
    text-decoration: underline
}

@media print,
screen and (min-width: 1240px) {

    .topNewsList-link::after,
    .newNewsList-link::after,
    .newsList-link::after {
        width: 20px;
        height: 20px
    }

    .topNewsList-marina,
    .newNewsList-marina,
    .newsList-marina {
        font-size: 1.4rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .topNewsList-date,
    .newNewsList-date,
    .newsList-date {
        font-size: 1.4rem;
        line-height: 160%
    }

    .topNewsList-ttl,
    .newNewsList-ttl,
    .newsList-ttl {
        font-size: 1.6rem;
        line-height: 160%
    }
}

@media only screen and (max-width: 1239px) {

    .topNewsList-link::after,
    .newNewsList-link::after,
    .newsList-link::after {
        width: 12px;
        height: 12px
    }

    .topNewsList-marina,
    .newNewsList-marina,
    .newsList-marina {
        font-size: 1rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .topNewsList-date,
    .newNewsList-date,
    .newsList-date {
        font-size: 1rem;
        line-height: 160%
    }

    .topNewsList-ttl,
    .newNewsList-ttl,
    .newsList-ttl {
        font-size: 1.2rem;
        line-height: 160%
    }
}

.topNewsList-link {
    display: flex;
    align-items: center;
    color: #de1818
}

.topNewsList-ttl {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

@media print,
screen and (min-width: 1240px) {
    .topNewsList-link {
        gap: 16px;
        padding: 4px 0
    }

    .topNewsList-link::after {
        margin: 8px
    }
}

@media only screen and (max-width: 1239px) {
    .topNewsList-item {
        margin-top: 4px
    }

    .topNewsList-item:first-child {
        margin-top: 0
    }

    .topNewsList-link {
        gap: 8px
    }
}

.newNewsList-item {
    border-bottom: 1px solid #e6e6e6
}

.newNewsList-link {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    background: #fff;
    color: #363636
}

.newNewsList-link::after {
    position: absolute;
    top: 50%;
    right: 0;
    margin: 0 8px;
    transform: translateY(-50%)
}

.newNewsList-marina {
    color: #4a4a4a;
    flex: 1
}

.newNewsList-ttl {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis
}

.newNewsList.ss .newNewsList-link {
    background: rgba(255, 255, 255, .9)
}

.newNewsList.marina .newNewsList-link {
    background: #fff
}

@media print,
screen and (min-width: 1240px) {
    .newNewsList-link {
        justify-content: space-between;
        gap: 8px;
        padding: 24px 52px 24px 16px
    }

    .newNewsList-link>*:first-child {
        margin-left: 0
    }

    .newNewsList-date {
        width: 100%;
        text-align: right
    }

    .newNewsList-tip~.newNewsList-date {
        width: fit-content
    }

    .newNewsList-ttl {
        white-space: nowrap
    }
}

@media only screen and (max-width: 1239px) {
    .newNewsList {
        border-top: 1px solid #e6e6e6
    }

    .newNewsList-link {
        gap: 8px;
        padding: 16px 28px 16px 8px
    }

    .newNewsList-link>*:first-child {
        margin-left: 0
    }

    .newNewsList-marina {
        order: -1
    }

    .newNewsList-ttl {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        max-height: 3.2em
    }

    .newNewsList.marina .newNewsList-link {
        gap: 4px 8px
    }

    .newNewsList.marina .newNewsList-ttl {
        margin-top: 0;
        order: -1;
        -webkit-line-clamp: 1;
        max-height: 1.6em
    }
}

.newsList {
    border-top: 1px solid #e6e6e6
}

.newsList-item {
    background: #fff;
    border-bottom: 1px solid #e6e6e6
}

.newsList-link {
    display: flex;
    position: relative
}

.newsList-link::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.newsList-marina {
    order: 1
}

.newsList-ttl {
    order: 1
}

@media print,
screen and (min-width: 1240px) {
    .newsList-link {
        align-items: flex-start;
        gap: 8px 16px;
        padding: 32px 60px 32px 24px
    }

    .newsList-link::after {
        right: 24px
    }

    .newsList-date {
        width: 12em;
        margin-left: 64px;
        line-height: 175%
    }

    .newsList-tip~.newsList-date {
        margin-left: 0
    }

    .newsList-marina {
        flex: 1;
        line-height: 175%
    }

    .newsList.ss .newsList-ttl {
        flex: 1
    }

    .newsList.marina .newsList-link {
        flex-wrap: wrap
    }

    .newsList.marina .newsList-marina {
        width: calc(100% - 48px - 16px - 12em - 16px)
    }

    .newsList.marina:has(.newsList-marina) .newsList-ttl {
        padding-left: calc(64px + 10.5em + 16px)
    }

    .newsList.marina .newsList-ttl {
        width: 100%
    }
}

@media only screen and (max-width: 1239px) {
    .newsList-link {
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        padding: 16px 20px 16px 0
    }

    .newsList-link::after {
        right: 8px
    }

    .newsList-marina {
        width: 100%
    }

    .newsList-ttl {
        width: 100%
    }

    .newsList.marina .newsList-link {
        padding: 16px 28px 16px 8px
    }
}

.letterList {
    border-top: 1px solid #e6e6e6
}

.letterList-item {
    border-bottom: 1px solid #e6e6e6;
    background: rgba(255, 255, 255, .9)
}

.letterList-link {
    display: flex;
    position: relative
}

.letterList-link::after {
    position: absolute;
    top: 50%;
    right: 0;
    background: #5a5a5a;
    mask: url(/jp/assets/icon/icon-arrow_right.svg) center center/contain no-repeat;
    transform: translateY(-50%);
    content: ""
}

.letterList-img {
    aspect-ratio: 4/3;
    object-fit: cover
}

.letterList-body {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    overflow: hidden
}

.letterList-marina {
    flex: 1;
    font-weight: 700
}

.letterList-ttl {
    width: 100%;
    max-height: 3.2em;
    overflow: hidden;
    text-overflow: ellipsis
}

.letterList-marina+.letterList-ttl {
    white-space: nowrap
}

.letterList-link:hover .letterList-ttl {
    text-decoration: underline
}

@media print,
screen and (min-width: 1240px) {
    .letterList-link {
        align-items: center;
        gap: 16px;
        padding: 16px 52px 16px 16px
    }

    .letterList-link::after {
        margin: 0 8px;
        width: 20px;
        height: 20px
    }

    .letterList-img {
        width: 112px
    }

    .letterList-body {
        align-items: center
    }

    .letterList-marina {
        flex: 1;
        font-size: 1.4rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .letterList-date {
        font-size: 1.4rem;
        line-height: 160%;
        text-align: right
    }

    .letterList-ttl {
        order: 1;
        margin-top: 8px
    }
}

@media only screen and (max-width: 1239px) {
    .letterList-link {
        align-items: flex-start;
        gap: 8px;
        padding: 16px 20px 16px 0
    }

    .letterList-link::after {
        width: 12px;
        height: 12px
    }

    .letterList-img {
        width: 70px
    }

    .letterList-body {
        gap: 4px
    }

    .letterList-body>* {
        width: 100%
    }

    .letterList-marina {
        font-size: 1rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .letterList-date {
        font-size: 1rem;
        line-height: 160%
    }

    .letterList-ttl {
        font-size: 1.2rem;
        line-height: 160%
    }
}

.facilityList {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    line-height: 160%;
    line-height: 130%
}

@media print,
screen and (min-width: 1240px) {
    .facilityList {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {
    .facilityList {
        font-size: 1rem
    }
}

.facilityList>* {
    position: relative;
    padding-left: 12px
}

.facilityList>*::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 8px;
    background: #0371ee;
    border-radius: 50%;
    transform: translateY(-50%);
    content: ""
}

.dlList-item:not(:last-child) {
    border-bottom: 1px solid #e6e6e6
}

.dlList-link {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    padding: 16px 24px 16px 0
}

.dlList-link::after {
    position: absolute;
    top: 50%;
    right: 0;
    width: 16px;
    height: 16px;
    background: #5a5a5a;
    mask: url(/jp/assets/icon/icon-pdf.svg) center center/contain no-repeat;
    transform: translateY(-50%);
    content: ""
}

.dlList-link:hover::after {
    background: #0371ee
}

.dlList-ttl {
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em
}

@media print,
screen and (min-width: 1240px) {
    .dlList-ttl {
        font-size: 2rem
    }
}

@media only screen and (max-width: 1239px) {
    .dlList-ttl {
        font-size: 1.4rem
    }
}

.dlList-txt {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .dlList-txt {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .dlList-txt {
        font-size: 1.2rem
    }
}

.tabNav {
    display: flex;
    width: 100%
}

.tabNav-item {
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex: 1;
    position: relative;
    background: #f0f0f0;
    color: #8b8b8b;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition)
}

.tabNav-item:first-child {
    border-radius: 4px 0 0 4px
}

.tabNav-item:last-child {
    border-radius: 0 4px 4px 0
}

.tabNav-item.is-current,
.tabNav-item.slick-current {
    border-radius: 4px;
    background: #0371ee;
    color: #fff
}

.tabNav-item>* {
    transition: none
}

@media print,
screen and (min-width: 1240px) {
    .tabNav {
        margin-bottom: 16px;
        margin-bottom: 32px;
        padding: 2px 0
    }

    .tabNav-item {
        height: 50px;
        padding: 8px 32px;
        font-size: 1.4rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .tabNav-item.is-current {
        margin: -2px 0;
        height: 54px
    }

    .tabNav-item.is-current::before {
        display: none
    }

    .tabNav-item::before {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: #0371ee;
        opacity: 0;
        content: ""
    }

    .tabNav-item:hover::before {
        opacity: 1
    }

    .tabNav-item:first-child:hover::before {
        border-radius: 0 0 0 4px
    }

    .tabNav-item:last-child:hover::before {
        border-radius: 0 0 4px 0
    }
}

@media only screen and (max-width: 1239px) {
    .tabNav {
        margin-bottom: 8px;
        margin-bottom: 16px
    }

    .tabNav-item {
        height: 48px;
        padding: 8px 16px;
        font-size: 1rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .tabNav-item::after {
        position: absolute;
        width: 6px;
        height: 5px;
        bottom: 0;
        background: #0371ee;
        clip-path: polygon(0 0, 50% 100%, 100% 0);
        opacity: 0;
        z-index: -1;
        content: ""
    }

    .tabNav-item.is-current::after,
    .tabNav-item.slick-current::after {
        bottom: -5px;
        opacity: 1
    }
}

.mapZoom {
    position: relative;
    width: fit-content;
    background: #f7f7f7;
    overflow: hidden
}

.mapZoom-inner {
    text-align: center;
    vertical-align: middle
}

.mapZoom-imgwrap {
    display: inline-block;
    width: fit-content;
    transition: all .3s ease-out
}

.mapZoom img {
    width: auto;
    max-width: 100%;
    max-height: 75vh;
    pointer-events: none
}

.mapZoom-control {
    display: flex;
    flex-direction: column;
    gap: 1px;
    position: absolute;
    right: 8px;
    bottom: 8px;
    border-radius: 2px;
    overflow: hidden
}

.mapZoom-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, .3);
    cursor: pointer
}

.mapZoom-btn::before {
    display: block;
    width: 20px;
    height: 20px;
    background: #fff;
    content: ""
}

.mapZoom-btn.icon-plus::before {
    mask: url(/jp/assets/icon/icon-add.svg) center center/contain no-repeat
}

.mapZoom-btn.icon-minus::before {
    mask: url(/jp/assets/icon/icon-minus.svg) center center/contain no-repeat
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    flex-shrink: 0;
    top: 0;
    right: 0;
    left: 0;
    border-bottom: 1px solid #e6e6e6;
    background: #fff;
    z-index: 400
}

@media print,
screen and (min-width: 1240px) {
    .header {
        gap: 32px;
        height: 64px;
        padding: 8px calc((100% - 1440px)/2) 8px max(8px, (100% - 1440px)/2 + 8px)
    }

    .header:not(:has(.menuBtn)) {
        padding: 8px calc((100% - 1440px)/2) 8px max(16px, (100% - 1440px)/2 + 16px)
    }
}

@media only screen and (max-width: 1239px) {
    .header {
        gap: 4px;
        height: 45px;
        padding: 8px max(0px, (100% - 720px)/2)
    }

    .header:not(:has(.menuBtn)) {
        padding: 8px calc((100% - 1440px)/2) 8px max(16px, (100% - 1440px)/2 + 16px)
    }
}

.header-menu {
    order: 1;
    display: flex;
    align-items: center
}

@media print,
screen and (min-width: 1240px) {
    .header-menu {
        gap: 32px
    }
}

@media only screen and (max-width: 1239px) {
    .header-menu {
        gap: 4px
    }
}

@media print,
screen and (min-width: 1240px) {
    .header .ssLogo {
        width: 130px
    }
}

@media only screen and (max-width: 1239px) {
    .header .ssLogo {
        width: 98px
    }
}

.header-mypage {
    position: relative;
    order: 3;
    display: flex;
    justify-content: center;
    align-items: center
}

.header-mypage .fillBtn {
    width: auto
}

@media print,
screen and (min-width: 1240px) {
    .header-mypage {
        gap: 32px;
        padding-right: 32px
    }
}

@media only screen and (max-width: 1239px) {
    .header-mypage {
        gap: 4px
    }
}

.header .menuBtn,
.header .mypageBtn {
    display: block;
    font-size: 9px;
    font-family: "Roboto", sans-serif;
    line-height: 120%;
    letter-spacing: -0.12em;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer
}

.header .menuBtn::before,
.header .mypageBtn::before {
    display: block;
    margin: 0 auto;
    mask: url(/jp/assets/icon/icon-menu.svg) center center/contain no-repeat;
    content: ""
}

@media print,
screen and (min-width: 1240px) {

    .header .menuBtn::before,
    .header .mypageBtn::before {
        width: 32px;
        height: 32px
    }
}

@media only screen and (max-width: 1239px) {

    .header .menuBtn::before,
    .header .mypageBtn::before {
        width: 24px;
        height: 24px
    }
}

.header .menuBtn {
    width: 48px;
    color: #4a4a4a
}

.header .menuBtn::before {
    background: #5a5a5a;
    mask: url(/jp/assets/icon/icon-menu.svg) center center/contain no-repeat
}

.header .mypageBtn {
    color: #0371ee
}

.header .mypageBtn::before {
    background: #0371ee;
    mask: url(/jp/assets/icon/icon-account_circle.svg) center center/contain no-repeat
}

@media print,
screen and (min-width: 1240px) {
    .header .mypageBtn {
        width: 96px
    }
}

@media only screen and (max-width: 1239px) {
    .header .mypageBtn {
        width: 48px
    }
}

.header .loginBtn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0371ee;
    color: #fff
}

.header .loginBtn:hover {
    background: #0250c5
}

@media print,
screen and (min-width: 1240px) {
    .header .loginBtn {
        height: 64px;
        padding: 16px;
        font-size: 1.6rem;
        line-height: 130%;
        letter-spacing: .02em;
        font-weight: 600
    }
}

@media only screen and (max-width: 1239px) {
    .header .loginBtn {
        height: 44px;
        margin-left: 8px;
        padding: 8px 12px;
        font-size: 1.2rem;
        line-height: 130%;
        letter-spacing: .02em;
        font-weight: 600
    }
}

@media only screen and (max-width: 1239px) {
    .header .memberName {
        flex: 1;
        color: #4a4a4a;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 9px;
        line-height: 120%;
        letter-spacing: -0.18px
    }
}

@media print,
screen and (min-width: 1240px) {
    .header .ymcLogo {
        display: block;
        width: 112px
    }
}

@media print,
screen and (min-width: 1240px) {
    .loginInfo {
        display: flex;
        position: sticky;
        top: 64px;
        height: 48px;
        padding: 12px calc((100% - 1080px)/2);
        background: #f8fdff;
        align-items: center;
        gap: 24px;
        align-self: stretch;
        justify-content: space-between;
        z-index: 400
    }

    .loginInfo-notice .lineBtn {
        width: fit-content
    }

    .loginInfo-data {
        display: flex;
        gap: 24px
    }

    .loginInfo-name {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #0065ab;
        font-size: 1.2rem;
        line-height: 160%
    }

    .loginInfo-name[data-rank]::before {
        width: 24px;
        height: 24px;
        content: ""
    }

    .loginInfo-name[data-rank=スタンダード]::before {
        background: url(/jp/assets/img/mypage/rank-standard.svg) center center/contain no-repeat
    }

    .loginInfo-name[data-rank=ゴールド]::before {
        background: url(/jp/assets/img/mypage/rank-gold.svg) center center/contain no-repeat
    }

    .loginInfo-name[data-rank=プレミア]::before {
        background: url(/jp/assets/img/mypage/rank-premier.svg) center center/contain no-repeat
    }
}

.topNews.ss {
    background: #fff
}

.topNews.marina {
    background: #f8fdff
}

@media print,
screen and (min-width: 1240px) {
    .topNews {
        padding: 8px calc((100% - 1080px)/2)
    }
}

@media only screen and (max-width: 1239px) {
    .topNews {
        padding: 8px max(8px, (100% - 720px)/2)
    }
}

.pankuzu {
    background: #fff;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.pankuzu::-webkit-scrollbar,
.pankuzu::-webkit-scrollbar {
    display: none
}

@media print,
screen and (min-width: 1240px) {
    .pankuzu {
        max-width: 1080px;
        margin: 0 auto;
        padding: 16px 0
    }
}

@media only screen and (max-width: 1239px) {
    .pankuzu {
        max-width: calc(720px + 32px);
        margin: 0 auto;
        padding: 8px 0 8px 16px
    }
}

.pankuzuList {
    display: flex;
    align-items: center;
    gap: 4px
}

.pankuzuList-item {
    white-space: nowrap
}

.pankuzuList-item.is-current {
    color: #acacac;
    text-decoration: none
}

.pankuzuList-link {
    display: flex;
    align-items: center;
    gap: 4px
}

.pankuzuList-link::after {
    width: 16px;
    height: 16px;
    background: #0371ee;
    mask: url(/jp/assets/icon/icon-arrow_right.svg) center center/contain no-repeat;
    content: ""
}

@media print,
screen and (min-width: 1240px) {
    .pankuzuList-item {
        font-size: 1.2rem;
        line-height: 130%;
        text-decoration: underline
    }

    .pankuzuList-item:hover {
        text-decoration: none
    }
}

@media only screen and (max-width: 1239px) {
    .pankuzuList-item {
        font-size: 1rem;
        line-height: 130%;
        text-decoration: underline
    }

    .pankuzuList-item:hover {
        text-decoration: none
    }

    .pankuzuList-item.is-current {
        padding-right: 16px
    }
}

.nav-wrap {
    display: none
}

.nav-wrap.is-open {
    display: block
}

.nav-wrap[aria-hidden=false] .menuNav {
    animation: navLeftIn .3s cubic-bezier(0, 0, 0.2, 1)
}

.nav-wrap[aria-hidden=false] .mypageNav {
    animation: navRightIn .3s cubic-bezier(0, 0, 0.2, 1)
}

.nav-wrap[aria-hidden=true] .menuNav {
    animation: navLeftOut .3s cubic-bezier(0, 0, 0.2, 1)
}

.nav-wrap[aria-hidden=true] .mypageNav {
    animation: navRightOut .3s cubic-bezier(0, 0, 0.2, 1)
}

.nav-wrap .nav,
.nav-wrap .nav-overlay {
    will-change: transform
}

@keyframes navLeftIn {
    from {
        transform: translateX(-100%)
    }

    to {
        transform: translateX(0)
    }
}

@keyframes navLeftOut {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-100%)
    }
}

@keyframes navRightIn {
    from {
        transform: translateX(100%)
    }

    to {
        transform: translateX(0)
    }
}

@keyframes navRightOut {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(100%)
    }
}

.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500
}

.menuNav,
.mypageNav {
    position: absolute;
    display: flex;
    top: 0;
    bottom: 0;
    transition: var(--transition)
}

.menuNav-inner,
.mypageNav-inner {
    height: 100%;
    background: #fff;
    overflow-y: scroll;
    scrollbar-width: none;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, .25)
}

.menuNav-header,
.mypageNav-header {
    display: flex;
    position: sticky;
    top: 0;
    padding: 12px 16px;
    border-bottom: 1px solid #e6e6e6;
    background: #fff;
    z-index: 300
}

.menuNav-header .textBtn,
.mypageNav-header .textBtn {
    margin: 0
}

.menuNav-header .textBtn.icon-lt-account_circle::before,
.menuNav-header .textBtn.icon-rt-menu::after,
.mypageNav-header .textBtn.icon-lt-account_circle::before,
.mypageNav-header .textBtn.icon-rt-menu::after {
    width: 24px;
    height: 24px
}

@media print,
screen and (min-width: 1240px) {

    .menuNav-close,
    .mypageNav-close {
        padding: 8px 16px
    }
}

@media only screen and (max-width: 1239px) {

    .menuNav-close,
    .mypageNav-close {
        padding: 8px 4px
    }
}

.menuNav {
    flex-flow: row-reverse;
    left: 0
}

.menuNav-header {
    justify-content: end
}

@media print,
screen and (min-width: 1240px) {
    .menuNav {
        padding-right: 64px
    }

    .menuNav-inner {
        width: 952px
    }

    .menuNav-body {
        display: flex;
        flex-wrap: wrap;
        gap: 16px 40px;
        padding: 24px 32px
    }

    .menuNav-body>* {
        width: calc(33.33% - 26.66px)
    }

    .menuNav-other .navList-item {
        margin-top: 24px
    }

    .menuNav-beginner {
        order: 3
    }

    .menuNav-know {
        order: 3
    }

    .menuNav-enjoy {
        order: 3
    }

    .menuNav-bnr {
        order: 4;
        width: 100%;
        padding-top: 16px
    }

    .menuNav .fillBtn {
        letter-spacing: -0.04em
    }

    .menuNav [data-accordion-btn] {
        pointer-events: none !important;
        user-select: none !important
    }

    .menuNav [data-accordion-btn]::after {
        display: none
    }

    .menuNav [data-accordion-content] {
        display: block !important
    }
}

@media only screen and (max-width: 1239px) {
    .menuNav-inner {
        width: 272px
    }

    .menuNav-body {
        padding: 16px 8px
    }

    .menuNav .fillBtn {
        margin-bottom: 16px;
        width: 100%
    }
}

.mypageNav {
    right: 0
}

.mypageNav-ttl {
    padding: 12px 16px;
    background: #fcfaf6;
    font-size: 1.4rem;
    line-height: 130%;
    letter-spacing: .02em;
    font-weight: 700
}

.mypageNav-body {
    padding: 0 16px 16px 24px
}

@media print,
screen and (min-width: 1240px) {
    .mypageNav-inner {
        width: 320px
    }
}

@media only screen and (max-width: 1239px) {
    .mypageNav-inner {
        width: 272px
    }
}

.navAccBtn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    padding: 14px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 130%;
    letter-spacing: .02em;
    font-weight: 700
}

.navAccBtn::after {
    width: 16px;
    height: 16px;
    background: #5a5a5a;
    transition: none;
    mask: url(/jp/assets/icon/icon-accordion_open.svg) center center/contain no-repeat, url(/jp/assets/icon/icon-accordion_close.svg) left 16px center/contain no-repeat;
    content: ""
}

.navAccBtn:hover {
    background: #eef4fa
}

.js-accordion.is-open .navAccBtn::after {
    mask: url(/jp/assets/icon/icon-accordion_open.svg) left 16px center/contain no-repeat, url(/jp/assets/icon/icon-accordion_close.svg) center center/contain no-repeat
}

.navList-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    width: 100%;
    border-radius: 4px;
    color: #363636
}

.navList-link::after {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background: #5a5a5a;
    mask: url(/jp/assets/icon/icon-arrow_right.svg) center center/contain no-repeat;
    content: ""
}

.navList-link[target=_blank]::after {
    mask-image: url(/jp/assets/icon/icon-link.svg)
}

.navList-link.icon-rt-movie::after {
    mask-image: url(/jp/assets/icon/icon-movie.svg)
}

.navList-link.icon-rt-modal::after {
    mask-image: url(/jp/assets/icon/icon-modal.svg)
}

.navList-link:hover {
    background: #eef4fa
}

.navList:not(.child) .navList-link {
    padding: 14px 12px;
    font-size: 1.4rem;
    line-height: 130%;
    letter-spacing: .02em;
    font-weight: 700
}

.navList.child .navList-item:first-child {
    margin-top: 4px
}

.navList.child .navList-link {
    padding: 12px 12px 12px 24px;
    font-size: 1.2rem;
    line-height: 130%
}

.navList.child .navList-link:hover {
    text-decoration: underline
}

.navBnr {
    display: flex;
    flex-wrap: wrap;
    margin-right: auto;
    margin-left: auto
}

.navBnr-link {
    display: block
}

.navBnr-link:hover {
    opacity: .7
}

@media print,
screen and (min-width: 1240px) {
    .navBnr {
        gap: 16px;
        max-width: 952px
    }

    .navBnr-item {
        width: calc(25% - 12px)
    }
}

@media only screen and (max-width: 1239px) {
    .navBnr {
        justify-content: center;
        gap: 8px;
        max-width: 432px;
        margin-top: 16px;
        margin-bottom: 16px
    }

    .navBnr-item {
        max-width: 232px
    }

    .navBnr.sp-col-2 {
        margin-top: 0;
        margin-bottom: 0
    }

    .navBnr.sp-col-2 .navBnr-item {
        max-width: min(232px, 50% - 4px)
    }
}

.pageNav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px
}

.pageNav-prev,
.pageNav-next {
    width: 24px;
    height: 24px;
    background: #0371ee;
    font-size: 0;
    cursor: pointer
}

.pageNav-prev.is-disable,
.pageNav-next.is-disable {
    pointer-events: none;
    background: #acacac
}

.pageNav-prev {
    mask: url(/jp/assets/icon/icon-arrow_left.svg) center center/contain no-repeat
}

.pageNav-next {
    mask: url(/jp/assets/icon/icon-arrow_right.svg) center center/contain no-repeat
}

.pageNav-num {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 1.6rem;
    line-height: 160%;
    white-space: nowrap
}

.pageNav-num select {
    font-size: 1.6rem;
    line-height: 160%;
    line-height: 130%
}

@media print,
screen and (min-width: 1240px) {
    .subnavPopup {
        position: fixed;
        top: 232px;
        right: 0;
        z-index: 200
    }

    .subnavPopup>*:first-child {
        border-top-left-radius: 4px
    }

    .subnavPopup>*:first-child::before {
        border-top-left-radius: 4px
    }

    .subnavPopup>*:last-child {
        border-bottom-left-radius: 4px
    }

    .subnavPopup>*:last-child::before {
        border-bottom-left-radius: 4px
    }
}

.subnavPopup .reserveBtn {
    display: flex;
    align-items: center;
    color: #fff;
    font-weight: 700;
    line-height: 130%
}

@media print,
screen and (min-width: 1240px) {
    .subnavPopup .reserveBtn {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .subnavPopup .reserveBtn {
        font-size: 1.2rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .subnavPopup .reserveBtn {
        justify-content: center;
        position: relative;
        width: 100px;
        height: 100px;
        background: #0250c5;
        text-align: center
    }

    .subnavPopup .reserveBtn::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #0371ee;
        content: ""
    }

    .subnavPopup .reserveBtn>* {
        position: relative;
        z-index: 1
    }

    .subnavPopup .reserveBtn:hover::before {
        opacity: 0
    }
}

@media only screen and (max-width: 1239px) {
    .subnavPopup .reserveBtn {
        justify-content: space-between;
        gap: 4;
        width: 100%;
        padding: 8px max(12px, (100% - 720px)/2);
        background: #0371ee
    }

    .subnavPopup .reserveBtn::after {
        width: 12px;
        height: 12px;
        background: #fff;
        mask: url(/jp/assets/icon/icon-arrow_right.svg) center center/contain no-repeat;
        content: ""
    }

    .subnavPopup .reserveBtn:hover {
        background: #0250c5
    }
}

.subnavPopup .researchBtn {
    position: relative;
    background: #d14b00;
    font-weight: 700;
    line-height: 130%
}

@media print,
screen and (min-width: 1240px) {
    .subnavPopup .researchBtn {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .subnavPopup .researchBtn {
        font-size: 1.2rem
    }
}

.subnavPopup .researchBtn::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(91deg, #F27400 9.19%, #DF3600 88.9%);
    content: ""
}

.subnavPopup .researchBtn>* {
    position: relative;
    z-index: 1
}

.subnavPopup .researchBtn:hover::before {
    opacity: 0
}

@media print,
screen and (min-width: 1240px) {
    .subnavPopup .researchBtn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
        height: 100px;
        color: #fff;
        text-align: center
    }
}

@media only screen and (max-width: 1239px) {
    .subnavPopup .researchBtn {
        position: fixed;
        right: 8px;
        bottom: 100px;
        z-index: 200;
        display: block;
        border-radius: 50%;
        box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, .1);
        overflow: hidden;
        z-index: 200
    }
}

.loginPopup {
    position: fixed;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, .1);
    overflow: hidden;
    z-index: 200
}

.loginPopup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ea7000
}

.loginPopup-ttl {
    color: #fff;
    font-weight: 700
}

.loginPopup-body a {
    color: #0371ee;
    text-decoration: underline
}

.loginPopup-body a:hover {
    text-decoration: none
}

@media print,
screen and (min-width: 1240px) {
    .loginPopup {
        bottom: 30px;
        left: 30px;
        width: 300px
    }

    .loginPopup-header {
        padding: 16px
    }

    .loginPopup-ttl {
        font-size: 1.6rem;
        line-height: 160%
    }

    .loginPopup-body {
        padding: 16px;
        font-size: 1.6rem;
        line-height: 160%
    }
}

@media only screen and (max-width: 1239px) {
    .loginPopup {
        bottom: 8px;
        left: 8px;
        width: 224px
    }

    .loginPopup-header {
        padding: 8px
    }

    .loginPopup-ttl {
        font-size: 1rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .loginPopup .closeBtn::before {
        width: 12px;
        height: 12px
    }

    .loginPopup-body {
        padding: 8px 8px 16px;
        font-size: 1rem;
        line-height: 160%;
        line-height: 130%
    }
}

.ul-widget-main-window {
    z-index: 499 !important
}

.ul-widget-main-window.ul-widget-hide {
    z-index: 200 !important
}

@media only screen and (max-width: 1239px) {
    .ul-widget-main-window.ul-widget-hide {
        right: 4px !important;
        bottom: 80px !important
    }
}

.pagetop {
    position: fixed;
    right: 8px;
    bottom: 8px;
    z-index: 200
}

.pagetop .pagetopBtn {
    display: block;
    border-radius: 50%;
    box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, .1);
    cursor: pointer
}

.pagetop .pagetopBtn:hover {
    transform: translateY(-10px)
}

.modal-wrap {
    display: none
}

.modal-wrap.is-open {
    display: block
}

.modal-wrap[aria-hidden=false] .modal-overlay {
    animation: mmfadeIn .3s cubic-bezier(0, 0, 0.2, 1)
}

.modal-wrap[aria-hidden=false] .modal {
    animation: mmslideIn .3s cubic-bezier(0, 0, 0.2, 1)
}

.modal-wrap[aria-hidden=true] .modal-overlay {
    animation: mmfadeOut .3s cubic-bezier(0, 0, 0.2, 1)
}

.modal-wrap[aria-hidden=true] .modal {
    animation: mmslideOut .3s cubic-bezier(0, 0, 0.2, 1)
}

.modal-wrap .modal,
.modal-wrap .modal-overlay {
    will-change: transform
}

@keyframes mmfadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes mmfadeOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes mmslideIn {
    from {
        transform: translateY(20px)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes mmslideOut {
    from {
        transform: translateY(0)
    }

    to {
        transform: translateY(-20px)
    }
}

.modal {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    max-width: 712px;
    border-radius: 2px;
    background: #fff
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 500
}

.modal-close {
    position: absolute;
    top: -8px;
    right: 0;
    cursor: pointer;
    transform: translateY(-100%)
}

.modal-close::before {
    display: block;
    background: #fff;
    mask: url(/jp/assets/icon/icon-close.svg) center center/contain no-repeat;
    content: ""
}

.modal-icon {
    position: absolute;
    top: 0;
    left: 50%;
    width: 64px;
    height: 64px;
    transform: translate(-50%, -50%)
}

.modal-icon.icon-caution {
    background: url(/jp/assets/icon/icon-caution.svg) center center/contain no-repeat
}

.modal-icon.icon-complete {
    background: url(/jp/assets/icon/icon-complete.svg) center center/contain no-repeat
}

.modal-header {
    font-weight: 700;
    text-align: center;
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .modal-header {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .modal-header {
        font-size: 1.5rem
    }
}

.modal-content {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .modal-content {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .modal-content {
        font-size: 1.5rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .modal {
        max-height: calc(100dvh - 128px - 40px);
        margin-top: 40px
    }

    .modal-overlay {
        padding: 64px 16px
    }

    .modal-close::before {
        width: 32px;
        height: 32px
    }

    .modal-btns {
        justify-content: center;
        gap: 16px
    }
}

@media only screen and (max-width: 1239px) {
    .modal {
        max-height: calc(100dvh - 64px - 32px);
        margin-top: 32px
    }

    .modal-overlay {
        padding: 32px 16px
    }

    .modal-close::before {
        width: 24px;
        height: 24px
    }

    .modal-btns {
        flex-wrap: wrap;
        gap: 8px
    }

    .modal-btns>* {
        width: 100%
    }
}

:not(.modal-inner)>.modal-header {
    padding: 16px 12px 8px;
    border-bottom: 1px solid #e6e6e6;
    text-align: center
}

:not(.modal-inner)>.modal-content {
    overflow-y: auto;
    flex: 1;
    scroll-behavior: smooth
}

:not(.modal-inner)>.modal-content::-webkit-scrollbar {
    border-radius: 0 2px 2px 0
}

:not(.modal-inner)>.modal-content::-webkit-scrollbar-thumb {
    border-radius: 24px;
    border: 8px solid #fff;
    background: #d9d9d9
}

:not(.modal-inner)>.modal-footer {
    padding: 16px 12px;
    border-top: 1px solid #e6e6e6
}

@media print,
screen and (min-width: 1240px) {
    :not(.modal-inner)>.modal-content {
        padding: 24px
    }

    :not(.modal-inner)>.modal-content::-webkit-scrollbar {
        width: 24px
    }
}

@media only screen and (max-width: 1239px) {
    :not(.modal-inner)>.modal-content {
        padding: 16px
    }

    :not(.modal-inner)>.modal-content::-webkit-scrollbar {
        width: 20px
    }
}

.modal-inner {
    height: 100%;
    border-radius: 2px;
    overflow-y: auto
}

.modal-inner::-webkit-scrollbar {
    border-radius: 0 2px 2px 0
}

.modal-inner::-webkit-scrollbar-thumb {
    border-radius: 24px;
    border: 8px solid #fff;
    background: #d9d9d9
}

@media print,
screen and (min-width: 1240px) {
    .modal-inner {
        max-height: calc(100dvh - 128px);
        padding: 48px 32px 32px
    }

    .modal-inner::-webkit-scrollbar {
        width: 24px
    }

    .modal-inner .modal-header {
        margin-bottom: 16px
    }

    .modal-inner .modal-footer {
        margin-top: 32px
    }
}

@media only screen and (max-width: 1239px) {
    .modal-inner {
        max-height: calc(100dvh - 64px);
        padding: 48px 16px 32px
    }

    .modal-inner::-webkit-scrollbar {
        width: 20px
    }

    .modal-inner .modal-header {
        margin-bottom: 8px
    }

    .modal-inner .modal-footer {
        margin-top: 16px
    }
}

.modalBtnBox {
    display: flex
}

@media print,
screen and (min-width: 1240px) {
    .modalBtnBox {
        justify-content: center;
        gap: 16px
    }
}

@media only screen and (max-width: 1239px) {
    .modalBtnBox {
        flex-wrap: wrap;
        gap: 8px
    }

    .modalBtnBox>* {
        width: 100%
    }
}

.modalDl.size-xs {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .modalDl.size-xs {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {
    .modalDl.size-xs {
        font-size: 1rem
    }
}

.modalDl-ttl {
    font-size: calc(1em + .2rem);
    font-weight: 700
}

@media print,
screen and (min-width: 1240px) {
    .modalDl-content+.modalDl-ttl {
        margin-top: 32px
    }

    .modalDl-content {
        margin-top: 16px;
        margin-left: 16px
    }
}

@media only screen and (max-width: 1239px) {
    .modalDl-content+.modalDl-ttl {
        margin-top: 24px
    }

    .modalDl-content {
        margin-top: 8px
    }
}

.modalCancelPolicy-ttl {
    display: block;
    margin-bottom: 8px
}

.modalCancelPolicy-content {
    border: 1px solid #e6e6e6
}

.modalCancelPolicy-content>*+* {
    margin-top: 4px
}

@media print,
screen and (min-width: 1240px) {
    .modalCancelPolicy-content {
        padding: 16px
    }
}

@media only screen and (max-width: 1239px) {
    .modalCancelPolicy-content {
        padding: 8px
    }
}

.ssNoticeModal-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px !important
}

.ssNoticeModal-date {
    line-height: 160%;
    font-weight: 400
}

@media print,
screen and (min-width: 1240px) {
    .ssNoticeModal-date {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .ssNoticeModal-date {
        font-size: 1.2rem
    }
}

.ssNoticeModal-ttl {
    width: 100%;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em;
    text-align: left
}

@media print,
screen and (min-width: 1240px) {
    .ssNoticeModal-ttl {
        font-size: 3rem
    }
}

@media only screen and (max-width: 1239px) {
    .ssNoticeModal-ttl {
        font-size: 1.8rem
    }
}

.ssNoticeModal-txt {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .ssNoticeModal-txt {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .ssNoticeModal-txt {
        font-size: 1.5rem
    }
}

.ssNoticeModal-txt a {
    color: #0065ab;
    text-decoration: underline
}

.ssNoticeModal-txt a:hover {
    text-decoration: none
}

.ssNoticeModal-txt u {
    text-decoration: underline
}

.ssNoticeModal-pdf {
    display: flex;
    flex-wrap: wrap
}

.ssNoticeModal-pdf .lineBtn {
    width: 100%
}

@media print,
screen and (min-width: 1240px) {
    .ssNoticeModal-pdf {
        gap: 16px;
        margin-top: 32px
    }

    .ssNoticeModal-pdf>* {
        width: 100%
    }

    .ssNoticeModal .lineBtn.icon-lt-pdf::before,
    .ssNoticeModal .lineBtn::after {
        width: 24px !important;
        height: 24px !important
    }
}

@media only screen and (max-width: 1239px) {
    .ssNoticeModal-inner {
        padding-top: 24px
    }

    .ssNoticeModal-pdf {
        gap: 8px;
        margin-top: 24px
    }

    .ssNoticeModal-pdf>* {
        width: 100%
    }

    .ssNoticeModal .lineBtn.icon-lt-pdf::before,
    .ssNoticeModal .lineBtn::after {
        width: 16px !important;
        height: 16px !important
    }
}

.marinaNoticeModal-img {
    text-align: center
}

.marinaNoticeModal-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 8px;
    border-bottom: 1px solid #e6e6e6
}

.marinaNoticeModal-ttl {
    line-height: 130%;
    letter-spacing: .02em;
    font-weight: 700
}

@media print,
screen and (min-width: 1240px) {
    .marinaNoticeModal-ttl {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .marinaNoticeModal-ttl {
        font-size: 1.5rem
    }
}

.marinaNoticeModal-txt {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .marinaNoticeModal-txt {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .marinaNoticeModal-txt {
        font-size: 1.5rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .marinaNoticeModal-img {
        margin-bottom: 32px
    }

    .marinaNoticeModal-header {
        gap: 8px;
        margin-bottom: 16px
    }

    .marinaNoticeModal-date {
        font-size: 1.4rem;
        line-height: 160%
    }
}

@media only screen and (max-width: 1239px) {
    .marinaNoticeModal-img {
        margin-bottom: 16px
    }

    .marinaNoticeModal-header {
        gap: 4px 8px;
        margin-bottom: 8px
    }

    .marinaNoticeModal-date {
        font-size: 1rem;
        line-height: 160%
    }
}

.firstGuideModal {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .firstGuideModal {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .firstGuideModal {
        font-size: 1.5rem
    }
}

.firstGuideModal-subttl {
    margin-bottom: 8px;
    font-weight: 700
}

.firstGuideModal-btn {
    margin-top: 16px;
    text-align: center
}

.firstGuideModal-btn #firstGuide-movie-check:not(:disabled)+* {
    color: #0371ee
}

@media print,
screen and (min-width: 1240px) {
    .firstGuideModal-section {
        margin-top: 24px
    }
}

@media only screen and (max-width: 1239px) {
    .firstGuideModal-section {
        margin-top: 16px
    }
}

.checkinGuideModal {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .checkinGuideModal {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .checkinGuideModal {
        font-size: 1.5rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .checkinGuideModal-section {
        margin-top: 24px
    }
}

@media only screen and (max-width: 1239px) {
    .checkinGuideModal-section {
        margin-top: 16px
    }
}
.marinaBoatModal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 10px;
    text-align: left
}

.marinaBoatModal .modal-header .textBtn {
    margin: 0 0 0 auto;
    font-weight: 400
}

.footer {
    position: relative;
    z-index: 100
}

@media print,
screen and (min-width: 1240px) {
    .footer {
        margin-top: 48px;
        padding: 64px 0 32px
    }
}

@media only screen and (max-width: 1239px) {
    .footer {
        margin-top: 32px;
        padding: max(97px, 18%) 0 0
    }
}

@media print,
screen and (min-width: 1240px) {

    .footer::before,
    .footer::after,
    .footer-inner::before,
    .footer-inner::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        content: ""
    }

    .footer::before {
        background: url(/jp/assets/img/footer/bg-footer_4.svg) center center/100% 100% no-repeat;
        z-index: -4
    }

    .footer::after {
        background: url(/jp/assets/img/footer/bg-footer_3.svg) left 60% center/auto 100% no-repeat;
        mix-blend-mode: overlay;
        z-index: -3
    }

    .footer-inner::before {
        background: url(/jp/assets/img/footer/bg-footer_2.svg) center center/100% 100% no-repeat;
        z-index: -2
    }

    .footer-inner::after {
        background: url(/jp/assets/img/footer/bg-footer_1.svg) left 31% center/auto 100% no-repeat;
        mix-blend-mode: overlay;
        z-index: -1
    }
}

@media only screen and (max-width: 1239px) {
    .footer {
        background: url(/jp/assets/img/footer/bg-footer_sp.svg) center top/cover no-repeat
    }
}

@media print,
screen and (min-width: 1240px) {
    .footer-inner {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        position: static;
        width: 100%;
        padding: 0 max(50px, (100% - 1440px)/2 + 50px);
        z-index: 1
    }
}

@media only screen and (max-width: 1239px) {
    .footer-inner {
        padding: 0 max(16px, (100% - 720px)/2) 96px
    }

    .footer-inner:not(:has(.hotlineInfo)) {
        padding-bottom: 16px
    }
}

.footer-logo {
    margin-bottom: 32px
}

@media print,
screen and (min-width: 1240px) {
    .footer-logo {
        width: 100%;
        order: 0
    }
}

@media only screen and (max-width: 1239px) {
    .footer-logo {
        text-align: center
    }
}

.footer .ssLogo {
    display: inline-block
}

@media print,
screen and (min-width: 1240px) {
    .footer .ssLogo {
        width: 272px
    }
}

@media only screen and (max-width: 1239px) {
    .footer .ssLogo {
        width: 132px
    }
}

@media print,
screen and (min-width: 1240px) {
    .footer-hotline {
        order: 2;
        padding: 0 80px;
        background: url(/jp/assets/img/footer/bg-footer_fish.svg) right bottom no-repeat
    }
}

.footer .hotlineInfo {
    padding: 16px 32px;
    border: 1px solid #e6e6e6;
    color: #fff;
    font-weight: 700;
    text-align: center
}

.footer .hotlineInfo-name {
    display: block
}

.footer .hotlineInfo-number {
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em
}

@media print,
screen and (min-width: 1240px) {
    .footer .hotlineInfo-number {
        font-size: 3rem
    }
}

@media only screen and (max-width: 1239px) {
    .footer .hotlineInfo-number {
        font-size: 1.8rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .footer .hotlineInfo {
        width: 436px
    }

    .footer .hotlineInfo-name {
        font-size: 1.8rem;
        line-height: 160%
    }

    .footer .hotlineInfo-number {
        pointer-events: none
    }

    .footer .hotlineInfo-time {
        font-size: 1.6rem;
        line-height: 160%;
        font-weight: 400
    }
}

@media only screen and (max-width: 1239px) {
    .footer .hotlineInfo-name {
        font-size: 1.5rem;
        line-height: 160%
    }

    .footer .hotlineInfo-number {
        font-size: 1.6rem
    }

    .footer .hotlineInfo-time {
        font-size: 1.2rem;
        line-height: 160%
    }
}

@media print,
screen and (min-width: 1240px) {
    .footer-link {
        order: 3;
        width: 100%;
        transform: translateY(-100%)
    }
}

@media only screen and (max-width: 1239px) {
    .footer-link {
        padding: 32px 0
    }
}

.footer .footerLink {
    display: flex
}

.footer .footerLink-link {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    font-weight: 700;
    line-height: 130%
}

@media print,
screen and (min-width: 1240px) {
    .footer .footerLink-link {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .footer .footerLink-link {
        font-size: 1.4rem
    }
}

.footer .footerLink-link[target=_blank]::after {
    background: #fff;
    mask: url(/jp/assets/icon/icon-link.svg) center center/contain no-repeat;
    content: ""
}

.footer .footerLink-link:hover {
    text-decoration: underline
}

@media print,
screen and (min-width: 1240px) {
    .footer .footerLink {
        align-items: center;
        gap: 32px
    }

    .footer .footerLink-link[target=_blank]::after {
        width: 16px;
        height: 16px
    }
}

@media only screen and (max-width: 1239px) {
    .footer .footerLink {
        flex-direction: column;
        gap: 12px
    }

    .footer .footerLink-link {
        width: fit-content;
        font-weight: 500
    }

    .footer .footerLink-link[target=_blank]::after {
        width: 12px;
        height: 12px
    }
}

@media print,
screen and (min-width: 1240px) {
    .footer-nav {
        position: absolute;
        order: 4;
        bottom: 32px
    }
}

@media only screen and (max-width: 1239px) {
    .footer-nav {
        position: relative;
        padding: 32px 0 16px
    }

    .footer-nav::after {
        position: absolute;
        top: 32px;
        right: 24px;
        width: 25px;
        height: 7px;
        background: #d4e1f3;
        mask: url(/jp/assets/img/footer/bg-footer_fish.svg) center center/contain no-repeat;
        content: ""
    }
}

.footer .footerNav-link {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    font-size: 1.2rem;
    line-height: 130%;
    text-decoration: underline
}

.footer .footerNav-link:hover {
    text-decoration: none
}

.footer .footerNav-link[target=_blank]::after {
    width: 12px;
    height: 12px;
    background: #fff;
    mask: url(/jp/assets/icon/icon-link.svg) center center/contain no-repeat;
    content: ""
}

@media print,
screen and (min-width: 1240px) {
    .footer .footerNav {
        display: inline-flex;
        align-items: flex-start;
        gap: 24px
    }
}

@media only screen and (max-width: 1239px) {
    .footer .footerNav {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px
    }
}

.footer .snsList {
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch
}

.footer .snsList-link {
    display: block
}

.footer .snsList-link:hover {
    opacity: .7
}

.footer .snsList-link img {
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25))
}

@media print,
screen and (min-width: 1240px) {
    .footer .snsList-link img {
        width: 28px
    }
}

@media only screen and (max-width: 1239px) {
    .footer .snsList-link img {
        width: 18px
    }
}

@media print,
screen and (min-width: 1240px) {
    .footer-copy {
        max-width: 1440px;
        margin: 0 auto;
        padding: 16px 50px 0
    }
}

@media only screen and (max-width: 1239px) {
    .footer-copy {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px max(16px, (100% - 720px)/2);
        background: #fff
    }
}

.footer .copyTxt {
    display: block;
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .footer .copyTxt {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {
    .footer .copyTxt {
        font-size: 1rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .footer .copyTxt {
        color: #fff;
        text-align: right
    }
}

@media only screen and (max-width: 1239px) {
    .footer .copyTxt {
        color: #0065ab;
        line-height: 130%;
        letter-spacing: .4px
    }
}

@media only screen and (max-width: 1239px) {
    .footer .ymcLogo {
        display: block;
        width: 98px
    }
}

.ssNotice,
.eventInfo,
.marinaNotice,
.marinaLetter {
    display: flex;
    flex-wrap: wrap;
    gap: 16px
}

.ssNotice-favo,
.eventInfo-favo,
.marinaNotice-favo,
.marinaLetter-favo {
    margin-top: 16px
}

.ssNotice-none,
.eventInfo-none,
.marinaNotice-none,
.marinaLetter-none {
    width: 100%;
    padding: 16px 32px;
    background: #fff;
    line-height: 160%;
    text-align: center
}

@media print,
screen and (min-width: 1240px) {

    .ssNotice-none,
    .eventInfo-none,
    .marinaNotice-none,
    .marinaLetter-none {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {

    .ssNotice-none,
    .eventInfo-none,
    .marinaNotice-none,
    .marinaLetter-none {
        font-size: 1.2rem
    }
}

.ssNotice>*[class*=Ttl],
.eventInfo>*[class*=Ttl],
.marinaNotice>*[class*=Ttl],
.marinaLetter>*[class*=Ttl] {
    margin-bottom: 0
}

@media print,
screen and (min-width: 1240px) {

    .ssNotice,
    .eventInfo,
    .marinaNotice,
    .marinaLetter {
        justify-content: space-between;
        align-items: center
    }

    .ssNotice-content,
    .eventInfo-content,
    .marinaNotice-content,
    .marinaLetter-content {
        width: 100%;
        order: 1
    }

    .ssNotice-favo,
    .eventInfo-favo,
    .marinaNotice-favo,
    .marinaLetter-favo {
        width: 100%;
        order: 1
    }

    .ssNotice-none,
    .eventInfo-none,
    .marinaNotice-none,
    .marinaLetter-none {
        padding: 32px
    }
}

@media only screen and (max-width: 1239px) {

    .ssNotice>*,
    .eventInfo>*,
    .marinaNotice>*,
    .marinaLetter>* {
        width: 100%
    }

    .ssNotice-btn,
    .eventInfo-btn,
    .marinaNotice-btn,
    .marinaLetter-btn {
        display: flex;
        justify-content: flex-end
    }

    .ssNotice-btn>*,
    .eventInfo-btn>*,
    .marinaNotice-btn>*,
    .marinaLetter-btn>* {
        margin-right: 0
    }

    .ssNotice-none,
    .eventInfo-none,
    .marinaNotice-none,
    .marinaLetter-none {
        padding: 16px 32px
    }
}

.marinaNotice {
    background: linear-gradient(164deg, #1A91FF 6.92%, #243FCE 95.35%)
}

.marinaNotice .secondaryTtl {
    color: #fff
}

.marinaNotice .textBtn {
    color: #fff
}

.marinaNotice .textBtn::after {
    background: #fff
}

.marinaNotice-none {
    background: #fff
}

@media print,
screen and (min-width: 1240px) {
    .marinaNotice {
        padding-bottom: 48px
    }
}

.marinaRecommend-none {
    width: 100%;
    padding: 16px 32px;
    background: #fff;
    line-height: 160%;
    text-align: center
}

@media print,
screen and (min-width: 1240px) {
    .marinaRecommend-none {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .marinaRecommend-none {
        font-size: 1.2rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .marinaRecommend .tabNav {
        margin-bottom: 24px
    }

    .marinaRecommend-none {
        padding: 32px
    }
}

@media only screen and (max-width: 1239px) {
    .marinaRecommend-none {
        padding: 16px 32px
    }
}

.recommend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px
}

.recommend>* {
    width: 100%
}

@media only screen and (max-width: 1239px) {
    .recommend {
        max-width: 720px;
        margin-right: auto;
        margin-left: auto;
        padding-right: 0;
        padding-left: 0
    }
}

.recommendTab {
    line-height: 130%;
    letter-spacing: .02em;
    font-weight: 700
}

@media print,
screen and (min-width: 1240px) {
    .recommendTab {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .recommendTab {
        font-size: 1.2rem
    }
}

.recommendTab-item {
    display: flex !important;
    justify-content: center;
    align-items: center;
    position: relative;
    width: max(33.33%, 140px);
    background: #f0f0f0;
    color: #8b8b8b;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition)
}

.recommendTab-item:first-child {
    border-radius: 4px 0 0 4px
}

.recommendTab-item:last-child {
    border-radius: 0 4px 4px 0
}

.recommendTab-item.swiper-slide-thumb-active {
    border-radius: 4px;
    background: #0371ee;
    color: #fff
}

.recommendTab-item>* {
    transition: none
}

@media print,
screen and (min-width: 1240px) {
    .recommendTab {
        margin-bottom: 16px
    }

    .recommendTab-item {
        height: 50px;
        padding: 8px 32px
    }

    .recommendTab-item.swiper-slide-thumb-active {
        margin: -2px 0;
        height: 54px
    }

    .recommendTab-item::before {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: #0371ee;
        opacity: 0;
        transition: var(--transition);
        content: ""
    }

    .recommendTab-item:not(.swiper-slide-thumb-active):hover::before {
        opacity: 1
    }

    .recommendTab-item:first-child::before {
        border-radius: 0 0 0 4px
    }

    .recommendTab-item:last-child::before {
        border-radius: 0 0 4px 0
    }

    .recommendTab.swiper-wrapper {
        padding: 2px 0
    }
}

@media only screen and (max-width: 1239px) {
    .recommendTab-item {
        height: 48px;
        padding: 8px 16px
    }

    .recommendTab-item::after {
        position: absolute;
        width: 6px;
        height: 5px;
        bottom: -5px;
        background: #0371ee;
        clip-path: polygon(0 0, 50% 100%, 100% 0);
        opacity: 0;
        z-index: -1;
        transition: var(--transition);
        content: ""
    }

    .recommendTab-item.swiper-slide-thumb-active::after {
        opacity: 1
    }

    .recommendTab.swiper-wrapper {
        padding-bottom: 8px
    }
}

.recommendSlider {
    position: relative
}

.recommendSlider-wrap {
    background: linear-gradient(164deg, #1A91FF 6.92%, #243FCE 95.35%)
}

.recommendCat {
    display: flex !important;
    flex-wrap: wrap;
    text-align: center
}

.recommendCat::after {
    width: 100%;
    height: 36px;
    content: ""
}

.recommendCat-item {
    width: 100%
}

.recommendCat-subttl {
    margin-bottom: 12px;
    color: #fff;
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .recommendCat-subttl {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .recommendCat-subttl {
        font-size: 1.2rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .recommendCat {
        gap: 32px 16px;
        padding: 40px 32px
    }

    .recommendCat::after {
        width: calc(100% + 32px + 32px);
        margin: 0 -32px
    }

    .recommendCat.anxiety::after {
        background: url(/jp/assets/img/recommend/bg-anxiety.svg) center center no-repeat
    }

    .recommendCat.beginner::after {
        background: url(/jp/assets/img/recommend/bg-beginner-pc.svg) center center no-repeat
    }

    .recommendCat.enjoy::after {
        background: url(/jp/assets/img/recommend/bg-enjoy.svg) right center no-repeat
    }

    .recommendCat-item.plan,
    .recommendCat-item.charter {
        width: calc(50% - 8px)
    }
}

@media only screen and (max-width: 1239px) {
    .recommendCat {
        gap: 16px;
        padding: 16px 24px 32px
    }

    .recommendCat::after {
        width: calc(100% + 24px + 24px);
        margin: 0 -24px
    }

    .recommendCat.anxiety::after {
        background: url(/jp/assets/img/recommend/bg-anxiety.svg) center center no-repeat
    }

    .recommendCat.beginner::after {
        background: url(/jp/assets/img/recommend/bg-beginner-sp.svg) center center no-repeat
    }

    .recommendCat.enjoy::after {
        background: url(/jp/assets/img/recommend/bg-enjoy.svg) left center no-repeat
    }
}

.recommendList {
    display: flex;
    flex-wrap: wrap;
    color: #0065ab
}

.recommendList-item {
    display: flex
}

.recommendList-link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    border-radius: 4px;
    background: #fff;
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .recommendList-link {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .recommendList-link {
        font-size: 1.2rem
    }
}

.recommendList-link:hover {
    background: #e4f2ff
}

.recommendList-link>* {
    width: fit-content
}

.recommendList-link img {
    width: 32px;
    height: 32px
}

@media print,
screen and (min-width: 1240px) {
    .recommendList {
        gap: 32px 16px
    }

    .col-1>.recommendList-item {
        width: 100%
    }

    .col-2>.recommendList-item {
        width: calc(50% - 8px)
    }

    .col-3>.recommendList-item {
        width: calc(33.33% - 10.66px)
    }

    .col-4>.recommendList-item {
        width: calc(25% - 12px)
    }

    .pc-col-1>.recommendList-item {
        width: 100%
    }

    .pc-col-2>.recommendList-item {
        width: calc(50% - 8px)
    }

    .pc-col-3>.recommendList-item {
        width: calc(33.33% - 10.66px)
    }

    .pc-col-4>.recommendList-item {
        width: calc(25% - 12px)
    }

    .recommendList-link {
        padding: 16px 12px
    }
}

@media only screen and (max-width: 1239px) {
    .recommendList {
        gap: 8px
    }

    .beginner .recommendList {
        gap: 16px
    }

    .col-1>.recommendList-item {
        width: 100%
    }

    .col-2>.recommendList-item {
        width: calc(50% - 4px)
    }

    .sp-col-1>.recommendList-item {
        width: 100%
    }

    .sp-col-2>.recommendList-item {
        width: calc(50% - 4px)
    }

    .pc-col-3.sp-col-2>.recommendList-item:last-child {
        width: 100%
    }

    .recommendList-link {
        padding: 8px 12px;
        font-weight: 500;
        line-height: 150%;
        text-align: left
    }

    .recommendList-link *:not(img) {
        flex: 1;
        width: auto
    }
}

.searchBox {
    position: relative;
    margin: 0 auto;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0px 2px 6px 0px rgba(5, 41, 66, .15);
    transition: var(--transition)
}

@media print,
screen and (min-width: 1240px) {
    .searchBox {
        max-width: 712px
    }
}

.searchBox-tab {
    display: flex
}

.searchBox-tab-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    background: #e0e0e0;
    color: #acacac;
    cursor: pointer
}

.searchBox-tab-item.is-current {
    position: relative;
    background: #0371ee;
    color: #fff;
    cursor: default
}

.searchBox-tab-item.is-current::before {
    position: absolute;
    bottom: -1px;
    background: #fff;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    content: ""
}

.searchBox-tab-item:first-child {
    border-radius: 4px 0 0 0
}

.searchBox-tab-item:last-child {
    border-radius: 0 4px 0 0
}

@media print,
screen and (min-width: 1240px) {
    .searchBox-tab-item {
        padding: 16px 8px;
        font-size: 1.6rem;
        line-height: 130%;
        letter-spacing: .02em;
        font-weight: 700
    }

    .searchBox-tab-item.is-current::before {
        width: 20px;
        height: 10px
    }
}

@media only screen and (max-width: 1239px) {
    .searchBox-tab-item {
        padding: 8px;
        font-size: 1.2rem;
        line-height: 160%
    }

    .searchBox-tab-item.is-current::before {
        width: 14px;
        height: 8px
    }
}

.searchBox-field {
    margin: 0 !important
}

.searchBox-field-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    border-top: 1px solid #e6e6e6
}

@media print,
screen and (min-width: 1240px) {
    .searchBox-field-body {
        padding: 24px
    }

    .searchBox-field-footer {
        gap: 8px 16px;
        padding: 16px 92px
    }
}

@media only screen and (max-width: 1239px) {
    .searchBox-field-body {
        padding: 16px
    }

    .searchBox-field-footer {
        gap: 8px 4px;
        padding: 16px 12px
    }
}

@media print,
screen and (min-width: 1240px) {
    .searchBox-result-txt {
        font-size: 1.4rem;
        line-height: 130%;
        letter-spacing: .02em;
        font-weight: 700
    }

    .searchBox-result-num {
        font-size: 1.8rem;
        font-weight: 700;
        line-height: 160%;
        letter-spacing: .04em
    }
}

@media only screen and (max-width: 1239px) {
    .searchBox-result-txt {
        font-size: 1rem;
        line-height: 160%
    }

    .searchBox-result-num {
        font-size: 1rem;
        line-height: 160%
    }

    .searchBox-result-num b {
        font-size: 1.2rem;
        line-height: 160%;
        font-weight: 700
    }
}

.searchBox-btn {
    width: 100%
}

.searchBox-btn>* {
    width: 100%
}

@media print,
screen and (min-width: 1240px) {
    .searchField {
        padding: 24px;
        background: #eef4fa
    }
}

.searchField input[type=date],
.searchField input[type=datetime-local],
.searchField input[type=email],
.searchField input[type=month],
.searchField input[type=number],
.searchField input[type=password],
.searchField input[type=search],
.searchField input[type=tel],
.searchField input[type=text],
.searchField input[type=time],
.searchField input[type=url],
.searchField input[type=week],
.searchField select {
    font-size: 1.4rem;
    line-height: 160%
}

.searchField select {
    padding: 8px 44px 8px 12px;
    background: url(/jp/assets/icon/icon-arrow_down.svg) center right 12px/20px 20px no-repeat #fff
}

.searchField-filter-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: fit-content;
    gap: 4px;
    margin: 16px auto 0;
    cursor: pointer;
    transition: var(--transition)
}

.searchField-filter-btn[data-accordion-btn=filter] {
    font-size: 1.4rem;
    line-height: 130%;
    text-decoration: underline
}

.searchField-filter-btn[data-accordion-btn=filter]:hover {
    text-decoration: none
}

.searchField-filter-btn[data-accordion-btn=more] {
    font-size: 1.2rem;
    line-height: 130%;
    text-decoration: underline
}

.searchField-filter-btn[data-accordion-btn=more]:hover {
    text-decoration: none
}

.searchField-filter-btn::after {
    width: 16px;
    height: 16px;
    background: #5a5a5a;
    transition: none;
    mask: url(/jp/assets/icon/icon-accordion_open.svg) center center/contain no-repeat, url(/jp/assets/icon/icon-accordion_close.svg) left 16px center/contain no-repeat;
    content: ""
}

.js-accordion.is-open>.searchField-filter-btn::after {
    mask: url(/jp/assets/icon/icon-accordion_open.svg) left 16px center/contain no-repeat, url(/jp/assets/icon/icon-accordion_close.svg) center center/contain no-repeat
}

.searchField-filter {
    padding-top: 16px
}

.searchField-filter-more {
    padding-top: 16px
}

.searchField-filter-more>* {
    width: 100%
}

.searchField-filter-group select {
    width: 100%
}

.searchField-filter-ttl {
    margin-bottom: 8px
}

.searchField-filter-clear {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    border: 1px solid #000;
    line-height: 160%;
    cursor: pointer
}

@media print,
screen and (min-width: 1240px) {
    .searchField-filter-clear {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {
    .searchField-filter-clear {
        font-size: 1rem
    }
}

.searchField-filter-clear:hover {
    background: #fff
}

@media print,
screen and (min-width: 1240px) {
    .searchField-filter-btn[data-accordion-btn=more] {
        display: none
    }

    .searchField-filter-more {
        display: flex !important;
        flex-wrap: wrap;
        gap: 16px 8px
    }

    .searchField-filter-more .number,
    .searchField-filter-more .lecture {
        width: calc(50% - 4px)
    }

    .searchField-filter-ttl {
        font-size: 1.6rem;
        line-height: 160%;
        font-weight: 700
    }

    .searchField-filter-clear {
        width: 142px;
        height: 28px;
        border-radius: 14px
    }
}

@media only screen and (max-width: 1239px) {
    .searchField-filter-group {
        margin-top: 16px
    }

    .searchField-filter-group:first-child {
        margin-top: 0
    }

    .searchField-filter-ttl {
        font-size: 1.2rem;
        line-height: 130%;
        letter-spacing: .02em;
        font-weight: 700
    }

    .searchField-filter-clear {
        width: 128px;
        height: 26px;
        margin-top: 16px;
        border-radius: 13px
    }
}

.searchField-input-group {
    display: flex
}

.searchField-input-group input[type=text] {
    width: 100%
}

.searchField-input-group select {
    width: 100%
}

@media print,
screen and (min-width: 1240px) {
    .searchField-input-group {
        gap: 8px
    }

    .searchField-input-group.pc-col-2>* {
        width: calc(50% - 4px)
    }

    .searchField-input-group.pc-col-2>*:has([placeholder^=マリーナ名を入力]),
    .searchField-input-group.pc-col-2>*:has([placeholder^=エリア・地域を選択]) {
        width: 55%
    }

    .searchField-input-group.pc-col-2>*:has([placeholder=日にちを選択]) {
        flex: 1;
        width: auto
    }

    .searchField-input-group.pc-col-3>* {
        width: calc(33.33% - 5.33px)
    }
}

@media only screen and (max-width: 1239px) {
    .searchField-input-group {
        flex-wrap: wrap;
        gap: 4px
    }

    .searchField-input-group>* {
        width: 100%
    }
}

.searchField-checkbox-list,
.searchField-radio-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px
}

.searchField-checkbox-list>*,
.searchField-radio-list>* {
    width: calc(50% - 2px)
}

.searchField-checkbox-list label,
.searchField-radio-list label {
    display: flex;
    gap: 4px
}

.searchField-checkbox-list label input[type=checkbox],
.searchField-radio-list label input[type=checkbox] {
    margin: 7.5px 3.5px
}

.searchField-checkbox-list label input[type=radio],
.searchField-radio-list label input[type=radio] {
    margin: 6.5px 2.5px
}

.searchField-checkbox-list label img,
.searchField-radio-list label img {
    margin: 4px 0
}

.searchField-checkbox-list label *:not(input, img),
.searchField-radio-list label *:not(input, img) {
    flex: 1
}

@media print,
screen and (min-width: 1240px) {

    .searchField-checkbox-list.pc-col-1>*,
    .searchField-radio-list.pc-col-1>* {
        width: 100%
    }

    .searchField-checkbox-list.pc-col-2>*,
    .searchField-radio-list.pc-col-2>* {
        width: calc(50% - 2px)
    }

    .searchField-checkbox-list.pc-col-3>*,
    .searchField-radio-list.pc-col-3>* {
        width: calc(33.33% - 2.66px)
    }

    .searchField-checkbox-list.pc-col-4>*,
    .searchField-radio-list.pc-col-4>* {
        width: calc(25% - 3px)
    }

    .searchField-checkbox-list label,
    .searchField-radio-list label {
        align-items: flex-start
    }

    .searchField-checkbox-list label *:not(input, img),
    .searchField-radio-list label *:not(input, img) {
        margin-top: 4px;
        line-height: 24px
    }

    .searchField-checkbox-list label:has(input[type=checkbox]),
    .searchField-checkbox-list label:has(input[type=radio]),
    .searchField-radio-list label:has(input[type=checkbox]),
    .searchField-radio-list label:has(input[type=radio]) {
        font-size: 1.4rem;
        line-height: 160%
    }
}

@media only screen and (max-width: 1239px) {

    .searchField-checkbox-list label,
    .searchField-radio-list label {
        align-items: center;
        line-height: 130%
    }

    .searchField-checkbox-list label:has(input[type=checkbox]),
    .searchField-checkbox-list label:has(input[type=radio]),
    .searchField-radio-list label:has(input[type=checkbox]),
    .searchField-radio-list label:has(input[type=radio]) {
        font-size: 1rem;
        line-height: 160%
    }
}

.searchCal {
    display: flex
}

.searchCal table {
    width: 100%;
    text-align: center
}

.searchCal table,
.searchCal table th,
.searchCal table td {
    border: 1px solid #e6e6e6
}

.searchCal table caption {
    color: #4a4a4a;
    font-size: 1.4rem;
    line-height: 160%;
    font-weight: 700
}

.searchCal table th {
    padding: 4px;
    border-right: none;
    border-left: none;
    background: #fff
}

.searchCal table td {
    padding: 4px 0;
    background: #f7f7f7
}

.searchCal table td label {
    display: block;
    margin: -4px 0;
    padding: 4px
}

.searchCal table td label input[type=radio] {
    display: none
}

.searchCal table td label:has(input[type=radio]:checked) {
    background: #0371ee;
    color: #fff
}

.searchCal table td label:has(input[type=radio]:checked) b {
    color: #fff;
    text-decoration: none
}

.searchCal table td span,
.searchCal table td b {
    display: block
}

.searchCal table td span {
    font-weight: 400
}

.searchCal table td b {
    font-size: 1.5rem;
    line-height: 130%
}

.searchCal table td[data-status] {
    background: #fff
}

.searchCal table td[data-status=あり] b {
    color: #0371ee;
    text-decoration: underline
}

.searchCal table td[data-status=あり] label:hover b {
    text-decoration: none
}

.searchCal table td[data-status=なし] b {
    color: #8b8b8b
}

.searchCal table td[data-status=休] b {
    color: #acacac
}

.searchCal table td[data-date=特別日] {
    background: #fff9e5
}

.searchCal-note {
    font-size: 1rem;
    line-height: 160%;
    text-align: right
}

@media print,
screen and (min-width: 1240px) {
    .searchCal {
        gap: 32px
    }

    .searchCal-item {
        width: calc(50% - 16px)
    }

    .searchCal table caption {
        padding-bottom: 8px
    }

    .searchCal table th {
        font-size: 1.6rem;
        line-height: 160%
    }

    .searchCal table td span {
        font-size: 1.4rem;
        line-height: 160%
    }

    .searchCal-note {
        margin-top: 8px;
        font-size: 1.2rem;
        line-height: 160%
    }
}

@media only screen and (max-width: 1239px) {
    .searchCal {
        flex-direction: column;
        gap: 16px
    }

    .searchCal table caption {
        padding-bottom: 4px
    }

    .searchCal table th {
        position: relative;
        font-size: 1.2rem;
        line-height: 160%
    }

    .searchCal table th b {
        display: inline-block;
        margin-bottom: 3px;
        font-size: 1rem;
        line-height: 160%
    }

    .searchCal table th b::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: #0371ee;
        content: ""
    }

    .searchCal table td span {
        font-size: 1.2rem;
        line-height: 160%
    }

    .searchCal-note {
        margin-top: 4px;
        font-size: 1rem;
        line-height: 160%
    }
}

.searchDropRadio {
    display: none;
    position: absolute;
    top: 38px;
    width: 240px;
    max-height: 320px;
    border-radius: 2px;
    background: #fff;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0px 4px 6px 4px rgba(0, 0, 0, .2)
}

.searchDropRadio::-webkit-scrollbar {
    border-radius: 0 2px 2px 0;
    width: 12px
}

.searchDropRadio::-webkit-scrollbar-thumb {
    border-radius: 12px;
    border: 4px solid #fff;
    border-top-width: 8px;
    border-bottom-width: 8px;
    background: #d9d9d9
}

.searchDropRadio-wrap {
    position: relative
}

.searchDropRadio-wrap input[type=text] {
    cursor: text !important
}

.searchDropRadio-ttl {
    display: block;
    padding: 12px 8px 8px;
    font-size: 1rem;
    line-height: 160%;
    line-height: 130%;
    font-weight: 700
}

.searchDropRadio label {
    display: block;
    padding: 8px 12px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 1.4rem;
    line-height: 160%
}

.searchDropRadio label input[type=radio] {
    display: none
}

.searchDropRadio label:has(input[type=radio]:checked) {
    background: #eef4fa
}

.searchDropRadio-ttl+label {
    border-top: 1px solid #e6e6e6
}

.searchDropFav {
    display: none;
    position: absolute;
    width: 240px;
    max-height: 320px;
    border-radius: 2px;
    background: #fff;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0px 4px 6px 4px rgba(0, 0, 0, .2);
    transform: translateY(-1px)
}

.searchDropFav::-webkit-scrollbar {
    border-radius: 0 2px 2px 0;
    width: 12px
}

.searchDropFav::-webkit-scrollbar-thumb {
    border-radius: 12px;
    border: 4px solid #fff;
    border-top-width: 8px;
    border-bottom-width: 8px;
    background: #d9d9d9
}

.searchDropFav-wrap {
    position: relative;
    max-width: 348px;
    margin: 0 auto 16px
}

.searchDropFav-ttl {
    display: block;
    padding: 12px 8px 8px;
    font-size: 1rem;
    line-height: 160%;
    line-height: 130%;
    font-weight: 700
}

.searchDropFav label {
    display: block;
    padding: 8px 12px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 1.4rem;
    line-height: 160%
}

.searchDropFav label input[type=radio] {
    display: none
}

.searchDropFav label:has(input[type=radio]:checked) {
    background: #eef4fa
}

.searchDropFav-ttl+label {
    border-top: 1px solid #e6e6e6
}

.searchDropMarina {
    display: none;
    position: absolute;
    top: 38px;
    width: 240px;
    max-height: min(320px, 50dvh - 16px);
    border-radius: 2px;
    background: #fff;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0px 4px 6px 4px rgba(0, 0, 0, .2)
}

.searchDropMarina::-webkit-scrollbar {
    border-radius: 0 2px 2px 0;
    width: 20px
}

.searchDropMarina::-webkit-scrollbar-thumb {
    border-radius: 12px;
    border: 4px solid #fff;
    border-top-width: 8px;
    border-bottom-width: 8px;
    background: #d9d9d9
}

.searchDropMarina-wrap {
    position: relative
}

.searchDropMarina-wrap input[type=text] {
    cursor: text !important
}

.searchDropMarina-ttl {
    display: block;
    padding: 12px 8px 8px;
    font-size: 1rem;
    line-height: 160%;
    line-height: 130%;
    font-weight: 700
}

.searchDropMarina label {
    display: block;
    padding: 8px 12px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 1.4rem;
    line-height: 160%
}

.searchDropMarina label input[type=radio] {
    display: none
}

.searchDropMarina label:has(input[type=radio]:checked) {
    background: #eef4fa
}

.searchDropMarina-ttl+label {
    border-top: 1px solid #e6e6e6
}

.searchDropCal {
    display: none;
    position: absolute;
    top: 38px;
    border-radius: 2px;
    background: #fff;
    z-index: 100;
    box-shadow: 0px 4px 6px 4px rgba(0, 0, 0, .2)
}

.searchDropCal-wrap {
    position: relative
}

.searchDropCal-wrap input[type=text] {
    cursor: text
}

.searchDropCal-inner {
    display: flex;
    flex-wrap: wrap
}

.searchDropCal table {
    width: 100%;
    text-align: center
}

.searchDropCal table,
.searchDropCal table th,
.searchDropCal table td {
    border: 1px solid #e6e6e6
}

.searchDropCal table caption {
    padding-bottom: 4px;
    color: #4a4a4a;
    font-size: 1.4rem;
    line-height: 160%;
    font-weight: 700
}

.searchDropCal table th {
    padding: 4px;
    border-right: none;
    border-left: none;
    font-size: 1.2rem;
    line-height: 160%
}

.searchDropCal table td {
    padding: 4px 0;
    background: #f7f7f7
}

.searchDropCal table td label {
    display: block;
    margin: -4px 0;
    padding: 4px
}

.searchDropCal table td label input[type=radio] {
    display: none
}

.searchDropCal table td label:has(input[type=radio]:checked) {
    background: #eef4fa
}

.searchDropCal table td span,
.searchDropCal table td b {
    display: block
}

.searchDropCal table td span {
    font-size: 1.4rem;
    line-height: 160%;
    font-weight: 400
}

.searchDropCal table td b {
    font-size: 1.5rem;
    line-height: 130%
}

.searchDropCal table td[data-status] {
    background: #fff
}

.searchDropCal table td[data-status=あり] b {
    color: #0371ee;
    text-decoration: underline
}

.searchDropCal table td[data-status=あり] label:hover b {
    text-decoration: none
}

.searchDropCal table td[data-status=なし] b {
    color: #8b8b8b
}

.searchDropCal table td[data-status=休] b {
    color: #acacac
}

.searchDropCal table td[data-date=特別日] {
    background: #fff9e5
}

.searchDropCal-note {
    margin: 4px 0 8px;
    font-size: 1rem;
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .searchDropCal {
        right: -4px;
        width: 624px;
        padding: 8px 16px
    }

    .modal .searchDropCal {
        width: 600px
    }

    .searchDropCal-wrap {
        flex: 1
    }

    .searchDropCal-inner {
        gap: 16px
    }

    .searchDropCal-item {
        width: calc(50% - 8px)
    }

    .searchDropCal-note {
        text-align: right
    }
}

@media only screen and (max-width: 1239px) {
    .searchDropCal {
        width: 252px;
        height: 334px;
        padding: 8px;
        overflow-y: scroll
    }

    .searchDropCal::-webkit-scrollbar {
        border-radius: 0 2px 2px 0;
        width: 12px
    }

    .searchDropCal::-webkit-scrollbar-thumb {
        border-radius: 12px;
        border: 4px solid #fff;
        border-top-width: 8px;
        border-bottom-width: 8px;
        background: #d9d9d9
    }

    .searchDropCal-inner {
        gap: 8px
    }

    .searchDropCal-item {
        width: 100%
    }
}

.searchDropBoat {
    display: none;
    position: absolute;
    top: 38px;
    width: 240px;
    max-height: 320px;
    border-radius: 2px;
    background: #fff;
    z-index: 100;
    box-shadow: 0px 4px 6px 4px rgba(0, 0, 0, .2)
}

.searchDropBoat-wrap {
    position: relative
}

.searchDropBoat-wrap input[type=text] {
    cursor: text !important
}

.searchDropBoat-body {
    max-height: 268px;
    overflow-y: auto
}

.searchDropBoat-body::-webkit-scrollbar {
    border-radius: 0 2px 0 0;
    width: 12px
}

.searchDropBoat-body::-webkit-scrollbar-thumb {
    border-radius: 12px;
    border: 4px solid #fff;
    border-top-width: 8px;
    border-bottom-width: 8px;
    background: #d9d9d9
}

.searchDropBoat-ttl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 8px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 1.4rem;
    line-height: 160%;
    font-weight: 700;
    cursor: pointer
}

.searchDropBoat-ttl::after {
    width: 16px;
    height: 16px;
    background: #5a5a5a;
    transition: none;
    mask: url(/jp/assets/icon/icon-accordion_open.svg) center center/contain no-repeat, url(/jp/assets/icon/icon-accordion_close.svg) left 16px center/contain no-repeat;
    content: ""
}

.js-accordion.is-open>.searchDropBoat-ttl::after {
    mask: url(/jp/assets/icon/icon-accordion_open.svg) left 16px center/contain no-repeat, url(/jp/assets/icon/icon-accordion_close.svg) center center/contain no-repeat
}

.searchDropBoat-list {
    display: none
}

.searchDropBoat-btn {
    padding: 8px 12px
}

.searchDropBoat label {
    display: flex;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 1.4rem;
    line-height: 160%
}

.searchDropBoat label input[type=checkbox] {
    margin: 4px
}

.searchDropBoat label span {
    flex: 1
}

.searchDropBoat label:has(input[type=checkbox]:checked) {
    background: #eef4fa
}

.researchModal-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px
}

@media print,
screen and (min-width: 1240px) {
    .researchModal-result {
        padding: 0 80px
    }

    .researchModal-result-txt {
        font-size: 1.4rem;
        line-height: 130%;
        letter-spacing: .02em;
        font-weight: 700
    }

    .researchModal-result-num {
        font-size: 1.8rem;
        font-weight: 700;
        line-height: 160%;
        letter-spacing: .04em
    }
}

@media only screen and (max-width: 1239px) {
    .researchModal-result-txt {
        font-size: 1rem;
        line-height: 160%
    }

    .researchModal-result-num {
        font-size: 1rem;
        line-height: 160%
    }

    .researchModal-result-num b {
        font-size: 1.2rem;
        line-height: 160%;
        font-weight: 700
    }
}

.researchModal-btn .searchBtn {
    width: 100%
}

@media print,
screen and (min-width: 1240px) {
    .researchModal-btn {
        padding: 0 80px
    }
}

@media print,
screen and (min-width: 1240px) {
    .resultInfo {
        display: flex;
        align-items: end;
        justify-content: space-between;
        padding: 12px 16px
    }
}

@media only screen and (max-width: 1239px) {
    .resultInfo {
        margin: 0 -16px
    }
}

.resultInfo-detail {
    display: flex;
    align-items: end;
    color: #363636
}

.resultInfo-detail>*:first-child {
    color: #4a4a4a
}

@media print,
screen and (min-width: 1240px) {
    .resultInfo-detail {
        gap: 16px
    }
}

@media only screen and (max-width: 1239px) {
    .resultInfo-detail {
        justify-content: space-between;
        gap: 4px;
        padding: 12px 16px
    }
}

.resultInfo-txt {
    display: flex;
    gap: 4px
}

@media print,
screen and (min-width: 1240px) {
    .resultInfo-txt {
        gap: 16px;
        font-size: 1.6rem;
        line-height: 160%
    }
}

@media only screen and (max-width: 1239px) {
    .resultInfo-txt {
        font-size: 1rem;
        line-height: 160%;
        line-height: 130%
    }
}

.resultInfo-num {
    display: flex;
    gap: 4px;
    line-height: 130%;
    letter-spacing: .02em
}

@media print,
screen and (min-width: 1240px) {
    .resultInfo-num {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {
    .resultInfo-num {
        font-size: 1rem
    }
}

.resultInfo-num b {
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em;
    line-height: 120%
}

@media print,
screen and (min-width: 1240px) {
    .resultInfo-num b {
        font-size: 3rem
    }
}

@media only screen and (max-width: 1239px) {
    .resultInfo-num b {
        font-size: 1.8rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .resultInfo-num {
        font-weight: 700
    }
}

@media only screen and (max-width: 1239px) {
    .resultInfo-num b {
        font-size: 1.5rem;
        line-height: 100%
    }
}

.resultInfo-control {
    display: flex;
    align-items: center;
    gap: 16px
}

.resultInfo-control label {
    display: flex;
    gap: 4px;
    font-weight: 700
}

.resultInfo-control label input[type=checkbox] {
    margin: 7.5px 3.5px
}

.resultInfo-control label input[type=radio] {
    margin: 6.5px 2.5px
}

.resultInfo-control label *:not(input, img) {
    flex: 1
}

@media print,
screen and (min-width: 1240px) {
    .resultInfo-control label {
        align-items: flex-start;
        font-size: 1.4rem;
        line-height: 160%
    }

    .resultInfo-control label *:not(input, img) {
        margin-top: 4px;
        line-height: 24px
    }
}

@media only screen and (max-width: 1239px) {
    .resultInfo-control {
        padding: 4px 16px 8px
    }

    .resultInfo-control label {
        align-items: center;
        font-size: 1rem;
        line-height: 160%;
        line-height: 130%
    }
}

.resultGroup {
    border-top: 1px solid #e6e6e6
}

@media print,
screen and (min-width: 1240px) {
    .resultGroup {
        padding: 32px 24px 40px
    }
}

@media only screen and (max-width: 1239px) {
    .resultGroup {
        padding: 16px 16px 24px;
        margin: 0 -16px
    }
}

.resultGroup-more-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
    width: fit-content;
    margin: 16px auto 0;
    cursor: pointer
}

.resultGroup-more-btn::after {
    background: #0371ee;
    mask: url(/jp/assets/icon/icon-accordion_open.svg) center center/contain no-repeat;
    content: ""
}

.js-accordion.is-open .resultGroup-more-btn span {
    display: none
}

.js-accordion.is-open .resultGroup-more-btn::before {
    content: "閉じる"
}

.js-accordion.is-open .resultGroup-more-btn::after {
    mask-image: url(/jp/assets/icon/icon-accordion_close.svg)
}

@media print,
screen and (min-width: 1240px) {
    .resultGroup-more-btn {
        font-size: 1.6rem;
        font-weight: 600;
        line-height: 130%
    }

    .resultGroup-more-btn:hover {
        text-decoration: underline
    }

    .resultGroup-more-btn::after {
        width: 16px;
        height: 16px
    }
}

@media only screen and (max-width: 1239px) {
    .resultGroup-more-btn {
        font-size: 1.2rem;
        font-weight: 600;
        line-height: 120%
    }

    .resultGroup-more-btn:hover {
        text-decoration: underline
    }

    .resultGroup-more-btn::after {
        width: 12px;
        height: 12px
    }
}

.resultMarina-area {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #4a4a4a
}

.resultMarina-area-item {
    display: flex;
    align-items: center;
    gap: 4px
}

.resultMarina-area-item::after {
    content: "＞"
}

.resultMarina-area-item:last-child::after {
    display: none
}

.resultMarina-ttl {
    position: relative
}

.resultMarina-ttl::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 4px;
    background: linear-gradient(164deg, #1A91FF 6.92%, #243FCE 95.35%);
    transform: rotate(180deg);
    content: ""
}

.resultMarina-ttl-name {
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em;
    text-decoration: underline
}

@media print,
screen and (min-width: 1240px) {
    .resultMarina-ttl-name {
        font-size: 2.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .resultMarina-ttl-name {
        font-size: 1.6rem
    }
}

.resultMarina-ttl-name:hover {
    text-decoration: none
}

.resultMarina-ttl-num {
    display: inline-block
}

.resultMarina-icon {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px
}

@media print,
screen and (min-width: 1240px) {
    .resultMarina {
        display: flex;
        align-items: flex-start;
        gap: 16px
    }

    .resultMarina-detail {
        flex: 1
    }

    .resultMarina-area {
        margin-bottom: 24px;
        font-size: 1.6rem;
        line-height: 160%
    }

    .resultMarina-ttl {
        margin-bottom: 24px;
        padding-left: 24px
    }

    .resultMarina-ttl::before {
        width: 8px
    }

    .resultMarina-ttl-num {
        font-size: 1.8rem;
        font-weight: 700;
        line-height: 160%;
        letter-spacing: .04em
    }

    .resultMarina-address {
        margin-bottom: 16px;
        font-size: 1.6rem;
        line-height: 160%
    }

    .resultMarina-img {
        display: block;
        width: 252px;
        aspect-ratio: 16/9;
        object-fit: cover
    }
}

@media only screen and (max-width: 1239px) {
    .resultMarina-area {
        margin-bottom: 16px;
        font-size: 1.2rem;
        line-height: 160%
    }

    .resultMarina-ttl {
        margin-bottom: 8px;
        padding-left: 12px;
        line-height: 100%
    }

    .resultMarina-ttl::before {
        width: 4px
    }

    .resultMarina-ttl-name {
        line-height: 130%
    }

    .resultMarina-ttl-num {
        font-size: 1.2rem;
        line-height: 130%;
        letter-spacing: .02em;
        font-weight: 700
    }

    .resultMarina-address {
        margin-bottom: 8px;
        font-size: 1.2rem;
        line-height: 160%
    }
}

.reservePlanModal .modal-footer {
    display: none
}

.reservePlan-header {
    padding-bottom: 16px
}

.reservePlan-ttl {
    line-height: 130%;
    letter-spacing: .02em;
    font-weight: 700
}

@media print,
screen and (min-width: 1240px) {
    .reservePlan-ttl {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .reservePlan-ttl {
        font-size: 1.5rem
    }
}

.reservePlan-list {
    margin-bottom: 16px;
    font-size: 1.2rem;
    line-height: 130%;
    letter-spacing: .02em;
    font-weight: 700
}

.reservePlan-list>*+* {
    margin-top: 4px
}

.reservePlan-detail {
    margin-bottom: 16px;
    font-size: 1.5rem;
    line-height: 160%
}

.reservePlan-detail-price b {
    font-size: 2rem;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em
}

.reservePlan-marina,
.reservePlan-boat,
.reservePlan-plan {
    border-top: 1px solid #e6e6e6
}

.reservePlan-marina-img,
.reservePlan-boat-img,
.reservePlan-plan-img {
    margin-bottom: 8px;
    text-align: center
}

.reservePlan-marina-name,
.reservePlan-boat-name,
.reservePlan-plan-name {
    margin-bottom: 8px;
    line-height: 130%;
    letter-spacing: .02em;
    font-weight: 700
}

@media print,
screen and (min-width: 1240px) {

    .reservePlan-marina-name,
    .reservePlan-boat-name,
    .reservePlan-plan-name {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {

    .reservePlan-marina-name,
    .reservePlan-boat-name,
    .reservePlan-plan-name {
        font-size: 1.5rem
    }
}

.reservePlan-marina-content,
.reservePlan-boat-content,
.reservePlan-plan-content {
    font-size: 1.5rem;
    line-height: 160%
}

.reservePlan-marina-content>*+*,
.reservePlan-boat-content>*+*,
.reservePlan-plan-content>*+* {
    margin-top: 8px
}

@media print,
screen and (min-width: 1240px) {
    .reservePlan-ttl {
        margin-bottom: 16px
    }

    .reservePlan-detail {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
        padding: 8px;
        background: #f7f7f7
    }

    .reservePlan-marina {
        padding: 24px 0
    }

    .reservePlan-boat {
        padding: 24px 0
    }

    .reservePlan-plan {
        padding: 24px 0
    }

    .reservePlan-footer {
        padding: 0 8px
    }
}

@media only screen and (max-width: 1239px) {
    .reservePlan-ttl {
        margin-bottom: 8px
    }

    .reservePlan-footer .reservePlan-detail {
        font-size: 1.2rem;
        line-height: 160%
    }

    .reservePlan-marina {
        padding: 16px 0
    }

    .reservePlan-boat {
        padding: 16px 0
    }

    .reservePlan-plan {
        padding: 16px 0
    }
}

@media print,
screen and (min-width: 1240px) {
    .aroundMarina {
        margin-top: -32px
    }
}

.loginBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    box-shadow: 0px 2px 6px 0px rgba(5, 41, 66, .15);
    margin: 0 auto
}

.loginBox>* {
    width: 100%
}

.loginBox-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px
}

.loginBox-content.line-tp,
.loginBox-indent.line-tp {
    border-top: 1px solid #e6e6e6
}

@media print,
screen and (min-width: 1240px) {
    .loginBox {
        gap: 32px;
        max-width: 824px;
        padding: 32px 80px 48px;
        border-radius: 4px
    }

    .loginBox+.loginBox {
        margin-top: 32px
    }

    .loginBox .secondaryTtl {
        text-align: center
    }

    .loginBox-input {
        width: 327px
    }

    .loginBox-indent {
        padding: 0 24px
    }

    .loginBox-content.line-tp,
    .loginBox-indent.line-tp {
        padding-top: 32px
    }
}

@media only screen and (max-width: 1239px) {
    .loginBox {
        gap: 16px 0;
        max-width: 720px;
        padding: 23px 15px;
        border: 1px solid #e6e6e6;
        border-radius: 2px
    }

    .loginBox+.loginBox {
        margin-top: 16px
    }

    .loginBox .secondaryTtl {
        text-align: left
    }

    .loginBox-content.line-tp,
    .loginBox-indent.line-tp {
        margin-top: 8px;
        padding-top: 24px
    }
}

.hotlineLink {
    display: flex;
    align-items: center
}

.hotlineLink-name {
    line-height: 160%;
    font-weight: 700
}

@media print,
screen and (min-width: 1240px) {
    .hotlineLink-name {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .hotlineLink-name {
        font-size: 1.2rem
    }
}

.hotlineLink-number {
    line-height: 160%;
    font-weight: 700
}

@media print,
screen and (min-width: 1240px) {
    .hotlineLink-number {
        font-size: 1.8rem
    }
}

@media only screen and (max-width: 1239px) {
    .hotlineLink-number {
        font-size: 1.7rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .hotlineLink {
        justify-content: center;
        gap: 24px;
        pointer-events: none;
        padding: 16px;
        background: #f8fdff
    }

    .hotlineLink-time {
        font-size: 1.4rem;
        line-height: 160%
    }
}

@media only screen and (max-width: 1239px) {
    .hotlineLink {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 4px 16px;
        padding: 12px;
        background: #f7f7f7
    }

    .hotlineLink-name {
        width: 100%
    }

    .hotlineLink-time {
        width: 100%;
        font-size: 1rem;
        line-height: 160%
    }
}

.hotlineLink-name {
    line-height: 160%;
    font-weight: 700
}

@media print,
screen and (min-width: 1240px) {
    .hotlineLink-name {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .hotlineLink-name {
        font-size: 1.2rem
    }
}

.hotlineLink-number {
    padding: 4px 0;
    line-height: 160%;
    font-weight: 700
}

@media print,
screen and (min-width: 1240px) {
    .hotlineLink-number {
        font-size: 1.8rem
    }
}

@media only screen and (max-width: 1239px) {
    .hotlineLink-number {
        font-size: 1.7rem
    }
}

.hotlineLink-time {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .hotlineLink-time {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .hotlineLink-time {
        font-size: 1.2rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .hotlineLink-number {
        pointer-events: none
    }
}

.stageDetail-total,
.stageDetail-current,
.stageDetail-next {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 4px;
    font-weight: 700
}

.stageDetail-ttl {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .stageDetail-ttl {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .stageDetail-ttl {
        font-size: 1.5rem
    }
}

.stageDetail-ttl span {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .stageDetail-ttl span {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .stageDetail-ttl span {
        font-size: 1.2rem
    }
}

.stageDetail-point,
.stageDetail-stage {
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em
}

@media print,
screen and (min-width: 1240px) {

    .stageDetail-point,
    .stageDetail-stage {
        font-size: 2rem
    }
}

@media only screen and (max-width: 1239px) {

    .stageDetail-point,
    .stageDetail-stage {
        font-size: 1.8rem
    }
}

.stageDetail-point span,
.stageDetail-stage span {
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em
}

@media print,
screen and (min-width: 1240px) {

    .stageDetail-point span,
    .stageDetail-stage span {
        font-size: 1.8rem
    }
}

@media only screen and (max-width: 1239px) {

    .stageDetail-point span,
    .stageDetail-stage span {
        font-size: 1.6rem
    }
}

.stageDetail .textBtn {
    color: #444;
    text-decoration: underline
}

.stageDetail .textBtn:hover {
    text-decoration: none !important
}

.pointTotal-detail {
    display: flex;
    align-items: center;
    gap: 16px;
    font-weight: 700
}

.pointTotal-point b {
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em
}

@media print,
screen and (min-width: 1240px) {
    .pointTotal-point b {
        font-size: 2rem
    }
}

@media only screen and (max-width: 1239px) {
    .pointTotal-point b {
        font-size: 1.8rem
    }
}

.pointTotal-point span {
    font-weight: 400
}

.pointTotal-status {
    text-align: right
}

.pointTotal-expiry {
    margin-bottom: 8px
}

.pointTotal .textBtn {
    color: #444;
    text-decoration: underline
}

.pointTotal .textBtn:hover {
    text-decoration: none !important
}

@media print,
screen and (min-width: 1240px) {
    .pointTotal {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px
    }

    .pointTotal-ttl {
        font-size: 1.4rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .pointTotal-point span {
        font-size: 1.6rem;
        line-height: 160%
    }

    .pointTotal-expiry {
        font-size: 1.6rem;
        line-height: 160%
    }
}

@media only screen and (max-width: 1239px) {
    .pointTotal-detail {
        justify-content: space-between;
        margin-bottom: 4px
    }

    .pointTotal-ttl {
        font-size: 1.5rem;
        line-height: 160%
    }

    .pointTotal-point span {
        font-size: 1.2rem;
        line-height: 160%
    }

    .pointTotal-expiry {
        font-size: 1.2rem;
        line-height: 160%
    }
}

.pointList {
    display: flex;
    flex-wrap: wrap
}

.pointList-item {
    display: flex
}

.pointList-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    position: relative;
    width: 100%;
    padding: 16px 32px 16px 16px;
    background: #fff;
    box-shadow: 0px 2px 6px 0px rgba(5, 41, 66, .15)
}

.pointList-link::after {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 16px;
    height: 16px;
    background: #0371ee;
    mask: url(/jp/assets/icon/icon-arrow_right.svg) center center/contain no-repeat;
    transform: translateY(-50%);
    content: ""
}

.pointList-ttl {
    flex: 1;
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .pointList-ttl {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .pointList-ttl {
        font-size: 1.5rem
    }
}

.pointList-num {
    color: #0371ee;
    white-space: nowrap;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em
}

@media print,
screen and (min-width: 1240px) {
    .pointList-num {
        font-size: 2rem
    }
}

@media only screen and (max-width: 1239px) {
    .pointList-num {
        font-size: 1.8rem
    }
}

.pointList-txt {
    width: 100%;
    line-height: 160%;
    text-align: right
}

@media print,
screen and (min-width: 1240px) {
    .pointList-txt {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .pointList-txt {
        font-size: 1.2rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .pointList {
        gap: 16px
    }

    .pointList-item {
        width: calc(50% - 8px)
    }

    .pointList-link {
        border-radius: 4px
    }
}

@media only screen and (max-width: 1239px) {
    .pointList {
        gap: 8px
    }

    .pointList-item {
        width: 100%
    }

    .pointList-link {
        border-radius: 2px
    }
}

.couponList-item,
.ticketList-item {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap
}

.couponList-detail,
.ticketList-detail {
    display: flex;
    font-weight: 700
}

.couponList-link,
.ticketList-link {
    display: flex;
    gap: 4px;
    cursor: pointer
}

.couponList-link [data-tip],
.ticketList-link [data-tip] {
    margin-top: 3px
}

.couponList-link .couponList-name::after,
.couponList-link .ticketList-name::after,
.ticketList-link .couponList-name::after,
.ticketList-link .ticketList-name::after {
    display: inline-block;
    margin-left: 4px;
    background: #5a5a5a;
    mask: url(/jp/assets/icon/icon-modal.svg) center center/contain no-repeat;
    content: ""
}

.couponList-link:hover .couponList-name,
.couponList-link:hover .ticketList-name,
.ticketList-link:hover .couponList-name,
.ticketList-link:hover .ticketList-name {
    text-decoration: underline
}

.couponList-price,
.ticketList-price {
    white-space: nowrap
}

.couponList-status,
.ticketList-status {
    display: flex;
    align-items: center;
    gap: 8px
}

.couponList-note,
.ticketList-note {
    padding-left: 1em;
    text-indent: -1em;
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {

    .couponList-note,
    .ticketList-note {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {

    .couponList-note,
    .ticketList-note {
        font-size: 1.2rem
    }
}

@media print,
screen and (min-width: 1240px) {

    .couponList-item,
    .ticketList-item {
        justify-content: space-between;
        gap: 8px
    }

    .couponList-item+.couponList-item,
    .couponList-item+.ticketList-item,
    .ticketList-item+.couponList-item,
    .ticketList-item+.ticketList-item {
        margin-top: 16px
    }

    .couponList-detail,
    .ticketList-detail {
        flex: 1;
        gap: 32px;
        margin-top: 2px
    }

    .couponList-name,
    .ticketList-name {
        font-size: 1.8rem;
        line-height: 160%
    }

    .couponList-link .couponList-name::after,
    .couponList-link .ticketList-name::after,
    .ticketList-link .couponList-name::after,
    .ticketList-link .ticketList-name::after {
        width: 16px;
        height: 16px
    }

    .couponList-price,
    .ticketList-price {
        font-size: 2rem;
        font-weight: 700;
        line-height: 160%;
        letter-spacing: .04em;
        line-height: 130%
    }

    .couponList-expiry,
    .ticketList-expiry {
        padding: 4px 12px;
        background: #f7f7f7;
        font-size: 1.6rem;
        line-height: 160%
    }

    .couponList-note,
    .ticketList-note {
        width: 100%
    }
}

@media only screen and (max-width: 1239px) {

    .couponList-item,
    .ticketList-item {
        gap: 4px
    }

    .couponList-item+.couponList-item,
    .couponList-item+.ticketList-item,
    .ticketList-item+.couponList-item,
    .ticketList-item+.ticketList-item {
        margin-top: 12px
    }

    .couponList-item>*,
    .ticketList-item>* {
        width: 100%
    }

    .couponList-detail,
    .ticketList-detail {
        justify-content: space-between;
        font-size: 1.5rem;
        line-height: 160%
    }

    .couponList-link .couponList-name::after,
    .couponList-link .ticketList-name::after,
    .ticketList-link .couponList-name::after,
    .ticketList-link .ticketList-name::after {
        width: 12px;
        height: 12px
    }

    .couponList-status,
    .ticketList-status {
        justify-content: space-between;
        padding: 4px 8px;
        background: #f7f7f7
    }

    .couponList-expiry,
    .ticketList-expiry {
        margin-left: auto;
        font-size: 1.2rem;
        line-height: 160%
    }
}

.pointHistory-item {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.pointHistory-date {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .pointHistory-date {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .pointHistory-date {
        font-size: 1.2rem
    }
}

.pointHistory-point {
    font-weight: 700
}

@media print,
screen and (min-width: 1240px) {
    .pointHistory-item {
        padding-bottom: 12px;
        border-bottom: 1px solid #e6e6e6
    }

    .pointHistory-item+.pointHistory-item {
        margin-top: 12px
    }

    .pointHistory-point {
        font-size: 1.8rem;
        line-height: 160%
    }
}

@media only screen and (max-width: 1239px) {
    .pointHistory-item+.pointHistory-item {
        margin-top: 8px
    }

    .pointHistory-point {
        font-size: 1.2rem;
        line-height: 160%
    }
}

.couponHistory-date {
    width: 100%;
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .couponHistory-date {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .couponHistory-date {
        font-size: 1.2rem
    }
}

.couponHistory-detail {
    display: flex;
    align-items: flex-start;
    gap: 4px
}

.couponHistory-detail [data-tip] {
    margin-top: 3px
}

.couponHistory-name {
    font-weight: 700
}

.couponHistory-price {
    font-weight: 700;
    flex-shrink: 0
}

@media print,
screen and (min-width: 1240px) {
    .couponHistory-item {
        gap: 8px 32px;
        padding-bottom: 12px;
        border-bottom: 1px solid #e6e6e6
    }

    .couponHistory-item+.couponHistory-item {
        margin-top: 12px
    }

    .couponHistory-date {
        margin-bottom: 8px
    }

    .couponHistory-name {
        margin-right: 28px;
        font-size: 1.8rem;
        line-height: 160%
    }

    .couponHistory-price {
        font-size: 2rem;
        font-weight: 700;
        line-height: 160%;
        letter-spacing: .04em;
        line-height: 140%
    }
}

@media only screen and (max-width: 1239px) {
    .couponHistory-item {
        gap: 2px 4px
    }

    .couponHistory-item+.couponHistory-item {
        margin-top: 12px
    }

    .couponHistory-date {
        margin-bottom: 4px
    }

    .couponHistory-name {
        flex: 1;
        margin-right: 12px;
        font-size: 1.5rem;
        line-height: 160%
    }
}

.couponDetail-type {
    padding: 4px 8px;
    border-radius: 2px;
    background: #ea7000;
    color: #fff;
    line-height: 160%;
    text-align: center
}

@media print,
screen and (min-width: 1240px) {
    .couponDetail-type {
        font-size: 1.8rem
    }
}

@media only screen and (max-width: 1239px) {
    .couponDetail-type {
        font-size: 1.7rem
    }
}

.couponDetail dl dt {
    margin-bottom: 8px;
    padding-top: 16px;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: .02em
}

@media print,
screen and (min-width: 1240px) {
    .couponDetail dl dt {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .couponDetail dl dt {
        font-size: 1.2rem
    }
}

.couponDetail dl dd {
    padding-bottom: 16px;
    border-bottom: 1px solid #e6e6e6;
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .couponDetail dl dd {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .couponDetail dl dd {
        font-size: 1.2rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .couponDetail {
        padding: 0 32px
    }
}

.weekendMail {
    display: flex;
    gap: 16px
}

@media print,
screen and (min-width: 1240px) {
    .weekendMail {
        align-items: center
    }
}

@media only screen and (max-width: 1239px) {
    .weekendMail {
        flex-direction: column
    }
}

.favoList {
    border: 1px solid #e6e6e6
}

.favoList-item {
    display: flex;
    gap: 16px
}

.favoList-item+.favoList-item {
    border-top: 1px solid #e6e6e6
}

.favoList-img img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover
}

.favoList-detail {
    display: flex;
    gap: 16px
}

.favoList-marina span,
.favoList-marina a {
    display: inline-block
}

.favoList-marina a {
    font-weight: bold;
    text-decoration: underline
}

.favoList-marina a:hover {
    text-decoration: none
}

@media print,
screen and (min-width: 1240px) {
    .favoList-item {
        align-items: center;
        padding: 16px 24px
    }

    .favoList-img {
        width: 224px;
        flex-shrink: 0
    }

    .favoList-img img {
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover
    }

    .favoList-detail {
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap
    }

    .favoList-marina {
        width: 100%
    }

    .favoList dl {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px 16px;
        width: calc(100% - 16px - 256px)
    }

    .favoList dl dt {
        width: 8em
    }

    .favoList dl dd {
        width: calc(100% - 8em - 16px)
    }

    .favoList .lineBtn {
        width: 256px
    }
}

@media only screen and (max-width: 1239px) {
    .favoList-item {
        flex-direction: column;
        padding: 16px
    }

    .favoList-detail {
        flex-direction: column
    }

    .favoList-marina span {
        font-size: 1.2rem;
        line-height: 160%
    }

    .favoList dl dt {
        margin-bottom: 8px;
        font-size: 1.2rem;
        line-height: 160%
    }

    .favoList dl dd+dt {
        margin-top: 12px
    }
}

.favoSearchBox {
    position: relative;
    margin: 0 auto;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0px 2px 6px 0px rgba(5, 41, 66, .15);
    transition: var(--transition)
}

.favoSearchBox-tab {
    display: flex
}

.favoSearchBox-tab-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    background: #0371ee;
    color: #fff;
    cursor: pointer
}

.favoSearchBox-tab-item.is-current {
    background: #fff;
    color: #0065ab;
    cursor: default
}

.favoSearchBox-tab-item:first-child {
    border-radius: 4px 0 0 0
}

.favoSearchBox-tab-item:last-child {
    border-radius: 0 4px 0 0
}

.favoSearchBox-field {
    max-width: 528px;
    margin: 0 auto
}

.favoSearchBox-btn {
    margin-top: 24px
}

.favoSearchBox-result {
    margin-top: 32px
}

.favoSearchBox-area {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 32px;
    margin-bottom: 16px;
    color: #4a4a4a;
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .favoSearchBox-area {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .favoSearchBox-area {
        font-size: 1.2rem
    }
}

.favoSearchBox-area:first-child {
    margin-top: 0
}

.favoSearchBox-area-item {
    display: flex;
    align-items: center;
    gap: 4px
}

.favoSearchBox-area-item::after {
    content: "＞"
}

.favoSearchBox-area-item:last-child::after {
    display: none
}

@media print,
screen and (min-width: 1240px) {
    .favoSearchBox-tab-item {
        padding: 16px 8px;
        font-size: 1.6rem;
        line-height: 130%;
        letter-spacing: .02em;
        font-weight: 700
    }

    .favoSearchBox-content {
        padding: 32px 64px
    }
}

@media only screen and (max-width: 1239px) {
    .favoSearchBox-tab-item {
        padding: 8px;
        font-size: 1.2rem;
        line-height: 160%
    }

    .favoSearchBox-content {
        padding: 16px
    }
}

.tipRsv[data-status] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border: 1px solid rgba(0, 0, 0, 0);
    background: #fff;
    line-height: 130%;
    letter-spacing: .02em;
    white-space: nowrap
}

@media print,
screen and (min-width: 1240px) {
    .tipRsv[data-status] {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {
    .tipRsv[data-status] {
        font-size: 1rem
    }
}

.tipRsv[data-status=手続完了]::before {
    background: #0371ee;
    mask: url(/jp/assets/icon/icon-success.svg) center center/contain no-repeat;
    content: ""
}

.tipRsv[data-status=手続完了]:is(a) {
    text-decoration: underline
}

.tipRsv[data-status=手続完了]:is(a):hover {
    text-decoration: none
}

.tipRsv[data-status=手続未完了] {
    padding: 4px 12px;
    background: #0371ee;
    color: #fff
}

.tipRsv[data-status=手続未完了]:is(a) {
    text-decoration: underline
}

.tipRsv[data-status=手続未完了]:is(a):hover {
    text-decoration: none
}

.tipRsv[data-status*=済] {
    padding: 4px 12px;
    background: #e0e0e0;
    color: #acacac
}

.tipRsv[data-status=実績未入力] {
    padding: 4px 12px;
    background: #e0e0e0;
    color: #acacac
}

@media print,
screen and (min-width: 1240px) {
    .tipRsv[data-status=手続完了]::before {
        width: 16px;
        height: 16px
    }

    .tipRsv[data-status=手続未完了] {
        border-radius: 24px
    }

    .tipRsv[data-status*=済] {
        border-radius: 24px
    }

    .tipRsv[data-status=実績未入力] {
        border-radius: 24px
    }
}

@media only screen and (max-width: 1239px) {
    .tipRsv[data-status=手続完了]::before {
        width: 12px;
        height: 12px
    }

    .tipRsv[data-status=手続未完了] {
        border-radius: 20px
    }

    .tipRsv[data-status*=済] {
        border-radius: 20px
    }

    .tipRsv[data-status=実績未入力] {
        border-radius: 20px
    }
}

.tipCou[data-status] {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 17px;
    background: #fff;
    line-height: 160%;
    font-weight: 400;
    line-height: 130%;
    white-space: nowrap
}

@media print,
screen and (min-width: 1240px) {
    .tipCou[data-status] {
        font-size: 1rem
    }
}

@media only screen and (max-width: 1239px) {
    .tipCou[data-status] {
        font-size: .8rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .tipCou[data-status] {
        width: 44px;
        height: 21px
    }
}

@media only screen and (max-width: 1239px) {
    .tipCou[data-status] {
        width: 40px;
        height: 18px
    }
}

.tipCou[data-status=限定] {
    background: #e4005a;
    color: #fff
}

.checkinLink {
    list-style: disc;
    background: #f7f7f7
}

@media print,
screen and (min-width: 1240px) {
    .checkinLink {
        padding: 16px 16px 16px calc(16px + 1.5em);
        font-size: 1.6rem;
        line-height: 160%
    }

    .checkinLink a {
        font-size: 1.6rem;
        line-height: 130%;
        text-decoration: underline
    }

    .checkinLink a:hover {
        text-decoration: none
    }
}

@media only screen and (max-width: 1239px) {
    .checkinLink {
        padding: 12px 8px 12px calc(8px + 1.5em);
        font-size: 1.2rem;
        line-height: 160%
    }

    .checkinLink a {
        font-size: 1.2rem;
        line-height: 130%;
        text-decoration: underline
    }

    .checkinLink a:hover {
        text-decoration: none
    }
}

.topReserveList-item,
.reserveList-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 8px 16px
}

.topReserveList-item.is-cancel,
.reserveList-item.is-cancel {
    color: #acacac
}

.topReserveList-header,
.reserveList-header {
    display: flex;
    align-items: center;
    gap: 8px 16px;
    width: 100%
}

.topReserveList-date{
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {

    .topReserveList-date{
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {

    .topReserveList-date{
        font-size: 1.2rem
    }
}

.topReserveList-checkin,
.reserveList-checkin {
    width: 100%
}

.topReserveList-marina,
.reserveList-date,
.reserveList-marina {
    width: 100%;
    line-height: 160%;
    font-weight: 700
}

@media print,
screen and (min-width: 1240px) {

    .topReserveList-marina,
    .reserveList-date,
    .reserveList-marina {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {

    .topReserveList-marina,
    .reserveList-date,
    .reserveList-marina {
        font-size: 1.5rem
    }
}

@media only screen and (max-width: 1239px) {

    .topReserveList-item,
    .reserveList-item {
        margin-top: 8px;
        border-radius: 2px;
        background: #fff;
        box-shadow: 0px 2px 6px 0px rgba(5, 41, 66, .15);
        padding: 16px
    }

    .topReserveList-item:first-child,
    .reserveList-item:first-child {
        margin-top: 0
    }

    .topReserveList-header,
    .reserveList-header {
        justify-content: space-between
    }

    .topReserveList-detail,
    .reserveList-detail {
        width: 100%
    }
}

@media print,
screen and (min-width: 1240px) {
    .topReserveList-item {
        margin-top: 8px;
        border-radius: 4px;
        background: #fff;
        box-shadow: 0px 2px 6px 0px rgba(5, 41, 66, .15);
        padding: 16px
    }

    .topReserveList-item:first-child {
        margin-top: 0
    }

    .topReserveList-marina {
        width: 100%
    }

    .topReserveList-detail {
        width: 100%
    }
}

@media print,
screen and (min-width: 1240px) {
    .reserveList {
        border-radius: 4px;
        background: #fff;
        box-shadow: 0px 2px 6px 0px rgba(5, 41, 66, .15);
        padding: 32px 40px 48px
    }

    .reserveList-item {
        margin-top: 32px;
        padding-top: 32px;
        border-top: 1px solid #e6e6e6
    }

    .reserveList-item:first-child {
        margin-top: 0;
        padding-top: 0;
        border-top: none
    }
    
    .reserveList-date,
    .reserveList-marina {
        width: 100%
    }

    .reserveList-detail {
        flex: 1
    }
}

.schoolInfo {
    border: 1px solid #e6e6e6
}

.schoolInfo-ttl {
    padding: 8px 16px 0;
    font-weight: 700
}

.schoolInfo-txt+.schoolInfo-ttl {
    border-top: 1px solid #e6e6e6
}

.schoolInfo-txt {
    padding: 4px 16px 8px
}

@media print,
screen and (min-width: 1240px) {
    .schoolInfo {
        font-size: 1.6rem;
        line-height: 160%
    }
}

@media only screen and (max-width: 1239px) {
    .schoolInfo-ttl {
        font-size: 1rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .schoolInfo-txt {
        font-size: 1.2rem;
        line-height: 160%
    }
}

.contactInfo {
    display: flex;
    flex-direction: column;
    background: #f7f7f7;
    color: #4a4a4a;
    text-align: center
}

.contactInfo-ttl {
    font-weight: 700
}

.contactInfo-data-ttl {
    margin-bottom: 4px
}

@media print,
screen and (min-width: 1240px) {
    .contactInfo {
        gap: 16px;
        padding: 32px 16px
    }

    .contactInfo-name {
        font-size: 1.6rem;
        line-height: 160%
    }

    .contactInfo-tel {
        font-size: 2.4rem;
        font-weight: 700;
        line-height: 160%;
        letter-spacing: .04em;
        pointer-events: none
    }

    .contactInfo-data {
        font-size: 1.6rem;
        line-height: 160%
    }

    .contactInfo-data-txt+.contactInfo-data-ttl {
        margin-top: 16px
    }
}

@media only screen and (max-width: 1239px) {
    .contactInfo {
        gap: 12px;
        padding: 16px
    }

    .contactInfo-name {
        font-size: 1.2rem;
        line-height: 160%
    }

    .contactInfo-tel {
        font-size: 1.5rem;
        line-height: 160%
    }

    .contactInfo-data {
        font-size: 1rem;
        line-height: 160%;
        line-height: 130%
    }

    .contactInfo-data-txt+.contactInfo-data-ttl {
        margin-top: 8px
    }
}

.tipCi[data-status] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    padding: 3px 12px;
    border: 1px solid rgba(0, 0, 0, 0);
    background: #fff;
    font-size: 1rem;
    line-height: 130%;
    text-decoration: none !important;
    white-space: nowrap
}

.tipCi[data-status]:hover {
    text-decoration: underline
}

.tipCi[data-status]>* {
    width: 3em;
    text-align: center
}

.tipCi[data-status] b {
    padding: 1px 0;
    line-height: 130%;
    letter-spacing: .02em
}

@media print,
screen and (min-width: 1240px) {
    .tipCi[data-status] b {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .tipCi[data-status] b {
        font-size: 1.2rem
    }
}

.tipCi[data-status=完了] {
    border-color: #0371ee;
    color: #0371ee
}

.tipCi[data-status=未完了] {
    background: #0371ee;
    color: #fff
}

.tipCi[data-status*=済] {
    background: #e0e0e0;
    color: #acacac
}

@media print,
screen and (min-width: 1240px) {
    .tipCi[data-status] {
        border-radius: 24px
    }
}

@media only screen and (max-width: 1239px) {
    .tipCi[data-status] {
        border-radius: 20px
    }
}

.checkinInfo {
    display: flex
}

@media print,
screen and (min-width: 1240px) {
    .checkinInfo {
        align-items: flex-start;
        gap: 32px
    }

    .checkinInfo>* {
        width: calc(50% - 16px)
    }
}

@media only screen and (max-width: 1239px) {
    .checkinInfo {
        flex-direction: column;
        gap: 16px
    }
}

.checkinReserve {
    color: #363636
}

.checkinStatus-section:not(:first-child) {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e6e6e6
}

.checkinStatus-ttl {
    margin-bottom: 4px;
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .checkinStatus-ttl {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .checkinStatus-ttl {
        font-size: 1.2rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .checkinStatus {
        padding: 16px;
        border: 1px solid #e6e6e6;
        border-radius: 4px
    }
}

.checkinStatusList-item:not(:has(a)) {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0
}

.checkinStatusList-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0
}

.checkinStatusList-link::after {
    width: 16px;
    height: 16px;
    background: #5a5a5a;
    mask: url(/jp/assets/icon/icon-arrow_right.svg) center center/contain no-repeat;
    content: ""
}

.checkinStatusList-name {
    flex: 1
}

.checkinStatusList-link:hover .checkinStatusList-name {
    text-decoration: underline
}

.checkinEx-btn {
    display: block
}

.checkinEx-section>* {
    margin-bottom: 16px
}

.checkinEx-section>*:last-child {
    margin-bottom: 0
}

@media print,
screen and (min-width: 1240px) {
    .checkinEx {
        margin-bottom: 32px
    }

    .checkinEx-content {
        padding-top: 32px
    }

    .checkinEx-section {
        margin-bottom: 32px
    }

    .checkinEx-section:last-child {
        margin-bottom: 0
    }

    .checkinEx .tertiaryTtl {
        margin-bottom: 16px
    }
}

@media only screen and (max-width: 1239px) {
    .checkinEx {
        margin-bottom: 24px
    }

    .checkinEx-content {
        padding-top: 24px
    }

    .checkinEx-section {
        margin-bottom: 24px
    }

    .checkinEx-section:last-child {
        margin-bottom: 0
    }

    .checkinEx .tertiaryTtl {
        margin-bottom: 8px
    }
}

.is-start>*:not(.contantHeader) {
    color: #acacac
}

.is-start .secondaryTtl,
.is-start .tertiaryTtl {
    color: #acacac
}

.is-start .checkinStatusList-link {
    pointer-events: none
}

.is-start .checkinStatusList-link::after {
    background: #acacac
}

.is-start .inputCheck {
    pointer-events: none
}

.is-start .inputCheck input[type=checkbox] {
    border-color: #e0e0e0
}

.is-start .inputCheck input[type=checkbox]+* {
    color: #acacac
}

.is-start .inputCheck input[type=checkbox]:checked {
    border-color: #e0e0e0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>') center center/100% auto no-repeat #e0e0e0
}

.checkinNavBtn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #0371ee;
    background: #fff;
    color: #0371ee;
    line-height: 130%;
    letter-spacing: .02em;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: var(--transition)
}

@media print,
screen and (min-width: 1240px) {
    .checkinNavBtn {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {
    .checkinNavBtn {
        font-size: 1rem
    }
}

.checkinNavBtn::before {
    width: 32px;
    height: 32px;
    background: #0371ee;
    content: ""
}

.checkinNavBtn.icon-erase::before {
    mask: url(/jp/assets/icon/icon-erase.svg) center center/contain no-repeat
}

.checkinNavBtn.icon-undo::before {
    mask: url(/jp/assets/icon/icon-undo.svg) center center/contain no-repeat
}

.checkinNavBtn.icon-edit::before {
    mask: url(/jp/assets/icon/icon-edit.svg) center center/contain no-repeat
}

.checkinNavBtn:hover {
    background: #e4f2ff
}

.checkinNavBtn:disabled,
.checkinNavBtn.is-disabled {
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    background: #e0e0e0;
    color: #acacac
}

.checkinNavBtn:disabled::before,
.checkinNavBtn.is-disabled::before {
    background: #acacac
}

.checkinNaviarea-btn {
    display: flex;
    gap: 16px
}

@media print,
screen and (min-width: 1240px) {
    .checkinNaviarea-btn {
        margin-top: 32px
    }
}

@media only screen and (max-width: 1239px) {
    .checkinNaviarea-btn {
        margin-top: 16px
    }
}

.naviareaZoom {
    position: relative;
    width: fit-content;
    margin: 0 auto;
    background: #f7f7f7;
    overflow: hidden
}

.naviareaZoom-inner {
    text-align: center;
    vertical-align: middle
}

.naviareaZoom-imgwrap {
    display: inline-block;
    width: fit-content;
    transition: all .3s ease-out
}

.naviareaZoom img {
    width: auto;
    max-width: 100%;
    max-height: 75vh;
    pointer-events: none
}

.naviareaZoom-control {
    display: flex;
    flex-direction: column;
    gap: 1px;
    position: absolute;
    right: 8px;
    bottom: 8px;
    border-radius: 2px;
    overflow: hidden
}

.naviareaZoom-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, .3);
    cursor: pointer
}

.naviareaZoom-btn::before {
    display: block;
    width: 20px;
    height: 20px;
    background: #fff;
    content: ""
}

.naviareaZoom-btn.icon-plus::before {
    mask: url(/jp/assets/icon/icon-add.svg) center center/contain no-repeat
}

.naviareaZoom-btn.icon-minus::before {
    mask: url(/jp/assets/icon/icon-minus.svg) center center/contain no-repeat
}

.limitPassenger-ttl {
    margin-bottom: 8px;
    font-weight: 700
}

.limitPassenger-footer {
    display: flex;
    text-align: center
}

.limitPassenger-txt b {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .limitPassenger-txt b {
        font-size: 1.8rem
    }
}

@media only screen and (max-width: 1239px) {
    .limitPassenger-txt b {
        font-size: 1.7rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .limitPassenger-footer {
        justify-content: center;
        align-items: center;
        gap: 32px
    }
}

@media only screen and (max-width: 1239px) {
    .limitPassenger label:has(input[type=checkbox]) {
        align-items: center;
        font-size: 1.5rem;
        line-height: 160%
    }

    .limitPassenger-footer {
        flex-direction: column;
        gap: 8px
    }
}

.searchHmBox {
    margin-top: 8px;
    border: 1px solid #e6e6e6
}

.searchHmBox-name {
    display: flex;
    gap: 16px
}

.searchHmBox-input {
    margin-bottom: 16px
}

.searchHmBox-filter-more {
    padding-top: 16px
}

.searchHmBox-filter-inner {
    display: flex;
    gap: 16px
}

.searchHmBox-filter-ttl {
    margin-bottom: 8px;
    color: #4a4a4a
}

.searchHmBox-btn {
    display: flex;
    gap: 16px;
    border-top: 1px solid #e6e6e6
}

@media print,
screen and (min-width: 1240px) {
    .searchHmBox {
        padding: 32px;
        border-radius: 4px
    }

    .searchHmBox input {
        font-size: 1.6rem;
        line-height: 160%
    }

    .searchHmBox-name {
        align-items: flex-start
    }

    .searchHmBox-name .searchHmDropMarina-wrap {
        flex: 1;
        margin-top: 1px
    }

    .searchHmBox-name .searchBtn {
        width: fit-content
    }

    .searchHmBox-input {
        display: flex;
        align-items: center;
        gap: 8px
    }

    .searchHmBox-input-ttl {
        width: 160px;
        font-size: 1.6rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .searchHmBox-input-ttl+* {
        flex: 1
    }

    .searchHmBox-filter {
        margin-bottom: 24px
    }

    .searchHmBox-filter-inner {
        flex-wrap: wrap;
        padding: 24px;
        background: #eef4fa
    }

    .searchHmBox-filter-group {
        width: calc(33.33% - 10.66px)
    }

    .searchHmBox-filter-group:first-child {
        width: 100%
    }

    .searchHmBox-filter-ttl {
        font-size: 1.6rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .searchHmBox-btn {
        justify-content: center;
        flex-direction: row-reverse;
        margin: 0 -32px -32px;
        padding: 24px 32px 32px
    }

    .searchHmBox-btn>* {
        margin: 0
    }
}

@media only screen and (max-width: 1239px) {
    .searchHmBox {
        padding: 16px;
        border-radius: 2px
    }

    .searchHmBox .inputCheck label {
        align-items: center
    }

    .searchHmBox-name {
        flex-direction: column
    }

    .searchHmBox-input-ttl {
        margin-bottom: 8px;
        font-size: 1.2rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .searchHmBox-filter {
        margin-bottom: 16px
    }

    .searchHmBox-filter-inner {
        flex-direction: column
    }

    .searchHmBox-filter-ttl {
        font-size: 1.2rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .searchHmBox-filter .inputCheck label:has(input[type=checkbox]) {
        font-size: 1rem;
        line-height: 160%
    }

    .searchHmBox-btn {
        flex-direction: column;
        margin: 0 -16px -16px;
        padding: 16px
    }
}

.searchHmDropMarina {
    display: none;
    position: absolute;
    top: 38px;
    width: 240px;
    max-height: min(320px, 50dvh - 16px);
    border-radius: 2px;
    background: #fff;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0px 4px 6px 4px rgba(0, 0, 0, .2)
}

.searchHmDropMarina::-webkit-scrollbar {
    border-radius: 0 2px 2px 0;
    width: 20px
}

.searchHmDropMarina::-webkit-scrollbar-thumb {
    border-radius: 12px;
    border: 4px solid #fff;
    border-top-width: 8px;
    border-bottom-width: 8px;
    background: #d9d9d9
}

.searchHmDropMarina-wrap {
    position: relative
}

.searchHmDropMarina-wrap input[type=text] {
    cursor: text !important
}

.searchHmDropMarina-ttl {
    display: block;
    padding: 12px 8px 8px;
    font-size: 1rem;
    line-height: 160%;
    line-height: 130%;
    font-weight: 700
}

.searchHmDropMarina label {
    display: block;
    padding: 8px 12px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 1.4rem;
    line-height: 160%
}

.searchHmDropMarina label input[type=radio] {
    display: none
}

.searchHmDropMarina label:has(input[type=radio]:checked) {
    background: #eef4fa
}

.searchHmDropMarina-ttl+label {
    border-top: 1px solid #e6e6e6
}

.searchHmDropArea {
    display: none;
    position: absolute;
    top: 38px;
    width: 240px;
    max-height: 320px;
    border-radius: 2px;
    background: #fff;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0px 4px 6px 4px rgba(0, 0, 0, .2)
}

.searchHmDropArea::-webkit-scrollbar {
    border-radius: 0 2px 2px 0;
    width: 12px
}

.searchHmDropArea::-webkit-scrollbar-thumb {
    border-radius: 12px;
    border: 4px solid #fff;
    border-top-width: 8px;
    border-bottom-width: 8px;
    background: #d9d9d9
}

.searchHmDropArea-wrap {
    position: relative
}

.searchHmDropArea-wrap input[type=text] {
    cursor: text !important
}

.searchHmDropArea label {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 8px 16px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 1.4rem;
    line-height: 160%
}

.searchHmDropArea label:has(b) {
    padding: 12px 8px
}

.searchHmDropArea label:has(b) b {
    font-weight: 400
}

.searchHmDropArea label input[type=radio] {
    display: none
}

.searchHmDropArea label input[type=radio]+* {
    overflow: hidden;
    text-overflow: ellipsis
}

.searchHmDropArea label>* {
    white-space: nowrap
}

.searchHmDropArea label:has(input[type=radio]:checked) {
    background: #eef4fa
}

@media print,
screen and (min-width: 1240px) {
    .mapHmBox {
        margin-top: 8px;
        padding: 64px 32px;
        border: 1px solid #e6e6e6;
        border-radius: 4px
    }

    .mapHmBox-inner {
        position: relative;
        max-width: 790px;
        margin: 0 auto
    }
}

@media print,
screen and (min-width: 1240px) {
    .mapHmDropArea {
        display: none;
        position: absolute;
        width: 240px;
        max-height: 320px;
        border-radius: 2px;
        background: #fff;
        overflow-y: auto;
        z-index: 100;
        box-shadow: 0px 4px 6px 4px rgba(0, 0, 0, .2)
    }

    .mapHmDropArea::-webkit-scrollbar {
        border-radius: 0 2px 2px 0;
        width: 12px
    }

    .mapHmDropArea::-webkit-scrollbar-thumb {
        border-radius: 12px;
        border: 4px solid #fff;
        border-top-width: 8px;
        border-bottom-width: 8px;
        background: #d9d9d9
    }

    .mapHmDropArea-wrap {
        position: absolute;
        transform: translate(-50%, -50%)
    }

    .mapHmDropArea-wrap input[type=text] {
        cursor: text !important
    }

    .mapHmDropArea-wrap.hokkaido {
        top: 12.14%;
        left: 57.34%
    }

    .mapHmDropArea-wrap.hokkaido .mapHmDropArea {
        top: 0;
        left: 100%
    }

    .mapHmDropArea-wrap.tohoku {
        top: 40.71%;
        left: 79.37%
    }

    .mapHmDropArea-wrap.tohoku .mapHmDropArea {
        top: 0;
        left: 100%
    }

    .mapHmDropArea-wrap.kanto {
        top: 63.93%;
        left: 75.32%
    }

    .mapHmDropArea-wrap.kanto .mapHmDropArea {
        top: 0;
        left: 100%
    }

    .mapHmDropArea-wrap.chubu {
        top: 77.14%;
        left: 64.43%
    }

    .mapHmDropArea-wrap.chubu .mapHmDropArea {
        bottom: 0;
        left: 100%
    }

    .mapHmDropArea-wrap.kansai {
        top: 54.46%;
        left: 45.32%
    }

    .mapHmDropArea-wrap.kansai .mapHmDropArea {
        top: 0;
        left: 100%
    }

    .mapHmDropArea-wrap.chugoku {
        top: 64.29%;
        left: 31.27%;
        z-index: 1
    }

    .mapHmDropArea-wrap.chugoku .mapHmDropArea {
        top: 0;
        left: 100%
    }

    .mapHmDropArea-wrap.shikoku {
        top: 84.64%;
        left: 48.35%
    }

    .mapHmDropArea-wrap.shikoku .mapHmDropArea {
        top: 0;
        left: 100%
    }

    .mapHmDropArea-wrap.kyusyu {
        top: 96.61%;
        left: 32.91%;
        z-index: 1
    }

    .mapHmDropArea-wrap.kyusyu .mapHmDropArea {
        bottom: 0;
        left: 100%
    }

    .mapHmDropArea-wrap.okinawa {
        top: 77.14%;
        left: 9.49%;
        z-index: 1
    }

    .mapHmDropArea-wrap.okinawa .mapHmDropArea {
        top: 0;
        left: 100%
    }

    .mapHmDropArea-wrap.lake {
        top: 36.43%;
        left: 10.89%;
        width: 104px
    }

    .mapHmDropArea-wrap.abroad {
        top: 17.68%;
        left: 10.89%;
        width: 104px
    }

    .mapHmDropArea a {
        display: flex;
        align-items: center;
        gap: 0;
        width: 100%;
        padding: 8px 16px;
        border-bottom: 1px solid #e6e6e6;
        font-size: 1.4rem;
        line-height: 160%
    }

    .mapHmDropArea a:has(b) {
        padding: 12px 8px;
        color: #0371ee;
        font-weight: 700
    }

    .mapHmDropArea a:hover {
        background: #eef4fa
    }

    .mapHmDropArea a>*:first-child {
        overflow: hidden;
        text-overflow: ellipsis
    }

    .mapHmDropArea a>* {
        white-space: nowrap
    }
}

#resultMap {
    background: #f7f7f7
}

@media print,
screen and (min-width: 1240px) {
    #resultMap {
        height: 480px
    }
}

.resultHm {
    display: flex;
    gap: 16px 24px
}

.resultHm:nth-last-child(1) {
    margin-bottom: 0
}

.resultHm-area {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #4a4a4a
}

.resultHm-area-item {
    display: flex;
    align-items: center;
    gap: 4px
}

.resultHm-area-item::after {
    content: "＞"
}

.resultHm-area-item:last-child::after {
    display: none
}

.resultHm-ttl {
    position: relative
}

.resultHm-ttl::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 4px;
    background: linear-gradient(164deg, #1A91FF 6.92%, #243FCE 95.35%);
    transform: rotate(180deg);
    content: ""
}

.resultHm-ttl-name {
    text-decoration: underline
}

.resultHm-ttl-name:hover {
    text-decoration: none
}

.resultHm-icon {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px
}

.resultHm-icon img {
    width: 36px
}

.resultHm-img {
    display: block;
    aspect-ratio: 16/9;
    object-fit: cover
}

.resultHm-detail {
    width: 100%
}

.resultHm-detail table {
    width: 100%
}

.resultHm-detail table tr {
    border-bottom: 1px solid #e6e6e6
}

.resultHm-detail table th {
    width: fit-content;
    font-weight: bold;
    white-space: nowrap
}

.resultHm-detail table td {
    width: 100%
}

.resultHm-detail .textLink {
    color: #0371ee
}

@media print,
screen and (min-width: 1240px) {
    .resultHm {
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap
    }

    .resultHm:not(:last-child) {
        margin-bottom: 64px
    }

    .resultHm-area {
        width: 100%;
        margin-bottom: 16px;
        font-size: 1.6rem;
        line-height: 160%
    }

    .resultHm-ttl {
        margin-bottom: 24px;
        padding-left: 24px
    }

    .resultHm-ttl::before {
        width: 8px
    }

    .resultHm-ttl-name {
        font-size: 2rem;
        font-weight: 700;
        line-height: 160%;
        letter-spacing: .04em
    }

    .resultHm-address {
        margin-bottom: 16px;
        font-size: 1.6rem;
        line-height: 160%
    }

    .resultHm-img {
        width: 252px
    }

    .resultHm-detail {
        width: 100%
    }

    .resultHm-detail table {
        border-top: 1px solid #e6e6e6
    }

    .resultHm-detail table th {
        padding: 8px 12px;
        font-size: 1.4rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .resultHm-detail table td {
        padding: 8px 12px;
        font-size: 1.6rem;
        line-height: 160%
    }

    .resultHm-btn {
        width: 100%
    }
}

@media only screen and (max-width: 1239px) {
    .resultHm {
        flex-direction: column
    }

    .resultHm:not(:last-child) {
        margin-bottom: 40px
    }

    .resultHm-area {
        font-size: 1.2rem;
        line-height: 160%
    }

    .resultHm-ttl {
        margin-bottom: 8px;
        padding-left: 12px;
        line-height: 100%
    }

    .resultHm-ttl::before {
        width: 4px
    }

    .resultHm-ttl-name {
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 160%;
        letter-spacing: .04em;
        line-height: 130%
    }

    .resultHm-address {
        margin-bottom: 8px;
        font-size: 1.2rem;
        line-height: 160%
    }

    .resultHm-img {
        width: 100%
    }

    .resultHm-detail {
        margin-top: -16px
    }

    .resultHm-detail table th {
        padding: 12px 8px 12px 0;
        font-size: 1rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .resultHm-detail table td {
        padding: 12px 0;
        font-size: 1.2rem;
        line-height: 160%
    }
}

.marinaTabNav .tabNav-item {
    min-width: 68px
}

@media only screen and (max-width: 1239px) {
    .marinaTabNav {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        width: calc(100% + 16px + 16px);
        margin: 0 -16px 4px;
        padding-bottom: 5px
    }

    .marinaTabNav .tabNav-item {
        scroll-snap-align: start
    }
}

.tipMrn[data-status] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: fit-content;
    background: #fff;
    line-height: 130%;
    letter-spacing: .02em;
    text-decoration: none !important;
    white-space: nowrap
}

@media print,
screen and (min-width: 1240px) {
    .tipMrn[data-status] {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .tipMrn[data-status] {
        font-size: 1.2rem
    }
}

.tipMrn[data-status=休止] {
    background: rgba(222, 24, 24, .1);
    color: #de1818
}

@media print,
screen and (min-width: 1240px) {
    .tipMrn[data-status] {
        padding: 8px 10px
    }
}

@media only screen and (max-width: 1239px) {
    .tipMrn[data-status] {
        padding: 4px 8px
    }
}

.marinaHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 8px
}

.marinaHeader-name {
    display: flex;
    gap: 8px
}

.marinaHeader-icon {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%
}

.marinaHeader-icon img {
    display: block;
    width: 32px
}

.marinaHeader-sns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.marinaHeader-sns a {
    transition: var(--transition)
}

.marinaHeader-sns a:hover {
    opacity: .6
}

.marinaHeader-sns img {
    display: block
}

.marinaHeader-lecture {
    width: 100%
}

@media print,
screen and (min-width: 1240px) {
    .marinaHeader {
        margin-top: 64px;
        margin-bottom: 32px;
        padding-right: calc((100% - 1080px)/2);
        padding-left: calc((100% - 1080px)/2)
    }

    .marinaHeader-name {
        align-items: center;
        width: calc(100% - 142px)
    }

    .marinaHeader-name .primaryTtl {
        flex: 1
    }

    .marinaHeader-fav {
        order: 1
    }

    .marinaHeader-icon {
        order: 2
    }

    .marinaHeader-sns {
        order: 2
    }

    .marinaHeader-sns img {
        width: 32px
    }

    .marinaHeader-lecture {
        order: 3
    }

    .marinaHeader+.wrap:not(.bg-grad, .pc-bg-grad)>.section:first-child {
        padding-top: 0
    }
}

@media only screen and (max-width: 1239px) {
    .marinaHeader {
        margin-top: 16px;
        margin-bottom: 16px;
        padding-right: max(16px, (100% - 720px)/2);
        padding-left: max(16px, (100% - 720px)/2)
    }

    .marinaHeader-name {
        flex-direction: column
    }

    .marinaHeader-sns {
        margin-bottom: 8px
    }

    .marinaHeader-sns img {
        width: 24px
    }

    .marinaHeader-fav {
        margin-bottom: 8px
    }

    .marinaHeader-fav:not(.marinaHeader-sns+.marinaHeader-fav) {
        width: 100%
    }

    .marinaHeader-fav:not(.marinaHeader-sns+.marinaHeader-fav) .lineBtn {
        margin-right: 0
    }

    .marinaHeader-lecture {
        order: 3;
        padding-bottom: 8px
    }

    .marinaHeader+.wrap:not(.bg-grad, .sp-bg-grad)>.section:first-child {
        padding-top: 0
    }
}

@media only screen and (max-width: 1239px) {
    .marinaBg {
        background: linear-gradient(164deg, #1A91FF 6.92%, #243FCE 95.35%)
    }

    .marinaBg .section {
        padding-top: 16px;
        padding-bottom: 16px
    }

    .marinaBg .secondaryTtl {
        border-bottom: 1px solid #fff;
        color: #fff
    }

    .marinaBg .searchCal table caption {
        color: #fff
    }

    .marinaBg .searchCal-note {
        color: #fff
    }
}

.marinaSearchBox {
    border-radius: 4px;
    background: #fff;
    box-shadow: 0px 2px 6px 0px rgba(5, 41, 66, .15)
}

.marinaSearchBox-header {
    display: flex;
    align-items: baseline;
    gap: 4px;
    border-bottom: 1px solid #e6e6e6
}

.marinaSearchBox-result-num {
    display: flex;
    align-items: baseline;
    gap: 4px
}

.marinaSearchBox-footer {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 4px;
    border-top: 1px solid #e6e6e6
}

.marinaSearchBox-narrow-num {
    display: flex;
    align-items: baseline;
    gap: 4px
}

.marinaSearchBox-btn {
    width: 100%
}

.marinaSearchBox .searchField-filter-btn {
    margin-top: 0
}

@media print,
screen and (min-width: 1240px) {
    .marinaSearchBox {
        border-radius: 4px
    }

    .marinaSearchBox-header {
        justify-content: center;
        padding: 8px 24px;
        font-size: 1.4rem;
        line-height: 160%
    }

    .marinaSearchBox-result-num b {
        font-size: 2rem;
        font-weight: 700;
        line-height: 160%;
        letter-spacing: .04em
    }

    .marinaSearchBox-footer {
        justify-content: center;
        padding: 8px 24px 16px;
        font-size: 1.4rem;
        line-height: 160%
    }

    .marinaSearchBox-narrow-num {
        font-size: 1.6rem;
        line-height: 160%
    }

    .marinaSearchBox-narrow-num b {
        font-size: 2.6rem;
        font-weight: 700;
        line-height: 130%;
        letter-spacing: .04em
    }

    .marinaSearchBox .searchField.js-accordion>[data-accordion-btn] {
        color: #4a4a4a;
        font-size: 1.6rem;
        line-height: 160%;
        font-weight: 700;
        text-decoration: none;
        cursor: default;
        pointer-events: none
    }

    .marinaSearchBox .searchField.js-accordion>[data-accordion-btn]::after {
        display: none
    }

    .marinaSearchBox .searchField.js-accordion>[data-accordion-content] {
        display: block !important
    }
}

@media only screen and (max-width: 1239px) {
    .marinaSearchBox {
        border-radius: 2px
    }

    .marinaSearchBox-header {
        justify-content: space-between;
        padding: 16px 16px 8px;
        font-size: 1rem;
        line-height: 160%
    }

    .marinaSearchBox-result-num b {
        font-size: 1.4rem;
        font-weight: 700;
        line-height: 160%;
        letter-spacing: .04em
    }

    .marinaSearchBox-body {
        background: #eef4fa;
        padding: 16px
    }

    .marinaSearchBox-footer {
        justify-content: space-between;
        padding: 8px 16px 16px;
        font-size: 1rem;
        line-height: 160%
    }

    .marinaSearchBox-narrow-num b {
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 160%;
        letter-spacing: .04em
    }

    .marinaSearchBox .searchField-filter-btn {
        justify-content: space-between;
        width: 100%;
        font-size: 1.2rem;
        line-height: 160%
    }
}

.marinaSearchResult-control {
    color: #fff
}

.marinaSearchResult-control input[type=checkbox] {
    border-color: #fff
}

.marinaSearchResult-control input[type=checkbox]:not(:checked) {
    background: none
}

.marinaSearchResult .accBtn {
    color: #fff;
    text-decoration: underline
}

.marinaSearchResult .accBtn::after {
    background: #fff
}

.marinaSearchResult .accBtn:hover {
    text-decoration: none
}

.marinaSearchResult .js-accordion.is-open .accBtn span {
    display: none
}

.marinaSearchResult .js-accordion.is-open .accBtn::before {
    content: "閉じる"
}

@media print,
screen and (min-width: 1240px) {
    .marinaSearchResult-control {
        text-align: right
    }
}

@media only screen and (max-width: 1239px) {
    .marinaSearchResult-control {
        margin: 0 -16px;
        padding: 0 16px;
        border-bottom: 1px solid #fff
    }
}

.marinaImg .swiper-slide {
    aspect-ratio: 16/9;
    object-fit: cover
}

.marinaImg .swiper-slide img {
    width: 100%;
    transition: var(--transition)
}

@media print,
screen and (min-width: 1240px) {
    .js-marinaImg.swiper-initialized .swiper-slide:not(.swiper-slide-active) img {
        opacity: .7
    }
}

.marinaData-item {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #e6e6e6
}

.marinaData-ttl {
    font-weight: 700
}

.marinaData-content {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .marinaData-content {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .marinaData-content {
        font-size: 1.2rem
    }
}

.marinaData-content a {
    text-decoration: underline
}

.marinaData-content a:hover {
    text-decoration: none
}

.marinaData-content P+P {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical
}

.marinaData-icon {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px
}

.marinaData-icon+.marinaData-icon {
    margin-top: 8px
}

.marinaData-icon-item img {
    width: 32px
}

.marinaData-event {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 32px
}

.marinaData-link {
    line-height: 160%;
    text-align: right
}

@media print,
screen and (min-width: 1240px) {
    .marinaData-link {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .marinaData-link {
        font-size: 1.2rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .marinaData {
        display: flex;
        flex-wrap: wrap;
        gap: 0 24px
    }

    .marinaData-item {
        flex-direction: column;
        gap: 8px;
        width: calc(50% - 12px)
    }

    .marinaData-ttl {
        font-size: 1.6rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .marinaData-content {
        flex: 1
    }

    .marinaData-content p+p {
        -webkit-line-clamp: 1;
        max-height: 1.6em
    }
}

@media only screen and (max-width: 1239px) {
    .marinaData-item {
        flex-wrap: wrap;
        gap: 8px
    }

    .marinaData-ttl {
        width: 80px;
        padding: 4px 0;
        font-size: 1rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .marinaData-content {
        width: calc(100% - 80px - 8px)
    }

    .marinaData-content p+p {
        -webkit-line-clamp: 2;
        max-height: 3.2em
    }

    .marinaData-link {
        width: 100%
    }
}

@media print,
screen and (min-width: 1240px) {
    .marinaTxt {
        font-size: 1.6rem;
        line-height: 160%
    }
}

@media only screen and (max-width: 1239px) {
    .marinaTxt {
        font-size: 1.2rem;
        line-height: 160%
    }
}

.marinaHtml {
    overflow: hidden
}

.marinaMovie .movieBox {
    max-width: 712px;
    margin: 0 auto
}

@media print,
screen and (min-width: 1240px) {
    .marinaMovie .tertiaryTtl {
        margin-bottom: 16px
    }
}

@media only screen and (max-width: 1239px) {
    .marinaMovie .tertiaryTtl {
        margin-bottom: 8px
    }
}

@media print,
screen and (min-width: 1240px) {
    .marinaBoat .secondaryTtl {
        color: #fff
    }
}

.marinaAccess {
    display: flex
}

.marinaAccess-txt {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .marinaAccess-txt {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .marinaAccess-txt {
        font-size: 1.2rem
    }
}

.marinaAccess-link {
    line-height: 160%;
    text-align: right
}

@media print,
screen and (min-width: 1240px) {
    .marinaAccess-link {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .marinaAccess-link {
        font-size: 1.2rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .marinaAccess {
        gap: 24px
    }

    .marinaAccess-map {
        width: 640px
    }

    .marinaAccess-txt {
        width: 416px
    }

    .marinaAccess-link {
        margin-top: 16px
    }
}

@media only screen and (max-width: 1239px) {
    .marinaAccess {
        flex-direction: column;
        gap: 16px
    }

    .marinaAccess-link {
        margin-top: 8px
    }
}

@media print,
screen and (min-width: 1240px) {
    #marinaMap {
        width: 640px;
        height: max(75vh, 500px)
    }
}

@media only screen and (max-width: 1239px) {
    #marinaMap {
        aspect-ratio: 10/7
    }
}

@media print,
screen and (min-width: 1240px) {
    .marinaCMap {
        display: flex;
        gap: 24px
    }

    .marinaCMap-map {
        width: 640px
    }

    .marinaCMap .mapZoom {
        width: 100%
    }

    .marinaCMap-icon {
        width: 416px
    }
}

.cruisingIcon-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0
}

.cruisingIcon-item:not(:last-child) {
    border-bottom: 1px solid #e6e6e6
}

.cruisingIcon-icon {
    flex-shrink: 0;
    width: 32px
}

.cruisingIcon-txt {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .cruisingIcon-txt {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .cruisingIcon-txt {
        font-size: 1.2rem
    }
}

.paymentList {
    display: flex;
    flex-wrap: wrap
}

.paymentList-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 600px;
    margin: 0 auto
}

.paymentList-section:not(:last-child) {
    border-bottom: 1px solid #e6e6e6
}

.paymentList-ttl {
    margin-bottom: 8px;
    color: #4a4a4a;
    font-weight: 700
}

@media print,
screen and (min-width: 1240px) {
    .paymentList-section:not(:last-child) {
        padding-bottom: 32px
    }

    .paymentList-ttl {
        font-size: 1.4rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .paymentList-item {
        width: 16.66%
    }

    .paymentList-item.ic {
        width: 36%
    }

    .paymentList-item.cn {
        width: 50%
    }
}

@media only screen and (max-width: 1239px) {
    .paymentList-section:not(:last-child) {
        padding-bottom: 16px
    }

    .paymentList-ttl {
        font-size: 1rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .paymentList-item {
        width: 25%
    }

    .paymentList-item.ic {
        width: 50%
    }

    .paymentList-item.cn {
        width: 75%
    }
}

.serviceList {
    display: flex
}

.serviceList-item {
    display: flex;
    align-items: center;
    gap: 8px
}

.serviceList-icon {
    width: 32px
}

.serviceList-txt {
    flex: 1;
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .serviceList-txt {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .serviceList-txt {
        font-size: 1.2rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .serviceList {
        flex-wrap: wrap;
        gap: 8px 24px
    }

    .serviceList+.serviceList {
        margin-top: 24px
    }

    .serviceList-item {
        width: calc(50% - 12px)
    }
}

@media only screen and (max-width: 1239px) {
    .serviceList {
        flex-direction: column;
        gap: 8px
    }

    .serviceList+.serviceList {
        margin-top: 16px
    }
}

.suppliesList {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 600px;
    margin: 0 auto
}

.suppliesList-item:not(:last-child) {
    padding-bottom: 16px;
    border-bottom: 1px solid #e6e6e6
}

.suppliesList-ttl {
    margin-bottom: 8px;
    line-height: 130%;
    letter-spacing: .02em;
    font-weight: bold
}

@media print,
screen and (min-width: 1240px) {
    .suppliesList-ttl {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .suppliesList-ttl {
        font-size: 1.2rem
    }
}

.suppliesList-txt {
    margin-bottom: 4px;
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .suppliesList-txt {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {
    .suppliesList-txt {
        font-size: 1rem
    }
}

.suppliesList-detail {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .suppliesList-detail {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .suppliesList-detail {
        font-size: 1.2rem
    }
}

.suppliesList-detail ul {
    list-style-type: disc;
    margin-left: 2em
}

.marinaBoatImg img {
    width: 100%
}

.marinaRule {
    display: flex;
    flex-direction: column
}

@media print,
screen and (min-width: 1240px) {
    .marinaRule {
        gap: 16px
    }

    .marinaRule:not(:last-child) {
        margin-bottom: 32px
    }
}

@media only screen and (max-width: 1239px) {
    .marinaRule {
        gap: 8px
    }

    .marinaRule:not(:last-child) {
        margin-bottom: 16px
    }
}

.js-ruleAccordion [data-accordion-content] {
    overflow: hidden;
    transition: .3s all ease
}

.js-ruleAccordion:not(.is-open) [data-accordion-content] {
    position: relative
}

.js-ruleAccordion:not(.is-open) [data-accordion-content]::after {
    position: absolute;
    top: 70%;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 80%);
    content: ""
}

@media print,
screen and (min-width: 1240px) {
    .js-ruleAccordion [data-accordion-content] {
        padding-bottom: 32px
    }

    .js-ruleAccordion:not(.is-open) [data-accordion-content] {
        height: 430px
    }
}

@media only screen and (max-width: 1239px) {
    .js-ruleAccordion [data-accordion-content] {
        padding-bottom: 16px
    }

    .js-ruleAccordion:not(.is-open) [data-accordion-content] {
        height: 300px
    }
}

@media print,
screen and (min-width: 1240px) {
    .emgContact {
        padding: 32px;
        background: rgba(255, 255, 255, .9)
    }
}

.emgContactList {
    display: flex
}

.emgContactList-item {
    border-bottom: 1px solid #e6e6e6
}

.emgContactList-ttl {
    font-weight: 700
}

.emgContactList-number {
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em
}

@media print,
screen and (min-width: 1240px) {
    .emgContactList-number {
        font-size: 2rem
    }
}

@media only screen and (max-width: 1239px) {
    .emgContactList-number {
        font-size: 1.8rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .emgContactList {
        flex-wrap: wrap;
        gap: 0 24px
    }

    .emgContactList-item {
        width: calc(50% - 12px);
        padding: 24px 0
    }

    .emgContactList-item:nth-child(1),
    .emgContactList-item:nth-child(2) {
        border-top: 1px solid #e6e6e6
    }

    .emgContactList-ttl {
        margin-bottom: 8px;
        font-size: 1.4rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .emgContactList .telBtn {
        display: none
    }
}

@media only screen and (max-width: 1239px) {
    .emgContactList {
        flex-direction: column;
        border-top: 1px solid #e6e6e6
    }

    .emgContactList-item {
        padding: 12px 0
    }

    .emgContactList-ttl {
        margin-bottom: 4px;
        font-size: 1rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .emgContactList-number {
        display: flex;
        justify-content: space-between;
        align-items: center
    }
}

.marinaReview+.marinaReview {
    margin-top: 16px
}

.marinaReview-ttl {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em
}

.marinaReview-txt {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .marinaReview-txt {
        font-size: 1.8rem
    }
}

@media only screen and (max-width: 1239px) {
    .marinaReview-txt {
        font-size: 1.7rem
    }
}

.marinaReview-reply {
    margin-top: 16px;
    background: #fcfaf6;
    color: #4a4a4a
}

@media print,
screen and (min-width: 1240px) {
    .marinaReview {
        padding: 24px;
        border: 1px solid #e6e6e6
    }

    .marinaReview-ttl {
        margin-bottom: 12px
    }

    .marinaReview-reply {
        padding: 16px 12px
    }

    .marinaReview-reply-ttl {
        font-size: 1.6rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .marinaReview-reply-txt {
        margin-top: 12px;
        font-size: 1.6rem;
        line-height: 160%
    }
}

@media only screen and (max-width: 1239px) {
    .marinaReview {
        padding-bottom: 16px;
        border-bottom: 1px solid #e6e6e6
    }

    .marinaReview:first-child {
        padding-top: 16px;
        border-top: 1px solid #e6e6e6
    }

    .marinaReview-ttl {
        margin-bottom: 4px
    }

    .marinaReview-reply {
        padding: 12px;
        border: 1px solid #e6e6e6
    }

    .marinaReview-reply-ttl {
        font-size: 1.2rem;
        line-height: 130%;
        letter-spacing: .02em
    }

    .marinaReview-reply-txt {
        margin-top: 8px;
        font-size: 1.2rem;
        line-height: 160%
    }
}

.tipLect[data-status] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    gap: 2px;
    padding: 4px 12px;
    border: 1px solid rgba(0, 0, 0, 0);
    background: #fff;
    line-height: 130%;
    letter-spacing: .02em;
    text-decoration: none !important;
    white-space: nowrap
}

@media print,
screen and (min-width: 1240px) {
    .tipLect[data-status] {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {
    .tipLect[data-status] {
        font-size: 1rem
    }
}

.tipLect[data-status]>* {
    width: 3em;
    text-align: center
}

.tipLect[data-status*=未] {
    background: #e0e0e0;
    color: #acacac
}

.tipLect[data-status*=済] {
    background: #0371ee;
    color: #fff
}

@media print,
screen and (min-width: 1240px) {
    .tipLect[data-status] {
        border-radius: 24px
    }
}

@media only screen and (max-width: 1239px) {
    .tipLect[data-status] {
        border-radius: 20px
    }
}

.marinaLecture .secondaryTtl {
    margin-bottom: 16px
}

@media print,
screen and (min-width: 1240px) {
    .marinaLecture-inner {
        padding: 32px;
        background: #f7f7f7
    }
}

@media only screen and (max-width: 1239px) {
    .marinaLecture-content {
        padding: 16px 12px;
        background: #f7f7f7
    }
}

.lectureInfo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 8px
}

.lectureInfo-wrap {
    display: flex;
    flex-direction: column
}

.lectureInfo .tipLect {
    flex-shrink: 0
}

.lectureInfo .accBtn {
    flex: 1;
    margin: 0;
    text-decoration: underline
}

.lectureInfo .accBtn:hover {
    text-decoration: none
}

.lectureInfo-content {
    width: 100%;
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .lectureInfo-content {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .lectureInfo-content {
        font-size: 1.2rem
    }
}

.lectureInfo-content a {
    text-decoration: underline
}

.lectureInfo-content a:hover {
    text-decoration: none
}

.lectureInfo .tertiaryTtl {
    margin-bottom: 8px
}

.lectureInfo table {
    width: 100%;
    border-top: 1px solid #e6e6e6
}

.lectureInfo table tr {
    border-bottom: 1px solid #e6e6e6
}

.lectureInfo table th,
.lectureInfo table td {
    padding: 12px 0
}

.lectureInfo table th {
    width: 8em;
    line-height: 160%;
    font-weight: 700;
    white-space: nowrap
}

@media print,
screen and (min-width: 1240px) {
    .lectureInfo table th {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {
    .lectureInfo table th {
        font-size: 1rem
    }
}

.lectureInfo table td>b {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .lectureInfo table td>b {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .lectureInfo table td>b {
        font-size: 1.5rem
    }
}

.lectureInfo table td>*+* {
    margin-top: 12px
}

.lectureInfo table ul {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .lectureInfo table ul {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {
    .lectureInfo table ul {
        font-size: 1rem
    }
}

.lectureInfo table ul li {
    display: flex;
    margin-bottom: 12px
}

.lectureInfo table ul li:last-child {
    margin-bottom: 0
}

.lectureInfo table ul+p {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .lectureInfo table ul+p {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {
    .lectureInfo table ul+p {
        font-size: 1rem
    }
}

.lectureInfo-note {
    padding: 12px 0;
    border-bottom: 1px solid #e6e6e6
}

.lectureInfo-fixed {
    padding: 12px 0;
    border-bottom: 1px solid #e6e6e6
}

.lectureInfo-fixed>*+* {
    margin-top: 12px
}

.lectureInfo-fixed ul {
    list-style: disc;
    margin-left: 2em
}

@media print,
screen and (min-width: 1240px) {
    .lectureInfo-wrap {
        gap: 24px
    }

    .lectureInfo-content {
        padding: 32px 32px 16px
    }

    .lectureInfo table ul li {
        gap: 0 16px
    }
}

@media only screen and (max-width: 1239px) {
    .lectureInfo-wrap {
        gap: 16px
    }

    .lectureInfo .accBtn {
        margin-right: 8px;
        line-height: 130%
    }

    .lectureInfo .webBtn+.telBtn {
        display: none
    }

    .lectureInfo-content {
        padding-top: 16px
    }

    .lectureInfo table ul li {
        flex-direction: column;
        gap: 4px 0
    }
}

.marinaNoticeDetail {
    display: flex;
    flex-direction: column
}

.marinaNoticeDetail-img {
    text-align: center
}

.marinaNoticeDetail-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px
}

.marinaNoticeDetail-img img {
    max-height: 50vh
}

.marinaNoticeDetail-ttl {
    width: 100%;
    line-height: 130%;
    letter-spacing: .02em;
    font-weight: 700
}

@media print,
screen and (min-width: 1240px) {
    .marinaNoticeDetail-ttl {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .marinaNoticeDetail-ttl {
        font-size: 1.5rem
    }
}

.marinaNoticeDetail-txt {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .marinaNoticeDetail-txt {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .marinaNoticeDetail-txt {
        font-size: 1.5rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .marinaNoticeDetail-img {
        margin-bottom: 32px
    }

    .marinaNoticeDetail-header {
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 1px solid #e6e6e6
    }

    .marinaNoticeDetail-date {
        font-size: 1.4rem;
        line-height: 160%
    }
}

@media only screen and (max-width: 1239px) {
    .marinaNoticeDetail-img {
        margin-bottom: 8px
    }

    .marinaNoticeDetail-header {
        order: -1;
        margin-bottom: 8px
    }

    .marinaNoticeDetail-date {
        font-size: 1rem;
        line-height: 160%
    }
}

.letterHeader {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

@media print,
screen and (min-width: 1240px) {
    .letterHeader {
        margin-bottom: 24px
    }
}

@media only screen and (max-width: 1239px) {
    .letterHeader {
        margin-bottom: 8px
    }
}

.letterBox {
    background: #fff;
    box-shadow: 0px 2px 6px 0px rgba(5, 41, 66, .15)
}

.letterBox-img .swiper-slide {
    text-align: center;
    aspect-ratio: 4/3
}

.letterBox-img .swiper-slide img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: contain;
    object-position: center center
}

.letterBox-date {
    margin-bottom: 4px;
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .letterBox-date {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {
    .letterBox-date {
        font-size: 1rem
    }
}

.letterBox-ttl {
    padding-bottom: 8px;
    border-bottom: 1px solid #e6e6e6;
    line-height: 130%;
    letter-spacing: .02em;
    font-weight: bold
}

@media print,
screen and (min-width: 1240px) {
    .letterBox-ttl {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .letterBox-ttl {
        font-size: 1.5rem
    }
}

.letterBox-txt {
    overflow: hidden
}

.letterBox-txt>*+* {
    margin-top: 8px
}

.letterBox-txt a {
    color: #0371ee;
    text-decoration: underline
}

.letterBox-txt a:hover {
    text-decoration: none
}

.letterBox-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    border-top: 1px solid #e6e6e6
}

@media print,
screen and (min-width: 1240px) {
    .letterBox {
        border-radius: 4px
    }

    .letterBox-article {
        padding: 32px 93px 48px
    }

    .letterBox-img:not(.swiper-initialized) {
        margin-bottom: 48px
    }

    .letterBox-img.swiper-initialized {
        margin: 0 -93px 48px
    }

    .letterBox-ttl {
        margin-bottom: 16px
    }

    .letterBox-btn {
        padding: 24px 40px
    }
}

@media only screen and (max-width: 1239px) {
    .letterBox {
        border: 1px solid #e6e6e6;
        border-radius: 2px
    }

    .letterBox-article {
        padding: 16px
    }

    .letterBox-img {
        margin-bottom: 16px
    }

    .letterBox-ttl {
        margin-bottom: 8px
    }

    .letterBox-btn {
        padding: 16px
    }
}

.eventNone {
    text-align: center
}

@media print,
screen and (min-width: 1240px) {
    .eventNone {
        margin: 48px 0;
        font-size: 1.6rem;
        line-height: 160%
    }
}

@media only screen and (max-width: 1239px) {
    .eventNone {
        margin: 32px 0;
        font-size: 1.2rem;
        line-height: 160%
    }

    .sp-bg-grad .eventNone {
        color: #fff
    }
}

.lectureNav {
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

@media print,
screen and (min-width: 1240px) {
    .lectureNav {
        gap: 8px 32px
    }
}

@media only screen and (max-width: 1239px) {
    .lectureNav {
        gap: 24px
    }
}

.lectureTable {
    width: 100%
}

@media print,
screen and (min-width: 1240px) {

    .lectureTable,
    .lectureTable th,
    .lectureTable td {
        border: 1px solid #e6e6e6
    }

    .lectureTable th,
    .lectureTable td {
        padding: 16px 24px
    }

    .lectureTable thead {
        background: #eef4fa;
        text-align: center
    }

    .lectureTable .area {
        width: 15%
    }

    .lectureTable .marina a:hover {
        color: #0371ee
    }

    .lectureTable .price {
        text-align: right;
        width: 15%
    }

    .lectureTable .link {
        width: 15%
    }
}

@media only screen and (max-width: 1239px) {
    .lectureTable {
        border-top: 1px solid #e6e6e6;
        border-left: 1px solid #e6e6e6
    }

    .lectureTable,
    .lectureTable tbody {
        display: block
    }

    .lectureTable thead {
        display: none
    }

    .lectureTable tr {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px 16px;
        padding: 16px;
        border-right: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6
    }

    .lectureTable .area {
        width: 100%
    }

    .lectureTable .marina {
        width: 100%
    }
}

.lectureApp {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: #f7f7f7
}

.lectureApp-ttl {
    text-align: center
}

.lectureApp-marina {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    text-align: center;
    color: #0371ee;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em
}

@media print,
screen and (min-width: 1240px) {
    .lectureApp-marina {
        font-size: 2rem
    }
}

@media only screen and (max-width: 1239px) {
    .lectureApp-marina {
        font-size: 1.8rem
    }
}

.lectureApp-marina a {
    display: inline-block
}

@media print,
screen and (min-width: 1240px) {
    .lectureApp-marina a {
        pointer-events: none
    }
}

@media only screen and (max-width: 1239px) {
    .lectureApp-marina {
        flex-direction: column
    }

    .lectureApp-marina a {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 4px;
        width: 192px;
        min-height: 34px;
        padding: 8px 16px;
        border: 1px solid #ea7000;
        border-radius: 24px;
        font-size: 1.6rem;
        line-height: 130%;
        font-weight: 400;
        line-height: 100%;
        white-space: nowrap;
        color: #ea7000
    }

    .lectureApp-marina a:hover {
        text-decoration: underline
    }

    .lectureApp-marina a:hover {
        text-decoration: none !important;
        background: #fff9e5
    }

    .lectureApp-marina a::before {
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        background: #ea7000;
        mask: url(/jp/assets/icon/icon-phone.svg) center center/contain no-repeat;
        content: ""
    }
}

.lectureDetail {
    border: 1px solid #e6e6e6;
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .lectureDetail {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .lectureDetail {
        font-size: 1.5rem
    }
}

.lectureDetail-ttl {
    padding: 8px 16px 0;
    font-weight: 700
}

.lectureDetail-txt+.lectureDetail-ttl {
    border-top: 1px solid #e6e6e6
}

.lectureDetail-txt {
    padding: 4px 16px 8px
}

.lectureDetail ul {
    margin-top: 8px
}

.lectureDetail ul li {
    margin-bottom: 8px
}

.ruleBox {
    padding: 16px;
    background: #f7f7f7
}

.ruleBox>* {
    margin-bottom: 16px
}

.ruleBox>*:last-child {
    margin-bottom: 0
}

.ruleTtl {
    margin-bottom: 16px;
    padding: 16px;
    background: #eef4fa;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em
}

@media print,
screen and (min-width: 1240px) {
    .ruleTtl {
        font-size: 2.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .ruleTtl {
        font-size: 1.6rem
    }
}

.ruleSection {
    margin-bottom: 32px
}

.ruleSection:last-child {
    margin-bottom: 0
}

.ruleSection a {
    text-decoration: underline
}

.ruleSection a:hover {
    text-decoration: none
}

.ruleSection-ttl {
    margin-bottom: 16px;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em
}

@media print,
screen and (min-width: 1240px) {
    .ruleSection-ttl {
        font-size: 2rem
    }
}

@media only screen and (max-width: 1239px) {
    .ruleSection-ttl {
        font-size: 1.4rem
    }
}

.ruleSection-box {
    margin: 4px 0;
    padding: 16px;
    background: #f7f7f7
}

.ruleSection-box:first-child {
    margin-top: 0
}

.ruleSection-box:last-child {
    margin-bottom: 0
}

.ruleSection dl {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .ruleSection dl {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .ruleSection dl {
        font-size: 1.2rem
    }
}

.ruleSection dl dt {
    font-weight: 700
}

.ruleSection table {
    margin: 4px 0
}

.ruleSection table:first-child {
    margin-top: 0
}

.ruleSection table:last-child {
    margin-bottom: 0
}

.ruleSection table th,
.ruleSection table td {
    padding: 8px 16px
}

.ruleSection table th {
    font-weight: 700
}

@media print,
screen and (min-width: 1240px) {
    .ruleSection dl {
        display: flex;
        flex-wrap: wrap;
        gap: 16px
    }

    .ruleSection dl dt {
        width: 80px;
        text-align: right
    }

    .ruleSection dl dd {
        width: calc(100% - 16px - 80px)
    }

    .ruleSection table,
    .ruleSection table th,
    .ruleSection table td {
        border: 1px solid #e6e6e6
    }

    .ruleSection table th {
        vertical-align: middle
    }
}

@media only screen and (max-width: 1239px) {
    .ruleSection dl dt {
        margin-bottom: 8px
    }

    .ruleSection dl dd {
        margin-bottom: 12px
    }

    .ruleSection dl dd:last-child {
        margin-bottom: 0
    }

    .ruleSection table {
        border-top: 1px solid #e6e6e6;
        border-left: 1px solid #e6e6e6
    }

    .ruleSection table,
    .ruleSection table thead,
    .ruleSection table tbody,
    .ruleSection table th,
    .ruleSection table td {
        display: block
    }

    .ruleSection table th,
    .ruleSection table td {
        border-right: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6
    }

    .ruleSection table th {
        text-align: center
    }
}

.revisionList {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .revisionList {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .revisionList {
        font-size: 1.2rem
    }
}

.revisionList dl dt {
    font-weight: 700
}

@media print,
screen and (min-width: 1240px) {
    .revisionList dl {
        display: flex;
        flex-wrap: wrap
    }

    .revisionList dl dt,
    .revisionList dl dd {
        padding: 16px 0;
        border-bottom: 1px solid #e6e6e6
    }

    .revisionList dl dt {
        width: 240px
    }

    .revisionList dl dd {
        width: calc(100% - 240px)
    }
}

@media only screen and (max-width: 1239px) {
    .revisionList dl dt {
        margin-bottom: 8px;
        padding-top: 16px
    }

    .revisionList dl dd {
        padding-bottom: 16px;
        border-bottom: 1px solid #e6e6e6
    }
}

.revisionTable,
.revisionTable th,
.revisionTable td {
    border: 1px solid #e6e6e6
}

.revisionTable th {
    padding: 16px;
    background: #eef4fa;
    line-height: 130%;
    letter-spacing: .02em
}

@media print,
screen and (min-width: 1240px) {
    .revisionTable th {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .revisionTable th {
        font-size: 1.2rem
    }
}

.revisionTable td {
    overflow: hidden
}

@media print,
screen and (min-width: 1240px) {
    .revisionTable td {
        padding: 16px;
        font-size: 1.4rem;
        line-height: 160%
    }

    .revisionTable dl dd {
        margin-bottom: 32px
    }

    .revisionTable dl dd:last-child {
        margin-bottom: 0
    }
}

@media only screen and (max-width: 1239px) {
    .revisionTable td {
        padding: 16px 8px;
        font-size: 1rem;
        line-height: 160%
    }

    .revisionTable dl dd {
        margin-bottom: 16px
    }

    .revisionTable dl dd:last-child {
        margin-bottom: 0
    }
}

.revisionAgree {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255, 255, 255, .9);
    text-align: center;
    z-index: 500;
    box-shadow: 0px 4px 6px 4px rgba(0, 0, 0, .2)
}

@media print,
screen and (min-width: 1240px) {
    .revisionAgree {
        padding: 24px max(16px, (100% - 1080px)/2)
    }
}

@media only screen and (max-width: 1239px) {
    .revisionAgree {
        padding: 24px max(16px, (100% - 720px)/2)
    }
}

.lineupTabNav .tabNav-item {
    width: 33.33%
}

.lineupTabNav .tabNav-item.icon-boat>*,
.lineupTabNav .tabNav-item.icon-sb>*,
.lineupTabNav .tabNav-item.icon-wr>* {
    display: flex;
    align-items: center
}

.lineupTabNav .tabNav-item.icon-boat>*::before,
.lineupTabNav .tabNav-item.icon-sb>*::before,
.lineupTabNav .tabNav-item.icon-wr>*::before {
    display: block;
    width: 67px;
    height: 26px;
    background: #909090;
    content: ""
}

.lineupTabNav .tabNav-item.icon-boat>*:before {
    mask: url(/jp/assets/icon/lineup/icon-boat.svg) center center/contain no-repeat
}

.lineupTabNav .tabNav-item.icon-sb>*:before {
    mask: url(/jp/assets/icon/lineup/icon-sb.svg) center center/contain no-repeat
}

.lineupTabNav .tabNav-item.icon-wr>*:before {
    mask: url(/jp/assets/icon/lineup/icon-wr.svg) center center/contain no-repeat
}

.lineupTabNav .tabNav-item.is-current>*::before {
    background: #fff
}

@media print,
screen and (min-width: 1240px) {

    .lineupTabNav .tabNav-item.icon-boat>*,
    .lineupTabNav .tabNav-item.icon-sb>*,
    .lineupTabNav .tabNav-item.icon-wr>* {
        justify-content: center;
        gap: 12px
    }

    .lineupTabNav .tabNav-item.icon-boat>*::before,
    .lineupTabNav .tabNav-item.icon-sb>*::before,
    .lineupTabNav .tabNav-item.icon-wr>*::before {
        width: 67px;
        height: 26px
    }
}

@media only screen and (max-width: 1239px) {

    .lineupTabNav .tabNav-item.icon-boat>*,
    .lineupTabNav .tabNav-item.icon-sb>*,
    .lineupTabNav .tabNav-item.icon-wr>* {
        flex-direction: column;
        gap: 4px
    }

    .lineupTabNav .tabNav-item.icon-boat>*::before,
    .lineupTabNav .tabNav-item.icon-sb>*::before,
    .lineupTabNav .tabNav-item.icon-wr>*::before {
        width: 30px;
        height: 12px
    }
}

.lineupList {
    display: flex
}

.lineupList-item {
    display: flex
}

.lineupList-img {
    aspect-ratio: 16/9;
    object-fit: cover
}

.lineupList-detail {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-weight: 700
}

.lineupList-name {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em;
    line-height: 130%;
    text-decoration: underline
}

@media print,
screen and (min-width: 1240px) {
    .lineupList-name {
        font-size: 2rem
    }
}

@media only screen and (max-width: 1239px) {
    .lineupList-name {
        font-size: 1.8rem
    }
}

.lineupList-name::after {
    flex-shrink: 0;
    background: #0371ee;
    mask: url(/jp/assets/icon/icon-arrow_right.svg) center center/contain no-repeat;
    content: ""
}

.lineupList-item:hover .lineupList-name {
    text-decoration: none
}

.lineupList-capa {
    line-height: 130%;
    letter-spacing: .02em
}

@media print,
screen and (min-width: 1240px) {
    .lineupList-capa {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .lineupList-capa {
        font-size: 1.2rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .lineupList {
        flex-direction: column;
        gap: 16px
    }

    .lineupList-item {
        align-items: flex-start;
        gap: 16px
    }

    .lineupList-img {
        width: 252px
    }

    .lineupList-detail {
        width: calc(100% - 16px - 252px)
    }

    .lineupList-name::after {
        width: 20px;
        height: 20px
    }
}

@media only screen and (max-width: 1239px) {
    .lineupList {
        flex-wrap: wrap;
        gap: 16px 24px
    }

    .lineupList-item {
        flex-direction: column;
        width: calc(50% - 16px);
        gap: 4px
    }

    .lineupList-name::after {
        width: 16px;
        height: 16px
    }
}

@media only screen and (max-width: 479px) {
    .lineupList {
        flex-direction: column;
        gap: 24px
    }

    .lineupList-item {
        width: 100%
    }
}

.lineupPriceTable table {
    width: 100%
}

.lineupPriceTable table th,
.lineupPriceTable table td {
    vertical-align: middle
}

.lineupPriceTable table th {
    text-align: center
}

.lineupPriceTable table thead th {
    background: #f0f0f0;
    border: 1px solid #e6e6e6;
    text-align: center;
    white-space: nowrap
}

.lineupPriceTable table tbody th,
.lineupPriceTable table tbody td {
    border: 1px solid #e6e6e6
}

.lineupPriceTable table tbody tr:nth-child(even) {
    background: #f7f7f7
}

.lineupPriceTable table tbody tr:nth-child(1) th[rowspan] {
    background: #eef4fa
}

.lineupPriceTable table tbody tr:nth-child(3) th[rowspan] {
    background: #d4e1f3
}

.lineupPriceTable table tbody th:not([rowspan]) {
    white-space: nowrap
}

.lineupPriceTable table tbody td {
    font-weight: 700;
    text-align: right
}

.lineupPriceTable p {
    margin-top: 4px;
    line-height: 160%;
    text-align: right
}

@media print,
screen and (min-width: 1240px) {
    .lineupPriceTable p {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {
    .lineupPriceTable p {
        font-size: 1rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .lineupPriceTable table {
        font-size: 1.4rem;
        line-height: 160%
    }

    .lineupPriceTable table thead th,
    .lineupPriceTable table thead td {
        padding: 8px 12px
    }

    .lineupPriceTable table thead th {
        width: 22%
    }

    .lineupPriceTable table tbody th,
    .lineupPriceTable table tbody td {
        padding: 4px 12px
    }

    .lineupPriceTable table tbody td {
        font-size: 1.6rem;
        line-height: 160%
    }
}

@media only screen and (max-width: 1239px) {
    .lineupPriceTable table {
        font-size: 1rem;
        line-height: 160%
    }

    .lineupPriceTable table thead th,
    .lineupPriceTable table thead td {
        padding: 8px
    }

    .lineupPriceTable table thead th {
        width: 25%
    }

    .lineupPriceTable table tbody th,
    .lineupPriceTable table tbody td {
        padding: 4px
    }

    .lineupPriceTable table tbody th:not([rowspan], [colspan]) {
        text-align: right
    }

    .lineupPriceTable table tbody td {
        font-size: 1.2rem;
        line-height: 160%
    }
}

.lineupMarina-area {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #4a4a4a
}

.lineupMarina-area-item {
    display: flex;
    align-items: center;
    gap: 4px
}

.lineupMarina-area-item::after {
    content: "＞"
}

.lineupMarina-area-item:last-child::after {
    display: none
}

.lineupMarina-list {
    display: flex;
    padding: 16px 0;
    border-bottom: 1px solid #e6e6e6
}

.lineupMarina-list-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px
}

.lineupMarina-list-link::after {
    width: 16px;
    height: 16px;
    background: #0371ee;
    mask: url(/jp/assets/icon/icon-arrow_right.svg) center center/contain no-repeat;
    content: "";
    flex-shrink: 0
}

@media print,
screen and (min-width: 1240px) {
    .lineupMarina {
        margin-bottom: 32px;
        font-size: 1.6rem;
        line-height: 160%
    }

    .lineupMarina:last-child {
        margin-bottom: 0
    }

    .lineupMarina-list {
        flex-wrap: wrap;
        gap: 16px 32px
    }

    .lineupMarina-list-item {
        width: calc((100% - 64px)/3)
    }
}

@media only screen and (max-width: 1239px) {
    .lineupMarina {
        margin-bottom: 16px;
        font-size: 1.2rem;
        line-height: 160%
    }

    .lineupMarina:last-child {
        margin-bottom: 0
    }

    .lineupMarina-list {
        flex-direction: column;
        gap: 8px
    }
}

.lineupNav {
    display: flex
}

@media print,
screen and (min-width: 1240px) {
    .lineupNav {
        justify-content: end;
        gap: 24px
    }
}

@media only screen and (max-width: 1239px) {
    .lineupNav {
        flex-direction: column;
        gap: 16px
    }
}

.lineupImg img {
    width: 100%
}

@media print,
screen and (min-width: 1240px) {
    .lineupImg {
        margin-bottom: 32px
    }
}

@media only screen and (max-width: 1239px) {
    .lineupImg {
        margin: 0 -16px 16px
    }
}

.lineupChach-ttl {
    margin-bottom: 16px;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em
}

@media print,
screen and (min-width: 1240px) {
    .lineupChach-ttl {
        font-size: 2rem
    }
}

@media only screen and (max-width: 1239px) {
    .lineupChach-ttl {
        font-size: 1.8rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .lineupChach {
        margin-bottom: 80px
    }
}

@media only screen and (max-width: 1239px) {
    .lineupChach {
        margin-bottom: 64px
    }
}

.lineupDetail {
    display: flex
}

.lineupDetail-capa {
    width: fit-content;
    margin-bottom: 8px;
    padding: 4px 12px;
    border-radius: 30px;
    background: #ea7000;
    color: #fff;
    line-height: 130%;
    letter-spacing: .02em;
    font-weight: 700
}

@media print,
screen and (min-width: 1240px) {
    .lineupDetail-capa {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .lineupDetail-capa {
        font-size: 1.5rem
    }
}

.lineupDetail-section table {
    width: 100%;
    border-top: 1px solid #e6e6e6
}

.lineupDetail-section table tr {
    border-bottom: 1px solid #e6e6e6
}

.lineupDetail-section table th,
.lineupDetail-section table td {
    vertical-align: middle
}

.lineupDetail-section table th {
    background: #eef4fa;
    line-height: 130%;
    letter-spacing: .02em;
    font-weight: 700;
    white-space: nowrap
}

@media print,
screen and (min-width: 1240px) {
    .lineupDetail-section table th {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .lineupDetail-section table th {
        font-size: 1.2rem
    }
}

.lineupDetail-section ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-weight: 700;
    line-height: 130%
}

@media print,
screen and (min-width: 1240px) {
    .lineupDetail-section ul {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {
    .lineupDetail-section ul {
        font-size: 1.1rem
    }
}

.lineupDetail-section ul li {
    padding: 4px 12px;
    border-radius: 24px;
    background: #f0f0f0;
    color: #0065ab;
    font-weight: 700
}

.lineupDetail-ttl {
    margin-bottom: 8px;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em;
    font-weight: 700
}

@media print,
screen and (min-width: 1240px) {
    .lineupDetail-ttl {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .lineupDetail-ttl {
        font-size: 1.4rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .lineupDetail {
        gap: 24px
    }

    .lineupDetail-img {
        width: calc(50% - 12px)
    }

    .lineupDetail-content {
        width: calc(50% - 12px)
    }

    .lineupDetail-section {
        margin-top: 32px
    }

    .lineupDetail-section table th,
    .lineupDetail-section table td {
        padding: 4px 12px
    }
}

@media only screen and (max-width: 1239px) {
    .lineupDetail {
        flex-direction: column;
        gap: 32px
    }

    .lineupDetail-section {
        margin-top: 16px
    }

    .lineupDetail-section table th,
    .lineupDetail-section table td {
        padding: 4px 8px
    }
}

.linupImgSlider img {
    width: 100%
}

.linupImgThumb {
    margin-top: 8px
}

.linupImgThumb img {
    aspect-ratio: 16/9;
    object-fit: cover
}

.js-linupImg .swiper-container {
    overflow: hidden
}

.js-linupImg .swiper-wrapper {
    align-items: center
}

.js-linupImg .linupImgThumb .swiper-slide {
    cursor: pointer;
    position: relative
}

.js-linupImg .linupImgThumb .swiper-slide::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 3px solid rgba(0, 0, 0, 0);
    transition: var(--transition);
    content: ""
}

.js-linupImg .linupImgThumb .swiper-slide:hover::after {
    background: rgba(255, 255, 255, .3)
}

.js-linupImg .linupImgThumb .swiper-slide.swiper-slide-thumb-active::after {
    border-color: #e6e6e6;
    background: rgba(255, 255, 255, .6)
}

.lineupShadowBox {
    background: #fff;
    box-shadow: 0px 2px 6px 0px rgba(5, 41, 66, .15)
}

.lineupShadowBox-ttl {
    border-bottom: 1px solid #e6e6e6;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em
}

@media print,
screen and (min-width: 1240px) {
    .lineupShadowBox-ttl {
        font-size: 1.8rem
    }
}

@media only screen and (max-width: 1239px) {
    .lineupShadowBox-ttl {
        font-size: 1.6rem
    }
}

.lineupShadowBox .movieBox {
    max-width: 720px;
    margin-right: auto;
    margin-left: auto
}

@media print,
screen and (min-width: 1240px) {
    .lineupShadowBox {
        margin-bottom: 32px;
        border-radius: 4px
    }

    .lineupShadowBox-ttl {
        padding: 16px 24px
    }

    .lineupShadowBox-content {
        padding: 32px 24px
    }
}

@media only screen and (max-width: 1239px) {
    .lineupShadowBox {
        margin-bottom: 24px;
        border-radius: 2px
    }

    .lineupShadowBox-ttl {
        padding: 8px 16px
    }

    .lineupShadowBox-content {
        padding: 16px 16px 24px
    }
}

.moviePickup {
    display: flex;
    margin-bottom: 32px
}

.moviePickup-movie-link {
    display: block;
    position: relative
}

.moviePickup-movie-link::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    background: url(/jp/assets/icon/icon-play.svg) center center/contain no-repeat;
    transform: translate(-50%, -50%);
    content: ""
}

.moviePickup-movie-link:hover::before {
    opacity: .75
}

.moviePickup-movie-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover
}

.moviePickup-ttl {
    color: #ea7000;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: .04em
}

@media print,
screen and (min-width: 1240px) {
    .moviePickup-ttl {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .moviePickup-ttl {
        font-size: 1.4rem
    }
}

.moviePickup-box {
    padding: 16px;
    background: #f7f7f7
}

.moviePickup-box b {
    display: inline-block;
    margin-bottom: 8px;
    line-height: 130%;
    letter-spacing: .02em
}

@media print,
screen and (min-width: 1240px) {
    .moviePickup-box b {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .moviePickup-box b {
        font-size: 1.2rem
    }
}

.moviePickup-box ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 1.4rem;
    line-height: 130%
}

.moviePickup-box ul li {
    position: relative;
    padding-left: 12px
}

.moviePickup-box ul li::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 5px;
    height: 5px;
    background: #0065ab;
    border-radius: 50%;
    transform: translateY(-50%);
    content: ""
}

@media print,
screen and (min-width: 1240px) {
    .moviePickup {
        gap: 24px
    }

    .moviePickup-movie {
        width: calc(50% - 12px)
    }

    .moviePickup-content {
        width: calc(50% - 12px)
    }

    .moviePickup-ttl {
        margin-bottom: 16px
    }

    .moviePickup-box {
        border-radius: 4px
    }
}

@media only screen and (max-width: 1239px) {
    .moviePickup {
        flex-direction: column;
        gap: 16px
    }

    .moviePickup-ttl {
        margin-bottom: 8px
    }

    .moviePickup-box {
        border-radius: 2px
    }
}

.js-tab {
    position: relative
}

.js-tab [data-tab-content] {
    position: absolute;
    bottom: 0;
    width: 100%;
    visibility: hidden;
    opacity: 0
}

.js-tab .is-current[data-tab-content] {
    position: static;
    visibility: visible;
    opacity: 1;
    transition: var(--transition)
}

.js-accordion [data-accordion-content] {
    transition: none
}

.js-accordion:not(.is-open) [data-accordion-content] {
    display: none
}

.swiper {
    position: relative
}

.swiper-button-prev,
.swiper-button-next {
    visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    width: 24px;
    height: 54px;
    background: rgba(0, 0, 0, .3);
    font-size: 0;
    text-indent: -9999px;
    transform: translateY(-50%);
    overflow: hidden;
    z-index: 5;
    cursor: pointer;
    transition: opacity .3s linear
}

.swiper-button-prev::before,
.swiper-button-next::before {
    width: 24px;
    height: 24px;
    background: #fff;
    content: ""
}

.swiper-initialized .swiper-button-prev,
.swiper-initialized .swiper-button-next {
    visibility: inherit
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
    visibility: hidden
}

.swiper-button-prev {
    left: 0;
    border-radius: 0 4px 4px 0
}

.swiper-button-prev::before {
    mask: url(/jp/assets/icon/icon-arrow_left.svg) center center/16px 16px no-repeat
}

.swiper-button-next {
    right: 0;
    border-radius: 4px 0 0 4px
}

.swiper-button-next::before {
    mask: url(/jp/assets/icon/icon-arrow_right.svg) center center/16px 16px no-repeat
}

@media print,
screen and (min-width: 1240px) {

    .js-recommendSlider .swiper-button-prev,
    .js-recommendSlider .swiper-button-next {
        display: none
    }
}

@media print,
screen and (min-width: 1240px) {

    .js-reservePlanList.swiper .swiper-button-prev,
    .js-reservePlanList.swiper .swiper-button-next {
        display: none
    }

    .js-reservePlanList.swiper.swiper-initialized .swiper-wrapper {
        transform: none !important
    }

    .js-reservePlanList.swiper.swiper-initialized .swiper-slide {
        width: calc(20% - 12.8px) !important
    }
}

@media only screen and (max-width: 1239px) {
    .js-reservePlanList.swiper.swiper-initialized {
        margin: 0 -12px;
        padding: 0 12px
    }

    .js-reservePlanList.swiper.swiper-initialized .swiper-wrapper {
        flex-wrap: nowrap;
        gap: 0
    }
}

.js-aroundMarina.swiper .swiper-wrapper {
    padding: 16px 0;
    align-items: normal
}

.js-aroundMarina.swiper .swiper-slide {
    height: auto
}

.js-aroundMarina.swiper .swiper-slide-item {
    height: 100%
}

@media print,
screen and (min-width: 1240px) {

    .js-aroundMarina.swiper .swiper-button-prev,
    .js-aroundMarina.swiper .swiper-button-next {
        display: none
    }

    .js-aroundMarina.swiper.swiper-initialized .swiper-wrapper {
        transform: none !important
    }

    .js-aroundMarina.swiper.swiper-initialized .swiper-slide {
        width: calc(25% - 18px) !important
    }
}

@media only screen and (max-width: 1239px) {
    .js-aroundMarina.swiper.swiper-initialized {
        margin: 0 -16px;
        padding: 0 16px
    }

    .js-aroundMarina.swiper.swiper-initialized .swiper-wrapper {
        flex-wrap: nowrap;
        gap: 0
    }
}

.js-aroundMarina.swiper .boatCard-item {
    display: flex;
    flex-direction: column
}

.js-aroundMarina.swiper .boatCard-body {
    display: flex;
    align-items: center;
    flex: 1
}

.js-aroundMarina.swiper .boatCard-body>* {
    width: 100%
}

.js-eventInfo.swiper {
    margin-top: -16px;
    margin-bottom: -16px
}

.js-eventInfo.swiper .swiper-slide {
    padding-top: 16px;
    padding-bottom: 16px
}

@media print,
screen and (min-width: 1240px) {

    .js-eventInfo.swiper .swiper-button-prev,
    .js-eventInfo.swiper .swiper-button-next {
        display: none
    }
}

@media only screen and (max-width: 1239px) {
    .js-eventInfo.swiper-initialized {
        width: calc(100% + 32px);
        margin-right: -16px;
        margin-left: -16px;
        padding: 0 16px
    }

    .js-eventInfo.swiper-initialized .swiper-wrapper {
        flex-wrap: nowrap;
        gap: 0
    }
}

.js-marinaRecommendPlan.swiper,
.js-marinaRecommendCharter.swiper {
    margin-top: -16px;
    margin-bottom: -16px
}

.js-marinaRecommendPlan.swiper .swiper-slide,
.js-marinaRecommendCharter.swiper .swiper-slide {
    padding-top: 16px;
    padding-bottom: 16px
}

@media print,
screen and (min-width: 1240px) {

    .js-marinaRecommendPlan.swiper .swiper-button-prev,
    .js-marinaRecommendPlan.swiper .swiper-button-next,
    .js-marinaRecommendCharter.swiper .swiper-button-prev,
    .js-marinaRecommendCharter.swiper .swiper-button-next {
        display: none
    }
}

@media only screen and (max-width: 1239px) {

    .js-marinaRecommendPlan.swiper-initialized,
    .js-marinaRecommendCharter.swiper-initialized {
        width: calc(100% + 32px);
        margin-right: -16px;
        margin-left: -16px;
        padding: 0 16px
    }

    .js-marinaRecommendPlan.swiper-initialized .swiper-wrapper,
    .js-marinaRecommendCharter.swiper-initialized .swiper-wrapper {
        flex-wrap: nowrap;
        gap: 0
    }
}

.ma-0 {
    margin: 0
}

.ma-4 {
    margin: 4px
}

.ma-8 {
    margin: 8px
}

.ma-12 {
    margin: 12px
}

.ma-16 {
    margin: 16px
}

.ma-24 {
    margin: 24px
}

.ma-32 {
    margin: 32px
}

.ma-40 {
    margin: 40px
}

.ma-48 {
    margin: 48px
}

.ma-64 {
    margin: 64px
}

.ma-80 {
    margin: 80px
}

.mt-0 {
    margin-top: 0
}

.mt-4 {
    margin-top: 4px
}

.mt-8 {
    margin-top: 8px
}

.mt-12 {
    margin-top: 12px
}

.mt-16 {
    margin-top: 16px
}

.mt-24 {
    margin-top: 24px
}

.mt-32 {
    margin-top: 32px
}

.mt-48 {
    margin-top: 48px
}

.mt-64 {
    margin-top: 64px
}

.mt-80 {
    margin-top: 80px
}

.mt--0 {
    margin-top: 0
}

.mt--4 {
    margin-top: -4px
}

.mt--8 {
    margin-top: -8px
}

.mt--12 {
    margin-top: -12px
}

.mt--16 {
    margin-top: -16px
}

.mt--24 {
    margin-top: -24px
}

.mt--32 {
    margin-top: -32px
}

.mt--40 {
    margin-top: -40px
}

.mt--48 {
    margin-top: -48px
}

.mt--64 {
    margin-top: -64px
}

.mt--80 {
    margin-top: -80px
}

.mr-auto {
    margin-right: auto
}

.mr-0 {
    margin-right: 0
}

.mr-4 {
    margin-right: 4px
}

.mr-8 {
    margin-right: 8px
}

.mr-12 {
    margin-right: 12px
}

.mr-16 {
    margin-right: 16px
}

.mr-24 {
    margin-right: 24px
}

.mr-32 {
    margin-right: 32px
}

.mr-48 {
    margin-right: 48px
}

.mr-64 {
    margin-right: 64px
}

.mr-80 {
    margin-right: 80px
}

.mr--4 {
    margin-right: -4px
}

.mr--8 {
    margin-right: -8px
}

.mr--12 {
    margin-right: -12px
}

.mr--16 {
    margin-right: -16px
}

.mr--24 {
    margin-right: -24px
}

.mr--32 {
    margin-right: -32px
}

.mr--40 {
    margin-right: -40px
}

.mr--48 {
    margin-right: -48px
}

.mr--64 {
    margin-right: -64px
}

.mr--80 {
    margin-right: -80px
}

.mb-0 {
    margin-bottom: 0
}

.mb-4 {
    margin-bottom: 4px
}

.mb-8 {
    margin-bottom: 8px
}

.mb-12 {
    margin-bottom: 12px
}

.mb-16 {
    margin-bottom: 16px
}

.mb-24 {
    margin-bottom: 24px
}

.mb-32 {
    margin-bottom: 32px
}

.mb-48 {
    margin-bottom: 48px
}

.mb-64 {
    margin-bottom: 64px
}

.mb-80 {
    margin-bottom: 80px
}

.mb--4 {
    margin-bottom: -4px
}

.mb--8 {
    margin-bottom: -8px
}

.mb--12 {
    margin-bottom: -12px
}

.mb--16 {
    margin-bottom: -16px
}

.mb--24 {
    margin-bottom: -24px
}

.mb--32 {
    margin-bottom: -32px
}

.mb--40 {
    margin-bottom: -40px
}

.mb--48 {
    margin-bottom: -48px
}

.mb--64 {
    margin-bottom: -64px
}

.mb--80 {
    margin-bottom: -80px
}

.ml-auto {
    margin-left: auto
}

.ml-0 {
    margin-left: 0
}

.ml-4 {
    margin-left: 4px
}

.ml-8 {
    margin-left: 8px
}

.ml-12 {
    margin-left: 12px
}

.ml-16 {
    margin-left: 16px
}

.ml-24 {
    margin-left: 24px
}

.ml-32 {
    margin-left: 32px
}

.ml-48 {
    margin-left: 48px
}

.ml-64 {
    margin-left: 64px
}

.ml-80 {
    margin-left: 80px
}

.ml--4 {
    margin-left: -4px
}

.ml--8 {
    margin-left: -8px
}

.ml--12 {
    margin-left: -12px
}

.ml--16 {
    margin-left: -16px
}

.ml--24 {
    margin-left: -24px
}

.ml--32 {
    margin-left: -32px
}

.ml--40 {
    margin-left: -40px
}

.ml--48 {
    margin-left: -48px
}

.ml--64 {
    margin-left: -64px
}

.ml--80 {
    margin-left: -80px
}

@media print,
screen and (min-width: 1240px) {
    .pc-ma-0 {
        margin: 0
    }

    .pc-ma-4 {
        margin: 4px
    }

    .pc-ma-8 {
        margin: 8px
    }

    .pc-ma-12 {
        margin: 12px
    }

    .pc-ma-16 {
        margin: 16px
    }

    .pc-ma-24 {
        margin: 24px
    }

    .pc-ma-32 {
        margin: 32px
    }

    .pc-ma-40 {
        margin: 40px
    }

    .pc-ma-48 {
        margin: 48px
    }

    .pc-ma-64 {
        margin: 64px
    }

    .pc-ma-80 {
        margin: 80px
    }

    .pc-mt-0 {
        margin-top: 0
    }

    .pc-mt-4 {
        margin-top: 4px
    }

    .pc-mt-8 {
        margin-top: 8px
    }

    .pc-mt-12 {
        margin-top: 12px
    }

    .pc-mt-16 {
        margin-top: 16px
    }

    .pc-mt-24 {
        margin-top: 24px
    }

    .pc-mt-32 {
        margin-top: 32px
    }

    .pc-mt-40 {
        margin-top: 40px
    }

    .pc-mt-48 {
        margin-top: 48px
    }

    .pc-mt-64 {
        margin-top: 64px
    }

    .pc-mt-80 {
        margin-top: 80px
    }

    .pc-mt--4 {
        margin-top: -4px
    }

    .pc-mt--8 {
        margin-top: -8px
    }

    .pc-mt--12 {
        margin-top: -12px
    }

    .pc-mt--16 {
        margin-top: -16px
    }

    .pc-mt--24 {
        margin-top: -24px
    }

    .pc-mt--32 {
        margin-top: -32px
    }

    .pc-mt--40 {
        margin-top: -40px
    }

    .pc-mt--48 {
        margin-top: -48px
    }

    .pc-mt--64 {
        margin-top: -64px
    }

    .pc-mt--80 {
        margin-top: -80px
    }

    .pc-mr-auto {
        margin-right: auto
    }

    .pc-mr-0 {
        margin-right: 0
    }

    .pc-mr-4 {
        margin-right: 4px
    }

    .pc-mr-8 {
        margin-right: 8px
    }

    .pc-mr-12 {
        margin-right: 12px
    }

    .pc-mr-16 {
        margin-right: 16px
    }

    .pc-mr-24 {
        margin-right: 24px
    }

    .pc-mr-32 {
        margin-right: 32px
    }

    .pc-mr-40 {
        margin-right: 40px
    }

    .pc-mr-48 {
        margin-right: 48px
    }

    .pc-mr-64 {
        margin-right: 64px
    }

    .pc-mr-80 {
        margin-right: 80px
    }

    .pc-mr--4 {
        margin-right: -4px
    }

    .pc-mr--8 {
        margin-right: -8px
    }

    .pc-mr--12 {
        margin-right: -12px
    }

    .pc-mr--16 {
        margin-right: -16px
    }

    .pc-mr--24 {
        margin-right: -24px
    }

    .pc-mr--32 {
        margin-right: -32px
    }

    .pc-mr--40 {
        margin-right: -40px
    }

    .pc-mr--48 {
        margin-right: -48px
    }

    .pc-mr--64 {
        margin-right: -64px
    }

    .pc-mr--80 {
        margin-right: -80px
    }

    .pc-mb-0 {
        margin-bottom: 0
    }

    .pc-mb-4 {
        margin-bottom: 4px
    }

    .pc-mb-8 {
        margin-bottom: 8px
    }

    .pc-mb-12 {
        margin-bottom: 12px
    }

    .pc-mb-16 {
        margin-bottom: 16px
    }

    .pc-mb-24 {
        margin-bottom: 24px
    }

    .pc-mb-32 {
        margin-bottom: 32px
    }

    .pc-mb-40 {
        margin-bottom: 40px
    }

    .pc-mb-48 {
        margin-bottom: 48px
    }

    .pc-mb-64 {
        margin-bottom: 64px
    }

    .pc-mb-80 {
        margin-bottom: 80px
    }

    .pc-mb--4 {
        margin-bottom: -4px
    }

    .pc-mb--8 {
        margin-bottom: -8px
    }

    .pc-mb--12 {
        margin-bottom: -12px
    }

    .pc-mb--16 {
        margin-bottom: -16px
    }

    .pc-mb--24 {
        margin-bottom: -24px
    }

    .pc-mb--32 {
        margin-bottom: -32px
    }

    .pc-mb--40 {
        margin-bottom: -40px
    }

    .pc-mb--48 {
        margin-bottom: -48px
    }

    .pc-mb--64 {
        margin-bottom: -64px
    }

    .pc-mb--80 {
        margin-bottom: -80px
    }

    .pc-ml-auto {
        margin-left: auto
    }

    .pc-ml-0 {
        margin-left: 0
    }

    .pc-ml-4 {
        margin-left: 4px
    }

    .pc-ml-8 {
        margin-left: 8px
    }

    .pc-ml-12 {
        margin-left: 12px
    }

    .pc-ml-16 {
        margin-left: 16px
    }

    .pc-ml-24 {
        margin-left: 24px
    }

    .pc-ml-32 {
        margin-left: 32px
    }

    .pc-ml-40 {
        margin-left: 40px
    }

    .pc-ml-48 {
        margin-left: 48px
    }

    .pc-ml-64 {
        margin-left: 64px
    }

    .pc-ml-80 {
        margin-left: 80px
    }

    .pc-ml--4 {
        margin-left: -4px
    }

    .pc-ml--8 {
        margin-left: -8px
    }

    .pc-ml--12 {
        margin-left: -12px
    }

    .pc-ml--16 {
        margin-left: -16px
    }

    .pc-ml--24 {
        margin-left: -24px
    }

    .pc-ml--32 {
        margin-left: -32px
    }

    .pc-ml--40 {
        margin-left: -40px
    }

    .pc-ml--48 {
        margin-left: -48px
    }

    .pc-ml--64 {
        margin-left: -64px
    }

    .pc-ml--80 {
        margin-left: -80px
    }
}

@media only screen and (max-width: 1239px) {
    .sp-ma-0 {
        margin: 0
    }

    .sp-ma-4 {
        margin: 4px
    }

    .sp-ma-8 {
        margin: 8px
    }

    .sp-ma-12 {
        margin: 12px
    }

    .sp-ma-16 {
        margin: 16px
    }

    .sp-ma-24 {
        margin: 24px
    }

    .sp-ma-32 {
        margin: 32px
    }

    .sp-ma-40 {
        margin: 40px
    }

    .sp-ma-48 {
        margin: 48px
    }

    .sp-ma-64 {
        margin: 64px
    }

    .sp-ma-80 {
        margin: 80px
    }

    .sp-mt-0 {
        margin-top: 0
    }

    .sp-mt-4 {
        margin-top: 4px
    }

    .sp-mt-8 {
        margin-top: 8px
    }

    .sp-mt-12 {
        margin-top: 12px
    }

    .sp-mt-16 {
        margin-top: 16px
    }

    .sp-mt-24 {
        margin-top: 24px
    }

    .sp-mt-32 {
        margin-top: 32px
    }

    .sp-mt-40 {
        margin-top: 40px
    }

    .sp-mt-48 {
        margin-top: 48px
    }

    .sp-mt-64 {
        margin-top: 64px
    }

    .sp-mt-80 {
        margin-top: 80px
    }

    .sp-mt--4 {
        margin-top: -4px
    }

    .sp-mt--8 {
        margin-top: -8px
    }

    .sp-mt--12 {
        margin-top: -12px
    }

    .sp-mt--16 {
        margin-top: -16px
    }

    .sp-mt--24 {
        margin-top: -24px
    }

    .sp-mt--32 {
        margin-top: -32px
    }

    .sp-mt--40 {
        margin-top: -40px
    }

    .sp-mt--48 {
        margin-top: -48px
    }

    .sp-mt--64 {
        margin-top: -64px
    }

    .sp-mt--80 {
        margin-top: -80px
    }

    .sp-mr-auto {
        margin-right: auto
    }

    .sp-mr-0 {
        margin-right: 0
    }

    .sp-mr-4 {
        margin-right: 4px
    }

    .sp-mr-8 {
        margin-right: 8px
    }

    .sp-mr-12 {
        margin-right: 12px
    }

    .sp-mr-16 {
        margin-right: 16px
    }

    .sp-mr-24 {
        margin-right: 24px
    }

    .sp-mr-32 {
        margin-right: 32px
    }

    .sp-mr-40 {
        margin-right: 40px
    }

    .sp-mr-48 {
        margin-right: 48px
    }

    .sp-mr-64 {
        margin-right: 64px
    }

    .sp-mr-80 {
        margin-right: 80px
    }

    .sp-mr--4 {
        margin-right: -4px
    }

    .sp-mr--8 {
        margin-right: -8px
    }

    .sp-mr--12 {
        margin-right: -12px
    }

    .sp-mr--16 {
        margin-right: -16px
    }

    .sp-mr--24 {
        margin-right: -24px
    }

    .sp-mr--32 {
        margin-right: -32px
    }

    .sp-mr--40 {
        margin-right: -40px
    }

    .sp-mr--48 {
        margin-right: -48px
    }

    .sp-mr--64 {
        margin-right: -64px
    }

    .sp-mr--80 {
        margin-right: -80px
    }

    .sp-mb-0 {
        margin-bottom: 0
    }

    .sp-mb-4 {
        margin-bottom: 4px
    }

    .sp-mb-8 {
        margin-bottom: 8px
    }

    .sp-mb-12 {
        margin-bottom: 12px
    }

    .sp-mb-16 {
        margin-bottom: 16px
    }

    .sp-mb-24 {
        margin-bottom: 24px
    }

    .sp-mb-32 {
        margin-bottom: 32px
    }

    .sp-mb-40 {
        margin-bottom: 40px
    }

    .sp-mb-48 {
        margin-bottom: 48px
    }

    .sp-mb-64 {
        margin-bottom: 64px
    }

    .sp-mb-80 {
        margin-bottom: 80px
    }

    .sp-mb--4 {
        margin-bottom: -4px
    }

    .sp-mb--8 {
        margin-bottom: -8px
    }

    .sp-mb--12 {
        margin-bottom: -12px
    }

    .sp-mb--16 {
        margin-bottom: -16px
    }

    .sp-mb--24 {
        margin-bottom: -24px
    }

    .sp-mb--32 {
        margin-bottom: -32px
    }

    .sp-mb--40 {
        margin-bottom: -40px
    }

    .sp-mb--48 {
        margin-bottom: -48px
    }

    .sp-mb--64 {
        margin-bottom: -64px
    }

    .sp-mb--80 {
        margin-bottom: -80px
    }

    .sp-ml-auto {
        margin-left: auto
    }

    .sp-ml-0 {
        margin-left: 0
    }

    .sp-ml-4 {
        margin-left: 4px
    }

    .sp-ml-8 {
        margin-left: 8px
    }

    .sp-ml-12 {
        margin-left: 12px
    }

    .sp-ml-16 {
        margin-left: 16px
    }

    .sp-ml-24 {
        margin-left: 24px
    }

    .sp-ml-32 {
        margin-left: 32px
    }

    .sp-ml-40 {
        margin-left: 40px
    }

    .sp-ml-48 {
        margin-left: 48px
    }

    .sp-ml-64 {
        margin-left: 64px
    }

    .sp-ml-80 {
        margin-left: 80px
    }

    .sp-ml--4 {
        margin-left: -4px
    }

    .sp-ml--8 {
        margin-left: -8px
    }

    .sp-ml--12 {
        margin-left: -12px
    }

    .sp-ml--16 {
        margin-left: -16px
    }

    .sp-ml--24 {
        margin-left: -24px
    }

    .sp-ml--32 {
        margin-left: -32px
    }

    .sp-ml--40 {
        margin-left: -40px
    }

    .sp-ml--48 {
        margin-left: -48px
    }

    .sp-ml--64 {
        margin-left: -64px
    }

    .sp-ml--80 {
        margin-left: -80px
    }
}

.pa-0 {
    padding: 0
}

.pa-4 {
    padding: 4px
}

.pa-8 {
    padding: 8px
}

.pa-12 {
    padding: 12px
}

.pa-16 {
    padding: 16px
}

.pa-24 {
    padding: 24px
}

.pa-32 {
    padding: 32px
}

.pa-40 {
    padding: 40
}

.pa-48 {
    padding: 48px
}

.pa-64 {
    padding: 64px
}

.pa-80 {
    padding: 80px
}

.pt-0 {
    padding-top: 0
}

.pt-4 {
    padding-top: 4px
}

.pt-8 {
    padding-top: 8px
}

.pt-12 {
    padding-top: 12px
}

.pt-16 {
    padding-top: 16px
}

.pt-24 {
    padding-top: 24px
}

.pt-32 {
    padding-top: 32px
}

.pt-40 {
    padding-top: 40px
}

.pt-48 {
    padding-top: 48px
}

.pt-64 {
    padding-top: 64px
}

.pt-80 {
    padding-top: 80px
}

.pr-0 {
    padding-right: 0
}

.pr-4 {
    padding-right: 4px
}

.pr-8 {
    padding-right: 8px
}

.pr-12 {
    padding-right: 12px
}

.pr-16 {
    padding-right: 16px
}

.pr-24 {
    padding-right: 24px
}

.pr-32 {
    padding-right: 32px
}

.pr-40 {
    padding-right: 40px
}

.pr-48 {
    padding-right: 48px
}

.pr-64 {
    padding-right: 64px
}

.pr-80 {
    padding-right: 80px
}

.pb-0 {
    padding-bottom: 0
}

.pb-4 {
    padding-bottom: 4px
}

.pb-8 {
    padding-bottom: 8px
}

.pb-12 {
    padding-bottom: 12px
}

.pb-16 {
    padding-bottom: 16px
}

.pb-24 {
    padding-bottom: 24px
}

.pb-32 {
    padding-bottom: 32px
}

.pb-40 {
    padding-bottom: 40px
}

.pb-48 {
    padding-bottom: 48px
}

.pb-64 {
    padding-bottom: 64px
}

.pb-80 {
    padding-bottom: 80px
}

.pl-0 {
    padding-left: 0
}

.pl-4 {
    padding-left: 4px
}

.pl-8 {
    padding-left: 8px
}

.pl-12 {
    padding-left: 12px
}

.pl-16 {
    padding-left: 16px
}

.pl-24 {
    padding-left: 24px
}

.pl-32 {
    padding-left: 32px
}

.pl-40 {
    padding-left: 40px
}

.pl-48 {
    padding-left: 48px
}

.pl-64 {
    padding-left: 64px
}

.pl-80 {
    padding-left: 80px
}

@media print,
screen and (min-width: 1240px) {
    .pc-pa-0 {
        padding: 0
    }

    .pc-pa-4 {
        padding: 4px
    }

    .pc-pa-8 {
        padding: 8px
    }

    .pc-pa-12 {
        padding: 12px
    }

    .pc-pa-16 {
        padding: 16px
    }

    .pc-pa-24 {
        padding: 24px
    }

    .pc-pa-32 {
        padding: 32px
    }

    .pc-pa-40 {
        padding: 40px
    }

    .pc-pa-48 {
        padding: 48px
    }

    .pc-pa-64 {
        padding: 64px
    }

    .pc-pa-80 {
        padding: 80px
    }

    .pc-pt-0 {
        padding-top: 0
    }

    .pc-pt-4 {
        padding-top: 4px
    }

    .pc-pt-8 {
        padding-top: 8px
    }

    .pc-pt-12 {
        padding-top: 12px
    }

    .pc-pt-16 {
        padding-top: 16px
    }

    .pc-pt-24 {
        padding-top: 24px
    }

    .pc-pt-32 {
        padding-top: 32px
    }

    .pc-pt-40 {
        padding-top: 40px
    }

    .pc-pt-48 {
        padding-top: 48px
    }

    .pc-pt-64 {
        padding-top: 64px
    }

    .pc-pt-80 {
        padding-top: 80px
    }

    .pc-pr-0 {
        padding-right: 0
    }

    .pc-pr-4 {
        padding-right: 4px
    }

    .pc-pr-8 {
        padding-right: 8px
    }

    .pc-pr-12 {
        padding-right: 12px
    }

    .pc-pr-16 {
        padding-right: 16px
    }

    .pc-pr-24 {
        padding-right: 24px
    }

    .pc-pr-32 {
        padding-right: 32px
    }

    .pc-pr-40 {
        padding-right: 40px
    }

    .pc-pr-48 {
        padding-right: 48px
    }

    .pc-pr-64 {
        padding-right: 64px
    }

    .pc-pr-80 {
        padding-right: 80px
    }

    .pc-pb-0 {
        padding-bottom: 0
    }

    .pc-pb-4 {
        padding-bottom: 4px
    }

    .pc-pb-8 {
        padding-bottom: 8px
    }

    .pc-pb-12 {
        padding-bottom: 12px
    }

    .pc-pb-16 {
        padding-bottom: 16px
    }

    .pc-pb-24 {
        padding-bottom: 24px
    }

    .pc-pb-32 {
        padding-bottom: 32px
    }

    .pc-pb-40 {
        padding-bottom: 40px
    }

    .pc-pb-48 {
        padding-bottom: 48px
    }

    .pc-pb-64 {
        padding-bottom: 64px
    }

    .pc-pb-80 {
        padding-bottom: 80px
    }

    .pc-pl-0 {
        padding-left: 0
    }

    .pc-pl-4 {
        padding-left: 4px
    }

    .pc-pl-8 {
        padding-left: 8px
    }

    .pc-pl-12 {
        padding-left: 12px
    }

    .pc-pl-16 {
        padding-left: 16px
    }

    .pc-pl-24 {
        padding-left: 24px
    }

    .pc-pl-32 {
        padding-left: 32px
    }

    .pc-pl-40 {
        padding-left: 40px
    }

    .pc-pl-48 {
        padding-left: 48px
    }

    .pc-pl-64 {
        padding-left: 64px
    }

    .pc-pl-80 {
        padding-left: 80px
    }
}

@media only screen and (max-width: 1239px) {
    .sp-pa-0 {
        padding: 0
    }

    .sp-pa-4 {
        padding: 4px
    }

    .sp-pa-8 {
        padding: 8px
    }

    .sp-pa-12 {
        padding: 12px
    }

    .sp-pa-16 {
        padding: 16px
    }

    .sp-pa-24 {
        padding: 24px
    }

    .sp-pa-32 {
        padding: 32px
    }

    .sp-pa-40 {
        padding: 40px
    }

    .sp-pa-48 {
        padding: 48px
    }

    .sp-pa-64 {
        padding: 64px
    }

    .sp-pa-80 {
        padding: 80px
    }

    .sp-pt-0 {
        padding-top: 0
    }

    .sp-pt-4 {
        padding-top: 4px
    }

    .sp-pt-8 {
        padding-top: 8px
    }

    .sp-pt-12 {
        padding-top: 12px
    }

    .sp-pt-16 {
        padding-top: 16px
    }

    .sp-pt-24 {
        padding-top: 24px
    }

    .sp-pt-32 {
        padding-top: 32px
    }

    .sp-pt-40 {
        padding-top: 40px
    }

    .sp-pt-48 {
        padding-top: 48px
    }

    .sp-pt-64 {
        padding-top: 64px
    }

    .sp-pt-80 {
        padding-top: 80px
    }

    .sp-pr-0 {
        padding-right: 0
    }

    .sp-pr-4 {
        padding-right: 4px
    }

    .sp-pr-8 {
        padding-right: 8px
    }

    .sp-pr-12 {
        padding-right: 12px
    }

    .sp-pr-16 {
        padding-right: 16px
    }

    .sp-pr-24 {
        padding-right: 24px
    }

    .sp-pr-32 {
        padding-right: 32px
    }

    .sp-pr-40 {
        padding-right: 40px
    }

    .sp-pr-48 {
        padding-right: 48px
    }

    .sp-pr-64 {
        padding-right: 64px
    }

    .sp-pr-80 {
        padding-right: 80px
    }

    .sp-pb-0 {
        padding-bottom: 0
    }

    .sp-pb-4 {
        padding-bottom: 4px
    }

    .sp-pb-8 {
        padding-bottom: 8px
    }

    .sp-pb-12 {
        padding-bottom: 12px
    }

    .sp-pb-16 {
        padding-bottom: 16px
    }

    .sp-pb-24 {
        padding-bottom: 24px
    }

    .sp-pb-32 {
        padding-bottom: 32px
    }

    .sp-pb-40 {
        padding-bottom: 40px
    }

    .sp-pb-48 {
        padding-bottom: 48px
    }

    .sp-pb-64 {
        padding-bottom: 64px
    }

    .sp-pb-80 {
        padding-bottom: 80px
    }

    .sp-pl-0 {
        padding-left: 0
    }

    .sp-pl-4 {
        padding-left: 4px
    }

    .sp-pl-8 {
        padding-left: 8px
    }

    .sp-pl-12 {
        padding-left: 12px
    }

    .sp-pl-16 {
        padding-left: 16px
    }

    .sp-pl-24 {
        padding-left: 24px
    }

    .sp-pl-32 {
        padding-left: 32px
    }

    .sp-pl-40 {
        padding-left: 40px
    }

    .sp-pl-48 {
        padding-left: 48px
    }

    .sp-pl-64 {
        padding-left: 64px
    }

    .sp-pl-80 {
        padding-left: 80px
    }
}

.txt-err {
    color: #de1818
}

.txt-chg {
    color: #de1818
}

.txt-add {
    color: #0371ee
}

.txt-og {
    color: #ea7000
}

@media print,
screen and (min-width: 1240px) {
    .pc-txt-err {
        color: #de1818
    }

    .pc-txt-chg {
        color: #de1818
    }

    .pc-txt-add {
        color: #0371ee
    }

    .pc-txt-og {
        color: #ea7000
    }
}

@media only screen and (max-width: 1239px) {
    .sp-txt-err {
        color: #de1818
    }

    .sp-txt-chg {
        color: #de1818
    }

    .sp-txt-add {
        color: #0371ee
    }

    .sp-txt-og {
        color: #ea7000
    }
}

.txt-rt {
    text-align: right
}

.txt-cr {
    text-align: center
}

.txt-lt {
    text-align: left
}

@media print,
screen and (min-width: 1240px) {
    .pc-txt-rt {
        text-align: right
    }

    .pc-txt-cr {
        text-align: center
    }

    .pc-txt-lt {
        text-align: left
    }
}

@media only screen and (max-width: 1239px) {
    .sp-txt-rt {
        text-align: right
    }

    .sp-txt-cr {
        text-align: center
    }

    .sp-txt-lt {
        text-align: left
    }
}

.fs-l {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .fs-l {
        font-size: 1.8rem
    }
}

@media only screen and (max-width: 1239px) {
    .fs-l {
        font-size: 1.7rem
    }
}

.fs-m {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .fs-m {
        font-size: 1.6rem
    }
}

@media only screen and (max-width: 1239px) {
    .fs-m {
        font-size: 1.5rem
    }
}

.fs-s {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .fs-s {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 1239px) {
    .fs-s {
        font-size: 1.2rem
    }
}

.fs-xs {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .fs-xs {
        font-size: 1.2rem
    }
}

@media only screen and (max-width: 1239px) {
    .fs-xs {
        font-size: 1rem
    }
}

.fs-xxs {
    line-height: 160%
}

@media print,
screen and (min-width: 1240px) {
    .fs-xxs {
        font-size: 1rem
    }
}

@media only screen and (max-width: 1239px) {
    .fs-xxs {
        font-size: .8rem
    }
}

@media print,
screen and (min-width: 1240px) {
    .pc-fs-l {
        font-size: 1.8rem;
        line-height: 160%
    }

    .pc-fs-m {
        font-size: 1.6rem;
        line-height: 160%
    }

    .pc-fs-s {
        font-size: 1.4rem;
        line-height: 160%
    }

    .pc-fs-xs {
        font-size: 1.2rem;
        line-height: 160%
    }

    .pc-fs-xxs {
        font-size: 1rem;
        line-height: 160%
    }
}

@media only screen and (max-width: 1239px) {
    .sp-fs-l {
        font-size: 1.7rem;
        line-height: 160%
    }

    .sp-fs-m {
        font-size: 1.5rem;
        line-height: 160%
    }

    .sp-fs-s {
        font-size: 1.2rem;
        line-height: 160%
    }

    .sp-fs-xs {
        font-size: 1rem;
        line-height: 160%
    }

    .sp-fs-xxs {
        font-size: .8rem;
        line-height: 160%
    }
}

.fw-nl {
    font-weight: 400
}

.fw-bl {
    font-weight: 700
}

@media print,
screen and (min-width: 1240px) {
    .pc-fw-nl {
        font-weight: 400
    }

    .pc-fw-bl {
        font-weight: 700
    }
}

@media only screen and (max-width: 1239px) {
    .sp-fw-nl {
        font-weight: 400
    }

    .sp-fw-bl {
        font-weight: 700
    }
}