@charset "UTF-8";

/* =========================================================
   固定ページ用 プランエリア専用CSS
   ========================================================= */


/* =========================================================
   プラン
   ========================================================= */

/* ---------------------------
   専用カラー
------------------------------ */
:root {
  --red: #d84848;
  --bred: #c00;
  --lred: #fbecec;
  --green: #1aa69a;
  --bgreen: #106961;
  --lgreen: #f2faf8;
  --bggrgn: #d6dddb;
  --bggr: #ebf3f1;
  --tbbggn: #e2eae8;
  --tbbgbl: #eaf6fd;
  --blue: #0d72a6;
  --lblue: #ddeff9;
  --yellow: #ff0;
}


/*---------------------------------------------------
共有
----------------------------------------------------*/
#wrapper { overflow: hidden; }

.inner120 {
  max-width: 126rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.inner124 {
  max-width: 130rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.inner140 {
  max-width: 146rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.spNpcI { display: none; }
.spNpcI1000 { display: none; }
.spNpcI1200 { display: none; }

.spIpcN1000 { display: inline; }
.spIpcN1200 { display: inline; }

.spBpcN{display: block;}
.spBpcN1000{display: block;}

.spNpcB{display: none;}
.spNpcB1000{display: none;}

/*　-------------
共有　リンクP
----------------*/
a {
  color: #333;
  text-decoration: none;
}
a:hover { opacity: 0.7; }
a:focus, *:focus { outline: none; }



/*----------------------------------------------------
タブレット 750
----------------------------------------------------*/
@media only screen and (min-width: 750px) {

  .spNpcI { display: inline; }
  .spIpcN { display: none; }

  .spBpcN{display: none;}  
  .spNpcB{display: block;}

}


/*----------------------------------------------------
タブレット・PC 1000
----------------------------------------------------*/
@media only screen and (min-width: 1000px) {

  .inner120,
  .inner124,
  .inner140 { padding: 0 3rem; }

  .spNpcI1000 { display: inline; }
  .spIpcN1000 { display: none; }

  .spBpcN1000{display: none;}  
  .spNpcB1000{display: block;}
  
}


/*----------------------------------------------------
タブレット・PC 1200
----------------------------------------------------*/
@media only screen and (min-width: 1200px) {

  .spNpcI1200 { display: inline; }
  .spIpcN1200 { display: none; }

}



/*----------------------------------------------------
スマホ 374px以下用
----------------------------------------------------*/
@media only screen and (max-width: 374px) {

  .sp374 { display: inline; }

}



/* ---------------------------
   #plan 基本
------------------------------ */
#plan {
  padding: 5rem 0 0;
}


/* ---------------------------
   プランタイトル
------------------------------ */
.plan-title {
  max-width: 124rem;
  text-align: center;
  padding: 0 1.5rem;
  margin: 0 auto;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", sans-serif;
}

.plan-title h2 {
  display: inline-block;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 3rem;
  position: relative;
}

.plan-title h2 strong {
  font-size: 3rem;
  color: var(--green);
}

.plan-title h2 span:first-of-type {
  font-size: 2.1rem;
}

.plan-title h2 span:last-of-type {
  display: block;
  width: 12rem;
  background: var(--green);
  font-family: "Outfit", sans-serif;
  font-size: 1.8rem;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 0.5rem 0 0.7rem;
  border-radius: 2rem;
  position: absolute;
  top: -3rem;
  left: 50%;
  transform: translateX(-50%);
}

.plan-title h2::before,
.plan-title h2::after {
  content: "";
  display: block;
  width: 0.3rem;
  height: 4rem;
  background: var(--green);
  position: absolute;
  bottom: 0.5rem;
}

.plan-title h2::before {
  transform: rotate(-12deg);
  left: -2rem;
}

.plan-title h2::after {
  transform: rotate(12deg);
  right: -2rem;
}

.plan-title p {
  max-width: 40rem;
  margin: 0 auto;
  font-weight: 700;
  text-align: left;
  padding: 1.5rem;
  border-top: 0.1rem #ccc solid;
  border-bottom: 0.1rem #ccc solid;
}

.plan-title p span:first-of-type {
  color: var(--green);
}

.plan-title p span:last-of-type {
  color: var(--blue);
}

@media screen and (max-width: 1250px) and (min-width: 768.1px) {
    .plan-title p  {
       font-size: 1.6rem;
    }
}

@media screen and (max-width: 768px) {
      .plan-title p  {
       font-size: 1.6rem;
    }
}


/* =========================================================
   プラン選択
   ========================================================= */

/* ----- .plan-select ----- */
.plan-select {
  margin: 3rem auto 3rem;
}

.plan-select .step01 {
  background: #e7eeed;
  padding: 3rem 1.5rem;
  margin-bottom: 2rem;
  position: relative;
}

.plan-select .step02 {
  background: #eaf6fd;
  padding: 3rem 1.5rem;
  position: relative;
}


/* 矢印 */
.plan-select .step01::after,
.plan-select .step02::after {
  content: "";
  display: block;
  width: 2.7rem;
  height: 2.7rem;
  background: url("../img/sasaeai/plan-arrow.svg") no-repeat center center;
  position: absolute;
  bottom: -1.7rem;
  left: 50%;
  transform: translateX(-50%);
}


/* STEPタイトル */
.plan-select .step01 h3,
.plan-select .step02 h3 {
  max-width: 124rem;
  font-size: 1.8rem;
  line-height: 1.5;
  padding-bottom: 1.5rem;
  border-bottom: 0.1rem #ccc solid;
  margin: 0 auto 2.5rem;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", sans-serif;
}

.plan-select .step01 h3 strong,
.plan-select .step02 h3 strong {
  display: block;
  font-size: 2.4rem;
  
}

.plan-select .step01 h3 strong {
  color: var(--green);
  font-weight: 700;
}

.plan-select .step02 h3 strong {
  color: var(--blue);
  font-weight: 700;
}


/* 選択リスト */
.plan-select ul {
  max-width: 124rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 1rem;
  margin: 0 auto;
}


/* 外側のリスト */
.plan-select li {
  width: 48%;
  background: #fff;
  text-align: left;
  border-radius: 1rem;
  box-shadow: 0 0 0.5rem rgba(102, 102, 102, 0.2);
}

.plan-select li input {
  display: none;
}

.plan-select li label {
  display: block;
  position: relative;
}


/* 選択ボックス内テキスト */
.plan-select label span {
  display: block;
}


/* 選択ボックス */
.plan-select li label > span {
  font-size: 1.3rem;
  padding: 2rem 1.2rem 2rem 2.4rem;
  position: relative;
  transition: 0.3s;
}


/* STEP02 MAX */
.plan-select .step02 li:first-child label > span {
  background: var(--lred);
  border: 0.2rem var(--bred) solid;
  border-radius: 1rem;
}


/* 374px以下 */
@media only screen and (max-width: 374px) {
  .plan-select li label > span {
    font-size: 1.2rem;
  }
}


/* 390px以上 */
@media only screen and (min-width: 390px) {
  .plan-select li label > span {
    font-size: 1.4rem;
  }
}


/* プラン名称 */
.plan-select li label span strong {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", sans-serif;
}


/* STEP02 MAX プラン名称 */
.plan-select .step02 li:first-child label span strong {
  color: var(--bred);
}


/* STEP01　月掛金 */
.plan-select li label span.flat-price, .plan-select li label span.step-price {
	line-height: 1.5;
}

/* ---------------------------
   STEP01 チェックボックス
------------------------------ */
.plan-select .step01 li label > span::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  border: 0.1rem #89a9a6 solid;
  border-radius: 0.2rem;
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  transition: 0.3s;
}


/* チェックマーク */
.plan-select li label > span::after {
  content: "";
  display: block;
  width: 1.9rem;
  height: 1.5rem;
  background: url("../img/sasaeai/plan-icon-check.svg") no-repeat center center;
  position: absolute;
  top: 1.6rem;
  right: 1.4rem;
  opacity: 0;
  transition: 0.3s;
  transition-delay: 0.3s;
}


/* STEP01 左半円 */
.plan-select .step01 li label::after {
  content: "";
  display: block;
  width: 0.8rem;
  height: 1.6rem;
  background: var(--green);
  border-radius: 0 0.8rem 0.8rem 0;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  transition: 0.3s;
}


/* STEP01 選択時 */
.plan-select .step01 li input:checked + label > span {
  background: var(--green);
  color: #fff;
  border-radius: 1rem;
}

.plan-select .step01 li input:checked + label > span::before {
  border-color: #fff;
}

.plan-select li input:checked + label > span::after {
  opacity: 1;
}

.plan-select .step01 li input:checked + label::after {
  background: var(--yellow);
}


/* ---------------------------
   STEP02 チェックボックス
------------------------------ */
.plan-select .step02 li label > span::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  border: 0.1rem #ccc solid;
  border-radius: 0.2rem;
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  transition: 0.3s;
}


