body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック体",
    "YuGothic", "メイリオ", Meiryo, sans-serif;
}

.lp-wrapper {
  margin: 0 auto;
}

.lp-block {
  line-height: 0;
  position: relative;
}

.lp-block img {
  display: block;
  width: 100%;
  height: auto;
}

.cta-block {
  padding: 40px 16px;
  text-align: center;
  background: #fffbec;
}

/* PCでは改行しない */
.sp-br { display: none; }

/* スマホだけ改行する */
@media screen and (max-width: 767px) {
  .sp-br { display: inline; }
}

/* --------------------
   HERO
-------------------- */

.hero-block { margin-top: 120px; }

@media screen and (max-width: 767px) {
  .hero-block { margin-top: 62px; }
}
/* タブレットサイズ（768〜1227px）用 */
@media screen and (min-width: 768px) and (max-width: 1227px) {
  .hero-block {
    margin-top: 62px;   /* ← 好きな値（SPと同じでOK） */
  }
}

/* 実績バッジ */
.delivery-hero__badges {
  text-align: center;
}

.delivery-hero__badges img {
  max-width: 800px;            /* 好みで調整。3つ並びでちょうどいいくらい */
  width: 100%;
  height: auto;
  display: inline-block;
}




/* ▼ ボタン外側（位置指定＆サイズ） */
.d_button {
  position: absolute;
  bottom: 60px;          /* 下からの距離 */
  left: 50%;             /* 横中央起点 */
  transform: translateX(-50%); /* 完全中央寄せ */

  width: 100%;
  max-width: 600px;      /* 最大幅 */
  padding: 0 16px;       /* 画面端にくっつかないように保険 */
  border-radius: 20px;   /* エリア自体の角丸（なくてもOK） */
}

/* ▼ ボタン本体 */
.d_button > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;

  height: 60px;
  max-width: 600px;
  margin: 0 auto;

  border-radius: 50px;
  border: 2px solid #fff;
  background: linear-gradient(
    180deg,
    rgba(244, 100, 18, 1) 0%,
    rgba(255, 121, 45, 1) 35%,
    rgba(255, 151, 92, 1) 100%
  );

  color: #fff;
  font-size: 2rem;
  font-weight: 700;

  position: relative;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
  overflow: hidden;

  /* アニメ・ホバー系 */
  transition: all 0.25s ease;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
  animation: pulse 2.5s infinite;
}

/* ホバー時 */
.d_button > a:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 12px rgba(0,0,0,.35);
  filter: brightness(1.08);
}

/* クリック時 */
.d_button > a:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

/* キラッとエフェクト */
.d_button > a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 120%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.4) 50%,
    transparent 100%
  );
  transition: all 0.6s ease;
}

.d_button > a:hover::before {
  left: 120%;
}

/* パルスアニメーション */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,100,18,0.6); }
  70%  { box-shadow: 0 0 0 12px rgba(255,100,18,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,100,18,0); }
}

/* ============
 スマホ用調整
============ */
@media screen and (max-width: 768px) {

  /* CTA全体の位置調整 */
  .d_button {
    bottom: 3%;       /* 下の余白を少し詰める */
    max-width: 80%;     /* 少し細く */
  }

  /* ボタン本体 */
  .d_button > a {
    height: 48px;       /* 高さを小さく */
    font-size: 1.4rem;  /* 文字サイズ調整 */
    border-radius: 30px;
  }

}
@media screen and (max-width: 480px) {
  .d_button > a {
    height: 44px;
    font-size: 1.2rem;
  }
}

/* ▼ ボタン外側（位置指定＆サイズ） */
.cta_button {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 16px;
    border-radius: 20px;
}

/* ▼ ボタン本体 */
.cta_button > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;

  height: 60px;
  max-width: 600px;
  margin: 0 auto;

  border-radius: 50px;
  border: 2px solid #fff;
  background: linear-gradient(
    180deg,
    rgba(244, 100, 18, 1) 0%,
    rgba(255, 121, 45, 1) 35%,
    rgba(255, 151, 92, 1) 100%
  );

  color: #fff;
  font-size: 2rem;
  font-weight: 700;

  position: relative;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
  overflow: hidden;

  /* アニメ・ホバー系 */
  transition: all 0.25s ease;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
  animation: pulse 2.5s infinite;
}

/* ホバー時 */
.cta_button > a:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 12px rgba(0,0,0,.35);
  filter: brightness(1.08);
}

/* クリック時 */
.cta_button > a:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

