// ===========================================
// page
// ===========================================

/* section
====================================== */
.com-sec-01 {
  padding-block: 60px;
  @include mq-up('s') {
    padding-block: 100px;
  }
}

/* parts
--------------------------------- */

// ===========================================
// Common generic class 全ページ共通汎用クラス
// ===========================================
/* title タイトル
--------------------------------- */
// page title
.page-tit-01 {
  font-size: clamp(30px, 3.125cqi, 60px);
  font-family: 'Sofia Sans Extra Condensed';
  color: rgba(map-get($colors, text), 0.8);
  // backdrop-filter: blur(18px);
  font-weight: bold;
  margin-bottom: 0;
  background-clip: text;
  &::before {
    content: attr(data-en);
    font-family: $font-family-sofia;
    @include font(20);
    font-weight: 800;
    letter-spacing: -0.02em;
    display: block;
    line-height: 1;
    margin-bottom: 1em;
  }
}

// common title
.com-tit-01 {
}

.com-tit-02 {
}

.com-tit-03 {
}

.com-tit-04 {
}

.com-tit-05 {
}

/* panel パネル
--------------------------------- */
.com-panel-01 {
}

/* Gap between sections or blocks
/* セクションやブロック間の隙間
--------------------------------- */
.com-mt-s {
  margin-top: 20px;
  @include mq-up('s') {
    margin-top: 30px;
  }
}

.com-mt-m {
  margin-top: 40px;
  @include mq-up('s') {
    margin-top: 60px;
  }
}

.com-mt-l {
  margin-top: 90px;
  @include mq-up('s') {
    margin-top: 120px;
  }
}

// Margin for one line
.com-mt-1em {
  margin-top: 1em;
}

.com-mt-half {
  margin-top: 0.5em;
}

/* list style リストスタイル
--------------------------------- */
.com-list-01 {
  li {
    margin-left: 1.2em;
    &::before {
      content: '・';
      display: inline-block;
      width: 1.2em;
      margin-left: -1.2em;
    }
    + li {
      margin-top: 0.2em;
    }
  }
  $makers: (
    notice: '※',
    circle: '●',
    square: '■',
  );
  @each $name, $mark in $makers {
    &.#{$name} {
      li {
        &::before {
          content: '#{$mark}';
        }
      }
    }
  }
}

.com-list-02 {
  counter-reset: item;
  list-style-type: none;
  padding-left: 0;
  li {
    margin-left: 1.8em;
    + li {
      margin-top: 0.2em;
    }
    &::before {
      counter-increment: item;
      content: counter(item) '.';
      display: inline-block;
      width: 1.5em;
      padding-right: 0.3em;
      margin-left: -1.8em;
      text-align: right;
    }
  }
}

.com-list-03 {
  counter-reset: item;
  list-style-type: none;
  padding-left: 0;
  li {
    margin-left: 2.3em;
    + li {
      margin-top: 0.4em;
    }
    &::before {
      counter-increment: item;
      content: '※' counter(item);
      display: inline-block;
      width: 2.3em;
      margin-left: -2.3em;
    }
  }
}

/* text テキスト
--------------------------------- */
.com-text-01 {
}

/* font-size フォントサイズ
--------------------------------- */
@for $i from 10 through 30 {
  .com-fz-#{$i} {
    @include font($i);
  }
}

/* アクセント色
--------------------------------- */
.com-accent-01 {
}

/* YouTube wrapper
--------------------------------- */
.com-wrap-youtube {
  --width: 16;
  --height: 9;
  width: min(attr(data-width px, 100%), 100%);
  aspect-ratio: calc(var(--width) / var(--height));
  &.type-short {
    --width: 9;
    --height: 16;
  }
  iframe {
    width: 100%;
    height: 100%;
  }
}

/* リンク
--------------------------------- */
// Block type button element
.com-btn-01 {
  display: block;
  max-width: 336px;
  text-align: center;
  background: map-get($colors, main);
  color: #fff;
  padding: 0.8em;
  padding-right: 2em;
  box-sizing: border-box;
  position: relative;
  &::after {
    content: '';
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M2 0L8 6L2 12' stroke='%23fff' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
  }
  &:hover {
    color: #fff;
  }
}

//フォームの送信ボタン用
.com-btn-02 {
  display: block;
  min-width: 300px;
  text-align: center;
  background: map-get($colors, main);
  border: none;
  color: #fff;
  padding: 0.8em;
  padding-right: 2em;
  box-sizing: border-box;
  position: relative;
  &:hover {
    color: #fff;
  }
}

// Inline type button element
.com-link-01 {
  text-decoration: underline;
  color: map-get($colors, main);
  &:hover {
    color: map-get($colors, main);
  }
}