@charset "utf-8";
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {background: transparent; border: 0; margin: 0; padding: 0; vertical-align: middle; }
body {line-height: 1;-webkit-text-size-adjust:100%;}
h1, h2, h3, h4, h5, h6 { font-weight: normal;}
ul { list-style: none;}
blockquote { quotes: none;}
blockquote:before, blockquote:after {content: '';content: none;}
table { border-collapse: collapse; border-spacing: 0;}
button{ background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; }

/*  clearfix  */
.clear::after { content: ''; display: block; clear: both; }

.hover:hover { opacity:0.8; filter: alpha(opacity=80); -ms-filter: "alpha( opacity=80 )";}
body { font-family: serif; font-size: 4vw; line-height: 1.5; color: #666; font-weight: bold;}
a { text-decoration: none; outline: none;}
a:hover { color: #999; text-decoration: underline; }
a img { border: none; }
img { vertical-align: middle;}
p {margin-top: 0;}
h1 { display:none;}


/*option
----------------------------------------- */

.inner { padding: 0 6%;}
.pc { display: none!important;}

.p-ttl { display: flex; align-items: center; color: #333333; font-size: 7vw; margin-bottom: 10%; text-align: center; line-height: 1.2;}
.p-ttl::after { content: ""; flex-grow: 1;border-top: 2px solid #734492; display: block; margin-left: .4em;}
.p-ttl::before { content: ""; flex-grow: 1;border-top: 2px solid #734492; display: block; margin-right: .4em;}

.p-ttl .pur {display: contents;}
.pur { color: #734492;}

/* modal
------------------------------------------- */
.adult-modal {position:fixed; z-index:9999; top:0; left:0; width:100%; height:100%; margin:0 auto; padding:0;text-align:center; background: rgba(116, 69, 147, 0.8); }

.ninsyou {position: relative;}
.ninsyou-txt { width: 100%; background: #fff; text-align: center; padding: 20% 0; position: absolute;top: 40%;transform: translateY(-40%);-webkit- transform: translateY(-50%);}
.ninsyou-txt img { width: 20%; max-width: 300px; margin-bottom: 5%;}
.ninsyou-txt p { color: #734492; font-size: 4vw; margin-bottom: 5%;}
.ninsyou-btn { display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: center; grid-gap: 5%;}
.ninsyou-btn .ninsyou-enter { width: 40%; color: #fff; background: #734492; padding: 10% 0;}
.ninsyou-btn .ninsyou-leave { width: 40%; background: #fff; border: 1px #734492 solid; padding: 10% 0; color: #734492; padding: 10% 0;}


/* header
------------------------------------------- */

.header-menu { width: 100%; position: fixed; top: 0; z-index: 100; display: flex; flex-wrap: nowrap; background: #fff; align-items: center;}
.header-menu .header-logo { width: 36%; padding: 0 3% ; display: flex; flex-wrap: nowrap;}
.header-menu a { width: 20%;}
.header-menu .header-logo img { width: 85%; margin: 0 auto;}
.header-menu img { width: 100%;}


/* index
-------------------------------------------- */
main { width: 100%;}
main img { width: 100%;}
main .second { background: #fff;}

.hero-images { width: 100%; overflow: hidden; margin: 0 auto; padding-top: 13%;position: relative;}
.hero-images .swiper-button-prev,.swiper-button-next {display: none;}

.floating-menu-sp { position: fixed; bottom: 0; z-index: 100; width: 100%!important; }
.floating-menu-sp ul { font-size: 0;}
.floating-menu-sp ul li {display: inline-block; margin: 0; width: 25%;}


/* site-link
-------------------------------------------- */
.site-link { margin: 0 auto;}
.site-link ul {font-size: 0;}
.site-link ul li { display: inline-block; width: 50%; font-size: 3.3vw; text-align: center; font-weight: bold; padding: 3.5% 0 3%;}
.site-link ul li:first-child { background: #67c0f9;}
.site-link ul li:nth-child(2) { background: #457be6;}
.site-link ul li a { color: #fff;}
.site-link ul li a::after { content: "";
    display: inline-block;
    background-image: url(../image/site-link-icon.png);
    background-size: contain;
    vertical-align: middle;
    height: 16px;
    width: 16px;
    margin-left: 3px;}

/* menu-link
-------------------------------------------- */
.menu-link {padding: 10% 0; background: #efefef;}
.menu-link img { width: 100%;}
.menu-link ul { display: flex; justify-content: space-between; align-items: center; gap: 1%; flex-wrap: wrap;}
.menu-link ul li { width: 49%; margin-top: 2%;}
.menu-link ul li.single { width: 100%; margin-top: 0;}

/* recruit-btn
-------------------------------------------- */
.recruit-btn { padding: 10% 0 0;}
.recruit-btn ul { display: flex; justify-content: space-between;align-items: center; gap: 1%; flex-wrap: wrap;}
.recruit-btn ul li { width: calc(100%/3 - 1%);}


/* recruit
-------------------------------------------- */
.recruit { background: #fff; padding: 20% 0;}
.recruit dl { margin-bottom: 10%;}
.recruit dl dt { background: #333333; padding: 2% 2% 1%; color: #fff; border-radius: 5px; margin-bottom: 3%;}
.recruit dl dt.ttl::before { content: "♥"; margin-right: 1%;}
.recruit dl dd { color: #734492; padding: 0 2%; text-align: justify; word-break: break-all;}
.recruit dl dd .att { color: #666; display: block; margin-top: 2%;}

.recruit dl dd .group-list { margin-top: 4%;}
.recruit dl dd .group-list .ttl { display: flex; align-items: center;}
.recruit dl dd .group-list .ttl::before {content: "■"; margin-right: 1%; }
.recruit dl dd .group-list .ttl::after { content: ""; flex-grow: 1;border-top: 2px solid #d91245; display: block; margin-left: .4em;}
.recruit dl dd .group-list .adress { color: #666; margin-top: 2%; }
.recruit dl dd .group-list .adress p {margin-bottom: 2%; }

.recruit dl dd .group-list dl.access { display: table; width: 100%; margin-top: 2%;}
.recruit dl dd .group-list dl.access dt { background: #d91245; padding: 1% 2%; color: #fff; font-size: 3vw; display: table-cell; width: 20%; text-align: center;}
.recruit dl dd .group-list dl.access dd { display: table-cell; padding: 0 2%; width: auto; text-align: justify;}

.recruit dl dd .group-list .ikebukuro .ttl { color: #734492; }
.recruit dl dd .group-list .ikebukuro .ttl::after { border-top: 2px solid #734492;}
.recruit dl dd .group-list .ikebukuro dl.access dt { background: #734492;}
.recruit dl dd .group-list .ikebukuro dl.access dd { color: #734492;}

.recruit dl dd .group-list .sugamo .ttl { color: #d91245; }
.recruit dl dd .group-list .sugamo .ttl::after { border-top: 2px solid #d91245;}
.recruit dl dd .group-list .sugamo dl.access dt { background: #d91245;}
.recruit dl dd .group-list .sugamo dl.access dd { color: #d91245;}

.recruit dl dd .group-list .meguro .ttl { color: #e75b8e; }
.recruit dl dd .group-list .meguro .ttl::after { border-top: 2px solid #e75b8e;}
.recruit dl dd .group-list .meguro dl.access dt { background: #e75b8e;}
.recruit dl dd .group-list .meguro dl.access dd { color: #e75b8e;}

.recruit dl dd .group-list .shinjuku .ttl { color: #00cdcc; }
.recruit dl dd .group-list .shinjuku .ttl::after { border-top: 2px solid #00cdcc;}
.recruit dl dd .group-list .shinjuku dl.access dt { background: #00cdcc;}
.recruit dl dd .group-list .shinjuku dl.access dd { color: #00cdcc;}


/* group
-------------------------------------------- */
.group { background: url(../image/p-gara-bg.jpg)repeat-y center; background-size: 100%; padding: 10% 0 20%;}
.group .ttl { background: rgba(116, 69, 147, 0.8);; padding: 5% 5%; margin-bottom: 10%; text-align: center; position: relative;}
.group .ttl:after { position: absolute; content: ''; top: 100%; left: 47%; border: 15px solid transparent; border-top: 15px solid rgba(116, 69, 147, 0.8);; width: 0; height: 0;
}
.group .ttl img{ width: 100%; max-width: 645px; }

.group .group-rank-img { margin-bottom: 15%;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.35); border-radius: 2%;}

.group ul li { margin-bottom: 15%;}
.group ul li:last-child { margin-bottom: 0;}
.group ul li img { margin-bottom: 5%;}
.group ul li dl {display: table; width: 100%; margin-bottom: 2%; }
.group ul li dl dt {display: table; width: 100%; display: table-cell; width: 30%; color: #fff; text-align: center; padding: 1%;}
.group ul li dl dd { display: table-cell; padding: 0 2%; width: auto; text-align: justify;}

.group ul li:first-child dl dt { background: #d91245;}
.group ul li:nth-child(2) dl dt { background: #e75b8e;}
.group ul li:nth-child(3) dl dt { background: #00cdcc;}


/* merit
-------------------------------------------- */

.merit { background: url(../image/w-line-bg.jpg)repeat-y center; padding: 10% 0 20%;}

.merit .inner { width: 100%; max-width: 780px; padding: 0;}

/* salary
-------------------------------------------- */

.salary { background: #fff; padding: 0 0 20%;}
.salary ul { width: 90%; margin: 0 auto;}
.salary ul li { padding: 10% 0; border-bottom: 1px #efefef solid;}
.salary ul li:last-child {border-bottom: none; padding-bottom: 0;}


/* voice
-------------------------------------------- */

.voice { background: url(../image/p-gara-bg.jpg)repeat-y center; background-size: 100%; padding: 20% 0 20%;}

.voice li { margin-bottom: 20%;}
.voice li:last-child { margin-bottom: 0;}
.voice li img { margin-bottom: 10%;}



/* Q&A
-------------------------------------------- */
.qa { padding: 20% 0; background: #efefef; }
.qa li { margin-bottom: 4%;}
.qa li:last-child { margin-bottom: 0;}
.qa li dl dt { background: #fff; border-radius: 5px; padding: 2.5% 0 2.5% 2.5%; font-weight: bold; color: #734492; position: relative;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);}
.qa li dl dt:before { margin-right: 2%; content: '';display: inline-block; width: 30px; height: 30px; background-image: url("../image/qaq.png"); background-size: 100%; vertical-align: middle;}
.qa li dl dt p { width: 78%; display: inline-block; vertical-align: middle; margin-bottom: 0;}
.qa li dl dt:after { content: '';display: inline-block; width: 26px; height: 26px; background-image: url("../image/site-link-icon-p.png"); background-size: contain; vertical-align: middle; transition: 0.5s;}
.qa li dl dt.arrow:after { transform: rotate(90deg);}
.qa li dl dd { padding: 4% 4% 3%; }
.qa li dl dd p { display: inline-block; margin-bottom: 0; margin-top: 2%;}




/* flow
-------------------------------------------- */
.flow { padding: 20% 0 0;}

.flow .flow-img { margin-bottom: 5%;}

.flow ul li { background: #fff; margin: 0 auto;  border: 2px solid #fff; position: relative; }

.flow ul li dl dt { margin: 0 auto; font-size: 6vw; color: #734492; line-height: 1; position: relative;}
.flow ul li:first-child dl dt::before { content: '';display: inline-block; width: 50px; height: 50px; background-image: url("../image/num1.png"); background-size: cover; vertical-align: text-bottom; margin-right: 4%; }
.flow ul li:nth-child(2) dl dt::before { content: '';display: inline-block; width: 50px; height: 50px; background-image: url("../image/num2.png"); background-size: cover; vertical-align: text-bottom; margin-right: 4%; }
.flow ul li:nth-child(3) dl dt::before { content: '';display: inline-block; width: 50px; height: 50px; background-image: url("../image/num3.png"); background-size: cover; vertical-align: text-bottom; margin-right: 4%; }
.flow ul li:nth-child(4) dl dt::before { content: '';display: inline-block; width: 50px; height: 50px; background-image: url("../image/num4.png"); background-size: cover; vertical-align: text-bottom; margin-right: 4%; }
.flow ul li dl dd { padding: 5% 0 8% 5%; margin-left: 6%; border-left: dashed #734492 2px;}
.flow ul li dl dd p.att { display: block; background: #fff;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35); color: #734492; font-size: 3vw; padding: 2% 4%;}



/* form
-------------------------------------------- */
.form { padding:10% 0 20%; }

.form ul li { background: #734492; border-radius: 5px; font-size: 5vw; text-align: center; padding: 2% 0; margin-bottom: 4%; }
.form ul li a { color: #fff;}
.form ul li:after { content: '';display: inline-block; width: 26px; height: 26px; background-image: url("../image/site-link-icon.png"); background-size: cover; vertical-align: middle; margin-left:2%; }

/* footer
-------------------------------------------- */
footer {margin: 10% auto 0;}
.footer-menu {background: url(../image/p-gara-bg2.jpg); background-size: 100%; padding: 10% 0 3%;}
.footer-menu img.footer-logo { display: block; width: 70%; margin: 10% auto 10%;}
.footer-menu a img { display: block; width: 100%; margin: 0 auto 10%;}
.footer-menu ul { font-size: 0; text-align: center;}
.footer-menu ul li { display: inline-block; width: 47%; padding: 0 0 2%; margin: 0 5% 5% 0; border-bottom: 1px solid #fff; text-align: center; position: relative; font-size: 2.8vw; vertical-align: bottom;}
.footer-menu ul li:nth-child(2n) { margin-right: 0;}
.footer-menu ul li::after { content: ">"; font-weight: bold; color: #fff; position: absolute; right: 4%;}
.footer-menu ul li a { color: #fff;}


footer .copyright { padding: 2px 0; font-size: 9px; text-align: center; color: #fff; margin:10% auto 0;}