@charset "UTF-8";
/* ========================================================
# ベース設定
======================================================== */
:root {
  /* カラー */
  --Text: #333333;
  --Main: #23367a;
  --Sub: #eaf0f7;
  --Accent: #e14a49;
  --Yellow: #f8f0bd;
  --Gray: #a6b0ba;

  --Women: #f078a0;
  --WomenSub: #fff3f0;
  --WomenOrange: #ff9980;
  --WomenAccent: #e4226d;
  --WomenYellow: #fff5d6;
  /* フォント */
  --FontSub: "Roboto", sans-serif;
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/Noto Sans JP Bold.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/Noto Sans JP Medium.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Noto Sans JP Regular.woff") format("woff");
  font-display: swap;
}
body {
  font-feature-settings: "palt";
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  padding-top: 50px;
}
body.is-open {
  overflow: hidden;
}
body.result {
  padding-top: 0;
}
a,
button {
  color: inherit;
  transition: all 0.3s;
}
strong {
  font-weight: bold;
}
@media (any-hover: hover) {
  a:hover,
  button:hover {
    opacity: 0.6;
  }
}

/* ========================================================
# ユーティリティ
======================================================== */
.forPC {
  display: none;
}
.forSP {
  display: block;
}
.fz-sm {
  font-size: 12px;
}
.accent {
  color: var(--Accent);
  font-weight: bold;
}
.line {
  background: linear-gradient(to bottom, transparent 50%, var(--Yellow) 50%);
}
.strong {
  font-weight: bold;
}
.notes-txt {
  font-size: 8px;
  color: #a6b0ba;
}

/* ========================================================
# レイアウト
======================================================== */
/* デザイン幅 */
.wrapper {
  max-width: 750px;
  margin: 0 auto;
  width: 100%;
  overflow-x: hidden;
}
/* インナー幅 */
.inner {
  max-width: 1000px;
  margin: 0 auto;
  padding-inline: 15px;
}
/* セクション間の余白 */
.layout-section {
  margin-top: 40px;
}

/* テスト用　後で消す */
.testwrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-top: 24px;
  margin-bottom: 40px;
}

/* ========================================================
# 共通パーツ
======================================================== */
/* ヘッダー */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border-bottom: 1px solid #e2e2e2;
  width: 100%;
  height: 50px;
  background-color: #fff;
}
.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: inherit;
  padding-inline: 8px;
}
.header__ttl {
  width: 150px;
}
.header__ttl-link {
  display: block;
}
.header__ttl img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.header__btn {
  display: block;
  position: relative;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background-color: #7abeda;
  cursor: pointer;
  transition: transform 0.3s;
}
.header__btn-top,
.header__btn-center,
.header__btn-bottom {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  margin-right: auto;
  margin-left: auto;
  transition: all 0.3s;
  border-radius: 5px;
  background-color: #fff;
}
.header__btn-top {
  top: 0;
}
.header__btn-center {
  margin-top: 4px;
  margin-bottom: 4px;
}
.header__btn-bottom {
  top: 0;
}
.header__btn.is-open .header__btn-top {
  top: 6px;
  transform: rotate(-45deg);
  background-color: #fff;
}
.header__btn.is-open .header__btn-center {
  opacity: 0;
}
.header__btn.is-open .header__btn-bottom {
  top: -6px;
  transform: rotate(45deg);
  background-color: #fff;
}

