@charset "utf-8";

/*=====================================

responsive.css

=====================================*/


.forPC { display: block; }
.forSP { display: none; }


.spMenu{
	display:block;
}

.menuBtn{
	display:none;
}

/*-------------------------------------------------------------------
 Media Queries
-------------------------------------------------------------------*/

/* SP layout
-------------------------------------------------------------------*/
@media screen and (max-width: 890px) {

/* layout */

body {
    min-width: inherit;
	font-size: 14px;
}
.container {
    width:96%;
	padding-left:2%;
	padding-right:2%;
}


.contents {
    width: 100%;
}
.side {
    width: 100%;
	float:none;
}

/* gnav */
.gNav{
	background-color:#3d5999;
	margin: 0 auto 0px;
	padding: 0;
	
}
.gNav ul{
	display:block;
	width:100%;
	text-align:left;
	border-top:solid 1px #3d5999;
}
.gNav ul li {
    display: block;
    font-weight: bold;
    letter-spacing: normal;
    padding: 10px 0px;
    position: relative;
    vertical-align: top;
	border-bottom:solid 1px #FFFFFF;
}
.gNav ul li:last-child{
	
}
.gNav ul li.active a{
	background-color:#3d5999;
	color:#FFFFFF;
}

.gNav ul li a{
	color:#FFFFFF;
	font-size:16px;
}
.gNav ul li.current::after, .gNav ul li.active::after{
	content:none;

}

.gNav ul li + li::after{
	content:'';
}

/* header */
.headerLogo{
	max-width:80%;
	margin-bottom: 20px;
}
.headerLogo p, .headerLogo h1 {
    font-size: 9px;
    margin: 0 0 4px;
}
.menuBtn,
.menuBtn span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
	
}
.menuBtn {
    height: 31px;
    position: absolute;
    right: 2%;
    top: 19px;
    width: 40px;
}
.menuBtn span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: #3d5999;
	border-radius: 4px;
}
.menuBtn span:nth-of-type(1) {
	top: 0;
}
.menuBtn span:nth-of-type(2) {
	top: 20px;
}
.menuBtn span:nth-of-type(3) {
	bottom: 0;
}

.menuBtn span:nth-of-type(2) {
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
}
.menuBtn.active span:nth-of-type(1) {
	width: 45%;
	-webkit-transform: translate3d(2px, 7px, 0px) rotate(45deg);
	transform: translate3d(2px, 7px, 0px) rotate(45deg);
}
.menuBtn.active span:nth-of-type(2) {
	-webkit-transform: translate3d(-21px, 0px, 0px) rotate(-45deg);
    transform: translate3d(-21px, 0px, 0px) rotate(-45deg);
}
.menuBtn.active span:nth-of-type(3) {
	width: 45%;
	-webkit-transform: translate3d(18px, -3px, 0px) rotate(45deg);
	transform: translate3d(18px, -3px, 0px) rotate(45deg);
}
.mainSvgBox {
    position: relative;
    height: 44vw;
    width: 44vw;
    position: absolute;
    top: 43%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#whiteBg{
	background-color: #ffffff;
	position: absolute;
	height: 44vw;
	width: 44vw;
	z-index: 3;
	
}
#whiteBgLogo{
	position: absolute;
	height: 44vw;
	width: 44vw;
	z-index: 1;
	overflow: hidden;
}
#whiteBgLogo img{
	height: 44vw;
	width: 44vw;
	max-height: inherit;
	max-width: inherit;
}
#BlackBgLogo{
	position: absolute;
	height: 44vw;
	width: 0;
	z-index: 2;
	overflow: hidden;
	
}
#BlackBgLogo img{
	height: 44vw;
    width: 44vw;
    max-height: inherit;
    max-width: inherit;
    border: #FFFFFF solid 1px;
    box-sizing: border-box;
}
.addressArea .addressEn {
    width: 90%;
    margin-bottom: 35px;
}
.addressArea .addressJp {
    width: 75%;
    margin-bottom: 8px;
}
.addressArea .addressMaplink {
    height: 15px;
	margin-bottom: 8px;
	width: 23px;
}
.addressArea .telLink {
    height: 17px;
    margin-bottom: 17px;
    width: 102px;
}
.addressArea .mailLink {
    height: 14px;
    width: 130px;
}
.addressArea .addressMaplink {
    height: 22px;
    width: 23px;
    margin-bottom: 28px;
}
	
main {
    max-width: 890px;
    margin: 0 auto;
    padding-bottom: 50px;
    padding-left: 4%;
    padding-right: 4%;
}
main h2 {
    margin-bottom: 35px;
}
	.addressArea {
    max-width: 790px;
    margin: 0 auto;
    padding: 0 10%;
}
	main h2 {
    margin-bottom: 35px;
}
	section {
    margin-bottom: 50px;
		text-align: center;
}
.inner {
    max-width: 890px;
    margin: 0 auto;
    padding-left: 4%;
    padding-right: 4%;
}
footer {
    padding-bottom: 10px;
    margin-bottom: 30px;
}
.topback {
    background-color: rgba(255,255,255,0.7);
    position: fixed;
    bottom: 10px;
    right: 15px;
}
	
	.andMore img{
	height: 13px;
}

	
	section .imgBox{
		text-align: center;
	}
	
	.scrollBox {
    bottom: -74px;
}
	.horizontalLogo {
    position: fixed;
    height: auto;
    width: 60%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1;
}
	
	
	@-webkit-keyframes scrollingBar {
		0% {height: 120px;}
		50% {height: 92px;}
		100% {height: 120px;}
	}

	
	.iphone .mainSvgBox {
    	top: 41.5%;
	}
	
	
	.fade1 {
    position: absolute;
    margin-top: -35px;
    -webkit-animation: fuyuu 2.4s infinite;
    animation: fuyuu 2.4s infinite;
}
	
	@-webkit-keyframes fuyuu {
	0%{
		top:0;
	}
	
	100% {
		top:10px;
	}
	
	

}

	@media screen and (orientation: landscape) {
	.sp .visualArea {
			position: relative;
		}
		
	.sp .mainSvgBox {
			height: 44vh;
			width: 44vh;
		}

	.sp #whiteBg{
			height: 44vh;
			width: 44vh;
		}
	.sp #whiteBgLogo{
			height: 44vh;
			width: 44vh;
		}
	.sp #whiteBgLogo img{
			height: 44vh;
			width: 44vh;
		}
	.sp #BlackBgLogo{
			height: 44vh;

		}
	.sp #BlackBgLogo img{
			height: 44vh;
			width: 44vh;
		}
		
	
	.sp .scrollBox{
    position: fixed;
    bottom: -53px;
    left: calc( 50% - 20px );
		}
	.sp .arrow{
	margin-bottom: -3px;
	
}
	.sp .mainSvgBox {
			position: relative;
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}
		
	.sp .addressArea .addressEn {
    width: 50%;
    margin-bottom: 35px;
}
		.sp .addressArea .addressJp {
    width: 44%;
    margin-bottom: 8px;
}
		
		.sp .scroll {
    width: 40px;
}
		.sp .arrow{
			width: 32px;
		}
		.sp .fade1{
	position: absolute;
	margin-top: -25px;
	-webkit-animation:fuyuu 2.4s infinite;
	animation:fuyuu 2.4s infinite;
	
}
.sp .fade1 img{
	-webkit-animation:fadein 2.4s infinite;
	animation:fadein 2.4s infinite;
}
	@-webkit-keyframes fuyuu {
	0%{
		top:0;
	}
	
	100% {
		top:10px;
	}
}
	
			
	} /* end landscape */