@charset "UTF-8";
/* =============================================
                    CONTENTS
============================================= */
body{ background: #fff; width: 100vw; overflow-x: clip;}
.en{ font-family: "Roboto Condensed", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif; font-weight: 700;}
.btn-black a{ background: #000; font-weight: 700; line-height: 1.3; color: #fff; text-align: center; text-decoration: none; display: block; position: relative; cursor: pointer; border-radius: 60px;}
.btn-black a::after{
    content: "\f105";
    font-family: FontAwesome;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
}
.inner{ position: relative;}
header .bg{ background: rgba(241, 241, 241, 0.8); display: block;}
header .bg.ac{ opacity: 1;}
header .g-nav ul li a{ color: #000;}
header .g-nav ul li a .en{ background: #d81e19; color: #fff; border-radius: 3px; display: inline-block; position: relative;}
#contents{ background: url(../img/interview/bg01.jpg) left top repeat;}
/* main */
#main .detail h2{ font-weight: 700; line-height: 1.3; text-align: center;}
#main .detail p{ font-weight: 700; line-height: 1.8;}
/* section */
#sec01 .box h2{ font-weight: 700;line-height: 1.3;}
#sec01 .box h2.tc{ text-align: center;}
#sec01 .box .interview-list dt{ font-weight: 700; line-height: 1.6;}
#sec01 .box .interview-list dt span{ color: #d81e19;}
#sec01 .box .interview-list dd{ line-height: 1.8;}
#sec01 .box .interview-list dd span{ display: block; text-align: right;}
.profile{ background: #f1f1f1;}
.profile .detail .job{ font-weight: 700; line-height: 1.3;}
.profile .detail .name a .ico{ width: 38px;}
.profile .detail .name a .ico img{ width: 100%;}
.profile .detail .name a{ font-weight: 700; color: #000; text-decoration: none; display: flex; align-items: center;}
.profile .detail .data{ line-height: 1.6;}
.profile .detail .text{ line-height: 1.8;}
footer .bottom{ background: #000;}
footer .bottom p,
footer .bottom p a{ color: #fff;}

/* ==== PC ===== */
@media screen and (min-width: 768px){
.inner{ width: 1080px; margin: 0 auto;}
.btn-black{ width: 500px;}
.btn-black a{ box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.25); font-size: 24px; padding: 18px 0;}
.btn-black a::after{ font-size: 20px; right: 15px;}
.btn-black a:hover{ box-shadow: none; transition: .4s;}
header .logo-gdo{ margin-right: auto;}
header .logo-ns{ margin-right: 0;}
header .g-nav ul li{ margin-right: 40px;}
header .g-nav ul li a .en{ font-size: 12px; padding: 3px 4px; margin-right: 4px; top: -2px;}
/* main */
#main .mv{ background: url(../img/interview/main-bg_pc.jpg) center center no-repeat; background-size: cover;}
#main .mv .inner{ height: 46.43vw;}
#main .mv h1{ position: absolute; top: 50%; left: -13px; transform: translate(0, -50%);}
#main .detail h2{ font-size: 28px;  padding: 55px 0 30px;}
#main .detail p{ font-size: 18px; text-align: center; padding: 0 0 55px;}
/* section */
#sec01{ background: url(../img/interview/bg02_pc.png) center bottom no-repeat; background-size: 100%; padding-bottom: 100px;}
#sec01 .box{ width: 980px; margin: 0 auto;}
#sec01 .box h2{ font-size: 28px; margin-bottom: 30px;}
#sec01 .box .img{ margin-bottom: 40px;}
#sec01 .box .interview-list{ margin-bottom: 5px;}
#sec01 .box .interview-list dt{ font-size: 20px; text-indent: -22px; padding-left: 22px; margin-bottom: 20px;}
#sec01 .box .interview-list dd{ font-size: 18px; margin-bottom: 45px;}
#sec01 .box .interview-list dd span{ font-size: 16px;}
#sec01 .btn-black{ margin: 0 auto;}
.profile{ display: flex; align-items: center; margin: 40px 0 80px;}
.profile .img{ flex-shrink: 0; margin-right: 40px;}
.profile .detail{ width: 680px;}
.profile .detail .name{ margin-bottom: 20px;}
.profile .detail .name a .ico{ margin-right: 10px;}
.profile .detail .name a{ font-size: 34px;}
.profile .detail .data{ font-size: 14px; margin-bottom: 15px;}
.profile .detail .text{ font-size: 15px;}
}

/* ==== SP ===== */
@media screen and (max-width: 767px){
.btn-black a{ box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.25); font-size: 16px; padding: 15px 0;}
.btn-black a::after{ font-size: 16px; right: 20px;}
header .logo-gdo{ margin-right: auto;}
header .logo-ns{ margin-right: 20px;}
header .g-nav{ background: rgba(241, 241, 241, 0.8); height: 100vh;}
header .open-btn span{ background: #000;}
header .g-nav ul li.ico-blank::before{ top: 32px; right: -18px;}
header .g-nav ul li.ico-blank::after{ top: 30px; right: -20px;}
header .g-nav ul li a .en{ font-size: 12px; padding: 3px 4px; margin-right: 4px; top: -2px;}
/* main */
#main .detail h2{ font-size: 22px; padding: 20px 20px 15px;}
#main .detail p{ font-size: 17px; padding: 0 20px 25px;}
/* section */
section .inner{ padding: 0 20px;}
#sec01{ background: url(../img/interview/bg02_sp.png) center bottom no-repeat; background-size: 100%; padding-bottom: 50px;}
#sec01 .box h2{ font-size: 22px; margin-bottom: 15px;}
#sec01 .box .img{ margin-bottom: 15px;}
#sec01 .box .interview-list{ margin-bottom: 5px;}
#sec01 .box .interview-list dt{ font-size: 18px; text-indent: -21px; padding-left: 22px; margin-bottom: 10px;}
#sec01 .box .interview-list dd{ font-size: 17px; margin-bottom: 25px;}
#sec01 .box .interview-list dd span{ font-size: 14px; margin-top: 5px;}
.profile{ margin: 30px 0 40px;}
.profile .detail{ padding: 15px;}
.profile .detail .name{ margin-bottom: 12px;}
.profile .detail .name a .ico{ width: 30px; margin-right: 10px;}
.profile .detail .name a{ font-size: 22px; justify-content: center;}
.profile .detail .data{ font-size: 12px; text-align: center; margin-bottom: 10px;}
.profile .detail .text{ font-size: 14px;}
footer .bottom{ padding-bottom: 30px;}
}