@charset "UTF-8";

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
  Base
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
@media screen and (min-width: 768px) {
  body, html {
    min-width: 1200px;
  }
}
html {
  font-size: 62.5%;
}
body {
  font-size: 1.6em;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
#kawauso2 {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  color: #111;
  font-size: 16px;
  line-height: 1;
  font-family: "Noto Sans Japanese", sans-serif;
}
.sp { display:none; }
.fll { float:left; }
.flr { float:right; }
* { box-sizing:border-box; text-decoration:none; }

@media screen and (max-width: 767px) {
  #kawauso2 {
    font-size: 13px;
  }
  .pc { display:none; }
  .sp { display:block; }
  .fll, .flr { float:none; }
  img { width:100%; height:auto; }
}

/* ------------------------------
loader
------------------------------ */
#loader {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 999;
}
#loader .loader-inner img.star03 {
  position: absolute;
  top: 0;
  right: -100px;
  animation: star;
  animation-duration: 2s;
  animation-delay: 2s;
  animation-timing-function: linear;
}
@keyframes star{
  from {
    top: 0;
    right: -100px;
  }
  to {
    top: 2000px;
    right: 3000px;
  }
}

/* ------------------------------
  link
------------------------------ */
a:hover img {
  opacity: 0.7;
}
a:hover,
a:hover img {
  -webkit-transition: .2s linear;
  -moz-transition: .2s linear;
  -o-transition: .2s linear;
  -ms-transition: .2s linear;
}

/* ------------------------------
  text
------------------------------ */
h2 {
  margin-bottom: 50px;
  font-weight: bold;
  text-align: center;
}
.txt {
  line-height: 1.7;
}
.lead {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 30px;
}
.copy {
  font-size: 12px;
}

@media screen and (max-width: 767px) {
  h2 {
    margin-bottom: 30px;
  }
  .lead {
    font-size: 15px;
  }
  .copy {
    font-size: 10px;
  }
}

/* ------------------------------
  particles
------------------------------ */
#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: -1;
}

/* ------------------------------
  header
------------------------------ */
@media screen and (min-width: 768px) {
  nav {
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 60px;
    background: url(../img/nav_bg.jpg) repeat #111;
    border-bottom: 1px solid #ccc;
    z-index: 100;
  }
  nav ul.nav-list {
    overflow: hidden;
    width: 1100px;
    margin: 0 auto;
    text-align: center;
  }
  nav ul.nav-list > li {
    float: left;
    height: 60px;
    margin-right: 61px;
    line-height: 60px;
  }
  nav ul.nav-list li a {
    display: block;
  }
  nav ul.nav-list li:last-child {
    margin-right: 0;
  }
  nav ul.nav-list li.sns-list {
    padding-top: 9px;
  }
}

nav ul.nav-list li.sns-list ul li {
  float: left;
  margin-left: 10px;
}
nav ul.nav-list li.sns-list ul li a {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  text-indent: -9999px;
}
nav ul.nav-list li.sns-list ul li.fb a {
  background-image: url(../img/ico_fb.jpg);
}
nav ul.nav-list li.sns-list ul li.tw a {
  background-image: url(../img/ico_tw.jpg);
}

@media screen and (max-width: 767px) {
  /* trigger */
  .nav-trigger,
  .nav-trigger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
  }
  .nav-trigger {
    position: fixed;
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    z-index: 100;
    background: #222;
  }
  .nav-trigger span {
    position: absolute;
    left: 7px;
    width: 21px;
    height: 2px;
    background-color: #fff;
  }
  .nav-trigger span:nth-of-type(1) { top:9px; }
  .nav-trigger span:nth-of-type(2) { top:17px; }
  .nav-trigger span:nth-of-type(3) { top:25px; }
  .nav-trigger.open span:nth-of-type(1) {
    -webkit-transform: translateY(8px) rotate(-45deg);
    transform: translateY(8px) rotate(-45deg);
  }
  .nav-trigger.open span:nth-of-type(2) {
    opacity: 0;
  }
  .nav-trigger.open span:nth-of-type(3) {
    -webkit-transform: translateY(-8px) rotate(45deg);
    transform: translateY(-8px) rotate(45deg);
  }
  nav .nav-list-wrap {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 99;
  }
  nav.smp ul.nav-list {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%); /* Safari用 */
    transform: translate(-50%, -50%);
    width: 100%;
  }
  nav .nav-list-wrap.open {
    display: block;
  }
  nav ul.nav-list > li > a {
    display: block;
    margin-bottom: 40px;
    color: #065abd;
    font-size: 15px;
    border-right: none;
    text-align: center;
  }
  nav ul.nav-list li a img {
    width: auto;
    height: 16px;
  }
  nav ul.nav-list li.comingsoon a {
    color: #888;
    cursor: default;
  }
  ul.sns-list {
    position: fixed;
    top: 35px;
    right: 0;
    overflow: hidden;
    width: 35px;
    margin: 0 auto;
    z-index: 100;
  }
  ul.sns-list li a {
    display: block;
    width: 35px;
    height: 35px;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    text-indent: -9999px;
  }
  ul.sns-list li.fb a {
    background-image: url(../img/ico_fb.jpg);
  }
  ul.sns-list li.tw a {
    background-image: url(../img/ico_tw.jpg);
  }
}

/* ------------------------------
  footer
------------------------------ */
footer {
  position: relative;
  height: 0;
  padding-top: 30.8%;
  background: url(../img/footer_bg.jpg) no-repeat center bottom #fff;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  text-align: center;
}
footer .copy {
  position: absolute;
  bottom: 10%;
  left: 0;
  right: 0;
  color: #fff;
}

@media screen and (max-width: 767px) {
  footer .copy {
    bottom: 15px;
  }
}

/* ------------------------------
  vote-area
------------------------------ */
section.vote-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 10px 0 8px;
  background: rgba(0,0,0,0.6);
  text-align: center;
  z-index: 10;
}
section.vote-area a {
  position: relative;
}
section.vote-area a:hover img {
  opacity: 1;
}
section.vote-area::before,
section.vote-area::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 116px;
  height: 124px;
  background: url(../img/vote_img.png) no-repeat;
  z-index: 11;
}
section.vote-area::before {
  left: 50%;
  margin-left: -400px;
}
section.vote-area::after {
  right: 50%;
  margin-right: -400px;
  -o-transform: scale( -1, 1);
  -ms-transform: scale( -1, 1);
  -moz-transform: scale( -1, 1);
  -webkit-transform: scale( -1, 1);
  transform: scale(-1, 1);
}

@media screen and (max-width: 767px) {
  section.vote-area {
    padding: 8px 15% 6px;
  }
  section.vote-area a {
    width: auto;
  }
  section.vote-area::before,
  section.vote-area::after {
    width: 59px;
    height: 63px;
    margin: 0;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
  }
  section.vote-area::before {
    left: -3%;
  }
  section.vote-area::after {
    right: -3%;
  }
}

/* ------------------------------
  go top
------------------------------ */
.go-top {
  position: fixed;
  bottom: 15px;
  right: 3%;
  z-index: 80;
}

