@charset "UTF-8";
/* CSS Document */

/***********************
************************

Top page

************************
************************/



/* ===================================
variable
=================================== */

:root{
	--font-size--dtp: 1.5rem;
	--font-size--sp: 1.4rem;
	--font-family--en: realist, sans-serif; /* フォント（英） */
	--font-size-default--en: 1.8rem; /* フォントサイズ（英） */
	--main-color: #DDDDDD; /* メインカラー */
	--sub-color: #F5F5F5; /* サブカラー */
	--text-color: #1F1F1F; /* 文字色 */
	--hover-color: #9E9E9E /* ホバー時のテキストカラー */
}

/* ===================================
initial setting
=================================== */ 

*{
	box-sizing: border-box;
}
html{
	font-size: 62.5%;
	-webkit-font-smoothing: antialiased; /* フォントのアンチエイリアスを調節 (なめらか) */
}
body{
	/* font-family: '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', sans-serif; */
	font-family: "Yu Gothic","YuGothic","Roboto","Helvetica Neue","Hiragino Kaku Gothic Pro","Meiryo","Arial","sans-serif";
	font-weight: 500;
	font-size: var(--font-size--dtp);
	line-height: 2;
	letter-spacing: .09em;
}

/* reset CSS */
h1, h2, h3, h4,
p{
	margin: 0;
}
ul, li{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
dl, dt, dd{
	margin: 0;
	padding: 0;
}
a{
	display: block;
	text-decoration: none;
	color: var(--base-color);
}
img{
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

/* ===================================
common
=================================== */

/* inner
------------------------ */
.inner{
	max-width: 1126px;
	margin: 0 auto;
}

/* page title
------------------------ */
.page-title{
	position: relative;
	padding-bottom: 160px;
	margin-top: 280px;
	margin-bottom: 160px;
}
.page-title::after{
	content: '';
	width: 100vw;
	height: calc((195 / 1366) * 100vw);
	background: url(../images/coverImg-line.svg) center / 100% auto no-repeat;
	position: absolute;
	bottom: 0;
	left: 0;
}
.page-title h1{
	font-family: var(--font-family--en);
	font-weight: 600;
	font-size: 5em;
	letter-spacing: .075em;
	max-width: 1126px;
}

/* contents title
------------------------ */
.contents-title{
	font-family: var(--font-family--en);
	font-size: 1.8em;
	font-weight: 500;
	letter-spacing: .05em;
	margin-bottom: 90px;
}

/* section title
------------------------ */
.section-title{
	font-family: var(--font-family--en);
	font-size: 2em;
	font-weight: 300;
	letter-spacing: .075em;
	margin-bottom: 60px;
}

/* service title number
------------------------ */
.service-number{
	position: relative;
	padding-top: 26px;
}
.service-number::before{
	font-family: var(--font-family--en);
	font-size: 20px;
	font-weight: 300;
	position: absolute;
	top: 0;
}
.service-number.service01::before{
	content: '01';
}
.service-number.service02::before{
	content: '02';
}

/* button
------------------------ */
/* 共通 */
.button-wrap{
	font-family: var(--font-family--en);
}
.button-wrap a{
	display: inline-block;
}
/* ボックス */
.box-button{
	max-width: 280px;
	width: 100%;
	line-height: 60px;
	border: .5px solid var(--text-color);
	position: relative;
	transition: all .5s;
}
/* ボックス x 黒背景 */
.box-button.bk{ 
	background-color: var(--text-color);
	color: #FFFFFF;
	position: relative;
}
.box-button::after{
	content: '';
	width: 5px;
	height: 5px;
	border-top: .5px solid var(--text-color);
	border-right: .5px solid var(--text-color);
	position: absolute;
	right: 20px;
	top: 50%;
	transform: rotate(45deg) translateY(-50%);
	transition: all .5s;
}
.box-button.bk::after{
	content: '';
	width: 5px;
	height: 5px;
	border-top: .5px solid #FFFFFF;
	border-right: .5px solid #FFFFFF;
	position: absolute;
	right: 20px;
	top: 50%;
	transform: rotate(45deg) translateY(-50%);
	transition: all .5s;
}
.box-button:hover {
	background-color: var(--text-color);
	color: #FFFFFF;
	transform: scale(.98);
}
.box-button:hover::after{
	border-color: #FFFFFF;
}

/* 矢印 */
.arrow-button{
	font-family: var(--font-family--en);
	display: inline-block;
}
.arrow-button-line{
	display: inline-block;
	width: 7rem;
	position: relative;
	margin-left: .5rem;
}
.arrow-button-line >.line1{
	background-color: var(--text-color);
	height: .5px;
}
.arrow-button-line >.line2{
	background-color: var(--text-color);
	width: 1rem;
	height: .5px;
	position: absolute;
	top: 0;
	right: 0;
	transform: rotate(45deg);
	transform-origin: right bottom;
}
.arrow-button:hover .line1{
	animation: arrowlong1 1s ease ;
}
.arrow-button:hover .line2{
	animation: arrowlong2 1s ease ;
}
@keyframes arrowlong1{
	0%{width:0;opacity:0}
	70%{width:100%;opacity:1}
	100%{width:100%;opacity:1}
}
@keyframes arrowlong2{
	0%{right:100%;opacity:0}
	70%{right:0;opacity:1}
	100%{right:0;opacity:1}
}

.img-button{
	transition: .5s;
}
.img-button:hover{
	transform: scale(.95);
}

/* CTAボタン（contact） */
.cta-button{
	background-color: var(--text-color);
	color: #FFFFFF;
	max-width: 520px;
	width: 100%;
	line-height: 90px;
	text-align: center;
	position: relative;
	transition: all .5s;
}
.cta-button::after{
	content: '';
	width: 8px;
	height: 8px;
	border-top: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	position: absolute;
	right: 25px;
	top: 50%;
	transform: rotate(45deg) translateY(-50%);
	transition: all .5s;
}
.cta-button:hover {
	transform: scale(1.05);
}

/* ボタン無効化 */
a.disabled{
	pointer-events: none;
}

/* animation
------------------------ */
/* 回転 */
@keyframes rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}
/* スライドアップ */
.slideUp{
	opacity: 0;
}
.slideUp.on{
	opacity: 1;
	animation: slideUp .5s ease both;
	-webkit-animation: slideUp .5s ease both;
}
@keyframes slideUp{
	0%{
		opacity: 0;
		transform: translate(0, 35px);
	}
	100%{
		opacity: 1;
		transform: translate(0, 0);
	}
}

/* フェードイン */
.fadeIn{
	opacity: 0;
}
.fadeIn.on{
	opacity: 1;
	animation: fadeIn 1.2s ease both;
	-webkit-animation: fadeIn 1.2s ease both;
}
@keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

/* 流れながら出現（左から右） */
.slide-in{
	overflow: hidden;
	display: inline-block;
}
.slide-in_inner{
	display: inline-block;
}
.leftAnime{
	/* 事前に透過0にして消しておく */
	opacity: 0; 
}
.slideAnimeLeftRight{
	animation-name: slideTextX100;
	animation-duration: .5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes slideTextX100{
	from{
		transform: translateX(-100%);/* 要素を左の枠外に移動 */;
		opacity: 1;
	}
	to{
		transform: translateX(0);/* 要素を元の位置に移動 */
		opacity: 1;
	}
}
.slideAnimeRightLeft{
	animation-name: slideTextX-100;
	animation-duration: .5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes slideTextX-100{
	from{
		transform: translateX(100%);
		opacity: 1;
	}
	to{
		transform: translateX(0);
		opacity: 1;
	}
}

/* text clear(タグ内の文字を隠す)
------------------------ */
.text-clear{
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

/* ===================================
header
=================================== */

#gnavi-sp{
	display: none;
}
#gheader{
	background-color: #FFFFFF;
	font-family: var(--font-family--en);
	font-weight: 500;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}
.header-wrap{
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-right: 5vw;
	padding-left: 5vw;
}
/* logo */
#logo{
	width: 120px;
	height: 27px;
}
#logo a{
	width: 100%;
	height: 100%;
	background: url(../images/logo.svg) center / cover no-repeat;
}
/* navi */
#gnavi a{
	font-size: var(--font-size-default--en);
}
.gnavi-wrap{
	display: flex;
}
.gnavi-wrap li + li{
	margin-left: 30px;
}
.gnavi-wrap li:last-child{
	font-weight: 600;
	position: relative;
	padding-left: 30px;
}
.gnavi-wrap li:last-child::before{
	content: '';
	background-color: var(--text-color);
	width: 0.5px;
	height: 1.2em;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
#logo a,
#gnavi a,
#gnavi-sp a,
.footer-logo a,
.footer-nav a,
.totop{
	transition: .2s;
}
.totop:hover{
	transform: rotate(-45deg) translate(2px, -2px);
}
#logo a:hover,
#gnavi a:hover,
#gnavi-sp a:hover,
.footer-logo a:hover,
.footer-nav a:hover{
	transform: translateY(-2px);
}

/* sp navi
------------------------ */

/* navi sp */
#gnavi-sp{
	display: none;
}
/* menu button */
.menu{
	display: block;
	position: relative;
	cursor: pointer;
	width: 30px;
	height: 30px;
	z-index: 220;	
}
.menu span{
	display: inline-block;
	position: absolute;
	background-color: #333;
	height: 1px;
	border-radius: 5px;
	transition: all .5s;
}
.menu span:nth-last-of-type(1){
	width: 100%;
	top: 6px;
	left: 0;
}
.menu span:nth-last-of-type(2){
	width: 100%;
	top: 14px;
	left: 0;
}
.menu span:nth-last-of-type(3){
	width: 100%;
	top: 22px;
	left: 0;
}
/* 1本目 */
.menu.active span:nth-last-of-type(1){
	top: 15px;
	transform: rotate(-45deg);
}
/* 2本目 */
.menu.active span:nth-last-of-type(2){
	opacity: 0;
}
/* 3本目 */
.menu.active span:nth-last-of-type(3){
	top: 21px;
	transform: translateY(-6px) rotate(45deg);
}
.nav-content{
	background-color: #f5f5f5;
	width: 100%;
	height: 100%;
	font-size: 1.5em;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 100vw;
	transition: all .5s;
}
.nav-content li:nth-child(1){
	margin-bottom: 1em;
}
.nav-content.active{
	left: 0;
	visibility: inherit;
}

