@charset "UTF-8";
:root {
  --scale: 0.0694444444vw;
  --max: 1;
}
@media screen and (max-width: 767px) {
  :root {
    --scale: 0.2666666667vw;
    --max: 10;
  }
}

/* リセットCSS
===================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

body {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  line-height: 1.6;
  font-weight: 500;
  background: #fff;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, button, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  border: 0;
  font: inherit;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

li, dd {
  list-style-type: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  font-weight: normal;
  text-align: left;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

img {
  border: none;
  vertical-align: bottom;
  width: 100%;
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
}
@media (hover: hover) {
  a:hover {
    opacity: 0.7;
  }
}

input, select {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: #fff;
}

/*------------------------------
common
------------------------------*/
body {
  word-break: break-all;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
}
body.is-active {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow-y: scroll; /* スクロールバー補完 */
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
       text-size-adjust: none;
}

main {
  background: #f2edda;
}

/* スマホ用の表示の時はis-pcは非表示 */
@media (max-width: 767px) {
  .pc {
    display: none !important;
  }
}
/* PC用の表示の時はis-spは非表示 */
@media (min-width: 768px) {
  .sp {
    display: none !important;
  }
}
/* コンテンツ幅
------------------------------*/
.inner {
  margin-inline: auto;
  width: clamp(0px, calc(1200 * var(--scale)), calc(1200px * var(--max)));
  max-width: 1200px;
}
@media screen and (max-width: 767px) {
  .inner {
    width: clamp(0px, calc(343 * var(--scale)), calc(343px * var(--max)));
  }
}

/* セクションタイトル
------------------------------*/
.c-sec-title {
  font-size: clamp(0px, calc(32 * var(--scale)), calc(32px * var(--max)));
  line-height: 1.55;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
}
.c-sec-title strong {
  font-size: clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max)));
}
.c-sec-title strong.red {
  color: #e4001b;
}
.c-sec-title strong.blue {
  color: #009caa;
}
@media (max-width: 767px) {
  .c-sec-title {
    font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  }
  .c-sec-title strong {
    font-size: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  }
}

/* セクションリード文
------------------------------*/
.c-lead {
  font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: center;
  margin-top: 1.6em;
}
@media (max-width: 767px) {
  .c-lead {
    font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
    line-height: 2.1428571429;
    letter-spacing: 0;
    margin-top: 1.2em;
  }
}

/* CTA
------------------------------*/
.cta {
  margin-top: clamp(0px, calc(60 * var(--scale)), calc(60px * var(--max)));
  text-align: center;
}
@media (max-width: 767px) {
  .cta {
    margin-top: clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max)));
  }
}

.cta__button {
  display: inline-block;
  background: #ff9e00;
  font-size: clamp(0px, calc(28 * var(--scale)), calc(28px * var(--max)));
  font-weight: 700;
  line-height: 1.0714285714;
  letter-spacing: 0.05em;
  color: #fff !important;
  text-align: center;
  border-radius: 0.28em;
  padding: 0.9em 3.9em;
  box-shadow: 0 0.28em 0 #e96d03;
  position: relative;
}
.cta__button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.857em;
  transform: translateY(-50%);
  background: url(../img/icon-arrow.png) no-repeat center center/contain;
  width: 1.143em;
  aspect-ratio: 1/1;
}
@media (max-width: 767px) {
  .cta__button {
    font-size: clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
    width: 100%;
    padding: 1.2em 0;
  }
  .cta__button::after {
    right: 1.3em;
  }
}

/* bg curve
------------------------------*/
.c-bg01 {
  background: linear-gradient(to bottom, transparent 0 clamp(0px, calc(145 * var(--scale)), calc(145px * var(--max))), var(--bgcolor) clamp(0px, calc(145 * var(--scale)), calc(145px * var(--max))) 100%);
  position: relative;
}
.c-bg01::before {
  content: "";
  position: absolute;
  background: var(--bgcolor);
  transform: translate(-50%, 0%);
  width: 100%;
  left: 50%;
  top: 0%;
  aspect-ratio: 1440/150;
  max-height: 150px;
  -webkit-mask: url(../img/curve.svg) top center/100% 100% no-repeat;
          mask: url(../img/curve.svg) top center/100% 100% no-repeat;
}
.c-bg01 > * {
  position: relative;
  z-index: 10;
}
@media (max-width: 767px) {
  .c-bg01 {
    overflow: hidden;
  }
  .c-bg01::before {
    -webkit-mask: url(../img/curve_sp.svg) top center/100% 100% no-repeat;
            mask: url(../img/curve_sp.svg) top center/100% 100% no-repeat;
    aspect-ratio: 535/280.5;
    width: clamp(0px, calc(535 * var(--scale)), calc(535px * var(--max)));
    max-height: unset;
  }
}

