@charset "UTF-8";
/* CSS Document */
/*=============================
joy5
=============================*/
.joy5 #main{
padding-top: 65px;
margin-bottom: 60px;
}
.joy5 #main h1{
text-align: center;
font-size: 0.3rem;
letter-spacing: 0.05em;
color: var(--ELITE-NBLUE);
margin-bottom: 0.15em;
}
.joy5 #main h2{
text-align: center;
font-size: 0.61rem;
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: 42px;
height: 67px;
background: url(../img/joy5/joy5_eri.svg) no-repeat center center/contain;
top:22.5px;
left:8px;
}
.joy5 #main h2 span::after{
width: 30px;
height: 38px;
background: url(../img/joy5/joy5_hoshi.svg) no-repeat center center/contain;
top:7px;
right:-35px;
}
.joy5 section{
}
.joy5 section:nth-of-type(n+2){
margin-top: 35px;
}
.joy5 section .num{
text-align: center;
font-size: 0.55rem;
margin-bottom: 0.25em;
}
.joy5 #bloc01 .num{
background: url('data:image/svg+xml;utf8,') no-repeat bottom 5px center/auto 50%;
color:#f2447b;
}
.joy5 #bloc02 .num{
background: url('data:image/svg+xml;utf8,') no-repeat bottom 5px center/auto 50%;
color:#eb5e00;
}
.joy5 #bloc03 .num{
background: url('data:image/svg+xml;utf8,') no-repeat bottom 5px center/auto 50%;
color:#8f62a7;
}
.joy5 #bloc04 .num{
background: url('data:image/svg+xml;utf8,') no-repeat bottom 5px center/auto 50%;
color:#3cb166;
}
.joy5 #bloc05 .num{
background: url('data:image/svg+xml;utf8,') no-repeat bottom 5px center/auto 50%;
color:#1a8ed8;
}
.joy5 section h2{
text-align: center;
font-size: 0.22rem;
line-height: 1.6;
letter-spacing: 0.05em;
margin-bottom: 25px;
}
.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{
width: 100%;
}
.joy5 #bloc01 .pic{aspect-ratio: 731/470;}
.joy5 #bloc02 .pic{aspect-ratio: 752/442;}
.joy5 #bloc03 .pic{aspect-ratio: 742/469;}
.joy5 #bloc03 .pic img{width: 104%; height: auto; left:unset; right:0!important;}
.joy5 #bloc04 .pic{aspect-ratio: 738/530;}
.joy5 #bloc05 .pic{aspect-ratio: 840/510;}
.joy5 #bloc05 .pic img{width: 113%; height: auto;}
.joy5 section h3{
text-align: center;
font-size: 0.22rem;
letter-spacing: 0.05em;
margin-top: 1em;
}
.joy5 section .txt{
padding: 0 25px;
font-size: 0.16rem;
line-height: 1.75;
letter-spacing: 0.05em;
margin-top: 1em;
}
.joy5 .bgArea{
background: #6ed3e0;
padding: 60px 0 35px;
margin-top: 55px;
}
.joy5 .bgArea > .inner{
}
.joy5 .bgArea .txt{
text-align: center;
font-size: 0.16rem;
line-height: 1.7;
letter-spacing: 0.025em;
}
.joy5 .bgArea h2{
text-align: center;
font-size: 0.19rem;
line-height: 1.7;
color: var(--ELITE-NBLUE);
margin:1em 0 1.25em;
letter-spacing: 0.05em;
}
.joy5 .bgArea .pic06{
text-align: right;
padding: 0 25px;
margin-top: 25px;
}
.joy5 .bgArea .pic06 img{
width: 260px;
height: auto;
}
/*=============================
workstyle
=============================*/
.workstyle #main{
padding-top: 45px;
padding-bottom: 115px;
position: relative;
}
.workstyle #main h1{
text-align: center;
font-size: 0.31rem;
line-height: 1.475;
letter-spacing: 0.05em;
color: var(--ELITE-NBLUE);
margin-bottom: 0.5em;
}
.workstyle #main h1 span.color{
color: #f7b249;
}
.workstyle #main h2{
text-align: center;
font-size: 0.25rem;
line-height: 1.475;
letter-spacing: 0.05em;
color: var(--ELITE-NBLUE);
}
.workstyle #main > img{
position: absolute;
bottom:-15px;
}
.workstyle #main > img.tree01{
width: 40px;
height: auto;
left:calc(50% - 220px);
}
.workstyle #main > img.tree02{
width: 45px;
height: auto;
left:calc(50% + 107px);
}
.workstyle #main > img.tree03{
width: 68px;
height: auto;
left:calc(50% + 163px);
bottom:-25px;
}
.workstyle #main > img.mise{
width: 85px;
height: auto;
left:calc(50% - 177px);
}
.workstyle #main > img.onpu{
width: 45px;
height: auto;
left:calc(50% - 155px);
bottom:50px;
}
.workstyle #main > img.biru{
width: 58px;
height: auto;
left:calc(50% + 26px);
bottom:-18px;
}
.workstyle #main > img.sun{
width: 39px;
height: auto;
left:calc(50% + 7px);
bottom:52px;
}
.workstyle #main > img.tokei{
width: 109px;
height: auto;
left:calc(50% - 88px);
bottom:-52px;
}
.workstyle #main > img.eri{
width: 45px;
height: auto;
right:calc(50% + 55px);
bottom: 12px;
-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: 37px;
height: auto;
right:calc(50% + 27px);
bottom:2px;
margin-bottom: -50px;
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: -50px;
}
1%{
opacity: 1;
margin-bottom: -50px;
}
100% {
opacity: 1;
margin-bottom: 0px;
}
}
@keyframes workstyleFVAni02 {
0% {
opacity: 0;
margin-bottom: -50px;
}
1%{
opacity: 1;
margin-bottom: -50px;
}
100% {
opacity: 1;
margin-bottom: 0px;
}
}
.workstyle #main .ph01{
position: absolute;
width: 70px;
height: 132px;
left:calc(50% + 30px);
bottom:-78px;
}
/*bloc01
=============================*/
.workstyle #bloc01 {
padding: 100px 0 60px;
background: #ffa800;
}
.workstyle #bloc01 > .inner{
}
.workstyle #bloc01 .txt01{
text-align: center;
font-size: 0.17rem;
line-height: 1.7;
letter-spacing: 0.025em;
}
.workstyle #bloc01 ul.list {
margin-top: 30px;
padding: 0 25px;
}
.workstyle #bloc01 ul.list > li{
background: #FFF;
padding: 30px 15px 15px 15px;
isolation: isolate;
-webkit-border-radius: 5px;
border-radius: 5px;
position: relative;
box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.15);
}
.workstyle #bloc01 ul.list > li:nth-child(n+2){
margin-top: 35px;
}
.workstyle #bloc01 ul.list > li h3{
font-size: 0.19rem;
letter-spacing: 0.05em;
line-height: 1.25;
padding-left: 15px;
margin-bottom: 1em;
}
.workstyle #bloc01 .picArea{
width: 100%;
position: relative;
}
.workstyle #bloc01 .list01 .picArea{height: 300px;}
.workstyle #bloc01 .list02 .picArea{height: 285px;}
.workstyle #bloc01 .list03 .picArea{height: 240px;}
.workstyle #bloc01 .list04 .picArea{height: 245px;}
.workstyle #bloc01 .picArea > *{
position: absolute;
z-index: 10;
}
.workstyle #bloc01 .picArea .ph{
width: 100%;
}
.workstyle #bloc01 .picArea .ph img{
width: 100%;
height: auto;
}
.workstyle #bloc01 .picArea .ph .txt{
position: absolute;
font-size: 0.08rem;
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: -35px;
left:50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.workstyle #bloc01 ul.list > li.list01 .picArea .ph .txt::before{
top:-5px;
left:-28px;
-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:-16px;
right:-19px;
-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: -37px;left:-20px;}
.workstyle #bloc01 ul.list > li.list02 .picArea .ph .txt::before{
height: 600%;
top:-5px;
left:-25px;
-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:-30px;
right:-12px;
-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: -25px; left:100%;}
.workstyle #bloc01 ul.list > li.list03 .picArea .ph .txt::before{
height: 350%;
top:-15px;
left:-15px;
-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:-17px;
-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: -20px; left:calc(100% + 25px);}
.workstyle #bloc01 ul.list > li.list04 .picArea .ph .txt::before{
height: 220%;
top:-10px;
left:-2px;
-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% + 7px);
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: 76px;
height: 250px;
bottom: -5px;
left: calc(50% - 85px);
}
.workstyle #bloc01 ul.list > li.list02 .picArea .ph{
width: 70px;
height: 232px;
bottom: -20px;
left: calc(50% - 65px);
}
.workstyle #bloc01 ul.list > li.list03 .picArea .ph{
width: 62.5px;
height: 239px;
bottom: -23px;
left: calc(50% - 59px);
}
.workstyle #bloc01 ul.list > li.list04 .picArea .ph{
width: 73px;
height: 244px;
bottom: -25px;
left: calc(50% - 70px);
}
.workstyle #bloc01 .picArea .ph .data{
display: block;
position: absolute;
top:50%;
font-size: 0.08rem;
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{right:-200%;margin-top: -3em;}
.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:-18px;
left:calc(50% + 15px);
width: 93px;
height: 170px;
}
.workstyle #bloc01 ul.list > li.list02 .picArea .pic01{
top:0;
left:calc(50% - 12px);
width: 145px;
height: 89px;
}
.workstyle #bloc01 ul.list > li.list03 .picArea .pic01{
top:0;
left:calc(50% + 80px);
width: 80px;
height: 90px;
}
.workstyle #bloc01 ul.list > li.list04 .picArea .pic01{
top: 35px;
left:calc(50% + 5px);
width: 140px;
height: 40px;
}
.workstyle #bloc01 .picArea .ie{
position: absolute;
}
.workstyle #bloc01 ul.list > li.list01 .picArea .ie{
left: calc(50% + 3px);
bottom: 30px;
width: 102.5px;
height: auto;
}
.workstyle #bloc01 ul.list > li.list02 .picArea .ie{
left: calc(50% + 12px);
bottom: 25px;
width: 101px;
height: auto;
}
.workstyle #bloc01 ul.list > li.list03 .picArea .ie{
left: calc(50% + 15px);
bottom: 15px;
width: 85px;
height: auto;
}
.workstyle #bloc01 ul.list > li.list04 .picArea .ie{
left:calc(50% + 5px);
bottom: 18px;
width: 95px;
height: auto;
}
.workstyle #bloc01 .schArea{
/*height:auto;*/
background: #fdfcde;
position: relative;
padding: 10px;
}
.workstyle #bloc01 .schArea h4{
position: absolute;
top:-0.65em;
left:10px;
font-size: 0.16rem;
letter-spacing: 0.05em;
color: #eb5c16;
}
.workstyle #bloc01 .schArea ul.shift{
position: absolute;
top:-10px;
right:15px;
z-index: 10;
}
.workstyle #bloc01 .list02 .schArea ul.shift{right:-22px;}
.workstyle #bloc01 .schArea ul.shift li{
width: 45px;
height: 45px;
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.15rem;
line-height: 0.75;
}
.workstyle #bloc01 .schArea ul.shift li.wday .fl{
font-size: 0.27rem;
line-height: 0.5;
margin-left: 0.05em;
}
.workstyle #bloc01 .schArea ul.shift li.wday .fm{
font-size: 0.16rem;
line-height: 0.5;
}
.workstyle #bloc01 .schArea ul.shift li.wday .fs{
font-size: 0.11rem;
line-height: 0.5;
}
.workstyle #bloc01 .schArea ul.shift li.wtime{
background: #eb5c16;
margin-left: 5px;
font-size: 0.1rem;
}
.workstyle #bloc01 .schArea ul.shift li.wtime .fl{
font-size: 0.15rem;
line-height: 0.75;
}
.workstyle #bloc01 .timeSch > div{
position: relative;
}
.workstyle #bloc01 .timeSch > div .day{
position: absolute;
left:10px;
top:-14px;
padding: 0.2em 0.65em 0.25em 0.75em;
isolation: isolate;
-webkit-border-radius: 9999px;
border-radius: 9999px;
color: #FFF;
font-size: 0.15rem;
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: 15px;
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: 165px}
.workstyle #bloc01 li.list03 .timeSch ul.flex{height: 142px}
.workstyle #bloc01 li.list04 .timeSch ul.flex{height: 144px}
.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: 5px 7.5px 6px;
height: 100%;
}
.workstyle #bloc01 .timeSch.flex ul.flex li:first-child div.inner{
padding: 14px 7.5px 6px;
}
.workstyle #bloc01 .timeSch ul.flex li div.inner .time{
font-size: 0.15rem;
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.1rem;}
.workstyle #bloc01 .timeSch ul.flex li .txt {
font-size: 0.15rem;
letter-spacing: 0.025em;
margin-top: 0.35em;
}
.workstyle #bloc01 .workArea {
background: #FFF;
padding: 55px 0 25px;
isolation: isolate;
-webkit-border-radius: 3px;
border-radius: 3px;
margin-top: 45px;
margin-left: 25px;
margin-right: 25px;
}
.workstyle #bloc01 .workArea h2{
text-align: center;
font-size: 0.18rem;
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;
padding: 0 15px;
}
.workstyle #bloc01 .workArea h3 span{
display: block;
font-size: 0.16rem;
line-height: 1.45;
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 20px;
font-size: 0.16rem;
line-height: 1.65;
letter-spacing: 0.025em;
}
.workstyle #bloc01 .workArea > .flex,
.workstyle #bloc01 .workArea > .pc_flex{
padding: 0 20px;
}
.workstyle #bloc01 .workArea > .flex > li{
flex-basis: 33.33%;
flex-direction: column;
justify-content: flex-end;
}
.workstyle #bloc01 .workArea > .flex > li > *{
}
.workstyle #bloc01 .workArea > .flex > li > ul.flex{flex-basis: 120px;}
.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: 72px;
width: auto;
}
.workstyle #bloc01 .workArea > .flex > li > h4{
text-align: center;
font-size: 0.12rem;
line-height: 1.25;
letter-spacing: 0.05em;
position: relative;
}
.workstyle #bloc01 .workArea > .flex > li.list02 > h4{margin-bottom: 1.25em;}
.workstyle #bloc01 .workArea > .flex > li.list03 > h4{margin-bottom: 2em;}
.workstyle #bloc01 .workArea > .flex > li > h4 .fs{
font-size: 0.1rem;
white-space: nowrap;
}
.workstyle #bloc01 .workArea > .flex > li > .flex{
flex-direction: column;
justify-content: flex-end;
}
.workstyle #bloc01 .workArea > .flex > li.list01 > .flex .graph{flex-basis: 20px;background: #fff2bf;}
.workstyle #bloc01 .workArea > .flex > li.list02 > .flex .graph{flex-basis: 32px;background: #ffea9a;}
.workstyle #bloc01 .workArea > .flex > li.list03 > .flex .graph{flex-basis: 45px;background: #ffe069;}
.workstyle #bloc01 .workArea > .pc_flex{margin-top: 2.5em;}
.workstyle #bloc01 .workArea > .pc_flex > li:nth-child(n+2){margin-top: 1.5em;}
.workstyle #bloc01 .workArea > .pc_flex > li > h4{
font-size: 0.18rem;
line-height: 1.5;
letter-spacing: 0.025em;
margin-bottom: 0.5em;
}
.workstyle #bloc01 .workArea > .pc_flex > li > h4 .fs{
display: inline-block;
font-size: 0.16rem;
text-indent: 0.75em;
}
.workstyle #bloc01 .workArea > .pc_flex > li > .txt{
font-size: 0.16rem;
line-height: 1.65;
letter-spacing: 0.025em;
}
.workstyle #bloc02{
background: #faf8ed;
padding: 47px 25px 60px;
}
.workstyle #bloc02 > .inner{
}
.workstyle #bloc02 ul.list > li:nth-child(n+2){margin-top: 50px;}
.workstyle #bloc02 ul.list > li .titArea{margin-bottom: 30px;}
.workstyle #bloc02 ul.list > li .titArea .txtArea{margin-bottom: 20px;}
.workstyle #bloc02 ul.list > li .titArea .txtArea .num{
font-size: 0.6rem;
margin-bottom: 0.5em;
}
.workstyle #bloc02 ul.list > li .titArea .txtArea h3{
font-size: 0.21rem;
letter-spacing: 0.05em;
position: relative;
z-index: 10;
margin-bottom: 1em;
}
.workstyle #bloc02 ul.list > li .titArea .txtArea h3 span.bb{
display: inline-block;
padding-left: 0.2em;
padding-bottom: 0.1em;
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: 5px;
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;}
.workstyle #bloc02 ul.list > li .titArea .phArea .comment img{width: auto;height: 65px;}
.workstyle #bloc02 ul.list > li .titArea .phArea .thum{
width: 235px;
margin-left: auto;
margin-right: auto;
aspect-ratio: 1/1;
isolation: isolate;
-webkit-border-radius: 9999px;
border-radius: 9999px;
overflow: hidden;
}
.workstyle #bloc02 ul.list > li ul.detail li:nth-child(n+2){margin-top: 30px;}
.workstyle #bloc02 ul.list > li ul.detail li .ph{
width: 100%;
aspect-ratio: 400/280;
isolation: isolate;
-webkit-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
margin-bottom: 25px;
}
.workstyle #bloc02 ul.list > li ul.detail li .txt{
font-size: 0.16rem;
line-height: 1.65;
}
/*=============================
career
=============================*/
.career #main{
padding-top: 40px;
padding-bottom: 165px;
position: relative;
}
.career #main h1{
text-align: center;
font-size: 0.29rem;
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--ELITE-NBLUE);
margin-bottom: 1em;
}
.career #main h1 span.color{
color: #f7b24d;
}
.career #main h2{
text-align: center;
font-size: 0.15rem;
line-height: 1.7;
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:-35px;
border-left: 2px dotted var(--ELITE-BLACK);
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.career #main h2 span::after {
right:-35px;
border-right: 2px dotted var(--ELITE-BLACK);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.career #main > img{
position: absolute;
}
.career #main > img.tree01{width: 34px; height: auto; left:calc(50% - 200px); bottom:-22px;}
.career #main > img.tree02{width: 36px; height: auto; left:calc(50% - 177px); bottom:30px;}
.career #main > img.tree03{width: 34px; height: auto; left:calc(50% - 65px); bottom:30px;}
.career #main > img.tree04{width: 47.5px; height: auto; left:calc(50% + 122px); bottom:22.5px;}
.career #main > img.tree05{width: 36px; height: auto; left:calc(50% + 153px); bottom:-35px;}
.career #main > img.kikyu01{width: 27px; height: auto; bottom:102px; left:calc(50% - 156px);}
.career #main > img.tori{width: 14px; height: auto; bottom:80px; left:calc(50% + 150px);}
.career #main > img.sun{width: 51px; height: auto; bottom:102px; left:calc(50% + 101px);}
.career #main > img.car{width: 63px; height: auto; bottom:-67px; left:calc(50% + 102px);}
.career #main .ie01{
position: absolute;
bottom:-24px;
left:calc(50% - 143px);
width: 286px;
height: 106px;
}
.career #contents {
background: #8ebbe2;
padding: 68px 0 70px;
}
/*bloc01
=============================*/
.career #bloc01 {
margin-bottom: 43px;
}
.career #bloc01 > .txt01{
text-align: center;
font-size: 0.16rem;
line-height: 1.7;
margin-bottom: 2em;
}
.career #bloc01 > .inner{
margin:0 25px;
background: #FFF;
padding: 25px 25px 30px;
isolation: isolate;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.career #bloc01 > .inner > h2{
text-align: center;
font-size: 0.2rem;
line-height: 1.4;
letter-spacing: 0.05em;
color: var(--ELITE-NBLUE);
margin-bottom: 1em;
}
.career #bloc01 .workList h3{
text-align: center;
margin-bottom: 1.5em;
}
.career #bloc01 .workList h3 span{
display: block;
width: calc(100% + 20px);
margin-left: -10px;
font-size: 0.17rem;
line-height: 1.3;
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{
font-size: 0.16rem;
line-height: 1.65;
line-height: 1.9;
}
.career #bloc01 .workList .ippanList{
margin-top: 25px;
}
.career #bloc01 .workList .ippanList > li:nth-child(n+2){margin-top: 30px;}
.career #bloc01 .workList .ippanList > li > .pic{text-align: center;}
.career #bloc01 .workList .ippanList > li > .pic img{
height: 175px;
width: auto;
}
.career #bloc01 .workList .ippanList > li > h4{
text-align: center;
font-size: 0.18rem;
line-height: 1.55;
letter-spacing: 0.05em;
position: relative;
margin-bottom: 1em;
}
.career #bloc01 .workList .ippanList > li > .txt{
font-size: 0.16rem;
line-height: 1.68;
letter-spacing: 0.025em;
margin-top: 1.5em;
}
.career #bloc01 .workList .voiceList{margin-top: 45px;}
.career #bloc01 .workList .voiceList > li:nth-child(n+2){margin-top: 30px;}
.career #bloc01 .workList .voiceList > li .ph{
width: 100%;
aspect-ratio: 570/330;
isolation: isolate;
-webkit-border-radius: 3px;
border-radius: 3px;
overflow: hidden;
margin-bottom: 1.75em;
}
.career #bloc01 .workList .voiceList > li .txtArea .name{
text-align: center;
font-size: 0.17rem;
letter-spacing: 0.05em;
color: #fd8300;
margin-bottom: 1em;
}
.career #bloc01 .workList .voiceList > li .txtArea .txt{
font-size: 0.16rem;
line-height: 1.7;
letter-spacing: 0.05em;
}
.career #bloc01 .workList > li.list02{margin-top: 40px;}
.career #bloc01 .workList > li.list02 .sougouList{margin-top: 15px;}
.career #bloc01 .workList > li.list02 .sougouList > li{
flex-basis: 33.33%;
flex-direction: column;
justify-content: flex-end;
}
.career #bloc01 .workList > li.list02 .sougouList > li > ul.flex{flex-basis: 117px;}
.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: 75px;
width: auto;
}
.career #bloc01 .workList > li.list02 .sougouList > li > h4{
text-align: center;
font-size: 0.12rem;
line-height: 1.25;
letter-spacing: 0.05em;
white-space: nowrap;
}
.career #bloc01 .workList > li.list02 .sougouList > li.list02 > h4{margin-bottom: 1.25em;}
.career #bloc01 .workList > li.list02 .sougouList > li.list03 > h4{margin-bottom: 2em;}
.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: 20px;background: #fadfe0;}
.career #bloc01 .workList > li.list02 .sougouList > li.list02 > .flex .graph{flex-basis: 32px;background: #fdcacc;}
.career #bloc01 .workList > li.list02 .sougouList > li.list03 > .flex .graph{flex-basis: 45px;background: #ffafb2;}
.career #bloc01 .workList > li.list02 .sougouList_txt{margin-top: 20px;}
.career #bloc01 .workList > li.list02 .sougouList_txt > li:nth-child(n+2){margin-top: 1.5em;}
.career #bloc01 .workList > li.list02 .sougouList_txt > li > h4{
font-size: 0.18rem;
line-height: 1.5;
letter-spacing: 0.025em;
margin-bottom: 0.5em;
}
.career #bloc01 .workList > li.list02 .sougouList_txt > li > h4 .fs{
display: inline-block;
font-size: 0.16rem;
text-indent: 0.75em;
}
.career #bloc01 .workList > li.list02 .sougouList_txt > li > .txt{
font-size: 0.16rem;
line-height: 1.65;
letter-spacing: 0.025em;
}
/*bloc02
=============================*/
.career .interView {
padding: 0 25px;
margin-top: 45px;
}
.career .interView > .inner{
}
.career .interView .titArea{
position: relative;
}
.career .interView ul.titList li{
font-size: 0.22rem;
letter-spacing: 0.05em;
padding: 4px;
}
.career .interView ul.titList li:nth-child(n+2){margin-top: -15px;}
.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(3),
.career #bloc02 ul.titList li:nth-child(4){padding-left: 1em;}
.career #bloc02 ul.titList li:nth-child(3) > span{padding: 0.5em 1em 0.5em 0.5em;}
.career #bloc02 ul.titList li:nth-child(4) > span{padding: 0.5em 0.5em 0.5em 0.5em;}
.career #bloc03 ul.titList li:nth-child(3) > span{padding: 0.5em 1em 0.5em 1em;}
.career .interView .titArea .pic01{position: relative;}
.career #bloc02 .titArea .pic01 {
width: 204px;
height: 327px;
margin-left: auto;
margin-right: auto;
}
.career #bloc03 .titArea .pic01 {
width: 342px;
height: 380px;
margin-left: auto;
margin-right: auto;
margin-top: -17px;
margin-bottom: -5px;
}
.career .interView .titArea .pic01 .name{
position: absolute;
font-size: 0.13rem;
letter-spacing: 0.05em;
display: inline-block;
}
.career #bloc02 .titArea .pic01 .name{right:50%; bottom:5px;}
.career #bloc03 .titArea .pic01 .name{left:calc(50% - 15px); bottom:15px;}
.career .interView .titArea .pic01 .name .fzen_b{
display: inline-block;
font-size: 0.17rem;
margin-top: 0.5em;
}
.career .interView .titArea .pic01 .name .data{
display: inline-block;
margin-top: 0.5em;
}
.career .interView ul.detail li{position: relative;}
.career .interView ul.detail li:nth-child(n+2){margin-top: 35px;}
.career .interView ul.detail li .ph{
width: 100%;
aspect-ratio: 650/440;
position: relative;
}
.career .interView ul.detail li .ph::before{
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top:5px;
left:5px;
z-index: 0;
isolation: isolate;
-webkit-border-radius: 4px;
border-radius: 4px;
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: 4px;
border-radius: 4px;
overflow: hidden;
}
.career .interView ul.detail li .txt{
margin-left: 25px;
margin-top: 65px;
padding: 15px 20px;
font-size: 0.16rem;
line-height: 1.9;
letter-spacing: 0.025em;
background: #FFF;
position: relative;
z-index: 1;
isolation: isolate;
-webkit-border-radius: 7px;
border-radius: 7px;
}
.career .interView ul.detail li > img{position: absolute;z-index: 10;}
.career #bloc02 img.tree06 {width: 42px; aspect-ratio: 85/152; top:50vw; left:-12.5px;}
.career #bloc02 img.ie01 {width: 73px; aspect-ratio: 145/154; top:54vw; left:45px;}
.career #bloc02 img.tree07 {width: 57.5px; aspect-ratio: 115/166; bottom:-50px; left:-12.5px;}
.career #bloc02 img.kumo {width: 55px; aspect-ratio: 110/110; top:-40px; left:405px;}
.career #bloc02 img.tree08 {width: 65.5px; aspect-ratio: 131/204; bottom:-60px; left:-12.5px;}
.career #bloc02 img.ie02 {width: 87.5px; aspect-ratio: 175/158; top:51vw; right:55px;}
.career #bloc02 img.tree05 {width: 60px; aspect-ratio: 119/169; top:49.5vw; right:-12.5px;}
.career #bloc03 img.tree07 {width: 57.5px; aspect-ratio: 115/166; top:45vw; left:-30px;}
.career #bloc03 img.ie03 {width: 186.5px; aspect-ratio: 373/194; top:44vw; right:-15px;}
.career #bloc03 img.kikyu02{width: 50px; aspect-ratio: 99/138; top:220px; left:25px; position: absolute;}
.career #bloc03 img.tree06 {width: 65px; aspect-ratio: 85/152; bottom:-85px; right:0;}
.career #bloc03 img.tree10 {width: 86.5px; aspect-ratio: 173/224; bottom:-55px; left:-45px;}
.career #bloc03 img.ie04 {width: 79px; aspect-ratio: 158/162; top:48vw; left:12px;}
.career #bloc03 img.tree11 {width: 60px; aspect-ratio: 120/109; top:54vw; left:115px;}
.career .interView .stepTit{
width: 230px;
margin-left: auto;
margin-right: auto;
margin-top: 70px;
margin-bottom: 2em;
text-align: center;
font-size: 0.2rem;
letter-spacing: 0.05em;
padding: 0.5em 0;
color: var(--ELITE-NBLUE);
background: #fbed21;
isolation: isolate;
-webkit-border-radius: 4px;
border-radius: 4px;
position: relative;
}
.career .interView .stepTit::before{
content: '';
display: block;
width: 35px;
height: 57.5px;
position: absolute;
top:calc(50% - 32px);
left:-20px;
background: url(../img/career/career_eri01.png) no-repeat center center/contain;
}
.career .interView .stepList{
}
.career .interView .stepList li{
position: relative;
}
.career .interView .stepList li:nth-child(n+2){margin-top: 75px;}
.career .interView .stepList li:nth-child(n+2)::before{
content: '';
display: block;
width: 22.5px;
aspect-ratio: 45/92;
background: url(../img/career/arrow_bottom.svg) no-repeat top right/auto 100%;
position: absolute;
bottom:calc(100% + 15px);
left:calc(50% - 11px);
z-index: 0;
}
.career .interView .stepList li .circle{
width: 157px;
aspect-ratio: 1/1;
margin-left: auto;
margin-right: auto;
position: relative;
}
.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.22rem;
line-height: 1.25;
letter-spacing: 0.025em;
color: var(--ELITE-NBLUE);
}
.career .interView .stepList li .circle .lh1{
line-height: 1;
}
.career .interView .stepList li .txt {
text-align: center;
font-size: 0.16rem;
line-height: 1.4;
letter-spacing: 0.025em;
margin-top: 1em;
}
.career .interView .txt01 {
width: calc(100% + 50px);
margin-left: -25px;
text-align: center;
font-size: 0.2rem;
line-height: 1.4;
letter-spacing: 0.05em;
margin-top: 2em;
}
.career .interView .txt01 .sp_bb{
display: inline-block;
padding-left: 0.25em;
position: relative;
}
.career .interView .txt01 .sp_bb > span{
position: relative;
z-index: 1;
}
.career .interView .txt01 .sp_bb::before{
content: '';
width: 100%;
height: 10px;
position: absolute;
bottom:0;
left:0;
background: #c4ecf1;
z-index: 0;
}
/*=============================
flow
=============================*/
.flow #bloc01{
padding: 70px 25px 50px;
}
.flow section h2{
text-align: center;
font-size: 0.33rem;
letter-spacing: 0.05em;
color: var(--ELITE-NBLUE);
margin-bottom: 2.25em;
}
.flow section h2 .color{
color: #f2ac44;
}
.flow section ul.list > li{
flex-direction: column;
}
.flow section ul.list > li > h3 {order: 0;}
.flow section ul.list > li > .txt {order: 2;}
.flow section ul.list > li > .pic {order: 1;}
.flow #bloc01 ul.flowList > li{
background: #FFF;
padding: 30px 15px 20px 15px;
isolation: isolate;
-webkit-border-radius: 3px;
border-radius: 3px;
position: relative;
}
.flow #bloc01 ul.flowList > li:nth-child(n+2){
margin-top: 70px;
}
.flow #bloc01 ul.flowList > li:not(:last-child)::before{
content: '';
display: block;
width: 50px;
height: 55px;
background: url(../img/flow/arrow.svg) bottom center/100% auto;
position: absolute;
top:100%;
left:calc(50% - 25px);
}
.flow #bloc01 ul.flowList > li .pic{
text-align: center;
margin-bottom: 25px;
}
.flow #bloc01 ul.flowList > li .pic img{
width: 146px;
height: auto;
}
.flow #bloc01 ul.flowList > li h3{
text-align: center;
font-size: 0.25rem;
letter-spacing: 0.05em;
color: var(--ELITE-NBLUE);
margin-bottom: 1em;
}
.flow #bloc01 ul.flowList > li h3 .step{
display: inline-block;
background: var(--ELITE-NBLUE);
color: #FFF;
font-size: 0.21rem;
isolation: isolate;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 0.25em 0.5em 0.35em;
margin-right: 0.5em;
}
.flow #bloc01 ul.flowList > li .txt{
font-size: 0.15rem;
line-height: 1.75;
letter-spacing: 0.025em;
}
.flow #bloc02{
padding: 50px 25px 57px;
background: #caf3ff;
}
.flow #bloc02 h2{
margin-bottom: 1.25em;
}
.flow #bloc02 ul.jobList > li{
}
.flow #bloc02 ul.jobList > li:nth-child(n+2){
margin-top: 25px;
}
.flow #bloc02 ul.jobList > li .pic{
text-align: center;
margin-bottom: 25px;
}
.flow #bloc02 ul.jobList > li .pic img{
width: 200px;
height: auto;
}
.flow #bloc02 ul.jobList > li h3{
text-align: center;
font-size: 0.22rem;
letter-spacing: 0.05em;
color: var(--ELITE-NBLUE);
margin-bottom: 1em;
}
.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: 50px 0 0;
background: #FFF;
font-size: 0.22rem;
letter-spacing: 0.05em;
line-height: 1.9;
color: var(--ELITE-NBLUE);
}