/**********************************************
 * 変数
 **********************************************/
:root {
    --pink-color: #e62f8a;
    --yellow-color: #fbe116;
}

/**********************************************
 * ベース／リセット
 **********************************************/
body {
    font-family: 'Zen Maru Gothic', sans-serif !important;
    font-weight: 400;
    font-style: normal;
    color: #333;
    margin: 0;
    padding: 0;
}

img {
    width: 100%;
}

/**********************************************
 * 共通レイアウトヘルパー
 **********************************************/
.div-definer {
    width: 80%;
    margin: 0 auto;
    margin-top: 5rem;
}

/**********************************************
 * ヘッダー／トップメニュー／メインビジュアル
 **********************************************/
.top-menu {
    width: 100%;
    display: flex;
    justify-content: start;
    position: fixed;
    top: 0;
    z-index: 1;
}

.top-menu #new {
    width: 80px;
    background-color: #9F7251;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56px;
}

.top-menu #new span {
    color: #fff;
    font-size: 1.2em;
    font-weight: bolder;
}

.catcher {
    background-color: #e62f8a;
    flex-grow: 1;
    text-align: center;
    height: 56px;
}

.catcher h1 {
    color: #fff;
}

.hamburger-icon {
    width: 80px;
    background-color: #786352;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    height: 56px;
}

.hamburger {
    z-index: 2;
}

.hamburger img {
    width: 32px;
}

/* MVの重ねテキスト */
.mv-text {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.mv-text1 {
    top: 40%;
}

.mv-text1 img {
    width: 70%;
}

.mv-text2 {
    top: 60%;
}

.mv-text2 img {
    width: 85%;
}

.mv-text3 {
    top: 84%;
}

.mv-text3 img {
    width: 80%;
}

.mv-text4 {
    top: 94%;
}

.mv-text4 img {
    width: 80%;
}

.mv-text5 {
    display: none;
}

/**********************************************
 * メインラッパー
 **********************************************/
main {
    background: url(../images/area/pc/pattern.png) repeat;
}

.main-container {
    margin-top: 0 !important;
    margin: 20px 0 0 0;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/**********************************************
 * セクション：ハッシュタグ
 **********************************************/
.hashtag {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 70%;
    column-gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 5rem;
}

.hashtag p {
    border: solid 1px var(--pink-color);
    padding: 0 .5rem;
    font-weight: 900;
    color: var(--pink-color);
}

/**********************************************
 * セクション：体験タイトル
 **********************************************/
.taiken-title {
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.taiken-title img {
    width: 100%;
}

/**********************************************
 * セクション：ミッドブレイク（LINE導線/CTA）
 **********************************************/
.mid-break {
    background-color: #E9E5E4;
}

.container.mid-break-outer {
    padding: 0;
    position: relative;
}

.mid-break-inner {
    width: 80%;
    margin: 0 auto;
}

.mid-break-button {
    position: absolute;
    left: 5%;
    top: 6%;
}

.mid-break-button img {
    width: 80%;
}

.mid-break-linelink {
    position: absolute;
    left: 5%;
    top: 20%;
    width: 60%;
    margin-top: 18%;
    margin-left: 1rem;
}

.mid-break-linelink img {
    width: 80%;
}

.mid-break-tap {
    position: absolute;
    left: 52%;
    top: 77%;
}

/**********************************************
 * セクション：スタジオエリア
 **********************************************/
.studio-inside {
    position: relative;
}

.studio-btn {
    position: absolute;
    left: 5%;
    width: 50%;
}

.studio-btn1 {
    top: 45%;
}

.studio-btn2 {
    top: 70%;
}

.studio-area-wrapper {
    background-color: #fff;
    padding: 1rem 0;
}

.studio-area {
    padding: 1rem;
}

/**********************************************
 * セクション：ガールズトーク／レビュー
 **********************************************/
.girl-talk {
    margin-top: 0;
}

.girl-talk-header {
    position: relative;
    text-align: center;
    width: 95%;
    margin: 0 auto;
}

.girl-talk-header-rippon {
    position: absolute;
    top: 25%;
    right: 2vw;
    width: 65%;
}

.girl-talk-content {
    background: url(../images/area/pc/24.png) no-repeat top;
    padding: 2% 0 5% 0;
    background-size: cover;
}

.voice-title {
    display: flex;
    justify-content: center;
    column-gap: 2rem;
    margin-top: 1.5rem;
}

.voice-title .voice-title2 {
    margin-top: 2%;
}

.girl-talk-content div.d-voice {
    width: 95%;
    margin: 0 auto;
}

.girl-talk-content div.d-voice:nth-child(2) {
    margin-top: 18%;
}

/**********************************************
 * セクション：SNS
 **********************************************/
.d-sns {
    margin-top: 0;
}

.d-sns-variety {
    width: 70%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    column-gap: 1rem;
}

.d-sns-banner {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

#sns {
    padding-bottom: 0;
}

/**********************************************
 * フッター
 **********************************************/
footer {
    text-align: center;
    background-color: var(--pink-color);
    color: #fff;
}

footer p {
    margin: 0;
    padding: .5rem 0;
}

/**********************************************
 * ナビゲーションドロワー（メニュー）
 **********************************************/
.show {
    transform: translate3d(-50%, 0, 0);
}

#nav {
    top: 56px;
    width: 50%;
    height: 100%;
    position: fixed;
    right: -50%;
    transition: transform 0.3s;
    background: #333;
}

#nav div {
    color: var(--pink-color);
    font-weight: bold;
    font-size: 1.5rem;
    letter-spacing: 0.5rem;
    padding: 0.4em 2.5em;
    border-bottom: solid 1px #fff;
}

#nav ul {
    list-style: none;
}

