:root {
    --main-color: #0096FF;
    --text-color: #333333;
    --max-width: 1000px;
}
html {
    scroll-behavior: smooth;
}
body {
    background: #F1F1F1;
    color:var(--text-color);
    padding-bottom: 80px;
    font-family: 'Yu Gothic UI',YuGothic,'Yu Gothic','Meiryo UI','メイリオ', Meiryo,'ヒラギノ角ゴシック','Hiragino Sans','ＭＳ ゴシック',sans-serif;
}
._spOnly {
    display: none !important;
}
header {
    background: #FFFFFF;
    border-top: 2px solid #184775;
    padding: 8px 16px;
}

.header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.main-image {
    max-width: var(--max-width);
    margin: 16px auto 0;
    position: relative;
    /* padding-bottom: 120px; */
}
.main-image img{
    width: 100%;
}
.schesule {
    bottom: 0;
    background: rgb(255 255 255 / 90%);
    padding: 24px;
    box-shadow: 0 4px 8px rgb(0 0 0 / 25%);
    margin-top: 20px;
}
.schesule-header {
    text-align: center;
    position: relative;
}
.schesule-header:before,
.schesule-header:after {
    content: "";
    display: block;
    width: calc(50% - 96px);
    height: 2px;
    background: var(--main-color);
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
}
.schesule-header:before {
    left: 0;
}
.schesule-header:after {
    right: 0;
}
.schesule-header-text {
    color: var(--main-color);
    font-weight: bold;
    font-size: 32px;
}


.schesule-content {
    display: flex;
    align-items: center;
    margin-top: 24px;
}
.schesule-content+.schesule-content {
    display: flex;
    align-items: center;
    margin-top: 16px;
}

.schesule-content>dl:nth-child(odd) {
    display: flex;
    align-items: center;
    width: 55%;
}
.schesule-content>dl:nth-child(even) {
    display: flex;
    align-items: center;
    width: 45%;
}
.schesule-content>dl>dt {
    color: #FFFFFF;
    background: var(--main-color);
    display: inline-block;
    padding: 8px 16px;
    font-weight: bold;
    margin-right: 8px;
    white-space: nowrap;
    font-size: 14px;
    width: 78px;
    padding: 8px;
    text-align: center;
}
.schesule-content>dl>dd {
    font-weight: bold;
}
.banner-wrap {
    max-width: var(--max-width);
    margin: 16px auto 0;
    padding: 0 16px;
    display: flex;
    justify-content: center;
}
.banner-image {
    max-width: 480px;
    margin: 16px auto 0;
    display: flex;
    justify-content: center;
}
.navigation {
    max-width: var(--max-width);
    margin: 32px auto 0;
    display: flex;
    gap: 8px;
}
.navigation-item {
    width: calc((100% - (8px * 5)) /5);
    line-height: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--main-color);
    color: #FFFFFF;
    font-weight: bold;
    padding: 8px 8px 24px;
    position: relative;
    box-shadow: 0 4px 8px rgb(0 0 0 / 25%);
}
.navigation-item.is-disabled {
    background: #AAA;
}
.navigation-item:after {
    width: 10px;
    height: 10px;
    content: "";
    display: block;
    border-right: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
    position: absolute;
    bottom: 8px;
    transform: rotate(45deg) translateX(-50%);
    left: 50%;
}
.navigation-item._accent {
    background: #1be067;
}

.section {
    max-width: var(--max-width);
    margin: 32px auto 0;
    padding: 32px;
    background: #FFFFFF;
    box-shadow: 0 4px 8px rgb(0 0 0 / 25%);
}


.section.news {
    display: flex;
    gap: 24px;
}
.news-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.news-head-text {
    font-size: 16px;
    font-weight: bold;
}
.news-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.news-content>dl {
    display: flex;
    align-items: center;
    gap: 16px;
}
.news-content>dl>dt {
    font-weight: bold;
}
.news-content>dl>dd {
    list-style: 1.5em;
}