@media screen and (max-width: 767px) {
  .go-top {
    bottom: 2%;
    right: 2%;
    width: 65px;
  }
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
  Contents
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
section {
  position: relative;
}
.inner {
  position: relative;
  width: 1100px;
  margin: 0 auto;
  padding: 150px 0;
  z-index: 1;
}
.inner::after {
  content: '';
  clear: both;
  display: block;
}
/* コンテンツ中央配置 */
.position_center {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%); /* Safari用 */
  transform: translate(-50%, -50%);
  width: 100%;
}

@media screen and (max-width: 767px) {
  .inner {
    width: auto;
    padding: 15% 20px;
  }
  .ytb {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
  }
  .ytb iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
  }
}

/* ------------------------------
  bg
------------------------------ */
/*  slanting
-------------------- */
.slanting::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  -moz-transform: skewY(-4deg);
  -ms-transform: skewY(-4deg);
  -webkit-transform: skewY(-4deg);
  transform: skewY(-4deg);
  z-index: 2;
}
.slanting .inner {
  position: relative;
  z-index: 3;
}

/* ------------------------------
  animation
------------------------------ */
.section-animation img {
  position: absolute;
  transition: top ease-out 0.3s;
  -webkit-transition: top ease-out 0.3s;
  z-index: 0;
}
.movie-area .section-animation .scroll01 {
  top: 110px;
  left: 50%;
  margin-left: -640px;
}
.movie-area .section-animation .scroll02 {
  top: 900px;
  left: 50%;
  margin-left: -610px;
}
.movie-area .section-animation .scroll03 {
  top: 570px;
  right: 50%;
  margin-right: -700px;
}
.comment-area .section-animation .scroll04 {
  top: 80px;
  left: 50%;
  margin-left: -740px;
}
.comment-area .section-animation .scroll05 {
  top: 620px;
  right: 50%;
  margin-right: -630px;
}
.howto-area .section-animation .scroll06 {
  top: 0;
  right: 50%;
  margin-right: -700px;
}
.howto-area .section-animation .scroll07 {
  top: 1020px;
  left: 50%;
  margin-left: -760px;
}
.howto-area .section-animation .scroll08 {
  top: 2400px;
  right: 50%;
  margin-right: -560px;
}
.ranking-area .section-animation .scroll09 {
  top: 50px;
  right: 50%;
  margin-right: -630px;
}
.ranking-area .section-animation .scroll10 {
  top: 1020px;
  left: 50%;
  margin-left: -760px;
}
.ranking-area .section-animation .scroll11 {
  top: 1500px;
  right: 50%;
  margin-right: -680px;
}

@media screen and (max-width: 767px) {
  .movie-area .section-animation .scroll01 {
    width: 125px;
    top: 30px;
    left: -8%;
    margin: 0;
  }
  .movie-area .section-animation .scroll02 {
    width: 74px;
    top: 410px;
    left: 0;
    margin: 0;
  }
  .movie-area .section-animation .scroll03 {
    width: 130px;
    top: 150px;
    right: -2%;
    margin: 0;
  }
  .comment-area .section-animation .scroll04 {
    width: 197px;
    top: 60px;
    left: -20%;
    margin: 0;
  }
  .comment-area .section-animation .scroll05 {
    width: 57px;
    top: 680px;
    right: -3%;
    margin: 0;
  }
  .howto-area .section-animation .scroll06 {
    width: 135px;
    top: 0;
    right: -10%;
    margin: 0;
  }
  .howto-area .section-animation .scroll07 {
    width: 120px;
    top: 500px;
    left: -10%;
    margin: 0;
  }
  .howto-area .section-animation .scroll08 {
    width: 144px;
    top: 1950px;
    right: 0;
    margin: 0;
  }
  .ranking-area .section-animation .scroll09 {
    width: 134px;
    top: 100px;
    right: -10%;
    margin: 0;
  }
  .ranking-area .section-animation .scroll10 {
    width: 70px;
    top: 600px;
    left: -10%;
    margin: 0;
  }
  .ranking-area .section-animation .scroll11 {
    width: 49px;
    top: 2050px;
    right: 0;
    margin: 0;
  }
}

/* ------------------------------
  mv-area
------------------------------ */
section.mv-area {
  overflow: hidden;
  min-width: 1200px;
  height: 820px;
  background: url(../img/mv_bg.jpg) no-repeat center top #000;
  -webkit-background-size: auto 100%;
  background-size: auto 100%;
  text-align: center;
}
section.mv-area::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 600px;
  background: url(../img/mv_rock.png) no-repeat center bottom;
  z-index: 3;
}

/* PC */
@media screen and (min-width: 768px) {
  /*  animation
  -------------------- */
  section.mv-area .mv-animation img {
    position: absolute;
    bottom: 0;
    left: 50%;
  }
  section.mv-area .mv-animation img.kawauso01,
  section.mv-area .mv-animation img.kawauso02 {
    bottom: 90px;
    margin-left: -599px;
  }
  section.mv-area .mv-animation img.kawauso01 {
    z-index: 2;
  }
  section.mv-area .mv-animation img.kawauso02 {
    z-index: 1;
  }
  section.mv-area .mv-animation img.h1 {
    bottom: 13px;
    left: 0;
    right: 0;
    width: 723px;
    margin: 0 auto;
    z-index: 3;
  }
  section.mv-area .mv-animation img.data {
    bottom: 5%;
    left: auto;
    right: 50%;
    margin-left: auto;
    margin-right: -590px;
    z-index: 3;
  }
  section.mv-area .mv-animation img.bubuzera {
    top: -40px;
    margin-left: -756px;
  }
  section.mv-area .mv-animation img.catch01,
  section.mv-area .mv-animation img.catch02,
  section.mv-area .mv-animation img.catch03,
  section.mv-area .mv-animation img.catch04 {
    top: 30px;
    right: 50%;
    left: auto;
    margin-left: 0;
    z-index: 2;
  }
  section.mv-area .mv-animation img.catch01 {
    margin-right: -580px;
  }
  section.mv-area .mv-animation img.catch02 {
    margin-right: -515px;
  }
  section.mv-area .mv-animation img.catch03 {
    margin-right: -450px;
  }
  section.mv-area .mv-animation img.catch04 {
    margin-right: -384px;
  }
  section.mv-area .mv-animation img.star01 {
    top: -5%;
    right: 14%;
    left: auto;
    margin: 0;
  }
  section.mv-area .mv-animation img.star02 {
    top: -5%;
    right: -15%;
    left: auto;
    margin: 0;
  }
}
/* SP */
@media screen and (max-width: 767px) {
  section.mv-area::before {
    left: 0;
    right: 0;
    height: 0;
    padding-top: 140%;
    background: url(../img/mv_rock_sp.png) no-repeat 0 17px;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    z-index: 3;
  }
  /*  animation
  -------------------- */
  section.mv-area .mv-animation img {
    position: absolute;
  }
  section.mv-area .mv-animation img.kawauso01,
  section.mv-area .mv-animation img.kawauso02 {
    bottom: 46.5%;
    left: -18%;
    width: 135%;
    margin: 0 auto;
  }
  section.mv-area .mv-animation img.kawauso01 {
    z-index: 2;
  }
  section.mv-area .mv-animation img.kawauso02 {
    z-index: 1;
  }
  section.mv-area .mv-animation img.h1 {
    bottom: 35%;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 3;
  }
  section.mv-area .mv-animation img.data {
    bottom: 26%;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 0 20px;
    z-index: 3;
  }
  section.mv-area .mv-animation img.bubuzera {
    top: 0;
    left: -13%;
    width: 64%;
  }
  section.mv-area .mv-animation img.catch01,
  section.mv-area .mv-animation img.catch02,
  section.mv-area .mv-animation img.catch03,
  section.mv-area .mv-animation img.catch04 {
    top: 14px;
    width: 10%;
    right: 0;
    z-index: 2;
  }
  section.mv-area .mv-animation img.catch01 {
    right: 2%;
  }
  section.mv-area .mv-animation img.catch02 {
    right: 11%;
  }
  section.mv-area .mv-animation img.catch03 {
    right: 20%;
  }
  section.mv-area .mv-animation img.catch04 {
    right: 29%;
  }
  section.mv-area .mv-animation img.star01 {
    top: -100px;
    right: -100px;
    width: 12%;
  }
  section.mv-area .mv-animation img.star02 {
    top: 100px;
    right: -100px;
    width: 12%;
  }
}


