/* runtime */
/* モジュールが開いている間、ページのスクロールを止める */
html.is-scroll-locked {
  overflow: hidden;
}

/* JSで作るダイアログ（dialog・video-modal）。中身の見た目は、中の要素のclassで付ける */
dialog.modal {
  max-width: calc(100vw - 2rem);
  max-height: calc(100svh - 2rem);
  padding: 0;
  overflow: auto;
  border: 0;
  background: transparent;
  color: inherit;

  &::backdrop {
    background-color: hsl(from var(--modal-backdrop, var(--ink)) h s l / 70%);
  }
  &[open] {
    animation: modal-in 250ms ease;
  }
}
@keyframes modal-in {
  from {
    opacity: 0;
    scale: 0.98;
  }
}
@media (prefers-reduced-motion: reduce) {
  dialog.modal[open] {
    animation: none;
  }
}

/* menu */
/* メニューのボタン。中に .menu__icon を置くと、3本線のアイコンになり、開くと×に変わる */
.menu__trigger {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu__icon {
  position: relative;
  display: block;
  width: var(--menu-icon-width, 1.5rem);
  height: var(--menu-icon-line, 2px);
  background-color: currentColor;
  transition: background-color 0s var(--menu-duration, 300ms);

  &::before,
  &::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    transition:
      translate var(--menu-duration, 300ms) ease,
      rotate var(--menu-duration, 300ms) ease;
  }
  &::before {
    translate: 0 calc(var(--menu-icon-gap, 0.4375rem) * -1);
  }
  &::after {
    translate: 0 var(--menu-icon-gap, 0.4375rem);
  }
}
.menu.is-open .menu__icon {
  background-color: transparent;
  transition-delay: 0s;

  &::before {
    translate: 0;
    rotate: 45deg;
  }
  &::after {
    translate: 0;
    rotate: -45deg;
  }
}

/* slider */
/* 前後のボタンと、点の見た目の土台。色は文字の色（color-fg）に合わせる */
.slider {
  --swiper-pagination-color: currentColor;
  --swiper-pagination-bullet-inactive-color: currentColor;
  --swiper-pagination-bullet-inactive-opacity: 0.25;
  --swiper-pagination-progressbar-bg-color: hsl(from currentColor h s l / 20%);
}
.slider__prev,
.slider__next {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  &.swiper-button-disabled {
    opacity: 0.3;
    pointer-events: none;
  }
  &.swiper-button-lock {
    display: none;
  }
}
.slider__pagination {
  display: flex;
  justify-content: center;
  gap: var(--slider-bullet-gap, 0.5rem);

  & .swiper-pagination-bullet {
    margin: 0 !important;
  }
}
.slider__pagination.swiper-pagination-progressbar {
  position: relative;
  height: var(--slider-progress-height, 2px);
}

/* scroll-state */
/* 下に向かってスクロールしている間、要素（固定したヘッダーなど）を上に隠す */
.hide-on-scroll-down {
  transition: translate var(--duration) var(--easing);
}
.is-scroll-down:not(.is-menu-open) .hide-on-scroll-down {
  translate: 0 -100%;
}

/* map-embed */
.map-embed {
  position: relative;

  & > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}

/* blog */
/**
 * ニュース / ブログ関連
 *
 * Smooooth の一覧・記事出力に対応するスタイルをまとめたファイル。
 * 12_main.css からは、土台のリセットと汎用の .list / .__mat を残して切り出した。
 */

:root {
  /* サムネイルに画像が無いときのフォールバック。案件ごとに差し替える */
  --thumbnail-fallback: url("/system_panel/uploads/images/ogp.png");

  /* ページネーション */
  --pagination-gap: 1.25rem;
  --pagination-item-size: 3rem;
  --pagination-item-radius: 0.25rem;
  --pagination-nav-padding-x: 0.75rem;
  --pagination-hover-bg: hsl(from var(--ink) h s l / 0.06);
  --pagination-current-bg: var(--ink);
  --pagination-current-fg: var(--snow);

  /* 記事本文。罫線・補助テキストの色と、コードブロックや表ヘッダの下地 */
  --article-rule-color: var(--light-gray);
  --article-muted-color: var(--dark-gray);
  --article-surface: hsl(from var(--ink) h s l / 0.05);
}

