@charset "utf-8";
/**************************************/
/* CSS file For miyata-jyuusou.co     */
/* FileName: header.css               */
/* date: 2023.05.02                   */
/**************************************/




/*-----------------------------------------------------
	Header
------------------------------------------------------*/

/*header h1 {
	font-size: 13px;
	width: 28rem;
	padding-top: 13px;
	background-color: #f9f8f4;
}*/


/*-------------------------------------------------------------
	nav全般
---------------------------------------------------------------*/

/*---------------ハンバーガーメニュー関連------------------------------*/

#nav-drawer {
	position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
	display:none;
}

/*アイコンのスペース*/
#nav-open {
	display: inline-block;
	width: 30px;
	height: 22px;
	vertical-align: middle;
	position: fixed;
	left: 5px;
	top: 24px;
	z-index: 9;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
	position: absolute;
	height: 3px;/*線の太さ*/
	width: 25px;/*長さ*/
	background: #191970;
	display: block;
	content: '';
	cursor: pointer;
}

#nav-open span:before {
	bottom: -8px;
}

#nav-open span:after {
	bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
	display: none;/*はじめは隠しておく*/
	position: fixed;
	z-index: 99;
	top: 0;/*全体に広がるように*/
	left: 0;
	width: 855px;
	height: 855px;
	background: black;
	opacity: 0;
	transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
	overflow: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;/*最前面に*/
	background: #fff;/*背景色*/
	transition: .3s ease-in-out;/*滑らかに表示*/
	-webkit-transform: translateX(-305%);
	transform: translateX(-305%);/*左に隠しておく*/
	background-color: #eee;
}
#nav-content {
	height: 1250px;
	width: 80%;/*左側に隙間を作る（閉じるカバーを表示）*/
	max-width: 330px;/*最大幅（調整してください）*/
}


#nav-content {
	height: 100%;
	width: 60%;/*左側に隙間を作る（閉じるカバーを表示）*/
	max-width: 350px;/*最大幅（調整してください）*/
}

#nav-content ul {
	margin-top: 15px;
}
#nav-content ul li {
	line-height: 2.2;
	margin-left: 0.5em;
	font-size: 1.1em;
}
#nav-content ul li.second {
	padding-left:1em;
}

#nav-content ul li a.humburger-current {
	font-weight: bold;
	color: #0059b2;
	background-color: #dae1f3;
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
	display: block;/*カバーを表示*/
	opacity: .5;
}

#nav-input:checked ~ #nav-content {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);/*中身を表示（右へスライド）*/
	box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

@media screen and (max-width:1024px) {
	#navigation {
		display: none;
	}
}

#nav-open  {
	display: none;
}
#nav-content  {
	display: none;
}

#navigation {
	display: none;
}





/*-----------------------------------------------------
	通常のメインnavはこちら
------------------------------------------------------*/
nav .nav-wrap {
	width: 1000px;
	margin: 0 auto;
	padding: 0% 0 1.5%;
	
}
nav .nav-wrap ul {
	width: 1000px;
	height: 98px;
	margin: 0 auto;
}
nav .nav-wrap ul li {
	margin-left: 55px;
	margin-right: 55px;
	float: left;
	width: 112px;
	height: 98px;
}
nav .nav-wrap ul li img {
	width: 100%;
	height: auto;
}
nav .nav-wrap ul li:first-child {
	margin-left: -1px;
}
nav .nav-wrap ul li:last-child {
	margin-right: -1px;
}

/*-----------------------------------------------------
	slider-area(top-page)
------------------------------------------------------*/


/*==// スライダーと文字のwrap //==*/
main > div{ position:relative; }
/*==// 上に載せる文字部分 //==*/
main > div section{
	color:#fff;
	position:absolute;
	/*上下中央に文字配置*/
	top:50%;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	left:10%;
}


