@charset "utf-8";

/* =============================================================

  "Nano Create Company" Kyujin Styles

============================================================= */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

.bg {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1920 / 4000;
}

section { position: relative; }

/*
  Round
============================================================= */
i.round {
  position: absolute;
  z-index: 0;
  top: -130px;
  left: -100px;
  width: 380px;
  aspect-ratio: 1 / 1;
  display: inline-block;
  animation: spin 30s linear infinite reverse;
}
i.round img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media screen and (max-width:780px) {
  i.round {
    top: calc(90 / 780 * 100vw * -1);
    left: calc(143 / 780 * 100vw * -1);
    width: calc(287 / 780 * 100vw);
  }
}

/*
  Decorations
============================================================= */

/* Footer
------------------------------------------------------------- */
.l-footer > .deco.dt08 {
  opacity: 1;
  transform: translateY(0) rotate(-23.18deg);
}
.l-footer > .deco.dr08 {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width:780px) {
  .l-footer > .deco { z-index: 0; }
}

/*
  Button Styles
============================================================= */
.btn-unit {
  width: 780px;
  display: block;
  margin: auto;
  text-align: center;
  /*
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 60px;
  */
}
.btn-unit .default-btn {
  width: 360px;
  color: var(--white);
  text-indent: 1.5em;
  padding: 0 0 0 2em;
}
.btn-unit .default-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 2em;
  transform: translateY(-50%);
  width: 19px;
  height: 16px;
  display: inline-block;
  background: url(../../images/icon_link_white.svg) no-repeat 0 0 / cover;
}
.btn-unit .default-btn.green { background-color: var(--green); }
.btn-unit .default-btn.blue { background-color: var(--blue); }
.btn-unit .default-btn.green::after { background-image: url(../../../common/images/button/btn_arrow_green2.svg); }
.btn-unit .default-btn.blue::after { background-image: url(../../../common/images/button/btn_arrow_blue.svg); }

@media screen and (max-width:780px) {
  .btn-unit {
    width: calc(540 / 780 * 100vw);
    display: flex;
    flex-direction: column;
    gap: calc(30 / 780 * 100vw) 0;
  }
  .btn-unit .default-btn { width: 100%; }
  .btn-unit .default-btn::before {
    width: calc(29 / 780 * 100vw);
    height: calc(24 / 780 * 100vw);
  }
}


/*
  Page Header
============================================================= */
.page-header .inner {
  position: relative;
  padding: 0 60px 150px 340px;
}
.page-header h1 {
  position: relative;
  z-index: 1;
  font-family: "Shippori Mincho", serif;
  font-size: 38px;
  font-size: 3.8rem;
  line-height: calc(68 / 38);
  white-space: nowrap;
}
.page-header p {
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: .15em;
  line-height: calc(48 / 18);
  margin: 0 0 65px;
}
.pref-name {
  position: relative;
  z-index: 1;
  width: fit-content;
  font-size: 20px;
  font-size: 2.0rem;
  letter-spacing: .1em;
  color: var(--blue);
  display: block;
  padding: .25em .5em;
  border: solid 1px var(--blue);
}

@media screen and (max-width:780px) {
  .page-header .inner { padding: 0 0 calc(120 / 780 * 100vw) calc(60 / 780 * 100vw); }
  .page-header h1 {
    font-size: calc(38 / 780 * 100vw);
    white-space: wrap;
  }
  .page-header p {
    font-size: calc(26 / 780 * 100vw);
    line-height: calc(50 / 26);
    margin: calc(25 / 780 * 100vw) 0 calc(45 / 780 * 100vw);
  }
  .pref-name { font-size: calc(23.75 / 780 * 100vw); }
}

/*
  Section
============================================================= */
.sec-heading {
  position: relative;
  width: fit-content;
  font-family: "Shippori Mincho", serif;
  font-size: 38px;
  font-size: 3.8rem;
  letter-spacing: .1em;
  line-height: calc(68 / 38);
  margin: auto;
}
.sec-heading span {
  font-size: calc(22 / 38 * 1em);
  letter-spacing: .2em;
  width: fit-content;
  display: block;
  color: var(--blue);
  text-align: center;
  border-bottom: solid 1px var(--blue);
  margin: auto;
  line-height: 1.0;
}

@media screen and (max-width:780px) {
  .sec-heading { font-size: calc(38 / 780 * 100vw); }
}

/*
  Anxiety
============================================================= */
.anxiety-mv {
  position: relative;
  display: grid;
}
.anxiety-mv .sec-heading {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  text-align: center;
  border-bottom: solid 2px var(--black);
  transform: translateY(calc(280 / 1920 * 100vw * -1));
  line-height: 1.0;
}
.anxiety-mv figure { grid-area: 1 / 1; }
.anxiety-mv figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.triangle {
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 50px 0 50px;
  border-color: var(--blue) transparent transparent transparent;
  margin: 50px auto;
}

