/*
Template: cp5-t011-LUMIERE
Theme Name: CP5 T011-LUMIERE-wht
Theme URI: https://castpro-cms.com/
Author: CASTPRO
Author URI: https://castpro-cms.com/
Description: CP5 T011-LUMIERE Parent Theme + White Child Theme
Version: 1.1.1
Text Domain: cp5k11000-child-001
Tags: CASTPRO, T011-LUMIERE, 1 Column
*/

html,
body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}


/* Loading Animation */

#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    /* 背景を透かしてぼかしを見せる */
    z-index: 10000000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 1s ease, visibility 1s ease;
}

#loading.is-loaded {
    opacity: 0;
    visibility: hidden;
}

.loading-inner {
    width: calc(100% - 100px);
    /* 左右 50px */
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loading-bar {
    width: 0%;
    height: 1px;
    background-color: #fff;
}

.loading-count {
    margin-top: 15px;
    color: #fff;
    font-size: 14px;
    font-family: serif;
    letter-spacing: 0.15em;
    font-family: "Ballet", cursive;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}


/* #enter-image のぼかし制御 */

#enter-image img {
    filter: blur(15px);
    transition: filter 1s cubic-bezier(0.4, 0, 0.2, 1);
}

#enter.is-ready #enter-image img {
    filter: blur(0);
}

#enter-navi .button {
    background: linear-gradient( 45deg, #978870, #dbd1c2, #978870, #dbd1c2, #978870) !important;
    opacity: 0.7;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    /* Safari対応 */
    border: #d8c7ab 1px solid !important;
    color: #fff !important;
    text-shadow: 1px 1px 2px #978870;
    height: auto;
    padding: 1.2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-family: "Gilda Display", serif;
    font-weight: 400;
    font-style: normal;
}

#enter-navi .button:hover {
    opacity: 1;
}

.text_ent {
    font-size: 24px;
    line-height: 1;
}

.text_ent_sub {
    font-size: 12px;
    line-height: 1;
    margin-top: 4px;
}

#enter {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease, top 1s ease 2.5s;
}

#enter.open {
    opacity: 1 !important;
    visibility: visible !important;
}

#enter.is-ready #enter-image img {
    filter: blur(0);
}


/* 巨大ロゴ（large_shop_name）共通設定 */

.large_shop_name {
    position: absolute;
    left: 50px;
    background-image: url(assets/images/shop_text.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 90;
    pointer-events: none;
    will-change: transform;
    opacity: 1 !important;
    visibility: visible !important;
    transition: transform 0.1s linear;
}


/* .large_shop_name.blend {
    mix-blend-mode: soft-light;
} */

.home section {
    padding: 100px 50px 0 150px;
}

.home section h2 {
    font-size: 200px;
    line-height: 1em;
    font-family: "Cinzel", serif;
    font-style: normal;
    text-indent: -5rem;
}

.page-inner-title h2 {
    font-size: 100px;
    font-family: "Cinzel", serif;
    text-align: center;
}

#cp5_news-3,
#cp5_cast_slider-2,
#category_filter_widget-2 {
    padding: 0 50px;
}

.indexnt_l {
    display: block;
    padding-left: 130px;
}

.page-header h2 .title-name {
    font-size: 66px !important;
    font-family: "Cinzel", serif !important;
    font-style: normal;
}

body:not(.home) #header-global-menu a {
    color: #161514;
}

.widget .category-filter,
#category_filter_widget-2 h2 {
    display: none !important;
}

#footer #footer-copy {
    text-align: left;
}

.entry-post.no-thumbnail.columns-1 .post-item {
    padding-left: 0px !important;
}

