@charset "utf-8";

/* ==========================================================================
   EXAROUND
   ========================================================================== */

/* 共通変数 -------------------------------------------------------------- */
.exa {
  --exa-navy: #004098;
  --exa-purple: #5f3674;
  --exa-basic: #226fbf;
  --exa-purple-bg: #ece5f0;
  --exa-orange: #f18f69;
  --exa-temp: #4082ab;
  --exa-smart: #59858b;
  --exa-energy: #a08a23;
  --exa-air: #a76289;
  --exa-hygiene: #027b71;
  --exa-kitchen: #c2461d;
}

/* ==========================================================================
   イントロ（メインビジュアル＋課題）
   ========================================================================== */
.exa-intro {
  margin-bottom: 70px;
}

.exa-intro__visual img {
  display: block;
  width: 100%;
  height: auto;
}

.exa-intro__body {
  padding: 55px 45px 60px;
}

@media screen and (max-width: 599px) {
  .exa-intro {
    margin-bottom: 50px;
  }

  .exa-intro__body {
    padding: 30px 20px 35px;
  }
}

.exa-h2 {
  color: var(--exa-navy);
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.5;
}

@media screen and (max-width: 599px) {
  .exa-h2 {
    font-size: 2rem;
  }
}

.exa-intro__lead {
  margin-bottom: 45px;
}

/* 課題バッジ ------------------------------------------------------------ */
.exa-issues {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}

.exa-issues > li {
  flex: 1 1 0;
  min-width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--exa-navy);
  color: #fff;
  font-weight: bold;
  border-radius: 10px;
  padding: 18px 10px;
  line-height: 1.4;
}

@media screen and (max-width: 599px) {
  .exa-issues {
    gap: 10px;
  }

  .exa-issues > li {
    flex: 1 1 calc(50% - 10px);
    min-width: 0;
    font-size: 1.4rem;
    padding: 12px 6px;
  }
}

.exa-intro__arrow {
  text-align: center;
  margin-bottom: 25px;
}

.exa-intro__solve {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.exa-intro__solve img {
  width: 330px;
  max-width: 70%;
  height: auto;
}

.exa-intro__solve p {
  font-size: 2.4rem;
  font-weight: bold;
  margin: 0;
}

@media screen and (max-width: 599px) {
  .exa-intro__solve {
    flex-direction: column;
  }

  .exa-intro__solve p {
    font-size: 1.7rem;
  }
}

/* ==========================================================================
   プラン設計
   ========================================================================== */
.exa-design {
  margin-bottom: 60px;
}

.exa-design__img {
  text-align: center;
}

.exa-design__img img {
  max-width: 100%;
  height: auto;
}

/* 基本サービス ---------------------------------------------------------- */
.exa-basic {
  position: relative;
  max-width: 1000px;
  margin: 0 auto 40px;
  border: solid 1px var(--exa-basic);
  border-radius: 8px;
  padding: 55px 40px 35px;
}

.exa-basic__label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--exa-basic);
  color: #fff;
  font-weight: bold;
  font-size: 1.8rem;
  border-radius: 100px;
  padding: 8px 40px;
  white-space: nowrap;
}

.exa-basic__title {
  color: var(--exa-basic);
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  border-bottom: solid 1px var(--exa-basic);
  padding-bottom: 12px;
  margin-bottom: 18px;
}

.exa-basic__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.exa-basic__list > li {
  position: relative;
  color: var(--exa-basic);
  font-weight: bold;
  padding-left: 1.4em;
  margin-bottom: 6px;
}

.exa-basic__list > li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--exa-basic);
}

.exa-basic__img {
  text-align: center;
}

.exa-basic__img img {
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 599px) {
  .exa-basic {
    padding: 45px 20px 25px;
  }

  .exa-basic__label {
    font-size: 1.5rem;
    padding: 7px 25px;
  }

  .exa-basic__img img {
    width: 100%;
    max-width: 177px;
  }
}

/* かけ算アイコン -------------------------------------------------------- */
.exa-cross {
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
  margin: 0 auto 35px;
}

.exa-cross::before,
.exa-cross::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #21519e;
}

.exa-cross::before {
  transform: rotate(45deg);
}

.exa-cross::after {
  transform: rotate(-45deg);
}

/* ==========================================================================
   プランカード
   ========================================================================== */
.exa-plans {
  margin-bottom: 20px;
}

.exa-card {
  display: block;
  position: relative;
  color: #fff;
  border-radius: 8px;
  padding: 25px 25px 55px;
  text-decoration: none;
  height: 100%;
}

a.exa-card:hover {
  opacity: 0.85;
  color: #fff;
  text-decoration: none;
}

.exa-card__title {
  position: relative;
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  border-bottom: solid 1px rgba(255, 255, 255, 0.6);
  padding: 0 0 14px 32px;
  margin-bottom: 18px;
}

.exa-card__title::before {
  content: "";
  position: absolute;
  top: 0.15em;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #fff;
}

