.mv{width:100%; margin-left: auto;position: relative;padding-bottom: 70px;background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 30%,#e5edf1 30%,#e5edf1 100%);}
.mv .mainimg{width: 70%;height: 500px;margin-left: auto;border-radius: 0 0 0 60px;overflow: hidden}
.mv img{width: 100%;height: 500px;object-fit: cover}
.mv .pagetitle{position: absolute;bottom: 0;left: 0; height: 430px;width: 40%;border-radius: 0 60px 60px 0; background: linear-gradient(to right,  rgba(0,71,157,1) 0%,rgba(0,71,157,1) 1%,rgba(0,183,238,0.8) 100%);}
.mv .pagetitle h2{width: 100%;text-align: center; color: #fff;font-size: 3.9rem;font-weight: bold; letter-spacing: 0.2em;position: absolute;   top: 50%;   left: 50%;   -webkit-transform: translate(-50%, -50%);   transform: translate(-50%, -50%);}

.mv .pageGnav{position: absolute;bottom: 0; right: 0; height: 120px;width: 57%;border-radius: 15px 0px 0px 15px; background: linear-gradient(90deg, #00b7ee 0%, #00479d 50%); border: 2px solid #00479d; border-right: 0;}
.mv .pageGnav h2{width: 100%;text-align: center; color: #fff;font-size: 2.4rem;font-weight: bold; letter-spacing: 0.2em;position: absolute;   top: 50%;   left: 50%;   -webkit-transform: translate(-50%, -50%);   transform: translate(-50%, -50%);}
.mv .pageGnav .gnav-list{display: flex; list-style: none; padding: 0; margin: 0; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 100%; align-items: center;flex-wrap: wrap;}
.mv .pageGnav .gnav-list a{width: calc(100% / 3); text-align: center; height: 50%;}
.mv .pageGnav .gnav-list a li {position: relative; text-decoration: none; color: #00a0e9; font-size: 1.8rem; padding: 8px 25px; transition: 0.2s; border-bottom: 2px solid transparent; font-weight: bold; top: 50%; left:50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.mv .pageGnav .gnav-list a li::after {content: ""; position: absolute; right: 40px; top: 51%; transform: translateY(-50%) rotate(90deg); width: 17px; height: 17px; background: url(../images/icon_arrowB.svg) no-repeat center center; background-size: contain;}
.mv .pageGnav .gnav-list a {transition: background-color 0.4s ease;}
.mv .pageGnav .gnav-list a:hover{background-color: #fff; color: #fff;}
.mv .pageGnav .gnav-list a:first-child{border-radius: 12px 0 0 0;}
.mv .pageGnav .gnav-list a:nth-child(4){border-radius: 0 0 0 12px;}
.mv .pageGnav .gnav-list a li {transition: color 0.3s ease; color: #fff; /* 通常色 */}
.mv .pageGnav .gnav-list a:hover li {color: #00479d; /* ホバー時に白に */}
.pageGnav_sp .gnav-list{display: flex; background: linear-gradient(90deg, #00b7ee 0%, #00479d 100%); border-right: 0; border-left: 0; flex-wrap: wrap;border-radius: 10px;}
.pageGnav_sp .gnav-list a{width: calc(100% / 2 - 1px);padding: 10px 0;}
.pageGnav_sp .gnav-list a:nth-child(2n){border-left: 1px solid #fff;}
.pageGnav_sp .gnav-list a:nth-child(n+3) {border-top: 1px solid #fff;}
.pageGnav_sp .gnav-list a li{color: #fff; position: relative;display: block; text-align: center;}
.pageGnav_sp .gnav-list a li::after {content: ""; position: absolute; right: 15px; top: 51%; transform: translateY(-50%) rotate(90deg); width: 17px; height: 17px; background: url(../images/icon_arrowB.svg) no-repeat center center; background-size: contain;}


@media screen and (max-width: 1200px) {/*スマホのスタイル*/
.mv{padding-bottom: 70px;}
.mv .mainimg{width: 70%;height: 400px;}
.mv img{height: 400px;}
.mv .pagetitle{height: 330px;}
.mv .pagetitle h2{font-size: 3rem;}
}

@media screen and (max-width: 768px) {/*スマホのスタイル*/
.mv{padding-bottom:50px;background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 40%,#e5edf1 40%,#e5edf1 100%);}
.mv .mainimg{width: 90%;height: 200px;}
.mv img{height: 200px;}
.mv .pagetitle{height:150px;width: 50%;border-radius: 0 30px 30px 0; }
.mv .pagetitle h2{font-size: 2.2rem;}
}

.breadcrumb{font-size:1.3rem;text-align:left;padding:20px 0;}
.breadcrumb a{padding-bottom:1px;border-bottom:1px solid #000;color: #000}

.page_contents{background: #e5edf1}
.page_contents img{width: 100%;height: auto}
@media screen and (max-width: 768px) {/*スマホのスタイル*/
.page_contents{padding-top: 30px;}
}


/* タブ */
.tabmenu{background: #fff;padding: 20px 0}
.tabmenu li{text-align: center;position: relative;box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;cursor: pointer}
.tabmenu li img{width: 100%;height: auto;margin-bottom: 4px;}
.tabmenu li a{display: block;position: relative;padding-bottom: 12px}
.tabmenu li::after {  position: absolute;  content: "";  width: 1px;  height: 100%;  background-color: #b4b4b4;  top: 0;  right: 0;}
.tabmenu li:nth-child(1)::before {  position: absolute;  content: "";  width: 1px;  height: 100%;  background-color: #b4b4b4;  top: 0;  left: 0;}
.tabmenu li a:after {content: '';    width: 8px;    height: 8px;    margin-top: -5px;    border-top: solid 1px #555;    border-right: solid 1px #555;    transform: rotate(135deg);    position: absolute;    bottom: 2px;	left: 0;right: 0;margin: auto}

.tab-item a:hover, .tab-item.is-active a {  color: #00a0cd;}
.tab-item.is-active a:after{border-top: solid 1px #00a0cd;    border-right: solid 1px #00a0cd;}
.panel-item {  display: none;  width: 100%;padding: 60px 0 }
.panel-item.is-active {  display: block;  animation: panel-show .9s ease-in-out forwards;}
@keyframes panel-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media screen and (max-width: 768px) {/*スマホのスタイル*/
.panel-item {padding: 30px 0 }
.panel-item  li{margin-top: 30px}
.tabmenu li:nth-child(4)::before {  position: absolute;  content: "";  width: 1px;  height: 100%;  background-color: #b4b4b4;  top: 0;  left: 0;}
}


/*事業概要*/
.p_business{}
.p_business .tabmenu li{width: 16.66%;}
.p_business .tabmenu li img{width: 50%;}
@media screen and (max-width: 1000px) {/*スマホのスタイル*/
.p_business .panel-item .col3{width: 45%;margin-bottom: 20px}
.p_business .panel-item .col3.mSide20{margin-left: 2%;margin-right:2%;}
}
@media screen and (max-width: 768px) {/*スマホのスタイル*/
.p_business{}
.p_business .tabmenu li{width: 33.333%;margin-bottom: 20px}
.p_business .panel-item .mT60{margin-top: 0px}
.p_business .panel-item .col3{width: 100%;margin-bottom: 20px}
.p_business .panel-item .col3.mSide20{margin-left: 0%;margin-right:0%;}
}

/*最新情報一覧*/
.p_newsList{}
.p_newsList dl{margin-top: 12px; display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;display: -webkit-flex;flex-wrap: wrap;-webkit-flex-wrap:wrap;justify-content: flex-start;-webkit-justify-content: flex-start;align-items: center;border-bottom: 1px solid #909090;padding-bottom: 12px;margin-bottom: 12px;}
.p_newsList dt{color: #004470;font-weight: bold;margin-right: 30px;position: relative;padding-left: 18px;}
.p_newsList dt::before{    content: "";    position: absolute;    top: 50%;left: 0;    transform: translateY(-50%);border: 5px solid transparent;border-left: 8px solid #004470;}
.p_newsList .bt_blue{margin: 50px auto 0;}
@media screen and (max-width: 768px) {/*スマホのスタイル*/

}

/*最新情報詳細*/
.p_newsDetail{}




/*会社情報*/
#philosophy,#recruit{padding-top: 60px;}
#message,#overview,#office,#history{padding-top: 160px;}
#history{padding-bottom: 100px;}
#rinen{padding-top: 50px;}

@media screen and (max-width: 768px) {/*スマホのスタイル*/
#philosophy{padding-top: 50px}
.col2{width: 100%;}
}

#philosophy h2.comp_mincho,#rinen h2.comp_mincho, #office h2.comp_mincho{margin-top: 50px; font-size: 3.5rem; font-weight: bold; letter-spacing: 0.15em; line-height: 1.4; color: #00a0e9;}

#rinen ul.custom-list{margin-top: 50px; font-size: 2rem; line-height: 2.2; letter-spacing: 0.06em; font-weight: bold;}
#rinen ul.custom-list li::before {content: "一. "; margin-right: 0.5em;}
.col2-left:first-of-type {width: 30%;}
.col2-left:last-of-type {width: 66%;}
@media screen and (max-width: 768px){
  #rinen ul.custom-list{font-size: 1.5rem;}
  .col2-left:first-of-type {width: 100%;}
  .col2-left:last-of-type {width: 100%;display: grid;}
}


#message .column-outside-right {margin-left: calc((40vw - 100%) * -1);}
#message .column-outside-right img{height: 600px;object-fit: cover;border-radius: 0px 60px 60px 0px}
.m_mincho{font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: bold; font-style: normal;}
.message_ul{margin-top: 50px;}
.txt_margin0{margin-top: 0;}
@media screen and (max-width: 768px) {/*スマホのスタイル*/
#message .column-outside-right{/*右側へ要素を広げる（2カラム）*/margin-left:0;}
#message .column-outside-right img{height: auto;width: 100%;object-fit: cover;border-radius: 30px}
.txt_margin0{margin-top: 30px;}
.flex_order {
    flex-direction: column;
  }
  .conts_a {
    order: 2;
  }

  .conts_b {
    order: 1;
    text-align: right;
  }
  .col2_grid{
    display: grid;
  }
}

.T_overview{width: 100%; font-size: 1.7rem; line-height: 2.2; letter-spacing: 0.06em; margin-top: 50px;}
.T_overview tr{border-bottom: 1px solid #c1c1c1;}
.T_overview th{width: 20%; text-align: left; padding: 25px 0; font-weight: bold;}
.T_overview td{width: 100%; padding: 28px 0;}

@media screen and (max-width: 768px) {
  .T_overview, .T_overview tbody, .T_overview tr {display: block; width: 100%;}
  .T_overview th, .T_overview td {display: block; width: 100%; padding: 12px 0;}
  .T_overview th {font-weight: bold; border-bottom: none;}
}

.company-logos {display: flex; gap: 40px; align-items: center; flex-wrap: wrap;}
.company-logos img {width: auto; height: 40px; object-fit: contain;}

#office iframe{margin-top: 10px;}

.bt_blue{margin: 20px 0 0 auto; width: 250px; border-radius: 50px;cursor: pointer;  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
background: linear-gradient(90deg, #00479d 0%, #00b7ee 50%, #00479d 100%);
background-size: 200% 100%;}
.bt_blue a{display: block;padding:8px  20px;text-align: center;color: #fff;letter-spacing: 0.2em;font-size: 1.3rem;background: url("../images/icon_arrowW.svg") no-repeat 95% center;background-size: 22px}
.bt_blue:hover{background-position: 100% 0;}

@media screen and (max-width: 768px) {/*スマホのスタイル*/
.bt_blue{margin: 50px auto 0; width: 80%; }
.bt_blue a{font-size: 1.3rem}
}

.timeline {
  position: relative;
  padding-left: 40px;
  border-left: 2px solid #ccc;
  margin-left: 20px;
}

.timeline-item {
  position: relative;
}

.timeline-marker {
  position: absolute;
  left: -51px;
  top: 9px;
  width: 16px;
  height: 16px;
  background-color: #00a0e9;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 0 2px #ccc;
}

.timeline-body {
  display: flex;
  gap: 1em; /* ← 年代とテキストの間を1文字分 */
  align-items: flex-start;
  flex-wrap: wrap;
}

.timeline-date {
  font-weight: bold;
  white-space: nowrap;
  min-width: 300px;
}

.timeline-text {
  flex: 1;
}

/* スマホ対応：縦並びに切り替え */
@media screen and (max-width: 768px) {
  .timeline {
    padding-left: 30px;
}
  .timeline-body {
    flex-direction: column;
    gap: 4px;
  }
  .timeline-marker {
  left: -41px;
}
}


/*採用情報*/
.column-outside-right {margin-left: calc((50vw - 100%) * -1);}
#recruit .column-outside-right img {height: 500px;}
.column-outside-right img {height: 700px;object-fit: cover;border-radius: 0px 60px 60px 0px;}
@media screen and (max-width: 768px) {
    #recruit .business_mv_sp {
        margin-top: 30px;
    }
    #recruit .business_mv_sp img {
        height: 200px;
        width: 100%;
        object-fit: cover;
        border-radius: 30px;
    }
}

.recruit_catch{display: flex;justify-content: space-evenly;flex-wrap: wrap;}
.recruit_catch .txt{background-color: #e9470a;padding: 15px;font-weight: bold;font-size: 1.8rem;color: #fff;border-radius: 15px;}
.recruit_catch .none_txt{background-color: unset;padding: 15px 0;font-weight: bold;font-size: 1.8rem;color: #231815;}

#support {
    background: url(../images/recruit/support_mv.jpg) no-repeat center center;
    background-size: cover;
    padding: 80px 0;
    color: #fff;
}

.bt_white{margin: 50px 0 0; width: 400px;overflow: hidden;border-radius: 50px; }
.bt_white a{display: block;padding:8px  20px;text-align: center;color: #00a0e9;letter-spacing: 0.2em;font-size: 2rem;background:#fff  url("../images/icon_arrowB.svg") no-repeat 95% center;background-size: 22px;position: relative;border-radius: 50px;}

.bt_white a::after {  background: #00479d  url("../images/icon_arrowB.svg") no-repeat 95% center;  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;border-radius: 50px}
.bt_white a:hover {  color: #fff;}
.bt_white a:hover::after {  transform: scale(1, 1);}
@media screen and (max-width: 768px) {/*スマホのスタイル*/
.bt_blue,
.bt_white{margin: 50px auto 0; width: 80%; }
.bt_blue a,
.bt_white a{font-size: 1.6rem}
}


#interview{display: flex;justify-content: space-between;flex-wrap: wrap;margin-top: 50px;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;}
.conts_padtop{padding-top: 160px;}
.recruit_img-number{display: flex;justify-content: space-between;}
.recruit_img-number img{border-radius: 8px;height: auto;width: 230px;max-width: 100%;}
.recruit_subtxt{font-style: italic;font-size: 1.1rem;letter-spacing: 0.1em;line-height: 1;}
.recruit_txt{font-size: 3.8rem;font-weight: bold;letter-spacing: 0.1em;}
.interview_title{padding-top: 20px;}
.interview_a{padding: 40px 20px;width: calc(50% - 40px);border-radius: 15px;position: relative;overflow: hidden;background-size: cover;background-position: center;transition: background-image 0.5s ease;z-index: 1;}
.interview_a:hover {opacity: 1;z-index: 100;}

/* 1つ目 */
#interview a:nth-of-type(1):hover {
  background-image: url(/images/recruit/interview1_bk.jpg);
}

/* 2つ目 */
#interview a:nth-of-type(2):hover {
  background-image: url(/images/recruit/interview2_bk.jpg);
}

/* 3つ目 */
#interview a:nth-of-type(3):hover {
  background-image: url(/images/recruit/interview3_bk.jpg);
}

/* 4つ目 */
#interview a:nth-of-type(4):hover {
  background-image: url(/images/recruit/interview4_bk.jpg);
}
.interview_a img {position: relative;z-index: -1;}
.interview_a:hover img {opacity: 0;}
.interview_a,
.interview_a .interview_title p,
.interview_a .recruit_txt,
.interview_a .recruit_subtxt {transition: color 0.5s ease;}
.interview_a:hover,
.interview_a:hover .interview_title p,
.interview_a:hover .recruit_txt,
.interview_a:hover .recruit_subtxt {color: white;}

.view{text-align: right;font-weight: bold;margin: 10px 20px 0 0;}
.view span{background: linear-gradient(to right, rgba(0, 71, 157, 1) 0%, rgba(0, 71, 157, 1) 1%, rgba(0, 183, 238, 0.8) 100%);color: #fff;padding: 10px 50px;border-radius: 100px;display: inline-block;background-color: transparent;transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;}
.interview_a:hover .view span {background: #fff;border: 1px solid #00a0e9;color: #00a0e9;transform: scale(1.1);}









.recruit-container {
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 24px;
  margin-top: 60px!important;
}

.recruit-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.tabs {
  display: flex;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.tab-button {
  flex: 1;
  padding: 10px 20px;
  cursor: pointer;
  background: none;
  border: none;
  font-size: 16px;
  transition: color 0.4s ease, background-color 0.4s ease;
  border-radius: 10px 10px 0 0;
}

.tab-button:hover {
  color: #CCC;
}

.tab-button.active-new {
  background-color: #00a0e9;
  color: #fff;
  font-weight: bold;
  border-radius: 10px 10px 0 0;
}

.tab-button.active-mid {
  background-color: #e9470a;
  color: #fff;
  font-weight: bold;
  border-radius: 10px 10px 0 0;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.job-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.job-info {
  font-size: 16px;
}