@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700;800&family=Rajdhani:wght@300;400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: transparent;
  background-image: none;
  background-position: 0 0;
  background-repeat: no-repeat;
  text-decoration: none;
  text-indent: 0;
  text-transform: none;
  font-style: normal;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

:root {
  --textcolor: #141414;
  --mainback: hsl(240, 76%, 10%);
  --subback: hsl(240, 76%, 20%);
}

html {
  scroll-behavior: smooth;
}

body {
  box-sizing: border-box;
  font-family: 'Noto Sans JP', sans-serif;
  font-family: 'Rajdhani', sans-serif;
  background: var(--mainback) !important;
  color: #000000;
  width: 100%;
  height: 100vh;
}

main {
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

p {
  margin: 0;
  padding: 0;
  line-height: 2;
  font-size: 16px;
}

ul,ol,li {
  margin: 0;
  padding: 0;
}

h1 {}

img {
  width: 100%;
  height: auto;
  vertical-align: middle;
  line-height: 1;
}

@media screen and (min-width: 420px) {
  .br-sp {
    display: none;
  }
}

.inner {}

section {
  display: block;
  position: relative;
  z-index: 11;
  padding: 10%;
}

figure {
  display: block;
  margin: 0;
}

a:hover {}



/* bg */
.bg_pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  z-index: -1;
}
.Paper_v2 {
  background-image:
  repeating-linear-gradient(to bottom,
    transparent 25px,
    rgba(0, 0, 0, 0.04) 26px, rgba(0, 0, 0, 0.04) 26px,
    transparent 27px, transparent 51px,
    rgba(0, 0, 0, 0.04) 52px, rgba(0, 0, 0, 0.04) 52px,
    transparent 53px, transparent 77px,
    rgba(0, 0, 0, 0.04) 78px, rgba(0, 0, 0, 0.04) 78px,
    transparent 79px, transparent 103px,
    rgba(0, 0, 0, 0.04) 104px, rgba(0, 0, 0, 0.04) 104px,
    transparent 105px, transparent 129px,
    rgba(0, 0, 0, 0.04) 130px, rgba(0, 0, 0, 0.04) 130px),

  repeating-linear-gradient(to right,
    transparent 25px,
    rgba(0, 0, 0, 0.04) 26px, rgba(0, 0, 0, 0.04) 26px,
    transparent 27px, transparent 51px,
    rgba(0, 0, 0, 0.04) 52px, rgba(0, 0, 0, 0.04) 52px,
    transparent 53px, transparent 77px,
    rgba(0, 0, 0, 0.04) 78px, rgba(0, 0, 0, 0.04) 78px,
    transparent 79px, transparent 103px,
    rgba(0, 0, 0, 0.04) 104px, rgba(0, 0, 0, 0.04) 104px,
    transparent 105px, transparent 129px,
    rgba(0, 0, 0, 0.04) 130px, rgba(0, 0, 0, 0.04) 130px);
}


/* ============== PC・SP 表示切替（768px） ============== */
@media screen and (max-width: 768px) {
.pc7 {
  display: none !important;
}}
@media screen and (min-width: 769px) {
.sp7 {
  display: none !important;
}}

/* header */

.site-header {
  background: var(--subback);
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  transition: .5s;
  width: 100%;
  z-index: 99;
}

.site-header.hide {
  top: -63px;
}

.site-logo img {
  height: 20px;
  width: auto;
}

.gnav__menu {
  display: flex;
}

.gnav__menu__item {
  margin-left: 20px;
}

.site-header .gnav__menu__item a {
  color: #333;
  text-decoration: none;
}

#navArea {}

header {}

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  left: 0;
  right: 0;
  height: 50px;
  width: 100%;
}

.top_logo {
  padding: 5px;
  display: flex;
  justify-content: start;
  align-items: center;
}
.top_logo img {
  height: 45px;
  margin-right: 10px;
}
.top_logo h1 {
  font-size: 17px;
  margin: 0;
  font-weight: 900;
}

.top_menu {
  margin-left: 2em;
  margin-right: 0;
  position: relative;
  top: 8px;
  height: 100%;
}

.top_menu ul {
  display: flex;
}

@media screen and (max-width: 768px) {
  .top_menu ul {
    display: none;
  }
}

.top_menu li {
  padding: 0px 10px;
}
.top_menu li a {
  position: relative;
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  transition: color .2s ease;
  padding: 3px 0;
  text-decoration: none;
}


/*menu */

.tks_footer_logo {
  margin: 0 auto;
  padding: 10px 0 0;
  text-align: center;
  border-radius: 5px;
}
.tks_footer_logo a img {
  width: 18%;
  display: grid;
  margin: 0 auto;
  background-color: #fff;
  padding: 15px;
  border-radius: 5px;
}
.tks_footer_logo p {
  font-weight: 800;
}
.menu a:hover {
  color: #ccc;

}

.menu a:hover::after,
.menu a:hover::before {
  width: 100%;
  left: 0;
}

.menu a::after,
.menu a::before {
  content: '';
  position: absolute;
  top: calc(100% + 0px);
  width: 0;
  right: 0;
  height: 3px;
}

