/*
Theme Name: Asuka1-theme
Description: Asuka1 theme.
*/
:root {
  --pink: #ff66ff;
  --blue: #4cc8f4;
  --header-height: 140px;
  --logo-width: clamp(220px, 40vw, 320px);
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-family: "Noto Sans JP", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, sans-serif;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  font-size: 1rem;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  text-decoration: none;
}


.strong {
  font-weight: 900;
  text-align: center;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--pink);
  text-shadow: 3px 3px 7px #fff,
    -3px 3px 7px #fff,
    3px -3px 7px #fff,
    -3px -3px 7px #fff;
}

.strong rt {
  font-size: .8rem;
  margin-bottom: -6px;
  text-shadow: 1px 1px 4px #fff,
    -1px 1px 4px #fff,
    1px -1px 4px #fff,
    -1px -1px 4px #fff;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.bld {
  font-weight: bold;
}

/*layout*/

.container {
  max-width: 1300px;
  margin: auto;
}

.main-content {
  margin-top: var(--header-height);
}

/*初回画面*/
.intro {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  background: url('images/bg-intro.jpg') no-repeat center center;
  background-size: cover;
  overflow-y: hidden;
  position: fixed;
  z-index: 998;
  top: 0;
}

.intro p {
  color: #fff;
  text-shadow: 2px 2px 3px #333, -2px -2px 3px #333,
    -2px 2px 3px #333, 2px -2px 3px #333,
    0px 2px 3px #333, 0-2px 3px #333,
    -2px 0 3px #333, 2px 0 3px #333;
}

.intro>div {
  font-size: 1rem;
  text-align: center;
  position: fixed;
  left: 50%;
  top: 50%;
  width: 90%;
  transform: translate(-50%, -50%);
  z-index: 999;
  line-height: 1.4;
}

.intro .greeting {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.intro .question {
  margin-bottom: .6rem;
}

.intro .btn-area {
  display: flex;
  justify-content: center;
}

.intro button {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  background: #44d4f6;
  background-image: -webkit-linear-gradient(top, #44d4f6, #44bfdb);
  background-image: -moz-linear-gradient(top, #44d4f6, #44bfdb);
  background-image: -ms-linear-gradient(top, #44d4f6, #44bfdb);
  background-image: -o-linear-gradient(top, #44d4f6, #44bfdb);
  background-image: linear-gradient(to bottom, #44d4f6, #44bfdb);
  -webkit-border-radius: 40;
  -moz-border-radius: 40;
  border-radius: 40px;
  color: #ffffff;
  font-size: 36px;
  padding: 10px 30px 10px 30px;
  font-weight: bold;
  margin: 6px;
  width: 180px;
  text-align: center;
  margin-bottom: 20px;
  border: none;
  cursor: pointer;
}

.btn-area a {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  background: #333;
  -webkit-border-radius: 40;
  -moz-border-radius: 40;
  border-radius: 40px;
  color: #ffffff;
  font-size: 36px;
  padding: 10px 30px 10px 30px;
  font-weight: bold;
  margin: 6px;
  width: 180px;
  text-align: center;
  margin-bottom: 20px;
  border: none;
}

.intro button span,
.btn-area a span {
  display: block;
  color: #fff;
  font-size: 14px;
  margin-top: 4px;
  font-weight: normal;
}

/*header*/

.site-header {
  background: var(--blue);
  padding: 12px;
  position: fixed;
  top: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 10;
  border-bottom: 2px solid #fff;
  display: flex;
  align-items: center;
}

.site-header .container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-header h1 {
  width: var(--logo-width);
}

.site-header .header-right {
  width: calc(100% - var(--logo-width));
}

.site-header .header-right nav {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.sub-nav ul {
  display: flex;
  gap: .5rem;
  font-size: .8rem;
  margin-bottom: 1rem;
}

.sub-nav li a {
  color: #fff;
  padding: 1px 12px;
}

.sub-nav li a:hover {
  color: var(--pink);
}

.sub-nav li a.active {
  border-radius: 24px;
  background: var(--pink);

}

.main-nav ul {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: clamp(4px, .4vw, 1rem);
}

.main-nav li {
  text-align: center;
  padding: 0 1%;
}

.main-nav li a {
  font-weight: 900;
  display: block;
  font-size: 1.2rem;
  letter-spacing: 1px;
  line-height: 1;
  color: #fff;

}

.main-nav li a span {
  font-size: .8rem;
}

.main-nav li a:hover,
.main-nav li a:hover span {
  color: var(--pink);
}


/*footer*/
.site-footer {
  background: #141619;
  color: #fff;
  padding: 2.4rem 12px;
  line-height: 1.4;
}

.contact-wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

#contact {
  width: 70%;
  padding: 1%;
}

#contact p {
  margin-bottom: 1.2rem;
}

#contact form {
  padding: 1%;
}

#contact input,
#contact textarea {
  width: 100%;
  border: 0;
  border-radius: 4px;
  padding: .8rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #222427;
  color: #969696;

}

#contact textarea {
  height: 200px;
}

#contact input[type="submit"] {
  width: 100%;
  background: #363940;
  color: #fff;
  cursor: pointer;
}

#contact input[type="submit"]:hover {
  background: #1eaede;
}

