@charset "utf-8";

@import url("form_parts.css?dm=4");

@font-face {
	font-family: "pome";
	src: url("../font/Pomeranian-Regular.ttf") format("truetype");
	font-display: swap;
}
@font-face {
	font-family: "delasuko";
	src: url("../font/DelaSukoGothicOne-R.ttf") format("truetype");
	font-display: swap;
}

:root {
	--primary-color: #847720;
	--primary-inverse-color: #fff;
	--primary-color-rgb: 132,119,32;
	--global-space: 3vw;
	overflow-x: hidden;
}

body * {box-sizing: border-box;}

html,body {
	font-size: 13px;
}

@media screen and (min-width:900px) {
	html, body {
		font-size: 16px;
	}
}

body {
	/*font-family: delasuko;*/
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	margin: 0;
	padding: 0;
	background-color: #ffeb3b;
}

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

ul,ol {margin-left: 1.5rem;margin-bottom: 1rem;}

table {border-collapse:collapse;}

img {
	border: none;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	margin: 0 auto;
}

iframe {width: 100%;}

section + section {
	padding-top: 8vw;
}

a {
	color: black;		/*リンクテキストの色*/
	transition: 0.3s;	/*マウスオン時の移り変わるまでの時間設定。0.3秒。*/
}
a:hover {
	color: var(--primary-color);	/*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
	filter: brightness(1.2);		/*マウスオン時に少し明るくする*/
}

.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;
	text-decoration: none;
	text-align: center;
	z-index: 99;
	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%;	/*円形にする*/
}

/* hedaer */
/* header */
header .header-back {
	position: relative;
	background: #fff;
	height: 20vh;
	z-index: -1;
	overflow-x: clip;
}
header .wave {
	position: absolute;
	height: 144px;
	width: 100%;
	background: #fff;
	bottom: 0;
}

header .wave::before, .wave::after {
	content: "";
	display: block;
	position: absolute;
	border-radius: 100% 50%;
}

header .wave::before {
	width: 55%;
	height: 109%;
	background-color: #ffeb3b;
	right: -1.5%;
	top: 60%;
}
header .wave::after {
	width: 55%;
	height: 100%;
	background-color: #fff;
	left: -1.5%;
	top: 40%;
}
/*トップページのロゴ画像*/
header #logo {
	width: 20%;
	position: absolute;
	z-index: 1;
	top: 0%;
	left: 0%;
}
header .logo_txt {
	position: absolute;
	left: 17%;
	top: 2%;
}
header .logo_txt .main {
	margin: 0px;
	font-weight: bold;
	font-size: 50px;
	line-height: 2em;
}
header .logo_txt .sub {
	margin: 0px;
	font-weight: bold;
	font-size: 20px;
}

header #menubar {
	position: absolute;
	top: 2%;
	left: 40%;
	width: 55%;
}

header .large-screen #menubar li {
	flex: 1;
	position: relative;
	text-align: center;
	max-width: fit-content;
	font-size: 20px;
}

@media screen and (max-width:900px) {
	header .header-back {
		height: 15vh;
	}
	header .container {
		position: relative;
		background: white;
	}

	header .wave {
		position: absolute;
		height: 37px;
		width: 100%;
		background: white;
		bottom: 0;
	}

	header .wave::before, .wave::after {
		content: "";
		display: block;
		position: absolute;
		border-radius: 100% 50%;
	}

	header .wave::before {
		width: 55%;
		height: 109%;
		background-color: #ffeb3b;
		right: -1.5%;
		top: 60%;
	}
	header .wave::after {
		width: 55%;
		height: 100%;
		background-color: white;
		left: -1.5%;
		top: 40%;
	}
	header .logo_txt {
		position: absolute;
		text-align: center;
		left: 2%;
		top: 2%;
		width: 36%;
	}
	header .logo_txt .main {
		font-size: 18px;
	}
	header .logo_txt .sub {
		font-size: 13px;
	}
}

/* footer */
footer {
	margin-top: 20px;
	background: white;
}
#footer-contents, #footermenu {
	padding: 2rem var(--global-space);	/*上下、左右へのボックス内の余白。左右はcss冒頭で指定しているglobal-spaceを読み込みます*/
}

footer .sns-btn {
	display: flex;
	margin: 20px;
	gap: 20%;
	justify-content: center;
}
footer .sns-btn li {
	list-style: none;
	width: 30px;
	margin-left: 10px;
	margin-right: 10px;
}

