/* ============================================
   のし説明セクション用CSS
   対象HTML: .fp_wrapping 内ののし関連部分
   ============================================ */

/* PC/SP 表示切り替え */
[data-browse-mode=S] .isPC {
  display: none;
}

[data-browse-mode=P] .isSP {
  display: none;
}

/* リード文 */
.fp_txt {
  font-size: 20px;
  line-height: 1.9;
  text-align: center;
}
[data-browse-mode=S] .fp_txt {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.fp_txt + .fp_txt {
  margin-top: 1em;
}

/* セクション全体 */
.fp_wrapping {
  background-color: #FBFAF4;
}
[data-browse-mode=P] .fp_wrapping .fp_inner {
  padding: 80px 100px;
}
[data-browse-mode=S] .fp_wrapping .fp_inner {
  padding-bottom: 80px;
}

/* ヘッダー（タイトル＋リード文エリア） */
[data-browse-mode=P] .fp_wrapping_head {
  background: url(/img/usr/freepage/hojin/wrapping-img.png) 93% 50% no-repeat, url(/img/usr/freepage/hojin/wrapping-bg.png) 50% 50% no-repeat;
  background-size: 661px, cover;
  padding: 50px 100px 70px;
}
[data-browse-mode=S] .fp_wrapping_head {
  background: url(/img/usr/freepage/hojin/wrapping-img_sp.png) 50% 96% no-repeat, url(/img/usr/freepage/hojin/wrapping-bg_sp.png) 0% 100% no-repeat;
  background-size: 344px, cover;
  padding: 56px 40px 360px;
  margin-bottom: 66px;
}

.fp_wrapping_head h2 {
  padding-left: 0;
  margin: 0 0 48px;
  font-weight: bold;
  letter-spacing: 0.04em;
  font-size: 35px;
  text-align: left;
}
[data-browse-mode=S] .fp_wrapping_head h2 {
  font-size: 26px;
  margin-bottom: 34px;
  text-align: center;
}

.fp_wrapping_head h2:before {
  display: none;
}
.fp_wrapping_head h2 span {
  display: block;
  padding-left: 10px;
  padding-right: 3px;
  padding-bottom: 16px;
  margin: 0 0 18px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background: url(/img/usr/freepage/hojin/underline.png) 0 100% repeat-x;
  background-size: 12px;
}
.fp_wrapping_head h2 span:last-child {
  margin-bottom: 0;
}
[data-browse-mode=S] .fp_wrapping_head h2 span {
  margin-inline: auto;
  background-size: 10px;
}

.fp_wrapping_head .fp_txt {
  text-align: left;
  margin-left: 10px;
  margin-bottom: 60px;
  line-height: 1.9;
  font-size: 22px;
}
[data-browse-mode=S] .fp_wrapping_head .fp_txt {
  text-align: center;
  font-size: 16px;
  margin-left: 0;
  margin-bottom: 15px;
}

.fp_wrapping_head small {
  display: block;
  margin-left: 10px;
  line-height: 2;
  font-size: 14px;
}
[data-browse-mode=S] .fp_wrapping_head small {
  text-align: center;
  font-size: 10px;
}

/* 内側パディング */
.fp_inner {
  padding: 0 100px;
}
[data-browse-mode=S] .fp_inner {
  padding: 0 25px;
}

/* dt/dd ブロック（のしセクション） */
.fp_wrapping_dl {
  margin-bottom: 40px;
}
[data-browse-mode=S] .fp_wrapping_dl {
  margin: 40px 0 0;
}

.fp_wrapping_dl dt {
  position: relative;
  padding-left: 70px;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 50px;
}
[data-browse-mode=S] .fp_wrapping_dl dt {
  padding-left: 50px;
  margin-bottom: 30px;
  font-size: 16px;
}
[data-browse-mode=S] .fp_wrapping_dl dt:has(small) {
  margin-bottom: 6px;
}
[data-browse-mode=S] .fp_wrapping_dl dt:has(small) small {
  display: none;
}

.fp_wrapping_dl dt:before {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  content: "";
  display: block;
  width: 45px;
  height: 26px;
  background: url(/img/usr/freepage/hojin/ttl-square.png) 50% 50% no-repeat;
  background-size: contain;
  left: 0;
}
[data-browse-mode=S] .fp_wrapping_dl dt:before {
  width: 31px;
  height: 18px;
}

[data-browse-mode=S] .fp_wrapping_dl dt small {
  display: block;
}
[data-browse-mode=S] .fp_wrapping_dl dd > small {
  display: block;
  margin-bottom: 30px;
  font-size: 12px;
}

/* dd をblock明示でflex子要素が正しく動くよう */
.fp_wrapping_dl dd {
  display: block;
  width: 100%;
}

/* 手提げ袋2種 横並びレイアウト */
.fp_wrapping_items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

/* PC: figure幅指定 */
.fp_wrapping_items figure {
  text-align: right;
  height: 100%;
}
.fp_wrapping_items figure img {
  margin-right: 0;
}
[data-browse-mode=P] .fp_wrapping_items figure.is-item1 {
  width: 28%;
}
[data-browse-mode=P] .fp_wrapping_items figure.is-item2 {
  width: 63%;
}

/* PC: 画像余白 */
[data-browse-mode=P] .fp_wrapping_items figure.is-item1 img {
  margin-top: 50px;
  width: 141px;
  max-width: none;
}
[data-browse-mode=P] .fp_wrapping_items figure.is-item2 img {
  margin-top: 0;
  width: 467px;
  max-width: none;
}

/* SP: figureは均等幅で横並び維持 */
[data-browse-mode=S] .fp_wrapping_items figure.is-item1 {
  width: 35%;
}
[data-browse-mode=S] .fp_wrapping_items figure.is-item2 {
  width: 60%;
}
[data-browse-mode=S] .fp_wrapping_items figure.is-item1 img {
  position: relative;
  margin-top: 20px;
  left: -30px;
  width: 78% !important;
  max-width: 78% !important;
  height: auto !important;
}
[data-browse-mode=S] .fp_wrapping_items figure.is-item2 img {
  margin-top: 0;
  margin-left: -8px;
  width: 108% !important;
  max-width: 108% !important;
  height: auto !important;
}

.fp_wrapping_items figcaption {
  text-align: left;
  font-size: 20px;
}
[data-browse-mode=S] .fp_wrapping_items figcaption {
  font-size: 13px;
}

/* のし3種 横並びレイアウト */
.fp_wrapping_items3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  text-align: center;
  gap: 50px;
}
[data-browse-mode=S] .fp_wrapping_items3 {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 40px;
}

