@charset "utf-8";

/* CSS Document */
#intro {
    text-align: center;
}

#main_photo {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    background: url(../../img/s13.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 20%;
    z-index: -1;
}

#main_copy div {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

#main_copy h2 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

#main_copy h2>span {
    font-size: 250%;
    font-weight: 900;
}

#main_copy h2 small {
    font-weight: 300;
}

#main_copy p {
    font-size: 120%;
    line-height: 1.8;
    font-weight: 900;
}

#main_copy i {
    display: inline-block;
    font-size: 150%;
    margin-top: 1rem;
    opacity: 0.7;
}

#main_copy {
    padding-bottom: 100vh;
    background-size: cover;
    background-position: center bottom;
    margin-top: -40vh;
}

#contents {
    margin: 5rem auto;
    width: 90%;
    max-width: 1000px;
}

#contents h3 {
    font-size: 200%;
    font-weight: 900;
    margin-bottom: 1rem;
}

#contents p {
    line-height: 2;
    text-align: justify;
    margin-bottom: 1rem;
}

#contents>p.align_right {
    text-align: right;
    margin-top:2rem;
}

#contents h4{
    font-size:150%;
    margin:2rem 0 1rem;
}

#pre {
    margin: 2rem 0 2%;
}

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

#pre2 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2%;
}

.pre2 {
    width: 49%;
}

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

#pre2+p img {
    width: 100%;
    height: auto;
}

#iso {
    margin: 5rem auto;
}

#iso h3 {
    text-align: center;
}

#iso dl {
    margin: 3rem auto;
}

#iso dt {
    text-align: center;
    margin-bottom: 1rem;
    fo nt-size: 90%;
    font-weight: 500;
}

#iso dt img {
    display: block;
    margin: 0 auto;
    width: 163px;
    height: auto;
    margin-bottom: 2rem;
}

#iso dd {
    text-align: justify;
    line-height: 2;
    font-size: 110%;
    font-weight: 500;
    width: 65%;
    margin: 0 auto;
}

#iso dd:nth-of-type(2) {
    text-align: center;
    font-size: 80%;
}

#iso dd img {
    display: block;
    margin: 2rem auto 1rem;
    width: 100%;
    max-width: 460px;
    height: auto;
}

#contr h3 {
    text-align: center;
    margin-bottom: 2rem;
}

#contr p {
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    height: auto;
    align-items: flex-start;
    margin-bottom: 1rem;
}

#contr p img {
    width: 48%;
    height: auto;
}

#contr ul {
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
}

#contr li {
    width: 32%;
    font-size: 70%;
    text-align: center;
    font-weight: 300;
}

#contr li img {
    width: 100%;
    height: auto;
    display: inline-block;
    margin-bottom: 1rem;
}

#outline {
    margin: 5rem auto;
}

#outline h3 {
    font-weight: 200;
    color: #777;
    border-bottom: 1px solid #777;
    margin-bottom: 3rem;
}

#outline>dl {
    width: 80%;
    margin: 0 auto;
    font-weight: 300;
    line-height: 2.5;
}

#outline>dl>dt {
    width: 20%;
    display: inline-block;
    margin-bottom: 3rem;
    vertical-align: top;
}

#outline>dl>dd {
    width: 78%;
    display: inline-block;
    margin-bottom: 3rem;
}

#access {
    margin: 5rem auto;
}

#access h3 {
    font-weight: 200;
    color: #777;
    border-bottom: 1px solid #777;
    margin-bottom: 3rem;
}

#gmap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin-bottom: 1rem;
}

#gmap iframe, #gmap object, #gmap embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#access p {
    font-size: 90%;
    font-weight: 500;
}

#history {
    margin: 5rem auto;
}

#history h3 {
    font-weight: 200;
    color: #777;
    border-bottom: 1px solid #777;
    margin-bottom: 3rem;
}

#history dl {
    width: 80%;
    margin: 0 auto;
    font-weight: 300;
    line-height: 2.5;
}

#history dt {
    width: 25%;
    display: inline-block;
    margin-bottom: 3rem;
    vertical-align: top;
}

#history dd {
    width: 73%;
    display: inline-block;
    margin-bottom: 3rem;
}

#contents #outline dd p{
    text-align: left;
}

#contents #outline dd p span{
    display: inline-block;
    white-space: nowrap;
}

@media screen and (max-width:768px) {
    #main_copy {
        margin-top: -30vh;
    }

    #main_copy h2 {
        font-size: 130%;
    }

    #main_copy p {
        font-size: 100%;
    }

    #contents {
        margin: 3rem auto;
    }

    #iso {
        margin: 3rem auto;
    }

    #iso dd {
        width: 70%;
    }

    #outline {
        margin: 3rem auto;
    }

    #outline h3 {
        margin-bottom: 2rem;
    }

    #outline>dl {
        width: 90%;
    }

    #outline>dl>dt {
        margin-bottom: 2rem;
    }

    #outline>dl>dd {
        margin-bottom: 2rem;
    }

    #access {
        margin: 3rem auto;
    }

    #access h3 {
        margin-bottom: 2rem;
    }

    #history {
        margin: 3rem auto;
    }

    #history h3 {
        margin-bottom: 2rem;
    }

    #history dl {
        width: 90%;
    }

    #history dt {
        margin-bottom: 2rem;
    }

    #history dd {
        margin-bottom: 2rem;
    }
}

@media screen and (max-width:480px) {
    #main_copy {
        margin-top: -45vh;
    }

    #main_copy h2 {
        font-size: 120%;
    }

    #contents {
        margin: 2rem auto;
    }

    #main_copy i {
        font-size: 150%;
    }

    #iso {
        margin: 2rem auto;
    }

    #iso dl {
        margin: 1rem auto;
    }

    #iso dt {
        font-size: 110%;
    }

    #iso dd {
        width: 100%;
        font-size: 100%;
    }

    #iso dd img {
        margin: 1rem auto;
    }

    #iso dt img {
        margin-bottom: 1rem;
    }

    #contr ul {
        margin-top: 1rem;
    }

    #contr li img {
        margin-bottom: 0.5rem;
    }

    #outline {
        margin: 2rem auto;
    }

    #outline h3 {
        margin-bottom: 1rem;
    }

    #outline>dl {
        width: 100%;
    }

    #outline>dl>dt {
        margin-bottom: 1rem;
        width: 28%;
        color: #bbb;
    }

    #outline>dl>dd {
        margin-bottom: 1rem;
        width: 70%
    }

    #access {
        margin: 1rem auto;
    }

    #access h3 {
        margin-bottom: 1rem;
    }

    #gmap {
        position: relative;
        padding-bottom: 120%;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
        margin-bottom: 1rem;
    }

    #history {
        margin: 2rem auto;
    }

    #history h3 {
        margin-bottom: 1rem;
    }

    #history dl {
        width: 100%;
    }

    #history dt {
        margin-bottom: 1rem;
        width: 35%;
        color: #bbb;
    }

    #history dd {
        margin-bottom: 1rem;
        width: 63%
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    #contents {
        font-size: 130%;
    }

    #main_copy {
        margin-top: -35vh;
    }

    #main_copy h2 {
        font-size: 190%;
    }

    #main_copy p {
        font-size: 170%;
    }

    #main_copy i {
        display: inline-block;
        font-size: 300%;
        margin-top: 3rem;
        opacity: 0.5;
    }
}