/*
 Theme Name: TCD OOPS! Child Theme
 Theme URI:
 Description: My custom child theme for TCD OOPS!
 Author: Your Name シライマッスルファクトリー
 Author URI: https://shirai-muscle.com/
 Template: oops_tcd048
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: tcd-w
*/

/* 親テーマのスタイルシートを@importしない場合は、@import url("親テーマのstyle.cssのURL"); を追加 */

body, p, li, a, h1, h2, h3, h4, h5, h6 { /* フォントを適用したい要素をカンマ区切りで指定 */
    font-family: "Yusei Magic", sans-serif!important; /*  はテーマの既存スタイルを上書きするため */
    font-weight: 400!important; ; /* Yusei Magic は通常400 */
    font-style: normal!important; ;
    letter-spacing: 2px!important; ; /* 全体の文字間隔を2pxに設定 */
}

/* PC用のデフォルトスタイル */
.l-main {
    background-image: url("https://shirai-muscle.com/img/background_pc.jpg"); /* PC用の画像パス */
    background-size: cover;         /* 画像が要素全体を覆うように調整（アスペクト比を維持） */
    background-position: center;    /* 画像を中央に配置 */
    background-repeat: no-repeat;   /* 画像の繰り返しをしない */
    background-attachment: fixed;   /* ★ここを追加/変更★ スクロールしても背景を固定 */
    min-height: 100vh;              /* 必要に応じて、ビューポートの高さ全体を最低限確保 */
    /* その他のスタイル */
}

/* スマホ用のスタイル (画面幅が767px以下の場合に適用) */
@media screen and (max-width: 767px) {
    .l-main {
        background-image: url("https://shirai-muscle.com/img/background_sp.jpg"); /* スマホ用の画像パス */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed; /* ★ここも追加/変更★ スクロールしても背景を固定 */
        /* その他のスマホ用スタイル */
    }
}

.p-entry__body, .p-entry__body p{font-size:16px ;} 

#cb_0{margin-top: 0 ;}

.l-header__inner{max-width: 100%!important;}
.l-inner{max-width: 68.4027777778%;}

/* ----------------------------------------------------------------------
カスタムスタイル追加エリア (ここに追加したスタイルを記述します)
---------------------------------------------------------------------- */

 /**
	* index slider
	*/
/*
 * 既存のスタイルを上書きするためのCSS
 */

.p-index-slider {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100vh; /* Changed from 780px to 100vh, 親テーマを上書き */
  min-height: 445px;
}

