/* 横スクロール */
.horizontal_scroll {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 30px 8px;
  display: -ms-flexbox;
  display: flex;
}
/* 画面幅が768px以上の場合、横スクロールを解除 */
@media screen and (min-width: auto) {
  .horizontal_scroll {
    overflow-x: inherit;
    padding: 0 8px 6px;
  }
}
.horizontal_scroll > li {
  width: 100%;
  min-width: 230px;
}
@media screen and (min-width: auto) {
  .horizontal_scroll > li {
    min-width: inherit;
  }
}
.horizontal_scroll > li:not(:last-child) {
  margin-right: 5px;
}
.horizontal_scroll > li:last-child {
  padding-right: 5px;
}
@media screen and (min-width: auto) {
  .horizontal_scroll > li:last-child {
    padding-right: 0;
  }
}
.horizontal_scroll img {
  vertical-align: bottom;
}
/* タイトル */
.slider_ttl {
  color: #333;
  text-align: center; /* テキストを中央揃えに変更 */
  width: 100%;
  /* heightプロパティを削除し、line-heightのみで高さを調整 */
  line-height: 40px;
  /* paddingを具体的な値に設定し、継承による不意の影響を避ける */
  padding: 0px; /* 上下のpaddingは0に、必要に応じて左右のpaddingを調整 */
  margin: 0 0 20px 0;
  background-color: #e5e5e5;
  text-indent: 8px; /* 必要に応じて調整 */
  font-size: 16px;
  font-weight: 700;
  box-sizing: border-box;
  /* vertical-alignを追加して、テキストの垂直位置を微調整 */
  vertical-align: middle;
}

.top-nav-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px auto 10px;
  max-width: 360px;
}

.top-nav-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-align: center;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.65);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.top-nav-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
  filter: brightness(1.03);
}

.top-nav-button:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.top-nav-button--blue {
  background: linear-gradient(135deg, #235EFF, #1C83FF);
}

.top-nav-button--green {
  background: linear-gradient(135deg, #37d67a, #1fbf69);
}

.top-nav-button--orange {
  background: linear-gradient(135deg, #ffb347, #ff7b2c);
}

.top-nav-button--gray {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
}

.top-nav-button--pink {
  background: linear-gradient(135deg, #FF77E9, #F13598);
}

.save-guide {
  margin: 12px auto 16px;
  max-width: 420px;
  padding: 14px 16px 12px;
  background: linear-gradient(135deg, #fff6e8, #ffffff);
  border: 1px solid rgba(255, 181, 87, 0.55);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  text-align: left;
}

.save-guide--floating {
  margin: 0;
  max-width: 300px;
  position: relative;
}

.save-widget {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.save-widget__toggle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  font-size: 22px;
  cursor: pointer;
}

.save-guide__close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  color: #6b7280;
}

.save-guide__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: #ff8a3d;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.save-guide__title {
  margin: 8px 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
}

.save-guide__text {
  margin: 0 0 10px;
  font-size: 13px;
  color: #374151;
}

.save-guide__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 10px;
  justify-content: center;
}

.save-guide__details {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(209, 213, 219, 0.7);
  padding: 8px 10px;
}

.save-guide__summary {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 6px;
}

.save-guide__list {
  display: grid;
  gap: 6px;
  margin-top: 0;
}

.save-guide__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(209, 213, 219, 0.6);
}

.save-guide__button {
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #ff8a3d, #ff6b3d);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.save-guide__button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.2);
}

.save-guide__button:active {
  transform: translateY(1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
}

.save-guide__button--ghost {
  background: #ffffff;
  color: #f97316;
  border: 1px solid rgba(249, 115, 22, 0.4);
}

.save-guide__steps {
  display: grid;
  gap: 8px;
}

.save-guide__step {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(209, 213, 219, 0.7);
}

.save-guide__device {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
}

.save-guide__how {
  font-size: 12px;
  color: #4b5563;
}

.save-guide__note {
  margin: 10px 0 0;
  font-size: 11px;
  color: #6b7280;
}

@media (min-width: 768px) {
  .save-guide {
    padding: 16px 18px 14px;
  }

  .save-guide__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-nav-button {
    transition: none;
  }
}

.slider_ttl {
  position: relative;
  overflow: hidden;
}

.slider_ttl::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 70%);
  transform: translateX(-120%);
  animation: titleSweep 4.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes titleSweep {
  0%, 60% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}

.image-s-section h1 img {
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.18));
  animation: titleGlow 5s ease-in-out infinite;
}

@keyframes titleGlow {
  0%, 100% {
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.16));
  }
  50% {
    filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.26));
  }
}

