@charset "UTF-8";

/*-------------------------
__top_style
-------------------------*/
    
:root {
    --navy: #23374b;
    --blue: #0062b1;
}

/*-------------------------
__メインビジュアルからお知らせまで
-------------------------*/

#header .inner .header_menu .header_title.header_title_top{ display: block;}
#header .inner .header_menu .header_title.header_title_contents{ display: none;}

.video_wrap{ position: relative; width: 100%; height: 100vh;}
.video_wrap .pattern{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(3,31,54,0.3); z-index: 2;}
.video_wrap video{ position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); min-width: 100%; min-height: 100%; z-index: 1;}

#main{ width: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 3;}

#fv_box{ width: 100%; height: 100vh; position: relative;}
#fv_box .main_com{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 950px; width: 90%; height: auto;}
#fv_box .main_com img{ width: 100%; height: auto;}
#fv_box .scroll_btm{ position: absolute; bottom: 40px; right: 50px; width: 125px; height: 125px;}
#fv_box .scroll_btm a{ display: block; position: relative;}
#fv_box .scroll_btm a .arrow{ position: relative; display: inline-block; width: 17px; height: 2px; margin: 0; border-radius: 9999px; background-color: #fff; margin-right: 15px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(90deg);}
#fv_box .scroll_btm a .arrow::before,
#fv_box .scroll_btm a .arrow::after{ content: ""; position: absolute; top: calc(50% - 1px); right: 0;  width: 10px; height: 2px; border-radius: 9999px; background-color: #fff; transform-origin: calc(100% - 1px) 50%;}
#fv_box .scroll_btm a .arrow::before{ transform: rotate(45deg);}
#fv_box .scroll_btm a .arrow::after{ transform: rotate(-45deg);}
@keyframes rotateAnimation {
  from{transform: rotate(0deg);}
  to{transform: rotate(-360deg);}
}
#fv_box .scroll_btm a .circle{ display: block; width: 125px; height: 125px; animation: rotateAnimation 7s linear infinite;}

#prologue_box{ width: 100%; height: 100vh; position: relative;}
#prologue{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; width: 100%;}
#prologue h2{ font-size: 3em; line-height: 1.6em; color: #fff; margin-bottom: 30px; font-weight: 700;}
#prologue h2 span{ display: block;}
#prologue .prologue_com{ font-size: 1.8em; line-height: 2em; color: #fff; font-weight: 700;}
#prologue .prologue_com p{ margin-bottom: 30px;}

#top_contents{ position: relative; z-index: 10; background-color: #fff;}

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

#fv_box{ height: 100svh;}
#fv_box .main_com{ width: 80%; height: auto;}

#prologue_box{ width: 100%; height: 100svh;}
#prologue{ width: calc(100% - 110px);}
#prologue h2{ font-size: 2.8em; margin-bottom: 30px;}
#prologue .prologue_com{ font-size: 1.7em;}
#prologue .prologue_com p{ margin-bottom: 30px;}

}

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

#fv_box .main_com{}
#fv_box .scroll_btm{ bottom: 30px; right: 30px; width: 100px; height: 100px;}
#fv_box .scroll_btm a .circle{ display: block; width: 100px; height: 100px;}
#fv_box .scroll_btm a .circle img{ width: 100px; height: 100px;}

#prologue_box{ height: calc(100vh + 60px); padding: 30px 0; box-sizing: border-box;}
#prologue{ width: calc(100% - 80px);}
#prologue h2{ font-size: 2.3em; margin-bottom: 30px;}
#prologue .prologue_com{ font-size: 1.4em; line-height: 2em; text-align: left;}
#prologue .prologue_com p{ margin-bottom: 20px;}

}


/*-------------------------
__トピックス表示
-------------------------*/

#information{ background-color: #fff;}
#information .inner{ width: 100%; max-width: 1310px; margin: 0 auto; padding: 45px 55px; box-sizing: border-box; display: flex; align-items: center;}
#information .inner .info_title{ width: 150px; font-size: 2em; color: var(--blue); margin-right: 30px;}
#information .inner .info_post{ width: calc(100% - 240px); display: flex; align-items: center; margin-right: 30px;}
#information .inner .info_post ul{ width: 100%;}
#information .inner .info_post ul li{ margin: 10px 0;}
#information .inner .info_post ul li a,
#information .inner .info_post ul li span{ display: flex; color: var(--navy);}
#information .inner .info_post ul li a p.title{ text-decoration: underline;}
#information .inner .info_post ul li p{ font-size: 1.5em; line-height: 1.4;}
#information .inner .info_post ul li p.date{ width: 100px; color: #969699;}
#information .inner .info_post ul li p.title{ width: calc(100% - 100px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
#information .inner .info_post ul li p.title a{ color: var(--navy); text-decoration: underline;}
#information .inner .info_more{ width: 80px; text-align: center;}
#information .inner .info_more a{ color: var(--blue); font-size: 1.3em; display: block; border: 1px solid var(--blue); padding: 10px 0; box-sizing: border-box;}

@media screen and (max-width:999px){
#information .inner{ padding: 35px 55px;}
#information .inner .info_post ul li p{ font-size: 1.4em;}
}

@media screen and (min-width: 768px) {
#information .inner .info_post ul li a,
#information .inner .info_more a{ transition: .2s;}
#information .inner .info_post ul li a:hover{ opacity: 0.4;}
#information .inner .info_post ul li a:hover p.title{ text-decoration: none;}
#information .inner .info_more a:hover{ background-color: var(--blue); color: #fff;}
}

@media screen and (max-width: 767px) {
#information .inner{ width: 100%; padding: 20px 30px; display: block; position: relative;}
#information .inner .info_title{ width: 100%; font-size: 1.7em; margin-bottom: 10px;}
#information .inner .info_post{ width: 100%; display: block; margin-right: 0;}
#information .inner .info_post ul li{ margin: 0 0 8px 0;}
#information .inner .info_post ul li:last-child{ margin: 0;}
#information .inner .info_post ul li p{ font-size: 1.3em;}
#information .inner .info_post ul li p.date{ width: 80px;}
#information .inner .info_post ul li p.title{ width: calc(100% - 80px);}
#information .inner .info_more{ width: 60px; position: absolute; top: 15px; right: 20px;}
#information .inner .info_more a{ font-size: 1.2em; padding: 5px 0;}
}

/*-------------------------
__コンテンツ表示共通
-------------------------*/