/*フッターのコンテンツ（住所やマップが入っているブロック）
---------------------------------------------------------------------------*/
/*ブロック全体*/
#footer-contents {
	background: rgba(var(--primary-color-rgb), 0.8);
	color: var(--primary-inverse-color);	/*文字色*/
}
#footer-contents a {
	color: inherit;
}

/*左側のブロック*/
#footer-contents .left {
	margin-bottom: 50px;	/*下に空けるスペース*/
}

/*ブロック内で使うbtnの設定*/
#footer-contents .btn a {
	border: 2px solid var(--primary-inverse-color);	/*枠線の幅、線種、色。色についてはcss冒頭の（primary-inverse-color）を読み込みます。*/
}

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

	#footer-contents {
		display: flex;	/*直接の子要素を横並びにします*/
		gap: var(--global-space);	/*左右のボックスの間のマージン的な設定。css冒頭で指定しているglobal-spaceを読み込みます。*/
	}

	/*左側のブロック*/
	#footer-contents .left {
		margin-bottom: 0;	/*下のマージン（外側への余白）をリセット*/
		width: 50%;			/*幅。leftとrightで合計100になれば、お好みで変更してもらって構いません。*/
	}

	/*右側のブロック*/
	#footer-contents .right {
		width: 50%;			/*幅。leftとrightで合計100になれば、お好みで変更してもらって構いません。*/
	}

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


/*footer-contents内のマップ。レスポンシブにする為のものなので、基本は編集不要です。
---------------------------------------------------------------------------*/
.iframe-box {
	width: 100%;
	height: 0;
	padding-top: 56.25%;	/*マップの高さを増やしたい場合は、ここの数値を上げてみて下さい。*/
	position: relative;
	overflow: hidden;
}
.iframe-box iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}


/*フッターメニュー設定
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
#footermenu {
	background: var(--primary-color);		/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
	font-size: 0.8rem;		/*文字サイズ。*/
	display: flex;			/*直接の子要素を横並びにします*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	align-items: flex-start;		/*垂直揃えの指定。上に配置されるように。*/
}

/*ボックス内のリンクテキスト設定*/
#footermenu a {
	text-decoration: none;
	color: inherit;
}

/*ulタグ（メニューの１列あたり）*/
#footermenu ul {
	margin: 0;list-style: none;
	padding: 0 0.3em;
	flex: 1;
}

/*メニューの見出し(title)*/
#footermenu .title {
	font-weight: bold;		/*太字にする*/
	padding-bottom: 5px;	/*下に空けるスペース*/
}


/*フッター設定
---------------------------------------------------------------------------*/
small {font-size: 100%;}
footer {
	font-size: 0.7rem;		/*文字サイズ*/
	color: #000;			/*文字色*/
	text-align: center;		/*内容をセンタリング*/
	padding: 1rem;			/*ボックス内の余白*/
}

/*リンクテキスト*/
footer a {color: inherit;text-decoration: none;}

/*著作部分*/
footer .pr {display: block;}


/*フッター内にあるソーシャルメディアのアイコン
---------------------------------------------------------------------------*/
ul.icons {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	align-self: center;
	gap: 1rem;	/*アイコン同士のマージン的な要素。１文字分。*/
}
.icons i {
	font-size: 40px;	/*アイコンサイズ*/
}

/*メニューをデフォルトで非表示*/
#menubar {
	display: none;
}
#menubar ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 10vh;
}
#menubar a {
	text-decoration: none;
	color: black;
	font-weight: bold;
}
@media screen and (max-width:900px) {
	#menubar ul {
		flex-flow: column;
		gap: 2vh;
	}
}

/*上で非表示にしたメニューを表示させる為の設定*/
.large-screen #menubar {
	display: block;
}
.small-screen #menubar.display-block {
	display: block;
}

/*3本バーをデフォルトで非表示*/
#menubar_hdr.display-none {display: none;}

/*ドロップダウンをデフォルトで非表示*/
.ddmenu_parent ul {display: none;}

/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
a.ddmenu::before {
	font-family: "Font Awesome 5 Free";
	content: "\f078";		/*使いたいアイコン名（Font Awesome）をここで指定*/
	font-weight: bold;		/*この手の設定がないとアイコンが出ない場合があります*/
	font-size: 0.7rem;		/*文字サイズを70%に*/
	padding-right: 0.5rem;	/*右側に空ける余白。0.5文字分。*/
}


