@charset "UTF-8";


main{
	position: relative;
	clear: both;
	overflow: hidden;
}

section{
	clear: both;
}

.w1380{
	position: relative;
}

main .pankuzu,
main h1{
}

.pageNav{
	position: absolute;
	width: 300px;
	z-index: 10;
}

body.fixed .pageNav.anchor{
	position: fixed;
	top: 120px;
}

.pageNav.anchor.fixed{
	position: fixed;
	top: 120px;
}

.pageNav.anchor.absolute{
    position: absolute !important;
    bottom: 0;
    top: inherit;
    left: 0;
}

.pageNav.tab{
    display: none;
}

h1.none{
	opacity: 0;
}

.pageNav.move{
	top: 0;
	left:calc(100% - 50% - 690px);
/*	position: fixed;*/
}

.pageNav.move.absolute{
    position: absolute !important;
    bottom: 0 !important;
    top: inherit !important;
}

.pageNav li{
	margin-top: 10px;
}

.pageNav li {
  opacity: 0;
  transition: all 1s ease 0s;	
}

.pageNav li.is-inview.empty{
	opacity: 0.5;
}

.pageNav li.is-inview.empty a{
	cursor: default;
}

/* フェードイン(スクロールした後) */
.pageNav li.is-inview {
    opacity: 1;
}

.pageNav li:nth-child(1){
    transition-delay: 0s;
}

.pageNav li:nth-child(2){
    transition-delay: 0.2s;
}

.pageNav li:nth-child(3){
	transition-delay: 0.4s;
}

.pageNav li:nth-child(4){
	transition-delay: 0.6s;
}

.pageNav li:nth-child(5){
	transition-delay: 0.8s;
}

.pageNav li:nth-child(6){
	transition-delay: 1s;
}

.pageNav li:nth-child(7){
	transition-delay: 1.2s;
}

.pageNav li:nth-child(8){
	transition-delay: 1.4s;
}

.pageNav li:nth-child(9){
	transition-delay: 1.6s;
}

.pageNav li:nth-child(10){
	transition-delay: 1.8s;
}

.pageNav li.none{
	display: none;
}

.pageNav li a{
	border: 1px solid #999;
	padding: 15px 0;
	color: #333333;
    font-size: 18px;
	display: block;
	text-align: center;
	line-height: 1.2;
	background: #fff;
}

.pageNav li.active a{
	color: #fff;
	background: #999999;
}

.contents{
}

.contents:after{
  content: "";
  clear: both;
  display: block;
}	
.main{
	opacity: 0;
}

.main.is-inview{
	padding-top: 0;
    opacity: 1;
    transition: opacity 3s, transform 0s;
}

.bl{
	margin-bottom: 100px;
	max-width: 1020px;
	padding-top: 40px;
	position: relative;
	overflow: hidden;
	margin-left:360px ;
	clear: both;
}

.bl:last-child{
	min-height: 100vh;
	padding-bottom:0;
	margin-bottom: 0;
}

.bl .img{
	margin-bottom: 30px;
}

.bl h2{
	margin-bottom: 30px;
	font-size: 30px;
	display: table;
	line-height: 1.4;
}

.bl h2 span{
	min-width: 160px;
	display: table-cell;
	vertical-align: middle;
}

.bl h2 span:nth-child(2){
	font-size: 18px;
	padding-left: 10px;
}

.bl p{
	line-height: 2;
	font-size: 18px;
}

/* swiper */
.swiper{
	padding: 0 39px;
}

.swiper-pagination{
	right: 0;
	top: 15px;
	text-align: right;
	font-size: 30px;
	color: #999999;
	padding-right: 40px;
	font-family: 'Arial';
	letter-spacing: -0.1em;
}

.swiper-pagination .swiper-pagination-current{
	font-size: 60px;
}

.swiper-button-prev{
	left: -1%;
}

.swiper-button-next{
	right: -1%;
}

.swiper-button-prev,
.swiper-button-next{
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 1;
  cursor: pointer;
  color: #000;
  width: 50px;
  height: 50px;
  background: rgba(0,0,0,0);
  border: none;
  border-radius: 100%;
}

.swiper-button-prev::after, 
.swiper-button-next::before,
.swiper-button-next::after, 
.swiper-button-prev::before {
    display: block;
    content: " ";
    position: absolute;
	margin: 7px 0 0;
    top: 16px;
    left: 25px;
    width: 1px;
    height: 25px;
    background: #000;
}	

.swiper-button-prev:before{
     margin:9px 0 0;
     -webkit-transform:rotate(-45deg);
     -ms-transform:rotate(-45deg);
     transform:rotate(-45deg)
}

.swiper-button-prev:after{
     margin:-9px 0 0;
     -webkit-transform:rotate(45deg);
     -ms-transform:rotate(45deg);
     transform:rotate(45deg)
}

.swiper-button-next:after{
     margin:9px 0 0;
     -webkit-transform:rotate(45deg);
     -ms-transform:rotate(45deg);
     transform:rotate(45deg)
}

.swiper-button-next:before{
     margin:-9px 0 0;
     -webkit-transform:rotate(-45deg);
     -ms-transform:rotate(-45deg);
     transform:rotate(-45deg)
}

.swiper-button-next, 
.swiper-button-prev{
	top: 380px
}

.bl.slide{
	position: relative;
	margin-left: 0;
	float: right;
	max-width: 1100px;
	margin-right: -40px;
}

.bl.slide h2{
	padding-right: 70px;
}

