@charset "UTF-8";

/*--------------
ここから
--------------*/


/* ▽ 初期設定 --------------*/

#ebc {
  position: relative;
  font-family: YakuHanJPs, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  font-weight: 400;
  line-height: 1.6;
}

@media (hover: hover) {
  #ebc a {
    transition: opacity 0.5s ease-in-out;
  }

  #ebc a:hover {
    opacity: 0.7;
  }
}

#ebc * {
  box-sizing: border-box;
}

#ebc img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.pc {
  display:block;
}

.sp {
  display: none;
}

.area_fade {
  opacity: 0;
  transform: translateY(50px);
  transition: ease-in-out .4s;
}

.area_fade.active {
  opacity: 1;
  transform: translateY(0);
  animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

@media screen and (max-width: 558px) {
  #ebc {
    padding: 0;
  }

  .pc {
    display: none !important;
  }

  .sp {
    display: block !important;
  }
}

/* =========================
  メソッド 
========================= */
:root {
    --base: #4CBBB4;
    --white: #fff;
    --brown: #421D01;
    --red:#FF0000;
    --text: #666;
    --ff_noyaku: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}

/* マージン */
.mt10 {margin-top: calc(10/490*100%);}
.mt15 {margin-top: calc(15/490*100%);}
.mt20 {margin-top: calc(20/490*100%);}
.mt25 {margin-top: calc(25/490*100%);}
.mt30 {margin-top: calc(30/490*100%);}
.mt40 {margin-top: calc(40/490*100%);}
.mt50 {margin-top: calc(50/490*100%);}

.mb20 {margin-bottom: calc(20/490*100%);}

/* パディング */
.pt40 {padding-top: calc(40/558*100%);}
.pt35 {padding-top: calc(35/558*100%);}

/* テキスト */
.text16,
.text17,
.text18,
.text20,
.text22,
.text26 {
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

.text16 {font-size: 16px;}
.text17 {font-size: 17px;}
.text18 {font-size: 18px;}
.text20 {font-size: 20px;}
.text22 {font-size: 22px;}
.text26 {font-size: 26px;}

@media (max-width: 558px) {
  .text16 {font-size: 2.66vw;}
  .text17 {font-size: 3.05vw;}
  .text18 {font-size: 3.23vw;}
  .text20 {font-size: 3.58vw;}
  .text22 {font-size: 3.94vw;}
  .text26 {font-size: 4.65vw;}
}

/* レタースペーシング */
.ls-50 {letter-spacing: calc(-50/558*1em);}
.ls-30 {letter-spacing: calc(-30/558*1em);}

.brown {color: var(--brown);}
.red {color: var(--red);}
.sec03_text {color: var(--text);}


/* =========================
  レイアウト 
========================= */

/* 全体レイアウト */
.layout {display: flex;}

/* サイド（左右） */
.side {
  position: fixed;
  top: 0;
  width: calc((100% - 558px) / 2);
  height: 100vh;
}

/* 左右それぞれ背景 */
.side-left {
  background: url('/sites/g/files/yjnsyp131/files/brand/nescafe/espresso-base-campaign/img/side_bg_left.jpg') no-repeat center / cover ;
  left: 0;
}

.side-right {
  background: url('/sites/g/files/yjnsyp131/files/brand/nescafe/espresso-base-campaign/img/side_bg_right.jpg') no-repeat center/ cover;
  right: 0;
}

/* メイン */
.contents {
  width: 558px;
  min-height: 100vh;
  background: #fff;
  margin: 0 auto;
  position: relative;
}

.btn_floating {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(calc(558px / 2 - 100% + 28px));
  width: 57px;
  display: block;
  z-index: 100;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

/* 表示用クラス */
.btn_floating.is-show {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 558px) {
  .btn_floating {
    left: auto;
    right:0;
    transform: none;
    width: calc(40/390*100%);
    margin: 0 calc(20/390*100%) 0 0;
  }
}

/* 中身 */
.inner {
  padding: 20px;
  box-sizing: border-box;
}

@media (max-width: 558px) {
  .layout {display: block;}

  .side {display: none;}

  .contents {width: 100%;}
}

.l_container {
  margin: 0 auto;
  padding: 0 calc(34/558*100%);
}


/* ▽ キービジュアル --------------*/

#ebc .sp_head {
    display: none;
  }

@media (max-width: 558px) {
  #ebc .sp_head {
    display: block;
  }
}

