/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

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

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

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



/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {
	--primary-color: #467dbb;		/*テンプレートのメインまたはアクセントカラー*/
	--primary-inverse-color: #faf8f7;	/*上のprimary-colorの対となる色*/
	--space-large: 120px;		/*主にコンテンツの左側のスペース確保に使います*/
	--space-small: 20px;		/*主にコンテンツの右側のスペース確保に使います*/
	
	--border-color1-maru: rgba(255,255,255,0.3) !important;	/*Q19用*/
}


/*Q19用
---------------------------------------------------------------------------*/
.step-maru.arrow-maru .list-maru::before,
.step-float-maru.arrow-maru .list-maru::before {
	color: var(--primary-inverse-color) !important;
}


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


/*animation1のキーフレーム設定（開閉ブロックのアニメーションに使用）
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}


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


/*全体の設定
---------------------------------------------------------------------------*/
html,body {height: 100%;}


body {
	font-family: 'Noto Sans JP', sans-serif;	/*フォント種類*/
	-webkit-text-size-adjust: none;
	background: var(--primary-color);	/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
	line-height: 2.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;}

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

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

/*他*/
input {font-size: 1rem;}

main{
	transition: .45s;
}

/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: #fff;		/*文字色*/
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
	filter: brightness(1.1);	/*少し明るくする*/
}


/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	height: 100%;
	display: flex;					/*flexを使う指定*/
	flex-direction: column;			/*子要素を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	margin: 0 auto;
	position: relative;
}


/*コンテンツ
---------------------------------------------------------------------------*/
#contents {
	flex: 1;
}


/*section
---------------------------------------------------------------------------*/
section {
	margin: 5rem var(--space-small) 5rem var(--space-large);	/*上、右、下、左へのマージン（外側への余白）*/
}

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

	section {
		margin: 4rem var(--space-small);	/*上下、左右へのマージン（外側への余白）*/
	}

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

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

	section {
		width: 1500px;
		margin: 0 auto;
	}

	}追加指定ここまで */