:root {
  --sp-header-height: clamp(64px, 18vw, 96px);
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans Japanese", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳＰゴシック", "MS PGothic", sans-serif;
}

body {
  padding-top: var(--sp-header-height);
}

/* アンカー用のスクロール余白（SPヘッダー分） */
:target {
  scroll-margin-top: var(--sp-header-height);
}

.h-header {
  height: var(--sp-header-height);
}

/** PC版 **/
.left-box {
  width: calc((1052 / 1444) * 100%);
}

.right-box {
  width: calc((357 / 1444) * 100%);
}

/* bootstrap 変数 */
/* @see inc/offcanvasNavbar.php */
.offcanvas {
  --bs-offcanvas-bg: #444;
  --bs-offcanvas-color: #fff !important;
}

.accordion-button {
  --bs-accordion-btn-bg: #444;
  --bs-accordion-btn-color: #fff !important;
  --bs-accordion-active-bg: #98aff2;
  --bs-accordion-active-color: #fff !important;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.navbar {
  --bs-navbar-padding-y: 0;
  --bs-navbar-padding-x: 0;
  flex-wrap: nowrap;
}

/* @see inc/header.php */
.navbar-toggler {
  aspect-ratio: 1 / 1;
  height: var(--sp-header-height);
  --bs-border-width: 0;
  --bs-navbar-toggler-border-radius: 0;
  --bs-navbar-toggler-focus-width: 0;
}

