@charset "UTF-8";
/* ===================================
yugake_page
=================================== */
.yugake_top {
	background: url(../img/yugake_top.jpg) no-repeat center center;
	background-size: cover;
}
.area_margin{
	margin-left:11%;
}
.area {
	width: 90%;
	position: relative;
	min-width: 1200px;
}
.main_area {
	position: relative;
	width: 100%;
	min-height: 462px;
	max-height: 504px;
	height: 34vw;
	margin-bottom: 40%;
	overflow: hidden;
}
.copy_box {
	width: 45%;
	min-height: 462px;
	max-height: 504px;
	height: 34vw;
	float: right;
	background-color: #fff;
	animation: fadeIn 3s, fadeOut 3s 5s forwards;
	-webkit-animation: fadeIn 3s, fadeOut 3s 5s forwards;
	-moz-animation: fadeIn 3s, fadeOut 3s 5s forwards;
	-ms-animation: fadeIn 3s, fadeOut 3s 5s forwards;
	position:relative;
}
.copy_box_inner {
	font-feature-settings: "palt";
	width: 80%;
	margin: 0 auto;
}
.copy_box_inner h3 {
	text-align: center;
	margin: 40px 0 40px 0;
	position: relative;
}
.stamp{
	height: 50px;
	width: auto;
	position: absolute;
	top: 40px;
	right: 180px;
}
.stamp_2{
	height: 50px;
	width: auto;
	position: absolute;
	top: 40px;
	left: 180px;
}
.copy_box_inner p {
	font-size: 14px;
	line-height: 1.8em;
	letter-spacing: 0.15em;
}
.copy_box.animate {
	-webkit-animation: fadeIn 0s 0.6s;
	animation: fadeIn 0s 0.6s;
	-moz-animation: fadeIn 0s 0.6s;
	-ms-animation: fadeIn 0s 0.6s;
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
}
.area .main_area .main_image {
	width: 55%;
	float: left;
	max-height: 580px;
	overflow: hidden;
	position: relative;
}
.main_image.animate img {
	-moz-animation-fill-mode: fadeIn 5.0s 0.2s, scale 8.0s 0.4s;
	-ms-animation-fill-mode: fadeIn 5.0s 0.2s, scale 8.0s 0.4s;
	-webkit-animation: fadeIn 5.0s 0.2s, scale 8.0s 0.4s;
	animation: fadeIn 5.0s 0.2s, scale 8.0s 0.4s;
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
}
.area .main_area:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background-color: #101e37;
}
.area .main_area.animate:after {
	-moz-animation: secondaryImageOverlayIn 0.6s 0s cubic-bezier(0.77, 0, 0.175, 1), secondaryImageOverlayOut 0.6s 0.6s cubic-bezier(0.77, 0, 0.175, 1);
	-ms-animation: secondaryImageOverlayIn 0.6s 0s cubic-bezier(0.77, 0, 0.175, 1), secondaryImageOverlayOut 0.6s 0.6s cubic-bezier(0.77, 0, 0.175, 1);
	-webkit-animation: secondaryImageOverlayIn 0.6s 0s cubic-bezier(0.77, 0, 0.175, 1), secondaryImageOverlayOut 0.6s 0.6s cubic-bezier(0.77, 0, 0.175, 1);
	animation: secondaryImageOverlayIn 0.6s 0s cubic-bezier(0.77, 0, 0.175, 1), secondaryImageOverlayOut 0.6s 0.6s cubic-bezier(0.77, 0, 0.175, 1);
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
}
.area .stamp.animate {
	-webkit-animation: fadeIn 3.0s 1.5s;
	animation: fadeIn 3.0s 1.5s;
	animation-fill-mode: both;
}
.area .fade {
	width: 30%;
	max-height: 500px;
	height: auto;
	position: absolute;
	top: 90%;
	right: 7.2%;
}
.area .fade2 {
	width: 40%;
	height: auto;
	position: absolute;
	top: 112%;
	left: 15%;
}
@keyframes fadeIn {
 0% {
 opacity: 0;
}
 100% {
 opacity: 1;
}
}
@keyframes scale {
 0% {
 transform: scale(1);
}
 100% {
 transform: scale(1.07);
}
}
@keyframes secondaryImageOverlayIn {
 0% {
 width: 0;
}
 100% {
 width: 100%;
}
}
@keyframes secondaryImageOverlayOut {
 0% {
 transform: translateX(0);
}
 100% {
 transform: translateX(102%);
}
}
.h_photo1 {
	position: absolute;
	top: 30%;
	right: 10%;
	margin-right: -150px;
	width: 300px;
	height: auto;
	z-index: 20;
}
.h_photo2 {
	width: 400px;
	height: auto;
	position: absolute;
	top: 80%;
	right: 15%;
	z-index: 10;
}
.main_area2 {
	position: relative;
	width: 100%;
	margin-bottom: 40%;
	overflow: hidden;
	animation-name: secondaryImageOverlayOut2;
}
.copy_box2 {
	width: 45%;
	min-height: 462px;
	max-height: 504px;
	height: 34vw;
	float: left;
	background-color: #fff;
	animation-name: fadeIn;
	position:relative;
 }
