@charset "UTF-8";

/* =======================================
  01.Base（reset / base / typography）
======================================= */
/* ------ Reset -------*/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}
html,body {
  -webkit-text-size-adjust: 100%;
}


/* ------ root -------*/
:root {
  /* size　（横幅 1920px基準） */
  --size-w-5:  min( 0.26vw, 5px);
  --size-w-10:  min(0.521vw, 10px);
  --size-w-15:  min(0.781vw, 15px);
  --size-w-20:  min(1.042vw, 20px);
  --size-w-25:  min(1.302vw, 25px);
  --size-w-30:  min(1.563vw, 30px);
  --size-w-40:  min(2.083vw, 40px);
  --size-w-50:  min(2.604vw, 50px);
  --size-w-60:  min(3.125vw, 60px);
  --size-w-70:  min(3.646vw, 70px);
  --size-w-80:  min(4.167vw, 80px);
  --size-w-90:  min(4.688vw, 90px);
  --size-w-100: min(5.208vw, 100px);
  --size-w-120: min(6.25vw, 120px);

  /* size（高さ1080px基準） */
  --size-h-10:  min(0.926vh, 10px);
  --size-h-15:  min(1.389vh, 15px);
  --size-h-20:  min(1.852vh, 20px);
  --size-h-25:  min(2.315vh, 25px);
  --size-h-30:  min(2.778vh, 30px);
  --size-h-40:  min(3.704vh, 40px);
  --size-h-50:  min(4.630vh, 50px);
  --size-h-60:  min(5.556vh, 60px);
  --size-h-70:  min(6.481vh, 70px);
  --size-h-80:  min(7.407vh, 80px);
  --size-h-90:  min(8.333vh, 90px);
  --size-h-100: min(9.259vh, 100px);
  --size-h-120: min(11.111vh, 120px);

  --card-text-offset: 600px;

  /* font */
  --font-size-base: min(0.938vw, 1.8rem);
}

@media screen and (max-width: 767px) {
  :root {
  /* size（横幅 390px基準） */
  --size-w-5:  min(1.282vw, 5px);
  --size-w-10:  min(2.564vw, 10px);
  --size-w-15:  min(3.846vw, 15px);
  --size-w-20:  min(5.128vw, 20px);
  --size-w-25:  min(6.410vw, 25px);
  --size-w-30:  min(7.692vw, 30px);
  --size-w-40:  min(10.256vw, 40px);
  --size-w-50:  min(12.821vw, 50px);
  --size-w-60:  min(15.385vw, 60px);
  --size-w-70:  min(17.949vw, 70px);
  --size-w-80:  min(20.513vw, 80px);
  --size-w-90:  min(23.077vw, 90px);
  --size-w-100: min(25.641vw, 100px);
  --size-w-120: min(30.769vw, 120px);

    /* font */
    --font-size-base: min(3.590vw, 1.8rem); /* 390px時 約1.4rem */
  }
}


/* ------ Responsive -------*/
.pc {
  display: block;
}
.sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}


/* ------ typography -------*/
.horobeat_wrapper{
  font-size: 62.5%;
}
.horobeat_wrapper main{
  color: #fff;
  font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-size: var(--font-size-base);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.6;
}
main p{
  margin-bottom: 0;
}


/* ------ image -------*/
img{
  display: block;
}



/* =======================================
  02. Utilities（margin / padding etc）
======================================= */
/* ------ height  -------*/
.section-full{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}


/* ------ 配置 -------*/
.center{
  text-align: center;
}


/* ------ text size -------*/
.txt_small{
  font-size: 90%;
}
.txt_xsmall{
  font-size: 80%;
}
.txt_large{
  font-size: 150%;
}


/* ------ visually-hidden -------*/
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}



/* =======================================
  03. Components（button / card / badge）
======================================= */
/* ------ btn -------*/
.btn, a.btn {
  color: #fff;
  display: block;
  text-align: center;
  text-decoration: none;
  transition: 0.3s all;
}
@media screen and (min-width: 768px) {
  .btn:hover{
    text-decoration: none;
    transform:scale(0.95);
  }
}
.btn:last-child{
  margin-bottom: 0;
}
.btn.none{
  pointer-events: none;
}


/* ------ list -------*/
.horobeat_wrapper li{
  padding: 0;
  margin: 0;
}
.horobeat_wrapper li::before{
  display: none;
}