/* SPメニュー */
.menu {
  position: fixed;
  top: 50px;
  right: 0;
  z-index: 100;
  translate: 105% 0;
  width: 300px;
  height: calc(100svh - 50px);
  background-color: #eaf0f7;
  overflow: auto;
  transition: translate 0.3s;
}
.menu.is-open {
  translate: 0 0;
}
.menu__list {
  display: grid;
  grid-template-columns: 1fr;
}
.menu__item {
  border-bottom: 1px dotted var(--Main);
}
.menu__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  width: 100%;
  padding: 15px 35px 15px 15px;
  color: var(--Main);
  font-size: 16px;
  font-weight: bold;
}
.menu__btn::before {
  position: absolute;
  top: 50%;
  right: 15px;
  translate: 0 -50%;
  width: 16px;
  height: 2px;
  background-color: var(--Main);
  content: "";
}
.menu__btn::after {
  position: absolute;
  top: 50%;
  right: 22px;
  translate: 0 -50%;
  width: 2px;
  height: 16px;
  background-color: var(--Main);
  content: "";
  transition: opacity 0.3s;
}
.menu__btn.is-open::after {
  opacity: 0;
}
.menu__btn .yellow {
  display: inline-block;
  margin-right: 2px;
  padding: 2px;
  background-color: #ffdc66;
}
.menu__age {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.menu__jouken {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.menu__type {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.menu__sub-list1 {
  display: none;
}
.menu__sub-item1 {
  border-bottom: 1px solid #e2e2e2;
}
.menu__sub-item1:last-child {
  border-bottom: none;
}
.menu__sub-list2 {
  display: none;
  padding: 0 15px 12px;
}
.menu__sub-list1 .menu__sub-list2 {
  background-color: #fff;
}
.menu__sub-list2--open {
  display: block;
}
.menu__sub-item2 + .menu__sub-item2 {
  margin-top: 6px;
}
.menu__link {
  display: block;
  position: relative;
  border: 1px solid var(--Main);
  border-radius: 4px;
  padding: 15px 35px 15px 15px;
  background-color: #fff;
  color: var(--Main);
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.menu__link::after {
  position: absolute;
  top: 50%;
  right: 15px;
  translate: 0 -50%;
  width: 20px;
  height: 20px;
  background-image: url(../img/cm_ico_arrow_right_05.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  content: "";
}
.menu__sub-btn {
  display: block;
  position: relative;
  width: 100%;
  padding: 15px 35px 15px 15px;
  background-color: #fff;
  color: var(--Main);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-align: left;
}
.menu__sub-btn::after {
  position: absolute;
  top: 50%;
  right: 18px;
  translate: 0 -50%;
  width: 10px;
  height: 12px;
  background-image: url(../img/cm_ico_arrow_bottom_02.png.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  content: "";
  transition: transform 0.3s;
}
.menu__sub-btn.is-open::after {
  transform: rotate(180deg);
}
.menu__search {
  display: flex;
  align-items: center;
  gap: 11px;
  position: relative;
  width: 100%;
  padding: 16px 35px 16px 18px;
}
.menu__search::after {
  position: absolute;
  top: 50%;
  right: 13px;
  translate: 0 -50%;
  width: 20px;
  height: 20px;
  background-image: url(../img/cm_ico_arrow_right_05.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  content: "";
}
.menu__search-ico {
  font-size: 22px;
}
.menu__search-txt {
  color: var(--Main);
  font-size: 15px;
  font-weight: bold;
}
.menu-bg {
  visibility: hidden;
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  z-index: 99;
  width: 100%;
  height: calc(100svh - 50px);
  background-color: rgba(0, 0, 0, 0.5);
  transition: all 0.3s;
  opacity: 0;
}
.menu-bg.is-open {
  visibility: visible;
  opacity: 1;
}

/* 広告表記 */
.adTxt {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 48px;
  translate: 0 -50%;
  gap: 4px;
  text-align: right;
}
.adTxt__txt {
  font-size: 10px;
  text-align: right;
}
.adTxt__pr {
  border: 1px solid var(--Text); /* 枠色 変数名がTextでない場合は変更 */
  padding: 2px 8px;
  font-size: 13px;
  font-weight: bold;
}

/* パンくず */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 0;
  padding: 10px 15px;
}
.breadcrumb--bg-blue {
  background-color: var(--Sub);
}
.breadcrumb__item {
  display: flex;
  align-items: center;
  position: relative;
}
.breadcrumb__item:nth-child(n + 2) {
  padding-left: 15px;
}
.breadcrumb__item:nth-child(n + 2)::before {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 5px;
  height: 5px;
  background-image: url(../img/cm_ico_arrow_right_01.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  content: "";
}
.breadcrumb__icon {
  display: inline-block;
  width: 13px;
}
.breadcrumb__icon img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.breadcrumb__link {
  font-size: 10px;
  font-weight: 400;
}
.breadcrumb__current {
  color: var(--Gray);
  font-size: 10px;
  font-weight: 400;
}

/* タイトル1 */
.ttl1 {
  padding: 18px 15px;
  background-color: var(--Main);
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.3;
}

/* タイトル2 */
.ttl2 {
  border-radius: 10px;
  padding: 10px 13px;
  background-color: var(--Sub);
  color: var(--Main);
  font-size: 18px;
  font-weight: bold;
}
.ttl2 span {
  display: block;
  position: relative;
  padding-left: 38px;
}
.ttl2 span::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  background-image: url(../img/cm_ico_pen.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  content: "";
}

/* タイトル3 */
.ttl3 {
  position: relative;
  border-bottom: 1px dotted var(--Gray);
  padding-left: 12px;
  padding-bottom: 8px;
  color: var(--Main);
  font-size: 15px;
  font-weight: bold;
}
.ttl3::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: calc(100% - 8px);
  background-color: var(--Main);
  content: "";
}

/* ボタン1 */
.btn1 {
  display: inline-block;
  position: relative;
  border-radius: 20px;
  max-width: 120px;
  width: 100%;
  padding: 9px 20px;
  background-color: var(--Accent);
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
}
.btn1::after {
  position: absolute;
  top: 50%;
  right: 12px;
  translate: 0 -50%;
  width: 6px;
  height: 7px;
  background-image: url(../img/cm_ico_arrow_right_02.png.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  content: "";
}
/* 小サイズ */
.btn1--sm {
  padding: 10px 14px;
}
.btn1--sm::after {
  right: 5px;
}
/* 大サイズ */
.btn1--lg {
  border-radius: 40px;
  max-width: none;
  padding: 23px 40px;
  font-size: 16px;
  letter-spacing: 0.05em;
  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.2);
}
.btn1--lg::after {
  right: 18px;
  width: 11px;
  height: 16px;
}

/* ボタン2 */
.btn2 {
  display: inline-block;
  position: relative;
  border-radius: 10px;
  width: 100%;
  padding: 24px 40px;
  background-color: var(--Main);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-align: center;
}
.btn2::after {
  position: absolute;
  top: 50%;
  right: 18px;
  translate: 0 -50%;
  width: 11px;
  height: 16px;
  background-image: url(../img/cm_ico_arrow_right_02.png.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  content: "";
}

/* 番号リスト */
.num-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  counter-reset: numlist;
}
.num-list__item {
  position: relative;
  padding-left: 28px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}
.num-list__item::before {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 3px;
  left: 0;
  border-radius: 2px;
  width: 16px;
  height: 16px;
  padding: 2px;
  background-color: var(--Main);
  color: #fff;
  font-family: var(--FonSub);
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  counter-increment: numlist;
  content: counter(numlist);
}

/* ポイントボックス */
.point-box {
  position: relative;
  border-radius: 10px;
  border: 1px solid var(--Main);
  padding: 35px 15px 20px;
  background-color: #fff;
}
.point-box__ttl {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  border-radius: 10px;
  width: calc(100% - 26px);
  background-color: var(--Main);
  padding: 15px 20px;
  color: #fff;
  font-family: var(--FonSub);
  font-size: 15px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
}
.point-box__ttl::after {
  position: absolute;
  bottom: -6px;
  left: 50%;
  translate: -50% 0;
  width: 14px;
  height: 7px;
  background-color: var(--Main);
  content: "";
  clip-path: polygon(50% 7px, 0% 0%, 14px 0%);
}
.point-box__ttl span {
  position: relative;
  padding-left: 30px;
}
.point-box__ttl span::before {
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  width: 28px;
  height: 28px;
  background-image: url(../img/cm_ico_light_bulb.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  content: "";
}
.point-box__txt {
  font-size: 14px;
  line-height: 1.5;
}

/* テーブル1 */
.table1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 10px;
  border: 1px solid var(--Gray);
  overflow: hidden;
}

.table1__item:nth-child(n + 4) {
  border-top: 1px solid var(--Gray);
}

.table1__item:not(:nth-child(3n + 1)) {
  border-left: 1px solid var(--Gray);
}

.table1__ttl {
  padding: 8px;
  background-color: #f1faff;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}

.table1__txt {
  border-top: 1px solid var(--Gray);
  padding: 10px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
}

/* テーブル2 */
.table2 {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 10px;
  border: 1px solid var(--Gray);
  overflow: hidden;
}
.table2__item {
  display: grid;
  grid-template-columns: 110px 1fr;
}
.table2__item:nth-child(n + 2) {
  border-top: 1px solid var(--Gray);
}
.table2__ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: #f1faff;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}
.table2__txt {
  border-left: 1px solid var(--Gray);
  padding: 10px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
}

/* テーブル3 */
.table3 {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 10px;
  border: 1px solid var(--Gray);
  overflow: hidden;
}
.table3__content {
  display: grid;
  grid-template-columns: 70px 1fr;
}
.table3__content:nth-child(n + 2) {
  border-top: 1px solid var(--Gray);
}
.table3__ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 8px;
  background-color: #f1faff;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
}
.table3__desc {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  border-left: 1px solid var(--Gray);
  padding: 10px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
}
.table3__weeks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.table3__week {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  padding: 5px 10px;
  background-color: #e2e2e2;
  color: var(--Gray);
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
}
.table3__week--active {
  background-color: #ffdc66;
  color: var(--Main);
}
.table3__time {
  font-size: 12px;
}
.table3__attention {
  color: var(--Gray);
  font-size: 10px;
}
.table3__list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
}
.table3__item {
  position: relative;
  font-size: 12px;
  font-weight: 400;
}
.table3__item img {
  position: absolute;
  top: 2px;
  left: 0;
  width: 12px;
  height: 12px;
}
.table3__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px;
}
.table3__tag {
  border-radius: 4px;
  padding: 3px 6px;
  background-color: var(--Sub);
  color: var(--Main);
  font-size: 10px;
  line-height: 1;
  text-align: center;
}

/* テーブルリスト */
.table-list1 {
  display: grid;
  grid-template-columns: 110px 130px repeat(2, 1fr) 135px 110px 110px;
  grid-template-rows: 1fr;
  border: 1px solid var(--Gray);
  border-radius: 10px;
  overflow: clip;
}

.table-list2 {
  display: grid;
  grid-template-columns: 139px 144px 1fr 76px 106px 131px;
  grid-template-rows: 1fr;
  border: 1px solid var(--Gray);
  border-radius: 10px;
  overflow: clip;
}

.dai2 .table-list2,
.kisotsu .table-list2,
.mikeiken .table-list2 {
  grid-template-columns: 140px 130px 1fr 76px 106px 88px 1fr;
}

.table-list1__item {
  display: grid;
  grid-template-columns: 1fr;
  /* grid-template-rows: 38px repeat(5, 1fr); */
}
.table-list1__item:not(:last-child) {
  border-right: 1px solid var(--Gray);
}
.table-list1__item-ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  height: 44px;
  padding: 2px;
  background-color: #f1faff;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}
.table-list1__sort-btn {
  display: inline-block;
  position: relative;
  border: 1px solid var(--Main);
  padding: 8px 17px;
}
.table-list1__sort-btn::before {
  position: absolute;
  top: -1px;
  left: 50%;
  translate: -50% 0;
  border-bottom: 2px solid var(--Main);
  border-right: 2px solid var(--Main);
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  content: "";
  transition: all 0.3s;
}
.table-list1__sort-btn.is-reverse::before {
  top: 6px;
  transform: rotate(-135deg);
}
.table-list1__item-desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-top: 1px solid var(--Gray);
  min-height: 78px;
  padding: 2px 6px;
  background-color: #fff;
}
.table-list1__item-desc--lg {
  padding: 3px 5px;
}
.table-list1__item-desc--bg {
  background-color: var(--Yellow);
}
.table-list1__item-logo-link {
  display: block;
  margin-inline: auto;
}
.table-list1__item-logo {
  display: block;
  margin-inline: auto;
  width: 100%;
  height: auto;
  max-height: 38px;
}
.table-list1__item-logo--sm {
  max-width: 80px;
}
.table-list1__item-link {
  display: block;
  margin-top: 4px;
  color: #0a50a1;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  text-decoration: underline;
}
.table-list1__item-link--lg {
  margin-top: 10px;
}
.table-list1__item-ico {
  display: block;
  margin-inline: auto;
  width: 35px;
  height: 35px;
}
.table-list1__item-txt {
  font-size: 12px;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
}
.table-list1__item-btn-lead {
  font-size: 10px;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
}
.table-list1__item-btn {
  margin-top: 4px;
}

.table-list1--hikaku {
  grid-template-columns: 105px 90px 100px 1fr 1fr 1fr 98px 110px;
  border-radius: 0;
  position: relative;
}
.table-list1--hikaku .table-list1__item {
  /* grid-template-rows: 44px repeat(9, 1fr); */
}
.table-list1--hikaku .table-list1__item:first-of-type {
  position: sticky;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.table-list1--hikaku .table-list1__item-ttl {
  flex-direction: column;
}

/* カード1 */
.card1 {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 6;
  gap: 0;
  border-radius: 10px;
  padding: 8px;
}
.card1--first {
  background-color: #f8f0bd;
}
.card1--second {
  background-color: #eaf0f7;
}
.card1--third {
  background-color: #f9f9f9;
}
.card1__rank {
  display: block;
  margin-inline: auto;
  width: 36px;
  height: auto;
}
.card1__logo {
  display: block;
  margin: 4px auto 0;
  width: 100px;
  height: 100%;
  aspect-ratio: 100 / 83;
}
.card1__ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 6px;
  color: #0a50a1;
  font-size: 14px;
  line-height: 1.3;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
}
.card1__txt {
  margin-top: 6px;
  color: var(--Main);
  font-size: 12px;
  line-height: 1.3;
}
.card1--first .card1__txt {
  color: var(--Accent);
  font-weight: bold;
}
.card1__btn {
  margin-top: 8px;
  text-align: center;
}

/* アコーディオン1 */
.accordion1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.accordion1__item {
  border: 1px solid var(--Gray);
  border-radius: 4px;
  background-color: #f1faff;
}
.accordion1__ttl {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  padding: 6px 45px 6px 15px;
  cursor: pointer;
}
.accordion1__ttl::before {
  position: absolute;
  top: 50%;
  right: 22px;
  translate: 0 -50%;
  width: 2px;
  height: 16px;
  background-color: var(--Accent);
  content: "";
  transition: opacity 0.3s;
}
.accordion1__ttl.is-open::before {
  opacity: 0;
}
.accordion1__ttl::after {
  position: absolute;
  top: 50%;
  right: 15px;
  translate: 0 -50%;
  width: 16px;
  height: 2px;
  background-color: var(--Accent);
  content: "";
}
.accordion1__ttl img {
  width: 30px;
  height: 30px;
  object-fit: cover;
}
.accordion1__ttl > span {
  display: block;
  color: var(--Main);
  font-size: 14px;
  font-weight: bold;
  line-height: 1.3;
}
.accordion1__desc {
  display: none;
  position: relative;
  margin-top: 6px;
  padding: 8px 15px 15px;
  font-size: 12px;
  line-height: 1.5;
}
.accordion1__desc::before {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: calc(100% - 30px);
  border-top: 1px dotted var(--Gray);
  content: "";
}
/* アコーディオン1 difference */
.accordion1--difference .accordion1__ttl span {
  font-size: 13px;
}
.accordion1--difference .accordion1__ttl .accent {
  font-size: 15px;
}
.accordion1--difference .accordion1__desc {
  font-size: 13px;
}
.accordion1--difference .accordion1__ttl img {
  width: 28px;
  height: 28px;
  object-fit: cover;
}

/* アコーディオン2 */
.accordion2__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding-inline: 15px;
}
.accordion2__item {
  border-bottom: 1px dotted var(--Gray);
}
.accordion2__ttl {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  padding: 6px 20px 6px 0;
  cursor: pointer;
}
.accordion2__ttl::before {
  position: absolute;
  top: 50%;
  right: 7px;
  translate: 0 -50%;
  width: 2px;
  height: 16px;
  background-color: var(--Main);
  content: "";
  transition: opacity 0.3s;
}
.accordion2__ttl.is-open::before {
  opacity: 0;
}
.accordion2__ttl::after {
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: 16px;
  height: 2px;
  background-color: var(--Main);
  content: "";
}
.accordion2__ttl img {
  width: 28px;
  height: 28px;
  object-fit: cover;
}
.accordion2__ttl > span {
  display: block;
  color: var(--Main);
  font-size: 13px;
  font-weight: bold;
  line-height: 1.3;
}
.accordion2__ttl .accent {
  font-size: 15px;
}
.accordion2__desc {
  display: none;
  position: relative;
  padding-block: 8px 15px;
  font-size: 13px;
  line-height: 1.5;
}

/* 口コミ */
.voice-list {
  display: grid;
  grid-template-columns: 1fr;
}
.voice-list__item {
  display: grid;
  grid-template-areas:
    "img cont"
    "txt txt";
  grid-template-columns: 50px 1fr;
  align-items: center;
  gap: 6px 10px;
  padding-block: 10px;
}
.voice-list__item:nth-child(n + 2) {
  border-top: 1px solid #e2e2e2;
}
.voice-list__img {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  grid-area: img;
}
.voice-list__img img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.voice-list__caption {
  font-size: 14px;
  text-align: center;
}
.voice-list__content {
  grid-area: cont;
}
.voice-list__ttl {
  color: var(--Main);
  font-size: 14px;
  font-weight: bold;
  line-height: 1.3;
}
.voice-list__star {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}
.voice-list__score {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  padding: 3px 4px;
  background-color: var(--Main);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
}
.voice-list__star img {
  width: 86px;
  height: auto;
}
.voice-list__txt {
  grid-area: txt;
  font-size: 13px;
  line-height: 1.5;
}

/* ========================================================
# 共通パーツ form
======================================================== */
.form__wrapper {
  display: grid;
  gap: 20px;
  padding-inline: 10px;
}
.form__list {
  position: relative;
  border: 1px solid var(--Main);
  border-radius: 10px;
  width: 100%;
  padding: 15px 10px;
  background-color: #fff;
  /* overflow: hidden; */
}
.form__ttl {
  display: flex;
  align-items: center;
  gap: 6px;
  position: absolute;
  top: -9px;
  left: 16px;
  padding-inline: 10px;
  background: linear-gradient(
    to bottom,
    #e2e2e2 0%,
    #e2e2e2 50%,
    #fff 50%,
    #fff 100%
  );
  color: var(--Main);
  font-size: 14px;
  font-weight: bold;
}
.form__ttl-multiple {
  display: inline-block;
  border-radius: 10px;
  padding: 4px 10px;
  background-color: #7abeda;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
}
.form__desc {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 25px;
  position: relative;
}
.form__desc--sp-col3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 25px;
}
.form__select {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: 100%;
}
.form__select.active {
  gap: 10px;
}
.form__select-wrap {
  position: relative;
}
.form__select-wrap::before {
  position: absolute;
  top: 50%;
  right: 12px;
  translate: 0 -50%;
  width: 9px;
  height: 13px;
  background-image: url(../img/cm_ico_arrow_bottom_01.png.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  content: "";
}
.form__select-wrap::after {
  position: absolute;
  top: 50%;
  right: 32px;
  translate: 0 -50%;
  width: 1px;
  height: calc(100% - 14px);
  background-color: #e2e2e2;
  content: "";
}
.form__select select {
  border: 1px solid var(--Gray);
  border-radius: 4px;
  width: 100%;
  padding: 11px 35px 11px 20px;
  background-color: #fff;
  color: var(--Main);
  font-size: 14px;
  font-weight: 400;
  appearance: none;
}
#smword .form__select-wrap {
  display: none;
}
#smword .form__select-wrap.on {
  display: block;
}

