@charset "UTF-8";

/* ----------------------------------------------------------------------
BASE
 ---------------------------------------------------------------------- */

/* ----------------------------------------------------------------------
LAYOUT
 ---------------------------------------------------------------------- */

/* ----------------------------------------------------------------------
MODULE
 ---------------------------------------------------------------------- */
header {
    background-size:cover;
    padding:30px 0 50% 0;
    background:url(/special/fieldgallery/img/hd_bg_01.jpg) no-repeat top center;
    background-size:cover;
    position:relative;
    z-index:2;
}

h1 {
    float:right;
    margin-left:40px;
}

h1 img {
    width:104px;
    height:265px;
}

nav {
    position:relative;
}

nav ul {
    padding-top:20px;
}

nav li {
    /*display:inline-block;*/
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    display:inline-block;
    float:right;
    margin-left:5px;
}

nav a {
    font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho";
    color:#555;
    white-space:nowrap;
    display:block;
    font-size:1.5rem;
}

.pc nav a {
    transition:0.5s;
}

.pc nav a:hover {
    color:#5f9ea0;
}

#loader-bg .logo {
    margin-top:-75px;
}

.copy {
    font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho";
    line-height:3.7em;
    margin-bottom:110px;
    padding-bottom:75px;
    background:url(/special/fieldgallery/img/co_ln_01.gif) no-repeat bottom center;
}

.copy .img {
    margin-bottom:90px;
}



h2 {
    font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho";
    font-weight:normal;
    line-height:2em;
    font-size:1.6rem;
    margin-bottom:30px;
    letter-spacing:0.2em;
}

.youtubebtn {
    width: 230px;
    height: 230px;
    position: absolute;
    bottom: 17%;
    right: 100px;
    text-align: center;
    z-index: 100;
}

.youtubebtn a {
    color:#fff;
    font-size:1.2rem;
    text-shadow: 1px 0 17px #000
}

@media only screen and (max-width: 768px) {
    header {
        padding:30px 0 57% 0;
        background:url(/special/fieldgallery/img/hd_bg_01_tb.jpg) no-repeat top 50%;
        height:100vh;
        background-size:cover;

    }

    h1 {
        margin-left:25px;
    }

    h1 img {
        width:90px;
        height:auto;
    }

    .youtubebtn {
        width:210px;
        height:210px;
        right:50px;
    }
}

@media only screen and (max-width: 450px) {
    header {
        padding:30px 0 97% 0;
        background:url(/special/fieldgallery/img/hd_bg_01_sp.jpg) no-repeat left center;
        height:100vh;
    }

    h1 {
        margin-top:-5px;
        margin-left:15px;
        margin-right:3px;
    }

    h1 img {
        width:85px;
        height:auto;
    }

    nav ul {
        padding-top:10px;
    }

    nav li {
        margin-left:2px;
    }

    .youtubebtn {
        width:170px;
        right:20px;
        bottom:21%;
    }

    .copy {
        line-height:3.3em;
    }

}


@media only screen and (max-width: 400px) {
    h1 img {
        width:70px;
        height:auto;
    }

    .youtubebtn {
        width:150px;
        right:15px;
    }
}

@media only screen and (max-width: 370px) {
    header {
        min-height:600px;
    }

    header ul {
        display:none;
    }

    .youtubebtn {
        width:150px;
        right:10px;
        bottom:13%;
    }
}

/* ------------------------------
SEC-AREA
------------------------------ */
.sec-area {
    position:relative;
}

.sec-area .bgimg {
    position:absolute;
    top:50px;
    left:0;
}

.sec-area h3 {
    font-family:"Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho";
    font-weight:normal;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    display: inline-block;
    font-size:4rem;
    color:#777;
}

.list-area {
    width:860px;
    margin:0 auto;
}

.list-area li {
    margin-bottom:100px;
}

.list-area li:after {
    content:'.';
    display:block;
    height:0;
    font-size:0;
    clear:both;
    visibility:hidden;
}

.list-area .img {
    background:#20b2aa;
}

.list-area a {
    display:block;
}

.pc .list-area a {
    transition:0.5s;
}

.pc .list-area a:hover {
    opacity:0.7;
}

.list-area .img {
    display:inline-block;
}

.list-area li:nth-child(odd) h3 {
    float:right;
    margin-left:20px;
}

.list-area li:nth-child(odd) .img {
    float:right;
}

