@charset "UTF-8";
.w100{
width: 100%;
}
.for-sp{
display: none;
}
.wrapper{
}
article{
background: #ebe8e1;
line-height: 1.8;
letter-spacing: 0.06em;
font-size: 16px;
overflow-wrap: anywhere;
word-break: normal;
line-break: strict;
}
.contents-wrap{
width: 90%;
max-width: 1100px;
margin: 0 auto;
}

.main-kv{
padding: 4% 0 0;
}
.main-kv .contents-wrap{
max-width: 1240px;
}
.main-ttl{
position: relative;
margin: 0 0 -3.8%;
}
.main-ttl p{
position: absolute;
top: 15%;
left: 0;
width: 100%;
text-align: center;
font-size: 16px;
font-weight: 700;
}
.main-ill-box{
position: relative;
margin: 0 auto -5%;
width: 90%;
max-width: 1100px;
}

.ill01{
width: 40.5%;
}
.ill02{
width: 27.5%;
position: absolute;
left: 31.5%;
top: 9%;
}
.ill03{
width: 28.5%;
position: absolute;
left: 52.5%;
bottom: 0;
}
.ill04{
width: 34.5%;
position: absolute;
right: 0;
bottom: 2%;
}
.main-lead-sec{
background: #fff;
}
.main-lead-sec-inner{
width: 90%;
max-width: 900px;
margin: 0 auto;
padding: 9% 0 5%;
position: relative;
}
.main-lead-sec p{
font-weight: 700;
padding: 0 16% 0 0;
}
.main-lead-sec-inner-ill{
position: absolute;
width: 13%;
bottom: 20%;
right: 0;
}


