@charset "utf-8";

/* ===================================
   リセット・汎用クラス　　　　　　　　　　　　　　　　
=================================== */
body{
  padding: 0;
  margin: 66px 0 0 0 !important;
  font-size: 100%;
}
.interview{
  font-family: "Roboto","Noto Sans JP",sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.interview main h1,
.interview main h2,
.interview main h3,
.interview main h4,
.interview main div,
.interview main p,
.interview main ul,
.interview main ol,
.interview main li,
.interview main dl,
.interview main dt,
.interview main dd,
.interview main table,
.interview main th,
.interview main td{
  margin: 0;
  padding: 0;
  font-size: 16px;
  color: #111;
  line-height: 1.8;
  box-sizing: border-box;
}
.interview section{
   width: 100%;
   background-color: #ffffff;
}
.interview section .contents_wrap{
   width: 1000px;
   margin: 0 auto;
}
.interview a{
  text-decoration: none;
  color: #00a7ac;
}
.interview main img{
    width: 100%;
  border: none;
  vertical-align: middle;
}
.interview main ul li,
.interview main ol li{
   list-style: none;
}
.interview main sup{
  vertical-align: top;
}
.interview main .note{
  display: block;
  font-size: 13px;
  line-height: 1.8 !important;
  padding-left: 1em;
  text-indent: -1em;
}
.interview main .note a{
   text-decoration: underline;
}
.interview main .note a:hover{
   text-decoration: none;
}
.interview main .indent{
  display: block;
  padding-left: 1em;
  text-indent: -1em;
}



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

body{
  margin: 0 0 0 0 !important;
}
.interview main h1,
.interview main h2,
.interview main h3,
.interview main h4,
.interview main div,
.interview main p,
.interview main ul,
.interview main ol,
.interview main li,
.interview main dl,
.interview main dt,
.interview main dd,
.interview main table,
.interview main th,
.interview main td{
  margin: 0;
  padding: 0;
  font-size: 15px;
  color: #111;
  line-height: 1.8;
  box-sizing: border-box;
}
.interview section{
   width: 100%;
   padding: 0 20px;
   box-sizing: border-box;
}
.interview section .contents_wrap{
   width: 100%;
   margin: 0 auto;
}
.interview main .note{
  font-size: 12.5px;
  line-height: 1.6 !important;
}
#page-top {
    /*bottom: 65px;*/
}
#page-top a img{
   display: none;
}

}



/* ===================================
   ヘッダー　　　　　　　　　　　　　　　　
=================================== */
.interview #header{
   z-index: 6;
   box-shadow: 0px 0 8px 1px rgba(0, 0, 0, 0.14);
}
.interview #header_cta{
   width: 1200px;
   position: relative;
   top: -66px;
   margin: 0 auto;
   z-index: 22;
}
.interview #header_cta .header_cta_inner{
   position: fixed;
   display: flex;
   top: 0;
   right: calc(50% - 600px);
}
.interview #header_cta .header_cta_inner a{
   top: 0;
   right: 0;
   display: block;
   text-align: center;
   border-radius: 25px;
   box-sizing: border-box;
   box-shadow: 0px 0px 5px 0px rgba(0, 109, 112, 0.5);
   width: 230px;
   height: 48px;
   margin: 9px 10px 0 0;
   color: #00a7ac;
   font-weight: 700;
   background: url("../images/logo_k-dive.png") #fff left 28px center no-repeat;
   background-size: 42px;
   padding: 11px 0 0 34px;
   transition: all .15s ease-out;
}
.interview #header_cta .header_cta_inner a:last-child{
   width: 200px;
   border: 2px solid #fff;
   color: #00a7ac;
   /*background: url("../images/ico_cta_inquiry_w.png") #00a7ac left 32px center no-repeat;*/
   background: url("/dx/img/kdive/icon_wp_gr.png") #ffffff left 42px center no-repeat;
   background-size: 24px;
   margin: 9px 0 0 0;
   /*padding: 8px 0 0 30px;*/
   padding: 9px 0 0 12px;
}
.interview #header_cta a:hover{
   opacity: 0.7;
}



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

