@charset "utf-8";
@import url("/css/header.css");


:root{
	/*使用しない場合も必ず設定*/
	--i_bg_color: #fff;	/*背景色*/
	--i_txt_color: #222;	/*テキスト*/
	--i_main_color: #111;	/*メイン*/
	--i_sub_color: #f11e1e;	/*アクセント*/
	--i_sub2_color: #f3f3f3;	/*薄い色*/
	--i_btn_color: #f11e1e;	/*ボタン*/
	--i_btn_hover_color: #fff;	/*ボタンhover*/
	--i_btn_txt_color: #fff;	/*ボタンテキスト*/
	--i_btn_hover_txt_color: #f11e1e;	/*ボタンテキスト*/
	--i_shadow_color: rgba(90, 70, 52, 0.05);	/*シャドウ*/
	--i_border_color: rgba(0, 0, 0, 0.25);	/*ボーダー*/
	--i_noimg_bg_color: #eee;	/*画像無し*/
}
@media screen and (max-width: 500px){
	:root{
		--i_padding: 20px;	/*左右余白*/
	}
}
html{
	font-size: 62.5%;
}
body{
	background: #fff;
	font-size: 1.55rem;
	line-height: 1.8;
	color: #333;
	letter-spacing: 0.02rem;
	-webkit-text-size-adjust: 100%;
	font-weight: 500;
}

@media screen and (max-width: 850px){
	html{
		font-size: 55%;
	}
	body{
		letter-spacing: 0px;
	}
}

a{
	outline: 0;
	text-decoration: none;
	color: #333;
	text-decoration-color: rgba(0,0,0,0.13) !important;
}

/*----------------------------header----------------------------*/