.screen-reader-response {
  display: none;
}

#contact [role="alert"] {
  color: #1eaede;
}

.site-footer h2 {
  font-size: 1.8rem;
  padding: 12px 0;
  color: #fff;
  font-family: serif;
}

.sns {
  width: 30%;
  padding: 1%;
}

.sns-nav {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.sns-nav li svg {
  height: 32px;
  color: #eee;
}

.copyright {
  text-align: center;
  font-size: .8rem;
}

.copyright img {
  margin-bottom: 1%;
}

/*main*/
.main-content {
  font-size: 1.2rem;
}

.main-content p {
  margin-bottom: 1rem;
}

.main-content .mv {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--header-height));
  padding: 0;
  background: url('images/mv.jpg') no-repeat center center #000;
  background-size: cover;
}

.main-content .mv .title .logo {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 80px;
}

.main-content .mv .title .release {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 20px;
}

.main-content .game-logo {
  position: absolute;
  left: 1rem;
  top: 1rem;
  display: flex;
  gap: 10px;
  align-items: center;
  width: clamp(200px, 25vw, 320px);
}

.main-content section h2 {
  text-align: center;
  padding: 0 1rem;
}

.main-content section h2 .shape {
  letter-spacing: 2px;
  display: inline-block;
  font-weight: 900;
  font-size: clamp(1.4rem, 4vw, 2rem);
  text-align: center;
  line-height: 1;
  color: #fff;
  margin-bottom: 1.4rem;
  background: linear-gradient(to right,
      #385586 0%,
      #385586 24px,
      #f74279 24px,
      #f74279 100%);
  padding: .6rem 36px .6rem 60px;
  border-radius: 12px;
  transform: skew(-20deg);
}

.main-content section h2 span span {
  border-top: 1px solid;
  transform: skew(20deg);
  font-weight: 900;
  display: block;
  font-size: clamp(.8rem, 3vw, 1rem);
  margin-top: 6px;
  padding-top: 6px;
}

.banner {
  background: #141619;
}

.banner ul {
  display: flex;
  justify-content: center;
}

.banner ul li {
  padding: 1rem;
}

.movie-bg {
  padding-top: 8rem;
  background: rgba(0, 0, 0, 0.1);
}

.movie-bg video {
  position: fixed;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  margin: auto;
  z-index: -3;
}

.movie-bg section {
  padding: 4rem;
  background-color: rgba(255, 255, 255, 0.85);
  margin-bottom: 8rem;
  line-height: 1.5;
}

.video-outer {
  display: flex;
  flex-wrap: wrap;
}

.video-wrapper {
  width: 100%;
  margin-bottom: 1.4rem;
}

.video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.img-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}

.img-list.col-2 {
  grid-template-columns: repeat(2, 1fr);
}

.img-list.col-3 {
  grid-template-columns: repeat(3, 1fr);
}

.img-list a {
  display: block;
  position: relative;
}

.img-list .zoom {
  position: absolute;
  right: 2px;
  bottom: 2px;
}

#story {
  background: #fff url('images/bg-story.png') center / cover no-repeat ;
  text-align: center;
}

#story p {
  text-shadow: 2px 2px 0px #fff,
    -2px 2px 0px #fff,
    2px -2px 0px #fff,
    -2px -2px 0px #fff;
}

.tab_menu {
  margin: auto;
  margin-bottom: 1rem;
}

.tab_menu div {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
}

.tab_item {
  height: auto;
  transition: all 0.2s ease;
  cursor: pointer;
  opacity: 0.75;
  border: 1px solid #333;
}

.tab_item:hover {
  opacity: 1;
  border: 1px solid var(--pink);
}

input[name="tab_item"] {
  display: none;
}

.tab_content {
  display: none;
  clear: both;
  overflow: hidden;
}