.section_concept_02_content,
.section_concept_04_content {
    padding: 50px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.align-center-text {
    text-align: center;
    padding: 100px 20px;
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 26px;
}

.gmap {
    width: 100%;
}

.gmap iframe {
    width: 100%;
    height: 300px;
}

.entry-content h3 {
    font-weight: bold;
    font-size: 24px;
    margin: 50px 0 10px 0;
}

.recruit_entry_icon a,
.recruit_entry_icon_bloc a {
    transition: all 0.3s ease;
}

.recruit_entry_icon a:hover,
.recruit_entry_icon_bloc a:hover {
    opacity: 0.8;
}

.footer_sns_icon img {
    height: 40px;
    width: auto;
}

.recruit_entry_icon_bloc {
    margin: 30px 0;
    display: flex;
    gap: 16px;
    justify-content: center;
}

.footer_sns_icon {
    margin: 30px 0;
    display: flex;
    gap: 30px;
    justify-content: center;
}

.cd-pagination .current {
    background-color: #847755;
    border-color: #7a6d4c;
}

#recruit table th,
.basicinfo_item {
    width: 170px;
}

#recruit_terms ul {
    list-style: none;
}

#recruit_terms ul ul li {
    list-style: none;
    padding: 5px 6px 4px 6px;
    border: solid 1px #e0658a;
    color: #e0658a;
    font-weight: bold;
    font-size: 12px;
    border-radius: 4px;
    display: inline-block;
    margin: 0 3px 6px 0;
}

.recruit_movie {
    display: flex;
    justify-content: center;
}

.recruit_map {
    background-color: #e0658a;
    color: #fff;
    padding: 5px 6px 4px 6px;
    margin: 3px;
}

.recruit_view_details {
    display: flex;
    justify-content: center;
    text-align: center;
    width: 300px;
}

.recruit_view_details a {
    margin: 50px auto;
    text-decoration: none;
    padding: 16px 50px;
    display: inline-block;
    background: url(assets/images/arrow_more.png) no-repeat 12px bottom;
    transit: all 0.6s ease;
}

.recruit_view_details a:hover {
    background: url(assets/images/arrow_more.png) no-repeat 15px bottom;
}

.wpcf7-spinner {
    display: block;
}

.credit_card img {
    height: 50px;
    width: auto;
}

.entry-content h3 {
    text-align: center;
    padding: 5px 0 5px 14px;
    /* border-left: #b89b6f 7px solid; */
}

.entry-content {
    font-family: "Gilda Display", serif;
    color: #5c492e;
}

table.system-table tbody,
table.system-table tr,
table.system-table td {
    border-top: none !important;
    border-left: none !important;
    border-right: none;
    border-bottom: 1px #acacac solid;
}


/* ハンバーガーボタン本体 */

.menu-button {
    position: fixed;
    width: 50px;
    height: 50px;
    background: #000;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 999;
    /* ドロワー（999999）より上に表示 */
    transition: border-color 0.4s ease;
    padding: 0;
}


/*--------------------------------------------------------------
# Custom Hamburger Menu (hotelcave implementation)
--------------------------------------------------------------*/

.menu-button__line {
    display: block;
    width: 30px;
    height: 3px;
    margin: 4px 0;
    transition: all 0.6s cubic-bezier(0.7, 0, 0.3, 1);
}

@media screen and (min-width: 48em) {
    .pc_br {
        display: inline-block;
    }
    .menu-button {
        background: transparent;
        top: 25px;
        left: 25px;
    }
    .menu-button__line {
        background-color: #000;
    }
    .gmap_h {
        width: 50%;
    }
    .gmap {
        display: flex;
        gap: 10px;
    }
    #footer {
        padding: 130px 20px;
        position: relative;
    }
    .large_shop_name {
        top: calc(100vh - 448px);
        width: 2630px;
        aspect-ratio: 2630 / 448;
    }
    #footer .large_shop_name_fixed {
        position: absolute;
        left: 0px;
        height: 200px;
        width: 100%;
        opacity: 0.5;
        background-image: url(assets/images/shop_text.png);
        background-size: contain;
        background-repeat: no-repeat;
        z-index: 90;
        top: 260px;
    }
    .page-header h2 {
        font-size: 36px;
    }
    #footer #footer-widget-col .widget_nav_menu ul li {
        list-style: none;
    }
    #footer #footer-widget-col .widget_nav_menu ul li a {
        padding: 0.25rem 0;
        font-size: 16px;
    }
    ul#menu-global-menu-1 {
        display: flex;
        width: 100%;
    }
}

