/*mainブロック設定
---------------------------------------------------------------------------*/
/*mainブロックの設定*/
main {
	margin: 1rem 0;	/*ブロックの外側（上下、左右）に空けるスペース*/
}

/*main-contents-partsの設定*/
.main-contents-parts {
	margin-bottom: 30px;		/*ボックスの下に空けるスペース。sub-contents-partsとの間の余白です。*/
}

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

	/*カラムで使う為の指定*/
	main.column-parts {
		display: flex;	/*flexボックスを使う指定*/
		justify-content: space-between;	/*並びかたの種類の指定*/
		gap: 2rem;						/*main-contents-partsとsub-contents-partsの間のマージン的な隙間*/
	}
	
	/*main-contents-partsの設定*/
	.main-contents-parts {
		margin-bottom: 0;
		order: 2;			/*並び順。数字の小さい順番に表示されます。*/
		flex: 1;
	}
	
	/*.sub-contents-parts*/
	.sub-contents-parts {
		width: 230px;	/*幅*/
	}

	/*1つ目のsub-contents*/
	.sub-contents-parts:nth-child(2) {
		order: 1;	/*並び順。数字の小さい順番に表示されます。*/
	}
	
	}/*追加指定ここまで*/
/*sub-contents-parts設定
---------------------------------------------------------------------------*/
/*ブロック内のh4タグ*/
#contents .sub-contents-parts h4 {
	margin: 0;border: none;
	font-weight: normal;
	background: #666;	/*背景色*/
	color: #fff;		/*文字色*/
	text-align: center;	/*内容をセンタリング*/
	padding: 0.5em;		/*タグ内の余白*/
}
#contents .sub-contents-parts h4 a {color: inherit;}


/*サブメニュー設定
---------------------------------------------------------------------------*/
/*サブメニューブロック全体*/
.submenu-parts {
	padding: 0;
	margin: 0 0 1rem !important;	/*上、左右、下へのマージン*/
	font-size: 16px;
}

/*メニュー１個あたり*/
.submenu-parts li {
	border-bottom: 1px solid rgba(0,0,0,0.1);	/*下線の幅、線種、色。0,0,0は黒の事で0.1は色が10%出た状態。*/
}
.submenu-parts a {
	display: block;text-decoration: none;
	background: #fff;		/*背景色*/
	padding: 0.2rem 1rem;	/*上下、左右へのメニュー内の余白*/
}

/*アイコン（Font Awesome）*/
.submenu-parts a::before {
	transition: 0.3s;
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
	content: "\f0da";		/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
	color: #ABABAB;			/*アイコンの色*/
	padding-right: 0.8em;	/*アイコンとテキストの間の余白*/
	font-weight: bold;		/*この設定がないとアイコンが出ない場合があります*/
}

/*マウスオン時のアイコン設定*/
.submenu-parts a:hover::before {
	color: #666;			/*アイコンの色*/
}


/*box1-parts
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
.box1-parts {
	background: rgba(0,0,0,0.05);	/*背景色。0,0,0は黒の事で0.05は色が5%出た状態。*/
	padding: 10px;					/*ボックス内の余白*/
	border-radius: 5px;				/*角を丸くする指定*/
	margin-bottom: 1rem;			/*ボックスの下に空けるスペース*/
}

/*box1-parts内でsubmenu-partsを使った場合、下のマージンをなくす*/
.sub-contents-parts .box1-parts .submenu-parts {
	margin-bottom: 0 !important;
}
/*list-grid1-parts, list-grid2-parts 共通
---------------------------------------------------------------------------*/
/*list-partsブロック全体を囲むブロック*/
.list-grid1-parts,.list-grid2-parts {
	display: grid;
}

/*ボックス１個あたり*/
.list-grid1-parts .list-parts,.list-grid2-parts .list-parts {
	display: grid;
}

/*list内の全ての要素のmarginとpaddingを一旦リセット*/
.list-grid1-parts .list-parts *,
.list-grid2-parts .list-parts * {
	margin: 0;padding: 0;
}

/*ボックス内のp要素*/
.list-grid1-parts .list-parts p,
.list-grid2-parts .list-parts p {
	/*font-size: 0.85rem;*/	/*文字サイズを85%に*/
	line-height: 1.5;	/*行間を少し狭く*/
}


