@charset "UTF-8";


#header_sp {
    width: 100%;
    border-bottom: 8px solid #000066;
    z-index: 1;
    position: fixed;
    background: rgba(255,255,255,0.95);
    display:none;
}
#header_sp ul {
    overflow:hidden;
    margin:20px auto;
    font-size: 0;
    text-align: center;
}
#header_sp li {
    font-weight:bold;
    font-size: 11px;
    display: inline-block;
    vertical-align: top;
    line-height:35px;
    margin: 10px 0 0 2.5em;
} 
#header_sp li:first-child {
    text-align:left;
    width:200px;
    margin: 0;
}
#header_sp li:first-child span {
    font-size: 11px;
    display: block;
    background: #e2e3fb;
    text-align: center;
    line-height: 1.5;
    margin-top: 0.8vh;
    border-radius: 4px;
}
#header_sp li:first-child a:hover {
    opacity: 1;
    text-decoration:none;
}
#header_sp li:first-child img {
    vertical-align: middle;
}
#header_sp li span {
    display: block;
    font-size: 14px;
}
#header_sp li:last-child a {
    background-color:#000066;
    color:white;
    border-radius: 4px;
    padding: 0 1.5em;
}
#header_sp li a {
    display:block;
    text-decoration:none;
    color:#000066;
    padding: 0 0.5em;
}
#header_sp li a:hover {
    text-decoration: underline;
}
/*#header input , #header label {
    display:none;
}

#header_sp a.ham-entry {
    display:none;
}*/

@media screen and (max-width: 1080px) {
#header_sp {
    position: static;
    }
#header_sp .wrap {
    padding:0 0 0 1%;
    }
#header_sp li:first-child {
    text-align: center;
    border: none;
    display: block;
    width: 100%;
    max-width: 350px;
    margin: 20px auto;
    }
#header_sp h1 {
    display:none;
    }
#header_sp li {
    width:16.5%;
    }
}
@media screen and (max-width: 768px) {
#header_sp li {
    width:33%;
    margin-left: 0;
    }
#header_sp li:last-child a {
    max-width: 160px;
    margin: 0 auto;
    }
}
@media screen and (max-width: 480px) {
#header_sp {
    border-bottom: none;
    display:block;
}
#header_sp ul {
    margin: 0 auto;
}
#header_sp input , #header label {
    display:block;
}
#header_sp a.ham-entry {
    display:block;
    margin-top: 2.5vh;
    padding:10px 0;
    color: #1187ce;
    font-size: 3.25vw;
    font-weight: bold;
    text-decoration: none;
    border: 3px solid #1187ce;
    border-radius: 6px;
    text-align:center;
}
#header_sp li,
#header_sp li:nth-child(2) ,
#header_sp li:nth-child(5) {
    width:100%;
    border: none;
    text-align:left;
    line-height:40px;
    }
#header_sp li{
    margin-top: 1.5vw;
    font-size: 3.75vw;
    }
#header_sp li:first-child {
    margin: 0 auto 3vw;
    }
#header_sp li:last-child {
    display: none;
    }
#ham-menu {
    background-color: #fff;
    box-sizing: border-box;
    height: 100%;
    padding: 1em;
    position: fixed;
    right: -200px;
    top: 0;
    transition: transform 0.3s linear 0s;
    width: 200px;
    z-index: 1000;
}

#menu-background {
    background-color: #333;
    display: block;
    height: 100%;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all 0.3s linear 0s;
    width: 100%;
    z-index: -1;
}

#menu-icon {
    background-color: #fff;
    border-radius: 0 0 0 10px;
    color: #333;
    cursor: pointer;
    display: block;
    font-size: 50px;
    height: 50px;
    line-height: 50px;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    width: 50px;
    transition: all 0.3s linear 0s;
    z-index: 1000;
}

#menu-cb {
    display: none !important;
}

#menu-cb:checked ~ #ham-menu,
#menu-cb:checked ~ #menu-icon {
    transform: translate(-200px);
}

#menu-cb:checked ~ #menu-background {
    opacity: 0.5;
    z-index: 999;
}

}


/* ========================================

    後付けヘッダー

======================================== */

#header_pc {
    background-color: rgba(255,255,255,0.95);
    border-bottom: 8px solid #000066;
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
/*#header_pc li a {
    text-decoration: none;
    color: #000066;
    padding: 0 0.5em;
}*/
.header_box {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    height: 100px;
    padding: 0 3vw;
}
.header_box .logo {
    width: 35%;
    max-width: 250px;
}
.header_box .logo span {
    font-size: 11px;
    display: block;
    background: #e2e3fb;
    text-align: center;
    line-height: 1.5;
    margin-top: 0.8vh;
    border-radius: 4px;
}
.header_box .logo a {
    display: block;
    text-decoration: none;
    color: #000066;
    padding: 0 0.5em;
}
.header_box .logo img:hover,
.header_box .logo a:hover {
    opacity: 1 !important;
}

