/*
 Theme Name: Guidebookpress Child
 Template: guidebookpress
 Description: Child theme of guidebookpress
 Author: Your Name
 Version: 1.0.2
 Text Domain: guidebookpress-child
*/

.a-center {
  text-align: center;
}

.button-wrapper {
    position: relative;
}

.book-button {
    width: 100%;
    padding: 20px 40px;
    font-size: 22px;
    font-weight: 600;
    color: white;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

.book-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.book-button:hover::before {
    left: 100%;
}

.book-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
}

.book-button:active {
    transform: translateY(-1px);
}

.green-button {
    background: #1D8B55;
}

.orange-button {
    background: #FF9900;
}

.red-button {
    background: #BF0000;
}

.book-icon {
    font-size: 28px;
    width: 1px;
}

.arrow {
    font-size: 24px;
    transition: transform 0.3s ease;
}

.book-button:hover .arrow {
    transform: translateX(5px);
}

.blur-shadow {
  border-radius: 10px; /* 任意で角丸に */
}

/* ====== 看板 全体設定 ====== */
.signboard{
  --bg: url('https://book.sunmark.co.jp/wp-content/uploads/2025/10/icon-board-r.png'); /* ←看板画像 */
  --ratio: 1229/928;             /* アスペクト比を維持 */
  --safe-inset: 4%;              /* 画像の内側マージン(安全域) */
  position: relative;
  width: min(100%, 980px);       /* 最大幅の上限はお好みで */
  aspect-ratio: var(--ratio);
  background: var(--bg) center/cover no-repeat;
  overflow: hidden;
}

/* 内側の安全域（看板のフチに文字が被らないように） */
.signboard__safe{
  position: absolute;
  inset: var(--safe-inset);
}

/* ====== テキストボックス（編集可） ====== */
.textbox{
  /* 位置とサイズは％で。看板の中で自由に調整可能 */
  --x: 50%;      /* 左からの位置（中心基準） */
  --y: 22%;      /* 上からの位置（中心基準） */
  --w: 105%;      /* 幅 */
  --p: 1.2rem;   /* 内側余白 */

  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%,-50%);
  width: var(--w);

  /* 読みやすさと見た目 */
  padding: var(--p);

  /* タイポグラフィ */
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  /* 画面幅に応じて自動調整（必要なら固定pxに変更） */
  font-size: clamp(23px, 2.4vw, 36px);
  color: #222;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
  outline: none;                 /* フォーカス時の青枠を消す */
  cursor: text;
  user-select: text;
  /* 任意でリサイズしたい場合は↓を有効化
     resize: both; overflow: auto; */
}

/* 空のときのプレースホルダ */
.textbox:empty::before{
  content: attr(data-placeholder);
  color: #666;
  font-weight: 500;
}

/* 編集時の見た目（わかりやすいように枠線） */
.textbox:focus{
  box-shadow: 0 0 0 3px rgba(0,119,255,.2), 0 6px 18px rgba(0,0,0,.16);
}

/* ====== 複数のテキストボックスを置きたい場合の例 ====== */
/* 左上寄せの細め見出し */
.textbox--tl{
  --x: 22%;
  --y: 28%;
  --w: 40%;
  font-size: clamp(14px, 1.6vw, 22px);
  font-weight: 600;
  text-align: left;
  background: rgba(255,255,255,.6);
}

/* 右下寄せの小さめ注意書き */
.textbox--br{
  --x: 78%;
  --y: 80%;
  --w: 32%;
  font-size: clamp(12px, 1.2vw, 16px);
  font-weight: 500;
  text-align: right;
  background: rgba(255,255,255,.55);
}

.image-container {
    position: relative;
    display: inline-block;
}

.image-container img {
    display: block;
    width: 400px;
    height: auto;
}

.cloud-bubble {
    position: absolute;
    top: -60px;
    right: -20px;
    background: white;
    padding: 7px 22px;
    border-radius: 60px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    font-size: 16px;
    font-weight: bold;
    color: #333;
    white-space: nowrap;
    animation: float 5s ease-in-out infinite;
    z-index: 2;
}

