@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html {
    font-size: 16px
}

@media screen and (max-width: 1064px) {
    html {
        font-size: 1.50375939849624vw
    }
}

@media screen and (max-width: 750px) {
    html {
        font-size: 3vw
    }
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: #333;
    position: relative;
    width: 100%;
    color: #000000;
    padding-top: 82px
}

body.fixed {
    height: 100vh;
    overflow: hidden
}

li {
    list-style: none
}

img {
    display: block;
    max-width: 100%
}

p {
    margin: 0 auto
}

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

@media screen and (max-width: 750px) {
    body {
        padding-top: 60px
    }

    .pc {
        display: none
    }
}

.bold {
    font-weight: 700
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 50;
    font-size: 16px
}

header .inner {
    height: 82px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative
}

header .inner .logo {
    width: 9.5em
}

header .inner .navi ul {
    display: flex;
    align-items: center;
    line-height: 1.25
}

header .inner .navi ul > li {
    border-left: 2px solid #000
}

header .inner .navi ul > li:first-child {
    border-left: none
}

header .inner .navi ul > li a {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 0 1.25em
}

header.on {
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.1)
}

@media screen and (max-width: 750px) {
    header .inner {
        height: 60px
    }

    header .inner .logo {
        width: 120px
    }

    header .inner .navi ul > li a {
        font-size: 11px;
        padding: .5em
    }
}

footer {
    margin-bottom: 5em
}

footer .links {
    margin: 1.5em auto
}

footer .links ul {
    display: flex;
    justify-content: center
}

footer .links ul > li {
    padding: 0 1.5em;
    border-left: 1px solid #7a8891
}

footer .links ul > li:first-child {
    border-left: none
}

footer .links ul > li a {
    display: block;
    color: #7a8891;
    text-decoration: none;
    letter-spacing: .1em
}

footer .copyright {
    background-color: #e8e8eb;
    padding: 3em 0;
    text-align: center;
    font-size: .75em;
    letter-spacing: .1em
}

@media screen and (max-width: 750px) {
    footer .bn a {
        width: 100%
    }

    footer .blk1 {
        padding: 2em 0
    }
}

.anc {
    height: 82px;
    margin-top: -82px;
    z-index: -1;
    position: relative;
    pointer-events: none
}

@media screen and (max-width: 750px) {
    .anc {
        height: 60px;
        margin-top: -60px
    }
}