.resolve h3 {
  position: relative;
  width: fit-content;
  font-family: "Shippori Mincho", serif;
  font-size: 38px;
  font-size: 3.8rem;
  line-height: calc(68 / 38);
  color: var(--blue);
  text-align: center;
  margin: 0 auto 40px;
}
.resolve h3 span {
  background: linear-gradient(transparent 70%, #ffff70 30%);
  display: inline;
}
.resolve .inner { padding: 0 0 0 60px; }
.resolve-images {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 0;
  margin: 0 0 210px;
}
.resolve-images figure:first-of-type { margin: 0 75px 0 0; }
.resolve-images figure:nth-of-type(3) { margin: 0 80px 0 140px; }

@media screen and (max-width:780px) {
  .anxiety-mv .sec-heading { transform: translateY(calc(320 / 780 * 100vw * -1)); }
  .triangle {
    border-width: calc(50 / 780 * 100vw) calc(50 / 780 * 100vw) 0 calc(50 / 780 * 100vw);
    margin: calc(40 / 780 * 100vw) auto calc(25 / 780 * 100vw);
  }
  .resolve h3 { font-size: calc(34.5 / 780 * 100vw); }
  .resolve .inner { padding: 0; }
  .resolve-images {
    display: block;
    margin: 0 0 calc(190 / 780 * 100vw);
  }
  .resolve-images figure:first-of-type {
    width: calc(468 / 780 * 100vw);
    margin: 0 0 calc(20 / 780 * 100vw);
  }
  .resolve-images figure:nth-of-type(2) { width: calc(469 / 780 * 100vw); }
  .resolve-images figure:nth-of-type(3) {
    width: calc(447 / 780 * 100vw);
    margin: 0 0 calc(20 / 780 * 100vw);
  }
  .resolve-images figure:last-of-type { width: calc(471 / 780 * 100vw); }
  .resolve-images figure:nth-of-type(even) { float: right; }
}

/*
  Process
============================================================= */
.process { padding: 0 0 165px; }
.process .inner { padding: 0 150px; }
.process-unit { margin: 55px 0 0; }
.process-item {
  display: flex;
  align-items: center;
  gap: 0 70px;
}
.process-item:not(:last-of-type) { margin: 0 0 40px; }
.process-step {
  position: relative;
  width: 300px;
  height: 280px;
  border: solid 2px var(--blue);
  border-radius: 20px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.process-item:not(:last-of-type) .process-step::after {
  content: "";
  position: absolute;
  bottom: -44px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 44px;
  display: inline-block;
  background-color: var(--blue);
}
.process-num {
  width: 36px;
  aspect-ratio: 1 / 1;
  background-color: var(--blue);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
}
.process-num span {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: .05em;
  color: var(--white);
  transform: scaleX(.8);
}
.process-step dl { text-align: center; }
.process-step dl dt {
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.0;
}
.process-step.ps01 dl dd { margin: 35px 0 0; }
.process-step.ps02 dl dd,
.process-step.ps03 dl dd,
.process-step.ps04 dl dd { margin: 30px 0 0; }
.process-step.ps01 dl dd a {
  font-size: 15px;
  font-size: 1.5rem;
  letter-spacing: .05em;
  color: var(--white);
  background-color: var(--blue);
  text-align: center;
  width: 240px;
  line-height: 50px;
  display: block;
  border-radius: 50px;
}
.process-step dl dd i { display: inline-block; }
.process-step.ps02 dl dd i {
  width: 41px;
  height: 41px;
}
.process-step.ps03 dl dd i {
  width: 44px;
  height: 30px;
}
.process-step.ps04 dl dd i {
  width: 59px;
  height: 29px;
}
.process-summary p {
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: .15em;
  line-height: calc(30 / 16);
}
.process-item:first-of-type .process-summary p { font-weight: 600; }
.process-item:first-of-type .process-summary span {
  font-size: calc(14 / 16 * 1em);
  font-weight: 400;
  line-height: calc(24 / 14);
  display: block;
}
.process-item:first-of-type .process-summary p a {
  color: var(--blue);
  text-decoration: underline;
}

.process-unit + p {
  font-size: 14px;
  font-size: 1.4rem;
  letter-spacing: .15em;
  line-height: calc(24 / 14);
  margin: 30px 0 0;
}

@media screen and (max-width:780px) {
  .process { padding: 0 0 calc(85 / 780 * 100vw); }
  .process .inner { padding: 0; }
  .process-unit { margin: calc(55 / 780 * 100vw) 0 0; }
  .process-item {
    flex-direction: column;
    gap: 0;
  }
  .process-item:not(:last-of-type) { margin: 0 0 40px; }
  .process-item:not(:last-of-type) .process-step::after { content: none; }
  .process-step {
    width: 100%;
    height: calc(280 / 780 * 100vw);
    border-radius: calc(20 / 780 * 100vw);
  }
  .process-num { width: calc(54 / 780 * 100vw); }
  .process-num span { font-size: calc(27 / 780 * 100vw); }
  .process-step dl dt {
    font-size: calc(28 / 780 * 100vw);
    letter-spacing: .15em;
  }
  .process-step.ps01 dl dd { margin: calc(30 / 780 * 100vw) 0 0; }
  .process-step.ps02 dl dd { margin: calc(30 / 780 * 100vw) 0 0; }
  .process-step.ps03 dl dd { margin: calc(40 / 780 * 100vw) 0 0; }
  .process-step.ps04 dl dd { margin: calc(40 / 780 * 100vw) 0 0; }
  .process-step.ps01 dl dd a {
    font-size: calc(23 / 780 * 100vw);
    width: calc(360 / 780 * 100vw);
    line-height: calc(74 / 780 * 100vw);
  }
  .process-step.ps02 dl dd i {
    width: calc(62 / 780 * 100vw);
    height: calc(62 / 780 * 100vw);
  }
  .process-step.ps03 dl dd i {
    width: calc(66 / 780 * 100vw);
    height: calc(44 / 780 * 100vw);
  }
  .process-step.ps04 dl dd i {
    width: calc(89 / 780 * 100vw);
    height: calc(43 / 780 * 100vw);
  }
  .process-summary { margin: calc(45 / 780 * 100vw) 0 0; }
  .process-summary p {
    font-size: calc(26 / 780 * 100vw);
    line-height: calc(50 / 26);
  }
  .process-item:first-of-type .process-summary span {
    font-size: calc(20 / 26 * 1em);
    line-height: calc(36 / 20);
  }
  .process-unit + p {
    font-size: calc(20 / 780 * 100vw);
    line-height: calc(30 / 20);
  }
}

/*
  Job Category
============================================================= */
.job-category { padding: 0 0 190px; }
.job-category figure {
  width: calc(880 / 1200 * 100%);
  margin: auto;
}

@media screen and (max-width:780px) {
  .job-category { padding: 0 0 calc(90 / 780 * 100vw); }
  .job-category .inner { width: 100%; }
  .job-category figure { width: calc(760 / 780 * 100vw); }
}

/*
  Support
============================================================= */
.support { padding: 0 0 200px; }
.support h2 + p {
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: .15em;
  line-height: calc(36 / 18);
  text-align: center;
  margin: 1em 0 2em;
}
.support-unit {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 60px;
  padding: 0 95px;
}
.support-item { display: grid; }
.support-summary {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 75px 95px 0 55px;
}
.support-summary h3 {
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: .15em;
  margin: 0 0 .5em;
}
.support-summary dl {
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: .15em;
  line-height: calc(30 / 16);
}
.support-summary dl dt {
  font-weight: 500;
  white-space: nowrap;
  margin: 0 0 .5em;
}
.support-item figure { grid-area: 1 / 1; }

@media screen and (max-width:780px) {
  .support { padding: 0 0 calc(190 / 780 * 100vw); }
  .support h2 + p {
    font-size: calc(26 / 780 * 100vw);
    line-height: calc(50 / 26);
    margin: .5em 0 1.5em;
  }
  .support-unit {
    display: flex;
    flex-direction: column;
    gap: calc(45 / 780 * 100vw) 0;
    padding: 0;
  }
  .support-summary { padding: calc(95 / 780 * 100vw) calc(105 / 780 * 100vw) 0 calc(60 / 780 * 100vw); }
  .support-summary h3 { font-size: calc(34 / 780 * 100vw); }
  .support-summary dl {
    font-size: calc(26 / 780 * 100vw);
    line-height: calc(50 / 26);
  }
}

/*
  FAQ
============================================================= */
.faq {
  display: grid;
  align-items: start;
  padding: 0 0 80px;
}
.faq > figure img {
  width: 2655px;
  object-position: -463px 0;
}

@media screen and (min-width:1921px) {
  .faq > figure img {
    width: calc(2655 / 1920 * 100vw);
    object-position: calc(463 / 1920 * 100vw * -1) 0;
  }
}

.faq .inner {
  position: relative;
  height: 100%;
  grid-area: 1 / 1;
  padding: 75px 0 0;
}
.faq > figure { grid-area: 1 / 1; }

.anchor-nav {
  background-color: var(--white);
  margin: 60px 0 20px;
}
.anchor-nav ul {
  display: flex;
  gap: 0 60px;
  justify-content: center;
}
.anchor-nav ul li {
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: .05em;
  line-height: calc(48 / 16);
}
.anchor-nav ul li a { color: var(--blue); }
.anchor-nav ul li a::before {
  content: "＞";
  transform: rotate(90deg) scale(.6, 1.0);
  display: inline-block;
  margin: 0 .25em 0 0;
}

.faq-unit {
  border: solid 2px var(--blue);
  background-color: var(--white);
  border-radius: 20px;
  margin: 0 0 40px;
}
.faq-unit h3 {
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: .15em;
  line-height: calc(30 / 18);
  color: var(--white);
  background-color: var(--blue);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  padding: 35px 0 25px 55px;
}

.faq-items { padding: 45px 70px 60px; }
.faq-items dl {
  border-top: solid 1px var(--blue);
  border-bottom: solid 1px var(--blue);
  margin: -1px 0 0;
  padding: 30px 0;
}
.faq-items dl dt {
  position: relative;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: .15em;
  color: var(--blue);
  display: flex;
  align-items: center;
  cursor: pointer;
}
.faq-items dl dt p {
  font-size: 30px;
  font-size: 3.0rem;
  margin: 0 .25em 0 0;
  flex-shrink: 0;
}
.faq-items dl dt span { display: inline-block; }
.faq-items dl dt::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: inline-block;
  flex-shrink: 0;
  background-image: url(../images/faq_open.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.faq-items dl dt.is-opened::after { background-image: url(../images/faq_close.svg); }
.faq-items dl dd {
  display: none;
  margin: 10px 0 0;
  /*
  height: 0;
  overflow: hidden;
  transition: height 0.4s ease;
  */
}
.faq-items dl dd:not(:last-of-type) { margin: 0 0 30px; }
.faq-items dl dd > div {
  display: flex;
  align-items: flex-start;
}
.faq-items dl dd > div p {
  font-size: 30px;
  font-size: 3.0rem;
  color: #f4aab0;
  margin: 0 .5em 0 0;
  flex-shrink: 0;
}
.faq-items dl dd > div span {
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: .15em;
  line-height: calc(30 / 16);
  padding: 0 3em 0 0;
}
.faq-items dl dd > div span a {
  color: var(--blue);
  text-decoration: underline;
  transition: all .3s;
}
.faq-items dl dd > div span a:hover { text-decoration: none; }

.faq .btn-unit { margin: auto; }

@media screen and (max-width:780px) {
  .faq { padding: 0 0 calc(120 / 780 * 100vw); }
  .faq > figure img {
    width: 100%;
    object-position: 50% 0;
  }
  .faq .inner {
    width: calc(740 / 780 * 100vw);
    padding: calc(70 / 780 * 100vw) 0 0;
  }
  .anchor-nav {
    margin: calc(70 / 780 * 100vw) 0 calc(40 / 780 * 100vw);
    padding: 0 calc(40 / 780 * 100vw);
  }
  .anchor-nav ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;

  }
  .anchor-nav ul li {
    font-size: calc(26 / 780 * 100vw);
    line-height: calc(72 / 26);
  }
  .faq-unit { border-radius: calc(20 / 780 * 100vw); }
  .faq-unit h3 {
    font-size: calc(26 / 780 * 100vw);
    border-top-left-radius: calc(15 / 780 * 100vw);
    border-top-right-radius: calc(15 / 780 * 100vw);
    padding: calc(35 / 780 * 100vw) 0 calc(25 / 780 * 100vw) calc(35 / 780 * 100vw);
  }
  .faq-items { padding: calc(45 / 780 * 100vw) calc(40 / 780 * 100vw); }
  .faq-items dl { padding: calc(35 / 780 * 100vw) 0; }
  .faq-items dl dt {
    font-size: calc(26 / 780 * 100vw);
    line-height: calc(48 / 26);
    align-items: flex-start;
  }
  .faq-items dl dt::after {
    top: 12.5%;
    transform: translateY(-12.5%);
    width: calc(33 / 780 * 100vw);
    height: calc(33 / 780 * 100vw);
  }
  .faq-items dl dt p {
    font-size: calc(36 / 780 * 100vw);
    line-height: calc(48 / 36);
  }
  .faq-items dl dt span { padding: 0 2em 0 0; }
  .faq-items dl dd > div p {
    font-size: calc(36 / 780 * 100vw);
    line-height: calc(48 / 36);
  }
  .faq-items dl dd > div span {
    font-size: calc(26 / 780 * 100vw);
    line-height: calc(48 / 26);
    padding: 0 2em 0 0;
  }
}