@charset "utf-8";



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

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

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

/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("animation.css");
@import url("inview.css");


/*全体の設定
---------------------------------------------------------------------------*/
html,body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100%;
	font-size: 13px;	/*基準となるフォントサイズ。下の方にある「画面幅900px以上」で基準を大きなサイズに再設定しています。*/
}

body {
	font-family: 'BIZ UDPGothic', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	-webkit-text-size-adjust: none;
	background: #FFF;	/*背景色*/
	color: #222;		/*全体の文字色*/
	line-height: 2;		/*行間*/
	overflow-x: hidden;
}

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

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

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

/*videoタグ*/
video {max-width: 100%;}

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

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


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


/*sectionタグと、詳細ページの共通設定
---------------------------------------------------------------------------*/
section{
	max-width: 1920px;
	margin: 0 auto;
}
section,
main > article {
	padding: 3% 5%;		/*上下、左右へのボックス内の余白*/
}


/*containerブロック
---------------------------------------------------------------------------*/
#container {
	height: 100%;
	/* max-width: 1920px; */
	margin: 0 auto;
	display: flex;					/*flexボックスを使う指定*/
	flex-direction: column;			/*子要素を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
}


/*header（ロゴなどが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	position: relative;
}

/*ロゴ画像*/
header #logo img {display: block;}
header #logo {
	width: 200px;		/*幅*/
	margin: 0 auto;		/*ロゴを左右中央に配置*/
}



/*mainブロック設定
---------------------------------------------------------------------------*/
/*mainブロックの設定*/
main {
	flex: 1;
}

/*mainブロック内のh2タグ*/
main h2 {
  font-size: 2em;
  font-weight: bold;
  margin: 0 auto;
  color: #222;
  /* letter-spacing: .1em; */
  text-align: center;
}
main .pagetop_h2 {
	margin: 5% auto 2%;
}

/*mainブロック内のh3タグ*/
main h3 {
	padding: 0 20px;
	margin-bottom: 1em;	/*下に空けるスペース*/
	border-bottom: 1px solid #ddd;
}

/*mainブロックのpタグ*/
main p {
	margin: 0 20px 2em;	/*上、左右、下へ空けるスペース*/
}
main p + p {
	margin-top: -1em;
}


/*中ページメインビジュアル
---------------------------------------------------------------------------*/
/*ページタイトル*/
#page-ttl {
position: absolute;
z-index: 1;
left: 7%;		/*headerに対して、左からの配置場所*/
top: 15%;		/*headerに対して、上からの配置場所*/
color: #fff;
/* font-weight: bold; */
font-size: 4em;
letter-spacing: .1em;
}
#page-ttl p {
margin: 0!important;
}
/*トップページのロゴ下に書いている説明文*/
#page-ttl .ttl-cap {
font-size: 0.8rem;
}
#mainimg-inner {width: 100%;height: 32vw;overflow: hidden;margin-top: 50px;}
#mainimg-inner img {
width: 100%;
}

.main {
	padding: 5%;			/*ボックス内の余白*/
}

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

footer {
	font-size: 0.7rem;		/*文字サイズ*/
	text-align: center;		/*内容をセンタリング*/
	background: #000;	/*背景色*/
	color: #fff;
}

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

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

/*copyrightと著作部分*/
.copy {padding: 1%;}


/*フッターメニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
#footermenu {
	margin: 0;
	padding: 1%;		/*ブロック内の余白*/
}

/*メニュー１個あたり*/
#footermenu li {
	display: inline-block;	/*横並びにする*/
	padding: 0 10px;		/*上下、左右への余白*/
	font-size: 1.8em;		/*文字サイズ*/
}

/*btnの設定
---------------------------------------------------------------------------*/
p.btn {margin: 0;}

/*ボタンを囲むブロック*/
.btn {
	text-align: center;	/*内容をセンタリング*/
}

/*ボタン*/
.btn a,
.btn input {
	display: inline-block;text-decoration: none;border: none;
	font-size: 1em;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.2は色が20%出た状態。*/
	background: #00b1d4;	/*背景色*/
	color: #eee;			/*文字色*/
	letter-spacing: 0.1em;	/*文字間隔を少し広くする指定*/
	transition: 0.3s;		/*hoverまでにかける時間。0.3秒。*/
	padding: 1em 2em;		/*余白*/
	margin: 0 auto 30px;	/*ボタンの外側に空けるスペース。上、左右、下への順番。*/
}