/*大きな端末、小さな端末共通のメニューブロック設定
---------------------------------------------------------------------------*/
/*メニュー１個あたりの設定*/
#menubar a {
	display: block;text-decoration: none;
}

/*小文字の英語部分*/
#menubar span {
	display: block;
	font-size: 0.7em;		/*文字サイズを親要素の70%に*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くとる*/
	opacity: 0.6;			/*透明度。色が60%出た状態。*/
}


/*大きな端末用のメニューブロック設定
---------------------------------------------------------------------------*/
/*メニューブロックを囲むボックス*/
.large-screen #menubar {
	flex: 1;
}

/*メニューブロック全体の設定*/
.large-screen #menubar > nav > ul {
	display: flex;	/*メニューを横並びにする*/
	justify-content: space-between;
	align-items: center;
}

/*メニュー１個あたりの設定*/
.large-screen #menubar li {
	flex: 1;			/*個々のメニューを均等にし、幅いっぱいまで使う設定*/
	position: relative;	/*ドロップダウンの幅となる基準を作っておく*/
	text-align: center;	/*テキストをセンタリング*/
}

/*現在表示中メニュー（current）*/
.large-screen #menubar li.current > a {
	border-bottom: 2px solid var(--primary-color);	/*下線の幅、線種、varは色のことでcss冒頭で指定しているprimary-colorを読み込みます。。*/
}

/*リンク（a要素）の設定*/
.large-screen #menubar li a {
	padding: 1rem 0;	/*上下、左右の余白*/
}


/*大きな端末、小さな端末、共通のドロップダウンメニュー設定
---------------------------------------------------------------------------*/
/*ドロップダウンブロック*/
.large-screen #menubar ul ul,
.small-screen #menubar ul ul {
	animation: opa1 0.5s 0.1s both;	/*0.1秒待機後、0.5秒かけてフェードイン表示*/
}


/*大きな端末用のドロップダウンメニュー
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
.large-screen #menubar ul ul {
	position: absolute;z-index: 2;
	width: 100%;
	top: 100%;
	left: 0px;
}

/*ドロップダウンメニュー1個あたりの上下、左右への余白。*/
.large-screen #menubar ul ul a {
	padding: 0.6rem 1rem !important;	/*上下、左右へのメニュー内の余白*/
	background: #0d243a;	/*背景色*/
	margin: 3px 3px 0;	/*メニューの外側に空けるスペース。上、左右、下への順番。*/
	border-radius: 5px;	/*角を丸くする指定*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
}

/*マウスオン時*/
.large-screen #menubar ul ul a:hover {
	background: var(--primary-color);		/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
}


/*小さな端末用の開閉ブロック
---------------------------------------------------------------------------
/*メニューブロック設定*/
.small-screen #menubar.display-block {
	position: fixed;overflow: auto;z-index: 100;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding-top: 100px;	/*上に空ける余白。ハンバーガーアイコンと重ならない為の指定ですのでお好みで変更OK。*/
	background: var(--primary-color);
	animation: animation1 0.2s both;		/*animation1を実行する。0.2sは0.2秒の事。*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
}

/*メニュー１個あたりの設定*/
.small-screen #menubar li {
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	margin: 1rem;			/*メニューの外側に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}
.small-screen #menubar a {
	color: inherit;
	padding: 1rem 3rem;		/*メニュー内の余白。上下、左右へ。*/
}
.small-screen #menubar li li a {
	background: var(--primary-inverse-color);	/*背景色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
	color: var(--primary-color);	/*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
	animation: opa1 0.3s 0.5s both;
	position: fixed;
	z-index: 101;
	cursor: pointer;
	top: 2vw;		/*上からの配置場所*/
	right: 2vw;		/*右からの配置場所*/
	width: 50px;	/*幅*/
	height: 50px;	/*高さ*/
	padding: 15px;	/*ブロック内の余白*/
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.5s;
	background: rgba(0,0,0,0.6);	/*背景色*/
}

/*ここは変更不要*/
#menubar_hdr div {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/*バーの設定*/
#menubar_hdr div span {
	display: block;
	width: 100%;
	height: 2px;			/*線の太さ*/
	background-color: #fff;	/*線の色*/
	border-radius: 2px;		/*コーナーを少しだけ丸く*/
	transition: all 0.5s ease-in-out;
	position: absolute;
}

