/*
Theme Name: スケベページから確認したいって言ってるでしょ！
Theme URI: https://sukebe-first.com/
Author: Yousuke
Author URI: https://sukebe-first.com/
Description: FANZA同人・Books画像ギャラリー用 WordPress テーマ（オリジナル HTML 移植版）
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sukebe-first
Tags: responsive-layout, gallery, affiliate, fanza
*/

/*
  ▼ 必要に応じて追記してください。現状は CSS を index.php の <style> に含めているため
     ここにはテーマメタデータのみ記述しています。
*/

/* ───────── sidebar: 新着紹介記事 ───────── */
#sidebar .recent-posts{
  list-style:none!important;      /* ←● を完全に無効化 */
  margin:0;
  padding:0;
  text-align:center;              /* 中央寄せにする場合 */
}
#sidebar .recent-posts li{
  list-style:none!important;      /* 念のため LI にも */
  margin-bottom:14px;
}

#sidebar .recent-posts li::marker{   /* Safari など対策 */
  content:none;
}

/* サムネ＋タイトルの体裁 */
#sidebar .recent-posts a{
  display:inline-block;
  width:100%;
  max-width:180px;                /* サイドバー幅に合わせ調整 */
  text-align:center;
　text-decoration:none;
  color:#333;
}
#sidebar .recent-posts .thumb-wrap img{
  width:100%;
  height:auto;
  border-radius:4px;
}
#sidebar .recent-posts .rp-title{
  display:block;
  font-size:.85em;
  margin-top:4px;
  line-height:1.3;
}

/* モバイル余白調整 */
@media(max-width:768px){
  #sidebar .recent-posts li{margin-bottom:12px;}
}

/* ------- 強制的にビュレットを消す ------- */
.recent-posts li::marker{ content:none; }   /* ← ● を出さない */
.recent-posts, .recent-posts li{
  list-style:none;                          /* 念のため二重で無効化 */
  margin:0; padding:0;
}

/* ─────────── single.php モバイル最適化 ─────────── */
/* 本文コンテナを画面幅いっぱいにし、左右余白は相対値で */
.single .entry-content,
.single .post-wrap,
.single .post-content{            /* ←実際のクラス名に合わせて調整 */
  max-width:100%;
  width:100%;
  box-sizing:border-box;
  padding-left:5vw;               /* デバイス幅に応じた余白 */
  padding-right:5vw;
}

/* 画像・動画・iframe・表を可変幅に */
.single img,
.single video,
.single iframe,
.single table{
  max-width:100%;
  height:auto;
}

/* 表が横に長い場合は横スクロールバーを許容 */
.single table{
  display:block;
  overflow-x:auto;
}

/* 見出しを流体タイポグラフィで可読性アップ（任意） */
.single h1{font-size:clamp(1.4rem,4vw,2.2rem);}
.single h2{font-size:clamp(1.2rem,3.5vw,1.6rem);}

/* ── アイキャッチ画像をスマホで縦長になりすぎないよう制御 ── */
.post-thumbnail img{
  width:100%;         /* コンテナ幅にフィット */
  height:auto;        /* 比率保持 */
}

@media(max-width:768px){
  .post-thumbnail img{
    max-height:65vw;  /* 例）画面幅の 65% を上限に   */
    object-fit:cover; /* はみ出た分はトリム           */
  }
}

/* 3) アイキャッチ＆中央寄せ画像を幅100% */
img.wp-post-image,
.single img.aligncenter{
  width:600px;
  height:auto!important;
  max-width:100%!important;
}

@media (max-width:768px){
  #post-main{
    max-width:100%!important;
    width:100%!important;
    margin:0!important;
    box-sizing:border-box;
  }
  #post-main,
  .single .entry-content{
    padding-left:4vw;
    padding-right:4vw;
  }
}

/* ── サイト共通タイトルバー ─────────────── */
#site-header{
  background:#d33;               /* バーの赤 */
  text-align:center;
  padding:14px 0;
}
#site-header .site-title{
  margin:0;
  font-weight:700;
  color:#fff;
  font-size:clamp(0.9rem, 3.5vw, 1.5rem); /* 流体フォントでPC-モバイル両対応 */
}
#site-header .site-title a{ color:#fff; text-decoration:none; }
#site-header .tagline{ font-weight:400; font-size:.8em; }

/* メニューバー */
.global-nav {
  margin: 0;
  padding: 0.5em 0;
  background: #fff0f0;
  text-align: center;
}
.global-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  gap: 16px;
}
.global-nav li {
  display: inline;
}
.global-nav a {
  text-decoration: none;
  color: #e60033;
  font-weight: bold;
}
.global-nav a:hover {
  text-decoration: underline;
}

/* フッターメニュー */
.footer-nav {
  margin: 0;
  padding: 0.5em 0;
  background: #fff0f0;
  text-align: center;
}
.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  gap: 16px;
}
.footer-nav li {
  display: inline;
}
.footer-nav a {
  text-decoration: none;
  color: #e60033;
  font-weight: bold;
}
.footer-nav a:hover {
  text-decoration: underline;
}

/* ── 横並びを折り返し＆フッターを 100% 幅に ── */
body          { flex-wrap: wrap; }   /* 列が多ければ下へ折り返す */
.footer-nav   { flex: 0 0 100%; }    /* ＝横幅100%で1行占有 */


