@charset "utf-8";
body { }
img { max-width: 100%; height: auto; }
.mt3em { margin-top: 3em; }
.mt2em { margin-top: 2em; }
.mt1em { margin-top: 1em; }

.t-bold { font-weight: bold; }
.t-center { text-align: center; }
.t-right { text-align: right; }
.t-sub { font-size: .9375rem; }
.t-pink { color: #f387c7; }
.t-blue { color: #76bbdb; }

.text { line-height: 1.7;  }
.text p + p { margin-top: 1em; }
.marker { text-decoration: underline; text-decoration-color: #ffff7a; text-decoration-thickness: .5em; text-underline-offset: -.25em; font-weight: bold; }


.conts { position: relative; z-index: 3; }
.contents-wrap { width: 80%; margin: 0 auto; }

.dl-list { display: grid; grid-template-columns: 8em minmax(1fr); gap: 1em; }
.dl-list > dt { border-bottom: 3px solid; padding-bottom: 1em; margin-bottom: 1em; }
.dl-list > dd { border-bottom: 1px solid; padding-bottom: 1em; margin-bottom: 1em; }

.main { width: 750px; max-width: 100%;  margin: 0 auto; position: relative; padding-top: min(90px, 12vw); }
.main::before { content: ''; width: 100%; height: 100%; position: absolute; inset: 0; background: url("../img/bg.png") repeat-y top left / 100% auto; z-index: 2; display: : block; opacity: .8; }


.header { background: #FFF; display: flex; padding: 18px 15px; position: fixed; top: 0; left: 0; right: 0; margin: auto;  width: 100%; max-width: 750px; z-index: 999; }
.header .logo { width: 40%; }
.header .link1 { margin-left: auto; width: 28%; }
.header .link2 { margin-left: min(7px, 1vw); width: 28%; }
.header .link1 img,
.header .link2 img {width: 100%; height: auto; }

@media screen and (max-width: 750px) {
  .header { padding: 2vw; }
}

.salery { text-align: center; margin: 25px 0 0; }
.salery .title { width: 80%; height: auto; }

@media screen (max-width: 750px) {
  .salery { margin: 3vw 0 0; }
}
.what { position: relative; padding-top: min(50px, 6.6vw);}
.what::before { content: ''; width: 100%; height: 100%; position: absolute; inset: 0; margin: auto; background: #bfe5f5; clip-path: polygon(0 150px, 100% 0, 100% calc(100% - 50px), 0 calc(100% - 200px)); }
.what .text { margin-bottom: min(70px, 10vw); }
.what .title { width: 72%; }

.cv-button { width: 90%; margin: 0 auto; }

@media screen (max-width: 750px) {
  .what { padding-top: 6.6vw; }
}

.suitable { padding-top: min(80px, 11vw); }
.suitable .title { width: 72%; }
.suitable-conts { display: flex; align-items: center; flex-direction: row; }
.suitable-conts:nth-child(2n) { flex-direction: row-reverse; }
.suitable-conts + .suitable-conts { margin: max(-50px, -5vw) 0 max(80px, 11vw); }

.suitable-conts img { width: 45%; }
.suitable .text { padding: 0 1em 0 .5em; width: 55%; }
.suitable-conts:nth-child(2n) .text { padding: 0 .5em 0 1em; }
.suitable .title { font-size: min(45px, 6vw); color: #ef75bf; margin-bottom: .3em; line-height: 1.2; white-space: nowrap; font-weight: bold; }


.suitable .real { width:86%; }

.why { position: relative; padding-top: 150px;}
.why::before { content: ''; width: 100%; height: 100%; position: absolute; inset: 0; margin: auto; background: #bfe5f5; clip-path: polygon(0 150px, 100% 0, 100% calc(100% - 50px), 0 calc(100% - 200px)); }
.why .title { width:75%;}

.list-why { width: 94%; margin: 0 auto; counter-reset: listnum; }
.list-why > li { background: url("../img/reason.png") no-repeat center center/ 100% 100%; position: relative; color: #ef75bf;  width: 100%; height: min(96px, 13vw); font-weight: bold; counter-increment: listnum; display: flex; align-items: center; padding-left: 15%; justify-content: flex-start; }
.list-why > li::before { content: counter(listnum); font-size: min(43px, 5.7vw); font-weight: bold; width: min(101px, 13vw); height:  min(101px, 13vw); position: absolute; top: 0; left: 0; margin: auto; color: #FFF; text-align: center; padding-top: min(35px, 5vw); line-height: 1; }

.list-why > li + li { margin-top: 10px; }
.why-support { margin: min(50px, 6.6vw) 0 min(160px, 21vw); }
.why-support img { width: 75%; }

.difference { margin-top: min(120px, 16vw); }
.difference .title { width: 75%; margin-bottom: 1em; }
.difference .iow { width: 85%; }
.difference .text { width: 90%; }
.non-adult { margin-top: min(100px, 13.33vw); }
.non-adult .text { width: 90%; margin: 0 auto; margin-top: 2em; }
.non-adult .adok { width: 80%; }


.manager { position: relative; padding-top: 150px;margin-top: -100px; }
.manager::before { content: ''; width: 100%; height: 100%; position: absolute; inset: 0; margin: auto; background: #bfe5f5; clip-path: polygon(0 150px, 100% 0, 100% calc(100% - 50px), 0 calc(100% - 50px)); }


.manager .so { width: 50%; }
.manager .important { width: 74%; }
.manager .woman { width: 40%; }
.manager .operator { width: 75%; }

.manager .text { width: 90%; margin: 1em auto; }
@media screen and (max-width: 750px) {
  
.manager::before { clip-path: polygon(0 20vw, 100% 0, 100% calc(100% - 6.6vw), 0 calc(100% - 26vw)); }
}

.commnet-example { margin-top: min(70px, 10vw); position: relative; }
.commnet-example .title { position: absolute; left: 0; top: 0; right: 0; margin: auto; transform: translateY(-40%); width: 32%; }
.comment { background: linear-gradient(-45deg, #838783 25%, #7c817c 25%, #7c817c 50%, #838783 50%,  #838783 75%, #7c817c 75%) repeat left top / 15px 15px; padding: min(75px, 10vw) 0 min(85px, 12vw); }

.comment .item { width: 90%; margin: 0 auto; padding: .8em .8em 1.5em; border-radius: min(30px, 4vw); }
.comment dt span { padding: 0 1em; border-radius: 2em; display: inline-block; margin-bottom: .5em; margin-right: .5em; font-size: min(30px, 3.8vw);  }
.comment dd { line-height: 1.3; font-weight: bold; font-size: min(31px, 4vw); }

.comment .item:nth-child(1) { background: #FFF; }
.comment .item:nth-child(2) { color: #FFF; }
.comment .item:nth-child(3) { background: #ffff82; }
.comment .item:nth-child(1) dt span { background: #7c817c; color: #FFF;  }
.comment .item:nth-child(2) dt span { background: #FFF; color: #7c817c;  }
.comment .item:nth-child(3) dt span { background: #f387c7; color: #FFF;  }

.commnet-example .desc { width: 90%; margin: max(-40px, -5.3vw) auto 0; display: block; }

.tiktok { text-align: center; margin-top: min(80px, 11vw); }
.tiktok .title { width: 88%; }
.tiktoker { width: 84%; margin-top: min(35px, 4.5vw); }

.cv-work { text-align: center; padding: min(70px, 10vw) 0 min(100px, 13.33vw);  }
.cv-work .title { width: 85%; }
.cv-work a { margin-top: 1em; display: block; }

.interview .title { width: 63%; }
.interview-slider { margin: min(35px, 5vw) 0 min(80px, 11vw); position: relative; }
.slideimg { width: 100%; height: 0; padding-bottom: 177%; position: relative; border-radius: min(5px, 3vw); border: min(10px, 1.3vw) solid #f387c7; box-shadow: min(10px, 1.3vw) min(10px, 1.3vw) 0 #f471bf; }
.slideimg img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; margin: auto; }
.interview-slider-prev{ position: absolute; left: 0; top: 0; bottom: 0; margin: auto; z-index: 10; width: min(90px, 13vw); height: min(145px, 21vw);}
.interview-slider-next{ position: absolute; right: 0; top: 0; bottom: 0; margin: auto; z-index: 10; width: min(90px, 13vw); height: min(145px, 21vw); }

.qa { position: relative; padding-bottom: min(56px, 8vw); }
.qa::before { content: ''; width: 100%; height: 100%; position: absolute; inset: 0; margin: auto; background: #fffe94; clip-path: polygon(0 0, 100% 200px, 100% calc(100% - 250px), 0 100%); }
.list-qa { width: 94%; margin: 0 auto; counter-reset: listnum; }
.list-qa .item { background: #FFF; counter-increment: listnum; border: 3px solid #f387c7; box-shadow: 10px 15px 0 #f387c7; border-radius: min(10px, 1.3vw); margin-bottom: min(35px, 4vw); padding: 0 15px;  }
.list-qa .item:nth-child(2n) { border-color: #94ddff; box-shadow: 10px 15px 0 #94ddff;}

.list-qa dt { border-bottom: 1px dotted; font-size: min(36px, 4.8vw); padding:.8em .3em .3em; font-weight: bold; }
.list-qa dt::before { content: 'Q.'counter(listnum); display: block; font-size: min(30px, 4vw); color: #f387c7; line-height: 1;  }
.list-qa .item:nth-child(2n) dt::before { color: #94ddff; }
.list-qa dd { padding: .5em .5em 1em; }

.list-qa.more { counter-reset: listnum 3; display: none; }
.list-qa.more dt::before { color: #94ddff; }
.list-qa.more .item:nth-child(2n) dt::before { color:#f387c7; }
.list-qa.more .item { border: 3px solid #94ddff; box-shadow: 10px 15px 0 #94ddff; }
.list-qa.more .item:nth-child(2n) { border-color: #f387c7; box-shadow: 10px 15px 0 #f387c7;}

.btn-qa-more { background: none; text-align: center; padding: 0; margin: 0 auto; border: none; width: 94%; display: block; margin-top: min(32px, 5vw); }

@media screen and (max-width: 750px) {
  .list-qa .item { box-shadow: 1.3vw 2vw 0 #f387c7; border-width: 1px; }
  .list-qa .item:nth-child(2n) { box-shadow: 1.3vw 2vw 0 #94ddff;}
  
  .list-qa.more .item { border: 1px solid #94ddff; box-shadow: 1.3vw 2vw 0  #94ddff; }
  .list-qa.more .item:nth-child(2n) { box-shadow: 1.3vw 2vw 0  #f387c7;}
  
  .qa::before { clip-path:  polygon(0 0, 100% 20vw, 100% calc(100% - 30vw), 0 calc(100% - 10vw)); }
}

.footer {background: #FFF; padding: 50px 0 77px; text-align: center; }

.footer .logo { width: 36%; margin-bottom: min(35px, 4vw); }
.footer .navi { display: flex; align-items: center; justify-content: center; }
.footer .navi a { padding: 0 .5em ;color: #f387c7; font-size: min(18px, 2.4vw); display: block;  line-height: 1.1;}
.footer .navi > li + li { border-left: 1px solid #f387c7; }
.copyright { background: #f387c7; color: #FFF; font-size: min(18px, 2.4vw); text-align: center; padding: .3em 0; }
@media screen and (max-width: 750px) {
.footer { padding: 6.6vw 0 11vw; }
}

.fixed-button { position: sticky; bottom: 0; left: 0; right: 0; z-index: 10; }

.js-overlay { position: fixed; top: 0; left: 0; overflow: hidden; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); z-index: 200; cursor: pointer; }
.js-contsWrap:before { content: "×"; position: absolute; top: 0; right: 0; font-size: 30px; color: #fff; font-weight: 100;} 
.js-contsWrap { width: 40vh; max-width: 1200px; margin: 0 auto; padding: 60px 0 0; top: 50%; position: relative; -webkit-transform: translateY(-50%);  transform: translateY(-50%);}
.js-contsInner {position: relative; padding-bottom: 177%; }
.is-modalActive .is-view {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}