/* 共通設定 (省略) */
#header,
.editMode #header,
#header .MegamenuPane,
#header .right .head_bottom,
.dnn_GlobalNaviPane,
.breadcrumb,
#main .pagetitle,
.contentBottom {
  display: none;
}
#ModuleContent {
  background-color: #c5c3c3;
}
footer#footer {
  z-index: 10;
}
.inner {
  padding: 0;
  width: auto;
}
#footer .inner {
  padding: 0 5.34%;
}
li {
  margin: 0;
}
p {
  line-height: 1.5;
  margin: 0;
}

html {
  /* ページ全体のスクロール動作をスムーズにする */
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background-color: #c5c3c3;
}
.main-title {
  text-align: center;
  font-size: 140px;
  color: #444;
  margin-top: 0px;
  margin-bottom: 0px;
  letter-spacing: 15px;
  font-family: 游明朝;
  text-shadow: 4px 6px 8px rgba(0, 0, 0, 0.4);
}
.sub-title {
  text-align: center;
  font-size: 2em;
  color: #c9006b;
  font-weight: bold;
  margin-bottom: 0px;
  margin-top: -15px;
  letter-spacing: 2px;
}
.intro-text {
  font-size: 1em;
  max-width: 600px;
  margin: 4% auto 0;
  text-align: left;
  line-height: 20px;
}
.header-contents a {
  position: relative;
  display: block;
  margin-top: 20px;
}
.header-contents a::before {
  content: "";
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
  bottom: inherit;
  right: 0;
  left: 173px;
  display: block;
  width: 10px;
  height: 12px;
  background: url(/Portals/0/images/new/common/ico_new_arrow_right.png)
    no-repeat center / contain;
  z-index: 1;
}

.header-background {
  position: relative;
  height: 663px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #000000;
}
.header-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 110%;
  /* varの第2引数に1枚目のパスを直接書く（JSが動くまでの保険） */
  background-image: var(
    --bg-image,
    url(/Portals/0/images/70th-anniversary/header/70th_header_01.png)
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 2s ease-in-out;
  z-index: 0;
}
.header-logo {
  position: absolute;
  top: 20px;
  left: 3%;
  width: 100%;
}
.header-logo img {
  width: 15%;
  margin-top: 0;
  left: 3%;
}
.header-contents {
  position: relative;
  margin: 0;
  width: 90%;
  max-width: none;
}
.background-square {
  background-color: rgba(255, 255, 255, 0.8);
  margin: auto;
  padding-bottom: 30px;
  position: inherit;
  max-width: 1100px;
}

.background-img-1949,
.background-img-1950,
.background-img-1960,
.background-img-1970,
.background-img-1980,
.background-img-1990,
.background-img-2000,
.background-img-2010,
.background-img-2020 {
  position: relative;
}
.background-img-1949::before,
.background-img-1950::before,
.background-img-1960::before,
.background-img-1970::before,
.background-img-1980::before,
.background-img-1990::before,
.background-img-2000::before,
.background-img-2010::before,
.background-img-2020::before {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  top: 180px;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  background-position: 60% 20px;
}
.background-img-1949::before {
  background-image: url();
}
.background-img-1950::before {
  background-image: url(/Portals/0/images/70th-anniversary/01.高周波ウェルダー.png);
  background-size: 70% auto;
}
.background-img-1960::before {
  background-image: url(/Portals/0/images/70th-anniversary/02.超音波溶着機.png),
    url(/Portals/0/images/70th-anniversary/04.インパルスウェルダー.png);
  background-position: left 10% top 0%, right 10% top 25%;
  background-size: 50% auto, 30% auto;
}
.background-img-1970::before {
  background-image: url(/Portals/0/images/70th-anniversary/05.高周波誘導加熱装置.png),
    url(/Portals/0/images/70th-anniversary/12.炭酸ガスレーザ発振器_250W.png);
  background-position: left 14% top 0%, right 10% top 15%;
  background-size: 25% auto, 50% auto;
}
.background-img-1980::before {
  background-image: url(/Portals/0/images/70th-anniversary/13.炭酸ガスレーザ_LASUC-3000.png);
  background-size: 50% auto;
}
.background-img-1990::before {
  background-image: url(/Portals/0/images/70th-anniversary/08.超音波_Σ.png),
    url(/Portals/0/images/70th-anniversary/14.布線機_モノクロ.png);
  background-position: left 70% top 0%, right 10% bottom 30%;
  background-size: 30% auto, 35% auto;
}
.background-img-2000::before {
  background-image: url(/Portals/0/images/70th-anniversary/15.Σメタルプレス（モノクロ）.png),
    url(/Portals/0/images/70th-anniversary/16.Dシグマ.png);
  background-position: left 50% top 0%, right 10% bottom 30%;
  background-size: 40% auto, 35% auto;
}
.background-img-2010::before {
  background-image: url(/Portals/0/images/70th-anniversary/17.切り抜きJII24x0_JⅡP80S（3Dmodel）-R.png);
  background-size: 70% auto;
}
.background-img-2020::before {
  background-image: url(/Portals/0/images/70th-anniversary/18.切り抜き_J2MP12020M_モノクロ.png);
  background-position: left 60% top -10%;
  background-size: 30% auto;
}

