@charset "UTF-8";

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

/*-----------------------------------------------------*/
/*------------------ページタイトル--------------------*/
/*-----------------------------------------------------*/

.op{
background-color: var(--color-blue);
color: var(--color-white);
margin-bottom: 30px;
}

/* タイトルと写真囲み */
.op-wrap{
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 30px;
}
@media screen and (max-width: 768px) {
.op-wrap{
display:block;
}
}

/* タイトル */
.op-wrap .p_title{
padding: 45px 0 0 0;
position: relative;
width: 100%;
}
.op-wrap .p_title .txt-ja{
color: var(--color-yellow);
}
.op-wrap .p_title .txt-en{
font-size: min(8vw, var(--s120));
display: block;
}
.op-wrap .p_title .txt-hand-anime{
font-size: min(4vw, 60px);
position: absolute;
bottom: 0;
right: 0;
}
@media screen and (max-width: 768px) {
.op-wrap .p_title .txt-en{
font-size: 12vw;
}
.op-wrap .p_title .txt-hand-anime{
font-size: 7vw;
position: absolute;
bottom: 2vw;
left: 20vw;
}
}


/* 本文 */
.op-wrap p{
padding-bottom: 80px;
}
@media screen and (max-width: 768px) {
.op-wrap p{
padding-bottom: 30px;
}
}

/* 写真 */
.op-wrap .img{
position: relative;
width: 100%;
height: 100%;
}
@media screen and (max-width: 768px) {
.op-wrap .img{
height: 0;
padding-top: 70vw;
}
}