/*list-grid1-parts
---------------------------------------------------------------------------*/

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

	/*listブロック全体を囲むブロック*/
	.list-grid1-parts {
		grid-template-columns: repeat(2, 1fr);	/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 1rem;	/*ブロックの間に空けるマージン的な指定*/
	}

	.list-grid2-parts {
		grid-template-columns: repeat(1, 1fr);	/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 1rem;	/*ブロックの間に空けるマージン的な指定*/
	}

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


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

	/*listブロック全体を囲むブロック*/
	.list-grid1-parts {
		grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 1rem;	/*ブロックの間に空けるマージン的な指定*/
	}
	.list-grid2-parts {
		grid-template-columns: repeat(2, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 1rem;	/*ブロックの間に空けるマージン的な指定*/
	}

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


/*ボックス1個あたり*/
.list-grid1-parts .list-parts {
	padding: 1rem;			/*ボックス内の余白*/
	background: #fff;		/*背景色*/
	grid-template-rows: auto 1fr;	/*1つ目（この場合はfigure要素のサイズ）は自動に、２つ目（この場合はtextブロック））を残った幅で使う*/
	/*box-shadow: 5px 5px 20px rgba(0,0,0,0.1);*/	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
}

/*ボックス内のfigure画像*/
.list-grid1-parts .list-parts figure img {
	margin-bottom: 0.5rem;	/*画像の下に空けるスペース*/
}


/*ボタン
---------------------------------------------------------------------------*/
.list-grid1-parts .btn-parts a {
	display: block;text-decoration: none;
	font-size: 1rem;
	text-align: center;		/*テキストをセンタリング*/
	background: #FB8014;		/*背景色*/
	border: 1px solid #DD5A0F;	/*枠線の幅、線種、色*/
	padding: 5px 10px;		/*ボタン内の余白*/
	margin-top: 1rem;		/*ボタンの上に空けるスペース*/
	color: #fff;
}

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

/*ブロック内のh4見出し*/
.list-half-parts .list-parts h4 {
	font-size: 1.4rem;	/*文字サイズを1.4倍*/
}

/*画像ブロック共通*/
.list-half-parts .image-l-parts img, .list-half-parts .image-r-parts 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-parts .list-parts {
			flex-direction: row;			/*子要素を横並びにする*/
			justify-content: space-between;	/*並びかたの種類の指定*/
			align-items: center;			/*垂直揃えの指定。天地中央に配置されるように。*/
		}
		
		/*画像ブロック共通*/
		.list-half-parts .image-l-parts, .list-half-parts .image-r-parts {
			width: 50%;			/*画像の幅*/
		}
		
		/*画像を右に配置する場合*/
		.list-half-parts .image-r-parts {
			margin-left: 2rem;	/*画像の左側に空けるスペース*/
		}
		
		/*画像を左に配置する場合*/
		.list-half-parts .image-l-parts {
			order: -1;
			margin-right: 2rem;	/*画像の右側に空けるスペース*/
		}

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

	}/*追加指定ここまで*/
/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※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;		/*テーブルの下に空けるスペース。２文字分。*/
}

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

/*th（左側）のみの設定*/
.ta2-parts th {
	width: 30%;			/*幅*/
	text-align: left;	/*左よせにする*/
	background: rgba(0,0,0,0.07);	/*背景色。0,0,0は黒のことで0.07は色が7%出た状態。*/
}

@media screen and (max-width:1200px) {
	.ta2-parts th {
		width: 100%;
		display: block;
		border-bottom: none;
	}
	.ta2-parts td {
		width: 100%;
		display: block;
	}
}
.single-ttl{
	margin-top: 0px;
	padding: 0.2rem 1rem;
	border-left: 5px solid #800000;
	background: rgb(255,0,0);
	background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(178,34,34,1) 100%);
	color: #fff;
}
/*.shidashi-name{
	padding: 0.5em;
	background: #FAD689;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);
}*/
.shidashi-name {
	padding: 0.5em;
	position: relative;
}

.shidashi-name:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 7px;
	background: -webkit-repeating-linear-gradient(-45deg, #FAD689, #6ad1c8 2px, #fff 2px, #fff 4px);
	background: repeating-linear-gradient(-45deg, #FAD689, #FAD689 2px, #fff 2px, #fff 4px);
}
.price{
	font-size: 40px;
	color: #ff0000;
}
.list-grid2-parts .map_price {
	margin: 1em 0em;
	padding: 0.7em;/*文字周りの余白*/
	color: #494949;/*文字色*/
	background: #fffaf4;/*背景色*/
	border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/
}
.list-grid2-parts .map-text{
	line-height: 1em;
	margin: 1em auto;
}
.contact-midashi{
	margin: 10px auto;
	padding: 0.5em;/*文字周りの余白*/
	color: #fff;/*文字色*/
	background: #926900;/*背景色*/
}
/*2カラムブロック（※900px未満では１カラム）
---------------------------------------------------------------------------*/
/*２カラムを囲むブロック*/
.list-half-parts .list-parts {
	display: flex;			/*flexボックスを使う指定*/
	flex-direction: column;	/*子要素を縦並びにする*/
	margin-bottom: 2rem;	/*ボックスの下に2文字分のスペースを空ける*/
}

/*ブロック内のh4見出し*/
.list-half-parts .list-parts h4 {
	font-size: 1.4rem;	/*文字サイズを1.4倍*/
}

/*画像ブロック共通*/
.list-half-parts .image-l-parts img, .list-half-parts .image-r-parts 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-parts .list-parts {
			flex-direction: row;			/*子要素を横並びにする*/
			justify-content: space-between;	/*並びかたの種類の指定*/
			align-items: center;			/*垂直揃えの指定。天地中央に配置されるように。*/
		}
		
		/*画像ブロック共通*/
		.list-half-parts .image-l-parts, .list-half-parts .image-r-parts {
			width: 50%;			/*画像の幅*/
		}
		
		/*画像を右に配置する場合*/
		.list-half-parts .image-r-parts {
			margin-left: 2rem;	/*画像の左側に空けるスペース*/
		}
		
		/*画像を左に配置する場合*/
		.list-half-parts .image-l-parts {
			order: -1;
			margin-right: 2rem;	/*画像の右側に空けるスペース*/
		}

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

	}/*追加指定ここまで*/
