/* index.css */
/* UFT-8対策 */



div.youtube {
  width:800px;
  margin:0 0 25px 0;
  padding:0;
}
div.youtube::after {
  content:'';
  clear:both;
  display:block;
  width:100%;
}
div.youtube>iframe {
  margin:0 0 20px 0;
}
div.youtube>h3 {
  margin:0 0 20px 0;
}
div.youtube>p {
  margin:0 -20px 0 0;
  padding:0;
  line-height:1;
  text-indent:0;
}
div.youtube>p>a {
  float:left;
  position:relative;
  display:inline-block;
  margin:0 7px 6px 0;
  line-height:1;
  border-radius:5px;
  transition:all 0.2s;
}
div.youtube>p>a:hover {
  z-index:2;
  transform:scale(1.1,1.1);
  box-shadow:0 0 20px #0ff,0 0 20px #0ff;
  filter:brightness(130%);
}
div.youtube>p>a::after {
  content:'▶';
  position:absolute;
  top:calc(50% - 1.2em);
  left:calc(50% - 0.9em);
  width:2.4em;
  height:1.8em;
  text-align:center;
  line-height:1.8em;
  color:#fff;
  background:#e00;
  border-radius:5px;
  box-shadow:0 0 3px #000;
}
div.youtube>p>a:hover::after {
  display:none;
}
div.youtube>p>a>img {
  width:195px;
  height:auto;
  vertical-align:middle;
  border-radius:5px;
}



div.CCM {
  margin:0 0 30px 0;
  padding:20px;
  background:#123;
  border-radius:10px;
}
div.CCM::after {
  content:'';
  clear:both;
  display:block;
  width:100%;
}
div.CCM>h3 {
  float:left;
  display:inline-block;
  margin:0 0 10px 0;
  padding:0;
  line-height:1.2;
  font-size:1.1em;
  color:#cde;
  background:none;
  border:none;
  text-shadow:none;
}
div.CCM>p {
  margin:0;
  padding:0;
  text-indent:0;
  font-size:1.1em;
}
div.CCM>p:nth-of-type(1) {
  float:right;
}
div.CCM>p:nth-of-type(1)>a {
  display:inline-block;
  margin:0 0 0 20px;
  line-height:1;
  box-shadow:0 0 8px rgba(255,255,255,0.5);
  transition:all 0.2s;
}
div.CCM>p:nth-of-type(1)>a:hover {
  z-index:2;
  transform:scale(1.1,1.1);
  box-shadow:0 0 20px #0ff,0 0 20px #0ff;
  filter:brightness(130%);
}
div.CCM>p:nth-of-type(1)>a>img {
  vertical-align:middle;
}
div.CCM>p:nth-of-type(2) {
  clear:left;
  margin:0 0 10px 0;
}



/***** catch *****/
.swiper-container {
  position:relative;
  z-index:2;
  width:800px;
  height:300px;
  margin:0 auto 20px auto;
}

p.catch {
  position:relative;
  margin:0 0 20px 0;
  padding:10px 0 0 0;
  text-indent:0;
}
p.catch::after {
  content:'';
  clear:both;
  display:block;
  width:100%;
}
p.catch a {
  display:block;
  margin:0 0 20px 0;
  line-height:1;
  transition:all 0.2s;
}
p.catch a:nth-of-type(1) {
  float:left;
}
p.catch a:nth-of-type(2) {
  float:right;
}
p.catch a img {
  display:block;
  width:390px;
}
p.catch a:hover {
  z-index:2;
  transform:scale(1.1,1.1);
  box-shadow:0 0 20px #0ff,0 0 20px #0ff;
  filter:brightness(130%);
}



div.store {
  margin:0 0 30px 0;
  padding:20px;
  background:#123;
  border-radius:10px;
}
div.store::after {
  content:'';
  clear:both;
  display:block;
  width:100%;
}
div.store>h3 {
  display:block;
  margin:0 0 10px 0;
  padding:0;
  line-height:1.2;
  font-size:1.1em;
  color:#cde;
  background:none;
  border:none;
  text-shadow:none;
}
div.store>p {
  margin:0 0 10px;
  padding:0;
  text-indent:0;
  font-size:1.1em;
}



