@charset "UTF-8";
.brandmessage-cont-main {
    width: 100%;
    margin-top: 0;
    max-width: 750px;
    font-family: 'Noto Sans JP', sans-serif !important;
    background-color: #fff;
    color: #000 !important;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.brandmessage-cont-main * {
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 16px;
    line-height: 2;
}

.brandmessage-cont-main img { width: 100%; height: auto;}

a, a:hover, a:visited { color: #bbc565; font-size: 1.13rem !important;}

/* キャンペーン予告バナー */
.brandmessage-patch {
    position: fixed;
    width: 30%;
    bottom: 14%;
    right: 0;
    z-index: 20;
}

.brandmessage-patch img { animation: gentleFloat 4s ease-in-out infinite; }
  
@keyframes gentleFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* title */
.brandmessage-title { margin: 0 20px 0; padding-top: 40px;}
/*
.brandmessage-title img { width: 50%; }
*/
.title-story img { width: 100%; }
.title-tasty img { width: 70%; }
.title-campaign img { width: 65%; }
.title-other img { width: 75%; }
.title-links { padding-top: 20px;}
.title-links img { width: 35%;}
.title-premium img { width: 73%;}

.brandmessage-s-title { margin: 40px 20px 0; text-align: center;}
.title-s-premium img { width: 75%;}

.stitle-story { margin: 20px 0 0; padding: 0 20px; font-size: 1.5rem; font-weight: 700; }

/* text */
.brandmessage-text { margin-bottom: 12px; font-size: 1.2rem; color: #000; position: relative; z-index: 10; font-feature-settings: "palt";}
.brandmessage-text-note { font-size: 0.85rem; }
.brandmessage-text-center { text-align: center; }
.brandmessage-text-block { margin: 0 24px; }
.brandmessage-mb24 { margin-bottom: 24px;}
.brandmessage-mt24 { margin-top: 24px;}
.brandmessage-text-bold { font-weight: 700; }
.brandmessage-text-note-sup { vertical-align: top; }
.brandmessage-text-note_red {font-size: 1rem; color: #e43301;}
.brandmessage-text-cmp { margin-bottom: 12px; font-size: 1.2rem; color: #000; font-feature-settings: "palt"; line-height: 1.8;}
.brandmessage-text-cmp-note { margin-top: -8px; font-size: 1rem; line-height: 1.5; }

.brandmessage-text-premium-note { font-size: 0.70rem; }
.mt-10 { margin-top: -10px;}

.brandmessage-inner { position: relative; padding: 20px 20px 40px; box-sizing: border-box;}

/* メッセージ */
.brandmessage-message {
    position: relative;
    background-image: url(/g6/feature/image/25th_anniversary_thank_bottom.png);
    background-color: #f4e657;
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 40%;
}

.brandmessage-message-img-vege01 { position: absolute; top: 13%; right: 22%; width: 9%; }
.brandmessage-message-img-vege02 { position: absolute; top: 16%; right: 16%; width: 5%; }
.brandmessage-message-img-vege03 { position: absolute; top: 16%; right: 0; width: 18%; }
.brandmessage-message-img-vege04 { position: absolute; top: 30%; right: 14%; width: 9%; }
.brandmessage-message-img-vege05 { position: absolute; top: 35%; right: 5%; width: 5%; }
.brandmessage-message-img-vege06 { position: absolute; top: 40%; right: 2%; width: 10%; }
.brandmessage-message-img-vege07 { position: absolute; top: 47%; right: 9%; width: 8%; }
.brandmessage-message-img-vege08 { position: absolute; top: 51%; right: 11%; width: 10%; }

.brandmessage-message-img-spbox { position: relative; }
.brandmessage-message-spbox-title { position: absolute; width: 60%; top: 0; left: 10%;}
.brandmessage-message-spbox-image { position: absolute; width: 50%; top: 17%; left: 25%;}

.brandmessage-message-spbox-textarea {
    margin-top: -85px;
    padding: 0 12px 40px;
    text-align: center;
}
.brandmessage-message-spbox-text { 
    display: inline-block;
    font-size: 1rem;
    font-feature-settings: "palt";
    background:#fff;
    margin-bottom: 3px;
    padding: 2px 10px;
} 

/* TastyStory */
.brandmessage-tasty { background-color: #cddd67; }

.brandmessage-tasty-text {
    padding: 40px 20px 0;
    font-size: 1.13rem;
    color: #000;
    font-feature-settings: "palt";
}

.brandmessage-tasty-inner {
    display: flex;
    padding: 40px 20px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px 20px;
}

.brandmessage-tasty-block { width: calc((100% / 2) - 20px); 
    display: flex;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    align-items: center;
}

.brandmessage-tasty-block img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 2;
}

.brandmessage-tasty-block.active::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: white-circle-appear 0.3s ease-out forwards;
    z-index: 1;
}

.brandmessage-tasty-block.active img { transform: scale(0.9); }

@keyframes white-circle-appear {
    to {
        transform: translate(-50%, -50%) scale(1);
    }
}

/* キャンペーン */
.brandmessage-campaign {
    background: #b3dfea;
    position: relative;
    padding-bottom: 46px;
}

.brandmessage-campaign::before{
    content: "";
    position: absolute;
    height: 60px;
    width: 100%;
    clip-path: polygon(0 0,50% 100%,100% 0);/* ココ */
    background-color: #b3dfea;
    border-bottom: 1px solid #b3dfea;
    left: 0;
    bottom: -60px;
}

.brandmessage-campaign-inner { padding: 40px 20px 60px; }

.brandmessage-campaign-present-image { width: 90%; margin: -100px auto 0; }

.brandmessage-campaign-2col {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px 12px;
    margin: 24px 0 48px;
}
.brandmessage-campaign-2col-block { width: calc((100% / 2) - 12px); }

/* other */
.brandmessage-banner-2col { display: block; }
.brandmessage-banner-2col-block { margin-bottom: 24px; }

.brandmessage-contets { background-color: #fff; }

.brandmessage-campaign-kiyaku-box {
    margin: 20px 0;
    padding: 4px 8px;
    background: #fff;
    border-radius: 10px;
}
.brandmessage-campaign-kiyaku-box .brandmessage-campaign-kiyaku-inner {
    max-height: 200px;
    overflow-y: auto; 
}

.brandmessage-campaign-kiyaku {
    position: relative;
    font-size: 1.2rem;
    color: #375ba4;
    text-align: center;
}

.brandmessage-campaign-kiyaku:after {
content: "";
display: block;
position: absolute;
top: 50%;
right: 30px;
margin-top: -5px;
border-top: 10px solid #375ba4;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
transition: all 0.5s ease;
}

.brandmessage-campaign-kiyaku.campaign-kiyaku-close:after {
    border-top: 0;
    border-bottom: 10px solid #375ba4;
}

.brandmessage-campaign-kiyaku-inner {
    margin: 10px 0 0;
}
.brandmessage-campaign-kiyaku-inner p {
    font-size: 1.13rem;
    line-height: 1.5;
    margin-bottom: 8px;
    word-break: break-word;
}

      
/*---------- PC ----------*/
@media screen and (min-width: 750px) {
    .brandmessage-cont-main {
        display: block;
        margin:  0 auto 0;
    }

    /* キャンペーン予告バナー */
    .brandmessage-patch { right: 0;}

    .brandmessage-patch img { width: 166px;}

    .brandmessage-title { margin: 0 40px 0; padding-top: 60px;}

    .brandmessage-inner { padding: 20px 40px 40px; }


    /* title */
    .title-story img { width: 90%;}
    .title-tasty img { width: 52%;}
    .title-campaign img { width: 47%;}
    .title-other img { width: 55%; }
    .title-links img { width: 25%;}
    .title-premium img { width: 47%;}

    .title-s-premium img { width: 57%; }

    .stitle-story { padding: 0 40px; }


    /* 野菜 */
    .brandmessage-message-img-vege01 { width: 7%; top: 9%; right: 31%; }
    .brandmessage-message-img-vege02 { width: 4%; top: 14%; right: 25%; }
    .brandmessage-message-img-vege03 { width: 15%; top: 8%;}
    .brandmessage-message-img-vege04 { width: 8%; top: 21%; right: 19%; }
    .brandmessage-message-img-vege05 { width: 4%; top: 23%; right: 10%; }
    .brandmessage-message-img-vege06 { width: 8%; top: 29%; }
    .brandmessage-message-img-vege07 { width: 6%; top: 37%; }
    .brandmessage-message-img-vege08 { width: 8%; top: 39%; right: 17%; }

    .brandmessage-message-img-spbox { width: 80%; margin: 0 auto; }
    .brandmessage-message-spbox-textarea { margin-top: -120px; padding: 0 46px 32px;}
    .brandmessage-message-spbox-text { font-size: 1.24rem;}
    /*.brandmessage-text { font-size: 1.34rem; }*/

    /* メッセージ */
    .brandmessage-message { background-size: 100% 44%;}

    /* story */
    .brandmessage-tasty-text { font-size: 1.34rem; padding: 50px 40px 0; }
    .brandmessage-tasty-block { width: calc((100% / 3) - 32px); height: 197px;}
    .brandmessage-tasty-block:hover::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 190px;
        height: 190px;
        background: rgba(255, 255, 255, 1);
        border-radius: 50%;
        transform: translate(-50%, -50%) scale(0);
        animation: white-circle-appear 0.3s ease-out forwards;
        z-index: 1;
    }
    
    .brandmessage-tasty-block:hover img { transform: scale(0.9); }
    .brandmessage-tasty-inner { padding: 50px 30px 40px; gap: 32px 32px;}

    /* campaign */
    .brandmessage-campaign-inner { padding: 50px 40px 60px; }

    /* other */
    .brandmessage-banner-2col {
        display: flex;
        flex-wrap: nowrap;
        gap: 12px 12px;
    }
    
    .brandmessage-banner-2col-block { margin-bottom: 0; width: calc((100% / 2) - 12px); }

    .other-banner a:hover, .brandmessage-banner-2col-block a:hover, .brandmessage-patch a:hover { opacity: 0.4; cursor: pointer; }
}
 /* クイズ */
 /*
 .start-container { position: relative;}
*/
 .quiz-start {
    transform: translate(0, 0);
    width: 100%;
    margin: 40px auto 20px;
 }
 .quiz-start-button {
    position: relative;
    padding: 20px 10px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 3px;
    width: 60%;
    background: #e95529;
    margin: auto;
    cursor: pointer;
    border-radius: 150px;
  }
  
  .quiz-start-button:before, .quiz-start-button:after{
      position: absolute;
      content:'';
      width: 100%;
      height: 100%;
      border: inherit;
      top: 0;
      left: 0;
      z-index: -10;
      background: #fff;
      border-radius: inherit;
      animation: quiz-button 4s linear infinite;
  }
  
  .quiz-start-button:after {
      animation: quiz-button 4s linear infinite 1s;
  }
  
  /*アニメーション*/
  .quiz-animation {
    animation: 0.4s ease-in-out;
  }
  
  @keyframes quiz-button{
    0% {
      opacity: 1;
      transform: scaleY(1) scaleX(1);
    }
    20% {
      opacity: 0.8;
    }
    70% {
      opacity: 0.2;
      transform: scaleY(1.4) scaleX(1.1);
    }
    80% {
      opacity: 0;
      transform: scaleY(1.4) scaleX(1.1);
    }
    90% {
      opacity: 0;
      transform: scaleY(1) scaleX(1);
    }
  }

 .quiz-title { margin-bottom: 10px; font-size: 1.2rem; font-weight: 700; line-height: 1.8; text-align: center; }
 .quiz-container {
    margin: 20px auto;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 20px;
    display: none;
}

.quiz-container.active {
    display: block; /* アクティブ時に表示 */
}

.quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e0e0e0;
}

.quiz-question-number {
    font-size: 3rem;
    line-height: 1;
    font-weight: 700;
    color: #db4f43;
    flex: 1;
    text-align: center;
    font-family: Roboto !important;
}

.quiz-progress {
    width: auto;
    font-size: 1.13rem;
    color: #000;
}

.quiz-question {
    font-size: 1.13rem;
    font-weight: 400;
    margin-bottom: 20px;
    line-height: 1.6;
    color: #000;
    font-feature-settings: "palt";
    word-break: break-word;
    white-space: pre-wrap;
}

.quiz-options {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
margin-bottom: 20px;
}

.quiz-option {
  width: calc(50% - 10px);
    box-sizing: border-box;
    cursor: pointer;
    border: 3px solid #e0e0e0;
    border-radius: 50%;
    transition: all 0.3s ease;
    background: #fff;
}

.quiz-option:hover {
    border-color: #375ba4;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.quiz-option img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.quiz-option.selected {
    border-color: #db4f43;
}

.quiz-option.correct {
    border-color: #db4f43;
    background-color: #fff;
}

.quiz-option.incorrect {
    border-color: #375ba4;
    background-color: #fff;
}

.quiz-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.quiz-result {
    display: none;
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 10px;
    text-align: center;
}

.correct-message {
    color: #f44336;
}

.incorrect-message { color: #375ba4; }

.answer-feedback {
    margin-bottom: 20px;
    font-size: 1.13rem;
    display: none;
    word-break: break-word;
    white-space: pre-wrap;
}

.next-question-button, .hint-button {
    background-color: #db4f43;
    width: 80%;
    margin: 0 auto;
    color: #fff;
    border: none;
    padding: 12px;
    font-size: 1.13rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.next-question-button:hover, .hint-button:hover {
    background-color: #c43e32;
}

.next-question-button.animated_next { margin-bottom: 20px;}

.hint-area { justify-content: space-between; }

.hint-area img {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
    border-radius: 8px;
}

.animated {
    animation: fadeInUp 0.6s ease-out;
}

.animated_next {
    animation: slideInRight 0.5s ease-out;
}

.animated_feed {
    animation: fadeInScale 0.5s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media screen and (min-width: 750px) {

    .quiz-option { width: calc(25% - 15px); }

    .quiz-container { margin-top: 40px; }

    .quiz-title { font-size: 1.32rem;}
    
    .next-question-button, .hint-button { width: 50%; }

}

/* プレミアム時短 */
.brandmessage-premium { background: #facc64;
  background-image: url(/g6/feature/image/25th_anniversary_kit_12th.png);
  background-size: 210px 250px;
  background-repeat: no-repeat;
  background-position: right 5%;
}

.brandmessage-premium-inner {
  position: relative;
  padding: 20px 20px 10px;
  box-sizing: border-box;
}

.brandmessage-premium-text {
  margin: 0 0 0 20px;
  font-size: 1.2rem;
  flex: 1;
  order: 1;
}

.brandmessage-premium-image {
  width: 45%;
  order: 2;
}

/* beforeafterスライド */
.brandmessage-premium-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    margin: 20px auto;
  }
 
  .brandmessage-premium-before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
    height: 100%;
    border-right: 5px solid rgba(255, 255, 255, 0.7);
    box-shadow: 10px 0 15px -13px #000;
  }
 
  .brandmessage-premium-before img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
  }
  /*
  .brandmessage-premium-arrow {
    height: auto;
    left: 50%;
    position: absolute;
    top: 350px;
    transform: translateX(-50%);
    width: 128px;
    z-index: 30;
  }
  */
 
  .brandmessage-premium-before::before {
    content: '';
    z-index: 1;
    position: absolute;
    top: 0;
    right: -30px;
    bottom: 0;
    width: 45px;
    height: 45px;
    margin: auto;
    border: 5px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    box-shadow: 10px 0 15px -13px #000;

  }

  .brandmessage-premium-arrow::before {
    content: '';
    z-index: 1;
    top: 50%;
    right: 5px;
    margin-top: -9px;
    position: absolute;
    border-top: 10px solid transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid rgba(255, 255, 255, 0.7);
    border-bottom: 10px solid transparent;
  }

  .brandmessage-premium-arrow::after {
    content: '';
    z-index: 1;
    top: 50%;
    right: -30px;
    margin-top: -9px;
    position: absolute;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-left: 10px solid rgba(255, 255, 255, 0.7);
    border-bottom: 10px solid transparent;
  }

  .slider_range {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: col-resize;
  }

  .brandmessage-premium-kit { 
    display: flex;
    padding: 20px 20px 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px 20px;
  }

  .brandmessage-premium-kit-block { 
  position: relative;
  width: calc((100% / 2) - 20px);
  align-items: center;
  perspective: 1000px;
  }

  .brandmessage-premium-kit-block .brandmessage-premium-kit-image {
    /* 回転アニメーション用 */
    transition: transform 0.6s ease-in-out;
    transform-style: preserve-3d;
    backface-visibility: hidden;
  }
  
  /* 回転中のクラス */
.brandmessage-premium-kit-block.flipping .brandmessage-premium-kit-image {
    transform: rotateY(180deg);
  }

  .brandmessage-premium-kit-icon {
    display: block;
    position: absolute;
    width: 44px;
    right: -10px;
    bottom: 0;
    z-index: 10;
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  .brandmessage-premium-kit-icon:hover {
    transform: scale(1.1);
  }
  
/* アイコン内の画像のクリックイベントを無効化 */
.brandmessage-premium-kit-icon img {
    pointer-events: none;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
  }

  /* 360度回転アニメーション */
@keyframes iconSpin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .brandmessage-premium-kit-icon.spinning {
    animation: iconSpin 0.6s ease-in-out;
  }
  
  /* より滑らかな回転アニメーション */
@keyframes cardFlip {
    0% {
      transform: rotateY(0deg);
    }
    50% {
      transform: rotateY(90deg);
    }
    100% {
      transform: rotateY(180deg);
    }
  }
  
  .brandmessage-premium-kit-block.card-flipping .brandmessage-premium-kit-image {
    animation: cardFlip 0.8s ease-in-out forwards;
  }

  /* 元に戻るアニメーション */
@keyframes cardFlipBack {
    0% {
      transform: rotateY(180deg);
    }
    50% {
      transform: rotateY(90deg);
    }
    100% {
      transform: rotateY(0deg);
    }
  }
  
  .brandmessage-premium-kit-block.card-flipping-back .brandmessage-premium-kit-image {
    animation: cardFlipBack 0.8s ease-in-out forwards;
  }

  .brandmessage-premium-kit-loop {
    width: 100%;
    height: 250px;
    position: relative;
    background-image: url(/g6/feature/image/25th_anniversary_kit_menu.png);
    background-repeat: repeat-x;
    background-size: auto 250px;
    animation: loop 50s linear infinite;
  }

  @keyframes loop {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -2000px 0; /* 画像のマイナス幅 */
    }
}

  .brandmessage-premium-kit-loop img:first-child { animation: loop 50s -25s linear infinite; }
  .brandmessage-premium-kit-loop img:last-child { animation: loop2 50s linear infinite; }

  .brandmessage-premium-kit-message {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    margin: auto;
    transform: translate(-50%, -50%);
  }

  .brandmessage-premium-kit-message_btm {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 40%;
  }


  @media screen and (min-width: 750px) {
    .brandmessage-premium-inner { padding: 20px 40px 10px; }
    .brandmessage-premium {
      background-size: 350px 416px;
    }

    .brandmessage-s-title { margin: 50px 20px 0; }
    .brandmessage-premium-slider { width: 600px; }
    .brandmessage-premium-kit {
      display: flex;
      padding: 40px 30px 10px;
      gap: 32px 32px;
    }
  
    .brandmessage-premium-kit-block {
      width: calc((100% / 3) - 32px);
    }

    .brandmessage-premium-kit-loop {
      height: 500px;
      background-size: auto 500px;
    }

    .brandmessage-premium-kit-message { width: 60%;}
    .brandmessage-premium-kit-message_btm { width: 30%;}
  
  }