@charset 'UTF-8';

/* スタイル */

body {
	min-height: 100%;
	background: url(img/bg.png) fixed;
}

a {
	color: #7d1007;
}
a:hover {
	color: #370500;
}


.container {
	max-width: 1000px;
}



.wrapper {
	width: 100%;
	overflow: hidden;
}





.type {
	display: inline-block;
	position: relative;
}
.type canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
}
.type img {
	opacity: 0;
}


@-ms-keyframes fadein-1 {
	  0% { -ms-opacity: 0; -ms-transform: rotate(-2deg) scale(1.1) translateY(1%); }
	100% { -ms-opacity: 1; -ms-transform: rotate(0deg); }
}
@keyframes fadein-1 {
	  0% { opacity:  0; transform: scale(8) translate(40%,6%); filter: blur(10px); }
	 30% { opacity: .9; transform: scale(7) translate(5%,-16%); filter: blur(0); }
	 50% { opacity:  1;transform: scale(5) translate(-8%,-15%); }
	 60% { opacity:  1;transform: scale(5) translate(-3%,-14%); }
	 75% { opacity:  1;transform: scale(2); }
	 80% { opacity:  1;transform: scale(2); }
	 85% { opacity:  1;transform: scale(1); }
	 93% { opacity:  1;transform: scale(1.5); }
	 97% { opacity:  1;transform: scale(1.5); }
	100% { opacity:  1;transform: scale(1); }
}

@-ms-keyframes fadein-2 {
	  0% { -ms-opacity: 0; }
	100% { -ms-opacity: 1; }
}
@keyframes fadein-2 {
	  0% { opacity: 0; filter: blur(3px); }
	 50% { opacity: .2; filter: blur(2px); }
	100% { opacity: 1; filter: blur(0); }
}


