html {
  font-family: "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-family: "Kiwi Maru", serif;
  font-weight: 400;
  font-style: normal;
  color: #ffffff;
  font-size: 62.5%;
  line-height: 2;
}

img {
  max-width: 100%;
}

.container {
  width: 1024px;
  max-width: 95%;
  margin: 0 auto;
}

#news .contents,
#product .contents,
#contact .contents {
  position: relative;
  z-index: 1;
}

.section-title {
  font-size: 3.8rem;
  margin-bottom: 20px;
}

.section-desc {
  font-size: 1.8rem;
}

.logo {
  width: 50px;
}

section#news,
section#company,
section#contact {
  padding: 100px 0;
}

/* -----------------------
fede-inアニメーション
--------------------------*/

/* スクロールCSS */
.fade-in {
  opacity: 0;
  transition-duration: 600ms;
  transition-property: opacity, transform;
}

.fade-in.slow-fade-in {
  transition-duration: 1500ms;
}

.fade-in.super-slow-fade-in {
  transition-duration: 2000ms;
}

.fade-in-up {
  transform: translate(0, 50px);
}

.fade-in-down {
  transform: translate(0, -50px);
}

.fade-in-left {
  transform: translate(-50px, 0);
}

.fade-in-right {
  transform: translate(50px, 0);
}

.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}

/* -----------------------
mainvisial
--------------------------*/

#main-visial {
  background: url(../img/main-bg.jpg) center center no-repeat;
  /* background-attachment: fixed; */
  background-size: cover;
  height: 100vh;
  padding-top: 50px;
  position: relative;
  overflow: hidden;
}

#main-visial .container {
  position: relative;
  height: 100%;
}

#main-visial .pc-header {
  width: 850px;
  max-width: 95%;
  margin: 0 auto;
  border-radius: 1000px;
  background-color: #18c0ff;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  position: fixed;
  z-index: 999;
  right: 0;
  left: 0;
  padding: 10px 30px;
}

#main-visial .sp-header {
  width: 850px;
  max-width: 95%;
  margin: 0 auto;
  border-radius: 1000px;
  background-color: #18c0ff;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  position: fixed;
  z-index: 999;
  right: 0;
  left: 0;
  padding: 10px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header {
  transition: .5s;
  opacity: 1;
}

.site-header.hide {
  transform: translateY(-100%);
  opacity: 0;
}

/* ヘッダーのナビ部分 */

.header__nav {
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  transform: translateX(100%);
  opacity: 0;
  background-color: #1bc0ff;
  transition: ease .4s;
}

.nav-items {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
}

/* ナビのリンク */
.nav-items__item a {
  color: black;
  width: 100%;
  display: block;
  text-align: center;
  font-size: 20px;
  margin-bottom: 24px;
  color: #fff;
}

.nav-items__item:last-child a {
  margin-bottom: 0;
}

/* ハンバーガーメニュー */

.header__hamburger {
  width: 35px;
  height: 100%;
}

.hamburger {
  background-color: transparent;
  border-color: transparent;
  z-index: 9999;
}

/* ハンバーガーメニューの線 */
.hamburger span {
  width: 100%;
  height: 4px;
  background-color: #0044aa;
  position: relative;
  transition: ease .4s;
  display: block;
}

.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  margin: 8px 0;
}

.hamburger span:nth-child(3) {
  top: 0;
}


/* ハンバーガーメニュークリック後のスタイル */
.header__nav.active {
  transform: translateX(0);
  opacity: 1;
}

.hamburger.active span:nth-child(1) {
  top: 11px;
  transform: rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;

}

.hamburger.active span:nth-child(3) {
  top: -13px;
  transform: rotate(-45deg);
}

@media (max-width: 961px) {
  #main-visial .pc-header {
    display: none;
  }
}

@media (min-width: 961px) {
  #main-visial .sp-header {
    display: none;
  }
}

#main-visial .pc-header nav ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 1.8rem;
}

#main-visial .pc-header nav ul li a {
  color: #fff;
  transition: 0.2s;
}

#main-visial .pc-header nav ul li a:hover {
  color: #ff8004;
}

#main-visial .contents .text-contents {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: auto;
  z-index: 1;
}

