@charset "UTF-8";

#kv {
  background: #fff url(../img/kv.jpg) top center no-repeat;
  background-size: cover;
}

#valentine_cpn section {
  overflow-x: hidden;
}

#valentine_cpn #wrapper.page .head.type01.reverse {
  flex-direction: row-reverse;
}

#valentine_cpn #wrapper.page .item_box.type02 .inner.small-img img {
  width: 70%;
}

#valentine_cpn #wrapper.page .item_box.type01 .sub-img img {
  width: 50%;
}

#valentine_cpn #wrapper.page .item_box .detail .unit {
  line-height: 1.8;
}

#valentine_cpn #wrapper.page .item_box .detail .detail_name strong {
  line-height: 1.5;
}

#valentine_cpn #wrapper.page .item_box .detail .detail_name strong span {
  white-space: nowrap;
}

#valentine_cpn #wrapper .section .row .col.horizontal .col-title {
  text-align: center;
}

#valentine_cpn #wrapper .section .row.type01 .col .col-text .small {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.8em;
  white-space: nowrap;
}

#valentine_cpn #wrapper .section .row .col.horizontal {
  display: block;
}

#valentine_cpn #wrapper .section .row.type01 .col {
  padding-left: 0;
}

#valentine_cpn #wrapper.page .item_box picture {
  width: auto;
}

#valentine_cpn #wrapper.page .lead p .color02 {
  color: #915f10;
}

#valentine_cpn #wrapper .lead .caution {
  padding: 20px;
  border: 0.5px solid #000;
  margin: 64px auto 0;
  width: min(calc((1150 / 1440) * 100vw), 1150px);
}

#valentine_cpn #wrapper .lead p.caution-title {
  font-size: 16px;
  color: #ff0000;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: 24px;
}

#valentine_cpn #wrapper .lead p.caution-text {
  font-size: 14px;
  line-height: 1.8;
  color: #000;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: left;
  margin: 0;
}

#valentine_cpn #wrapper.page .lead * {
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3",
    "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica,
    Arial, sans-serif;
  font-weight: 500;
}

#valentine_cpn #wrapper.page .lead h1 span {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",
    "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

#valentine_cpn #wrapper.page .lead p {
  font-weight: 500;
}

#valentine_cpn #wrapper.page .head * {
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3",
    "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica,
    Arial, sans-serif;
}

#valentine_cpn #wrapper.page .head .head_txt p {
  font-weight: 500;
}

#valentine_cpn #wrapper.page .head.type01 .head_txt .new {
  padding: 6px 10px;
  background-color: #ff2d96;
  border-radius: 20px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 32px;
  display: inline-block;
}

#valentine_cpn #wrapper.page .head .new {
  padding: 6px 10px;
  background-color: #ff2d96;
  border-radius: 20px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 32px;
  display: inline-block;
}
#valentine_cpn #wrapper.page .item_box.new-pc {
  position: relative;
  padding-top: 64px;
}
#valentine_cpn #wrapper.page .item_box.new-pc::before {
  content: "new";
  padding: 6px 10px;
  background-color: #ff2d96;
  border-radius: 20px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 14px;
  display: inline-block;
  position: absolute;
  z-index: 1;
  top: 0;
  left: clamp(20px, 10.4vw, 150px);
}
#valentine_cpn #wrapper.page .item_box.online-pc::after {
  content: "オンラインショップ限定";
  padding: 6px 10px;
  background-color: #a80c2e;
  border-radius: 20px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 14px;
  display: inline-block;
  position: absolute;
  z-index: 1;
  top: 0;
  left: clamp(100px, 15.3vw, 221px);
}

/* NEWとオンラインショップ限定の両方が表示される場合の調整 */
#valentine_cpn #wrapper.page .item_box.new-pc.online-pc::after {
  left: clamp(90px, 19vw, 240px);
}

#valentine_cpn #wrapper.page .head.type02 .head_ttl h2 {
  font-weight: 500;
}

#valentine_cpn #wrapper.page .head.type02 .head_ttl h2 span.en_ttl img {
  object-fit: contain;
  object-position: left center;
  height: 21px;
  padding-left: 5px;
}

.shiori-small {
  width: min(calc(464 / 1440) * 100vw, 464px);
  margin-inline: auto;
  margin-top: 64px;
}

#valentine_cpn #wrapper .section .row {
  display: flex !important;
}

#valentine_cpn #wrapper .section .row.alphabet.brown {
  justify-content: start;
  margin-top: 32px;
}

#valentine_cpn #wrapper .section .row.alphabet .col .col-title {
  color: #915f10;
  padding-left: 28px;
}

