/*
Theme Name: エダマメCOMIC
Theme URI: https://eda-ma.me/
Author: エダマメCOMIC編集部
Description: エダマメCOMIC専用テーマ
Version: 1.1.0
Text Domain: edamame-comic
*/


/* =========================
   基本設定
========================= */

:root {
  --green: #9acb32;
  --green-dark: #638c13;
  --ink: #222;
  --muted: #777;
  --line: #e8e8e8;
  --soft: #f6f8f2;
  --width: 1100px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: #fff;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Yu Gothic",
    YuGothic,
    Meiryo,
    sans-serif;

  line-height: 1.7;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.wrap {
  width: calc(100% - 32px);
  max-width: var(--width);
  margin: 0 auto;
}


/* =========================
   ヘッダー
========================= */

/* 通常ページのヘッダー */
.site-header {
  position: relative;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

/* トップページ・ジャンルページでヘッダーを追従 */
.home .site-header,
.tax-comic_genre .site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: transform 0.3s ease;
}

.home .site-header.header-hidden,
.tax-comic_genre .site-header.header-hidden {
  transform: translateY(-100%);
}

.header-inner {
  height: 68px;

  display: flex;
  align-items: center;

  gap: 30px;
}

.site-logo {
  display: block;
}

.site-logo img {
  width: 150px;
  max-height: 45px;

  object-fit: contain;
  object-position: left center;
}

.site-nav {
  margin-left: auto;
}

.site-nav ul {
  display: flex;
  align-items: center;

  gap: 24px;

  padding: 0;
  margin: 0;

  list-style: none;
}

.site-nav a {
  font-size: 14px;
  font-weight: 700;

  transition: .2s;
}

.site-nav a:hover {
  color: var(--green-dark);
}


/* =========================
   共通セクション
========================= */

.section {
  padding: 48px 0;
}

.section-head {
  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 15px;

  margin-bottom: 20px;
}

.section-title {
  margin: 0;

  font-size: 25px;
  line-height: 1.3;
}

.more {
  flex-shrink: 0;

  color: var(--green-dark);

  font-size: 13px;
  font-weight: 700;
}


/* =========================
   作品一覧
========================= */

.comic-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 30px 14px;
}

.comic-card {
  min-width: 0;
}

.comic-card a {
  display: block;
}

.comic-cover {
  position: relative;

  width: 100%;

  aspect-ratio: 318 / 449;

  overflow: hidden;

  background: #eee;
}

.comic-cover img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform .3s ease;
}

.comic-card:hover .comic-cover img {
  transform: scale(1.02);
}

.comic-title {
  margin: 10px 0 4px;

  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
}

.comic-author,
.comic-credit {
  margin: 2px 0;

  color: var(--muted);

  font-size: 11px;
  line-height: 1.5;
}


/* =========================
   ジャンル
========================= */

.genre-list {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;
}

.genre-list a {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 43px;

  padding: 8px 20px;

  border: 1px solid #ddd;
  border-radius: 999px;

  background: #fff;

  font-size: 13px;
  font-weight: 700;
}

.genre-list a:hover {
  border-color: var(--green);

  background: var(--soft);
}


/* =========================
   マンガ家募集
========================= */

.recruit {
  margin-top: 35px;

  padding: 55px 0;

  background: var(--green);

  color: #fff;

  text-align: center;
}

.recruit-inner {
  max-width: 700px;
}

.recruit h2 {
  margin: 0 0 15px;

  font-size: 25px;
  line-height: 1.45;
}

.recruit p {
  margin: 0;

  font-size: 13px;
  line-height: 1.8;
}

.button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 48px;

  padding: 0 30px;

  border-radius: 999px;

  background: var(--ink);

  color: #fff;

  font-weight: 700;
}

.recruit .button {
  margin-top: 25px;

  background: #fff;

  color: var(--green-dark);
}


/* =========================
   作品一覧ページ
========================= */

.archive-head {
  padding: 45px 0 25px;
}

.archive-head h1 {
  margin: 0;

  font-size: 28px;
}


/* =========================
   作品詳細
========================= */

.single-hero {
  padding: 32px 0 20px;

  background: #fff;
}

