@charset "utf-8";

/*-----------------------------------------------------
大見出し
-------------------------------------------------------*/

/* 中見出し
------------------------------------------------*/

/* 小見出し/コメント */

/* 1400px以下 */
@media only screen and (max-width: 1399px) {
}

/* 1200px以下 */
@media only screen and (max-width: 1199px) {
}

/* タブレット以下 */
@media only screen and (max-width: 991px) {
}

/* スマホ */
@media only screen and (max-width: 767px) {
}

/*-----------------------------------------------------
共通
-------------------------------------------------------*/

section {
  padding: 80px 0;
}
a {
  text-decoration-line: none;
}
a:hover{
  opacity: 0.5;
}

@media only screen and (max-width: 767px){
section {
  padding: 50px 0;
}}

/* フォント
------------------------------------------------*/

.text-bold{
  font-weight: bold;
}
.text-bold02{
  font-weight: 900;
}
.text-white{
  color: #fff;
}
.text-green{
  color: #00a594;
}
.text-orange{
  color: #ff7800;
}
.text-black {
  color: #333;
}
.yellow-marker{
  background:linear-gradient(transparent 70%, #fbd73d 70%);
  display: inline-block;
}
@media only screen and (max-width: 767px){
  .text-big{
  font-size: 1.55rem;
}
.yellow-marker{
  background:linear-gradient(transparent 86%, #fbd73d 86%);
  display: inline-block;
}}

/* タイトル
------------------------------------------------*/

.step p{
  margin-bottom: 0;
}
.step h2{
  margin-bottom: 0;
}
.ttl_box {
  text-align: center;
  position: relative;
  margin-bottom: 50px;
}
.ttl-english {
  font-size: 4rem;
  font-weight: 900;
  color: #e7e7e7;
  text-align: center;
}
.ttl-text {
  width: 100%;
  font-size: 2.5rem;
  font-weight: bold;
  color: #333;
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.question-line {
  width: 50px;
  height: 4px;
  background-color: #ff7800;
  margin: 10px auto 0;
}
@media only screen and (max-width: 991px) {
.ttl_box{
  margin-bottom: 30px;
}}
@media only screen and (max-width: 767px) {
.ttl_box{
  margin-bottom: 30px;
}
.ttl-english {
  font-size: 3.5rem;
}
.ttl-text {
  font-size: 1.6rem;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.question-line {
  width: 50px;
  height: 4px;
  background-color: #ff7800;
  margin: 0 auto;
}}

/* CTA
------------------------------------------------*/

.cta{
  position: relative;
  background-color: #00a594;
  padding: 80px 0;
}
.cta p{
  margin-bottom: 0;
}
.cta-box{
  background-color: #00a594; 
}
.cta-ttl{
  position: absolute;
  top: -15%;
  left: 50%;
  transform: translateX(-50%);
}
.cta-ttl-sub{
  font-size: 1.45rem;
}
.cta-ttl-bg{
  background-color: #333;
  border-radius: 50px;
  font-size: 2.4rem;
  padding: 0.25em 0;
  min-width: 50vw;
  text-align: center;
}

@media only screen and (max-width: 991px){
  .cta{
  padding: 55px 0 30px;
}
.cta-ttl-sub{
  font-size: 1.5rem;
}
.cta-ttl-bg{
  font-size: 2rem;
  min-width: 70vw;
}
}
@media only screen and (max-width: 767px){
.cta{
  padding: 40px 0 30px;
}
.cta-ttl{
  top: -10%;
}
.cta-ttl-sub{
  font-size: 1rem;
}
  .cta-ttl-bg{
  font-size: 1.75rem;
  padding: 0.25em 0;
  min-width: 90vw;
}
}

/*CTAボタン*/
.cta-text{
  font-size: 1.75rem;
}
.cta-bg{
  background-color: #0c9486;
  padding: 1.5em 0;
  display: flex;
  justify-content: center;
}
.cta-button{
  display: flex;
  justify-content: center;
}
@media only screen and (max-width: 991px){
.cta-bg{
  padding: 1.5em 6em;
}
.cta-button-form{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta-text{
  font-size: 1.5rem;
}
.cta_form_pic{
  width: 80%;
}
.cta-button-right{
  text-align: center;
}
.cta-button-left{
  text-align: center;
}}
@media only screen and (max-width: 767px){
.cta-text{
  font-size: 1.2rem;
}
 .cta-bg{
  padding: 1.5em 0;
  display: block;
}
.cta-button-form{
  margin-bottom: 1em;
}}

/* ナビゲーション
------------------------------------------------*/

.navbar{
  position: relative;
  background: #00a594;
}
.nav-link{
  font-size: 1.4rem;
  color: #fff;
}
@media only screen and (max-width: 1839px) {
  .nav-link{
    font-size: 1.2rem;
  }
}
@media only screen and (max-width: 991px) {
  .navbar-brand img{
    width: 50%;
  }
}

/*-----------------------------------------------------
ファーストビュー
-------------------------------------------------------*/

@media (min-width: 992px) {
  .header {
    position: relative;
    background-image: url(../images/const_fv_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0% 50%;
    background-attachment: scroll !important;

    /* ↓ 高さを“ほんの少し”タイトに */
    aspect-ratio: 1920 / 905;
    min-height: clamp(480px, 42vw, 905px);
  }
}

.header__contents{
  margin-top: 0;
  padding-top: 6rem;
  padding-bottom: 2rem;
}

/* SPは +3rem → **+2rem** にして気持ちだけ詰める */
@media (max-width: 991px){
  .header__contents{
    padding-top: calc(46px + 2rem);
    padding-bottom: 2rem; /* ここは現状維持でもOK */
  }
}


@media only screen and (max-width: 991px) {
  .header{
    background: url(../images/const_fv_bg_sp002.jpg) no-repeat center top;
    background-size: cover;
  }
}

@media (min-width: 1600px) {
  .header {
    min-height: 40vw;        /* 42vw → 40vw相当までタイトに */
    background-position: 3% 50%;
  }
}

.navbar{
  position: fixed;
  top: 0;
}

/*
.header__contents{
  margin-top: 6rem;
  padding: 3rem 0;
}
*/
.header__contents{
margin-top: 0;
  padding-top: 6rem;  
  padding-bottom: 2rem;
}


/*
@media only screen and (max-width: 991px) {
  .header__contents{
    margin-top: 46px;
  }
}
*/

/* スマホ側（991px以下）はナビ高さ46pxぶんに合わせて上余白を足す */
@media (max-width: 991px){
  .header__contents{
    padding-top: calc(46px + 2rem); 
	padding-bottom: 2rem;/* タイトにするなら +2rem に */
  }
}

@media only screen and (min-width: 1500px) {
  .header-column__main{
    flex: 0 0 auto;
    width: 58.33333333%;
	/* padding-top:30px */
  }
  .header-column__sub{
    flex: 0 0 auto;
    width: 41.66666667%;
  }
}

/* form-box
------------------------------------------------*/

.form-box{
  padding: 15px;
 /*  border: 10px solid #333333; */
  border-radius: 55px;
  background: #fff;
}
@media only screen and (max-width: 991px) {
  .form-box{
    margin-top: 20vw;
  }
}
.form-box__head{
  margin-bottom: 0.5rem;
  padding: 0.25rem 0 0.5rem;
  background: #00a594;
  border-radius: 40px 40px 0 0;
  text-align: center;
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1.2;
  color: #fff;
}
@media only screen and (max-width: 1839px) {
  .form-box__head{
    font-size: 2rem;
  }
}
@media only screen and (max-width: 1199px) {
  .form-box__head{
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .form-box__head{
    font-size: 1.4rem;
  }
}
.form-box__ttl{
  font-size: 2.75rem;
  font-weight: bold;
  text-align: center;
  color: #00a594;
}
@media only screen and (max-width: 1839px) {
  .form-box__ttl{
    font-size: 2.2rem;
  }
}
@media only screen and (max-width: 1199px) {
  .form-box__ttl{
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 767px) {
  .form-box__ttl{
    font-size: 1.5rem;
  }
}
.easy-form-box th,
.form-box__privacy-check{
  font-size: 1.4rem;
}
.easy-form-box td,
.form-box__privacy{
  font-size: 1.3rem;
}
.easy-form-box th{
  white-space: nowrap;
}
@media only screen and (max-width: 1839px) {
  .easy-form-box th,
  .form-box__privacy-check{
    font-size: 1.2rem;
  }
  .easy-form-box td,
  .form-box__privacy{
    font-size: 1rem;
  }
}
@media only screen and (max-width: 1399px) {
  .easy-form-box th,
  .easy-form-box td,
  .form-box__privacy-check,
  .form-box__privacy{
    font-size: 0.9rem;
    font-size: 0.9rem;
  }
}

@media only screen and (max-width: 1199px) {
  .easy-form-box th,
  .easy-form-box td,
  .form-box__privacy-check,
  .form-box__privacy{
    font-size: 0.8rem;
  }
}
@media only screen and (max-width: 767px) {
  .easy-form-box th,
  .easy-form-box td,
  .form-box__privacy-check,
  .form-box__privacy{
    font-size: 0.7rem;
  }
}
.blue-req{
  padding: 0.25em 0.5em 0.35em;
  background-color: #00a594;
  color: #fff;
  border-radius: 13px;
  margin-right: 0.5em;
}
/*
.easy-form-btn{
  font-size: 1.9rem;
  padding: 0.5rem 2rem;
  border: 3px solid #00a594;
  border-radius: 32px;
  background: #FF7800;
  font-weight: bold;
  color: #fff;
}
*/

.easy-form-btn{
    font-size: 1.9rem;
    padding: 0.5rem 2rem;
    border: 3px solid #ff9a40;
    border-radius: 32px;
    background: #FF7800;
    font-weight: bold;
    color: #fff;
}


.easy-form-btn.disabled,
.easy-form-btn:disabled,
fieldset:disabled .easy-form-btn{
  opacity: 0.65;
}
@media only screen and (max-width: 1839px) {
  .easy-form-btn{
    font-size: 1.8rem;
  }
}
@media only screen and (max-width: 1199px) {
  .easy-form-btn{
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .easy-form-btn{
    font-size: 1.4rem;
  }
}

.header__lead{
  margin: 0;
  padding-bottom: 0.25em;
  background: #333;
  text-align: center;
  font-size: 3.8rem;
  font-weight: bold;
  color: #fff;
}
.head__lead-big{
  font-size: 4.5rem;
}
@media only screen and (max-width: 1839px) {
  .header__lead{
    font-size: 3.4rem;
  }
  .header__lead-big{
    font-size: 4rem;
  }
}
@media only screen and (max-width: 1199px) {
  .header__lead{
    font-size: 2.4rem;
  }
  .header__lead-big{
    font-size: 3rem;
  }
}
@media only screen and (max-width: 991px) {
  .header__lead{
    position: absolute;
    top: 70vw;
    left: 3rem;
    background: none;
    text-align: left;
    font-size: 2.4rem;
    line-height: 2;
  }
  .header__lead-marker{
    padding: 0 0.5em 0.25em;
    background: #333;
    line-height: 1.8;
  }
  .header__lead-big{
    font-size: 2.4rem;
  }
}
@media only screen and (max-width: 767px) {
  .header__lead{
    top: 90vw;
    left: 0.75rem;
    font-size: 1.4rem;
  }
  .header__lead-big{
    font-size: 1.4rem;
  }
}

/*-----------------------------------------------------
FVしたbefore
-------------------------------------------------------*/

.fv-before{
  padding-bottom: 0;
}
.before-q{
  width: 85%;
}
.fv-before-ttl{
  font-size: 2.3rem;
}
.fv-before-ttl_big{
  font-size: 3.5rem;
}
@media only screen and (max-width: 1199px){
  .fv-before-ttl{
  font-size: 2rem;
}}
@media only screen and (max-width: 991px){
  .fv-before-ttl{
  font-size: 1.5rem;
}}
@media only screen and (max-width: 767px){
.before-q{
  width: 100%;
}
.fv-before-ttl_big{
  font-size: 2.5rem;
}
  .fv_before_pic{
  width: 75%;
}}

/*-----------------------------------------------------
FVしたafter
-------------------------------------------------------*/

.fv-after{
  padding-bottom: 0;
}
.fv-after-bg{
  background-color: #00a594;
  padding-bottom: 50px;
}
.flow-triangle::after {
  top: 0 !important;
}
.fv-after-ttl{
  font-size: 2.5rem;
  margin-bottom: 1.5em;
}
.fv-after-ttl_big{
  font-size: 3rem;
  padding-left: 0.5em;
}
.fv-after-text{
  margin-top: 1.5em;
  font-size: 1.5rem;
  text-align: center;
}

@media only screen and (max-width: 1199px){
  .fv-after-text{
  font-size: 1.25rem;
}}
@media only screen and (max-width: 991px){
  .fv-after-text{
  font-size: 1rem;
}}
@media only screen and (max-width: 767px){
.fv-after-text{
  text-align: left;
}
  .fv-after-ttl_big{
  font-size: 2.5rem;
  padding-left: 0;
}}

/*-----------------------------------------------------
AIがもたらす効果
-------------------------------------------------------*/

.ai-box{
  margin-bottom: 4em;
}
.ai-ttl{
  font-size: 2.5rem;
}
.text-gradation{
  background: linear-gradient(to top, #0e5443, #00cda9);
  -webkit-background-clip: text;
  color: transparent;
  font-size: 3.5rem;
}
.ai-ttl-text{
  font-size: 1.2rem;
}
.ai-man{
  width: 100%;
}
.ai-balloon {
    position: relative;
    padding: .8em 1.2em;
    border-radius: 75px;
    background-color: #333333;
    margin-bottom: 2em;
}
.ai-balloon::before {
    position: absolute;
    bottom: -15px;
    width: 30px;
    height: 15px;
    background-color: #333333;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}
.ai-text{
  font-size: 1.8rem;
}
.ai-effect-text{
  margin-bottom: 1em;
  font-size: 2rem;
}
.triangle{
  margin: 5em auto;
}
.ai-effect{
  margin-bottom: 5em;
}

@media only screen and (max-width: 991px){
.ai-ttl{
  font-size: 2rem;
}
.text-gradation{
  font-size: 3rem;
}
.ai-ttl-text{
  font-size: 1rem;
}
.ai-text{
  font-size: 1.3rem;
}
.triangle{
  margin: 2em auto;
  width: 8rem;
}}
@media only screen and (max-width: 767px){
.ai-ttl{
  font-size: 2rem;
}
.text-gradation{
  font-size: 3rem;
}
.ai-balloon {
    border-radius: 50px;
}
  .ai-text{
  font-size: 1rem;
}}

/*-----------------------------------------------------
具体的な活用例
-------------------------------------------------------*/

.example-ttl{
  font-size: 2rem;
  background-color: #333;
  padding: 0.15em 0.5em;
  display: inline-block;
  margin-bottom: 0;
}
.example-line{
  border: 3px solid #333;
}
.example-box{
  margin-top: 2rem;
}
.case-ttl{
  max-height: 2.25em;
}
@media only screen and (max-width: 991px){
.example-ttl{
  font-size: 1.5rem;
}
.case-ttl{
  max-height: 2em;
}}

/*-----------------------------------------------------
選ばれる理由
-------------------------------------------------------*/

.reason-ttl{
  font-size: 1.5rem;
  border-bottom: 2px solid #333;
}
.reason-number{
  font-size: 2rem;
}
.reason-text{
  line-height: 1.5;
  font-size: 1.5rem;
}
.reason-text_big{
  font-size: 2rem;
}
.reason-bg01{
  padding: 2em 0;
}
.reason-bg02{
  padding: 2em 0;
  background-color: #f1f1f1;
}
@media only screen and (max-width: 1199px){
 .reason-ttl{
  font-size: 1.25rem;
}
.reason-number{
  font-size: 1.8rem;
}
.reason-text{
  font-size: 1.25rem;
}
.reason-text_big{
  font-size: 1.5rem;
}}

@media only screen and (max-width: 991px){
 .reason .ttl-text{
  font-size: 2rem;
 }
 .reason-ttl{
  font-size: 1.1rem;
}
.reason-number{
  font-size: 1.5rem;
}
.reason-text{
  font-size: 0.9rem;
}
.reason-text_big{
  font-size: 1.15rem;
}
.reason_pic{
  width: 80%;
}}

@media only screen and (max-width: 767px){
 .reason .ttl-text{
  top: 55%;
  font-size: 1.8rem;
 }}

/*-----------------------------------------------------
導入事例
-------------------------------------------------------*/

.case{
  background-color: #ebfbf9;
}
.case-text{
  margin-top: 4em;
}
/*スライド*/
.case ul{
  padding-inline-start: 0;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.slide-items img{
  width: 90%;
}
.slick-prev {
    left: -50px !important;
    z-index: 2;
}
.slick-next {
    right: -15px !important;
    z-index: 3;
}
.slick-prev:before, .slick-next:before {
    color: #fff !important;/*ボタンの色*/
    opacity: 0.75 !important;/*ボタンの不透明度*/
    font-size: 20px !important;/*ボタンのサイズ*/
    background: #828282;
    border-radius: 50%;
    font-weight: bold;
    padding: 0.5em 0.8em;
}

.slick-dots li button:before{
  font-size:25px!important;/*ドットのサイズ*/
  padding-top: 15px;
}
.slick-dots {
  left: 50%;
  transform: translateX(-50%);
}

.slick-arrow:before{
    content:""!important;
    width: 50px !important;
    height: 50px !important;
    position: absolute;
    top: 0;
    left: 0;
}

.slick-next:before{
    background: url(../lp-c/images/slick-next.png)!important;
    background-size: contain!important;
}

.slick-prev:before{
    background: url(../lp-c/images/slick-prev.png)!important;
    background-size: contain!important;
}

@media (max-width:767px) {
.slide-items img{
  width: 80%;
}
.slick-prev {
    left: -30px !important;
    z-index: 2;
}
.slick-next {
    right: 0px !important;
    z-index: 3;
}
.slick-prev:before, .slick-next:before {
    color: #fff !important;/*ボタンの色*/
    opacity: 0.75 !important;/*ボタンの不透明度*/
    font-size: 10px !important;/*ボタンのサイズ*/
    background: #828282;
    border-radius: 50%;
    font-weight: bold;
    padding: 0.5em 0.8em;
}
.slick-dots li{
  width: 15px !important;
}
.slick-dots li button:before{
  font-size:15px!important;/*ドットのサイズ*/
  padding-top: 15px;
}
.slick-dots {
  left: 50%;
  transform: translateX(-50%);
}}

.case-accordion_text{
  font-size: 1.2rem;
  color: #333;
}
.case-accordion_text02{
  font-weight: 500;
}
.case .accordion-button {
    background-color: #ebfbf9 !important;
}
.case .accordion-body {
    background-color: #fff;
}

/*-----------------------------------------------------
施設設置のご提案
-------------------------------------------------------*/

@media only screen and (max-width: 991px){
.facility .ttl-english{
  font-size: 3em;
}
.facility .ttl-text{
  font-size: 2rem;
}}
@media only screen and (max-width: 767px){
.facility .ttl-english{
  font-size: 2.3em;
  line-height: 1;
}
.facility .ttl-text{
  font-size: 1.3rem;
  top: 57%;
  left: 50%;
  transform: translate(-50%, -50%);
}}

/*-----------------------------------------------------
NADD
-------------------------------------------------------*/
.nadd-ttl{
  background-color: #333333;
  color: #fff;
  border-radius: 30px;
  padding: 0.25em 0;
  margin-bottom: 0.5em;
}
@media only screen and (max-width: 767px){
.nadd-ttl{
  font-size: 1.25em;
}}

/*-----------------------------------------------------
管理画面
-------------------------------------------------------*/

.video{
  background-color: #ebfbf9;
  padding-bottom: 130px;
}
.video-balloon {
    position: relative;
    padding: .8em 1.2em;
    border-radius: 75px;
    background-color: #333333;
    margin-bottom: 2em;
    max-width: 50em;
}
.video-balloon::before {
    position: absolute;
    bottom: -15px;
    width: 30px;
    height: 15px;
    background-color: #333333;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}
.video-box{
  position: relative;
  width: 100%; /* 親要素の幅に合わせる */
  padding-top: calc(120% * (6 / 19)); /* アスペクト比 19:6 を維持 */
}
.video-box video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media only screen and (max-width: 991px){
 .video-text {
    font-size: 1.25rem;
}
.video-box{
  padding-top: calc(160% * (6 / 19)); /* アスペクト比 19:6 を維持 */
}}

/*-----------------------------------------------------
おすすめプラン
-------------------------------------------------------*/

.plan-box{
  margin-top: 4em;
  display: flex;
  justify-content: center;
}
@media only screen and (max-width: 991px){
  .plan .ttl-text{
    font-size: 2rem;
  }
 .plan-box{
  margin-top: 0;
}}
@media only screen and (max-width: 767px){ 
 .plan-box{
  display: block;
}
.plan .ttl-text {
  font-size: 1.46rem;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
}}

/*-----------------------------------------------------
バナー
-------------------------------------------------------*/

.banner-box{
  padding: 0 5em;
}
@media only screen and (max-width: 1199px){
  .banner-box{
  padding: 0 2.5em;
}}
@media only screen and (max-width: 767px){
  .banner{
    padding: 25px 0;
  }
  .banner-box{
  padding: 0 1em;
}}

/*-----------------------------------------------------
補助金
-------------------------------------------------------*/

.subsidy {
  background-color: #00a594;
}
.subsidy-ttl{
  line-height: 1.5;
  font-size: 2.5rem;
}
.subsidy-ttl-bg{
  background-color: #333;
  border-radius: 50px;
  margin: 0 0.2em;
  padding: 0 0.5em;
}
.subsidy-box{
  background-color: #fff;
  padding: 1em;
  font-size: 1.5rem;
  margin-top: 1.5em;
}
.yellow-box{
  background-color: #fff9c8;
  padding: 0.75em;
  font-size: 1.2rem;
}
.subsidy-text02{
  text-align: right;
  font-size: 0.9rem;
}
@media only screen and (max-width: 767px){
.subsidy-ttl{
  line-height: 1.4;
  font-size: 2rem;
}
.subsidy-ttl-bg{
  margin: 0 0.05em;
  padding: 0 0.5em;
}
.subsidy-text{
  font-size: 1.3rem;
}
.yellow-box{
  font-size: 1rem;
}
.subsidy-box{
  margin-top: 0;
}
.subsidy-text02 {
 text-align: left;
 padding-left: 1em;
 text-indent: -1em;
}}

/*アコーディオン*/
.area-box{
  margin-top: 2em;
}
.area-box .accordion-item{
  background-color: #00a594;
}
.area-box .accordion-button {
  background-color: #333 !important;
  border-radius: 50px !important;
  border-bottom:none;
  padding: 0.5em 1em !important;
  margin-bottom: 1em;
}
.area_text {
  color: #fff;
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 0;
}
.area-box .accordion-header {
    padding-left: 0;
}
.area-box .accordion-button::after{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.area-box .accordion-button:not(.collapsed)::after{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
@media only screen and (max-width: 991px){
  .area-box{
  margin-top: 1em;
}
  .area-box .accordion-button {
  margin-bottom: 0.5em;
}}

/*-----------------------------------------------------
ご利用までの流れ
-------------------------------------------------------*/

.step{
  background-color: #ebfbf9;
}
.step-balloon {
    position: relative;
    margin-bottom: 15px;
    padding: .8em 1.2em;
    border-radius: 75px;
    background-color: #333333;
}
.step-balloon::before {
    position: absolute;
    bottom: -15px;
    width: 30px;
    height: 15px;
    background-color: #333333;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}
.step-ttl {
    font-size: 1.8rem;
  }
.step-text_big {
    font-size: 2.4rem;
}
.step-box{
  margin-top: 4em;
  display: flex;
  justify-content: center;
}

@media only screen and (max-width: 1199px){
   .step-text_big {
    font-size: 2.2rem;
}}
@media only screen and (max-width: 991px){
  .step-ttl {
    font-size: 1.25rem;
  }
  .step-text_big {
    font-size: 1.5rem;
}}
@media only screen and (max-width: 767px){
.step-balloon {
 border-radius: 0;
 max-width: 90vw;
 margin: 0 auto;
}
.step-box{
  display: block;
  margin-top: 2em;
}
.step .ttl-text {
  font-size: 1.46rem;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
}}

/*-----------------------------------------------------
よくある質問
-------------------------------------------------------*/

.q-color{
  font-size: 2rem;
  font-weight: bold;
  color: #00a594;
  margin-right: 0.5em;
}
.a-color{
  font-size: 1.8rem;
  font-weight: bold;
  color: #ff7800;
  margin-right: 0.5em;
}
.q_text{
  color: #333;
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 0;
}
.a_text{
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
}
.bullet-text01 {
    padding-left: 1em;
    text-indent: -2.5em;
    display: block;
}
.bullet-text02 {
    padding-left: 1.5em;
    text-indent: -1.65em;
    display: block;
}
.accordion-button{
  background-color: #fff !important;
  border-radius: 0 !important;
  border-bottom: 2px solid #828282;
  padding-bottom: 0.5em;
  margin-bottom: 1.5em;
}
.accordion {
  --bs-accordion-border-color: none;
  --bs-accordion-btn-focus-border-color: none;
  --bs-accordion-btn-focus-box-shadow:none;
  --bs-accordion-active-bg: none;
  --bs-accordion-btn-padding-y: 1.5rem;
}
.accordion-body {
    padding-bottom: 1.5rem;
    background-color: #eeeeee;
}
.accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed {
    border-radius: 20px;
}
.accordion-flush .accordion-item {
    border-radius: 20px;
}
.accordion-button::after{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23008f80'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button:not(.collapsed)::after{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23008f80'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
@media only screen and (max-width: 991px){
.q-color{
  font-size: 1.8rem;
}
.a-color{
  font-size: 1.3rem;
}
.q_text{
  font-size: 0.9rem;
}
.a_text{
  font-size: 0.9rem;
  color: #333;
}
.accordion {
--bs-accordion-body-padding-x: 1.8rem;
}}

/*-----------------------------------------------------
form
-------------------------------------------------------*/

.form{
  background-color: #00a594;
}
.form .container{
  background-color: #fff;
  border-radius: 40px;
  padding: 3em 0;
}
.form .btn{
  background-color: #00989e;
  border-color: #00989e;
  padding: 0.5em 4em;
}
.form label{
  font-weight: bold;
}
.text-bg-danger{
  background-color: #00989e !important;
  border-radius: 0 !important;
  font-size: 1rem;
  margin-right: 0.5em;
}
.text-bg-light{
  background-color: #fff !important;
  border: 2px solid #00989e;
  color: #00989e !important;
  border-radius: 0 !important;
  font-size: 1rem;
  margin-right: 0.5em;  
}
@media only screen and (max-width: 1199px){
.form .col-lg-3{
  padding: 0;
}}
@media only screen and (max-width: 991px){
.form .container{
  padding: 2em;
}
.form label{
  margin-bottom: 0.5em;
}}
@media only screen and (max-width: 767px){
.form .container{
  width: 90%;
  border-radius: 20px;
}}
.form-chuki{
  padding: 1.5rem;
  background: #fff38d;
}

/*-----------------------------------------------------
footer
-------------------------------------------------------*/

#Footer{
  color: #fff;
  background-color: #00a594;
  padding: 3em 2em 7em;
}
#Footer p{
  margin-bottom: 0;
}
/* 追従 */
.fix-navi{
  position: fixed;
  z-index: 9999;
  bottom: 5em;
  right: 5%;
}
.pc-cta{
  width: 80%;
}

@media only screen and (max-width: 991px){
.fix-navi{
  position: fixed;
  z-index: 9999;
  bottom: 22em;
  right: 0%;
}
.pc-cta{
  width: 55%;
}}

@media only screen and (max-width: 767px){
.fix-navi{
  position: fixed;
  z-index: 9999;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: #FF7800;
  padding: 0.5em 0;
}
.fix-navi a{
  color: #fff !important;
}
.fix-navi p{
  margin-bottom: 0;
  font-size: 1.5rem;
}
.fix-navi-small{
  font-size: 1.2rem;
}
.navi_cta{
  width: 80%;
  margin: 0 auto;
}}

.scroll-up{
  bottom: 100px;
}
@media only screen and (max-width: 767px){
  .scroll-up{
    bottom: 125px;
}}

/* フォーム改善　*/
/* ===== 1) 入力欄：タップしやすい高さだけ底上げ（PC/スマホ共通） ===== */
#Form1 input[type="text"],
#Form1 input[type="tel"],
#Form1 input[type="email"],
#Form1 input[type="number"],
#Form1 input[type="search"],
#Form1 select,
#Form1 textarea {
  min-height: 48px;
  font-size: 16px;           /* iOSズーム防止 */
  box-sizing: border-box;
}

/* ===== 2) プレースホルダーを小さめにして本文との差を出す ===== */
#Form1 input::placeholder,
#Form1 textarea::placeholder {
  font-size: 14px;
  opacity: .8;
}

/* ===== 3) <select> のテキスト切れ対策（矢印ぶんの余白を拡大） ===== */
#Form1 select {
  padding-right: 56px;
  line-height: 1.4;
}

/* ===== 4) ラベル文字サイズ（PC=20px / スマホ=17px） ===== */
#Form1 th p,
#Form1 td p,
#Form1 label {
  font-size: 20px;
  line-height: 1.5;
}
@media (max-width: 767px) {
  #Form1 th p,
  #Form1 td p,
  #Form1 label {
    font-size: 17px;
  }
}



/* ===== 5) 個人情報リンク・同意行（テキスト小さめ＋行のバランス） ===== */
#Form1 .form-box__privacy {
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 4px;
  margin-top: 8px;
}
#Form1 .form-box__privacy-check label {
  display: inline-flex;      /* チェックと文言を横並びで整列 */
  align-items: center;
  gap: 8px;                  /* チェックと「同意する」の間隔 */
  font-size: 15px;           /* バランス取り：やや大きめ */
  line-height: 1.5;
  cursor: pointer;           /* ラベル全体でタップ可（HTMLでlabel囲み済み） */
}
/* チェックボックス自体は“ネイティブのまま”にして押下不具合を回避
   必要なら見た目は label 側で調整する方針にします */

/* ===== 送信ボタン（見やすく・押しやすく） ===== */
#Form1 .easy-form-btn {
  display: inline-block;
  width: 100%;
  max-width: 360px;          /* PCで広すぎないよう抑制 */
  min-height: 56px;          /* 指で押しやすい高さ */
  padding: 16px 24px;
  font-size: 18px;           /* 共通の基準サイズ */
  font-weight: 700;
  letter-spacing: .02em;
  border: 0;
  border-radius: 12px;
  background: #FF7800;       /* ご指定カラー */
  color: #fff;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, filter .15s ease;
}

/* 無効化時 */
#Form1 .easy-form-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* 押下時 */
#Form1 .easy-form-btn:active:not(:disabled) {
  transform: translateY(1px);
  filter: brightness(.98);
}

/* PC（768px以上）はさらに大きく */
@media (min-width: 768px) {
  #Form1 .easy-form-btn {
    font-size: 24px;
  }
}

/* スマホ（767px以下）はやや控えめ */
@media (max-width: 767px) {
  #Form1 .easy-form-btn {
    font-size: 18px;
  }
}


/* 同意するチェックボックスの枠線を濃くする */
#Form1 .form-box__privacy-check .form-check-input {
  border: 2px solid #333 !important; /* 枠線だけ濃く */
  width: 22px;
  height: 22px;
  cursor: pointer;
}

/* チェックが入ったときも枠線を維持 */
#Form1 .form-box__privacy-check .form-check-input:checked {
  border: 2px solid #333 !important;
}

/* チェックボックスとテキストの間隔を少し狭める */
#Form1 .form-box__privacy-check label {
  display: inline-flex;
  align-items: center;
  gap: 4px;   /* ← 余白を4pxに調整（デフォは8px） */
  font-size: 15px;
  line-height: 1.5;
  cursor: pointer;
}


/* ===== ボタン：デフォルトは影なし／hover時だけ影＋シャイン ===== */
#Form1 .easy-form-btn {
  /* シャイン用の下準備（通常時は画面外で待機） */
  background-color: #FF7800;
  background-image:
    linear-gradient(120deg,
      rgba(255,255,255,0) 40%,
      rgba(255,255,255,.25) 50%,
      rgba(255,255,255,0) 60%),
    linear-gradient(#FF7800, #FF7800);
  background-size: 250% 100%, 100% 100%;
  background-position: -160% 0, 0 0;   /* ← シャインは左外に待機 */
  background-repeat: no-repeat;

  /* デフォルトは“影なし・動きなし”でくっきり */
  box-shadow: none !important;
  transform: none;
  filter: none;

  /* hoverで動かす要素だけを遷移対象に */
  transition: background-position .6s ease, box-shadow .25s ease;
}

/* PCだけ hover を効かせる（スマホは無効） */
@media (hover: hover) and (pointer: fine) {
  #Form1 .easy-form-btn:hover:not(:disabled) {
    /* シャインが左→右に走る */
    background-position: 160% 0, 0 0;  
	box-shadow:
      0 4px 10px rgba(0,0,0,.20),
      0 18px 38px rgba(255,120,0,.35) !important;
  }
}