@media only screen and (max-width: 1500px) {
	.bl.slide {
	  width: calc(100% - 280px);
	}
}

@media only screen and (max-width: 1380px) {
    .pageNav {
		width: 20%;
    }
	
	.pageNav.anchor.fixed {
		width:calc(calc(100% - 120px) * 0.2);
    }
	
	.pageNav.anchor.fixed.absolute {
    	width: 20%;
	}
	
	.bl {
        margin-left: calc(20% + 60px);
    }
	
	.bl.slide {
        width: calc(100% - 20% + 20px);
		max-width: inherit;
    }
	
}

@media only screen and (max-width: 1000px) {
	
    .pageNav.move {
        left: 30px;
    }
	
	.pageNav.anchor.fixed {
		width:calc(calc(100% - 60px) * 0.2);
	}
	
	.pageNav li a {
        font-size: 14px;
    }
	
	.bl {
        margin-left: calc(20% + 60px);
    }
	
	.bl.slide {
        width: calc(100% - 20% + 20px);
		max-width: inherit;
    }
	
    .bl h2{
        margin-bottom: 15px;
        font-size: 20px;
    }

    .bl h2 span{
	    min-width: 120px;
    }

    .bl h2 span:nth-child(2){
        font-size: 14px;
        padding-left: 5px;
    }
	
	.bl .img {
        margin-bottom: 15px;
    }
	
	.bl p {
        line-height: 2;
        font-size: 14px;
    }
	
	
    /* swiper */
    .swiper-pagination{
        top: 15px;
        font-size: 20px;
        padding-right: 40px;
    }

    .swiper-pagination .swiper-pagination-current{
        font-size: 40px;
    }

    .swiper-button-prev::after, 
    .swiper-button-next::before,
    .swiper-button-next::after, 
    .swiper-button-prev::before {
        margin: 7px 0 0;
        top: 16px;
        left: 25px;
        height: 15px;
    }	

    .swiper-button-prev:before{
         margin:5px 0 0;
    }

    .swiper-button-prev:after{
         margin:-5px 0 0;
    }

    .swiper-button-next:after{
         margin:5px 0 0;
    }

    .swiper-button-next:before{
         margin:-5px 0 0;
    }

    .swiper-button-next, 
    .swiper-button-prev{
        top: 250px
    }
	
	.swiper-button-prev{
        left:0;
    }

    .swiper-button-next{
        right:0;
    }

    .bl.slide{
        margin-left: 0;
        float: right;
        max-width: 1100px;
        margin-right: -40px;
    }

    .bl.slide h2{
        padding-right: 70px;
    }
	
}

@media only screen and (max-width: 768px) {
    .sec main {
      padding: 70px 0 0;
    }

    h1.none{
        opacity: 1;
    }

    .pageNav.anchor{
        width: 100%;
        left: 0;
        text-align: center;
		position: fixed;
    }

	.pageNav.anchor li a {
        padding: 5px 10px;
        font-size: 13px;
        letter-spacing: 0;
    }

    .pageNav.anchor.fixed {
        width: 100%;
        left: 0;
        position: fixed;
        top: 75px;
        padding: 0;
        z-index: 100;
    }

    .pageNav.anchor.fixed.absolute {
      width: 100%;
      left: 0;
      position: fixed !important;
      height: 100px;
    }

    .pageNav.anchor li{
        margin: 0.7% 0.9%;
        display: inline-block;
        line-height: 1;
    }

    .pageNav.anchor li.none{
        display: none !important;
    }

    .pageNav.anchor li a{
        padding: 7px 10px;
        font-size: 14px;
        font-weight: normal;
        display: inline-block;
    }

    .bl{
        margin-left:0;
        padding-top: 0;
        height: inherit !important;
        overflow: hidden;
		margin-bottom: 0;
    }
	
    .bl:first-child{
        padding-top: 35vw;
    }
	
    .bl,
	.bl:last-child{
        padding-top: 38vw;
		min-height: 100vh !important;
    }

    .bl.slide {
        width:calc(100% + 60px);
        max-width: inherit;
		margin-left: -30px;
		margin-right: -30px;		
        float: inherit;
    }

    .bl:last-child{
        padding-bottom: 0;
    }

    .bl h2{
        margin-bottom: 10px;
        font-size: 18px;
        display: block;
        padding-top: 0 !important;
        line-height: 1.4;
    }

    .bl h2 span:nth-child(2){
        font-size: 12px;
        padding-left: 0;
    }

    .bl p{
        line-height: 1.8;
        font-size: 12px;
    }

    /* swiper */
    .swiper{
        padding: 0 30px ;
    }

    .swiper-pagination{
        top: 36vw;
        font-size: 16px;
        padding-right: 30px;
    }

    .swiper-pagination .swiper-pagination-current{
        font-size: 30px;
    }

    .swiper-button-next, 
    .swiper-button-prev{
        top: 80vw;
    }
	
	.swiper-button-prev::after, 
	.swiper-button-next::before, 
	.swiper-button-next::after, 
	.swiper-button-prev::before {
        height: 10px;
    }
	
    .swiper-button-prev:before{
         margin: 3px 0 0;
    }

    .swiper-button-prev:after{
         margin:-3px 0 0;
    }

    .swiper-button-next:after{
         margin:3px 0 0;
    }

    .swiper-button-next:before{
         margin:-3px 0 0;
    }	

    .swiper-button-prev{
        left: -1%
    }

    .swiper-button-next{
        right:-1%;
    }

    .bl.slide h2{
        padding-right: 50px;
    }	
}