@media (prefers-reduced-motion: reduce) {
  .slider_ttl::after,
  .image-s-section h1 img {
    animation: none;
  }
}
/* デザイン */
asc1 {
  background: #ccecff;
  display: block;
  width: 140px;
  height: 140px;
  position: relative;
}
asc1::after {
  content: "画像";
  color: #8dd4ff;
  font-size: 30px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
}
/*以下、アコーディオンプログラム*/
.panel {
  border: 1px solid #767676;
  border-left: none;
  border-right: none;
  background-color: #FFFFFF;
  padding: 20px 20px;
  display: none;
}
.box {
  background-color: #FFB1B2;
  display: block;
  display: inline-block;
  width: 100%;
  border: 1px solid #767676;
}
. {
  display: block;
  flex-grow: 1;
  width: 100%;
  padding: 25px;
  background-color: #FFFFFF;
  outline: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.:hover {
  background-color: #99D7D8;
}
.fas {
  float: right;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
table tr {
  border-bottom: solid 1px #001B3D;
  cursor: pointer;
}
table tr:hover {
  background-color: #d4f0fd;
}
table th, table td {
  text-align: center;
  width: 25%;
  padding: 4px 0;
  vertical-align: middle;
  width: 100px;
}
table td.icon {
  background-size: 35px;
  background-position: left 5px center;
  background-repeat: no-repeat;
  padding-left: 30px;
  background-color: #d4f0fd;
}
table td.icon.bird {
  background-image: url("")
}
table td.icon.whale {
  background-image: url("")
}
table td.icon.crab {
  background-image: url("")
}
/*アコーディオンプログラム*/
/*ここからスケジュールプログラム*/
/* 隠された状態のスタイル */
.hidden {
  display: none;
}
/* 浮き出すスタイル */
#infoContainer1 {
  width: 100%;
  position: absolute;
  top: 42%;
  left: 50%;
  line-height: 1.2;
  transform: translate(-50%, -50%);
  background-color: #d1efff;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
/* 表のスタイル 1*/
/* styles.css */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: 20px;
}
th, td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #000000;
}
th {
  background-color: #f2f2f2;
  font-weight: bold;
}
tr:hover {
  background-color: #f5f5f5;
}
#infoContainer1 {
  display: none;
}
.hidden {
  display: none;
}
#showInfoButton1 {
  cursor: pointer;
  background-color: #002EAC;
  color: #fff;
  border: none;
  padding: 2px 45px;
  font-size: 14px;
  border-radius: 5px;
}
#showInfoButton1:hover {
  background-color: #0A008C;
}
#closeButton1 {
  cursor: pointer;
  float: right;
  font-weight: bold;
  font-size: 18px;
}
/*ここまでスケジュールプログラム*/
/*ここからスケジュールプログラム*/
/* 隠された状態のスタイル */
.hidden {
  display: none;
}
/* 浮き出すスタイル */
#infoContainer2 {
  width: 100%;
  position: absolute;
  top: 42%;
  left: 50%;
  line-height: 1.2;
  transform: translate(-50%, -50%);
  background-color: #d1efff;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
/* 表のスタイル 1*/
/* styles.css */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: 20px;
}
th, td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #000000;
}
th {
  background-color: #f2f2f2;
  font-weight: bold;
}
tr:hover {
  background-color: #f5f5f5;
}
#infoContainer2 {
  display: none;
}
.hidden {
  display: none;
}
#showInfoButton2 {
  cursor: pointer;
  background-color: #002EAC;
  color: #fff;
  border: none;
  padding: 2px 45px;
  font-size: 14px;
  border-radius: 5px;
}
#showInfoButton2:hover {
  background-color: #0A008C;
}
#closeButton2 {
  cursor: pointer;
  float: right;
  font-weight: bold;
  font-size: 18px;
}
/*ここまでスケジュールプログラム*/
/*ここからスケジュールプログラム*/
/* 隠された状態のスタイル */
.hidden {
  display: none;
}
/* 浮き出すスタイル */
#infoContainer3 {
  width: 100%;
  position: absolute;
  top: 42%;
  left: 50%;
  line-height: 1.2;
  transform: translate(-50%, -50%);
  background-color: #d1efff;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
/* 表のスタイル 1*/
/* styles.css */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: 20px;
}
th, td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #000000;
}
th {
  background-color: #f2f2f2;
  font-weight: bold;
}
tr:hover {
  background-color: #f5f5f5;
}
#infoContainer3 {
  display: none;
}
.hidden {
  display: none;
}
#showInfoButton3 {
  cursor: pointer;
  background-color: #FF96AD;
  color: #fff;
  border: none;
  padding: 10px 45px;
  font-size: 14px;
  border-radius: 5px;
}
#showInfoButton3:hover {
  background-color: #0A008C;
}
#closeButton3 {
  cursor: pointer;
  float: right;
  font-weight: bold;
  font-size: 18px;
}
/*ここまでスケジュールプログラム*/
/*ここからスケジュールプログラム*/
/* 隠された状態のスタイル */
.hidden {
  display: none;
}
/* 浮き出すスタイル */
#infoContainer4 {
  width: 100%;
  position: absolute;
  top: 42%;
  left: 50%;
  line-height: 1.2;
  transform: translate(-50%, -50%);
  background-color: #d1efff;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
