@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Roboto+Condensed:wght@700&display=swap");
@import url("colorbox.css");

/*---------------------------------------------
	Browser Default Initialization
  ---------------------------------------------*/

body,
div,
dl,
dt,
dd,
ul,
ul li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td,
section,
nav,
article,
aside,
header,
address,
figure,
figcaption {
 margin: 0;
 padding: 0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
 font-style: normal;
 font-weight: normal;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
caption,
th {
 text-align: left;
}
q::before,
q::after {
 content: "";
}
object,
embed {
 vertical-align: top;
}
hr,
legend {
 display: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
 font-size: 100%;
 font-weight: normal;
}
img,
abbr,
acronym,
fieldset {
 border: 0;
}
img {
 max-width: 100%;
 height: auto;
 vertical-align: bottom;
 -ms-interpolation-mode: bicubic;
}
ul li {
 list-style-type: none;
}
*,
*:before,
*:after {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
}
.clearfix {
 zoom: 1;
}
.clearfix:before,
.clearfix:after {
 content: "";
 display: table;
}
.clearfix:after {
 clear: both;
}
p.ind {
 text-indent: 1em;
}
em {
 font-style: normal;
}
strong {
 font-weight: bold;
}
a {
 color: #000;
 outline: none;
 text-decoration: none;
 transition: all 0.5s ease-in-out;
 -webkit-transition: all 0.25s ease-in-out;
 -moz-transition: all 0.25s ease-in-out;
 -o-transition: all 0.25s ease-in-out;
 -ms-transition: all 0.25s ease-in-out;
}
a:active,
a:hover {
 text-decoration: none;
}
a:focus,
*:focus {
 outline: none;
}
a:hover img {
 -moz-transition: all 0.25s ease-in-out;
 -o-transition: all 0.25s ease-in-out;
 -webkit-transition: all 0.25s ease-in-out;
 transition: all 0.25s ease-in-out;
}
/*.en {
	font-family: 'Smythe', cursive;
}*/
.min {
 font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 Pr6 W6", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "ＭＳ Ｐ明朝", "MS PMincho", Meiryo, serif;
}
.object-fit {
 object-fit: cover;
 font-family: "object-fit: cover;";
 min-height: 100%;
}
.txhd {
 display: block;
 height: 0;
 overflow: hidden;
 font-size: 1rem;
 line-height: 2;
}
.pc,
.is_pc {
 display: block;
}
.sp,
.is_sp {
 display: none;
}
@-ms-viewport {
 width: auto !important;
 initial-scale: 1;
}
@media only screen and (max-width: 820px) {
 .pc {
  display: none;
 }
 .sp {
  display: block;
 }
}
@media only screen and (max-width: 600px) {
 .is_pc {
  display: none;
 }
 .is_sp {
  display: block;
 }
}

:root {
 /* Colors: */
 --color-blk: #000000;
 --color-wht: #ffffff;
 --color-ylw: #fffea3;
 --color-grn: #95cecb;
 --color-pnk: #e20882;
 --color-gry2: #ced5da;
 --color-base: #212121;
 --ff-robo: "Roboto Condensed", sans-serif;
 --ff-min: "Shippori Mincho", "游明朝", YuMincho, "ヒラギノ明朝 Pr6 W6", "Hiragino Mincho Pro", "HGS明朝E", serif;
}

/* ==========================================================================
Global
========================================================================== */

html {
 font-size: 62.5%;
 overflow-y: scroll;
 height: 100%;
 line-height: 1.15;
 -ms-text-size-adjust: 100%;
 -webkit-text-size-adjust: 100%;
}
html.ofyh {
 height: 100%;
 overflow-y: hidden;
}
body {
 position: relative;
 font-family: "Zen Kaku Gothic New", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
 font-weight: 400;
 background: var(--color-wht);
 margin: 0;
 width: 100%;
 -ms-width: calc(100% - (100vw - 100%));
 color: var(--color-base);
 font-size: 1.6rem;
 line-height: 1;
 text-align: left;
 -moz-text-size-adjust: 100%;
 -webkit-text-size-adjust: 100%;
 -o-text-size-adjust: 100%;
 -ms-text-size-adjust: 100%;
 text-size-adjust: 100%;
}
.c-svg-sprite {
 display: none;
 width: 0;
 height: 0;
 opacity: 0;
 overflow: hidden;
}
#wrap {
 width: 100%;
 max-width: 2000px;
 margin-inline: auto;
 min-height: 100vh;
 display: block;
 position: relative;
 overflow: hidden;
}
.inner {
 zoom: 1;
 margin: 0 auto;
}

@media screen and (max-width: 820px) {
 body {
  width: 100%;
  font-size: 1.6rem;
  -webkit-text-size-adjust: 100%;
  -webkit-overflow-scrolling: touch;
  min-width: inherit;
 }
 #wrap {
  width: 100%;
  height: auto;
  min-width: 280px;
 }
}

/* sns
==================================================================================  */
.sns {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 30px;
}
.sns .btn {
 display: block;
 width: 35px;
 height: 35px;
}
.sns .btn a {
 display: block;
 width: 35px;
 height: 35px;
 fill: var(--color-blk);
}
.sns .btn.x a {
 padding: 2px;
}
.sns .btn a .icon {
 max-width: 100%;
 max-height: 100%;
}
.st0 {
 fill: #fe2c55;
}
.st1 {
 fill: var(--color-blk);
}
.st2 {
 fill: #25f4ee;
}

/*
LOADING
==================================================================================  */
.loadingWrap {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 9999;
 margin: 0px;
 padding: 0px;
 display: block;
}
.loadingWrapWaku {
 width: 100%;
 height: 100%;
 background: var(--color-wht);
 position: relative;
 margin: 0px;
 padding: 0px;
 display: flex;
 justify-content: center;
 align-items: center;
}
.lds-dual-ring {
 width: 140px;
 height: 280px;
 margin: 0px;
 padding: 0px;
 background: url(../img/logo_tate.png) no-repeat 50% 50%;
 background-size: contain;
 opacity: 1;
}
body.-start .loadingWrap {
 animation: ani_ld 2s cubic-bezier(1, 0, 0.85, 1) 0.8s both;
}
body.-start .lds-dual-ring {
 animation: ani_ld 0.6s ease-in-out 0.2s both;
}
@keyframes ani_ld {
 0% {
  opacity: 1;
  visibility: visible;
  pointer-events: inherit;
 }
 100% {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
 }
}
@keyframes spin {
 100% {
  transform: rotate(360deg);
 }
}

@media screen and (max-width: 600px) {
 .lds-dual-ring {
  width: calc((80 / 390) * 100cqw);
  height: calc((220 / 390) * 100cqw);
  max-width: 80px;
  max-height: 220px;
 }
}

