@charset "UTF-8";
/*
Theme Name:   THE SONIC Child
Theme URI:    https://the-sonic.jp
Description:  THE SONICカスタマイズ用子テーマ
Author:       SONIC Team
Author URI:   https://the-sonic.jp
Template:     thesonic
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/*
* ここから下に記述
*/
:root {
  --accent-color: #b79200;
  --body-bg-color: #f0f2f5;
  --content-bg-color: #FFFFFF;
  --content-text-color: #333333;
  --header-bg-color: #f8f8f8;
  --border-color: #dee2e6;
}

/* フォント変更 */
body {
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Noto Sans JP",
    Meiryo,
    sans-serif;
	font-size: 17px;
	line-height: 2;
	font-display: swap;
}
p {
	margin-bottom: 1.5em;
}

/* サイドバータイトルの妙なpadding削除 */
.side-title-mark4 .widget-title {
	margin-bottom: 0;
	padding: 0;
}

.lead {
	margin-top: 1.5em;
}

.ruled-line p {
  background-color: #fff; /* 背景色 */
  background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%), /* 点線1の色 */
                    linear-gradient(180deg, #ccc 1px, transparent 1px); /* 点線2の色と太さ */
  background-size: 8px 100%, /* 点線1のサイズ */
                   100% 2.6em; /* 点線2のサイズ */
  line-height: 2.6em; /* 文字の高さ */
  padding-bottom: 1px; /* 最終行の下にも罫線を引く */
  margin-bottom: 2.6em;
}

.entry-letterbody h2 {
	margin: 1.5em 0 1em;	
}

#storymatome .story-h3 {
	padding-bottom: 0;
	line-height: 2.2em;
}

.story-h3:first-letter {
	color: #b79200;
	font-size: 1.4em;
}

        /* --- BEM記法による汎用データリスト --- */
        /* Block: data-list */
        .data-list {
            margin: 0;
        }

        /* Element: data-list__item */
        .data-list__item {
            border-bottom: 1px solid #e0e0e0;
        }

        .data-list__item:last-child {
            border-bottom: 0;
        }

        /* Element: data-list__term */
        .data-list__term {
            background-color: #F5F5F5;
            padding: .6em 1em .4em 1em;
            /* 上の余白を広く、下の余白を狭く */
            font-weight: bold;
            font-size: 0.9em;
            /* フォントサイズを少し小さくして階層を調整 */
            border-bottom: 1px solid #e0e0e0;
        }

        /* Element: data-list__description */
        .data-list__description {
            margin: 0;
            background-color: #FFFFFF;
            padding: 0.5em 1em 1em 1em;
            /* 上の余白を狭く、下の余白を広く */
        }

        /* --- レスポンシブ設定 (768px以上の画面) --- */
        @media (min-width: 768px) {

            .section-title {
                margin-top: 4em;
                margin-bottom: 1.5em;
            }

            .data-list__item {
                display: grid;
                grid-template-columns: 12em 1fr;
                /* 少し幅を広げて調整 */
            }

            .data-list__term {
                padding: 1em;
                /* PC表示ではパディングを均等に戻す */
                font-size: 1em;
                /* PC表示ではフォントサイズを元に戻す */
                border-bottom: 0;
                border-right: 1px solid #e0e0e0;
            }

            .data-list__description {
                padding: 1em;
                /* PC表示ではパディングを均等に戻す */
            }
        }

.scenario-description {
	margin:-1px 0 0 0;
	font-size:0.9em;
	color:#444;
	background-color:#ccc;
	padding: 0.5em;
	font-weight:bold;
	line-height: 1.5;
	display: block;
}
.embed-wrapper {
		margin-bottom: 2.5em;
}
.embed-wrapper::before {
	content: '▼クリックすると該当シーンから再生されます▼';
	text-align: center;
	display: block;
	line-height: 1.5;
}

/* YouTubeコンテナのスタイル（変更なし） */
.youtube-container {
      position: relative;
      padding-bottom: 56.25%;
      /* 16:9 アスペクト比 */
      height: 0;
      overflow: hidden;
      max-width: 100%;
      /* rounded-xl */
      background: #000;
      /* サムネイル読み込み中の背景 */
}

    /* ファサードとiframeをコンテナいっぱいに広げる */
    .youtube-container .youtube-facade,
    .youtube-container .youtube-iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
/* ファサードコンテナの基本スタイル */
    .youtube-facade {
      cursor: pointer;
      overflow: hidden;
    }

    /* サムネイル画像のスタイル */
    .youtube-facade img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    /* ホバー時に画像を少しズーム */
    .youtube-facade:hover img {
      transform: scale(1.05);
    }

    /* 再生ボタンのスタイル */
    .youtube-facade .play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 68px;
      height: 48px;
      background-color: rgba(30, 30, 30, 0.8);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s ease;
    }

    .youtube-facade:hover .play-icon {
      background-color: #ff0000;
    }

    .youtube-facade .play-icon svg {
      width: 30px;
      height: 30px;
      fill: #ffffff;
    }

.scenario-body p {
	margin-bottom: 2.5em;
}