@media screen and (max-width: 480px) {
#header_pc {
    display:none;
}
}

/* ========================================

    ドロップダウン

======================================== */

.gnavi__wrap {
    width: 62%/*1200px;*/;
}
.gnavi__lists {
    display: flex;
    justify-content: right;
}
.gnavi__list {
    width: 25%;
    height: 60px;
    /*background-color: #E5F0F8;*/
    position: relative;
    transition: all .3s;
    z-index: 100;
}
.gnavi__list:last-child {
    background-color: #E5F0F8;
    margin-left: 2%;
    width: 21%;
}
.gnavi__list:last-child:hover {
    background-color: #0071BB;
}
/*.gnavi__list:not(:first-child)::before {
    content: "";
    width: 1px;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s;
}
.gnavi__list:hover::before {
    background-color: #0071BB;
}*/
.gnavi__list a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #1b4059;
    font-size: 15px;
    letter-spacing: 0.05em;
    font-weight: 600;
    transition: all .3s;
}
.gnavi__list:hover a {
    color: #044a79;
}
.gnavi__list:last-child:hover a {
    color: #fff;
}

/*▼以下2階層目*/

/* 吹き出し本体 */
.balloon{
  position: relative;
}
/* beforeで三角を表現 */
.balloon::before{
  border: solid transparent;
  content:'';
  height:0;
  width:0;
  pointer-events:none;
  position:absolute;
  border-color: rgba(0, 153, 255, 0);
  border-top-width:10px;
  border-bottom-width:10px;
  border-left-width:10px;
  border-right-width:10px;
  margin-left: -10px;
  border-bottom-color:#004d80;
  bottom:100%;
  left:49%;
}

.dropdown__lists {
    transform: scaleY(0);/*デフォルトでは非表示の状態にしておく*/
    transform-origin: center top;/*変形を適応する基準をtopとする*/
    transition: all .3s;/*表示の変化を0.3秒に指定*/
    width: 90%;
    position: absolute;
    top: 60px;
    left: 5%;
}
.gnavi__list:hover .dropdown__lists {
    transform: scaleY(1);/*Gナビメニューにホバーしたら表示*/
}
.dropdown__list {
    background-color: #004d80;
    height: 60px;
    transition: all .3s;
    position: relative;
    width: 100%;
}
.dropdown__list:not(:first-child)::before{
    content: "";
    width: 100%;
    height: 1px;
    background-color: #fff/*#3492d1*/;
    position: absolute;
    top: 0;
    left: 0;
}
.dropdown__list:hover {
    background-color: #003558;
}
.dropdown__list a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff !important;
    text-decoration: none;
    position: relative;
    font-size: 0.93rem;
}
.dropdown__list a::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(135deg);
    position: absolute;
    right: 15px;
    top: calc(50% - 5px);
}

@media screen and (max-width: 768px) {
.dropdown__list a {
    font-size: 12px;
    }
.dropdown__lists {
    width: 100%;
    left: 0%;
    }
}


/* ========================================

    Page-heading

======================================== */

#page-heading {
    /*background: url("./recruit2023_kv.jpg") no-repeat top right;
    background-color: #3794cf;*/
    color: #fff;
    position: relative;
    top: 100px;
}
#page-heading .staff {
    background: url("./recruit-ttl_back_staff.jpg") no-repeat top -5vw center;
    background-size: cover;
    height: 31vw;
    max-height: 400px;
    min-height: 250px;
    position: relative;
}
#page-heading .about {
    background: url("./recruit_ttl_back_about.jpg") no-repeat top -5vw center;
    background-size: cover;
    height: 31vw;
    max-height: 400px;
    min-height: 250px;
    position: relative;
}
#page-heading h1 {
    font-weight: bold;
    font-size: 44px;
    position: absolute;
    top: 50%;
    left: 50%;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.88);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

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

#page-heading h1 {
        font-size: 8vw;
    }
#page-heading {
        top: 0;
    }
#page-heading .staff,
#page-heading .about {
        min-height: initial;
        height: 44vw;
    }

}


/* ========================================

    Keyv

======================================== */