/* =======================================
  04. Layout（header / footer / grid）
======================================= */
/* ------ box -------*/
.horobeat_wrapper{
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}
section {
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.container {
  margin: 0 auto;
  position: relative;
  padding: var(--size-h-70) 0;
  width: 88%;
}
@media screen and (max-width: 767px){
  .container {
    padding: var(--size-w-60) 0;
    max-width: 530px;
  }
}


/* ------ background -------*/
body{
  background-color:#000;
  position: relative;
  z-index: -2;
}
.bg-fixed img{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100lvh;
  object-fit: cover;
  z-index: -1;
}
.is-ios .bg-fixed img{
  top: 0;
}
.is-android .bg-fixed img{
  bottom: 0;
}


/* =======================================
  05. Animation
======================================= */
/* ------ Hitodama -------*/
.hitodama{
  position: absolute;
  z-index: -1;

  /* display: none; 時間制御の際は外す */
}
.is-night .hitodama{
  display: block;
}
.is-night .hitodama.sp{
  display: none;
}
@media screen and (max-width: 767px){
  .is-night .hitodama.pc{
    display: none;
  }
  .is-night .hitodama.sp{
    display: block;
  }
}

/* size */
.hitodama_a{
  width: min(5.469vw, 105px);
}
.hitodama_b{
  width: min(7.292vw, 140px);
}
@media screen and (max-width: 767px){
  .hitodama_a{
    width: min(13.6vw, 51px);
  }
  .hitodama_b{
    width: min(17.867vw, 67px);
  }
}

/* position */
.hitodama_mv_01{
  /* top: 27vh;
  left: calc(50% - 41vh); */
  top: clamp(188px, 27vh, 292px);
  left: calc(50% - clamp(285px, 41vh, 443px));
}
.hitodama_mv_02{
  /* top: 35vh;
  right: calc(50% - 39vh); */
  top: clamp(243px, 35vh, 378px);
  right: calc(50% - clamp(271px, 39vh, 421px));
}
@media screen and (min-width: 768px) and (min-height: 501px){
  /* PC表示（高さ501px以上） */
  /* #sec_mvのみ height計算 */
  .hitodama_mv_01{
    height: clamp(97px, 12.87vh, 139px);
    width: auto; 
  }
  .hitodama_mv_02{
    height: clamp(147px, 19.537vh, 211px);
    width: auto;
  }
}
@media screen and (max-width: 767px){
  .hitodama_mv_01{
    top: calc(50% - -13vw);
    left: -2vw;
  }
  .hitodama_mv_02{
    top: calc(50% - 42vw);
    right: -4vw;
  }
  .hitodama_mv_03{
    top: calc(50% - 80vw);
    left: 0;
  }
}

.hitodama_pv_01{
  top: -6vh;
  right: calc(50% - 49vw);
}
.hitodama_pv_02{
  bottom: 0;
  left: calc(50% - 49vw);
}
@media screen and (max-width: 767px){
  .hitodama_pv_02{
    top: calc(50% - 51vw);
    right: -3vw;
    left: auto;
  }
  .hitodama_pv_03{
    bottom: calc(50% - 54vw);
    left: 21vw;
  }
}

.hitodama_creators_01{
  top: 6vh;
  left: calc(50% - 44vw);
}
.hitodama_creators_02{
  bottom: 17vh;
  left: calc(50% - 13vw);
}
.hitodama_creators_03{
  bottom: 3vh;
  right: calc(50% - 32vw);
}
@media screen and (max-width: 767px){
  .hitodama_creators_01{
    display: none !important;
    top: calc(50% - 92vw);
    left: 25vw;
  }
  .hitodama_creators_02{
    bottom: calc(50% - 30vw);
    left: 6vw;
  }
  .hitodama_creators_04{
    bottom: calc(50% - 87vw);
    right: 5vw;
  }
}

.hitodama_card_01{
  top: 56vh;
  left: calc(50% - 39vw);
}
.hitodama_card_02{
  bottom: 46vh;
  right: calc(50% - 28vw);
}
.hitodama_card_03{
  bottom: 17vh;
  right: calc(50% - 40vw);
}
@media screen and (max-width: 767px){
  .hitodama_card_01{
    top: auto;
    bottom: calc(50% - 43vw);
    right: 0;
    left: auto;
  }
  .hitodama_card_03{
    top: calc(50% - 33vw);
    bottom: auto;
    right: auto;
    left: -3vw;
  }
}

.hitodama_character_01{
  top: -6vh;
  right: calc(50% - 44vw);
}
.hitodama_character_02{
  bottom: -1vh;
  left: calc(50% - 46vw);
}
.hitodama_character_03{
  bottom: -2vh;
  right: calc(50% - 48vw);
}
@media screen and (max-width: 767px){
  .hitodama_character_01{
    top: calc(50% - 90vw);
    left: -2vw;
  }
  .hitodama_character_02{
    bottom: calc(50% - 22vw);
    left: auto;
    right: -10vw;
  }
  .hitodama_character_03{
    bottom: calc(50% - 85vw);
    right: auto;
    left: -4vw;
  }
}

.hitodama_more_01{
  bottom: -10vh;
  left: calc(50% - 22vw);
}
.hitodama_more_02{
  bottom: -8vh;
  left: calc(50% - 42vw);
}
.hitodama_more_03{
  top: 15vh;
  right: calc(50% - 26vw);
}
@media screen and (max-width: 767px){
  .hitodama_more_01{
    bottom: calc(50% - 41vw);
    left: 10vw;
  }
  .hitodama_more_02{
    bottom: auto;
    top: calc(50% - 32vw);
    left: 20vw;
  }
}

.hitodama_more_contents_01{
  top: 9vh;
  left: calc(50% - 48vw);
}
.hitodama_more_contents_02{
  bottom: 11vh;
  left: calc(50% - 34vw);
}
@media screen and (max-width: 767px){
  .hitodama_more_contents_01{
    top: calc(50% - 68vw);
    left: auto;
    right: 9vw;
  }
  .hitodama_more_contents_02{
    bottom: calc(50% - 2vw);
    left: 6vw;
  }
}

.hitodama_comingsoon_01{
  top: -1vh;
  left: calc(50% - 40vw);
}
.hitodama_comingsoon_02{
  bottom: 31vh;
  right: calc(50% - 35vw);
}
.hitodama_comingsoon_03{
  bottom: 10vh;
  right: calc(50% - 46vw);
}
@media screen and (max-width: 767px){
  .hitodama_comingsoon_01{
    top: calc(50% - 69vw);
    left: auto;
    right: 0vw;
    width: min(13.6vw, 51px);
  }
  .hitodama_comingsoon_02{
    bottom: calc(50% - 46vw);
    left: 8vw;
    right: auto;
  }
  .hitodama_comingsoon_03{
    bottom: calc(50% - 28vw);
    right: 7vw;
  }
  .hitodama_comingsoon_04{
    top: calc(50% - 92vw);
    left: 12vw;
  }
}

/* -- animation -- */
/* パターンA（基本・ふわふわ） */
.hitodama_float_a{
  animation:
    hitodama-a-y 2.8s infinite alternate ease-in-out,
    hitodama-a-x 4.2s infinite alternate ease-in-out,
    hitodama-a-rotate 4.8s infinite alternate ease-in-out;
}
@keyframes hitodama-a-y{
  from{ translate:0 -12px; }
  to{   translate:0 10px; }
}
@keyframes hitodama-a-x{
  from{ transform:translateX(-6px); }
  to{   transform:translateX(4px); }
}
@keyframes hitodama-a-rotate{
  from{ rotate:-3deg; }
  to{   rotate:2deg; }
}

/* パターンB（ゆらゆら） */
.hitodama_float_b{
  animation:
    hitodama-c-x 3.4s infinite alternate ease-in-out,
    hitodama-c-y 4.8s infinite alternate ease-in-out,
    hitodama-c-rotate 5.6s infinite alternate ease-in-out;
}
@keyframes hitodama-c-x{
  from{ transform:translateX(-10px); }
  to{   transform:translateX(10px); }
}
@keyframes hitodama-c-y{
  from{ translate:0 -8px; }
  to{   translate:0 8px; }
}
@keyframes hitodama-c-rotate{
  from{ rotate:-4deg; }
  to{   rotate:4deg; }
}

/* パターンC（ふわっと上昇） */
.hitodama_float_c{
  animation:
    hitodama-d-y 4.8s infinite alternate ease-in-out,
    hitodama-d-scale 4.2s infinite alternate ease-in-out;
}
@keyframes hitodama-d-y{
  from{ translate:0 8px; }
  to{   translate:0 -18px; }
}
@keyframes hitodama-d-scale{
  from{ scale:0.96; }
  to{   scale:1.04; }
}

/* パターンD（少し不気味） */
.hitodama_float_d{
  animation:
    hitodama-e-y 5.2s infinite alternate ease-in-out,
    hitodama-e-x 6.2s infinite alternate ease-in-out,
    hitodama-e-opacity 3s infinite alternate ease-in-out;
}
@keyframes hitodama-e-y{
  from{ translate:0 -6px; }
  to{   translate:0 18px; }
}
@keyframes hitodama-e-x{
  from{ transform:translateX(-8px); }
  to{   transform:translateX(8px); }
}
@keyframes hitodama-e-opacity{
  from{ opacity:.7; }
  to{   opacity:1; }
}

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

  /* パターンA */
  @keyframes hitodama-a-y{
    from{ translate:0 -8px; }
    to{   translate:0 6px; }
  }
  @keyframes hitodama-a-x{
    from{ transform:translateX(-4px); }
    to{   transform:translateX(3px); }
  }
  @keyframes hitodama-a-rotate{
    from{ rotate:-2deg; }
    to{   rotate:1.5deg; }
  }

  /* パターンB */
  @keyframes hitodama-c-x{
    from{ transform:translateX(-6px); }
    to{   transform:translateX(6px); }
  }
  @keyframes hitodama-c-y{
    from{ translate:0 -5px; }
    to{   translate:0 5px; }
  }
  @keyframes hitodama-c-rotate{
    from{ rotate:-2.5deg; }
    to{   rotate:2.5deg; }
  }

  /* パターンC */
  @keyframes hitodama-d-y{
    from{ translate:0 5px; }
    to{   translate:0 -12px; }
  }
  @keyframes hitodama-d-scale{
    from{ scale:0.98; }
    to{   scale:1.02; }
  }

  /* パターンD */
  @keyframes hitodama-e-y{
    from{ translate:0 -4px; }
    to{   translate:0 10px; }
  }
  @keyframes hitodama-e-x{
    from{ transform:translateX(-5px); }
    to{   transform:translateX(5px); }
  }
  @keyframes hitodama-e-opacity{
    from{ opacity:.8; }
    to{   opacity:1; }
  }

}


