@charset "utf-8";

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

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Reddit+Sans:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/*mainimg.cssの読み込み*/
@import url(mainimg.css);


/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

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

	/*--primary-color: #cc99cc;*/			/*テンプレートのテーマカラー*/
	--primary-color: #421272;			/*テンプレートのテーマカラー*/
	--primary-inverse-color: #fff;		/*上のprimary-colorの対となる色*/

	--secondary-color: #993399;			/*テンプレートのサブカラー*/
	--secondary-inverse-color: #fff;	/*secondary-colorの対となる色*/

	/*--accent-color: #993399;*/			/*テンプレートのアクセントカラー*/
	--accent-color: #cc88cc;			/*テンプレートのアクセントカラー*/
	--accent-inverse-color: #fff;		/*accent-colorの対となる色*/

	/*余白の一括管理用。主に左右の余白に使っています。4rem＝4文字分。*/
	--content-space: 4rem;
}

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


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

/*fadeInのキーフレーム設定（テキストのフェードインに使用）
---------------------------------------------------------------------------*/
@keyframes fadeIn {
	0% {opacity: 0;transform: scale(0.8);}
	100% {opacity: 1;transform: scale(1);}
}

/*全体の設定
---------------------------------------------------------------------------*/
body,html,#mainimg {width: 100%;height: 100%;}
body {
	margin: 0px;
	padding: 0px;
	color: #555;	/*全体の文字色*/
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 14px;	/*文字サイズ*/
	line-height: 2;		/*行間*/
	background: #ffffff;	/*背景色*/
	-webkit-text-size-adjust: none;
}

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

	html, body {
		font-size: 16px;	/*基準となるフォントサイズ。*/
	}

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

h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form,input,textarea {margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;}
ul {list-style-type: none;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}

/*section*/
section {
	padding: var(--content-space);	/*section内の余白。css冒頭のcontent-spaceを読み込みます。*/
}

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

/*マウスオン時*/
a:hover {
	text-decoration: none;	/*下線を消す*/
	/*filter: brightness(0.95);*/	/*少しだけ明るくする*/
	filter: brightness(1.20);	/*少しだけ明るくする*/
	color: var(--accent-color);	/*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
}

/*header
---------------------------------------------------------------------------*/
/*headerブロック*/
header {
	overflow: hidden;z-index: 1;
	position: fixed;	/*スクロールしても固定表示させる指定*/
	top: 0px;			/*上からの配置場所*/
	left: 0px;			/*左からの配置場所*/
	width: 100%;		/*幅*/
	padding: 10px 0;	/*上下、左右へのブロック内の余白*/
	background: #34698f;	/*背景色（古いブラウザ用）*/
	background: #421272;	/*背景色。20,96,135はRGBでの色指定。0.8は色が80%出た状態の事。*/
	border-bottom: 1px solid #fff;	/*下の線の幅、線種、色（古いブラウザ用）*/
	border-bottom: 1px solid rgba(255,255,255,0.3);	/*下の線の幅、線種、色。255,255,255は白の事で0.3は色が30%出た状態の事。*/
	color: #fff;		/*文字色*/
}
/*トップページでのheaderブロックの追加設定*/
.home header {
	background: transparent;
	border: none;
}
/*ロゴ画像*/
header #logo {
	width: 280px;	/*幅*/
	float: left;	/*左に回り込み*/
	margin-left: 10px;	/*左側に空けるスペース*/
	margin-right: 50px;	/*右側に空けるスペース*/
}
/*トップページで表示させている「お知らせ」の１行。*/
header #news {
	float: left;	/*左に回り込み*/
	text-shadow: 1px 1px 2px rgba(0,0,0,0.7), -1px -1px 2px rgba(0,0,0,0.7);	/*テキストの影*/
}
header #news .newicon {text-shadow: none;}

/*メインメニュー
---------------------------------------------------------------------------*/
/*メニューブロック*/
#menubar {
	overflow: hidden;
	float: left;
	width: auto;
}
/*メニュー１個あたりの設定*/
#menubar li {
	float: left;		/*左に回り込み*/
	text-align: center;	/*文字をセンタリング*/
}
#menubar li a {
	display: block;text-decoration: none;
	padding: 0 10px;	/*上下、左右へのメニュー内余白*/
}
/*現在表示中(current)のメニュー設定*/
#menubar li.current a {
	color: #ffcc00;	/*文字色*/
}
/*スマホ用メニューを表示させない*/
#menubar-s {display: none;}
/*３本バーアイコンを表示させない*/
#menubar_hdr {display: none;}

/*headerアイコン（facebookやtwitterなどのアイコンブロック）
---------------------------------------------------------------------------*/
/*アイコンを囲むブロック全体の設定*/
header .icon {
	float: right;		/*右側に回り込み*/
	margin-right: 10px;	/*右側に空けるスペース*/
}
/*アイコン１個あたりの設定*/
header .icon li {
	display: inline;	/*横並びにさせる指定*/
}
/*アイコン画像の設定*/
header .icon img {
	width: 30px;		/*画像の幅*/
	margin-left: 5px;	/*画像同士の余白*/
}
/*マウスオン時*/
header .icon a:hover {
	opacity: 0.7;		/*色が70%だけついた状態にする*/
}

/*main（メインコンテンツ）
---------------------------------------------------------------------------*/
/*h2見出し*/
main h2 {
	margin: 0;padding: 0;
	font-size: 2.4rem;		/*文字サイズ。240%。*/
	font-weight: normal;	/*h要素のデフォルトの太字を標準に*/
	margin-bottom: 1vw;		/*下にスペースを空ける*/
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
    color: #555;
}

