@charset "utf-8";

/* リセット系
--------------------------------------------- */
html {
	font-size: 16px;
	max-width: 1000px;
	margin: 0 auto;
}

html *,
::before,
::after {
	box-sizing: border-box;
}

body {
	overflow-x: hidden;
	margin: 0;
	font-family: 'Helvetica Neue', 'Helvetica', 'Arial', YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, sans-serif;
	background-color: #faf9f7;
	color: #333;
}

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

h1 {
	padding-top: 154px;
	padding-bottom: 4px;
	padding-left: 20px;
	font-family: "Zen Old Mincho", serif;
	font-size: 1.5rem;
}

h2 {
	display: flex;
	align-items: center;
	padding-top: 2px;
	padding-left: 10px;
	margin-top: 12px;
	margin-bottom: 14px;
	border-left-color: #444;
	border-left-width: 6px;
	border-left-style: solid;
	font-family: "Zen Old Mincho", serif;
	font-size: 1.3rem;
	color: #444;
}

h3 {
	margin: 15px 0px 10px 0;
	border-top-width: 4px;
	border-top-color: #999;
	border-top-style: solid;
	padding-top: 6px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 6px;
	font-size: 1.1rem;
	font-family: "Zen Old Mincho", serif;
	color: #444;
	background-color: #e8e8e8;
}

h4 {
	font-size: 1.05rem;
	margin-bottom: 8px;
}

p {
	text-align: justify;
	font-family: font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, YuGothic, 'Yu Gothic', sans-serif;
	text-decoration: none;
	font-size: 1.0rem;
	margin: 0;
	margin-bottom: 5px;
}

a:link {
	color: #333333;
}

a:visited {
	color: #666666;
}

.header-container a {
	color: #000;
}

.header-logo a {
	position: relative;
}

ul {
	list-style-type: square;
	list-style-position: inside;
	margin: 0;
	padding-left: 0;
	margin-bottom: 5px;
	line-height: 25px;
	font-size: 1.0rem;
}

.general-list {
	list-style-position: outside;
}

.general-list li {
	margin-left: 30px;
	padding-left: 0px;
}


/* ヘッダー
--------------------------------------------- */

header {
	position: fixed;
	/*** 固定 ***/
	top: 0;
	left: 0;
	z-index: 9;
	width: 100%;
	height: 80px;
	background-color: #faf9f7;
}

.header-container {
	padding: 15px;
	margin: none;
	margin-top: 10px;
	text-align: center;
	font-size: 1.8rem;
}

.header-logo {
	border: none;
	text-decoration: none;
	color: #000;
	font-family: "Zen Old Mincho", serif;
	font-weight: 400;
	font-style: normal;
}

.header-logo img {
	width: 0px;
}


/* ナビゲーション
--------------------------------------------- */

.globalnav {
	position: fixed;
	/*** ← fixedで固定 ***/
	top: 0;
	left: 0;
	z-index: 8;
	width: 100%;
	margin-top: 80px;
	margin-bottom: 0;
	border-bottom-width: 1px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 0;
	list-style: none;
	background-color: #333;
	box-shadow: 0px 0px 10px 0px #000;

	/* 無効化
	box-shadow: 0px 3px -1px 1px #ccc;
	background: linear-gradient(#faf9f7,#faf9f7,#faf9f7)
--------------------------------------------- */
}

.globalnav {
	display: flex;
}

.globalnav li {
	flex: 0 0 25%;
}

.globalnav a {
	display: block;
	padding: 10px 0;
	text-decoration: none;
	text-align: center;
	color: #f8f8f8;
	font-size: 1.2rem;
	font-family: 'Roboto', sans-serif;
	font-weight: 200;
	line-height: 100%;
}

/*ページタイトル（第2階層以下のh1）*/

.page-title {
	position: relative;
	left: 50%;
	/* 左端をビューポートの真ん中に移動 */
	transform: translateX(-50%);
	/* 要素自体を左に幅の半分だけずらして中央に配置 */
	flex-basis: 100%;
	/* 1. 横幅いっぱい (100vw = Viewport Width 100%) に広げる */
	width: 100vw;
	padding-bottom: 5px;
	background-color: #e8e8e8;
	font-size: 1.4rem;
	text-align: center;
}

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

