 /*
	Theme Name:りふり「作業の流れ」v1.0
	Description:りふり「作業の流れ」オリジナルテーマです。
	Author:シグニフィ
	Version:1.0
	License:シグニフィ
*/
/**************************************************************************************/

@charset "UTF-8";
@import url("css/style_Typography.css");
@import url("css/style_GeneralSetting.css");


:root{/*<html>要素をスコープとして定義*/

	/*カスタムプロパティ【宣言】････････		  【呼び出し】･･･････････････････････････････････････････････････*/
	--Color_gray:#b5b5b5;						/*グレイ					 color: var(--Color_gray);		   */
	--Color_ivory:#fffaea;						/*アイボリー（クリーム色）	color: var(--Color_ivory);		  */
	--Color_brightYellow:#ecc820;				/*山吹色					 color: var(--Color_brightYellow); */
	/*･･････････････････････････････････		･･････････････････････････････････････････････････････････････*/
}


/*メインコンテンツ･････････････････････････････････*/
main{
	min-height:100vh;
	min-height:100svh;
	width:100%;
	background-color:white;
	overflow:hidden;
}
	/*メインタイトル*/
	#titleArea{
		width:calc(100% - 250px);
		margin-top:20px;
		padding:0 15px;
		color:white;
		background-color:#3f2f18;
		box-sizing:border-box;
	}
	#contents{
		width:calc(100% - 250px);
		float:right;
	}
		#contents>section,
		#contents>article{
			width:90%;
			margin-left:5%;
		}
		#contents>article:first-of-type{
			margin-top:50px;
		}


/*サイドメニュー･･･････････････････････････････････*/
#side-menu{
	z-index:900;
	position:fixed;
	top:0;
	left:0;
	height:auto;
	min-height:100vh;
	min-height:100svh;
	width:250px;
	text-align:center;
	text-align-last:center;
}
	/*ロゴ*/
	#side-menu>div{
		z-index:900;
		position:relative;
		height:160px;
		width:250px;
		background-color:var(--Color_ivory);
		border-right:1px solid var(--Color_gray);
		box-sizing:border-box;
	}
		#side-menu>div>a{
			display:inline-block;
			height:100px;
			width:auto;
			margin:30px auto auto 20px;
		}
			#side-menu>div>a>img{
				display:inline-block;
				height:100px;
				width:210px;
				object-fit:contain;
				object-position:center center;
			}

	/*メニュー項目（第１階層）*/
	#menu01{
		z-index:900;
		position:relative;
		display:inline-block;
		height:100vh;
		width:100%;
		border-top:1px solid var(--Color_gray);
		border-right:1px solid var(--Color_gray);
		background-color:var(--Color_ivory);
		box-sizing:border-box;
	}
		#menu01>li{
			display:inline-block;
			height:32px;
			width:230px;
			padding:16px 10px;
			vertical-align:top;
			background:url(images/arrow.png) right 9px center no-repeat;/*矢印*/
		}
		#menu01>li:nth-of-type(n+2){/*2番目以降*/
			border-top:1px dotted var(--Color_gray);
		}
		#menu01>li:last-of-type{/*最後*/
			border-bottom:1px solid var(--Color_gray);
		}
		#menu01>li:hover{
			cursor:pointer;
			background-color:var(--Color_brightYellow);
		}
			#menu01>li>*{
				float:left;
			}
			#menu01>li>img{/*アイコン*/
				height:37px;
				width:30px;
			}
			#menu01>li>p{/*テキスト*/
				height:1.0em;
				width:171px;
				margin:0 auto auto 13px;
				font-size:16px;
			}

		/*コピーライト*/
		#menu01>li.copyright{
			width:250px;
			padding:9px 0 2px 0;
			background:none;
			pointer-events:none;
		}
			#menu01>li.copyright>p{
				width:100%;
				margin:auto;
				font-size:13px;
				text-align:center;
				text-align-last:center;
			}

		/*メニュー項目（第２階層）*/
		#menu02{
			z-index:850;
			position:absolute;
			top:0;
			left:250px;
			height:100vh;
			width:400px;
			margin-left:-400px;/*初期設定*/
			text-align:center;
			text-align-last:center;
			background-color:var(--Color_brightYellow);
		}

			/*メニュー「閉じるボタン」*/
			#menu02>div{
				display:inline-block;
				height:40px;
				width:360px;
				margin-top:20px;
				text-align:right;
				text-align-last:right;
			}
				#menu02>div>p#btn_mClose{
					display:inline-block;
					height:40px;
					width:40px;
					pointer-events:auto;
					cursor:pointer;
				}
				#menu02>div>p#btn_mClose:hover{
					background-color:rgba(255, 250, 234, 0.5);
				}

			/*サブタイトル*/
			#menu02>li.title{
				display:inline-block;
				margin-top:0;
			}
				#menu02>li.title>div{
					display:inline-block;
					width:100%;
				}
					#menu02>li.title>div>*{
						display:inline-block;
						float:left;
					}
					#menu02>li.title>div>img{/*アイコン*/
						height:64px;
						width:auto;
					}
					#menu02>li.title>div>p{/*テキスト*/
						display:inline-block;
						margin:7px auto auto 10px;
						font-size:30px;
						font-weight:bold;
					}

			/*リスト（メニュー項目：第２階層）*/
			#menu02>li:not(.title){
				display:inline-block;
				margin-top:0;
				width:100%;
				text-align:center;
				text-align-last:center;
			}
				#menu02>li:not(.title)>ul{
					display:inline-block;
					width:calc(100% - 90px);
				}
					#menu02>li:not(.title)>ul>li{
						display:inline-block;
						width:100%;
					}
						#menu02>li:not(.title)>ul>li>a{
							display:inline-block;
							width:100%;
							padding:15px 0 15px 30px;
							font-size:16px;
							box-sizing:border-box;
							background:url(images/arrow2.png) left center no-repeat;/*矢印*/
						}
						#menu02>li:not(.title)>ul>li>a:hover{
							background-color:rgba(255, 250, 234, 0.5);
						}

						/*イラスト*/
						#menu02>li>ul>li.illust{
							display:inline-block;
							height:300px;
							width:300px;
							margin:35px auto auto 5px;
						}
							#menu02>li>ul>li.illust>img{
								display:inline-block;
								height:300px;
								width:300px;
								object-fit:contain;
								object-position:center top;
							}