/* ------ card_floating（カード浮遊） -------*/
.card_floating {
  display: flex;
  justify-content: center;
  margin-bottom: var(--size-h-50);

  animation: 
    card-floating-y 3s infinite alternate ease-in-out,
    card-floating-x 4.11s infinite alternate ease-in-out,
    card-floating-rotate 5.19s infinite alternate ease-in-out;
}
@media screen and (max-width: 767px){
  .card_floating {
    margin-bottom: var(--size-w-20);
  }
}

@keyframes card-floating-y {
	0% { translate: 0 -20px; }
	100% { translate: 0 15px; }
}
@keyframes card-floating-x {
	0% { transform: translateX(-10px); }
	100% { transform: translateX(5px); }
}
@keyframes card-floating-rotate {
	0% { rotate: -5deg; }
	100% { rotate: 3deg; }
}
@media screen and (max-width: 767px){
  @keyframes card-floating-y {
    0%   { translate: 0 -10px; }
    100% { translate: 0 8px; }
  }
  @keyframes card-floating-x {
    0%   { transform: translateX(-5px); }
    100% { transform: translateX(3px); }
  }
  @keyframes card-floating-rotate {
    0%   { rotate: -2deg; }
    100% { rotate: 2deg; }
  }
}


/* ------ Fade (ふわっと表示) -------*/
.fadeInUp {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 1.2s ease,
    transform 1.2s ease;
}
.fadeInUp.is-show {
  opacity: 1;
  transform: translateY(0);
}


