/*****
2025_renewal CSS
******/

@charset "UTF-8";

/* common */
body{position: relative;}
.container{ max-width: 1240px; padding: 0 20px; margin: 0 auto;}
.fl-box{ display: flex; flex-wrap: wrap;}
.box-bg{ cursor: pointer;}
.en{ text-transform: uppercase;}
.off{ opacity:0.5; pointer-events: none;}
.no-btn { text-align: right;}

/* background-animation */
 .background-lines { position: absolute; top: -200px; left: 0; width: 100%; height: 100% !important; overflow: hidden; pointer-events: none; z-index: -1;}
.line { position: absolute; top: 0; height: 0; opacity: 0; transform-origin: top; mix-blend-mode: multiply;}
body.is-loaded .line { animation: rise 4s ease-out; animation-iteration-count: 1; animation-fill-mode: forwards;}

.line1 { width: 100px; left: 40%; background: #00ffff; animation-delay: 1.5s; transform: rotate(20deg);}
.line2 { width: 50px; left: -42%; background: #0d65a4; animation-delay: 2s; transform: rotate(324deg);}
.line3 { width: 50px; right: 6%; background: #00ffff; animation-delay: 1s; transform: rotate(20deg);}
.line4 { width: 30px; right: 3%; background: #0d65a4; animation-delay: 2s; transform: rotate(0deg);}
@media screen and (max-width: 769px) {
    .line1 { width: 50px; left: 160%; transform: rotate(18deg);}
    .line2 { width: 50px; left: -292%; transform: rotate(324deg);}
    .line3 { width: 50px; left: -270%; transform: rotate(335deg);}
    .line4 { width: 20px; right: 3%; transform: rotate(0deg);}
}

@keyframes rise {
  0% {
    height: 0;
    opacity: 0;
  }
  30% {
    opacity: 0.5;
  }
  70%{
    opacity: 0.8;
  }
  100% {
    height: 120%;
    opacity: 1;
  }
}

.loader .loaderInner{ width: 300px;}
.loader .loaderInner .loaderIcon__title { width: 100%;}

/* header_footer共通 */
.menu { background: #3375aa;}
.menu__navi .list a::before{ background: url(../img/common2025/icon_arrow_white.png) no-repeat center; background-size: contain;}
.menu__navi .list-wrap__ttl { font-weight: bold;}
.menu__navi .list-wrap__ttl span { font-weight: 300;}
.menu__navi .list li { margin-bottom: 1rem;}
.menu__navi .list a { font-size: 14px; font-weight: 600; line-height: 1.8;}
.menu__navi .list a.en {font-size: 15px;}
.menu__navi .list span { display: block; font-size: 11px;}
@media screen and (max-width: 769px) {
    .menu__navi .list a { line-height: 1.3;}
}

/* header */
.header { backdrop-filter: blur(10px); background: unset;}
.header .menu.active::after{ background-color: unset;}
.header .menu__navi .list span { padding-left: 1rem;}
.header__navi .btn-menu{ border-left: none;}
.header__navi .highlight { display: flex; border-left: none; align-items: center;}
.header__navi .highlight .btn-wrap { width: 160px; background: #0abab5; border-right: 0; display: inline-block;}
.header__navi .highlight .btn-wrap a:hover { background-color: #80dbd9;}
.header__navi .highlight .btn-wrap a:hover span { color: #3375aa;}
.header__navi .highlight .btn-wrap:first-child { background: #0071bc; border-bottom: none;}
.header__navi .highlight .btn-wrap:first-child a:hover { background-color: #65aadd;}
.header__navi .highlight .btn-wrap:first-child a:hover span { color: #80dbd9;}
.header__navi .highlight .btn-wrap .btn{ position: relative;}
.header__navi .highlight .btn-wrap .btn.header-arrow::after{content: ''; width: 15px; height: 15px; display: inline-block; margin-left: .5rem; transition: .3s;}
.header__navi .highlight .btn-wrap .header-arrow-blue::after{ background: url('/recruit/newgraduate/assets25/img/top2025/arrow-blue.svg'); background-position: center; background-repeat: no-repeat; background-size: contain;}
.header__navi .highlight .btn-wrap .header-arrow-lightBlue::after{background: url('/recruit/newgraduate/assets25/img/top2025/arrow-lightblue.svg'); background-position: center; background-repeat: no-repeat; background-size: contain;}
.header__navi .highlight .btn-wrap .header-arrow-blue:hover::after,
.header__navi .highlight .btn-wrap .header-arrow-lightBlue:hover::after{opacity: .5;}
.header__navi .btn-menu__line span:first-child { background: #3375aa;}
.header__navi .btn-menu__line span { background: #80dbd9;}
.header__navi .btn-menu__line span:last-child { background: #65aadd;}
.header__navi .mega-trigger .mega .mega-about { padding: 0 0 45px;}
.header__navi .mega-trigger .mega .mega-about ul .scale { height: 154px;}
.header__navi .mega-trigger .mega .mega-about ul li a { height: 154px;}
.header__navi .mega-trigger .mega .mega-about ul li a .icon-out-link:after { display: none;}

.btn--white.btn-wrap .btn:hover::before { background: #0071bc;}

@media screen and (max-width: 769px) {
    .header__navi .highlight { display: none;}
    .header .menu { background: #3375aa;}
    .header .menu__news .news__detail { width: 77%; font-size: 100%;}
    .header .menu__navi {row-gap: 20px;}
    .header .menu__navi .list-wrap:nth-child(3) { margin-top: 0;}
    .header .menu__navi .list-wrap:last-of-type { margin-top: 0;}
    .header .menu__navi .list a { border-bottom: none;}
    .header .menu__navi .list a.ja{font-size: 11px; word-break: keep-all;}
    .header .menu__navi .list a.btm-border { border-bottom: dotted 1px rgba(255, 255, 255, 0.3);}
    .header .menu__navi .list.l-height li.btm-border {padding-bottom: 1rem; border-bottom: dotted 1px rgba(255, 255, 255, 0.3);}
    .header .menu__navi .list.l-height li.btm-border:not(:last-child){ margin-bottom: 0;}
        
}

/* footer entry-btn my-page-btn */
.bottom-navi a { width: calc(100% / 3);}
.bottom-set::before{ display: none;}
.bottom-set .entry-mypage { margin: 4rem auto;}
.bottom-set .entry-mypage a { background: #fff; border: solid 1px #231815; color: #231815; position: relative;}
.bottom-set .entry-mypage a .ico-arrow { display: flex; align-items: center;}
.bottom-set .entry-mypage a .ico-arrow::after{ content: ''; width: 20px; height: 20px; background: url('/recruit/newgraduate/assets25/img/top2025/arrow-white.svg'); background-size: contain; background-position: center; display: inline-block; margin-left: .5rem;}
.bottom-set .entry-mypage a:hover .ico-arrow::after{ background: url('/recruit/newgraduate/assets25/img/top2025/arrow-blue.svg');}
.btn--arrow.color-reverse:hover { color: #fff;}
.btn--arrow.color-reverse::before { background: #3370a2;}
.btn--arrow.color-reverse:hover::after{ display: none;}
.btn--arrow.color-reverse:hover .inner::before,
.btn--arrow.color-reverse:hover .inner::after{ display: none;}
@media screen and (max-width: 769px) {
    .bottom-set .entry-mypage a .ico-arrow { justify-content: center;}
    .bottom-navi a { background: #0abab5; font-size: 10px;}
    .bottom-navi a.entry { background: #0071bc;}
}

/* footer */
.footer .menu__navi .list span { padding-left: 1rem;}
.footer .menu__navi .list.l-height li { line-height: 1.5; margin-bottom: 0.5rem;}
.footer .menu__navi .list a::before{ background: url(../img/common2025/icon_arrow_white.png) no-repeat center; background-size: contain;}
.footer .menu__navi .list-wrap:last-of-type dl { margin-bottom: 15px;}
.footer .menu__navi { row-gap: 20px;}
.footer .menu__navi .list-wrap:nth-child(3),
.footer .menu__navi .list-wrap:nth-child(4) { margin-top: 0;}
@media screen and (max-width: 769px) {
    .footer .menu__navi .list a.ja{font-size: 11px;}
}

/* recommend（旧：pickup） */
.pickup { background-image: url('/recruit/newgraduate/assets25/img/common2025/recommend-bg.png'); padding: 0 0 50px;}
.pickup::before {content: none;}
.pickup-content { max-width: unset;}
.pickup-title { transform: rotate(0); padding-left: 50px; margin-bottom: 2rem; position: relative; align-items: end;}
.pickup-title .ja { font-size: 18px; margin-left: 0;}
.pickup-title .ja span { -webkit-transform: rotate(0); transform: rotate(0); letter-spacing: 1.25px;}
.pickup-title .en { font-style: italic;}
.pickup-title .en span { display: inline-block; background-color: #71f8fd; font-weight: bold; padding: 3rem 3rem 0 3rem; clip-path: polygon(7% 0%, 100% 0%, 93% 100%, 0% 100%);}
.pickup-list { width: 100%;}
.pickup-list .list::after { content: none;}


/* KV */
.index .kv { display: flex; padding-top: unset; height: unset;}
.index .kv__catch { left: 3%; top: 9.63%;}
.index .kv .col-1{ width: 70%; position: relative;}
.index .kv .col-2{ width: 30%; display: flex; flex-direction: column; justify-content: space-between; background: rgba(101, 170, 221, 0.5);}

.index .news { width: 100%; height: 18.05vw; margin: unset; padding: 1.56vw 2.5vw !important;}
.news__titl { width: 4vw; position: relative; margin-bottom: 1.7vw;}
.news__detail{ width: 95%; border-bottom: 1px solid #fff; color: #fff; flex-direction: column; font-size: 120%; margin-bottom: 1vw; padding-bottom: .5vw;}
.news__detail dt { font-size: max(12px, .8vw); padding: 0 1vw 0 0;}
.news__detail dd { font-size: max(14px, 1vw);}
.news__detail a.c-link{ border-bottom: unset; color: #fff; cursor: pointer; text-decoration: none; transition: 0.3s;}
.news__detail a:hover{ color: #231815; text-decoration: underline;}
.kv__insta{ background: url("/recruit/newgraduate/assets25/img/top2025/instagram-bg.webp"); background-size: cover; background-position: top; height: max(226px, 20vw);}
.kv__insta .insta__inner { padding: 0 0 0.8vw;}
.kv__insta .insta__titl{ color: #fff; display: flex; justify-content: center; align-items: center; font-size: max(14px, 1.09vw); text-align: center; padding: max(12px, 0.6vw) 0;}
.kv__insta .insta__titl img{ width: 1.6vw; margin-right: .5vw;}
/* slick */
.slick-slide { overflow: hidden; display: flex; justify-content: center; align-items: center; margin-left: 1vw;}
.slick-slide .img-insta { padding-top: max(165px, 16vw); background-size: cover; background-position: 50%;}
@media screen and (min-width: 770px) {
    .news__inner{ height: 12vw; /*min-height: 140px;*/}
	
}
@media screen and (max-width: 1050px) {
	.index .news{ height: 17.05vw;}

	.kv__insta { height: max(230px,23vw;);}
	.slick-slide .img-insta{ padding-top:max(176px, 16vw);}
}
@media screen and (max-width: 769px) {
	.index .news { height: 53vw; padding: 5.56vw 5.5vw;}
	.news__titl { width: 10%; min-width: 80px; margin-bottom: 2vw; padding-top: 5vw;}
	.kv__contents .news__inner{ height: 30vw;}
	
	.kv__insta { height: 81vw;}
	.kv__insta .insta__titl { font-size: 18px; padding: max(12px, 2.6vw) 0;}
	.kv__insta .insta__titl img { width: 20px;}
	.slick-slide .img-insta { padding-top: max(248px, 66vw);}
}

/* hover-action */
.box-bg { cursor: pointer; overflow: hidden; position: relative; width: 100%;}
.box-bg img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease;}
.box-bg:hover > img { transform: scale(1.1);}
.box-bg a { align-items: center;bottom: 0; color: #fff; display: flex; justify-content: center; left: 0; position: absolute; right: 0; top: 0; width: 100%;}


/* cont */
.cont{ justify-content: space-between; row-gap: 3rem;;}
.cont__item.item-1,
.cont__item.item-3{ width: 60%;}
.cont__item.item-2,
.cont__item.item-4{ width: 35%;}
.cont__titlBox{ display: flex; align-items: center; margin-bottom: 1rem;}
.cont__titl,
.cont__titl-sub{ display: inline-block;}
.cont__titl{ margin-right: .5rem;}
.cont__item.item-1 .cont__titl{ width: 25%; max-width: 180px;}
.cont__item.item-2 .cont__titl{ width: 20.238%; max-width: 250px;}
.cont__item.item-3 .cont__titl{ width: 18.055%; max-width: 130px;}
.cont__item.item-4 .cont__titl{ width: 45.714%; max-width: 250px;}
.cont__item.item-1 .cont__titl-sub{ width: 45.138%; max-width: 325px;}
.cont__item.item-2 .cont__titl-sub{ width: 59.523%; max-width: 255px;}
.cont__item.item-3 .cont__titl-sub{ width: 46.25%; max-width: 333px;}
.cont__item.item-4 .cont__titl-sub{ width: 45.238%; max-width: 190px;}

.cont__item.item-1 .fl-box { justify-content: space-between;}
.cont__item.item-1 .item__box01{ width: 65.611%; background: url('/recruit/newgraduate/assets25/img/top2025/experience-01.webp'); background-size: cover; background-repeat: no-repeat; background-position: top; display: flex; height: 17vw; max-height: 222px; position: relative;}
.cont__item.item-1 .item__box01 .item__tag{width: 37.371%; position: relative; top: 0; left: 0; }
.cont__item.item-1 .item__box01 .item__tag img { width: 100%; position: absolute; mix-blend-mode: multiply;}
.cont__item.item-1 .item__box01 .item__tag p { color: #fff; font-size: clamp(18px, 4.8vw, 23px); padding: .5rem 2rem .5rem 1rem; position: absolute; top: 0; left: 0;}
.cont__item.item-1 .item__box01 a{ color: #ffffff; font-size: clamp(13px, 3.466vw, 15px); transition: .3s;}
.cont__item.item-1 .item__box01 a .item__txt span{ width: 100%; display: flex; align-items: center; font-size: clamp(18px, 4.8vw, 23px); font-weight: bold;}
.cont__item.item-1 .item__box01 a .item__txt span img { width: 18px; margin-right: .3rem;}
.cont__item.item-1 .item__box01 a .item__txt { position: absolute; bottom: .5rem; left: 1rem;}
.cont__item.item-1 .item__box01 .item__summer,
.cont__item.item-1 .item__box01 .item__winter { position: absolute; bottom: 0; width: 50%; height: 52%;}
.cont__item.item-1 .item__box01 .item__summer { mix-blend-mode: hard-light; left: 0;}
.cont__item.item-1 .item__box01 .item__summer-bg { background-color: #0abab5; width: 100%; height: 100%;}
.cont__item.item-1 .item__box01 .item__winter { mix-blend-mode: hard-light; right: 0; width: 50%;}
.item__winter-bg { background-color: rgb(7, 107, 175); width: 100%; height: 100%;}
.cont__item.item-1 .item__box01 a:hover{ height: 100%; mix-blend-mode: normal;}
.cont__item.item-1 .item__box02 { width: 30.833%; height: 17vw; max-height: 222px; overflow: hidden; position: relative;}
.cont__item.item-1 .item__box02 .box-bg{ width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: top; position: absolute; transition: transform .6s ease;}
.cont__item.item-1 .item__box02:hover .box-bg{ transform: scale(1.1);}
.cont__item.item-1 .item__box02 a { width: 100%; height: 100%; display: block; position: relative;}
.cont__item.item-1 .item__box02 a .item__txt { bottom: 0; display: block; position: absolute; height: 40%; width: 100%;}
.cont__item.item-1 .item__box02 a .item__txt img.bg { width: 100%; height: 100%; position: absolute; left: 0; mix-blend-mode: multiply; z-index: 0;}
.cont__item.item-1 .item__box02 a .item__txt img.txt { position: absolute; left: .5rem; bottom: .5rem; max-width: 171px;}

.cont__item.item-2 .item__box01{ width: 100%; height: 17vw; max-height: 222px; overflow: hidden; position: relative;}
.cont__item.item-2 .item__box01 .box-bg{ width: 100%; height: 100%; background: url('/recruit/newgraduate/assets25/img/top2025/voice01.webp'); background-size: cover; background-repeat: no-repeat; background-position: top; position: absolute; transition: transform .6s ease;}
.cont__item.item-2 .item__box01:hover .box-bg{ transform: scale(1.1);}
.cont__item.item-2 .item__box01 a{ color: #0d65a4; font-size: clamp(13px, 3.466vw, 15px); width: 100%; height: 100%; line-height: 1.5; position: absolute; display: flex; flex-direction: column; justify-content: end; padding: 0 0 .5rem 1rem;}
.cont__item.item-2 .item__box01 a span{ display: block; font-size: clamp(18px, 4.8vw, 23px); font-weight: bold; }

.cont__item.item-3 .fl-box{ justify-content: space-between; gap: 10px;}
.cont__item.item-3 .item__box01{ width: 60.777%; height: 17vw; max-height: 222px; overflow: hidden; position: relative;}
.cont__item.item-3 .item__box01 .box-bg{ width: 100%; height: 100%; background: url('/recruit/newgraduate/assets25/img/top2025/recruit-01.webp'); background-size: cover; background-repeat: no-repeat; background-position: top; position: absolute; transition: transform .6s ease;}
.cont__item.item-3 .item__box01:hover .box-bg{ transform: scale(1.1);}
.cont__item.item-3 .item__box01 a { width: 100%; display: flex; align-items: center; justify-content: space-between; bottom: 0; height: 100%;}
.cont__item.item-3 .item__box01 a .item__txt span:nth-child(1){ font-size: clamp(18px, 4.8vw, 23px);}
.cont__item.item-3 .item__box01 .item__txt { width: 100%; background-color: rgba(35, 24, 21, 0.5); color: #fff; font-size: clamp(13px, 3.466vw, 15px); display: flex; align-items: center; justify-content: space-between; padding: .5rem 1rem; position: absolute; bottom: 0;}
.cont__item.item-3 .item__box02{ width: 35.277%;}
.cont__item.item-3 .item__box02 .item__list{height: 100%;}
.cont__item.item-3 .item__box02 .item__list li { height: 50%;}
.cont__item.item-3 .item__box02 .item__list a { width: 100%; height: 100%; color: #ffffff; display: flex; justify-content: center; align-items: center; transition: .3s;}
.cont__item.item-3 .item__box02 .item__list a:hover{ opacity: .5;}
.cont__item.item-3 .item__box02 .item__list .list1 { background-color: #076baf; position: relative;}
.cont__item.item-3 .item__box02 .item__list .list1 a::after,
.cont__item.item-3 .item__box02 .item__list .list2 a::after{ position: relative; content: ''; display: block; width: 20px; height: 20px; background-position: center; background-size: contain; background-repeat: no-repeat; margin-left: .5rem; transition: .3s;}
.cont__item.item-3 .item__box02 .item__list .list1 a::after{ background: url('/recruit/newgraduate/assets25/img/top2025/arrow-blue.svg'); }
.cont__item.item-3 .item__box02 .item__list .list2 a::after{ background: url('/recruit/newgraduate/assets25/img/top2025/arrow-lightblue.svg'); }
.cont__item.item-3 .item__box02 .item__list a:hover::after{ transform: translateX(5px);}
.cont__item.item-3 .item__box02 .item__list .list2 { background-color: #0abab5;}

.cont__item.item-4 .h01 a > span { display: flex; width: 100%; flex-direction: column; align-items: center; line-height: 1.8;}
.cont__item.item-4 .h01 a > span .arrow { width: 16px;}





@media screen and (min-width: 770px) {
    .cont{ margin-top: 50px;}
    .cont__item.item-1 .item__box02 a .item__txt img.txt {width: 65%;}
    .cont__item.item-1 .item__box01 .item__tag { min-width: 190px;}
    .cont__item.item-4 .grid { display: grid; height: 17vw; max-height: 222px; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 7px; grid-row-gap: 4px; grid-template-rows: 60% 40%;}
    .cont__item.item-4 .grid1 { grid-area: 1 / 1 / 2 / 2; }
    .cont__item.item-4 .grid2 { grid-area: 1 / 2 / 2 / 3; }
    .cont__item.item-4 .grid3 { grid-area: 2 / 1 / 3 / 2; }
    .cont__item.item-4 .grid4 { grid-area: 2 / 2 / 3 / 3; }
}


@media screen and (max-width: 769px) {
    .index .kv { flex-direction: column;}
    .index .kv .col-1 { width: 100%; position: relative;}
    .index .kv__catch { top: 27%;}
    .index .kv .col-2 {width: 100%;}

    .news {padding: 20px;}
    .news__titl { width: 10%; min-width: 80px; margin-bottom: 2%;}
    .news__detail a.c-link { color: #231815; border-bottom: 1px solid #231815;}

    .kv__contents .news__inner { width: 100%;}
    .kv__contents .news__inner .news__detail { width: 95%;}

    .cont.fl-box { flex-direction: column; margin-top: 30px;}
    .cont__item.item-1 .fl-box,
    .cont__item.item-3 .fl-bo { flex-direction: column; gap: 10px;}
    .cont__item.item-1 .item__box01,
    .cont__item.item-2 .item__box01,
    .cont__item.item-3 .item__box01{ width: 100%; height: 31vw; min-height: 140px;}
    .cont__item.item-1 .item__box02 { width: 100%; height: 31vw; min-height: 248px;}
    .cont__item.item-3 .item__box02 { width: 100%;}
    .cont__item.item-1, .cont__item.item-3, .cont__item.item-2, .cont__item.item-4 { width: 100%;}
    .cont__item.item-1 .cont__titl { width: 35%; min-width: 120px;}
    .cont__item.item-1 .cont__titl-sub { width: 58%; min-width: 200px;}
    .cont__item.item-2 .cont__titl { width: 17%; min-width: 60px;}
    .cont__item.item-2 .cont__titl-sub { width: 47%; min-width: 164px;}
    .cont__item.item-3 .cont__titl { width: 25%; min-width: 88px;}
    .cont__item.item-3 .cont__titl-sub { width: 56%; min-width: 225px;}
    .cont__item.item-4 .cont__titl { width: 30%; min-width: 134px;}
    .cont__item.item-4 .cont__titl-sub { width: 34%; min-width: 122px;}
    .cont__item.item-1 .item__box01 .item__tag { min-width: 150px;}
    .cont__item.item-1 .item__box01 .item__tag p { font-size: clamp(18px, 4.8vw, 37px);}
    .cont__item.item-1 .item__box01 a .item__txt span img { width: 14px;}
    .cont__item.item-1 .item__box01 a .item__txt { left: .5rem;}
    .cont__item.item-3 .item__box02 .item__list li { width: 100%; padding: 1.5rem 0;}
    .cont__item.item-4 .item__box01 { display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 10px;}
    .cont__item.item-4 .item__box01 li { flex-basis: calc((100% - 10px) / 2);}

	.cont__item.item-1 .item__box01 .item__summer,
	.cont__item.item-1 .item__box01 .item__winter { height: 42%;}

}


@media screen and (max-width: 500px) {
    .cont__item.item-4 .h01 a > span { font-size: 14px;}
}