#ebc .kv {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

#ebc .kv_copy01 {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(79/558*100%);
  margin: calc(63/558*100%) calc(146/558*100%) 0 0;
}

#ebc .kv_copy02 {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(78/558*100%);
  margin: calc(404/558*100%) 0 0 calc(138/558*100%);
}

#ebc .kv_copy01,
#ebc .kv_copy02 {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 表示用クラス */
#ebc .kv_copy01.is-show,
#ebc .kv_copy02.is-show {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

#ebc .bg_base {
  background-color: var(--base);
}

.kv_lead {
  padding-top: calc(50/558*100%);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.38;
  text-align: center;
  color: var(--white);
}

@media (max-width: 558px) {
  .kv_lead {
    font-size: 4.65vw;
  }
}

.kv_lead p + p {
  margin-top: 1.45em;
}

.btn_warishi {
  margin: calc(45/558*100%) auto 0;
  display: block;
}

/* ▽ セクション01 --------------*/

.how_container {
  background-color: var(--white);
}

.how_container:nth-child(n+2) {
  margin-top: calc(35/490*100%);
}

@media (max-width: 558px) {
  .how_container:nth-child(n+2) {
    margin-top: calc(15/346*100%);
  }
}

.how_container_receipt {
  background-color: var(--white);
}

.how_container_receipt:nth-child(n+2) {
  margin-top: calc(25/490*100%);
}

@media (max-width: 558px) {
  .how_container_receipt:nth-child(n+2) {
    margin-top: calc(15/346*100%);
  }
}

.how_inner {
  padding: calc(25/490*100%) calc(31/490*100%);
}

.how_inner02 {
  padding: calc(15/490*100%) 0 calc(30/490*100%);
}

.how_inner_receipt {
  padding: calc(45/490*100%) calc(24/490*100%) calc(24/490*100%);
}

.how_inner_receipt02 {
  padding: calc(24/490*100%);
}

@media (max-width: 558px) {
  .how_inner_receipt,
  .how_inner_receipt02 {
    padding: calc(15/346*100%);
  }
}


.how_ttl,
.how_ttl02 {
  background-color: #00998B;
  font-size: 34px;
  font-weight: 700;
  color: var(--white);
  text-align: center;
  line-height: 1;
  padding: .3em 0;
}

.how_ttl02 {
  font-size: 34px;
  font-weight: 500;
  padding: .4em 0;
}

@media (max-width: 558px) {
  .how_ttl,
  .how_ttl02 {
    font-size: 6.11vw;
  }

  .how_ttl02 {
    font-size: 5.44vw;
    padding: .4em 0;
  }
  
}