.cloud-bubble::before {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 30px;
    width: 25px;
    height: 25px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

.cloud-bubble::after {
    content: '';
    position: absolute;
    bottom: -25px;
    left: 15px;
    width: 15px;
    height: 15px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

.cloud-puff-1,
.cloud-puff-2,
.cloud-puff-3 {
    position: absolute;
    background: white;
    border-radius: 50%;
    z-index: 1;
}

.cloud-puff-4,
.cloud-puff-5,
.cloud-puff-6 {
    position: absolute;
    background: white;
    border-radius: 50%;
    z-index: 1;
}

.cloud-puff-4 {
    top: -15px;
    left: 25px;
    width: 45px;
    height: 45px;
}

.cloud-puff-5 {
    top: -20px;
    right: 30px;
    width: 40px;
    height: 40px;
}

.cloud-puff-6 {
    top: -10px;
    left: 60px;
    width: 38px;
    height: 38px;
}

.cloud-puff-1 {
    top: -18px;
    left: 10px;
    width: 55px;
    height: 55px;
}

.cloud-puff-2 {
    top: -28px;
    left: 45px;
    width: 70px;
    height: 70px;
}

.cloud-puff-3 {
    top: -18px;
    right: 10px;
    width: 50px;
    height: 50px;
}

.bubble-text {
    position: relative;
    z-index: 10;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) translateX(0px);
    }
    25% {
        transform: translateY(-8px) translateX(3px);
    }
    50% {
        transform: translateY(-5px) translateX(-3px);
    }
    75% {
        transform: translateY(-10px) translateX(2px);
    }
}


.books-section{padding:0px clamp(16px,4vw,32px) 24px}
.books-title{margin:0 0 16px;font-size:clamp(18px,2.4vw,24px);font-weight:700}


/* グリッド：スマホ=最大2列、PC=最大4列 */
.books-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr)); /* スマホ最大2列 */
  gap:var(--gap);
}

/* 画面がとても狭い時は1列に自動調整（任意） */
@media (max-width:360px){
  .books-grid{grid-template-columns:1fr;}
}

/* PC幅で最大4列 */
@media (min-width:1024px){
  .books-grid{grid-template-columns:repeat(4, minmax(0,1fr));}
}

:root{
  --card-bd:#e6e6e9;
  --text:#222;
  --muted:#6b7280;
  --btn:#2563eb;
  --btn-tree: #1D8B55;
  --btn-amazon: #FF9900;
  --btn-rakuten: #BF0000;
  --btn-text:#fff;
}

/* カード */
.book-card{
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .12s ease, box-shadow .12s ease;
  width: 50%;
  float: left;
  padding: 5px;
}
.book-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* 書影：比率をそろえる（2:3想定）。画像ははみ出しトリミング */
.book-cover{
  margin:0;
  aspect-ratio:2/3;
  background:#f1f3f5;
  display:block;
  overflow:hidden;
}
.book-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 2つ目の画像（中面・バナーなど）: 16:9例 */
.book-image{
  aspect-ratio:16/9;
  background:#f3f4f6;
  overflow:hidden;
}
.book-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 購入ボタン群 */
.buy-links{
  list-style:none;
  margin:12px 0 12px 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.buy-links li{width: 100%;margin:0;padding:0}

/* ボタン */
.btn{
  display:inline-block;
  text-decoration:none;
  font-weight:600;
  padding:12px 7px;
  font-size: 10px;
  white-space:nowrap;
  width: 100%;
  text-align: center;
  border-radius: 6px;
}
.btn.tree{
  background:var(--btn-tree);
  color:var(--btn-text);
}
.btn.amazon{
  background:var(--btn-amazon);
  color:var(--btn-text);
}
.btn.rakuten{
  background:var(--btn-rakuten);
  color:var(--btn-text);
}

/* 読者のご意見部分 */
.voiceitem {
  background: #F3EFEC;
  border-radius: 16px;
  padding: 20px 20px 5px;
  margin: 20px 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.6;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.voiceitem:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

/* タイトル */
.voiceitem .voicetitle {
  font-size: 1.2rem;
  font-weight: bold;
  color: #94ABD8; 
  margin-bottom: 10px;
  padding-left: 10px;
}

/* コメント部分 */
.voiceitem .voicecomment {
  font-size: 1rem;
  color: #555;
  margin-bottom: 15px;
  background: #ffffff;
  border-radius: 12px;
  padding: 15px;
  position: relative;
}

.voiceitem .voicecomment::before {
  content: "";
  font-size: 2rem;
  color: #f48fb1;
  position: absolute;
  top: -10px;
  left: 10px;
  opacity: 0.3;
}

/* 投稿者プロフィール */
.voiceitem .voiceprof {
  font-size: 0.9rem;
  color: #B7AAA1;
  text-align: right;
  font-style: italic;
}

.bookstore_splash_img {
  text-align: center;
}

/* ボタンが多いときに2段目以降もきれいに */
@media (min-width:480px){
  .buy-links{gap:10px}
}

@media (max-width: 600px) {
    .book-button {
        font-size: 18px;
        padding: 18px 0px;
    }

    .book-icon {
        font-size: 24px;
    }
}