@charset "UTF-8";
/*!
Page Name: はじめてでも大丈夫！手芸・ハンドメイド初心者さんのためのクチュリエ
Page URL: https://www.felissimo.co.jp/contents/wonderful/summer2024/wfsummer2024_fc.html
Description: はじめてでも大丈夫！手芸・ハンドメイド初心者さんのためのクチュリエのページです。
Author: FELISSIMO
*/
/* -----------------------------------------------------------------------
## Font ##################################################
----------------------------------------------------------------------- */
:root {
  --a1Mincho: "A1明朝 M JIS2004 AP", "A1 Mincho M JIS2004 AP", serif;
  --ls-base: .04em;
  --lh-base: 2;
}

/* -----------------------------------------------------------------------
## Color ##################################################
----------------------------------------------------------------------- */
:root {
  --red: #ED5D73;
  --yellow: #EDBC5D;
  --green: #9CDB5E;
  --blue: #4C9FDB;
  --brown: #583C32;
  --text: #333;
  --text-red: #ED5D73;
  --text-yellow: #EDBC5D;
  --text-green: #9CDB5E;
  --text-blue: #4C9FDB;
  --text-brown: #583C32;
  --bg-red: #ED5D73;
  --bg-yellow: #EDBC5D;
  --bg-green: #9CDB5E;
  --bg-blue: #4C9FDB;
  --bg-red-light: #FFF0ED;
  --bg-yellow-light: #FDFAEF;
  --bg-green-light: #F0FDE7;
  --bg-blue-light: #EBFBFF;
  --bd-red: #ED5D73;
  --bd-yellow: #EDBC5D;
  --bd-green: #9CDB5E;
  --bd-blue: #4C9FDB;
  --bd-red-light: #FEF0EC;
  --bd-yellow-light: #FDF7E2;
  --bd-green-light: #F5FCF0;
  --bd-blue-light: #EBFBFF;
  --bd-brown: #583C32;
  --color-lesson: var(--text-red);
  --color-lesson-light: var(--bg-red-light);
  --color-basic: var(--bg-yellow);
  --color-basic-light: var(--bg-yellow-light);
  --color-pickup: var(--bg-blue);
  --color-pickup-light: var(--bg-blue-light);
  --color-next: var(--bg-green);
  --color-next-light: var(--bg-green-light);
  --color-more-contents: var(--bg-blue);
  --color-more-contents-light: var(--bg-blue-light);
}

/* -----------------------------------------------------------------------
## Typography ##################################################
----------------------------------------------------------------------- */
:root {
  --fz-xsmall: min(0.5089058524vw + 8.0916030534px, 12px);
  --fz-small: min(0.5089058524vw + 12.0916030534px, 16px);
  --fz-medium: min(1.0178117048vw + 10.1832061069px, 18px);
  --fz-large: min(1.0178117048vw + 14.1832061069px, 22px);
  --fz-xxlarge: min(2.0356234097vw + 20.3664122137px, 36px);
  --fz-c-heading: var(--fz-xxlarge);
  --fz-c-lead: var(--fz-medium);
}

/* -----------------------------------------------------------------------
## Size ##################################################
----------------------------------------------------------------------- */
:root {
  --contents-width: min(100%, 920px);
}

/* -----------------------------------------------------------------------
## Space ##################################################
----------------------------------------------------------------------- */
:root {
  --space-section-inline: calc(24/375 * 100%);
}

/* -----------------------------------------------------------------------
## Transition ##################################################
----------------------------------------------------------------------- */
:root {
  --image-scale: 1.1;
  --image-scale-transition: scale 0.4s 0s ease-out;
  --image-opacity: .8;
  --image-opacity-transition: opacity 0.2s 0s linear;
}

/*! -----------------------------------------------------------------------
## Foundation ##################################################
----------------------------------------------------------------------- */
:where(.hajimete_ct) * {
  font-feature-settings: normal;
}
:where(.hajimete_ct) p, :where(.hajimete_ct) h1, :where(.hajimete_ct) h2, :where(.hajimete_ct) h3, :where(.hajimete_ct) h4, :where(.hajimete_ct) h5, :where(.hajimete_ct) h6 {
  margin: 0;
}
:where(.hajimete_ct) ul, :where(.hajimete_ct) ol, :where(.hajimete_ct) dl {
  padding: 0;
  margin: 0;
  list-style: none;
}
:where(.hajimete_ct) em {
  font-style: normal;
  font-weight: 700;
}
:where(.hajimete_ct) a {
  text-decoration: none;
}
:where(.hajimete_ct) img {
  display: block;
  max-width: 100%;
  height: auto;
}
:where(.hajimete_ct) img:is([data-transition=opacity]) {
  transition: var(--image-opacity-transition);
}
:where(.hajimete_ct) button {
  padding: 0;
}
:where(.hajimete_ct) button:focus {
  outline: none;
}
:where(.hajimete_ct) button:focus-visible {
  outline: 1px solid var(--pagination-color);
}

.fca_shop-header.j-shop-header {
  display: none;
}

#footercontent .fsc_gfooter__breadcrumb {
  display: none !important;
}