.header .headIcon .recruitmentBtn img {
  width: auto;
}

html.pc, html.sp {
  display: block !important;
}

.swiper-wrapper {
  margin: 0;
}

/*------------------------------
fv
------------------------------*/
@media (min-width: 768px) {
  .fv__image {
    overflow: hidden;
  }
  .fv__image img {
    width: max(clamp(0px, calc(1920 * var(--scale)), calc(1920px * var(--max))), 100vw);
    max-width: unset;
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 767px) {
  .fv__cta {
    margin-top: 7%;
  }
}

/*------------------------------
focus
------------------------------*/
.focus {
  padding: clamp(0px, calc(80 * var(--scale)), calc(80px * var(--max))) 0 clamp(0px, calc(85 * var(--scale)), calc(85px * var(--max)));
}
@media (max-width: 767px) {
  .focus {
    padding: clamp(0px, calc(48 * var(--scale)), calc(48px * var(--max))) 0 clamp(0px, calc(60 * var(--scale)), calc(60px * var(--max)));
  }
}

.focus__lead {
  margin-bottom: clamp(0px, calc(50 * var(--scale)), calc(50px * var(--max)));
}
@media (max-width: 767px) {
  .focus__lead {
    margin-bottom: clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max)));
  }
}

.focus__list {
  margin-top: clamp(0px, calc(44 * var(--scale)), calc(44px * var(--max)));
  display: flex;
  gap: 0 clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max)));
}
@media (max-width: 767px) {
  .focus__list {
    flex-wrap: wrap;
    gap: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max))) clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
    margin-top: clamp(0px, calc(29 * var(--scale)), calc(29px * var(--max)));
  }
}

.focus__item {
  width: calc(25% - clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max))) * 3 / 4);
}
@media (max-width: 767px) {
  .focus__item {
    width: calc(50% - clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max))) / 2);
  }
}

.focus__image {
  box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.1);
  border-radius: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
}
.focus__image img {
  aspect-ratio: 270/244;
  -o-object-fit: cover;
     object-fit: cover;
}

.focus__name {
  font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  font-weight: 700;
  line-height: 1;
  text-align: center;
  margin-top: 0.8em;
}
@media (max-width: 767px) {
  .focus__name {
    font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
  }
}

.focus__note {
  font-size: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.05em;
  font-family: "Inter", sans-serif;
  text-align: center;
  margin-top: 2.9em;
}
@media (max-width: 767px) {
  .focus__note {
    font-size: clamp(0px, calc(12 * var(--scale)), calc(12px * var(--max)));
    line-height: 1.6666666667;
    text-align: left;
    margin-top: 2.3em;
  }
}

/*------------------------------
problem
------------------------------*/
.problem {
  background: #d5d1c1;
  padding: clamp(0px, calc(70 * var(--scale)), calc(70px * var(--max))) 0 clamp(0px, calc(80 * var(--scale)), calc(80px * var(--max)));
  border-radius: clamp(0px, calc(80 * var(--scale)), calc(80px * var(--max))) clamp(0px, calc(80 * var(--scale)), calc(80px * var(--max))) 0 0;
  position: relative;
}
.problem::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translate(-50%, 100%);
  background: #d5d1c1;
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
          clip-path: polygon(50% 100%, 0 0, 100% 0);
  width: 100%;
  aspect-ratio: 1440/80;
}
@media (max-width: 767px) {
  .problem {
    padding: clamp(0px, calc(56 * var(--scale)), calc(56px * var(--max))) 0 clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max)));
    border-radius: clamp(0px, calc(32 * var(--scale)), calc(32px * var(--max))) clamp(0px, calc(32 * var(--scale)), calc(32px * var(--max))) 0 0;
  }
  .problem::after {
    aspect-ratio: 375/40;
  }
}

