@charset "UTF-8";

/* =====================
  Custom Property
===================== */
:root {
  /* debug */
  --debug: false;

  /* color */
  --black: #000000;
  --primary: #004dc3;
  --secondary: #eecb58;

  /* font */
  --yumin: 'Yu Mincho Demibold', 'YuMincho Demibold', '游明朝', 'Yu Mincho Regular', 'Yu Mincho', 'YuMincho Medium', serif;
  --yugo: '游ゴシック', 'Yu Gothic', yugothic, 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'メイリオ', meiryo, 'ＭＳ ゴシック', sans-serif;
  --sanserif: 'Noto Sans JP', sans-serif;
  --title: Zen Antique, serif;

  /* icon */
  --fukidashi: url('data:image/svg+xml,<svg width="68" height="40" viewBox="0 0 68 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M68 20L0 40V0L68 20Z" fill="currentColor"/></svg>');
  --fukidashi-tate: url('data:image/svg+xml,<svg width="40" height="68" viewBox="0 0 40 68" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 68L40 -1.74846e-06L-2.97237e-06 0L20 68Z" fill="currentColor"/></svg>');
  --long: url('data:image/svg+xml,<svg width="140" height="21" viewBox="0 0 140 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M142.049 10.25L-1.79217e-06 6.69625e-06L0 20.5L142.049 10.25Z" fill="currentColor"/></svg>');

  /* ease */
  --slideInBezier: cubic-bezier(0.16, 0.5, 0.43, 1);
  --easeOutQuart: cubic-bezier(0.25, 1, 0.5, 1);
  --easeOutExpo: cubic-bezier(0.87, 0, 0.13, 1);
  --easeOutBack: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easeOutQuint: cubic-bezier(0.22, 1, 0.36, 1);
  --easeInCirc: cubic-bezier(0.55, 0, 1, 0.45);
  --easeInOutBack: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
}

/* =====================
  container context
===================== */
@container style(--debug:true) {
  * {
    outline: 1px solid tomato;

    &:focus {
      outline: 2px solid var(--blue);
      outline-offset: 2px;
    }
  }
}

@layer style {
  /* =====================
    common
  ===================== */
  html,
  body {
    font-family: var(--sanserif);
    font-size: 16px;
    line-height: 1.8;
    color: var(--black);
    text-align: center;

    @media (width <= 768px) {
      font-size: calc((100 / 390) * 16 * 1vw);
    }
  }

  body {
    @media (width > 768px) {
      min-inline-size: 1440px;
    }
  }

  @media (width > 768px) {
    .sp {
      display: none;
    }
  }

  @media (width <= 768px) {
    .pc {
      display: none;
    }
  }

  /* p */
  :where(p, li, dt, dd, th, td) {
    line-height: 1.8;
  }

  /* =====================
    aside
  ===================== */
  .aside {
    position: relative;
    background-color: var(--secondary);
    padding-block: 40px;

    @media (width <= 768px) {
      padding-block: calc((100 / 390) * 40 * 1vw);
      padding-inline: calc((100 / 390) * 20 * 1vw);
    }

    &:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      inline-size: 100%;
      block-size: 103px;
      background-image: url('../img/logo_en.svg');
      background-repeat: repeat-x;
      background-size: contain;
      background-position: center;
      pointer-events: none;
    }

    @media (width <= 768px) {
      &:before {
        display: none;
      }
    }

    .wrap {
      position: relative;
      margin-inline: auto;
      inline-size: 710px;
      padding-inline: 40px;
      padding-block: 24px;
      box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.2);
      border: solid 1px #ddd;
      background-color: rgba(255, 255, 255, 0.8);

      @media (width <= 768px) {
        inline-size: 100%;
        padding-inline: calc((100 / 390) * 15 * 1vw);
        padding-block: calc((100 / 390) * 24 * 1vw);
      }
      .unit {
        display: block flex;
        gap: 10px;
        align-items: center;
        justify-content: space-between;
        margin-block-start: 24px;

        @media (width <= 768px) {
          flex-direction: column;
          gap: calc((100 / 390) * 23 * 1vw);
          margin-block-start: calc((100 / 390) * 30 * 1vw);
        }
        .tel {
          .tel-no {
            position: relative;
            display: block flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-family: var(--title);
            font-size: 34px;
            line-height: 1.4;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 34 * 1vw);
            }
            &::before {
              content: '';
              display: block flow;
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center;
              background-image: url('../img/icon_tel.svg');
              inline-size: 19px;
              block-size: 27px;
              flex-shrink: 0;
            }

            @media (width <= 768px) {
              &::before {
                inline-size: calc((100 / 390) * 19 * 1vw);
                block-size: calc((100 / 390) * 27 * 1vw);
              }
            }
          }
          .ex {
            font-size: 14px;
            text-align: left;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 14 * 1vw);
            }
          }
        }
      }
    }
  }
}