/* header
==================================================================================  */
.l-gnav__container {
 position: relative;
 width: 100%;
 height: 0;
 z-index: 100;
}
.l-header__navi {
 display: none;
}
.l-header__navi ul {
 display: flex;
 justify-content: center;
 position: relative;
 gap: 25px;
}
.l-header__navi li {
 display: inline-block;
 height: 30px;
 position: relative;
}
.l-header__navi li.top,
.l-header__navi li.sp {
 display: none;
}
.l-header__navi li a {
 width: auto;
 height: 100%;
 margin: 0 auto;
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
 cursor: pointer;
}
.l-header__navi li a span {
 color: var(--color-blk);
 font-size: 2.1rem;
 font-family: var(--ff-robo);
 font-weight: 600;
 letter-spacing: -0.04em;
 padding-top: 0.2em;
 display: flex;
 align-items: center;
 height: 100%;
 transition: 0.2s;
}
.l-header__navi li.no a {
 pointer-events: none;
}
.l-header__navi li.no a span {
 opacity: 0.3;
}
.l-header__navi li ul.submenu {
 display: none;
}
.hd__menutrigger {
 display: block;
 position: fixed;
 left: 0;
 top: 0;
 z-index: 1000;
 transition: 0.5s;
}
.l-gnav__container.is__scroll .hd__menutrigger,
.l-gnav__container.-open .hd__menutrigger {
 opacity: 1;
 top: 0;
}
.hd__menutrigger-inner {
 position: relative;
 width: 80px;
 height: 80px;
 cursor: pointer;
 transition: 0.5s;
}
.hd__mark {
 position: absolute;
 top: 0;
 left: 0;
 width: 80px;
 height: 80px;
 transition: 0.5s;
 background-color: var(--color-grn);
}
.hd__mark .icon {
 max-width: 100%;
 max-height: 100%;
}
.hd__menutrigger span {
 transition: all 0.3s;
 width: 30px;
 height: 2px;
 background: var(--color-blk);
 display: block;
 position: absolute;
 left: 25px;
}
.hd__menutrigger span.hd__menutrigger__line01 {
 top: 50px;
}
.hd__menutrigger span.hd__menutrigger__line02 {
 top: 50px;
}
.hd__menutrigger-inner.-active .hd__mark {
 background-color: transparent;
}
.hd__menutrigger-inner.-active span {
 background: var(--color-blk);
}
.hd__menutrigger-inner.-active span.hd__menutrigger__line01 {
 transform: rotate(45deg) translateX(0px);
 left: 25px;
 top: 50px;
}
.hd__menutrigger-inner.-active span.hd__menutrigger__line02 {
 transform: rotate(-45deg) translateX(0px);
 left: 25px;
 top: 50px;
}
.hd__menutrigger .hd__menutrigger__txt {
 display: block;
 width: auto;
 position: absolute;
 top: 28px;
 left: 0;
 right: 0;
 transition: all 0.3s;
}
.hd__menutrigger .hd__menutrigger__txt em {
 color: var(--color-blk);
 font-size: 1.6rem;
 font-family: var(--ff-robo);
 font-weight: 700;
 letter-spacing: 0;
 text-align: center;
 display: block;
 transition: 0.5s;
 position: relative;
}
.hd__menutrigger-inner.-active .hd__menutrigger__txt {
 top: 20px;
}
.hd__menutrigger .hd__menutrigger__txt em.menu,
.hd__menutrigger-inner.-active .hd__menutrigger__txt em.close {
 display: block;
}
.hd__menutrigger .hd__menutrigger__txt em.close,
.hd__menutrigger-inner.-active .hd__menutrigger__txt em.menu {
 display: none;
}
.hd__menutrigger .hd__menutrigger__txt em.close {
 transition: 0.5s;
}
.backlayer {
 position: fixed;
 overflow-y: auto;
 z-index: 10;
 top: 0;
 left: 0;
 width: 100%;
 height: 100vh;
 background-color: var(--color-grn);
 transition: all 2.8s cubic-bezier(0.23, 1, 0.32, 1);
 opacity: 0;
 pointer-events: none;
 transform: scale(0.95);
}
.backlayer figure {
 position: absolute;
 top: 20%;
 right: 0;
 width: 50%;
 aspect-ratio: 20/16;
 background: url(../img/splash_06.svg) no-repeat 0 0;
 background-size: auto 100%;
 transition: all 0.4s ease-in;
 opacity: 0.7;
}
.backlayer.-open {
 opacity: 1;
 pointer-events: initial;
 transform: scale(1);
 transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.l-gnav__container.-open .hd__menutrigger {
 background: none;
}
.l-gnav__container.-open .l-header__navi {
 position: fixed;
 top: 0;
 left: 0;
 bottom: 0;
 width: 100%;
 height: 100vh;
 display: flex;
 padding: 0;
 background: none;
 z-index: 12;
}
.l-gnav__container.-open .hd__logo {
 display: none;
}
.l-gnav__container.-open .l-header__navi ul {
 border-top: none;
 width: 86%;
 margin: 0 auto;
 padding: 0;
 display: flex;
 flex-flow: column;
 align-items: flex-start;
 gap: 0;
}
.l-gnav__container.-open .l-header__navi li {
 display: block;
 text-align: center;
 height: unset;
 animation: hd__start 0.8s both;
}
.l-gnav__container.-open .l-header__navi li:first-child:before,
.l-gnav__container.-open .l-header__navi li::after {
 display: none;
}
.l-gnav__container.-open .l-header__navi li:nth-child(2) {
 animation-delay: 0.05s;
 -webkit-animation-delay: 0.05s;
}
.l-gnav__container.-open .l-header__navi li:nth-child(3) {
 animation-delay: 0.1s;
 -webkit-animation-delay: 0.1s;
}
.l-gnav__container.-open .l-header__navi li:nth-child(4) {
 animation-delay: 0.15s;
 -webkit-animation-delay: 0.15s;
}
.l-gnav__container.-open .l-header__navi li:nth-child(5) {
 animation-delay: 0.2s;
 -webkit-animation-delay: 0.2s;
}
.l-gnav__container.-open .l-header__navi li:nth-child(6) {
 animation-delay: 0.25s;
 -webkit-animation-delay: 0.25s;
}
.l-gnav__container.-open .l-header__navi li:nth-child(7) {
 animation-delay: 0.3s;
 -webkit-animation-delay: 0.3s;
}
.l-gnav__container.-open .l-header__navi li:nth-child(8) {
 animation-delay: 0.35s;
 -webkit-animation-delay: 0.35s;
}
.l-gnav__container.-open .l-header__navi li:nth-child(9) {
 animation-delay: 0.35s;
 -webkit-animation-delay: 0.35s;
}
.l-gnav__container.-open .l-header__navi li:nth-child(10) {
 animation-delay: 0.4s;
 -webkit-animation-delay: 0.4s;
}
.l-gnav__container.-open .l-header__navi li:nth-child(11) {
 animation-delay: 0.45s;
 -webkit-animation-delay: 0.45s;
}
.l-gnav__container.-open .l-header__navi li:nth-child(12) {
 animation-delay: 0.5s;
 -webkit-animation-delay: 0.5s;
}
.l-gnav__container.-open .l-header__navi li.top {
 display: block;
}
.l-gnav__container.-open .l-header__navi li.sp {
 display: none;
}
.l-gnav__container.-open .l-header__navi li a {
 width: auto;
 margin: 0 auto;
 display: inline-block;
 position: relative;
 line-height: 0.8;
 padding: 0.4em 0.4em 0 0;
 background: none;
 cursor: pointer;
}
.l-gnav__container.-open .l-header__navi li a span {
 font-size: min(7rem, calc((70 / 1360) * 100cqw));
 font-weight: 700;
 padding-top: 0;
 position: relative;
 z-index: 2;
}
.l-gnav__container.-open .l-header__navi li a span small {
 font-size: 85%;
}
.l-gnav__container.-open .l-header__navi li a:before {
 content: " ";
 position: absolute;
 height: 100%;
 width: 0;
 top: auto;
 bottom: -2px;
 left: auto;
 right: 4px;
 background-color: var(--color-blk);
 transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
 pointer-events: none;
 transition-duration: 0.5s;
 z-index: 1;
}

@keyframes hd__start {
 0% {
  opacity: 0;
  transform: translateX(-50px);
 }
 100% {
  opacity: 1;
  transform: translateX(0);
 }
}

@media screen and (min-width: 2001px) {
 .hd__menutrigger {
  left: calc(50vw - 1000px);
 }
 .backlayer {
  left: calc(50vw - 1000px);
  width: 2000px;
 }
 .l-gnav__container.-open .l-header__navi {
  left: calc(50vw - 1000px);
  width: 2000px;
 }
}

@media screen and (min-width: 821px) {
 .l-gnav__container.-open .l-header__navi li a:hover:before {
  width: 100%;
  right: auto;
  left: 0;
 }
 .l-gnav__container.-open .l-header__navi li a:hover span {
  color: var(--color-wht);
 }
 .hd__menutrigger:hover span.hd__menutrigger__line01 {
  transform: translateX(-8px);
 }
 .hd__menutrigger:hover span.hd__menutrigger__line02 {
  transform: translateX(8px);
 }
 .hd__menutrigger-inner.-active:hover span.hd__menutrigger__line01 {
  transform: rotate(45deg) translateX(0px);
 }
 .hd__menutrigger-inner.-active:hover span.hd__menutrigger__line02 {
  transform: rotate(-45deg) translateX(0px);
 }
}

@media screen and (max-width: 999px) {
 .l-gnav__container {
  height: 0;
 }
 .l-header__navi {
  display: none;
 }
 .hd__menutrigger {
  opacity: 1;
  top: 0;
 }
}

@media only screen and (max-width: 820px) {
 .backlayer figure {
  top: 66%;
 }
 .l-gnav__container.-open .l-header__navi li.pc {
  display: none;
 }
 .l-gnav__container.-open .l-header__navi li.sp {
  display: block;
 }
 .l-gnav__container.-open .l-header__navi ul {
  width: 80%;
  gap: 10px;
 }
 .l-gnav__container.-open .l-header__navi li {
  height: unset;
 }
 .l-gnav__container.-open .l-header__navi li a span {
  font-size: 6.6rem;
 }
}

@media only screen and (max-width: 600px) {
 .l-gnav__container {
  opacity: 1;
 }
 .backlayer figure {
  top: 60%;
  width: 75%;
 }
 .hd__menutrigger {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 100%);
 }
 body.-scrolldown .hd__menutrigger {
  transform: translateY(-100%);
 }
 body.-scrolldown .hd__menutrigger-inner.-active {
  transform: translateY(0);
 }
 .hd__menutrigger-inner {
  width: 60px;
  height: 60px;
 }
 .hd__menutrigger-inner::before {
  width: 60px;
  height: 60px;
 }
 .hd__mark {
  width: 100%;
  height: 60px;
  background-color: unset;
 }
 .hd__menutrigger span {
  width: 50px;
  height: 2px;
  left: 5px;
 }
 .hd__menutrigger span.hd__menutrigger__line01 {
  top: 34px;
 }
 .hd__menutrigger span.hd__menutrigger__line02 {
  top: 34px;
 }
 .hd__menutrigger-inner.-active span.hd__menutrigger__line01 {
  transform: rotate(20deg) translateX(0px);
  left: 5px;
  top: 40px;
 }
 .hd__menutrigger-inner.-active span.hd__menutrigger__line02 {
  transform: rotate(-20deg) translateX(0px);
  left: 5px;
  top: 40px;
 }
 .hd__menutrigger .hd__menutrigger__txt {
  top: 12px;
 }
 .hd__menutrigger .hd__menutrigger__txt em {
  font-size: 1.5rem;
 }
 .hd__menutrigger-inner.-active .hd__menutrigger__txt {
  top: 12px;
 }
 .hd__menutrigger-inner.-active {
  background: unset;
 }
 .l-gnav__container.-open .l-header__navi {
  overflow-x: hidden;
  overflow-y: auto;
 }
 .l-gnav__container.-open .l-header__navi ul {
  justify-content: flex-start;
  width: 100%;
  padding-inline: calc((15 / 390) * 100cqw);
  padding-block: 30cqw 15cqw;
  gap: 3vw;
 }
 .l-gnav__container.-open .l-header__navi li a span {
  font-size: min(4.8rem, 12.3cqw);
 }
}

/*
titleArea
==================================================================================*/
.titleArea {
 display: block;
 position: relative;
 width: 100%;
}
.ta_wrap {
 display: flex;
 justify-content: center;
 flex-direction: row-reverse;
 padding-inline: calc((80 / 1360) * 100cqw);
 gap: calc((66 / 1360) * 100cqw);
}
.ta_img {
 width: calc((740 / 1360) * 100cqw);
}
.ta_main {
 display: flex;
 flex-flow: column;
 align-items: center;
 width: calc((434 / 1360) * 100cqw);
 padding-top: calc((47 / 1360) * 100cqw);
 padding-inline: calc((7 / 1360) * 100cqw);
}
.ta_logo {
 display: block;
 position: relative;
 margin-inline: auto;
 width: calc((82 / 1360) * 100cqw);
}
.ta_logo .ta_h1 {
 position: relative;
 width: 100%;
}
.ta_date {
 width: calc((220 / 1360) * 100cqw);
 margin-top: calc((34 / 1360) * 100cqw);
}
.ta_linkbtn {
 display: flex;
 justify-content: center;
 align-items: center;
 margin-block: calc((24 / 1360) * 100cqw);
}
.ta_comic {
 width: 100%;
}

/* -start */
.ta_logo,
.ta_date,
.ta_linkbtn,
.ta_comic {
 opacity: 0;
}
body.-start .ta_logo {
 animation-name: obiDown;
 animation-duration: 1.5s;
 animation-timing-function: cubic-bezier(0.08, 0.8, 0.315, 1);
 animation-delay: 1.5s;
 animation-fill-mode: both;
}
body.-start .ta_date,
body.-start .ta_linkbtn,
body.-start .ta_comic {
 animation-name: obiOpa;
 animation-duration: 1.5s;
 animation-timing-function: cubic-bezier(0.25, 0.6, 0.69, 0.98);
 animation-delay: 2.5s;
 animation-fill-mode: both;
}
@keyframes obiDown {
 0% {
  transform: translateY(-20%);
  opacity: 0;
 }
 100% {
  transform: translateY(0);
  opacity: 1;
 }
}
@keyframes obiOpa {
 0% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}

@media screen and (min-width: 1601px) {
 .ta_wrap {
  padding-inline: 94px;
  gap: 78px;
 }
 .ta_img {
  width: 840px;
 }
 .ta_main {
  width: 493px;
  padding-top: 56px;
  padding-inline: 8px;
 }
 .ta_logo {
  width: 96px;
 }
 .ta_date {
  width: 259px;
  margin-top: 40px;
 }
 .ta_linkbtn {
  margin-block: 28px;
 }
}

@media screen and (min-width: 821px) {
 .ta_comic a:hover {
  opacity: 0.6;
 }
}

@media screen and (max-width: 820px) {
 .ta_wrap {
  padding-inline: unset;
  gap: 0;
 }
 .ta_img {
  width: calc((740 / 1240) * 100cqw);
 }
 .ta_main {
  width: calc((500 / 1240) * 100cqw);
  padding-top: calc((47 / 1240) * 100cqw);
  padding-inline: calc((20 / 1240) * 100cqw);
 }
 .ta_logo {
  width: calc((82 / 1240) * 100cqw);
 }
 .ta_date {
  width: calc((220 / 1240) * 100cqw);
  margin-top: calc((34 / 1240) * 100cqw);
 }
 .ta_linkbtn {
  margin-block: calc((40 / 1240) * 100cqw);
 }
}