.form__label input {
  position: absolute;
  visibility: hidden;
  width: 0;
  height: 0;
  opacity: 0;
}
.form__txt {
  display: block;
  position: relative;
  padding-left: 28px;
  color: var(--Main);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
}
.form__txt::before {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid var(--Gray);
  border-radius: 2px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  content: "";
}
.form__txt::after {
  position: absolute;
  top: 7px;
  left: 5px;
  width: 9px;
  height: 7px;
  background-image: url(../img/cm_ico_check_gray.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  content: "";
}
.form__icon {
  display: inline-block;
  position: relative;
  padding-left: 18px;
}
.form__icon::before {
  position: absolute;
  top: 2px;
  left: 0;
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  content: "";
}
.form__label:nth-child(1) .form__icon::before {
  background-image: url(../img/ct_ico_search_mikeiken.svg);
}
.form__label:nth-child(2) .form__icon::before {
  background-image: url(../img/ct_ico_search_manager.svg);
}
.form__label:nth-child(3) .form__icon::before {
  background-image: url(../img/ct_ico_search_woman.svg);
}
.form__label:nth-child(4) .form__icon::before {
  background-image: url(../img/ct_ico_search_brank.svg);
}
.form__label:nth-child(5) .form__icon::before {
  background-image: url(../img/ct_ico_search_second.svg);
}
.form__label:nth-child(6) .form__icon::before {
  background-image: url(../img/ct_ico_search_sat.svg);
}
.form__label:nth-child(7) .form__icon::before {
  background-image: url(../img/ct_ico_search_19.svg);
}
.form__radio {
  display: block;
  position: relative;
  padding-left: 28px;
  color: var(--Main);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
}
.form__radio::before {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid var(--Main);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background-color: #fff;
  content: "";
}
.form__radio::after {
  display: none;
  position: absolute;
  top: 5px;
  left: 5px;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  background-color: var(--Main);
  content: "";
}
.form__btn {
  margin-top: 24px;
  text-align: center;
}

/* ラジオボタン・チェックボックスが選択された時 */
.form input[type="radio"]:checked + .form__txt::before,
.form input[type="checkbox"]:checked + .form__txt::before {
  border-color: var(--Main);
  background-color: var(--Main);
}
.form input[type="radio"]:checked + .form__txt::after,
.form input[type="checkbox"]:checked + .form__txt::after {
  background-image: url(../img/cm_ico_check_white.svg);
}
.form input[type="radio"]:checked + .form__radio::after {
  display: block;
}

/* ========================================================
# セクション MV
======================================================== */
.mv {
  position: relative;
}
.mv__lead {
  position: absolute;
  top: 4%;
  left: 50%;
  translate: -50% 0;
  color: #fff;
  font-size: calc(16 / 375 * 100vw);
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.mv__lead span {
  display: inline-block;
  padding-right: 2px;
  font-family: var(--FontSub);
  font-size: calc(24 / 375 * 100vw);
  line-height: 1;
  letter-spacing: 0.05em;
}
.mv__img {
  width: 100%;
}
.mv__img img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.mv__txt {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: calc(102 / 375 * 100vw);
  left: calc(11 / 375 * 100vw);
  width: calc(109 / 375 * 100vw);
  height: calc(30 / 375 * 100vw);
  color: var(--Main);
  font-size: calc(14 / 375 * 100vw);
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.02em;
}
.mv__txt span {
  font-family: var(--FontSub);
  line-height: 1;
  letter-spacing: 0;
}
.mv__txt--sp {
  display: flex;
}
.mv__txt--pc {
  display: none;
}
.mv__bottom {
  position: relative;
  padding-block: 10px;
  background-color: var(--Gray);
}
.mv__bottom::before {
  position: absolute;
  top: calc(50% - 2px);
  left: 0;
  z-index: 1;
  translate: 0 -50%;
  width: 100%;
  height: 1px;
  background-color: #fff;
  content: "";
}
.mv__bottom::after {
  position: absolute;
  top: calc(50% + 2px);
  left: 0;
  z-index: 1;
  translate: 0 -50%;
  width: 100%;
  height: 1px;
  background-color: #fff;
  content: "";
}
.mv__list {
  display: flex;
  justify-content: center;
  gap: 6px;
  position: relative;
  z-index: 2;
  margin-inline: auto;
  width: fit-content;
  padding-inline: 20px;
  background-color: var(--Gray);
}
.mv__item {
  position: relative;
  border-radius: 2px;
  background-color: #fff;
  padding: calc(4 / 375 * 100vw) calc(8 / 375 * 100vw) calc(4 / 375 * 100vw)
    calc(22 / 375 * 100vw);
  color: var(--Main);
  font-size: calc(11 / 375 * 100vw);
  font-weight: bold;
}
.mv__item::before {
  position: absolute;
  top: 50%;
  left: calc(6 / 375 * 100vw);
  translate: 0 -50%;
  width: calc(12 / 375 * 100vw);
  height: calc(12 / 375 * 100vw);
  background: url(../img/ct_ico_check.svg) no-repeat center center / contain;
  content: "";
}

/* ========================================================
# セクション ロゴ
======================================================== */
.logos {
  gap: 4px;
  padding-block: 12px;
  overflow: hidden;
}
.logos__swiper + .logos__swiper {
  margin-top: 4px;
}
.logos__wrap {
  display: flex;
  gap: 8px;
  will-change: transform;
}
.logos__wrap img {
  width: 60px;
  height: 30px;
  object-fit: contain;
}
.logos__swiper .swiper-slide {
  width: 60px;
}

/* ========================================================
# セクション ナビ
======================================================== */
.nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 0 15px 24px 15px;
}
.nav__link {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 2px;
  align-items: center;
  position: relative;
  border: 1px solid var(--Accent);
  border-radius: 4px;
  padding: 7px 11px 7px 5px;
  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
}
.nav__link::after {
  position: absolute;
  top: 50%;
  right: 3px;
  translate: 0 -50%;
  width: 7px;
  height: 10px;
  background: url(../img/cm_ico_arrow_right_04.svg) no-repeat center center /
    contain;
  content: "";
}
.nav__link img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}
.nav__body {
  text-align: center;
}
.nav__txt {
  color: var(--Accent);
  font-size: 10px;
  line-height: 1;
}
.nav__ttl {
  margin-top: 4px;
  color: var(--Accent);
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
  text-decoration: underline;
}

