@charset "UTF-8";

/*======================
初期設定
========================*/
html {
    font-weight: normal;
    font-size: 62.5%;
    height: 100%;
}

/* デバイスによってフォントサイズを変える際は以下の値を変更 */
@media (max-width: 1024px) {
    html {
        font-size: 58.5%
    }
}

@media (max-width: 640px) {
    html {
        font-size: 58.5%
    }
}
.none {
    display: none !important;
  }
  .block {
    display: inline-block !important;
  }
body {
    font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, "メイリオ", Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    color: #000;
    font-size: 1.6rem;
    letter-spacing: 2px;
    height: 100%;
    background: url(../img/background.png.jpg) center top / 100% auto no-repeat;
}

a {
    text-decoration: none;
    color: #000;
}

a:hover {
    color: #00bcd4;
}


/* フォント-------------*/

/* レイアウト -------------*/
section {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 20px auto 128px;
    width: 1200px;
}

.wrapper {
    width: 1200px;
    margin: 0 auto;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}


/*======================
共通要素
========================*/
.content {
    border: 1px solid #a0a0a0;
    border-top-width: 0;
    padding: 20px;
}

h2 {
    height: 80px;
    line-height: 80px;
    padding-left: 16px;
    position: relative;
    color: #8b4417;
    font-family: "a-otf-ryumin-pr6n", "Yu Gothic", serif;
    font-size: 2rem;
    text-transform: uppercase;
    background-image:
        linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.8) 32px, transparent 64px),
        linear-gradient(90deg, rgb(219, 181, 158) 0%, rgb(154, 94, 56) 100%);
}

h2 em {
    font-size: 3.6rem;
    margin-right: 10px;
}



/*======================
ヘッダー
========================*/
header {
    font-family: "a-otf-ryumin-pr6n", "Yu Gothic", serif;
    text-align: center;
    position: relative;
}

header #top {
    background-color: #e8e8e8;
    color: #9d9d9d;
    padding: 4px 0;
}

header h1 a {
    display: inline-block;
    background: url(../img/logo.png) center no-repeat;
    width: 447px;
    height: 255px;
    margin-top: 80px;
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
}

header a[href^="tel"] {
    display: inline-block;
    background-color: #754324;
    font-size: 24px;
    color: #fff;
    padding: 8px 16px;
    margin-bottom: 16px;
}

header a[href^="tel"] span {
    display: inline-block;
    border-left: 1px solid #fff;
    padding-left: 16px;
}

header a[href^="tel"] i {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    background: url(../img/call-answer.png) left center / auto 90% no-repeat;
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    top: 1.5px;
}

header p {
    font-size: 3.6rem;
    margin-bottom: 32px;
}

header nav {
    height: 70px;
    line-height: 70px;
    background: url(../img/nav_bg.png) center / cover no-repeat;
    position: relative;
    bottom: 0;
}

header nav ul {
    display: flex;
    justify-content: space-between;
    text-align: center;
}


/*======================
トップページ
========================*/
#headline {
    display: flex;
    box-sizing: border-box;
    background-color: #59493f;
    padding: 8px 16px;
    margin-bottom: 20px;
}

#headline h3 {
    width: 10%;
    color: #fff;
    line-height: 125%;
}

#headline h3 span {
    display: block;
    text-transform: uppercase;
}

#headline p {
    width: 90%;
    background-color: #fff;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6);
    padding: 4px 8px;
    line-height: 150%;
    position: relative;
    overflow: hidden;
}

#headline p span {
    overflow: hidden;
    white-space: nowrap;
    padding-left: 100%;
    display: inline-block;
    animation-name: CSSmarquee;
    animation-timing-function: linear;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

#headline p span:after {
    content: "";
    white-space: nowrap;
}

@keyframes CSSmarquee {
    from {
        transform: translate(0);
    }

    to {
        transform: translate(-100%);
    }
}

#banner {
    letter-spacing: -0.4em;
    margin-bottom: 20px;
}

#banner a {
    letter-spacing: normal;
    display: inline-block;
    width: 32%;
}

#banner a:nth-of-type(2) {
    margin: 0 2%
}

#banner img {
    width: 100%;
    height: auto;
}

#pickup,
#today_schedule,
#newgirl,
#banner2 {
    float: left;
}

#news {
    margin-bottom: 20px;
}

#news .content {
    height: 320px;
}

#news article {
    padding: 20px;
}

#news article time {
    font-size: 1.2rem;
    margin-bottom: 8px;
    display: block;
}

#news article h3 {
    background-color: #d9d9d9;
    color: #2a2a2a;
    font-weight: bold;
    padding: 4px;
    margin-bottom: 20px;
}

.news_body {
    line-height: 24px;
    position: relative;
    padding-right: 320px;
    box-sizing: border-box;
}

.news_body img {
    display: block;
    position: absolute;
    right: 0;
}

.text_pink {
    font-size: 1.8rem;
    color: #de47a0;
}

.text_red {
    font-size: 2rem;
    color: red;
}

#pickup,
#banner2 {
    width: 450px;
    margin-right: 30px;
}

