@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;
}


/* ====================
   コンテンツM
   ==================== */
.conM {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 250px;
	min-height: 10px;
	background-position: center;
	background-size: cover;
	color: #fff;
	background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(img/IMG_9515.jpg);
}

.conM.compact {
	height: 450px;
	min-height: 0;
	background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(img/IMG_9515.jpg);
}

.conM h1 {
	font-family: 'Sacramento', cursive; /* 筆記体フォント */
	font-weight: 400; /* 通常の太さ */
	font-size: 5.5em; /* より大きく、流れるように */
	padding: 0px 0px 0px 0px;
	margin: 10px 0px 0px 0px;
	color: #FFF;
	letter-spacing: 0em;
	text-align: center;

}

.conM p {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 20px 0px;
	font-size: 1.5em;
	color: #FFF;
	text-align: center;
}

.conM p1 {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 3vw;
	color: #FFF;
	font-family: "Sawarabi Mincho";
}

.conM img {
	width: 20%;
}

.conM a {
	display: inline-block;
	margin-top: 20px;
	padding: 10px 30px;
	box-shadow: 0 0 0 1px #888;
	border: solid 3px currentColor;
	border-radius: 6px;
	background-color: #7C63FF;
	color: #fff;
	font-size: 14px;
	text-decoration: none;
}

.conM a:hover	{
	background-image: linear-gradient(
		rgba(255,255,255,0.2),
		rgba(255,255,255,0.2)
	);
}

/* ====================
   コンテンツB：（写真＋テキスト
   ==================== */

.conB .container {
	padding-top: 30px;
	padding-bottom: 10px;
}

.conB h2 {
	margin-top: 10;
	margin-bottom: 5px;
	font-size: 13px;
}

.conB p {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 10px;
	line-height: 1.8;
	opacity: 0.8;
}

.conB a {
	color: #7C63FF;
	text-decoration: none;
}

.conB a:hover	{
	text-decoration: underline;
}

.conB .text {
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	text-align: center;
}
.conB .icon	{
	display: inline-block;
	margin-bottom: 20px;
	font-size: 30px;
	width: 2em;
	line-height: 2em;
	border-radius: 50%;
	text-align: center;
	background-color: #ddd;
	color: #fff;
}

.container .text .icon {
  /* 写真の表示サイズを設定 (例: 80px x 80px) */
  width: 80px;
  height: 80px;

  /* 画像を丸くする設定 */
  /* widthとheightが同じ値であれば、50%で真円 */
  border-radius: 50%;

  /* 画像が要素からはみ出る場合の処理 (はみ出た部分を非表示) */
  overflow: hidden; 

  /* 画像が歪まないように調整し、中央をトリミング */
  object-fit: cover; 
  
  /*アイコンだった時と同じように、下の要素との間にマージンを入れる */
  margin-bottom: 10px; 
  
  /* 中央揃えにするため、ブロック要素にして左右のマージンを auto にする */
  display: block; 
  margin-left: auto;
  margin-right: auto;
}

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

	.conB .text	{
	flex: 1;
	}
}

/* ====================
   コンテンツE：（テキスト+写真）
   ==================== */

.conE .container {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding: 20px 10px 10px 10px; 
	font-family: 'Montserrat';
	color: #FFFFFF;
 	text-align: center;
 } 

.conE h1 {
	margin-top: 0;
	margin-bottom: 0px;
	font-size: 20px;
	text-align: center;
	color: #FFFFFF;
	/* 背景色 */
	background-color: #8C4DFF;
	border-radius: 6px;
	padding: 5px 10px;
}
 
.conE .title {
  position: relative;
  display: inline-block;
  font-weight:bold;
  background: #a2dffe;
  box-shadow: 0px 0px 0px 5px #a2dffe;
  border: dashed 2px #fff;
  margin: 0 auto 50px;
  padding: 5px 10px 5px 10px;
  text-align: center;
}

.conE .title :after {
  text-align: center;
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: #fff #fff #4ea5f9;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}


.conE .text {
  margin: 10px;
  padding: 10px;
  color: #646464;
  border-radius: 20px;
  background-color: rgba(243,159,255,0.08);
}

.conE h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 20px;
	color: #646464;
}

.conE p {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 15px;
	line-height: 1.8;
	opacity: 0.8;
	color: #646464;
}

.conE a {
	display: inline-block;
	margin-top: 20px;
	padding: 10px 30px;
	box-shadow: 0 0 0 1px #888;
	border: solid 3px currentColor;
	border-radius: 6px;
	background-color: #7C63FF;
	color: #fff;
	font-size: 14px;
	text-decoration: none;
}