/* ===================================
footer
=================================== */

#gfooter{
	font-family: var(--font-family--en);
	padding-top: 90px;
	padding-bottom: 90px;
	border-top: .5px solid var(--text-color);
}
.footer-wrap{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding-right: 5vw;
	padding-left: 5vw;
}
.footer-logo{
	width: 200px;
	line-height: 0;
	margin-bottom: 30px;
}
.footer-nav li{
	display: inline-block;
	padding-right: 1em;
}
.footer-nav li+li{
	position: relative;
	padding-left: calc(1em + 1rem);
}
.footer-nav li+li::before{
	content: '/';
	position: absolute;
	left: 0;
}
.footer-copyrightArea{
	position: relative;
	padding-top: 30px;
}
.totop{
	width: 18px;
	height: 18px;
	border-top: 2px solid #1f1f1f;
	border-right: 2px solid #1f1f1f;
	position: absolute;
	top: 0;
	right: 0;
	transform: rotate(-45deg);
}

/* ===================================
main visutal
=================================== */

#mv{
	width: auto;
	height: calc(100vh - 80px);
	background: url(../images/mv-bg.jpg) center / cover no-repeat;
	position: relative;
	margin-top: 80px;
}
.mv-catchcopy{
	width: 55%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding-right: 5vw;
	padding-left: 5vw;
}
.mv-scroll{
	width: 140px;
	height: auto;
	position: absolute;
	bottom: -5vh;
	right: 5vw;
	animation: rotation 30s linear infinite;
}

