@charset "UTF-8";

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

  Nano Creative Company - Common SP Styles

=========================================================== */
body { min-width: 100%; }
.inner { width: 92%; }
.pc { display: none; }
.sp { display: inherit; }

/* -----------------------------------------------------------
  Common Button Styles
----------------------------------------------------------- */
.bcc-btn span { font-size: calc(26 / 750 * 100vw); }

@media screen and (max-width:414px) {
  .bcc-btn {
    height: calc(60px * .85);
    border-radius: calc(30px .85);
  }
  .bcc-btn span { line-height: calc(56px * .85); }
}
@media screen and (max-width:375px) {
  .bcc-btn {
    height: calc(60px * .8);
    border-radius: calc(30px .8);
  }
  .bcc-btn span { line-height: calc(56px * .8); }
}

/* -----------------------------------------------------------
  Site Header
----------------------------------------------------------- */
.l-header {
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
}
.logo { width: calc(480 / 750 * 100vw); }
.lead { font-size: calc(12 / 480 * 100vw); }
.header-items { height: calc(90 / 750 * 100vw); }
.header-inner {
  width: 100%;
  padding: 0 4%;
}

/* Global Navi
----------------------------------------------------------- */
.gnav {
  display: none;
  position: fixed;
  z-index: 4;
  top: calc(30px + calc(90 / 750 * 100vw));
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: var(--ncc-green);
  padding: calc(50 / 750 * 100vw) 4% 0;
}
.gnav > div {
  height: 85vh;
  /*
  overflow-y: auto;
  */
  overflow-x: hidden;
  padding: 0 0 15vh;
}
.gnav ul {
  display: block;
}
.gnav ul li {
  position: relative;
  border-bottom: solid 1px #d3d3d3;
  margin: 0;
}
.gnav ul li::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(10 / 750 * 100vw);
  width: calc(28 / 750 * 100vw);
  height: auto;
  aspect-ratio: 28 / 9;
  background: url(../images/arrow_nav_w.svg) no-repeat 0 0;
  background-size: cover;
}
.gnav ul li a {
  font-size: calc(24 / 750 * 100vw);
  color: var(--wht);
  padding: calc(40 / 750 * 100vw) 0 calc(40 / 750 * 100vw) calc(20 / 750 * 100vw);
  width: 100%;
  display: block;
}
.gnav ul li a::before,
.gnav ul li a::after { content: none; }

.tel-btn { text-align: center; }
.tel-btn a {
  width: calc(500 / 750 * 100vw);
  height: auto;
  margin: calc(75 / 750 * 100vw) auto calc(25 / 750 * 100vw);
  display: block;
}
.tel-btn p {
  font-size: calc(24 / 750 * 100vw);
  font-weight: 600;
}

@media screen and (max-width:414px) {
  .gnav ul li a, .tel-btn p { font-size: calc(24 / 750 * 100vw * 1.25); }
  .tel-btn a { width: calc(500 / 750 * 100vw * 1.25); }
}

/* SP Menu Trigger
----------------------------------------------------------- */
.menu-trigger {
  width: calc(50 / 750 * 100vw);
  height: auto;
  aspect-ratio: 50 / 43;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: url(../images/spmenu_open.png);
  background-size: cover;
  display: inline-block;
  cursor: pointer;
  transition: all .3s;
}
.menu-trigger.is-opened { background-image: url(../images/spmenu_close.png); }

/* -----------------------------------------------------------
  Site Footer
----------------------------------------------------------- */
.footer-pict01, .footer-pict02 { display: none; }

/* Footer Inquiry
----------------------------------------------------------- */
.footer-inq {
  height: auto;
  padding: calc(80 / 750 * 100%) 0;
}
.footer-inq .inner { padding: 0; }
.footer-inq-heading figure {
  width: calc(370 / 750 * 100vw);
}
.footer-inq-heading {
  display: block;
  margin: 0;
}
.footer-inq-heading h2 {
  font-size: calc(48 / 750 * 100vw);
  padding: 0 0 0 calc(95 / 750 * 100%);
  margin: -1.25em 0 0;
}
.footer-inq-heading h2 small {
  font-size: calc(26 / 48 * 1em);
  white-space: wrap;
}
.footer-inq ul {
  display: block;
  border-left: none;
}
.footer-inq ul::before { content: none; }
.footer-inq ul li {
  width: 100%;
  margin: calc(40 / 750 * 100%) 0 0;
}
.footer-inq ul li:nth-of-type(2)::before,
.footer-inq ul li:nth-of-type(2)::after { content: none; }
.footer-inq ul li a.bcc-btn { width: calc(500 / 750 * 100vw); }
.footer-inq ul li.tel-num.sp a.bcc-btn span::before {
  content: "";
  position: absolute;
  top: 60%;
  transform: translateY(-60%);
  left: calc(30 / 750 * 100vw * -1.25);
  width: calc(30 / 750 * 100vw);
  height: calc(30 / 750 * 100vw);
  background: url(../images/icon_tel.svg) no-repeat 50% 50%;
}
.footer-inq ul li.tel-num a + p {
  font-size: calc(24 / 750 * 100vw);
  margin: calc(25 / 750 * 100%) 0 0;
}

@media screen and (max-width:414px) {
  .footer-inq ul li.tel-num.sp a.bcc-btn p span { line-height: calc(56px * .85); }
}
@media screen and (max-width:375px) {
  .footer-inq ul li.tel-num.sp a.bcc-btn p span { line-height: calc(56px * .8); }
}

/* Footer Items
----------------------------------------------------------- */
.footer-items { padding: calc(40 / 750 * 100%) 0 calc(120 / 750 * 100%); }
.footer-items .inner { padding: 0; }
.footer-items nav {
  display: block;
}
.footer-items ul {
  width: 100%;
  border-right: none;
}
.footer-items ul li {
  font-size: calc(24 / 750 * 100vw);
  border-bottom: solid 1px #d3d3d3;
  text-indent: calc(20 / 750 * 100%);
}
.footer-items ul li:not(:last-of-type) { margin: 0; }
.footer-items ul li::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  width: calc(28 / 750 * 100vw);
  height: calc(9 / 750 * 100vw);
  background: url(../images/arrow_nav.svg);
  background-size: cover;
}
.footer-items ul li a {
  padding: calc(40 / 750 * 100%) 0;
  display: block;
}
.footer-items dl {
  width: 100%;
  font-size: calc(24 / 750 * 100vw);
  padding: 0 calc(20 / 750 * 100vw);
  margin: calc(75 / 750 * 100%) 0 0;
}
.footer-items dl dt { margin: 0 0 calc(30 / 750 * 100%); }
.footer-items dl dd:first-of-type { margin: 0 0 calc(60 / 750 * 100%); }
.footer-items dl dd p { display: block; }
.footer-items dl dd p span i { width: calc(60 / 750 * 100vw); }

/* -----------------------------------------------------------
  Page Header
----------------------------------------------------------- */

/* Sub Page Common
----------------------------------------------------------- */
.page-header.sub { height: calc(280 / 750 * 100vh); }
.page-header.sub h1 { font-size: calc(48 / 750 * 100vw); }
.page-header.sub figure {
  top: calc(280 / 750 * 100vh / 3);
  right: calc(388 / 750 * 100vw / 2 * -1);
  width: calc(388 / 750 * 100vw);
}

/* -----------------------------------------------------------
  Breadcrumb
----------------------------------------------------------- */
.breadcrumb {
  font-size: calc(22 / 750 * 100vw);
  margin: calc(30 / 750 * 100%) 0 0;
}