@charset "utf-8";
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

/*▼レスポンシブ対応 画面幅768px以上（PC、タブレット）*/
@media screen and (min-width: 768px) {
	#wrapper {
		width: 768px;
		margin: auto;
	}
}

#wrapper {
	background-color: #F8F0D7;
	background-image: url(../images/bg.png);
	background-repeat: repeat;
	background-size: 300px;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display:block;
}

ul {
	list-style:none;
}

li {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content:'';
	content:none;
}

a {
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	text-decoration: none;
}

input, select {
	vertical-align:middle;
	border: none;
}

a p {
	font-weight:normal;
}

label {
	cursor:pointer;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	background-color:#FF6E00; /* 背景色の変更 */
	font-size: 15px;
	line-height: 1.4;
	color: #653000; /* 文字色の変更 */
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
	-webkit-text-size-adjust: 100%;
	letter-spacing: -0.001em;
}

body * {
	word-break: break-word;
	word-wrap:normal;
}

img {
	border : 0;
	vertical-align: bottom;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

th, td {
	vertical-align: middle;
}

hr {
	display: block;
	border: 0;
	margin: 0;
	padding: 0;
}

button {
	appearance: none;
	-webkit-appearance: none;
	border: none;
}

section {
	margin-bottom: 15px;
}

.footer_text {
	padding-top: 0px;
	padding-bottom: 40px;
	font-size: 12px;
	text-align: center;
}

/*--- text-align設定 ---*/
.center {text-align: center;}
.right {text-align: right;}
.left {text-align: left;}

/*--- margin設定 ---*/
.mt10 {margin-top: 10px!important;}
.mt20 {margin-top: 20px!important;}
.mt25 {margin-top: 25px!important;}
.mt30 {margin-top: 30px!important;}
.mt40 {margin-top: 40px!important;}
.mt50 {margin-top: 50px!important;}
.mt60 {margin-top: 60px!important;}
.mt70 {margin-top: 70px!important;}
.mt80 {margin-top: 80px!important;}

.mb10 {margin-bottom: 10px!important;}
.mb20 {margin-bottom: 20px!important;}
.mb25 {margin-bottom: 25px!important;}
.mb30 {margin-bottom: 30px!important;}
.mb40 {margin-bottom: 40px!important;}
.mb50 {margin-bottom: 50px!important;}
.mb60 {margin-bottom: 60px!important;}
.mb70 {margin-bottom: 70px!important;}
.mb80 {margin-bottom: 80px!important;}

/*--- padding設定 ---*/
.pt10 {padding-top: 10px!important;}
.pt20 {padding-top: 20px!important;}
.pt25 {padding-top: 25px!important;}
.pt30 {padding-top: 30px!important;}
.pt40 {padding-top: 40px!important;}
.pt50 {padding-top: 50px!important;}
.pt60 {padding-top: 60px!important;}
.pt70 {padding-top: 70px!important;}
.pt80 {padding-top: 80px!important;}

.pb10 {padding-bottom: 10px!important;}
.pb20 {padding-bottom: 20px!important;}
.pb25 {padding-bottom: 25px!important;}
.pb30 {padding-bottom: 30px!important;}
.pb40 {padding-bottom: 40px!important;}
.pb50 {padding-bottom: 50px!important;}
.pb60 {padding-bottom: 60px!important;}
.pb70 {padding-bottom: 70px!important;}
.pb80 {padding-bottom: 80px!important;}

/* ボックスデザイン */
.eria {
	width: 85%;
	margin: 0 auto;
	/* padding: 0 0 6%; */
	text-align: left;
	position: relative;
}

.img_eria {
	width: 85%;
	margin: 0 auto;
	text-align: center;
	position: relative;
}

/* 小見出し角丸設定 */
.ttl_radius {
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
	-webkit-border-top-left-radius: 7px;
	-webkit-border-top-right-radius: 7px;
	-moz-border-radius-topleft: 7px;
	-moz-border-radius-topright: 7px;
}

/* 汎用角丸設定 */
.radius {
	border-radius: 10px; /* 角丸設定 */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

.texteria {
	text-align: left;
	margin: 0 auto;
}

.attention_area {
	font-size: 0.9em;
	width: 90%;
	margin: 0 auto;
	text-align: left;
}

.title_area {
	color: #0267FF;
	width: 85%;
	margin: 0 auto;
}

.link_page_top {
	text-align: right;
	margin-right: 10px;
	margin-bottom:20px;
}

.bigf {
	font-size: large;
	font-weight: bold;
}

.smalf {
	font-size: small;
}

.img_border {
	border: 1px #000 solid ;
}

.grid {
	border: 2px #fff solid;
	box-shadow: 0 0 4px #898989;
}

/* flex設定（横並び） */
.header_flex_container {
	display: flex;
	width: 88%;
	gap: 0 20px;
	margin: 0 auto;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.header_flex_column {
	width: calc(100% / 5);
	align-self: flex-end;
}

.flex_container {
	display: flex;
	gap: 0 20px;
	flex-direction: row;
}

.flex_column {
	width: calc(100% / 3);
}

/* リストタグデザイン */
.list_design {
	padding-left: 1.2em; /* インデント */
	text-align: left; /* テキストの左揃え */
}

/*黒点マーカー*/
.list_design li {
	list-style-type: disc; /* マーカーの種類 */
	margin-bottom: 10px; /* マーカーの下のマージン */
	line-height: 1.5; /* 行間 */
}

/* 数字リストデザイン */
.list_num_design {
	padding-left: 1em; /* インデント */
	text-align: left; /* テキストの左揃え */
}

.list_num_design li {
	list-style-type: decimal; /* マーカーの種類 */
	margin-bottom: 10px; /* マーカーの下のマージン */
	line-height: 1.5; /* 行間 */
}

/* カスタムマーカーリストデザイン */
.list_custom_design {
	list-style-type: none; /* デフォルトマーカーを消す */
	padding-left: 0; /* インデントを消す */
	text-align: left; /* テキストの左揃え */
}

.list_custom_design li {
	position: relative; /* マーカー挿入の基準点をつくる */
	padding-left: 1.2em; /* マーカー分のインデント */
	margin-bottom: 10px; /* マーカー後のマージン */
	line-height: 1.5; /* 行間 */
}

/* カスタムマーカー（relativeによって基準になったli要素先頭に挿入する） */
.list_custom_design li::before {
	content: "-"; /* 表示したいマーカー。他の文字に設定可能 */
	position: absolute; /*親要素基準の絶対配置*/
	left: 0;
	top: 0;
}

/* フキダシ設定 */
/* フキダシのボックス設定 */
.arrow_box_left { 
    position: relative;
    background: #E6F6FF;
	width: 100%;
    padding: 2%;
    text-align: left;
    border: 2px solid #E6F6FF;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
	display: grid;
	place-items: center;
}

.arrow_box_right {
    position: relative;
    background: #E6F6FF;
	width: 100%;
    padding: 2%;
    text-align: left;
    border: 2px solid #E6F6FF;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
	display: grid;
	place-items: center;
}

/* フキダシのシッポ設定 */
.arrow_box_left::after,.arrow_box_left::before {
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    pointer-events: none;
    position: absolute;
    left: 100%;
    top: 40px;
}

.arrow_box_left::after {
    border-top-width: 14px;
    border-bottom-width: 14px;
    border-left-width: 12px;
    border-right-width: 12px;
    margin-top: -14px;
    border-left-color: #E6F6FF;
}

.arrow_box_left::before {
    border-top-width: 16px;
    border-bottom-width: 16px;
    border-left-width: 13px;
    border-right-width: 13px;
    margin-top: -16px;
    margin-left: 2px;
    border-left-color: #E6F6FF;
}

.arrow_box_right::after,.arrow_box_right::before {
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    pointer-events: none;
    position: absolute;
    right: 100%;
    top: 40px;
}

.arrow_box_right::after {
    border-top-width: 14px;
    border-bottom-width: 14px;
    border-left-width: 12px;
    border-right-width: 12px;
    margin-top: -14px;
    border-right-color: #E6F6FF;
}

.arrow_box_right::before {
    border-top-width: 16px;
    border-bottom-width: 16px;
    border-left-width: 13px;
    border-right-width: 13px;
    margin-top: -16px;
    margin-left: 2px;
    border-right-color: #E6F6FF;
}

/* ファンメール設定 */
.fanmail_area {
	width: 90%;
	margin: 0 auto;
	background-color: #FFF; /* 背景色の変更 */
	text-align: left;
	border: solid 2px #000; /* 枠線の変更 */
	position: relative;
	border-radius: 10px; /* 角丸設定 */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

.fanmail_profile {
	padding: 4% 4%;
	text-align: left;
	margin: 0 auto;
}

.fanmail_massage {
	color: #222222;
	border-radius: 10px; /* 角丸設定 */
	padding: 0 4% 4% 4%;
	text-align: left;
	margin: 0 auto;
	background-color: #FFF;
}

.fanmail_massage p:first-child {
	padding: 4% 0 2% 0;
}

.line {
	border-top: 2px solid;
}

/* ファンレター企画、カラー設定 */
.red {
	background-color:#FFF1F1;
	border-color: #A01818;
}

.txt_red {
	color: #A01818;
}

.ppl {
	background-color:#FDF0FF;
	border-color: #AB3EB7;
}

.txt_ppl {
	color: #AB3EB7;
}

.grn {
	background-color:#F1FFF7;
	border-color: #199854;
}

.txt_grn {
	color: #199854;
}

.orn {
	background-color:#FFF9F1;
	border-color: #D97F08;
}

.txt_orn {
	color: #D97F08;
}

.blu {
	background-color:#F1F9FF;
	border-color: #2685CD;
}

.txt_blu {
	color: #2685CD;
}

/* =========================================
便箋デザイン
罫線の開始位置や罫線間隔、色テーマを変数で調整可能に
各要素の縦余白は罫線間隔に同期させてデザインすること
 ========================================= */

/* --- 共通変数（行設定など） --- */
:root {
	--row-height: 2rem;   /* 行の高さ（罫線間隔） */
	--font-size: 1rem; /* 基本フォントサイズ */
}

/* 便箋を並べるラッパー */
.letters_container {
	display: flex;
	flex-direction: column;
	gap: 60px;
	width: 100%;
}

/* --- 便箋の体裁 --- */
.letter_paper {
	--img-width: 90%;    /* メイン画像の幅調整 */
	width: 90%; /* 便箋の幅 */
	margin: 0 auto; /* 中央寄せ */
	/* 最背面に罫線 */
	background-image: repeating-linear-gradient(
			to bottom,
			transparent, /* 罫線の上は透明 */
			transparent calc(var(--row-height) - 2px), /* 罫線の直前まで透明 */
			var(--line-color) calc(var(--row-height) - 1px), /* 罫線の色 */
			var(--line-color) var(--row-height) /* 罫線の高さまで繰り返し */
	);
	background-color: var(--bg-color);
	background-attachment: local;
	/* 罫線の開始位置調整 */
	background-position-y: calc(var(--row-height) / 2);;
	/* 装飾リセット */
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	box-sizing: border-box;
	overflow: hidden;
}

/* --- 行レイアウト（共通） --- */
/* 全ての要素を行の高さのブロックに入れ、上下中央揃えにする */
.row_block {
	display: flex;
	align-items: center; /* 上下中央揃え */
	min-height: var(--row-height);
	box-sizing: border-box;
	padding: 0 5%; /* 左右の余白 */
}

/* --- 飾り罫画像エリア --- */
.decoration_block {
	height: calc(var(--row-height)*1.5); /* 飾り罫エリアは1.5行分 */
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0; /* 画像の上下に少し余白 */
	width: 100%;
}
.decoration_block img {
	width: 100%;
	height: 100%; /* 高さ上限値を親要素の範囲内に */
}

/* --- テキスト・メイン画像エリア --- */
.header_text {
	color: var(--text-accent);
	font-weight: bold;
	line-height: var(--row-height); /* 行間は罫線の高さに揃える */
	width: 100%;
	font-size: var(--font-size);
}

.image_container {
	height: calc(var(--row-height)*7); /* 高さを7行分固定 */
	padding: calc(var(--row-height)/2) 0; /* 余白上下に0.5行分（計1行で以降の行ずれ防止） */
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box; /* padding込みで高さ計算 */
	padding: 0 5%; /* 左右の余白 */
}

.image_container a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.image_container img {
	display: block;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	border: 4px solid white;
	box-shadow: 0 0 4px #898989;
	box-sizing: border-box;
}

.message_body {
	color: var(--text-body);
	/* 行の高さと同期させてテキストを罫線に乗せる */
	line-height: var(--row-height);
	margin-bottom: var(--row-height);
	word-wrap: break-word;
	font-size: var(--font-size);
	padding: 0 5%; /* 左右の余白 */
}

.fanart_container {
	height: calc(var(--row-height)*14); /* 高さを14行分固定 */
	padding: calc(var(--row-height)/2) 0; /* 余白上下に0.5行分（計1行で以降の行ずれ防止） */
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box; /* padding込みで高さ計算 */
}

.fanart_container img {
	max-width: 100%;
	max-height: 100%;
}


.footer_text {
	justify-content: flex-end;
	color: var(--text-body);
	font-size: var(--font-size);
}

.flag {
	margin-left: 10px;
}


/* =========================================
便箋のカラーテーマ定義
 ========================================= */

/* テーマ1：ピンク */
.theme_pink {
	--bg-color: #fff0f0;
	--line-color: #e3d7d7;
	--text-accent: #A01818;
	--text-body: #000;
}

/* テーマ2：ブルー */
.theme_blue {
	--bg-color: #EAEDFF;
	--line-color: #e3d7d7;
	--text-accent: #181AA0;
	--text-body: #000;
}

/* テーマ3：イエロー */
.theme_yellow {
	--bg-color: #FFFAEA;
	--line-color: #e3d7d7;
	--text-accent: #A04818;
	--text-body: #000;
}

/* テーマ4：パープル */
.theme_purple {
	--bg-color: #FFEAFF;
	--line-color: #e3d7d7;
	--text-accent: #A0188E;
	--text-body: #000;
}

/* テーマ5：ライトブルー */
.theme_lightblue {
	--bg-color: #EAF8FF;
	--line-color: #e3d7d7;
	--text-accent: #0090FF;
	--text-body: #000;
}

.koma {
	border: 2px solid #000;
}

.ticket_area {
	background-color: #FF6E00;
	padding: 2%;
	color: #FFF;
	font-weight: bold;
}

.mov_eria {
	text-align: center;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
}

.mov_eria iframe {
	width: 100%;
	height: 100%;
}