/* 押下時のフィードバック（必要なら残す／不要なら削除OK） */
#Form1 .easy-form-btn:active:not(:disabled) {
  transform: translateY(1px);
  filter: brightness(.98);
}

/* アニメ控えめ設定に配慮（任意） */
@media (prefers-reduced-motion: reduce) {
  #Form1 .easy-form-btn { transition: none !important; }
}


/* ===== Footerボタン（#Form .submit_btn）最小パッチ ===== */
#Form .submit_btn{
  display: inline-block;
  width: 100%;
  max-width: 360px;      /* PCで広すぎないように */
  min-height: 58px;      /* タップしやすい高さ */
  padding: 16px 24px;    /* btn-lgより少し厚めでもOK */
  font-weight: 700;
  letter-spacing: .02em;

  /* デフォルトは影なしでくっきり */
  box-shadow: none;
  transition: box-shadow .25s ease, transform .06s ease, filter .15s ease;
}

/* フォントサイズ：PC大きめ／スマホは崩れない範囲でUP */
@media (min-width: 768px){
  #Form .submit_btn{ font-size: 22px; min-height: 60px; }
}
@media (max-width: 767px){
  #Form .submit_btn{ font-size: 18px; }
}

/* PCだけ hover で影（スマホはhoverなし） */
@media (hover: hover) and (pointer: fine){
  #Form .submit_btn:hover:not(:disabled){
    /* 見え方が分かりやすい二段シャドウ（強め） */
    box-shadow:
      0 4px 10px rgba(0,0,0,.20),
      0 18px 38px rgba(0,0,0,.36);
  }
}

