@charset "utf-8";



/*リセットCSS（sanitize.css）の読み込み
---------------------------------------------------------------------------*/
@import url("https://unpkg.com/sanitize.css");

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');

/*Bootstrap Iconsの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css");

/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");

/*表示エフェクトcssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("inview.css");



/*全体の設定
---------------------------------------------------------------------------*/
html,body {
	margin: 0;padding: 0;
	font-size: 13px;	/*基準フォントサイズ。*/
	overflow-x: hidden;
}

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

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

	}
	/*画面幅900px以上の追加指定ここまで*/

body {
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;	/*フォント種類*/
	-webkit-text-size-adjust: none;
	background: #fff;	/*背景色*/
	color: #666;		/*文字色*/
	line-height: 2;		/*行間*/
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav {margin: 0;padding: 0;}

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

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

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

/*ul,olタグ*/
ul, ol {margin-bottom: 15px;}

/*他*/
section + section {
	margin-top: 30px;
}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: #666;	/*文字色*/
	transition: 0.3s;
}

a:hover {
	color: #88291a;	/*文字色*/
	opacity: 0.8;	/*マウスオン時に80%の透明度にする*/
}


/*container
---------------------------------------------------------------------------*/
#container {
	margin: 0 auto;
	max-width: 1800px;	/*サイトの最大幅*/
}


/*header
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	display: flex;			/*flexボックスを使う指定*/
	align-items: center;	/*天地中央垂直揃えに配置*/
	padding: 3%;			/*ヘッダー内の余白*/
}



/*トップページのヘッダーブロックへの追加指定*/
.home header {
	justify-content: space-around;	/*並びかたの種類の指定*/
	padding: 10% 0;					/*ヘッダー内の余白。上下、左右への指定。*/
	position: relative;				/*スライドショーを配置する為に必要な指定。スライドショー自体の設定はslide.cssになります。*/
	margin-bottom: 80px;			/*ヘッダーの下に空けるスペース*/
}

/*ロゴ*/
#logo img {display: block;}
#logo {
	margin: 0;
	width: 250px;	/*画像の幅*/
}

/*トップページのロゴへの追加指定*/
.home #logo {
	width: auto;	/*上で指定した幅を一旦自動に*/
	height: 400px;	/*高さで改めて指定します*/
	order: 1;		/*表示順。*/
}
.home #logo img {height: 100%;}




/*mainブロック
---------------------------------------------------------------------------*/
main {
	margin: 20px;	/*ブロックの外にとるスペース*/
}

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

		main {
			margin: 0 100px 100px;	/*●ブロックの外にとるスペース*/
		}

	}
	/*画面幅900px以上の追加指定ここまで*/

/*h2タグ*/
main h2 {
	margin: 0;
	font-size: 1.8rem;		/*bodyで指定している文字サイズの2倍にする*/
	text-align: center;		/*テキストをセンタリング*/
	margin-bottom: 3rem;	/*下に空けるスペース*/
}

/*h2タグ内のspanタグ。小文字部分。*/
main h2 span {
	display: block;
	font-size: 0.4em;	/*文字サイズを親のh2の40%にする*/
	letter-spacing: 0.8em;	/*文字間隔を広くとる*/
	text-indent: 0.8em;		/*上の行のletter-spacingと同じ値をセットする*/
}

/*h3タグ*/
main h3 {
	font-size: 1.3rem;	/*文字サイズ*/
	padding: 5px;
	border: #666 2px solid;
	background: #EBEBEB;
}

/*微調整*/
p + h3,p + h2 {margin-top: 2rem;}

/*Listタグwrap*/
main div.ul-wrap {
	text-align: center;
	width: 100%;
}

/*Listタグ*/
main ul {
	text-align: left;
	display: inline-block;
	font-weight: bold;
	padding: 0 auto;
}

/*MENU H3*/
h3.menu {
	color: #fff;
	border: #666 2px solid;
	background: #727272;
}

/*表*/
.about-wrap {
	background: #EBEBEB;
	margin-top: 0px;
	padding: 20px 40px;
	border-radius: 10px;
}

dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
dt {
  width: 25%;
  padding:5px 0;
  margin:0 2% 0 0;
	border-top: 2px #0A7702 solid;
	color: #0A7702;
}

dd {
  width: 73%;
  padding:5px 0;
  margin:0;
  border-top: 2px #D5D5D5 solid;
}

dd:last-child {
	border-bottom:2px #D5D5D5 solid;
}

dt:last-of-type {
	border-bottom:2px #0A7702 solid;
}

dd span {
	font-weight: bold;
font-size: 120%;
}

.f-right {
	float: right;
	margin-left: 30px;
	margin-bottom: 30px;
}

.f-left {
	float: left;
	margin-right: 30px;
	margin-bottom: 30px;
}

.circle-img {
	border-radius:50%;
	width: 30%;
	max-width: 300px;
	min-width: 150px;
}

.SNS-box {
	text-align: center;
}

