@charset "UTF-8";

/* * {
    outline: 1px solid red;
} */

/* ここから section id="Voice" */
#Voice {
    max-width: 1200px;
    /* max-width: 90%; */
    margin: 0 auto;
    border: 8px solid #D9E695;
    border-bottom: none;
    padding-bottom: 1px;
    /* padding-right: 5em; */
    /* padding-left: 5em; */
}

.Voice0 {
    width: 200px;
    height: 40px;
    border-radius: 20px;
    background-color: #0F9D58;
    margin: 32px auto;
    text-align: center;
    color: #fff;
    font-size: 32px;
    font-family: "Noto Sans JP",
        sans-serif;
}

.midashi_all {
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 0 auto;
}


/* 各卒業生の声の見出し */
.midashi {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 0.5rem;
    text-align: left;
}

.midashi_all .midashi:nth-child(odd) {
    align-items: left;
}

/* 親要素.Voice1 */
.Voice-content {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
}

/* 子要素.Voice1-left {} */
.Voice-content-left {
    padding-left: 3em;
}

/* 子要素.Voice1-left */
.Voice-content-left .class {
    width: 160px;
    height: 160px;
}

/* 子要素.Voice1-left p{} */
.Voice-content-left p {
    text-align: center;
    margin-top: 8px;
    font-family: "Noto Sans JP",
        sans-serif;
    font-size: 16px;
}

/* 子要素.Voice1-right */
.Voice-content-right {
    width: 520px;
    height: 110px;
    border-radius: 20px;
    border: 1px solid #D9E695;
    background-color: #fff;
    padding: 0.5em 0.5em 0.5em 0.5em;
    font-family: "Noto Sans JP",
        sans-serif;
    font-size: 16px;
    text-align: left;
    margin-left: 3em;
}


/* .midashi(偶数) */


.midashi_all .midashi:nth-child(even) {
    align-items: right;
}

/* 親要素.Voice2 */
.Voice-content {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
}

/* 子要素.Voice2-left {} */
.Voice-content-left {
    padding-left: 3em;
}

/* 子要素.Voice2-left p{} */
.Voice-content-left p {
    text-align: center;
    margin-top: 8px;
    font-family: "Noto Sans JP",
        sans-serif;
    font-size: 16px;
}

/* 子要素.Voice2-right */
.Voice-content-right {
    width: 520px;
    height: 110px;
    border-radius: 20px;
    border: 1px solid #D9E695;
    background-color: #fff;
    padding: 0.5em 0.5em 0.5em 0.5em;
    font-family: Noto Sans JP,
        sans-serif;
    font-size: 16px;
    text-align: left;
    margin-left: 3em;
}


/* .midashi(奇数) */
.midashi_all .midashi:nth-child(odd) {
    align-self: flex-end;
}

/* 親要素.Voice3 */
.midashi .Voice3 {
    display: flex;
    align-items: center;
    margin-top: 16px;
}

/* 子要素.Voice2-left {} */
.Voice3-left {
    padding-left: 3em;
}

/* 子要素.Voice3-left p{} */
.Voice3-left p {
    text-align: center;
    margin-top: 8px;
    font-family: "Noto Sans JP",
        sans-serif;
    font-size: 16px;
}

/* 子要素.Voice3-right */
.Voice3-right {
    width: 520px;
    height: 110px;
    border-radius: 20px;
    border: 1px solid #D9E695;
    background-color: #fff;
    padding: 0.5em 0.5em 0.5em 0.5em;
    font-family: Noto Sans JP,
        sans-serif;
    font-size: 16px;
    margin-left: 3em;
}

/* .midashi(偶数) */
.midashi_all .midashi:nth-child(even) {
    align-self: flex-end;
}

/* 親要素.Voice4 */
.midashi .Voice4 {
    display: flex;
    align-items: center;
    margin-top: 16px;
}

/* 子要素.Voice4-left {} */
.Voice4-left {
    padding-left: 3em;
}

/* 子要素.Voice4-left p{} */
.Voice4-left p {
    text-align: center;
    margin-top: 8px;
    font-family: "Noto Sans JP",
        sans-serif;
    font-size: 16px;
}

/* 子要素.Voice4-right */
.Voice4-right {
    width: 520px;
    height: 110px;
    border-radius: 20px;
    border: 1px solid #D9E695;
    background-color: #fff;
    padding: 0.5em 0.5em 0.5em 0.5em;
    font-family: Noto Sans JP,
        sans-serif;
    font-size: 16px;
    margin-left: 3em;
}

/* .midashi(奇数) */
.midashi_all .midashi {
    font-family: "Noto Sans JP",
        sans-serif;
    font-size: 24px;
}

.midashi_all .midashi:nth-child(odd) {
    align-self: flex-start;
}

/* 親要素.Voice5 */
.midashi .Voice5 {
    display: flex;
    align-items: center;
    margin-top: 16px;
}

/* 子要素.Voice5-left {} */
.Voice5-left {
    padding-left: 3em;
}

/* 子要素.Voice5-left p{} */
.Voice5-left p {
    text-align: center;
    margin-top: 8px;
    font-family: "Noto Sans JP",
        sans-serif;
    font-size: 16px;
}

