bu@charset "utf-8";


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


/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {
	--primary-color: #fff;			/*テンプレートの土台カラー*/	
}


/*テキストのフェードイン設定
---------------------------------------------------------------------------*/
/*アニメーション設定*/
@keyframes fadeIn {
	0% {opacity: 0;transform: scale(0.1) rotate(-30deg);}
	100% {opacity: 1;transform: scale(1) rotate(0deg);}
}

/* 初期状態でテキストを非表示にする */
.fade-in-text {
    visibility: hidden;
}

/* アニメーションを適用するクラス。
animationの行の「0.2s」が文字の出現のなめらかさで、大きいほどなめらかに出てきます。小さいとタイピングのようにカクカク出ます。
１文字ずつの出現する際の時差は、js/main.jsの「テキストのフェードイン効果」の中にある「0.1」で調整できます。*/
.char {
    display: inline-block;
    opacity: 0;
    animation: fadeIn 0.2s linear both;
}




/*ヘッダーメニュー（大きな画面で見た場合に左側に固定表示されるメニュー）
---------------------------------------------------------------------------*/
/*1000px未満は非表示*/
#header-menu {
	display: none;
}

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

	#header-menu {
		display: block;	/*表示させる*/
		position: fixed;z-index: 1;
		left: 0px;
		top: 100px;	/*上からの配置場所*/
	}
	
	/*メニュー１個あたり*/
	#header-menu li a {
		text-decoration: none;display: block;
		background: var(--secondary-color);		/*背景色。冒頭のsecondary-colorを読み込む。*/
		margin-bottom: 30px;					/*下に空けるスペース。メニュー同士の上下間の隙間。*/
		border-radius: 0px 100px 100px 0px;		/*角丸の指定。左上、右上、右下、左下への順。100pxの所はとりあえず大きな数字にしておけばOK。*/
		padding: 10px 30px 10px 10px;	/*ボタン内の余白。上、右、下、左への順番。*/
		font-size: 1.2rem;	/*文字サイズを120%に。*/
	}
	
	/*現在表示中のメニューの背景色と、マウスオン時共通*/
	#header-menu li.active a,
	#header-menu li a:hover {
		background: var(--accent-color);	/*css冒頭のaccent-colorを読み込む*/
	}

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


/*背景画像共通（大きな画面で見た場合に両サイドに見える画像）
---------------------------------------------------------------------------*/
.section::before {
	opacity: 0;
	transition: opacity 1s; /* 1秒かけてフェードイン/フェードアウト */
	content: '';
	position: fixed;z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.section.active::before {
	opacity: 1;
}
.section.inactive::before {
	opacity: 0;
}


/*contents（各セクションブロック直下にあるボックス）
---------------------------------------------------------------------------*/
.contents {
	background: var(--primary-color);		/*背景色。冒頭のprimary-colorを読み込む。*/
	position: relative;
}

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


	.contents {
		max-width: 600px;	/*大きな画面になった場合のコンテンツ幅*/
		margin: 0 auto;		/*画面の左右中央に配置*/
	}

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





/*001
---------------------------------------------------------------------------*/
/*大きな画面で見た場合に両サイドに見える画像*/
#top::before {
	background: url('../images/bg_top.jpg') no-repeat center center / cover;	/*背景画像の読み込み*/
}


/*002
---------------------------------------------------------------------------*/
/*大きな画面で見た場合に両サイドに見える画像*/
#fee::before {
	background: url('../images/bg_fee.jpg') no-repeat center center / cover;	/*背景画像の読み込み*/
}


/*003
---------------------------------------------------------------------------*/
/*大きな画面で見た場合に両サイドに見える画像*/
#reserve::before {
	background: url("../images/bg_reserve.jpg") no-repeat center center / cover;	/*背景画像の読み込み*/
}


/*フッター設定（コピーライト部分）
---------------------------------------------------------------------------*/
footer small {font-size: 100%;}
footer {
	font-size: 14px;		/*文字サイズ80%*/
	text-align: center;		/*内容をセンタリング*/
}

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

