@charset "utf-8";



/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
/* 追加：手書き風フォント（Yomogi） */
@import url('https://fonts.googleapis.com/css2?family=Yomogi&display=swap');
/* 既存のフォントにMontserratを追加 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,700&display=swap');

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/* 柔らかいフォント（女子力アップ！） */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=M+PLUS+Rounded+1c:wght@400;500&display=swap');
/*cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("inview.css");


/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {

	--bg-color: #fff;			/*主にテンプレートの背景色*/
	--bg-inverse-color: #777;	/*上のカラーの「対」として使う色*/
	
	--primary-color: #f69a91;		/*メインまたはアクセントカラー*/
	--primary-inverse-color: #fff;	/*上のカラーの「対」として使う色*/

	--light-color: #fde6e3;			/*淡いカラー*/
	--light-inverse-color: #777;	/*上の淡いカラーの「対」として使う色*/

	--accent-color: #b39ad0;		/*アクセントカラー*/
	--accent-inverse-color: #fff;	/*上のカラーの「対」として使う色*/

	--content-space-l: 5vw;  /*主に左右の余白の一括管理用。画面幅100% = 100vwです。*/
	--content-space-s: 2rem;  /*headerやfooter、２カラム以上のレイアウトで主に使います*/

	--border-color: rgba(0,0,0,0.18);	/*枠線の色。0,0,0は黒の事で0.18は色が18%出た状態。*/

	--base-font: "M PLUS Rounded 1c", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;  /*フォント指定*/
	--accent-font: "Quicksand";  /*アクセント用英語フォント指定*/

}

	/*画面幅500px以下の追加指定*/
	@media (max-width:500px) {

	:root {
		--content-space-l: 10px;	/*余白の一括管理用。小さな端末で余白を狭くする。*/
	}

	}/*追加指定ここまで*/


/*animation11のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {right: -200px;}
	100% {right: 0px;}
}


/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
html {
	font-size: clamp(12px, 0.488vw + 10.17px, 17px);	/*画面幅約375px〜1400pxの間で、12px〜17pxに可変*/
	overflow-x: visible;
}
body {
	margin: 0;padding:0;
	font-family: var(--base-font);	/*フォント指定。css冒頭のbase-fontを読み込みます。*/
	-webkit-text-size-adjust: none;
	background: var(--bg-color);	/*背景色。css冒頭のbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*文字色。css冒頭のbg-inverse-colorを読み込みます。*/
	line-height: 2;		/*行間*/
	overflow-x: hidden;
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*他*/
input {font-size: 1rem;}


/*section
---------------------------------------------------------------------------*/
section {
	padding: 0 var(--content-space-l);	/*上下、左右へのsection内の余白。左右については、css冒頭の--content-space-lを読み込みます。*/
	margin: var(--content-space-l) 0;	/*上下、左右へのsectionの外側にとるマージン。上下については、css冒頭の--content-space-lを読み込みます。*/
}

/*section間のマージンを消したい場合用。1つ目のsectionにだけclass="mb0"を追加する。*/
section.mb0 {margin-bottom: 0;}
section.mb0 + section {margin-top: 0;}

/* マウスが使える環境（PC）のみホバーを有効にする */
@media (hover: hover) {
  .text-logo:hover {
    opacity: 0.7;
    cursor: pointer;
  }
}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: inherit;
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
	filter: brightness(1.1);	/*少しだけ明るくする*/
	text-decoration: none;
}


/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	animation: opa1 0.2s 0.2s both;  /*0.2(2つ目の数字)秒待機後、0.2(1つ目の数字)秒かけてフェードイン*/
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}


/*contents
---------------------------------------------------------------------------*/
#contents {
	flex: 1;
	min-height: 0;
    padding: 0px 0; /* この数値が大きければ小さくします */
}



/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
header {
	position: relative;
}

/*ロゴ画像*/
#logo img {display: block;}
#logo {
	width: 250px;	/*ロゴの幅。お好みで。*/
	margin: 1.5rem auto;	/*上下に1.5文字分のスペースを空ける*/
}

/*トップページのロゴ*/
body.home #logo {
	margin: 0;
	position: absolute;z-index: 1;
	top: 48%;	/*上からの配置バランス。お好みで。*/
	left: 50%;
	transform: translate(-50%, -50%);
	width: 35vw;	/*ロゴの幅。お好みで。*/
}


/*メイン画像
---------------------------------------------------------------------------*/
.mainimg * {margin: 0;padding: 0;}


/* --- メイン画像エリアの調整 --- */
/* メイン画像エリアの調整 */
.mainimg {
    width: 100%;
    height: 40vh; /* スマホで見やすい高さに設定 */
    overflow: hidden; 
    position: relative;
    
}

/* 198行目と209行目を統合し、このように1箇所にまとめる */
/* .mainimg クラスのついた要素の中に video があるなら、以下で指定します */
.mainimg .bgVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* スマホでは高さをさらに調整したい場合 */
@media screen and (max-width: 800px) {
    .mainimg {
        height: fit-content; /* スマホでは少しコンパクトに */
    }
}

/*ヘッダー直下のメニュー（※開閉メニューとはブロックが異なります）
---------------------------------------------------------------------------*/
/*メニューブロック全体の設定*/
#menubar2 {
	font-family: var(--accent-font), var(--base-font);
	font-weight: 500;
	font-size: 1.1rem;	/*文字の大きさ。1.1倍。*/
}
#menubar2 > nav > ul {
	display: flex;
}

	/*画面幅800px以下の追加指定*/
	@media screen and (max-width:800px) {

	#menubar2 {
		display: none;	/*非表示に*/
	}

	}/*追加指定ここまで*/


/*メニュー１個あたりの設定*/
#menubar2 li {
	flex: 1;
	text-align: center;
	position: relative;
	letter-spacing: 0.05em;
}
#menubar2 li a {
	display: block;text-decoration: none;
	background: var(--primary-color);		/*背景色。冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
	padding: 0.5rem;	/*メニュー内の余白。0.5文字分。*/
}

/*小文字*/
#menubar2 span {
	display: block;
	font-weight: normal;
	opacity: 0.7;		/*色を70%だけ出す。*/
	font-size: 0.6em;	/*文字サイズを親要素の60%*/
}

/*ヘッダー直下のメニューのドロップダウンメニュー（※開閉メニューとはブロックが異なります）*/
#menubar2 ul ul {
	position: absolute;z-index: 100;
	animation: opa1 0.5s 0.1s both;	/*0.1秒待機後、0.5秒かけてフェードイン表示*/
	width: 100%;
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*メニュー１個あたり*/
#menubar2 ul ul a {
	display: block;
}


/*小さな端末で見たメニュー（開閉メニュー）
---------------------------------------------------------------------------*/
.small-screen #menubar .logo {
	max-width: 120px;
	margin: 0 auto 3rem;
}

/*メニューブロック共通*/
.small-screen #menubar {
	animation: animation1 0.2s both;
	position: fixed;overflow: auto;z-index: 100;
	right: 0px;top: 0px;
	width: 60%;
	height: min-content;
	padding: 50px var(--content-space-l);	/*上下に50px、左右にcss冒頭のcontent-space-lで指定しているサイズ分の余白*/
	background: var(--primary-color);			/*背景色。css冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);		/*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
	font-weight: 500;
	font-size: 1.3rem;	/*文字の大きさ。1.1倍。*/
}

.small-screen #menubar {display: none;}

/*メニュー１個あたり*/
.small-screen #menubar a {
	display: block;text-decoration: none;
	background: var(--bg-color);		/*背景色。css冒頭のbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);		/*文字色。css冒頭のbg-inverse-colorを読み込みます。*/
	margin-bottom: 1rem;	/*下に１文字分のスペースを空ける*/
	padding: 1rem 2rem;		/*メニュー内の余白。上下に１文字分、左右に２文字分。*/
	border-radius: 5px;		/*角を少し丸くする*/
}

