@charset "utf-8";



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

font-family: "Noto Sans JP", sans-serif;100 to 900;

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ----------------------------------------------------

element base setting (common)

---------------------------------------------------- */

body {color: #00143C; line-height: 1.6; background: #fff; font-family: "Noto Sans JP", sans-serif;}

a {color: #000; text-decoration: none;}

a:hover {text-decoration: underline;}

.clickable a, .clickable a:hover {}

.flex {display: flex; display: -webkit-flex; justify-content: space-between; flex-wrap: wrap;}

.inrContent1100 {width: 80%; max-width: 1100px; margin:0 auto; position: relative;}

.inrContent1000 {width: 75%; max-width: 1000px; margin:0 auto; position: relative;}

.inrContent900 {width: 70%; max-width: 900px; margin:0 auto; position: relative;}

.inrContent840 {width: 65%; max-width: 840px; margin:0 auto; position: relative;}

img {width: 100%; height: auto;}

.br_spOnly{display:none;}

.br_pcOnly{display:block;}

#wrapper{display:block; position: relative;}



/*　上に上がる動き　*/

#page-top.UpMove{animation: UpAnime 0.5s forwards; z-index: 99;}

@keyframes UpAnime{

  from {

    opacity: 0;

  transform: translateY(100px);

  }

  to {

    opacity: 1;

  transform: translateY(0);

  }

}



/*　下に下がる動き　*/

#page-top.DownMove{animation: DownAnime 0.5s forwards; z-index: 99;}

@keyframes DownAnime{

  from {

    opacity: 1;

  transform: translateY(0);

  }

  to {

    opacity: 1;

  transform: translateY(100px);

  }

}



@keyframes fade {

   0% {opacity: 0; }

   100% {opacity: 1; }

}









/* ----------------------------------------------------

ブロックタイトル

---------------------------------------------------- */

.blockTitle{display: block; text-align: center; margin-bottom: min(3.3vw, 50px);}

.blockTitle span{font-size: min(3.2vw, 4.8rem); font-weight: 900; color: #003894; border-bottom: 6px solid #003894;}

.blockTitle .spBlod{font-weight: 500!important; }



/* ----------------------------------------------------

エントリーボタン

---------------------------------------------------- */

.entryBut{background: url("../img/entryBack.jpg") no-repeat center center; background-size: cover; justify-content: center; align-items: center; position: relative; overflow: hidden;}

.entryBut::before{position: absolute; top: 0; right: 50%; content: ''; border-top: 17vw solid #00143C; border-right: 100vw solid transparent;}

.entryBut::after{position: absolute; bottom: 0; left: 50%; content: ''; border-bottom: 17vw solid #00143C; border-left: 100vw solid transparent;}

.entryBut span{color: white; font-size: min(3.067vw, 4.6rem); font-weight: 900; text-shadow: 3px 3px 0px rgba(0, 0, 0, 1); padding: min(3.3vw, 50px) 0;  display: block;}

footer .entryBut span{font-size: min(3.467vw, 5.2rem); padding: min(6vw, 90px) 0;}

.entryBut span a{color: white; position: relative; display: block; z-index: 97;}





/* ----------------------------------------------------

TOP

---------------------------------------------------- */

#topMain{background: url("../img/top-main.png") no-repeat center bottom; background-size: 100% auto; padding: 0 0 min(21.667vw, 325px) 0;}

#topMain .mainCatchi{padding: min(4.33vw, 65px) 0; width: 53%; display: block; margin: 0 auto}

#topMain p{color: white; font-size: min(1.2vw, 1.8rem); text-align: center; padding: min(4.33vw, 65px) 0 0 0;}

#topMain p span{font-size: min(1.733vw, 2.6rem); display: block; margin: 1em 0;}

#topMain h1{margin: min(3.33vw, 50px) auto 0 auto; width: min(21.667vw, 325px);}

#topMain h2{position: relative;}

#topMain h2 p{width: min(45.533vw, 683px); margin: 0 auto; z-index: 2; position: relative; padding: 0;}



@media (min-width:1500px) {

#topMain{padding: 0 0 22.5vw 0;}

#topMain h1{width: 18vw;}

#topMain h2 p{width: 38vw;}

#topMain p{font-size: 1vw;}

#topMain p span{font-size: 1.5vw;}

}



/* ----------------------------------------------------

5つのmerit

---------------------------------------------------- */

#merit{margin-top: min(-3.33vw, -50px);}

#merit ul{justify-content: center; margin-bottom: min(3.33vw, 50px);}

#merit ul li{width: 30%; margin: 0 1.5% 1.5em 1.5%;}

#merit ul li p{color: white; background-color: #74B5E4; align-items: center; border-radius: 50px; font-size: min(1.4vw, 2.4rem); font-weight: 800; padding: 0.5em 0.2em; text-align: center; line-height: 1.2; margin-bottom: 0.5em;}



/* ----------------------------------------------------

イビデンはこんな会社

---------------------------------------------------- */

#about{background-color: #74B5E4; background-image: url("../img/aboutImg.png"); background-position: top left; background-size: 50% auto; background-repeat: no-repeat; padding-bottom: min(4.667vw, 70px);}

#about .aboutInner{flex-flow: column; align-items: flex-end; padding: min(4vw, 60px) 0 0 0;}

#about .aboutInner p,

#about .aboutInner h2{width: 47%; color: #003894; line-height: 1.8; margin-bottom: min(1.33vw, 20px);}

#about .aboutList{margin-left: 10%; background-color: white; justify-content: center; padding: 0;}

#about dl{align-items: center; border-bottom: 1px solid #003894; width: 93%;}

#about dl:last-of-type{border-bottom: none;}

#about dt{color: #003894; font-size: min(2vw, 3rem); font-weight: 900; width: 27%; border-right: 8px solid #74B5E4; margin: min(0.667vw, 10px) min(0.667vw, 10px) min(0.667vw, 10px) 0;}

#about dd{width: 71%; margin: min(0.667vw, 10px) 0 min(0.667vw, 10px) 0; letter-spacing: -0.03em;}





/* ----------------------------------------------------

先輩社員の声

---------------------------------------------------- */

#voice{padding: min(4.667vw, 70px) 0 0 0;}

#voice h2{text-align: center;}

#voice h2 span{width: min(38.667vw, 580px); display: inline-block;}

#voice .staffWrap{border-bottom: 1px dotted #003894; padding: min(5.33vw, 85px) 0;}

#voice .staffWrap:last-of-type{border-bottom: none;}

#voice .staffBlock{width: 90%; margin: 0 auto;}

#voice .staffTop{align-items: flex-start;}

#voice .staffBottom{align-items: flex-start; margin-top: 1em;}

#voice .staffTop .stDeta{position: relative; width: 38%;}

#voice .staffTop .stDeta img{width: 84%;}

#voice .staffTop .stDeta p{position: absolute; bottom: 0; right: 0; text-align: right;}

#voice .staffTop .stDeta p span{color: white; background-color: #74B5E4; padding: 0.05em 0.3em; font-weight: 500; display: inline-block; margin-top: 0.2em;}

#voice .staffTop .stDeta p span strong{font-size: min(1.6vw, 2.4rem)!important; padding: 0 0.3em 0 1em; line-height: 1;}

#voice .staffTop dl{width: 60%;}

#voice .staffBottom dl{width: 52%;}

#voice dt{padding: 0 0.6em 0 0; border-right: 1px solid #003894; font-weight: 600; margin-bottom: 1em; text-align: right;}

#voice dd{padding: 0 0 0 0.3em; margin-bottom: 1em; line-height: 1.8;}

#voice .staffTop dt{width: 15%;}

#voice .staffTop dd{width: 83%;}

#voice .staffBottom dt{width: 24%;}

#voice .staffBottom dd{width: 74%;}

#voice .staffBottom p{width: 46%;}



#voice .schedule{justify-content: center; margin-top: min(4.667vw, 70px);}

#voice .schedule aside{width: min(16.533vw, 248px); margin-right: min(2vw, 30px);}

#voice .schedule ul{flex: 1; position: relative;}

#voice .schedule ul::after{position: absolute; top: 8px; left: 6px; content: ""; width: 3px; height: 95%; background-color: #74B5E4;}

#voice .schedule ul li{justify-content: flex-start; align-items: flex-start; line-height: 1.3;}

#voice .schedule ul li .s-time{color: #74B5E4; font-weight: 800; position: relative; padding-left: 2em; width: 5em;}

#voice .schedule ul li .s-time::before{position: absolute; top: 0; left: 0; content: "●";}

#voice .schedule ul li .s-time::after{position: absolute; top: 50%; left: 0.5em; transform: translateY(-50%); content: ""; background-color: #003894; width: 1.3em; height: 1px; z-index: -1;}

#voice .schedule ul li .s-event{font-weight: 800; position: relative; color: #003894; flex: 1;}

#voice .schedule ul li .s-event::after{position: absolute; top: 0.65em; left: 0; content: ""; background-image: radial-gradient(circle, #000000 1px, transparent 1px); background-position: left bottom; background-repeat: repeat-x; background-size: 3px 2px; width: 100%; height: 1px; z-index: -1;}

#voice .schedule ul li .s-event.eventNoline::after{position: absolute; top: 50%; left: 0; transform: translateY(-50%); content: ""; background-image: none; width: 0; height: 0;}

#voice .schedule ul li .s-event span{background-color: white; padding: 0 0.3em 0 0.5em; display: inline-block;}

#voice .schedule ul li .s-text{flex-shrink: 0; padding-left: 0.5em; width: 55%; letter-spacing: -0.04em;}

.w90{width: 90%; margin: 0 auto;}

/*scheduleの時間　間隔設定*/

.sMg0-5{margin-bottom: 0.5em;}

.sMg1{margin-bottom: 1em;}

.sMg1-5{margin-bottom: 1.5em;}

.sMg2{margin-bottom: 2em;}

.sMg2-5{margin-bottom: 2.5em;}

.sMg3{margin-bottom: 3em;}

.sMg3-5{margin-bottom: 3em;}

.sMg4{margin-bottom: 4em;}







/* ----------------------------------------------------

働き方

---------------------------------------------------- */

#work{padding: min(4.667vw, 70px) 0 min(9vw, 135px) 0;}

#work .inrContent1000{background: url("../img/workBack.png") repeat-y center top; background-size: 100% auto;}

#work .workInr{width: 84%; margin: 0 auto;}

#work .workBlock{position: relative;}

#work .workBlock h2{position: absolute; top: 0; left: -2%; width: min(17.33vw, 260px);}

#work .workBlock .workRead01{padding-top: min(6.667vw, 100px); text-align: center; margin-bottom: 1.5em;}

#work .workBlock .workPoint{position: relative; padding-top: min(2.533vw, 38px); margin-bottom: min(4vw, 60px);}

#work .workBlock .workPoint aside{position: absolute; top: 0; left: 0; width: min(8.6vw, 129px);}

#work .workBlock .workPointCaset{background-color: #74B5E4; align-items: center;}

#work .workBlock .workRead02{color: #fff; font-weight: 600; padding: min(3vw, 45px); width: 40%;}

#work .workBlock .workPointCaset span{width: 60%;}

#work .workBlock .workTime{padding-top: min(9vw, 135px); margin-bottom: 1.5em;}

#work .workBlock .workRead03,

#work .workBlock .asterisk-list02{margin: 0 auto; width: 70%; font-size: min(0.933vw, 1.4rem); color: black;}

#work .workBlock .workRead04{text-align: center; color: white; background-color: #74B5E4; border-radius: 50px; margin: 1.5em 0 0.2em 0;}

#work .workBlock .workRead05{font-size: min(0.933vw, 1.4rem); text-align: right;}







/* ----------------------------------------------------

募集要項

---------------------------------------------------- */

#recruit{padding: min(10vw, 150px) 0 min(9vw, 135px) 0;}

#recruit table{width: 100%; border-top: 1px solid #74B5E4; border-left: 1px solid #74B5E4; border-right: 1px solid #74B5E4;}

#recruit table th{background-color: #74B5E4; color: white; text-align: center; font-weight: 700; width: 15%; border-bottom: 1px solid #fff; padding: min(2.5vw, 25px);}

#recruit table tr:last-child th{border-bottom: 1px solid #74B5E4;}

#recruit table td{width: 85%; border-bottom: 1px solid #74B5E4; padding: min(2.5vw, 25px);}

#recruit dt{width: 20%; color: #003894; font-weight: 700; margin-bottom: 1em; position: relative;}

#recruit dd{width: 79%; margin-bottom: 1em;}

#recruit .rec-dl01 dt{text-align: right;}

#recruit .rec-dl02 dt::after{position: absolute; top: 0; right: 0; content: "｜";}

.indent-list{list-style-type: '・'; padding-left: 1em;}

.asterisk-list01{list-style-type: '＊'; padding-left: 1em;}

.asterisk-list02{list-style-type: '※'; padding-left: 1em;}





/* ----------------------------------------------------

求める人物像

---------------------------------------------------- */

#person{padding: 0;}

#person p{font-size: min(2.3vw, 2.3rem); font-weight: 600; text-align: center;}

#person p span{color: #74B5E4;}



/* ----------------------------------------------------

福利厚生

---------------------------------------------------- */

#benefit{padding: min(10vw, 150px) 0 min(9vw, 135px) 0;}

#benefit h3{background-color: #74B5E4; color: white; font-size: min(2.4vw, 2.4rem); padding: 0.3em 0.8em; font-weight: 600; margin: min(8vw, 80px) auto min(4vw, 40px) auto;}

#benefit h3:first-of-type{margin: min(5vw, 50px) auto min(4vw, 40px) auto;}

#benefit dl{margin-bottom: min(3vw, 30px);}

#benefit dl:last-of-type{margin-bottom: 0;}

#benefit dl dt,#benefit dl dd{margin-bottom: min(3vw, 30px); width: 48%;}

#benefit dd{display: flex; flex-flow: column;}

#benefit h4{position: relative; font-size: min(2vw, 2.0rem); padding-left: 1.3em; font-weight: 600;}

#benefit h4::before{position: absolute; top: 0; left: 0; content: "●"; color: #74B5E4;}

#benefit .benefitRead{flex-grow: 1;}

#benefit .benefitImg{margin-top: min(2vw, 20px);}

.mgTB30{margin: min(3vw, 30px) 0;}

#benefit .inrContent1000 .benefitRead{margin-bottom: 1.5em;}

#benefit .benUnd .benefitRead{margin-bottom: 1.5em;}



#benefit dl{align-items: flex-start;}



/* ----------------------------------------------------

faq

---------------------------------------------------- */

#faq{padding: min(10vw, 150px) 0 0 0;}

#faq .faqBlock {border: 3px solid #74B5E4; padding: min(2vw, 20px) min(4.5vw, 45px); position: relative; margin-bottom: min(2vw, 20px);}

#faq .faqBlock:last-child {margin-bottom: 0;}

#faq .faqBlock h3 {display: flex; justify-content: space-between; cursor: pointer; font-weight: 800; color: #EF9F2D; font-size: min(2.2vw, 2.2rem); position: relative; padding: 0 0 0 min(6.8vw, 68px);}

#faq .faqBlock h3::before{position: absolute; top: 50%; left: 0; transform: translateY(-50%); content: ""; background: url("../img/faq-Q.svg") no-repeat 0 0; width: min(4.8vw, 48px); height: min(4.8vw, 48px);}

#faq .faqBlock h3.active {padding: min(0.8vw, 8px) 0 min(2vw, 20px) min(6.8vw, 68px); border-bottom: 5px dotted #74B5E4;/*min-height: min(6.0vw, 60px);*/}

#faq .faqBlock h3.active::before{top: 0; transform: translateY(0);}

#faq .faqCont {display: none; padding: min(2vw, 20px) 0 0 min(6.8vw, 68px); color: #00143C; position: relative; /*min-height: min(6.0vw, 60px);*/}

#faq .faqCont::before{position: absolute; top: min(0.8vw, 8px); left: 0; content: ""; background: url("../img/faq-A.svg") no-repeat 0 0; width: min(4.8vw, 48px); height: min(4.8vw, 48px);}

#faq .faqBlock h3 span {position: relative; display: block; width: 100%; }

#faq .faqBlock h3 span::after {content: "open↓"; position: absolute; right: 0; top: 0; z-index: 2; transition: 0.5s all; color: #00143C; font-size: min(1.8vw, 1.8rem); border-bottom: 1px solid #00143C;}

#faq .faqBlock h3.active span::after {content: "close↑";}



/* ----------------------------------------------------

flow

---------------------------------------------------- */

#flow{padding: min(10vw, 150px) 0 min(9vw, 135px) 0;}

#flow .read{text-align: center; margin-bottom: 1em;}

#flow ol{counter-reset: item; padding-left: 2em;}

#flow ol li{border-top: 3px solid #74B5E4; position: relative; counter-increment: item; padding: 0 4%; display: flex; display: -webkit-flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

#flow ol li::before {content: counter(item) " "; position: absolute; left: 0; top: 55%; transform: translateY(-50%); color: #003894; font-size: min(3.3vw, 5rem); font-weight: 900; padding-left: 0.15em;}

#flow ol li::after {content:"STEP"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: #74B5E4; font-size: min(1.8vw, 1.8rem); font-weight: 700; padding-bottom: 2.8em;}

#flow ol li p {color: #003894; font-size: min(1.333vw, 2.0rem); font-weight: 700; width: 29%; position: relative; padding: min(2vw, 30px) 0; display: flex; justify-content: center; align-items: center;}

#flow ol li p::after {position: absolute; bottom: min(-1.333vw, -20px); left: 50%; transform: translateX(-50%); content: ""; background: url("../img/flow-arrow.svg") no-repeat center center; background-size: cover; width: min(3.3vw, 50px); height: min(2.133vw, 32px); z-index: 2;}

@media (max-width: 1100px) {

#flow ol li p::after {bottom: -1.7vw;}	

}

#flow ol li:last-of-type{border-bottom: 3px solid #74B5E4;}

#flow ol li:last-of-type p::after {content: ""; background: none;}

#flow ol li span {width: 63%; padding: min(2vw, 30px) 0;}











/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

pcSetting

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */



@media (min-width:768px) {

/* ----------------------------------------------------

common(pc)

---------------------------------------------------- */

/* hover */

a:hover {

  opacity: .6 !important; filter: alpha(opacity=60);

  text-decoration: none;

  -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;

}

a img:hover {

  opacity: .6 !important; filter: alpha(opacity=60);

  -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;

}

.clickable:hover {

  filter: alpha(opacity=60) !important;	opacity: .6 !important;

  -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;

}

/* ----------------------------------------------------

header (common)

---------------------------------------------------- */

#header {

  position: fixed;

  left: 0;

  top: 0;

  z-index: 99;

  width: 100%;

  background: rgba(0, 20, 60, 0);

  min-height: min(6.667vw, 100px);

  transition: background 0.3s ease, opacity 0.3s ease; /* opacityの遷移も追加 */

  opacity: 0;  /* 最初は透明で非表示 */

}



#header.fixed {

  position: fixed;

  background: rgba(0, 20, 60, 0.7);

  opacity: 1; /* 'fixed'クラスが追加された時に表示 */

  pointer-events: auto;

}





#header .headerInner{width:97%; margin: 0 auto;}

#hd-logo p{width: min(8.33vw, 125px); margin: 0 0 0 0;}

	#hd-logo{display: flex; align-items: center;}

.hedBtWrap{align-items: center;}

.hedBtWrap ul {padding: 0 1em;}

.hedBtWrap ul li{position: relative; padding: 0 1.1em 0 0.1em; font-size: min( 1.2vw , 1.8rem ); color: white;}

.hedBtWrap ul li::after{position: absolute; top: 0; right: 0; content: "｜";}

.hedBtWrap ul li:last-child::after{content: "";}

.hedBtWrap ul li a{font-weight: 600; color: white;}

.headEntry{position: relative;}

.headEntry p {width: min(12.33vw,185px); height: min(3.6vw,54px); position: relative; background: url("../img/btEntry.png") no-repeat 0 0; background-size: 100%; text-align: center;}

.headEntry p span a{color: white; font-size: min(1.33vw, 2.0rem); font-weight: 900; text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.7); padding: 0.4em 0;  display: block;}

.headCorpLink{position: relative;}

.headCorpLink p a{color: white; font-weight: 600; text-shadow: 1px 1px 0px rgba(0, 0, 0, 1); padding: 0.6em 1em 0.6em 0;  display: block; line-height: 1.3;}

}

	

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

tabletSetting

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */



@media (max-width: 1200px) and (min-width: 768px) {



ul{margin-bottom:0!important;}



}

@media (max-width: 1024px) and (min-width: 768px) {

@media (orientation: landscape) {



}

}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

spSetting

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */



@media (max-width: 767px) {

.inrContent1100 {width: 95%;}

.inrContent1000 {width: 90%;}

.inrContent900 {width: 80%;}

.inrContent840 {width: 85%;}

.inrContent {width: 90%;}

.br_spOnly{display:block;}

.br_pcOnly{display:none;}

.order1{order:1;}

.order2{order:2;}

	

/*ハンバーガー*/

#btnGlobal {position: fixed; right: 3.5%; top: min(3vw,20px); z-index: 120;display: flex; display: -webkit-flex; flex-wrap: wrap; flex-direction: column; justify-content: center; border: 1px solid #fff; border-radius: 2vw; width: min(12vw,90px); aspect-ratio: 1/1; background: #00143C;}

#btnGlobal .btnWrapGlobal {	position: relative;	width: min(4vw,28px);	height: min(3.2vw,27px); margin: 0 auto min(1vw,10px);}

#btnGlobal .btnLine { height: 1px; background: #fff; position: absolute; right:0; width: 100%;}

#btnGlobal .btnLine.btnLineT {top: 0;}

#btnGlobal .btnLine.btnLineM {top: 50%; transform: translateY(-50%);}

#btnGlobal .btnLine.btnLineB {bottom: 0; }

#btnGlobal .btnGlobal__txt {font-size:min(3vw,24px); line-height: 1.2; width: 100%; text-align: center;}



#btnGlobal.active {border-color: #fff; background: #00143C; }

#btnGlobal.active .btnGlobal__txt {color: #fff;}

#btnGlobal.active .btnLine {background: #fff;}

#btnGlobal.active .btnLine.btnLineT { display: none;}

#btnGlobal.active .btnLine.btnLineM { transform: translateY(0) rotate(45deg) ;}

#btnGlobal.active .btnLine.btnLineB { transform: rotate(-45deg); bottom:inherit; top: 50%;}

#btnGlobal .btnLine.btnLineM, #btnGlobal .btnLine.btnLineB {-moz-transition: all, ease-in-out, 0.3s;  -o-transition: all, ease-in-out, 0.3s;  -webkit-transition: all, ease-in-out, 0.3s; transition: all, ease-in-out, 0.3s;}	

	

#grandMenu {background: #00143C; width: 100%; height: 100%; position: fixed; z-index: 100!important;  left: 0; top: 0; display: none; overflow: auto; padding: 20vw 8%;}

#grandMenu a {color: #fff;}

#grandMenu #navGlobal {position: relative; right: inherit; display: block; height: 100%;}

#grandMenu #navGlobal > li {border-bottom: 1px dashed #fff; line-height: 1; margin: 0 auto;}

#grandMenu #navGlobal > li a {display: block; position: relative; margin-right:0; font-size: min(4vw,20px); font-weight: 600; padding: 4.5vw 0 4.5vw 1.5em;}

#grandMenu #navGlobal > li a::before {content: ""; width: 1em; height: 2px; background: #fff; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}

#header .headInner ul li:last-child a{margin-right:0;}

#grandMenu #navGlobal li a::after {content:""; position: absolute;  top: 50%; border-top:2px solid #fff; border-right: 2px solid #fff; transform:  rotate(45deg) translateX(-50%); transition: all 0.3s  ease; right: 2vw; width: 2vw; height: 2vw;}



/* ----------------------------------------------------

header (common)

---------------------------------------------------- */

#header  {position: fixed; left: 0; top: 0; z-index: 100; width: 100%; background: rgba(0, 20, 60, 0); height: min(18vw,130px); transition: background 0.3s ease, opacity 0.3s ease; /* opacityの遷移も追加 */

  opacity: 0;  /* 最初は透明で非表示 */}

#header.fixed {position: fixed; background: rgba(0, 20, 60, 0.7); opacity: 1; /* 'fixed'クラスが追加された時に表示 */

  pointer-events: auto;}

.headerInner{width:93%; margin: 3vw auto; justify-content: flex-start; }

	

	

	

#hd-logo{width: 20%; margin: 2vw 0 0 0;}

#hd-logo p{width: 100%; margin: 0;}

.headEntry{position: absolute; top: 5vw; right:min(18vw,120px)}

.headEntry > p {background: url("../img/btEntry.png") no-repeat 0 0; background-size: 100%; text-align: center; position: relative; width: 30vw;}

.headEntry p span a{color: white; font-size: 3.4vw; font-weight: 900; text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.7); padding: 0.5em 1em;  display: block; line-height: 1.3;}