@media screen and (max-width: 48em) {
    .indexnt_l {
        display: inline-block;
        padding-left: 0px;
    }
    .menu-button {
        top: 0;
        left: 0;
    }
    .menu-button__line {
        background-color: #fff;
    }
    #footer-widget-col li a {
        padding: 10px 0;
        display: block;
        font-size: 16px;
        text-decoration: none;
    }
    #nav_menu-2 {
        margin: 20px 0;
    }
    .page-inner-title h2 {
        font-size: 34px;
    }
    .section_concept_05 {
        padding: 0;
    }
    .parallax-block p {
        font-size: 16px;
        line-height: 2.2;
        color: #333;
        font-family: "Shippori Mincho", serif;
        margin-bottom: 1.5rem;
    }
    .align-center-text {
        padding: 20px 0;
        font-size: 14px;
    }
    .section_concept_05_content {
        font-size: 12px;
    }
    .parallax-block p {
        font-size: 16px;
    }
    #footer {
        padding: 20px;
    }
    #category_filter_widget-2 ul {
        padding: 0;
        margin: 0;
    }
    #text-3 {
        padding: 20px;
        font-size: 22px;
    }
    .cast-section {
        padding-left: 24px !important;
    }
    #cp5_news-3,
    #cp5_cast_slider-2,
    #category_filter_widget-2 {
        padding: 20px;
    }
    .entry-post.no-thumbnail.columns-1 .post-item {
        padding-left: 0px;
    }
    #footer #footer-widget-col .widget_nav_menu ul li {
        display: block;
        padding: 0.25rem 0;
        border-bottom-style: solid;
        border-bottom-width: 1px;
    }
    .home section {
        padding: 20px;
    }
    .home section h2 {
        font-size: 28px;
        text-indent: 0rem;
    }
    .large_shop_name {
        top: calc(100vh - 102px);
        left: 20px;
        width: 600px;
        aspect-ratio: 600 / 102;
        text-indent: -0.5em;
    }
}

#enter .border-line {
    position: absolute;
    background-color: #fff;
    z-index: 10000;
    pointer-events: none;
    transition: transform 2s cubic-bezier(0.61, 0.05, 0.5, 0.98);
}


/* 1.左ボーダー: 下から上へ */

#enter .border-left {
    left: 20px;
    bottom: 20px;
    top: 20px;
    width: 1px;
    transform: scaleY(0);
    transform-origin: bottom;
}


/* 2.上ボーダー: 左から右へ */

#enter .border-top {
    top: 20px;
    left: 20px;
    right: 20px;
    height: 1px;
    transform: scaleX(0);
    transform-origin: left;
}


/* 3.右ボーダー: 上から下へ (0.6s遅延) */

#enter .border-right {
    right: 20px;
    top: 20px;
    bottom: 20px;
    width: 1px;
    transform: scaleY(0);
    transform-origin: top;
    transition-delay: 0.2s;
}


/* 4.下ボーダー: 右から左へ (0.6s遅延) */

#enter .border-bottom {
    bottom: 20px;
    right: 20px;
    left: 20px;
    height: 1px;
    transform: scaleX(0);
    transform-origin: right;
    transition-delay: 0.2s;
}


/* Trigger animation when open */

#enter.open .border-left,
#enter.open .border-right {
    transform: scaleY(1);
}

#enter.open .border-top,
#enter.open .border-bottom {
    transform: scaleX(1);
}


/* --- Closing Animation --- */

#enter {
    top: 0;
    transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s, top 1s cubic-bezier(0.92, 0.01, 0.14, 0.99) 0s;
}

#enter.closing {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) !important;
    top: -100vh;
}


/* Border Reverse Animation */

#enter.closing .border-line {
    transform: scale(0);
}


/* 3.4 が先に消え、0.2s後に 1.2 が消える */

#enter.closing .border-right,
#enter.closing .border-bottom {
    transition-delay: 0s;
}

#enter.closing .border-left,
#enter.closing .border-top {
    transition-delay: 0.2s;
}

#enter-navi {
    width: 80%;
    margin: 0 auto;
}

@media print,
screen and (min-width: 48em) {
    body.home #header {
        position: absolute;
    }
}

#header-block-col {
    color: #fff;
}


/*--------------------------------------------------------------
# Custom Hamburger Menu (hotelcave implementation)
--------------------------------------------------------------*/

