@charset "UTF-8";
/* style.css（TOP専用：背景 / MV / セクション / NEWS / footer固定） */

/* =========================
   1) 全体背景（固定背景）
========================= */
main{ background: transparent; }

main.wrap::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;

  background-image: url("../common/back1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;

  will-change: transform;
}

@media (max-width: 960px){
  main{ background: url("../common/back_all_sp0.jpg") center top repeat; }
}

/* =========================
   2) TOP（メインビジュアル）
========================= */
/* header分 */
#main_vis_back{
  position: relative;
  padding-top: 80px;
}
@media (max-width:960px){
  #main_vis_back{ padding-top: 50px; }
}

/* ここが肝：背景を「画面中央」に固定して、縮小しない */
.mainvis_bg{
  position: relative;
  height: 1260px;          /* 背景の高さ */
  overflow: hidden;        /* はみ出しを隠す（センター見切り） */
}

/* 背景画像：1600px固定、常に中央 */
.mainvis_bg img{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1600px;           /* 縮小しない固定幅 */
  max-width: none;
  height: auto;
  display: block;
}

/* 中身：1100pxを上限にして、そこから下は可変
   ※ヘッダー分だけ下げる（ここが修正点） */
.mainvis_inner{
  position: absolute;
  left: 50%;
  top: 80px;               /* ← 0 → 80px に変更 */
  transform: translateX(-50%);
  width: 100%;
  max-width: 1100px;
  pointer-events: none;
}
@media (max-width:960px){
  .mainvis_inner{ top: 50px; }  /* ← SPも揃える */
}

/* 前面：935px中央、狭くなったら縮む */
.mainvis_front{
  display:block;
  width: 935px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  pointer-events: auto;
}

/* =========================
   3) セクション（TOP内）
========================= */
.top_mar{ margin-top: 80px; } /* header固定用 */
@media (max-width: 960px){
  .top_mar{ margin-top: 50px; }
}

section{
  margin: auto;
  padding: 70px 7% 90px;
}
section.bg_color{
  border-top: 1px #867E69 solid;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.50) 50%, rgba(0,0,0,0.00) 100%);
}
section.bg_color2{
  border-top: 1px #867E69 solid;
  background-image: linear-gradient(to bottom, rgba(97,67,21,0.15) 50%, rgba(97,67,21,0.00) 100%);
  margin-bottom: 5rem;
}
@media (max-width: 960px){
  section{ padding: 40px 7% 50px; }
}

/* コンテンツ幅（TOPで使う分だけ） */
.text__area{
  margin: 0 auto;
  width: 100%;
  max-width: 1100px;
  line-height: 1.8;
}

/* =========================
   4) キャッチ（TOPで使う分だけ）
========================= */
.catch_copy1{
  color: #FFFFFF;
  font-weight: 900;
  font-size: 3.6rem;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0 0 10px;
}
.catch_copy2{
  color: #FFFFFF;
  font-weight: 900;
  font-size: 4.3rem;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0 0 10px;
}
@media (max-width: 960px){
  .catch_copy1{ font-size: 2.4rem; margin: 6px 0; }
  .catch_copy2{ font-size: 3.0rem; margin: 6px 0; }
}

/* =========================
   5) NEWS（TOP専用）
========================= */
.info_box{
  width: 100%;
  max-width: 1100px;
  height: 380px;
  overflow: auto;
  margin: 0 auto;
}
.divdate{
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  text-align: center;
  width: 155px;
  padding: 3px 12px;
  margin-top: 30px;
  color: #FFFFFF;
  border-right: 1px #867E69 solid;
  border-bottom: 1px #867E69 solid;
  background-color: rgba(59,59,59,0.80);
}
.divinfo{
  position: relative;
  text-align: left;
  padding: 15px 10px 20px 15px;
  border-bottom: 1px #867E69 solid;
  line-height: 1.50;
}
.divinfo a{
  position: absolute;
  inset: 0;
  text-indent: -999px;
}
.divinfo:hover{
  color: #F3D6C2;
  background-color: rgba(255,255,255,0.06);
}
@media (max-width: 960px){
  .divdate{
    width: 120px;
    padding: 1px 3px;
    margin-top: 20px;
    font-size: 14px;
  }
  .divinfo{ padding: 12px 10px 16px; }
}

/* =========================
   6) リンク色（サイト全体）
   ※（componentsの変数を利用）
========================= */
a:link, a:visited{
  color: var(--accent1);
  text-decoration: none;
}
a:hover{
  color: var(--accent2);
  text-decoration: underline;
}

/* =========================
   7) フッター
========================= */
footer{
  border-top: 1px #867E69 solid;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.60) 50%, rgba(0,0,0,0.70) 100%);
  margin-top: 20px;
}
footer #ticket_btn{
  position: fixed;
  left: 0.7em;
  bottom: 0.7em;
}
footer #ticket_btn img{ width: 80%; }
footer #footer_items{
  padding: 3.5em 7% 3.5em;
  margin: 0 auto;
  text-align: center;
  font-size: 1.4rem;
  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  letter-spacing: 0.0rem;
}
.copyright1{ font-size: 1.55rem; color: #DEDEDE; }
.copyright2{ padding-top: 12px; font-size: 1.3rem; color: #CBCBCB; }

@media (max-width: 960px){
  footer #ticket_btn img{ width: 50%; }
  footer #footer_items{ padding: 2.5em 5% 2.2em; }
  .copyright1{ font-size: 1.2rem; }
  .copyright2{ padding-top: 7px; font-size: 1.0rem; }
}

/* =========================
   固定ボタン（TOPへ戻る）
========================= */
.pagetop{
  position: fixed;
  right: 17px;
  bottom: 17px;
  transition: .3s;
  opacity: 1;
  visibility: visible;
  z-index: 100;
}
.pagetop a{
  display: flex;
  width: 62px;
  height: 62px;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  transition: opacity .3s ease;
  border: 1px #867E69 solid;
  background-color: rgba(40,40,40,0.85);
  color: #fff;
  font-size: 34px;
  text-decoration: none;
}
.pagetop a:hover{ opacity: .7; }

/* =========================
   固定SNS（右下）
========================= */
.snsicon_x{
  position: fixed;
  right: 17px;
  bottom: 92px;
  transition: .3s;
  opacity: 1;
  visibility: visible;
  z-index: 100;
}
.snsicon_x a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 62px;
  height: 62px;
  border-radius: 100%;
  background-color: rgba(40,40,40,0.85);
  border: 1px #867E69 solid;
  transition: opacity .3s ease;
}
.snsicon_x a:hover{ opacity: .7; }

/* フッターロゴ */
.fotter_logo{ width: 130px; margin-bottom: 2rem; }

@media (max-width: 960px){
  .pagetop{ right: 14px; bottom: 14px; }
  .pagetop a{ width: 42px; height: 42px; font-size: 25px; }

  .snsicon_x{ right: 14px; bottom: 65px; }
  .snsicon_x a{ width: 42px; height: 42px; }

  .fotter_logo{ width: 90px; }
}