/*見出し内のspan（小さな装飾文字と上部のアクセントライン）*/
main h2 span.small {
	display: inline-block;
	border-top: 2px solid var(--primary-color);	/*上の線の幅、線種、varは色のことで冒頭のprimary-colorを読み込みます。*/
	/*font-size: 0.9rem;*/		/*文字サイズ90%*/
	font-size: 1.2rem;		/*文字サイズ90%*/
	opacity: 0.6;			/*透明度。色が60%出た状態。*/
	letter-spacing: 0.1rem;	/*文字間隔を少しだけ広く*/
	padding-top: 1rem;		/*上に空ける余白。ラインとの間の余白調整です。お好みで。*/
}

/*見出しをセンタリングする場合*/
main h2.c {
	align-items: center;
}

main h3 {
	margin: 0;padding: 0;
	font-size: 1.4rem;		/*文字サイズ。240%。*/
	font-weight: normal;	/*h要素のデフォルトの太字を標準に*/
	margin-bottom: 2vw;		/*下にスペースを空ける*/
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
    color: #555;
}

koda h4 {
  position: relative;
  display: inline-block;
  margin: 1rem 0 1rem -10px;
  padding: 1rem 3rem;
  color: #fff;
  border-radius: 0 100vh 100vh 0;
  background: #0075a9;
  -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
}

koda h4:before {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 0;
  height: 0;
  content: '';
  border-top: 10px solid #005276;
  border-left: 10px solid transparent;
}

mida h3 {
  position: relative;
  padding: 1rem .5rem;
}

mida h3:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  content: '';
  border-radius: 3px;
  background-image: -webkit-gradient(linear, right top, left top, from(#2af598), to(#009efd));
  background-image: -webkit-linear-gradient(right, #2af598 0%, #009efd 100%);
  background-image: linear-gradient(to left, #2af598 0%, #009efd 100%);
}


/*contents（headerとfooter以外のメインとなるブロック。）
---------------------------------------------------------------------------*/
/*contentsブロック*/
#contents {
	flex: 1;
	padding: var(--global-space);	/*コンテンツ内の余白。css冒頭で指定しているglobal-spaceを読み込みます。*/
/*
	clear: both;margin: 0 auto;
	padding: 100px 10%;
	max-width: 1500px;
*/
}
	/*画面幅600px以下の追加指定*/
	@media screen and (max-width:600px) {

	#contents {
		padding-top: 80px;	/*コンテンツ内の上の余白だけ上書き*/
	}

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

/*見出し(h2)タグ*/
#contents h2 {
	margin-bottom: 20px;
	font-size: 40px;	/*文字サイズ*/
	border-bottom: 1px solid #fff;	/*枠線の幅、線種、色*/
	text-align: center;		/*文字をセンタリング*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くとる設定*/
    color: #555;
}
/*見出し(h2)タグ内のspanタグ。小文字の設定。*/
#contents h2 span {
	 margin-bottom: 10px;
	 display: block;
	 font-size: 13px;		/*文字サイズ*/
	 letter-spacing: 0.5em;	/*文字間隔を少しだけ広くとる設定*/
	 margin-top: -10px;		/*大きな文字との余白が広すぎるので、ちょっと詰める。*/
    color: #555;
}
/*見出し(h3)タグ*/
#contents h3 {
	margin-bottom: 20px;
	font-size: 20px;	/*文字サイズ*/
	background: url(../images/arrow1.png) no-repeat left center / 18px;	/*背景画像の読み込み。18pxは画像の幅。*/
	padding: 0 30px;	/*上下、左右への余白*/
}
/*段落(p)タグ*/
#contents p {
	padding: 0 30px 20px;	/*上、左右、下への余白*/
}
/*他。微調整。*/
#contents p + p {
	margin-top: -5px;
}
#contents h2 + p,
#contents h3 + p {
	margin-top: -10px;
}
#contents section + section {
	clear: both;
	padding-top: 40px;
}

/*テキストのフェードイン設定
---------------------------------------------------------------------------*/
/*fadeInのキーフレーム設定*/
@keyframes fadeIn {
	0% {opacity: 0;transform: scale(0.1) rotate(-30deg);}
	100% {opacity: 1;transform: scale(1) rotate(0deg);}
}

/* 初期状態でテキストを非表示にする */
.fade-in-text {
    visibility: hidden;
}

/* アニメーションを適用するクラス。
animationの行の「0.2s」が文字の出現のなめらかさで、大きいほどなめらかに出てきます。
１文字ずつの出現する際の時差は、js/main.jsの「テキストのフェードイン効果」の中にある「0.1」で調整できます。*/
.char {
    display: inline-block;
    opacity: 0;
    animation: fadeIn 0.2s linear both;
}


/*背景画像*/
#kodawari {
	background: url("../images/bg-kodawari.png") no-repeat left top / 50vw;	/*left(左)、top(上)に配置し、幅は画面幅の50%に。*/
}

/*背景画像*/
#record {
	background: url("../images/bg-flow4.png") no-repeat left top / 50vw;	/*left(左)、top(上)に配置し、幅は画面幅の50%に。*/
}

.flow-box * {margin: 0;padding: 0;}

/*背景画像*/
#flow {
	background: url("../images/bg-flow.png") no-repeat right top / 50vw;	/*right(右)、top(上)に配置し、幅は画面幅の50%に。*/
}

#flow3 {
	background: url("../images/bg-flow3.png") no-repeat right top / 50vw;	/*right(右)、top(上)に配置し、幅は画面幅の50%に。*/
}

#flow5 {
	background: url("../images/bg-flow5.png") no-repeat right top / 50vw;	/*right(右)、top(上)に配置し、幅は画面幅の50%に。*/
}

#flow6 {
	background: url("../images/bg-flow6.png") no-repeat right top / 50vw;	/*right(右)、top(上)に配置し、幅は画面幅の50%に。*/
}

#flow7 {
	background: url("../images/bg-flow7.png") no-repeat right top / 50vw;	/*right(右)、top(上)に配置し、幅は画面幅の50%に。*/
}

/*2カラムブロック　※900px未満では１カラム（私たちのこだわりブロック）
---------------------------------------------------------------------------*/
.list-half * {margin: 0;padding: 0;}

