:root {
  --color00--bk: #000;
  --color01--red: #b40926;/*メイン赤*/
  --color02--white: #f5f5f5 ;/*メイン白*/
  --color03--grayD: #444;/*灰濃い*/ 
  --color04--grayP: #808080;/*灰薄い*/ 
  --color05--bkP: #1a1a1a;/*黒薄い*/ 

  --space-unit: 4px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;/* ガター幅兼用 */
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-72: 72px;
  --space-96: 96px;
  --space-128: 128px;
  --space-176: 176px;
  --space-256: 256px;
  --container: 1200px; /* 全体幅（ガター含む） */
  --extend: 80px;

  /*n / 17*/
  --font-size-main: 17px;
  --font-size14: 0.823rem;
  --font-size20: 1.176rem;
  --font-size24: 1.411rem;
  --font-size32: 1.882rem;
  --font-size40: 2.352rem;

  --columns: 12;        /* 総カラム数 */
  --gutter-count: calc(var(--columns) - 1); /* 11本のガター */

  /* 実際の1カラムの幅（全体からガター引いた実幅 ÷ カラム数） */
  --col-1-width: calc((var(--container) - var(--space-24) * var(--gutter-count)) / var(--columns));

  /* カラム幅：ガターを足す */
  --col-2-width: calc(var(--col-1-width) * 2 + var(--space-24) * 1);
  --col-3-width: calc(var(--col-1-width) * 3 + var(--space-24) * 2);
  --col-4-width: calc(var(--col-1-width) * 4 + var(--space-24) * 3);
  --col-5-width: calc(var(--col-1-width) * 5 + var(--space-24) * 4);
  --col-6-width: calc(var(--col-1-width) * 6 + var(--space-24) * 5);
  --col-7-width: calc(var(--col-1-width) * 7 + var(--space-24) * 6);
  --col-8-width: calc(var(--col-1-width) * 8 + var(--space-24) * 7);
  --col-9-width: calc(var(--col-1-width) * 9 + var(--space-24) * 8);
  --col-10-width: calc(var(--col-1-width) * 10 + var(--space-24) * 9);
  --col-11-width: calc(var(--col-1-width) * 11 + var(--space-24) * 10);
  --col-12-width: calc(var(--col-1-width) * 12 + var(--space-24) * 11); /* = 1200px */
}



html {height: 100%;font-size: var(--font-size-main);-webkit-text-size-adjust: none;line-height: 1.6; }
body { overflow-x: hidden;font-family: "Noto Sans JP", sans-serif;color: var(--color02--white);font-weight: normal;}
img{width: 100%;height: auto;vertical-align: top;}
p{font-size: 1.0rem;line-height: 1.6;margin: 0;}
h1 {font-size: 48px;line-height: 1.25;margin: 0;}
h2 {font-size: 36px;line-height: 1.3;margin: 0;}
h3 {font-size: 22px;line-height: 1.4;margin: 0;}
h4 {font-size: 20px;line-height: 1.5;margin: 0;}

a {text-decoration: none; color: inherit;border: none;transition: 0.1s;display: block;}
a:hover{opacity: 0.85;transition: 0.2s;color: var(--color03--grayD);}
ul,ol {list-style: none;padding: 0;margin: 0;}
*,*::before,*::after {  margin: 0;padding: 0;box-sizing: border-box;}
body,h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd {  margin: 0;}

table,tr,td,th{ margin: 0;padding: 0;line-height: 1.0;border-collapse: collapse;text-align: center;}

.col-1 {width: var(--col-1-width);}
.col-2 {width: var(--col-2-width);}
.col-3 {width: var(--col-3-width);}
.col-4 {width: var(--col-4-width);}
.col-5 {width: var(--col-5-width);}
.col-6 {width: var(--col-6-width);}
.col-7 {width: var(--col-7-width);}
.col-8 {width: var(--col-8-width);}
.col-9 {width: var(--col-9-width);}
.col-10 {width: var(--col-10-width);}
.col-11 {width: var(--col-11-width);}
.col-12 {width: var(--col-12-width);}