/* 表のスタイル 1*/
/* styles.css */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: 20px;
}
th, td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #000000;
}
th {
  background-color: #f2f2f2;
  font-weight: bold;
}
tr:hover {
  background-color: #f5f5f5;
}
#infoContainer4 {
  display: none;
}
.hidden {
  display: none;
}
#showInfoButton4 {
  cursor: pointer;
  background-color: #FF0000;
  color: #fff;
  border: none;
  padding: 10px 45px;
  font-size: 14px;
  border-radius: 5px;
}
#showInfoButton4:hover {
  background-color: #0A008C;
}
#closeButton4 {
  cursor: pointer;
  float: right;
  font-weight: bold;
  font-size: 18px;
}
/*ここまでスケジュールプログラム*/
/*ここからスケジュールプログラム*/
/* 隠された状態のスタイル */
.hidden {
  display: none;
}
/* 浮き出すスタイル */
#infoContainer5 {
  width: 100%;
  position: absolute;
  top: 42%;
  left: 50%;
  line-height: 1.2;
  transform: translate(-50%, -50%);
  background-color: #d1efff;
  padding: 20px;
  border: 1px solid #BFBFBF;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
/* 表のスタイル 1*/
/* styles.css */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: 20px;
}
th, td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #000000;
}
th {
  background-color: #f2f2f2;
  font-weight: bold;
}
tr:hover {
  background-color: #f5f5f5;
}
#infoContainer5 {
  display: none;
}
.hidden {
  display: none;
}
#showInfoButton5 {
  cursor: pointer;
  background-color: #A962ED;
  color: #fff;
  border: none;
  padding: 10px 45px;
  font-size: 14px;
  border-radius: 5px;
}
#showInfoButton5:hover {
  background-color: #0A008C;
}
#closeButton5 {
  cursor: pointer;
  float: right;
  font-weight: bold;
  font-size: 18px;
}
/*ここまでスケジュールプログラム*/
/*ここからスケジュールプログラム*/
/* 隠された状態のスタイル */
.hidden {
  display: none;
}
/* 浮き出すスタイル */
#infoContainer6 {
  width: 100%;
  position: absolute;
  top: 42%;
  left: 50%;
  line-height: 1.2;
  transform: translate(-50%, -50%);
  background-color: #a7e2aa;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}
/* 表のスタイル 1*/
/* styles.css */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: 20px;
}
th, td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #000000;
}
th {
  background-color: #f2f2f2;
  font-weight: bold;
}
tr:hover {
  background-color: #f5f5f5;
}
#infoContainer6 {
  display: none;
}
.hidden {
  display: none;
}
#showInfoButton6 {
  cursor: pointer;
  background-color: #0A008C;
  color: #fff;
  border: none;
  padding: 10px 15px;
  font-size: 14px;
  border-radius: 5px;
}
#showInfoButton6:hover {
  background-color: #0A008C;
}
#closeButton6 {
  cursor: pointer;
  float: right;
  font-weight: bold;
  font-size: 18px;
}
/*ここまでスケジュールプログラム*/
/*ここからスケジュールプログラム*/
/* 隠された状態のスタイル */
.hidden {
  display: none;
}
/* 浮き出すスタイル */
#infoContainer7 {
  width: 100%;
  position: absolute;
  top: 42%;
  left: 50%;
  line-height: 1.2;
  transform: translate(-50%, -50%);
  background-color: #a7e2aa;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}
/* 表のスタイル 1*/
/* styles.css */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: 20px;
}
th, td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #000000;
}
th {
  background-color: #f2f2f2;
  font-weight: bold;
}
tr:hover {
  background-color: #f5f5f5;
}
#infoContainer7 {
  display: none;
}
.hidden {
  display: none;
}
#showInfoButton7 {
  cursor: pointer;
  background-color: #0A008C;
  color: #fff;
  border: none;
  padding: 10px 15px;
  font-size: 14px;
  border-radius: 5px;
}
#showInfoButton7:hover {
  background-color: #0A008C;
}
#closeButton7 {
  cursor: pointer;
  float: right;
  font-weight: bold;
  font-size: 18px;
}
/*ここまでスケジュールプログラム*/
/*ここからスケジュールプログラム*/
/* 隠された状態のスタイル */
.hidden {
  display: none;
}
/* 浮き出すスタイル */
#infoContainer8 {
  width: 100%;
  position: absolute;
  top: 42%;
  left: 50%;
  line-height: 1.2;
  transform: translate(-50%, -50%);
  background-color: #a7e2aa;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}