/* ------ Float (カード裏返し) -------*/
.card_inner{
  position: relative;
  display: inline-block;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.card_inner.is-flipped{
  transform: rotateY(180deg);
}
.card_face{
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.card_face_front{
  position: relative;
}
.card_face_back{
  transform: rotateY(180deg);
}



/* =======================================
  06. Sections
======================================= */
/* ------ .sec_mv (PC 高さ1080px基準で可変) -------*/
@media screen and (max-width: 767px){
  .sec_mv.section-full{
    min-height: 84vh;
  }
}
.sec_mv .txt_mv{
  margin-bottom: 0;
}

/* img */
.sec_mv .card_horobeat_mv,
.sec_mv .ttl_mv img,
.sec_mv .txt_mv img{
  margin: 0 auto;
}
@media screen and (min-width: 768px) and (min-height: 501px){
  /* PC表示（高さ501px以上） */

  /* ※ 画面の高さに合わせて画像を可変（元サイズを上限） */
  .sec_mv .card_horobeat_mv{
    height: min(49.537vh, 535px);
    width: auto;
  }
  .sec_mv .ttl_mv img{
    margin-bottom: var(--size-h-50);
    height: min(20.556vh, 222px);
    width: auto;
  }
  .sec_mv .txt_mv img{
    height: min(7.222vh, 78px);
    width: auto;
  }

  /* ※ 横幅と高さの両方を見て、画像が画面からはみ出さない大きさを自動で選ぶ */
  /* .sec_mv .card_horobeat_mv{
    width: min(21.198vw, calc(49.537vh * 407 / 535), 407px);
  }
  .sec_mv .ttl_mv img{
    margin-bottom: var(--size-h-50);
    width: min(47.604vw, calc(20.556vh * 914 / 222), 914px);
  }
  .sec_mv .txt_mv img{
    width: min(39.271vw, calc(7.222vh * 754 / 78), 754px);
  } */
}
@media screen and (orientation: landscape) and (max-height: 500px){
  /* SP横向き（高さ500px以下） */
  .sec_mv .card_horobeat_mv{
    width: min(21.198vw ,407px);
  }
  .sec_mv .ttl_mv img{
    margin-bottom: var(--size-h-50);
    width: min(47.604vw, 914px);
  }
  .sec_mv .txt_mv img{
    width: min(47.604vw, 754px);
  }
}
@media screen and (max-width: 767px){
  /* sp表示 */
  .sec_mv .card_horobeat_mv{
    width: min(65.897vw, 257px);
  }
  .sec_mv .ttl_mv img{
    margin-bottom: var(--size-w-10);
    width: min(67.692vw, 264px);
  }
  .sec_mv .txt_mv img{
    width: min(58.974vw, 230px);
  }
}


/* ------ .sec_pv -------*/
@media screen and (max-width: 767px){
  .sec_pv .container{
    padding-top: 0;
  }
}

/* 動画 */
.pv_box{
  margin: 0 auto;
  aspect-ratio: 16 / 9;

  width: min(71.25vw, 1368px);
  /* width: min(71.25vw, calc(71.25vh * 16 / 9), 1368px); */
}
.pv_box iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media screen and (max-width: 767px){
  .pv_box{
    width: 100%;
  }
}


/* ------ .sec_creators -------*/
.sec_creators .container{
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: center;

  padding-bottom: 0;

  gap: var(--size-w-120);
  /* gap: min(var(--size-w-120), var(--size-h-120)); */
}
.sec_creators .inner{
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: center;

  gap: var(--size-w-120);
  /* gap: min(var(--size-w-120), var(--size-h-120)); */
}
@media screen and (max-width: 767px){
  .sec_creators .container{
    flex-direction: column;
    align-items: center;
    gap: var(--size-w-20);
  }
  .sec_creators .inner{
    margin-left: 4vw;
    gap: var(--size-w-20);
    width: 100%;
  }
}

/* .creators_list */
.creators_list{
  display: flex;
  flex-direction: row-reverse;

  gap: var(--size-w-90);
  margin-top: var(--size-w-90);
  /* gap: min(var(--size-w-90), var(--size-h-90));
  margin-top: min(var(--size-w-90), var(--size-h-90)); */
}
@media screen and (max-width: 767px){
  .creators_list{
    gap: var(--size-w-20);
    margin-top: var(--size-w-40);
  }
}

.sec_creators .txt_creators_last{
  margin-top: var(--size-w-60);
  /* margin-top: min(var(--size-w-60), var(--size-h-60)); */
}
@media screen and (max-width: 767px){
  .sec_creators .txt_creators_last{
    margin-top: 0;
  }
}

/* img */
.sec_creators .ttl_creators img{
  width: min(7.813vw, 150px);
}
.sec_creators .txt_creators_01 img,
.sec_creators .txt_creators_02 img,
.sec_creators .txt_creators_03 img,
.sec_creators .txt_creators_04 img{
  width: min(8.594vw, 165px);
}
.sec_creators .txt_creators_last img{
  width: min(13.854vw, 266px);
}
@media screen and (min-width: 768px) and (min-height: 501px){
  /* PC表示（高さ501px以上） */

  /* ※ 横幅と高さの両方を見て、画像が画面からはみ出さない大きさを自動で選ぶ */
  /* .sec_creators .ttl_creators img{
    width: min(7.813vw, calc(46.759vh * 150 / 505), 150px);
  }
  .sec_creators .txt_creators_01 img{
    width: min(8.594vw, calc(50.926vh * 165 / 550), 165px);
  }
  .sec_creators .txt_creators_02 img{
    width: min(8.594vw, calc(42.593vh * 165 / 460), 165px);
  }
  .sec_creators .txt_creators_03 img{
    width: min(8.490vw, calc(30.370vh * 163 / 328), 163px);
  }
  .sec_creators .txt_creators_04 img{
    width: min(8.594vw, calc(34.537vh * 165 / 373), 165px);
  }
  .sec_creators .txt_creators_last img{
    width: min(13.854vw, calc(74.722vh * 266 / 807), 266px);
  } */
}
@media screen and (max-width: 767px){
  .sec_creators .ttl_creators img{
    width: min(11.282vw, 44px);
  }
  .sec_creators .txt_creators_01 img,
  .sec_creators .txt_creators_02 img,
  .sec_creators .txt_creators_03 img,
  .sec_creators .txt_creators_04 img{
    width: var(--size-w-50);
  }
  .sec_creators .txt_creators_last img{
    width: min(31.282vw, 122px);
  }
}


/* ------ .sec_card (PC 高さ1080px基準で可変) -------*/
.sec_card{
  position: relative;
  min-height: 100vh;
}
.sec_card .container{
  /* max-width: min(73.958vw, 1420px);/* 横幅 1920px基準
  min-width: 900px; */
  padding: 0;
}
@media screen and (orientation: landscape) and (max-height: 500px){
  /* SP横向き（高さ500px以下） */
  .sec_card .container{
    min-width: auto;
  }
}
@media screen and (max-width: 899px){
  .sec_card .container{
    min-width: 100%;
  }
}
@media (max-width:767px) and (orientation:portrait){
  .sec_card .container{
    max-width: 100%;
    min-width: 88%;
    padding: 0;
  }
}


/* --- .ttl_card --- */
.ttl_card{
  position: absolute;
  top: var(--size-h-50);
  /* top: min(var(--size-w-50), var(--size-h-50)); */
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
}
@media (max-width:767px) and (orientation:portrait){
  .ttl_card{
    top: calc(50% - min(64.103vw, 250px));
  }
}

/* ---  .card_stage --- */
.card_stage{
  position: relative;
  width: 100%;
  height: 100vh;
}
.card_item{
  position: absolute;
  left: 50%;
  bottom: var(--size-h-50);
  /* bottom: min(var(--size-w-50), var(--size-h-50)); */
  transform: translateX(-50%);
}
@media (max-width:767px) and (orientation:portrait){
  .card_item{
    top: 56%;
    bottom: auto;
    transform:translate(-50%,-50%);
  }
}

/* .card_manga */
.card_manga{
  z-index: 10;
}

/* .card_front */
.card_front{
  opacity: 0;
  z-index: 20;
}

/* .card_final */
.card_final{
  opacity: 0;
  z-index: 15;
}

/* .card_text */
.card_text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(var(--card-text-offset) * -1), -50%);

  z-index: 30;

  display: flex;
  flex-direction: row-reverse;
  gap: var(--size-h-10);
  /* gap: min(var(--size-w-10), var(--size-h-10));  */
}