@media screen and (max-width: 600px) {
 .ta_wrap {
  flex-direction: column;
  align-items: center;
  padding-inline: unset;
  gap: 0;
 }
 .ta_img {
  width: auto;
  padding-top: calc((12 / 390) * 100cqw);
  padding-inline: calc((15 / 390) * 100cqw);
  padding-top: min(48px, calc((48 / 390) * 100cqw));
  padding-inline: unset;
 }
 .ta_main {
  width: auto;
  padding-top: calc((16 / 390) * 100cqw);
  padding-inline: unset;
 }
 .ta_logo {
  width: calc((340 / 390) * 100cqw);
 }
 .ta_date {
  width: calc((140 / 390) * 100cqw);
  margin-top: calc((15 / 1360) * 100cqw);
 }
 .ta_linkbtn {
  margin-block: 12px;
 }
 .ta_comic {
  width: calc((300 / 390) * 100cqw);
 }
 .ta_logo,
 .ta_date,
 .ta_linkbtn,
 .ta_comic {
  opacity: 1;
 }
 body.-start .ta_logo,
 body.-start .ta_date,
 body.-start .ta_linkbtn,
 body.-start .ta_comic {
  animation: none;
 }
}

/*
 top_mvtk
==================================================================================*/
.mvtk {
 width: 100%;
 display: block;
 position: relative;
 padding: 0 40px 80px;
 z-index: 1;
}
.top_mvtk {
 width: 100%;
 display: block;
}
.top_mvtk #mvtk-widgets-container {
 margin: 0 auto;
}
.top_mvtk .mvtk-normal-container {
 border: none;
}

@media only screen and (max-width: 820px) {
 .mvtk {
  width: 100%;
  display: block;
  padding-block: 30px;
 }
}
@media only screen and (max-width: 600px) {
 .mvtk {
  padding: 20px 0 40px;
 }
 .top_mvtk {
  width: 100%;
  display: block;
  padding: 0;
  margin-bottom: 0;
 }
}

@media only screen and (max-width: 349px) {
 .top_mvtk {
  padding: 0;
 }
}

/*
 movieModal
==================================================================================*/
#cboxTopCenter {
 height: 0;
}
#cboxClose {
 position: fixed;
 right: 0;
 top: 0;
 width: 80px;
 height: 80px;
 background: var(--color-grn);
 background-size: auto 30px;
 z-index: 10000;
 transition: all 0.3s ease-out;
}
#cboxClose::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 80px;
 height: 80px;
 background: url(../img/common/svg_close.svg) no-repeat 50% 50%;
 background-size: auto 30px;
 transition: all 0.3s ease-out;
}

@media only screen and (min-width: 821px) {
 #cboxClose:hover {
  background: #6fadaa;
 }
 #cboxClose:hover::before {
  transform: rotate(180deg);
 }
}

@media only screen and (max-width: 600px) {
 #cboxClose {
  width: min(54px, calc((54 / 390) * 100cqw));
  height: min(54px, calc((54 / 390) * 100cqw));
 }
 #cboxClose::before {
  width: min(54px, calc((54 / 390) * 100cqw));
  height: min(54px, calc((54 / 390) * 100cqw));
  background: url(../img/common/svg_close.svg) no-repeat 50% 50%;
  background-size: auto 20px;
 }
}

/* Contents
================================================================================== */
.cont_body {
 position: relative;
 padding-inline: calc((60 / 1360) * 100cqw);
}
.ttl_wrap {
 display: flex;
 justify-content: center;
 align-items: center;
}
.ttl {
 display: flex;
 flex-flow: column;
 gap: min(calc((24 / 1360) * 100cqw), 24px);
}
.mds {
 display: flex;
 justify-content: center;
 font-size: min(calc((140 / 1360) * 100cqw), 14rem);
 font-family: var(--ff-robo);
 font-weight: 700;
 letter-spacing: 0;
 line-height: 0.75em;
 position: relative;
}
.sub {
 display: flex;
 font-size: min(calc((18 / 1360) * 100cqw), 1.8rem);
 font-weight: 700;
 letter-spacing: 0.5em;
 position: relative;
}

.bg {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 overflow: hidden;
}
.bg .img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-position: 50% 50%;
 background-repeat: no-repeat;
 background-size: cover;
}

@media only screen and (max-width: 820px) {
 .cont_body {
  padding: 0 calc((30 / 820) * 100cqw);
 }
}

@media only screen and (max-width: 600px) {
 .cont_body {
  padding: 0 calc((15 / 390) * 100cqw);
 }
 .ttl {
  gap: min(calc((8 / 390) * 100cqw), 8px);
 }
 .mds {
  font-size: min(calc((60 / 390) * 100cqw), 60px);
 }
 .sub {
  font-size: min(calc((12 / 390) * 100cqw), 12px);
  letter-spacing: 0.2em;
 }
}

/* news
 ================================================================================== */
#topnews {
 position: relative;
}
#topnews .bg_img {
 position: absolute;
 bottom: 0;
 right: 0;
 width: min(630px, calc((630 / 1360) * 100cqw));
 aspect-ratio: 1/1;
 display: block;
 overflow: hidden;
 z-index: 0;
}
#topnews .bg_img .sp1 {
 position: absolute;
 top: 5%;
 left: 9%;
 width: 100%;
 aspect-ratio: 1/1;
 display: block;
 background: url(../img/splash_01.svg) no-repeat 0 0;
 background-size: auto 100%;
}
#topnews .bg_img .sp5 {
 position: absolute;
 top: 0;
 left: 50%;
 width: 55%;
 aspect-ratio: 1/1;
 display: block;
 background: url(../img/splash_05.svg) no-repeat 0 0;
 background-size: contain;
}
#topnews .bg_img .sp4 {
 position: absolute;
 top: 30%;
 left: 50%;
 width: 60%;
 aspect-ratio: 1/1;
 display: block;
 background: url(../img/splash_04.svg) no-repeat 0 0;
 background-size: contain;
}
#topnews .bg_img .sp3 {
 position: absolute;
 top: 10%;
 left: 34%;
 width: 100%;
 aspect-ratio: 1/1;
 display: block;
 background: url(../img/splash_03.svg) no-repeat 0 0;
 background-size: contain;
}
#topnews .cont_body {
 padding-inline: calc((80 / 1360) * 100cqw);
}
#topnews .contbox {
 max-width: 1240px;
 margin-inline: auto;
 display: flex;
 align-items: flex-start;
 padding-top: calc((125 / 1360) * 100cqw);
 padding-bottom: calc((80 / 1360) * 100cqw);
}
#topnews .ttl {
 display: flex;
 flex-flow: row-reverse;
 gap: min(calc((24 / 1360) * 100cqw), 24px);
}
#topnews .ttl .sub {
 position: relative;
 writing-mode: vertical-rl;
 white-space: nowrap;
}
#topnews .ttl .mds {
 top: max(calc((-10 / 1360) * 100cqw), -10px);
 left: min(calc((100 / 1360) * 100cqw), 100px);
 transform: rotate(90deg);
 transform-origin: top left;
}
.p-news {
 margin-left: -100px;
}
.newslist {
 width: 810px;
 display: flex;
 flex-direction: column;
}
.newslist li {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
 width: 100%;
 padding-block: 22px;
 border-bottom: 1px solid rgba(0, 0, 0, 0.2);
 position: relative;
}
.newslist li::before {
 content: "";
 position: absolute;
 height: 100%;
 width: 0;
 left: auto;
 right: 0;
 top: 0;
 background-color: rgba(0, 0, 0, 0.05);
 transition-duration: 0.5s;
 transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
 pointer-events: none;
 z-index: 1;
}
.newslist li:nth-child(1) {
 border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.newslist li .date {
 font-size: 2.4rem;
 font-family: var(--ff-robo);
 font-weight: 700;
 line-height: 1.6;
 width: 160px;
 padding-inline: 10px;
 position: relative;
 z-index: 2;
}
.newslist li a {
 flex: 1;
 color: var(--color-base);
 font-size: 1.8rem;
 font-weight: 500;
 line-height: 1.6;
 z-index: 2;
 cursor: pointer;
}
.newslist li a::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 2;
}
.newslist li .ar {
 display: flex;
 width: 18px;
 height: 8px;
 background: url(../img/svg_ar.svg) no-repeat 50% 50%;
 background-size: contain;
 align-self: center;
 justify-self: end;
 margin-left: 40px;
 transform: translateX(-10px);
 transition: all 0.2s ease;
}
.more {
 margin-top: 45px;
 display: flex;
 justify-content: flex-end;
}
.morebtn {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: min(18px, calc((18 / 1360) * 100cqw));
 padding: 1em 1em;
 position: relative;
 cursor: pointer;
}
.morebtn::before {
 content: "";
 position: absolute;
 top: -8px;
 left: -8px;
 display: block;
 width: calc(100% + 4px);
 height: calc(100% + 4px);
 background-color: #f4f3f4;
 border: 2px solid var(--color-base);
 transition: all 0.3s ease-out;
 z-index: 0;
}
.morebtn::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 display: block;
 width: 100%;
 height: 100%;
 background-color: var(--color-wht);
 border: 2px solid var(--color-base);
 transition: all 0.3s ease-out;
 z-index: 1;
}
.morebtn span {
 font-size: 1.8rem;
 font-family: var(--ff-robo);
 font-weight: 700;
 margin-left: 10px;
 position: relative;
 z-index: 2;
}
.morebtn svg {
 width: 14px;
 height: 14px;
 position: relative;
 transform: rotate(-45deg);
 z-index: 2;
}

.modal {
 display: block;
 position: fixed;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background: var(--color-wht);
 z-index: 1000;
 transform: scale(0.9);
 transition: all 0.8s cubic-bezier(0, 0.64, 0.32, 1);
 opacity: 0;
 pointer-events: none;
}
.modal.-open {
 transform: scale(1);
 opacity: 1;
 pointer-events: initial;
}
.modal .cont_body {
 display: block;
 width: 100%;
 height: 100%;
 overflow-y: auto;
 padding-inline: calc((60 / 1360) * 100cqw);
}
.modal-content {
 width: 100%;
 padding-block: 40px 160px;
 margin-inline: auto;
}
.news-close {
 position: fixed;
 right: 0;
 top: 0;
 width: 80px;
 height: 80px;
 background: var(--color-grn);
 background-size: auto 30px;
 z-index: 10000;
 transition: all 0.3s ease-out;
 cursor: pointer;
}
.news-close::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 80px;
 height: 80px;
 background: url(../img/common/svg_close.svg) no-repeat 50% 50%;
 background-size: auto 30px;
 transition: all 0.3s ease-out;
}
.modal .ttl_wrap {
 max-width: 740px;
 margin-inline: auto;
 justify-content: flex-start;
}
.modal .ttl {
 gap: min(calc((16 / 1360) * 100cqw), 16px);
}
.modal .sub {
 font-size: min(calc((15 / 1360) * 100cqw), 1.5rem);
}
.modal .mds {
 font-size: min(calc((100 / 1360) * 100cqw), 10rem);
}
.news_wrap {
 display: flex;
 flex-direction: column;
 gap: 100px;
 max-width: 740px;
 margin-top: 60px;
 margin-inline: auto;
}
.entry_meta {
 padding-block: 25px;
 position: relative;
}
.entry_meta::before,
.entry_meta::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 display: block;
 width: 100%;
 height: 1px;
 background-color: var(--color-base);
}
.entry_meta::after {
 top: unset;
 bottom: 0;
}
.entry_meta .date {
 color: var(--color-base);
 font-size: 2.4rem;
 font-family: var(--ff-robo);
 font-weight: 700;
 line-height: 1;
}
.entry_meta .title {
 font-size: 2.2rem;
 font-weight: 500;
 line-height: 1.6;
 margin-top: 10px;
}
.entry_body {
 margin-top: 30px;
}
.entry_body p {
 font-size: 1.6rem;
 line-height: 2;
}
.entry_body p + p {
 margin-top: 30px;
}
.entry_body b {
 font-weight: 700;
}
.entry_body a {
 color: var(--color-pnk);
}
.entry_body a.text_link {
 font-weight: 500;
 color: var(--color-pnk);
}
.entry_body a.special_link {
 display: inline;
 background-color: var(--color-ylw);
 font-weight: 500;
 line-height: 1;
 color: var(--color-base);
 margin-inline: 0.2em;
}
.entry_body img {
 margin-block: 30px;
}
.entry_body img.tate {
 display: block;
 width: 70%;
 margin-inline: auto;
}
.entry_body .promo {
 display: block;
 position: relative;
 width: 100%;
 height: 0;
 padding-top: 57.25%;
 margin-block: 30px;
 overflow: hidden;
}
.entry_body .promo iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
.entry_body h4,
.entry_body h5,
.entry_body h6 {
 font-size: 2.4rem;
 margin-top: 60px;
 margin-bottom: 15px;
}