.problem__list {
  display: flex;
  gap: 0 clamp(0px, calc(42 * var(--scale)), calc(42px * var(--max)));
  margin-top: clamp(0px, calc(45 * var(--scale)), calc(45px * var(--max)));
}
@media (max-width: 767px) {
  .problem__list {
    flex-direction: column;
    gap: clamp(0px, calc(25 * var(--scale)), calc(25px * var(--max))) 0;
    margin-top: clamp(0px, calc(27 * var(--scale)), calc(27px * var(--max)));
  }
}

.problem__item {
  width: calc(33.3% - clamp(0px, calc(42 * var(--scale)), calc(42px * var(--max))) * 2 / 3);
  border-radius: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  background: #fff;
  padding: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  display: flex;
  flex-direction: column;
}
@media (max-width: 767px) {
  .problem__item {
    width: 100%;
    padding: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max))) clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max))) clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
  }
}

.problem__header {
  display: flex;
  align-items: flex-start;
}

.problem__label {
  display: inline-block;
  font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  font-weight: 700;
  background: #d5d1c1;
  padding: 0.6em 1.4em;
  border-radius: 1.2em;
  position: relative;
}
.problem__label::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translate(-50%, 100%);
  background: #d5d1c1;
  -webkit-clip-path: polygon(100% 100%, 0 0, 100% 0);
          clip-path: polygon(100% 100%, 0 0, 100% 0);
  width: 0.55em;
  aspect-ratio: 1/1;
}
@media (max-width: 767px) {
  .problem__label {
    font-size: clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
    transform: translateX(1em);
  }
}

.problem__illust {
  height: clamp(0px, calc(120 * var(--scale)), calc(120px * var(--max)));
  width: auto;
}
@media (max-width: 767px) {
  .problem__illust {
    height: clamp(0px, calc(112 * var(--scale)), calc(112px * var(--max)));
    transform: translateX(7%);
  }
}

.problem__text {
  flex: 1;
  background: #f2f2f2;
  font-size: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  font-weight: 400;
  line-height: 2;
  border-radius: 0.5em;
  padding: 1.1em 1em;
  text-align: center;
}
@media (max-width: 767px) {
  .problem__text {
    font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
    padding: 0.7em 1em;
  }
}

/*------------------------------
solution
------------------------------*/
.solution {
  padding: clamp(0px, calc(150 * var(--scale)), calc(150px * var(--max))) 0 clamp(0px, calc(90 * var(--scale)), calc(90px * var(--max)));
}
@media (max-width: 767px) {
  .solution {
    padding: clamp(0px, calc(83 * var(--scale)), calc(83px * var(--max))) 0 clamp(0px, calc(50 * var(--scale)), calc(50px * var(--max)));
  }
}

.solution__list {
  margin-top: clamp(0px, calc(36 * var(--scale)), calc(36px * var(--max)));
  display: flex;
  gap: 0 clamp(0px, calc(42 * var(--scale)), calc(42px * var(--max)));
}
@media (max-width: 767px) {
  .solution__list {
    flex-direction: column;
    gap: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max))) 0;
    margin-top: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  }
}

.solution__item {
  width: calc(33.3% - clamp(0px, calc(42 * var(--scale)), calc(42px * var(--max))) * 2 / 3);
  background: #fff;
  border-radius: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  padding: clamp(0px, calc(26 * var(--scale)), calc(26px * var(--max))) clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max))) clamp(0px, calc(15 * var(--scale)), calc(15px * var(--max)));
}
@media (max-width: 767px) {
  .solution__item {
    width: 100%;
    padding: clamp(0px, calc(26 * var(--scale)), calc(26px * var(--max))) clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max))) clamp(0px, calc(27 * var(--scale)), calc(27px * var(--max)));
  }
}

