@charset "UTF-8";
/* CSS Document */
/*============================
 フォント
【英語】
Medium
font-family: brandon-grotesque, sans-serif;
font-weight: 500;
font-style: normal;

Bold
font-family: brandon-grotesque, sans-serif;
font-weight: 700;
font-style: normal;

【日本語】
Regular
font-family: noto-sans-cjk-jp, sans-serif;
font-weight: 400;
font-style: normal;

Medium
font-family: noto-sans-cjk-jp, sans-serif;
font-weight: 500;
font-style: normal;

Bold
font-family: noto-sans-cjk-jp, sans-serif;
font-weight: 700;
font-style: normal;
============================*/

/*============================
 SUBPAGE_HEADER
============================*/
header{
	align-items: center;
	justify-content: space-between;
	position: fixed;
	z-index: 99;
	width: 100%;
	height: 86px;
	padding: 0 58px 0 84px;
	box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
	background-color: var(--white-color-primary);
}

.header_logo a img{
	height: 64px;
}

.nav_list{
	align-items: center;
}

.nav_list li{
	margin-right: 54px;
}

.nav_list li:last-of-type{
	margin-right: 0;
}

.nav_list li a{
	color: var(--yellow-color-primary);
	font-size: 16px;
	font-family: brandon-grotesque, sans-serif;
	font-weight: 700;
	font-style: normal;
	transition: 0.3s ease;
}

.nav_list li:last-of-type a{
	display: inline-block;
	height: 45px;
	padding: 0 35px;
	border-radius: 22.5px; 
	background-color: var(--yellow-color-primary);
	color: var(--white-color-primary);
	line-height: 45px;
}

.nav_list li a:hover{
	opacity: 0.5;
}

/* SM */
@media screen and (max-width: 639px) {
	header{
		position: fixed;
		top: 0;
		z-index: 99;
		height: 64px;
		padding: 0 5%;
		box-shadow: 0 3px 6px rgba(0,0,0,0.16);
		background-color: var(--white-color-primary);
	}
	
	.header_logo a img{
		height: 42px;
	}
	
	.header_button_list.sm_visible{
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		align-items: center;
	}
	
	.header_contact_button li{
		margin-right: 20px;
	}
	
	/*メニューを閉じているとき*/
	/*ハンバーガーボタン*/
	.hamburger_button{
		position: relative;
		cursor: pointer;
		width: 35px;
		height: 21px;
	}

	.hamburger_button span{
		display: inline-block;
		position: absolute;
		right: 0;
		height: 3px;
		border-radius: 2px;
		background-color: var(--yellow-color-primary);
		transition: 0.7s ease;
	  }

	.hamburger_button span:nth-of-type(1){
		width: 35px;
		top: 0;	
	}

	.hamburger_button span:nth-of-type(2){
		width: 28px;
		top: 9px;
	}

	.hamburger_button span:nth-of-type(3){
		bottom: 0;
		width: 23px;
	}

	/*ナビゲーションメニュー*/
	/*ナビゲーションメニュー*/
	.header_nav{
		position: absolute;
		top: -200px;
		left: 0;
		z-index: -4;
		width: 100%;
		height: auto;
		background-color: var( --yellow-color-primary );
		opacity: 0;
		transition: 0.5s ease;
	}

	.nav_list{
		flex-direction: column;
		position: relative;
		width: 100%;
		text-align: center;
	}

	.nav_list li{
		width: 100%;
		margin-right: 0;
		border-bottom: solid 1px var(--white-color-primary);
	}

	.nav_list li:nth-last-of-type(2){
		border-bottom: none;
	}

	.nav_list li a{
		display: inline-block;
		width: 100%;
		padding: 20px 0;
		color: var(--white-color-primary);
	}

	/*ハンバーガーボタン開いている場合*/
	.menu_active .hamburger_button span:nth-of-type(1) {
		transform: translateY(9px) rotate(-45deg);
	}

	.menu_active .hamburger_button span:nth-of-type(2) {
		width: 35px;
		transform: translateY(0) rotate(45deg);
	}

	.menu_active .hamburger_button span:nth-of-type(3){
		width: 0;
	}

	.menu_active .header_nav{
		top: 64px;
		left: 0;
		opacity: 1;
	}
}
	


/*============================
 SUBPAGE_MAINVISUAL
============================*/
.subPage_mainvisual{
	position: relative;
	width: 100%;
	height: 727px;
	background-position: left;
	background-size: cover;
	background-repeat: no-repeat;
}

.subPage_mainvisual_inner{
	position: absolute;
	top: calc( 50% + 43px );
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	width: 100%;
	align-items: center;
	justify-content: center;
}

.subPage_mainvisual_image img{
	width: 440px;
}

.subPage_mainvisual_text{
	margin-right: 127px;
}

.subPage_mainvisual_text p.font_en{
	margin-bottom: 22px;
	color: var(--yellow-color-primary);
	font-size: 100px;
	line-height: 100px;
}

.subPage_mainvisual_text p.font_jp{
	position: relative;
	margin-left: 43px;
	color: var(--yellow-color-primary);
	font-size: 25px;
	font-weight: bold;
	letter-spacing: 0.061em;
}

.subPage_mainvisual_text p.font_jp::before{
	content: "";
	display: inline-block;
	position: absolute;
	top: 50%;
    left: -43px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	width: 34px;
	height: 3px;
	background-color: var(--white-color-primary);
}

/* SM */
@media screen and (max-width: 639px) {
	.subPage_mainvisual{
		height: 400px;
		background-position: center;
	}

	.subPage_mainvisual_inner{
		flex-direction: column;
		top: calc( 50% + 32px );
	}

	.subPage_mainvisual_image img{
		width: auto;
		height: 120px;
	}

	.subPage_mainvisual_text{
		margin-right: 0;
		margin-bottom: 20px;
		text-align: center;
	}

	.subPage_mainvisual_text p.font_en{
		margin-bottom: 0;
		font-size: 42px;
		line-height: 48px;
	}

	.subPage_mainvisual_text p.font_jp{
		display: inline-block;
		margin-left: 0;
		font-size: 12px;
	}

	.subPage_mainvisual_text p.font_jp::before{
		left: -24px;
		width: 18px;
	}
}