@charset "UTF-8";
/* CSS Document */
/* 共通設定　ココから */
body {
  background-color: #fff;
  min-width: 350px;
  overflow-x: hidden; /* 横スクロールを防ぐため追加 */
}
#container {
  background-color: #fff;
  position: relative;
}
li {
  list-style: none;
}
h2 {
  font-family: "Cabin", sans-serif;
  font-weight: 700;
  letter-spacing: 2px;
}
.left-strip, .right-strip {
  position: absolute;
  top: 0;
  width: 25px; /* 幅を半分に調整 */
  height: 100%;
  background-image: url("../images/top/sidebar2.jpg"); /* 画像パスを指定 */
  background-size: auto 100%; /* 縦横比率を維持しつつ、縦方向に合わせる */
  background-repeat: repeat-y; /* 縦方向にリピート */
  background-position: center;
  z-index: 110;
}
.left-strip {
  left: 0;
}
.right-strip {
  right: 0;
}
.display-none {
  display: none;
}
.display-flex {
  display: flex;
}
.display_sp {
  display: none;
}
@media (max-width: 1200px) {
  #container {
    padding: 0;
  }
}
@media (max-width: 760px) {
  body {
    min-width: 100%;
  }
  #container {
    padding: 0;
  }
  .left-strip, .right-strip {
    width: 15px;
    background-size: auto 65%;
  }
}