.kv {
    background: #c6e0ee;
    background: linear-gradient(0deg, #c6e0ee 0%, #e9ebee 100%);
    overflow: hidden;
    padding: 3em 0
}

.kv .img {
    width: 88.4%;
    margin: 0 auto
}

@media screen and (max-width: 750px) {
    .kv {
        padding: 1.5em 0
    }

    .kv .inner {
        padding: 0
    }

    .kv .img {
        width: 100%
    }
}

.common-inner {
    max-width: calc(1000px + 4em);
    padding: 0 2em;
    margin: 0 auto
}

@media screen and (max-width: 750px) {
    .common-inner {
        padding: 0 1em
    }
}

.g1 {
    margin: 2em auto 6em
}

.g1 .inner {
    padding: 0 1.375em
}

.g1 .slick-slide {
    padding: 0 .625em
}

.g1 .slick-slide img {
    width: 20em
}

.g1 .slick-prev,
.g1 .slick-next {
    font-size: 1em;
    top: calc(100% + .5em);
    transform: scale(1);
    width: 2.875em;
    height: 2.875em;
    background: url(../images/arrow1.svg) center center no-repeat;
    background-size: 100%
}

.g1 .slick-prev:before,
.g1 .slick-next:before {
    display: none
}

.g1 .slick-prev {
    left: .625em
}

.g1 .slick-next {
    right: .625em;
    transform: scale(-1, 1)
}

@media screen and (max-width: 750px) {
    .g1 .inner {
        padding: 0
    }

    .g1 .slick-slide {
        padding: 0 .75em
    }

    .g1 .slick-slide img {
        width: auto
    }
}

.common-h2-1 {
    background-color: #3271a1;
    color: #fff;
    text-align: center;
    font-size: 1.5em;
    font-weight: 500;
    letter-spacing: .1em;
    padding: .5em 0
}

@media screen and (max-width: 750px) {
    .common-h2-1 {
        font-size: 1.25em
    }
}

.g2 .common-h2-1 {
    color: #ffedad
}

.g2 .list1 {
    display: flex;
    justify-content: center;
    margin: 3em auto 2em
}

.g2 .list1 > li {
    padding: 0 .5em
}

.g2 .list1 .detail {
    border: .25em solid #7c8ab8;
    width: 17.375em;
    height: 8em;
    display: flex;
    align-items: center;
    position: relative
}

.g2 .list1 .detail .num {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    top: -1em;
    left: calc(50% - 1em);
    background-color: #7c8ab8;
    color: #fff;
    border-radius: 50%;
    font-weight: 700
}

.g2 .list1 .detail .text {
    width: 100%;
    text-align: center
}

.g2 .list1 .detail .text p {
    font-size: 1.125em;
    font-weight: 500;
    line-height: 1.75
}

.g2 .cap1 {
    font-size: .875em;
    line-height: 2
}

.g2 h3 {
    margin: 2em auto .5em;
    color: #3271a1;
    text-align: center;
    font-size: 1.75em;
    font-weight: 700;
    letter-spacing: .1em
}

.g2 .toform {
    margin: .5em auto;
    display: block;
    font-size: 1.75em;
    font-weight: 700;
    text-align: center;
    width: 24em;
    padding: 1em 0;
    background-color: #3271a1;
    color: #fff;
    letter-spacing: .1em;
    text-decoration: none;
    position: relative;
    border-radius: .25em;
    box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.1)
}

.g2 .toform:before {
    content: "";
    display: block;
    position: absolute;
    right: 1em;
    top: calc(50% - .25em);
    border-style: solid;
    border-width: .5em .3em 0 .3em;
    border-color: #fff transparent transparent transparent;
    transition: .3s
}

@media screen and (max-width: 750px) {
    .g2 .list1 {
        flex-wrap: wrap;
        margin: 2em -.5em 0
    }

    .g2 .list1 > li {
        width: 50%;
        padding: 0 .5em 1.5em
    }

    .g2 .list1 .detail {
        width: auto;
        height: 6em
    }

    .g2 .list1 .detail .text p {
        font-size: 1em
    }

    .g2 .cap1 {
        font-size: 1.25em
    }

    .g2 h3 {
        font-size: 1.5em
    }

    .g2 .toform {
        width: 90%;
        font-size: 1.25em
    }
}

.schedule {
    margin: 3em auto
}

.schedule .title1 {
    margin-top: 1em
}

.schedule .acvs {
    background: #c6e0ee;
    background: linear-gradient(0deg, #c6e0ee 0%, #e9ebee 100%);
    padding: 2em 1.5em;
    margin: 1.5em auto;
    display: flex
}

.schedule .acvs .left {
    flex: 1
}

.schedule .acvs .left img {
    width: 8.875em
}

.schedule .acvs .right {
    width: 100em
}

@media screen and (max-width: 750px) {
    .schedule .acvs {
        flex-wrap: wrap;
        padding: 1em
    }

    .schedule .acvs .left {
        flex: 1 0 auto;
        width: 100%;
        margin-bottom: 1em
    }

    .schedule .acvs .right {
        width: 100%
    }
}

.acv + .acv {
    margin-top: 1.5em
}

.acv .hd1 {
    display: flex;
    align-items: center
}

.acv .hd1 .time {
    width: 12.625em
}

.acv .hd1 .text {
    padding-left: .5em
}

.acv .hd1 .text h4 {
    color: #3271a1;
    font-size: 1.25em;
    font-weight: 500
}

.acv .hd2 {
    background-color: #3271a1;
    color: #fff;
    padding: 1em 1.5em;
    display: flex;
    align-items: center
}

.acv .hd2 .text {
    flex: 1;
    padding-right: 2em
}

.acv .hd2 .text h3 {
    font-size: 1.25em;
    font-weight: 500;
    padding-bottom: .5em;
    margin-bottom: .5em;
    border-bottom: 1px solid #fff
}

.acv .hd2 .text h4 {
    font-size: 1.25em;
    font-weight: 500
}

.acv .hd2 .img {
    width: 6em;
    box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.1)
}