/* ========================================================
# セクション ポイント
======================================================== */
.point {
  padding-bottom: 12px;
}
.point__ttl img {
  width: 100%;
  height: auto;
}
.point__wrap {
  margin-top: 10px;
}
.point__lead {
  position: relative;
  border-radius: 10px;
  padding: 12px;
  background-color: var(--Main);
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
}
.point__lead::after {
  position: absolute;
  bottom: -6px;
  left: 50%;
  translate: -50% 0;
  width: 14px;
  height: 7px;
  background-color: var(--Main);
  content: "";
  clip-path: polygon(50% 7px, 0% 0%, 14px 0%);
}
.point__list {
  margin-top: 16px;
}

.point__txt {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
}

/* ========================================================
# セクション TOP3
======================================================== */
.top3 {
  padding-block: 10px 8px;
  background-color: var(--Main);
}
.top3__ttl img {
  width: 100%;
  height: auto;
}
.top3 .inner {
  padding-inline: 0;
}
.top3__wrap {
}
.top3__tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  border-bottom: 2px solid #fff;
}
.top3__tab {
  display: block;
  border-radius: 10px 10px 0 0;
  padding: 8px;
  background-color: #a6b0ba;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  border: 2px solid transparent;
  translate: 0 2px;
  position: relative;
}
.top3__tab::before {
  position: absolute;
  bottom: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: 2px;
  background-color: #fff;
  content: "";
  transition: background-color 0.3s;
}
@media (any-hover: hover) {
  .top3__tab:hover {
    opacity: 1 !important;
  }
}
.top3__tab.is-active {
  background-color: var(--Main);
  border-color: #fff;
  border-bottom-color: var(--Main);
}
.top3__tab.is-active::before {
  background-color: transparent;
}
.top3__contents {
  padding: 0 4px;
}
.top3__tabs + .top3__contents {
  margin-top: 6px;
}
.top3__content {
  display: none;
}
.top3__content.is-active {
  display: block;
}
.top3__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-inline: auto;
  width: 100%;
}
.top3__item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 6;
  gap: 0;
}
.top3__item-ttl {
  position: relative;
  border-radius: 4px;
  padding: 5px 0;
  color: var(--Main);
  font-size: 12px;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
}
.top3__item--first .top3__item-ttl {
  background-color: #ffdc66;
}
.top3__item--second .top3__item-ttl {
  background-color: #7abeda;
}
.top3__item--third .top3__item-ttl {
  background-color: #e2e2e2;
}
.top3__item-ttl::after {
  position: absolute;
  bottom: -5px;
  left: 50%;
  translate: -50% 0;
  width: 14px;
  height: 6px;
  clip-path: polygon(50% 6px, 0% 0%, 14px 0%);
  content: "";
}
.top3__item--first .top3__item-ttl::after {
  background-color: #ffdc66;
}
.top3__item--second .top3__item-ttl::after {
  background-color: #77aff1;
}
.top3__item--third .top3__item-ttl::after {
  background-color: #e2e2e2;
}
.top3__item-card {
  margin-top: 10px;
}

/* ========================================================
# セクション 差
======================================================== */
.difference {
  padding-top: 12px;
}
.difference__ttl img {
  width: 100%;
  height: auto;
}
.difference__txt {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
}
.difference__img {
  margin-top: 12px;
}
.difference__img img {
  width: 100%;
  height: auto;
}
.difference__lead {
  position: relative;
  margin-top: 10px;
  border-radius: 10px;
  padding: 12px;
  background-color: var(--Main);
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
}
.difference__sub-ttl {
  margin-top: 12px;
}
.difference__list {
  margin-top: 10px;
}

/* ========================================================
# セクション 徹底比較
======================================================== */
.hikaku {
  padding-block: 12px 70px;
}

.hikaku5 {
  padding-block: 12px 20px;
}
.hikaku.is-open,
.hikaku.is-hide {
  padding-block: 12px 24px;
}
.hikaku__ttl img {
  width: 100%;
  height: auto;
}
.hikaku__container {
  position: relative;
  height: 500px;
  overflow: clip;
}
.hikaku__container.is-open,
.hikaku__container.is-hide {
  height: auto;
}
.hikaku__container::after {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  height: 50px;
  background: -webkit-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.8) 50%,
    #fff 100%
  );
  content: "";
}
.hikaku__container.is-open::after,
.hikaku__container.is-hide::after {
  display: none;
}
.hikaku__wrap {
  margin-top: 10px;
  margin-left: 8px;
  overflow-x: auto;
}
.hikaku__list {
  width: 755px;
  margin-right: 8px;
}
.hikaku__more-wrap {
  position: relative;
  z-index: 10;
  margin-top: -85px;
  text-align: center;
}
.hikaku__more-wrap.is-open {
  margin-top: 10px;
}
.hikaku__more-wrap.is-hide {
  display: none;
}
.hikaku__more-btn {
  display: inline-block;
  border-radius: 10px;
  padding: 8px 20px;
  background-color: var(--Main);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}