/*サイドメニュー背景（シールド）･･･････････････････*/
#mShield{
	z-index:800;
	display:none;
	position:fixed;
	top:0;
	left:0;
	height:100vh;
	width:100%;
}


/*戻るボタン･･･････････････････････････････････････*/
.btn_back{
	display:inline-block;
	margin:50px auto;
	padding:3px 30px 5px 30px;
	color:white;
	background-color:gray;
}


/**************************************************************************************

	メディアクエリ

***************************************************************************************/
/*750px以下*/
@media(max-width:750px){


/*メインコンテンツ･････････････････････････････････*/
main{
	min-height:100vh;
	min-height:100svh;
	width:100%;
	background-color:white;
	overflow:hidden;
}
	/*メインタイトル*/
	#titleArea{
		width:calc(100% - 250px);
		margin-top:20px;
		padding:0 15px;
		color:white;
		background-color:#3f2f18;
		box-sizing:border-box;
																						width:calc(100% - 120px);
																						margin-top:0;
																						padding:11px 15px 7px 15px;
	}
	#contents{
		width:calc(100% - 250px);
		float:right;
																						width:calc(100% - 120px);
	}
		#contents>section,
		#contents>article{
			width:90%;
			margin-left:5%;
																						width:95%;
																						margin-left:2.5%;
		}
																						/*動画*/
																						#wpContents>figure.wp-block-video>video{
																							border:solid 1px gray;
																							box-sizing:border-box;
																						}
	
