@charset "utf-8";

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Common(PC.SP共通設定)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

* {
    box-sizing: border-box;
}

html {
    overflow-y: scroll;
}

body {
    /* ゴシック体系のフォント指定 */
    font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-rendering: optimizeLegibility;
}

.serif {
    /* 明朝体系(セリフ体)のフォント指定 */
    font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

main {
    display: block;
}

img {
    display: block;
    width: 100%;
    height: auto;
}

a img {
    transition: all 0.2s ease-in-out;
}
a:hover img {
    opacity: 0.5;
}

ul,
ol {
    list-style: none;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Goto Top (Topへ戻る) PC.SP共通設定
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#pageTop {
    display: block;
    padding: 10px 15px;
    position: fixed;
    right: 20px;
    bottom: 115px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
    font-size: 16px;
    color: #fff;
    z-index: 10000;
}



/*/////////////////////////////////////////////////////////////////////
    for PC  パソコン画面用（768px以上）
/////////////////////////////////////////////////////////////////////*/

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

    body {
        min-width: 1280px;
        margin:0 auto;
    }

    #wrapper {}

    .pc_none {
        display: none;
    }


/*==================================================
    Header  for PC
==================================================*/
    .top_title{
        width: 960px;
        height:70px;
        margin: 0px auto;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .top_title p{
        margin-left: 40px;
        font-size: 20px;
        font-weight:bold;
    }
    .top_title img{
        width: auto;
    }
    header .fv_box {
        position:relative;
        width:100%;
        height:600px;
        background-image:url(../img/fv_bg.jpg);
        background-position: center;
        background-size:100% 600px;
        background-repeat:no-repeat;
    }

    header .fv_box h1 {
        position:relative;
        width: 1280px;
        margin: 0 auto;
    }
    header .fv_box a{
        display:block;
        width: 400px;
        margin:0 auto;
    }
    header .fv_box a img{
        position:relative;
        width: 400px;
        top:-70px;
        left:-230px;
    }

/*==================================================
    Main  for PC
==================================================*/

    main {

    }

/*==================================================
    Main 募集要項を見る  for PC
==================================================*/

    #btn_youkou {
        width: 460px;
        margin: auto;
        padding: 3.8% 0;
    }

    #btn_youkou a img {
        width: 460px;
        margin: auto;
    }
    h2 {
        color:#0063a3;
        margin: 0 auto;
        padding: 10px 0 0;
        text-align: center;
        font-size: 26px;
        line-height: 1.3;
        letter-spacing:0.3em;
    }
    .h2_en {
        color:#000;
        margin: 0 auto 20px;
        padding:10px 0 10px;
        text-align: center;
        font-size: 14px;
        line-height: 1.3;
        letter-spacing:0.8em;
    }

    .btn {
        width:464px;
        padding:10px 0px 40px;
        margin:0 auto;
    }
    
    /*==================================================
    Main スライド  for PC
    ==================================================*/

    #slide{
        width:100%;
        background-image:url(../img/slide_bg.jpg);
        background-position: center;
    }

    #slide .slide_box{
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        padding: 35px 0 35px;
    }

    

    
    #slide .swiper-container {
        width: 100%;
        height: 100%;
        padding-bottom: 30px;
    }
    #slide .swiper-container .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        text-align: center;
        font-size: 18px;
    }
    #slide .swiper-container .swiper-slide img {
        width: 860px;
    }



    /*==================================================
    Main フロー  for PC
    ==================================================*/

    #flow{
        width:100%;
        background-color: #c9d5dc;
    }

    #flow .flow_box{
        width: 740px;
        margin: auto;
        padding: 35px 0 50px;
    }
    #flow .flow_box figure {
        pointer-events: none;
    }


    #flow .flow_box_2{
        width: 100%;
        height:436px;
        padding: 20px 0;
        background-image: url(../img/flow_bg.jpg);
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
    }

    #flow .flow_box_2 .inner{
        width:960px;
        color:#fff;
        text-align:center;
        margin:0 auto;
    }
    #flow .flow_box_2 .inner h3{
        font-size:25px;
        font-weight:bold;
    }
    #flow .flow_box_2 .inner h3:before{
        display:inline-block;
        content:"";
        background-image:url(../img/h3_icon.png);
        background-size:40px;
        width:40px;
        height:40px;
        position:relative;
        top:10px;
        right:10px;
    }

    #flow .flow_box_2 .inner p{
        font-size:16px;
        line-height:1.5;
        padding:2em 0;
    }

/*==================================================
    Main インタビュー  for PC
==================================================*/

    #interview {
    width:100%;
    }
    #interview .interview_box{
        width:100%;
        padding-top: 35px;
        margin: 0 auto 30px;
    }

    #interview .interview_box .inner{
        /*---後ろの背景色を指定する---*/
        background-image:url(../img/interview_bg.jpg);
        background-position: center;
        background-size:cover;
padding:30px 0;
    }
    #interview .interview_box .inner ul {
        width: 900px;
        margin:0 auto;
    }
    #interview .interview_box .inner ul li {
        width: 900px;
        margin: auto;
        padding: 10px 0 0;
        margin: 20px auto;
        background-color:rgba(255,255,255,0.6) ;
    }
    #interview .interview_box .inner ul li figure {
        width: 80px;
        height:50px;
        margin-bottom:-20px;
        margin-left:40px;
    }
    #interview .interview_box .inner ul li h3 {
        width: 900px;
        height:80px;
        font-size:22px;
        line-height:80px;
        padding-left:3em;
        margin-left:-30px;
        color:#fff;
        background-color:#8bc53f;
    }
    #interview .interview_box .inner ul li p {
        font-size:16px;
        line-height:1.5;
        padding:1em 1.5em 1.5em 2em;
    }