/*２カラムを囲むブロック*/
.list-half .list {
	display: flex;			/*flexボックスを使う指定*/
	flex-direction: column;	/*子要素を縦並びにする*/
	margin-bottom: 2rem;	/*ボックスの下に2文字分のスペースを空ける*/
}

/*ブロック内のh4見出し*/
.list-half .list h4 {
	font-size: 1.4rem;	/*文字サイズを1.4倍*/
	margin-bottom: 1rem;	/*下に１文字分のスペースを空ける*/
}

/*ブロック内のh4内のspan（小さな装飾文字）*/
.list-half .list h4 span {
	display: block;
	opacity: 0.5;	/*透明度50%*/
	font-weight: normal;
	font-size: 0.5em;	/*文字サイズを親要素の50%*/
	letter-spacing: 0.1em;	/*文字間隔をほんの少し広く*/
}

/*画像ブロック共通*/
.list-half .image-l img, .list-half .image-r img {
	border-radius: 50px;	/*角を丸くする指定。*/
	box-shadow: 10px 10px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、0,0,0は黒の事で0.1は色が10%出た状態。*/
}

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

	/*２カラムを囲むブロック*/
	.list-half .list {
		flex-direction: row;			/*子要素を横並びにする*/
		justify-content: space-between;	/*並びかたの種類の指定*/
		align-items: center;			/*垂直揃えの指定。天地中央に配置されるように。*/
	}

	/*画像ブロック共通*/
	.list-half .image-l, .list-half .image-r {
		width: 50%;			/*画像の幅*/
	}

	/*画像を右に配置する場合*/
	.list-half .image-r {
		margin-left: 2rem;	/*画像の左側に空けるスペース*/
	}

	/*画像を左に配置する場合*/
	.list-half .image-l {
		order: -1;
		margin-right: 2rem;	/*画像の右側に空けるスペース*/
	}

	/*テキストブロック*/
	.list-half .text {
		flex: 1;
	}

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

/*波のアニメーション
---------------------------------------------------------------------------*/
/*アニメーション*/
@keyframes move-wave {
0% { transform: translateX(0); }
100%   { transform: translateX(-50%); }
}

/*波を囲む全体のブロック*/
.wave-section {
	position: relative;
	
	/*以下の３行の数字については、下のwaveのheight(波の高さ)から1を差し引いた形です。隙間が出る場合があるのでそれが出ないようにしています。*/
	padding-top: 79px;
	top: -79px;
	margin-bottom: -79px;
}

/*波の色（２つとも揃えておけばOK）*/
.wave-section .text {
	background: var(--primary-color);	/*背景色。css冒頭のprimary-colorを読み込みます。*/
}
.wave-wrap use {
	fill: var(--primary-color);			/*塗りつぶしの色。css冒頭のprimary-colorを読み込みます。*/
}

/*上下の波（共通）*/
.wave {
	position: absolute;
	left: 0;
	width: 100%;
	height: 80px;	/*波の高さ。ここを変更する場合は上の.wave-sectionの３箇所の数字も合わせて変更して下さい。*/
}
.wave svg {
	display: block;
	width: 100%;
	height: 100%;
}

.wave .wave-wrap {
	transform-box: fill-box;
	transform-origin: 0 0;
	animation: move-wave 10s linear infinite;	/*ここの10sを変更すれば波のアニメーション速度が変わります*/
}

/*上の波*/
.wave-top {
	top: 0;
}

/*下の波*/
.wave-bottom {
	bottom: 0;
	transform: rotate(180deg);
}

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

/*ブロック全体*/
#footer {
	background: var(--primary-color);		/*背景色。css冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
	padding: var(--content-space);	/*フッター内の余白。css冒頭のcontent-spaceを読み込みます。*/
}

/*ロゴやSNSアイコンが入ったブロック*/
#footer div.footer1 {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;	/*このブロック内のボックス同士の間に空ける余白。１文字分。*/
}

/*メニューブロック*/
#footer div.footer2 {
    flex: 1;
}

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

	#footer {
		display: flex;
		gap: 2rem;		/*ロゴのブロックとメニューのブロックとの間の余白。2文字分。*/
	}

	/*ロゴやSNSアイコンが入ったブロック*/
	#footer div.footer1 {
		text-align: left;
		width: 40%;	/*幅。40%。*/
	}

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


/*Copyright部分*/
#footer small {
	display: block;
	text-align: right;
	margin-top: 2rem;
}

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

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

/*Google Map用
---------------------------------------------------------------------------*/
#footer .iframe {
	width: 100%;
	height: 0;
	padding-top: 56.25% !important;	/*マップの高さを増やしたい場合は、ここの数値を上げてみて下さい。*/
	position: relative;
	overflow: hidden;
}
#footer .iframe iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

/*news.html
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/
#new dl {
	padding: 0px 30px;		/*上下、左右へのブロック内の余白*/
}
/*日付設定*/
#new dt {
	float: left;	/*左に回り込み*/
	width: 16em;	/*dtの幅*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くとる設定*/
}
/*日付の右側に出る「お知らせ」などのアイコン。※共通設定。*/
#new dt span {
	letter-spacing: normal;display: inline-block;
	line-height: 1.5;
	margin-left: 1.2em;
	background: #666;	/*背景色*/
	color: #fff;		/*文字色*/
	width: 7em;			/*幅*/
	text-align: center;	/*文字をセンタリング*/
	border-radius: 3px;	/*角丸の指定。この１行を削除すれば、角がとがった通常の四角形になります。*/
}
/*日付の右側に出る「お知らせ」などのアイコン。※bg1*/
#new dt .bg1 {
	background: #e6004c;
}
/*日付の右側に出る「お知らせ」などのアイコン。※bg2*/
#new dt .bg2 {
	background: #307104;
}
/*記事設定*/
#new dd {
	padding-left: 17em;	/*左側に空ける余白*/
	border-bottom: 1px solid rgba(255,255,255,0.2);	/*下線の幅、線種、色*/
}