.headCorpLink{position: absolute; top: 3vw; left: 25vw}

.headCorpLink p a{color: white; font-weight: 600; text-shadow: 1px 1px 0px rgba(0, 0, 0, 1); padding: 0.6em 0.3em 0.6em 0;  display: block; line-height: 1.3;}



	



	

/* ----------------------------------------------------

ブロックタイトル

---------------------------------------------------- */

.blockTitle{margin-bottom: 6vw;}

.blockTitle span{font-size: 5vw;}



/* ----------------------------------------------------

エントリーボタン

---------------------------------------------------- */

.entryBut span{font-size: 4.2vw; padding: 6vw 0;}

footer .entryBut span{font-size: 4.4vw; padding: 10vw 0;}

	

/* ----------------------------------------------------

TOP

---------------------------------------------------- */

#topMain{background-size: auto 100%; padding: 0 0 20.3vw 0;}

#topMain .mainCatchi{padding: 12vw 0 8vw 0; width: 90%; display: block; margin: 0 auto}	

	

#topMain p{font-size: 3.4vw; text-align: center; padding: 8vw 0 0 0; line-height: 1.8;}

#topMain p span{font-size: 4.4vw; margin: 0.5em 0;}

#topMain h1{margin: 6vw auto 0 auto; width: 45vw;}