#tab01:checked~#tab01_content,
#tab02:checked~#tab02_content,
#tab03:checked~#tab03_content,
#tab04:checked~#tab04_content,
#tab05:checked~#tab05_content,
#tab06:checked~#tab06_content,
#tab07:checked~#tab07_content,
#tab08:checked~#tab08_content,
#tab09:checked~#tab09_content,
#tab10:checked~#tab10_content,
#tab11:checked~#tab11_content,
#tab12:checked~#tab12_content,
#tab13:checked~#tab13_content,
#tab14:checked~#tab14_content,
#tab15:checked~#tab15_content,
#tab16:checked~#tab16_content,
#tab17:checked~#tab17_content,
#tab18:checked~#tab18_content,
#tab19:checked~#tab19_content,
#tab20:checked~#tab20_content,
#tab21:checked~#tab21_content,
#tab22:checked~#tab22_content,
#tab23:checked~#tab23_content,
#tab24:checked~#tab24_content,
#tab25:checked~#tab25_content,
#tab26:checked~#tab26_content,
#tab27:checked~#tab27_content,
#tab28:checked~#tab28_content,
#tab29:checked~#tab29_content,
#tab30:checked~#tab30_content {
  display: block;
}


#tab01:checked~.tab_menu .tab_item01,
#tab02:checked~.tab_menu .tab_item02,
#tab03:checked~.tab_menu .tab_item03,
#tab04:checked~.tab_menu .tab_item04,
#tab05:checked~.tab_menu .tab_item05,
#tab06:checked~.tab_menu .tab_item06,
#tab07:checked~.tab_menu .tab_item07,
#tab08:checked~.tab_menu .tab_item08,
#tab09:checked~.tab_menu .tab_item09,
#tab10:checked~.tab_menu .tab_item10,
#tab11:checked~.tab_menu .tab_item11,
#tab12:checked~.tab_menu .tab_item12,
#tab13:checked~.tab_menu .tab_item13,
#tab14:checked~.tab_menu .tab_item14,
#tab15:checked~.tab_menu .tab_item15,
#tab16:checked~.tab_menu .tab_item16,
#tab17:checked~.tab_menu .tab_item17,
#tab18:checked~.tab_menu .tab_item18,
#tab19:checked~.tab_menu .tab_item19,
#tab20:checked~.tab_menu .tab_item20,
#tab21:checked~.tab_menu .tab_item21,
#tab22:checked~.tab_menu .tab_item22,
#tab23:checked~.tab_menu .tab_item23,
#tab24:checked~.tab_menu .tab_item24,
#tab25:checked~.tab_menu .tab_item25,
#tab26:checked~.tab_menu .tab_item26,
#tab27:checked~.tab_menu .tab_item27,
#tab28:checked~.tab_menu .tab_item28,
#tab29:checked~.tab_menu .tab_item29,
#tab30:checked~.tab_menu .tab_item30 {
  opacity: 1;
  border: 1px solid var(--pink);
}

.character {
  width: 100%;
  height: 806px;
  position: relative;
  align-items: center;
  display: flex;
}

.character p {
  margin-bottom: .5rem;
}

.character .fullview {
  position: absolute;
  width: clamp(69px, 14vw, 138px);
  bottom: 12px;
  left: 12px;
}

.character .image {
  position: absolute;
}

.character .image img {
  max-width: none;
}

.character .content {
  margin-left: auto;
  width: 45%;
  z-index: 2;
}

.character h3 {
  font-weight: bold;
  font-size: clamp(2rem, 7vw, 3.4rem);
  color: #fff;
  line-height: 1.4;
}

.character h3 rt {
  margin-bottom: 4px;
}

.character .cv {
  margin-bottom: 1rem;
}

.character h3,
.character .cv {
  color: #fff;
  text-align: center;
  text-shadow: 5px 5px 10px var(--team-color),
    -5px 5px 10px var(--team-color),
    5px -5px 10px var(--team-color),
    -5px -5px 10px var(--team-color);

}


.character .voice {
  text-align: center;
  margin-bottom: 1rem;
}

.character .voice img {
  vertical-align: middle;
  cursor: pointer;
}

.character .strong {
  color: #ff0;
  font-size: 1.6rem;
  margin-bottom: 0;
}

.character .description {
  background: var(--blue);
  color: #fff;
  padding: 1rem;
}

#system>div {
  margin-bottom: 4rem;
}

#system .red {
  color: #f00;
}


#comparisons table th {
  background: var(--blue);
  border: 2px solid #fff;
  padding: 1rem;
}

