/* ---------
基本設定
----------- */

:root {
  /* フォント */
  --main-font: "Noto Sans JP", sans-serif;
  --sub-font: "Shippori Mincho B1", serif;
  --num-font: "Poppins", sans-serif;

  /* 色  */
  --bg_gd-color: linear-gradient(
    to right,
    #02487f 7%,
    #32acc7 58%,
    #016fb8 91%
  );
  --bg_gd-darkcolor: linear-gradient(
    to right,
    #02487f 3%,
    #32acc7 58%,
    #016f88 91%
  );
  --main-color: #0e3a70;
  --text-color: #3a3e40;

  /* フォントサイズ（変数名の数字 = px値） */
  --fs-10: 0.625rem;
  /* 10px */
  --fs-12: 0.75rem;
  /* 12px */
  --fs-13: 0.8125rem;
  /* 13px */
  --fs-14: 0.875rem;
  /* 14px */
  --fs-15: 0.9375rem;
  /* 15px */
  --fs-16: 1rem;
  /* 16px */
  --fs-17: 1.0625rem;
  /* 17px */
  --fs-18: 1.125rem;
  /* 18px */
  --fs-20: 1.25rem;
  /* 20px */
  --fs-22: 1.375rem;
  /* 22px */
  --fs-24: 1.5rem;
  /* 24px */
  --fs-25: 1.5625rem;
  /* 25px */
  --fs-26: 1.625rem;
  /* 26px */
  --fs-30: 1.875rem;
  /* 30px */
}

/* ---------
共通
----------- */
html {
  overflow-x: hidden;
}

body {
  font-size: var(--fs-14);
  font-weight: 400;
  line-height: 1.2;
  color: var(--text-color);
  font-family: var(--main-font);
  overflow-x: clip;
}

.l-page {
  background: #fff;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

.section_space {
  width: calc(100% - 40px);
  margin: 0 auto;
}
.no-post-text {
  text-align: center;
  color: var(--text-color);
  margin: 100px 0;
}

/* 表示 */
.sp_in,
.sp-layout {
  display: block;
}

/* 非表示 */
.pc_in,
.pc-layout {
  display: none;
}

.not-link a {
  color: var(--text-color);
  text-decoration: none;
  pointer-events: none;
}

/* スクリーンリーダー専用 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 共通ボタン */

/* --- ui-btn--arrow （アイコン付き）--- */

.ui-btn--arrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--main-color);
  text-decoration: none;
  border-bottom: 2px solid var(--main-color);
  padding-bottom: 6px;
  max-width: 200px;
  width: 100%;
  margin: 0 auto;
}

.ui-btn--arrow__text {
  font-size: var(--fs-16);
  font-weight: 500;
}

.ui-btn--arrow__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--main-color);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.ui-btn--arrow__icon img {
  display: block;
  width: 15px;
  height: auto;
}

/* --- ui-btn--solid（塗りつぶしボタン）--- */

.ui-btn--solid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(8vw, 30px);
  background: var(--main-color);
  color: #fff;
  text-decoration: none;
  border-radius: 35px;
  font-size: var(--fs-16);
  font-weight: 500;
  width: min(72vw, 270px);
  height: 50px;
  margin: 0 auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.38);
}

/* --- コピーアイコン --- */
.ui-btn--solid__icon--copy {
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid #fff;
  position: relative;
  flex-shrink: 0;
  margin-top: -5px;
}

.ui-btn--solid__icon--copy::after {
  content: "";
  position: absolute;
  top: 5px;
  left: -4px;
  width: 100%;
  height: 100%;
  border: 1px solid #fff;
  border-top: none;
  border-right: none;
}

/* --- 矢印アイコン --- */
.ui-btn--solid--arrow::before {
  content: "";
  position: absolute;
  right: 40px;
  display: block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #fff url("../images/common/in_arrow-blue.png") center / 65% auto
    no-repeat;
  flex-shrink: 0;
  z-index: 1;
}

@media (min-width: 768px) {
  .section_space {
    width: min(73.2064421669vw, 1000px);
  }

  .sp_in,
  .sp-layout {
    display: none;
  }

  .pc_in,
  .pc-layout {
    display: block;
  }

  /* 共通ボタン */

  .ui-btn--arrow {
    position: relative;
    max-width: clamp(10rem, 6.789rem + 6.69vw, 12.5rem);
  }

  .ui-btn--arrow::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--bg_gd-darkcolor);
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .ui-btn--arrow__text {
    font-size: clamp(0.875rem, 0.714rem + 0.33vw, 1rem);
    background: var(--bg_gd-color);
    -webkit-background-clip: text;
    background-clip: text;
    transition: color 0.2s ease;
  }

  .ui-btn--arrow__icon {
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease;
  }

  .ui-btn--arrow__icon::after {
    content: "";
    position: absolute;
    inset: 0;
    /* background: var(--bg_gd-darkcolor); */
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease;
    background: linear-gradient(270deg, #02487f 8%, #32acc7 100%);
  }

  .ui-btn--arrow__icon img {
    position: relative;
    z-index: 1;
  }

  .ui-btn--arrow:hover::after {
    opacity: 1;
  }

  .ui-btn--arrow:hover .ui-btn--arrow__text {
    color: transparent;
  }

  .ui-btn--arrow:hover .ui-btn--arrow__icon {
    transform: translateX(5px);
  }

  .ui-btn--arrow:hover .ui-btn--arrow__icon::after {
    opacity: 1;
  }

  /* --- ui-btn--solid --- */

  .ui-btn--solid {
    max-width: clamp(15rem, 12.592rem + 5.02vw, 16.875rem);
    width: 100%;
    padding: min(1.1713030747vw, 16px);
    font-size: clamp(0.875rem, 0.714rem + 0.33vw, 1rem);
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .ui-btn--solid::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bg_gd-color);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .ui-btn--solid:hover::after {
    opacity: 1;
  }

  .ui-btn--solid__icon--arrow {
    transition: transform 0.2s ease;
  }

  .ui-btn--solid:hover .ui-btn--solid__icon--arrow {
    transform: translateX(5px);
  }

  .ui-btn--solid--arrow::before {
    transition: transform 0.2s ease;
  }

  .ui-btn--solid--arrow:hover::before {
    transform: translateX(5px);
  }
}