/* STEP02 MAX */
.plan-select .step02 li:first-child label > span::before {
  border-color: var(--bred);
}


/* STEP02 左半円 */
.plan-select .step02 li label::after {
  content: "";
  display: block;
  width: 0.8rem;
  height: 1.6rem;
  background: var(--blue);
  border-radius: 0 0.8rem 0.8rem 0;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  transition: 0.3s;
}


/* STEP02 MAX 左半円 */
.plan-select .step02 li:first-child label::after {
  background: var(--bred);
}


/* STEP02 選択時 */
.plan-select .step02 li input:checked + label > span {
  background: var(--blue);
  color: #fff;
  border-radius: 1rem;
}

.plan-select .step02 li:first-child input:checked + label > span {
  background: var(--red);
  border-color: var(--red);
}

.plan-select .step02 li:first-child input:checked + label span strong {
  color: #fff;
}

.plan-select .step02 li input:checked + label > span::before {
  border-color: #fff;
}

.plan-select .step02 li input:checked + label::after {
  background: #fff;
}


/* STEP02 MAX「オススメ」 */
.plan-select .step02 li:first-child label::before {
  content: "";
  display: block;
  width: 7.3rem;
  height: 4rem;
  background: url("../img/sasaeai/plan-icon-reco_sp.svg") no-repeat center center;
  position: absolute;
  top: -1.7rem;
  left: -0.4rem;
  z-index: 998;
}