.card_text p{
  margin-bottom: 0;
  opacity: 0;
  transform: translateY(30px);
}
@media screen and (min-width: 768px){
  .txt_card_01{
    margin-top: var(--size-h-120);
    margin-left: var(--size-h-20);
    /* margin-top: min(var(--size-w-120),var(--size-h-120));
    margin-left: min(var(--size-w-20),var(--size-h-20)); */
  }
  .txt_card_03{
    margin-top: var(--size-h-100);
    /* margin-top: min(var(--size-w-100), var(--size-h-100)); */
  }
}
@media (max-width:767px) and (orientation:portrait){
  .card_text{
    top: calc(50% - (var(--size-w-60) * -1));
    left: 50%;
    transform: translateX(-50%);

    justify-content: center;
    gap: 0;
  }
  .txt_card_01{
    margin-top: var(--size-w-40);
    margin-left: var(--size-w-5);
    margin-right: var(--size-w-10);
  }
  .txt_card_03{
    margin-top: var(--size-w-30);
  }
}
@media screen and (orientation: landscape) and (max-height: 500px){
  /* SP横向き（高さ500px以下） */
  .ttl_card{
    top: 20px;
  }
  .card_item{
    bottom: 20px;
  }
  .card_text{
    top: 45%;
  }
}

/* img */
.card_manga img,
.card_front img,
.card_final img{
  aspect-ratio: 648 / 905;
  display: block;
}
@media screen and (min-width: 768px) and (min-height: 501px){
  /* PC表示（高さ501px以上） */

  /* ※ 画面の高さに合わせて画像を可変（元サイズを上限） */
  .ttl_card img{
    height: min(19.259vh, 208px);
    width: auto;
  }
  .card_manga img,
  .card_front img,
  .card_final img{
    height: min(64.815vh, 700px);
    width: auto;
  }
  .txt_card_01 img{
    height: min(46.296vh, 500px);
    width: auto;
  }
  .txt_card_02 img{
    height: min(47.593vh, 514px);
    width: auto;
  }
  .txt_card_03 img{
    height: min(68.519vh, 740px);
    width: auto;
  }

  /* ※ 横幅と高さの両方を見て、画像が画面からはみ出さない大きさを自動で選ぶ */
  /* .ttl_card img{
    width: min(39.583vw, calc(19.259vh * 760 / 208), 760px);
  }
  .card_manga img,
  .card_front img,
  .card_final img{
    width: min(33.750vw, calc(64.815vh * 648 / 905), 648px);
  }
  .txt_card_01 img{
    width: min(4.375vw, calc(46.296vh * 84 / 500), 84px);
  }
  .txt_card_02 img{
    width: min(10.104vw, calc(68.519vh * 194 / 740), 194px);
  }
  .txt_card_03 img{
    width: min(10.677vw, calc(47.593vh * 205 / 514), 205px);
  } */
}
@media screen and (orientation: landscape) and (max-height: 500px){
  /* SP横向き（高さ500px以下） */

  /* title */
  .ttl_card img{
    height: min(19.259vh, 208px);
    width: auto !important;
  }

  /* card */
  .card_manga img,
  .card_front img,
  .card_final img{
    height: min(64.815vh, 700px);
    width: auto !important;
  }

  /* text */
  .txt_card_01 img{
    height: min(46.296vh, 500px);
    width: auto !important;
  }
  .txt_card_02 img{
    height: min(47.593vh, 514px);
    width: auto !important;
  }
  .txt_card_03 img{
    height: min(68.519vh, 740px);
    width: auto !important;
  }
}
@media (max-width:767px) and (orientation:portrait){
  /* sp表示 */

  /* title */
  .ttl_card{
    width: min(79.744vw, 311px);
  }
  .ttl_card img{
    display: block;
    height: auto;
    width: 100%;
  }

  /* card */
  .card_manga,
  .card_front,
  .card_final{
    width: min(65.641vw, 256px);
  }
  .card_manga img,
  .card_front img,
  .card_final img{
    display: block;
    height: auto;
    width: 100%;
  }

  /* text */
  .txt_card_01{
    width: min(6.154vw, 24px);
  }
  .txt_card_02{
    width: min(19.231vw, 75px);
  }
  .txt_card_03{
    width: min(15.897vw, 62px);
  }
  .txt_card_01 img,
  .txt_card_02 img,
  .txt_card_03 img{
    width: 100%;
    height: auto;
  }
}