.single-intro {
  display: block;

  max-width: 700px;
}

.single-cover {
  width: 190px;

  margin: 0 auto 24px;
}

.single-cover img {
  width: 100%;
  height: auto;
}

.single-info {
  width: 100%;

  max-width: 560px;

  margin: 0 auto;
}

.single-info h1 {
  margin: 0 0 20px;

  font-size: 24px;
  line-height: 1.5;
}

.work-meta {
  margin: 0;

  border: 0;
}

.meta-row {
  display: grid;

  grid-template-columns: 100px 1fr;

  gap: 15px;

  margin: 0;

  padding: 5px 0;

  border: 0;
}

.meta-label {
  color: #555;

  font-size: 14px;
  font-weight: 700;
}

.meta-value {
  font-size: 14px;
  font-weight: 600;
}


/* =========================
   マンガ本編
========================= */

#trial {
  margin-top: 0;
}

.manga-section {
  padding-top: 0;
}

.trial-label {
  padding: 22px 16px 20px;

  text-align: center;
}

.trial-label h2 {
  margin: 0;

  font-size: 21px;
  line-height: 1.4;
}

.manga-content {
  width: 100%;

  max-width: 800px;

  margin: 0 auto;
}


/*
 * 旧本文方式との互換用
 */

.manga-content figure,
.manga-content p,
.manga-content .wp-block-image {
  margin: 0;
}

.manga-content .wp-block-gallery,
.manga-content .blocks-gallery-grid {
  display: block !important;

  gap: 0;
}

.manga-content .wp-block-gallery figure,
.manga-content .blocks-gallery-item,
.manga-content .wp-block-image {
  display: block !important;

  width: 100% !important;

  max-width: none !important;

  margin: 0 !important;
}


/*
 * 新しい「マンガ本編画像」方式
 */

.manga-content img,
.manga-content img.manga-page {
  display: block;

  width: 100% !important;
  max-width: 100%;

  height: auto !important;

  margin: 0 !important;
}


/* =========================
   続きを読む
========================= */

.continue-area {
  width: 100%;

  padding: 42px 20px 60px;

  text-align: center;
}

a.continue-button {
  display: inline-flex !important;

  width: 280px !important;
  max-width: 100%;

  min-height: 54px;

  align-items: center !important;
  justify-content: center !important;

  padding: 0 20px;

  border: 2px solid var(--ink) !important;

  border-radius: 9999px !important;

  background: #fff !important;

  color: var(--ink) !important;

  font-size: 15px !important;
  font-weight: 700 !important;

  text-decoration: none !important;

  transition: .2s;
}

a.continue-button:hover {
  background: var(--ink) !important;

  color: #fff !important;
}


/* =========================
   旧CTAとの互換
========================= */

.cta {
  width: calc(100% - 32px);

  max-width: 650px;

  margin: 45px auto 60px;

  padding: 35px 20px;

  text-align: center;

  background: var(--soft);
}

.cta p {
  margin: 0 0 5px;

  font-size: 13px;
}

.cta h2 {
  margin: 0 0 20px;

  font-size: 21px;
}

.cta .button {
  background: var(--green-dark);
}


/* =========================
   フッター
========================= */

.site-footer {
  padding: 35px 0;
  background: var(--green);
  color: #fff;
}

.footer-inner {
  text-align: center;
}

.footer-logo {
  width: 190px;

  margin: 0 auto;

  filter: brightness(0) invert(1);

  opacity: .9;
}

.copyright {
  margin: 15px 0 0;

  font-size: 11px;
}


/* =========================
   その他
========================= */

.empty {
  grid-column: 1 / -1;

  padding: 30px 20px;

  border: 1px dashed #bbb;

  color: var(--muted);

  text-align: center;
}

/* =========================================================
   クリエイター募集
========================================================= */

.creator-recruit {
  padding: 60px 0 0;
  background: #fff;
}

.creator-recruit-head {
  margin-bottom: 28px;
  padding: 10px 16px;
  background: #d7eb9b;
}

