@charset "UTF-8";
@media (max-width: 599px){
  .fz57_sp{
    font-size: 57px !important;
  }
  .fz65_sp{
    font-size: 65px !important;
  }
  .pt_4em_sp{
    padding-top: 4rem !important;
  }
}

#body_wrap:not(.home) {
  .post_content .cta_bg{
    padding-top: 6rem !important;
  }
  .post_content .cta_bg::before{
    clip-path: none !important;
  }
}
@media (max-width: 599px){
  #body_wrap:not(.home) {
    .post_content .cta_bg{
      padding-top: 4rem !important;
    }
  }
}
.border_theme_4{
  border: #003B7D 4px solid !important;
}
.f_white_edge{
  -webkit-text-stroke: 6px #fff;
  paint-order: stroke fill;
  font-weight: 900;
  letter-spacing: 0.05em;
  display: inline-block;
}

/* ============================================
透過した数字
============================================ */
.p-num-wrapper {
  counter-reset: column-count;
}

.p-num-content {
  position: relative;
  padding-top: 40px;
  height: 100%;
}

.p-num-content::before {
  counter-increment: column-count;
  content: counter(column-count, decimal-leading-zero);
  position: absolute;
  top: -40px;
  left: -5px;
  font-size: 7rem;
  font-weight: 900;
  line-height: 1;
  font-style: italic;
  color: rgba(0, 59, 125, 0.5);
  z-index: 0;
  pointer-events: none;
  font-family: 'OswaldLocal';
}

.p-round-img {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 6px solid #003B7D;
  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-num-content::before {
    font-size: 6rem;
    top: 0;
  }
}

/* =============================================
グレー縁の丸画像
============================================= */
.p-round-img-gray {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 6px solid #cfcfcf;
  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-gray{
    width: 150px;
    height: 150px;
    border: 3px solid #cfcfcf;
  }
}


/* =============================================
二重線の丸画像
============================================= */
.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 #003B7D !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;
}





/* =============================================
左にラインのあるタイトル
============================================= */
.post_content .p-left-line-ttl{
  position: relative;
  padding: .5em 1em !important;
}
.post_content .p-left-line-ttl::before{
  width: 5px !important;
  height: 2em !important;
  content: "" !important;
  background: #003B7D !important;
  position: absolute;
  left: 0 !important;
}
/* =============================================
左右にラインのあるタイトル(白)
============================================= */
.post_content .p-ttl-line {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.p-ttl-line::before,
.p-ttl-line::after {
  content: "" !important;
  flex-grow: 1;
  height: 2px !important;
  background: #fff !important;
  position: static !important;
  width: unset !important;
}

.p-ttl-line::before {
  margin-right: 20px;
}

.p-ttl-line::after {
  margin-left: 20px;
}

/* =============================================
左右にラインのあるタイトル(白)
============================================= */
.post_content .p-ttl-line-blue {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.p-ttl-line-blue::before,
.p-ttl-line-blue::after {
  content: "" !important;
  flex-grow: 1;
  height: 2px !important;
  background: #003B7D !important;
  position: static !important;
  width: unset !important;
}

.p-ttl-line-blue::before {
  margin-right: 20px;
}

.p-ttl-line-blue::after {
  margin-left: 20px;
}

/* =============================================
吹き出しタイトル
============================================= */
.post_content .p-ttl-fukidashi {
  position: relative;
  display: inline-block;
  padding: .5em 1em;
  background: #003B7D;
  color: #fff;
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
}

.p-ttl-fukidashi::after {
  content: "" !important;
  position: absolute;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%);
  border-width: 12px 12px 0 12px !important;
  border-style: solid !important;
  border-color: #003B7D transparent transparent transparent !important;
}

/* =============================================
白の吹き出しタイトル
============================================= */
.post_content .p-ttl-fukidashi-white {
  position: relative;
  display: inline-block;
  padding: .5em 1em;
  color: #003B7D;
  background-color: #fff;
  width: 100%;
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
}

.p-ttl-fukidashi-white::after {
  content: "" !important;
  position: absolute;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%);
  border-width: 12px 12px 0 12px !important;
  border-style: solid !important;
  border-color: #fff transparent transparent transparent !important;
  z-index: 3;
}

