@charset "UTF-8";
@-ms-viewport {
  width: device-width;
}
/*--------------------------------------------------------------------------
CSS　出張修理サービス限定(style.css)ver.1 2025.12.18
--------------------------------------------------------------------------*/
/* ===============================
   共通設定
================================ */
/*■■■■■■ 基本設定 ■■■■■■■*/
/*紺色*/
/* ===============================
  セクションごとの背景設定
================================ */
.delivary-header {
  padding: 60px 0;
  background-color: #283278;
  color: #FFF;
}

/* ===============================
  デリバリーヘッダー
================================ */
.del-main-flex {
  margin: 0 auto 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 40px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.dil-main-title {
  font-size: 60px;
  line-height: 1.2;
  font-weight: 700;
}

.del-main-text-sub {
  margin: 10px auto;
  padding: 10px;
  display: block;
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1.2;
  border-top: 2px solid #FFF;
  border-bottom: 2px solid #FFF;
}
.del-main-text-sub span {
  color: #f5d44e;
}
.del-main-text-sub small {
  font-size: 2rem;
}

.del-main-list {
  text-align: left;
}

.del-step-flex {
  margin: 0 auto 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 40px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.step-block {
  width: 180px;
  min-wdith: 180px;
  height: 180px;
  text-align: center;
}
.step-block p {
  margin: 10px auto;
  font-size: 2.6rem;
  line-height: 1.2;
  font-weight: 700;
}

.del-step-ti-box {
  margin: 20px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 140px;
  min-width: 140px;
  height: 140px;
  border-radius: 70px;
  background-color: #f5d44e;
  color: #222;
}
.del-step-ti-box p {
  margin: auto;
  font-size: 2.4rem;
}

.next-arrow {
  position: relative;
}
.next-arrow:after {
  content: "";
  display: block;
  width: 29px;
  height: 33px;
  background: url("../images/delivary/next-arrow.png") center center no-repeat;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  right: -29px;
}

.next-balloon {
  position: relative;
}
.next-balloon:after {
  content: "";
  display: block;
  width: 29px;
  height: 33px;
  background: url("../images/delivary/next-arrow.png") center center no-repeat;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 0;
}

.del-step-img-box {
  display: block;
  width: 170px;
  min-wdith: 170px;
  height: 170px;
  border-radius: 85px;
  overflow: hidden;
  border: 5px solid #FFF;
}

.del-sub-flex {
  margin: 40px auto 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 20px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.del-service-block {
  display: block;
  width: 170px;
}
.del-service-block p.del-service-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 48px;
  background-color: #FFF;
  border-radius: 10px;
  color: #000;
  font-size: 2.2rem;
  font-weight: 700;
}
.del-service-block p.del-service-balloon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 48px;
  background-color: #f5d44e;
  border-radius: 24px;
  color: #000;
  font-size: 2rem;
  font-weight: 700;
  position: relative;
}
.del-service-block p.del-service-balloon:before {
  content: "";
  display: block;
  width: 29px;
  height: 33px;
  background: url("../images/delivary/next-arrow.png") center center no-repeat;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(180deg);
      -ms-transform: translateY(-50%) rotate(180deg);
          transform: translateY(-50%) rotate(180deg);
  left: -13px;
}

.del-tel-block {
  margin: 20px auto;
  padding: 20px 40px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
  border-radius: 25px;
  border: 3px solid #FFF;
}

.del-tel-text {
  font-size: 2.4rem;
  line-height: 1.2;
  font-weight: 700;
  color: #f5d44e;
}

.del-tel-no {
  font-size: 6rem;
  line-height: 1.2;
  font-weight: 400;
  font-family: "Arial", sans-serif;
}
.del-tel-no strong {
  font-weight: 700;
}

.del-tel-text-sub {
  display: block;
  font-size: 1.8rem;
  font-weight: 600;
}
.del-tel-text-sub span {
  border-bottom: 1px solid #FFF;
}

/* ===============================
   出張エリア
================================ */
.delivary-area {
  margin: 60px 0;
}

.del-area-block {
  margin: 40px auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 40px;
}

.del-area-img-box {
  border: 1px solid #283278;
}

.del-area-text {
  text-align: left;
}
.del-area-text li {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: #283278;
}
.del-area-text li strong {
  margin: 0 20px 0 0;
  padding: 5px 20px;
  display: inline-block;
  border: 2px solid #283278;
}

/* ===============================
   サービス内容
================================ */
.delivary-content {
  padding: 60px 0;
  background-color: rgb(208.5384615385, 215.6153846154, 229.4615384615);
}

.cate-read {
  margin: 40px auto;
  font-size: 2rem;
  font-weight: 600;
  color: #000;
}

.del-content-block {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 30px;
}

.del-content-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 20px;
}

