@charset "UTF-8";

body.temporarily.kyushu {
  overflow-x: hidden;
  background-color: #fffeea;
  background-image: url(/products/special/x-blend/images/kyushu/bg.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top center;
}

@media (min-width: 769px) {
  body.temporarily.kyushu {
    background-image: url(/products/special/x-blend/images/kyushu/bg.png);
  }
}

/* feature 背景：SP は #feature 直接（絵柄位置を維持）/ PC は .kyushuRecipeBanner */

@media (min-width: 769px) {
  #mainContents #feature::after {
      pointer-events: none;
  }
}

/* feature：769px基準で位置・サイズを可変（769px時がデザイン通り） */
@media (min-width: 769px) {
  .temporarily.kyushu #mainContents #feature {
    background: transparent !important;
    padding-top: 3.5vw;
    padding-bottom: 110px;
    margin-top: 0;
    z-index: 2;
  }

  body.temporarily.kyushu #mainContents #feature .sectionTtl {
    margin-bottom: calc(
  (100vw - 769px) * 0.1028
);
    font-size: 70px;
  }

  body.temporarily.kyushu #mainContents #feature .sectionTtl span::before,
  body.temporarily.kyushu #mainContents #feature .sectionTtl span::after {
    width: 140px;
    height: 41px;
    margin-right: -8px;
    margin-left: 0px;
  }

  body.temporarily.kyushu #mainContents #feature .copy {
    margin-bottom: calc(70 / 769 * 100vw);
    margin-left: 70px;
    font-size: clamp(40px, calc(40px + 40 * ((100vw - 769px) / (1450 - 769))), 80px);
  }

  body.temporarily.kyushu #mainContents #feature .copy span:nth-child(2) {
    margin-left: 0;
    margin-right: 0;
    font-size: clamp(65px, calc(5.14vw + 25.5px), 100px);
  }

  body.temporarily.kyushu #mainContents #feature .text {
    margin-bottom: 17px;
    font-size: 26px;
    line-height: 1.;
  }

  body.temporarily.kyushu #mainContents #feature .text .font-l {
    font-size: 36px;
    font-weight: 900 !important;
  }

  body.temporarily.kyushu #mainContents #feature .text em {
    font-size: 40px;
  }

  body.temporarily.kyushu #mainContents #feature .text em.fontEnglish {
    font-size: 50px;
  }

  body.temporarily.kyushu #mainContents #feature .text em span {
    font-size: calc(20 / 769 * 100vw);
  }

  body.temporarily.kyushu #mainContents #feature .txt-attention {
    font-size: 14px;
    max-width: 658px;
    margin: 0 auto;
  }

  .kyushu.temporarily #mainContents #feature .txt_recipeBox {
    position: relative;
    margin-top: 260px;
  }

  .kyushu.temporarily #mainContents #feature .img-box {
    max-width: 700px;
  }

  .kyushu.temporarily #mainContents #feature .recipeBtn {
    width: 319px;
  }

  .kyushu.temporarily #mainContents #feature .ttl_imgBox {
    max-width: 1081px;
  }
}

.kyushu.temporarily #mainContents #feature .copy span {
  font-size: clamp(40px, calc(40px + 40 * ((100vw - 769px) / (1450 - 769))), 80px);
  line-height: 1.125;
  letter-spacing: -0.05em;
}

.kyushu.temporarily #mainContents #feature .copy .sub {
  font-size: clamp(40px, calc(40px + 30 * ((100vw - 769px) / (1450 - 769))), 70px);
}

@media screen and (max-width: 768px) {
  .kyushu.temporarily #mainContents #feature .copy .sub {
    font-size: clamp(28px, calc(28px + 7 * ((100vw - 375px) / (768 - 375))), 35px);
  }
}

@media screen and (max-width: 768px) {
  .kyushu.temporarily #mainContents #feature .copy span {
    font-size: clamp(26px, calc(26px + 7 * ((100vw - 375px) / (768 - 375))), 33px);
  }
}

.kyushu.temporarily #mainContents #feature .txt-attention {
  display: flex;
  justify-content: center;
  text-align: left;
  font-size: 14px;
}

/* txt_recipeBox .text / .txt-attention：文字の輪郭に沿ったぼかし（#fffeea） */
.kyushu.temporarily #mainContents #feature .txt_recipeBox .text,
.kyushu.temporarily #mainContents #feature .txt_recipeBox .txt-attention {
  position: relative;
  z-index: 1;
  --text-glow: 0 0 6px #fffeea, 0 0 12px #fffeea, 0 0 20px #fffeea,
    0 0 28px rgba(255, 254, 234, 0.95);
  text-shadow: var(--text-glow);
  font-weight: 700 !important;
}