/* ------ .sec_character -------*/
.sec_character .container{
  width: 80%;
}
@media screen and (max-width:767px){
  .sec_character.section-full {
    min-height: auto;
  }
  .sec_character .container{
    width: 90%;
  }
}

/* .character_list */
.character_list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--size-w-30) var(--size-w-60);
  width: 100%;
}
@media screen and (max-width:767px){
  .character_list{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: var(--size-w-20) 0;
    justify-items: center;
    height: auto;
  }
  .character_item{
    position: static;
    transform: none;
  } 
  .character_item img{
    width: 100%;
  }
}

/* img */
.character_item{
  width: min(20.313vw, 390px);
}
@media screen and (max-width: 767px){
  .character_item {
    width: 42.821vw; /* 167px */
  }
}


/* ------ .sec_more -------*/
.sec_more .container{
  padding-top: var(--size-h-80);
  padding-bottom: 0;
}
@media screen and (max-width: 767px){
  .sec_more .container{
    padding: var(--size-h-40) 0;
  }
}
.txt_more{
  margin: 0 auto;
}

/* img */
.txt_more img{
  /* width: min(2.865vw, 55px); */
  width: min(2.865vw, calc(32.870vh * 55 / 355), 55px);
}
@media screen and (max-width: 767px){
  .txt_more img{
    width: min(4.359vw, 17px);
  }
}