#valentine_cpn #wrapper .section .row.alphabet .col p {
  color: #915f10;
  padding-left: 28px;
}

.cp img {
  max-width: 528px;
  width: 92%;
  margin-bottom: 16px;
}

.pc-w104 img {
  transform: scale(1.04);
  transform-origin: center;
}

.pc-w108 img {
  transform: scale(1.08);
  transform-origin: center;
}

.pc-w109 img {
  transform: scale(1.09);
  transform-origin: center;
}

.pc-w110 img {
  transform: scale(1.1);
  transform-origin: center;
}

.pc-w62 img {
  width: 62%;
}

.pc-w78 img {
  width: 78%;
}
.pc-w83 img {
  width: 83%;
}

#valentine_cpn #wrapper .section .row-pc-4 .col {
  width: auto;
}

#valentine_cpn #wrapper .section .row.alphabet {
  gap: 40px;
}

#valentine_cpn #wrapper .section .row-pc-6 .col {
  width: auto;
}

#valentine_cpn #wrapper.page .item_box .detail dt {
  white-space: nowrap;
}

#valentine_cpn #wrapper .section .row.alphabet .col .col-title::before {
  left: 0;
  content: none !important; 
}
.pc-inline {
  display: inline;
}
.sp-inline {
  display: none;
}


/* 2026年度　追記・更新・変更分 */
/* 今後、valentine_cpn全体で同様の変更があれば、こちらは削除しvalentine_cpnを更新する。現状、brunaしか作業がないため、ここで修正している。 */
/* === 768px以上（PC帯）：左右反転（テキスト左／画像右） === */
  #valentine_cpn #wrapper.page .type04-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "text media";
    max-width: 1300px;
    margin-inline: auto;
    align-items: stretch;
  }
  #valentine_cpn #wrapper.page .type04-wrap .type04     { grid-area: text; }
  #valentine_cpn #wrapper.page .type04-wrap .type04-img { grid-area: media; }
/* 950〜1250px：比率変更（テキスト2：画像1） */
@media (min-width: 768px) and (max-width: 1250px) {
  #valentine_cpn #wrapper.page .type04-wrap {
    grid-template-columns: 3fr 2fr;
  }
}

#valentine_cpn #wrapper.page .type04-wrap .type04 {
display: flex;
flex-direction: column;
padding:
  clamp(50px, calc(50px + (51 * ((100vw - 950px) / 450))), 101px)
  clamp(40px, calc(40px + (10 * ((100vw - 950px) / 450))), 50px)
  clamp(38px, calc(38px + (38 * ((100vw - 950px) / 450))), 76px)
  96px;
align-items: start;
min-width: 0;
}
/* 念のため、テキスト要素に付いている幅制限を解除 */
#valentine_cpn #wrapper.page .type04-wrap .type04 > * {
  max-width: none;/* ch/em 指定が残っていても無効化 */
  width: 100%; /* 見出し・段落を横いっぱいに */
  white-space: normal;/* nowrap が入っていた場合の保険 */
}
#valentine_cpn #wrapper.page .type04-wrap .type04 p{
margin-top: 37px;
}
#valentine_cpn #wrapper.page .type04-wrap .type04-img {
position: relative;
overflow: hidden;
min-width: 0;
}
#valentine_cpn #wrapper.page .type04-wrap .type04-img picture {
  display: block;
  height: 100%;
}
#valentine_cpn #wrapper.page .type04-wrap .type04-img picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ミッフィーフェイスポーチ（ネイビー）とミッフィーフェイスポーチ（キャンディブルー）のPC画像サイズ調整 */
@media screen and (min-width: 769px) {
  /* template_pc.cssの.item_img:nth-child(2) imgルールを無効化 */
  #valentine_cpn #wrapper.page .item_box.type03 .item_img:nth-child(2) picture.pc-w109--bruna img {
    width: auto !important;
  }
  
  /* 正しいサイズを適用 */
  #valentine_cpn #wrapper.page .item_box.type03 .item_img picture.pc-w109--bruna {
    width: min(50.7142857143vw, 710px) !important;
  }
}


#valentine_cpn #wrapper.page article section .detail a.btn_onlineshop--bruna{
  border-radius: 0;
}
#valentine_cpn #wrapper.page .item_box .detail .detail_name strong{
  font-size: clamp(1.563rem, 1.183rem + 0.791vw, 1.875rem);
}
#valentine_cpn #wrapper.page .head.type02 .head_ttl h2 .head_ttl--bruna-span{
letter-spacing: -0.15em;
font-weight: 500;
line-height: 1;
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 35px;
margin-top: 0;
margin-left: 0px;
}

#valentine_cpn #wrapper.page .bruna h2 span{
font-size: 36px;
}