/* 表のスタイル 1*/
/* styles.css */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: 20px;
}
th, td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #000000;
}
th {
  background-color: #f2f2f2;
  font-weight: bold;
}
tr:hover {
  background-color: #f5f5f5;
}
#infoContainer8 {
  display: none;
}
.hidden {
  display: none;
}
#showInfoButton8 {
  cursor: pointer;
  background-color: #0A008C;
  color: #fff;
  border: none;
  padding: 10px 15px;
  font-size: 14px;
  border-radius: 5px;
}
#showInfoButton8:hover {
  background-color: #0A008C;
}
#closeButton8 {
  cursor: pointer;
  float: right;
  font-weight: bold;
  font-size: 18px;
}
/*ここまでスケジュールプログラム*/
/* アニメーション文字 */
.title1 {
  overflow: hidden;
  transform: translate(-100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
  color: #aa8f7b;
  font-family: 'Josefin Sans', sans-serif;
}
.title1 span {
  display: block;
  transform: translate(100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}
.title1.-visible, .title1.-visible span {
  transform: translate(0, 0);
}
.sentence {
  overflow: hidden;
  transform: translate(-100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
  font-family: "Yu Gothic Medium";
  font-size: 16px;
  text-align: center;
}
.sentence span {
  display: block;
  transform: translate(100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}
.sentence.-visible, .sentence.-visible span {
  transform: translate(0, 0);
}



/* 動画再生*/
/* 動画コンテナのスタイル */
.video-container {
  width: auto; /* コンテナの幅を調整 */
  height: 200px; /* コンテナの高さを調整 */
  overflow: hidden; /* コンテナ内のオーバーフローを隠す */
  position: fixed;
  bottom: 20px; /* 画面下端からの距離を調整 */
  right: 20px; /* 画面右端からの距離を調整 */
  z-index: 9999; /* 他の要素よりも上に表示 */
}
/* 動画のスタイル */
video {
  width: 100%; /* 動画の幅を100%に設定 */
  height: 100%; /* 動画の高さを100%に設定 */
  object-fit: cover; /* 動画のアスペクト比を保持しつつコンテナに合わせる */
}
/* 画像表示スライド*/
.container1 {
  position: relative;
}
.image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s;
}
.show-image {
  opacity: 1;
}
@keyframes shake {
  0%, 100% {
    transform: translate(-50%, -50%) translateX(0);
  }
  25%, 75% {
    transform: translate(-50%, -50%) translateX(10px);
  }
}
/* 画像モーダル表示*/
.vlist {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}
.vlist li {
  margin: 10px;
  text-align: center;
}
.vlist li a {
  text-decoration: none;
}
.modal {
  display: none;
  position: fixed;
  z-index: 9999; /* モーダルウィンドウを前面に表示 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(29, 29, 29, 0.59);
  overflow: auto;
}
.modal-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.modal-image {
  max-width: 100%;
  max-height: 100%;
  z-index: -50;
  animation: floatAnimation 2s infinite alternate; /* アニメーションの適用 */
  transition: transform 0.2s ease-in-out; /* トランジションを追加 */
}
.modal-image.clicked {
  transform: translateX(-5px) rotate(-5deg); /* クリック時のアニメーション */
}
@keyframes floatAnimation {
  0% {
    transform: translateY(0); /* 初期位置 */
  }
  50% {
    transform: translateY(-10px); /* 上に10px移動 */
  }
  100% {
    transform: translateY(0); /* 初期位置に戻る */
  }
}
/* キャプションの文字色を白に設定 */
#caption {
  color: white;
}
/* 背景画像アニメーション */
/* 丸い要素のスタイル */
.circle {
  width: 40px; /* 丸の幅 */
  height: 40px; /* 丸の高さ */
  background-color: rgba(186, 226, 255, 0.73); /* 丸の色 */
  border-radius: 50%;
  position: absolute;
  animation: fade-in 2s ease, fade-out 2s ease, float-up 5s ease-in-out infinite, move 20s linear infinite;
  opacity: 0; /* 最初は非表示 */
}
@keyframes fade-in {
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes float-up {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px); /* もっとふわっと持ち上がるように調整 */
    opacity: 0.7;
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes move {
  from {
    transform: translate(0, 100%);
  }
  to {
    transform: translate(0, -100%);
  }
}
/* 垂直スクロールバーのデザイン */ ::-webkit-scrollbar {
  width: 20px; /* スクロールバーの幅を設定 */
}
::-webkit-scrollbar-thumb {
  background-color: #70A7FC; /* スクロールバーのつまみ部分の背景色を設定 */
  border-radius: 6px; /* つまみ部分の角を丸くする */
}
/* 水平スクロールバーのデザイン */ ::-webkit-scrollbar-track {
  background-color: #CAE7FF; /* スクロールバーのトラック部分の背景色を設定 */
}
::-webkit-scrollbar-thumb:hover {
  background-color: #364B7E; /* ホバー時のつまみ部分の背景色を設定 */
  border-radius: 8px; /* つまみ部分の角を丸くする */
}
/*画像がふわっとでるスタイル*/
/* 画像の基本スタイル */
.image-style {
  width: 345px; /* 画像の幅 */
  height: auto; /* 高さは自動調整 */
  margin: 10px; /* 画像の外側の余白 */
  border: 0px solid black; /* 枠線 */
  display: block;
  margin-left: auto;
  margin-right: auto;
  animation: swayUpDown 2s infinite; /* 上下にゆらゆらするアニメーションを適用 */
}
/* フェードイン効果 */
.fade-in {
  animation-duration: 2.5s;
  animation-fill-mode: forwards;
}
/* 上下にゆらゆらするアニメーションの定義 */
@keyframes swayUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px); /* 上に10px移動 */
  }
}
/* 受験の流れアコーディオン */
.expandableButton {
  background-color: #FF4F00; /* gray */
  border: none;
  color: white;
  padding: 15px 32px;
  text-decoration: none;
  display: inline-block;
  width: 350px;
  font-size: 16px;
  margin: 2px auto;
  cursor: pointer;
}
.expandableContent {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
  background-color: #f1f1f1;
  width: 100%;
}
/* 展開されたコンテンツ内のテキストを左寄せにする */
.expandableContent p {
  text-align: left;
  width: 100%;
}
/* アクセスのアコーディオン */
.expandableButtonAC {
  background-color: #FF5F00;
  border: none;
  color: white;
  padding: 15px 32px;
  text-decoration: none;
  display: block; /* ボタンをブロック要素として扱う */
  width: 320px; /* Button width */
  font-size: 14px;
  margin: 0 auto; /* 中央配置のためのmargin */
  cursor: pointer;
  border-bottom: 2px solid black; /* 下線を追加 */
  justify-content: center;
  align-items: center;
  text-align: center;
}
.expandableContentAC {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out; /* Animation */
  background-color: #f1f1f1;
  width: 320px; /* 幅を指定 */
  margin: 0 auto; /* 中央配置のためのmargin */
  text-align: center; /* 中央揃え */
}
/* ボタンの親要素（<dd>）を中央に配置 */
dd5 {
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 auto;
}
/* ボタンの親要素（<p>）を中央に配置 */
pd5 {
  text-align: center;
  width: 330px; /* Button width */
  margin: 0 auto; /* 中央配置のためのmargin */
  justify-content: center;
  align-items: center;
  text-align: center;
}
/* オフィスアワーボタン */
.officeHourButton {
  background-color: #8A2BE2; /* 紫色 */
  color: white;
  padding: 25px 20px;
  border: none;
  border-radius: 15px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 330px;
  text-align: center;
  transition: all 1s;
  display: block;
  text-decoration: none;
  margin: 10px auto;
  animation: floatAnimation 3s ease-in-out infinite; /* アニメーションの追加 */
}
.officeHourButton:hover {
  background-color: #9932CC;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
@keyframes floatAnimation {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
/* Uニュースボタン */
.unewsButton {
  background-color: #FF007E;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 15px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 330px;
  text-align: center;
  transition: all 1s;
  display: block;
  text-decoration: none;
  margin: 10px auto;
  animation: floatAnimation 5s ease-in-out infinite; /* アニメーションの追加 */
}
.unewsButton:hover {
  background-color: #9932CC;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
@keyframes floatAnimation {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
/* LINE登録ボタン */
.linehovButton {
  background-color: #07B800;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 15px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 330px;
  text-align: center;
  transition: all 1s;
  display: block;
  text-decoration: none;
  margin: 10px auto;
  animation: floatAnimation 3s ease-in-out infinite; /* アニメーションの追加 */
}
.linehovButton:hover {
  background-color: #E80000;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
@keyframes floatAnimation {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
/* フェードエフェクト */
.fadein1 {
  opacity: 0;
  transform: translate(0, 100px);
  transition: all 1s;
}
.fadein1.active {
  opacity: 1;
  transform: translate(0, 0);
}
/* バックグラウンドカラー */
.backgroundOC {
  background-color: #FFFFFF;
}
.backgroundEX {
  background-color: #D0EBDC;
}
.backgroundAC {
  background-color: #FFFFFF;
}
.backgroundEX2 {
  background-color: #FFF8E4;
}
.backgroundOH {
  background-color: #FCE4FF;
}
.mapcenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* ページ下部ボタン1 */
.pagetbutton1 {
  transition: .5s ease;
  display: none;
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: 36px;
  height: 50px;
  z-index: 9999;
}
.pagetbutton1 a {
  position: relative;
  display: block;
  width: 100%;
}
.pagetbutton1 a img {
  width: 100%;
}
@media screen and (min-width: 415px) {
  .pagetbutton1 {
    /* スマートフォン用スタイルを適用する */
    display: none;
  }
}
@media screen and (min-width: 414px) {
  .pagetbutton1 {
    /* PC用スタイルを適用する */
    display: flex;
    margin-left: auto;
    margin-right: auto;
  }
}
/* ページ下部ボタン2 */
.pagetbutton2 {
  transition: .5s ease;
  display: none;
  position: fixed;
  left: 50%;
  bottom: 70px;
  transform: translateX(10%);
  width: 100px;
  height: 0px;
  z-index: 9999;
}
.pagetbutton2 a {
  position: relative;
  display: block;
  width: 100%;
}
.pagetbutton2 a img {
  width: 100%;
}
@media screen and (min-width: 415px) {
  .pagetbutton2 {
    /* スマートフォン用スタイルを適用する */
    display: none;
  }
}
@media screen and (min-width: 414px) {
  .pagetbutton2 {
    /* PC用スタイルを適用する */
    display: flex;
    margin-left: auto;
    margin-right: auto;
    left: calc(50% + 20px); /* ボタン1の右側に配置 */
  }
}
/* メニューボタン関係 */
.menu-list.product-menu-list dl dd ul li a:before {
  position: absolute;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  content: "";
  top: 50%;
  left: 0;
  width: 50px;
  height: 35px
}
.menu-list.information-menu-list dl dd {
  padding-left: 10px
}
.menu-list.information-menu-list dl dd ul li:not(:last-child) {
  margin-bottom: 20px
}
.menu-list.information-menu-list dl dd ul li a {
  font-size: 1.4rem;
  letter-spacing: .06em
}
.menu-list dl dt {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
  font-size: 1.4rem;
  letter-spacing: .06em
}
.menu-list dl dt:before {
  position: absolute;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  content: "";
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #ededed;
  z-index: 0
}
.menu-list dl dt span {
  position: relative;
  display: inline-block;
  padding: 0 10px;
  background: #fff;
  z-index: 2
}
.trigger {
  position: absolute;
  -webkit-transform: translate(50%, 0);
  transform: translate(50%, 0);
  position: fixed;
  top: 0;
  right: 50%;
  margin-right: -150px;
  width: 62px;
  height: 62px;
  z-index: 10001 !important;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 62px;
  height: 62px;
  background: rgba(255, 255, 255, 0.00);
  cursor: pointer
}
.trigger .menu-trigger, .trigger .menu-trigger span {
  display: inline-block;
  transition: all 2.5s
}
.trigger .menu-trigger {
  position: relative;
  width: 55px;
  height: 18px
}
.trigger .menu-trigger span {
  position: absolute;
  left: 0;
  width: 50px;
  height: 4px; /* 三本線の太さを調整する値に変更 */
  background: #000;
  border-radius: 10px; /* 線の角を丸くするための値に変更 */
}
.trigger .menu-trigger span:nth-of-type(1) {
  top: 0;
}
.trigger .menu-trigger span:nth-of-type(2) {
  top: 8px;
}
.trigger .menu-trigger span:nth-of-type(3) {
  bottom: -2px;
}
.trigger .menu-trigger.active span:nth-of-type(1) {
  width: 20%;
  -webkit-transform: translateY(0) rotate(0);
  transform: translateY(0) rotate(0);
}
.trigger .menu-trigger.active span:nth-of-type(2) {
  width: 20%;
  display: block;
}
.trigger .menu-trigger.active span:nth-of-type(3) {
  width: 20%;
  -webkit-transform: translateY(0) rotate(0);
  transform: translateY(0) rotate(0);
}
.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch
}
.hamburger-menu-back {
  display: none;
  position: absolute;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  position: fixed;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 450px;
  height: 100%;
  z-index: 5000
}
.hamburger-menu-back:before {
  content: "";
  position: absolute;
  top: 62px;
  left: 0;
  width: 100%;
  height: calc(100% - 62px);
  background: rgba(0, 0, 0, .5)
}
.hamburger-wrapper {
  position: relative;
  width: 75%;
  height: 100%;
  padding: 75px 10px 1px;
  overflow-y: scroll;
  background: #fff
}
.hamburger-wrapper .hamburger-logo {
  margin: 0 0 35px;
  text-align: center
}
.hamburger-wrapper .action-menu-list {
  margin: 0 0 30px
}
.hamburger-wrapper .action-menu-list ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}
.hamburger-wrapper .action-menu-list ul li {
  margin: 0 6px
}
.hamburger-wrapper .action-menu-list ul li:nth-child(2) a:before {
  background: url(../common/images/icon_hamburger_cart.svg) center/contain no-repeat
}
.hamburger-wrapper .action-menu-list ul li a {
  display: block;
  position: relative;
  padding: 45px 0 0;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: .12em
}
.hamburger-wrapper .action-menu-list ul li a:before {
  position: absolute;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  content: "";
  top: 0;
  left: 50%;
  width: 44px;
  height: 38px;
  background: url(../common/images/icon_hamburger_mypage.svg) center/contain no-repeat
}
.hamburger-wrapper .menu-list-contents dl:not(:last-child) {
  margin: 0 0 40px
}
.hamburger-wrapper .menu-list-contents dl:first-child dd ul li a {
  position: relative;
  padding-left: 60px
}
.hamburger-wrapper .menu-list-contents dl:first-child dd ul li a:before {
  position: absolute;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  content: "";
  top: 50%;
  left: 3px;
  width: 53px;
  height: 43px;
  background: url(../photoimage/moc.png) center/contain no-repeat
}
.hamburger-wrapper .menu-list-contents dl:first-child dd ul li:nth-child(2) a:before {
  background: url(../photoimage/mex.png) center/contain no-repeat
}
.hamburger-wrapper .menu-list-contents dl:first-child dd ul li:nth-child(3) a:before {
  background: url(../photoimage/mexm.png) center/contain no-repeat
}
.hamburger-wrapper .menu-list-contents dl:first-child dd ul li:nth-child(4) a:before {
  background: url(../photoimage/mac.png) center/contain no-repeat
}
.hamburger-wrapper .menu-list-contents dl:first-child dd ul li:nth-child(5) a:before {
  background: url(../photoimage/moo.png) center/contain no-repeat
}
.hamburger-wrapper .menu-list-contents dl.other dt {
  padding: 0 15px;
  text-align: left
}
.hamburger-wrapper .menu-list-contents dl.other dd ul {
  padding: 10px 0 0
}
.hamburger-wrapper .menu-list-contents dl.other dd ul li {
  border: none;
  height: 25px
}
.hamburger-wrapper .menu-list-contents dl.other dd ul li:not(:last-child) {
  margin: 0 0 10px
}
.hamburger-wrapper .menu-list-contents dl.other dd ul li a:after {
  display: none
}
.hamburger-wrapper .menu-list-contents dl dt {
  margin: 0 0 10px;
  padding: 0 15px;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.5
}
.hamburger-wrapper .menu-list-contents dl dd ul {
  border-top: 1px solid #ededed
}
.hamburger-wrapper .menu-list-contents dl dd ul li {
  width: 100%;
  height: 55px;
  border-bottom: 1px solid #ededed
}
.hamburger-wrapper .menu-list-contents dl dd ul li a {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 0px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .12em
}
.menu-list {
  width: 245px
}
.menu-list.product-menu-list {
  margin-bottom: 55px
}
.menu-list.product-menu-list dl dd ul li {
  position: relative
}
.menu-list.product-menu-list dl dd ul li:not(:last-child) {
  margin-bottom: 15px
}
.menu-list.product-menu-list dl dd ul li a {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  align-items: center;
  width: 100%;
  height: 35px;
  padding-left: 65px;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .06em
}
/* メニュー内部アイコン */
.menu-list-contents2 ul {
  list-style-type: none;
  margin: 20px;
  padding: 0;
  display: flex;
}
.menu-list-contents2 li {
  margin-right: 10px; /* 適宜調整してください */
}
.menu-list-contents2 img {
  width: 40px; /* アイコンの幅を調整してください */
  height: auto; /* アイコンの高さを調整してください */
  margin: 1px; /* アイコンの余白を調整してください */
}
/* センタリング用のスタイル */
.container-custom {
  width: 380px; /* パーツの幅 */
  margin: 0 auto; /* 横方向に中央に配置 */
  text-align: center; /* 中央揃え */
}
/* アクセスモーダル */
.unique-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  width: 380px;
  height: 380px;
  margin: 50px auto;
}
.unique-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}
.unique-modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}
.unique-modal-content img {
  max-width: 380px;
  height: auto;
}
.unique-modal-content img.expanded {
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
  cursor: zoom-out;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 9999;
}


/* 新しく追加されたスタイル */
.unique-modal-btn {
  position: relative;
}
.unique-modal-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.unique-modal-btn span {
  position: absolute;
  bottom: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 5px 0px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
}
.close-btn {
  position: absolute;
  top: 145px;
  right: calc(50% + -190px); /* 中央から右に30px移動 */
  font-size: 20px; /* バツのサイズを調整 */
  background-color: transparent; /* 背景色を透明に設定 */
  border: 2px solid aqua; /* 2pxのアクア色のボーダーを設定 */
  color: aqua;
  border-radius: 50%; /* 丸くするために50%のボーダーラジアスを設定 */
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center; /* テキストを中央揃え */
  padding: 5px; /* ボタンのパディングを追加 */
}
.close-btn span {
  font-size: 10px; /* テキストを少し小さくする */
}
.close-btn:hover span {
  display: inline-block; /* ホバー時に「閉じる」テキストを表示 */
  margin-left: 35px; /* テキストとバツの間に5pxの余白を追加 */
}
.new-badge {
  display: inline-block;
  background-color: red;
  color: white;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 12px; /* Added font-size property */
  margin-right: 1em; /* 左に余白を4文字分 */
}
.left-aligned {
  text-align: left;
  margin-left: 2em; /* 左に余白を2文字分 */
}
.highlight {
  background-color: hsla(62, 100%, 50%, 1.00); /* 文字背景を黄色に */
  line-height: 1.7; /* 適切な行間に設定 */
}
.underline {
  text-decoration: underline; /* リンクに下線を追加 */
}
/* トップ横スライド*/
.custom-carousel-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  margin-bottom: 30px; /* 下部の余白を追加 */
  margin-top: 20px; /* 下部の余白を追加 */
}
.custom-carousel {
  position: relative;
  width: 400px;
  overflow: hidden;
  border-radius: 15px;
  background-color: #ffffff;
}
.custom-carousel-inner {
  display: flex;
  transition: transform 0.5s ease-in-out;
}
.custom-carousel-item {
  width: 400px;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.custom-carousel-item img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 15px;
}
.custom-prev, .custom-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #F9499B;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 50%;
}
.custom-prev {
  left: 15px;
}
.custom-next {
  right: 15px;
}
.custom-dots {
  text-align: center;
  position: absolute;
  bottom: 15px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.custom-dot {
  height: 15px;
  width: 15px;
  margin: 0 5px;
  background-color: #949494;
  border-radius: 30%;
  display: inline-block;
  cursor: pointer;
  transition: background-color 0.3s;
}
.custom-dot.active {
  background-color: #CF0066;
}


/* トップ画像配列スタイル */
        .vertical-images {
            display: flex;
            flex-direction: column;
            align-items: center; /* 中央揃え */
            gap: 10px; /* 画像間のスペースを小さく設定 */
        }
        figure {
            text-align: center; /* 補足を中央揃え */
            margin: 10px; /* 各画像全体の外側余白 */
            padding: 10px; /* 画像全体の内側余白 */
            border: 1px solid #ccc; /* 画像を囲む枠線 */
            border-radius: 8px; /* 枠線を角丸にする */
            background-color: #f9f9f9; /* 背景色 */
        }
        img {
            max-width: 100%; /* 画像が画面幅を超えないようにする */
            height: auto; /* 縦横比を保つ */
        }
        figcaption {
            margin-top: 8px; /* 画像との間隔 */
            font-size: 14px; /* 補足の文字サイズ */
            color: #555; /* 補足の文字色 */
        }



/* 通知の赤い丸 */
.notification-image {
  position: relative;
  display: inline-block;
}

.notification-image::after {
  content: "";
  position: absolute;
  top: 5px;   /* 上からの位置調整 */
  right: 10px; /* 右からの位置調整 */
  width: 30px;
  height: 30px;
  background-color: red;
  border-radius: 70%;

  z-index: 10;
}

.scroll-hint {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 2147483646;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, rgba(255, 79, 216, 0.92), rgba(124, 58, 237, 0.92));
  border: 2px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28), 0 0 18px rgba(255, 79, 216, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
  animation: scrollHintFloat 2.2s ease-in-out infinite;
}

