.MainColumn .Page {
  border: none;
}
/*------------------------------------------------------------
    common.cssの.Page系装飾（見出し・段落・リスト・テーブル）を
    新デザインページ用にリセット
    ※common.cssは編集しない。本文ルートに .sublp クラスを付けることで
    詳細度を確保し、common.cssの .Page hN 等（詳細度0,1,1）に勝つ。
    新デザイン用クラスは「.sublp .xxx」の形で書けば、要素セレクタを
    挟まない分このリセットより詳細度が高くなり、確実に上書きできる。
    （本文側のマークアップ例: <div class="Page sublp"> または
      <div class="Page"><div class="sublp">...</div></div>）
*/
.sublp h1,
.sublp h2,
.sublp h3,
.sublp h4,
.sublp h5,
.sublp h6 {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}
.sublp h2 a:link,
.sublp h2 a:visited {
  color: inherit;
}
.sublp p,
.sublp strong {
  margin: 1rem 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 2;
  color: var(--txt);
}
.sublp ul,
.sublp ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sublp ul li,
.sublp ol li {
  margin: 0;
  padding: 0;
  background: none;
}
.sublp table {
  border: none;
}
.sublp table th,
.sublp table td {
  border: none;
  padding: 0;
  background: none;
}

.sublp .section-title04 {
  margin-top: 5rem;
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  padding-bottom: 3.2rem;
  line-height: 1.5;
  margin-bottom: 0 !important;
}

.sublp .section-title04 .color {
  border-bottom: 2px dashed var(--main);
  font-size: clamp(3rem, 5vw, 4.5rem);
  color: var(--main);
}

#sec06 {
  margin-bottom: 10rem;
}
/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
  .sublp .l-center .section-title04 {
    font-size: 2.4rem;
    line-height: 1.4;
    margin: 0 !important;
  }
  .MainColumn .Page {
    padding-bottom: 0;
  }
}
/*------------------------------------------
    3box column settings
*/
.column-small {
  padding: var(--s2);
  background-color: #fff;
  box-shadow: 5px 25px 30px 0 rgba(38, 50, 102, 0.08);
}
.thb-box-full {
  /* padding-top: 5rem; */ /* アイコン領域を確保 */
  position: relative;
  width: calc(100% + var(--s4));
  margin-left: calc(var(--s2) * -1);
}
.thb-box-full::before {
  content: "";
  width: 100%;
  height: 9rem; /* ← 高さを固定 */
  background-repeat: no-repeat;
  background-position: center bottom; /* 下端を基準に揃える */
  background-size: auto 100%;
  position: absolute;
  top: -6rem;
  left: 0;
  z-index: 1;
}
.thb-box-full--kikaishiki::before {
  background-image: url("./img/kikaishiki_icon.png");
}
.thb-box-full--toshi::before {
  background-image: url("./img/za-nac-00002805_toshi_icon.png");
}
.thb-box-full--tochi::before {
  background-image: url("./img/tochi_icon.png");
}
/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
  .thb-box-full {
    padding-top: 5.4rem;
  }
  .thb-box-full::before {
    height: 7.6rem;
    top: -1rem;
  }
}
.sublp .arrow-title {
  margin: 0 0 var(--s3) !important;
  padding: var(--s2);
  font-size: 2.2rem;
  background-color: var(--main);
  text-align: center;
  line-height: 1.5;
  position: relative;
  color: #fff;
}

#sec01 .arrow-title,
#lower-recommend .arrow-title {
  padding-top: var(--s4);
}

.arrow-title-sub {
  white-space: nowrap;
  padding: var(--s1);
  margin-bottom: 0.8rem;
  background-color: #fff;
  color: var(--txt);
  margin-right: 0.5rem;
  font-size: clamp(2.8rem, 5vw, 3rem);
  font-weight: 700; /* 下層共通パーツは div なので太字が継承されない（2026-09-25） */
  line-height: 1;
  display: inline-block;
}
.arrow-title-small {
  font-size: 2.2rem;
}
.arrow {
  text-align: center;
  margin: var(--s2) 0 0;
}
/* 「例えばこんな方」ブロック（四隅カギ括弧枠） */
.thb-example {
  padding: var(--s2) var(--s1);
  --corner-len: 2rem;
  text-align: center;
}
.thb-example .m-title02 {
  margin-bottom: var(--s1);
  font-weight: bold;
}
.thb-listbox-bg-colored {
  padding-top: 2rem;
}
.thb-listbox-area {
  padding: var(--s2);
  background-color: rgba(255, 204, 25, 0.1);
  /* border-radius: 20px; */
  position: relative;
}
.sublp .thb-listbox-title {
  margin-top: -5.5rem;
  padding: var(--s1);
  background-color: #ffd22d;
  border-radius: 50vh;
  text-align: center;
  font-weight: 700;
}
.sublp .thb-listbox-subtitle {
  text-align: center;
  font-weight: 700;
}
/* ファイル冒頭の .sublp ul { padding: 0 }（詳細度0,1,1）に勝たせるため
   .sublp を付けて詳細度を上げる。ここが効かないと padding-left が無効になり、
   li::before のアイコンが薄黄ボックスの外（2.5rem 左）に出てしまう */
.sublp .thb-listbox-list {
  width: 100%;
  padding-left: 3rem;
}
.sublp .thb-listbox-list li {
  padding: var(--s1);
  line-height: 1.5;
  position: relative;
  font-size: 1.5rem;
}
.sublp .thb-listbox-list li::before {
  content: "";
  width: 2rem;
  height: 2rem;
  background: url("./img/list_icon.svg") no-repeat left center;
  background-size: contain;
  position: absolute;
  top: 1rem;
  left: -2rem;
}
.thb-listbox-list li span {
  margin-right: var(--s1);
  display: block;
  text-align: center;
}
/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
  .thb-listbox-area {
    padding: var(--s5) var(--s2) var(--s2) var(--s2);
  }
  .sublp .thb-listbox-list li {
    /*! font-size: 1.4rem; */
  }
  .thb-listbox-list--three li {
    width: calc((100% - var(--s2)) / 2);
  }
  .sublp .thb-listbox-title {
    width: 80%;
    margin: -5rem auto 0 auto;
    padding: var(--s1);
    font-size: 1.4rem;
    text-align: center;
  }
}
.sublp .title-catch {
  padding: 0.8rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  margin-top: var(--s3);
  color: var(--main);
  text-align: center;
}
.sublp .title-catch span {
  font-size: 1.6rem;
}

#sec04 .title-catch,
.sublp .twb-arrow-title {
  font-size: 2.3rem;
}

#sec04 .title-catch {
}

/*------------------------------------------
    sec02 section settings
*/
.bg-02 {
  margin-top: var(--s8);
  padding-block: var(--s8);
  background-color: var(--base-gray);
}
.company-box {
  position: relative;
}
/*------------------------------------------
    1box column settings
*/
.column-medium {
  padding: var(--s4);
  background-color: #fff;
}
#sec02 .column-medium {
  padding-top: 0;
}

.onb-box-full {
  width: calc(100% + var(--s8));
  margin-left: calc(var(--s4) * -1);
}
/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
  .column-medium {
    padding: var(--s2);
  }
  .onb-box-full {
    width: calc(100% + var(--s4));
    margin-left: calc(var(--s2) * -1);
  }
}
.onb-icon-title-frame {
  padding: 1.2rem 1.5rem;
  background-color: var(--main);
  position: relative;
}
.onb-icon-title-frame::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 1.5rem solid var(--main);
  border-right: 2.6rem solid transparent;
  border-left: 2.6rem solid transparent;
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
  bottom: -1.5rem;
}
.onb-icon-title-icon {
  width: 9rem;
  position: absolute;
  top: -3.4rem;
  left: 1.6rem;
  line-height: 0;
}
.onb-icon-title-icon img {
  width: 100%;
  height: auto;
}
.sublp .onb-icon-title {
  text-align: center;
  color: #fff;
  font-size: 3.8rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 !important;
}
.sublp .onb-icon-title small {
  font-size: 3rem;
}
.sublp .onb-icon-title-catch {
  margin-bottom: 0.8rem;
  font-size: 1.6rem;
  display: block;
  line-height: 1.5;
}
/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
  .onb-icon-title-frame {
    padding: var(--s2);
  }
  .sublp .onb-icon-title {
    font-size: 2.4rem;
  }
  .sublp .onb-icon-title small {
    font-size: 1.9rem;
  }
  .sublp .onb-icon-title-catch {
    padding-left: var(--s3);
    font-size: 1.4rem;
  }
  .onb-icon-title-icon {
    width: 5.4rem;
    top: -2rem;
    left: 0.8rem;
  }
  .sublp .onb-m-title4 {
    font-size: 2.2rem;
  }
}
/* 社名見出し（帯なし・黄色マーカー） */
.sublp .onb-m-title4 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--txt);
  margin: 0 !important;
}
.onb-m-title4 span {
  padding: 0 0.2em;
  background: linear-gradient(transparent 65%, #ffedab 65%);
  display: inline;
}
.sublp .onb-m-title5 {
  padding: var(--s3) var(--s2);
  background-color: var(--base-blue);
  line-height: 1.4;
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  color: var(--txt);
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.onb-m-title5 span {
  display: block;
}
.conclusion-area {
  padding: var(--s5) var(--s2) var(--s2) var(--s2);
  /* background-color: var(--base-gray); */
  background-image: url("./img/conclusion_bg.jpg");
  background-repeat: no-repeat;
  background-position: bottom center;
  /* contain だとブロックの縦横比によって画像が縮んで余白ができる
     （sec03のように横長のブロックで顕著）。cover で必ず全面に敷く */
  background-size: cover;
  position: relative;
}
/* Pマーク看板アイコン */
.conclusion-area::before {
  content: "";
  width: 3rem;
  height: 10rem;
  background: url("./img/point_icon.png") no-repeat center center / contain;
  position: absolute;
  top: 3rem;
  left: 20%;
}
/* .MainColumn .Page h5（0,2,1）に勝つ必要があるためクラス3つで指定 */
.sublp .conclusion-area .conclusion-title {
  margin-bottom: var(--s2);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--txt);
  text-align: center;
  line-height: 1.4;
  padding-bottom: 0 !important;
}
.sublp .conclusion-title-deco {
  position: relative;
}
.sublp .conclusion-title .border {
  padding-bottom: var(--s-2);
  border-bottom: 2px dashed var(--main);
  font-size: 3rem;
  color: var(--main);
  display: inline-block;
}
.conclusion-box {
  padding: var(--s2) var(--s5);
  position: relative;
  --corner-len: 3rem;
}

/* 四隅カギ括弧枠（--corner-len は各ブロック側で指定） */
.conclusion-box,
.thb-example {
  --corner-color: var(--main);
  --corner-w: 2px;
  background-image:
    linear-gradient(var(--corner-color), var(--corner-color)),
    linear-gradient(var(--corner-color), var(--corner-color)),
    linear-gradient(var(--corner-color), var(--corner-color)),
    linear-gradient(var(--corner-color), var(--corner-color)),
    linear-gradient(var(--corner-color), var(--corner-color)),
    linear-gradient(var(--corner-color), var(--corner-color)),
    linear-gradient(var(--corner-color), var(--corner-color)),
    linear-gradient(var(--corner-color), var(--corner-color));
  background-repeat: no-repeat;
  background-size:
    var(--corner-len) var(--corner-w),
    var(--corner-w) var(--corner-len),
    var(--corner-len) var(--corner-w),
    var(--corner-w) var(--corner-len),
    var(--corner-len) var(--corner-w),
    var(--corner-w) var(--corner-len),
    var(--corner-len) var(--corner-w),
    var(--corner-w) var(--corner-len);
  background-position:
    left top,
    left top,
    right top,
    right top,
    left bottom,
    left bottom,
    right bottom,
    right bottom;
  margin: 0 auto;
  width: 92%;
}
.conclusion-box__wht {
  font-size: 1.6rem;
  line-height: 1.75;
}
/* 本文内の強調（太字＋黄色アンダーライン） */
.sublp .marker-line {
  font-weight: 700;
  background-image: linear-gradient(
    transparent 78%,
    #ffcc19 78%,
    #ffcc19 86%,
    transparent 86%
  );
}
.sublp .conclusion-catch {
  color: var(--site-color01);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.conclusion-btn-area {
  z-index: 5;
}
.btn-conclusion {
  margin: 0 auto;
}
/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
  .sublp .onb-m-title5 {
    padding: var(--s2) var(--s1);
    font-size: 2rem;
  }
  .conclusion-area {
    padding: var(--s4) var(--s1);
    background: var(--base-gray);
  }
  .conclusion-area::before {
    width: 2.6rem;
    height: 7.2rem;
    top: 2rem;
    left: 5%;
  }
  .sublp .conclusion-area .conclusion-title {
    margin-bottom: var(--s2);
    font-size: 2rem;
    margin-top: 0;
  }
  .sublp .conclusion-title .border {
    font-size: 2.4rem;
  }
  .conclusion-box {
    padding: var(--s2);
    --corner-len: 2rem;
  }
  .conclusion-box__wht {
    font-size: 1.4rem;
  }
  .sublp .marker-line {
    background-image: linear-gradient(
      transparent 90%,
      #ffcc19 90%,
      #ffcc19 98%,
      transparent 98%
    );
  }
  .sublp .conclusion-catch {
    font-size: 1.8rem;
  }
  .btn-conclusion {
    width: 80%;
  }
}
.sublp .onb-m-title6 {
  padding: var(--s1) 0 var(--s1) 1.6rem;
  border-bottom: 1px solid #d8d8d8;
  line-height: 1.5;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--txt);
  position: relative;
  margin: 0 0 var(--s3) !important;
}
#sec03 .onb-m-title6 {
  margin-bottom: 0 !important;
}

.sublp .onb-m-title6::before {
  content: "";
  width: 3px;
  height: 100%;
  background-color: var(--sub);
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto 0;
}
.ex-contents {
  display: flex;
  align-items: stretch;
}
.ex-contents-left {
  width: 4rem;
  flex-shrink: 0;
  padding: 1.6rem 3.2rem;
  background-color: var(--main);
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  color: #fff;
}
.ex-contents-left::after {
  content: "";
  width: 1rem;
  height: 3rem;
  background-color: var(--main);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  right: -1rem;
}
.ex-contents-left span {
  width: 100%;
  font-size: 3rem;
  line-height: 1.2;
  text-align: center;
  display: block;
}
.ex-contents-right {
  width: 100%;
  /* flexアイテムの既定 min-width:auto だと、中の .scroll-caption（nowrap）の
     実幅までボックスが広がってしまう。0 にして縮めるようにする */
  min-width: 0;
  padding: var(--s4) var(--s2) var(--s2) var(--s4);
  background-color: var(--base-gray);
  border-left: none;
}
.ex-contents-right > * {
  min-width: 0;
}
.sublp .ex-contents-catch {
  color: var(--main);
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.5;
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
  .sublp .onb-m-title6 {
    font-size: 1.8rem;
  }
  .ex-contents-left {
    width: 3rem;
    padding: 1.6rem 0.8rem;
    font-size: 1rem;
  }
  .ex-contents-left::after {
    width: 1rem;
    height: 2rem;
    right: -1rem;
  }
  .ex-contents-left span {
    font-size: 2rem;
  }
  .sublp .ex-contents-catch {
    font-size: 1.8rem; /* 1.6rem → 1.8rem（2026-09-25） */
  }
  .ex-contents-right {
    padding: var(--s2);
  }
  /* 数字は <div><span>1</span></div> の div が flex の子で左に寄っていたので中央へ（2026-09-25） */
  .ex-contents-left {
    justify-content: center;
  }
}
.sublp .section-title07-frame {
  --s07-icon: 4.4rem; /* 虫めがねアイコンの幅 */
  --s07-illust: 26rem; /* 右のイラストの幅 */
  margin-top: 5rem;
  min-height: 11rem;
  padding-left: calc(var(--s07-icon) + var(--s1));
  padding-right: var(--s07-illust);
  position: relative;
}
/* 見出し左の虫めがねアイコン */
.sublp .section-title07-frame::before {
  content: "";
  width: var(--s07-icon);
  height: var(--s07-icon);
  background: url("./img/magnifying_glass.png") no-repeat left center / contain;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 767px) {
  .sublp .section-title07-frame::before {
    width: 8rem;
    height: 8rem;
    top: 2rem;
    left: -1rem;
  }
}