#topMain h2{position: relative; margin-top: -5vw;}

#topMain h2 p{width: 65vw; position: relative; padding: 8vw 0 0 0;}





/* ----------------------------------------------------

5つのmerit

---------------------------------------------------- */

#merit{margin-top: -3vw;}

#merit ul{justify-content: center; margin-bottom: min(3.33vw, 50px);}

#merit ul li{width: 100%; margin: 0 0 1.5em 0;}

#merit ul li p{font-size: 3.4vw;}



/* ----------------------------------------------------

イビデンはこんな会社

---------------------------------------------------- */

#about{background-image: none; padding-bottom: 7vw;}

#about .aboutInner{padding: 6vw 0 0 0; width: 85%; margin: 0 auto}

#about .aboutInner p,

#about .aboutInner h2{width: 100%; margin-bottom: 3vw; line-height: 2;}

#about .aboutList{margin: 0 5%; background-color: white; justify-content: center; padding: min(1.33vw, 20px) 0 min(2.667vw, 20px) 0;}

#about dt{font-size: 3.7vw; width: 100%; border-right: none; margin: 2.5vw 1.5vw 0 0;}

#about dd{width: 100%; margin: 0 0 3.5vw 0; letter-spacing: 0;}	

	

/* ----------------------------------------------------

先輩社員の声

---------------------------------------------------- */