/* ===================================
tag line
=================================== */

#tagline{
	padding-right: 2vw;
	padding-left: 2vw;
	margin-top: 280px;
	margin-bottom: 280px;
}
.tagline-text h2{
	font-size: 2em;
	text-align: center;
	line-height: 1.8;
	margin-bottom: 1.5em;
}
.tagline-text p{
	font-size: 1.25em;
	font-weight: 600;
	text-align: center;
	letter-spacing: .15em;
	line-height: 2.5;
}

/* ===================================
cover image (scrollAnime)
=================================== */
.coverImg-wrap{
	position: relative;
}
.coverImg{
	height: 500px;
	overflow: hidden;
	/* position: relative; */
	margin-left: 5vw;
	margin-right: 5vw;
	margin-bottom: 5vw; /* -5vw した分を補う */
}
.coverImg-wrap::after{
	content: '';
	width: 100%;
	height: calc((195 / 1366) * 100vw);
	background: url(../images/coverImg-line.svg) center / 100% auto no-repeat;
	position: absolute;
	bottom: -5vw;
}
.coverImg img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center -10vw;
  opacity: 0;
  transform: scale(1.2);
  transition: .8s;
}
.coverImg.show img{
  opacity: 1;
  transform: scale(1);
}

.coverImg-top{
	background: url(../images/coverImg-top.jpg) center top 35% / cover no-repeat;
	height: 500px;
	position: relative;
	margin-left: 5vw;
	margin-right: 5vw;
	margin-bottom: 5vw; /* -5vw した分を補う */
}
.coverImg-top::after{
	content: '';
	width: 100vw;
	height: calc((195 / 1366) * 100vw);
	background: url(../images/coverImg-line.svg) center / 100% auto no-repeat;
	position: absolute;
	bottom: -5vw;
	left: -5vw;
}
.coverImg-bottom{
	background: url(../images/coverImg-bottom.jpg) bottom 20% center / cover no-repeat;
	height: 500px;
	position: relative;
	z-index: -100;
	margin-bottom: -60px;
	margin-top: 160px;
}


