/*---------------------------------
	IMPORTS
-----------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,100,200,300,500,600,700,800,900);



	/* = Selected Text
----------------------------------------------- */
::selection {
	background:#CC9933; /* Safari */
	color:#FFF;
}

::-moz-selection {
	background:#CC9933; /* Firefox */
		color:#FFF;
}

/*---------------------------------
	OVERRIDES
-----------------------------------*/
h1,h2,h3,h4,h5,h6{
font-family: 'Ropa Sans', "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-weight:normal;
}
thead th,
tbody th{
font-family: 'Ropa Sans', "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

button,
a.btn,
input[type="submit"],
input[type="reset"],
input[type="button"]{
font-family: 'Ropa Sans', "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.hmenu,#logo{
font-family: 'Ropa Sans', "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

blockquote{
font-family: 'Ropa Sans', "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


/*---------------------------------
	LAYOUT
-----------------------------------*/

body{
margin:0;
padding:0;
color:#222;
background:#FFF;
font:normal 0.9em/150% 'Ropa Sans', "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
text-shadow: 0 0 1px transparent; /* google font pixelation fix */
-webkit-text-size-adjust: 100%;

}
html,body{height: 100%;}

	#loader {
	    width: 100%;
	    height: 100%;
	    /*display: none;*/
	    position: fixed;
	    _position: absolute; /* IE6 */
	    top: 50%;
	    left: 50%;
	    margin-top: -12.5px;
	    margin-left: -12.5px;
	    z-index: 9999;
	}
	#loader img{
		width:25px;
		height:25px;
	}

	#fade {
	    width: 100%;
					height:100%;
	   /* display: none;*/
	    background-color: #fff;
	    position: fixed;
	    top: 0px;
	    left: 0px;
	    z-index: 9990;
	}



main{
	position:relative;
	overflow: hidden;
}
aside {
    display: none;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0;
    background-color: rgba( 255, 255, 255, 0.95 );
    line-height: 42px;
    text-align: center;
    position: fixed;
    top: -100%;
    right: 0;
    /*z-index: 1000;*/
				overflow-y:auto;
}
@media all and (min-width: 769px) {
	aside {height: 50px; top:-50px; overflow-y: hidden;}
}

header{
		width:100%;
	height: 50px;
		top:0;
		left:0;
		position:fixed;
	z-index:2000;
	background: #fff;
				}
/*aside::before{
	content: '';
	position: fixed;
	width: 100%;
	height: 50px;
	top:0;
	left: 0;
	background: #fff;
}*/
#container{position:relative;}

#hlogo{
	position:fixed;
	top:8px;
	left:28px;
	width:180px;
	height:auto;
	margin:0;
transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
}
#hlogo.sec1{opacity: 0; }
.sec1{opacity: 0; }
@media all and (min-width: 769px) {
	#hlogo.sec1{ pointer-events: none;}
}
/*#hlogo a{ display: block; width: 100%; height: 100%;}*/
#hlogo img{
	width:100%;
	height:auto;
	transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
}

#copyright{
	position: fixed;
	top:50%;
	left:5px;
	font-size: 0.8em;
	color: #999;
	font-style:italic;
	letter-spacing: 0.06em;
	text-align: center;
	width: 300px;
	height: 20px;
	z-index: 400;
	margin-left: -141px;
	font-weight: 100;
	-ms-transform:rotate(90deg);
     -webkit-transform:rotate(90deg);
	 -moz-transform:rotate(90deg);
    transform:rotate(90deg);
}
#copyright i{font-size: 0.9em;}
#snsnav{
	position: fixed;
	top:50%;
	right:5px;
	width: 20px;
	height: auto;
	z-index: 400;
	margin-top: -3em;
}
#snsnav ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
#snsnav ul li{
	padding: 0;
	line-height: 1;
	margin: 1.5em 0;
	width: 100%;
	text-align: center;
	color: #ccc;
}
@media all and (max-width: 768px) {
	#hlogo{left: 10px;}
	#snsnav {display: none;}
	#copyright{
	position: relative;
	width: 100%;
	margin: 5px 0;
	-ms-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
        transform:rotate(0deg);
}
}
#menuButton {
    display: block;
    width: 40px;
    height:40px;
    position: fixed;
    top: 7px;
    right: 15px;
				cursor:pointer;
	transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
				background:rgba(255,255,255,0.4);
}
@media all and (min-width: 769px) {
	#menuButton {display: none;}
}
#menuButton span {
    display: block;
    background: #262626;
    width: 20px;
    height: 1px;
    position: absolute;

    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
}
#menuButton span:nth-of-type(1) {
    top: 9px;
				left: 15px;
}

#menuButton span:nth-of-type(2) {
    top: 19px;
				left: 10px;
}