/* 押下時の軽いフィードバック（任意） */
#Form .submit_btn:active:not(:disabled){
  transform: translateY(1px);
  filter: brightness(.98);
}
/* Footerフォームの送信ボタン：PCだけhoverで影、デフォは影なし */
@media (hover: hover) and (pointer: fine){
  #Form .submit_btn{ box-shadow: none; transition: box-shadow .25s ease, transform .06s ease; }
  #Form .submit_btn:hover:not(:disabled){
    /* くっきり見える二段シャドウ */
    box-shadow:
      0 4px 10px rgba(0,0,0,.20),
      0 18px 38px rgba(0,0,0,.36);
  }
}
#Form .submit_btn:active:not(:disabled){ transform: translateY(1px); }

/* Footerの送信ボタンをFVと同じトーン＆エフェクトに */
#Form .submit_btn{
  background-color: #FF7800;         /* 本体色 */
  border-color: #FF7800;             /* 境界も合わせる */
  color: #fff;
  box-shadow: none;                  /* デフォルトは影なしでくっきり */

  /* シャイン準備（通常は画面外で待機） */
  background-image:
    linear-gradient(120deg,
      rgba(255,255,255,0) 40%,
      rgba(255,255,255,.25) 50%,
      rgba(255,255,255,0) 60%),
    linear-gradient(#FF7800, #FF7800);
  background-size: 250% 100%, 100% 100%;
  background-position: -160% 0, 0 0;
  background-repeat: no-repeat;

  /* 滑らかに */
  transition: background-position .6s ease, box-shadow .25s ease;
}

/* Bootstrapのhover色上書き（色を固定） */
#Form .submit_btn:hover{
  background-color: #FF7800;
  border-color: #FF7800;
}

/* PCだけ：hover時にシャイン＋シャドウ */
@media (hover: hover) and (pointer: fine){
  #Form .submit_btn:hover:not(:disabled){
    background-position: 160% 0, 0 0;  /* シャインが走る */
    /* くっきり見える二段シャドウ（強め） */
    box-shadow:
      0 4px 10px rgba(0,0,0,.20),
      0 18px 38px rgba(0,0,0,.36);
  }
}

/* 押下時の軽いフィードバック（任意） */
#Form .submit_btn:active:not(:disabled){
  transform: translateY(1px);
  filter: brightness(.98);
}


/* 擬似要素方式を使っていた場合の保険：背景は本体で描画 */
@media (min-width: 992px){
  .header::before { content: none !important; }
}

/* PC：背景は左の人物を優先。高さは中身に合わせて自動で伸びる */
@media (min-width: 992px){
  .header{
    position: relative;
    /* 絶対パスで確実に読ませる（相対パス不整合を回避） */
    background: url("../images/const_fv_bg1.jpg") 5% 50% / cover no-repeat !important;
    background-attachment: scroll !important;

    /* ← アスペクト固定と下限は“無効化”して、内容優先に */
    aspect-ratio: auto !important;
    min-height: 0 !important;
    height: auto !important;
  }
}

/* スマホ：別画像のまま（必要ならこのまま） */
@media (max-width: 991px){
  .header{
    background: url("../images/const_fv_bg_sp002.jpg") 20% top / cover no-repeat !important;
  }
}

/* ヒーロー内の余白は padding で管理（相殺しない） */
.header__contents{
  margin-top: 0;
  padding-top: 6rem;      /* さらに低くしたければ 5.5rem → 5rem へ */
  padding-bottom: 2rem;
}
@media (max-width: 991px){
  .header__contents{
    padding-top: calc(46px + 2rem);
    padding-bottom: 2rem;
  }
}

/* もし以前に 1600px 以上で min-height を指定していたら“無効化” */
@media (min-width: 1600px){
  .header{ min-height: 0 !important; }  /* 背景は常に内容に追従 */
}

/* PCだけ：テキスト画像の下端をヒーローの下端に合わせる */
@media (min-width: 992px){
  /* ヒーロー内の下余白をゼロ（中の要素で下揃えするため） */
  .header__contents{
    padding-bottom: 30px;
  }

  /* Bootstrapの.rowはflexなので、下揃えにする */
  .header__contents .row{
    align-items: flex-end;   /* ← これで左右カラムの“下端”が揃う */
  }

  /* テキスト画像自身に不要な下マージンがあれば打ち消す */
  .header__contents img[src*="const_fv_txt"]{
    display: block;
    margin-bottom: 0;
  }
}

/* ===== SP（～767px）：フォームを1カラム化＆入力欄を100%に ===== */
@media (max-width: 767px){
  /* テーブル行をブロック化して、ラベル→入力の縦並びに */
  #Form1 .easy-form-box,
  #Form1 .easy-form-box tbody,
  #Form1 .easy-form-box tr,
  #Form1 .easy-form-box th,
  #Form1 .easy-form-box td{
    display: block;
    width: 100%;
  }

  /* nowrap を解除して折り返し可に */
  #Form1 .easy-form-box th,
  #Form1 .easy-form-box td{
    white-space: normal;
  }

  /* ラベルと入力の余白を適正化（左右に少しだけ余白） */
  #Form1 .easy-form-box th p{
    margin: 0 .5rem .35rem;
  }
  #Form1 .easy-form-box td > .mx-1,
  #Form1 .easy-form-box td > p{
    margin: 0 .5rem 1rem;
  }

  /* 入力欄／セレクトを全幅＆タップしやすい高さに */
  #Form1 select,
  #Form1 input[type="text"],
  #Form1 input[type="tel"],
  #Form1 input[type="email"]{
    display: block;
    width: 100%;
    min-height: 48px;         /* タップしやすい高さ */
    font-size: 16px;          /* iOSのズーム回避 */
    padding: .6rem .75rem;
    border-radius: 12px;
    box-sizing: border-box;
  }

  /* スマホのフォーム文字サイズを少し戻す（既存で0.7remになっているため） */
  #Form1 .easy-form-box th,
  #Form1 .easy-form-box td{
    font-size: 1rem;
    line-height: 1.4;
  }
}
/* ===== 必須バッジを小さめ・揃えやすく ===== */
#Form1 .blue-req{
  display: inline-flex;
  align-items: center;
  font-size: .72em;            /* ラベル文字に対して約-28% */
  padding: .18em .55em .24em;  /* ほどよい丸さ＆高さ */
  border-radius: 999px;        /* 真円ピル */
  line-height: 1;
  margin-right: .45em;
}
@media (max-width: 767px){
  #Form1 .blue-req{
    font-size: .70em;
    padding: .16em .50em .22em;
  }
}

/* ===== 行間（上下余白）調整 ===== */
/* PC：行ギャップを付けて見やすく */
#Form1 .easy-form-box{
  border-collapse: separate;
  border-spacing: 0 10px;      /* 各行の縦方向に10px間隔 */
}

/* SP：1カラム化後は tr をブロック扱い→行ごとに下マージン */
@media (max-width: 767px){
  #Form1 .easy-form-box{ border-spacing: 0; } /* 念のため無効化 */
  #Form1 .easy-form-box tr{ margin-bottom: 12px; }
  #Form1 .easy-form-box tr:last-child{ margin-bottom: 0; }

  /* ラベルと入力の間は少しだけ詰める */
  #Form1 .easy-form-box th p{ margin: 0 .5rem .25rem; }

  /* 入力側の左右余白を統一（既存の .mx-1 などを包含） */
  #Form1 .easy-form-box td > .mx-1,
  #Form1 .easy-form-box td > p{
    margin: 0 .5rem 0;
  }
}

/* 入力コントロールの上下パディングを微調整（PC/SP共通） */
#Form1 select,
#Form1 input[type="text"],
#Form1 input[type="tel"],
#Form1 input[type="email"]{
  padding-top: .6rem;
  padding-bottom: .6rem;
}

/* ===== Tablet最適化（iPad縦など：768–991px） ===== */
@media (min-width: 768px) and (max-width: 991px){

  /* --- 1) FVヒーロー内：余白だけ微調整（高さは中身任せでOK） --- */
  .header__contents{
    padding-top: calc(46px + 2rem); /* 固定ナビ46px + 少しの余白 */
    padding-bottom: 2rem;
  }

  /* --- 2) 見積フォーム：1カラム化＋横幅100%で窮屈さ解消 --- */
  #Form1 .easy-form-box,
  #Form1 .easy-form-box tbody,
  #Form1 .easy-form-box tr,
  #Form1 .easy-form-box th,
  #Form1 .easy-form-box td{
    display: block;
    width: 100%;
  }
  #Form1 .easy-form-box th,
  #Form1 .easy-form-box td{
    white-space: normal;
  }

  /* ラベルと入力の間隔・文字サイズ */
  #Form1 .easy-form-box th p{
    margin: 0 .75rem .4rem;
    font-size: 18px;  /* 読みやすいサイズに */
    line-height: 1.5;
  }
  #Form1 .easy-form-box td > .mx-1,
  #Form1 .easy-form-box td > p{
    margin: 0 .75rem 1rem;
  }

  /* 入力UIを横いっぱい＋タップしやすく */
  #Form1 select,
  #Form1 input[type="text"],
  #Form1 input[type="tel"],
  #Form1 input[type="email"],
  #Form1 textarea{
    display: block;
    width: 100%;
    min-height: 52px;
    font-size: 17px;         /* iOSズーム回避＋視認性UP */
    padding: .7rem .9rem;
    border-radius: 12px;
    box-sizing: border-box;
  }

  /* 必須バッジ（少し小さめのまま維持） */
  #Form1 .blue-req{
    font-size: .72em;
    padding: .18em .55em .24em;
    margin-right: .45em;
    line-height: 1;
  }

  /* 行間：各項目ブロックの下に余白 */
  #Form1 .easy-form-box tr{ margin-bottom: 14px; }
  #Form1 .easy-form-box tr:last-child{ margin-bottom: 0; }

  /* 同意チェック：指で押しやすく、テキストとの間隔整える */
  #Form1 .form-box__privacy{ font-size: 13px; margin-bottom: 4px; }
  #Form1 .form-box__privacy-check label{
    display: inline-flex; align-items: center; gap: 6px; font-size: 16px;
  }
  #Form1 .form-box__privacy-check .form-check-input{ width: 22px; height: 22px; }

  /* 送信ボタン：タブレット向けに一段だけ大きく */
  #Form1 .easy-form-btn{
    font-size: 20px;
    min-height: 58px;
    padding: 16px 24px;
    max-width: 380px;
  }
}

/* ===== フッター側フォーム（#Form）もタブレットで窮屈さ解消 ===== */
@media (min-width: 768px) and (max-width: 991px){
  #Form select,
  #Form input[type="text"],
  #Form input[type="tel"],
  #Form input[type="email"],
  #Form textarea{
    width: 100%;
    min-height: 52px;
    font-size: 17px;
    padding: .7rem .9rem;
    border-radius: 12px;
    box-sizing: border-box;
  }
  #Form .submit_btn{
    font-size: 20px;
    min-height: 56px;
    padding: 14px 22px;
    max-width: 380px;
  }
}

/* 見出しPNGの基本 */
.fv-copy{ display:block; max-width:100%; height:auto; }

/* PC(≥1200px)：従来の2カラム＆下端揃え */
@media (min-width: 1200px){
  .header__contents .row{ align-items: flex-end; }
}

/* iPad Pro（縦：992–1199.98px）だけ 1カラムにする */
@media (min-width: 992px) and (max-width: 1199.98px){
  /* 外側の余白を少しだけ詰める */
  .header__contents > .container-fluid{
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  /* 行を通常揃えに戻し、ガターも少し詰める */
  .header__contents .row{
    align-items: stretch !important;
    --bs-gutter-x: 1rem;
  }
  /* 2カラム→1カラム（画像 → フォームの順で縦積み） */
  .header-column__main,
  .header-column__sub{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  /* 見出し画像の見やすい上限＆中央寄せ */
  .header-column__main h1 img.fv-copy{
    width: min(100%, 900px);
    height: auto;
    margin: 0 auto 16px;
  }
  /* フォームは中央に、少しだけ幅を持たせる */
  .form-box{
    max-width: 700px;
    margin: 0 auto;
  }
}

/* （任意）iPad Pro横向き＝xl(1200–1399.98px)も1カラムにしたい場合は下を有効化
@media (min-width: 1200px) and (max-width: 1399.98px){
  .header__contents .row{
    align-items: stretch !important;
    --bs-gutter-x: 1.25rem;
  }
  .header-column__main,
  .header-column__sub{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .header-column__main h1 img.fv-copy{
    width: min(100%, 1000px);
    margin: 0 auto 16px;
  }
  .form-box{ max-width: 720px; margin: 0 auto; }
}
*/

/* SP全体：人物（左側）を多めに見せる */
@media (max-width: 991px){
  .header{
    background-position: 35% 26%; /* 必要なら !important を付与 */
  }
}

/* ===== かんたん見積フォーム（Form1） 枠線の統一 ===== */
:root{
  /* 枠線の既定色（selectに合わせたい色に変更OK） */
  --form-border: #ced4da;       /* 例：Bootstrap系の薄グレー */
  --form-focus:  #00a594;       /* フォーカス時の強調色（サイトのアクセント） */
}

/* 入力欄とプルダウンの枠線・角丸を統一 */
#Form1 select,
#Form1 input[type="text"],
#Form1 input[type="tel"],
#Form1 input[type="email"]{
  border: 1.5px solid var(--form-border);
  border-radius: 12px;          /* 既存の見た目に合わせて調整可 */
  background-color: #fff;
  box-shadow: none;             /* ブラウザ既定の内側影を無効化 */
}

/* ホバー（PCのみ）でほんのり色を寄せる */
@media (hover:hover){
  #Form1 select:hover,
  #Form1 input[type="text"]:hover,
  #Form1 input[type="tel"]:hover,
  #Form1 input[type="email"]:hover{
    border-color: color-mix(in srgb, var(--form-border) 60%, var(--form-focus) 40%);
  }
}

/* フォーカス時はアクセント色に統一（見やすい薄い外枠も） */
#Form1 select:focus,
#Form1 input[type="text"]:focus,
#Form1 input[type="tel"]:focus,
#Form1 input[type="email"]:focus{
  outline: 0;
  border-color: var(--form-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--form-focus) 25%, transparent);
}

/* iOSの自動入力で黄ばみ等が出る場合の見た目安定化（任意） */
#Form1 input:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: inherit;
}

/* FV直下リード文：サイズだけスッキリ調整 */
.header__lead{
  font-size: clamp(16px, 1.6vw, 18px);  /* SPで16px → PCで最大18px */
  line-height: 1.7;
  letter-spacing: .01em;
  margin-top: 2rem;                    /* 余白はお好みで */
}
.header__lead-big{
  font-weight: 800;
  font-size: clamp(18px, 2.1vw, 24px);  /* SPで18〜19px → 大きめ画面で〜24px */
}

/* 2行を少しだけ間延びさせない（任意） */
.header__lead-marker{ display:inline-block; margin-bottom:.15rem; }

/* PCだけサイズを底上げ（スマホは現状維持） */
@media (min-width: 992px){
  .header__lead{
    font-size: clamp(18px, 1.25vw, 22px);
  }
  .header__lead-big{
    font-size: clamp(22px, 1.9vw, 30px);
  }
}

/* 超ワイドでさらに少しだけ大きく（任意） */
@media (min-width: 1600px){
  .header__lead{ font-size: 21px; }   /* お好みで 20–22px */
  .header__lead-big{ font-size: 30px; } /* お好みで 28–32px */
}

/* iPad mini(768x1024) / iPad Air(820x1180) 縦向きだけ適用 */
@media (min-width: 768px) and (max-width: 820px) and (orientation: portrait){

  /* 1) FV直下のリード文を非表示 */
  .header__lead{
    display: none !important;
  }

  /* 2) 男性画像（見出しPNG）とフォームの間の余白を詰める */
  .header-column__main h1 img.fv-copy{
    margin-bottom: 8px !important;  /* 16px→8pxなどに圧縮。もっと詰めるなら 4px */
  }
  .form-box{
    margin-top: 0 !important;       /* フォーム側の上マージンをゼロに */
  }
}