/*main > div section h2{ margin-bottom:15px; font-size:30px; font-size:3rem; }
main > div section p{ font-size:18px; font-size:1.8rem; }*/
/*===================================
 スライダーの指定だけならここから下だけでOK
===================================*/
/*==// スライダーのコンテナ //==*/
main .slider{
		padding-top:46px;/*戻るボタンの高さ分あけてます*/
		width:100%;/* スライダーの幅を指定*/
		max-width: 1400px;
		list-style:none;
}
/*==//  ここから矢印  //==*/
.slick-arrow{ z-index:100; }
.slick-next{ right:10px;}/*内側に右から10ピクセル移動*/
.slick-prev{ left:10px; }/*内側に左から10ピクセル移動*/


main .slider-area {
	margin: 0 auto;
}

main .slider {
	position: relative;
	height: auto;
	margin: 0 auto;
}

/* イメージサイズ指定・スライダー */
#page01 .slider-area img.slider-img {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	height: auto;
}
#page01 nav {
	margin-top: 0.5%;
}

header h2.page-img {
	/*width: 1350px;*/
	margin: 0 auto;
}
header h2.page-img img {
	/*width: 1350px;*/
	height: auto;
	margin: 0 0;
}

header .breadcrumb-trail {
	font-size: 14px;
	margin-left: 26px;
}
header .breadcrumb-trail img {
	margin-bottom: -6px;
	width: 26px;
	height: auto;
}




/** 以下レスポンシブのCSS */




/** 1400px以上の場合のCSS */
@media screen and (min-width: 1400px){

	header {
		width: 1400px;
		height: auto;
		margin: 0px auto 0px;
	}
	header .header-left {
		width: 560px;
		float: left;
		padding-bottom: 0.15%;
		margin-left: 0%;
		margin-right: 140px;
	}
	header .header-left h1 {
		width: 560px;
		margin-bottom: 0;
		margin-left: 10px;
		margin-right: 0;
		padding-left: 15px;
		padding-top: 13px;
		padding-bottom: 4px;
		font-size: 13px;
	}
	header .header-left img {
		/*width: 532px;*/
		width: 354px;
		height: auto;
		margin-left: 2%;
	}
	header .header-right {
		
	}
	
	header .header-right img {
		width: 310px;
		height: auto;
		position: relative;
		margin-top: 40px;
		margin-bottom: 10px;
		margin-right: 0px;
		margin-left: 360px;
	}
	header h2.page-img {
		width: 1350px;
		margin: 0 auto;
	}
	header h2.page-img img {
		width: 1350px;
		height: auto;
		margin: 0 0;
	}
}

/** 1025px以上1399px以下の場合のCSS */
@media screen and (min-width: 1025px) and (max-width:1399px){

	header {
		width: 100%;
		max-width: 1399px;
		height: auto;
		margin: 0px auto 0px;
	}
	header .header-left {
		width: 40%;
		max-width: 410px;
		float: left;
		padding-bottom: 0.15%;
		margin-left: 0%;
		margin-right: 10%;
	}
	header .header-left h1 {
		width: 31em;
		margin-bottom: 0;
		margin-left: 10px;
		margin-right: 0;
		padding-left: 15px;
		padding-top: 13px;
		padding-bottom: 4px;
		font-size: 13px;
	}
	header .header-left img {
		width: 95%;
		max-width: 354px;
		height: auto;
		margin-left: 0%;
	}

	header .header-right {
		
	}
	header .header-right img {
		width: 308px;
		height: auto;
		position: relative;
		margin-top: 56px;
		margin-right: 0px;
		margin-left: 435px;
	}
	header h2.page-img {
		width: 100%;
		max-width: 1350px;
		margin: 0 auto;
	}
	header h2.page-img img {
		width: 100%;
		max-width: 1350px;
		height: auto;
		margin: 0 0;
	}
}

