@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDGothic:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=LINE+Seed+JP:wght@400&display=swap');


body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td { margin: 0; padding: 0;}
body { overflow-x: hidden;font-family:"BIZ UDGothic", "Helvetica Neue", "Helvetica", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif; font-variant-east-asian: proportional-width;/*  font-feature-settings: "palt"; */font-weight: 400;font-style: normal;}
ul { list-style: none; }
fieldset,img { border: 0; vertical-align: middle; }
a{color: #fff; text-decoration: none; transition: color 0.4s;}
a[href]:hover { color: #ffe400; }
.tuline { text-decoration: underline; }
img{ max-width:100%;}

.hop08:hover{ opacity: 0.8; }
.color_whi{ color:#fff;}
.color_red{ color:#e60012;}
.color_pink{ color: #ec6d74;}

.fsz85{font-size:85%;}
.fsz110{font-size:1.1em;}
.fsz120{font-size:1.2em;}
.fsz150{font-size:1.5em;}
.fsz180{font-size:1.8em;}
.fsz200{font-size:2em;}

.algin_center{text-align: center;}

.inner_ytbp{ position: relative; padding-bottom: 56.25%;  margin:1% 0 4% 0;}
.inner_ytbp iframe{ position: absolute; top: 0; left: 0; width: 100%;height: 100%; }

.an_scl{ opacity: 0; }
.pc_none{ display: none; }
.sp_none{ display: block; }

.wf-BIZ{ font-family: "BIZ UDGothic", sans-serif;}
.wf-Seed{ font-family: "LINE Seed JP", sans-serif;font-feature-settings: "palt";}

.ytb_mob{ padding:0 0 3% 0;width:900px; max-width: 100%; margin:0 auto;box-sizing: border-box;}
.ytb_inst{ width: 100%; padding-bottom: 52.6%; position: relative;}
.ytb_inst iframe{ position: absolute; top: 0; left:0; width: 100%; height: 100%; }

:root{
  --htf: 100px;
  --bdf: 0.2rem; /* body font size */
  --bgsize: 1.1; /* body bg */
  --conwidth:960px;
  --mcl:#e60012;
}



/******************************************************************/

html{ font-size:var(--htf);}
body {font-size: var(--bdf); line-height: 1.5; color: #fff;background: repeating-linear-gradient(-45deg,#f9e5e8 0,#f9e5e8 calc(var(--bgsize, 1) * 1.5px),#ffffff calc(var(--bgsize, 1) * 1.5px),#ffffff calc(var(--bgsize, 1) * 10.5px));    background-size:calc(var(--bgsize, 1) * 14.5px)calc(var(--bgsize, 1) * 44.5px);backface-visibility: hidden;}

.wbg{ position:fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; z-index: 1; pointer-events: none;
  transition: all 1s; display: none; }


/* menu */
header{ position: fixed; top: 0; left: 0; width: 100%; background: #000; z-index: 100; }
  .menumob{display: flex;align-items: center;justify-content: space-between;width: 960px; max-width: 100%;padding: 0.1rem 0;box-sizing: border-box; margin: 0 auto; }
    .menu_ins{display: flex; align-items: center; position: relative;padding-left: 10.4%;}
      .logo{ width:0.8rem; }
      .menuinner{ display: flex;align-items: center}
      .menuinner li{ height: 0.32rem; padding-left: 0.4rem;}
      .menuinner li a{ display: block; transition: all 0.4s; height: 100%;}
      .menuinner li a[href]:hover{opacity: 0.7;}
      .menuinner li img{max-height: 100%;}
      .menu_info{ font-size: 0.75em; line-height: 1.3;padding-right: 10.4%;}


.wrap{padding-top:1.35rem;}
  .topinfo{ width: var(--conwidth); max-width: 100%; margin: 0 auto; padding:0 0.2rem 0.55rem 0.2rem; box-sizing: border-box;}
  main{background-color:var(--mcl,#e60012); }
  .innermob02{width: var(--conwidth); max-width: 100%; margin: 0 auto;box-sizing: border-box; padding:0 0.5rem;}

    .mobin_pz{ width: var(--conwidth); max-width: 100%; margin: 0 auto;box-sizing: border-box; padding:0 0.3rem; }
    .cdconlist{display: flex;flex-direction: column}
      .flysc_01{ position: relative; top: -0.1rem;}
      .con_tmob01{ padding:0.7rem 0; width: 700px; max-width: 80%;margin: 0 auto;}
      .banmob{ display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
      .ban_inmob{--col:#fff; text-align: center; color:var(--col) ; font-size: 1.7em; line-height: 120%; letter-spacing: 0.15em; padding:0.63em 2.5em; border-radius: 40em; overflow: hidden; border:0.06rem solid var(--col); position: relative; width:23em;max-width: 90%; transition: background 0.4s;box-sizing: border-box;}
        .ban_icon{ position: absolute; top:50%; right:0.8em; width:1.5em; transform: translateY(-50%);}
      .ban_inmob[href]:hover{ background-color: #000; color: #fff;}
      .mobtitle{ width: calc(50% - 0.6rem); background-color: #fff; text-align: right; padding:0.12rem 0.13rem 0.1rem 0.13rem; margin-top: 1.2rem;box-sizing: border-box;}
      .mobtitle img{max-height:0.79rem;max-width:100% ;}
      .title_right{margin-left:calc(50% + 0.6rem); text-align:left;}
      .ban_cdmob{--bscl:#000; position: relative; padding:0.5rem 0.5rem 0 0.5rem; display: block;margin: 0.2rem 0 0.3rem 0; cursor: pointer;}
        .ban_cdmob[href]:hover{--bscl:rgba(0,0,0,0.6);}
        .con_number{ position: absolute; top: 0; left: 0; width:10.1%;z-index: 10;}
        .con_pic{ position: absolute;top: -0.3rem; right:8.889%; width: 35.22%; z-index: 10;}
        .con_inners{background-color: var(--bscl);padding: 6.25% 47.5% 3.75% 3.75%; position: relative;z-index: 3;transition: all 0.5s;}
          .ban_cdmob[href] .con_inners::after{content: "";position: absolute; right: -1em;top:calc(50% - 0.65em); width:0.85em;height: 1.3em; background: url("../svg/arrow-right.svg") 0 0 no-repeat; background-size: 100% auto; display: block;animation: iconright 1.5s linear infinite; }
          .con_tname{ color: #e60012; font-size:1.1em; line-height: 1.3; letter-spacing: 0.1em; padding:0 0 0 0.55rem;}
          .con_tcd{ color: #fff; font-size:1.8em; line-height: 1.3; padding:0.25rem 0 0.4rem 0.55rem;}
          .con_hushtag img{height: 1.35em; position: relative;}
          .icon_up{ position: relative;}
          .outsoon img{ opacity: 0.5;}
          .icon_up::before{ content: ""; position: absolute; bottom: 100%; left: 0; width: 100%; height: 0.8em; background: center 0 no-repeat; background-size: auto 0.7em; display: block;}
          .entriesopen::before{background-image: url("../images/icon-new.png") ;}
          .outsoon::before{background-image: url("../images/icon-soon.png") ;}

      .composition_mob{ padding: 0.5rem 0 1rem 0; }

      /* ── みんなの投稿：Masonry × 無限横スクロール ── */

      /* 画面幅100%に突き出す・高さは JS で確定後に設定 */
      .comp_masonry_outer{
        position: relative;
        left: 50%;
        margin-left: -50vw;
        width: 100vw;
        overflow: hidden;
      }
      /* ランナー：2グリッドを横並びで保持 */
      .comp_masonry_runner{
        display: flex;
        flex-direction: row;
        width: 200vw;   /* グリッド2枚分 */
      }
      /* アニメーション：JS(rAF)で制御 / ドラッグ可能 */
      .comp_masonry_outer{
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
      }
      .comp_masonry_outer.is-dragging{
        cursor: grabbing;
      }

      /* 各Masonryグリッド */
      .comp_masonry_grid{
        width: 100vw;
        flex-shrink: 0;
        position: relative; /* Masonry の position:absolute の基点 */
        overflow: hidden;
        height: 60vh;       /* ← vh / % など相対単位で自由に調整可 */
      }

      /* カラム幅の基準（Masonry の columnWidth に使用）*/
      .comp_masonry_sizer,
      .comp_masonry_item{
        width: 25%;      /* PC〜タブレット: 4列 */
        box-sizing: border-box;
        padding: 2px;
      }
      @media (max-width: 800px){
        .comp_masonry_sizer,
        .comp_masonry_item{ width: 33.333%; }  /* タブレット小: 3列 */
      }
      @media (max-width: 540px){
        .comp_masonry_sizer,
        .comp_masonry_item{ width: 50%; }      /* SP: 2列（大きめ） */
      }

      .comp_masonry_item{ position: relative; }

      .comp_masonry_link{
        display: block;
        position: relative;
        transition: opacity 0.3s;
        background: #1a1a1a;
        overflow: hidden;
      }
      .comp_masonry_link:hover{ opacity: 0.8; }
      .comp_masonry_link > img{
        width: 100%;
        height: auto;
        display: block;
        max-height: none;
      }

      /* プラットフォームバッジ */
      .comp_post_badge{ position: absolute; top: 0.1rem; right: 0.1rem; width: 2.2em; height: 2.2em; background: rgba(0,0,0,0.7); border-radius: 50%; padding: 0.2em; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
      .comp_post_badge img{ width: 100%; position: static; height: auto; display: block; max-height: none; }

      /* @keyframes は JS(rAF) で代替するため削除 */


/* guideline */
.page_guideline main{ padding: 0.5rem 0 0 0;}
  .lastmob_pd{ padding-bottom: 1.2rem;}
  .title_list{ width: 770px; max-width: 80%; margin: 0 auto;padding:0.4rem 0.6rem; box-sizing: border-box; border:0.04rem solid #fff; border-radius:0.2rem;}
  .guideline_title{text-align: center; font-size: 1.7em; line-height: 1; padding-bottom:0.23rem; margin-bottom: 0.23rem; border-bottom: 0.04rem solid #fff;}
  .bn_titlist{display: inline-block; padding-bottom:0.5em;}

  .titleline_mob{ background-color: #fff; padding:0.15rem 0;margin: 0.7rem 0 0.3rem 0;}
    .titleline{ display: flex; align-items: center; color: #000; font-size:1.4em; line-height:1.2;}
      .titleline_icon{ width: 0.9rem; height: 0.9rem; box-sizing: border-box; margin-right:0.2rem; padding:0.2rem;background-color: #000; border-radius: 3rem; display: flex; justify-items: center; align-items: center; }
  .guideline_contx{font-size:clamp(10px,0.85em,20px); line-height: 1.8;}
  .guideline_contx h5{font-size:1.25em;line-height:1.35;font-weight:700;color:#000;background-color:#fff;display:inline-block;padding:0.18rem 0.26rem 0.14rem 0.26rem;/*margin:0.7rem 0 0.22rem 0;*/border-left:0.12rem solid #000;box-sizing:border-box;}
  .guideline_contx h5:first-child{margin-top:0;}
  .guideline_contx p + h5{margin-top:0.5rem;font-family: "BIZ UDGothic", sans-serif;}
  .guideline_contx p{margin-top:0.18rem;font-family: "LINE Seed JP", sans-serif;}
  .indent{padding-left:1em;text-indent:-1em;}
  .indent-note{padding-left:1em;}


    .guideline_contx .step_title{font-size:1.25em;line-height:1.3;font-weight:700;color:#fff;background:transparent;display:block;padding:0 0 0 0.18rem;margin:0.55rem 0 0.12rem 0;border-left:0.08rem solid rgba(255,255,255,0.7);box-sizing:border-box;}
    .guideline_contx p + .step_title{margin-top:0.5rem;}

.guideline_contx .guide_codeblock{
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(0,0,0,0.18);
  padding: 0.22rem 0.24rem;
  margin: 0.18rem 0 0.3rem 0;
  border-radius: 0.08rem;
  box-sizing: border-box;
}
.guideline_contx .guide_codeblock p{
  margin-top: 0;
}
.guideline_contx .guide_codeblock p + p{
  margin-top: 0.22rem;
}

  .page .cdmob_inner{padding-bottom:1.2rem;}
    .title_cdinner{margin: 1rem 0.5rem 0.5rem 0.5rem; padding: 0.05rem 0.3rem;box-sizing: border-box; text-align: center;height: 0.72rem; background-color: #fff;}
    .title_cdinner img{max-height: 100%;}
    .banmob_lists a{ margin-bottom:0.4rem ;}
    .cdmob_sns{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding-top:0.2rem;}
      .snsup_tx{ width: 100%; text-align: center; color:#000; font-size: 1.5em; line-height: 1.1; padding-bottom:0.5em;}
      .cdmob_sns a[class^="sns_"]{ display: block; width: 6em; height: 6em; border-radius: 20em; overflow: hidden; background-color: #000;margin:0 1em;transition: all 0.4s;}
      .cdmob_sns a[class^="sns_"][href]:hover{background-color: #680000;}

    /* posts_view ナビ：現在表示中プラットフォームはhoverと同色 */
    .cdmob_sns a.sns_current{ background-color:#680000; }
    .cdmob_sns a.sns_current:hover{ background-color:#680000; }



/* ====================================================
   みんなの投稿 - post cards
   ==================================================== */
.posts_grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.25rem;
  padding: 0.3rem 0.1rem 0.5rem 0.1rem;
  width: 100%;
}

.post_card {
  display: block;
  background-color: #111;
  border-radius: 0.08rem;
  overflow: hidden;
  position: relative;
  transition: opacity 0.3s;
  text-decoration: none;
}
.post_card:hover { opacity: 0.75; }

/* サムネイル領域（16:9 横長・デフォルト） */
.post_thumb {
  position: relative;
  padding-bottom: 56.25%;
  background-color: #1a1a1a;
  overflow: hidden;
}
/* 縦長サムネイル用（TikTok 9:16） */
.post_thumb--vertical {
  padding-bottom: 177.78%;
}
.post_thumb img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* サムネイルなしのプラットフォームアイコン表示 */
.post_thumb_icon {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.post_thumb_icon img {
  width: 35%;
  max-width: 2rem;
  position: static;
  height: auto;
  opacity: 0.6;
}

/* プラットフォームバッジ（左下） */
.post_badge {
  position: absolute;
  bottom: 0.05rem;
  right: 0.05rem;
  width: 2em;
  height: 2em;
  background: rgba(0,0,0,0.7);
  border-radius: 50%;
  padding: 0.18em;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.post_badge img {
  width: 100%;
  position: static;
  height: auto;
  display: block;
}

/* 動画タイトル */
.post_title {
  padding: 0.2em 0.4em 0.3em 0.4em;
  font-size: 0.75em;
  line-height: 1.3;
  color: #eee;
}

/* YouTube・ニコ動はPC/SP問わず2列 */
.posts_grid.platform_youtube,
.posts_grid.platform_nicovideo {
  grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 600px) {
  .posts_grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* foot */
  .pgtp{ position: fixed; right: 0.3rem; bottom: 0.9rem; z-index: 20; width: clamp(40px,1rem,15%); display: none;}      
  .foot_infor{width: var(--conwidth); max-width: 90%; margin: 0 auto;box-sizing: border-box; text-align: center;}
    .ban_haruhitv_anniversary{display: inline-block;margin: 0.4rem 0 0.3rem 0; box-shadow: 0 0 0.1rem rgba(0,0,0,0.3);}
    .jasrac{ width:3.3rem; max-width: 50%;}
    .foot_logo{display: flex; flex-wrap: wrap; justify-content: center; align-items: center;margin:0.3rem 0 0.2rem 0;}
      .foot_logo a{margin: 0.1rem 0.2rem; transition: all 0.4s;}
      .foot_logo a[href]:hover{opacity: 0.6;}
      .foot_logo a img{max-height: 100%;}
      .ban_bandai{height:0.55rem;}
      .ban_lantis{height:0.36rem;}
      .ban_lscore{height:0.86rem;}
    .foot_copy{ text-align: center; background-color:#e60012;color: #000;font-size:clamp(10px, 0.6em, 16px); padding: 0.5rem 0.2rem; display: block;}

/* foot */


@keyframes iconright {
  0%{ transform: translateX(0); opacity: 0;}
  30%{ transform: translateX(0.1rem); opacity: 1;}
  100%{transform: translateX(0.2rem); opacity: 0;}

}

.fadeUp{ animation: fadeUp 0.5s both;}
@keyframes fadeUp {
  0%{ transform: translateY(0.5rem); opacity: 0;}
  100%{transform: translateY(0); opacity: 1;}

}
.fadeIn{ animation: fadeIn 0.5s ease-in-out both; }
@keyframes fadeIn {
  0%{opacity: 0;}
  100%{opacity: 1;}

}


@media screen and (max-width:960px) {
  /* .mobinbg{ width: calc(100% - 0.8rem); } */
  :root{
    --htf: 10.2vw;
  }

}


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

  :root{
    --bgsize: 0.8; /* body bg */
    /* --htf: 13.02vw; */
  }

  html,body{ width: 100%; overflow-x: hidden; }

  .pc_none{ display: block; }
  .sp_none{ display: none; }

}