/*****
2025_renewal02 CSS
******/

@charset "UTF-8";

:root{
    --future-color: #3375aa;
    --future-bg: rgba(101, 170, 221, 0.5);
    --human-color: #65aadd;
    --human-bg: rgba(187, 225, 253, 0.5);
    --culture-color: #0abab5;
	--culture-bg: rgba(10, 186, 181, 0.5);
	--voice-color: #65aadd;
}
@media screen and (min-width: 770px) {
    .pc{ display: block;}
    .sp{ display: none;}
}
@media screen and (max-width: 769px) {
    .pc{ display: none;}
    .sp{ display: block;}
}
a{ cursor: pointer;}

/* ▼▼新卒採用HPインタビュー検索結果 ▼▼ */
.list .item__label--future .item__date { color: var(--future-color);}
.list .item__label--future .item__category { background: var(--future-color);}
.list .item__label--human .item__date { color: var(--human-color);}
.list .item__label--human .item__category { background: var(--human-color);}
.list .item__label--culture .item__date { color: var(--culture-color);}
.list .item__label--culture .item__category { background: var(--culture-color);}
.list .item__label--voice .item__date { color: var(--voice-color);}
.list .item > a:hover .item__ttl { color: #3375aa;}
.keyword .search .other-keyword .btn-trigger { background: #3375aa;}
.color-border__main,
.color-border__main::after{ background: #3375aa;}
.color-border__main::before { background: #40A2E3;}

@media screen and (min-width: 770px) {
    .keyword .search-nav__btn:hover:not(.off) span::before { background: #3375aa;}
    .tag li a:hover { background: #3375aa;}
}
/* ▲▲新卒採用HPインタビュー検索結果 ▲▲ */

/* ▼▼新卒採用HPインタビューVOICE検索結果 ▼▼ */
.list .item__label .item__category { display: none;}
.archive-link-button{ max-width: 558px; height: 118px; background-image: url(/recruit/newgraduate/assets25/img/voice/archive-link-button-bg.png); background-repeat: no-repeat; background-size: contain; border-radius: 10px; color: #fff; display: flex; justify-content: center; align-items: center; margin: 10rem auto; position: relative;}
.archive-link-button::after{ content: url(/recruit/newgraduate/assets25/img/voice/archive-link-button-arrow.png); width: 32px; height: 32px; position: absolute; right: 1.5rem; transition: 0.3s;}
.archive-link-button:hover{ filter: brightness(1.2);}
.archive-link-button:hover::after{ right: 1rem;}

@media screen and (max-width: 769px) {
    .archive-link-button{ width: 100%; background-size: cover;}
}
/* ▲▲新卒採用HPインタビューVOICE検索結果 ▲▲ */

/* ▼▼新卒採用HPインタビュー詳細 共通 ▼▼ */

.interview-wrap{ display: block;}
.interview-wrap .interview-content { width: 100%;}
.interview-wrap .interview-content .caption { font-size: 12px; text-align: right;}
.category-kv__category { background: none; top: 12%; left: 4%; padding: 50px 0;}
.category-kv__category::after{display: none;}
.category-kv__category .en span { font-weight: bold; font-style: italic; font-size: clamp(60px, 7.812vw, 100px); color: #fff; letter-spacing: -3.8px;}
.category-kv__category .ja { color: #fff; font-size: clamp(18px, 2.343vw, 30px); font-family: "Noto Serif JP", serif;}
.category-kv { padding-top: 0;}
.category-kv__sns{ display: none;}

/* add */
img{ width: 100%;}
.serif{ font-family: "Noto Serif JP", serif;}
.italic{ font-style: italic;}
.interview-wrap .interview-content .caption--bottom { margin: 0 0 30px;}
.interview-wrap .interview-title { width: 100%; background: unset; max-width: unset;}
.reverse{ display: flex; flex-direction:row-reverse;}

.category-kv__category{ display: none;}


@media screen and (min-width: 770px) {
    .btn--white.btn-wrap .btn:hover::before { background: #3375aa;}
}
@media screen and (max-width: 769px) {
    .category-kv__category { top: 10%; left: 0; padding: 10px;}
    .category-kv__category .en span{ font-size: clamp(22px, 5.866vw, 50px);letter-spacing: 0;}
    .category-kv__category .ja { font-size: clamp(10px, 2.666vw, 18px);}
}
/* ▲▲新卒採用HPインタビュー詳細 共通 ▲▲ */


/* ▼▼新卒採用HPインタビュー HUMAN ▼▼ */
.human .category-kv__category { top: 2%;}
.human .category-kv__photo { max-width: unset; width: 100%;}
.color--02 .interview-title__h4 { color: var(--human-color);}
.color--02 .interview-main__commitment--ttl .inner { border-bottom: 5px solid var(--human-color);}
.color--02 .interview-main__commitment::before { background: var(--human-bg);}
.color--02 .interview-main__comment::before { background: var(--human-bg);}

@media screen and (max-width: 769px) {
.human .category-kv__category { top: 1.1%;}
}




/* add VOICE*/
.interview-bg{ background: url(/recruit/newgraduate/assets25/img/voice/bg.png); background-repeat: no-repeat; background-size: cover;}

.profile{ background: url(/recruit/newgraduate/assets25/img/voice/profile-bg.png); background-color: #fff; background-size: 100%; letter-spacing: 1.5px;}
.profile-inner{ width: 100%; max-width: 1100px; margin: 0 auto; padding: 30px 25px; position: relative; z-index: 1;}
.profile-years, .profile-group{ font-size: 17px; font-weight: bold;}
.profile-group{ margin-top: 0.5rem; margin-bottom: 1rem;}
.profile-text{ font-size: 12px; line-height: 1.5;}

.index-list {margin-top: 0; position: relative; padding: 1rem 0;}
.index-list-voice { background-color: #fff; border-bottom: 1px solid #27ad83;}
.index-list__title { position: absolute; top: 1rem; left: 1rem; width: 5%;}
.index-list__subTitle{ border-bottom: 1px solid #27ad83; color: #27ad83; display: block; font-size: 25px; letter-spacing: 1.2px; padding-bottom: 0.5rem; width: 100%;}
.index-list__subTitle span{ font-size: 28px; margin-right: 1.5px;}
.index-list__decoLeft{/*左上*/ position: absolute; top: 0; left: 0; border-left: 114px solid #9bcc50; border-bottom: 162px solid transparent;}
.index-list__decoRight{/*右下*/ position: absolute; bottom: -1rem; right: 0; border-left: 84px solid transparent; border-bottom: 193px solid #27ad83;}
.index-list ul{ background-color: unset; border-left:unset; max-width: 850px; margin: 0 auto; padding-top: 3rem;}
.index-list ul li a { border-left: 1px solid #27ad83; display: flex; align-items: center; margin-left: 2rem; min-height: 50px;}
.index-list ul li a::before{ display: none;}
.index-list__bt-line{ }

.interview-mainBg{ background-color: #fff; padding: 2rem 6%;}
.interview-main__photo{ margin-top: 0; margin-bottom: 2rem;}
.interview-main p{ margin-top: 1.5rem;}
.interview-main__comment2_title { background-color: #fff; display: block; font-size: 28px; position: relative; z-index: 0;}
.interview-main__comment2_title::before{content: url(/recruit/newgraduate/assets25/img/voice/interview-main__comment-deco2.png); position: absolute;     z-index: 1; padding-right: 0.5rem; background-color: #fff;}
.interview-main__comment2_title::after { content: ''; display: block; position: absolute; width: 100%; height: 1px; background-color: #27ad83; top: 0; z-index: 0;}
.interview-main__comment2_title span{ font-size: 21px; padding-top: 1rem;}
.interview-main__comment2_title .interview-main__commentTitle.serif { background-color: unset; font-weight: bold; padding-left: 60px; position: relative; z-index: 2;}
.interview-main__schedule .picture-img { width: 100%;}
.interview-main__columnTitle{ background-color: #E6F2D8; color: #fff; display: flex; justify-content: space-between; height: 75px;}

.interview-main__columnTitle span{ display: inline-block; font-size: 20px; height: 100%; letter-spacing: 1.6px;}
.interview-main__columnTitle .column-txtImg,.interview-main__columnTitle .my-obsession-txtImg{margin-right: 2rem;}
.interview-main__columnTitle .column-txtImg { width: 7%;}
.interview-main__columnTitle .my-obsession-txtImg { width: 14%;}
.interview-main__columnTitle .ja-titleBase{ display: flex; align-items: center; clip-path: polygon(0 0, 100% 0%, 78% 100%, 0% 100%); padding-right: 4rem; background-color: #9CCC51; padding-left: 2vw;}
.interview-main__columnTitle .ja-title01{ padding-left: 2rem; width: 32%;}
.interview-main__columnTitle .ja-title02{ justify-content: right; padding-right: 2rem; clip-path: polygon(0 0, 100% 0%, 100% 100%, 22% 100%); width: 37%;}
.interview-main__columnTitle .ja-title03{ padding-left: 2rem; width: 50%;}
.interview-main__columnTitle .column-txtImg img { height: 100%; margin-right: 2rem;}
.interview-main__columnTitle .column-txtImg.reverse img { margin-left: 2rem;}
.interview-main__columnTitle .my-obsession-txtImg img { height: 100%;}


.interview-main2Bg p:nth-of-type(1) { margin-top: 0;}


.color--02 .interview-main__comment{ height: 161px; margin-bottom: 0;}
.color--02 .interview-main__comment-subTitle { border-bottom: 1px solid #27ad83; color: #27ad83; display: block; font-size: 1.8rem; font-weight: 400;     padding: 10px 0 0 1rem; margin-left: 6%;}
.color--02 .interview-main__commentTitle{ background-color: #fff; display: flex; align-items: center; padding-left: 7.5%; padding-bottom: 1rem; border-bottom: 1px solid #27ad83;}
.color--02 .interview-main__comment::before{ content: ''; width: 60px; height: 161px; background: url(/recruit/newgraduate/assets25/img/voice/interview-main__comment-deco1.png); left: 0;}
.color--02 .interview-main__comment .inner::before, .color--02 .interview-main__comment .inner::after{ display: none;}

@media screen and (min-width: 770px) {
    .color--02 .interview-main__commentTitle{ min-height: 113px;}
}

.column-contents{ background-color: #EEF6E0; padding: 25px 0 70px;}
.column__inner{ display: flex; justify-content: space-between; align-items: center; max-width: 940px; margin: 0 auto; padding: 0 20px;}
.column__picture{ width: 43%;}
.column__comment{ background-color: #fff; border-radius: 10px; padding: 20px 20px 30px; width: 53%;}
.column__comment p.column__comment-tit{ color: #27ad83; font-size: 22px; margin-top: 0; margin-bottom: 0.5rem; line-height: 1.5;}
.column__comment p.column__comment-txt{ font-size: 14px; margin-top: 1rem;}
.column__comment p.column__comment-txt{ margin-top: 1rem; line-height: 1.7;}
.column__comment p.column__comment-txt.txtTop{ margin-top: 0;}

.column__comment-number{ margin-left: 1rem; text-indent: -0.8rem; padding-left: 0.8rem; position: relative;}
.column__comment-number::before{ content: ''; display: inline-block;}
.column__comment-number.no1::before{ content: '1.';}
.column__comment-number.no2::before{ content: '2.';}
.column__comment-number.no3::before{ content: '3.';}

.column1 .column__inner{ max-width: 976px; position: relative;}
.column1 .column__itemwrap { padding-top: 25px; width: 100%;}
.column1 .column1-deco{ position: absolute; right: 0; width: 25%;}
.column1 .column__comment{ position: absolute; width: 67%; right: 0; bottom: 0; padding: 1rem;}
.column1 .column__picture{ display: flex; justify-content: space-between; position: relative; width: 100%;}
.column1 .column__picture .img01{ width: 30%; height: auto; object-fit: cover;}
.column1 .column__picture_img02{ width: 39%; position: absolute; left: 50%; transform: translate(-50%); z-index: 2;}
.column1 .column__picture .img03{ width: 32%; position: absolute; top: 3rem; right: 0; z-index: 1;}


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

    .index-list { padding: 2rem 0 2rem;}
    .index-list ul { width: 90% !important; padding: 4rem 1rem 3rem;}
    .index-list__title {min-width: 50px;}
    .index-list__decoLeft { border-left: 170px solid #9bcc50; border-bottom: 82px solid transparent;}
    .index-list__decoRight { border-left: 130px solid transparent; border-bottom: 73px solid #27ad83;}
    .index-list__subTitle { font-size: 20px; padding-top: 1rem;}
    .index-list__subTitle span { font-size: 24px; padding-top: 1rem;}

    .color--02 .interview-main__comment { margin-top: 3rem;}
    .color--02 .interview-main__comment::before { height: 60px; background-size: contain; background-repeat: no-repeat;}
    .color--02 .interview-main__comment-subTitle { font-size: clamp(22px, 3.511vw, 27px); padding: 2vw 2vw 2vw 5vw; height: 60px; display: flex; align-items: center; margin-left: 0;}
    .color--02 .interview-main__commentTitle { font-size: clamp(16px, 2.340vw, 18px); padding-top: 3vh; padding-right: 4vw; padding-bottom: 3vh; padding-left: 4vw;}
    
    .interview-main__comment2_title .interview-main__commentTitle{ padding-bottom: 3vh;}
    .interview-main__columnTitle .ja-titleBase { padding-left: 1rem; width: 100%;}
    .interview-main__columnTitle .column-txtImg { width: 10%; min-width: 50px;}
    .interview-main__columnTitle .my-obsession-txtImg { min-width: 70px;}
    .interview-main__columnTitle.reverse { flex-direction: row;}
    .interview-main__columnTitle .ja-title02 { clip-path: polygon(0 0, 100% 0%, 78% 100%, 0% 100%); justify-content: left;}
    .interview-main__columnTitle .column-txtImg.reverse img { margin-left: 0;}
    .interview-main__columnTitle.kodawari span.ja-title03 { font-size: 1rem; padding-right: 2rem;}
    .column-contents.column1 { padding-top: 0;}

    .column1 .column__itemwrap { padding-top: 25px; width: 100%;}
    .column1 .column1-deco { right: 20px; width: 46%;}
    .column1 .column__picture-top { display: flex; justify-content: center; gap: 5px;}
    .column1 .column__picture-top .img01 { object-fit: cover; width: 40%; min-height: 214px;}
    .column1 .column__picture_img02 { position: relative; width: 55%; object-fit: contain; left: unset; transform: unset; align-self: center;}
    .column1 .column__picture .img03 { position: relative; width: 100%; top: 0; z-index: unset;}
    .column1 .column__comment { position: relative; width: 100%;}
    .column__comment p.column__comment-tit { line-height: 1.3; margin-bottom: 1rem;}
    .column__inner { flex-direction: column-reverse;}
    .column__picture,.column__comment{ width: 100%;}
    .column__picture{ margin-top: 1rem;}
}
@media screen and (max-width: 400px) {
    .color--02 .interview-main__comment-subTitle{ padding-left: 6vw;}
}

.mb-space5{ margin-bottom: 5rem;}
.mt-space3{ margin-top: 3rem;}


/* ▲▲新卒採用HPインタビュー HUMAN ▲▲ */

/* ▼▼新卒採用HPインタビュー VOICE 私の仕事の相棒ver2 ▼▼ */
.column__comment_ver2 { flex-direction: column;}
.column__comment_ver2 .img01 { position: absolute; width: 30%; bottom: 0; left:0; max-height: 500px; object-fit: contain;}
.column__comment_ver2 .img01.max-h_no { max-height: unset; }
.column__comment_ver2 .column__picture_img02 { position: relative; width: 42%;}
.column__comment_ver2 .column__comment-wrap { display: flex; gap: 10px; position: relative; width: 100%; justify-content: right;}
.column__comment_ver2 .column__comment { width: 46%; position: relative;}
.column__comment_ver2 .column__comment.single__comment { width: 68%;}
.column__comment_ver2 figure { position: relative; width: 23%; display: flex; flex-direction: column; gap: 10px;}
.column__comment_ver2 figure img { height: 50%; object-fit: cover;}

@media screen and (min-width: 770px) {
.bottom { bottom: 0;}
}

@media screen and (max-width: 769px) {
    .column__comment_ver2.flex { display: flex; flex-direction: row; justify-content: space-between; margin-top: 10px; width: 100%;}
    .column__comment_ver2.flex img { width: 49%; }
}
/* ▲▲新卒採用HPインタビュー VOICE 私の仕事の相棒ver2 ▲▲ */

/* ▼▼新卒採用HPインタビュー VOICE 私の仕事の相棒ver3 ▼▼ */
.column__inner.column__comment_ver3 { align-items: end; max-width: 1020px;}
.column__comment_ver3 .img01 { width: 28%; object-fit: contain;}
.column__comment_ver3 .column__itemwrap { width: 42%; display: flex; flex-direction: column; justify-content: space-between; padding-top: 0; gap: 20px;}
.column__comment_ver3 .column__picture_img02 { position: relative; width: 100%;}
.column__comment_ver3 .column__comment { position: relative; width: 100%;}
.column__comment_ver3 figure { width: 28%; display: flex; flex-direction: column; align-self: self-end;}
.column__comment_ver3 .column1-deco { position: relative; width: 100%; margin-bottom: 1rem;}
.column__comment_ver3 .img04 { margin-bottom: 1rem;}
/* ▲▲新卒採用HPインタビュー VOICE 私の仕事の相棒ver3 ▲▲ */