/* ===================================
service
=================================== */

#service{
	margin-top: 160px;
}
.service-list li{
	display: flex;
	justify-content: space-between;
}
.service-list li+li{
	position: relative;
	padding-top: 180px;
}
.service-list li+li::before{
	content: '';
	background-color: var(--main-color);
	width: 100%;
	height: .5px;
	position: absolute;
	top: 90px;
}
.service-list li:nth-child(2n) .service-list-head{
	padding-right: 0;
	padding-left: 60px;
}
.service-list li:nth-child(2n) .service-list-text{
	order: -1;
}
.service-list-head{
	font-family: var(--font-family--en);
	padding-right: 60px;
}
.service-list-head h2{
	font-size: 420%;
	font-weight: 300;
	line-height: 1;
	margin-bottom: 20px;
}
.service-number{
	font-family: var(--font-family--en);
	font-size: 18px;
	font-weight: 300;
}
.service-list-text .arrow-button.sp-move{
	display: none;
}
.service-list-text{
	flex-basis: 650px;
}
.service-list-img{
	margin-top: 30px;
}
.service-list-text img{
	width: 100%;
}

/* ===================================
news
=================================== */

#top #news{
	background-color: var(--sub-color);
	padding: 60px 120px 90px;
	margin-bottom: 160px;
}
#top #news .contents-title{
	text-align: center;
	margin-bottom: 60px;
}
.news-article-wrap{
	margin-bottom: 90px;
}
.news-article{
	padding-bottom: 1.5em;
	position: relative;
}
.news-article::after{
	content: '';
	background-color: var(--main-color);
	width: 100%;
	height: .5px;
	position: absolute;
	bottom: 0;
	left: 0;
}
.news-article + .news-article{
	margin-top: 1.25em;
}
.news-article-contents{
	display: flex;
	align-items: center;
}
.news-article-date{
	font-family: var(--font-family--en);
	width: 8rem;
	font-weight: 300;
	margin-right: 30px;
}
.news-article-category{
	background-color: #fff;
	font-family: var(--font-family--en);
	font-size: .8em;
	font-weight: 300;
	margin-right: 3rem;
	padding: 0 1rem;
}
.news-article-title{
	font-size: 1.6rem;
	font-weight: normal;
}
#top #news .button-wrap{
	text-align: center;
}
article a{
	transition: opacity .3s;
}
article a:hover{
	opacity: .5;
}

/* ===================================
company & member
=================================== */