/*以下変更不要*/
#menubar_hdr div span:nth-child(1) {top: 0;}
#menubar_hdr div span:nth-child(2) {top: 50%;transform: translateY(-50%);}
#menubar_hdr div span:nth-child(3) {bottom: 0;}
#menubar_hdr.ham div span:nth-child(1) {top: 50%;transform: translateY(-50%) rotate(45deg);}
#menubar_hdr.ham div span:nth-child(2) {opacity: 0;}
#menubar_hdr.ham div span:nth-child(3) {top: 50%;transform: translateY(-50%) rotate(-45deg);}

#logo img {
	display: block;
}
#logo {
	margin: 0;
	padding: 0;
	width: 200px;
}
@media screen and (max-width:900px) {
	/*ロゴ画像*/
	#logo img {
		margin: auto;
		height: 100px;
	}
	/*ロゴサイズの上書き*/
	.home #logo {
		min-width: 120px;
		width: 100% !important;
		transform: none;;
	}
}
.top-contents {
	position: relative;
	text-align: center;
	padding: 100px 0px;
}
.top-contents * {
	font-weight: bold;
}

.top-contents p.title {
	font-size: 18px;
}
.top-contents p.title:before {
	font-family: 'Font Awesome 5 Free';
	content: '\f0c8';
	color: #ffeb3b;
	margin: 0px 10px;
}

.top-contents div.caption {
	display: inline-block;
	background: #fcfdeb;
	text-align: left;
	width: 50%;
	margin: 10px;
	padding: 5px 10px;
}

@media screen and (max-width:900px) {
	.top-contents div.caption {
		width: inherit;
	}
}

.home .top-message1 span,
.home .top-message2 span {
	font-size: 54px;
}
.home .top-message1 img {
	width: 300px;
}

.home.small-screen .top-message1 span,
.home.small-screen .top-message2 span {
	font-size: 32px;
	display: block;
	width: 100%;
}
.home.small-screen .top-message1 span {
	padding-left: 1em;
	text-align: left;
}
.home.small-screen .top-message2 span {
	padding-right: 1em;
	text-align: right;
}

/*装飾用の小文字*/
.top-contents h2 .small {
	display: block;
	font-size: 0.5em;	/*文字サイズを親要素の50%に*/
	opacity: 0.7;		/*透明度。色が70%出た状態。*/
	font-weight: 200;	/*文字の太さ。100から900まで指定可能。*/
}

/*h3見出し*/
.top-contents h3 {
	font-size: 1.4rem;		/*文字サイズ*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くする*/
	font-weight: normal;	/*デフォルトの太字を標準に*/
}

section.top-contents + section.top-contents {
	background: #fff;
}

/* メインエリア */
h1.page_title {
	margin: 0;
	text-align: center;
}
.main_contents {
	border: 3px ridge #999;
	margin: 10px;
	padding: 10px;
}
.breadcrumbs {
	margin: 10px;
}
.main_contents .row {
	display: flex;
	margin: 0 auto;
	width: 100%;
	justify-content: center;
	flex-wrap: wrap;
}
.main_contents .row+.row {
	margin-top: 4px;
}
.main_contents .item {
	padding: 4px;
	flex: 1;
	gap: 2%;
	align-items: center;
}
.main_contents .item:nth-child(1) {
	max-width: 30%;
}
.main_contents .results_area .item:nth-last-child(1) {
	max-width: 8%;
}
/* 検索フォームのrankのFlex */
.rank_row {
	display: flex;
	margin: 0 auto;
	width: 100%;
	justify-content: center;
	flex-wrap: wrap;
	text-align: center;
}
.rank_row+.row {
	margin-top: 4px;
}
.rank_item {
	padding: 4px;
	flex: 1;
	gap: 2%;
	align-items: center;
}
/* 検索結果のFlex */
.results_area {
	margin-top: 20px;
}
.results_area .row {
	display: flex;
	margin: 0 auto;
	justify-content: center;
	flex-wrap: wrap;
}
.results_area .row+.row {
	margin-top: 2px;
	margin-bottom: 2px;
}
.results_area .item {
	padding: 4px;
	flex: 1;
	text-align: center;
	gap: 2%;
	align-items: center;
}
.results_area .row:first-child {
	border-bottom: 3px ridge #999;
}
.results_area .row:not(:first-child) {
	border-bottom: 1px dashed #999;
}
.results_area .row:last-child {
	border-bottom: none !important;
}
.results_area .item.icon {
	max-width: 10%;
}