#main-visial .contents .text-contents .copy {
  color: #0044aa;
  font-size: 7.8rem;
  line-height: 1.4;
  background: linear-gradient(90deg, #002b7f 0%, #0044aa 50%, #66ccff 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

#main-visial .contents .text-contents .sub-copy {
  font-size: 2.6rem;
  margin-top: 40px;
  letter-spacing: 0.5em;
  line-height: 1.4;
}

#main-visial .contents .text-contents .sub-copy .bg {
  background-color: #ff8004;
  padding-bottom: 3px;
  padding-left: 16px;
  margin-bottom: 15px;
  border-radius: 100px;
  display: inline-block;
}

#main-visial .contents .img-contents {
  position: absolute;
  top: 0%;
  margin: auto;
  right: -18%;
}

#main-visial .bubble {
  position: absolute;
  z-index: 0;
}

#main-visial .bubble.bubble01 {
  top: 35%;
  right: 30%;
  width: 95px;
}

#main-visial .bubble.bubble02 {
  top: 38%;
  right: 80%;
  width: 60px;
}

#main-visial .bubble.bubble03 {
  top: 62%;
  right: 84%;
  width: 80px;

}

#main-visial .bubble.bubble04 {
  top: 60%;
  right: 28%;
  width: 110px;
}

#main-visial .bubble.bubble05 {
  top: 78%;
  right: 42%;
  width: 50px;
}

#main-visial .bubble.bubble06 {
  top: 10%;
  right: 61%;
  width: 110px;
}

#main-visial .bubble.bubble07 {
  top: 42%;
  right: 51%;
  width: 50px;
}

#main-visial .bubble.bubble08 {
  top: 78%;
  right: 54%;
  width: 50px;
}

#main-visial .bubble.bubble09 {
  top: 60%;
  right: 38%;
  width: 50px;
}

#main-visial .bubble.bubble10 {
  top: 28%;
  right: 13%;
  width: 50px;
}

#main-visial .bubble.bubble11 {
  top: 38%;
  right: 9%;
  width: 50px;
}

#main-visial .bubble.bubble12 {
  top: 48%;
  right: 13%;
  width: 50px;
}

#main-visial .bubble.bubble13 {
  top: 58%;
  right: 19%;
  width: 50px;
}

#main-visial .bubble.bubble14 {
  top: 48%;
  right: 21%;
  width: 50px;
}

#main-visial .bubble.bubble15 {
  top: 78%;
  right: 20%;
  width: 50px;
}


/* -----------------------
news 
--------------------------*/

#news {
  background-color: #18c0ff;
  position: relative;
}

#news .item {
  overflow: scroll;
  max-height: 300px;
  margin-top: 60px;
}

#news .item ul li {
  font-size: 1.6rem;
  padding: 40px 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
}

#news .item ul li:first-child {
  border-top: 1px solid #ccc;
}

#news .item ul li .date {
  width: 250px;
  margin-left: 10px;
  font-size: 1.4rem;
}

/* -----------------------
bubble 
--------------------------*/
#news .bubble,
#product .bubble {
  position: absolute;
  z-index: 0;
}

#news .bubble.bubble01,
#product .bubble.bubble01 {
  top: 2%;
  right: 12%;
  width: 95px;
}

#news .bubble.bubble02,
#product .bubble.bubble02 {
  top: 70%;
  right: 80%;
  width: 60px;
}

#news .bubble.bubble03,
#product .bubble.bubble03 {
  top: 15%;
  right: 94%;
  width: 80px;
}

#news .bubble.bubble04,
#product .bubble.bubble04 {
  top: 71%;
  right: 0%;
  width: 110px;
}

#news .bubble.bubble05 #product .bubble.bubble05 {
  top: 78%;
  right: 12%;
  width: 50px;
}

/* -----------------------
product 
--------------------------*/

#product .influencer,
#product .encounter,
#product .vtuber {
  padding: 100px 0;
  position: relative;
}

#product .influencer {
  background: #076bfe;
}

#product .encounter {
  background-color: #ffffff;
}

#product .vtuber {
  background-color: #18c0ff;
}

#product .item {
  overflow: hidden;
}

#product .item .contents {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#product .item:nth-child(even) .contents {
  flex-direction: row-reverse;
}

#product .item .text-contents {
  width: 420px;
  margin-right: 12px;
}

#product .item .img-contents {
  width: 500px;
  position: relative;
}

#product .item:nth-child(even) .img-contents {
  margin-right: 0;
  margin-right: 12px;
}

