@charset "UTF-8";
/* CSS Document */
.text-sp {
  display: none;
}
#news-container {
  margin: 100px auto 60px;
}
#news-container .inner {
  margin: 0 auto 80px;
  max-width: 1000px;
  padding: 0;
}
.image-item.large {
  width: 100%;
  margin: 20px auto 40px;
  position: relative;
  cursor: pointer;
  overflow: hidden; /* 円が画像の外に出ないようにする */
}
.image-item.large .image-container img {
  display: block;
  width: 100%;
}
.image-item.large .hover-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0); /* 初期状態: サイズゼロ */
  width: 100px;
  height: 100px;
  background-color: rgba(255, 210, 0, 1);
  border-radius: 50%;
  border: solid 4px #fff;
  z-index: 10;
  transition: transform 0.4s ease; /* フェードなし */
  pointer-events: none;
}
.image-item.large .arrow {
  position: absolute;
  top: 50%;
  left: 50.5%;
  transform: translate(-50%, -50%) scale(0); /* 初期状態: サイズゼロ */
  font-size: 50px; /* 矢印のサイズ */
  font-weight: bold;
  color: white;
  z-index: 11;
  transition: transform 0.2s ease 0.2s; /* 遅延付きで矢印を表示 */
  pointer-events: none;
  opacity: 0; /* 初期状態で非表示 */
}
.image-item.large:hover .hover-effect {
  transform: translate(-50%, -50%) scale(1); /* サイズ1で表示 */
}
.image-item.large:hover .arrow {
  transform: translate(-50%, -50%) scale(1); /* 半分のタイミングで表示 */
  opacity: 1; /* 矢印を表示 */
}

/* iPad版とSP版で再生ボタンを常に表示 */
@media (max-width: 1100px) {
  .image-item.large .hover-effect {
    transform: translate(-50%, -50%) scale(1) !important; /* 常に表示 */
  }
  .image-item.large .arrow {
    transform: translate(-50%, -50%) scale(1) !important; /* 常に表示 */
    opacity: 1 !important; /* 常に表示 */
  }
}