.menu-button__line {
    display: block;
    width: 30px;
    height: 3px;
    margin: 4px 0;
    transition: all 0.6s cubic-bezier(0.7, 0, 0.3, 1);
}


/* メニューが開いている時のボタン（Xへの変化） */

body.is-menu-open .menu-button__line {
    background-color: #fff;
}

body.is-menu-open .menu-button__line:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
}

body.is-menu-open .menu-button__line:nth-child(2) {
    opacity: 0;
}

body.is-menu-open .menu-button__line:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
}


/* カスタムドロワーメニュー */

.custom-drawer {
    position: fixed;
    top: -100%;
    /* 初期状態は画面外（上） */
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    /* 白のオーバーレイ */
    z-index: 998;
    /* 非常に高い値に設定して確実に最前面へ */
    overflow-y: auto;
    transition: top 0.8s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.8s, visibility 0.8s;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
}


/* メニューが開いた状態 */

body.is-menu-open .custom-drawer {
    top: 0;
    opacity: 1;
    visibility: visible;
}

.custom-drawer .drawer-nav {
    width: 100%;
    max-width: 1200px;
    padding: 80px 40px;
    margin-left: auto;
    margin-right: auto;
}

.custom-drawer ul.drawer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.custom-drawer ul.drawer-menu li {
    margin: 20px 0;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.7, 0, 0.3, 1);
}

body.is-menu-open .custom-drawer ul.drawer-menu li {
    opacity: 1;
    transform: translateY(0);
}


/* メニュー項目のディレイ（順次表示） */

body.is-menu-open .custom-drawer ul.drawer-menu li:nth-child(1) {
    transition-delay: 0.2s;
}

body.is-menu-open .custom-drawer ul.drawer-menu li:nth-child(2) {
    transition-delay: 0.3s;
}

body.is-menu-open .custom-drawer ul.drawer-menu li:nth-child(3) {
    transition-delay: 0.4s;
}

body.is-menu-open .custom-drawer ul.drawer-menu li:nth-child(4) {
    transition-delay: 0.5s;
}

body.is-menu-open .custom-drawer ul.drawer-menu li:nth-child(5) {
    transition-delay: 0.6s;
}

.custom-drawer ul.drawer-menu li a {
    font-weight: 300;
    color: #333;
    text-decoration: none;
    display: inline-block;
    line-height: 1.2;
    font-size: 20px;
}

.custom-drawer ul.drawer-menu li a:hover {
    opacity: 0.6;
}


/* スクロールロック */

body.is-menu-open {
    overflow: hidden;
}

#drawer-menu-container {
    display: block !important;
}

h1.site-description {
    text-indent: -9999px;
}

#header-global-menu ul {
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    margin-top: 20px;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
}


/* =========================================================
   #enter-image の天地左右中央配置
========================================================= */

#enter .row.columns {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


/* =========================================================
   front-page REC RUIT テキスト 左右回転アニメーション
========================================================= */

.anim-headline {
    perspective: 1000px;
}

.anim-char {
    display: inline-block;
    opacity: 0;
    transform-origin: center center;
}

.anim-headline.is-visible .anim-char {
    animation: flipIn 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.anim-char.rotate-left {
    transform: rotateY(-90deg);
}

.anim-char.rotate-right {
    transform: rotateY(90deg);
}

@keyframes flipIn {
    to {
        opacity: 1;
        transform: rotateY(0deg);
    }
}


/* =========================================================
   RECRUIT セクションレイアウト (動画とテキスト)
========================================================= */

#section_recruit {
    position: relative;
}

#section_recruit h2 {
    position: relative;
    z-index: 10;
    pointer-events: none;
    /* テキストの後ろの要素も操作可能にする */
    color: #fff;
    /* differenceで反転させて黒に見せるためのベースの白色 */
    mix-blend-mode: difference;
    /* 背景との差の絶対値を取る。白の背景では黒、黒い動画の上では白になる */
}

.recruit_layout_wrap {
    display: flex;
    flex-wrap: wrap;
    /* align-items: center; */
    position: relative;
    z-index: 1;
    /* h2(RUIT)の後ろ側に配置 */
    margin-top: -90px;
    /* RECの下、RUITの背景に被る位置まで引き上げる */
    padding-left: 20px;
    /* 添付画像にあわせた位置調整 */
}

