@charset "UTF-8";
/* CSS Document */


@media screen and (max-width: 767px) {

    /* contents-top */

    .contents-top p {
        line-height: 1.8;
    }


    /* box-ttile-top */

    .box-ttile-top h2,
    .box-ttile-top h3 {
        padding: 0px 20px 15px;
        margin-bottom: 40px;
        min-width: 280px;
    }

    .layout03 .box-ttile-top h2 {
        font-size: 28px;
    }

    .contents02 .box-ttile-top h3 {
        font-size: 25px;
        margin-bottom: 30px;
    }

    .contents06 .box-ttile-top h2,
    .contents07 .box-ttile-top h2 {
        font-size: 25px;
    }

    .contents06 .box-ttile-top h2 {
        font-size: 18px;
    }

    .box-ttile-top h2::before,
    .box-ttile-top h3::before {
        height: 25px;
    }

    .layout03 .box-ttile-top h2::before {
        height: 40px;
    }



    /* contents01 */

    .contents01 {
        padding: 50px 0px 70px;
    }

    /* contents02 */

    .contents02 {
        padding: 60px 0px;
    }

    .contents02 .box-inner {
        border-radius: 25px;
        padding: 50px 5% 60px;
    }

    .contents02 h4 {
        font-size: 16px;
        margin-bottom: 30px;
    }

    /* contents03 */

    .contents03 {
        padding: 50px 0px;
        margin-top: -5px;
    }

    .contents03::before,
    .contents03::after {
        width: 95%;
        border-width: 10px;
    }

    /* contents04 */

    .contents04 .box-ttile {
        height: 150px;
    }

    .contents04 h2 {
        font-size: 32px;
        margin-bottom: 12px;
    }

    /* contents05 */

    .contents05 {
        padding: 50px 0px;
    }

    /* contents06 */

    .contents06 {
        padding: 60px 6%;
    }

    /* contents07 */

    .contents07 {
        padding: 60px 0px;
        border-width: 12px;
    }

    /* contents09 */

    .contents09 {
        margin-bottom: 40px;
    }

    /* contents10 */

    .contents10 {
        height: auto;
        padding: 80px 0px;
        background-image: url("../../images/top/back08-sp.jpg");
    }

    /* contents11 */

    .contents11 {
        width: 100%;
        padding: 40px 0px 50px;
        border-width: 12px;
    }

    .contents11 h2 img {
        height: 80px;
    }

    .contents11 h2 {
        margin-bottom: 25px;
    }

    /* contents12 */

    .contents12 {
        padding: 50px 6%;
    }

    /* contents13 */

    .contents13 {
        padding: 50px 0px 60px;
        border-width: 12px;
    }


    /* layout01 */

    .layout01 {
        padding-bottom: 140px;
        margin-bottom: 50px;
    }

    .box-concept,
    .layout03 {
        border-width: 10px;
        border-radius: 25px;
    }

    .box-concept {
        padding: 45px 6% 110px;
        background-size: 98% auto;
        /*        background-image: url("../../images/top/back02-sp.png");*/
        background-position: center top 12px;
    }

    .layout01 h2 {
        font-size: 20px;
        margin-bottom: 30px;
        line-height: 1.6;
    }

    .layout01 p {
        font-size: 14px;
    }


    /* layout02 */

    .layout02 {
        width: 100%;
    }

    .layout02 .inner {
        width: 90%;
        border-width: 8px;
        border-radius: 25px;
        padding: 28px 6%;
    }

    .layout02 .inner::before {
        height: 35px;
        margin-top: -37px;
    }

    .layout02 h6 {
        font-size: 18px;
    }

    /* layout03 */

    .layout03 {
        padding: 40px 0px 40px;
    }

    .layout03::after {
        background-image: url("../../images/top/back09-sp.svg");
        bottom: 160px;
    }

    .layout03 .box {
        justify-content: center;
        flex-direction: column;
        gap: 30px;
    }

    .layout03 .box:nth-child(odd) {
        flex-direction: column;
    }

    .layout03 .box:not(:last-child) {
        margin-bottom: 40px;
    }

    .layout03 .box-img {
        width: 100%;
    }

    .layout03 .box-img::before {
        bottom: 20px;
        height: 50px;
        margin-left: -15px;
    }

    .layout03 .box-img img {
        border-radius: 20px;
    }

    .layout03 .box-text {
        width: 100%;
        padding-top: 0px;
    }

    .layout03 h3 {
        font-size: 22px;
        padding-bottom: 5px;
        margin-bottom: 20px;
        padding-left: 10px;
    }

    .layout03 h3::before {
        height: 12px;
        margin-left: -5px;
    }

    .layout03 h6 {
        width: 90%;
        font-size: 26px;
        line-height: 1.4;
        height: 130px;
        background-image: url("../../images/top/text-back05-sp.png");
        margin: 0px auto;
        margin-top: 80px;
        padding: 0px 6%;
    }

    .layout03 p {
        font-size: 14px;
    }

    /* layout04 */

    .layout04 {
        gap: 30px;
        padding-top: 0px;
        background-image: none;
    }

    .layout04 .box {
        width: 100%;
        max-width: 320px;
    }

    .layout04 .box::after {
        width: 76px;
        height: 76px;
    }

    .layout04 h5 {
        font-size: 22px;
        padding: 20px 0px 12px;
    }

    /* layout05 */

    .layout05 {
        gap: 0px 8%;
        background-size: auto 30px;
        margin-bottom: 60px;
    }

    .layout05::before {
        height: 35px;
        margin-bottom: -40px;
    }

    .layout05 .box {
        width: 42%;
    }


    /* layout06 */

    .layout06 .box-img {
        padding-top: 70px;
        padding-bottom: 120px;
    }

    .layout06 .box-img::before {
        top: 15px;
        background-image: url("../../images/top/arrow03.svg");
        background-size: auto 100%;
        height: 45px;
        margin-top: 0px;
    }

    .layout06 .box-img ul {
        flex-direction: column;
        gap: 20px;
    }

    .layout06 .box-img ul li {
        width: 100%;
        text-align: center;
    }

    .layout06 .box-img ul li img {
        width: 80%;
        max-width: 350px;
    }

    .layout06 .inner {
        border-width: 8px;
        border-radius: 25px;
        padding: 28px 6%;
    }

    .layout06 .inner::before {
        background-image: url("../../images/top/text06-sp.svg");
        height: 70px;
        margin-top: -90px;
    }

    .layout06 h2 {
        margin-bottom: 15px;
    }

    .layout06 h2 img {
        height: 230px;
    }

    .layout06 h3 img {
        height: 200px;
    }

    .layout06 h6 {
        padding: 30px 0px;
    }

    .layout06 h6 img {
        width: 100%;
        max-width: 400px;
        height: auto;
    }

    .contents-top .layout06 p {
        font-size: 16px;
    }


    /* layout07 */

    .layout07 {
        justify-content: center;
    }

    .layout07 .box {
        width: 100%;
        padding: 50px 0px;
    }

    .layout07 .box img {
        width: 70%;
        max-width: 400px;
    }


    /* layout08 */

    .layout08 {
        gap: 20px;
        margin-bottom: 60px;
    }

    .layout08 h4 {
        font-size: 25px;
    }

    .layout08 p {
        font-size: 14px;
        border-left-style: none;
        padding: 0px 8%;
    }

    .layout08 p span {
        padding-right: 100px;
    }

    /* layout09 */

    .layout09 {
        padding-top: 35px;
    }

    .box-tab ul {
        gap: 0px 10px;
    }

    .box-tab ul li a {
        font-size: 13px;
        letter-spacing: 0em;
        padding: 20px 0px;
        padding-left: 10px;
        min-width: 140px;
        border-radius: 12px;
    }

    .box-schedule {
        border-width: 3px;
        padding: 45px 6% 30px;
        border-radius: 20px;
    }

    .layout09 .box-table {
        padding: 25px 0px 15px;
    }

    .layout09 h3 {
        font-size: 18px;
        letter-spacing: 0em;
    }

    .layout09 table td {
        border-width: 1px;
        padding: 15px;
        font-size: 14px;
    }

    /* layout10 */

    .layout10 {
        padding: 90px 6% 40px;
        justify-content: center;
        flex-direction: column;
        gap: 25px;
        border-radius: 25px;
        margin-top: 40px;
    }

    .layout10::before {
        height: 110px;
        margin-top: -50px;
    }

    .layout10 .box {
        width: 100%;
    }

    .layout10 .box img {
        max-width: 300px;
    }

    /* layout11 */

    .layout11 {
        background-image: none;
    }

    .layout11 .inner::before {
        left: 40px;
        width: 6px;
    }

    .layout11 .box {
        gap: 0px 20px;
        position: relative;
        align-items: flex-start;
    }

    .layout11 .box:not(:last-child) {
        margin-bottom: 30px;
    }

    .layout11 .box-step {
        width: 82px;
    }

    .layout11 .box:last-child {
        background-color: #FFF;
    }

    .layout11 h6 {
        font-size: 22px;
        padding-top: 15px;
    }

    /* layout12 */

    .layout12 {
        justify-content: center;
        flex-direction: column;
        gap: 0px;
    }

    .layout12 .box-img {
        width: 100%;
    }


    .layout12 .box-detail {
        width: 100%;
        padding: 50px 6%;
    }

    .layout12 h2,
    .layout14 h2 {
        font-size: 50px;
    }

    .layout14 h2 {
        font-size: 60px;
    }

    .layout12 h3 {
        font-size: 22px;
        text-indent: -10px;
    }

    .layout12 p {
        font-size: 14px;
    }

    /* layout13 */

    .layout13 {
        justify-content: center;
        flex-direction: column;
    }

    .layout13 .box-title {
        width: 100%;
        padding: 30px 6% 22px;
        text-align: center;
    }

    .layout13 .box-detail {
        width: 100%;
        gap: 10px;
        padding: 25px 6%;
    }

    .layout13 .box-title h4 {
        font-size: 34px;
        margin-bottom: 10px;
    }

    .layout13 .box-title h5 {
        font-size: 16px;
    }

    .layout13 .box {
        width: 280px;
    }

    .contents-box .layout13 p a {
        font-size: 16px;
    }

    .layout13 p a::before {
        background-size: auto 35px;
    }

    /* layout14 */

    .layout14 .box-detail {
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 50px;
        padding-top: 40px;
    }

    .layout14 h3 {
        font-size: 18px;
    }

    .layout14 h4 {
        font-size: 18px;
        line-height: 1.8;
        margin-bottom: 30px;
    }

    .layout14 h6 a {
        font-size: 16px;
        min-width: 220px;
    }

    .layout14 h6 a::before {
        background-size: auto 5px;
    }

    /* layout16 */

    .layout16 {
        gap: 30px;
        text-align: center;
    }

    .layout16 .box-title {
        width: 100%;
        height: 48px;
    }

    .layout16 h2,
    .contents13 h2 {
        font-size: 24px;
    }

    .layout16 p {
        font-size: 14px;
    }


    /* layout17 */

    .layout17 {
        gap: 30px;
        padding-top: 40px;
        flex-direction: column;
    }

    .layout17 .box {
        flex: none;
        width: 65%;
        max-width: 280px;
    }

    .pc-view {
        display: none;
    }

    .sp-view {
        display: inline-block;
    }

}