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

html {
    overflow-y: scroll;
    font-family: 'Hiragino Kaku Gothic Pro', Meiryo, Osaka, 'MS PGothic', arial, sans-serif;
    font-size: 62.5%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-size: 1.6rem;
    line-height: 1.4;
}

/* ======ベース====== */

header,
.container,
.container-split,
footer ul {
    width: 92%;
    margin: 0 auto;
}

section {
    padding: 40px 0;
}

#nav-pc {
    display: none;
}

/* ====アクセサリー==== */

h1 {
    padding: 10px 0;
}

h1 img {
    width: 88px;
    height: 40px;
}

h2 {
    padding-bottom: 15px;
    font-family: 'M PLUS Rounded 1c';
    font-size: 2.8rem;
    text-align: center;
}

h3 {
    font-family: 'M PLUS Rounded 1c';
    font-size: 2.4rem;
}

.background-blue {
    background: #f2f5f8;
}

.background-gray {
    background: #f1f2f3;
}

.br {
    display: inline-block;
}

.center {
    text-align: center;
}

.caution {
    color: red;
}

.space {
    margin-top: 10px;
}

.big {
    font-size: 2.2rem;
}

.ad_sp {
    text-align: center;
}

.ad_sp img {
    vertical-align: middle;
}

.ad_pc {
    display: none;
}

/* ======コンテンツ====== */

/* ====ヒーロー==== */

#hero-image {
    padding: 25px 0 0;
    text-align: center;
}

#hero-image img {
    width: 100%;
}

#hero-bg {
    margin-top: 25px;
    background-image: url(../img/hero.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#about {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0 40px;
}

/* ====エリア==== */

.note {
    margin-bottom: 15px;
}

.model-east,
.photographer-east {
    width: 90%;
    margin: 0 auto 25px;
}

.model-west,
.photographer-west,
.event-national {
    width: 90%;
    margin: 0 auto;
}

.model-east li,
.model-west li,
.event-national li {
    padding-bottom: 13px;
    text-align: center;
    background: #ffffff;
}

.model-east .subheading,
.model-west .subheading,
.event-national .subheading {
    padding-bottom: 20px;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 0) 75%);
}

.photographer-east li,
.photographer-west li {
    padding-bottom: 13px;
    text-align: center;
    background: #f1f2f3;
}

ul .bottom {
    padding-bottom: 17px;
}

.photographer-east .subheading,
.photographer-west .subheading {
    padding-bottom: 20px;
    background: linear-gradient(0deg, rgba(241, 242, 243, 1) 75%, rgba(255, 255, 255, 0) 75%);
}

.subheading p {
    font-size: 1.4rem;
}

/* ====撮影会・リンク==== */

.runway li,
.link li {
    width: 300px;
    padding: 10px;
    margin: 15px auto;
    text-align: center;
    background: #ffffff;
    border: 2px solid #414993;
    border-radius: 4px;
}

/* ======フッター====== */

footer {
    padding: 20px 0;
    margin-top: auto;
    font-size: 1.4rem;
    background-color: #111111;
}

footer ul {
    display: flex;
    justify-content: center;
    padding-bottom: 10px;
}

footer ul li:nth-child(even) {
    padding: 0 20px;
}

footer a {
    color: #fafafa;
}

small {
    display: block;
    color: #fafafa;
    text-align: center;
}

/* ======PC CSS====== */

@media screen and (min-width: 813px) {

    /* ======ベース====== */

    .container {
        width: 800px;
    }

    #nav-sp {
        display: none;
    }

    header div {
        display: flex;
        justify-content: space-between;
        max-width: 1300px;
        margin: 0 auto;
    }

    #nav-pc {
        display: flex;
        align-items: center;
    }

    #nav-pc li {
        margin-left: 20px;
    }

    #nav-pc a {
        color: #000000;
        text-decoration: none;
    }

    /* ====ヒーロー==== */

    /*
    #hero-image img {
        width: 770px;
    }
    */

    #hero-bg {
        padding: 50px 0;
        background-size: cover;
    }
    
    /* ====エリア==== */

    .recruitment {
        display: flex;
        justify-content: space-between;
    }

    .model-east,
    .photographer-east {
        width: 375px;
        margin: 0;
    }

    .model-west,
    .photographer-west {
        width: 375px;
        margin: 0;
    }

    .event-national {
        width: 100%;
        margin: 0;
    }

    ul .bottom {
        padding-bottom: 20px;
    }

    /* ====撮影会・リンク==== */

    #studio {
        background: linear-gradient(90deg, rgb(241, 242, 243) 50%, rgb(242, 245, 248) 50%);
    }

    #runway {
        background: linear-gradient(90deg, rgb(241, 242, 243) 50%, rgb(242, 245, 248) 50%);
        /*
        background: linear-gradient(90deg, rgb(242, 245, 248) 50%, rgb(255, 255, 255) 50%);
        */
    }

    .container-split {
        display: flex;
        justify-content: space-between;
        width: 800px;
    }

    .runway li {
        width: 350px;
        margin: 15px 0 0;
    }

    .link ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .link li {
        width: 250px;
        padding: 10px 2px;
        margin: 15px 0 0;
    }

    /* ====PC広告==== */

    .ad_sp {
        display: none;
    }

    .ad_pc {
        display: block;
        text-align: center;
    }

    .ad_pc img {
        vertical-align: middle;
    }

}

/* ======ハンバーガー====== */

#nav-check {
    display: none;
}

.nav-open {
    position: fixed;
    top: 10px;
    right: 4%;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 40px;
    cursor: pointer;
    background: #ffffff;
    border-radius: 4px;
}

.nav-open span,
.nav-open span:before,
.nav-open span:after {
    position: absolute;
    display: block;
    width: 38px;
    height: 4px;
    content: '';
    background: #000000;
    border-radius: 4px;
    transition: 0.6s;
}

.nav-open span:before {
    bottom: 12px;
}

.nav-open span:after {
    top: 12px;
}

#nav-check:checked~.nav-open span {
    background: rgba(255, 255, 255, 0);
}

#nav-check:checked~.nav-open span::before {
    bottom: 0;
    transform: rotate(45deg);
}

#nav-check:checked~.nav-open span::after {
    top: 0;
    transform: rotate(-45deg);
}

#nav-check:checked~nav {
    right: 0;
}

/* ====SPメニュー==== */

nav {
    position: fixed;
    top: 0;
    right: -100%;
    z-index: 99;
    box-sizing: border-box;
    width: 92%;
    height: 100vh;
    padding: 60px 0;
    overflow: auto;
    background: rgba(255, 255, 255, 0.95);
    transition: .5s;
}

dl {
    width: 82%;
    margin: 15px auto 0;
}

dt {
    padding: 8px;
    margin-bottom: 10px;
    font-family: 'M PLUS Rounded 1c';
    font-size: 1.8rem;
    background: #f1f2f3;
    border-radius: 4px;
}

dd {
    padding: 0 0 16px 20px
}

.icon-east {
    padding: 2px 4px;
    margin-right: 5px;
    font-size: 1.3rem;
    color: #ffffff;
    background: #414993;
    border-radius: 4px;
}

.icon-west {
    padding: 2px 4px;
    margin-right: 5px;
    font-size: 1.3rem;
    color: #ffffff;
    background: #4bcb92;
    border-radius: 4px;
}

.icon-all {
    padding: 2px 4px;
    margin-right: 5px;
    font-size: 1.3rem;
    color: #ffffff;
    background: #000000;
    border-radius: 4px;
}