@charset "UTF-8";

/* INITIAL SETTINGs --------------------------------*/
body {
    --theme-color: #0f276e;
    --font-ryumin: "a-otf-ryumin-pr6n";
    background-image: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.5) 50%, #fff 100%),
        url(../img/pattern.png);
    background-position: center bottom;
    color: #000;
	font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, "メイリオ", Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    font-size: 18px;
    font-weight: normal;
    height: 100%;
    letter-spacing: 1px;
}
a{
    text-decoration: none;
    color: var(--theme-color, #0f276e);
}
a:hover{
	text-decoration: underline;
}
*, ::before, ::after{
    box-sizing: border-box;
}

/* COMMON LAYOUT -----------------------------*/
.wrapper {
	width: 1000px;
	margin: 0 auto;
}
.clearfix::after{
  content: "";
  display: block;
  clear: both;
}


/* HEADER -------------------------*/
body>header{
    background: url(../img/header-bg.png) center bottom / auto 100% no-repeat;
    height: 345px;
}
header .wrapper{
    display: flex;
    justify-content: space-between;
    padding: 90px 30px 0;
    position: relative;
}

#top{
    background-color: #0f276e;
    border: 1px solid #9b8c44;
    border-width: 1px 0;
    box-shadow: 0 0 0 3px #23203e;
    color: #fff;
    margin-top: 3px;
    padding: 4px 0;
    position: relative;
    text-align: center;
}
header aside a[href*="recruit"]{
    background: url(../img/recruit.png) 48px center no-repeat #404da0;
    border: 1px solid #000;
    border-radius: 0 0 3px 3px;
    color: #fff;
    display: inline-block;
    padding: 8px 50px 8px 80px;
    position: absolute;
    right: 30px;
    top: 2px;
}

header aside{
    line-height: 1.5;
    text-align: right;
}
header aside em, header aside a[href^="tel:"]{
    color: var(--theme-color);
    font-size: 2.22rem;
    font-weight: bold;
}
header aside p:nth-of-type(3){
    background-image: linear-gradient(135deg, #fff 0%, #0f276e 20%, #0f276e 80%, #000 100%);
    border: 1px solid #080523;
    border-radius: 3px;
    color: #fff;
    padding: 2px 32px;
    text-align: center;
}

/* NAVIGATION -------------------------------- */
body>nav{
    background-image: linear-gradient( 0deg, #c1c1c1 0%, #ffffff 100%);
    border: 1px solid #999;
    padding: 24px 0;
}
body>nav ul{
    width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
body>nav li{
    padding: 0 24px;
    font-size: 0.88rem;
    white-space: nowrap;
}
body>nav li:not(:last-child){
    border-right: 1px solid #000;
}


/* MAIN ---------------------------------------------*/
main.wrapper{
    border: 90px solid rgba(0, 44, 109, 0.6);
    border-width: 0 90px;
    box-sizing: content-box;
    padding: 0 10px;
    position: relative;
}
main.wrapper::before, main.wrapper::after{
    border: 0 solid #fff;
    border-width: 0 1px;
    width: 80px;
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
}
main.wrapper::before{left: -85px;}
main.wrapper::after{right: -85px;}
.wrapbg{
    background-color: #fff;
    padding: 30px;
}

#toppage .wrapbg{
    display: grid;
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 350px 1fr;
    grid-template-areas:
        "area1 area2"
        "area1 area3"
        "area4 area4"
        "area5 area5";
    grid-column-gap: 30px;
    grid-row-gap: 20px;
}

/* MAIN > TOP PAGE -----------------------------*/
#slider{
    margin: 0 30px 50px;
    padding-top: 30px;
}

#slider .slick-dots{
    justify-content: space-between;
    display: flex ;
    margin-top: 6px;
}
#slider .slick-dots li{
    width: 33%;
}
#slider .slick-dots .slick-active{
    opacity: 0.4;
}
#slider .slick-dots img{
    cursor: pointer;
    width: 100%;
    height: auto;
}

