@charset "utf-8";

/* =======================================
    01.Base（reset / base / typography）
======================================= */
/* ------ Reset -------*/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}
html,body {
  -webkit-text-size-adjust: 100%;
}


/* ------ root（pc 1130px / sp 375px） -------*/
:root {
  /* color */
  --color-primary: #d7000f;
  --color-font-gray: #4c4948;

  /* size */
  --size-10: min(0.885vw, 10px);
  --size-15: min(1.327vw, 15px);
  --size-20: min(1.77vw, 20px);
  --size-25: min(2.212vw, 25px);
  --size-30: min(2.655vw, 30px);
  --size-40: min(3.54vw, 40px);
  --size-50: min(4.425vw, 50px);
  --size-60: min(5.31vw, 60px);
  --size-70: min(6.195vw, 70px);
  --size-80: min(7.08vw, 80px);
  --size-90: min(7.965vw, 90px);
  --size-100: min(8.85vw, 100px);
  --size-120: min(10.619vw, 120px);
  --size-200: min(17.699vw, 200px);

  /* font */
  --font-txt-sm:   min(1.416vw, 1.6rem);
  --font-txt-base: min(1.504vw, 1.7rem);
  --font-txt-md:   min(1.77vw, 2rem);
  --font-txt-lg:   min(1.947vw, 2.2rem);
  --font-txt-xl:   min(2.124vw, 2.4rem);
  --font-txt-2xl:  min(2.301vw, 2.6rem);
  --font-txt-3xl:  min(2.478vw, 2.8rem);
  --font-txt-4xl:  min(2.832vw, 3.2rem);
}
@media (max-width: 767px) {
  :root {
    /* size */
    --size-10: min(2.667vw, 12px);
    --size-15: min(4vw, 18px);
    --size-20: min(5.333vw, 24px);
    --size-25: min(6.667vw, 30px);
    --size-30: min(8vw, 35px);
    --size-40: min(10.667vw, 46px);
    --size-50: min(13.333vw, 58px);
    --size-60: min(16vw, 70px);
    --size-70: min(18.667vw, 82px);
    --size-80: min(21.333vw, 92px);
    --size-90: min(24vw, 110px);
    --size-100: min(26.667vw, 120px);
    --size-120: min(32vw, 140px);
    --size-200: min(53.333vw, 220px);

    /* font */
    --font-txt-sm:   min(2.667vw, 1.3rem); /* 1rem */
    --font-txt-base: min(2.933vw, 1.4rem); /* 1.1rem */
    --font-txt-md:   min(3.2vw, 1.5rem); /* 1.2rem */
    --font-txt-lg:   min(3.467vw, 1.6rem); /* 1.3rem */
    --font-txt-xl:   min(3.733vw, 1.8rem); /* 1.4rem */
    --font-txt-2xl:  min(4vw, 1.9rem); /* 1.5rem */
    --font-txt-3xl:  min(4.267vw, 2rem); /* 1.6rem */
    --font-txt-4xl:  min(4.8vw, 2.2rem); /* 1.8rem */
  }
}


/* ------ Responsive -------*/
.pc {
  display: block;
}
.sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}


/* ------ box -------*/
body {
  background-color: #fff;
  overflow-y: scroll;
}
#pageWrapper{
  margin: 0 auto;
  /* overflow: hidden; */
  position: relative;
  width: 100%;
}
main{
  padding-top: min(4.167vw, 80px);/* 1920 */
  position: relative;
  z-index: 1;
}
section {
  position: relative;
  width: 100%;
}
.container {
  max-width: 1130px; /* 1100px + 30px*/
  margin: 0 auto;
  position: relative;
  padding: 0 var(--size-15);
  width: 100%;
}
@media screen and (max-width: 767px){
  body{
    min-width: 100%;
  }
  .container {
    padding: 0;
    width: 88%;
  }
}


/* ------ text -------*/
html {
  font-size: 62.5%;
}
body {
  color: var(--color-font-gray);
  font-family: "Montserrat","Zen Kaku Gothic Antique","Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-size: var(--font-txt-base);
  font-optical-sizing: auto;
  font-weight: 500;
  line-height: 1.7;
}
main p{
  margin-bottom: 1em;
}
main p:last-child{
  margin-bottom: 0;
}
sup {
  font-size: 1.2rem;
  position: relative;
  top: -3px;
  right: 0;
  font-weight: 900;
}
@media screen and (max-width: 767px) {
  sup {
      font-size: 1.867vw;
  }
}


