@charset "UTF-8";

/* 変数
----------------------------------------------------*/
:root {
  --main-color: #111111;
  --main-opposite-color: #ffffff;

  --border-gray-color: #ccc;

  --main-font-color: #2b2b2b;
  --link-color: #2b2b2b;
  --link-hover-color: #2b2b2b;


  --max-pc: 1600px;

  --fs-10-12: clamp(10px,calc(10px + (12 - 10) / (1240 - 360) * (100cqw - 360px)),12px);
  --fs-11-14: clamp(11px,calc(11px + (14 - 11) / (1240 - 360) * (100cqw - 360px)),14px);
  --fs-12-15: clamp(12px,calc(12px + (15 - 12) / (1240 - 360) * (100cqw - 360px)),15px);
  --fs-13-20: clamp(18px,calc(18px + (20 - 18) / (1240 - 360) * (100cqw - 360px)),20px);
  --fs-20-28: clamp(20px,calc(20px + (28 - 20) / (1240 - 360) * (100cqw - 360px)),28px);

  /**/
  --fs-16-24: clamp(16px,calc(16px + (24 - 16) / (1240 - 360) * (100cqw - 360px)),24px);
  --fs-21-29: clamp(21px,calc(21px + (29 - 21) / (1240 - 360) * (100cqw - 360px)),29px);
  --fs-m-33: clamp(15px,calc(15px + (33 - 15) / (1240 - 360) * (100cqw - 360px)),33px);
  --fs-m-80: clamp(21px,calc(21px + (80 - 21) / (1240 - 360) * (100cqw - 360px)),80px);
  --fs-m-55: clamp(21px,calc(21px + (55 - 21) / (1240 - 360) * (100cqw - 360px)),55px);
  --fs-18-46: clamp(18px,calc(18px + (46 - 18) / (1240 - 360) * (100cqw - 360px)),46px);
  --fs-26-55: clamp(26px,calc(26px + (55 - 26) / (1240 - 360) * (100cqw - 360px)),55px);
  --fs-19-55: clamp(19px,calc(19px + (55 - 19) / (1240 - 360) * (100cqw - 360px)),55px);
  --fs-18-30: clamp(18px,calc(18px + (30 - 18) / (1240 - 360) * (100cqw - 360px)),30px);
  --fs-13-30: clamp(13px,calc(13px + (30 - 13) / (1240 - 360) * (100cqw - 360px)),30px);
  --fs-16-20: clamp(16px,calc(16px + (20 - 16) / (1240 - 360) * (100cqw - 360px)),20px);
  --fs-14-20: clamp(14px,calc(14px + (20 - 14) / (1240 - 360) * (100cqw - 360px)),20px);
  --fs-12-19: clamp(12px,calc(12px + (19 - 12) / (1240 - 360) * (100cqw - 360px)),19px);
  --fs-18-45: clamp(18px,calc(18px + (45 - 18) / (1240 - 360) * (100cqw - 360px)),45px);
  --fs-11-16: clamp(11px,calc(11px + (16 - 11) / (1240 - 360) * (100cqw - 360px)),16px);
  --fs-20-50: clamp(20px,calc(20px + (50 - 20) / (1240 - 360) * (100cqw - 360px)),50px);
  --fs-18-24: clamp(18px,calc(18px + (24 - 18) / (1240 - 360) * (100cqw - 360px)),24px);
  --fs-16-24: clamp(16px,calc(16px + (24 - 16) / (1240 - 360) * (100cqw - 360px)),24px);
  --fs-14-24: clamp(14px,calc(14px + (24 - 14) / (1240 - 360) * (100cqw - 360px)),24px);
  --fs-11-24: clamp(11px,calc(11px + (24 - 11) / (1240 - 360) * (100cqw - 360px)),24px);
  --fs-11-20: clamp(11px,calc(11px + (20 - 11) / (1240 - 360) * (100cqw - 360px)),20px);


}

/* 使用Webフォント
  font-family: ;
  .font-ko {font-family: 'Klee One', serif;}
  .font-zom {font-family: 'Zen Old Mincho', serif;}
*/
.serif {
  font-family: "Noto Serif JP", serif;
}


/* 色
----------------------------------------------------*/


/* 初期設定
----------------------------------------------------*/
html {scroll-behavior: smooth;}
body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: var(--fs-14-24);
  font-weight: normal;
  font-style: normal;
  line-height: 1.8;
  color: var(--main-font-color);
}
button,
a {
  text-decoration: none;
  color: var(--main-font-color);
  transition-property: color,background-color;
  transition-duration: 0.4s;
  &:hover {
    /* color: var(--link-hover-color); */
    text-decoration: none;
  }
  &.textLink {
    text-decoration: underline;
    &:hover {
      text-decoration: none;
    }
  }
}

.uppercase {text-transform: uppercase;}
.capitalize {text-transform: capitalize;}


/* ブレイクポイント出し分け
----------------------------------------------------*/
/* スクリーンリーダー用 */
.for-ScreenReader {display: none;}

.distribute {
  display: none;
  /* 未満 */
  &.under420 {
    @media (width < 420px) {
      display: block;
    }
  }
  &.under720 {
    @media (width < 720px) {
      display: block;
    }
  }
  &.over420 {
    @media (420px <= width) {
      display: block;
    }
  }
}

/* class
----------------------------------------------------*/
.tac {text-align: center;}
.tal {text-align: left;}


