@charset "utf-8";
/* CSS Document */

@media screen and (max-width:640px) {
	body {
		font-size: 22px;
	}
	p {
		font-size: 22px;
	}
}

/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	flex-shrink: 0;
	display: flex;					/*flexボックスを使う指定*/
	align-items: center;			/*垂直揃えの指定。天地中央に配置されるように。*/
	justify-content: space-between;
	height: 60px;					/*ヘッダーの高さ*/
}

@media screen and (max-width:640px) {
	header {
		height: 90px;
	}
}

/*ヘッダー左上の回転する円形のテキストアニメーション（スライドショー右下のスタイルはslide.cssで設定されています）*/
header .animation-text {
	position: absolute;
	width: 10vw;	/*画像の幅*/
	left: -2vw;		/*右からの距離*/
	top: -5vw;		/*上からの距離*/
}

body:not(.home) header {
	margin-bottom: var(--space-large);
}

header h1 {
	font-size: 12px;
	font-weight: normal;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 10px;
	left: 20px;
}

/*ロゴ画像*/
#logo img {display: block;}
#logo {
	margin: 0;padding: 0;
	width: 16vw;	/*ロゴの幅*/
	position: relative;z-index: 1;
	left: 1vw;	/*左からの配置場所*/
	top: 4vw;		/*上からの配置場所*/
}

	/*画面幅640px以下の追加指定*/
	@media screen and (max-width:640px) {
	
	#logo {
		top: 36px;			/*上からの配置場所*/
		width: 210px;	/*ロゴの幅*/
	}

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


/*ヘッダー内メニュー
---------------------------------------------------------------------------*/
/*900px未満では非表示*/
header nav ul {display: none;}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
		
	/*メニューブロック全体の設定*/
	header > nav > ul {
		margin-right: 10vw;	/*ハンバーガーアイコンに重ならないように余白*/
		display: flex;		/*横並びにする*/
	}

	/*メニュー１個あたりの設定*/
	header nav li a {
		display: block;text-decoration: none;
		font-size: 0.9rem;		/*文字サイズ90%*/
		padding: 0.5rem 1rem;	/*メニュー内の余白。上下、左右へ。*/
	}
	
	/*ドロップダウンメニュー冒頭の矢印アイコン*/
	header nav i {
		padding-right: 0.5rem;	/*右に空ける余白*/
	}

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


/*ヘッダー内メニュー、開閉メニュー、共通のドロップダウン設定
---------------------------------------------------------------------------*/
header nav ul ul,
.small-screen #menubar ul ul {
	animation: opa1 0.5s 0.1s both;	/*0.1秒待機後、0.5秒かけてフェードイン表示*/
}


/*ヘッダー内メニューのドロップダウン
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
header nav ul ul {
	position: absolute;z-index: 100;
}

/*メニュー１個あたりの設定*/
header nav ul ul a {
	background: rgba(255,255,255,0.8);	/*背景色。255,255,255は白のことで0.8は色が80%出た状態。*/
	padding: 0.3em 1em;				/*上下、左右へのメニュー内の余白*/
	margin-top: 4px;				/*上に空けるスペース。ドロップダウン同士の隙間。*/
	border: 1px solid var(--primary-color);	/*枠線の幅、線種、varは色の指定で冒頭のparimary-colorを読み込みます。*/
}


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

@media screen and (min-width:640px) {
	#menubar_hdr {
		display: none;
	}
}

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

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

/*ドロップダウンをデフォルトで非表示*/
.ddmenu_parent ul {display: none;}

/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
a.ddmenu::before {
	font-family: "Font Awesome 6 Free";	/*Font Awesomeを使う指示*/
	content: "\f078";		/*使いたいアイコン名（Font Awesome）をここで指定*/
	font-weight: bold;		/*この手の設定がないとアイコンが出ない場合があります*/
	margin-right: 0.5em;	/*アイコンとテキストとの間に空けるスペース*/
}


/*開閉メニュー
---------------------------------------------------------------------------*/
/*animation1のキーフレーム設定*/
@keyframes animation1 {
	0% {right: -100vw;}
	100% {right: 0px;}
}

/*メニューブロック設定*/
#menubar.display-block {
	position: fixed;overflow: auto;z-index: 100;
	right: 0px;top: 0px;
	width: 300px;
	height: 100%;
	padding-top: 90px;
  padding-bottom: 50px;
  padding-left: 30px;
  padding-right: 30px;
	background: var(--primary-color);	/*背景色*/
	color: var(--primary-inverse-color);					/*文字色*/
	animation: animation1 0.2s both;		/*animation1を実行する。0.2sは0.2秒の事。*/
}

/*子メニューの設定*/
#menubar ul ul {
	margin: 2rem;	/*外側に空けるスペース。２文字分。*/
}

/*メニュー１個あたりの設定*/
#menubar nav ul li {
	border: 1px solid #fff;	/*枠線の幅、線種、色。*/
	margin: 1rem 0;			/*メニューの外側に空けるスペース。上下、左右への順番。*/
	border-radius: 5px;		/*角を丸くする指定*/
  transition: 0.2s;
  position: relative;
}

#menubar nav ul li:after {
  content: "〉";
  display: block;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 13px;
  right: 10px;
  color: #ffffff;
}

#menubar nav ul li:hover {
  background-color: #000000;
}