.list-area li:nth-child(even) h3 {
    float:left;
    margin-right:20px;
}

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

    .list-area .img {
        width:80%;
    }

    .sec-area .title {
        margin-bottom:80px;
    }

    .sec-area .bgimg img {
        width:400px;
        height:auto;
    }
}

@media only screen and (max-width: 860px) {
    .list-area {
        width:90%;
        margin:0 auto;
    }

}

@media only screen and (max-width: 768px) {
    .sec-area h3 {
        font-size:3rem;
    }
}

@media only screen and (max-width: 450px) {
    .list-area li:nth-child(odd) h3 {
        float:none;
        margin-left:0;
    }

    .list-area li:nth-child(odd) .img {
        float:none;
    }

    .list-area li:nth-child(even) h3 {
        float:none;
    }

    .list-area li h3 {
        display:block;
        text-align:center;
        width: 50%;
        margin-left: 0.5em;
        margin-bottom:20px;
        font-size:2rem;
    }

    .list-area li .img {
        width:100%;
    }

    .sec-area .bgimg img {
        width:270px;
    }
}

/* ------------------------------
SEC-STUDENTS
------------------------------ */
.sec-students {
    padding-bottom:100px;
}

.sec-students li {
    width:32%;
    float:left;
    margin-left:2%;
    margin-bottom:20px;
    background:#20b2aa;
}

.sec-students li:nth-child(3n+1){
    margin-left:0;
}

.sec-students li img {
    width:100%;
    height:auto;
}

.pc .sec-students li a {
    transition:0.5s;
}

.pc .sec-students li a:hover {
    opacity:0.7;
}

.sec-students {
}

.sec-students .title {
    width:30%;
    float:left;
}


.sec-students .content {
    width:70%;
    float:right;
}

@media only screen and (max-width: 768px) {
    .sec-students {
        padding-bottom:70px;
    }

    .sec-students .title {
        width:100%;
        margin-bottom:30px;
    }

    .sec-students .content {
        width:100%;
    }
}

@media only screen and (max-width: 380px) {
    .sec-students li {
        margin-left:0;
        width:48%;
    }

    .sec-students li:nth-child(even) {
        margin-left:4%;
    }

    .sec-students .content {
        padding:0 20px;
    }
}


/* ------------------------------
SEC-ACTIVITY
------------------------------ */
.sec-activity {
    padding-bottom:100px;
    position:relative;
}

.sec-activity .title {
    width:40%;
    float:left;
    position:relative;
}

.pc .sec-activity .title a {
    transition:0.5s;
}


.pc .sec-activity .title a:hover {
color:#5f9ea0
}

.sec-activity .content {
    width:52%;
    float:right;
    position:relative;
    margin-top:100px;
}

.sec-activity .content a {
    display:block;
    line-height:0;
}

.pc .sec-activity .content a img {
    transition:0.5s;
}

.pc .sec-activity .content li {
    background:#20b2aa;
    line-height:0;
}

.pc .sec-activity .content a:hover img {
    opacity:0.7;
}

.sec-activity .title p {
    margin-bottom:20px;
}

.sec-activity .logo {
    position: absolute;
    left: -220px;
    bottom: 30px;
}

.sec-activity li {
    margin-bottom:15px;
}

@media only screen and (max-width: 768px) {
    .sec-activity {
        padding-bottom:70px;
    }

    .sec-activity .title {
        width:100%;
        float:none;
    }

    .sec-activity .content {
        width:70%;
        margin-top:50px;
    }

    .sec-activity .logo {
        left:-30%;
    }

}

@media only screen and (max-width: 600px) {
    .sec-activity .content {
        width:85%;
    }
    .sec-activity .logo {
        position: absolute;
        left: -20%;
        bottom: 30px;
    }
}


@media only screen and (max-width: 550px) {
    .sec-activity {
        padding-bottom:30px;
    }

    .sec-activity .logo {
        position: absolute;
        right: 0;
        bottom: -60px;
        left: auto;
    }

    .sec-activity .logo img {
        width:230px;
        height:auto;
    }

}

@media only screen and (max-width: 400px) {
    .sec-activity .content {
        width:100%;
        margin-top:30px;
        padding:0 10px;
    }

    .sec-activity .logo img {
        width:200px;
        height:auto;
    }

    .sec-activity .logo {
        left:auto;
        right:0;
        bottom:-30px;
    }
}

/* ----------------------------------------------------------------------
STATE
 ---------------------------------------------------------------------- */

/* ----------------------------------------------------------------------
THEME
 ---------------------------------------------------------------------- */