.interview #header{
   width: 100%;
   box-shadow: 0 0 0 0;
}
.interview #header_cta{
   position: relative;
   top: inherit;
   bottom: 0;
}
.interview #header_cta .header_cta_inner{
   width: 100%;
   position: fixed;
   display: flex;
   top: inherit;
   bottom: 0;
   justify-content: center;
   align-items: center;
   right: inherit;
}
.interview #header_cta .header_cta_inner a{
   width: 53%;
   height: 52px;
   transition: none;
   font-size: 15px;
   border: 1px solid #00a7ac;
   box-sizing: border-box;
   box-shadow: 0 0 0 0;
   margin: 0;
   border-radius: 0;
   background: url("../images/logo_k-dive.png") #fff left 15px center no-repeat;
   background-size: 40px;
   padding: 15px 0 0 40px;
   transition: none;
   opacity: 0.88;
}
.interview #header_cta .header_cta_inner a:last-child{
   width: 47%;
   border: 0;
   border-top: 1px solid #00a7ac;
   border-right: 1px solid #00a7ac;
   border-bottom: 1px solid #00a7ac;
   /*background: url("../images/ico_cta_inquiry_w.png") #00a7ac left 15px center no-repeat;*/
   background: url("/dx/img/kdive/icon_wp_gr.png") #fff left 18px center no-repeat;
   background-size: 26px;
   margin: 0;
   padding: 15px 0 0 12px;
}
.interview #header_cta a:hover{
   opacity: 0.92;
}
#footerCredit{
   padding-bottom: 65px;
}

}


/* ===================================
   MV/intro
=================================== */
.interview main h1{
   padding: 30px 30px 0 30px;
   background: url("../images/bg_mv.png") center bottom repeat-x;
   text-align: center;
}
.interview main h1 img{
   width: 100%;
   max-width: 1600px;
}
.interview main .intro_wrap{
   background-color: #e4f7f7;
   padding: 0 0 60px 0;
}
.interview main .intro_wrap .txt_lead{
   text-align: center;
   font-weight: 500;
   font-size: 18px;
   letter-spacing: 0.1em;
   padding: 60px 0;
}
.interview main .intro_wrap .contents_wrap{
    background-color: #FFF;
    border: 1px solid #00a7ac;
    border-radius: 10px;
    position: relative;
    padding: 60px 80px;
}
.interview main .intro_wrap .contents_wrap .tooltip{
   position: absolute;
   top: -16px;
   left: 197px;
   width: 380px;
   height: 70px;
   background-color: rgb(0 167 172 / 0.85);
   border-radius: 6px;
   padding: 10px 20px;
   color: #ffffff;
   font-size: 14px;
}
.interview main .intro_wrap .contents_wrap .tooltip::after{
   content: "";
   position: absolute;
   top: 70px;
   left: calc(50% - 10px);
   width: 0;
   height: 0;
   border-style: solid;
   border-right: 10px solid transparent;
   border-left: 10px solid transparent;
   border-top: 16px solid rgb(0 167 172 / 0.85);
   border-bottom: 0;  
}
.interview main .intro_wrap .contents_wrap h2{
    font-size: 30px;
    font-weight: 900;
    margin: 0 0 40px 0;
}
.interview main .intro_wrap .contents_wrap h2 span{
    font-size: 34px;
    border-bottom: #00a7ac dashed 3px;
    margin: 0 6px 0 3px; 
    padding-right: 33px;
    background: url("../images/ico_question.png") right center no-repeat;
    background-size: 30px;
    cursor: help;
}
.interview main .intro_wrap .contents_wrap .intro_box{}
.interview main .intro_wrap .contents_wrap .intro_box > p{
    width: 210px;
    font-size: 14px;
    position: absolute;
    top: 60px;
    right: 80px;
    text-align: center;
    line-height: 1.6;
}
.interview main .intro_wrap .contents_wrap .intro_box > p img{
    margin-bottom: 10px;
}
.interview main .intro_wrap .contents_wrap .intro_box div{
    width: 550px;
    float: left;
}
.interview main .intro_wrap .contents_wrap .intro_box div p:first-child{
    margin-bottom: 20px;
}
.interview main .intro_wrap .contents_wrap .intro_company{
    background-color: #e4f7f7;
    border-radius: 10px;
    padding: 30px;
    margin-top: 40px;
}
.interview main .intro_wrap .contents_wrap .intro_company p{
    float: left;
    font-size: 14px;
    width: 560px;
}
.interview main .intro_wrap .contents_wrap .intro_company p:first-child{
    margin-right: 30px;
    width: 185px;
}
.interview main .intro_wrap .contents_wrap .intro_company p strong{
    display: block;
    margin-bottom: 15px;
}



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

