@charset "utf-8";

/* slide */
.slick-dots { margin-top:1rem; position:initial; }
.slick-dots li { padding:0!important; text-align:center; width:auto; height:auto; }
.slick-dots li button { width:1.5rem; height:1.5rem; background:#aaa; border-radius:50%; }
.slick-dots li.slick-active button { background:#fff; margin: 0 auto; }
.slick-dots li button:before {
  content:"";
  display:none;
}

/* common */
div:after, ul:after, cf:after { display:none; }
main .crumbList , main .crumbList a{ color:#fff; }
main .crumbList a { opacity:.8; }
body { background:#676666; color:#fff; }
header#header-new { background:rgb(255,255,255,.5); }
.inner { max-width:124rem; width: 100%; padding:0 2rem; margin:0 auto; }
.title { 
  position:relative;
  border-bottom:solid 1px #fff;
  padding:0 0 1rem 2rem;
  display:flex;
  align-items:center;
  font-weight: bold;
}
.title:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  height:calc(100% - 1rem);
  width:1rem;
  background:#fff;
}
h2 { font-size:2.6rem; }
.catch { font-weight:bold; margin-top:1rem; }
.pc-only { display:block!important; }
.sp-only { display:none!important; }
section { margin-top:5rem; }
section:last-child { margin-bottom:10rem; }

/* mv */
#mv { margin-top:0; }
#mv .inner { padding:0; max-width:120rem; }

/* youtube */
#youtube {}
#youtube ul.cont { display:flex; margin-top:5rem; flex-direction:row-reverse; }
#youtube ul.cont > li {  }
#youtube ul.cont > li:first-child { width:50%; }
#youtube ul.cont > li:last-child { width:45%; margin-right:5rem; }

/* participate */
#participate {  }
#participate .inner { max-width:104rem; padding:10rem 2rem; }
#participate .wrap { border:solid 3px #fff; padding:4rem; position:relative; font-weight: bold; }
#participate .wrap .tt { 
  display:inline-block;
  padding:0 2rem;
  line-height:4rem;
  font-size:2.4rem;
  font-weight: bold;
  text-align:center;
  background:#676666;
  position:absolute;
  top:-2rem;
  left:50%;
  transform:translateX(-50%);
}
#participate .movie { max-width:80rem; width:100%; margin:3rem auto 0; }
#participate .movie .wrap2 { position:relative; padding-top:56.25%; }
#participate .movie iframe { position:absolute; top:0; left:0; width:100%; height:100%; }


/* line */
#line {}
#line .inner { max-width:104rem; }
#line .tc { text-align:center; margin-bottom:3rem; }
#line ul.cont { display:flex; justify-content:space-between; flex-direction:row-reverse; }
#line ul.cont > li { width:55%; }
#line ul.cont > li:first-child { max-width:30rem; width:100%; padding:0 2rem; }
#line ul.cont > li p.tx { margin-top:2rem; }
#line ul.cont > li p.tx span { font-weight: bold; display:block; }
#line ul.cont > li .btn { max-width:30rem; width:100%; margin:3rem auto; text-align:center; }
#line ul.cont > li .btn a { display:block; border:solid 1px #fff; font-size:2rem; font-weight: bold; color:#fff; }
#line .wrap { margin-top:5rem; position:relative; border:solid 1px #fff; padding:4rem 2rem; }
#line .wrap .tt {
  position:absolute;
  top:-2rem;
  left:50%;
  transform:translateX(-50%);
  line-height:4rem;
  font-size:2rem;
  width:60%;
  background:#fff;
  color:#fff;
  text-align:center;
  font-weight: bold;
}
#line .wrap ul { display:flex; align-items:center; }
#line .wrap ul li {}
#line .wrap ul li:first-child { width:75%; }
#line .wrap ul li:last-child { width:20%; }
#line .link { margin-top:3rem; text-align:center; }
#line .link p { text-align:center; margin-top:1rem; }
#line .link > a { display:inline-block; }
#line .link > a:first-child { margin-bottom:5rem; }
#line .link .btn { text-align:center; max-width:30rem; width:100%; margin:3rem auto 0; }
#line .link .btn a { display:block; line-height:2; border:solid 1px #fff; font-size:2rem; font-weight:bold; color:#fff; }


@media screen and (max-width:900px){
  
  h2 { font-size:2rem; }
  
  #youtube ul.cont { align-items:center; }
  
  #line .wrap .tt { width:75%; }
  
}
@media screen and (max-width:600px){
  
  section:last-child { margin-bottom:5rem; }
  .pc-only { display:none!important; }
  .sp-only { display:block!important; }
  h2 { font-size:1.8rem; }
  
  #youtube ul.cont { display:block; }
  #youtube ul.cont > li { width:100%!important; }
  #youtube ul.cont > li:last-child { margin-left:0; }
  
  #participate .inner { padding:5rem 2rem; }
  
  #line ul.cont { display:block; }
  #line ul.cont > li { width:100%; }
  #line ul.cont > li:first-child { max-width:100%; }
  #line .wrap { padding-top:6rem; }
  #line .wrap .tt { width:80%; font-size:1.8rem; padding:1rem 2rem; line-height:2.4rem; }
  #line .wrap ul { display:block; }
  #line .wrap ul li { width:100%!important; }
  #line .wrap ul li:last-child { margin-top:2rem; }
  
}