@charset "UTF-8";

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

  Nano Creative Company - Index SP Styles

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

/* -----------------------------------------------------------
  Page Header
----------------------------------------------------------- */
.page-catch {
  width: calc(543 / 750 * 100vw);
  top: 90%;
  transform: translateY(-90%);
}
.page-header picture img { aspect-ratio: 750 / 800; }

/* -----------------------------------------------------------
  Section
----------------------------------------------------------- */

/* Section01
----------------------------------------------------------- */
.intro { padding: calc(80 / 750 * 100%) 0 20px; }
.intro h2 {
  width: auto;
  text-align: center;
  margin: 0 auto 30px;
}
.intro ul { display: block; }
.intro ul li { width: calc(261 / 750 * 100vw); }
.intro ul li:first-of-type, .intro ul li:nth-of-type(2) { float: right; }
.intro ul li:nth-of-type(3), .intro ul li:last-of-type { float: left; }
.intro figure:first-of-type {
  top: calc(130 / 750 * 100vw);
  left: 0;
  width: calc(134 / 750 * 100vw);
  height: calc(297 / 750 * 100vw);
}
.intro figure:last-of-type {
  top: initial;
  right: -4%;
  bottom: 0;
  width: calc(209 / 750 * 100vw);
  height: calc(232 / 750 * 100vw);
}

/* Section02
----------------------------------------------------------- */
.about { padding: calc((130 / 1500 * 100vw) + 70px) 0 calc(115 / 750 * 100vw); }
.about::before {
  left: 50%;
  transform: translateX(-50%);
  width: calc(1500 / 750 * 100vw);
}
.about .inner { padding: 0; }
.about h2 {
  font-size: calc(40 / 750 * 100vw);
  line-height: calc(60 / 40);
  margin: 0 0 calc(40 / 750 * 100%);
}
.about h2 span { font-size: calc(54 / 40 * 1em); }
.about h2 + figure {
  width: calc(208 / 750 * 100vw);
  margin: 0 auto calc(40 / 750 * 100%);
}
.solve-it small { font-size: calc(28 / 750 * 100vw); }
.solve-it p {
  font-size: calc(30 / 750 * 100vw);
  height: calc(40px * .9);
  line-height: calc(40px * .9);
  border-radius: calc(20px * .9);
  margin: calc(25 / 750 * 100%) 0 calc(15 / 750 * 100%);
}
.solve-it h3 {
  font-size: calc(48 / 750 * 100vw);
  line-height: calc(72 / 48);
}
.solve-it ul {
  flex-direction: column;
  padding: 0 calc(80 / 750 * 100%);
  margin: 0 0 calc(50 / 750 * 100%);
}
.solve-it ul li:not(:last-of-type) { margin: 0 0 20px; }
.about .sec-title { width: calc(420 / 750 * 100vw); }
.about a.bcc-btn { width: calc(500 / 750 * 100vw); }
.sst {
  width: calc(540 / 690 * 100%);
  flex-direction: column;
  padding: calc(40 / 750 * 100%) calc(40 / 750 * 100%) calc(60 / 750 * 100%);
  margin: calc(50 / 750 * 100%) auto 0;
}
.sst dl {
  font-size: calc(26 / 750 * 100vw);
  margin: calc(40 / 750 * 100%) 0 0;
}
.sst dl dt {
  font-size: calc(28 / 26 * 1em);
  margin: 0 0 calc(30 / 750 * 100%);
}
.sst dl dt::before {
  top: calc(75 / 750 * 100vw * -1);
  left: calc(100 / 750 * 100vw * -1);
  width: calc(97 / 750 * 100vw);
  height: calc(96 / 750 * 100vw);
}
.sst dl dd:last-of-type {
  text-align: center;
  margin: calc(50 / 750 * 100%) 0 0;
}
.sst dl dd p { line-height: calc(42 / 26); }

