/* reset ================================ */
* {
  box-sizing: border-box;
}

html {
  font: 100%/1.5 'Jenkins v2.0','Avenir Next', 'Hiragino Sans', sans-serif;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  line-height: 1.7;
  letter-spacing: 1px;
  scroll-behavior: smooth;
  background: #393633;
}
body{
  overflow-x: hidden;
  background: #393633;
}

ul, li, strong {
  list-style-type: none;
  padding: 0;
  margin: 0;
  color: #393633;
}

a {
  text-decoration: none;
  color: #393633;
}
s{
  display: inline;
  text-decoration: none;
  color: #ffffff;
}

h1{
  margin: 0;
  color: #ffffff;
  letter-spacing: -.02em;
}
h2{
  margin: 0;
  color: #ffffff;
  letter-spacing: -.02em;
}
h3{
  margin: 0;
  color: #ffffff;
  letter-spacing: -.02em;
}
h4{
  margin: 0;
  color: #ffffff;
  letter-spacing: -.02em;
}
h5{
  margin: 0;
  color: #ffffff;
  letter-spacing: -.02em;
}
h6{
  margin: 0;
  color: #ffffff;
  letter-spacing: -.02em;
}
p{
  margin: 0;
  color: #ffffff;
  letter-spacing: -.02em;
}
span{
  margin: 0;
  color: #ffffff;
  letter-spacing: -.02em;
}
input {
  background-color: transparent;
  outline-width: 0;
}
img{
  object-fit: contain;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-touch-callout: none;
  -moz-user-select: none;
  user-select: none;
  -ms-interpolation-mode: bicubic;
}

form input[type="submit"] {
  border: none;
  cursor: pointer;
}


:root{
  --mixRed: #ff7e79;
  --mixYellow: #fee438;
  --mixSkyBlue: #31f0d3;
  --mixOrange: #fea867;
  --mixGreen: #83df50;
  --mixBlue: #0eb6fb;
  --mixViolet: #bc639c;
  --mixRed-bg: #ff7e795e;
  --mixYellow-bg: #fee4385e;
  --mixSkyBlue-bg: #31f0d35e;
  --mixOrange-bg: #fea8675e;
  --mixGreen-bg: #83df505e;
  --mixBlue-bg: #0eb6fb5e;
  --mixViolet-bg: #bc639c5e;
}

/* 共通レイアウト ================================ */

.loadBeforeContainer{
  position: fixed;
  height: 100vh;
  width: 100vw;
  z-index: 1000000;
}
.loadAfterContainer{
  position: relative;
}
.loading{
  display: flex;
  width: 100vw;
  height: 100vh;
  z-index: 1000000;
  background: #393633;
}
#loadingContainer{
  position: absolute;
  left: 50%;
  bottom: 50%;
  margin-left: -50px;
  margin-top: -10px;
  text-align: center;
  font-family: Arial;
  font-weight: bold;
}
#loadingContainer .loadingFlex{
  display: flex;
  align-items: center;
  justify-content: center;
}
#loadingContainer .loadingFlex span{
  display: block;
  background: #ffffff;  width: 7px;
  height: 80px;
  margin-top: 5px;
  margin: 0 7px;
  /* animation: load 2s infinite; */
  animation: changeColor 2s infinite;
  border-radius: 5px;
}
#loadingContainer h1{
  position: relative;
  margin-top: 7px;
  font-size: 18px;
  color: #393633;
}

#loadingContainer span:nth-child(2){animation-delay: 100ms;}
#loadingContainer span:nth-child(3){animation-delay: 200ms;}

@keyframes load{
  50%{
    width: 5px;
    height: 10px;
    opacity: .1;
  }
}
@keyframes changeColor{
  0%{
    background-color: var(--mixRed);
  }
  15%{
    background-color: var(--mixYellow);
  }
  30%{
    background-color: var(--mixSkyBlue);
  }
  45%{
    background-color: var(--mixOrange);
  }
  50%{
    width: 5px;
    height: 10px;
    opacity: .1;
  }
  60%{
    background-color: var(--mixGreen);
  }
  75%{
    background-color: var(--mixBlue);
  }
  90%{
    background-color: var(--mixViolet);
  }
  100%{
    background-color: var(--mixRed);
  }
}
.loadingTitle {
  display: flex;
  overflow: hidden;
  color: #393633;
}

.loadingTitle span {
  display: block;
  color: var(--mixRed);
  transform: translate(0, 105%);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
}

.loadingTitle.-visible span {
  transform: translate(0, 0);
}

