@charset "UTF-8";
html, body, div, img{
    margin: 0;
    padding: 0;
    display: block;
}
html { scroll-behavior: smooth;}
.campaign {
    max-width: 600px;
    margin: 0 auto;
    color: #3E3A39;
    letter-spacing: 0.15em;
    line-height: 1.8em;
    text-align: justify;
    font-size: 115%;
}
.campaign h2{
    font-family: 'Noto Sans JP', "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.campaign .padarea{
    padding: 10% 5% 0;
}
.campaign img{
    width: 100%;
}
.campaign a {
    display: block;
}
.campaign a img:hover{
    opacity: .8;
}
.area00{
    position: relative;
    line-height: 0;  /* 画像間の余白を消す */
    font-size: 0;    /* 念のため */
}
.area00 .hana_logo_bkc{
    position: absolute;
    position: absolute;
    top: 13%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    max-width: 110px;
}

.area00 img {
  display: block; /* ← ブラウザ余白を消す */
  width: 100%;    /* 必要に応じて */
  margin: 0;
  padding: 0;
  border: 0;      /* 念のため */
}

.cart_bg{
    padding: 0 10%;
}
.cart_bg01{
    padding: 0 32%;
}
.cart_bg02{
    padding: 0 25%;
    margin: 50px auto;
}
.cart2023_01{
    background: url(../img/05_cart01.png) no-repeat;
    background-size: 100%;
}
.cart2023_02, .cart2023_04{
    background: #fcf5ed;
}
.cart2023_03{
    background: #cb8069;
}
.cart2023_05, .cart2023_06{
    background: #fff;
}
footer{
    padding: 3% 0 0;
    background: #ffffff;
    max-width: 600px;
    margin: 0 auto;
    color: #3E3A39;
    letter-spacing: 0.15em;
    line-height: 1.8em;
    text-align: justify;
    /* font-size: 14px; */
    font-size: 90%;
}
footer ul{
     padding: 0 0 0 8%;
}
footer ul li{
    list-style: none;
}
footer ul li a{
    color: #3E3A39;
    text-decoration: none;
}
footer .copyright{
    padding: 5% 0;
    text-align: center;
    font-size: 80%;
}
/* .fixed_btn { 
    text-align: center;
    margin: 0 auto;
    position: fixed;
    bottom: 10px;
    right: 10px;
    }
.fixed_btn img{
    max-width: 200px;
    }  */
/* 省略: 変更なし */
.product-set {
    position: relative;
    display: block;
}
/* ベースのスタイル - PC向け */
.form-wrapper {
    position: relative;
}

#product-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 400px;
    margin: 0 auto;
    font-family: 'Noto Sans JP', sans-serif;
    padding: 10px;
    z-index: 1;
}

.form-group {
    margin-bottom: 10px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
    font-size: 14px;
}

select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    background-color: transparent;
    appearance: none;
    background-image: url('arrow-down.svg');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}

/* スマートフォン向けの調整 */
@media screen and (max-width: 600px) {
    #product-form {
        position: absolute;
        top: 45%;  /* 上下位置の調整 */
        transform: translate(-50%, -50%);
        width: 85%;
        max-width: 280px;  /* 最大幅をさらに調整 */
        padding: 5px;  /* パディングを小さく */
    }

    .form-group {
        margin-bottom: 5px;  /* グループ間の余白を縮小 */
    }

    label {
        font-size: 11px;  /* フォントサイズをさらに小さく */
        margin-bottom: 2px;  /* ラベルの下余白を縮小 */
        line-height: 1.2;  /* 行間を詰める */
    }

    select {
        padding: 6px;  /* セレクトボックスの高さを縮小 */
        font-size: 12px;
        background-size: 8px;
        margin-bottom: 3px;  /* セレクトボックス間の余白を調整 */
        line-height: 1.2;  /* 行間を詰める */
    }
}
.spiro-set {
    position: relative;
    display: block;
}

#spiro-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 400px;
    margin: 0 auto;
    font-family: 'Noto Sans JP', sans-serif;
    padding: 10px;
    z-index: 1;
}

/* スマートフォン向けの調整 */
@media screen and (max-width: 600px) {
    #spiro-form {
        position: absolute;
        top: 45%;
        transform: translate(-50%, -50%);
        width: 85%;
        max-width: 280px;
        padding: 5px;
    }
}
/* 既存のスタイルはそのままで、以下を追加 */
.spiro-set {
    position: relative;
    display: block;
}

#spiro-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 400px;
    margin: 0 auto;
    font-family: 'Noto Sans JP', sans-serif;
    padding: 10px;
    z-index: 1;
}