/*小文字*/
.small-screen #menubar span {
	display: block;
	font-weight: normal;
	opacity: 0.9;		/*色を70%だけ出す。*/
	font-size: 0.8em;	/*文字サイズを親要素の60%*/
}

/*子メニュー（ドロップダウンメニュー）*/
.small-screen #menubar ul ul a {
	border: none;
	margin-left: 2rem;		/*左に２文字分のスペースを空ける*/
	padding: 0.5rem 1.5rem;	/*メニュー内の余白。上下に0.5文字分、左右に1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

a.ddmenu span {
	margin-left: 2.5em;
}
/*ドロップダウンのアイコン*/
a.ddmenu::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f078";		/*このアイコンを使う*/
	margin-right: 1em;		/*アイコンとメニューテキストとの間に空けるスペース。1文字分。*/
	font-size: 0.7em;		/*アイコンサイズ。70%*/
	vertical-align: middle;
	display: inline-block;
	line-height: 1;
}


/*ドロップダウン共通（デフォルトで非表示。チラつかないよう念の為。）
---------------------------------------------------------------------------*/
#menubar ul ul {display: none;}

/* 可愛い丸いメニューボタン */
#menubar_hdr {
    display: none;
    cursor: pointer;
    position: fixed;
    z-index: 101;
    right: 20px;    /* 画面端から少し離す */
    top: 20px;
    width: 65px;
    height: 65px;
    background: #ffb6c1; /* 可愛いパステルピンク */
    border-radius: 50%; /* 丸くする */
    box-shadow: 0 4px 10px rgba(255, 182, 193, 0.6); /* ふわっとした影 */
    transition: 0.3s;
    justify-content: center;
    align-items: center;
}

/* 線の位置と見た目 */
#menubar_hdr span {
    display: block;
    position: absolute;
    width: 30px;
    height: 3px;
    background: #fff; /* 白い線 */
    border-radius: 2px;
    transition: 0.3s;
}

#menubar_hdr span:nth-of-type(1) { top: 22px; }
#menubar_hdr span:nth-of-type(2) { top: 32px; }
#menubar_hdr span:nth-of-type(3) { top: 42px; }

/* ボタンが押された時（メニュー開閉時） */
#menubar_hdr.ham {
    background: #ff69b4; /* 濃いピンクに変化 */
}

/* バツ印のアニメーション */
#menubar_hdr.ham span:nth-of-type(1) {
    top: 32px;
    transform: rotate(45deg);
}
#menubar_hdr.ham span:nth-of-type(2) {
    opacity: 0;
}
#menubar_hdr.ham span:nth-of-type(3) {
    top: 32px;
    transform: rotate(-45deg);
}
/*小さな画面での設定*/
.small-screen #menubar_hdr {
	display: flex;
}


/*main
---------------------------------------------------------------------------*/
main {
	container-type: inline-size;
}

/*main内で使用するul,ol要素（リストタグ）*/
main ul,main ol {
	margin-left: 2rem;
	margin-right: 2rem;
}

/*main内で使用するh2見出し*/
main h2 {
	font-size: 2rem;	/*文字サイズ2倍*/
	font-family: var(--accent-font), var(--base-font);
	font-weight: 500;	/*文字の太さ。300〜700まで指定可能。*/
	text-align: center;	/*テキストをセンタリング*/
}

/*見出し内のspan（小さい文字）*/
main h2 span {
	display: flex;
	font-size: 0.8em;	/*上のh2の文字サイズの40%*/
	opacity: 0.9;		/*色を50%だけ出す*/
}


/*著作部分（※意図的に見えなくしたりしないで下さい。規約違反になります。）
---------------------------------------------------------------------------*/
.pr a {
	text-decoration: none;display: block;
	background: rgba(0,0,0,0.5);
	color: #ccc;
	text-align: right;
	padding: 0.5rem 1rem;
	font-size: 0.8rem;
}
.pr a::before {
	font-family: "Font Awesome 6 Free";
	content: "\e2ca";
	font-weight: 900;
	margin-right: 0.5em;
}


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	animation: opa1 1s 0.4s both;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}


/*list-mask1（カラムブロック）New Arrivalsのセクションに使用。
---------------------------------------------------------------------------*/
.list-mask1 * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-mask1 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));	/*4列*/
	gap: 3rem;	/*ボックスの間に空けるスペース。3文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

	/*@container対応ブラウザ向け。コンテナ幅(この場合はmain)が899px以下では2カラム*/
    @container (max-width: 899px) {
        .list-mask1 {	grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }


/*ボックス１個あたり*/
.list-mask1 .list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	overflow: hidden;
}

/*テキストボックス*/
.list-mask1 .list .text {
	flex: 1;
}

.list-mask1 .list .text h4,
.list-mask1 .list .text p {
  text-shadow: 0 0 10px rgba(247, 245, 245, 0.8); /* 文字に黒い影をつける */
  color: #090909; /* 文字色を白にする（背景が暗い場合） */
}

/*h4見出し*/
.list-mask1 h4 {
	text-align: center;	/*テキストをセンタリング*/
}