.hikaku__searches {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 8px 10px 10px;
}
.hikaku__search {
}
.hikaku__search-ttl {
  position: relative;
  padding-left: 22px;
  font-size: 12px;
}
.hikaku__search-ttl::before {
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/cm_ico_sort.svg) no-repeat center center / contain;
  width: 16px;
  height: 16px;
  content: "";
}
.hikaku__search-ttl--filter::before {
  background: url(../img/cm_ico_filter.svg) no-repeat center center / contain;
}
.hikaku__search-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.hikaku__search-btn {
  border: 1px solid var(--Main);
  border-radius: 20px;
  padding: 4px 8px;
  background-color: #fff;
  color: var(--Main);
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  transition: all 0.3s;
}
.hikaku__search-btn.is-reverse {
  background-color: var(--Main);
  color: #fff;
}
.hikaku__search-selects {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.hikaku__search-wrap {
  position: relative;
}
.hikaku__search-wrap::before {
  position: absolute;
  top: 50%;
  right: 8px;
  translate: 0 -50%;
  width: 9px;
  height: 13px;
  background-image: url(../img/cm_ico_arrow_bottom_01.png.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  content: "";
  pointer-events: none;
}
.hikaku__search-wrap::after {
  position: absolute;
  top: 50%;
  right: 22px;
  translate: 0 -50%;
  width: 1px;
  height: calc(100% - 22px);
  background-color: #e2e2e2;
  content: "";
}
.hikaku__search-select {
  border: 1px solid var(--Main);
  border-radius: 4px;
  width: 100%;
  padding: 8px 30px 8px 8px;
  background-color: #fff;
  color: var(--Main);
  font-size: 12px;
  font-weight: 500;
  appearance: none;
}

/* ========================================================
# セクション テキストコンテンツ
======================================================== */
.textContent {
  padding-bottom: 24px;
  font-size: 15px;
  line-height: 1.5;
}

/* ========================================================
# セクション ランキング
======================================================== */
.ranking {
  padding-top: 24px;
  padding-bottom: 24px;
}
.ranking__ttl img {
  width: 100%;
  height: auto;
}
.ranking__txt {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.ranking__wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 14px;
}

/* ランキングアイテム */
.ranking-item {
  border-radius: 10px;
  overflow: hidden;
}
.ranking-item__head {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 8px;
  padding: 12px 20px;
  background-color: var(--Main);
}
.ranking-item__label {
  position: relative;
  width: 46px;
  height: 46px;
}
.ranking-item__label::before {
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 2px;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background-color: #7abeda;
  color: #fff;
  font-family: var(--FontSub);
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
}
body:not(.result)
  .ranking__wrap
  .ranking-item:nth-child(1)
  .ranking-item__label {
  background: url(../img/ct_ico_rank_01.svg) no-repeat center center / contain;
}
body:not(.result)
  .ranking__wrap
  .ranking-item:nth-child(2)
  .ranking-item__label {
  background: url(../img/ct_ico_rank_02.svg) no-repeat center center / contain;
}
body:not(.result)
  .ranking__wrap
  .ranking-item:nth-child(3)
  .ranking-item__label {
  background: url(../img/ct_ico_rank_03.svg) no-repeat center center / contain;
}
.ranking__other .ranking-item:nth-child(1) .ranking-item__label::before,
.ranking__other .ranking-item:nth-child(2) .ranking-item__label::before,
.ranking__other .ranking-item:nth-child(3) .ranking-item__label::before,
.ranking__other .ranking-item:nth-child(4) .ranking-item__label::before,
.ranking__other .ranking-item:nth-child(5) .ranking-item__label::before,
.ranking__other .ranking-item:nth-child(6) .ranking-item__label::before,
.ranking__other .ranking-item:nth-child(7) .ranking-item__label::before,
.ranking__other .ranking-item:nth-child(8) .ranking-item__label::before,
.ranking__other .ranking-item:nth-child(9) .ranking-item__label::before,
.ranking__other .ranking-item:nth-child(10) .ranking-item__label::before {
  display: flex;
  counter-increment: ranking;
  content: counter(ranking);
}
.ranking-item__head-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.ranking-item__head-lead {
  color: #fff;
  font-size: 12px;
}
.ranking-item__head-link {
  display: block;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-decoration: underline;
}
.ranking-item__body {
  padding: 18px 15px 24px;
  background-color: var(--Sub);
}
.ranking-item:first-of-type .ranking-item__body {
  background-color: var(--Yellow);
}
.ranking__other .ranking-item:first-of-type .ranking-item__body {
  background-color: var(--Sub);
}
.ranking-item__bnr {
  margin-inline: auto;
  max-width: 232px;
}
.ranking-item__bnr-link {
  display: block;
}
.ranking-item__bnr img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.ranking-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 4px;
  margin-top: 18px;
}
.ranking-item__tag {
  display: inline-block;
  border-radius: 10px;
  padding: 5px 10px;
  background-color: #e2e2e2;
  color: #a6b0ba;
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
}
.ranking-item__tag--active {
  background-color: #7abeda;
  color: #fff;
}
.ranking-item__tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 18px;
}
.ranking-item__tab {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 10px 10px 0 0;
  padding: 7px 3px;
  background-color: var(--Main);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
}
.ranking-item__tab:hover {
  opacity: 1 !important;
}
.ranking-item__tab.is-active {
  background-color: #fff;
  color: var(--Main);
}
.ranking-item__tab-img {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  background-color: #f1faff;
}
.ranking-item__tab-img img {
  width: 18px;
  height: 18px;
  object-fit: cover;
}
.ranking-item__contents {
  border-radius: 0 0 10px 10px;
  padding: 20px 15px;
  background-color: #fff;
}
.ranking-item__content {
  display: none;
}
.ranking-item__content.is-active {
  display: block;
}
.ranking-item__score-txt {
  position: relative;
  border-radius: 10px;
  padding: 7px 10px 11px;
  background-color: var(--Sub);
  color: var(--Main);
  font-size: 15px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
}
.ranking-item__score-txt::before {
  position: absolute;
  bottom: -5px;
  left: 50%;
  translate: -50% 0;
  width: 14px;
  height: 6px;
  background-color: var(--Sub);
  content: "";
  clip-path: polygon(50% 6px, 0% 0%, 14px 0%);
}
.ranking-item__score-txt span {
  font-size: 20px;
}
.ranking-item__score img {
  display: block;
  margin-top: 16px;
  width: 100%;
}
.ranking-item__table {
  margin-top: 12px;
}
.ranking-item__table .table3__item {
  padding-left: 14px;
}
.ranking-item__voices {
  display: grid;
  grid-template-columns: 1fr;
}
.ranking-item__voice {
  border-bottom: 1px dotted #e2e2e2;
  padding-block: 10px;
}
.ranking-item__voice-head {
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: center;
  gap: 10px;
}
.ranking-item__voice-img {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.ranking-item__voice-head img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.ranking-item__voice-img figcaption {
  font-size: 14px;
  text-align: center;
}
.ranking-item__voice-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  position: relative;
  width: 100%;
}
.ranking-item__voice-before {
  position: relative;
  border: 1px solid var(--Main);
  border-radius: 4px;
  padding: 7px;
}
.ranking-item__voice-before::after {
  position: absolute;
  bottom: -20px;
  left: 50%;
  translate: -50% 0;
  width: 18px;
  height: 13px;
  background-color: #a6b0ba;
  content: "";
  clip-path: polygon(50% 13px, 0% 0%, 18px 0%);
}
.ranking-item__voice-before-ttl {
  display: inline-block;
  position: absolute;
  top: -8px;
  right: 20px;
  padding-inline: 5px;
  font-size: 12px;
  font-weight: bold;
  background-color: #fff;
}
.ranking-item__voice-before-txt {
  font-size: 12px;
  line-height: 1.3;
}
.ranking-item__voice-after {
  position: relative;
  border: 1px solid var(--Main);
  border-radius: 4px;
  padding: 10px 7px;
  background-color: #f1faff;
}
.ranking-item__voice-after-ttl {
  display: inline-block;
  position: absolute;
  top: -12px;
  right: 15px;
  background: linear-gradient(
    to bottom,
    #fff 0%,
    #fff 51%,
    #f1faff 51%,
    #f1faff 100%
  );
  padding: 2px 5px;
  color: var(--Main);
  font-size: 14px;
  font-weight: bold;
}
.ranking-item__voice-after-txt {
  color: var(--Main);
  font-size: 14px;
  font-weight: bold;
  line-height: 1.3;
}
.ranking-item__voice-body {
  margin-top: 8px;
}
.ranking-item__voice-ttl {
  color: var(--Main);
  font-size: 13px;
  font-weight: bold;
  line-height: 1.3;
}
.ranking-item__voice-star {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}
.ranking-item__voice-score {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  padding: 3px 4px;
  background-color: var(--Main);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
}
.ranking-item__voice-star img {
  width: 86px;
  height: auto;
}
.ranking-item__voice-txt {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
}
.ranking-item__features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.ranking-item__feature {
  border-radius: 10px;
  padding: 15px 10px;
  background-color: var(--Sub);
}
.ranking-item__feature-head {
  display: grid;
  grid-template-columns: 35px 1fr;
  gap: 12px;
  align-items: start;
  padding-inline: 10px;
}
.ranking-item__feature-ttl {
  color: var(--Main);
  font-size: 16px;
  font-weight: bold;
  line-height: 1.3;
}
.ranking-item__feature-txt {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
}
.ranking-item__txt {
  margin-top: 20px;
  color: var(--Main);
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
}
.ranking-item__logo {
  margin: 10px auto 0;
  max-width: 120px;
}
.ranking-item__logo-link {
  display: block;
}
.ranking-item__logo img {
  width: 100%;
  height: auto;
}
.ranking-item__btn {
  margin-top: 10px;
  text-align: center;
}
.ranking__more-btn {
  display: block;
  position: relative;
  margin: 16px auto 0;
  border: 1px solid var(--Main);
  border-radius: 10px;
  width: 100%;
  padding: 22px 40px;
  background-color: #fff;
  color: var(--Main);
  font-size: 14px;
  font-weight: bold;
}
.ranking__more-btn::after {
  position: absolute;
  top: 50%;
  right: 20px;
  translate: 0 -50%;
  width: 13px;
  height: 18px;
  background-image: url(../img/cm_ico_arrow_bottom_02.png.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  content: "";
  transition: transform 0.3s;
}
.ranking__more-btn.is-open::after {
  transform: rotate(180deg);
}
.ranking__other {
  display: none;
  margin-top: 16px;
  counter-reset: ranking 3;
}
.ranking__other[style*="display: block"] {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 16px;
}
/* ========================================================
# セクション 検索
======================================================== */
.search {
  padding-block: 24px;
  background-color: #e2e2e2;
}
.search__ttl img {
  width: 100%;
  height: auto;
}
.search__form {
  margin-top: 18px;
}

/* ========================================================
# セクション リザルト
======================================================== */
.result-section {
  margin-top: -30px;
  padding-bottom: 20px;
  background-color: var(--Sub);
}
.result__ttl img {
  width: 100%;
  height: auto;
}
.result__content {
  margin-top: 14px;
  border-radius: 4px;
  padding: 10px 15px;
  background-color: #fff;
}
.result__terms {
  border-radius: 4px;
  padding: 4px 10px;
  background-color: var(--Sub);
  color: var(--Main);
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
}
.result__list {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 4px;
}
.result__item {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: 10px;
  border-bottom: 1px dotted var(--Gray);
  padding-block: 6px;
}
.result__item-ttl {
  position: relative;
  padding-left: 22px;
  color: var(--Main);
  font-size: 12px;
  font-weight: bold;
  line-height: 1.3;
}
.result__item-ttl::before {
  position: absolute;
  top: 2px;
  left: 0;
  width: 14px;
  height: 14px;
  background-image: url(../img/cm_ico_check_blue.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  content: "";
}
.result__item-label {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.result__item-label span {
  display: inline-block;
  border-radius: 10px;
  padding: 4px 10px;
  background-color: #7abeda;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.3;
}
.result-more {
  margin-top: 24px;
}
.result-more__wrap {
  padding-inline: 20px;
}
.result-more__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  position: relative;
  border: 1px solid var(--Main);
  border-radius: 10px;
  width: 100%;
  padding: 10px 40px;
  background-color: #fff;
  color: var(--Main);
  font-size: 14px;
  font-weight: bold;
}
.result-more__btn::before {
  position: absolute;
  top: 50%;
  right: 13px;
  translate: 0 -50%;
  width: 18px;
  height: 2px;
  background-color: var(--Main);
  content: "";
}
.result-more__btn::after {
  position: absolute;
  top: 50%;
  right: 20px;
  translate: 0 -50%;
  width: 2px;
  height: 18px;
  background-color: var(--Main);
  content: "";
  transition: opacity 0.3s;
}
.result-more__btn.is-open::after {
  opacity: 0;
}
.result-more__btn span {
  font-size: 14px;
  line-height: 1;
}
.result-more__content {
  display: none;
  margin-top: 24px;
}

/* ========================================================
# セクション リザルトソート
======================================================== */
.result-sort {
  padding-top: 24px;
}
.result-sort__list {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.result-sort__item {
}
.result-sort__link {
  display: inline-block;
  border: 1px solid var(--Main);
  border-radius: 10px;
  min-width: 150px;
  padding: 10px 15px;
  color: var(--Main);
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}
.result-sort__link.active {
  background-color: var(--Main);
  color: #fff;
}

/* ========================================================
# セクション リザルトランキング
======================================================== */
.result-ranking {
  padding-block: 24px;
  counter-reset: result 3;
}
.result-ranking__wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.result-ranking__wrap .ranking-item:nth-of-type(1) .ranking-item__label {
  background: url(../img/ct_ico_rank_01.svg) no-repeat center center / contain;
}
.result-ranking__wrap .ranking-item:nth-of-type(2) .ranking-item__label {
  background: url(../img/ct_ico_rank_02.svg) no-repeat center center / contain;
}
.result-ranking__wrap .ranking-item:nth-of-type(3) .ranking-item__label {
  background: url(../img/ct_ico_rank_03.svg) no-repeat center center / contain;
}
.result-ranking__wrap .ranking-item:nth-of-type(4) .ranking-item__label::before,
.result-ranking__wrap .ranking-item:nth-of-type(5) .ranking-item__label::before,
.result-ranking__wrap .ranking-item:nth-of-type(6) .ranking-item__label::before,
.result-ranking__wrap .ranking-item:nth-of-type(7) .ranking-item__label::before,
.result-ranking__wrap .ranking-item:nth-of-type(8) .ranking-item__label::before,
.result-ranking__wrap .ranking-item:nth-of-type(9) .ranking-item__label::before,
.result-ranking__wrap
  .ranking-item:nth-of-type(10)
  .ranking-item__label::before,
.result-ranking__wrap
  .ranking-item:nth-of-type(11)
  .ranking-item__label::before,
.result-ranking__wrap
  .ranking-item:nth-of-type(12)
  .ranking-item__label::before,
.result-ranking__wrap
  .ranking-item:nth-of-type(13)
  .ranking-item__label::before,
.result-ranking__wrap
  .ranking-item:nth-of-type(14)
  .ranking-item__label::before,
.result-ranking__wrap
  .ranking-item:nth-of-type(15)
  .ranking-item__label::before,
.result-ranking__wrap
  .ranking-item:nth-of-type(16)
  .ranking-item__label::before {
  display: flex;
  counter-increment: result;
  content: counter(result);
}

/* ========================================================
# セクション フッター
======================================================== */
.footer {
  padding-block: 40px 28px;
  background-color: var(--Main);
}
.footer__inner {
  padding-inline: 20px;
}
.footer__logo {
  margin-inline: auto;
  max-width: 286px;
}
.footer__logo-link {
  display: block;
}
.footer__logo img {
  width: 100%;
}
.footer__agents {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 32px;
  max-width: 440px;
}
.footer__agent-link {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
}
.footer__agent-link img {
  width: 100%;
  height: auto;
  object-fit: contain;
  aspect-ratio: 85 / 42.5;
}
.footer__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
  margin-block: 32px 28px;
}
.footer__list-ttl {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}
.footer__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 20px;
  margin-top: 10px;
  width: fit-content;
}
.footer__list--sp-col1 {
  grid-template-columns: 1fr;
}
.footer__item {
  position: relative;
  padding-left: 13px;
}
.footer__item::before {
  position: absolute;
  top: 6px;
  left: 0;
  width: 6px;
  height: 7px;
  background-image: url(../img/cm_ico_arrow_right_02.png.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  content: "";
}
.footer__link {
  display: block;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--Gray);
  padding-top: 28px;
}
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
}
.footer__nav-item {
  position: relative;
}
.footer__nav-item:nth-child(n + 2)::before {
  position: absolute;
  top: 50%;
  left: -15px;
  translate: 0 -50%;
  width: 1px;
  height: 12px;
  background-color: var(--Gray);
  content: "";
}
.footer__nav-link {
  display: block;
  color: var(--Gray);
  font-size: 12px;
  font-weight: 400;
}
.footer__copyright {
  color: var(--Gray);
  font-size: 11px;
  font-weight: 400;
}

