@charset "utf-8";

/* ==========================================================================
   0. 変数定義 (Custom Properties)
   ========================================================================== */
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-navy: #191970;
  --color-gold: #FFD700;
  --color-silver: #BEBEBE;
  --color-red: red;
  --color-blue: #0693e3;
  --color-purple: #6442c0;
  --color-dark-purple: #594dc1;
  --color-gray-border: #c1c7c6;
  --color-overlay: rgba(30, 31, 49, 0.8);
}

/* ==========================================================================
   1. 基本・共通設定 (Global / Base)
   ========================================================================== */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

a {
  color: var(--color-black);
  text-decoration: none;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 250px;
}

body {
  font-family: "Public Sans", "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  color: var(--color-black);
  line-height: 1;
  background-color: var(--color-white);
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}

/* ==========================================================================
   2. トップ・メインビジュアル (Top / Hero Section)
   ========================================================================== */

.top {
  position: relative;
}

.top img {
  width: 100%;
  margin: auto;
  display: block;
}

.t-title {
  display: flex;
  align-items: baseline;
}

.top-t {
  margin: 0px 80px 20px 80px;
  font-size: 50px;
  font-weight: bold;
}

.top-sub {
  font-size: 25px;
  font-weight: bold;
}

.main-visual {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
}

/* スライドショー画像設定 */
.main-visual img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 画像の比率を保ったまま枠を埋める */
  opacity: 0;
  /* 初期状態は透明 */
  transition: opacity 1.5s ease-in-out;
  /* ふわっと変化させる設定 */
}

/* activeクラスがついている画像だけを表示する */
.main-visual img.active {
  opacity: 1;
  z-index: 1;
  /* 前面に持ってくる */
}

/* ==========================================================================
   3. アニメーション演出 (Animations)
   ========================================================================== */

/* 下から上へあがる演出の初期状態 */
.fade-up {
  opacity: 0;
  transform: translateY(100px);
  /* 100px下に配置 */
  transition: opacity 1.0s ease-out, transform 2.0s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
  /* 動作を滑らかにする */
}

/* 画面内に入った時の状態 */
.fade-up.is-active {
  opacity: 1;
  transform: translateY(0);
  /* 元の位置へ */
}

/* ==========================================================================
   4. 料金表 (Pricing Table - table_design13)
   ========================================================================== */

h1 {
  font-size: 40px;
  text-align: center;
  line-height: 3rem;
  font-weight: bold;
  margin: 30px;
}

.table_design13 {
  border-collapse: collapse;
  table-layout: fixed;
  width: 87%;
  font-weight: bold;
  text-align: center;
  margin: 0 auto;
}

.table_design13 thead {
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 1.4rem;
  padding: 1em;
}

.table_design13 thead th {
  padding: 1em .8em;
  border-right: 3px solid var(--color-white);
}

.table_design13 td {
  color: var(--color-black);
  padding: 1.5em;
}

.table_design13 tbody th,
.table_design13 tbody td {
  border: 3px solid var(--color-white);
  font-size: 16px;
}

.table_design13 tbody th {
  background-color: var(--color-gold);
}

.table_design13 tbody td {
  background-color: var(--color-silver);
}

@media screen and (max-width: 787px) {
  .table-scroll {
    overflow-x: auto;
  }
}

/* ==========================================================================
   5. 上映時間 (Screening Times)
   ========================================================================== */

.time {
  margin-top: 50px;
}

.kira {
  width: 70%;
  padding: 10px;
  margin: 0 auto;
  display: block;
}

.date {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 20px;
  font-size: 36px;
  font-weight: bold;
  border-bottom: 1px solid var(--color-black);
}

h3 {
  margin-top: 50px;
  font-size: 25px;
  text-align: left;
  margin-left: 80px;
  font-weight: bold;
}

h3 span {
  color: var(--color-red);
}

.container {
  display: flex;
  text-align: left;
  margin: 0px 50px 50px 50px;
}

