@charset "utf-8";

/* ========================================
CONTENTS
1. Base
2. Person Panel
3. History Anecdote
4. Main Visual
5. Header / Global Nav
6. Section Title & Backgrounds
7. Tag Filter
8. Spot Cards & Modal
9. Drama Summary / Next On Air
10. SNS Banners
11. Ambassador / Person Diagram
12. Tour / Souvenir / Campaign (Coming Soon)
13. Event
14. Brochure
15. Nara News (Tokushu / Logo)
16. Links
17. Footer
18. Q&A
19. Taiga Dorama
20. Campaign Common Tuning
======================================== */

html {
box-sizing: border-box;
}

*,
*::before,
*::after {
box-sizing: inherit;
}

/* ========================================
Base
======================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
"Yu Gothic", "Meiryo", sans-serif;
overflow-x: hidden;
}


/* ========================================
人物パネル
======================================== */
.person-panel-list {
margin-top: 40px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}

@media (max-width: 1024px) {
.person-panel-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.person-panel-list {
grid-template-columns: repeat(2, 1fr);
}
}

.person-panel {
background-color: #ffffff;
border: 1px solid #D3A243;
border-radius: 10px;
padding: 16px;
position: relative;
}

/* 秀長・秀吉のみ背景色変更 */
.person-panel--yukari {
background-color: #FFFBC7;
}

.person-panel-img-block {
position: relative;
}

.person-panel-img {
width: 100%;
height: auto;
display: block;
border-radius: 6px;
}

/* ゆかりアイコン：クラス付与されたパネルのみ表示 */
.person-panel--has-yukari-icon .person-panel-img-block::after {
content: "";
position: absolute;
right: -8px;
top: -8px;
width: 56px;
height: 56px;
background-image: url("../img/p_yukari-icon.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
pointer-events: none;
}

.person-panel-body {
margin-top: 12px;
}

.person-panel-name {
font-size: clamp(21px, 2.6vw, 26px);
font-weight: 700;
text-align: center;
margin: 0 0 8px;
color: #9E3D3F;
}

.person-panel-sub-name{
font-size: clamp(14px, 1.8vw, 18px);
}

.person-panel-name rt {
font-size: clamp(12px, 1.4vw, 14px);
font-weight: 400;
color: #000;
margin-bottom: 4px;
}

.person-panel-sub-name rt{
font-size: clamp(10px, 1.2vw, 12px);
}

/* ▼ もっと見るボタン（＋アイコン付与） */
.person-panel-more-btn,
.history-anecdote-more-btn {
width: 100%;
margin-top: 8px;
padding: 10px;
border-radius: 20px;
background-color: #1D376E;
color: #ffffff;
border: none;
cursor: pointer;
font-size: clamp(14px, 2vw, 16px);
position: relative;
padding-right: 32px;
}
.person-panel-more-btn::after,
.history-anecdote-more-btn::after {
content: "+";
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%) rotate(0deg);
font-size: 20px;
line-height: 1;
transition: transform 0.3s ease;
}
.person-panel-more-btn[aria-expanded="true"]::after,
.history-anecdote-more-btn[aria-expanded="true"]::after {
transform: translateY(-50%) rotate(45deg);
}

/* ▼ アコーディオン本体 */
.person-panel-more-content {
max-height: 0;
overflow: hidden;
margin-top: 0;
transition: max-height 0.35s ease, margin-top 0.35s ease;
}
.person-panel-more-content.is-open {
max-height: 500px;
margin-top: 12px;
}

.person-panel-text {
font-size: 16px;
line-height: 1.8;
}

/* ========================================
歴史こぼれ話セクション
======================================== */
.history-anecdote-list {
margin-top: 56px;
max-width: 1040px;
margin-left: auto;
margin-right: auto;
}

.history-anecdote-card {
position: relative;
background-color: #FDFFEF;
border: 1px solid #8FC31F;
border-radius: 10px;
padding: 40px 32px 32px;
}

.history-anecdote-card--blue {
background-color: #F4FEFF;
border-color: #5DC2D0;
}

.history-anecdote-card--blue .history-anecdote-title {
color: #5DC2D0;
border-bottom-color: #5DC2D0;
}

.history-anecdote-flag {
position: absolute;
top: -40px;
left: -17px;
width: 234px;
height: 91px;
background-image: url("../img/flag_green.png");
background-repeat: no-repeat;
background-size: contain;
background-position: left center;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}

.history-anecdote-card--blue .history-anecdote-flag {
background-image: url("../img/flag_blue.png");
}

.history-anecdote-flag-text {
font-family: "Noto Serif JP", serif;
font-weight: 700;
font-size: 20px;
color: #ffffff;
letter-spacing: 0.08em;
transform: rotate(-5deg);
position: absolute;
top: 20px;
letter-spacing: -0.008em;
}

.history-anecdote-inner {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
grid-template-areas:
"title img"
"text  img";
gap: 8px 32px;
align-items: flex-start;
justify-content: center;
}

.history-anecdote-img-block {
grid-area: img;
}

.history-anecdote-img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
border-radius: 6px;
filter: drop-shadow(4px 4px 0px #8FC31F);
}

.history-photo-chaption{
display: block;
text-align: right;
margin-top: 4px;
}

/* こぼればなしキャラ配置 */
.history-anecdote-char05 {
position: absolute;
left: -100px;
bottom: -10px;
max-width:132px;
width: 100%;
pointer-events: none;
z-index: 2;
}

.history-anecdote-char-img {
width: 100%;
height: auto;
display: block;
}

