@charset "UTF-8";

/* Commnon
============================*/
:root {
  --color-font: #333;
  --color-pink: #E6465A;
  --color-green: #32A064;
  --color-lightgreen: #D2DC46;
  --color-lightgreen02: #F1F4C7;
  --color-orange: #F0640A;
  --color-lightorange: #FAD2B4;
  --color-bg1: #FFF5E8;
  --color-bg2: #CCF0FF;
  --color-course01: #E63C33;
  --color-course02: #F0640A;
  --color-course03: #C84583;
  --color-course04: #E6BE1E;
  --color-course05: #A2C10A;

  --font-xlarge: min(3.75vw,72px);
  --font-large: min(2.08vw,40px);
  --font-middle: min(1.88vw,36px);
  --font-normal: min(1.35vw,26px);
  --notes: min(0.73vw,14px);

  --sp-font-xlarge: min(9.6vw,72px);
  --sp-font-large: min(6.67vw,50px);
  --sp-font-xmiddle: min(5.33vw,40px);
  --sp-font-middle: min(4.8vw,36px);
  --sp-font-normal: min(4.27vw,32px);
  --sp-font-small: min(3.2vw,24px);
  --sp-notes: min(2.67vw,20px);

}


/* Common
------------------------ */
*{box-sizing: border-box;}

.pane-contents * {
  font-family: 'Noto Sans JP', sans-serif;
}

.u-w-100p {
  width: 100%!important;
}

.u-ta-c {
  text-align: center;
}
.u-c-green{ color: var(--color-green)!important;}
.u-c-red{ color: var(--color-pink)!important;}
.u-sp-only {
  display: none;
}
.u-pc-only {
  display: block;
}
@media screen and (max-width: 768px) {
  .u-sp-only {
    display: block !important;
  }
  .u-pc-only {
    display: none !important;
  }
}

.c-heading {
  font-weight: bold;
}
.c-heading.-large {
  font-size: var(--font-large);
}
.c-heading.-middle {
  font-size: var(--font-middle);
}

.l-flex {
  display: flex;
}

.l-btn {
  text-align: center;
}
.c-btn {
  transition: all .4s;
}
.c-btn:hover {
  transition: all .4s;
  opacity: .8;
}

.l-wrapper {
  width: 100%;
  max-width: min(62.5vw,1200px);
  margin: auto;
}

.c-list.-mark-large li {
  position: relative;
}
.c-list.-mark-large li::before {
  content:"";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: #fff;
  border-radius: 50%;
  margin-right: min(0.16vw,3px);
}

.u-marker {
  background: linear-gradient(transparent 20%, var(--color-lightorange) 20%);
}

