@charset "UTF-8";
/*********************************
	変数定義
*********************************/
._text__main-color {
  color: #007BD0; }

._text__color {
  color: #1F2123; }

._text__align-center {
  text-align: center !important; }

._common-ralevay {
  font-family: var(--font01); }

._common__title {
  font-weight: 700;
  margin: 20px auto 16px;
  text-align: center; }
  @media only screen and (min-width: 835px) {
    ._common__title {
      margin: 60px auto 30px; } }

._common__h2 {
  color: #007BD0;
  text-align: center;
  font-weight: 600;
  margin-bottom: 12px; }
  @media only screen and (min-width: 835px) {
    ._common__h2 {
      font-size: 20px;
      margin-bottom: 30px;
      width: 100%; } }

._common__h3 {
  font-weight: 600; }
  @media only screen and (min-width: 835px) {
    ._common__h3 {
      font-size: 18px !important;
      margin-top: 20px; } }

._text__sub-color {
  color: #00AC5A; }

._common__text {
  font-size: 15px;
  color: #1F2123;
  line-height: 1.71;
  padding-bottom: 10px;
  text-align: left; }
  @media only screen and (min-width: 835px) {
    ._common__text {
      line-height: 2;
      font-size: 16px;
      padding-bottom: 20px; } }

._common_circle {
  border-radius: 50%;
  background: #007BD0;
  display: flex;
  align-items: center;
  /* 縦方向の中央揃え */
  justify-content: center;
  /* 横方向の中央揃え（必要に応じて） */
  text-align: center;
  padding: 12px;
  /* 円の内側の余白を調整 */
  box-sizing: border-box;
  width: 72px;
  height: 72px;
  font-size: 24px; }
  ._common_circle p {
    margin: 0;
    line-height: 1; }
  ._common_circle .text-block-small {
    font-size: 10px; }
  @media only screen and (min-width: 835px) {
    ._common_circle {
      width: 115px;
      height: 115px;
      font-size: 54px; }
      ._common_circle .text-block-small {
        font-size: 15px; } }

._common__main-color {
  background: #007BD0 !important; }

._commom__sub-color {
  background: #00AC5A !important; }

._common__btn {
  font-size: 16px;
  font-weight: 500;
  color: #FFF;
  text-align: center;
  display: block;
  margin: 0 auto 40px;
  background: #007BD0;
  border-radius: 40px;
  border: none;
  text-decoration: none;
  padding: 16px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  width: 100%;
  cursor: pointer; }
  @media only screen and (min-width: 835px) {
    ._common__btn {
      line-height: 2;
      font-size: 20px;
      width: 540px;
      margin-top: 40px; } }

._common__btn2 {
  background: #FFF;
  color: #007BD0;
  border: 1px solid #007BD0;
  margin-bottom: 0;
  margin-top: 40px; }

@media only screen and (min-width: 835px) {
  ._common__btn2 {
    margin-bottom: 20px;
    margin-top: 40px; } }
._common_underline {
  display: flex;
  gap: 6px;
  position: static;
  justify-content: center;
  margin: 20px 0 20px; }
  @media only screen and (min-width: 835px) {
    ._common_underline {
      margin: 25px 0 60px; } }

._common_underline-bullet {
  width: 97px;
  height: 4px;
  background: #1F2123;
  border-radius: 0;
  opacity: 1; }

._common__text-outline-blue {
  font-size: 24px;
  font-weight: bold;
  text-align: left;
  margin-bottom: 0;
  color: #fff;
  /* 塗り（白） */
  -webkit-text-stroke: 1.5px #007BD0;
  /* 枠線の色（青） */
  text-stroke: 1.5px #007BD0;
  /* 互換用（将来対応ブラウザ向け） */ }

/***********************************
*	各セクション設定
***********************************/
/*セクション共通設定*/
.section_wrap {
  width: 100%;
  padding: 20px; }
  @media only screen and (min-width: 835px) {
    .section_wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px; } }

#section_pointclub_top .section_wrap {
  position: relative;
  display: flex;
  justify-content: center;
  /* 水平方向中央 */
  align-items: center;
  /* 垂直方向中央 */
  height: 200px;
  /* 高さは任意に調整可能 */
  text-align: center;
  background: url(../../img/usr/common/bg_rank.png) top left/cover no-repeat, linear-gradient(to right, #E4F4FF, #DFFCEF);
  position: relative;
  z-index: 1;
  /* タイトル部分 */
  /* 「Pro.」の小さめ青文字 */
  /* 下のリード文 */ }
  #section_pointclub_top .section_wrap .section_pointclub_top__title {
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    color: #333;
    line-height: 1.4;
    position: relative; }
  #section_pointclub_top .section_wrap .section_pointclub_top__title .small {
    color: #007BD0;
    font-weight: 500;
    margin-right: 4px; }
  #section_pointclub_top .section_wrap .section_pointclub_top__lead {
    font-size: 15px;
    line-height: 1.8;
    width: 100%;
    margin: 0 auto; }
@media only screen and (min-width: 835px) {
  #section_pointclub_top .section_wrap {
    height: 315px; }
    #section_pointclub_top .section_wrap .section_pointclub_top__title {
      font-size: 52px;
      font-weight: 600;
      margin-bottom: 30px; }
      #section_pointclub_top .section_wrap .section_pointclub_top__title img {
        width: 80%;
        max-width: 660px; }
    #section_pointclub_top .section_wrap .section_pointclub_top__lead {
      font-size: 24px;
      width: 500px; } }

#section_pointclub_about .section_pointclub_about__title {
  text-align: center;
  font-weight: 600;
  font-size: 20px; }