.op-wrap .img :is(.img01, .img02, .img03, .img04, .img05){
position: absolute;
animation: recruit-op-anime;
opacity: 0;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
@keyframes recruit-op-anime{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.op-wrap .img .img01{
width: 60%;
bottom: -30px;
left: 28%;
}
.op-wrap .img .img02{
width: 40%;
top:30%;
right: 0;
animation-delay: 0.8s;
}
.op-wrap .img .img03{
width: 30%;
top:20%;
left: 5%;
animation-delay: 0.6s;
}
.op-wrap .img .img04{
width: 30%;
bottom: 35%;
left: 10%;
animation-delay: 1s;
}
.op-wrap .img .img05{
width: 18%;
bottom: 25px;
animation-delay: 0.4s;
}


@media screen and (max-width: 1050px) {
.op-wrap .img .img01{
width: 65%;
}
.op-wrap .img .img02{
width: 45%;
top:40%;
}
.op-wrap .img .img03{
width: 40%;
}
.op-wrap .img .img04{
width: 35%;
bottom: 30%;
}
.op-wrap .img .img05{
width: 23%;
}
}

@media screen and (max-width: 768px) {
.op-wrap .img .img01{
width: 50%;
bottom: 5vw;
}
.op-wrap .img .img02{
width: 50%;
top:15vw;
right: 0;
}
.op-wrap .img .img03{
width: 40%;
top:0;
left: 5%;
}
.op-wrap .img .img04{
width: 30%;
bottom: 35%;
left: 10%;
}
.op-wrap .img .img05{
width: 20%;
bottom: 10vw;
}
}




/*-----------------------------------------------------*/
/*------------------募集要項--------------------*/
/*-----------------------------------------------------*/

.job{
margin-top: 100px;
}

/* 全体囲み */
.tabu-area {
flex-wrap: wrap;
display: flex;
}
/* ボタン */
.tabu-area .tab_class {
width: calc(100%/4);
margin-right: 10px;
height: 50px;
background-color: var(--color-blue-thin);
line-height: 50px;
font-size: 15px;
text-align: center;
display: block;
float: left;
order: -1;
}
/* チェックボタンを非表示 */
.tabu-area input[name="tab_name"] {display: none;}
/* 表示してるボタンの色変更 */
.tabu-area input:checked + .tab_class {
background-color:var(--color-blue);
color: var(--color-white);
position: relative;
}
.tabu-area input:checked + .tab_class::after{
content: "";
background-color:var(--color-blue);
width: 100%;
height: 20px;
position: absolute;
display: block;
top:50px;
}


/* 展開エリア */
.tabu-area .content_class {
display: none;
width: 100%;
margin-top: 20px;
}
.tabu-area input:checked + .tab_class + .content_class {
display: block;
}




/*-----------------------------------------------------*/
/*------------------福利厚生--------------------*/
/*-----------------------------------------------------*/
.benefit{
margin-top: 100px;
}
.benefit .content{
background-color: var(--color-blue);
padding: 40px;
}
@media screen and (max-width: 768px) {
.benefit .content{
padding:20px;
}
}

.benefit .title02 .txt-ja{
color: var(--color-yellow);
}
.benefit .title02 .txt-en{
color: var(--color-white);
}

/* リスト */
.benefit-list{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap:15px 15px;
}
.benefit-list .item{
background-color: var(--color-white);
padding: 20px;
position: relative;
}
.benefit-list .item::before{
content: "";
display: block;
width: 1px;
height: 20px;
position: absolute;
top:0;
left: 0;
right: 0;
margin: 0 auto;
background-color: var(--color-blue);
}
.benefit-list .title{
color: var(--color-blue);
text-align: center;
font-size: var(--s20);
margin-bottom: 10px;
}




/*-----------------------------------------------------*/
/*------------------応募方法--------------------*/
/*-----------------------------------------------------*/
.flow{
margin-top: 100px;
}

@media screen and (max-width: 768px) {
.flow .w800{
margin: 0;
padding: 0;
width: 100%;
}
}


.flow-list{
margin-bottom: 40px;
}
.flow-list .item{
position: relative;
text-align: center;
background: var(--color-blue-thin);
outline: 1px solid var(--color-blue);
display: inline-flex;
justify-content: center;
align-items: center;
flex-flow: column;
vertical-align: top;
border-radius: 50%;
width: 145px;
height: 145px;
word-break : break-all;
padding: 15px;
box-sizing: border-box;
margin: 10px;
color: var(--color-blue);
}
@media screen and (max-width: 768px) {
.flow-list .item{
width: 120px;
height: 120px;
}
}

.flow-list .item::after{
content: "";
position: absolute;
display: block;
width:20px;
height: 1px;
background-color: var(--color-blue);
top:50%;
right: -20px;
}
.flow-list .item:last-child:after{display:none;}


.flow-list .item .number{
margin-bottom: 10px;
}


.flow .address{
margin-top: 40px;
position: relative;
  display: grid;
  place-items: center;
}
.flow .address::before{
content: "";
display: block;
width: 1px;
height: 20px;
position: absolute;
top:0;
left: 0;
right: 0;
margin: 0 auto;
background-color: var(--color-blue);
}
.flow .address .title{
color: var(--color-blue);
text-align: center;
font-size: var(--s20);
margin-bottom: 10px;
}


/*-----------------------------------------------------*/
/*------------------インタビュー--------------------*/
/*-----------------------------------------------------*/
.interview{
margin-top: 100px;
background-color: var(--color-blue-thin);
padding: 80px 0;
}

.interview-list{
display: grid;
grid-template-columns: 1fr 1fr;
align-items: flex-start;
gap: 40px 40px;
margin-top: 50px;
}
@media screen and (max-width: 1100px) {
.interview-list{
gap: 30px 30px;
}
}
@media screen and (max-width: 768px) {
.interview-list{
display:block;
}
}


.interview-list .item{
background-color: var(--color-white);
outline:2px solid var(--color-blue);
}
@media screen and (max-width: 768px) {
.interview-list .item{
margin-bottom: 30px;
}
}

/* 写真（エピソード写真も） */
.interview-list .img{
width: 100%;
height: min(30vw, 450px);
background-image: url(../img/abe-daisuke_img.webp);
background-size: cover;
background-position: center;
}
@media screen and (max-width: 768px) {
.interview-list .img{
height:55vw;
}
}

/* 阿部 大輔 */
.interview-list .abe-daisuke .img {
background-image: url(../img/abe-daisuke_img.webp);
}
/* 秋山 譲 */
.interview-list .akiyama-jyo .img {
background-image: url(../img/akiyama-jyo_img.webp);
}
/* 河野 花果 */
.interview-list .kawano-hanaka .img {
background-image: url(../img/kawano-hanako_img.webp);
}
/* 河瀨 磨奈 */
.interview-list .kawase-mana .img {
background-image: url(../img/kawase-mana_img.webp);
}
/* 小出 季生粋 */
.interview-list .koide-kiotada .img {
background-image: url(../img/koide-kiotada_img.webp);
}
/* 町田 啓輔 */
.interview-list .machida-keisuke .img {
background-image: url(../img/machida-keisuke_img.webp);
}
/* 佐藤 友利恵 */
.interview-list .satou-yurie .img {
background-image: url(../img/satou-yurie_img.webp);
}
/* 長瀬 雄太 */
.interview-list .nagase-yuta .img {
background-image: url(../img/nagase-yuta_img.webp);
}
/* 佐々木 芽衣 */
.interview-list .sasaki-mei .img {
background-image: url(../img/sasaki-mei_img.webp);
}
/* 百井 和希 */
.interview-list .momoi-kazuki .img {
background-image: url(../img/momoi-kazuki_img.webp);
}
/* 蓑島 海 */
.interview-list .minoshima-kai .img {
background-image: url(../img/minoshima-kai_img.webp);
}
/* 佐野 茉貴子 */
.interview-list .sano-makiko .img {
background-image: url(../img/sano-makiko_img.webp);
}




/* 職種 */
.interview-list .img .type{
padding: 3px 10px;
background-color: var(--color-yellow);
}

/* 指名 */
.interview-list .ac-title .name{
font-size: var(--s24);
display: inline-block;
margin-right: 10px;
}
.interview-list .ac-title .name .txt-en{
font-size: var(--s14);
color: var(--color-blue);
}
@media screen and (max-width: 1100px) {
.interview-list .ac-title .name{
font-size: var(--s20);
}
.interview-list .ac-title .name .txt-en{
font-size: var(--s12);
}
}


/* 年 */
.interview-list .ac-title .year{
font-size: var(--s12);
display: inline-block;
background-color: var(--color-blue);
color: var(--color-white);
padding: 3px 10px;
}
@media screen and (max-width: 1100px) {
.interview-list .ac-title .year{
font-size: var(--s10);
}
}

/* アコーディオン関係 */
.interview-list .ac-title{
  background: var(--color-white);
}
.interview-list .change-icon{
background-color: var(--color-blue);
}
.interview-list .change-icon span::before,
.interview-list .change-icon span::after{
  background: var(--color-white);
}


/*内容囲むBOX*/
.interview-content{
padding: 25px;
}
@media screen and (max-width: 1100px) {
.interview-content{
padding: 15px;
}
}
@media screen and (max-width: 768px) {
.interview-content{
padding: 10px;
}
}


/* インタビュータイトル */
.interview-content :is(.wrap01, .wrap02, .wrap03) .title{
color: var(--color-blue);
border-bottom: 2px solid;
padding-bottom: 10px;
font-size: var(--s24);
margin-bottom: -20px;
margin-top: 70px;
}
.interview-content .wrap01 .title{
margin-top: 0px;
}
@media screen and (max-width: 768px) {
.interview-content :is(.wrap01, .wrap02, .wrap03) .title{
font-size: var(--s20);
}
}



/* 質問 */
.interview-content :is(.wrap01, .wrap02, .wrap03) .item-q{
counter-increment: num 0;
background-color: var(--color-blue);
color: var(--color-white);
padding: 5px 20px;
border-radius: 15px;
display: grid;
grid-template-columns: 30px 1fr;
width: 80%;
margin: 50px 0 20px 0;
}
.interview-content :is(.wrap01, .wrap02, .wrap03) .item-q::before{
display: block;
counter-increment:num 1; /* ol_li カウンタの値に1加える */
content: "Q" counter(num); /* before擬似要素のcontentで出力 */
margin-top: 3px;
}

/* 答え */
.interview-content :is(.wrap01, .wrap02, .wrap03) .item-a{
border: 2px solid var(--color-blue);
padding: 10px;
border-radius: 10px;
margin-left: 15%;
position: relative;
}
@media screen and (max-width: 768px) {
.interview-content :is(.wrap01, .wrap02, .wrap03) .item-a{
margin-left: 0;
}
}

.interview-content :is(.wrap01, .wrap02, .wrap03) .item-a::before{
content: "";
display: block;
background-size: cover;
position: absolute;
right: 0;
}

/* 阿部 大輔 */
.interview-list .abe-daisuke .interview-content :is(.wrap01, .wrap02, .wrap03) .item-a::before{
background-image: url(../img/abe-daisuke_icon.webp);
width: 40px;
height: 40px;
top:-42px;
}
/* 阿部 大輔 */
.interview-list .akiyama-jyo .interview-content :is(.wrap01, .wrap02, .wrap03) .item-a::before{
background-image: url(../img/akiyama-jyo_icon.webp);
width: 70px;
height: 40px;
top:-42px;
}
/* 河野 花果 */
.interview-list .kawano-hanaka .interview-content :is(.wrap01, .wrap02, .wrap03) .item-a::before{
background-image: url(../img/kawano-hanako_icon.webp);
width: 50px;
height: 45px;
top:-47px;
}
/* 河瀨 磨奈 */
.interview-list .kawase-mana .interview-content :is(.wrap01, .wrap02, .wrap03) .item-a::before{
background-image: url(../img/kawase-mana_icon.webp);
width: 50px;
height: 45px;
top:-47px;
}
/* 小出 季生粋 */
.interview-list .koide-kiotada .interview-content :is(.wrap01, .wrap02, .wrap03) .item-a::before{
background-image: url(../img/koide-kiotada_icon.webp);
width: 70px;
height: 45px;
top:-47px;
}
/* 町田 啓輔 */
.interview-list .machida-keisuke .interview-content :is(.wrap01, .wrap02, .wrap03) .item-a::before{
background-image: url(../img/machida-keisuke_icon.webp);
width: 70px;
height: 45px;
top:-47px;
}
/* 佐藤 友利恵 */
.interview-list .satou-yurie .interview-content :is(.wrap01, .wrap02, .wrap03) .item-a::before{
background-image: url(../img/satou-yurie_icon.webp);
width: 40px;
height: 40px;
top:-42px;
}
/* 長瀬 雄太 */
.interview-list .nagase-yuta .interview-content :is(.wrap01, .wrap02, .wrap03) .item-a::before{
background-image: url(../img/nagase-yuta_icon.webp);
width: 40px;
height: 40px;
top:-42px;
}
/* 佐々木 芽衣 */
.interview-list .sasaki-mei .interview-content :is(.wrap01, .wrap02, .wrap03) .item-a::before{
background-image: url(../img/sasaki-mei_icon.webp);
width: 40px;
height: 40px;
top:-42px;
}
/* 百井 和希 */
.interview-list .momoi-kazuki .interview-content :is(.wrap01, .wrap02, .wrap03) .item-a::before{
background-image: url(../img/momoi-kazuki_icon.webp);
width: 50px;
height: 40px;
top:-42px;
}
/* 蓑島 海 */
.interview-list .minoshima-kai .interview-content :is(.wrap01, .wrap02, .wrap03) .item-a::before{
background-image: url(../img/minoshima-kai_icon.webp);
width: 50px;
height: 40px;
top:-42px;
}
/* 佐野 茉貴子 */
.interview-list .sano-makiko .interview-content :is(.wrap01, .wrap02, .wrap03) .item-a::before{
background-image: url(../img/sano-makiko_icon.webp);
width: 50px;
height: 40px;
top:-42px;
}



/*---------------*/
/*色変更まとめ*/

/* A-Proに関する質問 */
.interview-content .wrap02 .title{
color: #007593;
}
.interview-content .wrap02 .item-q{
background-color: #007593;
}
.interview-content .wrap02 .item-a{
border: 2px solid #007593;
}

/* プライベート・人柄に関する質問 */
.interview-content .wrap03 .title{
color: #269991;
}
.interview-content .wrap03 .item-q{
background-color: #269991;
}
.interview-content .wrap03 .item-a{
border: 2px solid #269991;
}


/* メッセージ */
.message{
background-color: var(--color-yellow);
margin: 30px 0;
padding: 30px;
border-radius: 15px;
}
@media screen and (max-width: 768px) {
.message{
padding: 20px;
}
}

.message .me-title{
font-size: min(2vw,var(--s34));
position: relative;
margin-bottom: -30px;
}
@media screen and (max-width: 768px) {
.message .me-title{
font-size: 4vw;
position: relative;
margin-bottom: -30px;
}
}

.message .me-title .txt-ja{
position:absolute;
width: 100%;
left: 0;
font-weight:600;
}
.message .me-title .txt-hand-anime{
font-size: min(3vw,var(--s50));
width: 100%;
color: var(--color-white);
text-align: right;
margin-top:10px ;
}
@media screen and (max-width: 768px) {
.message .me-title .txt-hand-anime{
font-size: 5vw;
}
}




.note{
  background-color: var(--color-yellow); /* 背景色 */
  background-image: linear-gradient(90deg, transparent 0%, transparent 50%, var(--color-yellow) 50%,var(--color-yellow) 100%), /* 点線1の色 */
                    linear-gradient(180deg, #fff 1px, transparent 1px); /* 点線2の色と太さ */
  background-size: 8px 100%, /* 点線1のサイズ */
                   100% 2.5em; /* 点線2のサイズ */
  line-height: 2.5em; /* 文字の高さ */
  padding-bottom: 1px; /* 最終行の下にも罫線を引く */
background-repeat: repeat;
}



/* エピソード */
.episode{
background-image: url(../img/interview_back.svg);
background-size:cover;
background-position: center;
margin: -30px -25px -25px -25px;
}
@media screen and (max-width: 1100px) {
.episode{
margin: -20px -40px -40px -40px;
}
}

.episode .ep-title{
color: var(--color-white);
text-align: center;
font-size: var(--s24);
padding-top: 30px;
position: relative;
margin-bottom: 20px;
}
.episode .ep-title::after{
position: absolute;
content: "";
width: 30%;
height: 2px;
background-color: var(--color-yellow);
right: 0;
left: 0;
bottom: -10px;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.episode .ep-title{
font-size: var(--s20);
margin-bottom: 0px;
}
}


.episode .episode-wrap{
padding: 35px;
display: grid;
grid-template-columns: 150px 1fr;
column-gap: 20px;
align-items: flex-start;
color: var(--color-white);
}
@media screen and (max-width: 1100px) {
.episode .episode-wrap{
display:block;
}
}

.episode .episode-wrap .img{
width: 100%;
height: 100px;
outline: 3px solid;
}
@media screen and (max-width: 1100px) {
.episode .episode-wrap .img{
width: 60%;
margin: 0 auto 20px auto;
height: 150px;
}
}
@media screen and (max-width: 768px) {
.episode .episode-wrap .img{
width: 60%;
height: 27vw;
}
}