@charset "utf-8";
/* CSS Document */

.outer{
	position: fixed;
	top:120px;
	right: 10px;
	min-height:100vh;
	z-index:999;
}
.inner{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

	overflow: visible;
	/*writing-mode: tb-rl;*/
	display: inline-block;
	-webkit-transform: rotateZ(-90deg);
	
	
	transform-origin:0% 100%;
	/*transform-origin:0 100%;*/
	/*background: #AACAD7;*/
	white-space: nowrap;
}
.inner ul li a{ display:inline-block; color:#fff; margin:0 24px 0 0; font-size:12px; letter-spacing:0.1em;}
.inner ul li a:last-child{ margin:0 0 0 0;}
.rotate { -webkit-transform: rotate(180deg); }
/*ul { list-style: none; padding: 0; margin: 0; white-space: nowrap; }
ul li { padding: 5px 10px; }*/

/*-----右メニュー-----*/

#menu-right{
	position:fixed;
	right:0;
	/*right:30px;*/
	z-index:9999;
	width:60px;
	min-height:100vh;
	background-color: #fff;
}
#menu-right ul{

	-webkit-transform: rotateZ(90deg);
  transform-origin: 0 100%;
  white-space: nowrap;;
	}
#menu-right ul li{
	

}
#menu-right ul li a{
    /*-moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);*/
	}

.menu-left-business{
	background-image:url(../img/bg-menuleft.jpg);
}
.menu-left-business a:after{
	content: '';
    position: absolute;
    background-size: 100%;
    background-image: url(../../img/bt-top2.png);
    background-repeat: no-repeat;
    display: inline-block;
    width: 16px;
    height: 160px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
	}