/*ボタンのマウスオン時*/
.btn a:hover,
.btn input:hover {
	cursor: pointer;		/*inputタグを使う場合に「手」のマークになるように。リンクと同じ表示になるようにという事です。*/
	opacity: 1;
	filter: brightness(1.2);
	transform: scale(1.02);	/*実寸の102%に拡大*/
}

/*listブロック内のボタン*/
.list .btn a {
	margin: 0;
}

/*背景ボックスがbg1の場合*/
.bg1 .btn a,
.bg1 .btn input {
	background: #555;	/*背景色*/
}



/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

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




/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-theme, .color-theme a {color: #00b1d4 !important;}
.color-check, .color-check a {color: #f00 !important;}
.c {text-align: center !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb30 {margin-bottom: 30px !important;}
.mt0 {margin-top: 0px !important;}
.mt30 {margin-top: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #666; color: #fff; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.look .color-check {color: #ffcc00 !important;}
.small {font-size: 0.6em;}
.pc {display: none;}
.sp {display: none;}
.txt-c{text-align: center;}


/*---------------------------------------------------------------------------
【SP】画面サイズが767px以下
---------------------------------------------------------------------------*/
@media screen and (max-width:767px) { 

/*中ページメインビジュアル
---------------------------------------------------------------------------*/
/*ページタイトル*/
#page-ttl {
	left: 5%;		/*headerに対して、左からの配置場所*/
	top: 9%;		/*headerに対して、上からの配置場所*/
	color: #fff;
	font-size: 2em;
	}
#mainimg-inner {
	height: 60vw;
	margin-top: 0;
}
#mainimg-inner img {
    width: auto;
    height: 100%;
    object-fit: cover;
}

/*その他
---------------------------------------------------------------------------*/
.sp {display: block;}
/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/


}





/*---------------------------------------------------------------------------
【Tab】画面サイズ768px以上1028px以下
---------------------------------------------------------------------------*/
@media screen and (min-width:768px) and ( max-width:1024px) {

/*中ページメインビジュアル
---------------------------------------------------------------------------*/
/*ページタイトル*/
#page-ttl {
left: 5%;		/*headerに対して、左からの配置場所*/
top: 8%;		/*headerに対して、上からの配置場所*/
color: #fff;
font-size: 2.8em;
}
#mainimg-inner {
height: 37vw;
margin-top: 0;
}


/*listブロック
---------------------------------------------------------------------------*/
.list {
	display: flex;					/*flexボックスを使う指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
}

/*ボックス内のfigure画像*/
.list figure {
	width: 30%;			/*幅*/
	margin-right: 5%;	/*画像の右側に空けるスペース*/
}

/*ボックス内のtextブロック*/
.list .text {
	flex: 1;
	margin-right: 5%;
}


.pc {display: block;/* width: 45%; */}
/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

}





/*---------------------------------------------------------------------------
【PC】画面サイズ1025px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:1024px) {


/*全体の設定
---------------------------------------------------------------------------*/
html, body {
	font-size: 15px;	/*基準となるフォントサイズの上書き*/
}

/*2カラムの場合
---------------------------------------------------------------------------*/
/*2カラム（.mainと.sub）を囲むブロック*/
.c2 {
	flex-direction: row;			/*子要素を横並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
}


/*sub*/
.sub {
	width: 200px;	/*幅。変更する際は上の.mainのwidthも調整して下さい。*/
}




/*listブロック
---------------------------------------------------------------------------*/
/*listブロック全体を囲むブロック*/
.list-container {
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	/*justify-content: space-between;	並びかたの種類の指定*/
}

/*１個あたりのボックス設定*/
.list {
	flex-direction: column;			/*子要素を縦並びにする*/
	width: 32%;			/*幅。３列になります。*/
	margin-right: 2%;	/*右側へのマージン*/
}

/*３の倍数のボックスへの追加設定*/
.list:nth-of-type(3n) {
	margin-right: 0;	/*右側マージンをなくす*/
}

/*ボックス内のfigure画像*/
.list figure {
	width: 100%;
	margin-right: 0;
}

/*ボックス内のtextブロック*/
.list .text {
	margin-right: 0;
}

/*ボックス内のh4タグ*/
.list h4 {
	margin: 10px 0;	/*上下、左右への余白*/
}


/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	padding: 5px 15px;		/*上下、左右へのボックス内の余白*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
	padding: 20px 15px;		/*上下、左右へのボックス内の余白*/
}

/*th（左側）のみの設定*/
.ta1 th {
	width: 30%;		/*幅*/
}


/*その他
---------------------------------------------------------------------------*/
.ws {width: 48%;display: inline;}
.sh {display: none;}
.pc {display: block;/* width: 45%; */}


/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

}