/* =========================================================
   プラン詳細
   ========================================================= */

.plan-detail {
  position: relative;
}


/* 選択中 */
.plan-detail h4 {
  background: #fff;
  padding: 2rem 1.5rem 2rem 11rem;
  border-radius: 0.5rem;
  margin-bottom: 2rem;
  position: relative;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", sans-serif;
}

.plan-detail h4 span {
  display: block;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.5;
  padding-left: 1.5rem;
  border-left: 0.1rem #ccc solid;
}

.plan-detail h4::before {
  content: "選択中";
  font-size: 1.8rem;
  color: var(--bred);
  position: absolute;
  top: 50%;
  left: 3.5rem;
  transform: translateY(-50%);
}

.plan-detail h4 span::after {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  background: var(--bred);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 1.5rem;
  transform: translateY(-50%);
}


/* =========================================================
   月掛金
   ========================================================= */

/* 月掛金 SP */
.plan-detail .premium {
  background: #fff;
  padding: 1.2rem;
  position: absolute;
  top: -8rem;
  right: 1rem;
}

.plan-detail .premium p:first-child {
  font-weight: 700;
  line-height: 1;
}

.plan-detail .premium p:first-child span:first-child {
  display: inline-block;
  background: var(--green);
  font-size: 1.4rem;
  color: #fff;
  padding: 0.2rem 0.4rem;
  border-radius: 0.2rem;
}

.plan-detail .premium p:first-child strong {
  font-family: "Roboto", sans-serif;
  font-size: 2.4rem;
  color: var(--bgreen);
  margin-left: 1rem;
  font-weight: 700;
}

.plan-detail .premium p:last-child {
  font-size: 1.3rem;
  font-weight: 700;
}


/* 月掛金-02 SP */
.plan-detail .premium-02 {
  display: flex;
  flex-direction: row;
  padding: 1rem 2rem;
  line-height: 1.5;
  background: #fff;
  position: absolute;
  top: -8.5rem;
  right: 0;
}

.plan-detail .premium-02 p {
  width: 7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem 0 0;
  border-radius: 0.2rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  background: var(--green);
}

.premium-02-in {
  width: calc(100% - 7rem);
}

.premium-02-in dl {
  display: flex;
  align-items: flex-end;
  padding: 0 0 0 1rem;
  line-height: 1.4;
  font-size: 1.4rem;
}

.premium-02-in dl dt {
  width: 8rem;
  padding: 0;
  text-align: right;
  font-size: inherit;
  line-height: 2;
}

.premium-02-in dl dd {
  width: calc(100% - 8rem);
}

.premium-02-in dl dd strong {
  padding-right: 0.2rem;
  font-size: 1.8rem;
  color: var(--green);
  font-weight: 700;
}

@media screen and (max-width: 768px) {
  .premium-02-in dl dd {
  line-height: 1.4;
  font-size: 1.4rem;
  }
}


/* =========================================================
   PC / SP 切り替え
   ========================================================= */

.plan-table-sp {
  font-family: "Roboto", "Zen Kaku Gothic Antique", sans-serif;
}

.plan-table-pc {
  display: none;
  font-family: "Roboto", "Zen Kaku Gothic Antique", sans-serif;
}


/* =========================================================
   タブ SP
   ========================================================= */

ul.tab-area {
  display: flex;
  max-width: 120rem;
  margin: 0 auto 2rem;
  border: 0.3rem var(--green) solid;
  border-radius: 0.5rem;
  cursor: pointer;
  background: #fff;
}

ul.tab-area li {
  padding: 1rem 0;
  text-align: center;
  border-right: 0.2rem var(--green) dashed;
  color: #34847d;
  background: transparent;
  font-size: 1.2rem;
  font-weight: bold;
  position: relative;
}

ul.tab-area.tb-wh20 li {
  width: 20%;
}

ul.tab-area li p:first-child strong {
  font-size: 1.6rem;
}

@media screen and (max-width: 768px) {
ul.tab-area li p {
  font-size: 1.2rem;
}
}

@media screen and (max-width: 389px) {
  ul.tab-area li p:first-child strong {
    font-size: 1.4rem;
  }
}

ul.tab-area li p:first-child span {
  font-size: 1.3rem;
}

ul.tab-area li p:last-child {
  display: none;
}


/* タブ選択時 */
ul.tab-area li.tab.active {
  background: var(--green);
  color: #fff;
}

