/*
CTC Separate Stylesheet
Updated: 2025-10-12 09:17:37
*/

/* turn.js 用 flipbook スタイル */
.pdfpager button { padding: 6px 12px; border: 1px solid #ccc; background:#fff; cursor:pointer; }
.pdfpager button:disabled { opacity:.5; cursor:not-allowed; }
.pdfpager .pp-info { min-width: 80px; text-align:center; font-weight:600; }

/* ===== PDF Pager UI（見た目調整） ===== */
:root{
  /* 好みで色を変えてOK（freeeっぽいブルー） */
  --pp-accent: #1f7ae0;
  --pp-accent-hover: #1665bd;
  --pp-border: #e5e7eb;
  --pp-text: #111827;
  --pp-bg: #ffffff;
}

.pdfpager{
  margin: 24px auto;
  max-width: min(1100px, 95vw);
  color: var(--pp-text);
}

/* ツールバー */
.pdfpager .pdfpager-toolbar{
  display:flex; gap:.75rem; align-items:center; justify-content:center;
  margin: 8px 0 14px;
}

/* ボタン */
.pdfpager button{
  appearance: none;
  padding: 8px 14px;
  border-radius: 9999px;               /* ← 丸み */
  border: 1px solid var(--pp-accent);
  background: var(--pp-accent);
  color:#fff;
  font-weight:600;
  line-height:1;
  transition: transform .06s ease, background .15s ease, box-shadow .15s ease;
  box-shadow: 0 2px 6px rgba(31,122,224,.22);
}
.pdfpager button:hover{ background: var(--pp-accent-hover); }
.pdfpager button:active{ transform: translateY(1px); }
.pdfpager button:disabled{
  opacity:.45; cursor:not-allowed;
  background:#9abfe9; border-color:#9abfe9; box-shadow:none;
}

/* ページ/総数の表示 */
.pdfpager .pp-info{
  min-width: 90px; text-align:center; font-weight:700; letter-spacing:.02em;
}

/* ビューポート（キャンバスを入れる枠） */
.pdfpager .pdfpager-viewport{
  background: var(--pp-bg);
  border: 1px solid var(--pp-border);
  border-radius: 18px;                 /* ← 丸み */
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  padding: 18px;
  overflow:auto;                       /* 既存JSが height を当てます */
}

/* キャンバスを綺麗にフィット */
.pdfpager canvas{
  display:block;
  width:100%; height:auto;
  border-radius: 10px;                 /* ページ自体も少し丸める */
}

/* 余白の最適化（狭い画面） */
@media (max-width: 640px){
  .pdfpager .pdfpager-toolbar{ gap:.5rem; }
  .pdfpager button{ padding:7px 12px; }
  .pdfpager .pdfpager-viewport{ padding: 12px; border-radius:14px; }
}
/* PDF Pager：スマホでは外枠の固定高さを解除して余白をゼロに */
@media (max-width: 640px){
  .pdfpager .pdfpager-viewport{
    height: auto !important;     /* ← JSのheightを打ち消す */
    overflow: visible !important;
    display: block !important;   /* flex縦センターを無効化 */
    align-items: stretch !important;
    justify-content: flex-start !important;
  }
  .pdfpager canvas{
    width: 100% !important;
    height: auto !important;
    display: block;
  }
}
<div class="simple-slider">
  <div class="slide active"><img src="https://cocoterrace.co.jp/wp-content/uploads/2025/10/0355cd709bf494b5a8de8617075f3dd6.jpg" alt=""></div>
  <div class="slide"><img src="https://cocoterrace.co.jp/wp-content/uploads/2025/10/cf9242e9c0aad3ae46d56603d4e51b29.jpg" alt=""></div>

  <button type="button" class="prev" aria-label="前へ">←</button>
  <button type="button" class="next" aria-label="次へ">→</button>
</div>

<style>
.simple-slider {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  overflow: hidden;
}

/* スライド全体を重ねてフェード方式に変更 */
.slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.slide.active {
  position: relative;
  opacity: 1;
}
.simple-slider img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* スマホ対応：画像比率維持しつつ高さ確保 */
.simple-slider::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9比率確保、必要なら調整 */
}
.simple-slider .slide,
.simple-slider img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* ボタン配置 */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
}
.prev { left: 10px; }
.next { right: 10px; }

@media (max-width: 640px) {
  .prev, .next {
    padding: 6px 10px;
    font-size: 14px;
  }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
  let i = 0;
  const slides = document.querySelectorAll('.simple-slider .slide');
  const nextBtn = document.querySelector('.simple-slider .next');
  const prevBtn = document.querySelector('.simple-slider .prev');
  if (!slides.length) return;

  function show(n){
    slides[i].classList.remove('active');
    i = (n + slides.length) % slides.length;
    slides[i].classList.add('active');
  }
  nextBtn.addEventListener('click', () => show(i+1));
  prevBtn.addEventListener('click', () => show(i-1));
});
</script>

/* =========================
   1) 比較表をスマホ対応
   ========================= */
@media (max-width: 800px){
  /* 表を横スクロール可にして崩れ防止 */
  .table-responsive,
  .post_content table{
    display:block;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
  }
  .post_content table{
    min-width: 560px;           /* 列が潰れ過ぎない最低幅 */
    table-layout: fixed;        /* セル幅を安定 */
  }
  .post_content th,
  .post_content td{
    padding: 8px !important;
    font-size: 14px !important;
    word-break: break-word;     /* 長文を折り返す */
    white-space: normal !important;
  }
}

/* =========================
   2) スライダーUIを整える
   ========================= */
/* 画像は親幅にフィット＋縦は画面の55vhまでに抑える */
@media (max-width: 800px){
  .simple-slider img{
    width:100% !important;
    height:auto !important;
    max-height:55vh;           /* 画面の約半分で打ち止め */
    object-fit: contain;       /* 画像が潰れない */
    display:block;
  }
  /* スライド切替は display で。親の高さが0にならない */
  .simple-slider .slide{ display:none; position:static; opacity:1; }
  .simple-slider .slide.active{ display:block; }

  /* ページャ（← 1/5 →）のレイアウトとサイズを固定 */
  .simple-slider .pager,
  .simple-slider .pdfpager-toolbar,
  .slider-pager{
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin:10px 0 12px;
    position:relative;
    z-index: 2;
  }
  .simple-slider .prev,
  .simple-slider .next{
    width:42px; height:42px;
    border-radius:9999px;
    border:0;
    background: #3b82f6;         /* 好みで */
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 14px rgba(59,130,246,.25);
  }
  .simple-slider .prev:disabled,
  .simple-slider .next:disabled{ opacity:.4; }
  .simple-slider .counter{ font-weight:700; min-width:56px; text-align:center; }
}

/* =========================
   3) reCAPTCHAバッジと干渉しない余白
   ========================= */
@media (max-width: 800px){
  body{ padding-bottom: 88px; }                 /* 下に余白を確保 */
  .grecaptcha-badge{ right: 10px !important; bottom: 10px !important; } /* 位置だけ調整（隠さない） */
}