/*
@media (max-width: 767px) {
 .footer_space {
	  padding-bottom: 10px;

  }
}
*/


/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#menubar {display: none;}
#menubar ul {list-style: none;margin: 0;padding: 0;}
#menubar a {display: block;text-decoration: none;}

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

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


/*開閉メニュー
---------------------------------------------------------------------------*/
/*メニューブロック設定*/
.small-screen #menubar.display-block {
	position: fixed;overflow: auto;z-index: 100;
	right: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding: 70px 10vw 20px;				/*ブロック内の余白。上、左右、下への順番。*/

	color: var(--secondary-inverse-color);	/*文字色。css冒頭のsecondary-inverse-colorを読み込みます。*/
	animation: opa1 1s both;				/*opa1を実行する。1sは1秒の事。*/
}

/*メニュー１個あたりの設定*/
.small-screen #menubar nav ul li {
	border: 1px solid var(--secondary-inverse-color);	/*枠線の幅、線種、varは色の事でcss冒頭のsecondary-inverse-colorを読み込みます。*/
	margin: 0rem 0;			/*メニューの外側に空けるスペース。上下、左右への順番。*/
	border-bottom:solid 1px;
}
.small-screen #menubar a {
	color: inherit;
	padding: 1rem 0.5rem;	/*メニュー内の余白。上下、左右へ。*/
}

/*マウスオン時*/
.small-screen #menubar a:hover {
	color: var(--secondary-color);				/*文字色。css冒頭のsecondary-colorを読み込みます。*/
	background: var(--secondary-inverse-color);	/*背景色。css冒頭のsecondary-inverse-colorを読み込みます。*/
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
	animation: opa1 0s 0.2s both;
	position: fixed;z-index: 101;
	cursor: pointer;
	right: 0px;				/*右からの配置場所指定*/
	top: 7px;				/*上からの配置場所指定*/
	padding: 16px 14px;		/*上下、左右への余白*/
	width: 46px;			/*幅（３本バーが出ている場合の幅になります）*/
	height: 46px;			/*高さ*/
	display: flex;					/*flexボックスを使う指定*/
	flex-direction: column;			/*子要素（３本バー）部分。flexはデフォルトで横並びになるので、それを縦並びに変更。*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	transform: scale(2);	/*デフォルトで準備したサイズの２倍。お好みで。*/
	transform-origin: right top;
	mix-blend-mode: exclusion;
}

/*バー１本あたりの設定*/
#menubar_hdr span {
	display: block;
	transition: 0.3s;	/*アニメーションにかける時間。0.3秒。*/
	border-top: 1px solid #fff;	/*線の幅、線種、色*/
}

/*×印が出ている状態の3本バーの背景色*/
/*#menubar_hdr.ham {
	background: #ff0000;
}*/

/*×印が出ている状態の設定。※１本目および２本目のバーの共通設定。*/
#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {
	transform-origin: center center;	/*変形の起点。センターに。*/
	width: 20px;						/*バーの幅*/
}

/*×印が出ている状態の設定。※１本目のバー。*/
#menubar_hdr.ham span:nth-of-type(1){
	transform: rotate(45deg) translate(3.8px, 5px);	/*回転45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※３本目のバー。*/
#menubar_hdr.ham span:nth-of-type(3){
	transform: rotate(-45deg) translate(3.8px, -6.3px);	/*回転-45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※２本目のバー。*/
#menubar_hdr.ham span:nth-of-type(2){
	display: none;	/*２本目は使わないので非表示にする*/
}


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}




/*追随メニュー-----------------------------------*/

.menu {
		width: 100%;
	}

	.sp_freecall{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: auto;;
		background: rgba(255,255,255,0.8);
		overflow: hidden;
	}
	
	.sp_freecall_btn{
		display: -webkit-flex; 
		-webkit-align-items: baseline; 
		align-items: baseline;
		display: flex;	
		justify-content: center;
		margin-top: 10px;
		margin-left: 2px;
		margin-right: 2px;
		margin-bottom: 3px;
	}
	
	.sp_freecall_btn span{
		display: block;
		font-size: 2.2rem;
	}