html {
    background-color: #ffffff;
    scrollbar-width: none;
    transition: all 0.3s;
}
.s-section1 {
    position: relative;
}
.bigbodya {
    position: relative;
}

.bigbodya .text-container {
    width: 50%; /* 適宜調整 */
    text-align: left; /* 文字自体は左寄せ */
}
h2.load {
    font-size: 1.8rem;
    font-weight: 500;
    margin: 3rem auto 1rem;
    line-height: 3rem;
}
.head_title {
    margin: 10% 4% 0;
}
p.title-ani-tar.title-ani.sbttl {
    font-size: 1.8rem;
    letter-spacing: 2px;
    color: #b9b9b9 !important;
    margin-bottom: 1%;
    font-family: Bebas Neue, sans-serif;
    padding-left: 0%;
}
h1.l-und_main-static-ttl {
    font-weight: 500;
    font-size: 1.5rem;
    width: 100%;
    margin: 0 auto 2%;
    margin-bottom: 3%;
    -webkit-text-stroke: 0.02vw;
}
.topics {
    width: 80vw;
    margin:11% auto 1%;
}
img.breview_mainimg {
    border-radius: 20px;
}
.privacy-section {
    width: 75vw;
    margin: 3% auto 2%;
}

.fadein {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.fadein.fade-in {
    opacity: 1;
    transform: translateY(0);
}
.articlebody {
    width: 45vw;
    margin: 0 auto;
}
blockquote {
    font-size: 1.3rem;
    font-weight: 500;
    margin: 5rem auto 5rem;
    line-height: 3rem;
    width: 45vw;
}
blockquote.one {
    font-size: 1.3rem;
    font-weight: 500;
    margin: 2rem auto 3rem;
    line-height: 3rem;
    width: 45vw;
}

p.kotobun {
    font-size: 1rem;
    font-weight: 400;
    line-height: 2.8rem;
    margin: 0 0 1rem 0;
}
.mainimg_bre {
    position: relative;
    display: inline-block;
}
.breview_caption {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: white; /* 文字色 */
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    display: flex;
    align-items: center;
}
.breview_caption .sicoc {
    width: 16px; /* アイコンサイズ調整 */
    height: auto;
    margin-left: 5px;
}
.mainarea {
    position: relative;
    margin:0 auto;
    height: 100vh; /* デフォルト値 */
    display: flex;
    justify-content: center; /* 横方向中央 */
    align-items: center; /* 縦方向中央 */
    overflow: hidden;
    transition: height 0.5s cubic-bezier(0.6, 0.04, 0.98, 0.335); /* 高さの変更をスムーズに */
}
.booktitle {
    width: 45vw;
    text-align: center;
    margin: 5rem auto 3rem;
    padding-bottom: 2rem;
}
p.brevtitle {
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 3%;
    letter-spacing: 1px;
}
p.brevauthor {
    font-weight: 500;
    font-size: 1.1rem;
    letter-spacing: 1px;
}
.bigbodya {
    display: block;
    white-space: nowrap;
    width: 45vw;
    margin: 0 auto;
    margin-bottom: 5rem;
}
cite {
    font-size: 1.1rem;
}
.breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    padding: 0;
    margin: 3% 0;
    font-size: 0.94rem;
    overflow-x: auto;
    white-space: nowrap;
    font-weight: 400;
}
        .breadcrumb li {
            display: flex;
            align-items: center;
        }
        .breadcrumb li:not(:last-child)::after {
            content: '\203A'; /* Unicode for '›' */
            margin: 0 8px;
            color: #888;
        }
.breadcrumb a {
    text-decoration: none;
    color: #181818;
    transition: color 0.3s ease;
}
        .breadcrumb a:hover {
    color: #181818;
text-decoration:underline;
        }
        .breadcrumb .current {
            color: #000;
            font-weight: 500;
        }
nav {
    margin: 8% 0 8%;
}
.goods-info {
    width: 45vw;
    margin: 5rem auto 0%;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    padding: 4rem 0%;
}
img.goods-image {
    width: 65%;
    margin: 0 auto;
    text-align: center;
    display: block;
    margin-bottom: 6%;
}
h3.goods-title {
    font-size: 1.1rem;
    text-align: center;
    font-weight: 600;
    margin-bottom: 5%;
}
p.goods-description {
    font-size: 0.98rem;
    line-height: 2.2rem;
    font-weight: 400;
    margin-bottom: 3%;
}
span.goods-price {
    font-size: 1.1rem;
    font-weight: 500;
}
span.lead2 {
    display: inline-block;
    font-weight: 400;
    font-size: 0.9rem;
    margin-left: 2%;
    margin-right: 1%;
}
span.mid {
    display: inline-block;
    font-weight: 400;
    font-size: 0.9rem;
    margin-left: 1%;
}
.goods-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 5%;
}