.interview main h1{
   padding: 10px 0 0 0;
   background: url("../images/bg_mv.png") center bottom repeat-x;
}
.interview main h1 img{
   width: 100%;
   max-width: 600px;
}
.interview main .intro_wrap{
   background-color: #e4f7f7;
   padding: 0 20px 40px 20px;
}
.interview main .intro_wrap .txt_lead{
   text-align: left;
   font-size: 16px;
   letter-spacing: 0;
   padding: 40px 0px 60px;
}
.interview main .intro_wrap .contents_wrap{
    padding: 20px;
}
.interview main .intro_wrap .contents_wrap .tooltip{
   position: absolute;
   top: -50px;
   left: calc(50% - 170px);
   width: 340px;
   height: 68px;
   padding: 10px;
   font-size: 13.5px;
}
.interview main .intro_wrap .contents_wrap .tooltip::after{
   content: "";
   position: absolute;
   top: 68px;
   left: calc(50% - 10px);
   width: 0;
   height: 0;
   border-style: solid;
   border-right: 8px solid transparent;
   border-left: 8px solid transparent;
   border-top: 12px solid rgb(0 167 172 / 0.85);
   border-bottom: 0;  
}
.interview main .intro_wrap .contents_wrap h2{
    font-size: 20px;
    margin: 0 0 30px 0;
}
.interview main .intro_wrap .contents_wrap h2 span{
    font-size: 23px;
    border-bottom: #00a7ac dashed 2px;
    margin: 0 4px 0 2px; 
    padding-right: 18px;
    background: url("../images/ico_question.png") right center no-repeat;
    background-size: 18px;
}
.interview main .intro_wrap .contents_wrap .intro_box > p{
    width: 100%;
    font-size: 13.5px;
    position: relative;
    top: inherit;
    right: inherit;
    margin-bottom: 20px;
}
.interview main .intro_wrap .contents_wrap .intro_box > p img{
   max-width: 150px;
   width: 50%;
   display: block;
   margin: 0 auto 10px auto;
}
.interview main .intro_wrap .contents_wrap .intro_box div{
    width: 100%;
    float: none;
}
.interview main .intro_wrap .contents_wrap .intro_company{
    padding: 20px;
    margin-top: 20px;
}
.interview main .intro_wrap .contents_wrap .intro_company p{
    float: none;
    font-size: 13px;
    width: 100%;
}
.interview main .intro_wrap .contents_wrap .intro_company p:first-child{
    margin: 0 auto 15px auto;
    max-width: 150px;
    width: 100%;
}
.interview main .intro_wrap .contents_wrap .intro_company p strong{
    margin-bottom: 10px;
}

}



/* ===================================
   Interview
=================================== */

.interview .interview_wrap{
    position: relative;
    overflow: hidden;
}
.interview .interview_wrap .bg_circle{
    position: absolute;
    left: -150px;
    top: 100px;
    z-index: 1;
    --sample-color: 0 166 172;
    aspect-ratio: 1 / 1;
    background: radial-gradient(
    circle,
    rgb(var(--sample-color)),
    rgb(var(--sample-color) / 0%)
    );
   border-radius: 50%;
   filter: blur(175px);
   width: min(100%, 500px);
}
.interview .interview_wrap .bg_circle2{
    position: absolute;
    left: inherit;
    top: inherit;
    bottom: 0px;
    right: -150px;
    z-index: 1;
   filter: blur(175px);
}
.interview .interview_wrap h2{
    color: #fff;
    text-align: center;
    padding: 80px 0 140px 0;
    background-color: #00a7ac;
    font-size: 25px;
    line-height: 1.6;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 2;
}
.interview .interview_wrap h2 span{
    font-size: 17px;
    font-weight: 400;
    display: block;
    padding: 3px 0 3px 0;
    width: 120px;
    line-height: 1.0;
    border-radius: 20px;
    border: 2px solid #fff;
    margin: 0 auto 5px;
}
.interview .interview_wrap .contents_wrap{
    position: relative;
    z-index: 3;
}
.interview .interview_wrap .contents_wrap .youtube_box{
    width: 800px;
    margin: -80px auto 80px;
}
.interview .interview_wrap .contents_wrap .youtube_box iframe{
    width: 100%;
    height: auto;
    border: 3px solid #fff;
    border-radius: 10px;
    aspect-ratio: 16 / 9;
    vertical-align: middle;
}
.interview .interview_wrap .contents_wrap h3{
    border-bottom: 1px solid #111;
    border-top: 1px solid #111;
    text-align: center;
    font-size: 38px;
    font-weight: 900;
    padding: 7px 0 6px 0; 
    position: relative;
    margin-bottom: 40px;
}
.interview .interview_wrap .contents_wrap h3 span{
    color: #00a7ac;
    font-size: 18px;
    letter-spacing: 0.1em;
    text-align: left;
    position: absolute;
    top: 10px;
    left: 0;
    line-height: 1.0;
    font-weight: 900;
}
.interview .interview_wrap .contents_wrap h3 span strong{
    font-size: 28px;
}
.interview .interview_wrap .contents_wrap .contents_innerbox{
    width: 800px;
    margin: 0 auto 100px;
}
.interview .interview_wrap .contents_wrap .beforeafter_box{
    background: url("../images/ico_interview_kdive_pc.png") center center no-repeat;
    background-size: 160px;
    padding: 20px 0;
    display: flex;
}
.interview .interview_wrap .contents_wrap .beforeafter_box02{
    background: url("../images/ico_interview_kdive_pc.png") left 200px center no-repeat;
    background-size: 160px;
}