/* SP版で再生ボタンのサイズを半分に */
@media (max-width: 760px) {
  .image-item.large .hover-effect {
    width: 50px !important; /* 100px → 50px */
    height: 50px !important; /* 100px → 50px */
    border-width: 2px !important; /* 4px → 2px */
  }
  .image-item.large .arrow {
    font-size: 25px !important; /* 50px → 25px */
  }
}
/* 動画用ポップアップ全体のスタイル */
.popup {
  position: fixed; /* ビューポート全体を基準に配置 */
  top: 0;
  left: 0;
  width: 100vw; /* ビューポートの幅全体 */
  height: 100vh; /* ビューポートの高さ全体 */
  background: rgba(0, 0, 0, 0.8); /* 半透明の黒背景 */
  display: none; /* 初期状態で非表示 */
  align-items: center; /* コンテンツを縦中央揃え */
  justify-content: center; /* コンテンツを横中央揃え */
  z-index: 10000; /* 最前面に表示 */
}
.popup-content {
  position: relative;
  text-align: center;
  z-index: 10001; /* コンテンツをポップアップ内で前面に表示 */
}
.popup-content iframe {
  width: calc(80vh * 16 / 9); /* アスペクト比16:9を維持 */
  height: 80vh; /* ビューポートの高さの80% */
  max-width: 80vw; /* 横幅がビューポートの80%を超えないように制限 */
  max-height: 80vh; /* 縦幅がビューポートの80%を超えないように制限 */
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.6); /* 見た目を向上させる影 */
}
.close-popup {
  position: absolute;
  top: 0px; /* ボタンの位置を調整 */
  right: -90px; /* ボタンの位置を調整 */
  width: 50px; /* ボタンの幅 */
  height: 50px; /* ボタンの高さ */
  cursor: pointer;
  z-index: 10002; /* 他の要素より前面に表示 */
}
.close-popup::before, .close-popup::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px; /* 線の太さ */
  background-color: #eee; /* 線の色 */
  transform-origin: center;
}
.close-popup::before {
  transform: translate(-50%, -50%) rotate(45deg); /* 45度の線 */
}
.close-popup::after {
  transform: translate(-50%, -50%) rotate(-45deg); /* -45度の線 */
}
/* 画像スライド用ポップアップ全体のスタイル */
.popup-gallery {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #d3d3d3; /* 半透明の黒から透過なしのグレーに変更 */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10010;
}
.popup-gallery .close-popup {
  top: -20px; /* ボタンの位置を調整 */
  right: -40px; /* ボタンの位置を調整 */
}
/* ポップアップ内のコンテンツ */
.popup-gallery-content {
  position: relative;
  width: 80vw; /* 画面幅の80% */
  height: 80vh; /* 画面高さの80% */
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup-slider {
  width: 100vw;
}
/* スライダー内の画像スタイル */
.popup-slider img {
  width: 90%;
  height: auto; /* アスペクト比を維持 */
  object-fit: contain;
  pointer-events: none;
}
/* スライドボタンのスタイル */
button.prev-slide, button.next-slide {
  position: absolute;
  top: 50%; /* 垂直中央に配置 */
  transform: translateY(-50%); /* 中央寄せ */
  cursor: pointer;
  background-color: transparent;
  border: none;
  outline: none;
  z-index: 10;
}
/* 白い三角形のスタイル */
button.prev-slide::after, button.next-slide::after {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
button.prev-slide::after {
  border-width: 42px 45px 42px 0; /* 左向き三角形を3倍に拡大 */
  border-color: transparent white transparent transparent; /* 白い三角形 */
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
button.next-slide::after {
  border-width: 42px 0 42px 45px; /* 右向き三角形を3倍に拡大 */
  border-color: transparent transparent transparent white; /* 白い三角形 */
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
/* liをホバーした際にカーソルを変更 */
.image-container {
  aspect-ratio: 16 / 9;
}
.art .image-container {
  border-radius: 0;
  border: 1px solid #4a2d04;
  margin-bottom: 0;
}
.art li:hover {
  cursor: pointer; /* ポインタ（手の形のアイコン）に変更 */
}
.art .image-item {
  border-radius: 0;
  border: 1px solid #4a2d04;
  margin-bottom: 0;
}
/* #art専用のスタイル */
.art .image-item {
  position: relative;
  overflow: hidden; /* はみ出た部分を非表示にする */
}
.art .image-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important; /* 角丸を強制的に無効化 */
}
.art .image-item .overlay {
  position: absolute;
  top: -100%; /* 初期位置を画像の上に隠す */
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 210, 0, 0.8); /* 半透明の黄色 */
  transition: top 0.3s ease;
}
.art .image-item:hover .overlay {
  top: 0; /* ホバー時に画像全体を覆う */
  transition-delay: 0.1s; /* ホバー時は遅延なし */
}
.art .image-item:not(:hover) .overlay {
  transition-delay: 0.1s; /* ホバー解除時に0.5秒遅延を設定 */
}
/* オーバーレイがクリックイベントを透過する */
.image-item .overlay {
  pointer-events: none; /* マウスイベントを無視する */
}
/* 左向きボタンの位置 */
.popup-slider .prev-slide {
  left: -30px; /* 左ボタンの位置調整 */
}
/* 右向きボタンの位置 */
.popup-slider .next-slide {
  right: -30px; /* 右ボタンの位置調整 */
}
.label {
  font-size: 2.8rem;
  margin: 0 auto 10px 0;
}
#news-container ul {
  display: block;
  padding: 0;
  margin: 0;
}
#news-container ul::after {
  content: "";
  display: block;
  width: 32%;
}
#news-container li {
  list-style: none;
  width: 100%;
  margin: 0;
  background-color: #fff;
}
#news-container li a {
  color: #555;
}
.news-contents .flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 40px 0 20px;
  letter-spacing: 2px;
}
.title {
  border: 1px #555 solid;
  border-radius: 10px;
  padding: 3px 0 1px;
  font-size: 1.2rem;
  line-height: 1.5rem;
  width: 100px;
  text-align: center;
}
.news-contents .flex .title {
  text-align: center; /* 中央揃えのためにleftをcenterに修正 */
}
.credits li {
  text-align: left;
}
#news-container .art ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 画像間の隙間 */
}
#news-container .art li {
  width: 32.5%;
  box-sizing: border-box;
  margin-top: 8px;
}
#news-container .art img {
  width: 100%;
}
#news-container .art .image-item {
  position: relative; /* 子要素を絶対配置するためにrelativeに */
  overflow: hidden; /* はみ出た部分を隠すオプション */
}
#news-container .art .icon_plus {
  position: absolute;
  width: 40px;
  height: auto;

  /* 先に適用されている top:0; left:0; を打ち消す */
  top: auto;
  left: auto;

  bottom: 10px;
  right: 10px;
}
.footer {
  min-height: 0;
}
.footer .inner {
  margin: 0px auto;
  padding: 20px 0 60px;
}
/* OTHER WORKS非表示時のマージン調整 */
.curved-section .inner:first-child {
  margin-top: 70px;
}
/*news-contents*/
.news-contents .img {
  width: 100%;
}
.news-contents h2 {
  text-align: left;
  font-size: 2.2rem;
  line-height: 3.4rem;
  margin-bottom: 40px;
}
.news-contents .img {
  margin-right: 10px;
}
.news-contents p {
  line-height: 3rem;
  text-align: justify;
  text-justify: inter-ideograph;
}
.vertical {
  writing-mode: vertical-rl;
  font-size: 1.2rem;
  letter-spacing: 1px;
  margin-right: 10px;
}
.news-contents ul {
  margin: 20px 0 100px;
}
.news-contents li {
  list-style: none;
  line-height: 2.8rem;
}
.news-contents .underline {
  position: relative;
  display: inline-block;
  z-index: 1;
  color: #3a250b;
}
.news-contents .underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 7px;
  height: 7px;
  width: 100%;
  background-color: #ffd200;
  border-radius: 3px;
  z-index: -1;
}
.news-contents .image-width70 {
  max-width: 70%;
  max-height: 500px;
  aspect-ratio: auto;
  object-fit: scale-down;
}
.credits p {
  margin-bottom: 0;
}
.credits .underline {
  position: relative;
  display: inline-block;
  z-index: 1;
}
.credits .underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 7px;
  height: 7px;
  width: 100%;
  background-color: #ffd200;
  border-radius: 3px;
  z-index: -1;
}
/* PC版（1200px以上）はデフォルトのスタイル */