/* キラッとエフェクト */
.cta_button > a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 120%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.4) 50%,
    transparent 100%
  );
  transition: all 0.6s ease;
}

.cta_button > a:hover::before {
  left: 120%;
}

/* パルスアニメーション */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,100,18,0.6); }
  70%  { box-shadow: 0 0 0 12px rgba(255,100,18,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,100,18,0); }
}

/* ============
 スマホ用調整
============ */
@media screen and (max-width: 768px) {

  /* CTA全体の位置調整 */
  .cta_button {
    bottom: 24px;       /* 下の余白を少し詰める */
    max-width: 90%;     /* 少し細く */
  }

  /* ボタン本体 */
  .cta_button > a {
    height: 48px;       /* 高さを小さく */
    font-size: 1.4rem;  /* 文字サイズ調整 */
    border-radius: 30px;
  }

}
@media screen and (max-width: 480px) {
  .cta_button > a {
    height: 44px;
    font-size: 1.2rem;
  }
}
/* ==============================================================
# jisseki-block
=========================================================== */


@media screen and (max-width: 767px) {
  .jisseki-block img {
    content: url("/assets/images/delivery/sp_delivery_img02.jpg");
  }
}

/* ==============================================================
# worry-block
=========================================================== */


@media screen and (max-width: 767px) {
  .worry-block img {
    content: url("/assets/images/delivery/sp_delivery_img03.jpg");
  }
}

/* ==============================================================
# anshin-block
=========================================================== */


@media screen and (max-width: 767px) {
  .anshin-block img {
    content: url("/assets/images/delivery/sp_delivery_img04.jpg");
  }
}

/* ==============================================================
# reason-block
=========================================================== */


@media screen and (max-width: 767px) {
  .reason-block img {
    content: url("/assets/images/delivery/sp_delivery_img11.jpg");
  }
}


/* ==============================================================
# support-block
=========================================================== */


@media screen and (max-width: 767px) {
  .support-block img {
    content: url("/assets/images/delivery/sp_delivery_img05.jpg");
  }
}


/* ==============================================================
# service-block
=========================================================== */


@media screen and (max-width: 767px) {
  .service-block img {
    content: url("/assets/images/delivery/sp_delivery_img06.jpg");
  }
}


/* ==============================================================
# merit-block
=========================================================== */


@media screen and (max-width: 767px) {
  .merit-block img {
    content: url("/assets/images/delivery/sp_delivery_img07.jpg");
  }
}


/* ==============================================================
# step-block
=========================================================== */


@media screen and (max-width: 767px) {
  .step-block img {
    content: url("/assets/images/delivery/sp_delivery_img08.jpg");
  }
}



/* ==============================================================
# campaign-block
=========================================================== */


@media screen and (max-width: 767px) {
  .campaign-block img {
    content: url("/assets/images/delivery/sp_delivery_img09.jpg");
  }
}



/* ==============================================================
# qa
=========================================================== */


.d_qa {
  background: url(/assets/images/delivery/delivery_bg10.png)
}

.d_qa .qa__inner>.title {
  position: relative;
}

.d_qa .qa__inner>.title::before {
  content: "";
  display: none;
}

@media print,
screen and (max-width: 767px) {
.d_qa   .qa__inner>.title::before {
    font-size: 5rem;
  }
}

.d_qa .qa__inner>.title>h2 {
  font-size: 3.5rem;
  position: relative;
  z-index: 3;
    color: #ffffff;
}

@media print,
screen and (min-width: 768px) {
.d_qa   .qa__inner>.title>h2 {
    font-size: 5.5rem;
  }
}

.d_qa .qa__inner-list {
  margin-top: 60px;
}

@media print,
screen and (min-width: 768px) {
.d_qa   .qa__inner-list {
    margin-top: 135px;
  }
}

.d_qa .qa__inner-list>.item {
  border: solid 2px #333;
  border-radius: 10px;
  background: #fff;
}

@media print,
screen and (min-width: 768px) {
.d_qa   .qa__inner-list>.item {
    border-radius: 20px;
  }
}

.d_qa .qa__inner-list>.item:not(:first-of-type) {
  margin-top: 30px;
}

@media print,
screen and (min-width: 768px) {
.d_qa   .qa__inner-list>.item:not(:first-of-type) {
    margin-top: 50px;
  }
}

.d_qa .qa__inner-list>.item>dt {
  padding: 7px 20px 7px 15px;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
}

@media print,
screen and (min-width: 1024px) {
.d_qa   .qa__inner-list>.item>dt {
    padding: 10px 23px 10px 55px;
  }
}