.p-index-slider__item {
  background-position: center center;
  background-size: cover;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.p-index-slider__item:first-child {
  display: block;
}

.p-index-slider__item--type3.is-active .p-index-slider__item-catch,
.p-index-slider__item--type3.is-active .p-index-slider__item-desc,
.p-index-slider__item--type3.is-active .p-index-slider__item-image {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

.p-index-slider__item-inner {
  color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: auto;
  position: absolute;
  min-height: 50vh; /* Added min-height, 親テーマを上書き */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* 既存のflexboxの挙動を解除し、absoluteでの配置を容易にする */
  /* 最初のスライダーのみに適用 */
  .p-index-slider__item--type1 & { /* 親セレクタに適用したいスタイルをネスト */
    display: block;
    height: 100%;
    width: 100%;
  }
}

/* 画像を画面中央に配置し、高さの90%にする */
.p-index-slider__item--type1 .p-index-slider__item-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto; /* 幅は自動調整 */
  height: 80vh; /* 画面の高さの80% */
  max-width: none; /* 既存のmax-widthを解除する場合があります */
  opacity: 1; /* 初期状態から表示 */
  transition: none; /* 元のtransitionを無効にするか、新しいtransitionを設定 */
}

.p-index-slider__item--type1 .p-index-slider__item-image img {
  height: 100%; /* 親要素の高さに合わせる */
  width: auto; /* 幅はアスペクト比を維持して自動調整 */
  object-fit: contain; /* 画像全体が表示されるように調整 */
}

@media screen and (max-width: 767px) {
    .p-index-slider {
        height: 100vh!important;
    }
    .p-index-slider__item--type1 {
      background-image: url("https://shirai-muscle.com/img/sp_mv.jpg")!important;
    }
    .p-index-slider__item--type1 .p-index-slider__item-image img{width: 70%;}
    body.home .p-entry__body{margin-top: 0;}

}


/* 全体のコンテナ */
.store-page-container {
    width: 80% ;
    max-width:2000px ;
    margin: 40px auto ;
    padding: 0 20px ;
    box-sizing: border-box ;
}


/* 最上部の店舗名 */
.store-main-title {
    text-align: center ;
    font-size: 2.5em ;
    margin-bottom: 30px ;
    color: #333 ;
}

/* 中央部分のラッパー（店舗詳細と地図） */
.store-details {
    display: flex ;
    flex-wrap: wrap ;
    gap: 30px ;
    margin-bottom: 0 ;
    align-items: flex-start ;
}

/* 左側の店舗詳細パネル */
.store-details-panel {
    flex: 1 ;
    min-width: 300px ;
    padding: 25px ;
    background-color: #ffffff ;
    border-radius: 8px ;
}

/* 左側の店舗詳細パネル */
.store-details-panel h3{
    margin-bottom: 30px;
}

.store-details-content {
    display: none ;
    animation: fadeIn 0.6s ease-out forwards ;
}

.store-details-content.active-content {
    display: block ;
}

.store-details-panel .detail-img img{
    margin-bottom: 20px ;
    border-radius: 10px;
}
/* Google Map iframe のラッパー */
.iframe-map-wrapper {
    position: relative ;
    width: 100% ;
    padding-bottom: 56.25% ;
    height: 0 ;
    overflow: hidden ;
    margin: 20px 0 ;
    border-radius: 5px ;
}

.iframe-map-wrapper iframe {
    position: absolute ;
    top: 0 ;
    left: 0 ;
    width: 100% ;
    height: 100% ;
    border: 0 ;
}


/* 右側の地図パネル */
.map-panel {
    position: relative ;
    flex: 1.5 ;
    min-width: 350px ;
    border-radius: 8px ;
}

.map-image {
    width: 100% ;
    height: auto ;
    display: block ;
}

/* 初回メッセージのスタイル */
.initial-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 15px 25px;
    border-radius: 8px;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    z-index: 5; /* ホットスポットより手前に表示 */
    white-space: nowrap; /* テキストが改行されないようにする */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    pointer-events: none; /* メッセージ自体がクリックイベントをブロックしないようにする */
    display: none; /* 初期状態では非表示 */
}

/* ホットスポットのスタイル */
.map-hotspot {
    position: absolute ;
    width: 208px ;
    height: 50px ;
    background-size: contain ;
    background-repeat: no-repeat ;
    background-position: center ;
    cursor: pointer ;
    transition: transform 0.3s ease, filter 0.3s ease ;
    transform: translate(-50%, -50%) ;
    filter: brightness(0.8) ;
    z-index: 2 ;
}

/* 各ホットスポットの位置（地図画像に合わせて調整） */
.hotspot-shimoda { top: 75% ; left: 57% ; background-image: url('https://shirai-muscle.com/img/shimoda.png') ;}
.hotspot-minamiizu { top: 85% ; left: 45% ; background-image: url('https://shirai-muscle.com/img/minami-izu.png') ;}
.hotspot-izukogen { top: 32% ; left: 83% ; background-image: url('https://shirai-muscle.com/img/izu-kogen.png') ;}

/* ホットスポットのアクティブ時とホバー時のスタイル */
.map-hotspot:hover,
.map-hotspot.active-hotspot {
    transform: translate(-50%, -50%) scale(2.5) ;
    filter: brightness(1.2) ;
    z-index: 3 ;
}

/* 最下部の全幅スライドショーエリア */
.full-width-slideshow-area {
    width: 100% ;
    position: relative ;
    left: 50% ;
    transform: translateX(-50%) ;
    margin-left: 0 ;
    padding-bottom: 40px ;
    box-sizing: border-box ;
    z-index: 1 ;
    overflow: hidden ;
}

.store-slideshow {
    content-visibility: auto;
    contain-intrinsic-size: auto 300px; /* スライドショーの高さの目安を設定 (適宜調整) */
}

/* スライドショーコンテナの表示/非表示とアニメーション */
.store-slideshow {
    display: none ;
    animation: fadeIn 0.6s ease-out forwards ;
}

.store-slideshow.active-slideshow {
    display: block ;
}

/* スライドショーのコンテナ */
.slideshow-inner-container {
    position: relative ;
    width: 100% ;
    margin: 0 auto ;
    overflow: auto ;
    border-radius: 10px ;
    background-color: #fcfcfc ;
    padding: 10px 0 ;
}

.slideshow-scroll-wrapper {
    overflow-x: auto ;
    -webkit-overflow-scrolling: touch ;
    scroll-snap-type: x mandatory ;
    scrollbar-width: none ;
    -ms-overflow-style: none ;
}
.slideshow-scroll-wrapper::-webkit-scrollbar {
    display: none ;
}