@media screen and (min-width: 1025px) {
  .c-tel {
    pointer-events: none;
    text-decoration: none;
    cursor: default;
  }
}
@media screen and (max-width: 768px) {
  .c-heading.-large {
    font-size: var(--sp-font-large);
  }
  .c-heading.-middle {
    font-size: var(--sp-font-xmiddle);
  }
  .l-flex {
    flex-wrap: wrap;
  }
  .l-wrapper {
    max-width: min(92vw,690px);
  }
  .c-list.-mark-large li::before {
    content:"";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: #fff;
    border-radius: 50%;
    margin-right: min(0.16vw,3px);
  }
}
/* ------------- 周りにこのような方はいませんか？ ----------- */
.l-concerns {
  position: relative;
  background: var(--color-bg1);
  padding: min(4.17vw,80px) 0;
}
.l-icon__arrow {
  position: relative;
}
.l-icon__arrow::after {
  content: " ";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: min(4.69vw,90px) solid transparent;
  border-right: min(4.69vw,90px) solid transparent;
  border-top: min(3.13vw,60px) solid var(--color-bg1);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.l-concerns .c-heading.-large {
  margin: 80px auto 40px;
}
.l-concerns .l-flex {
  justify-content: space-between;
}
.l-concerns .c-textbox {
  position: relative;
  width: min(19.43vw,373px);
  align-items: center;
  border-radius: 22px;
  padding-top: min(13.54vw,260px);
}
.l-concerns .c-textbox::before {
  content: " ";
  aspect-ratio: 1/1;
  width: min(15.63vw,300px);
  height: auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.l-concerns .c-textbox:nth-child(1):before {
  background: url(../../../img/usr/freepage/referral/concerns_img01.png)no-repeat top center / 100%;
}
.l-concerns .c-textbox:nth-child(2):before {
  background: url(../../../img/usr/freepage/referral/concerns_img02.png)no-repeat top center / 100%;
}
.l-concerns .c-textbox:nth-child(3):before {
  background: url(../../../img/usr/freepage/referral/concerns_img03.png)no-repeat top center / 100%;
}
.l-concerns .c-textbox p {
  font-size: var(--font-normal);
  font-weight: bold;
  line-height: calc(39/26);
  background: var(--color-lightgreen);
  text-align: center;
  padding: 14px;
  border-radius: 22px;
  position: relative;
  z-index: 1;
}
.l-concerns .l-btn {
  text-align: center;
}
@media screen and (max-width: 768px) {
  .l-concerns {
    padding: min(6.67vw,50px) 0 min(12vw,90px);
  }
  .l-icon__arrow::after {
    border-left: min(12vw,90px) solid transparent;
    border-right: min(12vw,90px) solid transparent;
    border-top: min(8vw,60px) solid var(--color-bg1);
  }

  .l-concerns .c-heading.-large {
    margin: min(12vw,90px) auto min(6.67vw,50px);
    line-height: calc(72/50);
  }
  .l-concerns .l-flex {
    justify-content: center;
    gap: min(6.67vw,50px) min(4vw,30px);
  }
  .l-concerns .c-textbox {
    border-radius: min(3.47vw,26px);
    padding-top: min(34.67vw,260px);
  }
  .l-concerns .c-textbox::before {
    width: min(40vw,300px);
  }
  .l-concerns .c-textbox:nth-child(1){
    width: min(53.33vw,400px);
  }
  .l-concerns .c-textbox:nth-child(2) {
    width: min(44vw,330px);
  }
  .l-concerns .c-textbox:nth-child(3) {
    width: min(44vw,330px);
  }
  .l-concerns .c-textbox p {
    font-size: var(--sp-font-normal);
    line-height: calc(48/32);
    letter-spacing: 0;
    padding: min(1.73vw,13px);
    border-radius: min(3.47vw,26px);
  }
}
/* ------------- 食宅便を紹介すると ----------- */
.l-about {
  padding: 100px 0 80px;
}
.l-about .c-heading.-middle {
  margin: 0 0 30px;
}
.l-about .c-img{
  position: relative;
  z-index: 3;
}
.l-about .c-img + .c-img {
  margin-top: min(2.08vw,40px);
}
@media screen and (max-width: 768px) {
  .l-about {
    padding: min(14.67vw, 110px) 0 min(12vw, 90px);
  }
  .l-about .c-heading.-middle{
    margin-bottom: min(3.47vw,26px);
  }
  .l-about .c-img + .c-img {
    margin-top: min(4vw,30px);
  }
}

/* 紹介の流れ
------------------------ */
.l-flow {
  background: var(--color-bg2);
  padding: min(4.17vw,80px) 0;
}
.l-flow .c-heading.-large {
  margin: 0 0 40px;
}
.c-stepbox {
  margin: 0 auto;
}
.c-stepbox + .c-stepbox {
  margin-top: min(6.25vw,120px);
  position:relative;
}
.c-stepbox + .c-stepbox::before {
  content:"";
  aspect-ratio:1/1;
  width:min(4.17vw,80px);
  height: auto;
  background: url(../../../img/usr/freepage/referral/icon_flow_arrow.png)no-repeat top left /100%;
  display: block;
  position: absolute;
  top: calc(-6.25vw/2);
  left: 50%;
  transform:translate(-50%,-50%);
}
.c-stepbox .c-heading.-middle {
  line-height: calc(52/36);
  text-align: center;
  background: var(--color-lightgreen);
  margin-bottom: 0;
  padding: 8px 0;
}
.c-stepbox .l-txtbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* padding: min(1.04vw,20px) min(2.08vw,40px); */
  padding: min(2.08vw, 40px);
  margin: 0;
  background: #fff;
  font-weight: bold;
  text-align: center;
}
.c-stepbox .c-txtbox.-left .c-ttl{
  font-size: var(--font-middle);
  letter-spacing: 0;
}
.l-tel{
  font-size: var(--font-middle);
  font-weight: bold;
  text-align: center;
}
.l-tel .c-comment{
  font-size: var(--font-normal);
  color: #fff;
  background: var(--color-orange);
  position: relative;
  width: fit-content;
  margin: min(1.77vw,34px) auto 0;
  padding: min(0.31vw,6px) min(1.35vw,26px) min(0.42vw,8px);
  border-radius: min(0.52vw,10px);
}
.l-tel .c-comment::after{
  content: " ";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: min(0.73vw,14px) solid transparent;
  border-right: min(0.73vw,14px) solid transparent;
  border-top: min(0.73vw,14px) solid var(--color-orange);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.l-tel .c-tel{
  font-size: var(--font-xlarge);
  color: var(--color-orange);
}
.l-tel .c-service_hours{
  font-size: var(--font-normal);
}
.l-tel .c-notes{
  font-size: var(--notes);
  font-weight: 400;
  margin-top: min(0.52vw,10px);
}
.c-stepbox .c-txtbox.-right {
  padding: min(1.45vw, 28px) min(2.08vw, 40px);
  background: var(--color-lightgreen02);
  font-size: var(--font-normal);
}
.c-stepbox .c-txtbox.-right .c-list{
  max-width: min(13.54vw, 260px);
  margin: 0 auto;
  text-align: left;
  letter-spacing: 0;
}
.c-stepbox .c-txtbox.-right .c-list li::before {
  content: "・";
  display: inline-block;
}
.c-stepbox .c-txtbox.-right .c-ttl{
  margin: 0 auto;
  position: relative;
}
.c-stepbox .c-txtbox.-right .c-ttl::after{
  content: "";
  aspect-ratio: 320/1;
  width: 100%;
  height: auto;
  background: var(--color-font);
  display: block;
  margin: min(1.2vw,23px) auto;
}
.c-stepbox .l-txtbox {
  border: 1px solid var(--color-lightgreen);
  border-top: none;
}
.c-stepbox:nth-child(n+2) .l-txtbox {
  justify-content: flex-end;
  position: relative;
  font-size: var(--font-middle);
}
.c-stepbox:nth-child(n+2) .l-txtbox::after {
  content:"";
  aspect-ratio: 500/260;
  width: min(26.04vw,500px);
  height: auto;
  display: block;
}
.c-stepbox:nth-child(2) .l-txtbox::after {
  background: url(../../../img/usr/freepage/referral/flow_step02_img.jpg)no-repeat top left/100%;
  margin-left: min(2.08vw,40px);
}
.c-stepbox:nth-child(3) .l-txtbox::after {
  background: url(../../../img/usr/freepage/referral/flow_step03_img.jpg)no-repeat top left/100%;
  margin-left: min(0.21vw,4px);
}
@media screen and (max-width: 768px) {
  .l-flow {
    padding: min(12vw, 90px) 0;
  }
  .l-flow .c-heading.-large {
    margin-bottom: min(6.67vw,50px);
  }
  .c-stepbox + .c-stepbox {
    margin-top: min(21.33vw,160px);
  }
  .c-stepbox + .c-stepbox::before {
    width:min(13.33vw,100px);
    top: calc(-21.33vw/2);
  }
  .c-stepbox .c-heading.-middle {
    line-height: calc(58/40);
    padding: min(1.86vw, 7px) 0 min(1.33vw, 5px);
  }
  .c-stepbox .l-txtbox {
    display: block;
    justify-content: center;
    align-items: flex-start;
    padding: min(4vw,30px);
    margin: 0;
  }
  .c-stepbox .c-txtbox.-left .c-ttl{
    font-size: var(--sp-font-xmiddle);
  }
  .c-stepbox .c-ttl{
    letter-spacing: 0;
  }
  .l-tel{
    font-size: var(--sp-font-xmiddle);
  }
  .l-tel .c-comment{
    font-size: var(--sp-font-normal);
    border-radius: min(1.6vw,12px);
    margin: min(5.33vw, 20px) auto 0;
    padding: min(0.8vw, 3px) min(3.2vw, 12px) min(1.33vw, 5px);
  }
  .l-tel .c-comment::after{
    border-left: min(1.6vw,12px) solid transparent;
    border-right: min(1.6vw,12px) solid transparent;
    border-top: min(1.6vw,12px) solid var(--color-orange);
  }
  .l-tel .c-tel{
    font-size: var(--sp-font-xlarge);
    line-height: calc(105/72);
  }
  .l-tel .c-service_hours{
    font-size: var(--sp-font-normal);
    letter-spacing: 0;
  }
  .l-tel .c-notes{
    font-size: var(--sp-notes);
    margin-top: min(2.67vw,20px);
  }
  .c-stepbox .c-txtbox.-right {
    padding: min(4vw,30px);
    font-size: var(--sp-font-normal);
    margin-top: min(4vw,30px);
  }
  .c-stepbox .c-txtbox.-right .c-list{
    max-width: min(42.67vw, 320px);
    font-feature-settings: "palt" 1;
  }
  .c-stepbox .c-txtbox.-right .c-ttl::after{
    aspect-ratio: 570/1;
    margin: min(4vw,30px) auto;
  }
  .c-stepbox:nth-child(n+2) .l-txtbox {
    font-size: var(--sp-font-xmiddle);
  }
  .c-stepbox:nth-child(n+2) .l-txtbox::after {
    aspect-ratio: 500/260;
    width: min(84vw,630px);
  }
  .c-stepbox:nth-child(2) .l-txtbox::after,
  .c-stepbox:nth-child(3) .l-txtbox::after {
    margin-left: 0;
    margin-top: min(4vw,30px);
  }
}

/* コース紹介
------------------------ */
.l-course {
  padding: min(4.17vw, 80px) 0;
}
.l-course .c-heading.-large {
  margin: 0 0 40px;
}
.c-course {
  border-radius: min(1.15vw, 22px);
  overflow: hidden;
}
.c-course a {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  transition: all .4s;
}
.c-course a:hover {
  transition: all .4s;
  text-decoration: none;
  background: rgba(255, 255, 255, 30%);
}
.c-course + .c-course{
  margin-top: min(2.08vw,40px);
}
.c-course .c-img{
  display: block;
  aspect-ratio: 440/258;
  width: 100%;
  max-width:min(22.92vw,440px);
  height: auto;
  /* border-radius: min(1.15vw, 22px) 0 0 min(1.15vw, 22px); */
  overflow: hidden;
}
.c-course figcaption{
  aspect-ratio: 760/258;
  width: 100%;
  max-width: min(39.58vw,760px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: min(1.56vw,30px) min(2.08vw,40px);
  /* border-radius: 0 min(1.15vw,22px) min(1.15vw,22px) 0; */
  /* background: #ccc; */
}
.c-course figcaption .c-heading{
  width: 100%;
  position: relative;
  text-align: center;
  color: #fff;
  margin: 0 auto;
  line-height: calc(52 / 36);
}
.c-course figcaption .c-heading::after{
  content: "";
  width: 100%;
  height: 3px;
  background: url(../../../img/usr/freepage/referral/line_dot.png)no-repeat top left / 100%;
  display: block;
  margin: min(1.56vw,30px) auto;
}
.c-course figcaption .c-list{
  width: 100%;
  font-weight: bold;
  color: #fff;
}
.c-course figcaption .c-list li{
  line-height: calc(36/26);
  font-size: var(--font-normal);
  margin: 0;
}
.c-course figcaption .c-list li + li{
  margin-top: min(0.52vw,10px);
}
.-omakase.c-course {
  background: var(--color-course01);
}
.-teitou.c-course {
  background: var(--color-course02);
}
.-tanpaku.c-course {
  background: var(--color-course03);
}
.-enbun.c-course {
  background: var(--color-course04);
}
.-yawaraka.c-course {
  background: var(--color-course05);
}
@media screen and (max-width: 768px) {
  .l-course {
    padding: min(12vw,90px) 0;
  }
  .l-course .c-heading.-large {
    margin-bottom: min(6.67vw,50px);
  }
  .c-course {
    aspect-ratio: 690 / 285;
    overflow: hidden;
    border-radius: min(3.47vw, 26px);
  }
  .c-course + .c-course{
    margin-top: min(4vw,30px);
  }
  .c-course .c-img{
    aspect-ratio: 310/284;
    max-width:min(44.93vw,310px);
  }
  .c-course figcaption{
    aspect-ratio: 380/284;
    max-width: min(50.67vw,380px);
    padding: min(2.67vw,20px) min(4vw,30px);
    border-radius: 0 min(3.47vw,26px) min(3.47vw,26px) 0;
  }
  .c-course figcaption .c-heading{
    font-size: var(--sp-font-middle);
    line-height: calc(52 / 36);
    letter-spacing: -0.02em;
    font-feature-settings: "palt" 1;
  }
  .c-course figcaption .c-heading::after{
    margin: min(2.67vw,20px) auto;
    background: url(../../../img/usr/freepage/referral/line_dot_sp.png)no-repeat top left / 100%;
    width: 100%;
    height: min(0.53vw,4px);
  }
  .c-course figcaption .c-list li{
    line-height: calc(36/24);
    font-size: var(--sp-font-small);
    padding-left: 1rem;
    text-indent: -1rem;
    letter-spacing: -0.02em;
    font-feature-settings: "palt" 1;
  }
  
  .c-course figcaption .c-list.-mark-large li::before {
    width: var(--sp-font-small);
    height: var(--sp-font-small);
  }
  .c-course figcaption .c-list li + li{
    margin-top: min(1.33vw,10px);
  }
}
/* FAQ
------------------------ */
.l-faq {
  padding: min(4.17vw,80px) 0;
  background: var(--color-bg1);
}
.l-faq .c-heading.-large {
  margin: 0 0 40px;
}
.c-faqlist{
  font-size: var(--font-normal);
  font-weight: bold;
  letter-spacing: 0;
}
.c-faqlist dt {
  width: 100%;
  display: inline-flex;
  align-items: first baseline;
}
.c-faqlist dd {
  width: 100%;
  display: inline-flex;
  align-items: first baseline;
}
.c-faqlist dt + dd {
  margin-top: min(0.94vw,18px);
}
.c-faqlist dd + dt {
  margin-top: min(1.72vw,34px);
}
.c-faqlist .c-icon {
  width: 100%;
  max-width: min(2.19vw,42px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: calc(37/26);
  border-radius: 50%;
  aspect-ratio: 1/1;
  margin-right: min(0.63vw,12px);
}
.c-faqlist .c-icon.-question {
  color: #fff;
  background: var(--color-orange);
}
.c-faqlist .c-icon.-answer {
  color: var(--color-orange);
  background: #fff;
  border: solid min(0.16vw,3px) var(--color-orange);
}
.c-faqlist dd .c-text p + p {
  margin-top: min(0.52vw,10px);
}
@media screen and (max-width: 768px) {
  .l-faq {
    padding: min(12vw,90px) 0;
  }
  .l-faq .c-heading.-large {
    margin-bottom: min(6.67vw,50px);
  }
  .c-faqlist{
    font-size: var(--sp-font-normal);
  }
  .c-faqlist dt + dd {
    margin-top: min(2.93vw,22px);
  }
  .c-faqlist dd + dt {
    margin-top: min(7.2vw,54px);
  }
  .c-faqlist .c-icon {
    max-width: min(6.67vw,50px);
    line-height: calc(46/32);
    margin-right: min(1.33vw,10px);
  }
  .c-faqlist .c-icon.-answer {
    border: solid min(0.4vw,3px) var(--color-orange);
  }
  .c-faqlist dd .c-text p + p {
    margin-top: min(2.67vw,20px);
  }
}

/* ページ下部リンク
------------------------ */
.l-contact {
  padding: min(4.17vw, 80px) 0 min(1.56vw, 30px);
}
.l-contact .l-tel .c-comment {
  font-size: var(--font-middle);
  padding: min(0.36vw,7px) min(1.77vw,34px) min(0.57vw,11px) min(1.98vw,38px);
  margin-top: min(3.13vw,60px);
  border-radius: min(0.72vw, 14px);
}
@media screen and (max-width: 768px) {
  .l-contact {
    padding: min(12vw,90px) 0;
  }
  .l-contact .l-tel .c-comment {
    width: min(64vw,480px);
    font-size: var(--sp-font-xmiddle);
    margin: min(5.33vw, 20px) auto 0;
    padding: min(0.8vw, 3px) 0 min(1.33vw, 5px);
    border-radius: min(2.13vw, 16px);
  }
}


/* 紙吹雪 */
.confetti {
  position: relative;
}

.confetti > span {
  display: block;
  position: absolute;
  opacity: 0;
}

.confetti > span > span {
  display: block;
  width: 100%;
  height: 100%; }

.confetti > span > span > span {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes rotateY {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* ====== 追従ボタン関連 ====== */
.banner-fixed {
  position: fixed;
  left: 0;
  bottom: -130px;
  z-index: 1020;
  width: 100%;
  transition: 0.3s;
}
.banner-fixed.is-show {
  bottom: 0;
}
.banner-fixed .l-btn {
  width: 100%;
  background: #fff;
  padding: min(1.3vw,25px) 0;
  box-shadow: 0 0 8px rgba(51, 51, 51, 0.3);
}
.banner-fixed .c-btn_friend img {
  max-width: 560px;
}
@media screen and (max-width: 768px) {
  .banner-fixed .l-btn {
    padding: min(2.6vw, 20px) 0;
  }
  .banner-fixed .c-btn_friend img {
    width: min(74.67vw,560px);
  }
}