@media screen and (min-width: 821px) {
 .newslist li:hover::before {
  width: 100%;
  right: auto;
  left: 0;
 }
 .newslist li:hover a {
  color: var(--color-base);
 }
 .newslist li:hover .ar {
  transform: translateX(0);
  transition: all 0.2s ease;
 }
 .morebtn:hover::before {
  top: -6px;
  left: -6px;
 }
 .morebtn:hover::after {
  background-color: var(--color-base);
 }
 .morebtn:hover span {
  color: var(--color-wht);
 }
 .morebtn:hover svg {
  fill: var(--color-wht);
 }
 .news-close:hover {
  background: #6fadaa;
 }
 .news-close:hover::before {
  transform: rotate(180deg);
 }
 .entry_body a.text_link:hover {
  text-decoration: underline;
 }
 .entry_body a.special_link:hover {
  background-color: #f7c1e1;
 }
}

@media only screen and (max-width: 1210px) {
 .p-news {
  margin-left: calc((-140 / 1360) * 100cqw);
  width: 100%;
 }
 .newslist {
  width: 100%;
 }
}

@media only screen and (max-width: 820px) {
 #topnews .cont_body {
  padding-inline: calc((60 / 1360) * 100cqw);
 }
 .p-news {
  margin-left: calc((-160 / 1360) * 100cqw);
  width: 100%;
 }
 .newslist li .date {
  font-size: 2rem;
  width: 120px;
 }
 .newslist li a {
  font-size: 1.6rem;
 }
 .newslist li .ar {
  margin-left: 10px;
 }
}

@media only screen and (max-width: 600px) {
 #topnews .contbox {
  max-width: unset;
  padding-top: calc((54 / 390) * 100cqw);
  padding-bottom: calc((48 / 390) * 100cqw);
  flex-direction: column;
 }
 #topnews .ttl {
  flex-flow: column-reverse;
  gap: min(calc((8 / 390) * 100cqw), 8px);
 }
 #topnews .ttl .mds {
  top: unset;
  left: unset;
  transform: unset;
  transform-origin: unset;
 }
 #topnews .ttl .sub {
  writing-mode: unset;
 }
 .p-news {
  margin-left: 0;
 }
 .newslist {
  max-width: unset;
  margin-top: 24px;
 }
 .newslist li {
  flex-wrap: wrap;
  gap: 0;
  padding-block: calc((12 / 390) * 100cqw);
  align-items: flex-start;
 }
 .newslist li .date {
  font-size: min(1.8rem, 5cqw);
  width: 100%;
  padding-inline: unset;
 }
 .newslist li a {
  flex: 1;
  font-size: min(1.45rem, calc((14.5 / 390) * 100cqw));
  line-height: 1.5;
 }
 .newslist li .ar {
  width: calc((20 / 390) * 100cqw);
  height: calc((12 / 390) * 100cqw);
  align-self: center;
  justify-self: end;
  transform: translateX(0);
 }
 .modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0255, 255, 255, 1);
  overflow-y: auto;
  /*  transition: all 0.8s cubic-bezier(0, 0.64, 0.32, 1);
 transform: scale(0.9);
 opacity: 0; */
 }
 .modal.-open {
  display: block;
  /*  transform: scale(1);
 opacity: 1; */
 }
 .modal .cont_body {
  display: block;
  width: 100%;
  height: 100%;
  padding-inline: calc((60 / 1360) * 100cqw);
 }
 .modal-content {
  width: 100%;
  padding-block: 40px 160px;
  margin-inline: auto;
 }
 .news-close {
  width: min(54px, calc((54 / 390) * 100cqw));
  height: min(54px, calc((54 / 390) * 100cqw));
  z-index: 10000;
  transition: all 0.3s ease-out;
  cursor: pointer;
 }
 .news-close::before {
  width: min(54px, calc((54 / 390) * 100cqw));
  height: min(54px, calc((54 / 390) * 100cqw));
  background: url(../img/common/svg_close.svg) no-repeat 50% 50%;
  background-size: auto 20px;
 }
 .modal .ttl_wrap {
  max-width: unset;
 }
 .modal .ttl {
  gap: min(calc((8 / 390) * 100cqw), 8px);
 }
 .modal .sub {
  font-size: min(calc((12 / 390) * 100cqw), 12px);
 }
 .modal .mds {
  font-size: min(calc((60 / 390) * 100cqw), 60px);
 }
 .news_wrap {
  gap: 100px;
  max-width: 100%;
  margin-top: 30px;
 }
 .entry_meta {
  padding-block: 20px;
 }
 .entry_meta .date {
  font-size: min(calc((18 / 390) * 100cqw), 18px);
 }
 .entry_meta .title {
  font-size: min(calc((20 / 390) * 100cqw), 20px);
  line-height: 1.5;
  margin-top: 10px;
 }
 .entry_body {
  margin-top: 30px;
 }
 .entry_body p {
  font-size: min(calc((15.5 / 390) * 100cqw), 1.55rem);
  line-height: 1.6;
 }
 .entry_body p + p {
  margin-top: 30px;
 }
 .entry_body b {
  font-weight: 700;
 }
 .entry_body a.text_link {
  font-weight: 500;
  color: var(--color-pnk);
 }
 .entry_body img {
  margin-block: 30px;
 }
 .entry_body img.tate {
  width: 100%;
 }
 .entry_body .promo {
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 57.25%;
  margin-block: 30px;
  overflow: hidden;
 }
 .entry_body .promo iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 }
 .entry_body h4,
 .entry_body h5,
 .entry_body h6 {
  font-size: 2.4rem;
  margin-top: 60px;
  margin-bottom: 15px;
 }
}

/* pv
 ================================================================================== */
#pv {
 width: 100%;
 height: 38.23vw;
 background-color: var(--color-base);
 position: relative;
}
.th_mv {
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 overflow: hidden;
 background-color: var(--color-base);
 z-index: 0;
}
.th_mv #loading {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 transition: all 3s cubic-bezier(0.2, 0.01, 0, 1) 2s;
 transform-origin: right center;
}
.th_mv #loading.disappear {
 opacity: 0;
}
.loader,
.loader:before,
.loader:after {
 background: var(--color-wht);
 animation: load1 1s infinite ease-in-out;
 width: 10px;
 height: 40px;
 opacity: 0.6;
}
.loader {
 color: var(--color-wht);
 margin: 0 auto;
 position: relative;
 transform: translateZ(0);
 animation-delay: -0.16s;
 z-index: 0;
}
.loader:before,
.loader:after {
 position: absolute;
 top: 0;
 content: "";
}
.loader:before {
 left: -24px;
 -webkit-animation-delay: -0.32s;
 animation-delay: -0.32s;
}
.loader:after {
 left: 24px;
}
@keyframes load1 {
 0%,
 80%,
 100% {
  box-shadow: 0 0;
  height: 48px;
 }
 40% {
  box-shadow: 0 -30px;
  height: 40px;
 }
}
.th_mv #youtube-area {
 position: absolute;
 top: 0;
 right: 0;
 left: 0;
 height: calc(58vw + 60px);
 transform: translateY(-20%);
 overflow: hidden;
 opacity: 0;
}
.th_mv #youtube-area.appear {
 animation-name: PageAnimeAppear;
 animation-duration: 0.5s;
 animation-fill-mode: forwards;
}
@keyframes PageAnimeAppear {
 0% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}
.th_mv #youtube {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 120vw;
 height: 56.25vw;
 min-height: 100%;
 min-width: 100%;
}
.th_mv #youtube-mask {
 position: absolute;
 z-index: 2;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.15);
}
.th_play {
 width: 100%;
 height: 100%;
 display: block;
 position: relative;
 background-color: rgba(0, 0, 0, 0.4);
 z-index: 2;
}
.th_play a {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
}
.th_play a .playbtn {
 color: var(--color-base);
 font-size: 2.2rem;
 font-family: var(--ff-robo);
 font-weight: 700;
 display: flex;
 justify-content: center;
 align-items: center;
 width: 120px;
 aspect-ratio: 1/ 1;
 transition: all 0.4s;
 border-radius: 50%;
 position: relative;
 background-color: rgba(228, 255, 0, 0.9);
 opacity: 0;
}
.cursor-pointer {
 visibility: hidden;
 opacity: 0;
 position: fixed;
 z-index: 10;
 transform: scale(0);
 height: 120px;
 width: 120px;
 margin: -60px 0 0 -60px;
 transition: transform 0.3s ease-out, opacity 0.3s ease-out, visibility 0.3s ease-out;
 pointer-events: none;
}
.cursor-pointer.is-active {
 opacity: 1;
 visibility: visible;
 transform: scale(1);
}
.cursor-none {
 cursor: none;
}
.js-cursor-pointer {
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--color-base);
 font-size: 2.2rem;
 font-family: var(--ff-robo);
 font-weight: 700;
 border-radius: 50%;
 background-color: rgba(228, 255, 0, 0.9);
}

@media screen and (max-width: 820px) {
 #pv {
  height: 50vw;
 }
 .th_mv #youtube-area {
  transform: translateY(-10%);
 }
 .th_play a .playbtn {
  opacity: 1;
 }
}

@media screen and (max-width: 600px) {
 .loader,
 .loader:before,
 .loader:after {
  background: var(--color-wht);
  animation: load1 1s infinite ease-in-out;
  width: 16px;
  border-radius: 2em;
  height: 48px;
  opacity: 0.6;
 }
 .loader {
  color: var(--color-wht);
  margin: 0 auto 80px;
  position: relative;
  transform: translateZ(0);
  animation-delay: -0.16s;
  z-index: 0;
 }
 .loader:before,
 .loader:after {
  position: absolute;
  top: 0;
  content: "";
 }
 .loader:before {
  left: -24px;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
 }
 .loader:after {
  left: 24px;
 }
 .th_mv #youtube-area {
  height: calc(58vw + 60px);
  transform: translateY(-15%);
 }
 .th_play a .playbtn {
  font-size: min(1.4rem, calc((14 / 390) * 100cqw));
  width: calc((80 / 390) * 100cqw);
 }
}

