@charset "UTF-8";

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

    /* layer 共通 */
    main {
        margin: 6em auto 8em;
    }

    main#essay {
        margin: 6em auto 8em;
    }

    main#service {
        margin: 6em auto 8em;
    }

    .block_layer {
        width: 100%;
        padding: 0 5%;
        margin: 0 auto;
    }

    .block_layer .midashi {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        width: 100%;
        text-align: left;
    }

    .block_layer .midashi h3 {
        width: auto;
    }

    .block_layer .midashi p {
        width: auto;
    }

    .block_layer .detail {
        width: 100%;
        text-align: left;
    }

    /* profile */
    #profile #yurishimoda .detail {
        width: 100%;
        margin-left: auto;
        margin-top: 3em;
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        flex-wrap: wrap;
    }

    #profile #yurishimoda .detail figure {
        width: 100%;
    }


    #profile #yurishimoda .detail .text {
        width: 100%;
        margin-bottom: 4em;
        text-align: left;
        display: flex;
        flex-direction: column;
    }

    #profile #yurishimoda .detail .text #katagaki {
        font-size: 1em;
        margin-bottom: 3em;
    }

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

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

    #profile #yurishimoda .detail .link {
        margin-top: auto;
        display: flex;
        align-items: flex-end;
    }

    #profile #yurishimoda .detail .link .button_a {
        margin-right: 2em;
    }

    #profile #message {
        width: 90%;
        margin-right: auto;
        margin-left: auto;
        margin-top: 6em;
        flex-wrap: wrap;
        padding: 5em 8%;
    }

    #profile #message div {
        width: 100%;
        margin-bottom: 3em;
    }

    #profile #message section {
        width: 100%;
    }

    #profile #message section h2 {
        font-size: 1.4em;
        margin-bottom: 3em;
    }

    #profile #message section p {
        font-size: 1.1em;
    }

    #profile #books {
        margin-top: 6em;
    }

    #profile #books .detail {
        width: 100%;
        margin-top: 3em;
    }

    #profile #books .detail ul li a {
        display: block;
        border-bottom: 1px solid #D9D9D9;
        padding-bottom: 0.75em;
        margin-bottom: 2em;
    }

    #profile #books .detail ul li a .title {
        font-size: 1.1em;
        margin-right: 0;
        margin-bottom: 0.75em;
        width: 100%;
        margin-right: auto;
    }

    #profile #books .detail ul li a .publication {
        font-size: 0.8em;
    }

    /* company */
    #company #info .detail dl {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        margin-bottom: 1.5em;
    }

    #company #info .detail dl dt {
        width: 30%;
    }

    #company #info .detail dl dd {
        width: 70%;
    }


    #company #form {
        margin-top: 8em;
    }

    /* newslist */
    #newslist ul li a {
        flex-direction: column;
    }

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

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

    /* news single */
    #news #single #entry {
        margin-top: 2em;
        padding-top: 2em;
    }

    /* essaylist */
    #essay #essaylist {
        width: 95%;
        margin: 0 auto;
    }

    #essay #essaylist .essay_wrapper {
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: space-between;
    }

    #essay #essaylist .article {
        width: 92.5%;
        height: auto;
        padding: 0;
        margin: 4em auto 0;
    }

    #essay #essaylist .article .card {
        width: 100%;
        padding: 2em 5%;
    }

    #essay #essaylist .article .card .date {
        padding-bottom: 2em;
    }

    #essay #essaylist .article .card div.title {
        min-height: 25em;
    }

    #essay #essaylist .article .card div.title h2 {
        font-size: 1.2em;
    }

    #essay #essaylist .article .card div.link {
        padding-top: 2em;
    }

    /* essay single */
    #essay #single {
        background-color: #FFF;
        width: 88%;
        padding: 3em 5% 6em;
    }

    #essay #single #date {
        font-size: 1em;
    }

    #essay #single #title {
        margin-top: 2em;
        padding-top: 3em;
        margin-bottom: 2em;
        padding-bottom: 3em;
        font-size: 1.4em;
    }

    #essay #single #entry p {
        font-size: 1.1em;
        line-height: 2.4;
    }

    /* service */
    #service #title {
        width: 100%;
        padding: 0 5%;
        margin: 0 auto 8em;
    }

    #service #title #catch {
        font-size: 1.1em;
    }

    #service #title #service_logo {
        height: 4.5em;
        margin: 4em auto;
    }

    #service #title #copy {
        font-size: 1.1em;
        margin-bottom: 3em;
    }

    #service #title p {
        font-size: 1em;
        line-height: 2.4;
    }

    /* service about */
    #service #about .detail {
        width: 100%;
        margin-left: auto;
        margin-top: 4em;
    }

    #service #about .detail .flex {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    #service #about .detail .flex h3 {
        width: 20%;
    }

    #service #about .detail .flex:nth-child(3) h3 {
        width: 100%;
    }

    #service #about .detail .flex div {
        width: 80%;
        font-size: 1em;
        text-align: justify;
    }

    #service #about .detail #graph {
        width: 70%;
        margin: 4em auto;
    }

    #service #about .detail .flex #aim {
        width: 100%;
    }

    #service #about .detail .flex #aim ul {
        width: 100%;
        margin-top: 2em;
    }

    #service #about .detail .flex #aim ul li {
        font-size: 1em;
        padding-bottom: 0.75em;
        margin-bottom: 1.5em;
        border-bottom: 1px dashed #6B6A6B;
    }

    #service #about .detail .flex #aim li span {
        font-size: 1em;
        margin-right: 1.5em;
    }

    #service #about .detail #suitable {
        width: 100%;
        margin: 4em auto 0 0;
        padding: 4em 8%;
    }

    #service #about .detail #suitable .suitable_block {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
        padding-bottom: 3em;
        margin-bottom: 3em;
    }

    #service #about .detail #suitable .suitable_block .icon {
        width: 70px;
        margin-left: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #service #about .detail #suitable .suitable_block h3 {
        width: 100%;
        margin: 2em auto;
        font-size: 1.1em;
        text-align: center;
    }

    #service #about .detail #suitable .suitable_block ul {
        width: 100%;
    }

    #service #about .detail #suitable .suitable_block ul li {
        font-size: 1em;
        margin-bottom: 1em;
    }

    #service #about .detail #suitable .suitable_block ul li:last-child {
        margin-bottom: 0;
    }

    /* service program */
    #service #program {
        margin-top: 8em;
    }

    #service #program .detail {
        width: 100%;
        margin-left: auto;
        margin-top: 4em;
    }

    #service #program .detail .program_block {
        width: 100%;
        margin-bottom: 4em;
    }

    #service #program .detail .program_block:last-child {
        width: 100%;
    }

    #service #program .detail .program_block .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        padding: 2em 4%;
    }

    #service #program .detail .program_block .title h4 {
        text-align: center;
        width: 100%;
    }

    #service #program .detail .program_block .title h3 {
        text-align: center;
        width: 100%;
        font-size: 1.2em;
        margin: 1em auto;
    }

    #service #program .detail .program_block .title p {
        text-align: center;
        width: 100%;
    }

    #service #program .detail .program_block .flex {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-direction: column;
        padding: 4em 8%;
    }

    #service #program .detail .program_block .flex figure {
        width: 60%;
        margin: 0 auto;
        padding: 0 7%;
    }

    #service #program .detail .program_block .flex div {
        width: 100%;
        margin-top: 3em;
    }

    #service #program .detail .program_block .flex div p {
        font-size: 1em;
        text-align: justify;
    }

    #service #program .detail .program_block:last-child .flex figure {
        width: 70%;
        padding: 0 5%;
    }

    /* service join */
    #service #join {
        margin-top: 8em;
    }

    #service #join .detail {
        width: 100%;
        margin-left: auto;
        margin-top: 4em;
    }


    #service #join .detail #attention {
        width: 100%;
        margin-bottom: 4em;
        padding: 0 8%;

    }

    #service #join .detail #attention h3 {
        font-size: 1.2em;
        padding: 3em 0 3em;
        margin-bottom: 3em;
    }

    #service #join .detail #attention .flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        padding: 0 0 3em;
    }

    #service #join .detail #attention .flex figure {
        width: 70%;
        padding: 0 7%;
        margin: 0 auto;
    }

    #service #join .detail #attention .flex div {
        width: 100%;
        margin-top: 3em;
    }

    #service #join .detail #attention .flex div ul li {
        font-size: 1.1em;
        margin-bottom: 0.75em;
    }

    #service #join .orientation {
        width: 100%;
        margin-top: 4em;
    }

    #service #join .orientation .flex {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
        flex-wrap: wrap;
    }

    #service #join .orientation .flex:last-child {
        margin-top: 6em;
        margin-bottom: 4em;
    }

    #service #join .orientation .flex h3 {
        width: 100%;
        margin-bottom: 1em;
    }

    #service #join .orientation .flex section {
        width: 100%;
        padding-bottom: 2em;
        margin-top: 3em;
        margin-bottom: 0;
    }

    #service #join .orientation .flex h4 {
        width: 25%;
    }

    #service #join .orientation .flex div {
        width: 70%;
    }

    #service #join .orientation .flex div p.caption {
        font-size: 0.8em;
        margin-top: 2em;
    }

    /* snow monkey form */
    .snow-monkey-form {
        margin-right: auto;
        width: 100%;
    }


    .smf-form--letter .smf-item {
        margin-bottom: 1em !important;
    }

    .smf-item__description {
        font-size: 0.9em !important;
    }

    .smf-item {
        margin: 0 auto 3em;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
    }

    .smf-item.info {
        margin: 0;
    }

    .smf-item__col.smf-item__col--label {
        width: 100%;
        margin-bottom: 1em;
    }

    .smf-item__col.smf-item__col--controls {
        width: 100%;
    }

    .smf-item__label {
        text-align: left;
        font-size: 1em;
    }

    .smf-item__controls {
        text-align: left;
        font-size: 0.9em;
    }

    .smf-item__controls a {
        border-bottom: 1px dashed #6B6A6B;
    }

    .smf-placeholder {
        font-size: 1.1em;
    }

    .smf-action .smf-button-control__control {
        margin-top: 0;
        width: 100%;
    }

    #essay #pagenavi {
        width: 95%;
        margin: 5em auto 0;
    }

}