section.mv-area ul.btn-list {
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -590px;
  z-index: 3;
  animation-delay: 22s;
}
section.mv-area ul.btn-list li {
  width: 160px;
}
section.mv-area ul.btn-list img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 767px) {
  section.mv-area {
    overflow: hidden;
    min-width: 100%;
    width: 100%;
    height: 0;
    padding-top: 197.9%;
    background: url(../img/mv_bg_sp.jpg) no-repeat center top #000;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
  }
  section.mv-area ul.btn-list {
    bottom: 1%;
    left: 0;
    right: 0;
    margin: 0 auto;
    overflow: hidden;
    padding: 10px 20px;
  }
  section.mv-area ul.btn-list li {
    display: inline-block;
    width: 49%;
  }
  section.mv-area ul.btn-list li:first-child {
    width: 99%;
    margin-bottom: 5px;
  }
}

/* ------------------------------
  bnr-area
------------------------------ */
section.bnr-area {
  padding: 10px 0;
  background: url(../img/nav_bg.jpg) repeat #111;
}
section.bnr-area ul.bnr-list {
  width: 1000px;
  margin: 0 auto;
}
section.bnr-area ul.bnr-list li {
  margin: 0 10px;
}
section.bnr-area ul.bnr-list li a img {
  border: 1px solid #fff;
  width: 100%;
  height: auto;
}
.slick-prev {
  left: -35px;
}
.slick-next {
  right: -35px;
}
.slick-prev, .slick-next {
  width: 26px;
  height: 26px;
}
.slick-prev::before, .slick-next::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  background-repeat: no-repeat;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
}
section.bnr-area .slick-prev::before {
  background-image: url(../img/link_arrow.png);
  -o-transform: scale( -1, 1);
  -ms-transform: scale( -1, 1);
  -moz-transform: scale( -1, 1);
  -webkit-transform: scale( -1, 1);
  transform: scale(-1, 1);
}
section.bnr-area .slick-next::before {
  background-image: url(../img/link_arrow.png);
}
.bnr-list {
  display: none;
}
.bnr-list.slick-initialized {
  display: block; /*slick-initializedが付与されたら表示*/
}

@media screen and (max-width: 767px) {
  section.bnr-area {
    padding: 10px 30px;
  }
  section.bnr-area ul.bnr-list {
    width: auto;
  }
  section.bnr-area ul.bnr-list li {
    margin: 0 5px;
  }
  .slick-prev {
    left: -25px;
  }
  .slick-next {
    right: -25px;
  }
  .slick-prev, .slick-next {
    width: 20px;
    height: 20px;
  }
  .slick-prev::before, .slick-next::before {
    width: 20px;
    height: 20px;
  }
}

/*  intro-area
-------------------- */
.intro-area {
  padding: 50px 0;
  text-align: center;
}
.intro-area .txt p {
  color: #fff;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.6;
  letter-spacing: 0;
  margin-top: 10px;
}
.intro-area .txt p span {
  font-size: 14px;
}

@media screen and (max-width: 767px) {
  .intro-area {
    padding: 10% 20px;
  }
  .intro-area .txt p {
    font-size: 12px;
  }
  .intro-area .txt p span {
    font-size: 10px;
  }
}

/* ------------------------------
  concept-area
------------------------------ */
section.concept-area {
  margin-bottom: -4%;
  height: 1080px;
}
section.concept-area .concept-inner {
  position: absolute;
  top: 0;
  width: 100%;
  height: 1080px;
  z-index: 2;
}
section.concept-area .concept-inner::before {
  background: url(../img/concept_kawauso_left.png) no-repeat left -260px bottom,
  url(../img/concept_kawauso_right.png) no-repeat right -170px bottom -100px,
  url(../img/concept_bg.jpg) no-repeat center bottom;
  -webkit-background-size: auto, auto, cover;
  background-size: auto, auto, cover;
}
section.concept-area .inner {
  padding-top: 100px;
  padding-bottom: 20%;
}
section.concept-area .txt {
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  line-height: 2;
  letter-spacing: 0.15em;
  text-align: center;
  text-shadow: 0 0 10px #000;
}
section.concept-area .txt span {
  font-size: 80px;
}

/*  starwars-txt
-------------------- */
.starwars-txt {
  overflow: hidden;
  height: 400px;
  transform: perspective(350px) rotateX(25deg);
}
.starwars-scroll {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding-top: 400px;
}
.scroll-animation {
  animation: scroll;
  animation-duration: 15s;
  animation-timing-function: linear;
}
@keyframes scroll{
  0% {top: 0;}
  100% {top: -900px;}
}

/*  current
-------------------- */
section.concept-area .concept-inner-current {
  position: absolute;
  top: 0;
  width: 100%;
  height: 1080px;
}
section.concept-area .concept-inner-current::before {
  background: url(../img/concept_kawauso_left.png) no-repeat left -260px bottom,
  url(../img/concept_kawauso_right.png) no-repeat right -170px bottom -100px;
  background-color: #000;
  -webkit-background-size: auto, auto;
  background-size: auto, auto;
}
section.concept-area .concept-inner-current h3 {
  text-align: center;
}
section.concept-area .circle-text {
  position: absolute;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  box-shadow: 0 0 50px #00c6ff;
}
section.concept-area .circle-text.first {
  top: 390px;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding-top: 60px;
}
section.concept-area .circle-text.second {
  top: 680px;
  left: 50%;
  margin-left: -340px;
  padding-top: 80px;
}
section.concept-area .circle-text.third {
  top: 680px;
  right: 50%;
  margin-right: -340px;
  padding-top: 80px;
}
section.concept-area .circle-text {
  opacity: 0;
}
/* animation */
.circle-text.first.fade-animation { animation: fade 0.8s ease 1.0s 1 forwards; }
.circle-text.second.fade-animation { animation: fade 0.8s ease 1.5s 1 forwards; }
.circle-text.third.fade-animation { animation: fade 0.8s ease 2.0s 1 forwards; }