/* デスクトップ小さめ幅（992〜1366px）では縦積み：見出しPNG → フォーム */
@media (min-width: 992px) and (max-width: 1366px){
  .header__contents .row{
    align-items: stretch !important;      /* 下揃え解除 */
    --bs-gutter-x: 1rem;                  /* ガター少し詰める */
  }
  .header__contents > .container-fluid{
    padding-left: 1rem !important;        /* 外側余白も少し詰める */
    padding-right: 1rem !important;
  }
  /* 2カラム → 1カラム（縦並び） */
  .header-column__main,
  .header-column__sub{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  /* 見出しPNGは大きめ＆中央寄せ・下余白を控えめに */
  .header-column__main h1 img.fv-copy{
    width: min(100%, 1100px);             /* お好みで 1000〜1200px に調整可 */
    height: auto;
    margin: 0 auto 12px;                  /* 画像とフォームの隙間を短めに */
  }
  /* フォームは中央寄せで窮屈さを解消 */
  .form-box{
    max-width: 760px;                     /* 720〜800px で好みに調整可 */
    margin: 0 auto;
  }
}

/* Bootstrapの .visually-hidden と同等のユーティリティ */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ===== ヒーロー背景：WebP優先／JPEGフォールバック ===== */

/* PC（≥992px） */
@media (min-width: 992px){
  .header{
    /* 旧ブラウザ向けフォールバック（先に書く） */
    background-image: url("../images/const_fv_bg1.jpg");
    background-repeat: no-repeat;
    background-size: cover;

    /* 対応ブラウザはWebPを使う */
    background-image: image-set(
      url("../images/const_fv_bg1.webp") type("image/webp") 1x,
      url("../images/const_fv_bg1.jpg")  type("image/jpeg") 1x
    );
  }
}

/* SP（≤991px） */
@media (max-width: 991px){
  .header{
    background-image: url("../images/const_fv_bg_sp002.jpg");
    background-repeat: no-repeat;
    background-size: cover;

    background-image: image-set(
      url("../images/const_fv_bg_sp002.webp") type("image/webp") 1x,
      url("../images/const_fv_bg_sp002.jpg")  type("image/jpeg") 1x
    );
  }
}

/* ===== LP-C：横スクロール/バウンド抑止（グローバル適用でも可） ===== */
html.is-lpc, .is-lpc body {
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
  touch-action: pan-y; /* 縦スクロールのみ */
}
@supports not (overflow: clip) {
  html.is-lpc, .is-lpc body { overflow-x: hidden; }
}

/* ===== SPのプルダウン/入力のタップ領域を拡大 ===== */
@media (max-width: 767.98px){
  /* プルダウン */
  select,
  .easy-form-box select {
    box-sizing: border-box;
    width: 100%;
    min-height: 56px;
    height: 56px;                 /* 明示的に高さ指定 */
    padding: 14px 42px 14px 14px; /* 右に▼分の余白 */
    font-size: 16px;              /* iOSの自動ズーム抑止 */
    border-radius: 10px;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%2399A1A8' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px 20px;
  }
  select::-ms-expand { display: none; } /* 旧Edge/IE */

  /* テキスト入力も高さを揃えると見栄え◎ */
  input[type="text"],
  input[type="tel"],
  input[type="email"]{
    min-height: 56px;
    height: 56px;
    font-size: 16px;
    border-radius: 10px;
  }
}

/* PC (>=992px) */
@media (min-width: 992px){
  .header{
    /* 既存の background-image / background を下記に置換 */
    background-image: image-set(
      url(../images/const_fv_bg1.webp) type("image/webp") 1x,
      url(../images/const_fv_bg1.jpg)  type("image/jpeg") 1x
    );
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0% 50%;
  }
}

/* SP (<=991px) */
@media (max-width: 991px){
  .header{
    background-image: image-set(
      url(../images/const_fv_bg_sp002.webp) type("image/webp") 1x,
      url(../images/const_fv_bg_sp002.jpg)  type("image/jpeg") 1x
    );
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
  }
}

/* ---- 固定フッターCTA：モバイル専用 ---- */
@media (max-width: 767px){
  .fix-navi{
    position: fixed;
    left: 0;                 /* ← 端から端まで */
    right: 0;                /* ← 端から端まで */
    bottom: 0;
    z-index: 9999;
    width: auto;             /* 100vwは使わない */
    max-width: 100%;
    background-color: #013384;
    box-shadow: 0 -2px 10px rgba(0,0,0,.08);
    text-align: center;
  }
  /* クリック領域を全面に */
  .fix-navi a{
    display: block;
    color: #fff !important;
    text-decoration: none;
    padding: 10px 16px;
    /* ノッチ環境での下余白（iPhoneなど） */
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    line-height: 1.35;
  }
  .fix-navi p{ margin: 0; font-size: 1.5rem; }
  .fix-navi-small{ display:block; font-size: 1.2rem; }
  .navi_cta{ width: 90%; margin: 0 auto; } /* 内側だけ少し狭める */
}

/* タブレット以上では非表示（d-md-none があっても保険で） */
@media (min-width: 768px){
  .fix-navi{ display:none; }
}

/* LP-Cでフォームが隠れないよう下余白を確保（モバイルのみ） */
@media (max-width: 767px){
  html.is-lpc body{
    padding-bottom: calc(64px + env(safe-area-inset-bottom)); /* CTAの高さぶん確保 */
  }
}

/* ============================
   LP-C：固定フッターCTAぶんの下余白を確保（スマホのみ）
   - 他ページへ影響しないよう <html class="is-lpc"> でスコープ
   - CTAの概算高さ 64px + iPhoneのノッチ安全領域を考慮
   ============================ */
@media (max-width: 767px){
  html.is-lpc body{
    /* CTAに隠れて最後の要素が押せなくなるのを防ぐ */
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
}

/* さらに厳密に：ページ内に .fix-navi が“存在する時だけ”下余白を付ける（対応ブラウザ向け）*/
@supports selector(html:has(.fix-navi)) {
  @media (max-width: 767px){
    html.is-lpc:has(.fix-navi) body{
      padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
  }
}

/* 例：サンクスページなどで余白を消したい場合は、body に is-thanks を付けて0に */
@media (max-width: 767px){
  html.is-lpc body.is-thanks{
    padding-bottom: 0;
  }
}


/* 画像ユーティリティ */
.fac-heading img{ max-width:100%; height:auto; }

/* 視覚的に非表示（SEO/スクリーンリーダー用） */
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===== タブ（施設名のみ） ===== */
.fac-nav-grid{
  list-style:none; padding-left:0;
  display:grid; grid-template-columns: repeat(5, minmax(0,1fr));
  gap:.65rem; margin:0 0 .5rem;
}
@media (max-width: 991.98px){
  .fac-nav-grid{
    display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.25rem;
    scroll-snap-type:x proximity;
  }
  .fac-nav-grid .nav-item{ flex:0 0 auto; scroll-snap-align:center; }
}
.fac-pill{
  --accent:#2563eb; --accent-bg:#eff6ff;
  display:flex; align-items:center; justify-content:center;
  width:100%;
  min-height:64px;
  border:1px solid #e5e7eb; background:#fff; border-radius:14px;
  padding:.6rem .9rem; line-height:1.1; color:#111827;
  text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.fac-pill:hover{ border-color:#cbd5e1; transform: translateY(-1px); }
.fac-label{ font-weight:700; font-size: clamp(.95rem, 1.3vw, 1.06rem); }
.nav-pills .fac-pill.active{
  background: var(--accent-bg);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, #e5e7eb);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent) inset, 0 6px 18px rgba(0,0,0,.06);
}
/* 施設別アクセント */
.fac-pill.is-office    { --accent:#2563eb; --accent-bg:#eff6ff; }
.fac-pill.is-store     { --accent:#d97706; --accent-bg:#fff7ed; }
.fac-pill.is-hospi

/* 見出し画像セクションの上下余白を詰める */
.fac-lead{
  margin-top: .5rem !important;
  margin-bottom: .5rem !important;
}

/* figure のデフォルト余白を消す */
.fac-lead-figure{ margin: 0; }

/* 画面幅に応じて少しだけ余白を増減（任意） */
@media (min-width: 992px){
  .fac-lead{
    margin-top: .75rem !important;
    margin-bottom: .75rem !important;
  }
}

/* 見出し画像セクションの上下マージンをタイトに */
html.is-lpc .fac-lead{
  margin-top: .25rem !important;
  margin-bottom: .5rem !important;
}
/* figure のデフォルト余白を削除 */
html.is-lpc .fac-lead-figure{ margin: 0; }
/* 見出しバナー（カバー画像）の上だけ少し詰める */
html.is-lpc .fac-heading{ margin-top: .5rem; }

/* --- パネルをグリッド化して、画像とテキストを同じレイヤーに重ねる --- */
html.is-lpc .fac-panel{



  display: grid;              /* 追加 */
  overflow: hidden;           /* 角丸を保つ */
}
html.is-lpc .fac-visual,
html.is-lpc .fac-body{
  grid-area: 1 / 1;           /* 同じセルに重ねる */
}
html.is-lpc .fac-visual{
  position: relative;         /* 既存の absolute を打ち消す */
  inset: auto;                /* 念のため初期化 */
  z-index: 0;
}
html.is-lpc .fac-body{
  position: relative;         /* 通常フローでOK（重なりはzで制御） */
  z-index: 1;
}

/* 背景画像は全面フィット */
html.is-lpc .fac-bg-img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* ====== LP-C ホットフィックス：パネル比率＆タイポ復元 ====== */

/* 1) パネルの高さ（PCで浅めに） */
html.is-lpc .fac-panel{ aspect-ratio: 16 / 9; min-height: 0; }          /* 基本 */
@media (min-width: 992px){
  html.is-lpc .fac-panel{ aspect-ratio: 21 / 9; }                        /* PC */
}
@media (min-width: 1400px){
  html.is-lpc .fac-panel{ aspect-ratio: 5 / 2; }                         /* 大画面 */
}
/* SPは中身優先で可変（はみ出し防止） */
@media (max-width: 767.98px){
  html.is-lpc .fac-panel{ aspect-ratio:auto; min-height:auto; }
}

/* 2) 課題テキストのサイズ（.small に勝つためセレクタ強化） */
@media (min-width: 768px){
  html.is-lpc .fac-body .h5{
    font-size: clamp(1.25rem, 1.8vw, 1.45rem);
    line-height: 1.3; margin: .4rem 0 .4rem;
  }
  html.is-lpc .fac-issues.small{
    font-size: 1.06rem;            /* タブレット */
    line-height: 1.65;
    column-gap: 2.2rem;
  }
  html.is-lpc .fac-issues.small li{ margin:.45rem 0; }
  html.is-lpc .fac-issues.small li::before{ width:.62rem; height:.62rem; top:.48rem; }
}
@media (min-width: 992px){
  html.is-lpc .fac-body .h5{ font-size: 1.6rem; line-height: 1.35; margin-bottom: .6rem; }
  html.is-lpc .fac-issues.small{
    columns: 2; column-gap: 2rem;
    font-size: 1.14rem;             /* PCでしっかり大きく */
    line-height: 1.75;
  }
  html.is-lpc .fac-issues.small li{ margin:.5rem 0; }
  html.is-lpc .fac-issues.small li::before{ width:.68rem; height:.68rem; top:.52rem; }
  html.is-lpc .fac-issues.small strong{ font-weight: 800; }
}
@media (min-width: 1200px){ html.is-lpc .fac-issues.small{ font-size: 1.18rem; } }
@media (min-width: 1400px){
  html.is-lpc .fac-issues.small{ font-size: 1.22rem; }
  html.is-lpc .fac-body .h5{ font-size: 1.8rem; }
}

/* 3) 画像の上にテキストを確実に重ねる（グリッド重ね方式） */
html.is-lpc .fac-panel{ display:grid; overflow:hidden; }                 /* 角丸維持 */
html.is-lpc .fac-visual, html.is-lpc .fac-body{ grid-area:1 / 1; }
html.is-lpc .fac-visual{ position:relative; inset:auto; z-index:0; }
html.is-lpc .fac-body{ position:relative; z-index:1; }
html.is-lpc .fac-bg-img{ width:100%; height:100%; object-fit:cover; object-position:center; }

/* ===== LP-C：施設タブの見た目を確実に復旧（重なり/白文字/ドット/余白） ===== */

/* 画像とテキストを同じレイヤーに重ねる（既存より後ろに置いて上書き） */
html.is-lpc .fac-panel{ display:grid; overflow:hidden; }
html.is-lpc .fac-visual, html.is-lpc .fac-body{ grid-area:1 / 1; }
html.is-lpc .fac-visual{ position:relative; inset:auto; z-index:0; }
html.is-lpc .fac-body{ position:relative; z-index:1; }

/* 文字色を白＋読みやすい影 */
html.is-lpc .fac-text-light{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.55); }

/* 箇条書きの視認性（ドットを擬似要素で） */
html.is-lpc .fac-issues{ list-style:none; padding-left:0; margin:0; }
html.is-lpc .fac-issues li{ position:relative; padding-left:1.15rem; margin:.42rem 0; }
html.is-lpc .fac-issues li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:.5rem; height:.5rem; border-radius:50%;
  background: currentColor; opacity:.95;
}

/* PC/タブレットの文字サイズ（.smallに勝てるようセレクタ強化） */
@media (min-width:768px){
  html.is-lpc .fac-body .h5{ font-size: clamp(1.25rem,1.8vw,1.5rem); line-height:1.3; margin:.4rem 0; }
  html.is-lpc .fac-issues{ font-size:1.06rem; line-height:1.65; column-gap:2.2rem; }
}
@media (min-width:992px){
  html.is-lpc .fac-issues{ columns:2; font-size:1.14rem; line-height:1.75; }
  html.is-lpc .fac-body .h5{ font-size:1.6rem; }
}

/* パネルの比率（SP 16:9 / PC 21:9） */
html.is-lpc .fac-panel{ aspect-ratio:16/9; }
@media (min-width:992px){ html.is-lpc .fac-panel{ aspect-ratio:21/9; } }

/* FV直下の見出し画像の上下余白をタイトに（さらに詰める版） */
html.is-lpc .fac-lead{ margin-top:.25rem!important; margin-bottom:.5rem!important; }
html.is-lpc .fac-lead-figure{ margin:0; }

/* ===== LP-C：見出し画像とバナーの間をさらに詰める ===== */
html.is-lpc .fac-lead{ margin-top:.1rem !important; margin-bottom:0 !important; }
html.is-lpc .fac-lead-figure{ margin:0; }
html.is-lpc .fac-heading{ margin-top:.35rem; }  /* まだ広ければ .15rem まで可 */

/* ※最終手段（必要なときだけ有効化）
html.is-lpc .fac-heading{ margin-top:-6px; }  // 画像自体に上下の白余白が含まれる場合
*/

/* ===== LP-C：タブのパネル内レイアウト（上/左にしっかり余白） ===== */
html.is-lpc .fac-body{
  padding: clamp(18px, 3.2vw, 28px); /* 上下左右の内側余白を増やす */
}
@media (min-width: 992px){
  html.is-lpc .fac-body{ padding: clamp(20px, 2.6vw, 32px); }
}

/* ===== LP-C：白文字＋ドット（視認性復旧） ===== */
html.is-lpc .fac-text-light{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.55); }

html.is-lpc .fac-issues{ list-style:none; padding-left:0; margin:0; }
html.is-lpc .fac-issues li{
  position:relative; padding-left:1.15rem; margin:.46rem 0;
}
html.is-lpc .fac-issues li::before{
  content:""; position:absolute; left:0; top:.58em;
  width:.56rem; height:.56rem; border-radius:50%;
  background: currentColor; opacity:.95;   /* 白文字＝白ドット */
}

/*（必要ならチェック記号に切替可：ULに .is-check を付けるだけ）
html.is-lpc .fac-issues.is-check li{ padding-left:1.4rem; }
html.is-lpc .fac-issues.is-check li::before{
  content:"✓"; width:auto; height:auto; background:none; top:.05em; left:0;
  font-weight:800; font-size:1.05em;
}
*/

/* ===== LP-C：施設バッジ（丸型・半透明）を確実に表示 ===== */
html.is-lpc .fac-body .fac-badge{
  display:inline-block;
  font-size:.9rem; font-weight:700; letter-spacing:.01em;
  padding:.38rem .7rem; margin-bottom:.3rem;
  color:#fff; background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.35);
  border-radius:9999px;
}
@media (min-width: 992px){
  html.is-lpc .fac-body .fac-badge{ font-size:1rem; padding:.42rem .8rem; }
}

/* ===== LP-C：重なりの安定化（画像の上にテキストを重ねる） ===== */
html.is-lpc .fac-panel{ display:grid; overflow:hidden; border-radius:16px; }
html.is-lpc .fac-visual, html.is-lpc .fac-body{ grid-area:1 / 1; }
html.is-lpc .fac-visual{ position:relative; inset:auto; z-index:0; }
html.is-lpc .fac-body{ position:relative; z-index:1; }
html.is-lpc .fac-bg-img{ width:100%; height:100%; object-fit:cover; object-position:center; }

/* 高さ比率（SP=内容優先 / PC=浅め） */
@media (max-width: 767.98px){
  html.is-lpc .fac-panel{ aspect-ratio:auto; min-height:auto; }
}
@media (min-width: 768px){
  html.is-lpc .fac-panel{ aspect-ratio:16/9; }
}
@media (min-width: 992px){
  html.is-lpc .fac-panel{ aspect-ratio:21/9; }
}

/* ── LP-C：見出し画像まわりの余白をタイトに ─────────────────── */
html.is-lpc .fac-lead{                /* 画像見出しセクション */
  margin-top: 0 !important;
  margin-bottom: .25rem !important;   /* さらに詰めるなら 0 に */
  padding: 0 !important;
}
html.is-lpc .fac-lead-figure{ margin: 0; }  /* figureの既定余白を消す */

/* 見出しバナー（その下の横長画像）との間隔を詰める */
html.is-lpc .fac-heading{
  margin-top: .2rem !important;       /* もっと詰めたい → 0 or -4px も可 */
  margin-bottom: .25rem !important;   /* タブまでの間もタイトに */
}
@media (min-width: 992px){
  html.is-lpc .fac-heading{ margin-top: .15rem !important; }
}

/* 最終手段（本当に密着させたい時だけコメントアウトを外す）
html.is-lpc .fac-heading{ margin-top: -6px !important; }
*/
/* ── LP-C：施設セクションの縦リズムを統一（SP～PCで最大40px）── */
html.is-lpc{
  /* 端末幅に応じて20～40pxで自動スケール */
  --fac-gap: clamp(20px, 4.2vw, 40px);
}

/* 見出し画像①（「法人現場で～」）の下 */
html.is-lpc .fac-lead{
  margin-top: 0 !important;
  margin-bottom: var(--fac-gap) !important;
  padding: 0 !important;
}
html.is-lpc .fac-lead-figure{ margin: 0; }

/* 見出し画像②（「様々な施設の課題を解決」バナー）の上下 */
html.is-lpc .fac-heading{
  margin: 0 0 var(--fac-gap) !important;   /* タブとの間隔もここで確保 */
}
/* インラインstyleが残っていても上書きする保険 */
html.is-lpc figure.fac-heading[style]{ margin: 0 0 var(--fac-gap) !important; }

/* タブ（pill列）の下に同じだけの余白を確保 */
html.is-lpc .fac-nav-grid{
  margin: 0 0 var(--fac-gap) !important;
  padding-bottom: 0 !important;
}

/* タブ内容（.tab-content）開始位置を統一（.mt-3 を上書き） */
html.is-lpc .fac-panels{
  margin-top: var(--fac-gap) !important;
}



/* ── LP-C：タブとパネルの間だけ少しタイトに ── */
html.is-lpc{
  /* 既存の --fac-gap をベースに 60% の間隔に（PCで40px→24px程度） */
  --fac-gap-tabs: calc(var(--fac-gap) * .6);
}

/* タブ列の下だけを短く。パネル側は margin-top を0にして片側で管理 */
html.is-lpc .fac-nav-grid{ margin-bottom: var(--fac-gap-tabs) !important; }
html.is-lpc .fac-panels   { margin-top: 0 !important; }

/* SPはもう少しだけタイト（任意） */
@media (max-width: 575.98px){
  html.is-lpc{ --fac-gap-tabs: calc(var(--fac-gap) * .5); } /* 20px→10px程度 */
}

/* ── LP-C：PCでパネル高さをさらに浅く（下の余白をカット） ── */
/* SP/タブは現状維持。PC=32:9、超広画面=40:9 でシャープに */
@media (min-width: 992px){
  html.is-lpc .fac-panel{ aspect-ratio: 32 / 9; }
}
@media (min-width: 1400px){
  html.is-lpc .fac-panel{ aspect-ratio: 40 / 9; }
}

/* 旧Safariフォールバック（aspect-ratio非対応端末向けの上書き） */
@supports not (aspect-ratio: 1 / 1){
  @media (min-width: 992px){
    html.is-lpc .fac-panel::before{ padding-top: 28.125%; } /* 9/32 */
  }
  @media (min-width: 1400px){
    html.is-lpc .fac-panel::before{ padding-top: 22.5%; }   /* 9/40 */
  }
}

/* ── LP-C：PCだけ 背景を強くぼかして暗さも少し追加 ── */
@media (min-width: 992px){
  html.is-lpc{
    --pc-blur: 12px;   /* 強ぼかし。8～16pxでお好み調整 */
    --pc-dim:  .28;    /* うっすら暗く（0.20～0.35で調整） */
  }

  /* 重なり順：画像(0) ← ぼかしオーバーレイ(1) ← テキスト(2) */
  html.is-lpc .fac-panel{ position: relative; }
  html.is-lpc .fac-visual{ z-index: 0; }
  html.is-lpc .fac-body  { z-index: 2; }

  /* 画像の“上”にぼかしオーバーレイを敷く（テキストはシャープのまま） */
  html.is-lpc .fac-panel::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
    background: rgba(0,0,0,var(--pc-dim));
    -webkit-backdrop-filter: blur(var(--pc-blur)) saturate(108%);
            backdrop-filter: blur(var(--pc-blur)) saturate(108%);
    will-change: backdrop-filter;
  }

  /* フォールバック：backdrop-filter非対応ブラウザは画像側に強ぼかし */
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
    html.is-lpc .fac-bg-img{
      filter: blur(var(--pc-blur));
      transform: scale(1.08); /* 端のにじみ回避のため少し拡大 */
    }
    html.is-lpc .fac-panel::after{ background: rgba(0,0,0,var(--pc-dim)); }
  }
}

/* 任意：このパネルだけ“ぼかし無し”にしたい場合（個別で外せます） */
html.is-lpc .fac-panel.no-blur::after{
  -webkit-backdrop-filter:none; backdrop-filter:none; background:none;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  html.is-lpc .fac-panel.no-blur .fac-bg-img{ filter:none; transform:none; }
}

/* ── LP-C：課題→解決を“1行のまま”明確化（強調チップ＋矢印） ── */

/* 行頭ドットは現状維持（白文字＋ドット）。行間だけ少しゆったり */
html.is-lpc .fac-issues li{ margin: .45rem 0; }

/* 解決パート（<strong>）を小さなチップに */
html.is-lpc .fac-issues li strong{
  display: inline-flex; align-items: center; gap: .35em;
  padding: .18em .55em;
  border-radius: 999px;
  font-weight: 800;
  color: #fff;
  background: rgba(0,0,0,.28);               /* デフォルト下地（薄い黒） */
  border: 1px solid rgba(255,255,255,.28);
  line-height: 1.15;
}

/* 強調の前に“→”を自動付与（テキストはそのままでOK） */
html.is-lpc .fac-issues li strong::before{
  content: "→";
  opacity: .9;
  margin-right: .1em;
}

/* 施設ごとのアクセント色（タブ色と揃える） */
html.is-lpc #pane-office    .fac-issues li strong{
  background: color-mix(in srgb, #2563eb 22%, rgba(0,0,0,.28));
  border-color: rgba(37,99,235,.40);
}
html.is-lpc #pane-store     .fac-issues li strong{
  background: color-mix(in srgb, #ff7800 26%, rgba(0,0,0,.28));
  border-color: rgba(255,120,0,.45);
}
html.is-lpc #pane-hospital  .fac-issues li strong{
  background: color-mix(in srgb, #059669 22%, rgba(0,0,0,.28));
  border-color: rgba(5,150,105,.40);
}
html.is-lpc #pane-warehouse .fac-issues li strong{
  background: color-mix(in srgb, #7c3aed 22%, rgba(0,0,0,.28));
  border-color: rgba(124,58,237,.40);
}
html.is-lpc #pane-apartment .fac-issues li strong{
  background: color-mix(in srgb, #db2777 22%, rgba(0,0,0,.28));
  border-color: rgba(219,39,119,.40);
}

/* PCは読みやすく少しだけサイズUP（高さが増えすぎない範囲） */
@media (min-width: 992px){
  html.is-lpc .fac-issues li strong{
    padding: .22em .65em;
    letter-spacing: .01em;

  }
}

/* デフォルトは矢印なし */
html.is-lpc .fac-issues li strong::before{ content: none; }

/* ULに .is-auto-arrow を付けた場合だけ矢印を付与 */
html.is-lpc .fac-issues.is-auto-arrow li strong::before{
  content:"→"; opacity:.9; margin-right:.1em;
}

/* 見出しの視認性と整列（白背景でも暗背景でも読みやすく） */
html.is-lpc .fac-body .h5.mb-2{
  color:#fff;               /* 背景が明るめでも埋もれない */
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  letter-spacing:.01em;
  margin-bottom:.5rem;      /* 見出し→リストの間隔をほんの少し広げる */
}

/* 課題→解決の“チップ”が強すぎると感じたら控えめに（お好みで） */
html.is-lpc .fac-issues li strong{
  background: rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.22);
}

/* ── LP-C：スマホで「課題 → [解決チップ]」の間隔を少し広げる ── */
@media (max-width: 575.98px){
  html.is-lpc .fac-issues li strong{
    margin-left: .4em;        /* ← お好みで .3～.6em に調整可 */
    padding: .22em .62em;     /* 文字と枠の密度も少しだけゆるく */
  }
  /* もしCSSで矢印を付けている運用(.is-auto-arrow)なら、矢印とチップの隙間も確保 */
  html.is-lpc .fac-issues.is-auto-arrow li strong::before{
    margin-right: .3em;
  }
}

/* タブレットも少し広げたい場合は、次も追加（任意） */
@media (min-width: 576px) and (max-width: 767.98px){
  html.is-lpc .fac-issues li strong{ margin-left: .3em; }
}

/* ── LP-C：背景画像とテキストのコントラスト最適化 ── */
html.is-lpc{
  /* 画像の暗さ(=スクリーン)とPC時のブラー量をまとめて調整できる変数 */
  --scrim-sp: .24;  /* SP/タブの暗さ（0.18～0.32で調整） */
  --scrim-pc: .30;  /* PCの暗さ   （0.24～0.36で調整） */
  --blur-pc:  12px; /* PCのぼかし（8～16pxで調整）    */
}

/* 画像の上に“読ませるための”オーバーレイを常時敷く（文字は最前面） */
html.is-lpc .fac-panel{ position: relative; }
html.is-lpc .fac-visual{ z-index: 0; }
html.is-lpc .fac-body  { z-index: 2; }

/* SP/タブ：ぼかしは使わず、軽いビネット＋縦グラでコントラスト確保 */
@media (max-width: 991.98px){
  html.is-lpc .fac-panel::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
    background:
      /* 角をほんのり落とすビネット */
      radial-gradient(120% 95% at 50% 30%, rgba(0,0,0,0) 58%, rgba(0,0,0,.10) 100%),
      /* 全体の薄い暗さ（下に向かって僅かに強く） */
      linear-gradient(180deg, rgba(0,0,0,calc(var(--scrim-sp)*.90)) 0%,
                              rgba(0,0,0,var(--scrim-sp)) 100%);
  }
}

