@charset "UTF-8";
/*------------------------
スタイルの初期化
------------------------*/
html{
	font-size:62.5%;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video { margin:0; padding:0; }
body{
	width:100%;

	font-family: 'Noto Sans JP','メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
	font-size: 1.4rem;
	line-height: 1.65;
	text-autospace:ideograph-alpha;
	font-weight:normal;
	font-feature-settings: 'palt';
	letter-spacing: .05em;
	position: relative;
	color: var(--black);
}
.wf{
	font-family: "Sofia Sans Condensed", sans-serif;
}
* {
	box-sizing: border-box;
}
a {
	text-decoration: none;
	color: var(--black);
	transition: all .3s ease 0s;
	display: block;
}
a img {
	border:0;
}
img{
	vertical-align:top;
	width: 100%;
	height: auto;
}
ul, ol { list-style-type:none; }
sup { position: relative; vertical-align: baseline; top: -0.9em; font-size: 0.5em; }
hr { display: none; }
h1,h2,h3,h4,h5,h6 { font-size: 100%;}
th, caption{ text-align: left; font-weight: normal; }
th,td { empty-cells:show; }
input[type="text"] , 
input[type="email"] , 
input[type="tel"] , 
input[type="password"] { padding:0 2px; margin-right:0.4em; }
input[type="submit"] { display:inline; margin:0; }
input[type="radio"] { margin-right:0.4em; }
textarea { padding:2px; }
optgroup { font-style:normal; }
option { padding-right:10px; }
*:focus {
outline: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section,main{
	display:block;
}
/*ボタンデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"],button {
	color: var(--black);
	border-radius: 0;
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	appearance: button;
	border: none;
	box-sizing: border-box;
	cursor: pointer;
	font-family: 'Noto Sans JP','メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
}
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;
}
input[type="text"] , 
input[type="email"] , 
input[type="tel"] , 
input[type="password"] ,
textarea {
	-webkit-appearance : none;
	appearance: none;
	border-radius:0;
	padding:8px;
	border:1px solid #dadada;
	width: 90%;
	box-sizing: border-box;
}
select {
	padding: 10px 16px 10px 10px;
	border: 1px solid #dadada;
	appearance: none;
	border-radius: 0;
	background-size: auto 5px;
}

:root{
	--black:#231815;
	--red:#AD0003;
	--gray:#9FA0A0;
}
.flex-box {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}
.image img{
	width: 100%;
	height: 100%;
}
table {
	width: 100%;
	border-collapse: collapse;
}
.textarea{
	text-align: justify;
}

@media screen and (min-width:768px) {
	body{min-width:1200px;}
	.pc{display: block;}
	.sp,.sp-nav{display: none;}
	a[href*="tel:"] {
		pointer-events: none;
		cursor: default;
	}
}
@media screen and (max-width:767px) {
	body{font-size: 3.73vw;}
	.pc{display: none;}
	.sp{display: block;}
}


/*------------------------
header
------------------------*/
.top-bg{
	position: relative;
}
header .inner{
	display:flex;
	justify-content:space-between;
	align-items:center;
	background: #fff;
}
header .right{
	display: flex;
}
header .ja{
	font-family: 'Noto Sans JP';
}
/* PC */
@media screen and (min-width:768px) {
	header .inner{
		padding: 18px 35px 17px 25px;
		margin: 0 auto;
		position: relative;
	}
	header .logo a {
		width: 220px;
		height: auto;
	}
	header .right #menu-btn{
		display: none;
	}
	/* menu */
	.menu-wrap{
		display: flex;
	}
	.menu-wrap li a{
		position: relative;
		padding: 6px 20px;
		transition: transform .3s ease;
	}
	.menu-wrap li:last-child a{
		padding: 6px 25px;
	}
	.menu-wrap li a:hover{
		color: var(--red);
	}
	.menu-wrap li a.current{
		border-bottom: 2px solid var(--gray);
	}
	 .menu-wrap .ja{
    display:none; /* PCでは初期状態は非表示 */
  }
	/* footerも共通 */
	.menu-wrap li a.flip-link{
		position:relative;
		display:inline-block;
		perspective:800px;
	}
	.menu-wrap li a.flip-link .en,
	.menu-wrap li a.flip-link .ja{
		display: block;
		transform-origin: 50% 100%;
		transition: transform .35s ease;
		backface-visibility: hidden;
		line-height: 1.4;
		text-align: center;
	}
	.menu-wrap li a.flip-link .ja{
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		top: 0;
		transform: rotateX(-90deg);
		opacity: 0;
	}
	.menu-wrap li a.flip-link .en{ transform:rotateX(0deg); }
	.menu-wrap li a.flip-link.is-flip .en{ transform:rotateX(90deg); }
	.menu-wrap li a.flip-link.is-flip .ja{ 
		transform: rotateX(0deg);
		opacity: 1;
		padding: 6px 0px;
	}
}
/* SP */
@media screen and (max-width:767px) {
	header.is-fixed{
		position: fixed;
		top: 0; left: 0; right: 0;
		width: 100%;
		z-index: 200;
		background: #fff;
	}
	header .inner{
		height: 12vw;
		padding: 0 4vw;
		position: relative;
	}
	header .logo a {
		width: 35.87vw;
		height: auto;
	}
	header .right{
		height: 100%;
	}
	#menu-btn{
		display: flex;
		align-items: center;
	}
	#menu-btn a{
		width: 9.33vw;
		height: 5.33vw;
		position: relative;
	}
	#menu-btn div{
		left: 0;
		right: 0;
		position: absolute;
		background: var(--black);
		transition: transform .3s linear;
		width: 100%;
		height: 2px;
	}
	#menu-btn .menu1 {
		top: 0;
	}
	#menu-btn .menu2 {
		top: 2.27vw;
	}
	#menu-btn .menu3 {
		bottom: 0;
	}
	/* OPEN */
	#menu-btn .active .menu1{
		transform: rotate(45deg);
	}
	#menu-btn .active .menu3{
		transform: rotate(-45deg);
	}
	#menu-btn .active .menu2{
		display: none;
	}
	#menu-list.active{
		transform: translateY(0);
	}
	#menu-btn .active .menu1,
	#menu-btn .active .menu3{
		top: 2.4vw;
	}
	#menu-list {
		position: fixed;
		overflow: hidden;
		z-index: 150;
		top: 12vw;
		right: 0;
		background: #fff;
		transform: translateY(-200%);
		transition: all .6s;
		width: 100%;
		padding: 10.4vw;
		min-height: calc(100vh - 12vw);
		overflow-y: auto;
	}
	#menu-list .menu-wrap{
		border-bottom: 1px solid var(--black);
		margin-bottom: 10.67vw;
	}
	#menu-list .menu-wrap li a{
		font-size: 4.27vw;
		padding: 3.33vw;
		line-height: 1.2;
		display: flex;
		justify-content: space-between;
		border-top: 1px solid var(--black);
		letter-spacing: 0.06em;
	}
	#menu-list .menu-wrap li .ja{
		font-size: 3.2vw;
		width: 18.67vw;
		display: inline-block;
	}
	#menu-list .menu-wrap li .ja::before{
		content: "〈";
	}
	#menu-list .menu-wrap li .ja::after{
		content: "〉";
	}

	/* リンク */
	#menu-list .btn-wrap{
		margin-bottom: 12vw;
	}
	#menu-list .v-btn a{
		width: 100%;
		height: 13.33vw;
		font-size: 4.8vw;
	}
	#menu-list .v-btn:first-child{
		margin-bottom: 4.67vw;
	}
	#menu-list .foot-wrap .flex{
		font-size: 2.67vw;
		display: flex;
		justify-content: space-between;
	}
	#menu-list .foot-wrap .flex .line{
		border-right: 1px solid var(--black);
	}
	#menu-list .foot-wrap .copy{
		font-size: 2.13vw;
		margin: 2.67vw calc(50% - 50vw) 0;
		text-align: center;
		display: block;
	}
}