.goods-links .button {
    display: inline-block;
    padding: 3%;
    background-color: #000000;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease-in-out;
    width: 100%;
    max-width: 200px;
}

.goods-links .button:hover {
    background-color: #333333;
}
.author-info {
    display: flex;
    width: 45vw;
    margin: 0 auto;
}
img.thmimgauthor {
    width: 10rem;
    height: 10rem;
    border-radius: 100px;
    margin-right: 3rem;
}
h3.author_tet {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 3%;
}
p.author_text {
    font-weight: 400;
    font-size: 0.94rem;
    line-height: 1.8rem;
    margin-bottom: 3%;
}
.author-info {
    display: flex;
    align-items: center; /* 縦方向中央揃え */
    padding: 4% 4%;
    border-radius: 25px;
    transition: background-color 0.3s ease-in-out;
    background-color: #fafafa;
margin-top:5%;
}

.author-info:hover {
    background-color: #f4f4f4; /* 好きな背景色に変更 */
}

.author-image {
    margin-right: 15px; /* 画像とテキストの間隔調整 */
}

.author-image img {
    border-radius: 50%; /* 画像を丸くしたい場合 */
    width: 8rem; /* 画像サイズを調整 */
    height: 8rem;
    object-fit: cover;
}

.athbox-right {
    flex: 1; /* テキスト部分を可変にする */
}
a.alinks {
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: underline;
}
.topicsinner {
    width: 95vw;
    max-width: calc(95vw);
    margin-left: 5vw;
    border-radius: 5.8651026393vw 0 0 5.8651026393vw;
    background-color: #f4f4f4;
    padding: 7vw 0 5vw;
    margin-top: 7%;
}
.topicsbox.w70.ow {
    width: 75vw;
    margin: 0 12.5vw 0 7.5vw;
}
h2.title-ani-tar.title-ani.sbttl.c_ttl-mid {
    font-size: 2.4rem;
    letter-spacing: 2px;
    color: #000000 !important;
    margin-right: 1%;
    font-family: Bebas Neue, sans-serif;
    padding-left: 0%;
    margin-bottom: 5%;
}
.goods_list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4rem;
    list-style: none;
    padding: 0;
    margin-bottom: 9%;
    margin-top: 5%;
}

img.bnnr {
    border-radius: 25px;
    max-width: 100%; /* 画像を親要素にフィット */
    height: auto;
}

.good_list {
    text-align: center;
}

