@charset "utf-8";

/* =========================================================
   COMMON (Header / Nav / PageTop / Footer)
========================================================= */
/* index.html（ホーム）だけ：ナビの視認性UP */
body.is-home #header{
 background: linear-gradient(
    to bottom,
    rgba(0,0,0,.55),
    rgba(0,0,0,.25),
    rgba(0,0,0,0)
  );
}

/* PC header nav */
#header nav ul{
  display:flex;
  justify-content:center;
}
#header nav ul li a{
  padding: 20px 35px 0;
}

/* underline (g-nav) */
#header #g-nav #g-navi a{ position: relative; }
#header #g-nav #g-navi a::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-4px;
  width:60%;
  height:1px;
  background:#eee;
  transform: translateX(-50%) scaleX(0);
  transform-origin:center;
  transition: transform .25s ease;
}
#header #g-nav #g-navi a:hover::after,
#header #g-nav #g-navi a:focus-visible::after{
  transform: translateX(-50%) scaleX(1);
}

/* fixed header motion */
#header{
  position: fixed;
  height: 60px;
  width: 100%;
   z-index: 999999 !important;
  display:flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding: 0;
}
#header.UpMove{ position:fixed; width:100%; animation: UpAnime .5s forwards; }
#header.DownMove{ position:fixed; width:100%; animation: DownAnime .5s forwards; }

@keyframes UpAnime{
  from{ opacity:1; transform: translateY(0); }
  to{ opacity:0; transform: translateY(-100px); }
}
@keyframes DownAnime{
  from{ opacity:0; transform: translateY(-100px); }
  to{ opacity:1; transform: translateY(0); }
}


/* =========================================================
   8) BUTTON / PAGE TOP
========================================================= */
.btnlinestretches2{
  position:relative;
  color:#eee;
  padding:5px 40px;
  display:inline-block;
  outline:none;
}
.btnlinestretches2::before,
.btnlinestretches2::after{
  content:'';
  position:absolute;
  border:solid #eee;
  width:10px;
  height:10px;
  transition: all .3s ease-in-out;
}
.btnlinestretches2::before{
  top:0; left:0;
  border-width:1px 0 0 1px;
}
.btnlinestretches2::after{
  bottom:0; right:0;
  border-width:0 1px 1px 0;
}
.btnlinestretches2:hover::before,
.btnlinestretches2:hover::after{
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border-color:#eee;
}

/* page top */
#page-top{
  position:fixed;
  right:10px;
  bottom:10px;
  z-index:2;
  opacity:0;
  transform: translateX(100px);
}
#page-top a{
  display:flex;
  justify-content:center;
  align-items:center;
  width:50px;
  height:50px;
  border:1px solid #adadad;
  color:#fff;
  text-transform: uppercase;
  font-size:0.6rem;
  transition: all .3s;background: rgba(0,0,0,0.5);
}
#page-top a:hover{ background:#777; }
#page-top span{
  display:inline-block;
  width:13px;
  height:13px;
  border-top:1px solid #fff;
  border-left:1px solid #fff;
  transform: rotate(45deg);
  margin: 8px 0 0 0;
}
#page-top.LeftMove{ animation: LeftAnime .5s forwards; }
#page-top.RightMove{ animation: RightAnime .5s forwards; }

@keyframes LeftAnime{
  from{ opacity:0; transform: translateX(100px); }
  to{ opacity:1; transform: translateX(0); }
}
@keyframes RightAnime{
  from{ opacity:1; transform: translateX(0); }
  to{ opacity:1; transform: translateX(100px); }
}

/* ============================
   LOGOS ONLY SPONCER
   PC: 4 columns / SP: stacked
============================ */
#logos-only{
  margin: 60px 0 0;
  padding: 60px 0;
  background:#fff;
}

.logosOnly__inner{
  width:min(1200px, 92%);
  margin:0 auto;
  text-align:center;
}

/* ===== メインスポンサー ===== */
.logosMain{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:80px;
}

.logosMain img{
  width:auto;
  height:50px;        /* 基準 */
  transition:.3s ease;
}
  .logosMain a:hover img{
opacity: .9;
transform: translateY(-2px);
  }



/* 個別微調整（ここを強い指定にする） */
.logosMain .logo-dassai{
  height:110px;
}

.logosMain .logo-kaneko{
  height:38px;
}
.logosMain .logo-francais{
  height:68px;
}
.logosMain .logo-geigeki{
  height:36px;
}

/* ====================
   SP
==================== */
@media (max-width:1024px){

  #logos-only{
    padding:40px 0;
  }

  .logosMain{
    flex-direction:column;
    gap:50px;
  }

  .logosMain img{
    height:80px;   /* ← PC150px → SPは縮小 */
  }
    
/* 個別微調整（ここを強い指定にする） */
.logosMain .logo-dassai{
  height:90px;
}

.logosMain .logo-kaneko{
  height:30px;
}
    
.logosMain.logo-kikakuseisaku{
  height:16px;
}
    
.logosMain .logo-geigeki{
  height:36px;
}
 
}/**/

