/*
Theme Name: bunnygarden21-theme
Description: bunnygarden21 theme.
*/
:root {
  --yellow: #ffff00;
  --brown: #3d0919;
  --header-height: 140px;
  --logo-width: clamp(220px, 20vw, 300px);
}

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;
  color: #fff;
}

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(--yellow);
  text-shadow: 3px 3px 7px #000,
    -3px 3px 7px #000,
    3px -3px 7px #000,
    -3px -3px 7px #000;
}

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

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.bld {
  font-weight: bold;
}
.red {
  color: #f00!important;
}

/*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(--brown);
  padding: 12px;
  position: fixed;
  top: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 10;
  border-bottom: 2px solid #fff;
  border-image: linear-gradient(to right, #f1ce4a 0%, #f5e497 50%, #f1ce4a 100%);
    border-image-slice: 1;
  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(--yellow);
}

.sub-nav li a.active {
  color: #000;
  border-radius: 24px;
  background: var(--yellow);

}

.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 {
  display: block;
  font-size: 1.6rem;
  font-family: "Yrsa", serif;
  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(--yellow);
}


/*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/mv1.jpg') no-repeat center center #000;
  background-size: cover;
}

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

.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 {
  font-size: 3rem;
    padding: 1.2rem 0 1.4rem;
    text-align: center;
    background: url('images/bg-title1.png') no-repeat center center;
    line-height: .8;
    color: #fff;
    text-shadow: 2px 2px 0 #bf8112, -2px -2px 0 #bf8112, -2px 2px 0 #bf8112, 2px -2px 0 #bf8112, 0px 2px 0 #bf8112, 0 -2px 0 #bf8112, -2px 0 0 #bf8112, 2px 0 0 #bf8112;
    margin-bottom: 1.4rem;
}


.main-content section h2 .shape {

  font-family: "Yrsa", serif;

}

.main-content section h2 span span {
  font-weight: 900;
  display: block;
  font-size: clamp(.8rem, 3vw, 1rem);
}

.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(0, 0, 0, 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: #000 url('images/bg-story.png') center / cover no-repeat ;
  text-align: center;
}

#story p {
  text-shadow: 2px 2px 0px #000,
    -2px 2px 0px #000,
    2px -2px 0px #000,
    -2px -2px 0px #000;
}
#story .strong {
  font-size: clamp(1.2rem, 4vw, 1.4rem);
}

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

.tab_menu div {
  display: flex;
  justify-content: center;
  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(--yellow);
}
.tab_item05:hover,
.tab_item06:hover {
  opacity: 0.75;
    border: 1px solid #333;
}
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 {
  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 {
  opacity: 1;
  border: 1px solid var(--yellow);
}

.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: 0;
  left: 0;
}

.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(--brown);
  color: #fff;
  padding: 1rem;
}

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

#system .red {
  color: #f00;
}


#comparisons table th {
  background: var(--brown);
  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(--brown) 20%, #fff 80%);
}

#comparisons table tr td:nth-child(1) {
  color: #fff;
  background: color-mix(in srgb, var(--brown) 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%;
    }
    .tab_menu div {
      width: 100%;
      flex-wrap: wrap;
    }
  
    .tab_item {
      width: 16%;
    }

}

@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(--brown);
  }

  .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: 140px;
  }

  .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) {
  .main-content .mv .title .logo {
      bottom: 110px;
    }
  .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;
  
}

}