/*共通汎用パーツ*/
.overWrap{background: #111;position: fixed;  z-index: -1;
  inset: 0;background: url("../img/img33.webp") no-repeat center center / cover;}
.overWrapCover{position: relative;}
.circle-btn {position: absolute;top: 50%;right: 10%;transform: translateY(-50%);
  border: 3px solid var(--color02--white);
  display: flex;align-items: center;justify-content: center;
  width: 240px;height: 240px;border-radius: 50%;
  font-size: 1.4rem;background: var(--color01--red);color: #fff;text-align: center;
  text-decoration: none;font-weight: bold;line-height: 1.4;
  box-shadow: 0 0 30px rgba(230, 0, 18, 0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;}
.circle-btn:hover {color: #fff;
    border: 5px solid var(--color02--white);
  transform: translateY(calc(-50% + 3px));
  box-shadow: 0 0 40px rgba(230, 0, 18, 0.9);}
.circle-btn:active {transform: translateY(calc(-50% + 10px));}
.mainContainer{margin: 0 auto;max-width:560px;background: var(--color00--bk);height: 100vh;
  overflow-y: auto;-ms-overflow-style: none; 
  scrollbar-width: none;
  box-shadow:
    0 0 8px  rgba(255, 0, 0, 0.4),
    0 0 20px rgba(255, 0, 0, 0.6),
    0 0 40px rgba(255, 0, 0, 0.4);}
.mainContainer::-webkit-scrollbar {display: none;}
.commonPad{padding: 0 32px;}
.common_sec_pad{padding-top: var(--space-64);padding-bottom: var(--space-64);}
.colorRed{color: var(--color01--red);}
.cta{width: 100%;background: var(--color01--red);font-size: 20px;font-weight: bold;padding:var(--space-24) 0;text-align:center; border-radius: var(--space-32);
  transition:
    background-color 0.3s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
    line-height: 1.5;}
.cta:hover {color: #fff;background: #de0b2f;
  transform: translateY(2px);box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5);}
.cta:active {transform: translateY(6px);box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);}
.fontB{font-weight: bold;}
.marginBottom_p{margin-bottom: 1.0rem;}
.common_headline{text-align: center;}
.common_headline h2 {position: relative;margin-bottom: var(--space-64);}
.common_headline h2::after {
  content: "";position: absolute;left: 50%;transform: translateX(-50%);bottom: -20px;width: 180px;height: 6px;
  background: linear-gradient(
    135deg,
    var(--color01--red) 0%,
    var(--color01--red) 30%,
    #4d4d4d 30%,
    #4d4d4d 100%
  );
}
.common_h3{text-align: center;}
.customFontA{font-family: "Bebas Neue", sans-serif;letter-spacing:0.03em;}