/*テーブル
---------------------------------------------------------------------------*/
/*テーブルの見出し（※caption）*/
.ta1 caption {
	border: 1px solid #fff;	/*テーブルの枠線の幅、線種、色*/
	border-bottom: none;	/*下線だけ消す*/
	text-align: left;		/*文字を左寄せ*/
	font-weight: bold;		/*太字に*/
	padding: 10px;			/*ボックス内の余白*/
}
/*テーブルの見出し（※tamidashi）*/
.ta1 th.tamidashi {
	width: auto;
	text-align: left;	/*左よせ*/
}
/*ta1設定*/
.ta1 {
	table-layout: fixed;
	width: 100%;
	margin: 0 auto 30px;
}
.ta1, .ta1 td, .ta1 th {
	word-break: break-all;
	border: 1px solid #fff;	/*テーブルの枠線の幅、線種、色*/
	padding: 10px;	/*ボックス内の余白*/
}
/*ta1の左側ボックス*/
.ta1 th {
	width: 140px;		/*幅*/
	text-align: center;	/*センタリング*/
}

/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta2-parts caption {
	font-weight: bold;		/*太字に*/
	padding: 0.2rem 1rem;	/*ボックス内の余白*/
	margin-bottom: 15px;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
	background: #555;		/*背景色*/
	color: #fff;			/*文字色*/
}

/*テーブルブロック設定*/
.ta2-parts {
	table-layout: fixed;
	width: 100%;
	margin-bottom: 2rem;		/*テーブルの下に空けるスペース。２文字分。*/
	background: #fff;		/*テーブル全体の背景色*/
	color: #555;			/*テーブル全体の文字色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta2-parts th, .ta2-parts td {
	padding: 1rem;		/*ボックス内の余白*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
	border: 1px solid #999;	/*テーブルの枠線の幅、線種、色。*/
}

/*th（左側）のみの設定*/
.ta2-parts th {
	width: 20%;			/*幅*/
	text-align: left;	/*左よせにする*/
	background: #eee;	/*背景色*/
}

/*フォーム関連
---------------------------------------------------------------------------*/
/*ボタン（btn）*/
input[type="submit"].btn,
input[type="button"].btn,
input[type="reset"].btn {
	outline: none;
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	padding: 5px 20px;		/*上下、左右へのボックス内の余白*/
	border-radius: 3px;		/*角丸のサイズ*/
	background: #34698f;	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#3e7daa, #34698f);/*背景グラデーション*/
	color: #fff;	/*文字色*/
}
/*マウスオン時のボタン（btn）設定*/
input[type="submit"].btn:hover,
input[type="button"].btn:hover,
input[type="reset"].btn:hover {
	background: #34698f;	/*背景色*/
	color: #fff;		/*文字色*/
}

/*checkブロック。赤い注意書きブロックです。
---------------------------------------------------------------------------*/
p.check {
	background: #e8da00;
	color:#000;
	padding: 10px 25px !important;
	margin-bottom: 20px;
}
p.check a {color: #000;}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
@keyframes scroll {
0% {opacity: 0;}
100% {opacity: 1;}
}
/*通常時のボタンは非表示*/
body .nav-fix-pos-pagetop a {
	display: none;
}
/*fixmenu_pagetop.jsで設定している設定値になったら出現するボタンスタイル*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
	display: block;text-decoration: none;text-align: center;/*z-index: 100;*/position: fixed;animation-name: scroll;animation-duration: 1s;animation-fill-mode: forwards;
	width: 40px;		/*ボタンの幅*/
	line-height: 40px;	/*ボタンの高さ*/
	bottom: 20px;		/*ウィンドウの下から20pxの場所に配置*/
	right: 3%;			/*ウィンドウの右から3%の場所に配置*/
	background: #555;	/*背景色*/
	border-radius: 50%;	/*円形にする指定。この１行を削除すれば正方形になります。*/
}
/*マウスオン時の背景色*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
	background: #999;
}

/*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%;	/*円形にする*/
}


/*NEWアイコン
---------------------------------------------------------------------------*/
.newicon {
	background: #F00;	/*背景色*/
	color: #FFF;		/*文字色*/
	font-size: 70%;		/*文字サイズ*/
	line-height: 1.5;
	padding: 2px 5px;
	border-radius: 2px;
	margin: 0px 5px;
	vertical-align: text-top;
}

/*ul.disc,olタグ
---------------------------------------------------------------------------*/
ul.disc {
	list-style: disc;
	padding: 0 20px 20px 45px;
}
ol {
	padding: 0 20px 20px 45px;
}

/*その他
---------------------------------------------------------------------------*/
.look {background: #222;padding: 5px 10px;border-radius: 4px;border: 1px solid #333;color: #fff;}
.mb15,.mb1em {margin-bottom: 15px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb50 {margin-bottom: 50px !important;}
.clear {clear: both;}
.color1, .color1 a {color: #ffcc00 !important;}
.pr {font-size: 10px;}
.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}
.fl {float: left;}
.fr {float: right;}
.big1 {font-size: 40px;}
.mini1 {font-size: 11px;display: inline-block;line-height: 1.5;}
.dn {display: none;}
.sh {display: none;}



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

/*header
---------------------------------------------------------------------------*/
/*headerブロック*/
header {
	position: absolute;
	text-align: center;
}
/*ロゴ画像*/
header #logo {
	float: none;
	margin: 0 auto 10px;
}
/*トップページで表示させている「お知らせ」の１行。*/
header #news {
	float: none;
}
/*メインメニュー
---------------------------------------------------------------------------*/
/*アニメーションのフレーム設定。全100コマアニメーションだと思って下さい。
透明(opacity: 0;)から色をつける(opacity: 1;)までの指定。*/
@keyframes menubar {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
/*スマホ用メニューブロック*/
#menubar-s {
	display: block;overflow: hidden;
	position: fixed;
	z-index: 3;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);	/*背景色*/
	animation-name: menubar;		/*上のkeyframesの名前*/
	animation-duration: 0.5s;		/*アニメーションの実行時間。0.5秒。*/
	animation-fill-mode: both;		/*待機中は最初のキーフレームを、完了後は最後のキーフレームを維持*/
	border-top: 1px solid #fff;		/*上の線の幅、線種、色*/
}
/*メニュー１個あたりの設定*/
#menubar-s li a {
	display: block;text-decoration: none;
	padding: 10px 3%;	/*メニュー内の余白。上下、左右。*/
	border-bottom: 1px solid #fff;	/*下の線の幅、線種、色*/
	color: #fff;		/*文字色*/
	font-size: 16px;	/*文字サイズ*/
}
/*説明表記（飾り文字）*/
#menubar-s li a span {
	display: block;
	font-size: 10px;/*文字サイズ*/
}
/*PC用メニューを非表示にする*/
#menubar {display: none;}