/*==================================================
    Footer  for PC
==================================================*/

    footer {
        width: 100%;
        margin:0 auto;
    color:#fff;
    font-size:12px;
    background-color:#000;
    padding:2em;
    text-align:center;
    }

    footer p {
        padding: 0 0 10px;
        text-align: center;
        font-style: normal;
        font-size: 12px;
    }
}




/*/////////////////////////////////////////////////////////////////////
    for sp  スマホ画面用（767px以下）
/////////////////////////////////////////////////////////////////////*/


@media only screen and (max-width:767px) {
    body {
        width: 100%;
        font-size: 13px;
    }



/*--------------------------------------------------
    Header  for sp
--------------------------------------------------*/

    .top_title{
        width: 95%;
        margin: 10px auto;
        display: flex;
        flex-direction:column;
        align-items: center;
    }

    .top_title p{
        margin-left: 20px;
        font-size: 18px;
    }

    .top_title img{
        width: auto;
    }

    header .fv_box h1 {
        width: 100%;
        margin: auto;
    }
    header .fv_box a{
        display:none;
    }

    .sp_none {
        display:none;
    }
    
    h2 {
        color:#0063a3;
        margin: 0 auto;
        padding: 10px 0 0;
        text-align: center;
        font-size: 20px;
        line-height: 1.3;
        letter-spacing:0.1em;
    }
    .h2_en {
        color:#000;
        margin: 0 auto;
        padding:0 0 10px;
        text-align: center;
        font-size: 14px;
        line-height: 1.3;
        letter-spacing:0.4em;
    }

    .btn {
        width:320px;
        padding:10px 0px 15px;
        margin:0 auto;
    }
/*--------------------------------------------------
    Main  for sp
--------------------------------------------------*/

    /*--------------------------------------------------
    Main スライド  for sp
    --------------------------------------------------*/

    #slide {
        width: 100%;
        background-image:url(../img/slide_bg.jpg);
        background-size:contain;
        background-position: center;
        padding:15px 2%;
    }
    #slide .swiper-container {
        width: 100%;
        height: 100%;
        padding-bottom: 30px;
    }
    #slide .swiper-container .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        text-align: center;
        font-size: 18px;
    }
    #slide .swiper-container .swiper-slide img {
        width: 100%;
    }



/*--------------------------------------------------
    Main フロー  for sp
--------------------------------------------------*/

    #flow {
        width: 100%;
        margin: 0 auto 5%;
        padding: 10px 0 15px;
        background-color: #c9d5dc;
    }
    #flow figure{
        width: 95%;
        margin: 0 auto;
    }
    
    #flow .flow_box_2{
        width: 100%;
        background-image: url(../img/flow_bg.jpg);
        background-size: 100%;
        background-position: center;
        background-repeat: repeat;
        padding: 20px 0;
        margin-top:20px;
    }

    #flow .flow_box_2 .inner{
        width:100%;
        color:#fff;
        text-align:center;
        margin:0 auto;
    }
    #flow .flow_box_2 .inner figure{
        width:40px;
        margin:0 auto;
    }
    #flow .flow_box_2 .inner h3{
        font-size:20px;
        font-weight:bold;
        line-height:1.5;
    }
    
    #flow .flow_box_2 .inner p{
        font-size:16px;
        line-height:1.5;
        padding:1em;
        text-align:left;
    }

   

    /*--------------------------------------------------
    Main インタビュー  for sp
    --------------------------------------------------*/

    #interview {
        width:100%;
    }
    #interview .interview_box{
        width:100%;
        padding-top: 35px;
        margin: 0 auto 10px;
    }

    #interview .interview_box .inner{
        /*---後ろの背景色を指定する---*/
        background-image:url(../img/interview_bg.jpg);
        background-position: center;
        background-size:cover;
        padding:30px 0 15px;
    }
    #interview .interview_box .inner ul {
        width: 95%;
        margin:0 auto;
    }
    #interview .interview_box .inner ul li {
        width: 100%;
        margin: auto;
        padding: 10px 0 0;
        margin: 20px auto;
        background-color:rgba(255,255,255,0.6) ;
    }
    #interview .interview_box .inner ul li figure {
        width: 80px;
        height:50px;
        margin-bottom:-20px;
        margin-left:25px;
    }
    #interview .interview_box .inner ul li h3 {
        display:flex;
        align-items: center;
        width: 95%;
        height:80px;
        font-size:18px;
        line-height:1.3;
        padding-left:2em;
        margin-left:-3%;
        color:#fff;
        background-color:#8bc53f;
    }
    #interview .interview_box .inner ul li p {
        font-size:16px;
        line-height:1.5;
        padding:1em 1.5em 1.5em 2em;
    }


/*--------------------------------------------------
    Footer  for sp
--------------------------------------------------*/

    footer  {
    font-size:12px;
    color:#fff;
    background-color:#000;
    padding:2em;
    text-align:center;
    }
}