@charset "UTF-8";

/* 基本色 */
:root {
	--main-color: #210168;
	--accent-color: #A7A37E;
	--dark-main-color: #6E3BDF;
	--text-bright-color: #fff;
	--icon-color: #fff;
	--icon-bk-color: #ddd;
	--gray-color: #ddd;
	--large-width: 1000px;
	--middle-width: 800px;
}


/* 基本設定： フォントサイズ */
@media (max-width: 599px) {
	:root {
		font-size: 14px;
	}
}

@media (min-width: 600px) and (max-width: 799px) {
	:root {
		font-size: 16px;
	}
}

@media (min-width: 800px) {
	:root {
		font-size: 18px;
	}
}

body {font-size: 16px;}



/* ====================
   基本設定： ページ全体
   ==================== */

body {
	margin: 0;
	font-family: "Helvetica Neue","Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;
}

/* ====================
   写真スライドショーのコンテナ
   ==================== */

.slideshow-container {
  width: 100%;
  max-width: none;
  height: 0; /* 高さを0に設定して、padding-bottomで縦横比を制御 */
  padding-bottom: 56.25%; /* 16:9の縦横比を維持 */
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  z-index: 100; /* スライドショーの基本レイヤー */
  background-color: rgba(0, 0, 0, 0);
}

.slideshow-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 50%);
  z-index: 110; /* スライド画像より手前に配置 */
}

/* アニメーションのキーフレームを定義 */
@keyframes fadeInSlide {
	from {
		opacity: 0;
		transform: translate(-50%, -40%);
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%);
	}
}

.slideshow-container h1 {
  position: absolute;
  z-index: 120; /* 矢印やドットより手前 */
  top: 40%;
  left: 50%;
  width: 100%;
  text-align: center;
  font-family: 'Sacramento', cursive; /* 筆記体フォント */
  font-weight: 400; /* 通常の太さ */
  font-size: 7vw; /* より大きく、流れるように */
  color: #FFFFFF;
  letter-spacing: 0.05em; /* 文字間を少しだけ調整 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); /* 立体感のある影 */
  transform: translate(-50%, -50%) skewX(-10deg);   /* 中央寄せと傾きを一つにまとめる */
}

.slideshow-container h1.active {
	animation: fadeInSlide 2s ease-out forwards;
}

/* 各スライドのスタイル */
.mySlides {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  z-index: 105; /* スライドショーの画像 */
}

/* 画像のスタイル */
.mySlides img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 画像の縦横比を維持しつつ、コンテナに合わせて切り抜く */
	display: block;
	transform: scale(1.2);
	transition: transform 4s ease-out;
}

/* 表示中のスライドに適用するスタイル */
.mySlides.active {
	opacity: 1;
}

/* activeクラスの画像に適用するスタイル */
.mySlides.active img {
	transform: scale(1);
}

/* 前へ・次へボタンのスタイル */
.slideshow-container .prev,
.slideshow-container .next {
	z-index: 130; /* h1よりも高い値に設定 */
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 10px; /* パディングを小さくしてボタンの高さを調整 */
	margin-top: -15px; /* ボタンの縦方向の位置を再調整 */
	color: white;
	font-weight: bold;
	font-size: 20px; /* フォントサイズを小さくしてアイコンも小さく */
	transition: 0.6s ease;
	user-select: none;
	background-color: rgba(0, 0, 0, 0.3);
}

/* 「前へ」ボタンを左側に配置 */
.slideshow-container .prev {
	left: 0;
	border-radius: 0 3px 3px 0; /* 左側の角だけ丸くする */
}

/* 「次へ」ボタンを右側に配置 */
.slideshow-container .next {
	right: 0;
	border-radius: 3px 0 0 3px; /* 右側の角だけ丸くする */
}

/* ボタンにマウスが乗ったときのスタイル */
.slideshow-container .prev:hover,
.slideshow-container .next:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

/* ドットインジケーターのスタイル */
.slideshow-container .dot-container {
	text-align: center;
	position: absolute;
	bottom: 20px;
	width: 100%;
	z-index: 130; /* ボタンと同じか高い値 */
}