#menuButton span:nth-of-type(3) {
    bottom: 9px;
				left: 5px;
}
#menuButton.active{
	 	/*-webkit-transform:translateX(-10px);
    -moz-transform:translateX(-10px);
    -ms-transform:translateX(-10px);
    transform:translateX(-10px);*/
}

#menuButton.active{
		}
#menuButton.active span{
				/*background: #C93;*/
				width:30px;
}
#menuButton.active span:nth-of-type(even){
	 -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
    opacity: 0;
}
#menuButton.active span:nth-of-type(odd){
	 -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
    opacity: 0;
}
#menuButton.active span:nth-of-type(1) {

    -webkit-transform:translateX(-10px) translateY(10px) rotate(45deg);
    -moz-transform:translateX(-10px) translateY(10px) rotate(45deg);
    -ms-transform:translateX(-10px) translateY(10px) rotate(45deg);
    transform:translateX(-10px) translateY(10px) rotate(45deg);
				opacity: 1;
}

#menuButton.active span:nth-of-type(3) {
    -webkit-transform:translateX(0px) translateY(-11px) rotate(-45deg);
    -moz-transform:translateX(0px) translateY(-11px) rotate(-45deg);
    -ms-transform:translateX(0px) translateY(-11px) rotate(-45deg);
    transform:translateX(0px) translateY(-11px) rotate(-45deg);
				opacity: 1;
}
#menuButton:not(.active):hover{

}
#menuButton:not(.active):hover span{
				/*background: #C93;*/
				width:30px;
				left:5px;
}
#menuButton:not(.active):hover span:nth-of-type(1),
#menuButton:not(.active):hover span:nth-of-type(3)
{
	 transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
}
/*#menuButton:not(.active):hover span:nth-of-type(1){
	top: 7px;
}
#menuButton:not(.active):hover span:nth-of-type(3){
	bottom: 7px;
}
*/

#menuButton:not(.active):hover span:nth-of-type(2){
	 transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
}




#menuButton.active:hover span{
	/* background: #C93; */
}