.creator-recruit-head h2 {
  margin: 0;
  color: #222;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}

.creator-recruit-hero {
  position: relative;
  min-height: 300px;
  padding: 60px 70px;
  display: flex;
  align-items: center;
  background: #a8d46a;
  overflow: hidden;
}

.creator-recruit-copy {
  position: relative;
  z-index: 2;
  max-width: 540px;
  color: #fff;
}

.creator-recruit-copy h3 {
  margin: 0 0 24px;
  font-size: 34px;
  line-height: 1.45;
}

.creator-recruit-copy p {
  margin: 0;
  font-size: 16px;
  line-height: 2;
}


/* =========================
   スマホ
========================= */

/* =========================================================
   クリエイター 制作ジャンル
========================================================= */

.creator-fields {
  padding: 70px 0;
  background: #fff;
}

.creator-fields-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.creator-field-card {
  min-width: 0;
}

/* 後で画像を入れる場所 */
.creator-field-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 22px;
  background: #f3f3f3;
}

.creator-field-label {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 700;
}

.creator-field-text h3 {
  margin: 0 0 12px;
  font-size: 21px;
  line-height: 1.5;
}

.creator-field-text p {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.9;
}

/* =========================================================
   クリエイター登録CTA
========================================================= */

.creator-entry {
  padding: 20px 0 70px;
  background: #fff;
}

.creator-entry-box {
  position: relative;
  min-height: 280px;
  padding: 55px 70px;

  display: flex;
  align-items: center;

  background: #d878a0;
  overflow: hidden;
}

.creator-entry-text {
  position: relative;
  z-index: 2;
  color: #fff;
}

.creator-entry-text h2 {
  font-size: 20px;
  line-height: 1.5;
  white-space: nowrap;
}

.creator-entry-text p {
  margin: 0;

  font-size: 14px;
  line-height: 1.9;
}

.creator-entry-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 50px;
  margin-top: 28px;
  padding: 0 28px;

  border-radius: 999px;

  background: #fff;
  color: #8a3f60;

  font-size: 14px;
  font-weight: 700;

  transition: .2s;
}

.creator-entry-button:hover {
  transform: translateY(-2px);
}

/* 後で画像を配置する場所 */
.creator-entry-image {
  flex: 1;
}

/* =========================================================
   クリエイター登録の流れ
========================================================= */

.creator-flow {
  padding: 75px 0;
  background: #fff;
}

.creator-flow-head {
  margin-bottom: 45px;
  text-align: center;
}

.creator-flow-head h2 {
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 1.4;
}

.creator-flow-head p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.creator-flow-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.creator-flow-item {
  padding: 30px 22px;
  border: 1px solid #e5e5e5;
  text-align: center;
}

.creator-flow-number {
  display: block;
  margin-bottom: 14px;

  color: var(--green-dark);
  font-size: 28px;
  font-weight: 700;
}

.creator-flow-item h3 {
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.5;
}

.creator-flow-item p {
  margin: 0;
  color: #666;
  font-size: 13px;
  line-height: 1.8;
}

/* =========================================================
   最終クリエイター募集CTA
========================================================= */

.creator-final {
  padding: 20px 0 70px;
  background: #fff;
}

.creator-final-box {
  position: relative;
  min-height: 360px;
  padding: 65px 70px;

  display: flex;
  align-items: center;

  background: var(--green);
  overflow: hidden;
}

.creator-final-text {
  position: relative;
  z-index: 2;
  color: #fff;
}

.creator-final-lead {
  margin: 0 0 12px;

  font-size: 15px;
  font-weight: 700;
}

.creator-final-text h2 {
  margin: 0 0 22px;

  font-size: 34px;
  line-height: 1.45;
}

.creator-final-description {
  margin: 0;

  font-size: 14px;
  line-height: 1.9;
}

.creator-recruit-button {
  display: block;
  width: 100%;
  box-sizing: border-box;

  padding: 18px 24px;

  background: #fff;
  border-radius: 999px;

  color: var(--green-dark);
  font-weight: 700;
  text-decoration: none;

  transition: opacity .2s ease;
}

.creator-final-button:hover {
  transform: translateY(-2px);
}

/* 後から画像を配置 */
.creator-final-image {
  flex: 1;
}