.slideshow-images {
    display: flex ;
    gap: 15px ;
    padding: 0 20px ;
}

.slideshow-images img {
    flex-shrink: 0 ;
    width: 250px ;
    height: 180px ;
    object-fit: cover ;
    border-radius: 8px ;
    cursor: pointer ;
    transition: transform 0.4s ease-out, filter 0.4s ease-out ;
    filter: brightness(0.95) ;
}

.slideshow-images img:hover {
    transform: scale(1.05) ;
    filter: brightness(1.1) ;
}

/* スライドショーの矢印 */
.slideshow-arrow {
    position: absolute ;
    top: 50% ;
    transform: translateY(-50%) ;
    background-color: rgba(0, 0, 0, 0.6) ;
    color: white ;
    border: none ;
    padding: 10px 15px ;
    cursor: pointer ;
    font-size: 24px ;
    z-index: 10 ;
    border-radius: 5px ;
    transition: background-color 0.3s ease ;
}
.slideshow-arrow.left { left: 5px ; }
.slideshow-arrow.right { right: 5px ; }
.slideshow-arrow:hover { background-color: rgba(0, 0, 0, 0.8) ; }

/* ライトボックスのスタイル */
.lightbox {
    opacity: 0 ;
    transition: opacity 0.3s ease-out ;
    display: none ;
    position: fixed ;
    z-index: 9999 ;
    left: 0 ;
    top: 0 ;
    width: 100% ;
    height: 100% ;
    overflow: auto ;
    background-color: rgba(0, 0, 0, 0.9) ;
    align-items: center ;
    justify-content: center ;
    backdrop-filter: blur(5px) ;
}
.lightbox-content {
    margin: auto ;
    display: block ;
    max-width: 90% ;
    max-height: 90% ;
    border-radius: 10px ;
    transform: scale(0.8) ;
    opacity: 0 ;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out ;
}
.lightbox-close {
    position: absolute ;
    top: 20px ;
    right: 35px ;
    color: #f1f1f1 ;
    font-size: 40px ;
    font-weight: bold ;
    transition: 0.3s ;
    cursor: pointer ;
    z-index: 10000 ;
}
.lightbox-close:hover,
.lightbox-close:focus {
    color: #bbb ;
    text-decoration: none ;
    cursor: pointer ;
}
.lightbox-nav {
    position: absolute ;
    top: 50% ;
    transform: translateY(-50%) ;
    color: #f1f1f1 ;
    font-size: 50px ;
    cursor: pointer ;
    padding: 16px ;
    font-weight: bold ;
    user-select: none ;
    -webkit-user-select: none ;
    transition: 0.3s ;
    background-color: rgba(0,0,0,0.5) ;
    border-radius: 5px ;
}
.lightbox-nav:hover {
    background-color: rgba(0,0,0,0.8) ;
}
.lightbox-nav.prev { left: 15px ; }
.lightbox-nav.next { right: 15px ; }

/* lightboxがアクティブな時に表示 */
.lightbox.is-active {
    display: flex ; /* is-active時にdisplay:flexにする */
    opacity: 1 ; /* 完全に表示 */
}

.lightbox.is-active .lightbox-content {
    transform: scale(1) ; /* 最終的な大きさ（等倍） */
    opacity: 1 ; /* 最終的な透明度（完全に表示） */
}

/* フェードインアニメーション */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.vertical-social-banner {
  position: fixed ;
  top: 50% ;
  right: 20px ;
  transform: translateY(-50%) ;
  z-index: 1000 ;
  display: flex ;
  flex-direction: column ;
  align-items: center ;
  gap: 20px ;
}

/* Styling for all links */
.vertical-social-banner a {
  display: inline-block ;
  color: #000 ;
  text-decoration: none ;
  transition: transform 0.2s ease-in-out ;
}

/* Hover Effect: Scale up */
.vertical-social-banner a:hover {
  transform: scale(1.2) ;
}

/* Font Awesome icon size */
.vertical-social-banner a i {
  font-size: 35px ;
}

/* Custom icon (image) size */
.vertical-social-banner a.original-icon img {
  width: 50px ;
  height: auto ;
  display: block ;
}

/* Hides the banner on mobile devices */
@media (max-width: 768px) {
  .vertical-social-banner {
    display: none ;
  }
}