.kyushu.temporarily #mainContents #feature .txt_recipeBox .text :where(em, span, sup, .font-l) {
  text-shadow: var(--text-glow);
  background: linear-gradient(transparent 70%, #e8d692 70%);
}

.img-box {
  max-width: 700px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .kyushu.temporarily #mainContents #feature .img-box {
    margin-top: 14px;
  }
}

.kyushu .recipeBtn {
  display: block;
  width: 319px;
  margin: 40px auto 0;
}

.ttl_imgBox {
  width: 100%;
  max-width: 1081px;
  margin: 79px auto 0;
}

@media screen and (max-width: 768px) {
  .kyushu.temporarily #mainContents #feature .ttl_imgBox {
    max-width: 249px;
    margin-top: 58px;
  }
}

.ttl_imgBox_img {
  width: 100%;
  height: auto;
}

.kyushu .hanatotyoutyo,
.kyushu #mainContents #voice .cmGrid_caption {
  font-family: "hanatotyoutyo", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-weight: normal;
}

@media (min-width: 769px) {
  .kyushu.temporarily #mainContents #voice {
    position: relative;
    padding-top: 11.5vw;
    padding-bottom: 5vw;
  }
}

/* CM紹介 grid */
.kyushu #mainContents #voice .contentWrap:has(.cmGrid) {
  position: relative;
  display: block;
  max-width: 1110px;
  margin: 0 auto;
  padding-bottom: 40px;
}

.kyushu #mainContents #voice .cmGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 3vw, 38px) clamp(20px, 2.5vw, 36px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.kyushu #mainContents #voice .cmGrid_item {
  margin: 0;
  min-width: 0;
}

.kyushu #mainContents #voice .cmGrid_movie {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  background-color: #000;
}

.kyushu #mainContents #voice .cmGrid_caption {
  color: #fff;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  max-width: 144px;
  margin: 7px auto 0;
}

/* ===========================================
   背景統一：レシピ〜バナーを1枚の feature_bg で表示（画面幅可変でも繋ぎ目なし）
   「元に戻して」→ ファイル末尾 REVERT コメント参照
   =========================================== */
.kyushu.temporarily .kyushuRecipeBanner {
  position: relative;
  isolation: isolate;
}

/* SP：絵柄位置は #feature のみ（従来どおり center 24.5%） */
@media (max-width: 768px) {
  .kyushu.temporarily .kyushuRecipeBanner {
    background-color: transparent;
    background-image: none;
  }

  .kyushu.temporarily .kyushuRecipeBanner #feature {
    background-color: #fffeea !important;
    background-image: url(/products/special/x-blend/images/kyushu/feature_bg_sp.png) !important;
    background-repeat: no-repeat !important;
    background-size: 100% auto !important;
    background-position: center 24.5% !important;
  }

  /* バナー：#feature 下端質感の延長（上にはみ出さない） */
  .kyushu.temporarily #mainContents #lineup::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    background-color: #fffeea;
    background-image: url(/products/special/x-blend/images/kyushu/feature_bg_sp.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
  }
}

/* PC：レシピ〜バナーを1枚の feature_bg で表示 */
@media (min-width: 769px) {
  .kyushu.temporarily .kyushuRecipeBanner {
    background-color: #fffeea;
    background-image: url(/products/special/x-blend/images/kyushu/feature_bg_pc.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
  }

  .kyushu.temporarily .kyushuRecipeBanner::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 0;
    top: calc(100vw * 2693 / 1450);
    pointer-events: none;
    background-color: #fffeea;
    background-image: url(/products/special/x-blend/images/kyushu/feature_bg_pc.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
  }

  .kyushu.temporarily .kyushuRecipeBanner #feature {
    background: transparent !important;
  }

  .kyushu.temporarily #mainContents #lineup::before {
    display: none;
  }
}

.kyushu.temporarily .kyushuRecipeBanner #feature {
  position: relative;
  z-index: 2;
}

.kyushu.temporarily .kyushuRecipeBanner #lineup {
  position: relative;
  z-index: 1;
  isolation: isolate;
  padding-top: 40px;
  background: transparent !important;
  background-image: none !important;
}

/* style.css の光沢レイヤー打ち消し */
.kyushu.temporarily #mainContents #feature::after {
  display: none;
}