/* =======================================
  02. Utilities（margin / padding etc）
======================================= */
/* ------ padding -------*/
.section-pad{
  padding: var(--size-80) 0;
}
@media screen and (max-width: 767px) {
  .section-pad{
    padding: var(--size-40) 0;
  }
}
.case-mb{
  margin-bottom: var(--size-60);
}
@media screen and (max-width: 767px) {
  .case-mb{
    margin-bottom: var(--size-30);
  }
}
.box-mb{
  margin-bottom: var(--size-40);
}
@media screen and (max-width: 767px) {
  .box-mb{
    margin-bottom: var(--size-20);
  }
}


/* ------ margin -------*/
.mb_0{
  margin-bottom: 0;
}
.mb_30{
  margin-bottom: var(--size-30);
}
.mb_40{
  margin-bottom: var(--size-40);
}
.mb_50{
  margin-bottom: var(--size-50);
}
.mb_60{
  margin-bottom: var(--size-60);
}
.mb_80{
  margin-bottom: var(--size-80);
}
.mb_100{
  margin-bottom: var(--size-100);
}
@media screen and (max-width: 767px) {
  .mb_30{
    margin-bottom: var(--size-20);
  }
  .mb_40{
    margin-bottom: var(--size-25);
  }
  .mb_50{
    margin-bottom: var(--size-30);
  }
  .mb_60{
    margin-bottom: var(--size-35);
  }
  .mb_80{
    margin-bottom: var(--size-40);
  }
  .mb_100{
    margin-bottom: var(--size-50);
  }
}


/* ------ 配置 -------*/
.center{
  text-align: center;
}


/* ------ fadeInUp -------*/
.fadeInUp{
  -webkit-transform: translateZ(0);
  /* display: none; */
  opacity: 0;
}
.fadeInUp.animated {
  /* アニメーションのプロパティを指定 */
  -webkit-transform: translateZ(0);
  animation-name: animated;
  animation-duration: 1s;
  animation-timing-function: ease;
  position: relative;
  opacity: 1;
}
@keyframes animated {
  from {
    opacity: 0;
    bottom: -20px;
  }
  to {
    opacity: 1;
    bottom: 0;
  }
}
@media screen and (max-width: 768px) {
  .no-animation {
    opacity: 1 !important;
    animation: none !important;
  }
}


/* ------ visually-hidden -------*/
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* =======================================
    03. Components（button / card / badge）
======================================= */
/* ------ title -------*/
.ttl_main{
  position: relative;
  margin-bottom: 2em;
  text-align: center;
  z-index: 10;
}
.ttl_main img{
  height: min(7.257vw, 82px);
  width: auto;
}
.ttl_sub{
  margin-bottom: var(--size-40);
}
.ttl_main img, .ttl_sub img{
  margin: 0 auto;
}
.ttl_topic{
  font-size: var(--font-txt-base);
  font-weight: 500;
  margin-bottom: 5px;
}
.ttl_item{
  font-weight: 500;
  margin-top: var(--size-40);
}
@media screen and (max-width: 767px){
  .ttl_main{
    margin-bottom: 1.5em;
  }
  .ttl_main img{
    height: min(9.6vw, 36px);
  }
  .ttl_sub{
    margin-bottom: var(--size-20);
  }
  .ttl_topic{
    font-size: var(--font-txt-md);
    font-weight: bold;
  }
  .ttl_item{
    font-weight: bold;
    margin-top: var(--size-20);
  }
}


/* ------ text -------*/
.txt_small{
  font-size: 75%;
}
.txt_red{
  color: var(--color-primary);
}

/* .icon_note */
.icon_note{
  padding-left: 1em;
  position: relative;
}
.icon_note::before{
  content: '※';
  position: absolute;
  left: 0;
}


/* ------ btn -------*/
/* a */
a{
  color: var(--color-font-gray);
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  a:hover{
    text-decoration: underline;
  }
}

/* .txt_link */
.txt_link{
  text-decoration: underline;
}
@media screen and (min-width: 768px) {
  .txt_link:hover{
    text-decoration: none;
  }
}

