@charset "utf-8";

/**
 *
 *  ファーストビュー .page_first
 *
 */

/*--------------------------------------------------------------------------
	ファーストビュー .page_first
---------------------------------------------------------------------------*/
	.page_first {
		position: relative;
		width: 100%;
/*		height: 435px;*/
		height: 550px;
		overflow: hidden;
	}
	.page_first-form {
		height: 250px !important;
	}
	#page_first .sec00 {
		position: relative;
		height: 100%;
	}
	#page_first .page_first_bg {
		position: absolute;
		width: 100%;
		height: 100%;
		opacity: 0.15;
	}
	.page_first .sec_fit {
		position: absolute;
		z-index: 1;
	}
	.page_first #breadcrumb_list {
		position: relative;
		margin-left: 20px;
	}
	.page_first #breadcrumb_list li,
	.page_first #breadcrumb_list a {
		color: #FFF;
	}
	.page_first #page_title {
		display: block;
		width: 100%;
		margin: 30px auto;
		color: #292C30;
		text-align: center;
	}
	.page_first #page_title h1 {
		display: inline-block;
		position: relative;
		width: auto;
		max-width: 20em;
		margin: 0 auto;
		padding-bottom: 2%;
		font-size: 3.6rem;
		font-weight: bold;
		line-height: 1.8;
		letter-spacing: 0.5rem;
		color: #292C30;
	}
	.page_first #page_title h1 > span.arrow {
		content: "";
		display: block;
		position: absolute;
		width: 9px;
		height: 10px;
		margin-left: -6px;
		left: 50%;
		bottom: 0px;
		border-top: 3px solid #0088D8;
		border-right: 3px solid #0088D8;
		-webkit-transform: rotate(135deg);
				transform: rotate(135deg);
	}
	.page_first #page_title h1::before,
	.page_first #page_title h1::after {
		content: "";
		display: block;
		position: absolute;
		width: 50%;
		bottom: 6px;
		border-bottom: 3px solid #0088D8;
	}
	.page_first #page_title h1::before {
		left: -7px;
	}
	.page_first #page_title h1::after {
		right: -7px;
	}
	.page_first #page_title p {
		display: block;
		height: 1.8em;
		width: 160px;
		font-size: 1.5rem;
		border: 2px solid #0088D8;
		margin: 0 auto 15px;
		color: #0088D8;
		font-size: 1.7rem;
		font-weight: bold;
		line-height: 1.85em;
		vertical-align: middle;
	}
	.page_first #page_title .num {
		display: block;
		font-family: "Roboto Condensed","游ゴシック",YuGothic;
		font-size: 4.5rem;
		font-style: italic;
		font-weight: bold;
		letter-spacing: 1.5px;
		line-height: 1.15em;
	}
	#page_first #page_title p,
	#page_first #page_title span,
	#page_first #page_title h1 {
		-webkit-filter: drop-shadow(0px 0px 20px rgba(40, 40, 40, 0.35));
			-moz-filter: drop-shadow(0px 0px 20px rgba(40, 40, 40, 0.35));
			-ms-filter: drop-shadow(0px 0px 20px rgba(40, 40, 40, 0.35));
				filter: drop-shadow(0px 0px 20px rgba(40, 40, 40, 0.35));
	}
	#page_first #page_title *::selection {
		-webkit-filter: none;
			-moz-filter: none;
			-ms-filter: none;
				filter: none;
	}
	.page_first #page_choice {
		display: block;
		width: 95%;
		max-width: 1210px;
		margin: 30px auto;
		text-align: center;
		overflow: visible;
	}
	.page_first #page_choice ul {
		display: flex;
		position: relative;
		left: 50%;
		max-width: 81%;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: left;
		transform: translate(-50%, 0);
	}
	.page_first #page_choice li {
		margin: 1%;
		-webkit-filter: drop-shadow(0.2rem 0.2rem 10px rgba(40, 40, 40, 0.35));
			-moz-filter: drop-shadow(0.2rem 0.2rem 10px rgba(40, 40, 40, 0.35));
			-ms-filter: drop-shadow(0.2rem 0.2rem 10px rgba(40, 40, 40, 0.35));
				filter: drop-shadow(0.2rem 0.2rem 10px rgba(40, 40, 40, 0.35));
	}
	.page_first #page_choice li a {
		display: inline-block;
		padding: 10px;
		background: rgba(250,250,250,0.75);
		border-radius: 3px;
		font-size: 1.35rem;
		text-decoration: none;
		color: #292C30;
		transition: 0.1s;
	}
	.page_first #page_choice li a > span {
		position: absolute;
		left: 50%;
		width: 65%;
		background: #FFFFFFAB;
		transform: translate(-50%, 0);
		font-size: 1.5rem;
		font-weight: 500;
		line-height: 1.2em;
	}
	.page_first #page_choice li:nth-of-type(1) a > span {
		bottom: 30px !important;
	}
	.page_first #page_choice li a > span:nth-of-type(1) {
		bottom: 21%;
	}
	.page_first #page_choice li a > span:nth-of-type(2) {
		bottom: 20px;
	}
	.page_first #page_choice li a::before {
		content: ">";
		position: absolute;
		bottom: 14.5%;
		left: 10%;
		margin-right: 5px;
	}
	.page_first #page_choice li a:hover {
		background: rgba(250, 235, 200, 0.9);
	}
	.page_first #page_choice li a:active {