/* ------ .sec_more_contents -------*/
.sec_more_contents .container{
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: center;
  width: 92%;
}
@media screen and (max-width: 767px){
  .sec_more_contents.section-full {
    min-height: auto;
  }
  .sec_more_contents .container{
    flex-direction: column;
    padding: var(--size-w-40) 0;
    width: 98%;
  }
}

/* .img_box */
.sec_more_contents .img_box{
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
}
.img_more_contents_02{
  margin-top: var(--size-h-100);
}
@media screen and (max-width: 767px){
  .sec_more_contents .img_box{
    width: 100%;
  }
  .img_more_contents_02{
    margin-top: var(--size-h-40);
  }
}

/* .txt_more_contents */
.txt_more_contents{
  display: flex;
  flex-direction: row-reverse;
  gap: min(var(--size-w-15), var(--size-h-15));
  margin-top: min(7.292vw, 12.963vh, 140px);
  margin-right: min(var(--size-w-100) ,var(--size-h-100));
}
.txt_more_contents.sp{
  display: none;
}
.txt_more_contents_02{
  margin-top: min(var(--size-w-60), var(--size-h-60));
}
.txt_more_contents_03{
  margin-top: min(var(--size-w-120), var(--size-h-120));
}
@media screen and (max-width: 767px){
  .txt_more_contents{
    gap: var(--size-w-10);
    margin: 0 auto var(--size-w-10);
  }
  .txt_more_contents.pc{
    display: none;
  }
  .txt_more_contents.sp{
    display: flex;
  }
  .txt_more_contents_02{
    margin-top: var(--size-w-25);
  }
  .txt_more_contents_03{
    margin-top: var(--size-w-50);
  }
}