:where(.hajimete_ct) {
  padding-top: min(15.5216284987vw + -43.2061068702px, 76px);
  padding-bottom: 64px;
  font-size: var(--fz-medium);
  line-height: 2;
  letter-spacing: 0.04em;
}
:where(.hajimete_ct) .splide__pagination {
  gap: 20px;
  margin-top: min(2.0356234097vw + 8.3664122137px, 24px);
}
:where(.hajimete_ct) .splide__pagination__page {
  width: 16px;
  height: 16px;
  background-color: #fff;
  border: 1px solid var(--pagination-color);
  border-radius: 50%;
}
:where(.hajimete_ct) .splide__pagination__page.is-active {
  background-color: var(--pagination-color);
}
:where(.hajimete_ct) .splide__arrows {
  position: absolute;
  top: 50%;
  bottom: 50%;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  transform: translateY(-50%);
}
:where(.hajimete_ct) .splide__arrow {
  display: grid;
  place-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--pagination-color);
  border: 1px solid var(--pagination-color);
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
:where(.hajimete_ct) .splide__arrow svg {
  fill: #fff;
}
:where(.hajimete_ct) .splide__arrow.splide__arrow--prev {
  translate: -50% 0;
}
:where(.hajimete_ct) .splide__arrow.splide__arrow--prev svg {
  transform: rotate(180deg);
}
:where(.hajimete_ct) .splide__arrow.splide__arrow--next {
  translate: 50% 0;
}

/* -----------------------------------------------------------------------
## Heading ##################################################
----------------------------------------------------------------------- */
.c-heading_ct {
  font-family: var(--a1Mincho);
  font-size: var(--fz-c-heading);
  font-weight: 700;
  line-height: 1.8571428571;
  text-align: center;
}
.c-heading_ct [data-marker] {
  position: relative;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.c-heading_ct [data-marker]::after {
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  aspect-ratio: 570/44;
  margin-left: auto;
  margin-right: auto;
  content: "";
  background: url("../images/bg-heading-marker.png") no-repeat 0 0/100% auto;
  transform-origin: left;
}
.c-heading_ct [data-marker-color=yellow]::after {
  background: url("../images/bg-heading-marker-yellow.png") no-repeat 0 0/100% auto;
}
.c-heading_ct [data-line] {
  padding-bottom: 8px;
  background: linear-gradient(currentColor, currentColor) 0 100%/100% 1px no-repeat;
  transition: background-position 0.4s;
}

/* -----------------------------------------------------------------------
## Text ##################################################
----------------------------------------------------------------------- */
.c-lead_ct {
  font-size: var(--fz-c-lead);
  letter-spacing: 0.04em;
}
.c-lead_ct a {
  font-weight: 700;
  text-decoration: underline;
}
.c-lead_ct + .c-lead_ct {
  margin-top: 2em;
}
.c-lead_ct:is(.c-heading_ct + *) {
  margin-top: max(-2.0356234097vw + 39.6335877863px, 24px);
}

/* -----------------------------------------------------------------------
## Columns ##################################################
----------------------------------------------------------------------- */
.c-2columns_ct {
  display: grid;
  gap: calc(35/375 * 100vw);
}

.c-4columns_ct {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(24/375 * 100vw) calc(15/375 * 100vw);
}

/* -----------------------------------------------------------------------
## Button ##################################################
----------------------------------------------------------------------- */
.c-button_ct {
  --button-color: var(--text);
  position: relative;
  display: grid;
  place-items: center;
  min-height: 80px;
  font-size: max(-0.5089058524vw + 17.9083969466px, 14px);
  line-height: 1.75;
  color: #fff;
  text-align: center;
  background-color: var(--button-color);
  border: 1px solid var(--button-color);
  border-radius: calc(infinity * 1px);
  transition: color 0.3s, background-color 0.3s;
}
.c-button_ct strong {
  font-size: calc(22/16 * 1rem);
  line-height: 1.375;
}
.c-button_ct svg {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 28px;
  margin: auto;
}
.c-button_ct:is([data-arrow=right]) svg {
  width: 6px;
}

.c-siteTop_ct {
  display: grid;
  place-items: center;
  width: 327px;
  min-height: 70px;
  margin-top: 24px;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  border: 1px solid var(--bd-brown);
  border-radius: 10px;
  transition: opacity 0.2s 0s linear;
}
.c-siteTop_ct img {
  grid-area: 1/1/2/2;
}
.c-siteTop_ct svg {
  grid-area: 1/1/2/2;
  justify-self: end;
  width: 20px;
  height: 20px;
  margin-right: 24px;
}

.c-floating_ct {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  transition: translate 0.4s 0s ease-out;
  translate: 0 100%;
}
.c-floating_ct::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
  background-color: #fff;
  filter: blur(10px);
}
.c-floating_ct::after {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 50%;
  content: "";
  background-color: #fff;
}
.c-floating_ct .seriesList_ct {
  position: relative;
  z-index: 2;
  width: var(--contents-width);
  padding: 24px var(--space-section-inline);
  margin: 0;
}
.c-floating_ct[data-floating=true] {
  translate: 0 0;
}