/**
 * ページネーション
 *
 * こちらが書けるのは <div class="webgene-pagination"></div> の空 div だけで、
 * ul の中身は CMS が生成する。実際の出力（2ページ目にいる場合）:
 *
 *   <div class="webgene-pagination">
 *     <ul>
 *       <li class="prev"><a>前へ</a></li>
 *       <li class="number"><a>1</a></li>
 *       <li class="number selected"><a>2</a></li>
 *       <li class="number"><a>3</a></li>
 *       <li class="next"><a>次へ</a></li>
 *     </ul>
 *   </div>
 *
 * prev / next は端のページでは出力されない。中身は常に a になる。
 *
 * .prev / .next / .number / .selected はいずれも総称的な名前なので、
 * 案件側の同名クラスと衝突しないよう .webgene-pagination の配下に限定する。
 */
.webgene-pagination {
  & ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--pagination-gap);
    padding: 0;
    margin: 0;

    & li {
      min-width: var(--pagination-item-size);
      line-height: var(--pagination-item-size);
      text-align: center;
      border-radius: var(--pagination-item-radius);

      & > a {
        display: block;
        color: inherit;
        text-decoration: none;
      }

      /* 前へ / 次へ は文字数が一定しないため、正方形ではなく
       * 左右の余白で形を作る */
      &.prev,
      &.next {
        padding-inline: var(--pagination-nav-padding-x);
      }

      &:hover {
        background-color: var(--pagination-hover-bg);
      }

      &.selected {
        background-color: var(--pagination-current-bg);
        color: var(--pagination-current-fg);
        cursor: default;

        &:hover {
          background-color: var(--pagination-current-bg);
        }
      }
    }
  }
}

/**
 * 前後の記事へのリンク（記事詳細）
 *
 * %prevPageLink.to("前の記事へ","前の記事はありません")% は、対象が無いとき
 * a にならずプレーンテキストへ置き換わる。リンクが無い状態を弱く見せる。
 */
.webgene-item-aroundPageLink {
  margin: 0;
  color: var(--gray);

  & a {
    color: var(--ink);
  }
}

/**
 * .webgene-item（記事カード）には既定のスタイルを置かない。
 *
 * カードの見た目は案件ごとに大きく違い、共通の既定を持つと必ず打ち消す作業が
 * 発生する。一覧に並ぶこと自体は .blog-list 側のグリッドで担保している。
 */

/* 件数・ページ位置の表示。中身は %pageItems% などを並べて自分で書く枠 */
.webgene-legend {
  font-size: 0.875rem;
  color: var(--gray);
  text-align: center;

  & p {
    margin: 0;
  }
}

/* 該当なしの表示。マークアップは 04_List.js が生成する */
.webgene-no-items {
  width: 100%;
  text-align: center;
  font-size: 0.875rem;
}

/**
 * サムネイル
 *
 * 比率の修飾子は 10_objects.css の .aspect-* と値が重複する。比率を指定するのは
 * 案件側の HTML で、稼働中の案件でクラスを付け替えるコストのほうが大きいため
 * 残している。新規のマークアップではユーティリティ側を使う。
 */
.thumbnail {
  position: relative;

  &.thumbnail--square {
    aspect-ratio: 1 / 1;
  }
  &.thumbnail--16x9 {
    aspect-ratio: 16 / 9;
  }
  &.thumbnail--3x2 {
    aspect-ratio: 3 / 2;
  }

  & img,
  & video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 画像が無いときのフォールバック。::before はインラインなので、
   * 箱いっぱいに広げるには絶対配置が要る */
  &:empty::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--thumbnail-fallback);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
}