/* PC：強ぼかし＋スクリーン（既存の意図を継承しつつ読みやすさ最優先） */
@media (min-width: 992px){
  html.is-lpc .fac-panel::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
    background:
      radial-gradient(120% 90% at 50% 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,.12) 100%),
      linear-gradient(180deg, rgba(0,0,0,calc(var(--scrim-pc)*.9)) 0%,
                              rgba(0,0,0,var(--scrim-pc)) 100%);
    -webkit-backdrop-filter: blur(var(--blur-pc)) saturate(108%);
            backdrop-filter: blur(var(--blur-pc)) saturate(108%);
    will-change: backdrop-filter;
  }
  /* フォールバック：backdrop-filter非対応では画像側をぼかす */
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
    html.is-lpc .fac-bg-img{ filter: blur(var(--blur-pc)); transform: scale(1.06); }
  }
}

/* テキスト自体も読みやすく（白＋やや強めのシャドウ） */
html.is-lpc .fac-text-light{
  color:#fff;
  text-shadow:
    0 1px 2px rgba(0,0,0,.65),
    0 0 1px rgba(0,0,0,.35);
}

/* 課題→解決の“解決チップ”は少しコントラストを上げる */
html.is-lpc .fac-issues li strong{
  background: rgba(0,0,0,.30);
  border-color: rgba(255,255,255,.35);
}

/* 文字が端に寄りすぎないよう、内側余白を少しだけ増やす（読心地） */
html.is-lpc .fac-body{
  padding: clamp(18px, 3.2vw, 30px);
}
@media (min-width: 992px){
  html.is-lpc .fac-body{ padding: clamp(20px, 2.6vw, 34px); }
}

/* ── LP-C：スマホだけ「課題 → 解決」を縦積みで見やすく ── */
@media (max-width: 575.98px){
  /* 解決パートを次の行へ */
  html.is-lpc .fac-issues li strong{
    display:block;
    margin-left:0;          /* 1行時の余白をリセット */
    margin-top:.35rem;      /* 行間を確保 */
    padding:.24em .66em;    /* タップ/視認しやすい密度 */
  }

  /* 「解決」ラベルを付けて明確化（※過去の矢印無効化に勝つため !important） */
  html.is-lpc .fac-issues li strong::before{
    content:"解決" !important;
    display:inline-block;
    margin-right:.3em;
    padding:.08em .5em;
    font-weight:800; font-size:.78em; letter-spacing:.04em;
    color:#fff; border-radius:999px; border:1px solid rgba(255,255,255,.35);
    background: rgba(0,0,0,.28);
    vertical-align:middle;
  }

  /* 施設ごとのアクセント色（スマホ時も適用） */
  html.is-lpc #pane-office    .fac-issues li strong::before{ background: color-mix(in srgb, #2563eb 24%, rgba(0,0,0,.28)); }
  html.is-lpc #pane-store     .fac-issues li strong::before{ background: color-mix(in srgb, #ff7800 28%, rgba(0,0,0,.28)); }
  html.is-lpc #pane-hospital  .fac-issues li strong::before{ background: color-mix(in srgb, #059669 24%, rgba(0,0,0,.28)); }
  html.is-lpc #pane-warehouse .fac-issues li strong::before{ background: color-mix(in srgb, #7c3aed 24%, rgba(0,0,0,.28)); }
  html.is-lpc #pane-apartment .fac-issues li strong::before{ background: color-mix(in srgb, #db2777 24%, rgba(0,0,0,.28)); }
}

/* スマホ時の左インデント（［課題］チップを使っている場合の保険） */
@media (max-width: 575.98px){
  html.is-lpc .fac-issues li{ padding-left: 4.2em; }
}

/* ── LP-C：中間幅(600–720px)で「課題 → 解決」を縦積みに ── */
@media (min-width: 600px) and (max-width: 720px){
  /* 解決チップを次行へ */
  html.is-lpc .fac-issues li strong{
    display:block;
    margin-left: 0;
    margin-top: .32rem;
    padding: .22em .64em;
  }
  /* 「解決」ラベルを付与（スマホ実装と同等の見え方） */
  html.is-lpc .fac-issues li strong::before{
    content:"解決" !important;
    display:inline-block;
    margin-right:.3em;
    padding:.08em .5em;
    font-weight:800; font-size:.78em; letter-spacing:.04em;
    color:#fff; border-radius:999px; border:1px solid rgba(255,255,255,.35);
    background: rgba(0,0,0,.28);
    vertical-align:middle;
  }
  /* 課題ラベルを使っている場合の左インデント保険 */
  html.is-lpc .fac-issues li{ padding-left: clamp(4.2em, 8vw, 4.8em); }

  /* 矢印をHTMLで <span class="fac-sep">→</span> にしている場合だけ隠す（任意） */
  html.is-lpc .fac-sep{ display:none; }

  /* 施設ごとのアクセント色（スマホと同等の強調） */
  html.is-lpc #pane-office    .fac-issues li strong::before{ background: color-mix(in srgb, #2563eb 24%, rgba(0,0,0,.28)); }
  html.is-lpc #pane-store     .fac-issues li strong::before{ background: color-mix(in srgb, #ff7800 28%, rgba(0,0,0,.28)); }
  html.is-lpc #pane-hospital  .fac-issues li strong::before{ background: color-mix(in srgb, #059669 24%, rgba(0,0,0,.28)); }
  html.is-lpc #pane-warehouse .fac-issues li strong::before{ background: color-mix(in srgb, #7c3aed 24%, rgba(0,0,0,.28)); }
  html.is-lpc #pane-apartment .fac-issues li strong::before{ background: color-mix(in srgb, #db2777 24%, rgba(0,0,0,.28)); }
}

/* ── LP-C：箇条書きの左インデントを適正化 ── */
html.is-lpc .fac-issues{
  /* 箇条書き全体の基本インデント（必要なら 1.0rem〜1.4rem で微調整） */
  padding-left: 1.15rem !important;
  list-style-position: outside;  /* 既定どおり、丸は外側 */
}

html.is-lpc .fac-issues li{
  padding-left: 0 !important;    /* 以前の“課題ラベル用”の余白を無効化 */
  text-indent: 0 !important;     /* ぶら下げインデントがあれば無効化 */
  margin: .44rem 0;              /* 行間は控えめに */
}

/* もし過去の「課題ラベル」疑似要素が生きていても出さない */
html.is-lpc .fac-issues li::before{ content: none !important; }

/* ── LP-C：施設ごとのアクセント色を統一定義 ── */
html.is-lpc #pane-office    { --accent: #2563eb; }  /* ブルー */
html.is-lpc #pane-store     { --accent: #ff7800; }  /* オレンジ（店舗） */
html.is-lpc #pane-hospital  { --accent: #059669; }  /* グリーン */
html.is-lpc #pane-warehouse { --accent: #7c3aed; }  /* パープル */
html.is-lpc #pane-apartment { --accent: #db2777; }  /* ピンク */

/* 「解決」チップ（<strong>）の下地色と枠色をタブと完全一致に */
html.is-lpc #pane-office    .fac-issues li strong,
html.is-lpc #pane-store     .fac-issues li strong,
html.is-lpc #pane-hospital  .fac-issues li strong,
html.is-lpc #pane-warehouse .fac-issues li strong,
html.is-lpc #pane-apartment .fac-issues li strong{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color:#fff; font-weight:800;
}

/* 「解決」ラベル（strong::before）も同色で統一 */
html.is-lpc #pane-office    .fac-issues li strong::before,
html.is-lpc #pane-store     .fac-issues li strong::before,
html.is-lpc #pane-hospital  .fac-issues li strong::before,
html.is-lpc #pane-warehouse .fac-issues li strong::before,
html.is-lpc #pane-apartment .fac-issues li strong::before{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color:#fff;
}

/* スマホ/中間幅での“縦積み”ルールはそのまま有効（先の指定が勝つよう !important 付与済） */

/* ── LP-C：施設別アクセント色の共通マップ ── */
html.is-lpc{
  --acc-office:    #2563eb;  /* オフィス：ブルー */
  --acc-store:     #ff7800;  /* 店舗：オレンジ（この色で統一） */
  --acc-hospital:  #059669;  /* 病院：グリーン */
  --acc-warehouse: #7c3aed;  /* 工場・倉庫：パープル */
  --acc-apartment: #db2777;  /* マンション：ピンク */
}

/* タブ側に割当（.fac-pill のクラスに紐づけ） */
html.is-lpc .fac-pill.is-office    { --accent: var(--acc-office); }
html.is-lpc .fac-pill.is-store     { --accent: var(--acc-store); }
html.is-lpc .fac-pill.is-hospital  { --accent: var(--acc-hospital); }
html.is-lpc .fac-pill.is-warehouse { --accent: var(--acc-warehouse); }
html.is-lpc .fac-pill.is-apartment { --accent: var(--acc-apartment); }

