@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 {
  /* font-family */
  --font-hb-gothic: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  --font-hb-mincho: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "HGS明朝E", "MS PMincho", serif;

  /* 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);

  /* size product　（横幅 1600px基準） */
  --size-product-10: min(0.625vw, 10px);
  --size-product-15: min(0.938vw, 15px);
  --size-product-16: min(1vw, 16px); 
  --size-product-20: min(1.25vw, 20px);
  --size-product-25: min(1.563vw, 25px);
  --size-product-30: min(1.875vw, 30px);
  --size-product-40: min(2.5vw, 40px);
  --size-product-50: min(3.125vw, 50px);
  --size-product-60: min(3.75vw, 60px);
  --size-product-80: min(5vw, 80px);
  --size-product-90: min(5.625vw, 90px);
  --size-product-100: min(6.25vw, 100px);
  --size-product-140: min(8.75vw, 140px);

  /* font （横幅 1600px基準）*/
  --font-size-base: min(1.063vw, 17px);

  /* card */
  --card-text-offset: 600px;
}

@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);
    --size-w-140: min(35.897vw, 140px);

    /* font */
    --font-size-base: min( 3.077vw, 15px); /* 390px時 約12px */
  }
}


/* ------ 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: var(--font-hb-mincho);
  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;
}
@media screen and (max-width: 767px){
  .btn img{
    width: 100%;
    height: auto;
  }
}


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


/* ------ .list_circle_box -------*/
.horobeat_wrapper .list_circle_box{
  position: relative;
  margin: 0;
}
.horobeat_wrapper .list_circle_box li{
  padding-left: 1.2em;
  position: relative;
}
.horobeat_wrapper .list_circle_box li::before{
  content: '●';
  display: block;
  position: absolute;
  left: 0;
  top: auto;
  background: none;
  width: auto;
  height: auto;
}


/* ------ hb_accordion -------*/
.hb_accordion__trigger{
  cursor: pointer;
}
.hb_accordion__panel{
  overflow: hidden;
}
.hb_accordion_content{
  opacity: 0;
  visibility: hidden;
  transition:
    opacity .2s ease,
    visibility .2s ease;
}
.hb_accordion__item.is-open .hb_accordion_content{
  opacity: 1;
  visibility: visible;
}



/* =======================================
  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: 100vh;
  object-fit: cover;
  z-index: -1;
}

@media (max-width: 767px) {
  /* Android用 */
  .is-android .bg-fixed img {
    bottom: 0;
  }

  /* iOS Safari用：上下の隙間（白浮き）を消すため、iOSの時だけ大きめに覆う */
  .is-ios-safari .bg-fixed img {
    top: -10vh;
    left: 0;
    width: 100vw;
    height: 120vh;
    -webkit-transform: translateZ(0);
    transform: translateZ(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基準で可変) -------*/
.sec_mv.section-full{
  min-height: 90vh;
}
@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;
}
.sec_comingsoon p{
  font-family: var(--font-hb-gothic);
}
.sec_comingsoon .txt_copy{
  margin-bottom: var(--size-h-20);
}
/* .bnr_corofes2026 (8月更新) */
.sec_comingsoon .bnr_corofes2026{
  margin: var(--size-h-80) auto 0;
}
@media screen and (max-width: 767px){
  .sec_comingsoon.section-full {
    min-height: auto;
  }
  .sec_comingsoon .container{
    width: 90%;
  }
  .sec_comingsoon .txt_copy{
    font-size: min(2.821vw, 1.4rem); /* 1.1rem */
    margin-bottom: var(--size-w-25)
  }
  .sec_comingsoon .txt_note{
    font-size: min(2.308vw, 1.2rem); /* 0.9rem */
  }
  /* .bnr_corofes2026 (8月更新) */
  .sec_comingsoon .bnr_corofes2026{
    margin: var(--size-w-40) auto var(--size-w-10);
  }
}


/* 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;
  }

  /* .bnr_corofes2026 (8月更新) */
  .sec_comingsoon .bnr_corofes2026 img{
    height: min(17.593vh, 190px);
    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);
  }

  /* .bnr_corofes2026 (8月更新) */
  .sec_comingsoon .bnr_corofes2026 img{
    width: min(83.077vw, 324px);
  }
}

@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;
  }
}