/* movie
 ================================================================================== */
#myMovie {
 width: 100%;
 max-height: 100vh;
 display: flex;
 justify-content: center;
}
#mov {
 margin: 0 auto;
 width: 100%;
 height: auto;
 aspect-ratio: 16/9;
 /*  padding-top: 56.25%; */
 position: relative;
}
#playerbox {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: #000;
}
#nav {
 width: 100%;
 height: auto;
 margin: 0 auto;
 padding: 0;
 padding-top: 0;
 overflow: hidden;
 position: relative;
 list-style: none outside none;
}
#nav ul {
 list-style: none outside none;
 display: flex;
 justify-content: center;
 gap: 6px;
 margin: 0;
 padding: 0;
 position: relative;
 width: 100%;
 margin-left: auto;
 margin-right: auto;
}
#nav ul li {
 display: flex;
 list-style: none outside none;
 text-align: center;
 position: relative;
}
#nav ul li a {
 display: block;
 width: 100%;
 font-size: 15px;
 font-weight: 500;
 line-height: 1.2;
 text-decoration: none;
 background: #000000;
 color: #fff100;
 border: 1px solid #fff100;
 padding: 12px 12px;
 letter-spacing: 0;
 text-decoration: none;
 transition: all 0.5s;
}
#nav ul li a.current {
 background: #fff100;
 color: #000000;
}

@media screen and (max-width: 600px) {
 #nav {
  padding-top: 10px;
 }
 #nav ul {
  flex-wrap: wrap;
  gap: 4px;
 }
 #nav ul li a {
  font-size: 12.5px;
  padding: 8px 6px;
 }
}

@media only screen and (max-width: 350px) {
 #nav ul li a {
  font-size: 12px;
 }
}

/* intro
 ================================================================================== */
#intro {
 width: 100%;
 position: relative;
}
.intro_header {
 width: 100%;
 aspect-ratio: 1360 /638;
 display: flex;
 align-items: flex-end;
 position: relative;
 padding-inline: calc((60 / 1360) * 100cqw);
 padding-bottom: calc((160 / 1360) * 100cqw);
 overflow: hidden;
}
.intro_header_photo {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
#intro .mds {
 color: var(--color-wht);
}
#intro .mds .c1::first-letter {
 color: var(--color-grn);
}
#intro .sub {
 color: var(--color-wht);
}
#intro .cont_body {
 padding-inline: 0;
}
#intro .contbox {
 max-width: 1260px;
 margin-inline: auto;
 position: relative;
 padding-bottom: 375px;
}
.p-intro {
 width: calc((762 / 1360) * 100cqw);
 margin-top: calc((27 / 1360) * -100cqw);
 margin-inline: auto;
}
.intro_cp {
 display: flex;
 flex-direction: column;
 gap: calc((8 / 1360) * 100cqw);
}
.intro_cp.is_sp {
 display: none;
}
.intro_cp_01 {
 width: 57.88%;
}
.intro_cp_02 {
 width: 100%;
}
.p-intro .p-text {
 margin-top: calc((60 / 1360) * 100cqw);
}
.intro_splash {
 position: absolute;
 bottom: calc((80 / 1360) * 100cqw);
 right: 0;
 width: calc((570 / 1360) * 100cqw);
 max-width: 570px;
 aspect-ratio: 570/433;
 display: block;
 background: url(../img/splash_02.svg) no-repeat 0 0;
 background-size: auto 100%;
}

@media only screen and (max-width: 1100px) {
 .p-intro {
  width: 660px;
 }
}

@media only screen and (max-width: 820px) {
 #intro .cont_body {
  padding-inline: calc((60 / 1360) * 100cqw);
 }
 #intro .contbox {
  max-width: unset;
  padding-bottom: 30cqw;
 }
 .p-intro {
  width: 100%;
 }
 .intro_splash {
  bottom: calc((40 / 1360) * 100cqw);
  width: calc((700 / 1360) * 100cqw);
  aspect-ratio: 570/483;
 }
}

@media only screen and (max-width: 600px) {
 .intro_header {
  padding-inline: calc((15 / 390) * 100cqw);
  padding-bottom: calc((10 / 390) * 100cqw);
 }
 #intro .mds {
  letter-spacing: -0.02em;
 }
 #intro .cont_body {
  padding-inline: calc((15 / 390) * 100cqw);
 }
 #intro .contbox {
  max-width: unset;
  padding-bottom: calc((200 / 390) * 100cqw);
 }
 .p-intro {
  width: 100%;
  margin-top: calc((60 / 390) * 100cqw);
 }
 .intro_cp {
  display: flex;
  flex-direction: column;
  gap: calc((5 / 390) * 100cqw);
 }
 .intro_cp.is_pc {
  display: none;
 }
 .intro_cp.is_sp {
  display: flex;
 }
 .intro_cp_01 {
  width: 89%;
 }
 .intro_cp_02 {
  width: 100%;
 }
 .intro_cp_03 {
  width: 57%;
 }
 .p-intro .p-text {
  margin-top: calc((30 / 390) * 100cqw);
 }
 .p-intro .p-text p {
  font-size: 1.55rem;
  font-family: var(--ff-min);
  font-weight: 500;
  line-height: 1.6;
 }
 .p-intro .p-text p + p {
  margin-top: 1.5em;
 }
 .p-intro .p-text p strong {
  color: var(--color-pnk);
  font-weight: 500;
 }
 .p-intro .p-text p.large {
  font-size: 1.8rem;
  font-family: var(--ff-min);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -0.04em;
 }
 .p-intro .p-text p.large strong {
  font-weight: 700;
 }
 .intro_splash {
  bottom: calc((40 / 1360) * 100cqw);
  width: calc((270 / 390) * 100cqw);
  aspect-ratio: 570 / 510;
  max-width: unset;
 }
}

/* story
 ================================================================================== */
#story {
 width: 100%;
 position: relative;
}
#story .cont_body {
 padding-inline: 0;
}
#story .contbox {
 display: flex;
 padding-bottom: calc((200 / 1360) * 100cqw);
}
.p-story {
 width: calc((616 / 1360) * 100cqw);
 padding-inline: calc((60 / 1360) * 100cqw);
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: calc((60 / 1360) * 100cqw);
}
#story .mds .c1::first-letter {
 color: #f03383;
}
.p-story .p-text p {
 color: var(--color-base);
 font-size: calc((17 / 1360) * 100cqw);
 font-weight: 500;
 line-height: 1.8;
}
.p-story .p-text p em {
 letter-spacing: -0.05em;
}
.story_img {
 width: calc((744 / 1360) * 100cqw);
 aspect-ratio: 1500 / 1264;
 position: relative;
 background-color: var(--color-wht);
}
.story_img::before {
 content: "";
 position: absolute;
 top: 64px;
 right: 0;
 width: calc(100% - 72px);
 height: 100%;
 display: block;
 background-color: #e99dca;
 z-index: -1;
 transform: scaleX(0);
 transform-origin: top right;
 transition: all 1.4s cubic-bezier(0.08, 0.8, 0.315, 1);
}
.story_img.-show::before {
 transform: scaleX(1);
}
.scroll_photo {
 width: 100%;
 display: block;
 position: relative;
}
.sc_photo {
 width: 100%;
 height: calc((300 / 1360) * 100cqw);
 position: relative;
 background: url(../img/scroll_photo.jpg) repeat-x 0 0;
 background-size: auto 100%;
}
.sc_photo::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: var(--color-wht);
 opacity: 0.8;
 z-index: 2;
}
.sc_photo.-show {
 animation: sc_photo_pc 40s linear 0s infinite;
 animation-iteration-count: 3;
}
.sc_photo.-show::after {
 animation: sc_photo_af 1.2s cubic-bezier(0.295, 0.03, 0.115, 1) 0.1s both;
}
@keyframes sc_photo_pc {
 0% {
  background-position: 0 0;
 }
 100% {
  background-position: -236.6vw 0;
 }
}
@keyframes sc_photo_af {
 0% {
  opacity: 1;
 }
 100% {
  opacity: 0;
 }
}

@media only screen and (max-width: 1100px) {
 .p-story .p-text p {
  font-size: 1.375rem;
 }
 .p-story .p-text p br.pc {
  display: none;
 }
}

@media only screen and (max-width: 820px) {
 #story .contbox {
  width: 100%;
 }
 .p-story .p-text p {
  font-size: clamp(1.4rem, 2.8cqw, 1.5rem);
 }
 .story_img::before {
  top: 34px;
  height: 90%;
 }
}

@media only screen and (max-width: 600px) {
 #story .contbox {
  flex-direction: column-reverse;
  padding-bottom: calc((200 / 1360) * 100cqw);
  gap: min(88px, calc((88 / 390) * 100cqw));
 }
 .p-story {
  width: 100%;
  padding-inline: calc((15 / 390) * 100cqw);
  gap: calc((30 / 390) * 100cqw);
 }
 .p-story .p-text p {
  font-size: min(1.5rem, calc((15 / 390) * 100cqw));
  line-height: 1.6;
 }
 .p-story .p-text p em {
  letter-spacing: -0.05em;
 }
 .story_img {
  width: calc((320 / 390) * 100cqw);
  margin-left: auto;
 }
 .story_img::before {
  top: 30px;
  left: 30px;
  width: calc(100% - 30px);
  height: 100%;
 }
 .scroll_photo {
  width: 100%;
  display: block;
  position: relative;
 }
 .sc_photo {
  width: 100%;
  height: calc((140 / 360) * 100cqw);
 }
 .sc_photo.-show {
  animation: sc_photo_pc 20s linear 0s infinite;
 }
 @keyframes sc_photo_pc {
  0% {
   background-position: 0 0;
  }
  100% {
   background-position: -415vw 0;
  }
 }
}