#menubar a {
	color: inherit;
	padding: 1rem 2rem;	/*メニュー内の余白。上下、左右へ。*/
}



/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
	animation: opa1 0.3s 0.5s both;
	position: fixed;z-index: 101;
	cursor: pointer;
	top: 0;		/*上からの配置場所*/
	right: calc(var(--space-small) + 5px);		/*右からの配置場所*/
	width: 60px;		/*幅*/
	height: 60px;		/*高さ。基本的にheaderの高さに合わせておけばOKです。*/
	padding: 20px 0;	/*ここの20pxの数字を変更すると2本のバーの上下間のバランス調整ができます*/
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.5s;
	mix-blend-mode: exclusion;
}

/*マウスオン時だけmix-blend-modeを無効に*/
#menubar_hdr.ham {
	mix-blend-mode: normal;
}

/*バーの設定*/
#menubar_hdr div span {
	display: block;
	width: 100%;
	height: 1.5px;			/*線の太さ*/
	background-color: #fff;	/*本来は線の色なのですが、mix-blend-modeを使っているので背後の色に合わせて変動します。変動したくないなら#menubar_hdrのmix-blend-modeの行を削除して下さい。*/
	transition: all 0.5s ease-in-out;
	position: absolute;
}

/*以下変更不要*/
#menubar_hdr div {
	position: relative;width: 100%;height: 100%;
	display: flex;flex-direction: column;justify-content: space-between;
}
#menubar_hdr div span:nth-child(1) {top: 0;}
#menubar_hdr div span:nth-child(2) {bottom: 0;}
#menubar_hdr.ham div span:nth-child(1) {top: 50%;transform: translateY(-50%) rotate(45deg);}
#menubar_hdr.ham div span:nth-child(2) {top: 50%;transform: translateY(-50%) rotate(-45deg);}


/*画面右側の側面にある縦長ボタン（オンライン相談）
---------------------------------------------------------------------------*/
#btn-special {padding: 0;margin: 0;}
#btn-special a {
	display: block;text-decoration: none;
	position: fixed;z-index: 100;
	right: 0px;	/*右からの配置場所*/
	top: 20vw;	/*上からの配置場所*/
	writing-mode: vertical-rl;
	text-orientation: upright;
	/*background: linear-gradient(#906f53, #6b5038);背景グラデーション*/
	background: linear-gradient(#ec9347, #d36b12);
	color: #f6ebd2;	/*文字色*/
	padding: 2rem 1rem;	/*上下、左右へのボタン内の余白*/
	border-radius: 3px 0px 0px 3px;	/*角を丸くする指示。左上、右上、右下、左下への順番。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
}

/*アイコンの下の余白*/
#btn-special i {padding-bottom: 1rem;}



/*フッター設定
---------------------------------------------------------------------------*/
footer a {color: inherit;text-decoration: none;}
footer small {font-size: 100%;}

footer {
	background: var(--primary-color);		/*背景色。冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
	font-size: 0.85rem;	/*文字サイズ85%*/
	padding: 5vw;		/*余白*/
}

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

	footer {
		display: flex;
		justify-content: space-between;
	}

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



/*ロゴが入ったブロック*/
footer .image {
	width: 200px;	/*ボックス幅*/
	text-align: center;	/*中身をセンタリング*/
}

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

	footer .image {
		width: auto;	/*ボックス幅*/
	}
	footer .image img {
		width: 80px;
	}

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

/*ロゴ*/
footer .logo {
	opacity: 0.5;	/*透明度。色を50%だけ出す設定。全部出したいならこの１行は削除。*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:641px) {
		footer .text {
			display: flex;	/*CompanyとFollow Usを横並びにする*/
			gap: 5rem;	/*CompanyとFollow Usの間の余白。５文字分。*/
		}
	}
	
	@media screen and (max-width:640px) {
		footer {
			font-size: 24px;
			text-align: center;
		}
	}


/*h4見出し（CompanyとFollow Usのテキスト部分*/
footer h4 {
	font-weight: 200;	/*太さを細くする*/
	font-size: 1.2rem;	/*文字サイズを120%*/
}

@media screen and (max-width:640px) {
	footer h4 {
		font-size: 42px;
		font-weight: bold;
	}
	footer h4:nth-of-type(2) {
		margin-bottom: 20px;
	}
}

/*著作部分（※意図的に見えなくしたりしないで下さい。規約違反になります。）*/
.pr a {
	text-decoration: none;
	display: block;
	background: rgba(0,0,0,0.9);
	text-align: right;
	padding: 0.5rem 1rem;
	color: #ccc;
}
.pr a::before {
	font-family: "Font Awesome 6 Free";
	content: "\e2ca";
	font-weight: bold;
	margin-right: 0.5em;
}


/*フッター内にあるソーシャルメディアのアイコン
---------------------------------------------------------------------------*/
.icons {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	align-self: center;
	gap: 1rem;	/*アイコン同士のマージン的な要素。１文字分。*/
}
.icons i {
	font-size: 30px;	/*アイコンサイズ*/
}

@media screen and (max-width:640px) {
	.icons {
		display: block;
		text-align: center;
		margin-bottom: 50px;
	}
	.icons i {
		font-size: 36px;	/*アイコンサイズ*/
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 40px;
		height: 40px;
		padding-top: 0;
	}
}