@keyframes fade {
  0% {
    opacity: 0;
    transform: scale(0,0);
  }
  100% {
    opacity: 1;
    transform: scale(1,1);
  }
}

section.concept-area .circle-text h4 {
  color: #00c6ff;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin-bottom: 25px;
}
section.concept-area .circle-text h4 span {
  font-size: 20px;
}
section.concept-area .circle-text p {
  padding: 0 35px;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 1.5;
}

@media screen and (max-width: 767px) {
  section.concept-area,
  section.concept-area .concept-inner {
    height: 550px;
  }
  section.concept-area .concept-inner::before {
    background: url(../img/concept_kawauso_left.png) no-repeat left -22% bottom,
    url(../img/concept_kawauso_right.png) no-repeat right -20% bottom,
    url(../img/concept_bg.jpg) no-repeat center bottom;
    -webkit-background-size: 40% auto, 40% auto, cover;
    background-size: 40% auto, 40% auto, cover;
  }
  section.concept-area .inner {
    padding-top: 10%;
  }
  section.concept-area .txt {
    font-size: 16px;
    line-height: 1.8;
  }
  section.concept-area .txt span {
    font-size: 32px;
  }

  /*  starwars-txt
  -------------------- */
  .starwars-txt {
    height: 300px;
    margin-top: -13%;
  }
  .starwars-scroll {
    padding-top: 300px;
  }
  @keyframes scroll{
    0% {top: 0;}
    100% {top: -550px;}
  }

  /*  current
  -------------------- */
  section.concept-area .concept-inner-current {
    height: 795px;
  }
  section.concept-area .concept-inner-current::before {
    background: url(../img/concept_kawauso_left.png) no-repeat left -22% bottom,
    url(../img/concept_kawauso_right.png) no-repeat right -20% bottom;
    background-color: #000;
    -webkit-background-size: 40% auto, 40% auto;
    background-size: 40% auto, 40% auto;
  }
  section.concept-area .concept-inner-current h3 {
    width: 70%;
    margin: 0 auto;
  }
  section.concept-area .circle-text {
    width: 260px;
    height: 260px;
    box-shadow: 0 0 30px #00c6ff;
  }
  section.concept-area .circle-text h4 {
    font-size: 16px;
    margin-bottom: 15px;
  }
  section.concept-area .circle-text h4 span {
    font-size: 12px;
  }
  section.concept-area .circle-text p {
    padding: 0 30px;
    font-size: 13px;
  }
  section.concept-area .circle-text.first {
    top: 180px;
    left: 50%;
    width: 280px;
    height: 280px;
    margin-left: -40%;
    padding-top: 50px;
  }
  section.concept-area .circle-text.second {
    top: 430px;
    left: 50%;
    width: 260px;
    height: 260px;
    margin-left: -62%;
    padding-top: 55px;
    padding-left: 25px;
  }
  section.concept-area .circle-text.third {
    top: 400px;
    right: 50%;
    width: 220px;
    height: 220px;
    margin-right: -62%;
    padding-top: 60px;
    padding-right: 25px;
  }
}

/* ------------------------------
  ranking-area
------------------------------ */
section.ranking-area {
  position: relative;
  margin-bottom: -4%;
  color: #fff;
  background: url(../img/ranking_bg_top.png) no-repeat center top -6%,
  url(../img/ranking_bg_bottom.png) no-repeat left bottom -35%;
}
section.ranking-area::before,
section.ranking-area::after {
  content: "";
  position: absolute;
  background: url(../img/ranking_bg_decoration.png) no-repeat left top;
  width: 674px;
  height: 520px;
}
section.ranking-area::before {
  top: -5%;
  left: -5%;
}
section.ranking-area::after {
  top: -9%;
  right: -7%;
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
section.ranking-area .inner {
  padding-top: 120px;
}
section.ranking-area h2 {
  position: relative;
  width: 950px;
  margin: 0 auto 30px;
}
section.ranking-area h2 img {
  width: 100%;
  height: auto;
}
section.ranking-area h2 span {
  position: absolute;
  top: 47px;
  left: 50%;
  display: block;
  margin-left: -220px;
  color: #000;
  font-size: 38px;
  font-weight: bold;
  font-weight: 800;
  transform: rotate(-4deg);
}
section.ranking-area .sub-txt {
  margin-bottom: 20px;
  text-align: center;
}
section.ranking-area ul.ranking-top3 {
  position: relative;
  margin-bottom: 40px;
  text-align: center;
}
section.ranking-area ul.ranking-top3 li {
  position: relative;
  display: inline-block;
  margin: 0 4px;
  z-index: 1;
}
section.ranking-area ul.ranking-top3 li img {
  margin-bottom: 10px;
}
section.ranking-area ul.ranking-top3 .link a {
  margin: 0 auto;
}
section.ranking-area .ranking-conts {
  margin-bottom: 50px;
  padding: 40px 70px;
  border: 1px solid #89ff4d;
  background: url(../img/ranking_bg.png) repeat;
}
section.ranking-area ul.ranking-list {
  overflow: hidden;
}

/*  ranking-list top3
-------------------- */
section.ranking-area ul.ranking-list.top3 {
  margin-bottom: 60px;
  padding-bottom: 60px;
  border-bottom: 4px dotted #fff;
}
section.ranking-area ul.ranking-list.top3 li {
  width: 249px;
  margin: 0 35px !important;
}
section.ranking-area ul.ranking-list.top3 .photo {
  float: none;
  width: 249px;
  margin-bottom: 20px;
}
section.ranking-area ul.ranking-list.top3 .txt {
  float: none;
  width: 249px;
  text-align: center;
}
section.ranking-area ul.ranking-list.top3 .number {
  line-height: 1.4;
}
section.ranking-area ul.ranking-list.top3 .number .fll {
  margin-top: -15px;
  font-size: 30px;
}
section.ranking-area ul.ranking-list.top3 .number .fll span.t-b {
  font-size: 45px;
}
section.ranking-area ul.ranking-list.top3 .link a {
  margin: 0 auto;
}
/* rank01 */
section.ranking-area ul.ranking-list .rank01 .photo img {
  border: 1px solid #e5c64c;
  box-shadow: 0 0 10px #e5c64c;
}
section.ranking-area ul.ranking-list .rank01 .number .fll {
  color: #e5c64c;
}
/* rank02 */
section.ranking-area ul.ranking-list .rank02 .photo img {
  border: 1px solid #dcdddd;
  box-shadow: 0 0 10px #dcdddd;
}
section.ranking-area ul.ranking-list .rank02 .number .fll {
  color: #dcdddd;
}
/* rank03 */
section.ranking-area ul.ranking-list .rank03 .photo img {
  border: 1px solid #c27027;
  box-shadow: 0 0 10px #c27027;
}
section.ranking-area ul.ranking-list .rank03 .number .fll {
  color: #c27027;
}

/*  ranking-list
-------------------- */
section.ranking-area ul.ranking-list li {
  float: left;
  width: 454px;
  margin-right: 50px;
  margin-bottom: 50px;
}
section.ranking-area ul.ranking-list li:nth-child(2n) {
  margin-right: 0;
}
section.ranking-area ul.ranking-list .photo {
  width: 140px;
}
section.ranking-area ul.ranking-list .photo img {
  width: 100%;
  height: auto;
  padding: 2px;
  border: 1px solid #89ff4d;
  box-shadow: 0 0 10px #89ff4d;
}
section.ranking-area ul.ranking-list .txt {
  width: 290px;
  color: #fff;
}
section.ranking-area ul.ranking-list .number {
  overflow: hidden;
  margin-bottom: 10px;
  border-bottom: 1px solid #fff;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.1em
}
section.ranking-area ul.ranking-list .number .fll {
  font-style: italic;
  margin-top: -3px;
}
section.ranking-area ul.ranking-list .number .fll span.t-b {
  font-size: 35px;
  font-weight: bold;
}
section.ranking-area ul.ranking-list .number .flr span.t-b {
  font-size: 30px;
  font-weight: bold;
}
section.ranking-area ul.ranking-list .name {
  margin-bottom: 15px;
  font-size: 15px;
  line-height: 1.3;
}
section.ranking-area ul.ranking-list .name span.t-b {
  color: #fff100;
  font-size: 24px;
  font-weight: bold;
}
section.ranking-area ul.ranking-list .name span.t-s {
  font-size: 13px;
}
section.ranking-area ul.ranking-top3 .link a,
section.ranking-area ul.ranking-list .link a {
  position: relative;
  display: block;
  width: 200px;
  margin-top: 7px;
  padding: 3px 0;
  color: #000;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  background: #fff;
  border-radius: 20px;
  line-height: 1;
}
section.ranking-area ul.ranking-top3 .link a:hover,
section.ranking-area ul.ranking-list .link a:hover {
  background: #ccc;
}
section.ranking-area ul.ranking-top3 .link a::after,
section.ranking-area ul.ranking-list .link a::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #000;
}

