@charset "utf-8";

section {
  margin: 50px 0px 0px 0px;
}


/* =========================
商品グリッド
PC・タブレット・スマホ 全て2列
========================= */

.kan01{
  color:#E0E0E0;
  font-size:14pt;
  font-weight:bold;
  padding:10px 15px;
   margin:20px auto;   /* ←中央寄せ */
  display:block;
  line-height:1.4;
  background:#E60033;
  border-radius:20px;
  box-sizing:border-box;
  max-width:750px;   /* ←これ追加（好きな幅に） */
}

.bag06{
  color:#e2041b !important;
  font-size:20pt !important;
  font-weight:bold;
  width:500px;
  padding:0.2em;
  margin:10px auto;
  display:block;
  text-align:center;
  background:#ffffff;
  border:2px solid #e2041b;
  border-radius:25px;
  line-height:1.4;
  box-shadow:none;
  border-top:none;  
}

h2.bag06{
   border:none !important;
  box-shadow:none !important;
  color:#e2041b;
  font-size:20pt;
  font-weight:bold;
  width:500px;
  padding:0.2em !important;
  margin:15px auto;
  line-height:1.1 !important; 
  display:block;
  text-align:center;
  background:#ffffff;
  outline:2px solid #e2041b;   /* ← 枠 */
  border-radius:25px;
}

/* =========================
見出し h3 共通
========================= */

/* =========================
h2 見出し
========================= */

.s02 h2{
  font-size:20pt;
  font-weight:bold;
  color:#333;
  margin:30px 0 15px;
  line-height:1.4;
  text-align:left;
}

.custom-h2{
  font-size:22pt !important;
  font-weight:bold;
  border-bottom:3px solid #E60033;
  padding-bottom:2px;
}

h3{
  color:#ffffff;
  padding:0.5em 20px;
  margin:0 0 10px 0;
  display:block;
  line-height:1.3;
  background:#E60033;
  border-radius:25px;
}

h4 {
  color: #e9e9e9;/*文字色*/
  padding: 15px;/*文字周りの余白*/
  margin: 0px;
  display: block;/*おまじない*/
  line-height: 1.3;/*行高*/
  width: auto;
  background: #213a70;/*背景色*/
  vertical-align: middle;
}

h5 {
  color: #505050;/*文字色*/
  font-size: 15pt;
  padding: 0.5em;/*文字周りの余白*/
  margin: 0px;
  display: block;/*おまじない*/
  line-height: 1.3;/*行高*/
  width: 100%;
  vertical-align: middle;
}

.bag01{
  color:#fff;
  font-size:14pt;
  font-weight:bold;
  width:400px;
  padding:0.5em;
  margin:10px auto;
  text-align:center;
  background:#213a70;
  border-radius:20px;
}

.bag02{
  color:#e9e9e9;
  font-size:18pt;
  font-weight:bold;
  width:300px;
  padding:0.2em 1em;
  margin:10px 0;          /* ←中央配置 */
  display:flex;              /* ←これ重要 */
  justify-content:center;    /* 横中央 */
  align-items:center;        /* 縦中央 */
  text-align:center;         /* 文字中央 */
  background:url("https://www.delight-base.jp/img/bag/homa_kiji.jpg") center / cover no-repeat;
  border-radius:20px;
}

.bag03 {
  color: #e9e9e9;/*文字色*/
  font-size: 18pt;
  font-weight: bold;
  width: 400px;
  padding: 0.5em;/*文字周りの余白*/
  margin: 20px 0;
  display: block;/*おまじない*/
  line-height: 1.3;/*行高*/
  background: #313131;/*背景色*/
  border-radius: 20px 20px 20px 20px;/*左側の角を丸く*/
}

.bag04 {
  color: #ffffff !important;/*文字色*/
  font-size: 18pt;
  font-weight: bold;
   text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
  width:300px;
  padding:0.2em 1em;
  margin:10px 0;          /* ←中央配置 */
  display:flex;              /* ←これ重要 */
  justify-content:center;    /* 横中央 */
  align-items:center;        /* 縦中央 */
  text-align:center;         /* 文字中央 */
  background: url("https://www.delight-base.jp/img/bag/hitoe_kiji.jpg") center / cover no-repeat; /* ←ここ変更 */
  border-radius: 20px 20px 20px 20px;/*左側の角を丸く*/
}

