@charset "UTF-8";
/*!
Theme Name: FELISSIMO お友だちご紹介キャンペーン
Theme URL: https://www.felissimo.co.jp/contents/referafriend/referafriend_fs.html
Description: FELISSIMO お友だちご紹介キャンペーンのスタイルシートです。
Text Domain: referafriend
Author: FELISSIMO
Version: 1.0.0
License: GPL v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
:root {
  --color-pink: #FFD3D9;
  --color-green: #CFF3DB;
  --color-yellow: #FFF38E;
  --color-button-pink: #ED5E7D;
  --color-button-green: #44C4AF;
}

:where(.referafriend_fc) h1, :where(.referafriend_fc) h2, :where(.referafriend_fc) h3, :where(.referafriend_fc) h4, :where(.referafriend_fc) h5, :where(.referafriend_fc) h6, :where(.referafriend_fc) p {
  margin: 0;
}
:where(.referafriend_fc) ul, :where(.referafriend_fc) ol, :where(.referafriend_fc) dl {
  margin: 0;
  padding: 0;
}
:where(.referafriend_fc) li {
  list-style: none;
}
:where(.referafriend_fc) img {
  display: block;
  max-width: 100%;
  height: auto;
}
:where(.referafriend_fc) a:hover {
  text-decoration: none;
}
:where(.referafriend_fc) a:focus {
  outline: none;
}
:where(.referafriend_fc) button:focus {
  outline: none;
}
:where(.referafriend_fc) button:focus-visible {
  outline: 5px auto -webkit-focus-ring-color;
}

#footercontent .fsc_gfooter__breadcrumb {
  display: none;
}

.button_fc {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  gap: 8px;
  border-radius: calc(infinity * 1px);
  border: 2px solid #000;
  padding: min(1.7679558011vw + 9.3701657459px, 32px) min(1.3259668508vw + 15.0276243094px, 32px) min(1.7679558011vw + 9.3701657459px, 32px);
  max-width: 495px;
  margin-inline: auto;
  text-align: center;
  background: #000;
  color: #fff;
  transition: background 0.2s linear, color 0.2s linear;
  margin-block-start: min(1.7679558011vw + 17.3701657459px, 40px);
}
.button_fc[data-color=pink] {
  background: var(--color-button-pink);
  border-color: var(--color-button-pink);
}
.button_fc[data-color=green] {
  background: var(--color-button-green);
  border-color: var(--color-button-green);
}
.button_fc::before {
  content: "";
}
.button_fc span {
  font-size: min(0.6629834254vw + 11.5138121547px, 20px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.button_fc span:is([data-step="2b"] *) {
  line-height: 1.8;
}
.button_fc svg {
  width: 32px;
}
.button_fc:is([data-step="2b"] *) {
  margin-block-start: 24px;
  padding-block: 16px;
}
@media (any-hover: hover) {
  .button_fc:hover {
    background: #fff;
    color: #000;
  }
  .button_fc:hover[data-color=pink] {
    color: var(--color-button-pink);
  }
  .button_fc:hover[data-color=green] {
    color: var(--color-button-green);
  }
}

.pageTop_fc {
  position: fixed;
  z-index: 10;
  right: 10px;
  bottom: 10px;
  width: 28px;
  height: 28px;
  transition: opacity 0.2s linear;
}
@media screen and (min-width: 769px) {
  .pageTop_fc {
    right: 20px;
    bottom: 20px;
    width: 40px;
    height: 40px;
  }
}
@media (any-hover: hover) {
  .pageTop_fc:hover {
    opacity: 0.8;
  }
}

/* -----------------------------------------------------------------------
## MV ##################################################
----------------------------------------------------------------------- */
.mv_fc {
  overflow: hidden;
}

.mv__bg_fc {
  position: relative;
  padding-block: min(3.3149171271vw + 17.5690607735px, 60px) max(-9.9447513812vw + 147.2928176796px, 20px);
  padding-inline: 6.4%;
  background: var(--color-pink) url(../images/bg-mv.png) no-repeat center center/cover;
}
.mv__bg_fc::after {
  position: absolute;
  top: calc(100% - 2px);
  left: 0;
  z-index: 1;
  display: block;
  content: "";
  width: 100%;
  height: 10.6666666667vw;
  background: url(../images/arch_sp.png) no-repeat center top/cover;
}
@media screen and (min-width: 769px) {
  .mv__bg_fc::after {
    height: 10.4166666667vw;
    background: url(../images/arch_pc.png) no-repeat center top/cover;
  }
}