.how_wrap {
  display: block;
  width: 100%;
  margin: calc(20/490*100%) auto 0;
  border-radius: 25px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

.how_wrap::before {
  content: "";
  position: absolute;
  inset: 0; /* top/right/bottom/left: 0 */
  border: 4px solid #109F92;
  border-radius: 25px;
  pointer-events: none; /* クリック邪魔しない */
  z-index: 2;
}

.how_wrap:hover {
  opacity: .7;
}

@media (max-width: 558px) {
  .how_wrap {
    border-radius: 4.48vw;
  }

  .how_wrap::before {
    border-radius: 4.48vw;
    border: .7vw solid #109F92;
  }
}

.sec01_btn {
  display: block;
  width: 100%;
  margin: calc(12/490*100%) auto 0;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

@media (max-width: 558px) {
  .sec01_btn {
    margin: calc(14/490*100%) auto 0;
  }
}

.sec01_btn:hover {
  opacity: .7;
}

.how_wrap:hover {
  opacity: .7;
}

.btn_how {
  background-image: linear-gradient(90deg, #109f92, #4ab9b2 50%, #109f92 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(25/428*100%);
  color: var(--white);
  padding: calc(25/428*100%) 0;
  text-align: center;
  list-style: none;
}

.btn_how .btn_how_ttl {
  font-size: 27px;
  font-weight: 500;
  line-height: 1.2;
}

@media (max-width: 558px) {
  .btn_how .btn_how_ttl {
    font-size: 4.85vw;
  }
}

.btn_how .btn_how_ttl span {
  font-size: 70%;
}

.btn_how .arrow {
  width: calc(26/426*100%);
}

.btn_text {
  background-color: var(--white);
  text-align: center;
  color: #00998B;
  font-size: 20px;
  font-weight: 500;
  padding: calc(20/428*100%) 0;
}

@media (max-width: 558px) {
  .btn_text {
    font-size: 3.58vw;
  }
}

.btn_text02, .btn_text02_border {
  background-color: var(--white);
  text-align: center;
  color: #00998B;
  font-size: 18px;
  font-weight: 500;
  padding: calc(10/428*100%) 0;
  line-height: 1.2;
}

.btn_text02_border {
  border-bottom: #00998B solid 1px;
  font-weight: 700;
  font-family: var(--ff_noyaku);
}

@media (max-width: 558px) {
  .btn_text02.btn_text02, .btn_text02_border {
    font-size: 3.22vw;
  }
}

.btn_text02 span {
  font-size: 120%;
  font-weight: 800;
}

.how_notes {
  font-size: 18px;
  text-align: center;
  color: var(--brown);
  font-weight: 500;
  margin: .5em;
}

@media (max-width: 558px) {
  .how_notes {
    font-size: 3.22vw;
  }
}

.how_btn_up {
  display: block;
  background: rgba(74, 185, 178, 0.4);
  color: #109F92;
  font-weight: 700;
  text-align: center;
  font-size: 24px;
  line-height: 1.45;
  padding: calc(5/428*100%) 0;
  margin: calc(20/428*100%) auto 0;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

.how_btn_up:hover {
  opacity: .7;
}

@media (max-width: 558px) {
  .how_btn_up {
    font-size: 4.3vw;
  }
}

.how_image_taishou {
  width: calc(114/490*100%);
  margin: calc(15/490*100%) auto 0;
}

.btn_how_shouhin {
  width: calc(428/490*100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--brown);
  padding: calc(10/428*100%) 0;
  gap: calc(15/428*100%);
  margin: calc(20/428*100%) auto 0;
}

.btn_how_shouhin_arrow {
  width: calc(26/428*100%);
}

.btn_how_shouhin p {
  font-size: 25px;
  font-weight: 500;
  color: var(--brown);
}

@media (max-width: 558px) {
  .btn_how_shouhin p {
    font-size: 4.4vw;
  }
}

.btn_sec01_shouhin {
  width: calc(428/490*100%);
  margin: calc(15/428*100%) auto 0;
  display: block;
}

.ex_text {
  font-size: 20px;
  line-height: 1.4;
  font-weight: 500;
  text-align: center;
  margin-bottom: calc(20/490*100%);
}

@media (max-width: 558px) {
  .ex_text {
    font-size: 3.58vw;
    margin-top: calc(5/464*100%);
    margin-bottom: calc(25/464*100%);
  }
}

.ex_notes {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 500;
  text-align: center;
  margin-top: calc(20/490*100%);
  color: var(--red);
  letter-spacing: calc(-30/490*1em);
}

@media (max-width: 558px) {
  .ex_notes {
    font-size: 3.0vw;
  }
}

.sec01_caution {
  width: calc(490/428*100%);
  background: var(--red);
  margin: calc(13/428*100%) auto calc(15/428*100%) calc(-31/428*100%);
}

@media (max-width: 558px) {
  .sec01_caution {
    margin: calc(13/428*100%) auto calc(20/428*100%) calc(-31/428*100%);
  }
}

.btn_set {
  width: calc(428/490*100%);
  margin: 0 auto;
  list-style: none;
}

.btn_set li {
  display: block;
  margin: calc(15/428*100%) auto 0;
}


/* ▽ セクション02 --------------*/

.sec02_bg {
  background: url(../img/sec02_bg.jpg) no-repeat center top / 100%;
  padding-bottom: calc(36/558*100%);
}

@media (max-width: 558px) {
  .sec02_bg {
    padding-bottom: calc(24/390*100%);
  }
}

.sec02_menber_wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px calc(18/490*100%);
}

.sec02_menber_wrap li {
  display: block;
  width: calc(236/490*100%);
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

.sec02_menber_wrap li:hover {
  opacity: .5;
}

.sec02_btn {
  width: calc(428/490*100%);
  margin: calc(17/490*100%) auto 0;
  display: block;
}

@media (max-width: 558px) {
  .sec02_btn {
    margin: calc(10/346*100%) auto 0;
  }
}


/* ▽ セクション03 --------------*/

#ebc #sec03 {
  background-color: var(--white);
  padding-top: calc(25/558*100%);
}

#ebc .sec03_ttl,
#ebc .sec03_ttl02 {
  font-size: 30px;
  font-weight: 500;
  color: #00998B;
  text-align: center;
  margin-bottom:calc(5/490*100%);
}

#ebc .sec03_ttl02 {
  margin-top:calc(40/490*100%);
}

@media (max-width: 558px) {
  #ebc .sec03_ttl,
  #ebc .sec03_ttl02 {
    font-size: 5.37vw;
  }

  #ebc .sec03_ttl02 {
    margin-top:calc(10/346*100%);
  }
}