/*
 * 今後スタイルを定義するためのプレースホルダー
 * リストのクラスに合わせてコピーして使用する
 */
.blog-list {
  & .webgene-blog {
    display: grid;
  }
  @media (min-width: 768px) {
    & .webgene-blog {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    & .webgene-pagination,
    & .webgene-legend,
    & .webgene-no-items {
      grid-column: span 2 / span 2;
    }
  }
  @media (min-width: 1200px) {
    & .webgene-blog {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    & .webgene-pagination,
    & .webgene-legend,
    & .webgene-no-items {
      grid-column: span 3 / span 3;
    }
  }
}

.article-body {
  & > p {
    margin: 1em 0;
  }

  & > h1,
  & > h2,
  & > h3,
  & > h4,
  & > h5,
  & > h6 {
    margin: 2em 0 1em;
  }

  & > *:first-child {
    margin-top: 0;
  }

  & > *:last-child {
    margin-bottom: 0;
  }

  & a,
  & a:hover {
    color: var(--blue);
    text-decoration: underline;
  }

  /* CMS の出力にはクラスが付かないため、要素セレクタで体裁を与える。
   * 12_main.css で見出しの font-weight は inherit にしてあり、そのままでは
   * 本文と見分けが付かないためここで戻す。 */
  & > h1 {
    font-size: 1.75em;
  }
  & > h2 {
    font-size: 1.5em;
  }
  & > h3 {
    font-size: 1.25em;
  }
  & > h4 {
    font-size: 1.125em;
  }
  & > h1,
  & > h2,
  & > h3,
  & > h4,
  & > h5,
  & > h6 {
    font-weight: 700;
    line-height: 1.4;
  }

  & > ul,
  & > ol {
    margin: 1em 0;
    padding-left: 1.5em;
  }
  & > ul {
    list-style: disc outside;
  }
  & > ol {
    list-style: decimal outside;
  }
  & li + li {
    margin-top: 0.5em;
  }
  & li > ul,
  & li > ol {
    margin: 0.5em 0;
  }

  & > blockquote {
    margin: 1.5em 0;
    padding: 0.75em 1.25em;
    border-left: 3px solid var(--article-rule-color);
    color: var(--article-muted-color);
  }

  & > figure {
    margin: 1.5em 0;
  }
  & figcaption {
    margin-top: 0.5em;
    font-size: 0.875em;
    color: var(--article-muted-color);
  }

  & img {
    height: auto;
  }

  /* 幅の広い表は本文をはみ出させず、表の中だけ横スクロールさせる */
  & > table {
    display: block;
    width: 100%;
    margin: 1.5em 0;
    overflow-x: auto;
    border-collapse: collapse;
  }
  & th,
  & td {
    padding: 0.5em 0.75em;
    border: 1px solid var(--article-rule-color);
  }
  & th {
    background-color: var(--article-surface);
    text-align: left;
    font-weight: 700;
  }

  & > pre {
    margin: 1.5em 0;
    padding: 1em;
    overflow-x: auto;
    background-color: var(--article-surface);
    border-radius: 0.25rem;
  }
  & code {
    font-family: var(--font-mono);
    font-size: 0.9375em;
  }
  & > pre code {
    font-size: inherit;
  }

  & > hr {
    margin: 2em 0;
    border: 0;
    border-top: 1px solid var(--article-rule-color);
  }

  & strong,
  & b {
    font-weight: 700;
  }
}

/**
 * 記事の画像のスタイル
 * Lightboxと併せて使用することを前提に、アスペクト比を固定している
 */
.item-images {
  & .item-image {
    & img {
      width: 100%;
      aspect-ratio: 3 / 2;
      object-fit: cover;
    }
  }
}

/**
 * 記事の動画のスタイル（YouTube埋め込み）
 */
.item-video {
  position: relative;
  width: 100%;
  & iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}