.content-head {
    text-align: center;
    position: relative;
}
.content-head:before,
.content-head:after {
    content: "";
    display: block;
    width: calc(50% - 128px);
    height: 2px;
    background: #AAAAAA;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
}
.content-head:before {
    left: 0;
}
.content-head:after {
    right: 0;
}
.content-head-text {
    color: var(--text-color);
    font-weight: bold;
    font-size: 24px;
}
.content-head2 {
    position: relative;
}
.content-head2:before {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: #AAAAAA;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
    right: 0;
}

.content-head2-text {
    color: var(--text-color);
    font-weight: bold;
    font-size: 24px;
    background: #FFFFFF;
    position: relative;
    z-index: 1;
    display: inline-block;
    padding-right: 24px;
}


.content-inner {
    padding: 32px 0 0;
}

.companies-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.companies-navigation-item {
    width: calc((100% - 16px*2)/3);
    border: 1px solid #DDDDDD;
    background: #FFF;
    padding: 8px 16px;
    font-size: 18px;
    border-radius: 5px;
    position: relative;
    box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.companies-navigation-item>img {
    width: 100%;
    aspect-ratio: 240/60;
    object-fit: contain;
}
.companies-navigation-item>span {
    font-size: 12px;
    color: #555555;
}
.companies-group-list {
    margin-top: 24px;
}
.copanies-group {
    padding-top: 24px;
    border-top: 2px solid #DDD;
}
.copanies-group+.copanies-group {
    margin-top: 32px;
}
.copanies-group-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    justify-content: center;
}
.copanies-group-head:after {
    /* content: ""; */
    display: block;
    width: 100%;
    height: 2px;
    background: #AAAAAA;
}
.copanies-group-head-logo{
    display: flex;
    align-items: center;
    gap: 4px;
    flex-direction: column;
}
.copanies-group-head-logo>img {
    aspect-ratio: 220/80;
    object-fit: contain;
    width: 75%;
    max-width: 220px;
}
.copanies-group-head-logo>span {
    font-size: 14px;
    color: #555555;
}
.copanies-video {
    display: block;
}

.copanies-video>video {
    width: 100%;
    display: block;
}
.copanies-button {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}
.copanies-button>a {
    background: var(--main-color);
    color: #FFFFFF;
    padding: 1em 2em;
    border-radius: 5px;
    font-weight: bold;
}

.company {
    box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
    border: 2px solid var(--main-color);
    border-radius: 5px;
}

.company-head {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.company-name {
    color: var(--main-color);
    font-weight: bold;
    font-size: 14px;
}
.company-info {
    font-size: 12px;
}

.company-footer {
    padding: 16px 8px;
    text-align: center;
}
.company-link {
    background: var(--main-color);
    padding: 1em 1.5em;
    display: inline-block;
    color: #FFF;
    font-weight: bold;
    font-size: 14px;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
}

.company-image>img {
    width: 100%;
}

.venue-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.venue-text {
    line-height: 1.5em;
}
.venue-text>a {
    color: var(--main-color);
    text-decoration: underline;
}
.venue-head>img {
    width: 100%;
}
.venue-contents {
    padding-top: 32px;
}
.venue-content {
    margin-top: 24px;
}

.venue-content-head {
    font-weight: bold;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid #DDD;
    display: flex;
    align-items: center;
    padding-left: 8px;
    padding-right: 8px;
}
.venue-content-head:before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    background: var(--main-color);
    line-height: 1em;
    margin-right: 8px;
}

.venue-content-inner {
    display: flex;
    border: 1px solid #DDD;
    margin-top: 8px;
}
.venue-content:nth-child(even) .venue-content-inner{
    flex-direction: row-reverse;
}
section#howto .content-inner {
    max-width: 640px;
    margin: 0 auto;
}
.venue-content-inner>img {
    aspect-ratio: 430 / 300;
    width: 430px;
}
.venue-content-caption {
    width: 100%;
    padding: 16px;
    line-height: 1.5em;
}

