@charset "UTF-8";
/* =============================================
黄色い丸数字
============================================= */
.num_circle._03::before{
  content: '03';
}
.num_circle._04::before{
  content: '04';
}
.num_circle._05::before{
  content: '05';
}
/* =============================================
ページ内リンクバナーボタンの数字
============================================= */
.banner_btn .c-bannerLink__figure{
  position: relative;
  border-radius: 10px;
}
.banner_btn .c-bannerLink__figure::before{
  font-family: 'RobotoLocal';
  font-weight: 700;
  font-size: 32px;
  color: #fff;
  line-height: 1;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1; 
  pointer-events: none;
}
.banner_btn .c-bannerLink:hover .c-bannerLink__figure::before {
  opacity: 1 !important;
}
.banner_btn._01 .c-bannerLink__figure::before{
  content: '01';
}

.banner_btn._02 .c-bannerLink__figure::before{
  content: '02';
}
.banner_btn._03 .c-bannerLink__figure::before{
  content: '03';
}

.p_rel{
  position: relative;
}
.p_ab{
  position: absolute;
}
.top_mn1{
  top: -1em;
}
.bg_light-orange{
  background-color: #FD9C01;
}

.bd_orange{
  border: 3px solid #FD7201;
}
.bd_light-orange{
  border: 3px solid #FD9C01;
}

.bg_light-yellow{
  background-color: #FDF9EE;
}
.bl_yellow{
  border-left: 5px solid #fdd304 !important;
}
.bb_light-green{
  border-bottom: 3px solid #F1F9EE;
}
.bb_green{
  border-bottom: 2px solid #006E5D;
}
@media print, screen and (max-width: 599px){
  .flex_column_sp{
    flex-direction: column;
    align-items: flex-start !important;
  }
  .gap10_sp{
    gap: 10px;
  }
}
@media print, screen and (max-width: 599px){
  .c-bannerLink__title{
    font-size: 1.2em !important;
  }
}

.btn_small .swell-block-button__link{
  min-width: 195px !important;
}
@media print, screen and (max-width: 599px){
  .ta_l_sp{
    text-align: left !important;
  }
}
@media print, screen and (max-width: 599px){
  .pl40_sp{
    padding-left: 40px !important;
  }
}
.full_img_reason_wrap{
  position: relative;
}
.post_content .full_img_reason{
  width: 100%;
  position: static;
}
@media print,screen and (min-width: 960px){
  .post_content .full_img_reason{
    width: 950px;
    position: absolute;
    top: 0;
    right: 0;
  }
  .post_content .full_img_reason_wrap .full_img_reason._right{
    right: unset !important;
    left: 0;
  }
}






/* =============================================
カラム内の順番調整用
============================================= */
@media (max-width: 599px) {
    .c-order-wrapper .swell-block-columns__inner{
      width: 100%;
      margin: 0 auto;
    }
    .c-order-wrapper .swell-block-columns__inner .swell-block-column{
        display: contents !important;
    }
    .c-order-ttl {
        order: 1;
    }

    .c-order-wrapper figure {
        order: 2;
        width: 100%;
    }

    .c-order-desc {
        order: 3;
    }
    .c-order-btn{
      order: 4;
    }
}

/* =============================================
上にラインの入ったカード
============================================= */
.p-card_bt{
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
  border: 1px solid #aaa;
  border-top: 5px solid #006E5D;
  padding: 1rem !important;
}

/* =============================================
二重線の丸画像
============================================= */
.p-db-round-img {
  position: relative;
  display: inline-block;
  line-height: 0;
  padding: 8px;
}

.p-db-round-img img {
  width: 250px !important;
  height: 250px !important;
  object-fit: cover;
  border-radius: 50% !important;
  border: 6px solid #006E5D !important;
  box-sizing: border-box;
  margin: 0 auto !important;
}


/* 外側の細い線 */
.p-db-round-img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #cfcfcf; /* 細い線 */
  border-radius: 50%;
  pointer-events: none;
}

