@charset "utf-8";

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

layout.css

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

/*-------------------------------------
 setting
-------------------------------------*/
body {
	position: relative;
	color: #333;
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-size: 16px;
	font-weight: normal;
	line-height: 1.4;
	background: #fff;
	-webkit-text-size-adjust: 100%;
	
}
body:before{
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:100vh;
	background-color: #e0f4fb;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #FFFFFF), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #FFFFFF),color-stop(.75, #FFFFFF), color-stop(.75, transparent),to(transparent));
	 background-image: linear-gradient(-45deg, #FFFFFF 25%, transparent 25%, transparent 50%, #FFFFFF 50%, #FFFFFF 75%, transparent 75%, transparent);
    -webkit-background-size: 110px 110px;
	background-size: 110px 110px;
}
a {
	color: #3d569b;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
strong {
	font-weight: bold;
}
em {
	font-style: normal;
}
img {
	max-width: 100%;
	vertical-align: bottom;
	height: auto;
}
.forPC { display: block; }
img.forPC, br.forPC { display: inline-block }
.forSP { display: none; }


/*-------------------------------------
 layout
-------------------------------------*/
#wrapper {
	position: relative;
	overflow: hidden;
}
.mainWrapper{
	background-color: #FFFFFF;
}
.inner {
	position: relative;
	margin: 0 auto;
}
.inner:after,
.bannerArea ul:after,
.container:after,
.section:after {
	clear: both;
	display: block;
	content: "";
}

.horizontalLogo{
	position: fixed;
	height: auto;
	width: 365px;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 1;
}

.visualArea{
	height: 100vh;
	position: relative;
	background-color: #FFFFFF;
	    padding-bottom: 210px;
}
.mainSvgBox{
	height: 306px;
	width: 306px;
	position: absolute;
	top: 43%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.openingSvgSpacer{
	height: 3500px;
}
.openingSvgWrapper{
	position: fixed;
	width: 100%;
	height: 100vh;
	    top: 0;
	background-color: #FFFFFF;
}

.openingSvgBox{
	position: absolute;
	z-index: 1;
	position: relative;
	width: calc(5000vw + 306px);
    height: calc(5300vw + 306px);
	position: absolute;
	top: 43%;
	left: 50%;
	transform: translate(-39%, -50%);
}
.openingSvgWrapper img{
	width: 100%;
	height: 100%;
}

.mainSvgInner {
	position: relative;
}
#whiteBg{
	background-color: #ffffff;
	position: absolute;
	height: 306px;
	width: 306px;
	z-index: 3;
	
}
#whiteBgLogo{
	position: absolute;
	height: 306px;
	width: 306px;
	z-index: 1;
	overflow: hidden;
}
#whiteBgLogo img{
	height: 306px;
	width: 306px;
	max-height: inherit;
	max-width: inherit;
}
#BlackBgLogo{
	position: absolute;
	height: 306px;
	width: 306px;
	z-index: 2;
	overflow: hidden;
	width: 0;
}
#BlackBgLogo img{
	height: 306px;
    width: 306px;
    max-height: inherit;
    max-width: inherit;
    border: #FFFFFF solid 1px;
    box-sizing: border-box;
}
.scrollBox {
    position: fixed;
    bottom: -81px;
    left: calc( 50% - 28px );
    opacity: 1;
	padding-top: 0;
}


.scrollBox img {
    width: 100%;
    height: auto;
}

.scrollBox::after {
    
}
.arrow{
	width: 48px;
	margin-bottom: 8px;
	margin-left: 3px;
}
.scroll{
	width: 56px;
}
.fade1{
	position: absolute;
    margin-top: -35px;
    -webkit-animation: fuyuu 2.4s infinite;
    animation: fuyuu 2.4s infinite;
	
}
.fade1 img{
	-webkit-animation:fadein 2.4s infinite;
	animation:fadein 2.4s infinite;
}
@-webkit-keyframes fuyuu {
	0%{
		top:0;
	}
	
	100% {
		top:10px;
	}
}

@-webkit-keyframes fadein {
	0%{
		opacity:0;
	}
	75% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}