#comparisons table td {
  color: #000;
  width: 35%;
  padding: 1rem;
  border: 2px solid #fff;
  background: color-mix(in srgb, var(--blue) 20%, #fff 80%);
}

#comparisons table tr td:nth-child(1) {
  background: color-mix(in srgb, var(--blue) 70%, #fff 30%);
  border: 2px solid #fff;
  width: 30%;
}

#comparisons table td a {
  display: block;
  position: relative;
  margin-top: 6px;
}

#comparisons table td a .zoom {
  position: absolute;
  right: 2px;
  bottom: 2px;
}

#info dl {
  display: flex;
  flex-wrap: wrap;
  
}

#info dl dt {
  width: 50%;
  text-align: right;
  border-right: 1px solid;
  padding-right: 1rem;
}

#info dl dd {
  width: 50%;
  padding-left: 1rem;
}

@media screen and (max-width: 1000px) {
  .tab_menu {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
  }

  .tab_menu div {
    width: max-content;
    grid-template-columns: repeat(10, 90px);
  }

  .tab_item {
    width: 90px;
    height: auto;
    flex: none;
  }

  .character {
    height: auto;
    flex-direction: column;
    gap: 20px;
  }

  .character .image {
    position: relative;
    width: 100%;
  }

  .character .image img {
    max-width: 100%;
  }

  .character .fullview {
    left: auto;
    right: 12px;
  }

  .character .content {
    width: 100%;
  }

  .tab_menu {
    width: 100%;
  }

}

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

  .pushbar-button {
    display: none;
  }
}

@media screen and (max-width: 960px) {
  :root {
    --header-height: 100px;
  }

  .pc {
    display: none !important;
  }

  .sp {
    display: block;
  }

  .pushbar {
    background: var(--blue);
  }

  .pushbar-button {
    margin-left: auto;
    width: 38px;
    display: block;
    cursor: pointer;
    color: #000;
    background: #fff;
    padding: 6px 8px;
    border: none;
  }

  .pushbar .sub-nav ul {
    position: relative;
    justify-content: center;
    flex-wrap: wrap;
  }

  .pushbar .sub-nav ul li {
    width: 100%;
    text-align: center;
    padding: 6px;
  }

  .main-nav ul {
    position: relative;
    width: 100%;
    top: 0;
    margin-bottom: 2rem;
    display: block;
  }

  .main-nav li {
    text-align: left;
    padding: 0;
    border-bottom: 1px solid #fff;
  }

  .main-nav li a {
    padding: 1rem;
  }

}



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

  /*footer*/
  #contact {
    width: 100%;
  }

  .sns {
    width: 100%;
  }

  /*main*/
.main-content {
  font-size: 1rem;
}

  .main-content .mv {
    padding-bottom: 48px;
    background: url('images/mv-sp.jpg') no-repeat center center #000;
    background-size: cover;
  }

  .main-content .mv .title .logo {
    bottom: 100px;
  }

  .main-content .mv .title .release {
    bottom: 48px;
  }

  .main-content .release {
    margin-top: -24px;
  }

  .video-wrapper {
    width: 100%;
  }

  .movie-bg {
    padding-top: 0;
  }

  .movie-bg section {
    padding: 1rem;
    margin-bottom: 0;
  }
  .img-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  #story>div {
    text-align: left;
  }

  #story p br {
    display: none;
  }

  #comparisons table {
    width: 100%;
    border-collapse: collapse;
  }

  #comparisons tr {
    display: flex;
    flex-wrap: wrap;
  }

  #comparisons table th,
  #comparisons table td,
  #comparisons table tr td:nth-child(1) {
    border: 1px solid #fff;
  }

  #comparisons tr:first-child th:first-child {
    display: none;
  }

  #comparisons table tr:first-child th {
    flex: 1 1 50%;
  }

  #comparisons table tr:not(:first-child) td:first-child {
    text-align: center;
    flex: 1 1 100%;
  }

  #comparisons table tr:not(:first-child) td:not(:first-child) {
    flex: 1 1 50%;
  }

}

@media screen and (max-width: 540px) {
  .strong br {
    display: none;
  }

  .intro img {
    max-width: 300px;
  }

  .intro button {
    font-size: 1rem;
    width: 120px;
  }

  .btn-area a {
    font-size: 1rem;
    width: 120px;
  }

  .intro .rights {
    font-size: .8rem;
  }
  .img-list {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  #gallery .img-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #info dl {
    font-size: .9rem;
  
}

}