/* CM紹介 背景 */
.kyushu.temporarily #mainContents #voice.cmArea {
  background-color: #1d2975;
  background-image: radial-gradient(#008cd6, #1d2975);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.kyushu #mainContents #voice .cmBg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.kyushu #mainContents #voice .cmBg_img {
  display: block;
  width: 100%;
  height: auto;
}

.kyushu #mainContents #voice .ttl,
.kyushu #mainContents #voice .contentWrap {
  position: relative;
  z-index: 1;
}

/* 旧cmAreaBottom（非表示） */
.kyushu #mainContents .cmAreaBottom {
  display: none !important;
}

/* CM下端ウェーブ：#voice内 */
.kyushu #mainContents #voice .cmAreaWave {
  position: relative;
  z-index: 2;
  width: calc(100% + 48px);
  max-width: 100vw;
  margin-top: calc(-6 / 2900 * 100vw);
  margin-bottom: 0;
  margin-left: -24px;
  margin-right: -24px;
  left: auto;
  transform: none;
  line-height: 0;
  pointer-events: none;
}

.kyushu #mainContents #voice .cmAreaWave img {
  display: block;
  width: 100%;
  height: auto;
}

.kyushu.temporarily #mainContents #voice.cmArea,
.kyushu.temporarily #mainContents #voice {
  position: relative;
  z-index: 2;
}

.kyushu #mainContents #lineup .banner_ttlImg,
.kyushu #mainContents #lineup .banner_img,
.kyushu #mainContents #lineup .sns_wrap {
  position: relative;
  z-index: 3;
}

.kyushu #mainContents #lineup .banner_ttlImg {
  width: 100%;
  max-width: 471px;
  margin: 90px auto 20px;
}

.kyushu #mainContents #lineup .banner_ttlImg img {
  display: block;
  width: 100%;
  height: auto;
}

/* SNSアイコン（#lineup .btn の幅指定を打ち消し） */
.kyushu #mainContents #lineup .sns_wrap .snsList {
  display: flex;
  justify-content: center;
}

.kyushu #mainContents #lineup .sns_wrap .snsList li {
  width: 66px;
  margin-right: 32px;
  flex-shrink: 0;
}

.kyushu #mainContents #lineup .sns_wrap .snsList li:last-child {
  margin-right: 0;
}

.kyushu.temporarily #mainContents #lineup .sns_wrap .snsList li a.btn {
  display: block;
  width: auto;
  margin: 0;
}

.kyushu.temporarily #mainContents #lineup .sns_wrap .snsList li img {
  display: block;
  width: 66px;
  height: auto;
  max-width: none;
}

/* 768〜376px：2列 */
/* 375px〜768px：2列・動画 163.5×117（375基準） */
@media (min-width: 375px) and (max-width: 768px) {
  .kyushu #mainContents #voice .cmGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 4vw, 30px) clamp(16px, 3vw, 24px);
    justify-items: center;
  }

  .kyushu #mainContents #voice .cmGrid_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 163.5px;
  }

  .kyushu #mainContents #voice .cmGrid_movie {
    width: calc(163.5 / 375 * 100vw);
    aspect-ratio: 163.5 / 117;
    height: auto;
  }
}

/* 374px以下：1列 */
@media (max-width: 374px) {
  .kyushu #mainContents #voice .cmGrid {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    max-width: 500px;
    margin: 0 auto;
    justify-items: center;
  }

  .kyushu #mainContents #voice .cmGrid_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 163.5px;
    margin-inline: auto;
  }

  .kyushu #mainContents #voice .cmGrid_movie {
    width: 100%;
    max-width: 163.5px;
    aspect-ratio: 163.5 / 117;
    height: auto;
  }
}