.scroll-hint__text {
  font-size: 13px;
  letter-spacing: 0.12em;
  font-weight: 800;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.scroll-hint__arrow {
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.2em;
  animation: scrollHintBounce 1.2s ease-in-out infinite;
}

.scroll-hint::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  opacity: 0.7;
  animation: scrollHintPulse 1.8s ease-in-out infinite;
  pointer-events: none;
}

.scroll-hint::after {
  content: "";
  position: absolute;
  top: -14px;
  right: -8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%);
  opacity: 0.9;
  animation: scrollHintSparkle 2.4s ease-in-out infinite;
}

.scroll-hint.is-visible {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0);
}

/* さりげない“かっこいい”アニメ演出 */
@keyframes softFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  }
  50% {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.26);
  }
}

@keyframes dotPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

.pc_logo img {
  animation: softFloat 4.5s ease-in-out infinite;
}

.pc_logo img:nth-child(2) {
  animation-delay: 0.8s;
}

.notification-image::after {
  animation: dotPulse 1.8s ease-in-out infinite;
}

.notification-image img,
.custom-carousel-item img,
.vertical-images img {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

.notification-image img:hover,
.custom-carousel-item img:hover,
.vertical-images img:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
}

.unique-modal-btn {
  animation: glowPulse 3.2s ease-in-out infinite;
}