/* 見出し右のイラスト */
.sublp .section-title07-frame::after {
  content: "";
  width: var(--s07-illust);
  height: 100%;
  background: url("./img/za-nac-00002804_sec03_bg.png") no-repeat right top /
    contain;
  position: absolute;
  top: 0;
  right: 0;
}
.sublp .section-title07 {
  width: 100%;
  padding: 0;
  font-size: 2.4rem;
  font-weight: 700;
  text-align: left;
  line-height: 1.5;
  position: relative;
}
.sublp .section-title07 .border {
  padding-bottom: var(--s-2);
  border-bottom: 2px dashed var(--main);
  font-size: 4.5rem;
  color: var(--main);
  display: inline-block;
}
/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
  .sublp .section-title07-frame {
    --s07-icon: 3rem;
    --s07-illust: 0rem;
    min-height: 0;
    padding-right: 0;
    background-color: transparent;
  }
  #sec03 .section-title07-frame {
    margin-top: 0;
    padding-left: 0;
    position: relative;
  }
  .sublp .section-title07-frame::after {
    width: 50%;
    height: 12rem;
    background-position: center center;
    position: static;
    display: block;
    margin-top: var(--s2);
    position: absolute;
    top: -2rem;
    right: -2rem;
  }
  .sublp .section-title07 {
    padding: 0;
    font-size: 1.8rem;
  }
  .sublp .section-title07 .border {
    font-size: 2.4rem;
  }
}

.container-main .MainColumn {
  max-width: 1000px;
  width: 100%;
  float: none;
}

.acc-more-btn {
  max-width: 32rem;
  margin: var(--s5) auto;
  position: relative;
}
.acc-more-btn span {
  width: 100%;
  margin: var(--s5) auto;
  padding: 2rem 6rem 2rem 3rem;
  border: 0.1rem solid #707070;
  border-radius: 4rem;
  background: #ffedab url("./img/accordion-plus.svg") no-repeat 95% center;
  display: block;
  text-align: center;
  font-weight: 700;
  transform: translate(0, 0);
  transition: transform 0.3s;
  cursor: pointer;
  z-index: 1;
}
.acc-more-btn::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #d6d6d6;
  border-width: 0 1px 1px 0;
  transform: translate(0.6rem, 0.6rem);
  border-radius: 4rem;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.acc-more-btn:hover span {
  transform: translate(0.6rem, 0.6rem);
}
.acc-more-btn.is-open span {
  background: #ffedab url("./img/accordion-minus.svg") no-repeat 95% center;
}
.more-content {
  display: none;
}
/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
  .acc-more-btn span {
    transition: inherit;
    transform: none;
  }
  .acc-more-btn:hover span {
    transform: none;
  }
}
.onb-index01-frame {
  width: 100%;
  border: 5px solid #dbdbdb;
  border-radius: 20px;
}
.onb-index01-wrap {
  margin: 0 auto;
  padding: var(--s1) var(--s3);
  background-color: transparent;
  position: relative;
}
.onb-index01-title {
  padding: var(--s2) var(--s2) var(--s2) var(--s6);
  color: #333;
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1;
  position: relative;
  cursor: pointer;
}
.onb-index01-title::before {
  content: "";
  position: absolute;
  display: block;
  background: var(--site-color01);
  border-radius: 15px;
  width: 7px;
  height: 28px;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.onb-index01-title::after {
  content: "";
  width: 2.7rem;
  height: 2.7rem;
  background: url("./img/accordion-plus.svg") no-repeat 0 0 /100% auto;
  position: absolute;
  top: 50%;
  right: 1.8rem;
  transform: translate(0, -50%);
}
.onb-index01-title.is-open::after {
  background-image: url("./img/accordion-minus.svg");
}
.onb-index01-chapter {
  padding: var(--s2) var(--s2) var(--s2) var(--s4);
  font-weight: 700;
  border-top: 2px dotted #707070;
}
.onb-index01-chapter-h {
  margin: 0 0 0 var(--s2);
  font-size: 100%;
  line-height: 1.7;
  position: relative;
}
.onb-index01-chapter-h a {
  display: block;
  text-decoration: none;
}
.onb-index01-chapter-h a:hover {
  opacity: 0.6;
}
.onb-index01-chapter-h-two {
  margin-left: var(--s2);
  position: relative;
}
.onb-index01-chapter-h-three {
  margin-left: var(--s4);
  position: relative;
}
.onb-index01-chapter-h-two::before,
.onb-index01-chapter-h-three::before {
  position: absolute;
  top: 0;
  left: -1.5em;
}
.onb-index01-chapter-h-two::before {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 2rem;
  background-color: var(--site-color01);
  transform: translateY(-50%);
  top: 0.8em;
}
.onb-index01-chapter-h-three::before {
  content: "└";
}
.more-content {
  display: none;
}
.onb-index01-content {
  background-color: #fff;
  margin-top: 1rem;
}
ul.UserExample {
  text-align: center;
}
#sec01 .m-title02 .border,
#lower-recommend .m-title02 .border {
  font-size: 2rem;
  font-weight: bold;
  border-bottom: 2px solid var(--acc-yellow);
}
#sec01 .thb-listbox-subtitle,
#lower-recommend .thb-listbox-subtitle {
  margin: 0;
  font-size: 2.5rem;
  font-weight: bold;
  padding: var(--s1);
}

/*------------------------------------------------------------
    sec02 公式HPキャプチャ
*/
.onb-center-img {
  text-align: center;
}
/* 650px に変更（2026-10-15）。
   common_02.css の .MainColumn .Page img { max-width:100% }（0,2,1）に
   負けないよう .MainColumn .Page を付けて詳細度を上げている。
   画面が狭いときは枠幅まで縮める */
.MainColumn .Page .onb-center-img img {
  width: 65rem;
  max-width: 100%;
  height: auto;
}
#sec02 .onb-center-img {
  width: 65rem;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  #sec02 .onb-center-img {
    width: 80%;
  }
}

/*------------------------------------------------------------
    sec02 導入事例 Before / After ボックス
*/
.onb-casebox02-frame {
  padding: var(--s7) var(--s2) var(--s2);
  background-color: var(--base-gray);
  position: relative;
}
.onb-casebox02-frame.is-after {
  background-color: rgba(255, 204, 25, 0.1);
}
.onb-casebox02-sub {
  min-width: 8.9rem;
  padding: 0.4rem var(--s1);
  background-color: var(--main);
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
}
.onb-casebox02-sub.after {
  background-color: var(--acc-orange);
}
.l-onb-casebox02 {
  padding-bottom: var(--s2);
  border-bottom: 1px solid #d8d8d8;
  text-align: center;
}
.l-onb-casebox02:last-child {
  border-bottom: none;
}
.onb-casebox02-catch {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--txt);
}
.onb-casebox02-catch__unit {
  font-size: 1.6rem;
  font-weight: normal;
  margin-left: var(--s1);
}
.sublp .l-onb-casebox02 p {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  color: var(--txt);
}
.big-num {
  margin-right: 0.2em;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
}
.onb-casebox02-sub.after ~ .l-onb-casebox02 .big-num {
  color: var(--acc-orange);
}

/*------------------------------------------------------------
    sec02 企業情報テーブル
    ※冒頭のリセットで枠線が消えるため、.sublp 側で組み直す
*/
.sublp .company-box table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #d8d8d8;
  line-height: 1.6;
}
.sublp .company-box table th,
.sublp .company-box table td {
  padding: var(--s2);
  border-bottom: 1px solid #d8d8d8;
  font-size: 1.6rem;
  text-align: left;
  vertical-align: middle;
}
.sublp .company-box table th {
  width: 19rem;
  background-color: var(--base-blue);
  font-weight: 700;
}

/*------------------------------------------------------------
    sec02 参照元表記
*/
.sublp .reference {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.8;
  color: #8e8e8e;
}
.sublp .reference a {
  color: #8e8e8e;
}
.sublp .ex-contents-right .reference {
  text-align: right;
  font-size: 1.3rem;
  line-height: 1.3;
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
  .onb-casebox02-frame {
    padding: var(--s6) var(--s1) var(--s1);
  }
  .onb-casebox02-sub {
    min-width: 7rem;
    font-size: 1.6rem;
  }
  .onb-casebox02-catch,
  .sublp .l-onb-casebox02 p {
    font-size: 1.6rem;
  }
  .onb-casebox02-catch__unit {
    font-size: 1.4rem;
    display: block;
  }
  .big-num {
    font-size: 3rem;
  }
  .sublp .reference {
    font-size: 1.2rem;
  }
  .sublp .company-box table th,
  .sublp .company-box table td {
    padding: var(--s1);
    font-size: 1.4rem;
  }
  .sublp .company-box table th {
    width: 10rem;
  }
}