.slideshow-container .dot {
	cursor: pointer;
	height: 6px; /* ドットの高さ*/
	width: 6px; /* ドットの幅*/
	margin: 0px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}

/* 現在のスライドのドットの色 */
.slideshow-container .dot.active,
.slideshow-container .dot:hover {
	background-color: #717171;
}

/* スライドショーの下に続くコンテンツのスタイル */
.main-content {
	background-color: #ffffff;
	padding: 0;
	min-height: 50vh;
}

/* メニューのCSS */
.menu-container {
	width: 100%;
	padding: 0;
	background-color: #f0f0f0;
	box-sizing: border-box;
}



/* ====================
   フッター (footer)
   ==================== */

footer {
	color: #fff;
	color: var(--text-bright-color);
	background-color: #002F2F;
	background-color: var(--dark-main-color);
}

footer .container {
	padding: 40px 20px;
}


@media (min-width: 768px) {
	footer .container {
		display: flex;
		flex-wrap: wrap;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}

	.footA {
		flex: 0 0 40%;
	}

	.footB {
		flex: 0 0 60%;
	}

	.footC {
		flex: 0 0 100%;
	}
}


/* フッターA： サイト情報 */
.footA {
	margin-bottom: 30px;
}

.footA h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	letter-spacing: 0.2em;
}

.footA p {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 14px;
}

.footA a {
	color: inherit;
	text-decoration: none;
}


/* フッターB： フッターメニュー */
.footB div {
	margin-bottom: 20px;
}

.footB h3 {
	margin-top: 0;
	margin-bottom: 10px;
	border-bottom: solid 1px currentColor;
	font-size: 14px;
}

.footB ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footB a {
	display: block;
	padding: 5px;
	color: inherit;
	font-size: 12px;
	text-decoration: none;
}

.footB a:hover {
	background-color: rgba(0,0,0,0.3);
}


@media (min-width: 768px) {
	.footB {
		display: flex;
	}

	.footB div {
		flex: 1;
	}

	.footB div:not(:first-child) {
		margin-left: 40px;
	}
}


/* フッターC： コピーライト */
.footC {
	font-size: 10px;
	text-align: center;
	font-family: 'Itim', cursive;
	}


/* フッターD： SNSメニュー */
.footD {
	margin-top: 20px;
}

.footD ul {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footD a {
	display: block;
	margin-right: 8px;
	padding: 0;
	color: inherit;
	font-size: 16px;
	text-decoration: none;
	border: solid 1px currentColor;
	width: 2em;
	line-height: 2em;
	border-radius: 50%;
	text-align: center;
}

.footD a:hover {
	background-color: rgba(0,0,0,0.3);
}


/* ====================
   ヘッダー (header)
   ==================== */
header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 200;
	width: 100%;
	background-color: rgba(0, 0, 0, 0);
	padding: 5px 0px 5px 0px;
}
.nohero header {
	position: static;
	border-bottom: solid 1px #ddd;
	border-bottom: solid 1px var(--gray-color);
}

/* ヘッダー【A: サイト名】 */
.headA {
	display: inline-block;
	line-height: 0px;
	padding: 0px 20px 0px 20px;
	background-color: rgba(255,102,216,0.75);
	background-color: var(--main-color);
	color: #fff;
	font-size: 24px;
	text-decoration: none;
}

/* ヘッダー【B： ナビゲーションメニューのスタイル】 */
.headB ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 7px; /* アイコン間の間隔を狭くする */
}

.headB a {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 0.6em; /* アイコンのサイズを小さくする */
  padding: 5px 10px;
  transition: background-color 0.3s linear;
}

.headB a:active {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
}
	
.headB a:hover {
	color: #FFFFFF;
	border-radius: 5px;
	transition: background-color 0.6s linear;
	background-color: rgba(127,96,253,0.76);
	transition-duration: 0.3s;
}