nav{
	font-family: 'Ropa Sans',  sans-serif;
		font-size:1.2em;
		color:#222;
		line-height:1.2;
		font-style:italic;
		letter-spacing:0.06em;
		z-index: 3000;
	}

		nav ul{display:block;margin:80px 0 30px;padding:0;
		overflow:visible;}
	nav ul li{display:block;margin:0;padding:0; line-height:1.2;}
	nav ul li a:hover{ color:#555;/*letter-spacing:0.06em;*/ }
nav ul li a{padding:0.6em 30px;display:block;text-decoration:none;color:#222;}
	nav ul li a{color:#222; text-align:center;
	-webkit-transition: all .2s;
	-moz-transition: all 0.2s;
	transition: all .2s;
	}
nav ul li a strong{
	font-weight: normal;
	display: block;
	position: relative;
	top:0;
	font-size: 0.6em;
	font-style: normal;
	left: 0;
	margin: 3px auto 0;
	width: 100%;
	color: #999;
opacity: 1;
}


	@media all and (min-width: 769px) {
		nav{		font-size:1em;		}
			nav ul{display:block;margin:0px ;padding:0;
		overflow:hidden;
		transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
		}
		nav.rgtnav ul{text-align: right; margin-right: 30px;}
nav ul li a{padding:1em 1px 0.7em;}


		nav ul li{display:inline-block;margin:0px 3px 3px;
		transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;}
	nav ul li a span{
	position: relative;
display: inline-block;
padding:6px 2px 4px;
overflow:hidden;
}


nav ul li a span::after  {
	position: absolute;
	bottom: 0;
	left: 50%;
	content: '';
	width: 0;
	height: 1px;
	background-color:#222;
	-moz-transition: all .4s ease;
    -webkit-transition: all .45s ease;
    -o-transition: all .4s ease;
    -ms-transition: all .4s ease;
    transition: all .4s ease;
				z-index:-1;
}

nav ul li a:hover span::after {
	width: 100%;
	left:0;
}
nav ul li a strong{
	font-weight: normal;
	position: absolute;
	top:0px;
	font-size: 0.6em;
	font-style: normal;
	left: 50%;
	margin-left: -50px;
	width: 100px;
	color: #C93;
opacity: 0;
-moz-transition: all .4s ease;
    -webkit-transition: all .45s ease;
    -o-transition: all .4s ease;
    -ms-transition: all .4s ease;
    transition: all .4s ease;
}

nav ul li a:hover strong {
	opacity: 1;
	top:5px;
}
	}
		@media all and (min-width: 961px) {
	nav ul li{margin:0px 1% 3px;}
		}

@media all and (max-width: 480px) {
	nav{ font-size:1.2em; line-height:1;}
	nav ul li a{padding:0.5em 10px;}
}


/* Waypoints */
.effect{}
.effect .ef{}
.pp{}
.bounceInLeft, .bounceInRight,.fadeIn,.fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight { visibility: visible; }
.delay-05s { animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
.delay-1s { animation-delay: 1s; -webkit-animation-delay: 1s; }
.delay-15s { animation-delay: 1.5s; -webkit-animation-delay: 1.5s; }

.delay1 { animation-delay: 0.1s; -webkit-animation-delay: 0.1s; }
.delay2 { animation-delay: 0.2s; -webkit-animation-delay: 0.2s; }
.delay3 { animation-delay: 0.3s; -webkit-animation-delay: 0.3s; }
.delay4 { animation-delay: 0.4s; -webkit-animation-delay: 0.4s; }
.delay5 { animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
.delay6 { animation-delay: 0.6s; -webkit-animation-delay: 0.6s; }
.delay7 { animation-delay: 0.7s; -webkit-animation-delay: 0.7s; }
.delay8 { animation-delay: 0.8s; -webkit-animation-delay: 0.8s; }
.delay9 { animation-delay: 0.9s; -webkit-animation-delay: 0.9s; }
.delay10 { animation-delay: 1s; -webkit-animation-delay: 1s; }
.delay11 { animation-delay: 1.1s; -webkit-animation-delay: 1.1s; }
.delay12 { animation-delay: 1.2s; -webkit-animation-delay: 1.2s; }




.swiper-container.topslide   {
        width: 100%;
        height: 100%;
	 border:0px solid #fff;
	/*border-left: none;*/
	overflow: hidden;

    }


 .topslide .swiper-slide {
		width: 100%;
        height: 100%;
        text-align: center;
        font-size: 18px;
	 overflow: hidden;
        background: none;
	  /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;

	 position: relative;

    }
.topslide .swiper-slide::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
	background-color: rgba(0,0,0,0.06);
}
.topslide .swiper-slide .slideimg{
		width: 100%;
        height: 100%;
		overflow: hidden;
		background-position:center;
		background-repeat:no-repeat;
		-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;
background-size:cover;

position:relative;

	 -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
	transform: translate3d(0,0,0);
				}





.topslide .swiper-slide:not(.my-active) .slideimg{

 -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);

}

.topslide .swiper-slide.my-active .slideimg{

-webkit-animation:animation-topslide 15s linear forwards;
-moz-animation:animation-topslide 15s linear forwards;
-ms-animation:animation-topslide 15s linear forwards;
    animation:animation-topslide 15s linear forwards;

}



@keyframes animation-topslide {

    from{
        -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    }
    to{
       -webkit-transform: scale(1.16);
    -moz-transform: scale(1.16);
    -o-transform: scale(1.16);
    -ms-transform: scale(1.16);
    transform: scale(1.16);
    }
}



#section1 .top-pagination{
	position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
	z-index: 350;

}

#section1 .top-pagination .swiper-pagination-bullet {
        width: 20px;
        height: 20px;
	margin: 0 10px;
        text-align: center;
        line-height: 20px;
        font-size: 20px;
        color:#ccc;
        opacity: 1;
	background: none;
	font-family: 'Crimson Text', serif;
	-webkit-border-radius: none;
	-moz-border-radius: none;
	border-radius: none;


    }
#section1 .top-pagination .swiper-pagination-bullet-active {
        color:#999;
	background: none;
    }


/* Centered texts in each section
	* --------------------------------------- */
	.section{
		text-align:center;
		background:#fff;
		position:relative;
		/*overflow:hidden;*/
		margin:0 auto;
		/*max-width:1500px;*/
	}


#section1{

}
#section1 .fp-tableCell {
    vertical-align:top;
}
#section1 .intro{
	width:100%;
	height:100%;
	position: absolute;
	top:0;
	left: 0;
	z-index: 9999;

}


 svg:not(:root){overflow: hidden}

  .innerbox svg{
    height: 100%;
    display:block;
    width: 100%;
  }