/* btn */
.btn{
  display: inline-block;
}
.btn_text{
  text-decoration: underline;
}
@media screen and (min-width: 768px) {
  .btn:hover{
    text-decoration: none;
    transform:scale(0.95);
    transition: 0.3s all;
    opacity: 1;
  }
  .btn_text:hover{
    text-decoration: none;
  }
}
@media screen and (max-width: 767px) {
  .btn{
    display: block;
  }
}

/* .btn_application */
.btn_application img{
  width: min(61.947vw, 700px); 
}
@media screen and (max-width: 767px) {
  .btn_application img{
    width: min(72vw, 350px);
  }
}

/* .cta_box */
.cta_box {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .cta_box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}


/* ------ background -------*/
/* .bg_yellow */
.bg_yellow{
  background-color: #fcd005;
}

/* .bg_stripe */
.bg_stripe{
  background-image: url(../img/bg_stripe.jpg);
  background-repeat: repeat;
  background-size: 58px auto;
  background-position: top left;
}
@media screen and (max-width: 767px) {
  .bg_stripe{
    background-size: 30px auto;
  }
}


/* ------ list -------*/
/* .list_box */
.list_box{
  position: relative;
  margin: 0;
}
.list_box li{
  padding-left: 1em;
  position: relative;
}
.list_box li::before{
  content: '・';
  position: absolute;
  left: 0;
}


/* .list_circle_box */
.list_circle_box{
  position: relative;
  margin: 0;
}
.list_circle_box li::before{
  content: '⚫︎';
}
@media screen and (max-width: 767px){
  .list_circle_box li{
    position: relative;
    padding-left: 1em;
  }
  .list_circle_box li::before{
    position: absolute;
    left: 0;
  }
}


/* ------ img -------*/
@media screen and (max-width: 767px){
  img{
    width: 100%;
  }
}

/* deco */
.deco{
  position: absolute;
  z-index: 1;
}


/* bubble */
.bubble_about_l{
  bottom: 30px;
  left: calc(50% - 850px);
}

.bubble_recipes_l{
  top: 1160px;
  left: calc(50% - 750px);
}
.bubble_recipes_r{
  top: 0;
  right: calc(50% - 850px);
}

.bubble_sns_l{
  top: 500px;
  left: calc(50% - 850px);
}
.bubble_sns_r{
  bottom: 430px;
  right: calc(50% - 850px);
}

.bubble_application-methods_l{
  top: 70px;
  left: calc(50% - 850px);
}
.bubble_application-methods_r{
  top: 290px;
  right: calc(50% - 850px);
}

.bubble_products_l{
  top: 0;
  left: calc(50% - 850px);
}
.bubble_products_r{
  top: 210px;
  right: calc(50% - 680px);
}

.bubble_recommend_l{
  top: 0;
  left: calc(50% - 750px);
}
.bubble_recommend_r{
  top: 700px;
  right: calc(50% - 610px);
}

.bubble_banner_l{
  top: 100px;
  left: calc(50% - 680px);
}
@media (max-width: 767px){
  .bubble{
    display: none;
  }
}


/* ------ accordion -------*/
/* base (共通) */
.accordion{
  list-style: none;
}

/* .accordion_head */
.accordion_head{
  position: relative;
  width: 100%;
}

/* .accordion_trigger */
.accordion_trigger{
  border: 0;
  background-color: transparent;
  cursor: pointer;
  outline: none;
  position: relative;
  box-sizing: border-box;
}
.accordion_mark{
  position: absolute;
  width: var(--size-40);
  height: var(--size-40);
  display: grid;
  place-items: center;
}
.accordion_mark::before{
  content: "";
  background-image: url(../img/icon_open.svg);
  background-size: 100% auto;
  display: inline-block;
  width: var(--size-40);
  height: var(--size-40);
}
.accordion_trigger[aria-expanded="true"] .accordion_mark::before{
  content: "";
  background-image: url(../img/icon_close.svg);
}
.is-static .accordion_mark{
  display: none;
}
@media (max-width: 767px){
  .accordion_mark{
    width: var(--size-25);
    height: var(--size-25);
  }
  .accordion_mark::before{
    width: var(--size-25);
    height: var(--size-25);
  }
}

