@charset "UTF-8";
img {
  display: inherit;
}

a {
  text-decoration: none;
  transition: all 0.5s ease-in-out;
}

a:hover {
  filter: contrast(0.5) brightness(1.5);
}

.alignRight {
  text-align: right;
}

.alignCenter {
  text-align: center;
}

.alignLeft {
  text-align: left;
}

/* --------------------------------------------------------------------------------
 * フレームとvideoを16対9の比率でレスポンシブ対応
 * -------------------------------------------------------------------------------- */
.flexFrame {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.flexFrame iframe,
.flexFrame video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------------
 * PCとスマホで表示分け
 * -------------------------------------------------------------------------------- */
.spView {
  display: none;
}
@media screen and (max-width: 767px) {
  .spView {
    display: inherit;
  }
}

@media screen and (max-width: 767px) {
  .pcView {
    display: none;
  }
}
/* --------------------------------------------------------------------------------
 * パララックスをCSSで実装したい
 * -------------------------------------------------------------------------------- */
.basicParallax {
  position: relative;
  overflow: clip;
}
.basicParallax > img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
  animation: basicParallax linear both;
  animation-timeline: view();
}

.reverseParallax {
  position: relative;
  overflow: clip;
}
.reverseParallax > img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
  animation: reverseParallax linear both;
  animation-timeline: view();
  animation-range: cover -50% cover 100%;
}

@keyframes basicParallax {
  0% {
    object-position: center bottom;
  }
  100% {
    object-position: center top;
  }
}
@keyframes reverseParallax {
  0% {
    object-position: center top;
  }
  100% {
    object-position: center bottom;
  }
}
/* --------------------------------------------------------------------------------
 * アコーディオンアニメーションをCSSで実装したい
 * -------------------------------------------------------------------------------- */
details {
  /* --------アコーディオンの中身のスタイル-------- */
  /* --------アコーディオンの中身のスタイル（開いている時）-------- */
  /* アコーディオンが開いた時のスタイル */
}
details::details-content {
  transition: height 0.4s, opacity 0.4s, content-visibility 0.4s allow-discrete;
  height: 0;
  opacity: 0;
  overflow: clip;
}
details[open]::details-content {
  opacity: 1;
}
details[open]::after {
  transform: rotate(180deg);
}
details summary {
  cursor: pointer;
  list-style: none;
  /* Safariで表示されるデフォルトの三角形アイコンを消します */
}
details summary::marker {
  display: none;
}
details summary::-webkit-details-marker {
  display: none;
}
details > * {
  overflow: clip;
}

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords; /* height:0（数値型） → auto（文字型） のアニメーションを可能にするための指定 */
  }
  details[open]::details-content {
    height: auto;
  }
}
/* allow-keywords が使えないときの対処 */
@supports not (interpolate-size: allow-keywords) {
  details[open]::details-content {
    height: 150px;
    overflow-y: scroll; /* 溢れる場合はスクロール可能にする */
  }
}

/*# sourceMappingURL=nsStyles.css.map */