.bg-01 {
  --sheet-w: 192rem; /* 吹き出しの横幅（カンプ準拠。画面が狭ければ画面幅まで） */
  --arc: 10.8rem; /* 角丸半径 */
  --notch-w: 2.2rem; /* ノッチの片側の幅 */
  --notch-h: 2.5rem; /* ノッチの高さ */
  /* 親（.wrapper / .MainColumn の1000px）を左右に突き抜けて広げる */
  width: min(var(--sheet-w), 100vw);
  margin-inline: calc(50% - min(var(--sheet-w) / 2, 50vw));
  padding-bottom: var(--s8);
  margin-bottom: calc(var(--arc) * -1);
  background-color: #fff;
  border-radius: 0 0 var(--arc) var(--arc);
  position: relative;
  z-index: 1;
}
.bg-01::after {
  content: "";
  width: 0;
  height: 0;
  border-top: var(--notch-h) solid #fff;
  border-right: var(--notch-w) solid transparent;
  border-left: var(--notch-w) solid transparent;
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
  bottom: calc(var(--notch-h) * -1);
}
.bg-02 {
  background-color: #f2f3f4;
  /* 1pxの横線と縦線を描画 */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.9) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.9) 1px, transparent 1px);

  /* 1マスのサイズ（縦・横）を指定 */
  background-size: 40px 40px;
  /* sec01 の吹き出しの下に潜り込ませる（--arc と揃える） */
  margin-top: 0;
  padding-top: calc(5.8rem + var(--s8));
  /* 親（.wrapper / .MainColumn の1000px）を突き抜けて画面いっぱいに広げる。
     中身は .l-center が 100rem に収めるので、背景だけが全幅になる */
  margin-inline: calc(50% - 50vw);
}
.wrapper {
  max-width: 1000px !important;
  width: 100% !important;
}
.sublp .read {
  text-align: center;
}
#sec02 .btn-web {
  margin: var(--s2) auto;
}
.plsb-root {
  background: var(--base-gray);
  border: 2px solid var(--main);
  position: relative;
  padding: var(--s2) var(--s5);
  margin-top: 0;
}
.plsb-root * {
  box-sizing: border-box;
}
.plsb-head {
  position: relative;
  margin: calc(var(--s2) * -1) calc(var(--s2) * -1) 0;
  background: var(--main, #12a1be);
  border-radius: calc(var(--plsb-radius) - 1px) calc(var(--plsb-radius) - 1px) 0
    0;
  padding: var(--s2);
  text-align: center;
}
/* 下向きの三角（.plsb-notch の代わりにヘッダー自身から出す） */
.plsb-head::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 1.6rem solid transparent;
  border-right: 1.6rem solid transparent;
  border-top: 1.4rem solid var(--main, #12a1be);
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
  bottom: -1.4rem;
}
/* .plsb-root h3 に負けないよう詳細度を上げる */
.plsb-root .plsb-head h3 {
  margin: 0;
  color: #fff;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.5;
}
.plsb-notch {
  display: none;
}
.plsb-body {
  padding-top: var(--s5);
}

.plsb-root h3 {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
  line-height: 1.5;
  text-align: center;
  color: var(--txt, #3d3a2b);
}
.plsb-root p {
  margin: 0 0 0.9rem;
}
.plsb-root .plsb-lead {
  font-size: 1.6rem;
}

/* ---- 入力フォーム：ラベル左／入力右の行レイアウト ---- */
.plsb-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.plsb-rowlabel {
  flex: 0 0 36rem;
  /* font-size: 1.8rem; */
  font-weight: 700;
  color: var(--txt);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}
.plsb-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sub);
  flex-shrink: 0;
}
.plsb-rowinput {
  flex: 1 1 220px;
  min-width: 160px;
}
.plsb-root input[type="number"],
.plsb-root select {
  width: 100%;
  padding: 1rem 1.2rem;
  text-align: right;
  /* font-size: 1.6rem; */
  font-family: inherit;
  color: var(--txt);
  background: #fff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
}
.plsb-root select {
  /* padding-right: 36px; */
  /* url() の後ろに no-repeat が付いていて宣言ごと無効になっていた（2026-09-25） */
  background-image: url("./img/arr-down-blue.svg");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px;
  border: 1px solid #cccccc;
  text-align: center;
}
.plsb-root input[type="number"]:focus,
.plsb-root select:focus {
  outline: 2px solid var(--main, #12a1be);
  outline-offset: 1px;
}

.plsb-inlinenote {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 1.3rem;
  color: var(--plsb-sub);
  cursor: pointer;
  margin: -8px 0 18px;
  text-align: right;
}
/* common_02.css の input リセット（appearance:none / border:none / background:none）
   でチェックボックスが完全に見えなくなるため、ここで戻す */
.plsb-root input[type="checkbox"] {
  -webkit-appearance: checkbox;
  appearance: checkbox;
  background: initial;
  border: initial;
}
.plsb-inlinenote input {
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--main, #12a1be);
}

.plsb-root .plsb-taxnote {
  font-size: 1.2rem;
  color: var(--plsb-sub);
  text-align: left;
  line-height: 1.7;
  margin: 0 0 18px calc(36rem + 16px);
}

.plsb-root .plsb-err {
  font-size: 1.4rem;
  color: var(--plsb-ng);
  margin: 0 0 1rem;
  display: none;
  text-align: center;
}

/* ---- 結果ボックス（角かっこ装飾つき） ---- */
.plsb-result {
  position: relative;
  background: rgba(255, 204, 25, 0.1);
  border-radius: var(--plsb-radius);
  padding: 28px 20px 20px;
  margin: 28px 0 24px;
  transition: opacity 0.2s;
}
.plsb-corner {
  position: absolute;
  width: 16px;
  height: 16px;
}
.plsb-corner::before,
.plsb-corner::after {
  content: "";
  position: absolute;
  background: var(--main, #12a1be);
}
.plsb-corner::before {
  width: 100%;
  height: 2px;
}
.plsb-corner::after {
  width: 2px;
  height: 100%;
}
.plsb-corner-tl {
  top: 8px;
  left: 8px;
}
.plsb-corner-tl::before,
.plsb-corner-tl::after {
  top: 0;
  left: 0;
}
.plsb-corner-tr {
  top: 8px;
  right: 8px;
}
.plsb-corner-tr::before {
  top: 0;
  right: 0;
}
.plsb-corner-tr::after {
  top: 0;
  right: 0;
}
.plsb-corner-bl {
  bottom: 8px;
  left: 8px;
}
.plsb-corner-bl::before {
  bottom: 0;
  left: 0;
}
.plsb-corner-bl::after {
  bottom: 0;
  left: 0;
}
.plsb-corner-br {
  bottom: 8px;
  right: 8px;
}
.plsb-corner-br::before {
  bottom: 0;
  right: 0;
}
.plsb-corner-br::after {
  bottom: 0;
  right: 0;
}

.plsb-metrics {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.plsb-m {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  text-align: center;
  flex-wrap: wrap;
}
.plsb-m .plsb-k {
  font-size: 1.7rem;
  color: var(--txt);
  margin: 0;
}
.plsb-m .plsb-v {
  font-size: 4rem;
  font-weight: 700;
  margin: 0;
  color: var(--acc-orange);
  line-height: 1.2;
}
.plsb-root .plsb-judge {
  font-size: 1.2rem;
  color: var(--plsb-sub);
  text-align: center;
  margin: 0;
  line-height: 1.7;
}

.plsb-root .plsb-offer {
  font-size: 1.4rem;
  margin: 0 0 1.6rem;
  color: var(--plsb-sub);
}
.plsb-root .plsb-offer.plsb-is-ok {
  color: var(--plsb-ok);
}
.plsb-root .plsb-offer.plsb-is-ng {
  color: var(--plsb-ng);
}

/* ---- 提示賃料比較セクション ---- */
.plsb-root .plsb-compare-desc {
  font-size: 1.3rem;
  color: var(--plsb-sub);
  text-align: center;
  margin: 0 0 1.2rem;
}
.plsb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 0.6rem;
}
.plsb-field label {
  display: block;
  font-size: 1.4rem;
  color: var(--txt, #3d3a2b);
  margin-bottom: 6px;
}

.plsb-root .plsb-sheet {
  background: var(--base-gray, #fafafa);
  border: 1px solid var(--plsb-line);
  border-radius: var(--plsb-radius);
  padding: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.4rem;
  line-height: 1.9;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 1rem;
}
.plsb-copy {
  display: inline-block;
  padding: 9px 18px;
  font-size: 1.4rem;
  font-family: inherit;
  color: #fff;
  background: var(--main, #12a1be);
  border: none;
  border-radius: var(--plsb-radius);
  cursor: pointer;
  min-height: 44px;
}
.plsb-copy:hover {
  opacity: 0.88;
}
.plsb-root .plsb-note {
  font-size: 1.4rem;
  color: var(--plsb-sub);
  margin: 0 0 0.8rem;
}
.plsb-hr {
  border: 0;
  border-top: 1px solid var(--plsb-line);
  margin: 2rem 0;
}

@media (max-width: 600px) {
  .plsb-root {
    padding: 28px 20px 24px;
  }
  .plsb-head h3 {
    font-size: 1.8rem;
  }
  .plsb-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
  }
  .plsb-rowlabel {
    flex-basis: auto;
  }
  /* .plsb-row が縦並びになると flex-basis が「高さ」として効いてしまい、
     入力欄が 220px の高さに膨らむ。SPでは basis を無効にして横幅100%にする */
  .plsb-rowinput {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }
  .plsb-inlinenote {
    justify-content: flex-start;
    text-align: left;
    margin-top: -4px;
  }
  .plsb-m {
    justify-content: space-between;
  }
  .plsb-m .plsb-v {
    font-size: 2.1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .plsb-metrics,
  .plsb-result {
    transition: none;
  }
}
.scroll-caption {
  display: block;
  max-width: 100%;
  padding: 0 0 0.3rem 0;
  text-align: left;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
}

/*------------------------------------------------------------
    sec03：「税理士に確認すること」ブロック（薄水色・写真なし）
    sec02 の .conclusion-area は写真背景のままなので、
    modifier で上書きする
*/
.conclusion-area--light {
  padding: var(--s6) var(--s4) var(--s5);
  background-color: var(--base-blue);
  background-image: none;
}

#sec03 .conclusion-area--light {
  padding: var(--s2) var(--s4) var(--s8);
}

/* sec02 用の P マークアイコンは出さない（タイトル側に付け直す） */
.conclusion-area--light::before {
  content: none;
}
/* タイトル：「税理士に」＋「確認すること」を1行に、左上にPマーク */
.sublp .conclusion-area--light .conclusion-title {
  margin-bottom: var(--s4);
  font-size: 2.2rem;
}
.conclusion-area--light .conclusion-title-deco {
  padding-left: 4.4rem;
  display: inline-block;
}
.conclusion-area--light .conclusion-title-deco::before {
  content: "";
  width: 3rem;
  height: 9rem;
  background: url("./img/point_icon.png") no-repeat center bottom / contain;
  position: absolute;
  left: 0.6rem;
  bottom: -0.4rem;
}
.sublp .conclusion-area--light .conclusion-title .border {
  margin-left: 0.4rem;
  font-size: 3.2rem;
}
/* カギ括弧枠を消す（background-image を打ち消す） */
.conclusion-box--plain {
  padding: 0;
  background-image: none;
}

/*------------------------------------------------------------
    sec03：チェックリスト（2カラム）
    .sublp ul li（0,1,2）に勝たせるため、クラス2つで指定している
*/
.sublp .check-list-two {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s2) var(--s3);
  list-style: none;
}
.sublp .check-list-item {
  padding: 0 0 0 3rem;
  background: url("./img/check-list_icon.svg") no-repeat left 0.25em / 1.8rem
    1.8rem;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--txt);
}

/*------------------------------------------------------------
    sec03：ページ上部へ戻すボタン
*/
.btn-up {
  max-width: 44rem;
  width: 100%;
  margin: var(--s6) auto 0;
  position: relative;
}
/* 左上に重ねる機械式駐車場のイラスト */
.btn-up::before {
  content: "";
  width: 7.4rem;
  height: 7.6rem;
  background: url("./img/kikaishiki_icon.png") no-repeat center bottom / contain;
  position: absolute;
  left: -1.2rem;
  top: -5.2rem;
  z-index: 2;
  pointer-events: none;
}
.sublp .btn-up a {
  min-height: 8.4rem;
  padding: var(--s2) 6rem var(--s2) var(--s4);
  background-color: var(--sub);
  border-radius: 1rem;
  box-shadow: 0 6px 14px rgba(38, 50, 102, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
  position: relative;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
/* 右端の上向きアロー */
.sublp .btn-up a::after {
  content: "";
  width: 2.2rem;
  height: 2.2rem;
  background: url("./img/arr-up.svg") no-repeat center center / contain;
  position: absolute;
  top: 50%;
  right: 2.4rem;
  transform: translateY(-50%);
}
.btn-up:hover a {
  transform: translateY(-0.3rem);
  box-shadow: 0 10px 18px rgba(38, 50, 102, 0.22);
}

/*------------------------------------------------------------
    sec03：試算結果の単位（円・%）だけ小さく
*/
.plsb-m .plsb-v .plsb-u {
  font-size: 2rem;
  font-weight: 700;
  margin-left: 0.1em;
  color: var(--txt);
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
  .conclusion-area--light {
    padding: var(--s5) var(--s2) var(--s4);
  }
  #sec03 .conclusion-area--light {
    padding: var(--s2) var(--s2) var(--s4);
  }

  .sublp .conclusion-area--light .conclusion-title {
    margin-bottom: var(--s3);
    font-size: 1.8rem;
  }
  #sec03 .sublp .conclusion-area--light .conclusion-title {
    margin: 0 var(--s2) var(--s2);
  }

  .conclusion-area--light .conclusion-title-deco {
    padding-left: var(--s1);
  }
  .conclusion-area--light .conclusion-title-deco::before {
    width: 2.2rem;
    height: 6.4rem;
    left: 0.2rem;
  }
  #sec03 .conclusion-area--light .conclusion-title-deco::before {
    left: -1rem;
    top: -2rem;
  }
  .sublp .conclusion-area--light .conclusion-title .border {
    font-size: 2.4rem;
  }
  .sublp .check-list-two {
    grid-template-columns: 1fr;
    gap: var(--s1);
  }
  .sublp .check-list-item {
    padding-left: 2.6rem;
    background-size: 1.6rem 1.6rem;
    font-size: 1.4rem;
  }
  .btn-up {
    width: 90%;
    margin-top: var(--s5);
  }
  .btn-up::before {
    width: 5.8rem;
    height: 6rem;
    left: -0.6rem;
    top: -4rem;
  }
  .sublp .btn-up a {
    min-height: 7.2rem;
    padding: var(--s2) 4.4rem var(--s2) var(--s2);
    font-size: 1.4rem;
  }
  .sublp .btn-up a::after {
    width: 1.8rem;
    height: 1.8rem;
    right: 1.6rem;
  }
}
/*------------------------------------------
    2box column settings
*/
.column-medium {
  padding: var(--s4);
  box-shadow: 5px 25px 30px 0 rgba(38, 50, 102, 0.08);
}
.twb-box-full {
  width: calc(100% + var(--s8));
  margin-left: calc(var(--s4) * -1);
}
/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
  .column-medium {
    padding: var(--s2);
  }
  .twb-box-full {
    width: calc(100% + var(--s4));
    margin-left: calc(var(--s2) * -1);
  }
}
.twb-arrow-title {
  margin-bottom: 2.8rem;
  padding: var(--s2);
  font-size: 1.8rem;
  font-weight: 700;
  background-color: #f16915;
  text-align: center;
  line-height: 1.5;
  position: relative;
  color: #fff;
}
.twb-arrow-title::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 2rem solid transparent;
  border-left: 2rem solid transparent;
  border-right: 2rem solid #f16915;
  border-bottom: 2rem solid #f16915;
  transform: translateX(-50%) rotate(45deg);
  position: absolute;
  left: 50%;
  bottom: -1.3rem;
}
.pc-fix-banner04 {
  width: 24rem;
  position: fixed;
  right: 0;
  bottom: 1rem;
  z-index: 50;
}
.pc-fix-banner04-color1 {
  background-color: var(--site-color01);
}
.pc-fix-banner04-text {
  padding: var(--s2);
  color: #fff;
  position: relative;
}
.pc-fix-banner04-text::after {
  content: "";
  width: 0.1rem;
  height: 0.1rem;
  border-top: 0.5rem solid transparent;
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid #fff;
  border-bottom: 0.5rem solid #fff;
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
}
.pc-fix-banner04-text a {
  color: #fff;
  text-decoration: none;
  display: block;
}
.pc-fix-banner04-text a:hover {
  opacity: 0.7;
}
.pc-fix-banner04-text p {
  margin: 0;
  font-size: 1.4rem;
  text-align: center;
}
.pc-fix-banner04-text .text-small {
  font-size: 1.2rem;
  line-height: 1.5;
}
/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
  .pc-fix-banner04 {
    display: none;
  }
}
.sp-fix-banner01 {
  display: none;
}
/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
  .sp-fix-banner01 {
    display: block;
    width: 70%;
    background-color: var(--site-color05);
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 50;
  }
  .sp-fix-banner01-text {
    padding: var(--s2);
    color: #fff;
    position: relative;
  }
  .sp-fix-banner01-text p {
    margin: 0;
    font-size: 1.4rem;
  }
  .sp-fix-banner01-text a {
    padding-right: 1.6rem;
    color: #fff;
    text-decoration: none;
    background: url("./img/arrow-01-wht-right.svg") no-repeat right center /
      1rem auto;
    display: block;
  }
  .sp-fix-banner01-text a:hover {
    opacity: 0.7;
  }
}
/* ==================================================
   Main Visual
================================================== */
.p-mv {
  position: relative;
  z-index: 0;
  margin-inline: calc(50% - 50vw);
  overflow-x: clip;
  overflow-y: visible;
  margin-top: 0;
  padding-top: calc(-5.2rem + var(--s8, 0px));
  padding-bottom: 2rem;
}

.p-mv__inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--s3) 5%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* --- コンテンツエリア（PC） --- */
.p-mv__content {
  width: 55%;
}

.p-mv__target {
  position: relative;
  display: inline-block;
  padding: 10px 16px;
  margin-bottom: 24px;
  font-weight: bold;
  font-size: 2.5rem;
  /* color: #333; */
  /* letter-spacing: 0.05em; */
}

/* サブタイトルの四隅のカギカッコ装飾 */
.p-mv__target::before,
.p-mv__target::after,
.p-mv__target-inner::before,
.p-mv__target-inner::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: solid #18a4b8;
  border-width: 0;
}
.p-mv__target::before {
  top: 0;
  left: 0;
  border-top-width: 2px;
  border-left-width: 2px;
}
.p-mv__target::after {
  bottom: 0;
  right: 0;
  border-bottom-width: 2px;
  border-right-width: 2px;
}
.p-mv__target-inner::before {
  top: 0;
  right: 0;
  border-top-width: 2px;
  border-right-width: 2px;
}
.p-mv__target-inner::after {
  bottom: 0;
  left: 0;
  border-bottom-width: 2px;
  border-left-width: 2px;
}

.p-mv__title {
  margin: 0 0 24px 0;
  line-height: 1.4;
}

.p-mv__title-main {
  display: inline-block;
  background-color: #fff;
  color: #18a4b8;
  font-size: clamp(1.6rem, 5vw, 5rem);
  font-weight: bold;
  padding: 0 var(--s1);
  margin-bottom: 1.2rem;
}
.p-mv__title-main-bk {
  color: var(--txt);
  font-size: clamp(2.8rem, 2.78vw, 4rem);
}

.p-mv__title-sub {
  display: inline-block;
  background-color: #fff;
  /* color: #333; */
  font-size: clamp(1.4rem, 4vw, 4rem);
  font-weight: bold;
  padding: 0 var(--s1);
}

.p-mv__desc {
  /* font-size: 1rem; */
  line-height: 2;
  /* color: #333; */
  margin: 0;
}

.p-mv__desc-highlight {
  color: #d85d26;
  font-weight: bold;
}

/* --- 画像エリア（PC） --- */
.p-mv__img {
  width: 50%;
  text-align: center;
  align-self: flex-end;
  margin-bottom: -80px;
  position: absolute;
  top: 0;
  right: 0;
}

.p-mv__img img {
  width: 100%;
  max-width: 600px;
  height: auto;
  vertical-align: bottom;
}
.p-mv::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f2f3f4;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.9) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.9) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: -1;
}

@media screen and (max-width: 767px) {
  .p-mv {
    padding-bottom: 40px;
  }

  .p-mv__inner {
    flex-direction: column;
  }

  /* SPでは画像を上に、テキストを下に配置 */
  .p-mv__img {
    order: 1;
    width: 100%;
    margin-bottom: 32px;
  }

  .p-mv__content {
    order: 2;
    width: 100%;
  }

  /* SP用の余白やサイズ調整 */
  .p-mv__target {
    font-size: 1.05rem;
    margin-bottom: 16px;
    padding: 8px 14px;
  }

  .p-mv__target::before,
  .p-mv__target::after,
  .p-mv__target-inner::before,
  .p-mv__target-inner::after {
    width: 10px;
    height: 10px;
  }

  .p-mv__title-main {
    padding: 6px 12px;
    margin-bottom: 8px;
  }

  .p-mv__title-sub {
    padding: 6px 12px;
  }

  .p-mv__desc {
    font-size: 0.95rem;
  }
  .p-mv::before {
    height: 100%;
  }
}