/* パネル側に割当（pane ID に紐づけ） */
html.is-lpc #pane-office    { --accent: var(--acc-office); }
html.is-lpc #pane-store     { --accent: var(--acc-store); }
html.is-lpc #pane-hospital  { --accent: var(--acc-hospital); }
html.is-lpc #pane-warehouse { --accent: var(--acc-warehouse); }
html.is-lpc #pane-apartment { --accent: var(--acc-apartment); }

/* アクティブタブ：テキスト/枠/背景をアクセントに準拠させる */
html.is-lpc .nav-pills .fac-pill.active{
  color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 14%, #fff) !important;
  border-color: color-mix(in srgb, var(--accent) 42%, #e5e7eb) !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 26%, transparent) inset,
    0 6px 18px rgba(0,0,0,.06);
}

/* strong（解決チップ）本体とラベルをアクセント色で統一 */
html.is-lpc .tab-pane .fac-issues li strong{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color:#fff; font-weight:800;
}
html.is-lpc .tab-pane .fac-issues li strong::before{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color:#fff;
}

/* スマホだけ、見出し横の「課題→解決」を隠す */
@media (max-width: 575.98px){
  /* 推奨：バッジに fac-legend を付けている場合 */
  html.is-lpc .fac-panel .fac-body .h5 .fac-legend{ display:none !important; }

  /* もし fac-legend を付けていない場合のフォールバック：
     見出し(h5)直下の .badge を非表示（他のバッジには影響なし） */
  html.is-lpc .fac-panel .fac-body .h5 > .badge{ display:none !important; }
}



/* iPad Pro (1024x1366) 縦だけ：3カラム＋強め圧縮で確実に収める */
@media (min-width: 992px) and (max-width: 1199.98px) and (orientation: portrait) {
  /* テキストブロックの横幅を最適化（画面幅いっぱい使う） */
  html.is-lpc .fac-body { max-width: 96vw; }

  /* リストを3カラム固定にして縦の伸びを根本削減 */
  html.is-lpc .fac-text-pc .fac-issues{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(280px, 1fr)) !important;
    gap: 8px 16px !important; /* 行×列の間隔を圧縮 */
  }

  /* 各行は「左：課題／右：ピル」で横並び固定、文字サイズも少し絞る */
  html.is-lpc .fac-text-pc .fac-issues li{
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center;
    column-gap: 10px;
    font-size: 0.92rem;     /* 可読性を保ちつつ圧縮 */
    line-height: 1.45;
    padding: 1px 0;
  }

  /* ピル（<strong>）は1行死守＆内側余白を軽量化 */
  html.is-lpc .fac-text-pc .fac-issues li > strong{
    white-space: nowrap !important;
    padding: .14em .44em !important;
    border-width: 1px !important;
  }

  /* パネル下端の安全余白だけ確保（角丸での見切れ防止） */
  html.is-lpc .fac-body .fac-text-pc{ padding-bottom: 18px !important; }

  /* パネル自体の高さは画像比率を変えず“自動”で追従させる */
  html.is-lpc .fac-panel{
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: unset !important;  /* 以前のmin-height指定を無効化 */
  }
}



/* ===== 補助金ティーザー：可読性アップ（白地×濃色文字） ===== */
html.is-lpc .subsidy-teaser__card{
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #E6E6E6 !important;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08); /* ごく薄い影 */
  text-shadow: none !important;                  /* 白地なので影は不要 */
}

html.is-lpc .subsidy-teaser__lead{
  color: #0F172A;             /* 濃紺寄りの黒でコントラスト確保 */
}
html.is-lpc .subsidy-teaser__points{ color:#1F2937; opacity:1; }
html.is-lpc .subsidy-teaser__note{ color:#475569; opacity:1; }

/* ボタン：アクセント色はそのまま、アウトラインは黒文字に */
html.is-lpc .subsidy-teaser__cta .btn.btn-accent{
  background: var(--accent, #FF7800) !important;
  color: #fff !important;
  border: none !important;
}
html.is-lpc .subsidy-teaser__cta .btn.btn-outline-light{
  border-color: #D0D5DD !important;
  color: #111 !important;
  background: #fff !important;
}
html.is-lpc .subsidy-teaser__cta .btn.btn-outline-light:hover{
  background: #F9FAFB !important;
}

/* 余白はそのまま。必要なら微調整（任意） */
html.is-lpc .subsidy-teaser { padding: clamp(16px, 3vw, 28px) 0; }
html.is-lpc .subsidy-teaser__card{ padding: clamp(14px, 2.4vw, 24px); }





/* LP-C: 補助金バナーを .container と同じ幅に & 余白を少し詰める */
html.is-lpc .subsidy-banner{
  display:block;
  width:100%;
  margin: clamp(12px, 2.2vw, 20px) auto clamp(28px, 4vw, 48px) auto; /* 上下余白を詰め */
  padding-left: 12px;
  padding-right: 12px;
}

/* Bootstrap 5 の .container と同じ最大幅 */
@media (min-width: 992px){  /* lg */
  html.is-lpc .subsidy-banner{ max-width: 960px; }
}
@media (min-width: 1200px){ /* xl */
  html.is-lpc .subsidy-banner{ max-width: 1140px; }
}
@media (min-width: 1400px){ /* xxl */
  html.is-lpc .subsidy-banner{ max-width: 1320px; }
}

/* 画像の基本 */
html.is-lpc .subsidy-banner picture,
html.is-lpc .subsidy-banner img{
  display:block; 
  width:100%; 
  height:auto; 
  /* border-radius:16px; */
}

/* 直後のCTAが重ならない保険（そのまま維持） */
html.is-lpc .subsidy-banner + section,
html.is-lpc .subsidy-banner + div{
  position:relative; z-index:1;
  padding-top: clamp(6px, 1.6vw, 16px);
}
html.is-lpc .subsidy-banner + section .cta-ttl,
html.is-lpc .subsidy-banner + div .cta-ttl{
  position:relative; top:0 !important; margin-top:0 !important;
}

/* バナー上の余白だけをタイトにする */
html.is-lpc .subsidy-banner{
  margin-top: clamp(6px, 1.2vw, 12px) !important; /* もっと詰めたければ 0 に */
}
/* SPはさらに詰めたい場合（任意） */
@media (max-width: 767.98px){
  html.is-lpc .subsidy-banner{ margin-top: 6px !important; }
}

/* === LP-C: 施設別セクション(#FacilityTabs)の下余白を詰める === */
html.is-lpc #FacilityTabs{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* 内部で余白を持っていそうな要素も下だけゼロに */
html.is-lpc #FacilityTabs .fac-panels,
html.is-lpc #FacilityTabs .container,
html.is-lpc #FacilityTabs .tab-content{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* 最内周（表示中タブのカード周り）も保険でゼロに */
html.is-lpc #FacilityTabs .tab-pane.show .fac-panel{
  margin-bottom: 0 !important;
}
html.is-lpc #FacilityTabs .fac-issues{ margin-bottom: 0 !important; }

/* 施設別セクションの直後が“補助金バナー”の場合の最小ギャップ */
html.is-lpc #FacilityTabs + .subsidy-banner{
  margin-top: clamp(6px, 1vw, 14px) !important; /* さらに詰めたいなら 0 に */
}

/* もしバナーを <section class="subsidy-banner-sec"><div class="container">… で包んでいる場合 */
html.is-lpc #FacilityTabs + .subsidy-banner-sec{
  padding-top: clamp(6px, 1vw, 14px) !important;
}


/* CTA 見出しの黒ピルをコンテンツ幅にする */
.cta-ttl { 
  text-align: center;           /* 中央寄せ */
}

.cta-ttl-bg {
  display: inline-flex;         /* 中身ぶんの幅にする＆中央揃え */
  align-items: center;
  justify-content: center;
  background: #333;             /* 既存の背景色でOK */
  color: #fff;
  padding: 12px 24px;           /* ほどよい内側余白 */
  border-radius: 9999px;        /* 完全な pill 形状 */
  margin: 0 auto 16px;          /* 中央寄せ＆下マージン */
  width: auto;                  /* 念のため明示 */
  max-width: min(92vw, 960px);  /* テキスト長くてもはみ出さない保険 */
  line-height: 1.3;
}

/* 必要ならモバイルだけ少しコンパクトに */
@media (max-width: 575.98px) {
  .cta-ttl-bg {
    padding: 10px 18px;
    font-size: 1.25rem;
  }
}


/* ===== Form intro (footer form header copy) ===== */
.form .form-intro {            /* セクション上下の余白（全端末） */
  margin: 8px 0 20px;
}

.form .form-intro-main {       /* メインコピー */
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .02em;
  margin: 0 0 6px;
  font-size: 1.375rem;         /* ~575px */
}

.form .form-intro-sub {        /* サブコピー */
  color: #4a4a4a;
  line-height: 1.6;
  font-size: 0.98rem;          /* ~575px */
}

/* 576px~（スマホ横/小タブレット） */
@media (min-width: 576px) {
  .form .form-intro { margin: 10px 0 22px; }
  .form .form-intro-main { font-size: 1.5rem; }
  .form .form-intro-sub  { font-size: 1.05rem; }
}

/* 768px~（タブレット） */
@media (min-width: 768px) {
  .form .form-intro { margin: 12px 0 24px; }
  .form .form-intro-main { font-size: 1.75rem; }
  .form .form-intro-sub  { font-size: 1.1rem; }
}

/* 992px~（PC） */
@media (min-width: 992px) {
  .form .form-intro { margin: 14px 0 26px; }
  .form .form-intro-main { font-size: 2rem; }
}

/* ラジオの見やすさUP（色・サイズ・フォーカス） */
.form .form-check-input {
  width: 1.1em;
  height: 1.1em;
  margin-right: .5rem;
  vertical-align: -2px;              /* ラベルと基線合わせ */
  accent-color: #FF7800;             /* チェック時カラー（対応ブラウザは自動適用） */
}

.form .form-check-input:focus {
  outline: 2px solid #FF7800;
  outline-offset: 2px;                /* キーボード操作でも見やすく */
}

.form .form-check > label {
  cursor: pointer;
  font-weight: 600;                   /* ラベルを少し太く */
}

/* モバイルは少し大きめに */
@media (max-width: 575.98px) {
  .form .form-check-input {
    width: 1.2em;
    height: 1.2em;
  }
}

/* ===== 同意チェックの視認性UP（該当1個のみ） ===== */
/* ラベル全体を押しやすく＆並びをきれいに */
label[for="flexCheckIndeterminate-1"]{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  cursor:pointer;
  font-weight:600;
  padding:.25rem .5rem;        /* タッチターゲット拡大 */
  border-radius:.5rem;
}

/* チェックボックス自体を太枠・少し大きめに */
#flexCheckIndeterminate-1.form-check-input{
  width:1.25rem;
  height:1.25rem;
  border:2px solid #4a4a4a;    /* 枠線を濃く */
  border-radius:.25rem;
  background-color:#fff;
  box-shadow:none;
}

/* チェック時の色（ブランド色） */
#flexCheckIndeterminate-1.form-check-input:checked{
  background-color:#FF7800;
  border-color:#FF7800;
}

/* フォーカス時の見やすいリング（キーボード操作にも配慮） */
#flexCheckIndeterminate-1.form-check-input:focus{
  outline:2px solid #FF7800;
  outline-offset:2px;
  box-shadow:0 0 0 .2rem rgba(255,120,0,.25);
}

/* モバイルはさらに大きめ＆タップ余白UP */
@media (max-width:575.98px){
  #flexCheckIndeterminate-1.form-check-input{
    width:1.35rem;
    height:1.35rem;
  }
  label[for="flexCheckIndeterminate-1"]{
    padding:.5rem .75rem;
  }
}

/* 高コントラスト環境のフォーカス配慮 */
@media (forced-colors: active){
  #flexCheckIndeterminate-1.form-check-input:focus{
    outline:2px solid Highlight;
  }
}


/* ===== 同意チェックの視認性UP（FV＋フッターの両方） ===== */
/* ラベル全体を押しやすく＆並びをきれいに */
label[for="flexCheckIndeterminate-1"],
.form-box__privacy-check label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  font-weight: 600;
  padding: .25rem .5rem;         /* タッチターゲット拡大 */
  border-radius: .5rem;
}

/* チェックボックス自体を太枠・少し大きめに */
#flexCheckIndeterminate-1.form-check-input,
#flexCheckIndeterminate.form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #4a4a4a;     /* 枠線を濃く */
  border-radius: .25rem;
  background-color: #fff;
  box-shadow: none;
  vertical-align: -2px;
}

/* チェック時の色（ブランド色） */
#flexCheckIndeterminate-1.form-check-input:checked,
#flexCheckIndeterminate.form-check-input:checked {
  background-color: #FF7800;
  border-color: #FF7800;
}

/* フォーカス時の見やすいリング（キーボード操作にも配慮） */
#flexCheckIndeterminate-1.form-check-input:focus,
#flexCheckIndeterminate.form-check-input:focus {
  outline: 2px solid #FF7800;
  outline-offset: 2px;
  box-shadow: 0 0 0 .2rem rgba(255,120,0,.25);
}

/* モバイルはさらに大きめ＆タップ余白UP */
@media (max-width: 575.98px) {
  #flexCheckIndeterminate-1.form-check-input,
  #flexCheckIndeterminate.form-check-input {
    width: 1.35rem;
    height: 1.35rem;
  }
  label[for="flexCheckIndeterminate-1"],
  .form-box__privacy-check label {
    padding: .5rem .75rem;
  }
}

/* 高コントラスト環境のフォーカス配慮 */
@media (forced-colors: active) {
  #flexCheckIndeterminate-1.form-check-input:focus,
  #flexCheckIndeterminate.form-check-input:focus {
    outline: 2px solid Highlight;
  }
}

/* === HIKVISIONバナー === */
.hik-banner{
  margin:20px auto;          /* 上下20px固定 & 中央寄せ */
  max-width:1200px;          /* 本文幅に合わせる */
  /* border-radius:16px; */
  /* box-shadow:0 10px 30px rgba(0,0,0,.12); */
  overflow:hidden;
  aspect-ratio:1200/320;     /* CLS対策（PC比率） */
}
.hik-banner, .hik-banner picture{ display:block; padding:0; border:0; }
.hik-banner img{ display:block; width:100%; height:auto; vertical-align:middle; }

/* スマホ：左右20pxの“視覚的余白”、比率もSP用に */
@media (max-width: 767.98px){
  .hik-banner{
    width:calc(100% - 40px);
    margin:20px auto;
    max-width:none;
    aspect-ratio:1080/540;   /* SP比率に変更（必要に応じて微調整） */
  }
}

/* === AIバナー（単独適用・他要素に影響なし） === */
.ai-banner{
  /* 中央寄せ & 上下20px */
  margin: 20px auto;
  /* 本文幅に合わせる想定：必要に応じて変更OK */
  max-width: 1200px;

  /* 見た目 */
 /* border-radius: 16px; */
 /* box-shadow: 0 10px 30px rgba(0,0,0,.12); */
  overflow: hidden;
  /* リセット（この要素に限定） */
  display: block;
  padding: 0;
  border: 0;
}
.ai-banner picture{
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
}
.ai-banner img{
  display: block;      /* 画像下の行間隙間対策 */
  width: 100%;
  height: auto;
  vertical-align: middle;
}

/* スマホは左右に“見かけの余白”を確保（上下20px維持） */
@media (max-width: 767.98px){
  .ai-banner{
    width: calc(100% - 40px); /* 左右20pxずつ */
    margin: 20px auto;
   /* border-radius: 12px;  */    /* 少し小さめの角丸に */
   /* box-shadow: 0 8px 24px rgba(0,0,0,.12); */
  }
}

/* ダークモードで影を少し弱める（任意） */
@media (prefers-color-scheme: dark){
  .ai-banner{
  /*  box-shadow: 0 10px 24px rgba(0,0,0,.2); */
  }
}


/* === HIKVISIONバナー === */
.hik-banner{
  margin:20px auto;          /* 上下20px固定 & 中央寄せ */
  max-width:1200px;          /* 本文幅に合わせる */
  /* border-radius:16px; */
  /* box-shadow:0 10px 30px rgba(0,0,0,.12); */
  overflow:hidden;
  aspect-ratio:1200/320;     /* CLS対策（PC比率） */
}
.hik-banner, .hik-banner picture{ display:block; padding:0; border:0; }
.hik-banner img{ display:block; width:100%; height:auto; vertical-align:middle; }

/* スマホ：左右20pxの“視覚的余白”、比率もSP用に */
@media (max-width: 767.98px){
  .hik-banner{
    width:calc(100% - 40px);
    margin:20px auto;
    max-width:none;
    aspect-ratio:1080/540;   /* SP比率に変更（必要に応じて微調整） */
  }
}


@media (max-width: 991px){
  .header__lead{
    pointer-events: none; /* ← これで重なってもタップを透過 */
  }
}
.header-column__sub .form-box{
  position: relative;
  z-index: 2; /* 重なり順で常に上 */
}
/* タップ時の青いハイライト無効化（iOSの違和感軽減） */
input, select, textarea, button {
  -webkit-tap-highlight-color: transparent;
}

/* モバイルで誤ズーム防止＆指の当たりを広く */
@media (max-width: 767px){
  input, select, textarea {
    font-size: 16px;        /* iOSズーム防止 */
    min-height: 44px;       /* 指の最小タップサイズ推奨 */
    padding: 10px 12px;
  }
  .easy-form-btn{
    min-height: 48px;
  }
}