.conE a:hover	{
	background-image: linear-gradient(
	rgba(255,255,255,0.2),
	rgba(255,255,255,0.2)
	);
}

.conE .photo {
	min-height: 200px;
	background-position: center;
	background-size: cover;
	margin: 10px;
	border-radius: 6px;
}

@media (min-width: 768px) {
	.conE .container_l {
	display: flex;
	max-width: 1000px;
	padding: 10px 20px; 
	margin-left: auto;
	margin-right: auto;
	}
 

@media (min-width: 768px) {
	.conE .container_r {
	display: flex;
	flex-direction: row-reverse;
	max-width: 1000px;
	padding: 10px 20px; 
	margin-left: auto;
	margin-right: auto;
	}
}
	.conE .photo {
		flex: 0 0 400px;
	}

	.conE .text {
		flex: 2;
		padding: 50px;
	}
}


/* ====================
   フッター (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: 12px;
		opacity: 0.5;
		cursor: pointer;
	}

	.headC:hover {
		opacity: 0.3;
	}

	.headB {
		display: none;
	}
}

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

	.headB {
		display: block !important;
	}
}

	
/* 【モバイルメニュー展開時のスタイル (トグルボタン展開時の崩れ対策) 】*/
    .headB.active {
       display: block !important; /* 👈 重要: slideToggleによるinline styleを上書き */
        position: absolute;
        top: 45px; 
        left: 0;
        width: 100%; 
        background-color: rgba(0, 0, 0, 0.9);
        text-align: center;
        padding: 10px 0;
    }
    .headB.active ul {
        flex-direction: column;
        align-items: center;
    }
    .headB.active li {
        width: 100%;
        padding: 5px 0;
    }
	
	.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: #333;
    }

	.headC:hover {
		opacity: 0.5;
	}

	.headB {
		display: none;
	}



/* ====================
   コンテンツページ: 記事
   ==================== */
.post .container {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding: 20px 10px 10px 10px; 
	font-family: 'Montserrat';
	color: #646464;
	text-align: center;

	}

.post h1 {
	margin: 10px 0px 10px 0px;
	font-size: 20px;
	text-align: center;
	color: #FFFFFF;
	/* 背景色 */
	background-color: #8C4DFF;
	border-radius: 6px;
	padding: 10px 0px 10px 0px;
}

.post p {
	margin: 10px 0px 10px 0px ;
	padding: 10px 20px 10px 20px ;
	color: #646464;
	border-radius: 10px;
	background-color: rgba(243,159,255,0.08);
	text-align: left;
}

.post img {
	max-width: 100%;
	margin: 0px 0px 0px 0px ;
	border-radius: 10px;
	
}


/* ====================
   記事一覧B listB
   ==================== */


.listB h1 {
	text-align: center;
}

.listB span {
	font-size: 1.3em;
	font-weight: bold;
}

.highlight-bg {
	background-color: #8E5BFF;
	padding: 0.1em 0.2em;
	border-radius: 0.3em;
	color: #FFFFFF;
}

.highlight-bg2 {
	background-color: #FF8DEB;
	padding: 0.1em 0.2em;
	border-radius: 0.3em;
	color: #FFFFFF;
}

.listB .container {
	display: flex;
	flex-wrap: wrap;
	max-width: 1000px;
	margin: 30px auto;
}

.listB article {
	flex: 1 1 384px;
	display: flex;
}

.listB a {
	flex: 1;
	margin: 10px;
	display: flex;
	border: solid 1px #ddd;
	color: inherit;
	text-decoration: none;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 柔らかい影を追加 */
}

.listB .photo {
	flex: 0 0 100px; /* flex-grow, flex-shrinkを0に設定し、高さを100pxに固定 */
	min-height: 90px; /* 高さが確実に適用されるようにする */
	min-width: 220px; /* ここを修正・追加 */
	background-position: center;
	background-size: cover;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 柔らかい影を追加 */
}

.listB .text {
	flex: 3;
	margin: 10px;
}

.listB h2 {
	font-size: 13px;
	color: #8147FF
}

.listB p {
	font-size: 11px;
	opacity: 0.8;
	color: #606060
}

@media (max-width: 384px) {
.listB .photo {
	flex: 1;
	}

.listB p {
	display: none;
	margin: 30px;
	}
}


/* ====================
   記事一覧C
   ==================== */

.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%;
	}
}

/* ====================
   ご挨拶、祝辞　listM
   ==================== */
