@charset "UTF-8";
/* ==========================================================================
   トップページ リニューアル用スタイル（/index.html, body.page-top）
   ・ベース＋追加クラス構成（__element/--modifier は使わない）
   ・ブレークポイント: PC min-width:768px / SP max-width:767px
   ========================================================================== */
.page-top {
  /* 固定の追従ナビ（.section-nav）にページ末尾が隠れないよう、その高さ分の余白を確保 */
}
@media only screen and (min-width: 768px) {
  .page-top {
    padding-bottom: 89px;
  }
}
@media only screen and (max-width: 767px) {
  .page-top {
    padding-bottom: 78px;
  }
}
.page-top {
  /* --------------------------------------------------------------------------
     キャンペーンバナー（KV上）
     PC: #f3f3f3 の帯（上下padding10px）に最大800px幅のバナーを中央配置。
     SP: バナーを全幅（フチなし）表示。
     -------------------------------------------------------------------------- */
}
.page-top .section-campaign-banner {
  background: #f3f3f3;
}
@media only screen and (min-width: 768px) {
  .page-top .section-campaign-banner {
    padding: 10px 0;
  }
}
.page-top .section-campaign-banner-item {
  margin: 0 auto;
  max-width: 800px;
}
.page-top .section-campaign-banner-item a {
  display: block;
}
@media only screen and (min-width: 768px) {
  .page-top .section-campaign-banner-item a:hover {
    opacity: 0.7;
  }
}
.page-top .section-campaign-banner-item img {
  display: block;
  width: 100%;
}
.page-top {
  /* --------------------------------------------------------------------------
     KV（キービジュアル）
     PC: セクション全体に背景画像（中央上固定・cover）。コピー/CTA/注釈を左カラムにオーバーレイ。
     SP: KV（背景＋見出し＋金額）と、白背景のCTAブロック（5分＋ボタン＋注釈）に分離。
     ※ ボタン::before・各画像の寸法は実書き出し画像に合わせ要調整。
     -------------------------------------------------------------------------- */
}
.page-top .section-kv {
  background-color: #fcfcfc;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .page-top .section-kv {
    background-image: url("/images/top/top-kv-bg-pc.png");
    background-repeat: no-repeat;
    background-position: center top;
    min-height: 540px;
  }
}
.page-top .section-kv-inner {
  max-width: 995px;
  margin: 0 auto;
  padding: 75px 20px 23px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-kv-inner {
    max-width: none;
    margin: 0;
    padding: 0;
  }
}
.page-top {
  /* ===== コピー（見出し＋金額） ===== */
}
@media only screen and (max-width: 767px) {
  .page-top .section-kv-copy {
    /* SP: 家族イラスト背景。高さ220px固定、背景は高さ220pxで両端を切る（拡大せず中央固定）。
       見出し/金額は左paddingを「中央−168px」にして画面拡大でも中央基準で位置を固定（基準幅376px） */
    background-image: url("/images/top/top-kv-bg-sp.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: auto 220px;
    height: 220px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 45px 20px 34px calc(50% - 168px);
  }
}
.page-top {
  /* 見出しは画像（PC/SP別SVG）。「ミツウロコでんき」の緑下線も画像内に焼き込み */
}
.page-top .section-kv-lead {
  margin: 0;
}
.page-top .section-kv-lead img {
  display: block;
  width: 534px;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .page-top .section-kv-lead img {
    /* TODO: 書き出したSPのSVG実寸に合わせて調整 */
    width: 162px;
  }
}
.page-top .section-kv-price {
  margin: 31px 0 0;
  margin-left: -13px;
}
.page-top .section-kv-price img {
  display: block;
  width: 534px;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .page-top .section-kv-price {
    margin-top: 22px;
    margin-left: -6px;
  }
  .page-top .section-kv-price img {
    width: 180px;
  }
}
.page-top {
  /* ===== CTA（5分＋ボタン2つ＋注釈） ===== */
}
@media only screen and (min-width: 768px) {
  .page-top .section-kv-cta {
    width: 460px;
    margin-top: 15px;
    margin-left: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .page-top .section-kv-cta {
    background: #fff;
    padding: 12px 20px 20px;
  }
}
.page-top .section-kv-catch {
  margin: 0;
  text-align: center;
}
.page-top .section-kv-catch img {
  display: inline-block;
  width: 179px;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .page-top .section-kv-catch img {
    width: 159px;
  }
}
.page-top .section-kv-buttons {
  margin-top: 11px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 15px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-kv-buttons {
    margin-top: 7px;
    gap: 10px;
  }
}
.page-top {
  /* 新CTAボタン（影込み背景＋アイコン）。既存 .button の ::before 方式を踏襲 */
  /* 親をflex化してa（width/height:100%）をstretchで引き伸ばす。
     ベース .button は display:table のため、a を display:flex に変えると
     Firefoxでは匿名テーブルセル配下の height:100% が解決されず高さが潰れる対策。 */
}
.page-top .button-kv {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.page-top .button-kv a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 14px;
  font-weight: 600;
  line-height: 1.28;
}
.page-top .button-kv::before {
  pointer-events: none;
}
.page-top .button-kv-icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 48px;
  height: auto;
}
.page-top {
  /* 大文字＋小文字（はこちら）の塊。大↔小は2px・下揃え（icon↔塊は .button-kv a の gap） */
}
.page-top .button-kv-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 2px;
}
.page-top {
  /* 緑：現在の住所で申し込む（button-main3／PC 460×70） */
}
.page-top .button-main3 {
  width: 460px;
  height: 70px;
}
.page-top .button-main3 a {
  color: #fff;
  font-size: 24px;
}
.page-top .button-main3::before {
  background: url("/images/common/button-main3-pc.png") left top no-repeat;
  background-size: 500px;
  width: 500px;
  height: 110px;
}
.page-top {
  /* 白：お引越し先で利用する方はこちら（button-main4／PC 460×50） */
}
.page-top .button-main4 {
  width: 460px;
  height: 50px;
}
.page-top .button-main4 a {
  color: #090;
  font-size: 17px;
}
.page-top .button-main4 .button-kv-text-sub {
  font-size: 13px;
}
.page-top .button-main4 .button-kv-icon {
  width: 36px;
}
.page-top .button-main4::before {
  background: url("/images/common/button-main4-pc.png") left top no-repeat;
  background-size: 500px;
  width: 500px;
  height: 88px;
}
.page-top {
  /* ホバーはPCのみ（SPタッチで差し替わらないように） */
}
@media only screen and (min-width: 768px) {
  .page-top .button-main3:hover::before {
    background-image: url("/images/common/button-main3-pc-hover.png");
  }
  .page-top .button-main4:hover::before {
    background-image: url("/images/common/button-main4-pc-hover.png");
  }
}
@media only screen and (max-width: 767px) {
  .page-top .button-main3 {
    width: 340px;
    height: 60px;
  }
  .page-top .button-main3 a {
    font-size: 20px;
    gap: 8px;
  }
  .page-top .button-main3::before {
    background: url("/images/common/button-main3-sp.png") left top no-repeat;
    background-size: 379px;
    width: 379px;
    height: 90px;
  }
  .page-top .button-main4 {
    width: 340px;
    height: 45px;
  }
  .page-top .button-main4 a {
    font-size: 15px;
    gap: 12px;
  }
  .page-top .button-main4 .button-kv-text-sub {
    font-size: 13px;
  }
  .page-top .button-kv-icon {
    width: 36px;
  }
  .page-top .button-main4 .button-kv-icon {
    width: 32px;
  }
  .page-top {
    /* SPは section-apply と同じ button-main2-sp.png を再利用 */
  }
  .page-top .button-main4::before {
    background: url("/images/common/button-main2-sp.png") left top no-repeat;
    background-size: 379px;
    width: 379px;
    height: 80px;
  }
}
.page-top {
  /* ===== 注釈（トグル） ===== */
}
.page-top .section-kv-note {
  margin-top: 21px;
  color: #333;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.7;
  margin-left: 3px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-kv-note {
    margin-top: 16px;
    margin-left: -3px;
    font-size: 10px;
  }
}
.page-top .section-kv-note-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-top .section-kv-note-list li + li {
  margin-top: -2px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-kv-note-list li + li {
    margin-top: 1px;
  }
}
.page-top .section-kv-note-line {
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 4px;
}
.page-top .section-kv-note-mark {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.page-top .section-kv-note-trigger {
  margin: 0 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 4px;
}
.page-top .section-kv-note-trigger a {
  color: #333;
  text-decoration: underline;
}
.page-top .section-kv-note-trigger a:hover {
  text-decoration: none;
}
.page-top .section-kv-note-detail {
  display: none;
}
.page-top .section-kv-note-detail > * + * {
  margin-top: 10px;
}
.page-top {
  /* 閉じるボタン（button-main-xsmall2／FAQ「一覧を見る」と同サイズ100×30・新背景） */
}
.page-top .button-main-xsmall2 {
  width: 100px;
  height: 30px;
}
.page-top .section-kv-note-close {
  margin: 20px auto 0;
}
@media only screen and (max-width: 767px) {
  .page-top .section-kv-note-close {
    margin-top: 6px;
  }
}
.page-top .button-main-xsmall2 a {
  color: #090;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
}
.page-top .button-main-xsmall2::before {
  background: url("/images/common/button-main-xsmall2-pc.png") left top no-repeat;
  background-size: 120px;
  width: 120px;
  height: 50px;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .page-top .button-main-xsmall2:hover::before {
    background-image: url("/images/common/button-main-xsmall2-pc-hover.png");
  }
}
@media only screen and (max-width: 767px) {
  .page-top .button-main-xsmall2 a {
    font-size: 10px;
  }
  .page-top .button-main-xsmall2::before {
    background-image: url("/images/common/button-main-xsmall2-sp.png");
  }
}
.page-top {
  /* --------------------------------------------------------------------------
     契約数29万件突破！
     -------------------------------------------------------------------------- */
}
.page-top .section-breakthrough {
  background: #fff;
  text-align: center;
  padding: 50px 20px 18px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-breakthrough {
    padding: 15px 15px 35px;
  }
}
.page-top .section-breakthrough-inner img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}
.page-top {
  /* --------------------------------------------------------------------------
     サービス・キャンペーンのご案内
     -------------------------------------------------------------------------- */
}
.page-top .section-campaign {
  background: #fff;
  padding: 50px 0 70px;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .page-top .section-campaign {
    padding: 16px 0 30px;
  }
}
.page-top .section-campaign-title {
  margin: 0;
  color: #333;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.5;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .page-top .section-campaign-title {
    font-size: 18px;
  }
}
.page-top {
  /* スライダー（Slick / centerMode + variableWidth） */
}
.page-top .section-campaign-slider {
  visibility: hidden; /* slick初期化前のちらつき防止 */
  margin-top: 25px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-campaign-slider {
    margin-top: 16px;
  }
}
.page-top .section-campaign-slider.slick-initialized {
  visibility: visible;
}
.page-top .section-campaign-slide {
  width: 1000px;
  margin: 0 12.5px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-campaign-slide {
    width: 310px;
    margin: 0 5px;
  }
}
.page-top .section-campaign-slide a {
  display: block;
}
@media only screen and (min-width: 768px) {
  .page-top .section-campaign-slide a:hover {
    opacity: 0.7;
  }
}
.page-top .section-campaign-slide img {
  display: block;
  width: 100%;
  height: auto;
}
.page-top {
  /* ページネーション（横棒型ドット） */
}
.page-top .section-campaign .slick-dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
@media only screen and (max-width: 767px) {
  .page-top .section-campaign .slick-dots {
    margin-top: 20px;
  }
}
.page-top .section-campaign .slick-dots li {
  margin: 0 5px;
  line-height: 0;
}
.page-top .section-campaign .slick-dots {
  /* シークバー型インジケーター（トラック＝グレー） */
}
.page-top .section-campaign .slick-dots li button {
  position: relative;
  display: block;
  overflow: hidden;
  width: 30px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: #d7d7d7;
  font-size: 0;
  line-height: 0;
  color: transparent;
  cursor: pointer;
}
.page-top .section-campaign .slick-dots {
  /* 緑の進捗フィル（アクティブ時に表示時間で 0→100% に伸びる）
     width ではなく transform: scaleX を使い、GPUコンポジットで滑らかに動かす */
}
.page-top .section-campaign .slick-dots li button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #009900;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: left center;
          transform-origin: left center;
  will-change: transform;
}
.page-top .section-campaign .slick-dots li.slick-active button::before {
  -webkit-animation: campaign-progress 4500ms linear forwards;
          animation: campaign-progress 4500ms linear forwards;
}
.page-top {
  /* --------------------------------------------------------------------------
     選ばれる3つの理由
     -------------------------------------------------------------------------- */
}
.page-top .section-reason {
  background: #e2f2d1;
  padding: 60px 20px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-reason {
    padding: 50px 15px;
    overflow: hidden;
  }
}
.page-top {
  /* 見出しブロック（タイトル画像＋リード文＋左右キャラクター） */
}
.page-top .section-reason-head {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.page-top .section-reason-title-img {
  display: inline-block;
  width: 338px;
  height: auto;
  vertical-align: top;
}
@media only screen and (max-width: 767px) {
  .page-top .section-reason-title-img {
    width: 257px;
  }
}
.page-top .section-reason-lead {
  margin: 18px 0 0;
  color: #333;
  font-size: 16px;
  line-height: 1.7;
}
@media only screen and (max-width: 767px) {
  .page-top .section-reason-lead {
    margin-top: 16px;
    font-size: 13px;
  }
}
.page-top .section-reason-char {
  position: absolute;
  height: auto;
}
.page-top .section-reason-char-tama {
  top: 57px;
  left: 73px;
  width: 133px;
  /* SP: 端基準だと画面拡大で外へ広がるため、中央基準（left:50%＋固定px）で位置を固定（基準幅376px） */
}
@media only screen and (max-width: 767px) {
  .page-top .section-reason-char-tama {
    top: 132px;
    left: 50%;
    margin-left: -181px;
    width: 62px;
  }
}
.page-top .section-reason-char-maruko {
  top: 57px;
  right: 71px;
  width: 129px;
  /* SP: 中央基準（left:50%＋固定px）で位置を固定（基準幅376px）。base の right を打ち消す */
}
@media only screen and (max-width: 767px) {
  .page-top .section-reason-char-maruko {
    top: 132px;
    left: 50%;
    right: auto;
    margin-left: 117px;
    width: 60px;
  }
}
.page-top {
  /* カード（3枚） */
}
.page-top .section-reason-cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  max-width: 1000px;
  margin: 60px auto 0;
}
@media only screen and (max-width: 767px) {
  .page-top .section-reason-cards {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 44px;
    margin-top: 48px;
  }
}
.page-top .section-reason-card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  background: #fff;
  border-radius: 10px;
  padding: 45px 35px 30px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-reason-card {
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 14px;
    padding: 35px 20px 20px;
    /* 上だけ枠外（バッジ）を残し、左右・下に漏れるボタン影をカード枠でクリップ */
    clip-path: inset(-40px 0 0 0 round 10px);
  }
}
.page-top .section-reason-card {
  /* ボタンを下端揃え（PC等高時／gapが最小余白） */
}
.page-top .section-reason-card .button {
  margin-top: auto;
}
.page-top {
  /* 理由バッジ（カード上端から飛び出す） */
}
.page-top .section-reason-badge {
  position: absolute;
  top: -36.5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 70px;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .page-top .section-reason-badge {
    top: -30px;
    width: 60px;
  }
}
.page-top {
  /* タイトル・丸イラスト・本文のまとまり */
}
.page-top .section-reason-set {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 11px;
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .page-top .section-reason-set {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 90px 15px 1fr;
    grid-template-columns: 90px 1fr;
    -webkit-column-gap: 15px;
       -moz-column-gap: 15px;
            column-gap: 15px;
    row-gap: 6px;
    -ms-grid-rows: auto 6px auto;
        grid-template-areas: "icon title" "icon desc";
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}
.page-top .section-reason-card-title {
  margin: 0;
  color: #090;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.4;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .page-top .section-reason-card-title {
    grid-area: title;
    padding-top: 6px;
    font-size: 17px;
    text-align: left;
  }
}
.page-top {
  /* 丸イラスト（背景の丸も含めて画像で書き出し済み） */
}
.page-top .section-reason-icon img {
  display: block;
  width: 150px;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .page-top .section-reason-icon {
    grid-area: icon;
  }
  .page-top .section-reason-icon img {
    width: 90px;
  }
}
.page-top .section-reason-desc {
  margin: 0;
  color: #333;
  font-size: 15px;
  line-height: 1.7;
}
@media only screen and (max-width: 767px) {
  .page-top .section-reason-desc {
    grid-area: desc;
    font-size: 12px;
  }
}
@media only screen and (max-width: 767px){
  .page-top .section-reason-card-title {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  .page-top .section-reason-icon {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    -ms-grid-column: 1;
  }
  .page-top .section-reason-desc {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
}
.page-top {
  /* ============================================================
     お客さまの声（カード3枚 / PC横並び・SP縦積み）
     ============================================================ */
}
.page-top .section-voice {
  background: #fff;
  padding: 50px 20px 55px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-voice {
    padding: 34px 15px;
  }
}
.page-top .section-voice-title {
  margin: 0;
  color: #090;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.5;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .page-top .section-voice-title {
    font-weight: 600;
    font-size: 20px;
  }
}
.page-top .section-voice-inner {
  max-width: 1000px;
  margin: 0 auto;
}
.page-top .section-voice-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 20px;
  margin-top: 47px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-voice-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 35px;
    margin-top: 29px;
  }
}
.page-top .section-voice-card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  background: #f3f3f3;
  border-radius: 10px 10px 0 10px;
  padding: 32px 35px 37px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-voice-card {
    padding: 23px 20px 23px;
  }
}
.page-top .section-voice-card {
  /* 吹き出しのしっぽ（右下・clip-pathで描画） */
}
.page-top .section-voice-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -23px;
  width: 28px;
  height: 24px;
  background: #f3f3f3;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