.history-anecdote-card--blue .history-anecdote-img {
filter: drop-shadow(4px 4px 0px #5DC2D0);
}

.history-anecdote-title {
margin: 0 0 16px;
font-size: clamp(24px, 2.5vw, 26px);
line-height: 1.4;
color: #8FC31F;
border-bottom: 2px solid #8FC31F;
display: inline-block;
padding-bottom: 4px;
grid-area: title;
}

.history-anecdote-text {
font-size: 16px;
line-height: 1.9;
text-align: left;
grid-area: text;
}

/* ▼ 歴史こぼれ話：もっと見る（アコーディオン） */
.history-anecdote-more-btn {
width: 100%;
max-width: 335px;
margin: 24px auto 0;
display: block;
}

.history-anecdote-more-content {
max-height: 0;
overflow: hidden;
margin-top: 0;
transition: max-height 0.35s ease, margin-top 0.35s ease;
}

.history-anecdote-more-content.is-open {
max-height: 3000px;
margin-top: 24px;
}

@media (max-width: 765px) {
.history-anecdote-card {
padding: 32px 16px 24px;
}

.history-anecdote-flag {
left: -16px;
top: -40px;
}

.history-anecdote-inner {
grid-template-columns: 1fr;
grid-template-areas:
"title"
"img"
"text";
gap: 24px;
}
.history-anecdote-title {
grid-area: title;
text-align: center;
}
.history-anecdote-text {
grid-area: text;
}

.history-anecdote-char05{
max-width: 60px;
top: -60px;
right: 0;
left: auto;
bottom: auto;
width: 100%;
}

}
/* ========================================
メインビジュアル
======================================== */
.main-visual {
width: 100%;
height: 650px;
background-color: #ea5532;
background-image: url('../img/mb_bg.png');
background-repeat: no-repeat;
background-position: 0 0;
background-size: cover;
position: relative;
overflow: hidden;
}

/* 左右の装飾（mv_left / mv_right）を疑似要素で配置 */
.main-visual::before,
.main-visual::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 100%;
max-height: 650px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
z-index: 1;
}

.main-visual::before {
left: 0;
width: 441px;
background-image: url('../img/mv_left.png');
}

.main-visual::after {
right: 0;
width: 464px;
background-image: url('../img/mv_right.png');
}

/* タイトル＋左右写真の中央配置コンテナ */
.mv-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
max-width: 1246px;
width: 100%;
z-index: 2;
}

/* タイトル画像 */
.mv-title {
max-width: 100%;
width: 100%;
height: auto;
}
.mv-title-heading {
margin: 0;
}

@media (max-width: 765px) {
.main-visual {
/* PCで使っている背景画像は消す */
background-image: none;
height: auto;
}

.main-visual::before,
.main-visual::after {
display: none;
}

.mv-center {
position: static;
top: auto;
left: auto;
transform: none;
max-width: 100%;
width: 100%;
display: block;
margin: 0 auto;
}

.mv-title {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}

.mv-title-heading {
margin: 0;
}
}

/* ========================================
共通（ヘッダー・ナビ）
======================================== */
.site-header {
background-color: #8b3a3a;
color: #222;
position: sticky;
top: 0;
z-index: 1000;
}

.header-inner {
max-width: 1200px;
margin: 0 auto;
padding: 8px 16px;
display: flex;
justify-content: flex-end;
align-items: center;
}

/* ハンバーガーボタン */
.nav-toggle {
display: none;
width: 40px;
height: 32px;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
position: relative;
}

.nav-toggle span {
position: absolute;
left: 6px;
right: 6px;
height: 2px;
background: #fff;
border-radius: 999px;
transition: transform 0.2s ease, top 0.2s ease, opacity 0.2s ease;
}

.nav-toggle span:nth-child(1) {
top: 8px;
}
.nav-toggle span:nth-child(2) {
top: 15px;
}
.nav-toggle span:nth-child(3) {
top: 22px;
}

/* 開いたときのアニメーションはお好みで */
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
top: 15px;
transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
top: 15px;
transform: rotate(-45deg);
}

/* スクリーンリーダー用 */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}

/* ナビ本体 */
.global-nav {
background-color: #8b3a3a;
overflow-x: auto;
}

.nav-list {
margin: 0 auto;
padding: 8px 16px 16px;
list-style: none;
display: flex;
gap: 16px;
flex-wrap: nowrap;
width: max-content;
}

.nav-item {
flex: 0 0 auto;
}

.nav-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 12px;
background-color: #fff;
color: #222;
text-decoration: none;
font-size: 14px;
font-weight: 500;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
white-space: nowrap;
}

/* nav-link をセンター揃え専用に調整 */
.nav-link {
display: inline-flex;
align-items: center;
gap: 6px;
}