#ebc .sec03_chuui_red {
  font-size: 17px;
  font-weight: 500;
  text-align: center;
  color: var(--red);
}

@media (max-width: 558px) {
  #ebc .sec03_chuui_red {
    font-size: 3.58vw;
    letter-spacing: calc(-10/558*1em);
  }
}

#ebc .sec03_chuui {
  list-style: none;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--text);
  margin-top: calc(15/490*100%);
}

@media (max-width: 558px) {
  #ebc .sec03_chuui {
    font-size: 3.58vw;
  }
}

#ebc .sec03_chuui li {
  text-indent: -1em;
  padding-left: 1em;
}

.sec03_kiyaku_wrap {
  overflow-y: scroll;
  overflow-x: hidden;
  width:100%; 
  height:35em;
  margin-top: calc(13/490*100%);
  padding: calc(10/490*100%) calc(20/490*100%) calc(10/490*100%) calc(31/490*100%) ;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--text);
  border: 1px solid #707070;
}

@media (max-width: 558px) {
  .sec03_kiyaku_wrap {
    font-size: 3.58vw;
  }
}

.sec03_kiyaku_wrap p + p {
  margin-top: 1em;
}

.sec03_kiyaku_ttl {
  font-size: 24px;
  text-align: center;
  margin-bottom: .5em;
}

@media (max-width: 558px) {
  .sec03_kiyaku_ttl {
    font-size: 4.3vw;
  }
}

.sec03_banner {
  margin-top: calc(40/558*100%);
  display: block;
}

@media (max-width: 558px) {
  .sec03_banner {
    margin-top: calc(30/390*100%);
  }
}

.btn_touhyou {
  width: calc(428/490*100%);
  margin: calc(17/490*100%) auto 0;
  display: block;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.btn_touhyou.is-disabled {
  filter: brightness(0.5);
  pointer-events: none;
}

@media (max-width: 558px) {
  .btn_touhyou {
    margin: calc(10/346*100%) auto 0;
  }
}

/* ▽ セクション04 --------------*/

#ebc #sec04 {
  background-color: #F4F6F6;
  color:var(--text);
  font-weight: 500;
  padding: calc(30/558*100%) 0 calc(40/558*100%);
}

.sec04_ttl {
  border-bottom: 1px solid #707070;
  margin-bottom: calc(25/490*100%);
  padding-bottom: calc(25/490*100%);
  font-size: 21px;
  line-height: 1.75;
  text-align: center;
}

@media (max-width: 558px) {
  .sec04_ttl {
    font-size: 3.76vw;
  }
}

.sec04_ttl span {
  font-size: 115%;
  font-weight: 700;
}

.sec04_text {
  padding: 0 1em;
  font-size: 19px;
  line-height: 1.37;
}

@media (max-width: 558px) {
  .sec04_text {
    font-size: 3.4vw;
  }
}

.sec04_text p + p {
  margin-top: 1em;
}