.loadingTitle span:nth-child(2) {
  transition-delay: 0.06s;
  color: var(--mixRed);
}
.loadingTitle span:nth-child(3) {
  transition-delay: 0.12s;
  color: var(--mixOrange);
}
.loadingTitle span:nth-child(4) {
  transition-delay: 0.18s;
  color: var(--mixOrange);
}
.loadingTitle span:nth-child(5) {
  transition-delay: 0.24s;
  color: var(--mixYellow);
}
.loadingTitle span:nth-child(6) {
  transition-delay: 0.30s;
  color: var(--mixYellow);
}
.loadingTitle span:nth-child(7) {
  transition-delay: 0.36s;
  color: var(--mixGreen);
}
.loadingTitle span:nth-child(8) {
  transition-delay: 0.42s;
  color: var(--mixGreen);
}
.loadingTitle span:nth-child(9) {
  transition-delay: 0.48s;
  color: var(--mixSkyBlue);
}
.loadingTitle span:nth-child(10) {
  transition-delay: 0.54s;
  color: var(--mixSkyBlue);
}
.loadingTitle span:nth-child(11) {
  transition-delay: 0.6s;
  color: var(--mixBlue);
}
.loadingTitle span:nth-child(12) {
  transition-delay: 0.66s;
  color: var(--mixBlue);
}
.loadingTitle span:nth-child(13) {
  transition-delay: 0.72s;
  color: var(--mixViolet);
}
.loadingTitle span:nth-child(14) {
  transition-delay: 0.78s;
  color: var(--mixViolet);
}


body {
  color: #2d3133;
  background-color: #bec4c7;  /*#ffffffd1 で薄い黒になる */
  margin: 0;
  min-height: 1vh;
  overflow-x: hidden;
  width: 100%;
  word-break: break-all;
  word-break: break-word;
}
.opactyClose{
  opacity: .4;
}

.main {
  position: relative;
  top: 0px;
  width: 100vw;
  height: auto;
  min-height: 100%;
  background-color: #393633;
}

.container {
  max-width: 600px;
  margin: auto;
  clear: both;
}
.landscapeScreen{
  display: none;
  width: 100vw;
  height: 100vh;
}
.landscapeScreen video{
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
}
.wordBlock{
  display: inline-block;
}

/* 404 */