/* ========================================================
# セクション 再検索
======================================================== */
.re-search {
  padding-block: 24px;
  background-color: #e2e2e2;
}
.re-search__ttl {
  color: var(--Main);
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}
.re-search__wrapper {
  margin-top: 18px;
}

/* ========================================================
# セクション おすすめ
======================================================== */
.recommend {
  padding-block: 10px 8px;
  background-color: var(--Main);
}
.recommend__ttl img {
  width: 100%;
  height: auto;
}
.recommend__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-top: 40px;
}
.recommend__item {
  position: relative;
  border-radius: 10px;
  background-color: #fff;
}
.recommend__item-ttl {
  position: absolute;
  top: 0;
  left: 16px;
  translate: 0 -50%;
  background-image: url(../img/ct_flag_yellow.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 190px;
  height: 50px;
}
.recommend__item:nth-child(2) .recommend__item-ttl {
  background-image: url(../img/ct_flag_blue.svg);
}
.recommend__item:nth-child(3) .recommend__item-ttl {
  background-image: url(../img/ct_flag_orange.svg);
}
.recommend__item:nth-child(4) .recommend__item-ttl {
  background-image: url(../img/ct_flag_gray.svg);
}
.recommend__item-ttl span {
  position: absolute;
  top: calc(50% - 1px);
  left: 50%;
  translate: -50% -50%;
  color: var(--Main);
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}
.recommend__item-head {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  border-radius: 10px 10px 0 0;
  min-height: 88px;
  padding: 12px;
  background-color: #fff;
}
.recommend__item-logo {
  height: auto;
  object-fit: contain;
}
.recommend__item-logo-link {
  display: block;
}
.recommend__item:nth-child(1) .recommend__item-logo {
  width: 255px;
}
.recommend__item:nth-child(2) .recommend__item-logo {
  width: 120px;
}
.recommend__item:nth-child(3) .recommend__item-logo {
  width: 234px;
}
.recommend__item:nth-child(4) .recommend__item-logo {
  width: 120px;
}
.recommend__item-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 24px;
  border-radius: 0 0 10px 10px;
}
.recommend__item:nth-child(1) .recommend__item-body {
  background-color: #f8f0bd;
}
.recommend__item:nth-child(2) .recommend__item-body {
  background-color: #c9e8f5;
}
.recommend__item:nth-child(3) .recommend__item-body {
  background-color: #fbe6d2;
}
.recommend__item:nth-child(4) .recommend__item-body {
  background-color: #e2e2e2;
}
.recommend__item-txt {
  color: var(--Main);
  font-size: 12px;
  font-weight: bold;
  line-height: 1.5;
}
.recommend__item-arrow {
  display: inline-block;
  width: 38px;
  border-radius: 50%;
  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
}
.recommend__item-btn {
  display: none;
}
.recommend__attention {
  margin-top: 6px;
  padding-inline: 15px;
  color: var(--Gray);
  font-size: 10px;
}

/* ========================================================
# 転職エージェント活用方法
======================================================== */

.fulluse {
  background-color: #f1faff;
  padding: 12px 0 32px;
}

.method {
  background-color: #fff;
  border-radius: 14px;
}

.method-wrapper {
  padding: 0 15px;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 14px;
}

.method-innner {
  display: grid;
  grid-template-columns: auto 1fr;
  padding: 10px;
  gap: 7px;
  align-items: center;
}

.method-picture img {
  max-width: 136px;
  height: auto;
  width: 100%;
}

.method-text {
  font-size: 12px;
  font-weight: normal;
  line-height: 1.6;
}

.method-ttl {
  padding: 6px 0 0 0;
}

/* ========================================================
# FV下差し替え
======================================================== */
.tensyoku-first-textbox {
  border: 1px solid #a6b0ba;
  border-radius: 10px;
  padding: 13px 15px;
}

.tensyoku-first-textbox .tensyoku-first-text {
  font-size: 14px;
  text-align: center;
}

.tensyoku-first-textbox_wrapper {
  padding: 8px 15px 18px 15px;
}

.tensyoku-first-text span {
  color: #e14a49;
  font-weight: bold;
}
/* ========================================================
20250605 タイプ別TOP3
女性版以外の画像指定部分コメントアウト&色指定仮で入れてます
======================================================== */
.top3Type {
  background: var(--Sub);
  padding: 24px 0 32px;
}

.top3Type .notes-txt {
  padding: 0 15px;
}

.top3Type__head p {
  color: #333;
  font-size: 14px;
  padding: 15px;
}

.top3Type__tags {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 12px;
  padding-left: 15px;
}

.top3Type__tags button {
  background: #fff;
  border: 1px solid var(--Main);
  color: var(--Main);
  font-size: 14px;
  font-weight: bold;
  border-radius: 15px;
  padding: 4px 8px 6px;
  margin: 0;
  white-space: nowrap;
}

.top3Type__tags button.active,
.top3Type__tags button.is-active {
  background: var(--Main);
  color: #fff;
}

.top3Type__tags .star::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url(../img/ct_ico_top3Type_star_m.svg);
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(2px);
  margin-right: 2px;
}