/* =======================================
  06. Sections（8/1更新）
======================================= */
/* ------ .sec_product -------*/
.sec_product .container{
  padding: var(--size-h-70) var(--size-product-20);
  width: min(100vw, 1600px); /* 1600px基準 */
}
.sec_product .case{
  margin-bottom: var(--size-product-140);
}
.sec_product p,
.sec_product li{
  color: #000;
  font-weight: 500;
  line-height: 1.9;
}
.sec_product ruby[data-ruby]{
  position: relative;
}
.sec_product ruby[data-ruby]::before{
  content: attr(data-ruby);
  position: absolute;
  top: -1.3em;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  text-align: center;
  font-size: 54%;
  white-space: nowrap;
}
.sec_product rt{
  display: none;
}
@media screen and (max-width: 767px){
  .sec_product ruby[data-ruby]::before{
    top: -1.1em;
  }
}
.sec_product p.txt_product{
  line-height: 2;
  margin-bottom: 1em;
}
.sec_product p.txt_product span{
  display: inline-block;
}
@media screen and (max-width: 767px){
  .sec_product .container{
    padding: 0 0 var(--size-w-60);
    width: 90%;
  }
  .sec_product .case{
    margin-bottom: var(--size-w-60);
  }
  .sec_product p,
  .sec_product li{
    line-height: 2;
  }
  .sec_product p.txt_product{
    line-height: 2;
    margin-bottom: 1.5em;
  }
}

/* .ttl_product */
.ttl_product{
  margin-bottom: var(--size-product-140);
}
.ttl_product img{
  margin: 0 auto;
  width: min(9.375vw, 150px);  /* 1600px基準 */
}
@media screen and (max-width: 767px){
  .ttl_product{
    margin-bottom: var(--size-w-80);
  }
  .ttl_product img{
    width: min(22.051vw, 86px);
  }
}

/* .ttl_product_sub */
.ttl_product_sub{
  margin-bottom: var(--size-product-40);
}
.ttl_product_sub img{
  margin: 0 auto;
  width: min(37.5vw, 600px); /* 1600px基準 */
}
@media screen and (max-width: 767px){
  .ttl_product_sub{
    margin-bottom: var(--size-w-20);
  }
  .ttl_product_sub img{
    width: min(64.267vw, 280px); /* 390px時 241px */
  }
}

/* 拡張パック */
.product_boosterpack_box .hb_accordion_content .product_info_box p{
  margin-bottom: 0.5em;
}

/* スタートデッキ */
/* .product_starterdeck_box{} */

/* カードスリーブ */
.product_cardsleeve_box .txt_product{
  text-align: center;
}
@media screen and (max-width: 767px){
  .product_cardsleeve_box .txt_product{
    text-align: left;
  }
}

/* .hb_product_box */
.hb_product_box{
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  position: relative;
  margin: 0 auto;
  width: min(69.375vw, 1110px); /* 1600px基準 */
}
.hb_product_box::after{
  content: '';
  display: block;
  aspect-ratio: 2235 / 150;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
  position: absolute;
  bottom: 0;
  height: 75px; /* 固定 */
  width: 100%;
  z-index: 1;
}
@media screen and (max-width: 767px){
  .hb_product_box{
    width: 100%;
  }
}

/* .col2 */
.hb_product_col2_box{
  display: flex;
  justify-content:space-between;
  align-items: flex-start;
}
.hb_product_col2_box .hb_product_box{
  margin: 0;
  width: min(46.875vw, 750px); /* 1600px基準 */
}
@media screen and (max-width: 767px){
  .hb_product_col2_box{
    gap: var(--size-w-60);
    flex-direction: column;
  }
  .hb_product_col2_box .hb_product_box{
    width: 100%;
  }
}

/* .col1 */
.hb_product_box.col1{
  background-image: url(../img/bg_product_col1.webp);
}
.hb_product_box.col1::after{
  background-image: url(../img/bg_product_col1_bottom.webp);
}

/* .col2 */
.hb_product_box.col2{
  background-image: url(../img/bg_product_col2.webp);
}
.hb_product_box.col2::after{
  background-image: url(../img/bg_product_col2_bottom.webp);
}
@media screen and (max-width: 767px){
  .hb_product_box.col1,
  .hb_product_box.col2{
    background-image: url(../img/bg_product_sp.webp);
  }
  .hb_product_box.col1::after,
  .hb_product_box.col2::after{
    background-image: url(../img/bg_product_sp_bottom.webp);
  }
}