.fp_wrapping_items3 figure {
  width: 300px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
[data-browse-mode=S] .fp_wrapping_items3 figure {
  width: auto;
}
.fp_wrapping_items3 figure img {
  width: 240px;
}
.fp_wrapping_items3 p {
  margin-top: 15px;
  text-align: left;
  font-size: 14px;
  letter-spacing: 0.07em;
}
[data-browse-mode=S] .fp_wrapping_items3 p {
  margin-top: 12px;
  font-size: 13px;
}

/* 各のし種別タイトル（紅白蝶結び など） */
.fp_wrapping_item-ttl {
  margin-top: 18px;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 0.1em;
}
[data-browse-mode=S] .fp_wrapping_item-ttl {
  font-size: 14px;
}

/* ※注意書き（水引の色指定…） */
.fp_wrapping_note {
  font-size: 12px;
  margin-top: 40px;
  line-height: 1.8;
}
[data-browse-mode=S] .fp_wrapping_note {
  margin-top: 20px;
  font-size: 10px;
}
.fp_wrapping_note p {
  padding-left: 1em;
  text-indent: -1em;
}

/* 最下部のお知らせテキスト */
.fp_wrapping_notes {
  background-color: #fff;
  border-radius: 15px;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.07em;
  margin-top: 50px;
  padding: 30px 24px;
}
[data-browse-mode=S] .fp_wrapping_notes {
  margin-top: 40px;
  margin-bottom: 30px;
  font-size: 13px;
}