/* 3列＝6件で2行 */
@media (min-width: 960px) {
  .kyushu #mainContents #voice .cmGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 769px) {
  .kyushu #mainContents #voice .cmGrid_caption {
    font-size: 26px;
    margin: 16px auto 0;
    max-width: 268px;
  }

  .kyushu #mainContents #voice.cmArea .ttl {
    margin-bottom: 120px;
  }

  .kyushu.temporarily #mainContents #voice.cmArea {
    z-index: 2;
    margin-top: clamp(
      -250px,
      calc(
        -120px + (-250 - (-120)) * ((100vw - 769px) / (1450 - 769))
      ),
      -120px
    );
    overflow: visible;
    background-color: transparent;
    background-image: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* bg_cm_pc2：上下の波を画像に含むためマスク・下端ウェーブは使わない */
  .kyushu #mainContents #voice .cmBg {
    top: 0;
    bottom: 0;
    z-index: -1;
    height: auto;
    min-height: 100%;
  }

  .kyushu #mainContents #voice .cmBg_img {
    width: 100%;
    height: 110%;
  }

  .kyushu #mainContents #voice .cmAreaWave {
    display: none;
  }

  /* CMグリッド右端装飾（868×1279）— 画面右端まで */
  /* .kyushu.temporarily #mainContents #voice.cmArea::after {
    content: "";
    position: absolute;
    right: calc(50% - 50vw);
    bottom: 0;
    width: calc(400px + max(0px, (100vw - 100%) / 2));
    height: clamp(600px, calc(1279 / 1920 * 100vw), 1279px);
    background-image: url(/products/special/x-blend/images/kyushu/bg_cmGrid_pc.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 100% auto;
    pointer-events: none;
    z-index: -1;
  } */

  .kyushu.temporarily #mainContents #lineup {
    padding-top: 40px;
    margin-top: 0;
    padding-top: 0;
  }

  .kyushu #mainContents #lineup .banner_ttlImg {
    margin-top: 0;
    margin-bottom: 20px;
  }

  .kyushu #mainContents #lineup .banner_img {
    max-width: 1110px;
  }

  .kyushu #mainContents #lineup .sns_wrap .snsList li {
    width: 68px;
    margin-right: 40px;
  }

  .kyushu #mainContents #lineup .sns_wrap .snsList li:nth-child(2) {
    margin-right: 0;
  }

  .kyushu.temporarily #mainContents #lineup .sns_wrap .snsList li a.btn {
    width: auto;
  }

  .kyushu.temporarily #mainContents #lineup .sns_wrap .snsList li img {
    width: 76px;
  }
}
.kyushu.temporarily #mainContents #feature .copy span:nth-child(2) {
  margin-right: 0;
}

@media screen and (max-width: 768px) {
  .kyushu.temporarily #mainContents #feature .copy span:nth-child(2) {
    margin-left: 10px;
    margin-right: 10px;
  }
}

@media screen and (max-width: 375px) {
  .kyushu.temporarily #mainContents #feature .copy {
    font-size: clamp(24px, 1.818vw + 18.182px, 28px);
  }
}

.kyushu.temporarily #mainContents #feature .txt_recipeBox {
  /* margin-top: clamp(0px, calc((768px - 100vw) * 0.389), 153px); */
  margin: clamp(93px, 22.53vw - 56.69px, 265px) auto 0;
  padding: 0 20px;
}

@media screen and (max-width: 768px) {
  .kyushu.temporarily #mainContents #feature .txt_recipeBox {
    margin-top: clamp(123px, calc(123px + 102 * ((100vw - 375px) / (768 - 375))), 225px);
  }
}

@media screen and (max-width: 768px) {
  .kyushu.temporarily #mainContents #feature .txt_recipeBox .text {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.9;
  }
}

.kyushu.temporarily #mainContents #feature .txt-attention {
  font-size: 9px;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .kyushu .recipeBtn {
    max-width: 245px;
    margin: 20px auto 0;
  }
}

.kyushu.temporarily #mainContents #feature::before {
  display: none;
}

@media screen and (max-width: 768px) {
  .kyushu.temporarily #mainContents #voice.cmArea,
  .kyushu.temporarily #mainContents #voice {
    margin-top: 11vw;
    padding: 70px 24px 0;
    padding-bottom: 50px;
    overflow: visible;
    background-color: transparent;
    background-image: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* bg_cm_sp2：上下の波を画像に含むためマスク・下端ウェーブは使わない */
  .kyushu #mainContents #voice .cmBg {
    top: 0;
    bottom: 0;
    z-index: -1;
    height: auto;
    min-height: 100%;
  }

  .kyushu #mainContents #voice .cmBg_img {
    width: 100%;
    height: auto;
  }

  .kyushu #mainContents #voice .cmAreaWave {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .kyushu.temporarily #mainContents #lineup {
    padding-top: 40px;
    margin-top: 0;
  }

  .kyushu #mainContents #lineup .banner_ttlImg {
    margin-top: 0;
    margin-bottom: 16px;
  }
}

@media screen and (max-width: 768px) {
  .kyushu #mainContents .sns_wrap {
    padding-top: 7px;
    padding-bottom: 38px;
  }
}

