@charset "utf-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
common
font-family: "Noto Sans JP", sans-serif;
font-family: "Noto Serif JP", serif;
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ----------------------------------------------------
element base setting (common)
---------------------------------------------------- */
body {
  color: #000;
  line-height: 1.8; 
  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;}
.inrContent {width: 80%; max-width: 1200px; 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);
  }
}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
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(255, 255, 255, 0); min-height: min(6vw, 90px);}
#header.fixed {position: fixed; background: rgba(255, 255, 255, 1);}

#header .headerInner{width:95%; margin: 0 auto;}
#hd-logo p{width: min(8.33vw, 125px); margin: min(2vw, 30px) 0 0 0;}
.hedBtWrap{align-items: center;}
.hedBtWrap ul {padding: 0 1em;}
.hedBtWrap ul li{position: relative; padding: 0 1.5em 0 0.5em; font-size: min( 1.2vw , 1.8rem );}
.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;}

/* 20241217 */
.headEntry{background-color: #E60C20; color: white; position: relative;}
.headEntry::before, .headEntry::after {content: ""; width: min(1vw, 12px); height: 2px; background: #fff; position: absolute; right:1em; top: 50%; transform: translateY(-50%); transition: 0.3s all ease-in-out; }
.headEntry::after {transform: translateY(-50%)rotate(90deg);}
.headEntry.is_active::after {transform: translateY(-50%) ;}
.headEntry > p {width: min(13.75vw,165px); height: min(4.5vw,54px);  display: flex; display: -webkit-flex; justify-content: center; align-items: center; cursor: pointer; position: relative;}
.headEntry > p::before {content: ""; width: calc(100% - min(0.6vw,8px)); height: calc(100% - min(0.6vw, 8px)); position: absolute; left: min(0.3vw, 4px); top: min(0.3vw, 4px); border: 1px solid #fff;}

.headEntry > ul {position: absolute; right: 0; bottom: 0; transform: translateY(100%);width: min(20vw,240px);padding: 0; display: none; background:#fff;}
.headEntry > ul > li { font-size: min(1.25vw, 1.5rem) !important; padding: 0;}
.headEntry > ul > li:not(:last-child) {border-bottom: 1px dotted #fff;}
.headEntry > ul > li a {display: block;  background: #E60C20;  color: #fff; text-align: center; padding: 1em; position: relative;}
.headEntry > ul > li a::before {content: "→"; position: absolute; right: 1em; top: 50%; transform:translateY(-50%); font-weight: normal;}
.headEntry > ul > li::after {content: none;}

}

/* ----------------------------------------------------
メインビジュアル
---------------------------------------------------- */
.mainVis{position:relative; overflow: hidden; min-height: min( 84vw , 1260px ); padding-top: min( 17.33vw , 260px ); z-index: 3;}
.mainVis .inrContent{z-index: 3;}
.alphabet01{animation: alph01 30s ease infinite; width: min( 33.733vw , 506px ); height: min( 48vw , 720px ); position: absolute; top: min( 13.333vw , 200px ); left: 7%;}
.alphabet02{animation: alph02 30s ease infinite; width: min( 33.733vw , 506px ); height: min( 48vw , 720px ); position: absolute; top: min( -6.667vw , -100px ); right: -7%;}
.brilliant {position: absolute; top: min( 7.33vw , 110px ); left: 45%; animation: scale 7s ease-in-out infinite alternate;}
.brilliant img{animation: brilliant 30s ease infinite; width: min( 42.667vw , 640px ); height: min( 41.33vw , 640px );}
.mainVis h2{font-size: min( 2.667vw , 4.0rem ); letter-spacing: 0.3em;}
.mainVis h2 span{font-family: "Noto Serif JP", serif; font-size: min( 13.33vw , 20rem ); letter-spacing: 0; display: block; line-height: 1.4;}
.mainVis p{margin-top: min( 4vw , 60px ); line-height: 2.3;}
.mainVisPhoto{position:absolute; bottom: 0; right: 0; z-index: 1;}
.homSlideBlock{width: min( 54.667vw , 820px );}

@keyframes alph01{
	0%{background:url("../img/alp_B.svg") no-repeat 0 0;}
	20%{background:url("../img/alp_I.svg") no-repeat 0 0;}
	40%{background:url("../img/alp_L.svg") no-repeat 0 0;}
	60%{background:url("../img/alp_A.svg") no-repeat 0 0;}
	80%{background:url("../img/alp_T.svg") no-repeat 0 0;}
	100%{background:url("../img/alp_B.svg") no-repeat 0 0;}
}
@keyframes alph02{
	0%{background:url("../img/alp_R.svg") no-repeat 0 0;}
	25%{background:url("../img/alp_L.svg") no-repeat 0 0;}
	50%{background:url("../img/alp_I.svg") no-repeat 0 0;}
	75%{background:url("../img/alp_N.svg") no-repeat 0 0;}
	100%{background:url("../img/alp_R.svg") no-repeat 0 0;}
}
@keyframes brilliant{
	0% { transform:translate(0,0);  }
 25% { transform:translate(12%,8.5%);}
 50% { transform:translate(-1.5%,0.4%);}
75% { transform:translate(5.5%,15.2%);}
 100% { transform:translate(0%,0%);}
}

@keyframes scale {
    0% { transform:scale3d(0.95, 1, 0.9); }
  25% { transform:scale3d(1, 1, 1); }
  50% { transform:scale3d(1, 0.95, 1.2); }
 100% { transform:scale3d(1, 1, 1); }
}

/* ----------------------------------------------------
共通
---------------------------------------------------- */
h3.ctTitle{font-size: min( 1.867vw , 2.8rem ); letter-spacing: 0.2em; line-height: 1.4;}
h3.ctTitle span{font-family: "Noto Serif JP", serif; font-size: min( 4vw , 6rem ); letter-spacing: 0.1em; display: block;}
h3.ctTitle span.t40{font-size: min( 2.667vw , 4rem ); display: inline;}

/* ----------------------------------------------------
トヨタの業務職とは
---------------------------------------------------- */
#aboutus{margin-top: min( -5.33vw , -80px ); position: relative; z-index: 4; padding-bottom: min( 13.33vw , 200px );}
#aboutus::after{position: absolute; bottom: 5%; left: 0; width: min( 3.667vw , 55px ); height: min( 24.33vw , 365px ); content: ""; background:url("../img/aboutSide.svg") no-repeat 0 0;}
#aboutus h3.ctTitle{margin-bottom: min( 2.333vw , 35px );}
.aboutPoint{margin-top: min( 5.33vw , 80px );}
.aboutPoint01{width: 50%; position: relative;}
.aboutPoint01 .ptImg01{width: 82%;}
.aboutPoint01 .ptText{width: 50%; margin-left: 31%; margin-top: min( 4.333vw , 65px ); line-height: 2.4;}
.aboutPoint01::before{position: absolute; top: min( 8.667vw , 130px ); right: 0; width: min( 5.2vw , 78px ); height: min( 6.867vw , 103px ); content: ""; background: url("../img/pointIllust01.svg") no-repeat 0 0;}
.aboutPoint01::after{position: absolute; top: min( 36vw , 540px ); right: 13%; width: min( 5.667vw , 85px ); height: min( 3.867vw , 58px ); content: ""; background: url("../img/pointIllust02.svg") no-repeat 0 0;}
.aboutPoint01 h4{position: absolute; top: min( 11.33vw , 170px ); left: 0; writing-mode: vertical-rl; text-orientation: upright;}
.aboutPoint01 h5{position: absolute; top: min( 19.33vw , 290px ); right: 7%; width: min( 8vw , 120px );}
.aboutPoint01 .pt02Img{position: absolute; top: min( 33.33vw , 500px ); left: 0; width: min( 9.667vw , 145px );}

.aboutPoint02{width: 45%; position: relative; margin-top: min( 2.33vw , 50px );}
.aboutPoint02 .ptImg01{width: 57%; margin-left: 43%;}
.aboutPoint02 .ptText{width: 53%; margin-top: min( 3vw , 45px ); line-height: 2.4;}
.aboutPoint02::before{position: absolute; bottom: 0; right: 2%; width: min( 5.2vw , 78px ); height: min( 6.867vw , 103px ); content: ""; background: url("../img/pointIllust01.svg") no-repeat 0 0;}
.aboutPoint02::after{position: absolute; bottom: min( -2vw , -30px ); right: 34%; width: min( 5.667vw , 85px ); height: min( 3.867vw , 58px ); content: ""; background: url("../img/pointIllust02.svg") no-repeat 0 0;}
.aboutPoint02 h4{position: absolute; top: min( 12vw , 180px ); left: min( 4.667vw , 70px ); writing-mode: vertical-rl; text-orientation: upright;}
.aboutPoint02 h5{position: absolute; top: min( 1.667vw , 25px ); left: min( 9.33vw , 140px ); width: min( 8vw , 120px );}
.aboutPoint02 .pt02Img{position: absolute; top: min( 25.33vw , 380px ); right: min( 1vw , 15px ); width: min( 9.667vw , 145px );}

.aboutPoint03{width: 100%; position: relative; margin-top: min( 5.067vw , 75px );}
.aboutPoint03 .ptImg01{width: 36%; margin-left: min( 5.067vw , 75px ); margin-top: min( 5.2vw , 78px );}
.aboutPoint03 .ptText{width: 28%; margin-top: min( 17.33vw , 260px ); margin-right: min( 5.067vw , 75px ); line-height: 2.4;}
.aboutPoint03::before{position: absolute; top: min( 2.333vw , 35px ); left: min( 2.333vw , 35px ); width: min( 5.2vw , 78px ); height: min( 6.867vw , 103px ); content: ""; background: url("../img/pointIllust01.svg") no-repeat 0 0;}
.aboutPoint03::after{position: absolute; top: min( 13.33vw , 200px ); right: 0; width: min( 5.667vw , 85px ); height: min( 3.867vw , 58px ); content: ""; background: url("../img/pointIllust02.svg") no-repeat 0 0; transform: scale(1, -1);}
.aboutPoint03 h4{position: absolute; top: min( 5.067vw , 75px ); left: min( 34.66vw , 520px ); writing-mode: vertical-rl; text-orientation: upright; z-index: 5;}
.aboutPoint03 h5{position: absolute; top: min( 10vw , 150px ); left: min( 47.33vw , 710px ); width: min( 8vw , 120px );}
.aboutPoint03 .pt02Img{position: absolute; top: 0; left: min( 27.33vw , 410px ); width: min( 9.667vw , 145px );}

.aboutPoint h4 p{border-right: 5px solid #A6A4E1; display: inline-block;}
.aboutPoint h4 p span{display: inline-block; font-weight: 600; transform: skewY(-12deg); letter-spacing: -0.5em; line-height: 1.6;}
.aboutPoint h4 .ts01{font-size: min( 2vw , 3.0rem );}
.aboutPoint h4 .ts02{font-size: min( 2.267vw , 3.4rem );}
.aboutPoint h4 .ts03{font-size: min( 2.8vw , 4.2rem );}

/* ----------------------------------------------------
社員紹介
---------------------------------------------------- */
#professionals{background-color: #f3f8f8; padding: min( 6.667vw , 100px ) 0 min( 13.33vw , 200px ) 0;}
#professionals h3.ctTitle{text-align: right; position: absolute; top: min( -3.33vw , -50px ); right: 0;}
#professionals h3.ctTitle span{transform: rotate3d(0, 0, 1, 90deg); transform-origin:70% 290%;}
.movWrap{padding-top: min(6vw, 90px);}
.movCaset{position:relative; justify-content: flex-end;}
.movCaset:nth-child(even){justify-content: flex-start; margin: min( 12vw , 180px ) 0;}
.movCaset aside{position:absolute; top: min( -1.33vw , -20px ); left: 3%; width: 15%; z-index: 3;}
.movCaset:nth-child(even) aside{left: inherit; right: 3%;}
.movCaset .movBut{position:absolute; bottom: 7%; left: 0; width: 19%; z-index: 3;}
.movCaset:nth-child(even) .movBut{left: inherit; right: 3%;}
.movTxBox{position:absolute; top: 50%; left: 6%; transform: translateY(-50%); width:43%; background-color: white; padding: 2.5em; z-index: 2;}
.movCaset:nth-child(even) .movTxBox{left: inherit; right: 6%;}
.movTxBox h4{font-size: min( 1.467vw , 2.2rem ); font-weight: 600; margin-bottom: 1em;}
.movTxBox .movHash{color: #A6A4E1; font-size: min( 1.067vw , 1.6rem );}
.movTxBox .empName{margin-top: 1em;}
.movTxBox .empName span{font-family: "Noto Serif JP", serif; font-size: min( 2vw , 3.0rem ); padding-right: 1em;}
.movThumbnail{width:60%; z-index: 1;}

/* ----------------------------------------------------
数字で見る
---------------------------------------------------- */
#numbers{margin: min( 13.33vw , 200px ) 0;}
#numbers h3.ctTitle{margin-bottom: min( 2.333vw , 35px ); text-align: center;}
.numberBlock{width: 30%; border: 1px solid #666666; text-align: center; align-items: center; padding: 1em; flex-flow: column; margin: min( 2.333vw , 35px ) 0;}
.numberBlock h4{width: 70%; background-color: #666666; color: white;}
.numberBlock aside{font-size: min( 1.067vw , 1.6rem );}
.numberBlock p{width: 62%;}
.numberBlock .numCounter{font-size: min( 1.6vw , 2.4rem );}
.numberBlock span{font-size: min( 5.333vw , 8.0rem ); color: #8380D5; padding: 0 min( 0.667vw , 10px ); font-family: "Noto Serif JP", serif; line-height: 1;}

/* ----------------------------------------------------
キャリアパス
---------------------------------------------------- */
#careerpath{background-color: #f3f8f8; padding: min( 10vw , 150px ) 0; text-align: center;}
#careerpath h4{font-size: min( 1.6vw , 2.4rem ); font-weight: 600; margin-top: 2em;}
#careerpath h5{font-size: min( 1.33vw , 2.0rem ); font-weight: 600; margin-bottom: 2em;}
#careerpath .link_bt{width: 50%; margin-top: 3em; background-color: black; border-radius: min( 3.333vw , 50px ); display: inline-block;}
#careerpath .link_bt span{font-size: min( 1.33vw , 2.0rem ); color: white; position: relative; padding: 0.5em 0; display: block;}
#careerpath .link_bt span::after{position: absolute; top: 50%; right: 1em; transform: translateY(-50%); content: "→";}

/* ----------------------------------------------------
福利厚生
---------------------------------------------------- */
#welfare{background: url("../img/welfareImg01.jpg") no-repeat 0 0; background-size: auto min( 26vw , 390px ); padding-top: min( 23.33vw , 350px ); margin: min( 13.33vw , 200px ) 0;}
#welfare .titleWrap{width: 80%; max-width: 1200px; margin:0 auto; position: relative; justify-content: flex-end;}
.welfareRead{position:relative; background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 28%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 100%),linear-gradient(90deg, rgba(243,248,248,1) 0%, rgba(243,248,248,1) 32%, rgba(243,248,248,0) 32%, rgba(243,248,248,0) 100%); padding: min( 6.667vw , 100px ) 0 min( 3.333vw , 50px ) 0;}
.welfareRead::after{position:absolute; top: 0; right: 0; content: ""; background: url("../img/welfareImg02.jpg") no-repeat 0 0; width: min( 38vw , 570px ); height: min( 26.667vw , 400px );}
#welfare .readWrap{width: 80%; max-width: 1200px; margin:0 auto; position: relative;}
#welfare .readWrap p{width: 55%; line-height: 2;}
.welSystem{}
.welSystem .welCaset{margin-top: min( 6.667vw , 100px );}
.welSystem .wl100{width: 100%;}
.welSystem .wl50{width: 46%;}
.welSystem aside{background-color: #ACCDCD; color: white; text-align: center; font-size: min( 1.067vw , 1.6rem ); display: block; width: min( 12vw , 180px );}
.welSystem h4{font-size: min( 2.133vw , 3.2rem ); font-weight: 600; border-bottom: 1px solid #666666; padding-bottom: 0.3em;}
.welSystem h5{font-size: min( 1.6vw , 2.4rem ); color: #308383; font-weight: 600; padding: 1em 0 0.5em 0;}
.welSystem h6{font-weight: 600;}
.welSystem p{font-size: min( 1.067vw , 1.6rem ); color: #666666; margin-bottom: 0.8em;}
.welSystem ul li{width: 23%; margin: 0.5em 0; display: block;}
.welSystem ul li span{font-size: min( 1.067vw , 1.6rem ); color: #666666; line-height: 1.3; display: block;}


/* ----------------------------------------------------
募集要項
---------------------------------------------------- */
#recruitment{background: url("../img/recruitImg.jpg") no-repeat 0 0; background-size: 100% auto; padding-top: min( 20.33vw , 305px );}
.recruitInner{background-color: white; width: 93%; max-width: 1400px; margin: 0 auto;}
#recruitment h3.ctTitle{text-align: center; padding: min( 6.667vw , 100px ) 0 min( 4.667vw , 700px ) 0;}
.recTable{border-top: 1px solid #666666; width: 100%;}
.recTable th{background-color: #EBEBEB; width: 30%; border-bottom: 1px solid #666666; text-align: center; padding: 1em 0.5em; font-weight: 300;}
.recTable td{width: 70%; border-bottom: 1px solid #666666; padding: 1em 0.8em;}
.recTable li{padding-left:1em; text-indent:-1em;}


/* ----------------------------------------------------
よくあるご質問
---------------------------------------------------- */
#qa {background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 100%),linear-gradient(180deg, rgba(243,248,248,0) 0%, rgba(243,248,248,0) 35%, rgba(243,248,248,1) 35%, rgba(243,248,248,1) 95%, rgba(243,248,248,0) 95%, rgba(243,248,248,0) 100%); margin: min( 13.33vw , 200px ) 0; position: relative;}
.qaImg{position: absolute; top: 0; right: 0; width: 47%; height: 100%;}
.qaImg01{position: absolute; width: min( 48.33vw , 725px ); top: 0; right: 0;}
.qaImg02{position: absolute; width: min( 29vw , 435px ); top: min( 60vw , 900px ); right: 0;}
.qaImg03{position: absolute; width: min( 20.33vw , 305px ); /*top: min( 70.667vw , 1060px ); left: 15%;*/top: min( 60vw , 900px ); right: 5%;}
.qaWrap{width:47%;}
.qaCaset{margin-top: min( 2.333vw , 35px );}
.qaCaset p{position: relative; font-size: min( 1.467vw , 2.2rem ); font-weight: 600; padding: 2.2em 0 0 3em;}
.qaCaset p::before{position: absolute; top: 0; left: 0; content: "Q"; color: #A6A4E1; font-size: min( 2.667vw , 4rem ); font-family: "a-otf-gothic-mb101-pr6n", sans-serif;
font-weight: bold;}
.qaCaset p::after{position: absolute; top: min( 1vw , 15px ); left: min( 1.667vw , 25px ); content: "/"; color: #A6A4E1; font-size: min( 4.33vw , 6.5rem ); font-family: "a-otf-gothic-mb101-pr6n", sans-serif;
font-weight: 300;}
.qaCaset span{padding: 0.7em 0 0 3.7em; display: block; line-height: 1.5;}


/* ----------------------------------------------------
選考プロセス
---------------------------------------------------- */
#process{margin-bottom: min( 1.33vw , 20px );}
#process h3.ctTitle{position: relative; width: 29%;}
#process h3.ctTitle::after{position: absolute; top: min( 14.33vw , 216px ); left: 0; content: ""; background: url("../img/processImg.png") no-repeat 0 0; background-size: cover; width: min( 14.33vw , 216px ); height: min( 14.33vw , 216px );}
#process .processStepWrap{position: relative; width: 68%;}
.stepCaset{}
.stepNum{background: url("../img/stepIcon_line.svg") left top no-repeat,url("../img/stepIcon_arrow.svg") left bottom no-repeat,url("../img/stepIcon.svg") left top no-repeat; background-size: 100% auto; width: 12%; padding: min( 7.33vw , 110px ) 0 0 min( 3vw , 45px ); font-family: "Noto Serif JP", serif; font-size: min( 2.667vw , 4rem );}
#process .stepCaset:last-child .stepNum{background: url("../img/stepIcon.svg") left top no-repeat;}
.stepText{width:81%; padding: min( 3.333vw , 50px ) 0 min( 2.333vw , 35px ) 0;}
.stepText p{display: inline-block; background-color: #767676; color: white; font-size: min( 1.6vw , 2.4rem ); margin-bottom: min( 1.6vw , 24px ); line-height: 1; padding: 0.4em 1em;}
.stepText span{display: block;}
.stepText span aside{font-size: min( 1.067vw , 1.6rem );}
.boldText {font-weight: bold;}
/* ----------------------------------------------------
footer (common)
---------------------------------------------------- */
#footer {position: relative; z-index: 2; margin-top: min(10.667vw, 160px); background: url("../img/footer.jpg") no-repeat center center; background-size: cover; text-align: center; padding: min(5.33vw, 80px) 0 min(1.33vw, 20px) 0;}
.ftCatch{font-size: min( 1.33vw , 2rem ); line-height: 1.2; margin-bottom: min( 3.333vw , 50px );}
.ftCatch span{font-family: "Noto Serif JP", serif; font-size: min( 4vw , 6rem ); display: block;}
.ftEntry{font-size: min( 1.6vw , 2.4rem ); background-color: #E60C20; color: white; position: relative; padding: 0.9em 3em; display: inline-block; line-height: 1; margin: 0 1em; width:40%;}
.ftEntry::after{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border: 1px solid white; width: 97%; height: 80%; content: "";}
.ftEntry a{color: white; position: relative;}
#footer ul{justify-content: center;}
#footer ul li{border:1px solid black; margin: 1em 0.5em 3em 0.5em; padding: 0.2em 0.5em;}
.ftCopyright{font-size: min( 1.067vw , 1.6rem );}

#page-top a{width:min( 4.667vw , 70px ); transition:all 0.3s; z-index: 99;}
/*リンクを右下に固定*/
#page-top {position: fixed; right: 2%; z-index: 99; opacity: 0; transform: translateY(100px); width:min( 4.667vw , 70px );}

.ftEntBt{justify-content: center; margin: min( 1.66vw , 25px ) 0 2em 0; }

#footer h3.ctTitle{font-size: min( 1.867vw , 2.8rem ); letter-spacing: 0; line-height: 1.4;}
#footer h3.ctTitle span{font-family: "Noto Sans JP", sans-serif; font-size: min( 4vw , 6rem ); letter-spacing: 0; display: block;}

.ftEntry span.ftArow{position: relative; width:100%; display: block;}
.ftEntry span.ftArow::before{content: "→"; position: absolute; right: -1em; top: 50%; transform: translateY(-50%); font-weight: normal;}




@media (max-width: 1500px) {
.hedBtWrap ul li{font-size: min( 1.067vw , 1.6rem );}
}

	
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
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) {
.inrContent {width: 90%; padding-bottom: 12vw;}
.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 #333; border-radius: 2vw; width: min(12vw,90px); aspect-ratio: 1/1; background: #fff;}
#btnGlobal .btnWrapGlobal {	position: relative;	width: min(4vw,28px);	height: min(3.2vw,27px); margin: 0 auto min(1vw,10px);}
#btnGlobal .btnLine { height: 1px; background: #333; 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: #A6A4E1; }
#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: #A6A4E1; 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(255, 255, 255, 0);height: min(18vw,130px);}
#header.fixed {position: fixed; background: rgba(255, 255, 255, 1);}
.headerInner{width:93%; margin: 3vw auto; justify-content: flex-start; }
#hd-logo{width: 30%; margin: 2vw 0 0 0;}
#hd-logo p{width: 100%; margin: 0;}


/* 20241217 */
.headEntry{background-color: #E60C20; color: white; position: absolute; top: min(4vw,20px); right:min(18vw,120px)}
.headEntry::before, .headEntry::after {content: ""; width: min(2.4vw, 12px); height: 2px; background: #fff; position: absolute; right:1em; top: 50%; transform: translateY(-50%); transition: 0.3s all ease-in-out; }
.headEntry::after {transform: translateY(-50%)rotate(90deg);}
.headEntry.is_active::after {transform: translateY(-50%) ;}

.headEntry > p {width: min(32vw,250px); height: min(10vw,80px); display: flex; display: -webkit-flex; justify-content: center; align-items: center; cursor: pointer; position: relative;}
.headEntry > p::before {content: ""; width: calc(100% - min(1.5vw,8px)); height: calc(100% - min(1.5vw, 8px)); position: absolute; left: min(0.75vw, 4px); top: min(0.75vw, 4px); border: 1px solid #fff;}

.headEntry > ul {position: absolute; right: 0; bottom: 0; transform: translateY(100%);width: 55vw;padding: 0; display: none; background: #fff;}
.headEntry > ul > li { font-size: min(3.6vw, 1.5rem) !important; padding: 0;}
.headEntry > ul > li:not(:last-child) {border-bottom: 1px dotted #fff;}
.headEntry > ul > li a {display: block;  background: #E60C20;  color: #fff; text-align: center; padding: 0.6em 1em; position: relative;}
.headEntry > ul > li a::before {content: "→"; position: absolute; right: 0.5em; top: 50%; transform:translateY(-50%); font-weight: normal;}
.headEntry > ul > li::after {content: none;}


/* ----------------------------------------------------
メインビジュアル
---------------------------------------------------- */
.mainVis{min-height: min( 84vw , 1260px ); padding-top: 30vw;}
.alphabet01{width: 67.4vw; height: 96vw; top: 26vw; left: -10%;}
.alphabet02{width: 67.4vw; height: 96vw; top: -13.33vw; right: -22%;}
.brilliant {top: 5vw; left: 50%; transform: translateX(-50%)!important;}
.brilliant img{width: 90vw; height: 90vw;}
.mainVis h2{font-size: 5.8vw; text-align: center; letter-spacing: 0.1em;}
.mainVis h2 span{font-size: 22vw;}
.mainVis p{margin-top: 8vw;}
.mainVisPhoto{position:relative; width: 100%;}
.homSlideBlock{width: 100%;}	
	
/* ----------------------------------------------------
共通
---------------------------------------------------- */
h3.ctTitle{font-size: 4.375vw;}
h3.ctTitle span{font-size: 7.7vw;}
h3.ctTitle span.t40{font-size: 6.25vw;}
	
/* ----------------------------------------------------
トヨタの業務職とは
---------------------------------------------------- */
#aboutus{margin-top: -25vw; padding-top: 6vw; padding-bottom: 6vw; background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.9444152661064426) 90%, rgba(255,255,255,0) 90%, rgba(255,255,255,0) 100%);}
#aboutus::after{background:none;}
#aboutus h3.ctTitle{margin-bottom: 5vw;}
.aboutPoint{margin-top: 10.667vw;}
.aboutPoint01{width: 100%; position: relative; display: flex; flex-flow: column;}
.aboutPoint01 .ptImg01{width: 100%; order: 1;}
.aboutPoint01 .ptText{width: 100%; margin-left: 0; margin-top: 3vw; line-height: 1.8; order: 3;}
.aboutPoint01::before{top: 67.66vw; right: 0; width: 10.4vw; height: 13.733vw;}
.aboutPoint01::after{background: none;}
.aboutPoint01 h4{position: relative; top: inherit; left: 0; writing-mode:horizontal-tb; order: 2; margin-top: 7vw;}
.aboutPoint01 h5{position: absolute; top: 43vw; right: inherit; left: 0; width: 25%;}
.aboutPoint01 .pt02Img{position: absolute; top: 40vw; left: inherit; right: 0; width: 40%;}	
.aboutPoint02{width: 100%; position: relative; display: flex; flex-flow: column; margin-top: 10vw;}
.aboutPoint02 .ptImg01{width: 100%; order: 1; margin-left: 0;}
.aboutPoint02 .ptText{width: 100%; margin-left: 0; margin-top: 3vw; line-height: 1.8; order: 3;}
.aboutPoint02::before{top: 67.66vw; right: 0; bottom: inherit; width: 10.4vw; height: 13.733vw;}
.aboutPoint02::after{background: none;}
.aboutPoint02 h4{position: relative; top: inherit; left: 0; writing-mode:horizontal-tb; order: 2; margin-top: 7vw;}
.aboutPoint02 h5{position: absolute; top: 43vw; left: 0; width: 25%;}
.aboutPoint02 .pt02Img{position: absolute; top: 40vw; right: 0; width: 40%;}
.aboutPoint03{width: 100%; position: relative; display: flex; flex-flow: column; margin-top: 10vw;}
.aboutPoint03 .ptImg01 img{width: 100%; height: 58vw; object-fit: cover;}
.aboutPoint03 .ptImg01{width: 100%; order: 1; margin-left: 0; margin-top: 0;}
.aboutPoint03 .ptText{width: 100%; margin-right: 0; margin-top: 3vw; line-height: 1.8; order: 3;}
.aboutPoint03::before{top: 67.66vw; right: 0; left: inherit; width: 10.4vw; height: 13.733vw;}
.aboutPoint03::after{background: none;}
.aboutPoint03 h4{position: relative; top: inherit; left: 0; writing-mode:horizontal-tb; order: 2; margin-top: 7vw;}
.aboutPoint03 h5{position: absolute; top: 43vw; left: 0; width: 25%;}
.aboutPoint03 .pt02Img{position: absolute; top: 40vw; right: 0; left: inherit; width: 40%;}
.aboutPoint h4 p{border-bottom: 5px solid #A6A4E1; border-right: none; display: inline-block;}
.aboutPoint h4 p.irregular{margin-left: -0.25em;}	
.aboutPoint h4 p span{display: inline-block; font-weight: 600; transform: skewY(0); letter-spacing: 0; line-height: 1.6;}
.aboutPoint h4 p span.irregular{padding-left: 0.18em;}	
.aboutPoint h4 .ts01{font-size: 4.288vw;}
.aboutPoint h4 .ts02{font-size: 5.013vw;}
.aboutPoint h4 .ts03{font-size: 6.163vw;}

/* ----------------------------------------------------
社員紹介
---------------------------------------------------- */
#professionals{padding: 9vw 0 6vw 0;}
#professionals h3.ctTitle{text-align: center; position: relative; top: inherit; right: inherit;}
#professionals h3.ctTitle span{transform: none;}
.movWrap{padding-top: 12vw;}
.movCaset{background-color: white; justify-content: center; padding-bottom: 2.5em;}
.movCaset:nth-child(even){margin: 15vw 0; justify-content: center;}
.movCaset aside{position:absolute; top: -7vw; left: 0; width: 30%;}
.movCaset .movBut{position:relative; bottom: inherit; left: inherit; width: 40%;}
.movCaset:nth-child(even) .movBut{right: inherit;}
.movTxBox{position:relative; top: inherit; left: inherit; transform: none; width:100%; background-color: transparent; padding: 4em 2.5em 1.5em 2.5em;}
.movCaset:nth-child(even) .movTxBox{right: inherit;}
.movTxBox h4{font-size: 4.2vw;}
.movTxBox .movHash{font-size: 3.2vw;}
.movTxBox .empName span{font-size: 4.68vw;}
.movThumbnail{width:85%; margin: 0 auto 1.5em auto;}
	
/* ----------------------------------------------------
数字で見る
---------------------------------------------------- */
#numbers{margin: 9vw 0 6vw 0;}
#numbers h3.ctTitle{margin-bottom: 5vw;}
.numberBlock{width: 80%; margin: 4vw auto;}
.numberBlock h4{width: 70%; background-color: #666666; color: white;}
.numberBlock aside{font-size: 2.9vw;}
.numberBlock p{width: 62%;}
.numberBlock .numCounter{font-size: 3.75vw;}
.numberBlock span{font-size: 12.5vw; padding: 0 1.33vw;}	
	
/* ----------------------------------------------------
キャリアパス
---------------------------------------------------- */
#careerpath{padding: 9vw 0 6vw 0;}
#careerpath h4{font-size: 4.25vw;}
#careerpath h5{font-size: 3.725vw;}
#careerpath .link_bt{width: 93%; margin-top: 3em; border-radius: 7vw;}
#careerpath .link_bt span{font-size: 3.725vw;}
	
/* ----------------------------------------------------
福利厚生
---------------------------------------------------- */
#welfare{background: url("../img/welfareImg01.jpg") no-repeat 0 0; background-size: 100% auto; padding-top: 45vw; margin: 0 0 6vw 0;}
#welfare h3.ctTitle{margin-bottom: 5vw;}
#welfare .titleWrap{width: 90%; justify-content: flex-start;}
.welfareRead{position:relative; background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 28%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 100%),linear-gradient(90deg, rgba(243,248,248,1) 0%, rgba(243,248,248,1) 32%, rgba(243,248,248,0) 32%, rgba(243,248,248,0) 100%); padding: 0 0 63vw 0;}
.welfareRead::after{position:absolute; top: inherit; bottom: 3%; right: 5%; width: 76vw; height: 53.33vw; background-size: cover;}
#welfare .readWrap{width: 90%;}
#welfare .readWrap p{width: 100%;}
.welSystem{padding-top: 8vw;}
.welSystem .welCaset{margin-top: 7vw;}
.welSystem .wl50{width: 100%;}
.welSystem aside{font-size: 2.5vw; width: 30%;}
.welSystem h4{font-size: 4.6vw;}
.welSystem h5{font-size: 3.45vw;}
.welSystem p{font-size: 2.8vw;}
.welSystem ul li{width: 48%;}
.welSystem ul li span{font-size: 2.5vw;}
	
/* ----------------------------------------------------
募集要項
---------------------------------------------------- */
#recruitment{padding-top: 21vw;}
#recruitment h3.ctTitle{padding: 6vw 0 6vw 0;}
.recTable th{width: 100%; padding: 0.3em 0; display: block;}
.recTable td{width: 100%; display: block;}
	
/* ----------------------------------------------------
よくあるご質問
---------------------------------------------------- */
#qa {background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 100%),linear-gradient(180deg, rgba(243,248,248,0) 0%, rgba(243,248,248,0) 12%, rgba(243,248,248,1) 12%, rgba(243,248,248,1) 100%); margin: 30vw 0 0 0;}
.qaImg{position: absolute; top: -20vw; right: 0; width: 100%; height: 100%;}
.qaImg01{position: absolute; width: 52%; top: 2%; right: 0;}
.qaImg02{display: none;}
.qaImg03{display: none;}
.qaWrap{width:100%; margin-top: 25vw;}
.qaCaset{margin-top: 4vw;}
.qaCaset p{font-size: 3.438vw; padding: 2.2em 0 0 3em;}
.qaCaset p::before{font-size: 6.25vw;}
.qaCaset p::after{top: 0vw; left: 5.33vw; font-size: 10.15vw;}
.qaCaset span{padding: 0.2em 0 0 3.1em;}
.qaImg02_liner{width: 100%; height: 50vw; object-fit: cover; object-position: top center;}
	
/* ----------------------------------------------------
選考プロセス
---------------------------------------------------- */
#process{margin: 9vw 0 6vw 0;}
#process h3.ctTitle{width: 100%; text-align: center; margin-bottom: 5vw;}
#process h3.ctTitle::after{background: none;}
#process .processStepWrap{width: 100%;}
.stepCaset{}
.stepNum{width: 15%; padding: 14vw 0 0 4.2vw; font-size: 5.85vw;}
.stepText{width:81%; padding: 5vw 0 3vw 0;}
.stepText p{font-size: 3.75vw; margin-bottom: 3.2vw;}
.stepText span aside{font-size: 2.8vw;}

	
/* ----------------------------------------------------
footer (common)
---------------------------------------------------- */
#footer {margin-top: 10vw; padding: 8vw 0 3vw 0;}
.ftCatch{font-size: 4.525vw; margin-bottom: 5vw;}
.ftCatch span{font-size: 11.375vw;}
.ftEntry{font-size: 4.2vw; width: 90%; margin: 0 0 1em 0;}
.ftCopyright{font-size: 2.5vw;}

#page-top a{width:15vw; z-index: 99;}
/*リンクを右下に固定*/
#page-top {width:15vw; z-index: 99;}

.ftEntBt{justify-content: center; margin: 5vw 0 2em 0;}
	
	#footer h3.ctTitle span{font-size:7vw;}
	

}