#today_schedule,
#newgirl {
    width: 720px;
}

#banner2,
#newgirl .content {
    height: 350px;
    box-sizing: border-box;
}

#pickup .content,
#today_schedule .content {
    height: 580px;
    margin-bottom: 20px;
    box-sizing: border-box;
}


#pickup img {
    width: 100%;
    height: auto;
}

#banner2 a {
    display: block;
    margin-bottom: 8px;
}

#banner2 a:nth-of-type(2) {
    margin-bottom: 0;
}

.inner {
    overflow-y: scroll;
    height: 100%;
}

#today_schedule ul {
    letter-spacing: -0.4em;
}

#today_schedule li {
    letter-spacing: normal;
    width: 31.5%;
    margin: 0 1.5% 14px 0;
    border: 1px solid #bcb9b7;
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
    padding: 4px;
    line-height: 32px;
}

#today_schedule li:nth-child(3n) {

}

#today_schedule li a {
    display: block;
    position: relative;
}

#today_schedule h3 em {
    font-size: 2.2rem;
}

#today_schedule p {
    border-bottom: 1px solid #737373;
}

#newgirl li {
    position: relative;
    border: 1px solid #bcb9b7;
    padding: 15px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

#newgirl a {
    display: inline-block;
    width: 32%;
}

#newgirl a img {
    width: 100%;
    height: auto;
}
#newgirl li img{
    width: 157px;
}

#newgirl aside {
    display: inline-block;
    width: 65%;
    margin-left: 1%;
    vertical-align: top;
}

#newgirl h3 {
    margin: 48px 0 10px;
}

#newgirl h3 em {
    font-size: 2.2rem;
}

#newgirl p {
    margin-bottom: 10px;
}

#newgirl time,
#newface time {
    position: absolute;
    right: 15px;
    top: 15px;
    background-color: #b55a11;
    color: #fff;
    display: inline-block;
    padding: 8px;
    font-size: 1.4rem;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}

#newgirl .detail {
    font-size: 1.4rem;
    line-height: 20px;
    -webkit-line-clamp: 7;
}

.new {
    background-image: linear-gradient(45deg, rgb(188, 69, 69) 0%, rgb(250, 75, 76) 50%, rgb(188, 69, 69) 100%);
    text-transform: uppercase;
    display: inline-block;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 1.4rem;
    padding: 0 8px;
    border-radius: 4px;
    position: absolute;
    bottom: 16px;
    right: 16px;
}

/*======================
スケジュール
========================*/
#schedule .content,
#cast .content {
    padding: 30px 20px;
}

#schedule ul,
#cast ul {
    letter-spacing: -0.4em;
}

#schedule ul li,
#cast ul li {
    display: inline-block;
    letter-spacing: normal;
    width: 23.5%;
    padding: 10px;
    margin: 0 1.5% 24px 0;
    box-sizing: border-box;
    border: 1px solid #bcb9b7;
    text-align: center;
    font-size: 1.4rem;
}

#schedule ul li:nth-child(4n),
#cast ul li:nth-child(4n) {

}

#schedule ul li time {
    display: block;
    background-image:
        url(../img/clock.png),
        linear-gradient(85deg, #b79671 0%, #d4aa7d 54%, #b08d68 100%);
    background-repeat: no-repeat;
    background-position: 25% center;
    color: #fff;
    padding: 8px 0;
    margin-bottom: 10px;
}

#today_schedule ul li img,
#schedule ul li img,
#cast ul li img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

#schedule ul li h3,
#cast ul li h3 {
    margin-bottom: 10px;
}

#schedule ul li h3 em,
#cast ul li h3 em {
    font-size: 2rem;
}

/*======================
新人情報
========================*/
#newface ul {
    letter-spacing: -0.4em;
}

#newface li {
    letter-spacing: normal;
    border: 1px solid #bcb9b7;
    position: relative;
    padding: 10px;
    width: 49%;
    margin: 0 2% 24px 0;
    display: inline-block;
    box-sizing: border-box;
}

#newface li:nth-child(even) {
    margin-right: 0;
}

#newface a {
    display: inline-block;
    margin-right: 5%;
}

#newface  img {
    width: 152px;
    height: auto;
}

#newface aside {
    display: inline-block;
    width: 60%;
    vertical-align: top;
}

#newface h3 {
    margin: 20px 0 10px
}

#newface h3 em {
    font-size: 2.2rem;
}

#newface p {
    margin-bottom: 10px;
}

#newface .detail {
    font-size: 1.3rem;
    line-height: 19px;
}


/*======================
イベント
========================*/
#event .content {
    padding: 50px 100px;
}

#event ul li {
    margin-bottom: 50px;
    padding-bottom: 50px;
    border-bottom: 1px dotted #000;
}

#event ul li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border: 0 none;
}


/*======================
アクセス
========================*/
#access .content {
    padding: 50px 100px;
}

#access ul {
    letter-spacing: -0.4em;
}

#access ul li {
    letter-spacing: normal;
    display: inline-block;
    width: 48%;
    margin: 0 4% 30px 0;
}

