/**
 * ベースリセットと要素デフォルト
 *
 * Sibloo は Bootstrap 4.1.3 を強制的に読み込み、その Reboot がリセットの多くを
 * 担う。ここでは Reboot と同じ値を自前でも宣言し、Bootstrap の有無に関わらず
 * 同じ結果になるようにする。
 */

:root {
  /* アンカーで飛んだときに上へ空ける量。固定ヘッダーを置く案件では
   * その高さに合わせる。ベースの .header は position: relative で高さを
   * 持たないため、ここでは余白としての既定値だけを持つ。 */
  --scroll-offset: 3.75rem;

  /* テキスト選択時の色 */
  --selection-bg: var(--ink);
  --selection-fg: var(--snow);

  /* hr の罫線 */
  --hr-color: var(--light-gray);
}

::selection {
  background-color: var(--selection-bg);
  color: var(--selection-fg);
}

*,
*::before,
*::after {
  /* Reboot 依存のうち最も影響が大きい。padding / sizes ユーティリティは
   * すべて border-box を前提にしている。 */
  box-sizing: border-box;
  min-width: 0px;
  min-height: 0px;
}

html {
  /* iOS の横向きで文字が自動拡大されるのを止める */
  -webkit-text-size-adjust: 100%;
  /* タップ時のハイライトを消す */
  -webkit-tap-highlight-color: transparent;

  /* 最小値13pxを保証し、1200px未満では最大22pxまでフォントサイズが流動する */
  font-size: clamp(13px, var(--font-size-base), 22px);

  @media screen and (min-width: 1200px) {
    font-size: clamp(0.1rem, var(--font-size-base), 24px);
  }
}

/**
 * ページ内リンクのスムーススクロール。
 *
 * ネイティブのハッシュ遷移に任せる。位置のオフセットは [id] の
 * scroll-margin-top が受け持つ。
 *
 * 「動きを減らす」設定の環境では即座にジャンプする。
 *
 * フォームのあるページでは 01_FormScript.js がこれを切る。validationEngine が
 * エラー箇所へ移動するときに使う jQuery の animate({ scrollTop }) と噛み合わない
 * ため。理由はそちらのコメントにある。
 */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  line-height: 1.5;
  /* 長い URL や英単語がはみ出して横スクロールを作るのを防ぐ。
   * 収まらないときだけ働くため、通常の行分割には影響しない。 */
  overflow-wrap: break-word;
  font-family: var(--font-sans);
  color: var(--ink);
  background-color: var(--snow);
  font-weight: 700;
}

#root {
  margin: 0 auto;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
  line-height: inherit;
}

/**
 * リスト・図・引用の margin リセット。
 *
 * 余白はユーティリティで与える方針に揃える。padding-left と list-style は
 * 既定のまま残すため、箇条書きの体裁自体は変わらない。
 */
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

/* Bootstrap の hr は margin 1rem と rgba(0,0,0,.1) の罫線を持つ。
 * 余白はユーティリティで与える方針に揃え、色は変数にする。 */
hr {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--hr-color);
}

img,
iframe,
video {
  max-width: 100%;
}

/* inline 由来の下端の隙間を防ぐ */
img,
svg {
  vertical-align: middle;
}

table {
  border-collapse: collapse;
}

iframe {
  border: none;
  box-shadow: none;
}

a,
a:hover {
  color: var(--ink);
}
/* Reboot と同値。ホバー時の下線を残すかは別途判断する */
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

[id] {
  scroll-margin-top: var(--scroll-offset);
}

/* ユーティリティより後に読む必要があるためここに置いている。
 * 04_padding などへ先を越されると .p-16 のような指定に負けて、
 * 視覚的に隠しきれなくなる。 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* フォーム要素はフォント関連を継承しない */
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
textarea {
  resize: vertical;
}

button {
  position: relative;
  appearance: none;
  cursor: pointer;
  box-shadow: none;
  border: 0;
  background: none;
  padding: 0;
}

/**
 * フォーカスリングはキーボード操作でだけ出す。
 *
 * Bootstrap 4.1.3 は button:focus に独自のリングを当てており、詳細度が
 * (0,1,1) あるため素の button { outline: none } では打ち消せない。
 * :not(:focus-visible) を重ねて (0,2,1) にし、ポインタ操作のときだけ消す。
 *
 * Bootstrap が外れた場合も :focus-visible 側が効くため、インジケータは
 * 失われない。
 */