ul.tab-area.tb-wh20 li.tab:first-child {
  border-radius: 0.5rem 0 0 0.5rem;
  margin-left: -0.2rem;
  width: calc(20% + 0.2rem);
}

ul.tab-area.tb-wh20 li.tab:last-child {
  border-radius: 0 0.5rem 0.5rem 0;
  margin-right: -0.2rem;
  width: calc(20% + 0.2rem);
}

ul.tab-area li.tab.active p:last-child {
  display: block;
  width: 100%;
  position: absolute;
  bottom: -1rem;
  left: 0;
}

ul.tab-area li.tab.active p:last-child span {
  display: block;
  width: 1.5rem;
  margin: 0 auto;
}


/* パネル */
.panel {
  display: none;
}

.panel.active {
  display: block;
}


/* =========================================================
   プラン表 SP
   ========================================================= */

.plantb {
  width: 100%;
  border-collapse: separate;
  border: 0.3rem var(--green) solid;
  border-radius: 1rem;
  border-spacing: 0;
  line-height: 1.5;
  overflow: hidden;
}


/* 共通 */
.plantb th,
.plantb td {
  border-right: 0.1rem var(--green) solid;
  text-align: left;
  vertical-align: middle;
  padding: 1rem;
}


/* 1行目 */
.plantb tr:first-child th {
  background: var(--tbbggn);
  padding: 1.2rem 1rem;
  font-size: 1.4rem;
  font-weight: 700;
  border-right: none;
  border-bottom: 0.1rem var(--green) solid;
}

.plantb tr:first-child th.row-top strong {
  font-size: 1.8rem;
}

.plantb tr:first-child th span {
  padding: 0 0 0 1.5rem;
}

.plantb tr:first-child th span strong {
  font-size: 1.6rem;
}


/* 2行目～ */
.plantb th {
  width: 28%;
  font-size: 1.4rem;
  border-bottom: 0.1rem var(--green) solid;
}

.plantb td:first-of-type {
  width: 46%;
}

.plantb td:last-of-type {
  width: 26%;
}

.plantb td {
  width: 38%;
  font-size: 1.2rem;
  border-bottom: 0.1rem var(--green) solid;
}


/* 点線 */
.plantb tr:nth-child(9) td,
.plantb tr:nth-child(11) td,
.plantb tr:nth-child(12) td {
  border-bottom-style: dashed;
}


/* 追加保障なし Ver */
.plantb.plantb-02 tr:nth-child(8) td,
.plantb.plantb-02 tr:nth-child(10) td,
.plantb.plantb-02 tr:nth-child(11) td {
  border-bottom-style: dashed;
}

.plantb.plantb-02 tr:nth-child(9) td {
  border-bottom-style: solid;
}


/* 期間 */
.plantb td[colspan="2"] {
  background: var(--tbbgbl);
  font-size: 1rem;
  padding: 0.5rem 1rem 0.5rem 0;
  border-bottom: none;
}

.plantb td[colspan="2"] span.day {
  font-size: 1.2rem;
  font-weight: 700;
}


/* 数字 */
.plantb td span.num {
  font-size: 1.4rem;
  font-weight: 700;
}

.plantb td:last-child {
  width: 32%;
  font-size: 1.2rem;
  text-align: right;
  padding-right: 1rem;
  border-right: none;
}

.plantb td:last-child span {
  font-size: 1.6rem;
}

.plantb td.t-center {
  text-align: center;
}


/* 注釈 */
.plantb tr span.paren {
  display: block;
  font-size: 1.1rem;
}

.plantb tr span.paren2 {
  font-size: 1.1rem;
}

.plantb tr span.note {
  font-size: 1rem;
}


/* 最終行 */
.plantb th[rowspan="3"],
.plantb tr:last-child td {
  border-bottom: none;
}


/* ---------------------------
   セル背景色
------------------------------ */
.plantb tr:nth-child(1),
.plantb tr:nth-child(3),
.plantb tr:nth-child(4),
.plantb tr:nth-child(7),
.plantb tr:nth-child(9),
.plantb tr:nth-child(10) {
  background: var(--tbbggn);
}

.plantb tr:nth-child(2),
.plantb tr:nth-child(5),
.plantb tr:nth-child(6),
.plantb tr:nth-child(8),
.plantb tr:nth-child(11),
.plantb tr:nth-child(12),
.plantb tr:nth-child(13) {
  background: #fff;
}


/* 追加保障なし ver */
.plantb.plantb-02 tr:nth-child(2),
.plantb.plantb-02 tr:nth-child(3),
.plantb.plantb-02 tr:nth-child(6),
.plantb.plantb-02 tr:nth-child(8),
.plantb.plantb-02 tr:nth-child(9) {
  background: #fff;
}

.plantb.plantb-02 tr:nth-child(1),
.plantb.plantb-02 tr:nth-child(4),
.plantb.plantb-02 tr:nth-child(5),
.plantb.plantb-02 tr:nth-child(10),
.plantb.plantb-02 tr:nth-child(11),
.plantb.plantb-02 tr:nth-child(12) {
  background: var(--tbbggn);
}