.menu a::before {
  transition: width .4s cubic-bezier(0.51, 0.18, 0, 0.88) .1s;
  background: #2196f3;
}

.menu a::after {
  transition: width .2s cubic-bezier(0.29, 0.18, 0.26, 0.83);
  background: #F44336;
}

/* footer */
.tks_footer {
  margin-top: 0;
  padding: 40px 0;
  background-color: var(--subback);
  position: relative;
}

@media screen and (max-width: 550px) {
  .tks_footer {
    padding: 20px 0;
  }
  .tks_footer_logo a img {
    width: 85%;
  }
}

footer {
  padding-top: 0;
}

@media screen and (max-width: 550px) {
  .tks_footer_logo {
    width: 148px;
    padding-top: 34px;
  }
}

.tks_footer_logo a {
  width: 100%;
}

.tks_footer_fanclub {
  margin-left: 0;
  margin-right: 0;
  display: flex;
  justify-content: space-between;
  border: 1px solid #fff;
  border-top: none;
}

@media screen and (max-width: 550px) {
  .tks_footer_fanclub {
    margin-top: 31px;
    margin-left: 0;
    margin-right: 37px;
    justify-content: unset;
    flex-direction: column;
    width: 50%;
    border-top: 1px solid #fff;
    border-left: none;
  }
}

.tks_footer_row {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #fff;
  margin-top: 25px;
}

@media screen and (max-width: 550px) {
  .tks_footer_row {
    margin-left: 37px;
    margin-right: 37px;
    flex-wrap: unset;
    flex-direction: column;
    border: none;
  }
}

.tks_footer_row--left,
.tks_footer_row--right {
  display: flex;
  flex-direction: column;
  width: 50%;
}

@media screen and (max-width: 550px) {

  .tks_footer_row--left,
  .tks_footer_row--right {
    width: 100%;
  }
}

.tks_footer_row--left {
  border-right: 1px solid #fff;
}

@media screen and (max-width: 550px) {
  .tks_footer_row--left {
    border-right: none;
    border-bottom: 1px solid #fff;
  }
}

.tks_footer_link {
  border-bottom: 1px solid #fff;
}

@media screen and (max-width: 550px) {
  .tks_footer_link {
    height: 60px;
    display: table;
  }
}

.tks_footer_link a {
  padding: 16px 50px 16px;
  font-size: 18px;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: left;
  color: #fff;
  display: inline-block;
  width: 100%;
  position: relative;
  transition: 0.5s;
}

@media screen and (min-width: 550px) and (max-width:909px) {
  .tks_footer_link a {
    padding: 16px 53px 16px 20px;
  }
}

@media screen and (max-width: 550px) {
  .tks_footer_link a {
    font-size: 16px;
    padding: 0 40px 11px 0;
    display: table-cell;
    vertical-align: bottom;
  }
}

.tks_footer_link a:hover {
  opacity: 0.8;
}

.tks_footer_link a::before {
  position: absolute;
  top: 0;
  bottom: 1px;
  right: 30px;
  margin: auto;
  box-sizing: border-box;
  width: 13px;
  height: 13px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
  vertical-align: middle;
}

@media screen and (max-width: 550px) {
  .tks_footer_link a::before {
    bottom: -18px;
    right: 0;
    width: 10px;
    height: 10px;
  }
}

.tks_footer_copy {
  margin-top: 41px;
  font-size: 16px;
  letter-spacing: 0.1em;
  color: #fff;
}

@media screen and (max-width: 550px) {
  .tks_footer_copy {
    margin-top: 44px;
    font-size: 16px;
  }
}

footer {
  margin-bottom: 3em;
}

/* Humberger Menu */
nav {
  display: block;
  position: fixed;
  background-color: #ffffff;
  width: 220px;
  top: 0;
  left: -300px;
  bottom: 0;
  transition: all 0.5s;
  z-index: 3;
  opacity: 0;
}

.open nav {
  left: 0;
  opacity: 1;
}

nav .inner {
  padding: 25px;
}

nav .inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav .inner ul li {
  margin: 0;
}

nav .inner ul li a {
  display: block;
  color: #333;
  font-size: 16px;
  padding: 1rem 0;
  text-decoration: none;
  transition-duration: 0.2s;
}

nav .inner ul li a:hover {
  background: #e4e4e4;
}

.toggle-btn {
  display: block;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  z-index: 3;
  cursor: pointer;
  opacity: 1;
}

.toggle-btn span {
  position: absolute;
  display: block;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: #fff;
  transition: all 0.5s;
  border-radius: 4px;
}

.toggle-btn span:nth-child(1) {
  top: 4px;
}

.toggle-btn span:nth-child(2) {
  top: 14px;
}

.toggle-btn span:nth-child(3) {
  bottom: 4px;
}

.open .toggle-btn span {
  background-color: #fff;
}

.open .toggle-btn span:nth-child(1) {
  transform: translateY(10px) rotate(-315deg);
}

.open .toggle-btn span:nth-child(2) {
  opacity: 0;
}

.open .toggle-btn span:nth-child(3) {
  transform: translateY(-10px) rotate(315deg);
}

