@charset "utf-8";

/* PC：SP用ナビは非表示 */
.contents-area .gift-guide{
  display: none;
}

/* 見出しアイコン */
.contents-area .gift-guide2 .guide-icon::before{
  background: url(https://kurabokko.net/pic-labo/check_midashiMark1.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 40px;
  height: 40px;
}

/* 既存h2 */
.contents-area h2{
  margin: 0;
  padding: 0;
  font-size: 125%;
  font-weight: bold;
  color: #333;
  border-style: none;
}
.contents-area h2::before{
  display: inline-block;
  margin-right: 5px;
  content: '';
  background: url(https://kurabokko.net/pic-labo/check_midashiMark-smile70.png);
  vertical-align: middle;
  position: relative;
  top: -4px;
  background-repeat: no-repeat;
  background-size: contain;
  width: 35px;
  height: 35px;
}

/* h3 */
.contents-area .Contents h3{
  margin: 20px 0 15px !important;
  letter-spacing: 0.1em;
  font-weight: 700;
  background: none !important;
  border-bottom: 1px solid #CCCCCC;
  padding-left: 0 !important;
}
.contents-area .Contents h3::before{
  background-color: #f8c385;
  border-radius: 4px;
  content: "";
  display: inline-block;
  height: 28px;
  margin-right: 8px;
  vertical-align: middle;
  width: 8px;
  margin-top: -7px;
}

.contents-area .wrapping-info{
  font-size: 112.5%;
  margin: 20px 0 0;
  text-align: center;
}

/* =========================
  PC：gift-guide2 ナビ（flex）
========================= */
.contents-area .gift-guide2 .gift-navi1{
  margin: 15px auto 0;
  max-width: 840px;   /* 元の width:840px を維持しつつ可変に */
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 3つを中央寄せ */
  gap: 40px;              /* 元の margin:0 40px 相当 */
  padding: 0;
  list-style: none;
}

.contents-area .gift-guide2 .gift-navi1 li{
  width: 200px;     /* 元の width:200px を維持 */
  margin: 0;        /* float時の余白はgapへ */
  float: none;      /* 念のため殺す */
  display: block;
}


.contents-area .gift-guide2 .gift-navi1 li a{
  display: block;
  padding: 8px 0;
  font-size: 100%;
  text-decoration: none;
  color: #555;
  font-weight: bold;
  text-align: center;
}

.contents-area .gift-guide2 .gift-navi1 li img{
  display: block;
  margin: 0 auto 10px;
}

/* 画像エリア */
.journal-cont .imgArea-kiji-main{
  margin: 0;
  text-align: center;
  width: 100%;
}
.contents-area .imgArea-kiji-sub1{
  width: 100%;
  margin-top: 20px;
  margin-right: 0;
  margin-bottom: 40px;
}
.contents-area .imgArea-kiji-main img{
  margin-right: auto;
  margin-left: auto;
  display: block;
}

.journal-cont #muryou_wrapping .Contents .caution .text .list{
  line-height: normal;
}

/* =========================
  768px以下（SP）
  gift-guide を表示して flex化
========================= */
@media screen and (max-width: 768px){

  /* SP：PCナビを隠してSPナビ表示 */
  .contents-area .gift-guide{
    display: block;
  }
  .contents-area .gift-guide2{
    display: none;
  }

  /* SPナビ（flexで2列） */
  .contents-area .gift-guide ul{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 2%;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .contents-area .gift-guide ul li{
    width: 49%;
    margin: 0;      /* 旧 margin 1% はgapへ */
    float: none;    /* float殺す */
    display: block;
  }

  .contents-area .gift-guide br{
    display: none;
  }

  .contents-area .gift-guide ul li a{
    display: block;
    padding: 7px 0 8px;
    border: 1px solid #CCC;
    text-decoration: none !important;
    text-align: center;
  }

  .contents-area .gift-guide ul li img{
    display: block;
    margin: 0 auto 1px;
  }

  .contents-area .gift-guide ul li a span{
    font-size: 15px;
    color: #111;
    text-decoration: none;
    display: block;
  }

  /* メイン画像はSPで100% */
  .contents-area .imgArea-kiji-main img{
    width: 100%;
    height: auto;
  }
}