/* =========================================================
   コメント
   ========================================================= */

.comment-box {
  margin-top: 2rem;
}

.comment-box li span {
  padding-right: 0.5em;
}

@media screen and (max-width: 768px) {
.comment-box ul li {
    font-size: 1.5rem;
    line-height: 1.4;
    padding-left: 1.2em;
    text-indent: -1.2em;
}
}

/* =========================================================
   プラン結果エリア
   ========================================================= */

.plan-active {
  background: #f1f1f1;
  padding: 7.5rem 0 5rem;
}

.plan-active .inner140 {
  padding: 0 1rem;
}

.plan-active .inner140 > p {
  max-width: 64rem;
  margin: 0 auto;
  text-align: left;
  padding: 4rem;
  font-size: 1.8rem;
  font-weight: bold;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", sans-serif;
}


/* =========================================================
   プランポイント
   ========================================================= */

.plan-point {
  background: var(--green);
  padding: 3rem 0;
}

.plan-point .inner140 {
  padding: 0 1rem;
}

.plan-point .point-box-wrap {
  max-width: 60rem;
  background: #fff;
  padding: 0 1.5rem;
  margin: 0 auto;
  border-radius: 0.5rem;
}

.plan-point .point-box {
  padding: 2rem 0 1.5rem;
}

.plan-point .point-box:first-child {
  border-bottom: 0.1rem var(--green) solid;
}

.plan-point .point-box figure {
  text-align: center;
  margin-bottom: 2.5rem;
}

.plan-point .point-box figure img {
  border-radius: 0.5rem;
}

.plan-point .point-box h3 {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2;
  margin-bottom: 1rem;
  position: relative;
}

.plan-point .point-box:last-child h3 {
  text-align: center;
}

.plan-point .point-box h3 > span {
  display: block;
  background: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 3rem;
  color: var(--green);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  padding: 1.3rem;
  border-radius: 0 1.5rem 0 0;
  position: absolute;
  top: -7.8rem;
  left: -1.3rem;
}

.plan-point .point-box h3 span span {
  display: block;
  font-size: 1.4rem;
}

.plan-point .point-box h3 strong {
  color: var(--green);
  padding: 0 0.1rem;
  border-bottom: 5px var(--green) dashed;
}

.plan-point .point-box p {
  font-size: 1.4rem;
}


/* =========================================================
   750px～ タブレット
   ========================================================= */

@media screen and (min-width: 750px) {

  .plan-point .point-box-wrap {
    max-width: 60rem;
  }

}


/* =========================================================
   1000px～ PC
   ========================================================= */