/*説明だけ小さめにする*/
.list-mask1 .list .text h4,
.list-mask1 .list p {
	font-size: 1.3em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*画像*/
.list-mask1 figure {
	aspect-ratio: 1 / 1;   /* アスペクト比1:1の正方形 */
}
.list-mask1 figure img {
	transition: 0.5s;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*画像にリンクがある場合のみ110%に拡大*/
.list-mask1 figure a img:hover {
	transform: scale(1.1);
}


	/* マスク対応ブラウザだけ「切り抜き」に切り替え */
	@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {

	.list-mask1 figure {
		overflow: hidden;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
		-webkit-mask-size: 100% 100%;
		mask-repeat: no-repeat;
		mask-position: center;
		mask-size: 100% 100%;
		/* 明示的に透過（アルファ）でマスクする指定を追加 */
		-webkit-mask-source-type: alpha;
		mask-mode: alpha;
	}

	.list-mask1 .list.mask1 figure {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M934.9,934.9c-107.3,107.3-294.2,49.6-434.9,49.6s-327.5,57.7-434.9-49.6C-42.2,827.5,15.5,640.7,15.5,500S-42.2,172.5,65.1,65.1C172.5-42.2,359.3,15.5,500,15.5s327.5-57.7,434.9,49.6c107.3,107.3,49.6,294.2,49.6,434.9s57.7,327.5-49.6,434.9Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M934.9,934.9c-107.3,107.3-294.2,49.6-434.9,49.6s-327.5,57.7-434.9-49.6C-42.2,827.5,15.5,640.7,15.5,500S-42.2,172.5,65.1,65.1C172.5-42.2,359.3,15.5,500,15.5s327.5-57.7,434.9,49.6c107.3,107.3,49.6,294.2,49.6,434.9s57.7,327.5-49.6,434.9Z'/%3E%3C/svg%3E");
	}

	.list-mask1 .list.mask2 figure {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M885.9,885.9c-52.7,57.7-122.9,82.5-189.6,96.8-67.7,13.7-132,17-196.2,17.3-64.3-.3-128.5-3.6-196.3-17.3-66.7-14.3-137-39.1-189.6-96.8-57.7-52.7-82.5-122.9-96.8-189.6C3.6,628.5.3,564.3,0,500c.3-64.3,3.6-128.5,17.3-196.3,14.3-66.7,39.1-137,96.8-189.6,52.7-57.7,122.9-82.5,189.6-96.8C371.5,3.6,435.7.3,500,0c64.3.3,128.5,3.6,196.3,17.3,66.7,14.3,137,39.1,189.6,96.8,57.7,52.7,82.5,122.9,96.8,189.6,13.7,67.7,17,132,17.3,196.2-.3,64.3-3.6,128.5-17.3,196.3-14.3,66.7-39.1,137-96.8,189.6h0Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M885.9,885.9c-52.7,57.7-122.9,82.5-189.6,96.8-67.7,13.7-132,17-196.2,17.3-64.3-.3-128.5-3.6-196.3-17.3-66.7-14.3-137-39.1-189.6-96.8-57.7-52.7-82.5-122.9-96.8-189.6C3.6,628.5.3,564.3,0,500c.3-64.3,3.6-128.5,17.3-196.3,14.3-66.7,39.1-137,96.8-189.6,52.7-57.7,122.9-82.5,189.6-96.8C371.5,3.6,435.7.3,500,0c64.3.3,128.5,3.6,196.3,17.3,66.7,14.3,137,39.1,189.6,96.8,57.7,52.7,82.5,122.9,96.8,189.6,13.7,67.7,17,132,17.3,196.2-.3,64.3-3.6,128.5-17.3,196.3-14.3,66.7-39.1,137-96.8,189.6h0Z'/%3E%3C/svg%3E");
	}

	.list-mask1 .list.mask3 figure {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M1000,494.5c0,68.1-11.8,136.6-36,195.8-25.2,61.4-73.5,110.1-119.3,156.3-45.7,46.2-96.8,88.2-157.5,113.7-58.5,24.5-123.5,39.7-190.9,39.7s-128.5-24.5-187-49c-60.7-25.4-121.4-52.2-167.2-98.4-45.7-46.2-76.4-105.9-101.5-167.2C16.3,626.1,0,562.6,0,494.5s18.7-130.7,42.9-189.9c25.2-61.4,54.9-120.5,100.6-166.8,45.7-46.2,102.4-80.9,163.1-106.3C365.2,7,429,0,496.3,0s131.9,5.1,190.5,29.6c60.7,25.4,119.6,59,165.3,105.2,45.7,46.2,75.2,107.3,100.4,168.7s47.5,122.9,47.5,191Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M1000,494.5c0,68.1-11.8,136.6-36,195.8-25.2,61.4-73.5,110.1-119.3,156.3-45.7,46.2-96.8,88.2-157.5,113.7-58.5,24.5-123.5,39.7-190.9,39.7s-128.5-24.5-187-49c-60.7-25.4-121.4-52.2-167.2-98.4-45.7-46.2-76.4-105.9-101.5-167.2C16.3,626.1,0,562.6,0,494.5s18.7-130.7,42.9-189.9c25.2-61.4,54.9-120.5,100.6-166.8,45.7-46.2,102.4-80.9,163.1-106.3C365.2,7,429,0,496.3,0s131.9,5.1,190.5,29.6c60.7,25.4,119.6,59,165.3,105.2,45.7,46.2,75.2,107.3,100.4,168.7s47.5,122.9,47.5,191Z'/%3E%3C/svg%3E");
	}

	.list-mask1 .list.mask4 figure {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M909.8,500c244.8,361.6-48.3,654.7-409.8,409.8-361.6,244.8-654.7-48.3-409.8-409.8C-154.7,138.4,138.4-154.7,500,90.2c361.6-244.8,654.7,48.3,409.8,409.8Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M909.8,500c244.8,361.6-48.3,654.7-409.8,409.8-361.6,244.8-654.7-48.3-409.8-409.8C-154.7,138.4,138.4-154.7,500,90.2c361.6-244.8,654.7,48.3,409.8,409.8Z'/%3E%3C/svg%3E");
	}

	.list-mask1 .list.mask5 figure {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M691.6,500.5c0,33.2-25,60-40.6,86.9-16,27.7-27.3,62.6-55,78.6-26.8,15.5-62.3,8.3-95.6,8.3s-68.7,7.3-95.6-8.3c-27.7-16-38.9-50.9-55-78.6-15.5-26.8-40.6-53.7-40.6-86.9s25-60,40.6-86.9c16-27.7,27.3-62.6,55-78.6,26.8-15.5,62.3-8.3,95.6-8.3s68.7-7.3,95.6,8.3c27.7,16,38.9,50.9,55,78.6,15.5,26.8,40.6,53.7,40.6,86.9Z'/%3E%3Cpath fill='black' d='M1000,500c0,92.7-39.8,175.2-81.7,250-43.2,77.2-93.7,153.6-168.3,198.3-72.3,43.3-160.5,51.6-250,51.6s-177.7-8.3-250-51.6c-74.6-44.7-125.2-121.1-168.3-198.3C39.8,675.2,0,592.7,0,500s39.8-175.2,81.7-250c43.2-77.2,93.7-153.6,168.3-198.3C322.3,8.3,410.5,0,500,0s177.7,8.3,250,51.6c74.6,44.7,125.2,121.1,168.3,198.3,41.8,74.8,81.7,157.3,81.7,250Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M691.6,500.5c0,33.2-25,60-40.6,86.9-16,27.7-27.3,62.6-55,78.6-26.8,15.5-62.3,8.3-95.6,8.3s-68.7,7.3-95.6-8.3c-27.7-16-38.9-50.9-55-78.6-15.5-26.8-40.6-53.7-40.6-86.9s25-60,40.6-86.9c16-27.7,27.3-62.6,55-78.6,26.8-15.5,62.3-8.3,95.6-8.3s68.7-7.3,95.6,8.3c27.7,16,38.9,50.9,55,78.6,15.5,26.8,40.6,53.7,40.6,86.9Z'/%3E%3Cpath fill='black' d='M1000,500c0,92.7-39.8,175.2-81.7,250-43.2,77.2-93.7,153.6-168.3,198.3-72.3,43.3-160.5,51.6-250,51.6s-177.7-8.3-250-51.6c-74.6-44.7-125.2-121.1-168.3-198.3C39.8,675.2,0,592.7,0,500s39.8-175.2,81.7-250c43.2-77.2,93.7-153.6,168.3-198.3C322.3,8.3,410.5,0,500,0s177.7,8.3,250,51.6c74.6,44.7,125.2,121.1,168.3,198.3,41.8,74.8,81.7,157.3,81.7,250Z'/%3E%3C/svg%3E");
	}

	.list-mask1 .list.mask6 figure {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpolygon fill='black' points='1000 500 957.3 566.4 979.9 642.3 920.3 693.9 920.7 773.1 849.1 805.6 827.4 881.7 749.8 892.6 707.8 959.5 630.2 947.8 571.2 1000 500 966.6 428.9 1000 369.8 947.8 292.2 959.5 250.2 892.6 172.6 881.7 150.9 805.6 79.3 773.1 79.7 693.9 20.1 642.3 42.7 566.4 0 500 42.7 433.6 20.1 357.7 79.7 306.1 79.3 226.9 150.9 194.4 172.6 118.3 250.2 107.4 292.2 40.5 369.8 52.2 428.8 0 500 33.4 571.1 0 630.2 52.2 707.8 40.5 749.8 107.4 827.4 118.3 849.1 194.4 920.7 226.9 920.3 306.1 979.9 357.7 957.3 433.6 1000 500'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpolygon fill='black' points='1000 500 957.3 566.4 979.9 642.3 920.3 693.9 920.7 773.1 849.1 805.6 827.4 881.7 749.8 892.6 707.8 959.5 630.2 947.8 571.2 1000 500 966.6 428.9 1000 369.8 947.8 292.2 959.5 250.2 892.6 172.6 881.7 150.9 805.6 79.3 773.1 79.7 693.9 20.1 642.3 42.7 566.4 0 500 42.7 433.6 20.1 357.7 79.7 306.1 79.3 226.9 150.9 194.4 172.6 118.3 250.2 107.4 292.2 40.5 369.8 52.2 428.8 0 500 33.4 571.1 0 630.2 52.2 707.8 40.5 749.8 107.4 827.4 118.3 849.1 194.4 920.7 226.9 920.3 306.1 979.9 357.7 957.3 433.6 1000 500'/%3E%3C/svg%3E");
	}

	}/*追加指定ここまで*/


/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むブロック*/
.slideimg {
	overflow-x: hidden;
}

/*スライドショーが２段続く場合に、上下間に2文字分のスペースを空ける。*/
.slideimg + .slideimg {
	margin-top: 2rem;
}

/*画像たちを囲むブロック*/
.slideimg .img {
	display: flex;
	overflow: hidden;
}

/*段違いに配置（偶数版目だけ上に3文字分のスペースをとる）*/
.slideimg .img div:nth-of-type(even) {
	margin-top: 3rem;
}

/*画像1個あたり*/
.slideimg .img > div {
	padding: 0 0.5rem;	/*左右で合計1remぶんの見た目余白*/
}

/*右から左へ、左から右へ、のアニメーション*/
.slideimg .rtl, .slideimg .ltr {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.slideimg .rtl {animation-name: slide-rtl;}
.slideimg .ltr {animation-name: slide-ltr;}

@keyframes slide-rtl {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}


/*overlay2（Collectionのセクションで使用）
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.overlay2 .list {
	position: relative;
	overflow: hidden;
	margin-bottom: 1px;	/*下に1pxのスペース*/
}
.overlay2 a {text-decoration: none;}

/*テキストブロック*/
.overlay2 .text {
	position: relative;z-index: 1;
	color: #fff;	/*文字色*/
	text-shadow: 1px 1px 2px rgba(0,0,0,0.5);	/*文字の影。右へ、下へ、ぼかす量、0,0,0は黒のことで0.5は色が50%出た状態。*/
	padding: 5vw;	/*余白。画面はば100% = 100vwです。*/
	width: 60%;		/*幅*/
}

/*テキストブロックの背景の部分（すりガラス風）*/
.overlay2 .text::before {
	content: "";position: absolute;inset: 0;z-index: -1;
	transition: transform 0.3s 0.1s;	/*アニメーションの速度（0.3秒）と待機時間（0.1秒）。*/
	background: rgba(0,0,0,0.15);	/*背景色。255,255,255は白のことで0.15は色が15%出た状態。*/
	border: 1px solid rgba(255,255,255,0.3);	/*内側に1pxの半透明の白い線を入れる*/
	box-shadow: 0 20px 60px rgba(0,0,0,0.5);	/*ボックスの影*/
	-webkit-backdrop-filter: blur(10px);	/*後ろをぼかす。10pxがぼかしの量。お好みで。*/
	backdrop-filter: blur(10px);			/*同上*/
}

/*マウスオンですりガラスを左側へ出す*/
.overlay2 .list:hover .text::before {
	transform: translateX(-100%);
}

/*マウスオンですりガラスを右側へ出す*/
.overlay2 .list.reverse:hover .text::before {
	transform: translateX(100%);
}

/*逆向き（テキスト右配置）*/
.overlay2 .list.reverse .text {
	margin-left: auto;
}

/*h4見出し*/
.overlay2 .text h4 {
	font-family: var(--accent-font), var(--base-font);
	font-size: min(40px, 5vw);	/*基本は5vwで、最大56pxまで*/
	margin-top: 0;
	margin-bottom: 1.5rem;	/*下に1.5文字分のスペースを空ける*/
	font-weight: 500;
}

/*段落（p）*/
.overlay2 .text p {
	font-size: 0.85rem;	/*文字サイズ85%*/
}

/*1つ目（左）の背景画像*/
.overlay2 .image1 {
	background: url("../images/img3.jpg") no-repeat center center / cover;
}

/*2つ目（右）の背景画像*/
.overlay2 .image2 {
	background: url("../images/img5.jpg") no-repeat center center / cover;
}


/*list-yoko-scroll2
---------------------------------------------------------------------------*/
/*全体を囲むボックス*/
.list-yoko-scroll2 {
	position: relative;
	height: 300vh;		/*縦スクロール量（この高さ分スクロールすると横が端まで動く）*/
}

/*横スクロールブロック*/
.list-yoko-scroll2 .hscroll1-sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	height: 100dvh;
	overflow: hidden;
}
.list-yoko-scroll2 .hscroll1-track {
	display: flex;
	height: 100%;
	padding-block: 1rem;	/*ブロック内の上下に空ける余白。1文字分。*/
	will-change: transform;
}

/*各画像*/
.list-yoko-scroll2 .hscroll1-track > div {
	flex-shrink: 0;
	width: 45vw;	/*1枚あたりの幅（画面幅の45%）*/
	height: 100%;
	padding-inline: 0.5rem;	/*画像同士に1文字分のスペースを空ける*/
}
.list-yoko-scroll2 .hscroll1-track > div img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 5px;	/*角を丸区する指定。*/
}

