@charset "utf-8"; /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // : Use a value from 100 to 900 .noto-sans-jp- { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: ; font-style: normal; } : Use a value from 200 to 900 .noto-serif-jp- { font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: ; font-style: normal; } ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* ---------------------------------------------------- element base setting (common) ---------------------------------------------------- */ body {color: #000; line-height: 1.8; background: #fff; font-family: "Noto Sans JP", sans-serif;} body.overflow { position: fixed; width: 100%; height: 100%; overflow: hidden; } 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;} .mgT100{margin-top: min(6.667vw , 100px);} /*　上に上がる動き　*/ #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; } } @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 ------------- */ #header {position: fixed; left: 0; top: 0; z-index: 99; width: 100%; align-items: center; padding: 0 min(4.16vw,50px); height: min(6vw, 90px);} #header #hd-logo {width: min(15.133vw, 227px); padding: 1em 0;} /* home */ #header .hd-entry {position:relative; height: min(6vw, 90px); display: flex; display: -webkit-flex; justify-content:center; align-items: center; background-color: #07125b; cursor: pointer; flex-direction: column;} #header .hd-entry a{position: relative; color: white; padding: 0 min(2.667vw , 40px) 0 min(5.33vw , 80px); font-size: min( 1.66vw , 2rem); line-height: 1;} #header .hd-entry a:hover{text-decoration: none; opacity: 1!important;} #header .hd-entry a::before{position: absolute; top: 50%; left: min(1.33vw , 20px); transform: translateY(-50%); content: ""; width: min(2.667vw , 40px); aspect-ratio: 1/1; background: url("../img/common/icon-line.svg") no-repeat 0 0;} #header .hd-entry span{padding-top: 1.5em; line-height: 1.2;} #header .hd-internship {position:relative; height: min(6vw, 90px); display: flex; display: -webkit-flex; justify-content:center; align-items: center; background-color: #019fe8; cursor: pointer; flex-direction: column;} #header .hd-internship a{position: relative; color: white; padding: 0 min(2.667vw , 40px); font-size: min( 1.66vw , 2rem); line-height: 1;} .hd-buttons { position: fixed; top: 0; right: 0; display: flex; z-index: 300; } /* globalnavi ------------- */ #btnGlobal {position: relative; width: min(6vw, 90px); height: min(6vw, 90px); z-index: 120; display: flex; display: -webkit-flex; justify-content:center; align-items: center; cursor: pointer; flex-direction: column; background-color: #555;} #header.fixed {background-color: white;} #header.fixed.menu-open { background-color: transparent; } #btnGlobal.fixed .btnWrapGlobal{background-color: #019fe8;} #btnGlobal.fixed .btnLine{background-color: white;} #btnGlobal.fixed .btnGlobal__txt{color: #019fe8;} #btnGlobal:hover {opacity: 0.6; transition: all 0.2s ease-in-out;} /*#btnGlobal .btnWrapGlobal {width: min(2.667vw , 40px); aspect-ratio: 1/1; position: relative; background-color: #019fe8; border-radius: 50%;}*/ #btnGlobal .btnLine {height: 2px; background: #fff; position: absolute; left:50%; width: 60%; transform: translate(-50%, -50%); transform-origin: center;} #btnGlobal .btnLine.btnLineT { top: 35%; } #btnGlobal .btnLine.btnLineM { top: 50%; } #btnGlobal .btnLine.btnLineB { top: 65%; } #btnGlobal.active{} #btnGlobal.active .btnLine {left:20%;} #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;} #btnGlobal p {margin: 0; color: #019fe8; padding-top: 0.8em; line-height: 1.2;} #grandMenu {background: rgba(0,32,96,0.9); width: 100%; height: 100%; position: fixed; z-index: 3; left: 0; top: 0; display: none; overflow: auto; padding: min(10.8vw, 130px) 8%;} #grandMenu a {color: #fff;} #grandMenu #navGlobal {width: 100%; max-width: 960px; margin: 0 auto;} #grandMenu #navGlobal li { font-size: min( 1.66vw , 2rem); border-bottom: 1px dashed #fff; line-height: 1;} #grandMenu #navGlobal li a {display: block; padding: min(2vw , 25px) 1em; position: relative;} .btnGlobal__txt{writing-mode: vertical-rl;} #grandMenu #navGlobal span {position: relative; display: inline; padding-right: 1.3em;} #grandMenu #navGlobal span::after {position: absolute; content: ""; background: url("../img/common/icon-link.svg") no-repeat 0 0; height: min(1.6vw, 16px); width: min(1.8vw, 18px); top: 50%; transform: translateY(-50%); right: 0;} /* トップ・下層共通：ハンバーガー開いてるとき文字を白にする */ #btnGlobal.active .btnGlobal__txt{ color:#fff; } @media (max-width: 767px) { #header {padding: 0 3vw; height: 15vw;} #header #hd-logo {width: 28vw;} #btnGlobal {padding: 2.5vw 5.5vw 6vw 5.5vw; height: auto;} #btnGlobal:hover {opacity: 1 !important; } #btnGlobal .btnWrapGlobal { width: 7vw; } #btnGlobal p {font-size: 3.4vw; } #grandMenu { padding: min(18vw, 130px) 5%;} #grandMenu #navGlobal li { font-size: min(4vw , 2rem);} #grandMenu #navGlobal li a {padding: min(5vw , 25px) 0;} #grandMenu #navGlobal span::after {height: 4vw; width: 4.5vw;} #header .hd-entry {height: 15vw;} #header .hd-entry a{font-size: 3.2vw; line-height: 1; padding-left: 10vw} #header .hd-entry a span{} #header .hd-entry a::before{width: 7vw;} #header .hd-internship{height: 15vw} #header .hd-internship a{font-size: 3.2vw; line-height: 1;} } /* ---------------------------------------------------- Top ---------------------------------------------------- */ #homVisual {width: 100%; position: relative; overflow:hidden; background-color: #1488d9;} #homVisual .mainVis{width: 100%; position: relative;} #homVisual .mainVis::before{content:""; position:absolute; inset:0; background:rgba(0,0,0,0.2); z-index:2; pointer-events:none;} /*トップタイル*/ .tileHero{position:relative;width:100%;aspect-ratio:1500/804;overflow:hidden; background-color: white;} .tileHero .group{position:absolute;inset:0;display:grid;gap:0;grid-template-columns:226fr 214fr 375fr 240fr 230fr 215fr;grid-template-rows:186fr 60fr 45fr 60fr 126fr 80fr 30fr 61fr 50fr 106fr;} .tileHero .tile{position:relative;width:100%;height:100%;} .tileHero .tile img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;} /* 位置指定（画像番号＝タイル番号） */ .tileHero .t01{grid-column:1/2;grid-row:1/2;} .tileHero .t02{grid-column:2/3;grid-row:1/4;} .tileHero .t03{grid-column:3/5;grid-row:1/3;} .tileHero .t04{grid-column:5/7;grid-row:1/5;} .tileHero .t05{grid-column:1/2;grid-row:2/6;} .tileHero .t06{grid-column:2/3;grid-row:4/6;} .tileHero .t07{grid-column:3/4;grid-row:3/7;} .tileHero .t08{grid-column:4/5;grid-row:3/9;} .tileHero .t09{grid-column:5/7;grid-row:5/8;} .tileHero .t10{grid-column:1/3;grid-row:6/10;} .tileHero .t11{grid-column:3/4;grid-row:7/11;} .tileHero .t12{grid-column:4/5;grid-row:9/11;} .tileHero .t13{grid-column:5/6;grid-row:8/11;} .tileHero .t14{grid-column:6/7;grid-row:8/11;} .tileHero .t15{grid-column:1/2;grid-row:10/11;} .tileHero .t16{grid-column:2/3;grid-row:10/11;} #homVisual .mainVis h2{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 60%;} #homVisual .mainVis .btInternship{position: absolute; width:min(12.4vw, 186px); top:75%; right: 4%; z-index: 2;} #homVisual .flash01{width: min(42.667vw, 640px); position: absolute; top: 40%; left: 8.6%; z-index: 1;} #homVisual .flash02{width: min(42.667vw, 640px); position: absolute; top: 55%; right: 5%; z-index: 1;} /*コンセプトムービー*/ #concept{padding: min(9.33vw , 140px) 0 min(11.467vw, 172px) 0; position: relative;} .conceptText{width: 51%; color: white;} .conceptText h3{font-size: min(2vw , 3rem); /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; font-weight: 600; letter-spacing: -0.05em; margin-bottom: min(2.667vw , 40px); line-height: 1;} .conceptText p{line-height: 2.0;} #concept .movThumbnail{width: 43%;} #concept .movCursive{position: absolute; right: -5%; bottom: 10%; width: min(26.667vw , 400px)} #homVisual .heroArea{position:relative;width:100%;} #homVisual .tileHero{z-index:1;} #homVisual .mainVis h2,#homVisual .mainVis .btInternship{z-index:3;} #homVisual .enVisCopy,#homVisual .flash01,#homVisual .flash02{position:absolute;z-index:2;} .tileHero .tile{overflow:hidden;} .tileHero .tile img{transform:scale(1.01);transform-origin:center;} /* ===== 大枠クロスフェード ===== */ .tileHero{--cycle:12s;position:relative;} .tileHero .group{position:absolute;inset:0;opacity:0;z-index:0;animation:var(--cycle) linear infinite;will-change:opacity;} .tileHero .g1{z-index:1;animation-name:g1Fade;} .tileHero .g2{z-index:2;animation-name:g2Fade;} @keyframes g1Fade{0%,49%{opacity:1;}50%,100%{opacity:0;}} @keyframes g2Fade{0%,49%{opacity:0;}50%,99%{opacity:1;}100%{opacity:0;}} /* ===== タイル時間差フェード ===== */ .tileHero{--cycle:16s;--stagger:.22s;} .tileHero .tile img{opacity:0;} /* 大枠①のとき */ .tileHero .g1 .tile img{animation:t1 var(--cycle) infinite;animation-delay:calc(var(--i)*var(--stagger));} /* 大枠②のとき（後半から） */ .tileHero .g2 .tile img{animation:t2 var(--cycle) infinite;animation-delay:calc(var(--i)*var(--stagger));} @keyframes t1{0%{opacity:0;}6%{opacity:1;}45%{opacity:1;}52%{opacity:0;}100%{opacity:0;}} @keyframes t2{0%{opacity:0;}50%{opacity:0;}56%{opacity:1;}95%{opacity:1;}100%{opacity:0;}} /* ---------------------------------------------------- 事業紹介 ---------------------------------------------------- */ #business{background: url("../img/top/businessBack.png") left top/50% no-repeat , linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 60%, rgba(243, 243, 243, 1) 60%, rgba(243, 243, 243, 1) 100%); padding-bottom: min(6.667vw , 100px);} #business .businessRead{margin-left: 65%; padding: min(6.667vw , 100px) 0;} #business .businessRead h3 span{font-size: min(2.333vw , 3.5rem); /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; display: block; line-height: 1.2;} #business .businessRead p{margin-top: min(2.667vw , 40px); line-height: 2.2;} #business ul li{width: 50%; align-items: flex-start;} #business ul li a{padding-bottom: 3em; justify-content: flex-end; flex-flow: column; color: white; position: relative;} #business ul li.busClum01{background: url("../img/top/business01-li-bg.jpg") no-repeat 0 0; transition: filter 0.4s ease;} #business ul li.busClum02{background: url("../img/top/business02-li-bg.jpg") no-repeat 0 0; transition: filter 0.4s ease;} #business ul li.busClum01:hover, #business ul li.busClum02:hover {filter: brightness(1.3);} #business ul li a::after{position: absolute; bottom: 5%; right: 5%; content: ""; background:url("../img/common/arrow.svg") no-repeat 0 0; width: min(2.467vw , 37px); aspect-ratio: 1/1;} #business ul li h4{writing-mode: vertical-rl; padding-right: 5%; margin-top:-0.8em;} #business ul li h4 span{background-color: #07125b; display: inline-block; /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; font-size: min(1.467vw , 2.2rem); padding: 1rem 0; margin-left: 0.5em;} #business ul li h5{/*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; font-size: min(2vw , 3rem); width: 90%; margin: 0 auto;} #business ul li p{width: 90%; margin: 0 auto; line-height: 1.6;} /* ---------------------------------------------------- 社員紹介 ---------------------------------------------------- */ #employee{} #employee .empRead{padding: min(13.33vw , 200px) 0 0 0; background: url("../img/top/empVis.jpg") no-repeat right bottom/ 48% auto;} #employee .empRead h3 span{font-size: min(4vw , 6rem); /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; display: block; line-height: 1.2; color: #07125b;} #employee .empRead p{width: 35%; margin: min(4.667vw , 70px) 0 0 0; line-height: 2.2; padding-bottom: min(6.667vw , 100px);} #employee ul{justify-content: flex-start; gap: 3.5%;} #employee ul li{width: 31%; position: relative; margin-top: min(6.667vw , 100px);} #employee .empMovThumbnail{position: relative;} #employee .empMovThumbnail::before{background: rgba(0, 0, 0, 0.1); z-index: 1; position: absolute; content: ""; width: 100%; height: 100%; top: 0; left:0;} #employee .empMovThumbnail::after{background: linear-gradient(180deg,rgba(26, 48, 159, 0) 0%, rgba(26, 48, 159, 0) 60%, rgba(26, 48, 159, 0) 40%, rgba(26, 48, 159, 0.41) 75%, rgba(26, 48, 159, 1) 100%); z-index: 2; position: absolute; content: ""; width: 100%; height: 100%; top: 0; left:0;} #employee .empMovThumbnail aside{position: absolute; top: 0; left: 0; background:#2ba3b9; color: white; font-size: min(1.067vw , 1.6rem); text-align: center; line-height: 1.2; padding: 2.7em 0.3em 0.5em 0.3em;} #employee .empMovThumbnail aside::before{position: absolute; top: 10px; left: 50%; transform: translateX(-50%); content: ""; width: min(1.667vw , 25px); height: min(1.667vw , 25px); background: url("../img/top/icon-movie.svg") center center / cover;} #employee .empMovThumbnail aside span{display: block;} #employee .empMovThumbnail p{position: absolute; bottom: min(1.667vw , 25px); left: 5%; color: white; z-index: 3; line-height: 1.3; font-size: min(1.33vw , 2rem); /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; width: 95%} #employee .empMovThumbnail p::after{position: absolute; bottom: 0; right: 5%; content: ""; background:url("../img/common/arrow.svg") no-repeat 0 0; width: min(2.467vw , 37px); aspect-ratio: 1/1;} #employee .empSpec{margin-top: 0.5em;} #employee .empSpec aside{color: #1a309f; display: inline-block; margin-right: 1em; font-weight: 600;} #employee .empSpec .department{display: block; margin-top: 0.5em} #employee .empSpec .department span{color: white; /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; background-color: #07125b; display: inline-block; padding: 0 0.3em;} #employee .empSpec .busPost{font-weight: 600; letter-spacing: -0.03em; line-height: 1.3;} #employee .empSpec .nameEn{font-size: min(1.6vw , 2.4rem); /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; font-weight: 600; line-height: 1; margin-top: 0.6em;} #employee .empSpec .nameJp{font-weight: 600;} #employee .btCareer{position: relative; background: url("../img/top/careerBt.jpg") no-repeat 0 0 / cover; padding: 3em; text-align: center; z-index: -2; color: white; margin-top: min(10vw , 150px);} #employee .btCareer::before{position: absolute; background-color: #07125b; width: 64%; height: 80%; top: 10%; left: 50%; transform: translateX(-50%); content: ""; z-index: -1;} #employee .btCareer span{/*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; display: block;} #employee .btCareer h4{/*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; position: relative; display: inline; font-size: min(2vw , 3rem); padding-left: min(2.467vw , 37px);} #employee .btCareer h4::before{position: absolute; content: ""; top: 50%; left: 0; transform: translateY(-50%); width: min(1.6vw , 24px); height: min(1.467vw , 24px); background: url("../img/common/icon-link.svg") no-repeat 0 0 / cover;} #employee .btCareer p{margin-top: 0.8em;} /* ---------------------------------------------------- プロジェクトストーリー ---------------------------------------------------- */ #project{background-color: #1488d9; padding: min(6.667vw , 100px) 0; margin-top: min(10vw , 150px);} .project-inr{width: 93%; max-width: 1400px; margin:0 auto; position: relative;} .project-inr .pjImg01{position: absolute; top: min(4.667vw , 70px); left: 0; width: min(23.333vw , 350px); height: min(35vw , 525px); z-index: 1;} .project-inr .pjImg02{position: absolute; top: 0; right: 0; width: min(19.333vw , 290px); height: min(24.333vw , 365px); z-index: 1;} .project-inr .pjImg03{position: absolute; top: min(30vw , 450px); right: min(4vw , 60px); width: min(20.267vw , 304px); height: min(15.867vw , 238px); z-index: 1;} .project-inr h3{color: white; z-index: 2; position: relative; width: 55%; margin: 0 auto; padding-top: 1.5em; line-height: 1.2;} .project-inr h3 span{/*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; display: block; font-size: min(2.333vw , 3.5rem);} .project-inr h4{color: white; z-index: 2; position: relative; width: 37%; margin: 3em auto 0 auto; /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; font-size: min(3.067vw , 4.6rem);} .project-inr p{color: white; z-index: 2; position: relative; width: 37%; margin: 2em auto 0 auto; line-height: 2.2;} .project-inr .pjText{width: 66%;} /* ---------------------------------------------------- プロジェクトボタン 共通スタイル（PC） ---------------------------------------------------- */ .pjButton {justify-content: center;} .pjButton li {width:46%; position:relative; padding:min(2vw,30px) 0 0 0;} .pjButton li::before {background:rgba(7,18,91,0.6); position:absolute; content:""; width:100%; height:100%; top:0; left:0; z-index:1;} .pjButton li::after {position:absolute; bottom:5%; right:3%; content:""; background:url("../img/common/arrow.svg") no-repeat 0 0; width:min(2vw,30px); aspect-ratio:1/1; z-index:2;} .pjButton li.pjBut01 {background:url("../img/top/pj-bt01.jpg") no-repeat 0 0 / cover;} .pjButton li.pjBut02 {background:url("../img/top/pj-bt02.jpg") no-repeat 0 0 / cover;} .pjButton li a, .pjButton li.disabled {display:block; color:white; text-decoration:none; position:relative; z-index:2;} .pjButton li a h5, .pjButton li.disabled h5 {display:inline-block; background-color:#07125b; color:white; /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; padding:0.5em min(2vw,30px); line-height:1.4; position:relative; z-index:4;} .pjButton li a h5 span, .pjButton li.disabled h5 span {display:block; font-size:min(1.6vw,2.4rem);} .pjButton li a p, .pjButton li.disabled p {color:white; padding:min(1.6vw,24px); line-height:1.5; letter-spacing:-0.03em; position:relative; z-index:4;} .pjButton li.disabled::before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:9;} .pjButton li.disabled::after {display:none;} /* ---------------------------------------------------- クロストーク ---------------------------------------------------- */ #crosstalk{background: url("../img/top/crosstalkBack.jpg") no-repeat 0 0 / 100% auto; padding-top: min(26.667vw , 400px);} #crosstalk .inrContent{background-color: white; padding: min(5.33vw, 80px) 0 0 0;} #crosstalk .crossRead{width: 90%; margin: 0 auto;} #crosstalk .crossRead h3 span{/*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; color: #07125b; font-size: min(4.133vw , 6.2rem); display: block; line-height: 1.2;} #crosstalk .crossRead p{width: 62%;} #crosstalk .crossMoveWrap{position: relative; margin-top: min(10vw , 150px);} #crosstalk .crossMoveWrap::before{content: ""; position: absolute; top: 0; left: 0; width: 65%; height: 91%; background: #f6f6f6; z-index: 0;} #crosstalk .crossMoveWrap .crtossMovTex{width: 42%; position: relative; padding: min(5.33vw, 80px) 6%;} #crosstalk .crossMoveWrap .crtossMovTex h4{/*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; font-size: min(2vw , 3rem);} #crosstalk .crossMoveWrap .crtossMovTex h5{font-size: min(1.33vw , 2rem); font-weight: 600; letter-spacing: -0.02em; margin: 2em 0 0.7em 0;} #crosstalk .crossMoveWrap .crtossMovTex p{margin-bottom: min(5.33vw, 80px);} #crosstalk .crossMoveWrap .crtossMov{width: 58%; position: relative; margin-top: min(6.667vw , 100px);} #crosstalk .crossMoveWrap .crtossMov aside{color: #cdd0de; /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; text-align: right; font-size: min(4vw , 60px); line-height: 1.2;} #crosstalk .crossMoveWrap .crtossMov aside span{font-size: min(1.33vw , 2rem); writing-mode: vertical-rl;} #crosstalk .crosstalk02 .crossMoveWrap .crtossMov aside{margin-top: min(1.3vw , 20px); display: block;} #crosstalk .crossDeta{padding: 1em 5%; border: 1px solid #9b9b9b; margin-top: min( 2.667vw , 40px );} #crosstalk .crossDeta li{width: 22%;} #crosstalk .crossDeta li .department{display: block; margin-top: 0.5em} #crosstalk .crossDeta li .department span{color: white; /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; font-size: min(1.067vw , 1.6rem); background-color: #07125b; display: block; padding: 0 0.3em;} #crosstalk .crossDeta li .nameEn{font-size: min(1.33vw , 2rem); /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; font-weight: 600; line-height: 1; margin-top: 0.6em;} #crosstalk .crossDeta li .nameJp{font-weight: 600;} #crosstalk .crosstalk02 .crossDeta{width: 55%;} #crosstalk .crosstalk02 .crossDeta li{width: 47%;} /* ---------------------------------------------------- 数字で見る ---------------------------------------------------- */ #numbers{margin-top: min(10vw , 150px); background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 20%, rgba(43, 163, 185, 1) 20%, rgba(43, 163, 185, 1) 100%);} #numbers .numVis{width: 90%; max-height: 450px; overflow-y: hidden; margin-left: 10%;} #numbers .numRead{margin: min(6vw , 90px) 0 0 0; color: white;} #numbers .numRead h3 span{/*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; font-size: min(4.133vw , 6.2rem); display: block; line-height: 1.2;} #numbers .numRead h3{margin-bottom: 1em;} #numbers ul{padding: 0 0 min(10vw , 150px) 0;} #numbers ul li{background-color: white; padding: min(1.667vw , 25px) min(2.33vw , 35px); margin-top: min(3.33vw , 50px); position: relative;} #numbers ul li h4{text-align: center; margin-bottom: min(1.667vw , 25px);} #numbers ul li h4 span{color: white; /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; font-size: min(1.667vw , 2.5rem); background-color: #07125b; display: inline; padding: 0 0.3em;} #numbers ul li h4 span small{font-size: min(1.067vw , 1.6rem);} #numbers ul li div{position: relative; z-index: 2; align-content: flex-end;} #numbers ul li .numCounter{color: #07125b; /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; line-height: 1;} /*numBlock01*/ #numbers ul li.numBlock01{width: 56%;} #numbers ul li.numBlock01 img{position: absolute; bottom: min(1.667vw , 25px); left: min(2.33vw , 35px); width: min(15.33vw , 230px); height: min(12.533vw , 188px);} #numbers ul li.numBlock01 .numText{width: 53%;} #numbers ul li.numBlock01 .numCounter{width: 37%; font-size: min( 3.33vw , 5rem );} #numbers ul li.numBlock01 .numCounter span{font-size: min( 10vw , 15rem );} /*numBlock02*/ #numbers ul li.numBlock02{width: 40%;} #numbers ul li.numBlock02 img{position: absolute; bottom: min(0.667vw , 10px); right: min(2.33vw , 35px); width: min(10.533vw , 158px); height: min(9.33vw , 140px);} #numbers ul li.numBlock02 .numText{width: 100%;} #numbers ul li.numBlock02 .numCounter{width: 100%; font-size: min( 3vw , 2rem );} #numbers ul li.numBlock02 .numCounter span{font-size: min( 5.667vw , 8.5rem );} /*numBlock03*/ #numbers ul li.numBlock03{width: 48%;} #numbers ul li.numBlock03 img{position: absolute; top: min(5.667vw , 85px); left: 50%; transform: translateX(-50%); width: min(11.333vw , 170px); height: min(12.667vw , 190px);} #numbers ul li.numBlock03 .numText{width: 100%; margin-top: 1.5em;} #numbers ul li.numBlock03 .numCounter{font-size: min( 2.667vw , 4rem ); margin-top: min( 3.33vw , 50px );} #numbers ul li.numBlock03 .numCounter span{font-size: min( 5.33vw , 8rem );} /*numBlock04*/ #numbers ul li.numBlock04{width: 48%;} #numbers ul li.numBlock04 img{position: absolute; top: min(5.33vw , 80px); right: min(2.33vw , 35px); width: min(15.867vw , 238px); height: min(11.8vw , 177px);} #numbers ul li.numBlock04 .numText{width: 100%; margin-top: 0.5em;} #numbers ul li.numBlock04 .numCounter{font-size: min( 2.667vw , 4rem ); margin-top: min( 3.33vw , 50px );} #numbers ul li.numBlock04 .numCounter span{font-size: min( 10vw , 15rem );} /*numBlock05*/ #numbers ul li.numBlock05{width: 100%;} #numbers ul li.numBlock05 img{position: absolute; bottom: min(1.667vw , 25px); right: min(2.33vw , 35px); width: min(12.533vw , 188px); height: min(14vw , 210px);} #numbers ul li.numBlock05 .flex{justify-content: flex-start;} #numbers ul li.numBlock05 .numText{width: 55%; margin-top: 0.5em; margin-right: 5%;} #numbers ul li.numBlock05 .numCounter{font-size: min( 2.667vw , 4rem );} #numbers ul li.numBlock05 .numCounter span{font-size: min( 10vw , 15rem );} /* ---------------------------------------------------- 人財育成 ---------------------------------------------------- */ #developing{background-color: #f6f6f6; padding-top: min(6.667vw , 100px);} #developing .devRead{padding: min(10vw , 150px) 0 min(13.33vw , 200px) 0; background: url("../img/top/devVis.jpg") no-repeat right top / 48% auto;} #developing .devRead h3 span{font-size: min(4vw , 6rem); /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; display: block; line-height: 1.2; color: #07125b;} #developing .devRead p{width: 35%; margin: min(4.667vw , 70px) 0; line-height: 2.2; padding-bottom: min(6.667vw , 100px);} #developing .devGrade{background: linear-gradient(90deg,rgba(26, 48, 159, 1) 0%, rgba(43, 163, 185, 1) 60%, rgba(43, 163, 185, 1) 60%, rgba(43, 163, 185, 1) 95%, rgba(43, 163, 185, 0) 95%, rgba(43, 163, 185, 0) 100%); overflow: visible; margin-top: min(-8vw , -180px)} #developing .devGrade ul li{background-color: white; width: 31%; padding: 2em 1.5em; position: relative; margin: min( -2.667vw , -40px ) 0 min(4.667vw , 70px) 0;} #developing .devGrade ul li::after{position: absolute; bottom: 5%; right: 5%; content: ""; background:url("../img/common/arrow-blue.svg") no-repeat 0 0; width: min(2.467vw , 37px); aspect-ratio: 1/1;} #developing .devGrade ul li h4{font-size: min(1.733vw , 2.6rem); /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; display: block; line-height: 1.2; color: #07125b; font-weight: 600; text-align: center;} #developing .devGrade ul li p{margin: 0.8em 0; line-height: 1.5;} #developing .devGrade ul li a{opacity: 1!important;} /* ---------------------------------------------------- ワークスタイル ---------------------------------------------------- */ #workstyle{margin: min(10vw , 150px) 0;} #workstyle h3{text-align: center;} #workstyle h3 span{font-size: min(4vw , 6rem); /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; display: block; line-height: 1.2; color: #07125b;} #workstyle h4{font-size: min(1.867vw , 2.8rem); /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; display: block; line-height: 1.2; color: #07125b; font-weight: 600; margin: 3em 0 0.8em 0;} #workstyle h5 span{font-size: min(1.33vw , 2rem); display: inline; line-height: 1.2; color: white; background-color: #1488d9; padding: 0.1em 0.5em;} #workstyle .wrkClum01 .wrkcTxt{width: 53%;} #workstyle .wrkClum01 .wrkcImg{width: 44%; margin-bottom: 1em;} #workstyle .wrkClum01 p{margin-bottom: 1.3em;} #workstyle .wrkClum01 p span a{position: relative; color: #07125b; padding-right: 1.1em; text-decoration: underline;} #workstyle .wrkClum01 p span a::after{position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: min( 1.067vw , 16px ); height: min( 1.133vw , 17px ); content: ""; background: url("../img/common/icon-link-blue.svg") no-repeat 0 0;} #workstyle .wrkClum01 ul{margin: 1em 0; justify-content: flex-start} #workstyle .wrkClum01 ul li{width: 12%;} #workstyle .wrkClum01 ul li.Bnr__sports{width: 7%; margin: 0 2.5%;} #workstyle .wrkClum02{margin-top: min(1.33vw , 20px);} #workstyle .wrkClum02 div{width: 30%; line-height: 1.5;} #workstyle .wrkClum02 div p{font-weight: 800; margin-top: 0.5em;} #workstyle .wrkClum03 {margin-top: min( 2.667vw , 4rem );} #workstyle .wrkClum03 .wrkcImg02{width: 30%;} #workstyle .wrkClum03 .wrkcTxt02{width: 65%; line-height: 1.5;} #workstyle .wrkClum03 .wrkcTxt02 p{font-weight: 800;} .life-event-pdf a{color: #07125b;} .life-event-pdf{color: #07125b; border: 1px solid #07125b; position: relative; width: 50%; margin: min(6.667vw , 100px) auto min( 2.667vw , 40px ) auto; text-align: center; padding: 1em 2em; border-radius: min(1.25vw, 15px);} .life-event-pdf::before{position: absolute; top: 50%; transform: translateY(-50%); left: 4%; width: min(2.267vw , 34px); height: min(2.533vw , 38px); content: ""; background: url("../img/common/icon-pdf.svg") no-repeat 0 0 / cover;} .wrkForm-bt{position: relative; background: url("../img/top/workBt.jpg") no-repeat 0 0 / cover; width: 60%; margin: min(6.667vw , 100px) auto 0 auto; padding-bottom: min(2.667vw, 40px);} .wrkForm-bt::after{position: absolute; bottom: 5%; right: 5%; content: ""; background:url("../img/common/arrow.svg") no-repeat 0 0; width: min(2.467vw , 37px); aspect-ratio: 1/1;} .wrkForm-bt a{opacity: 1!important;} .wrkForm-bt p{font-size: min(1.867vw , 2.8rem); /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; line-height: 1.2; color: white; background-color: #07125b; font-weight: 600; margin: 1em 0 0.8em 0; padding: 0.2em min(2.667vw, 40px); display: inline-block;} .wrkForm-bt span{display: block; padding: 0.2em min(2.667vw, 40px); color: white;} .life-benefits-illust{margin: 2em 0 5em 0;} /* ---------------------------------------------------- 福利厚生 ---------------------------------------------------- */ .welfare{background-color: #f6f6f6; padding: min(6.667vw , 100px) 0;} .welfare .wlfRead{padding: min(10vw , 150px) 0 0 0; background: url("../img/top/welfVis.jpg") no-repeat right top / 48% auto;} .welfare .wlfRead h3 span{font-size: min(4vw , 6rem); /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; display: block; line-height: 1.2; color: #07125b;} .welfare .wlfRead p{width: 35%; margin: min(4.667vw , 70px) 0; line-height: 2.2;} .readMore span a{position: relative; color: #07125b; padding-right: 2.2em; text-decoration: underline;} .readMore span a::after{position: absolute; top: 50%; transform: translateY(-50%); right: 0; content: ""; background:url("../img/common/arrow-blue02.svg") no-repeat 0 0; width: min(2.467vw , 37px); aspect-ratio: 1/1;} /* ---------------------------------------------------- 採用チームの取組み ---------------------------------------------------- */ .recruit-efforts{padding: 0; background: url("../img/top/recruitVis.jpg") no-repeat left top / 50% auto; margin: min(10vw , 150px) 0;} .recruit-efforts .rcr-efRead{/*padding-bottom: min(10vw , 150px); */min-height: 42vw; padding-top: min(4.667vw , 70px);} .recruit-efforts .rcr-efRead .inrContent{justify-content: flex-end;} .recruit-efforts .rcr-efRead .inrContent .rcr-efInner{width: 42%;} .recruit-efforts .rcr-efRead h3 span{font-size: min(4vw , 6rem); /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; display: block; line-height: 1.2; color: #07125b;} .recruit-efforts .rcr-efRead h4{font-size: min(1.867vw , 2.8rem); /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; display: block; line-height: 1.2; color: #07125b; font-weight: 600; margin: 3em 0 0.8em 0;} .recruit-efforts .rcr-efRead p{margin: min(4.667vw , 70px) 0; line-height: 2.2;} /* ---------------------------------------------------- 採用情報 ---------------------------------------------------- */ #info{background-color: #f6f6f6; padding: min(6.667vw , 100px) 0 min(13.33vw , 200px) 0;} #info .infoRead{padding: min(10vw , 150px) 0 0 0; background: url("../img/top/infoVis.jpg") no-repeat right top / 48% auto;} #info .infoRead h3 span{font-size: min(4vw , 6rem); /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; display: block; line-height: 1.2; color: #07125b;} #info .infoRead h4{font-size: min(1.867vw , 2.8rem); /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; display: block; line-height: 1.2; color: #07125b; font-weight: 600; margin: 1.5em 0 0.8em 0;} #info .infoRead p{width: 38%; margin: 0 0 min(4.667vw , 70px) 0; line-height: 2.2; letter-spacing: -0.03em;} #info .recInfoCase{margin-top: min(10vw , 150px);} #info .recInfoCase h5{font-size: min(1.867vw , 2.8rem); /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; display: block; line-height: 1.2; color: #07125b; font-weight: 600; margin-bottom: min(3.33vw , 50px);} #info .recInfoCase .recInfoWrap {position: relative; background-color: white; padding: min(4.667vw, 70px) 7.5%;} #info .recInfoCase .recInfoWrap::before{position: absolute; top: min(-1vw , -15px); left: 7.5%; content: ""; width: min(8vw , 120px); height: min(2vw , 30px); background-color: #07125b;} #info .recInfoCase table{position: relative; width: 100%;} #info .recInfoCase table tr th{width: 25%; text-align: left; border-bottom: 1px solid #07125b; color: #07125b; font-weight: 600; padding: 1em 0.5em;} #info .recInfoCase table tr td{width: 75%; border-bottom: 1px solid #9b9b9b; padding: 1em 0.5em; vertical-align: top;} #info .recInfoCase table tr td ul{position: relative; padding-left: 1.2em;} #info .recInfoCase table tr td ul li::before {content: "・"; position: absolute;left: 0;} .flowList {align-items: flex-start; position: relative; /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; color: #07125b; display: flex; gap: min(2vw, 30px);} .flowList::before {content: ""; position: absolute; bottom: 0.4em; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #1a309f 0%, #5bc8d1 100%); z-index: 1;} .flowList li {position: relative; flex: 1 1 0; text-align: center; z-index: 2; display: flex; flex-direction: column; align-items: center;} .flowList .bubble {position: relative; background: #fff; border: 1px solid #fff; border-radius: 8px; padding: 1.2em 0.8em; margin-bottom: 3em; display: flex; justify-content: center; align-items: center; /*min-width: 120px; */width: 100%; height: 100%; flex-flow: column;} .flowList .bubble::after {content: ""; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); border-width: 10px 8px 0 8px; border-style: solid; border-color: #fff transparent transparent transparent; } .flowList li::before { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%; background-color: #1a309f; z-index: 2; } .flowList li:nth-child(2)::before { background-color: #193c96; } .flowList li:nth-child(3)::before { background-color: #1b5f9a; } .flowList li:nth-child(4)::before { background-color: #1d89a9; } .flowList li:nth-child(5)::before { background-color: #2ba3b9; } .flowList li:nth-child(6)::before { background-color: #5bc8d1; } .flowList .step {font-size: min(1.133vw , 1.7rem); line-height: 1.1; font-weight: 500;} .flowList .step span {display: block; font-size: min(2vw , 3rem); font-weight: 700; margin-top: 0.2em; } .flowList .title { margin-top: 0.8em; font-size: min(1.1vw, 1.8rem); font-weight: 600; } /* ---------------------------------------------------- コンテンツ-福利厚生 ---------------------------------------------------- */ #ctWelfare .ct-mainVisual{background: url("../img/welfare/mainVis.jpg") no-repeat right top / auto min(50vw , 750px); min-height: min(50vw , 750px); width: 87%; margin: 0 auto; padding: min(13.333vw , 200px) 0 min(4.667vw , 70px) 0;} #ctWelfare .ct-mainVisual h2{font-size: min(2.133vw , 3.2rem); line-height: 1.2} #ctWelfare .ct-mainVisual h2 span{font-size: min(4.8vw , 7.2rem); display: block; color: #07125b;} #ctWelfare .ct-mainVisual p{width: 35%; margin-top: min(3.333vw , 50px);} #ctWelfare h3{font-size: min(2vw , 3rem); font-weight: 600; color: #07125b; margin: 2em 0 0.5em 0;} #ctWelfare ul{margin: 0; padding: 0;} #ctWelfare .welfareSec02 ul{margin: 1em 0 0 0; padding: 0;} #ctWelfare ul li {position: relative; padding-left: 1em; margin: 0 0 0.5em; line-height: 1.3;} #ctWelfare ul li::before {content: "・"; position: absolute; left: 0; top: 0;} #ctWelfare #grandMenu ul li::before{content:none!important;} #ctWelfare #grandMenu ul li{padding-left:0!important; line-height: 1; margin: 0 0 0;} #ctWelfare .welfare-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: min(3vw, 40px); } #ctWelfare .welfare-item {margin-bottom: min(2vw , 30px);} #ctWelfare .welfare-item img {margin-top: 10px;} #ctWelfare h4{font-size: min(1.5vw, 2rem); color: #fff; background: #1488d9; display: inline-block; padding: 0.3em 0.3em; margin-bottom: 0.5em; line-height: 1;} #ctWelfare .welfare-text {line-height: 1.4;} /* 下部3カラム */ #ctWelfare .welfare-list-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: min(3vw, 40px); margin-top: min(2vw , 30px);} #ctWelfare .welfare-list-block ul li {list-style: none; position: relative; padding-left: 1em; margin-bottom: 0.4em; line-height: 1.2;} #ctWelfare .welfare-list-block ul li::before {content: "・"; position: absolute; left: 0; top: 0;} #ctWelfare .welfare-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:min(3vw,40px);align-items:stretch;} #ctWelfare .welfare-item{display:flex;flex-direction:column;height:100%;} #ctWelfare .welfare-item img{/*margin-top:auto; */margin-bottom: 1em;} #ctWelfare .welfare-item h4{align-self:flex-start;} /* ---------------------------------------------------- コンテンツ-人財育成 ---------------------------------------------------- */ #ctDevelop .ct-mainVisual{background: url("../img/developing/mainVis.jpg") no-repeat right top / auto min(50vw , 750px); min-height: min(50vw , 750px); width: 87%; margin: 0 auto; padding: min(13.333vw , 200px) 0 min(4.667vw , 70px) 0;} #ctDevelop .ct-mainVisual h2{font-size: min(2.133vw , 3.2rem); line-height: 1.2} #ctDevelop .ct-mainVisual h2 span{font-size: min(4.8vw , 7.2rem); display: block; color: #07125b; letter-spacing: -0.02em;} #ctDevelop .ct-mainVisual p{width: 35%; margin-top: min(3.333vw , 50px);} #ctDevelop .dvpSec01{background: url("../img/developing/developImg01.jpg") no-repeat left top / 50% auto; margin: min(6.667vw , 100px) 0 min(10vw , 150px) 0; min-height: 42vw;} #ctDevelop .dvpSec01 .dvpRead{padding: min(4.667vw , 70px) 0;} #ctDevelop .dvpSec01 .dvpRead .inrContent{justify-content: flex-end;} #ctDevelop .dvpSec01 .dvpRead .inrContent .dvpReadInner{width: 42%;} #ctDevelop .dvpSec01 .dvpRead p{line-height: 2.2;} #ctDevelop .dvpSec02{background: url("../img/developing/developImg02.jpg") no-repeat 0 0 / 100% auto; padding-top: min(26.667vw , 400px);} #ctDevelop .dvpSec02 .inrContent, #ctDevelop .dvpSec03 .inrContent, #ctDevelop .dvpSec04 .inrContent{background-color: white; padding: min(5.33vw, 80px) 0 0 0;} #ctDevelop .dvpRead02{width: 90%; margin: 0 auto;} #ctDevelop .dvpRead02 h3{color: #07125b; font-size: min(2.667vw , 4rem); display: block; line-height: 1.2; margin-bottom: 1.5em;} #ctDevelop h4{font-size: min(1.4vw , 2rem); font-weight: 600; margin-bottom: 0.8em; letter-spacing: -0.05em;} .ctAbility{margin-bottom: min(6.667vw , 100px);} .ctAbility .ability-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: min(2vw , 30px); margin-top: min(4vw , 60px);} .ctAbility .ability-box {position: relative; background: #fff; border: 1px solid #ccc; padding: 0.8em 1em 1em 1em; display: flex; flex-direction: column;} .ctAbility .ability-title {font-size: min(1.4vw , 2rem); font-weight: 600; position: relative; display: inline-block; padding: 0 min(1.4vw , 20px); margin: -1.8em 0 0.8em 0; background-color: white; text-align: center;} .ctAbility .ability-title::before, .ctAbility .ability-title::after {content: ""; position: absolute; top: 50%; display: inline-block; width: min(1.4vw , 20px); height: 1px; background-color: #ccc; transform: rotate(-60deg);} .ctAbility .ability-title::before {left: 0;} .ctAbility .ability-title::after {right: 0;} .ctAbility .ability-inner {padding: 1.2em; margin-top: -10px; flex: 1;} .ctAbility .basic {background: #e6f3ff;} /* ★ 背景色は ability-inner に付く */ .ctAbility .trend {background: #e6f7f2;} .ctAbility .technical {background: #fef6d7;} .ctAbility .role {background: #fde8df;} .ctAbility .ability-heading {font-weight: 600; margin-bottom: 0.5em; line-height: 1.2;} .ctAbility ul {margin: 0; padding: 0;} .ctAbility ul li {position: relative; padding-left: 1em; margin-bottom: 0.5em; line-height: 1.2;} .ctAbility ul li::before {content: "・"; position: absolute; left: 0; top: 0;} .careerIllust{margin-bottom: min(6.667vw , 100px);} #ctDevelop .dvpSec02 h4.pickup{position: relative; padding-top: min( 1.467vw , 22px );} #ctDevelop .dvpSec02 h4.pickup::before{position: absolute; top: 0; left: 0; content: ""; background: url("../img/developing/icon-pickup.svg") no-repeat 0 0 / cover; width: min(5.667vw , 85px); height: min( 1.467vw , 22px );} #ctDevelop .sd-supportClum{margin: min( 1.33vw , 20px ) 0 min(6.667vw , 100px) 0;} #ctDevelop .sd-supportClum div{width: 68%;} #ctDevelop .sd-supportClum img{width: 27%;} #ctDevelop h5{font-size: min(1.5vw, 2rem); color: #fff; background: #1488d9; display: inline-block; padding: 0.3em 0.3em; margin-bottom: 0.2em; line-height: 1; margin-top: 1.3em;} .training-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: min(2vw, 30px); margin: min(2vw , 30px) 0 min(3.333vw , 50px) 0;} /*.training-box {position: relative; background: #fff; border: 1px solid #ccc; padding: 0 1.5em 0.5em 1.5em; display: flex; flex-direction: column;} .training-title {font-weight: 600; margin: -0.5em 0 0.8em; padding: 0; color: #07125b; background-color: white; text-align: center; line-height: 1;} .ability-inner {padding: 0.5em 0; background: transparent;}*/ .training-box{position:relative;background:#fff;border:1px solid rgba(7,18,91,.12);border-radius:16px;padding:1.2em 1.5em 1.1em;display:flex;flex-direction:column;box-shadow:0 5px 10px rgba(0,0,0,.06);} .training-title{font-weight:700;margin:0 0 .9em;padding:.45em .9em;color:#07125b;background:rgba(20,136,217,.10);border-radius:999px;text-align:center;line-height:1.2;letter-spacing:.02em;align-self:center;} .ability-inner{padding:.6em 0;background:transparent;} .training-box ul {margin: 0; padding: 0;} .training-box ul li {list-style: none; position: relative; padding-left: 1.8em; margin-bottom: 0.6em; line-height: 1.4;} .training-box ul li:nth-child(1)::before {content: "①"; position: absolute; left: 0; top: 0;} .training-box ul li:nth-child(2)::before {content: "②"; position: absolute; left: 0; top: 0;} .training-box ul li:nth-child(3)::before {content: "③"; position: absolute; left: 0; top: 0;} sup {font-size: 0.7em; vertical-align: super; line-height: 1;} .training2clum{margin: min( 1.33vw , 20px ) 0 min(3.333vw , 50px) 0;} .training2clum div{width: 48%;} .training2clum div h6{font-weight: 600; margin: 0.8em 0 0.8em; padding: 0; color: #07125b; background-color: white; line-height: 1;} .training-note {display: flex; align-items: flex-start; gap: 0.3em; margin-top: 1em; color: gray;} .note-label {white-space: nowrap;} .note-text {line-height: 1.6;} #ctDevelop .dvpSec03{background: url("../img/developing/developImg06.jpg") no-repeat 0 0 / 100% auto; padding-top: min(26.667vw , 400px); margin-top: min(10vw , 150px);} #ctDevelop .evaluation{margin-bottom: min(6.667vw , 100px);} #ctDevelop .evaluation div{width: 47%;} #ctDevelop .evaluation img{width: 46%;} #ctDevelop .dvpSec04 .evaluation div{width: 57%;} #ctDevelop .dvpSec04 .evaluation img{width: 36%;} #ctDevelop .tamen p{width: 51%;} #ctDevelop .tamen img{width: 44%;} #ctDevelop .dvpSec04{background: url("../img/developing/developImg08.jpg") no-repeat 0 0 / 100% auto; padding-top: min(26.667vw , 400px); margin-top: min(10vw , 150px);} #ctDevelop .dvpSec04 ul {margin-top: 0.2em;} #ctDevelop .dvpSec04 ul li {position: relative; padding-left: 1em; margin-bottom: 0.5em; line-height: 1.2;} #ctDevelop .dvpSec04 ul li::before {content: "・"; position: absolute; left: 0; top: 0;} /* ---------------------------------------------------- コンテンツ-事業紹介 ---------------------------------------------------- */ .businessCommon .ct-mainVisual{min-height:min(50vw,750px); width:87%; margin:0 auto; padding:min(13.333vw,200px) 0 min(4.667vw,70px) 0;} .businessCommon .ct-mainVisual h2{font-size:min(2.133vw,3.2rem); line-height:1.2;} .businessCommon .ct-mainVisual h2 span{font-size:min(4.8vw,7.2rem); display:block; color:#07125b;} .businessCommon .ct-mainVisual p{width:35%; margin-top:min(3.333vw,50px);} .businessCommon .businessSec01{margin:min(6.667vw,100px) 0 min(10vw,150px) 0; min-height:42vw;} .businessCommon .businessSec01 .businessRead{padding:min(4.667vw,70px) 0;} .businessCommon .businessSec01 .businessRead .inrContent{justify-content:flex-end;} .businessCommon .businessSec01 .businessReadInner{width:42%;} .businessCommon .businessSec01 p{line-height:2.2;} .businessCommon .businessSec02{padding-top:min(26.667vw,400px);} .businessCommon .businessSec02 .inrContent{background-color:white; padding:min(5.33vw,80px) 0 0 0;} .businessCommon .businessRead02{width:90%; margin:0 auto;} .businessCommon .businessRead02 h3{color:#07125b; font-size:min(2.667vw,4rem); margin-bottom:1.5em; line-height:1.2;} .businessCommon .work-block{display:flex; justify-content:space-between; align-items:center; gap:3vw; margin:6vw 0;} .businessCommon .work-block.reverse{flex-direction:row-reverse;} .businessCommon .work-text{width:48%;} .businessCommon .work-text h5{font-size:min(1.5vw,2rem); color:#fff; background:#1488d9; display:inline-block; padding:0.3em 0.4em; margin-bottom:0.5em; line-height:1;} .businessCommon .work-text h4{font-size:min(1.6vw,2.4rem); font-weight:600; margin-bottom:0.8em;} .businessCommon .work-text p{line-height:1.8;} .businessCommon .work-img{width:48%;} .businessCommon .work-img img{width:100%; height:auto; display:block;} .businessCommon .business-lo-banner{width:60%; background-size:cover; background-position:center; position:relative; margin:min(6.667vw,100px) auto 0 auto; transition:filter 0.4s ease;} .businessCommon .business-lo-banner:hover{filter:brightness(1.25);} .businessCommon .business-lo-banner a{display:flex; flex-flow:column; justify-content:flex-end; width:100%; height:100%; color:#fff; padding:1vw 1.5vw 0.5vw 1.5vw; position:relative; text-decoration:none;} .businessCommon .business-lo-banner a::after{content:""; position:absolute; bottom:5%; right:5%; background:url("../img/common/arrow.svg") no-repeat 0 0; width:min(2.467vw,37px); aspect-ratio:1/1;} .businessCommon .business-lo-banner h4{margin:0.5em 0 2em 0;} .businessCommon .business-lo-banner h4 span{background:#07125b; font-size:min(1.467vw,2.2rem); padding:0.3em 0.5em; display:inline-block; line-height:1.2; margin-bottom:0.2em;} .businessCommon .business-lo-banner h5{font-size:min(2vw,3rem); margin-top:0.5vw;} #ctBusiness-Keisoku .ct-mainVisual {background:url("../img/business/keisoku/mainVis.jpg") no-repeat right top / auto min(50vw,750px);} #ctBusiness-Keisoku .businessSec01 {background:url("../img/business/keisoku/businessImg01.jpg") no-repeat left top / 50% auto;} #ctBusiness-Keisoku .businessSec02 {background:url("../img/business/keisoku/businessImg02.jpg") no-repeat 0 0 / 100% auto;} #ctBusiness-Keisoku .business-lo-banner.busClum01 {background:url("../img/business/keisoku/businessLo-bt.jpg") no-repeat 0 0 / cover;} #ctBusiness-Ip .ct-mainVisual {background:url("../img/business/ip/mainVis.jpg") no-repeat right top / auto min(50vw,750px);} #ctBusiness-Ip .businessSec01 {background:url("../img/business/ip/businessImg01.jpg") no-repeat left top / 50% auto;} #ctBusiness-Ip .businessSec02 {background:url("../img/business/ip/businessImg02.jpg") no-repeat 0 0 / 100% auto;} #ctBusiness-Ip .business-lo-banner.busClum01 {background:url("../img/business/ip/businessLo-bt.jpg") no-repeat 0 0 / cover;} /* ---------------------------------------------------- コンテンツ-プロジェクトストーリー ---------------------------------------------------- */ .projectCommon .ct-mainVisual{min-height:min(50vw,750px); width:87%; margin:0 auto; padding:min(13.333vw,200px) 0 min(4.667vw,70px) 0;} .projectCommon .ct-mainVisual h2{font-size:min(2.133vw,3.2rem); line-height:1.2;} .projectCommon .ct-mainVisual h2 span{font-size:min(4.8vw,7.2rem); display:block; color:#07125b;} .projectCommon .ct-mainVisual p{width:35%; margin-top:min(3.333vw,50px);} .projectCommon h3{color:#07125b; font-size:min(2.667vw,4rem); margin-bottom:1em; line-height:1.4; letter-spacing: -0.02em;} .projectCommon .projectSec01{margin:min(6.667vw,100px) 0 min(10vw,150px) 0;} .projectCommon .projectSec01 .inrContent{justify-content:flex-end;} .projectCommon .projectSec01 .projectRead{width:48%;} .projectCommon .projectSec01 p{line-height:1.9;} .projectCommon .projectSec02, .projectCommon .projectSec04{padding-top:min(26.667vw,400px);} .projectCommon .projectSec02 .inrContent ,.projectCommon .projectSec04 .inrContent{background-color:white; padding:min(5.33vw,80px) 0 0 0;} .projectCommon .projectRead02{width:90%; margin:0 auto;} .projectCommon .projectSec03 {margin:min(6.667vw,100px) 0 min(10vw,150px) 0; padding-top:clamp(80px,7vw,200px); padding-bottom:clamp(150px,12vw,280px);} .projectCommon .projectSec03 .projectRead{width:59%;} .projectCommon .projectSec03 p{line-height:1.7;} #ctProject-Ip .ct-mainVisual {background:url("../img/project/ip/mainVis.jpg") no-repeat right top / auto min(50vw,750px);} #ctProject-Ip .projectSec01 {background:url("../img/project/ip/projectImg01.jpg") no-repeat left top / 43% auto;} #ctProject-Ip .projectSec02 {background:url("../img/project/ip/projectImg02.jpg") no-repeat 0 0 / 100% auto;} #ctProject-Ip .projectSec03 {background:url("../img/project/ip/projectImg03.jpg") no-repeat right clamp(80px,6vw,200px) / 38% auto; background-color:#f6f6f6;} #ctProject-Ip .projectSec04 {background:url("../img/project/ip/projectImg04.jpg") no-repeat 0 0 / 100% auto;} #ctProject-Keisoku .ct-mainVisual {background:url("../img/project/keisoku/mainVis.jpg") no-repeat right top / auto min(50vw,750px);} #ctProject-Keisoku .projectSec01 {background:url("../img/project/keisoku/projectImg01.jpg") no-repeat left top / 43% auto;} #ctProject-Keisoku .projectSec02 {background:url("../img/project/keisoku/projectImg02.jpg") no-repeat 0 0 / 100% auto;} #ctProject-Keisoku .projectSec03 {background:url("../img/project/keisoku/projectImg03.jpg") no-repeat right clamp(80px,6vw,200px) / 38% auto; background-color:#f6f6f6;} #ctProject-Keisoku .projectSec04 {background:url("../img/project/keisoku/projectImg04.jpg") no-repeat 0 0 / 100% auto;} #interviewMember{width:100%; display:block; background-color:#f6f6f6; padding: min(3.333vw , 50px) 0; margin-top: min(6.667vw,100px);} #interviewMember .member-photo{width:80%; margin: 0 auto} #interviewMember .member-info {width: 80%; margin:min(3.333vw , 50px) auto 0 auto;} #interviewMember .member-box {width:48%;} #interviewMember .member-dept {color: white; background-color: rgb(7, 18, 91); display: inline-block; padding: 0px 0.3em;} #interviewMember .member-role {font-weight: 600; line-height:1.3;} #interviewMember .member-name-en {font-size: min(1.6vw, 2.4rem); font-weight: 600; line-height: 1; margin-top: 0.6em;} #interviewMember .member-name-ja {font-weight: 600;} #interviewMember span{display: block; text-align: right; margin: 2em auto 0 auto; width: 80%;} .pjButton.pjCenter {justify-content:center; margin-top: min(6.667vw,100px);} .pjButton.pjCenter li {width:min(36vw, 500px);} /* ---------------------------------------------------- コンテンツ-採用チームの取組 ---------------------------------------------------- */ #ctSdgs .ct-mainVisual{min-height:min(50vw,750px); width:87%; margin:0 auto; padding:min(13.333vw,200px) 0 min(4.667vw,70px) 0;} #ctSdgs .ct-mainVisual h2{font-size:min(2.133vw,3.2rem); line-height:1.2;} #ctSdgs .ct-mainVisual h2 span{font-size:min(4.8vw,7.2rem); display:block; color:#07125b;} #ctSdgs .ct-mainVisual p{width:35%; margin-top:min(3.333vw,50px);} #ctSdgs .ct-mainVisual p span{display: block; font-weight: 600; margin-bottom: 1em; font-size: min(1.467vw, 2.2rem);} #ctSdgs h3{color:#07125b; font-size:min(2.667vw,4rem); margin-bottom:1em; line-height:1.4; letter-spacing: -0.02em;} #ctSdgs .sdgsSec01, #ctSdgs .sdgsSec02{margin:min(6.667vw,100px) 0 min(10vw,150px) 0; padding: min(6.667vw,100px) 0;} #ctSdgs .sdgsSec01 .inrContent{justify-content:flex-end;} #ctSdgs .sdgsSec01 .sdgsRead,#ctSdgs .sdgsSec02 .sdgsRead{width:48%;} #ctSdgs .sdgsSec01 p, #ctSdgs .sdgsSec02 p{line-height:1.9;} #ctSdgs .sdgsSec03{padding-top:min(26.667vw,400px);} #ctSdgs .sdgsSec03 .inrContent{background-color:white; padding:min(5.33vw,80px) 0 0 0;} #ctSdgs .sdgsSec03{width:90%; margin:0 auto; text-align: center;} #ctSdgs .ct-mainVisual {background:url("../img/sdgs/mainVis.jpg") no-repeat right top / auto min(50vw,750px);} #ctSdgs .sdgsSec01 {background:url("../img/sdgs/sdgsImg01.jpg") no-repeat left top / 43% auto;} #ctSdgs .sdgsSec02 {background:url("../img/sdgs/sdgsImg02.jpg") no-repeat right top / 43% auto;} #ctSdgs .sdgsSec03 {background:url("../img/sdgs/sdgsImg03.jpg") no-repeat 0 0 / 100% auto;} /* ---------------------------------------------------- コンテンツ-ハイブリッドワーク ---------------------------------------------------- */ /* ---------- mainVisual ---------- */ #ctHybridW .ct-mainVisual{min-height:min(50vw,750px);width:87%;margin:0 auto;padding:min(13.333vw,200px) 0 min(4.667vw,70px) 0;background:url("../img/workreform/mainVis.jpg") no-repeat right top / auto min(50vw,750px);} #ctHybridW .ct-mainVisual h2{font-size:min(2.133vw,3.2rem);line-height:1.2;} #ctHybridW .ct-mainVisual h2 span{font-size:min(4.8vw,7.2rem); display:block; color:#07125b;} #ctHybridW .ct-mainVisual p{width:35%;margin-top:min(3.333vw,50px);line-height:1.9;} /* ---------- 共通 h3 ---------- */ #ctHybridW h3{color:#07125b;font-size:min(2.113vw,3.2rem);margin-bottom:1em;line-height:1.4;letter-spacing:-0.02em;} /* ---------- Interview ヘッダー 完全修正版 ---------- */ #ctHybridW .hybridSec01{position:relative; margin:min(6.667vw,100px) 0; z-index:3;} #ctHybridW .hybridSec02{position:relative; margin:min(10vw,200px) 0 min(6.667vw,100px) 0; z-index:3;} #ctHybridW .hybridSec01 .inrContent,#ctHybridW .hybridSec02 .inrContent{position:relative;display:flex;align-items:flex-start;justify-content:flex-end;width:100%;} /* 写真は必ず60%確定にする（強制固定） */ #ctHybridW .hybridMainPhoto{flex:0 0 60% !important; width:60% !important; max-width:60% !important; margin-left:auto; position:relative; z-index:1;} #ctHybridW .hybridMainPhoto img{width:100%;display:block;} /* hybridNum は lead の外側に出すため、絶対位置（CrossTalk 同等デザイン） */ #ctHybridW .hybridNum{position:absolute; top:0; left:5%; z-index:10; pointer-events:none; color:#cdd0de; font-size:min(4vw,60px); line-height:1.1;} #ctHybridW .hybridNum span{font-size:min(1.33vw,2rem); writing-mode:vertical-rl; display:inline-block; } /* hybridLead（白背景）写真に重なる */ #ctHybridW .hybridLead{position:absolute; top:20%; left:5%; width:38%; background:#fff; padding:2.5vw; z-index:5; margin-top: 5vw;} /* ---------- Story（ピンク帯） ---------- */ #ctHybridW .hybridStory{position:relative;z-index:1;background:#f6f6f6;padding:min(10vw , 200px) 0 min(6.667vw,100px) 0;margin-top:-10vw;} #ctHybridW .hybridStory-inner{width:70%;margin:0 auto;} #ctHybridW .hybridCard{background:#fff;padding:min(3.333vw,50px);box-sizing:border-box;} /* 行（row） */ #ctHybridW .hybridCard-row{display:flex;justify-content:space-between;align-items:flex-start;gap:3.5vw;margin-bottom:min(4vw,60px);} #ctHybridW .hybridCard-row:last-child{margin-bottom:0;} #ctHybridW .hybridCard-photo{flex:0 0 35%;max-width:35%;} #ctHybridW .hybridCard-photo img{width:100%;height:auto;display:block;} #ctHybridW .hybridCard-text{flex:1;} /* h4 のセンター完全固定 — これで絶対ズレない */ #ctHybridW h4,#ctHybridW .hybridCard-text h4,#ctHybridW .hybridCard-title{text-align:center!important; display:block; width:100%; color:#07125b; font-size:min(1.867vw,2.8rem); margin:0 0 1.2em 0;} #ctHybridW .hybridProfile{margin-top: 0.5em;} #ctHybridW .hybridProfile aside{color: #1a309f; display: inline-block; margin-right: 1em; font-weight: 600;} #ctHybridW .hybridProfile .hybridDept{display: block; margin-top: 0.5em} #ctHybridW .hybridProfile .hybridDept span{color: white; background-color: #07125b; display: inline-block; padding: 0 0.3em;} #ctHybridW .hybridProfile .hybridPost{font-weight: 600; letter-spacing: -0.03em; line-height: 1.3;} #ctHybridW .hybridProfile .hybridNameEn{font-size: min(1.6vw , 2.4rem); font-weight: 600; line-height: 1; margin-top: 0.6em;} #ctHybridW .hybridProfile .hybridNameJp{font-weight: 600;} /* ---------------------------------------------------- footer (common) ---------------------------------------------------- */ #footer {position: relative; z-index: 2; margin-top: min( 23.333vw , 350px ); background: url("../img/common/footBack.jpg") no-repeat center center; background-size: cover; padding: min(6vw , 90px) 0 min(1.33vw, 20px) 0; flex-flow: column;} .ftInner{width: 93%; margin: 0 auto; align-items: center; flex-flow: column; text-align: center;} .ftCatchi{font-size: min( 2.8vw , 4.2rem ); margin: min( 2vw , 30px ) 0 min( 3.33vw , 50px ) 0; /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; font-weight: 600; line-height: 1.2;} .ftCatchi span{font-size: min( 1.467vw , 2.2rem ); display: block;} .ftAdd p{width: min(4.33vw, 65px); margin: 0 auto min(1.33vw, 20px) auto;} .ftCopyright{width: 100%; display: block; text-align: center;} .ftEntry{width: 50%; margin: 0 auto; position: absolute; top: min( -3.33vw , -50px ); left: 50%; transform: translateX(-50%); background-color: #07125b; padding: min( 2vw , 30px );} .ftEntry span{color: white; font-size: min( 2vw , 3rem ); /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; font-weight: 600; position: relative; padding-left: min( 3.33vw , 50px );} .ftEntry span::before{position: absolute; top: 50%; transform: translateY(-50%); left: 0; content: ""; background: url("../img/common/icon-line02.svg") no-repeat 0 0; width: min(2.733vw, 41px); height: min(2.533vw, 38px);} #page-top a{width:min( 2.667vw , 40px ); transition:all 0.3s; z-index: 99;} /*リンクを右下に固定*/ #page-top {position: fixed; right: 2%; z-index: 99; opacity: 0; transform: translateY(100px); width:min( 2.667vw , 40px );} /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ tabletSetting ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 1200px) and (min-width: 768px) { } /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ spSetting ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 767px) { .inrContent {width: 90%;} .br_spOnly{display:block;} .br_pcOnly{display:none;} .order1{order:1;} .order2{order:2;} /* ---------------------------------------------------- Top ---------------------------------------------------- */ #homVisual .mainVis h2{width: 85%;} #homVisual .mainVis .btInternship{width:35vw; right: 5%; top: 85%;} #homVisual .enVisCopy{top: 126vw;} .flash01{width: 71vw; top: 0; left: 8.6%;} .flash02{width: 83.3vw; top: 118vw; right: -8vw; opacity: 0.5;} /*コンセプトムービー*/ #concept{padding: 10vw 0 11vw 0;} .conceptText{width: 100%;} .conceptText h3{font-size: 5.556vw; letter-spacing: 1; margin-bottom: min(2.667vw , 40px); line-height: 1.4;} .conceptText p{line-height: 2.0;} #concept .movThumbnail{width: 70%; margin: 2em auto;} #concept .movCursive{right: 2%; bottom: 5%; width: 50vw;} .tileHero{aspect-ratio:3/5;} .tileHero .group{position:absolute;inset:0;width:100%;height:100%;display:grid!important;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:0;} .tileHero .tile{width:100%;height:100%;min-height:0;overflow:hidden;} .tileHero .tile img{width:100%;height:100%;object-fit:cover;display:block;} /* 1段目：3カラム */ .tileHero .t01{grid-column:1/2;grid-row:1/2;} .tileHero .t02{grid-column:2/3;grid-row:1/2;} .tileHero .t04{grid-column:3/4;grid-row:1/2;} /* 2段目：1カラム */ .tileHero .t03{grid-column:1/-1;grid-row:2/3;} /* 3段目：2カラム（左＝2カラム分、右＝1カラム分）→左右に見せる */ .tileHero .t06{grid-column:1/3;grid-row:3/4;} /* 左：2カラム分 */ .tileHero .t11{grid-column:3/4;grid-row:3/4;} /* 右：1カラム分 */ /* 4段目：2カラム（左＝2カラム分、右＝1カラム分） */ .tileHero .t13{grid-column:1/3;grid-row:4/5;} /* 左：2カラム分 */ .tileHero .t14{grid-column:3/4;grid-row:4/5;} /* 右：1カラム分 */ /* ---------------------------------------------------- 事業紹介 ---------------------------------------------------- */ #business{background: url("../img/top/businessBack-sp.png") left top/100% no-repeat , linear-gradient(180deg,rgba(255, 255, 255, 0) 0%); padding-bottom: min(6.667vw , 100px);} #business .businessRead{margin-left: 0; padding: 52vw 0 0 0;} #business .businessRead h3 span{font-size: 8vw; line-height: 1.1;} #business .businessRead p{margin-top: 5vw; line-height: 1.8;} #business ul li{width: 100%; align-items: flex-start; margin-top: 2em; padding: 5vw 0;} #business ul li a{padding-bottom: 1em; justify-content: flex-end; flex-flow: column; color: white; position: relative;} #business ul li.busClum01{background-size: cover; transition: none;} #business ul li.busClum02{background-size: cover; transition: none;} #business ul li a::after{position: absolute; bottom: 0; right: 3%; width: 5vw;} #business ul li h4{writing-mode: horizontal-tb; padding-right: 5%; margin-top:0;} #business ul li h4 span{font-size: 4.074vw; padding: 0.1rem 0.3em; margin-left: 5%; margin-bottom: 0.2em;} #business ul li h5{font-size: 5.556vw; padding-top: 8vw;} #business ul li p{line-height: 1.3;} /* ---------------------------------------------------- 社員紹介 ---------------------------------------------------- */ #employee .trimmingImg{width: 100%; height: 50vw; object-fit: cover; margin-top: 15vw;} #employee .empRead{padding: 0 0 0 0; background: none; margin-top: 5vw;} #employee .empRead h3 span{font-size: 8vw; line-height: 1.1; letter-spacing: -0.02em;} #employee .empRead p{width: 100%; margin: 8vw 0 0 0; line-height: 1.8; padding-bottom: 2vw;} #employee ul li{width: 48%; margin-top: 8vw;} #employee .empMovThumbnail aside{font-size: 2.8vw;} #employee .empMovThumbnail aside::before{content: ""; width: 3vw; height: 3vw;} #employee .empMovThumbnail p{bottom: 6vw; font-size: 3.0vw; width: 90%} #employee .empMovThumbnail p::after{right: 2%; content: ""; width: 5vw; bottom: -3vw;} #employee .empSpec{margin-top: 0.5em;} #employee .empSpec aside{line-height: 1.2; display: block; margin: 0;} #employee .empSpec .nameEn{font-size: 4.2vw;} #employee .btCareer{padding: 3em; margin-top: 10vw;} #employee .btCareer::before{width: 90%;} #employee .btCareer h4{font-size: 5.556vw; padding-left: 6vw;} #employee .btCareer h4::before{width: 4vw; height: 4vw;} #employee .btCareer p{margin-top: 0.8em; line-height: 1.2;} /* ---------------------------------------------------- プロジェクトストーリー ---------------------------------------------------- */ #project{padding: 10vw 0; margin-top: 15vw;} .project-inr{width: 90%;} .project-inr .pjImg01{top: 0; left: inherit; right: 0; width: 33.854vw; height: 50.781vw; z-index: 1;} .project-inr .pjImg02{display: none;} .project-inr .pjImg03{display: none;} .project-inr h3{width: 100%; padding-top: 1.5em;} .project-inr h3 span{font-size: 8vw; line-height: 1.1;} .project-inr h4{width: 100%; margin: 2em auto 0 auto; font-size: 6.481vw; line-height: 1.2;} .project-inr p{width: 100%; line-height: 1.8; margin-bottom: 2em;} .project-inr .pjText{display: none;} /* ---------------------------------------------------- プロジェクトボタン 共通スタイル（SP） ---------------------------------------------------- */ @media screen and (max-width:768px){ .pjButton li {width:100%; padding:3vw 0 4vw 0; margin-bottom:1em;} .pjButton li::after {bottom:5%; right:3%; width:5vw;} .pjButton li a h5 {padding:0.5em 4vw; line-height:1.4;} .pjButton li a h5 span {font-size:4.444vw;} .pjButton li a p {padding:2.5vw 4vw; letter-spacing:-0.035em;} } /* ---------------------------------------------------- クロストーク ---------------------------------------------------- */ #crosstalk{padding-top: 28vw;} #crosstalk .inrContent{padding: 8vw 0 0 0;} #crosstalk .crossRead{width: 100%; margin: 0 auto;} #crosstalk .crossRead h3{text-align: center; width: 100%; display: block;} #crosstalk .crossRead h3 span{font-size: 8vw; line-height: 1.1;} #crosstalk .crossRead p{width: 100%; margin-top: 5vw;} #crosstalk .crossMoveWrap{margin-top: 5vw;} #crosstalk .crossMoveWrap::before{width: 0; height: 0;} #crosstalk .crossMoveWrap .crtossMovTex{width: 100%; padding: 0; margin-top: 1em;} #crosstalk .crossMoveWrap .crtossMovTex h4{font-size: 4.7vw; font-weight: 600;} #crosstalk .crossMoveWrap .crtossMovTex h5{font-size: 3.704vw; margin: 0 0 0.7em 0;} #crosstalk .crossMoveWrap .crtossMovTex p{margin-bottom: 4vw;} #crosstalk .crossMoveWrap .crtossMov{width: 100%; margin-top: 0; position: relative;} #crosstalk .crossMoveWrap .crtossMov aside{font-size: 7vw; position: absolute; bottom: -16vw; right: 0;} #crosstalk .crossMoveWrap .crtossMov aside span{font-size: 2.8vw;} #crosstalk .crosstalk02 .crossMoveWrap .crtossMov aside{margin-top: min(1.3vw , 20px); display: block;} #crosstalk .crossDeta{padding: 0.2em 0.5em; margin: 3vw 0 15vw 0;} #crosstalk .crossDeta li{width: 48%; line-height: 1.2; margin-bottom: 0.5em;} #crosstalk .crossDeta li .department{display: block; margin-top: 0.5em;} #crosstalk .crossDeta li .department span{font-size: 2.8vw;padding: 0.4em 0.2em;} #crosstalk .crossDeta li .nameEn{font-size: 3.4vw;} #crosstalk .crosstalk02 .crossDeta{width: 100%;} #crosstalk .crosstalk02 .crossDeta li{width: 48%;} /* ---------------------------------------------------- 数字で見る ---------------------------------------------------- */ #numbers{margin-top: 15vw; background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 5%, rgba(43, 163, 185, 1) 5%, rgba(43, 163, 185, 1) 100%);} #numbers .numRead{margin: 8vw 0 0 0;} #numbers .numRead h3 span{font-size: 8vw; line-height: 1.1;} #numbers ul{padding: 0 0 10vw 0;} #numbers ul li{padding: 3vw 5vw; margin-top: 5vw;} #numbers ul li h4{margin-bottom: 2vw;} #numbers ul li h4 span{font-size: 3.704vw;} #numbers ul li h4 span small{font-size: 2.6vw;} /*numBlock01*/ #numbers ul li.numBlock01{width: 100%;} #numbers ul li.numBlock01 img { bottom: 3.255vw; left: 4.557vw; width: 29.948vw; height: 24.479vw; } #numbers ul li.numBlock01 .numText{width: 60%;} #numbers ul li.numBlock01 .numCounter{width: 37%; font-size: 8vw;} #numbers ul li.numBlock01 .numCounter span{font-size: 18vw;} /*numBlock02*/ #numbers ul li.numBlock02{width: 100%;} #numbers ul li.numBlock02 img { position: absolute; bottom: 1.302vw; right: 4.557vw; width: 20.573vw; height: 18.229vw; } #numbers ul li.numBlock02 .numText{width: 100%;} #numbers ul li.numBlock02 .numCounter{width: 100%; font-size: 8vw;} #numbers ul li.numBlock02 .numCounter span{font-size: 18vw;} /*numBlock03*/ #numbers ul li.numBlock03{width: 100%;} #numbers ul li.numBlock03 img { position: absolute; top: 11.068vw; left: 50%; transform: translateX(-50%); width: 22.135vw; height: 24.739vw; } #numbers ul li.numBlock03 .numText{width: 100%; margin-top: 1.5em;} #numbers ul li.numBlock03 .numCounter{font-size: 8vw; margin-top: 5vw;} #numbers ul li.numBlock03 .numCounter span{font-size: 12vw;} /*numBlock04*/ #numbers ul li.numBlock04{width: 100%;} #numbers ul li.numBlock04 img { position: absolute; top: 10.417vw; right: 4.557vw; width: 30.989vw; height: 23.047vw; } #numbers ul li.numBlock04 .numText{width: 100%; margin-top: 0.5em;} #numbers ul li.numBlock04 .numCounter{font-size: 8vw; margin-top: 5vw;} #numbers ul li.numBlock04 .numCounter span{font-size: 18vw;} /*numBlock05*/ #numbers ul li.numBlock05 img{bottom: 3.255vw; right: 4.557vw; width: 25.6vw; height: 28.6vw;} #numbers ul li.numBlock05 .flex{justify-content: flex-start;} #numbers ul li.numBlock05 .numText{width: 100%; margin-top: 0.5em; margin-right: 0;} #numbers ul li.numBlock05 .numCounter{font-size: 8vw; margin-top: 5vw;} #numbers ul li.numBlock05 .numCounter span{font-size: 18vw;} /* ---------------------------------------------------- 人財育成 ---------------------------------------------------- */ #developing{padding-top: 0; padding-bottom: 8vw;} #developing .devlImg{width: 100%; height: 50vw; object-fit: cover; object-position: center 55%;} #developing .devRead{padding: 0; background: none; margin-top: 8vw;} #developing .devRead h3 span{font-size: 8vw; line-height: 1.1; letter-spacing: -0.02em;} #developing .devRead p{width: 100%; margin: 8vw 0 0 0; line-height: 1.8; padding-bottom: 2vw;} #developing .devGrade{background: none; margin-top: 0} #developing .devGrade ul li{width: 100%; margin: 3vw 0 3vw 0;} #developing .devGrade ul li::after{width: 5vw;} #developing .devGrade ul li h4{font-size: 3.704vw;} /* ---------------------------------------------------- ワークスタイル ---------------------------------------------------- */ #workstyle{margin: 10vw 0;} #workstyle h3 span{font-size: 8vw; line-height: 1.1;} #workstyle h4{font-size: 3.704vw;} #workstyle h5 span{font-size: 3.4vw;} #workstyle .wrkClum01 .wrkcTxt{width: 100%;} #workstyle .wrkClum01 .wrkcImg{width: 100%; margin-bottom: 7vw;} #workstyle .wrkClum01 p span a::after{width: 3vw; height: 3.1vw;} #workstyle .wrkClum01 ul{justify-content: center; margin: 0 0 1em 0;} #workstyle .wrkClum01 ul li{width: 32%; margin: 1em 0 0.5em 0;} #workstyle .wrkClum01 ul li.Bnr__sports{width: 20%; margin: 0 6%;} #workstyle .wrkClum02{margin-top: 3vw;} #workstyle .wrkClum02 div{width: 48%; margin-bottom: 3vw;} .life-event-pdf{width: 80%; margin: 8vw auto 4vw auto; border-radius: 2vw;} .life-event-pdf::before{width: 4.427vw; height: 4.948vw;} .wrkForm-bt{width: 90%; padding-bottom: 4vw; margin: 8vw auto 0 auto 0;} .wrkForm-bt::after{width: 4.948vw;} .wrkForm-bt p{font-size: 3.704vw; padding: 0.2em 4vw;} .wrkForm-bt span{padding: 0.2em 4vw;} /* ---------------------------------------------------- 福利厚生 ---------------------------------------------------- */ .welfare{background-color: #f6f6f6; padding: 0 0 10vw 0; margin-top: 10vw;} .welfare .welImg{width: 100%; height: 50vw; object-fit: cover; object-position: center 60%;} .welfare .wlfRead{padding: 0; background: none; margin-top: 8vw;} .welfare .wlfRead h3 span{font-size: 8vw; line-height: 1.1; letter-spacing: -0.02em;} .welfare .wlfRead p{width: 100%; margin: 8vw 0 0 0; line-height: 1.8; padding-bottom: 2vw;} .readMore{text-align: right;} .readMore span a{position: relative; color: #07125b; padding-right: 2.2em; text-decoration: underline;} .readMore span a::after{width: 5vw;} /* ---------------------------------------------------- 採用チームの取組み ---------------------------------------------------- */ .recruit-efforts{padding: 0; background: none; margin: 10vw 0;} .recruit-efforts .recImg{width: 100%; height: 75vw; object-fit: cover; object-position: center 60%;} .recruit-efforts .rcr-efRead{min-height: inherit; padding-top: 0; margin-top: 8vw;} .recruit-efforts .rcr-efRead .inrContent{justify-content: flex-end;} .recruit-efforts .rcr-efRead .inrContent .rcr-efInner{width: 100%;} .recruit-efforts .rcr-efRead h3 span{font-size: 8vw; line-height: 1.1; letter-spacing: -0.02em;} .recruit-efforts .rcr-efRead h4{font-size: 3.704vw; margin-top: 2em;} .recruit-efforts .rcr-efRead p{width: 100%; margin: 0 0 0 0; line-height: 1.8; padding-bottom: 2vw;} /* ---------------------------------------------------- 採用情報 ---------------------------------------------------- */ #info{background-color: #f6f6f6; padding: 0 0 10vw 0; margin-top: 10vw;} #info .infoImg{width: 100%; height: 50vw; object-fit: cover; object-position: center 60%;} #info .infoRead{padding: 0; background: none; margin-top: 8vw;} #info .infoRead h3 span{font-size: 8vw; line-height: 1.1; letter-spacing: -0.02em;} #info .infoRead h4{font-size: 3.704vw; margin-top: 2em;} #info .infoRead p{width: 100%; margin: 0 0 0 0; line-height: 1.8; padding-bottom: 2vw;} #info .recInfoCase{margin-top: 13vw;} #info .recInfoCase h5{font-size: 3.704vw; margin-bottom: 5vw;} #info .recInfoCase .recInfoWrap {position: relative; background-color: white; padding: min(4.667vw, 70px) 7.5%;} #info .recInfoCase .recInfoWrap::before{position: absolute; top: -2vw; left: 7.5%; content: ""; width: 15vw; height: 4vw;} #info .recInfoCase table{position: relative; width: 100%;} #info .recInfoCase table tr th{width: 25%; text-align: left; border-bottom: 1px solid #07125b; color: #07125b; font-weight: 600; padding: 1em 0.5em;} #info .recInfoCase table tr td{width: 75%; border-bottom: 1px solid #9b9b9b; padding: 1em 0.5em; vertical-align: top;} #info .recInfoCase table tr td ul{position: relative; padding-left: 1.2em;} #info .recInfoCase table tr td ul li::before {content: "・"; position: absolute;left: 0;} .flowList {align-items: flex-start; position: relative; /*font-family: "Noto Serif JP", serif;*/font-family: "Noto Sans JP", sans-serif; color: #07125b; display: flex; gap: min(2vw, 30px);} .flowList::before {content: ""; position: absolute; bottom: 0.4em; left: 0; width: 100%; height: 4px; z-index: 1;} .flowList li {position: relative; flex: 1 1 0; text-align: center; z-index: 2; display: flex; flex-direction: column; align-items: center;} .flowList .bubble {position: relative; background: #fff; border: 1px solid #fff; border-radius: 8px; padding: 1.2em 0.1em; margin-bottom: 3em; display: flex; justify-content: center; align-items: center; /*min-width: 120px; */width: 100%; height: 100%; flex-flow: column;} .flowList .bubble::after {content: ""; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); border-width: 10px 8px 0 8px; border-style: solid; border-color: #fff transparent transparent transparent; } .flowList li::before { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%; background-color: #1a309f; z-index: 2; } .flowList .step {font-size: 2.4vw; line-height: 1.1; font-weight: 500;} .flowList .step span {display: block; font-size: 2.8vw; font-weight: 700; margin-top: 0.2em; } .flowList .title { margin-top: 0.8em; font-size: 2.6vw; font-weight: 600; letter-spacing: -0.1em; line-height: 1.4;} /* ---------------------------------------------------- コンテンツ-福利厚生 ---------------------------------------------------- */ #ctWelfare .ct-mainVisual {background: url("../img/welfare/mainVis.jpg") no-repeat right top / 70% auto; width: 100%; padding: 20vw 0 5vw 0;} #ctWelfare .ct-mainVisual h2 {font-size: 4.5vw; margin: 20vw auto 0 auto; width: 90%;} #ctWelfare .ct-mainVisual h2 span {font-size: 8vw;} #ctWelfare .ct-mainVisual p {width: 90%; margin: 6vw auto 0 auto;} #ctWelfare h3 {font-size: 3.9vw; margin: 10vw 0 3vw 0;} #ctWelfare .welfare-grid {grid-template-columns: 1fr; gap: 8vw;} #ctWelfare .welfare-item {margin-bottom: 3vw;} #ctWelfare h4 {font-size: 3.4vw; padding: 0.5em 0.8em;} #ctWelfare .welfare-text {font-size: 3.7vw; line-height: 1.6;} /* 下部3カラム */ #ctWelfare .welfare-list-grid {grid-template-columns: 1fr; gap: 8vw; margin-top: 10vw;} #ctWelfare .welfare-list-block ul li {padding-left: 1.2em; margin-bottom: 0.5vw; line-height: 1.5;} #ctWelfare .welfare-list-block ul li::before {left: 0; top: 0;} /* ---------------------------------------------------- コンテンツ-人財育成 ---------------------------------------------------- */ #ctDevelop .ct-mainVisual{background: url("../img/developing/mainVis.jpg") no-repeat right top / 70% auto; width: 100%; padding: 20vw 0 5vw 0;} #ctDevelop .ct-mainVisual h2{font-size: 4.5vw; margin: 20vw auto 0 auto; width: 90%;} #ctDevelop .ct-mainVisual h2 span{font-size: 8vw;} #ctDevelop .ct-mainVisual p{width: 90%; margin: 6vw auto 0 auto;} #ctDevelop .dvpSec01 {background:none; min-height:auto; margin:10vw 0; padding:0;} #ctDevelop .dvpSec01 .dvpRead {margin-top:8vw; padding:0;} #ctDevelop .dvpSec01 .dvpRead .inrContent .dvpReadInner {width:100%;} #ctDevelop .recImg{width: 100%; height: 75vw; object-fit: cover; object-position: center 60%;} #ctDevelop .dvpSec01 .dvpRead p{line-height: 2.2;} #ctDevelop .dvpSec02{padding-top: 28vw;} #ctDevelop .dvpSec02 .inrContent, #ctDevelop .dvpSec03 .inrContent, #ctDevelop .dvpSec04 .inrContent{padding: 8vw 0 0 0;} #ctDevelop .dvpRead02{width: 100%;} #ctDevelop .dvpRead02 h3{font-size: 5vw; margin-bottom: 1.3em; text-align: center;} #ctDevelop h4{font-size: 4vw; margin-bottom: 0.8em;} .ctAbility{margin: 10vw 0;} .ctAbility .ability-grid {display: grid; grid-template-columns: 1fr; gap: 8vw;} .ctAbility .ability-box {padding: 4vw 4vw 6vw 4vw;} #ctDevelop .ability-title {width:auto; display:inline-block; padding:0 6vw; font-size:4vw; margin:-6vw auto 4vw auto; line-height:1; position:relative;} #ctDevelop .ability-title::before, #ctDevelop .ability-title::after {content:""; position:absolute; top:50%; transform:translateY(-50%) rotate(-60deg); width:4vw; height:1px; background:#ccc;} #ctDevelop .ability-title::before {left:-2vw;} #ctDevelop .ability-title::after {right:-2vw;} .ctAbility .ability-inner {padding: 4vw; margin-top: 0;} .ctAbility .ability-heading {margin-bottom: 3vw; font-size: 4vw;} .careerIllust{overflow-x:auto; overflow-y:hidden; white-space:nowrap; padding-bottom:3vw;} .careerIllust img{width:200%; display:inline-block;} #ctDevelop .dvpSec02 h4.pickup {padding-top:6.5vw; font-size:4vw;} #ctDevelop .dvpSec02 h4.pickup::before {width:20vw; height:6vw; background-size: contain;} #ctDevelop .sd-supportClum {flex-direction:column; margin:4vw 0 12vw 0;} #ctDevelop .sd-supportClum div {width:100%;} #ctDevelop .sd-supportClum img {width:100%; height:45vw; object-fit:cover; object-position:center 30%; margin-top: 4vw;} #ctDevelop h5 {font-size:3.5vw; margin-top:4vw;} .training-grid {grid-template-columns:1fr; gap:6vw; margin:10vw 0;} .training-box {padding:0 4vw 0 4vw; margin-bottom: 3vw;} .training-title {font-size:3.8vw; margin:-2.5vw 0 0 0;} .ability-inner {padding:4vw 0 2vw 0;} .training-box ul li {padding-left:2.2em; margin-bottom:3vw; line-height:1.5;} .training-box ul li:nth-child(1)::before {left:0; top:0;} .training-box ul li:nth-child(2)::before {left:0; top:0;} .training-box ul li:nth-child(3)::before {left:0; top:0;} .training2clum{margin:5vw 0 5vw 0; flex-wrap:wrap;} .training2clum div{width:100%; margin-bottom:6vw;} .training2clum div h6{font-size:3.8vw; margin:4vw 0 2vw 0;} .training-note{gap:1.5vw; margin-top:3vw; font-size:3.4vw;} #ctDevelop .dvpSec03{padding-top: 28vw; margin-top:15vw;} #ctDevelop .dvpSec03 .recImg03{width:100%; height:60vw; object-fit:cover; object-position:center 40%;} #ctDevelop .evaluation{flex-wrap:wrap; margin-bottom:12vw;} #ctDevelop .evaluation div{width:100%; margin-bottom:6vw;} #ctDevelop .evaluation img{width:100%; margin-top:4vw;} #ctDevelop .dvpSec04{padding-top: 28vw; margin-top:15vw;} #ctDevelop .dvpSec04 .recImg04{width:100%; height:60vw; object-fit:cover; object-position:center 40%;} #ctDevelop .dvpSec04 .evaluation div{width:100%; margin-bottom:6vw;} #ctDevelop .dvpSec04 .evaluation img{width:70%; margin:4vw auto 0 auto;} #ctDevelop .tamen p{width:100%; margin:0vw 0;} #ctDevelop .tamen img{width:100%; height:55vw; object-fit:cover; object-position:center 40%; margin-top:4vw;} #ctDevelop .dvpSec04 ul li{padding-left:1em; margin-bottom:2vw; line-height:1.5;} /* ---------------------------------------------------- コンテンツ-事業紹介 ---------------------------------------------------- */ .businessCommon .ct-mainVisual{background-size:70% auto; width:100%; padding:20vw 0 5vw 0;} .businessCommon .ct-mainVisual h2{font-size:4.5vw; width:90%; margin:20vw auto 0 auto;} .businessCommon .ct-mainVisual h2 span{font-size:8vw; display:block;} .businessCommon .ct-mainVisual p{width:90%; margin:6vw auto 0 auto; font-size:4vw; line-height:1.8;} .businessCommon .businessSec01{background:none; min-height:auto; margin:10vw 0;} .businessCommon .businessSec01 .businessRead{margin-top:8vw; padding:0;} .businessCommon .businessSec01 .businessRead .inrContent{flex-direction:column;} .businessCommon .businessSec01 .businessReadInner{width:100%;} .businessCommon .businessSec02{padding-top:28vw;} .businessCommon .businessSec02 .inrContent{padding:8vw 0 0 0;} .businessCommon .businessRead02{width:90%; margin:0 auto;} .businessCommon .businessRead02 h3{font-size:5vw; margin-bottom:1.3em; text-align:center;} .businessCommon .work-text h5{font-size:3.4vw; margin-top:4vw;} .businessCommon .work-text h4{font-size:4vw; margin-bottom:0.8em;} .businessCommon .work-text p{font-size:4vw; line-height:1.8;} .businessCommon .work-block{flex-direction:column; gap:6vw; margin:5vw 0;} .businessCommon .work-block.reverse{flex-direction:column;} .businessCommon .work-text{width:100%;} .businessCommon .work-img{width:100%;} .businessCommon .work-img img{width:100%; height:55vw; object-fit:cover; object-position:center;} .businessCommon .business-lo-banner{width:100%; height:40vw; margin:18vw auto 0 auto;} .businessCommon .business-lo-banner a{padding:6vw 3vw 2vw 3vw;} .businessCommon .business-lo-banner a::after{width:6vw; bottom:4%; right:4%;} .businessCommon .business-lo-banner h4 span{font-size:3.8vw; padding:1vw 2vw;} .businessCommon .business-lo-banner h5{font-size:4.5vw; margin-top:0;} /* ---------------------------------------------------- コンテンツ-プロジェクトストーリー ---------------------------------------------------- */ .projectCommon .ct-mainVisual{background-size:70% auto; width:100%; padding:20vw 0 5vw 0;} .projectCommon .ct-mainVisual h2{font-size:4.5vw; width:90%; margin:20vw auto 0 auto;} .projectCommon .ct-mainVisual h2 span{font-size:8vw; display:block;} .projectCommon .ct-mainVisual p{width:90%; margin:6vw auto 0 auto; font-size:4vw; line-height:1.8;} .projectCommon h3{font-size:5vw; margin-bottom:4vw; text-align:center;} .projectCommon .projectSec01{background:none; margin:10vw 0;} .projectCommon .projectSec01 .inrContent{flex-direction:column; justify-content:flex-start;} .projectCommon .projectSec01 .projectRead{width:100%; margin-top:8vw;} .projectCommon .projectSec01 p{font-size:4vw; line-height:1.8;} .projectCommon .pjImg {width: 100%; height: 50vw; object-fit: cover; object-position: center top;} #ctProject-Ip.projectCommon .projectSec03 .pjImg {object-position: center 25%;} #ctProject-Keisoku.projectCommon .projectSec01 .pjImg {object-position: center 25%;} .projectCommon .projectSec02, .projectCommon .projectSec04{padding-top:28vw;} .projectCommon .projectSec02 .inrContent, .projectCommon .projectSec04 .inrContent{padding:8vw 0 0 0;} .projectCommon .projectRead02{width:90%; margin:0 auto;} .projectCommon .projectRead02 p{font-size:4vw; line-height:1.8;} .projectCommon .projectSec03{background:none!important; padding:0; margin:15vw 0;} .projectCommon .projectSec03 .inrContent{flex-direction:column; justify-content:flex-start;} .projectCommon .projectSec03 .projectRead{width:100%; margin-top:8vw;} .projectCommon .projectSec03 p{font-size:4vw; line-height:1.8;} #interviewMember{padding:10vw 0; margin-top:15vw;} #interviewMember .member-photo{width:90%;} #interviewMember .member-info{width:90%; margin:6vw auto 0 auto; flex-direction:column; gap:6vw;} #interviewMember .member-box{width:100%;} #interviewMember .member-name-en{font-size:4.2vw;} #interviewMember .member-role{line-height:1.4;} #interviewMember span{width: 90%;} .pjButton.pjCenter li{width:90%;} .pjButton.pjCenter{margin-top:18vw;} /* ---------------------------------------------------- コンテンツ-採用チームの取組 ---------------------------------------------------- */ #ctSdgs .ct-mainVisual {background-size:70% auto; width:100%; padding:20vw 0 5vw 0;} #ctSdgs .ct-mainVisual h2 {font-size:4.5vw; width:90%; margin:20vw auto 0 auto;} #ctSdgs .ct-mainVisual h2 span {font-size:8vw; display:block;} #ctSdgs .ct-mainVisual p {width:90%; margin:6vw auto 0 auto; font-size:4vw; line-height:1.8;} #ctSdgs .ct-mainVisual p span {font-size:4.5vw; margin-bottom:3vw; display:block; font-weight:600;} #ctSdgs h3 {font-size:5vw; margin-bottom:4vw; text-align:center;} #ctSdgs .sdgsSec01 {background:none; margin:10vw 0; padding:0;} #ctSdgs .sdgsSec01 .inrContent {flex-direction:column; justify-content:flex-start;} #ctSdgs .sdgsSec01 .sdgsRead {width:100%; margin-top:8vw;} #ctSdgs .sdgsSec01 p {font-size:4vw; line-height:1.8;} #ctSdgs .sdgsSec01 .pjImg {width:100%; height:50vw; object-fit:cover; object-position:center 25%;} #ctSdgs .sdgsSec02 {background:none; margin:10vw 0; padding:0;} #ctSdgs .sdgsSec02 .inrContent {flex-direction:column; justify-content:flex-start;} #ctSdgs .sdgsSec02 .sdgsRead {width:100%; margin-top:8vw;} #ctSdgs .sdgsSec02 p {font-size:4vw; line-height:1.8;} #ctSdgs .sdgsSec02 .pjImg {width:100%; height:50vw; object-fit:cover; object-position:center 25%;} #ctSdgs .sdgsSec03 {padding-top:24vw; margin:0;} #ctSdgs .sdgsSec03 .inrContent {padding:8vw 0 0 0; background-color:white;} #ctSdgs .sdgsSec03 .sdgsRead {width:90%; margin:0 auto;} #ctSdgs .sdgsSec03 .sdgsRead p {font-size:4vw; line-height:1.8;} /* ---------------------------------------------------- コンテンツ-ハイブリッドワーク ---------------------------------------------------- */ #ctHybridW,html,body{overflow-x:hidden;} #ctHybridW .ct-mainVisual{background-size:70% auto;width:100%;padding:20vw 0 5vw 0;margin:0;background-position:right top;} #ctHybridW .ct-mainVisual h2{font-size:4.5vw;width:90%;margin:20vw auto 0 auto;line-height:1.3;} #ctHybridW .ct-mainVisual h2 span{font-size:8vw;display:block;} #ctHybridW .ct-mainVisual p{width:90%;margin:6vw auto 0 auto;font-size:4vw;line-height:1.8;} #ctHybridW h3{font-size:5vw; margin-bottom:4vw;text-align:left;} #ctHybridW .hybridSec01,#ctHybridW .hybridSec02{margin-bottom: 0;} #ctHybridW .hybridSec01 .inrContent, #ctHybridW .hybridSec02 .inrContent{display:block;width:100%;} #ctHybridW .hybridMainPhoto{width:100%!important;max-width:100%!important;margin:0 auto;display:block;float:none;} #ctHybridW .hybridMainPhoto img{width:100%;height:auto;display:block;} #ctHybridW .hybridNum{position:relative;top:0;left:4vw;font-size:10vw;max-width:90%;overflow:hidden;} #ctHybridW .hybridNum span{font-size:3vw;} #ctHybridW .hybridLead{position:static;width:100%;padding:5vw;box-sizing:border-box;margin-top:0;background:#fff;} #ctHybridW .hybridStory{padding:10vw 0 15vw 0;margin-top:0;} #ctHybridW .hybridStory-inner{width:90%;margin:0 auto;} #ctHybridW .hybridCard{padding:8vw;box-sizing:border-box;} #ctHybridW .hybridCard-row{display:block;gap:0;margin-bottom:12vw;} #ctHybridW .hybridCard-row:last-child{margin-bottom:0;} #ctHybridW .hybridCard-photo{width:100%;max-width:100%;margin:3vw 0 5vw 0;} #ctHybridW .hybridCard-photo img{width:100%;} #ctHybridW .hybridCard-text p{font-size:4vw;line-height:1.8;} #ctHybridW .hybridCard-title{font-size:5vw; line-height: 1.3; margin:0 0 5vw 0;} #ctHybridW .hybridProfile .hybridNameEn{font-size:4.2vw;} #ctHybridW .hybridProfile .hybridNameJp{font-weight:600;} /* ---------------------------------------------------- footer (common) ---------------------------------------------------- */ #footer {margin-top: 25vw; padding: 10vw 0 2vw 0; flex-flow: column;} .ftInner{width: 93%; margin: 0 auto; align-items: center; flex-flow: column; text-align: center;} .ftCatchi{font-size: 4.8vw; margin: 2vw 0 4vw 0;} .ftCatchi span{font-size: 3vw;} .ftAdd p{width: 12vw; margin: 4vw auto 3vw auto;} .ftCopyright{font-size: 2.4vw;} .ftEntry{width: 80%; margin: 0 auto; top: -5vw; left: 50%; transform: translateX(-50%); background-color: #07125b; padding: 3vw;} .ftEntry span{font-size: 4vw; padding-left: 7vw;} .ftEntry span::before{width: 5.34vw; height: 4.95vw;} #page-top a{width:6vw; z-index: 99;} /*リンクを右下に固定*/ #page-top {width:6vw; z-index: 99;} }