.interview .interview_wrap .contents_wrap .beforeafter_box p{
    border: 3px solid #111;
    border-radius: 10px;
    width: 320px;
    text-align: center;
    padding: 17px 0 16px;
    font-size: 20px;
    font-weight: 600;
    position: relative;
}
.interview .interview_wrap .contents_wrap .beforeafter_box p:last-child{
    border: 3px solid #00a7ac;
    margin-left: 160px;    
    color: #00a7ac;
}
.interview .interview_wrap .contents_wrap .contents_innerbox .beforeafter_box02 p:first-child{
    width: 200px;
}
.interview .interview_wrap .contents_wrap .contents_innerbox .beforeafter_box02 p:last-child{
    width: 440px;
}
.interview .interview_wrap .contents_wrap .beforeafter_box p::before{
    content: "Before";
    color: #ffffff;
    background: #111111;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.075em;
    padding: 2px 0 3px 0;
    line-height: 1.0;
    text-align: center;
    width: 60px;
    position: absolute;
    top: 0;
    left: 0;
}
.interview .interview_wrap .contents_wrap .beforeafter_box p:last-child::before{
    content: "After";
    background: #00a7ac;
}
.interview .interview_wrap .contents_wrap .voice_box{
    display: flex;
    margin: 40px auto;
}
.interview .interview_wrap .contents_wrap .voice_box > p{
    width: 100px;
    margin-right: 40px;
    font-size: 14px;
    text-align: center;
}
.interview .interview_wrap .contents_wrap .voice_box > p img{
    margin-bottom: 8px; 
}
.interview .interview_wrap .contents_wrap .voice_box > div{
    width: 660px;
    position: relative;
}
.interview .interview_wrap .contents_wrap .voice_box > div p{
    background: #e4f7f7;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 15px;
    padding: 20px;
    position: relative;
}
.interview .interview_wrap .contents_wrap .voice_box > div p:last-child{
    margin-bottom: 0;
}
.interview .interview_wrap .contents_wrap .voice_box > div p:after{
    content: "";
    position: absolute;
    left: -25px;
    top: 22px;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 25px solid #e4f7f7;
  border-left: 0;
}
.interview .interview_wrap .contents_wrap .pht_box{
    width: 600px;
    margin: 40px auto 0;
}

.interview .interview_wrap #photo_box{
   position: relative;
   z-index: 3;
}
.interview .interview_wrap #photo_box li{
   width: 440px;   
   box-sizing: border-box;
}
.interview .interview_wrap #photo_box li img{
   width: 96%;
   border: 3px solid #fff;
   box-sizing: border-box;
   border-radius: 10px;
}



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