/*! -----------------------------------------------------------------------
## Layout ##################################################
----------------------------------------------------------------------- */
/* ページタイトル ################# */
.pageTitle_ct {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pageTitle_ct::after {
  position: absolute;
  top: -5px;
  right: 0;
  left: 0;
  z-index: -1;
  width: min(34.3511450382vw + 142.1832061069px, 406px);
  aspect-ratio: 198/48;
  margin: auto;
  content: "";
  background: url("../images/title-marker.png") no-repeat center/100% auto;
  transform-origin: left;
}
.pageTitle_ct [src*=title-text] {
  width: min(33.5877862595vw + 145.0458015267px, 403px);
}
.pageTitle_ct span {
  margin-top: 8px;
  font-size: min(2.0356234097vw + 6.3664122137px, 22px);
  font-weight: 700;
  line-height: 2;
  color: var(--text-brown);
  letter-spacing: 0.1em;
}
.pageTitle_ct [src*=logo] {
  width: min(41.2213740458vw + 125.4198473282px, 442px);
}

.kv_ct {
  position: relative;
  --pagination-color: var(--bg-red);
  padding-top: min(5.5979643766vw + 21.0076335878px, 64px);
  overflow: hidden;
}
.kv_ct .splide__track {
  overflow: visible;
}

/* イントロ ################# */
.introduction_ct {
  position: relative;
  width: var(--contents-width);
  padding: 48px var(--space-section-inline);
  margin-top: min(10.1781170483vw + -14.1679389313px, 64px);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  background-color: var(--bg-yellow-light);
}
.introduction_ct [src*=intro] {
  position: absolute;
  bottom: -10px;
  right: 0;
  z-index: 2;
  width: min(19.3384223919vw + 111.4809160305px, 260px);
  content: "";
  translate: min(6.106870229vw + -46.9007633588px, 0px) 45%;
}

.introduction_ct__inner_ct {
  grid-area: 1/1/2/2;
}

/* -----------------------------------------------------------------------
## 初心者向けキット ##################################################
----------------------------------------------------------------------- */
.kit_ct {
  padding-left: var(--space-section-inline);
  padding-right: var(--space-section-inline);
  margin-top: min(6.3613231552vw + 81.1450381679px, 130px);
  counter-reset: secret;
}
.kit_ct .c-heading_ct {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.kit_ct .c-heading_ct::before {
  position: absolute;
  bottom: min(1.0178117048vw + 0.1832061069px, 8px);
  left: max(-11.4503816794vw + 47.9389312977px, -40px);
  width: min(4.0712468193vw + 42.7328244275px, 74px);
  height: min(6.8702290076vw + 74.2366412214px, 127px);
  content: "";
  background: url("../images/introduction.png") no-repeat center/100% auto;
}
.kit_ct [src*=title-kit] {
  width: 328px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
}

.kit__stack_ct {
  display: flex;
  flex-direction: column;
  gap: min(6.106870229vw + 17.0992366412px, 64px);
  margin-top: min(3.8167938931vw + 20.6870229008px, 50px);
}

/* ひみつ ################# */
.secret_ct {
  max-width: 792px;
  margin-left: auto;
  margin-right: auto;
  counter-increment: secret;
}
.secret__title_ct {
  display: grid;
  gap: 8px;
  align-items: center;
  margin-top: min(4.0712468193vw + 4.7328244275px, 36px);
  font-size: var(--fz-large);
  font-weight: 700;
  line-height: 2;
}
.secret__title_ct::before {
  width: -moz-fit-content;
  width: fit-content;
  padding: min(0.7633587786vw + 2.1374045802px, 8px) 10px;
  font-family: var(--a1Mincho);
  line-height: 1;
  color: #fff;
  content: "ひみつ" counter(secret);
  background-color: var(--bg-yellow);
  border-radius: 2px;
}
.secret__text_ct {
  margin-top: min(3.8167938931vw + -14.3129770992px, 15px);
}

/* -----------------------------------------------------------------------
## ページ内ナビ ##################################################
----------------------------------------------------------------------- */
.series_ct {
  width: var(--contents-width);
  padding: max(-4.0712468193vw + 79.2671755725px, 48px) min(19.3384223919vw + -48.5190839695px, 100px) max(-1.0178117048vw + 79.8167938931px, 72px);
  margin-top: max(-2.5445292621vw + 61.5419847328px, 42px);
  margin-left: auto;
  margin-right: auto;
  background-color: #F7FDFF;
}
.series_ct [src*=title-series] {
  width: 167px;
  margin-left: auto;
  margin-right: auto;
}

.seriesList_ct {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: min(4.3256997455vw + -1.2213740458px, 32px);
  margin-top: 32px;
  line-height: 1.5;
  text-align: center;
}
.seriesList_ct a {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  height: 90px;
  font-size: var(--fz-small);
  font-weight: 700;
  line-height: 1.4285714286;
}
.seriesList_ct a::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background-color: var(--bg-color);
  filter: blur(10px);
  border-radius: 1000px;
}
.seriesList_ct a svg {
  width: 9px;
}
.seriesList_ct a:is([data-color=red] *) {
  --bg-color: var(--bg-red-light);
}
.seriesList_ct a:is([data-color=yellow] *) {
  --bg-color: var(--bg-yellow-light);
}
.seriesList_ct a:is([data-color=green] *) {
  --bg-color: var(--bg-green-light);
}

.balloon_ct {
  position: relative;
  z-index: 2;
  display: block;
  padding-top: min(2.0356234097vw + -3.6335877863px, 12px);
  padding-bottom: min(2.0356234097vw + -3.6335877863px, 12px);
  margin-bottom: 20px;
  font-size: var(--fz-small);
  font-weight: 700;
  color: #fff;
  background-color: var(--balloon-color);
  border-radius: 2px;
}
.balloon_ct::after {
  position: absolute;
  top: calc(100% - 4px);
  left: 0;
  right: 0;
  width: 12px;
  height: 10px;
  margin-left: auto;
  margin-right: auto;
  clip-path: path("M6.86 8.57a1 1 0 0 1-1.72 0L.91 1.52A1 1 0 0 1 1.77 0h8.46a1 1 0 0 1 .86 1.51Z");
  content: "";
  background-color: var(--balloon-color);
}
.balloon_ct:is([data-color=red] *) {
  --balloon-color: var(--bg-red);
}
.balloon_ct:is([data-color=yellow] *) {
  --balloon-color: var(--bg-yellow);
}
.balloon_ct:is([data-color=green] *) {
  --balloon-color: var(--bg-green);
}

/* -----------------------------------------------------------------------
## てとりあしとりレッスン ##################################################
----------------------------------------------------------------------- */
.lesson_ct {
  width: var(--contents-width);
  padding: max(0vw + 64px, 64px) min(10.1781170483vw + -14.1679389313px, 64px);
  margin-left: auto;
  margin-right: auto;
  background-color: #FFFAF8;
}
.lesson_ct [src*=title-lesson] {
  width: 158px;
  margin-left: auto;
  margin-right: auto;
}
.lesson_ct .c-heading_ct {
  color: var(--color-lesson);
}
.lesson_ct .c-lead_ct a {
  color: var(--color-lesson);
}
.lesson_ct .c-button_ct {
  max-width: 325px;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  font-size: calc(16/16 * 1rem);
  --button-color: var(--color-lesson);
}
.lesson__note_ct {
  margin-top: max(-1.272264631vw + 9.7709923664px, 0px);
  margin-bottom: max(-2.5445292621vw + 44.5419847328px, 25px);
  font-size: var(--fz-xsmall);
  color: var(--text-brown);
  text-align: center;
}
.lesson__note_ct small {
  font-size: inherit;
}
.lesson__note_ct small::before {
  content: "※";
}
.lesson__text_ct {
  margin-top: 35px;
  font-size: calc(18/16 * 1rem);
  line-height: 1.5;
  text-align: center;
}
.lesson__text_ct b {
  font-weight: 700;
}
.lesson__image_ct {
  margin-top: 24px;
}

/* 例 ################# */
.example_ct {
  margin-top: 25px;
}
.example__heading_ct {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  padding-bottom: 16px;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--fz-small);
  line-height: 1.9285714286;
  text-align: center;
}
.example__heading_ct span {
  position: relative;
  z-index: 2;
  font-family: var(--a1Mincho);
  font-size: var(--fz-large);
  line-height: 1.5;
}
.example__heading_ct::after {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  z-index: 1;
  width: 92%;
  aspect-ratio: 570/44;
  margin-left: auto;
  margin-right: auto;
  content: "";
  background: url("../images/bg-heading-marker.png") no-repeat 0 0/100% auto;
}
.example__columns_ct {
  gap: calc(45/375 * 100vw);
  margin-top: 35px;
}
.example__columns_ct .c-2columns__item_ct {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
}
.example__columns_ct [src*=badge-] {
  position: absolute;
  top: -10px;
  right: 10px;
  width: 100px;
  height: 100px;
}
.example__columns_ct [src*=badge-example03] {
  top: -20px;
  width: 100px;
  height: 110px;
}
.example__copy_ct {
  font-size: min(0.5089058524vw + 14.0916030534px, 18px);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.example__copy_ct span {
  padding-bottom: 4px;
  background: linear-gradient(currentColor, currentColor) 0 100%/100% 1px no-repeat;
  transition: background-position 0.4s;
}

/* ステップアップ式レッスン ################# */
.stepup_ct {
  margin-top: 52px;
}
.stepup__heading_ct {
  display: grid;
  grid-template-areas: "title01" "title02" "title03";
  gap: 16px;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--a1Mincho);
  font-size: calc(28/16 * 1rem);
  text-align: center;
}
.stepup__heading_ct [src*=title-stepup01] {
  width: 315px;
  margin-left: auto;
  margin-right: auto;
}
.stepup__heading_ct [src*=title-stepup02] {
  width: 210px;
  margin-left: auto;
  margin-right: auto;
}
.stepup__heading_ct span {
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.stepup__heading_ct span[data-line] {
  padding-bottom: 8px;
  background: linear-gradient(currentColor, currentColor) 0 100%/100% 1px no-repeat;
  transition: background-position 0.4s;
}
.stepup__heading_ct span[data-line]:not(:has(img)) {
  padding-bottom: 0;
}
.stepup__heading_ct > span {
  display: contents;
}
.stepup__heading_ct > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: title01;
}
.stepup__heading_ct > *:nth-child(2) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: title02;
}
.stepup__heading_ct > *:nth-child(3) {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  grid-area: title03;
}
.stepup__lead_ct {
  margin-top: max(-2.5445292621vw + 49.5419847328px, 30px);
}