.mainContents .sns_wrap {
  padding: 0;
}

@media screen and (max-width: 768px) {
  body.temporarily.kyushu #mainContents #feature .text {
    font-size: 31px;
  }
}

@media screen and (max-width: 768px) {
  body.temporarily.kyushu #mainContents #feature .text .font-l {
    font-size: 20px;
    font-weight: 900;
  }
}

@media screen and (max-width: 768px) {
  body.temporarily.kyushu #mainContents #feature .text em {
    font-size: 26px;
  }
}

@media screen and (max-width: 768px) {
  body.temporarily.kyushu #mainContents #feature .text em.fontEnglish {
    font-size: 30px;
  }
}

.kyushu.temporarily #mainContents #feature .sectionTtl span::after {
  background-image: url(/products/special/x-blend/images/kyushu/feature_ttl_img_sp.png);
}

.kyushu.temporarily #mainContents #feature .sectionTtl span::before {
  background-image: url(/products/special/x-blend/images/kyushu/feature_ttl_img_sp.png);
} 

.kyushu.temporarily #mainContents #feature .txt_recipeBox::before {
  content: "";
  max-width: 1038px;
  aspect-ratio: 1 / 1;
  width: 100%;
  background-image: url(/products/special/x-blend/images/kyushu/img_map.png);
  background-size: cover;
  background-position: top center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

@media screen and (min-width: 769px) {
  .kyushu.temporarily #mainContents #feature .txt_recipeBox::before {
    top: -5vw;
  }
}


@media screen and (max-width: 768px) {
  .kyushu.temporarily #mainContents #feature .txt_recipeBox::before {
    width: 135%;
  }
}

@media screen and (max-width: 768px) {
  .kyushu.temporarily #mainContents #feature {
    padding-top: 23px;
    padding-bottom: 50px;
  }
}

@media (min-width: 769px) {
  .kyushu.temporarily #mainContents #feature .copy span .small {
      font-size: clamp(35px, calc(35px + 25 * ((100vw - 769px) / (1450 - 769))), 60px);
  }
}

@media (max-width: 768px) {
  .kyushu.temporarily #mainContents #feature .copy span .small {
      font-size: 22px;
  }
}

@media screen and (max-width: 768px) {
  .kyushu #mainContents #voice .ttl {
    margin-bottom: 25px;
  }
}

@media screen and (max-width: 768px) {
  .kyushu #mainContents #lineup .banner_ttlImg {
    max-width: 275px;
  }
}

/* @media screen and (max-width: 768px) {
  .kyushu.temporarily #mainContents #voice.cmArea::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 236px;
    height: clamp(600px, calc(1279 / 1920 * 100vw), 1279px);
    background-image: url(/products/special/x-blend/images/kyushu/bg_cmGrid_pc.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 100% auto;
    pointer-events: none;
    z-index: -1;
  }
} */

/* 縦方向のはみ出しは許容し、横スクロールだけ抑止 */
.kyushu.temporarily #mainContents {
  overflow-x: hidden;
  overflow-y: visible;
}

/* パンくず */
.temporarily.kyushu .mainContents .mainContentsIn:last-child {
  max-width: none;
  width: 100%;
  margin-bottom: 0;
  padding: 0 24px;
  background-color: #fff;
  box-sizing: border-box;
}

.temporarily.kyushu .mainContents .mainContentsIn:last-child .breadcrumbs {
  max-width: 1112px;
  margin: 0 auto !important;
}

.temporarily.kyushu .socialArea {
  margin-top: 0;
}

.temporarily.kyushu #mainContents #feature .text em::before {
  background: none;
}

.kyushu.temporarily #mainContents #feature .txt_recipeBox .text sup {
  color: #1d2975;
  background: none !important;
}

.kyushu.temporarily #mainContents #feature .txt_recipeBox .txt_recipeBox_img {
  display: block;
  max-width: 680px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .kyushu.temporarily #mainContents #feature .txt_recipeBox .txt_recipeBox_img {
    max-width: 354.5px;
  }
}

/* ===========================================
   REVERT（「元に戻して」＝ lineup_bg タイル方式に復帰）
   - index.html の .kyushuRecipeBanner ラッパーを削除
   - 背景統一ブロック（.kyushuRecipeBanner / ::after）を削除
   - #feature に feature_bg を直接指定
   - #lineup::before を lineup_bg.jpg タイルに復元（padding-top: 185px 等）
   =========================================== */