/* chara
================================================================================== */
#chara {
 width: 100%;
 position: relative;
 background: #7bcdcb url(../img/chara_grid.png) repeat 50% 0;
 background-size: 72px 72px;
 z-index: 2;
}
#chara::before,
#chara::after {
 content: "";
 position: absolute;
 top: 0;
 right: 0;
 width: calc((370 / 1360) * 100cqw);
 height: calc((370 / 1360) * 100cqw);
 display: block;
 background: url(../img/character/splash_01.png) no-repeat 100% 0;
 background-size: 100% 100%;
 z-index: 0;
 transition: all 0.8s cubic-bezier(0.08, 0.8, 0.315, 1);
 transform-origin: top right;
 transform: scale(0.7);
 opacity: 0;
}
#chara::after {
 background: url(../img/character/splash_02.png) no-repeat 100% 0;
 background-size: 100% 100%;
 transition-delay: 0.3s;
}
#chara.-show::before,
#chara.-show::after {
 transform: scale(1);
 opacity: 1;
}
#chara .contbox {
 padding-block: 65px 0;
}
#chara .ttl_wrap {
 justify-content: flex-start;
}
#chara .mds .c1::first-letter {
 color: #deff00;
}
.chara_over {
 margin-top: 40px;
}
.p-chara {
 display: flex;
 width: 100%;
 max-width: 1440px;
 margin-inline: auto;
 align-items: flex-end;
 padding-inline: calc((60 / 1360) * 100cqw);
 container: pcharain / inline-size;
}
.p-photo_wrap {
 display: flex;
 width: 66.66%;
 align-items: flex-end;
}
.p-photo {
 display: flex;
 align-items: flex-end;
}
.p-photo .face {
 width: 48%;
 display: flex;
 justify-content: flex-start;
 align-items: flex-end;
 flex-wrap: wrap-reverse;
 gap: 12px;
 padding-bottom: calc((30 / 1240) * 100cqw);
}
.p-photo .face > div {
 width: calc(50% - 6px);
 border: 1px solid #b1b1b1;
 background-color: var(--color-wht);
}
.p-photo .face_a {
 order: 3;
}
.p-photo .full {
 width: 52%;
 display: flex;
 justify-content: center;
}
.p-photo .full figure {
 width: 62%;
}
.p-prof {
 display: flex;
 flex-direction: column;
 width: 33.33%;
 align-items: flex-start;
 padding-bottom: calc((30 / 1240) * 100cqw);
}
.p-prof .name_wrap {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
}
.p-prof .jp img {
 height: 60px;
 width: auto;
}
.p-prof .cv {
 display: inline-block;
 color: var(--color-wht);
 font-size: 1.6rem;
 font-weight: 500;
 padding: 0.5em;
 background-color: var(--color-base);
}
.p-prof .text {
 margin-top: 15px;
}
.p-prof .text p {
 font-size: min(1.5rem, calc((15 / 1240) * 100cqw));
 font-weight: 500;
 line-height: 1;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 6px;
}
.p-prof .text p span {
 display: block;
 padding: 0.4em;
 background-color: var(--color-wht);
}
.cr_tabs {
 display: flex;
 gap: calc((20 / 1360) * 100cqw);
 margin-top: calc((60 / 1360) * 100cqw);
 padding-left: 6px;
}
.crtab {
 display: flex;
}
.crtab a {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 18px;
 padding: 1em 2em;
 position: relative;
 cursor: pointer;
}
.crtab a span {
 font-size: calc((18 / 1360) * 100cqw);
 font-weight: 500;
 position: relative;
 z-index: 2;
}
.crtab a::before {
 content: "";
 position: absolute;
 top: -8px;
 left: -8px;
 display: block;
 width: calc(100% + 4px);
 height: calc(100% + 4px);
 background-color: var(--color-wht);
 border: 2px solid var(--color-base);
 transition: all 0.3s ease-out;
 z-index: 0;
}
.crtab a::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 display: block;
 width: 100%;
 height: 100%;
 background-color: var(--color-wht);
 border: 2px solid var(--color-base);
 transition: all 0.3s ease-out;
 z-index: 1;
}
.crtab.on a::before,
.crtab.on a::after {
 background-color: #dfbffc;
}
.swiper-button-prev,
.swiper-button-next {
 width: 50px;
 height: 50px;
 top: 60px !important;
 margin-top: 0 !important;
}
.swiper-button-prev:after,
.swiper-button-next:after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: -20px;
 margin-left: -7px;
 display: block;
 width: 40px;
 height: 40px;
 border: solid 0 var(--color-blk);
 border-width: 2px 0 0 2px;
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
}
.swiper-button-next:after {
 margin-left: -30px;
 -webkit-transform: rotate(135deg);
 transform: rotate(135deg);
}
.chara_under {
 display: block;
 position: relative;
 margin-top: 36px;
}
.chara_under::before {
 content: "";
 display: block;
 width: 100%;
 height: 26px;
 position: relative;
 background: url(../img/character/thumb_bg.svg) repeat-x 50% 100%;
 background-size: auto 100%;
}
.chara_under::after {
 content: "";
 position: absolute;
 top: -54px;
 left: 0;
 display: block;
 width: 100px;
 height: 80px;
 background: url(../img/character/splash_03.png) no-repeat 0 100%;
 background-size: contain;
}
.chara_under_inner {
 padding-inline: calc((80 / 1360) * 100cqw);
 padding-block: 20px 26px;
 background-color: var(--color-blk);
 position: relative;
}
.chara_under .thumb_wrap {
 display: flex;
 justify-content: center;
 gap: 18px;
}
.chara_under .thumb {
 width: 154px !important;
 display: block;
 transition: all 0.4s;
 overflow: hidden;
 background-color: var(--color-wht);
 cursor: pointer;
}
.chara_under .thumb img {
 transition: all 0.4s;
}
.chara_under .thumb.swiper-slide-thumb-active {
 background-color: var(--color-ylw);
}

@media only screen and (min-width: 821px) {
 .crtab a:hover span {
  color: var(--color-wht);
 }
 .crtab a:hover::before {
  top: -6px;
  left: -6px;
 }
 .crtab a:hover::after {
  background-color: var(--color-base);
 }
 .chara_under .thumb:hover img {
  transform: scale(1.1);
 }
}

@media only screen and (max-width: 820px) {
 .p-photo .full figure {
  width: 80%;
 }
 .p-photo .face {
  gap: 6px;
 }
 .chara .text p {
  display: inline;
  font-size: min(1.35rem, 1.75cqw);
  line-height: 1.9;
  gap: unset;
  background-color: var(--color-wht);
 }
 .p-prof .text p span {
  display: inline;
  padding: unset;
  background-color: unset;
 }
 .crtab a {
  padding: 1em 1.2em;
 }
 .crtab a span {
  font-size: calc((15 / 768) * 100cqw);
 }
}

@media only screen and (max-width: 600px) {
 #chara {
  background-size: 36px 36px;
 }
 #chara::before,
 #chara::after {
  width: 50cqw;
  height: 50cqw;
 }
 #chara .contbox {
  padding-block: 90px 0;
 }
 .chara_over {
  margin-top: 10px;
 }
 .p-chara {
  max-width: unset;
  flex-direction: column;
  align-items: flex-start;
  padding-inline: calc((15 / 390) * 100cqw);
 }
 .p-photo_wrap {
  width: 100%;
 }
 .p-photo {
  flex-direction: row-reverse;
  align-items: flex-end;
  justify-content: space-between;
 }
 .p-photo .face {
  width: 30%;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 2px;
  padding-bottom: unset;
 }
 .p-photo .face > div {
  width: 100%;
 }
 .p-photo .face_a {
  order: 1;
 }
 .p-photo .face_b {
  order: 2;
 }
 .p-photo .full {
  width: 66.66%;
  display: flex;
  justify-content: center;
 }
 .p-photo .full figure {
  width: 80%;
 }
 .p-prof {
  width: 100%;
  margin-top: 30px;
  padding-bottom: unset;
 }
 .p-prof .name_wrap {
  flex-direction: row;
  align-items: flex-end;
 }
 .p-prof .jp img {
  height: 40px;
  width: auto;
 }
 .p-prof .cv {
  font-size: min(1.3rem, calc((13 / 360) * 100cqw));
 }
 .p-prof .text {
  margin-top: 10px;
 }
 .p-prof .text p {
  font-size: min(1.4rem, calc((14 / 360) * 100cqw));
  line-height: 1.8;
 }
 .cr_tabs {
  width: 100%;
  justify-content: center;
  gap: calc((15 / 360) * 100cqw);
  margin-top: calc((20 / 360) * 100cqw);
  padding-left: 6px;
 }
 .crtab {
  display: flex;
  width: 100%;
 }
 .crtab a {
  width: 100%;
  padding: 1em 2em;
 }
 .crtab a span {
  font-size: min(1.6rem, calc((16 / 360) * 100cqw));
 }
 .crtab a::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -6px;
  display: block;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  background-color: var(--color-wht);
  border: 2px solid var(--color-base);
  transition: all 0.3s ease-out;
  z-index: 0;
 }
 .swiper-button-prev {
  left: unset !important;
  right: 50px !important;
 }
 .swiper-button-prev,
 .swiper-button-next {
  width: 40px;
  height: 40px;
  top: 10px !important;
  margin-top: 0 !important;
 }
 .swiper-button-prev:after,
 .swiper-button-next:after {
  margin-top: -15px;
  margin-left: -5px;
  width: 30px;
  height: 30px;
 }
 .swiper-button-next:after {
  margin-left: -24px;
 }
 .chara_under {
  margin-top: 16px;
 }
 .chara_under::before {
  content: "";
  display: block;
  width: 100%;
  height: 26px;
  position: relative;
  background: url(../img/character/thumb_bg.svg) repeat-x 50% 100%;
  background-size: auto 100%;
 }
 .chara_under::after {
  content: "";
  position: absolute;
  top: -54px;
  left: 0;
  display: block;
  width: 100px;
  height: 80px;
  background: url(../img/character/splash_03.png) no-repeat 0 100%;
  background-size: contain;
 }
 .chara_under_inner {
  padding-inline: calc((15 / 390) * 100cqw);
  padding-block: 10px 16px;
 }
 .chara_under .thumb_wrap {
  gap: 10px;
 }
 .chara_under .thumb {
  width: 30cqw !important;
 }
 .chara_under .thumb.swiper-slide-thumb-active::after {
  content: none;
 }
}

/* staff
================================================================================== */
#staff {
 width: 100%;
 position: relative;
 background: #a2a0e3;
}
#staff .ttl_wrap {
 position: absolute;
 top: 0;
 left: 0;
 transform-origin: top left;
 transform: rotate(90deg);
 display: block;
 left: min(140px, calc((140 / 1360) * 100cqw));
 top: 90px;
}
#staff .sub {
 align-self: flex-end;
}
#staff .mds .c1::first-letter {
 color: #e4ff00;
}
#staff .mds small {
 font-size: 10rem;
}
#staff .cont_body {
 padding-inline: 140px;
}
#staff .contbox {
 max-width: 850px;
 margin-inline: auto;
 position: relative;
 padding-block: 150px 250px;
 container: staffin / inline-size;
}
.p-staff {
 display: block;
}
.p-staff h3 {
 width: min(444px, calc((444 / 850) * 100cqw));
 margin-inline: auto;
}
.staff_wrap {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: min(60px, calc((60 / 850) * 100cqw));
 margin-top: 40px;
}
.staff_block {
 display: flex;
 flex-flow: row wrap;
 justify-content: center;
 gap: min(60px, calc((60 / 850) * 100cqw));
}
.staff {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: min(15px, calc((15 / 850) * 100cqw));
}
.staff .job {
 color: var(--color-wht);
 font-size: min(1.8rem, calc((18 / 850) * 100cqw));
 font-family: var(--ff-min);
 font-weight: 500;
}
.staff .jp_name {
 font-size: min(2.2rem, calc((22 / 850) * 100cqw));
 font-family: var(--ff-min);
 font-weight: 500;
}
.staff .jp_name.sbw {
 display: flex;
 justify-content: center;
 gap: min(44px, calc((44 / 850) * 100cqw));
}
.staff_space {
 width: min(150px, calc((150 / 850) * 100cqw));
}
.commentbtn {
 margin-top: 10px;
 display: flex;
 justify-content: center;
}
.comebtn {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: min(18px, calc((18 / 850) * 100cqw));
 padding: 0.6em 1em;
 position: relative;
 cursor: pointer;
}
.comebtn::before {
 content: "";
 position: absolute;
 top: -8px;
 left: -8px;
 display: block;
 width: calc(100% + 4px);
 height: calc(100% + 4px);
 background-color: #f4f3f4;
 border: 2px solid var(--color-base);
 transition: all 0.3s ease-out;
 z-index: 0;
}
.comebtn::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 display: block;
 width: 100%;
 height: 100%;
 background-color: var(--color-wht);
 border: 2px solid var(--color-base);
 transition: all 0.3s ease-out;
 z-index: 1;
}
.comebtn span {
 font-size: min(1.8rem, calc((18 / 850) * 100cqw));
 font-weight: 500;
 margin-left: 10px;
 position: relative;
 z-index: 2;
}
.comebtn svg {
 width: 14px;
 height: 14px;
 position: relative;
 transform: rotate(-45deg);
 z-index: 2;
}