#nav ul li {
    padding: 1em 3em;
}

#nav ul li:not(:last-child) {
    border-bottom: solid 1px #000;
}

#nav ul li a {
    color: #fff;
    text-decoration: none;
}

#nav ul li a:hover {
    text-decoration: underline;
    color: var(--pink-color);
}

/**********************************************
 * Slick（カルーセル矢印／間隔）
 **********************************************/
.slick-slide {
    margin: 0 27px;
}

.slick-slide div {
    position: relative;
}

.slick-slide div::after {
    content: url(../images/pc/studio/arrow.png);
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    right: -40px;
    cursor: pointer;
}

/**********************************************
 * レスポンシブ（600px以下）
 **********************************************/
@media screen and (max-width:600px) {
    /* SP */

    /* ユーティリティ：PC専用を非表示 */
    .pc-only {
        display: none;
    }

    /* Slickの上書き */
    .slick-slide div::after {
        content: "";
    }

    .slick-prev img,
    .slick-next img {
        width: 28px;
        height: auto;
    }

    .slick-next {
        right: 22px !important;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
    }

    .slick-next .next-label {
        position: absolute;
        top: -30px;
        left: 74%;
        transform: translateX(-50%);
        font-size: 0.75rem;
        background: #fb5c84;
        color: #fff;
        padding: 10px 5px;
        border-radius: 4px;
        white-space: nowrap;
        z-index: 11;
    }

    .slick-next:before,
    .slick-prev:before {
        display: none;
    }

    /* ナビゲーションドロワー */
    #nav {
        top: 40px;
        width: 100%;
        right: -100%;
    }

    #nav ul {
        margin: 0;
        padding: .5rem;
    }

    #nav ul li {
        text-align: center;
    }

    .show {
        transform: translate3d(-100%, 0, 0);
    }

    /* ヘッダー */
    .top-menu {
        align-items: center;
    }

    .top-menu #new {
        width: 50px;
        height: 40px;
    }

    .catcher {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .catcher h1 {
        font-size: 1.2rem;
        margin: 0;
    }

    .top-menu #new span {
        font-size: 1rem;
    }

    .hamburger-icon {
        width: 50px;
        height: 40px;
    }

    /* MV */
    .main-visual {
        margin-top: 40px;
    }

    .mv-text {
        left: unset;
        right: 5%;
        transform: none;
    }

    .mv-text1 {
        top: 20%;
        width: 70%;
    }

    .mv-text1 img {
        width: 100%;
    }

    .mv-text2 {
        top: 40%;
        width: 50%;
    }

    .mv-text2 img {
        width: 100%;
    }

    .mv-text3 {
        top: 50%;
        width: 100%;
        right: 0;
    }

    .mv-text3 img {
        width: 90%;
    }

    .mv-text4 {
        width: 75%;
        top: 67%;
        left: 0;
        right: unset;
    }

    .mv-text4 img {
        width: 100%;
    }

    .mv-text5 {
        width: 95%;
        display: block;
        top: 93%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* セクションの表示切替／レイアウト */
    #trust {
        display: none;
    }

    .div-definer {
        width: 100%;
        margin-top: 0;
    }

    .container.sp-expand {
        padding: 0;
    }

    .girl-talk-header {
        width: 100%;
    }

    #girlstalk {
        padding: 0;
    }

    #sns {
        padding: 0;
    }

    .d-sns-variety {
        width: 95%;
        padding-top: 1rem;
    }

    .d-sns-banner {
        flex-direction: column;
    }

    .studio-area-wrapper {
        background: url(../images/area/sp/13.png) no-repeat top;
        background-size: cover;
    }

    .studio-btn {
        width: 85%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .studio-btn1 {
        top: 30%;
    }

    .studio-btn2 {
        top: 45%;
    }

    .container-fluid.mid-break {
        padding: 0;
    }

    .mid-break-linelink {
        width: 70%;
        left: 0;
        top: 10%;
    }

    .mid-break-tap {
        position: absolute;
        left: 54%;
        top: 46%;
        width: 20%;
    }

    .mid-break-button {
        position: absolute;
        left: unset;
        top: 75%;
        right: 0;
        width: 70%;
    }

    .mid-break-button img {
        width: 100%;
    }

    .voice-title {
        column-gap: 1rem;
        margin-top: 1rem;
    }

    .voice-title .voice-title2 {
        margin-top: 2%;
    }

    .voice-title1,
    .voice-title2 {
        flex-basis: 36%;
    }

    /* Slickの余白 */
    .slick-slide {
        margin-left: 0;
        margin-right: 45px;
    }
}