#section1 .innerbox{
	color: #fff;
	width:30%;
	max-width: 350px;
	min-width: 250px;
	height:auto;
	position: absolute;
	top: 50%;
	left: 8%;
	z-index: 900;
}
#section1 .innerbox p{
	margin: 0;
	padding: 0;
	margin-top: -14%;
	font-size: 0.8em;
	width: 60%;
	font-style: italic;
	text-align: left;
	line-height: 1.6em;
}
#section1 .innerbox .pagenum{
	font-size: 6em;
	font-family: 'Crimson Text', serif;
	line-height: 1em;
	width: 100%;
	text-align: right;
}
#section1 .innerbox::after{
	content: '';
	position: absolute;
	width: 160px;
	height: 160px;
	bottom:10px;
	right:10px;
	z-index: 10;
	background-image: linear-gradient(-45deg, transparent 50%, #ffffff 50%, #ffffff 50.5%, transparent 50.5%, transparent);
	background-image: -webkit-linear-gradient(-45deg, transparent 50%, #ffffff 50%, #ffffff 50.5%, transparent 50.5%, transparent);
	background-image: -moz-linear-gradient(-45deg, transparent 50%, #ffffff 50%, #ffffff 50.5%, transparent 50.5%, transparent);
	background-image: -ms-linear-gradient(-45deg, transparent 50%, #ffffff 50%, #ffffff 50.5%, transparent 50.5%, transparent);
	pointer-events: none;
	-ms-transform:translate(80px,-80px);
        -webkit-transform:translate(80px,-80px);
		-moz-transform:translate(80px,-80px);
        transform:translate(80px,-80px);
	opacity: 0;

}
@media all and (max-width: 680px) {

	#section1 .innerbox::after{ width: 100px; height: 100px; bottom:0px; right:10px;
	background-image: linear-gradient(-45deg, transparent 50%, #ffffff 50%, #ffffff 51%, transparent 51%, transparent);
	background-image: -webkit-linear-gradient(-45deg, transparent 50%, #ffffff 50%, #ffffff 51%, transparent 51%, transparent);
	background-image: -moz-linear-gradient(-45deg, transparent 50%, #ffffff 50%, #ffffff 51%, transparent 51%, transparent);
	background-image: -ms-linear-gradient(-45deg, transparent 50%, #ffffff 50%, #ffffff 51%, transparent 51%, transparent);
	}
	#section1 .innerbox p{font-size: 0.7em;}
	#section1 .innerbox .pagenum{font-size: 4em; margin-top: -0.8em;}
}
@media all and (max-width: 600px) {
	#section1 .innerbox{width:70%; top: 48%; left: 15%;}
}

#section1::before{
	content: '';
	position: absolute;
	width: 140px;
	height: 140px;
	top:40px;
	left:20px;
	z-index: 2000;
	background-image: linear-gradient(-45deg, transparent 50%, #938210 50%, #938210 50.5%, transparent 50.5%, transparent);
	background-image: -webkit-linear-gradient(-45deg, transparent 50%, #938210 50%, #938210 50.5%, transparent 50.5%, transparent);
	background-image: -moz-linear-gradient(-45deg, transparent 50%, #938210 50%, #938210 50.5%, transparent 50.5%, transparent);
	background-image: -ms-linear-gradient(-45deg, transparent 50%, #938210 50%, #938210 50.5%, transparent 50.5%, transparent);
	pointer-events: none;
	-ms-transform:translate(-80px,80px);
        -webkit-transform:translate(-80px,80px);
		-moz-transform:translate(-80px,80px);
        transform:translate(-80px,80px);
	opacity: 0;
}

#section1::after{
	content: '';
	position: absolute;
	width: 140px;
	height: 140px;
	bottom:20px;
	right:20px;
	z-index: 10;
	background-image: linear-gradient(-45deg, transparent 50%, #e4c600 50%, #e4c600 50.5%, transparent 50.5%, transparent);
	background-image: -webkit-linear-gradient(-45deg, transparent 50%, #e4c600 50%, #e4c600 50.5%, transparent 50.5%, transparent);
	background-image: -moz-linear-gradient(-45deg, transparent 50%, #e4c600 50%, #e4c600 50.5%, transparent 50.5%, transparent);
	background-image: -ms-linear-gradient(-45deg, transparent 50%, #e4c600 50%, #e4c600 50.5%, transparent 50.5%, transparent);
	pointer-events: none;
	-ms-transform:translate(-80px,80px);
        -webkit-transform:translate(-80px,80px);
		-moz-transform:translate(-80px,80px);
        transform:translate(-80px,80px);
	opacity: 0;

}
#section1.setstart::before,#section1.setstart::after,#section1.setstart .innerbox::after{
	-ms-transform:translate(0px,0px);
        -webkit-transform:translate(0px,0px);
		-moz-transform:translate(0px,0px);
        transform:translate(0px,0px);
	pointer-events: none;
	opacity: 0.9;
	-moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;

}

@media all and (max-width: 768px) {
	#section1::before{ top:55px; left: 10px; width: 100px; height: 100px; z-index: 10;}
	#section1::after{ bottom:35px; right:10px; width: 100px; height: 100px;}
}

	#section1 .intro p	{
		padding-left:30px;
		font-size:0.9em;
		letter-spacing:0.08em;
		text-align:left;
		line-height:2.4;
		z-index:10;
	}



.scrolldownbtn{
		display:none;
		color:#fff;
		font-style: italic;
		letter-spacing: 0.06em;
		text-align:center;
		width:50px;
		height:50px; cursor:pointer;
		position:absolute;
		z-index:501;
		bottom:30px;
		left:50%;
		margin-left:-25px;

	}
	.scrolldownbtn::after{
					position:absolute;
					content:'';
					top:30px;
					left:50%;
					width:0;
					height:30px;
					border-left:1px solid #fff;

	-webkit-animation-name: scrlldwn;
	animation-name: scrlldwn;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	/*-webkit-animation-delay: 1s;
	animation-delay: 1s;*/
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;

				}
@-webkit-keyframes scrlldwn {
	0% { height: 0; top:17px;}
  100% {height: 30px; top:28px;}
}

@keyframes scrlldwn {
	0% { height: 0; top:17px;}
  100% {height: 30px; top:28px;}
}
	.scrlldwn {
  -webkit-animation-name: scrlldwn;
  animation-name: scrlldwn;
}



		.section:not(#section1):not(#psection1){ padding: 0 30px; }

		@media all and (max-width: 768px) {
			.section:not(#section1):not(#psection1){ padding: 0 5px; }
		}
		#section2 .fp-tableCell {
			display:block;
		}
		.section:not(#section1) .intro{
			/*padding-top: 50px ;*/
		}
		#section2 .intro{
			width:100%;
			background-color: #f6f6f6;
			margin:0;

		}






#section2 h2{
		width:100%;
		text-align:center;
		font-size: 1.7em;
		font-weight:normal;
		font-style: italic;
		letter-spacing:0.06em;
	line-height: 1.2;
		color:#222;
		margin:30px 0 50px;
		position: relative;
	}
#section2 h2 span{ position: relative; z-index: 20; background-color:rgba(241,241,241,0.3);}
#section2 h2::before{
	content: '';
	position: absolute;
	width: 120px;
	height: 0;
	top:50%;
	left:50%;
	z-index: 10;
	margin-left: -60px;
	border-bottom: 1px solid #999;
	-ms-transform:rotate(-45deg);
     -webkit-transform:rotate(-45deg);
	 -moz-transform:rotate(-45deg);
    transform:rotate(-45deg);
}


	#section2 #newsbox {
		position:relative;
		overflow:hidden;
        width: 100%;
        height: auto;
        padding: 60px 3%;
		background-color: #F1F1F1;
    }

.lg_btn {
	display: block;
	width: 180px;
	text-align: left;
	text-decoration: none;
	padding:5px 0 5px;
	line-height:1;
	outline: none;
	font-size:1em;
	font-style:italic;
	margin:4% auto 4%;
	position: relative;
	z-index: 2;
	background-color: #313131;
	color:#fff;
	letter-spacing:0.06em ;
	overflow: hidden;

}
.lg_btn span {
	position: relative;
	display: block;
	z-index: 30;
	width: 55%;
text-align: center;
/*background-color: #313131;*/
-webkit-transition: all .2s ease-out;
	-moz-transition: all 0.2s ease-out;
	transition: all .2s ease-out;
}
@media all and (min-width: 769px) {
	.lg_btn { position: absolute; top:95px; right: 0; margin: 0;}
}
.lg_btn::before{
	content: '';
	position: absolute;
	top:50%;
	left: 50%;
	width: 100%;
	height: 0;
	border-bottom: 1px solid #fff;
	z-index: 10;
	-webkit-transition: all .4s;
	-moz-transition: all .4s;
	transition: all .4s;
}
.lg_btn:hover::before {
	width: 50%;
	left: -20%;

}
.lg_btn:hover span {margin-left:45%; width: 50%;}

	#section2 #newsbox h3{
					font-size: 0.9em;
					font-weight:normal;
					text-align:left;
					color:#222;
					margin:0;
					padding: 0;
    }

	#newsbox .swiper-container {
        width: 100%;
        height: 100%;
        padding: 0 0 40px;
    }
   	#newsbox .swiper-container .swiper-slide {
        text-align: center;
     height:auto;

    }

				#newsbox .swiper-container .swiper-slide img{
					width:100%;
					height:auto;
				}
				#newsbox .swiper-container .swiper-slide .newsimg{
					width:100%;
					height:0;
					padding-top: 66.67%;
					background-color: #fff;
					overflow: hidden;
		background-position:center;
		background-repeat:no-repeat;
		-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;
background-size:cover;
				}
#newsbox .swiper-container .swiper-slide .newsimg.noimg{
	background-position:center 58%;
	background-image: url(../images/common/tlogo.svg);
	-moz-background-size:70% auto;
-webkit-background-size:70% auto;
-o-background-size:70% auto;
-ms-background-size:70% auto;
background-size:70% auto;
}

				#newsbox .swiper-container .swiper-slide .newsinner{
					padding:10px 0 10px;
				}
				#newsbox .swiper-container .swiper-slide .newsinner p{
					text-align:left;
					margin:0 0 5px;
					padding: 0;
					font-weight:normal;
					letter-spacing: 0.06em;
					font-family: 'Crimson Text', serif;
					font-size: 1.2em;
					color:#222;
					line-height: 1.1em;
				}