/*--------------------
共通
--------------------*/
.v-btn a{
	border: 1px solid var(--black);
	display: flex;
	align-items: center;
	justify-content: center;
}
section .inner h2 {
	font-weight: normal;
	line-height: 1;
	letter-spacing: 0.06em;
}
/* PC */
@media screen and (min-width:768px) {
	.v-btn a{
		width: 215px;
		height: 35px;
		margin: 0 auto;
		letter-spacing: 0.2em;
	}
	.v-btn a:hover{
		background: var(--black);
		color: #fff;
	}
	section .inner h2 {
		font-size: 34px;
	}
}
/* SP */
@media screen and (max-width:767px) {
	.v-btn a{
		width: 57.33vw;
		height: 9.33vw;
		font-size: 3.73vw;
		letter-spacing: 0.08em;
		margin: 0 auto;
	}
	section .inner{
		margin: 0 4vw;
	}
	section .inner h2 {
		font-size: 8vw;
		text-align: center;
	}
}


/*------------------------
フッター
------------------------*/
#footer{
	background: #fff;
}
#footer .corp .address,
#footer .corp .tel{
	text-align: center;
}
#footer .copy {
	text-align: center;
	display: block;
	letter-spacing: 0.08em;
}
/* PC */
@media screen and (min-width:768px) {
	footer .inner{
		width: 1200px;
		margin: 0 auto;
		padding: 60px 0 30px;
	}
	#footer .footer-nav .menu-wrap {
		margin-bottom: 15px;
		justify-content: center;
	}
	#footer .foot-wrap{
		margin-bottom: 60px;
	}
	#footer .foot-wrap ul{
		display: flex;
		justify-content: center;
	}
	#footer .foot-wrap ul li a{
		padding: 0 15px;
		font-size: 13px;
	}
	#footer .foot-wrap ul li a:hover{
		color: var(--red);
	}
	#footer .corp {
		margin-bottom: 65px;
	}
	#footer .corp .logo {
		width: 190px;
		margin: 0 auto 30px;
	}
	#footer .corp .address,
	#footer .corp .tel{
		font-size: 12px;
		letter-spacing: 0.08em;
	}
	#footer .copy {
		font-size: 10px;
	}
}