.section_recruit_video {
    width: 45%;
    max-width: 600px;
    text-indent: 0;
    /* .home sectionのtext-indentの影響をリセット */
}

.section_recruit_video video {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    /* 画像のように少し立体感を出す影を付与 */
}

.section_recruit_content {
    width: 55%;
    padding-left: 50px;
}

.section_recruit_content p {
    text-indent: 0;
    /* リセット */
    font-family: "Shippori Mincho", serif;
    font-size: 18px;
    line-height: 2.2;
    margin-bottom: 0.8rem;
    letter-spacing: 0.05em;
    color: #333;
}


/* スマートフォン表示時の段積み調整 */

@media screen and (max-width: 768px) {
    .recruit_layout_wrap {
        flex-direction: column;
        margin-top: -50px;
        padding-left: 0;
    }
    .section_recruit_video {
        width: 100%;
        margin-bottom: 30px;
        margin-top: 50px;
    }
    .section_recruit_content {
        width: 100%;
        padding-left: 0;
    }
    .section_recruit_content p {
        font-size: 1.4rem;
    }
}


/* =========================================================
   CONCEPT セクション 重なりレイアウト & アニメーション
========================================================= */


/* コンテナ全体の調整 */

#section_concept {
    overflow: hidden;
    padding-bottom: 5rem;
}


/* 重なりレイアウトの基本設定 */

.concept_overlap_row {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 200px;
    width: 100%;
}

.concept_overlap_row.row_reverse {
    flex-direction: row-reverse;
}


/* 画像ブロック */

.parallax-img {
    width: 60%;
    position: relative;
    z-index: 1;
}

.parallax-img figure {
    margin: 0;
    overflow: hidden;
}

.parallax-img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}


/* テキストブロック */

.parallax-block {
    width: 45%;
    padding: 60px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 2;
}


/* 右側に画像がある場合（row_reverse）のテキスト位置調整 */

.concept_overlap_row:not(.row_reverse) .parallax-block {
    margin-left: -10%;
}

.concept_overlap_row.row_reverse .parallax-block {
    margin-right: -10%;
    margin-top: 30%;
}


/* 見出しのスライドインアニメーション */

.reveal-wrapper {
    overflow: hidden;
    margin: 0 0 20px 0;
}

.reveal-text {
    display: block;
    transform: translateY(110%);
    transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    font-family: "Cinzel", serif;
    font-size: 60px;
    line-height: 1.1;
    margin: 0;
}

.reveal-wrapper.is-visible .reveal-text {
    transform: translateY(0);
}


/* 特殊な見出し（BEAUTIFUL CAST） */

.section_concept_03_content .reveal-text {
    font-size: 60px;
    text-align: right;
}


/* セクション05 背景テキスト */

.section_concept_05 {
    position: relative;
    padding: 50px 0;
    text-align: center;
}

.section_concept_05_content {
    position: relative;
    z-index: 2;
    text-align: center;
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    margin: 0 auto;
}

.section_concept_05_bg {
    position: absolute;
    bottom: 2rem;
    left: 0;
    width: 100%;
    z-index: 1;
    pointer-events: none;
    margin: 0;
}

.outline-text {
    font-size: 12vw;
    color: transparent;
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.15);
    text-transform: uppercase;
    white-space: nowrap;
    display: block;
    text-align: center;
    font-family: "Cinzel", serif;
}


/* パララックスの初期値 */

.parallax-img,
.parallax-block {
    will-change: transform;
}


/* スマートフォン対応 */

@media screen and (max-width: 768px) {
    .concept_overlap_row,
    .concept_overlap_row.row_reverse {
        flex-direction: column;
        margin-bottom: 60px;
    }
    .parallax-img,
    .parallax-block {
        width: 100% !important;
        margin: 0 !important;
    }
    .parallax-block {
        padding: 20px;
        background: #fff;
        box-shadow: none;
        backdrop-filter: none;
    }
    .reveal-text {
        font-size: 36px;
    }
    .section_concept_03_content .reveal-text {
        font-size: 36px;
        text-align: left;
    }
    .outline-text {
        font-size: 10vw;
    }
    #section_concept {
        padding-bottom: 5rem;
    }
}