.fourOFour{
  position: relative;
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  padding: 80px 142px;
  background: url("https://mixtune.geeks-co-ltd.com/images/gadget.png");
}
@media screen and (max-width: 1024px){
.fourOFour {
    padding-left: 64px;
    padding-right: 64px;
  }
}
@media screen and (max-width: 960px){
.fourOFour {
    padding-left: 48px;
    padding-right: 48px;
  }
}
@media screen and (max-width: 768px){
.fourOFour {
    padding-left: 36px;
    padding-right: 36px;
  }
}
@media screen and (max-width: 640px){
.fourOFour {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (max-width: 640px){
  .fourOFour {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
.cover{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #393633f2;
}
.fourOFour .sqs-row{
  width: 100%;
}
.fourOFour .fourOFourMessage{
  position: relative;
}
.fourOFourMessageTop{
  display: block;
  position: relative;
  padding: 17px;
}
.fourOFourMessageTop .superPaddingBox{
  position: relative;
  padding-bottom: 21.1111%;
}
.fourOFour .fourOFourMessageTittle h2{
  color: #ffffff;
  text-align: center;
  font-size: 52px;
  line-height: 1.2em;
  clear: both;
}
.fourOFour .fourOFourMessageExplain h3{
  text-align: center;
  font-size: 28px;
  color: #ffffff;
  line-height: 1.2em;
}
.fourOFour .fourOFourMessageExplain{
  margin-top: 77px;
  text-align: center;
}
.fourOFour .fourOFourMessageExplain p{
  color: #ffffff;
  font-size: 22px;
  line-height: 1.2em;
}
.fourOFour .fourOFourMessage .redirecttop{
  position: relative;
  margin-top: 50px;
}
.fourOFour .fourOFourMessage .btnLucaColor{

}
.fourOFour .fourOFourMessage .btnLucaColor a{
  display: block;
  width: fit-content;
  margin: 0 auto;
  border: 1px solid #ffffff;
  background: #ffffff;
  border-radius: 12px;
  transition-duration: 1s;
}
.fourOFour .fourOFourMessage .btnLucaColor a p{
  font-size: 20px;
  color: #393633;
  padding: 8px 28px;
  font-weight: 600;
}

/* header CSS ================================ */



/* spHeader部分 */
.spHeader{
  position: fixed;
  display: block;
  width: fit-content;
  z-index: 10000;
}
.row::before,.row::after{
  content: " ";
  display: table;
}
.spContainer{
  display: block!important;
}
.hambInner{
  display: flex;
  padding: 24px 24px 0 24px;
  align-items: flex-end;
}
.hambInner .addLogos{
  display: block;
  width: fit-content;
  margin-left: 12px;
}
.hambInner .addLogos img{
  display: block;
  object-fit: contain;
  height: 50px;
  padding-bottom: 12px;
}
#spOnly-toggler{
  display: block;
  width: fit-content;
  font-size: 14px;
  border: 0;
  background: 0 0;
  outline: 0;
  border-radius: 0;
  position: relative;
  z-index: 10;
  transition: .35s ease;
  cursor: pointer;
}
#spOnly-toggler:hover .hamb+.hamb{
  margin-top: 4px;
}
#spOnly-toggler.active:hover .hamb+.hamb{
  margin-top: 7px;
}
#spOnly-toggler .hamb{
  display: block;
  width: 38px;
  height: 3px;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 2px;
  background: #ffffff;
  margin: 0 auto;
  position: relative;
  transition: all .25s ease-in-out;
}
#spOnly-toggler p{
  margin-top: 7px;
  font-size: 11px;
  color: #ffffff;
}
#spOnly-toggler .close{
  display: none;
  transition: translateX(-30%);
}
.addLogos.hide{
  display: none;
}
.spOnly{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
.spHeader #spOnly-toggler .hamb{
  color: #393633;
  border: 1px solid #ffffff;
  background: #ffffff;
}
.spHeader #spOnly-toggler.active .hamb{
  border: 1px solid #ffffff!important;
  background: #ffffff!important;
}
#spOnly-toggler.active .hamb:nth-of-type(2){
  top: 10px;
  transform: rotate(45deg);
  border: 1px solid #ffffff;
  background: #ffffff;
}
#spOnly-toggler.active .hamb:nth-of-type(3){
  visibility: hidden;
  opacity: 0;
}
#spOnly-toggler.active .hamb:nth-of-type(4){
  top: -10px;
  transform: rotate(-45deg);
  border: 1px solid #ffffff;
  background: #ffffff;
}
#spOnly-toggler .hamb+.hamb{
  margin-top: 7px;
}
#menu-overlay{
  display: none;
}
.sp-menu,#menu-overlay{
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
}
.sp-menu{
  display: none;
  left: 0;
  z-index: 9;
  transition: .35s ease;
}
.sp-menu.overlay-active{
  display: block;
}
.sp-menu .sp-manu-inner{
  padding: 50px 25px 5px;
}
.sp-menu .sp-manu-inner .sp-manu-lists{
  margin: 20px 0;
  padding: 0 3px;
}
.sp-menu .sp-manu-inner .sp-manu-lists li{
  list-style-type: none;
  font-size: 16px;
  font-weight: 700;
  margin: 1em 0;
  letter-spacing: -.1px;
}
.sp-menu .sp-manu-inner .sp-manu-lists li a{
  display: block;
}
.sp-menu .sp-manu-inner .sp-manu-lists li a sub{
  line-height: 1.2em;
  font-size: 11px;
  display: block;
  opacity: .45;
}
.sp-menu .sp-manu-inner .sp-manu-lists li a span{
  color: #393633;
  display: inline;
  font-size: 18px;
  border-bottom: 2px solid transparent;
  transition: .35s ease;
}

.topMessage.hideText{
  -webkit-animation: unopacity .4s forwards;
  animation: unopacity .4s forwards;
}
.topMessage{
  text-align: left;
  margin-top: 28px;
  padding: 0 24px;
  width: 100%;
  overflow: hidden;
}
.topMessage .messageH1{
  text-align: left;
  display: block;
  color: #ffffff;
  letter-spacing: .01em;
  line-height: 1em;
  font-family: 'Mochiy Pop P One', sans-serif;
}
.topMessage .borderLine-b{
  position: relative;
}
.topMessage .borderLine-b.online::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, var(--mixRed), var(--mixOrange), var(--mixYellow), var(--mixGreen), var(--mixSkyBlue), var(--mixBlue), var(--mixViolet));
  bottom: 0;               /*アンダーラインがaタグの下端から現れる*/
  transform: scale(0, 1);     /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
  transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
  transition: transform 3s; /*変形の時間*/
}
.topMessage .borderLine-b.online:nth-child(2)::after{
  animation-delay: .7s;
}

.topMessage .borderLine-b.online::after {
  animation: borderline 3s forwards;
}
@keyframes borderline {
  0%{
    transform: scale(0, 1);
  }
  100%{
    transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
  }
}

.topMessage .messageH1.en{
  display: block;
}
.topMessage .messageH1.en:nth-of-type(1){
  margin-top: 14px;
}
.topMessage .messageH1.en span{
  opacity: .6;
  font-size: 54px;
  letter-spacing: -.01em;
}
.topMessage .messageH1 span{
  display: inline-block;
  visibility: visible;
  letter-spacing: -.15em;
  line-height: 1em;
  font-family: 'Anton', sans-serif;
  font-size: 100px;
}