#access ul li h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    font-family: 'a-otf-ryumin-pr6n', 'Yu Gothic', Serif, 'MS Mincho';
}

#access ul li:nth-child(even) {
    margin-right: 0;
}



/*======================
料金システム
========================*/
#system {
    margin-bottom: 50px;
}

.base {
    width: 800px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #a0a0a0;
    background-color: #fff;
    box-sizing: border-box;
}

.base dl {
    letter-spacing: -0.4em;
    padding: 0 40px;
    line-height: 32px;
}

.base dt,
.base dd {
    letter-spacing: normal;
    display: inline-block;
}

.base dt {
    width: 30%;
    position: relative;
}

.base dd {
    width: 15%;
    text-align: right;
}

.base dt:after {
    content: "・・・・・・";
    letter-spacing: -6px;
    position: absolute;
    right: -16px;
}

.base dd:nth-of-type(odd) {
    margin-right: 5%;
}

.base>p {
    text-align: center;
    padding: 8px 0;
    border-bottom: 1px dotted #000;
    margin: 16px 0;
}

.credit-left,
.credit-right {
    display: inline-block;
    width: 48%;
    padding: 0 1%;
}

.credit-left {
    vertical-align: top;
    line-height: 24px;
}

.credit-right img {
    width: 100%;
    height: auto;
}

.course {
    font-family: "a-otf-ryumin-pr6n", "Yu Gothic", serif;
    width: 1000px;
    margin: 50px auto 0;
    padding: 0 70px 50px;
    border-bottom: 1px dashed #333;
    box-sizing: border-box;
    color: #663c1b;
}

.c3 {
    border-bottom: 0 none;
}

.course h3 {
    width: 852px;
    height: 87px;
    text-align: center;
    color: #fff;
    background-repeat: no-repeat;
    line-height: 104px;
    font-size: 2.4rem;
}

.c1 h3 {
    background-image: url(../img/ribon.png);
}

.c2 h3 {
    background-image: url(../img/ribon2.png);
}

.c3 h3 {
    background-image: url(../img/ribon3.png);
}

.course dl {
    letter-spacing: -0.4em;
    margin: 40px 50px 70px;
}

.course dt {
    background-color: #b88d6b;
    color: #fff;
    font-size: 3rem;
    width: 20%;
    text-align: center;
}

.course dd {
    width: 80%;
    font-size: 4rem;
    text-align: right;
}

.course dt em {
    font-size: 6rem;
}

.course dd em {
    font-size: 8.6rem;
}

.course dt,
.course dd {
    letter-spacing: normal;
    display: inline-block;
    vertical-align: middle;
}

.course dd:before {
    content: "・・・・・・";
    position: relative;
    display: inline-block;
    color: #b88d6b;
    position: relative;
    top: -16px;
    right: 40px;
}

.course .detail {
    border-style: solid;
    border-width: 8px;
    border-image: url(../img/boder_play_detail.png) 8 repeat;
    box-sizing: border-box;
    text-align: center;
}

.course .detail h4 {
    display: inline-block;
    background: url(../img/bg_play_detail.png) no-repeat;
    width: 302px;
    height: 62px;
    line-height: 62px;
    margin-top: -38px;
    color: #fff;
    font-size: 1.8rem;
}

.course .detail ul {
    padding: 40px 80px 30px;
    line-height: 32px;
}

.course .detail li {
    display: inline-block;
    margin-right: 16px;
}

#caution ul {
    list-style: disc;
    margin-left: 30px;
    margin-bottom: 30px;
}

#caution .content {
    line-height: 32px;
}

/*======================
フッター
========================*/
footer {
    background-color: #e6d8cf;
    text-align: center;
}

footer .wrapper {
    position: relative;
    padding: 48px 0;
}

footer h3 {
    position: absolute;
    display: inline-block;
    left: 0;
    top: 25%;
}

footer nav ul {
    font-size: 1.4rem;
    letter-spacing: -0.4em;
}

footer nav ul li {
    letter-spacing: normal;
    display: inline;
    border-right: 1px solid #5d4a3e;
    padding: 0 10px;
}

footer nav ul li:last-child {
    border-right: 0 none;
}

footer nav ul a {
    color: #5d4a3e;
}

.pagetop {
    display: inline-block;
    background-color: #a67e65;
    position: absolute;
    right: 0;
    padding: 10px 16px;
    font-size: 1rem;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    bottom: 100%;
    border-radius: 3px 3px 0 0;
}

.pagetop i {
    display: inline-block;
    text-indent: -100%;
    background: url(../img/pagetop.png) center no-repeat;
    width: 12px;
    height: 12px;
    white-space: nowrap;
    overflow: hidden;
    margin-left: 8px;
    vertical-align: top;
}

address {
    background-color: #241004;
    color: #fff;
    font-size: 1.4rem;
    line-height: 24px;
    text-align: center;
    padding: 20px 0;
}

.banner {
    width: 1100px;
    margin: 0 auto;
    text-align: center;
    padding: 50px 0;
}

.banner img {
    width: auto;
    max-width: 100%;
}