@charset "utf-8";

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
  font-family: 'IBM Plex Sans JP', sans-serif;
  font-weight: 700;
}

.sp{
    display: none;
}

picture {
    display: block;
}

img {
    vertical-align: bottom;
    width: 100%;
}

/* おすすめポイント ここから↓ */
.point {
    background-color: #EFB853;
/* ↓原因究明まで仮置き＾＾ */
    margin-top: -20px;

    padding-bottom: 20px;
}

.point h1 {
    width: 370px;
    height: 84px;
    background-color: #331608;   /* 好きな色に変更OK */
    border-radius: 42px;      /* 角丸 */
    display: flex;            /* 中央寄せに便利 */
    justify-content: center;  /* 横中央 */
    align-items: center;      /* 縦中央 */
    margin: 20px auto;        /* 中央配置 */
    font-size: 14pt;        /* 文字サイズ調整 */
    color: #FCFBF9;

}
/* おすすめポイント ここまで↑ */

/* キャンセル詳細 ここから↓ */
.cxl{
    width: 603px;
    height: 186px;
    background-color: #331608;   /* 好きな色に変更OK */
    border-radius: 15px;      /* 角丸 */
    display: flex;            /* 中央寄せに便利 */
    flex-direction: column;   /* 縦並びにする */
    justify-content: center;  /* 横中央 */
    align-items: center;      /* 縦中央 */
    margin: 20px auto;        /* 中央配置 */
    font-size: 14pt;        /* 文字サイズ調整 */
    color: #FCFBF9;
}
.cxl h3{
    font-size: 14pt;
    width: 100%;
    text-align: left;
    margin-left: 36px;
    padding-top: 20px;
}
.cxl p{
    font-size: 12pt;
    padding: 4px 20px 20px 20px;
}

@media (max-width: 625px) {
  .cxl {
    width: 90%;      /* ← 好きな幅に変更 */
    height: auto;    /* ← 高さ自動*/
    padding: 20px 0; /* ← 必要なら余白調整 */
  }

  .cxl h3 {
    margin-left: 20px; /* スマホで余白調整 */
    font-size: 13pt;
  }

  .cxl p {
    font-size: 11pt;
    padding: 10px 15px 20px 15px;
  }
}
/* キャンセル詳細 ここまで↑ */

/* ドローン画像 ここから↓ */
.drone-wrap {
  display: flex;
  justify-content: space-between; /* 左1つ、右側に2つ */
  align-items: center;
  width: 100%;
}

.right-group {
  display: flex;
  gap: 20px; /* 右側2つの間の余白 */
}

.drone {
  width: 150px; /* 画像サイズは調整 */
}
/* ドローン画像 ここまで↑ */

/* 配達の手順 ここから↓ */
.delivery h1{
    font-size: 19pt;
    text-align: center;
    color: #331608;

}
.delivery{
    background-color:#EFB853 ;
}

.flex {
    display: flex;
}

ol{
    width: 1000px;
    margin: 0 auto;
}
ol.flex {
    display: flex;/* 子要素(li)を横並びにする */
    flex-direction: row ;/* 横方向に並べる（縦ではなく） */
    flex-wrap: nowrap ;/* 折り返さず1行に収める */
    justify-content: space-between;/* 各 li の間に均等な余白を作る */
    align-items: flex-start;/* 各 li の上端を揃える */
}

ol.flex > li {
    list-style: none;/* 番号を消す（必要なら残してOK） */
    width: 33%;/* 3つを横に並べるために幅を1/3に */
    text-align: center;/* 画像とテキストを中央寄せ */
    color: #331608;
}

ol.flex img {
    width: 300px;/* li の幅を超えないようにする */
    height: auto;/* 縦横比を保ったまま縮小 */
    display: block;/* 画像の下に余計な隙間が出ないように */
    margin: 0 auto;/* 画像を中央に配置 */
}
.flex span{
    font-size: 14px;
}
/* 配達の手順 ここまで↑ */

/* よくある質問 ここから↓ */
section.question {
    background-color:#EFB853;
    padding: 0 20px;   /* ← 左右に20pxの余白を追加 */
}

.question{
    background-color:#EFB853 ;
}
.question h1{
    width: 260px;
    height: 60px;
    background-color: #331608;   /* 好きな色に変更OK */
    border-radius: 42px;      /* 角丸 */
    display: flex;            /* 中央寄せに便利 */
    justify-content: center;  /* 横中央 */
    align-items: center;      /* 縦中央 */
    margin: 0px auto 20px;        /* 中央配置 */
    font-size: 14pt;        /* 文字サイズ調整 */
    color: #FCFBF9;

}

section.question dl {
    max-width: 800px;
    margin: 0 auto;
    color: #331608;
}

section.question dt {
    background: #f5f5f5;        /* 質問の背景色 */
    padding: 15px 20px;
    font-weight: bold;
    border: 1px solid #ddd;
    border-radius: 15px 15px 0 0; /* 上だけ角丸 */
    color: #331608;
}

section.question dd {
    background: #ffffff;        /* 答えの背景色 */
    padding: 15px 20px;
    border: 1px solid #ddd;
    border-top: none;           /* dt と線が重ならないように */
    border-radius: 0 0 15px 15px; /* 下だけ角丸 */
    margin-bottom: 20px;        /* 質問ごとの余白 */
    line-height: 1.6;
    color: #331608;
}
section.question dd:last-child{
    margin-bottom: 0px;
}
/* よくある質問 ここまで↑ */

/* フッター ここから↓ */
.footer-space {
    height: 60px;          /* 隙間の高さ（調整OK） */
    background-color: #EFB853; /* 好きな背景色に変更 */
    width: 100%;           /* 横幅いっぱいに広げる */
    height: 40px;          /* 隙間の高さ */
    margin: 0;             /* 中央寄せを防ぐ */
    padding: 0
}

footer div{
width: 200px;
margin: 0 auto;
padding-top: 20px;

}
footer {
  width: 100%;
  height: 250px;
  background: #331608; 
  position: relative;
  margin: 0 auto; /* 中央配置したい場合 */
}

#copyright{
    color: #FCFBF9;
  position: absolute;
  left: 200px;   /* 左からの距離 */
  bottom: 20px; /* 下からの距離 */
  margin: 0;
}

#pagetop{
    position: fixed;
    bottom:1%;
    right:1%;
    z-index: 999;
    width: 10vw;
    min-width: 100px;
    transition: transform 0.3s ease

}

#pagetop:hover {
  transform: translateY(-8px);
}

@media screen and (max-width:555px){
    .nami{
        display: none;
    }
}

.btnwrap{
    position:fixed;
    bottom: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.cta-center {
  background: #ff5722;
  color: #fff;
  padding: 14px 40px;
  border-radius: 30px; /* 角丸 */
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);

  transition: transform 0.3s ease;
}
.cta-center:hover {
  transform: translateY(-5px);
}


/* フッター ここまで↑ */