.bag05 {
  color: #000000 !important;/*文字色*/
  font-size: 18pt;
  font-weight: bold;
  width:300px;
  padding:0.2em 1em;
  margin:10px 0;          /* ←中央配置 */
  display:flex;              /* ←これ重要 */
  justify-content:center;    /* 横中央 */
  align-items:center;        /* 縦中央 */
  text-align:center;         /* 文字中央 */
  background: url("https://www.delight-base.jp/img/bag/hanpu_kiji.jpg") center / cover no-repeat; /* ←ここ変更 */
  border-radius: 20px 20px 20px 20px;/*左側の角を丸く*/
}


.product-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px 20px;
}

.center-box{
  text-align:center;
}

/* 商品カード */

.product-grid .wrap{
  display:flex;
  gap:15px;
  align-items:flex-start;
}

/* 説明 */

.product-grid .left002{
  flex:1;
  min-width:0;
}

/* 画像 */

.product-grid .image{
  flex-shrink:0;
}

.product-grid .image img{
  width:150px;
  height:auto;
  display:block;
}


/* =========================
タブレット
========================= */

@media (max-width:900px){

.product-grid{
  grid-template-columns:repeat(2,1fr);
  gap:25px 15px;
}

.product-grid .wrap{
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.product-grid .left002{
  width:100%;
}

.product-grid .image img{
  width:100%;
  max-width:150px;
}

}


/* =========================
スマホ
========================= */

@media (max-width:768px){

.product-grid{
  grid-template-columns:repeat(2,1fr);
  gap:15px 10px;
}

.product-grid .wrap{
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:10px;
  background:#ffffff;
  border-radius:10px;
}

.product-grid .left002{
  width:100%;
  font-size:10pt;
  line-height:1.5;
  text-align:left;
}

.product-grid .image img{
  width:100%;
  max-width:130px;
}

}

/* スマホ用：横スクロール防止 */
@media screen and (max-width: 768px) {
  .left002{
    width: 100%;        /* 画面幅いっぱい使ってOK */
    flex-shrink: 1;    /* 縮小・折り返しを許可 */
  }
}

@media screen and (max-width: 768px) {
  .wrap{
    display:flex;
  }
}

@media screen and (max-width: 768px){

  .image-row{
    flex-wrap: wrap;      /* 折り返し許可 */
    justify-content: center;
  }

  .image-row img{
    width: 45%;           /* 2列表示 */
    max-width: 100%;
    height: auto;
  }
  
  }
  @media screen and (max-width: 767px) {
  section {
    margin: 10px 0px;
  }

  .bag01 {
    color: #e9e9e9;/*文字色*/
    font-size: 13pt;
    font-weight: bold;
    width: 300px;
    padding: 0.5em;/*文字周りの余白*/
    margin: 10px auto;
    display: block;/*おまじない*/
    line-height: 1.3;/*行高*/
    background: #213a70;/*背景色*/
    border-radius: 25px 25px 25px 25px;/*左側の角を丸く*/
  }
  
    .bag02 {
    color: #e9e9e9;/*文字色*/
    font-size: 13pt;
    font-weight: bold;
    padding: 0.2em;/*文字周りの余白*/
    margin: 10px auto;
    text-align:center;
    width:250px !important;        /* ←これ追加 */
  display:inline-block !important;
    line-height: 1.3;/*行高*/
    background: url("https://www.delight-base.jp/img/bag/homa_kiji.jpg") center / cover no-repeat; /* ←ここ変更 */
    border-radius: 25px 25px 25px 25px;/*左側の角を丸く*/
  }
  
 .bag03 {
    color: #e9e9e9;/*文字色*/
    font-size: 13pt;
    font-weight: bold;
    width: 300px;
    padding: 0.2em;/*文字周りの余白*/
    margin: 10px auto;
    display: block;/*おまじない*/
    line-height: 1.3;/*行高*/
    background: #313131;/*背景色*/
    border-radius: 25px 25px 25px 25px;/*左側の角を丸く*/
  }

 .bag04 {
    color: #ffffff !important;/*文字色*/
    font-size: 13pt;
    font-weight: bold;
    ext-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;

    margin: 10px auto;
    text-align:center;
    width:250px !important;        /* ←これ追加 */
  display:inline-block !important;
    line-height: 1.3;/*行高*/
    background: url("https://www.delight-base.jp/img/bag/hitoe_kiji.jpg") center / cover no-repeat; /* ←ここ変更 */
    border-radius: 25px 25px 25px 25px;/*左側の角を丸く*/
  }
  
   .bag05 {
    color: #000000 !important;/*文字色*/
    font-size: 13pt;
    font-weight: bold;

    padding: 0.2em;/*文字周りの余白*/
    margin: 10px auto;
    text-align:center;
    width:250px !important;        /* ←これ追加 */
  display:inline-block !important;
    line-height: 1.3;/*行高*/
    background: url("https://www.delight-base.jp/img/bag/hanpu_kiji.jpg") center / cover no-repeat; /* ←ここ変更 */
    border-radius: 25px 25px 25px 25px;/*左側の角を丸く*/
  }
  
   .bag06 {
    color: #e2041b;/*文字色*/
    font-size: 15pt;
    font-weight: bold;
    width: 300px;
    padding: 0.5em;/*文字周りの余白*/
    margin: 10px auto;
    display: block;/*おまじない*/
    line-height: 1.3;/*行高*/
    background: #FFFFFF;/*背景色*/
    border-radius: 25px 25px 25px 25px;/*左側の角を丸く*/
    border:2px solid #e2041b;   /* ← 枠追加 */
    border-top:2px solid #e2041b;  /* 上線を指定 */
    box-shadow:none;
  }
  
   h2.bag06 {
   border:none !important;
   box-shadow:none !important;
    color: #e2041b;/*文字色*/
    font-size: 15pt;
    font-weight: bold;
    width: 300px;
    padding: 0.2em;/*文字周りの余白*/
    margin: 10px auto;
    line-height:1.1 !important; 
    display: block;/*おまじない*/
    line-height: 1.3;/*行高*/
    background: #FFFFFF;/*背景色*/
    outline:2px solid #e2041b;   /* ← 枠 */
    border-radius: 25px 25px 25px 25px;/*左側の角を丸く*/
    
  }

  h4 {
    font-size: 10pt;
    color: #FFFFFF;/*文字色*/
    padding: 12px;/*文字周りの余白*/
    margin: 0px;
    display: block;/*おまじない*/
    line-height: 1.3;/*行高*/
    width: auto;
    background: #E60033;/*背景色*/
    vertical-align: middle;
  }

  .s01 p{
    margin: 5px;
    font-size: 10pt;
    }

/* =========================
スマホ
========================= */

@media screen and (max-width:767px){

h3{
  font-size:11pt;
  width:100% !important;
  padding:10px 12px;  /* ←小さく */
  margin:0 0 10px;
  box-sizing:border-box;
}

}

    .s02 p{
      margin: 5px;
      font-size: 10pt;
      }

    .s03 p{
      margin: 5px;
      font-size: 10pt;
      line-height: 1.5em
      }
    .s04 p{
     margin: 5px;
     font-size: 10pt;
     line-height: 1.5em
        }

    h5 {
      font-size: 12pt;
      display: block;/*おまじない*/
      }
      
      .towellink2 a {
        color:white;
        text-decoration: underline;
        font-size: 12pt;
      }
      
      @media screen and (max-width: 768px){

.product-grid{
  gap:20px 10px;
}


.image img{
  max-width:100%;
}

}
@media screen and (max-width:768px){

.left02{
  width:100%;
}

}


@media screen and (max-width:768px){

.bxborder{
  width:96%;
  max-width:none;
  margin:20px auto;
}

}

/* スマホ */
@media screen and (max-width:768px){

.s02 h2{
  font-size:16pt;
  margin:20px 0 10px;
}

.custom-h2{
  font-size:20pt !important;
  font-weight:bold;
}

}



@media screen and (max-width: 767px) {

.kan01{
  font-size:13pt;
  width:100%;
  margin:10px 0;
}

}

@media screen and (max-width: 767px){

/* 親の幅を解放 */
.left02,
.bxborder,
section{
  width:100% !important;
  max-width:none !important;
  padding-left:10px;
  padding-right:10px;
  box-sizing:border-box;
}
}


@media screen and (max-width: 767px){

/* すべての制限を解除 */
section,
div,
ul,
li{
  max-width:none !important;
}
}