@charset "UTF-8";
/* CSS Document */
body{
	margin: 0px !important;
	overscroll-behavior: none;
}
h1,h2,h3,h4,h5,h6{margin: 0;}
ul {
    display: block;
    list-stslideyle-type: disc;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
}
*{
    min-height: 0;
    min-width : 0;
}
#bl{
    padding: 0;
    margin: 0 auto;
    font-size: 11px;
	width: 100%;
    box-sizing: border-box;
    color: #111;
	background: #fff;
    -webkit-text-size-adjust: 100%;
	line-height: 0;
}
#bl a {
	text-decoration: none;
	color: #2b2b2b;
}
#bl p {
    margin: 0;
}
#bl　a:hover {
	opacity: 1;
}
#bl .clear{
	clear: both;
}
#bl img{
    width: 100%;
    line-height: 0;
}
#bl ul,#bl li {
	list-style: none;
	padding: 0;
	margin: 0;
}



/**
   bl_header
*******************************************************/
#bl #bl_header {
	position: fixed;
	top: 0;
}
#bl #bl_header .wrapper {
	position: relative;
}
#bl #bl_header .wrapper .header_inner div {
	width: 100%;
}
#bl #bl_header .wrapper .ttl {
	position: absolute;
    width: 40%;
    top: 44%;
    left: 6%;
}


@media only screen and (min-width: 769px) {
	#bl #bl_header {
		width: 100%;
	}
	#bl #bl_header .wrapper .header_inner {
		
	}
	#bl #bl_header .wrapper .header_inner {
		
	}
	#bl #bl_header .wrapper .ttl {
		width: 22%;
        max-width: 280px;
        top: 24%;
	}
}



/**
   contents
*******************************************************/
#bl #contents {
	width: 100%;
    position: relative;
    background: #fff;
    margin-top: 69vh;
	padding-top: 24%;
}
#bl #contents section {
	margin: 18% auto 0;
	overflow: hidden;
}
#bl #contents section .box {
	position: relative;
}
#bl #contents section .box .text {
	position: absolute;
}
#bl #contents section .box .no {
	position: absolute;
	width: 34px;
}
#bl #contents section .credit {
	margin: 8% auto 0; 
}
#bl #contents section .credit {
	position: relative;
	margin-bottom: 4px;
}
#bl #contents section .credit a {
	font-size: 9px;
	color: #fff;
	font-family: ltc-bodoni-175, serif;
	font-style: normal;
	font-weight: 400;
	line-height: 2.0;
	letter-spacing: .5px;
}
#bl #contents section .credit a.nolink {
	color: #ffffffa1;
}
#bl #contents section .credit a.nolink:after {
	position: relative;
	content: none;
}


@media only screen and (min-width: 769px) {
	#bl #contents {	
		margin-top: 86vh;
		padding-top: 80px;
	}
	#bl #contents section {
		margin: 180px auto 0;
	}
	#bl #contents section .credit a {
		font-size: 11px;
		margin-bottom: 6px;
	}
}


/**
   1
*************************************************/
#bl #contents section:nth-of-type(1) {
	margin: 6% auto 0;
}
#bl #contents section:nth-of-type(1) .text {
	width: 52%;
    margin: 0 auto;
}

#bl #contents section:nth-of-type(1) .box:nth-of-type(2) {
	width: 66%;
    margin: 2% auto 22%;
}
#bl #contents section:nth-of-type(1) .box:nth-of-type(3) {
	width: 100%;
    margin: 0 auto;
}
#bl #contents section:nth-of-type(1) .flex {
	background: linear-gradient(180deg, #111 0%, #111 84%, #fff 84%, #fff 100%);
}
#bl #contents section:nth-of-type(1) .flex .box:nth-of-type(2) {
	display: block;
	width: 66%;
    margin: 0 auto; 
	padding: 24% 0 0;
}
#bl #contents section:nth-of-type(1) .flex .box:nth-of-type(2) video {
	width: 100%;
}

@media only screen and (min-width: 769px) {
	#bl #contents section:nth-of-type(1) .text {
		width: 38%;
		max-width: 340px;
		margin: 0 auto;
	}
	#bl #contents section:nth-of-type(1) .box:nth-of-type(2) {
		width: 32%;
		margin: 2% auto 160px;
	}
	#bl #contents section:nth-of-type(1) .flex {
		display: flex;
        justify-content: space-between;
		align-items: stretch;
	}
	#bl #contents section:nth-of-type(1) .flex .box {
		width: 50%;
	}
	#bl #contents section:nth-of-type(1) .flex .box:nth-of-type(2) {
		background: #111;
		width: 50%;
		position: relative;
		margin: 0;
	}
	#bl #contents section:nth-of-type(1) .flex .box:nth-of-type(2) video {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		width: 50%;
	}
}


