/* CSS Document */


#top {
	width: 450px;
	margin: 30px auto;
	border:  1px solid #039;
	padding: 50px;
	border-radius: 30px;
	text-align: center;
	
}

#top img {
	width: 400px;
}

@keyframes bgroop {
    from {
        background-position: 1255px 0;
    }
    to {
        background-position: 0 0;
    }
}

@keyframes bgroop2 {
    from {
        background-position: 627px 0;
    }
    to {
        background-position: 0 0;
    }
}

@keyframes GradationAnime { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

@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);
  }
}

img.blurin {
  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.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.img-blur {
  -webkit-animation-name: imageBlur;
  animation-name: imageBlur;
  opacity: 1;
  transition: .8s;
}

 .fadein {
  opacity: 0;
  transform : translate(50px, 0px);
  transition : all 700ms;
}

.fadein.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}
#whiteMainBox_fit {
	color: #000;

	overflow: hidden;
}
#whiteMainBox_fit img {
	max-width: 100%;
}

.gradation_bg {
	 background: linear-gradient(-45deg, rgba(119, 212, 231, 1), rgba(119, 212, 231, 1), #FFBAC3, #EDDD53,rgba(234, 135, 137, 1)) fixed;
  	background-size: 800% 800%;
  animation: GradationAnime 9s ease infinite;
}

.grad_color_bg {
	background: linear-gradient(-45deg,rgba(119, 212, 231, 1) 0%, rgba(245, 255, 240, 1) 51%, rgba(234, 135, 137, 1) 100%);
}
.grunge_bg {
	background: url("img/bg_grunge.png");
}

#top2 {
	width: 100%;
	background: url("img/top_bg.jpg") 50% 50% no-repeat;
	background-size: cover;
	padding: 1px 0 0px 0;
}

#top2 div.in {
	width: 1200px;
	background: url("img/top_bg_glass.webp") 50% 0 no-repeat;
	background-size: auto 100%;
	position: relative;
	margin: auto;
	height: 700px;
}

#top2 h1 {
	width: 680px;
	margin: 20px auto 20px 25%;
}

#top2 div.in2 {

}

#top2 div.in2 img {
	position: absolute;
}

#top2 div.in2 img:nth-of-type(1) {
  width: 170px;
  left: 150px;
  top: 20px;
}

#top2 div.in2 img:nth-of-type(2) {
width: 750px;
  left: 0;
  right: 0;
  top: 120px;
  margin: auto;
}

#top2 div.in2 img:nth-of-type(3) {
	width: 600px;
	right: 0;
	bottom: 0;
}

#top2 div.in2 img:nth-of-type(4) {
	width: 70px;
	right: 0;
	bottom:  30px;
}


#bg_gold {
	width: 100%;
	background:  url("img/bg_gold.png") 0 0 repeat-y fixed;
	background-size: 100% auto;
	padding: 1px 0;
}

h2.textcenter {
	margin: 100px 0 50px 0;
	text-align: center;
	font-size: 2.5rem;
	color: #fff;
	    font-family: "Maru Folk Medium"; 
	text-shadow: 0px 0px 10px rgba(33, 5, 94, 1);
}

#message {
	text-align: center;
	padding: 150px 0;
	width: 100%;
	    font-family: "Maru Folk Medium"; 
	background: url("img/top_bg_glass.webp") 50% 100% no-repeat fixed;
}

#message p {
display: block;
width: 800px;	
  font-size: 2rem;
  font-weight: bold;
  margin:5px auto;
	color: #fff;
	text-shadow: 0px 0px 10px rgba(33, 5, 94, 1);

}


#lineup_box {
	width: 1000px;
	margin: 0 auto;
	padding: 100px 0;
}

div.lineup {
	margin: 50px auto;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: space-around;
	background-size: auto 100%;
}


div.reverse {
	flex-direction: row-reverse;
	background-size: auto 100%;
}

div.lineup div.img {
	width: 400px;
	position: relative;
}

#whiteMainBox_fit div.lineup div.img img {
	max-width: 90%;
}

div.lineup div.img img.pop {
	position: absolute;
	width: 150px;
	left: 290px;
	top: 200px;
}

div.lineup div.img img.pop2 {
	position: absolute;
	width: 150px;
	left: 300px;
	transform: rotate(20deg);
	top: 200px;
}


div.lineup div.text {
	width: 550px;
}

div#mix {
	background: rgba(255,255,255,0.2);
	padding: 1px 0;
}


div#mix div.sample {
	width: 700px;
	margin: auto;
	padding-left: 80px;
}



div#glasses {
		background: url("img/glasses.png") repeat-x;
    background-position: 0 0;
    -webkit-animation: bgroop 50s linear infinite;
    animation: bgroop 50s linear infinite;	
	height: 170px;
	margin:  50px 0 0 0;
	width: 100%;
}



div#slide_in {
	width: 100%;
	margin: auto;
	height: 500px;
	overflow: hidden;
	position: relative;
	background: url("img/bg_mix.jpg") 50% 50% no-repeat;
	background-size: cover;	
}

div#slide_in img {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;

}

.slick-dots {
	bottom: 50px;
}


#cmwrap a {
  width: 350px;
  height: auto;
  margin: 50px 30px 100px 30px;
  border: 5px solid #fff;
  transition: all 0.2s ease 0s;
 box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 50px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
	box-shadow: 0px 3px 11px -2px rgba(0,0,0,0.54);
}