@media screen and (min-width: 701px) and (max-width: 1024px){
	nav .nav-wrap {
		display: none;
	}
	#navigation {
		display: block;
	}
	#nav-open {
		display: block;
	}
	#nav-content  {
		display: block;
	}
	header {
		width: 100%;
		height: auto;
		margin: 0px auto 0;
	}
	
	header .header-left {
		width: 400px;
		float: left;
		/*margin-left: 0%;*/
		margin-left: 40px;
		/*margin-right: 10%;*/
		/*padding-bottom: 0.15%;*/
		/*padding-bottom: 0.23%;*/
		padding-bottom: 0;
		
	}
	header .header-left h1 {
		width: 33em;
		margin-left: 11px;
		margin-right: 0;
		margin-bottom: 0;
		/*margin-left: 10px;*/
		padding-left: 15px;
		padding-top: 13px;
		/*padding-bottom: 4px;*/
		padding-bottom: 0;
		font-size: 11px;
	}
	header .header-left img {
		width: 280px;
		height: auto;
		margin-left: 0;
	}
	
	
	
	header .header-right {
		/*width: 220px;
		float: left;*/
	}
	header .header-right img {
		/*width: 308px;
		height: 31px;*/
		width: 220px;
		height: auto;
		/*margin-top: 1rem;*/
		/*position: absolute;
		right: 14px;
		top: 42px;*/
		position: relative;
		/*margin-top: 36px;*/
		margin-top: 39px;
		margin-right: 0px;
	}
	@media screen and (min-width: 701px) and (max-width: 800px){
		header .header-right img {
			margin-left: 56px;
		}
	}
	@media screen and (min-width: 801px) and (max-width: 900px){
		header .header-right img {
			margin-left: 130px;
		}
	}
	@media screen and (min-width: 901px) and (max-width: 1000px){
		header .header-right img {
			margin-left: 230px;
		}
	}
	@media screen and (min-width: 1001px){
		header .header-right img {
			margin-left: 330px;
		}
	}
		
	header h2.page-img {
		width: 100%;
		max-width: 1024px;
		margin: 0 auto;
	}
	header h2.page-img img {
		width: 100%;
		max-width: 1024px;
		height: auto;
		margin: 0 0;
	}
	header .breadcrumb-trail {
		font-size: 12px;
	}
	header .breadcrumb-trail img {
		margin-bottom: -6px;
		margin-left: 25px;
		width: 40px;
		height: auto;
	}
}



/** 568px以上700px以下の場合のCSS */
@media screen and (min-width: 568px) and (max-width: 700px){
	nav .nav-wrap {
		display: none;
	}
	
	#navigation {
		display: block;
	}
	#nav-open {
		display: block;
	}
	#nav-content  {
		display: block;
	}
	
	header .header-left {
		float: left;
		display: block;
		margin-left: 40px;
	}
	header .header-left h1 {
		width: 29.5em;
		margin-left: 11px;
		margin-top: 11px;
		font-size: 11px;
	}
	header h2.page-img {
		width: 100%;
		max-width: 700px;
		margin: 0 auto;
	}
	header h2.page-img img {
		width: 100%;
		max-width: 700px;
		height: auto;
		margin: 0 0;
	}
	@media screen and (max-width: 639px){
		header .header-left h1 {
			width: 29em;
		}
		header h2.page-img {
			width: 100%;
			max-width: 639px;
			margin: 0 auto;
		}
		header h2.page-img img {
			width: 100%;
			max-width: 639px;
			height: auto;
			margin: 0 0;
		}
	}
	header .header-left img {
		width: 250px;
		height: auto;
		margin-left: 0;
	}
	header .header-right {
		width: 210px;
		display: block;
		float: left;
	}
	@media screen and (max-width: 639px){
		header .header-right {
			width: 180px;
		}
	}
	header .header-right img {
		width: 200px;
		height: auto;
		/*margin-top: 1rem;*/
		position: relative;
		margin-top: 33px;
		margin-right: 0px;
		margin-left: 10px;
	}
	@media screen and (max-width: 639px){
		header .header-right img {
			width: 175px;
			margin-left: 0;
		}
	}
	header .breadcrumb-trail {
		font-size: 10px;
	}
	header .breadcrumb-trail img {
		margin-left: 25px;
		margin-bottom: -6px;
		width: 30px;
		height: auto;
	}
}