/* .accordion_panel */
.accordion_panel{
  overflow: hidden;
  height: 0;
  transition: height 0.3s ease;
}
.accordion_content{
  box-sizing: border-box;
}


/* ------ .scroll_box-------*/
.scroll_box{
  background-color: #fff;
  padding: var(--size-30) var(--size-30) var(--size-30) var(--size-40);
  border-radius: var(--size-30);
}
.scroll_box .inner{
  max-height: min(47.788vw, 540px);
  overflow-y: auto;
  padding-right: 10px;
}
@media screen and (max-width: 767px){
  .scroll_box{
    border: 3px solid #fff;
    padding:  var(--size-15) 1.333vw var(--size-15) var(--size-15);
    border-radius: var(--size-20);
  }
  .scroll_box .inner{
    max-height: min(370px, 98.667vw);
  }
}


/* =======================================
    04. Layout（header / footer / grid）
======================================= */
/* ------ footer -------*/
footer{
  background-color: #000;
  padding: var(--size-15)
}
footer .copy{
  color: #fff;
  font-size: 1.2rem;
  text-align: center;
}


/* ------ flex-box -------*/
.col2,.col3{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}
@media screen and (max-width: 767px) {
  .col2,.col3{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}


/* =======================================
    05. Pages（#pageTop）
======================================= */
/* ------ #mainvisual_box -------*/
#mainvisual_box{
position: relative;
}
#mainvisual_box .img_mainvisual{
  width: 100%;
}
.bg_wave{
  position: absolute;
  bottom: calc(var(--size-10) * -1);
  width: 100%;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .bg_wave{
    bottom: 0;
  }
}


/* ------ .btn_sakusan -------*/
.btn_sakusan{
  position: sticky;
  top: min(1.042vw, 20px); /* 1920px */
  left: calc(50% + min(27.604vw, 530px)); /* 1920px */
  display: block;
  width: min(21.25vw, 408px); /* 1920px */
  z-index: 10;
}
.btn_sakusan img{
  width: 100%;
}
@supports (top: env(safe-area-inset-top)) {
  .btn_sakusan{
    top: calc(env(safe-area-inset-top) + 20px);
  }
}


/* ------ #about_box -------*/
#about_box{
  padding-top: 0;
  padding-bottom: 0;
  margin-top: max(-22.76vw, -437px); /* 1920px */
}
#about_box .container{
  max-width: 100%;
}
.img_about{
  display: block;
  margin: 0 auto;
  width: min(77.24vw, 1483px); /* 1920px */
}
@media screen and (max-width: 767px) {
  #about_box .container{
    width: 92%;
  }
  .img_about{
    width: 100%;
  }
}


/* ------ #sns_box -------*/
#sns_box{
  overflow: hidden;
}
#sns_box .ttl_sns{
  margin-bottom: 0.8em;
  text-align: center;
}
#sns_box .ttl_sns img{
  width: min(45.31vw, 512px);
}
#sns_box .inner{
  aspect-ratio: 9 / 16;
  border: 2px solid #dcdddd;
  background-color: #9fa0a0;
  margin: 0 auto;
  width: min(61.947vw, 700px);
}
#sns_box .txt_notes{
  margin-bottom: 0.5em;
  text-align: center;
}
@media screen and (max-width: 767px){
  #sns_box{
    padding-top: var(--size-10);
  }
  #sns_box .ttl_sns{
    margin-bottom: 1em;
  }
  #sns_box .inner{
    width: 90%;
  }
}

/* iframe */
#sns_box iframe{
  width: 100% !important;
  height: auto;
  aspect-ratio: 540 / 883;
}
@media screen and (max-width: 767px){
  #sns_box iframe{
    min-height: 550px;
    aspect-ratio: 315 / 602;
  }
}

/* sns_slider */
.sns_slider {
  position: relative;
  max-width: 640px !important; /* 540px + 50*2px */
  padding: 0 50px;
}
.swiper-slide {
  visibility: visible !important;
  height: auto !important;
  flex-shrink: 0;
}
.instagram-media {
  max-width: 540px !important;
  width: 100% !important;
}
@media screen and (max-width: 767px){
  #sns_box .container{
    width: 100%;
  }
  .sns_slider {
    padding: 0 30px;
  }
  .instagram-media {
    max-width: 540px !important;
    min-width: 100% !important;
  }
}

