@charset "utf-8";

:root {
  --color: #231815;
  --color01: #e50012;
  --color02: #f3f2e8;
  --color03: #fbfbf7;
  --color04: #a89990;
  --fontYG: "游ゴシック", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic", "メイリオ", "Meiryo", "Noto Sans", "Noto Sans CJK JP", "system-ui", sans-serif;
  --fontTSUKU: fot-tsukuardgothic-std, sans-serif;
  --fontBBB: "Gothic Medium BBB";
  --fontCL: "Cinema Letter";
  --side-gap-top: 16px;
  --side-gap-bottom: 16px;
  --bottom-bg-h: 129px;
}

.fca_cat-hero {
  overflow: visible;
}

.sr_page-shopping-result__free {
  overflow: visible;
}

.iamwithyou_ct .pc {
  display: block;
}

.iamwithyou_ct .sp {
  display: none;
}

.iamwithyou_ct * {
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
}

.iamwithyou_ct a {
  text-decoration: none;
  transition: all 0.2s ease;
}

.iamwithyou_ct a:hover,
.iamwithyou_ct button:hover {
  opacity: 0.7;
}

.iamwithyou_ct ul {
  padding-left: 0;
}

.iamwithyou_ct p {
  margin-top: 0;
  margin-bottom: 0;
}

.iamwithyou_ct img {
  height: auto;
  max-width: 100%;
  width: 100%;
}

.iamwithyou_ct button {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none;
  height: 100%;
  width: 100%;
}

.iamwithyou_ct video {
  height: auto;
  width: 100%;
}

.iamwithyou_ct {
  background-color: var(--color02);
  color: var(--color);
  display: flex;
  font-family: var(--fontTSUKU);
  font-feature-settings: "palt";
  font-variant-ligatures: no-common-ligatures;
  justify-content: center;
  letter-spacing: 0.08em;
  position: relative;
  --inset-top: 0px;
  --frame-h: calc(90svh - var(--inset-top));
  margin: 0 calc(50% - 50vw);
  width: 100vw;
}

.iamwithyou__inner_ct {
  max-width: 396px;
  padding-top: 3.294%;
  position: relative;
  --inset-top: 0px;
  --frame-h: calc(90svh - var(--inset-top));
  overflow: hidden;
  width: 100%;
  z-index: 2;
}

