/* =========================================
   Turn.js フリップブック 完全版CSS
   ========================================= */



.staffInterviewEXEX {
  padding: -4rem 0 0;
}

.staffInterviewEXEX {
  width: 100vw;
  height: auto;
  margin: 0 calc(50% - 50vw);
  padding: 0 0 10rem;

  /* 背景画像をカンマ区切りで指定 */
  background-image: 
    url(https://www.horton-care.jp/horton-care/wp-content/uploads/2024/04/bg-staffinterview01.jpg),
    url(https://www.horton-care.jp/horton-care/wp-content/uploads/2024/04/bg-staffinterview-bot01.jpg);

  /* 繰り返し設定（画像1用, 画像2用） */
  background-repeat: no-repeat, no-repeat;

  /* 位置設定（画像1用, 画像2用） */
  background-position: 
    left -30% top -12vw, 
    right -10vw bottom 16%;

  /* サイズ設定（画像1用, 画像2用） */
  background-size: 80%, 40%;
}








/* --- 1. ベースコンテナとフリップブック本体 --- */
.flipbook-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px; /* 本の最大幅（任意で調整） */
    margin: 40px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

#flipbook {
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
    cursor: pointer;
}

/* --- 2. ページとインナー要素 --- */
/* 外枠：白背景で裏抜けを防ぎ、テーマの余白クラスの干渉を完全ブロック */
#flipbook .page {
    background-color: #ffffff !important;
    border: none !important;
    padding: 0 !important; 
    margin: 0 !important;
}

/* 中身の要素：枠線を定義 */
.page-inner {
    border: 1px solid #ccc;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    cursor: auto; 
}

/* 中央の2重線を防ぐ */
.page.even .page-inner { border-right: none; }
.page.odd .page-inner { border-left: none; }

/* --- 3. 操作用ホットスポット（当たり判定エリア） --- */
.flip-hotspot {
    position: absolute;
    top: 0;
    width: 20%;
    height: 100%;
    cursor: pointer;
    z-index: 100;
}
#hotspot-left { left: 0; }
#hotspot-right { right: 0; }
.flip-hotspot.disabled { cursor: default !important; }

/* --- 4. ナビゲーションボタン --- */
.flip-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    color: #ffffff;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 20px;
    cursor: pointer;
    z-index: 9999;
    transition: background-color 0.3s;
}
.flip-nav-btn:hover { background-color: rgba(0, 0, 0, 0.8); }
.flip-nav-btn.disabled {
    opacity: 0.2;
    cursor: default !important;
    pointer-events: none;
}
#prev-btn { left: -30px; }
#next-btn { right: -30px; }



/* --- 5. プロフィール・コンテンツのレイアウト --- */
.profile-content { 
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.profile-content figure { 
  margin: 0 auto 30px;
}
  .profile-content figure img { 
    width: 320px!important;
  }
.profile-content h2.staff-name { 
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 2rem; 
  text-align: center;
}
  .profile-content h2.staff-name span { 
    font-size: 0.8rem;
    margin-left: 2rem;
  }
.profile-content div.staff-overview { 
  width: 72%;
}
  .profile-content div.staff-overview p { 
    font-size: 1rem!important;
    margin-bottom: 1rem!important;
  }


.profile-details { 
  padding: 60px 50px;
}

.profile-details h3 { 
  font-size: 1.2rem;
  color: #333; 
  border-bottom: 2px solid #eee;
  padding-bottom: 5px; 
  margin-top: 30px; 
  margin-bottom: 15px; 
}

.profile-details p { 
  line-height: 1.6; 
  color: #555; 
  margin-bottom: 25px; 
}






/* --- 6. スマホ向けレスポンシブ（767px以下） --- */
@media (max-width: 767px) {
  
    .flip-nav-btn, .dummy-page, .flip-hotspot { 
      display: none !important;
  }
    .flipbook-wrapper { 
      display: block;
      margin: 20px auto; 
      padding: 0 15px;
      background-color: none!important;
      box-shadow: none!important;
  }
    .page-inner {
    border: none !important;
    padding: 25px 25px !important;
      height: auto !important;
      overflow-y: visible !important;
      background-color: none!important;
    }
  
  
    #flipbook > div:nth-child(even) {
        border: none;
    }
    #flipbook > div:nth-child(odd):not(.dummy-page) {
        border: none;
    }
  
  
     .profile-content { 
      margin-top: 120px;
  } 
     .profile-content:first-child { 
      margin-top: 0;
  } 
  
    .profile-content img { 
      width: 130px; 
      height: 130px;
  }
  
  
.staffInterviewEXEX {
  width: 100vw;
  height: auto;
  margin: 0 calc(50% - 50vw);
  padding: 0 0 10rem;

  /* 背景画像をカンマ区切りで指定 */
  background-image: 
    url(https://www.horton-care.jp/horton-care/wp-content/uploads/2024/04/bg-staffinterview02.jpg),
    url(https://www.horton-care.jp/horton-care/wp-content/uploads/2024/04/bg-staffinterview-bot02.jpg);

  /* 繰り返し設定 */
  background-repeat: no-repeat, no-repeat;

  /* 位置設定 */
  background-position: 
    left -40% bottom 50%, 
    right -10vw bottom 16%;

  /* サイズ設定 */
  background-size: 50%, 40%;

  /* ▼ これを追加（画像1用, 画像2用） ▼ */
  background-attachment: fixed, fixed;
}
  
  
}