.anchor-sec{
padding: 5% 0 3.5%;
}
.anchor-sec .contents-wrap{
display: flex;
justify-content: space-between;
}
.anchor-sec .contents-wrap a{
width: 30%;
}
.about-social-cont{
background: #fff;
margin: 0 0 10%;
padding: 5% 7% 4%;
position: relative;
}
.float-arrow01{
position: absolute;
width: 22%;
right: 6%;
top: 90%;
}
.about-social-ttl img{
width: 80%;
max-width: 290px;
margin: 0 0 4px;
}
.about-social-cont p{
font-weight: 500;
}
.about-social-ttl p{
font-size: 22px;
font-weight: 700;
margin: 0 0 3%;
}
.social-style-ttl{
width: 90%;
max-width: 260px;
margin: 0 auto -56px;
position: relative;
z-index: 10;
}
.social-style-cont{
background: #fff;
margin: 0 0 16%;
padding: 7% 7% 4%;
position: relative;
}
.float-arrow02{
position: absolute;
width: 14.5%;
left: 10%;
top: 97%;
}
.ss-matrix-box{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
position: relative;
}
.arrow-head01{
position: absolute;
width: 17px;
top: 0;
left: calc(50% - 9px);
}
.arrow-head01 img{
vertical-align: top;
}
.arrow-head02{
position: absolute;
width: 12px;
top: calc(50% - 8px);
left: -11px;
}
.arrow-head02 img{
vertical-align: top;
}
.ss-matrix-box::after{
position: absolute;
content: '';
width: 3px;
height: 100%;
background: #3c3c3c;
left: calc(50% - 2px);
top: 0;
}
.ss-matrix-once{
background: #ccc;
width: 46.5%;
padding: 3% 3% 4% 3%;
position: relative;
border-radius: 8px;
font-size: 15px;
z-index: 10;
display: flex;
flex-direction: column;
}
.ss-matrix-once p{
font-weight: 500;
}
.ss-matrix-once p.upper{
min-height: 170px;
}
.ss-matrix-once p.lower{
min-height: 190px;
}
.ss-matrix-once.type01{background: #80ebbc;}
.ss-matrix-once.type02{background: #76e0ff;}
.ss-matrix-once.type03{background: #ffb957;}
.ss-matrix-once.type04{background: #ffade2;}

.ss-ttl01,.ss-ttl02,.ss-ttl03,.ss-ttl04{text-align: center;margin: 0 auto 14px;width: 80%; max-width: 270px;}


.matrix-ill01{
position: absolute;
width: 36%;
left: -22%;
top: -18%;
}
.matrix-ill02{
position: absolute;
width: 34%;
right: -17%;
top: -18%;
}
.matrix-ill03{
position: absolute;
width: 36%;
left: -25%;
top: -9%;
z-index: 10;
}
.matrix-ill04{
position: absolute;
width: 33%;
right: -28%;
top: -7%;
z-index: 10;
}



.ss-matrix-ex{
background: #fff;
padding: 5% 4% 4%;
border-radius: 6px;
font-weight: 500;
flex-grow: 1;
}
.ss-matrix-ex p{
margin: 0 0 6px;
min-height: 0;
}
.ss-matrix-once span{display: inline-block;}
.ss-matrix-once.type01 span.colored{color: #12ab4f;font-weight: 700;}
.ss-matrix-once.type02 span.colored{color: #008ff1;font-weight: 700;}
.ss-matrix-once.type03 span.colored{color: #f1861c;font-weight: 700;}
.ss-matrix-once.type04 span.colored{color: #ff426f;font-weight: 700;}
.verticals-box{
text-align: center;
line-height: 3;
font-size: 20px;
font-weight: 700;
}
.beside-box{
width: 100%;
height: 78px;
overflow: hidden;
position: relative;
}
.beside-box::after{
position: absolute;
content: '';
width: 100%;
height: 3px;
background: #3c3c3c;
left: 0;
top: calc(50% - 1px);
z-index: 0;
}
.beside-left{
background: #fff;
display: inline-block;
font-size: 20px;
font-weight: 700;
padding: 0 10px 0 0;
line-height: 78px;
float: left;
position: relative;
z-index: 1;
}
.beside-right{
background: #fff;
display: inline-block;
font-size: 20px;
font-weight: 700;
padding: 0 0 0 10px;
line-height: 78px;
float: right;
position: relative;
z-index: 1;
}


.look-up{
background: #414449;
padding: 14% 0;
}
.look-up-wrap{
background: #fff;
border-radius: 8px;
padding: 0 5% 8%;
position: relative;
}
.ttl-look-up{
width: 80%;
max-width: 390px;
margin: 0 auto -20px;
position: relative;
top: -44px;
}
.look-up-lead{
text-align: center;
font-size: 22px;
font-weight: 700;
margin: 0 0 14px;
}
.look-up-att-text{
font-size: 18px;
font-weight: 700;
color: #ff426f;
text-align: center;
margin: 0 0 6%;
}
.look-up-gr{
width: 90%;
max-width: 665px;
margin: 0 auto;
position: relative;
left: -4%;
}
.look-up-ex{
font-size: 18px;
text-align: center;
font-weight: 700;
margin: 0 0 8%;
}
.look-up-ex p{
display: inline-block;
}
.marker01{
position: relative;
z-index: 1;
}
.marker01::after{
content: '';
position: absolute;
left: 0;
bottom: 0;
background: #ff6600;
width: 100%;
height: 50%;
z-index: -1;
}
.marker01{
position: relative;
z-index: 1;
}
.marker01::after{
content: '';
position: absolute;
left: 0;
bottom: 0;
background: #f9ddb1;
width: 100%;
height: 50%;
z-index: -1;
}
.marker02{
position: relative;
z-index: 1;
}
.marker02::after{
content: '';
position: absolute;
left: 0;
bottom: 0;
background: #f8d8ef;
width: 100%;
height: 50%;
z-index: -1;
}
.marker03{
position: relative;
z-index: 1;
}
.marker03::after{
content: '';
position: absolute;
left: 0;
bottom: 0;
background: #caf3de;
width: 100%;
height: 50%;
z-index: -1;
}
.marker04{
position: relative;
z-index: 1;
}
.marker04::after{
content: '';
position: absolute;
left: 0;
bottom: 0;
background: #c6eefd;
width: 100%;
height: 50%;
z-index: -1;
}
.float-arrow03{
position: absolute;
width: 18%;
right: 6%;
top: 113%;
}
.favorite{
margin: 0 0 8%;
padding: 10% 0 0;
position: relative;
}
.ttl-favorite{
width: 80%;
max-width: 420px;
margin: 0 auto 34px;
}
.favorite-lead{
font-size: 22px;
font-weight: 700;
text-align: center;
margin: 0 0 4%;
}
.favorite-text{
text-align: center;
margin: 0 0 6%;
font-weight: 700;
}
.gallery-wrap{
background: #fff;
border-radius: 8px;
padding: 4%;
position: relative;
}
.gallery-wrap::after{
position: absolute;
content: '';
top: -1px;
left: -1px;
width: 52px;
height: 52px;
background:url("../../assets/img/rookies/2026/g-corner01.svg");
background-size: 100% auto;
}
.gallery-wrap::before{
position: absolute;
content: '';
top: -1px;
right: -1px;
width: 52px;
height: 52px;
background:url("../../assets/img/rookies/2026/g-corner02.svg");
background-size: 100% auto;
}
.corner-lb{
position: absolute;
bottom: -1px;
left: -1px;
width: 52px;
height: 52px;
}
.corner-rb{
position: absolute;
bottom: -1px;
right: -1px;
width: 52px;
height: 52px;
}

.gallery-ttl{
font-size: 20px;
font-weight: 700;
position: relative;
padding: 0 0 3%;
}
.gallery-ttl p{
position: absolute;
right: 0;
top: 4px;
text-align: right;
font-size: 12px;
font-weight: 500;
}
.gallery-box{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.gallery-box a{
width: 24.2%;
margin: 0 0 1.1%;
}

.style01,.style02,.style03{
margin: 0 0 min(6%, 60px);;
}
.style04{
margin: 0 0 10%;
}

.ac-head{
position: relative;
padding: 4% 5% 4%;
text-align: center;
min-height: 164px;
border-radius: 8px 8px 0 0;
}
.ac-head::after{
position: absolute;
content: '';
top: 0;
bottom: 0;
right: 8%;
width: 44px;
height: 44px;
margin: auto;
background: url("../../assets/img/rookies/2026/ac-to-open.svg");
background-size: 100% auto;
}
.ac-head.close::after{
background: url("../../assets/img/rookies/2026/ac-to-close.svg");
background-size: 100% auto;
}
.ttl-style01,
.ttl-style02,
.ttl-style03,
.ttl-style04{
width: 90%;
max-width: 340px;
margin: 0 auto;
}
.style01 .ac-head{background: #ffade2;}
.style02 .ac-head{background: #ffb957;}
.style03 .ac-head{background: #80ebbc;}
.style04 .ac-head{background: #76e0ff;}
.ac-cont-wrap{
background: #fff;
padding: 5% 7% 8%;
display: none;
}
.cont-ttl-style01,
.cont-ttl-style02,
.cont-ttl-style03,
.cont-ttl-style04{
width: 90%;
max-width: 430px;
margin: 0 auto;
}
.ac-cont-img{
width: 90%;
max-width: 680px;
margin: 5% auto 8%;
}
.ac-cont-tag{
width: 220px;
margin: 0 auto;
text-align: center;
font-size: 20px;
font-weight: 700;
line-height: 2.4;
}
.style01 .ac-cont-tag{background: #ffade2;}
.style02 .ac-cont-tag{background: #ffb957;}
.style03 .ac-cont-tag{background: #80ebbc;}
.style04 .ac-cont-tag{background: #76e0ff;}
h4.ac-cont-tell{
font-size: 30px;
font-weight: 700;
text-align: center;
padding: 2% 0 5%;
}
.ac-cont-background-ttl{
text-align: center;
font-size: 22px;
font-weight: 700;
padding: 24px 0;
}
.ac-cont-point{
padding: 0 0 8%;
}

.style01 .ac-cont-background-ttl{border: 1px solid #ff426f;color: #ff426f;}
.style02 .ac-cont-background-ttl{border: 1px solid #f1861c;color: #f1861c;}
.style03 .ac-cont-background-ttl{border: 1px solid #12ab4f;color: #12ab4f;}
.style04 .ac-cont-background-ttl{border: 1px solid #008ff1;color: #008ff1;}

.ac-cont-background-cont{
font-size: 16px;
font-weight: 700;
padding: 40px 6%;
}
.ac-cont-background-cont span{
font-size: 18px;
}
.style01 .ac-cont-background-cont{border-left: 1px solid #ff426f;border-right: 1px solid #ff426f;border-bottom: 1px solid #ff426f;}
.style02 .ac-cont-background-cont{border-left: 1px solid #f1861c;border-right: 1px solid #f1861c;border-bottom: 1px solid #f1861c;}
.style03 .ac-cont-background-cont{border-left: 1px solid #12ab4f;border-right: 1px solid #12ab4f;border-bottom: 1px solid #12ab4f;}
.style04 .ac-cont-background-cont{border-left: 1px solid #008ff1;border-right: 1px solid #008ff1;border-bottom: 1px solid #008ff1;}


.style01 .ac-cont-background-cont p span{color: #ff426f;}
.style02 .ac-cont-background-cont p span{color: #f1861c;}
.style03 .ac-cont-background-cont p span{color: #12ab4f;}
.style04 .ac-cont-background-cont p span{color: #008ff1;}

.ac-ill01{
position: absolute;
width: 8.2%;
bottom: 8%;
left: 16%;
}
.ac-ill02{
position: absolute;
width: 14.5%;
bottom: 8%;
left: 16%;
}
.ac-ill03{
position: absolute;
width: 19%;
bottom: 5%;
left: 14%;
}
.ac-ill04{
position: absolute;
width: 17.5%;
bottom: 3%;
left: 11%;
}


.prospective{

}
.prospective-ttl{
text-align: center;
margin: 0 0 8%;
}
.prospective-ttl img{
width: 90%;
max-width: 454px;
margin: 0 0 14px;
}
.prospective-ttl p{
font-size: 20px;
font-weight: 700;
}
.prospective-wrap{
background: #fff;
padding: 7% 7% 2%;
}
.employee-box{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.employee-once{
width: 30.5%;
font-size: 14px;
margin: 0 0 8%
}
.employee-once:nth-child(3n - 2){
opacity:0;
transform: translateY(80px);
transition:opacity 0.7s 0s,transform 0.7s 0s;
}
.employee-once:nth-child(3n - 2).scrollin{
opacity:1;
transform: translateY(0);
transition:opacity 0.7s 0s,transform 0.7s 0s;
}
.employee-once:nth-child(3n - 1) {
opacity:0;
transform: translateY(80px);
transition:opacity 0.7s 0.3s,transform 0.7s 0.3s;
}
.employee-once:nth-child(3n - 1).scrollin{
opacity:1;
transform: translateY(0);
transition:opacity 0.7s 0.3s,transform 0.7s 0.3s;
}
.employee-once:nth-child(3n){
opacity:0;
transform: translateY(80px);
transition:opacity 0.7s 0.6s,transform 0.7s 0.6s;
}
.employee-once:nth-child(3n).scrollin{
opacity:1;
transform: translateY(0);
transition:opacity 0.5s 0.6s,transform 0.5s 0.6s;
}





.employee-once p{
margin: 0 0 14px;
}
.employee-once-img{
margin: 0 0 12px;
overflow: hidden;
border-radius: 8px;
}
.employee-once .name span{
font-size: 17px;
font-weight: 700;
letter-spacing: 0.1em
}
.detail01{
width: 59%;
margin: 0 0 6px;
}
.detail02{
width: 88%;
margin: 0 0 6px;
}

.type01 .employee-once-img{border:2px solid #12ab4f;}
.type01 .detail01,.type01 .detail02{border:1px solid #12ab4f;}
.type02 .employee-once-img{border:2px solid #008ff1;}
.type02 .detail01,.type02 .detail02{border:1px solid #008ff1;}
.type03 .employee-once-img{border:2px solid #f05200;}
.type03 .detail01,.type03 .detail02{border:1px solid #f05200;}
.type04 .employee-once-img{border:2px solid #ff426f;}
.type04 .detail01,.type04 .detail02{border:1px solid #ff426f;}







article .container{
padding: 94px 0;
    }

article .container .btn {
    font-size: clamp(19px, 1.3909224012vw, 19px);
    line-height: 1;
    letter-spacing: .15em;
    text-align: center;
    margin: 0 auto; }
article .container .btn a {
      width: auto;
      display: inline-block;
      box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.3);
      border-radius: 5rem;
      background-color: #fff;
      padding: 2em 4.5em;
      position: relative; }
article .container .btn a span {
        color: #1c6fb1;
        position: absolute;
        top: 50%;
        right: 2em;
        transform: translateY(-50%); }




.se{}
.fade-in{
opacity:0;
transition:opacity 0.8s;
}
.fade-in.scrollin{
opacity:1;
transition:opacity 0.8s;
}
.fade-in-late{
opacity:0;
transition:opacity 0.8s 0.8s;
}
.fade-in-late.scrollin{
opacity:1;
transition:opacity 0.8s 0.8s;
}
.move-up{
opacity:0;
transform: translateY(80px);
transition:opacity 0.8s 0s,transform 0.8s 0s;
}
.move-up.scrollin{
opacity:1;
transform: translateY(0);
transition:opacity 0.8s 0s,transform 0.8s 0s;
}
.move-up-late{
opacity:0;
transform: translateY(80px);
}
.move-up-late.scrollin{
opacity:1;
transform: translateY(0);
transition:opacity 0.8s 0.8s,transform 0.8s 0.8s;
}
.move-down{
opacity:0;
transform: translateY(0);
transition:opacity 0.8s 0s,transform 0.8s 0s;
}
.move-down.scrollin{
animation-name: move-down;
animation-duration: 0.8s;
animation-fill-mode: both;
}

@keyframes move-down{
0%{transform: translateY(0);opacity:0;}
5%{transform: translateY(-80px);opacity:0;}
100%{transform: translateY(0);opacity:1;}
}


.main-move-down{
opacity:0;
transform: translateY(-80px);
transition:opacity 0.8s 1.1s,transform 1.1s 0s;
}
.main-move-down.scrollin{
opacity:1;
transform: translateY(0);
transition:opacity 0.8s 1.1s,transform 0.8s 1.1s;
}
.move-down-big{
opacity:0;
transform: translateY(-200px);
transition:opacity 0.8s 0.5s,transform 1s 0.5s;
}
.move-down-big.scrollin{
opacity:1;
transform: translateY(0);
transition:opacity 0.8s 0.5s,transform 1s 0.5s;
}
.up01{
opacity:0;
transform: translateY(80px);
transition:opacity 0.7s 0s,transform 0.7s 0s;
}
.up01.scrollin{
opacity:1;
transform: translateY(0);
transition:opacity 0.7s 0s,transform 0.7s 0s;
}
.up02{
opacity:0;
transform: translateY(80px);
transition:opacity 0.7s 0.3s,transform 0.7s 0.3s;
}
.up02.scrollin{
opacity:1;
transform: translateY(0);
transition:opacity 0.7s 0.3s,transform 0.7s 0.3s;
}
.up03{
opacity:0;
transform: translateY(80px);
transition:opacity 0.7s 0.6s,transform 0.7s 0.6s;
}
.up03.scrollin{
opacity:1;
transform: translateY(0);
transition:opacity 0.5s 0.6s,transform 0.5s 0.6s;
}
.to-left{
opacity:0;
transform: translateX(80px);
transition:opacity 0.8s 0s,transform 0.8s 0s;
}
.to-left.scrollin{
opacity:1;
transform: translateX(0);
transition:opacity 0.8s 0s,transform 0.8s 0s;
}
.main-to-left{
opacity:0;
transform: translateX(80px);
transition:opacity 0.8s 0.6s,transform 0.8s 0.6s;
}
.main-to-left.scrollin{
opacity:1;
transform: translateX(0);
transition:opacity 0.8s 0.6s,transform 0.8s 0.6s;
}
.to-right{
opacity:0;
transform: translateX(-80px);
transition:opacity 0.8s 0s,transform 0.8s 0s;
}
.to-right.scrollin{
opacity:1;
transform: translateX(0);
transition:opacity 0.8s 0s,transform 0.8s 0s;
}
.main-to-right{
opacity:0;
transform: translateX(-80px);
transition:opacity 0.8s 0.3s,transform 0.8s 0.3s;
}
.main-to-right.scrollin{
opacity:1;
transform: translateX(0);
transition:opacity 0.8s 0.3s,transform 0.8s 0.3s;
}
.to-big{
transform: scale(0.3);
opacity:0;
}
.to-big.scrollin,
.loaded .to-big.ose,
.to-big.is-active{
transform: scale(1);
opacity:1;
transition:transform 0.8s 0s,opacity 0.8s 0s;
}
.loaded .to-big.ose{
transition:transform 0.8s 0.4s,opacity 0.8s 0.4s;
}
.to-big-late{
transform: scale(0.3);
opacity:0;
}
.to-big-late.scrollin,
.loaded .to-big-late.ose{
transform: scale(1);
opacity:1;
transition:transform 0.8s 0s,opacity 0.8s 0s;
}
.loaded .to-big-late.ose{
transition:transform 0.8s 1.6s,opacity 0.8s 1.6s;
}
.to-small{
transform: scale(1.7);
opacity:0;
}
.to-small.scrollin,
.loaded .to-small.ose{
transform: scale(1);
opacity:1;
transition:transform 0.8s 0s,opacity 0.8s 0s;
}
.loaded .to-small.ose{
transition:transform 0.8s 0.4s,opacity 0.8s 0.4s;
}
.blur {
filter: blur(40px);
}
.blur.scrollin{
filter: blur(0);
transition:filter 1.2s 0s;
}
.blur-lite {
filter: blur(6px);
}
.blur-lite.scrollin,
.loaded .blur-lite.ose{
filter: blur(0);
transition:filter 1.6s 0s;
}

.deep-blur {
filter: blur(90px);
}
.deep-blur.scrollin{
filter: blur(0);
transition:filter 1.4s 0s;
}


.clip{
clip-path: inset(0 100% 0 0);
transition:clip-path 1.8s 0s;
}
.clip.scrollin,
.loaded .clip.ose{
clip-path: inset(0);
transition:clip-path 1.8s 0s;
}
.loaded .clip.ose{
transition:clip-path 2.2s 2.5s;
}
.clip-down{
clip-path: inset(0 0 100% 0);
transition:clip-path 1.5s 0s;
}
.clip-down.scrollin,
.loaded .clip-down.ose{
clip-path: inset(0);
transition:clip-path 1.5s 0s;
}
.loaded .clip-down.ose{
transition:clip-path 2.2s .5s;
}



@media screen and (max-width: 1200px) {
.ss-matrix-once p.upper {
    min-height: 200px;
}
.ss-matrix-once p.lower {
    min-height: 204px;
}
}



@media screen and (max-width: 1024px) {
article {
margin: -38px 0 0;
}
.main-ttl p {
    top: 11%;
    font-size: 14px;
}
.social-style-ttl {
    width: 90%;
    max-width: 270px;
    margin: 0 auto -46px;
    position: relative;
    z-index: 10;
}
.ttl-favorite {
    max-width: 360px;
    margin: 0 auto 24px;
}
.prospective-ttl img {
    max-width: 400px;
    margin: 0 0 14px;
}
.detail02 {
    width: 100%;
    margin: 0 0 6px;
}
.detail01 {
    width: 75%;
    margin: 0 0 6px;
}

.ac-head{
padding: 4% 5% 4%;
min-height: auto;
border-radius: 8px 8px 0 0;
}
.ac-ill01{
width: 8.2%;
bottom: 8%;
left: 7%;
}
.ac-ill02{
width: 14.5%;
bottom: 8%;
left: 5%;
}
.ac-ill03{
width: 17%;
bottom: 10%;
left: 4%;
}
.ac-ill04{
width: 16%;
bottom: 6%;
left: 4%;
}
.ac-head::after {
right: 5%;
}
.float-arrow03 {
    width: 16%;
    right: 3%;
    top: 105%;
}
.ttl-style01,
.ttl-style02,
.ttl-style03,
.ttl-style04 {
    max-width: 300px;
}
.cont-ttl-style01,
.cont-ttl-style02,
.cont-ttl-style03,
.cont-ttl-style04{
max-width: 340px;
}
h4.ac-cont-tell {
    font-size: 24px;
    padding: 2% 0 5%;
}
.prospective-wrap {
    background: #fff;
    padding: 7% 4% 2%;
}

article .container {
    padding: 12% 0;
}
article .container .btn {
      font-size: 1.3909224012vw; 
}
.ss-matrix-once p {
line-height: 1.6;
}
    .ss-matrix-once p.upper {
        min-height: 210px;
    }
    .ss-matrix-once p.lower {
        min-height: 230px;
    }
.matrix-ill01 {
    width: 36%;
    left: -22%;
    top: -14%;
}
.matrix-ill02 {
    width: 31%;
    right: -17%;
    top: -13%;
}
.matrix-ill03 {
    width: 33%;
    left: -25%;
    top: -6%;
}
.matrix-ill04 {
    width: 30%;
    right: -25%;
    top: -3%;
}
.ac-cont-tag {
    width: 180px;
    font-size: 18px;
    line-height: 2.4;
}
.ac-cont-background-cont {
    font-size: 15px;
    padding: 40px 4%;
}
.ac-cont-background-cont span {
    font-size: 16px;
}
.ac-cont-background-ttl {
    font-size: 20px;
    padding: 20px 0;
}
.float-arrow01 {
    width: 22%;
    right: 3%;
    top: 93%;
}
.look-up {
    padding: 14% 0 8%;
}
}






@media screen and (max-width: 767px) {
.for-pc{
display: none;
}
.for-sp{
display: inline;
}
article {
    line-height: 1.7;
    letter-spacing: 0.05em;
    font-size: 14px;
}
.main-ttl p {
    top: 12%;
    font-size: 14px;
}
.anchor-sec .contents-wrap a {
    width: 33%;
}
.about-social-cont {
    margin: 0 0 10%;
    padding: 5% 5% 4%;
}
.about-social-ttl img {
    max-width: 220px;
    margin: 0 0 4px;
}
.about-social-ttl p {
    font-size: 16px;
    margin: 0 0 5%;
}
.float-arrow01 {
    width: 19%;
    right: 2%;
    top: 98%;
}
.float-arrow02 {
    width: 14.5%;
    left: 5%;
    top: 99%;
}

.social-style-ttl {
    width: 44%;
    max-width: 210px;
    margin: 0 auto -46px;
    position: relative;
    z-index: 10;
}
.social-style-cont {
    background: #fff;
    margin: 0 0 16%;
    padding: 60px 3% 4%;
    position: relative;
}
.verticals-box {
    line-height: 3;
    font-size: 16px;
}
.beside-left,
.beside-right{
    font-size: 16px;
    line-height: 48px;
}
.ss-matrix-once p {
}
    .ss-matrix-once p.upper {
        font-size: clamp(11px, 3.2vw, 14px);
        margin: 0 0 12px;
        min-height: 230px;
    }
    
    
        .ss-matrix-once p.lower {
            font-size: clamp(11px, 3.2vw, 14px);
        margin: 0 0 12px;
        min-height: 250px;
    }
.ss-matrix-ex {
font-size: clamp(11px, 3.2vw, 13px);
    padding: 5% 4%;
    border-radius: 6px;
    font-weight: 500;
}
.ss-matrix-once {
    width: 47%;
    margin: 3vw 0 0;
    padding: 15% 3% 3% 3%;
    border-radius: 6px;
}
    .matrix-ill01 {
        width: 36%;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: -5vw;
    }
    .matrix-ill02 {
        width: 29%;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: -5vw;
    }
    .matrix-ill03 {
        width: 46%;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: -4vw;
    }
    .matrix-ill04 {
        width: 36%;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: -5vw;
    }
.ss-matrix-box::after {
    width: 2px;
    left: calc(50% - 1px);
}
.beside-box {
    height: 48px;
}
.beside-box::after {
    height: 2px;
    top: calc(50% - 1px);
}
.arrow-head01 {
    width: 14px;
    top: 0;
    left: calc(50% - 7px);
}
.arrow-head02 {
    width: 8px;
    top: calc(50% - 6px);
    left: -8px;
}
    .float-arrow03 {
        width: 16%;
        right: 0%;
        top: 99%;
    }
    .ttl-favorite {
        max-width: 200px;
        margin: 0 auto 24px;
    }
.favorite-lead {
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    margin: 0 0 4%;
}
.favorite-text {
    text-align: left;
    margin: 0 0 6%;
    font-weight: 700;
}
.look-up-wrap {
    border-radius: 8px;
    padding: 0 4% 8%;
}
.ttl-look-up {
    width: 75%;
    max-width: 320px;
    margin: 0 auto -20px;
    position: relative;
    top: -30px;
}
.look-up-lead {
    font-size: 16px;
    margin: 0 0 12px;
    text-align: left;
}
.look-up-att-text {
    font-size: 14px;
    margin: 0 0 6%;
    text-align: left;
}
.look-up-ex {
    text-align: left;
    padding: 5% 0 0;
    font-weight: 700;
}
.ac-head::after {
    right: 2%;
    width: 26px;
    height: 26px;
    margin: auto;
}
    .ac-head {
        padding: 4% 0 4% 0;
        border-radius: 8px 8px 0 0;
    }
.ttl-style01,
.ttl-style02,
.ttl-style03,
.ttl-style04 {
width: 62%;
}
    .ac-ill01 {
        width: 8.2%;
        bottom:0;
        top: 0;
        left: 7%;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .ac-ill02 {
        width: 13%;
        bottom:0;
        top: 0;
        left: 5%;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .ac-ill03 {
        width: 17%;
        bottom:0;
        top: 0;
        left: 2%;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .ac-ill04 {
        width: 14%;
        bottom:0;
        top: 0;
        left: 2%;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .prospective-ttl img {
        width: 75%;
        max-width: 300px;
        margin: 0 0 14px;
    }
.gallery-box a {
    width: 32.5%;
    margin: 0 0 1.4%;
}

.gallery-ttl p {
    position: relative;
    right: 0;
    top: 0;
    text-align: right;
    font-size: 10px;
}
.gallery-wrap::after,
.gallery-wrap::before{
width: 44px;
height: 44px;
}
.corner-lb,.corner-rb{
width: 44px;
height: 44px;
}
.prospective-wrap {
    padding: 7% 4% 2%;
}

.employee-once {
    width: 48%;
    font-size: 14px;
    margin: 0 0 8%;
}
.type01 .employee-once-img,
.type02 .employee-once-img,
.type03 .employee-once-img,
.type04 .employee-once-img{
    border-width: 1px;
}
.look-up-ex {
    font-size: 14px;
    margin: 0 0 8%;
}
.prospective-ttl p {
    font-size: 16px;
}
.employee-once .name span {
    font-size: 15px;
}
.employee-once:nth-child(3n - 2),
.employee-once:nth-child(3n - 2).scrollin,
.employee-once:nth-child(3n - 1),
.employee-once:nth-child(3n - 1).scrollin,
.employee-once:nth-child(3n),
.employee-once:nth-child(3n).scrollin{
opacity:1;
transform: translateY(0);
}
.employee-once:nth-child(odd){
opacity:0;
transform: translateY(80px);
transition:opacity 0.7s 0s,transform 0.7s 0s;
}
.employee-once:nth-child(odd).scrollin{
opacity:1;
transform: translateY(0);
transition:opacity 0.7s 0s,transform 0.7s 0s;
}
.employee-once:nth-child(even) {
opacity:0;
transform: translateY(80px);
transition:opacity 0.7s 0.3s,transform 0.7s 0.3s;
}
.employee-once:nth-child(even).scrollin{
opacity:1;
transform: translateY(0);
transition:opacity 0.7s 0.3s,transform 0.7s 0.3s;
}
.employee-once-img {
    border-radius: 4px;
}
.employee-once-img img{
position: relative;
width: 120%;
max-width: 120%;
left: -10%;
}
.employee-once p.name {
font-size: 12px;
    margin: 0 0 12px;
    height: 54px;
}
.employee-once p{
line-height: 1.5;
}
article .container .btn {
      font-size: 3.2vw; 
}
.cont-ttl-style01, .cont-ttl-style02, .cont-ttl-style03, .cont-ttl-style04 {
width: 80%;
max-width: 300px;
    }
.ac-cont-wrap {
    padding: 8% 4% 8%;
}
    h4.ac-cont-tell {
        font-size: 16px;
        padding: 2% 0 5%;
        text-align: left;
    }
.ac-cont-tag {
        width: 110px;
        font-size: 14px;
        line-height: 2.2;
    }
    .ac-cont-background-ttl {
        font-size: 14px;
        padding: 16px 0;
    }
    .ac-cont-background-cont {
        font-size: 14px;
        padding: 18px 4%;
    }
    .ac-cont-background-cont span {
        font-size: 14px;
    }
.ss-ttl01,.ss-ttl02,.ss-ttl03,.ss-ttl04{text-align: center;margin: 0 auto 14px;width: 100%; max-width: 270px;}

}

@media screen and (max-width: 500px) {
.main-ttl p {
    top: 9%;
    font-size: 3vw;
}
    .ss-matrix-once p.upper {
        font-size: clamp(11px, 3.2vw, 13px);
        margin: 0 0 12px;
        min-height: 240px;
    }
    
    
        .ss-matrix-once p.lower {
            font-size: clamp(11px, 3.2vw, 13px);
        margin: 0 0 12px;
        min-height: 260px;
    }
    .verticals-box {
        line-height: 3;
        font-size: 14px;
    }
    .beside-left, .beside-right {
        font-size: 14px;
        line-height: 48px;
    }
}