.top3Type__tags::-webkit-scrollbar {
  display: none;
}

.top3Type__subtags.has-border {
  border-top: dotted 1px var(--Main);
  padding: 12px 15px 15px;
  height: auto;
  gap: 6px;
  overflow-x: auto;
}

.top3Type__subtags button {
  border: 1px solid var(--Main);
  color: var(--Main);
  font-size: 12px;
  font-weight: bold;
  border-radius: 4px;
  padding: 4px 10px 5px;
  white-space: nowrap;
}

.top3Type__subtags button.active,
.top3Type__subtags button.is-active {
  background: var(--Main);
  color: #fff;
}

.top3Type__subtags::-webkit-scrollbar {
  display: none;
}

.top3Type__wrap {
  display: none;
  position: static;
  opacity: 0;
  transition: opacity 1s;
  pointer-events: none;
}

.top3Type__wrap.is-visible {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.top3Type__list {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  margin: 0 15px;
  padding: 0 15px;
  border-radius: 10px;
}

.top3Type__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 6px 12px;
}

.top3Type__list > .top3Type__item:nth-child(2) {
  border-top: dotted 1px var(--Main);
  border-bottom: dotted 1px var(--Main);
}

.top3Type__bnr {
  position: relative;
}

.top3Type__bnr img {
  width: 104px;
  aspect-ratio: 104 / 87;
}

.top3Type__bnr::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  width: 32px;
  height: 32px;
  z-index: 10;
}

.top3Type__list > .top3Type__item:nth-child(1) .top3Type__bnr::before {
  /* background: url(../img/ct_ico_top3Type_01_w.svg) no-repeat center/contain; */
}

.top3Type__list > .top3Type__item:nth-child(2) .top3Type__bnr::before {
  /* background: url(../img/ct_ico_top3Type_02_w.svg) no-repeat center/contain; */
}

.top3Type__list > .top3Type__item:nth-child(3) .top3Type__bnr::before {
  /* background: url(../img/ct_ico_top3Type_03_w.svg) no-repeat center/contain; */
}

.top3Type__txt a {
  display: block;
  margin-bottom: 3px;
  color: #0a50a1;
  font-weight: bold;
  font-size: 14px;
  text-decoration: underline;
}

.top3Type__txt p {
  margin-top: 8px;
  font-size: 12px;
  color: #333;
  line-height: 1.3;
}

.top3Type__cta {
  margin-top: 20px;
  padding: 0 15px;
  position: relative;
}

.top3Type__cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #fff;
  border: 1px solid var(--Main);
  color: var(--Main);
  padding: 22px;
  border-radius: 10px;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-decoration: none;
}

.top3Type__cta a::after {
  content: "";
  /* background: url(../img/ct_ico_top3Type_arrow_w.svg) no-repeat center/contain; */
  position: absolute;
  right: 30px;
  top: 20px;
  width: 26px;
  height: 26px;
}

/* ========================================================
# コラム用　表
======================================================== */
.table__column .table2__item:first-of-type .table2__ttl {
  background-color: #f1faff;
}
.table__column .table2__item:first-of-type .table2__txt {
  background-color: #f1faff;
  text-align: center;
}

.table__column {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 10px;
  border: 1px solid var(--Gray);
  overflow: hidden;
}

.table__column .table2__item {
  display: grid;
  grid-template-columns: 80px repeat(auto-fit, minmax(40px, 1fr));
}

.table__column .table2__item:nth-child(n + 2) {
  border-top: 1px solid var(--Gray);
}
.table__column .table2__ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: white;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}
.table__column .table2__txt {
  border-left: 1px solid var(--Gray);
  padding: 10px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
}

.column-link {
  display: block;
  margin-top: 4px;
  color: #0a50a1;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.3;
  text-decoration: underline;
}

/* ========================================================
# 女性版
======================================================== */
body.women:not(.result)
  .ranking__wrap
  .ranking-item:nth-child(1)
  .ranking-item__label {
  background: url(../img/ct_ico_rank_01_w.svg) no-repeat center center / contain;
}
body.women:not(.result)
  .ranking__wrap
  .ranking-item:nth-child(2)
  .ranking-item__label {
  background: url(../img/ct_ico_rank_02_w.svg) no-repeat center center / contain;
}
body.women:not(.result)
  .ranking__wrap
  .ranking-item:nth-child(3)
  .ranking-item__label {
  background: url(../img/ct_ico_rank_03_w.svg) no-repeat center center / contain;
}

