/* ゴシックドゥフォントは以下3行をコピペ */
/* font-family: SicGothicDuex-HDL-E;
font-weight: 400;
font-style: normal; */

/* さつき源代明朝は以下3行をコピペ */
/* font-family: "SatsukiGendaiMincho-M", sans-serif;
font-weight: 300;
font-style: normal; */

/* 縦書き文字は以下2行をコピペ */
/* -ms-writing-mode: tb-rl; */
/* writing-mode: vertical-rl; */

main{
    font-family: "SatsukiGendaiMincho-M", sans-serif;
    font-weight: normal;
    font-style: normal;
}

@media screen and (max-width:767px) {
    /* spの人はここから記述 */

    .about{
        background-color:#0058A9 ;
        width: 100%;
    }

    .about_section{
        display: flex;
        width: 100%;
        height: 110vw;
    }

    .about_title{
        writing-mode: sideways-lr;
        text-orientation: mixed;
        color: #fff;
    }

    .about_title h1{
        font-family: SicGothicDuex-HDL-E;
        font-weight: 400;
        font-style: normal;
        font-size: 17vw;
        text-align: right;
        margin-top: 4vw;
        margin-left: 2vw;
    }

    .about_text{
        color: #F4F8E9;
        text-align: right;
        margin-top: 4vw;
        margin-left: 23vw;
    }

    .about_text p{
        font-size: 3.3vw;
        padding: 2vw;
    }

    .section{
        padding-bottom: 7vw;
    }

    .section span{
        font-size: 5.3vw;
    }

    .about iframe{
        display: block;
        margin: 20px auto;
        width: 95%;
        height: 53vw;
    }

    .brain{
        width: 50vw;
        height: auto;
        position: absolute;
        top: 75vw;
        margin-left: 6vw;
    }


    .message{
        background-color: #091E35;
        background-image: url(../image/about/theme-star.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 45vw auto;
        width: 100%;
        height: 120vw;

        align-content: center;
    }

    .massage_text p{
        color: #F4F8E9;
        text-align: left;
        font-size: 3.6vw;
        padding: 3vw;
    }

    .massage_text{
        width: 70%;
        margin: 0 auto;
    }

    .when{
        background-color: #6EC6CD;
        width: 100%;
        display: flex;
    }

    .when_title{
        writing-mode: sideways-lr;
        text-orientation: mixed;
        color: #fff;
    }

    .when_title h1{
        font-family: SicGothicDuex-HDL-E;
        font-weight: 400;
        font-style: normal;
        font-size: 17vw;
        text-align: right;
        margin: 2vw 1vw;
    }

    .when_text{
        text-align: right;
        margin-left: 29vw;
        margin-top: 4vw;
    }

    .when_text p {
        color: #F4F8E9;
        font-size: 3.7vw;       
    }


    .when_text_1,
    .when_text_2 {
        margin-bottom: 5vw;
    }


    .where{
        background-color: #091E35;
    }

    .where_flex{
        display: flex;
    }

    .where_title{
        writing-mode: sideways-rl;
        text-orientation: mixed;
        color: #fff;
    }

    .where_title h1{
        font-family: SicGothicDuex-HDL-E;
        font-weight: 400;
        font-style: normal;
        font-size: 17vw;
        text-align: left;
        margin: 4vw 1vw;
    }


    .where_text_1 p{
        font-size: 3.7vw;
        color: #F4F8E9;
    }

    .where_text_2 p{
        font-size: 2.3vw;
        color: #F4F8E9;
    }

    .where_text_1{
        margin-bottom: 3vw;
    }

    .where_text_2{
        margin-bottom: 5vw;
    }

    .where_text{
        padding: 4vw 12vw 1vw 5vw;
    }

    .where_text img{
        width: 60vw;
        margin-bottom: 5vw;
    }

    .car{
        color: #F4F8E9;
        font-size: 2.3vw;
    }


    .access{
        background-color: #F4F8E9;
    }

    .access_text{
        display: flex;
    }

    .access_title{
        writing-mode: sideways-lr;
        text-orientation: mixed;
        color: #091E35;
    }

    .access_title h1{
        font-family: SicGothicDuex-HDL-E;
        font-weight: 400;
        font-style: normal;
        font-size: 17vw;
        text-align: right;
        margin: 4vw 1vw;
    }

    .access_content{
        margin: 5vw 0;
    }

    .access_text p{
        font-size: 3.7vw;
        color: #091E35;
        margin-bottom:5vw;
    }

    .map_2{
        width: 70vw;
        margin-bottom: 5vw;
    }

    .map_3{
        width:70vw;
        margin-bottom: 5vw;
    }


    /* spの人はここまで記述 */
}


@media screen and (min-width:768px) {
    /* pcの人はここから記述 */
    main {
        padding-top: 80px;
    }

    h1{
        margin: 0;
    }

    .about {
        background-color: #0058A9;
        color: #F4F8E9;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3 , 1fr);

    }

    .about .title{
        grid-area: 1 / 1 / 2 / 2;
    }

    .logo-container{
        grid-area: 1 / 2 / 2 / 3 ;
        text-align: center;
    }

    .logo{
        width: 45vw;
    }

    .explanation1{
        grid-area: 1 / 3 / 2 / 4;
        text-align: right;
        padding-right: 5vw;
        padding-top: 2vw;
        font-size: 1.2vw;
        line-height: 2.5vw;
    }

    .exp-section{
        padding: 2vw 0;
    }

    .title{
        text-align: left;
        padding-left: 2vw;
    }

    .title h1{
        font-family: SicGothicDuex-HDL-E;
        font-weight: 400;
        font-style: normal; 
        font-size: 5vw;
        margin:0;
        padding: 2vw 0 1vw;
    }

    .title h5{
        font-size: 1.5vw;
    }


    .theme{
        background-color: #091E35;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4 , 1fr);
        color: #F4F8E9;
    }

    .theme .title{
        grid-area: 1 / 1 / 2 / 2;
    }

    .explanation2{
        grid-area: 1 / 2 / 2 / 3;
        padding: 2vw 0 6vw;
        font-size: 1.2vw;
        line-height: 3vw;
        background-image: url(../image/about/theme-star.png);
        background-repeat: no-repeat;
        background-position: 0;
        background-size: 70%;
    } 
    
    .theme-movie{
        grid-area: 1 / 3 / 2 / 5;
        align-content: center;
    }

    .theme-movie iframe{
        width: 90%;
        height: 80%;
        margin-left: 0;
        margin-right: auto;
    }

    .whenwhere{
        background-color: #091E35;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2 , 1fr);
        color: #F4F8E9;
    }

    .whenwhere .title{
        grid-template-columns: 1 / 1 / 2 / 2;
    }

    .w-exp{
        padding-top: 2vw;
        display: flex;
        font-size: 1vw;
    }

    .w-info{
        grid-template-columns: 1 / 2 / 2 / 3;
        display: flex;
        padding: 3vw 2vw 2vw 0;
    }

    .image2{
        width: 50%;
    }
    
    .image2 img{
        width: 30vw;
        height: auto;
    }

    .not{
        font-size: 0.7vw;
        width: 50%;
        text-align: right;
        margin-bottom: 0;
        margin-top: auto;
    }

    .access{

        width: 100%;
        background-color: #F4F8E9;
        color: #091E35;
    }

    .access-way{
        text-align: center;
    }

    .bus{
        padding: 5vw 0 2.5vw;
    }

    .bus h2{
        width: 20%;
        border-bottom: solid 1px;
        padding-bottom: 0.5vw;
        margin: 0 auto 2vw;
        font-size: 2vw;
    }

    .bus img{
        width: 80%;
    }

    .train{
        padding: 2.5vw 0;
    }

    .train h2{
        width: 20%;
        border-bottom: solid 1px;
        padding-bottom: 0.5vw;
        margin: 0 auto 2vw;
        font-size: 2vw;
    }

    .train img{
        width: 80%;
    }

    /* pcの人はここまで記述 */
}