#newsbox .swiper-container .swiper-slide a{text-decoration: none;}
				/* Arrows */
#newsbox .swiper-button-prev,
#newsbox .swiper-button-next {
  margin-top: -32px;
}



				/* Bullets */
#newsbox .swiper-pagination-bullet {
  width: 40px;
  height: 4px;
  display: inline-block;
  border-radius:0;
  background: #FFF;
  opacity: 1;
}


#newsbox .swiper-pagination-bullet-active {
	opacity: 1;
  background:#777777;
}
#newsbox .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 7px;
}





#contbox{
	 width: 100%;
        height: auto;
        padding-top: 39%;
	height: 0;
	overflow: hidden;
	position: relative;
}

#contbox ul{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	-webkit-justify-content:center;
	justify-content:center;
	background-color: #504D4D;
}
#contbox ul li{
	/*width:33.333333333%;*/
	flex: 1;
	-webkit-flex:1;
		margin:0 0;
	padding:0;
	overflow: hidden;
	background:#000;
	-moz-transition: all 0.4s ease-out;
    -webkit-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

#contbox ul li a{
	margin:0; padding:0;
	width:auto;
	height:auto;
	position: relative;
	width: 100%;
	height: 100%;
	display: block;

}



#contbox ul li p{
	margin:0 auto; padding:0;
	position:absolute;
	top:46%;
	left:0;
	width:100%;
	text-align:center;