/* 店舗のスマホ設定 */
@media (max-width: 768px) {
    /* スマートフォン表示時の全体コンテナの幅を調整 */
    .store-page-container {
        width: 95%; /* スマートフォンでより広く表示 */
        margin: 20px auto;
    }

    /* 店舗詳細と地図の並び順を反転 */
    .store-details {
        flex-direction: column-reverse; /* 地図が上に、詳細が下になるように */
        gap: 20px; /* スマートフォンでの隙間を調整 */
    }

    /* 地図パネルの幅を調整（スマートフォンで全幅に） */
    .map-panel {
        min-width: unset; /* 最小幅の指定を解除 */
        width: 100%;
        flex: none; /* flexの比率指定を解除 */
    }

    /* 店舗詳細パネルの幅を調整（スマートフォンで全幅に） */
    .store-details-panel {
        min-width: unset; /* 最小幅の指定を解除 */
        width: 100%;
        flex: none; /* flexの比率指定を解除 */
    }

    /* 最上部の店舗名のフォントサイズ調整 */
    .store-main-title {
        font-size: 2em;
        margin-bottom: 20px;
    }

    /* 初回メッセージのフォントサイズ調整 */
    .initial-message {
        font-size: 1em;
        padding: 10px 15px;
    }

    /* ホットスポットのサイズと位置調整 (必要であれば) */
    /* スマートフォンでの地図画像サイズに合わせて調整が必要になる場合があります */
    .map-hotspot {
        width: 150px; /* スマートフォン向けに小さくする例 */
        height: 40px;
    }

    /* ホットスポットのアクティブ時とホバー時のスケールを調整 */
    .map-hotspot:hover,
    .map-hotspot.active-hotspot {
        transform: translate(-50%, -50%) scale(1.8); /* スマートフォン向けにスケールを調整 */
    }

    /* 各ホットスポットの位置もスマートフォンの地図画像に合わせて微調整が必要になる場合があります */
    /* 例:
    .hotspot-shimoda { top: 70%; left: 55%; }
    .hotspot-minamiizu { top: 80%; left: 40%; }
    .hotspot-izukogen { top: 30%; left: 80%; }
    */

    /* スライドショーの画像サイズ調整 */
    .slideshow-images img {
        width: 180px; /* スマートフォン向けに小さくする例 */
        height: 120px;
    }

    /* スライドショーの矢印のサイズ調整 */
    .slideshow-arrow {
        font-size: 20px;
        padding: 8px 12px;
    }
}

/* スライダー設定 */

/* 1. Elementorのカラムとコンテナの調整 */
/* ========================================= */

/* カラムのパディングを強制的に0にする（Elementorのウィジェットコンテナにも影響する可能性あり） */
/* Elementorのカラムに 'full-width-carousel-column' クラスを追加した場合 */
.full-width-carousel-column > .elementor-widget-container {
    padding: 0 ;
}

/* カスタムHTMLウィジェットのコンテナがFlexboxであることと全幅表示を確保 */
.custom-image-carousel-container {
    width: 100vw ; /* ビューポートの幅いっぱいに広げる */
    position: relative ;
    left: 50% ; /* 中央に配置 */
    transform: translateX(-50%) ; /* 中央に配置 */
    overflow: hidden ; /* はみ出た画像を隠す */
    padding: 20px 0 ; /* 上下のずれに対応するための上下の余白（必要に応じて調整） */
    box-sizing: border-box ; /* paddingを含めてwidthを計算 */
}

/* ========================================= */
/* 2. カルーセルトラックとアイテムの基本スタイル */
/* ========================================= */

/* 画像を内包し、アニメーションで動くトラック */
.custom-image-carousel-track {
    display: flex ; /* 画像を横並びにする */
    flex-direction: row ; /* 明示的に横方向を指定 */
    white-space: nowrap ; /* 画像が改行されないようにする */
    animation: scroll-carousel 30s linear infinite ; /* アニメーション定義 */
    animation-play-state: running ; /* 初期状態でアニメーションを再生 */

    /* トラックの幅をコンテンツに合わせて十分に広げる */
    width: max-content ;
    min-width: 100% ; /* 最低でもビューポート幅を確保 */
}

/* ホバーで一時停止（任意） */
/* .custom-image-carousel-container:hover .custom-image-carousel-track {
    animation-play-state: paused ;
} */

