/*==============================================================

共通設定

==============================================================*/

.js-scrollable {
  overflow-x: auto;
  white-space: nowrap;
}

body {
  position: relative;
  background-color: #ffffff;
  color: #4e4e4e;
  font-family: 'ヒラギノ丸ゴ ProN', 'Hiragino Maru Gothic ProN', 'ヒラギノ丸ゴ Pro', 'Hiragino Maru Gothic Pro', 'Noto Sans JP', 'メイリオ', sans-serif;
}

.section {
  width: 750px;
  max-width: 100%;
  margin: 0 auto;
  display: block;
  box-sizing: border-box;
}

.content {
  margin: 0 auto;
  max-width: 750px;
  width: 100%;
  box-sizing: border-box;
}


.content img,
.main-visual__img {
  max-width: 100%;
}

.center-absolute {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.relative {
  position: relative;
  display: block;
}

.absolute {
  position: absolute;
}

/*==============================================================

マージン設定

==============================================================*/
.wd-40 {
  width: 40%;
}

.wd-80 {
  width: 60%;
}

.wd-160{
  width: 160%!important;
}

.mt-3 {
  margin-top: 3%;
}

.mt-5 {
  margin-top: 5%;
}

.mb-3 {
  margin-bottom: 5%;
}

.mb-5 {
  margin-bottom: 5%;
}

.mt-15 {
  margin-top: 50%;
}


.mt-125 {
  margin-top: 313%;
}

.mt-3 {
  margin-top: 1%;
}

.ml-4 {
  margin-left: 6%;
}

/*==============================================================

フォント設定

==============================================================*/
.ft-b {
  font-weight: bold;
}
.tx-c-red{
  color: rgb(205, 6, 6);
}

.tx-c-blue{
  color: rgb(8, 8, 241);
}


/*==============================================================

header設定

==============================================================*/

.site-header {
  width: 750px;
  border-bottom: 1px solid #e5e5e5;
  background: #fff;
}

.header-inner {
  max-width: 750px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-logo {
  font-size: 20px;
  font-weight: bold;
  color: #1f4fd8;
  /* 青系 */
}

.header-nav {
  display: flex;
  gap: 24px;
}

.header-nav__item {
  font-size: 14px;
  color: #222;
  text-decoration: none;
}

.header-nav__item:hover {
  text-decoration: underline;
}

.main-visual {
  max-width: 750px;
  width: 100%;
  margin: 0 auto;
  display: block;
}


/* ===== セクション（LPの青トーンに合わせる） ===== */
.compare {
  padding: 28px 16px;
  background: linear-gradient(135deg, #0b5fb5 0%, #1a87d6 45%, #19a2d9 100%);
}

.compare__inner {
  max-width: 980px;
  margin: 0 auto;
}

.compare__title {
  margin: 0 0 14px;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .02em;
}

/* ===== 表のラッパー ===== */
.compare__table-wrap {
  background: rgba(255, 255, 255, .10);
  border-radius: 16px;
  padding: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===== テーブル本体 ===== */
.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
    border: 1px solid #e6eefc; /* ← これを追加 */
  /* 角丸維持 */
}

.compare-table__head {
  padding: 14px 14px;
  font-size: 14px;
  font-weight: 800;
  color: #0f2a44;
  background: #f3f7ff;
  border-bottom: 1px solid #e6eefc;
  text-align: center;
  vertical-align: middle;
}

/* 比較項目の横幅は“せまく” */
.compare-table__head--item {
  width: 120px;
  /* ← ここで調整 */
  min-width: 110px;
  text-align: center;
  /* センター配置 */
}

/* 左の項目列 */
.compare-table__item {
  padding: 14px 14px;
  font-size: 13px;
  font-weight: 800;
  color: #0f2a44;
  background: #f8fbff;
  border-bottom: 1px solid #edf2ff;
  vertical-align: middle;
  white-space: nowrap;
}

/* データセル */
.compare-table__cell {
  padding: 14px 14px;
  font-size: 12px;
  color: #14314d;
  border-bottom: 1px solid #edf2ff;
  vertical-align: middle;
  line-height: 1.6;
}



.compare-table tbody tr:nth-child(even) .compare-table__item {
  background: #ffffff;
}

/* ===== 保険サミット列：浮かせて目立たせる ===== */
.compare-table__head--featured {
  position: relative;
  background: #fdffde;
  border-left: 1px solid #e6eefc;
  box-shadow: 0 10px 24px rgba(0, 70, 140, 0.14);
  transform: translateY(-6px);
  /* “飛び出し” */
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  padding-top: 3%;
}

.compare-table__cell--featured {
  background: #fdffde;
  /* 背景色を変更 */
  border-left: 1px solid #e6eefc;
  box-shadow: 0 10px 24px rgba(0, 70, 140, 0.25);
  transform: translateY(-6px);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

/* バッジ */
.compare-table__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: #ffffff;
  background: #1a87d6;

}

/* 最下段の線＆角丸整え */
.compare-table tbody tr:last-child .compare-table__cell,
.compare-table tbody tr:last-child .compare-table__item {
  border-bottom: none;
}



.compare-table__head--item {
  background: #ffffff;
}
.compare-table__head:not(.compare-table__head--item):not(.compare-table__head--featured) {
  background: #ffffff;
}



/*==============================================================

Q&A設定

==============================================================*/
.qa-6 {
  max-width: 700px;
  margin: 0 auto 5px auto;
  border-bottom: 2px solid #d6dde3;
}

.qa-6 summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1em 2em 1em 3em;
  color: #445a7c;
  font-weight: 600;
  cursor: pointer;
}

.qa-6 summary::before,
.qa-6 p::before {
  position: absolute;
  left: 1em;
  font-weight: 600;
  font-size: 1.3em;
}

.qa-6 summary::before {
  color: #75bbff;
  content: "Q";
}

.qa-6 summary::after {
  transform: translateY(-25%) rotate(45deg);
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-bottom: 3px solid #445a7c;
  border-right: 3px solid #445a7c;
  content: '';
  transition: transform .5s;
}

.qa-6[open] summary::after {
  transform: rotate(225deg);
}

.qa-6 p {
  position: relative;
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: .3em 3em 1.5em;
  color: #445a7c;
  transition: transform .5s, opacity .5s;
  line-height: 1.6;
}

.qa-6[open] p {
  transform: none;
  opacity: 1;
}

  .compare-table__cell br {
    display: none;
  }

.qa-6 p::before {
  color: #ff8d8d;
  line-height: 1.2;
  content: "A";
}

/* ===== SP最適化 ===== */
@media (max-width: 520px) {
  .compare__title {
    font-size: 16px;
  }

  .compare-table__head--item {
    width: 92px;
    min-width: 92px;
  }

  /* さらに細く */
  .compare-table__item {
    white-space: normal;
  }

  /* 折り返しOK */

  .compare-table__head,
  .compare-table__cell,
  .compare-table__item {
    padding: 12px 10px;
    font-size: 12px;
  }

  /* 端末幅が狭いときは飛び出し量を控えめに */
  .compare-table__head--featured,
  .compare-table__cell--featured {
    transform: translateY(-4px);
  }
}

/* ===== セクション（LPの青トーンに合わせる） ===== */

.plan {
  padding: 40px 16px;
  background: linear-gradient(135deg, #1961a9);
  text-align: center;
}

.plan__title {
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 8px;
}

.plan__lead {
  color: #e6f3ff;
  font-size: 14px;
  margin: 0 0 22px;
}

.plan__grid {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: end;
  margin-top: 11%;
}

.plan-card {
  background: #fff;
  border-radius: 14px;
  padding: 18px 16px 16px;
  border: 1px solid #e6eefc;
  box-shadow: 0 10px 24px rgba(0, 50, 110, 0.12);
  text-align: center;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.plan-card__sub {
  line-height: 25px;
}

/* 左右のグレー寄せ（画像っぽさ） */
.plan-card:not(.plan-card--main) {
  background: linear-gradient(180deg, #f3f5f8 0%, #ffffff 55%);
}

.plan-card__name {
  font-size: 18px;
  font-weight: 800;
  color: #2b2f36;
  line-height: 1.5;
}

.plan-card__price {
  margin-top: 6px;
  font-size: 28px;
  font-weight: 900;
  color: #2b2f36;
  line-height: 1.1;
}

.plan-card__price span {
  font-size: 12px;
  font-weight: 700;
  color: #6b7787;
}

.plan-card__line {
  margin: 14px 0 12px;
  border-top: 2px dotted #cfd8e3;
  /* 点線 */
}

.plan-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: #3a4a5d;
  text-align: center;
}

.plan-card__list li {
  padding-left: 18px;
  position: relative;
}

.plan-card--main {
  transform: scale(1.1);
  z-index: 2;
  box-shadow: 0 12px 30px rgba(0, 50, 110, 0.2);
}


@media screen and (max-width: 768px) {

  /* ヘッダー設定 */
  .site-header {
    width: 100%;
    padding: 10px 15px;
    box-sizing: border-box;
  }

  .header-inner {
    max-width: 100%;
    padding: 0;
  }

  .header-logo {
    width: 25%;
  }

  /* FVボタン設定 */
  .cta-fv {
    width: 49%
  }

  .plan-card {
    justify-content: none;
  }

  .plan {
    padding: 32px 8px;
  }

  .plan__grid {
    grid-template-columns: repeat(3, 1fr);
    /* PCと同じ */
    gap: 0px;

  }

  .plan-card__list li {
    padding-left: 0px;
    line-height: 25px;
  }

  /* カード全体を縮小 */
  .plan-card {
    padding: 12px 10px;
    transform: scale(0.9);
    transform-origin: top center;
  }

  /* 真ん中だけ大きくなりすぎないように */
  .plan-card--main {
    transform: scale(0.95);
  }

  /* テキストも少しだけ縮める */
  .plan-card__name {
    font-size: 14px;
    line-height: 25px;
  }

  .plan-card__price {
    font-size: 20px;
  }

  .plan-card__price span {
    font-size: 10px;
  }

  .plan-card__list {
    font-size: 9px;
    line-height: 1.6;
    font-weight: bold;
  }

  .plan-card__sub {
    font-size: 11px;
    line-height: 1.4;
  }

  .plan-card__line {
    margin: 10px 0;
  }

  .plan__lead {
    line-height: 25px;
  }

  .compare-table__badge {
    margin-bottom: 13%;
    margin: 4px 0px 6px 6px;
  }

  .plan-card-left,
  .plan-card-right {
    margin-bottom: -17%;
  }

  .qa-6 summary {
    line-height: 1.5;
    font-size: 12px;
  }

  /* ===== セクション（LPの青トーンに合わせる） ===== */
  .compare {
    background: none;
    /* 背景を削除 */
    padding: 0;
    /* 余白を削除 */
  }

  .compare__table-wrap {
    width: 100%;
    /* 表を画面幅に合わせる */
    padding: 0;
    /* 余白を削除 */
  }

  .compare-table {
    width: 100%;
    /* 表を画面幅に合わせる */
    font-size: 14px;
    /* フォントサイズを調整 */
  }

  .compare-table__head,
  .compare-table__cell {
    padding: 10px;
    /* セルの余白を調整 */
  }

  /* 左端の「比較項目」列 */
  .compare-table__head--item {
    width: 80px;
    min-width: 80px;
  }

  /* 各行の項目名（利用料・操作性など） */
  .compare-table__item {
    width: 80px;
    min-width: 80px;
    white-space: normal;
    /* 折り返し許可 */
  }

  .compare-table__head,
  .compare-table__item {
    padding: 8px 6px;
    font-size: 12px;
    line-height: 1.3;
  }

  /* 保険サミット（中身セル） */
  .compare-table__cell--featured {
    min-width: 100px;
    text-align: center;
    box-shadow: 0 6px 11px rgba(0, 70, 140, 0.25);

  }

   .compare-table__cell br {
    display: inline;
  }
  .compare-table__cell:not(.compare-table__cell--featured) {
  font-size: 10px;
  text-align: center;
  line-height: 1.6;
}

.qa-6[open] p{
  font-size: 12px;
}

.function-cta2{
  transform: scale(1.5);
  transform-origin: center top;
}


.mt-125 {
  margin-top: 303%;
}
  
}