/* .swiper-button */
.swiper-button {
  color: #333;
  width: 40px;
  height: 40px;
  z-index: 10;
}
.swiper-button::after {
  font-size: 40px;
}
.swiper-button-prev {
  left: 0;
}
.swiper-button-next {
  right: 0;
}
@media screen and (max-width: 767px){
  .swiper-button {
    width: 28px;
  }
  .swiper-button::after {
    font-size: 28px;
  }
}

/* sns_scroll_box */
.sns_scroll_box .inner{
  aspect-ratio: 9 / 16;
  border: 5px solid #dcdddd;
  background-color: #dcdddd;
  margin: 0 auto;
  /* padding-right: 10px; */
  max-width: 540px;
  overflow-y: auto;
}
.sns_list_box .sns_item{
  margin-bottom: 20px;
}
.sns_list_box .sns_item:last-child{
  margin-bottom: 0;
}
.txt_scroll{
  margin-top: 1em;
}
@media screen and (max-width: 767px){
  .sns_scroll_box .inner{
    border: 4px solid #dcdddd;
    width: 90%;
  }
}


/* ------ #recipes_box -------*/
#recipes_box{
  padding-bottom: var(--size-120);
  overflow: hidden;
}
@media screen and (max-width: 767px){
  #recipes_box{
    padding-top: 0;
    padding-bottom: var(--size-40);
  }
  #recipes_box .container{
    width: 92%;
  }
}

/* .img_recipe */
.img_recipe{
  margin-right: auto;
  margin-left: auto;
  width: min(86.106vw, 973px);
}
@media screen and (max-width: 767px){
  .img_recipe{
    width: 80%;
  }
}

/* .ttl_recipes */
.ttl_recipes{
  margin-bottom: var(--size-20);
  text-align: center;
}
.ttl_ringo-su{
  width: min(33.982vw, 384px);
}
.ttl_ringo-kuro-zu{
  width: min(41.327vw, 467px);
}
@media screen and (max-width: 767px){
  .ttl_recipes{
    margin-bottom: var(--size-10);
  }
  .ttl_ringo-su{
    width: 52%;
  }
  .ttl_ringo-kuro-zu{
    width: 64%;
  }
}

/* .list_ingredients_box */
.list_ingredients_box{
  margin: 0 auto;
  width: min(70.796vw, 800px);
}
.ingredients_item{
  background-color: #fff;
  border-radius: var(--size-25);
  padding: 8px;
  margin-bottom: var(--size-30);
}
.ingredients_item:last-child{
  margin-bottom: 0;
}
.ingredients_item .inner{
  border: 3px solid #00aace;
  border-radius: var(--size-20);
}
@media screen and (max-width: 767px){
  .list_ingredients_box{
    width: 100%;
  }
  .ingredients_item{
    border-radius: var(--size-15);
    padding: 5px;
    margin-bottom: var(--size-20);
  }
  .ingredients_item .inner{
    border: 2px solid #00aace;
    border-radius:  var(--size-10);
  }
}

.ingredients_item .accordion_head{
  padding: var(--size-15) var(--size-30);
  text-align: left;
}
.ingredients_item .accordion_mark{
  position: absolute;
  top: 0;
  right: 0
}
.ingredients_item .accordion_trigger{
  display: block;
  width: 100%;
  text-align: left;
}
@media screen and (max-width: 767px){
  .ingredients_item .accordion_head{
    padding: var(--size-15) var(--size-15);
  }
  .ingredients_item .accordion_mark{
    top: min(-1.333vw, -5px);
  }
}

/* .ttl_ingredients */
.ttl_ingredients{
  max-width: 100%;
  height: min(3.274vw, 37px);
  width: auto;
}
.ringo-kuro-zu_box .ttl_ingredients{
  height: min(3.451vw, 39px);
}
@media screen and (max-width: 767px){
  .ttl_ingredients,
  .ringo-kuro-zu_box .ttl_ingredients{
    height: 4.267vw; /* 16px */
  }
}