#keyv {
    background: url("./recruit2023_kv.jpg") no-repeat top right;
    background-color: #3794cf;
    background-size: contain;
    color: #fff;
    position: relative;
    top: 100px;
}
#keyv .inn {
    height: 53vw;
    width: 36vw;
    min-width: 300px;
    padding: 10vw 0 0 25px;
    line-height: 1.5;
    text-shadow: 1px 1px 5px rgb(0 56 90 / 88%);
}
#keyv .logo {
    position: absolute;
    bottom: 2vw;
    left: 2vw;
    width: 15vw;
    max-width: 215px;
    min-width: 100px;
}
#keyv .inn h1 {
    font-size:max(2.6vw,26px);
    font-weight: bold;
    margin: 0 auto 2.5em;
    line-height: 1.7;
}
#keyv .inn p {
    font-size:max(1.5vw,17px);
    font-weight: bold;
}
#keyv .inn p.welcome {
    font-size:max(1.77vw,20px);
    font-weight: bold;
}
#keyv .inn p.welcome span {
    font-size:max(1.5vw,16px);
    font-weight: bold;
}

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

    #keyv {
        background-size: cover;
        top: 0;
    }
    #keyv .inn {
        height: 55vw;
        padding: 7vw 0 0 2vw;
    }
    #keyv .inn h1 {
        font-size: 2.5vw;
    }
}

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

    #keyv .inn {
        height: 60vw;
    }
}

@media screen and (max-width: 480px) {
    
    #keyv {
        background: url("./recruit2023_kv_sp.jpg") no-repeat center center;
        background-size: cover;
        text-align: center;
    }
    #keyv .inn {
        padding: 16vw 1em 0;
        background-color: rgba(6,95,212,0.53);
        width: 100%;
        height: 88vw;
    }
    #keyv .inn h1 {
        font-size: 5.88vw;
        margin-bottom: 1em;
    }
    #keyv .inn p {
        font-size: max(4vw,14px);
    }
    #keyv .inn p.welcome {
        font-size: 4.8vw;
    }
}


/* ========================================

    Main-block

======================================== */

#main h2 {
    color: #00021c;;
    font-size: 39px;
    font-family: 'Gudea', sans-serif;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-align: center;
    position: relative;
    margin-bottom: 50px;
}
#main h2 span {
    display: block;
    color: #3894cf;
    font-size: 17px;
    font-family: "Yu Gothic", YuGothic;
}
#main h2:after {
    content: "";
    width: 40px;
    background-color: #3894cf;
    height: 3px;
    content: '';
    display: block;
    transform: translateX(-50%);
    position: absolute;
    left: 50%;
    bottom: -20px;
}
#main section {
    padding: 60px 0;
    overflow: hidden;
}

#main img {
    margin: 0 auto;
    display: block;
    width: 100%;
}

.main_banner{
    width: 640px;
}

@media screen and (max-width: 480px) {
    
    #main h2 {
        font-size: 6.95vw;
    }   
    #main h2 span {
        font-size: 4vw;
    }   
    #main h2:after {
        margin-bottom: 1vw;
    }   
    #main section {
        padding: 8vw 0;
    }

}


/* ========================================

    Prologue

======================================== */

#prologue {
    margin-top: 100px;
    text-align: center;
}
#prologue h2 {
    color: #3894cf;
    font-size: 35px;
    font-weight: bold;
}
#prologue p {
    font-size: 18px;
}

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

}

@media screen and (max-width: 480px) {
    #prologue {
        margin-top: 0;
    }
    #prologue h2 {
        font-size: 5.35vw;
    }
    #prologue p {
        text-align: left;
        font-size: 3.75vw;
    }
}


/* ========================================

    Culture

======================================== */

#culture {
    background-color: #edeef6;
}
#culture #plant {
    position: relative;
}
#culture .movie-wrap {
    margin: 20px auto 0;
    width: 88%;
    max-width: 640px;
}
#culture .movie-box {
    height: 0;
    margin-bottom: 15px;
    overflow: hidden;
    position: relative;
    padding-bottom: 56.25%;
    border: 1px solid #ccc;
}
#culture .movie-box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#culture ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    list-style-type: none;
    margin: 50px 0 0;
}
#culture ul li {
    background: #fff;
    /*display: flex;
    flex-direction: column;*/
    line-height: 1.7;
    margin: 15px 0;
    overflow: hidden;
    width: 31%;
    border-radius: 8px;
    -webkit-box-shadow: 4px 8px 10px rgb(62 84 163 / 15%);
    box-shadow: 4px 8px 10px rgb(62 84 163 / 15%);
}

#culture ul li h3 {
    margin: 10px auto 0;
    color: #083e60;
    font-size: 18px;
    font-family: "Yu Gothic", YuGothic;
    font-weight: bold;
    text-align: center;
}

