@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/************************************************
 * 同人紹介用テンプレート装飾
 * 対象：<div class="doujin-article"> ～ の中身
 ************************************************/

/* カラーパレット */
:root {
  --doujin-accent: #ff4b6b;        /* メインのピンクレッド */
  --doujin-accent-light: #fff3f6;  /* 見出し背景などの薄いピンク */
  --doujin-accent-dark: #d93a57;   /* 濃いめのアクセント */
  --doujin-text-main: #222222;     /* 本文のメイン文字色 */
  --doujin-text-sub: #666666;      /* 補足テキスト用 */
  --doujin-border-soft: #eeeeee;   /* 薄めの罫線色 */
  --doujin-card-bg: #ffffff;       /* カードの背景色 */
}

/* ベースレイアウト・文字 */
.doujin-article {
  max-width: 760px;
  margin: 0 auto;
  color: var(--doujin-text-main);
}

.doujin-article p,
.doujin-article li {
  line-height: 1.8;
  font-size: 0.95rem;
}

.doujin-article ul {
  padding-left: 1.5em;
  margin-bottom: 1.8em;
}

/* 見出し装飾 */
.doujin-article h2.wp-block-heading {
  position: relative;
  margin: 2.5em 0 1em;
  padding: 0.4em 0.8em 0.4em 1em;
  border-left: 4px solid var(--doujin-accent);
  background: var(--doujin-accent-light);
  font-size: 1.2rem;
  font-weight: 700;
}

.doujin-article h3.wp-block-heading {
  margin: 1.8em 0 0.8em;
  font-size: 1.05rem;
  font-weight: 600;
  border-bottom: 1px solid var(--doujin-border-soft);
  padding-bottom: .3em;
}

.doujin-article h4.wp-block-heading {
  margin: 1.2em 0 0.4em;
  font-size: 1rem;
  font-weight: 600;
}

/* サムネ（ジャケット） */
.doujin-article p.has-text-align-center a img,
.doujin-article p.has-text-align-center img {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.doujin-article p.has-text-align-center {
  margin-bottom: 1.5em;
}

/* CTAボタン（フル漫画をダウンロード） */
.doujin-article .swell-block-button {
  margin: 1.8em auto;
  max-width: 420px;
}

.doujin-article .swell-block-button__link {
  font-weight: 700;
  letter-spacing: .05em;
  border-radius: 999px;
  /* SWELLのred_を少しだけカスタム（グラデーション） */
  background: linear-gradient(135deg, var(--doujin-accent), var(--doujin-accent-dark));
  box-shadow: 0 6px 14px rgba(217, 58, 87, 0.35);
}

.doujin-article .swell-block-button__link .swl-fz {
  font-size: 0.95rem;
}

.doujin-article .swell-block-button__link:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* PR表記（広告含みます）を少し馴染ませる */
.doujin-article .c-prNotation {
  margin-bottom: 1.5em;
  font-size: 0.85rem;
  color: var(--doujin-text-sub);
}

/* 関連作品カード（[related_posts_by_tag] が出力する部分想定） */
.doujin-article .related-posts-container {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  margin: 1.5em 0 0;
}

.doujin-article .related-post {
  background: var(--doujin-card-bg);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease;
}

.doujin-article .related-post img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}

.doujin-article .related-post-title {
  margin-top: .5em;
  font-size: 0.85rem;
  line-height: 1.5;
}

.doujin-article .related-post-title a {
  color: var(--doujin-text-main);
  text-decoration: none;
}

.doujin-article .related-post:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

/* 注意喚起ボックス（違法RAW注意） */
.doujin-article .cap_box {
  margin-top: 2.5em;
}

.doujin-article .cap_box_ttl span {
  font-size: 0.95rem;
}

.doujin-article .cap_box_content p {
  font-size: 0.9rem;
  color: var(--doujin-text-sub);
}