.interview .interview_wrap{
   padding: 0;
}
.interview .interview_wrap .bg_circle,
.interview .interview_wrap .bg_circle2{
    background: none;
}
.interview .interview_wrap h2{
    padding: 30px 0 60px;
    font-size: 20px;
    line-height: 1.6;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 2;
}
.interview .interview_wrap h2 span{
    font-size: 14px;
    padding: 4px 0 3px 0;
    width: 100px;
    margin: 0 auto 2px;
}
.interview .interview_wrap .contents_wrap{
    padding: 0 20px;
}
.interview .interview_wrap .contents_wrap .youtube_box{
 width: 100%;
    margin: -40px auto 40px;
}
.interview .interview_wrap .contents_wrap .youtube_box iframe{
    width: 100%;
    border: 0;
}
.interview .interview_wrap .contents_wrap h3{
    font-size: 18px;
    font-weight: 800;
    line-height: 1.4;
    padding: 10px 0 8px 0; 
    margin-bottom: 20px;
}
.interview .interview_wrap .contents_wrap h3 span{
    font-size: 12px;
    display: block;
    letter-spacing: 0.15em;
    text-align: center;
    position: relative;
    top: inherit;
    left: inherit;
    line-height: 1.0;
    margin-bottom: 5px;
}
.interview .interview_wrap .contents_wrap h3 span strong{
    font-size: 18px;
}
.interview .interview_wrap .contents_wrap .contents_innerbox{
   width: 100%;
    margin: 0 auto 40px;
}
.interview .interview_wrap .contents_wrap .beforeafter_box{
    background: url("../images/ico_interview_kdive_sp.png") center top 66px no-repeat;
    background-size: 75px;
    padding: 0;
    display: block;
}
.interview .interview_wrap .contents_wrap .beforeafter_box02{
    background: url("../images/ico_interview_kdive_sp.png") center top 66px no-repeat;
    background-size: 75px;
}

.interview .interview_wrap .contents_wrap .beforeafter_box p{
   width: 100%;
   font-size: 16px;
    border: 2px solid #111;
    padding: 0;
    line-height: 62px;
    font-weight: 600;
    position: relative;
}
.interview .interview_wrap .contents_wrap .beforeafter_box p:last-child{
    border: 2px solid #00a7ac;
    margin: 114px 0 30px 0;    
}
.interview .interview_wrap .contents_wrap .contents_innerbox .beforeafter_box02 p:first-child{
    width: 100%;
}
.interview .interview_wrap .contents_wrap .contents_innerbox .beforeafter_box02 p:last-child{
    width: 100%;
}

.interview .interview_wrap .contents_wrap .beforeafter_box p::before{
    content: "Before";
    background: #111111;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.075em;
    padding: 1px 0 3px 0;
    width: 60px;
    border-radius: 6px 0 0 0;
}
.interview .interview_wrap .contents_wrap .beforeafter_box p:last-child::before{
    content: "After";
    background: #00a7ac;
}
.interview .interview_wrap .contents_wrap .voice_box{
    display: block;
    margin: 30px auto;
}
.interview .interview_wrap .contents_wrap .voice_box > p{
    width: 100%;
    max-width: 100px;
    margin: 0 auto;
    font-size: 13.5px;
    text-align: center;
}
.interview .interview_wrap .contents_wrap .voice_box > p img{
    margin-bottom: 6px; 
}
.interview .interview_wrap .contents_wrap .voice_box > div{
    width: 100%;
    position: relative;
}
.interview .interview_wrap .contents_wrap .voice_box > div p{
    margin: 18px auto 0;
    font-size: 14.5px;
}
.interview .interview_wrap .contents_wrap .voice_box > div p:after{
    content: "";
    position: absolute;
    left: calc(50% - 10px);
    top: -15px;
  border-top: 0;
  border-bottom: 15px solid #e4f7f7;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}
.interview .interview_wrap .contents_wrap .pht_box{
width: 100%;
    margin: 20px auto 40px;
}
.interview .interview_wrap #photo_box{
   position: relative;
   z-index: 3;
}
.interview .interview_wrap #photo_box li{
   width: 220px;
}
.interview .interview_wrap #photo_box li img{
   width: 96%;
   border: 2px solid #fff;
   box-sizing: border-box;
   border-radius: 10px;
}


}



