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

/*-- reset ----------------------*/
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
}

@media screen and (max-width:768px) {
    section {
        max-width:768px;
        width:100%;
        overflow-x: hidden;
    }
}

@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd, div, section, main {
  padding:0;
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
  font-family: "Noto Sans JP",sans-serif;
  font-weight: 500;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img {
  vertical-align: top;
  display: block;
  border: 0;
  margin:0;
  padding: 0;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

@media screen and (min-width:769px) { 
    .pc-only { display: block; }
    .sp-only { display: none; }
    
    .anchor {
        margin-top: -165px;
        padding-top: 165px;
    }
}

@media screen and (min-width:769px) and ( max-width:1079px) {
    .anchor {
        margin-top: -15.278vw;
        padding-top: 15.278vw;
    }    
}

@media screen and (max-width:768px) {
    .sp-only { display: block; }
    .pc-only { display: none; }
    img { width: 100%; height: auto; }
    
    .anchor {
        margin-top: -36.5vw;
        padding-top: 36.5vw;
    }
}

/*-- スクロールで追従ボタン表示 ----- */
.floating{
    position: fixed;
    right: 20px;
    bottom: 30px;
    cursor: pointer;
    transition: .7s;
    z-index:999;
    opacity: 0;
    visibility: hidden;
}

/*このクラスが付与されると表示する*/
.f-active{
    opacity: 1;
    visibility: visible;
}

@media screen and (max-width:768px) {
    .floating{
        width:21%;
        height: auto;
    }    
}

/*-- スクロールでイラストがズームイン ----- */
.zoom-target {
    transition: transform 1.5s ease;
    transform-origin: center center;
    transform: scale(0);
}

.fv_zoom {
    transition: transform 2s ease;
    transform-origin: center center;
    transform: scale(0);
}

.zoom-target.zoomed,
.fv_zoom.zoomed {
    transform: scale(1);
}

/*-- スクロールでイラストが回転 ----- */
.rotate {
  transform: rotate(360deg);
  transition: all 1s;
}

/*-- header ------------------------- */
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    background: #fff;
}

@media screen and (min-width:769px) {
    .tokyo-gas {
        max-width: 1080px;
        margin:15px auto;
        text-align: right;
    }

    .tokyo-gas img {
        margin:0 0 0 auto;
    }

    .header_info {
        width:100%;
        max-width: 1080px;
        margin:20px auto 0;
        display: -webkit-flex;
        display: flex;
        flex-wrap: wrap;
    }

    .header_info h1 {
        width:375px;
    }

    .header_info .school {
        width:300px;
    }
    
    .navigation_box {
        width: 100%;
        background: #00ccff;
    }

    .navigation {
        max-width:980px;
        margin:auto;
        display: -webkit-flex;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding:10px 0;            
    }

    .navigation a {
        box-sizing: border-box;
        display: block;
        width: 190px;
        height: 30px;
        margin-top:8px;
    }    

    .navigation a:last-child {
        width: 171px;
        height: 46px;
        margin-top:0;
    }    
    
    .navigation a.nav01 {
        background: url("../images/nav01.png") center center no-repeat;
        background-size: 100%;
    }        

    .navigation a.nav01:hover,
    .navigation a.nav01.active {
        background: url("../images/nav01_on.png") center center no-repeat;
        background-size: 100%;
    }

    .navigation a.nav02 {
        background: url("../images/nav02.png") center center no-repeat;
        background-size: 100%;
    }        

    .navigation a.nav02:hover,
    .navigation a.nav02.active {
        background: url("../images/nav02_on.png") center center no-repeat;
        background-size: 100%;
    }

    .navigation a.nav03 {
        background: url("../images/nav03.png") center center no-repeat;
        background-size: 100%;
    }        

    .navigation a.nav03:hover,
    .navigation a.nav03.active {
        background: url("../images/nav03_on.png") center center no-repeat;
        background-size: 100%;
    }

    .navigation a.nav04 {
        background: url("../images/nav04.png") center center no-repeat;
        background-size: 100%;
    }        

    .navigation a.nav04:hover,
    .navigation a.nav04.active {
        background: url("../images/nav04_on.png") center center no-repeat;
        background-size: 100%;
    }
}

@media screen and (min-width:769px) and ( max-width:1079px) {
    .tokyo-gas {
        padding-right:20px;
    }
    
    .header_info {
        max-width: 1079px;
        margin:20px auto 0;
    }

    .header_info h1 {
        width:34.754vw;
    }

    .header_info .school {
        width:27.804vw;
    }
    
    .header_info h1 img {
        width:27.433vw;
        height: auto;
    }

    .header_info .school img {
        width:27.804vw;
        height: auto;
    }
    
    .navigation { padding:0.927vw 0; max-width: 90.825vw; }
    
    .navigation a {
        width: 17.609vw;
        height: 2.78vw;
        margin-top:0.741vw;
    }    

    .navigation a:last-child {
        width: 15.848vw;
        height: auto;
    }
    
    .navigation a:last-child img {
        width: 100%;
        height: auto;
    }     
}

@media screen and (max-width:768px) {
    .tokyo-gas {
        max-width: 768px;
        width:58.59375%;
        margin:0 0 0 auto;
        padding:3.906vw 2.604vw 3.906vw 0;
    }

    .sp_header_info {
        width:100%;
        max-width: 768px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: inherit;
        position: relative;
        padding:0 3.255vw 2.5% 3.906vw;
        box-sizing: border-box;
    }

    .sp_header_info h1 { width:67.96875%; }
    
    .sp_header_nav {
        position: absolute;
        right: 0;
        left: 0;
        top: 26vw;
        width: 100%;
        height: 100vh;
        transform: translateX(100%);
        background-color: #00ccff;
        transition: ease .4s;
    }

    .nav-items {
        position: absolute;
        top: 5vw;
        left: 2%;
        width: 96%;
        list-style: none;
    }

    .nav-items__item a {
        background: #fff;
        border-radius: 80px;
        color:#00ccff;
        width: 100%;
        display: block;
        text-align: center;
        font-size: 4.2vw;
        margin-bottom: 2.604vw;
        text-decoration: none;
        padding:1.309vw 0;
    }

    .nav-items__item:last-child a {
        margin-bottom: 0;
    }

    /* ハンバーガーメニュー */
    .header__hamburger {
        width: 8vw;
        height: 100%;
        cursor: pointer;
    }

    .hamburger {
        width:10vw;
        height: 10vw;
        background-color: #003775;
        border-radius: 100%;
        padding:1.309vw;
        border-color: transparent;
        z-index: 9999;
    }

    .hamburger span {
        width: 100%;
        height: 2px;
        border-radius: 80px;
        background-color: #fff;
        position: relative;
        transition: ease .4s;
        display: block;
    }

    .hamburger span:nth-child(1) { top: 0; }
    .hamburger span:nth-child(2) { margin: 7px 0; }
    .hamburger span:nth-child(3) { top: 0; }

    /* ハンバーガーメニュークリック後のスタイル */
    .sp_header_nav.active { transform: translateX(0); }
    .hamburger.active span { height: 2px; }
    
    .hamburger.active span:nth-child(1) {
        top: 9px;
        transform: rotate(45deg);
    }
    .hamburger.active span:nth-child(2) { opacity: 0; }

    .hamburger.active span:nth-child(3) {
        top: -9px;
        transform: rotate(-45deg);
    } 
    
    .sp_header_info2 {
        width:100%;
        max-width: 768px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: inherit;
        position: relative;
    }
}

/*-- fv ----------------------------- */
.fv {
    background: url("../images/fv_bg.png") center top repeat-x;
    width:100%;
    margin-top:201px;
}

.fv_inner {
    max-width: 920px;
    margin:0 auto;
    height: 1277px;
    padding:70px 0 0 0;
    position: relative;
}

.fv_chara {
    position:absolute;
    top:340px;
    left:13%;
    transition-delay: 1s;
}

.fv_ico01 {
    position:absolute;
    top:210px;
    left:145px;
    transition-delay: 2s;
}

.fv_ico02 {
    position:absolute;
    bottom:160px;
    right:0;
    transition-delay: 3s;
}

@media screen and (min-width:769px) and ( max-width:1079px) {
    .fv { margin-top:12.975vw; }

    .fv_inner {
        width:92%;
        height: 115vw;
        padding:10vw 0 0 0;
    }

    .fv_inner h2 img {
        width:92%;
        margin:0 auto;
        height: auto;
    }
    
    .fv_chara {
        width:70%;
        height: auto;
        margin:0 auto;
        top:34vw;
        left:15%;
    }
    
    .fv_ico01 {
        width:18.443vw;
        height: auto;
        top:22.5vw;
        left:16.5vw;
    }

    .fv_ico02 {
        width:18.443vw;
        height: auto;
        bottom:10vw;
        right:4vw;
    }
}

@media screen and (max-width:768px) {
    .fv {
        background: url("../images/fv_bg_sp.png") center top no-repeat;
        background-size: 100%;
        width:100%;
        margin-top:37vw;
    }

    .fv_inner {
        max-width: 728px;
        width:92%;
        height: 123vw;
        padding:9.115vw 0 0 0;
    }
    .fv_chara { top:37vw; width:77%; }

    .fv_ico01 {
        top:20vw;
        left:14vw;
        width:24.5vw;
    }

    .fv_ico02 {
        bottom:9vw;
        width:24.5vw;
        right:-1%;
    }
}

/*-- sv ----------------------------- */
.sv {
    background: url("../images/sv_bg.png") center bottom repeat-x #ccffff;
    width:100%;
}

.sv_inner {
    max-width: 970px;
    margin:0 auto;
    height: 1024px;
    position: relative;
    padding-top:70px;
}

.sv_person {
    position: absolute;
    width:745px;
    bottom:10px;
    left: 12%;
}

.sv02 {
    background: url("../images/sv_bg02.png") center top repeat;
    width:100%;
}

.sv_inner02 {
    max-width: 1027px;
    margin:0 auto;
    position: relative;
    padding:70px 0;
}

.sv_ill {
    position: absolute;
    top:230px;
    left:60px;
}

.sv_ill2 {
    position: absolute;
    top:230px;
    right:30px;
}

.sv_logo {
    width:47%;
    text-align: center;
    position: absolute;
    bottom:140px;
    left:26.5%;   
}

@media screen and (min-width:769px) and ( max-width:1079px) {
    .sv h2 img {
        width:89.898vw;
        height: auto;
        margin: auto;
    }
    
    .sv_inner {
        width:89.898vw;
        height: auto;
        padding-top:6.487vw;
    }

    .sv_person {
        width:69.045vw;
        height: auto;
        bottom:0.927vw;
        left: 11vw;
    }

    .sv_inner02 { padding:6.487vw 0; }
    .sv_inner02 .about_img {
        width:95.181vw;
        height: auto;
        margin: auto;
    }    

    .sv_ill {
        position: absolute;
        top:21.316vw;
        left:5vw;
    }

    .sv_ill2 {
        position: absolute;
        top:21.316vw;
        right:2vw;
    }
    .sv_logo { height: auto; bottom:12.975vw; }    
}

@media screen and (max-width:768px) {
    .sv {
        background: url("../images/sv_bg.png") center bottom repeat-x #ccffff;
        background-size: 100%;
    }
    
    .sv_inner {
        max-width: 700px;
        width:92%;
        height: auto;
        padding-top:9.115vw;
    }

    .sv_person {
        position: absolute;
        width:71vw;
        bottom:0.5vw; 
    }

    .sv_inner02 {
        width:92%;
        max-width: 700px;
        padding:9.115vw 0;
    }

    .sv_ill {
        top:21vw;
        left:0;
        width:23vw;
    }

    .sv_ill2 {
        top:21vw;
        right:-2%;
        width: 23vw;
    }
    
    .sv_logo { height: auto; bottom:15vw; }        
}

/*-- flow ----------------------------- */
.flow {
    background: url("../images/flow_bg.png") center top repeat;
    width:100%;
}

.flow_inner {
    width: 920px;
    margin:0 auto;
    position: relative;
    padding:70px 0;
}

.flow_ill01 {
    position: absolute;
    top:260px;
    right:80px;
}

.flow_ill02 {
    position: absolute;
    top:500px;
    left:80px;
}

.flow_ill03 {
    position: absolute;
    top:795px;
    right:60px;
}

.flow_ill04 {
    position: absolute;
    bottom:600px;
    left:60px;
}

.flow_ill05 {
    position: absolute;
    bottom:500px;
    right:35px;
}

.flow_ill06 {
    position: absolute;
    bottom:120px;
    left:45px;
}

.flow_ill07 {
    position: absolute;
    bottom:125px;
    right:50px;
}

@media screen and (min-width:769px) and ( max-width:1079px) {
    .flow_inner { padding:6.487vw 0; width: 96%; }
    .flow_inner h2 img {
        width:92%;
        height: auto;
        margin:auto;
    }
    
    .flow_ill01 {
        width:21.223vw;
        height: auto;
        top:24.096vw;
        right:12vw;
    }

    .flow_ill02 {
        width:22.428vw;
        top:46.339vw;
        left:12vw;
        height: auto;
    }

    .flow_ill03 {
        width:25.672vw;
        top:73.679vw;
        right:10vw;
        height: auto;
    }

    .flow_ill04 {
        width:25.672vw;
        bottom:57vw;
        left:10vw;
        height: auto;
    }

    .flow_ill05 {
        width:27.804vw;
        bottom:46.339vw;
        right:8vw;
        height: auto;
    }

    .flow_ill06 {
        width:11.121vw;
        bottom:11.121vw;
        left:8vw;
        height: auto;
    }

    .flow_ill07 {
        width:11.121vw;
        bottom:11.585vw;
        right:8vw;
        height: auto;
    }    
}

@media screen and (max-width:768px) {
    .flow_inner {
        max-width: 644px;
        width:86%;
        padding:9.115vw 0;
    }

    .flow_ill01 {
        width:20.833vw;
        height:auto;
        top:25vw;
        right:7.5vw;
    }

    .flow_ill02 {
        width:22.786vw;
        height:auto;
        top:53.104vw;
        left:6vw;
    }

    .flow_ill03 {
        width:24.74vw;
        height:auto;
        top:85.516vw;
        right:6vw;
    }

    .flow_ill04 {
        width:27.391vw;
        height:auto;
        bottom:67vw;
        left:4vw;
    }

    .flow_ill05 {
        width:27.344vw;
        height:auto;
        bottom:52.104vw;
        right:3.5vw;
    }

    .flow_ill06 {
        width:10.938vw;
        height:auto;
        bottom:14vw;
        left:4vw;
    }

    .flow_ill07 {
        width:10.938vw;
        height:auto;
        bottom:14vw;
        right:4vw;
    }
}

/*-- voice ----------------------------- */
.voice {
    background: url("../images/voice_bg.png") center top repeat;
    width:100%;
}

.voice_inner {
    max-width: 920px;
    margin:0 auto;
    position: relative;
    padding:70px 0;
}

.voice_inner h2 {
    max-width: 834px;
    margin:0 auto;
}

.voice_box {
    width:100%;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top:20px;
}
.person_box { width:45%; }
.voice .accordion { padding-bottom:70px; }
.voice .accordion-content { display: none; }

.voice .accordion_bg {
    background: #fff;
    border-radius: 12px;
    border:2px solid #99ffff;
    margin-top:50px;
}

.voice .accordion_bg.pink_box { border:2px solid #ff99cc; }

.voice .accordion-header {
    padding: 20px 0 90px;
    cursor: pointer;
    position: relative;
    text-align: center;
}

.voice .accordion-header img { margin:auto; }

.voice .accordion-header::after{
    position:absolute;
    content:'';
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    bottom:20px;
    width:50px;
    height:50px;
    background: url("../images/plus01.png") left top no-repeat;
    background-size: 100%;
}

.voice .accordion-header.active::after{
    background: url("../images/minus01.png") left top no-repeat;
    background-size: 100%;
    transition: .7s ease;
}

.voice .accordion-header.pink_ico::after{
    background: url("../images/plus02.png") left top no-repeat;
    background-size: 100%;
}

.voice .accordion-header.pink_ico.active::after{
    background: url("../images/minus02.png") left top no-repeat;
    background-size: 100%;
}

.voice .accordion-content {
    border-radius: 0px 0px 10px 10px;
    background: #e6ffff;
}

.voice .accordion-content.pink_bg {
    border-radius: 0px 0px 10px 10px;
    background: #fff0ff;
}

.voice .accordion-content p {
    position: relative;
    line-height: 2.0;
    font-size:17px;
    padding:30px 30px 60px;
}

@media screen and (min-width:769px) and ( max-width:1079px) {
    .voice_inner { padding:6.487vw 0; }

    .voice_inner h2 img {
        width: 77.294vw;
        height: auto;
        margin: auto;
    }

    .voice_box { margin:20px auto 0; width: 92%; }
    .voice .accordion { padding-bottom:6.487vw; }
    .voice .accordion-content { display: none; }
    .person_box { width:48%; }

    .voice .accordion_bg {
        margin-top:4.634vw;
        padding:2vw 0 0 0;
    }
    .voice .accordion-header { padding: 1.854vw 0 90px; }
    .voice .accordion-header img { width:90%; height: auto; margin:auto; }
    .voice .accordion-content p { padding:20px 15px 40px; }
}

@media screen and (max-width:768px) {
    .voice_inner {
        max-width: 700px;
        padding:10vw 0 15vw;
    }

    .voice_inner h2 { width: 92%; }

    .voice_box {
        width:92%;
        margin:2vw auto 0;
    }
    .person_box { width:100%; }
    .voice .accordion { padding-bottom:14.458vw; }
    .voice .accordion_bg { margin-top:9.639vw; }
    .voice .accordion-header { padding: 4.819vw 0 21.687vw; }
    .voice .accordion-header img { width:90%; height: auto; }

    .voice .accordion-header::after{
        bottom:4.819vw;
        width:12.048vw;
        height:12.048vw;
    }

    .voice .accordion-content p {
        line-height: 1.6;
        font-size:16px;
        padding:7.229vw 7.229vw 10vw;
    }
}

/*-- faq ----------------------------- */
.faq {
    background: url("../images/faq_bg.png") center top repeat;
    width:100%;
}

.faq_inner {
    max-width: 920px;
    margin:0 auto;
    position: relative;
    padding:70px 0 150px;
}

.faq_inner h2 img {
    width: 48%;
    height: auto;
    margin:0 0 0 36%;
}

.faq .accordion { padding-bottom:70px; }
.faq .accordion-content { display: none; }

.faq .accordion_bg {
    background: #0066cc;
    border-radius: 12px;
    border:2px solid #0066cc;
    margin-top:30px;
}

.faq .accordion-header {
    padding: 20px 45px 0 20px;
    transition: background .3s ease;
    cursor: pointer;
    position: relative;
    height: 80px;
    font-size:25px;
    color:#fff;
}

.faq .accordion-header::before,
.faq .accordion-header::after {
    position:absolute;
    content:'';
    top:1px;
    right:20px;
    bottom:0;
    width:20px;
    height:4px;
    margin:auto;
    background:#fff;
}

.faq .accordion-header::after {
    transform:rotate(-90deg);
    transition:transform 0.3s;
}

.faq .accordion-header.active::after {transform:rotate(0deg);}

.faq .accordion-content {
    background-color: #fff;
    padding: 50px 20px 50px;
    border-radius: 0px 0px 10px 10px;
    font-size:16px;
    position: relative;
}

.faq .accordion-header span,
.faq .accordion-content p { padding-left: 70px; display: block; }

.faq .accordion-header span::before{
    position: absolute;
    content:"";
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    left: 20px;
    width:50px;
    height: 50px;
    line-height: 1;
    background: url("../images/faq_ico01.png") left top no-repeat;
    background-size: 100%;
}

.faq .accordion-content p::before {
    position: absolute;
    content:"";
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    left: 20px;
    width:50px;
    height: 50px;
    line-height: 1;
    background: url("../images/faq_ico02.png") left top no-repeat;
    background-size: 100%;
}

/* hover */
/*.accordion-header:hover {
    opacity: .7;
    transition: .7s ease;
}*/

@media screen and (min-width:769px) and ( max-width:1079px) {
    .faq_inner {
        padding:6.487vw 0 8vw;
    }
}

@media screen and (max-width:768px) {
    .faq_inner {
        width:92%;
        max-width: 700px;
        padding:10vw 0 17vw;
    }
    .faq_inner h2 img { width: 58%; margin:0 0 0 33%; }

    .faq .accordion { padding-bottom:10vw; }
    .faq .accordion_bg { margin-top:7.229vw; }

    .faq .accordion-header {
        padding: 4.819vw 7vw 4.819vw 0;
        height: auto;
        font-size:18px;
    }

    .faq .accordion-header::before,
    .faq .accordion-header::after {
        right:10px;
        width:18px;
    }

    .faq .accordion-content {
        padding: 8vw 4.819vw 8vw 0;
        font-size:16px;
    }

    .faq .accordion-header span,
    .faq .accordion-content p { padding-left: 16.867vw; }

    .faq .accordion-header span::before {
        left: 4.819vw;
        width:6.51vw;
        height: 6.51vw;
    }

    .faq .accordion-content p::before {
        top: 8vw;
        -webkit-transform: translateY(0);
                transform: translateY(0);
        left: 4.819vw;
        width:6.51vw;
        height: 6.51vw;      
    }
}

/*-- recruit_info ----------------------------- */
.recruit_circle {
    width: 100%;
    height: 200px;
    border-radius: 50% / 100% 100% 0 0;
    background: url('../images/info_bg.png') repeat;
}

.recruit_info {
    width:100%;
    background: url('../images/info_bg.png') repeat;
    padding:0 0 40px 0;
}

.recruit_inner {
    width: 100%;
    max-width:910px;
    margin:0 auto;
    position: relative;
    height: 136px;
}

.recruit_inner2 {
    width: 100%;
    max-width:910px;
    margin:0 auto;
}

.recruit_btn {
    width:414px;
    margin: auto;
}

.recruit_btn a:hover {
    display: block;
    opacity: .6;
    transition: .7s ease;
}

.recruit_person {
    position: absolute;
    top:-250px;
    right:-20px;
}

.dll_btn {
    position: absolute;
    top: -120px;
    left:0;
}

.dll_btn img { margin-bottom: 20px; }

.recruit_info .accordion { padding-bottom:50px; }
.recruit_info .accordion-content { display: none; }

.recruit_info .accordion_bg {
    background: #00cccc;
    border-radius: 12px;
    border:2px solid #99ffff;
}

.recruit_info .accordion-header {
    padding: 23px 45px 0 20px;
    transition: background .3s ease;
    cursor: pointer;
    position: relative;
    height: 80px;
    font-size:30px;
    color:#fff;
    font-weight:700;
    line-height: 1;
}

.recruit_info .accordion-header::before,
.recruit_info .accordion-header::after {
    position:absolute;
    content:'';
    top:1px;
    right:20px;
    bottom:0;
    width:20px;
    height:4px;
    margin:auto;
    background:#fff;
}

.recruit_info .accordion-header::after {
    transform:rotate(-90deg);
    transition:transform 0.3s;
}

.recruit_info .accordion-header.active::after {transform:rotate(0deg);}

.recruit_info .accordion-content {
    background-color: #fff;
    padding: 40px 40px 40px 20px;
    border-radius: 0px 0px 10px 10px;
    font-size:16px;
    position: relative;
}

.recruit_info .accordion-header span,
.recruit_info .accordion-content p { padding-left: 30px; display: block; }

@media screen and (min-width:769px) and ( max-width:1079px) {
    .recruit_info { padding:0 0 3.707vw 0; }
    .recruit_inner { width: 92%; }
    .recruit_inner2 { width: 92%; }
    .recruit_btn a { width:46%; }
    .recruit_btn a img { width:100%; height: auto; }

    .recruit_person {
        width:55vw;
        height: auto;
        top:-22vw;
        right:0;
    }
    .dll_btn { top:-8vw; width: 26.228vw; margin:auto; }
    .dll_btn img { width: 100%; height: auto; }
    .recruit_flow { width:96%; height: auto; margin: auto; }
}

@media screen and (max-width:768px) {
    .recruit_circle {
        width: 100%;
        height: 40vw;
        border-radius: 100% / 100% 100% 0 0;
    }
    .recruit_info { padding:7.814vw 0 9.639vw 0; }
    .recruit_inner { max-width:700px; height: 40vw; }
    .recruit_inner2 { width: 92%; }

    .recruit_btn {
        width:75%;
        margin:0 auto;
        display:block;
        padding:0;
    }
    
    .recruit_btn a {
        padding-top:4.819vw;
        display: block;
    }    

    .recruit_person {
        top:-55vw;
        right:auto;
        width:80%;
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
    }

    .dll_btn {
        position: static;
        width:68%;
        margin:0 auto;
    }

    .dll_btn img { margin-bottom: 4.819vw; }
    .recruit_info .accordion { padding-bottom:6.51vw; }

    .recruit_info .accordion-header {
        padding: 4.819vw 7vw 4.819vw 0;
        height: auto;
        font-size:18px;
    }

    .recruit_info .accordion-header::before,
    .recruit_info .accordion-header::after {
        right:10px;
        width:18px;
    }

    .recruit_info .accordion-content {
        padding: 8vw 4.819vw 8vw 0;
        font-size:16px;
    }

    .recruit_info .accordion-header span,
    .recruit_info .accordion-content p { padding-left: 6vw; }    
    
}

/*-- footer ----------------------------- */
footer {
    max-width:701px;
    margin:0 auto;
    padding:50px 0;
}

@media screen and (max-width:768px) {
    footer {
        max-width:620px;
        padding:12.048vw 0;
        margin-bottom:20vw;
    }

    footer img {
        width:74.5%;
        margin:0 auto;
    }
}