.p-cast {
 display: block;
}
.p-cast h3 {
 width: min(310px, calc((310 / 850) * 100cqw));
 margin-top: 130px;
 margin-inline: auto;
}
.cast_wrap {
 display: flex;
 justify-content: center;
 gap: 100px;
 margin-top: 30px;
}

@media only screen and (min-width: 821px) {
 .comebtn:hover span {
  color: var(--color-wht);
 }
 .comebtn:hover svg {
  fill: var(--color-wht);
 }
 .comebtn:hover::before {
  top: -6px;
  left: -6px;
 }
 .comebtn:hover::after {
  background-color: var(--color-base);
 }
}

@media only screen and (max-width: 820px) {
 #staff .cont_body {
  padding-inline: 90px 30px;
 }
 #staff .mds small {
  font-size: 80%;
 }
 #staff .contbox {
  max-width: unset;
  padding-block: 100px 120px;
 }
 .p-cast h3 {
  margin-top: 100px;
 }
}

@media only screen and (max-width: 600px) {
 #staff {
  padding-top: calc((100 / 390) * 100cqw);
 }
 #staff .ttl_wrap {
  position: relative;
  top: unset;
  left: unset;
  transform-origin: unset;
  transform: unset;
  display: block;
  padding-inline: calc((15 / 390) * 100cqw);
 }
 #staff .sub {
  align-self: flex-start;
 }
 #staff .mds {
  justify-content: flex-start;
 }
 #staff .cont_body {
  padding-inline: calc((15 / 390) * 100cqw);
 }
 #staff .contbox {
  max-width: unset;
  padding-block: 50px 90px;
 }
 .p-staff {
  display: block;
 }
 .p-staff h3 {
  width: min(266px, calc((266 / 346) * 100cqw));
  margin-inline: auto;
 }
 .staff_wrap {
  gap: min(24px, calc((24 / 346) * 100cqw));
  margin-top: 20px;
 }
 .staff_block {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: min(24px, calc((24 / 346) * 100cqw));
 }
 .staff {
  gap: min(10px, calc((10 / 346) * 100cqw));
 }
 .staff .job {
  color: var(--color-wht);
  font-size: min(1.4rem, calc((14 / 346) * 100cqw));
 }
 .staff .jp_name {
  font-size: min(1.6rem, calc((16 / 346) * 100cqw));
 }
 .staff .jp_name.sbw {
  display: flex;
  justify-content: center;
  gap: min(44px, calc((44 / 850) * 100cqw));
 }
 .staff_space {
  display: none;
 }
 .commentbtn {
  margin-top: 10px;
  display: flex;
  justify-content: center;
 }
 .comebtn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: min(18px, calc((18 / 850) * 100cqw));
  padding: 0.6em 1em;
  position: relative;
  cursor: pointer;
 }
 .comebtn::before {
  top: -6px;
  left: -6px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
 }
 .comebtn span {
  font-size: min(1.45rem, calc((14.5 / 346) * 100cqw));
  margin-left: 10px;
 }
 .comebtn svg {
  width: 12px;
  height: 12px;
 }
 .p-cast h3 {
  width: min(194px, calc((194 / 346) * 100cqw));
  margin-top: 60px;
 }
 .cast_wrap {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 20px;
 }
}

/* [pannel] 
-----------------------------------------------*/
.pannel {
 display: block;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: var(--color-wht);
 z-index: 2000;
 transform: scale(0.9);
 transition: all 0.8s cubic-bezier(0, 0.64, 0.32, 1);
 opacity: 0;
 pointer-events: none;
}
.pannel.-open {
 transform: scale(1);
 opacity: 1;
 pointer-events: initial;
}
.pannel::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 56%, rgba(255, 255, 255, 0) 100%);
}
.pannel-close {
 position: fixed;
 right: 0;
 top: 0;
 width: 80px;
 height: 80px;
 background: var(--color-grn);
 background-size: auto 30px;
 z-index: 10000;
 transition: all 0.3s ease-out;
 cursor: pointer;
 z-index: 3;
}
.pannel-close::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 80px;
 height: 80px;
 background: url(../img/common/svg_close.svg) no-repeat 50% 50%;
 background-size: auto 30px;
 transition: all 0.3s ease-out;
}
.pannel_prev,
.pannel_next {
 position: fixed;
 display: block;
 left: 0;
 top: calc(50% - 24px);
 width: 48px;
 height: 48px;
}
.pannel_prev:after,
.pannel_next:after {
 content: "";
 position: absolute;
 top: calc(50% - 10px);
 left: calc(50% - 10px);
 display: block;
 width: 20px;
 height: 20px;
 border: solid 0 var(--color-base);
 border-width: 0 0 3px 3px;
 transform: rotate(45deg);
}
.pannel_next {
 left: unset;
 right: 0;
}
.pannel_next:after {
 left: unset;
 right: calc(50% - 10px);
 border-width: 3px 3px 0 0;
 transform: rotate(45deg);
}
.pannel_wrap {
 display: flex;
 justify-content: center;
 width: 100%;
 height: 100vh;
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
 position: relative;
 z-index: 2;
}
.comment_detail {
 max-width: 940px;
 margin-inline: auto;
 padding-block: 60px;
}
.comment_detail_head {
 display: block;
}
.comment_detail_head .ttl_wrap {
 justify-content: flex-start;
}
.comment_detail_head .ttl {
 gap: min(calc((10 / 1360) * 100cqw), 10px);
}
.comment_detail_head .sub {
 font-size: min(calc((15 / 1360) * 100cqw), 1.5rem);
}
.comment_detail_head .mds {
 font-size: min(calc((60 / 1360) * 100cqw), 6rem);
}
.comment_detail_body {
 margin-top: 20px;
 display: flex;
 gap: 5%;
}
.comment_detail_body .comment {
 width: 52%;
}
.comment .job {
 color: var(--color-grn);
 font-size: 2rem;
 font-family: var(--ff-min);
 font-weight: 500;
}
.comment .jp_name {
 font-size: 2.2rem;
 font-family: var(--ff-min);
 font-weight: 500;
 margin-top: 0.4em;
}
.comment .text {
 margin-top: 20px;
}
.comment .text p {
 font-size: 1.6rem;
 font-family: var(--ff-min);
 font-weight: 500;
 line-height: 1.8;
}
.comment_detail_body .img {
 width: 43%;
}
#comment_pannel_01 .comment_detail_body {
 flex-direction: column;
}
#comment_pannel_01 .comment_detail_body .comment,
#comment_pannel_01 .comment_detail_body .img {
 width: 100%;
}
#comment_pannel_01 .comment_detail_body .img {
 padding-left: 15%;
}
#comment_pannel_02 .comment_detail_body .comment {
 width: 100%;
}

@media only screen and (min-width: 821px) {
 .pannel-close:hover {
  background: #6fadaa;
 }
 .pannel-close:hover::before {
  transform: rotate(180deg);
 }
}

@media screen and (max-width: 820px) {
 .comment_detail {
  max-width: unset;
  padding-inline: calc((60 / 1360) * 100cqw);
 }
 .comment_detail_head {
  display: block;
 }
 .comment_detail_head .ttl_wrap {
  justify-content: flex-start;
 }
 .comment_detail_head .ttl {
  gap: min(calc((10 / 820) * 100cqw), 10px);
 }
 .comment_detail_head .sub {
  font-size: min(calc((15 / 820) * 100cqw), 1.5rem);
 }
 .comment_detail_head .mds {
  font-size: min(calc((60 / 820) * 100cqw), 6rem);
 }
 .comment_detail_body {
  margin-top: 20px;
  gap: 20px;
  flex-direction: column-reverse;
 }
 .comment_detail_body .comment {
  width: 100%;
 }
 .comment .job {
  color: var(--color-grn);
  font-size: 2rem;
  font-family: var(--ff-min);
  font-weight: 500;
 }
 .comment .jp_name {
  font-size: 2.2rem;
  font-family: var(--ff-min);
  font-weight: 500;
  margin-top: 0.4em;
 }
 .comment .text {
  margin-top: 20px;
 }
 .comment .text p {
  font-size: 1.6rem;
  font-family: var(--ff-min);
  font-weight: 500;
  line-height: 1.8;
 }
 .comment_detail_body .img {
  width: 50%;
 }
 #comment_pannel_01 .comment_detail_body .img {
  padding-left: 0;
 }
}

@media screen and (max-width: 600px) {
 .pannel-close {
  width: min(54px, calc((54 / 390) * 100cqw));
  height: min(54px, calc((54 / 390) * 100cqw));
 }
 .pannel-close::before {
  width: min(54px, calc((54 / 390) * 100cqw));
  height: min(54px, calc((54 / 390) * 100cqw));
  background: url(../img/common/svg_close.svg) no-repeat 50% 50%;
  background-size: auto 20px;
 }
 .comment_detail {
  padding-block: calc((54 / 390) * 100cqw);
  padding-inline: calc((15 / 390) * 100cqw);
 }
 .comment_detail_head .ttl {
  gap: min(calc((10 / 390) * 100cqw), 10px);
 }
 .comment_detail_head .sub {
  font-size: min(calc((12 / 390) * 100cqw), 12px);
 }
 .comment_detail_head .mds {
  font-size: min(calc((48 / 390) * 100cqw), 48px);
 }
 .comment .job {
  font-size: 1.8rem;
 }
 .comment .jp_name {
  font-size: 2rem;
 }
 .comment .text {
  margin-top: 20px;
 }
 .comment .text p {
  font-size: min(calc((15 / 390) * 100cqw), 15px);
  line-height: 1.6;
 }
 #comment_pannel_01 .comment_detail_body .img {
  width: calc(100% + min(30px, calc((30 / 390) * 100cqw)));
  margin-inline: min(-15px, calc((15 / 390) * -100cqw));
 }
}