button:focus:not(:focus-visible) {
  outline: none;
}
button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* CMS が箇条書きを <p> で出力するため、それを list-item として見せるための
 * アダプタ。ブログ固有ではないのでここに置いている。 */
.list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 1.5rem;
  list-style: disc outside none;

  & > p {
    margin: 0;
    display: list-item;
  }
}

/**
 * 印刷
 *
 * Bootstrap 4.1.3 は @page { size: a3 } と、body および .container への
 * min-width: 992px !important を当てており、そのままだと A3 用紙・デスクトップ幅で
 * 印刷される。これらは対になっていて、一部だけ戻すと用紙からはみ出す。
 *
 * ここでは全部戻し、画面と同じレスポンシブな見た目で印刷されるようにする。
 * デスクトップ幅で刷りたい案件は、これらを案件側で戻す。
 *
 * .container は自前では定義していない Bootstrap のクラスだが、案件が使っている
 * 場合に同じ問題が起きるため打ち消しておく。
 */
@media print {
  @page {
    size: auto;
  }

  body,
  .container {
    min-width: 0 !important;
  }
}

.banner-wrapper {
  position: absolute;
  top: 3rem;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 110%;
  overflow: hidden;
  background-color: var(--yellow);
  padding-block: 0.75rem;
  white-space: nowrap;
  line-height: 1;
  font-family: var(--font-display);
  font-size: 3.75rem;
  overflow: auto;
}

.banner-track {
  display: flex;
  width: max-content;
  animation: infinite-scroll 20s linear infinite;
}

.banner-content {
  display: flex;
  gap: 2.5rem;
  padding-right: 2.5rem;
}