/* ▼の代わりにSVGアイコンを使う */
.nav-link::after {
content: "";
display: inline-block;
width: 10px;
height: 10px;
background-image: url("../img/anchor_arrow.svg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
transform: translateY(0);
transition: transform 0.15s ease;
}

.nav-link:hover::after {
transform: translateY(3px);
}

/* ホバー */
.nav-link:hover {
opacity: 0.9;
}

/* ===== スマホレイアウト ===== */
@media (max-width: 765px) {
.header-inner {
justify-content: flex-end;
}

.nav-toggle {
display: inline-flex;
}

.global-nav {
display: none;
}

.global-nav.is-open {
display: block;
}

.nav-list {
flex-direction: column;
gap: 8px;
padding: 8px 16px 16px;
width: 100%;
}

.nav-item {
width: 100%;
}

.nav-link {
justify-content: space-between;
width: 100%;
}
}
/* ========================================
セクションタイトルブロック
======================================== */
.section-title-block {
background-image: url("../img/section_bg_pattern.svg");
background-repeat: repeat;
background-size: auto;
padding: clamp(60px, 10vw, 120px) 20px clamp(80px, 12vw, 140px);
}

.section-nara-news {
padding: clamp(60px, 10vw, 120px) 20px clamp(32px, 6.4vw, 64px);
}

.section-title-inner{
max-width: 960px;
margin: 0 auto;
}

.section-title-img {
display: block;
margin: 0 auto;
max-width: 90%;
}

.section-bg--pink {
background-color: #FFEEE5;
}

.section-bg--green {
background-color: #ECFFF1;
}

.section-bg--news {
background-color: #EFF6FF;
}

.section-bg--news.section-title-block::after {
display: none !important;
}

/* ツアー情報用：薄いクリーム色 */
.section-bg--cream {
background-color: #FFFEEC;
}

.section-bg--grange {
background-color: #f7f1e6;
background-image: url("../img/grange_bg.png");
background-repeat: repeat;
background-size: auto;
}


.section-title-block {
position: relative;
}

.section-title-block::after {
content: "";
position: absolute;
bottom: clamp(-64px,-2.4vw,-24px);
left: 0;
width: 100%;
height: 145px;
background-image: url("../img/border-deco.png");
background-repeat: repeat-x;
background-position: center bottom;
background-size: contain;
pointer-events: none;
z-index: 100;
}

/* ===== セクション 英語サブタイトル ===== */


/* ==== Subtitle Box Design ==== */

.section-subtitle-box {
width: clamp(245px,40vw,400px);
margin: 0 auto;
padding: 12px 8px;
border: 3px solid #EA5532;
background-color: #ffffff;
position: relative;
}

@media (max-width: 765px) {
.section-subtitle-box {
margin-bottom: 8px;
}
}


.section-subtitle-box::before,
.section-subtitle-box::after {
content: "";
width: 0;
height: 0;
border-style: solid;
position: absolute;
}

.section-subtitle-box::before {
border-width: 28px 28px 0 0;
border-color: #EA5532 transparent transparent transparent;
top: -10px;
left: -10px;
}

.section-subtitle-box::after {
border-width: 0 0 28px 28px;
border-color: transparent transparent #EA5532 transparent;
bottom: -10px;
right: -10px;
}

.section-subtitle-en {
display: block;
font-weight: 700;
color: #EA5532;
font-size: clamp(16px, 2vw, 24px);
letter-spacing: 0.05em;
text-align: center;
}


.font-20{
font-size: clamp(18px,2vw,20px);
line-height: 1.75;
}

/* ========================================
タグフィルタ
======================================== */

.filter-container {
background-color: #ffffff;
border: 1px solid #AB951D;
border-radius: 10px;
padding: 32px 24px 80px;
margin-top: 32px;
margin-bottom: 32px;
position: relative;
overflow: visible;
}


.filter-tag-block {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 32px;
background: none;
border: none;
}

/* ▼ タグとパネルを分ける破線 */
.filter-divider {
border-bottom: 1px dashed #000;
margin: 24px 0;
}

.filter-group-title {
font-size: clamp(22px, 2.8vw, 28px);
font-family: "Noto Serif JP", serif;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
padding: clamp(8px, 1.5vw, 12px) clamp(24px, 4vw, 40px);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
min-height: clamp(40px, 6vw, 56px);
font-weight: 700;
border: none;
}

/* タイトル色 */
.filter-group-title--area {
color: #9E3D3F;
background-image: url("../img/tags_head_bg01.svg");
}
.filter-group-title--category {
color: #00A29A;
background-image: url("../img/tags_head_bg02.svg");
}
.filter-group-title--person {
color: #0099D9;
background-image: url("../img/tags_head_bg03.svg");
}

.tag-list {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
}

@media (max-width: 640px) {
.tag-list {
justify-content: center;
}
}

.tag-btn {
border-radius: 999px;
padding: 8px 14px;
font-size: clamp(14px,2vw,20px);
line-height: 1.4;
background-color: #fff;
border: 1px solid currentColor;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
width: clamp(130px,14.5vw,145px);
display: inline-flex;
justify-content: center;
text-align: center;
white-space: normal;
font-weight: 600;
}

/* ベース色 */
.tag-btn--area {
color: #9E3D3F;
}
.tag-btn--category {
color: #00A29A;
}
.tag-btn--person {
color: #0099D9;
}

/* アクティブ状態 */
.tag-btn.is-active.tag-btn--area {
background-color: #9E3D3F;
color: #fff;
}
.tag-btn.is-active.tag-btn--category {
background-color: #00A29A;
color: #fff;
}
.tag-btn.is-active.tag-btn--person {
background-color: #0099D9;
color: #fff;
}

.tag-btn:hover {
opacity: 0.85;
}

/* ========================================
スポットカード
======================================== */

.spot-wrap {
margin-top: 24px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}

.spot-card {
background-color: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
}

.spot-card-img img {
width: 100%;
display: block;
}

.spot-card-body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
}

.spot-card-labels {
display: flex;
flex-wrap: wrap;
gap: 6px;
}

.spot-label {
font-size: 12px;
padding: 2px 8px;
border-radius: 4px;
border: none;
}

/* 地域ラベル：背景をエリアカラー、文字を白 */
.spot-label--area {
background-color: #9E3D3F;
color: #ffffff;
}

/* カテゴリーラベル：背景をカテゴリカラー、文字を白 */
.spot-label--category {
background-color: #00A29A;
color: #ffffff;
}