/* SP */
@media screen and (max-width:767px) {
	footer .inner{
		padding: 9.33vw 0 4vw;
	}
	#footer .footer-nav{
		display: flex;
		justify-content: space-between;
		margin-bottom: 10.67vw;
		padding: 0 13.33vw;
	}
	#footer .footer-nav .menu-wrap .ja{
		display: none;
	}
	#footer .footer-nav .menu-wrap li a{
		font-size: 4.8vw;
		line-height: 1.833;
		font-weight: 500;
	}
	#footer .foot-wrap ul li a{
		font-size: 3.2vw;
		line-height: 2.167;
	}

	#footer .corp {
		margin-bottom: 4vw;
	}
	#footer .corp .logo {
		width: 50.4vw;
		margin: 0 auto 8vw;
	}
	#footer .corp .address,
	#footer .corp .tel{
		font-size: 2.67vw;
		letter-spacing: 0.08em;
	}
	#footer .copy {
		font-size: 2.13vw;
	}
}

/*--------------------
後続リンク
--------------------*/
#link .link a{
	position: relative;
}
#link .link a::after{
	content: "";
	background: #B5B5B6;
	mix-blend-mode: multiply;
	position: absolute;
}
#link .link.company a{
	background: url(../img/index/company_bg.jpg) no-repeat center;
	background-size: cover;
}
#link .link.contact a{
	background: url(../img/index/contact_bg.jpg) no-repeat center;
	background-size: cover;
}
#link .link .in{
	position: relative;
	border: 0.5px solid #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #fff;
	z-index: 2;
}
#link .link .sub {
	letter-spacing: 0.18em;
}

/* PC */
@media screen and (min-width:768px) {
	#link{
		margin-top: 125px;
	}
	#link .inner {
		width: 1200px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}
	#link .link a{
		width: 600px;
		padding: 25px;
	}
	#link .link a::after{
		width: 550px;
		height: 330px;
		top: 25px;
		left: 25px;
		transition: all .3s ease 0s;
	}
	#link .link a:hover::after{
		background: #fff;
	}
	#link .link .in{
		height: 330px;
	}
	#link .link h2 {
		margin-bottom: 6px;
	}
}
/* SP */
@media screen and (max-width:767px) {
	#link {
		margin:11.73vw 0;
	}
	#link .inner {
		margin: 0 auto;
	}
	#link .link a{
		width: 100%;
		padding: 4vw;
	}
	#link .link a::after{
		width: calc(100% - 8vw);
		height: 54.93vw;
		top: 4vw;
		left: 4vw;
	}
	#link .link.company{
		margin-bottom: 4.67vw;
	}
	#link .link .in{
		height: 54.93vw;
	}
	#link .link h2 {
		margin-bottom: 1.6vw;
	}
}

/*------------------------
エフェクト
------------------------*/
.fadein {
	opacity : 0;
	transform : translate(0, 30px);
	transition: all 800ms;
}
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}
/* 子要素用：動きは親と同じでOKならコピペで可 */
.fade-child{
  opacity: 0;
  transform: translate(0, 30px);
  transition: all 800ms;
}
.fade-child.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}
.fade-g-child{
  opacity: 0;
  transform: translate(0, 30px);
  transition: all 800ms;
}
.fade-child.scrollin .fade-g-child{
	opacity: 1;
	transform: translate(0, 0);
}
.fade {
	opacity : 0;
	transition: all 800ms;
}
.fade.scrollin {
	opacity : 1;
}

.fadein-top {
  opacity: 0;
  transform: translate(0, 30px);
  animation: fadein-move 0.8s ease-out 0.2s forwards;
}
.fadein-top-delay04 {
  opacity: 0;
  transform: translate(0, 30px);
  animation: fadein-move 0.8s ease-out 0.4s forwards;
}
/* SP */
@media screen and (max-width:767px) {
	.fadein.sp-ex {
    opacity: 1;
    transform: translate(0, 0);
	}
	.fadein.sp-imm {
  animation: fadein-move 0.8s ease-out 0.4s forwards;
	}	
}
@keyframes fadein-move {
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
/* ディレイを個別指定 */
.delay01 {transition-delay: 0.1s;}
.delay02 {transition-delay: 0.2s;}
.delay03 {transition-delay: 0.3s;}
.delay04 {transition-delay: 0.4s!important;}
.delay05 {transition-delay: 0.5s;}
.delay06 {transition-delay: 0.6s!important;}
.delay07 {transition-delay: 0.7s;}
.delay08 {transition-delay: 0.8s;}
.delay10 {transition-delay: 0.9s;}


.img-animation {
	overflow: hidden;
	position: relative;
}
.img-animation.active::before {
	animation: img-animation 1.5s cubic-bezier(.4, 0, .2, 1) forwards;
	background: #fff;
	content: '';
	pointer-events: none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
}
@keyframes img-animation {
	100% {
		transform: translateX(100%);
	}
}