section:not(#pickup) h2{
    border: 2px solid var(--theme-color, #0f276e);
    background:
        url(../img/icon-crown.png) 24px center / auto 100% no-repeat,
        linear-gradient( 90deg, #0f276e 30%,  transparent 100%),
        url(../img/pattern-head.png) right center / auto 100% repeat;
    box-shadow: inset 0 0 0 2px #fff;
    color: #fff;
    margin-bottom: 8px;
    height: 66px;
    line-height: 66px;
    padding-left: 80px;
    position: relative;
}
section:not(#pickup) h2::before{
    background: ;
    content: "";
    position: absolute;
    height: 100%;
    width: 48px;
}

#pickup{
    grid-area: area1;
    border: 2px solid var(--theme-color, #0f276e);
    background-color: var(--theme-color, #0f276e);
    box-shadow: inset 0 0 0 2px #fff;
    color: #fff;
    line-height: 1.5;
    padding: 16px 20px;
    text-align: center;
}
#pickup h2{
    margin-bottom: 8px;
}
#pickup h3{
    font-weight: bold;
    font-size: 1.33rem;
}
.category{
    background: url(../img/ribbon.png) center / contain no-repeat;
    color: #fff;
    margin: 4px 0;
    line-height: 34px;
    text-align: center;
}
#newface-info .category{
    line-height: 24px;
}
#pickup .category{
    background: url(../img/ribbon-w.png) center / contain no-repeat;;
    color: var(--theme-color, #0f276e);
    font-weight: bold;
    font-size:;
    line-height: 44px;
    margin: 8px 0;
}

#news{
    grid-area: area2;
}
#news .inner{
    padding: 20px;
    background-color: #f0eeff;
    line-height: 1.8;
    height: 200px;
    overflow-y: scroll;
}
#news article time{
    font-size: 0.66rem;
}
#news article h4{
    font-size: 1.44rem;
    color: #e03436;
    border-bottom: 3px dotted #9691bd;
    margin-bottom: 16px;
    padding: 8px 0;
}
#news article em{
    font-size: 1.4rem;
    color: #ff00ad;
}
#newface-info{
    grid-area: area3;
}
#newface-info ul{
    display: flex;
    justify-content: space-between;
}
#newface-info li{
    flex-basis: 138px;
    font-size: 0.88rem;
    line-height: 1.5;
}
#newface-info li img{
    width: 100%;
    height: auto;
    max-width: 138px;
}
#newface-info .stats{
    font-size: 0.55rem;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.bottom-banner{
    grid-area: area5;
    display: flex;
    margin: 60px 0;
}
.bottom-banner li{
    margin: 0 15px;
}


/* TOPPAGE SCHEDULE INFO */
#schedule-info{
    grid-area: area4;
}
.girl-list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.girl-list li{
    flex-basis: 232px;
    border: 1px solid #23203e;
    padding: 5px 5px 10px;
    margin-bottom: 4px;
    margin-right: 4px;
    line-height: 1.5;
    font-size: 0.88rem;
}
.girl-list li img{
    width: 100%;
    height: auto;
    max-width: 220px;
}
.girl-list li:nth-child(4n){
    margin-right: 0;
}
.girl-list li:last-child:not(:nth-child(4n)){
    margin-right: auto;
}
.girl-list h3{
  font-size: 1.1rem;
  text-align: center;
}
.girl-list .stats {
  text-align: center;
  font-size: 0.8rem;
}
.girl-list time{
    background-color: var(--theme-color, #0f276e);
    border-radius: 3px;
    color: #fff;
    display: block;
    padding: 4px;
    text-align: center;
}


/* NEWFACE --------------------------------*/
#newface ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#newface li{
    flex-basis: 465px;
    border: 1px solid #000;
    overflow: hidden;
    padding: 8px;
    position: relative;
    min-height: 310px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-bottom: 8px;
}

#newface time{
    background-color: #404da0;
    display: block;
    font-size: 13px;
    padding: 8px;
    position: absolute;
    color: #fff;
    transform: rotate(25deg) translate(26%, -26%);
    width: 200px;
    text-align: center;
    top: 0;
    right: 0;
}


#newface img{
    flex-basis: 220px;
    margin-right: 10px;
}
#newface .right{
    align-self: flex-end;
    line-height: 1.5;
}
#newface .category{
    line-height: 32px;
}
#newface h3{
    font-size: 24px;
    margin-bottom: 4px;
}
#newface .stats{
    font-size: 16px;
    letter-spacing: 0;
    margin-bottom: 4px;
}
#newface .introduction{
    overflow-y: scroll;
    height: 120px;
    color: #404da0;
    font-size: 13px;
    padding: 5px;
}