/* 画像の角の装飾 
----------------------------- */
#culture ul li div {
    position: relative;
    display: block;
}
#culture ul li p {
    padding: 0 1em 1em;
}
#culture ul li div:before {
    clear: both;
    display: block;
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    opacity: 0.85;
}
#culture ul li div:after {
    clear: both;
    display: block;
    width: 60px;
    height: 60px;
    position: absolute;
    right: 0;
    bottom: 0;
    content: "";
    opacity: 0.85;
}
#culture ul li:nth-of-type(1) div:before {  
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #f8735f), color-stop(0.4, #f8735f), color-stop(0.41, #fff), color-stop(0.5, #fff), color-stop(0.51, transparent), color-stop(1, transparent));
    background: -webkit-linear-gradient(left top, #f8735f 0, #f8735f 40%, #fff 41%, #fff 50%,, transparent 51%, transparent 100%);
    background: -moz-linear-gradient(left top, #f8735f 0, #f8735f 40%, #fff 41%, #fff 50%,, transparent 51%, transparent 100%);
    background: -o-linear-gradient(left top, #f8735f 0, #f8735f 40%, #fff 41%, #fff 50%,, transparent 51%, transparent 100%);
    background: linear-gradient(to right bottom, #f8735f 0, #f8735f 40%, #fff 41%, #fff 50%,, transparent 51%, transparent 100%);   
}
#culture ul li:nth-of-type(1) div:after {
    background: -webkit-gradient(linear, right bottom, left top, color-stop(0, #f9c027), color-stop(0.4, #f9c027), color-stop(0.41, #fff), color-stop(0.5, #fff), color-stop(0.51, transparent), color-stop(1, transparent));
    background: -webkit-linear-gradient(right bottom, #f9c027 0, #f9c027 40%, #fff 41%, #fff 50%,, transparent 51%, transparent 100%);
    background: -moz-linear-gradient(right bottom, #f9c027 0, #f9c027 40%, #fff 41%, #fff 50%,, transparent 51%, transparent 100%);
    background: -o-linear-gradient(right bottom, #f9c027 0, #f9c027 40%, #fff 41%, #fff 50%,, transparent 51%, transparent 100%);
    background: linear-gradient(to left top, #f9c027 0, #f9c027 40%, #fff 41%, #fff 50%,, transparent 51%, transparent 100%);
}
#culture ul li:nth-of-type(2) div:before {
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #78c335), color-stop(0.4, #78c335), color-stop(0.41, #fff), color-stop(0.5, #fff), color-stop(0.51, transparent), color-stop(1, transparent));
    background: -webkit-linear-gradient(left top, #78c335 0, #78c335 40%, #fff 41%, #fff 50%,, transparent 51%, transparent 100%);
    background: -moz-linear-gradient(left top, #78c335 0, #78c335 40%, #fff 41%, #fff 50%,, transparent 51%, transparent 100%);
    background: -o-linear-gradient(left top, #78c335 0, #78c335 40%, #fff 41%, #fff 50%,, transparent 51%, transparent 100%);
    background: linear-gradient(to right bottom, #78c335 0, #78c335 40%, #fff 41%, #fff 50%,, transparent 51%, transparent 100%);
}
#culture ul li:nth-of-type(2) div:after {
    background: -webkit-gradient(linear, right bottom, left top, color-stop(0, #3870cf), color-stop(0.4, #3870cf), color-stop(0.41, #fff), color-stop(0.5, #fff), color-stop(0.51, transparent), color-stop(1, transparent));
    background: -webkit-linear-gradient(right bottom, #3870cf 0, #3870cf 40%, #fff 41%, #fff 50%,, transparent 51%, transparent 100%);
    background: -moz-linear-gradient(right bottom, #3870cf 0, #3870cf 40%, #fff 41%, #fff 50%,, transparent 51%, transparent 100%);
    background: -o-linear-gradient(right bottom, #3870cf 0, #3870cf 40%, #fff 41%, #fff 50%,, transparent 51%, transparent 100%);
    background: linear-gradient(to left top, #3870cf 0, #3870cf 40%, #fff 41%, #fff 50%,, transparent 51%, transparent 100%);
}
#culture ul li:nth-of-type(3) div:before {
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #7bbdf9), color-stop(0.4, #7bbdf9), color-stop(0.41, #fff), color-stop(0.5, #fff), color-stop(0.51, transparent), color-stop(1, transparent));
    background: -webkit-linear-gradient(left top, #7bbdf9 0, #7bbdf9 40%, #fff 41%, #fff 50%,, transparent 51%, transparent 100%);
    background: -moz-linear-gradient(left top, #7bbdf9 0, #7bbdf9 40%, #fff 41%, #fff 50%,, transparent 51%, transparent 100%);
    background: -o-linear-gradient(left top, #7bbdf9 0, #7bbdf9 40%, #fff 41%, #fff 50%,, transparent 51%, transparent 100%);
    background: linear-gradient(to right bottom, #7bbdf9 0, #7bbdf9 40%, #fff 41%, #fff 50%,, transparent 51%, transparent 100%);
}
#culture ul li:nth-of-type(3) div:after {
    background: -webkit-gradient(linear, right bottom, left top, color-stop(0, #f8735f), color-stop(0.4, #f8735f), color-stop(0.41, #fff), color-stop(0.5, #fff), color-stop(0.51, transparent), color-stop(1, transparent));
    background: -webkit-linear-gradient(right bottom, #f8735f 0, #f8735f 40%, #fff 41%, #fff 50%,, transparent 51%, transparent 100%);
    background: -moz-linear-gradient(right bottom, #f8735f 0, #f8735f 40%, #fff 41%, #fff 50%,, transparent 51%, transparent 100%);
    background: -o-linear-gradient(right bottom, #f8735f 0, #f8735f 40%, #fff 41%, #fff 50%,, transparent 51%, transparent 100%);
    background: linear-gradient(to left top, #f8735f 0, #f8735f 40%, #fff 41%, #fff 50%,, transparent 51%, transparent 100%);
}

/*----------------------------*/

@media screen and (max-width: 768px) {
    
    #culture ul {
        margin: 15px 0;
    }   
    #culture ul li {
        width: 100%;
        margin: 0 auto 35px;
    }   
    #culture ul li:nth-child(2) {
        margin: 0 auto 35px;
    }   
    #culture ul li:last-child {
        margin-bottom: 0;
    }
    #culture ul li h2 {
        font-size: 18px;
    }
    #culture #plant:before {
        width: 25%;
        top: 15px;
    }
    #culture #plant:after {
        width: 25%;
        top: 15px;
    }

}


/* ========================================

    panel_navi

======================================== */

#panel_navi.pc {
	display: block;
}
#panel_navi.sp {
	display: none;
}
#panel_navi.pc ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    list-style-type: none;
    margin: 20px 0 0;
}
#panel_navi.pc ul li {
    margin: 0px 0 3%;
    width: 31%;
}

@media screen and (max-width: 768px) {
    
    #panel_navi.pc {
	display: none;
    }
    #panel_navi.sp {
	display: block;
    }
    #panel_navi.sp ul {
	display: inline-block;
	list-style-type: none;
	/*margin: 20px 0 0;*/
    }
    #panel_navi.sp ul li {
	margin: 0px 0 3%;
    }

}


/* ========================================

    About

======================================== */

#about {
    background: url("./recruit2018-bg_about.png");
}
#about h2,
#about h2 span {
    color: #fff;
}
#about h2:after {
    background-color: #fff;
}
#about ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#about ul li {
    padding: 40px 15px;
    text-align: center;
    background: #fff;
    box-shadow: 5px 5px 0 rgba(0,0,0,.2);
    display: flex;
    flex-direction: column;
    margin: 20px 0;
    width: 48%;
    border-radius: 8px;
}
#about ul li.good-job {
    display: block;
    width: 100%;
    background: url("./recruit2023-about_05.jpg")  #fff center left 20px no-repeat;
    padding: 60px 15px 80px 48%;
    background-size: 44%;
}
#about h3 {
    margin: 15px auto;
    color: #1a3159;
    font-size: 28px;
    line-height: 1.4;
    font-weight: bold;
}
#about h3 span {
    display: block;
    color: #b8b8b8;
    font-size: 13px;
}

.about_list02_img{
    width: 415px;
}

@media screen and (max-width: 768px) {
    
    #about ul li {
        width: 100%;
        margin: 0 0 25px 0 !important;
    }   
    #about h2 {
        margin: 0 auto 25px;
        font-size: 24px;
    }
    #about h2 span {
        font-size: 27px;
    }   
    #about h3 {
        margin: 10px auto;
        font-size: 18px;
    }
    #about p {
        text-align: left;
    }
    #about ul li.good-job {
        background-position: top 40px center;
        background-size: 90%;
        padding: 55vw 15px 40px;
    }

}