/* 中間サイズ対応 (760px - 1100px) */
@media (min-width: 760px) and (max-width: 1100px) {
  #news-container {
    max-width: none !important;
    width: calc(100% - 40px) !important;
    margin: 20px 20px 0 20px !important;
  }
  .news-contents {
    padding: 0 30px;
  }

  /* アンダーラインの位置と太さを他の範囲と同じに調整 */
  .news-contents .underline::after {
    bottom: 7px !important;
    height: 7px !important;
  }
  .credits .underline::after {
    bottom: 7px !important;
    height: 7px !important;
  }
}

/* iPad対応 (601px - 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
  #news-container .art li {
    width: 48.2%;
    padding: 0;
  }
  .left-strip, .right-strip {
    width: 20px;
    background-size: auto 80%;
  }
  #news-container {
    margin: 80px auto 40px;
  }
  .image-item.large {
    margin: 15px auto 30px;
  }
  .news-contents p {
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
}
/* SP版 (760px以下) */
@media (max-width: 760px) {
  body {
    min-width: 100%;
  }
  #container {
    padding: 0;
  }
  .left-strip, .right-strip {
    width: 15px;
    background-size: auto 65%;
  }
  .news-contents h2 {
    font-size: 2.0rem;
    line-height: 3.2rem;
    margin: 0 20px 40px;
  }
  .news-contents img {
    max-width: 100%;
    height: auto;
    margin: 0 auto 30px 0;
  }
  .vertical {
    margin-right: 0;
  }
  .display-flex .img {
    width: 86vw;
  }
  .display-flex .img p {
    display: none;
  }
  .display-flex .youtube {
    display: none;
  }
  .text-sp {
    display: block;
    margin: 0 20px;
  }
  .image-item.large {
    margin: 10px auto 20px;
  }
  .label {
    font-size: 2.0rem;
    padding-left: 0;
  }
  .news-contents .flex {
    margin: 40px auto 15px 30px;
  }
  .news-contents .flex span {
    font-size: 1.0rem;
  }
  .title {
    padding: 2px 0 1px;
    width: 90px;
  }
  .news-contents .underline {
    padding: 0 2px;
  }
  .news-contents .credits li, .news-contents .credits p {
    line-height: 2.4rem;
  }
  .news-contents p {
    padding: 0 30px 0;
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
  #news-container {
    margin: 0 auto 0;
  }
  #news-container .inner {
    margin: 20px 0 0;
  }
  #news-container li {
    padding: 0 30px;
    margin: 0;
  }
  #news-container .art ul {
    padding: 0 30px 50px;
  }
  #news-container .art li {
    width: 48.2%;
    padding: 0;
  }
	#news-container .art .icon_plus {
  width: 25px;

  bottom: 5px;
  right: 5px;
		margin-bottom: 0;
}
  .curved-section {
    margin-top: 0;
  }
  .curved-section h2 {
    margin: 40px auto 20px;
    font-size: 2.0rem;
  }
  .footer {
    margin: 30px 40px 20px;
  }
  .footer .HATCH-kun {
    bottom: 120px;
    right: -20px;
    width: 200px;
  }
  .footer-banner {
    display: block;
  }
  .footer-policy {
    margin-bottom: 20px;
  }
  .footer-policy .copyright {
    margin-bottom: 20px;
  }
  /* 画像スライド用ポップアップ全体のスタイル */
  .popup-gallery {
    background: #c8c8c8;
  }
  /* ✕ボタンのスタイル */
  .popup-gallery .close-popup {
    top: 18px;
    right: 18px;
  }
  .close-popup::before, .close-popup::after {
    width: 95%;
    height: 4px; /* 線の太さ */
    background-color: #fff; /* 線の色 */
  }
  /* ポップアップ内のコンテンツ */
  .popup-gallery-content {
    width: 100vw;
    height: 100vh;
  }
  /* スライダー内の画像スタイル */
  .popup-slider img {
    width: 100%;
  }
  /* スライドボタンの位置を画面下部から10%上に変更 */
  button.prev-slide, button.next-slide {
    top: auto; /* 上からの位置指定を解除 */
    bottom: 10%; /* 画面下部から10%の位置に配置 */
    transform: translateY(0); /* 位置調整 */
  }
  /* 白い三角形のスタイル */
  button.prev-slide::after, button.next-slide::after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
  }
  /* 左向きボタンの位置 */
  .popup-slider .prev-slide {
    left: 30px; /* 左ボタンの位置調整 */
  }
  /* 右向きボタンの位置 */
  .popup-slider .next-slide {
    right: 30px; /* 右ボタンの位置調整 */
  }
  button.prev-slide::after {
    border-width: 20px 22px 20px 0; /* 左向き三角形を3倍に拡大 */
    border-color: transparent white transparent transparent; /* 白い三角形 */
    left: 0;
    bottom: 50%;
    transform: translateY(-50%);
  }
  button.next-slide::after {
    border-width: 20px 0 22px 20px; /* 右向き三角形を3倍に拡大 */
    border-color: transparent transparent transparent white; /* 白い三角形 */
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  /* 動画用ポップアップ全体のスタイル */
  .popup {
    background: #000;
  }
  .popup-content iframe {
    width: calc(100vh * 16 / 9); /* アスペクト比16:9を維持 */
    height: 50vh; /* ビューポートの高さの80% */
    max-width: 100vw; /* 横幅がビューポートの80%を超えないように制限 */
    max-height: 50vh; /* 縦幅がビューポートの80%を超えないように制限 */
  }
  .popup .close-popup {
    position: fixed; /* 画面全体に対する位置指定 */
    top: 18px; /* 画像ポップアップと同じ位置 */
    right: 18px; /* 画像ポップアップと同じ位置 */
  }
  .close-popup::before, .close-popup::after {
    height: 4px; /* 線の太さ */
    background-color: #616161; /* 線の色 */
  }
}