/* スマホ用モーダル部分_ ================================ */

.modal{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
}
.modal-all{
  position: relative;
  top: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
  padding: 5px 0 40px;
  width: 100%;
  height: 100%;
  padding-top: 20px;
  text-align: left;
}
.hamburger-modal{
  position: absolute;
  top: 0;
  margin: 0 auto;
  padding: 10vh 0 0 16px;
  width: 100%;
  height: 100vh;
  text-align: left;
}
.hamburger-modal-Inner{
  width: fit-content;
  padding-right: 18px;
}
.hamburger-modal-Inner .yokoLine-sp{
  opacity: 0;
}
.hamburger-modal-Inner span.active{
  -webkit-animation: opacity .7s forwards;
  animation: opacity .7s forwards;
  animation-delay: .3s;
}
.logoIndex{
  padding: 18px 0;
  transform: translateX(-100%);
  transition-delay: 1s;
}
.logoIndex.active{
  animation-delay: 1s;
  -webkit-animation: appear .5s forwards;
  animation: appear .5s forwards;
  animation-delay: .2s;
}
.logoInner{

}
.logoInner img{
  width: 120px;
  object-fit: contain;
  display: block;
}
.add-leftZero{
  left: 0;
}
.add-rightJyuuNana{
  right: 17%;
}
.modalTop{
  padding: 18px 0;
  transform: translateX(-100%);
  transition-delay: 1.2s;
}
.modalTop.active{
  -webkit-animation: appear .5s forwards;
  animation: appear .5s forwards;
  animation-delay: .4s;
}