header{
	font-size: 1.4rem;
	color: var(--i_txt_color);
}
body.scrolled header{
    background: rgba(255, 255, 255, 0.9);
}
header h1{
	line-height: 1.5;
	font-size: 1.3rem;
	font-weight: normal;
	opacity: 0.7;
	fill: var(--i_txt_color);
}
body.scrolled header .logo{
	padding: 20px 0 !important;
}
header .logo,
header .logo a{
	max-width: 200px;
}
body.scrolled header .logo a img{
	max-height: 65px;
}
header .header_contents .header_col1{
	/* ▼水平方向レイアウト */
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}
header .header_contents .header_col1 .tel{
	position: relative;
	font-size: 26px;
	line-height: 1;
	padding-left: 26px;
	font-weight: bold;
	font-weight: normal;
	fill: var(--i_txt_color);
}
header .header_contents .header_col1 .tel svg,
header .header_contents .header_col1 .btn .translate a svg,
header .burger li.sp_translate a svg,
header .header_contents .header_sns li svg{
	fill: var(--i_txt_color);
}
header .sp_menu a div span,
header .sp_menu a div:before,
header .sp_menu a div:after{
	background: var(--i_txt_color);
}
header .header_contents .header_col1 .btn>a{
	display: block;
	text-align: center;
	background: var(--i_btn_color);
	color: var(--i_btn_txt_color);
	padding: 10px 15px 11px;
	letter-spacing: 0.2rem;
	transition: 0.4s ease-in-out;
}
header .header_contents .header_col1 .btn>a:hover{
	opacity: 0.6;
}
header .header_contents .header_col1 .tel svg{
	width: 22px;
	height: 22px;
	top: calc(50% - 11px);
	left: 0;
}
header .header_contents .header_col1 .btn .translate a svg{
	max-width: 74%;
	max-height: 74%;
	margin: 13% auto 0;
}
header .header_contents .header_col1 .btn .translate a:hover{
	opacity: 0.8;
}
header#pattern1 nav,
header#pattern3 nav{
	position: relative;
}
header nav *{
	color: var(--i_txt_color);
}
header nav ul.nav_1st{
	width: 100%;
	max-width: 1300px !important;/*任意*/
}
header nav ul.nav_1st>li{
	box-sizing: border-box;
	position: relative;
}
header nav ul.nav_1st>li:after{/*罫線*/
	content: "";
	width: 1px;
	height: 40%;
	position: absolute;
	top: 30%;
	left: 0;
}
header nav ul.nav_1st>li:last-child:before{/*罫線*/
	content: "";
	width: 1px;
	height: 40%;
	position: absolute;
	top: 30%;
	right: 0;
}
header nav ul.nav_1st>li>a{
	font-size: 1.5rem;
	font-weight: bold;
	position: relative;
	padding-left: 1vw;
	padding-right: 1vw;
}
header nav ul.nav_1st>li>a span{
	/*ナビの高さはline-heightで調整*/
	line-height: 4;/* マージン普通選択時 */
	letter-spacing: 0.4rem;
	transition: 0.4s ease-in-out;
	font-weight: 400;
	font-size: 1.45rem;
}
header nav ul.nav_1st>li>a:hover span{
	opacity: 0.7;
}
.scrolled header#pattern3 nav ul.nav_1st>li>a span{
	line-height: 2.5;
}
body.margin header nav ul.nav_1st>li>a span{
	line-height: 4;
}
header nav ul.nav_2nd{
	padding-top: 20px;
}
header nav ul.nav_1st>li:hover ul.nav_2nd{
	padding-top: 15px;
	box-shadow: 2px 2px 5px var(--i_shadow_color);
}
header nav ul.nav_2nd>li{
	background: rgba(255, 255, 255, 0.9);
	border-bottom: 1px solid var(--i_border_color);
}
header nav ul.nav_2nd>li:nth-last-of-type(1){
	border-bottom: none;
}
header nav ul.nav_2nd li a{
	padding: 10px 20px;
	font-weight: normal;
	font-size: 1.4rem;
}
header nav ul.nav_2nd>li>a{
	padding-right: 30px;
}
header nav ul.nav_2nd>li>a:after{
	height: 5px;
	width: 5px;
	transform: rotate(-45deg);
	border-right: 1px solid var(--i_sub_color);
	border-bottom: 1px solid var(--i_sub_color);
	top: calc(50% - 2.5px);
	right: 20px;
}
header nav ul.nav_3rd{
	padding-left: 20px;
}
header nav ul.nav_3nd li a{
	padding: 5px 20px;
}
header nav ul.nav_3rd>li>a:after{
	height: 1px;
	width: 4px;
	background: var(--i_sub_color);
	top: calc(50% - 0.5px);
	left: 5px;
}
@media screen and (max-width: 900px){
	header,
	header *,
	header nav ul.nav_2nd li a{
	}
	body.scrolled header .logo{
		padding: 10px 0 !important;
	}
	header.open:after,
	header .header_contents{
		background: rgba(255, 255, 255, 0.9);
	}
	header .burger li.sp_translate a svg{
		height: 28px;
		width: 28px;
		margin: 10% auto;
	}
	header .header_sns,
	header .header_contents .header_col1,
	header .header_contents .header_col2{
		border-top: 1px solid rgba(255,255,255,0.2);
		border-bottom: 1px solid var(--i_border_color);
	}
	header .header_sns{
		border-bottom: none;
	}
	header .header_sns:empty,
	header .header_contents .header_col1:empty,
	header .header_contents .header_col2:empty{
		border: none;
	}
	header .header_contents .header_col1 .tel,
	header .header_contents .header_col1 .btn{
		float: none;
	}
	header .header_contents .header_col2{
		display: block !important;
	}
	header nav{
		border-bottom: 1px solid var(--i_border_color);
	}
	header nav ul.nav_1st{
		border-bottom: 1px solid rgba(255,255,255,0.2);
		border-top: 1px solid var(--i_border_color);
	}
	header nav ul.nav_1st li{
		border-bottom: 1px solid var(--i_border_color);
		border-top: 1px solid rgba(255,255,255,0.2);
	}
	header nav ul.nav_1st>li:before,
	header nav ul.nav_1st>li:after{
		display: none !important;
	}
	header nav ul.nav_1st>li i:before,
	header nav ul.nav_1st>li i:after{
		background: var(--i_sub_color);
	}
	header nav ul.nav_2nd{
		border-top: 1px solid var(--i_border_color);
	}
	header nav ul.nav_2nd>li{
		box-shadow: none;
	}
	header nav ul.nav_2nd>li *{
		color: #333;
	}
	header nav ul.nav_3rd{
		border-top: 1px solid var(--i_border_color);
	}
	header nav ul.nav_3rd>li:nth-last-of-type(1){
		border-bottom: none;
	}
	header .logo a img{
		max-height: 50px !important;
	}
	header nav ul.nav_1st>li>a:hover:before{
		transform: scale(0, 0);
	}
	header#pattern1 nav, 
	header#pattern3 nav{
		border-bottom: 0;
		border-top: 0;
	}
	header .header_contents .header_col1 .btn > a{
		padding: 9px 15px 9px;
	}
	header nav ul.nav_1st>li>a:hover{
		background: none;
	}
	header nav ul.nav_1st>li>a span{
		color: var(--i_txt_color);
	}
	header#pattern2 nav ul.nav_1st{
		border-bottom: 0px;
	}
}