.ad-slot {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ad-slot ins {
    width: 100%;
    height: 300px;
}

.topics.last {
    margin-top: 7%;
    margin-bottom:7%;
}

.bnnr {
  transition: transform 0.3s ease-in-out; /* スムーズな拡大 */
  display: block; /* 画像の余白をなくす */
  width: 100%; /* 親要素の幅に合わせる */
  height: auto;
}

.good_list:hover .bnnr {
  transform: scale(1.03); /* 画像を10%拡大 */
}
.banner {
    margin: 4vw auto 2vw;
    width: 45vw;
}
@media (max-width: 768px) {
    .breadcrumb {
        font-size: 12px;
        padding: 5px;
    }
    .breadcrumb li:not(:last-child)::after {
        margin: 0 5px;
    }
    
    section.topics {
        width: 100%;
        margin: 8rem auto 1%;
    }
    
    .booktitle {
        width: 85%;
        text-align: center;
        margin: 10% auto 10%;
        padding-bottom: 10%;
        border-bottom: 1px solid #000;
    }
    
    .articlebody {
        width: 85%;
        margin: 0 auto;
    }
    
    blockquote {
        font-size: 1.1rem;
        font-weight: 500;
        margin: 4rem auto;
        line-height: 2.2rem;
        width: 85%;
    }
    cite {
    font-size: 1rem;
}
.goods-links .button {
    display: inline-block;
    padding: 3%;
    background-color: #000000;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease-in-out;
    width: 100%;
    max-width: 200px;
}
p.author_text {
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.4rem;
    margin-bottom: 3%;
}
h3.author_tet {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 3%;
    text-align: center;
    margin-top: 5%;
}
a.alinks {
    font-size: 1rem;
    font-weight: 500;
    text-decoration: underline;
    text-align: center;
    display: block;
}
    p.title-ani-tar.title-ani.sbttl {
        font-size: 1rem;
        letter-spacing: 2px;
        color: #b9b9b9 !important;
        margin-bottom: 1%;
        font-family: Bebas Neue, sans-serif;
        padding-left: 0%;
        width: 90%;
        margin: 0 auto 1%;
    }
    
    h1.l-und_main-static-ttl {
        width: 90vw;
        margin: 0 auto 4%;
        font-size: 1.2rem;
        line-height: 2rem;
    }
    
    p.kotobun {
        font-size: 0.9rem;
        font-weight: 400;
        line-height: 2rem;
        margin: 0 0 2rem 0;
        -webkit-text-stroke: 0.08vw;
    }
    
    .goods-info {
        width: 90vw;
        margin: 10% auto 5%;
        border-top: 1px solid #333;
        border-bottom: 1px solid #333;
        padding: 8% 0% 10%;
    }
    
    p.goods-description {
        font-size: 0.9rem;
        line-height: 1.4rem;
        font-weight: 400;
        margin-bottom: 3%;
    }
    .author-info {
    display: flex;
    width: 85%;
    margin: 0 auto;
}
.author-image img {
        border-radius: 50%;
        width: 8rem;
        height: 8rem;
        object-fit: cover;
        margin: 0;
        text-align: center;
}
.author-image {
    text-align: center;
    display: block;
    margin: 0 auto;
}
    img.goods-image {
        width: 65%;
        margin: 0 auto;
        text-align: center;
        display: block;
        margin-bottom: 6%;
    }
    .banner {
    margin: 4vw auto 2vw;
    width: 85%;
}
    h3.goods-title {
        font-size: 1rem;
        text-align: center;
        font-weight: 600;
        margin-bottom: 5%;
    }
    
    p.brevtitle {
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 3%;
        letter-spacing: 1px;
    }
    
    p.brevauthor {
        font-weight: 500;
        font-size: 0.94rem;
        letter-spacing: 1px;
    }
    
    nav {
        width: 85%;
        margin: 10% auto 10%;
    }
    
    .breadcrumb {
        font-size: 0.94rem;
        padding: 5px;
        line-height: 2rem;
        display: flex;
        flex-wrap: nowrap; /* 改行を防ぐ */
        overflow-x: auto; /* 画面幅が狭い場合に横スクロール */
        white-space: nowrap; /* テキストの折り返しを防ぐ */
        list-style: none;
        padding: 0;
        margin: 0;
        gap: 5px; /* 各アイテムの間隔を調整 */
    }
    
    .breadcrumb li {
        display: inline-block;
    }
    
    .breadcrumb li a {
        text-decoration: none;
        color: #333; /* 好みに応じて変更 */
    }
    
    .breadcrumb li::after {
        content: "›"; /* 区切り記号を追加 */
        margin: 0 5px;
        color: #999; /* 色を調整 */
    }
    
    .breadcrumb li:last-child::after {
        content: ""; /* 最後のアイテムには区切りを付けない */
    }
.author-info {
    display: block;
    padding: 6% 30px;
    border-radius: 10px;
    transition: background-color 0.3s ease-in-out;
    background-color: #f5f5f5;
    margin-top: 5%;
}
    .goods-info {
        width: 85%;
        margin: 10% auto 5%;
        border-top: 1px solid #333;
        border-bottom: 1px solid #333;
        padding: 8% 0% 10%;
    }
}
.related-content-wrapper {
    margin: 40px 0;
}

.related-content-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem;
}
img.related-content-image {
    border-radius: 20px;
}
.related-content-card {
    box-sizing: border-box;
    flex-direction: column;
    justify-content: space-between;
}

.related-content-title {
    font-size: 0.94rem;
    font-weight: 500;
    line-height: 1.8rem;
    margin: 1rem 0 0rem 0;
}

.related-content-image-wrapper {
    margin-bottom: 10px;
}

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

.related-content-link a {
    color: #007acc;
    text-decoration: none;
}

.related-content-link a:hover {
    text-decoration: underline;
}

.related-content-card--empty {
    visibility: hidden;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .related-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .goods_list {
        grid-template-columns: repeat(2, 1fr); /* タブレットでは2列 */
    }
}