font-size:1.8em;
color:#FFF;
line-height:0.3;
letter-spacing:0.06em;
z-index:100;
font-style:italic;


	-moz-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

#contbox ul li p span{
	position: relative;
	display: inline-block;

}

#contbox ul li p::before{
	content: '';
	position: absolute;
	width: 120px;
	height: 0;
	top:50%;
	left:50%;
	z-index: 10;
	margin-left: -60px;
	border-bottom: 1px solid #fff;
	-ms-transform:translate(50px,-50px) rotate(-45deg);
        -webkit-transform:translate(50px,-50px) rotate(-45deg);
		-moz-transform:translate(50px,-50px) rotate(-45deg);
        transform:translate(50px,-50px) rotate(-45deg);
	opacity: 0;
}






#contbox ul li a .bgimg{
	display:block;
	width: 100%;
	height:0;
	padding-top: 120%;
		background-position:center;
		background-repeat:no-repeat;
		-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;
background-size:cover;

	-webkit-transform: scale(1.03);
    -moz-transform: scale(1.03);
    -o-transform: scale(1.03);
    -ms-transform: scale(1.03);
    transform: scale(1.03);

	-moz-transition: all 0.4s ease-out;
    -webkit-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}
#contbox ul li a .bgimg::after{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
	background-color: rgba(0,0,0,0.3);
	-moz-transition: all 0.4s ease-out;
    -webkit-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

@media all and (min-width: 769px) {
	#contbox ul li a:hover p span{font-style: italic; /*visibility: hidden;*/

	}
	#contbox ul li:hover{flex: 1.08; -webkit-flex: 1.08; }
	/*#contbox ul:hover li{width: 32%; }
	#contbox ul:hover li:hover{width: 36%; }*/
	#contbox ul li a:hover p{
		color:#FFF;
	}
	#contbox ul li a:hover p::before{

	-ms-transform:translate(0px,0px) rotate(-45deg);
        -webkit-transform:translate(0px,0px) rotate(-45deg);
		-moz-transform:translate(0px,0px) rotate(-45deg);
        transform:translate(0px,0px) rotate(-45deg);
	pointer-events: none;
	opacity: 0.5;
	-moz-transition: all .1s ease-out;
    -webkit-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    -ms-transition: all .1s ease-out;
    transition: all .1s ease-out;

}
	#contbox ul:hover .bgimg{padding-top: 125%;}
	#contbox ul li a:hover .bgimg{
		padding-top: 111.111111111111%;
 -webkit-transform: scale(1.00);
    -moz-transform: scale(1.00);
    -o-transform: scale(1.00);
    -ms-transform: scale(1.00);
    transform: scale(1.00);

}
	#contbox ul li a .bgimg::after{
	background-color: rgba(0,0,0,0.5);
	}
	#contbox ul li a:hover .bgimg::after{
	background-color: rgba(0,0,0,0.25);
}

}

@media all and (max-width: 480px) {
#contbox ul li p{ font-size:1.2em;}
}









#itembox{
	 width: 100%;
        height: auto;
        padding: 60px 0;
	position: relative;
}
#itembox .item-container {
        width: 100%;
        height: 100%;
        padding: 0;
	position: relative;
	overflow: hidden;
    }
#itembox .item-container .swiper-wrapper {
	padding: 0;

    }

#itembox .item-container .swiper-slide {
        text-align: center;
        background-color: #eee;
		height:auto;
		margin: 2px 0;
		padding:0;
		color:#fff;
	border: 1px solid #fff;
    }
#itembox .item-container .swiper-slide .itemimg{
					width:100%;
					height:0;
					padding-top: 100%;
					background-color: #fff;
					overflow: hidden;
		background-position:center;
		background-repeat:no-repeat;
		-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;