/* --- 期間バー (横軸年表) --- */
/* ナビゲーションコンテナ */
.timeline-nav-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 40px 20px 20px;
}
.timeline-nav {
  position: relative; /* ::beforeの配置基準にするため追加 */
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
.timeline-nav li {
  position: relative;
  padding: 2px 10px;
  flex-grow: 1; /* 幅を均等に広げる */
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  text-align: end;
}
.nav-item a {
  color: inherit;
  text-decoration: inherit;
}
/* 矢羽根の色定義 */
.color-white {
  background-color: #f0f0f0;
  color: #666;
}
.color-offwhite {
  background-color: #e6e6e6;
  color: #666;
}
.color-pink {
  background-color: #e597af;
  color: #666;
}
.color-gray {
  background-color: #cccbcb;
  color: #fff;
}
.color-gray-light {
  background-color: #b0b0b0;
  color: #fff;
}
.color-gray-medium {
  background-color: #888;
  color: #fff;
}
.color-gray-dark {
  background-color: #666;
  color: #fff;
}
.color-dark-gray {
  background-color: #444;
  color: #fff;
}
.color-black {
  background-color: #222;
  color: #fff;
}
/* 矢羽根のくぼみと斜め線を作る ::after */
.timeline-nav li::after {
  content: "";
  position: absolute;
  top: 0;
  right: -15px; /* liからはみ出す長さ */
  width: 0;
  height: 0;
  /* 三角形の定義 */
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 15px solid;
  border-left-color: inherit;
  z-index: 2;
  color: #fff;
}
/* 境界線の重なりと次のタブの見た目調整 ::before */
.timeline-nav li::before {
  content: "";
  position: absolute;
  top: 0;
  right: -14px;
  width: 0;
  height: 0;
  /* 境界の隙間を埋めるための三角形 */
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  z-index: 3; /* afterより上に配置 */
}
.timeline-nav .color-white::before {
  border-left: 15px solid #f0f0f0;
}
.timeline-nav .color-offwhite::before {
  border-left: 15px solid #e6e6e6;
}
.timeline-nav .color-pink::before {
  border-left: 15px solid #e597af;
}
.timeline-nav .color-gray::before {
  border-left: 15px solid #cccbcb;
}
.timeline-nav .color-gray-light::before {
  border-left: 15px solid #b0b0b0;
}
.timeline-nav .color-gray-medium::before {
  border-left: 15px solid #888;
}
.timeline-nav .color-gray-dark::before {
  border-left: 15px solid #666;
}
.timeline-nav .color-dark-gray::before {
  border-left: 15px solid #444;
}
.timeline-nav .color-black::before {
  border-left: 15px solid #222;
}
/* 親要素の疑似要素で「背景色と同じ色の三角形」を作り、左端に乗せる */
.timeline-nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  /* li::after の形状とサイズを合わせる */
  border-top: 16px solid transparent;
  border-bottom: 15px solid transparent;
  /* ★重要★ ここをページの背景色と同じにする（これでくぼんで見える） */
  border-left: 15px solid #c5c3c3;
  z-index: 10; /* liより手前に表示する */
}
/* 最初の項目の左パディングを増やして、文字位置を調整する */
.timeline-nav li:first-child {
  /* 元の padding: 5px 10px; の左側を増やす */
  padding-left: 10px;
}
.nav-item a:hover {
  /* color: #aa0061;
  text-decoration: underline; */
  filter: brightness(70%);
}