.scrollbar{
	width: 1px;
    height: 120px;
    background-color: #000000;
    content: '';
    position: relative;
    display: block;
    margin-top: 8px;
    margin-left: 5px;
}


.scrollbar{
	-webkit-animation:scrollingBar 3s infinite ;
	animation:scrollingBar 3s infinite;
}



@-webkit-keyframes scrollingBar {
0% {height: 120px;}
50% {height: 75px;}
100% {height: 120px;}
}



main{
	max-width: 890px;
	margin:0 auto;
	padding-bottom: 90px;
	padding-top: 170px;
	background-color: #FFFFFF;
}
.inner{
	max-width: 890px;
	margin:0 auto;
}
.addressAreaWrapper{
	padding-top: 210px;
    /* margin-bottom: 170px; */
    /* margin-top: 210px; */
    padding-bottom: 170px;
}

.addressArea{
	max-width: 790px;
	margin:0 auto;

}
.addressArea .addressEn{
	width:54%;
	margin-bottom: 55px;
	opacity: 0;
	transform: translate(0, 30px);
    -webkit-transform: translate(0, 30px);
	transition: 2s;
	
}
.addressArea .addressJp {
    width: 45%;
    margin-bottom: 17px;
	opacity: 0;
	transform: translate(0, 30px);
    -webkit-transform: translate(0, 30px);
	transition: 2s;
}
.addressArea .addressMaplink {
    height: 22px;
    width: 34px;
    margin-bottom: 40px;
	opacity: 0;
	transform: translate(0, 30px);
    -webkit-transform: translate(0, 30px);
	transition: 2s;
}

.addressArea .telLink {
    height: 22px;
    margin-bottom: 17px;
    width: 147px;
	opacity: 0;
	transform: translate(0, 30px);
    -webkit-transform: translate(0, 30px);
	transition: 2s;
}
.pc .telLink a{
	pointer-events: none;
	cursor: default;
}

.addressArea .mailLink {
    height: 22px;
    width: 193px;
	opacity: 0;
	transform: translate(0, 30px);
    -webkit-transform: translate(0, 30px);
	transition: 2s;
}
main h2{
	opacity: 0;
	transform: translate(0, 30px);
    -webkit-transform: translate(0, 30px);
	transition: 2s;
}
.addressArea .addressEn.fade01,
.addressArea .addressJp.fade01,
.addressArea .addressMaplink.fade01,
.addressArea .telLink.fade01,
.addressArea .mailLink.fade01,
main h2.fade01{
	opacity: 1.0;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
}

.addressArea .addressMaplink img,
.addressArea .telLink img,
.addressArea .mailLink img{
	max-height: 100%;
	width: auto;
}

.topback{
	background-color: rgba(255,255,255,0.7);
	position: fixed;
	bottom: 10px;
	right:15px;
	opacity: 0;
	z-index: 100;
}
.topback a{
	display: block;
}

.topback img{
	width: 60px;
	height: auto;
}
.footerCopyright img {
    height: 11px;
}

.andMore img{
	height: 17px;
	width: auto;
	margin-bottom: 100px;
}

footer{
	padding-bottom: 90px;
}
section{
	margin-bottom: 100px;
}


main h2{
	margin-bottom: 100px;
}


section .imgBox{
	text-align: center;
}




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

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

.forPC { display: none !important; }
.forSP { display: block; }
img.forSP, br.forSP { display: inline-block }




}







/* PC layout
-------------------------------------------------------------------*/
@media screen and (min-width: 890px) {

body {
	
}

a img,
.hover,
.headerLogin ul li a,
.headerLink ul li a,
.gNav a,
.megaMenu .ttl a,
.pagetop a {
	transition: opacity 0.2s linear;
	-webkit-transition: opacity 0.2s linear;
	-moz-transition: opacity 0.2s linear;
	backface-visibility: hidden;
}
a:hover img,
.hover:hover,
.headerLogin ul li a:hover,
.headerLink ul li a:hover,
.gNav a:hover,
.megaMenu .ttl a:hover,
.pagetop a:hover {
	opacity: 0.8;
}




}