/*FAQ
---------------------------------------------------------------------------*/
/*質問*/
.faq-parts dt {
	border-radius: 3px;		/*枠を角丸にする指定*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	background: #fff;		/*背景色*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	text-indent: -2rem;				/*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています。*/
	padding: 5px 1em 5px 3em;		/*ボックス内の余白。ここを変更する場合、上のtext-indentも調整します。*/
}

/*アイコン（Font Awesome）*/
.faq-parts dt::before {
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
    content: "\f059";		/*アイコンのコード*/
	padding-right: 1rem;	/*アイコンとテキストとの間のスペース*/
	color: #ff0000;			/*アイコンの色*/
}

/*回答*/
.faq-parts dd {
	padding: 5px 1rem 30px 3rem;		/*ボックス内の余白**/
}

/*openclose-partsを適用した要素のカーソル*/
.openclose-parts {
	cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}
/*詳細ページのサムネイル切り替えブロック
---------------------------------------------------------------------------*/
/*大きな画像が表示されるブロック*/
.thumbnail-view-parts {
	max-width: 1000px;		/*最大幅*/
	margin: 0 auto 1rem;	/*ブロック要素を中央に配置。下に1文字分のマージンをとる。*/
	text-align: center;		/*画像が小さい場合でもセンタリングされるように*/
}

/*サムネイル全体を囲むブロック*/
.thumbnail-parts {
	display: flex;				/*flexを使う指定*/
	justify-content: center;	/*並びかたの種類の指定。これはセンタリングする指定。*/
	margin-bottom: 2rem;		/*下に空けるスペース。２文字分。*/
}

/*サムネイル画像*/
.thumbnail-parts img {
	width: 150px;		/*サムネイルの幅*/
	cursor: pointer;	/*リンクタグではないが、クリックできる事をわかりやすくする為にリンクと同じポインターにしておきます。*/
	transition: 0.3s;	/*マウスオンまでにかける時間。3秒。*/
	margin-right: 5px !important;
	margin-top: 5px !important;
}
.thumbnail-parts img:hover {
	opacity: 0.8;	/*マウスオン時に80%だけ色を出す。つまり薄くなります。*/
}

@media screen and (max-width:900px) {
	.thumbnail-parts img {
		width: 100px;		/*サムネイルの幅*/
	}
}
/*list-square-parts
---------------------------------------------------------------------------*/
/*listブロックを囲む外側のボックス*/
.list-square-parts {
	display: grid;
	grid-template-columns: repeat(6, 1fr);	/*ここの「4」の数字が横に並べる数です。3列がいいなら(3, 1fr)です。*/
	gap: 1rem;	/*マージン的な数値。サムネイル間を１文字分あけます。*/
	margin-bottom: 20px;
}

/*ボックスを正方形にトリミングする為の指定なので変更しない。*/
.list-square-parts .list-parts {
	position: relative;
	overflow: hidden;
	height: 0;
	padding-top: 100%;
	border-radius: 10px;	/*角を丸くする指定。通常の四角形がよければこの１行削除。*/
	box-shadow: 2px 2px 3px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒の事で0.1は色が10%出た状態。*/
}
.list-square-parts .list-parts div {
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}
.list-square-parts .list-parts img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: 0.5s;	/*マウスオン時にかける時間。0.5秒。*/
}

/*マウスオン時の画像*/
.list-square-parts .list-parts img:hover {
	transform: scale(1.1);	/*1.1倍に拡大*/
	filter: contrast(1.3);	/*コントラストを1.3倍*/
}
@media screen and (max-width:900px) {
	.list-square-parts {
		grid-template-columns: repeat(3, 1fr);	/*ここの「4」の数字が横に並べる数です。3列がいいなら(3, 1fr)です。*/
	}
}