/* .product_inner */
.product_inner{
  padding: var(--size-product-30) var(--size-product-40) var(--size-product-40);
  position: relative;
  z-index: 10;
}
@media screen and (max-width: 767px){
  .product_inner{
    padding: var(--size-w-20) 2.564vw;  /* 390px基準 10px */
  }
}

/* .img_product */
.img_product{
  margin-bottom: var(--size-product-20);
}
.img_product img{
  margin: 0 auto;
}
.img_product_hb-bp01 img{
  width: min(38.125vw, 610px); /* 1600px基準 */
}
.img_product_hb-sd01 img,
.img_product_hb-sd02 img{
  width: min(18.063vw, 289px); /* 1600px基準 */
}
.img_product_hb-cardsleeve img{
  width: min(20.313vw, 325px); /* 1600px基準 */
}
@media screen and (max-width: 767px){
  .img_product{
    margin-bottom: var(--size-w-10);
  }
  .img_product_hb-bp01 img{
    width: min(74.359vw, 339px); /* 390px時 290px */
  }
  .img_product_hb-sd01 img,
  .img_product_hb-sd02 img{
    width: min(43.59vw, 198px); /* 390px時 170px */
  }
  .img_product_hb-cardsleeve img{
    width: min(46.154vw, 210px); /* 390px時 180px */
  }
}

/* .ttl_product_name */
.ttl_product_name{
  margin-bottom: var(--size-product-20);
}
.ttl_product_name img{
  margin: 0 auto;
  width: min(28.188vw, 451px); /* 1600px基準 */
}
@media screen and (max-width: 767px){
  .ttl_product_name{
    margin-bottom: var(--size-w-15);
  }
  .ttl_product_name img{
    width: min(77.067vw, 337px); /* 390px時　289px*/
  }
}

/* .txt_product_top */
.txt_product_top{
  margin-bottom: var(--size-product-20);
  text-align: center;
}
@media screen and (max-width: 767px){
  .txt_product_top{
    margin-bottom: var(--size-w-15);
  }
}

/* .link_product_box */
.link_product_box{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-product-40);
}
.btn_hb_pack, .btn_hb_box{
  width: min(20.5vw, 328px); /* 1600px基準 */
}
.btn_hb_mall{
  width: min(25.063vw, 401px); /* 1600px基準 */
}
@media screen and (max-width: 767px){
  .link_product_box{
    flex-direction: column;
    gap: 8px;
  }
  .btn_hb_pack, .btn_hb_box, .btn_hb_mall{
    width: min(65.897vw, 300px); /* 390px時 257px */
  }
}

/* .product_info_box */
.hb_accordion_content .product_info_box{
  margin-top: var(--size-product-20);
  margin-bottom: var(--size-product-20);
  text-align: center;
}
.hb_accordion_content .product_info_box p{
  font-size: 106%;
  margin-bottom: 0.5em;
}
.hb_accordion_content .product_info_box p:last-child{
  margin-bottom: 0;
}
@media screen and (max-width: 767px){
  .hb_accordion_content .product_info_box{
    margin-top: 1.5em;
    margin-bottom: 1.5em;
  }
}

/* deco_cloud */
.deco_cloud{
  position: absolute;
  display: block;
  z-index: 30;
}
.deco_cloud_a{
  width: min(11.375vw, 182px); /* 1600px基準 */
}
.deco_cloud_b{
  width: min(7vw, 112px); /* 1600px基準 */
}
@media screen and (max-width: 767px){
  .deco_cloud_a{
    width: var(--size-w-80);
  }
  .deco_cloud_b{
    width: var(--size-w-50);
  }
  .deco_cloud_c{
    width: min(16.667vw, 65px); /* 390px基準 */
  }
}