/* ==================================================
   下層Main Visual　
================================================== */
/*------------------------------------------------------------
    下層ページ用メインビジュアル（下層.jpg 実測）

    ※このサイトは :root { font-size: 62.5% } なので 1rem = 10px。
      16px基準で書くと全部62.5%に縮むので注意。

    デザインの寸法（1440px時）
      帯          … 全幅・高さ158px・背景#f2f3f5＋40pxグリッド
      テキスト群  … 画面中央
      イラスト    … 画面右端に寄せ、下端は帯の下端と一致、
                    上は帯から少しはみ出す（高さ165px）
*/
.p-mv-sub {
  height: 15.8rem;
  margin-top: 0;
  padding: 0;
  position: relative;
  z-index: 0;
  /* このMVは header_lower.php から呼ばれ、.wrapper より前＝body直下に出る。
     親がすでに全幅なので calc(50% - 50vw) は 0 になり実質no-op。
     将来 .wrapper の中に移した場合の保険として残してある */
  margin-inline: calc(50% - 50vw);
  /* イラストが上にはみ出すので縦は見せる。横スクロールだけ止める */
  overflow-x: clip;
  overflow-y: visible;
}

/* グレーのグリッド背景 */
.p-mv-sub::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #f2f3f5;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.9) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.9) 1px, transparent 1px);
  background-size: 40px 40px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

/* テキスト群は画面中央に置く。
   position は付けない。付けるとイラストの absolute の基準が
   ここになってしまい、画面右端まで寄せられなくなる */
.p-mv-sub__inner {
  width: 100%;
  height: 100%;
  padding: 0 var(--s3);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 幅を100%にして text-align で中央に置く。
   width:auto だと flex アイテムが max-content 幅になり、
   中の inline-block が中央に来ないことがある */
.p-mv-sub__content {
  width: 100%;
  text-align: center;
}

/*---------------------------------------------
    「管理組合・土地オーナー向け」（カギ括弧枠）
*/
/* display:inline-block だと下のタイトルと横並びになってしまう。
   display:table なら「中身の幅にフィットするブロック」になり、
   margin auto で中央に置けて、タイトルは次の行に落ちる */
.p-mv-sub__target {
  margin: 0 auto 0.8rem;
  padding: 0.6rem 2rem;
  display: table;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--txt);
  letter-spacing: 0.05em;
  position: relative;
}
.p-mv-sub__target::before,
.p-mv-sub__target::after,
.p-mv-sub__target-inner::before,
.p-mv-sub__target-inner::after {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  border: solid var(--main);
  border-width: 0;
  position: absolute;
}
.p-mv-sub__target::before {
  top: 0;
  left: 0;
  border-top-width: 2px;
  border-left-width: 2px;
}
.p-mv-sub__target::after {
  bottom: 0;
  right: 0;
  border-bottom-width: 2px;
  border-right-width: 2px;
}
.p-mv-sub__target-inner::before {
  top: 0;
  right: 0;
  border-top-width: 2px;
  border-right-width: 2px;
}
.p-mv-sub__target-inner::after {
  bottom: 0;
  left: 0;
  border-bottom-width: 2px;
  border-left-width: 2px;
}

/*---------------------------------------------
    「駐車場サブリース会社選定ガイド」（白地の1行）
*/
.p-mv-sub__title {
  margin: 0;
  padding: 0.8rem 1.4rem;
  background-color: #fff;
  display: inline-block;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.p-mv-sub__title-main {
  color: var(--main);
}
.p-mv-sub__title-sub {
  color: var(--txt);
}

/*---------------------------------------------
    イラスト
    画面右端に寄せ、下端を帯の下端に合わせる。
    帯（158px）より少し高くして上にはみ出させる
*/
.p-mv-sub__img {
  width: auto;
  height: 16.5rem;
  position: absolute;
  right: 0;
  bottom: 0;
  line-height: 0;
  pointer-events: none;
}
/* .MainColumn .Page img { max-width:100%; height:auto }（0,2,1）に
   勝たせるため、クラス3つで指定する */
.p-mv-sub .p-mv-sub__img img {
  width: auto;
  height: 100%;
  max-width: none;
  vertical-align: bottom;
}

/*------------------------------------------------------------
    SP settings
    帯の高さは中身にまかせ、イラストはテキストの下に回す
*/
@media screen and (max-width: 767px) {
  .p-mv-sub {
    height: auto;
    padding: var(--s3) 0;
    overflow: hidden;
  }
  .p-mv-sub__inner {
    height: auto;
    padding: 0 var(--s2);
    flex-direction: column;
    gap: var(--s1);
  }
  .p-mv-sub__content {
    width: 100%;
  }
  .p-mv-sub__target {
    margin: 0 auto 0.4rem;
    padding: 0.5rem 1.4rem;
    font-size: 1.3rem;
  }
  .p-mv-sub__title {
    padding: 0.6rem 1.2rem;
    font-size: 1.9rem;
  }
  /* SPは横幅が足りないのでイラストは出さない。
     テキストだけの帯にする */
  .p-mv-sub__img {
    display: none;
  }
}

/*
---------------------------------------------
    navigation02 ※TOP、下層共通
*/
.header-area-upper {
  padding: var(--s1);
  text-align: right;
}
.header-title {
  font-size: 1.2rem;
  display: inline-block;
  position: relative;
}
.header-title::before {
  content: "PR";
  padding: 0.2rem;
  color: #fff;
  background-color: #333;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: -2.4rem;
}
.header-title a {
  text-decoration: none;
}
.header-title a:hover {
  text-decoration: underline;
}
.gnavi-btn-close {
  display: none;
}
.toggle-content {
  display: none;
}
.gnavi-ctrl {
  transition:
    opacity 0.6s,
    visibility 0.6s;
  opacity: 0;
  visibility: hidden;
}
.gnavi-ctrl.is-show {
  opacity: 1;
  visibility: visible;
}
#low-header .gnavi-ctrl {
  opacity: 1;
  visibility: visible;
}
.gnavi-btn {
  width: var(--s7);
  height: var(--s6);
  background: #333;
  display: block;
  position: fixed;
  top: var(--s3);
  right: 0;
  z-index: 200;
  cursor: pointer;
}
.gnavi-btn span {
  width: var(--s4);
  height: 0.2rem;
  display: inline-block;
  background: #fff;
  position: absolute;
  left: 1.2rem;
  transform: translate(0, -50%);
  transition:
    transform 0.4s,
    opacity 0.4s;
}
.gnavi-btn span:nth-of-type(1) {
  top: 1.7rem;
}
.gnavi-btn span:nth-of-type(2) {
  top: 2.4rem;
}
.gnavi-btn span:nth-of-type(3) {
  top: 3.1rem;
}
.gnavi-btn.is-active span:nth-of-type(1) {
  transform: translateY(0.7rem) rotate(-45deg);
}
.gnavi-btn.is-active span:nth-of-type(2) {
  opacity: 0;
}
.gnavi-btn.is-active span:nth-of-type(3) {
  transform: translateY(-0.7rem) rotate(45deg);
}
.gnavi-btn-close {
  width: 80%;
  margin: 0 auto;
  padding: var(--s2);
  background: #333;
  display: block;
  text-align: center;
}
.gnavi-btn-close__inner {
  padding: 0 0 0 var(--s3);
  display: inline-block;
  color: #fff;
  font-weight: 700;
  position: relative;
}
.gnavi-btn-close__inner::before {
  content: "";
  width: 1em;
  height: 0.2rem;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%) rotate(45deg);
}
.gnavi-btn-close__inner::after {
  content: "";
  width: 1em;
  height: 0.2rem;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%) rotate(135deg);
}
.gnavi-area {
  width: 100%;
  max-width: 37.5rem;
  height: 100vh;
  padding: var(--s3) var(--s1) var(--s10);
  display: block;
  background: #f5f5f5;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  transform: translateX(100%);
  transition:
    transform 0.8s ease,
    opacity 0.8s ease;
  opacity: 0;
}
.gnavi-title {
  min-height: var(--s6);
  margin: 0 var(--s8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.gnavi-pc {
  display: none;
}
.gnavi-list {
  border-bottom: 1px solid #333;
  position: relative;
}
.gnavi-list li {
  padding-left: 0;
}
.gnavi-list__item::before {
  display: none;
}
.gnavi-list__link {
  width: 100%;
  margin: 0 auto;
  padding: var(--s2) var(--s4) var(--s2) var(--s2);
  border-top: 1px solid #333;
  display: block;
  font-weight: 700;
  line-height: 1.4; /* 2 → 1.4（2026-09-25） */
  text-decoration: none;
  position: relative;
}
.gnavi-list__link::after {
  content: "";
  width: 1.4rem;
  height: 1.4rem;
  background: url("img/arrow-01-black-right.svg") no-repeat center/100% auto;
  position: absolute;
  top: 50%;
  right: var(--s2);
  transform: translate(0, -50%) rotate(0);
  transition: transform 0.3s;
}
.gnavi-list__link--toggle::after {
  background-image: url("img/arrow-01-black-down.svg");
}
.gnavi-list__link--toggle.is-open::after {
  transform: translate(0, -50%) rotate(180deg);
}
.gnavi-list__sub {
  width: 100%;
  background: #fff;
}
.gnavi-list__low .gnavi-list__link {
  padding: var(--s2) var(--s4) var(--s2) var(--s4);
}
.gnavi-list__low .gnavi-list__link::after {
  content: "└";
  background: none;
  transform: translateY(-50%);
  position: absolute;
  top: 40%;
  left: 1rem;
}
.is-gnavi-open .gnavi-area {
  opacity: 1;
  transform: translateX(0);
}

/*==============================================================
    下層ページ デザイン調整（下層.jpg 準拠）
    目次アコーディオンと「もっと見る」ボタン。
    ファイル末尾の上書きブロックなので、消せば元に戻る。
==============================================================*/

/*---------------------------------------------
    目次アコーディオン
    デザイン：幅670px・薄グレー地・枠線なし・角丸小
             右の＋/−は --main。画像を使わずCSSで描く
*/
.onb-index01-frame {
  max-width: 67rem;
  margin-inline: auto;
  background-color: var(--base-gray);
  border: none;
  border-radius: 0.8rem;
}
.onb-index01-wrap {
  padding: var(--s2); /* 0 → var(--s2)（2026-09-25） */
}
.onb-index01-title {
  padding: var(
    --s2
  ); /* 2.8rem 6.4rem 2.8rem 2.8rem → var(--s2)（2026-09-25） */
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--txt);
  position: relative;
}
/* ＋／−は画像を使わずCSSで描く。
   ::before＝縦棒（開いたら消して「−」にする）
   ::after ＝横棒（常に出る）
   元は ::before を左の青いバーに使っていたが、デザインに無いので転用した */
.onb-index01-title::before {
  content: "";
  width: 2px;
  height: 2.2rem;
  margin: 0;
  background: var(--main);
  border-radius: 1px;
  position: absolute;
  top: 50%;
  right: 3.8rem;
  left: auto;
  bottom: auto;
  transform: translateY(-50%);
  transition: opacity 0.3s;
}
.onb-index01-title.is-open::before {
  opacity: 0;
}
.onb-index01-title::after {
  content: "";
  width: 2.2rem;
  height: 2px;
  background: var(--main);
  background-image: none;
  border-radius: 1px;
  position: absolute;
  top: 50%;
  right: 2.8rem;
  transform: translateY(-50%);
}
.onb-index01-chapter {
  padding: 2.4rem 2.8rem 2.8rem;
  border-top: 2px solid #c9cacf;
}
.onb-index01-chapter-h {
  margin: 0;
  padding-left: 2.4rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.8;
}
.onb-index01-chapter-h-two,
.onb-index01-chapter-h-three {
  margin-left: 0;
}
.onb-index01-chapter-h-two::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--sub);
  position: absolute;
  top: 1rem;
  left: 0;
  transform: none;
}

/*---------------------------------------------
    「もっと見る」ボタン
    デザイン：薄グレー地・角丸15px・右に青い＋・影板
*/
.acc-more-btn {
  max-width: 37rem;
  margin: var(--s5) auto;
}
.acc-more-btn span {
  margin: 0;
  padding: 2rem 5.6rem 2rem 3rem;
  background: #f2f3f5;
  border: none;
  border-radius: 15px;
  color: var(--txt);
  position: relative;
}
/* ＋の横棒 */
.acc-more-btn span::before {
  content: "";
  width: 1.8rem;
  height: 2px;
  background: var(--main);
  position: absolute;
  top: 50%;
  right: 2.4rem;
  transform: translateY(-50%);
}
/* ＋の縦棒。開いたら消して「−」にする */
.acc-more-btn span::after {
  content: "";
  width: 2px;
  height: 1.8rem;
  background: var(--main);
  position: absolute;
  top: 50%;
  right: 3.2rem;
  transform: translateY(-50%);
  transition: opacity 0.3s;
}
.acc-more-btn.is-open span::after {
  opacity: 0;
}
.acc-more-btn::before {
  background-color: #d6d6d6;
  border-radius: 15px;
  transform: translate(0.5rem, 0.5rem);
}
/* 目次の中身。元は白地だったが、デザインは枠全体が薄グレー1色 */
.onb-index01-content {
  background-color: transparent;
  margin-top: 0;
}
/* 区切り線はデザインでは左右に余白が入る */
.onb-index01-chapter {
  margin-inline: 2.8rem;
  padding-inline: 0;
}
/* 項目はリンクだが、デザインでは青くせず本文色の太字 */
/* common.css の .MainColumn .Page a:link（0,2,1）に勝たせるためクラス3つ */
.onb-index01-chapter .onb-index01-chapter-h a,
.onb-index01-chapter .onb-index01-chapter-h a:link,
.onb-index01-chapter .onb-index01-chapter-h a:visited {
  color: var(--txt);
  text-decoration: none;
}
.onb-index01-chapter .onb-index01-chapter-h a:hover {
  color: var(--main);
}

/*==============================================================
    ハンバーガーメニュー 配色
    ブルー＝--main（開くボタン・Closeボタン）
    グレー＝--base-gray（ドロワーの地）
    リンクは下線なし・文字色 --txt
==============================================================*/
.gnavi-area {
  background: var(--base-gray);
}
.gnavi-btn {
  background: var(--main);
}
.gnavi-btn-close {
  background: var(--main);
}

/* common.css の a:link（詳細度0,1,1）が
   color:#1d7d72 / text-decoration:underline / font-size:14px を
   当てているため、クラス2つ＋擬似クラスで上書きする */
.gnavi-area a:link,
.gnavi-area a:visited {
  color: var(--txt);
  font-size: inherit;
  text-decoration: none;
}
.gnavi-area a:hover {
  color: var(--main);
  text-decoration: none;
}

/*==============================================================
    追従バナー（下層.jpg / SP_TOP.jpg 実測）

    PC … 220×127px・画面右下に寄せる
    SP … 画面下端に固定、右のページトップ用に余白を残す
    どちらも js が .is-show を付けるまで出ない
==============================================================*/