.top-c_m-wrap{
	background-color: var(--sub-color);
	padding-top: 120px;
	padding-bottom: 160px;
}
.top-c_m-container{
	display: flex;
	justify-content: space-between;
}
.top-c_m-container .contents-title{
	margin-bottom: 60px;
}
.top-c_m-container .button-wrap{
	text-align: right;
}
#top-company,
#top-member{
	max-width: 500px;
}
#top-company .top-c_m-img,
#top-member .top-c_m-img{
	margin-top: 2em;
	margin-bottom: 1.5em;
}
#top-member{
	margin-top: 60px;
	margin-left: 60px;
}

/* ===================================
contact
=================================== */

.cta-area{
	margin-top: 160px;
	margin-bottom: 160px;
}
.contact-text-wrap{
	text-align: center;
}
.contact-text{
	margin-bottom: 60px;
}





/* **********************************************************
**********************************************************

responsive

**********************************************************
********************************************************** */

/* タブレット */
@media screen and (max-width: 769px){

	body{
		font-size: var(--font-size--sp);
	}
	img{
		width: 100%;
		object-fit: cover;
	}
	.inner{
		margin-left: 5vw;
		margin-right: 5vw;
	}
	.page-title{
		margin-top: 160px;
		padding-bottom: 90px;
		margin-bottom: 120px;
	}
	.page-title h1{
		font-size: 4em;
	}
	.contents-title{
		margin-bottom: 60px;
	}

	/* ===================================
	header
	=================================== */
	.header-wrap{
		height: 60px;
	}
	#gnavi{
		display: none;
	}
	#gnavi-sp{
		display: block;
	}
	#logo{
		width: 26px;
		height: 20px;
	}
	#logo a{
		background: url(../images/logomark-bk.svg) center / cover no-repeat;
		width: 100%;
		height: 100%;
	}

	/* ===================================
	footer
	=================================== */
	#gfooter{
		padding-bottom: 30px;
	}
	.footer-logo{
		width: 120px;
	}
	.footer-wrap{
		display: block;
	}
	.footer-nav li{
		display: block;
	}
	.footer-nav li+li{
		padding-left: 0;
	}
	.footer-nav li+li::before{
		display: none;
	}
	.totop{
		top: inherit;
    bottom: 0;
	}

	/* ===================================
	main visutal
	=================================== */
	#mv{
		height: calc(100vh - 60px);
		margin-top: 60px;
	}
	.mv-catchcopy{
    width: 90%;
	}
	.mv-scroll{
    width: 120px;
	}
	#tagline{
    margin-top: 160px;
    margin-bottom: 120px;
	}
	.tagline-text h2{
		font-size: 1.8em;
	}
	.tagline-text p{
		font-size: 1.05em;
		letter-spacing: .15em;
		text-align: left;
	}
	.tagline-text p br{
		display: none;
	}

	/* ===================================
	service
	=================================== */
	#service{
		margin-top: 120px;
	}
	.service-list li{
		display: block;
	}
	.service-list-head{
		padding-right: 0;
	}
	.service-list-head a{
		display: none;
	}
	.service-list-text p{
		margin-bottom: 1em;
	}
	.service-list-text img{
		/* margin-top: 30px; */
		height: 230px;
	}
	.service-list-text .arrow-button.sp-move{
		display: block;
		text-align: right;
	}
	.service-list li:nth-child(2n) .service-list-head{
		padding-left: 0;
	}

	/* ===================================
	news
	=================================== */
	#top #news{
		padding-left: 5vw;
		padding-right: 5vw;
		margin-left: 5vw;
		margin-right: 5vw;
		margin-bottom: 120px;
	}
	#top #news .contents-title{
		margin-bottom: 60px;
	}
	.news-article-wrap{
		margin-bottom: 60px;
	}
	.news-article-contents{
		display: block;
	}
	.news-article-date{
		margin-right: .5em;
	}
	.news-article-category{
		display: inline-block;
	}
	.top-c_m-container{
		display: block;
	}

	/* ===================================
	company / member
	=================================== */
	.top-c_m-wrap{
		padding-top: 90px;
		padding-bottom: 120px;
	}
	#top-company, #top-member{
		max-width: 100%;	
	}
	#top-member{
		margin-top: 60px;
		margin-left: 0;
	}
}