/*３本バーアイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr {
	display: block;
	position: fixed;z-index: 50;
	top: 18px;		/*上からの配置場所*/
	right: 10px;	/*右からの配置場所*/
}
/*アイコン共通設定*/
#menubar_hdr.close,
#menubar_hdr.open {
	width: 50px;	/*幅*/
	height: 50px;	/*高さ*/
	border-radius: 50%;
	border: 1px solid #fff;
}
/*三本バーアイコン*/
#menubar_hdr.close {
	background: rgba(0,0,0,0.5) url(../images/icon_menu.png) no-repeat center top/50px;	/*背景色、背景画像の読み込み、画像の上半分（３本マーク）を表示。幅は50px。*/
}
/*閉じるアイコン*/
#menubar_hdr.open {
	background: #000 url(../images/icon_menu.png) no-repeat center bottom/50px;	/*背景色、背景画像の読み込み、画像の下半分（×マーク）を表示。幅は50px。*/
}

/*headerアイコン（facebookやtwitterなどのアイコンブロック）
---------------------------------------------------------------------------*/
/*アイコンを囲むブロック全体の設定*/
header .icon {
	float: none;
	margin-right: 0;
}

/*contents（headerとfooter以外のメインとなるブロック。）
---------------------------------------------------------------------------*/
/*contentsブロック*/
#contents {
	padding: 100px 3% 50px;	/*上下、左右へのブロック内の余白*/
}

/*news.html
---------------------------------------------------------------------------*/
/*日付設定*/
#new dt {
	float: none;
}
/*記事設定*/
#new dd {
	padding-left: 0;
}

/*その他
---------------------------------------------------------------------------*/
body.s-n #sub,body.s-n #footermenu,.m-n {display: none;}
.big1 {font-size: 28px;}
.sh {display:block;}
.pc {display:none;}

}



/*画面を横向きにした場合の高さが500px以下の場合の設定。
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: landscape) and (max-height:500px){

/*メインメニュー。小さな端末用メニューを２列に。
---------------------------------------------------------------------------*/
/*メニュー１個あたりの設定*/
#menubar-s li a {
	float: left;
	width: 44%;
}

}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*全体の設定
---------------------------------------------------------------------------*/
body {
	font-size: 12px;
	font-size: 2.93vw;
}

/*contents（headerとfooter以外のメインとなるブロック。）
---------------------------------------------------------------------------*/
/*見出し(h2)タグ*/
#contents h2 {
	font-size: 22px;	/*文字サイズ*/
	letter-spacing: normal;
}
/*見出し(h2)タグ内のspanタグ。小文字の設定。*/
#contents h2 span {
	font-size: 11px;
	letter-spacing: 0.2em;
}
/*見出し(h3)タグ*/
#contents h3 {
	font-size: 18px;	/*文字サイズ*/
	background: url(../images/arrow1.png) no-repeat 8px center / 14px;
	padding: 0 10px 0 25px;	/*上、右、下、左への余白*/
}
/*段落(p)タグ*/
#contents p {
	padding: 0 10px 20px;	/*上、左右、下への余白*/
}
#contents section + section {
	padding-top: 20px;
}

/*listブロック（works.htmlで使用）
---------------------------------------------------------------------------*/
/*リンクを指定した際に右上に出る「→」*/
.list a::after {
	right: 2px;			/*右からの配置場所指定*/
	top: 2px;			/*上からの配置場所指定*/
	line-height: 20px;	/*行間。下のwidthと揃えて下さい。*/
	width: 20px;		/*幅。上のline-heightと揃えて下さい。*/
}
/*h4タグ*/
.list h4 {
	padding: 0;
}


/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*テーブル１行目の見出し（※caption）*/
.ta1 caption {
	padding: 5px;	/*ボックス内の余白*/
}
/*ta1設定*/
.ta1, .ta1 td, .ta1 th {
	padding: 5px;	/*ボックス内の余白*/
}
/*ta1の左側ボックス*/
.ta1 th {
	width: 100px;
}

/*ul.disc,olタグ
---------------------------------------------------------------------------*/
ul.disc {
	list-style: disc;
	padding: 0 10px 20px 30px;
}
ol {
	padding: 0 10px 20px 30px;
}

/*その他
---------------------------------------------------------------------------*/
.ws,.wl {width: 94%;}
.big1 {font-size: 20px;}

}

/*追加の装飾
---------------------------------------------------------------------------*/
.heading-31 {
    position: relative;
    padding: .3em 0 .2em 1em;
    border-bottom: 3px solid #421272;
    color: #333333;
}

.heading-31::before {
    position: absolute;
    top: 0;
    left: .3em;
    transform: rotate(55deg);
    height: 11px;
    width: 12px;
    background: #421272;
    content: '';
}