/*スキップボタン*/
.list-yoko-scroll2 button[aria-label="skip gallery"] {
	position: absolute;
	bottom: 2rem;	/*下からの2文字分の場所に配置*/
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	background: rgba(0,0,0,0.5);	/*背景色。0,0,0は黒のことで0.5は色が50%出た状態。*/
	color: #fff;					/*文字色。*/
	border: none;
	padding: 0.5rem 2rem;			/*上下に0.5文字分、左右に2文字分の余白*/
	font-size: 0.8rem;				/*文字サイズ80%*/
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;	/*表示切替のアニメーション*/
}
.list-yoko-scroll2 button[aria-label="skip gallery"].is-visible {
	opacity: 1;
	visibility: visible;
}
/*下矢印のアイコン（Font Awesome）*/
.list-yoko-scroll2 button[aria-label="skip gallery"] i {
	margin-left: 0.3em;	/*テキストとアイコンとの間に空けるスペース。0.3文字分。*/
	font-size: 0.7rem;	/*アイコンサイズ70%*/
}

/*進捗バー*/
.list-yoko-scroll2 .hscroll1-progress {
	position: absolute;
	bottom: max(16px, env(safe-area-inset-bottom));	/*下からの配置場所*/
	left: 0;
	width: 100%;
	height: 3px;	/*バーの太さ*/
	z-index: 2;
	background: var(--border-color);	/*バーのベース色。theme.cssのborder-colorを読み込みます。*/
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;	/*表示切替のアニメーション*/
}
.list-yoko-scroll2 .hscroll1-progress.is-visible {
	opacity: 1;
	visibility: visible;
}
.list-yoko-scroll2 .hscroll1-progress-bar {
	height: 100%;
	width: 0%;
	background: var(--primary-color);	/*バーの色をtheme.cssのprimary-colorにする*/
	transition: width 0.05s linear;		/*幅の変化を滑らかに*/
}

	/*画面幅600px以下の追加指定*/
	@media (max-width:600px) {

	/*各画像*/
	.list-yoko-scroll2 .hscroll1-track > div {
		width: 80vw;	/*1枚あたりの幅の変更*/
	}
	
	}/*追加指定ここまで*/


/*ボタン（btn-grad1）
---------------------------------------------------------------------------*/
.btn-grad1,.btn-grad1 a {
	text-decoration: none;
	position: relative;
	display: flex;
	justify-content: center;
	padding: 0.5rem 2rem;
	border-radius: 999px;
	color: #fff;	/*文字色。お好みで。*/
	text-shadow: 1px 1px rgba(0,0,0,0.2);	/*テキストの影。右へ1px、下へ1px、0,0,0は黒のことで0.2は色が20%出た状態。*/
	transition: background-position 0.5s ease, transform 0.5s ease;	/*「background-position」と「transform」の変化に0.5秒かける。数値はお好みで。*/
	background: linear-gradient(120deg, var(--primary-color), var(--accent-color)) left center / 200% 200%;/*背景グラデーション。120degは角度。#はグラデに使う色。グラデの表示範囲を左半分に。最後が縦横サイズ。*/
	font-size: 1.1rem;	/*文字サイズ。110%*/
	margin-top: 1.2rem;	/*ボタンの上に、3文字分のスペースを空ける*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
	text-align: center; /* これで中の要素が中央揃えになります */
	
	
}
	.btn-grad1 a {/* 3. 枠線を少し柔らかくして馴染ませる */
    border: 2px solid rgba(255, 255, 255, 0.7);
	/* 2. 立体的な影（ボックスシャドウ）を追加 */
    box-shadow: 0 6px 15px -3px rgba(0, 0, 0, 0.5),   /* ドロップシャドウ */
                inset 0 2px 3px rgba(255, 255, 255, 0.5); /* 内側のハイライト */}