@media (max-width: 768px) {
    .goods_list {
        grid-template-columns: repeat(1, 1fr); /* スマホでは1列 */
    }

    .ad-slot {
        min-height: 250px; /* スマホ用の広告サイズ */
    }
}
.related-content-image {
  transition: transform 0.3s ease-in-out;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

/* PCなどマウス対応環境では拡大 */
@media (hover: hover) and (pointer: fine) {
  .related-content-card:hover .related-content-image {
    transform: scale(1.03);
  }
}

/* スマホなどタップ対応環境ではタップ感 */
@media (hover: none) and (pointer: coarse) {
  .related-content-card:active .related-content-image {
    filter: brightness(0.92);
    transform: scale(0.98);
    transition: transform 0.1s ease, filter 0.1s ease;
  }
}


/* === SP-CAROUSEL-2026-05-24 === */
/* SP: MORE LIKE THIS / INFORMATION を全幅・横スライド化
   本文85% / フラット(影なし)/ scroll-snap エッジpeek  (2026-05-24 林) */
@media (max-width: 768px) {

  /* 本文は85%中央 */
  article.topics:not(.last) { width: 85%; margin: 8rem auto 1%; }
  article.topics:not(.last) .inner.topics { width: 100%; margin: 0 auto; }

  /* 横スライド・トラック共通 */
  .related-content-grid,
  .goods_list {
    display: flex;
    grid-template-columns: none;
    gap: 4vw;
    margin: 0;
    padding: 0 7.5% 4vw;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: 7.5%;
    align-items: flex-start;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .related-content-grid::-webkit-scrollbar,
  .goods_list::-webkit-scrollbar { display: none; }

  /* 見出しをトラックと同じ7.5%にインデント(既存4クラスセレクタを上書き) */
  .contetnts_bottom h2.title-ani-tar.title-ani.sbttl.c_ttl-mid,
  .topics.last h2.title-ani-tar.title-ani.sbttl.c_ttl-mid {
    padding-left: 7.5%;
    margin-bottom: 6%;
    font-size: 1.8rem;
  }

  /* MORE LIKE THIS: 全幅バンド(左オフセット/角丸を解除) */
  .contetnts_bottom .topicsinner {
    width: 100%;
    margin-left: 0;
    border-radius: 0;
    padding: 11vw 0 9vw;
  }
  .contetnts_bottom .topicsbox.w70.ow { width: 100%; margin: 0; }
  .related-content-card { flex: 0 0 72%; scroll-snap-align: start; }
  .related-content-card--empty { display: none; }
  .related-content-image { border-radius: 14px; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

  /* INFORMATION: 全幅バンド */
  .topics.last { width: 100%; margin: 12% auto; }
  .topics.last .topicsbox.w70.mt50 { width: 100%; margin: 0; }
  .good_list { flex: 0 0 45%; scroll-snap-align: start; text-align: center; }
  img.bnnr { border-radius: 16px; }

  /* INFORMATION 内の breadcrumb は全幅化しない */
  .topics.last nav { width: 85%; margin: 12% auto; }
}


/* === SP-HERO-2026-05-24 === */
/* SP: 記事トップ hero 強化  (2026-05-24 林) */
@media (max-width: 768px) {
  /* eyebrow: BOOKREVIEW */
  p.title-ani-tar.title-ani.sbttl {
    width: 85%;
    margin: 1.5rem auto 0.6rem;
    font-size: 0.8rem;
    letter-spacing: 3px;
  }
  /* タイトル */
  h1.l-und_main-static-ttl {
    width: 85%;
    margin: 0 auto 7%;
    font-size: 1.5rem;
    line-height: 2.4rem;
    font-weight: 600;
    letter-spacing: 0.4px;
  }
  /* メイン画像: 全幅フルブリード(フラット) */
  .mainimg_bre {
    display: block;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-bottom: 8%;
  }
  img.breview_mainimg {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 0;
    display: block;
  }
  .breview_caption { right: 14px; bottom: 14px; }
}


/* === SP-ADSENSE-2026-05-24 === */
/* SP: AdSense を最大80%幅・中央に  (2026-05-24 林) */
@media (max-width: 768px) {
  .banner {
    width: 80%;
    max-width: 80%;
    margin: 9vw auto;
    overflow: hidden;
    text-align: center;
  }
  .banner .adsbygoogle {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  .banner iframe {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* === ADSENSE-CLAMP-GLOBAL-2026-05-24 === */
/* PC含む全ビューポートで広告を .banner 内にクランプ(はみ出し防止) */
.banner { overflow: hidden; }
.banner .adsbygoogle { display: block; width: 100%; max-width: 100%; margin: 0 auto; }
.banner ins.adsbygoogle { max-width: 100%; }
.banner iframe { max-width: 100% !important; }