@media screen and (max-width: 480px) {
    
    #about h2 {
        margin: 0 auto 35px;
        font-size: 6.95vw;
    }
    #about h2 span {
        font-size: 4vw;
    }   

}


/* ========================================

    WORKS

======================================== */

#works ul {
    font-size: 0;
}
#works ul li {
    display: inline-block;
    margin: 35px 6% 35px 0;
    width: 29.3%;
    vertical-align: top;
}
#works ul li:nth-child(3),
#works ul li:nth-child(6),
#works ul li:nth-child(9) {
    margin-right: 0;
}
#works ul li h3 {
    margin: 20px auto;
    color: #083e60;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}
#works ul li img {
    width: 100%; height: auto;
}


/* ========================================

    ACTIVITY

======================================== */

#activity {
    background: url(./recruit2018-bg_faq.png);
    padding-bottom: 0 !important;
    text-align: center;
    /*margin-top: 100px;*/
}
#activity .active_record {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    list-style-type: none;
    margin: 15px 0 60px;
}
#activity .active_record li {
    display: flex;
    flex-direction: column;
    line-height: 1.7;
    margin: 15px 0 ;
    overflow: hidden;
    width: 31%;
    border-radius: 8px;
    -webkit-box-shadow: 0 5px 20px rgb(94 135 178 / 40%);
    box-shadow: 0 5px 20px rgb(94 135 178 / 40%);
}
#activity .active_record li p {
    margin: 0.7em 0;
    font-size: clamp(14px, 1.1vw, 16px);
}