@-webkit-keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes unopacity {
  0% {
    opacity: 1;
    display: block;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

@keyframes unopacity {
  0% {
    opacity: 1;
    display: block;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

@-webkit-keyframes appear {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

@keyframes appear {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
.hamburger-modal-top{
  background-color: inherit;
}
.humburgerIndex-js{
  display: none;
  background: linear-gradient(135deg, #595551, #393633);
}
.hamburger-modal .modal-topMenu{
  display: block;
  font-size: 28px;
  text-align: left;
  cursor: pointer;
  cursor: hand;
  padding-bottom: 2.5vh;
}
.hamburger-modal .modal-topMenu:hover .topCategoryTopic{
  border-bottom: 1px solid #ffffffaa;
  width: fit-content;
}
.hamburger-modal .modal-topMenu:hover .topCategoryTopic .ja{
  font-weight: 600;
  opacity: 1;
}
.hamburger-modal .modal-topMenu:hover .topCategoryTopic .en{
  font-weight: 600;
}
.secondMenuIndex{
  display: block;
  text-align: right;
}
.hamburger-modal .modal-secondMenu{
  display: block;
  font-size: 25px;
  cursor: pointer;
  cursor: hand;
  padding-bottom: 2.5vh;
}
.hamburger-modal .modal-secondMenu .ja{
  font-size: 11px;
  opacity: .75;
  line-height: 1.05em;
  margin-bottom: 3px;
  display: block;
}
.hamburger-modal .modal-secondMenu .en{
  display: block;
}
.hamburger-modal span{
  padding-right: 10px;
  display: block;
  color: #ffffff;
  line-height: 1.2em;
  font-weight: 500;
  word-break: keep-all;
}
.hamburger-modal .yokoLine{
  background: #ffffff;
}
.hamburger-modal span .ja{
  font-size: 11px;
  opacity: .75;
  color: #ffffff;
  line-height: 1.05em;
  margin-bottom: 3px;
  display: block;
}
.hamburger-modal span .en{
  display: block;
  color: #ffffff;
}
.hamburger-modal p{
  font-size: 12px;
  padding-right: 20px;
  font-weight: 400;
  text-align: right;
}
.backToModalTop{
  padding: 5vh 10px;
  margin-left: 17%;
}
.backToModalTop span{
  display: block;
  border: 1px solid #ffffff;
  padding: 3vw 5vw;
  width: fit-content;
}
.hamburger-modalSecond{
  display: none;
}
.sd{
  max-width: 100%;
  z-index: 0;
  pointer-events: all;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  display: flex;
  position: relative;
  flex-direction: column;
  align-content: center;
  align-items: center;
  flex: none;
}
.yokoLine {
  background: #393633;
  height: 1px;
  margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
  width: 100%;
  max-width: 100%;
  opacity: .3;
}

/* header以下_ ================================ */

.background-image{
  z-index: 1;
  position: fixed;
  width: 100%;
}
.background-image img{
  z-index: 0;
  position: relative;
  max-height: 50px;
  vertical-align: middle;
  width: 100%;
}
.backgroundVideo-boxOuter{
  position: sticky;
  top: 0;
  z-index: 1;
}
.backgroundVideo-box{
  height: 100vh;
  position: relative;
  width: 100vw;
  z-index: 0;
  background: linear-gradient(135deg, #595551, #393633);
}
.backgroundVideo-box .backgroundVideoHomeTop{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  margin: 0 auto;
  text-align: center;
  vertical-align: middle;
  min-width: 100%;
  width: 100%;
  min-height: 100vh;
  background-position: bottom right;
  /* background-attachment: fixed; */
  background-attachment: unset;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../images/topImg/toplogp.png");
}

.backgroundVideo-box .backgroundVideoHomeTop.hideText{
  -webkit-animation: unopacity .4s forwards;
  animation: unopacity .4s forwards;
  animation-delay: .1s;
}
.snsLogo{
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  margin: 0 auto 3vh 5vh;
}
.snsLogo.hideText{
  -webkit-animation: unopacity .4s forwards;
  animation: unopacity .4s forwards;
  animation-delay: .1s;
}
.snsLogo a{
  opacity: .75;
}
.snsLogo a:hover{
  opacity: 1;
}
.snsLogo a img{
  display: block;
  max-height: 25px;
  width: fit-content;
  object-fit: contain;
}
.snsLogo a .twitterText{
  margin-top: 12px;
  opacity: .75;
}
.snsLogo a .twitterText h2{
  font-size: 16px;
  line-height: 1.05em;
}
.snsLogo a .twitterText h2 p{
  font-size: 14px;
  line-height: 1.05em;
}


.mainContents-ForSubDomain{
  background: #707070;
}
.bgSlideSlick::after{
  content: "";
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #2b200f;
  opacity: .6;
}
.backgroundVideo-box-for-mobile{
  height: 85vh;
  width: 100vw;
  z-index: 1;
  display: none;
}
.backgroundVideo-box-for-mobile::after{
  content: "";
  width: 100vw;
  height: 85vh;
  background-color: #ffffff;
  opacity: .6;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}
.mainTittle{
  display: block;
  position: absolute;
  top: 50vh;
  transform: translateY(-50%);
  right: 0;
  left: 0;
  margin: 0 auto;
}
.mainTittle h1{
  text-align: center;
  font-size: 5em;
  color: #ffffff;
}

.shopBox{
  position: fixed;
  top: 70vh;
  height: 100%;
  right: 0;
  text-align: center;
  padding: 3em 0;
  /* display: block; */
  display: none;
}
.shopBox.hideText{
  -webkit-animation: unopacity .4s forwards;
  animation: unopacity .4s forwards;
  animation-delay: .1s;
}
.shopBox .shopBoxInner{
  width: fit-content;
  padding: 8px 12px;
  background: #282828;
}
.shopBox .shopLogo img{
  width: 34px;
  display: block;
  margin: 0 auto;
}
.shopBox .shopText{
  margin-top: 7px;
}
.shopBox .shopText p{
  font-size: 15px;
  line-height: 1.1em;
  width: 100%;
  font-weight: 500;
}
.shopBox .logoImg{
  position: relative;
  width: 100%;
}

.stickyLayout{
  position: relative;
  width: 100vw;
  z-index: 2;
}
.stickyLayout .stickyFlex{
  display: flex;
  width: 100%;
}
.stickyLayout .stickyFlex .stickyFlex-left{
  width: 15%;
  position: sticky;
  position: -webkit-sticky;
  overflow: unset !important;
  top: 0;
  display: block;
  height: 100vh;
  background: #fdf7f1;
}


.stickyLayout .stickyFlex .stickyFlex-right{
  width: 85%;
  display: block;
  height: 100%;
  background: #ffffff;
}
.stickyMenu{
  margin-top: 120px;
}
.stickyMenu .menuIndex{

}
.modal-topMenu{
  display: block;
  padding-left: 18px;
  font-size: 28px;
  text-align: left;
  opacity: .75;
  cursor: pointer;
  cursor: hand;
  margin-bottom: 28px;
}
.modal-topMenu:hover{
  opacity: 1;
}
.topCategoryTopic{

}
.topCategoryTopic span{
  padding-right: 10px;
  display: block;
  color: #000000;
  line-height: 1.2em;
  font-weight: 500;
  word-break: keep-all;
}
.topCategoryTopic span.en{
  display: block;
}
.topCategoryTopic span.ja{
  font-size: 11px;
  opacity: .75;
  line-height: 1.05em;
  margin-bottom: 3px;
  display: block;
}
/* joinusbanner */
.joinusbanner{

}
.joinusbanner .banner{
  max-width: 77%;
  width: 840px;
  margin: 48px auto;
}
.joinusbanner .banner a{
  display: block;
}
.joinusbanner .banner img{
  display: block;
  border: 1px solid #7c8cbf;
  border-radius: 12px;
  object-fit: contain;
  width: 100%;
}
.joinusbanner .banner img:nth-of-type(2){
  display: none;
}
@media all and (max-width: 767px){
  .joinusbanner .banner img:nth-of-type(1){
    display: none;
  }
  .joinusbanner .banner img:nth-of-type(2){
    display: block;
  }
}

/* newsFeed */

.newsFeed{
  display: block;
  max-width: 1480px;
  margin: 0 auto;
  /* background: #f0f8ff; */
}
.newsFeed h1{
  font-size: 56px;
  font-weight: 900;
}
.sectionFeedTitle{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: space-between;
  align-items: left;
  -ms-flex-wrap: wrap;
  align-content: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  padding: 24px 0 12px 18px;
}
.sectionFeedTitle h1{
  font-size: 48px;
  text-align: left;
  color: #393633;
  line-height: 1em;
  letter-spacing: .1em;
}
.sectionFeedTitle span{
  margin: 0 0 0 0.78125vw;
  font-size: 17px;
  font-weight: 600;
  color: #393633;
  letter-spacing: .12em;
  display: block;
  text-align: left;
}

/* 所属ライバー部分 */

.liverFlexIndex{
  margin-top: 46px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: space-between;
  align-items: center;
  -ms-flex-wrap: wrap;
  align-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0 18px;
}
.liverFlexIndex .moreBtn{
  width: 33%;
  margin-top: 18px;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
.liverFlexIndex .moreBtn .btnBox{
  padding: 12px;
  text-align: left;
  width: fit-content;
}
.liverFlexIndex .moreBtn .btnBox .viewLiver{
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25em;
  margin-bottom: 12px;
  color: #393633;
}
.liverFlexIndex .moreBtn .btnBox a {
  width: fit-content;
  border: 2px solid #393633;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.liverFlexIndex .moreBtn .btnBox a p{
  display: block;
  width: 100%;
  padding: 7px 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.liverFlexIndex .moreBtn .btnBox a p span{
  display: block;
  font-size: 16px;
  word-break: break-all;
  color: #393633;
}
.liverFlexIndex .moreBtn .btnBox a:hover p{
  background: #ffffff;
}
.liverFlexIndex .moreBtn .btnBox a:hover p span{
  font-weight: bold;
}
.liverFlexIndex .moreBtn .btnBox a:hover p span:nth-child(2){
  animation: animateAroww .5s forwards;
}

@keyframes animateAroww {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

@-webkit-keyframes animateAroww {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
.liverFlexIndex .liverBox{
  position: relative;
  display: block;
  width: 280px;
  height: 380px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  margin-top: 46px;
}
.liverFlexIndex .liverBox .liverImage{
  position: absolute;
  bottom: 0;
  width: 100%;
  overflow-x: hidden;
  right: 0;
  display: block;
  height: 110%;
  object-fit: contain;
}
.liverFlexIndex .liverBox.bg--mixBlue{
  background: var(--mixBlue-bg);
}
.liverFlexIndex .liverBox.bg--mixRed{
  background: var(--mixRed-bg);
}
.liverFlexIndex .liverBox.bg--mixYellow{
  background: var(--mixYellow-bg);
}
.liverFlexIndex .liverBox.bg--mixSkyBlue{
  background: var(--mixSkyBlue-bg);
}
.liverFlexIndex .liverBox.bg--mixOrange{
  background: var(--mixOrange-bg);
}
.liverFlexIndex .liverBox.bg--mixGreen{
  background: var(--mixGreen-bg);
}
.liverFlexIndex .liverBox.bg--mixViolet{
  background: var(--mixViolet-bg);
}
.liverFlexIndex .liverBox .liverImage img{
  display: block;
  height: 100%;
  transform: translateX(15%);
  object-fit: contain;
}
.liverFlexIndex .liverBox .liverBox-bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom right;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}
.liverBox-bg.bgImg--mixBlue{
  background: url('../images/bg/bg--mixBlue.png');
}
.liverBox-bg.bgImg--mixRed{
  background: url('../images/bg/bg--mixRed.png');
}
.liverBox-bg.bgImg--mixYellow{
  background: url('../images/bg/bg--mixYellow.png');
}
.liverBox-bg.bgImg--mixSkyBlue{
  background: url('../images/bg/bg--mixSkyBlue.png');
}
.liverBox-bg.bgImg--mixOrange{
  background: url('../images/bg/bg--mixOrange.png');
}
.liverBox-bg.bgImg--mixGreen{
  background: url('../images/bg/bg--mixGreen.png');
}
.liverBox-bg.bgImg--mixViolet{
  background: url('../images/bg/bg--mixViolet.png');
}
.liverFlexIndex .liverBox .name{
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 12px;
}
.liverFlexIndex .liverBox .name h3{
  font-size: 22px;
  line-height: 1.1em;
  font-weight: 400;
  color: #ffffff;
}
.liverFlexIndex .liverBox .name h1{
  font-size: 44px;
  line-height: 1.15em;
  font-weight: 700;
  color: #ffffff;
}

.slider {
  height: 100vh;
  margin: 0 auto;
  padding-bottom: 36px;
  overflow-x: hidden;
}

.slick-track{
  width: 100%;
  background: #7b8cbf29;
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  align-items: flex-start;
}
.slider.slick-initialized .slick-slide{
  min-height: 1px;
  display: block;
  position: relative;
  height: 100vh;
}
.slider .image img{
  display: block;
  width: 100%;
  object-fit: cover;
  transition-duration: 1s;
}
.slider .slick-slide .image{
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  padding: 0;
  height: 100%;
}
.slider .slick-slide .name{
  height: 100%;
  display: flex;
  position: relative;
  flex-direction: column;
  align-content: center;
  align-items: flex-end;
  flex: none;
  justify-content: end;
  padding: 0 19px;
}
.slider .slick-slide .name .rotate{
  width: 200%;
  transform: translate(10px, 30px) rotate(90deg);
  transform-origin: right top;
  text-align: right;
}
.slider .slick-slide .name .rotate h2{
  font-size: 42px;
  font-weight: 700;
  line-height: 1.05em;
  color: #393633;
  -webkit-text-stroke: 1.5px #ffffff;
}
.slider .slick-slide .name .rotate p{
  font-size: 19px;
  line-height: 1em;
  color: #393633;
  -webkit-text-stroke: 0.5px #ffffff;
  font-weight: 700;
}

.liverFeed .showMore{
  display: block;
  text-align: center;
}
.liverFeed .showMore a{
  display: block;
  width: fit-content;
  margin: 0 auto;
  border: 1px solid #eafaff;
  padding: 12px 18px;
  transition-duration: 1s;
  background: #7c8cbf;
}
.liverFeed .showMore a span{
  font-size: 18px;
  color: #eafaff;
  font-weight: 500;
}

.liverFeed .showMore a:hover{
  background: #7b8cbf;
}

.liverFeed .showMore a:hover span{
  color: #ffffff;
}


/* bottomContent */


.bottomContent .logoIndex{
  padding: 100px 0;
}
.logoIndex .upper{

}
.logoIndex .upper img{
  display: block;
  width: 20%;
  max-width: 250px;
  min-width: 170px;
  margin: 0 auto;
}

/* ABOUT */

.aboutFeed{
  padding: 64px 0;
}
.aboutIndex{
  position: relative;
  width: 90%;
  margin: 0 auto;
  border-radius: 12px;
  padding: 24px 18px;
  overflow-y: hidden;
  background: #393633;
}
.bluginImg .overlayBg1{
  background: linear-gradient(45deg, #393633, transparent);
}
.bluginImg .overlayBg2{
  background: linear-gradient(135deg, #393633, transparent);
}
.bluginImg .overlayBg3{
  background: linear-gradient(315deg, #393633, transparent);
}
.bluginImg img{
  display: block;
  object-fit: cover;
  width: 100%;
  height: 65%;
}
.aboutSection{
  position: relative;
  z-index: 2;
}
.textInner{
  padding: 48px;
}
.textBox{

}
.textBox span{
  margin: 0 0 0 0.78125vw;
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -.02em;
  display: block;
  text-align: left;
}
.textBox h1{
  font-size: 48px;
  text-align: left;
  color: #ffffff;
  line-height: 1em;
  letter-spacing: -.02em;
}
.textBox h1 i{
  font-style: normal;
}
.textBox h1 i:nth-child(1){
  color: var(--mixRed);
}
.textBox h1 i:nth-child(2){
  color: var(--mixYellow);
}
.textBox h1 i:nth-child(3){
  color: var(--mixSkyBlue);
}
.textBox h1 i:nth-child(4){
  color: var(--mixOrange);
}
.textBox h1 i:nth-child(5){
  color: var(--mixGreen);
}
.textBox h1 i:nth-child(6){
  color: var(--mixBlue);
}
.textBox h1 i:nth-child(7){
  color: var(--mixViolet);
}
.textBox p{
  font-size: 16px;
  margin-top: 28px;
}
.bluginImg{
  position: absolute;
  width: 55%;
  margin: 0 0 0 auto;
  top: 0;
  right: 0;
  z-index: 1;
}
.bluginImg .overlayBg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.lnkBox{
  display: flex;
  margin-top: 18px;
}
.lnkBox .linkBoxInner{

}
.lnkBox .linkBoxInner:nth-child(1) a{
  display: block;
  width: fit-content;
  background: #ffffff;
  font-size: 16px;
  padding: 7px 18px;
  color: #ffffff;
}
.lnkBox .linkBoxInner:nth-child(2) a.addlink{
  display: block;
  width: fit-content;
  background: #ffffff;
  font-size: 16px;
  padding: 7px 18px;
  color: #ffffff;
  background: inherit;
  opacity: .7;
}
.lnkBox .linkBoxInner:nth-child(1) a:hover{
  background: #393633;
  border: 1px solid #ffffff;
}
.lnkBox .linkBoxInner:nth-child(1) a:hover p{
  color: #ffffff;
}
.lnkBox .linkBoxInner a.addlink:hover{
  opacity: 1;
}
.linkBox .linkBoxInner:nth-child(2){
  margin-left: 24px;
}
.lnkBox .linkBoxInner a p{
  font-size: 16px;
  color: #393633;
}

.gallery{
  position: relative;
  z-index: 2;
}
.gallery p{
  text-align: center;
  font-size: 18px;
  font-weight: lighter;
}
.gallery .galleryFlex{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: 16px;
}
.gallery .galleryFlex .eachGallery{
  width: 25%;
}
.gallery .galleryFlex .eachGallery a{
  display: block;
}
.gallery .galleryFlex .eachGallery img{
  display: block;
  width: 85%;
  margin: 0 auto;
}



/* エントリーセクション */

.forEntry{
  width: 100%;
  padding: 64px 0;
  background: #ebebeb;
}
.forEntryFlex{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  min-width: 720px;
  margin: 0 auto;
}
.forEntryFlexLeft{
  display: block;
  width: 55%;
}
.forEntryFlexLeft img{
  display: block;
  width: 100%;
  margin: 0 auto;
  max-width: 480px;
}
.forEntryFlexRight{
  width: 45%;
}
.forEntryFlexRight .forEntryText{

}
.forEntryFlexRight .forEntryText span{
  margin: 0 0 0 0.78125vw;
  font-size: 17px;
  font-weight: 600;
  color: #393633;
  letter-spacing: -.02em;
  display: block;
  text-align: left;
}
.forEntryFlexRight .forEntryText h1{
  font-size: 48px;
  text-align: left;
  color: #393633;
  line-height: 1em;
  letter-spacing: -.02em;
}
.forEntryFlexRight .forEntryText p{
  font-size: 16px;
  margin-top: 18px;
  color: #000000;
}
.forEntryFlexRight .forEntryLink{
  margin-top: 24px;
}
.linkBoxInner{

}
.linkBoxInner a{
  display: block;
  width: fit-content;
  border: 1px solid #393633;
  font-size: 24px;
  padding: 7px 18px;
}
.linkBoxInner a p{
  font-size: 16px;
  color: #393633;
}
.linkBoxInner a:hover{
  background: #ffffff;
}

/* footer */

footer{
  position: relative;
  display: block;
  padding-top: 48px;
  background: #f6f6f6;
  z-index: 100;
}
footer p{
  color: #000000;
  text-align: right;
  padding: 7px;
  font-size: 10px;
}
.footerInner{
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 40px;
}
.footer__top{
  margin-bottom: clamp(40px,4vw,150px);
}
.footer__logo{
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(30px,4vw,60px);
}
.footer__logo img{
  display: block;
  object-fit: contain;
  width: 97px;
}

.footer__wrapper {
  display: block;

}
.footer__grid{
  --grid-min: 18%;
  --menu-margin: clamp(10px, 4vw, 20px);
  flex: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min), 1fr));
  grid-gap: 24px;
}
.footer__menu{
  font-weight: bold;
  line-height: 100%;
}
.footer__menu li:not(:last-child){
  list-style: none;
  margin-bottom: clamp(10px, 4vw, 20px);
}
.footer__menu a{
  color: #393633;
}
#footer a:hover{
  opacity: .75;
}
.footer__top .box-featured{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: auto;
  border-radius: 8px;
  line-height: 150%;
}
.box-featured__content{
  padding: 20px;
  background: gray;
  margin: 20px 0 0 auto;
}
.box-featured__contentInner h3{
  font-size: 16px;
  line-height: 1.05em;
}
.box-featured__contentInner p{
  font-size: 16px;
  color: #ffffff;
}
.box-featured__content img{
  display: block;
  max-height: 25px;
  width: fit-content;
  object-fit: contain;
}
.footer__bottom{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 120px;
  padding-top: clamp(24px,3vw,48px);
  font-size: 14px;
  font-weight: 400;
  background-image: linear-gradient(to right, rgb(34,34,34) 0 10%, rgba(255, 255, 255, 0) 10%);
  background-position: top;
  background-size: 8px 1px;
  background-repeat: repeat-x;
}
.footer__nav{
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}