/* ===== 固定CTA（スマホのみ） ===== */
@media (max-width: 767.98px){
  /* 既存の青帯CTAを無効化（競合回避） */
  .fix-navi{ display:none !important; }

  /* 本体 */
  .bottom-cta{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9999;
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom)); /* iPhone安全域 */
    background: rgba(0,0,0,.05);
    backdrop-filter: blur(4px);
    box-shadow: 0 -6px 20px rgba(0,0,0,.12);
  }
  .bottom-cta__inner{
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 10px;
  }
  .bottom-cta__btn{
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;                 /* 指で押しやすい高さ */
    border-radius: 12px;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: .02em;
    color: #fff !important;
    text-decoration: none;
  }
  .bottom-cta__btn--tel{
    background: #00a594;              /* コーポレートグリーン */
  }
  .bottom-cta__btn--form{
    background: #FF7800;              /* オレンジ */
  }
  .bottom-cta__icon{ font-size: 18px; line-height: 1; }
  .bottom-cta__label{ line-height: 1; }

  /* 固定バーに隠れないよう下余白を付与（ページ全体） */
  body{ padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

  /* “ページ上へ”ボタンの被り防止（既存.scroll-upに合わせて調整） */
  .scroll-up{ bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
}

/* PCは表示しない */
@media (min-width: 768px){
  .bottom-cta{ display:none; }
}

/* === 固定CTA（スマホ専用） === */
.bottom-cta{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  display: flex; gap: 8px;
  padding: 10px 12px;
  /* iPhoneのホームバー対策 */
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: rgba(20,20,20,.85);
  backdrop-filter: blur(6px);
}
@media (min-width: 768px){
  .bottom-cta{ display:none; }
}

/* --- 固定CTAベース --- */
.bottom-cta{
  position:fixed; left:0; right:0; bottom:0;
  display:flex; gap:4px; /* ボタンの間隔 */
  padding: max(10px, env(safe-area-inset-bottom)) 10px  /* 下はセーフエリア考慮 */;
  background: rgba(0,0,0,.04);
  z-index: 9999;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
@supports not (backdrop-filter: blur(6px)){
  .bottom-cta{ background:#f6f7f9; }
}

/* ボタン共通 */
.bottom-cta .cta-btn{
  flex:1; display:flex; align-items:center; justify-content:center;
  gap:10px;
  border-radius:12px;
  padding:12px 10px;
  color:#fff; text-decoration:none;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
  transform: translateZ(0);
}

/* 電話＝ネイビー / フォーム＝オレンジ */
.bottom-cta .cta-call{ background:#013384; }           /* ご希望色 */
.bottom-cta .cta-form{ background:#E94E1B; }

/* アイコン画像（推奨実サイズ: 40～64px / 表示20px） */
.bottom-cta .cta-ico{
  width:20px; height:20px; flex:0 0 20px; display:block;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.05));
}

/* テキスト2行構成 */
.bottom-cta .cta-lines{ display:flex; flex-direction:column; line-height:1.2; }
.bottom-cta .cta-main{ font-weight:700; font-size:15px; }
.bottom-cta .cta-sub { font-size:12px; opacity:.9; }

/* タップ時のフィードバック */
.bottom-cta .cta-btn:active{
  transform: scale(.96);
  opacity:.92;
  transition: transform .08s ease, opacity .08s ease;
}

/* きわめて狭い端末は1行に圧縮（補足を非表示） */
@media (max-width: 340px){
  .bottom-cta .cta-sub{ display:none; }
  .bottom-cta .cta-main{ font-size:14px; }
}

/* PC/タブレットでは非表示（必要なら調整） */
@media (min-width: 768px){
  .bottom-cta{ display:none; }
}

/* ページ最下部の要素と重ならないよう下余白（スマホのみ） */
@media (max-width: 767.98px){
  body{ padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}

.cta-ico{
  width:20px; height:20px;   /* 表示サイズを固定 */
  flex:0 0 20px;             /* テキスト換算でのズレ防止（任意） */
  vertical-align:middle;     /* 行中で上下センター */
  margin-right:8px;          /* テキストとの間隔 */
  display:inline-block;      /* Safariの行高の気まぐれ対策 */
}

/* 固定CTAの想定高さ（48〜64px）＋ セーフエリア */
@media (max-width: 767.98px){
  body { 
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}


/* =========================
   Radio/Checkbox 統合スタイル（#Form, #Form2）
   ========================= */

/* リストの余白/ポチをリセット */
#Form .col-lg-6 > ul,
#Form2 .col-lg-6 > ul{
  margin: 0;
  padding-left: 0;
  list-style: none;
}

/* 1項目の行（PC基準） */
#Form li.form-check,
#Form2 li.form-check{
  display: block;
  margin: 8px 0;                 /* 行間 */
}

/* ラベルと丸の整列 */
#Form li.form-check > label,
#Form2 li.form-check > label{
  display: inline-flex;
  align-items: center;
  gap: 10px;                     /* 丸と文字の距離 */
  line-height: 1.4;
  margin: 0;
  min-height: 36px;              /* PCの最低タップ高 */
  cursor: pointer;
}

/* ラジオの“実寸”を指定（transformは使わない） */
#Form li.form-check input[type="radio"],
#Form2 li.form-check input[type="radio"]{
  -webkit-appearance: auto;
  appearance: auto;
  width: 22px !important;        /* PCサイズ */
  height: 22px !important;
  min-width: 22px;
  min-height: 22px;
  margin: 0 !important;          /* Bootstrapの余白打消し */
  vertical-align: middle;
  box-shadow: none;
  outline: none;
  accent-color: #013384;         /* 選択色をネイビーで統一 */
  border: 1px solid rgba(0,0,0,.25); /* 非対応ブラウザ向けの視認性補助 */
}

/* フォーカス（キーボード操作時） */
#Form li.form-check input[type="radio"]:focus-visible,
#Form2 li.form-check input[type="radio"]:focus-visible{
  outline: 2px solid #88AEEA;
  outline-offset: 2px;
}

/* スマホは少し大きく & 行間を調整 */
@media (max-width: 767.98px){
  #Form li.form-check,
  #Form2 li.form-check{
    margin: 10px 0;
  }
  #Form li.form-check > label,
  #Form2 li.form-check > label{
    gap: 12px;
    line-height: 1.35;
    min-height: 44px;            /* 推奨タップ高 */
  }
  #Form li.form-check input[type="radio"],
  #Form2 li.form-check input[type="radio"]{
    width: 26px !important;      /* モバイルサイズ */
    height: 26px !important;
    min-width: 26px;
    min-height: 26px;
  }
}

/* accent-color 非対応ブラウザ向けの塗りつぶし（任意） */
@supports not (accent-color: auto) {
  #Form li.form-check input[type="radio"],
  #Form2 li.form-check input[type="radio"]{
    border: 2px solid #013384;
    background-clip: content-box;
    padding: 3px;                /* 中塗りに見せる */
  }
  #Form li.form-check input[type="radio"]:checked,
  #Form2 li.form-check input[type="radio"]:checked{
    background-color: #013384;
  }
}



/* ======== スマホのフォーム操作性改善 ======== */

/* 入力欄・ラベルのタップ領域を明確化 */
.form label {
  display: block;
  cursor: pointer;
  line-height: 1.4;
  padding: 0.3em 0;
}

/* 入力欄を少し大きめに */
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form select,
.form textarea {
  padding: 0.75em 0.9em;
  font-size: 1.05rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  touch-action: manipulation; /* タップ優先 */
}

/* iPhoneでズームが起きるのを防止 */
@media (max-width: 767px) {
  input, select, textarea {
    font-size: 16px !important; /* iOSのズーム防止 */
  }
}

/* フォーム全体の上下余白を詰める（不要なクリックロス軽減） */
.form .container {
  padding: 1.5em 1em !important;
}

/* フッターCTAや他要素との重なり防止 */
form {
  position: relative;
  z-index: 5;
}

/* ====== セレクトがタップしづらい問題の対策（フッターフォーム全体） ====== */

/* 左カラムの説明ラベルの当たり判定を適正化（セレクトにかぶらせない） */
#Form .col-lg-3 > label{
  display:block;
  line-height: 1.3;
  padding: 4px 0;         /* 余白を控えめに */
  margin: 0 0 6px;        /* 下だけ少しスペース */
  pointer-events: none;   /* ここはクリック不要なのでイベントを拾わせない */
}

/* セレクト等の入力要素を最前面に（万一のかぶり対策） */
#Form .form-control,
#Form .form-select,
#Form select,
#Form input[type="text"],
#Form input[type="email"],
#Form input[type="tel"],
#Form textarea{
  position: relative;
  z-index: 2;
}

/* モバイルではタップ面積を確保しつつ、ラベルのかぶりを確実に回避 */
@media (max-width: 767.98px){
  #Form .col-lg-3 > label{ padding: 2px 0; margin-bottom: 6px; }
  #Form .form-select{
    min-height: 44px;               /* 指一本分の高さを確保 */
    -webkit-appearance: menulist;   /* iOSのセレクト崩れ防止 */
    appearance: menulist;
  }
}

/* ラジオ/チェックのラベルはクリック可能にしたいので、上の pointer-events: none の影響を受けないよう別扱い */
#Form li.form-check > label{
  pointer-events: auto;   /* ラジオ/チェックは従来通りラベルで切り替え可 */
}

/* ====== 1) ラジオのサイズを“適正”に統一（FV/フッター両方） ====== */
.form input[type="radio"]{
  appearance: auto;
  -webkit-appearance: auto;
  transform: none !important;      /* 以前のscaleを打消し */
  width: 20px;
  height: 20px;
  margin-right: .5rem;
  vertical-align: middle;
  accent-color: #013384;            /* ネイビーで統一 */
}
@media (max-width: 767.98px){
  .form input[type="radio"]{
    width: 22px;
    height: 22px;
    margin-right: .6rem;
  }
}
/* ラジオ行の間隔は控えめに（クリックしやすさは維持） */
.form li.form-check{ margin: 8px 0; }
@media (max-width: 767.98px){
  .form li.form-check{ margin: 10px 0; }
}

/* ====== 2) セレクトのタップ改善 & 矢印二重解消（iOS/Bootstrap競合） ====== */
/* すべてのフォームselectを“ネイティブ表示”＋“Bootstrap矢印を消す” */
.form .form-select,
.form select{
  -webkit-appearance: menulist;
  appearance: menulist;
  background-image: none !important;  /* BootstrapのSVG矢印を無効化 → 二重解消 */
  min-height: 44px;                    /* 指一本分の高さ */
  padding-right: 2.25rem;              /* 右端のタップ余白を厚めに確保 */
  position: relative;
  z-index: 3;                          /* かぶり対策（上に出す） */
  touch-action: manipulation;          /* タップ優先 */
}

/* ====== 3) 左カラムのラベルがUIに重ならないよう“全フォーム”で抑止 ====== */
.form .col-lg-3 > label{
  display: block;
  line-height: 1.3;
  padding: 4px 0;
  margin: 0 0 6px;
  pointer-events: none;                /* ラベルが選択UIにかぶっていてもタップを殺さない */
}
@media (max-width: 767.98px){
  .form .col-lg-3 > label{ padding: 2px 0; margin-bottom: 6px; }
}

/* 念のため：ラジオ/チェックのラベルはクリック可能のまま */
.form li.form-check > label{ pointer-events: auto; }

/* 視覚的フィードバック（任意） */
.form select:focus,

.form input:focus,
.form textarea:focus{
  outline: 2px solid #88AEEA;
  outline-offset: 2px;
}

/* iOSでセレクトの▼が二重に見える場合の保険 */
.form .form-select{
  background-image: none !important; /* Bootstrapのカスタム矢印を無効化 */
  -webkit-appearance: menulist;      /* ネイティブUIに統一 */
  appearance: menulist;
}

/* === FVフォーム送信ボタン（スマホのみ）=== */
@media (max-width: 767.98px){
  .easy-form-btn{
    /* 端末幅に応じて 20〜24px の間で自動調整 */
    font-size: clamp(20px, 5.6vw, 24px) !important;
    line-height: 1.25;
    padding: 14px 1.1em;     /* 押しやすさ維持（高さ確保） */
    font-weight: 700;        /* 可読性アップ（任意だが推奨） */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  /* タップ時の視認性（任意） */
  .easy-form-btn:active{
    transform: translateY(1px);
  }
}


/* =========================================================
   FV内フォーム限定のリファイン
   対象：.header 内の .form-box 系のみ
   他エリアのフォームには影響しません
   ========================================================= */
.header .form-box{
  padding: 28px 24px;
  border-radius: 16px;
  background: rgba(255,255,255,0.88);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border: none;
  backdrop-filter: saturate(120%) blur(2px); /* 対応ブラウザのみ軽く */
}

.header .form-box__head{
  background: linear-gradient(90deg, #00a594, #00cda9);
  color: #fff;
  border-radius: 12px;
  padding: .6em .9em;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 1rem;
  border: none;
}

.header .form-box__lead,
.header .form-box__desc{
  margin-bottom: .8rem;
  color: #0f2433;
}

/* 入力フィールドの軽量化 */
.header .form-box input[type="text"],
.header .form-box input[type="email"],
.header .form-box input[type="tel"],
.header .form-box select,
.header .form-box textarea{
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(8,26,42,0.12);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 1.5rem;
  line-height: 1.35;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.header .form-box input:focus,
.header .form-box select:focus,
.header .form-box textarea:focus{
  border-color: #00b8a5;
  box-shadow: 0 0 0 4px rgba(0,184,165,0.15);
}

/* ラジオ・チェック類の行間だけ少しゆるめる */
.header .form-box .form-item{
  margin-bottom: .9rem;
}

/* ボタン：フラット＆スマート */
.header .form-box .easy-form-btn{
  width: 100%;
  border: none;
  border-radius: 9999px;
  background: linear-gradient(90deg, #ff7800, #ff9a40);
  color: #fff;
  font-size: 1.6rem;
  padding: 0.9rem 1.2rem;
  box-shadow: 0 4px 12px rgba(255,120,0,0.25);
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.header .form-box .easy-form-btn:hover{
  opacity: .95;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255,120,0,0.28);
}

/* 注意・同意の小テキストは読みやすく */
.header .form-box .note, 
.header .form-box .caution{
  font-size: 1.2rem;
  color: #3a4a5a;
}

/* ---------------------------------
   レスポンシブ（SP / TB / PC）
   --------------------------------- */
/* スマホ */
@media (max-width: 767px){
  .header .form-box{ 
    padding: 20px 16px;
    border-radius: 12px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.10);
  }
  .header .form-box__head{ font-size: 1.5rem; }
  .header .form-box input,
  .header .form-box select,
  .header .form-box textarea{ font-size: 1.6rem; }
  .header .form-box .easy-form-btn{ font-size: 1.5rem; padding: 0.9rem 1.1rem; }
}

/* タブレット */
@media (min-width: 768px) and (max-width: 991px){
  .header .form-box{ padding: 24px 20px; }
  .header .form-box__head{ font-size: 1.6rem; }
}

/* PC */
@media (min-width: 992px){
  .header .form-box{ padding: 30px 26px; }
  .header .form-box__head{ font-size: 1.8rem; }
}

@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .header .form-box { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (max-width: 767px){
  .header .form-box { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.header .form-box input,
.header .form-box select,
.header .form-box textarea,
.header .form-box .easy-form-btn{
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* =========================
   LP-C: 追加施設（駐車場／宿泊施設）
   既存の base スタイルは変更しない方針。
   既存の .fac-pill.active は --accent を参照、color-mix 設計を継続。
   ========================= */

/* 0) 施設アクセント（既存と非重複） */
html.is-lpc {
  /* 参考：既存
     --acc-office:#2563eb; --acc-store:#ff7800; --acc-hospital:#059669;
     --acc-warehouse:#7c3aed; --acc-apartment:#db2777;
  */
  --acc-parking: #06b6d4; /* 駐車場：Cyan系（青/緑と被らない位置） */
  --acc-hotel:   #b91c1c; /* 宿泊施設：Deep Red（ローズと差別化） */
}

/* 1) タブ：各ボタンに --accent を割当
      → 既存の .fac-pill.active { color-mix(in srgb, var(--accent) …) } が自動適用 */
html.is-lpc .nav-pills .fac-pill.is-parking { --accent: var(--acc-parking); }
html.is-lpc .nav-pills .fac-pill.is-hotel   { --accent: var(--acc-hotel); }

/* 2) タブの軽いホバー表現（任意・既存と馴染む程度） */
html.is-lpc .nav-pills .fac-pill.is-parking:hover { border-color: var(--acc-parking); }
html.is-lpc .nav-pills .fac-pill.is-hotel:hover   { border-color: var(--acc-hotel); }

/* 3) タブコンテンツ内の「→解決」バッジをタブ色と同期 */
html.is-lpc #pane-parking .fac-issues li strong {
  --accent: var(--acc-parking);
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff; font-weight: 800;
}
html.is-lpc #pane-hotel .fac-issues li strong {
  --accent: var(--acc-hotel);
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff; font-weight: 800;
}

/* 4) ご要望の微調整（共通） */
html.is-lpc .fac-issues > li { border-bottom: 0 !important; } /* 行下線ナシ */
html.is-lpc .fac-panels .fac-panel { margin-bottom: clamp(16px, 3vw, 32px) !important; } /* 下余白 */

/* --- LP-C: 解決バッジの横幅・余白・行折返しを既存施設に揃える --- */
html.is-lpc #pane-parking .fac-issues li strong,
html.is-lpc #pane-hotel   .fac-issues li strong {
  display: inline !important;                  /* ブロック化を抑止 → 行幅いっぱいに伸びない */
  -webkit-box-decoration-break: clone;         /* 複数行でも各行に角丸・背景を維持 */
  box-decoration-break: clone;
  padding: .05rem .5rem;                       /* 既存の見た目に近い内側余白 */
  border-radius: .5rem;
  line-height: 1.4;
  background: var(--accent) !important;        /* 既に定義済みの --accent を使用 */
  border-color: var(--accent) !important;
  color: #fff; font-weight: 800;
}

/* スマホ時に右端の圧迫感を抑える（長文での折返し対策） */
@media (max-width: 575px){
  html.is-lpc #pane-parking .fac-issues li strong,
  html.is-lpc #pane-hotel   .fac-issues li strong {
    word-break: break-word;                    /* 長い語でも強制改行可 */
  }
}

/* === LP-C: スマホ時に「課題」→改行→「解決」バッジを縦積み === */
@media (max-width: 575px){
  /* 各項目を縦レイアウトに（既存の矢印::beforeや左パディングはそのまま） */
  html.is-lpc #pane-parking .fac-issues > li,
  html.is-lpc #pane-hotel   .fac-issues > li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;     /* strong を左寄せ */
    line-height: 1.55;
    padding: .34rem 0 .34rem 1.25rem;
  }

  /* 「解決」バッジは次行・テキスト幅だけ */
  html.is-lpc #pane-parking .fac-issues > li strong,
  html.is-lpc #pane-hotel   .fac-issues > li strong {
    display: inline-block !important;
    margin-top: .28rem;          /* 課題テキストとの間隔 */
    max-width: 100%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: .05rem .5rem;
    border-radius: .5rem;
    line-height: 1.4;
  }
}


/* === LP-C: 既存5施設も「解決」バッジをテキスト幅に統一 === */

/* 1) 各施設のバッジ色をその施設アクセントに同期（※色は既存変数を使用） */
html.is-lpc #pane-office     .fac-issues li strong { --accent: var(--acc-office); }
html.is-lpc #pane-store      .fac-issues li strong { --accent: var(--acc-store); }
html.is-lpc #pane-hospital   .fac-issues li strong { --accent: var(--acc-hospital); }
html.is-lpc #pane-warehouse  .fac-issues li strong { --accent: var(--acc-warehouse); }
html.is-lpc #pane-apartment  .fac-issues li strong { --accent: var(--acc-apartment); }

/* 2) ピルの表示を「文字幅だけ」にする（横いっぱいに伸びない） */
html.is-lpc #pane-office     .fac-issues li strong,
html.is-lpc #pane-store      .fac-issues li strong,
html.is-lpc #pane-hospital   .fac-issues li strong,
html.is-lpc #pane-warehouse  .fac-issues li strong,
html.is-lpc #pane-apartment  .fac-issues li strong {
  display: inline-block;              /* 行内幅に限定 */
  padding: .05rem .5rem;              /* 統一の内側余白 */
  border-radius: .5rem;
  line-height: 1.4;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff; 
  font-weight: 800;
}