/*---------------------------------------------
    PC
*/
.pc-fix-banner04 {
  width: 22rem;
  height: 12.7rem;
  right: 0;
  bottom: 2rem;
  position: fixed;
  z-index: 50;
  /* 初期状態は隠す。js が .is-show を付けたら出る */
  opacity: 0;
  visibility: hidden;
  transform: translateX(1.5rem);
  transition:
    opacity 0.4s ease,
    visibility 0.4s ease,
    transform 0.4s ease;
}
.pc-fix-banner04.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.pc-fix-banner04 a {
  width: 100%;
  height: 100%;
  padding: 1.2rem 1rem 1rem;
  background: url("./img/bnnPC_bg.png") no-repeat center center / cover;
  box-shadow: 0 2px 10px rgba(38, 50, 102, 0.25);
  display: block;
  color: #fff;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.pc-fix-banner04 a:hover {
  opacity: 0.85;
}
/* 左下の機械式駐車場イラスト */
.pc-fix-banner04 a::after {
  content: "";
  width: 5.4rem;
  height: 5.4rem;
  background: url("./img/kikaishiki_icon.png") no-repeat center bottom / contain;
  position: absolute;
  left: 0.6rem;
  bottom: 0.2rem;
}
.pc-fix-banner04-lead {
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.pc-fix-banner04-title {
  margin: 0;
  padding: 0.2rem 0.4rem;
  background: #fff;
  color: var(--main);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}
.pc-fix-banner04-num {
  width: 7.6rem;
  margin: 0.6rem 0 0 auto;
  padding: 0.2rem 0.6rem;
  background: #fff;
  color: var(--main);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  position: relative;
  z-index: 1;
}
.pc-fix-banner04-num .num {
  font-size: 2.6rem;
  letter-spacing: 0;
}

/*---------------------------------------------
    SP
*/
.sp-fix-banner01 {
  display: none;
}

@media screen and (max-width: 767px) {
  .pc-fix-banner04 {
    display: none;
  }
  .sp-fix-banner01 {
    width: calc(100% - 7.2rem); /* 右のページトップボタンぶんを空ける */
    left: 0;
    bottom: 0;
    position: fixed;
    z-index: 50;
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition:
      opacity 0.4s ease,
      visibility 0.4s ease,
      transform 0.4s ease;
  }
  .sp-fix-banner01.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .sp-fix-banner01 a {
    min-height: 5.6rem;
    padding: 0.8rem 1rem 0.8rem 5.4rem;
    /* 角丸はカンプどおり右上のみ（2026-10-15）
       bnnSP_bg.png（600×133）は右端に約16pxの透明な余白と画像自体の小さい角丸があり、
       cover だと右側の形が崩れていた。
       透明部分を除いた幅（584px）がボックス幅になるよう拡大して左寄せし、
       右上だけ border-radius で切る。高さが足りない場合に備えて下地に近い色を敷く */
    background: #4a8cc2 url("./img/bnnSP_bg.png") no-repeat left center /
      calc(100% * 600 / 584) auto;
    border-radius: 0 1.2rem 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    position: relative;
    overflow: hidden;
  }
  /* 左の機械式駐車場イラスト */
  .sp-fix-banner01 a::after {
    content: "";
    width: 4.4rem;
    height: 4.4rem;
    background: url("./img/kikaishiki_icon.png") no-repeat center center /
      contain;
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
  }
  .sp-fix-banner01-lead {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
  }
  .sp-fix-banner01-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
  }
}

/*==============================================================
    SP の見栄え調整（375px 実測ベース）
    ・横スクロールの原因を潰す
    ・PC用の文字サイズ／余白がそのまま効いている箇所を縮める
    ファイル末尾の上書きブロックなので、消せば元に戻る
==============================================================*/
@media screen and (max-width: 767px) {
  /*---------------------------------------------
      1. 横スクロールの原因
  */
  /* テーブル：th の固定幅16rem＋nowrap でSPでははみ出す。
     デザインどおり2カラムは維持しつつ、幅は中身にまかせる */
  .MainColumn .Page table th,
  .MainColumn .Page table td {
    padding: 1.2rem 1rem;
    font-size: 1.4rem;
  }
  .MainColumn .Page table th {
    width: 9rem;
    white-space: normal;
  }
  /* 長いURLなどで押し広げられないように */
  .sublp table td {
    word-break: break-all;
  }

  /*---------------------------------------------
      2. アーチぶんの余白
      .bg-01 の白いアーチ（--arc 10.8rem）が
      SPでも108pxのまま効いて、sec02の上に172pxの余白ができていた
  */
  .bg-01 {
    --arc: 5rem;
  }
  /* 吹き出しの両端が欠ける対策（2026-10-15）
     margin-top: var(--s4) だと .bg-02 の上端が角丸（5rem）の途中から
     始まり、角丸の下側 1.8rem ぶんしかグレーが見えず両端が切れていた。
     margin-top を 0 にして角丸の下に全部潜り込ませ、
     見出しの位置は変わらないように padding-top に s4 を足す */
  .bg-02 {
    margin-top: 0;
    padding-block: calc(5rem + var(--s3) + var(--s4)) var(--s5);
  }

  /*---------------------------------------------
      3. 文字サイズ
      PC用の指定がそのまま効いて、SPで25〜30pxになっていた箇所
  */
  /* #sec01 付きの指定（詳細度1,1,0）に勝つため、こちらもidで受ける */
  #sec01 .thb-listbox-subtitle,
  #lower-recommend .thb-listbox-subtitle,
  .sublp .thb-listbox-subtitle {
    font-size: 2.1rem;
  }
  /* .plsb-root .plsb-head h3（0,2,1）が3remを当てているので、
     同じ形で受けて後ろから上書きする。
     既存の (max-width:600px) .plsb-head h3 は詳細度負けで効いていなかった */
  .plsb-root .plsb-head h3,
  .plsb-root .plsb-h {
    font-size: 1.8rem;
    padding: 0;
  }
  .sublp .onb-m-title4 span {
    font-size: 2.2rem;
  }

  #sec01 .m-title02 .border,
  #lower-recommend .m-title02 .border {
    font-size: 2rem;
  }

  /*---------------------------------------------
      4. 余白
  */
  .thb-box-full {
    padding-top: 4.4rem;
  }
  .onb-casebox02-frame {
    padding-top: 5rem;
  }
  .thb-listbox-area {
    padding: var(--s2);
  }

  /*---------------------------------------------
      5. 試算ツールの注記
      PCはラベル幅ぶん字下げしているが、SPは行が縦積みなので不要。
      残っていると本文が画面外（左マージン376px）へ飛ぶ
  */
  .plsb-root .plsb-taxnote {
    margin-left: 0;
  }

  /*---------------------------------------------
      6. sec03の見出し（2pxだけはみ出していた）
  */
  .sublp .section-title07 {
    width: auto;
    overflow-wrap: anywhere;
  }
  #sec03 .section-title07 {
    margin-left: 0;
    margin-bottom: 0;
    padding-left: var(--s1);
    margin-top: var(--s5);
    padding-bottom: 0;
  }
}

/*==============================================================
    sec04 サブリースサービス会社一覧

    common.css の a:link（color:#1d7d72 / underline / 14px）が
    見出しやリンクに当たってしまうので、
    クラス2つ＋擬似クラスで受けて打ち消している
==============================================================*/

/* 見出しがリンクになっているぶんの下線・色を戻す */
.sublp .section-title04 a,
.sublp .section-title04 a:link,
.sublp .section-title04 a:visited {
  color: inherit;
  font-size: inherit;
  text-decoration: none;
}
.sublp .section-title04 a:hover {
  opacity: 0.7;
}

/*---------------------------------------------
    会社名の見出し（水色の帯・白文字・右に白アロー）
    .column-small の padding（var(--s2)）を打ち消して
    カードの左右いっぱいに広げる
*/
#sec04 .title-catch {
  width: calc(100% + var(--s4));
  margin: calc(var(--s2) * -1) calc(var(--s2) * -1) 0;
  padding: 1.2rem 4rem 1.2rem 2rem;
  background-color: var(--main);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  position: relative;
}

@media screen and (max-width: 767px) {
  #sec04 .title-catch {
    font-size: 2rem;
    padding: var(--s3) 4rem;
  }
}
#sec04 .title-catch a,
#sec04 .title-catch a:link,
#sec04 .title-catch a:visited {
  color: #fff;
  font-size: inherit;
  text-decoration: none;
  display: block;
}
#sec04 .title-catch a:hover {
  opacity: 0.8;
}
#sec04 .title-catch::after {
  content: "";
  width: 1.1rem;
  height: 1.7rem;
  background: url("./img/arr-white.svg") no-repeat center center / contain;
  position: absolute;
  top: 50%;
  right: 1.8rem;
  transform: translateY(-50%);
  pointer-events: none;
}

/*---------------------------------------------
    テキストリンク（右に青い丸アロー）
*/
#sec04 .btn-link {
  /* リンクのかたまりはカードの右端に寄せる。
     中の2行テキストは左揃えのままにしたいので、a 側で左に戻す */
  text-align: right;
}
#sec04 .btn-link a,
#sec04 .btn-link a:link,
#sec04 .btn-link a:visited {
  margin: 0;
  padding: 0 3.4rem 0 0;
  background: none;
  color: var(--txt);
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  text-align: left;
  display: inline-block;
  position: relative;
}
#sec04 .btn-link a::after {
  content: "";
  width: 2.5rem;
  height: 2.5rem;
  background: url("./img/arr-right-blue.svg") no-repeat center center / contain;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
#sec04 .btn-link a:hover {
  opacity: 0.7;
  text-decoration: none;
}

/*---------------------------------------------
    カード本体
*/
#sec04 .column-small {
  padding: var(--s2) var(--s2) var(--s4);
  overflow: hidden;
}
#sec04 .caption {
  color: var(--caption-txt);
  font-size: 1.2rem;
  line-height: 1.6;
  text-align: center;
}

/*---------------------------------------------
    カード内のテーブル
    3カラムに収めるので th は狭く、文字も小さく
*/
#sec04 table {
  margin-block: 0;
  table-layout: fixed;
  width: 100%;
}
#sec04 table th,
#sec04 table td {
  padding: 1rem 1.2rem;
  font-size: 1.3rem;
  line-height: 1.6;
}
#sec04 table th {
  width: 7rem;
  white-space: normal;
}
#sec04 table td {
  word-break: break-all;
}

/*---------------------------------------------
    sec06 地域別 駐車場サブリース会社
    .twb-arrow-title の帯。オレンジ（#f16915）から --main へ。
    .sublp h1〜h6 のリセット（0,1,1）と .MainColumn .Page h3（0,2,1）が
    背景・margin・padding を上書きしてくるので、クラス3つ（0,3,0）で
    指定し直す。矢印は下向き三角 → 右端の白アローに変更。
*/
.sublp .twb-box-full .twb-arrow-title {
  margin: 0 0 var(--s3);
  padding: 1.2rem 4rem 1.2rem 2rem;
  background-color: var(--main);
  color: #fff;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  position: relative;
}
@media screen and (max-width: 767px) {
  .sublp .twb-box-full .twb-arrow-title {
    font-size: 2rem;
  }
}
.sublp .twb-box-full .twb-arrow-title a,
.sublp .twb-box-full .twb-arrow-title a:link,
.sublp .twb-box-full .twb-arrow-title a:visited {
  color: #fff;
  font-size: inherit;
  text-decoration: none;
  display: block;
}
.sublp .twb-box-full .twb-arrow-title a:hover {
  opacity: 0.8;
}
.sublp .twb-box-full .twb-arrow-title::after {
  content: "";
  width: 1.1rem;
  height: 1.7rem;
  border: none;
  background: url("./img/arr-white.svg") no-repeat center center / contain;
  transform: translateY(-50%);
  top: 50%;
  right: 1.8rem;
  bottom: auto;
  left: auto;
  pointer-events: none;
}

/*---------------------------------------------
    カテゴリトップMV（.p-mv）のSP調整　SP_TOP.jpg 実測

    元のSP指定は 1rem = 16px 前提で書かれていて、
    このサイト（1rem = 10px）では文字が軒並み小さくなっていた。
    さらに .p-mv__img が position:absolute のままで、
    テキストの上に画像が重なっていた。

    デザインの構成（375px時）
      イラスト  … 全幅・MVの最上部（高さ約223px）
      テキスト群… イラストの下。左右1.3remのみ、左揃え
      ターゲット… カギカッコ枠のみ中央寄せ
*/
@media screen and (max-width: 767px) {
  .p-mv {
    padding-top: 0;
    padding-bottom: 4rem;
  }

  .p-mv__inner {
    padding: 0;
  }

  /* 絶対配置を解除してイラストを通常の流れに戻す */
  .p-mv__img {
    position: static;
    order: 1;
    width: 100%;
    margin: 0;
  }

  .p-mv__content {
    order: 2;
    width: 100%;
    margin-top: 1.3rem;
    padding-inline: 1.3rem;
  }

  /* カギカッコ枠だけ中央寄せ（display:table で幅を内容に合わせる） */
  .p-mv__target {
    display: table;
    margin: 0 auto 2rem;
    padding: 1.3rem;
    font-size: 1.8rem;
    line-height: 1;
    letter-spacing: 0.08em;
  }

  .p-mv__title {
    margin-bottom: 1.4rem;
    line-height: 1.4;
  }
  /* br をやめて2行を縦積みにし、行間をmarginで管理する */
  .p-mv__title br {
    display: none;
  }
  .p-mv__title-sub {
    display: table;
    padding: 0.3rem 0.8rem;
  }

  .p-mv__title-main {
    margin-bottom: 1.2rem;
    font-size: 3.2rem;
    padding: 0.3rem 0.8rem;
    display: inline-block;
  }
  .p-mv__title-sub {
    padding-block: 0.5rem;
    font-size: 2.8rem;
  }

  .p-mv__desc {
    font-size: 1.5rem;
    line-height: 2;
  }
}

/*---------------------------------------------
    /sublease/company_list/ のパンくずを非表示

    <body> にクラスが無いのでページ単位の出し分けができない。
    が、カテゴリトップのMV（.p-mv）は company_list でしか出力されず、
    パンくずを含む .wrapper の直前の兄弟になっている。
    これを手がかりにして、このページのときだけ隠す。
    下層ページは .p-mv-sub なので影響しない。
*/
.p-mv ~ .wrapper #pankuzu {
  display: none;
}

/*---------------------------------------------
    SPフッターのアコーディオン 矢印

    common_02.css の footer 用SP指定が
    arrow-01-black-down.svg / arrow-01-black-right.svg を
    参照しているが、img/ に存在しないので何も出ない。
    実在する arr-down-blue.svg / arr-right-blue.svg に差し替える。
    開いているときは下向きアイコンを180度回して上向きにする。
*/
@media screen and (max-width: 767px) {
  .footer-menu-title__link::after {
    content: "";
    width: 2.2rem;
    height: 2.2rem;
    background: url("./img/arr-down-blue.svg") no-repeat center center / contain;
    position: absolute;
    top: 50%;
    right: var(--s2);
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s;
  }
  /* 開いているときは上向き */
  .footer-menu-title__link.is-open::after {
    transform: translateY(-50%) rotate(180deg);
  }
  /* サイトマップだけは開閉しないので右向き */
  .footer-menu-title__link--not-toggle::after {
    background: url("./img/arr-right-blue.svg") no-repeat center center /
      contain;
    transform: translateY(-50%);
  }

  .footer-menu__link {
    background: none;
    padding-right: var(--s5);
    position: relative;
  }
  .footer-menu__link::after {
    content: "";
    width: 2rem;
    height: 2rem;
    background: url("./img/arr-right-blue.svg") no-repeat center center /
      contain;
    position: absolute;
    top: 50%;
    right: var(--s2);
    transform: translateY(-50%);
  }
}