/* =========================================================
   メインスライダー
========================================================= */

.main-slider {
  position: relative;
  width: 100%;
  padding: 28px 0 42px;
  overflow: hidden;
  background: #fff;
}

.main-slider-track {
  position: relative;
  width: calc(100% - 40px);
  max-width: 1100px;
  aspect-ratio: 16 / 6;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 24px;
}

.main-slide {
  position: absolute;
  inset: 0;

  display: block;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity .6s ease,
    visibility .6s ease;
}

.main-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.main-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 仮画像 */
.main-slide-placeholder {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #f1f1f1;
  color: #aaa;

  font-size: 20px;
  font-weight: 700;
}

/* 下のドット */
.main-slider-dots {
  position: absolute;
  left: 50%;
  bottom: 18px;

  display: flex;
  gap: 8px;

  transform: translateX(-50%);
}

.main-slider-dots button {
  width: 8px;
  height: 8px;

  padding: 0;
  border: 0;
  border-radius: 50%;

  background: #ccc;

  cursor: pointer;
}

.main-slider-dots button.is-active {
  background: var(--green-dark);
}

/* =========================================================
   クリエイター紹介スライダー
========================================================= */

.creator-slider {
  padding: 70px 0;
  background: #fff;
}

.creator-slider-head {
  margin-bottom: 35px;
}

.creator-slider-head h2 {
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 1.5;
}

.creator-slider-head p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

/* スライド本体 */
.creator-slider-track {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 6;
  overflow: hidden;
  background: #f3f3f3;
}

.creator-slide {
  position: absolute;
  inset: 0;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity .5s ease,
    visibility .5s ease;
}

.creator-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.creator-slide-placeholder {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #aaa;
  font-size: 20px;
  font-weight: 700;
}

/* ドット */
.creator-slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;

  margin-top: 18px;
}

.creator-slider-dots button {
  width: 9px;
  height: 9px;

  padding: 0;
  border: 0;
  border-radius: 50%;

  background: #ccc;
  cursor: pointer;
}

.creator-slider-dots button.is-active {
  background: var(--green-dark);
}

@media (max-width: 700px) {

  .wrap {
    width: calc(100% - 28px);
  }

  /* マンガ家募集エリア */
  .recruit {
    width: calc(100% - 28px);
    margin-bottom: 28px;
    border-radius: 20px;
  }


  /* ヘッダー */

  .site-header {
    position: relative;

    top: auto;
  }

  .header-inner {
    height: 68px;
  }

  .site-logo img {
    width: 125px;

    max-height: 40px;
  }

/* スマホヘッダー */

.site-header {
  position: relative;
  top: auto;
}

/* スマホヘッダー：1列表示 */
.header-inner {
  height: auto;
  min-height: 52px;
  padding: 6px 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
}

/* ロゴ */
.site-logo {
  width: auto;
  flex: 0 0 auto;
}

.site-logo img {
  display: block;
  width: 70px;       /* 80px → 70px */
  max-height: 32px;
  object-fit: contain;
}

/* ナビゲーション */
.site-nav {
  display: block;
  width: auto;
  flex: 1;
  margin-left: 0;
}

.site-nav ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}

.site-nav li {
  text-align: center;
}

.site-nav a {
  display: block;
  padding: 8px 2px;
  font-size: 9px;    /* 10px → 9px */
  white-space: nowrap;
}


  /* トップページ */

  #new {
    padding-top: 28px;
  }

  .section {
    padding-top: 38px;
    padding-bottom: 38px;
  }

  .section-head {
    margin-bottom: 18px;
  }

  .section-title {
    font-size: 22px;
    line-height: 1.3;
  }

  .more {
    font-size: 12px;
  }


  /* 作品一覧 */

  .comic-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 28px 12px;
  }

  .comic-title {
    margin: 9px 0 5px;

    font-size: 13px;
    line-height: 1.45;
  }

  .comic-credit,
  .comic-author {
    margin: 1px 0;

    font-size: 10.5px;
    line-height: 1.45;
  }


  /* ジャンル */

  .genre-list {
    gap: 8px;
  }

  .genre-list a {
    min-height: 40px;

    padding: 7px 16px;

    font-size: 12px;
  }


  /* マンガ家募集 */

  .recruit {
    margin-top: 25px;

    padding: 45px 0;
  }

  .recruit h2 {
    font-size: 21px;
  }
	
	/* クリエイター募集 */