.button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.75rem 1.375rem;
  border-radius: 1.25rem;
  box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.08), 0 4px 12px 2px rgba(0, 0, 0, 0.08), 0 8px 24px 4px rgba(0, 0, 0, 0.08);
  line-height: 1.25;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--button-color);
  --button-color: var(--ink);
  background-color: var(--snow);
  transition: all ease 200ms;
  & > p {
    flex: 1 1 0%;
  }
  &::after {
    content: "";
    aspect-ratio: 1 / 1;
    width: 2.25rem;
    border-radius: 9999px;
    background-color: var(--button-color);
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2215%22%20height%3D%2215%22%20viewBox%3D%220%200%2015%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M13.1537%207.9979L8.93496%2012.2166C8.80287%2012.3487%208.62372%2012.4229%208.43691%2012.4229C8.25011%2012.4229%208.07096%2012.3487%207.93887%2012.2166C7.80678%2012.0846%207.73257%2011.9054%207.73257%2011.7186C7.73257%2011.5318%207.80678%2011.3526%207.93887%2011.2206L10.957%208.20356H2.34375C2.15727%208.20356%201.97843%208.12948%201.84657%207.99762C1.7147%207.86576%201.64063%207.68692%201.64063%207.50044C1.64063%207.31396%201.7147%207.13511%201.84657%207.00325C1.97843%206.87139%202.15727%206.79731%202.34375%206.79731L10.957%206.79731L7.94004%203.77856C7.80795%203.64647%207.73374%203.46732%207.73374%203.28052C7.73374%203.09371%207.80795%202.91456%207.94004%202.78247C8.07213%202.65038%208.25128%202.57617%208.43809%202.57617C8.62489%202.57617%208.80404%202.65038%208.93613%202.78247L13.1549%207.00122C13.2204%207.06663%2013.2724%207.14435%2013.3079%207.22991C13.3433%207.31547%2013.3615%207.40719%2013.3614%207.4998C13.3613%207.59241%2013.3429%207.68409%2013.3072%207.76957C13.2716%207.85505%2013.2194%207.93264%2013.1537%207.9979Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    background-size: 0.875rem 0.875rem;
    background-repeat: no-repeat;
    background-position: center;
    filter: var(--filter-shadow-2);
  }
  &:hover {
    text-decoration: none;
    opacity: 0.85;
    transform: scale(0.95);
    color: var(--button-color);
  }
  @media (min-width: 768px) {
    font-size: 1rem;
    &::after {
      width: 3rem;
      background-size: 1.25rem 1.25rem;
    }
  }
  
  &.button--no-shadow {
    border-radius: 0;
    box-shadow: none;
  }
  &.button--no-bg {
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    padding: 0;
  }
  &.button--blue {
    --button-color: var(--blue);
  }
  &.button--vermilion {
    --button-color: var(--vermilion);
  }
  &.button--green {
    --button-color: var(--green);
  }
  &.button--pink {
    --button-color: var(--pink);
  }
  &.button--line-green {
    --button-color: var(--line-green);
  }
  &.button--carsensor {
    --button-color: #ff6010;
  }
  &.button--goo-net {
    --button-color: #ce0808;
  }
  &.button--yahoo {
    --button-color: #ff0033;
  }
  &.button--orange {
    --button-color: var(--orange);
  }
  
  &.button--tel {
    &::after {
      background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M13.7058%204.35644C13.785%204.05616%2014.0932%203.87672%2014.3935%203.95581C15.7512%204.31336%2016.9897%205.02487%2017.9824%206.01757C18.9751%207.01028%2019.6866%208.24884%2020.0442%209.60644C20.1233%209.90678%2019.9438%2010.215%2019.6435%2010.2942C19.3432%2010.3733%2019.035%2010.1938%2018.9558%209.89355C18.649%208.72841%2018.039%207.66495%2017.187%206.81298C16.335%205.96102%2015.2716%205.35101%2014.1064%205.04418C13.8062%204.96498%2013.6267%204.65678%2013.7058%204.35644Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M12.9565%207.35495C13.0368%207.05496%2013.345%206.87645%2013.645%206.95651C15.388%207.42287%2016.5771%208.61192%2017.0434%2010.3549C17.1235%2010.6548%2016.9455%2010.963%2016.6457%2011.0434C16.3457%2011.1237%2016.0369%2010.9456%2015.9565%2010.6457C15.5941%209.29137%2014.7092%208.40588%2013.3549%208.04342C13.055%207.96316%2012.8765%207.65494%2012.9565%207.35495Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M6.86353%203.19741C7.14511%203.16396%207.43031%203.22244%207.67578%203.36441C7.91832%203.50474%208.10874%203.71928%208.2207%203.97598H8.22144L10.2026%208.40054L10.2063%208.40933C10.2914%208.60817%2010.3263%208.8252%2010.3074%209.04067C10.2885%209.25615%2010.2163%209.46393%2010.0979%209.64492C10.0857%209.6636%2010.072%209.68129%2010.0576%209.69839L8.08521%2012.0436C8.0729%2012.0663%208.06504%2012.091%208.06323%2012.1168C8.06117%2012.1467%208.06629%2012.1767%208.07861%2012.204L8.2229%2012.4809C8.9904%2013.8636%2010.4359%2015.2492%2011.822%2015.9189L11.8667%2015.9335C11.8818%2015.9363%2011.8974%2015.9368%2011.9128%2015.9357C11.9386%2015.9338%2011.9628%2015.9246%2011.9854%2015.9123L14.2969%2013.9472L14.3496%2013.9076C14.5314%2013.7867%2014.7408%2013.7128%2014.9583%2013.693C15.1213%2013.6782%2015.2853%2013.6939%2015.4417%2013.7392L15.5955%2013.7941L15.6035%2013.7978H15.6028L20.0244%2015.7782H20.0237C20.2808%2015.8902%2020.4955%2016.0817%2020.636%2016.3246C20.7778%2016.57%2020.8364%2016.8547%2020.803%2017.1361L20.8022%2017.1449C20.6385%2018.3684%2020.0352%2019.4906%2019.106%2020.3031C18.1767%2021.1156%2016.9843%2021.5623%2015.75%2021.5614V21.5622C12.2194%2021.5622%208.83347%2020.1599%206.33692%2017.6635C3.91839%2015.245%202.52656%2011.9916%202.4419%208.58071L2.4375%208.24966C2.43674%207.01543%202.88409%205.82284%203.69653%204.8937C4.50917%203.96437%205.63186%203.36188%206.85547%203.19815L6.86353%203.19668V3.19741ZM6.99536%204.31362C6.04556%204.44296%205.17434%204.91242%204.54321%205.63418C3.91013%206.35824%203.56177%207.28786%203.5625%208.24966L3.56616%208.55288C3.6437%2011.6754%204.91821%2014.654%207.13233%2016.8681C9.41791%2019.1535%2012.5178%2020.4372%2015.75%2020.4372H15.7507C16.7124%2020.4378%2017.6415%2020.0895%2018.3655%2019.4564C19.0882%2018.8245%2019.5567%2017.9519%2019.6853%2017.0006C19.6893%2016.9614%2019.6816%2016.922%2019.6619%2016.8878C19.6416%2016.8528%2019.6105%2016.8254%2019.5732%2016.8095L19.5645%2016.8051L15.1465%2014.8261C15.1191%2014.8151%2015.0895%2014.8109%2015.0601%2014.8136C15.0351%2014.8159%2015.011%2014.8231%2014.989%2014.8349L12.6797%2016.8C12.6638%2016.8134%2012.6471%2016.8264%2012.6299%2016.838C12.4419%2016.9649%2012.224%2017.0407%2011.9978%2017.0578C11.7716%2017.0748%2011.5443%2017.0321%2011.3394%2016.9347L11.3364%2016.9333C9.63243%2016.1113%207.89928%2014.3997%207.06787%2012.6977L7.06568%2012.694C6.96804%2012.4903%206.92485%2012.2646%206.94043%2012.0392C6.95604%2011.8138%207.03022%2011.5962%207.15503%2011.4079L7.19312%2011.3566L9.1626%209.01504C9.17497%208.99242%209.18447%208.96831%209.18677%208.94253C9.18947%208.91174%209.18429%208.88012%209.17212%208.85171H9.17139L7.19458%204.43521L7.19092%204.42642C7.17499%204.38928%207.14753%204.35803%207.11255%204.33779C7.07748%204.31751%207.03632%204.30958%206.9961%204.31436L6.99536%204.31362Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E%0A");
      background-size: 1.25rem 1.25rem;
    }
    @media (min-width: 768px) {
      &::after {
        background-size: 2rem 2rem;
      }
    }
  }
  &.button--upper-arrow {
    &::after {
      transform: rotate(-45deg);
    }
  }
  &.button--transparent {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }
  
  &.button--sm {
    gap: 0.5rem;
    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
    font-size: 0.625rem;
    --tracking: 0;
    &::after {
      width: 1.5rem;
      background-size: 0.625rem 0.625rem;
    }
    @media (min-width: 768px) {
      padding: 0.5rem 1rem;
      font-size: 0.875rem;
      &::after {
        width: 2rem;
        background-size: 1rem 1rem;
      }
    }
  }
}