.header_content{background-image: url("../img/img32.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100% ;text-align: center;font-weight: bold;
padding-bottom: var(--space-16);padding-top: var(--space-64);margin-bottom: var(--space-32);}
.header_content .text01{font-size: 26px;margin-bottom: var(--space-16);}
.header_content .text02{font-size: 22px;margin-top: var(--space-32);margin-bottom: var(--space-16);line-height: 1.4;}
.header_content .text03{font-size: 74px;}
.header_content .text04{font-size: 22px;margin-top: var(--space-8);}
.header_content .day{font-size: 46px;}
.header_content p{line-height: 1.0;}
header ul{margin-top: var(--space-32);}
header li{padding-left: 1em;text-indent: -1em;margin-bottom: 0.7rem;line-height: 1.4;}
.heroHeader{margin-bottom: var(--space-64);}

.intro{padding-bottom: var(--space-64);}
.intro_image01 {text-align: center;margin-bottom: var(--space-12);}
.intro_image01 img{max-width: 272px;}
.intro-imageBox{display: flex;flex-direction: column;gap: var(--space-24);margin-top: var(--space-24);}
.intro-pass {position: relative;
  padding: var(--space-16) var(--space-24) var(--space-32) var(--space-24);
  border: 2px solid var(--color01--red);border-radius: var(--space-24);margin-top: var(--space-32);}
.intro-pass::before {content: "";position: absolute;top: -16px;left: 50%;transform: translateX(-50%);
  border-width: 0 16px 16px 16px;border-style: solid;
  border-color: transparent transparent var(--color01--red); transparent;}
.intro-pass::after {content: "";position: absolute;top: -14px;left: 50%;
  transform: translateX(-50%);border-width: 0 14px 14px 14px;border-style: solid;
  border-color: transparent transparent var(--color00--bk); transparent;}

.about{background: var(--color05--bkP);}
.about_image01{margin-bottom: var(--space-24);}
.about .common_h3 {margin-top: var(--space-64);margin-bottom: var(--space-24);}
.about-img02{margin-bottom: var(--space-24);}
.about-img04{margin-top: var(--space-24);}

.special .text001 {display: flex;align-items: center;justify-content: center;gap: var(--space-16); 
  color: var(--color01--red);font-weight: bold;font-size: 1.3rem;margin-bottom: var(--space-12);}
.special .text001::before,
.special .text001::after {
  content: "";flex: 1;height: 3px;background: var(--color01--red);}
.special .common_h3_left{margin-bottom: var(--space-24);}
.special-guestBlock{text-align: center;
background-image: url("../img/img12.png");
  background-repeat: no-repeat;background-position: center center;background-size: auto 100% ;margin-top: var(--space-48);
  margin-bottom: var(--space-32);}
.special-guestBlock_head{font-weight: bold;display: inline-block;padding: var(--space-8) var(--space-64);border-radius: var(--space-16);border:1px solid var(--color02--white);margin-bottom:var(--space-16);font-size:1.1rem; }
.special-guestBlock_image01{max-width: 304px;}
.special-guestBlock_image img{margin-bottom: var(--space-8);}
.special-guestBlock_name{font-weight: bold;font-size: 1.1rem;}
.special .cta_block{margin-top: var(--space-32);}
.special .cta_block .text01{color: var(--color01--red);text-align: center;font-weight: bold;margin-bottom: var(--space-16);}
.special-guestBlock_imageBox{display: flex;gap: var(--space-24);}
.special-blockWrap{display: flex;flex-direction: column;gap: var(--space-96);}

.gacha{background: var(--color03--grayD);}
.gacha-imageBlock {display: grid;grid-template-columns: repeat(2, 1fr);gap: var(--space-16);
  margin-top: var(--space-32);margin-bottom: var(--space-32);}

.direction .common_h3_left{margin-bottom: var(--space-24);}
.direction-imageBlock{margin-top: var(--space-48);}
.direction-imageBlockCmm{position: relative;}
.direction-imageBlockLabel{position: absolute;top: 32px;}
.direction-imageBlockLabel_right{right: 32px;}
.direction-imageBlockLabel_left{left: 32px;}
.direction-imageBlock_text01{background: var(--color00--bk);padding: var(--space-12) var(--space-32);position: relative;font-size: 1.1rem;font-weight: bold;}
.direction-imageBlock_text01::before {
  content: "";position: absolute;left: 0;top: 50%;
  transform: translateY(-50%);
  width: 10px;height: 100%;    background: var(--color01--red);border-radius: 2px;}

.faq{background: var(--color02--white);color: var(--color00--bk);}
.faq-block_container{display: flex;flex-direction: column;gap: var(--space-64);}
.faq-block_container p{font-size: 1.1rem;}
.faq-block_block{display: flex;flex-direction: column;gap: var(--space-8);}
.faq-block_top,.faq-block_bottom{display: flex;align-items: flex-start;
  gap: var(--space-12);}
.faq-block_top .left,.faq-block_bottom .left {
  width: 50px;  font-size: 20px;     
  flex-shrink: 0;font-weight: bold;color: #fff;padding: var(--space-8) var(--space-8) var(--space-16) var(--space-8);display: flex;justify-content: center;align-items: center;}
.faq-block_top .right,.faq-block_bottom .right {flex: 1;   }
.faq-block_top .left{background: var(--color00--bk);}
.faq-block_bottom .left{background: var(--color01--red);}
.faq-block_top .right{font-weight: bold;}

.access{background:#ccc;color: var(--color00--bk);}
.access .common_h3{margin-top: var(--space-72);margin-bottom: var(--space-16);}
.access a{text-decoration: underline;display: inline-block;}
.access-text01{font-weight: bold;font-size: 1.3rem;margin-bottom: var(--space-8);margin-top: var(--space-32);}
.access_tower{text-align: center;}
.access_tower img{max-width: 400px;}

footer{padding: var(--space-32);text-align: center;}


/*メディアクエリ チェックする代表的な幅の例
max-width: 1199px 1199px、1200px（直前直後）
max-width: 991px  991px、992px（直前直後）
max-width: 767px  767px、768px（直前直後）、480pxあたり（スマホ想定）
1320px以上 → 1319px → 1199px → 991px → 767px → 375px
*/




/* --- 1319px以下（ノートPC） */
@media (max-width: 1319px) {
 

}

/* --- 991px以下（タブレット） */
@media (max-width: 991px) {

  

}


/* --- 767px以下（スマホ） */
@media (max-width: 767px) {


:root {

  --space-unit: 4px;
  --space-4:calc(4px - (var(--space-unit) * 0)); 
  --space-8:calc(8px - (var(--space-unit) * 1)); 
  --space-12:calc(12px - (var(--space-unit) * 1)); 
  --space-16:calc(16px - (var(--space-unit) * 1)); 
  --space-24:calc(24px - (var(--space-unit) * 2)); 
  --space-32:calc(32px - (var(--space-unit) * 2)); 
  --space-48:calc(48px - (var(--space-unit) * 3)); 
  --space-64:calc(64px - (var(--space-unit) * 3)); 
  --space-72:calc(72px - (var(--space-unit) * 4)); 
  --space-96:calc(96px - (var(--space-unit) * 5)); 
  --space-128:calc(128px - (var(--space-unit) * 5));
  --space-176:calc(176px - (var(--space-unit) * 5)); 
  --space-256:calc(256px - (var(--space-unit) * 5)); 

  --extend: 8px;
  --container: calc(100% - (var(--extend) * 2));


}



html {height: 100%;font-size: var(--font-size-main);-webkit-text-size-adjust: none;line-height: 1.6; }
body { overflow-x: hidden;font-family: "Noto Sans JP", sans-serif;color: var(--color02--white);font-weight: normal;}
img{width: 100%;height: auto;vertical-align: top;}
p{font-size: 1.0rem;line-height: 1.6em;margin: 0;}
h1 {font-size: 22px;line-height: 1.25;margin: 0;}
h2 {font-size: 36px;line-height: 1.4;margin: 0;}
h3 {font-size: 19px;line-height: 1.4;margin: 0;}
h4 {font-size: 18px;line-height: 1.5;margin: 0;}


/*共通汎用パーツ*/
.overWrap{background: #111;position: fixed;  z-index: -1;
  inset: 0;background: url("../img/img33.webp") no-repeat center center / cover;}
.overWrapCover{position: relative;}
.circle-btn {position: absolute;top: 50%;right: 10%;transform: translateY(-50%);
  border: 3px solid var(--color02--white);
  display: flex;align-items: center;justify-content: center;
  width: 240px;height: 240px;border-radius: 50%;
  font-size: 1.4rem;background: var(--color01--red);color: #fff;text-align: center;
  text-decoration: none;font-weight: bold;line-height: 1.4;
  box-shadow: 0 0 30px rgba(230, 0, 18, 0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;display: none;}
.circle-btn:hover {color: #fff;
    border: 5px solid var(--color02--white);
  transform: translateY(calc(-50% + 3px));
  box-shadow: 0 0 40px rgba(230, 0, 18, 0.9);}
.circle-btn:active {transform: translateY(calc(-50% + 10px));}
.mainContainer{margin: 0 auto;max-width:560px;background: var(--color00--bk);height: 100vh;
  overflow-y: auto;-ms-overflow-style: none; 
  scrollbar-width: none;
  box-shadow:none;}
.mainContainer::-webkit-scrollbar {display: none;}
.commonPad{padding: 0 28px;}
.common_sec_pad{padding-top: var(--space-64);padding-bottom: var(--space-64);}
.colorRed{color: var(--color01--red);}
.cta{width: 100%;background: var(--color01--red);font-size: 19px;font-weight: bold;padding:var(--space-24) 0;text-align:center; border-radius: var(--space-32);
  transition:
    background-color 0.3s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
    line-height: 1.5;}
.cta:hover {color: #fff;background: #de0b2f;
  transform: translateY(2px);box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5);}
.cta:active {transform: translateY(6px);box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);}
.fontB{font-weight: bold;}
.marginBottom_p{margin-bottom: 1.0rem;}
.common_headline{text-align: center;}
.common_headline .text01{font-size: 0.9rem;}
.common_headline h2 {position: relative;margin-bottom: var(--space-64);font-size: 26px;}
.common_headline h2::after {
  content: "";position: absolute;left: 50%;transform: translateX(-50%);bottom: -20px;width: 180px;height: 6px;
  background: linear-gradient(
    135deg,
    var(--color01--red) 0%,
    var(--color01--red) 30%,
    #4d4d4d 30%,
    #4d4d4d 100%
  );
}
.common_h3{text-align: center;}
.customFontA{font-family: "Bebas Neue", sans-serif;letter-spacing:0.03em;}


.header_content{background-image: url("../img/img32.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100% ;text-align: center;font-weight: bold;
padding-bottom: var(--space-16);padding-top: var(--space-64);margin-bottom: var(--space-32);}
.header_content .text01{font-size: 17px;margin-bottom: var(--space-16);}
.header_content .text02{font-size: 16px;margin-top: var(--space-32);margin-bottom: var(--space-16);}
.header_content .text03{font-size: 54px;}
.header_content .text04{font-size: 16px;margin-top: var(--space-8);}
.header_content .day{font-size: 30px;}
.header_content p{line-height: 1.0;}
header ul{margin-top: var(--space-32);}
header li{padding-left: 1em;text-indent: -1em;margin-bottom: 0.7rem;line-height: 1.4;}

.intro{padding-bottom: var(--space-64);}
.intro_image01 {text-align: center;margin-bottom: var(--space-12);}
.intro_image01 img{max-width: 272px;}
.intro-imageBox{display: flex;flex-direction: column;gap: var(--space-24);margin-top: var(--space-24);}
.intro-pass {position: relative;
  padding: var(--space-16) var(--space-24) var(--space-32) var(--space-24);
  border: 2px solid var(--color01--red);border-radius: var(--space-24);margin-top: var(--space-32);}
.intro-pass::before {content: "";position: absolute;top: -16px;left: 50%;transform: translateX(-50%);
  border-width: 0 16px 16px 16px;border-style: solid;
  border-color: transparent transparent var(--color01--red); transparent;}
.intro-pass::after {content: "";position: absolute;top: -14px;left: 50%;
  transform: translateX(-50%);border-width: 0 14px 14px 14px;border-style: solid;
  border-color: transparent transparent var(--color00--bk); transparent;}
.intro-pass .image01{margin-bottom: 8px;}
.intro-pass .image01{margin-bottom: 12px;}

.about{background: var(--color05--bkP);}
.about_image01{margin-bottom: var(--space-24);}
.about .common_h3 {margin-top: var(--space-64);margin-bottom: var(--space-24);}
.about-img02{margin-bottom: var(--space-24);}
.about-img04{margin-top: var(--space-24);}

.special .text001 {display: flex;align-items: center;justify-content: center;gap: var(--space-16); 
  color: var(--color01--red);font-weight: bold;font-size: 1.1rem;margin-bottom: var(--space-12);}
.special .text001::before,
.special .text001::after {
  content: "";flex: 1;height: 3px;background: var(--color01--red);}
.special .common_h3_left{margin-bottom: var(--space-24);}
.special-guestBlock{text-align: center;
background-image: url("../img/img12.png");
  background-repeat: no-repeat;background-position: center center;background-size: 100% auto ;margin-top: var(--space-48);
  margin-bottom: var(--space-32);}
.special-guestBlock_head{font-weight: bold;display: inline-block;padding: var(--space-8) var(--space-64);border-radius: var(--space-16);border:1px solid var(--color02--white);margin-bottom:var(--space-16);font-size:0.95rem; }
.special-guestBlock_image01{max-width: 204px;}
.special-guestBlock_image img{margin-bottom: var(--space-8);}
.special-guestBlock_name{font-weight: bold;font-size:17px;line-height: 1.4;}
.special .cta_block{margin-top: var(--space-32);}
.special .cta_block .text01{color: var(--color01--red);text-align: center;font-weight: bold;margin-bottom: var(--space-16);}
.special-guestBlock_imageBox{display: flex;gap: var(--space-24);}
.special-blockWrap{display: flex;flex-direction: column;gap: var(--space-96);}

.gacha{background: var(--color03--grayD);}
.gacha-imageBlock {display: grid;grid-template-columns: repeat(2, 1fr);gap: var(--space-16);
  margin-top: var(--space-32);margin-bottom: var(--space-32);}

.direction .common_h3_left{margin-bottom: var(--space-24);}
.direction-imageBlock{margin-top: var(--space-48);}
.direction-imageBlockCmm{position: relative;}
.direction-imageBlockLabel{position: absolute;top: 32px;}
.direction-imageBlockLabel_right{right: 20px;}
.direction-imageBlockLabel_left{left: 20px;}
.direction-imageBlockLabel_left02{top: -12px;}
.direction-imageBlock_text01{background: var(--color00--bk);padding: var(--space-12) var(--space-32);position: relative;font-size: 0.9rem;font-weight: bold;}
.direction-imageBlock_text01::before {
  content: "";position: absolute;left: 0;top: 50%;
  transform: translateY(-50%);
  width: 10px;height: 100%;    background: var(--color01--red);border-radius: 2px;}


.faq{background: var(--color02--white);color: var(--color00--bk);}
.faq-block_container{display: flex;flex-direction: column;gap: var(--space-64);}
.faq-block_container p{font-size: 1.0rem;}
.faq-block_block{display: flex;flex-direction: column;gap: var(--space-8);}
.faq-block_top,.faq-block_bottom{display: flex;align-items: flex-start;
  gap: var(--space-12);}
.faq-block_top .left,.faq-block_bottom .left {
  width: 45px;  font-size: 18px;     
  flex-shrink: 0;font-weight: bold;color: #fff;padding: var(--space-8) var(--space-8) var(--space-16) var(--space-8);display: flex;justify-content: center;align-items: center;}
.faq-block_top .right,.faq-block_bottom .right {flex: 1;   }
.faq-block_top .left{background: var(--color00--bk);}
.faq-block_bottom .left{background: var(--color01--red);}
.faq-block_top .right{font-weight: bold;}

.access{background:#ccc;color: var(--color00--bk);}
.access .common_h3{margin-top: var(--space-72);margin-bottom: var(--space-16);}
.access a{text-decoration: underline;display: inline-block;}
.access-text01{font-weight: bold;font-size: 1.1rem;margin-bottom: var(--space-8);margin-top: var(--space-32);}
.access_tower{text-align: center;}
.access_tower img{max-width: 400px;}

footer{padding: var(--space-32);text-align: center;}


 }