/* 各画像アイテムのスタイル */
.custom-image-carousel-track .carousel-item {
    flex-shrink: 0 ; /* flexアイテムが縮まないようにする */
    margin-right: 80px ; /* ★ここを調整してください！例として80pxに増やす */
    display: flex ; /* 画像を垂直中央揃えにするため */
    align-items: center ; /* 垂直方向中央揃え */
    justify-content: center ; /* 水平方向中央揃え */
    height: 300px ; /* 画像のコンテナの高さを設定（ずれの範囲を考慮して調整） */
    position: relative ; /* transformが効きやすいように */
    overflow: hidden ; /* 角丸の際に画像がはみ出ないように */
}

/* 画像自体のスタイル */
.custom-image-carousel-track .carousel-item img {
    max-width: 100% ;
    height: auto ;
    display: block ;
    object-fit: cover ; /* 画像がコンテナに収まるように */
    max-height: 100% ; /* 親の高さに合わせる */
    border-radius: 15px ; /* 角丸の半径（調整可能） */
    /* transition: transform 0.5s ease; /* ずれる際のアニメーションが必要なら */
}

/* ========================================= */
/* 3. 各画像（またはcarousel-item）を上下にランダムにずらす */
/* ========================================= */
.custom-image-carousel-track .carousel-item:nth-child(1) { transform: translateY(0px) ; }
.custom-image-carousel-track .carousel-item:nth-child(2) { transform: translateY(-20px) ; }
.custom-image-carousel-track .carousel-item:nth-child(3) { transform: translateY(15px) ; }
.custom-image-carousel-track .carousel-item:nth-child(4) { transform: translateY(-30px) ; }
.custom-image-carousel-track .carousel-item:nth-child(5) { transform: translateY(10px) ; }
.custom-image-carousel-track .carousel-item:nth-child(6) { transform: translateY(-5px) ; }
.custom-image-carousel-track .carousel-item:nth-child(7) { transform: translateY(25px) ; }
/* 無限ループ用に複製したスライドにも適用するために、数を増やして指定してください */
/* 例: 7枚の元の画像があるなら、14枚目まで指定すると良いでしょう */
.custom-image-carousel-track .carousel-item:nth-child(8) { transform: translateY(0px) ; }
.custom-image-carousel-track .carousel-item:nth-child(9) { transform: translateY(-20px) ; }
.custom-image-carousel-track .carousel-item:nth-child(10) { transform: translateY(15px) ; }
.custom-image-carousel-track .carousel-item:nth-child(11) { transform: translateY(-30px) ; }
.custom-image-carousel-track .carousel-item:nth-child(12) { transform: translateY(10px) ; }
.custom-image-carousel-track .carousel-item:nth-child(13) { transform: translateY(-5px) ; }
.custom-image-carousel-track .carousel-item:nth-child(14) { transform: translateY(25px) ; }


/* ========================================= */
/* 4. アニメーションの定義 */
/* ========================================= */
@keyframes scroll-carousel {
    0% {
        transform: translateX(0) ;
    }
    100% {
        /*
         * ここが最も重要な調整ポイントです。
         * 「元の画像セットの総幅」をマイナス値で指定します。
         * 例: 各carousel-itemの幅が200px、margin-rightが80px、元の画像が7枚の場合
         * 1枚あたりの占有幅 = 200px (画像幅) + 80px (margin-right) = 280px
         * 元の画像7枚の総幅 = 280px * 7 = 1960px
         * その場合、transform: translateX(-1960px); と指定します。
         * (元の画像幅と新しいmargin-rightに合わせてこの値を正確に計算し直してください)
         */
        transform: translateX(-1960px) ; /* この値を正確に計算して調整してください！ */
    }
}

/* ========================================= */
/* 5. レスポンシブ対応の調整 */
/* ========================================= */
@media (max-width: 767px) {
    
    .custom-image-carousel-container {
        padding: 10px 0 ; /* スマホ向けに上下の余白を調整 */
    }
    .custom-image-carousel-track .carousel-item {
        margin-right: 30px ; /* ★スマホ向けに余白を調整！例として30pxに増やす */
        height: 120px ; /* スマホ向けに高さを調整 */
    }
    .custom-image-carousel-track .carousel-item img {
        border-radius: 10px ; /* スマホ向けに角丸を調整 */
    }
    .custom-image-carousel-track {
        animation-duration: 20s ; /* スマホでは速く流すなど、アニメーション時間を調整 */
    }
    /* @keyframes scroll-carousel の translateX 値もスマホの表示に合わせて再調整が必要になる場合があります */
    /* (元の画像幅 + 新しいスマホ用margin-right) * 元の画像枚数 で計算し直す */
    /* transform: translateX(-Npx); のNpxをスマホの表示幅で調整 */
}