/**
   2
*************************************************/
#bl #contents section:nth-of-type(2) {
	margin: 26% auto 0;
	overflow:visible;
}
#bl #contents section:nth-of-type(2) .box:nth-of-type(1) {
	width: 100%;
    margin: 2% auto 22%;
}
#bl #contents section:nth-of-type(2) .box:nth-of-type(2) {
	width: 70%;
    margin: 2% auto 22%;
	position: sticky;
	top: 0;
}
#bl #contents section:nth-of-type(2) .box:nth-of-type(3) {
	width: 52%;
    margin: 0 auto 22%;
	position: sticky;
	top: 0;
}
#bl #contents section:nth-of-type(2) .box:nth-of-type(4) {
	width: 100%;
    margin: 0 auto;
    padding-bottom: 0%;
    background: #fff;
}
#bl #contents section:nth-of-type(2) .box:nth-of-type(5) {
	width: 100%;
    margin: 0 auto;
    padding-bottom: 38%;
    background: #fff;
}



@media only screen and (min-width: 769px) {
	#bl #contents section:nth-of-type(2) {
		margin: 240px auto 0;
	}
	#bl #contents section:nth-of-type(2) .box:nth-of-type(1) {
		width: 42%;
		margin: 0 auto 200px;
	}
	#bl #contents section:nth-of-type(2) .box:nth-of-type(2) {
		width: 32%;
		margin: 0 auto 200px;
		position: relative;
	}
	#bl #contents section:nth-of-type(2) .box:nth-of-type(2) {
		width: 32%;
		margin: 0 auto 200px;
		position: relative;
	}
	#bl #contents section:nth-of-type(2) .flex {
		display: flex;
		align-items: center;
        justify-content: space-between;
		position: sticky;
		top: 0;
	}
	#bl #contents section:nth-of-type(2) .flex .box {
		width: 44%;
		margin: 0;
	}
	#bl #contents section:nth-of-type(2) .box:nth-of-type(7) {
		width: 26%;
		margin: 0 auto 15%;
		position: sticky;
		top: 10%;
	}
	#bl #contents section:nth-of-type(2) .box:nth-of-type(9) {
		padding-top: 180px;
		background: #fff;
	}
	
}



/**
   3
*************************************************/
#bl #contents section:nth-of-type(3) {
	margin: 24% auto 0;
}
#bl #contents section:nth-of-type(3) .parent {
	position: relative;
}
#bl #contents section:nth-of-type(3) .parent .box:nth-of-type(1) {
	width: 76%;
    margin: 0 auto 0 0;
}
#bl #contents section:nth-of-type(3) .parent .box:nth-of-type(2) {
	position: absolute;
    width: 46%;
    right: 0%;
    top: 68%;
    margin: 0 !important;
}
#bl #contents section:nth-of-type(3) .box:nth-of-type(2) {
	width: 68%;
    margin: 48% auto 0;
}
#bl #contents section:nth-of-type(3) .box:nth-of-type(3) {
	width: 100%;
    margin: 48% auto 0;
}

@media only screen and (min-width: 769px) {
	#bl #contents section:nth-of-type(3) {
		margin: 240px auto 0;
	}
	#bl #contents section:nth-of-type(3) .parent {
		width: 70%;
		margin: 0 auto;
		max-width: 800px;
	}
	#bl #contents section:nth-of-type(3) .box:nth-of-type(2) {
		width: 38%;
		margin: 420px auto 0;
	}
	#bl #contents section:nth-of-type(3) .box:nth-of-type(3) {
		width: 50%;
		margin: 300px auto 0;
	}
}



/**
   4
*************************************************/
#bl #contents section:nth-of-type(4) {
	margin: 24% auto 0;
}
#bl #contents section:nth-of-type(4) .grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(4, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}
#bl #contents section:nth-of-type(4) .grid .box:nth-of-type(1) {
	grid-area: 1 / 1 / 2 / 2;
}
#bl #contents section:nth-of-type(4) .grid .box:nth-of-type(2) {
	grid-area: 1 / 2 / 2 / 3;
}
#bl #contents section:nth-of-type(4) .grid .box:nth-of-type(3) {
	grid-area: 1 / 3 / 2 / 4;
}
#bl #contents section:nth-of-type(4) .grid .box:nth-of-type(4) {
	grid-area: 2 / 1 / 3 / 2;
}
#bl #contents section:nth-of-type(4) .grid .box:nth-of-type(5) {
	grid-area: 2 / 2 / 3 / 3;
}
#bl #contents section:nth-of-type(4) .grid .box:nth-of-type(6) {
	grid-area: 2 / 3 / 3 / 4; 
}
#bl #contents section:nth-of-type(4) .grid .box:nth-of-type(7) {
	grid-area: 3 / 1 / 4 / 2;
}
#bl #contents section:nth-of-type(4) .grid .box:nth-of-type(8) {
	grid-area: 3 / 2 / 4 / 3;
}
#bl #contents section:nth-of-type(4) .grid .box:nth-of-type(9) {
	grid-area: 3 / 3 / 4 / 4;
}
#bl #contents section:nth-of-type(4) .grid .box:nth-of-type(10) {
	grid-area: 4 / 1 / 5 / 2;
}
#bl #contents section:nth-of-type(4) .grid .box:nth-of-type(11) {
	grid-area: 4 / 2 / 5 / 3;
}
#bl #contents section:nth-of-type(4) .grid .box:nth-of-type(12) {
	grid-area: 4 / 3 / 5 / 4;
}