/* --- タイムライン本体のコンテナ --- */
.timeline-container {
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
  background-color: #c5c3c3;
  max-width: 1100px;
}

/* PRODUCT / COMPANY ヘッダー */
.timeline-header {
  display: flex;
  position: relative;
  width: 100%;
  margin-bottom: 0;
  justify-content: center;
  gap: 40px;
  z-index: 1;
}
.header-left,
.header-right {
  width: 50%;
  text-align: center;
  font-size: 1.2em;
  padding: 10px 0;
  font-weight: bold;
  position: relative;
  line-height: 1.5;
}
.header-left {
  color: #ffffff;
  background-color: #aa0061;
}
.header-right {
  color: #000000;
  background-color: #dedfe1;
}

/* タイムライン本体（イベントと線） */
.timeline-body {
  position: relative;
  padding-top: 30px; /* 最初のイベントの上のスペース */
}

/* 縦線（基準線）2本 */
.timeline-line {
  position: absolute;
  width: 4px; /* 基準線の太さ */
  top: 45px;
  bottom: 0;
}
.product-line {
  left: calc(90% - 20px);
  background-color: #dedfe1;
  z-index: 1;
}
.company-line {
  left: calc(10% + 20px);
  background-color: #aa0061;
  z-index: 1;
}

/* --- 各イベントアイテム --- */
.flexbox-height {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  flex-direction: row-reverse;
}
.timeline-item.product-lane.single-event-point.right-group {
  display: flex;
  flex-direction: column;
  width: 35%;
}
.timeline-item.company-lane.single-event-point.left-group {
  display: flex;
  flex-direction: column;
  width: 35%;
  z-index: 1;
}
.large-event-block .zoom-icon.r-20 {
  right: -20px;
}
.mt-3 {
  margin-top: 3%;
}
.mt-10 {
  margin-top: 10%;
}
.mt-20 {
  margin-top: 20%;
}
.mt-30 {
  margin-top: 30%;
}
.mt-40 {
  margin-top: 40%;
}
.mt-50 {
  margin-top: 50%;
}
.mt-70 {
  margin-top: 70%;
}
.timeline-item.mb-3 {
  margin-bottom: 3%;
}
.timeline-item.mb-10 {
  margin-bottom: 10%;
}
.timeline-item {
  position: relative;
  width: 100%;
  clear: both;
  margin-bottom: 10px; /* 適切な間隔を空ける */
  z-index: 2;
}
.event-content {
  position: relative;
  /*width: 100%;*/
  display: flex; /* イベントの配置のためにflexを使用 */
}
.event-content-right,
.event-content-left {
  box-shadow: 4px 6px 8px rgba(0, 0, 0, 0.3);
  opacity: 0.8;
}
.event-content-left {
  left: calc(30% + 30px);
}
.event-content-right {
  margin-left: auto;
  right: calc(30% + 30px);
}

/* --- 新しく追加する横線のCSS --- */
.timeline-horizontal-right {
  position: absolute;
  z-index: 0;
  background-color: #ffffff;
  height: 2px;
  top: 50%;
  right: calc(30% + 5px);
  width: 25px;
}
.timeline-horizontal-left-grey {
  position: absolute;
  z-index: 0;
  background-color: #a6a6a6;
  height: 2px;
  top: 50%;
  left: calc(30% + 5px);
  width: 25px;
}
.timeline-horizontal-left-black {
  position: absolute;
  z-index: 0;
  background-color: #000000;
  height: 2px;
  top: 50%;
  left: calc(30% + 5px);
  width: 25px;
}
.timeline-horizontal-left-purple {
  position: absolute;
  z-index: 0;
  background-color: #aa0061;
  height: 2px;
  top: 50%;
  left: calc(30% + 5px);
  width: 25px;
}

/* ドットのスタイル */
.timeline-dot {
  position: absolute;
  z-index: 2;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  top: 50%; /* 親要素(event-content)内で中央寄せ */
  transform: translate(-100%, -40%);
}
.dot-white {
  background-color: #fff;
  transform: translate(110%, -7px);
}
.dot-grey {
  background-color: #a6a6a6;
  transform: translate(90%, -7px);
}
.dot-black {
  background-color: #000;
  transform: translate(90%, -7px);
}
.dot-purple {
  background-color: #aa0061;
  transform: translate(90%, -7px);
}
.product-lane .timeline-dot {
  right: calc(30% + 14px);
}
.company-lane .timeline-dot {
  left: calc(30% - 13px);
}