section.ranking-area .ranking-btn {
  display: block;
  width: 474px;
  margin: 0 auto;
  text-align: center;
}

@media screen and (max-width: 767px) {
  section.ranking-area {
    position: relative;
    background: url(../img/ranking_bg_top.png) no-repeat center top -1.3%,
    url(../img/ranking_bg_bottom.png) no-repeat left bottom -35%;
    -webkit-background-size: 100% auto, auto auto;
    background-size: 100% auto, auto auto;
  }
  section.ranking-area::before,
  section.ranking-area::after {
    content: "";
    position: absolute;
    background: url(../img/ranking_bg_decoration.png) no-repeat left top;
    width: 337px;
    height: 260px;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
  }
  section.ranking-area::before {
    top: -2.5%;
    left: -12%;
  }
  section.ranking-area::after {
    top: -1%;
    right: -43%;
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
  }
  section.ranking-area .inner {
    position: static;
    padding: 50% 20px 15%;
  }
  section.ranking-area h2 {
    position: absolute;
    top: 2.5%;
    left: -5%;
    right: 0;
    width: 110%;
    margin: 0 auto 25px;
    z-index: 1;
  }
  section.ranking-area h2 span {
    top: 33%;
    margin-left: -47%;
    font-size: 20px;
    font-size: 6.25vw;
  }
  section.ranking-area ul.ranking-top3 {
    margin-bottom: 10px;
    background: url(../img/ranking_bg_decoration.png) top center repeat-y;
  }
  section.ranking-area ul.ranking-top3 li {
    margin-bottom: 25px;
  }
  section.ranking-area ul.ranking-top3 li:nth-child(2),
  section.ranking-area ul.ranking-top3 li:nth-child(3) {
    width: 60%;
    margin: 0 auto 25px;
  }
  section.ranking-area ul.ranking-top3 li img {
    margin-bottom: 5px;
  }
  section.ranking-area .ranking-conts {
    margin-bottom: 30px;
    padding: 20px;
  }
  /*  ranking-list top3
  -------------------- */
  section.ranking-area ul.ranking-list.top3 {
    padding-bottom: 10px;
  }
  section.ranking-area ul.ranking-list.top3 li {
    float: none;
    width: 70%;
    margin: 0 auto 40px !important;
  }
  section.ranking-area ul.ranking-list.top3 .photo,
  section.ranking-area ul.ranking-list.top3 .txt {
    width: auto;
  }
  section.ranking-area ul.ranking-list.top3 .photo {
    margin-bottom: 10px;
  }
  section.ranking-area ul.ranking-list.top3 .number {
    line-height: 1.7;
  }
  section.ranking-area ul.ranking-list.top3 .number .fll {
    margin-top: -17px;
    font-size: 20px;
  }
  section.ranking-area ul.ranking-list.top3 .number .fll span.t-b {
    font-size: 35px;
  }
  section.ranking-area ul.ranking-list.top3 .number .flr {
    font-size: 18px;
  }
  section.ranking-area ul.ranking-list.top3 .number .flr span.t-b {
    font-size: 20px;
  }
  section.ranking-area ul.ranking-list.top3 .name span.t-b {
    font-size: 22px;
  }


  /*  ranking-list
  -------------------- */
  section.ranking-area ul.ranking-list li {
    width: auto;
    margin: 0 auto 40px;
  }
  section.ranking-area ul.ranking-list .photo {
    float: left;
    width: 35%;
  }
  section.ranking-area ul.ranking-list .txt {
    float: right;
    width: 60%;
  }
  section.ranking-area ul.ranking-list .number {
    margin-bottom: 5px;
    font-size: 14px;
  }
  section.ranking-area ul.ranking-list .number .fll {
    float: left;
    margin-top: -6px;
  }
  section.ranking-area ul.ranking-list .number .fll span.t-b {
    font-size: 24px;
  }
  section.ranking-area ul.ranking-list .number .flr {
    float: right;
  }
  section.ranking-area ul.ranking-list .number .flr span.t-b {
    font-size: 18px;
  }
  section.ranking-area ul.ranking-list .name {
    margin-bottom: 8px;
    font-size: 12px;
  }
  section.ranking-area ul.ranking-list .name span.t-b {
    font-size: 18px;
  }
  section.ranking-area ul.ranking-list .name span.t-s {
    font-size: 10px;
  }
  section.ranking-area ul.ranking-list .link a {
    width: 100%;
    font-size: 10px;
  }

  section.ranking-area .ranking-btn {
    width: auto;
    margin-bottom: 20px;
  }
}