.women,
.m_women,
.women_nav,
.women20s,
.women30s,
.m_women20s,
.m_women30s,
.index3,
.josanshi,
.hokenshi,
.hoikushi,
.kangoshi,
.women2 {
  /* 共通  */
  .accent {
    color: var(--WomenAccent);
  }
  .line {
    background: linear-gradient(
      to bottom,
      transparent 50%,
      var(--WomenYellow) 50%
    );
  }

  /* パンくず */
  .breadcrumb--bg-blue {
    background-color: var(--WomenSub);
  }

  /* タイトル1 */
  .ttl1 {
    background-color: var(--Women);
  }

  /* タイトル2 */
  .ttl2 {
    background-color: var(--WomenSub);
    color: var(--Women);
  }

  /* タイトル3 */
  .ttl3 {
    color: var(--Women);
  }
  .ttl3::before {
    background-color: var(--Women);
  }

  /* ボタン1 */
  .btn1 {
    background-color: var(--WomenAccent);
  }

  /* ボタン2 */
  .btn2 {
    background-color: var(--WomenOrange);
  }

  /* 番号リスト */
  .num-list__item::before {
    background-color: var(--Women);
  }

  /* ポイントボックス */
  .point-box {
    border: 1px solid var(--Women);
  }
  .point-box__ttl {
    background-color: var(--Women);
  }
  .point-box__ttl::after {
    background-color: var(--Women);
  }

  /* テーブル1 */
  .table1__ttl {
    background-color: var(--WomenSub);
  }

  /* テーブル2 */
  .table2__ttl {
    background-color: var(--WomenSub);
  }

  /* テーブル3 */
  .table3__ttl {
    background-color: var(--WomenSub);
  }
  .table3__week--active {
    color: var(--Women);
  }
  .table3__tag {
    background-color: var(--WomenSub);
    color: var(--WomenOrange);
  }

  /* テーブルリスト */
  .table-list1__item-ttl {
    background-color: var(--WomenSub);
  }

  /* カード1 */
  .card1--first {
    background-color: #fff1c7;
  }
  .card1--second {
    background-color: #fae1da;
  }
  .card1--third {
    background-color: #ece7e7;
  }
  .card1__txt {
    color: var(--Text);
  }
  .card1--first .card1__txt {
    color: var(--WomenAccent);
  }

  /* アコーディオン1 */
  .accordion1__item {
    background-color: #fff;
  }
  .accordion1__ttl::before {
    background-color: var(--WomenAccent);
  }
  .accordion1__ttl::after {
    background-color: var(--WomenAccent);
  }
  .accordion1__ttl > span {
    color: var(--Text);
  }
  .accordion1--difference .accordion1__ttl > span {
    color: var(--Text);
  }
  .accordion1--difference .accordion1__ttl::before {
    background-color: var(--WomenOrange);
  }
  .accordion1--difference .accordion1__ttl::after {
    background-color: var(--WomenOrange);
  }

  /* アコーディオン2 */
  .accordion2__ttl::before {
    background-color: var(--Women);
  }
  .accordion2__ttl::after {
    background-color: var(--Women);
  }
  .accordion2__ttl > span {
    color: var(--Women);
  }

  /* 口コミ */
  .voice-list__ttl {
    color: var(--Women);
  }
  .voice-list__score {
    background-color: var(--Women);
  }

  /* 共通パーツ form */
  .form__list {
    border: 1px solid #fff;
  }
  .form__ttl {
    background: linear-gradient(
      to bottom,
      var(--WomenSub) 0%,
      var(--WomenSub) 50%,
      #fff 50%,
      #fff 100%
    );
    color: var(--Text);
  }
  .form__ttl-multiple {
    background-color: var(--WomenOrange);
  }
  .form__select select {
    color: var(--Text);
  }
  .form__txt {
    color: var(--Text);
  }
  .form__radio {
    color: var(--Text);
  }
  .form__radio::before {
    border: 1px solid var(--WomenOrange);
  }
  .form__radio::after {
    background-color: var(--WomenOrange);
  }
  .form input[type="radio"]:checked + .form__txt::before,
  .form input[type="checkbox"]:checked + .form__txt::before {
    border-color: var(--WomenOrange);
    background-color: var(--WomenOrange);
  }
  .form__label:nth-child(1) .form__icon::before {
    background-image: url(../img/ct_ico_search_mikeiken_w.svg);
  }
  .form__label:nth-child(2) .form__icon::before {
    background-image: url(../img/ct_ico_search_manager_w.svg);
  }
  .form__label:nth-child(3) .form__icon::before {
    background-image: url(../img/ct_ico_search_woman_w.svg);
  }
  .form__label:nth-child(4) .form__icon::before {
    background-image: url(../img/ct_ico_search_brank_w.svg);
  }
  .form__label:nth-child(5) .form__icon::before {
    background-image: url(../img/ct_ico_search_second_w.svg);
  }
  .form__label:nth-child(6) .form__icon::before {
    background-image: url(../img/ct_ico_search_sat_w.svg);
  }
  .form__label:nth-child(7) .form__icon::before {
    background-image: url(../img/ct_ico_search_19_w.svg);
  }

  /* ヘッダー */
  .header__btn {
    background-color: var(--Women);
  }
  /* SPメニュー */
  .menu {
    background-color: var(--WomenSub);
  }
  .menu__item {
    border-bottom: 1px dotted var(--WomenAccent);
  }
  .menu__btn {
    color: var(--WomenAccent);
  }
  .menu__btn::before {
    background-color: var(--WomenAccent);
  }
  .menu__btn::after {
    background-color: var(--WomenAccent);
  }
  .menu__btn .yellow {
    background-color: #ffdc66;
  }
  .menu__sub-item1 {
    border-bottom: 1px solid #e2e2e2;
  }
  .menu__link {
    border: 1px solid var(--WomenAccent);
    color: var(--WomenAccent);
  }
  .menu__link::after {
    background-image: url(../img/cm_ico_arrow_right_05.svg);
  }
  .menu__sub-btn {
    color: var(--WomenAccent);
  }
  .menu__sub-btn::after {
    background-image: url(../img/cm_ico_arrow_bottom_03.png.webp);
  }
  .menu__search-txt {
    color: var(--WomenAccent);
  }

  /* セクション MV */
  .mv__txt {
    height: calc(28 / 375 * 100vw);
    color: var(--Text);
  }
  .mv__txt span {
    color: var(--WomenAccent);
    font-family: "Noto Sans JP", sans-serif;
    font-size: calc(20 / 375 * 100vw);
  }
  .mv__bottom {
    background-color: var(--WomenSub);
  }
  .mv__bottom::before {
    background-color: #ffdee9;
  }
  .mv__bottom::after {
    background-color: #ffdee9;
  }
  .mv__list {
    background-color: var(--WomenSub);
  }
  .mv__item {
    color: var(--Text);
    font-weight: bold;
  }
  .mv__item::before {
    background: url(../img/ct_ico_check_w.svg) no-repeat center center / contain;
  }

  /* セクション ポイント */
  .point__lead {
    background-color: var(--Women);
  }
  .point__lead::after {
    background-color: var(--Women);
  }

  /* セクション TOP3 */
  .top3 {
    background-color: var(--WomenSub);
  }
  .top3__tab {
    background-color: var(--Women);
    color: #fff;
  }
  .top3__tab.is-active {
    background-color: #fff;
    color: var(--Women);
  }
  .top3__item-ttl {
    color: #fff;
  }
  .top3__item--first .top3__item-ttl {
    background-color: var(--WomenOrange);
  }
  .top3__item--second .top3__item-ttl {
    background-color: var(--Women);
  }
  .top3__item--third .top3__item-ttl {
    background-color: #a6b0ba;
  }
  .top3__tabs {
    border-bottom: 2px solid var(--Women);
  }
  .top3__tab {
    background-color: #e2e2e2;
    color: var(--Gray);
    border: 2px solid transparent;
  }
  .top3__tab::before {
    background-color: var(--Women);
  }
  @media (any-hover: hover) {
    .top3__tab:hover {
      opacity: 1 !important;
    }
  }
  .top3__tab.is-active {
    background-color: var(--WomenSub);
    border-color: var(--Women);
    border-bottom-color: var(--WomenSub);
  }
  .top3__tab.is-active::before {
    background-color: transparent;
  }

  /* セクション 差 */
  .difference__lead {
    background-color: var(--Women);
  }

  /* セクション ランキング */
  .ranking-item__head {
    background-color: var(--WomenOrange);
  }
  .ranking-item__label::before {
    background-color: #fff;
    color: var(--WomenOrange);
  }
  .ranking-item__body {
    background-color: var(--WomenSub);
  }
  .ranking-item:first-of-type .ranking-item__body {
    background-color: var(--WomenYellow);
  }
  .ranking__other .ranking-item:first-of-type .ranking-item__body {
    background-color: var(--WomenSub);
  }
  .ranking__other .ranking-item:first-of-type .ranking-item__body {
    background-color: var(--WomenSub);
  }
  .ranking-item__tag--active {
    background-color: var(--Women);
  }
  .ranking-item__tab {
    background-color: var(--Women);
  }
  .ranking-item__tab.is-active {
    background-color: #fff;
    color: var(--Women);
  }
  .ranking-item__tab-img {
    background-color: #fff;
  }
  .ranking-item__score-txt {
    background-color: var(--WomenSub);
    color: var(--Women);
  }
  .ranking-item__score-txt::before {
    background-color: var(--WomenSub);
  }
  .ranking-item__voice-before {
    border: 1px solid var(--WomenOrange);
  }
  .ranking-item__voice-after {
    border: 1px solid var(--WomenOrange);
    background-color: var(--WomenSub);
  }
  .ranking-item__voice-after-ttl {
    background: linear-gradient(
      to bottom,
      #fff 0%,
      #fff 51%,
      var(--WomenSub) 51%,
      var(--WomenSub) 100%
    );
    color: var(--WomenOrange);
  }
  .ranking-item__voice-after-txt {
    color: var(--WomenOrange);
  }
  .ranking-item__voice-ttl {
    color: var(--WomenOrange);
  }
  .ranking-item__voice-score {
    background-color: var(--WomenOrange);
  }
  .ranking-item__feature {
    background-color: var(--WomenSub);
  }
  .ranking-item__feature-ttl {
    color: var(--Women);
  }
  .ranking-item__txt {
    color: var(--WomenAccent);
  }
  .ranking__more-btn {
    border: 1px solid var(--WomenOrange);
    color: var(--WomenOrange);
  }
  .ranking__more-btn::after {
    background-image: url(../img/cm_ico_arrow_bottom_03.png.webp);
  }

  /* セクション 検索 */
  .search {
    background-color: var(--WomenSub);
  }

  /* セクション リザルト */
  .result-section {
    background-color: #fff;
  }
  .result__content {
    border: 1px solid var(--Gray);
    border-radius: 10px;
  }
  .result__terms {
    background-color: var(--WomenSub);
    color: var(--WomenOrange);
  }
  .result__item-ttl {
    color: var(--WomenOrange);
  }
  .result__item-ttl::before {
    background-image: url(../img/cm_ico_check_orange.svg);
  }
  .result__item-label span {
    background-color: var(--WomenOrange);
  }

  /* セクション リザルトソート */
  .result-sort__link {
    border: 1px solid var(--WomenOrange);
    color: var(--WomenOrange);
  }
  .result-sort__link.active {
    background-color: var(--WomenOrange);
    color: #fff;
  }
  .result-more__btn {
    border: 1px solid var(--WomenOrange);
    color: var(--WomenOrange);
  }
  .result-more__btn::before {
    background-color: var(--WomenOrange);
  }
  .result-more__btn::after {
    background-color: var(--WomenOrange);
  }

  /* セクション フッター */
  .footer {
    background-color: var(--Text);
  }
  .footer__nav-link {
    color: #fff;
  }
  .footer__copyright {
    color: #fff;
  }

  /* セクション 再検索 */
  .re-search {
    background-color: var(--WomenSub);
  }
  .re-search__ttl {
    color: var(--Women);
  }

  /* セクション 比較 */
  .table-list1__sort-btn {
    border: 1px solid var(--WomenAccent);
  }
  .table-list1__sort-btn::before {
    border-bottom: 2px solid var(--WomenAccent);
    border-right: 2px solid var(--WomenAccent);
  }
  .hikaku__more-btn {
    background-color: var(--WomenAccent);
  }

  .hikaku__search-btn {
    border: 1px solid var(--WomenAccent);
    border-radius: 20px;
    padding: 4px 8px;
    background-color: #fff;
    color: var(--WomenAccent);
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    transition: all 0.3s;
  }
  .hikaku__search-btn.is-reverse {
    background-color: var(--WomenAccent);
    color: #fff;
  }

  .hikaku__search-select {
    border: 1px solid var(--WomenAccent);
    border-radius: 4px;
    width: 100%;
    padding: 8px 30px 8px 8px;
    background-color: #fff;
    color: var(--WomenAccent);
    font-size: 12px;
    font-weight: 500;
    appearance: none;
  }
  /* タイプ別TOP3 */
  .top3Type {
    background: #ffdee9;
  }

  .top3Type__tags button {
    background: #fff;
    color: var(--Women);
    border: 1px solid var(--Women);
  }

  .top3Type__tags button.active,
  .top3Type__tags button.is-active {
    background: var(--Women);
    color: #fff;
  }

  .top3Type__tags .star::before {
    background-image: url(../img/ct_ico_top3Type_star_w.svg);
  }

  .top3Type__subtags.has-border {
    border-top: dotted 1px var(--Women);
  }

  .top3Type__subtags button {
    border: 1px solid var(--Women);
    color: var(--Women);
  }

  .top3Type__subtags button.active,
  .top3Type__subtags button.is-active {
    background: var(--Women);
    color: #fff;
  }

  .top3Type__list > .top3Type__item:nth-child(2) {
    border-top: dotted 1px var(--Women);
    border-bottom: dotted 1px var(--Women);
  }

  .top3Type__list > .top3Type__item:nth-child(1) .top3Type__bnr::before {
    background: url(../img/ct_ico_top3Type_01_w.svg) no-repeat center/contain;
  }

  .top3Type__list > .top3Type__item:nth-child(2) .top3Type__bnr::before {
    background: url(../img/ct_ico_top3Type_02_w.svg) no-repeat center/contain;
  }

  .top3Type__list > .top3Type__item:nth-child(3) .top3Type__bnr::before {
    background: url(../img/ct_ico_top3Type_03_w.svg) no-repeat center/contain;
  }

  .top3Type__cta a {
    border: 1px solid var(--WomenAccent);
    color: var(--WomenAccent);
  }

  .top3Type__cta a::after {
    background: url(../img/ct_ico_top3Type_arrow_w.svg) no-repeat center/contain;
  }
}