#section_pointclub_about .section_pointclub_about__text {
  text-align: center; }
#section_pointclub_about .section_pointclub_about__img {
  display: block;
  margin: 0 auto; }
@media only screen and (min-width: 835px) {
  #section_pointclub_about .section_wrap {
    padding: 60px 0; }
    #section_pointclub_about .section_wrap .section_pointclub_about__title {
      font-size: 40px; }
    #section_pointclub_about .section_wrap .section_pointclub_about__text {
      margin-bottom: 40px; }
    #section_pointclub_about .section_wrap .section_pointclub_about__img {
      width: 37%; } }

.nav-tabs {
  display: flex;
  justify-content: center;
  font-family: "Noto Sans JP", sans-serif;
  margin: 20px 0;
  /* activeタブの下線 */ }
  .nav-tabs ul {
    display: flex;
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0; }
  .nav-tabs a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 0;
    text-decoration: none;
    color: #007BD0;
    font-weight: 500;
    transition: color 0.3s;
    /* ▼ SVGアイコン（線タイプ・上線なし） */
    /* hover時：文字色＋SVG色を変更 */
    /* アクティブタブ */
    /* focus（クリックやTabキー時）で線色変化 */ }
    .nav-tabs a::after {
      content: "";
      display: inline-block;
      width: 10px;
      height: 6px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><polyline points='1,1 5,5 9,1' fill='none' stroke='%23007BD0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
      transition: transform 0.3s, filter 0.3s; }
    .nav-tabs a:hover {
      color: #007BD0; }
      .nav-tabs a:hover ::after {
        background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><polyline points='1,1 5,5 9,1' fill='none' stroke='%231d3d8f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
    .nav-tabs a::before {
      content: "";
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 3px;
      background-color: #F0F3F5;
      transition: background-color 0.3s; }
    .nav-tabs a .active::before {
      background-color: #007BD0; }
    .nav-tabs a:focus::before {
      background-color: #007BD0; }
  .nav-tabs .active a {
    font-weight: 600; }
    .nav-tabs .active a::before {
      content: "";
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 100%;
      height: 4px;
      background-color: #007BD0;
      transition: background-color 0.3s; }
  @media only screen and (min-width: 835px) {
    .nav-tabs {
      margin: 0; }
      .nav-tabs ul {
        gap: 40px; } }

/*
.nav-tabs {
  display: flex;
  justify-content: center;
  font-family: "Noto Sans JP", sans-serif;
}

.nav-tabs ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 48px;
}

.nav-tabs a {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  text-decoration: none;
  color: #4a76c8;
  font-weight: 500;
  transition: color 0.3s;
}
*/
/* 下線（通常時は透明） */
/*
.nav-tabs a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #F0F3F5;
  transition: background-color 0.3s;
}

/* ホバー時 or フォーカス時 */
/*
.nav-tabs a:hover::after,
.nav-tabs a:focus::after {
  background-color: #4a76c8;} /* フォーカス時のライン色 */
/*
.nav-tabs a:hover,
.nav-tabs a:focus {
  color: #2b5ea8;
}

/* アクティブタブ */
/*
.nav-tabs a.active::after {
  background-color: #4a76c8;
}
*/
#section_pointclub_rank .section_wrap .section_pointclub_rank_img {
  margin-bottom: 40px;
  width: 100%; }
#section_pointclub_rank .section_wrap .section_pointclub_rank_list {
  padding-left: 0.5rem;
  margin-bottom: 20px; }
  #section_pointclub_rank .section_wrap .section_pointclub_rank_list li {
    list-style: disc;
    font-size: 15px;
    line-height: 1.71;
    list-style-position: inside;
    /* 箇条書きの・を内側に */ }
    #section_pointclub_rank .section_wrap .section_pointclub_rank_list li:last-child {
      list-style: none;
      padding-left: 0;
      text-indent: -1rem; }
#section_pointclub_rank .section_wrap .section_pointclub_rank_list_img {
  width: 100%; }
@media only screen and (min-width: 835px) {
  #section_pointclub_rank .section_wrap {
    padding: 60px 0; }
    #section_pointclub_rank .section_wrap .section_pointclub_rank_img {
      margin: 60px 0; }
    #section_pointclub_rank .section_wrap .section_pointclub_rank_list {
      margin-bottom: 30px; }
      #section_pointclub_rank .section_wrap .section_pointclub_rank_list li {
        font-size: 16px;
        line-height: 1.8; } }

#section_pointclub_point .section_pointclub_point__img {
  display: block;
  margin: 0 auto 40px; }
#section_pointclub_point .section_pointclub_point__detail {
  margin-bottom: 20px; }
#section_pointclub_point .section_pointclub_point__attention {
  list-style: disc;
  padding-left: 1rem;
  margin-bottom: 30px;
  text-indent: -1rem; }
  #section_pointclub_point .section_pointclub_point__attention li {
    line-height: 1.8;
    padding-bottom: 10px;
    list-style-position: inside;
    /* 箇条書きの・を内側に */ }
@media only screen and (min-width: 835px) {
  #section_pointclub_point .section_pointclub_point__img {
    margin-bottom: 60px; }
  #section_pointclub_point .section_pointclub_point__detail {
    margin-bottom: 40px; }
  #section_pointclub_point .section_pointclub_point__attention {
    margin-bottom: 0; }
    #section_pointclub_point .section_pointclub_point__attention li {
      padding-bottom: 0; } }

#section_pointclub_faq .section_wrap {
  padding: 20px 0; }
@media only screen and (min-width: 835px) {
  #section_pointclub_faq .section_wrap {
    padding: 80px 0 100px; } }