/*bg1-primaryの背景色の上のボタン*/
.btn-grad1,.bg1-primary .btn-grad1 a {
	background: transparent;	/*背景色*/
	color: var(--primary-color);	/*文字色。css冒頭のprimary-colorを読み込みます。*/
	text-shadow: none;
	
}


/*テキスト量にあったサイズ用*/
.btn-grad1,.btn-grad1.fit a {
	display: inline-flex;
}

/*テキスト量にあったサイズ用の左右中央用*/
.btn-grad1,.btn-grad1.c {
	text-align: center;
}

/*マウスオン時（色の追加をする際は、このブロックより上に入れて下さい。）*/
.btn-grad1,.btn-grad1 a:hover {
	filter: none;
	background-position: right center;	/*グラデの表示範囲を、右半分に。*/
	transform: translateY(-2px);	/*ボタンを2pxだけ浮かす*/
}


/*2カラム（※800px未満では１カラム）
---------------------------------------------------------------------------*/
.c2 {
	text-align: left;	/*テキストを左寄せに*/
}

	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	.c2 {
		display: flex;
		justify-content: space-between;
		gap: var(--content-space-l);	/*２カラムの間に空けるスペース。css冒頭のcontent-space-lを読み込みます。。*/
	}
	
	/*title側*/
	.title {
		width: 30%;	/*幅。お好みで。*/
	}
	
	/*text側*/
	.c2 .text {
		flex: 1;
	}
	
	}/*追加指定ここまで*/


/*news（お知らせ）
---------------------------------------------------------------------------*/
dl.news * {margin: 0;padding: 0;}

dl.news {
	border-radius: 10px;	/*角を丸くする。お好みで。*/
	overflow: hidden;
	background: #fef4f3;	/*基本となる背景色。*/
}
/*日付*/
dl.news dt {
	display: flex;
	padding: 1rem 1rem 0 1rem;	/*日付内の余白。上、右、下、左への順番。*/
}

/*テキストブロック*/
dl.news dd {
	padding: 0 1rem 1rem 1rem;	/*日付内の余白。上、右、下、左への順番。*/
}

/*奇数行目の背景色。全体同じ色がよければここのブロックは削除。*/
dl.news dt:nth-of-type(odd),
dl.news dd:nth-of-type(odd) {
	background: var(--light-color);		/*背景色。css冒頭のlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*文字色。css冒頭のlight-inverse-colorを読み込みます。*/
}

	/*画面幅900px以上の追加指定*/
	@media (min-width: 900px){

	dl.news {
		display: grid;
		grid-template-columns: max-content minmax(0, 1fr);	/*日付幅は最大の文字数幅に自動調整し、右側テキストは残り一杯使う。*/
		align-items: start;
	}

	/*日付*/
	dl.news dt {
		align-self: stretch;
		padding: 0.5rem 1rem;	/*日付内の余白。上下、左右への順番。*/
	}

	/*テキストブロック*/
	dl.news dd {
		padding: 0.5rem 1rem;	/*日付内の余白。上下、左右への順番。*/
	}

	}/*追加指定ここまで*/


/*フッター
---------------------------------------------------------------------------*/
footer * {margin: 0;padding: 0;}
footer ul {list-style: none;}

/*フッターボックス全体*/
footer {
	font-size: 0.8rem;	/*文字サイズ80%*/
    padding: var(--content-space-s);		/*ボックス内の余白。css冒頭のcontent-space-sを読み込みます。*/
    background: var(--primary-color);		/*背景色。css冒頭のprimary-colorを読み込みます。*/
    color: var(--primary-inverse-color);	/*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
}

/*ロゴの最大幅*/
footer .logo {
	max-width: 400px;
}

/*フッター直下のdiv（２つのブロックそれぞれ）*/
footer > div {
	display: flex;
	flex-direction: column;	/*縦積み*/
	gap: 1rem;	/*要素間に空けるスペース。１文字分。*/
}

/*2つ目（右側）ブロック*/
footer .menu {
    display: flex;	/*フッターメニューを横並びに*/
    gap: 2rem;		/*メニュー（ul）同士の間に空けるスペース。２文字分。*/
    align-items: flex-start;
}

/*メニューの設定*/
footer .menu a {
	text-decoration: none;	/*リンクテキストの下線を消す*/
	opacity: 0.8;	/*色を80%だけ出す*/
}
footer .menu a:hover {
	opacity: 1;	/*マウスオン時に色を100%に*/
}

	/*画面幅900px以上の追加指定*/
	@media (min-width: 900px){
	
	/*フッターボックス全体*/
	footer {
		display: flex;	/*横並びにする*/
		justify-content: space-between;
		gap: 2rem;	/*左右のボックスの間に空けるスペース。２文字分。*/
	}
	
	/*1つ目（左側）ブロック*/
	footer > div:nth-of-type(1) {
		flex: 0 0 30%;	/*幅を30%。お好みで。*/
	}

	}/*追加指定ここまで*/

/*Copyright部分*/
footer small {
	display: block;
	text-align: right;	/*右寄せ*/
	margin-top: auto;	/*下に*/
}


/*SNSアイコン
---------------------------------------------------------------------------*/
.sns1 {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;		/*アイコン同士のマージン的な要素。１文字分。*/
}

.sns1 i {
	font-size: 30px;	/*アイコンサイズ*/
}


/*bg1
---------------------------------------------------------------------------*/
.bg1 {
	background: var(--bg-inverse-color);	/*文字色。css冒頭のbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);		/*背景色。css冒頭のbg-colorを読み込みます。*/
}

/*bg1-primary
---------------------------------------------------------------------------*/
.bg1-primary {
	background: var(--primary-color);		/*背景色。css冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
}

/*bg1-light
---------------------------------------------------------------------------*/
.bg1-light {
	background: var(--light-color);		/*背景色。css冒頭のlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*背景色。css冒頭のlight-inverse-colorを読み込みます。*/
}

/*bg1-accent
---------------------------------------------------------------------------*/
.bg1-accent {
	background: var(--accent-color);		/*背景色。css冒頭のaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*背景色。css冒頭のaccent-inverse-colorを読み込みます。*/
}

/*bg（bg1-primary、bg1-light、bg1-accentとセットで使います）
---------------------------------------------------------------------------*/
.bg {
	padding-top: var(--content-space-l);		/*ボックス内の上に空ける余白。css冒頭のcontent-space-lを読み込みます。*/
	padding-bottom: var(--content-space-l);	/*ボックス内の下に空ける余白。css冒頭のcontent-space-lを読み込みます。*/
}

/*背景色が続く場合に隙間を空けない*/
.bg + .bg {
	margin-top: calc(-1 * var(--content-space-l)) !important;
}


/*section内で画面両サイドいっぱいまで広げる場合（marginのみでもいいが安定版に）
---------------------------------------------------------------------------*/
.bleed-x {
	--bleed-x: var(--content-space-l);	/*エイリアスに*/
	width: calc(100% + (var(--bleed-x) * 2));	/*section内容の幅＋両サイドpadding（対象要素の幅）*/
	margin-left: calc(var(--bleed-x) * -1);
	margin-right: calc(var(--bleed-x) * -1);
	max-width: none;
}


/*その他
---------------------------------------------------------------------------*/
.color-check, .color-check a {color: #ff0000 !important;}
.bg1-accent .color-check, .color-check a {color: #fef500 !important;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 100%;display: block;}
.wl {width: 100%;display: block;}
.padding-x {padding: 0 var(--content-space-l);}
.mt0 {margin-top: 0px !important;}
.mt1rem {margin-top: 1rem !important;}
.mt3rem {margin-top: 3rem !important;}
.mb0 {margin-bottom: 0px !important;}
.mb1rem {margin-bottom: 1rem !important;}
.mb3rem {margin-bottom: 3rem !important;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #eee;border: 1px solid #ccc; color: #888; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}
.is-clip {overflow: hidden;}

/*大きな画面の場合*/
.large-screen .ws {width: 50%;}
.large-screen .sh {display: none;}
.large-screen .pc {display: block;}
/* クリックできることを明示 */
.list-head {
  cursor: pointer;
  transition: opacity 0.3s;
}
.list-head:hover {
  opacity: 0.7;
}

/* 詳細エリアの初期設定 */
.detail {
  overflow: hidden; /* アニメーションを綺麗に見せるため */
}

.toggle-trigger {
    cursor: pointer; /* 指のマークにする */
    transition: 0.3s;
}
.toggle-trigger:hover {
    opacity: 0.7; /* ホバー時に少し薄くする */
}
/* h2要素の余白を調整 */
h2.toggle-trigger {
    margin: 8px 0px 8px 0px ; /* 上を0、下を5px程度にする例 */
}
/* aタグの上部のマージンを0にする */
h2.toggle-trigger a {
    margin-top: 0 ;
    display: block; /* リンクの範囲を広げて調整しやすくします */
}

/* 追加の調整用CSS */
.btn-grad1.c {
    display: flex;
    justify-content: center; /* これで左右中央揃えになります */
    width: 100%;             /* 横幅いっぱいに広げてから中央に配置 */
}

.button-wrapper {
    margin: 20px 0; /* セクション全体との隙間 */
}
.form-subtext {
    position: relative; /* z-indexを有効にするために必須 */
    z-index: 10;        /* 数字を大きくして最前面に設定 */
    color: #333;
    font-weight: 500;
    text-align: center;
    padding: 20px 0;
    margin-top: 10px;
}

.form-subtext::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 130%;
    transform: translate(-50%, -50%);
    
    background: rgba(255, 255, 255, 0.7);
    filter: blur(15px);
    border-radius: 50%;
    z-index: -1; /* 文字の後ろ（マイナス）に配置 */
}
/* ゲート全体の背景（ぼかしとキラキラ） */
#age-gate-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9); /* 白背景でぼかす */
    backdrop-filter: blur(10px); /* 既存サイトをぼかす */
    z-index: 9999; /* 最前面に表示 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjZmZmIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IiNmZWRmZTUiPjwvcmVjdD4KPC9zdmc+'); /* 簡易的なキラキラ模様 */
}

/* 中央の可愛いボード */
.age-gate-content {
    background: #fff0f3; /* 薄いピンク */
    padding: 40px 30px;
    border-radius: 20px;
    border: 5px solid #ffb6c1; /* 可愛いピンクの枠線 */
    box-shadow: 0 10px 25px rgba(255, 182, 193, 0.5);
    text-align: center;
    width: 90%;
    max-width: 400px;
    position: relative;
    overflow: hidden;
}

/* タイトルと見出し */
.site-title {
    font-size: 24px;
    color: #ff69b4;
    margin-bottom: 20px;
}

.main-heading {
    font-size: 20px;
    color: #4b2c2c;
    margin-bottom: 30px;
    line-height: 1.4;
}

.stage-label {
    font-size: 14px;
    color: #8b6b6b;
    margin-bottom: 10px;
}

/* 可愛いピンクボタン */
.pink-btn {
    background: linear-gradient(to bottom, #ffc0cb, #ffb6c1);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 30px;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255, 182, 193, 0.8);
    transition: all 0.3s ease;
    width: 80%;
    margin-bottom: 15px;
}

.pink-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 182, 193, 1);
}

.submit-btn {
    margin-top: 20px;
}

/* 「いいえ」リンク */
.no-link a {
    color: #8b6b6b;
    text-decoration: underline;
    font-size: 14px;
}

/* パスワード入力エリア */
.pass-label {
    font-size: 16px;
    color: #ff69b4;
    margin-top: 10px;
}

.pass-input-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 80%;
    margin: 0 auto;
}

.gift-icon {
    font-size: 24px;
    margin-right: 10px;
}

#pass-input {
    background: white;
    border: 3px solid #ffb6c1;
    border-radius: 10px;
    padding: 10px 15px;
    font-size: 18px;
    color: #ff1493;
    width: 100%;
    box-sizing: border-box;
}