.solution__header {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.solution__label {
  display: inline-block;
  font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  background: #009caa;
  padding: 0.6em 0.8em;
  border-radius: 1.2em;
  margin-top: 0.5em;
  position: relative;
}
.solution__label::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translate(132%, 100%);
  background: #009caa;
  -webkit-clip-path: polygon(100% 100%, 0 0, 100% 0);
          clip-path: polygon(100% 100%, 0 0, 100% 0);
  width: 0.55em;
  aspect-ratio: 1/1;
}
@media (max-width: 767px) {
  .solution__label {
    font-size: clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
    padding: 0.5em;
    transform: translateY(-0.5em);
  }
}

.solution__person {
  width: clamp(0px, calc(85 * var(--scale)), calc(85px * var(--max)));
  -o-object-fit: contain;
     object-fit: contain;
}
@media (max-width: 767px) {
  .solution__person {
    width: clamp(0px, calc(77 * var(--scale)), calc(77px * var(--max)));
  }
}

@media (max-width: 767px) {
  .solution__image {
    transform: translateY(-9%);
  }
}

.solution__heading {
  font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  margin-top: 1.2em;
}
@media (max-width: 767px) {
  .solution__heading {
    font-size: clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
    margin-top: 0;
  }
}

.solution__text {
  font-size: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.05em;
  margin-top: 1em;
  font-family: "Inter", sans-serif;
}
@media (max-width: 767px) {
  .solution__text {
    font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
    margin-top: 0.6em;
  }
}

.solution__button {
  margin-top: clamp(0px, calc(64 * var(--scale)), calc(64px * var(--max)));
  text-align: center;
}

/*------------------------------
reason
------------------------------*/
.reason {
  padding: clamp(0px, calc(96 * var(--scale)), calc(96px * var(--max))) 0 clamp(0px, calc(250 * var(--scale)), calc(250px * var(--max)));
}
.reason > * {
  position: relative;
  z-index: 10;
}
@media (max-width: 767px) {
  .reason {
    padding: clamp(0px, calc(48 * var(--scale)), calc(48px * var(--max))) 0 clamp(0px, calc(54 * var(--scale)), calc(54px * var(--max)));
  }
}

.reason__image {
  display: block;
  width: calc(320 / 1200 * 100%);
  margin: 0 auto;
}
@media (max-width: 767px) {
  .reason__image {
    width: clamp(0px, calc(165 * var(--scale)), calc(165px * var(--max)));
  }
}

.reason__header {
  color: #fff;
  margin-top: clamp(0px, calc(45 * var(--scale)), calc(45px * var(--max)));
}
@media (max-width: 767px) {
  .reason__header {
    margin-top: clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max)));
  }
}

.reason__list {
  width: calc(960 / 1200 * 100%);
  margin: 0 auto;
  padding: clamp(0px, calc(46 * var(--scale)), calc(46px * var(--max))) 0 clamp(0px, calc(55 * var(--scale)), calc(55px * var(--max)));
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max)));
}
@media (max-width: 767px) {
  .reason__list {
    width: 100%;
    flex-direction: column;
    gap: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max))) 0;
    padding: clamp(0px, calc(34 * var(--scale)), calc(34px * var(--max))) 0 12%;
  }
}

.reason__item {
  width: calc(50% - clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max))) / 2);
  padding: clamp(0px, calc(32 * var(--scale)), calc(32px * var(--max))) 2.4%;
  border-radius: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.15);
  background: #fff;
}
.reason__item:first-child {
  --accent-color: #e61e87;
}
.reason__item:nth-child(2) {
  --accent-color: #000;
}
.reason__item:nth-child(3) {
  --accent-color: #0097e0;
}
.reason__item:nth-child(4) {
  --accent-color: #ffbc01;
}
@media (max-width: 767px) {
  .reason__item {
    width: 100%;
    padding: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max))) clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max))) clamp(0px, calc(32 * var(--scale)), calc(32px * var(--max)));
  }
}

.reason__name {
  font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  font-weight: 700;
  color: #fff;
  text-align: center;
  background: var(--accent-color);
  border-radius: 1.4em;
  padding: 0.8em 0;
}
@media (max-width: 767px) {
  .reason__name {
    font-size: clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
    padding: 0.6em 0;
  }
}

.reason__genre {
  margin-top: 1.5em;
  font-size: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  font-weight: 400;
  color: var(--accent-color);
  text-align: center;
}
@media (max-width: 767px) {
  .reason__genre {
    font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
  }
}