.acv .body {
    background-color: #fff;
    padding: 1.5em 2em
}

.acv .body .btn-detail {
    display: block;
    position: relative;
    border: 1px solid #3271a1;
    padding: .5em;
    color: #3271a1;
    text-decoration: none
}

.acv .body .btn-detail:before {
    content: "";
    display: block;
    position: absolute;
    right: 1em;
    top: calc(50% - .3em);
    border-style: solid;
    border-width: .6em .4em 0 .4em;
    border-color: #3271a1 transparent transparent transparent;
    transition: .3s
}

.acv .body .btn-detail + div {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: .3s
}

.acv .body .btn-detail.on:before {
    transform: scale(1, -1)
}

.acv .body .btn-detail.on + div {
    max-height: 100em;
    opacity: 1;
    padding: 1em 0 0
}

.acv .body p {
    line-height: 1.75
}

.acv .body .imgs {
    display: flex;
    justify-content: space-between;
    margin-top: 1em
}

.acv .body .imgs.jc-center {
    justify-content: center
}

.acv .body .imgs > div {
    width: 27em
}

@media screen and (max-width: 750px) {
    .acv .hd1 .time {
        width: 10em
    }

    .acv .hd2 {
        padding: 1em;
        position: relative
    }

    .acv .hd2 .text {
        padding-right: 0
    }

    .acv .hd2 .text h3 {
        font-size: 1em
    }

    .acv .hd2 .text h4 {
        font-size: 1em;
        min-height: 4em;
        display: flex;
        align-items: center
    }

    .acv .hd2 .img {
        position: absolute;
        right: 1em;
        bottom: 1em;
        width: 5em
    }

    .acv .body .imgs {
        flex-wrap: wrap;
        justify-content: center
    }

    .acv .body .imgs > div {
        width: 80%
    }

    .acv .body .imgs > div + div {
        margin-top: 1em
    }
}

.outline {
    margin: 3em auto
}

.outline table {
    width: 100%;
    border-collapse: collapse
}

.outline table tr {
    border-bottom: 1px solid #3271a1
}

.outline table td {
    padding: 1.5em;
    vertical-align: middle
}

.outline table td:first-child {
    background-color: #e8e8eb;
    text-align: center;
    width: 12em
}

.outline table td a {
    color: #3271a1
}

@media screen and (max-width: 750px) {
    .outline table {
        display: block
    }

    .outline table tbody,
    .outline table tr,
    .outline table td {
        display: block
    }

    .outline table tbody:first-child,
    .outline table tr:first-child,
    .outline table td:first-child {
        width: auto;
        text-align: left;
        border-bottom: 1px solid #3271a1
    }

    .outline table td {
        padding: 1em
    }
}

.entry-form {
    margin: 3em auto
}

.entry-form .cap1 {
    margin: 2em auto 1em;
    color: #3271a1;
    text-align: center;
    font-size: 1.75em;
    font-weight: 700;
    letter-spacing: .1em
}

.entry-form .entry-form-body {
    min-height: 12em;
    background-color: #fff;
    margin: 1.5em auto 0
}

@media screen and (max-width: 750px) {
    .entry-form .cap1 {
        font-size: 1.5em
    }
}

.fb {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #3271a1;
    color: #fff;
    overflow: hidden;
    transition: .3s
}

.fb .inner > div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5em;
    align-items: center
}

.fb.hide {
    bottom: -8em
}

.fb .text {
    padding-right: 2em
}

.fb .cap1 {
    color: #fff;
    text-align: center;
    font-size: 1.75em;
    font-weight: 700;
    letter-spacing: .1em
}