/* 3) スマホ時の縦積みでも間隔が整うよう微調整（既存レイアウトは維持） */
@media (max-width: 575px){
  html.is-lpc #pane-office     .fac-issues > li strong,
  html.is-lpc #pane-store      .fac-issues > li strong,
  html.is-lpc #pane-hospital   .fac-issues > li strong,
  html.is-lpc #pane-warehouse  .fac-issues > li strong,
  html.is-lpc #pane-apartment  .fac-issues > li strong {
    margin-top: .28rem;              /* 課題テキストとの隙間 */
    max-width: 100%;
    word-break: break-word;
  }
}

/* === 安全パッチ: hoverで全部が半透明化されないよう除外 === */
a:hover { opacity: 0.5; }
.btn:hover, .nav-link:hover, .fac-issues li strong:hover { opacity: 1; }

/* === LP-C: マンションのスマホ時・縦積み強制（1行だけ横並びになる対策） === */
@media (max-width: 575px){
  html.is-lpc #pane-apartment .fac-issues > li{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 既存行間に合わせておく（必要に応じて微調整） */
    line-height: 1.55;
    padding: .34rem 0 .34rem 1.25rem;
  }
  html.is-lpc #pane-apartment .fac-issues > li strong{
    display: inline-block !important;  /* 行内幅のピル＋次の行に配置 */
    margin-top: .28rem;
    max-width: 100%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

/* === LP-C: スマホ時（~575.98px）に全施設で「課題→解決」を縦積みに統一 === */
/* 影響範囲：html.is-lpc + #FacilityTabs 配下の .fac-issues のみ */
@media (max-width: 575.98px){
  html.is-lpc #FacilityTabs .fac-issues > li{
    display: flex;
    flex-direction: column;
    align-items: flex-start;           /* 解決ピルを左寄せ */
    line-height: 1.55;                 /* 既存の密度に揃える */
    padding: .34rem 0 .34rem 1.25rem;  /* 左矢印ぶんの余白は維持 */
  }
  html.is-lpc #FacilityTabs .fac-issues > li strong{
    display: inline-block !important;  /* 行幅いっぱいにしない（テキスト幅だけ） */
    margin-top: .28rem;                /* 課題テキストとの間隔 */
    max-width: 100%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    /* 背景色/枠色は既存の --accent 指定がそのまま効きます */
  }
}


/* ===============================
   1) バナー幅を .container と揃える
   =============================== */
/* 既存 .banner-box の左右 padding をリセットして、コンテナ幅に揃える */
html.is-lpc .banner .banner-box{
  padding-left: 12px !important;
  padding-right: 12px !important;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

/* Bootstrapの.containerと同じ最大幅を模倣（順に上書き） */
@media (min-width:576px){  html.is-lpc .banner .banner-box{ max-width: 540px;  } }
@media (min-width:768px){  html.is-lpc .banner .banner-box{ max-width: 720px;  } }
@media (min-width:992px){  html.is-lpc .banner .banner-box{ max-width: 960px;  } }
@media (min-width:1200px){ html.is-lpc .banner .banner-box{ max-width: 1140px; } }
@media (min-width:1400px){ html.is-lpc .banner .banner-box{ max-width: 1320px; } }

/* 既存の .banner-box { padding:0 5em; } を無効化するための上書き（PC） */
@media (min-width:1200px){
  html.is-lpc .banner .banner-box{ padding-left: 12px !important; padding-right: 12px !important; }
}

/* PCの上下余白をタイトに（他セクションへ影響しないよう .banner 限定） */
@media (min-width:992px){
  html.is-lpc section.banner{
    padding-top: 40px !important;   /* 既定80px→40pxに */
    padding-bottom: 40px !important;
  }
}

/* ===============================
   2) プラン価格表の下余白を確保（PCのみ）
   =============================== */
/* HTML側で style="padding:40px 0;" が入っているため、PC時のみ下側を増量 */
@media (min-width:992px){
  html.is-lpc section.plan{
    padding-bottom: 96px !important;  /* CTAへ被らないよう余白を追加 */
  }
}
/* 念のため、プラン画像群の直下にも少しだけ余白 */
@media (min-width:992px){
  html.is-lpc .plan .plan-box{ margin-bottom: 16px; }
}

/* =========================================
   LP-C 余白リズム最適化（バナー／価格表）
   他要素に影響を与えないよう ID/クラスを限定
   ========================================= */

/* 基本：バナー2種（補助金/キャンペーン）の上下余白を統一 */
html.is-lpc section.banner{ padding-top: 0 !important; padding-bottom: 0 !important; }
html.is-lpc #Banner .banner-box{ margin-top: 24px; margin-bottom: 24px; }   /* SP 基準 */
@media (min-width: 768px){
  html.is-lpc #Banner .banner-box{ margin-top: 28px; margin-bottom: 28px; } /* タブ */
}
@media (min-width: 992px){
  html.is-lpc #Banner .banner-box{ margin-top: 32px; margin-bottom: 32px; } /* PC */
}

/* 価格表セクションの外側余白（上は詰め、下はデバイス別に調整） */
html.is-lpc section#Plan{
  padding-top: 24px !important;   /* SP：上を詰める */
  padding-bottom: 28px !important;/* SP：いったん標準 */
  margin-top: 0 !important;
}
@media (min-width: 768px){
  html.is-lpc section#Plan{
    padding-top: 28px !important;   /* タブ */
    padding-bottom: 36px !important;
  }
}
@media (min-width: 992px){
  html.is-lpc section#Plan{
    padding-top: 32px !important;   /* PC：上をやや詰める */
    padding-bottom: 56px !important;/* PC：下に十分な余白（被り防止） */
  }
}

/* --- SP/タブでCTA（下部固定ボタン）に被らないための下余白を追加 --- */
/* 下部固定CTAの想定高さが 64–80px 程度のため “安全余白” を追加 */
@media (max-width: 991.98px){
  html.is-lpc section#Plan{
    padding-bottom: max(96px, calc(28px + env(safe-area-inset-bottom))) !important;
  }
}

/* 価格表内のボックス直下に軽く間隔（次のセクション見出しと密着しない） */
html.is-lpc #Plan .plan-box{ margin-bottom: 16px; }



/* =========================================
   余白を AI/HIKVISION と同値(20px)に統一
   ========================================= */

/* 補助金バナー：上下20pxに固定（従来のclampを打ち消し） */
html.is-lpc .subsidy-banner{
  margin: 20px auto !important;
}

/* キャンペーンバナー（2枚並びの箱）：上下20pxに統一 */
html.is-lpc #Banner .banner-box{
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

/* 価格表セクション：外側の上下マージンを20pxに統一 */
html.is-lpc section#Plan{
  margin: 20px auto !important;
}

/* ----- 補足：SP/タブで下部固定CTAに被らない安全余白だけ確保 ----- */
/* これは“内側”のpaddingで、外側の20pxマージンとは別レイヤー（見た目の間隔は20pxのまま） */
@media (max-width: 991.98px){
  html.is-lpc section#Plan{
    padding-bottom: max(96px, calc(20px + env(safe-area-inset-bottom))) !important;
  }
}

/* PCではCTA被り無しを前提に、必要最低限の下パディングだけ */
@media (min-width: 992px){
  html.is-lpc section#Plan{
    padding-bottom: 56px !important;  /* 既存レイアウトに合わせた安全値。必要なら48/64に調整可 */
  }
}

/* （既存の style="padding:40px 0;" を上書きしたい場合の保険） */
html.is-lpc section#Plan[style]{
  padding-top: 40px !important; /* 上は従来の見栄えを維持 */
}

/* === 補助金バナーを .container と同じ幅に揃える === */
html.is-lpc .subsidy-banner{
  box-sizing: border-box;
  margin: 20px auto !important;          /* 他バナーと同じ上下20px */
  padding-left: 12px;                     /* ガター */
  padding-right: 12px;
  width: 100%;
}

/* コンテナ相当の最大幅（Bootstrapと同値） */
@media (min-width:576px){  html.is-lpc .subsidy-banner{ max-width: 540px;  } }
@media (min-width:768px){  html.is-lpc .subsidy-banner{ max-width: 720px;  } }  /* ← タブレットで効く */
@media (min-width:992px){  html.is-lpc .subsidy-banner{ max-width: 960px;  } }
@media (min-width:1200px){ html.is-lpc .subsidy-banner{ max-width: 1140px; } }
@media (min-width:1400px){ html.is-lpc .subsidy-banner{ max-width: 1320px; } }

/* 画像がはみ出さないよう安全指定 */
html.is-lpc .subsidy-banner__link,
html.is-lpc .subsidy-banner picture,
html.is-lpc .subsidy-banner img{
  display:block; width:100%; height:auto;
}

/* === 補助金バナーを .container と同じ幅に揃える === */
html.is-lpc .subsidy-banner{
  box-sizing: border-box;
  margin: 20px auto !important;          /* 他バナーと同じ上下20px */
  padding-left: 12px;                     /* ガター */
  padding-right: 12px;
  width: 100%;
}

/* コンテナ相当の最大幅（Bootstrapと同値） */
@media (min-width:576px){  html.is-lpc .subsidy-banner{ max-width: 540px;  } }
@media (min-width:768px){  html.is-lpc .subsidy-banner{ max-width: 720px;  } }  /* ← タブレットで効く */
@media (min-width:992px){  html.is-lpc .subsidy-banner{ max-width: 960px;  } }
@media (min-width:1200px){ html.is-lpc .subsidy-banner{ max-width: 1140px; } }
@media (min-width:1400px){ html.is-lpc .subsidy-banner{ max-width: 1320px; } }

/* 画像がはみ出さないよう安全指定 */
html.is-lpc .subsidy-banner__link,
html.is-lpc .subsidy-banner picture,
html.is-lpc .subsidy-banner img{
  display:block; width:100%; height:auto;
}

/* ===== Plan見出し/コピーの可読性微調整（LP-C限定） ===== */
html.is-lpc #Plan .ttl-text{
  letter-spacing: .01em;
}
html.is-lpc #Plan .ai-text{
  line-height: 1.45;
}

/* 端末別の最小フォント底上げ（控えめ） */
@media (max-width: 767.98px){
  html.is-lpc #Plan .ttl-text{ font-size: clamp(22px, 6vw, 28px); }
  html.is-lpc #Plan .ai-text { font-size: clamp(16px, 4.5vw, 18px); }
}
@media (min-width: 768px) and (max-width: 991.98px){
  html.is-lpc #Plan .ttl-text{ font-size: clamp(26px, 3.8vw, 32px); }
  html.is-lpc #Plan .ai-text { font-size: clamp(18px, 2.6vw, 20px); }
}
/* PCは既存サイズに追従。行間だけ少しだけ広げる */
@media (min-width: 992px){
  html.is-lpc #Plan .ai-text{ line-height: 1.5; }
}

/* ===============================
   LP-C: プラン説明文（#Plan）の可読性最適化
   HTMLはそのまま。各デバイスで見やすく調整
   =============================== */
html.is-lpc #Plan p.text-center.text-bold{
  /* ベース */
  margin: 14px auto 18px;           /* 上下の間隔を少し確保（見出し/バルーンとのバランス） */
  max-width: 52rem;                 /* 行幅を制限して読みやすく */
  line-height: 1.6;                 /* 読みやすい行間 */
  letter-spacing: .01em;            /* 微調整 */
}

/* スマホ：文字を小さすぎない範囲で底上げ */
@media (max-width: 767.98px){
  html.is-lpc #Plan p.text-center.text-bold{
    font-size: clamp(15px, 4.3vw, 17px);
    line-height: 1.65;
    padding: 0 8px;                 /* 端の当たりを軽減 */
    margin: 12px auto 16px;
  }
}

/* タブレット：読みやすさ優先で少し大きめ */
@media (min-width: 768px) and (max-width: 991.98px){
  html.is-lpc #Plan p.text-center.text-bold{
    font-size: clamp(16px, 2.2vw, 18px);
    line-height: 1.6;
    margin: 14px auto 18px;
  }
}

/* PC：既存トーンに合わせつつ行間だけ少し広めに */
@media (min-width: 992px){
  html.is-lpc #Plan p.text-center.text-bold{
    font-size: 18px;
    line-height: 1.6;
    margin: 16px auto 22px;         /* この後続く .plan-box と詰まりすぎないよう調整 */
  }
}

/* 参考：プラン画像群の直前が詰まる場合の保険（任意）
html.is-lpc #Plan .plan-box{ margin-top: 20px; }
*/

/* === 補助金バナー：スマホの上下余白を他バナーと完全一致（20px）に === */
@media (max-width: 767.98px){
  html.is-lpc .subsidy-banner{
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    padding-top: 0 !important;     /* 念のため縦パディングをゼロに固定 */
    padding-bottom: 0 !important;
  }
  /* a/picture/img まわりに余白が入らないよう保険 */
  html.is-lpc .subsidy-banner__link,
  html.is-lpc .subsidy-banner picture,
  html.is-lpc .subsidy-banner img{
    display: block;
    margin: 0 !important;
  }
}

/* === 補助金バナー：スマホの上下余白を他バナーと完全一致（20px）に === */
@media (max-width: 767.98px){
  html.is-lpc .subsidy-banner{
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    padding-top: 0 !important;     /* 念のため縦パディングをゼロに固定 */
    padding-bottom: 0 !important;
  }
  /* a/picture/img まわりに余白が入らないよう保険 */
  html.is-lpc .subsidy-banner__link,
  html.is-lpc .subsidy-banner picture,
  html.is-lpc .subsidy-banner img{
    display: block;
    margin: 0 !important;
  }
}

/* ==== SP幅（～767.98px）：バナー類と価格表の間をすべて20pxで統一 ==== */
@media (max-width: 767.98px){

  /* 1) 補助金バナー（あなたの該当要素） */
  html.is-lpc .subsidy-banner{
    margin: 20px auto !important;        /* ← shorthandで強制上書き */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  html.is-lpc .subsidy-banner__link,
  html.is-lpc .subsidy-banner picture,
  html.is-lpc .subsidy-banner img{
    display:block; margin:0 !important;  /* 画像まわりの余白ゼロ */
  }

  /* 2) キャンペーンバナー（2枚並びの箱） */
  html.is-lpc #Banner .banner-box{
    margin: 20px auto !important;        /* 上下20pxに固定 */
    padding-left: 12px !important;       /* ガターは残す */
    padding-right: 12px !important;
  }

  /* 3) 価格表セクション（外側の見た目は20pxに。内側は被り対策を維持） */
  html.is-lpc section#Plan{
    margin: 20px auto !important;        /* セクション間の見た目は20px */
    /* 下部固定CTAに被らない“内側”の安全余白は別で保持 */
    padding-bottom: max(96px, calc(20px + env(safe-area-inset-bottom))) !important;
  }
}