/* 45deg 回転した「>」は視覚重心が box 中心より右にずれるため x を補正 */
.exa-card__title::after {
  content: "";
  position: absolute;
  top: calc(0.15em + 12px);
  left: 12px;
  width: 7px;
  height: 7px;
  border-top: solid 2px var(--exa-c);
  border-right: solid 2px var(--exa-c);
  transform: translate(calc(-50% - 1.5px), -50%) rotate(45deg);
}

.exa-card__lead {
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1.6;
  margin-bottom: 14px;
}

.exa-card__text {
  font-size: 1.4rem;
  line-height: 1.7;
  margin: 0;
}

.exa-card__auro {
  position: absolute;
  right: 20px;
  bottom: 18px;
  width: 30px;
  height: 30px;
}

.exa-card--temp {
  --exa-c: var(--exa-temp);
  background-color: var(--exa-temp);
}

.exa-card--smart {
  --exa-c: var(--exa-smart);
  background-color: var(--exa-smart);
}

.exa-card--energy {
  --exa-c: var(--exa-energy);
  background-color: var(--exa-energy);
}

.exa-card--air {
  --exa-c: var(--exa-air);
  background-color: var(--exa-air);
}

.exa-card--hygiene {
  --exa-c: var(--exa-hygiene);
  background-color: var(--exa-hygiene);
}

.exa-card--kitchen {
  --exa-c: var(--exa-kitchen);
  background-color: var(--exa-kitchen);
}

@media screen and (max-width: 599px) {
  .exa-card {
    padding: 20px 20px 50px;
  }

  .exa-card__title {
    font-size: 1.7rem;
    padding-left: calc(1.4em + 8px);
  }

  /* アイコンを行の高さ基準に揃える（SPは行高が固定24pxのアイコンより小さいため） */
  .exa-card__title::before {
    top: 0.05em;
    width: 1.4em;
    height: 1.4em;
  }

  .exa-card__title::after {
    top: calc(0.05em + 0.7em);
    left: 0.7em;
  }

  .exa-card__lead {
    font-size: 1.6rem;
  }
}

/* AURO 注記 ------------------------------------------------------------- */
.exa-auro-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 70px;
}

.exa-auro-note img {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
}

.exa-auro-note p {
  margin: 0;
}

/* ==========================================================================
   プラン料金表
   ========================================================================== */
.exa-tabbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 12px;
  background-color: var(--exa-purple-bg);
  border-radius: 6px;
  overflow: hidden;
}

.exa-tabbar__main {
  background-color: var(--exa-purple);
  color: #fff;
  font-weight: bold;
  padding: 12px 25px;
  white-space: nowrap;
}

.exa-tabbar__sub {
  color: var(--exa-purple);
  font-weight: bold;
  padding: 12px 20px;
  white-space: nowrap;
}

.exa-tabbar__detail {
  color: var(--exa-purple);
  padding: 12px 25px 12px 0;
}

@media screen and (max-width: 599px) {
  .exa-tabbar {
    display: block;
    text-align: center;
  }

  .exa-tabbar__sub,
  .exa-tabbar__detail {
    padding: 8px 15px;
  }

  .exa-tabbar__detail {
    padding-bottom: 12px;
  }
}

/* 料金表 ---------------------------------------------------------------- */
.exa-table {
  min-width: 900px;
  border-left: solid 1px #e5e5e5;
  border-right: solid 1px #e5e5e5;
}

.exa-table th,
.exa-table td {
  vertical-align: middle;
  white-space: nowrap;
}

.exa-table th {
  text-align: center;
}

.exa-table .exa-table__size {
  text-align: center;
  width: 50px;
}

.exa-table .exa-table__mark {
  text-align: center;
  width: 110px;
}

.exa-table tr td.exa-table__mark--bordered,
.exa-table tr td.exa-table__mark--bordered:last-child {
  border-right: solid 1px #e5e5e5;
}

.exa-table__plan {
  white-space: nowrap;
}

.exa-table__plan a {
  color: #333;
}

.exa-table__plan .exa-note {
  display: block;
  font-size: 1.3rem;
  margin-top: 4px;
}

.exa-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: middle;
}

.exa-swatch--temp {
  background-color: var(--exa-temp);
}

.exa-swatch--smart {
  background-color: var(--exa-smart);
}

.exa-swatch--energy {
  background-color: var(--exa-energy);
}

.exa-swatch--air {
  background-color: var(--exa-air);
}

.exa-swatch--hygiene {
  background-color: var(--exa-hygiene);
}

.exa-swatch--kitchen {
  background-color: var(--exa-kitchen);
}

/* 対象プランチップ ------------------------------------------------------ */
.exa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.exa-chip {
  display: inline-block;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1;
  border-radius: 3px;
  padding: 6px 8px;
  white-space: nowrap;
}

.exa-chip--temp {
  background-color: var(--exa-temp);
}

.exa-chip--smart {
  background-color: var(--exa-smart);
}

.exa-chip--energy {
  background-color: var(--exa-energy);
}

.exa-chip--air {
  background-color: var(--exa-air);
}

.exa-chip--hygiene {
  background-color: var(--exa-hygiene);
}