#pp-nav{ display:none;}
/*
#menu-business{
	margin:0 auto 40px;
	padding:0;
	text-align:center;
	width:100%;}
#menu-business ul{ overflow:hidden; margin:0 -1% 0 0;}
#menu-business ul li{
	position:relative;
	float: left;
    width: 24%;
    margin: 0 1% 0 0;
    border: solid 1px #fff;
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;}
#menu-business ul li:after {
    content: '';
    background-image: url(../../img/nav-yaji01.png);
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    display: inline-block;
    width: 8px;
    height: 12px;
    left: 16px;
    top: 16px;
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
#menu-business ul li a{
	font-size:13px;
	letter-spacing:0;
	color:#fff;
	background-color: rgba(0, 0, 0, 0.3);
    padding: 12px 10px 10px;
    display: block;
	-webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;}
#menu-business ul li.active{ background-color:#d0111a; color:#fff;}
#menu-business ul li a:hover{ background-color:#d0111a; color:#fff;}

.business-title{ margin:0 0 60px 0;}
.business-title img{ width:280px;}

.box-business-slide{ background-color: rgba(0, 0, 0, 0.6); padding: 30px; position:relative; }
.business-slide-cont ul{
	overflow:hidden;
	font-size: 16px;
    letter-spacing: 2px;
    line-height: 26px;
    margin: 0 auto;
    text-align: justify;
	word-break: break-all;
	width:100%;
	font-weight:200;
	}
.business-slide-cont ul li{ float:left; width:48%; margin:0 4% 0 0;}
.business-slide-cont ul li:last-child{ margin:0 0 0 0;}
.business-slide-cont ul li span{ display:block; margin:0 auto 10px;}
.business-slide-cont ul li span.attention{ font-size:12px; line-height:16px;}

.swiper-button-next{
	display: inline-block !important;
	background: none !important;
	position:relative !important;
	width: auto !important;
    height: auto !important;
	margin: 30px auto 0 !important;
	right: auto !important;
	line-height: 100% !important;
	outline : none;
	}
.swiper-button-next img{ width:100px; }

.business-txt{
    background-color: rgba(0, 0, 0, 0.5);
    padding: 30px;
    font-size: 14px;
    letter-spacing: 2px;
    line-height: 22px;
    margin: 0 auto 40px;
    text-align: justify;
}
.business-txt span{ display:block; text-align:center; margin: 16px 0 0 0;}
.business-txt span a{ display:inline-block;}
.business-txt span a img{ width:100px;} 
.business-title-jp{ font-size:32px; position:relative; margin:0 auto 16px; padding:0 0 16px 0;}
.business-title-jp:after {
    position: absolute;
    bottom: 0;
    left: 50%;
    content: "";
    width: 140px;
    height: 4px;
    margin-left: -70px;
    background-color: #d0111a;
}
.business-title-eng{ font-size:16px; margin:0 auto 36px;}
.business-number {
    font-family: 'Open Sans', sans-serif;
    font-size: 30px;
    line-height: 30px;
    color: #fff;
}
.business-number span {
    font-size: 60px;
    font-weight: bold;
}
*/
.button::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  background: rgba(0, 0, 0, 0.3);
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
	/*-webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;*/
}
.button:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.top-main-subtitle{ font-family: 'Barlow Condensed', sans-serif; font-size:18px; letter-spacing:0.1em; line-height:1; margin:0 auto 30px; }
.top-main-title{ font-family: 'Barlow Condensed', sans-serif; font-size:90px; letter-spacing:0.05em; line-height:1; position:relative; padding:0 0 50px 0; margin:0 auto 40px; }
.top-main-title:after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    width: 50px;
    height: 1px;
    background-color: #fff;
}
.top-basic-title{ font-family: 'Barlow Condensed', sans-serif; font-size:80px; letter-spacing:0.05em; line-height:1; margin:0 auto 30px; position:relative; }
.txt-box-title{ font-family: 'Barlow Condensed', sans-serif; font-size:60px; letter-spacing:0.05em; line-height:1; margin:0 auto 40px !important; position:relative; color:#fff;}
.top-basic-txt {
    font-size: 18px;
    line-height: 2;
	text-align:justify;
    letter-spacing: 0.1em;
	margin:0 auto 60px;
}
.top-basic-btn{ display:inherit; }
.top-basic-btn a{ width:300px; border:solid 1px #fff; padding:20px; display:inline-block; color:#fff; font-family: 'Barlow Condensed', sans-serif; font-size:20px;
		    background: linear-gradient(to right, #ffffff 50%, rgba(255, 255, 255, 0) 0%); position:relative;
  		background-size: 200% 100.5%;
  		background-position: right bottom;
  		transition: all 0.5s ease-out;
    	-webkit-box-sizing: border-box !important;
    	-moz-box-sizing: border-box !important;
    	box-sizing: border-box !important;}
.top-basic-btn a:hover {
  background-position: left bottom;
  color: #000;
}
.top-basic-btn a:after {
    position: absolute;
    display: inline-block;
    content: '';
    background-image: url(../img/ic-yaji.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    right: 20px;
    top: 50%;
    transform: translate(0, -50%);
    width: 36px;
    height: 8px;
    z-index: 10;
}
.top-basic-btn a:hover:after{ background-image: url(../img/ic-yaji-black.png); }


#section1 .intro{
		width:88%;
		margin:80px auto 0;
		position: relative;
		color:#fff;
		text-align: left;
    	-webkit-box-sizing: border-box !important;
    	-moz-box-sizing: border-box !important;
    	box-sizing: border-box !important;
    }
	
#section1 .section1-cont{ width:90%; /*margin:0 auto;*/ }

#section2 .section2-cont{ width:90%; position:relative; }
#section2 .intro{
		width:88%;
		margin:80px auto 0;
		position: relative;
		color:#fff;
		text-align: left;
    }
.top-slide-title{ font-family: 'Barlow Condensed', sans-serif; font-size:70px; letter-spacing:0.05em; line-height:1; margin:0 auto 30px; position:absolute; z-index:100; left:0; top:0; }

#section3 .section3-cont{ width:90%;}
#section3 .intro{
		width:88%;
		margin:80px auto 0;
		position: relative;
		color:#fff;
		text-align: left;
    }

#section4 .section4-cont{ width:90%;}
#section4 .intro{
		width:88%;
		margin:80px auto 0;
		position: relative;
		color:#fff;
		text-align: left;
	}

#section5 .section5-cont{ width:90%; }
#section5 .intro{
		width:88%;
		margin:80px auto 0;
		position: relative;
		color:#fff;
		text-align: left;
    }
#section6 .section6-cont{ width:100%; }
#section6 .intro{
		width:88%;
		margin:80px auto 0;
		position: relative;
		color:#fff;
		text-align: left;
    }
	
.txt-box{ font-size: 20px; line-height: 1;position:absolute; left:6%; top:10%; z-index:10000; text-align:left;}
.txt-box p{ margin: 0 auto 24px; } 
.txt-box p span{ display:inline-block; /*background-color: #000;*/ color:#fff;}
.txt-box p br{ display:none;}

#section7 .section7-cont{ width:100%; position:relative; min-height: 100vh; /*text-align:left;*/}
.section7-cont-inner{ width:100%; background-color:#fff; padding: 40px 0 0 0;
	position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);}
.section7-cont-foot{ margin:0 auto; /*width:70%;*/ font-size:14px; display: inline-block;}
.section7-cont-foot ul{ overflow:hidden; text-align:left;}
.section7-cont-foot ul li{ float:left; margin:0 50px 0 0;}
.section7-cont-foot ul li:last-child{ margin:0 0px 0 0;}
.section7-cont-foot ul li p{ margin:0 auto 16px;}
.foot-info{ display:block; }
.foot-info p img{ width:76px;}