.listM .container {
	display: flex;
	flex-direction: column; /* 要素を縦に並べる */
	align-items: center; /* 中央揃えにする */
	flex-wrap: wrap;
	max-width: 1000px;
	padding-top: auto;
	margin: auto;
	
}

.listM article {
	display: flex;
	flex-wrap: wrap; /* 要素が収まらない場合に折り返す */
	width: 100%;
	padding: 10px; /* 全体に余白を追加 */
}

/* 写真のスタイルを調整 */
.listM .photo1,
.listM .photo2 {
	float: none;
	max-width: 100%; /* 親要素の幅に合わせて最大サイズを調整 */
	height: auto;
	border-radius: 4%;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	margin: 32px 20px 15px 20px;
}

/* 著者情報の配置 */
.listM p3 {
	float: none;
	text-align: left;
	margin: 10px 0;
}

.listM .photo1 {
	max-width: 30%;
	height: auto;
	background-position: right;
	background-size: cover;
	border-radius: 4%;
	float: right;
 	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 柔らかい影を追加 */
	margin-top: 26px;
	margin-left: 20px; /* 左余白を統一 */
	margin-right: 20px;
}

.listM .photo2 {
	max-width: 30%;
	height: auto;
	background-position: left;
	background-size: cover;
	border-radius: 4%;
	float: left;
 	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 柔らかい影を追加 */
	margin-top: 26px;
	margin-left: 20px; /* 左余白を統一 */
	margin-right: 20px;
}

.line {
	border-top: 6px solid rgba(157,87,255,0.30);
	margin: 6px 0px 0px 0px;
}

.horizontal-gradient {
	background: linear-gradient(to right, rgba(157,87,255,0.24), rgba(255,87,212,0.12));
	width: 100%;
	height: 6px;
 	margin: 0px 30px 10px 0px;
}

.listM .message-body {
	margin: 10px 0px 20px 0px; /* 左右に余白を追加 */
	line-height: 1.5; /* 行間を調整して読みやすくする */
	background-image: linear-gradient(to bottom, #FFEFF5, #FFFAF1);
	padding: 20px;
	border-radius: 1%;
	text-align: left;
}

.listM p1 {
	color: #9D57FF;
	text-align:left;
	font-family: 'Noto Sans JP';
	font-size: 15px;
	line-height: 1.5em;
	}

.listM p3 {
	font-size: 16px;
	line-height: 1.5em;
	text-align:left;
	font-family: 'Noto Sans JP';
	}

.listM a {
	flex: 1;
	margin: 10px;
	padding-top: 0px;
	display: block;
	color: inherit;
	text-decoration: none;
	font-size: 14px;
	line-height: 1.5em;
}


/* アレンジ: ヘッダーの色 */
.head-color {
	background-color: #66CBE5;
	color: #fff;
}

.head-color .headA {
	background-color: transparent;
	color: inherit;
}

.head-color .headC {
	color: inherit;
}


/* アレンジ: ヘッダーとヒーローイメージを一体化 */
.head-hero {
	background-color: transparent;
	color: #fff;
	color: var(--text-bright-color);
}

.head-hero .headA {
	background-color: transparent;
	color: inherit;
}

.head-hero .headC {
	color: inherit;
	opacity: 1;
}

@media (max-width: 767px) {
	.head-hero .headB {
		background-color: rgba(0,0,0,0.6);
	}
}

/* アレンジ: ヘッダーを画面上部に固定 */
.head-fixed,
.nohero .head-fixed {
	position: fixed;
}

.nohero .head-fixed + * {
	margin-top: 70px;
}

/* アレンジ: 関連記事メニュー */
.related {
	background-color: #66CBE5;
	padding: 30px 0;
}

.related ul {
	display: flex;
	flex-wrap: wrap;
	max-width: 1000px;
	margin: 0 10px;
	padding: 0;
	list-style: none;
}

.related li {
	flex: 1 1 100%;
	display: flex;
}

.related a {
	flex: 1;
	margin: 10px;
	display: block;
	border: solid 1px #ddd;
	background-color: rgba(255,255,255,0.5);
	color: inherit;
	text-decoration: none;
}

.related a:hover {
	opacity: 0.8;
}

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

.related .text {
	margin: 10px;
}

.related h2 {
	font-size: 18px;
}

.related p {
	font-size: 14px;
	opacity: 0.8;
}

@media (min-width: 600px) and (max-width: 899px) {
	.related li {
		flex: 1 1 50%;
	}
}

@media (min-width: 900px) {
	.related li {
		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; 
}
}