#voice{padding: 7vw 0 0 0;}

#voice h2 span{width: 60%;}

#voice .staffWrap{padding: 8vw 0;}

#voice dd{line-height: 2;}

#voice .staffTop .stDeta{width: 100%; padding-bottom: 1em;}

#voice .staffTop .stDeta p span strong{font-size: 4.6vw!important;}

#voice .staffTop dl{width: 100%; margin-top: 2em;}

#voice .staffBottom{margin-top: 0; margin-bottom: 1em;}

#voice .staffBottom dl{width: 100%;}

#voice .staffTop dt{width: 20%;}

#voice .staffTop dd{width: 78%;}

#voice .staffBottom dt{width: 20%;}

#voice .staffBottom dd{width: 78%;}

#voice .staffBottom p{width: 100%; margin: 1em 0;}

#voice .schedule{flex-flow: column; margin-top: 4vw;}

#voice .schedule aside{width: 50%; margin-right: 0; margin-bottom: 0.8em;}

#voice .schedule ul li{line-height: 1.8;}

#voice .schedule ul li .s-event{line-height: 1.8;}

#voice .schedule ul li .s-event::after{background-image: none; width: 0; height: 0;}

#voice .schedule ul li .s-text{padding-left: 5.5em; width: 100%;}

.w90{width: 90%; margin: 0 auto;}