/*---------------------------------------------
    フッターのリンク配色

    既存サイトの a:link（0,1,1 / 緑・下線・14px固定）が
    フッターのクラス指定に勝ってしまうので打ち消す。
    ハンバーガーメニューと同じ扱い。
*/
.footer-area a:link,
.footer-area a:visited {
  color: var(--txt);
  font-size: inherit;
  text-decoration: none;
}
/* 下段（--main の帯）は白抜き */
.footer-bottom a:link,
.footer-bottom a:visited {
  color: #fff;
}

/*---------------------------------------------
    sec03 試算ギミック 見出しまわり　TOP.jpg 実測

    1) 虫めがねは「左に置くアイコン」ではなく、
       見出しの背面に敷く大きな透かし。4.4rem → 15.8rem。
       画像の実寸は 167×186 なので縦横比を合わせる。
    2) 右のイラスト（896×489）は 26rem × 高さ100% の
       contain 指定で潰れていた。42rem × 23rem にする。
       本文カラムが1000pxしかなく見出しと並べると入りきらないので、
       右に4remだけはみ出させる（1100px時でも横スクロールは出ない）。
    3) 青帯（.plsb-head）の左右が空くのは、
       .plsb-root の padding（var(--s5)）に対して
       打ち消しの margin が var(--s2) しかなかったため。
*/
@media screen and (min-width: 768px) {
  .sublp .section-title07-frame {
    --s07-icon: 15.8rem;
    --s07-icon-h: 17.6rem;
    --s07-illust: 38rem;
    /* 見出しとリード文の間が空きすぎていたので、イラストの高さに
       合わせた min-height（23.8rem）をやめる。イラストは絶対配置なので
       リード文の右側（padding-right で空けた部分）に重なるだけ */
    min-height: 0;
    padding-left: 0;
    padding-right: var(--s07-illust);
  }
  /* 見出しの背面に敷く透かし */
  .sublp .section-title07-frame::before {
    width: var(--s07-icon);
    height: var(--s07-icon-h);
    background-position: left top;
    top: -0.8rem;
    left: -1.7rem;
    z-index: 0;
  }
  /* .MainColumn .Page h2（0,2,1）の margin/padding に負けていて、
     見出しの使える幅が 32px 削られて2行に折れていた */
  .sublp .section-title07-frame .section-title07 {
    margin: 0;
    padding: 0;
    z-index: 1;
  }
  /* 見出し直後のリード文も、見出しと同じ幅に収める
     （イラストの下に回り込ませない） */
  .sublp .section-title07-frame + p {
    padding-right: var(--s07-illust, 38rem);
    /* 見出し下の余白を元の約1/3（gap 1.6rem + 3.2rem = 4.8rem）にする */
    margin-top: 3.2rem;
  }

  /* 右のイラスト */
  .sublp .section-title07-frame::after {
    width: 42rem;
    height: 23rem;
    background-position: right top;
    top: 0;
    right: -13rem;
  }
}

/* 青帯をボックスの左右いっぱいまで広げる */
.plsb-head {
  margin-inline: calc(var(--s5) * -1);
}
/* 600px以下は .plsb-root の padding が 28px 20px なので、
   打ち消す量もそれに合わせる（remはSPだとvw連動で10px固定ではないため、
   元の指定と同じpxで揃える） */
@media (max-width: 600px) {
  .plsb-head {
    margin: -28px -20px 0;
  }
}

/*---------------------------------------------
    sec04 の背景（--base-gray を画面いっぱいに）

    sec02（.bg-02）と同じく、親（.wrapper / .MainColumn の1000px）を
    margin-inline で突き抜けさせる。中身は .l-center が
    100rem に収めるので、背景だけが全幅になる。
*/
#sec04 {
  margin-inline: calc(50% - 50vw);
  padding-block: var(--s8);
  background-color: var(--base-gray);
}

/*---------------------------------------------
    lower_bottom（#lower-recommend）の背景

    .bg-01（sec01の白いアーチ）から .bg-02（sec02のグリッド柄）に
    変更したが、.bg-02 の padding-top は sec01 のアーチに
    潜り込ませるための値（10.8rem + --s8）なので、ここでは戻す。
*/
#lower-recommend.bg-02 {
  /* 上の余白をさらに詰める：var(--s10) → var(--s2)（2026-10-02） */
  margin-top: var(--s2);
  padding-block: var(--s8);
}
@media screen and (max-width: 767px) {
  #lower-recommend.bg-02 {
    /* 上の余白をさらに詰める：var(--s6) → var(--s1)（2026-10-02） */
    margin-top: var(--s1);
    padding-block: var(--s5);
  }
}

/*---------------------------------------------
    TOPへ戻るボタン

    .page-top は opacity:0 で、.js-show が付いたときだけ出る作り。
    その js が無かったので表示されていなかった（js側で対応）。
    ここでは画像（pagetop.png 140×140）を枠に合わせて縮め、
    追従バナーより前面に出す。
*/
.page-top {
  z-index: 60;
}
.page-top__link img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 767px) {
  /* SPバナーは width: calc(100% - 7.2rem) で右を空けてあるので、
     そこに収まるサイズにする */
  .page-top {
    width: 5.6rem;
    height: 5.6rem;
    right: 0.8rem;
    bottom: 0.8rem;
  }
}

/*=============================================
    下層テンプレートの崩れ対応　下層.jpg 実測
==============================================*/

/*---------------------------------------------
    1) リストの黒い点

    旧テーマの common.css に
      .Page ul li { background: url(img/list.png) no-repeat 0 3px }
    があり（0,1,2）、青い丸の ::before と二重に出ていた。
    クラスなしの ul だけ画像を止める（0,3,2 で勝つ）。
    .thb-listbox-list など、クラス付きのリストには影響しない。
*/
.MainColumn .Page ul:not([class]) li {
  background-image: none;
}
/* ol の数字の角丸は削除（2026-09-25 デザイン修正で四角に） */

/*---------------------------------------------
    2) 目次のリストマーカー

    ・li にも旧テーマの list.png が乗っていた
    ・青い丸は var(--site-color01) 指定だが、この変数は
      どこにも定義されていないので背景色ごと無効になっていた
    デザインは 8px の青い丸。
*/
.MainColumn .Page .onb-index01-chapter li {
  background-image: none;
}
.onb-index01-chapter-h-two::before {
  width: 0.8rem;
  height: 0.8rem;
  background-color: var(--sub);
}

/*---------------------------------------------
    3) h5 / h6

    旧テーマの
      .Page h5 { background: url(img/H456.png); color:#01460c; border-bottom: ... }
    がそのまま出ていた（緑の見出し）。
    下層.jpg に h5 の指定は無いので、装飾なしの太字にそろえる。
*/
.MainColumn .Page h5:not([class]),
.MainColumn .Page h6:not([class]) {
  background: none;
  border: none;
  color: inherit;
  font-weight: 700;
  line-height: 1.5;
}
.MainColumn .Page h5:not([class]) {
  margin-block: 3.2rem 1.6rem;
  padding: 0;
  font-size: 2rem;
}
.MainColumn .Page h6:not([class]) {
  margin-block: 2.8rem 1.4rem;
  padding: 0;
  font-size: 1.8rem;
}

/*---------------------------------------------
    4) 「もっと見る」ボタン

    CSSは .acc-more-btn span を前提に書かれているが、
    マークアップは <div class="acc-more-btn js-more-btn">もっと見る</div> で
    span が無いため、何も当たっていなかった。
    デザイン：薄グレーの角丸・右に青い＋・右下に影
*/
.MainColumn .Page .acc-more-btn {
  width: 100%;
  max-width: 36.8rem;
  margin: var(--s5) auto;
  padding: 1.9rem 5.6rem 1.9rem 3.2rem;
  border: none;
  border-radius: 0.8rem;
  background: #f5f5f5;
  box-shadow: 0.5rem 0.5rem 0.8rem rgba(0, 0, 0, 0.12);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  position: relative;
}
/* ＋（開いているときは −）。画像を使わずCSSの2本線で描く。
   ::before は旧CSSでグレーのずれブロックに使われていたので、
   そこで指定されている値を全部上書きして作り直す */
.MainColumn .Page .acc-more-btn::before,
.MainColumn .Page .acc-more-btn::after {
  content: "";
  display: block;
  width: 1.6rem;
  height: 0.2rem;
  background-color: var(--main);
  border: none;
  border-radius: 0;
  position: absolute;
  top: 50%;
  right: 2.4rem;
  left: auto;
  bottom: auto;
  z-index: 1;
  transform: translateY(-50%);
}
/* 縦棒。閉じているときだけ出して「＋」にする */
.MainColumn .Page .acc-more-btn::before {
  transform: translateY(-50%) rotate(90deg);
  transition: opacity 0.3s;
}
.MainColumn .Page .acc-more-btn.is-open::before {
  opacity: 0;
}

/*---------------------------------------------
    5) テキストリンク（.btn-link）

    存在しない arrow-01-black-right.svg を参照していて
    矢印が出ず、下線だけが残っていた。
    sec04 のテキストリンクと同じ見せ方にそろえる。
*/
.MainColumn .Page .btn-link a,
.MainColumn .Page .btn-link a:link,
.MainColumn .Page .btn-link a:visited {
  padding: 0 3.4rem 0 0;
  background: none;
  color: var(--txt);
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
  text-align: left;
  display: inline-block;
  position: relative;
}
.MainColumn .Page .btn-link a::after {
  content: "";
  width: 2.5rem;
  height: 2.5rem;
  background: url("./img/arr-right-blue.svg") no-repeat center center / contain;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.MainColumn .Page .btn-link a:hover {
  opacity: 0.7;
  text-decoration: none;
}

/*=============================================
    下層テンプレート SP調整
==============================================*/

/*---------------------------------------------
    h3 に残っていた旧テーマの装飾を消す

    common.css の
      .Page h3 { background: url(img/H456.png); border-bottom: 1px solid #01460c }
    が効いていて、Pアイコンの左に緑の線が出ていた。
    h2 / h4 も同じ理由で背景・罫線を打ち消しておく
    （h2 の青バーと下罫線、h4 の水色帯は
      common_02.css 側で別途指定しているので消えない）。
*/
.MainColumn .Page h3:not([class]) {
  background: none;
  border: none;
}
.MainColumn .Page h2:not([class]),
.MainColumn .Page h4:not([class]) {
  background-image: none;
}
/* 旧テーマは見出しの文字色を #01460c（濃い緑）にしている。
   ぱっと見は黒だが実際は緑なので、本文と同じ色に戻す */
.MainColumn .Page h1:not([class]),
.MainColumn .Page h2:not([class]),
.MainColumn .Page h3:not([class]),
.MainColumn .Page h4:not([class]),
.MainColumn .Page h5:not([class]),
.MainColumn .Page h6:not([class]) {
  color: var(--txt);
}

/*---------------------------------------------
    ol の左インデント

    common.css の .Page ol { margin: 10px 10px 1em 20px } が効いていて、
    ul より 20px 内側に入っていた。ul と同じ位置にそろえる。
*/
.MainColumn .Page ul:not([class]),
.MainColumn .Page ol:not([class]) {
  margin: 0 0 1em;
  padding-left: 0;
}
/* li 側にも .Page ol li { margin-left: 20px } が残っている */
.MainColumn .Page ol:not([class]) li {
  margin-left: 0;
}

/*---------------------------------------------
    ボタン5種：角丸をデザインどおりの完全な丸に
    （元は 15px の角丸だった）
*/
.btn-web,
.btn-web::after,
.btn-web a,
.btn-ancher,
.btn-ancher::after,
.btn-ancher a,
.btn-internal,
.btn-internal::after,
.btn-internal a,
.btn-tel,
.btn-tel::after,
.btn-tel a {
  border-radius: 10rem;
}

/*---------------------------------------------
    ページ内リンクボタンは下向き∨

    マークアップが .btn-internal btn-internal2 なので
    .btn-ancher の指定は当たらず、内部リンクと同じ＞になっていた。
*/
.btn-internal.btn-internal2 a::after {
  border-top: none;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(0, -70%) rotate(45deg);
}

@media screen and (max-width: 767px) {
  /*---------------------------------------------
      見出しのサイズ
  */
  .MainColumn .Page h1:not([class]) {
    font-size: 2.8rem;
  }
  .MainColumn .Page h2:not([class]) {
    font-size: 2.5rem;
  }
  .MainColumn .Page h3:not([class]) {
    padding-left: 3.4rem;
    font-size: 2.2rem;
  }
  /* Pマークの標識アイコン。PC用の5.4remのままだと
     見出しの高さより背が高く、ポールが上下にはみ出す */
  .MainColumn .Page h3:not([class])::before {
    width: 2rem;
    height: 4rem;
    bottom: -0.4rem;
  }
  .MainColumn .Page h4:not([class]) {
    font-size: 2rem;
  }

  /*---------------------------------------------
      .sp-table-vertical のテーブルは th/td を縦積みで全幅に

      common_02.css に .sp-table-vertical th/td { width:100%; display:block }
      があるが、SPの横スクロール対策で入れた
      .MainColumn .Page table th { width: 9rem }（0,2,2）に
      詳細度で負けて効いていなかった。
      .l-scroll-x（横スクロールするテーブル）はこれまでどおり2カラムのまま。
  */
  .MainColumn .Page .sp-table-vertical table th,
  .MainColumn .Page .sp-table-vertical table td {
    width: 100%;
    display: block;
    white-space: normal;
    text-align: left;
  }
}

/*---------------------------------------------
    SPのボタンをPCと同じ見た目にそろえる

    旧テーマの edit.css がSPだけ
      .btn-internal a, .btn a, .btn-arrow a,
      .btn-tel a, .btn-link-sp a { border: 4px solid #eee;
                                    box-shadow: 1px 2px 4px #333;
                                    font-size: 16px; padding: 10px 22px; }
    を当てていて、白い枠線と黒い影が乗っていた。
    さらに padding が左右非対称（左8px／右24px）になり、
    文字が左に寄って矢印と近づいていた。
*/
@media screen and (max-width: 767px) {
  .MainColumn .Page .btn-web a,
  .MainColumn .Page .btn-ancher a,
  .MainColumn .Page .btn-internal a,
  .MainColumn .Page .btn-tel a {
    border: none;
    box-shadow: none;
    font-size: inherit;
    /* PCと同じ余白に戻す */
    padding: var(--s2) var(--s6) var(--s2) var(--s5);
  }
  /* 電話ボタンだけアイコンが左なので左右逆 */
  .MainColumn .Page .btn-tel a {
    padding: var(--s2) var(--s5) var(--s2) var(--s6);
  }
}

/*=============================================
    PC：全幅背景・追従バナー・ページの先頭へ
==============================================*/

/*---------------------------------------------
    1) 全幅背景が右で切れる件

    margin-inline: calc(50% - 50vw) は「親が画面中央にある」前提。
    ところが実際の入れ子は

      .wrapper        1000px・画面中央
      .container-main  900px・左寄せ（右100pxはサイドバー用の余白）
      .Page            margin-left 10px / padding 10px

    となっていて、本文の中心が画面中心より 45px 左にずれている。
    そのぶん左右のマイナスマージンを非対称にして打ち消す。
    （ずれ幅はwrapperとサイドバー枠の固定値から決まるので常に45px）

    SPはこの入れ子が解除されて中央に来るので補正しない。
    .p-mv / .p-mv-sub は body 直下なので元から影響なし。
*/
@media screen and (min-width: 768px) {
  :root {
    --bleed-fix: 4.5rem;
  }
  .bg-02,
  #sec04 {
    margin-left: calc(50% - 50vw + var(--bleed-fix));
    margin-right: calc(50% - 50vw - var(--bleed-fix));
  }
  .bg-01 {
    margin-left: calc(50% - min(var(--sheet-w) / 2, 50vw) + var(--bleed-fix));
    margin-right: calc(50% - min(var(--sheet-w) / 2, 50vw) - var(--bleed-fix));
  }
}