background-size:cover;
				}

				/* Arrows */
#itembox .item-container .swiper-button-prev{
	top:50%;
	left: 0;
  margin: 0;
	margin-top: -15px;
	width: 30px;
	height: 30px;
	background-color: #000;
}
#itembox .item-container .swiper-button-next {
	top:50%;
	right: 0;
  margin: 0;
	margin-top: -15px;
	width: 30px;
	height: 30px;
	background-color: #000;
}


#brandbox{
	margin: 0;
	padding: 0;
	width: 100%;
}

#brandbox ul{
	width: 100%;
	margin: 0;
	list-style:none;
	padding:0;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	-webkit-justify-content:space-between;
	justify-content:space-between;
}
#brandbox ul li{
	margin: 0;
	padding:0;
	float: left;
	width:49%;
	max-height: 400px;
	background-color:#E5E5E5;

	background-position:left center;
		background-repeat:no-repeat;
		-moz-background-size:auto 100%;
-webkit-background-size:auto 100%;
-o-background-size:auto 100%;
-ms-background-size:auto 100%;
background-size:auto 100%;

/* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
}
#brandbox ul li:first-child{
	background-image: url(../images/top/img_brand01.jpg);
}
#brandbox ul li:nth-child(2){
	background-image: url(../images/top/img_brand02.jpg);
}
#brandbox ul li.lrm{
	background-image: url(../images/top/img_brand03.jpg);
}

.webp #brandbox ul li:first-child{	background-image: url(../images/top/img_brand01.jpg.webp);}
.webp #brandbox ul li:nth-child(2){	background-image: url(../images/top/img_brand02.jpg.webp);}
.webp #brandbox ul li.lrm{	background-image: url(../images/top/img_brand03.jpg.webp);}

#brandbox ul li img{
	margin:10% -45% 10% 0;
	width:50%;
	height: auto;
	max-width: 240px;
}

#brandbox ul li a{
display: block;
width: 100%;
height: 100%;
	border:10px solid #e5e5e5;
}

@media all and (max-width: 600px) {
	#brandbox ul li a{ border-width: 5px;}
	#brandbox ul li img{margin:0 -47% 0 0;}
}
@media all and (max-width: 480px) {
	#brandbox ul li{ width: 100%;}
	#brandbox ul li:first-child{ margin-bottom: 15px;}
}





#instagrambox{
	margin: 40px 0 0;
	padding:4% 0 5%;
	width: 100%;
	background-color: #9C8D54;
	position: relative;
	overflow: hidden;
	background-image: url(../images/top/img_instagram.jpg);
	background-position:center;
		background-repeat:no-repeat;
		-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;
background-size:cover;
}

.webp #instagrambox{background-image: url(../images/top/img_instagram.jpg.webp);}

#instagrambox h2{
	position: relative;
	z-index: 20;
	color: #fff;
}
#instagrambox h4{
	width: 26%;
	top:48%;
	left: 3%;
	font-size: 1.5em;
	line-height: 2em;
	text-align: center;
	position: absolute;
	z-index: 20;
	color: #fff;
}
#instagrambox h4 a{
	background-color: rgba(0,0,0,0.6);
	font-size:  1em;
	padding: 0.1em 0.5em;
	font-family: 'Crimson Text', serif;
	text-decoration: none;
	color: #fff;
	border:1px solid #fff;
	-moz-transition: all .4s ease-out;
    -webkit-transition: all .4s ease-out;
    -o-transition: all .4s ease-out;
    -ms-transition: all .4s ease-out;
    transition: all .4s ease-out;
}
#instagrambox h4 a:hover{background-color: rgba(0,0,0,1);}
#instagrambox h4 a i{ font-size: 0.8em;}
#instagrambox h2::before{ border-color: #fff;}


#instagrambox::after{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
	background-color: rgba(0,0,0,0.4);
	z-index: 10;
	display: block;
}

#instagrambox ul{
	width: 60%;
	max-width: 900px;
	float:right;
	margin: 0;
	margin-right: 7%;
	position: relative;
	z-index: 20;
	list-style:none;
	padding:0;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	-webkit-justify-content:space-between;
	justify-content:space-between;
}
#instagrambox ul li{
	margin: 0;
	padding:0;
	width:23%;
	background-color:#E5E5E5;
}

#instagrambox ul li a{}
#instagrambox ul li a img{
width: 100%;
height: auto;
}
.instagram_muu{
width: 60%;
max-width: 1000px;
float:right;
margin: 0;
margin-right: 7%;
position: relative;
z-index: 20;
list-style:none;
padding:0;

}
@media all and (max-width: 600px) {
	#instagrambox ul li{	width:47%; margin-top: 6%;}
	#instagrambox h4{position: relative;width: 90%; text-align: right;}
}






	footer{
		width:100%;

		padding:0 0 15px;

	}
				footer .intro{
					text-align:center;
		width:86%;
		margin:2% auto 0;
		color:#303030;
	}

	footer .intro h2{
		letter-spacing:0.06em;
		font-size:1.6em;
		line-height:1;
		width:50%;
		margin:0 auto;
		font-weight:bold;
	}
	footer .intro p{
		color:#999;
		letter-spacing:normal;
		width:100%;
		text-align: center;
		white-space:nowrap;
		font-size:0.7em;
		margin:0px auto;
		line-height:1.5;
	}
footer .intro p br{display: none;}
	footer h2.flogo{
		width:80%;
		max-width: 260px;
		margin:0 auto;
	}
	footer .flogo img{
		width:100%;
		height:auto;
	}
footer .intro ul{
	margin: 10px 0 15px;
	padding: 0;
	list-style: none;
	text-align: center;
}
footer .intro ul li{
	padding: 0; margin: 0 10px; display: inline-block;
}
footer .intro ul li a{text-decoration: none; letter-spacing: 0.06em; font-style: italic;}
footer .intro ul li a:hover{color: #c93;}

		#pagetop {
width:100%;
height:80px;
	background-color: #F6F6F6;
text-align:center;
	margin:0px 0;
			padding: 0;
			padding-top: 50px;
	z-index:100;
	cursor:pointer;
	overflow:hidden;
	position:relative;

	transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
}
#pagetop span{
	position:absolute;
	width:0px;
	height:30px;
	top:15px;
	left:50%;
	border-left:1px solid #333;

	transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
}
#pagetop span::before{
	position: absolute;
	content: '';
	width:0px;
	height:30px;
	top:0;
	left:0;
	border-left:1px solid #333;
	-webkit-transform: translateX(-16px) rotate(45deg) translateY(-6px);
	-ms-transform:translateX(-16px) rotate(45deg) translateY(-6px);
	transform:translateX(-16px) rotate(45deg) translateY(-6px);
}
#pagetop span::after{
	position:absolute;
	content:'';
	width:0px;
	height:30px;
	top:0;
	right:0;
	border-right:1px solid #333;
	-webkit-transform: translateX(15px) rotate(-45deg) translateY(-6px);
	-ms-transform:translateX(15px) rotate(-45deg) translateY(-6px);
	transform:translateX(15px) rotate(-45deg) translateY(-6px);
}

@media all and (min-width: 768px) {
#pagetop span::before{
	position: absolute;
	content: '';
	width:0px;
	height:60px;
	top:0;
	left:0;
	border-left:1px solid #333;
	-webkit-transform: translateX(-31px) rotate(45deg) translateY(-12px);
	-ms-transform:translateX(-31px) rotate(45deg) translateY(-12px);
	transform:translateX(-31px) rotate(45deg) translateY(-12px);
	transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;

}
#pagetop span::after{
	position:absolute;
	content:'';
	width:0px;
	height:0px;
	top:0;
	right:0;
	border-right:1px solid #333;
	-webkit-transform: translateX(0px) rotate(-45deg) translateY(0px);
	-ms-transform:translateX(0px) rotate(-45deg) translateY(0px);
	transform:translateX(0px) rotate(-45deg) translateY(0px);
	transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;

}
#pagetop:hover{ background-color: #e4e4e4;}
#pagetop:hover span::before{
	position: absolute;
	content: '';
	width:0px;
	height:30px;
	top:0;
	left:0;
	border-left:1px solid #333;
	-webkit-transform: translateX(-16px) rotate(45deg) translateY(-6px);
	-ms-transform:translateX(-16px) rotate(45deg) translateY(-6px);
	transform:translateX(-16px) rotate(45deg) translateY(-6px);
}
#pagetop:hover span::after{
	position:absolute;
	content:'';
	width:0px;
	height:30px;
	top:0;
	right:0;
	border-right:1px solid #333;
	-webkit-transform: translateX(15px) rotate(-45deg) translateY(-6px);
	-ms-transform:translateX(15px) rotate(-45deg) translateY(-6px);
	transform:translateX(15px) rotate(-45deg) translateY(-6px);
}
}


		footer .copyright{
			font-size:0.72em;
			color:#303030;
					text-align:center;
		width:100%;
		margin:20px auto 3px;
		letter-spacing:0.06em;
	}

	@media all and (max-width: 768px) {

	footer .intro p br{display: block;}
}


#fade, #loader { display: block; }
header{ top:-50px;}
#section2,footer{ display: none;}
.indexTop .innerbox p,.indexTop .innerbox .pagenum{ opacity: 0;text-shadow:#FFF 0 0 10px ; color: transparent;}
#section1 #newsbox{ bottom: 0px; height: 0;}
#copyright{ display: none;}
#hlogo,#snsnav,#menuButton,.top-pagination{opacity:0;}

#psection1 h1{ opacity: 0;text-shadow: 0 0 10px #FFF; color: transparent;}