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

/* =========================
   全体背景（固定背景）
========================= */
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; }
}

/* =========================
   TOP（メインビジュアル）
========================= */
#main_vis_back{
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-top: 80px; /* header分 */
  overflow: hidden;
  display: grid;
  place-items: center;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.80) 50%, rgba(0,0,0,0.60) 100%);
}

@media (max-width: 960px){
  #main_vis_back{
    padding-top: 60px; }
}
#main_vis_back{
  opacity: 0.5;
  animation: bgFadeIn 1.2s ease forwards;
}

@keyframes bgFadeIn{
  to{ opacity:1; }
}

.top_waku{
  width: 1100px;
  max-width: 100%;
  position: relative;
}

@media (max-width: 960px){
  .top_waku{
    width: 100%;
  }
}

.title_logo{
  opacity: 0;
  transform: translateY(30px);
  filter: blur(6px);
  animation: logoFadeIn 1.6s ease forwards;
  animation-delay: 0.5s;
}

@keyframes logoFadeIn{
  0%{
    opacity: 0;
    transform: translateY(40px);
    filter: blur(6px);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
.sp .title_logo{
  animation-duration: 1.2s;
}
.pc .title_logo{
  animation-delay: 0.7s;
}

/* =========================
   セクション（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 solid var(--line-main);
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.50) 50%, rgba(0,0,0,0.20) 100%);
}
section.bg_color2{
  border-top: 1px solid var(--line-main);
  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; }
}

/* コンテンツ幅 */
.text__area{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1100px;
  line-height: 1.8;
}

/* =========================
   Catch Copy
========================= */
.text__area .intro_catch img {
  display: block;
  margin: 0 auto;
}

.intro_catch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
}

.intro_catch__item {
  width: 100%;
  text-align: center;
}

.intro_catch__item picture,
.intro_catch__item img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

/* PC時に画像の実寸を保ちつつ中央配置したい場合 */
@media screen and (min-width: 960px) {
  .intro_catch__item img {
    width: auto;
    max-width: 100%;
  }
}

/* SP時 */
@media screen and (max-width: 959px) {
  .intro_catch {
    gap: 0px;
  }

  .intro_catch__item img {
    width: 100%;
    max-width: 100%;
  }
}

/* =========================
   SP調整
========================= */

@media (max-width: 960px){

  .catch_copy1{
    font-size: 2.3rem;
    margin: 1.3rem 0;
  }

  .catch_copy1 > span{
    display: block;
  }

  .catch_copy1 > span + span{
    margin-top: 0.15em;
  }

  .catch_copy1 .small2{
    display: inline;
  }
}

/* =========================
   NEWS
========================= */

.news_list{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-main);
}

.news_list li{
  border-bottom: 1px solid var(--line-main);
}

/* 初期：5件目以降は隠す（ぬるっと用） */
.news_list li:nth-child(n+5){
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(10px);
  transition: all .5s ease;
}

/* 展開時 */
.news_list.open li{
  max-height: 200px;
  opacity: 1;
  transform: translateY(0);
}

.news_list a{
  position: relative;
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 22px 20px 22px 10px;
  text-decoration: none;
  overflow: hidden;
  transition: padding-left .35s ease, color .35s ease, background-color .35s ease;
}

/* NEWS専用リンクカラー上書き */
.news_list a:link,
.news_list a:visited{
  color: var(--news-text);
}
.news_list a:hover{
	padding-right: 10px;
  padding-left: 20px;
  color: var(--news-hover-text);
  text-decoration: none;
	background-color: var(--news-hover-bg);
}

.news_list time{
  min-width: 140px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.03em;
  color: var(--accent3);
  text-decoration: none;
  flex-shrink: 0;
}
@media (min-width: 961px){
  .news_list time{
    transform: translateX(0.5em);
  }
}

.news_list span{
  flex: 1;
  line-height: 1.7;
  color: inherit;
}

/* NEWS内は hover時も下線なし */
.news_list a,
.news_list a:hover,
.news_list a time,
.news_list a:hover time,
.news_list a span,
.news_list a:hover span{
  text-decoration: none !important;
}

/* =========================
   SP対応
========================= */

@media (max-width: 960px){

  .news_list a{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px 10px;
  }

  .news_list a:hover{
    padding-left: 16px;
  }

  .news_list time{
    min-width: auto;
    font-size: 1.4rem;
  }

  .news_list span{
    font-size: 1.5rem;
    line-height: 1.7;
  }
}

/* =========================
   MOREボタン
========================= */

.news_more_btn{
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.news_more_btn button{
  background: none;
  border: none;
  color: var(--accent1);
  font-size: 1.4rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: .3s;
}

.news_more_btn button:hover{
  color: #ffffff;
}

/* =========================
   リンク色（サイト全体）
========================= */
a:link, a:visited{
  color: var(--accent1);
  text-decoration: none;
}
a:hover{
  color: var(--accent2);
  text-decoration: underline;
}

/* =========================
   フッター
========================= */
footer{
  border-top: 1px solid var(--line-main);
  background-image: linear-gradient(
    to bottom,
    var(--footer-grad-1) 50%,
    var(--footer-grad-2) 100%
  );
  margin-top: 0px;
}
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: var(--accent1); }
.copyright2{ padding-top: 12px; font-size: 1.3rem; color: var(--text-sub); }

@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 solid var(--line-sub);
  background-color: var(--fixed-btn-bg);
  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;
  width: 62px;
  height: 62px;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  transition: opacity .3s ease;
  border: 1px solid var(--line-sub);
  background-color: var(--fixed-btn-bg);
}
.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; }
}