.container img {
  width: 100%;
  border-radius: 30px;
}

/* コンテンツ幅の設定 */
.container .time1,
.time2 {
  width: 50%;
  padding: 30px;
}

.container .time3,
.time4,
.time5 {
  width: 33.3%;
  padding: 30px;
}

.t-main {
  margin: 20px 0;
  font-size: 20px;
}

.t-sub1 {
  font-size: 18px;
  line-height: 2rem;
  font-weight: bold;
}

.t-sub2 {
  font-size: 11px;
  line-height: 2rem;
  font-weight: bold;
}

/* 予約ボタン等のラベル */
.container span {
  padding: 10px;
  font-size: 16px;
  text-decoration: none;
  color: var(--color-white);
  background: var(--color-blue);
  border: solid 1px var(--color-white);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   6. 番組内容 (Program Details)
   ========================================================================== */

.program {
  margin-bottom: 100px;
}

.movie {
  display: flex;
  justify-content: center;
  align-items: center;
}

.movie img,
.text {
  width: 50%;
}

.text {
  padding: 50px;
}

.text p {
  margin: 10px 0px 10px 0px;
  line-height: 1.5rem;
}

.text .m-date {
  color: var(--color-purple);
}

h4 {
  font-size: 25px;
  padding: 25px 0;
}

/* ==========================================================================
   7. 楽しみ方 (Enjoyment Section)
   ========================================================================== */

.enjoy {
  margin-top: 120px;
  aspect-ratio: 4/3;
  background-image: url(../images/planetarium/e-hoshi.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  color: var(--color-white);
  padding-bottom: 25px;
  position: relative;
}

.enjoy .e-title {
  font-size: 40px;
  text-align: center;
  color: var(--color-white);
  font-weight: bold;
  margin: 0 auto;
  padding-top: 120px;
  padding-bottom: 80px;
  text-shadow: 0px 0px 16px var(--color-black), 0px 0px 8px var(--color-black);
}

.case {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 70px;
}

.case-even {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 70px;
}

.case img,
.text {
  width: 50%;
  max-width: 500px;
}

.case .e-text {
  width: 50%;
  padding: 50px;
  color: var(--color-white);
  text-shadow: 0px 0px 16px var(--color-black), 0px 0px 16px var(--color-black);
}

.e-text .e-main {
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 25px;
}

.e-text .e-sub {
  font-size: 16px;
  line-height: 3rem;
}

/* ==========================================================================
   8. 団体利用について (Group Info)
   ========================================================================== */

.g-title {
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  margin: 50px;
}

.group {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.group img,
.text {
  width: 50%;
}

.g-main {
  padding: 10px;
  font-size: 22px;
  line-height: 2.5rem;
  font-weight: bold;
}

.g-sub {
  line-height: 2.5rem;
  border: 1px solid var(--color-black);
  padding: 10px;
}

/* ==========================================================================
   9. 割引について (Discounts - table_design05)
   ========================================================================== */

.table_design05 {
  display: block;
  margin: 0 auto;
  border-collapse: collapse;
  width: 85%;
  font-size: 16px;
}

.table_design05 th,
.table_design05 td {
  padding: 16px;
  border-bottom: 1px solid var(--color-gray-border);
}

.table_design05 th {
  background-color: var(--color-dark-purple);
  color: var(--color-white);
  font-weight: bold;
  text-align: left;
}

.table_design05 td {
  position: relative;
}

.table_design05 td::after {
  content: "";
  background-color: var(--color-purple);
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
}

/* ==========================================================================
   10. レスポンシブ設定 (Responsive - max-width: 800px)
   ========================================================================== */

@media (max-width: 800px) {

  * {
    margin: 0;
    padding: 0;
  }

  /* トップ */
  .top {
    align-items: flex-start;
  }

  .main-visual {
    width: 100%;
    height: 300px;
  }

  .top img {
    width: 100%;
  }

  .top-t {
    margin: 0px 0px 0px 10px;
    font-size: 24px;
    text-align: center;
    line-height: 48px;
  }

  .top-sub {
    margin: 0;
    font-size: 14px;
    text-align: center;
    margin: 15px 0;
  }

  .absolute {
    position: absolute;
    left: 34px;
    bottom: -20px;
  }

  h1 {
    font-size: 24px;
    margin: 0;
  }

  /* 料金表レスポンシブ */
  .table_design13 {
    width: 100%;
  }

  .table_design13 thead {
    display: none;
  }

  .table_design13 td,
  .table_design13 th {
    display: block;
    width: 100%;
    border-bottom: none;
    padding: 20px;
    font-size: 16px;
    text-align: center;
  }

  .table_design13 tbody th,
  .table_design13 tbody td {
    border: 2px solid var(--color-white);
    text-align: center;
  }

  .table_design13 td {
    display: block;
    width: 100%;
    line-height: 2.5;
  }

  .table_design13 td:before {
    width: 30%;
    text-align: center;
    color: var(--color-white);
    content: attr(data-label);
    font-weight: bold;
    padding: 0px 10px;
    display: inline;
    background-color: var(--color-navy);
    float: left;
  }

  /* 上映時間レスポンシブ */
  .time {
    margin: 0;
  }

  .kira {
    width: 100%;
  }

  .date {
    font-size: 16px;
    margin: 20px;
    padding: 10px;
  }

  h3 {
    font-size: 16px;
    margin: 0;
    padding: 0;
    text-align: center;
  }

  .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
  }

  .container .time1,
  .container .time2,
  .container .time3,
  .container .time4,
  .container .time5 {
    width: 100%;
    margin: 10px auto;
    padding: 10px;
  }

  .container .t-sub1,
  .container .t-sub2 {
    margin: 0;
    font-size: 3.5vw;
  }

  /* 番組内容レスポンシブ */
  .program {
    width: 100%;
    margin: 0 auto;
  }

  .movie {
    display: flex;
    flex-direction: column;
  }

  .movie img,
  .text {
    width: 100%;
  }

  .text {
    padding: 20px;
  }

  h4 {
    font-size: 25px;
    text-align: center;
    padding: 0px 0px 10px 0px;
  }

  /* 楽しみ方レスポンシブ */
  .enjoy {
    width: 100%;
    margin: 0 auto;
    padding: 30px;
  }

  .enjoy .e-title {
    font-size: 25px;
    padding: 20px 20px 30px 20px;
  }

  .case {
    display: flex;
    flex-direction: column;
    margin: 0;
  }

  .case-even {
    display: flex;
    flex-direction: column-reverse;
  }

  .case img {
    width: 100%;
    margin: 0 auto;
  }

  .case .e-text {
    width: 100%;
    padding: 28px;
    margin: 10px 0px 0px 0px;
    text-align: center;
    line-height: 3.5rem;
    background-color: var(--color-overlay);
  }

  .case .e-text .e-main {
    font-size: 22px;
    margin: 0;
  }

  .case .e-sub {
    text-align: left;
    font-size: 12px;
  }

  /* 団体利用レスポンシブ */
  .g-title {
    font-size: 24px;
    margin: 30px;
  }

  .group {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    margin: 0;
  }

  .group img {
    width: 100%;
  }

  .g-main {
    font-size: 13px;
    margin: 0;
    padding: 20px;
    text-align: left;
  }

  .g-sub {
    font-size: 13px;
  }

  /* 割引レスポンシブ */
  .table_design05 {
    display: table;
    width: 100%;
    padding: 0;
    margin: 0 auto;
  }

  .table_design05 td::after {
    display: none;
  }

  .table_design05 th,
  .table_design05 td {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1rem;
  }

  .table_design05 td.none {
    display: none;
  }

  /* 改行制御用クラス */
  .k2::after,
  .k3::after,
  .k4::after {
    content: "\A";
    white-space: pre;
  }
}