@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(255,255,255,0.80) 50%, rgba(255,255,255,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_color1{
  border-top: 1px solid var(--line-main);
  background-image: linear-gradient(to bottom, rgba(209,171,29,0.86) 50%, rgba(209,171,29,0.70) 100%);
}
section.bg_color2{
  border-top: 1px solid var(--line-main);
  background-image: linear-gradient(to bottom, rgba(34,30,18,0.86) 50%, rgba(57,50,21,0.70) 100%);
}
section.bg_color3{
  border-top: 1px solid var(--line-main);
  background-image: linear-gradient(to bottom, rgba(219,216,208,0.86) 50%, rgba(231,229,222,0.70) 100%);
}
@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
========================= */

.info_box {
	width: 100%; max-width: 1100px; height: 380px; overflow: auto;
	margin: 0 auto;
  margin-top: 0px;
	margin-bottom: 0px;
}

.news-item {
  display: flex;
  align-items: flex-start;
  position: relative;
  padding-left: 120px; /* 日付分のスペース */
	border-bottom: 1px rgba(206,174,96,0.30) solid;
}

/* 日付 */
.divdate {
  color: #BE9A4B;
  position: absolute;
	font-family: serif;
  font-weight: 700;
  font-style: normal;
	font-size: 0.95em;
  left: 0px;
	top: 50%;
	transform: translateY(-50%);
  width: 120px;
  text-align: left;
	line-height: 1.45;
}

/* 縦線 */
.news-item::before {
  content: "";
  position: absolute;
  left: 90px; /* 日付の右端あたり */
  top: 2.2rem;
  bottom: 2.2rem;
  width: 1px;
  background: rgba(206,174,96,0.70);
}

/* 内容 */
.divinfo {
  flex: 1;
	padding: 2.2rem 10px 2.2rem 10px;
  color: #FFFFFF;
}
.divinfo a{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent:-999px;
}
.divinfo:hover{
  color: #E2D5AD;
  background-color: rgba(35,33,28,0.50);
}

/* スマホ表示（幅960px以下） */
@media (max-width: 960px) {
  .info_box {
    width: 100%; height: 380px; overflow: auto;
		margin-bottom: 25px;
  }
  .news-item {
    display: block;
    padding-left: 0;
		padding-top: 3rem;
  }

  .divdate {
    position: static;
    width: auto;
    text-align: left;
		padding-top: 0rem;
		top: 0rem;
    margin-bottom: 0.0rem;
  }

  .news-item::before {
    display: none;
  }

  .divinfo {
    padding: 0.0rem 10px 1.5rem 0px;
  }
}

/* =========================
   リンク色（サイト全体）
========================= */
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: #43250C; }
.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; }
}