@media screen and (min-width: 1000px) {

  /* ---------------------------
     プランタイトル
  ------------------------------ */
  .plan-title {
    padding: 0 3rem;
  }

  .plan-title h2 {
    font-size: 3rem;
    margin-bottom: 5rem;
  }

  .plan-title h2 strong {
    font-size: 4rem;
  }

  .plan-title h2 span:first-of-type {
    font-size: 3rem;
  }

  .plan-title p {
    max-width: 90rem;
    font-size: 2.1rem;
    text-align: center;
    padding: 2rem 0;
  }


  /* ---------------------------
     プラン選択
  ------------------------------ */
  .plan-select {
    margin: 8rem auto 4.5rem;
  }

  .plan-select .step01,
  .plan-select .step02 {
    padding: 5rem 3rem;
  }

  .plan-select .step01 h3,
  .plan-select .step02 h3 {
    font-size: 2.1rem;
    text-align: left;
    padding-bottom: 2.5rem;
    margin: 0 auto 3rem;
  }

  .plan-select .step01 h3 strong,
  .plan-select .step02 h3 strong {
    display: inline-block;
    font-size: 2.8rem;
    margin-right: 3.5rem;
  }

  .plan-select .step02 li {
    width: 24%;
  }

  /* STEP02 MAX オススメ PC */
  .plan-select .step02 li:first-child label::before {
    width: 8.5rem;
    height: 4rem;
    background: url("../img/sasaeai/plan-icon-reco_pc.svg") no-repeat center center;
    top: -1.7rem;
    left: -3.2rem;
  }


  /* ---------------------------
     プラン詳細
  ------------------------------ */
  .plan-detail h4 {
    width: 54rem;
    height: 8rem;
    align-content: center;
    padding: 0 0 0 14rem;
    border-radius: 4rem;
    margin-bottom: 8rem;
    position: relative;
  }

  .plan-detail h4 span {
    display: block;
    font-size: 2.3rem;
    line-height: 1;
    padding-left: 2rem;
  }

  .plan-detail h4::before {
    font-size: 2rem;
    left: 5rem;
  }

  .plan-detail h4 span::after {
    left: 3rem;
  }


  /* ---------------------------
     月掛金
  ------------------------------ */
  .plan-detail .premium {
    width: 24rem;
    height: 17rem;
    text-align: center;
    padding: 3rem 2rem 2.5rem;
  }

  .plan-detail .premium p:first-child span:first-child {
    display: block;
    width: 8rem;
    font-size: 1.8rem;
    padding: 0.2rem 1rem;
    border-radius: 0.5rem;
    margin: 0 auto 1rem;
  }

  .plan-detail .premium p:first-child strong {
    font-size: 3.6rem;
    margin-left: 0;
  }

  .plan-detail .premium p:last-child {
    font-size: 1.3rem;
    padding-top: 1rem;
    border-top: 0.1rem #ccc solid;
    margin-top: 1.2rem;
  }


  /* 月掛金-02 */
  .plan-detail .premium-02 {
    flex-direction: column;
    width: 29rem;
    padding: 3rem 2rem 2rem;
    right: 1rem;
  }

  .plan-detail .premium-02 p {
    width: 9.5rem;
    display: block;
    margin: 0 auto;
    text-align: center;
    border-radius: 0.5rem;
    font-size: 2.1rem;
  }

  .premium-02-in {
    width: 100%;
  }

  .premium-02-in dl {
    align-items: flex-end;
    padding: 0;
    line-height: 1.4;
    font-size: 2rem;
  }

  .premium-02-in dl dt {
    width: 12rem;
    padding: 0 0.5rem 0.5rem 0;
    line-height: 1;
  }

  .premium-02-in dl dd {
    width: calc(100% - 12rem);
    font-size: 2rem;
    line-height: 1.4;
  }

  .premium-02-in dl dd strong {
    font-size: 3rem;
  }


  /* ---------------------------
     PC / SP 切り替え
  ------------------------------ */
  .plan-table-sp {
    display: none;
  }

  .plan-table-pc {
    display: block;
  }


  /* =====================================================
     PC用テーブル
  ===================================================== */

  .plan-table-pc .table-wrap {
    border: 0.2rem var(--green) solid;
    border-radius: 1rem;
    box-shadow: 0 0 10px 1px rgba(102, 102, 102, 0.3);
  }

  .plan-table-pc .table-wrap table {
    width: 100%;
    background: #fff;
  }

  .plan-table-pc .table-wrap th,
  .plan-table-pc .table-wrap td {
    padding: 1rem;
    vertical-align: middle;
    line-height: 1.4;
    font-size: 1.4rem;
    border-left: 1px solid var(--green);
    border-right: 1px solid var(--green);
  }

  .plan-table-pc .table-wrap th {
    text-align: left;
    font-size: 1.6rem;
    border-bottom: 1px solid var(--green);
  }

  .plan-table-pc .table-wrap th.line-dash,
  .plan-table-pc .table-wrap td.line-dash {
    border-bottom: 2px dashed var(--green);
  }

  .plan-table-pc .table-wrap td {
    text-align: right;
    border-bottom: 1px solid var(--green);
  }

  .plan-table-pc .table-wrap th.line-landr,
  .plan-table-pc .table-wrap td.line-landr {
    border-left: 2px solid var(--green);
    border-right: 2px solid var(--green);
  }

  .plan-table-pc .table-wrap td.t-left {
    text-align: left;
  }

  .plan-table-pc .table-wrap td.t-center {
    text-align: center;
  }

  .plan-table-pc .table-wrap td span {
    padding-right: 0.2rem;
    font-size: 2.1rem;
    font-weight: bold;
  }

  .plan-table-pc .table-wrap td br {
    display: none;
  }

  .plan-table-pc .table-wrap span.paren,
  .plan-table-pc .table-wrap span.paren02 {
    font-size: 1.4rem;
    font-weight: 400;
  }

  .plan-table-pc .table-wrap span.paren {
    display: inline;
  }

  .plan-table-pc .table-wrap small {
    font-size: 1rem;
  }


  /* 期間 */
  .plan-table-pc .table-wrap td.bg-lbule {
    padding: 0.8rem 1.5rem;
    line-height: 1;
    text-align: center;
    background: #eaf6fd;
  }

  .plan-table-pc .table-wrap .day {
    padding: 0;
    line-height: 1;
    font-size: 1.6rem;
  }

  .plan-table-pc .table-wrap .bg-gray {
    background: #e8eeed;
  }


  /* 1列目 */
  .plan-table-pc .table-wrap tr th {
    width: 10%;
  }


  /* 1行目 */
  .plan-table-pc .table-wrap tr.tb-row01 th {
    width: 11%;
    text-align: center;
  }

  .plan-table-pc .table-wrap tr.tb-row01 th.tb-row01-th-01 {
    letter-spacing: 0.05em;
    font-size: 1.6rem;
    color: #fff;
    background: var(--green);
  }

  .plan-table-pc .table-wrap tr.tb-row01 th.tb-row01-th-02 {
    width: 12%;
    padding-right: 3.5rem;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: right;
    position: relative;
  }

  .plan-table-pc .table-wrap tr.tb-row01 th.tb-row01-th-02::after {
    display: block;
    content: url("../img/sasaeai/plan-tb-arrow.svg");
    width: 1rem;
    position: absolute;
    top: 25%;
    right: 15px;
  }

  .plan-table-pc .table-wrap tr.tb-row01 strong {
    padding-right: 0.2rem;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--green);
  }


  /* 2行目 */
  .plan-table-pc .table-wrap tr.tb-row02 {
    padding: 1rem;
    border-bottom: 2px solid var(--green);
  }

  .plan-table-pc .table-wrap tr.tb-row02 th:first-child {
    padding-right: 3.5rem;
    text-align: right;
    font-size: 1.6rem;
    font-weight: bold;
    position: relative;
  }

  .plan-table-pc .table-wrap tr.tb-row02 th:first-child::after {
    display: block;
    content: url("../img/sasaeai/plan-tb-arrow.svg");
    width: 1rem;
    position: absolute;
    top: 25%;
    right: 15px;
  }

  .plan-table-pc .table-wrap tr.tb-row02 th:nth-child(2),
  .plan-table-pc .table-wrap tr.tb-row02 th:last-child {
    text-align: center;
  }

  .plan-table-pc .table-wrap tr.tb-row02 th:nth-child(2) strong,
  .plan-table-pc .table-wrap tr.tb-row02 th:last-child strong {
    padding-right: 0.2rem;
    font-size: 2.1rem;
    font-weight: bold;
  }


  /* コメント */
  .comment-box {
    margin-top: 3rem;
  }

  .comment-box ul {
    font-size: 1.6rem;
  }


  /* ---------------------------
     plan-active
  ------------------------------ */
  .plan-active {
    padding: 7rem 0 10rem;
  }

  .plan-active .inner140 {
    padding: 0 3rem;
  }

  .plan-active .inner140 > p {
    max-width: 100%;
    margin: 0;
    text-align: center;
    padding: 8rem 0;
    font-size: 2.1rem;
  }


  /* ---------------------------
     plan-point
  ------------------------------ */
  .plan-point {
    padding: 8rem 0;
  }

  .plan-point .inner140 {
    padding: 0 3rem;
  }

  .plan-point .point-box-wrap {
    max-width: 140rem;
    display: flex;
    padding: 3rem 0;
    border-radius: 1rem;
  }

  .plan-point .point-box {
    max-width: none;
    width: 50%;
    padding: 0 3rem;
  }

  .plan-point .point-box:first-child {
    border-bottom: none;
    border-right: 1px var(--green) solid;
  }

  .plan-point .point-box figure img {
    border-radius: 1rem;
  }

  .plan-point .point-box h3 {
    font-size: 2rem;
    margin-bottom: 2rem;
  }

  .plan-point .point-box h3 > span {
    font-size: 3.6rem;
    border-radius: 0 2rem 0 0;
    top: -9.5rem;
    left: -1.3rem;
  }

  .plan-point .point-box p {
    font-size: 1.6rem;
  }

 }