/* =========================================================
   FOOTER
========================================================= */

#footer{
  color:#111;
  background:#ba8d2f;
  padding:30px 0; /* %やめる */
}

#footer .footerInner{
  max-width:1100px;
  width:100%;
  margin:0 auto;
  padding:0 20px;
  box-sizing:border-box;
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
}

#footer .footer-info{
  flex: 0 0 240px;  /* 300px確保して縮ませない */
  max-width:240px;
}

#footer .footer-logo{
  margin:0 0 10px 0;
}

#footer .footer-logo img{
  display:block;
  width:100%;
  height:auto;
}
#footer .follow{
  padding:0;
  margin:0;
}
#footer .follow ul {max-width: 200px;
  display: flex;
  gap: 40px; /* アイテム間の余白 */
  padding: 0;
  margin: 0;
  list-style: none;
    vertical-align: baseline;
}


#footer .copyright{
  font-size:0.7em;
  padding:20px 0 0 0;
}



/* =========================================================
   DETAIL PAGE theme base
========================================================= */

body.is-light{
  background:#f5f5f5;
  color:#111;
}

body.is-light #header{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,.08);
}




/* layout */

/* =========================================================
   SP & Tablet (<=1024px) : HEADER / NAV / FOOTER
========================================================= */
@media (max-width: 1024px){

  /* header motion off */
  #header,
  #header.UpMove,
  #header.DownMove{
    animation: none;
    height: auto;
    padding: 0;
    display: block;
  }

  /* nav layout */
  #header nav{ padding: 0; }
  #header nav ul{ display: block; }

  /* g-nav panel */
#g-nav{
  position: fixed;
  z-index: 999;
  top: -120%;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.8);
  transition: all .6s;

  /* ★追加 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 84px 0 120px;
  box-sizing: border-box;
}
  #g-nav.panelactive{ top: 0; }

  #g-nav.panelactive #g-nav-list{
  width: 100%;
  max-height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  }

#g-nav ul{
  width: min(420px, 90%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.2vh, 22px);
}
  #g-nav ul ul{ width: 100%; margin: 0; }

  #g-nav ul li.has-child ul{
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    visibility: visible;
    opacity: 1;
    display: none;
    transition: none;
    transform: none;
  }

  #g-nav li{ text-align: center;   /* 行間を作る */
  margin: 14px 0;}
  #g-nav li a{
    color: #aaa;
    display: block;
    text-transform: uppercase;
    font-weight: bold;
      padding: 12px 0;
  font-size: 18px;
  line-height: 1.25;

  /* ちょい上品に */
  letter-spacing: .08em;

  /* 反応 */
  transition: opacity .25s ease, transform .25s ease;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  }

    #g-nav li a:hover{
  opacity: .65;
  transform: translateX(4px);
}
    
    
  /* mobile dropdown */
  #g-nav ul li.has-child ul{ display: none; }
  #g-nav ul li.has-child.is-open > ul{ display: block; }

  /* hamburger */
  .g-nav-openbtn{
    display: block;
    position: fixed;
    z-index: 9999;
    top: 10px;
    right: 10px;
    cursor: pointer;
    width: 50px;
    height: 50px;  background: rgba(0,0,0,0.6);  /* ← 好きな濃さに */
  border-radius: 30px;          /* 角少し丸めるなら */
  }
  .g-nav-openbtn .openbtn-area{ transition: all .4s; }

  .g-nav-openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
    background: #fff;
    width: 45%;
        /* iOS Safari残像対策 */
  backface-visibility: hidden;
  transform: translateZ(0);
  }
  .g-nav-openbtn span:nth-of-type(1){ top: 15px; }
  .g-nav-openbtn span:nth-of-type(2){ top: 23px; }
  .g-nav-openbtn span:nth-of-type(3){ top: 31px; }

  /*.g-nav-openbtn.active .openbtn-area{ transform: rotateY(-360deg); }*/
  .g-nav-openbtn.active span:nth-of-type(1){
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-135deg);
    width: 30%;
  }
  .g-nav-openbtn.active span:nth-of-type(2){ opacity: 0; }
  .g-nav-openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(135deg);
    width: 30%;
  }

  /* nav underline */
  #header .nav01c li a{ position: relative; }
  #header .nav01c li.current a,
  #header .nav01c li a:hover{ color: #eee; }

  #header .nav01c li a::after{
    content: '';
    position: absolute;
    bottom: 16px;
    left: 25%;
    width: 50%;
    height: 1px;
    background: #eee;
    transition: all .3s;
    transform: scale(0,1);
    transform-origin: left top;
  }
  #header .nav01c li li a::after{ display: none; }

  #header .nav01c li.current a::after,
  #header .nav01c li a:hover::after{ transform: scale(1,1); }
  /* hidden attribute */
  #g-nav[hidden]{ display: none !important; }
    
    
    
    
  /* footer */


    #footer{

}