.reason__slider {
  margin-top: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  position: relative;
}
.reason__slider .reasonSwiper {
  overflow: hidden;
  border-radius: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
}
.reason__slider .swiper-slide {
  aspect-ratio: 412/279;
  -o-object-fit: cover;
     object-fit: cover;
}
.reason__slider .swiper-button-next, .reason__slider .swiper-button-prev {
  top: unset;
  bottom: unset;
  left: unset;
  right: unset;
  margin: 0;
  height: auto;
  width: auto;
  position: absolute;
  background: url(../img/icon-arrow02.svg) no-repeat center center/100%;
  aspect-ratio: 1/1;
  width: 8%;
  top: 50%;
}
.reason__slider .swiper-button-next::after, .reason__slider .swiper-button-prev::after {
  display: none;
}
.reason__slider .swiper-button-next {
  transform: translate(50%, -50%);
  right: 0;
}
.reason__slider .swiper-button-prev {
  transform: translate(-50%, -50%) scale(-1, 1);
  left: 0%;
}
@media (max-width: 767px) {
  .reason__slider {
    margin-top: 3%;
  }
  .reason__slider .swiper-button-next, .reason__slider .swiper-button-prev {
    width: 10%;
  }
}

.reason__text {
  font-size: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  font-weight: 400;
  line-height: 2;
  margin-top: 1.1em;
}
@media (max-width: 767px) {
  .reason__text {
    font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
    line-height: 1.6;
  }
}

/*------------------------------
stores
------------------------------*/
.stores {
  border-top: 1px dashed #fff;
  background: #009caa;
  padding: clamp(0px, calc(56 * var(--scale)), calc(56px * var(--max))) 0 clamp(0px, calc(0 * var(--scale)), calc(0px * var(--max)));
}
@media (max-width: 767px) {
  .stores {
    padding: clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max))) 0 clamp(0px, calc(80 * var(--scale)), calc(80px * var(--max)));
  }
}

.stores__title {
  font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
  text-align: center;
}
@media (max-width: 767px) {
  .stores__title {
    font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
  }
}

.stores__list {
  margin-top: clamp(0px, calc(56 * var(--scale)), calc(56px * var(--max)));
  display: flex;
  gap: 0 clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max)));
}
@media (max-width: 767px) {
  .stores__list {
    flex-wrap: wrap;
    margin-top: clamp(0px, calc(32 * var(--scale)), calc(32px * var(--max)));
    gap: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max))) clamp(0px, calc(15 * var(--scale)), calc(15px * var(--max)));
  }
}

.stores__item {
  width: calc(25% - clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max))) * 3 / 4);
}
@media (max-width: 767px) {
  .stores__item {
    width: calc(50% - clamp(0px, calc(15 * var(--scale)), calc(15px * var(--max))) / 2);
  }
}

.stores__image {
  aspect-ratio: 270/244;
  box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.15);
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
}

.stores__name {
  font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  font-weight: 700;
  color: #fff;
  margin-top: 1.2em;
}
@media (max-width: 767px) {
  .stores__name {
    font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
  }
}

.stores__genre {
  font-size: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  font-weight: 400;
  color: #fff;
  margin-top: 1em;
}
@media (max-width: 767px) {
  .stores__genre {
    font-size: clamp(0px, calc(12 * var(--scale)), calc(12px * var(--max)));
    margin-top: 0.6em;
  }
}

/*------------------------------
collection
------------------------------*/
.collection {
  margin-top: calc(clamp(0px, calc(140 * var(--scale)), calc(140px * var(--max))) * -1);
  padding-top: clamp(0px, calc(110 * var(--scale)), calc(110px * var(--max)));
  padding-bottom: clamp(0px, calc(230 * var(--scale)), calc(230px * var(--max)));
  z-index: 10;
}
@media (max-width: 767px) {
  .collection {
    margin-top: calc(clamp(0px, calc(80 * var(--scale)), calc(80px * var(--max))) * -1);
    padding-top: 20%;
    padding-bottom: 35%;
  }
}