/* ------------------------------
  news-area
------------------------------ */
section.news-area .inner {
  padding-bottom: 13%;
}
section.news-area::before {
  background: url(../img/news_ttl.png) no-repeat center bottom, url(../img/news_bg.jpg) no-repeat center top;
  -webkit-background-size: 2600px auto, cover;
  background-size: 2600px auto, cover;
}
section.news-area .comson {
  text-align: center;
  height: 300px;
  padding-top: 110px;
}
section.news-area ul.ytb-list::after {
  content: '';
  clear: both;
  display: block;
}
section.news-area ul.ytb-list {
  text-align: center;
  margin-bottom: 50px;
}
section.news-area ul.ytb-list.top {
  margin-bottom: 50px;
}
section.news-area ul.ytb-list.bottom {
  margin-bottom: 12%;
}
section.news-area ul.ytb-list li {
  display: inline-block;
  margin-right: 60px;
}
section.news-area ul.ytb-list.top li {
  margin-right: 29px;
}
section.news-area ul.ytb-list li iframe {
  padding: 2px;
  border: 1px solid #7a7a7a;
  box-shadow: 0 0 10px #7a7a7a;
}
section.news-area ul.ytb-list li:last-child {
  margin-right: 0;
}
section.news-area ul.ytb-list li p {
  margin-top: 10px;
  font-size: 17px;
  font-weight: bold;
  text-align: center;
}
section.news-area ul.ytb-list li p span {
  display: inline-block;
  margin-right: 10px;
  padding: 3px 4px;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  background: #b80101;
  line-height: 1;
}

section.news-area .bg-img img {
  position: absolute;
  z-index: 2;
}
section.news-area .bg-img img.img01 {
  top: -160px;
  right: 0;
}
section.news-area .bg-img img.img02 {
  bottom: -4px;
  left: -70px;
}

@media screen and (max-width: 767px) {
  section.news-area .inner {
    padding-bottom: 25%;
  }
  section.news-area::before {
    background: url(../img/news_ttl.png) no-repeat center bottom, url(../img/news_bg.jpg) no-repeat center top;
    -webkit-background-size: 270% auto, cover;
    background-size: 270% auto, cover;
  }
  section.news-area .comson {
    text-align: center;
    height: 100px;
    padding-top: 20px;
  }
  section.news-area ul.ytb-list {
    width: 90%;
    margin: 0 auto 10%;
  }
  section.news-area ul.ytb-list.top {
    margin: 0 auto 30px;
  }
  section.news-area ul.ytb-list li,
  section.news-area ul.ytb-list.top li {
    width: 45%;
    margin: 0 5px;
  }
  section.news-area ul.ytb-list li iframe {
    padding: 1px;
    box-shadow: 0 0 5px #7a7a7a;
  }
  section.news-area .slick-prev::before {
    background-image: url(../img/link_arrow_b.png);
    transform: rotate(180deg);
  }
  section.news-area .slick-next::before {
    background-image: url(../img/link_arrow_b.png);
  }

  section.news-area ul.ytb-list li p {
    margin-top: 10px;
    font-size: 14px;
    font-weight: bold;
  }
  section.news-area ul.ytb-list li p span {
    font-size: 10px;
    margin-bottom: 3px;
  }
  .ytb-list {
    display: none;
  }
  .ytb-list.slick-initialized {
    display: block; /*slick-initializedが付与されたら表示*/
  }

  section.news-area .bg-img img.img01 {
    top: -40px;
    right: -5%;
    width: 120px;
  }
  section.news-area .bg-img img.img02 {
    bottom: 15px;
    left: -5%;
    width: 120px;
  }
}

/* ------------------------------
  movie-area
------------------------------ */
section.movie-area .h2-sub {
  position: absolute;
  top: -110px;
  right: 50%;
  margin-right: -53%;
}
section.movie-area .comson {
  height: 551px;
  padding-top: 200px;
  color: #fff;
  font-size: 70px;
  font-weight: bold;
  text-align: center;
}
section.movie-area .ytb {
  width: 980px;
  margin: 0 auto;
  padding: 3px;
  border: 1px solid #00c6ff;
  box-shadow: 0 0 10px #00c6ff;
  box-sizing: content-box;
}
section.movie-area .movie-share {
  float: right;
  margin-top: 10px;
  margin-right: 50px;
  width: 285px;
  color: #fff;
}
section.movie-area .movie-share p {
  font-size: 18px;
  font-weight: bold;
  line-height: 40px;
  margin-right: 5px;
}
section.movie-area .movie-share p,
section.movie-area .movie-share ul {
  float: left;
}
section.movie-area .movie-share ul li {
  display: inline-block;
  margin: 0 3px;
}
section.movie-area .movie-share ul li a {
  display: block;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  text-indent: -9999px;
}
section.movie-area .movie-share ul li.fb a {
  background-image: url(../img/movie_ico_fb.png);
}
section.movie-area .movie-share ul li.tw a {
  background-image: url(../img/movie_ico_tw.png);
}

@media screen and (max-width: 767px) {
  section.movie-area h2 {
    position: relative;
    z-index: 1;
  }
  section.movie-area .h2-sub {
    top: -24px;
    right: -3%;
    width: 45%;
    margin: 0;
  }
  section.movie-area .comson {
    height: 200px;
    padding-top: 70px;
    font-size: 30px;
  }
  section.movie-area .ytb {
    width: 100%;
    padding-top: 56.25%;
    box-shadow: 0 0 5px #00c6ff;
    box-sizing: border-box;
  }
  section.movie-area .movie-share {
    float: right;
    margin-top: 7px;
    margin-right: 0;
    width: 230px;
    color: #fff;
  }
  section.movie-area .movie-share p {
    font-size: 15px;
    line-height: 30px;
    margin-right: 3px;
  }
  section.movie-area .movie-share ul li a {
    width: 30px;
    height: 30px;
  }
}

/* ------------------------------
  member-area
------------------------------ */
section.member-area::before {
  overflow: hidden;
  background: url(../img/member_img.png) no-repeat bottom 0 left 12%, url(../img/member_bg.jpg) no-repeat center top #fffded;
  -webkit-background-size: auto, cover;
  background-size: auto, cover;
}
section.member-area .copy {
  width: 450px;
  margin: 0 auto 70px;
  background: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
}

@media screen and (min-width: 768px) {
/*  member-tab
-------------------- */
ul.member-tab {
  position: relative;
  width: 1100px;
  height: 93px;
  margin-bottom: 30px;
}
ul.member-tab li a {
  float: left;
  display: block;
  height: 93px;
  background: url(../img/member_tab_bg.png) no-repeat center left;
  -webkit-background-size: auto 100%;
  background-size: auto 100%;
  text-indent: -9999px;
}
ul.member-tab li:nth-child(1).select a,
ul.member-tab li:nth-child(1) a {
  width: 249px;
}
ul.member-tab li:nth-child(2) a,
ul.member-tab li:nth-child(2).select a,
ul.member-tab li:nth-child(2) a:hover {
  width: 142px;
  background-position: center left -249px;
}
ul.member-tab li:nth-child(3) a,
ul.member-tab li:nth-child(3).select a,
ul.member-tab li:nth-child(3) a:hover {
  width: 204px;
  background-position: center left -391px;
}
ul.member-tab li:nth-child(4) a,
ul.member-tab li:nth-child(4).select a,
ul.member-tab li:nth-child(4) a:hover {
  width: 142px;
  background-position: center left -595px;
}
ul.member-tab li:nth-child(5) a,
ul.member-tab li:nth-child(5).select a,
ul.member-tab li:nth-child(5) a:hover {
  width: 201px;
  background-position: center left -737px;
}
ul.member-tab li:nth-child(6) a,
ul.member-tab li:nth-child(6).select a,
ul.member-tab li:nth-child(6) a:hover {
  width: 162px;
  background-position: center left -938px;
}
ul.member-tab li.select a,
ul.member-tab li a:hover {
  background: url(../img/member_tab_bg_hover.png) no-repeat;
  -webkit-background-size: auto 100%;
  background-size: auto 100%;
}

ul.member-tab::before,
ul.member-tab::after {
  content: '';
  position: absolute;
  bottom: 92px;
}
ul.member-tab::before {
  left: 25px;
  width: 306px;
  height: 293px;
  background: url(../img/member_bg_img_left.png) no-repeat center bottom;
}
ul.member-tab::after {
  right: 25px;
  width: 287px;
  height: 278px;
  background: url(../img/member_bg_img_right.png) no-repeat center bottom;
}
}