/* gallery
================================================================================== */
#gallery {
 width: 100%;
 position: relative;
 background: #f5d1df url(../img/ga_bg.jpg) no-repeat 50% 0;
 background-size: cover;
}
.gallery_header {
 padding-block: 80px 120px;
 padding-inline: calc((40 / 1360) * 100cqw);
}
#gallery .ttl_wrap {
 justify-content: flex-end;
}
#gallery .ttl {
 align-items: flex-end;
}
#gallery .mds .c1::first-letter {
 color: #303cff;
}
#gallery .cont_body {
 padding-inline: 20px;
 padding-bottom: 200px;
}
#gallery .contbox {
 width: 100%;
 position: relative;
 padding: 50px;
 background-color: rgba(255, 255, 255, 0.9);
}
.ga_wrap {
 display: flex;
 justify-content: center;
 gap: 40px;
}
.ga_wrap .ga {
 width: 360px;
 display: flex;
 flex-direction: column;
 align-items: center;
 position: relative;
 padding: 25px;
 background-color: var(--color-wht);
 transition: all 0.3s ease-out;
}
.ga_wrap .ga .photo {
 width: 100%;
 position: relative;
}
.ga_wrap .ga .photo img {
 position: relative;
 transition: all 0.3s ease-out;
 z-index: 2;
}
.ga_wrap .ga .photo::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: #e99dca;
 transition: all 0.3s ease-out;
}
.gallerybtn {
 margin-top: 20px;
}
.gabtn {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 20px;
 cursor: pointer;
}
.gabtn::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0);
 z-index: 2;
}
.gabtn span {
 font-size: 1.8rem;
 font-weight: 500;
 position: relative;
 z-index: 2;
}
.gabtn svg {
 width: 14px;
 height: 14px;
 position: relative;
 transform: rotate(-45deg);
 z-index: 2;
}

@media only screen and (min-width: 821px) {
 .ga_wrap .ga:hover .photo img {
  transform: translate(-6px, -6px);
 }
 .ga_wrap .ga:hover .photo::before {
  transform: translate(6px, 6px);
 }
}

@media only screen and (max-width: 820px) {
 .ga_wrap .ga {
  width: 48%;
  padding: 20px;
 }
 .gabtn span {
  font-size: 1.6rem;
 }
}

@media only screen and (max-width: 600px) {
 #gallery {
  background: #f5d1df url(../img/ga_bg.jpg) no-repeat 90% 0;
  background-size: auto 160%;
 }
 .gallery_header {
  padding-block: 80px 60px;
  padding-inline: calc((15 / 390) * 100cqw);
 }
 #gallery .cont_body {
  padding-inline: calc((8 / 390) * 100cqw);
  padding-bottom: 60px;
 }
 #gallery .contbox {
  padding: 20px;
 }
 .ga_wrap {
  display: flex;
  justify-content: center;
  gap: 40px;
 }
 .ga_wrap .ga {
  width: 60%;
  padding: calc((12 / 390) * 100cqw);
 }
 .gallerybtn {
  margin-top: 10px;
 }
 .gabtn {
  gap: 10px;
 }
 .gabtn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  z-index: 2;
 }
 .gabtn span {
  font-size: min(1.25rem, calc((12.5 / 390) * 100cqw));
 }
 .gabtn svg {
  width: 10px;
  height: 10px;
 }
}

/* footer
---------------------------------------------------------------------------------*/
#footer {
 display: block;
 width: 100%;
 position: relative;
 background-color: var(--color-wht);
}
.p_footer {
 width: 100%;
 margin-inline: auto;
 display: flex;
 flex-direction: column;
 align-items: center;
 padding-block: 35px 65px;
}
.ft_logo {
 aspect-ratio: 56/280;
 background: url(../img/logo_tate.png) no-repeat 50% 0;
 background-size: contain;
 opacity: 1;
 width: 56px;
 margin-inline: auto;
 transition: all 0.3;
}
.ft_linkbtn {
 margin-top: 35px;
}
.ft_linkbtn .sns {
 gap: 56px;
}
.ft_credit {
 display: flex;
 flex-direction: column;
 gap: 8px;
 margin-top: 45px;
}
.ft_credit p {
 display: flex;
 flex-flow: row wrap;
 justify-content: center;
 gap: 8px 14px;
 font-size: 1.35rem;
}
.ft_credit p.ft_cast {
 margin-top: 20px;
}
.ft_cr {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 16px;
 font-size: 1.1rem;
 margin-top: 50px;
}
#footer #pageTop {
 position: absolute;
 display: block;
 top: 0;
 right: 0;
 width: 80px;
 height: 80px;
 transition: all 0.3s ease;
}
#footer #pageTop a {
 display: block;
 height: 0;
 overflow: hidden;
 width: 80px;
 padding: 80px 0 0;
}
#footer #pageTop a:after {
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: -6px;
 margin-left: -10px;
 content: "";
 display: block;
 width: 20px;
 height: 20px;
 border: solid 0 var(--color-base);
 border-width: 2px 0 0 2px;
 transform: rotate(45deg);
}

@media screen and (min-width: 821px) {
 .ft_logo:hover {
  opacity: 0.6;
 }
 #footer #pageTop:hover {
  opacity: 0.6;
 }
}

@media only screen and (max-width: 820px) {
 .ft_credit p {
  font-size: 1.25rem;
 }
 .ft_cr {
  font-size: 1.2rem;
 }
}

@media only screen and (max-width: 600px) {
 #footer .cont_body {
  padding: 0;
 }
 .p_footer {
  padding-block: 35px 50px;
 }
 .ft_logo {
  width: 38px;
 }
 .ft_linkbtn {
  margin-top: 35px;
 }
 .ft_linkbtn .sns {
  gap: 30px;
 }
 .ft_credit {
  gap: 6px;
  margin-top: 35px;
 }
 .ft_credit p {
  gap: 6px 12px;
  font-size: min(1.15rem, 2.94cqw);
 }
 .ft_credit p.ft_cast {
  margin-top: 15px;
 }
 .ft_cr {
  font-size: min(1rem, 2.56cqw);
  margin-top: 40px;
 }
 #footer #pageTop {
  width: 20cqw;
  height: 20cqw;
 }
 #footer #pageTop a {
  width: 20cqw;
  padding: 20cqw 0 0;
 }
 #footer #pageTop a:after {
  margin-top: -1.53cqw;
  margin-left: -2.56cqw;
  width: 5.12cqw;
  height: 5.12cqw;
 }
}

/* [Show Animate] 出現アニメーション
    ================================================================================== */
.p-show-elem {
 opacity: 0;
 transform: translateY(100px);
 transition: all 2s cubic-bezier(0.08, 0.8, 0.315, 1);
}
.p-show-elem.p-rev {
 opacity: 0;
 transform: translateY(-100px);
 transition: all 2s cubic-bezier(0.08, 0.8, 0.315, 1);
}
.p-show-elem.p-left {
 opacity: 0;
 transform: translateX(-200px);
 transition: all 3s cubic-bezier(0.08, 0.8, 0.315, 1);
}
.p-show-elem.p-right {
 opacity: 0;
 transform: translateX(200px);
 transition: all 3s cubic-bezier(0.08, 0.8, 0.315, 1);
}
.p-show-elem.-show,
.p-show-elem.p-rev.-show,
.p-show-elem.p-left.-show,
.p-show-elem.p-right.-show {
 opacity: 1;
 transform: translate(0, 0);
}
.p-show-elem.del2 {
 transition-delay: 0.5s;
}
.p-show-elem.del3 {
 transition-delay: 0.6s;
}
.p-show-elem.del4 {
 transition-delay: 0.7s;
}
.p-show-elem.del5 {
 transition-delay: 0.8s;
}
.p-show-elem.del6 {
 transition-delay: 0.9s;
}

@media only screen and (max-width: 767px) {
 .p-show-elem.del2,
 .p-show-elem.del3,
 .p-show-elem.del4,
 .p-show-elem.del5,
 .p-show-elem.del6 {
  transition-delay: 0.3s;
 }
}

/* p-show-clip */
.p-show-clip {
 clip-path: inset(0 100% 0 0);
 transition: all 1.5s 0.5s cubic-bezier(0.08, 0.8, 0.315, 1);
}
.p-show-clip.-show {
 clip-path: inset(0 0 0 0);
}
.p-intro .p-text p:nth-of-type(1) {
 transition-delay: 1s;
}
.p-intro .p-text p:nth-of-type(2) {
 transition-delay: 1.15s;
}
.p-chara .chara:nth-of-type(3) {
 transition-delay: 0.65s;
}
.p-chara .chara:nth-of-type(5) {
 transition-delay: 0.65s;
}
.p-chara .chara:nth-of-type(6) {
 transition-delay: 0.8s;
}
.p-director .under {
 transition-delay: 0.65s;
}
.chara_01.p-show-clip,
.chara_02.p-show-clip {
 clip-path: none;
}
@media only screen and (max-width: 820px) {
 .p-chara.p-show-clip {
  clip-path: none;
 }
 .chara_01.p-show-clip,
 .chara_02.p-show-clip {
  clip-path: inset(0 100% 0 0);
 }
 .chara_01.p-show-clip.-show,
 .chara_02.p-show-clip.-show {
  clip-path: inset(0 0 0 0);
 }
}

/* p-show-img */
.p-show-img .img {
 opacity: 0;
 transform: scale(1.2);
}
.p-show-img.-show .img {
 opacity: 1;
 transform: scale(1);
 transition: all 1400ms cubic-bezier(0.295, 0.03, 0.115, 1);
}
.p-show-img.del2 {
 transition-delay: 0.2s;
}
.p-show-img.del3 {
 transition-delay: 0.4s;
}
.p-show-img.del4 {
 transition-delay: 0.6s;
}
.p-show-img.del2:after {
 transition-delay: 0.7s;
}
.p-show-img.del3:after {
 transition-delay: 0.9s;
}
.p-show-img.del4:after {
 transition-delay: 1.1s;
}

/* p-show-ttl */
.ttl .mds.p-show-ttl {
 opacity: 0;
}
.ttl .mds.p-show-ttl.-show {
 animation: mds_show 1.6s cubic-bezier(0.08, 0.8, 0.315, 1) 0.4s both;
}
@keyframes mds_show {
 0% {
  opacity: 0;
  transform: scale(1.2);
 }
 100% {
  opacity: 1;
  transform: scale(1);
 }
}
.ttl .sub {
 transition-delay: 1s;
}

/* p-show-item */
.stamp {
 opacity: 0;
}
.stamp.-show {
 animation: stampzoom 0.4s cubic-bezier(0.64, 0, 1, 1) 0.4s both;
}

@keyframes stampzoom {
 0% {
  opacity: 0;
  transform: scale(3, 3);
 }
 100% {
  opacity: 0.7;
  transform: scale(1, 1);
 }
}

.review_item_01 {
 opacity: 0;
}
.review_item_01.p-show-item.-show {
 animation: reviewitem 2.4s cubic-bezier(0.08, 0.8, 0.315, 1) 0.4s both;
}

@keyframes reviewitem {
 0% {
  opacity: 0;
  transform: translate(40%, 40%);
 }
 100% {
  opacity: 1;
  transform: translate(0, 0);
 }
}
@keyframes elem_up {
 0% {
  opacity: 0;
  transform: translateY(50px);
 }
 100% {
  opacity: 1;
  transform: translateY(0);
 }
}
@keyframes elem_down {
 0% {
  opacity: 0;
  transform: translateY(-50px);
 }
 100% {
  opacity: 1;
  transform: translateY(0);
 }
}
@keyframes obiSlideW {
 0% {
  width: 100%;
 }
 100% {
  width: 0;
 }
}
@keyframes obiSlideH {
 0% {
  height: 100%;
 }
 100% {
  height: 0;
 }
}