.collection__list {
  display: flex;
  flex-wrap: wrap;
  margin-top: clamp(0px, calc(56 * var(--scale)), calc(56px * var(--max)));
}
@media (max-width: 767px) {
  .collection__list {
    flex-direction: column;
    margin-top: clamp(0px, calc(28 * var(--scale)), calc(28px * var(--max)));
  }
}

.collection__item {
  width: 50%;
  padding: clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max))) 0;
  border-bottom: 1px dashed #ccc;
}
@media (min-width: 768px) {
  .collection__item:nth-child(odd) {
    padding-right: clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max)));
    border-right: 1px dashed #ccc;
  }
  .collection__item:nth-child(even) {
    padding-left: clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max)));
  }
  .collection__item:nth-child(-n+2) {
    padding-top: 0;
  }
  .collection__item:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
}
@media (max-width: 767px) {
  .collection__item {
    width: 100%;
    padding: clamp(0px, calc(21 * var(--scale)), calc(21px * var(--max))) 0;
  }
  .collection__item:first-child {
    padding-top: 0;
  }
  .collection__item:last-child {
    padding-bottom: 0;
  }
}

.collection__header {
  display: flex;
  align-items: center;
  gap: 0 clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
}
@media (max-width: 767px) {
  .collection__header {
    gap: 0 clamp(0px, calc(8 * var(--scale)), calc(8px * var(--max)));
  }
}

.collection__icon {
  width: clamp(0px, calc(80 * var(--scale)), calc(80px * var(--max)));
}
@media (max-width: 767px) {
  .collection__icon {
    width: clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max)));
  }
}

.collection__name {
  font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  font-weight: 700;
}
@media (max-width: 767px) {
  .collection__name {
    font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
  }
}

.collection__products {
  font-size: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  font-weight: 400;
  line-height: 2;
  margin-top: 0.7em;
}
@media (max-width: 767px) {
  .collection__products {
    font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
    padding: 0 1.4em 0 0.57em;
  }
}

/*------------------------------
flow
------------------------------*/
.flow {
  z-index: 20;
  padding: clamp(0px, calc(110 * var(--scale)), calc(110px * var(--max))) 0 clamp(0px, calc(160 * var(--scale)), calc(160px * var(--max)));
  margin-top: calc(clamp(0px, calc(140 * var(--scale)), calc(140px * var(--max))) * -1);
  padding-top: clamp(0px, calc(110 * var(--scale)), calc(110px * var(--max)));
}
@media (max-width: 767px) {
  .flow {
    margin-top: calc(clamp(0px, calc(80 * var(--scale)), calc(80px * var(--max))) * -1);
    padding-top: 20%;
    padding-bottom: 26%;
  }
}

.flow__header {
  color: #fff;
}

.flow__content {
  margin-top: clamp(0px, calc(44 * var(--scale)), calc(44px * var(--max)));
  overflow: hidden;
  position: relative;
}
@media (min-width: 768px) {
  .flow__content {
    width: 100%;
    padding-left: calc(min( 100 * var(--scale),100px) + max(0px, (100vw - 1440px) / 2));
  }
}
@media (max-width: 767px) {
  .flow__content {
    margin-top: 8%;
    padding-left: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  }
}

.flow__card {
  background: #fff;
  border-radius: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  padding: clamp(0px, calc(32 * var(--scale)), calc(32px * var(--max))) clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  width: 100%;
  height: 100%;
  color: #333;
}
@media (max-width: 767px) {
  .flow__card {
    padding-bottom: 7%;
  }
}

.flow__label {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  font-weight: 700;
  color: #fff;
  background: #d74051;
  padding: 0.5em 1.2em;
  border-radius: 1em;
}
@media (max-width: 767px) {
  .flow__label {
    font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
    padding: 0.5em 0.8em;
  }
}

.flow__image[class][class] {
  margin-top: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  border-radius: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
  width: 100%;
}
@media (max-width: 767px) {
  .flow__image[class][class] {
    margin-top: 5%;
  }
}

.flow__heading {
  margin-top: 1.2em;
  font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
}
@media (max-width: 767px) {
  .flow__heading {
    font-size: clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
    margin-top: 0.9em;
  }
}

