@charset "UTF-8";

/* ----------------------------------------------------------- */
/* トップページ専用CSS                                         */
/* ----------------------------------------------------------- */




/* ----------------------------------------------------------- */
/* ●【共通】TOPメインコンテンツ部                             */
/* ----------------------------------------------------------- */
/* メイン画像用 */
#main_wrapper{
}

/* スライダー */
.slider-wrapper{
	position: relative;
	
	width: 100%;
	height: 600px; /* 画像によって変動する */
}

/* ----------------------------------------------------------- */
/* トップページヘッダーコンテンツ                              */
/* ----------------------------------------------------------- */
/* スライダーでスライド中に動かないコンテンツ部分 */
.slider-fixed-content.top-search-button-area{
	position: absolute;
	left  : 30px;
	bottom: 30px;
}
.slider-fixed-content.top-search-button-area a{
	display: block;
	padding: 5px;
	margin : 10px;
	
	width: 140px;
	
	text-align:center;
	text-decoration: none;
}
.slider-fixed-content.top-search-button-area > ul > li > a > span{
	display: inline-block;
	
	margin-bottom: 5px;
	
	font-size  : 48px;
	line-height: 64px;
}
.slider-fixed-content.top-search-button-area > ul > li > ul > li > a > span{
	display: inline-block;
	font-size  : 16px;
	line-height: 16px;
}
.slider-fixed-content.top-search-button-area > ul > li > ul > li > a{
	text-align: left;
}

.slider-fixed-content.top-search-button-area a > div:first-of-type{
	font-size     : 24px;
	text-indent   : 3px;
	letter-spacing: 3px;
}
.slider-fixed-content.top-search-button-area a > div.str5:first-of-type{
	text-indent   : 0;
	letter-spacing: -1px;
}
.slider-fixed-content.top-search-button-area a > div:last-child{
	font-size  : 16px;
	line-height: 16px;
}
.slider-fixed-content.top-search-button-area ul li{
	position:relative;
}
.slider-fixed-content.top-search-button-area ul li ul{
	position:absolute;
	z-index:200;
	left:90%;

	height:0;
	width :0;
	
	overflow:hidden;
}
.slider-fixed-content.top-search-button-area ul li:not(:last-child) ul{
	top:0;
}
.slider-fixed-content.top-search-button-area ul li:last-child ul{
	bottom:0;
}

.slider-fixed-content.top-search-button-area ul li ul li a{
	margin: 0;
}
.slider-fixed-content.top-search-button-area ul li a:hover + ul{
	height:auto;
	width :auto;
}
.slider-fixed-content.top-search-button-area ul li ul:hover{
	height:auto;
	width :auto;
}



.slider-fixed-content.top-search-easy-area{
	position: absolute;
	left:0;
	right:0;
	bottom: 30px;
	
	width: 800px;
	height: 110px;
	
	padding: 10px;
	
	margin: 10px auto;
}
.slider-fixed-content.top-search-easy-area:after{
	content: "";
	clear: both;
}
/* 内部のセレクトボックス用 */
.slider-fixed-content.top-search-easy-area select{
	box-sizing: border-box;
	
	width: 190px;
	margin: 5px;
	padding: 10px 5px;
	border-radius: 0;
	border: 1px solid transparent;
	
	font-size: 16px;
	line-height: 24px;
}
.slider-fixed-content.top-search-easy-area label.select-cover:before{
	right : 10px;
	top: auto;
	bottom: 10px;
	
	width : 17px;
	height: 17px;
}
.slider-fixed-content.top-search-easy-area label.select-cover:after{
	right : 14px;
	top: auto;
	bottom: 16px;
	
	width : 8px;
	height: 8px;
	
	border-width: 3px 3px 0 0;
}
/* 内部の入力ボックス(フリーワード) */
.slider-fixed-content.top-search-easy-area input[type="text"]{
	width: 590px;
	padding: 10px 5px;
	border-radius: 0;
	border: 1px solid transparent;
	
	font-size: 16px;
	line-height: 24px;
}

.top-search-easy-area .top-search-easy-any{
	text-align: right;
}
.top-search-easy-area .top-search-easy-result{
	display: inline-block;
	width: 200px;
	padding: 5px;
	
	font-size: 16px;
	text-align: right;
	vertical-align: bottom;
}
.top-search-easy-result span{
	font-size: 32px;
	line-height: 32px;
}
/* 検索ボタン */
.top-search-easy-area .top-search-easy-button{
	display: inline-block;
	text-align: right;
}
.top-search-easy-button button{
	width: 190px;
	margin: 5px;
	font-size: 18px;
	line-height: 1.6;
}

/* 検索ボタンのアイコン */
.top-search-easy-button button > span{
	margin-left: 10px;
	display: inline-block;
	font-size: 18px;
	line-height: 1.6;
	vertical-align: top;
}

/* [SCREEN PC] */
@media print, screen and (min-width: 769px){
	.top-search-easy-area form{
		display: inline-block;
	}
}/* /[SCREEN PC] */