/*---------------------------------------------
    2) 追従バナーとページトップボタンの重なり（PCのみ）

    .page-top は right 3.2rem / bottom 5.6rem / 6rem角なので
    下端から 11.6rem を占める。バナーをその上に逃がす。
*/
@media screen and (min-width: 768px) {
  .pc-fix-banner04 {
    bottom: 12.6rem;
  }
}

/*---------------------------------------------
    3) 「ページの先頭へ」（.bptlink）を非表示

    category.php / single.php の共通パーツで、sublease系では
    追従のページトップボタンがあるので不要。
    本文（.sublp）の後ろに来る .bptlink だけを対象にするので、
    他カテゴリのページには影響しない。
*/
.sublp ~ .bptlink {
  display: none;
}

/*---------------------------------------------
    lower_bottom の上端に sec01 と同じ吹き出し

    sec01 は「白いシート（.bg-01）の下端を丸めて、
    中央に下向きの三角を付ける」という作りで、
    その下に .bg-02 のグレーが潜り込んでいる。

    lower_bottom は上が記事本文（白）なので、
    セクション自身の上端に白いシートと三角を重ねて同じ形を作る。
    寸法は .bg-01 と同じ値にそろえている。
*/
#lower-recommend.bg-02 {
  /* カーブの比率を保つため --arc と --sheet-h を同じ値で縮小
     （元は両方 10.8rem。2026-10-02） */
  --arc: 6.5rem; /* 角丸半径（丸みの強さ） */
  --sheet-h: 6.5rem; /* 白いシートの高さ */
  --notch-w: 2.2rem; /* ノッチの片側の幅 */
  --notch-h: 2.5rem; /* ノッチの高さ */
  /* 上の余白を詰める：var(--s8) → var(--s3)（2026-09-25） */
  /* さらに半分程度に詰める：var(--s3) → var(--s2)（2026-10-02） */
  padding-top: calc(var(--sheet-h) + var(--s2));
  position: relative;
}
/* 白いシート（下の角だけ丸める） */
#lower-recommend.bg-02::before {
  content: "";
  display: block;
  width: 100%;
  height: var(--sheet-h);
  background-color: #fff;
  border-radius: 0 0 var(--arc) var(--arc);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}
/* 中央の下向き三角 */
#lower-recommend.bg-02::after {
  content: "";
  width: 0;
  height: 0;
  border-top: var(--notch-h) solid #fff;
  border-right: var(--notch-w) solid transparent;
  border-left: var(--notch-w) solid transparent;
  transform: translateX(-50%);
  position: absolute;
  top: var(--sheet-h);
  left: 50%;
  z-index: 1;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  #lower-recommend.bg-02 {
    --arc: 3rem;
    --sheet-h: 3rem;
    padding-top: calc(var(--sheet-h) + var(--s5));
  }
}

/*---------------------------------------------
    下層MVのサイト名にリンク

    既存サイトの a:link（緑・下線・14px固定）が効いてしまうので打ち消す。
    色は中の span（--main / --txt）にまかせたいので inherit にする。
*/
.p-mv-sub__title a,
.p-mv-sub__title a:link,
.p-mv-sub__title a:visited {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-decoration: none;
  display: inline-block;
}
.p-mv-sub__title a:hover {
  opacity: 0.8;
}
@media screen and (max-width: 767px) {
  #sec02 .l-stack-large {
    gap: var(--s2);
  }
}

/*---------------------------------------------
    ハンバーガーメニュー内の調整

    1) ロゴ
       img に width="638" height="160" が入っていて、
       PCではその実寸のまま描画され、ドロワー（37.5rem）から
       左右にはみ出していた。枠に収める。
       画像の実寸は 412×106 なので縦横比はそのまま。
    2) 矢印アイコン
       存在しない arrow-01-black-*.svg を参照していたので
       実在する arr-*-blue.svg に差し替える。
       丸バッジのアイコンなので 1.4rem では小さすぎる。2rem に。
*/
.gnavi-title img {
  width: 100%;
  height: auto;
}
.gnavi-list__link::after {
  width: 2rem;
  height: 2rem;
  background: url("img/arr-right-blue.svg") no-repeat center center / contain;
}
.gnavi-list__link--toggle::after {
  background-image: url("img/arr-down-blue.svg");
}

/*=============================================
    Noto Sans JP の読み込み

    common_02.css の body が font-family: "Noto Sans JP" を
    指定しているのに @font-face が無く、端末に入っていなければ
    フォールバックのゴシックで表示されていた。
    このファイル（custom.css）は header.php の sublease 分岐の
    中でしか読み込まれないので、/sublease/ 配下だけに効く。
    パスは custom.css からの相対。
==============================================*/
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    url("./fonts/NS-400.woff2") format("woff2"),
    url("./fonts/NS-400.woff") format("woff");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    url("./fonts/NS-700.woff2") format("woff2"),
    url("./fonts/NS-700.woff") format("woff");
}

/*=============================================
    関連記事（single.php の .kanren）

    旧テーマの .midasi（H456.png の背景＋緑の文字と罫線）が
    そのまま出ていたので、見本のデザインに寄せる。
    見本の青はすべて var(--main) に置き換え。
==============================================*/
.MainColumn .Page .kanren {
  margin-block: var(--s8);
  padding: 2.4rem 1.6rem;
  background-color: #f7f8fa;
}
/* 見出し：装飾なしの太字＋下に --main の罫線 */
.MainColumn .Page .kanren .midasi {
  margin: 0;
  padding: 0 0 1.6rem 3.2rem;
  background: none;
  border: none;
  border-bottom: 1px solid #e5e5e5;
  color: var(--txt);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
}
.MainColumn .Page .kanren ul {
  margin: 0;
  padding: 2.4rem 0 0;
}
/* 旧テーマの .Page ul li { background: url(img/list.png) } を止めて
   --main の丸を ::before で置く。
   common_02.css の .MainColumn .Page ul:not([class]) li::before（0,3,2）に
   負けないよう ul を挟んで詳細度を合わせる */
.MainColumn .Page .kanren ul li {
  margin: 0;
  padding: 0 0 0 5.2rem;
  background: none;
  line-height: 1.8;
  position: relative;
}
.MainColumn .Page .kanren ul li + li {
  margin-top: 1.2rem;
}
.MainColumn .Page .kanren ul li::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--sub);
  position: absolute;
  top: 0.9em;
  left: 3.2rem;
  transform: translateY(-50%);
}
.MainColumn .Page .kanren a,
.MainColumn .Page .kanren a:link,
.MainColumn .Page .kanren a:visited {
  color: var(--txt);
  font-size: 1.6rem;
  font-weight: 700;
  text-decoration: none;
}
.MainColumn .Page .kanren a:hover {
  text-decoration: underline;
}
@media screen and (max-width: 767px) {
  .MainColumn .Page .kanren {
    padding: 2rem 1.2rem;
    margin: var(--s3) auto;
    width: 90%;
  }
  .MainColumn .Page .kanren .midasi {
    padding-left: 1.2rem;
    font-size: 1.8rem;
  }
  .MainColumn .Page .kanren ul li {
    padding-left: 3.2rem;
  }
  .MainColumn .Page .kanren ul li::before {
    left: 1.2rem;
  }
}

/*=============================================
    下層ヘッダーの調整
==============================================*/

/*---------------------------------------------
    1) 上部の帯を --main に

    common.css の .header_top { background:#1d7d72 }（緑）を打ち消す。
    このファイルは header.php の sublease 分岐の中でしか
    読み込まれないので、/sublease/ 配下だけ色が変わる。
*/
.header_top {
  background-color: var(--main);
}

/*---------------------------------------------
    2) MVのイラストを少し内側へ　下層.jpg 実測

    デザイン（1440px時）ではイラストの右端が x=1190。
    本文カラム（100rem）の右端 1220 から 30px 内側にあたる。
    画面いっぱいに広がる帯の中で、本文カラムを基準に置きたいので
    「画面中央から 50rem 戻って、さらに 3rem 内側」で計算する。
      1440px → 250px   1920px → 490px   1100px → 80px
    狭い画面で端に寄りすぎないよう、最低 2rem は空ける。
*/
@media screen and (min-width: 768px) {
  .p-mv-sub__img {
    right: max(2rem, calc(50% - 50rem + 3rem));
  }
}

/*=============================================
    仕上げの調整（2026-09-16）
==============================================*/

/*---------------------------------------------
    1) ヘッダー帯の下マージン
*/
.header_top {
  margin-bottom: 0;
}

/*---------------------------------------------
    2) 追従バナー（PC）の文字サイズと「白枠」

    白枠の正体は bnnPC_bg.png の透明部分。
    448×261 の画像のうち不透明なのは x=8〜446 / y=0〜236 で、
    左8px・下24px が透明のまま残り、背後の白が見えていた。
    背景を 24rem 幅に拡大し、左に 0.6rem ずらして
    不透明部分だけが枠に収まるようにする。
*/
/* 文字が大きくなって 22rem × 12.7rem では収まらないので、
   幅を少し広げ、高さは中身にまかせる */
.pc-fix-banner04 {
  width: 24rem;
  height: auto;
  min-height: 12.7rem;
}
/* 縦を 110.5%（261 ÷ 237）に拡大すると、高さが変わっても
   不透明部分だけがちょうど枠の高さいっぱいになる。
   横は中央寄せで、左右の透明部分は枠の外に出る */
.pc-fix-banner04 a {
  background: url("./img/bnnPC_bg.png") no-repeat center top / auto 110.5%;
}
.pc-fix-banner04-lead {
  font-size: 1.6rem;
}
.pc-fix-banner04-title {
  font-size: 1.9rem;
}
.pc-fix-banner04-num .num {
  font-size: 3.5rem;
}

/*---------------------------------------------
    3) セクションの左寄り

    原因は本文カラムの入れ子。
      .wrapper 1000px・画面中央
      .container-main 900px・左寄せ（右100pxはサイドバー枠）
    のせいで本文（.MainColumn .Page）の中心が画面中心より
    45px 左にある。.sublp（lower_bottomの「3選」バナー）
    だけでなく記事本文自体も同じだけずれているため、
    .Page ごと右に寄せて補正する。

    これまでは全幅背景（.bg-01 / .bg-02 / #sec04）側で
    左右マージンを非対称にして打ち消していたが、
    全幅にしていないセクション（sec03 / sec05 / sec06）や
    記事本文は 45px 左に寄ったままだった。

    そこで .Page 自体を 45px 右に寄せて画面中央に合わせ、
    全幅背景側の補正は左右対称に戻す。これで本文・.sublp・
    全セクションの中心が画面中心でそろう。
*/
@media screen and (min-width: 768px) {
  .MainColumn .Page {
    /* 右にも同じだけマイナスを入れて、幅は変えずに位置だけ動かす */
    margin-left: var(--bleed-fix);
    margin-right: calc(var(--bleed-fix) * -1);
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .bg-02,
  #sec04 {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .bg-01 {
    margin-left: calc(50% - min(var(--sheet-w) / 2, 50vw));
    margin-right: calc(50% - min(var(--sheet-w) / 2, 50vw));
  }
}

/*---------------------------------------------
    4) sec06 のカード上余白
*/
#sec06 .column-medium {
  padding-top: 0;
}

/*---------------------------------------------
    5) sec04 のテーブル（指定が無く継承任せだった）
*/
#sec04 table th,
#sec04 table td {
  font-size: 1.6rem;
}

/*---------------------------------------------
    6) sec04 の上余白
*/
#sec04 {
  margin-top: var(--s10);
  padding-top: var(--s3);
}

/*---------------------------------------------
    バナーの「3選」を中央寄せ

    元は margin-left:auto で右端に寄せていた。
*/
.pc-fix-banner04-num {
  margin-inline: auto;
}

/*---------------------------------------------
    sec05 の回り込み画像ボックスの上余白

    common_02.css の .low-left-img-box { margin-block: 4rem } を
    sec05 だけ上だけ 0 にする（見出しのすぐ下に置くため）。
*/
#sec05 .low-left-img-box {
  margin-top: 0;
}

/*---------------------------------------------
    sec04 の会社キャプチャを sec02 と同じ扱いに

    sec02 は .onb-center-img img { width:100%; height:auto } で
    枠いっぱいに収めている。sec04 はクラスなしの div に入っていて
    .MainColumn .Page img { max-width:100% } まかせだったため、
    元画像が小さいとカード幅より小さく表示されていた。
*/
#sec04 .column-small > div {
  text-align: center;
}
#sec04 .column-small img {
  width: 100%;
  height: auto;
}

/*---------------------------------------------
    sec04以降の見出しリンクにアローアイコン
*/
#sec04 .section-title04 a::after,
#sec05 .section-title04 a::after,
#sec06 .section-title04 a::after {
  content: "";
  width: 2.5rem;
  height: 2.5rem;
  margin-left: 0.8rem;
  background: url("./img/arr-right-blue.svg") no-repeat center center / contain;
  display: inline-block;
  vertical-align: middle;
}

/*=============================================
    下層MVのイラストがヘッダー帯に重なる件（2026-09-24）
==============================================*/
/*
    イラスト（高さ16.5rem）が帯（15.8rem）より 0.7rem 高く、
    上にはみ出す指定になっていた。
    2026-09-16 に .header_top の margin-bottom を 0 にしたため、
    はみ出した分がそのままヘッダー帯（サイトマップのあたり）に重なっていた。
    イラストの高さを帯と同じにして、帯の中に収める。
*/
@media screen and (min-width: 768px) {
  .p-mv-sub__img {
    height: 100%;
  }
}

/*=============================================
    sec03 試算結果ボックス（この条件での目安）の調整（2026-09-24）
==============================================*/
/*---------------------------------------------
    1) 四隅のカギ括弧を背景の角ぴったりに

    これまでは top/left などが 8px で、黄色背景の内側に入っていた。
    デザインでは背景の四隅に合わせているので 0 にする。
    あわせてデザインに合わせてカギを長く・太くする。
*/
.plsb-result .plsb-corner {
  width: 4rem;
  height: 4rem;
}
.plsb-result .plsb-corner::before {
  height: 0.3rem;
}
.plsb-result .plsb-corner::after {
  width: 0.3rem;
}
.plsb-result .plsb-corner-tl {
  top: 0;
  left: 0;
}
.plsb-result .plsb-corner-tr {
  top: 0;
  right: 0;
}
.plsb-result .plsb-corner-bl {
  bottom: 0;
  left: 0;
}
.plsb-result .plsb-corner-br {
  bottom: 0;
  right: 0;
}

/*---------------------------------------------
    2) 枠内の余白（デザイン2枚目に合わせる）

    上は詰めて、見出し→数値→注釈の間隔をそろえる。
    .plsb-root h3 / .plsb-root p（0,1,1）に勝つよう
    .plsb-root .plsb-result 〜 で受ける。
*/
.plsb-root .plsb-result {
  padding: var(--s2) 3rem var(--s5);
}
.plsb-root .plsb-result .plsb-h {
  margin: 0;
}
.plsb-root .plsb-result .plsb-metrics {
  gap: 1.6rem;
  margin-bottom: 2.4rem;
}
.plsb-root .plsb-result .plsb-m p {
  margin: 0;
}