.flow__description {
  font-size: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  font-weight: 400;
  line-height: 2;
  margin-top: 0.4em;
  text-align: left;
}
@media (max-width: 767px) {
  .flow__description {
    font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
    margin-top: 0.9em;
    line-height: 1.8;
  }
}

/* スライダ―調整
------------------------------*/
@media (min-width: 768px) {
  .flowSwiper {
    width: clamp(0px, calc(1200 * var(--scale)), calc(1200px * var(--max)));
  }
}
.flowSwiper .swiper-wrapper {
  align-items: stretch;
}
.flowSwiper .swiper-slide {
  display: flex;
  height: auto;
  cursor: -webkit-grab;
  cursor: grab;
}
.flowSwiper .swiper-slide:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
@media (min-width: 768px) {
  .flowSwiper .swiper-slide {
    width: clamp(0px, calc(424 * var(--scale)), calc(424px * var(--max)));
    padding-right: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  }
  .flowSwiper .swiper-slide:has(.flow__card--last) {
    width: clamp(0px, calc(400 * var(--scale)), calc(400px * var(--max)));
    padding-right: 0;
  }
}
.flowSwiper .swiper-pagination {
  position: static;
  margin-top: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
}
@media (max-width: 767px) {
  .flowSwiper .swiper-pagination {
    margin-top: 3%;
    margin-left: -3%;
  }
}
.flowSwiper .swiper-pagination-bullet[class][class] {
  background: #fff;
  opacity: 1;
  width: 12px !important;
  width: clamp(0px, calc(12 * var(--scale)), calc(12px * var(--max))) !important;
  height: auto !important;
  aspect-ratio: 1/1;
}
.flowSwiper .swiper-pagination-bullet[class][class].swiper-pagination-bullet-active {
  background: #ccc;
}
@media (min-width: 768px) {
  .flowSwiper .swiper-pagination-bullet[class][class][data-goto="2"], .flowSwiper .swiper-pagination-bullet[class][class][data-goto="3"] {
    pointer-events: none;
  }
}
@media (max-width: 767px) {
  .flowSwiper .swiper-pagination-bullet[class][class] {
    margin: 0 clamp(0px, calc(2 * var(--scale)), calc(2px * var(--max)));
  }
}

/*------------------------------
faq
------------------------------*/
.faq {
  position: relative;
  padding-bottom: clamp(0px, calc(110 * var(--scale)), calc(110px * var(--max)));
  z-index: 30;
}
.faq::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  transform: translateY(-100%);
  background: #f2edda;
  width: 100%;
  aspect-ratio: 1440/74;
  border-radius: clamp(0px, calc(90 * var(--scale)), calc(90px * var(--max))) clamp(0px, calc(90 * var(--scale)), calc(90px * var(--max))) 0 0;
}
@media (min-width: 768px) {
  .faq::before {
    max-height: 74px;
  }
}
@media (max-width: 767px) {
  .faq {
    padding: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max))) 0 clamp(0px, calc(60 * var(--scale)), calc(60px * var(--max)));
  }
  .faq::before {
    aspect-ratio: 375/33;
  }
}

.faq__list {
  width: calc(960 / 1200 * 100%);
  margin: 0 auto;
  margin-top: clamp(0px, calc(45 * var(--scale)), calc(45px * var(--max)));
  display: flex;
  flex-direction: column;
  gap: clamp(0px, calc(35 * var(--scale)), calc(35px * var(--max))) 0;
}
@media (max-width: 767px) {
  .faq__list {
    width: 100%;
    margin-top: clamp(0px, calc(26 * var(--scale)), calc(26px * var(--max)));
    gap: clamp(0px, calc(21 * var(--scale)), calc(21px * var(--max))) 0;
  }
}

.faq__item {
  background: #fff;
  border-radius: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  padding: clamp(0px, calc(32 * var(--scale)), calc(32px * var(--max))) clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max))) clamp(0px, calc(0 * var(--scale)), calc(0px * var(--max)));
}

.faq__question {
  font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  font-weight: 700;
  padding: 0 1.65em 1.2em;
  position: relative;
}
.faq__question::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/faq-icon_Q.png) no-repeat center center/contain;
  width: 0.85em;
  aspect-ratio: 34/40;
}
@media (max-width: 767px) {
  .faq__question {
    font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
    line-height: 1.7142857143;
    padding: 0 2.05em 1.2em;
  }
  .faq__question::before {
    top: 0.1em;
  }
}