@media only screen and (min-width: 769px) {
	#bl #contents section:nth-of-type(4) .grid {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-column-gap: 0px;
		grid-row-gap: 0px;
	}
	#bl #contents section:nth-of-type(4) .grid .box:nth-of-type(1) {
	grid-area: 1 / 1 / 2 / 2;
	}
	#bl #contents section:nth-of-type(4) .grid .box:nth-of-type(2) {
	grid-area: 2 / 2 / 3 / 3;
	}
	#bl #contents section:nth-of-type(4) .grid .box:nth-of-type(3) {
	grid-area: 1 / 3 / 2 / 4;
	}
	#bl #contents section:nth-of-type(4) .grid .box:nth-of-type(4) {
		grid-area: 2 / 1 / 3 / 2; 
	}
	#bl #contents section:nth-of-type(4) .grid .box:nth-of-type(5) {
		grid-area: 1 / 2 / 2 / 3;
	}
	#bl #contents section:nth-of-type(4) .grid .box:nth-of-type(6) {
		grid-area: 2 / 3 / 3 / 4;
	}
	#bl #contents section:nth-of-type(4) .grid .box:nth-of-type(7) {
		grid-area: 2 / 4 / 3 / 5;
	}
	#bl #contents section:nth-of-type(4) .grid .box:nth-of-type(8) {
		grid-area: 1 / 5 / 2 / 6;
	}
	#bl #contents section:nth-of-type(4) .grid .box:nth-of-type(9) {
		display: none;
	}
	#bl #contents section:nth-of-type(4) .grid .box:nth-of-type(10) {
		grid-area: 2 / 5 / 3 / 6;
	}
	#bl #contents section:nth-of-type(4) .grid .box:nth-of-type(11) {
		display: none;
	}
	#bl #contents section:nth-of-type(4) .grid .box:nth-of-type(12) {
		grid-area: 1 / 4 / 2 / 5;
	}
}


/**
   5
*************************************************/
#bl #contents section:nth-of-type(5) {
	margin: 24% auto 0;
}
#bl #contents section:nth-of-type(5) .box:nth-of-type(1) {
	width: 100%;
	margin: 10% auto 0;
}
#bl #contents section:nth-of-type(5) .box video {
	width: 100%;
}
#bl #contents section:nth-of-type(5) .box:nth-of-type(2) {
	width: 48%;
	margin: 26% auto 0;
}


@media only screen and (min-width: 769px) {
	#bl #contents section:nth-of-type(5) .box:nth-of-type(1) {
		width: 40%;
		margin: 0 auto 0;
	}
	#bl #contents section:nth-of-type(5) .box:nth-of-type(2) {
		width: 40%;
		margin: 150px auto 0;
	}
}


/**
   6
*************************************************/
#bl #contents section:nth-of-type(6) {
	margin: 24% auto 0;
	background: linear-gradient(180deg, #fff 0%, #fff 35%, #000 35%, #000 100%);
}
#bl #contents section:nth-of-type(6) .box {
	width: 68%;
    margin: 10% auto 0;
}
@media only screen and (min-width: 769px) {
	#bl #contents section:nth-of-type(6) {
		margin: 200px auto 0;
	}
	#bl #contents section:nth-of-type(6) .box {
		width: 30%;
		margin: 0 auto 0;
	}
	
}


/**
   footer
*******************************************************/
footer {
	font-family: ltc-bodoni-175, serif;
    font-weight: 400;
    font-optical-sizing: auto;
    font-style: normal;
    overflow: hidden;
    text-align: center;
    position: relative;
    background: #000;
}
footer .staff {
	font-size: 9px;
	line-height: 1.7;
	color: #ac0404;
	padding: 20% 0 18%;
}
footer .staff .name {
	font-weight: 400;
}
footer .copy {
	margin-bottom: 1%;
	color: #ac0404;
	font-size: 7px;
	letter-spacing: .5px;
}
@media only screen and (min-width: 769px) {
	footer .staff {
		font-size: 12px;
        padding: 130px 0 140px;
	}
	footer .copy {
		bottom: .5%;
		font-size: 9px
	}
	
}



/**
   js
*******************************************************/
#bl .anim {
	 opacity: 0;
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
#bl .anim.ac {
	-webkit-animation-name: imageBlur;
  animation-name: imageBlur;
  opacity: 1;
  transition: .8s;
}
@-webkit-keyframes imageBlur {
  from {
    opacity: 0;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
    filter: blur(15px);
  }

  to {
    opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}
@keyframes imageBlur {
  from {
    opacity: 0;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
    filter: blur(15px);
  }

  to {
      opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}




/**
   view
*******************************************************/
.spview {
	display: block;
}
.pcview {
	display: none;
}
@media only screen and (min-width: 768px)  {
    .spview {
		display: none;
	}	
	.pcview {
		display: block;
	}
}