.contentsbox .inner .text_box .contents_title p{ color: var(--blue); font-size: 2em; margin-bottom: 30px;}
.contentsbox .inner .text_box .contents_title p span{ display: block; position: relative; padding-left: 25px; box-sizing: border-box;}
.contentsbox .inner .text_box .contents_title p span:before{ content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 17px; height: 17px; border-radius: 50vh; background-color: var(--blue);}
.contentsbox .inner .text_box .contents_title p span:after{ content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%); left: 6px; width: 5px; height: 5px; border-radius: 50vh; background-color: #e6f0fa;}
.contentsbox .inner .text_box .contents_title h3{ font-size: 5.5em; font-weight: 700;}
.contentsbox .inner .text_box .contents_detail{ font-size: 1.6em; line-height: 2; font-weight: 700;}
.contentsbox .inner .text_box .btn_box .link_btn:last-child{ margin-bottom: 0;}
.contentsbox .inner .text_box .btn_box .link_btn a{ width: 100%; height: 100px; color: var(--navy); border: 1px solid var(--navy); background-color: #fff; font-size: 2em; font-weight: 700; display: flex; justify-content: space-between; align-items: center; padding: 0 50px; box-sizing: border-box; position: relative; z-index: 1;}
.contentsbox .inner .text_box .btn_box .link_btn a span{ display: inline-block; vertical-align: middle;}
.contentsbox .inner .text_box .btn_box .link_btn a span.en_text{ font-weight: 300!important;}
.contentsbox .inner .text_box .btn_box .link_btn a span.arrow{position: relative; display: inline-block; width: 17px; height: 2px; margin: 0; border-radius: 9999px; background-color: var(--navy); margin-right: 15px;}
.contentsbox .inner .text_box .btn_box .link_btn a span.arrow::before,
.contentsbox .inner .text_box .btn_box .link_btn a span.arrow::after { content: ""; position: absolute; top: calc(50% - 1px); right: 0;  width: 10px; height: 2px; border-radius: 9999px; background-color: var(--navy); transform-origin: calc(100% - 1px) 50%;}
.contentsbox .inner .text_box .btn_box .link_btn a span.arrow::before { transform: rotate(45deg);}
.contentsbox .inner .text_box .btn_box .link_btn a span.arrow::after { transform: rotate(-45deg);}

@media screen and (max-width:1300px){
.contentsbox .inner .text_box .contents_title h3{ font-size: 5em;}
.contentsbox .inner .text_box .contents_detail{ font-size: 1.5em;}
.contentsbox .inner .text_box .contents_detail .tab_none{ display: none;}
.contentsbox .inner .text_box .btn_box .link_btn a{ padding: 0 40px; font-size: 1.8em;}
}

@media screen and (max-width:999px){
.contentsbox .inner .text_box .contents_title p{ font-size: 1.7em; margin-bottom: 25px;}
.contentsbox .inner .text_box .contents_title h3{ font-size: 5em;}
.contentsbox .inner .text_box .contents_detail{ font-size: 1.4em;}
.contentsbox .inner .text_box .btn_box .link_btn a{ height: 80px; font-size: 1.7em; padding: 0 40px;}
}

@media screen and (min-width: 768px) {
.contentsbox .inner .text_box .btn_box .link_btn a::after{background: var(--navy); position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; transform: scale(0, 1); transform-origin: left top; transition: .2s cubic-bezier(0.45, 0, 0.55, 1); z-index: -1;}
.contentsbox .inner .text_box .btn_box .link_btn a:hover{color: #fff;}
.contentsbox .inner .text_box .btn_box .link_btn a:hover span.arrow{ background-color: #fff;}
.contentsbox .inner .text_box .btn_box .link_btn a:hover span.arrow::before,
.contentsbox .inner .text_box .btn_box .link_btn a:hover span.arrow::after{ background-color: #fff;}
.contentsbox .inner .text_box .btn_box .link_btn a:hover::after{transform: scale(1, 1);}
}

@media screen and (max-width: 767px) {
.contentsbox .inner .text_box .contents_title p{ font-size: 1.5em; margin-bottom: 15px; padding: 3px 0; box-sizing: border-box;}
.contentsbox .inner .text_box .contents_title h3{ font-size: 3em;}
.contentsbox .inner .text_box .contents_detail{ font-size: 1.3em;}
.contentsbox .inner .text_box .btn_box .link_btn a{ height: 70px; font-size: 1.4em; padding: 0 20px;}
}

/*-------------------------
__どんな仕事なのか
-------------------------*/

#our_works{ position: relative; padding: 170px 0 200px; box-sizing: border-box;}
#our_works:before{ content: ""; display: block; position: absolute; top: 0; width: 100%; height: 70%; background-image: linear-gradient(#e0ecf8, #fff); z-index: 0;}
#our_works:after{ content: ""; display: block; position: absolute; top: 0; width: 100%; height: 70%; background-image: url(../images/grunge@2x.png); background-size: 620px 620px; background-repeat: repeat; z-index: 1;}
#our_works .inner{ padding: 55px; box-sizing: border-box; position: relative; z-index: 10;}
#our_works .inner .text_box{ width: 100%; max-width: 1200px; margin: 10vh auto 0; position: relative; z-index: 20; overflow: hidden; z-index: 30;}
#our_works .inner .text_box .text_box_inner{ width: 60%; float: left;}
#our_works .inner .text_box .text_box_inner .contents_title h3{ margin-bottom: 60px;}
#our_works .inner .text_box .text_box_inner .contents_detail{ padding: 0 60px; box-sizing: border-box; margin-bottom: 90px;}
#our_works .inner .text_box .text_box_inner .btn_box{ padding: 0 60px; box-sizing: border-box; width: 100%; max-width: 640px;}
#our_works .inner .text_box .text_box_inner .btn_box .link_btn{ margin: 0 auto 30px;}
#our_works .inner .text_box .text_box_inner .btn_box .link_btn:last-child{ margin-bottom: 0;}
#our_works .inner .photo_box{}
#our_works .inner .photo_box .photo_box01{ width: 40vw; position: absolute; top: 60px; right: 60px; z-index: 10; overflow: hidden;}
#our_works .inner .photo_box .photo_box01 span{ display: block; width: 100%; height: 0; padding-top: 145%; overflow: hidden; position: relative;}
#our_works .inner .photo_box .photo_box01 span img{ width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0;}
#our_works .inner .photo_box .photo_box02{ width: 18vw; position: absolute; top: 85%; right: 35vw; z-index: 10;}
#our_works .inner .photo_box .photo_box02 span{ display: block; width: 100%; height: 0; padding-top: 100%; overflow: hidden; position: relative;}
#our_works .inner .photo_box .photo_box02 span img{ width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0;}
#our_works .inner .hw_title{ position: absolute; top: -50px; right: 50px; z-index: 20; width: 50vw; max-width: 717px; height: auto;}
#our_works .inner .hw_title img{ width: 100%; height: auto;}

@media screen and (max-width:1300px){
#our_works .inner .text_box .text_box_inner{ width: 50%;}
#our_works .inner .text_box .text_box_inner .contents_detail{ padding: 0 40px; box-sizing: border-box; margin-bottom: 60px;}
#our_works .inner .text_box .text_box_inner .btn_box{ padding: 0 40px;}
}

@media screen and (min-width:1000px){
#our_works .inner .photo_box .photo_box01{ min-width: 520px; max-height: 870px;}
#our_works .inner .photo_box .photo_box02{ min-width: 230px;}
}

@media screen and (max-width:999px){
#our_works{ padding: 80px 0 40px;}
#our_works .inner .text_box{ width: 85%; margin: 0 auto 60px;}
#our_works .inner .text_box .text_box_inner{ width: 100%; float: none;}
#our_works .inner .text_box .text_box_inner .contents_title h3{ margin-bottom: 40px;}
#our_works .inner .text_box .text_box_inner .contents_detail{ padding: 0; margin-bottom: 50px;}
#our_works .inner .text_box .text_box_inner .btn_box{ padding: 0 40px; width: 100%;}
#our_works .inner .text_box .text_box_inner .btn_box .link_btn{ max-width: 460px; margin: 0 auto 25px;}
#our_works .inner .photo_box{ width: 85%; margin: 0 auto;}
#our_works .inner .photo_box .photo_box01{ width: 75%; position: relative; top: auto; left: auto; right: auto; margin: 0 auto; z-index: 5;}
#our_works .inner .photo_box .photo_box01 span{ padding-top: 120%;}
#our_works .inner .photo_box .photo_box02{ order:1; width: 35%; position: relative; top: auto; right: auto; margin-bottom: -10vh; margin-right: -10%; z-index: 10;}
#our_works .inner .hw_title{ top: 0px;}
}

@media screen and (max-width: 767px) {
#our_works{ padding: 50px 0 25px;}
#our_works .inner{ padding: 30px;}
#our_works .inner .text_box{ width: 100%; margin: 0 auto 30px;}
#our_works .inner .text_box .text_box_inner .contents_title h3{ margin-bottom: 25px;}
#our_works .inner .text_box .text_box_inner .contents_detail{ padding: 0; margin-bottom: 25px;}
#our_works .inner .text_box .text_box_inner .btn_box{ max-width: 340px; margin: 0 auto; padding: 0;}
#our_works .inner .text_box .text_box_inner .btn_box .link_btn{ margin-bottom: 20px;}
#our_works .inner .photo_box{ width: 100%;}
#our_works .inner .hw_title{ top: -10px; right: 30px; width: 60vw;}
#our_works .inner .photo_box .photo_box02{ margin-bottom: -5vh;}
}

/*-------------------------
__働く人を知る
-------------------------*/

#staff{}
#staff .inner{ padding: 55px; box-sizing: border-box; position: relative;}
#staff .inner .text_box{ display: flex; justify-content: center; margin-bottom: 180px; position: relative;}
#staff .inner .text_box .contents_title{ margin-right: 75px;}
#staff .inner .text_box .contents_detail{}
#staff .inner .text_box .hw_title{ position: absolute; top: 0; transform: translateX(-50%); left: 50%; z-index: -1;}
#staff .inner .text_box .hw_title span{ display: block; width: 50vw; max-width: 505px; height: auto; margin-top: -140px; margin-left: -680px;}
#staff .inner .text_box .hw_title img{ width: 100%; height: auto;}
#staff .inner .text_box .contents_detail{ margin-top: 45px;}
#staff .inner .sales_story{ max-width: 1000px; margin: 0 auto 220px;}
#staff .inner .sales_story h4{ text-align: center; font-size: 3.5em; font-weight: 700; margin-bottom: 100px;}
#staff .inner .sales_story h4 span{ display: inline-block; position: relative;}
#staff .inner .sales_story h4 span::before{ content: ''; display: block; position: absolute; top: -80px; transform: translateX(-50%); left: 50%; height: 55px; width: 1px; background-color: var(--navy);}
#staff .inner .sales_story ul{ display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%;}
#staff .inner .sales_story ul li{ width: calc( 50% - 50px); margin-right: 100px;}
#staff .inner .sales_story ul li:nth-child(even){ margin-right: 0; margin-top: 120px;}
#staff .inner .sales_story ul li .sales_staff_num{ font-size: 2em; color: var(--blue); margin-bottom: 20px;}
#staff .inner .sales_story ul li .sales_staff_num span{ display: inline-block;}
#staff .inner .sales_story ul li .sales_staff_num span:before{ content: '#';}
#staff .inner .sales_story ul li .sales_staff_photo{ width: 100%; overflow: hidden; margin-bottom: 30px;}
#staff .inner .sales_story ul li .sales_staff_photo a{ display: block; width: 100%; height: 0; background-color: #F5F5F5; padding-top: 120%; overflow: hidden; position: relative;}
#staff .inner .sales_story ul li .sales_staff_photo a > img{ width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0;}
#staff .inner .sales_story ul li .sales_staff_photo span.watchmovie{ display: block; position: absolute; bottom: 25px; right: 25px; width: 164px; height: 34px;}
#staff .inner .sales_story ul li .sales_staff_photo span.watchmovie img{ width: 100%; height: auto;}
#staff .inner .sales_story ul li .sales_staff_text{}
#staff .inner .sales_story ul li .sales_staff_text .sales_staff_com{ font-size: 2.5em; line-height: 1.7; font-weight: 700; margin-bottom: 30px;}
#staff .inner .sales_story ul li .sales_staff_text .sales_staff_com span{ background: linear-gradient(transparent 60%,#bad8f2 40%);}
#staff .inner .sales_story ul li .sales_staff_text .sales_staff_data{ font-weight: 700;}
#staff .inner .sales_story ul li .sales_staff_text .sales_staff_data span{ display: inline-block;}
#staff .inner .sales_story ul li .sales_staff_text .sales_staff_data span.name{ font-size: 2.2em; margin-right: 20px;}
#staff .inner .sales_story ul li .sales_staff_text .sales_staff_data span.joining_date{ font-size: 1.6em;}

@media screen and (max-width:999px){
#staff .inner .text_box{ display: block; width: 85%; margin: 0 auto 120px;}
#staff .inner .text_box .hw_title{ transform: translateX(0); right: 0; top: 50px;}
#staff .inner .text_box .hw_title span{ max-width: 350px; margin-top: -100px; margin-left:0;}
#staff .inner .text_box .contents_detail{ margin-top: 40px;}
#staff .inner .sales_story{ max-width: 85%; margin: 0 auto 170px;}
#staff .inner .sales_story h4{ font-size: 2.7em; margin-bottom: 50px;}
#staff .inner .sales_story h4 span::before{ top: -70px; height: 45px; width: 1px;}
#staff .inner .sales_story ul li{ width: calc( 50% - 30px); margin-right: 60px;}
#staff .inner .sales_story ul li:nth-child(even){ margin-top: 90px;}
#staff .inner .sales_story ul li .sales_staff_num{ margin-bottom: 10px;}
#staff .inner .sales_story ul li .sales_staff_photo{ margin-bottom: 20px;}
#staff .inner .sales_story ul li .sales_staff_text .sales_staff_com{ font-size: 2em; margin-bottom: 20px;}
#staff .inner .sales_story ul li .sales_staff_text .sales_staff_data span{ display: block;}
#staff .inner .sales_story ul li .sales_staff_text .sales_staff_data span.name{ font-size: 1.8em; margin-right: 0; margin-bottom: 15px;}
#staff .inner .sales_story ul li .sales_staff_text .sales_staff_data span.joining_date{ font-size: 1.4em;}
#staff .inner .sales_story ul li .sales_staff_photo span.watchmovie{ bottom: 15px; right: 15px; width: 130px; height: auto;}
}

@media screen and (min-width: 768px) {
#staff .inner .sales_story ul li .sales_staff_photo a{ display: block; transition: all .3s ease-in-out;}
#staff .inner .sales_story ul li .sales_staff_photo a > img{ width: 100%; vertical-align: middle; transition: .2s;}
#staff .inner .sales_story ul li .sales_staff_photo a:hover > img{ transform: scale(1.1);}
#staff .inner .sales_story ul li .sales_staff_photo a:hover > img{ opacity: 0.8;}
}

@media screen and (max-width: 767px) {
#staff .inner{ padding: 30px;}
#staff .inner .text_box{ width: 100%; margin: 0 auto 80px;}
#staff .inner .text_box .contents_title{ margin-right: 0;}
#staff .inner .text_box .contents_detail{ margin-top: 25px;}
#staff .inner .text_box .hw_title span{ width: 40vw; margin-top: -10px;}
#staff .inner .sales_story{ max-width: 100%; margin: 0 auto 120px;}
#staff .inner .sales_story h4{ font-size: 2em; margin-bottom: 20px;}
#staff .inner .sales_story h4 span::before{ top: -50px; height: 30px;}
#staff .inner .sales_story ul{ display: block;}
#staff .inner .sales_story ul li{ width: 100%; margin-bottom: 45px;}
#staff .inner .sales_story ul li:nth-child(even){ margin-top: 0;}
#staff .inner .sales_story ul li .sales_staff_num{ font-size: 1.6em; margin-bottom: 10px;}
#staff .inner .sales_story ul li .sales_staff_photo{ margin-bottom: 15px;}
#staff .inner .sales_story ul li .sales_staff_text .sales_staff_com{ font-size: 1.8em; line-height: 1.5;}
#staff .inner .sales_story ul li .sales_staff_text .sales_staff_data span.name{ font-size: 1.6em;}
#staff .inner .sales_story ul li .sales_staff_text .sales_staff_data span.joining_date{ font-size: 1.2em;}
#staff .inner .sales_story ul li .sales_staff_photo span.watchmovie{ bottom: 15px; right: 15px; width: 120px;}
}

/*-------------------------
__クロストーク
-------------------------*/

#staff .inner .crosstalk{ width: calc(100% + 110px); margin-left: -55px; background-image: url(../images/crosstalk_back.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; position: relative; padding: 0 0 100px; box-sizing: border-box;}
#staff .inner .crosstalk::before{ content: ""; position: absolute; top: 0; display: block; width: 100%; height: 410px; background-image: url(../images/crosstalk_tb@2x.png); background-size: 410px 410px; background-position: top; background-repeat: repeat-x; z-index: 10;}
#staff .inner .crosstalk::after{ content: ""; position: absolute; bottom: 0; display: block; width: 100%; height: 410px; background-image: url(../images/crosstalk_tb@2x.png); background-size: 410px 410px; background-position: bottom; background-repeat: repeat-x; transform: scale(1, -1); z-index: 10;}
#staff .inner .crosstalk h4{ text-align: center; font-size: 3.5em; font-weight: 700; margin-bottom: 100px; position: relative; z-index: 20;}
#staff .inner .crosstalk h4 span{ display: inline-block; position: relative;}
#staff .inner .crosstalk h4 span::before{ content: ''; display: block; position: absolute; top: -80px; transform: translateX(-50%); left: 50%; height: 55px; width: 1px; background-color: var(--navy);}
#staff .inner .crosstalk .crosstalk_inner{ width: 100%; max-width: 1310px; margin: 0 auto; position: relative; padding: 0 55px; box-sizing: border-box; z-index: 20;}
#staff .inner .crosstalk .crosstalk_inner .crosstalk_btn{ width: 100%; height: 480px; overflow: hidden;}
#staff .inner .crosstalk .crosstalk_inner .crosstalk_btn a{ width: 100%; height: 100%; position: relative;}
#staff .inner .crosstalk .crosstalk_inner .crosstalk_btn a > img{ width: 100%; height: 480px; object-fit: cover;}
#staff .inner .crosstalk .crosstalk_inner .crosstalk_btn span.watchmovie{ position: absolute; bottom: 30px; right: 30px; width: 164px; height: 34px;}
#staff .inner .crosstalk .crosstalk_inner .crosstalk_btn span.watchmovie img{ width: 100%; height: auto;}
#staff .inner .crosstalk .crosstalk_inner p{ font-size: 1.6em; line-height: 1.5; font-weight: 700; margin-top: 15px;}

@media screen and (max-width:999px){
#staff .inner .crosstalk h4{ font-size: 2.7em; margin-bottom: 50px;}
#staff .inner .crosstalk h4 span::before{ top: -70px; height: 45px; width: 1px;}
#staff .inner .crosstalk .crosstalk_inner p{ font-size: 1.4em;}
#staff .inner .crosstalk .crosstalk_inner .crosstalk_btn{ height: 300px;}
#staff .inner .crosstalk .crosstalk_inner .crosstalk_btn a img{ height: 300px;}
#staff .inner .crosstalk .crosstalk_inner .crosstalk_btn span.watchmovie{ bottom: 15px; right: 15px; width: 130px; height: auto;}
}

@media screen and (min-width: 768px) {
#staff .inner .crosstalk .crosstalk_inner .crosstalk_btn a{ display: block; transition: all .3s ease-in-out;}
#staff .inner .crosstalk .crosstalk_inner .crosstalk_btn a > img{ width: 100%; vertical-align: middle; transition: .2s;}
#staff .inner .crosstalk .crosstalk_inner .crosstalk_btn a:hover > img{ transform: scale(1.07);}
#staff .inner .crosstalk .crosstalk_inner .crosstalk_btn a:hover > img{ opacity: 0.8;}
}

@media screen and (max-width: 767px) {
#staff .inner .crosstalk{ width: calc(100% + 60px); margin-left: -30px; padding: 0;}
#staff .inner .crosstalk h4{ font-size: 2em; margin-bottom: 20px;}
#staff .inner .crosstalk h4 span::before{ top: -50px; height: 30px;}
#staff .inner .crosstalk .crosstalk_inner{ padding: 0;}
#staff .inner .crosstalk .crosstalk_inner .crosstalk_btn{ height: 170px;}
#staff .inner .crosstalk .crosstalk_inner .crosstalk_btn a img{ height: 170px;}
#staff .inner .crosstalk .crosstalk_inner p{ font-size: 1.3em; line-height: 2; padding: 0 30px; box-sizing: border-box;}
#staff .inner .crosstalk .crosstalk_inner .crosstalk_btn span.watchmovie{ bottom: 15px; right: 15px; width: 120px;}
}

/*-------------------------
__どう働きやすいのか
-------------------------*/

#benefits{ position: relative; padding: 0 0 280px; box-sizing: border-box;}
#benefits .inner{ padding: 55px; box-sizing: border-box; position: relative; z-index: 10;}
#benefits .inner .text_box{ width: 100%; max-width: 1200px; margin: 10vh auto 0; position: relative; z-index: 20; overflow: hidden;}
#benefits .inner .text_box .text_box_inner{ width: 50%; float: right;}
#benefits .inner .text_box .contents_title{ z-index: 30;}
#benefits .inner .text_box .contents_title h3{ margin-bottom: 60px;}
#benefits .inner .text_box .contents_detail{ padding: 0 60px; box-sizing: border-box; margin-bottom: 90px;}
#benefits .inner .text_box .btn_box{ padding: 0 60px; box-sizing: border-box; width: 100%; max-width: 640px;}
#benefits .inner .text_box .btn_box .link_btn{ margin:0 auto 30px;}
#benefits .inner .photo_box{}
#benefits .inner .photo_box .photo_box01{ width: 40vw; position: absolute; top: 60px; left: 60px; z-index: 10; overflow: hidden;}
#benefits .inner .photo_box .photo_box01 span{ display: block; width: 100%; height: 0; padding-top: 145%; overflow: hidden; position: relative;}
#benefits .inner .photo_box .photo_box01 span img{ width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0;}
#benefits .inner .photo_box .photo_box02{ width: 18vw; position: absolute; top: -150px; right: 55px; z-index: 10;}
#benefits .inner .photo_box .photo_box02 span{ display: block; width: 100%; height: 0; padding-top: 100%; overflow: hidden; position: relative;}
#benefits .inner .photo_box .photo_box02 span img{ width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0;}
#benefits .inner .hw_title{ position: absolute; bottom: -120px; left: 50%; transform: translateX(-50%); width: 50vw; max-width: 604px; height: auto; z-index: 10;}
#benefits .inner .hw_title img{ width: 100%; height: auto;}

@media screen and (max-width:1300px){
#benefits .inner .text_box .text_box_inner{ width: 50%;}
#benefits .inner .text_box .contents_detail{ padding: 0 0 0 40px; box-sizing: border-box; margin-bottom: 60px;}
#benefits .inner .text_box .text_box_inner .btn_box{ padding: 0 0 0 40px;}
}

@media screen and (min-width:1000px){
#benefits .inner .photo_box .photo_box01{ min-width: 520px; max-height: 870px;}
#benefits .inner .photo_box .photo_box02{ min-width: 230px;}
}

@media screen and (max-width:999px){
#benefits{ padding: 0 0 50px;}
#benefits .inner .text_box{ width: 85%; margin: 0 auto 60px;}
#benefits .inner .text_box .text_box_inner{ width: 100%; float: none;}
#benefits .inner .text_box .text_box_inner .contents_title h3{ margin-bottom: 40px;}
#benefits .inner .text_box .text_box_inner .contents_detail{ padding: 0; margin-bottom: 50px;}
#benefits .inner .text_box .text_box_inner .btn_box{ padding: 0 40px; width: 100%;}
#benefits .inner .text_box .text_box_inner .btn_box .link_btn{ max-width: 460px; margin:0 auto 25px;}
#benefits .inner .text_box .text_box_inner .btn_box .link_btn:last-child{ margin:0 auto;}
#benefits .inner .photo_box{ display: flex; align-items: flex-start; width: 85%; margin: 0 auto;}
#benefits .inner .photo_box .photo_box01{ width: 75%; position: relative; top: auto; right: auto; z-index: 5; left: 0; margin: 0 auto;}
#benefits .inner .photo_box .photo_box01 span{ padding-top: 120%;}
#benefits .inner .photo_box .photo_box02{ width: 35%; position: relative; top: auto; right: auto; margin-left: -10%; z-index: 10;}
#benefits .inner .hw_title{ bottom: auto; top: -40px; transform: translateX(0); right: 50px; left: auto;}
}

@media screen and (max-width: 767px) {
#benefits{ padding: 75px 0 70px;}
#benefits .inner{ padding: 30px;}
#benefits .inner .text_box{ width: 100%; margin: 0 auto 30px;}
#benefits .inner .text_box .text_box_inner .contents_title h3{ margin-bottom: 25px;}
#benefits .inner .text_box .text_box_inner .contents_detail{ padding: 0; margin-bottom: 25px;}
#benefits .inner .text_box .text_box_inner .btn_box{ max-width: 340px; margin: 0 auto; padding: 0;}
#benefits .inner .text_box .text_box_inner .btn_box .link_btn{ margin-bottom: 20px;}
#benefits .inner .photo_box{ width: 100%;}
#benefits .inner .photo_box .photo_box01{}
#benefits .inner .hw_title{ position: absolute; bottom: auto; top: -30px; transform: translateX(0); left: auto; right: 30px;}
}

/*-------------------------
__人事課一同より〜WEB会社説明会
-------------------------*/

#from_hr{ width: 100%; max-width: 1310px; margin: 0 auto 180px; padding: 0 55px; box-sizing: border-box;}
#from_hr .inner{ background-image: url(../images/from_hr_back.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; text-align: center; padding: 130px 0; box-sizing: border-box;}
#from_hr .inner .from_hr_text{ width: 800px; margin: 0 auto; overflow: hidden;}
#from_hr .inner .from_hr_text .from_hr_title{ width: 610px; height: auto; margin: 0 auto 40px;}
#from_hr .inner .from_hr_text .from_hr_title img{ width: 100%; height: auto;}
#from_hr .inner .from_hr_text p{ font-size: 1.6em; line-height: 2.3; font-weight: 700; color: #fff; margin-bottom: 40px;}
#from_hr .inner .from_hr_text .from_hr_name{ width: 263px; height: auto; float: right;}
#from_hr .inner .from_hr_text .from_hr_name img{ width: 100%; height: auto;}
#briefing{ width: 100%; max-width: 1310px; margin: 0 auto 130px; padding: 0 55px; box-sizing: border-box;}
#briefing .inner{}
#briefing .inner .briefing_box a{ display: block; width: 100%; height: 300px; background-image: url(../images/briefing@2x.jpg); background-size: cover; position: relative;}
#briefing .inner .briefing_box a p{ position: absolute; transform: translateY(-50%); top: 50%; left: 90px; font-size: 4em; font-weight: 700; color: #fff;}
#briefing .inner .briefing_box a p span{display: block; position: relative; padding-left: 35px; box-sizing: border-box;}
#briefing .inner .briefing_box a p span::before{ content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 20px; height: 20px; border-radius: 50vh; background-color: #fff;}
#briefing .inner .briefing_box a p span::after{ content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%); left: 7px; width: 7px; height: 7px; border-radius: 50vh; background-color: #999;}
#briefing .inner > p{ font-size: 1.6em; line-height: 1.5; font-weight: 700; margin-top: 15px;}

@media screen and (max-width:999px){
#from_hr{ width: 100%; margin: 0 0 90px 0;}
#from_hr .inner{ padding: 100px 0;}
#from_hr .inner .from_hr_text{ width: 70%; margin: 0 auto;}
#from_hr .inner .from_hr_text .from_hr_title{ width: 100%; margin: 0 auto 20px;}
#from_hr .inner .from_hr_text p{ font-size: 1.4em; line-height: 2.2; margin-bottom: 20px;}
#from_hr .inner .from_hr_text .from_hr_name{ width: 40%;}
#briefing{ margin: 0 auto 90px;}
#briefing .inner .briefing_box a{ height: 200px;}
#briefing .inner .briefing_box a p{ left: 60px; font-size: 3em;}
#briefing .inner > p{ font-size: 1.4em; margin-top: 15px;}
}

@media screen and (min-width: 768px) {
#briefing .inner .briefing_box a{ transition: all .3s ease-in-out;}
#briefing .inner .briefing_box a:hover{ opacity: 0.8;}
}

@media screen and (max-width: 767px) {
#from_hr{ width: 100%; margin: 0 auto 60px; padding: 0;}
#from_hr .inner{ padding: 75px 30px;}
#from_hr .inner .from_hr_text{ width: 100%;}
#from_hr .inner .from_hr_text .from_hr_title{ max-width: 320px; width: 100%; margin: 0 auto 20px;}
#from_hr .inner .from_hr_text p{ font-size: 1.3em; line-height: 2; text-align: left;}
#from_hr .inner .from_hr_text .from_hr_name{ max-width: 170px; width: 50%;}
#briefing{ margin: 0 auto 60px; padding: 0;}
#briefing .inner .briefing_box a{ height: 170px; background-image: url(../images/briefing_sp@2x.jpg);}
#briefing .inner .briefing_box a p{ display: inline-block; position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; width: 100%; text-align: center; font-size: 2.8em;}
#briefing .inner .briefing_box a p span{ display: inline-block;}
#briefing .inner > p{ font-size: 1.3em; line-height: 2; margin-top: 15px; padding: 0 30px; box-sizing: border-box;}
}

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

#requirements{ position: relative; padding: 170px 0 150px; box-sizing: border-box;}
#requirements:before{ content: ""; display: block; position: absolute; top: 0; width: 100%; height: 70%; background-image: linear-gradient(#e0ecf8, #fff); z-index: 0;}
#requirements:after{ content: ""; display: block; position: absolute; top: 0; width: 100%; height: 70%; background-image: url(../images/grunge@2x.png); background-size: 620px 620px; background-repeat: repeat; z-index: 1;}
#requirements .inner{ padding: 55px; box-sizing: border-box; position: relative; z-index: 10;}
#requirements .inner .text_box{ display: flex; justify-content: center; margin-bottom: 80px; position: relative; z-index: 30;}
#requirements .inner .text_box .contents_title{ margin-right: 75px;}
#requirements .inner .text_box .contents_detail{ margin-top: 45px;}
#requirements .inner .text_box .hw_title{ position: absolute; top: 0; transform: translateX(-50%); left: 50%; z-index: -1;}
#requirements .inner .text_box .hw_title span{ display: block; width: 50vw; max-width: 927px; height: auto; margin-top: -140px; margin-left: -680px;}
#requirements .inner .text_box .hw_title img{ width: 100%; height: auto;}

@media screen and (min-width:1000px){
#requirements .inner .requirements_list .occupation_box li:nth-last-child(-n+2){ border-bottom: 1px solid var(--navy);}
}

@media screen and (max-width:999px){
#requirements{ padding: 45px 0 50px;}
#requirements .inner .text_box{ display: block; width: 100%; margin: 0 auto 40px;}
#requirements .inner .text_box .contents_detail{ margin-top: 40px;}
#requirements .inner .text_box .hw_title{ width: 70%; left: auto; right: 0; transform: translateX(0);}
#requirements .inner .text_box .hw_title span{ width: 100%;  height: auto; margin-top: 0; margin-left: 0;}
}


@media screen and (max-width: 767px) {
#requirements{ padding: 45px 0 0;}
#requirements .inner{ padding: 30px;}
#requirements .inner .text_box{ margin: 0 auto 25px;}
#requirements .inner .text_box .contents_detail{ margin-top: 25px;}
#requirements .inner .text_box .contents_title{ margin-right: 0;}
#requirements .inner .text_box .hw_title{ width: 100%;}

}



.requirements{ width: 100%; max-width: 1000px;margin:80px auto 0;display: block; border-top: 1px solid var(--base_navy);}
.requirements .list_eigyo{ padding: 70px 20px;}
.requirements a.back{ padding: 60px 20px; color: var(--base_navy); background: transparent; position: relative; z-index: 1; transition: .5s; display: block;}
.requirements a.back::before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; background: #e0ecf8; transform-origin: 100% 50%; transform: scaleX(0); transition: transform ease .5s;}
.requirements a.back:hover{}
.requirements a.back:hover::before { transform-origin: 0% 50%; transform: scaleX(1);}
.requirements ul.list { display:flex;flex-wrap:wrap;}
.requirements ul.list li { line-height: 1.6; font-weight: 700; width: 100%; position: relative; padding:0; border-bottom: 1px solid var(--base_navy);}
.requirements ul.list li .requirements_title{ font-size: 2.7em; line-height: 38px; font-weight: 700; vertical-align: top; display: flex;}
.requirements ul.list li .requirements_title span{ font-size: .6em;font-weight: 100; line-height: 26px;height: 26px; padding: 2px 30px; border: 1px solid #23374b;margin: 3px 0 0 20px;display: flex; background-color: #fff;}
.requirements ul.list li p.requirements_text{ font-size: 1.6em;margin-right: 40px;}
.requirements ul.list li .arrow{ position: absolute; top: 50%; right: 20px; transform: translateY(-50%); -webkit-transform: translateY(-50%); display: inline-block; width: 25px; height: 4px; margin:0; border-radius: 0 9999PX 9999PX 0;background-color: var(--base_navy);}
.requirements ul.list li .arrow::before,
.requirements ul.list li .arrow::after { content: ""; position: absolute; top: calc(50% - 2px); right: 0; width: 16px; height: 4px; border-radius: 0 9999PX 9999PX 0; background-color: var(--base_navy)!important; transform-origin: calc(100% - 2px) 50%;}
.requirements ul.list li .arrow::before{ transform: rotate(45deg);}
.requirements ul.list li .arrow::after{ transform: rotate(-45deg);}
.requirements ul.list li {}
.requirements ul.list li ul.shop {border: none!important; display:flex; flex-wrap:wrap; margin-top: 40px;}
.requirements ul.list li ul.shop li { width: 25%; border: none!important;margin:0 0 14px;}
.requirements ul.list li ul.shop li .shop_btn {font-size: 1.6em;}
.requirements ul.list li ul.shop li .shop_btn a { color: var(--base_navy); position: relative; justify-content: space-around; transition: 0.3s ease-in-out; transition: .2s; padding-left: 1em; display: block;}
.requirements ul.list li ul.shop li .shop_btn a:after { content: ""; position: absolute; top: 50%; bottom: 0; left: 0; font-size: 90%; display: flex; justify-content: center; align-items: center;width: 6px; height: 6px; border-top: solid 2px currentColor; border-right: solid 2px currentColor; transform: translateY(-50%) rotate(45deg);}
.requirements ul.list li ul.shop li .shop_btn a:hover{}
.requirements ul.list li ul.shop li .shop_btn a:hover{ transform: translateX(10px);}

.requirements_top{ display: flex; flex-wrap: wrap; justify-content: flex-start;}
.requirements_top .requirements_title{ margin: 0 20px 0 0;}
.requirements_top .icon{ display: flex; flex-wrap: wrap; justify-content: flex-start; padding-right: 20px; box-sizing: border-box;}
.requirements_top .icon p{ font-size: 1.6em!important; white-space: nowrap; display: inline-block; font-size: .6em; font-weight: 100; line-height: 26px; height: 26px; padding: 2px 30px; margin: 5px 10px 5px 0;}
.requirements_top .icon p.occupation{ border: 1px solid #23374b; background-color: #fff;}
.requirements_top .icon p.store{ color: #fff; border: 1px solid var(--main_blue); background-color: var(--main_blue);}

@media screen and (max-width:999px){
.requirements { margin:40px auto 0;}
.requirements .list_eigyo {padding:  5.46vw 1.56vw;}
.requirements a.back { padding: 40px 0;}
.requirements a.back::before { background: initial;}
.requirements a.back:hover{}
.requirements a.back:hover::before { transform-origin: initial; transform: initial;}
.requirements ul.list li .requirements_title {font-size: 2em;}
.requirements ul.list li .requirements_title span { font-size: .6em; padding: 0.15vw 2.34vw; white-space: nowrap;}
.requirements ul.list li p.requirements_text {font-size: 1.4em; margin-right: 10vw;}
.requirements ul.list li .arrow{ position: absolute; top: 50%; right: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); display: inline-block; width: 17px; height: 2px; margin:0; border-radius: 9999px; background-color: var(--base_navy);}
.requirements ul.list li .arrow::before,
.requirements ul.list li .arrow::after { content: ""; position: absolute; top: calc(50% - 1px); right: 0; width: 10px; height: 2px; border-radius: 9999px; background-color: var(--base_navy)!important; transform-origin: calc(100% - 1px) 50%;}
.requirements ul.list li .arrow::before{transform: rotate(45deg);}
.requirements ul.list li .arrow::after{transform: rotate(-45deg);}
.requirements ul.list li ul.shop li .shop_btn {font-size: 1.4em;}

.requirements_top .requirements_title{ margin: 0 20px 10px 0;}
.requirements_top .icon p{ font-size: 1.4em!important; padding: 0.15vw 2.34vw;}

}

@media screen and (min-width: 768px) {
.requirements ul.list li ul.shop li:nth-child(4n+1):nth-last-child(-n+4),
.requirements ul.list li ul.shop li:nth-child(4n+1):nth-last-child(-n+4) ~ li { margin-bottom: 0; }
}

@media screen and (max-width: 767px) {
.requirements {width: 100%;}
.requirements a.back { padding: 25px 25px 25px 0;}
.requirements ul.list li .requirements_title {font-size: 1.8em; line-height: 1.6; display: inline-block;}
.requirements ul.list li .requirements_title span { display: inline-block;margin: 0 0 0 10px; padding: 0 10px;}
.requirements ul.list li p.requirements_text {font-size: 1.3em;margin-right: 10vw;}
.requirements ul.list li .arrow{ right: 1.56vw;}
.m-zero {margin: 0 auto 5vw!important;}
.requirements ul.list li .list_title span.text{ font-size: 1.4em; padding-left: 15px;}
.requirements ul.list li .list_title span.text:before{ width: 13px; height: 13px; top: 2px; left: 0;}
.requirements ul.list li .list_title span.text:after{ width: 3px; height: 3px; top: 7px; left: 5px;}
.requirements ul.list li ul.shop{ margin-top: 20px;}
.requirements ul.list li ul.shop li .shop_btn {font-size: 1.3em;}
.requirements ul.list li ul.shop li{ width: 50%;}
.requirements ul.list li ul.shop li:last-child{ margin-bottom: 0;}

.requirements_top{ display: block;}
.requirements_top .requirements_title{ margin: 0 10px 10px 0;}
.requirements_top .icon p{ font-size: 1.2em!important; padding: 0.15vw 2.34vw; margin: 3px 6px 3px 0!important;}
}

/*-------------------------
__リアルな日常
-------------------------*/

#note{ padding-bottom: 130px; box-sizing: border-box;}
#note .inner{ padding: 55px; box-sizing: border-box; position: relative; z-index: 10;}
#note .inner .text_box{ display: flex; justify-content: center; margin-bottom: 120px; position: relative;}
#note .inner .text_box .contents_title{ margin-right: 75px;}
#note .inner .text_box .contents_detail{ margin-top: 45px;}
#note .inner .text_box .hw_title{ position: absolute; width: 50%; top: 0; right: 0; z-index: -1;}
#note .inner .text_box .hw_title span{ display: block; max-width: 631px; height: auto; margin-top: -140px;}
#note .inner .text_box .hw_title img{ width: 100%; height: auto;}
#note .inner .note_list{ width: 100%; max-width: 1000px; margin: 0 auto;}
#note .inner .note_list ul{ display: flex; margin-bottom: 50px;}
#note .inner .note_list ul li{ width: calc(50% - 30px); margin-right: 60px;}
#note .inner .note_list ul li:last-child{ margin-right: 0;}
#note .inner .note_list ul li a .note_photo{ margin-bottom: 20px; width: 100%; overflow: hidden;}
#note .inner .note_list ul li a .note_photo span{ display: block; width: 100%; height: 0; background-color: #F5F5F5; padding-top: 75%; overflow: hidden; position: relative;}
#note .inner .note_list ul li a .note_photo span img{width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0;}
#note .inner .note_list ul li a .note_data{ color: var(--navy);}
#note .inner .note_list ul li a .note_data .day_cat{ display: flex; align-items: center; margin-bottom: 15px;}
#note .inner .note_list ul li a .note_data .day_cat .day{ color: #969699; font-size: 1.5em; margin-right: 20px;}
#note .inner .note_list ul li a .note_data .day_cat .cat span{ display: inline-block; font-size: 1.4em; background-color: #fff; border: 1px solid var(--navy); padding: 5px 10px; margin: 2px; box-sizing: border-box;}
#note .inner .note_list ul li a .note_data .title{ font-size: 2.2em; line-height: 1.4; font-weight: 700; margin-bottom: 20px;}
#note .inner .note_list .note_btn{ width: 400px; margin: 0 auto;}
#note .inner .note_list .note_btn a{ width: 100%; height: 100px; color: var(--navy); border: 1px solid var(--navy); background-color: #fff; font-size: 2em; font-weight: 700; display: flex; justify-content: space-between; align-items: center; padding: 0 50px; box-sizing: border-box; position: relative; z-index: 1;}
#note .inner .note_list .note_btn a span{ display: inline-block; vertical-align: middle;}
#note .inner .note_list .note_btn a span.en_text{ font-weight: 300!important;}
#note .inner .note_list .note_btn a span.arrow{position: relative; display: inline-block; width: 17px; height: 2px; margin: 0; border-radius: 9999px; background-color: var(--navy); margin-right: 15px;}
#note .inner .note_list .note_btn a span.arrow::before,
#note .inner .note_list .note_btn a span.arrow::after { content: ""; position: absolute; top: calc(50% - 1px); right: 0;  width: 10px; height: 2px; border-radius: 9999px; background-color: var(--navy); transform-origin: calc(100% - 1px) 50%;}
#note .inner .note_list .note_btn a span.arrow::before { transform: rotate(45deg);}
#note .inner .note_list .note_btn a span.arrow::after { transform: rotate(-45deg);}

@media screen and (max-width:999px){
#note{ padding-bottom: 50px;}
#note .inner .text_box{ display: block; width: 100%; margin: 0 auto 40px;}
#note .inner .text_box .hw_title{ top: 0; transform: translateX(0); left: auto; right: 0; width: 70%;}
#note .inner .text_box .hw_title span{ width: 100%; margin-top: -50px; margin-left:0;}
#note .inner .note_list ul li a .note_data .day_cat .day{ font-size: 1.4em; margin-right: 20px;}
#note .inner .note_list ul li a .note_data .day_cat .cat span{ font-size: 1.3em;}
#note .inner .note_list ul li a .note_data .title{ font-size: 2em;}
#note .inner .note_list .note_btn{ max-width: 450px;}
#note .inner .note_list .note_btn a{ height: 80px; font-size: 1.7em;}
}

@media screen and (min-width: 768px) {
#note .inner .note_list ul li a .note_photo span{ display: block; transition: all .3s ease-in-out;}
#note .inner .note_list ul li a .note_photo span img{ width: 100%; vertical-align: middle; transition: .2s;}
#note .inner .note_list ul li a:hover .note_photo span{ transform: scale(1.07);}
#note .inner .note_list ul li a:hover .note_photo span img{ opacity: 0.8;}
#note .inner .note_list .note_btn a::after{background: var(--navy); position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; transform: scale(0, 1); transform-origin: left top; transition: .2s cubic-bezier(0.45, 0, 0.55, 1); z-index: -1;}
#note .inner .note_list .note_btn a:hover{color: #fff;}
#note .inner .note_list .note_btn a:hover span.arrow{ background-color: #fff;}
#note .inner .note_list .note_btn a:hover span.arrow::before,
#note .inner .note_list .note_btn a:hover span.arrow::after{ background-color: #fff;}
#note .inner .note_list .note_btn a:hover::after{transform: scale(1, 1);}
}

@media screen and (max-width: 767px) {
#note{ padding-bottom: 30px;}
#note .inner{ padding: 30px;}
#note .inner .text_box{ margin: 0 auto 25px;}
#note .inner .text_box .contents_detail{ margin-top: 25px;}
#note .inner .text_box .hw_title span{ max-width: auto; height: auto; margin-top: -30px; margin-left:0;}
#note .inner .note_list ul{ display: block;}
#note .inner .note_list ul li{ width: 100%; margin-right: 0;}
#note .inner .note_list ul li a .note_data .day_cat{ margin-bottom: 10px;}
#note .inner .note_list ul li a .note_data .day_cat .day{ font-size: 1.3em; margin-right: 15px;}
#note .inner .note_list ul li a .note_data .day_cat .cat span{ font-size: 1.2em;}
#note .inner .note_list ul li a .note_data .title{ font-size: 1.6em;}
#note .inner .note_list .note_btn{ max-width: 310px; width: 100%;}
#note .inner .note_list .note_btn a{ height: 70px; font-size: 1.4em; padding: 0 20px;}
}