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

/*------------------------------
  共通
-------------------------------*/
.commonTitle { font-size: 231%;  color: #008ed8; }
.commonTitle + div { font-size: 125%;  color: #0c283f; }

#headerWrap.topHeaderWrap > h1 { position: fixed; left: 2.2vw; z-index: 19; }
#headerWrap.topHeaderWrap #headerSection { display: none; z-index: 19; }

/*------------------------------
  mainWrap
-------------------------------*/
/* MV */
.bgVideo { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; }
.fit { position: relative; overflow: hidden; }
.fitsize { position: absolute; object-fit: cover; }
.section { background: #fff; position: relative; z-index: 1; }

.mainWrap { min-width: 1280px; overflow: hidden; margin-top: 0 !important; }

#mvSec { height: 100vh; /*height: 500px;*/ display: flex; align-items: center; justify-content: center; }
#mvSec h2 { font-size: 5vw; line-height: 2.0; position: relative; text-align: center; color: #ffffff; }

/* vision */
#visionSec { position: relative; z-index: 10; display: flex; justify-content: center; align-items: center; padding: 8.5vw 1vw 13.5vw; margin-top: 1.5vw; font-weight: bold; }
#visionSec #visionTxt { /*opacity: 0; transition: all 1.5s;*/ width: 60%; text-align: center; }
#visionSec #visionTxt h3 { font-size: 6vw; line-height: 1.4; color: #fff; }
#visionSec #visionTxt div { font-size: 2.1vw; margin-top: 1.6vw; color: #fff; }
#visionSec #visionTxt p { font-size: 1.6vw; color: #fff; margin-top: 2vw; line-height: 2.6; }

#visionSec #visionNews { width: 780px; position: absolute; right: 0; background-color: #36aceb; padding-right: 115px; background-image: url("/images/mv_bg_news.png"); background-repeat: no-repeat; background-position: right top; background-size: cover; padding: 18px 25px 18px 30px; color: #fff; border-radius: 15px 0 0 0; }
#visionSec #visionNews > div { display: flex; align-items: center; }
#visionSec #visionNews h3 { font-size: 113%; font-weight: bold; }
#visionSec #visionNews .newsDate { font-size: 75%; margin-left: 30px; }
#visionSec #visionNews .newsTxt { font-size: 94%; margin-left: 30px; width: 470px; }
#visionSec #visionNews .newsTxt a { color: #fff; }
#visionSec #visionNews .btn { font-size: 81%; margin-left: auto; }
#visionSec #visionNews .btn a { border: solid 1px #fff; color: #fff; padding: 5px 10px; border-radius: 2px; }

#visionBg { transition: all 1s; opacity: 0; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; background-image: url("/images/vision2030_bg.png"); background-repeat: no-repeat; background-position: center top; background-size: cover; }
#visionBg.fadeout.slow { animation-duration: 3s !important; }


/* newsSec */
#newsSec { position: relative; background-color: #008ed8; }
#newsSec::after { content: ""; background-color: #fff; position: absolute; right: 0; top: 0; width: calc(100% - 1280px); height: 100%; z-index: -1; }
#newsSec .contentsOuter { display: flex; justify-content: space-between; position: relative; }
#newsSec .contentsOuter #newsTitleArea { padding-top: 93px; width: 21%; color: #fff; position: relative; background-color: #008ed8; }
#newsSec .contentsOuter #newsTitleArea::after { content: url(/common/images/main_bg.png); height: 140px; left: 260px; display: block; position: absolute; top: 0; }
#newsSec .contentsOuter #newsTitleArea h3 { font-size: 250%; }
#newsSec .contentsOuter #newsTitleArea h3 + div { font-size: 119%; margin-top: 5px; }
#newsSec .contentsOuter #newsTitleArea #newsIndex { margin-top: 32px; font-size: 106%; }
#newsSec .contentsOuter #newsTitleArea #newsIndex a { color: #fff; }
#newsSec .contentsOuter #newsTitleArea #newsIndex img { margin-left: 18px; width: 50px; }

#newsSec .contentsOuter #newsContentsArea { width: 79%; background-color: #fff; padding: 82px 0 102px 8.2%; }
#newsSec .contentsOuter #newsContentsArea .tabList { margin-top: 120px; }

/* infoSec */
#infoSec { background-color: #eef5f8; padding: 72px 0 65px; }
#infoSec ul#infoList { margin-top: 40px; display: flex; flex-wrap: wrap; }
#infoSec ul#infoList li { width: 24%; margin-left: 16px; }
#infoSec ul#infoList li:nth-child(4n+1) { margin-left: 0; }
#infoSec ul#infoList li:nth-child(n+5) { margin-top: 50px; }
#infoSec ul#infoList li a { color: #0a273f; }
#infoSec ul#infoList li a[target="_blank"] { background: none; padding: 0; }
#infoSec ul#infoList li a .infoImg { border-radius: 15px; overflow: hidden; }
#infoSec ul#infoList li img { width: 100%; }
#infoSec ul#infoList li h4 { margin-top: 22px; font-weight: normal; }
#infoSec ul#infoList li a[target="_blank"] h4 span { background-image: url("/common/images/icon_win.png"); background-repeat: no-repeat; background-position: right 0.2em; padding-right: 20px; }
#infoSec ul#infoList li h4 + div { margin-top: 12px; font-size: 81%; }
#infoSec ul#infoList li h4 + div div { color: #008ed8; }
#infoSec ul#infoList li h4 + div p { line-height: 1.9; }
#infoSec ul#infoList li h4 + div .spArrow { display: none; }

.swiper-button { display: none; }


/* companySec */
#companySec { padding: 95px 0 60px; position: relative; }
#companySec #companyImg { position: absolute; right: 0; top: 30px; z-index: -1; }
#companySec .txtGradation { margin-top: 25px; font-size: 247%; }
#companySec .txtGradation span { letter-spacing: 0.06em; }
#companySec .txtGradation + p { margin-top: 22px; line-height: 2.1; }
#companySec .txtBtn { margin-top: 35px; margin-left: 0; width: 235px; font-size: 119%; }
#companySec .txtBtn a { padding: 10px; }
#companySec ul#companyList { margin-top: 68px; display: flex; }
#companySec ul#companyList li { width: 225px; border-left: solid 1px #e3e8ea; }
#companySec ul#companyList li:first-child { border: none; }
#companySec ul#companyList li:first-child,
#companySec ul#companyList li:last-child { width: 170px; }

#companySec ul#companyList li .listIcon { text-align: center; }
#companySec ul#companyList li .listIcon img { width: 98px; }
#companySec ul#companyList li .listTxt { margin-top: 15px; padding-left: 35px; font-size: 106%; color: #0a273f; font-weight: bold; }
#companySec ul#companyList li .listTxt a { color: #0a273f; }
#companySec ul#companyList li .listArrow { margin-top: 13px; padding-left: 35px; }
#companySec ul#companyList li .listArrow img { width: 36px; }

#companySec ul#companyList li:first-child .listTxt,
#companySec ul#companyList li:first-child .listArrow { padding-left: 0; }

/* businessSec */
#businessSec { padding: 10px 0 104px; background: #fff url("/images/business_bg_pc.png") no-repeat right bottom; }
#businessSec p { margin-top: 30px; line-height: 2.1; }
#businessSec ul#businessList { margin-top: 40px; display: flex; justify-content: space-between; }
#businessSec ul#businessList li { width: 32.3%; border-radius: 15px; overflow: hidden; }
#businessSec ul#businessList li > div { background-color: #fff; padding: 20px 0 20px 25px; border: solid 1px #e3e8ea; border-top: none; border-radius: 0 0 15px 15px; }
#businessSec ul#businessList li > div a { color: #0a273f; }
#businessSec ul#businessList li > div a img { width: 36px; margin-left: 15px; }
#businessSec ul#businessList li > div .businessCategory { font-size: 119%; }
#businessSec ul#businessList li > div .businessTopics { margin-top: 10px; font-size: 75%; color: #008ed8; position: relative; }
#businessSec ul#businessList li > div .businessTopics::before { content: ""; width: 20px; height: 1px; background-color: #42a0dd; position: absolute; left: -25px; top: calc(50% - 1px); }
#businessSec ul#businessList li > div .businessTopicsLink { margin-top: 5px; }
#businessSec ul#businessList li > div .businessTopicsLink a { padding-right: 20px; background: url("/common/images/bg_arrow_blue.png") no-repeat right center / 13px; }

/* worksSec */
#worksSec { padding: 35px 0 65px; background: -webkit-linear-gradient(0deg, #008ed8, #0176b3); }
#worksSec .commonTitle,
#worksSec .commonTitle + div { color: #fff; }
#worksSec #worksSlider { margin-top: 23px; }
#worksSec #worksSlider .worksSliderItem { border-radius: 15px; overflow: hidden; display: flex !important; }
#worksSec #worksSlider .worksSliderItem .worksSliderImg { width: 63%; }
#worksSec #worksSlider .worksSliderItem .worksSliderImg img { width: 100%; }
#worksSec #worksSlider .worksSliderItem .worksSliderInfo { width: 37%; padding-left: 5%; background-color: #fff; display: flex; align-items: center; }
#worksSec #worksSlider .worksSliderItem .worksSliderInfo .worksSliderYear { font-size: 88%; color: #008ed8; }
#worksSec #worksSlider .worksSliderItem .worksSliderInfo .worksSliderTag { display: inline-block; font-size: 75%; margin-top: 10px; border: solid 1px #cddbe0; background-color: #eff5f7; border-radius: 5px; padding: 5px 15px; }
#worksSec #worksSlider .worksSliderItem .worksSliderInfo h4 { font-size: 200%; margin-top: 10px; }
#worksSec #worksSlider .worksSliderItem .worksSliderInfo .txtBtn { margin-top: 30px; width: 165px; margin-left: 0; }
#worksSec #worksSlider .worksSliderItem .worksSliderInfo .txtBtn a { padding: 10px; }

/* messageSec */
#messageSec { height: 570px; padding: 72px 0; background-color: #007ebf; background: #e9f2fb url("/images/message_img_pc.png") no-repeat left top / auto 100%; }
#messageSec .contentsOuter { display: flex; align-items: center; height: 100%; justify-content: flex-end; }
#messageSec .contentsOuter > div { margin-right: 2.5%; }
#messageSec .txtGradation { margin-top: 10px; font-size: 2.5vw; line-height: 1.7; }
#messageSec #messageLink { margin-top: 20px; font-size: 125%; }
#messageSec #messageLink a { color: #0a273f; }
#messageSec #messageLink a img { margin-left: 20px; width: 57px; }

/* sustainabilitySec */
#sustainabilitySec { background: #fff url("/images/sustainability_bg_pc.png") no-repeat center bottom / 100%;  padding: 43px 0 75px; }
#sustainabilitySec #sustainabilityInfoArea { overflow: hidden; }
#sustainabilitySec #sustainabilityInfoArea .titleArea { float: left; margin-top: 40px; }
#sustainabilitySec #sustainabilityInfoArea #sustainabilityImg { float: right; }
#sustainabilitySec #sustainabilityInfoArea p { margin-top: 28px; line-height: 2.1; font-size: 106%; }
#sustainabilitySec #sustainabilityInfoArea .txtBtn { float: left; margin-top: 37px; width: 330px; margin-left: 0; }
#sustainabilitySec #sustainabilityInfoArea .txtBtn a { font-size: 119%; padding: 10px; }

#sustainabilitySec ul#sustainabilityList { margin-top: 27px; display: flex; justify-content: space-between; }
#sustainabilitySec ul#sustainabilityList li { width: 19%; }
#sustainabilitySec ul#sustainabilityList li .arrowLink { margin-top: 20px; font-size: 106%; color: #0a273f; }
#sustainabilitySec ul#sustainabilityList li div img { margin-left: 20px; width: 48px; }

#sustainabilitySec h4 { font-size: 175%; color: #008ed8; margin-top: 55px; }

#irRecruit { padding: 75px 0 80px; }
#irRecruit .contentsOuter { display: flex; justify-content: center; }
#irRecruit section { width: 38.5%; margin: 0 1.5%; }
#irRecruit h3.commonTitle { font-size: 188%; }
#irRecruit h3.commonTitle + div { margin-top: 10px; font-size: 106%; }
#irRecruit a.arrowLink img { width: 48px; margin-left: 15px; }
#irRecruit .irRecruitContents { margin-top: 30px; border: solid 1px #e3e8ea; border-radius: 15px; overflow: hidden; }
#irRecruit .irRecruitContents .irRecruitInfo { background-color: #fff; padding: 25px 25px 40px; }


#irRecruit #irSec .irRecruitContents .irRecruitInfo h4 { font-size: 131%; }
#irRecruit #irSec .irRecruitContents .irRecruitInfo h4 + div { margin-top: 15px; font-size: 88%; }
#irRecruit #irSec .irRecruitContents .irRecruitInfo h4 + div .iconZip { background-color: #008ed8; color: #fff; padding: 2px 5px; line-height: 1; font-size: 85%; margin: 0 1em; }
#irRecruit #irSec .irRecruitContents .irRecruitInfo dl dt { margin-top: 20px; font-size: 106%; color: #008ed8; }
#irRecruit #irSec .irRecruitContents .irRecruitInfo dl dd { margin-top: 5px; font-size: 88%; line-height: 1.8; }
#irRecruit #irSec .irRecruitContents .irRecruitInfo dl dd a[target="_blank"] { padding: 0; background: none; }
#irRecruit #irSec .irRecruitContents .irRecruitInfo dl dd .iconPos { width: 13px; padding-bottom: 3px; margin-left: 19px; }


#irRecruit #recruitSec .irRecruitContents .irRecruitInfo { text-align: center; }
#irRecruit #recruitSec .irRecruitContents .irRecruitInfo img { width: 320px; }
#irRecruit #recruitSec .irRecruitContents .irRecruitInfo ul { width: 320px; margin: 28px auto 0; }
#irRecruit #recruitSec .irRecruitContents .irRecruitInfo ul li { margin-top: 8px; }
#irRecruit #recruitSec .irRecruitContents .irRecruitInfo ul li.txtBtn.txtBlueBtn a { background: #eef5f8 url("/common/images/bg_arrow_blue.png") no-repeat right 20px center; padding: 12px 40px; color: #0a273f; }
#irRecruit #recruitSec .irRecruitContents .irRecruitInfo ul li.txtBtn.txtBlueBtn a span { background: none; }
#irRecruit #recruitSec .irRecruitContents .irRecruitInfo ul li.txtBtn.txtBlueBtn a[target="_blank"] span { background: url("/common/images/icon_win.png") no-repeat right center; padding: 0 18px; }


/*------------------------------
  MOVE
-------------------------------*/
.fadein { animation:fadeIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards; }
.fadeout { animation:fadeOut 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards; }
@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
	}
}
@keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
	}
}