@media (min-width: 768px) {
	.page-title-text {
		width: 1000px;
	}
}



/* ボタン
--------------------------------------------- */

.link-button {
	display: flex;
	justify-content: center;
	align-self: center;
	margin-top: 1.3rem;
	margin-bottom: 2rem;
	margin-left: 1rem;
	margin-right: 1rem;
	padding: 1rem 1rem;
	border-radius: 5px;
	/* 角丸 */
	background: #111;
	/*ボタン色*/
	border-radius: 10px;
	color: background-color: #DDF067;
	;
	text-decoration: none;
	text-align: center;
	font-size: 1.1rem;
	font-weight: bolder;
}

/* link-button クラスを持つ a 要素のテキスト色を緑にする */
.link-button a {
	color: #b5fc1c;
	;
	/* 緑色のHEXコード */
	text-decoration: none;
}

.link-button:hover {
	background-color: #333;
	color: #b5fc1c;
	;
	/* ホバー時の色も緑にする */
}

/* 訪問済みリンクの色も緑にする */
/* a:visited のルールよりも詳細度を高くして上書き */
.link-button:visited a {
	color: #b5fc1c;
	;
	/* 訪問済みの場合も緑色を維持 */
}


/* ライブ告知
--------------------------------------------- */
.date {
	font-size: 2.0rem;
}

.time {
	font-size: 1.4rem;
	font-weight: 400;
}

/* 縦型写真
--------------------------------------------- */

.vertical-img {
	margin-bottom: 10px;
	width: 100%;
}

@media (min-width: 768px) {
	.vertical-img {
		width: 250px;
	}
}

/* メインコンテンツ
--------------------------------------------- */
.main-container {
	padding: 0px;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 25px;
	margin-right: 25px;
}

/* Profile
--------------------------------------------- */

.profile-container {
	padding: 0px;
	margin-top: 20px;
	margin-bottom: 20px;
}

@media (min-width: 768px) {
	.profile-container {
		display: flex;
		flex: 1 1 auto;
		margin-left: 0%;
		margin-top: 0;
	}
}

/* Schedule
--------------------------------------------- */

.schedule-container {
	padding: 0px;
	margin-top: 20px;
	margin-bottom: 20px;
}

@media (min-width: 768px) {
	.schedule-container {
		display: flex;
		flex: 1 1 auto;
		margin-left: 0;
		margin-top: 0;
	}
}

.schedule-container li {
	margin-left: 10px;
	line-height: 27px;
	list-style-type: square;
	padding-left: 0.7em;
	text-indent: -0.9em;
}

.live-detail-container {
	margin-bottom: 10px;
}

.place-category {
	margin-bottom: 10px;
}

.prefecture {
	color: #f8f8f8;
	background-color: #666;
	border-radius: 9999px;
	padding: 2px 12px;
	margin-left: 10px;
	font-size: 14px;
	flex-shrink: 0;
	/* 縮小しないよう設定 */
	flex-basis: auto;
	white-space: nowrap;
	/* box内で改行しない */
}

.live-category {
	border-radius: 9999px;
	padding: 2px 12px;
	margin-left: 8px;
	border-style: solid;
	border-width: 1px;
	font-size: 14px;
	flex-shrink: 0;
	/* 縮小しないよう設定 */
	flex-basis: auto;
	white-space: nowrap;
	/* box内で改行しない */
}

/* Javascriptでライブカテゴリアイコンの色を制御するための記述 */

.status-a {
	background-color: #fff;
	border-color: #000;
	color: #000;
}

.status-b {
	background-color: #000;
	border-color: none;
	color: #fff;
}

.status-c {
	background-color: #DDF067;
	border-color: #BFCF59;
	color: #000;
}

.status-default {
	background-color: #999;
	border-color: none;
	color: #fff;
}