.pageTitle_fc {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  margin-block-end: min(1.7679558011vw + 17.3701657459px, 40px);
}

@keyframes moveSp {
  0% {
    background-image: url(../images/deco-mv01_sp.png);
  }
  33.3333333333% {
    background-image: url(../images/deco-mv02_sp.png);
  }
  66.6666666667% {
    background-image: url(../images/deco-mv03_sp.png);
  }
}
@keyframes movePc {
  0% {
    background-image: url(../images/deco-mv01_pc.png);
  }
  33.3333333333% {
    background-image: url(../images/deco-mv02_pc.png);
  }
  66.6666666667% {
    background-image: url(../images/deco-mv03_pc.png);
  }
}
.mv__illust_fc {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  gap: min(2.2099447514vw + 11.7127071823px, 40px);
}
.mv__illust_fc [src*="illust.svg"] {
  width: min(37.7900552486vw + 66.2872928177px, 550px);
}
.mv__illust_fc [src*="illust-text01.svg"],
.mv__illust_fc [src*="illust-text02.svg"] {
  width: min(2.4309392265vw + 12.8839779006px, 44px);
}
.mv__illust_fc::before {
  position: absolute;
  top: max(-5.5248618785vw + -15.2817679558px, -86px);
  left: 50%;
  transform: translateX(-50%);
  width: min(91.1602209945vw + -0.8508287293px, 1166px);
  height: min(64.5303867403vw + -0.9889502762px, 825px);
  content: "";
  background: url(../images/deco-mv01_sp.png) no-repeat center top/cover;
  animation: moveSp 4s steps(1) infinite;
}
@media screen and (min-width: 769px) {
  .mv__illust_fc::before {
    width: min(48.6187845304vw + 477.679558011px, 1100px);
    height: min(22.8729281768vw + 226.226519337px, 519px);
    background: url(../images/deco-mv_pc.png) no-repeat center top/cover;
    animation: movePc 4s steps(1) infinite;
  }
}

.coupon_fc {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 24px;
  justify-items: center;
  box-sizing: content-box;
  max-width: 1024px;
  margin-inline: auto;
  margin-block-start: min(11.9337016575vw + -132.7513812155px, 20px);
  padding-inline: 6.4%;
}
.coupon_fc [src*="/text-coupon.svg"] {
  width: min(13.0386740331vw + 170.1049723757px, 337px);
  margin-inline: auto;
}
.coupon_fc [src*="/coupon.svg"] {
  width: 100%;
  max-width: 558px;
  margin-inline: auto;
}

.coupon__text_fc {
  font-size: calc(14/16 * 1rem);
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-weight: 700;
  text-align: center;
}

/* -----------------------------------------------------------------------
## FLOW ##################################################
----------------------------------------------------------------------- */
.flow_fc {
  padding-block-start: min(2.2099447514vw + 51.7127071823px, 80px);
}

.flow__heading_fc {
  width: min(32.4861878453vw + 172.1767955801px, 588px);
  margin-inline: auto;
}
.flow__heading_fc picture {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}

