@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');


/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");


/*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;}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
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;
}


/*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 {
	position: relative;
	width: 100%;
}

/*ベース画像（変更不要）*/
.mainimg .base-image {
	width: 100%;
	height: auto;
	display: block;
}

/*画像の配置基準（変更不要）*/
.mainimg .pin-item {
	position: absolute;
	transform: translate(-50%, -50%);
}

/*画像*/
.mainimg img {
	transition: transform 0.2s;
}

/*マウスオン時 */
.mainimg .pin-item:hover img {
	transform: scale(1.02) rotate(2deg); /*102%に拡大し、2度だけ右に傾く*/
}


/*ヘッダー直下のメニュー（※開閉メニューとはブロックが異なります）
---------------------------------------------------------------------------*/
/*メニューブロック全体の設定*/
#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: 300px;
	margin: 0 auto 3rem;
}

/*メニューブロック共通*/
.small-screen #menubar {
	animation: animation1 0.2s both;
	position: fixed;overflow: auto;z-index: 100;
	right: 0px;top: 0px;
	width: 100%;
	height: 100%;
	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.1rem;	/*文字の大きさ。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.7;		/*色を70%だけ出す。*/
	font-size: 0.6em;	/*文字サイズを親要素の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; /* デフォルトは非表示 */
	animation: opa1 0s 0.2s both;
	cursor: pointer;
	position: fixed;
	z-index: 101;
	right: 0px;		/*右からの配置場所*/
	top: 0px;		/*上からの配置場所*/
	width: 70px;	/*ボタンの幅*/
	height: 70px;	/*ボタンの高さ*/
	background: var(--bg-inverse-color);	/*背景色。css冒頭のbg-inverse-colorを読み込みます。*/
	border-bottom-left-radius: 1rem;		/*左下だけ角を丸くする*/
}

/*ハンバーガーアイコンの線*/
#menubar_hdr span {
	display: block;
	transition: 0.3s;
	position: absolute;
	left: 18px;
	width: 35px;
	height: 2px;		/*線の高さ*/
	background: var(--bg-color);	/*線の色。css冒頭のbg-colorを読み込みます。*/
}

/*バツ印が出ている時のボタン色*/
#menubar_hdr.ham {
	background: #ff0000;	/*背景色*/
}
#menubar_hdr.ham span {
	background: var(--bg-color);	/*線の色。css冒頭のbg-colorを読み込みます。*/
}

/*以下変更不要*/
#menubar_hdr span:nth-of-type(1) {
	top: 24px;
}
#menubar_hdr span:nth-of-type(2) {
	top: 34px;
}
#menubar_hdr span:nth-of-type(3) {
	top: 44px;
}
#menubar_hdr.ham span:nth-of-type(1) {
	transform: translateY(10px) rotate(-45deg);
}
#menubar_hdr.ham span:nth-of-type(2) {
	opacity: 0;
}
#menubar_hdr.ham span:nth-of-type(3) {
	transform: translateY(-10px) 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: block;
	font-size: 0.4em;	/*上のh2の文字サイズの40%*/
	opacity: 0.5;		/*色を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未対応ブラウザ向け（@supportsで分岐）。画面幅が599px以下で2カラム*/
	@supports not (container-type: inline-size) {
		@media (max-width: 599px) {
			.list-mask1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		}
	}
	
	/*@container対応ブラウザ向け。コンテナ幅(この場合はmain)が899px以下では2カラム*/
	@supports (container-type: inline-size) {
		@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;
}

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

/*説明だけ小さめにする*/
.list-mask1 .list p {
	font-size: 0.9em;	/*文字サイズ*/
	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: 50%;		/*幅*/
}

/*テキストブロックの背景の部分（すりガラス風）*/
.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(56px, 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 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: 3rem;	/*ボタンの上に、3文字分のスペースを空ける*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
}

/*bg1-primaryの背景色の上のボタン*/
.bg1-primary .btn-grad1 a {
	background: #fff;	/*背景色*/
	color: var(--primary-color);	/*文字色。css冒頭のprimary-colorを読み込みます。*/
	text-shadow: none;
}

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

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

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


/*2カラム（※800px未満では１カラム）
---------------------------------------------------------------------------*/
.c2 h2 {
	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;}