/* iPad対応 (601px - 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
  .left-strip, .right-strip {
    width: 20px;
    background-size: auto 80%;
  }
}
/* 共通設定　ココまで */
#top-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}
/* header ココから */
#header-sp {
  display: none;
}
#header-container {
  width: 100%;
  height: 45px;
  background-color: #fff;
}
#header {
  position: relative;
  width: 100%;
  background-color: #111;
}
#header a {
  color: #3a250b;
}
#header li {
  float: left;
  list-style: none;
  font-size: 1.4rem;
  color: #fff;
}
.header-menu {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 100px;
  background-color: white;
  border: 5px solid #4a2d04;
  border-top: none;
  border-radius: 0 0 20px 20px;
  box-sizing: border-box;
  z-index: 10;
}
.header-menu > ul {
  display: flex; /* 直下のul要素内のliを横並びに */
  align-items: center;
  justify-content: space-between; /* 左右に配置 */
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%; /* 全体幅を調整 */
}
.header-menu ul li {
  font-size: 1.4rem;
  color: #4a2d04;
}
.header-left {
  margin: 20px 0 0 40px;
}
.header-left img {
  width: 380px;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 20px; /* リンクの間隔を調整 */
  margin: 20px 60px 0 0;
}
.header-right ul {
  display: flex; /* 横並びにする */
  align-items: center; /* li要素を縦中央に配置 */
  gap: 60px; /* リンクの間隔を調整 */
  list-style: none;
  padding: 0;
  margin: 0;
}
.header-right ul li {
  display: flex;
  align-items: center; /* アイコンやテキストを縦中央に配置 */
}
.header-right img {
  width: 40px;
}
.header-right #page-link li {
  font-size: 1.6rem;
}
#page-link .padding {
  position: relative;
  display: inline-block; /* テキストに応じて要素の幅を調整 */
  text-align: center; /* テキストと画像を中央揃え */
}
#page-link .padding img {
  position: absolute;
  top: 35%;
  left: 50%; /* 親要素の中央基準に */
  transform: translateX(-50%) scaleX(0); /* 初期状態で左から非表示 */
  transform-origin: left center; /* 左から右に表示開始 */
  z-index: -1;
  width: 80px; /* 画像サイズ */
  opacity: 0; /* 初期状態では非表示 */
  transition: transform 0.3s ease, opacity 0.3s ease; /* スムーズなアニメーション */
}
#page-link .padding:hover img {
  transform: translateX(-50%) scaleX(1); /* 左から右に拡大 */
  opacity: 1; /* 表示 */
}
#page-link .padding img {
  transform-origin: left center; /* 初期状態を維持 */
}
#page-link .padding:hover ~ img {
  opacity: 0; /* ホバー解除時はフェードアウト */
}
/* メールアイコン（常時表示） */
#page-link .padding a[href^="https://soiful.jp/contact/"] img {
  position: relative; /* 位置調整を無効化 */
  top: auto; /* 初期化 */
  left: auto; /* 初期化 */
  transform: none; /* 変形を無効化 */
  z-index: auto; /* 標準レイヤー */
  width: 15px; /* 適切なサイズ */
  opacity: 1; /* 常時表示 */
  transition: none; /* imgには背景色のトランジションは不要 */
}
/* メールアイコンのスタイル */
.mail-icon {
  width: 40px;
  height: 40px;
  background-color: #4a2d04; /* 初期背景色 */
  border-radius: 50%; /* 円形 */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: background-color 0.1s ease; /* 背景色のトランジションを指定 */
}
/* ホバー時のスタイル */
.mail-icon:hover {
  background-color: #FFD200; /* ホバー時の背景色 */
}
@media (max-width: 1200px) {
  .header-menu {
    max-width: 100%;
  }
}
@media (max-width: 1040px) {
  .header-left .display_pc {
    display: none;
  }
  .header-left .display_sp {
    display: block;
    width: 300px;
  }
  .header-right ul {
    gap: 35px;
  }
}
@media (max-width: 1100px) {
  #header {
    display: none;
  }
  #header-sp {
    display: block;
  }
  #header-sp {
    display: block;
  }
  #header-sp a {
    color: #4a2d04;
  }
  #header-container {
    height: 45px;
    background-color: rgba(0, 0, 0, 0.00);
  }
  #header-sp img {
    height: 60px;
    object-position: left;
    margin-top: 8px;
    margin-left: 15px;
  }
  #header-sp .curved-section {
    padding: 50px 0 100px;
    position: relative;
    min-height: 80vh;
  }
  #header-sp .curved-section img {
    margin: 10px auto 100px 0;
    height: 80px;
  }
  #header-sp .curved-section .HATCH-kun {
    height: auto;
    position: absolute;
    bottom: -200px;
    right: -120px;
  }
  #header-sp .nav_logo-link {
    align-self: flex-start;
  }
  .header-sp_logo {
    height: 50px;
    text-align: left;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
    z-index: 50;
  }
  .z-index {
    height: 50px;
    text-align: left;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0 60px;
    z-index: 1000;
  }
  /* z-index全体はクリックを受け付けないように */
  .z-index {
    pointer-events: none;
  }
  /* navbtnだけはクリックを受け付けるように */
  .z-index .navbtn {
    pointer-events: auto;
  }
  .top {
    margin: 0 0 0 auto;
  }
  .nav-content {
    z-index: 9999; /* 適切な値を設定してください。他の要素よりも大きな値を指定します。 */
  }
  /* navが開いているときにスクロール不可にする */
  body.nav-open {
    overflow: hidden;
    height: 100vh; /* 必要に応じて100vhで固定 */
  }
  .nav {
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100vh;
    background: #fff;
    color: #333;
    /* 右からスライドイン */
    transition: left 0.5s;
    z-index: 50;
    /* ここを追加: Flexレイアウトで上下に要素を並べる */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 上から順に配置 */
    align-items: stretch; /* 幅はデフォルト100%に */
  }
  /* ナビを開いたときに left:0 に */
  .open .nav {
    left: 0;
  }
  /* .nav_logo は左に寄せる */
  #header-sp .nav_logo {
    align-self: flex-start;
    height: 100px;
    margin: 30px auto 50px 60px;
  }
  /* メニュー部分（.curved-section）を中央寄せしたい場合 */
  .curved-section {
    width: 100%;
    text-align: center; /* 内部の ul/li/a を中央寄せ */
    margin-top: 30px; /* ロゴとの間隔をあけたい時 */
  }
  /* ul のスタイルはそのまま */
  .nav ul {
    list-style: none;
    font-size: 2.6rem;
    font-weight: 700;
    padding: 0;
    margin: 30px auto 0 60px;
    text-align: left;
    z-index: 100;
  }
  .nav li:not(:last-child) {
    margin-bottom: 35px;
  }
  .nav .lang {
    font-size: 1.8rem;
  }
  /* ナビゲーションボタン（開く） */
  .navbtn {
    cursor: pointer;
  }
  /* ナビゲーションボタン（閉じる） */
  .open .navbtn {
    z-index: 100;
  }
  /* ナビゲーションメニュー 開いた時*/
  .open .nav {
    left: 0;
  }
  .kv-sp {
    height: 94vh;
    overflow: hidden;
    justify-content: center;
  }
  .kv-sp img {
    height: 100%;
    margin-top: 50px;
  }
  .hight-50_sp {
    display: block;
    height: 50px;
  }
  #header {
    display: none;
  }
  #news-container ul {
    margin: 30px 4px 0;
  }
  #news-container li {
    width: 45%;
    margin: 20px 8px 0;
    background-color: #fff;
  }
  .sp-li {
    display: block;
  }
  .footer li {
    font-size: 1.4rem;
  }
  .footer .info-box_pc {
    display: none;
  }
  .info-box_sp {
    display: flex;
    justify-content: center;
    margin: 0 auto;
  }
}
@media (max-width: 760px) {
  #header-sp img {
    height: 40px;
    margin-left: 30px;
    margin-top: 5px;
  }
  .z-index {
    padding: 0;
  }
  .top {
    margin: 0 25px 0 auto;
  }
  .curved-section {
    margin-top: 0;
  }
}
/* header　ココまで */
/* works　ここから */
#works-container {
  margin: 150px auto 0;
  max-width: 1000px;
}
#works-container .inner {
  width: 100%;
  margin: 0 0 60px 0; /* Small Images Section非表示時の間隔調整 */
}
/* Small Images Section表示時は通常のマージン */
#works-container .inner.with-small-images {
  margin-bottom: 0;
}
ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.display-flex {
  display: flex;
  margin-bottom: 40px;
  align-items: center; /* 垂直中央揃え */
}
.display-flex.right {
  width: 100%;
  gap: 50px;
}
.display-flex.right > li {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.image-item {
  position: relative;
  overflow: hidden; /* ← オーバーレイを隠すために hidden に変更 */
  aspect-ratio: 16/9;
  border-radius: 20px;
  border: 5px solid #4a2d04;
  margin-bottom: 15px;
}
.image-item img {
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}
.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;
  pointer-events: none; /* マウスイベントを無視する */
}
.image-item:hover .overlay {
  top: 0; /* ホバー時に画像全体を覆う */
  transition-delay: 0.1s; /* ホバー時は遅延なし */
}
.image-item:not(:hover) .overlay {
  transition-delay: 0.1s; /* ホバー解除時に0.5秒遅延を設定 */
}
.main-image {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; /* オーバーレイを隠すために追加 */
  border-radius: 15px; /* 画像の角丸に合わせる */
}
.main-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  display: block;
}
.label {
  font-size: 1.6rem;
  font-weight: 600;
  padding: 5px;
  color: #4a2d04;
  border-radius: 4px;
  margin-left: 30px;
}
.display-flex.right .label {
  margin-left: 10px;
}
.tags {
  display: flex;
  gap: 15px;
  margin: 0 20px 0 auto;
}
.display-flex.right .tags {
  gap: 5px;
  margin: 0 0 0 auto;
}
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
  border-radius: 10px;
  color: #fff;
  margin-right: 10px;
  width: 90px;
  height: 18px;
  text-align: center;
}
.comedy {
  background-color: #ffb347;
}
.action {
  background-color: #e74c3c;
}
.drama {
  background-color: #2ecc71;
}
.horror {
  background-color: #34495e;
}
.fantasy {
  background-color: #3f87cb;
}
.mystery {
  background-color: #8e44ad;
}
.image-item.large {
  position: relative; /* new-badgeの基準位置として設定 */
  overflow: visible; /* NEWバッジを表示させるために visible に */
}
.new-badge {
  position: absolute;
  top: -62px;
  right: -30px;
  z-index: 1;
}
.new-badge img {
  width: 100px;
}
@media (max-width: 760px) {
  .display-flex {
    margin-bottom: 15px;
  }
  .display-flex.right {
    gap: 10px;
  }
  .display-flex.right .display-flex {
    display: block;
  }
  #works-container {
    margin: 40px auto 50px 0;
    padding: 0 30px;
  }
  #works-container .inner {
    margin-bottom: 0; /* SP版ではマージンボトムを0に */
  }
  .main-image img {
    border-radius: 10px;
  }
  .image-item {
    border-radius: 10px;
    border: 3px solid #4a2d04;
    margin-bottom: 5px;
  }
  .image-item img {
    border-radius: 8px;
  }
  .image-item.small {
    display: block;
    width: 100%;
    height: auto;
  }
  .image-item.small img {
    display: block; /* ← インライン要素由来の余白を消す */
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: bottom; /* ← 念のため */
    margin: 0;
    padding: 0;
  }
  .label {
    margin-left: 0;
    font-size: 1.2rem;
    text-align: left;
  }
  .display-flex.right .label {
    margin-left: 0;
  }
  .tags {
    gap: 5px;
    margin: 0 0 2px auto;
  }
  .tag {
    margin-right: 0;
    margin-left: 4px;
    font-size: 0.9rem;
    line-height: 1.5rem;
    width: 65px;
    height: 14px;
  }
  .new-badge {
    top: -35px;
    right: -10px;
  }
  .new-badge img {
    width: 50px;
  }
}
/* Works　ここまで */
.curved-section {
  position: relative; /* z-indexを適用するために必要 */
  z-index: 1;
  width: 100%;
  background-color: #d3d3d3; /* 灰色 */
  border-top-left-radius: 120% 160px; /* 強い弧で端が緩やか */
  border-top-right-radius: 120% 160px; /* 強い弧で端が緩やか */
  overflow: hidden;
}
@media (max-width: 760px) {
  .curved-section {
    border-top-left-radius: 120% 80px;
    border-top-right-radius: 120% 80px;
  }
}
/* about　ここから */
#about-container {
  position: relative;
  overflow: visible;
}
.star {
  position: relative; /* .about-text要素を重ねるために親要素を相対位置に設定 */
  margin-bottom: 0; /* 下部マージンを0に */
  max-width: 1200px; /* 最大幅を制限 */
  margin-left: auto;
  margin-right: auto;
  min-height: 600px; /* 最小高さを設定してコンテンツの位置を安定化 */
}
.star img {
  display: block;
  width: 100%; /* 親要素に対して100% */
  max-width: 1020px; /* 最大幅を設定（1200px * 0.85） */
  margin: 60px auto 0;
}
.display-flex.display_sp {
  display: none;
}
.about_bg.display_sp {
  display: none;
}
.about-text {
  position: absolute; /* 重ねて表示するために絶対位置を指定 */
  top: 55%; /* 画像の中央より少し下に配置 */
  left: 50%;
  transform: translate(-50%, -50%); /* 中央寄せ */
  width: 800px;
  text-align: center;
  margin: 0; /* 余白をリセット */
}
.about-text img {
  width: 800px;
  margin: 0 auto 40px;
}
.text-box {
  margin: 30px 0;
}
.text-box p {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 5.8rem;
  color: #4a2d04;
  display: inline-block;
  margin: 0;
}
.text-box br {
  margin-bottom: 20px;
}
.underline {
  position: relative;
  display: inline-block;
  z-index: 1;
}
.underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 20px;
  height: 4px;
  width: 100%;
  background-color: #fff;
  border-radius: 3px;
  z-index: -1;
}
.egg {
  position: relative;
  margin: 40px 0 50px;
  width: 100%;
  z-index: 10;
  clear: both;
}
.egg .display_pc {
  width: 90%;
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 10;
}
.egg .display_pc img {
  width: calc(10% - 2.6vw);
  margin: 0 1.3vw;
}
@media (max-width: 760px) {
  /* すでにある他のスタイルはそのまま活かす */
  .display_sp {
    display: block;
  }
  .display-flex.display_sp {
    display: block;
  }
  .about_bg.display_sp {
    display: block;
  }
  .star {
    position: relative;
    min-height: 500px;
    margin-bottom: 30px;
  }
  .star .about_bg {
    width: 55%;
    margin: 20px 20px 0 auto;
  }
  .about-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    text-align: left;
    width: 90%;
    z-index: 2;
  }
  .text-box {
    margin-left: 30px;
    margin-bottom: 0;
  }
  .about-text .display_sp {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 45px;
    margin: 0 auto 20px;
  }
  .about-text .display_sp img {
    width: 160px;
    margin: 0;
  }
  .about-text .display_sp .about_chara {
    width: 110px;
    margin: auto 10px 0 0;
  }
  .display_pc {
    display: none !important;
  }
  .text-box p {
    font-size: 1.2rem;
    line-height: 3.0rem;
    margin: 0;
    text-align: left;
  }
  .underline::after {
    bottom: 8px;
    height: 4px;
  }
  .egg {
    margin: 0 auto 0;
    position: relative;
    z-index: 10;
  }
  .egg .display_sp {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .egg .display-flex {
    margin-bottom: 0;
  }
  .egg img {
    margin: 0 2vw;
    width: calc(17% - 4vw);
  }
}
/* about　ここまで */
/* member　ここから */
#member-container {
  background-color: #fff;
  margin: 0 auto 60px;
  width: 90%;
  border-radius: 20px;
  padding: 80px 0 100px;
}
#member-container h2 {
  display: inline-block;
  margin: 0 auto 80px;
  font-size: 4rem;
  color: #4a2d04;
}
#member-container .display-flex {
  width: 90%;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
}
#member-container img {
  max-width: 80%;
  margin: 0 20px;
  transition: transform 0.3s ease; /* アニメーションのスムーズな効果 */
}
#member-container img:hover {
  transform: scale(1.1); /* ホバー時に1.2倍にスケール */
}
@media (max-width: 600px) {
  #member-container {
    background-color: rgba(0, 0, 0, 0.00);
    padding: 0;
    margin: 30px auto;
  }
  #member-container h2 {
    margin: 0 auto 40px;
    font-size: 2.6rem;
  }
  #member-container .display-flex {
    justify-content: center;
  }
  #member-container img {
    max-width: 80px;
    margin: 0 15px 5px;
  }
}
/* member　ここまで */
.curved-section .inner {
  max-width: 1000px;
  margin: 0 auto;
}
/* contact　ここから */
#contact-container {
  margin: 0 auto 60px 20px; /* 左マージンの設定を除外 */
  text-align: left; /* 左寄せ */
  position: relative; /* z-index適用の基準を設定 */
  z-index: 2; /* HATCH-kunより前面に配置 */
}
#contact-container img {
  display: block;
}
.contact-link {
  width: 400px;
  border-bottom: 2px solid #4a2d04;
  margin: 60px 0 0;
  justify-content: space-between;
}
.contact-link p {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 1px;
}
.contact-link img {
  padding: 0 5px 0 0;
  width: 30px;
}
.contact-link:hover img.contact-icon {
  opacity: 0; /* ホバー時に画像を透明にする */
}
.contact-link:hover::after {
  background-image: url("assets/images/top/icon_mail_yellow.png");
  opacity: 1;
}
#contact-container a {
  color: #4a2d04;
  display: inline-block;
}
@media (max-width: 600px) {
  #contact-container img {
    width: 160px;
  }
  #contact-container {
    margin: 0 40px;
  }
  .contact-link {
    width: 78vw;
    margin: 20px 0 0;
    justify-content: space-between;
  }
  .contact-link p {
    font-size: 1.6rem;
  }
  #contact-container .contact-link img {
    width: 30px;
  }
}
/* contact　ここまで */
/* footer　ここから */
.footer {
  position: relative;
  z-index: 1; /* contact-containerより背面に配置 */
}
.footer-banner {
  position: relative; /* footer-banner_innerを相対基準に */
  width: 500px;
  height: 180px;
  overflow: hidden;
  border-radius: 20px;
  margin-left: 20px;
  z-index: 2; /* HATCH-kunより前面に配置 */
}
.footer-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7) contrast(1.1);
  transform: scale(1.4);
  transform-origin: center;
}
.footer-banner_inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; /* 内部の要素配置のために幅を設定 */
  height: 100%; /* 内部の要素配置のために高さを設定 */
}
.footer-banner_inner .logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px; /* ボタン画像のサイズを小さく設定 */
  height: auto; /* 縦横比を維持 */
}
.footer-banner_inner .button {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 30px; /* ボタン画像のサイズを小さく設定 */
  height: auto; /* 縦横比を維持 */
}
.footer-policy_pc {
  display: flex;
  justify-content: right;
  margin: 60px 40px 20px auto;
  position: relative;
  z-index: 2; /* HATCH-kunより前面に配置 */
}
.footer-policy_sp {
  display: none;
}
.footer-policy p {
  margin: 0 40px;
  font-size: 1.2rem;
  letter-spacing: 2px;
}
.footer-policy a {
  color: #4a2d04;
  border-bottom: none;
}
.HATCH-kun {
  position: absolute;
  bottom: -200px;
  right: 60px;
  width: 600px;
  z-index: 0; /* contact-containerやfooter-policyの背面に配置 */
}
@media (max-width: 600px) {
  .footer {
    margin: 30px 40px 30px;
  }
  .footer-banner {
    position: relative; /* footer-banner_innerを相対基準に */
    width: 100%;
    height: 120px;
    border-radius: 10px;
    margin: 0 auto;
  }
  .HATCH-kun {
    bottom: 0px;
    right: -150px;
    width: 350px;
  }
  .footer-banner_inner .logo {
    width: 160px;
  }
  .footer-banner_inner .button {
    width: 20px;
  }
  .footer-policy {
    text-align: left;
    margin-bottom: 40px;
  }
  .footer-policy p {
    display: inline-block;
    margin: 0 auto 0 0;
  }
  .footer-policy .policy {
    margin-bottom: 20px;
  }
  .footer-policy .policy p {
    /* ここから下を変更 */
    display: inline-block; /* インライン要素として扱い、paddingなどを反映しやすくする */
    margin-bottom: 8px; /* テキストの下の余白 */
    padding-bottom: 0; /* ボーダーとの距離を詰める */
    line-height: 1.0; /* 必要に応じて行間を小さめに */
    border-bottom: 1px solid #4a2d04;
  }
}
/* footer　ここまで */
@media (max-width: 1350px) {
  .parallax-img {
    background-image: url("../images/top/hob_kv.jpg");
    background-size: cover;
    background-position: top;
    animation: parallax linear both;
    animation-timeline: view();
    filter: brightness(60%);
  }
}
@media (max-width: 600px) {
  .section-title:before, .section-title:after {
    height: 0px;
  }
  .news-tag {
    font-size: 0.9rem;
    padding: 0 6px 0px;
    letter-spacing: 2px;
  }
  .news-tag p {
    font-size: 0.9rem;
    padding: 0 6px 0px;
    letter-spacing: 2px;
    line-height: 1.6rem;
  }
  #about-container .inner {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  hr {
    display: block;
    background-color: #fff;
    overflow: visible;
    text-align: center;
    height: 3px;
    margin: 0;
  }
  .sp-text {
    margin-bottom: 60px;
  }
  #about-container span {
    margin: 40px 0 60px 0;
  }
  .pc-text {
    display: none;
  }
  .sp-text {
    display: block;
  }
  #about-container h3 {
    font-size: 2.6rem;
    padding: 6px 14px 4px;
  }
  #about-container .sp-text_magin-bottom {
    margin-bottom: 6px;
  }
  .member-text {
    padding: 14px 8px;
    color: #fff;
    border-radius: 0 0 14px 14px;
    box-shadow: 5px 5px 10px #ccc;
    line-height: 1.4rem;
  }
  .member-text .name {
    font-size: 1.6rem;
    padding-bottom: 6px;
    margin-bottom: 6px;
    line-height: 1.4rem;
  }
  .member-text .position {
    font-size: 0.8rem;
    line-height: 1.2rem;
    letter-spacing: 0.8px;
  }
  #contact-container .inner {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #contact-container .inner p {
    margin-top: 80px;
    font-size: 1.4rem;
  }
}