.tab_fc {
  position: relative;
  display: flex;
  justify-content: center;
  gap: min(2.2099447514vw + 11.7127071823px, 40px);
  margin-block: min(11.0497237569vw + 38.5635359116px, 180px) -2px;
}
@media screen and (min-width: 769px) {
  .tab_fc {
    margin-block-end: -4px;
  }
}
.tab_fc::before {
  position: absolute;
  bottom: calc(100% + 28px);
  left: 0;
  right: 0;
  content: "";
  width: min(16.5745856354vw + 17.8453038674px, 230px);
  height: min(2.8729281768vw + 3.226519337px, 40px);
  margin-inline: auto;
  background: url(../images/arrow_sp.svg) no-repeat center 0/contain;
}
@media screen and (min-width: 769px) {
  .tab_fc::before {
    bottom: calc(100% + 52px);
    background: url(../images/arrow_pc.svg) no-repeat center 0/contain;
  }
}
.tab_fc [data-tab=invite] {
  background-color: var(--color-yellow);
}
.tab_fc [data-tab=invite]::before {
  width: min(6.8508287293vw + 24.3093922652px, 112px);
  content: "";
  background: url(../images/dog.svg) no-repeat center 0/contain;
}
.tab_fc [data-tab=invited] {
  background-color: var(--color-green);
}
.tab_fc [data-tab=invited]::before {
  width: min(7.4033149171vw + 25.2375690608px, 120px);
  content: "";
  background: url(../images/cat.svg) no-repeat center 0/contain;
}
.tab_fc img {
  height: min(0.9944751381vw + 9.270718232px, 22px);
  width: auto;
}
.tab_fc svg {
  width: min(0.4419889503vw + 14.3425414365px, 20px);
}

.tab__btn_fc {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: min(1.7679558011vw + 1.3701657459px, 24px);
  border-radius: 10px 10px 0 0;
  border: 2px solid #000;
  padding: min(1.3259668508vw + 15.0276243094px, 32px) min(1.3259668508vw + 15.0276243094px, 32px) min(1.1049723757vw + 13.8563535912px, 28px);
}
@media screen and (min-width: 769px) {
  .tab__btn_fc {
    width: 40%;
    max-width: 420px;
    border-width: 4px;
  }
}
.tab__btn_fc::before {
  position: absolute;
  bottom: calc(100% - 8px);
  left: 0;
  right: 0;
  content: "";
  height: min(9.9447513812vw + 32.7071823204px, 160px);
  margin-inline: auto;
  pointer-events: none;
}
@media screen and (min-width: 769px) {
  .tab__btn_fc::before {
    bottom: calc(100% - 16px);
  }
}
.tab__btn_fc:is([aria-selected=true]) {
  padding-block-end: min(1.3259668508vw + 15.0276243094px, 32px);
  border-block-end: none;
}

[role=tabpanel]:is(.referafriend_fc *) {
  padding-block: min(4.4198895028vw + 23.4254143646px, 80px);
  padding-inline: 6.4%;
  border-block-start: 2px solid #000;
  background-image: url(../images/bg-tab-contents_sp.png);
  background-repeat: no-repeat;
  background-position: center min(3.3149171271vw + 7.5690607735px, 50px);
  background-size: min(31.3812154696vw + 166.320441989px, 568px) auto;
}
@media screen and (min-width: 769px) {
  [role=tabpanel]:is(.referafriend_fc *) {
    border-width: 4px;
    background-image: url(../images/bg-tab-contents_pc.png);
    background-size: 1221px auto;
  }
}

.invite_fc {
  background-color: var(--color-yellow);
}

.invited_fc {
  background-color: var(--color-green);
}

.target_fc {
  display: grid;
  gap: min(0.4419889503vw + 2.3425414365px, 8px);
  justify-items: center;
  margin-block-end: max(-2.7624309392vw + -4.6408839779px, -40px);
}

.fukidashi_fc {
  width: min(5.9668508287vw + 89.6243093923px, 166px);
  height: auto;
}
.fukidashi_fc + [src*="/dog.svg"] {
  width: min(3.0939226519vw + 44.3977900552px, 84px);
}
.fukidashi_fc + [src*="/cat.svg"] {
  width: min(3.3149171271vw + 47.5690607735px, 90px);
}

.whiteBox_fc {
  border-radius: 10px;
  max-width: 1024px;
  margin-inline: auto;
  background-color: #fff;
  border: 2px solid #000;
  padding: min(6.1878453039vw + 0.7955801105px, 80px);
}
@media screen and (min-width: 769px) {
  .whiteBox_fc {
    border-radius: 20px;
    border: 4px solid #000;
  }
}
.whiteBox_fc .entry_button_fc {
  margin-block-start: min(1.7679558011vw + 17.3701657459px, 40px);
}
.whiteBox_fc + .whiteBox_fc {
  margin-block-start: min(1.7679558011vw + 17.3701657459px, 40px);
}