/* 関連人物ラベル：あればこちらの色で反転 */
.spot-label--person {
background-color: #0099D9;
color: #ffffff;
}

.spot-card-title {
font-size: clamp(14px,2.2vw,22px);
padding-left: 10px;
border-left: 3px solid #000;
margin: 4px 0 0;
font-family: "Noto Serif JP", serif;
}

.spot-card-link {
margin-top: 8px;
align-self: stretch;
width: 100%;
box-sizing: border-box;
font-size: clamp(10px, 1.4vw, 16px);
text-decoration: none;
padding: 8px 16px;
border-radius: 999px;
border: 1px solid #1D376E;
color: #ffffff;
background-color: #1D376E;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* テキスト右のアイコン */
.spot-card-link::after {
content: "";
width: 14px;
height: 14px;
background-image: url("../img/modal-icon.svg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}

/* hover時はホバーバージョンのアイコンに差し替え */
.spot-card-link:hover::after {
background-image: url("../img/modal-icon-hover.svg");
}

/* hoverで反転（背景→白、文字＆枠→#1D376E） */
.spot-card-link:hover {
background-color: #ffffff;
color: #1D376E;
border-color: #1D376E;
}

/* ========================================
スポット詳細モーダル
======================================== */
body.modal-open {
overflow: hidden;
}

.spot-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}

.spot-modal.is-open {
display: flex;
}

.spot-modal-overlay {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.45);
}

.spot-modal-dialog {
position: relative;
z-index: 1;
background-color: #ffffff;
border-radius: 12px;
max-width: 600px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
overflow-x: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
padding: clamp(16px, 2vw, 20px);
}

.spot-modal-img img {
width: 100%;
display: block;
height: auto;
border-radius: 10px;
}

.spot-modal-content {
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 16px;
}

.spot-modal-labels {
display: flex;
flex-wrap: wrap;
gap: 6px;
}

.spot-modal-labels .spot-label {
font-size: clamp(12px, 1.4vw, 16px);
}

.spot-modal-title {
font-size: clamp(20px,2.8vw,28px);
margin: 0;
padding-left: 10px;
border-left: 3px solid #000;
font-family: "Noto Serif JP", serif;
}

.spot-modal-text {
font-size: clamp(14px, 1.8vw, 18px);
line-height: 1.7;
white-space: pre-line;
}

.spot-modal-detail {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #CB5237;
display: flex;
flex-direction: column;
gap: 8px;
}

.spot-modal-row {
display: flex;
align-items: center;
gap: 12px;
}

.spot-modal-head {
display: flex;
align-items: center;
justify-content: center;
padding: 6px 10px;
min-width: 88px;
border-radius: 4px;
background-color: #CB5237;
color: #ffffff;
font-weight: 700;
font-size: clamp(12px, 1.3vw, 14px);
flex-shrink: 0;
width: clamp(90px, 20vw, 130px);
align-self: stretch;
}

.spot-modal-body {
flex: 1;
font-size: clamp(11px, 1.3vw, 14px);
line-height: 1.7;
color: #333333;
font-weight: 500;
word-break: break-all;
overflow-wrap: break-word; 
}

.spot-modal-close {
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background-color: #ffffff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}

.spot-modal-close::before,
.spot-modal-close::after {
content: "";
position: absolute;
width: 16px;
height: 2px;
background-color: #333333;
border-radius: 1px;
}

.spot-modal-close::before {
transform: rotate(45deg);
}

.spot-modal-close::after {
transform: rotate(-45deg);
}

.spot-modal-close:hover {
background-color: #f5f5f5;
}

@media (max-width: 765px) {
.spot-modal-dialog {
max-width: 100%;
max-height: 100vh;
}

.spot-modal-title {
font-size: 20px;
}
}

/* SP レイアウト調整 */
@media (max-width: 1024px) {
.spot-wrap {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 765px) {
.filter-tag-block {
margin-top: 20px;
margin-bottom: 20px;
}

.spot-wrap {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
}


.drama-summary {
margin: 24px auto 40px;
padding: 40px 32px 56px;
background-color: #ffffff;
border: 1px solid #D3A243;
border-radius: 10px;
}

.drama-summary-box {
padding: 0 8px 32px;
}

.drama-summary-heading {
display: block;
margin: 0 auto 16px;
text-align: center;
padding: 10px 16px;
width: clamp(200px, 30vw, 300px);
font-size: clamp(20px, 3.2vw, 32px);
line-height: 1.2;
color: #ffffff;
background-color: #A2793C;
border-radius: 6px;
font-family: "Noto Serif JP", serif;
letter-spacing: 0.08em;
}


.drama-summary-text {
font-size: clamp(14px, 1.8vw, 18px);
line-height: 1.9;
}


.drama-summary-heading-h3 {
margin: 56px auto 0;
padding: 10px 16px;
width: 100%;
max-width: 640px;
text-align: center;
background-color: #CB5237;
border-radius: 4px;
border-left: 3px solid #CCB848;
border-right: 3px solid #CCB848;
color: #ffffff;
font-weight: 700;
font-size: clamp(24px, 3.2vw, 32px);
}

/* ========================================
SNS バナーリンク
======================================== */
.sns-banner-wrap {
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
}

.sns-banner {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
max-width: 520px;
padding: 14px 18px;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
font-size: clamp(16px, 1.8vw, 18px);
color: #ffffff;
transition: opacity 0.2s ease, transform 0.2s ease;
}

.sns-banner:hover {
opacity: 0.85;
transform: translateY(-2px);
}

.sns-banner-icon {
width: 28px;
height: 28px;
display: block;
}

.sns-banner-group {
width: 100%;
max-width: 520px;
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}

.sns-banner-note{
color: #CB5237;
font-size: clamp(18px, 2vw, 20px);
}

/* Colors */
.sns-banner--x {
background-color: #000000;
border: 1px solid #000000;
}

.sns-banner--instagram {
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
border: 1px solid #cc2366;
}

.sns-banner--youtube {
background-color: #fff;
color: #000;
border: 1px solid #ff0000;
}

/* ========================================
アンバサダーセクション
======================================== */
.ambassador-box {
margin: 40px auto 0;
padding: 24px 16px;
max-width: 960px;
background-color: #fff;
border: 1px solid #CB5237;
border-radius: 10px;
display: flex;
align-items: stretch;
gap: 40px;
}

/* ========================================
豊臣秀長 人物相関図一覧
======================================== */
.person-diagram-box {
margin: 0 auto;
padding: 40px 32px 40px;
max-width: 1040px;
background-color: #fff;
border: 1px solid #D3A243;
border-radius: 10px;
text-align: center;
}

/* ========================================
豊臣秀長 人物相関図一覧
======================================== */
.person-diagram-section {
margin-top: 56px;
position: relative;
}

.person-diagram-section .drama-summary-heading-h3 {
margin: 0 auto;
position: relative;
z-index: 2;
}

.person-diagram-section .person-diagram-box {
margin-top: -30px;
padding-top: 60px;
}

.person-diagram-link {
display: inline-block;
max-width: 100%;
}

.person-diagram-link {
transition: transform 0.25s ease, filter 0.25s ease;
}

.person-diagram-link:hover {
transform: translateY(-4px);
filter: drop-shadow(0 6px 8px rgba(0,0,0,0.15));
}

.person-diagram-img {
display: block;
width: 100%;
height: auto;
}

.person-diagram-note {
margin-top: 16px;
font-size: clamp(13px, 1.5vw, 15px);
line-height: 1.6;
display: inline-flex;
align-items: center;
gap: 8px;     
text-decoration: underline;
}

.person-diagram-note::after {
content: "";
width: 20px;
height: 20px;
background-image: url("../img/pdf-icon.svg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
flex-shrink: 0;
}

.ambassador-img-block {
flex: 0 0 40%;
align-self: stretch;
display: flex;
overflow: hidden;
}

.ambassador-img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}

.ambassador-text {
flex: 1;
font-size: clamp(14px, 1.6vw, 16px);
line-height: 1.9;
}

.ambassador-highlight{
color: #ab951d;
text-align: center;
font-size: clamp(18px, 2vw, 20px);
margin-bottom: 8px;
}

/* アンバサダー SNS */
.ambassador-sns {
margin-top: 16px;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}

.ambassador-sns-label {
font-weight: 700;
font-size: clamp(14px, 1.6vw, 16px);
}

.ambassador-sns-list {
list-style: none;
display: flex;
gap: 12px;
margin: 0;
padding: 0;
}

.ambassador-sns-link {
width: 44px;
height: 44px;
border-radius: 50%;
background-color: #000;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s ease, transform 0.2s ease;
}

.ambassador-sns-link img {
width: 20px;
height: 20px;
display: block;
}

.ambassador-sns-link:hover {
transform: translateY(-2px);
}

@media (max-width: 765px) {
.ambassador-img-block {
flex: 0 0 100%;
width: 100%;
}
}

@media (max-width: 765px) {
.ambassador-box {
flex-direction: column;
padding: 24px 16px;
gap: 24px;
}
}


@media (max-width: 765px) {
.drama-summary {
padding: 28px 16px 40px;
}
}

/* ========================================
ツアー情報・お土産・キャンペーン（COMING SOON）
======================================== */
.tour-comingsoon {
margin-top: clamp(32px, 4.8vw, 48px);
padding-bottom: clamp(32px, 4.8vw, 48px);
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
text-align: center;
}

.tour-comingsoon-text {
font-size: clamp(32px, 5vw, 60px);
font-weight: 700;
letter-spacing: 0.12em;
}

@media (max-width: 765px) {
.tour-comingsoon-text {
letter-spacing: 0.08em;
}
}


/* ========================================
お土産
======================================== */
.idea-contest-wrap {
margin-top: 32px;
padding: 32px 24px;
background-color: #ffffff;
border: 1px solid #C00000;
border-radius: 10px;
max-width: 960px;
}

.idea-contest-title {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin-bottom: 24px;
}

.idea-contest-title img {
max-width: 240px;
width: 100%;
height: auto;
}


.idea-contest-title h3 {
  position: relative;
  margin: 0;
  padding: 14px 36px;
  font-size: clamp(22px, 3vw, 28px);
  font-family: "Noto Serif JP", serif;
  color: #ffffff;
  background-color: #C00000;
  border-radius: 10px;
  border: 2px solid #ffffff; /* 札っぽい白フチ */
  text-align: center;
}

/* 四隅の白い●（CSSのみで4つ配置） */
.idea-contest-title h3::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle, #ffffff 0 2.5px, transparent 3px) 10px 10px / 12px 12px no-repeat,
    radial-gradient(circle, #ffffff 0 2.5px, transparent 3px) calc(100% - 10px) 10px / 12px 12px no-repeat,
    radial-gradient(circle, #ffffff 0 2.5px, transparent 3px) 10px calc(100% - 10px) / 12px 12px no-repeat,
    radial-gradient(circle, #ffffff 0 2.5px, transparent 3px) calc(100% - 10px) calc(100% - 10px) / 12px 12px no-repeat;
}

/* フチ内側にもう1本線を入れて、サンプルの“札感”を少し寄せる */
.idea-contest-title h3::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 6px;
  pointer-events: none;
}

.idea-contest-links {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 4vw, 40px);
    flex-wrap: wrap;
  }
  
  .idea-contest-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 335px;
    width: 100%;
    gap: 8px;
    padding: 14px 40px;
    border-radius: 40px;
    font-size: clamp(16px, 2.2vw, 18px);
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.08em;
    border: 1px solid #FFC000;
    background-color: #FFC000;
    border: solid #000 2px;
    color: #000000; /* テキストは常に黒 */
    transition: background-color 0.2s ease;
  }
  
  .idea-contest-link::after {
    content: "";
    width: 20px;
    height: 20px;
    background-image: url("../img/pdf-icon.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  
  /* hover：背景色だけ反転（文字色は黒のまま） */
  .idea-contest-link:hover {
    background-color: #ffffff;
  }


/* ========================================
イベント情報
======================================== */
.section-bg--event {
position: relative;
background-color: #ffffff;
background-image: none;
}

.section-bg--event::before {
content: "";
position: absolute;
inset: 0;
background-image: url("../img/event_bg.png");
background-repeat: repeat;
background-size: auto;
z-index: 0;
}

.section-bg--event > .section-title-inner {
position: relative;
z-index: 1;
}

.event-content {
margin-top: clamp(16px, 3.2vw, 32px);
position: relative;
max-width: 1040px;
margin-left: auto;
margin-right: auto;
}


/* 中央の白い情報カード */
.event-info {
position: relative;
background-color: rgba(255, 255, 255, 0.9);
max-width: 920px;
flex: 1 1 auto;
padding-bottom: 24px;
overflow: visible;
border: 1px solid #E5E0D2;
border-radius: 12px;
}

/* ▼ event-info が複数並ぶ場合の下マージン調整用 */
.event-info--spacer {
margin-bottom: clamp(24px,4vw,40px);
}

/* 見出し：大河ドラマ『豊臣兄弟！』〜 */
.event-heading {
margin: 0 0 8px;
padding: 16px 20px;
background-color: #E5E0D2;
border-radius: 12px 12px 0 0;
font-size: clamp(20px, 2.4vw, 24px);
font-weight: 700;
text-align: center;
}

/* 明細：flexで1行ずつレイアウト */
.event-detail-list {
display: flex;
flex-direction: column;
gap: 8px;
border-radius: 0 0 12px 12px;
padding: 24px 32px 0;
}

@media (max-width: 765px) {
.event-detail-list {
padding-left: 0;
padding-right: 0;
}
}

.event-detail-row {
display: flex;
flex-wrap: nowrap;
}

.event-detail-term {
flex: 0 0 160px;
padding: 12px;
font-weight: 700;
text-align: center;
font-size: 14px;
}

/* 奇数行（エリア・場所・主催など） */
.event-detail-row:nth-child(odd) .event-detail-term {
background-color: #EAE8E8;
}

/* 偶数行（日時・主な出演者など） */
.event-detail-row:nth-child(even) .event-detail-term {
background-color: #D7D4D4;
}

.event-detail-desc {
flex: 1 1 auto;
padding: 12px 16px;
background-color: #ffffff;
font-size: 14px;
line-height: 1.8;
text-align: left;
}

/* イベント情報：左右カラムを天地中央に（大河ドラマ館と同じ考え方） */
.event-detail-row {
align-items: stretch;
}

.event-detail-term {
display: flex;
align-items: center;
justify-content: center;
}

.event-detail-desc {
display: flex;
flex-direction: column;
justify-content: center;
}

/* 「詳細はこちら」ボタン */
.event-detail-link-wrap {
text-align: center;
}

.event-detail-link {
display: inline-flex;
max-width: 335px;
width: 100%;
margin-top: 24px;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 32px;
border-radius: 40px;
border: 1px solid #9E3D3F;
background-color: #9E3D3F;
color: #ffffff;
font-size: clamp(16px, 2.2vw, 18px);
font-weight: 700;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.event-detail-link::after {
content: "";
width: 20px;
height: 20px;
background-image: url("../img/link-icon.svg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}

/* hoverで反転＋アイコン差し替え */
.event-detail-link:hover {
background-color: #ffffff;
color: #9E3D3F;
border-color: #9E3D3F;
}

.event-detail-link:hover::after {
background-image: url("../img/link-icon-hover.svg");
}

/* PDFリンク専用アイコン */
.event-detail-link--pdf::after {
background-image: url("../img/pdf-icon-white.svg");
}

/* hover時（背景が白になるので茶色アイコン） */
.event-detail-link--pdf:hover::after {
background-image: url("../img/pdf-icon-brown.svg");
}

/* レスポンシブ調整 */
@media (max-width: 960px) {
.event-info {
width: 100%;
}

.event-detail-row {
flex-direction: column;
}

.event-detail-term {
flex: 0 0 auto;
text-align: left;
}

/* 縦積み時は自然な上寄せに戻す */
.event-detail-term {
justify-content: flex-start;
}

.event-detail-desc {
justify-content: flex-start;
}
}

/* ====== SP用 イベント装飾キャラ非表示 ====== */
@media (max-width: 765px) {
.event-info::before,
.event-info::after {
display: none !important;
}
}

/* ========================================
パンフレット
======================================== */
.brochure-lead {
margin-top: 24px;
}

.brochure-content {
margin-top: 32px;
text-align: center;
}

.brochure-img-link {
display: inline-block;
max-width: 360px;
width: 100%;
transition: transform 0.25s ease, filter 0.25s ease;
}

.brochure-img-link:hover {
transform: translateY(-4px);
filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.15));
}

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

.brochure-note {
margin-top: 12px;
font-size: clamp(13px, 1.5vw, 15px);
line-height: 1.6;
}

/* 下にPDFアイコンを付ける（相関図と同じアイコン） */
/* アイコン側だけブロックにする */
.brochure-note::after {
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-left: 4px;
background-image: url("../img/pdf-icon.svg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
vertical-align: middle;
}

/* ========================================
県民だより特集（Nara news）
======================================== */
.tokushu-main {
margin-top: clamp(24px, 3.2vw, 32px);
margin-bottom: clamp(24px, 3.2vw, 32px);
display: flex;
align-items: center;
justify-content: center;
gap: clamp(24px, 4vw, 40px);
flex-wrap: wrap;
}

/* 左右のカラム（特集／ロゴ）はPCで 335px ぴったりに固定 */
.tokushu-main .tokushu-content,
.tokushu-main .logo-content {
text-align: center;
flex: 0 0 335px;
width: 335px;
max-width: 335px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}

.tokushu-lead,
.logo-lead {
font-size: clamp(18px, 2.2vw, 20px);
}

/* ボタンの共通スタイル（幅・padding・フォントなど） */
.tokushu-main .tokushu-link,
.tokushu-main .logo-detail-link {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 335px;
width: 100%;
gap: 8px;
padding: 14px 40px;
border-radius: 40px;
font-size: clamp(18px, 2.4vw, 20px);
font-weight: 700;
text-decoration: none;
letter-spacing: 0.08em;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* 特集ボタン：色だけ別 */
.tokushu-main .tokushu-link {
border: 1px solid #9E3D3F;
background-color: #9E3D3F;
color: #ffffff;
}

/* ロゴボタン：色だけ別 */
.tokushu-main .logo-detail-link {
border: 1px solid #C00000;
background-color: #C00000;
color: #ffffff;
}

/* アイコン（通常時は同じ link-icon） */
.tokushu-main .tokushu-link::after,
.tokushu-main .logo-detail-link::after {
content: "";
width: 20px;
height: 20px;
background-image: url("../img/link-icon.svg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}

/* hover時の色とアイコンのみ個別指定 */
.tokushu-main .tokushu-link:hover {
background-color: #ffffff;
color: #9E3D3F;
border-color: #9E3D3F;
}

.tokushu-main .tokushu-link:hover::after {
background-image: url("../img/link-icon-hover.svg");
}

.tokushu-main .logo-detail-link:hover {
background-color: #ffffff;
color: #C00000;
border-color: #C00000;
}

.tokushu-main .logo-detail-link:hover::after {
background-image: url("../img/logo-link-icon-hover.svg");
}

/* ロゴリンクのラッパーは中央寄せだけ */
.logo-link-wrap {
display: flex;
justify-content: center;
width: 100%;
}

/* ▼ 県民だより特集：SPレイアウト（1ヶ所に統一） */
@media (max-width: 765px) {
.tokushu-main {
flex-direction: column;
align-items: center;
gap: 24px;
}

/* SP: カラム幅を100%にして縦並び */
.tokushu-main .tokushu-content,
.tokushu-main .logo-content {
flex: 1 1 auto;
width: 100%;
max-width: 100%;
}

/* SP: ボタン幅（特集／ロゴ）を統一 */
.tokushu-main .tokushu-link,
.tokushu-main .logo-detail-link {
max-width: 335px;
width: 100%;
}
}

/* ========================================
リンク集
======================================== */
.links-section {
background-image: url("../img/footer_link_bg.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: clamp(24px, 4vw, 40px) 20px;
}

.links-inner {
max-width: 800px;
margin: 0 auto;
text-align: center;
color: #ffffff;
}

.links-title {
font-family: "Noto Serif JP", serif;
font-size: clamp(26px, 3.2vw, 32px);
font-weight: 700;
margin-bottom: clamp(32px, 5vw, 40px);
}

.links-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(16px, 3vw, 24px);
justify-items: center;
}

.links-item {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 380px;
width: 100%;
background-color: rgba(255, 255, 255, 0.92);
color: #333333;
text-decoration: none;
font-size: clamp(16px, 2.2vw, 20px);
font-weight: 700;
border-radius: 4px;
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
padding: 0;
}

.links-item img {
display: block;
width: 100%;
height: auto;
border-radius: 4px;
}

.links-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
background-color: #ffffff;
}

@media (max-width: 765px) {
.links-grid {
grid-template-columns: 1fr;
}
}

/* ========================================
フッター
======================================== */
.site-footer {
background-color: #7B3551;
color: #ffffff;
padding: clamp(24px, 4vw, 40px) 20px;
}

.footer-inner {
max-width: 1040px;
margin: 0 auto;
text-align: center;
}

.footer-title {
font-family: "Noto Serif JP", serif;
font-size: clamp(20px, 2.4vw, 24px);
margin-bottom: clamp(16px, 2.4vw, 24px);
}

.footer-contact {
font-family: "Noto Serif JP", serif;
}

.footer-contact-line {
font-size: clamp(16px, 2vw, 20px);
line-height: 1.8;
}

/* 共通の注意書き用テキスト */
.note-small {
font-size: clamp(11px, 1.3vw, 13px);
line-height: 1.6;
color: #444;
}

.note-small-space--top{
margin-top: 16px;
}

.note-small-space--bottom{
margin-bottom: 8px;
}

/* ========================================
Q&A セクション
======================================== */
.qa-wrap {
background-color: #f7f5ea;
border-radius: 14px;
padding: 40px 32px;
position: relative;
}

/* Q&A 装飾（右上・左下） */
.qa-wrap::before,
.qa-wrap::after {
content: "";
position: absolute;
width: 196px;
height: 84px;
background-image: url("../img/qa_deco.png");
background-repeat: no-repeat;
background-size: contain;
pointer-events: none;
}

.qa-wrap::before {
top: 36px;
right: -104px;
}

.qa-wrap::after {
bottom: 16px;
left: -174px;
}

.qa-title {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
justify-content: center;
margin-bottom: 32px;
}


.qa-subtitle {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 16px;
border-radius: 999px;
background-color: #f7bb9e;
font-size: clamp(14px, 1.6vw, 16px);
font-weight: 700;
color: #333;
}

.qa-heading {
font-size: clamp(28px, 3vw, 36px);
font-weight: 500;
color: #333;
}

.qa-content {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
position: relative;
}

.qa-content::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1px;
background-color: #000;
transform: translateX(-0.5px);
}

.qa-item-inner {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 12px;
}

.qa-icon {
width: 42px;
height: 42px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 20px;
color: #333;
}

.qa-icon--q {
background-color: #d5c78c;
}

.qa-icon--a {
background-color: #f7bb9e;
}

.qa-question {
font-size: clamp(16px, 2vw, 20px);
font-weight: 700;
margin: 0;
color: #333;
}

.qa-answer {
font-size: clamp(14px, 1.6vw, 16px);
line-height: 1.8;
color: #333;
}

@media (max-width: 765px) {
.qa-content {
grid-template-columns: 1fr;
gap: 24px;
}

.qa-content::before {
content: none;
}
.qa-item:first-child {
padding-bottom: 24px;
border-bottom: 1px solid #000;
}
.qa-wrap::before,
.qa-wrap::after {
display: none;
}
}

/* ========================================
大河ドラマ館（案内ボックス）
======================================== */
.taiga-dorama-wrap {
margin-top: 24px;
background-color: #ffffff;
border: 1px dashed #222;
border-radius: 16px;
padding: 20px;
}

.taiga-dorama-header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
}

.taiga-dorama-heading {
margin: 0;
padding: 0;
color: #ab951d;
border-radius: 0;
font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
font-weight: 800;
font-size: clamp(18px, 2.4vw, 26px);
line-height: 1.35;
text-align: center;
}

.taiga-dorama-period {
display: inline-flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
background-color: transparent;
color: #000;
border-radius: 0;
padding: 0;
text-align: left;
min-width: 0;
}

.taiga-dorama-period-label {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 12px;
border-radius: 999px;
background-color: #ab951d;
color: #fff;
font-weight: 500;
font-size: 12px;
line-height: 1;
margin: 0;
}

.taiga-dorama-period-date {
display: inline-block;
font-weight: 900;
font-size: 14px;
line-height: 1.35;
color: #ab951d;
}

.taiga-dorama-body {
margin-top: 14px;
display: flex;
flex-direction: column;
gap: 16px;
}

.taiga-dorama-detail-list {
display: flex;
flex-direction: column;
gap: 8px;
}

.taiga-dorama-detail-row {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
border-radius: 10px;
overflow: hidden;
background-color: #fff;
border: 1px solid #e5e0d2;
}

.taiga-dorama-detail-term {
flex: 0 0 140px;
padding: 12px;
font-weight: 800;
text-align: center;
font-size: 14px;
background-color: #f1ede2;
display: flex;
align-items: center;
justify-content: center;
}

.taiga-dorama-detail-row:nth-child(even) .taiga-dorama-detail-term {
background-color: #e6e1d6;
}

.taiga-dorama-detail-desc {
flex: 1 1 auto;
padding: 12px 16px;
background-color: #ffffff;
font-size: 14px;
line-height: 1.8;
text-align: left;
display: flex;
flex-direction: column;
justify-content: center;
}

.taiga-dorama-detail-desc small {
display: inline-block;
margin-top: 4px;
font-size: 12px;
font-weight: 500;
color: #333;
}

.taiga-dorama-organizer {
text-align: right;
font-size: 12px;
}

.taiga-dorama-link-wrap {
display: flex;
justify-content: center;
}

.taiga-dorama-link {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 600px;
width: 100%;
gap: 8px;
padding: 14px 40px;
border-radius: 40px;
font-size: clamp(16px, 2vw, 20px);
font-weight: 700;
text-decoration: none;
letter-spacing: 0.08em;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;

border: 1px solid #9E3D3F;
background-color: #9E3D3F;
color: #ffffff;
}

.taiga-dorama-link::after {
content: "";
width: 20px;
height: 20px;
background-image: url("../img/link-icon.svg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}

.taiga-dorama-link:hover {
background-color: #ffffff;
color: #9E3D3F;
border-color: #9E3D3F;
}

.taiga-dorama-link:hover::after {
background-image: url("../img/link-icon-hover.svg");
}

@media (max-width: 765px) {
.taiga-dorama-header {
flex-direction: column;
}

.taiga-dorama-body {
grid-template-columns: 1fr;
}

.taiga-dorama-period {
flex-direction: column;
align-items: center;
gap: 6px;
}

.taiga-dorama-detail-row {
flex-direction: column;
}

.taiga-dorama-detail-term {
flex: 0 0 auto;
text-align: left;
}
}