.ingredients_item .accordion_content{
  display: flex;
  padding: 0 var(--size-30) var(--size-10);
}
.ingredients_item .accordion_content .txt_box{
  position: relative;
  width: 400px;
}
.ingredients_item .accordion_content .txt_box p{
  font-size: var(--font-txt-3xl);
  margin: 0;
}
.ingredients_item .accordion_content .txt_box p span{
  font-size: 70%;
}
.ingredients_item .accordion_content .txt_box .list_circle_box li{
  font-size: var(--font-txt-xl);
  line-height: 1.4;
}
.ingredients_item .accordion_content .txt_box .list_circle_box li::before{
  color: var(--color-primary);
}
@media screen and (max-width: 767px){
  .ingredients_item .accordion_content{
    padding: 0 var(--size-15) var(--size-10) ;
    flex-direction: column;
  }
  .ingredients_item .accordion_content .txt_box{
    order: 2;
    width: 100%;
  }
}

/* .img_ingredients */
.img_ingredients_01{
  width: min(21.327vw, 241px);
}
.img_ingredients_02{
  width: min(20.796vw, 235px);
}
.img_ingredients_03{
  padding-left: var(--size-30);
  width: min(19.027vw, 215px);
}
.img_ingredients_04{
  width: min(20vw, 226px);
}
.img_ingredients_05{
  padding-left: var(--size-30);
  width: min(14.602vw, 165px);
}
.img_ingredients_06{
  padding-left: var(--size-30);
  width: min(17.965vw 203px);
}
@media screen and (max-width: 767px){
  .img_ingredients{
    width: 50%;
    padding: 0;
    margin: 0 auto;
    order: 1;
  }
}

.ingredients_item .accordion_content .txt_box p.txt_ingredients_03{
  font-size: var(--font-txt-base);
  position: absolute;
  bottom: 0;
}
@media screen and (max-width: 767px){
  .ingredients_item .accordion_content .txt_box p.txt_ingredients_03{
  position: relative;
  margin-top: 1em;
  }
}


/* ------ #recommend_box -------*/
#recommend_box{
  text-align: center;
  overflow: hidden;
}
.ttl_recommend{
  margin-bottom: var(--size-80);
  text-align: center;
}
.ttl_recommend img{
  width: min(95.221vw, 1076px);
}
.img_recommend_01{
  width: min(100vw, 1130px);
}
.img_recommend_02{
  width: min(95.752vw, 1082px);
}
@media screen and (max-width: 767px){
  #recommend_box{
    padding-top: var(--size-20);
  }
  .ttl_recommend{
    margin-bottom: var(--size-30);
  }
}


/* ------ #campaign-overview_box -------*/
#campaign-overview_box{
  padding-top: 0;
  overflow: hidden;
}
#campaign-overview_box .case{
  position: relative;
}

/* .ttl_campaign-overview */
.ttl_campaign-overview{
  margin-bottom: var(--size-40);
  overflow: hidden;
}
.ttl_campaign-overview img{
  width: 100%;
}
@media screen and (max-width: 767px) {
  .ttl_campaign-overview{
    background-image: url(../img/bg_campaign-overview_sp.png);
    background-size: 115% auto;
    background-position: bottom center;
    background-repeat: no-repeat;
    margin-bottom: var(--size-20);
  }
  .ttl_campaign-overview img{
    margin: 0 auto;
    position: relative;
    left: 7%;
    width: 90%;
  }
}

/* .ttl_campaign-overview_sub */
.ttl_campaign-overview_sub{
  margin-bottom: var(--size-80);
  text-align: center;
}
.ttl_campaign-overview_sub img{
  width: min(90.708vw, 1025px);
}
@media screen and (max-width: 767px) {
  .ttl_campaign-overview_sub{
    margin-bottom: var(--size-40);
  }
}

/* .deco */
.deco_sakusan_01{
  top: calc(var(--size-50) * -1);
  right: calc(var(--size-50) * -1);
  width: min(20.442vw, 231px);
}
.deco_sakusan_02{
  top: calc(var(--size-90) * -1);
  left: calc(var(--size-120) * -1);
  width: min(16.106vw, 182px);
}
.deco_sakusan_03{
  top: calc(var(--size-20) * -1);
  right: calc(var(--size-40) * -1);
  width: min(17.434vw, 197px);
}
@media screen and (max-width: 767px) {
  .deco_sakusan_01{
    top: calc(var(--size-20) * -1);
    right: calc(min(12vw, 45px) * -1);
  }
  .deco_sakusan_02{
    top: calc(var(--size-25) * -1);
    left: calc(var(--size-25) * -1);
  }
  .deco_sakusan_03{
    top: calc(var(--size-50) * -1);
    right: calc(var(--size-15) * -1);
  }
}