/*  tab-content
-------------------- */
.tab-content .head-area {
  height: 106px;
  margin-bottom: 30px;
  background-repeat: no-repeat;
  background-position: center;
}
.tab-content .head-area#area1 { background-image:url(../img/member_lead01.png); }
.tab-content .head-area#area2 { background-image:url(../img/member_lead02.png); }
.tab-content .head-area#area3 { background-image:url(../img/member_lead03.png); }
.tab-content .head-area#area4 { background-image:url(../img/member_lead04.png); }
.tab-content .head-area#area5 { background-image:url(../img/member_lead05.png); }
.tab-content .head-area#area6 { background-image:url(../img/member_lead06.png); }
.tab-content .head-area#area7 { background-image:url(../img/member_lead07.png); }

.tab-content ul {
  overflow: hidden;
}
.tab-content > ul > li {
  float: left;
  width: 260px;
  margin-right: 20px;
  margin-bottom: 20px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.7);
}
.tab-content > ul > li:nth-child(4n) {
  margin-right: 0;
}
.tab-content ul li img {
  width: 100%;
  height: auto;
  border: 1px solid #fff;
}
/* sns-area */
.tab-content ul li .sns-area {
  margin-top: 15px;
  text-align: center;
}
.tab-content ul li .sns-area p {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}
.tab-content ul li .sns-area ul li {
  display: inline-block;
  margin: 0 10px;
}
.tab-content ul li .sns-area ul li a {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  text-indent: -9999px;
}
.tab-content ul li .sns-area ul li.fb a {
  background-image: url(../img/ico_fb.jpg);
}
.tab-content ul li .sns-area ul li.tw a {
  background-image: url(../img/ico_tw.jpg);
}

@media screen and (max-width: 767px) {
  section.member-area::before {
    background: url(../img/member_img.png) no-repeat bottom 0 left 5%, url(../img/member_bg.jpg) no-repeat center top #fffded;
    -webkit-background-size: 45% auto, cover;
    background-size: 45% auto, cover;
  }
  section.member-area .inner {
    padding-right: 0;
    padding-left: 0;
  }
  section.member-area h2,
  section.member-area .sp {
    padding-right: 20px;
    padding-left: 20px;
  }
  section.member-area .copy {
    width: 90%;
  }

  /*  member-tab
  -------------------- */
  ul.member-tab {
    overflow: hidden;
    margin: -0.5% auto 20px;
    padding: 0 2%;
  }
  ul.member-tab li a {
    float: left;
    width: 32.3%;
    height: 0;
    padding-top: 12%;
    margin: 0 0.5% 5px;
    background-repeat: no-repeat;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    color: rgba(255,255,255,0);
  }
  ul.member-tab li:nth-child(1) a { background-image:url(../img/member_tab_sp01.png); }
  ul.member-tab li:nth-child(1).select a { background-image:url(../img/member_tab_sp01_hover.png); }

  ul.member-tab li:nth-child(2) a { background-image:url(../img/member_tab_sp02.png); }
  ul.member-tab li:nth-child(2).select a { background-image:url(../img/member_tab_sp02_hover.png); }

  ul.member-tab li:nth-child(3) a { background-image:url(../img/member_tab_sp03.png); }
  ul.member-tab li:nth-child(3).select a { background-image:url(../img/member_tab_sp03_hover.png); }

  ul.member-tab li:nth-child(4) a { background-image:url(../img/member_tab_sp04.png); }
  ul.member-tab li:nth-child(4).select a { background-image:url(../img/member_tab_sp04_hover.png); }

  ul.member-tab li:nth-child(5) a { background-image:url(../img/member_tab_sp05.png); }
  ul.member-tab li:nth-child(5).select a { background-image:url(../img/member_tab_sp05_hover.png); }

  ul.member-tab li:nth-child(6) a { background-image:url(../img/member_tab_sp06.png); }
  ul.member-tab li:nth-child(6).select a { background-image:url(../img/member_tab_sp06_hover.png); }

  ul.member-tab::before,
  ul.member-tab::after {
    display: none;
  }

  .member-list {
    padding: 0 20px;
  }

  /*  tab-content
  -------------------- */
  .tab-content .head-area {
    width: 100%;
    height: 0;
    padding-top: 12.5%;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
  }
  .tab-content > ul > li {
    width: 48%;
    margin-right: 4%;
    margin-bottom: 15px;
    padding: 5px 5px 8px;
  }
  .tab-content > ul > li:nth-child(2n) {
    margin-right: 0;
  }
  /* sns-area */
  .tab-content ul li .sns-area {
    margin-top: 7px;
  }
  .tab-content ul li .sns-area p {
    font-size: 12px;
    line-height: 1.3;
    margin-bottom: 10px;
  }
  .tab-content ul li .sns-area ul li {
    margin: 0 7px;
  }
}

/* ------------------------------
  comment-area
------------------------------ */
section.comment-area {
  color: #fff;
}

/*  comment-list
-------------------- */
section.comment-area ul.comment-list {
  overflow: hidden;
}
section.comment-area ul.comment-list li {
  float: left;
  width: 525px;
  margin-right: 50px;
  margin-bottom: 50px;
}
section.comment-area ul.comment-list li:nth-child(2n) {
  margin-right: 0;
}
section.comment-area ul.comment-list li:last-child {
  margin-bottom: 0;
}
section.comment-area ul.comment-list li .photo {
  width: 150px;
  margin-right: 20px;
  padding: 5px 0 0 5px;
}
section.comment-area ul.comment-list li .photo img {
  width: 100%;
  height: auto;
  padding: 2px;
  border: 1px solid #00c6ff;
  box-shadow: 0 0 10px #00c6ff;
}
section.comment-area ul.comment-list li .link-list {
  clear: left;
  width: 150px;
  padding: 5px 0 0 5px;
}
section.comment-area ul.comment-list li .link-list a {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 3px 0;
  color: #000;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  background: #fff;
  border-radius: 20px;
}
section.comment-area ul.comment-list li .link-list a:hover {
  background: #ccc;
}
section.comment-area ul.comment-list li .link-list a::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #000;
}
section.comment-area ul.comment-list li .flr {
  width: 355px;
}
section.comment-area ul.comment-list li .txt .ttl {
  position: relative;
  display: inline-block;
  padding: 0 20px;
  font-weight: bold;
  letter-spacing: 0.05em;
}
section.comment-area ul.comment-list li .txt .ttl span {
  color: #fff100;
}
section.comment-area ul.comment-list li .txt .ttl::before,
section.comment-area ul.comment-list li .txt .ttl::after {
  content: '';
  position: absolute;
  font-weight: normal;
}
section.comment-area ul.comment-list li .txt .ttl::before {
  content: '＼';
  left: 0;
}
section.comment-area ul.comment-list li .txt .ttl::after {
  content: '／';
  right: 0;
}
section.comment-area ul.comment-list li .name {
  font-size: 14px;
  color: #00c6ff;
  font-weight: bold;
  margin-top: 10px;
}