.main_area2 .copy_box2.animate {
	animation: fadeIn 0s 0.6s;
	animation-fill-mode: both;
}
.main_area2 .main_image2 {
	width: 55%;
	float: right;
	max-height: 504px;
	overflow: hidden;
	position: relative;
}
.main_area2 .main_image2.animate img {
	animation: fadeIn 5.0s 0.2s, scale 8.0s 0.4s;
	animation-fill-mode: both;
}
.area .main_area2:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background-color: #101e37;
}
.area .main_area2.animate:after {
	animation: secondaryImageOverlayIn 0.6s 0s cubic-bezier(0.77, 0, 0.175, 1), secondaryImageOverlayOut 0.6s 0.6s cubic-bezier(0.77, 0, 0.175, 1);
	animation-fill-mode: both;
}
.area .stamp.animate {
	animation: fadeIn 3.0s 1.5s;
	animation-fill-mode: both;
}
.area .fade {
	width: 30%;
	max-height: 500px;
	height: auto;
	position: absolute;
	top: 90%;
	right: 7.2%;
}
.area .fade2 {
	width: 40%;
	height: auto;
	position: absolute;
	top: 112%;
	left: 15%;
}
@media only screen and (max-width: 768px) {
.area .fade2 {
	width: 70%;
	top: 112%;
	left: 6%;
}
}
@media only screen and (max-width: 768px) {
.area {
	width: 90%;
	min-width: 90%;
	margin: 0 auto;
}
.area_margin{
	margin-left:0%;
}
.copy_box {
	margin: 0 auto;
	width: 100%;
	min-height: inherit;
	max-height: inherit;
	height: auto;
	float: none;
	font-size:14px;
}
.main_area {
	margin-bottom: 77%;
}
.yugake_top {
	padding: 100px 0;
}
.area .main_area .main_image {
	height:auto;
	width: 100%;
	float: none;
}
.area .fade {
	width: 50%;
	top: 98%;
	z-index: 2;
	right: -10.2%;
}
}
@media only screen and (max-width: 768px) {
.area {
	width: 95%;
	min-width: 95%;
}
.main_area2 {
	margin-bottom: 77%;
}
.copy_box2 {
	width: 100%;
	min-height: inherit;
	max-height: inherit;
	height: auto;
	float: none;
	padding-top: 60px;
	padding-bottom: 40px;
}
.area .main_area .main_image {
	width: 100%;
	float: none;
}
.area .fade2 {
	width: 60%;
	top: 109%;
	left: 6%;
}
.h_photo1 {
	top: 100%;
	right: 5%;
	z-index: 20;
}
.h_photo2 {
	top: 110%;
	left: 0%;
}
.h_photo1 img {
	width: 40%;
	height: auto;
}
.h_photo2 img {
	height: auto;
	top: 90%;
	width: 40%;
}
.sapce {
	margin-bottom: 240px;
}
.stamp{
	height: 40px;
	width: auto;
	position: absolute;
	top: 10px;
	left:20%;
}
.stamp_2{
	height: 40px;
	width: auto;
	position: absolute;
	top: 50px;
	left:20%;
}
.main_area {
	position: relative;
	width: 100%;
	min-height: 600px;
	max-height: 504px;
	height: 34vw;
}
.copy_box {
	min-height: 400px;
}
.copy_box_inner h3 {
}
.copy_box p, .copy_box2 p{
	font-size:12px
}
}