@charset "utf-8";
html {
    scroll-behavior: smooth;
}
body{
  margin: 0;
  font-family:  "Noto Sans JP", sans-serif;
  color: var(--c);
  background-color: var(--c-bg-neutral);
}
a {
  color: var(--text-link);
}
img {
  display: block;
  /*background-color: #3c2c43;*/
}
svg {
  vertical-align: baseline;
}
/***********************Table of content**********************/
#toc {
  background: linear-gradient(to right, rgb(0, 0, 0, .5), 30%, rgb(0, 0, 0, 0));
  position: fixed;
  height: 100%;
  width: 20rem;
  z-index: 9999;
  color: white;
}
#toc ol {
  box-sizing: border-box;
  list-style: none;
  width: 4rem;
  height: 100%;
  margin: 0;
  padding: 4rem 0;

  display: flex;
  flex-direction: column;
}
#toc li {
  flex: 1 1;
  transform: skewY(-6deg);
}
#toc a {
  padding-left: 1em;
  padding-top: 1em;
  padding-bottom: 1em;
  border-top: 2px solid white;
  text-decoration: none;

  writing-mode: vertical-rl;
  display: flex;
  flex-direction: column;
  transition: .2s;
}
#toc a:hover {
  color: rgb(255, 255, 255, 0.25);
  /*background: rgb(255, 255, 255, 0.25);*/
}
#toc span {
  font-size: 1.2rem;
}
#toc small {
  font-size: .5rem;
  letter-spacing: .2em;
  font-weight: lighter;
}
/***********************links**********************/
#links {
  background: linear-gradient(to left, rgb(0, 0, 0, .5), 30%, rgb(0, 0, 0, 0));
  position: fixed;
  right: 0;
  height: 100%;
  width: 20rem;
  z-index: 9999;
  color: white;
}
#links ol {
  box-sizing: border-box;
  list-style: none;
  width: 4rem;
  height: 100%;
  margin: 0;
  margin-left: auto;
  padding: 4rem 0;

  display: flex;
  flex-direction: column;
}
#links li {
}
#links a {
  box-sizing: border-box;
  padding-right: 1em;
  padding-top: 1em;
  padding-bottom: 1rem;
  text-decoration: none;

  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: .2s;
}
#links a:hover {
  opacity: .5;
}
#links span {
  writing-mode: vertical-rl;
  vertical-align: middle;
  font-size: 1rem;
}
#links img {
  height: 2rem;
}
#links svg {
  fill: white;
}
#links small {
  font-size: .5rem;
  letter-spacing: .2em;
  font-weight: lighter;
}
/***********************Title logo**********************/
.wrapper {
  position: relative;
  width: 100%;
}
.background {
  width: 100%;
  height: 1000px;
  /*max-height: 200vw; /*mobile*/
  object-fit: cover;
}
.logo {
  height: 500px;
  max-width: 70%; /*mobile*/
  max-height: 70%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.heading {
  background-color: black;
  margin: 0;
  padding: .5rem;
  color: white;
  font-size: 1rem;
  letter-spacing: .5em;;
  font-weight: lighter;
  text-align: center;
}
.border {

}
/***********************sectoin**********************/

body {
  --size-name: 4rem;
}
.iframe-wrapper {
  display: block;
  margin: 0 auto;
}
iframe {
  display: block;
  margin: 0 auto;
  max-width: 100%
}
section {
  position: relative;
  padding: 100px 0;
}
.ichimatsu {
  width: 200px;  /* 横幅を200pxに指定 */
  height: 200px; /* 高さを200pxに指定 */
  background-image: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%),
	  linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%); /* 市松模様になるようグラデーションで単色を入れる */
  background-position: 0 0, 30px 30px;  /* 「0 0」と1マス（1色）の大きさ「30px 30px」をそれぞれ指定 */
  background-size: 60px 60px;           /* 1マス分の倍の大きさを指定「60px 60px」 */
  background-color: #FFF;               /* もう一つの単色を入れる */

  position: absolute;
  right: 0;

  transparent: 0.5;
}
.heading-area {
  text-align: center;
  margin: 0;
  margin-bottom: 100px;

  transform: rotate(3deg);
  transform: skewX(-7deg);
  transform: skewY(-5deg);
}
.heading-area h2 {
  box-sizing: border-box;
  font-size: 3rem;
  font-weight: lighter;
  letter-spacing: .2rem;
  margin: 0;
  /*
  border-right: 200px solid mediumpurple;
  padding-left: 200px;
  */
}
.heading-area small {
  font-size: 1rem;
  letter-spacing: 1em;
  font-weight: lighter;
}
.info {
  display: block;
  width: 80%;
  max-width: 700px;
  margin: 2rem auto;
  padding: 0.1px;
  background-color: rgb(255, 255, 255, 0.1);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  /*border: 1px solid white;*/
  color: white;
  text-align: center;
  text-decoration: none;
  transition: .2s;
}
.info:hover {
  background-color: rgb(255, 255, 255, 0.05);
  transition: .2s;
}
/***********************summary**********************/
.summary-section {
  background-color: black;
  color: white;
}
.summary-section p {
  margin: 0 auto;
  width: 1000px;
  max-width: 90%;
  text-align: center;
  letter-spacing: .1rem;
  line-height: 2;
  font-weight: lighter;
}
/***********************player**********************/
.player-section {
  /*background-color: #3c2c43;*/
  background-color: rgb(0, 0, 0, 0.25);
  color: white;
  padding: 0;
  position: relative;
}
.player-section video {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.section-overlay {
  padding: 50px 0;
}
.play-at {
  width: 90%;
  max-width: 700px;
  min-height: 500px;
  margin: 0 auto;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.play-at a {
  flex-basis: 200px;
  text-decoration: none;
  padding: 1rem;
  margin: 1rem;
  height: min-content;

  background-color: rgb(255, 255, 255, 0.1);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  transition: .2s;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.play-at a:hover {
  background-color: rgb(255, 255, 255, 0.05);
  transition: .2s;
}
.play-at svg {
  fill: white;
  padding: 1em;
}
.play-at img {
  filter: invert(0%);
  height: 4em;
  padding: 1em;
}
.iframe-wrapper {
}
/***********************Chara**********************/
.charactor-section {
  background-color: #170739;
  color: white;
}
.charactor-wrapper {
}
.charactor {
  margin-bottom: 4rem;
  display: flex;
  align-items: top;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.charactor-img {
  width: 70%;
}
.charactor-img::before {
  content: "";
  display: block;
  width: .1rem;
  height: 100%;
  background-color: mediumpurple;
}
.row-reverse {
  flex-direction: row-reverse;
}
.chara-name {
  /*writing-mode: vertical-rl;*/
  padding: 2rem;
  border-top: 12px solid mediumpurple;
  transform: skewY(-5deg);
}
.chara-name h3 {
  font-size: var(--size-name);
  font-weight: lighter;
  margin: 0;
}
.chara-name small {
  letter-spacing: .3em;
  font-weight: lighter;
}
/***********************ships**********************/
.ship-section {
  background-color: #272641;
  color: white;
}
.ship-wrapper {
  width: 80%;
  margin: 6rem 0;
  margin-left: auto;
}
.enemy {
  margin-left: 0;
  right: 0;
  text-align: right;
}
.ship-wrapper h3 {
  margin: 0;
  padding: 0 .5em;
  padding-bottom: .5em;

  font-size: 2rem;
  font-weight: lighter;
  letter-spacing: .2em;
}
.ship {
  position: relative;
  left: inherit;
  overflow: hidden;
}
.ship-img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 2/1;
  object-fit: cover;
}
.ship-name {
  position: absolute;
  top: 0;
  padding: 1rem 3rem;
  border-top: 12px solid mediumpurple;
  transform: skewY(-5deg);

  color: black;
}
.ship-name h4 {
  font-size: var(--size-name);
  font-weight: lighter;
  margin: 0;
}
.ship-name small {
  letter-spacing: .3em;
  font-weight: lighter;
}
@media screen and (max-width: 700px) {
  #toc {
    display: none;
  }
  #links {
    display: none;
  }
  body {
    --size-name: 2rem;
  }
  .heading {
    font-size: .5rem;
  }
  .wrapper {
    overflow: scroll;
  }
  .background {
    width: auto;
    position: relative;
    /*
    left: 50%;
    transform: translate(-50%,0);*/
    transition: .2s;
    height: 700px;
    animation: 3s linear ;
  }
  .charactor-img {
    width: 90%;
  }
  .charactor-section h2, .charactor-section h3 {
  }
  .ship-wrapper {
    width: 90%;
  }
  .ship-name {
    padding: 0 1rem;
    border-top: 4px solid mediumpurple;
  }
  .ship-img {
    aspect-ratio: 16/9;
  }
  .ship-wrapper h3 {
    font-size: 1.5rem;
  }
}
/***********************goods**********************/
.goods-section {
  background-color: #f5f4f1;
}
iframe {
  border-style: none;
}
.goods-wrapper {
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
  color: #3f3f3f;

  display: flex;
  flex-wrap: wrap;
}
.goods {
  flex: 1 1;
  flex-basis: 200px;
  width: 50%;
  margin: .5rem;
  /*box-shadow: 0 0 10px 0 rgb(0,0,0);*/
  /*border-radius: .5rem;*/
  overflow: hidden;
  text-decoration: none;
}
.goods:hover {
  opacity: .8;
}
.goods-img {
  width: 100%;
  border-radius: .5rem;

}
.goods-text {
  padding: 1rem;
}
.goods h3, .goods p {
  font-size: 1rem;
  margin: 0;
  margin-top: .5em;
}
.goods span {
  font-weight: bold;
  margin: 0;
}
.goods-text small {
  opacity: .9;
}
.goods-text svg {
  opacity: .7;
}
/***********************footer**********************/
.footer {
  padding: 0 10px;
  background: linear-gradient(to left, #c3dab8, 20%, #6a4390);
}
.footer-in {
  display: flex;
  flex-direction: column;
  gap: 2em;

  padding: 3em 0;
}
.footer-logo {
  height: 100px;
  margin: 0 auto;
}
.links {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.link {
  flex: 1 1;
  flex-basis: 150px;
  margin: .5rem;
  padding: 1rem;
  border-radius: 0px;
  /*border: 1px solid white;*/
  text-decoration: none;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.1);
  transition: .2s;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5em;
}
.link:hover {
  background-color: inherit;
  transition: .2s;
}
.link img {
  height: 2em;
  /*border-radius: 9999px;*/
  vertical-align: middle;
}
.link svg {
  height: 2em;
  fill: white;
  vertical-align: middle;
}
.link span {
  vertical-align: middle;
  padding: 0;
  font-size: .4em;
  font-weight: bold;
  letter-spacing: .1em;
  color: white;
  text-align: center;
}
.copyright {
  text-align: center;
  color: white;
}