.howto-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding-bottom: 24px;
}
.howto-navigation-button {
    border: 1px solid #DDDDDD;
    background: #F1F1F1;
    padding: 0.5em 2.5em 0.5em 1.5em;
    font-size: 18px;
    border-radius: 5px;
    position: relative;
    box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
    cursor: pointer;
}
.howto-navigation-button:after {
    width: 10px;
    height: 10px;
    content: "";
    display: block;
    border-right: 2px solid ;
    border-bottom: 2px solid;
    position: absolute;
    right: 1em;
    transform: rotate(45deg) translateY(-50%);
    top: calc(50% - 0.25em);
}
.howto-contents-text {
    display: block;
    line-height: 1.5em;
    margin-bottom: 16px;
    background: #F9F8F7;
    padding: 1em;
}

.howto-contents{
    display: block;
}
.howto-content._row {
    display: flex;
    align-items: end;
    gap: 16px;
}
.howto-content-head {
    font-weight: bold;
    display: flex;
    align-items: center;
    background: #EEE;
    padding: 0.5em;
    margin-top: 1em;
    line-height: 1.25em;
}
.howto-content-head._green {
    background-color: #E8F1EC;
}
.howto-content-head._blue {
    background-color: #C8EAFF;
}
.howto-content-head._pink {
    background-color: #FFC2E3;
}

.howto-content+.howto-content .howto-content-head {
    border-top: 1px solid #DDD;
    margin-top: 32px;
}
.howto-content img {
    max-width: 500px;
    max-height: 400px;
    display: block;
    margin: 16px auto 0;
    width: 100%;
    object-fit: contain;
}
.howto-content-caption {
    line-height: 1.5em;
    margin-top: 16px;
}
.howto-content-item {
    width: calc((100% - 8px) / 2);
}
.howto-content-inner {
    display: flex;
    padding-bottom: 16px;
}
.howto-content-inner>* {
    width: calc((100% - 8px) / 2);
}
.howto-content-inner>img {
    max-width: fit-content;
    border: 1px solid #DDD;
}
.howto-content-inner-caption {
    padding: 16px 0 0;
    line-height: 1.5em;
}
._red {
    color: #EE0000;
}
._bold {
    font-weight: bold;
}

.qa-content+.qa-content {
    margin-top: 32px;
}
.qa-inner+.qa-inner {
    margin-top: 16px;
}
.qa-inner {
    display: flex;
    gap: 16px;
    align-items: center;
}
.qa-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    font-weight: bold;
    color: #FFF;
}

.qa-icon._q {
    background: var(--main-color);
}
.qa-icon._a {
    background: #FF6F00;
}

.qa-text {
    line-height: 1.5em;
    width: calc(100% - 56px);
}
.qa-text._q {
    font-weight: bold;
}
.gift-content {
    display: flex;
    gap: 16px;
}
.gift-image {
    width: calc(40% - 16px);
}
.gift-information {
    width: 60%;
}
.gift-information-item+.gift-information-item {
    margin-top: 1em;
}
.gift-item-head {
    font-weight: bold;
}
.gift-item-text {
    margin-top: .5em;
    line-height: 1.5em;
}
.footer-logo {
    padding: 64px 0;
    text-align: center;
}
.footer-bottom {
    padding: 16px 0;
    background: var(--main-color);
}
.footer-bottom-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
}
.footer-bottom-text {
    width: 50%;
    color: #FFF;
    font-size: 12px;
    line-height: 1.5em;
}
.footer-bottom-nav {
    width: 50%;
    display: flex;
    justify-content: end;
    gap: 8px;
}
.footer-bottom-link {
    color: #FFFFFF;
    font-size: 12px;
}
.float-footer {
    position: fixed;
    bottom: 0;
    z-index: 1;
    background: rgb(97 173 226 / 80%);
    width: 100%;
    padding: 16px;
    box-shadow: 0 -4px 8px rgba(0 0 0 / 10%);
    text-align: center;
}
.float-footer-link {
    background: #BBBBBB;
    color: #FFF;
    font-weight: bold;
    padding: 1em 1.5em;
    display: inline-block;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
}
.float-footer-link.is-active {
    background: #FF6F00;
}