#pass-input::placeholder {
    color: #ffb6c1;
    opacity: 0.5;
}





/* リボン本体 */
.ribbon {
  display: inline-block;
  color: white;
  padding: 3px 24px;
  position: relative;
  font-size: 14px;
  text-align: center;
  margin-bottom: 1px; /* ここを0pxから少し空けると文字と重なりません */

  background: linear-gradient(135deg, rgba(232, 142, 137, 0.8) 0%,
   rgba(209, 117, 113, 0.6) 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

/* 三角形を作るための設定 */
.ribbon::before, .ribbon::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 0;
  height: 0;
  border-style: solid; /* ←ここが重要です！ */
}

/* 左側の三角形 */
.ribbon::before {
  left: -15px;
  border-width: 15px 15px 15px 0;
  border-color: transparent rgba(232, 142, 137, 0.8) transparent transparent;
}

/* 右側の三角形 */
.ribbon::after {
  right: -15px;
  border-width: 15px 0 15px 15px;
  border-color: transparent transparent transparent rgba(232, 142, 137, 0.8);
}
.main-title {
  /* 必要に応じてフォント調整 */
  font-family: "Beau Rivage", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 80px;
  margin: 0px 0 0px;
  color: #fefdfd;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
  line-height: 1.5;
}

.sub-text {
  font-size: 14px;
  letter-spacing: 2px;
  color: #f9f8f8;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}

/* 親となる動画や画像の囲い */
.hero-container {
  position: relative; /* 子要素をここ基準で配置する宣言 */
}

/* ロゴの重なり調整 */
.ribbon-logo-overlay {
  position: absolute; /* 動画の上に浮かせる */
  top: 50%;           /* 縦位置：中央 */
  left: 50%;          /* 横位置：中央 */
  transform: translate(-50%, -50%); /* 中心を完璧に合わせる */
  width: 100%;        /* 幅を合わせる */
  text-align: center;
  z-index: 10;        /* 動画より手前に表示させる */
}

/* リボンや文字のスタイルは前の回答と同じものを使ってください */


/* スマホ画面（幅800px以下）の時の設定 */
@media screen and (max-width: 800px) {

  /* 1. リボンを完全に消す */
  .ribbon {
    display: none;
  }

  /* 2. ロゴ全体を小さくする */
  .ribbon-logo-overlay {
    transform: translate(-50%, -50%) scale(0.6); /* 0.6倍に縮小 */
    width: 100%;
  }

 
}

/* リンクの基本スタイル */
.text-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none; /* 下線を消す */
  color: #db709b;          /* お好みの文字色に変更 */
  transition: opacity 0.3s;
  text-shadow: 0px 2px 8px rgba(0,0,0,0.3);
  line-height: 1.5;
}

.text-logo:hover {
  opacity: 0.7;         /* ホバー時に少し薄くする */
}

/* メインの文字 */
.logo-main {
  font-family: "Beau Rivage", cursive; /* お好みのフォント */
  font-size: 32px;
  font-weight: bold;
}

/* サブの文字 */
.logo-sub {
  font-size: 12px;
  letter-spacing: 2px;
  margin-top: 5px;
}
/* スマホではタップで反応 */
.text-logo:active {
  opacity: 0.5;
  transform: scale(0.98); /* わずかに縮むことでクリック感を演出 */
}

/* システムページ専用スタイル */
.system-page {
    padding: 1rem 1rem;
    background-color: #fffaf0; /* 少し温かみのある背景色 */
}

.system-title {
    font-family: 'Eagle Lake', cursive;
    color: #5a77a0;
    margin-bottom: 2rem;
}

.system-title span {
    display: block;
    font-size: 0.5em;
    color: #ffb6c1;
}

.system-image-wrapper {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.system-img {
    width: 100%;
    height: auto;
    border-radius: 20px; /* 角を丸く */
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border: 3px solid #ffffff;
}

.message-box {
    margin-top: 2rem;
    text-align: center;
    padding: 1.5rem;
    background: #fff;
    border-radius: 15px;
    border: 2px dashed #ffb6c1;
    color: #666;
    font-weight: 500;
}

/* セクション間の余白を一括管理 */
.system-section {
    margin-top: 4rem;
}

/* 最初のセクションだけ上の余白を調整したい場合（任意） */
.system-page .system-section:first-child {
    margin-top: 0;
}

.system-title {
    /* 雲の形を作るための設定 */
    background: #ffffff;
    border: 3px solid #ffebf0; /* 縁取りの色 */
    width: fit-content;
    margin: 1.1rem auto;
    padding: 1rem 4rem;
    
    /* ここがポイント！モコモコした雲の形 */
    border-radius: 20% 50% 10% 10% / 30% 60% 70% 40%;
    
    /* 影をつけて立体的に */
    box-shadow: 0 8px 0 rgba(255, 182, 193, 0.3);
    
    /* テキスト配置 */
    text-align: center;
    position: relative;
    z-index: 1;
}

/* タイトルの文字色などを調整 */
.system-title {
    color: #ff8da1; /* 文字色を可愛らしいピンクに */
    font-size: 1.0rem;
}

.system-title span {
    display: block;
    font-size: 0.6em;
    color: #aaa;
    margin-top: 2px;
}

header {
    margin-bottom: 0px; /* この数値を減らしてみてください */
}


/* --- システムページレイアウト調整 --- */

/* 料金システムの画像を横並びにする設定 (PC用) */
@media screen and (min-width: 768px) {
    .system-image-wrapper {
        display: flex;
        justify-content: center;
        gap: 20px; /* 2枚の画像の間の隙間 */
    }

    .system-image-wrapper .system-img {
        width: 48%; /* 横並びにするため幅を50%以下にする */
    }
}

/* スマホ用 (1枚ずつ表示) */
@media screen and (max-width: 767px) {
    .system-image-wrapper {
        display: block;
    }

    .system-image-wrapper .system-img {
        width: 100%;
        margin-bottom: 15px; /* 画像同士の縦の隙間 */
    }
}

/* 画像が大きすぎないように最大幅を制限 */
.system-img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* main {
    
    background-image: url('../images/haikei2.jpg');
    background-size: cover;
    background-position: center;
} */
.kanon-intro {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  cursor: pointer; /* クリックできることを示す */
}



.typewriter {
  position:absolute;
  top: 30%; 
  left: 50%;
  transform: translate(-50%, -50%) rotate(-3deg);
  
  font-family: 'Yomogi', sans-serif;
  color: #ff85a2;
  text-shadow: 2px 2px 0px #fff, 3px 3px 0px rgba(255, 182, 193, 0.4);
  font-size: 3rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
border-radius: 5px;
  /* ★ここを「点線（dashed）」にして色をピンクに！ */
  border-right: 0.25em dashed #ff85a2;
  
  animation: typing 3s steps(12, end) forwards, blink-caret .75s step-end infinite;

  
  /* 手書き風のラフさを出すために少し回転させる */
  transform: translate(-50%, -50%) rotate(-3deg);
  
  white-space: nowrap;
  overflow: hidden;
  border-right: .15em solid #ff85a2;
  
  animation: typing 3s steps(12, end) forwards, blink-caret .75s step-end infinite;

  /* 重要：文字数分だけの幅にする */
  width: 5ch; /* Kanon なら 5文字なので 5ch */
  
  white-space: nowrap;
  overflow: hidden;
  border-right: .15em solid orange;
  
  /* typingで幅を0から文字数分まで広げる */
  animation: typing 3s steps(9, end) forwards, blink-caret .75s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to   { width: 15ch; } /* ここも文字数に合わせる */
}
/* 詳細ボックス（最初は隠す） */
.detail-box {
  display: none; /* ここをJavaScriptで切り替える */
  position: absolute;
  bottom: 10%;
  background: rgba(255, 255, 255, 0.8);
  padding: 20px;
}



/* クリック時に少しアニメーションさせる場合は以下を追加 */
.kanon-intro.fade {
  opacity: 0.8;
}

.kanon-intro {
  position: relative;
  width: 100%;
  height: 700px; /* お好みの高さに調整してください */
	overflow:hidden;
}

.bg-img {
  width: 100%;
  height: 100%;
  object-fit:contain; /* 画像を歪ませずに枠にフィットさせる */
  object-position: center; /* 画像の中央を表示 */
  transition: opacity 0.5s ease; /* ふわっと変わる設定 */
}

.detail-box {
  background: rgba(255, 255, 255, 0.9); /* 少しだけ透明度を下げて読みやすく */
  border: 3px solid #ffccdd;           /* 可愛いピンクの枠 */
  border-radius: 30px;                 /* 角を丸く */
  padding: 10px;                       /* 内側の余白をたっぷり確保 */
  margin: 20px;
  box-shadow: 0 8px 20px rgba(255, 102, 153, 0.2); /* ピンク系のふんわりした影 */
  text-align: center;
  font-family: 'Yusei Magic', sans-serif; /* 手書き風フォント */
  color: #ff6699;                      /* 文字色をピンク系に */
  line-height: 1.8;                    /* 行間をゆったりさせて見やすく */
  font-size: 1.4rem;
  width: auto;       /* 横幅を画面の80%にする */
  min-height: 1px; /* 最低限の高さは確保する */
  bottom: 20px; /* 下の方に配置 */
  left: 1%;
  
  /* アニメーションの準備：ふわっと動くために必要 */
  transition: all 0.5s ease;
  display: none; /* 最初は隠しておく */
}

@media screen and (max-width: 767px) {
  /* 親要素の設定を解除 */
  .kanon-intro {
    height: auto ; /* 高さを内容に合わせて伸びるようにする */
    overflow: visible;
  }

  /* 写真の設定（もしあれば） */
  .kanon-intro img {
    position: static; /* 重なりを解除 */
    display: block;
    width: 100%;      /* 写真は横幅いっぱいに */
    height: auto;
  }

  /* ボックスの設定 */
  .detail-box {
    position: static;    /* 重なりを解除して、写真の下に来るようにする */
    display: block;      /* 縦並びにする */
    margin: 20px auto;   /* 写真との間に隙間を作る */
    width: 90%;
  }
}
.bg-img {
  /* 0.5s を 1.2s に変更 */
  transition: opacity 1.2s ease-in-out, filter 1.2s ease-in-out;
  filter: blur(0px);
}

.bg-img.is-blur {
  filter: blur(15px); /* ぼかしを少し強めにするとより柔らかいです */
}

.list-head .text p {
  text-align: right ;
}

#container {
  background-image: url('../images/haikei2.jpg');
  background-attachment: fixed; /* これで画像が固定されます */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ついでに、背景を透かしたい要素の背景色を消す */
section {
  background-color: transparent;
} 

.form-subtext {
    /* 20px を例えば 5px や 0px に変更してください */
    padding: 5px 0px; 
    
    /* さらに詰めたい場合は margin も調整します */
    margin: 5px 0px 10px 0px; 
}

/* --- おしゃれなH1タイトルの設定 --- */
h1.stylish-title {
    /* フォントファミリーの先頭に Yomogi を追加 */
    font-family: 'Yomogi', cursive; 
    
    text-align: center;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700; /* 手書き風フォントは太すぎないほうが可愛いです */
    margin: 2% 0;
    
    /* より明るく鮮やかなピンクのグラデーション */
    background: linear-gradient(135deg, #ff9eb8, #ff6b9a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(2px 2px 2px rgba(255, 255, 255, 0.8));
    animation: floatAnime 3s ease-in-out infinite;
}

/* 浮遊アニメーションの記述も忘れずに */
@keyframes floatAnime {
    0% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}
    
    

/* 英語のサブタイトルの設定 */
h1.stylish-title span {
    display: block;
    font-size: 1.8rem;
    font-weight: 500; /* 少し太くして見やすく */
    letter-spacing: 0.1em;
    margin-top: 7px;
    
    /* ★英語は白にして、影を付けて視認性を確保 */
    -webkit-text-fill-color: #fff;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.7); 
    opacity: 1; /* 薄くせず、はっきり表示 */
}
/* トップページのお知らせ */
.cool-title {
    text-align: center;
    /* Playfair Display を適用 */
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic; /* 斜体で優雅に */
    
    font-size: clamp(2.5rem, 6vw, 4rem);
    letter-spacing: 0.05em; /* セリフ体なので少し狭めると品が出ます */
    text-transform: uppercase;
    position: relative;
    padding-bottom: 15px;
    color: #222;
	/* ★白の影を追加（文字をくっきりさせる効果） */
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.8);
	margin: 10px;

}

/* 下のアンダーライン（そのまま活用） */
.cool-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px; /* 少しスリムにすると高級感が出ます */
    height: 2px;
    background: #ff6b9a;
}

/* 日本語サブタイトルは、Playfairとの相性が良いように少し離して薄めに */
.cool-title span {
    display:block;
    font-size: 1.3rem;
    font-weight: 400;
    font-style: normal; /* 日本語は斜体にしない */
    margin-top: 10px;
    letter-spacing: 0.2em; /* 日本語は広めに */
    color: #0b0b0b;
	
}
/* ｉｎｄｅｘスタイルブックタイトル */
.style-book-title {
    text-align: center;
    /* 英語は筆記体でエレガントに、日本語は丸ゴシックで可愛く */
    font-family: 'Dancing Script', cursive; 
    font-weight: 600;
    font-size: clamp(2.5rem, 6vw, 4rem);
    color: #ff85a2; /* 優しいピンク色 */
    margin: 0rem 0 2rem;
    position: relative;
	/* 30pxから小さく調整します */
    padding: 0px 0 0 0; 
    
    /* 上下のmarginも調整すると、より余白が狭まります */
    margin: 10px 0;
    
    /* 白い影でふんわりと */
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.9);
}