/* --- .application-methods_box --- */
.application-methods_box{
  margin-left: auto;
  margin-right: auto;
  width: min(85.841vw, 970px);
}

/* .txt_campaign-overview */
.txt_campaign-overview{
  font-size: var( --font-txt-3xl);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .txt_campaign-overview{
   font-size: var( --font-txt-xl);
  }
}

/* .img_prize */
.img_prize{
  display: block;
  margin:0 auto var(--size-20);
}
.img_prize:last-child{
  margin-bottom: 0;
}
.img_step{
  margin: 0 auto;
  width: min(85.929vw, 971px);
}
@media screen and (max-width: 767px) {
  .img_step{
    width: 80%;
  }
}

/* .txt_notes */
#campaign-overview_box .txt_notes{
  font-size: var(--font-txt-md);
  letter-spacing: -0.02em;
}

/* .date_box */
.date_box{
  border: 3px solid #009c79;
  border-radius: var(--size-10);
  overflow: hidden;
  margin-bottom: 1em;
}
.date_box:last-child{
  margin-bottom: 0;
}
.date_box .col2:nth-child(2){
  border-top: 3px solid #009c79;
}
.date_box p{
  background-color: #fff;
  box-sizing: border-box;
  margin-bottom: 0;
  font-weight: 900;
  padding: var(--size-10) var(--size-20);
}
.date_box p:nth-child(2){
  flex: 1;
}
.date_box .title{
  background-color: #009c79;
  color: #fff;

  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;

  font-size: var(--font-txt-2xl);

  position: relative;
  width: min(27.434vw, 310px);
}
.date_box .title.bd_bottom::after{
  content: '';
  display: block;
  background-color: #fff;
  position: absolute;
  bottom: -3px;
  height: 3px;
  width: 97%;
}
.date_box .ttl_store{
  letter-spacing: 0.3em;
}
.date_box .store{
  color: #000;
  font-size: var(--font-txt-3xl);
  line-height: 1.4;

  display: flex;
  align-items: center;
  justify-content: center;
}
.date_box .date{
  color: #000;
  display: inline-block;
  font-size: var(--font-txt-md);
}
.date_box .date::after{
  content: '';
  background-image: url(../img/icon_arrow_b.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  display: inline-block;
  height: min(1.947vw, 22px);
  width: min(1.062vw, 12px);
  margin-left: var(--size-15);
  margin-right: var(--size-10);
  position: relative;
  top: 3px;
}
.date_box .marker{
  background-color: #fff000;
  color: var(--color-primary);
  font-size: var(--font-txt-xl);
  padding: 3px var(--size-10);
}
@media screen and (max-width: 767px){
  .date_box p{
    padding: var(--size-10) 0;
    text-align: center;
  }
  .date_box .title{
    font-size: var(--font-txt-2xl);
    padding: 5px;
    width: 100%;
  }
  .date_box .date{
    display: block;
    font-size: var(--font-txt-2xl);
    position: relative;
  }
  .date_box .date::after{
    height: 4.267vw;
    width: 2.4vw;
    position: absolute;
    top: 6.5vw;
    left: calc(50% - 4.5px);
    transform: rotate(90deg);
    transform-origin: center center;
    margin: 0;
  }
  .date_box .marker{
    font-size: var(--font-txt-3xl);
  }
}


/* --- .products_box --- */
.products_box{
  margin-left: auto;
  margin-right: auto;
  width: min(85.841vw, 970px);
}
.products_box .inner{
  background-color: #e5f5f2;
  border: 6px solid #009c79;
  border-radius: var(--size-30);
  padding: var(--size-30);
}
@media screen and (max-width: 767px){
  .products_box .inner{
    border: 4px solid #009c79;
    border-radius: var(--size-20);
    padding: var(--size-20) 5%;
  }
}

/* .list_products */
.list_products{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--size-40);
  margin: 0 auto;
  width: min(78.97vw, 920px);
}
.list_products li{
  display: flex;
  align-items: flex-end;
  text-align: center;
}
.list_products li.products_01 img{
  width: min(9.204vw, 104px);
}
.list_products li.products_02 img{
  width: min(8.407vw, 95px);
}
.list_products li.products_03 img,
.list_products li.products_04 img{
  width: min(11.858vw, 134px);
}
@media screen and (max-width: 767px){
  .list_products{
    gap: var(--size-20) var(--size-20);
    width: 100%;
  }
  .list_products li img{
    height: auto;
    width: min(10.667vw, 40px);
  }
}