.iamwithyou-content__container_ct {
  border-radius: 30px;
  height: var(--frame-h);
  max-width: 396px;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.iamwithyou-content__frame_ct {
  position: relative;
  height: calc(var(--frame-h) + 1px);
}

.iamwithyou-content__frame_ct::before,
.iamwithyou-content__frame_ct::after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.iamwithyou-content__frame_ct::after {
  border-radius: 30px;
  border: 8px solid var(--color01);
  height: 100%;
  width: 100%;
  z-index: 9;
}

.iamwithyou-content__frame_ct::before {
  border-radius: 29px;
  border: 5px solid #fff;
  height: 99.7%;
  width: 99.3%;
  z-index: 99;
}

.iamwithyou-content__scroll_ct {
  will-change: transform;
}

.iamwithyou-content_ct {
  max-width: 396px;
  width: 100%;
}

.iamwithyou-logo__wrap_ct,
.iamwithyou-index__wrap_ct {
  max-width: 455px;
  position: relative;
  width: 33.333333333333%;
  z-index: 20;
}

.iamwithyou-bg_ct {
  position: absolute;
  left: 0;
  bottom: 0;
  height: var(--bottom-bg-h, 0px);
  width: 100%;
  background-color: var(--color01);
  z-index: 0;
}

.iamwithyou-bg_ct.is-fixed {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
}

/*----------------------------------
  iamwithyou-logo__wrap_ct
----------------------------------*/
.iamwithyou-logo__wrap_ct {
  margin-top: 18.544%;
}

.iamwithyou-logo_ct {
  align-items: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-bottom: var(--bottom-bg-h, 0px);
  position: -webkit-sticky;
  position: sticky;
  top: 27.222%;
  left: 0;
}

.iamwithyou-logo__item_ct {
  width: 34.725%;
}

/*----------------------------------
  iamwithyou-body_ct
----------------------------------*/
.iamwithyou-body_ct {
  background-color: var(--color02);
  padding-bottom: 10.769%;
}

/* iamwithyou-header_ct */
.iamwithyou-header_ct {
  background-color: var(--color01);
  padding-top: 5.128%;
  padding-bottom: 13.846%;
  position: relative;
}

.iamwithyou-header_ct .iamwithyou-header__text_ct {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  line-height: 1.7;
  letter-spacing: 0.105em;
  margin-top: 5.128%;
  text-align: center;
}

.iamwithyou-header__label_ct {
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  width: 27.435%;
}

.iamwithyou-header_ct .iamwithyou-header__label__link_ct:hover {
  opacity: 1;
}

/* iamwithyou-lineup_ct */
.iamwithyou-lineup_ct {
  padding-top: 10.256%;
}

.iamwithyou-lineup__items_ct {
  margin-top: 1.282%;
  margin-left: auto;
  margin-right: auto;
  width: 93.589%;
}

.iamwithyou-lineup__item_ct {
  position: relative;
}

.iamwithyou-lineup__item_ct:not(:first-child) {
  margin-top: 6.027%;
}

.iamwithyou-lineup__item_ct::before {
  background-image: url(../images/lineup-bg_01.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  content: "";
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
}

.iamwithyou-lineup__subtitle_ct {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 52.054%;
  z-index: 3;
}

.iamwithyou-lineup_ct .iamwithyou-lineup__lead_ct {
  font-size: 12px;
  font-weight: 700;
  color: var(--color01);
  line-height: 1.16;
  letter-spacing: 0.105em;
  margin-top: -1.369%;
  text-align: center;
}

.iamwithyou-lineup__kits_ct {
  align-items: flex-end;
  display: flex;
  justify-content: center;
}

.iamwithyou-lineup__kit_ct {
  position: relative;
}

.iamwithyou-lineup__num_ct {
  position: absolute;
}

.iamwithyou-lineup__name_ct {
  position: absolute;
  transform-origin: bottom;
  transition: all 0.2s ease;
}

.iamwithyou-lineup__kit_ct a:hover {
  opacity: 1;
}

.iamwithyou-lineup__kit__01_ct a:hover .iamwithyou-lineup__num_ct {
  content: url(../images/num-color_01.svg);
}

.iamwithyou-lineup__kit__02_ct a:hover .iamwithyou-lineup__num_ct {
  content: url(../images/num-color_02.svg);
}

.iamwithyou-lineup__kit__03_ct a:hover .iamwithyou-lineup__num_ct {
  content: url(../images/num-color_03.svg);
}

.iamwithyou-lineup__kit__04_ct a:hover .iamwithyou-lineup__num_ct {
  content: url(../images/num-color_04.svg);
}

.iamwithyou-lineup__kit__05_ct a:hover .iamwithyou-lineup__num_ct {
  content: url(../images/num-color_05.svg);
}

.iamwithyou-lineup__kit_ct a:hover .iamwithyou-lineup__name_ct {
  transform: scale(1.04);
}

.iamwithyou-lineup__01_ct.iamwithyou-lineup__item_ct {
  padding-bottom: 3.287%;
}

.iamwithyou-lineup__01_ct .iamwithyou-lineup__subtitle_ct::after {
  background-image: url(../images/tool.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  padding-top: 26.562%;
  width: 26.424%;
}

.iamwithyou-lineup__01_ct .iamwithyou-lineup__kits_ct {
  margin-top: 3.287%;
}

.iamwithyou-lineup__kit__01_ct.iamwithyou-lineup__kit_ct,
.iamwithyou-lineup__kit__04_ct.iamwithyou-lineup__kit_ct {
  width: 49.315%;
}

.iamwithyou-lineup__kit__02_ct.iamwithyou-lineup__kit_ct,
.iamwithyou-lineup__kit__05_ct.iamwithyou-lineup__kit_ct {
  width: 43.835%;
}

.iamwithyou-lineup__kit__03_ct.iamwithyou-lineup__kit_ct {
  margin-left: auto;
  margin-right: auto;
  width: 93.151%;
}

.iamwithyou-lineup__02_ct.iamwithyou-lineup__item_ct {
  padding-bottom: 9.863%;
}

.iamwithyou-lineup__02_ct.iamwithyou-lineup__item_ct::before {
  background-image: url(../images/lineup-bg_02.svg);
}

.iamwithyou-lineup__kit__01_ct .iamwithyou-lineup__num_ct {
  left: 7.397%;
  bottom: 3%;
  width: 14.444%;
}

.iamwithyou-lineup__kit__01_ct .iamwithyou-lineup__name_ct {
  left: 27.444%;
  bottom: 0;
  width: 43.333%;
}

.iamwithyou-lineup__kit__02_ct .iamwithyou-lineup__num_ct {
  left: 0;
  bottom: 3%;
  width: 16.25%;
}

.iamwithyou-lineup__kit__02_ct .iamwithyou-lineup__name_ct {
  left: 21.875%;
  bottom: 0;
  width: 71.25%;
}

.iamwithyou-lineup__kit__03_ct .iamwithyou-lineup__num_ct {
  left: 52.941%;
  bottom: 31.506%;
  width: 7.647%;
}

.iamwithyou-lineup__kit__03_ct .iamwithyou-lineup__name_ct {
  left: 63.088%;
  bottom: 28.767%;
  width: 25%;
}

.iamwithyou-lineup__kit__04_ct .iamwithyou-lineup__num_ct {
  left: 7.397%;
  bottom: 3%;
  width: 14.444%;
}

.iamwithyou-lineup__kit__04_ct .iamwithyou-lineup__name_ct {
  left: 27.444%;
  bottom: 0;
  width: 51.666%;
}

.iamwithyou-lineup__kit__05_ct .iamwithyou-lineup__num_ct {
  left: 0;
  bottom: 2.083%;
  width: 16.25%;
}

.iamwithyou-lineup__kit__05_ct .iamwithyou-lineup__name_ct {
  left: 23.444%;
  bottom: 6.25%;
  width: 51.25%;
}

/* iamwithyou-campaign_ct */
.iamwithyou-campaign_ct {
  margin-top: 5.128%;
  padding-top: 7.179%;
  position: relative;
}

.iamwithyou-campaign_ct::before {
  background-color: var(--color03);
  border-radius: 8px;
  content: "";
  padding-top: 20.512%;
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(23deg);
  transform-origin: left;
  position: absolute;
  width: 14.615%;
  z-index: 1;
}

.iamwithyou-campaign__text_ct {
  font-size: 12px;
  font-weight: 700;
  color: var(--color01);
  line-height: 1.66;
  letter-spacing: 0.025em;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 89.743%;
  z-index: 2;
}

.iamwithyou-campaign__text_ct strong {
  font-size: 18px;
}

.iamwithyou-campaign__text_ct::before,
.iamwithyou-campaign__text_ct::after {
  background-image: url(../images/campaign-bg.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  content: "";
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 5.714%;
}

.iamwithyou-campaign__text_ct::after {
  transform: rotate(180deg);
  left: auto;
  right: 0;
}

.iamwithyou-campaign_ct .iamwithyou-campaign__note_ct {
  font-size: 10px;
  font-weight: 700;
  color: var(--color);
  line-height: 1.8;
  letter-spacing: 0.065em;
  text-align: center;
  margin-top: 4.102%;
}

/* iamwithyou-products_ct */
.iamwithyou-products_ct {
  margin-top: 8.974%;
}

.iamwithyou-product_ct {
  color: var(--color01);
  margin-left: auto;
  margin-right: auto;
  width: 88.205%;
}

.iamwithyou-product__img_ct {
  position: relative;
  pointer-events: none;
}

.iamwithyou-products__border__svg_ct {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.iamwithyou-products__border__path_ct {
  stroke: var(--color01);
  stroke-width: 1.5;
  stroke-dasharray: var(--length);
  stroke-dashoffset: calc(1 * var(--length));
  transition: stroke-dashoffset 2s ease;
}

.iamwithyou-products__border__path_ct.draw {
  stroke-dashoffset: 0;
}

.iamwithyou-text__anim_ct {
  display: block;
}

.iamwithyou-text__mask__path_ct {
  fill: none;
  stroke: #fff;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.iamwithyou-text__trigger__path_ct {
  fill: none;
  stroke: transparent;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.is-drawing {
  -webkit-animation: draw-line 2s ease forwards;
  animation: draw-line 2s ease forwards;
}

@-webkit-keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

.st1 {
  fill: var(--color01);
}

.st2 {
  fill: none;
  stroke: var(--color01);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

.st2.is-active {
  opacity: 1;
  -webkit-animation: draw-st2 0.8s ease forwards;
  animation: draw-st2 0.8s ease forwards;
}

@-webkit-keyframes draw-st2 {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes draw-st2 {
  to {
    stroke-dashoffset: 0;
  }
}

.iamwithyou-products__num_ct {
  position: absolute;
  width: 11.627%;
}

.iamwithyou-products__text_ct {
  position: absolute;
}

.iamwithyou-product__cap_ct {
  margin-top: 3.488%;
  position: relative;
}

.iamwithyou-product__name_ct {
  margin-left: auto;
  margin-right: auto;
  width: 63.372%;
}

.iamwithyou-product__details_ct {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 2.282%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 56.395%;
  z-index: 2;
}

.iamwithyou-product__detail_ct {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.iamwithyou-product__detail_ct:not(:first-child) {
  margin-top: 9.183%;
}

.iamwithyou-product__detail__jp_ct .iamwithyou-product__price_ct {
  padding-top: 0.9em;
}

.iamwithyou-product__price_ct {
  font-family: var(--fontCL);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.085em;
  text-align: center;
}

.iamwithyou-product__tax_ct {
  font-family: var(--fontCL);
  font-size: 10px;
  display: block;
}

.iamwithyou-product__btn__link_ct {
  align-items: center;
  background-color: #fff;
  border-radius: 0.53em;
  border: 0.06em solid var(--color01);
  color: var(--color01);
  display: flex;
  font-size: 15px;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  letter-spacing: 0.025em;
  height: 1.8em;
  width: 4.2em;
}

.iamwithyou-product__btn__link_ct:hover {
  background-color: var(--color01);
  border: 0.06em solid #fff;
  color: #fff;
}

.iamwithyou-product__label_ct {
  font-family: var(--fontTSUKU);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.025em;
}

.iamwithyou-product__label_ct span {
  display: inline-block;
  text-align: center;
  width: 4.5em;
}

.iamwithyou-product__01_ct .iamwithyou-product__cap_ct::before,
.iamwithyou-product__01_ct .iamwithyou-product__cap_ct::after {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  position: absolute;
}

.iamwithyou-product__01_ct .iamwithyou-product__cap_ct::before {
  background-image: url(../images/deco_01.webp);
  top: -2%;
  left: 0;
  padding-top: 31.395%;
  width: 16.86%;
}

.iamwithyou-product__01_ct .iamwithyou-product__cap_ct::after {
  background-image: url(../images/deco_02.webp);
  top: -8.453%;
  right: -2.325%;
  padding-top: 29.36%;
  width: 24.127%;
}

.iamwithyou-product__01_ct .iamwithyou-products__num_ct {
  top: 59.452%;
  right: 4.651%;
}

.iamwithyou-product__01_ct .iamwithyou-products__text_ct {
  top: 69.54%;
  right: -7.813%;
  width: 69.767%;
}

.iamwithyou-product__02_ct.iamwithyou-product_ct {
  margin-top: 6%;
}

.iamwithyou-product__02_ct .iamwithyou-products__num_ct {
  top: 31.482%;
  right: 5.232%;
}

.iamwithyou-product__02_ct .iamwithyou-products__text_ct {
  top: 42.145%;
  right: -7.813%;
  width: 75.581%;
}

.iamwithyou-product__03_ct.iamwithyou-product_ct {
  margin-top: 6%;
}

.iamwithyou-product__03_ct .iamwithyou-products__num_ct {
  top: 23.754%;
  right: 5.232%;
}

.iamwithyou-product__03_ct .iamwithyou-products__text_ct {
  top: 8.045%;
  right: -7.813%;
  width: 68.023%;
}

.iamwithyou-product__04_ct.iamwithyou-product_ct {
  margin-top: -8.025%;
}

.iamwithyou-product__04_ct .iamwithyou-products__num_ct {
  bottom: 23.478%;
  right: 5.232%;
}

.iamwithyou-product__04_ct .iamwithyou-products__text_ct {
  bottom: 13.391%;
  right: -7.813%;
  width: 53.488%;
}

.iamwithyou-product__05_ct.iamwithyou-product_ct {
  margin-top: 6%;
}

.iamwithyou-product__05_ct .iamwithyou-products__num_ct {
  bottom: 15.708%;
  right: 5.232%;
}

.iamwithyou-product__05_ct .iamwithyou-products__text_ct {
  bottom: 4.597%;
  right: -7.813%;
  width: 53.488%;
}

/* iamwithyou-concept_ct */
.iamwithyou-concept_ct {
  background-image: url(../images/concept-bg.webp);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  background-color: #fff;
  margin-top: 13.846%;
  padding-top: 5.641%;
  padding-bottom: 17.948%;
  position: relative;
}

.iamwithyou-concept_ct::before {
  background-image: url(../images/tool.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  position: absolute;
  top: 0;
  right: 14.871%;
  transform: translateY(-34%);
  padding-top: 14.615%;
  width: 14.871%;
}

.iamwithyou-concept__subtitle_ct {
  margin-left: auto;
  margin-right: auto;
  width: 26.153%;
}

.iamwithyou-concept_ct .iamwithyou-concept__text_ct {
  color: var(--color01);
  font-family: var(--fontTSUKU);
  font-size: 14px;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.025em;
  text-align: center;
  margin-top: 7.692%;
}

.iamwithyou-concept__movie_ct {
  margin-top: 7.692%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 80.512%;
}

/* iamwithyou-message_ct */
.iamwithyou-message_ct {
  background-color: #fff;
  position: relative;
}

.iamwithyou-message__title_ct {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

.iamwithyou-message_ct .iamwithyou-message__text_ct {
  color: var(--color04);
  font-family: var(--fontTSUKU);
  font-size: 14px;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.025em;
  text-align: center;
  margin-top: 7.179%;
}

.iamwithyou-message_ct .iamwithyou-message__sign_ct {
  margin-top: 3.846%;
  margin-left: auto;
  margin-right: auto;
  width: 67.692%;
}

/* iamwithyou-movie_ct */
.iamwithyou-movie_ct {
  background-color: #fff;
  padding-top: 21.538%;
}

.iamwithyou-movie__inner_ct {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 80.512%;
}

.iamwithyou-movie__cap_ct {
  position: absolute;
  top: -13.304%;
  left: 3.184%;
  width: 32.484%;
}

/* iamwithyou-about_ct */
.iamwithyou-about_ct {
  background-color: #fff;
  padding-top: 7.692%;
  padding-bottom: 8.717%;
}

.iamwithyou-about__inner_ct {
  margin-left: auto;
  margin-right: auto;
  width: 76.923%;
}

.iamwithyou-about__title_ct {
  font-family: var(--fontTSUKU);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-align: center;
}

.iamwithyou-about__en_ct {
  font-size: 7px;
}

.iamwithyou-about__name_ct {
  font-size: 18px;
}

.iamwithyou-about_ct .iamwithyou-about__text_ct {
  font-family: var(--fontTSUKU);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1.79;
  margin-top: 2.564%;
}

/* iamwithyou-info_ct */
.iamwithyou-info_ct {
  color: var(--color01);
  padding-top: 6.666%;
}

.iamwithyou-info__item_ct {
  margin-top: 7.692%;
  margin-left: auto;
  margin-right: auto;
  width: 76.923%;
}

.iamwithyou-info__item__title_ct {
  border-bottom: 0.05em dashed var(--color01);
  font-family: var(--fontTSUKU);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1;
  margin-bottom: 4%;
  text-align: center;
  padding-bottom: 5.666%;
}

.iamwithyou-info__item__subtitle_ct,
.iamwithyou-info__item__text_ct {
  font-family: var(--fontBBB);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.025em;
  line-height: 1.9;
}

.iamwithyou-info__item__subtitle_ct {
  text-align: center;
}

.iamwithyou-info__guide_ct {
  background-color: #fff;
  border-radius: 34px;
  border: 1px solid var(--color01);
  color: var(--color);
  margin-top: 6.923%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5.641%;
  padding-bottom: 3.333%;
  width: 93.846%;
}

.iamwithyou-guide__title_ct {
  border-bottom: 0.05em dashed var(--color01);
  color: var(--color01);
  font-family: var(--fontTSUKU);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-bottom: 1.092%;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.iamwithyou-info__guide_ct .iamwithyou-guide__text_ct {
  font-family: var(--fontTSUKU);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.065em;
  line-height: 1.75;
  margin-top: 1.639%;
  margin-left: auto;
  margin-right: auto;
  width: 81.967%;
}

.iamwithyou-guide__line__btn_ct {
  margin-top: 8.743%;
}

.iamwithyou-guide__btn__link_ct {
  align-items: center;
  border: 1px solid var(--color01);
  border-radius: 20px;
  color: var(--color01);
  display: flex;
  font-family: var(--fontTSUKU);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1;
  justify-content: center;
  margin-top: 8.743%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0.76em;
  padding-bottom: 0.76em;
  position: relative;
  width: 60.109%;
}

.iamwithyou-guide__btn__link_ct:hover {
  color: var(--color01);
}

.iamwithyou-guide__line_ct {
  margin-top: 5.464%;
}

.iamwithyou-guide__line__text_ct {
  font-family: var(--fontTSUKU);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1.36;
  text-align: center;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.iamwithyou-guide__line__text_ct::before,
.iamwithyou-guide__line__text_ct::after {
  background-color: var(--color);
  content: "";
  transform-origin: bottom;
  position: absolute;
  top: 50%;
  height: 1.8em;
  width: 1px;
}

.iamwithyou-guide__line__text_ct::before {
  left: 0;
  transform: translate(-100%, -50%) rotate(-35deg);
}

.iamwithyou-guide__line__text_ct::after {
  right: 0;
  transform: translate(-100%, -50%) rotate(35deg);
}

.iamwithyou-guide__line__btn_ct {
  margin-top: 2%;
}

.iamwithyou-guide__line__link_ct {
  align-items: center;
  background-color: #06c755;
  border-radius: 20px;
  color: #fff;
  display: flex;
  font-family: var(--fontTSUKU);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0.76em;
  padding-bottom: 0.76em;
  position: relative;
  width: 60.109%;
}

.iamwithyou-guide__line__link_ct:hover {
  color: #fff;
}

.iamwithyou-guide__btn__link_ct::after,
.iamwithyou-guide__line__link_ct:after {
  background-color: var(--color01);
  content: "";
  -webkit-mask-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.233 12.874"><path d="M7.089,12.581a1,1,0,0,1,0-1.414l3.73-3.73H1a1,1,0,0,1,0-2h9.819l-3.73-3.73A1,1,0,0,1,8.5.293l5.432,5.433.039.04a1,1,0,0,1-.034,1.379L8.5,12.581a1,1,0,0,1-1.414,0Z" transform="translate(0 0)" fill="%23e50012"/></svg>');
  mask-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.233 12.874"><path d="M7.089,12.581a1,1,0,0,1,0-1.414l3.73-3.73H1a1,1,0,0,1,0-2h9.819l-3.73-3.73A1,1,0,0,1,8.5.293l5.432,5.433.039.04a1,1,0,0,1-.034,1.379L8.5,12.581a1,1,0,0,1-1.414,0Z" transform="translate(0 0)" fill="%23e50012"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  position: absolute;
  top: 50%;
  right: 4.545%;
  transform: translateY(-50%);
  height: 0.86em;
  width: 1em;
}

.iamwithyou-guide__line__link_ct:after {
  background-color: #fff;
}

.iamwithyou-guide__line__link_ct::before {
  background-image: url(../images/line.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
  position: absolute;
  top: 50%;
  left: 3.636%;
  transform: translateY(-50%);
  height: 1.46em;
  width: 1.46em;
}

.iamwithyou-info_ct .iamwithyou-guide__note_ct {
  font-family: var(--fontTSUKU);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.065em;
  line-height: 1.75;
  margin-top: 9.562%;
  text-align: center;
}

/* iamwithyou-share_ct */
.iamwithyou-share_ct {
  margin-top: 8.405%;
}

.iamwithyou-share__items_ct {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 10.769%;
  margin-left: auto;
  margin-right: auto;
  width: 84.615%;
}

.iamwithyou-share__item_ct {
  width: 46.666%;
}

.iamwithyou-share__item_ct:not(:nth-child(-n + 2)) {
  margin-top: 3.658%;
}

/* iamwithyou-sns_ct */
.iamwithyou-sns_ct {
  margin-top: 11.794%;
}

.iamwithyou-sns__title_ct {
  margin-left: auto;
  margin-right: auto;
  width: 26.666%;
}

.iamwithyou-sns__icons_ct {
  display: flex;
  justify-content: space-between;
  margin-top: 4.137%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 74.358%;
}

.iamwithyou-sns__icon_ct {
  width: 19.31%;
}

.iamwithyou-sns__note_ct {
  position: absolute;
  top: -64.285%;
  right: -2.379%;
  width: 23.287%;
}

.iamwithyou-sns__note_ct::before {
  background-image: url(../images/sns-note_deco.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: 100%;
}

/* iamwithyou-category_ct */
.iamwithyou-category_ct .fca_search_ct.fca_section {
  border-radius: 32px;
  background-color: #fff;
  margin-top: 22.051%;
  max-width: none;
  padding-bottom: 8.461%;
  padding-top: 6.666%;
  width: 93.846%;
}

.iamwithyou-category_ct .fca_search_ct .fca_search__container_ct {
  margin-top: 3.825%;
}

.iamwithyou-category_ct .fca_search_ct.fca_section::before {
  display: none;
}

.iamwithyou-category_ct .fca_search_ct.fca_section::after {
  border-radius: 32px;
  border: 1px solid var(--color01);
}

.iamwithyou-category_ct .fca_search_ct .fca_search__title_ct {
  color: var(--color01);
  font-family: var(--fontTSUKU);
  font-size: 22px;
  font-weight: 700;
  padding-top: 3.551%;
}

.iamwithyou-category_ct .fca_search_ct .fca_search__title_ct::before {
  height: auto;
  padding-top: 12.841%;
  transform: translate(-50%, -100%);
  width: 12.841%;
}

.iamwithyou-category_ct .fca_cat_ct .fca_cat__items_ct {
  gap: 25px 6.363636363%;
  width: 80.882352941%;
}

.iamwithyou-category_ct .fca_cat_ct .fca_cat__item_ct {
  width: 29.09090909%;
}

.iamwithyou-category_ct .fca_search_ct .fca_search__cat_ct::before {
  background-image: url(../images/search_cat.svg);
}

.iamwithyou-category_ct .fca_cat_ct .fca_cat__caption_ct {
  font-size: 12px;
  line-height: 1.5;
  margin-top: 5px;
}

/*----------------------------------
  iamwithyou-index__wrap_ct
----------------------------------*/
.iamwithyou-index__wrap_ct {
  margin-top: 11.713%;
  margin-top: 9.713%;
}

.iamwithyou-index_ct {
  aspect-ratio: 455 / 622;
  align-items: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  max-height: var(--right-max-h, 80vh);
  margin-left: auto;
  margin-right: auto;
  padding-bottom: var(--bottom-bg-h, 0px);
  position: -webkit-sticky;
  position: sticky;
  right: 0;
  top: 17.777%;
  top: 9.777%;
}

.iamwithyou-index__title_ct {
  width: 68.571%;
  width: 48.571%;
}

.iamwithyou-index__items_ct {
  display: flex;
  margin-top: 12.747%;
  margin-top: 6.747%;
  width: 86.813%;
}

.iamwithyou-index__item_ct {
  width: 20%;
}

.iamwithyou-index__cap_ct {
  text-align: justify;
  margin-top: 8.861%;
  margin-left: auto;
  margin-right: auto;
  width: 32.911%;
}

.iamwithyou-index__wrap_ct .iamwithyou-index__text_ct {
  margin-top: 46.153%;
  margin-left: auto;
  margin-right: auto;
  transition: all 0.2s ease;
  width: 50%;
}

.iamwithyou-index__item_ct .iamwithyou-index__link_ct:hover {
  opacity: 1;
}

.iamwithyou-index__item_ct:nth-of-type(1) .iamwithyou-index__link_ct:hover .iamwithyou-index__num_ct img {
  content: url(../images/num-color_01.svg);
}

.iamwithyou-index__item_ct:nth-of-type(2) .iamwithyou-index__link_ct:hover .iamwithyou-index__num_ct img {
  content: url(../images/num-color_02.svg);
}

.iamwithyou-index__item_ct:nth-of-type(3) .iamwithyou-index__link_ct:hover .iamwithyou-index__num_ct img {
  content: url(../images/num-color_03.svg);
}

.iamwithyou-index__item_ct:nth-of-type(4) .iamwithyou-index__link_ct:hover .iamwithyou-index__num_ct img {
  content: url(../images/num-color_04.svg);
}

.iamwithyou-index__item_ct:nth-of-type(5) .iamwithyou-index__link_ct:hover .iamwithyou-index__num_ct img {
  content: url(../images/num-color_05.svg);
}

.iamwithyou-index__item_ct .iamwithyou-index__link_ct:hover .iamwithyou-index__text_ct {
  transform: scale(1.04);
}

/* アニメーション */
/* data-logo-anim-1 */
svg[data-logo-anim-1] .st0 {
  fill: none;
  stroke: var(--color01);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  opacity: 0;
}

svg[data-logo-anim-1] .st0.is-done {
  opacity: 1;
  stroke-dashoffset: 0;
  -webkit-animation: none;
  animation: none;
}

svg[data-logo-anim-1].is-st0-1 .st0-1,
svg[data-logo-anim-1].is-st0-2 .st0-2 {
  opacity: 1;
  -webkit-animation: draw-line calc(var(--t-st0) / var(--speed)) ease forwards;
  animation: draw-line calc(var(--t-st0) / var(--speed)) ease forwards;
}

/* ===== 文字群（塗り） ===== */
svg[data-logo-anim-1] .st1 {
  fill: var(--color01);
}

/* マスク用（白線） */
svg[data-logo-anim-1] .mask-path {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
}

svg[data-logo-anim-1] .mask-trigger {
  fill: none;
  stroke: transparent;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
}

svg[data-logo-anim-1].is-fill .mask-path,
svg[data-logo-anim-1].is-fill .mask-trigger {
  -webkit-animation: draw-line calc(var(--t-fill) / var(--speed)) ease forwards;
  animation: draw-line calc(var(--t-fill) / var(--speed)) ease forwards;
}

/* dot */
svg[data-logo-anim-1] .dot {
  opacity: 0;
  transition: opacity 0.1s linear;
}

svg[data-logo-anim-1].is-dot .dot {
  opacity: 1;
}

@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

/* data-logo-anim-2 */
svg[data-logo-anim-2] {
  --speed: 1;
  --fillStart: 0.15;
  --lastStart: 0.1;
}

svg[data-logo-anim-2] .st1 {
  fill: none;
  stroke: var(--color01);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  opacity: 0;
}

svg[data-logo-anim-2].is-line-right .line-right,
svg[data-logo-anim-2].is-line-left .line-left {
  opacity: 1;
  -webkit-animation: draw-line calc(0.9s * var(--speed)) ease forwards;
  animation: draw-line calc(0.9s * var(--speed)) ease forwards;
}

svg[data-logo-anim-2] .st1.is-done {
  opacity: 1;
  stroke-dashoffset: 0;
  -webkit-animation: none;
  animation: none;
}

svg[data-logo-anim-2] .st0 {
  fill: var(--color01);
}

svg[data-logo-anim-2] .mask-path {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;

  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
}

svg[data-logo-anim-2].is-fill .mask-path {
  -webkit-animation: draw-line calc(4.4s * var(--speed)) ease forwards;
  animation: draw-line calc(4.4s * var(--speed)) ease forwards;
}

svg[data-logo-anim-2] .mask-trigger {
  fill: none;
  stroke: transparent;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;

  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
}

svg[data-logo-anim-2].is-fill .mask-trigger {
  -webkit-animation: draw-line calc(4.4s * var(--speed)) ease forwards;
  animation: draw-line calc(4.4s * var(--speed)) ease forwards;
}

svg[data-logo-anim-2] .dot {
  fill: none;
  stroke: var(--color01);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;

  stroke-dasharray: var(--len, 120);
  stroke-dashoffset: var(--len, 120);
  opacity: 0;
}

svg[data-logo-anim-2].is-dot .dot {
  opacity: 1;
  -webkit-animation: draw-line calc(0.6s * var(--speed)) ease forwards;
  animation: draw-line calc(0.6s * var(--speed)) ease forwards;
}

svg[data-logo-anim-2] .dot.is-done {
  opacity: 1;
  stroke-dashoffset: 0;
  -webkit-animation: none;
  animation: none;
}

@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

/* data-logo-anim-3 */
svg[data-logo-anim-3] {
  --speed: 1;
  --fillStart: 0.15;
  --lastStart: 0.1;
}

svg[data-logo-anim-3] .st0 {
  fill: none;
  stroke: var(--color01);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;

  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  opacity: 0;
}

svg[data-logo-anim-3].is-line-left .line-left,
svg[data-logo-anim-3].is-line-right .line-right {
  opacity: 1;
  -webkit-animation: draw-line calc(0.9s * var(--speed)) ease forwards;
  animation: draw-line calc(0.9s * var(--speed)) ease forwards;
}

svg[data-logo-anim-3] .st0.is-done {
  opacity: 1;
  stroke-dashoffset: 0;
  -webkit-animation: none;
  animation: none;
}

svg[data-logo-anim-3] .st1 {
  fill: var(--color01);
}

svg[data-logo-anim-3] .mask-path {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;

  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
}

svg[data-logo-anim-3].is-fill .mask-path {
  -webkit-animation: draw-line calc(4.4s * var(--speed)) ease forwards;
  animation: draw-line calc(4.4s * var(--speed)) ease forwards;
}

svg[data-logo-anim-3] .mask-trigger {
  fill: none;
  stroke: transparent;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;

  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
}

svg[data-logo-anim-3].is-fill .mask-trigger {
  -webkit-animation: draw-line calc(4.4s * var(--speed)) ease forwards;
  animation: draw-line calc(4.4s * var(--speed)) ease forwards;
}

@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

/* data-logo-anim-4 */
/* 共通ターゲット（全SVG共通） */
svg[data-logo-anim-4] {
  /* 触るのはこの3つだけ */
  --speed: 1;
  /* 全体スピード */
  --fillStart: 0.15;
  /* 左線終了→文字群開始まで（秒） */
  --lastStart: 0.1;
  /* 文字群終盤→右線開始の前倒し（秒） */
}

/* ===== 赤線（左/右） ===== */
svg[data-logo-anim-4] .anim-line {
  fill: none;
  stroke: var(--color01);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;

  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  opacity: 0;
}

svg[data-logo-anim-4].is-line-left .line-left,
svg[data-logo-anim-4].is-line-right .line-right {
  opacity: 1;
  -webkit-animation: draw-line calc(0.9s * var(--speed)) ease forwards;
  animation: draw-line calc(0.9s * var(--speed)) ease forwards;
}

svg[data-logo-anim-4] .anim-line.is-done {
  opacity: 1;
  stroke-dashoffset: 0;
  -webkit-animation: none;
  animation: none;
}

/* ===== 文字群 ===== */
svg[data-logo-anim-4] .st1 {
  fill: var(--color01);
}

/* ===== マスク線（白） ===== */
svg[data-logo-anim-4] .mask-path {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;

  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
}

svg[data-logo-anim-4].is-fill .mask-path {
  -webkit-animation: draw-line calc(4.4s * var(--speed)) ease forwards;
  animation: draw-line calc(4.4s * var(--speed)) ease forwards;
}

/* 終了検知用（透明） */
svg[data-logo-anim-4] .mask-trigger {
  fill: none;
  stroke: transparent;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;

  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
}

svg[data-logo-anim-4].is-fill .mask-trigger {
  -webkit-animation: draw-line calc(4.4s * var(--speed)) ease forwards;
  animation: draw-line calc(4.4s * var(--speed)) ease forwards;
}

@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

/* data-logo-anim-5 */
svg[data-logo-anim-5] {
  display: block;
  --speed: 1;
  --fillStart: 0.1;
  --lastStart: 0.1;
}

svg[data-logo-anim-5] .anim-line {
  fill: none;
  stroke: var(--color01);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  opacity: 0;
}

svg[data-logo-anim-5].is-line-left .line-left,
svg[data-logo-anim-5].is-line-right .line-right {
  opacity: 1;
  -webkit-animation: draw-line calc(0.9s * var(--speed)) ease forwards;
  animation: draw-line calc(0.9s * var(--speed)) ease forwards;
}

svg[data-logo-anim-5] .anim-line.is-done {
  opacity: 1;
  stroke-dashoffset: 0;
  -webkit-animation: none;
  animation: none;
}

svg[data-logo-anim-5] .st1 {
  fill: var(--color01);
}

svg[data-logo-anim-5] .mask-fill {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
}

svg[data-logo-anim-5].is-fill .mask-fill {
  -webkit-animation: draw-line calc(4.4s * var(--speed)) ease forwards;
  animation: draw-line calc(4.4s * var(--speed)) ease forwards;
}

svg[data-logo-anim-5] .mask-dot,
svg[data-logo-anim-5] .mask-dot2,
svg[data-logo-anim-5] .mask-dash {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 50);
  stroke-dashoffset: var(--len, 50);
  opacity: 0;
}

svg[data-logo-anim-5].is-dot .mask-dot,
svg[data-logo-anim-5].is-dot2 .mask-dot2,
svg[data-logo-anim-5].is-dash .mask-dash {
  opacity: 1;
  -webkit-animation: draw-line calc(0.35s * var(--speed)) ease forwards;
  animation: draw-line calc(0.35s * var(--speed)) ease forwards;
}

@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

/* data-logo-anim-6 */
svg[data-logo-anim-6] {
  display: block;
  --speed: 1;
  --fillStart: 0.15;
  --lastStart: 0.1;
}

svg[data-logo-anim-6] .anim-line {
  fill: none;
  stroke: var(--color01);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  opacity: 0;
}

svg[data-logo-anim-6].is-line-right .line-right {
  opacity: 1;
  -webkit-animation: draw-line calc(0.9s * var(--speed)) ease forwards;
  animation: draw-line calc(0.9s * var(--speed)) ease forwards;
}

svg[data-logo-anim-6] .anim-line.is-done {
  opacity: 1;
  stroke-dashoffset: 0;
  -webkit-animation: none;
  animation: none;
}

svg[data-logo-anim-6] .st0 {
  fill: var(--color01);
}

svg[data-logo-anim-6] .mask-fill {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
}

svg[data-logo-anim-6].is-fill .mask-fill {
  -webkit-animation: draw-line calc(4.4s * var(--speed)) ease forwards;
  animation: draw-line calc(4.4s * var(--speed)) ease forwards;
}

svg[data-logo-anim-6] .mask-dot,
svg[data-logo-anim-6] .mask-dot2 {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 60);
  stroke-dashoffset: var(--len, 60);
  opacity: 0;
}

svg[data-logo-anim-6].is-dot .mask-dot,
svg[data-logo-anim-6].is-dot2 .mask-dot2 {
  opacity: 1;
  -webkit-animation: draw-line calc(0.35s * var(--speed)) ease forwards;
  animation: draw-line calc(0.35s * var(--speed)) ease forwards;
}

@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

/* data-logo-anim-7 */
svg[data-logo-anim-7] {
  display: block;
  --speed: 1;
  --fillStart: 0.15;
  --lastStart: 0.1;
}

svg[data-logo-anim-7] .anim-line {
  fill: none;
  stroke: var(--color01);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  opacity: 0;
}

svg[data-logo-anim-7].is-line-right .line-right {
  opacity: 1;
  -webkit-animation: draw-line calc(0.9s * var(--speed)) ease forwards;
  animation: draw-line calc(0.9s * var(--speed)) ease forwards;
}

svg[data-logo-anim-7] .anim-line.is-done {
  opacity: 1;
  stroke-dashoffset: 0;
  -webkit-animation: none;
  animation: none;
}

svg[data-logo-anim-7] .st0 {
  fill: var(--color01);
}

svg[data-logo-anim-7] .mask-fill {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
}

svg[data-logo-anim-7].is-fill .mask-fill {
  -webkit-animation: draw-line calc(4.4s * var(--speed)) ease forwards;
  animation: draw-line calc(4.4s * var(--speed)) ease forwards;
}

svg[data-logo-anim-7] .mask-dot,
svg[data-logo-anim-7] .mask-dot2 {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 60);
  stroke-dashoffset: var(--len, 60);
  opacity: 0;
}

svg[data-logo-anim-7].is-dot .mask-dot,
svg[data-logo-anim-7].is-dot2 .mask-dot2 {
  opacity: 1;
  -webkit-animation: draw-line calc(0.35s * var(--speed)) ease forwards;
  animation: draw-line calc(0.35s * var(--speed)) ease forwards;
}

@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

svg[data-logo-anim-7] .mask-hori {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 80);
  stroke-dashoffset: var(--len, 80);
  opacity: 0;
}

svg[data-logo-anim-7].is-hori .mask-hori {
  opacity: 1;
  -webkit-animation: draw-line calc(0.45s * var(--speed)) ease forwards;
  animation: draw-line calc(0.45s * var(--speed)) ease forwards;
}

/* data-logo-anim-8 */
svg[data-logo-anim-8] {
  display: block;
  --speed: 1;
  --fillStart: 0.15;
  --lastStart: 0.1;
}

svg[data-logo-anim-8] .anim-line {
  fill: none;
  stroke: var(--color01);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  opacity: 0;
}

svg[data-logo-anim-8].is-line-right .line-right {
  opacity: 1;
  -webkit-animation: draw-line calc(0.9s * var(--speed)) ease forwards;
  animation: draw-line calc(0.9s * var(--speed)) ease forwards;
}

svg[data-logo-anim-8] .anim-line.is-done {
  opacity: 1;
  stroke-dashoffset: 0;
  -webkit-animation: none;
  animation: none;
}

svg[data-logo-anim-8] .st0 {
  fill: var(--color01);
}

svg[data-logo-anim-8] .mask-fill {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
}

svg[data-logo-anim-8].is-fill .mask-fill {
  -webkit-animation: draw-line calc(4.4s * var(--speed)) ease forwards;
  animation: draw-line calc(4.4s * var(--speed)) ease forwards;
}

svg[data-logo-anim-8] .mask-dot,
svg[data-logo-anim-8] .mask-dot2 {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 60);
  stroke-dashoffset: var(--len, 60);
  opacity: 0;
}

svg[data-logo-anim-8].is-dot .mask-dot,
svg[data-logo-anim-8].is-dot2 .mask-dot2 {
  opacity: 1;
  -webkit-animation: draw-line calc(0.35s * var(--speed)) ease forwards;
  animation: draw-line calc(0.35s * var(--speed)) ease forwards;
}

@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

svg[data-logo-anim-8] .mask-hori {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 80);
  stroke-dashoffset: var(--len, 80);
  opacity: 0;
}

svg[data-logo-anim-8].is-hori .mask-hori {
  opacity: 1;
  -webkit-animation: draw-line calc(0.45s * var(--speed)) ease forwards;
  animation: draw-line calc(0.45s * var(--speed)) ease forwards;
}

/* data-logo-anim-9 */
svg[data-logo-anim-9] {
  display: block;
  --speed: 1;
  --fillStart: 0.15;
  --lastStart: 0.1;
}

svg[data-logo-anim-9] .anim-line {
  fill: none;
  stroke: var(--color01);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  opacity: 0;
}

svg[data-logo-anim-9].is-line-right .line-right {
  opacity: 1;
  -webkit-animation: draw-line calc(0.9s * var(--speed)) ease forwards;
  animation: draw-line calc(0.9s * var(--speed)) ease forwards;
}

svg[data-logo-anim-9] .anim-line.is-done {
  opacity: 1;
  stroke-dashoffset: 0;
  -webkit-animation: none;
  animation: none;
}

svg[data-logo-anim-9] .st0 {
  fill: var(--color01);
}

svg[data-logo-anim-9] .mask-fill {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
}

svg[data-logo-anim-9].is-fill .mask-fill {
  -webkit-animation: draw-line calc(4.4s * var(--speed)) ease forwards;
  animation: draw-line calc(4.4s * var(--speed)) ease forwards;
}

svg[data-logo-anim-9] .mask-dot,
svg[data-logo-anim-9] .mask-dot2 {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 60);
  stroke-dashoffset: var(--len, 60);
  opacity: 0;
}

svg[data-logo-anim-9].is-dot .mask-dot,
svg[data-logo-anim-9].is-dot2 .mask-dot2 {
  opacity: 1;
  -webkit-animation: draw-line calc(0.35s * var(--speed)) ease forwards;
  animation: draw-line calc(0.35s * var(--speed)) ease forwards;
}

@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

svg[data-logo-anim-9] .mask-hori {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 80);
  stroke-dashoffset: var(--len, 80);
  opacity: 0;
}

svg[data-logo-anim-9].is-hori .mask-hori {
  opacity: 1;
  -webkit-animation: draw-line calc(0.45s * var(--speed)) ease forwards;
  animation: draw-line calc(0.45s * var(--speed)) ease forwards;
}

/* data-logo-anim-10 */
svg[data-logo-anim-10] {
  display: block;
  --speed: 1;
  --fillStart: 0.15;
  --lastStart: 0.1;
}

svg[data-logo-anim-10] .anim-line {
  fill: none;
  stroke: var(--color01);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  opacity: 0;
}

svg[data-logo-anim-10].is-line-right .line-right {
  opacity: 1;
  -webkit-animation: draw-line calc(0.9s * var(--speed)) ease forwards;
  animation: draw-line calc(0.9s * var(--speed)) ease forwards;
}

svg[data-logo-anim-10] .anim-line.is-done {
  opacity: 1;
  stroke-dashoffset: 0;
  -webkit-animation: none;
  animation: none;
}

svg[data-logo-anim-10] .st0 {
  fill: var(--color01);
}

svg[data-logo-anim-10] .mask-fill {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
}

svg[data-logo-anim-10].is-fill .mask-fill {
  -webkit-animation: draw-line calc(4.4s * var(--speed)) ease forwards;
  animation: draw-line calc(4.4s * var(--speed)) ease forwards;
}

svg[data-logo-anim-10] .mask-dot,
svg[data-logo-anim-10] .mask-dot2 {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 60);
  stroke-dashoffset: var(--len, 60);
  opacity: 0;
}

svg[data-logo-anim-10].is-dot .mask-dot,
svg[data-logo-anim-10].is-dot2 .mask-dot2 {
  opacity: 1;
  -webkit-animation: draw-line calc(0.35s * var(--speed)) ease forwards;
  animation: draw-line calc(0.35s * var(--speed)) ease forwards;
}

@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

svg[data-logo-anim-10] .mask-dot,
svg[data-logo-anim-10] .mask-hori {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 6;
  stroke-dasharray: var(--len, 80);
  stroke-dashoffset: var(--len, 80);
  opacity: 0;
}

svg[data-logo-anim-10].is-dot .mask-dot {
  opacity: 1;
  -webkit-animation: draw-line calc(0.28s * var(--speed)) ease forwards;
  animation: draw-line calc(0.28s * var(--speed)) ease forwards;
}

svg[data-logo-anim-10].is-hori .mask-hori {
  opacity: 1;
  -webkit-animation: draw-line calc(0.4s * var(--speed)) ease forwards;
  animation: draw-line calc(0.4s * var(--speed)) ease forwards;
}

/*----------------------------------
  sp
----------------------------------*/
@media not all and (min-width: 768px) {
  .fca_cat-hero .fca_container {
    padding-right: 0;
    padding-left: 0;
  }

  .iamwithyou_ct .pc {
    display: none;
  }

  .iamwithyou_ct .sp {
    display: block;
  }

  .iamwithyou_ct {
    --inset-top: unset;
    --frame-h: unset;
    margin: 0;
    width: 100%;
  }

  .iamwithyou__inner_ct {
    max-width: none;
    padding-top: 0;
    --inset-top: unset;
    --frame-h: unset;
    width: 100%;
  }

  .iamwithyou-content__container_ct {
    border-radius: 0;
    height: auto;
    max-width: none;
    overflow: auto;
  }

  .iamwithyou-content__frame_ct::before,
  .iamwithyou-content__frame_ct::after {
    display: none;
  }

  .iamwithyou-content_ct {
    max-width: none;
    width: 100%;
  }

  .iamwithyou-logo__wrap_ct,
  .iamwithyou-index__wrap_ct {
    display: none;
  }

  /* iamwithyou-body_ct */
  .iamwithyou-products_ct {
    overflow: hidden;
  }

  .iamwithyou-header_ct .iamwithyou-header__text_ct {
    font-size: clamp(16px, 4.35vw, 33px);
  }

  .iamwithyou-lineup_ct .iamwithyou-lineup__lead_ct {
    font-size: clamp(11px, 3.07vw, 24px);
  }

  .iamwithyou-campaign__text_ct {
    font-size: clamp(11px, 3.07vw, 24px);
  }

  .iamwithyou-campaign__text_ct strong {
    font-size: clamp(17px, 4.61vw, 35px);
  }

  .iamwithyou-campaign_ct .iamwithyou-campaign__note_ct {
    font-size: clamp(10px, 2.56vw, 20px);
  }

  .iamwithyou-product__price_ct {
    font-size: clamp(12px, 3.33vw, 25px);
  }

  .iamwithyou-product__tax_ct {
    font-size: clamp(10px, 2.05vw, 16px);
  }

  .iamwithyou-product__btn__link_ct {
    font-size: clamp(14px, 3.84vw, 29px);
  }

  .iamwithyou-product__label_ct {
    font-size: clamp(11px, 3.07vw, 24px);
  }

  .iamwithyou-concept_ct .iamwithyou-concept__text_ct {
    font-size: clamp(13px, 3.58vw, 27px);
  }

  .iamwithyou-message_ct .iamwithyou-message__text_ct {
    font-size: clamp(13px, 3.58vw, 27px);
  }

  .iamwithyou-about__title_ct {
    font-size: clamp(14px, 3.84vw, 29px);
  }

  .iamwithyou-about__en_ct {
    font-size: clamp(10px, 1.79vw, 14px);
  }

  .iamwithyou-about__name_ct {
    font-size: clamp(17px, 4.61vw, 35px);
  }

  .iamwithyou-about_ct .iamwithyou-about__text_ct {
    font-size: clamp(11px, 3.07vw, 24px);
  }

  .iamwithyou-info__item__title_ct {
    font-size: clamp(16px, 4.35vw, 33px);
  }

  .iamwithyou-info__item__subtitle_ct,
  .iamwithyou-info__item__text_ct {
    font-size: clamp(10px, 2.82vw, 22px);
  }

  .iamwithyou-guide__title_ct {
    font-size: clamp(16px, 4.35vw, 33px);
  }

  .iamwithyou-info__guide_ct .iamwithyou-guide__text_ct {
    font-size: clamp(10px, 2.05vw, 16px);
  }

  .iamwithyou-guide__btn__link_ct {
    border-radius: 40px;
    font-size: clamp(14px, 3.84vw, 29px);
  }

  .iamwithyou-guide__line__text_ct {
    font-size: clamp(10px, 2.82vw, 22px);
  }

  .iamwithyou-guide__line__link_ct {
    border-radius: 40px;
    font-size: clamp(14px, 3.84vw, 29px);
  }

  .iamwithyou-info_ct .iamwithyou-guide__note_ct {
    font-size: clamp(10px, 2.05vw, 16px);
  }

  .iamwithyou-bg_ct {
    display: none;
  }
}