@media screen and (max-width: 767px) {
  .plsb-result .plsb-corner {
    width: 2.4rem;
    height: 2.4rem;
  }
  .plsb-root .plsb-result .plsb-h {
    margin-bottom: 1.6rem;
  }
  .plsb-root .plsb-result .plsb-metrics {
    gap: 1rem;
    margin-bottom: 1.6rem;
  }
}

@media screen and (max-width: 767px) {
  .plsb-root .plsb-result .plsb-m {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.8rem;
  }
  .plsb-root .plsb-result .plsb-m .plsb-k {
    font-size: 1.4rem;
    white-space: nowrap;
  }
  .plsb-root .plsb-result .plsb-m .plsb-v {
    font-size: 2.6rem;
    white-space: nowrap;
  }
  .plsb-root .plsb-result .plsb-m .plsb-v .plsb-u {
    font-size: 1.4rem;
  }
}

/*---------------------------------------------
    4) SP：見出し「この条件での目安」と1行目の間を詰める（2026-09-24）
*/
@media screen and (max-width: 767px) {
  .plsb-root .plsb-result .plsb-h {
    margin-bottom: 0.8rem;
  }
}

/*---------------------------------------------
    5) SP：判定コメント（.plsb-judge）を左寄せに（2026-09-24）
       PCは中央揃えのまま
*/
@media screen and (max-width: 767px) {
  .plsb-root .plsb-result .plsb-judge {
    text-align: left;
  }
}

/*---------------------------------------------
    sec03「税理士に確認すること」SPの見出しの余白（2026-09-24）

    SPでは <br class="sp_br"> が inline-block の .border の「中の先頭」にあるため、
    .border の中に空の1行ができ、「税理士に」との間が1行分あいていた。
    br は消し、.border を display:table（中身幅のブロック）にして
    改行と下線の幅はそのまま保つ。
*/
@media screen and (max-width: 767px) {
  .sublp .conclusion-area--light .conclusion-title .border .sp_br {
    display: none;
  }
  .sublp .conclusion-area--light .conclusion-title .border {
    display: table;
    margin: 0.4rem auto 0;
  }
}

/*=============================================
    sec06 地域別：帯の左上にエリアアイコン（2026-09-24）
==============================================*/
/*
    アイコンは .twb-box-full の ::before で出す（sec01 の会社アイコンと同じ作り）。
    エリアごとの画像は修飾クラス --osaka / --tokyo / --kanagawa / --kyoto / --chiba
    の background-image だけ差し替えればよい。
    ※2026-09-24 本番アイコン（各エリアの .svg）に差し替え済み
*/
.sublp .twb-box-full {
  position: relative;
}
.sublp .twb-box-full::before {
  content: "";
  width: 8rem;
  height: 7rem;
  background: no-repeat center / contain;
  position: absolute;
  top: -3.6rem;
  left: 0.4rem;
  z-index: 1;
  pointer-events: none;
}
.sublp .twb-box-full--osaka::before {
  background-image: url("./img/osaka.svg");
}
.sublp .twb-box-full--tokyo::before {
  background-image: url("./img/tokyo.svg");
}
.sublp .twb-box-full--kanagawa::before {
  background-image: url("./img/kanagawa.svg");
}
.sublp .twb-box-full--kyoto::before {
  background-image: url("./img/kyoto.svg");
}
.sublp .twb-box-full--chiba::before {
  background-image: url("./img/chiba.svg");
}

@media screen and (max-width: 767px) {
  /* SPは一回り大きく（5.6rem → 7.2rem、2026-09-24） */
  .sublp .twb-box-full::before {
    width: 7.2rem;
    height: 6.3rem;
    top: -3.2rem;
    left: 0.2rem;
  }
}

/*---------------------------------------------
    sec06：アイコンを足したぶん、ボックスの上下の間隔を広げる（2026-09-24）
    アイコンは帯から上に 3.6rem（SPは 3.2rem）はみ出すので、
    上の段のボックスとの間にその分＋余白をとる。左右の間隔はそのまま
*/
#sec06 .l-grid-two {
  row-gap: 6.4rem;
}
@media screen and (max-width: 767px) {
  #sec06 .l-grid-two {
    row-gap: 5.6rem;
  }
}

/*=============================================
    カテゴリトップMV（.p-mv）PC：FIXデザインに寄せる（2026-09-24）
==============================================*/
/*
    カンプ（1440px）の実測
      背景の帯   … 高さ約463px（= 32.2vw）
      イラスト   … 幅約831px（= 57.7vw）。帯の上端に揃え、右端は画面の端まで。
                    下は帯から約30px はみ出す
      テキスト群 … 左端 53px（= 3.7vw）、右端 590px 付近（幅 約37vw）
      ターゲット … 帯の上端から約45px（= 3.1vw）

    これまでは
      ・イラストが max-width:600px で小さく、.p-mv__inner（max-width:1400px）
        基準の配置だったので、画面の右端まで届いていなかった
      ・テキスト群が 55% と広く、リード文がイラストの下まで伸びていた
    ので、画面幅（vw）基準に置き直す。
    イラスト原寸は 866×514 なので、それ以上には拡大しない。
*/
@media screen and (min-width: 768px) {
  .p-mv {
    min-height: min(32.2vw, 483px);
  }
  .p-mv__inner {
    max-width: none;
    padding-top: calc(3.1vw - 1.2rem);
    padding-inline: 3.7vw;
    /* 大きな画面では、イラストが原寸（866px）で止まって右端に残り、
       テキストは左端のままなので間が空いていく。
       「画面幅 − イラスト幅 − テキスト幅 − すき間」を左の余白にして、
       テキストをイラストの手前まで寄せる（1485px 以下は 3.7vw のまま）。
       ※ .p-mv__content の max-width（540px）と数字を合わせること */
    padding-left: max(3.7vw, calc(100vw - 866px - 540px - 2.4rem));
    align-items: flex-start;
    position: static; /* イラストを .p-mv（全幅）基準で配置する */
  }
  .p-mv__content {
    width: 40%;
    max-width: 540px; /* 1440px 時の幅（約533px）で止める */
    position: relative;
    z-index: 1;
  }
  /* 画面が狭いときに見出しがイラストへはみ出さないよう、上限はそのままで縮む */
  .p-mv__target {
    font-size: clamp(1.6rem, 1.74vw, 2.5rem);
  }
  .p-mv__title-main {
    font-size: clamp(2.4rem, 3.47vw, 5rem);
  }
  .p-mv__title-sub {
    font-size: clamp(2rem, 2.78vw, 4rem);
  }

  .p-mv__img {
    width: min(57.7vw, 866px);
    margin-bottom: 0;
    top: 0;
    right: 0;
  }
  .p-mv__img img {
    width: 100%;
    max-width: none;
  }
}

/*---------------------------------------------
    sec06：帯と説明文の間を半分に（2026-09-24）
    ダミー画像を削除したあとの余白が
    帯の margin-bottom（var(--s3) = 2.4rem）＋ .l-stack-small の gap（1.6rem）
    ＝ 4rem あったので、帯の margin-bottom を 0.4rem にして 2rem にする
*/
#sec06 .twb-box-full .twb-arrow-title {
  margin-bottom: 0.4rem;
}

/*---------------------------------------------
    sec04 会社一覧カードの調整（2026-09-24）

    1) th の文字落ち
       font-size 1.6rem に対して width 7rem（左右 padding 1.2rem ずつ）では
       中身が 4.6rem しかなく「所在地」「公式HP」が2行に折れていた。
       3文字が1行に入る 9rem に広げる
    2) SPはテーブルを縦組み（HTML側で .sp-table-vertical で囲っている）
       common_02.css / custom.css の .sp-table-vertical 指定は
       #sec04 table th（width 9rem）に詳細度で負けるので、ここで指定し直す
    3) テキストリンクの右寄せ
       #sec04 .column-small > div { text-align: center }（キャプチャ画像用）が
       .btn-link にも当たって中央寄せになっていた
*/
#sec04 table th {
  width: 9rem;
}
#sec04 .column-small > .btn-link {
  text-align: right;
}
/* テーブルを囲った .sp-table-vertical も div なので、同じく中央寄せが
   当たって td の文字が中央に寄らないよう左に戻す */
#sec04 .column-small > .sp-table-vertical {
  text-align: left;
}
@media screen and (max-width: 767px) {
  #sec04 .sp-table-vertical table th,
  #sec04 .sp-table-vertical table td {
    width: 100%;
    display: block;
    white-space: normal;
    text-align: left;
  }
}

/*=============================================
    追従バナー（PC）をデザインに寄せる（2026-09-24）
==============================================*/
/*
    白枠の原因
      bnnPC_bg.png（448×261）は影まで描き込み済みの画像で、
      青い部分は x=8〜447 / y=0〜236。右と下は半透明の影になっている。
      そこへ a の box-shadow を重ね、背景も 110.5% に拡大して
      中央寄せしていたため、画像の透明な縁と box-shadow の間が
      白い枠のように見えていた。
      → box-shadow をやめ、画像を枠いっぱい（100% 100%）に敷いて、
        枠の縦横比を画像と同じ 448:261 にする（影は画像のものを使う）。

    文字・イラストの配置（カンプを 24rem 幅に換算した実測値）
      リード文     … 上から約2.1rem、1.6rem
      会社名の白帯 … 上 4.6rem〜下 7.5rem、文字 2rem、青い部分の幅いっぱい
      「3選」      … 上 8.1rem〜下 11.4rem、中央、「3」3.4rem／「選」2rem
      イラスト     … 左 3.2rem・下 0.6rem、4.8rem 角
*/

.pc-fix-banner04 {
  width: 24rem;
  height: auto;
  min-height: 0;
  aspect-ratio: 448 / 261;
}
.pc-fix-banner04 a {
  padding: 1.5rem 0.8rem 0 1.4rem;
  background: url("./img/bnnPC_bg.png") no-repeat left top / 100% 100%;
  box-shadow: none;
}
.pc-fix-banner04 a::after {
  width: 4.8rem;
  height: 4.8rem;
  left: 3.2rem;
  bottom: 0.6rem;
}
.pc-fix-banner04-lead {
  margin: 0 0 0.6rem;
  font-size: 1.6rem;
  line-height: 1.2;
  white-space: nowrap;
}
.pc-fix-banner04-title {
  padding: 0.15rem 0.4rem;
  font-size: 2rem;
  line-height: 1.3;
}
.pc-fix-banner04-num {
  width: fit-content;
  margin: 0.6rem auto 0;
  padding: 0 0.5rem;
  font-size: 2rem;
  line-height: 1;
}
.pc-fix-banner04-num .num {
  font-size: 3.4rem;
  line-height: 1;
}

#sec01 .l-grid-three,
#lower-recommend .l-grid-three {
  margin-top: var(--s3);
}

@media screen and (max-width: 767px) {
  #sec01 .l-grid-three {
    margin-top: 0;
  }
}

/*---------------------------------------------
    2026-09-25 修正

    1) sec03 の青い見出し装飾（試算にあたっての注意 など）を 3px → 10px
       文字との間隔は元と同じ（約1.3rem）になるよう padding-left も広げる
    2) sec04 のテキストリンクをSPでも右端に
       SPは common_02.css の .btn-link { margin: var(--s1) auto } が効き、
       flex の子（.l-stack-small）で左右 auto になって中央に寄っていた。
       左だけ auto にして右端へ寄せる（PCも同じ指定で問題なし）
*/
#sec03 .onb-m-title6 {
  padding-left: 2.3rem;
}
#sec03 .onb-m-title6::before {
  width: 10px;
}
#sec04 .column-small > .btn-link {
  margin-left: auto;
  margin-right: 0;
}

/*---------------------------------------------
    下層共通パーツ（#lower-recommend）：カード上端と青い帯の間を詰める（2026-09-25）
    .column-small の padding-top（var(--s2)）ぶん白い帯が見えていたので、
    sec01 と同じく青い帯をカードの上端に付ける
*/
#lower-recommend .thb-box-full {
  margin-top: calc(var(--s2) * -1);
}
/* SPも同じく、青い帯をカードの上端に付けてアイコンを上にはみ出させる（2026-09-25）
   SPは .thb-box-full の padding-top（4.4rem）にアイコンを収めていたので 0 にし、
   アイコン（高さ7.6rem）はPCと同じく帯に 2rem かかる位置（top -5.6rem）へ。
   はみ出したアイコンが上のカードに重ならないよう、カード同士の間隔を広げる */
@media screen and (max-width: 767px) {
  #lower-recommend .thb-box-full {
    padding-top: 0;
  }
  #lower-recommend .thb-box-full::before {
    top: -5.6rem;
  }
  #lower-recommend .l-grid-three {
    row-gap: 7.2rem;
    margin-top: 4.8rem;
  }
}

/* 下層共通パーツの arrow-title を太字に（PC・SP共通、2026-09-25）
   トップの sec01 は h3 なので太字だが、こちらは div なので指定が必要 */
#lower-recommend .arrow-title {
  font-weight: 700;
}

/*---------------------------------------------
    2026-09-25 sec05
    1) SP：見出しリンクのアローが次の行に落ちていたので、
       アローを小さくし、「使い方・基礎知識編」を画面幅に合わせて少しだけ縮める
       （375px幅では 3rem のまま。それより狭い画面で縮む）
    2) PC：画像横のキャッチ（.low-left-img-catch）を 2.5rem・--main に（sec05のみ）
*/
@media screen and (max-width: 767px) {
  #sec04 .section-title04 a::after,
  #sec05 .section-title04 a::after,
  #sec06 .section-title04 a::after {
    width: 2rem;
    height: 2rem;
    margin-left: 0.4rem;
  }
  #sec05 .section-title04 .color {
    font-size: min(3rem, 8vw);
  }
  /* SPのキャッチも sec05 のみ 2rem・--main に */
  #sec05 .low-left-img-catch {
    font-size: 2rem !important;
    color: var(--main);
    margin: 0;
    line-height: 1.4;
    padding: 0;
  }
}

#sec05 .low-left-img-catch {
  font-size: 2.5rem;
  color: var(--main);
  line-height: 1.4;
  margin-bottom: 0;
}

/*---------------------------------------------
    2026-10-01 横スクロールテーブルの案内テキスト
    .l-scroll-x のテーブル上に置く「▼左右にスクロールできます▼」。
    PCでは横スクロールが発生しないため、SP（767px以下）のみ表示する
*/
.scroll-table {
  display: none;
}

@media screen and (max-width: 767px) {
  .scroll-table {
    display: block;
    font-size: 1.3rem;
    color: var(--main);
    text-align: center;
    margin-bottom: 0.8rem;
    padding: var(--s1);
    border: 1px solid #e0e0e0;
    color: var(--txt);
    border-radius: 2rem;
  }
  .l-scroll-x table {
    margin-block: 1rem !important;
  }
}

/*---------------------------------------------
    2026-10-02 h3アイコンの位置を上基準に固定

    common_02.css の .Page h3:not([class])::before は bottom 基準
    （PC: bottom:-0.6rem／SP: bottom:-0.4rem）で配置されていたため、
    見出しが2行になって高さが増えると、アイコンが見出し全体の
    下寄りに引っ張られて見えていた（1行目の上端と揃わない）。
    行数に関わらず見出し1行目の上端でアイコンが固定されるよう、
    bottom指定を打ち消して top 基準に変更する。
*/
.MainColumn .Page h3:not([class])::before {
  bottom: auto;
  top: 0;
}

@media screen and (max-width: 767px) {
  .MainColumn .Page h3:not([class])::before {
    bottom: auto;
    top: 0;
  }
}