@charset "utf-8";
body{
    margin: 0;
    padding: 0;
}
.interview_wrapper{
    width: 100%;
    max-width: 100vw; /* 画面幅いっぱいに制限 */
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* paddingを幅に含める */
    background-image: url(../img/pc_bg.jpg);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    font-family: "Noto Sans JP", sans-serif;
}

/* 親要素（1080px制限）を突き破って画面幅いっぱいに広げる */
#main .interview_wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100vw;
}
.interview_wrapper img{
    width: 100%;
    vertical-align: middle;
}

@media only screen and (max-width: 839px){
.interview_wrapper{
        max-width: 100%;
        margin: auto;
        background-image: url(../img/sp_bg.jpg);
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
    }
}

@media only screen and (min-width: 640px){
    .interview_wrapper{
      max-width: 100%;
        margin: auto;
    }
}

.anno {
    font-size: 13px;
    text-align: right;
    margin: 1% 0;
    color: #515151;
}
@media (min-width: 768px) {
    .anno {
        font-size: 10px;
    }
}

.sp-only {
    display: none !important;
}
@media (max-width: 767px) {
    .sp-only {
        display: block;
    }
}

/* --------------------- お客様の声 ---------------------*/

/* グリッドレイアウトの設定 */
.interview-grid {
  display: grid !important;
  gap: 80px 30px !important;
  padding: 0px 5% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  margin-bottom: 50px !important;
}

/* PC：2カラム × 5行 */
@media (min-width: 768px) {
  .interview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* スマホ：1カラム */
@media (max-width: 767px) {
  .interview-grid {
    grid-template-columns: 1fr;
  }
}


/* --- カード内の要素 --- */
.interview-card {
  position: relative !important;
  background: #fff !important;
  box-shadow: 0 4px 15px rgb(208 198 173) !important;
  color: #515151 !important;
  overflow: visible; 
  margin-top: 30px !important;
  aspect-ratio: 3 / 2;
  /* 中央配置を確実にする */
  width: 100% !important;
  box-sizing: border-box;
}

/* 1. aタグ自体の設定（余計な干渉を避ける） */
.interview-card a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  text-decoration: none;
}
/* 2. 画像をカードの枠内に強制的にフィットさせる */
.card-bg {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0;
  left: 0;
  display: block !important;
  overflow: hidden; /* 子要素（膜）がはみ出さないように */
  border-radius: 4px !important;
  background-color: #fff !important; /* 下地に白を敷く */
}
.card-bg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block !important;
  transition: opacity 0.3s ease; /* 透明度変化を滑らかに */
}
/* ホバー時に画像自体の透明度を下げることで、下地の白が見えて「白っぽく」なります */
.interview-card a:hover .card-bg {
  opacity: 0.8;
}
.card-bg {
border-radius: 4px !important;
}
.card-bg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* 親：配置を決めるボックス */
.vertical-text {
  position: absolute !important;
  top: -10%;
  left: 2%;
  height: 120% !important;
  writing-mode: vertical-rl !important;
  font-weight: bold !important;
  font-size: 16px !important;
  letter-spacing: 0.1em !important;
  line-height: 2.6 !important; /* 【重要】ここが白帯と白帯の間の隙間になります */
  background: transparent !important; /* 親は透明に */
  font-family: "Shippori Mincho", "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif !important;
  font-weight: 700 !important;
  color: #515151 !important;
}

