@charset "utf-8";


/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {position: fixed !important;	/*スクロールしても動かないようにする指定。*/
	display: flex;					/*flexボックスを使う指定*/
	align-items: center;			/*垂直揃えの指定。天地中央に配置されるように。*/
	justify-content: space-between;
	height: 70px;					/*ヘッダーの高さ*/
	padding: 1vw 3vw;				/*ヘッダー内の余白。上下、左右への順番。*/
	font-family: "Reddit Sans", "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
   
    z-index: 10;
    width: 100%;right: 0px;top: 0px;
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
        header {text-align: center;	/*内容をセンタリング*/}
	
	}




/*ロゴ（※画像にする場合）*/
#logo img {
	display: block;
	right: 50%;top: 50%;
	width: 150px;	/*ロゴ画像の幅*/
}
/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) { 
/*ロゴ（※画像にする場合）*/
#logo img {
	display: block;
	right: 50%;top: 50%;
	width: 220px;	/*ロゴ画像の幅*/
}
	
	}

/*ロゴ（テキストにする場合）*/
#logo a {
	display: block;text-decoration: none;
	font-size: 1.2rem;	/*文字サイズを120%に*/
	font-weight: 800;	/*文字の太さ*/
}







/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#menubar {margin-bottom: 1rem;	/*position: fixed !important;スクロールしても動かないようにする指定。*/}


/*上で非表示にしたメニューを表示させる為の設定*/
#menubar {display: block !important;background: #fff;	display: flex;	
    right: 0px;
    margin-top: 50px !important;}

    

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

	
#menubar {margin: 0 170px 1rem;}

/*上で非表示にしたメニューを表示させる為の設定*/
#menubar {display: block !important;background: #fff;	
    right: 0px;
    margin-top: 70px !important;}


	}




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

/*ドロップダウンの親メニューのカーソル表示を変更*/
a.ddmenu {cursor: default;}

/*メニューブロックアイコンの設定
---------------------------------------------------------------------------*/
/*アイコン共通設定*/
#menubar > nav > ul > li > a::before {
	display: block;
	color: #000000;	/*inline-css冒頭で指定しているprimary-colorを読み込みます*/
	font-family: "Font Awesome 6 Free";	/*Font Awesomeを使う指定*/
	font-weight: bold;		/*この設定がないとアイコンが出ない場合があります*/
	margin-right: 0.6rem;	/*アイコンの右側に空けるスペース0.6文字分。*/
	font-size: 1.2rem !important;		/*文字サイズ120%*/
	transition: 0.3s;		/*マウスオン時にかける時間。0.3秒。*/
	opacity: 1;			/*透明度50%*/
}
#menubar a:hover::before {
	transform: scale(1.2);	/*元の1.2倍に拡大*/
	opacity: 0.5;				/*透明度をなくす（100%色を出す）*/
}


/*１つ目のメニューのアイコン*/
#menubar > nav > ul > li:nth-of-type(1) > a::before {
	content: "\f015";	/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
}
/*２つ目のメニューのアイコン*/
#menubar > nav > ul > li:nth-of-type(2) > a::before {
	content: "\f2e7";	/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
}
/*３つ目のメニューのアイコン*/
#menubar > nav > ul > li:nth-of-type(3) > a::before {
	content: "\f290";	/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
}
/*４つ目のメニューのアイコン*/
#menubar > nav > ul > li:nth-of-type(4) > a::before {
	content: "\f54e";	/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
}
/*５つ目のメニューのアイコン*/
#menubar > nav > ul > li:nth-of-type(5) > a::before {
	content: "\f059";	/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
}


/*大きな端末、小さな端末共通のメニューブロック設定
---------------------------------------------------------------------------*/
/*メニュー内の小文字*/
#menubar ul li span {
	display: block;
	font-size: 0.7rem;	/*文字サイズを70%に*/
	opacity: 0.8;		/*透明度。色を70%だけ出す。*/
}

/*メニュー１個あたりの設定*/
#menubar a {
	display: block;text-decoration: none;
	padding: 10px 0;	/*上下、左右へのメニュー内の余白*/
}


/*大きな端末用のメニューブロック設定
---------------------------------------------------------------------------*/
#menubar > nav > ul {
	display: flex;	/*横並びにする*/
	gap: 10px;		/*10メニュー同士の間にあけるマージン的な余白*/
	justify-content: space-between;
	position: relative;	/*ドロップダウンの幅となる基準を作っておく*/
}

/*メニュー１個あたりの設定*/
#menubar li {font-weight: bold;
	flex: 1;			/*個々のメニューを均等にし、幅いっぱいまで使う設定*/
	text-align: center;	/*テキストをセンタリング*/font-size: 0.0rem;	/*文字サイズを70%に*/
}
#menubar a {
	position: relative;	/*下線の幅となる基準を作っておく*/
}

/*下線（通常時）*/
#menubar > nav > ul > li > a::after {
	content: "";
	position: absolute;left: 0px;bottom: 0px;
	width: 100%;
	height: 2px;		/*3これが下線の高さになります*/
	background: #ddd;	/*下線の色*/
	transition: 0.5s;	/*色が変わるまでの時間。0.5秒。*/
}

/*下線（マウスオン時）*/
#menubar > nav > ul > li > a:hover::after {
	background: #fff4ee;	/*下線の色。css冒頭で指定しているprimary-colorを読み込みます*/
}












/*大きな端末、小さな端末、共通のドロップダウンメニュー設定
---------------------------------------------------------------------------*/
/*ドロップダウンブロック*/
#menubar ul ul {
	animation: opa1 0.5s 0.1s both;	/*0.1秒待機後、0.5秒かけてフェードイン表示*/
	overflow: hidden;	/*簡易clearfix*/
}

/*ドロップダウンメニュー一個あたり*/
#menubar ul ul li {
	display: flex;
	align-items: center;
	float: left;		/*左に回り込みます*/
	margin-left: 2rem;	/*左に空けるスペース。メニュー間のスペースです。*/
}

/*ドロップダウン内のサムネイル画像*/
#menubar ul ul li img {
	width: 60px;
	margin-right: 0.5rem;
}


/*ドロップダウンメニュー
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
#menubar ul ul {
	position: absolute;z-index: 100;
	width: calc(100% - 2vw);
	left: 0px;
	background: #fff;
	border: 1px solid #fff4ee;
	border-radius: 10px;
	padding: 1vw;
}









/*詳細ページのサムネイル切り替えブロック
---------------------------------------------------------------------------*/
/*大きな画像が表示されるブロック*/
.thumbnail-view-parts {
	max-width: 1000px;		/*最大幅*/
	margin: 0 auto 1rem;	/*ブロック要素を中央に配置。下に1文字分のマージンをとる。*/
	text-align: center;		/*画像が小さい場合でもセンタリングされるように*/
}

/*サムネイル全体を囲むブロック*/
.thumbnail-parts {
	display: flex;				/*flexを使う指定*/
	justify-content: center;	/*並びかたの種類の指定。これはセンタリングする指定。*/
	margin-bottom: 2rem;		/*下に空けるスペース。２文字分。*/
}

/*サムネイル画像*/
.thumbnail-parts img {
	width: 100px;		/*サムネイルの幅*/
	margin: 2px;		/*サムネイル間のスペース*/
	cursor: pointer;	/*リンクタグではないが、クリックできる事をわかりやすくする為にリンクと同じポインターにしておきます。*/
	transition: 0.3s;	/*マウスオンまでにかける時間。3秒。*/
}
.thumbnail-parts img:hover {
	opacity: 0.8;	/*マウスオン時に80%だけ色を出す。つまり薄くなります。*/
}