.deco_cloud_01{
  top: calc(var(--size-product-40) * -1);
  left: calc(var(--size-product-50) * -1);
}
.deco_cloud_02{
  top: min(33.125vw, 530px); /* 1600px基準 */
  left: calc(var(--size-product-20) * -1);
}
.deco_cloud_03{
  top: min(49.375vw, 790px); /* 1600px基準 */
  right: calc(var(--size-product-100) * -1);
}
@media screen and (max-width: 767px){
  .deco_cloud_01{
    top: calc(var(--size-w-20) * -1);
    left: calc(var(--size-w-10) * -1);
  }
  .deco_cloud_02{
    top: 87.179vw; /* 390px時 340px */
    left: calc(var(--size-w-10) * -1);
  }
  .deco_cloud_03{
    top: 123.077vw; /* 390px時 480px */
    right: calc(var(--size-w-20) * -1);
  }
}

.deco_cloud_04{
  top: calc(var(--size-product-40) * -1);
  left: calc(var(--size-product-50) * -1);
}
.deco_cloud_05{
  bottom: calc(var(--size-product-10) * -1);
  right: calc(var(--size-product-40) * -1);
}
@media screen and (max-width: 767px){
  .deco_cloud_04{
    top: calc(var(--size-w-20) * -1);
    left: calc(var(--size-w-10) * -1);
  }
  .deco_cloud_05{
    bottom: calc(var(--size-w-10) * -1);
    right: calc(var(--size-w-10) * -1);
  }
}

.deco_cloud_06{
  top: min(31.875vw, 510px); /* 1600px基準 */
  left: calc(var(--size-product-30) * -1);
}
.deco_cloud_07{
  top: var(--size-w-100);
  right: calc(var(--size-product-60) * -1);
}
@media screen and (max-width: 767px){
  .deco_cloud_06{
    top: 130.769vw; /* 390px時 510px */
    left: calc(var(--size-w-15) * -1);
  }
  .deco_cloud_07{
    top: var(--size-w-70);
    right: calc(var(--size-w-15) * -1);
  }
}

.deco_cloud_08{
  top: calc(var(--size-product-40) * -1);
  left: calc(var(--size-product-50) * -1);
}
.deco_cloud_09{
  top: min(33.125vw, 530px); /* 1600px基準 */
  left: calc(var(--size-product-20) * -1);
}
.deco_cloud_10{
  bottom: calc(var(--size-product-10) * -1);
  right: calc(var(--size-product-80) * -1);
}
@media screen and (max-width: 767px){
  .deco_cloud_08{
    top: calc(var(--size-w-20) * -1);
    left: calc(var(--size-w-10) * -1);
  }
  .deco_cloud_09{
    top: 84.615vw; /* 390px時 330px */
    left: calc(var(--size-w-10) * -1);
  }
  .deco_cloud_10{
    bottom: auto;
    top: 112.821vw; /* 390px時 440px */
    right: calc(var(--size-w-20) * -1);

  }
}


/* ------- .product_accordion_box ------- */
.product_accordion_box{
  position: relative;
  margin-top: var(--size-product-30);
}
.product_accordion_box .hb_accordion__item{
  position: relative;
  margin: 0 auto;
}
.hb_product_box.col1 .product_accordion_box .hb_accordion__item{
  width: min(53.75vw, 860px); /* 1600px基準 */
}
@media screen and (max-width: 767px){
  .product_accordion_box .hb_accordion__item{
    width: 96%;
  }
  .hb_product_box.col1 .product_accordion_box .hb_accordion__item{
    width: 96%;
  }
}