@media (max-width: 768px) {
    ._pcOnly {
        display: none !important;
    }
    ._spOnly {
        display: block !important;
    }
    .main-image {
        margin: 0;
        padding: 0;
    }
    header {
        background: #e0e0e0;
        color: #555555;
        font-size: 12px;
        text-align: center;
    }
    .schesule {
        padding: 16px;
        position: relative;
        /* top: -20px; */
        /* width: calc(100% - 24px); */
        margin-top: 16px;
        margin: 16px;
    }
    .schesule-content {
        flex-direction: column;
        gap: 16px;
    }
    
    .schesule-content>dl {
        width: 100%;
        justify-content: start;
    }
    .schesule-content>dl:nth-child(odd) {
        width: 100%;
        justify-content: start;
    }
    .schesule-content>dl:nth-child(even) {
        width: 100%;
        justify-content: start;
    }
    
    .schesule-content>dl>dt {
        width: 78px;
        padding: 8px;
    }
    
    .schesule-content>dl>dd {
        width: calc(100% - 86px);
        font-size: 14px;
    }
    
    .schesule-header-text {
        font-size: 24px;
    }
    .navigation {
        padding: 0 16px;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .navigation-item {
        width: calc((100% - (8px* 3)) / 3);
        min-height: 56px;
        font-size: 12px;
        padding: 8px 0px 24px;
    }
    
    .section.news {
        margin: 32px 16px 0;
        flex-direction: column;
    }
    
    .news-head {
        flex-direction: row;
        align-items: end;
    }
    
    .news-content>dl {
        flex-direction: column;
        align-items: start;
        gap: 8px;
    }
    .section {
        margin: 32px 16px 0;
        padding: 32px 16px;
    }
    .content-head-text {
        font-size: 20px;
    }
    .content-head2-text {
        font-size: 16px;
    }
    .content-head:before, .content-head:after{
        width: calc(50% - 100px);
    }
    a.companies-navigation-item {
        width: calc((100% - 16px* 1) / 2);
        padding: 8px;
    }
    .venue-content-head {
        font-size: 16px;
    }
    .venue-head-text {
        font-size: 14px;
    }
    .venue-content-inner {
        flex-direction: column;
    }
    .venue-content:nth-child(even) .venue-content-inner {
        flex-direction: column;
    }
    .venue-content-inner>img {
        width: 100%;
    }
    
    .venue-content-caption {
        padding: 8px;
        font-size: 14px;
    }
    .howto-navigation-button {
        font-size: 12px;
    }
    .howto-navigation-button:after {
        width: 5px;
        height: 5px;
    }
    .gift-content {
        flex-direction: column;
        align-items: center;
    }
    .gift-image {
        width: 100%;
    }
    
    .gift-information {
        width: 100%;
    }
    .footer-bottom-inner {
        flex-direction: column-reverse;
        padding: 0 16px;
    }
    
    .footer-bottom-text {
        width: 100%;
    }
    
    .footer-bottom-nav {
        width: 100%;
        justify-content: center;
        margin-bottom: 16px;
    }
}



.howto-application-buttons {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.howto-application-button {
    background: #555;
    color: #FFF;
    padding: 8px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
    width: calc((100% - 8px) / 2);
}
.howto-application {
    padding-bottom: 64px;
}
.howto-application-info {
    margin-top: 16px;
}
.howto-application-info>a {
    line-height: 1.5em;
    text-decoration: underline;
    color: #06F;
}
a.howto-application-button>span {
    font-size: 12px;
    margin-top: 4px;
    display: inline-block;
    line-height: 1.25em;
}


.howto-contents+.howto-contents {
    margin-top: 2em;
}
.howto-content-text {
    margin-top: 1em;
    line-height: 1.5em;
}