/*scheduleの時間　間隔設定*/

.sMg0-5{margin-bottom: 1.5em;}

.sMg1{margin-bottom: 1.5em;}

.sMg1-5{margin-bottom: 1.5em;}

.sMg2{margin-bottom: 1.5em;}

.sMg2-5{margin-bottom: 1.5em;}

.sMg3{margin-bottom: 1.5em;}

.sMg3-5{margin-bottom: 1.5em;}

.sMg4{margin-bottom: 1.5em;}	

	

#voice .schedule ul.short01::after{height: 87%;}	

#voice .schedule ul.short02::after{height: 90%;}	

	

/* ----------------------------------------------------

働き方

---------------------------------------------------- */

#work{padding: 7vw 0 10vw 0;}

#work .workBlock h2{width: 35%;}

#work .workBlock .workRead01{padding-top: 12vw;}

#work .workBlock .workPoint{padding: 4vw 0 0 0; margin-bottom: 5vw;}

#work .workBlock .workPoint aside{width: 17vw; top: -1%;}

#work .workBlock .workPointCaset{justify-content: flex-end; padding-bottom: 4vw;}

#work .workBlock .workRead02{padding: 5vw; width: 100%;}

#work .workBlock .workPointCaset span{width: 95%;}

#work .workBlock .workTime{padding-top: 15vw; overflow-x: scroll; padding-bottom: 3vw;}