.del-content-ti {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 80px;
  min-width: 80px;
  height: 80px;
  border-radius: 40px;
  background-color: #f5d44e;
  color: #283278;
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
}

.del-content-read {
  text-align: left;
  font-size: 1.6rem;
  line-height: 1.2;
}
.del-content-read strong {
  margin: 0 0 10px;
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: #283278;
}

a.btn-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #283278;
  color: #FFF;
  font-size: 1.8rem;
  letter-spacing: 2px;
  font-weight: 700;
  line-height: 1.2;
  min-width: 240px;
  width: 120px;
  height: 60px;
  border-radius: 30px;
}
a.btn-link:hover {
  color: #f5d44e;
}

/* ===============================
   申込アピール
================================ */
.delivary-appeal {
  margin: 60px 0;
}

.appeal-text-block {
  margin: 0 auto 40px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1px;
}

.bar {
  display: inline-block;
  width: 100px;
  height: 2px;
  background-color: #F61947;
}

.bar.right {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.bar.left {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.appeal-text {
  font-size: 3rem;
  font-weight: 700;
  color: #283278;
}

.del-tel-block-btm {
  margin: 20px auto;
  padding: 20px 40px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
  border-radius: 25px;
  border: 3px solid #F61947;
}

.del-tel-text-btm {
  font-size: 2.4rem;
  line-height: 1.2;
  font-weight: 700;
  color: #283278;
}

.del-tel-no-btm {
  font-size: 6rem;
  line-height: 1.2;
  font-weight: 400;
  font-family: "Arial", sans-serif;
  color: #283278;
}
.del-tel-no-btm strong {
  font-weight: 700;
  color: #F61947;
}

.del-tel-text-sub-btm {
  display: block;
  font-size: 1.8rem;
  font-weight: 600;
}
.del-tel-text-sub-btm span {
  border-bottom: 2px solid #F61947;
}

/*===============================
■■　スマホ用　■■
===============================*/
/*------------(XS)------------*/
@media (min-width: 320px) and (max-width: 566px) {
  /* ===============================
    デリバリーヘッダー(XS)
  ================================ */
  .dil-main-title {
    font-size: 4.2rem;
  }
  .del-main-text-sub {
    font-size: 2.2rem;
  }
  .del-main-text-sub small {
    font-size: 1.6rem;
  }
  .del-step-flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 80px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .step-block {
    width: 200px;
    min-wdith: 200px;
    height: 200px;
  }
  .step-block p {
    font-size: 2.2rem;
  }
  .del-step-ti-box {
    margin: 20px 10px 0;
    width: 180px;
    min-width: 180px;
    height: 180px;
    border-radius: 90px;
  }
  .del-step-ti-box p {
    font-size: 2.4rem;
  }
  .next-arrow:after {
    left: 50%;
    -webkit-transform: translateX(-50%) rotate(90deg);
        -ms-transform: translateX(-50%) rotate(90deg);
            transform: translateX(-50%) rotate(90deg);
    top: 235px;
  }
  .next-balloon:after {
    top: 220px;
    -webkit-transform: translateX(50%) rotate(90deg);
        -ms-transform: translateX(50%) rotate(90deg);
            transform: translateX(50%) rotate(90deg);
    right: 50%;
  }
  .del-step-img-box {
    display: block;
    width: 190px;
    min-wdith: 190px;
    height: 190px;
    border-radius: 95px;
  }
  .del-tel-block {
    margin: 20px auto;
    padding: 20px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
    border-radius: 25px;
    border: 3px solid #FFF;
  }
  .del-tel-text {
    font-size: 2rem;
  }
  .del-tel-no {
    font-size: 3.6rem;
  }
  /* ===============================
     出張エリア(XS)
  ================================ */
  .del-area-text-box {
    text-align: center;
  }
  .del-area-text {
    display: inline-block;
    width: auto;
  }
  .del-area-text li {
    text-align: left;
  }
  /* ===============================
     サービス内容(XS)
  ================================ */
  .cate-read {
    font-size: 2rem;
  }
  .del-content-block {
    gap: 40px;
  }
  .del-content-box {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .del-content-read {
    text-align: center;
  }
  /* ===============================
     申込アピール(XS)
  ================================ */
  .appeal-text-block {
    gap: 40px;
  }
  .bar {
    display: inline-block;
    width: 2px;
    height: 160px;
  }
  .bar.right {
    -webkit-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
            transform: rotate(20deg);
  }
  .bar.left {
    -webkit-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
            transform: rotate(-20deg);
  }
  .appeal-text {
    font-size: 2.2rem;
  }
  .del-tel-block-btm {
    padding: 20px;
  }
  .del-tel-text-btm {
    font-size: 2rem;
  }
  .del-tel-no-btm {
    font-size: 3.6rem;
  }
} /*xs*/
/*------------(SM)------------*/
@media (min-width: 567px) and (max-width: 767px) {
  /* ===============================
    デリバリーヘッダー(SM)
  ================================ */
  .dil-main-title {
    font-size: 4.2rem;
  }
  .del-main-text-sub {
    font-size: 2.2rem;
  }
  .del-main-text-sub small {
    font-size: 1.6rem;
  }
  .del-step-flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 80px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .step-block {
    width: 200px;
    min-wdith: 200px;
    height: 200px;
  }
  .step-block p {
    font-size: 2.2rem;
  }
  .del-step-ti-box {
    margin: 20px 10px 0;
    width: 180px;
    min-width: 180px;
    height: 180px;
    border-radius: 90px;
  }
  .del-step-ti-box p {
    font-size: 2.4rem;
  }
  .next-arrow:after {
    left: 50%;
    -webkit-transform: translateX(-50%) rotate(90deg);
        -ms-transform: translateX(-50%) rotate(90deg);
            transform: translateX(-50%) rotate(90deg);
    top: 235px;
  }
  .next-balloon:after {
    top: 220px;
    -webkit-transform: translateX(50%) rotate(90deg);
        -ms-transform: translateX(50%) rotate(90deg);
            transform: translateX(50%) rotate(90deg);
    right: 50%;
  }
  .del-step-img-box {
    display: block;
    width: 190px;
    min-wdith: 190px;
    height: 190px;
    border-radius: 95px;
  }
  .del-tel-block {
    margin: 20px auto;
    padding: 20px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
    border-radius: 25px;
    border: 3px solid #FFF;
  }
  .del-tel-text {
    font-size: 2rem;
  }
  .del-tel-no {
    font-size: 3.6rem;
  }
  /* ===============================
     出張エリア(SM)
  ================================ */
  .del-area-text-box {
    text-align: center;
  }
  .del-area-text {
    display: inline-block;
    width: auto;
  }
  .del-area-text li {
    text-align: left;
  }
  /* ===============================
     サービス内容(SM)
  ================================ */
  .cate-read {
    font-size: 2rem;
  }
  .del-content-block {
    gap: 40px;
  }
  .del-content-box {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .del-content-read {
    text-align: center;
  }
  /* ===============================
     申込アピール(SM)
  ================================ */
  .appeal-text-block {
    gap: 40px;
  }
  .bar {
    display: inline-block;
    width: 2px;
    height: 160px;
  }
  .bar.right {
    -webkit-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
            transform: rotate(20deg);
  }
  .bar.left {
    -webkit-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
            transform: rotate(-20deg);
  }
  .appeal-text {
    font-size: 2.2rem;
  }
  .del-tel-block-btm {
    padding: 20px;
  }
  .del-tel-text-btm {
    font-size: 2rem;
  }
  .del-tel-no-btm {
    font-size: 3.6rem;
  }
} /*SM*/
/*------------(MD)------------*/
@media (min-width: 768px) and (max-width: 1023px) {
  .item-1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; /* 左右センター */
  }
  .next-balloon:after {
    top: 145px;
    -webkit-transform: translateX(50%) rotate(90deg);
        -ms-transform: translateX(50%) rotate(90deg);
            transform: translateX(50%) rotate(90deg);
    right: 50%;
  }
  .del-service-block p.del-service-balloon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    height: 48px;
    background-color: #f5d44e;
    border-radius: 24px;
    color: #000;
    font-size: 2rem;
    font-weight: 700;
    position: relative;
  }
  .del-service-block p.del-service-balloon:before {
    content: "";
    display: block;
    width: 29px;
    height: 33px;
    background: url("../images/delivary/next-arrow.png") center center no-repeat;
    position: absolute;
    top: -15px;
    -webkit-transform: translateX(-50%) rotate(-90deg);
        -ms-transform: translateX(-50%) rotate(-90deg);
            transform: translateX(-50%) rotate(-90deg);
    left: 50%;
  }
} /*MD*/
/*------------(LG)------------*/
@media (min-width: 1024px) and (max-width: 1215px) {
  .nav_list {
    margin: 0;
  }
  .hamburger {
    display: none;
  }
} /*LG*/
/*------------(XL)------------*/
/*XL*/