/* =========================================================
   1200px～
   ========================================================= */

@media screen and (min-width: 1200px) {

  /* STEP01 チェックボックス */
  .plan-select .step01 li label > span::before {
    width: 2rem;
    height: 2rem;
    border-radius: 0.3rem;
    top: 50%;
    right: 3rem;
    transform: translateY(-50%);
  }

  /* STEP02 チェックボックス */
  .plan-select .step02 li label > span::before {
    width: 2rem;
    height: 2rem;
    border-radius: 0.3rem;
    top: 2rem;
    right: 2rem;
  }

  /* STEP01 チェックマーク */
  .plan-select .step01 li label > span::after {
    width: 2.2rem;
    height: 1.8rem;
    top: 50%;
    right: 3rem;
    transform: translateY(-50%);
  }

  /* STEP02 チェックマーク */
  .plan-select .step02 li label > span::after {
    width: 2.2rem;
    height: 1.8rem;
    top: 2.1rem;
    right: 2rem;
  }


  /* plan-point */
  .plan-point .point-box h3 {
    text-align: center;
  }


  /* テーブル */
  .plan-table-pc .table-wrap th,
  .plan-table-pc .table-wrap td {
    padding: 1rem 1rem 1rem 2rem;
    font-size: 1.4rem;
  }

  .plan-table-pc .table-wrap th {
    font-size: 1.4rem;
  }

  .plan-table-pc .table-wrap td span {
    font-size: 1.8rem;
  }

  .plan-table-pc .table-wrap span.paren,
  .plan-table-pc .table-wrap span.paren02 {
    font-size: 1.4rem;
  }

  .plan-table-pc .table-wrap span.paren {
    display: block;
  }

  .plan-table-pc .table-wrap small {
    font-size: 1.2rem;
  }

  .plan-table-pc .table-wrap .day {
    font-size: 1.8rem;
  }

  .plan-table-pc .table-wrap tr th {
    width: 11%;
  }


  /* 1行目 */
  .plan-table-pc .table-wrap tr.tb-row01 th {
    width: 12%;
  }

  .plan-table-pc .table-wrap tr.tb-row01 th.tb-row01-th-01 {
    font-size: 1.8rem;
  }

  .plan-table-pc .table-wrap tr.tb-row01 th.tb-row01-th-02 {
    width: 17%;
    font-size: 1.8rem;
  }

  .plan-table-pc .table-wrap tr.tb-row01 th.tb-row01-th-02::after {
    width: 1.2rem;
  }

  .plan-table-pc .table-wrap tr.tb-row01 strong {
    font-size: 1.8rem;
  }


  /* 2行目 */
  .plan-table-pc .table-wrap tr.tb-row02 th:first-child {
    font-size: 1.8rem;
  }

  .plan-table-pc .table-wrap tr.tb-row02 th:first-child::after {
    width: 1.2rem;
  }

  .plan-table-pc .table-wrap tr.tb-row02 th:last-child strong {
    font-size: 2rem;
  }

}