@media (min-width: 768px) {
	header .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}

  .headB ul {
		display: flex;
	}

  .headB ul {
		display: flex;
		gap: 2px;
	}
}

	
/* ヘッダー【C：トグルボタン】 */
@media (max-width: 767px) {
	/* 小さい画面用の設定 */
	header .container-small {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
		.headC {
		margin-right: 10px;
		padding: 0;
		border: none;
		outline: none;
		background: none;
		font-size: 18px;
		opacity: 0.5;
		cursor: pointer;
	}

	.headC:hover {
		opacity: 0.3;
	}

	.headB {
		display: none;
	}
}

	
@media (min-width: 768px) {
	/* 大きい画面用の設定 */
	.headC {
		display: none;
	}

	.headB {
		display: block !important;
	}
}

	
/* 【モバイルメニュー展開時のスタイル (トグルボタン展開時の崩れ対策)】 */
  
	.headC {
		margin-right: 10px;
		padding: 0px;
		border: none;
		outline: none;
		background: none;
		font-size: 18px;
		opacity: 0.5;
		cursor: pointer;
		color: #000000; /* トグルボタンの色 */
	}
	 .nohero .headC {
        color: #5D1BD8;
    }

	.headC:hover {
		opacity: 0.5;
	}

	.headB {
		display: none;
	}



/* ====================
   コンテンツページ: 記事
   ==================== */

.post .container {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	padding: 20px 20px 10px 20px; 
	font-family: '游ゴシック体','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ヒラギノ丸ゴ ProN','Hiragino Maru Gothic ProN',sans-serif;
	color: #646464;
}

.post h1 {
	padding-left: 0.5rem;
	border-left: solid 0.75rem #A7A37E;
	border-left: solid 0.75rem var(--accent-color);
	font-size: 2rem;
}

.post p {
	font-size: 1rem;
	line-height: 2;
}

.post img {
	max-width: 100%;
}


/* ====================
   記事一覧　listC
   ==================== */

.listC h1 {
	text-align: center;
}

.listC .container {
	display: flex;
	flex-wrap: wrap;
	max-width: none;
	margin: 2px auto;
	text-align: center;
}

.listC article {
	flex: 1 1 250px;
	display: flex;
}

.listC a {
	position: relative;
	flex: 1;
	margin: 2px;
	display: block;
	border: solid 1px #ddd;
	border: solid 1px var(--gray-color);
	background-color: currentColor;
	color: inherit;
	text-decoration: none;
}

.listC a:hover {
	opacity: 0.8;
}

.listC .photo {
	min-height: 100px;
	background-position: center;
	background-size: cover;
	opacity: 0.6;
}

.listC .text {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 10px;
	color: #fff;
	color: var(--text-bright-color);
}

.listC h2 {
	margin: 0;
	font-size: 18px;
}

.listC p {
	margin: 0;
	font-size: 14px;
	opacity: 0.8;
	text-align: center;

}

@media (min-width: 1000px) {
	.listC article {
		flex: 1 1 25%;
	}
}


	
/* ====================
   モバイルメニュー開閉時の動作安定化
   ==================== */

/* モバイルメニュー展開時 (JavaScriptで付与) のヘッダー背景色 */
@media (max-width: 767px) {
    header .container.menu-open {
        background-color: rgba(0, 0, 0, 0.9); /* メニュー展開時に暗い背景色を適用 */
    }

    /* .headA の背景と色を、展開時のみ白くする */
    .headA {
        color: #fff; /* 初期状態の色を白に保つ */
        background-color: transparent; /* 初期状態の背景を透明に保つ */
    }

    header .container.menu-open .headA {
        color: #fff;
        background-color: transparent;
    }
	/* hero画像がないページで、メニューが閉じている時のメニューボタンとナビゲーションの調整 */
.nohero header {
    background-color: #fff; /* heroがない場合のヘッダー背景色 */
}

/* hero画像がないページで、メニュー展開時のナビゲーション背景色を上書き */
.nohero .headB.active {
    background-color: rgba(0, 0, 0, 0.8) !important; 
}
}