.whiteBox__heading_fc {
  display: grid;
  justify-content: center;
  margin-block-end: min(1.7679558011vw + 17.3701657459px, 40px);
}
@media screen and (min-width: 769px) {
  .whiteBox__heading_fc img {
    width: 150px;
  }
}

.whiteBox__text_fc {
  text-align: center;
  font-size: min(1.1049723757vw + 9.8563535912px, 24px);
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.whiteBox__attentions_fc {
  max-width: 600px;
  margin-inline: auto;
  margin-block-start: min(1.7679558011vw + 17.3701657459px, 40px);
}

.whiteBox__attention_fc {
  font-size: min(0.2209944751vw + 11.1712707182px, 14px);
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-weight: 500;
}

[src*="/img-step02a.png"]:is(.whiteBox_fc *) {
  margin-block-start: min(1.7679558011vw + 17.3701657459px, 40px);
  margin-inline: auto;
  border-radius: 10px;
}
@media screen and (min-width: 769px) {
  [src*="/img-step02a.png"]:is(.whiteBox_fc *) {
    border-radius: 20px;
  }
}

.whiteBox__column_fc {
  display: grid;
  gap: min(6.1878453039vw + 0.7955801105px, 80px);
}
@media screen and (min-width: 769px) {
  .whiteBox__column_fc {
    align-items: center;
    grid-template-columns: 1fr 1fr;
  }
}

.whiteBox__coupon_fc {
  display: grid;
  gap: min(1.7679558011vw + 17.3701657459px, 40px);
  justify-items: center;
  margin-block-start: min(1.7679558011vw + 17.3701657459px, 40px);
  background: url(../images/bg-coupon_sp.svg) no-repeat center bottom/72.7272727273% auto;
}
@media screen and (min-width: 769px) {
  .whiteBox__coupon_fc {
    justify-content: center;
    gap: 40px 5.6074766355%;
    grid-template-columns: auto 60.7476635514%;
    grid-template-rows: auto auto;
    grid-template-areas: "arrow arrow" "char coupon";
    background: url(../images/bg-coupon_pc.svg) no-repeat right 44px/96.6121495327% auto;
  }
}
.whiteBox__coupon_fc picture {
  display: block;
}
@media screen and (min-width: 769px) {
  .whiteBox__coupon_fc picture {
    grid-area: arrow;
  }
}
.whiteBox__coupon_fc picture img {
  width: min(1.4364640884vw + 17.6132596685px, 36px);
}
.whiteBox__coupon_fc [src*="/coupon-1500.png"] {
  width: 100%;
  max-width: 520px;
}
@media screen and (min-width: 769px) {
  .whiteBox__coupon_fc [src*="/coupon-1500.png"] {
    grid-area: coupon;
  }
}
.whiteBox__coupon_fc [src*="/dog.svg"] {
  width: min(7.7348066298vw + 40.9944751381px, 140px);
  height: auto;
}
@media screen and (min-width: 769px) {
  .whiteBox__coupon_fc [src*="/dog.svg"] {
    grid-area: char;
  }
}
.whiteBox__coupon_fc [src*="/cat.svg"] {
  width: min(8.2872928177vw + 43.9226519337px, 150px);
  height: auto;
}
@media screen and (min-width: 769px) {
  .whiteBox__coupon_fc [src*="/cat.svg"] {
    grid-area: char;
  }
}
@media screen and (min-width: 769px){
  .whiteBox__coupon_fc picture {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
  }
  .whiteBox__coupon_fc [src*="/coupon-1500.png"] {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
  .whiteBox__coupon_fc [src*="/dog.svg"] {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  .whiteBox__coupon_fc [src*="/cat.svg"] {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
}

.whiteBox__link_fc {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  margin-block-start: 24px;
  font-size: min(0.2209944751vw + 13.1712707182px, 16px);
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--color-button-pink);
  text-decoration: underline;
}
@media screen and (min-width: 769px) {
  .whiteBox__link_fc {
    margin-inline: 0;
    color: #000;
  }
}
@media (any-hover: hover) {
  .whiteBox__link_fc:hover {
    color: var(--color-button-pink);
    text-decoration: none;
  }
}

@media screen and (max-width: 768px) {
  .whiteBox_fc .fsc_entry-result__box {
    width: auto;
  }
}

@media screen and (max-width: 768px) {
  .whiteBox_fc .fsc_entry-result__sns > ul {
    width: auto;
  }
}

.other_fc {
  max-width: 1024px;
  margin-inline: auto;
  margin-block-start: min(4.4198895028vw + 23.4254143646px, 80px);
}

.other__heading_fc {
  display: grid;
  justify-content: center;
}

.other__inner_fc {
  display: grid;
  gap: min(0.8839779006vw + 12.6850828729px, 24px) min(3.0939226519vw + 4.3977900552px, 44px);
  justify-content: center;
  margin-block-start: min(1.7679558011vw + 17.3701657459px, 40px);
  border-radius: 10px;
  background-color: #fff;
  padding: min(6.1878453039vw + 0.7955801105px, 80px);
}
@media screen and (min-width: 769px) {
  .other__inner_fc {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    border-radius: 20px;
  }
}
.other__inner_fc .button_fc {
  width: 100%;
  max-height: 88px;
  margin: 0;
}
.other__inner_fc span:is(.button_fc *) {
  font-size: min(0.4419889503vw + 10.3425414365px, 16px);
}

.other__text_fc {
  text-align: center;
  font-size: min(1.1049723757vw + 9.8563535912px, 24px);
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  .other__text_fc {
    text-align: left;
  }
}

[src*="/img-other.png"]:is(.other__inner_fc *) {
  grid-row: span 2;
}

.other__banner_fc {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  margin-block-start: min(1.7679558011vw + 17.3701657459px, 40px);
  transition: opacity 0.2s linear;
}
@media (any-hover: hover) {
  .other__banner_fc:hover {
    opacity: 0.8;
  }
}

/* -----------------------------------------------------------------------
## 注意事項 ##################################################
----------------------------------------------------------------------- */
.attention_fc {
  background-color: #fff;
  padding: min(2.2099447514vw + 51.7127071823px, 80px) 6.4% 0;
}

.attention__heading_fc {
  width: 17.0666666667%;
  max-width: 96px;
  margin-inline: auto;
  margin-block-end: calc(24/16 * 1rem);
}
.attention__heading_fc img {
  width: 100%;
  height: auto;
}

.attention__body_fc {
  max-width: 1024px;
  margin-inline: auto;
  border: 2px solid #000;
  border-radius: 10px;
  background-color: #fff;
  padding: min(6.1878453039vw + 0.7955801105px, 80px);
}
@media screen and (min-width: 769px) {
  .attention__body_fc {
    border-width: 4px;
    border-radius: 20px;
  }
}

.attention__title_fc {
  font-size: min(1.1049723757vw + 9.8563535912px, 24px);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin-block-end: 16px;
}
.attention__title_fc:is(.attentionList_fc + *) {
  margin-block-start: 24px;
}

.attentionList_fc {
  display: grid;
  gap: 1.3333333333em;
  font-size: min(0.2209944751vw + 11.1712707182px, 14px);
}

.attentionList__item_fc {
  line-height: 2;
  list-style: none;
  letter-spacing: 0.05em;
  font-feature-settings: initial;
}

/* -----------------------------------------------------------------------
## カタログ無料プレゼント ##################################################
----------------------------------------------------------------------- */
.catalog_fc {
  display: grid;
  justify-content: center;
  padding: min(2.2099447514vw + 51.7127071823px, 80px) 6.4%;
}

.catalog__heading_fc {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  margin-block-end: calc(40/16 * 1rem);
}
.catalog__heading_fc picture {
  width: 70.6422018349%;
}

.catalog__banner_fc {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.2s linear;
}
@media (any-hover: hover) {
  .catalog__banner_fc:hover {
    opacity: 0.8;
  }
}

.u-spbr_fc {
  display: inline;
}
@media screen and (min-width: 769px) {
  .u-spbr_fc {
    display: none;
  }
}

.u-pcbr_fc {
  display: none;
}
@media screen and (min-width: 769px) {
  .u-pcbr_fc {
    display: inline;
  }
}

.u-sp-center_fc {
  text-align: center;
}
@media screen and (min-width: 769px) {
  .u-sp-center_fc {
    text-align: left;
  }
}

@media screen and (min-width: 769px) {
  .u-pc-center_fc {
    text-align: center;
  }
}