.d_qa .qa__inner-list>.item>dt::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: solid 2px #333;
  border-bottom: solid 2px #333;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%) rotate(45deg);
  transition: all 0.3s ease;
  transform-origin: center center 0;
}

@media print,
screen and (min-width: 768px) {
.d_qa   .qa__inner-list>.item>dt::before {
    width: 15px;
    height: 15px;
    right: 32px;
  }
}

.d_qa .qa__inner-list>.item>dt>h3 {
  font-size: 1.5rem;
  font-weight: 700;
  transform: translateY(-2px);
}

@media print,
screen and (min-width: 768px) {
.d_qa   .qa__inner-list>.item>dt>h3 {
    font-size: 1.7rem;
    transform: translateY(-2px);
  }
}

@media print,
screen and (min-width: 1024px) {
.d_qa   .qa__inner-list>.item>dt>h3 {
    font-size: 2.4rem;
    transform: translateY(-6px);
  }
}

.d_qa .qa__inner-list>.item>dt>h3::before {
  content: "Q";
  font-size: 2rem;
  margin-right: 6px;
  color: #333;
  font-weight: 400;
}

@media print,
screen and (min-width: 1024px) {
.d_qa   .qa__inner-list>.item>dt>h3::before {
    font-size: 4rem;
    margin-right: 12px;
  }
}

.d_qa .qa__inner-list>.item>dd {
  padding: 7px 20px 7px 15px;
  display: none;
}

@media print,
screen and (min-width: 1024px) {
.d_qa   .qa__inner-list>.item>dd {
    padding: 0px 23px 32px 75px;
  }
}

.d_qa .qa__inner-list>.item>dd>p {
  font-size: 1.4rem;
  font-weight: 500;
  text-indent: -2rem;
  padding-left: 2rem;
  line-height: 1.35;
}

@media print,
screen and (min-width: 1024px) {
.d_qa   .qa__inner-list>.item>dd>p {
    font-size: 2.2rem;
    text-indent: -3.6rem;
    padding-left: 2rem;
  }
}

.d_qa .qa__inner-list>.item>dd>p::before {
  content: "A";
  font-size: 2rem;
  margin-right: 6px;
  color: #f46412;
  font-weight: 400;
}

@media print,
screen and (min-width: 1024px) {
 .d_qa  .qa__inner-list>.item>dd>p::before {
    font-size: 4rem;
    margin-right: 12px;
  }
}

.d_qa .qa__inner .is-active>dt {
  border: none;
}

.d_qa .qa__inner .is-active>dt::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: solid 2px #333;
  border-bottom: solid 2px #333;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%) rotate(-135deg);
  transition: all 0.3s ease;
  transform-origin: center center 0;
}

@media print,
screen and (min-width: 768px) {
.d_qa   .qa__inner .is-active>dt::before {
    width: 15px;
    height: 15px;
    right: 32px;
  }
}


/* ==============================================================
# contact
=========================================================== */
.d_contact__inner>.title {
  position: relative;
}

.d_contact__inner>.title::before {
  content: "";
  display: none;

}

@media print,
screen and (max-width: 767px) {
  .d_contact__inner>.title::before {
    font-size: 5rem;
  }
}

.d_contact__inner>.title>h2 {
  font-size: 3rem;
  position: relative;
  z-index: 3;
}

@media print,
screen and (min-width: 768px) {
  .d_contact__inner>.title>h2 {
    font-size: 4rem;
  }
}

.d_contact__inner .paragraph-10 {
  margin-top: 30px;
}

@media print,
screen and (min-width: 768px) {
  .d_contact__inner .paragraph-10 {
    margin-top: 60px;
margin-bottom: 60px;
  }
}

.d_contact__inner .button {
  width: 100%;
}

.d_contact__inner .button>a {
  width: 100%;
  display: flex;
}

.d-contactsec {
  color: #333;
  background-color: #f9df96;
  background-image: url(/assets/images/delivery/delivery_bike.png);
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: 25%;
  padding: 100px 40px;
}

.d-contactsec__inner {
  max-width: 1024px;
  background-color: rgba(255, 255, 255, .7);
  border-radius: 2px;
  margin-left: auto;
  margin-right: auto;
  padding: 60px 40px;
}

/* スマホ用 */
@media screen and (max-width: 767px) {
  .d-contactsec {
    padding: 6vw;
    background-size: 40%;
    background-position: right bottom;
  }

  .d-contactsec__inner {
    padding: 40px 7vw 56px; /* 下側に少し余白を多めに */
  }
}