/* ===================================
   Benefits
=================================== */
.interview .benefits_wrap{}
.interview .benefits_wrap h2{
    color: #fff;
    text-align: center;
    padding: 140px 0 80px 0;
    background-color: #00a7ac;
    font-size: 25px;
    line-height: 1.6;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 2;
    margin-top: -60px;
}
.interview .benefits_wrap h2 span{
    font-size: 17px;
    font-weight: 400;
    display: block;
    padding: 3px 0 3px 0;
    width: 120px;
    line-height: 1.0;
    border-radius: 20px;
    border: 2px solid #fff;
    margin: 0 auto 5px;
}
.interview .benefits_wrap .contents_wrap{
   width: 800px;
   margin: 0 auto 80px;
}
.interview .benefits_wrap .contents_wrap > p{
   margin: 60px 0;
}
.interview .benefits_wrap .contents_wrap p.link_case{
   text-align: center;
   font-size: 105%;
}
.interview .benefits_wrap .contents_wrap p.link_case a{
   text-decoration: underline;
}
.interview .benefits_wrap .contents_wrap p.link_case a:hover{
   text-decoration: none;
}
.interview .benefits_wrap .contents_wrap .topvoice_box{
   display: flex;
}
.interview .benefits_wrap .contents_wrap .topvoice_box p{
   width: 100px;
   text-align: center;
   font-size: 14px;
   margin-right: 40px;
}
.interview .benefits_wrap .contents_wrap .topvoice_box p strong{
   display: block;
}
.interview .benefits_wrap .contents_wrap .topvoice_box p img{
   margin-bottom: 8px;
}
.interview .benefits_wrap .contents_wrap .topvoice_box dl{
   width: 660px;
   background-color:#e4f7f7;
   border-radius: 10px;
   padding: 30px;
   position: relative;
}
.interview .benefits_wrap .contents_wrap .topvoice_box dl::after{
   content: "";
   position: absolute;
   left: -25px;
   top: 32px;
   width: 0;
   height: 0;
   border-style: solid;
   border-top: 12px solid transparent;
   border-bottom: 12px solid transparent;
   border-right: 25px solid #e4f7f7;
   border-left: 0;
}
.interview .benefits_wrap .contents_wrap .topvoice_box dl dt{
   padding-left: 16px;
   margin-bottom: 5px; 
   font-weight: 700;
   position: relative;
}
.interview .benefits_wrap .contents_wrap .topvoice_box dl dt::before{
   content: "";
   width: 8px;
   height: 8px;
   display: block;
   position: absolute;
   left: 0;
   top: 9px;
   line-height: 8px;
   background-color: #00a7ac;
   border-radius: 50%;
}
.interview .benefits_wrap .contents_wrap .topvoice_box dl dd{
   font-size: 15px;
   padding-bottom: 25px;
   margin-bottom: 25px;
   background: url("../images/bg_benefits_dot.png") left bottom repeat-x;
}
.interview .benefits_wrap .contents_wrap .topvoice_box dl dd:last-child{
   padding-bottom: 0px;
   margin-bottom: 0px;
   background: none;   
}



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

.interview .benefits_wrap{
   padding: 0;
}
.interview .benefits_wrap h2{
    padding: 70px 0 30px 0;
    font-size: 20px;
    margin-top: -40px;
}
.interview .benefits_wrap h2 span{
    font-size: 14px;
    padding: 4px 0 3px 0;
    width: 100px;
    margin: 0 auto 2px;
}
.interview .benefits_wrap .contents_wrap{
   width: 100%;
   padding: 0 20px;
   margin: 0 auto 50px;
}
.interview .benefits_wrap .contents_wrap > p{
   margin: 30px 0 40px 0;
}
.interview .benefits_wrap .contents_wrap p.link_case{
   text-align: left;
}
.interview .benefits_wrap .contents_wrap .topvoice_box{
   display: block;
}
.interview .benefits_wrap .contents_wrap .topvoice_box p{
   width: 100%;
   max-width: 100px;
   text-align: center;
   font-size: 13.5px;
   margin: 0 auto 20px;
}
.interview .benefits_wrap .contents_wrap .topvoice_box p strong{
   display: block;
}
.interview .benefits_wrap .contents_wrap .topvoice_box p img{
   margin-bottom: 8px;
}
.interview .benefits_wrap .contents_wrap .topvoice_box dl{
   width: 100%;
   padding: 25px 20px;
}
.interview .benefits_wrap .contents_wrap .topvoice_box dl::after{
    content: "";
    position: absolute;
    left: calc(50% - 10px);
    top: -15px;
    border-top: 0;
      border-bottom: 15px solid #e4f7f7;
      border-right: 10px solid transparent;
      border-left: 10px solid transparent;
}
.interview .benefits_wrap .contents_wrap .topvoice_box dl dt{
   padding-left: 14px;
}
.interview .benefits_wrap .contents_wrap .topvoice_box dl dd{
   font-size: 14.5px;
   padding-bottom: 20px;
   margin-bottom: 20px;
}

}