#work .workBlock .workTime img{width: 130vw;}

#work .workBlock .workRead03,

#work .workBlock .asterisk-list02{width: 100%; font-size: 2.45vw;}

#work .workBlock .workRead04{font-size: 2.8vw; border-radius: 50px; margin: 1.5em 0 0.2em 0; line-height: 1.3; padding: 0.2em 0;}

#work .workBlock .workRead05{font-size: 2.45vw;}	





/* ----------------------------------------------------

募集要項

---------------------------------------------------- */

#recruit{padding: 7vw 0 10vw 0;}

#recruit table th{width: 100%; padding: 2vw; display: block;}

#recruit table td{width: 100%; padding: 3vw; display: block;}

#recruit dt{width: 100%; margin-bottom: 0em; position: relative;}

#recruit dd{width: 100%; padding-left: 0.5em;}

#recruit .rec-dl01 dt{text-align: left;}

#recruit .rec-dl02 dt::after{content: "";}



/* ----------------------------------------------------

求める人物像

---------------------------------------------------- */

#person{padding: 0 0 10vw 0;}

#person p{font-size: 4.0vw; line-height: 1.6; margin-bottom: 0.7em;}



/* ----------------------------------------------------

福利厚生

---------------------------------------------------- */

#benefit{padding:0 0 10vw 0;}

