/* Header */

section.top {
    position: relative;
    margin:0 auto;
    padding-top: 92.18%;
    background: url(../img/pc_top.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

ul.btn_box {
    position:absolute;
    bottom:5%;
    left: 50%;
    width:100%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    text-align: center;
}
ul.btn_box li {
    display: inline-block;
    width: 40%;
    margin: 0 1%;
    padding: 0;
}
section.top .attention {
    position: absolute;
    bottom: 2.5%;
    left: 50%;
    width: 100%;
    font-size: 0.8vw;
    color: #FFF;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    text-align: center;
}

section.intro {
    position: relative;
    margin:0 auto;
    padding-top: 55.78%;
    background: url(../img/pc_bg.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

section.intro h2.title {
    position: absolute;
    top: 10%;
    left: 50%;
    width: 100%;
    font-size: 2.2vw;
    letter-spacing: 1.2vw;
    text-indent: 1.2vw;
    color: #4c4948;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    text-align: center;
}

section.intro p.explain {
    position: absolute;
    top: 20%;
    left: 50%;
    width: 100%;
    font-size: 1.4vw;
    line-height: 2.5;
    color: #4c4948;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    text-align: center;
}

section.intro p.free {
    position: absolute;
    bottom: 20%;
    left: 50%;
    font-size: 3vw;
    color: #4c4948;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    text-align: center;
    border-bottom:2px #64bea9 solid;
    padding-bottom: 5px;
    white-space: nowrap;
}

section.overview {
    position: relative;
    margin:0 auto;
    background: #e0f2ee;
    height: calc(100vw * 1 + 930px);
}
section.overview .overview-inner {
    position:absolute;
    top:5%;
    left: 50%;
    background: #FFF;
    width: 85%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    text-align: center;
}
section.overview .overview-innerbox {
    position:relative;
    width:100%;
    height:auto;
}
section.overview > .title {
    position: absolute;
    top: 2%;
    left: 50%;
    width: 100%;
    font-size: 2.5vw;
    letter-spacing: 1.2vw;
    color: #4c4948;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    text-align: center;
}

h3.title {
    padding: 7px 5px 5px;
    margin: 4% auto 2%;
    width: 15%;
    font-size: 1.5vw;
    letter-spacing: 1.2vw;
    text-indent: 1.2vw;
    background: #64bfaa;
    color: #FFF;
    border-radius: 1.4vw;
    text-align: center;
    line-height:1;
}

section.overview .plan {
    margin: 1% auto;
    font-size: 1.5vw;
    text-align: left;
    padding-left: 14%;
}
section.overview .plan li {
    display:inline-block;
}

section.overview .attention {
    margin: 1% auto;
    font-size: 1vw;
}

section.overview .person {
    display:flex;
    text-align:left;
}
section.overview .person > li:first-of-type {
    width:30%;
    padding:5%;
}
section.overview .person > li:last-of-type {
    width:69%;
    padding: 5% 6% 5% 2%;
}

section.overview .person .profile li {
    width:100%;
}
section.overview .person .profile li:nth-of-type(1) {
    margin-top:4%;
}
section.overview .person .profile li:nth-of-type(2) {
    font-size:3vw;
    margin-bottom: 4%;
}

section.overview .person .profile li:nth-of-type(2) span {
    font-size:2vw;
}

section.overview .person .profile li:nth-of-type(3) {
    font-size:1.2vw;
    font-weight:bold;
}
section.overview .person .profile li:nth-of-type(4) {
    line-height: 1.8;
}

section.overview ul.map {
    display:flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
}
section.overview ul.map li {
    width:40%;
    height: 500px;
    text-align:center;
}
section.overview ul.map li p {
    line-height:1.4;
}
section.overview ul.map li p.date {
    font-size: 1.5vw;
}
section.overview ul.map li p.place {
    font-weight: bold;
    text-align:left;
    margin:2% auto;
}
section.overview ul.map li p.address,
section.overview ul.map li p.access {
    font-size: 0.8vw;
    margin-bottom:1%;
    text-align:left;
}
section.overview ul.map li p.homepage {
    font-size: 0.8vw;
    text-align:right;
}

section.overview p.mapattention {
    text-align: right;
    margin-top: 3%;
    margin-right: 5%;
}

section.overview p.apply {
    margin-bottom: 5%;
}

section.overview ul.btn_box {
    position: relative;
    background: #e0f2ee;
    padding-top: 2%;
}

section.overview .btnattention {
    text-align: center;
    padding: 1% 0 2%;
    margin: 0;
    background: #e0f2ee;
}

section.notice {
    width: 85%;
    margin: 3% auto;
    text-align:left;
}
section.contact {
    width: 65%;
    margin: 3% auto;
    border: 2px solid #111;
    text-align: center;
    padding: 1% 0 2%;
}

section.notice h3.title,
section.contact h3.title {
    width: 30%;
    letter-spacing: 0;
    text-indent: 0;
}

section.notice li {
    line-height: 2;
    list-style: disc;
    font-size: 1vw;
}
section.contact .tel {
    font-size: 3vw;
    font-weight: bold;
}
section.contact .tel a {
    text-decoration: none;
}
section.contact .tel a,
section.contact .tel a:active,
section.contact .tel a:hover,
section.contact .tel a:visited {
    color: #111;
}
section.contact .tel span {
    display:block;
    font-size: 1vw;
}
section.contact p {
    margin: 0.5%;
}
section.contact .contactattention {
    font-size: 0.8vw;
}

/* Footer */
#footer {
    padding: 20px 0;
}

footer {
    position: relative;
    display: block;
    z-index: 20;
    width: 100%;
    height: auto;
    background: #64bfaa;
    color: #fff;
    font-size: 1.2vw;
    text-align:center;
}

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

.pc {
    display:block;
}
.sp {
    display:none;
}

@media (max-width: 768px) {
    section.top {
        background: url(../img/sp_top.png);
        padding-top: 228.69%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    ul.btn_box li {
        width: 90%;
        margin: 2% 1%;
    }

    section.top .attention {
        bottom: 2%;
        width: 90%;
        font-size: 14px;
        text-align:initial;
    }

    section.intro {
        background: url(../img/sp_bg.png);
        padding-top: 173.33%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    section.intro h2.title {
        top: 8%;
        font-size: 5.2vw;
    }
    
    section.intro p.explain {
        top: 14%;
        font-size: 3.5vw;
        line-height: 2;
    }
    
    section.intro p.free {
        bottom: 5%;
        font-size: 5vw;
    }
    section.overview {
        height: calc(100vw * 5.5 + 1380px);
    }

    section.overview > .title {
        font-size: 6.2vw;
        top: 1%;
    }
    section.overview .overview-inner {
        top: 2.5%;
    }

    h3.title {
        margin: 6% auto 2%;
        font-size: 4vw;
        border-radius: 4vw;
        width: 30%;
    }
    section.overview .plan li {
        display: block;
        font-size: 4vw;
        line-height: 2;
    }
    section.overview .plan {
        margin: 5% auto;
    }
    section.overview .attention {
        font-size: 3vw;
        text-align: left;
        margin: 1% 10%;
    }

    section.overview .capacity{
        font-size: 4vw;
        margin: 5% auto 2%;
    }

    section.overview .person {
        display: flex;
        flex-direction: column;
    }
    section.overview .overview-inner .person > li {
        width:100%;
        padding:0;
    }
    section.overview .overview-inner .person > li img {
        display: block;
        width: 85%;
        margin: 5% auto 0;
    }
    section.overview .overview-inner .person .profile {
        margin: 5%;
    }
    section.overview .person .profile li:nth-of-type(1) {
        margin-top: 4%;
    }
    section.overview .person .profile li:nth-of-type(2) {
        font-size: 8vw;
        margin-bottom: 4%;
    }
    section.overview .person .profile li:nth-of-type(2) span {
        font-size: 4vw;
    }
    section.overview .person .profile li:nth-of-type(3) {
        font-size: 4.2vw;
    }
    section.overview .person .profile li:nth-of-type(4) {
        line-height: 2;
        font-size: 3.2vw;
        margin-top: 3%;
    }

    section.overview ul.map {
        display: flex;
        flex-direction: column;
        margin-top: 5%;
    }
    section.overview ul.map li {
        width:100%;
        height: 800px;
    }
    section.overview ul.map li iframe {
        width:90%;
        height:60%;
    }

    section.overview ul.map li p {
        margin: 0 2%;
    }
    section.overview ul.map li p.date {
        font-size: 4vw;
        margin-top: 2%;
    }
    section.overview ul.map li p.place {
        font-weight: initial;
        text-align: left;
        margin: 2% 2%;
        font-size: 3.5vw;
    }
    section.overview ul.map li p.address, section.overview ul.map li p.access {
        font-size: 3.2vw;
    }
    section.overview ul.map li p.homepage {
        font-size: 3vw;
        text-align: center;
        margin: 5%;
    }
    section.overview p.mapattention {
        text-align:center;
        margin: 1% 2%;
    }

    section.overview p.apply {
        margin: 5%;
        font-size:3.5vw;
    }
    section.overview .btnattention {
        margin:0;
    }
    section.notice h3.title, section.contact h3.title {
        width: 80%;
    }
    section.notice li {
        font-size: 3vw;
    }
    section.contact {
        width: 90%;
        padding: 1% 0 4%;
        margin: 5%;
    }
    section.contact .tel {
        font-size: 8vw;
    }
    section.contact .tel span {
        font-size: 3vw;
    }
    section.contact p {
        margin-top: 2%;
    }
    section.contact .contactattention {
        font-size: 2.5vw;
    }

    #footer {
        width:100%;
        font-size: 2.5vw;
    }

    .pc {
        display:none;
    }
    .sp {
        display:block;
    }
}
@media (min-width: 2000px) {
    section.overview p.mapattention {
        margin-top: 6%;
    }
}