.slidein { animation:slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards; }
.slideout { animation:slideOut 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards; }
@keyframes slideIn {
  0% {
    transform:translateX(180px);
    opacity:0;
  }
  100% {
    transform:translateX(0);
    opacity:1;
	}
}
@keyframes slideOut {
  0% {
    transform:translateX(0);
    opacity:1;
  }
  100% {
    transform:translateX(180px);
    opacity:0;
	}
}

.zoomin { animation:zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards; }
.zoomout { animation:zoomOut 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards; }
@keyframes zoomIn {
  0% {
    transform:scale(0.8);
    opacity:0;
  }
  100% {
    opacity:1;
    transform:scale(1);
  }
}
@keyframes zoomOut {
  0% {
		opacity:1;
    transform:scale(1);
	}
  100% {
    transform:scale(0.8);
    opacity:0;
  }
}

.fadeup { animation:fadeUp 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards; }
.fadedown { animation:fadeDown 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards; }
@keyframes fadeUp {
  0% {
    transform:translateY(30px);
    opacity:0;
  }
  80% {
    opacity:1;
  }
  100% {
    opacity:1;
    transform:translateY(0);
  }
}
@keyframes fadeDown {
  0% {
    transform:translateY(0);
    opacity:1;
  }
  80% {
    opacity:0;
  }
  100% {
    opacity:0;
    transform:translateY(30px);
  }
}