.monthly_ct {
  --pagination-color: var(--color-lesson);
  margin-top: min(2.9357798165vw + 4.9908256881px, 32px);
}
.monthly_ct .splide__track {
  padding-top: 50px;
  padding-bottom: 24px;
}
.monthly_ct .splide__arrows {
  transform: translateY(-20%);
}
.monthly_ct .splide__arrow {
  transition: opacity 0.2s 0s linear;
}
.monthly_ct .splide__arrow[disabled] {
  opacity: 0;
}
.monthly_ct .splide__pagination {
  margin-top: 0;
}

.monthlyBox_ct {
  position: relative;
  padding: 40px min(2.9357798165vw + 12.9908256881px, 40px);
  background-color: #fff;
  border: 1px solid var(--color-lesson);
  border-radius: 10px;
}
.monthlyBox__item_ct {
  display: grid;
  grid-template-areas: "text tool" "text image";
  grid-template-rows: auto 1fr;
  grid-template-columns: auto min(4.4036697248vw + 141.4862385321px, 182px);
  gap: max(-0.1834862385vw + 15.6880733945px, 14px) max(-0.3669724771vw + 17.376146789px, 14px);
  align-items: start;
}
.monthlyBox__item_ct:nth-child(1) {
  padding-bottom: 28px;
}
.monthlyBox__item_ct:nth-child(2) {
  padding-top: 24px;
  background-image: linear-gradient(to right, transparent 2px, #583C32 1px);
  background-repeat: repeat-x;
  background-position: top;
  background-size: 3px 1px;
}
.monthlyBox__item_ct:is([data-item="6"]) {
  margin-bottom: -25px;
}
.monthlyBox__item_ct:is([data-item="6"])::after {
  position: absolute;
  bottom: -24px;
  right: 8px;
  display: grid;
  place-content: center;
  width: 75px;
  height: 76px;
  content: "";
  background: url("../images/badge-goal.png") no-repeat center/100% auto;
}
.monthlyBox__balloon_ct {
  position: absolute;
  top: -32px;
  left: 24px;
  display: grid;
  place-content: center;
  width: 140px;
  height: 60px;
  font-size: calc(14/16 * 1rem);
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  white-space: pre;
  background-color: var(--color-lesson);
  border-radius: 10px;
}
.monthlyBox__balloon_ct::after {
  position: absolute;
  top: calc(100% - 5px);
  right: 42px;
  width: 15px;
  height: 12px;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  content: "";
  background-color: var(--color-lesson);
}
.monthlyBox__title_ct {
  display: grid;
  gap: min(1.4678899083vw + 6.495412844px, 20px);
  font-size: min(0.3669724771vw + 12.623853211px, 16px);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.04em;
}
.monthlyBox__title_ct img {
  width: auto;
  height: min(1.8348623853vw + 21.119266055px, 38px);
  margin-left: auto;
  margin-right: auto;
}
.monthlyBox__text_ct {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  -ms-grid-column: 1;
  grid-area: text;
  padding-top: min(2.5688073394vw + 0.3669724771px, 24px);
  font-size: min(0.7339449541vw + 9.247706422px, 16px);
  line-height: 1.5;
}
.monthlyBox__text_ct p {
  padding-top: min(1.2844036697vw + 3.1834862385px, 15px);
}
.monthlyBox__tool_ct {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  position: relative;
  grid-area: tool;
  padding: max(-1.2844036697vw + 19.8165137615px, 8px) 0 max(-1.8348623853vw + 21.880733945px, 5px) 15px;
  font-size: min(1.1009174312vw + 5.871559633px, 16px);
  line-height: 1.5;
  background-color: var(--color-lesson-light);
  border-radius: 2px;
}
.monthlyBox__tool_ct img {
  position: absolute;
  right: max(-2.2018348624vw + -11.7431192661px, -32px);
  bottom: 0;
  width: 145px;
}
.monthlyBox__tool_ct img[src*=tool01] {
  mix-blend-mode: multiply;
}
.monthlyBox__image_ct {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  grid-area: image;
}

/* ポイント ################# */
.point_ct {
  padding: 0 min(4.0712468193vw + 8.7328244275px, 40px) min(4.0712468193vw + 8.7328244275px, 40px);
  margin-top: min(5.5979643766vw + 29.0076335878px, 72px);
  background-color: var(--color-lesson-light);
  border-radius: 10px;
}
.point__heading_ct {
  position: relative;
  top: -8px;
  display: grid;
  gap: 32px;
  justify-items: center;
  font-size: calc(18/16 * 1rem);
  font-weight: 700;
}

.pointBox_ct {
  display: grid;
  gap: min(2.311248074vw + 16.3328197227px, 40px);
  margin-top: 15px;
}
.pointBox__item_ct {
  display: flex;
  gap: 30px;
  align-items: center;
  padding-right: 32px;
}
.pointBox__text_ct {
  flex-grow: 1;
  font-size: min(0.6163328197vw + 11.688751926px, 18px);
  line-height: 2;
}
.pointBox__image_ct {
  width: 97px;
}

/* -----------------------------------------------------------------------
## はじめてさんのきほんのき ##################################################
----------------------------------------------------------------------- */
.basic_ct {
  width: var(--contents-width);
  padding: 64px min(10.1781170483vw + -14.1679389313px, 64px);
  margin-left: auto;
  margin-right: auto;
  background-color: var(--color-basic-light);
}
.basic_ct .c-lead_ct {
  margin-top: 32px;
}
.basic_ct .c-2columns_ct {
  margin-top: 32px;
}
.basic_ct .c-2columns_ct a img {
  transition: opacity 0.2s 0s linear;
}
.basic_ct .c-button_ct {
  max-width: 325px;
  margin-top: 36px;
  margin-left: auto;
  margin-right: auto;
  --button-color: var(--color-basic);
}
.basic_ct .c-button_ct span {
  font-size: calc(14/16 * 1rem);
}
.basic__heading_ct {
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.basic__note_ct {
  margin-top: 12px;
  font-size: var(--fz-xsmall);
  text-align: center;
}
.basic__note_ct small {
  font-size: inherit;
}
.basic__note_ct small::before {
  content: "※";
}
.basic__text_ct {
  margin-top: 12px;
  font-size: min(0.5089058524vw + 14.0916030534px, 18px);
  font-weight: 700;
  line-height: 1.5;
}

/* -----------------------------------------------------------------------
## PICK UP LESSON ##################################################
----------------------------------------------------------------------- */
.pickup_ct {
  max-width: var(--contents-width);
  padding-top: max(-1.5267175573vw + 61.7251908397px, 50px);
  padding-bottom: min(1.5267175573vw + 58.2748091603px, 70px);
  margin-left: auto;
  margin-right: auto;
}
.pickup__heading_ct {
  display: grid;
  gap: 10px;
  font-size: var(--fz-medium);
  line-height: 2;
  text-align: center;
}
.pickup__heading_ct img {
  width: min(12.213740458vw + 168.1984732824px, 262px);
  margin-left: auto;
  margin-right: auto;
}

.pickupSlide_ct {
  --pagination-color: var(--color-pickup);
  margin-top: max(0vw + 40px, 40px);
}
.pickupSlide_ct .splide__arrows {
  height: 60px;
  pointer-events: none;
}
.pickupSlide_ct .splide__arrow {
  width: 60px;
  height: 60px;
  pointer-events: all;
  background-color: var(--color-pickup-light);
  border: 0;
}
.pickupSlide_ct .splide__arrow svg {
  fill: var(--color-pickup);
}
.pickupSlide_ct .splide__arrow--prev {
  translate: 0;
}
.pickupSlide_ct .splide__arrow--next {
  translate: 0;
}

/* -----------------------------------------------------------------------
## 関連アイテム ##################################################
----------------------------------------------------------------------- */
.relationItem_ct {
  width: var(--contents-width);
  padding: 64px min(10.1781170483vw + -14.1679389313px, 64px);
  margin-left: auto;
  margin-right: auto;
  background-color: #F7FDFF;
}
.relationItem_ct [src*=title-relation] {
  width: 215px;
  margin-left: auto;
  margin-right: auto;
}
.relationItem_ct .c-4columns_ct {
  margin-top: 36px;
}
.relationItem_ct .c-button_ct {
  --button-color: var(--text-blue);
  max-width: 325px;
  margin-top: 36px;
  margin-left: auto;
  margin-right: auto;
}
.relationItem_ct .c-button_ct span {
  font-size: calc(14/16 * 1rem);
  font-weight: 700;
}
.relationItem__text_ct {
  margin-top: 4px;
  font-size: min(1.0178117048vw + 8.1832061069px, 16px);
  line-height: 1.5;
}

/* -----------------------------------------------------------------------
## NEXT ##################################################
----------------------------------------------------------------------- */
.next_ct {
  width: var(--contents-width);
  padding: 64px min(10.1781170483vw + -14.1679389313px, 64px);
  margin-left: auto;
  margin-right: auto;
  background-color: var(--color-next-light);
}
.next_ct .c-lead_ct {
  margin-top: max(-5.8524173028vw + 96.9465648855px, 52px);
}
.next__heading_ct {
  position: relative;
  display: grid;
  gap: 12px;
  text-align: center;
}
.next__heading_ct * {
  position: relative;
  z-index: 2;
}
.next__heading_ct [src*=title-next01] {
  width: 175px;
  margin-left: auto;
  margin-right: auto;
}
.next__heading_ct span {
  font-family: var(--a1Mincho);
  font-size: min(1.5267175573vw + 16.2748091603px, 28px);
}
.next__heading_ct [src*=title-next02] {
  width: min(5.5979643766vw + 69.0076335878px, 112px);
  margin-left: auto;
  margin-right: auto;
}
.next__heading_ct::after {
  position: absolute;
  bottom: min(3.8167938931vw + -34.3129770992px, -5px);
  left: 0;
  right: 0;
  z-index: 1;
  width: 146px;
  height: 12px;
  margin-left: auto;
  margin-right: auto;
  content: "";
  background: url("../images/line-green.png") no-repeat center/100% auto;
}

.nextGrid_ct {
  display: grid;
  grid-template-columns: min(20.3562340967vw + 43.6641221374px, 200px) min(10.1781170483vw + 7.8320610687px, 86px) min(30.534351145vw + 45.4961832061px, 280px);
  max-width: 566px;
  margin-top: max(-2.0356234097vw + 87.6335877863px, 72px);
  margin-left: auto;
  margin-right: auto;
}
.nextGrid_ct + .nextGrid_ct {
  margin-top: 60px;
}
.nextGrid__left_ct {
  position: relative;
}
.nextGrid__left_ct::before {
  position: absolute;
  top: -44px;
  left: 0;
  right: 0;
  width: 95px;
  height: 55px;
  margin-left: auto;
  margin-right: auto;
  content: "";
  background: url("../images/text-hajimete.png") no-repeat center/contain;
}
.nextGrid__arrow_ct {
  padding-top: min(11.4503816794vw + 32.0610687023px, 120px);
}
.nextGrid__arrow_ct img {
  width: max(0vw + 32px, 32px);
  margin-left: auto;
  margin-right: auto;
}
.nextGrid__right_ct {
  position: relative;
  margin-top: min(13.7404580153vw + 24.4732824427px, 130px);
}
.nextGrid__right_ct::before {
  position: absolute;
  top: max(-6.8702290076vw + -12.2366412214px, -65px);
  left: min(1.272264631vw + 5.2290076336px, 15px);
  width: min(12.7226463104vw + 22.2900763359px, 120px);
  height: min(12.7226463104vw + 22.2900763359px, 120px);
  content: "";
  background: url("../images/badge-next.png") no-repeat center/100% auto;
}
.nextGrid__text_ct {
  margin-top: 8px;
  font-size: min(1.0178117048vw + 8.1832061069px, 16px);
  font-weight: 700;
  line-height: 1.5;
}

/* -----------------------------------------------------------------------
## ハンドメイド6ヵ月計画 ##################################################
----------------------------------------------------------------------- */
.project_ct {
  width: var(--contents-width);
  padding: 60px min(10.1781170483vw + -14.1679389313px, 64px) 64px;
  margin-left: auto;
  margin-right: auto;
}
.project_ct [src*=title-project] {
  width: 158px;
  margin-left: auto;
  margin-right: auto;
}
.project_ct .c-heading_ct [data-marker]::after {
  bottom: 0;
}
.project_ct .c-button_ct {
  max-width: 325px;
  margin-top: 32px;
  margin-left: auto;
  margin-right: auto;
  font-size: calc(16/16 * 1rem);
}
.project__text_ct {
  text-align: center;
}
.project__text_ct a {
  color: #4C9FDB;
  text-decoration: underline;
}
.project__text_ct + .project__text_ct {
  margin-top: 4px;
}

.categoryList_ct {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: space-between;
  width: 90%;
  max-width: 920px;
  margin-top: 1rem;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
}
.categoryList_ct > li {
  width: calc(50% - 1px);
}
.categoryList_ct a {
  position: relative;
  display: grid;
  align-items: center;
  padding: 1.1em 1.5em;
  font-size: min(0.7633587786vw + 8.1374045802px, 14px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.07em;
  background-color: #f7f7f7;
  transition: opacity 0.3s 0s linear;
}
.categoryList_ct a::after {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1em;
  width: 0.5em;
  height: 0.5em;
  margin: auto;
  content: "";
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transition: translate 0.3s 0s linear;
  rotate: 45deg;
}

/* -----------------------------------------------------------------------
## MORE CONTENTS ##################################################
----------------------------------------------------------------------- */
.moreContents_ct {
  width: var(--contents-width);
  padding: 64px min(10.1781170483vw + -14.1679389313px, 64px);
  margin-left: auto;
  margin-right: auto;
  background-color: #F7FDFF;
}
.moreContents_ct [src*=title-moreContents] {
  width: min(13.7404580153vw + 168.4732824427px, 274px);
  margin-left: auto;
  margin-right: auto;
}
.moreContents_ct .c-lead_ct {
  margin-top: 32px;
}

.banners_ct {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: min(6.106870229vw + -6.9007633588px, 40px);
  margin-top: min(2.5445292621vw + 10.4580152672px, 30px);
}
.banners_ct span {
  display: block;
  margin-top: min(3.0534351145vw + -7.4503816794px, 16px);
  font-size: min(1.0178117048vw + 8.1832061069px, 16px);
  font-weight: 700;
  line-height: 1.5;
}

/* -----------------------------------------------------------------------
## SNS ##################################################
----------------------------------------------------------------------- */
.sns_ct {
  padding-top: 64px;
}
.sns_ct [src*=title-sns] {
  width: min(8.6513994911vw + 185.5572519084px, 252px);
  margin-left: auto;
  margin-right: auto;
}
.sns_ct .flexBox_ct {
  display: flex;
  gap: 30px;
  justify-content: center;
  margin-top: 24px;
}

.js-fadeIn {
  opacity: 0;
  transition: opacity 0s 0s linear;
}
.js-fadeIn:is([data-show=true]) {
  opacity: 1;
  transition: opacity 0.8s 0s linear;
}

.js-fadeInUp {
  opacity: 0;
  transition: opacity 0s 0s linear;
  translate: 0 50px;
}
.js-fadeInUp:is([data-show=true]) {
  opacity: 1;
  transition: opacity 0.8s 0s linear, translate 0.8s 0s ease-out;
  translate: 0 0;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    translate: 0 50px;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes marker {
  0% {
    clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
.pageTitle_ct::after {
  animation: marker 0.2s ease-out 1.6s 1 normal backwards running;
}
.pageTitle_ct [src*=title-text] {
  animation: fadeUp 0.8s ease-out 1s 1 normal backwards running;
}
.pageTitle_ct span {
  animation: fadeUp 0.8s ease-out 1.2s 1 normal backwards running;
}
.pageTitle_ct [src*=logo] {
  animation: fadeUp 0.8s ease-out 1.4s 1 normal backwards running;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.kv_ct {
  animation: fadeIn 1s linear 2.5s 1 normal backwards running;
}

.stepup__heading_ct span[data-marker]:is([data-show=false] *)::after,
.c-heading_ct span[data-marker]:is([data-show=false] *)::after {
  clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
  transition: clip-path 0s 0s ease-out;
}
.stepup__heading_ct span[data-marker]:is([data-show=true] *)::after,
.c-heading_ct span[data-marker]:is([data-show=true] *)::after {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.3s 0.8s ease-out;
}
.stepup__heading_ct span[data-line],
.c-heading_ct span[data-line] {
  background-size: 0 1px;
  transition: background-size 0s 0s linear;
}
.stepup__heading_ct span[data-line]:is([data-show=true] *),
.c-heading_ct span[data-line]:is([data-show=true] *) {
  background-size: 100% 1px;
  transition: background-size 0.2s 0.8s ease-out;
}

.seriesList_ct:is([data-anime=false]) .seriesList__item_ct {
  opacity: 0;
  transition: opacity 0s 0s linear;
}
.seriesList_ct:is([data-anime=true]) .seriesList__item_ct:is(:first-child) {
  opacity: 1;
  transition: opacity 0.8s 0s linear;
}
.seriesList_ct:is([data-anime=true]) .seriesList__item_ct:is(:nth-child(2)) {
  opacity: 1;
  transition: opacity 0.8s 0.2s linear;
}
.seriesList_ct:is([data-anime=true]) .seriesList__item_ct:is(:nth-child(3)) {
  opacity: 1;
  transition: opacity 0.8s 0.4s linear;
}

.example__heading_ct:is([data-show=false])::after {
  clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
  transition: clip-path 0s 0s ease-out;
}
.example__heading_ct:is([data-show=true])::after {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.3s 0.8s ease-out;
}

.example__copy_ct span:is([data-show=false] *) {
  background-size: 0% 1px;
  transition: background-size 0s 0s linear;
}
.example__copy_ct span:is([data-show=true] *) {
  background-size: 100% 1px;
  transition: background-size 0.3s 0.8s ease-out;
}

.nextGrid_ct:is([data-anime=false]) .nextGrid__left_ct {
  opacity: 0;
  transition: opacity 0s 0s linear;
}
.nextGrid_ct:is([data-anime=false]) .nextGrid__arrow_ct {
  opacity: 0;
  transition: opacity 0s 0s linear, translate 0s 0s ease-out;
  translate: -50px 0;
}
.nextGrid_ct:is([data-anime=false]) .nextGrid__right_ct {
  opacity: 0;
  transition: opacity 0s 0s linear;
}
.nextGrid_ct:is([data-anime=true]) .nextGrid__left_ct {
  opacity: 1;
  transition: opacity 0.8s 0s linear;
}
.nextGrid_ct:is([data-anime=true]) .nextGrid__arrow_ct {
  opacity: 1;
  transition: opacity 0.8s 0.2s linear, translate 0.8s 0.2s ease-out;
  translate: 0 0;
}
.nextGrid_ct:is([data-anime=true]) .nextGrid__right_ct {
  opacity: 1;
  transition: opacity 0.8s 0.4s linear;
}

/*! -----------------------------------------------------------------------
## 表示 ##################################################
----------------------------------------------------------------------- */
.u-spbr_ct {
  display: inline;
}

.u-pcbr_ct {
  display: none;
}

/*! -----------------------------------------------------------------------
## 背景色 ##################################################
----------------------------------------------------------------------- */
/*! -----------------------------------------------------------------------
## サイズ ##################################################
----------------------------------------------------------------------- */
/*! -----------------------------------------------------------------------
## スタック ##################################################
----------------------------------------------------------------------- */
.u-stack-m {
  display: flex;
  flex-direction: column;
  gap: min(20.3562340967vw + 3.6641221374px, 160px);
}

.u-stack-l {
  display: flex;
  flex-direction: column;
  gap: min(30.534351145vw + -34.5038167939px, 200px);
}

@media screen and (min-width: 640px){
  .monthlyBox__item_ct {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (min-width: 769px){
  .fca_shop-header.j-shop-header {
    display: block;
  }
  .c-heading_ct {
    font-weight: 500;
  }
  .c-heading_ct [data-marker]::after {
    left: 0;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .c-2columns_ct {
    grid-template-columns: 1fr 1fr;
    gap: 30px 5.0377833753%;
  }
  .c-4columns_ct {
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 5.0377833753%;
  }
  .c-floating_ct {
    display: flex;
    justify-content: center;
  }
  .pageTitle_ct [src*=logo] {
    margin-top: 12px;
  }
  .kit_ct .c-heading_ct::before {
    bottom: 8px;
    left: -56px;
  }
  .secret__title_ct {
    grid-template-columns: auto 1fr;
    grid-auto-flow: column;
    gap: 16px;
  }
  .seriesList_ct a {
    display: flex;
    justify-content: center;
    width: 140px;
    height: 140px;
    margin-left: auto;
    margin-right: auto;
  }
  .lesson_ct [src*=title-lesson] {
    margin-bottom: -10px;
  }
  .example__heading_ct::after {
    left: 1%;
    width: 85%;
    margin-left: 0;
    margin-right: 0;
  }
  .example__columns_ct {
    gap: 30px 5.0377833753%;
  }
  .stepup__heading_ct {
    grid-template-areas: "title01 title01" "title02 title03";
    grid-template-columns: auto auto;
    gap: max(-2.0356234097vw + 23.6335877863px, 8px);
  }
  .stepup__heading_ct > span {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .stepup__heading_ct > span > [data-line] {
    padding: 0;
    background: none;
  }
  .stepup__heading_ct > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
  }
  .stepup__heading_ct > *:nth-child(2) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  .stepup__heading_ct > *:nth-child(3) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
  .monthlyBox__item_ct:is([data-item="5"]) .monthlyBox__text_ct {
    padding-top: 5px;
  }
  .monthlyBox__item_ct:is([data-item="6"]) .monthlyBox__text_ct {
    padding-top: 5px;
  }
  .pointBox_ct {
    grid-template-columns: repeat(2, 1fr);
  }
  .basic__heading_ct img {
    width: 266px;
  }
  .categoryList_ct > li {
    width: calc(25% - 2px);
  }
  .banners_ct {
    grid-template-columns: repeat(3, 1fr);
  }
  .u-spbr_ct {
    display: none;
  }
  .u-pcbr_ct {
    display: inline;
  }
}

@media screen and (min-width: 900px){
  .monthlyBox_ct {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
  .monthlyBox__item_ct {
    grid-template-columns: auto min(4.4036697248vw + 141.4862385321px, 182px);
  }
  .monthlyBox__item_ct:nth-child(1) {
    padding-bottom: 0;
  }
  .monthlyBox__item_ct:nth-child(2) {
    padding: 0;
    background-image: none;
  }
  .monthlyBox__item_ct:is([data-item="6"])::after {
    bottom: -8px;
    right: 24px;
  }
  .monthlyBox__balloon_ct {
    top: -30px;
    left: 40px;
  }
}

@media screen and (min-width: 1024px){
  .pickupSlide_ct .splide__arrow--prev {
    translate: -50% 0;
  }
  .pickupSlide_ct .splide__arrow--next {
    translate: 50% 0;
  }
}

@media (hover: hover) and (pointer: fine){
  :where(.hajimete_ct) a:hover {
    text-decoration: underline;
  }
  :where(.hajimete_ct) img:is([data-transition=opacity]):is(a:hover *) {
    opacity: var(--image-opacity);
  }
  .c-lead_ct a:hover {
    text-decoration: none;
  }
  .c-button_ct:hover {
    color: var(--button-color);
    text-decoration: none;
    background-color: #fff;
  }
  .c-siteTop_ct:hover {
    opacity: 0.75;
  }
  .example__columns_ct .c-2columns__item_ct:hover {
    text-decoration: none;
  }
  .basic_ct .c-2columns_ct a:hover img {
    opacity: 0.8;
  }
  .categoryList_ct a:hover {
    text-decoration: none;
    opacity: 0.7;
  }
  .categoryList_ct a:hover::after {
    translate: 0.3em 0;
  }
}