/*		background: rgba(200, 200, 200, 0.45);*/
	}
	.page_first #page_choice li a:hover {
		border: solid 3px #FEDE5F;
	}
	.page_first #page_choice li:hover::after {
		transform: scale(1);
	}
	.page_first #page_choice li::after {
		content: '';
		position: absolute;
		bottom: -3px;
		display: block;
		height: 3px;
		width: 100%;
		background: #2475C8;
		transition: transform 0.15s 0.1s;
		-webkit-transform: scale(0);
			-ms-transform: scale(0);
				transform: scale(0);
	}
	.page_first::before {
		content: '';
		position: absolute;
		width: 10000px;
		height: 150px;
		margin: 0 -10% 0;
		bottom: -170px;
		left: -50rem;
		background: #F7F7F7;
		-webkit-transform-origin: left center;
			-ms-transform-origin: left center;
				transform-origin: left center;
		-webkit-transform: rotate(-2deg);
			-ms-transform: rotate(-2deg);
				transform: rotate(-2deg);
		z-index: 9;
	}
	.page_first > .inline {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.page_first .img {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: no-repeat 50% 50%;
		-webkit-background-size: cover;
				background-size: cover;
		opacity: 0;
		filter: alpha(opacity=0);
		z-index: -10;
	}
	.page_first .img._is_active {
		z-index: 5;
	}
	.page_first .img._is_prev {
		z-index: 1;
	}
/* @sp **************************************************/
@media all and (max-width: 1530px){
	.page_first {
		height: 470px;
        min-height: 650px !important;
	}
	.page_first #page_choice li:nth-of-type(1) a > span {
		bottom: 22px !important;
	}
	.page_first #page_choice li a > span:nth-of-type(1) {
		bottom: 22%;
	}
	.page_first #page_choice li a > span:nth-of-type(2) {
		bottom: 15px;
	}
}
/* @sp **************************************************/
@media all and (max-width: 1290px){
}
@media all and (max-width: 1100px){
	.page_first {
		height: 490px !important;
		min-height: 260px !important;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		z-index: 0;
	}
	.page_first #page_title {
		width: 90%;
		margin: 10px auto;
	}
	.page_first #page_title h1 {
		font-size: 2.1rem;
		padding-bottom: 6%;
	}
	.page_first #page_title p {
		width: 150px;
		border: 2px solid #0088D8;
		font-size: 1.5rem;
		color: #0088D8 !important;
	}
	.page_first #page_title .num {
		font-size: 3.8rem;
		font-style: italic;
	}
	.page_first #page_choice {
		width: 90%;
		margin: 20px auto;
	}
	.page_first #page_choice ul {
		max-width: 100%;
	}
	.page_first #page_choice li {
		margin: 5px;
	}
	.page_first #page_choice li a {
		padding: 6px 10px;
		font-size: 1.2rem;
	}
	.page_first #page_choice li a > span {
		font-size: 1.15rem;
	}
	.page_first #breadcrumb_list li {
		margin-top: 10px;
	}
	.page_first #breadcrumb_list a {
		margin-top: 10px;
	}
}
@media all and (max-width: 618px){
	.page_first {
        height: 350px !important;
        min-height: 260px !important;
	}
}
@media all and (max-width: 764px){
	.page_first {
        height: 470px !important;
        min-height: 280px !important;
	}
	.page_first #page_choice li a > span {
		font-size: 0.9rem;
	}
	.page_first #page_choice ul {
		justify-content: center;
	}
}