/* H2：背景を薄くして文字を大きく・余白多めに */
.doujin-article h2.wp-block-heading {
  position: relative;
  margin: 2.5em 0 1.2em;
  padding: 0.6em 0.9em 0.6em 1.1em;
  border-left: 4px solid var(--doujin-accent);
  border-radius: 4px;
  background: linear-gradient(to right, #fff9fb, #ffffff); /* ほぼ白に近い淡いグラデ */
  font-size: 1.1rem;
  font-weight: 700;
  color: #222222; /* コントラストをはっきり */
}

/* PC幅ではもう少しだけ大きく */
@media (min-width: 768px) {
  .doujin-article h2.wp-block-heading {
    font-size: 1.25rem;
  }
}

/* H3：少しだけ強調して、H2との階層をわかりやすく */
.doujin-article h3.wp-block-heading {
  margin: 1.8em 0 0.8em;
  font-size: 1.02rem;
  font-weight: 600;
  border-bottom: 1px solid var(--doujin-border-soft);
  padding-bottom: .3em;
  color: #333333;
}

/************************************************
 * 同人作品情報テーブル（[detail-table]）調整
 ************************************************/

.doujin-detail-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

/* セル共通：行を詰めて、上寄せに */
.doujin-detail-table th,
.doujin-detail-table td {
  padding: 0.5em 0.7em;
  border-bottom: 1px solid #eee;
  vertical-align: top;
}

/* 1列目（ラベル） */
.doujin-detail-table th {
  width: 5.5em;              /* ラベル列の幅を固定気味に */
  white-space: nowrap;       /* できるだけ折り返さない */
  font-weight: 600;
  color: #666;
  text-align: left;
}

/* 2列目（値） */
.doujin-detail-table td {
  color: #222;
}

/* スマホ向け調整 */
@media (max-width: 480px) {

  .doujin-detail-table table {
    font-size: 0.85rem;
  }

  .doujin-detail-table th,
  .doujin-detail-table td {
    padding: 0.45em 0.6em;
  }

  .doujin-detail-table th {
    width: 4.5em;           /* もう少しだけタイトに */
  }
}

/* スマホでは1列目ラベルを強制的に横書きにする */
@media (max-width: 768px) {
  .doujin-detail-table th {
    writing-mode: horizontal-tb !important;  /* 縦書き指定を上書き */
    -ms-writing-mode: lr-tb !important;      /* 古いIE系の保険 */
    text-orientation: mixed !important;
    white-space: nowrap;                     /* できるだけ1行で */
    line-height: 1.6;                        /* 文字間も普通に */
  }
}

/************************************************
 * 同人作品情報テーブル [detail-table2] 用
 ************************************************/

.doujin-detail-table {
  margin: 1.5em 0;
}

/* 共通テーブルスタイル */
.doujin-detail-table__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.doujin-detail-table__table th,
.doujin-detail-table__table td {
  padding: 0.5em 0.75em;
  border-bottom: 1px solid #eeeeee;
  vertical-align: top;
}

/* 1列目（ラベル） */
.doujin-detail-table__table th {
  font-weight: 600;
  color: #666666;
  text-align: left;
  writing-mode: horizontal-tb;  /* 念のため縦書きを打ち消す */
  text-orientation: mixed;
  white-space: nowrap;          /* できるだけ1行で表示 */
}

/* 2列目（値） */
.doujin-detail-table__table td {
  color: #222222;
}

/* スマホ時の幅比率 3:7 */
@media (max-width: 768px) {
  .doujin-detail-table__table {
    font-size: 0.85rem;
  }
  .doujin-detail-table__table th {
    width: 30%;
    padding-right: 0.4em;
  }
  .doujin-detail-table__table td {
    width: 70%;
  }
}

/* PCでは少しゆったりめに */
@media (min-width: 769px) {
  .doujin-detail-table__table th {
    width: 25%;
  }
  .doujin-detail-table__table td {
    width: 75%;
  }
}