/* 横型写真 ==>過去記事反映が終わったら削除
--------------------------------------------- */
.horizontal-img {
	margin-bottom: 10px;
	width: 100%;
}

@media (min-width: 768px) {
	.horizontal-img {
		width: 350px;
	}
}


/* プロフィール・スケジュール写真
--------------------------------------------- */
.schedule-img {
	margin-top: 5px;
}

@media (min-width: 768px) {
	.schedule-img {
		width: 260px;
		margin-left: auto;
		/* 👈 右寄せをトリガー */
	}
}

.schedule-img img {
	border-radius: 4px;
}

.profile-img {
	width: 300px;
	margin: 0;
	margin-bottom: 10px;
	margin-right: 20px;
	background-color: #222;
}

.profile-container {
	width: 100%;
}

/* Weblog
--------------------------------------------- */

.weblog-list {
	padding: 0px;
	width: 100%;
}

.weblog-list li {
	align-items: center;
	/* 縦方向に要素の高さが異なる場合に中央揃えにする */
	height: auto;
	list-style: none;
	border-bottom: 1px solid #666;
	position: relative;
	padding: 6px 0 6px 20px;
	margin-top: 0px;
}

.weblog-list li a {
	display: flex;
	text-decoration: none;
	width: 100%;
	/* aタグをliの幅いっぱいに広げる */
	align-items: center;
	flex-wrap: nowrap;
}

.weblog-list li::before {
	content: "";
	position: absolute;
	top: 0%;
	left: 1px;
	width: 20px;
	height: 0px;
	border: 8px solid transparent;
	border-left: 12px solid #999;
	transform: translateY(10px);
}

.article-title {

	flex: 0 0 auto;
	/* flex-grow: 1; をここで解除/上書き、タイトル幅に合わせる */
	white-space: normal;
	/* 改行許可 */
	margin-right: 10px;
}

.right-info {
	display: flex;
	/* 横並びを維持 */
	align-items: center;
	margin-left: auto;
	/* 👈 右寄せをトリガー */
	flex-shrink: 0;
}

.weblog-category {
	min-width: 110px;
	color: #f8f8f8;
	background-color: #000;
	border-radius: 9999px;
	padding: 2px 12px;
	margin-left: 10px;
	margin-right: 10px;
	font-size: 14px;
	flex-shrink: 0;
	/* 縮小しないよう設定 */
	flex-basis: auto;
	white-space: nowrap;
	/* box内で改行しない */
	text-align: center;
}

/* blogトップの日付 */
.list-date {
	min-width: 100px;
	font-size: 14px;
	color: #999;
	text-align: center;
	flex-shrink: 0;
	/* 縮小しないよう設定 */
	flex-basis: auto;
	/* 元のコンテンツ幅を初期サイズとする */
	white-space: nowrap;
	/* 改行しない */
}

/* blog個別記事の日付 */
.weblog-date {
	display: flex;
	/* 右寄せ */
	justify-content: flex-end;
	/* 右寄せ */
	height: 5px;
	font-size: 14px;
	color: #999;
	text-align: center;
}

/* 画面幅が狭い場合（例: 767px以下）に適用 */
@media (max-width: 767px) {

	/* 記事タイトル: 拡大率を上げて、幅を占有させる */
	.article-title {
		flex: 1 1 auto;
		/* 👈 拡大率を 1 に設定し、幅を確保 */
		margin-right: 5px;
	}

	/* weblog-category と list-date の右寄せを解除し、自然な流れにする */
	.weblog-category {
		margin-left: 0;
		/* autoを解除し、左に詰める */
		margin-right: 0;
		/*PCの設定を解除*/
		flex-shrink: 0;
		/* 🚨 必要に応じて、カテゴリと日付を強制的に次の行に送る */
		/* width: 100%; を設定したり、 Flexbox の align-items を調整するなど */
	}

	.right-info {
		/* aタグ内では article-title の隣に横並びだが中身 (categoryとtime) を縦並びにする */
		display: flex;
		flex-direction: column;
		/* 👈 縦並びに変更 */
		align-items: flex-end;
		/* 👈 右端に揃える */
		margin-left: 5px;
		/* 記事タイトルとの隙間 */
		flex-shrink: 0;
	}
}