/* トップページヘッダーコンテンツのみの1279px以下設定 */
/* max-widthを1280とするため、不要になった
@media print, screen and (max-width: 1279px){
	.slider-fixed-content.top-search-easy-area{
		left : 100px;
		
		width: 420px;
		height: 170px;
	}
	.slider-fixed-content.top-search-easy-area input[type="text"]{
		width: 410px;
		margin: 5px;
	}
}
*/
/* }}} トップページヘッダーコンテンツのみの1279px以下設定 */






/* ----------------------------------------------------------- */
/* ●【ヘッダー】スマホ・タブレット縦                          */
/* ----------------------------------------------------------- */
@media screen and (max-width: 768px){
	#main_wrapper{
		margin-top: 50px; /* ずらして、ボタンを画像の上辺を超えて載せる */
	}
	.slider-fixed-content.top-search-button-area{
		position: relative;
		top: -50px; /* ずらして載せる */
		left: auto;
		right: auto;
		bottom: auto;
		
		display : -webkit-box; /* Android 2～4 */
		display : -webkit-flex;
		display : -moz-flex;
		display : -ms-flex;
		display : flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: stretch;
	}
	.slider-fixed-content.top-search-button-area > ul {
		width:100%;
	}
	.slider-fixed-content.top-search-button-area > ul > li{
		position:relative;
		flex: 0 1 35%;
		box-sizing: border-box;
		
		margin: 0;
		padding: 10px 0;
		width: 25%;
		
		border-width :1px 0 1px 1px;
		float:left;
	}
	.slider-fixed-content.top-search-button-area ul li ul{
		position:absolute;
		z-index:200;
		left:0;

		height:0;
		width :0;
		font-size: 14px;
		
		overflow:hidden;
	}
	.slider-fixed-content.top-search-button-area ul li:not(:last-child) ul{
		top:90%;
		bottom:auto;
	}
	.slider-fixed-content.top-search-button-area ul li:nth-of-type(3) ul,
	.slider-fixed-content.top-search-button-area ul li:last-child ul{
		top:90%;
		bottom:auto;
		left:auto;
		right:0;
	}
	/* iPhone6 iOS11.1.2 Safariで無理矢理表示させるためのあにめーしょん タスクNo.1965 https://github.com/e-Vision-JP/miraie-company-hp/pull/167 */
	@keyframes menuDisp {
		0% {
			width :199%;
			height: 0;
		}
		100% {
			width :200%;
			height: auto;
		}
	}
	.slider-fixed-content.top-search-button-area ul li a:hover + ul{
		animation: menuDisp 1ms ease 0ms 1 normal forwards;
	}
	.slider-fixed-content.top-search-button-area ul li a:hover + ul{
		width :200%;
	}
	.slider-fixed-content.top-search-button-area ul li ul:hover{
		width :200%;
	}
	.slider-fixed-content.top-search-button-area a{
		flex: 0 1 35%;
		box-sizing: border-box;
		
		margin: 0;
		padding: 10px 0;
		width: auto;
		
		border-width :1px 0 1px 1px;
	}
	.slider-fixed-content.top-search-button-area > ul > li > a > span{
		display: inline-block;
		margin-bottom: 5px;
		
		font-size  : 32px;
		line-height: 48px;
	}
	.slider-fixed-content.top-search-button-area > ul > li > ul > li > a > span{
		display: inline-block;
		font-size  : 16px;
		line-height: 16px;
	}
	.slider-fixed-content.top-search-button-area > ul > li > ul > li > a{
		text-align: left;
		padding: 10px;
	}
	.slider-fixed-content.top-search-button-area a > div:first-of-type{
		font-size     : 14px;
		text-indent   : 3px;
		letter-spacing: 3px;
	}
	.slider-fixed-content.top-search-button-area a > div:last-child{
		display:none;
	}
	
	.slider-wrapper > .slide-container > .slider-scroller > div > .slider-image-content{
		height: 400px;
	}
	.slider-wrapper{
		overflow: visible;
		height  : auto;
	}
	.slider-wrapper > .slide-container > .slider-scroller{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	
	
	.slider-fixed-content.top-search-easy-area{
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
		
		width: auto;
		height: auto;
		
		margin: 300px 20px 0;/* ～A4.3 */ /* タブレット縦用あり */
		padding: 10px 15px;
		
		border: 1px solid #666;
		
		background-color: white;
		color: black;
	}
	.slider-fixed-content.top-search-easy-area label.select-cover{
		display: block;
	}
	.slider-fixed-content.top-search-easy-area select{
		margin: 5px 0;
		width: 100%;
		border: 1px solid black;
	}
	.slider-fixed-content.top-search-easy-area input[type="text"]{
		width: 100%;
		margin: 0;
		border: 1px solid black;
	}
	.top-search-easy-area .top-search-easy-result{
		width: auto;
	}
}


@media screen and (max-width: 480px){
	.slider-fixed-content.top-search-easy-area{
		margin-top: calc( 47vw - 50px ); /* 幅1920のうち、1280を表示するので、画像を常に150vw拡大する。高さも150vwになるため、その高さ分検索ボックスを下げる。画像は、3.2:1の比率のため、150vw÷3.2=46.875vwつまり、47vw */
	}
}