#footer .footerInner{
    flex-direction: column;   /* 縦積み */
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 30px;                /* ブロック間余白 */
}
    
  #footer .footer-info{
    flex: none;
    width:100%;
    max-width:240px; /* ロゴ */
  }

  #footer .footer-logo{display: block;
    margin:0 auto 15px;
  }

  #footer .follow{display: block;
    padding: 0;     margin: 0 auto;
    text-align: center;      
  }



}/**/

/* =========================================================
    pc/sp visibility 
========================================================= */

  .sp{ display: none !important; }
  .pc{ display: block !important; }


@media (max-width: 1024px){
  .pc{ display: none !important; }
  .sp{ display: block !important; }
}/**/



/* =========================================================
   Spacing utilities
========================================================= */
.mt-1, .pt-1 { padding-top: 0.5em; }
.mt-2, .pt-2 { padding-top: 1em; }
.mt-3, .pt-3 { padding-top: 1.5em; }
.mt-4, .pt-4 { padding-top: 2em; }
.mt-5, .pt-5 { padding-top: 2.5em; }

.mb-1, .pb-1 { padding-bottom: 0.5em; }
.mb-2, .pb-2 { padding-bottom: 1em; }
.mb-3, .pb-3 { padding-bottom: 1.5em; }
.mb-4, .pb-4 { padding-bottom: 2em; }
.mb-5, .pb-5 { padding-bottom: 2.5em; }

/* =========================================================
   SCROLL ANIM
========================================================= */
.anim-wrap{
  position: relative;
  overflow: hidden;
  opacity: 0;
  will-change: opacity;  
}
.anim-wrap.is-active{ animation: animWrapFade .8s ease forwards; }
@keyframes animWrapFade{ from{opacity:0;} to{opacity:1;} }

.js-scroll-expand-lr.is-active::before,
.js-scroll-expand-rl.is-active::before{
  content:"";
  position:absolute;
  inset:0;
  background-color:#111;
}
.js-scroll-expand-lr.is-active::before{ animation: bgLRAnime 1s forwards; }
.js-scroll-expand-rl.is-active::before{ animation: bgRLAnime 1s forwards; }

@keyframes bgLRAnime{
  0%{ transform-origin:left; transform:scaleX(0); }
  50%{ transform-origin:left; transform:scaleX(1); }
  50.001%{ transform-origin:right; }
  100%{ transform-origin:right; transform:scaleX(0); }
}
@keyframes bgRLAnime{
  0%{ transform-origin:right; transform:scaleX(0); }
  50%{ transform-origin:right; transform:scaleX(1); }
  50.001%{ transform-origin:left; }
  100%{ transform-origin:left; transform:scaleX(0); }
}

.js-scroll-fadein,
.js-scroll-expand-ud,
.js-scroll-expand-du,
.js-scroll-expand-rl,
.js-scroll-expand-lr{ opacity:0; }
.js-scroll-fadein.is-active,
.js-scroll-expand-ud.is-active,
.js-scroll-expand-du.is-active,
.js-scroll-expand-rl.is-active,
.js-scroll-expand-lr.is-active{ opacity:1; }

/* zoom link effect */
.zoomInRotate{ backface-visibility: hidden; }
.zoomInRotate img{ transform: scale(1); transition: .3s ease-in-out; }
.zoomInRotate a:hover img{ transform: rotate(5deg) scale(1.2); }

/* =========================================================
   Blur Fade-in (common)
========================================================= */
.js-blur-fade{
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);
  transition:
    opacity .7s ease,
    filter .9s ease,
    transform .7s ease;
  will-change: opacity, filter, transform;
}

/* 表示ON */
.js-blur-fade.is-active{
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
/* =========================================================
   floating
========================================================= */
.floating-ticket-wrap{
  position: fixed;
  right: 0;
  top: 0;
  z-index: 40;
}

.floating-ticket.vertical{
  writing-mode: vertical-rl;
  text-orientation: mixed;

  background:#000;
  color:#fff;
  text-decoration:none;

  padding:8px 10px;
  font-size:14px;
  letter-spacing:.12em;

  border-left:1px solid #fff;
  transition:.3s ease;

  display: inline-flex;
  gap: 10px;
}

/* 数字だけ「横書き」に戻して正立させる */
.floating-ticket.vertical .ft-date{
  writing-mode: horizontal-tb;
  transform: none;
  padding: 0;
  /*border: 1px solid currentColor;*/
  font-size: 12px;
}

/* 文言は縦のまま */
.floating-ticket.vertical .ft-text{
  display:inline-block; font-weight:600;
}

.floating-ticket.vertical:hover{
  background:#fff;
  color:#000;
}



/* =========================
   SP,tab横
========================= */
@media (max-width: 1200px){

  .floating-ticket-wrap{
    right:auto;
    left:10px;
    bottom:10px;
    top:auto;
  }

  .floating-ticket.vertical{
    writing-mode: horizontal-tb;
    flex-direction: row;
    gap:8px;

    padding:10px 14px;
    font-size:13px;

    border-left:none;
    border:1px solid #fff;
  }

  .floating-ticket .ft-date{
    font-size:13px;
  }

  .floating-ticket .ft-text{
    font-size:13px;
  }

}