.heading-31::after {
    position: absolute;
    transform: rotate(15deg);
    top: .6em;
    left: 0;
    height: 8px;
    width: 8px;
    background: #421272;
    content: '';
}

.heading-33 {
    border-bottom: 3px solid #f2f2f2;
}

.heading-33 span {
    display: inline-block;
    position: relative;
    padding: 0 .4em .2em;
    color: #333333;
}

.heading-33 span::before {
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #421272;
    content: '';
}

.heading-26 {
    color: #333333;
}

.heading-26:first-letter {
    color: #7d2cce;
    font-size: 2em;
}

.heading-29 {
    display: inline-block;
    position: relative;
    margin: calc(3.5em / 2) 0 calc(3.5em / 4) calc(3.5em / 2);
    color: #333333;
    line-height: 1;
}

.heading-29::before {
    position: absolute;
    bottom: calc(-3.5em / 4);
    left: calc(-3.5em / 2);
    z-index: -1;
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    background: #f6c9fd;
    content: '';
}

.heading-41 {
    display: flex;
    align-items: center;
    padding: .5em .7em;
    background-color: #f2f2f2;
    color: #333333;
    width: fit-content;
}

.heading-41::before {
    display: inline-block;
    width: 5px;
    height: 1.5em;
    margin-right: .5em;
    background-color: #993399;
    content: '';
}

.heading-38 {
    position: relative;
    padding: .5em 1.2em;
    color: #333333;
    width: fit-content;
}

.heading-38::before,
.heading-38::after {
    display: inline-block;
    position: absolute;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border: 2px solid #421271;
    content: '';
}

.heading-38::before {
    top: calc(50% - 3px);
    left: 0;
}

.heading-38::after {
    top: calc(50% + 3px);
    left: 5px;
}

.heading-17 {
    display: flex;
    justify-content: start;
    align-items: center;
    position: relative;
    padding: .5em .7em;
    overflow: hidden;
    border: 2px solid #993399;
    border-radius: 5px;
    color: #333333;
    width: fit-content;
}

.heading-17:before {
    position: absolute;
    top: -50%;
    left: -30px;
    z-index: -1;
    transform: rotate(25deg);
    width: 70px;
    height: 180%;
    background-color: #993399;
    content: '';
}

.heading-17 span {
    margin-right: 1.1em;
    color: #fff;
    font-size: 1.1em
}

.heading-18 {
    padding: .5em .7em;
    border: 2px solid #421272;
    box-shadow: 5px 5px #421272;
    color: #421272;
    width: fit-content;
    background-color: #fee8ff;
}

.heading-23 {
    padding: .5em .7em;
    border-left: 5px solid #2589d0;
    border-bottom: 3px solid #d2d2d2;
    background-color: #f2f2f2;
    color: #333333;
}

.heading-11 {
    position: relative;
    padding: .5em .7em;
    background-color: #421272;
    color: #fff;
}

.heading-11::before {
    position: absolute;
    top: 100%;
    left: 0;
    border-bottom: solid 10px transparent;
    border-right: solid 20px #320262;
    content: '';
}

.heading-11b {
    position: relative;
    padding: .5em .7em;
    background-color: #993399;
    color: #fff;
}

.heading-11b::before {
    position: absolute;
    top: 100%;
    left: 0;
    border-bottom: solid 10px transparent;
    border-right: solid 20px #892389;
    content: '';
}

.heading-11c {
    position: relative;
    padding: .5em .7em;
    background-color: #680d68;
    color: #fff;
}

.heading-11c::before {
    position: absolute;
    top: 100%;
    left: 0;
    border-bottom: solid 10px transparent;
    border-right: solid 20px #580058;
    content: '';
}
.heading-15 {
    display: inline-block;
    position: relative;
    padding: .5em 1em;
    border-right: 27px solid #993399;
    background-color: #f5f5f5;
    color: #333333;
}

.heading-15::before {
    position: absolute;
    bottom: 2px;
    right: -20px;
    z-index: -1;
    transform: rotate(5deg);
    width: 100%;
    height: 50%;
    background-color: #d0d0d0;
    content: "";
    filter: blur(4px);
}

.heading-6 {
    display: inline-block;
    position: relative;
    padding: 0 2.5em;
    color: #333333;
}

.heading-6::before,
.heading-6::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    width: 45px;
    height: 3px;
    background-color: #993399;
}

.heading-6::before {
    left: 0;
}

.heading-6::after {
    right: 0;
}

.heading-8 {
    display: inline-block;
    position: relative;
    padding: .5em .7em;
    border-radius: 50px 0 0 50px;
    background-color: #993399;
    color: #fff;
}

.heading-8::before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 13px;
    border-radius: 50%;
    background: #fff;
}

.box-021 {
    position: relative;
    max-width: 900px;
    margin: 1em auto;
    padding: 1em 1.5em;
    border: 2px solid #993399;
    border-radius: 3px;
    color: #333;
}

.box-021::before {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -1em;
    left: -1em;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background-color: #993399;
    color: #fff;
    font-weight: 600;
    content: attr(data-number);
}

.button-29 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    margin:0 auto;
    padding: .9em 2em;
    overflow: hidden;
    border: 1px solid #421272;
    border-radius: 5px;
    background-color: #fff;
    color: #421272;
    font-size: 2em;
}

.button-29:hover {
    background-color: transparent;
    color: #fff;
}

.button-29::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 0;
    height: 100%;
    background-color: #421272;
    content: '';
    transition: width .3s ease;
}

.button-29:hover::before {
    width: 100%;
}

.button-29::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #421272;
    border-right: 2px solid #421272;
    content: '';
}

.button-29:hover::after {
    border-color: #fff;
}

.heading-10 {
    display: inline-block;
    position: relative;
    transform: rotate(-5deg);
    padding: .5em .7em;
    border-left: 2px dotted rgba(0, 0, 0, .1);
    border-right: 2px dotted rgba(0, 0, 0, .1);
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    background-color: rgba(0, 0, 0, .01);
    color: #333333;
}