/* =============================================
白ボーダーの丸画像
============================================= */
.p-round-img-white {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 6px solid #fff;
  object-fit: cover;
  margin: 0 auto 20px;
  display: block;
  position: relative;
  z-index: 1;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
@media (max-width: 599px){
  .p-round-img-white{
    width: 150px;
    height: 150px;
    border: 3px solid #fff;
  }
}

/* =============================================
白い下線のタイトル
============================================= */
.post_content .p-ttl-white-underline{
  border-bottom: 5px solid #fff !important;
  padding: .5em !important;
}

/* =============================================
緑の吹き出し(サイズ指定)
============================================= */
.p-ttl_fuki_green{
  background-color: #006E5D;
  width: 100%;
  max-width: 400px;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 50px;
  position: relative;
  padding: 10px;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}
.p-ttl_fuki_green::after{
  content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    border-style: solid;
    border-width: 12px 10px 0 10px;
    border-color: #006E5D transparent transparent;
    translate: -50% 100%;
}
/* =============================================
緑の吹き出し(サイズ可変)
============================================= */
.p-ttl_fuki_green_w{
  background-color: #006E5D;
  width: fit-content;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 50px !important;
  position: relative;
  padding: 10px 20px;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}
.p-ttl_fuki_green_w::after{
  content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    border-style: solid;
    border-width: 12px 10px 0 10px;
    border-color: #006E5D transparent transparent;
    translate: -50% 100%;
}

/* =============================================
緑の縁のタイトル
============================================= */
.post_content .p-ttl_fuchi {
    color: #fff;
    position: relative;
    display: inline-block;
    -webkit-text-stroke: 8px #006E5D;
    paint-order: stroke fill;
    letter-spacing: 0.1em;
    padding-left: .5em !important;
}

/* =============================================
紫の縁のタイトル
============================================= */
.post_content .p-ttl_fuchi._purple {
    color: #fff;
    position: relative;
    display: inline-block;
    -webkit-text-stroke: 8px #27295E;
    paint-order: stroke fill;
    letter-spacing: 0.1em;
    padding-left: .5em !important;
}
/* =============================================
白の縁のタイトル
============================================= */
.post_content .p-ttl_fuchi_white {
    -webkit-text-stroke: 8px #fff;
    paint-order: stroke fill;
}
.post_content .p-ttl_fuchi_white_s {
    -webkit-text-stroke: 4px #fff;
    paint-order: stroke fill;
}
/* =============================================
右にラインが伸びるタイトル
============================================= */
.post_content .p-ttl_line_container{
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  padding: .5em 0;
}
.post_content .p-ttl_line_container::after {
    content: "" !important;
    flex-grow: 1;
    height: 2px !important;
    background-color: #006E5D;
    margin-left: 1em;
    border-radius: 3px;
}

/* =============================================
左右にラインが伸びるタイトル(緑)
============================================= */
.post_content .p-ttl_side-lines {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.post_content .p-ttl_side-lines::before,
.post_content .p-ttl_side-lines::after {
  flex-grow: 1;
  height: 2px !important;
  background: #006E5D !important;
  position: static !important;
  width: unset !important;
  content: "" !important;
}

.post_content .p-ttl_side-lines::before {
    margin-right: .5em;
}
.post_content .p-ttl_side-lines::after {
    margin-left: .5em;
}

/* =============================================
左右にラインが伸びるタイトル(紫)
============================================= */
.post_content .p-ttl_side-lines._purple {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.post_content .p-ttl_side-lines._purple::before,
.post_content .p-ttl_side-lines._purple::after {
  flex-grow: 1;
  height: 2px !important;
  background: #27295E !important;
  position: static !important;
  width: unset !important;
  content: "" !important;
}

.post_content .p-ttl_side-lines._purple::before {
    margin-right: .5em;
}
.post_content .p-ttl_side-lines._purple::after {
    margin-left: .5em;
}


/* =============================================
上下にラインがあるタイトル
============================================= */
.post_content .p-ttl_tbb {
    display: block;
    text-align: center;
    border-top: 2px solid #006E5D !important;
    border-bottom: 2px solid #006E5D !important;
    padding: .5em 0;
    margin: 1em 0;
    width: 100%;
}

/* =============================================
下にラインがあるタイトル
============================================= */
.post_content .p-ttl_bb{
  border-bottom: 4px solid #006E5D !important;
}

/* =============================================
下にライン、中央に下矢印があるタイトル
============================================= */
.post_content .p-ttl_ul-arrow {
    display: block;
    text-align: center;
    position: relative;
    border-bottom: 2px solid #006E5D !important;
    padding-bottom: .5em !important;
    width: 100%;
}

.p-ttl_ul-arrow::after {
    content: "" !important;
    position: absolute;
    bottom: -12px !important;
    left: 50% !important;
    transform: translateX(-50%);
    border-left: 12px solid transparent !important;
    border-right: 12px solid transparent !important;
    border-top: 12px solid #006E5D !important;
}


/* =============================================
緑のボーダーに薄緑背景
============================================= */
.bg_light-green{
  background-color: #F1F9EE;
}
.bd_green{
  border: 5px solid #006E5D;
}

/* =============================================
黄色のボーダー
============================================= */
.bd_yellow{
  border: 5px solid #fdd304;
}

/* =============================================
左に緑のラインのあるタイトル
============================================= */
.post_content .p-left-line-ttl{
  padding: .2em 1em !important;
  border-left: #006E5D 5px solid !important;
}

/* =============================================
左にオレンジのラインのあるタイトル
============================================= */
.post_content .p-left-line-ttl._orange::before{
  width: 5px !important;
  height: 1.8em !important;
  content: "" !important;
  background: #FD9C01 !important;
  position: absolute;
  left: 0 !important;
  top: 0.4em !important;
}

/* =============================================
左に黄色のラインのあるタイトル
============================================= */
.post_content .p-left-line-ttl._yellow::before{
  width: 5px !important;
  height: 1.8em !important;
  content: "" !important;
  background: #fdd304 !important;
  position: absolute;
  left: 0 !important;
  top: 0.4em !important;
}

/* =============================================
左にボーダー
============================================= */
.bl_green{
  border-left: 5px solid #006E5D;
}

/* =============================================
フローセクションの矢印
============================================= */
.p-flow_item {
    position: relative;
    border: 5px solid #fdd304;
}

.p-flow_item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -3.5em; /* gapに合わせて調整 */
    transform: translateX(-50%);
    
    /* 三角形の作成 */
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-top: 25px solid #006E5D; /* 下向きの三角 */
    
    z-index: 1;
}

/* =============================================
ボックスに数字
============================================= */
.p-box_num{
  position: relative;
}
.p-box_num::before{
  font-weight: 700;
  font-size: 32px;
  color: #fff;
  background-color: #fdd304;
  line-height: 1;
  position: absolute;
  left: 0;
  top: -18px;
  width: 60px;
  height: 60px;
  text-align: center;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-box_num._01::before{
  content: '01';
}

/* =============================================
透過した数字を置いたタイトル
============================================= */
.post_content .p-ttl_lg-num {
    position: relative;
    padding-left: 3em;
    z-index: 1;
}

/* 背景の数字（疑似要素） */
.post_content .p-ttl_lg-num::before {
    position: absolute;
    top: -0.35em !important;
    left: -0.1em !important;
    font-size: 3.5em;
    font-weight: 900;
    color: #006E5D;
    opacity: 0.25;
    line-height: 1;
    z-index: -1;
    pointer-events: none;
    width: unset !important;
    height: 0 !important;
}
.post_content .p-ttl_lg-num._01::before{
  content: '01';
}
.post_content .p-ttl_lg-num._02::before{
  content: '02';
}
.post_content .p-ttl_lg-num._03::before{
  content: '03';
}

/* =============================================
緑の影のついた画像
============================================= */
.p-img_green-shadow{
  box-shadow: 5px 5px 0 #006E5D;
}

/* =============================================
黄色の影のついた画像
============================================= */
.p-img_yellow-shadow{
  box-shadow: 5px 5px 0 #fdd304;
}



/* =============================================
カバー工法イントロ金額
============================================= */
.price._rc{
  width: 250px;
  margin-left: auto;
}

/* =============================================
上部固定
============================================= */
.p-absolute.top0{
  bottom: unset !important;
  top: 0;
}
@media (max-width: 599px){
  .p-absolute.top0{
    padding-bottom: 3vw !important;
  }
}

/* =============================================
左上に三角
============================================= */
.p-tl-tri{
  border: 4px solid #006E5D;
  position: relative;
}
.p-tl-tri::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 25px solid #006E5D;
  border-right: 25px solid transparent;
}


/* =============================================
透過した STEP 01 を背景に置いたタイトル
============================================= */
.post_content .p-ttl_step {
    position: relative;
    padding-left: 4.5em;
    z-index: 1;
    font-weight: 700;
}
.post_content .p-ttl_step::before,
.post_content .p-ttl_step::after {
    position: absolute;
    font-weight: 900;
    color: #006E5D;
    opacity: 0.4;
    line-height: 1;
    z-index: -1;
    pointer-events: none;
}

.post_content .p-ttl_step::after {
    content: 'STEP';
    font-size: 1.2em;
    top: 0.1em !important;
    left: 0em !important;
}

.post_content .p-ttl_step::before {
    font-size: 2.5em;
    top: -0.35em !important;
    left: 1.2em !important;
    width: unset !important;
    height: 0 !important;
}

/* 数字の中身だけクラスで指定 */
.post_content .p-ttl_step._01::before { content: '01'; }
.post_content .p-ttl_step._02::before { content: '02'; }
.post_content .p-ttl_step._03::before { content: '03'; }
.post_content .p-ttl_step._04::before { content: '04'; }

@media (max-width: 599px){
    .post_content .p-ttl_step {
        padding-left: 0;
        padding-top: 1.8em;
    }
    .post_content .p-ttl_step::after {
        font-size: 1em;
        top: 0.2em;
        left: 0;
    }
    .post_content .p-ttl_step::before {
        font-size: 2.8em;
        top: -0.2em !important;
        left: 0.9em !important;
    }
}

/* =============================================
margin-top: -1rem;
============================================= */
.mtms1{
  margin-top: -1rem !important;
}

/* =============================================
金額のボックス
============================================= */
.price-label{
  width: 300px;
  margin-left: auto;
  margin-right: 0;
  border: 1px solid #006E5D;
  border-left: 6px solid #008b78;
}
@media (max-width: 599px){
  .price-label{
    width: 100%;
    margin: 0 auto;
  }
}

/* =============================================
画像比率(sp)
============================================= */
@media (max-width: 599px){
  .ar_sp img{
    aspect-ratio: 380 / 230;
    object-fit: cover;
  }
}


@media (max-width: 599px){
  .ta_c_sp{
    text-align: center !important;
  }
}

.bg_green_op7{
  background-color: rgba(0, 110, 93, .7)!important;
}
.bg_green_op2{
  background-color: rgba(0, 110, 93, .2)!important;
}

.fz60 {
  font-size: 65px !important;
}
@media (max-width: 959px){
  .fz60 {
    font-size: 8vw!important;
  }
}
@media (max-width: 599px){
  .fz60 {
    font-size: 10vw!important;
  }
}
.p-relative{
  position: relative;
}
.p-absolute{
  position: absolute !important;
}

.price-wrap{
  bottom: 45px;
}
@media (max-width: 599px){
  .price-wrap{
    bottom: 33px;
  }
}
.price-ttl{
  bottom: 0;
}
@media (max-width: 599px){
  .price-ttl{
    position: static !important;
  }
}

/* =============================================
STEPのラベル
============================================= */
.p-step-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: #006e5d;
    color: #fff;
    line-height: 1;
}
@media (max-width: 599px){
  .p-step-label{
    width: 48px;
    height: 48px;
  }
}

/* 「step」テキスト部分 */
.p-step-label__text {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 2px;
    text-transform: uppercase;
}
@media (max-width: 599px){
  .p-step-label__text{
    font-size: 11px;
  }
}

/* 「1」数字部分 */
.p-step-label__num {
    font-size: 23px;
    font-weight: 800;
    letter-spacing: 0.02em;
}
@media (max-width: 599px){
  .p-step-label__num{
    font-size: 20px;
  }
}

.p-step-ttl{
  border-bottom: dashed 2px #006E5D;
  gap: 10px;
}

.p-step-item {
    position: relative;
}

.p-step-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2.5em; /* gapに合わせて調整 */
    transform: translateX(-50%);
    
    /* 三角形の作成 */
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-top: 25px solid #fdd304; /* 下向きの三角 */
    
    z-index: 1;
}

.btn_small{
  max-width: 300px;
}
.btn_small a{
  min-width: 300px !important;
}
@media (max-width: 599px){
  .ml-auto_sp{
    margin-left: auto !important;
  }
}
.ta_r_l_sp{
  text-align: right;
}
@media (max-width: 599px){
  .ta_r_l_sp{
    text-align: left;
  }
}