.creator-recruit {
  padding-top: 36px;
}

.creator-recruit-head {
  margin-bottom: 18px;
  padding: 8px 12px;
}

.creator-recruit-head h2 {
  font-size: 20px;
}

.creator-recruit-hero {
  min-height: 240px;
  padding: 36px 24px;
}

.creator-recruit-copy h3 {
  margin-bottom: 18px;
  font-size: 26px;
}

.creator-recruit-copy p {
  font-size: 14px;
  line-height: 1.8;
}

.creator-recruit-copy p br {
  display: none;
}
	
/* クリエイター 制作ジャンル */

.creator-fields {
  padding: 45px 0;
}

.creator-fields-grid {
  grid-template-columns: 1fr;
  gap: 42px;
}

.creator-field-image {
  margin-bottom: 18px;
}

.creator-field-text h3 {
  font-size: 19px;
}

.creator-field-text p {
  font-size: 13px;
}
	
	/* クリエイター登録CTA */

.creator-entry {
  padding: 10px 0 45px;
}

.creator-entry-box {
  min-height: 0;
  padding: 38px 24px;
}

.creator-entry-text h2 {
  font-size: 23px;
}

.creator-entry-text p {
  font-size: 13px;
}

.creator-entry-text p br {
  display: none;
}

.creator-entry-button {
  min-height: 46px;
  margin-top: 24px;
  padding: 0 22px;

  font-size: 13px;
}
	
	/* クリエイター登録の流れ */

.creator-flow {
  padding: 50px 0;
}

.creator-flow-head {
  margin-bottom: 30px;
}

.creator-flow-head h2 {
  font-size: 22px;
}

.creator-flow-head p {
  font-size: 13px;
}

.creator-flow-list {
  grid-template-columns: 1fr;
  gap: 14px;
}

.creator-flow-item {
  padding: 24px 20px;
}

.creator-flow-number {
  margin-bottom: 8px;
  font-size: 24px;
}

.creator-flow-item h3 {
  font-size: 16px;
}
	
	/* 最終クリエイター募集CTA */

.creator-final {
  padding: 10px 0 40px;
}

.creator-final-box {
  min-height: 0;
  padding: 40px 24px;
}

.creator-final-lead {
  font-size: 13px;
}

.creator-final-text h2 {
  margin-bottom: 18px;
  font-size: 23px;
}

.creator-final-description {
  font-size: 13px;
}

.creator-final-description br {
  display: none;
}

.creator-final-button {
  min-height: 46px;
  margin-top: 24px;
  padding: 0 22px;

  font-size: 13px;
}
	
	/* メインスライダー */

.main-slider {
  padding: 16px 0 34px;
}

.main-slider-track {
  width: calc(100% - 28px);
  aspect-ratio: 16 / 9;
  border-radius: 16px;
}

.main-slide-placeholder {
  font-size: 14px;
}

.main-slider-dots {
  bottom: 13px;
}
	
	/* クリエイター紹介 無限スクロール */

.creator-gallery {
  padding: 45px 0;
}

.creator-gallery-head {
  margin-bottom: 24px;
}

.creator-gallery-head h2 {
  font-size: 22px;
}

.creator-gallery-head p {
  font-size: 13px;
}

.creator-gallery-item {
  flex-basis: 170px;

  width: 170px;
  height: 170px;

  margin-right: 12px;

  font-size: 12px;
}

.creator-gallery-track {
  animation-duration: 28s;
}
	
/* =========================================================
   クリエイター紹介 無限スクロール
========================================================= */

.creator-gallery {
  padding: 70px 0;
  background: #fff;
  overflow: hidden;
}

.creator-gallery-head {
  margin-bottom: 35px;
}

.creator-gallery-head h2 {
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 1.5;
}