.balloon-003 {
    display: flex;
    align-items: center;
    position: relative;
    max-width: 800px;
    margin-left: 15px;
    padding: .8em 1.2em;
    border-radius: 5px;
    background-color: #f2f2f2;
    color: #333333;
}

.balloon-003::before {
    position: absolute;
    right: -15px;
    width: 15px;
    height: 30px;
    background-color: #f2f2f2;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: '';
}

.balloon-004 {
    display: flex;
    align-items: center;
    position: relative;
    max-width: 800px;
    margin-left: 15px;
    padding: .8em 1.2em;
    border-radius: 5px;
    background-color: #fff4f4;
    color: #333333;
}

.balloon-004::before {
    position: absolute;
    left: -15px;
    width: 15px;
    height: 30px;
    background-color: #fff4f4;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    content: '';
}

/*リスト
---------------------------------------------------------------------------*/
.list-1 {
    list-style-type: disc;
}

.list-1 li {
    padding: .3em .3em .3em 0;
}

.list-1 li::marker {
    color: #993399;
    font-size: 1.1em;
}

/*問い合わせ用
---------------------------------------------------------------------------*/

.textbox-1-label,
.textbox-1 {
    color: #333;
}

.textbox-1-label {
    display: block;
    margin-bottom: 5px;
    font-size: .9em;
    width: fit-content;
}

.textbox-1 {
    width: 96%;
    padding: 8px 10px;
    border: 1px solid #969da3;
    border-radius: 3px;
    font-size: 1em;
    line-height: 1.5;
    max-width: 620px;
}

.textbox-1::placeholder {
    color: #999;
}

.textbox-2-label,
.textbox-2 {
    color: #333;
}

.textbox-2-label {
    display: block;
    margin-bottom: 5px;
    font-size: .9em;
    width: fit-content;
}

.textbox-2 {
    width: 50px;
    padding: 8px 10px;
    border: 1px solid #969da3;
    border-radius: 3px;
    font-size: 1em;
    line-height: 1.5;
    max-width: 600px;
}

.textbox-2::placeholder {
    color: #999;
}

.textbox-3-label,
.textbox-3 {
    color: #333;
}

.textbox-3-label {
    display: block;
    margin-bottom: 5px;
    font-size: .9em;
    width: fit-content;
}

.textbox-3 {
    width: 30px;
    padding: 8px 10px;
    border: 1px solid #969da3;
    border-radius: 3px;
    font-size: 1em;
    line-height: 1.5;
    max-width: 600px;
}

.textbox-3::placeholder {
    color: #999;
}

.textbox-4-label,
.textbox-4 {
    color: #333;
}

.textbox-4-label {
    display: block;
    margin-bottom: 5px;
    font-size: .9em;
    width: fit-content;
}

.textbox-4 {
    width: 180px;
    padding: 8px 10px;
    border: 1px solid #969da3;
    border-radius: 3px;
    font-size: 1em;
    line-height: 1.5;
    max-width: 600px;
}

.textbox-4::placeholder {
    color: #999;
}

.radio-2 {
    display: flex;
    flex-wrap: wrap;
    gap: .3em 2em;
    border: none;
}

.radio-2 label {
    display: flex;
    align-items: center;
    gap: 0 .5em;
    position: relative;
    cursor: pointer;
}

.radio-2 label::before,
.radio-2 label::after {
    border-radius: 50%;
    content: '';
}

.radio-2 label::before {
    width: 18px;
    height: 18px;
    border: 2px solid #dee5eb;
    box-sizing: border-box;
}

.radio-2 label::after {
    position: absolute;
    top: 50%;
    left: 9px;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    background-color: #dee5eb;
}

.radio-2 label:has(:checked)::after {
    background-color: #993399;
    animation: anim-radio-2 .3s linear;
}

@keyframes anim-radio-2 {
    0% {
        box-shadow: 0 0 0 1px transparent;
    }
    50% {
        box-shadow: 0 0 0 10px #99339933;
    }
    100% {
        box-shadow: 0 0 0 10px transparent;
    }
}

.radio-2 input {
    display: none;
}

.button-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
/*    width: 250px; */
    margin:0 auto;
    padding: .9em 2em;
    border: none;
    border-radius: 5px;
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
}

.button-2:hover {
    background-color: #1579c0;
}

.checkbox-3 {
    border: none;
}

.checkbox-3 label {
    display: flex;
    align-items: center;
    gap: 0 .5em;
    position: relative;
    max-width: 600px;
    margin-bottom: .4em;
    padding: .5em .7em;
    border: 1px solid #2589d0;
    border-radius: 3px;
    background-color: #2589d026;
    cursor: pointer;
}

.checkbox-3 label:has(:checked) {
    background-color: #2589d0;
    color: #fff;
}

.checkbox-3 label::before {
    width: 14px;
    height: 14px;
    border-radius: 1px;
    background-color: #fff;
    content: '';
}

.checkbox-3 label:has(:checked)::after {
    position: absolute;
    top: 14px;
    left: 15px;
    transform: rotate(45deg);
    width: 4px;
    height: 8px;
    border: solid #2589d0;
    border-width: 0 2px 2px 0;
    content: '';
}

.checkbox-3 input {
    display: none;
}

.checkbox-2 {
    display: flex;
    flex-wrap: wrap;
    gap: .5em 2em;
    border: none;
}

.checkbox-2 label {
    display: flex;
    align-items: center;
    gap: 0 .5em;
    position: relative;
    cursor: pointer;
}

.checkbox-2 label::before {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: 2px solid #d6dde3;
    content: '';
}

.checkbox-2 label:has(:checked)::after {
    position: absolute;
    top: 5px;
    left: 7px;
    transform: rotate(45deg);
    width: 5px;
    height: 10px;
    border: solid #2589d0;
    border-width: 0 3px 3px 0;
    content: '';
}

.checkbox-2 input {
    display: none;
}