.navbar-toggler-icon {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* table settings */
.table-th-darkblue th {
  background-color: #454970 !important;
}

.table-th-mainblue th {
  background-color: #809bef !important;
}

.rounded-bottom-pill {
  --bs-border-radius-pill: 100%;
}

/* Animate.css */
.io-animate {
  visibility: hidden;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .io-animate {
    animation: none !important;
    transition: none !important;
    visibility: visible !important;
  }
}


/** styles like boostrap**/
/** pc is based on 1920px width **/
/** gap **/
.custom-gap {
  gap: clamp(15px, 1.823vw, 35px);
}

/** padding **/
.px-238 {
  padding: 0 clamp(99px, 12.4vw, 238px);
}

/* for ranking count icon */
.w-42 {
  width: clamp(17.5px, 2.1875vw, 42px);
}

/** font size **/
fs-lg {
  font-size: large !important;
}

.fs-md {
  font-size: medium !important;
}

.fs-sm {
  font-size: small !important;
}

.fs-x-sm {
  font-size: x-small !important;
}

.fs-xx-sm {
  font-size: xx-small !important;
}

.fs-7 {
  font-size: 0.875rem !important;
}

.fs-8 {
  font-size: 0.75rem !important;
}

.fs-9 {
  font-size: 0.6875rem !important;
}

.fs-10 {
  font-size: 0.625rem !important;
}

.fs-11 {
  font-size: 0.5625rem !important;
}

.fs-12 {
  font-size: 0.5rem !important;
}

/** color **/
.text-mainblue {
  color: #809bef !important;
}

.text-red {
  color: #ff4e02 !important;
}

.text-pink {
  color: #ff74d6 !important;
}

.text-beige {
  color: #ddc19f !important;
}

.text-beige-light {
  color: #faefe8 !important;
}

.text-red-btn {
  color: #b1221a !important;
}

.text-darkblue {
  color: #454970 !important;
}

.text-stone {
  color: #a69776 !important;
}

.text-warm-gray {
  color: #ccc7c1 !important;
}

.text-stonebeige {
  color: #b9a193 !important;
}

.text-sovereignty {
  color: #303563 !important;
}

.bg-mainblue-dark {
  background-color: #324ac2 !important;
}

.bg-mainblue-deep {
  background-color: #4a5ed4 !important;
}

.bg-mainblue {
  background-color: #809bef !important;
}

.bg-mainblue-soft {
  background-color: #92a7f4 !important;
}

.bg-mainblue-light {
  background-color: #a9b9f8 !important;
}

.bg-pink {
  background-color: #ff74d6 !important;
}

.bg-beige {
  background-color: #ddc19f !important;
}

.bg-beige-light {
  background-color: #faefe8 !important;
}

.bg-red-btn {
  background-color: #b1221a !important;
}

.bg-darkblue {
  background-color: #454970 !important;
}

.bg-grey {
  background-color: #444 !important;
}

.bg-stone {
  background-color: #a69776 !important;
}

.bg-warm-gray {
  background-color: #ccc7c1 !important;
}

.bg-brilliant-crimson {
  background-color: #ff6b91 !important;
}

.bg-pale-sand {
  background-color: #e4cdb2 !important;
}

.bg-pastel-blue {
  background-color: #98aff2 !important;
}

.border-mainblue {
  border-color: #809bef !important;
}

.border-stone {
  border-color: #a69776 !important;
}

.border-warm-gray {
  border-color: #ccc7c1 !important;
}

.border-medium-slate-blue {
  border-color: #7c64ed !important;
}

/** background images **/
.bg-img-main {
  background-image: url('../images/main-bg.jpg');
}

.bg-img-footer-title {
  background-image: url('../images/footer-title-bg.png');
}

.bg-img-smbg {
  background-image: url('../images/smbg.png');
}

.bg-img-bara {
  background-image: url('../images/bara.jpg');
}

.bg-img-repeat {
  background-repeat: repeat;
}

.bg-img-size-cover {
  background-size: cover;
}

.bg-img-size-auto {
  background-size: auto;
}

.bg-img-position-center {
  background-position: center;
}

.bg-img-position-lt {
  background-position: left top;
}

.rank-1 {
  background: url(../images/icon/blog_icon.png) 0 -1px;
}

.rank-2 {
  background: url(../images/icon/blog_icon.png) 80px -1px;
}

.rank-3 {
  background: url(../images/icon/blog_icon.png) 60px -1px;
}

.rank-4 {
  background: url(../images/icon/blog_icon.png) 40px -1px;
}

.rank-5 {
  background: url(../images/icon/blog_icon.png) 20px -1px;
}

/* square */
.aspect-ratio-square {
  aspect-ratio: 1 / 1;
}

/* order */
.order-6 {
  order: 6 !important;
}

.order-7 {
  order: 7 !important;
}

.order-8 {
  order: 8 !important;
}

.order-9 {
  order: 9 !important;
}

@media (min-width: 768px) {

  html,
  body {
    margin: 0;
    padding: 0;
    font-family: "Noto Sans Japanese", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳＰゴシック", "MS PGothic", sans-serif;
  }

  .w-md-25 {
    width: 25% !important;
  }

  .w-md-50 {
    width: 50% !important;
  }

  .w-md-75 {
    width: 75% !important;
  }

  .w-md-100 {
    width: 100% !important;
  }

  /* font size */
  .fs-md-1 {
    font-size: 2.5rem !important;
  }

  .fs-md-2 {
    font-size: 2rem !important;
  }

  .fs-md-3 {
    font-size: 1.75rem !important;
  }

  .fs-md-4 {
    font-size: 1.5rem !important;
  }

  .fs-md-5 {
    font-size: 1.25rem !important;
  }

  .fs-md-6 {
    font-size: 1rem !important;
  }

  .fs-md-7 {
    font-size: 0.875rem !important;
  }

  .fs-md-8 {
    font-size: 0.75rem !important;
  }

  .fs-md-9 {
    font-size: 0.6875rem !important;
  }

  .fs-md-10 {
    font-size: 0.625rem !important;
  }

  .fs-md-11 {
    font-size: 0.5625rem !important;
  }

  .fs-md-12 {
    font-size: 0.5rem !important;
  }

  /* order */
  .order-md-6 {
    order: 6 !important;
  }

  .order-md-7 {
    order: 7 !important;
  }

  .order-md-8 {
    order: 8 !important;
  }

  .order-md-9 {
    order: 9 !important;
  }

}

/*
 * 共通テキスト省略用（複数行省略）
 * お客様の声などで使用。
 */
.cv-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  text-overflow: ellipsis;
  overflow: hidden;
}

.index-title-fs {
  font-size: 1rem;

}

.sp-br {
  display: none;
}

@media (max-width: 767px) {
  .sp-br {
    display: block;
  }

  .index-title-fs {
    font-size: 0.7rem;
  }
}