.exa-chip--kitchen {
  background-color: var(--exa-kitchen);
}

/* 注記リスト ------------------------------------------------------------ */
.exa-notes {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.exa-notes > li {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}

.exa-notes > li > span:first-child {
  flex: 0 0 auto;
}

/* ==========================================================================
   おすすめプラン
   ========================================================================== */
.exa-rec__checks {
  margin: 0 0 35px;
  padding: 0;
  list-style: none;
}

.exa-rec__checks > li {
  position: relative;
  font-size: 1.5rem;
  padding-left: 30px;
  margin-bottom: 12px;
}

.exa-rec__checks > li::before {
  content: "";
  position: absolute;
  top: 0.25em;
  left: 0;
  width: 21px;
  height: 17px;
  background-image: url("../img/ic_check.svg");
  background-repeat: no-repeat;
  background-size: 18px 18px;
}

.exa-rec__set {
  background-color: #eaeff9;
  border-radius: 8px;
  padding: 55px 20px 20px;
  position: relative;
}

.exa-rec__brand {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  border-radius: 8px 8px 8px 0;
  padding: 8px 20px;
}

.exa-rec__brand img {
  display: block;
  width: 160px;
  height: auto;
}

.exa-rec__plans {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
}

.exa-plan-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.35;
  border-radius: 4px;
  padding: 12px 18px;
}

.exa-plan-btn--temp {
  background-color: var(--exa-temp);
}

.exa-plan-btn--smart {
  background-color: var(--exa-smart);
}

.exa-plan-btn--energy {
  background-color: var(--exa-energy);
}

.exa-plan-btn--air {
  background-color: var(--exa-air);
}

.exa-plan-btn--hygiene {
  background-color: var(--exa-hygiene);
}

.exa-plan-btn--kitchen {
  background-color: var(--exa-kitchen);
}

.exa-rec__option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--exa-navy);
  font-size: 1.8rem;
  font-weight: bold;
  margin: 0;
}

.exa-plus {
  display: block;
  width: 26px;
  height: 26px;
  margin: 15px auto;
  border-radius: 50%;
  background-color: var(--exa-navy);
  position: relative;
}

.exa-plus--inline {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0;
  vertical-align: -3px;
}

.exa-plus::before,
.exa-plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
}

.exa-plus::before {
  width: 60%;
  height: 2px;
}

.exa-plus::after {
  width: 2px;
  height: 60%;
}

.exa-rec__contract {
  background-color: #dff2fc;
  border-radius: 8px;
  text-align: center;
  padding: 20px;
  margin-bottom: 30px;
}

.exa-rec__contract-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px 15px;
}

.exa-rec__contract img {
  width: 90px;
  height: auto;
}

.exa-rec__contract-title {
  color: var(--exa-navy);
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.4;
  margin: 0;
}

.exa-rec__contract-title small {
  display: block;
  font-size: 1.1rem;
  font-weight: normal;
  margin-top: 6px;
}

.exa-rec__img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 30px;
}

.exa-rec__pc {
  display: none;
}

.exa-rec__more {
  background-color: var(--exa-navy);
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 8px;
  margin-bottom: 18px;
}

.exa-rec__more-text,
.exa-rec__recommend {
  color: var(--exa-navy);
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
}

@media screen and (min-width: 600px) {
  .exa-rec__img--sp {
    display: none;
  }

  .exa-rec__pc {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 820px;
    margin-bottom: 30px;
  }

  .exa-rec__pc-img {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: auto;
  }

  /* 左（プラン）側は縦横比が大きく高さが出るため、幅を絞って右側と高さを揃える */
  .exa-rec__pc-img:first-child {
    flex-grow: 0.75;
  }

  .exa-rec__pc-plus {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
  }

  .exa-rec__extra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
  }

  /* 一列に並べるので、バッジをやめて他のテキストと同じ扱いにする */
  .exa-rec__extra .exa-rec__more {
    background-color: transparent;
    color: var(--exa-navy);
    font-weight: bold;
    border-radius: 0;
    padding: 0;
    white-space: nowrap;
  }

  /* 上のプラン図より控えめなサイズにして一列に収める */
  .exa-rec__extra .exa-rec__more,
  .exa-rec__extra .exa-rec__more-text,
  .exa-rec__extra .exa-rec__recommend {
    font-size: 1.4rem;
    margin-bottom: 0;
  }

  .exa-rec__extra .exa-rec__plans {
    margin-bottom: 0;
  }

  .exa-rec__extra .exa-plan-btn {
    font-size: 1.5rem;
    padding: 8px 14px;
  }
}

@media screen and (max-width: 599px) {
  .exa-rec__set {
    padding: 50px 12px 18px;
  }

  .exa-rec__brand img {
    width: 130px;
  }

  .exa-plan-btn {
    font-size: 1.5rem;
    padding: 10px 12px;
  }

  .exa-rec__option {
    font-size: 1.5rem;
  }

  .exa-rec__contract-title {
    font-size: 1.7rem;
  }
}