#activity .active_record li p b {
    display: block;
    text-align: center;
} 

@media screen and (max-width: 768px) {
    
#activity .active_record li {
    width: 48%;
}

}

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

    #activity {
       margin-top: 0;
    }
    #activity p {
        text-align: left;
    }
    #activity .active_record li p {
        font-size: 3.47vw;
        padding: 0 0.3em;
    }

}


/* ========================================

    Interview動画

======================================== */

#interview_movie  {
    background: url(./recruit2018-bg_interview.png);
    padding-bottom: 20px;
}
#interview_movie ul  {
    /*margin-top: -3%;*/
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /*justify-content: space-around;*/
}
    #interview_movie p {
    text-align: center;
}
    #interview_movie ul li {
    background: #fff;
    margin-top: 4%;
    padding-bottom: 1em;
    width: 48%;
    flex-direction: column;
}
    #interview_movie ul li dl {
    margin: 1em;
}
    #interview_movie ul li p {
    margin: 0.7em 1em 0;
    font-size: 93%;
    line-height: 1.5;
    text-align: left;
}
    #interview_movie ul li p b {
    font-size: 135%;
}

#interview_movie .movieBox_frame  {
    overflow: hidden;
    width: 100%;
}
#interview_movie .movieBox {
    height: 0;
    /*margin-top: 25px;*/
    overflow: hidden;
    position: relative;
    padding-bottom: 56.25%;
    border: 1px solid #ccc;
}
#interview_movie .movieBox iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media screen and (max-width: 768px) {
    
#interview_movie ul {
    margin: 0 auto;
    width: 94%;
}
#interview_movie ul li {
    width: 100%;
}

}


/* ========================================

    Interview

======================================== */

#interview {
    background: url("./recruit2018-bg_interview.png");
    padding-bottom: 20px;
}
#interview ul li:nth-child(odd) {
    clear: both;
}
#interview ul li:nth-child(5) .self_intro {
    padding: 2em 1em;
}
#interview div {
    position: relative;
    overflow: hidden;
}
#interview h3 {
    font-size: 1.13rem;
    margin: 1em 0 0.8em;
    line-height: 1.7;
}
#interview div .name {
    position: absolute;
    display: block;
    width: 55%;
    min-height: 100%;
    margin: 0 -50px 0 0;
    padding: 35% 50px 0 10px;
    right: 0;
    bottom: 0;
    color: #fff;
    text-align: right;
    line-height: 1.5;
    -webkit-transform: skew(-15deg, 0deg);
    transform: skew(-15deg, 0deg);
}
#interview div .self_intro {
    background: #fff;
    padding: 1em;
    min-height: 3em;
}

#interview ul li {
    width: 48%;
    float: left;
    margin: 0 auto 45px;
}
#interview ul li:nth-child(odd)  {
    margin-right: 2%;
}
#interview ul li:nth-child(even) {
    margin-left: 2%;
}

/* 名前の背景色
----------------------------- */
#int01 .name {
    background: rgba(56,112,207,.75);
}
#int02 .name {
    background: rgba(248,115,95,.75);
}
#int03 .name {
    background: rgba(120,195,53,.75);
}
#int04 .name {
    background: rgba(249,192,39,.75);
}
#int05 .name {
    background: rgba(55,170,195,.75);
}
#int06 .name {
    background: rgba(250,65,130,.75);
}
/*----------------------------*/

#interview div .name h3,
#interview div .name p {
        -webkit-transform: skew(15deg, 0deg);
    transform: skew(15deg, 0deg);
}   
#interview div .name h3 {
    margin: 0 10px 10px;
    font-size: 35px;
    font-weight: bold;
}
#interview div .name h3 span {
    display: block;
    font-size: 15px;
    font-family: "Fjalla One", sans-serif;
}


/* テキスト下線
----------------------------- */
.marker {
    color: #1387ce;
    font-weight: bold;
    background: linear-gradient(transparent 40%, #fffb93 40%);
}
/*----------------------------*/

@media screen and (max-width: 768px) {
    
    #interview ul li {
        width: 100%;
        margin: 0 0 45px !important;
        padding: 0 10px;
    }
    #interview ul li:last-child {
        margin-bottom: 0 !important;
    }       
    #interview ul li div#int01,
    #interview ul li div#int02,
    #interview ul li div#int03,
    #interview ul li div#int04 {
        width: 100%;
    }   
    #interview div .name {
        width: 55%;
        margin: 0 -70px 0 0;
        padding: 35% 70px 0 0;
    }   
    #interview div .name h3 {
        font-size: 18px;
        margin: 0 15px 5px;
    }   

}