/* Section02
----------------------------------------------------------- */
.service { padding: calc(80 / 750 * 100%) 0 calc(110 / 750 * 100%); }
.service .sec-title { width: calc(365 / 750 * 100vw); }
.service-unit { flex-direction: column; }
.service-unit > figure { width: 100%; }
.service-unit .inner {
  width: 100%;
  padding: 0 4%;
}
.service-unit .inner h2 {
  font-size: calc(48 / 750 * 100vw);
  margin: calc(60 / 750 * 100%) 0 calc(30 / 750 * 100%);
  text-align: center;
}
.service-unit .inner > p {
  font-size: calc(26 / 750 * 100vw);
  line-height: calc(42 / 26);
  margin: 0 0 calc(30 / 750 * 100%);
  padding: 0 calc(35 / 750 * 100%);
}
.service a.bcc-btn {
  width: calc(500 / 750 * 100vw);
  margin: auto;
  display: block;
}

/* Section03
----------------------------------------------------------- */
.news { padding: calc(85 / 750 * 100%) 0 calc(80 / 750 * 100%); }
.news .inner { padding: 0; }
.news .inner > figure {
  position: static;
  top: initial;
  right: initial;
  width: calc(212 / 750 * 100vw);
  height: calc(161 / 750 * 100vw);
  margin: auto;
}
.news .sec-title { width: calc(514 / 750 * 100vw); }
.news h2 { font-size: calc(48 / 750 * 100vw); }
.news p {
  font-size: calc(26 / 750 * 100vw);
  line-height: calc(42 / 26);
}
.news h2 + p { margin: calc(30 / 750 * 100%) 0 calc(40 / 750 * 100%); }
.news-list {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0;
  margin: calc(25 / 750 * 100%) 0 0;
}
.news-content {
  width: calc(540 / 750 * 100vw);
  margin: 0 0 calc(80 / 750 * 100%);
}
.news-content a figure {
  max-width: 100%;
  max-height: initial;
  height: auto;
}
.news-content a p {
  margin: calc(30 / 750 * 100%) 0 0;
  line-height: calc(26 / 24);
}
.news-content a p span {
  font-size: calc(24 / 26 * 1em);
  margin: 0 0 calc(15 / 750 * 100%);
}
.news a.bcc-btn {
  width: calc(500 / 750 * 100vw);
  display: block;
  margin: calc(70 / 750 * 100%) auto 0;
}

/* Section05
----------------------------------------------------------- */
.faq { padding: calc(80 / 750 * 100%) 0 calc(100 / 750 * 100%); }
.faq .inner { padding: 0; }
.faq .sec-title { width: calc(145 / 750 * 100vw); }
.faq h2 { font-size: calc(48 / 750 * 100vw); }
.faq p {
  font-size: calc(26 / 750 * 100vw);
  line-height: calc(42 / 26);
}
.faq h2 + p { margin: calc(35 / 750 * 100%) 0 0; }
.faq-wrap {
  position: relative;
  margin: calc(50 / 750 * 100%) 0 0;
}
.faq-wrap > figure {
  position: static;
  top: initial;
  left: initial;
  width: calc(200 / 750 * 100vw);
  height: calc(140 / 750 * 100vw);
  margin: auto;
}
.faq-unit { padding: calc(55 / 750 * 100%) calc(35 / 750 * 100%) calc(70 / 750 * 100%); }
.faq-unit dl dt {
  font-size: calc(26 / 750 * 100vw);
  padding: 0 0 0 calc(60 / 750 * 100%);
}
.faq-unit dl dt::before, .faq-unit dl dt::after {
  width: calc(40 / 750 * 100vw);
  height: calc(40 / 750 * 100vw);
}
.faq-unit dl dd {
  font-size: calc(26 / 750 * 100vw);
  line-height: calc(42 / 26);
  padding: 0 0 0 calc(60 / 750 * 100%);
}
.faq a.bcc-btn {
  width: calc(500 / 750 * 100vw);
  display: block;
  margin: calc(45 / 750 * 100%) auto 0;
}