/* 線の代わりに、お花やハートを添えるような優しさを
.style-book-title::after {
    content: "♡"; 記号で柔らかさを演出 
    display: block;
    margin-top: 3px;
    font-size: 1.5rem;
    color: #ffb7c5;
}  */


/* サブタイトルの日本語は「丸ゴシック」で柔らかく */
.style-book-title span {
    display: block;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    margin-top: 3px;
    color: #ff85a2;
}

.style-book-title {
    /* ...既存の設定（フォントや色など）はそのまま... */
    
    /* 上の要素との間に麻っぽい点線を入れる */
    border-top: 10px dashed #a07a5d;
    
    /* 線の周りに少し余裕を持たせる（パディング） */
    padding-top: 10px; 
    
    /* タイトルと線がくっつきすぎないように調整 */
    margin-top: 10px;
    
    /* 線の透明度を調整して馴染ませる */
    opacity: 0.7;
}

.bg1-light {
    /* 現在の 61.28px を例えば 30px や 20px に減らします */
    padding: 10px 0; 
}

/* セクション全体 */
.introduce {
    padding: 60px 20px;
    background: #faf7f5; /* 優しいベージュ系 */
}

/* タイトルをおしゃれに */
.section-title {
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: #a07a5d;
    margin-bottom: 30px;
}
.section-title span {
    display: block;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.2em;
    margin-top: 10px;
}