/********** Smartphone **********/
@media screen and (max-width:480px) {
  div.youtube {
    margin:0 0 5px 0;
  }
  div.youtube>p {
    margin:0 -20px 0 0;
  }
  div.youtube>p>a {
    margin:0 20px 20px 0;
  }
  div.youtube>p>a:hover {
    z-index:2;
    transform:none;
    box-shadow:none;
    filter:none;
  }
  div.youtube>p>a>img {
    width:390px;
    height:auto;
  }

  div.CCM {
    background:none;
  }
  div.CCM>h3 {
    float:none;
    display:block;
    margin:0 0 20px 0!important;
    line-height:1.5;
    font-size:1.6em;
  }
  div.CCM>p {
    margin:0;
    padding:0;
    text-indent:0;
    font-size:1.3em;
    color:#abc;
  }
  div.CCM>p:nth-of-type(1) {
    float:none;
    margin:0 0 20px 0;
  }
  div.CCM>p:nth-of-type(1)>a {
    display:inline-block;
    margin:0;
    line-height:1;
    box-shadow:0 0 10px #fff;
    transition:all 0.2s;
  }
  div.CCM>p:nth-of-type(1)>a:nth-of-type(1) {
    margin:0 20px 0 0;
  }
  div.CCM>p:nth-of-type(1)>a:hover {
    z-index:2;
    transform:none;
    box-shadow:none;
    filter:none;
  }
  div.CCM>p:nth-of-type(1)>a>img {
    width:360px;
    height:480px;
  }

  div>h3 {
    margin:0 0 20px 20px!important;
    padding:0;
    font-size:1.5em;
    background:none;
    border:none;
  }

  p.catch {
    width:auto;
    height:auto;
    margin:0;
  }
  p.catch a {
    margin:10px 0 20px 0;
  }
  p.catch a img {
    width:800px;
  }
  p.catch a {
    float:none;
  }
  p.catch a:hover {
    z-index:2;
    transform:none;
    box-shadow:none;
  }

  div.store {
    background:none;
  }
  div.store>h3 {
    display:block;
    margin:0 0 20px 0!important;
    line-height:1.5;
    font-size:1.6em;
  }
  div.store>p {
    font-size:1.3em;
  }
  div.store>p>br {
    display:none;
  }
  div.store>p>a {
    margin:0 1em 0 0;
    font-weight:bold;
  }
  div.store>p>em {
    font-weight:bold;
    font-style:normal;
    color:#dd0;
  }
}



#article>section {
}
#article>section h2,
#article>section h3 {
  margin:0;
  padding:0;
  font-size:1em;
  background:transparent;
  border:0;
  border-radius:0;
}

#article>section {
  margin:0 0 20px 0;
  padding:20px;
  background:#101923;
  border:double 3px #30363f;
  border-radius:10px;
}



/***** info *****/
#article>section:nth-of-type(1) {
  margin:0;
  padding:20px 20px 0 20px;
}
#article>section:nth-of-type(1) h3 {
  margin:0 0 20px 0;
}
#article>section:nth-of-type(1) dl {
  display:flex;
  flex-flow:row wrap;
  justify-content:space-between;
  align-items:stretch;
  width:100%;
  margin:0 0 10px 0;
  text-align:left;
}
#article>section:nth-of-type(1) dl dt {
  width:calc(15% - 20px);
  margin:0 0 10px 0;
  padding:0 20px 0 0;
  text-align:right;
  color:#999;
}
#article>section:nth-of-type(1) dl dd {
  width:85%;
  margin:0 0 10px 0;
}
#article>section:nth-of-type(1) dl:nth-of-type(1) {
}
#article>section:nth-of-type(1) dl:nth-of-type(2) {
  opacity:0.5;
}
/********** Smartphone **********/
@media screen and (max-width:480px) {
  #article>section:nth-of-type(1) dl dt {
    width:calc(20% - 20px);
    padding:0 20px 0 0;
  }
  #article>section:nth-of-type(1) dl dd {
    width:80%;
  }
}