@charset "UTF-8";
/* CSS Document */
/*=============================
joy5
=============================*/
.joy5 #main{
padding-top: 65px;
margin-bottom: 95px;
}
.joy5 #main h1{
text-align: center;
font-size: 0.61rem;
letter-spacing: 0.05em;
color: var(--ELITE-NBLUE);
margin-bottom: 0.15em;
}
.joy5 #main h2{
text-align: center;
font-size: 1.21rem;
letter-spacing: 0.05em;
color: #f7b249;
}
.joy5 #main h2 span{
display: inline-block;
padding: 0 1em;
background:
url(../img/joy5/joy5_tit_icon_l.svg) no-repeat bottom left/auto 80%,
url(../img/joy5/joy5_tit_icon_r.svg) no-repeat bottom right/auto 80%;
position: relative;
}
.joy5 #main h2 span::before,
.joy5 #main h2 span::after{
content: '';
display: block;
position: absolute;
}
.joy5 #main h2 span::before{
width: 84px;
height: 132px;
background: url(../img/joy5/joy5_eri.svg) no-repeat center center/contain;
top:45px;
left:15px;
}
.joy5 #main h2 span::after{
width: 61px;
height: 76px;
background: url(../img/joy5/joy5_hoshi.svg) no-repeat center center/contain;
top:15px;
right:-70px;
}
.joy5 section{
padding: 0 20px;
}
.joy5 section:nth-of-type(n+2){
margin-top: 80px;
}
.joy5 section .num{
text-align: center;
font-size: 1.1rem;
margin-bottom: 0.25em;
}
.joy5 #bloc01 .num{
background: url('data:image/svg+xml;utf8,') no-repeat bottom 10px center/auto 50%;
color:#f2447b;
}
.joy5 #bloc02 .num{
background: url('data:image/svg+xml;utf8,') no-repeat bottom 10px center/auto 50%;
color:#eb5e00;
}
.joy5 #bloc03 .num{
background: url('data:image/svg+xml;utf8,') no-repeat bottom 10px center/auto 50%;
color:#8f62a7;
}
.joy5 #bloc04 .num{
background: url('data:image/svg+xml;utf8,') no-repeat bottom 10px center/auto 50%;
color:#3cb166;
}
.joy5 #bloc05 .num{
background: url('data:image/svg+xml;utf8,') no-repeat bottom 10px center/auto 50%;
color:#1a8ed8;
}
.joy5 section h2{
text-align: center;
font-size: 0.44rem;
line-height: 1.6;
letter-spacing: 0.05em;
margin-bottom: 50px;
}
.joy5 #bloc01 h2{color:#f2447b;}
.joy5 #bloc02 h2{color:#eb5e00;}
.joy5 #bloc03 h2{color:#8f62a7;}
.joy5 #bloc04 h2{color:#3cb166; margin-bottom: 0;}
.joy5 #bloc05 h2{color:#1a8ed8;}
.joy5 section h2 span.bb{
display: inline-block;
position: relative;
padding: 0 0.25em;
}
.joy5 section h2 span.bb.nopd{
padding: 0 0;
}
.joy5 section h2 span.bb::before{
content: '';
display: block;
position: absolute;
bottom:0.1em;
left:0;
width: 100%;
height: 24%;
background: #d1edf5;
isolation: isolate;
-webkit-border-radius: 9999px;
border-radius: 9999px;
z-index: -1;
}
.joy5 section h2 span.bb.nopd::before{
left:0.3em;
width:calc(100% - 0.6em);
}
.joy5 section h2 span.bb.nopd_r::before{width:calc(100% - 0.5em);}
.joy5 section h2 span.bb.nopd_l::before{width:calc(100% - 0.5em);left:0.5em;}
.joy5 #bloc01 h2 span.bb::before{background:#ffcfde;}
.joy5 #bloc02 h2 span.bb::before{background:#ffd4b7;}
.joy5 #bloc03 h2 span.bb::before{background:#e5d8ec;}
.joy5 #bloc04 h2 span.bb::before{background:#d4ecdd;}
.joy5 #bloc05 h2 span.bb::before{background:#d1e9f9;}
.joy5 section .pic{
margin-left: auto;
margin-right: auto;
}
.joy5 #bloc01 .pic{aspect-ratio: 731/470;max-width: 731px;}
.joy5 #bloc02 .pic{aspect-ratio: 752/442;max-width: 752px;}
.joy5 #bloc03 .pic{aspect-ratio: 742/451;max-width: 742px;}
.joy5 #bloc04 .pic{aspect-ratio: 738/530;max-width: 738px;}
.joy5 #bloc05 .pic{aspect-ratio: 840/451;max-width: 840px;}
.joy5 section h3{
text-align: center;
font-size: 0.36rem;
letter-spacing: 0.05em;
margin-top: 1.5em;
}
.joy5 section .txt{
max-width: 690px;
margin-left: auto;
margin-right: auto;
font-size: 0.17rem;
line-height: 1.9;
letter-spacing: 0.05em;
margin-top: 2em;
}
.joy5 .bgArea{
background: #6ed3e0;
padding: 95px 20px 25px;
margin-top: 90px;
}
.joy5 .bgArea > .inner{
max-width: 715px;
margin-left: auto;
margin-right: auto;
}
.joy5 .bgArea .txt{
text-align: center;
font-size: 0.17rem;
line-height: 1.9;
letter-spacing: 0.025em;
}
.joy5 .bgArea h2{
text-align: center;
font-size: 0.28rem;
line-height: 1.7;
color: var(--ELITE-NBLUE);
margin:1em 0 1.25em;
letter-spacing: 0.05em;
}
.joy5 .bgArea .pic06{
text-align: right;
margin-top: 40px;
}
.joy5 .bgArea .pic06 img{
width: 395px;
height: auto;
}
/*=============================
workstyle
=============================*/
.workstyle #main{
padding-top: 85px;
padding-bottom: 285px;
position: relative;
}
.workstyle #main h1{
text-align: center;
font-size: 0.61rem;
letter-spacing: 0.05em;
color: var(--ELITE-NBLUE);
margin-bottom: 0.75em;
}
.workstyle #main h1 span.color{
color: #f7b249;
}
.workstyle #main h2{
text-align: center;
font-size: 0.51rem;
letter-spacing: 0.05em;
color: var(--ELITE-NBLUE);
}
.workstyle #main > img{
position: absolute;
bottom:-20px;
}
.workstyle #main > img.tree01{
width: 84px;
height: auto;
left:calc(50% - 500px);
}
.workstyle #main > img.tree02{
width: 117px;
height: auto;
left:calc(50% + 345px);
}
.workstyle #main > img.tree03{
width: 171px;
height: auto;
left:calc(50% + 500px);
bottom:-55px;
}
.workstyle #main > img.mise{
width: 221px;
height: auto;
left:calc(50% - 380px);
}
.workstyle #main > img.onpu{
width: 116px;
height: auto;
left:calc(50% - 380px);
bottom:150px;
}
.workstyle #main > img.biru{
width: 150px;
height: auto;
left:calc(50% + 150px);
bottom:-35px;
}
.workstyle #main > img.sun{
width: 100px;
height: auto;
left:calc(50% + 85px);
bottom:150px;
}
.workstyle #main > img.tokei{
width: 281px;
height: auto;
left:calc(50% - 140px);
bottom:-120px;
}
.workstyle #main > img.eri{
width: 100px;
height: auto;
right:calc(50% + 75px);
bottom: 50px;
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
opacity: 0;
}
.workstyle #main.showBloc > img.eri{
animation: workstyleFVAni01 0.5s cubic-bezier(0.175, 0.885, 0.260, 1.555) 1s 1 normal both;
}
@-webkit-keyframes workstyleFVAni01 {
0% {
opacity: 0;
-webkit-transform: rotate(-30deg) translate(50%,50%);
transform: rotate(-30deg) translate(50%,50%);
}
1%{
opacity: 1;
-webkit-transform: rotate(-30deg) translate(50%,50%);
transform: rotate(-30deg) translate(50%,50%);
}
100% {
opacity: 1;
-webkit-transform: rotate(-30deg) translate(0%,0%);
transform: rotate(-30deg) translate(0%,0%);
}
}
@keyframes workstyleFVAni01 {
0% {
opacity: 0;
-webkit-transform: rotate(-30deg) translate(50%,50%);
transform: rotate(-30deg) translate(50%,50%);
}
1%{
opacity: 1;
-webkit-transform: rotate(-30deg) translate(50%,50%);
transform: rotate(-30deg) translate(50%,50%);
}
100% {
opacity: 1;
-webkit-transform: rotate(-30deg) translate(0%,0%);
transform: rotate(-30deg) translate(0%,0%);
}
}
.workstyle #main > img.ph02{
width: 94px;
height: auto;
right:50%;
bottom:15px;
margin-bottom: -100px;
opacity: 0;
}
.workstyle #main.showBloc > img.ph02{
animation: workstyleFVAni02 0.5s cubic-bezier(0.175, 0.885, 0.260, 1.555) 1s 1 normal both;
}
@-webkit-keyframes workstyleFVAni02 {
0% {
opacity: 0;
margin-bottom: -100px;
}
1%{
opacity: 1;
margin-bottom: -100px;
}
100% {
opacity: 1;
margin-bottom: 0px;
}
}
@keyframes workstyleFVAni02 {
0% {
opacity: 0;
margin-bottom: -100px;
}
1%{
opacity: 1;
margin-bottom: -100px;
}
100% {
opacity: 1;
margin-bottom: 0px;
}
}
.workstyle #main .ph01{
position: absolute;
width: 180px;
height: 342px;
left:calc(50% + 160px);
bottom:-185px;
}
/*bloc01
=============================*/
.workstyle #bloc01 {
padding: 195px 20px 100px;
background: #ffa800;
}
.workstyle #bloc01 > .inner{
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.workstyle #bloc01 .txt01{
text-align: center;
font-size: 0.18rem;
line-height: 1.8;
letter-spacing: 0.025em;
}
.workstyle #bloc01 ul.list {margin-top: 70px;}
.workstyle #bloc01 ul.list > li{
background: #FFF;
padding: 40px;
isolation: isolate;
-webkit-border-radius: 5px;
border-radius: 5px;
position: relative;
box-shadow: 10px 10px 0px 0px rgba(0,0,0,0.15);
}
.workstyle #bloc01 ul.list > li:nth-child(n+2){
margin-top: 130px;
}
@media screen and (max-width: 1040px) {
.workstyle #bloc01 ul.list > li:nth-child(n+2){
margin-top: calc((130 / 1040) * 100vw);
}
}
.workstyle #bloc01 ul.list > li h3{
font-size: 0.38rem;
letter-spacing: 0.05em;
line-height: 1.25;
margin-bottom: 1em;
}
.workstyle #bloc01 .picArea{
position: absolute;
top:0;
right:0;
width: 36.7%;
height: 100%;
}
.workstyle #bloc01 .picArea .ph{
position: absolute;
}
.workstyle #bloc01 .picArea .ph img{
width: 100%;
height: auto;
}
.workstyle #bloc01 .picArea .ph .txt{
position: absolute;
font-size: 0.16rem;
letter-spacing: 0.05em;
white-space: nowrap;
}
.workstyle #bloc01 .picArea .ph .txt::before,
.workstyle #bloc01 .picArea .ph .txt::after{
content: '';
display: block;
width: 1px;
height: 300%;
position: absolute;
}
.workstyle #bloc01 .picArea .ph .txt::before{left:0; border-left: 2px dotted var(--ELITE-BLACK);}
.workstyle #bloc01 .picArea .ph .txt::after {right:0; border-right: 2px dotted var(--ELITE-BLACK);}
.workstyle #bloc01 ul.list > li.list01 .picArea .ph .txt{
top: -70px;
left:50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.workstyle #bloc01 ul.list > li.list01 .picArea .ph .txt::before{
top:-10px;
left:-56px;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.workstyle #bloc01 ul.list > li.list01 .picArea .ph .txt::after {
top:-32px;
right:-38px;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
.workstyle #bloc01 ul.list > li.list02 .picArea .ph .txt{top: -75px;left:-40px;}
.workstyle #bloc01 ul.list > li.list02 .picArea .ph .txt::before{
height: 600%;
top:-10px;
left:-40px;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
.workstyle #bloc01 ul.list > li.list02 .picArea .ph .txt::after {
height: 600%;
top:-60px;
right:-25px;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
.workstyle #bloc01 ul.list > li.list03 .picArea .ph .txt{top: -50px; left:100%;}
.workstyle #bloc01 ul.list > li.list03 .picArea .ph .txt::before{
height: 350%;
top:-30px;
left:-30px;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.workstyle #bloc01 ul.list > li.list03 .picArea .ph .txt::after {
height: 350%;
top:100%;
right:-35px;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.workstyle #bloc01 ul.list > li.list04 .picArea .ph .txt{top: -65px; left:calc(100% - 25px);}
.workstyle #bloc01 ul.list > li.list04 .picArea .ph .txt::before{
height: 220%;
top:-20px;
left:-5px;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.workstyle #bloc01 ul.list > li.list04 .picArea .ph .txt::after {
height: 300%;
top:calc(100% + 15px);
right: 0;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: rotate(80deg);
transform: rotate(80deg);
}
.workstyle #bloc01 ul.list > li.list01 .picArea .ph{
width: 152px;
height: 500px;
bottom: -90px;
left: 22px;
}
.workstyle #bloc01 ul.list > li.list02 .picArea .ph{
width: 141px;
height: 465px;
bottom: -112px;
left: 57px;
}
.workstyle #bloc01 ul.list > li.list03 .picArea .ph{
width: 125px;
height: 477px;
bottom: -40px;
left: 25px;
}
.workstyle #bloc01 ul.list > li.list04 .picArea .ph{
width: 146px;
height: 487px;
bottom: -90px;
left: 50px;
}
@media screen and (max-width: 1040px) {
.workstyle #bloc01 ul.list > li.list01 .picArea .ph{
width: calc((152 / 1040) * 100vw);
height: calc((500 / 1040) * 100vw);
bottom:calc((-90 / 1040) * 100vw);
left: calc((22 / 1040) * 100vw);
}
.workstyle #bloc01 ul.list > li.list02 .picArea .ph{
width: calc((141 / 1040) * 100vw);
height: calc((465 / 1040) * 100vw);
bottom: calc((-112 / 1040) * 100vw);
left: calc((57 / 1040) * 100vw);
}
.workstyle #bloc01 ul.list > li.list03 .picArea .ph{
width: calc((125 / 1040) * 100vw);
height: calc((477 / 1040) * 100vw);
bottom: calc((-40 / 1040) * 100vw);
left: calc((25 / 1040) * 100vw);
}
.workstyle #bloc01 ul.list > li.list04 .picArea .ph{
width: calc((146 / 1040) * 100vw);
height: calc((487 / 1040) * 100vw);
bottom: calc((-90 / 1040) * 100vw);
left: calc((50 / 1040) * 100vw);
}
}
.workstyle #bloc01 .picArea .ph .data{
display: block;
position: absolute;
top:50%;
font-size: 0.16rem;
white-space: nowrap;
}
.workstyle #bloc01 ul.list > li.list01 .picArea .ph .data{left:calc(100% + 3em); margin-top: 1em;}
.workstyle #bloc01 ul.list > li.list02 .picArea .ph .data{left:100%; margin-top: -3em;}
.workstyle #bloc01 ul.list > li.list03 .picArea .ph .data{left:100%; margin-top: 3.5em;}
.workstyle #bloc01 ul.list > li.list04 .picArea .ph .data{left:calc(100% + 1em); margin-top: -2.5em;}
.workstyle #bloc01 .picArea .pic01{
position: absolute;
}
.workstyle #bloc01 ul.list > li.list01 .picArea .pic01{
top:-15px;
right:-20px;
width: 176px;
height: 350px;
}
.workstyle #bloc01 ul.list > li.list02 .picArea .pic01{
top:18px;
right:17px;
width: 185px;
height: 197px;
}
.workstyle #bloc01 ul.list > li.list03 .picArea .pic01{
top:130px;
right:-23px;
width: 210px;
height: 225px;
}
.workstyle #bloc01 ul.list > li.list04 .picArea .pic01{
top: 80px;
right:-25px;
width: 200px;
height: 130px;
}
@media screen and (max-width: 1040px) {
.workstyle #bloc01 ul.list > li.list01 .picArea .pic01{
top: calc((-15 / 1040) * 100vw);
right: calc((-20 / 1040) * 100vw);
width: calc((176 / 1040) * 100vw);
height: calc((350 / 1040) * 100vw);
}
.workstyle #bloc01 ul.list > li.list02 .picArea .pic01{
top: calc((18 / 1040) * 100vw);
right: calc((17 / 1040) * 100vw);
width: calc((185 / 1040) * 100vw);
height: calc((197 / 1040) * 100vw);
}
.workstyle #bloc01 ul.list > li.list03 .picArea .pic01{
top: calc((130 / 1040) * 100vw);
right: calc((-23 / 1040) * 100vw);
width: calc((210 / 1040) * 100vw);
height: calc((225 / 1040) * 100vw);
}
.workstyle #bloc01 ul.list > li.list04 .picArea .pic01{
top: calc((180 / 1040) * 100vw);
right: calc((-25 / 1040) * 100vw);
width: calc((200 / 1040) * 100vw);
height: calc((130 / 1040) * 100vw);
}
}
.workstyle #bloc01 .picArea .ie{
position: absolute;
bottom:-15px;
}
.workstyle #bloc01 ul.list > li.list01 .picArea .ie{
right:-35px;
width: 205px;
height: auto;
}
.workstyle #bloc01 ul.list > li.list02 .picArea .ie{
right:-45px;
width: 202px;
height: auto;
}
.workstyle #bloc01 ul.list > li.list03 .picArea .ie{
right: 25px;
width: 170px;
height: auto;
}
.workstyle #bloc01 ul.list > li.list04 .picArea .ie{
right: -35px;
width: 190px;
height: auto;
}
.workstyle #bloc01 .schArea{
width: 64%;
/*height:auto;*/
background: #fdfcde;
position: relative;
padding: 20px;
}
.workstyle #bloc01 .schArea h4{
position: absolute;
top:-0.65em;
left:20px;
font-size: 0.26rem;
letter-spacing: 0.05em;
color: #eb5c16;
}
.workstyle #bloc01 .schArea ul.shift{
position: absolute;
top:-20px;
right:30px;
z-index: 10;
}
.workstyle #bloc01 .list02 .schArea ul.shift{right:-45px;}
.workstyle #bloc01 .schArea ul.shift li{
width: 90px;
height: 90px;
isolation: isolate;
-webkit-border-radius: 9999px;
border-radius: 9999px;
color: #FFF;
}
.workstyle #bloc01 .schArea ul.shift li > p{
text-align: center;
}
.workstyle #bloc01 .schArea ul.shift li.wday{
background: #005bac;
font-size: 0.3rem;
line-height: 0.75;
}
.workstyle #bloc01 .schArea ul.shift li.wday .fl{
font-size: 0.55rem;
line-height: 0.5;
margin-left: 0.05em;
}
.workstyle #bloc01 .schArea ul.shift li.wday .fm{
font-size: 0.33rem;
line-height: 0.5;
}
.workstyle #bloc01 .schArea ul.shift li.wday .fs{
font-size: 0.22rem;
line-height: 0.5;
}
.workstyle #bloc01 .schArea ul.shift li.wtime{
background: #eb5c16;
margin-left: 10px;
font-size: 0.2rem;
}
.workstyle #bloc01 .schArea ul.shift li.wtime .fl{
font-size: 0.3rem;
line-height: 0.75;
}
.workstyle #bloc01 .timeSch > div{
position: relative;
}
.workstyle #bloc01 .timeSch > div .day{
position: absolute;
left:10px;
top:0;
-webkit-transform: translateY(calc(-50% - 2px));
transform: translateY(calc(-50% - 2px));
padding: 0.2em 0.65em 0.25em 0.75em;
isolation: isolate;
-webkit-border-radius: 9999px;
border-radius: 9999px;
color: #FFF;
font-size: 0.18rem;
letter-spacing: 0.025em;
}
.workstyle #bloc01 .timeSch > div .day.weekdays{background: #3e8fce;}
.workstyle #bloc01 .timeSch > div .day.holiday {background: #e25655;}
.workstyle #bloc01 .timeSch.flex{
padding-top: 12px;
justify-content: space-between;
}
.workstyle #bloc01 .timeSch.flex > div{width: calc(50% - 2px);}
.workstyle #bloc01 .timeSch ul.flex{
flex-direction: column;
}
.workstyle #bloc01 li.list02 .timeSch ul.flex{height: 250px}
.workstyle #bloc01 li.list03 .timeSch ul.flex{height: 290px}
.workstyle #bloc01 li.list04 .timeSch ul.flex{height: 260px}
.workstyle #bloc01 .timeSch ul.flex li{flex-basis: auto;}
.workstyle #bloc01 .timeSch ul.flex li.h20{flex-basis: 20%}
.workstyle #bloc01 .timeSch ul.flex li.h25{flex-basis: 25%}
.workstyle #bloc01 .timeSch ul.flex li.h30{flex-basis: 30%}
.workstyle #bloc01 .timeSch ul.flex li.h35{flex-basis: 35%}
.workstyle #bloc01 .timeSch ul.flex li.h40{flex-basis: 40%}
.workstyle #bloc01 .timeSch ul.flex li.h45{flex-basis: 45%}
.workstyle #bloc01 .timeSch ul.flex li.flex > div{width: 50%;}
.workstyle #bloc01 .timeSch ul.flex li div.bgBlue01{
background-size: auto auto;
background-color: rgba(205, 236, 255, 1);
background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(255, 255, 255, 0.2) 4px, rgba(255, 255, 255, 0.2) 6px );
}
.workstyle #bloc01 .timeSch ul.flex li div.bgBlue02{
background-size: auto auto;
background-color: rgba(237, 247, 254, 1);
background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(255, 255, 255, 0.2) 4px, rgba(255, 255, 255, 0.2) 6px );
}
.workstyle #bloc01 .timeSch ul.flex li div.bgOr{
background-size: auto auto;
background-color: rgba(255, 226, 182, 1);
background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(255, 255, 255, 0.2) 4px, rgba(255, 255, 255, 0.2) 6px );
}
.workstyle #bloc01 .timeSch ul.flex li div.inner{
padding: 10px 15px 12px;
height: 100%;
}
.workstyle #bloc01 .timeSch.flex ul.flex li:first-child div.inner{
padding: 15px;
}
.workstyle #bloc01 .timeSch ul.flex li div.inner .time{
font-size: 0.24rem;
letter-spacing: 0.025em;
}
.workstyle #bloc01 .timeSch ul.flex li div.bgBlue01 .time,
.workstyle #bloc01 .timeSch ul.flex li div.bgBlue02 .time{color:#62b2e5;}
.workstyle #bloc01 .timeSch ul.flex li div.bgOr .time {color:#eb5c16;}
.workstyle #bloc01 .timeSch ul.flex li div.inner .time .fs{font-size: 0.16rem;}
.workstyle #bloc01 .timeSch ul.flex li .txt {
font-size: 0.18rem;
letter-spacing: 0.025em;
margin-top: 0.35em;
}
.workstyle #bloc01 .workArea {
background: #FFF;
padding: 55px 15.5% 90px;
isolation: isolate;
-webkit-border-radius: 5px;
border-radius: 5px;
margin-top: 180px;
}
.workstyle #bloc01 .workArea h2{
text-align: center;
font-size: 0.36rem;
line-height: 1.45;
letter-spacing: 0.05em;
color: var(--ELITE-NBLUE);
margin-bottom: 1em;
}
.workstyle #bloc01 .workArea h3{
text-align: center;
margin-bottom: 2.5em;
}
.workstyle #bloc01 .workArea h3 span{
display: inline-block;
font-size: 0.21rem;
letter-spacing: 0.05em;
color: #FFF;
padding: 0.5em 1.5em 0.5em 2em;
background: #469fdb;
isolation: isolate;
-webkit-border-radius: 9999px;
border-radius: 9999px;
position: relative;
}
.workstyle #bloc01 .workArea h3 span::before{
content: '';
display: block;
position: absolute;
top:calc(100% - 6px);
left:calc(50% - 11px);
width:0;
height:0;
border-style:solid;
border-width: 15px 11px 0 11px;
border-color: #469FDB transparent transparent transparent;
}
.workstyle #bloc01 .workArea > .txt{
padding: 0 8%;
font-size: 0.17rem;
line-height: 1.9;
letter-spacing: 0.025em;
}
.workstyle #bloc01 .workArea > .flex{
margin-top: 25px;
}
.workstyle #bloc01 .workArea > .flex > li{
flex-basis: 33.33%;
flex-direction: column;
}
.workstyle #bloc01 .workArea > .flex > li > *{
}
.workstyle #bloc01 .workArea > .flex > li > h4{flex-basis: 80px;}
.workstyle #bloc01 .workArea > .flex > li > ul.flex{flex-basis: 290px;}
.workstyle #bloc01 .workArea > .flex > li > ul.flex{
flex-direction: column;
}
.workstyle #bloc01 .workArea > .flex > li > ul.flex .pic{
text-align: center;
}
.workstyle #bloc01 .workArea > .flex > li > ul.flex .pic img{
height: 175px;
width: auto;
}
.workstyle #bloc01 .workArea > .flex > li > h4{
text-align: center;
font-size: 0.2rem;
line-height: 1.25;
letter-spacing: 0.05em;
position: relative;
}
.workstyle #bloc01 .workArea > .flex > li.list01 > h4.flex{flex-direction: column;}
.workstyle #bloc01 .workArea > .flex > li.list01 > h4{justify-content: flex-end;}
.workstyle #bloc01 .workArea > .flex > li.list02 > h4{justify-content: center;}
.workstyle #bloc01 .workArea > .flex > li > h4 .fs{
font-size: 0.16rem;
white-space: nowrap;
position: absolute;
top:1.75em;
left:50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.workstyle #bloc01 .workArea > .flex > li > .flex{
flex-direction: column;
justify-content: flex-end;
}
.workstyle #bloc01 .workArea > .flex > li.list01 > .flex .graph{flex-basis: 50px;background: #fff2bf;}
.workstyle #bloc01 .workArea > .flex > li.list02 > .flex .graph{flex-basis: 80px;background: #ffea9a;}
.workstyle #bloc01 .workArea > .flex > li.list03 > .flex .graph{flex-basis: 110px;background: #ffe069;}
.workstyle #bloc01 .workArea > .pc_flex > li{width: 33.33%;}
.workstyle #bloc01 .workArea > .pc_flex > li > .txt{
font-size: 0.15rem;
line-height: 1.65;
letter-spacing: 0.025em;
padding: 0.75em 0.5em 0 0.75em;
}
.workstyle #bloc02{
background: #faf8ed;
padding: 135px 20px 90px;
}
.workstyle #bloc02 > .inner{
max-width: 940px;
margin-left: auto;
margin-right: auto;
}
.workstyle #bloc02 ul.list > li:nth-child(n+2){margin-top: 80px;}
.workstyle #bloc02 ul.list > li .titArea{
justify-content: space-between;
align-items: flex-end;
margin-bottom: 65px;
}
.workstyle #bloc02 ul.list > li:nth-child(even) .titArea{
flex-direction: row-reverse;
}
.workstyle #bloc02 ul.list > li .titArea .txtArea{
width: 65%;
}
.workstyle #bloc02 ul.list > li .titArea .txtArea .num{
font-size: 0.75rem;
margin-bottom: 0.5em;
}
.workstyle #bloc02 ul.list > li .titArea .txtArea h3{
font-size: 0.38rem;
letter-spacing: 0.05em;
position: relative;
z-index: 10;
}
.workstyle #bloc02 ul.list > li:nth-child(even) .titArea .txtArea h3{text-align: right; margin-bottom: 0.75em;}
.workstyle #bloc02 ul.list > li .titArea .txtArea h3 span.bb{
display: inline-block;
padding-left: 0.2em;
position: relative;
padding-bottom: 0.2em;
position: relative;
}
.workstyle #bloc02 ul.list > li .titArea .txtArea h3 span.bb:nth-of-type(n+2){
margin-top: 0.5em;
}
.workstyle #bloc02 ul.list > li .titArea .txtArea h3 span.bb::before{
content: '';
display: block;
position: absolute;
bottom:0;
left:0;
width: 100%;
height: 10px;
isolation: isolate;
-webkit-border-radius: 9999px;
border-radius: 9999px;
z-index: -1;
}
.workstyle #bloc02 ul.list > li:nth-child(odd) .titArea .txtArea h3 span.bb::before {background: #f5b3ae;}
.workstyle #bloc02 ul.list > li:nth-child(even) .titArea .txtArea h3 span.bb::before{background: #c1e39b;}
.workstyle #bloc02 ul.list > li:nth-child(odd) .titArea .txtArea .num {color: #ed5b50;}
.workstyle #bloc02 ul.list > li:nth-child(even) .titArea .txtArea .num{color: #7bc742;text-align: right;}
.workstyle #bloc02 ul.list > li .titArea .phArea{
width: 35%;
position: relative;
}
.workstyle #bloc02 ul.list > li .titArea .phArea .comment{
position: absolute;
top:35px;
z-index: 2;
}
.workstyle #bloc02 ul.list > li:nth-child(odd) .titArea .phArea .comment {right: 270px;}
.workstyle #bloc02 ul.list > li:nth-child(even) .titArea .phArea .comment{left: 270px;}
.workstyle #bloc02 ul.list > li .titArea .phArea .thum{
width: 100%;
aspect-ratio: 1/1;
isolation: isolate;
-webkit-border-radius: 9999px;
border-radius: 9999px;
overflow: hidden;
}
.workstyle #bloc02 ul.list > li ul.detail{padding-left: 2.65%;}
.workstyle #bloc02 ul.list > li ul.detail > li{
justify-content: space-between;
align-items: flex-start;
}
.workstyle #bloc02 ul.list > li ul.detail > li:nth-child(n+2){margin-top: 50px;}
.workstyle #bloc02 ul.list > li:nth-child(odd) ul.detail li:nth-child(even),
.workstyle #bloc02 ul.list > li:nth-child(even) ul.detail li:nth-child(odd){
flex-direction: row-reverse;
}
.workstyle #bloc02 ul.list > li ul.detail li .ph{
width: 43.7%;
aspect-ratio: 400/280;
isolation: isolate;
-webkit-border-radius: 10px;
border-radius: 10px;
overflow: hidden;
}
.workstyle #bloc02 ul.list > li ul.detail li .txt{
width: 48.6%;
font-size: 0.17rem;
line-height: 1.9;
}
.workstyle #bloc02 ul.list > li:nth-child(odd) ul.detail li:nth-child(odd) .txt{margin-top: 5%;}
.workstyle #bloc02 ul.list > li:nth-child(odd) ul.detail li:nth-child(even) .ph{margin-top: 5.5%;}
.workstyle #bloc02 ul.list > li:nth-child(even) ul.detail li:nth-child(even) .txt{margin-top: 5%;}
.workstyle #bloc02 ul.list > li:nth-child(even) ul.detail li:nth-child(odd) .ph{margin-top: 5.5%;}
/*=============================
career
=============================*/
.career #main{
padding-top: 70px;
padding-bottom: 165px;
position: relative;
}
.career #main h1{
text-align: center;
font-size: 0.52rem;
line-height: 1.46;
letter-spacing: 0.05em;
color: var(--ELITE-NBLUE);
margin-bottom: 1.5em;
}
.career #main h1 span.color{
color: #f7b24d;
}
.career #main h2{
text-align: center;
font-size: 0.31rem;
line-height: 1.65;
letter-spacing: 0.05em;
color: var(--ELITE-BLACK);
}
.career #main h2 span{
display: inline-block;
position: relative;
}
.career #main h2 span::before,
.career #main h2 span::after{
content: '';
display: block;
width: 1px;
height: 130%;
position: absolute;
top:0%;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.career #main h2 span::before{
left:-75px;
border-left: 4px dotted var(--ELITE-BLACK);
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.career #main h2 span::after {
right:-75px;
border-right: 4px dotted var(--ELITE-BLACK);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.career #main > img{
position: absolute;
bottom:-20px;
}
.career #main > img.tree01{width: 80px; height: auto; left:calc(50% - 560px);}
.career #main > img.tree02{width: 85px; height: auto; left:calc(50% - 425px);}
.career #main > img.tree03{width: 80px; height: auto; left:calc(50% - 155px);}
.career #main > img.tree04{width: 113px; height: auto; left:calc(50% + 340px); bottom:-30px;}
.career #main > img.tree05{width: 85px; height: auto; left:calc(50% + 495px); bottom:-45px;}
.career #main > img.kikyu01{width: 65px; height: auto; bottom:200px; left:calc(50% - 435px);}
.career #main > img.tori{width: 31px; height: auto; bottom:105px; left:calc(50% + 360px);}
.career #main > img.sun{width: 125px; height: auto; bottom:160px; left:calc(50% + 350px);}
.career #main > img.car{width: 150px; height: auto; bottom:-180px; left:calc(50% + 420px);}
.career #main .ie01{
position: absolute;
bottom:-140px;
left:calc(50% - 340px);
width: 680px;
height: 250px;
}
.career #contents {
background: #8ebbe2;
padding: 195px 0 90px;
}
/*bloc01
=============================*/
.career #bloc01 {
padding: 0 20px;
margin-bottom: 95px;
}
.career #bloc01 > .txt01{
text-align: center;
font-size: 0.18rem;
line-height: 1.75;
margin-bottom: 60px;
}
.career #bloc01 > .inner{
max-width: 1000px;
margin-left: auto;
margin-right: auto;
background: #FFF;
padding: 55px 55px 80px;
isolation: isolate;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.career #bloc01 > .inner > h2{
text-align: center;
font-size: 0.36rem;
letter-spacing: 0.05em;
color: var(--ELITE-NBLUE);
margin-bottom: 1em;
}
.career #bloc01 .workList h3{
text-align: center;
margin-bottom: 3.5em;
}
.career #bloc01 .workList h3 span{
display: inline-block;
font-size: 0.21rem;
letter-spacing: 0.05em;
color: #FFF;
padding: 0.5em 1.5em 0.5em 2em;
background: #e14952;
isolation: isolate;
-webkit-border-radius: 9999px;
border-radius: 9999px;
position: relative;
}
.career #bloc01 .workList h3 span::before{
content: '';
display: block;
position: absolute;
top:calc(100% - 6px);
left:calc(50% - 11px);
width:0;
height:0;
border-style:solid;
border-width: 15px 11px 0 11px;
border-color: #e14952 transparent transparent transparent;
}
.career #bloc01 .workList .list01 h3 span {background: #fd8300;}
.career #bloc01 .workList .list01 h3 span::before{border-color: #fd8300 transparent transparent transparent;}
.career #bloc01 .workList .list02 h3 span {background: #e14952;}
.career #bloc01 .workList .list02 h3 span::before{border-color: #e14952 transparent transparent transparent;}
.career #bloc01 .workList > li .txt01{
max-width: 600px;
margin-left: auto;
margin-right: auto;
font-size: 0.17rem;
line-height: 1.9;
}
.career #bloc01 .workList .ippanList{
max-width: 670px;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
justify-content: space-between;
}
.career #bloc01 .workList .ippanList > li{
flex-basis: 30%;
flex-direction: column;
}
.career #bloc01 .workList .ippanList > li > *{
}
.career #bloc01 .workList .ippanList > li > h4 {flex-basis: 150px;}
.career #bloc01 .workList .ippanList > li > .pic{flex-basis: 180px; text-align: center;}
.career #bloc01 .workList .ippanList > li > .txt{flex-basis: 205px;}
.career #bloc01 .workList .ippanList > li > .pic img{
height: 146px;
width: auto;
}
.career #bloc01 .workList .ippanList > li > h4{
text-align: center;
font-size: 0.2rem;
line-height: 1.5;
letter-spacing: 0.05em;
position: relative;
}
.career #bloc01 .workList .ippanList > li > .txt{
font-size: 0.15rem;
line-height: 1.85;
letter-spacing: 0.025em;
}
.career #bloc01 .workList .voiceList{margin-top: 60px;}
.career #bloc01 .workList .voiceList > li{
justify-content: space-between;
align-items: center;
}
.career #bloc01 .workList .voiceList > li:nth-child(n+2){
margin-top: 45px;
}
.career #bloc01 .workList .voiceList > li:nth-child(even){
flex-direction: row-reverse;
}
.career #bloc01 .workList .voiceList > li .ph{
width: 250px;
height: 260px;
isolation: isolate;
-webkit-border-radius: 6px;
border-radius: 6px;
overflow: hidden;
}
.career #bloc01 .workList .voiceList > li .txtArea{
width: 66%;
}
.career #bloc01 .workList .voiceList > li .txtArea .name{
font-size: 0.2rem;
letter-spacing: 0.05em;
color: #fd8300;
margin-bottom: 1em;
}
.career #bloc01 .workList .voiceList > li .txtArea .txt{
font-size: 0.17rem;
line-height: 1.9;
letter-spacing: 0.05em;
}
.career #bloc01 .workList > li.list02{margin-top: 75px;}
.career #bloc01 .workList > li.list02 .sougouList,
.career #bloc01 .workList > li.list02 .sougouList_txt{
max-width: 690px;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
}
.career #bloc01 .workList > li.list02 .sougouList > li{
flex-basis: 33.33%;
flex-direction: column;
}
.career #bloc01 .workList > li.list02 .sougouList > li.list01 > h4 {flex-basis: 75px;}
.career #bloc01 .workList > li.list02 .sougouList > li.list01 > ul.flex{flex-basis: 260px;}
.career #bloc01 .workList > li.list02 .sougouList > li.list02 > h4 {flex-basis: 50px;}
.career #bloc01 .workList > li.list02 .sougouList > li.list02 > ul.flex{flex-basis: 285px;}
.career #bloc01 .workList > li.list02 .sougouList > li.list03 > h4 {flex-basis: 50px;}
.career #bloc01 .workList > li.list02 .sougouList > li.list03 > ul.flex{flex-basis: 285px;}
.career #bloc01 .workList > li.list02 .sougouList_txt{margin-top: 0;}
.career #bloc01 .workList > li.list02 .sougouList_txt > li{width: 33.33%;}
.career #bloc01 .workList > li.list02 .sougouList_txt > li > .txt{
font-size: 0.15rem;
line-height: 1.65;
letter-spacing: 0.025em;
padding: 0.75em 0.5em 0 0.75em;
}
.career #bloc01 .workList > li.list02 .sougouList > li > ul.flex{
flex-direction: column;
}
.career #bloc01 .workList > li.list02 .sougouList > li > ul.flex .pic{
text-align: center;
}
.career #bloc01 .workList > li.list02 .sougouList > li > ul.flex .pic img{
height: 175px;
width: auto;
}
.career #bloc01 .workList > li.list02 .sougouList > li > h4{
text-align: center;
font-size: 0.2rem;
line-height: 1.25;
letter-spacing: 0.05em;
position: relative;
flex-direction: column;
justify-content: flex-end;
}
.career #bloc01 .workList > li.list02 .sougouList > li.list03 > h4{justify-content: flex-start;}
.career #bloc01 .workList > li.list02 .sougouList > li > h4 .fs{
font-size: 0.16rem;
white-space: nowrap;
position: absolute;
top:1.75em;
left:50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.career #bloc01 .workList > li.list02 .sougouList > li > ul.flex{
flex-direction: column;
justify-content: flex-end;
}
.career #bloc01 .workList > li.list02 .sougouList > li.list01 > .flex .graph{flex-basis: 50px;background: #fadfe0;}
.career #bloc01 .workList > li.list02 .sougouList > li.list02 > .flex .graph{flex-basis: 80px;background: #fdcacc;}
.career #bloc01 .workList > li.list02 .sougouList > li.list03 > .flex .graph{flex-basis: 110px;background: #ffafb2;}
/*bloc02
=============================*/
.career .interView {
padding: 0 20px;
margin-top: 160px;
}
.career .interView > .inner{
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.career .interView .titArea{
position: relative;
margin-bottom: 110px;
}
.career #bloc03 ul.titList{margin-left: -10%;}
.career .interView ul.titList li{
font-size: 0.38rem;
letter-spacing: 0.05em;
padding: 4px;
}
.career .interView ul.titList li:nth-child(n+2){margin-top: -20px;}
.career .interView ul.titList li span{
display: inline-block;
background: #FBED21;
padding: 0.5em 0.5em 0.5em 1em;
isolation: isolate;
-webkit-border-radius: 9999px;
border-radius: 9999px;
}
.career #bloc02 ul.titList li:nth-child(2) span{padding: 0.5em 0.5em 0.5em 0.5em;}
.career #bloc02 ul.titList li:nth-child(2){padding-left: 1em;}
.career #bloc02 ul.titList li:nth-child(3){padding-left: 2em;}
.career #bloc03 ul.titList li:nth-child(2){padding-left: 1.5em;}
.career #bloc03 ul.titList li:nth-child(3){padding-left: 2.5em;}
.career .interView .titArea .pic01{position: absolute;}
.career .interView .titArea .pic01 img{width: 100%;height: auto;}
.career #bloc02 .titArea .pic01{
right:40px;
top:-65px;
width: 290px;
padding-top: calc((468 / 1000) * 100%);
}
.career #bloc03 .titArea .pic01{
right:40px;
top:-115px;
width: 455px;
padding-top: calc((507 / 1000) * 100%);
}
.career .interView .titArea .pic01 .name{
position: absolute;
font-size: 0.16rem;
letter-spacing: 0.05em;
display: inline-block;
}
.career #bloc02 .titArea .pic01 .name{left:25px; bottom:15px;}
.career #bloc03 .titArea .pic01 .name{left:175px; bottom:0px;}
.career .interView .titArea .pic01 .name .fzen_b{
display: inline-block;
font-size: 0.2rem;
margin-top: 0.5em;
}
.career .interView .titArea .pic01 .name .data{
display: inline-block;
margin-top: 0.5em;
}
.career .interView ul.detail li{
position: relative;
align-items: flex-start;
}
.career .interView ul.detail li:nth-child(n+2){margin-top: 60px;}
.career .interView ul.detail li:nth-child(odd){
padding-right: 25px;
}
.career .interView ul.detail li:nth-child(even){
padding-left: 25px;
flex-direction: row-reverse;
}
.career .interView ul.detail li .ph{
width: 45%;
aspect-ratio: 450/330;
position: relative;
}
.career .interView ul.detail li .ph::before{
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top:10px;
left:10px;
z-index: 0;
isolation: isolate;
-webkit-border-radius: 8px;
border-radius: 8px;
background-size: auto auto;
background-color: rgba(255, 239, 138, 1);
background-image: repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(255, 255, 255, 1) 3px, rgba(255, 255, 255, 1) 5px );
}
.career .interView ul.detail li .ph span{
position: relative;
z-index: 1;
display: block;
width: 100%;
height: 100%;
isolation: isolate;
-webkit-border-radius: 8px;
border-radius: 8px;
overflow: hidden;
}
.career .interView ul.detail li .txt{
width: 54%;
padding: 40px;
font-size: 0.17rem;
line-height: 1.9;
letter-spacing: 0.025em;
background: #FFF;
position: relative;
z-index: 1;
isolation: isolate;
-webkit-border-radius: 14px;
border-radius: 14px;
}
.career .interView ul.detail li:nth-child(odd) .txt {left:-30px; margin-top: 105px;}
.career .interView ul.detail li:nth-child(even) .txt{left: 30px; margin-top: 85px;}
.career .interView ul.detail li > img{position: absolute;z-index: 10;}
.career #bloc02 img.tree06{width: 85px;height: auto;top:255px;left:70px;}
.career #bloc02 img.ie01{width: 145px;height: auto;top:300px;left:185px;}
.career #bloc02 img.tree07{width: 115px;height: auto;top:315px;right:-30px;}
.career #bloc02 img.kumo{width: 110px;height: auto;top:-40px;left:405px;}
.career #bloc02 img.tree08{width: 132px;height: auto;top:315px;left:-50px;}
.career #bloc02 img.ie02{width: 175px;height: auto;top:235px;right:130px;}
.career #bloc02 img.tree05{width: 120px;height: auto;top:225px;right:-25px;}
.career #bloc03 img.tree07{width: 115px;height: auto;top:175px;left:-95px;}
.career #bloc03 img.ie03{width: 375px;height: auto;top:305px;left:15px;}
.career #bloc03 img.kikyu02{width: 75px;height: auto;top:-65px;left:385px;}
.career #bloc03 img.tree06{width: 85px;height: auto;top:410px;right:15px;}
.career #bloc03 img.tree10{width: 110px;height: auto;top:300px;left:-30px;}
.career #bloc03 img.ie04{width: 160px;height: auto;top:245px;right:170px;}
.career #bloc03 img.tree11{width: 120px;height: auto;top:380px;right:-15px;}
.career .interView .stepTit{
width: 456px;
margin-left: auto;
margin-right: auto;
margin-top: 110px;
margin-bottom: 2em;
text-align: center;
font-size: 0.26rem;
letter-spacing: 0.05em;
padding: 0.5em 0;
color: var(--ELITE-NBLUE);
background: #fbed21;
isolation: isolate;
-webkit-border-radius: 8px;
border-radius: 8px;
position: relative;
}
.career .interView .stepTit::before{
content: '';
display: block;
width: 70px;
height: 115px;
position: absolute;
top:calc(50% - 58px);
left:-20px;
background: url(../img/career/career_eri01.png) no-repeat center center/contain;
}
.career .interView .stepList{
justify-content: center;
}
.career .interView .stepList li{
max-width: 250px;
width: 25%;
}
.career .interView .stepList li .circle{
width: 70%;
aspect-ratio: 1/1;
margin-left: auto;
margin-right: auto;
position: relative;
}
.career .interView .stepList li:not(:last-child) .circle::before{
content: '';
display: block;
width: 110px;
aspect-ratio: 110/25;
background: url(../img/career/arrow.svg) no-repeat top right/auto 100%;
position: absolute;
top:50%;
right:-32.5%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 0;
}
.career .interView .stepList li .circle > span{
position: relative;
z-index: 1;
height: 100%;
background: #c4ecf1;
border: 4px solid #acdde3;
text-align: center;
isolation: isolate;
-webkit-border-radius: 50%;
border-radius: 50%;
font-size: 0.26rem;
line-height: 1.25;
letter-spacing: 0.025em;
color: var(--ELITE-NBLUE);
}
@media screen and (max-width: 1040px) {
.career .interView .stepList li .circle > span{font-size: 2.5vw;}
}
.career .interView .stepList li .circle .lh1{
line-height: 1;
}
.career .interView .stepList li .txt {
text-align: center;
font-size: 0.17rem;
line-height: 1.4;
letter-spacing: 0.025em;
margin-top: 1em;
}
.career .interView .txt01 {
text-align: center;
font-size: 0.2rem;
line-height: 1.4;
letter-spacing: 0.05em;
margin-top: 2em;
}
.career .interView .txt01 > .bb{
display: inline-block;
padding-left: 0.25em;
position: relative;
}
.career .interView .txt01 > .bb > span{
position: relative;
z-index: 1;
}
.career .interView .txt01 .bb::before{
content: '';
width: 100%;
height: 10px;
position: absolute;
bottom:0;
left:0;
background: #c4ecf1;
z-index: 0;
}
/*=============================
flow
=============================*/
.flow #bloc01{
padding: 55px 20px 100px;
}
.flow section > .inner{
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.flow section h2{
text-align: center;
font-size: 0.52rem;
letter-spacing: 0.05em;
color: var(--ELITE-NBLUE);
margin-bottom: 1.25em;
}
.flow section h2 .color{
color: #f2ac44;
}
.flow section ul.list > li{
position: relative;
}
.flow section ul.list > li:nth-child(n+2){
margin-top: 70px;
}
.flow section ul.list > li > h3{
}
.flow section ul.list > li > .txt{
}
.flow section ul.list > li .pic{
position: absolute;
top:0;
left:0;
height: 100%;
display: grid;
place-content: center;
place-items: center;
}
.flow #bloc01 ul.flowList > li{
background: #FFF;
min-height: 186px;
padding: 30px 30px 30px 210px;
isolation: isolate;
-webkit-border-radius: 6px;
border-radius: 6px;
position: relative;
}
.flow #bloc01 ul.flowList > li:not(:last-child)::before{
content: '';
display: block;
width: 50px;
height: 50px;
background: url(../img/flow/arrow.svg) bottom center/100% auto;
position: absolute;
top:100%;
left:calc(50% - 25px);
}
.flow #bloc01 ul.flowList > li .pic{
width: 210px;
}
.flow #bloc01 ul.flowList > li .pic img{
width: 146px;
height: auto;
}
.flow #bloc01 ul.flowList > li h3{
font-size: 0.3rem;
letter-spacing: 0.05em;
color: var(--ELITE-NBLUE);
margin-bottom: 0.5em;
}
.flow #bloc01 ul.flowList > li h3 .step{
display: inline-block;
background: var(--ELITE-NBLUE);
color: #FFF;
font-size: 0.24rem;
isolation: isolate;
-webkit-border-radius: 6px;
border-radius: 6px;
padding: 0.25em 0.5em 0.35em;
margin-right: 0.5em;
}
.flow #bloc01 ul.flowList > li .txt{
font-size: 0.16rem;
line-height: 1.75;
letter-spacing: 0.025em;
}
.flow #bloc02{
padding: 70px 20px 100px;
background: #caf3ff;
}
.flow #bloc02 ul.jobList > li{
min-height: 165px;
padding-left: 300px;
}
.flow #bloc02 ul.jobList > li .pic{
width: 300px;
}
.flow #bloc02 ul.jobList > li .pic img{
width: 260px;
height: auto;
}
.flow #bloc02 ul.jobList > li h3{
font-size: 0.32rem;
letter-spacing: 0.05em;
color: var(--ELITE-NBLUE);
margin-bottom: 0.5em;
}
.flow #bloc02 ul.jobList > li h3 span{
display: inline-block;
background: #FFF;
isolation: isolate;
-webkit-border-radius: 6px;
border-radius: 6px;
padding: 0.25em 0.5em 0.35em;
}
.flow #bloc02 ul.jobList > li .txt{
font-size: 0.16rem;
line-height: 1.75;
letter-spacing: 0.025em;
}
.flow .txt01{
text-align: center;
padding: 80px 0 0;
background: #FFF;
font-size: 0.22rem;
letter-spacing: 0.05em;
line-height: 1.9;
color: var(--ELITE-NBLUE);
}