/* グリッドレイアウト（横並び） */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

/* カードのデザイン */
.service-card {
    background: #fff;
    border-radius: 15px; /* 角を丸くして柔らかく */
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px); /* ふわっと浮く */
}

.service-card figure img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.service-card .text {
    padding: 20px;
}

.service-card h4 {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    color: #555;
    margin-bottom: 10px;
}

.service-card p {
    font-size: 0.9rem;
    color: #888;
    line-height: 1.6;
}

/* 全体を統一した明朝体設定 */
.intro-text, 
.intro-text h2, 
.intro-text p {
  font-family: 'Noto Serif JP', serif;
}

.jouousama {
  /* 背景色の代わりに画像を指定 */
  background-image: url('../images/haikei5.webp'); 
  
  /* 画像が画面全体を覆うように設定 */
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* スクロールしても背景が固定されて綺麗です */
  
  /* 元の背景色の代わりに、文字を見やすくするための薄いオーバーレイ（重ねる色）を追加 */
  background-color: rgba(18, 10, 10, 0.7); 
  background-blend-mode: multiply; /* 画像と色を自然に合成します */
  
  color: #e0d0d0;
  padding: 60px 20px;
}

/* キャッチコピー部分 */
.hero-text {
  text-align: center;
  margin-bottom: 50px;
}

.hero-text h2 {
  font-size: 2.2rem; /* 少しだけ小さくすると洗練されて見えます */
  font-weight: bold;
  color: #a080c0; /* 透明感のある淡いパープル */
  text-shadow: 0 4px 15px rgba(255, 255, 255, 0.5); /* 白っぽい光を足して透明感を演出 */
  margin-bottom: 10px;
  opacity: 0.9; /* 0.7だと少し薄すぎる場合があるので、0.9くらいが読みやすいです */
}


.hero-text p {
  color: #e0d0d0;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
}

/* 本文部分 */
.intro-text .text h2 {
  color: #d4a0a0; /* ローズ系の落ち着いた色 */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  margin-bottom: 20px;
}

.intro-text .text p {
  line-height: 2.2;
  text-align: center;
  animation: fadeIn 3s ease-in-out;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* スライダー（変更なし） */
.slider-container {
  width: 100%;
  max-width: 700px;
  margin: 0 auto 50px;
  height: 400px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

/* 写真エリアのスライドショーだけに適用する設定 */
.slider-container .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

/* スライド内の画像設定 */
.slider-container .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.85) contrast(1.1);
}

/* アクティブなスライドの表示 */
.slider-container .slide.active {
    opacity: 1;
}

/* スマホ画面（幅767px以下）のときだけフォントサイズを調整する */
@media screen and (max-width: 767px) {
  .hero-text h2 {
    font-size: 1.5rem; /* 2.5remから少し小さくします */
    word-break: keep-all; /* 文字の途中で改行しない設定 */
    line-height: 1.4;    /* 行間を詰めてスッキリ見せる */
  }
}

@media screen and (max-width: 767px) {
  /* キャッチコピーのサブタイトル（pタグ）の調整 */
  .hero-text p {
    font-size: 0.9rem; /* 少し文字を小さくします */
    letter-spacing: -0.02em; /* 文字間を少し詰めて収まりを良くします */
    line-height: 1.5;
    padding: 0 10px; /* 左右に少し余白を入れて端に寄りすぎないようにします */
  }
}

/* スマホ画面のとき */
@media screen and (max-width: 767px) {
  .intro-text .text {
    padding: 0 20px; /* 左右に余白を作り、文字が画面端にくっつくのを防ぐ */
  }

  .intro-text p {
    font-size: 1.05rem; /* もう少しだけ大きく */
    line-height: 2.0;   /* 行間をさらにゆったりと */
    margin-bottom: 25px; /* 段落ごとの間隔をしっかり空ける */
    text-align: left;   /* 左揃えにすると、視線が安定して読みやすくなります */
  }

  .intro-text h2 {
    font-size: 1.3rem;  /* 見出しもスマホに合わせて調整 */
    line-height: 1.6;
    margin-bottom: 30px;
  }
}


/* これをcss/style.cssの最後に追加 */
body.authenticated #age-gate-container {
    display: none !important;
    visibility: hidden !important;
}