#benefit h3{font-size: 3.6vw; margin: 6vw auto 4vw auto;}

#benefit h3:first-of-type{margin: 6vw auto 4vw auto;}

#benefit dl{margin-bottom: 4vw;}

#benefit dl:last-of-type{margin-bottom: 0vw!important;}

#benefit dl:last-of-type dd:first-child{margin-bottom: 6vw;}

#benefit dl dt,#benefit dl dd{margin-bottom: 3vw; width: 100%;}

#benefit h4{position: relative; font-size: 3.4vw;}

#benefit .benefitImg{margin-top: 3vw;}

.mgTB30{margin: 3vw 0;}

	

/* ----------------------------------------------------

faq

---------------------------------------------------- */

#faq{padding: 7vw 0 0 0;}

#faq .faqBlock {padding: 3vw 3vw; margin-bottom: 2.5vw; border: 2px solid #74B5E4;}

#faq .faqBlock h3 {font-size: 3.2vw; padding: 0 0 0 6vw; line-height: 1;}

#faq .faqBlock h3::before{width: 5vw; height: 5vw;}

#faq .faqBlock h3.active {border-bottom: 2px dotted #74B5E4;}

#faq .faqCont {line-height: 1.8;}

#faq .faqCont::before{width: 5vw; height: 5vw; top: 8px;}