#product .item .img-contents img {
  border: 10px solid #ffffff;
}

#product .item:nth-child(2) .img-contents img {
  border-color: #1bc0ff;
}

#product .item .text-contents h2 {
  font-size: 3.8rem;
  line-height: 1.8;
  letter-spacing: 0.2em;
}

#product .item.encounter .text-contents h2,
#product .item.encounter .text-contents p {
  color: #0044aa;
}

#product .item .text-contents p {
  font-size: 1.6rem;
  margin-top: 60px;
}

/* -----------------------
star 
--------------------------*/

#product .influencer .star,
#product .vtuber .star {
  position: absolute;
  z-index: 0;
}

#product .influencer .star.star01,
#product .vtuber .star.star01 {
  top: -5%;
  right: 89%;
  width: 120px;
}

#product .influencer .star.star02,
#product .vtuber .star.star02 {
  top: 85%;
  right: 15%;
  width: 130px;
}

#product .influencer .star.star03,
#product .vtuber .star.star03 {
  top: 5%;
  left: 86%;
  width: 100px;
}

#product .influencer .star.star04,
#product .vtuber .star.star04 {
  top: 44%;
  left: 49%;
  width: 70px;
}

#product .influencer .star.star05,
#product .vtuber .star.star05 {
  top: 78%;
  right: 87%;
  width: 90px;
}

#product .influencer .star.star06,
#product .vtuber .star.star06 {
  top: 51%;
  right: -6%;
  width: 110px;
}

#product .influencer .star.star07,
#product .vtuber .star.star07 {
  top: 44%;
  left: 7%;
  width: 80px;
}

/* -----------------------
company
--------------------------*/

#company {
  background-color: #0285ff;
  position: relative;
  background: url(../img/main-bg.jpg) center center no-repeat;
  background-size: cover;
}

#company .section-title,
#company .section-desc {
  text-align: center;
  color: #0044aa;
}

#company .company-contents {
  margin-top: 60px;
}

#company .company-contents ul li {
  font-size: 1.6rem;
  padding: 30px 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #0044aa;
}

#company .company-contents ul li .right {
  width: 250px;
  margin-left: 10px;
  font-size: 1.4rem;
  color: #0044aa;
}

.company-contents ul li .left {
  flex: 1;
  color: #0044aa;
}


/* -----------------------
contact
--------------------------*/
#contact {
  background-color: #076bfe;
  position: relative;
  overflow: hidden;
}

#contact .section-title,
#contact .section-desc {
  text-align: center;
}

.contact-form {
  font-size: 1.6rem;
  margin-top: 60px;
}

.contact-form .form-group {
  display: flex;
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: 1px dotted #ddd;
}

.contact-form .form-group.last {
  border: none;
}

.contact-form .form-group label {
  width: 230px;
  display: flex;
  align-items: center;
}

.contact-form .form-group label .tag {
  font-size: 1.2rem;
  color: #fff;
  padding: 2px 8px;
  background-color: #ee0000;
  border-radius: 40px;
  margin-left: 8px;
}

.contact-form .form-group label .tag.required {
  background-color: #ee0000;
}

.contact-form .form-group label .tag.any {
  background-color: #ddd;
  color: #000;
}

.contact-form .form-group .input-area {
  flex: 1;
}

.contact-form .form-group .input-area .sns-account {
  margin-top: 20px;
}

.contact-form .form-group .input-area .sns-account input {
  margin-top: 5px;
}

.contact-form .form-group input,
.contact-form .form-group textarea,
.contact-form .form-group select {
  width: 100%;
  border: 1px solid #ccc;
  background: #eef6ff;
  border-radius: 12px;
  padding: 4px 12px;
  color: #1a1a1a;
  position: relative;
}

.contact-form .form-group .select-box {
  position: relative;
}

.contact-form .form-group .select-box::before {
      content: "";
    position: absolute;
    right: 20px;
    top: 20px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #076bfe;
    border-right: 2px solid #076bfe;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    z-index: 1;
}

.contact-form .form-group .select-box-item {
  width: 100%;
  padding: 10px;
  -webkit-appearance: none;
  appearance: none;
}

.contact-form .form-group .select-box-item::-ms-expand {
  display: none;
}

.contact-form .form-group .input-area .error-message {
  color: #ee0000;
}

.contact-form .btn-wrap {
  text-align: center;
  margin-top: 40px;
}