/* =========================================================
   1400px～
   ========================================================= */

@media screen and (min-width: 1400px) {

  /* ---------------------------
     プラン選択
  ------------------------------ */

  /* 矢印 */
  .plan-select .step01::after,
  .plan-select .step02::after {
    width: 3.4rem;
    height: 3.4rem;
    bottom: -1.7rem;
  }

  .plan-select .step01 h3,
  .plan-select .step02 h3 {
    font-size: 2.4rem;
    padding-bottom: 3rem;
    margin: 0 auto 3.5rem;
  }

  .plan-select .step01 h3 strong,
  .plan-select .step02 h3 strong {
    font-size: 3.6rem;
    margin-right: 4.5rem;
  }


  /* 選択ボックス */
  .plan-select li label > span {
    font-size: 1.6rem;
  }

  .plan-select .step01 li label > span {
    padding: 3rem 5rem;
  }

  .plan-select .step02 li label > span {
    padding: 3rem 1.5rem 3rem 3.5rem;
  }


  /* プラン名称 */
  .plan-select li label span strong {
    font-size: 2.4rem;
  }


  /* STEP01 チェックボックス */
  .plan-select .step01 li label > span::before {
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    right: 6rem;
  }


  /* STEP02 チェックボックス */
  .plan-select .step02 li label > span::before {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    top: 2.5rem;
    right: 3rem;
  }


  /* STEP01 チェックマーク */
  .plan-select .step01 li label > span::after {
    width: 3rem;
    height: 2.2rem;
    top: 50%;
    right: 6rem;
    transform: translateY(-50%);
  }


  /* STEP02 チェックマーク */
  .plan-select .step02 li label > span::after {
    width: 2.8rem;
    height: 2rem;
    top: 2.8rem;
    right: 2.8rem;
  }


  /* STEP02 MAX オススメ */
  .plan-select .step02 li:first-child label::before {
    width: 12rem;
    height: 6.2rem;
    top: -2.7rem;
    left: -4.4rem;
  }


  /* ---------------------------
     plan-detail
  ------------------------------ */
  .plan-detail h4 {
    width: 72rem;
    height: 10rem;
    align-content: center;
    padding: 0 0 0 19rem;
    border-radius: 5rem;
    margin-bottom: 10rem;
    position: relative;
  }

  .plan-detail h4 span {
    display: block;
    font-size: 3rem;
    padding-left: 2rem;
  }

  .plan-detail h4::before {
    font-size: 2.6rem;
    left: 8.5rem;
  }

  .plan-detail h4 span::after {
    left: 4.5rem;
  }


  /* ---------------------------
     plan-point
  ------------------------------ */
  .plan-point .point-box-wrap {
    padding: 5rem 0;
  }

  .plan-point .point-box {
    padding: 0 3.8rem;
  }

  .plan-point .point-box h3 {
    font-size: 2.4rem;
  }

  .plan-point .point-box h3 > span {
    font-size: 4.8rem;
    padding: 2rem;
    border-radius: 0 3rem 0 0;
    top: -10.5rem;
    left: -0.5rem;
  }

  .plan-point .point-box h3 span span {
    font-size: 1.6rem;
  }

  .plan-point .point-box p {
    font-size: 1.8rem;
  }


  /* 1400px 表示位置 */
  .plan-open {
    font-size: 2.1rem;
  }

}


/* =========================================================
   1500px～
   ========================================================= */

@media screen and (min-width: 1500px) {

  .plan-point .point-box {
    padding: 0 5rem;
  }

}


/* step01・step02 リストマーカー削除
-----------------------------------*/
.plan-detail ul,
.plan-point ul,
.comment-box ul {
  list-style: none;
  padding-left: 0;
}

.plan-detail li::before,
.plan-point li::before,
.comment-box li::before {
  content: none;
}

.step01 ul,
.step02 ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.step01 ul li,
.step02 ul li {
  list-style: none;
}

.step01 ul li::before,
.step02 ul li::before {
  content: none;
  display: none;
}