/* .txt_products */
.txt_products{
  font-size: var(--font-txt-3xl);
  font-weight: 900;
  text-align: center;
  line-height: 1.5;
}
@media screen and (max-width: 767px){
  .txt_products{
    font-size: var( --font-txt-xl);
  }
}


/* ------ #banner-area_box -------*/
#banner-area_box{
  text-align: center;
  padding-top: 0;
  padding-bottom: var(--size-120);
}
#banner-area_box .btn img{
  width: min(81.062vw, 916px);
}
@media screen and (max-width: 767px){
  #banner-area_box{
    padding-bottom: var(--size-60);
  }
  #banner-area_box .btn img{
    width: 100%;
  }
}


/* ------ #application-requirements_box -------*/
#application-requirements_box .container{
  margin: 0 auto;
  max-width: 980px;
}
#application-requirements_box dt{
  margin-top: var(--size-40);
}
#application-requirements_box dt.mt_0{
  margin-top: 0;
}
@media screen and (max-width: 767px){
  #application-requirements_box p,
  #application-requirements_box dl,
  #application-requirements_box ul{
    line-height: 1.5;
  }
  #application-requirements_box dt{
    font-weight: bold;
    margin-top: var(--size-20);
  }
  #application-requirements_box .ttl_sub img{
    width: 50vw;
  }
}


/* ------ #receipt-registration_box -------*/
#receipt-registration_box{
  background-color: #fff;
}

/* .receipt_box */
.receipt_box{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--size-60) var(--size-80);
  text-align: center;
}
.receipt_box img{
  width: min(35.841vw, 405px);
}
@media screen and (max-width: 767px){
  .receipt_box{
    flex-direction: column;
    gap: var(--size-20);
  }
  .receipt_box img{
    width: 88%;
  }
}


/* ------ #faq_box -------*/
@media screen and (max-width: 767px){
  #faq_box .ttl_sub img{
    width: 60vw;
  }
}
/* faq */
.txt_question{
  font-size: var(--font-txt-lg);
  font-weight: bold;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 0.5em;
}
.txt_question::before{
  content: '';
  display: inline-block;
  background-image: url(../img/icon_question.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center center;
  margin-right: 10px;
  width: 31px;
  height: 29px;
}
.txt_answer{
  padding-left: 30px;
}
.txt_answer::before{
  content: '';
  display: inline-block;
  background-image: url(../img/icon_arrow.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center center;
  margin-right: 15px;
  margin-left: 5px;
  width: 10px;
  height: 15px;
}
@media screen and (max-width: 767px){
  .txt_question{
    font-size: var(--font-txt-md);
    margin-bottom: 0.5em;
  }
  .txt_question::before{
    margin-right:min(1.333vw, 5px);
    width: min(4.267vw, 16px);
    height: min(4.8vw, 18px);
  }
  .txt_answer{
    padding-left: var(--size-15);
    line-height: 1.5;
  }
  .txt_answer::before{
    margin-right: min(1.333vw, 5px);
    margin-left: 0;
    width: min(1.867vw, 7px);
    height: var(--size-10);
  }
}


/* ------ #contact_box -------*/
#contact_box{
  padding-bottom: var(--size-200);
}
.ttl_campaign{
  font-size: var(--font-txt-lg);
  font-weight: bold;
  letter-spacing: 0.04em;
  margin-bottom: 0.8em;
  text-align: center;
}
.txt_mail{
  font-size: var(--font-txt-md);
  font-weight: bold;
  margin-bottom: 1em;
  text-align: center;
}
.txt_campaign{
  padding-left: 250px;
}
@media screen and (max-width: 767px){
  #contact_box{
    padding-top: 0;
    padding-bottom: var(--size-50);
  }
  #contact_box .ttl_sub img{
    width: 60vw;
  }
  .ttl_campaign{
    font-size: var(--font-txt-xl);
  }
  .txt_campaign{
    padding-left: 0;
  }
}