/* スマートフォン向けの調整 */
@media screen and (max-width: 600px) {
    #spiro-form {
        position: absolute;
        top: 45%;
        transform: translate(-50%, -50%);
        width: 85%;
        max-width: 280px;
        padding: 5px;
    }
}

/* TOPへ戻るボタン */
#backToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 15px;
  background: #333;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  z-index: 9999;
}

/* スライダー内カートボタン */
<style>
/* スライダー全体を親コンテナの幅に合わせる */
.mySwiper {
  width: 100%;
  max-width: 700px;   /* PC最大幅 */
  margin: auto;
}

/* スライド位置調整 */
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 画像 + ボタンを重ねるための親 */
.slide-wrap {
  position: relative;
  width: 100%;
}

/* 画像：LP幅に合わせて縮小（スマホで縮む） */
.slide-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* ▼ 購入ボタンを画像の上に重ねる */
.buy-btn {
  position: absolute;
  bottom: 110px;            /* 下から位置（調整可） */
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 28px;
  font-size: 20px;
  background: #27542B;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
}

.buy-btn:hover {
  opacity: 0.9;
}

/* ▼ スマホ（ボタンサイズ縮小） */
@media (max-width: 480px) {
  .buy-btn {
    font-size: 16px;
    padding: 10px 22px;
    bottom: 11%;　/* スマホ用下からの位置 */
  }
}


/* プルダウンをカートボタンの上に配置 */
.option-select {
  height: 28px;       /* 高さを30pxに固定 */
  padding: 2px 10px;  /* 内側の余白も小さくする */
  font-size: 10px;    /* 文字サイズも必要に応じて調整 */
  width: 200px;
  position: absolute;
  bottom: 180px; /* ボタンの上に調整 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: rgba(255,255,255,0.9); /* 画像上でも見える */
  font-size: 16px;
}

/* スマホ用調整 */
@media (max-width: 480px) {
  .option-select {
    height: 26px;
    width: 85%;
    bottom: 20%; /* ボタン上に微調整 */
    font-size: 13px;
    padding: 5px 10px;
  }
}

</style>


/* 矢印の色変更 */
.swiper-button-next,
.swiper-button-prev {
  color: #e60033; /* ← 好きな色に変更 */
}

/* ▼ ドットの色を変更 */
.swiper-pagination-bullet {
  background: #ccc;
  opacity: 1;
}
.swiper-pagination-bullet-active {
  background: #e60033;
}



/* pagination（ドット）の位置調整 */

/* PC（画像の中の40px上あたり） */
.swiper-pagination {
  bottom: 40px !important;
}

/* スマホ（もっと上にする） */
@media (max-width: 480px) {
  .swiper-pagination {
    bottom: 18px !important;
  }
}


/* 商品詳細リンク */
.detail-link {
  position: absolute;
  bottom: 70px;  /* ← 好きに調整 */
  left: 50%;
  transform: translateX(-50%);
  
  font-size: 16px;
  color: #952B00;
  text-decoration: underline;

  z-index: 10;
}

/* 商品詳細リンク（スマホ調整） */
@media (max-width: 480px) {
  .detail-link {
    bottom: 6%;
    font-size: 14px;
  }
}

/* スライダー背景色白線防止 */


/* 背景色つけるスライダー全体 */
.bg-slider {
  margin: 0 !important;
  padding: 0 !important;
  background-color: #A63105;
}

/* ラッパー */
.bg-slider .swiper-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  background-color: #A63105;
}

/* スライド */
.bg-slider .swiper-slide {
  margin: 0 !important;
  padding: 0 !important;
  background-color: #A63105;
}

/* スライド内 */
.bg-slider .slide-content {
  margin: 0 !important;
  padding: 0 !important;
  background-color: #A63105;
}

/* 画像 */
.bg-slider .swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}



/* ロゴからサイトトップへ戻るためのcss↓ */
.hero-with-logo {
  position: relative;
  display: inline-block;
}

.logo-click-area {
  position: absolute;

  /* ← ロゴの位置に合わせて調整してください */
  top: 4%;
  left: 5%;

  /* ← ロゴの大きさに合わせて調整してください */
  width: 30%;
  height:8%;

  display: block;
  cursor: pointer;
}

/* ↑ロゴからサイトトップへ戻るためのリンクここまで */




/* プレゼント詳細のためのcss↓ */
.hero-with-pre {
  position: relative;
  display: inline-block;
}

.pre-click-area {
  position: absolute;

  /* ← ロゴの位置に合わせて調整してください */
  bottom: 5%;
  right: 15%;

  /* ← ロゴの大きさに合わせて調整してください */
  width: 13%;
  height:6%;

  display: block;
  cursor: pointer;
}

/* ↑プレゼント詳細ここまで */