/* ===================================
   About
=================================== */
.interview .about_wrap{
   background: #e4f7f7;
}
.interview .about_wrap h2{
    color: #fff;
    text-align: center;
    padding: 80px 0 140px 0;
    background-color: #00a7ac;
    font-size: 25px;
    line-height: 1.6;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 2;
}
.interview .about_wrap h2 span{
    font-size: 17px;
    font-weight: 400;
    display: block;
    padding: 3px 0 3px 0;
    width: 120px;
    line-height: 1.0;
    border-radius: 20px;
    border: 2px solid #fff;
    margin: 0 auto 5px;
}
.interview .about_wrap .contents_wrap{
    background-color: #FFF;
    border: 1px solid #00a7ac;
    border-radius: 10px;
    position: relative;
    padding: 40px 50px 50px 50px;
    margin-bottom: 20px;
    z-index: 4;
}
.interview .about_wrap .contents_wrap:nth-of-type(1){
   margin-top: -80px;
}
.interview .about_wrap .contents_wrap:nth-of-type(3){
   margin-bottom: 0;
}
.interview .about_wrap .contents_wrap h3{
   font-size: 20px;
   margin-bottom: 20px;
}
.interview .about_wrap .contents_wrap .contents_innerbox01{
   display: flex;
}
.interview .about_wrap .contents_wrap .contents_innerbox01 > div{
   width: 48%;
   margin-right: 4%;
}
.interview .about_wrap .contents_wrap .contents_innerbox01 > p{
   width: 48%
}
.interview .about_wrap .contents_wrap .contents_innerbox02{}
.interview .about_wrap .contents_wrap .contents_innerbox02 ul{
   display: flex;
   justify-content: center;
   margin: 40px auto 0;
}
.interview .about_wrap .contents_wrap .contents_innerbox02 ul li{
   width: 280px;
   padding: 0 25px;
   border-right: 1px solid #dddddd;
}
.interview .about_wrap .contents_wrap .contents_innerbox02 ul li:last-child{
   border-right: 0;
}
.interview .about_wrap .contents_wrap .contents_innerbox02 ul li div{
   position: relative;
   text-align: center;
}
.interview .about_wrap .contents_wrap .contents_innerbox02 ul li div span{
   position: absolute;
   top: 0;
   left: 0;
   color: #00a7ac;
}
.interview .about_wrap .contents_wrap .contents_innerbox02 ul li div img{
   width: 94px;
   margin-bottom: 20px;
}
.interview .about_wrap .contents_wrap .contents_innerbox02 ul li h4{
   color: #00a7ac;
   margin-bottom: 10px;
}
.interview .about_wrap .contents_wrap .contents_innerbox02 ul li p{
   font-size: 14.5px;
}
.interview .about_wrap .contents_wrap .contents_innerbox03{
   width: 800px;
   margin: 30px auto 0px auto;
}
.interview .about_wrap .contents_wrap .contents_innerbox03 ul{}
.interview .about_wrap .contents_wrap .contents_innerbox03 ul li{
   background: #e4f7f7;
   border-radius: 10px;
   padding:12px 50px 10px 50px;
   margin-bottom: 10px;
   font-size: 15px;
}
.interview .about_wrap .contents_wrap .contents_innerbox03 ul li:last-child{
   margin-bottom: 0px;
}
.interview .about_wrap .contents_wrap .contents_innerbox03 ul li span{
   display: block;
   text-align: right;
}



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

.interview .about_wrap{
   padding: 0;
}
.interview .about_wrap h2{
    padding: 30px 0 70px 0;
    font-size: 20px;
}
.interview .about_wrap h2 span{
    font-size: 14px;
    padding: 4px 0 3px 0;
    width: 100px;
    margin: 0 auto 2px;
}
.interview .about_wrap .contents_wrap{
   width: calc(100% - 40px);
   padding: 20px;
   margin: 0 auto 20px;
}
.interview .about_wrap .contents_wrap:nth-of-type(1){
   margin-top: -40px;
}
.interview .about_wrap .contents_wrap h3{
   font-size: 16px;
   line-height: 1.6;
   margin-bottom: 20px;
}
.interview .about_wrap .contents_wrap .contents_innerbox01{
   display: block;
}
.interview .about_wrap .contents_wrap .contents_innerbox01 > div{
   width: 100%;
   margin-right: 0;
}
.interview .about_wrap .contents_wrap .contents_innerbox01 > p{
   margin-top: 20px;
   width: 100%
}
.interview .about_wrap .contents_wrap .contents_innerbox02{}
.interview .about_wrap .contents_wrap .contents_innerbox02 ul{
   display: block;
   justify-content: inherit;
   margin: 40px auto 0;
}
.interview .about_wrap .contents_wrap .contents_innerbox02 ul li{
   width: 100%;
   padding: 0 0 25px 0;
   margin-bottom: 25px;
   border-right: 0;
   border-bottom: 1px dotted #00a7ac;
}
.interview .about_wrap .contents_wrap .contents_innerbox02 ul li:last-child{
   border-bottom: 0;
   padding: 0;
   margin-bottom: 0;
}
.interview .about_wrap .contents_wrap .contents_innerbox02 ul li div img{
   width: 100px;
   margin-bottom: 10px;
}
.interview .about_wrap .contents_wrap .contents_innerbox02 ul li h4{
   margin-bottom: 5px;
}
.interview .about_wrap .contents_wrap .contents_innerbox02 ul li p{
   font-size: 14.5px;
}
.interview .about_wrap .contents_wrap .contents_innerbox03{
   width: 100%;
   margin: 30px auto 0px auto;
}
.interview .about_wrap .contents_wrap .contents_innerbox03 ul{}
.interview .about_wrap .contents_wrap .contents_innerbox03 ul li{
   padding: 20px;
   margin-bottom: 10px;
   font-size: 14.5px;
}
.interview .about_wrap .contents_wrap .contents_innerbox03 ul li:last-child{
   margin-bottom: 0px;
}
.interview .about_wrap .contents_wrap .contents_innerbox03 ul li span{
   margin-top: 5px;
}


}