/* =============================================
画面幅いっぱいタイトル
============================================= */
.post_content .p-ttl-fullwidth{
  width: 100vw !important;
  left: 50%;
  padding: .5em 0 !important;
  transform: translateX(-50%);
}

/* =============================================
下線マーカー
============================================= */
.post_content .p-ttl-marker {
  background: linear-gradient(transparent 70%, #FFF100 70%);
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-weight: bold;
  padding: 0 0.2em !important;
  text-align: center;
}

/* =============================================
ボタン100%
============================================= */
.w100_btn a{
  width: 100%;
  min-width: 100% !important;
}

/* =============================================
枠4px
============================================= */
.border4.yellow{
  border: 4px solid #FFF100;
}

/* =============================================
カラム内の順番調整用
============================================= */
@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;
    }
}

@media (max-width: 599px) {
  .p-first-point-fe .swell-block-columns__inner{
    justify-content: flex-end !important;
}
}



/* =============================================
塗装へのこだわりページ
============================================= */
.absolute{
  position: absolute !important;
}
.relative{
  position: relative;
}
.absolute.top50{
  transform: translateY(-50%);
  top: 50%;
}
.absolute.left10{
  left: 10px !important;
}
.stroke{
  font-weight: bold;
  -webkit-text-stroke: 8px #fff;
  paint-order: stroke fill;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.p-point-ttl-wrapper{
  position: relative;
}
@media (max-width: 599px){
  .p-point-ttl-wrapper{
    display: block !important;
    width: 100%;
    margin-bottom: 0 !important;
  }
}
.p-point-ttl-wrapper::before{
  width: 100%;
  height: 3px;
  background-color: #003B7D;
  opacity: .4;
  position: absolute;
  content: "";
  left: 0;
  bottom: 10px;
}
.post_content .p-point-ttl{
  padding: 0 0 15px 15px !important;
  margin-left: -1em !important;
}
@media (max-width: 599px){
  .post_content .p-point-ttl{
    margin-top: -.5em !important;
    text-align: left !important;
    padding-left: 1.1em !important;
  }
}
.p-point-img{
  position: relative;
  z-index: 2;
  border: 3px solid #003B7D;
}
.p-point-img::before{
  position: absolute;
  width: 100% !important;
  height: 100% !important;
  content: "" !important;
  background-color: #003B7D !important;
  right: -8px;
  bottom: -8px !important;
  z-index: -1 !important;
}


.c-balloon.-bln-right .c-balloon__text{
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.30));
}
/* =============================================
ステップブロックの数字
============================================= */
.swell-block-step__number{
  font-family: 'OswaldLocal';
}

/* =============================================
左上に三角のあるカード
============================================= */
.p-border-box{
  border: 4px solid #003B7D;
  padding: 15px !important;
  position: relative;
}
.p-border-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 25px solid #003B7D;
  border-right: 25px solid transparent;
}
.p-border-ttl-wrapper{
  min-height: 4.3em;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 599px){
  .p-border-ttl-wrapper{
    min-height: unset;
    text-align: center;
  }
}

.bg_l-blue_bd{
  border: #499ae1 4px solid;
  position: relative;
}
.bg_l-blue_bd::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 25px solid #499ae1;
  border-right: 25px solid transparent;
}

.p-paint-flex .swell-block-columns__inner{
  justify-content: center !important;
}


.p-material-tag{
  display: flex;
  gap: .5em ;
}
.p-material-tag p{
  border-radius: 5px;
  overflow: hidden;
}
.p-material-btn{
  width: 100%;
  border: 2px solid #003B7D;
  border-radius: 50px;
  padding: 1rem !important;
}