@media screen and (max-width: 480px) {
    
    #interview div#int01,
    #interview div#int02,
    #interview div#int03,
    #interview div#int04 {
        margin: 0 auto 10px;
    }   
    #interview div .name {
        width: 70%;
        padding: 25% 70px 0 0;
    }   
    #interview div .name h3 {
        font-size: 17px;
        margin: 0 15px 5px;
    }

}


/* ========================================

    Faq

======================================== */

#faq {
    padding-bottom: 0 !important;
    background: url("./recruit2018-bg_faq.png");
}
#faq .wrap {
    position: relative;
    overflow: hidden;
}
#faq ul li h3 {
    margin: 0 auto 15px;
    color: #083e60;
    font-size: 18px;
    font-weight: bold;
}
#faq ul {
    font-size: 0;
    /*background: url("./recruit2023-fag_catch.png") right bottom no-repeat;*/
    background-size: 28%;
    padding-bottom: 25px;
}
#faq ul li {
    display: inline-block;
    margin: 35px 6% 35px 0;
    width: 29.3%;
    vertical-align: top;
}
#faq ul li:nth-child(3),
#faq ul li:nth-child(6),
#faq ul li:nth-child(9),
#faq ul li:nth-child(12) {
    margin-right: 0;
}
#faq ul li img {
    width: 100%; height: auto;
}

/* 質問見出しのボックス 
----------------------------- */
#faq ul li h3 span {
    display: inline-block;
    margin: 0 10px 0 0;
    padding: 5px 10px;
    color: #fff;
    font-family: "Fjalla One", sans-serif;
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0, #0a4e75), color-stop(0.5, #0a4e75), color-stop(0.51, #084469), color-stop(1, #084469));
    background: -webkit-linear-gradient(left bottom, #0a4e75 0, #0a4e75 50%, #084469 51%, #084469 100%);
    background: -moz-linear-gradient(left bottom, #0a4e75 0, #0a4e75 50%, #084469 51%, #084469 100%);
    background: -o-linear-gradient(left bottom, #0a4e75 0, #0a4e75 50%, #084469 51%, #084469 100%);
    background: linear-gradient(to right top, #0a4e75 0, #0a4e75 50%, #084469 51%, #084469 100%);
}
/*----------------------------*/
#faq ul li p {
    display: block;
    padding: 40px;
}
.bgwrap {
    position: absolute;
    bottom: 0;
    right: 0;
}

@media screen and (max-width: 768px) {
            
    #faq .wrap {
        background-image: none !important;
    }
    #faq ul {
    background-size: 50%;
    padding-bottom:/*88vw*/ 0 !important;
    background-position: center bottom;
    }
    #faq ul li {
        display: block;
        margin: 0 auto 35px !important;
        padding: 0px 6vw;
        width: 88vw;
    }
    .bgwrap {
        position: relative;
        display: block;
        margin: 25px auto 0;
    }
}

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

    #faq ul li p {
        padding: 10px;
    }   
    
    #faq ul li:last-child {
        margin-bottom: 0;
    }   
    #faq ul li h3 {
        font-size: 4.8vw;
    }   
    #faq ul li h3 span {
        padding: 3px 8px;
    }
    #faq ul li img {
        width: 80%; height: auto;
    }
}

/*.fag_catch{
    width: 28%;
}
@media screen and (max-width: 480px) {  

	.fag_catch{
	    width: 44%;
	}
}*/


/* ========================================

    Business

======================================== */

#business ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#business ul li {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    width: 31%;
    margin: 5% 0 0 0;
    padding-bottom: 20px;
    overflow: hidden;
    width: 31%;
    border-radius: 8px;
    -webkit-box-shadow: 0 5px 20px rgb(94 135 178 / 40%);
    box-shadow: 0 5px 20px rgb(94 135 178 / 40%);
}
#business ul li:last-child {
    box-shadow: none;
} 
#business ul img {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
}
#business .cp_subttl {
    text-align: center;
    display: block;
    margin-bottom: 0.5em;
}
#business .cp_name {
    color: #2980ac;
    display: block;
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 1em;
}
#business ul li p {
    font-size: clamp(14px, 1.1vw, 17px);
    letter-spacing: 0.07em;
    line-height: 1.7;
    padding: 0 1em 1em;
}
#business .btn_area {
    margin-top: auto;
    text-align: center;
}
#business a.btn {
    background: #fff;
    color: #2980ac;
    display: inline-block;
    max-width: 390px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    border-radius: 50px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    letter-spacing: 0.15em;
    border: 2px solid #2980ac;
    min-width: 150px;
    padding: 0.2em 0 0.2em 0.4em;
    text-decoration: none;
}
#business a.btn:hover {
    text-decoration: underline;
}
#business a.btn span {
    background: url("./btn_arrow01.png") right center no-repeat;
    background-size: 10px auto;
    padding-right: 15px;
}