.menu-trigger span {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}

.menu-trigger:hover span {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .pc_logo img,
  .unique-modal-btn,
  .notification-image::after {
    animation: none;
  }
  .notification-image img,
  .custom-carousel-item img,
  .vertical-images img,
  .menu-trigger span {
    transition: none;
  }
}

@keyframes scrollHintFloat {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-6px);
  }
}

@keyframes scrollHintBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}

@keyframes scrollHintPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.04);
    opacity: 0.9;
  }
}

@keyframes scrollHintSparkle {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-6px) scale(1.1);
    opacity: 1;
  }
}

:root {
  --teen-grad-1: linear-gradient(135deg, #7c3aed, #22d3ee);
  --teen-grad-2: linear-gradient(135deg, #ff4fd8, #ffb347);
  --teen-grad-line: linear-gradient(135deg, #22c55e, #16f2b3);
  --teen-shadow: 0 10px 20px rgba(0, 0, 0, 0.18), 0 0 0 2px rgba(255, 255, 255, 0.65) inset;
}

.officeHourButton,
.linehovButton,
.unewsButton,
[id^="showInfoButton"] {
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.08em;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background-position 0.4s ease;
  background-size: 200% 200%;
  box-shadow: var(--teen-shadow);
  opacity: 1;
}

.officeHourButton {
  background-image: var(--teen-grad-1);
}

.linehovButton {
  background-image: var(--teen-grad-line);
}

.unewsButton {
  background-image: var(--teen-grad-2);
}

[id^="showInfoButton"] {
  background-image: linear-gradient(135deg, #0ea5e9, #6366f1);
  color: #fff;
  border: none;
}

.officeHourButton:hover,
.linehovButton:hover,
.unewsButton:hover,
[id^="showInfoButton"]:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
  filter: brightness(1.05);
  opacity: 1;
}

.officeHourButton:active,
.linehovButton:active,
.unewsButton:active,
[id^="showInfoButton"]:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
  filter: brightness(0.98);
}

.officeHourButton:focus-visible,
.linehovButton:focus-visible,
.unewsButton:focus-visible,
[id^="showInfoButton"]:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
}

.officeHourButton::after,
.linehovButton::after,
.unewsButton::after,
[id^="showInfoButton"]::after {
  content: "";
  position: absolute;
  top: -120%;
  left: -40%;
  width: 180%;
  height: 220%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 70%);
  transform: translateX(-30%) rotate(10deg);
  transition: transform 0.5s ease;
  pointer-events: none;
}

.officeHourButton:hover::after,
.linehovButton:hover::after,
.unewsButton:hover::after,
[id^="showInfoButton"]:hover::after {
  transform: translateX(35%) rotate(10deg);
}

.unique-modal-btn {
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.unique-modal-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22);
  filter: brightness(1.04);
}

.unique-modal-btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.unique-modal-btn span {
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

@media (prefers-reduced-motion: reduce) {
  .officeHourButton,
  .linehovButton,
  .unewsButton,
  [id^="showInfoButton"],
  .unique-modal-btn {
    transition: none;
  }
  .officeHourButton::after,
  .linehovButton::after,
  .unewsButton::after,
  [id^="showInfoButton"]::after {
    transition: none;
  }
}