.secret {
	position: relative;
	opacity: 0;
}
.secret img {
	display: block;
}
.secret .smoke {
	position: absolute;
	opacity: 0;
}
.active .secret {
	-ms-animation: fadein-2 .5s ease-out 3s;
	animation: fadein-2 .5s ease-out 3s;
	-ms-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.active .secret .smoke {
	-ms-animation: smoke 2.5s ease-out 3s;
	animation: smoke 2.5s ease-out 3s;
}
@-ms-keyframes smoke {
	  0% { -ms-opacity: 0; }
	100% { -ms-opacity: 1; }
}
@keyframes smoke {
	  0% { opacity:   0; transform: scale(.9);   }
	 80% { opacity:  .5; transform: translateY(-20px) scale(1,1.3) rotate(4deg); }
	100% { opacity:   0; transform: translateY(-25px) scale(1.1,1.3) rotate(5deg); }
}


.box {
	margin-bottom: 3rem;
	font-size: .93rem;
}
.box-title {
	font-size: 1.286rem;
}



.opening-modal {
	display: -ms-flex;
	display: flex;
	-ms-align-items: center;
	align-items: center;
	-ms-justify-content: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	background: #000 url(img/bg.png);
	overflow: hidden;
	transition: all .25s;
}
.opening-modal.hide {
	opacity: 0;
	visibility: hidden;
}
.opening-modal-type {
	display: inline-block;
	position: relative;
}
.opening-modal-type canvas {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 500px;
	height: 500px;
	min-width: 50%;
	min-height: 50%;
	max-width: 80%;
	max-height: 80%;
	margin: auto;
	background-color: transparent;
}
.opening-modal-type img {
	max-width: 100%;
	opacity: 0;
}


.mainvisual {}
.mainvisual .container {
	display: -ms-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	min-height: 100vh;
	padding-top: 3rem;
	padding-bottom: 2rem;
}
.mainvisual .logo {
	position: absolute;
	top: 16%;
	right: 20px;
	width: 20%;
	max-width: 120px;
}
.mainvisual .type {
	position: absolute;
	top: 10%;
	left: 25px;
	width: 80%;
	max-width: 485px;
}
.mainvisual.active .type img {
	opacity: 1;
}
.mainvisual .mission {
	position: relative;
	z-index: 1;
	padding-top: 50%;
	-ms-opacity: 0;
	opacity: 0;
}
.mainvisual.active .mission {
	-ms-animation: fadein-1 .75s ease-in-out .75s;
	animation: fadein-1 .75s ease-in-out .75s;
	-ms-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.mainvisual .mission img {
	max-width: 114%;
	margin-left: -7%;
}
.mainvisual .secret {
	position: absolute;
	bottom: 12.5%;
	right: 15px;
	max-width: 33%;
	-ms-opacity: 0;
	opacity: 0;
}
.mainvisual.active .secret {
	-ms-animation-delay: 1.25s;
	animation-delay: 1.25s;
}
.mainvisual .secret img {
	max-width: 100%;
	height: auto;
}
.mainvisual .secret .smoke {
	top: 0;
	left: 0;
}
.mainvisual.active .secret .smoke {
	-ms-animation-delay: 6.5s;
	animation-delay: 6.5s;
}
.mainvisual .cursor {
	position: absolute;
	bottom: 40px;
	left: 50%;
	height: 100px;
}
.mainvisual .cursor:before {
	content: ' ';
	display: block;
	width: 0;
	height: 100%;
	border-left: 1px solid #333333;
	-ms-animation: cursor-animation 1.5s ease-out .5s infinite;
	animation: cursor-animation 1.5s ease-out .5s infinite;
}
@-ms-keyframes cursor-animation {
	  0% { height: 0; margin-bottom: 0; }
	 50% { height: 30%; }
	 80% { height: 100%; }
	100% { height: 100%; margin-bottom: -4%; }
}
@keyframes cursor-animation {
	  0% { height: 0; margin-bottom: 0; }
	 50% { height: 30%; }
	 80% { height: 100%; }
	100% { height: 100%; margin-bottom: -4%; }
}
@media (min-width: 576px) {
	.mainvisual .logo,
	.mainvisual .type {
		top: 40px;
	}
}
@media (min-width: 768px) {
	.mainvisual .secret {
		right: 22.5%;
	}
	.mainvisual .type {
		width: 70%;
	}
	.mainvisual .mission {
		padding-top: 30%;
	}
}
@media (min-width: 1200px) {
	.mainvisual .logo {
		right: 0;
	}
	.mainvisual .type {
		left: 0;
	}
}



.section {
	line-height: 1.75;
	-ms-transition: all .5s ease 0s;
	transition: all .5s ease 0s;
	-ms-transform: translateY(10px);
	transform: translateY(10px);
	-ms-opacity: 0;
	opacity: 0;
}
.section.active {
	-ms-transform: translateY(0);
	transform: translateY(0);
	-ms-opacity: 1;
	opacity: 1;
}
.section .container {
	position: relative;
	margin-top: -6px;
	padding: 4rem 0 2rem;
}
.section .container:before {
	content: ' ';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 6px;
	background-color: #333333;
	-ms-transition: width .25s ease-in-out .5s;
	transition: width .25s ease-in-out .5s;
}
.section.active .container:before {
	width: 100%;
}
.section .container .inner {
	margin-left: 20%;
}
.section .mission {
	position: absolute;
	top: 10%;
	right: 0;
	width: 50%;
	text-align: right;
}
.section .make {
	display: -ms-flex;
	display: flex;
	margin-bottom: 6rem;
}
.section .make span {
	display: block;
	min-width: 300px;
}
.section .make img {
	-ms-flex: 1;
	flex: 1;
	margin-bottom: 1rem;
}
.section .secret {
	position: relative;
}
.section .type {
	margin-bottom: 6rem;
}
.section .secret img {
	position: absolute;
	-ms-transform: rotate(-40deg);
	transform: rotate(-40deg);
}
@media (max-width: 767.99px) {
	.section .container .inner {
		margin-left: 0;
	}
	.section .make {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.section .make img {
		max-width: 80%;
	}
}
@media (max-width: 999.99px) {
	.section .container {
		width: auto;
		margin-left: 2rem;
		margin-right: 2rem;
		padding-left: 1rem;
		padding-right: 1rem;
	}
}


.mission-1 .secret,
.mission-2 .secret,
.mission-3 .secret,
.mission-4 .secret {
	opacity: 0;
}
.mission-1.active .secret,
.mission-2.active .secret,
.mission-3.active .secret,
.mission-4.active .secret {
	-ms-animation-delay: 3s;
	animation-delay: 3s;
}
.mission-1 .secret img { top:80px; right:250px; }
.mission-2 .secret img { top:-220px; right:150px; }
.mission-3 .secret img { top:-215px; right:440px; }
.mission-4 .secret img { top:-240px; right:110px; }

@media (max-width: 768px) {
	.mission-1 .secret,
	.mission-2 .secret,
	.mission-3 .secret,
	.mission-4 .secret { transform: scale(.6); }
}
@media (max-width: 992px) {
	.mission-1 .secret,
	.mission-2 .secret,
	.mission-3 .secret,
	.mission-4 .secret {
		 transform: scale(.8);
	}
	.mission-1 .secret img { top:  60px; right:-50px; }
	.mission-2 .secret img { top:-200px; right:-30px; }
	.mission-3 .secret img { top:-155px; right:-10px; }
	.mission-4 .secret img { top:-200px; right:110px; }
}


.solution {
	display: -ms-flex;
	display: flex;
}
.solution dt,
.solution dd {
	display: -ms-flex;
	display: flex;
	-ms-flex: 1;
	flex: 1;
	-ms-align-items: center;
	align-items: center;
	-ms-justify-content: center;
	justify-content: center;
	margin: 0;
	padding: .5rem;
	border: 3px solid #333333;
	border-left-width: 0;
	text-align: center;
	line-height: 1.25;
}
.solution dt {
	background: #333333;
}
.solution dt img {
	max-width: 80%;
}
@media (max-width: 767.99px) {
	.solution {
		-ms-flex-flow: column;
		flex-flow: column;
	}
	.solution dt,
	.solution dd {
		border-left-width: 3px;
		border-top-width: 0;
	}
}


.profile .container {
	position: relative;
	padding-bottom: 1rem;
}
.profile .container .inner {
	margin-left: 10%;
	margin-right: 10%;
}
.profile .title {
	position: relative;
	z-index: 1;
}
.profile .logo {
	position: absolute;
	top: 3rem;
	right: 1rem;
}
.profile .secret img {
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
	top: 150px;
	right: 10px;
}
.profile .subtitle {
	font-size: 1rem;
	font-weight: bold;
	margin: 2rem 0 1rem;
}
.profile-dl {
	display: -ms-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}
.profile-dl dt {
	width: 25%;
	margin: 0 0 2rem;
}
.profile-dl dd {
	width: 75%;
}
.profile.active .secret {
	-ms-animation-delay: 1s;
	animation-delay: 1s;
}
.profile.active .secret .smoke {
	-ms-animation-delay: 1s;
	animation-delay: 1s;
}
@media (max-width: 767.99px) {
	.profile .logo {
		opacity: .4;
	}
	.profile .secret img {
		top: 330px;
		right: -40px;
		width: 100px;
		height: auto;
	}
}


.cross-talk .container {
	border-bottom: 6px solid #333333;
}
.cross-talk .container .inner {
	margin-left: 8%;
	margin-right: 8%;
}
.cross-talk .subtitle {
	margin: 3rem 0 1.5rem;
	font-size: 1.143rem;
	font-weight: bold;
}
.cross-talk .photo {
	margin-top: -20px;
	-ms-transform: translate(50px);
	transform: translate(50px);
}
.cross-talk .secret {
	margin-top: -30px;
	margin-right: 20px;
	text-align: right;
}
.cross-talk .secret img {
	position: static;
	margin-left: auto;
}
.cross-talk .secret .smoke {
	position: absolute;
	top: 0;
	right: 0;
}
.cross-talk.active .secret {
	-ms-animation-delay: 1s;
	animation-delay: 1s;
}
.cross-talk.active .secret .smoke {
	-ms-animation-delay: 1s;
	animation-delay: 1s;
}

.talk-dl {
	font-size: .857rem;
	line-height: 1.5;
}
.talk-dl dt {
	float: left;
	min-width: 3rem;
}
.talk-dl dd {
	margin-left: 4rem;
}




.staffs {
	display: -ms-flex;
	display: flex;
	-ms-justify-content: flex-end;
	justify-content: flex-end;
}
.staff-box {
	margin-right: -1px;
	padding: 1rem;
	border: 1px solid #231815;
}