/* --- COMPANYレーン (右側) --- */
.company-lane {
  /* COMPANYレーンのイベントは右寄せ */
  justify-content: flex-start;
}

/* 1950-1955などの大きなブロック */
.large-event-block .event-box {
  padding: 10px 0;
  margin: auto;
  position: relative;
}
.large-event-block .large-year {
  font-size: 4.5em;
  color: #a99735;
  margin: 0;
  font-weight: bold;
  text-align: center;
}
.large-event-block .large-title {
  font-size: 1.7em;
  color: #5f5d5d;
  font-weight: bold;
  line-height: 1.2;
  margin: 0;
  text-align: center;
}
.large-event-block .title.large-title.pt-10 {
  padding-top: 10px;
}
.large-event-block .zoom-icon {
  transform: translateY(-50%);
  right: 0px;
}
.background-img-1949 .zoom-icon {
  display: none;
}
.background-img-1960 .large-event-block .zoom-icon {
  transform: translate(20px, -50%);
}
.background-img-1949 .detail-1949 {
  margin: auto;
  max-width: 540px;
  font-size: 14px;
  color: #5f5d5d;
  line-height: 1.5;
}

/* --- PRODUCTレーン (左側) --- */
.product-lane {
  /* PRODUCTレーンのイベントは左寄せ */
  justify-content: flex-end;
}
.product-lane .event-year-label {
  position: absolute;
  font-size: 1.5em;
  font-weight: bold;
  color: #c9006b;
  top: 25px;
  left: calc(50% - 70px); /* PRODUCT基準線より左 */
  z-index: 5;
}

/* エピソードボックス */
.episode-box-black {
  position: relative;
  background-color: #000000;
  padding: 10px;
  text-align: left;
}
.episode-box-grey {
  position: relative;
  background-color: #a6a6a6;
  padding: 10px;
  text-align: left;
  align-items: center;
  display: flex;
}
.episode-box-white {
  position: relative;
  background-color: #ffffff;
  padding: 10px;
  text-align: left;
}
.episode-box-purple {
  position: relative;
  background-color: #aa0061;
  padding: 10px;
  text-align: left;
}
/* その他のエピソードボックスのスタイル（省略） */
.episode-box-black .episode-title {
  color: #ffffff;
  font-weight: bold;
  font-size: 0.9em;
  margin: 0;
}
.episode-box-grey .episode-title {
  color: #000000;
  font-weight: bold;
  font-size: 0.9em;
  margin: 0;
}
.episode-box-white .episode-title {
  color: #000000;
  font-weight: bold;
  font-size: 0.9em;
  margin: 0;
  border-bottom: 1px solid #d9d9d9;
  padding-bottom: 5px;
}
.episode-box-purple .episode-title {
  color: #ffffff;
  font-weight: bold;
  font-size: 0.9em;
  margin: 0;
}
.episode-content > p {
  padding: 10px;
}
.episode-box-black .episode-content > p {
  color: #ffffff;
  font-size: 0.75em;
  font-size: 0.9em;
  line-height: 1.4;
}
.episode-box-grey .episode-content > p {
  color: #000000;
  font-size: 0.75em;
  font-size: 0.9em;
  line-height: 1.4;
}
.episode-box-white .episode-content > p {
  color: #000000;
  font-size: 0.75em;
  font-size: 0.9em;
  line-height: 1.4;
}
.episode-box-purple .episode-content > p {
  color: #ffffff;
  font-size: 0.75em;
  font-size: 0.9em;
  line-height: 1.4;
}

.episode-title {
  display: flex;
  align-items: center;
}
.episode-title p:first-of-type {
  font-size: 22px;
}
.episode-title.fs16 p:first-of-type {
  font-size: 14px;
}
.episode-title p {
  margin: 0 7px;
  font-size: 13px;
}
.episode-title span {
  display: block;
  width: 2px;
  height: 1.5em;
  background-color: #333;
}
.episode-title .color-white {
  background-color: #fff;
}
.episode-title .fs16 {
  font-size: 16px;
}