/* 子要素.Voice5-right */
.Voice5-right {
    width: 520px;
    height: 110px;
    border-radius: 20px;
    border: 1px solid #D9E695;
    background-color: #fff;
    padding: 0.5em 0.5em 0.5em 0.5em;
    font-family: "Noto Sans JP",
        sans-serif;
    font-size: 16px;
    margin-left: 3em;
}


/* おまけ */
/* 横方向中央寄せ */
/* .div-container {
  display: flex;
  justify-content: center;
  margin-bottom: 54px;
} */


/* 下向き矢印 */
.image-container {
    display: flex;
    justify-content: center;
    margin-top: 32px;
    margin-bottom: 32px;
}

.arrow-image {
    width: 42px;
    height: 35px;
}


/* ここまで */



/* ここから section id="Access" */
#Access {
    width: 1200px;
    margin: 0 auto;
    border: 8px solid #D9E695;
    border-bottom: none;
    border-bottom: none;
    padding: 50px;
}


/* 親要素 */
.Access-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/* 子要素 */
/* container-left */
.Access-item1 {
    width: 500px;
    /* height: 500px; */
    background-color: #fff;
    border-radius: 20px;
    border: 1px solid #D9E695;
    padding: 24px;
}

/* WORKIG SCHOOL */
.Access-midashi1 {
    font-family: Noto sans jp;
    font-size: 32px;
    text-align: center;
    font-weight: bold;
    color: #0F9D58;
    margin: 0px auto 16px auto;
}

.WORKIG-SCHOOL p {
    font-family: Noto sans jp;
    font-size: 24px;
    text-align: left;
    font-weight: normal;
    color: #000;
}

/* アクセス */
.Access-midashi2 {
    font-family: Noto sans jp;
    font-size: 32px;
    text-align: center;
    font-weight: bold;
    color: #000;
    margin: 32px auto 16px auto;
}

.akusesu li {
    font-family: Noto sans jp;
    font-size: 24px;
    text-align: left;
    font-weight: normal;
    color: #000;
    margin-bottom: 16px;
}

.akusesu p {
    font-family: Noto sans jp;
    font-size: 24px;
    text-align: left;
    font-weight: normal;
    color: #000;
    text-indent: 24px;
}


/* container-right */
/* Access-item2 */
/* google map */
.google-map {
    border: 1px solid #D9E695;
    border-radius: 20px;
}


/* ここまで */





/* レスポンシブ対応 */
@media screen and (max-width: 767px) {
    #Voice {
        max-width: 515px;
        margin: 0 auto;
        border: 8px solid #D9E695;
        border-bottom: none;
        padding-right: 4em;
        padding-left: 4em;
    }


    .voice-content {
        display: flex;
        flex-direction: column;
        /* 縦並びに変更 */
        align-items: center;
        /* (フレックスボックスでは)交差軸に中央寄せ */
        text-align: center;
        /* 文字中央寄せ */
        font-size: 20px;
    }


    /* タブレットでは全て中央寄せ、ずらしをリセット */
    .midashi_all .midashi {
        align-items: center;
        /* 中央寄せ */
        text-align: center;
        /* 文字中央寄せ */
    }

    .midashi_all .midashi:nth-child(odd),
    .midashi_all .midashi:nth-child(even) {
        align-self: center;
    }

    .Voice-content {
        flex-direction: column;
    }

    .Voice-content-right {
        width: 324px;
        height: auto;
        align-items: center;
    }

    .Voice-content-left {
        padding: 0;
    }

    .Voice-content-right {
        margin: 16px auto 0;
    }


    /* 地図 */

    #Access {
        max-width: 515px;
        margin: 0 auto;
        border: 8px solid #D9E695;
        border-bottom: none;
        padding: 32px 0;

    }

    .Access-container {
        display: flex;
        flex-direction: column;
        /* justify-content: space-between; */
        align-items: center;

    }

    .Access-item1 {
        width: 480px;
        background-color: #fff;
        border-radius: 20px;
        border: 1px solid #D9E695;
        padding: 16px;
        margin-bottom: 32px;
    }

    .Access-item2 {
        width: 480px;
        height: 480px;
        align-items: center;
        border-radius: 20px;
    }

    .google-map {
        width: 480px;
        height: 480px;
    }
}

/* レスポンシブ対応 max-width: 402px */
/* #Voice */
@media screen and (max-width: 402px) {
    #Voice {
        max-width: 360px;
        margin: 0 auto;
        border: 8px solid #D9E695;
        border-bottom: none;
        border-bottom: none;
        padding-right: 2em;
        padding-left: 2em;
    }


    /* #Access */

    #Access {
        max-width: 360px;
        margin: 0 auto;
        border: 8px solid #D9E695;
        border-bottom: none;
        padding: 16px 0;
    }


    .Access-item1 {
        width: 324px;
        /* height: 576px; */
        background-color: #fff;
        border-radius: 20px;
        border: 1px solid #D9E695;
        padding: 8px;
        margin-bottom: 16px;
    }

    /* .WORKIG-SCHOOL{

} */


    /* .google-map */

    .Access-item2 {
        width: 324px;
        height: 324px;
        align-items: center;
        border-radius: 20px;
    }

    .google-map {
        width: 324px;
        height: 324px;
    }
}

/* レスポンシブ対応　終わり */