/* 子（span）：テキスト本体と白い帯 */
.vertical-text span {
  background: #fff !important; /* 白背景 */
  padding: 2% !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: 0 4px 15px rgb(137 127 103 / 30%) !important;
  font-size: clamp(12px, 1.5vw, 23px) !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.tcy,
.vertical-text span .tcy,
#main .tcy {
  /* 1. iPhone対策：横並びを強制 */
  display: inline-block !important;
  writing-mode: horizontal-tb !important;
  
  /* 2. 背景・装飾を完全にリセット */
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  -webkit-box-decoration-break: slice !important;
  box-decoration-break: slice !important;
  
  /* 3. サイズと配置の固定 */
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  text-align: center !important;
  vertical-align: 0.1em !important;
  
  /* 4. 余白リセット */
  padding: 0 !important;
  margin: 0 1px !important;
  
  /* 5. フォント設定 */
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-feature-settings: "palt";
}
@media only screen and (min-width: 400px) and (max-width: 767px) {
    .vertical-text { 
      top: -15px; 
      left: 4%;
      height: auto !important;
    }
}
@media (max-width: 767px) {
  .vertical-text {
    /* スマホで左に寄りすぎたりはみ出したりしないよう調整 */
    left: 10px; 
    top: -20px;
    height: 110% !important;
  }
  .interview-card {
    /* これが重要：親のpaddingの内側に収める */
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .interview-grid {
    gap: 30px 0 !important;
    padding-bottom: 10px !important;
  }
    .vertical-text span {
      padding: 10px 4px !important;
    }
}
@media (max-width: 399px) {
    .vertical-text { 
        line-height: 2 !important;
    }
}

/* --------------------- 年齢・ご愛用歴 ---------------------*/

.orange-badge {
  position: absolute !important;
  bottom: 7%;
  right: 7%;
  width: 30% !important;
  min-width: 100px;
  aspect-ratio: 1 / 1;   /* これで絶対に正円（1:1）が維持されます */
  height: auto !important;
  background: linear-gradient(135deg, #ffb33f 0%, #f39800 100%) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(164, 146, 100, 0.8) !important;
  z-index: 10;
}
.badge-inner-line {
  width: 92% !important; /* 白い線の円のサイズ */
  height: 92% !important;
  border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 50% !important;
  /* --- ここが魔法の3行：中身を縦に綺麗に並べる --- */
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff !important;
}
.badge-content {
    position: relative !important;
}
.age { 
  font-size: clamp(14px, 2vw, 24px) !important;
  line-height: 1 !important;
  margin: -8% 0 0% !important;
}
.age small {
  font-size: clamp(11px, 1.1vw, 19px) !important;
  margin-left: 1px !important;
}
.badge-separator {
  width: 60% !important; /* 横線の長さ */
  border: none !important;
  border-top: 1px solid #fff !important;
  margin: 5px 0 !important; /* 線の上限の隙間 */
}
.history { 
    font-size: 0.9vw !important;
  letter-spacing: 0.1em !important;
  margin: -1% 0 !important;
}
.years { 
  font-size: clamp(30px, 3.7vw, 50px) !important;
  line-height: 1.1 !important; /* 数字の上下の隙間 */
  margin-top: -2% !important;
}
.years small { 
    font-size: 2vw !important;
  margin-left: 2px !important;
}

@media (max-width: 767px) {
    .age {
        font-size: 4.5vw !important;
    }
    .age small {
        font-size: 2.7vw !important;
    }
    .history {
        font-size: 2.4vw !important;
        margin: -2% 0 !important;
    }
    .years {
        font-size: 7.5vw !important;
    }
    .years small {
        font-size: 4.5vw !important;
    }
}


.detail-btn {
    position: absolute !important;
    bottom: 5%;
    right: 2%;
    background: #fff !important;
    color: #555 !important;
    text-decoration: none;
    padding: 1% 3% 1% 4% !important;
    font-size: clamp(8px, 1.2vw, 14px) !important;
    border-radius: 5px !important;
    font-weight: bold !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    z-index: 20;
    
    /* 文字が折り返さないように固定 */
    white-space: nowrap; 
}
/* ボタン内の「＞」を擬似要素で再現 */
.detail-btn::after {
  content: '';
  display: inline-block !important;
  
  /* 矢印のサイズもclampで連動させると綺麗です */
  width: clamp(4px, 0.6vw, 6px) !important;
  height: clamp(4px, 0.6vw, 6px) !important;
  
  border-top: 2px solid #555 !important;
  border-right: 2px solid #555;
  transform: rotate(45deg);
  margin-left: clamp(5px, 0.8vw, 10px) !important;
  vertical-align: middle;
  
  /* 矢印の位置を微調整 */
  margin-top: -2px !important;
}
@media (max-width: 767px) {
  .detail-btn {
    font-size: clamp(8px, 1.8vw, 17px) !important;
    border-radius: 4px !important;
  }
}


/* ページネーション */
.pagination-container {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 10px !important;
  margin-top: 30px !important;
}

.page-btn, .page-num {
  padding: 8px 12px !important;
  border: 1px solid #ccc !important;
  text-decoration: none;
  color: #333 !important;
}

/* 現在のページ */
.page-num.active {
  background-color: #333 !important;
  color: #fff !important;
}

/* グレーアウト状態 */
.page-btn.disabled {
  background-color: #eee !important;
  color: #aaa !important;
  pointer-events: none; /* クリック不可にする */
  border-color: #ddd;
}



/* --------------------- 下層 お客様の声mv ---------------------*/
.interview-mv-background {
  width: 100% !important;
  background-color: #fdf5e6 !important;
  padding-top: 5px !important;
  margin-top: 200px !important;
  height: 410px !important;
  display: block !important;
}
.interview-detail-mv {
  max-width: 1000px !important;
  margin: 0 auto !important;
  position: relative !important;
}
.mv-container {
  position: relative !important;
  width: 75% !important;
  margin: 0 auto !important;
  margin-top: -200px !important;
  z-index: 2;
}
.mv-container img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  box-shadow: 0 4px 15px rgb(202 182 133 / 85%) !important;
}
/* 画像に重なるキャッチコピー（横書き） */
.mv-copy {
  position: absolute !important;
  bottom: -100px;
  left: -20px;
  z-index: 10;
}
.mv-copy p {
  margin-bottom: 16px !important;
  line-height: 1 !important;
}
.mv-copy span {
  background: #fff !important;
  padding: 10px 20px !important;
  font-family: "Shippori Mincho", "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif !important;
  font-size: clamp(16px, 2.5vw, 28px) !important;
  font-weight: bold !important;
  color: #515151 !important;
  line-height: 1.9 !important;
  box-shadow: 0 4px 15px rgb(202 182 133 / 85%) !important;
  /* 改行時の装飾維持 */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* プロフィールエリア */
.mv-profile {
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 20px 20px 0 !important;
}
.profile-name {
  font-size: 24px !important;
  font-weight: bold !important;
  color: #515151 !important;
  border-left: 4px solid #515151 !important; /* 名前の左にある縦線 */
  padding-left: 15px !important;
  margin-bottom: 10px !important;
}
.profile-age, .profile-history {
  font-weight: normal !important;
  font-size: 19px !important;
}
.anno_interview {
  font-size: 13px !important;
  font-weight: 400 !important;
  text-align: left !important;
  margin: 1% 0 !important;
  color: #515151 !important;
}

/* セクション全体の余白 */
.interview-section {
  padding: 3% 0 !important;
}

/* 白いカード本体 */
.interview-wrapper {
  max-width: 720px !important;
  margin: 0 auto 30px !important;
  background: #fff !important;
  padding: 60px 40px 40px !important;
  position: relative !important;
  box-shadow: 0 4px 15px rgb(238 227 198 / 85%) !important;
  border: 1px solid #f0f0f0 !important;
}

/* 飾り文字画像（中央配置） */
.interview-label {
  position: absolute !important;
  top: 23px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100px !important;
  z-index: 2 !important;
}
.interview-label img {
  width: 100% !important;
  height: auto !important;
}

/* オレンジの見出し（吹き出し風） */
.interview-title {
  text-align: center !important;
  margin-bottom: 20px !important;
}

.interview-title span {
  display: inline-block !important;
  position: relative !important;
  background: linear-gradient(to right, #fbad3e, #f16f1a) !important; /* グラデーション */
  color: #fff !important;
  padding: 12px 60px !important;
  border-radius: 50px !important;
  font-size: 24px !important;
  font-weight: bold !important;
  width: 330px !important;
}

/* キャッチコピー */
.interview-copy {
  text-align: center !important;
  font-family: "Shippori Mincho", "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif !important;
  font-size: 29px !important;
  font-weight: bold !important;
  margin-bottom: 20px !important;
  margin-top: 10px !important;
  color: #515151 !important;
  line-height: 1.5 !important;
}

.interview-copy .highlight {
  color: #f16f1a !important;
  padding-bottom: 2px !important;
}
.marker {
  display: inline !important;
  padding: 0 2px !important;
  font-weight: bold !important;
  background-image: linear-gradient(rgba(255, 241, 0, 0.6), rgba(255, 241, 0, 0.6)) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 10px !important;
  background-position: bottom !important;
}
.marker::after {
  display: none !important;
}
/* 区切り線のスタイル */
.separator-line {
  border: none !important;
  height: 1px !important;
  background: #515151 !important;
  width: 82% !important;
  margin: 25px auto !important;
}
/* インタビュー本文 */
.interview-text {
  max-width: 650px !important;
  margin: 0 auto !important;
  line-height: 2 !important;
  color: #515151 !important;
  font-size: 18px !important;
  font-weight: normal !important;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important;
}
.interview-text p {
  font-size: 18px !important;
  line-height: 2 !important;
  color: #515151 !important;
  font-weight: normal !important;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important;
  margin: 0 !important;
}

@media (max-width: 920px) {
  .mv-container {
    width: 90% !important;
    margin-top: -100px !important;
  }
  .interview-mv-background {
    margin-top: 80px !important;
    height: 200px !important;
  }
  .mv-copy {
    bottom: -70px;
    left: -6%;
  }
  .mv-copy span {
    font-size: clamp(16px, 5vw, 28px) !important;
    padding: 8px 15px !important;
  }
  .profile-name {
    font-size: 18px !important;
    padding-left: 8px !important;
  }
  .profile-age, .profile-history {
    font-size: 13px !important;
  }
  .mv-profile {
    padding: 15px 10px 0 !important;
  }
  .interview-copy {
    font-size: 22px !important;
  }
  .interview-mv-background {
    margin-top: 16% !important;
    padding-bottom: 85px !important;
    height: auto !important;
  }
  .mv-container {
    margin-top: -15% !important;
  }
  .interview-wrapper {
    margin: 20px 20px 20px !important;
    padding: 50px 23px 10px !important;
  }
  .interview-label {
    width: 75px !important;
    top: 16px !important;
    z-index: 10 !important;
  }
  .interview-title span {
    font-size: 19px !important;
    padding: 10px 20px !important;
    width: 260px !important; /* 最も長いテキストに合わせた固定幅 */
    white-space: nowrap !important;
    overflow: hidden !important;
    display: inline-block !important;
  }
  .separator-line {
    width: 100% !important;
    margin: 15px auto !important;
  }
  .interview-text {
    line-height: 1.7 !important;
    font-size: 16px !important;
  }
}

/* --------------------- 下層 ページネーション ---------------------*/


/* コンテナ全体の調整 */
.pagination-container, .back-to-list-wrap {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 6px !important;
  margin: 40px 0 !important;
}

/* ボタンの共通スタイル */
.page-btn, .page-num {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px !important;
  padding: 0 8px !important;
  border: 1px solid #ccc !important;
  background: #fff !important;
  color: #666 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  border-radius: 4px !important;
  box-sizing: border-box;
}
#prev, #next {
  min-width: 70px;
}
/* 現在のページ（塗りつぶしのグレー） */
.page-num.active {
  background-color: #888 !important;
  border-color: #888;
  color: #fff !important;
}
.page-numbers {
  display: flex !important; /* 数字エリアの中も横並びにする */
  gap: 8px !important;
}
/* グレーアウト（無効化） */
.page-btn.disabled {
  border-color: #eee;
  color: #ccc !important;
  pointer-events: none;
}

/* 一覧に戻るボタン */
.back-to-list-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 10px !important;
  color: #666 !important;
  text-decoration: none !important;
  font-size: 16px !important;
}
.back-to-list-btn .icon {
  background: #888 !important;
  color: #fff !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* スマホ版：数字を隠す */
@media screen and (max-width: 768px) {
  .page-numbers {
    display: none !important;
  }
  .pagination-container {
    gap: 10px !important; /* スマホでは少し間隔を広げると押しやすい */
  }
}

.pagination-container a {
  line-height: 1 !important;
  vertical-align: middle !important;
  letter-spacing: normal !important;
}

#first, #last {
  margin: 0 !important;
}

/* SP：チャットボットと被らないよう下部に余白 */
@media (max-width: 767px) {
  .back-to-list-wrap {
    margin-bottom: 80px !important;
  }
}