.creator-gallery-head p {
  margin: 0;
  color: #666;
  font-size: 14px;
}


/* 横スクロール領域 */

.creator-gallery-window {
  width: 100%;
  overflow: hidden;
}


/* 画像を横一列に並べる */

.creator-gallery-track {
  display: flex;
  width: max-content;

  animation: creator-gallery-scroll 35s linear infinite;
}


/* 正方形画像 */

.creator-gallery-item {
  flex: 0 0 260px;

  width: 260px;
  height: 260px;

  margin-right: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #f1f1f1;
  color: #aaa;

  font-size: 15px;
  font-weight: 700;
}


/* 無限スクロール */

@keyframes creator-gallery-scroll {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50%));
  }

}


  /* =====================
     作品詳細
  ===================== */

  .single-hero {
    padding: 28px 0 16px;
  }

  .single-cover {
    width: 46vw;

    max-width: 190px;

    margin: 0 auto 22px;
  }

  .single-info {
    width: 100%;

    max-width: none;
  }

  .single-info h1 {
    margin: 0 0 18px;

    font-size: 19px;
    line-height: 1.5;
  }

  .meta-row {
    grid-template-columns: 78px 1fr;

    gap: 10px;

    padding: 4px 0;
  }

  .meta-label,
  .meta-value {
    font-size: 12px;
    line-height: 1.6;
  }


  /* マンガ本編 */

  .manga-section {
    padding-top: 0;
  }

  .trial-label {
    padding: 18px 14px 16px;
  }

  .trial-label h2 {
    font-size: 18px;
    line-height: 1.4;
  }

  /*
   * スマホではマンガを画面幅いっぱいに表示
   */

  .manga-content {
    width: 100%;

    max-width: none;
  }


  /* 続きを読む */

  a.continue-button {
    width: 240px !important;

    min-height: 52px;

    font-size: 14px !important;
  }

  .continue-area {
    padding: 36px 20px 48px;
  }


  .cta {
    margin-top: 35px;
    margin-bottom: 45px;
  }

}


/* =========================
   PC
========================= */

@media (min-width: 701px) {

  .comic-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));

    gap: 40px 22px;
  }

  .section {
    padding: 65px 0;
  }

  .section-title {
    font-size: 28px;
  }

  .comic-title {
    font-size: 15px;
  }

  .comic-author,
  .comic-credit {
    font-size: 12px;
  }

}
/* 作品詳細：PC */
.single-info h1 {
  font-size: 28px;
}

.meta-row {
  grid-template-columns: 120px 1fr;
  gap: 18px;
  padding: 7px 0;
}

.meta-label {
  font-size: 16px;
}

.meta-value {
  font-size: 16px;
}

.trial-label h2 {
  font-size: 24px;
}

/* =========================
   作品カード 配信サイト
========================= */

.comic-service {
  width: 100%;
  margin-top: 7px;
  padding: 5px 10px;

  border: 1.5px solid #222;
  border-radius: 999px;

  background: #fff;
  color: #222;

  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}


/* スマホ */
@media (max-width: 700px) {

  .comic-service {
    margin-top: 5px;
    padding: 4px 5px;

    font-size: 9px;
  }

}

/* =========================
   Webtoon表示
========================= */

.manga-content.manga-webtoon {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
}

.manga-content.manga-webtoon img,
.manga-content.manga-webtoon img.manga-page {
  display: block;
  width: 100% !important;
  max-width: 760px;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0;
  border: 0;
}

/* スマートフォン */
@media (max-width: 700px) {

  .manga-content.manga-webtoon {
    width: 100%;
    max-width: 100%;
  }

  .manga-content.manga-webtoon img,
  .manga-content.manga-webtoon img.manga-page {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    margin: 0 !important;
  }

}

/* =========================================================
   マンガ画像 保存操作の抑止
========================================================= */

.manga-content img {
  -webkit-user-select: none;
  user-select: none;

  -webkit-user-drag: none;

  /* iPhone / iPad の長押しメニューを抑止 */
  -webkit-touch-callout: none;
}

/* =========================
   マンガ本編ページ
   スクロール連動ヘッダー
========================= */