/* ▽ モーダル --------------*/

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none; /* ←これが効くようにする */
}

/* 表示時だけflex */
.modal.is-active {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* 背景 */
.modal_overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
}

/* 中身 */
.modal_content {
  position: relative;
  width: 100%;
  max-width: 558px;
  max-height: 80vh;
  background: #fff;
  border-radius: 20px;
  /* overflow: hidden; */
  overflow: visible;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

@media (max-width: 558px) {
  .modal_content {
    border-radius: 3.58vw;
  }
}

/* QR */
.modal_content.-qr {
  max-width: 705px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

@media (max-width: 705px) {
  .modal_content.-qr {
    padding: calc(30/705*100%);
    gap: 2.1vw;
  }
}

.qr_image {
  width: calc(350/705*100%);
  margin: 0 auto;
}

.qr_text {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
}

@media (max-width: 705px) {
  .qr_text {
    font-size: 3.22vw;
  }
}

.qr_text span {
  font-size: 133%;
  font-weight: bold;
}

.qr_text p + p {
  margin-top: .3em;
}
/* QR ここまで */

/* レシート */
.modal_content.-receipt {
  border-radius: 0;
  color: var(--brown);
  background-color: #eef9f8;
}

.l_receipt {
  padding: calc(34/558*100%);
}

@media (max-width: 558px) {
  .l_receipt {
    padding: calc(25/390*100%);
  }
}

.receipt_ttl {
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  line-height: 1.34;
}

@media (max-width: 558px) {
  .receipt_ttl {
    font-size: 5.6vw;
  }
}

.receipt_ttl span {
  font-size: 70%;
}

.receipt_lead {
  margin-top: calc(25/490*100%);
  font-size: 17px;
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
}

@media (max-width: 558px) {
  .receipt_lead {
    margin-top: calc(15/346*100%);
    font-size: 3.4vw;
    line-height: 1.33;
  }
}

.receipt_text {
  font-size: 17px;
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
}

@media (max-width: 558px) {
  .receipt_text {
    font-size: 3.4vw
  }
}

.receipt_order_wrap {
  width: calc(428/490*100%);
  margin: calc(20/490*100%) auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  list-style: none;
  gap: 20px;
}

@media (max-width: 558px) {
  .receipt_order_wrap {
    width: calc(300/346*100%);
    margin: calc(15/346*100%) auto;
    gap: 3.3vw;
  }
}

.receipt_order_wrap li {
  display: block;
  padding: 0;
  margin: 0;
}

.receipt_notes {
  list-style: none;
  margin-top: calc(25/482*100%);
  font-size: 17px;
  line-height: 1.4;
}

@media (max-width: 558px) {
  .receipt_notes {
    font-size: 3.0vw;
  }
}

.ex_wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap:22px calc(22/428*100%);
  list-style: none;
}

@media (max-width: 558px) {
  .ex_wrap {
    gap:3.8vw calc(22/428*100%);
  }
}

.ex_wrap li {
  width: calc(200/428*100%);
}

.ex_wrap02 {
  display: flex;
  flex-direction: column;
  gap:22px;
  list-style: none;
}

@media (max-width: 558px) {
  .ex_wrap02 {
    gap:3.8vw;
  }
}

.ex_wrap02 li {
  width: 100%;
}

/* 割り師紹介 */
.modal_content.-intro {
  background-color: #B8DEDC;
  color: var(--brown);
  padding: 15px 10px;
}

.intro_image {
  width: 100%;
  padding-top: calc(33/558*100%);
}

.intro_wrap {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap:7px;
  margin: calc(30/490*100%) auto 0;
  padding-bottom: calc(30/490*100%);
}

.intro_text {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 558px) {
  .intro_text {
    font-size: 4.4vw;
  }
}


.intro_wrap li {
  display: block;
}


/* スクロール領域 */
.modal_body {
  /* padding: 20px; */
  overflow-y: auto;
  /* max-height: calc(80vh - 60px);  */
  flex: 1;
}

/* 閉じるボタン */
.modal_close {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-110%); 

  font-size: 48px;
  font-weight: 100;
  color: var(--white);
  line-height: 1;
  border: none;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  z-index: 2;
}