@media screen and (max-width: 768px) {
    
#business ul li {
    width: 48%;
}

}

@media screen and (max-width: 480px) {
	#business ul li p {
	    display: none;
	}
	#business .cp_name {
	    font-size:3.74vw;
	}
}


/* ========================================

   TOP MESSAGE

======================================== */

    #message {
        background: url("./recruit2018-bg_faq.png") center center repeat;
    }
    #message h3 {
        font-size: 1.25rem;
        font-weight: bold;
        line-height: 2.3;
        margin-top: 1em;

    }
    #message .messageLeft {
       /* display: inline-block;*/
        float: left;
        margin-right: 4%;
        width: 57%;
    }
    #message .messageRight {
       float: right;
       vertical-align: top;
       width: 38%;
    }
    #message .messageRight div {
       border-radius: 8px;
       overflow: hidden;
    }
    #message .t3iYD {
       width: 48%;
       display: inline-block;
    }
    #message .t3iYD span {
       display: block;
       font-weight: bold;
       line-height: 3;
       text-align: center;
    }
    #message .movieBox_frame {
       width: 48%;
       float: right;
    }
    #message .movieBox {
       height: 0;
       /*margin-top: 25px;*/
       overflow: hidden;
       position: relative;
       padding-bottom: 56.25%;
       border: 1px solid #ccc;
    }
    #message .movieBox iframe {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
    }
    #message .messageText {
        margin-bottom: 1.5em;
        text-align: justify;
        line-height: 1.7;
    }
    #message .messageText span {
        font-weight: bold;
        font-size: 1.5rem;
        display: inline-block;
        margin-top: 1em;
    }

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

    #message .messageLeft,
    #message .messageRight,
    #message .t3iYD,
    #message .movieBox_frame {
        display: block;
        margin: 0 auto;
        width: 94%;
        float: none;
    }
    #message h3,
    #message .messageText span {
        font-size: 4.8vw;
    }
}


/* ========================================

    Event

======================================== */

#event {
    /*background: url("./recruit2018-bg_event.png");*/
    background: url(./recruit2018-bg_interview.png);
    border-top: 1px #efefef solid;
    border-bottom: 1px #efefef solid;
}
#event .photo {
    margin: 0 auto;
    max-width: 960px;
}
#event img {
    width: 100%;
    height: auto;
}
#event .photo.first img {
    border-radius: 10px 10px 0 0;
}
#event .photo.third img {
    border-radius: 0 0 10px 10px;
}
@media screen and (max-width: 480px) {
    
#event img {
    width: 94%;
    height: auto;
}

}


/* ========================================

    Office

======================================== */

#office .officePhoto {
    display: flex;
    gap: 20px;
    margin: 5% 0 1em;
}
#office p  strong {
    display: block;
    font-size: 20px;
    color: #2980ac;
    line-height: 1.6;
}

@media screen and (max-width: 768px) {
    
    /* #office .officePhoto {
        display: block;
	width: 100%;
    } */
    #office p  strong {
        font-size: 16px;
}

}

/* ========================================

    Benefit

======================================== */

#benefit table {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
}
#benefit table tr {
    display: block;
    padding: 20px;  
    border-top: 2px #ccc dotted;
}
#benefit table tr th {
    width: 240px;
    color: #73b4dc;
    text-align: left;
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    
    #benefit table tr {
        padding: 10px;
    }   
    #benefit table tr th,
    #benefit table tr td {
        display: block;
        width: 100%;
        text-align: left;
    }

}


/* ========================================

    Entry

======================================== */

#entry {
    padding: 45px 0;
    color: #fff;        
    text-align: center;
    background: #1187ce;
}
#entry h2 {
    font-size: 32px;
    font-weight: bold;
    line-height: 1.6;
}
#entry p {
    margin: 5px auto 25px;
}
#entry a {
    display: inline-block;
    width: 30%;
    max-width: 260px;
    margin: 0 5px 35px;
    padding: 1em 0;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    border: 3px solid;
    border-radius: 11px;
}
#entry a:hover {    
    color: #1187ce;
    background: #fff;
}

@media screen and (max-width: 480px) {
    
    #entry {
        padding: 25px 0;
    }   
    #entry h2 {
        font-size: 23px;
        line-height: 1.4;
    }   
    #entry p {
        margin: 5px auto 15px;
        line-height: 1.6;
    }   
    #entry a {
        margin: 20px auto 0;
        width: 100%;
    }

}


/* ========================================

    Copyright

======================================== */

#copyright {
    color: #fff;
    font-size: 12px;
    text-align: center;
    margin: 40px auto 0 !important;
}