.single-comic .site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: transform 0.3s ease;
}

.single-comic .site-header.header-hidden {
  transform: translateY(-100%);
}

/* =========================
   マンガ家募集エリア
   ========================= */

.recruit {
  width: calc(100% - 40px);
  max-width: 1400px;
  margin: 0 auto 40px;  /* ← 下に40px空ける */
  border-radius: 28px;
  overflow: hidden;
}

/* =========================================================
   クリエイター画像 無限横スクロール 最終上書き
========================================================= */

.creator-gallery {
  width: 100%;
  padding: 70px 0;
  overflow: hidden;
  background: #fff;
}

.creator-gallery-window {
  width: 100%;
  overflow: hidden;
}

.creator-gallery-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch;

  width: max-content !important;

animation: creatorGalleryLoop 60s linear infinite reverse;
}

.creator-gallery-item {
  display: flex !important;
  align-items: center;
  justify-content: center;

  flex: 0 0 260px !important;

  width: 260px !important;
  height: 260px !important;

  margin: 0 20px 0 0 !important;
  padding: 0 !important;

  background: #f1f1f1;
  color: #999;

  font-size: 15px;
  font-weight: 700;
}

@keyframes creatorGalleryLoop {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}


/* スマホ */

@media (max-width: 700px) {

  .creator-gallery {
    padding: 45px 0;
  }

  .creator-gallery-item {
    flex: 0 0 170px !important;

    width: 170px !important;
    height: 170px !important;

    margin-right: 12px !important;
  }

.creator-gallery-track {
  animation: creatorGalleryLoop 60s linear infinite reverse;
}

}

/* =========================================================
   TOP メインビジュアル
========================================================= */

.comic-mainvisual {
  width: 100%;
  background: #fff;
}

.comic-mainvisual-bg {
  position: relative;

  width: 100%;
  min-height: 620px;

  display: flex;
  align-items: center;
  justify-content: center;

  /* 仮背景。後で画像に変更 */
  background: #dff9f4;

  overflow: hidden;
}


/* 中央コピー */

.comic-mainvisual-copy {
  position: relative;
  z-index: 2;

  padding: 30px 60px;

  border-radius: 20px;

  background: rgba(255, 255, 255, 0.95);

  text-align: center;
}

.comic-mainvisual-copy h1 {
  margin: 0;

  color: #8acb5a;

  font-size: 38px;
  line-height: 1.5;
  font-weight: 700;
}


/* 下の3ボタン */

.comic-mainvisual-nav {
  position: absolute;

  left: 50%;
  bottom: 0;

  z-index: 3;

  display: flex;

  transform: translateX(-50%);
}

.comic-mainvisual-nav-item {
  width: 230px;
  height: 105px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  color: #fff;

  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;

  transition: .2s;
}

.comic-mainvisual-nav-item:hover {
  transform: translateY(-5px);
}

.comic-mainvisual-nav-item b {
  margin-top: 5px;

  font-size: 18px;
  line-height: 1;
}

.nav-gray {
  background: #707889;
}

.nav-pink {
  background: #d7779d;
}

.nav-green {
  background: #91ca58;
}

@media (max-width: 700px) {

  .comic-mainvisual-bg {
    min-height: 520px;

    align-items: flex-start;

    padding-top: 100px;
  }

  .comic-mainvisual-copy {
    width: calc(100% - 50px);

    padding: 22px 15px;

    border-radius: 14px;
  }

  .comic-mainvisual-copy h1 {
    font-size: 24px;
    line-height: 1.5;
  }

  .comic-mainvisual-nav {
    width: calc(100% - 28px);
  }

  .comic-mainvisual-nav-item {
    width: 33.333%;
    height: 90px;

    padding: 8px 4px;

    font-size: 11px;
  }

  .comic-mainvisual-nav-item b {
    font-size: 14px;
  }

}

/* =========================================================
   漫画表紙 無限スクロール
========================================================= */

.comic-cover-gallery .comic-cover-gallery-item {
  flex: 0 0 240px !important;

  width: 240px !important;
  height: auto !important;
  aspect-ratio: 318 / 449;

  margin-right: 20px !important;
  padding: 0 !important;

  overflow: hidden;
  background: #eee;
}