/*サイドメニュー･･･････････････････････････････････*/
#side-menu{
	z-index:900;
	position:fixed;
	top:0;
	left:0;
	height:auto;
	min-height:100vh;
	min-height:100svh;
	width:250px;
	text-align:center;
	text-align-last:center;
																						width:120px;
}
																						#side-menu *{
																							letter-spacing:0;
																							line-height:1.5em;
																						}

	/*ロゴ*/
	#side-menu>div{
		z-index:900;
		position:relative;
		height:160px;
		width:250px;
		background-color:var(--Color_ivory);
		border-right:1px solid var(--Color_gray);
		box-sizing:border-box;
																						height:100px;
																						width:120px;
	}
		#side-menu>div>a{
			display:inline-block;
			height:100px;
			width:auto;
			margin:30px auto auto 20px;
																						height:80px;
																						width:100px;
																						margin:10px auto auto 10px;
		}
			#side-menu>div>a>img{
				display:inline-block;
				height:100px;
				width:210px;
				object-fit:contain;
				object-position:center center;
																						height:80px;
																						width:100px;
			}

	/*メニュー項目（第１階層）*/
	#menu01{
		z-index:900;
		position:relative;
		display:inline-block;
		height:100vh;
		width:100%;
		border-top:1px solid var(--Color_gray);
		border-right:1px solid var(--Color_gray);
		background-color:var(--Color_ivory);
		box-sizing:border-box;
																						height:auto;
	}
		#menu01>li{
			display:inline-block;
			height:32px;
			width:230px;
			padding:16px 10px;
			vertical-align:top;
			background:url(images/arrow.png) right 9px center no-repeat;/*矢印*/

																						height:auto;
																						width:120px;
																						padding:10px 0 8px 0;
																						background:none;
		}
		#menu01>li:nth-of-type(n+2){/*2番目以降*/
			border-top:1px dotted var(--Color_gray);
		}
		#menu01>li:last-of-type{/*最後*/
			border-bottom:1px solid var(--Color_gray);
		}
		#menu01>li:hover{
			cursor:pointer;
			background-color:var(--Color_brightYellow);
																						background:none;
		}
			#menu01>li>*{
				float:left;
			}
			#menu01>li>img{/*アイコン*/
				height:37px;
				width:30px;
																						display:none;
			}
			#menu01>li>p{/*テキスト*/
				height:1.0em;
				width:171px;
				margin:0 auto auto 13px;
				font-size:16px;
																						height:auto;
																						width:95px;
																						margin:0 auto auto 15px;
																						font-size:19px;
																						text-align:left;
																						float:left;
			}

		/*コピーライト*/
		#menu01>li.copyright{
			width:250px;
			padding:9px 0 2px 0;
			background:none;
			pointer-events:none;
																						width:120px;
																						padding:9px 0 7px 0;
		}
			#menu01>li.copyright>p{
				width:100%;
				margin:auto;
				font-size:13px;
				text-align:center;
				text-align-last:center;
																						width:100px;
																						margin-left:10px;
			}

		/*メニュー項目（第２階層）*/
		#menu02{
			z-index:850;
			position:absolute;
			top:0;
			left:250px;
			height:100vh;
			width:400px;
			margin-left:-400px;/*初期設定*/
			text-align:center;
			text-align-last:center;
			background-color:var(--Color_brightYellow);
																						height:auto;
																						left:120px;
																						width:380px;
		}

			/*メニュー「閉じるボタン」*/
			#menu02>div{
				display:inline-block;
				height:40px;
				width:360px;
				margin-top:20px;
				text-align:right;
				text-align-last:right;
			}
				#menu02>div>p#btn_mClose{
					display:inline-block;
					height:40px;
					width:40px;
					pointer-events:auto;
					cursor:pointer;
				}
				#menu02>div>p#btn_mClose:hover{
					background-color:rgba(255, 250, 234, 0.5);
																						background:none;
				}

			/*サブタイトル*/
			#menu02>li.title{
				display:inline-block;
				margin-top:0;
			}
				#menu02>li.title>div{
					display:inline-block;
					width:100%;
				}
					#menu02>li.title>div>*{
						display:inline-block;
						float:left;
					}
					#menu02>li.title>div>img{/*アイコン*/
						height:64px;
						width:auto;
																						height:48px;
					}
					#menu02>li.title>div>p{/*テキスト*/
						display:inline-block;
						margin:7px auto auto 10px;
						font-size:30px;
						font-weight:bold;
																						margin:2px auto auto 8px;
					}

			/*リスト（メニュー項目：第２階層）*/
			#menu02>li:not(.title){
				display:inline-block;
				margin-top:0;
				width:100%;
				text-align:center;
				text-align-last:center;
																						margin-top:0;
			}
				#menu02>li:not(.title)>ul{
					display:inline-block;
					width:calc(100% - 90px);
																						width:calc(100% - 60px);
				}
					#menu02>li:not(.title)>ul>li{
						display:inline-block;
						width:100%;
																						margin-top:14px;
																						font-size:19px;
																						overflow:hidden;
					}
						#menu02>li:not(.title)>ul>li>a{
							display:inline-block;
							width:100%;
							padding:15px 0 15px 30px;
							font-size:16px;
							box-sizing:border-box;
							background:url(images/arrow2.png) left center no-repeat;/*矢印*/

																						padding:0 0 0 30px;
																						font-size:19px;
																						overflow:hidden;
						}
						#menu02>li:not(.title)>ul>li>a:hover{
							background-color:rgba(255, 250, 234, 0.5);
																						background-color:rgba(0, 0, 0, 0);
						}

						/*イラスト*/
						#menu02>li>ul>li.illust{
							display:inline-block;
							height:300px;
							width:300px;
							margin:35px auto auto 5px;
						}
							#menu02>li>ul>li.illust>img{
								display:inline-block;
								height:300px;
								width:300px;
								object-fit:contain;
								object-position:center top;
							}


/*サイドメニュー背景（シールド）･･･････････････････*/
#mShield{
	z-index:800;
	display:none;
	position:fixed;
	top:0;
	left:0;
	height:100vh;
	width:100%;
}


/*戻るボタン･･･････････････････････････････････････*/
.btn_back{
	display:inline-block;
	margin:50px auto;
	padding:3px 30px 5px 30px;
	color:white;
	background-color:gray;
}
	
	
}

/*500px以下（モバイル対応）*/
@media(max-width:500px){
}