.required {
  position: relative;
}

.required::after {
  content: "必須";
/*  background-color: #f0ad4e;*/
  background-color: #f00000;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  min-width: 10px;
  padding: 3px 7px;
  margin: 0px 5px;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  border-radius: 10px;
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -50px; /* 必要に応じて調整 */
}

.tablex2{
    margin: auto;
}

.heading-21 {
    position: relative;
    padding: .5em .7em .4em;
    border-bottom: 3px solid #2589d0;
    color: #333333;
}

.heading-21::before,
.heading-21::after {
    position: absolute;
    left: 30px;
    bottom: -15px;
    width: 30px;
    height: 15px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}

.heading-21::before {
    background-color: #2589d0;
}

.heading-21::after {
    bottom: -11px;
    background-color: #fff;
}

.heading-2 {
    padding:0 .4em .2em;
    border-bottom: 3px solid #421272;
    background-color: #fff0f0;
    color: #421272;
}

.heading-2b {
    padding:0 .4em .2em;
    border-bottom: 3px solid #421272;
    background-color: #fffee4;
    color: #421272;
}

.heading-2c {
    padding:0 .4em .2em;
    border-bottom: 3px solid #421272;
    background-color: #fff0ff;
    color: #421272;
}

.heading-2d {
    padding:0 .4em .2em;
    border-bottom: 3px solid #421272;
    background-color: #f0fff0;
    color: #421272;
}

.selectbox-3 {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.selectbox-3::after {
    position: absolute;
    right: 15px;
    width: 10px;
    height: 7px;
    background-color: #535353;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    pointer-events: none;
}

.selectbox-3 select {
    appearance: none;
    min-width: 230px;
    height: 2.8em;
    padding: .4em calc(.8em + 30px) .4em .8em;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
    background-color: #fff;
    color: #333333;
    font-size: 1em;
    cursor: pointer;
}

.button-29a {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 400px;
    margin:0 auto;
    padding: .9em 2em;
    overflow: hidden;
    border: 1px solid #993399;
    border-radius: 5px;
    background-color: #fff;
    color: #993399;
    font-size: 1em;
}

.button-29a:hover {
    background-color: transparent;
    color: #fff;
}

.button-29a::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 0;
    height: 100%;
    background-color: #993399;
    content: '';
    transition: width .3s ease;
}

.button-29a:hover::before {
    width: 100%;
}

.button-29a::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #993399;
    border-right: 2px solid #993399;
    content: '';
}

.button-29a:hover::after {
    border-color: #fff;
}

.button-29b {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    margin:0 auto;
    padding: .9em 2em;
    overflow: hidden;
    border: 1px solid #888888;
    border-radius: 5px;
    background-color: #fff;
    color: #333333;
    font-size: 1em;
    transition: color 0.3s ease-out;
}

.button-29b:hover {
    background-color: transparent;
    color: #ffffff;
}

.button-29b::before {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #aaaaaa;
    color: #ffffff;
    transform: scaleX(0);
    transform-origin: left;
    transition: all 0.3s ease-out;
    transition-property: transform;
}

.button-29b:hover::before {
    transform: scaleX(1);
    transform-origin: right;
}

.radio-3 {
    border: none;
}

.radio-3 label {
    display: flex;
    align-items: center;
    gap: 0 .5em;
    position: relative;
    max-width: 200px;
    margin-bottom: .4em;
    padding: .5em .7em;
    border: 1px solid #993399;
    border-radius: 3px;
    background-color: #99339916;
    cursor: pointer;
}

.radio-3 label:has(:checked) {
    background-color: #993399;
    color: #fff;
}

.radio-3 label::before,
.radio-3 label:has(:checked)::after {
    border-radius: 50%;
    content: '';
}

.radio-3 label::before {
    width: 14px;
    height: 14px;
    background-color: #fff;
}

.radio-3 label:has(:checked)::after {
    position: absolute;
    top: 50%;
    left: calc(7px + .7em);
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    background-color: #993399;
}

.radio-3 input {
    display: none;
}

.breadcrumb-004 {
    display: flex;
    gap: 0 20px;
    list-style: none;
    padding: 6px 0 6px 18px;
    border-radius: 3px;
    overflow: hidden;
    background-color: #421272;
    font-size: 1em;
}

.breadcrumb-004 li {
    display: flex;
    align-items: center;
    position: relative;
    padding-right: 20px;
}

.breadcrumb-004 li:not(:last-child)::before,
.breadcrumb-004 li:not(:last-child)::after{
    position: absolute;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    content:'';
}

.breadcrumb-004 li:not(:last-child)::before{
    right: 0;
    border-left: 10px solid #fff;
}

.breadcrumb-004 li:not(:last-child)::after{
    right: 2px;
    border-left: 10px solid #421272;
}

.breadcrumb-004 a {
    color: #fff;
    text-decoration: none;
}

.breadcrumb-004 a:hover {
    color: #ee88ee;
    text-decoration: none;
}

.heading-10 {
    display: inline-block;
    position: relative;
    transform: rotate(0deg);
    padding: .5em .7em;
    border-left: 2px dotted rgba(0, 0, 0, .1);
    border-right: 2px dotted rgba(0, 0, 0, .1);
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    background-color: rgba(0, 0, 0, .01);
    color: #421272;
}

.heading-14 {
    display: inline-block;
    position: relative;
    padding: .5em 1.4em .5em 1em;
    background-color: #fee0f0;
    color: #333333;
}

.heading-14::before {
    position: absolute;
    bottom: -1px;
    right: 9px;
    z-index: -1;
    transform: rotate(5deg);
    width: 70%;
    height: 50%;
    background-color: #d0d0d0;
    content: "";
    filter: blur(4px);
}

.heading-22 {
    display: inline-block;
    position: relative;
    padding: .5em .7em;
    border-left: 5px solid #421272;
    background-color: #ffeef0;
    color: #421272;
}