@charset "UTF-8";



/*

	01-index.css *

		9	| Parts
		10	| 01-index.css Media Query

*/



/*
	11
	-
	Parts
*/

header#index-header {
    position: relative;
    z-index: 9;
    width: 100%;
    height: 27rem;
    overflow: hidden;
    background-color: #191919;
}

header#index-header img.index-title {
    position: absolute;
    z-index: 999;
    width: 259px;
    height: 160px;
    left: 4rem;
    top: 6rem;
}

header#index-header img.index-image {
    position: absolute;
    z-index: 99;
    min-width: 100%;
    min-height: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: 0;
    object-fit: cover;
    object-position: 0 0;
}

header#index-header img.index-res-image {
    display: none;
    z-index: 98;
}

header#index-header img.ofi {
    font-family: 'object-fit: cover; object-position: 0 0;' /* IE・Edge */
}

header#index-header div.h-container {
    position: absolute;
    z-index: 9999;
    left: 0;
    bottom: 0;
    background-color: #191919;
}

main#index-main {
    margin-top: 4rem;
}

main#index-main section.box > section {
    flex-basis: 100%;
    flex-shrink: 0;
}

main#index-main section.box > section > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1280px;
    margin: 4rem auto 2rem;
    text-align: center;
    font-size: 1.5rem;
}



/*
	12
	-
	02-page.css Media Query
*/

@media screen and (max-width:1024px) {

    header#index-header div.h-container {
	padding: 1rem !important;
	height: 5rem !important;
    }

    header#index-header div.h-navigation {
	display: flex;
	flex-direction: row !important;
	position: relative;
	top: 0;
	left: 0;
	background-color: transparent !important;
    }

    header#index-header #h-search {
	width: auto !important;
	border-top: none !important;
	border-bottom: none !important;
    }

    header#index-header nav {
	width: auto !important;
	border-bottom: none !important;
    }

}

@media screen and (max-width:767px) {

    header#index-header {
	height: 100vh;
    }

    header#index-header div.h-container {
	padding: 0 !important;
	height: auto !important;
    }

    header#index-header div.h-navigation {
	width: 100% !important;
	flex-direction: column !important;
	background-color: #191919 !important;
    }

    header#index-header #h-search {
	width: 100% !important;
	border-bottom: 1px solid #444 !important;
    }

    header#index-header nav {
	width: 100% !important;
	border-bottom: none !important;
    }

    header#index-header img.index-title {
	left: 0;
	right: 0;
	top: 10vh;
	margin: 0 auto;
    }

    header#index-header img.index-image {
	display: none;
    }

    header#index-header img.index-res-image {
	display: block !important;
    }

    main#index-main section.box > section > div {
	flex-direction: column;
	justify-content: center;
    }

    main#index-main section.box h2 {
	margin-bottom: 1.5rem;
    }
}