/*--------------------------------MV--------------------------------*/
#mv_outer{
	/*mvに背景とかはここを利用する*/
	position: relative;
	padding-bottom: 80px;
}
#mv{
	width: 100%;
	height: 78vh;
	min-height: 500px;
}
#mv_outer:before{
	display: block;
	position: absolute;
	content: "";
	width: 85%;
	height:80%;
	bottom:0;
	left: 0;
	background: var(--i_main_color);
    z-index: -2;
}
#mv_outer:after{
    position: absolute;
    display: block;
    content: "";
    width: 2%;
    bottom: 0;
    right: 15%;
    border-top: 70vh solid #fff;
    border-left: 35vh solid transparent;
    pointer-events: none;
    z-index: -1;
}
#mv:after{
	/*スライドに重ねる色*/
	pointer-events: none;
	width: 85%;
	left: 15%;
	right: 0;
	background: rgba(0,0,0,0);
}
#mv .mv_img li{
	width: 85%;
	left: 15%;
	right: 0;
}
#mv:before{
	position: absolute;
	display: block;
	content: "";
	pointer-events: none;
}
#mv .mv_text{
	bottom: 280px;
	height: calc(100% - 140px);
	top: 70px;
	align-items: center;/*垂直方向中央*/
	width: 100% !important;
	left: 0 !important;
}


#mv .mv_text>div{
	max-width: none !important;
	box-sizing: border-box;
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 140px;
	position: relative;
}

#mv .mv_text>div:before{
	position: absolute;
	display: inline-block;
	content: "CREATING THE FUTURE";
	white-space: pre;
	width: auto;
	height: auto;
	top: 0;
	left: 50px;
	line-height: 1.1;
	font-size: 8.8rem;
	letter-spacing: -0.1rem;
	pointer-events: none;
	font-weight: 900;
	color: var(--i_txt_color);
	font-family: 'Oswald', 'Noto Sans JP', "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	animation: ani1 2s forwards;
	z-index: 1;
    background: #fff;
    padding: 15px;
}

#mv .mv_text h2{
	font-size: 3.4rem !important;/* ←max-font-size的意味合いで使用する。動作はjs。*/
	line-height: 1.2;
	font-weight: 600;
	animation: ani2 2s forwards;
	color: var(--i_txt_color);
    background: #fff;
    display: inline-block;
    padding: 5px 15px;
    margin-bottom:10px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	#mv .mv_text h2{
		animation:none;
	}
}
@keyframes ani1 {
  0% {
  transform: translateX(-1000px);
  }

  100% {
  transform: translateX(0px);
  }
}
@-moz-document url-prefix() {
  #mv .mv_text h2 {
    animation: ani2 2s forwards;
  }
}

