@charset "UTF-8";

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

    /* home fv */
    #fv {
        width: 100%;
        height: auto;
        min-height: auto;
        position: relative;
        overflow: auto;
    }

    #fv #visual {
        display: block;
        width: 100%;
        padding: 0;
        margin: 0 auto;
        position: static;
    }

    #fv #visual #catch {
        width: 100%;
        text-align: center;
        height: 70vh;
        min-height: 400px;
        max-height: 700px;
        padding-bottom: 5em;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    #fv #visual #catch h2 {
        font-size: 1.4em;
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        font-feature-settings: "vkrn";
        letter-spacing: 0.12em;
        line-height: 2;
        text-align: center;
        display: inline-block;
    }

    #fv #visual #catch p {
        position: absolute;
        bottom: 20px;
        left: 3%;
        text-align: left;
        font-size: 0.7em;
        line-height: 1.25;
    }

    #fv #visual .slick {
        width: 100%;
        height: 400px;
        min-height: auto;
        position: relative;
        padding: 0 3%;
    }

    #fv #visual .slick img {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        min-height: 100%;
        max-width: 100%;
        object-fit: cover;
    }

    /* latestnews */
    #latestnews {
        margin-bottom: 4em;
    }

    #latestnews ul li a {
        flex-direction: column;
    }

    #latestnews ul li a .date {
        width: auto;
        margin-right: 0;
    }

    #latestnews ul li a .title {
        width: auto;
        margin-right: auto;
    }

    /* concept */
    #concept {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
        padding: 0 3%;
        margin: 6em auto;
    }

    #concept .text {
        width: 100%;
        order: 1;
        position: static;
    }

    #concept .text p {
        width: auto;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
        display: inline-block;
        margin: 0 auto;
        text-align: left;
        position: static;
        font-size: 1em;
        line-height: 2;
    }

    #concept .text .button_a {
        position: static;
        margin-left: auto;
        margin-top: 4em;
    }

    #concept .text .button_a div {
        width: auto;
        font-size: 0.9em;
    }

    #concept .slick {
        width: 100%;
        height: auto;
        order: 2;
        margin-top: 4em;
    }

    /* gray_block */
    .gray_block {
        background-color: #F2F2F2;
        width: 100%;
        padding: 6em 5%;
    }

    /* profile */
    #profile {
        width: 90%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    #profile .text {
        width: 100%;
        text-align: left;
        display: flex;
        flex-direction: column;
    }

    #profile .text #katagaki {
        font-size: 0.9em;
        margin-bottom: 4em;
    }

    #profile .text #name {
        font-size: 1.3em;
        margin-bottom: 1em;
    }

    #profile .text p {
        text-align: justify;
        margin-bottom: 4em;
    }

    #profile figure {
        width: 100%;
        margin: 5em auto 0;
    }

    /* essay */
    #essay {
        margin: 6em auto 0;
        position: relative;
    }

    #essay h3 {
        margin-bottom: 3em;
    }

    #essay .button_a {
        display: block;
        margin: 3em auto 0;
    }

    /* essay swiper */
    #essay .essayswiper {
        width: 95%;
        margin: 0 auto;
    }


    #essay .essayswiper .swiper-slide {
        width: 100%;
        padding: 0;
    }

    #essay .essayswiper .swiper-slide .card {
        width: 100%;
        height: 100%;
        padding: 2em 5%;
    }

    #essay .essayswiper .swiper-slide .card .date {
        font-size: 0.9em;
        padding-bottom: 2em;
        width: 100%;
    }

    #essay .essayswiper .swiper-slide .card div.title {
        min-height: 25em;
    }

    #essay .essayswiper .swiper-slide .card div.title h2 {
        font-size: 1.2em;
    }

    #essay .essayswiper .swiper-slide .card div.link {
        font-size: 0.9em;
        padding-top: 2em;
    }

    /* essay swiper arrow */
    .swiper-button-prev, .swiper-button-next {
        width: 30px;
        height: 30px;
        background-size: 30px 30px;
        margin-top: -20px;
    }

    .swiper-button-next {
        right: -1%;
    }

    .swiper-button-prev {
        left: -1%;
    }

    /* service */
    #service {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
        padding: 0 5%;
        margin: 6em auto;
    }

    #service .text {
        width: 100%;
        padding: 0 5%;
        order: 2;
        margin-top: 5em;
    }

    #service .text h3 {
        font-size: 1.3em;
        margin-bottom: 3em;
    }

    #service .text p {
        width: 100%;
        padding-left: 0;
        font-size: 1em;
    }

    #service .slick {
        width: 100%;
        height: auto;
        order: 1;
    }

    /* service list */
    #service_list {
        margin: 0 auto 6em;
    }

    #service_list .detail .course a {
        margin: 0 auto;
        display: block;
        padding: 4em 5%;
    }

    #service_list .detail .course a .copy {
        width: 100%;
        font-size: 1.1em;
        text-align: center;
    }

    #service_list .detail .course a .name {
        width: 70%;
        margin: 3em auto;
    }

    #service_list .detail .course a .caption {
        width: 85%;
        margin: 0 auto;
        text-align: justify;
    }

    #service_list .detail .course a .btn_arrow {
        width: 40px;
        margin: 3em auto 0;
    }


}