.page-hero {
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-4);
  & .page-hero__title {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    text-align: center;
    & > p {
      line-height: 1;
      --tracking: 0;
      font-size: 2.5rem;
    }
    & h1 {
      line-height: 1.25;
      --tracking: -0.04em;
      font-weight: 900;
      font-size: 1rem;
    }
    @media (min-width: 768px) {
      & > p {
        font-size: 4rem;
      }
      & h1 {
        font-size: 1.25rem;
      }
    }
    @media (min-width: 1024px) {
      & > p {
        font-size: 5rem;
      }
      & h1 {
        font-size: 1.5rem;
      }
    }
    @media (min-width: 1200px) {
      & > p {
        font-size: 6.75rem;
      }
      & h1 {
        font-size: 1.75rem;
      }
    }
  }
  &.page-hero--bg-grad {
    isolation: isolate;
    overflow: hidden;
    & > canvas {
      position: absolute;
      inset: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      display: block;
      pointer-events: none;
    }
    &::after {
      content: "";
      pointer-events: none;
      position: absolute;
      inset: 0;
      z-index: -1;
    }
    &::after {
      background-image: url("/system_panel/uploads/images/filter-dot.png");
    }
  }
}

.section-title {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  & > p {
    line-height: 1;
    --tracking: 0;
  }
  & h2, & h3, & h4, & h5, & h6 {
    line-height: 1.25;
    --tracking: -0.04em;
    font-weight: 900;
  }
}

.swiper:not(.swiper-initialized) {
  & .swiper-wrapper {
    display: flex;
    overflow: auto;
  }
  & .swiper-slide {
    min-width: 35%;
  }
}

.gallery-slider {
  width: 100%;
  & .swiper-wrapper {
    transition-timing-function: linear;
  }
  & .swiper-slide {
    & img {
      object-fit: cover;
      width: 100%;
      aspect-ratio: 3 / 2;
    }
  }
}