.foot-lnk p a{ color:#000;}
.foot-lnk p a:hover{ text-decoration:underline;}

.foot-sns p{ display:inline-block; }
.foot-sns p img{ width:38px; margin:0 16px 0 0;}
.foot-copy{ text-align:center; font-size:12px; letter-spacing:0.1em; padding:40px 0;}
	
.slide-head{ width:100%; position:relative;}
.slide-txt{
    position: absolute;
    display: inline-block;
    content: '';
    left: 5%;
    /*transform: translate(-50%, -50%);*/
    top: 8%;
	color:#000;
	font-size:30px;
    z-index: 10;
}
.bg_fixed1 {
    min-height: 100% !important;
    /*display: table-row;
    table-layout: fixed;
    background-image: url(../img/main_img.jpg); */
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 1;
}

	/* Backgrounds will cover all the section
	* --------------------------------------- */
	#section1,
	#section2,
	#section3,
	#section4,
	#section5,
	#section6,
	#section7{
		background-size: cover;
		-webkit-background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		overflow:hidden;
		min-height:100vh;
	}
	/* Defining each section background and styles
	* --------------------------------------- */
#section1{ background-image: url(../img/bg-main.jpg);}
#section2{ background-color:#000;}
#section3{ background-image: url(../img/bg-straight.jpg);}
#section4{ background-image: url(../img/bg-dope.jpg);}
#section5{ background-image: url(../img/bg-remix.jpg);}
#section6{ background-image: url(../img/bg-egos.jpg);}
#section7{ background-image: url(../img/bg-foot.jpg);}
/*#section7{background-image: url(../img/bg-footer.jpg);}*/

	/* Overwriting fullPage.js tooltip color
	* --------------------------------------- */
	#pp-nav.custom .pp-tooltip{
		color: #AAA;
	}


.intro{ text-align:center; position: relative;}


@media only screen and (max-width: 1440px) {

/*#menu-left{ width:100px;}
#menu-left a:after{ width: 14px;}*/
.business-slide-cont ul{ font-size: 14px; }

#menu-business ul li a { font-size: 12px; padding: 10px 10px 8px;}
#menu-business ul li:after {
    width: 6px;
    height: 10px;
    left: 14px;
    top: 14px;}
.business-title {
    margin: 0 0 40px 0;
}
.business-title img {width: 240px;}
.business-number {
	margin:0 auto 60px;
}
#section1 .intro { width: 80%; margin: 60px auto 40px; }
#section1 .section1-cont{ width:90%; }
#section2 .intro { width: 80%; margin: 60px auto 40px; }
#section2 .section2-cont{ width:90%; }
#section3 .intro { width: 80%; margin: 60px auto 40px; }
#section3 .section3-cont{ width:90%; }
#section4 .intro { width: 80%; margin: 60px auto 40px; }
#section4 .section4-cont{ width:90%; }
#section5 .intro { width: 80%; margin: 60px auto 40px; }
#section5 .section5-cont{ width:90%; }
#section6 .intro { width: 80%; margin: 60px auto 40px; }
#section6 .section6-cont{ width:90%; }
	
}

@media only screen and (max-width: 1024px) {

/*#menu-left{ width:80px;}
#menu-business ul { margin: 0 -2.5% 0 0; }
#menu-business ul li { width: 47.5%; margin: 0 2.5% 2.5% 0;}
.business-title img { width: 200px; }
.business-txt { font-size: 13px; }
.business-title-jp{ font-size: 28px; }
.business-number {margin:0 auto 50px;}
.business-number span { font-size: 50px; }
.business-slide-cont ul li{ float:inherit; width:100%; margin:0 0 0 0;}*/

#section1 .intro { width: 70%; margin: 50px auto 40px; }
#section1 .section1-cont { width: 90%;}
#section2 .intro { width: 70%; margin: 50px auto 40px; }
#section2 .section2-cont { width: 90%;}
#section3 .intro { width: 70%; margin: 50px auto 40px; }
#section3 .section3-cont { width: 90%;}
#section4 .intro { width: 70%; margin: 50px auto 40px; }
#section4 .section4-cont { width: 90%;}
#section5 .intro { width: 70%; margin: 50px auto 40px; }
#section5 .section5-cont { width: 90%;}
#section6 .intro { width: 70%; margin: 50px auto 40px; }
#section6 .section6-cont { width: 90%;}
	
}

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

#menu-business ul li a {font-size: 11px;}

