@charset "utf-8";
@import url(reset.css);
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300&display=swap');
@media all and (-ms-high-contrast: none) {
	*::-ms-backdrop, .imgs img {
		width: 100%
	}
	*::-ms-backdrop, #pagetit {
		height: 150px
	}
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box
}
html {
	font-size: 62.5%;
}
body {
	font-family: '游明朝', 'Yu Mincho', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'ヒラギノ明朝 Pro', 'Hiragino Mincho Pro', 'Noto Serif JP', HG明朝B, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;
	font-weight: 500;
	color: #444;
	line-height: 1.8;
	font-size: 1.8rem;
}
body.langEn{
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
}
@media screen and (max-width: 768px){
	html{
		font-size: 50%;
	}
	body{
	}
}
#wrap {
	position: relative;
	width: 100%;
	overflow: hidden
}
img {
	max-width: 100%;
	height: auto
}
li{
	list-style: none;
}
.serif {
	font-family: '游明朝', 'Yu Mincho', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'ヒラギノ明朝 Pro', 'Hiragino Mincho Pro', 'Noto Serif JP', HG明朝B, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif
}
.gothic{
	font-family:'游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
.tCenter {
	text-align: center
}
.bold{
	font-weight: bold;
}
.mt5{
	margin-top: 5%;
}
@media screen and (min-width: 769px) {
	.sp {
		display: none
	}
	a,
	button{
		transition: all .3s;
	}
	a:hover,
	button:hover{
		opacity: .7;
	}
	a[href^="tel:"] {
		cursor: text;
		pointer-events: none;
	}
}
@media screen and (max-width: 768px) {
	.pc {
		display: none
	}
	input[type="submit"],
	input[type="button"] {
	border-radius: 0;
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	appearance: button;
	border: none;
	box-sizing: border-box;
	cursor: pointer;
	}
	input[type="submit"]::-webkit-search-decoration,
	input[type="button"]::-webkit-search-decoration {
	  display: none;
	}
	input[type="submit"]::focus,
	input[type="button"]::focus {
	  outline-offset: -2px;
	}
	select {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		border: none;
		outline: none;
		background: transparent;
	}
	input,
	textarea{
	-webkit-appearance: none;
	}
	button,
	input[type="submit"] {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		padding: 0;
		border: none;
		outline: none;
		background: transparent;
	}
	input[type="radio"] {
		display: none;
	}
	input[type="radio"]:checked + label {
		background: #ff0000;
	}
}
a {
	color: #444;
}
a:hover {
	color: #444;
}
/* common */
.red{
	color: #D22C48;
}
.green{
	color: #32B200;
}
.large{
	font-size: 133%;
}
.xlarge{
	font-size: 166%;
}
.en{
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
}
@media screen and (max-width: 768px) {
	.sec{
		padding: 12% 5%;
	}
}
.langJp .btnJp,
.langJp .txtEn,
.langEn .btnEn,
.langEn .txtJp{
	display: none;
}
.langEn .btnJp,
.langEn .txtEn,
.langJp .btnEn,
.langJp .txtJp{
	display: block;
}

/*　header */
#header{
	position: relative;
	height: 100vh;
	overflow: hidden;
	width: 100%;
}
#header #logo{
	line-height: 0.1;
	position: absolute;
	left: 40px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 672px;
	max-width: 55%;
}
#header #lang{
	position: fixed;
	right: 40px;
	top: 40px;
	z-index: 2;
}
#header #lang a{
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(255,255,255,.8);
	border-radius: 50%;
	text-decoration: none;
	font-weight: bold;
}
#header #mv video{
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	width: auto;
	min-height: 100%;
	height: auto;
	transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
	#header{
		height: auto;
	}
	#header #logo{
		left: 20px;
		width: calc(100% - 40px);
		max-width: none;
		top: 80%;
	}
	#header #logo img{
		width: 100%;
	}
	#header #lang{
		right: 20px;
		top: 20px;
	}
	#header #lang a{
		width: 40px;
		height: 40px;
	}
	#header #mv video{
		position: relative;
		transform: none;
		left: auto;
		top: auto;
		width: 100%;
	}
}

/*　footer */

#footer{
	padding: 3%;
	text-align: center;
	position: relative;
}
#footer #copyright small{
	font-size: 100%;
}
#footer #pagetop{
	position: absolute;
	right: 3%;
	top: 50%;
	transform: translateY(-50%);
}

/* home */
.sec{
	padding: 10% 5%;
}
.sec:nth-child(2){
	background: url("../img/bg01.png") no-repeat center center;
	background-size: cover;
}
.sec:nth-child(4){
	background: url("../img/bg02.png") no-repeat center center;
	background-size: cover;
}
.sec .tit{
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	font-size: 6.8rem;
	margin-bottom: 7%;
	line-height: 1.5;
	color: #222;
	background: url("../img/tit_line.png") no-repeat left bottom;
	background-size: 160px auto;
	padding-bottom: 10px;
}
.sec .lead{
	display: flex;
	font-weight: bold;
	font-size: 2.2rem;
	margin-bottom: 5%;
}
#starement .content,
#service .content,
#about .content{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#starement .content,
#about .content{
	flex-direction: row-reverse;
}
#starement .content .img{
	width: 33%;
}
#starement .content .txt{
	width: 60%;
}
#starement .content .txt p:not(:last-child){
	margin-bottom: 7%;
}
#service .lead,
#project .lead{
	display: flex;
	justify-content: center;
}
#service .content .img{
	width: 28%;
}
#service .content .txt{
	width: 60%;
}
#service .content .txt dl > div{
	display: flex;
	align-items: center;
	margin-top: 5%;
}
#service .content .txt dl > div:first-child{
	margin-top: 0;
}
#service .content .txt dl > div dt{
	width: 200px;
	height: 200px;
	line-height: 1.3;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	border-radius: 0;
	background: url("../img/service_circle.png");
	background-size: 100% 100%;
	font-size: 2.6rem;
	margin-right: 5%;
}
#service .content .txt dl > div dd{
	flex: 1;
}
#about .content .img{
	width: 31%;
}
#about .content .txt{
	width: 66%;
	padding: 0 5%;
}
#about .content .txt dl > div{
	display: flex;
	margin-bottom: 5%;
}
#about .content .txt dl > div dt{
	font-weight: 600;
	width: 12em;
}
#about .content .txt dl > div dd{
	flex: 1;
}
.langEn #project .lead{
	display: none;
}
#project .movie video{
	width: 100%;
}
@media screen and (max-width: 768px) {
	.sec .tit{
		font-size: 5rem;
		margin-bottom: 12%;
	}
	.sec .lead{
		margin-bottom: 12%;
		font-size: 2rem;
	}
	#starement .content,
	#service .content,
	#about .content{
		display: block;
	}
	#starement .content .img,
	#service .content .img,
	#about .content .img{
		width: 60%;
		margin: 0 auto 12%;
	}
	#starement .content .txt,
	#service .content .txt,
	#about .content .txt{
		width: auto;
	}
	#service .content .txt{
		display: flex;
		justify-content: center;
	}
	#service .content .txt dl > div{
		justify-content: center;
	}
	#service .content .txt dl > div dt{
		width: 160px;
		height: 160px;
	}
	#about .content .txt{
		padding-left: 0;
	}
}