/* --- ポップアップ/モーダルウィンドウのスタイル (省略) --- */
.zoom-icon {
  position: absolute;
  cursor: pointer;
  color: #5f5d5d;
  font-size: 1em;
}
.zoom-icon:hover {
  color: #aa0061;
}
.zoom-popup,
.zoom-popup-w {
  display: none;
  position: fixed; /* 画面に固定 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* ★ 背景を半透明の黒で暗くする ★ */
  z-index: 1000; /* 他のコンテンツより手前に表示 */
  opacity: 0;
  transition: opacity 0.3s;
}
.zoom-popup.is-active,
.zoom-popup-w.is-active {
  display: block;
  opacity: 1;
}
.popup-contents {
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  width: 40%;
  padding: 20px;
}
.popup-title {
  font-weight: bold;
  font-size: 1.1em;
}
.popup-text {
  font-size: 0.9em;
  margin-top: 10px;
  line-height: 1.5;
}

/* --- ポップアップ/モーダルウィンドウのスタイル (省略) --- */
.popup-icon {
  display: none;
  position: absolute;
  cursor: pointer;
  color: #fff;
}
.popup-icon:hover {
  color: #aa0061;
}
.close-popup {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 24px; /* 大きめのフォント */
  font-weight: bold;
  cursor: pointer; /* マウスオーバー時にクリック可能と示す */
  line-height: 1; /* 行の高さを調整し、上下の位置を正確にする */
  padding: 0px 5px;
}

/* アニメーション */
.animate-item {
  opacity: 0;
  transition: all 1s ease-out;
}
.slide-up {
  transform: translateY(50px);
}
.slide-left {
  transform: translateX(-50px);
}
.slide-right {
  transform: translateX(50px);
}
/* 出現状態（クラスが追加されたら発動 */
.is-visible {
  opacity: 1; /* 表示 */
  transform: translate(0, 0); /* 初期位置に戻す */
}