#section1 .intro { width: 80%; margin-left: 15%;}
#section2 .intro { width: 80%; margin-left: 15%;}
#section3 .intro { width: 80%; margin-left: 15%;}
#section4 .intro { width: 80%; margin-left: 15%;}
#section5 .intro { width: 80%; margin-left: 15%;}
#section6 .intro { width: 80%; margin-left: 15%;}

.top-basic-btn a { width: 240px; padding: 15px;}

}

@media only screen and (max-width: 480px) {

.top-main-title {font-size: 60px; padding:0 0 34px 0;}
.top-main-subtitle { font-size: 14px; margin: 0 auto 16px; }
.top-basic-title { font-size: 60px; margin: 0 auto 24px;     line-height: 0.8;}
.txt-box-title { font-size: 40px !important; margin: 0 auto 24px !important; line-height: 0.8;}
.top-slide-title{ font-size: 40px !important; }
.top-basic-txt{ font-size: 13px; line-height: 1.6; margin: 0 auto 40px;}
.top-basic-txt span{ display:block; }
.top-basic-txt span br{ display:none; }
/*.top-basic-txt br{ display:none;}*/
.top-basic-btn a{ width:160px; padding:12px; font-size:16px;}
.top-basic-btn a:after {
    width: 24px;
    height: 5px;
}
/*
#menu-business{ margin: 0 auto 24px; }
#menu-business ul li a span{ display:block;}
#menu-business ul li a { font-size: 10px; line-height: 14px; padding: 8px; }
#menu-business ul li:after {
    width: 5px;
    height: 9px;
    left: 12px;
    top: 18px;
}
.business-slide-cont ul{ font-size: 12px; line-height:20px; letter-spacing:1px; }

.business-number { margin:0 auto 30px; font-size:16px;}
.business-number span { font-size: 30px; }
.business-title img { width: 160px; }
.business-title-jp{ font-size: 20px; margin: 0 auto 12px; padding: 0 0 12px 0;}
.business-title-jp:after { width: 120px; height: 2px; margin-left: -60px;}
.business-title-eng { font-size: 10px; letter-spacing: 2px; margin: 0 auto 24px;}
.business-txt { font-size: 11px; line-height: 20px;}
.business-txt span a img { width: 70px; }*/

.swiper-button-next{ margin: 16px auto 30px !important; }

#section1 .intro { margin: 24px auto 60px; width: 90%; }
#section2 .intro { margin: 24px auto 60px; width: 90%; }
#section3 .intro { margin: 24px auto 60px; width: 90%; }
#section4 .intro { margin: 24px auto 60px; width: 90%; }
#section5 .intro { margin: 24px auto 60px; width: 90%; }
#section6 .intro { margin: 24px auto 60px; width: 90%; }

#section1{background-image: url(../img/bg-main-sp.jpg);}
#section3{background-image: url(../img/bg-straight-sp.jpg);}
#section4{background-image: url(../img/bg-dope-sp.jpg);}
#section5{background-image: url(../img/bg-remix-sp.jpg);}
#section6{background-image: url(../img/bg-egos-sp.jpg);}

.section7-cont-foot {
    margin: 20px auto !important;
    padding: 0 0 60px 0;
    width: 90%;}
.section7-cont-inner {
	background-color:#000;
	color:#fff;
    width: 100%;
	height:auto;
    padding: 0;}
.section7-cont-foot ul li {
    float: none;
    display: block;
    margin: 0 0 12px 0;
}
.foot-info{ display:none !important;}
.foot-lnk p a { color: #fff; font-size: 12px; }
.section7-cont-foot ul li p { margin: 0 auto 4px; }
.foot-sns p img { width: 24px; margin: 0 6px 0 0; }
.foot-copy {
    font-size: 10px;
	color:#fff;
    letter-spacing: 0em;
    padding: 20px 0 0 0;
    margin: 0 0 40px 0;
    text-align: left;
}
/*#menu-left { width: 60px; }*/
/*
#menu-left a:after { width: 12px; }
#menu-business{ display:none;}
.business-title img { width: 160px; }
.business-title-jp{ font-size: 24px;}
.business-title-eng { font-size: 12px; letter-spacing: 2px;}
.business-txt { font-size: 11px; line-height: 20px;}
#section1 .intro { width: 82%; padding: 0 0 0 10%;}
#section2 .intro { width: 82%; padding: 0 0 0 10%;}
#section3 .intro { width: 82%; padding: 0 0 0 10%;}
#section4 .intro { width: 82%; padding: 0 0 0 10%;}*/
.txt-box{ font-size: 13px; line-height: 130%; top:6%;}
.txt-box p{ margin: 0 auto 16px; }
.txt-box p br{ display:inherit;}

}