.faq__icon {
  width: 16px;
  height: 16px;
  position: absolute;
  right: 0;
  top: 0;
}
.faq__icon.is-open .faq__bar2 {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__bars {
  width: 16px;
  aspect-ratio: 1/1;
  position: relative;
}

.faq__bar1,
.faq__bar2 {
  width: 16px;
  height: 2px;
  background: #333;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.faq__bar2 {
  transform: translate(-50%, -50%);
  transition: all 0.3s;
}

.faq__answer {
  border-top: 1px dashed #ccc;
  font-size: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  font-weight: 400;
  line-height: 2;
  padding: 1.3em 0 clamp(0px, calc(36 * var(--scale)), calc(36px * var(--max)));
}
.faq__answer > span {
  display: block;
  position: relative;
  padding: 0 1.813em;
}
.faq__answer > span::before {
  content: "";
  position: absolute;
  top: 0.9em;
  transform: translateY(-50%);
  left: 0;
  background: url(../img/faq-icon_A.png) no-repeat center center/contain;
  width: 1.125em;
  aspect-ratio: 34/40;
}
@media (max-width: 767px) {
  .faq__answer {
    font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
    line-height: 1.7142857143;
  }
  .faq__answer > span::before {
    width: 0.786em;
  }
}

/*------------------------------
service
------------------------------*/
.service {
  padding: clamp(0px, calc(54 * var(--scale)), calc(54px * var(--max))) 0 clamp(0px, calc(136 * var(--scale)), calc(136px * var(--max)));
  border-radius: clamp(0px, calc(80 * var(--scale)), calc(80px * var(--max))) clamp(0px, calc(80 * var(--scale)), calc(80px * var(--max))) 0 0;
  background: #fff;
}
@media (max-width: 767px) {
  .service {
    padding: clamp(0px, calc(42 * var(--scale)), calc(42px * var(--max))) 0 clamp(0px, calc(80 * var(--scale)), calc(80px * var(--max)));
    border-radius: clamp(0px, calc(37 * var(--scale)), calc(37px * var(--max))) clamp(0px, calc(37 * var(--scale)), calc(37px * var(--max))) 0 0;
  }
}

.service__info {
  width: calc(720 / 1200 * 100%);
  margin: 0 auto;
  margin-top: clamp(0px, calc(48 * var(--scale)), calc(48px * var(--max)));
  display: flex;
  flex-wrap: wrap;
  border-radius: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  border: 1px solid #ccc;
}
.service__info dt,
.service__info dd {
  font-size: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 1em 1.25em;
  min-height: 5em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.service__info dt:not(:last-of-type),
.service__info dd:not(:last-of-type) {
  border-bottom: 1px solid #ccc;
}
.service__info dt {
  width: calc(200 / 720 * 100%);
  font-weight: 700;
  background: #f2f2f2;
  border-right: 1px solid #ccc;
}
.service__info dt:first-child {
  border-radius: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max))) 0 0 0;
}
.service__info dt:last-of-type {
  border-radius: 0 0 0 clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
}
.service__info dd {
  width: calc(100% - (200 / 720 * 100%));
}
.service__info dd span {
  display: block;
  font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
  line-height: 1.7142857143;
}
@media (max-width: 767px) {
  .service__info {
    width: 100%;
    margin-top: clamp(0px, calc(28 * var(--scale)), calc(28px * var(--max)));
  }
  .service__info dt,
.service__info dd {
    font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
    padding: 0.5em 1em;
    letter-spacing: 0;
    min-height: 4em;
  }
  .service__info dt {
    width: clamp(0px, calc(144 * var(--scale)), calc(144px * var(--max)));
    font-weight: 400;
  }
  .service__info dd {
    width: calc(100% - clamp(0px, calc(144 * var(--scale)), calc(144px * var(--max))));
  }
  .service__info dd span {
    font-size: clamp(0px, calc(12 * var(--scale)), calc(12px * var(--max)));
  }
}
/*# sourceMappingURL=style.css.map */