/* index トップページタイトル */
.top-page-title {
  background: #e60033;
  color: #fff;
  font-size: 1.3em;
  padding: 1em;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
.top-page-title a {
  color: #fff;
  text-decoration: none;
}

/* 作品内容ボックス */
.product-box {
      position: relative;           /* 子要素の絶対配置の基準 */
      border: 2px solid #FFA500;    /* オレンジ系の枠線 */
      border-radius: 8px;           /* 角を丸くする */
      padding: 20px;                /* 内側の余白 */
      margin: 40px auto 20px auto;   /* 上部に余裕を持たせる */
      max-width: 800px;             /* コンテンツの最大幅 */
      background-color: #fff8f0;    /* 背景色 */
      box-shadow: 2px 2px 8px rgba(0,0,0,0.1); /* 影を付ける */
    }
    /* 左上に表示するラベルのスタイル */
    .label {
      position: absolute;
      top: -14px;                   /* 枠線からはみ出す位置 */
      left: 20px;                   /* 左側の余白に合わせる */
      background-color: #fff8f0;    /* 背景色（枠線と同じ色） */
      padding: 0 8px;               /* テキストの左右の余白 */
      font-size: 1em;
      color: #FFA500;               /* テキストの色 */
    }
    .product-title {
      margin-top: 0;               /* 上部の余白を削除して隙間をなくす */
      font-size: 1.8em;
      margin-bottom: 10px;
      color: #333;
    }
    .product-description {
      font-size: 1em;
      line-height: 1.6;
      color: #555;
    }	

/* レビュー全体のボックスデザイン */
.review-box {
  background-color: #fdfdfd;    /* 背景色を薄いグレーに */
  border: 1px solid #ddd;      /* ボーダーを薄く */
  border-radius: 8px;          /* 角の丸みを少し大きめに */
  padding: 16px 20px;          /* 全体の余白 */
  margin-bottom: 20px;         /* 下部マージン */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);  /* ほんの少し影を付ける */
  max-width: 800px;            /* 横幅を制限 */
}

/* レビュータイトル */
.review-title {
  font-weight: bold;
  font-size: 1.2em;            /* タイトルを少し大きめに */
  margin-bottom: 8px;          /* タイトル下の余白 */
  color: #333;                 /* 文字色を濃いめに */
}

/* 星の評価 */
.star-rating {
  color: #f5c518;              /* 星を黄色（Amazon風）に */
  font-size: 1.2em;            /* 星を大きめに */
  margin-bottom: 8px;          /* 下の要素との隙間 */
}

/* レビュー本文 */
.review-text {
  line-height: 1.6;            /* 行間をゆったり目に */
  color: #555;                 /* 文字色をやや薄めに */
}

/* 個別記事記事下　新記事紹介 */
.recent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  padding: 0 5vw;
  margin: 20px auto 40px;
}

.recent-item {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  text-align: center;
  transition: box-shadow .2s;
}

.recent-item:hover {
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
}

.recent-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.recent-title {
  font-size: 0.95em;
  padding: 8px;
  color: #333;
}

@media (max-width: 768px) {
  .recent-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 1vw;      /* ← 左右余白を少し詰める */
    gap: 12px;           /* ← グリッドの間隔も少し狭める */
  }  
}

/* ── FANZA 記事リンク レスポンシブ調整 ── */	
.responsive-thumbnail {
  margin: 0;
  padding: 5px;
  font-size: 14px;
  word-break: break-word;
  text-align: center;
}

.responsive-thumbnail img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.responsive-thumbnail span {
  display: block;
  margin-top: 5px;
  padding: 0;
}

/* ── 注意書き用 ── */	
.notice-text {
  font-size: 12px;
  color: #555;
  margin: 3px 0;
  text-align: center;
}

@media screen and (max-width: 600px) {
  .notice-text {
    font-size: 9px; /* モバイルでさらに小さく */
  }
}

/* ── 人気記事ランキング用index ── */
.ranking-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
  justify-items: center;
}

.ranking-item {
  width: 160px;
  text-align: center;
}

.ranking-link {
  display: block;
  position: relative;
  width: 100%;
}

.ranking-thumb-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
}

.ranking-thumb-wrap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

.ranking-caption-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);  /* 半透明の黒 */
  color: #fff;
  font-size: 0.8em;
  padding: 4px 6px;
  box-sizing: border-box;
  line-height: 1.4;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}



/* ── 人気記事ランキング用 ── */
.popular-posts-section {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 10px;
}

.popular-posts-section .section-title {
  font-size: 1.2em;
  margin-bottom: 20px;
  text-align: center;
}

.popular-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 7%;
  list-style: none;
  padding: 0;
  margin: 0;
}

.popular-post-item {
  text-align: center;
}

.popular-post-item a {
  text-decoration: none;
  color: #333;
}

.popular-thumb-wrapper {
  width: 100%;
  text-align: center;
}

.popular-thumb {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 8px;
  border-radius: 6px;
}

.popular-title {
  display: block;
  font-size: 0.95em;
  line-height: 1.3;
  margin-top: 4px;
  text-align: center;
}



/* ── 個別記事タイトル（single.php）サイズ調整 ── */
.entry-title {
  font-size: clamp(1.2rem, 4vw, 1.6rem);  /* 流体フォントで調整可能 */
  margin-top: 10px;
  margin-bottom: 10px;
}

@media (max-width: 768px){
  #container{ flex-direction:column; width:100%; }
}