.catch-copy {
  background-color: #aa0061;
  position: relative;
  z-index: 1;
  padding-top: 20px;
  padding-bottom: 40px;
  background-image: url(/Portals/0/images/70th-anniversary/bottom_line.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 1100px 100px;
}
.catch-copy P {
  color: #ffffff;
  margin: auto;
  text-align: center;
}
.catch-copy P:first-child {
  font-size: 0.9em;
  line-height: 1.8;
}
.catch-copy P:last-child {
  font-size: 70px;
  letter-spacing: 3px;
}
.br {
  display: block;
}

@media screen and (max-width: 999px) {
  /* 画面幅が 999px 以上の場合に、モバイルのスタイルを上書きします */
  .container {
    width: 800px; /* PCでは幅を固定 */
    margin: 0 auto;
  }
  .main-title {
    font-size: 10vw;
  }
  .sub-title {
    font-size: 2.5vw;
  }
  .header-background {
    height: 110vh;
  }
  .intro-text {
    padding: 0 15px;
    text-align: left;
  }
  .intro-text p {
    display: inline;
    padding: 0;
  }
  .timeline-nav {
    display: none;
  }
  .episode-title span {
    height: 2.5em;
  }
}

@media screen and (max-width: 768px) {
  /* 画面幅が 768px 以上の場合に、モバイルのスタイルを上書きします */
  .container {
    width: 800px; /* PCでは幅を固定 */
    margin: 0 auto;
  }
  .header-background {
    height: 90vh;
  }
  .header-logo img {
    width: 20%;
  }
  .header-contents {
    margin: 0 5vw;
  }
  .background-square {
    /* padding: 10px 0; */
    margin: 10px;
  }
  .main-title {
    font-size: 13vw;
    letter-spacing: 1vw;
  }
  .sub-title {
    font-size: 3vw;
    margin-top: -2vw;
  }
  .intro-text {
    font-size: 0.9em;
    line-height: 1.5;
  }
  .intro-text br {
    display: none;
  }
  .flexbox-height {
    display: block;
  }
  .timeline-header {
    gap: 10px;
  }
  .header-left,
  .header-right {
    width: 50%;
    font-size: 4vw;
    padding: 4px 0;
  }
  .header-left {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .product-line {
    left: calc(95% - 5px);
  }
  .company-line {
    left: calc(5% + 5px);
  }
  .timeline-item.company-lane.single-event-point.left-group {
    display: block;
    width: 80%;
  }
  .timeline-item.large-event-block.animate-item.slide-up.is-visible {
    z-index: 0;
  }
  .event-content-left {
    left: calc(5% + 20px);
  }
  .timeline-horizontal-left-grey,
  .timeline-horizontal-left-black,
  .timeline-horizontal-left-purple {
    left: calc(5% + 5px);
    width: 17px;
  }
  .company-lane .timeline-dot {
    left: calc(5% + 3px);
  }
  .dot-grey {
    transform: translate(-50%, -7px);
  }
  .dot-black {
    transform: translate(-50%, -7px);
  }
  .dot-purple {
    transform: translate(-50%, -7px);
  }
  .large-event-block .large-year {
    font-size: 12vw;
    text-align: center;
  }
  .large-event-block .large-title {
    font-size: 5vw;
  }
  .large-event-block .zoom-icon {
    transform: translateY(-10%);
  }
  .popup-contents {
    width: 80%;
  }
  .background-img-1950::before {
    background-size: 80% auto;
  }
  .background-img-1960::before {
    background-position: left 10% top 10%, right 10% top 25%;
  }

  .popup-icon {
    display: block;
    z-index: 9;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    left: calc(273% - 5px);
  }
  .event-content-right {
    /* opacity: 1;
    right: 0;
    box-shadow: unset;
    position: absolute;
    top: 50%;
    z-index: 1001;
    margin: 0 20px;
    transform: translate(0, -50%); */

    opacity: 1;
    box-shadow: unset;
    position: absolute;
    top: 50%;
    z-index: 1001;
    margin: 0;
    transform: translate(-50%, -50%);
    width: 85%;
    max-width: 400px;
    left: 50%;
  }
  .episode-box-white {
    border: none;
  }
  .product-lane {
    display: none;
  }
  .popup-icon.w02 {
    top: 100px;
  }
  .popup-icon.w03 {
    top: 250px;
  }
  .popup-title {
    margin-right: 30px;
  }
  .episode-box-white .episode-title {
    margin: 0 25px 0 0;
  }
  .background-img-1949 .detail-1949 {
    max-width: 60vw;
    font-size: 0.75em;
  }
  .catch-copy {
    background-size: 1180px 100px;
  }
  .catch-copy P:first-child {
    padding: 0 5em;
    max-width: 500px;
    margin-bottom: 15px;
    font-size: 0.8em;
  }
  .catch-copy P:last-child {
    font-size: 2.3em;
  }
  .br {
    display: none;
  }
  .header-contents a::before {
    left: 155px;
  }
  .header-background::before {
    background-size: auto 110%;
  }
  .large-event-block .zoom-icon.r-20 {
    right: 0px;
  }
  footer#footer {
    z-index: 1;
  }
}

@media screen and (max-width: 499px) {
  .header-logo img {
    width: 30%;
  }
  .sub-title {
    font-size: 3.7vw;
    letter-spacing: 1px;
    margin: 5px;
  }
  .header-background {
    height: 80vh;
  }
  .background-square {
    margin: 20px auto;
  }
  .large-event-block .large-title {
    font-size: 6vw;
  }
  .episode-box-white .episode-title.fs16 p:first-of-type {
    font-size: 14px;
  }
  .mtsp-20 {
    margin-top: 20%;
  }
  .episode-box-black .episode-content > p {
    line-height: 1.5;
  }
  .episode-content > p {
    font-size: 0.9em;
    padding: 10px 0;
  }
  .close-popup {
    padding: 0px 5px;
  }
  .background-img-1960::before {
    background-position: left 10% top 0%, right 10% top 25%;
    background-size: 100% auto, 50% auto;
  }
  .background-img-1970::before {
    background-position: left 10% top 0%, right 0% top 30%;
    background-size: 40% auto, 70% auto;
  }
  .background-img-1980::before {
    background-position: left 50% top 0%;
    background-size: 80% auto;
  }
  .background-img-1990::before {
    background-position: left 0% top 0%, right 0% top 25%;
    background-size: 60% auto, 70% auto;
  }
  .background-img-2000::before {
    background-size: 80% auto;
  }
  .background-img-2010::before {
    background-size: 140% auto;
  }
  .background-img-2020::before {
    background-position: left 50% top -8%;
    background-size: 60% auto;
  }
}