#cmwrap a:hover {
	transform: translateY(-15px);
	opacity: 0.8;
	text-decoration: none;
}
#cmwrap a img {
	width: 100%;
}


div#about {
	width: 100%;
	padding: 100px 0;
	margin: 150px 0 0 0;
}

div#about h2 {
	font-size: 2.5rem;
	text-align: center;
	margin: 20px 0 0 0;
}

#about_box {
	display: flex;
	align-items: flex-start;
	justify-content: space-around;
	width: 1000px;
	margin: 20px auto 100px auto;
}

.about_in {
	width: 48%;
	text-align: center;
}

.about_in img {
	width: 40%;
	display: block;
	margin: auto;
}
.about_in p {
	margin: 30px;
	text-align: left;
}

.about_in a {
	transition: all ease 0.3s;
	display: inline-block;
	border-radius: 100vh;
	background:#fff;
	color: #000;
	font-size: 1rem;
	font-weight: bold;
	padding: 20px;
	text-align: center;
	margin: auto;
	width: 300px;box-shadow: 0px 3px 11px -2px rgba(0,0,0,0.54);
}

.about_in a:hover {
	transform: translateY(-10px);
	text-decoration: none;
}

#campaign {
	width:  740px;
	margin: 100px auto;
}

#campaign a {

}

#campaign a:hover {
	opacity: 0.7;
}

#campaign h2 {
	text-align: center;
	font-size: 2rem;
}



#campaign ul {
	display: flex;
	margin: auto;
	align-items: center;
	justify-content: space-around;
	margin-top: 50px;
}

#campaign a.img:hover {
	opacity: 0.7;
}

#campaign ul li  {
	width: 46%;
	line-height: 20px;
	list-style: none;
	text-align: center;
	font-size: 1.2rem;
}

#campaign ul li a {
	transition: all ease 0.3s;
	display: inline-block;
	border-radius: 100vh;
	background: #fff;
	color: #000;
	font-size: 1rem;
	font-weight: bold;
	padding: 20px;
	text-align: center;
	margin: auto;
	box-shadow: 0px 3px 11px -2px rgba(0,0,0,0.54);
}

#campaign a:hover {
	transform: translateY(-10px);
	text-decoration: none;
}

@media screen and (min-width: 0px) and (max-width: 480px) {
	
#whiteMainBox_fit {
	overflow: hidden;
}	
#top2 div.in {
  width: 100%;
height: 500px;	
}

.gradation_bg {
 background: linear-gradient(-45deg, rgba(119, 212, 231, 1), rgba(119, 212, 231, 1), #FFBAC3, #EDDD53,rgba(234, 135, 137, 1)) fixed;
background-size: 2000% 2000%;
animation: GradationAnime 9s ease infinite;
	width: 100%;
}
#top2 h1 {
  width: 100%;
  margin: 20px auto;
  padding-top: 20px;
}
	
#top2 div.in2 img:nth-of-type(1) {
  width: 70px;
  left: 10px;
  top: -10px;
}	
	
#top2 div.in2 img:nth-of-type(4) {
  width: 50px;
  right: 10px;
  bottom: 30px;
}
	
#message p {
  display: block;
  width: 100%;
  font-size: 1rem;
}
	
#message {
  text-align: center;
  padding: 50px 0;
  width: 100%;
  background-size: 80% auto;
}	
	
	
div.lineup {
	display: block;
	margin: 10px auto;
}
	
div.lineup div.img {
  width: 50%;
  position: relative;
  margin: auto;
}	
	
#lineup_box {
  width: 90%;
  margin: 0 auto;
  padding: 10px 0;
}	
	
div.lineup div.text {
  width: 90%;
  margin: auto;
}
	
div.lineup div.img img.pop {
  position: absolute;
  width: 50%;
  left: auto;
  top: 0;
}	
	
	
.imgright {
  float: right;
  margin: 0px 0px 10px 10px;
  width: 40%;
}	
	
h2.textcenter {
  margin: 50px 0 10px 0;
  font-size: 1.5rem;
}
	
div#mix div.sample {
  width: 90%;
  margin: auto;
  padding-left: 4%;
}	
	
	

div#glasses {
		background: url("img/glasses.png") repeat-x;
    background-position: 0 0;
	background-size: 627px auto;
    -webkit-animation: bgroop2 50s linear infinite;
    animation: bgroop 50s linear infinite;	
	height: 70px;
	margin:  20px 0 0 0;
	width: 100%;
}	
	
	
	
#campaign {
  width: 90%;
  margin: 20px auto;
}
#campaign ul {
  display: block;
	margin-top:20px;
}
	
#campaign ul li {
  width: 100%;
  font-size: 1.1rem;
  margin-bottom: 20px;
}	
#campaign ul li a {
  display: block;
}
	
div#about {
  width: 100%;
  padding: 50px 0;
  margin: 30px 0 0 0;
}
	
#about_box {
  display: block;
  width: 90%;
  margin: 20px auto 30px auto;
}	
	
.about_in {
  width: 100%;
  text-align: center;
  margin-bottom: 30px;	
}	
	
.about_in p {
  margin: 10px;
  text-align: left;
}	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
}