.fb a {
    display: block;
    background-color: #fff;
    color: #3271a1;
    text-decoration: none;
    width: 18.25em;
    text-align: center;
    padding: 1em 0;
    border-radius: .25em;
    position: relative;
    box-shadow: 0.25em 0.25em 0.5em rgba(0, 0, 0, 0.2)
}

.fb a:before {
    content: "";
    display: block;
    position: absolute;
    right: 1em;
    top: calc(50% - .4em);
    border-style: solid;
    border-width: .4em 0 .4em .6em;
    border-color: transparent transparent transparent #3271a1;
    transition: .3s
}

.fb a span {
    font-size: 1.125em;
    font-weight: 500;
    letter-spacing: .1em
}

@media screen and (max-width: 750px) {
    .fb .text {
        padding-right: 1em
    }

    .fb .cap1 {
        font-size: 1.125em
    }

    .fb a {
        width: 12em
    }
}

#mymodal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    padding: 4em 3em 2em;
    transition: .3s;
    opacity: 0;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto
}

#mymodal.on {
    opacity: 1;
    z-index: 10000
}

#mymodal .mymodalbg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-color: rgba(0, 0, 0, 0.8)
}

#mymodal .mymodalcwrap {
    position: relative;
    width: 100%;
    max-width: 920px;
    max-height: calc(100vh - 4em)
}

#mymodal .mymodalcontent {
    position: relative;
    overflow: auto
}

#mymodal .mymodalclosebtn {
    position: absolute;
    right: 0;
    bottom: 100%;
    display: block;
    width: 4em;
    height: 4em;
    color: #000
}

#mymodal .mymodalclosebtn:before,
#mymodal .mymodalclosebtn:after {
    content: "";
    display: block;
    position: absolute;
    width: 50%;
    top: calc(50% - 1px);
    left: 25%;
    border-top: 2px solid #fff
}

#mymodal .mymodalclosebtn:before {
    transform: rotate(45deg)
}

#mymodal .mymodalclosebtn:after {
    transform: rotate(-45deg)
}

#mymodal .mymodal-next,
#mymodal .mymodal-prev {
    position: absolute;
    top: calc(50% - 3em);
    width: 3em;
    height: 6em
}

#mymodal .mymodal-next:before,
#mymodal .mymodal-prev:before {
    content: "";
    display: block;
    position: absolute;
    left: .8em;
    top: calc(50% - .5em);
    width: 1em;
    height: 1em;
    border-style: solid;
    border-width: 2px;
    border-color: #fff #fff transparent transparent;
    transform: scale(1, 2) rotate(45deg)
}

#mymodal .mymodal-prev {
    right: 100%;
    transform: scale(-1, 1)
}

#mymodal .mymodal-next {
    left: 100%
}

@media screen and (max-width: 750px) {
    #mymodal {
        padding: 3.6em 1.5em 0;
        height: 100vh;
        top: 0;
        width: 100%
    }

    #mymodal .mymodalbg {
        background-color: none
    }

    #mymodal .mymodalcwrap {
        width: 100%;
        transition: .3s
    }

    #mymodal .mymodalcontent {
        max-height: calc(100vh - 4.6em)
    }

    #mymodal .mymodalclosebtn {
        position: absolute;
        width: 3.6em;
        height: 3.6em
    }

    #mymodal .mymodalclosebtn:hover {
        opacity: 1
    }

    #mymodal.on {
        z-index: 120
    }
}

.temps {
    display: none
}

.thanks {
    margin: 3em auto
}

.thanks p {
    text-align: center;
    line-height: 1.8
}

.thanks .cap1 {
    font-size: 1.25em;
    margin: 1em auto
}

.thanks .cap2 {
    margin: 1em auto;
    padding: 1em 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc
}

.thanks h3 {
    text-align: center;
    font-size: 1.5em;
    margin: 1em auto .25em
}

.thanks .cap3 {
    margin-bottom: 1em
}

/*# sourceMappingURL=style.css.map */