.flyer {
	margin-bottom: 12px;
}

@media (min-width: 768px) {

	/* フライヤ＋複数連続しない単独画像用 */
	.flyer {
		width: 300px;
	}
}

.weblog-img {
	margin-bottom: 8px;
}

.weblog-img img {
	margin-bottom: 8px;
	border-radius: 4px;
}

@media (min-width: 768px) {
	/* 768px以下の場合に適用（ブレイクポイント） */

	.weblog-img {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 8px;
	}

	.weblog-img img {
		flex-grow: 1;
		object-fit: cover;
		object-position: 50% 0%;
		/* 人の顔が切れないように上位置を固定してトリミング*/
		height: 300px;
		margin: 3px;
	}

	.weblog-single-img {
		width: 469px;
		height: 300px object-fit: cover;
		margin-bottom: 15px;
	}

	.weblog-single-img img {
		border-radius: 4px;
	}

}

.weblog-youtube {
	margin-bottom: 10px;
}

/* ディスコグラフィー画像
--------------------------------------------- */

.discography-img {
	width: 300px;
	height margin: 0;
	margin-bottom: 10px;
	background-color: #222;
}

/* フッター
--------------------------------------------- */
.footer-container {

	position: relative;
	left: 50%;
	/* 左端をビューポートの真ん中に移動 */
	transform: translateX(-50%);
	/* 要素自体を左に幅の半分だけずらして中央に配置 */
	flex-basis: 100%;
	/* 1. 横幅いっぱい (100vw = Viewport Width 100%) に広げる */
	width: 100vw;
	font-size: 1.4rem;
	text-align: left;




	height: 220px;
	padding: 30px 40px;
	justify-content: space-between;
	background-color: #e8e8e8;
	text-align: center;
	font-size: 0.8rem;

}

.social-logo {
	display: flex;
	width: 80%;
	margin: 0;
	padding: 0;
	align-content: center;
	font-size: 0.8rem;
	text-align: center;
}

.social-logo img {
	height: 6vw;
	margin: 1vw;
	object-fit: cover;
}

/* copyright
--------------------------------------------- */

.copyright {
	text-align: center;
	font-size: 0.8rem;
	padding: 35px;
	color: #666;
}


/* discography
--------------------------------------------- */

.discography-item {
	display: flex;
	/* 画像とテキストを横並びにする */
	align-items: flex-start;
	/* 上端揃え */
	gap: 30px;
	/* 画像とテキストの間のスペース（調整してください） */
	margin-top: 20px;
	margin-bottom: 40px;
	/* 各ディスコグラフィーアイテムの下余白 */
	/* 必要であれば、ここに個別の max-width を設定することも検討 */
}

.album-image {
	flex-shrink: 0;
	/* ★重要: 画像コンテナがテキスト量で縮まないようにする */
	width: 300px;
	/* ★重要: 画像コンテナの幅を固定する（あなたの意図する画像の表示サイズに調整） */
	/* 例えば、アルバムジャケットの適切なサイズとして150px〜250px程度が良いでしょう。 */
}

.album-image img {
	max-width: 100%;
	/* 親コンテナの幅に合わせて画像が最大100%表示されるように */
	height: auto;
	/* アスペクト比を維持 */
	display: block;
}

.album-details {
	flex-grow: 1;
	/* ★重要: テキスト部分が残りのスペースを柔軟に占める */
	min-width: 0;
	/* フレックスアイテム内のコンテンツがはみ出さないように念のため設定 */
}

/* レスポンシブ対応：画面幅が狭い場合は縦並びにする */
@media (max-width: 768px) {

	/* 768px以下の場合に適用（ブレイクポイントは適宜調整） */
	.discography-item {
		flex-direction: column;
		/* 縦並びにする */
		align-items: center;
		/* 中央寄せ */
	}

	.album-image {
		width: 300px;
		/* スマートフォンでの画像幅を調整 */
		margin-bottom: 15px;
		/* 画像とテキストの間に余白 */
	}
}