#mask {
  display: none;
  transition: all 0.5s;
}

.open #mask {
  display: block;
  background: #000;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  opacity: 0.8;
  z-index: 2;
  cursor: pointer;
}

@media only screen and (min-width: 576px) {
  section h3 {
    line-height: 1;
  }
}


/* particle bg */
canvas {
  position: fixed;
  top: 0;
  left: 0;
  mix-blend-mode: plus-lighter;
  z-index: 10;
  pointer-events: none;
}

@media only screen and (max-width: 767px) {
  canvas {
    display: none;
  }
}

/* border ivent */
.border-box {
  position: relative;
  width: calc(45% + 4vw);
  padding: 15px 10px;
  margin: 0 auto;
  /* float: right; */
}

@media only screen and (max-width: 767px) {
  .border-box {
    width: 100%;
    margin: 0;
    padding: 30px 10px;
    margin-top: -5vh;
  }
}

.border-box h3 {
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: center;
}

@media only screen and (max-width: 767px) {
  .border-box h3 {
  }
}

.border-box h3 .tag {
  background: #fff;
  color: #032234;
  padding: 0 5px;
  padding-top: 3px;
  font-size: 16px;
}

.border-box .border-box--data {
  letter-spacing: 0.2em;
  line-height: 1.7;
}

.border-box .border-box--data .list {
  margin-bottom: 4vh;
}

.border-box .border-box--data .list p {
  text-align: left;
}

.border-box .border-box--data .list ul {
  margin-bottom: 20px;
}

.border-box .border-box--data .list ul li span {
  width: 90px;
  display: inline-block;
}

@media only screen and (max-width: 767px) {
  .border-box .border-box--data {
  }

  .border-box .border-box--data .list p {
  }

  .border-box .border-box--data .list ul li span {
    width: auto;
  }
}

.border-box .price {
  margin-bottom: 20px;
}

.border-box .price span {
  letter-spacing: 0.1em;
  margin-left: 0.5em;
}

.border-box .price .tax {
  color: #fff;
  opacity: 0.5;
}

.border-box a.btn {
  display: block;
  background: #bfb683;
  text-align: center;
  font-weight: bold;
  color: #032234;
  padding: 2vw;
  transition: all 0.3s;
}

.border-box a.btn:hover {
  background: #fff;
}

.border-box::before,
.border-box::after {
  position: absolute;
  content: "";
  width: 0;
  height: 1px;
  background: #bfb683;
  /* 枠線の色*/
  will-change: animation;
}

.border-box .border-box--inner::before,
.border-box .border-box--inner::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 0;
  background: #bfb683;
  /* 枠線の色*/
  will-change: animation;
}

.border-box.is-active::before {
  top: 0;
  left: 0;
  -webkit-animation: border-boxAnime 0.5s linear 0s forwards;
  animation: border-boxAnime 0.5s linear 0s forwards;
  /*表示されて0秒後に上線が0.5秒かけて表示*/
}

.border-box.is-active .border-box--inner::before {
  top: 0;
  right: 0;
  -webkit-animation: border-boxAnime2 0.5s linear 0.5s forwards;
  animation: border-boxAnime2 0.5s linear 0.5s forwards;
  /*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

.border-box.is-active::after {
  bottom: 0;
  right: 0;
  -webkit-animation: border-boxAnime 0.5s linear 1s forwards;
  animation: border-boxAnime 0.5s linear 1s forwards;
  /*表示されて1秒後に下線が0.5秒かけて表示*/
}

.border-box.is-active .border-box--inner::after {
  bottom: 0;
  left: 0;
  -webkit-animation: border-boxAnime2 0.5s linear 1.5s forwards;
  animation: border-boxAnime2 0.5s linear 1.5s forwards;
  /*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@-webkit-keyframes border-boxAnime {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

@keyframes border-boxAnime {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

@-webkit-keyframes border-boxAnime2 {
  0% {
    height: 0%;
  }

  100% {
    height: 100%;
  }
}

@keyframes border-boxAnime2 {
  0% {
    height: 0%;
  }

  100% {
    height: 100%;
  }
}

.border-box.is-active .border-box--data {
  color: #fff;
  -webkit-animation: border-boxInnerAnime 0.5s linear 1.5s forwards;
  animation: border-boxInnerAnime 0.5s linear 1.5s forwards;
  opacity: 0;
}

@-webkit-keyframes border-boxInnerAnime {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes border-boxInnerAnime {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


.inner.normal .border-box {
  float: left;
  padding: 4vw 5vw 4vw 4vw;
}

@media only screen and (max-width: 767px) {
  .inner.normal .border-box {
    width: 100%;
    margin: 0;
    padding: 16vw 6vw 6vw 6vw;
    margin-top: -5vh;
  }
}

/* topslider */
#slider {
  width: 100%;
  height: 100vh;
}

.wrapper {
  position: relative;
}
#top-slide h2 {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 4vw;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #fff;
  width: 100%;
  text-shadow: 2px 0px 10px #000;
  font-weight: 700;
  line-height: 2;
}
@media screen and (max-width:576px) {
  #top-slide h2 {
    font-size: 7vw;
  }
}