.contact-form .btn-wrap button {
  width: 200px;
  text-align: center;
  background-color: #0044aa;
  color: #fff;
  border-radius: 60px;
  padding: 10px;
  transition: 0.2s;
}

.contact-form .btn-wrap button:hover {
  opacity: 0.7;
}

#contact .stripe {
  position: absolute;
  z-index: 0;
}

#contact .stripe.stripe01 {
  width: 65vw;
  max-width: 700px;
  top: -20%;
  left: -10%;
}

#contact .stripe.stripe02 {
  width: 65vw;
  max-width: 700px;
  bottom: -20%;
  right: -10%;
}

/* -----------------------
footer
--------------------------*/

footer {
  height: 300px;
  width: 100%;
  background-color: #18c0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

footer .contents {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

}

footer .contents .copyright {
  margin-top: 20px;
  font-size: 1.0rem;
}

footer .logo {
  width: 100px;
}


/* -----------------------
thanksページ
--------------------------*/

#thanks {
  background-color: #0285ff;
  position: relative;
  background: url(../img/main-bg.jpg) center center no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
}

#thanks .contents {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #0044aa;
  text-align: center;
  width: 95%;
}

#thanks .contents p {
  font-size: 1.6rem;
}

#thanks .contents .desc {
  margin-top: 20p;
}

#thanks .contents .back {
  margin-top: 40px;
}

#thanks .contents .back a {
  text-decoration: underline;
}


/* -----------------------
responsive
--------------------------*/

/* PCサイズ: 960px以上 */
@media (min-width: 961px) {
  .sp {
    display: none !important;
  }
}

/* タブレットサイズ: 600px〜960px */
@media (min-width: 600px) and (max-width: 960px) {
  .pc {
    display: none !important;
  }
}

/* スマホサイズ: 〜599px */
@media (max-width: 599px) {
  .pc {
    display: none !important;
  }

  #main-visial .contents .img-contents {
    right: -43%;
  }

  #main-visial img {
    width: 445px;
  }

  .section-title {
    font-size: 2.8rem;
    margin-bottom: 10px;
  }

  section#news,
  section#company,
  section#contact {
    padding: 60px 0;
  }

  #product .influencer,
  #product .encounter,
  #product .vtuber {
    padding: 60px 0;
  }

  #main-visial .sp-header {
    top: 20px;
    padding: 15px 30px;
  }

  #main-visial .sp-header .logo {
    width: 40px;
  }

  #main-visial .contents .text-contents {
    top: 70%;
    transform: translateY(-70%);
  }

  #main-visial .contents .text-contents .copy {
    font-size: 15.83vw;
    line-height: 1.2;
  }

  #main-visial .contents .text-contents .sub-copy {
    font-size: 6.0vw;
    letter-spacing: 0.12em;
    margin-top: 10px;
  }

  #main-visial .contents .text-contents .sub-copy .bg {
    margin-bottom: 7px;
    padding-left: 10px;
    padding-right: 10px;
  }

  #news .item ul li {
    flex-direction: column;
    padding: 20px 0;
    align-items: baseline;
  }

  #news .item ul li .date {
    margin-left: 0;
    margin-bottom: 8px;
  }

  #product .item .contents,
  #product .item:nth-child(even) .contents {
    flex-direction: column;
  }

  #product .item .text-contents {
    width: 100%;
    margin: 0;
  }

  #product .item .text-contents h2 {
    font-size: 2.8rem;
  }

  #product .item .text-contents p {
    margin-top: 20px;
  }

  #product .item .img-contents {
    width: 100%;
    margin: 30px 0 0 0;
  }

  #company .company-contents {
    margin-top: 30px;
  }

  #company .company-contents ul li {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 0;
  }

  #company .company-contents ul li .right {
    margin: 0 8px 0 0;
  }

  .contact-form {
    margin-top: 30px;
  }

  .contact-form .form-group {
    flex-direction: column;
  }

  .contact-form .form-group label {
    width: 100%;
    margin-bottom: 4px;
  }

  footer {
    height: 200px;
  }

  footer .logo {
    width: 70px;
  }
}

/* 初期状態ではメニュー非表示（ロゴ以外） */
.nav-menu li:not(:first-child) {
  display: none;
}

/* メニューが開いたときに表示 */
.nav-menu.open li {
  display: block;
}