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

		@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
		@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Hind+Madurai:wght@300;400;500;600;700&family=Noto+Sans+Tamil:wght@100..900&family=Oooh+Baby&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
		html,
		body {
			padding: 0;
			margin: 0;
		}
		#by {
			font-family: "Noto Sans JP", sans-serif;
			font-size: 12px;
			line-height: 1.6;
		}
		#by img,#by video,#by svg {
			width: 100%;
			border: none;
		}
		#by ul,#by li {
			list-style: none;
			padding: 0;
			margin: 0;
		}
		#by a {
			text-decoration: none;
			color:#000;
		}
		#by .img {
			line-height: 0;
		}
		#by .en {
			font-family: "Roboto Condensed", sans-serif;
		}
		#by .spview {
			display: none;
		}
		@media only screen and (max-width: 768px)  {
			#by {
				font-size: 10px;
			}
			#by .spview {
				display: block;
			}
			#by .pcview {
				display: none;
			}

		}
		#main_visual {
			background: #f2d8b4;
			position: relative;
			width: 100%;
		}
		#main_visual .inner {
			max-width: 1300px;
			overflow: hidden;
			margin: 0 auto;	
			position: relative;
		}
		#main_visual .title {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 22%;
			line-height: 0;
			transform: translate(-50%,-50%);
		}

		#main_visual li {
			width: 20%;
			position: absolute;
			line-height: 0;
		}
		#main_visual li:nth-of-type(1) {
    top: 5%;
    left: 8%;

}
		#main_visual li:nth-of-type(2) {
    top: -5%;
    left: 24%;
    width: 19%;

}
		#main_visual li:nth-of-type(3) {
    top: 3%;
    left: 39%;
    width: 18%;

}
		#main_visual li:nth-of-type(4) {
    top: 1%;
    left: 54%;

}
		#main_visual li:nth-of-type(5) {
    top: 18%;
    left: 73%;
    width: 18%;

}
		#main_visual li:nth-of-type(6) {
    top: 37%;
    left: 18%;
    width: 18%;

}
		#main_visual li:nth-of-type(7) {
    top: 35%;
    left: 59%;
    width: 18%;

}
		#main_visual li:nth-of-type(8) {
    bottom: 0%;
    left: 10%;
    width: 19%;

}
		#main_visual li:nth-of-type(9) {
    bottom: -4%;
    left: 29%;
    width: 23%;

}
		#main_visual li:nth-of-type(10) {
    bottom: 14%;
    left: 48%;
    width: 12%;

}
		#main_visual li:nth-of-type(11) {
    bottom: 1%;
    left: 56%;
    width: 19%;

}
		#main_visual li:nth-of-type(12) {
    bottom: 5%;
    left: 67%;
    width: 25%;

}
		@media only screen and (max-width: 768px)  {
			#main_visual .title {
				width: 42%;
			}

			#main_visual li {
				width: 40%;
				position: absolute;
				line-height: 0;
			}
			#main_visual li:nth-of-type(1) {
        top: -7%;
        left: -1%;
    
    }
			#main_visual li:nth-of-type(2) {
        top: 18%;
        left: 25%;
        width: 27%;
    
    }
			#main_visual li:nth-of-type(3) {
        top: 9%;
        left: 38%;
        width: 33%;
        transform: rotate(-35deg);
    
    }
			#main_visual li:nth-of-type(4) {
        top: -2%;
        left: 54%;
        width: 33%;
    
    }
			#main_visual li:nth-of-type(5) {
        top: 17%;
        left: 70%;
        width: 37%;
    
    }
			#main_visual li:nth-of-type(6) {
        top: 31%;
        left: -1%;
        width: 31%;
    
    }
			#main_visual li:nth-of-type(7) {
        top: 45%;
        left: 68%;
        width: 27%;
    
    }
			#main_visual li:nth-of-type(8) {
        bottom: 24%;
        left: -7%;
        width: 33%;
    
    }
			#main_visual li:nth-of-type(9) {
        bottom: 3%;
        left: 17%;
        width: 43%;
    
    }
			#main_visual li:nth-of-type(10) {
        bottom: 0%;
        left: 1%;
        width: 23%;
    
    }
			#main_visual li:nth-of-type(11) {
        bottom: 9%;
        left: 46%;
        width: 38%;
    
    }
			#main_visual li:nth-of-type(12) {
        bottom: 3%;
        left: 65%;
        width: 52%;
    
    }
		}
		
		
		#main_read {
			margin: 5% auto;
			width: 80%;
			text-align: center;
			font-size: 16px;
			font-weight: 600;
			line-height: 2;
		}
		@media only screen and (max-width: 768px)  {
			#main_read {
				margin: 15% auto;
				width: 80%;
				font-size: 16px;

			}
			
		}
		
		
		#main_contents {
			margin: 5% auto;
		}
		#main_contents .section {
			position: relative;
			margin: 10% auto;
		}
		#main_contents .stick {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		#main_contents .no {
		  align-items: flex-start;
		  color: #000;
		  display: flex;
		  overflow:hidden;
		  width: 100%;
			height: 50vh;
		  white-space:nowrap;
		  z-index: 1;
			position: sticky;
			top: 0;
			padding: 100px 0;
		}
		#main_contents .no ul {
		  animation: flowing 70s linear infinite;
		  font-size: 40px;
			font-weight: 500;
		  transform:translateX(100%);
		  margin: 0;
		  padding: 0;
		}
		#main_contents .no ul li{
		  display: inline-block;
		  padding-right: 50px;
		}
		#main_contents .section .box {
			position: relative;
			max-width: 1200px;
			margin: 0 auto;
			padding-bottom: 5%;
			position: sticky;
			z-index: 10
		}
		#main_contents .section .box .img {
			width: 50%;
			box-sizing: border-box;
			padding: 1%;
			line-height: 0;
		}
		#main_contents .section .box .img img {
			box-sizing: border-box;
			border-radius: 15px;
			overflow: hidden;
		}
		#main_contents .section .box .img:nth-of-type(1) {
		}
		#main_contents .section .box .img:nth-of-type(2) {
			margin-left: 50%;
			margin-top: -35%;
			width: 45%;
		}
		#main_contents .section .box .img:nth-of-type(3) {
			padding: 0;
			margin-top: -18%;
			margin-left: 3%;
			width: 45%;
		}
		/*#main_contents .section .box .img:nth-of-type(3) img {
			border-radius: 1000px;
		}*/
		#main_contents .section:nth-of-type(even) .box .img:nth-of-type(1) {
			margin-left: 50%;
		}
		#main_contents .section:nth-of-type(even) .box .img:nth-of-type(2) {
			margin-left: 5%;
		}
		#main_contents .section:nth-of-type(even) .box .img:nth-of-type(3) {
			margin-left: 53%;
		}
		
		@media only screen and (max-width: 768px)  {
			#main_contents .no {
				padding: 50px 0;
			}
			#main_contents .no ul {
			  animation: flowing 70s linear infinite;
			  font-size: 28px;
			}
			#main_contents .section .box {
				padding-top: 100px;
			}
			#main_contents .section .box .img {
				width: 75%;
				padding: 4%;
				box-sizing: border-box;
			}
			#main_contents .section .box .img img {
				box-sizing: border-box;
				border-radius: 10px;
				overflow: hidden;
			}
			#main_contents .section .box .img:nth-of-type(1) {
        width: 100%;
        margin: 0 auto;
    
    }
			#main_contents .section .box .img:nth-of-type(2) {
				width: 75%;
				margin-left: 25%;
				margin-top: 0%;
			}
			#main_contents .section .box .img:nth-of-type(3) {
        padding: 0;
        margin-top: 4%;
        margin-left: 4%;
        width: 70%;
    
    }
			#main_contents .section:nth-of-type(even) .box .img:nth-of-type(1) {
        margin-left: 0%;
    
    }
			#main_contents .section:nth-of-type(even) .box .img:nth-of-type(2) {
				margin-left: 0%;
			}
			#main_contents .section:nth-of-type(even) .box .img:nth-of-type(3) {
        margin-left: 26%;
    
    }			
		}
		
		
		
		
		
		#main_contents .section .data {
			position: relative;
			width: 40%;
			left: 53%;
			bottom: 0;
			box-sizing: border-box;
			padding: 2% 5%;
			background: #FFF;
			margin-top: -30%;
		}
		#main_contents .section:nth-of-type(even) .data {
			left: 8%;
		}
		#main_contents .section .data .name {
			font-weight: 600;
			font-size: 14px;
			text-align: center;line-height: 1.4;
		}
		#main_contents .section .data .name span {
			display: block;
			font-size: 26px;
			margin: 10px 0;
		}
		#main_contents .section .data .name span.jp {
			font-weight: 400;
			font-size: 10px;
			margin-bottom: 5px;
		}
		#main_contents .section .data .txt {
			margin:3% auto;
			font-size: 12px;
			line-height: 2;
			width: 100%;
		}
		#main_contents .section .data .btn a {
			display: block;
			padding: 5px 0;
			border: 1px solid #000;
			box-sizing: border-box;
			text-align: center;
			width: 100%;
			margin: 5% auto;
			border-radius: 30px;
			font-size: 16px;
			position: relative;
			background: #222;
			font-weight: 500;
			color: #fff;
		}
		#main_contents .section .data .btn a::before {
			position: absolute;
			top: 50%;
			right: 5%;
			content: "→";
			transform: translate(0,-50%);
		}
		@media only screen and (max-width: 768px)  {
			#main_contents .section .data,#main_contents .section:nth-of-type(even) .data {
				position: relative;
				width: 80%;
				left: auto;
				bottom: auto;
				margin: 5% auto;
			}
		}
		#main_contents .more {
			text-align: center;
			font-size: 30px;
			font-weight: 500;
			margin: 10% auto 5%; 
		}
		@media only screen and (max-width: 768px)  {
			#main_contents .more {
				text-align: center;
				font-size: 20px;
				font-weight: 500;
			}	
		}
		
		
		@keyframes flowing {
		  0% { transform:translateX(0); }
		  100% { transform:translateX(-100%); }
		}
		
		#main_visual li {
			opacity: 0;
			transition: 1s all 0s ease;
		}
		#main_visual li:nth-of-type(1) {
			transition-delay: 0.1s
		}
		#main_visual li:nth-of-type(2) {
			transition-delay: 0.2s
		}
		#main_visual li:nth-of-type(3) {
			transition-delay: 0.3s
		}
		#main_visual li:nth-of-type(4) {
			transition-delay: 0.4s
		}
		#main_visual li:nth-of-type(5) {
			transition-delay: 0.5s
		}
		#main_visual li:nth-of-type(6) {
			transition-delay: 0.6s
		}
		#main_visual li:nth-of-type(7) {
			transition-delay: 0.7s
		}
		#main_visual li:nth-of-type(8) {
			transition-delay: 0.8s
		}
		#main_visual li:nth-of-type(9) {
			transition-delay: 0.9s
		}
		#main_visual li:nth-of-type(10) {
			transition-delay: 1.0s
		}
		#main_visual li:nth-of-type(11) {
			transition-delay: 1.1s
		}
		#main_visual li:nth-of-type(12) {
			transition-delay: 1.2s
		}
		#main_visual .title {
			opacity: 0;
			transition: 2s all 1.4s ease;
		}
		#main_visual.ac li,#main_visual.ac .title {
			opacity: 1;
		}
		.anim {
			opacity: 0;
			transition: 1s all 0s ease;
		}
		.anim.ac {
			opacity: 1;
		}
@media only screen and (max-width: 768px)  {
	#main_visual li:nth-of-type(2) {
			transition-delay: 0.3s
		}
		#main_visual li:nth-of-type(3) {
			transition-delay: 0.2s
		}
	#main_visual li:nth-of-type(9) {
			transition-delay: 1.0s
		}
		#main_visual li:nth-of-type(10) {
			transition-delay: 0.9s
		}
}