.add_event {
	text-align: right;
	margin-right: 10px;
	font-size: 18px;
}
.add_icon,
.edit_icon,
.delete_icon,
.detail_icon{
	font-family: 'Font Awesome 5 Free';
	text-decoration: none;
}
.add_icon:before {
	content: '\f0fe';
	color: green;
}
.edit_icon:before {
	content: '\f044';
	color: blue;
}
.delete_icon:before {
	content: '\f2ed';
	color: gray;
}
.detail_icon:before {
	content: '\f044';
	color: green;
}

/* each number coloring */
.number_set {
	text-align: center;
}
.number_set.type1 {
	color: #000;
	background: #FFFFFF;
}
.number_set.type2 {
	border: 1px solid #505050;
	background: #505050;
}
.number_set.type3 {
	border: 1px solid #F04141;
	background: #f04141;
}
.number_set.type4 {
	border: 1px solid #4184D0;
	background: #4184d0;
}
.number_set.type5 {
	color: #000;
	border: 1px solid #D5D6D7;
	background: #ece962;
}
.number_set.type6 {
	border: 1px solid #54B74D;
	background: #54b74d;
}
.number_set.type99 {
	color: #000;
	border: 1px solid lightgray;
	background: lightgray;
}

@media screen and (min-width:900px) {
	.main_contents {
		width: 60%;
		margin: 10px auto;
	}
	.breadcrumbs {
		width: 60%;
		margin: 10px auto;
	}
	.results_area .row {
		width: 75%;
	}
}
.attention {
	margin: 0;
	color: red;
	font-weight: bold;
}
.count_entry,
.tip {
	position: relative;
}
.count_entry:has(.tooltip),
.tip:has(.tooltip) {
	color: blue;
}
span.part {
	width: 14%;
	display: inline-block;
	text-align: center;
}
.bb1 {
	border-bottom: 1px solid;
}
.tooltip {
	width:130px;
	padding:10px;
	font-size:12px;
	margin:-30px 0 0;
	background-color: lightsteelblue;
	color:#000;
	position:absolute;
	right:-141px;
	z-index: 1;
}
.tip .tooltip {
	left: 80px;
	top: 0px;
}
.tooltip:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	border-color: rgba(102, 102, 102, 0);
	border-right-color: #5e5e5e;
	border-width: 8px;
	margin-top: -8px;
}
.part:nth-child(n+4) .tooltip {
	left: -141px;
	z-index: 1;
}
.part:nth-child(n+4) .tooltip:before {
	left: 100%;
	border-right-color: rgba(102, 102, 102, 0);
	border-left-color: #5e5e5e;
}
.ta-c {
	text-align: center;
}
.ta-r {
	text-align: right;
}
.fc-r {
	color: red;
}
.fw-b {
	font-weight: bold;
}
.dli-chevron-down {
	display: inline-block;
	vertical-align: middle;
	color: #333;
	line-height: 1;
	width: 1em;
	height: 1em;
	border: 0.1em solid currentColor;
	border-left: 0;
	border-bottom: 0;
	box-sizing: border-box;
	transform: translateY(-25%) rotate(135deg);
}
.faq {
	display: flex;
	flex-flow: wrap;
	justify-content: center;
	text-align: left;
	line-height: 3em;
	gap: 1em;
	margin: 10px;
}
.faq_block {
	display: flex;
	flex-flow: column;
	width: 40%;
}
.faq_block div {
	width: 100%;
	font-size: 20px;
}
.faq_block div.answer_note {
	font-size: 16px;
}
.faq_block div.answer_note p {
	margin: 0;
	line-height: 1.5em;
}
.top-contents .faq_block .question:before {
	font-family: 'Font Awesome 5 Free';
	content: '\51';
	background-color: #ffeb3b;
	margin: 0px 10px;
	border-radius: 50%;
	border: 1px solid black;
	padding: 8px;
	line-height: 3em;
}
.top-contents .faq_block .answer:before {
	font-family: 'Font Awesome 5 Free';
	content: '\41';
	background-color: #e8a5c6;
	margin: 0px 10px;
	border-radius: 50%;
	border: 1px solid black;
	padding: 8px;
	line-height: 3em;
}
@media screen and (max-width:900px) {
	.faq_block {
		width: 100%;
		border-bottom: 1px dashed #000;
		padding-bottom: 10px;
	}
}