/* img */
@media screen and (min-width: 768px) {
  /* PC表示（高さ501px以上） */

  /* ※ 横幅と高さの両方を見て、画像が画面からはみ出さない大きさを自動で選ぶ */
  .img_more_contents_01{
    width: min(35vw, calc(84.444vh * 672 / 912), 672px);
  }
  .img_more_contents_02{
    width: min(34.792vw, calc(83.981vh * 668 / 907), 668px);
  }
  .txt_more_contents_01 img{
    width: min(4.635vw, calc(33.611vh * 89 / 363), 89px);
  }
  .txt_more_contents_02 img{
    width: min(4.531vw, calc(33.889vh * 87 / 366), 87px);
  }
  .txt_more_contents_03 img{
    width: min(4.583vw, calc(54.444vh * 88 / 588), 88px);
  }
}
@media screen and (max-width: 767px){
  .img_more_contents_01,
  .img_more_contents_02{
    width: 50%;
  }
  .txt_more_contents_01 img,
  .txt_more_contents_02 img,
  .txt_more_contents_03 img{
    width: var(--size-w-30); 
  }
}


/* ------ .sec_comingsoon (PC 高さ1080px基準で可変) -------*/
.sec_comingsoon .container{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.txt_copy{
  margin-bottom: var(--size-h-20);
}
@media screen and (max-width: 767px){
  .sec_comingsoon.section-full {
    min-height: auto;
  }
  .sec_comingsoon .container{
    width: 90%;
  }
  .txt_copy{
    font-size: min(2.821vw, 1.4rem); /* 1.1rem */
    margin-bottom: var(--size-w-25)
  }
  .txt_note{
    font-size: min(2.308vw, 1.2rem); /* 0.9rem */
  }
}


/* img */
@media screen and (min-width: 768px) and (min-height: 501px){
  /* PC表示（高さ501px以上） */

  /* ※ 画面の高さに合わせて画像を可変（元サイズを上限） */
  .sec_comingsoon .logo_horobeat{
    height: min(20.556vh, 222px);
    width: auto;
  }
  .sec_comingsoon .txt_comingsoon img{
    margin: var(--size-h-80) auto;
    height: min(34.907vh, 377px);
    width: auto;
  }

  /* ※ 横幅と高さの両方を見て、画像が画面からはみ出さない大きさを自動で選ぶ */
  /* .sec_comingsoon .logo_horobeat{
    width: min(47.604vw, calc(20.556vh * 914 / 222), 914px);
  }
  .sec_comingsoon .txt_comingsoon img{
    margin: var(--size-h-100) auto 0;
    width: min(4.479vw, calc(34.907vh * 86 / 377), 86px);
  } */
}
@media screen and (orientation: landscape) and (max-height: 500px){
  /* SP横向き（高さ500px以下） */
  .sec_comingsoon .container{
    height: auto;
  }
  .sec_comingsoon .logo_horobeat{
    width: min(47.604vw, 914px);
  }
  .sec_comingsoon .txt_comingsoon img{
    margin: 50px auto !important;
    width: min( 4.479vw, 86px);
  }
}
@media screen and (max-width: 767px){
  /* sp表示 */
  .sec_comingsoon .logo_horobeat{
    width: min(70.256vw, 274px);
  }
  .sec_comingsoon .txt_comingsoon img{
    margin: var(--size-w-30) auto var(--size-w-60);
    width: min(8vw, 30px);
  }
}

@media screen and (min-width: 768px) and (max-height: 750px) {
  /* pc 高さ750px以下 */
  .txt_copy{
    position: relative;
    bottom: auto;
  }
  .sec_comingsoon .txt_comingsoon img{
    margin-bottom: var(--size-h-100);
  }
}

/* sns icon */
.icon_sns_x {
  /* background-color: white; */
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  border-radius: 50%;
  margin-bottom: var(--size-h-50);
  position: relative;
  width: 30px;
}
.icon_sns_x img{
  width: 100%;
  height: auto;
}
@media screen and (max-width: 767px){
  .icon_sns_x {
    margin-bottom: var(--size-w-40);
    width: 25px;
  }
}