@charset "UTF-8";
/* CSS Document */

#header .g_nav a{color: #fff}
#header .logo .logoB{display: none}
#header .logo .logoW{display:block}

#header.fixed .g_nav a{color: #000}
#header.fixed .logo .logoW{display:none}
#header.fixed .logo .logoB{display:block}

@media screen and (max-width: 768px) {/*スマホのスタイル*/
.icon-bar{background:  #fff;}
#header.fixed .icon-bar{background:  #00479d;}
#humberger span:nth-of-type(1)::before {color: #fff;}
#header.fixed #humberger span:nth-of-type(1)::before {color: #00479d;}
#header .g_nav a{color: #000}
body.drawer-opened #header .logo .logoW{display:none}
body.drawer-opened #header .logo .logoB{display:block}
}

.page_home{background: url("../images/bg.jpg") no-repeat left bottom;background-size: 100% auto;position: relative}
.page_home::before {
  position: absolute;
  content: "";
  right: 0;top: 0;width: 100%;height: 100%;
  background: url("../images/bg.jpg") no-repeat right top;transform: scale(-1, 1);background-size: 100% auto
}
@media screen and (max-width: 768px) {/*スマホのスタイル*/

}
.mv{width: 100%;height: 700px; margin-left: auto;position: relative}
.mv img{width: 100%;height: 700px;object-fit: cover}
@media screen and (max-width: 768px) {/*スマホのスタイル*/
.mv{width: 100%;height: 400px; margin-left: auto;position: relative}
.mv img{width: 100%;height: 400px;object-fit: cover}
}
div.vid_contents {
width: 100%;
text-align: center;
margin: auto;
padding: 0;

}
video.vid_main {
width: 100%;height: 700px;object-fit: cover
}
@media screen and (max-width: 1200px) {
.mv1{height: 600px;}
video.vid_main {height: 600px;object-fit: cover}
}
@media screen and (max-width: 768px) {/*スマホのスタイル*/
.mv1{height: 400px;}
video.vid_main {height: 400px;object-fit: cover}
}



#company{padding-top: 160px;}
#company h2{font-size: 7.9rem;font-weight: bold;letter-spacing: 0.15em;line-height: 1.4}
#company .company_mv{width: 100vw;margin-right: calc(50% - 50vw);}

.column-outside-right{/*右側へ要素を広げる（2カラム）*/margin-left: calc((50vw  - 100%) * -1);}

.column-outside-left{/*左側へ要素を広げる（2カラム）*/margin-right: calc((50vw  - 100%) * -1);}
.column-outside-left img{height: 700px;object-fit: cover;border-radius: 60px 0 0 60px}
.column-outside-right img{height: 700px;object-fit: cover;border-radius: 0px 60px 60px 0px}

@media screen and (max-width: 960px) {/*スマホのスタイル*/
#company h2{font-size: 5.9rem;text-align: center}
}

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


.column-outside-right{/*右側へ要素を広げる（2カラム）*/margin-left:0;}
.column-outside-left{/*左側へ要素を広げる（2カラム）*/margin-right: 0;margin-top: 30px;}
.column-outside-left img{height: auto;width: 100%; object-fit: cover;border-radius: 30px}
.column-outside-right img{height: auto;width: 100%;object-fit: cover;border-radius: 30px}

#company .company_mv_sp{margin-top: 30px;}
#company .company_mv_sp img{height: 200px;width: 100%;object-fit: cover;border-radius: 30px}
}


.bt_blue{margin: 50px 0 0; width: 400px; 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: 2rem;background: url("../images/icon_arrowW.svg") no-repeat 95% center;background-size: 22px}
.bt_blue:hover{background-position: 100% 0;}


.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}
}



#news{margin-top: 160px}
#news 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;}
#news dt{color: #004470;font-weight: bold;margin-right: 30px;position: relative;padding-left: 18px;}
#news dt::before{    content: "";    position: absolute;    top: 50%;left: 0;    transform: translateY(-50%);border: 5px solid transparent;border-left: 8px solid #004470;}
#news .bt_blue{margin: 50px auto 0;}
@media screen and (max-width: 768px) {/*スマホのスタイル*/
#news{margin-top: 100px}
}

#business{margin-top: 160px}
#business h2{font-size: 3.5rem;font-weight: bold;letter-spacing: 0.15em;line-height: 1.4}
#business .lineup{margin-top: 40px}
#business .lineup li{width: 31%;color: #00a0cd;text-align: center;padding-top: 20px}
#business .column-outside-right img{height: 760px;}
#business .bt_blue{margin: 50px auto 0;}
@media screen and (max-width: 768px) {/*スマホのスタイル*/
#business{margin-top: 100px}
#business .col2{width: 100%}

#business h2{font-size: 2.5rem;text-align: center}
#business .lineup{margin-top: 0px}
#business .business_mv_sp{margin-top: 30px;}
#business .business_mv_sp img{height: 200px;width: 100%;object-fit: cover;border-radius: 30px}
}


/* スライダー */
@keyframes infinity-scroll-left {
from {  transform: translateX(0);}
  to {  transform: translateX(-100%);}
}
.scroll-infinity{margin: 160px 0 0;padding-bottom: 160px}
.scroll-infinity__wrap {  display: flex;  overflow: hidden;}
.scroll-infinity__list {  display: flex;  list-style: none;  padding: 0}
.scroll-infinity__list--left {  animation: infinity-scroll-left 80s infinite linear 0.5s both;}
.scroll-infinity__item {  width: calc(100vw / 6);margin: 0 12px;}
.scroll-infinity__item>img {  width: 100%;}
@media screen and (max-width: 768px) {/*スマホのスタイル*/
.scroll-infinity{margin: 50px 0 0;padding-bottom: 50px}
.scroll-infinity__item {  width: calc(100vw / 3);}
}



#recrut{background: url("../images/recrut_bg.jpg") no-repeat center center;background-size: cover; padding: 80px 0;color: #fff}
@media screen and (max-width: 768px) {/*スマホのスタイル*/
#recrut{padding: 40px 0;background: url("../images/recrut_bg.jpg") no-repeat 70% center;background-size: cover; }
#recrut .col2{width: 100%}
}