@media screen and (max-width: 767px) {
  section.comment-area ul.comment-list li {
    overflow: hidden;
    float: none;
    width: auto;
    margin: 0 auto 40px;
  }
  section.comment-area ul.comment-list li .fll {
    float: left;
    width: 33%;
    margin: 0;
  }
  section.comment-area ul.comment-list li .fll img {
    box-shadow: 0 0 5px #00c6ff;
  }
  section.comment-area ul.comment-list li .flr {
    float: right;
    width: 63%;
    line-height: 1.5;
  }
  section.comment-area ul.comment-list li .name {
    margin-top: 5px;
    font-size: 12px;
  }
  section.comment-area ul.comment-list li .link-list {
    width: 100%;
    margin-top: 10px;
    padding: 0;
  }
  section.comment-area ul.comment-list li .link-list a {
    float: left;
    width: 47%;
    margin: 0 1.5% 8px;
    padding: 5px 0;
    font-size: 11px;
    border-radius: 10px;
  }
}

/* ------------------------------
  howto-area
------------------------------ */
section.howto-area {
  background: rgba(29,46,141,0.5);
}
section.howto-area .h2-sub {
  position: absolute;
  top: 95px;
  left: 50%;
  margin-left: -430px;
}
section.howto-area .lead {
  color: #fff;
}

/*  howto-conts
-------------------- */
section.howto-area .howto-conts {
  position: relative;
  margin-bottom: 50px;
  padding: 50px 100px;
  background: #fff;
  border-radius: 60px;
  text-align: center;
}
section.howto-area h3 {
  margin-bottom: 35px;
  text-align: center;
}
section.howto-area .h3-sub {
  position: absolute;
  top: -38px;
  left: 90px;
  z-index: 10;
}
section.howto-area h4 {
  font-size: 26px;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
}
section.howto-area .copy {
  font-weight: normal;
  margin-top: 6px;
}
section.howto-area .txt p {
  margin-bottom: 20px;
}
section.howto-area .txt b {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
}

/*  az-area
-------------------- */
section.howto-area .az-area {
  position: relative;
  margin-top: 50px;
  padding: 50px 30px;
  background: url(../img/howto_line.jpg) repeat;
}
section.howto-area .az-area::before {
  content: '';
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;
  width: auto;
  height: auto;
  background: #fff;
  padding: 10px;
}
section.howto-area .az-area h5 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 230px;
  margin: 0 auto;
  color: #1a275b;
  font-size: 20px;
  font-weight: bold;
  z-index: 1;
  background: #fff;
}
section.howto-area .az-area .txt {
  position: relative;
  margin-bottom: 30px;
  z-index: 1;
}
section.howto-area ul.howto-list {
  position: relative;
  text-align: center;
  z-index: 1;
}
section.howto-area ul.howto-list li {
  display: inline-block;
  margin: 0 15px;
  vertical-align: bottom;
}
/* hukidashi */
.hukidashi {
  position: relative;
  width: 260px;
  height: 50px;
  margin: 0 60px 15px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  border-radius: 5px;
  background: #1a275b;
  line-height: 1.3;
  text-align: center;
}
.hukidashi::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 0;
  right: 0;
  width: 0;
  margin: 0 auto;
  border: 7px solid transparent;
  border-top-color: #1a275b;
  border-bottom-width: 0;
}
/* howto-btn */
section.howto-area .howto-btn a {
  display: block;
  width: 380px;
  height: 60px;
  margin: 0 auto;
  color: #1a275b;
  font-size: 20px;
  font-weight: bold;
  border: 2px solid #1a275b;
  border-radius: 5px;
  box-shadow: 0 4px 0 #1a275b;
  background: #fff;
  line-height: 56px;
  text-align: center;
}
section.howto-area .howto-conts .howto-btn a:hover {
  color: #fff;
  background: #1a275b;
}
section.howto-area .bnr {
  text-align: center;
}

@media screen and (max-width: 767px) {
  /*  howto-conts
  -------------------- */
  section.howto-area .howto-conts {
    margin: 0 15px 40px;
    padding: 30px 20px;
    border-radius: 30px;
  }
  section.howto-area h3 {
    margin-bottom: 20px;
  }
  section.howto-area .h3-sub {
    position: absolute;
    top: -35px;
    left: 5px;
    width: 65px;
    z-index: 10;
  }
  section.howto-area h4,
  section.howto-area .txt b {
    font-size: 14px;
    line-height: 1.4;
  }
  section.howto-area .copy {
    line-height: 1.4;
    text-align: left;
    margin-top: 15px;
  }
  section.howto-area .txt p {
    margin-bottom: 15px;
  }

  /*  az-area
  -------------------- */
  section.howto-area .az-area {
    margin-top: 40px;
    padding: 30px 20px;
  }
  section.howto-area .az-area::before {
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
  }
  section.howto-area .az-area h5 {
    width: 170px;
    font-size: 15px;
  }
  section.howto-area ul.howto-list li {
    display: block;
    margin: 0 auto;
  }
  section.howto-area ul.howto-list li:first-child {
    margin-bottom: 25px;
  }
  .hukidashi {
    width: 100%;
    height: 42px;
    margin: 0 auto 10px;
    font-size: 11px;
  }
  section.howto-area .txt-l,
  section.howto-area .az-area .txt {
    text-align: left;
  }

  /* howto-btn */
  section.howto-area .howto-btn a {
    width: auto;
    height: auto;
    padding: 10px 0;
    font-size: 14px;
    line-height: 1;
  }
}

/* ------------------------------
  join-area
------------------------------ */
section.join-area {
  background: #fff;
}
section.join-area .inner {
  padding-bottom: 0;
}
section.join-area ul.join-list li {
  float: left;
  width: 190px;
  margin-right: 37px;
  margin-bottom: 30px;
}
section.join-area ul.join-list li:nth-child(5n) {
  margin-right: 0;
}
section.join-area ul.join-list li img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 767px) {
  section.join-area ul.join-list li {
    width: 30%;
    margin-right: 5%;
    margin-bottom: 20px;
  }
  section.join-area ul.join-list li:nth-child(5n) {
    margin-right: 5%;
  }
  section.join-area ul.join-list li:nth-child(3n) {
    margin-right: 0;
  }
}