/* CONCEPT -------------------------------*/
#concept{
    margin-bottom: 64px;
}
#concept div{
    font-family: var(--font-ryumin);
}
#concept .concept-bg{
    background: url(../img/concept-bg.png) center / cover no-repeat;
    color: #cc1d78;
    margin-bottom: 24px;
    min-height: 538px;
    padding: 64px 16px 16px;
    text-shadow:
        0 0 6px #fff, 0 0 12px #fff, 0 0 12px #fff;
}
#concept .concept-bg h3{
    font-size: 54px;
    font-weight: 600;
    margin-bottom: 16px;
    padding-left: 2em;
}
#concept .concept-bg h3 em{
    display: block;
    padding-left: 0.5em;
}
#concept .concept-bg p{
    font-size: 34px;
    font-weight: 400;
    line-height: 1.4;
}
#concept .concept-bg img{
    margin-left: 16px;
}
#concept .concept-text{
    color: #474747;
    font-size: 20px;
    line-height: 1.8;
    padding: 0 20px;
    text-align: center;
}
#concept .concept-text h3{
    border-bottom: 1px solid #000;
    color: #7e0202;
    display: inline-block;
    font-size: 32px;
    margin-bottom: 24px;
    padding: 2px 40px 2px 64px;
    position: relative;
}
#concept .concept-text h3::before{
    content: "";
    background: url(../img/heart.png) left center no-repeat;
    width: 48px;
    height: 67px;
    left: 16px;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
}
#concept .concept-text h3 em{
    color: #ff0000;
}
#concept .concept-text p{
    margin-bottom: 32px;
    text-align: left;
}
#concept .concept-text img{
    display: block;
    margin: 0 auto;
}
/* SYSTEM --------------------------------*/
section#system h2, section#event h2{
    margin-bottom: 32px;
}
#system>div{
    padding: 0 64px;
    line-height: 1.5;
    margin-bottom: 96px;
}
#system .basic-service, #system .options{
    text-align: center;
}
#system h3{
    border: 6px solid transparent;
    border-image: url(../img/border.png) 6 round;
    color: #343434;
    display: inline-block;
    font-family: var(--font-ryumin);
    font-size: 1.88rem;
    margin-bottom: 32px;
    padding: 8px 96px;
    position: relative;
}
#system h3::before, #system h3::after{
    content: "";
    background: url(../img/heart.png) no-repeat;
    height: 100%;
    position: absolute;
    top: 0;
    width: 48px;
}
#system h3::before{
    background-position: left center;
    left: 32px;
}
#system h3::after{
    background-position: right center;
    right: 32px;
}
#system h4{
    border-bottom: 1px dashed #000;
    font-family: var(--font-ryumin);
    font-size: 1.66rem;
    text-align: center;
    margin-bottom: 16px;
    padding: 8px 0;
}
#system h4 span{
    display: block;
    font-size: 1rem;
}

#system dl{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#system dt{
    background-color: #a2baff;
    flex-basis: 25%;
    margin-bottom: 3px;
    padding: 8px 0;
}
#system dd{
    background-color: #cbd8ff;
    flex-basis: 24%;
    margin-bottom: 3px;
    padding: 8px 0;
}
#system dd:nth-of-type(odd){
    margin-right: 1%;
}
#system dd:last-of-type:nth-of-type(odd){
    margin: 0 auto 3px 3px;
}

#system .description{
    font-size: 0.88rem;
    text-align: left;
    margin-top: 16px;
}

#system .creditcard{
    text-align: center;
}
#system .caution ul{
    list-style: disc;
    display: flex;
    flex-wrap: wrap;
}
#system .caution li{
    flex-basis: 38%;
    margin-left: 4%;
}
#system .caution li:nth-child(even){
    flex-basis: 54%;
}
/* ACCESS --------------------------------*/
section#access h2{
    margin-bottom: 64px;
}
#access ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
#access li{
    flex-basis: 400px;
    line-height: 1.5;
    margin-bottom: 24px;
}
#access li h3{
    color: #03133f;
    background: url(../img/access-logo.png) left center no-repeat;
    font-size: 22px;
    padding-left: 32px;
    margin-bottom: 8px;
}
#access li p{
    text-align: center;
}

#event li{
    margin-bottom: 16px;
}

/* FOOTER --------------------------------*/
footer{
    background-color: var(--theme-color, #0f276e);
}
footer .wrapper{
    padding: 0 30px;
}
footer a{
    color: #fff;
}
footer a:hover{
    text-decoration: underline;
}
footer nav ul{
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 24px 0 48px;
}
footer nav li{
    font-size: 15px;
    padding: 0 8px;
}
footer nav li:not(:last-child){
    border-right: 1px solid #fff;
}
footer .flexwrap{
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 64px;
}
footer .flexwrap a[href^="#"]{
    display: inline-block;
    border: 1px solid #fff;
    padding: 16px 48px;
    text-align: center;
}
footer address{
    background-image: linear-gradient(0deg, #0f276e 0%, #2249be 100%);
    color: #fff;
    font-size: 0.83rem;
    padding: 8px 0;
    text-align: center;
}

.footer__banner {
    max-width: 1200px;
    margin: 0 auto 8px;
}

.footer__banner--container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background-color: transparent;
}

.footer__banner--container li a img {
    width: 100%;
}