@charset "utf-8";

/* -------------------------------------------------- */
/* file   : base.css                                  */
/* update : 2019                                      */
/* -------------------------------------------------- */

/* -------------------------------------------------- */
/* 全デバイス共通(PC向け) */
/* --------------------------------------------------- */
/* body */
/* -------------------------------------------------- */
body {
  color: #333;
  -webkit-text-size-adjust: 100%;
}
img {
  width: 100%;
  height: auto;
}

article{position:relative;}

/* link */
/* -------------------------------------------------- */
a:link {
  color: #f87fa9;
}
a:visited {
  color: #222;
}
a:hover {
  text-decoration: none;
}
.clear{clear:both;}


.bg_pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background-color: #ffe9a7;
  opacity: 0.4;
  z-index: -1000;
}

.stripe {
 background:repeating-linear-gradient(
-45deg,
#F3FFE9,
#F3FFE9 20px,
#9ed772 0,
#9ed772 40px
);
}

/* --YouTubeサイズ調整-- */
.video {
position: relative;
height: 0;
padding: 30px 0 0;
overflow: hidden;
width:80%;
height:400px;
margin:50px auto;
}

.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.fs_mini{font-size:85%;}
/* h */
/* -------------------------------------------------- */
h1 {
  padding: 40px 0 0;
  margin: 0 auto;
  
  width: 69%;
  box-sizing: border-box;
}

h2 {
  font-size: 48px;
  margin: 30px 0 45px;
  color: #4baf00;
  font-weight: bold;
  letter-spacing: 10px;
}

/* footer */
/* -------------------------------------------------- */
footer {
  text-align: center;
  padding: 0px ;
  font-size: 15px;
}
footer img {
  width: 100%;
  max-width: 550px;
  height: auto;
}
footer .text01 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0;
}

/* layout */
/* -------------------------------------------------- */
.mv_wrap {
  /* background: url(../img/bg_mv.jpg) no-repeat center center;
  height:778px;*/
}
.mv {
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
  height: 100%;
}
.mv_img {
  text-align: center;
  max-width: 1141px;
  width: 87.7%;
  margin: 0 auto;
}
.mv .schedule {
  max-width: 1040px;
  padding: 0 20px;
  box-sizing: border-box;
  position: absolute;
  bottom: 5%;
  left: 0;
  right: 0;
  margin: auto;
}
.mv .schedule_wrap {
  display: flex;
  justify-content: flex-start;
  background-color: #fff;
  border-radius: 54px;
  padding: 17px 40px;
}
.mv .schedule .content_l {
  width: 38%;
  border-right: 4px dotted #3f7842;
  display: flex;
  justify-content: flex-start;
}
.mv .schedule .content_l p {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  margin-right: 10px;
}
.mv .schedule .content_l img {
  max-width: 251px;
  width: 100%;
}
.mv .schedule .content_r {
  text-align: center;
  margin: 0 auto;
  padding: 5px 0;
  width: 63%;
}
.mv .schedule .content_r .bold {
  font-weight: bold;
  color: #3f7842;
  font-size: 24px;
  margin-bottom: 5px;
}
.mv .schedule .content_r .text {
  font-size: 14px;
  letter-spacing: -0.08em;
  font-weight: bold;
}
.day {
  text-align: center;
  padding: 3px 0;
  background-color: #3ba912;
}
.day_img {
  max-width: 1040px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  margin: 0 auto;
  text-align: center;
  margin-top:14px;
}
.day_img img {
  max-width: 650px;
  width: 65%;
}