/* ===================================
   cta_btn
=================================== */
.interview .about_wrap .cta_download{
   margin: 80px auto 40px;
   width: 760px;
   text-align: center;   
}
.interview .about_wrap .cta_download p{
   font-size: 15px;
}
.interview .about_wrap .cta_download p strong{
   font-size: 18px;
   margin-bottom: 3px;
}
.interview .about_wrap .cta_download a{
   margin-top: 20px;
   display: block;
   opacity: 1.0;
   transition: all .15s ease-out;
}
.interview .about_wrap .cta_download a:hover{
   opacity: 0.8;
}

.interview .about_wrap .cta_box{
   width: 1000px;
   margin: 0 auto;
   padding: 0 0 100px 0;
   display: flex;
}
.interview .about_wrap .cta_box div{
   text-align: center;
   width: 485px;
   margin-right: 30px;
}
.interview .about_wrap .cta_box div:last-child{
   margin-right: 0;
}
.interview .about_wrap .cta_box div a{
   display: block;
   font-size: 20px;
   font-weight: 700;
   border-radius: 50px;
   border: 2px solid #00a7ac;
   background: url("../images/logo_k-dive.png") #fff left 70px center no-repeat;
   background-size: 56px;
   color: #00a7ac;
   opacity: 1.0;
   transition: all .15s ease-out;
   padding: 0 0 0 35px;
   line-height: 80px;
   margin-top: 20px;
}
.interview .about_wrap .cta_box div a:hover{
   opacity: 0.7;
}
.interview .about_wrap .cta_box div:last-child a{
   background: url("../images/ico_cta_inquiry_w.png") #00a7ac left 150px center no-repeat;
   background-size: 35px;
   color: #FFFFFF;   
}
.interview .about_wrap .cta_box p{
   font-size: 15px;
}
.interview .about_wrap .cta_box p strong{
   font-size: 18px;
   margin-bottom: 3px;
}



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

.interview .about_wrap .cta_download{
   margin: 60px auto 20px;
   width: 100%;
}
.interview .about_wrap .cta_download p{
   font-size: 14px;
}
.interview .about_wrap .cta_download p strong{
   font-size: 16px;
}
.interview .about_wrap .cta_download a{
   padding: 0 20px;
   margin: 10px auto 20px;
}
.interview .about_wrap .cta_download a:hover{
   opacity: 1.0;
}


.interview .about_wrap .cta_box{
   width: 100%;
   margin: 0 auto;
   padding: 0 20px 60px 20px;
   display: block;
}
.interview .about_wrap .cta_box div{
   width: 100%;
   margin-right: 0;
}
.interview .about_wrap .cta_box div a{
   font-size: 16px;
   border-radius: 30px;
   background: url("../images/logo_k-dive.png") #fff left 26px center no-repeat;
   background-size: 44px;
   transition: none;
   padding: 0 0 0 10px;
   line-height: 60px;
   letter-spacing: 0.04em;
   margin: 10px auto 30px;
}
.interview .about_wrap .cta_box div a:hover{
   opacity: 1.0;
}
.interview .about_wrap .cta_box div:last-child a{
   background: url("../images/ico_cta_inquiry_w.png") #00a7ac left 30px center no-repeat;
   background-size: 28px;
   margin: 10px auto 0;
}
.interview .about_wrap .cta_box p{
   font-size: 14px;
}
.interview .about_wrap .cta_box p strong{
   font-size: 16px;
   margin-bottom: 3px;
}


}