/* .hb_accordion_head */
.product_accordion_box .hb_accordion_head{
  position: absolute;
  bottom: min(0.25vw, 4px);
  left: 0;
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.85) 30%,
    rgba(255, 255, 255, 1) 70%,
    rgba(255, 255, 255, 1) 100%
  );
  padding-top: var(--size-product-40);
  padding-bottom: var(--size-product-15);
  transition: background 0.3s ease, position 0.3s ease;

  margin: 0 min(0.313vw, 5px);
  width: calc(100% - var(--size-product-10));
  z-index: 20;
}
.product_accordion_box .hb_accordion__item.is-open .hb_accordion_head{
  background: transparent;
  position: relative;
  padding-top: var(--size-product-25);
  padding-bottom: 0;
}
.product_accordion_box .hb_accordion_trigger{
  background: none;
  border: none;
  color: #000;
  cursor: pointer;
  display: block;
  font-weight: 500;
  outline: none;
  margin: 0 auto;
  line-height: 1.6;
  pointer-events: auto;
  position: relative;
  text-align: center;
  z-index: 10; 
}
.product_accordion_box .is-close-text {
  display: inline;
}
.product_accordion_box .is-open-text {
  display: none;
}
.product_accordion_box .hb_accordion__item.is-open .is-close-text {
  display: none;
}
.product_accordion_box .hb_accordion__item.is-open .is-open-text {
  display: inline;
}
.product_accordion_box .hb_accordion_mark{
  position: absolute;
  right: -1.25em;
  bottom: 5px;
  width: var(--size-product-16);
  height: var(--size-product-15);
  display: grid;
  place-items: center;
}
.product_accordion_box .hb_accordion_mark::before{
  content: "";
  aspect-ratio: 16 / 15;
  background: url("../img/icon_arrow.svg") no-repeat center / 100% auto;
  display: inline-block;
  width: 100%;

  transition: transform 0.3s ease;
}
.product_accordion_box .hb_accordion__item.is-open .hb_accordion_mark::before{
  transform: rotate(180deg);
}
@media screen and (max-width: 767px){
  .product_accordion_box{
    margin-top: var(--size-w-20);
  }
  .product_accordion_box .hb_accordion_head{
    bottom: 3px;
  
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.85) 30%,
      rgba(255, 255, 255, 1) 70%,
      rgba(255, 255, 255, 1) 100%
    );
    padding-top: 25px;
    padding-bottom: 10px;
  
    margin: 0 3px;
    width: calc(100% - 6px);
  }
  .product_accordion_box .hb_accordion__item.is-open .hb_accordion_head{
    padding-top: 15px;
    padding-bottom: 0;
  }
  .product_accordion_box .hb_accordion_mark{
    bottom: 3px;
    height: 12px;
    width: 12px;
  }
}

/* .hb_accordion_panel */
.product_accordion_box .hb_accordion_panel{
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  padding: min(0.313vw, 5px);
  margin: 0 auto;
}
.hb_product_box.col1 .product_accordion_box .hb_accordion_panel{
  background-image: url(../img/bg_accordion_pc_col1.webp);
}
.hb_product_box.col2 .product_accordion_box  .hb_accordion_panel{
  background-image: url(../img/bg_accordion_pc_col2.webp);
}
.product_accordion_box .hb_accordion_inner{
  height: min(8.438vw, 135px);
  overflow: hidden;
  background-color: rgba(255,255,255,.9);
  transition: height .3s ease;
}
.product_accordion_box .hb_accordion_content{
  opacity: 1;
  visibility: visible;
  padding: var(--size-product-20) min(1.375vw, 22px); /* 1600px基準 */
}

@media screen and (max-width: 767px){
  .product_accordion_box .hb_accordion_panel{
    padding: 3px;
  }
  .hb_product_box.col1 .product_accordion_box .hb_accordion_panel,
  .hb_product_box.col2 .product_accordion_box  .hb_accordion_panel{
    background-image: url(../img/bg_accordion_sp.webp);
  }
  .product_accordion_box .hb_accordion_inner{
    height: 95px; /* 固定 */
  }
  .product_accordion_box .hb_accordion_content{
    padding: 3.846vw; /* 390px基準 15px */
  }
}

/* .txt_release_date */
.txt_release_date{
  margin-bottom: var(--size-h-50);
}
.txt_release_date img{
  margin: 0 auto;
}
@media screen and (min-width: 768px) and (min-height: 501px){
  /* PC表示（高さ501px以上） */
  .txt_release_date img{
    height: min(7.222vh, 78px);
    width: auto;
  }

  /* ※ 横幅と高さの両方を見て、画像が画面からはみ出さない大きさを自動で選ぶ */
  /* .txt_release_date img{
    width: min(32.552vw, calc(7.222vh * 625 / 78), 625px);
  } */
}

@media screen and (orientation: landscape) and (max-height: 500px){
  /* SP横向き（高さ500px以下） */
  .txt_release_date{
    margin-bottom: var(--size-h-50);
  }
  .txt_release_date img{
    width: min(32.552vw, 625px); /* 1920px基準 */
  }
}
@media screen and (max-width: 767px){
    /* sp表示 */
    .txt_release_date{
      margin-bottom: var(--size-w-50);
    }
    .txt_release_date img{
      /* width: min(48.718vw, 190px); */
      width: min(61.538vw, 240px);
    }
}