section {
  background: url(../img/bg_sec.jpg) repeat center / auto; 
  text-align: center;
}
.sec_wrap {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
}
.sec_wrap ul {
  max-width: 1000px;
  margin-bottom: 60px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.sec_wrap ul.guest li {
  max-width: 400px;
  width: 40%;
  margin-right: 10%;
  margin-bottom: 10px;
  text-align: center;
}
ul.guest li:nth-child(5),ul.guest li:last-child {
  margin-right: 0;
}

.tsu_banner{width:95%; height:auto; max-width:560px; margin:60px auto;}

/*
.sec_wrap ul li p {
  font-size: 18px;
  font-weight: bold;
  margin-top: 8px;
  line-height: 1.4;
  letter-spacing: 1px;
}
.sec_wrap ul li p span {
  display: block;
  font-size: 16px;
  color: #3f7842;
}
.sec_wrap ul li p.text01 {
  font-size: 12px;
  margin-top: 0px;
  letter-spacing: -0.05em;
}

*/

.about {
  background: url(../img/bg_icon1.png) no-repeat 1.5% 2.5% / 55px,
    url(../img/bg_icon3.png) no-repeat 1.5% 97.5% / 110px,
    url(../img/bg_icon2.png) no-repeat 98.5% 2.5% / 85px,
    url(../img/bg_icon1.png) no-repeat 98.5% 97.5% / 55px;
  background-color: #fff;
  border: 4px solid #4baf00;
  margin-bottom: 80px;
}
.about h2{
  margin: 40px 0 25px;
}

.about_txt{margin:50px auto;}

.about p{
  font-size: 27px;
  font-weight: bold;
  line-height: 2;
  letter-spacing: 2px;
  padding: 0 65px 40px;
  text-align: left;
}
.about p span{
background: linear-gradient(transparent 0, #ffffb5 0);
padding: 8px 0;
}

.center {
  text-align: center;
}
.pc {
  display: block;
}
.sp {
  display: none;
}

ul.sponser li{
	width:42%; 
	height:auto; 
	padding:20px 0;
	margin:20px 3%;
	font-size:18px;
	position: relative;
    background: #fff0cd;
    box-shadow: 0px 0px 0px 5px #fff0cd;
    border: dashed 2px #8bc53f;
    color: #454545;
	}
	
ul.sponser li:after{
    position: absolute;
    content: '';
    right: -7px;
    top: -7px;
    border-width: 0 15px 15px 0;
    border-style: solid;
    border-color: #ffdb88 #fff #ffdb88;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
	
ul.sponser li p{
	padding:5px;
}

ul.sponser li p.s_title{
	color:#f87fa9;
	font-size:22px;
	font-weight:bold;
}

ul.sponser li p a:link{color:#f87fa9;}

.pc_head{width:1240px; margin:0 auto; height:240px;}
.pc_foot{width:100%; height:1020px; margin:0 auto; padding:0;}

.tube{width:100%; height:auto; min-height:450px; margin-bottom:100px;}

.mv h1{padding:0; margin:0; width:100%;}
.mv h1 img{width:100%; height:auto;}

p.name{
	position:relative;
	z-index:1;
	text-align:center;
	margin:0 auto;
	width:200px;
	color:#FFF;
	font-size:24px;
	padding:5px;
	margin:-20px auto 0 auto;
	
}
p.name:before{
	transform:skewX(-30deg);
	content:"";
	position: absolute;
	top:0; bottom:0; left:0; right:0;
	z-index: -1;
	background:#3333ff;
	
	
}

.bg_pink:before{background:#ff3366 !important;}

.bg_green:before{background:#408110 !important;}
.bg_green2:before{background:#8f4c13 !important;}

.t_shadow{text-shadow:2px 2px 0 #FFF, -3px -1px 0 #FFF,
              4px 3px 0 #FFF, 2px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF}

.mb10{margin-bottom:10px !important;}

.coming{width:80%; margin:0 auto 50px auto;}
.ls0{letter-spacing:0;}


/* ---------------------JS CSS----------------------------- */
 html,body{
	height: 100%;/*高さを100%にして描画エリアをとる*/
}

#particles-js{ 
	position:absolute;/*描画固定*/
	z-index:0;/*描画を一番下に*/
	width: 100%;
	height: 100%;
	
}

#wrapper{
	position: relative;/*描画を#particles-jsよりも上にするためposition:relative;を指定*/
	z-index: 1;/*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
	width:100%;
	height: 100%;
}
 .animate{position:relative;}
 
 .tsukushi {
	position: absolute;
	right: 40px;
	bottom: 0;
	width: 150px;
	height: 200px;
	background:url(../img/tsukushi.png);
	background-size:cover;
	
	animation: wobbling_x2 1.6s ease-in-out infinite alternate,
		wobbling_y2 3.1s ease-in-out infinite alternate;
}

.mejiro{
	position: absolute;
	left: 0%;
	top: -2%;
	width: 250px;
	height:190px;
	background:url(../img/mejiro.png);
		background-size:cover;
	animation: wobbling_x 1.4s ease-in-out infinite alternate,
		wobbling_y 2.0s ease-in-out infinite alternate;
}

.car{
	position: absolute;
	right: 0%;
	top: 30%;
	width: 287px;
	height:215px;
	z-index:20;
	background:url(../img/car.png) no-repeat;
		background-size:contain;
	animation: wobbling_x2 0.4s ease-in-out infinite alternate,
		wobbling_y2 1.0s ease-in-out infinite alternate;
	
}



@keyframes wobbling_x {
	0% {
		margin-left: 12px;
	}

	100% {
		margin-left: 0px;
	}
}

@keyframes wobbling_y {
	0% {
		margin-top: 0px;
	}

	100% {
		margin-top: 12px;
	}
}

@keyframes wobbling_x2 {
	0% {
		margin-right: 22px;
	}

	100% {
		margin-right: 0px;
	}
}

@keyframes wobbling_y2 {
	0% {
		margin-bottom: 0px;
	}

	100% {
		margin-bottom: 12px;
	}
}
.seen1{position: absolute; left:5%; top:5%; width:250px;}
.seen2{position: absolute; right:7%; top:20%;width:200px;}
.seen3{position: absolute; left:7%; top:35%; width:250px;}
.seen4{position: absolute; right:5%; top:50%; width:300px;}
.seen5{position: absolute; left:5%; top:65%; width:350px;}
.seen6{position: absolute; right:7%; top:80%; width:350px;}
.seen7{position: absolute; left:7%; top:90%; width:250px;}

/* ---------------.mv_mainimg{position:absolute; z-index:0; top:0; left:0;}全デバイス共通(PC)-end--------------------- */
/*----------------------------------------------------------*/
/* tablet用のCSS */
/*----------------------------------------------------------*/


@media screen and (max-width: 1350px) {
	.car{
	top:50%;
	width:200px;
	}

	
}

@media screen and (max-width: 959px) {
  /* tablet */
  .pc {
    display: block;
  }
  .sp {
    display: none;
  }
  


  /* header */
  /* -------------------------------------------------- */

  .g_menu li {
    list-style: none;
  }

  /* h */
  /* -------------------------------------------------- */
  h2 {
    font-size: 40px;
    letter-spacing: 5px;
    margin: 25px 0 40px;
  }

  /* layout */
  /* -------------------------------------------------- */
.pc_head{width:100%;}
.car{width:17%; height:100px; top:43%;}
.mejiro{width:200px; height:153px; top:-50px;} 
.tsukushi{width:98px; height:157px; bottom:30%;}
  
  .s_mt0{margin-top:0;}
 .s_mb0{amrgin-bottom:0;}
  
  
  .mv .schedule_wrap {
    padding: 10px 20px;
  }

  .mv .schedule .content_l p {
    font-size: 18px;
  }
  .mv .schedule .content_l p:first-of-type {
    width: 76%;
  }
  .mv .schedule .content_r .bold {
    font-size: 18px;
  }
  .mv .schedule .content_r .text {
    font-size: 13px;
  }
  .day_img{
    padding: 0 15px;
  }
  .about h2{
    margin: 30px 0 25px;
  }
  .about p{
    font-size: 20px
  }

  /* -------------------tablet END------------------------- */
}

/*----------------------------------------------------------*/
/* SP用のCSS */
/*----------------------------------------------------------*/
@media screen and (max-width: 559px) {
  /* SP */
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  .mv_wrap {
    background-image: none;
    height:auto;
  }


  .seen1{position: static;  width:43%; float:left; margin:6em 0 2em 1em;}
  .seen2{position: static;  width:48%; float:right; margin:2em 1em 2em 0;}  
  .seen7{position: static;  width:35%; float:left; margin:6.5em 0 2em 1em;}
  .seen3{position: static;  width:55%; float:right; margin:1em 1em 2em 0;}  
  .seen5{position: static;  width:45%; float:left; margin:2.5em 0 2em 0.5em;}
  .seen6{position: static;  width:45%; float:right; margin:0em 0.5em 2em 0;} 
    .seen4{display:none;} 

   .video{width:100%; height:50vw;}

  .sp_head{width:100%; height:60px;}

  h1 {
    padding: 0;
    width: 100%;
    max-width: inherit;
  }
  .day{
    padding: 5px 0;
  }
  .day_img{
    max-width: inherit;
    width: 85%;
  }
  .day_img img{
    width: 100%;
    max-width: inherit;
  }
  .sec_wrap{
    padding: 0 15px;
  }
  h2{
    margin: 0;
    padding: 15px 0;
    font-size: 30px;
  }
  .sec_wrap ul{
    flex-wrap: wrap;
    margin-bottom: 15px;
  }

.sec_wrap ul.guest li{
    flex-wrap: wrap;
    width: 45%;
    margin:10px auto;
    max-width: inherit;
    order: 4;
  }
 
 p.name{width:90%; margin-top:0px; padding:3px;}
 .sec_wrap ul li p.name{font-size:16px; font-weight:bold;}
 p.name:before{}

.about_txt{margin:20px auto;}
 
 .ytube{width:90%; margin:30px auto; }
 
  .sec_wrap ul li p{
    font-size: 13px;
  }
  .sec_wrap ul li p span{
    font-size: 10px;
  }
  .sec_wrap ul li p.text01{
    font-size: 7px;
  }

  .sec_wrap {
    padding-bottom: 10px;
  }
  .about{
    margin-top: 30px;
    background: url(../img/bg_icon1.png) no-repeat left 10px top 10px / 35px,
    url(../img/bg_icon3.png) no-repeat left 10px bottom 10px / 54px,
    url(../img/bg_icon2.png) no-repeat right 10px top 10px / 36px,
    url(../img/bg_icon1.png) no-repeat right 10px bottom 10px / 35px;
    background-color: #fff;
    margin-bottom: 30px;
  }
  .about h2{
    margin: 10px 0 0;
    padding: 10px 0;
  }
  .about p {
    font-size: 14px;
    letter-spacing: 0;
    padding: 0 20px 20px;
  }
  .about p span{
    padding: 3px 0;
  }
  
  .coming{width:100%;}
  .mejiro {
    width: 105px;
    height: 81px;
  top: -21px;}
  
  .car {
    width: 80px;
    height: 100px;
    top: 29.5%;
    right: 0%;
}
  
  .tsukushi {
    width: 53px;
    height: 88px;
    bottom: 0;
    /* position: relative; */
}



ul.sponser{
	margin-bottom:90px;
}

ul.sponser li{
	width:90%;
	display:block;
	font-size:14px;
	
}

ul.sponser li p.s_adress{
	font-size:16px;
	}
	
.sp_footer{
	width:100%;
	height:486px;
	
}
  footer img {
    width: 75%;
    max-width: 451px;
    height: auto;
  }

  .fs_mini{font-size:80%;}
  /* ---------------------SP END----------------------------- */
}

 /* ---------------------js系----------------------------- */
 
 .slider1 {
  display: flex;
  margin: 0 calc(50% - 50.6vw);
  width: 100vw;
  height:400px;
  overflow: hidden;
}
.slider1 ul{
	display:flex;
	padding: 0;
	margin:0;
	max-width:none; 
	flex-wrap:nowrap;
}
.slider1 li{
	width:400px;
	list-style: none;
}
.slider1 ul:first-child {
  animation: slide1 150s -75s linear infinite;
}

.slider1 ul:last-child {
  animation: slide2 150s linear infinite;
}

@media screen and (max-width:770px) {
	.slider1 {height:250px;}
	.slider1 li{width:250px;}
	
}

@keyframes slide1 {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slide2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}