/* 汎用パーツ
----------------------------------------------------*/
/**/
select,
textarea,
[type="password"],
[type="text"] {
  display: block;
  border: 1px solid var(--border-gray-color);
  padding: 0.2em 0.6em;
  width: 100%;
}
::placeholder {
  color: #ededed;
}
input[readonly],
textarea[readonly] {
  background-color: #F2F2F2;
}
select {
  display: block;
  border: 1px solid var(--border-gray-color);
  padding: 0.2em 0.6em;
}
.encrypted-pass[readonly] {
  background-color: var(--border-gray-color);
}
.oneLineDimetion {
  display: flex;
  align-items: center;
  & span {
    flex-basis: 7em;
    text-align: right;
  }
  & input {
    flex: 1;
  }
}
#viewPassword:hover .input-group-text {
  background-color: #ced4da;
}


/* ボタン
----------------------------------------------------*/
/**/
.raButton {
  display: block;
  width: fit-content;
  padding: 0.6em 2.4em 0.6em;
  background-color: #ffffff;
  color: #111;
  border: 2px solid #111;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  &.black {
    background-color: #111;
    color: #fff;
    &:hover {
      color: #fff;
    }
  }

  &:hover {
    color: #111;
    text-decoration: none;
    &::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background-image: linear-gradient(to right, rgba(247,208,201,.7) , rgba(160,188,97,.7) , rgba(70,190,222,.7));
      z-index: 10;
      transition-property: opacity;
      transition-duration: 0.4s;
    }
  }
  & span {
    position: relative;
    z-index: 20;
  }
}

/**/
.with-icon-after {
  display: flex;
  column-gap: 12px;
  align-items: center;
  &::after {
    content: "";
    display: block;
    width: 1.25em;
    height: 1.25em;
    z-index: 20;
  }
  &.arrow-black {
    &::after {
      background: url(../img/btnic_arrow_black.svg) no-repeat center center/contain;
    }
    &:hover::after {
      filter: invert(100%) sepia(0%) saturate(7492%) hue-rotate(233deg) brightness(102%) contrast(100%);
    }
  }
  &.arrow-white {
    &::after {
      background: url(../img/btnic_arrow_black.svg) no-repeat center center/contain;
      filter: invert(100%) sepia(0%) saturate(7492%) hue-rotate(233deg) brightness(102%) contrast(100%);
    }
  }
  &.ic-blank {
    &::after {
      background: url(../img/ic_blank.png) no-repeat center center/contain;
    }
    &:hover::after {
      /* filter: invert(100%) sepia(0%) saturate(7492%) hue-rotate(233deg) brightness(102%) contrast(100%); */
    }
  }

}
.btn-center {
  margin-inline: auto;
}

/**/
.baseButton {
  display: block;
  width: fit-content;
  margin-inline: auto;
  padding: 16px 90px;
  border-radius: 5px;
  position: relative;
  transition-property: all;
  transition-duration: 0.4s;
  &.blackBtn {
    background-color: #111;
    color: #fff;
    border: 1px solid #111;
    &:hover {
      background-color: #fff;
      color: #111;
    }
  }
}

/**/
.defButton {
  display: inline-block;
  padding: 0.6em 4em 0.6em;
  border-radius: 2px;
  border: 1px solid var(--main-color);
  background-color: var(--main-color);
  background-image: url(../img/arrow_right_w.svg);
  background-repeat: no-repeat;
  background-position: 95% center;
  color: var(--main-opposite-color);
  transition-property: background-color,color,filter;
  transition-duration: 0.4s;
  &:hover {
    background-color: var(--main-opposite-color);
    background-image: url(../img/arrow_right_r.svg);
    color: var(--main-color);
  }
  &.opposite {
    background-color: transparent;
    background-image: url(../img/arrow_right_r.svg);
    color: var(--em-font-color);
    &:hover {
      background-color: var(--em-font-color);
      background-image: url(../img/arrow_right_w.svg);
      color: var(--main-opposite-color);
    }
  }
}

/**/
.btnType1 {
  display: inline-block;
  line-height: 1;
  padding: 0.3125em 0.75em;
  border-radius: 3.2px;
  border: 1px solid var(--main-color);
  background-color: var(--main-opposite-color);
  color: var(--main-color);
  /* transition-property: background-color,color,filter;
  transition-duration: 0.4s; */
  &:hover {
    background-color: var(--main-color);
    color: var(--main-opposite-color);
  }
}
.btnType2 {
  display: inline-block;
  line-height: 1;
  padding: 0.3125em 0.75em;
  border-radius: 3.2px;
  border: 1px solid var(--main-color);
  background-color: var(--main-color);
  color: var(--main-opposite-color);
  /* transition-property: background-color,color,filter;
  transition-duration: 0.4s; */
  & img {
    filter: invert(100%) sepia(0%) saturate(7492%) hue-rotate(233deg) brightness(102%) contrast(100%); /* 黒⇒白 */
  }
  &:hover {
    background-color: var(--main-opposite-color);
    color: var(--main-color);
    & img {
      filter: invert(49%) sepia(4%) saturate(3088%) hue-rotate(10deg) brightness(99%) contrast(92%); /* 白 ⇒ 黄色 */
    }
  }
  &.cancel {
    border: 1px solid #F2F2F2;
    background-color: #F2F2F2;
    color: #333333;
    &:hover {
      background-color: #ccc;
      color: #ffffff;
    }
  }
}
.icon-before {
  display: inline-block;
  vertical-align: sub;
  margin-right: 4px;
  width: 18px;
}