#faq .faqBlock h3 span {position: relative; display: block; width: 100%; }

#faq .faqBlock h3 span::after {font-size: 2.8vw;}



/* ----------------------------------------------------

flow

---------------------------------------------------- */

#flow{padding: 10vw 0 10vw 0;}

#flow .read{text-align: center; margin-bottom: 0.5em;}

#flow ol{counter-reset: item; padding: 0 5%;}

#flow ol li{border-top: 2px solid #74B5E4; padding: 0 0%;}

#flow ol li::before {/*left: 1.8em; top: 14px;*/left:50%; top: 20px; transform: translateY(0); transform: translateX(-50%); font-size: 8vw; padding-left: 0; line-height: 1.6;}

#flow ol li::after {/*left: 0; top: 17px;*/left:50%; top: 15px; transform: translate(-50%, 0); font-size: 2.6vw; padding-bottom: 0;}

	

#flow ol li:first-of-type::before {top: 10px; }

#flow ol li:first-of-type::after {top: 5px; }	

	

	

#flow ol li p {font-size: 3.6vw; width: 100%; padding: 16vw 0 0 0; display: flex; justify-content: center; align-items: center;}

#flow ol li:first-of-type p{padding: 12vw 0 0 0; }

	

#flow ol li p::after {background: none; width: 0; height: 0;}

@media (max-width: 1100px) {

#flow ol li p::after {bottom: -1.7vw;}	

}

#flow ol li:last-of-type{border-bottom: 2px solid #74B5E4;}

#flow ol li span {width: 100%; padding: 2vw 0 4vw 0; position: relative;}

#flow ol li span::after {position: absolute; bottom: -5vw; left: 50%; transform: translateX(-50%); content: ""; background: url("../img/flow-arrow.svg") no-repeat center center; background-size: cover; width: 9.615vw; height: 6.154vw; z-index: 2;}

#flow ol li:last-of-type span::after {content: ""; background: none;}

	

	

}