/** 401px以上567px以下の場合のCSS */
@media screen and (min-width: 401px) and (max-width: 567px){
	nav .nav-wrap {
		display: none;
	}
	
	#navigation {
		display: block;
	}
	#nav-open {
		display: block;
	}
	#nav-content  {
		display: block;
	}
	
	header .header-left {
		margin-left: 45px;
		width: 430px;
		float: left;
	}
	header .header-left h1 {
		width: 33em;
		margin-top: 10px;
		margin-left: 14px;
		font-size: 10px;
	}
	header .header-left img {
		width: 300px;
		height: auto;
		margin-left: 0;
	}
	header .header-right {
		width: 430px;
		margin-left: 35px;
		float: left;
	}
	header .header-right img {
		width: 190px;
		height: auto;
		position: relative;
		margin-top: 0.2rem;
		margin-left: 26px;
	}
	header h2.page-img {
		width: 100%;
		max-width: 567px;
		margin: 0 auto;
	}
	header h2.page-img img {
		width: 100%;
		max-width: 567px;
		height: auto;
		margin: 0 0;
	}
	header .breadcrumb-trail {
		font-size: 10px;
	}
	header .breadcrumb-trail img {
		margin-left: 25px;
		margin-bottom: -6px;
		width: 30px;
		height: auto;
	}
}

/** 321px以上400px以下の場合のCSS */
@media screen and (min-width: 321px) and (max-width: 400px){
	nav .nav-wrap {
		display: none;
	}
	
	#navigation {
		display: block;
	}
	#nav-open {
		display: block;
	}
	#nav-content  {
		display: block;
	}
	
	header .header-left {
		margin-left: 45px;
		width: 250px;
		float: left;
	}
	header .header-left h1 {
		width: 33em;
		margin-top: 10px;
		margin-left: 10px;
		font-size: 10px;
	}
	header .header-left img {
		width: 200px;
		height: auto;
		margin-left: 0;
	}
	header .header-right {
		width: 250px;
		margin-left: 0px;
		float: left;
	}
	header .header-right img {
		width: 220px;
		height: auto;
		position: relative;
		margin-top: 0.2rem;
		margin-left: 54px;
	}
	header h2.page-img {
		width: 100%;
		max-width: 400px;
		margin: 0 auto;
	}
	header h2.page-img img {
		width: 100%;
		max-width: 400px;
		height: auto;
		margin: 0 0;
	}
	header .breadcrumb-trail {
		font-size: 10px;
	}
	header .breadcrumb-trail img {
		margin-left: 25px;
		margin-bottom: -6px;
		width: 30px;
		height: auto;
	}
}	

/** 320px以下の場合のCSS */
@media screen and (max-width: 320px){
	nav .nav-wrap {
		display: none;
	}
	
	#navigation {
		display: block;
	}
	#nav-open {
		display: block;
		top: 32px;
	}
	#nav-content  {
		display: block;
	}
	
	header .header-left {
		margin-left: 45px;
		width: 200px;
		float: left;
	}
	header .header-left h1 {
		width: 37em;
		margin-top: 8px;
		margin-left: -45px;
		font-size: 8px;
	}
	header .header-left img {
		width: 200px;
		height: auto;
		margin-left: -12px;
	}
	header .header-right {
		width: 200px;
		margin-left: 0px;
		float: left;
	}
	header .header-right img {
		width: 190px;
		height: auto;
		position: relative;
		margin-top: 0.2rem;
		margin-left: 45px;
	}
	header h2.page-img {
		width: 100%;
		max-width: 320px;
		margin: 0 auto;
	}
	header h2.page-img img {
		width: 100%;
		max-width: 320px;
		height: auto;
		margin: 0 0;
	}
	header .breadcrumb-trail {
		font-size: 10px;
	}
	header .breadcrumb-trail img {
		margin-left: 25px;
		margin-bottom: -6px;
		width: 30px;
		height: auto;
	}
	@media screen and (max-width: 280px){
		span.p01-indention-280::before {
			content: "\A";
			white-space: pre;
		}
	}
}