@media only screen and (max-width: 767px) {
  .page-top .section-voice-card::after {
    bottom: -20px;
    width: 23px;
    height: 20px;
  }
}
.page-top {
  /* お客さまアイコン（緑丸＋人物・PC/SP共通PNG・右上にはみ出し） */
}
.page-top .section-voice-icon {
  position: absolute;
  top: -17px;
  right: 19px;
  width: 85px;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .page-top .section-voice-icon {
    top: -10px;
    right: 10px;
    width: 80px;
  }
}
.page-top .section-voice-name {
  -ms-flex-item-align: start;
      align-self: flex-start;
  margin: 0;
  color: #090;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  padding-bottom: 1px;
  border-bottom: 2px solid #090;
}
@media only screen and (max-width: 767px) {
  .page-top .section-voice-name {
    font-size: 13px;
  }
}
.page-top .section-voice-tag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 30px;
  background: #009900;
  color: #fff;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.7;
  padding: 3px 10px;
  border-radius: 100px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-voice-tag {
    margin-top: 20px;
    font-size: 10px;
  }
}
.page-top .section-voice-heading {
  margin: 12px 0 0;
  color: #333;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.7;
}
@media only screen and (max-width: 767px) {
  .page-top .section-voice-heading {
    margin-top: 7px;
    font-size: 16px;
  }
}
.page-top .section-voice-text {
  margin: 12px 0 0;
  color: #333;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
}
@media only screen and (max-width: 767px) {
  .page-top .section-voice-text {
    margin-top: 5px;
    font-size: 12px;
  }
}
.page-top .section-voice-note {
  margin-top: 42px;
  color: #333;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.7;
  text-align: right;
}
@media only screen and (max-width: 767px) {
  .page-top .section-voice-note {
    font-size: 10px;
    text-align: left;
    margin-top: 38px;
    text-indent: -1em;
    padding-left: 1em;
  }
}
.page-top {
  /* ===== 契約の流れ ===== */
}
.page-top .section-flow {
  background: #f0e6dc;
  padding: 50px 0 66px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-flow {
    padding: 34px 0 46px;
  }
}
.page-top .section-flow-title {
  color: #009900;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.5;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .page-top .section-flow-title {
    font-weight: 600;
    font-size: 20px;
  }
}
.page-top .section-flow-list {
  width: 1000px;
  max-width: calc(100% - 24px);
  margin: 38px auto 0;
  padding: 0;
  list-style: none;
}
@media only screen and (max-width: 767px) {
  .page-top .section-flow-list {
    margin-top: 28px;
    max-width: calc(100% - 30px);
  }
}
.page-top .section-flow-step {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 25px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-flow-step {
    gap: 10px;
  }
}
.page-top {
  /* ステップ間の余白（区切り線は absolute なので li の高さに含めない） */
}
.page-top .section-flow-step + .section-flow-step {
  margin-top: 49px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-flow-step + .section-flow-step {
    margin-top: 44px;
  }
}
.page-top .section-flow-step + .section-flow-step {
  /* ステップ間の区切り線（吹き出し付き／上余白の中央に絶対配置） */
}
.page-top .section-flow-step + .section-flow-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: -25px;
  width: 100%;
  height: 21px;
  background: url(/images/top/top-flow-line-pc.svg) no-repeat center center;
  background-size: contain;
  /* SPはPC線を実寸固定で中央配置し、狭まると両端からクリップ（吹き出しは中央固定で常時表示） */
}
@media only screen and (max-width: 767px) {
  .page-top .section-flow-step + .section-flow-step::before {
    top: -27px;
    background-size: auto 100%;
  }
}
.page-top .section-flow-icon {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 140px;
  height: 140px;
}
.page-top .section-flow-icon img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.page-top .section-flow-icon::before {
  content: "";
  position: absolute;
  left: -8px;
  top: -8px;
  width: 50px;
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 767px) {
  .page-top .section-flow-icon {
    width: 80px;
    height: 80px;
  }
  .page-top .section-flow-icon::before {
    left: -7.5px;
    top: -6.5px;
    width: 35px;
    height: 35px;
  }
}
.page-top .section-flow-icon-1::before {
  background-image: url(/images/top/top-flow-step-1.svg);
}
.page-top .section-flow-icon-2::before {
  background-image: url(/images/top/top-flow-step-2.svg);
}
.page-top .section-flow-icon-3::before {
  background-image: url(/images/top/top-flow-step-3.svg);
}
.page-top .section-flow-icon-4::before {
  background-image: url(/images/top/top-flow-step-4.svg);
}
.page-top .section-flow-icon-5::before {
  background-image: url(/images/top/top-flow-step-5.svg);
}
.page-top .section-flow-body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
@media only screen and (max-width: 767px) {
  .page-top .section-flow-body {
    padding-top: 8px;
  }
}
.page-top .section-flow-step-title {
  color: #333;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
}
@media only screen and (max-width: 767px) {
  .page-top .section-flow-step-title {
    font-size: 16px;
  }
}
.page-top .section-flow-text {
  color: #333;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  margin-top: 14px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-flow-text {
    margin-top: 5px;
    font-size: 12px;
  }
}
.page-top .section-flow-link {
  color: #009900;
  text-decoration: none;
}
.page-top .section-flow-link-icon {
  display: inline-block;
  width: 12px;
  height: auto;
  margin-left: 2px;
  margin-right: 4px;
  vertical-align: -0.05em;
}
.page-top .section-flow-notes {
  margin-top: 6px;
  padding: 0;
  list-style: none;
}
@media only screen and (max-width: 767px) {
  .page-top .section-flow-notes {
    margin-top: 5px;
  }
}
.page-top .section-flow-notes li {
  position: relative;
  padding-left: 1.3em;
  color: #333;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.7;
}
.page-top .section-flow-notes li::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
}
@media only screen and (max-width: 767px) {
  .page-top .section-flow-notes li {
    padding-left: 1.2em;
    font-size: 10px;
  }
}
.page-top .section-flow-notes li + li {
  margin-top: 2px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-flow-notes li + li {
    margin-top: 5px;
  }
}
.page-top {
  /* --------------------------------------------------------------------------
     ミツウロコガス バナー
     -------------------------------------------------------------------------- */
}
.page-top .section-gas {
  background: #fff;
  padding: 54px 0 60px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .page-top .section-gas {
    padding: 26px 0 30px;
  }
}
.page-top .section-gas-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  color: #333;
  font-weight: 600;
  font-size: 23px;
  line-height: 1.5;
}
@media only screen and (max-width: 767px) {
  .page-top .section-gas-title {
    gap: 6px;
    font-size: 16px;
  }
}
.page-top .section-gas-deco {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 11px;
  height: auto;
  position: relative;
  top: -1px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-gas-deco {
    width: 7px;
  }
}
.page-top .section-gas-deco-right {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
.page-top .section-gas-banner {
  margin-top: 10px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-gas-banner {
    margin-top: 10px;
  }
}
.page-top .section-gas-banner a {
  display: block;
  width: 1000px;
  max-width: calc(100% - 20px);
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  .page-top .section-gas-banner a:hover {
    opacity: 0.7;
  }
}
.page-top .section-gas-banner img {
  display: block;
  width: 100%;
  height: auto;
}
.page-top {
  /* --------------------------------------------------------------------------
     ミツウロコグリーンエネルギーとは
     -------------------------------------------------------------------------- */
}
.page-top .section-about {
  background-color: #A0C8EA; /* 画面が広がったとき用フォールバック */
  background-image: url("/images/top/top-about-bg-pc.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  padding: 69px 20px 170px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-about {
    overflow: hidden;
    background-image: url("/images/top/top-about-bg-sp.png"), -webkit-gradient(linear, left bottom, left top, color-stop(11.16%, rgba(255, 255, 255, 0)), color-stop(36.36%, rgba(214, 235, 255, 0.5)), color-stop(61.99%, #B9D9F9));
    background-image: url("/images/top/top-about-bg-sp.png"), linear-gradient(0deg, rgba(255, 255, 255, 0) 11.16%, rgba(214, 235, 255, 0.5) 36.36%, #B9D9F9 61.99%);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    padding: 50px 15px 116px;
  }
}
.page-top .section-about-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 5px;
}
.page-top .section-about-title .section-about-logo {
  width: 420px;
  height: auto;
}
.page-top .section-about-title .section-about-toha {
  color: #333;
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  position: relative;
  top: 2px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-about-title {
    gap: 3px;
  }
  .page-top .section-about-title .section-about-logo {
    width: 290px;
  }
  .page-top .section-about-title .section-about-toha {
    font-weight: 600;
    font-size: 20px;
  }
}
.page-top .section-about-cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  max-width: 1000px;
  margin: 50px auto 0;
}
@media only screen and (max-width: 767px) {
  .page-top .section-about-cards {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 15px;
    margin-top: 30px;
  }
}
.page-top .section-about-card {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  background: #fff;
  border-radius: 10px;
  padding: 33px 35px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .page-top .section-about-card {
    padding: 26px 20px 24px;
  }
}
.page-top .section-about-card-title {
  color: #009900;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.4;
}
.page-top .section-about-card-title span {
  display: inline-block;
  border-bottom: 2px solid #009900;
  padding-bottom: 8px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-about-card-title {
    font-size: 16px;
  }
  .page-top .section-about-card-title span {
    padding-bottom: 5px;
  }
}
.page-top .section-about-card-text {
  margin-top: 28px;
  color: #333;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  text-align: left;
}
@media only screen and (max-width: 767px) {
  .page-top .section-about-card-text {
    margin-top: 19px;
    font-size: 12px;
  }
}
.page-top {
  /* ボタン: .section-reason と同じ .button button-main button-main-small を流用。中央寄せの余白だけ付与 */
}
.page-top .section-about .button {
  margin: 35px auto 0;
}
@media only screen and (max-width: 767px) {
  .page-top .section-about .button {
    margin-top: 25px;
  }
}
.page-top {
  /* --------------------------------------------------------------------------
     よくあるご質問
     -------------------------------------------------------------------------- */
}
.page-top .section-faq {
  background: #fff;
  padding: 50px 0 60px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-faq {
    padding: 35px 0 38px;
    overflow: hidden;
  }
}
.page-top .section-faq-title {
  color: #090;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.5;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .page-top .section-faq-title {
    font-weight: 600;
    font-size: 20px;
  }
}
.page-top .section-faq-contents {
  margin-top: 30px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-faq-contents {
    margin-top: 18px;
  }
}
.page-top .section-faq-list {
  width: 758px;
  max-width: calc(100% - 30px);
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .page-top .section-faq-list {
    max-width: 100%;
  }
}
.page-top {
  /* PC: 各カード上・左・右に罫線、最終行のみ下も付与＝囲み枠。
     SP: 上罫線のみ（最終行のみ下）＝区切り線。 */
  /* パディングは dt/dd 側に持たせる（クリックエリアを枠全体に広げるため／罫線・背景のみ） */
}
.page-top .section-faq-item {
  margin: 0;
  background: #fff;
  border-top: 1px solid #090;
  border-left: 1px solid #090;
  border-right: 1px solid #090;
}
.page-top .section-faq-item:last-child {
  border-bottom: 1px solid #090;
}
@media only screen and (max-width: 767px) {
  .page-top .section-faq-item {
    border-left: none;
    border-right: none;
  }
}
.page-top {
  /* dt 全体＝クリックエリア。パディングを付与してカード内の余白部分もクリック可能に。
     padding-bottom が「閉時の下余白」と「開時のQ↔A間隔」を兼ねる。 */
}
.page-top .section-faq-q {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 28px 22px 23px 28px;
  cursor: pointer;
}
@media only screen and (max-width: 767px) {
  .page-top .section-faq-q {
    padding: 21px 6px 19px 10px;
    gap: 25px;
  }
}
.page-top .section-faq-q-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-faq-q-inner {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.page-top .section-faq-q-icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 16px;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .page-top .section-faq-q-icon {
    width: 14px;
    position: relative;
    top: 4px;
  }
}
.page-top .section-faq-q-text {
  color: #090;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
}
@media only screen and (max-width: 767px) {
  .page-top .section-faq-q-text {
    font-size: 15px;
  }
}
.page-top {
  /* +/× トグル（＋のSVG画像1枚を回転。閉＝＋／開＝45度回転で×に。transitionで滑らかに） */
}
.page-top .section-faq-toggle {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-right: -1px;
  margin-top: -2px;
  background: url("/images/top/top-faq-plus.svg") center/contain no-repeat;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.page-top .section-faq-item.is-open .section-faq-toggle {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.page-top {
  /* dd 本体には余白を持たせない（slideToggle が高さのみアニメーションするように）。
     余白は内側の .section-faq-a-inner に付与し、開閉時に中身がずれないようにする。 */
}
.page-top .section-faq-a {
  display: none; /* 初期は全項目クローズ。JSのslideToggleで開閉 */
  margin: 0;
  padding: 0;
  color: #333;
  font-weight: 400;
  font-size: 14px;
  line-height: 2;
}
@media only screen and (max-width: 767px) {
  .page-top .section-faq-a {
    font-size: 12px;
  }
}
.page-top .section-faq-a a {
  color: #090;
  text-decoration: underline;
}
.page-top .section-faq-a a:hover {
  text-decoration: none;
}
.page-top {
  /* dt 側へパディングを移したぶん、回答側にもカード分の余白を加算（左字下げ・右・下）。
     上はdtのpadding-bottomで間隔を確保するため0。 */
}
.page-top .section-faq-a-inner {
  padding: 0 22px 28px 54px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-faq-a-inner {
    padding: 0 64px 26px 36px;
  }
}
.page-top .section-faq-a-inner p {
  margin: 0;
}
.page-top {
  /* 一覧を見るボタン（.button button-main button-main-xsmall を流用） */
}
.page-top .section-faq-list-button {
  margin: 30px auto 0;
}
@media only screen and (max-width: 767px) {
  .page-top .section-faq-list-button {
    margin-top: 25px;
  }
}
.page-top .section-faq-contact {
  margin-top: 34px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-faq-contact {
    margin-top: 27px;
  }
}
.page-top .section-faq-contact-lead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  color: #333;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
}
@media only screen and (max-width: 767px) {
  .page-top .section-faq-contact-lead {
    gap: 6px;
    font-size: 14px;
  }
}
.page-top .section-faq-deco {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 11px;
  height: auto;
  position: relative;
  top: -1px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-faq-deco {
    width: 7px;
  }
}
.page-top .section-faq-deco-right {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
.page-top {
  /* お問い合わせボタン（.button button-main を流用） */
}
.page-top .section-faq-contact-button {
  margin: 12px auto 0;
}
@media only screen and (max-width: 767px) {
  .page-top .section-faq-contact-button {
    margin-top: 7px;
  }
}
.page-top {
  /* ===== 新規お申し込みの方 ===== */
}
.page-top .section-apply {
  background: #009900;
  padding: 60px 20px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-apply {
    padding: 40px 15px;
    overflow: hidden;
  }
}
.page-top .section-apply-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .page-top .section-apply-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 19px;
    max-width: 346px;
  }
}
.page-top .section-apply-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  padding-bottom: 10px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-apply-title {
    gap: 15px;
    padding-bottom: 0;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.page-top .section-apply-icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 121px;
}
.page-top .section-apply-icon img {
  display: block;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .page-top .section-apply-icon {
    width: 90px;
  }
}
.page-top .section-apply-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
  min-width: 0;
}
@media only screen and (max-width: 767px) {
  .page-top .section-apply-text {
    gap: 10px;
    margin-top: -6px;
  }
}
.page-top .section-apply-heading {
  color: #fff;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.5;
}
@media only screen and (max-width: 767px) {
  .page-top .section-apply-heading {
    font-weight: 600;
    font-size: 20px;
  }
}
.page-top .section-apply-lead {
  color: #fff;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
}
@media only screen and (max-width: 767px) {
  .page-top .section-apply-lead {
    font-size: 13px;
  }
}
.page-top .section-apply-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  gap: 40px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-apply-buttons {
    gap: 20px;
  }
}
.page-top {
  /* button-main の別パターン（白地に緑文字・背景画像のみ差し替え／汎用） */
}
.page-top .button-main2 a {
  color: #090;
}
.page-top .button-main2::before {
  background-image: url("/images/common/button-main2-pc.png");
}
.page-top {
  /* ホバーはPCのみ（SPタッチで画像が差し替わらないように） */
}
@media only screen and (min-width: 768px) {
  .page-top .button-main2:hover::before {
    background-image: url("/images/common/button-main2-pc-hover.png");
  }
}
@media only screen and (max-width: 767px) {
  .page-top .button-main2 {
    width: 340px;
  }
  .page-top .button-main2::before {
    background-image: url("/images/common/button-main2-sp.png");
    background-size: 379px;
    width: 379px;
  }
}
.page-top .section-support {
  padding-bottom: 170px;
}
@media only screen and (max-width: 767px) {
  .page-top .section-support {
    padding-bottom: 118px;
  }
}
.page-top {
  /* --------------------------------------------------------------------------
     追従ナビ（固定ボトムバー）
     ウィンドウ下部に常時固定。PC=3ボタン横並び／SP=縦並びボタン＋上に半円。
     ボタン背景・影はすべてCSSで再現（背景画像なし）。
     -------------------------------------------------------------------------- */
}
.page-top .section-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #009900;
  border-top: 1px solid #9ecf9e;
}
@media only screen and (min-width: 768px) {
  .page-top .section-nav {
    padding: 14px 0;
  }
}
@media only screen and (max-width: 767px) {
  .page-top .section-nav {
    padding: 10px 7px 12px;
  }
}
.page-top .section-nav-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media only screen and (min-width: 768px) {
  .page-top .section-nav-inner {
    width: 1000px;
    gap: 11px;
  }
}
@media only screen and (max-width: 767px) {
  .page-top .section-nav-inner {
    width: 100%;
    gap: 4px;
  }
}
.page-top .section-nav-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #333;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.2;
}
@media only screen and (min-width: 768px) {
  .page-top .section-nav-btn {
    gap: 12px;
    width: 326px;
    height: 60px;
    border-radius: 8px;
    background: #f8f8f8;
    -webkit-box-shadow: 5px 6px 4px rgba(0, 0, 0, 0.25);
            box-shadow: 5px 6px 4px rgba(0, 0, 0, 0.25);
    font-size: 16px;
  }
}
@media only screen and (max-width: 767px) {
  .page-top .section-nav-btn {
    /* z-index は付けない（独自スタッキングコンテキストを作らないことで
       ::before の半円を親 .section-nav の負レイヤー＝ボタン背景の裏へ回す） */
    position: relative;
    display: block;
    width: calc((100% - 8px) / 3);
    height: 55px;
    padding-top: 20px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border-radius: 4px;
    background: #fff;
    -webkit-box-shadow: 3px 4px 2px rgba(0, 0, 0, 0.2);
            box-shadow: 3px 4px 2px rgba(0, 0, 0, 0.2);
    font-size: 12px;
    text-align: center;
  }
}
.page-top .section-nav-btn-sim {
  background: #fde13a;
}
.page-top {
  /* ホバー背景（PCのみ。SPタッチで差し替わらないように） */
}
@media only screen and (min-width: 768px) {
  .page-top .section-nav-btn:hover {
    background: #c6fcb5;
  }
  .page-top .section-nav-btn-sim:hover {
    background: #ffa75f;
  }
}
.page-top {
  /* SPのみ：ボタン上端から飛び出す半円（ボタン背面・同色） */
}
@media only screen and (max-width: 767px) {
  .page-top .section-nav-btn::before {
    content: "";
    position: absolute;
    top: -13px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    -webkit-box-shadow: 3px 4px 2px rgba(0, 0, 0, 0.2);
            box-shadow: 3px 4px 2px rgba(0, 0, 0, 0.2);
    z-index: -1;
  }
  .page-top .section-nav-btn-sim::before {
    background: #fde13a;
  }
}
@media only screen and (min-width: 768px) {
  .page-top .section-nav-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media only screen and (max-width: 767px) {
  .page-top .section-nav-icon {
    position: absolute;
    top: -6px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.page-top .section-nav-icon img {
  height: auto;
}
@media only screen and (min-width: 768px) {
  .page-top .section-nav-icon img {
    width: 42px;
  }
}
@media only screen and (max-width: 767px) {
  .page-top .section-nav-icon img {
    width: 26px;
  }
}
.page-top .section-nav-text {
  line-height: 1;
}
.page-top {
  /* --------------------------------------------------------------------------
     追従ナビと重なる固定UIの位置調整（トップページ限定）
     ・ページトップボタン／AIチャット(Tayori)を追従ナビ分だけ上へ。
     ・グローバル定義より後に読み込まれ、.page-top で特異度も上がるため上書き可。
     -------------------------------------------------------------------------- */
}
@media only screen and (min-width: 768px) {
  .page-top .button-pagetop {
    bottom: 105px;
  }
}
@media only screen and (max-width: 767px) {
  .page-top .button-pagetop {
    bottom: 90px;
  }
}
.page-top {
  /* AIチャット(Tayori)。通常時は追従ナビの上、position_change時（＝ページトップ
     ボタン表示時）はボタンの上まで逃がす。position_change は scripts/index.js の
     ToTop が付与（ボタン表示中のみ）。 */
}
@media only screen and (min-width: 768px) {
  .page-top #tayori-ai-chatbot-app {
    bottom: 105px !important;
  }
}
@media only screen and (max-width: 767px) {
  .page-top #tayori-ai-chatbot-app {
    bottom: 90px !important;
    margin-bottom: 0 !important;
  }
}
@media only screen and (max-width: 767px) {
  .page-top #tayori-ai-chatbot-app.position_change {
    bottom: 170px !important;
  }
}

@-webkit-keyframes campaign-progress {
  from {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  to {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}

@keyframes campaign-progress {
  from {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  to {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
/*# sourceMappingURL=style.css.map */