.comic-cover-gallery .comic-cover-gallery-item img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform .3s ease;
}

.comic-cover-gallery .comic-cover-gallery-item:hover img {
  transform: scale(1.03);
}


/* スマホ */

@media (max-width: 700px) {

  .comic-cover-gallery .comic-cover-gallery-item {
    flex-basis: 150px !important;

    width: 150px !important;
    height: auto !important;

    margin-right: 12px !important;
  }

}

.creator-field-image {
  overflow: hidden;
}

.creator-field-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comic-mainvisual-bg {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* 最終クリエイター募集CTA 中央揃え */

.creator-final-box {
  justify-content: center;
  text-align: center;
}

.creator-final-text {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

/* =========================================================
   ジャンル 表示行
========================================================= */

.genre-list {
  display: block;
}

.genre-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.genre-row:last-child {
  margin-bottom: 0;
}

/* =========================================================
   ジャンル スマホ表示
========================================================= */

@media (max-width: 700px) {

  .genre-list {
    display: block;
  }

  .genre-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 10px;
  }

  .genre-row a {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    justify-content: center;
  }

}

/* =========================================================
   クリエイター募集 登録CTA
========================================================= */

.creator-recruit-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.creator-recruit-copy {
  flex: 1;
}

.creator-recruit-cta {
  flex: 0 0 360px;
  text-align: center;
}

.creator-recruit-button {
  display: block;
  width: 100%;
  box-sizing: border-box;

  padding: 18px 24px;

  background: #fff;
  border-radius: 999px;

  color: var(--green-dark);
  font-weight: 700;
  text-decoration: none;

  transition: opacity .2s ease;
}

.creator-recruit-button:hover {
  opacity: .8;
}

.creator-recruit-note {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  color: #fff;
}


/* スマホ */

@media (max-width: 700px) {

  .creator-recruit-hero {
    display: block;
  }

  .creator-recruit-cta {
    width: 100%;
    margin-top: 30px;
  }

  .creator-recruit-button {
    width: 100%;
  }

}

/* =========================================================
   最終CTA ボタン復旧
========================================================= */

.creator-final-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  min-height: 52px;
  margin-top: 30px;
  padding: 0 30px;

  background: #fff !important;
  color: var(--green-dark) !important;

  border-radius: 999px;
  text-decoration: none !important;

  font-size: 14px;
  font-weight: 700;

  transition: .2s;
}

/* マンガのお仕事：表紙3枚 */

.creator-field-manga {
  position: relative;
  overflow: hidden;
}

.creator-field-manga .manga-cover {
  position: absolute;
  width: 34%;
  height: auto;
  object-fit: contain;

  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.creator-field-manga .manga-cover-1 {
  left: 10%;
  top: 20%;
  transform: rotate(-7deg);
  z-index: 1;
}

.creator-field-manga .manga-cover-2 {
  left: 33%;
  top: 12%;
  transform: rotate(0);
  z-index: 3;
}

.creator-field-manga .manga-cover-3 {
  right: 10%;
  top: 20%;
  transform: rotate(7deg);
  z-index: 2;
}

/* =========================================================
   作品一覧 ページネーション
========================================================= */

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  margin: 0 4px;

  border: 1px solid #ddd;
  border-radius: 999px;

  background: #fff;
  color: #222;

  font-size: 14px;
  font-weight: 700;
  text-decoration: none;

  box-sizing: border-box;
}

.page-numbers.current {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: #fff;
}

a.page-numbers:hover {
  background: #f5f5f5;
}

.page-numbers.prev,
.page-numbers.next {
  padding: 0 18px;
}

/* フッター SNSボタン */
.footer-sns {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0;
}

.footer-sns .sns-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 24px;
  border: 1px solid #ddd;
  border-radius: 30px;
  background: #fff;
  color: #222;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}

.footer-sns .sns-button:hover {
  background: #f2f2f2;
  transform: translateY(-2px);
}

@media (max-width: 480px) {
  .footer-sns .sns-button {
    padding: 10px 18px;
    font-size: 13px;
  }
}