/* 見どころトップ3 */
       /* --- タブコンポーネント (Block) --- */
        .tab {
            background-color: #FFFFFF;
            color: #1e1e1e;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            margin-top: 2em;
        }

        /* タブボタンのコンテナ (Element) */
        .tab__buttons {
            display: flex;
            background-color: #f8f8f8;
            border-bottom: 1px solid #e0e0e0;
        }

        /* 個々のタブボタン (Element) */
        .tab__button {
            flex: 1;
            text-align: center;
            padding: 14px 20px;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
            color: #666;
            font-weight: 500;
            border: none;
            background-color: transparent;
            font-size: 1em;
            border-bottom: 3px solid transparent;
        }

        .tab__button:hover {
            background-color: #efefef;
            color: #1e1e1e;
        }

        /* アクティブなタブボタンのスタイル (Modifier) */
        .tab__button--active {
            color: #1e1e1e;
            font-weight: 600;
            border-bottom: 3px solid #ffd700;
        }

        /* タブコンテンツのコンテナ (Element) */
        .tab__contents {
            /* このクラス自体に特別なスタイルは不要 */
        }

        /* 個々のタブコンテンツ (Element) */
        .tab__content {
            display: none;
            padding: 25px 30px;
            /* アニメーション名を変更 */
            animation: fadeInUp 0.5s ease-out;
        }

        /* アクティブなタブコンテンツを表示 (Modifier) */
        .tab__content--active {
            display: block;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(15px); /* 開始位置を少し下にする */
            }
            to {
                opacity: 1;
                transform: translateY(0); /* 本来の位置に戻す */
            }
        }

        .tab__content h3 {
            margin-top: 0;
            font-size: 1.3em;
            color: #1e1e1e;
			line-height: 1.4;
        }

        .tab__content p {
            line-height: 1.8;
			margin: 0;
        }

        .tab__content ul {
            list-style-type: none;
            padding-left: 0;
        }

        .tab__content ul li {
            background-color: #f5f5f5;
            padding: 10px 15px;
            border-radius: 4px;
            margin-bottom: 8px;
			line-height: 1.8;
        }

/* --- 関連コンテンツ推奨セクション --- */
    /* ルート要素なので、このセレクタは変更なし */
    .related-works {
      --accent-color: #b79200;
      --body-bg-color: #f0f2f5;
      --content-bg-color: #FFFFFF;
      --content-text-color: #333333;
      --header-bg-color: #f8f8f8;
      --border-color: #dee2e6;

      background-color: var(--content-bg-color);
      color: var(--content-text-color);
      border-radius: 12px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      margin-top: 2em;
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
    }

    /* --- タブナビゲーション --- */
    .related-works .related-works__nav {
      display: flex;
      background-color: var(--header-bg-color);
      padding: 8px;
    }
    
    .related-works .related-works__tab {
      flex: 1;
      text-align: center;
      padding: 12px 20px;
      cursor: pointer;
      transition: all 0.3s ease;
      color: #666;
      font-weight: 500;
      border-radius: 8px;
      margin: 0 4px;
      font-size: 1em;
      line-height: inherit;
      border: none;
      background: none;
      font-family: inherit;
    }

    .related-works .related-works__tab[aria-selected="true"] {
      color: #FFFFFF;
      font-weight: 700;
      background-color: var(--accent-color);
    }

    .related-works .related-works__tab:not([aria-selected="true"]):hover {
      background-color: #e9ecef;
      color: #333;
    }

    /* --- タブパネル --- */
    .related-works .related-works__panels {
      padding: 30px;
      position: relative;
      min-height: 400px;
    }

    .related-works .related-works__panel {
      display: none;
    }

    .related-works .related-works__panel.is-active {
      display: block;
      animation: slideUpFadeIn 0.4s ease-out forwards;
    }

    @keyframes slideUpFadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    /* --- 作品ごとのアイテム --- */
    .related-works .related-works__item:not(:last-of-type) {
      border-bottom: 1px solid var(--border-color);
      margin-bottom: 30px;
      padding-bottom: 30px;
    }

    .related-works .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }

    .related-works .related-works__item-title {
      margin-top: 0;
      font-size: 1.6em;
      color: var(--content-text-color);
      border-left: 5px solid var(--accent-color);
      padding-left: 15px;
      margin-bottom: 25px;
    }

    .related-works .related-works__item-content {
      /* このクラスは構造のために使用 */
    }

    .related-works .related-works__chart-wrapper {
      max-width: 400px;
	  max-height: 280px;
      margin: 0 auto 30px;
    }

    .related-works .related-works__chart-wrapper canvas {
      max-width: 100%;
      height: auto;
    }

    .related-works .related-works__details-list {
      display: grid;
      grid-template-columns: max-content 1fr;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      margin: 0;
      overflow: hidden;
    }

    .related-works .related-works__details-term,
    .related-works .related-works__details-description {
      margin: 0;
      padding: 14px 18px;
      border-bottom: 1px solid var(--border-color);
    }

    .related-works .related-works__details-term {
      font-weight: bold;
      color: var(--content-text-color);
      background-color: #f8f9fa;
      border-right: 1px solid var(--border-color);
      white-space: nowrap;
    }

    .related-works .related-works__details-description {
      font-size: 0.95em;
      color: #555555;
    }

    .related-works .related-works__details-term:last-of-type,
    .related-works .related-works__details-description:last-of-type {
      border-bottom: none;
    }

    @media (max-width: 767px) {
      .related-works .related-works__panels {
        padding: 20px;
      }
      .related-works .related-works__panel {
        min-height: 300px;
      }
      .related-works .related-works__details-list {
        display: block;
      }
      .related-works .related-works__details-term {
        border-right: none;
      }
    }