.SNS-box .circle-icon {
	border-radius:50%;
	width: 20%;
	max-width: 150px;
	min-width: 80px;
	margin: 30px;
}

@media screen and (max-width: 768px) {
.circle-SP-img {
	border-radius:50%;
	display: block;
	width:100% !important;
	clear: both !important;
	margin: 0 auto 30px;
}
	.PC {display: none;}
}
@media screen and (min-width: 767px) {
	.SP {display: none;}
}


/*流れ*/
.flow{
  width: 100%;
  text-align: center;
}

.flow .f-wrap {
  width: 100%;
	background: #F0F0F0;
	border-radius: 10px;
	margin-bottom: 0px;
	padding: 10px;
}

.flow .f-wrap h4{
 margin: 0;
	padding: 0;
}
.flow .f-wrap p{
 margin: 0;
	padding: 0;
}

/*下向き矢印*/
.arrow1{
  width: 30px;
  height: 30px;
	margin: 0 auto 20px;
  border: 5px solid;
  border-color:  transparent transparent #565656 #565656;
  transform: rotate(-45deg);
}


/*フッター設定
---------------------------------------------------------------------------*/
footer small {font-size: 100%;}

footer {
	font-size: 0.7rem;		/*文字サイズ*/
	text-align: center;		/*内容をセンタリング*/
	margin-bottom: 50px;
}



/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	background: rgba(0,0,0,0.3);	/*背景色。0,0,0は黒の事で0.3は色が30%出た状態。	*/
	width: 50px;		/*幅*/
	line-height: 50px;	/*高さ*/
	color: #fff;		/*文字色*/
}


/*アニメーションボタン。（枠線をぐるっとなぞるアニメーション）
---------------------------------------------------------------------------*/
@keyframes w {0% {width: 0px;} 100% {width: 100%;}}
@keyframes h {0% {height: 0px;} 100% {height: 100%;}}

/*ボタンの一番の外側のボックス*/
.animation-btn {
	position: relative;		/*枠線をアニメーションさせる為に必要な指定*/
	display: inline-block;
	box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2) inset;	/*デフォルトで見えている枠線の設定。0,0,0は黒の事で0.2は色が20%出た状態。*/
}

/*上のanimation-btnの内側にあるボックス*/
.animation-btn-inner {
	display: block;text-decoration: none;
	padding: 0.5em 3em;		/*ボタン内の余白。上下、左右へ。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くとる*/
	text-indent: 0.1em;		/*letter-spacingのテキスト位置ずれ修正。*/
}


/*枠線共通*/
.animation-btn::before,
.animation-btn::after,
.animation-btn-inner::before,
.animation-btn-inner::after {
	content: "";
	position: absolute;
	background-color: #000;		/*枠線の色。*/
	animation-duration: 0.2s;	/*アニメーション時間。*/
	animation-fill-mode: forwards;	/*アニメーション完了時に最後のフレームを維持*/
	animation-timing-function: linear;	/*アニメーションの速度のタイプ。同じ速度にする。*/
}

/*ラインアニメーション１（左上→右上）*/
.animation-btn:hover::before {
	left: 0px;	/*開始地点の指示*/
	top: 0px;	/*開始地点の指示*/
	height: 1px;		/*線の幅の代わりになります*/
	animation-name: w;	/*上の「@keyframes」で使うアニメーション名の指定。*/
}

/*ラインアニメーション２（右上→右下）*/
.animation-btn:hover::after {
	right: 0px;	/*開始地点の指示*/
	top: 0px;	/*開始地点の指示*/
	width: 1px;			/*線幅の代わり*/
	animation-name: h;	/*上の「@keyframes」で使うアニメーション名の指定。*/
	animation-delay: 0.2s;	/*アニメーションを0.2秒遅れてスタートさせる。*/
}

/*ラインアニメーション３（右下→左下）*/
.animation-btn-inner:hover::before {
	right: 0px;		/*開始地点の指示*/
	bottom: 0px;	/*開始地点の指示*/
	height: 1px;		/*線幅の代わりす*/
	animation-name: w;	/*上の「@keyframes」で使うアニメーション名の指定。*/
	animation-delay: 0.4s;	/*アニメーションを0.4秒遅れてスタートさせる。*/
}

/*ラインアニメーション４（左下→左上）*/
.animation-btn-inner:hover::after {
	left: 0px;		/*開始地点の指示*/
	bottom: 0px;	/*開始地点の指示*/
	width: 1px;			/*線の幅の代わりになります*/
	animation-name: h;	/*上の「@keyframes」で使うアニメーション名の指定。*/
	animation-delay: 0.6s;	/*アニメーションを0.6秒遅れてスタートさせる。*/
}


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #cf2003 !important;}
.c {text-align: center !important;}
.small {font-size: 0.75em;}
.large {font-size: 3em; letter-spacing: 0.2em;}
.pc {display: none;}
.dn {display: none !important;}

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

		.ws {width: 48%;display: inline;}
		.sh {display: none;}
		.pc {display: block;}

	}
	/*画面幅900px以上の追加指定ここまで*/