#mv .mv_text p{
	font-size: 2rem;
	line-height: 1.8;
	font-weight: 600;
	letter-spacing: 0.1rem;
	animation: ani2 2s forwards;
	color: var(--i_txt_color);
    background: #fff;
    display: table-cell;
    padding: 5px 15px;
}
@keyframes ani2 {
  0% {
  transform: translateX(700px);
  }

  100% {
  transform: translateX(0px);
  }
}
#mv_outer #mv .mv_text div p.static {
    display: table-cell !important;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#mv .mv_text p{
	animation:none;
}
}
@-moz-document url-prefix() {
  #mv .mv_text p {
    animation: ani2 2s forwards;
  }
}#mv .mv_scroll {
	width: 3px;
	height: auto;
	position: absolute;
	left: 25px;
	bottom:-17px;
}
#mv .mv_scroll a{
	-webkit-writing-mode: vertical-lr;
	-ms-writing-mode: tb-lr;
	writing-mode: vertical-lr;
	font-weight: bold;
	font-size: 10px;
	position: relative;
	padding-bottom: 80px;
	height: auto;
	width: auto;
	text-indent: 0;
	potision: relative;
	transition: all .3s ease-in-out;
	text-align: right;
	color: rgba(255,255,255,0.2) !important;
	letter-spacing: 0.2rem;
	font-family: 'Oswald', sans-serif;
}
#mv .mv_scroll a::before {
	width: 1px;
	height: 70px;
	transform: none;
	position: absolute;
	bottom: -15px;
	left: 1px;
	top: auto;
	background: rgba(255,255,255,0.2);
	transition: all .3s ease-in-out;
}
#mv .mv_scroll a:hover{
	padding-bottom: 80px;
}
#mv .mv_scroll a:hover::before{
	height: 50px;
}
#mv .mv_scroll a:hover::after{
	height: 25px;
}
#mv .mv_pointer{
	width: 200px;
	position: absolute;
	bottom: -40px;
	left: 5%;
	padding: 0;
}
#mv .mv_pointer li::before {
	background: rgba(255,255,255, 0.5);
}
#mv .mv_pointer li.current:before{
	background: rgba(255,255,255, 0.5);
}
#mv .mv_arrow {
	display: none;
}
@media screen and (max-height: 650px){
    #mv .mv_text > div::before{
        font-size: 7rem;
    }
    #mv .mv_text > div{
        padding-top: 120px;
    }
}
@media screen and (max-width: 100vh){
	#mv{
		height: 65vh;
	}
}
@media screen and (max-width: 1200px){
	#mv .mv_scroll{
		left: 30px;
	}
    #mv .mv_scroll{
		display: none;
	}
	#mv .mv_pointer{
		left: 10px;
        bottom: -28px;
	}
	#mv .mv_text{
		align-items: flex-end;
        top: auto;
        bottom: 20px;
	}
}
@media screen and (max-width: 900px){
    #mv_outer{
        padding-bottom: 40px;
    }
	#mv .mv_text > div{
		padding-top: 117px;
	}
	#mv .mv_text > div::before{
		font-size:7.0rem;
	}
}
@media screen and (max-width: 800px){
	#mv .mv_text p{
		padding-top: 0px;
	}
}
@media screen and (max-width: 650px){
	#mv .mv_text h2{
		font-size: 5.1vw !important;
	}
	#mv .mv_text > div{
		padding-left: 25px;
		padding-right: 25px;
		padding-top: 100px;
	}
	#mv .mv_text > div::before {
        left: 25px;
        font-size: 5.4rem;
	}
	
}
@media screen and (max-width: 600px){
	#mv .mv_text p{
		font-size: 1.6rem !important;
		letter-spacing: 0.1rem !important;
	}
	#mv .mv_text h2{
		line-height: 1.5;
		letter-spacing: 0.2rem;
	}
}
@media screen and (max-width: 480px){
	#mv .mv_text > div::before {
		font-size: 8.9vw;
		letter-spacing: -0.15rem;
	}
	#mv .mv_text h2{
		margin-bottom: 5px;
	}
    #mv .mv_text > div{
    padding-top: 19vw;
    }
}
@media screen and (max-width:400px){
  #mv .mv_text p {
    font-size: 4.0vw !important;
  }
}

@media screen and (max-width:375px){
  #mv .mv_text h2 {
    font-size: 4.6vw !important;
  }
}