@charset "utf-8";

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

  "Nano Create Company" Contact Styles

============================================================= */
body {
  background-image: url(../images/contact_bg_gra.webp);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}
.sp { display: none !important; }

@media screen and (max-width:780px) {
  body { background-image: url(../images/contact_bg_gra_sp.webp); }
  .pc { display: none !important; }
  .sp { display: inherit !important; }
}

/*
  Page Header
============================================================= */
.page-header { padding: 200px 0 0; }
.page-header > i.round2 {
  position: absolute;
  top: calc(95 / 1920 * 100vw);
  left: calc(13 / 1920 * 100vw * -1);
}

@media screen and (max-width:780px) {
  .page-header { padding: calc(175 / 780 * 100vw) 0 0; }
  .page-header > i.round2 {
    top: calc(60 / 780 * 100vw);
    left: calc(313 / 780 * 100vw * -1);
  }
}

/*
  Inquiry
============================================================= */
.inquiry-unit { padding: 210px 0 105px; }
.inquiry-unit .inner { padding: 0 60px; }
.lead {
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: .15em;
  line-height: calc(36 / 16);
  margin: 0 0 100px;
}
.inquiry-form {
  width: 1080px;
  margin: auto;
  padding: 75px 0 100px;
  background-color: var(--white);
}

@media screen and (max-width:780px) {
  .inquiry-unit { padding: calc(200 / 780 * 100vw) 0 calc(35 / 780 * 100vw); }
  .inquiry-unit .inner { padding: 0; }
  .lead {
    font-size: calc(26 / 780 * 100vw);
    line-height: calc(60 / 26);
    letter-spacing: .075em;
    margin: 0 0 calc(100 / 780 * 100vw);
  }
  .inquiry-form {
    width: 100%;
    padding: calc(115 / 780 * 100vw) 0 calc(125 / 780 * 100vw);
  }
}

/*
  Breadcrumb
============================================================= */
.inquiry-unit + .breadcrumb { margin: 0 0 125px; }

@media screen and (max-width:780px) {
  .inquiry-unit + .breadcrumb { margin: 0 0 calc(90 / 780 * 100vw); }
}

/*
  Thanks
============================================================= */
.inquiry-unit.thanks .inner { padding: 0 0 0 60px; }
.inquiry-unit.thanks .df {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.inquiry-unit.thanks .lead { margin: 0 0 60px; }
.inquiry-unit.thanks figure { width: 280px; }
.return {
  position: relative;
  width: 300px;
  line-height: 60px;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  border: solid 1px #badfdb;
  border-radius: 30px;
  color: var(--green);
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: .05em;
  display: block;
  background: none;
  background-image: none;
  transition: all .3s;
  pointer-events: auto;
  text-align: center;
}
.return:hover {
  color: var(--white);
  background-color: #badfdb;
}

@media screen and (max-width:780px) {
  .inquiry-unit.thanks .inner { padding: 0; }
  .inquiry-unit.thanks .df {
    flex-direction: column;
    align-items: center;
  }
  .inquiry-unit.thanks .lead {
    font-size: calc(26 / 780 * 100vw);
    line-height: calc(60 / 26);
    margin: 0 0 calc(90 / 780 * 100vw);
  }
  .inquiry-unit.thanks figure { width: calc(210 / 780 * 100vw); }
  .return {
    width: calc(450 / 780 * 100vw);
    line-height: calc(90 / 780 * 100vw);
    font-size: calc(26 / 780 * 100vw);
    border-radius: calc(45 / 780 * 100vw);
    margin: calc(80 / 780 * 100vw) auto 0;
  }
}

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

  WordPress Overwrite Styles

============================================================= */
.entry-header, .entry-footer, .widget-area { display: none; }

/*
  Snow Monkey Forms
============================================================= */
.snow-monkey-form {
  width: 720px;
  margin: auto;
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: .05em;
  line-height: calc(36 / 16);
}
.smf-form > p:first-of-type { margin: 0 0 40px; }
.smf-item { margin: 0 0 50px; }

@media screen and (max-width:780px) {
  .snow-monkey-form {
    width: 100%;
    font-size: calc(26 / 780 * 100vw);
    line-height: calc(54 / 26);
  }
  .smf-form > p:first-of-type { margin: 0 0 calc(65 / 780 * 100vw); }
  .smf-item { margin: 0 0 calc(75 / 780 * 100vw); }
}

/*
  Select
------------------------------------------------------------- */
.smf-form .smf-select-control [name="contact-details"] {
  width: 516px;
  height: 60px;
  border-color: #d3d3d3;
  border-radius: 6px;
  padding: 0 0 0 2em;
}
.smf-form .smf-text-control__control {
  width: 100%;
  height: 60px;
  border-color: #d3d3d3;
}

@media screen and (max-width:780px) {
  .smf-form .smf-select-control [name="contact-details"] {
    width: calc(473 / 780 * 100vw);
    height: calc(90 / 780 * 100vw);
  }
  .smf-form .smf-text-control__control { height: calc(90 / 780 * 100vw); }
}

/*
  Asterisk
------------------------------------------------------------- */
.smf-item.asterisk .smf-item__label__text::after {
  content: "※";
  display: inline-block;
  margin: 0 0 0 .5em;
  color: #ffa4a4;
}
.smf-label label::after {
  content: "※";
  display: inline-block;
  margin: 0 0 0 .25em;
  color: #ffa4a4;
}
.red { color: #ffa4a4; }

/*
  Address
------------------------------------------------------------- */
.smf-item.df .smf-item__label__text {
  width: 125px;
  display: inline-block;
}
.smf-form input[name="zipcode"] { width: 250px; }
.smf-form input[name="pref"],
.smf-form input[name="city"],
.smf-form input[name="town"],
.smf-form input[name="building"] { width: 610px; }
.smf-form .smf-select-control__toggle:before { content: none; }

.df {
  display: flex;
  align-items: center;
}

@media screen and (max-width:780px) {
  .smf-item.df { margin: 0 0 calc(20 / 780 * 100vw); }
  .smf-item.df.building { margin: 0 0 calc(75 / 780 * 100vw); }
  .smf-item.df .smf-item__label__text { width: calc(190 / 780 * 100vw); }
  .smf-form input[name="zipcode"] { width: calc(235 / 780 * 100vw); }
  .smf-form input[name="pref"],
  .smf-form input[name="city"],
  .smf-form input[name="town"],
  .smf-form input[name="building"] { width: calc(470 / 780 * 100vw); }
}

@media screen and (max-width:640px) {
  .df { display: block; }
  .smf-item.df .smf-item__label__text { width: 100%; }
  .smf-form input[name="zipcode"] { width: 50%; }
  .smf-form input[name="pref"],
  .smf-form input[name="city"],
  .smf-form input[name="town"],
  .smf-form input[name="building"] { width: 100%; }
}

/*
  Search Zipcode
------------------------------------------------------------- */
.search-zipcode {
  font-size: 15px;
  font-size: 1.5rem;
  letter-spacing: .15em;
  display: inline-block;
  color: var(--green);
  margin: 0 0 50px 1em;
}
.search-zipcode::before {
  content: "";
  width: 19px;
  height: 16px;
  display: inline-block;
  background: url(../images/icon_btn_green.png) no-repeat 0 0 / cover;
  margin: 0 .5em 0 0;
}

@media screen and (max-width:780px) {
  .search-zipcode {
    font-size: calc(26 / 780 * 100vw);
    line-height: calc(36 / 26);
    margin: calc(10 / 780 * 100vw * -1) 0 calc(20 / 780 * 100vw);
  }
  .search-zipcode::before {
    width: calc(19 / 780 * 100vw);
    height: calc(16 / 780 * 100vw);
  }
}

/*
  Privacy Check
------------------------------------------------------------- */
.smf-form .smf-checkbox-control [type="checkbox"] { display: none; }
.smf-form .smf-checkbox-control__label {
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 0 0 55px;
}
.smf-form .smf-checkbox-control__label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border: solid 1px #d3d3d3;
  display: inline-block;
}
.smf-form .smf-checkbox-control [type="checkbox"]:checked + .smf-checkbox-control__label::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  display: inline-block;
  background: url(../images/check.svg) no-repeat 0 0 / cover;
}

.privacy-check { margin: 75px 0 0; }
.privacy-check a {
  font-size: 15px;
  font-size: 1.5rem;
  letter-spacing: .05em;
  color: var(--green);
  display: inline-block;
}
.privacy-check a::before {
  content: "";
  width: 19px;
  height: 16px;
  display: inline-block;
  background: url(../images/icon_btn_green.png) no-repeat 0 0 / cover;
  margin: 0 .25em 0 0;
}

@media screen and (max-width:780px) {
  .smf-form .smf-checkbox-control__label {
    height: calc(60 / 780 * 100vw);
    padding: 0 0 0 calc(75 / 780 * 100vw);
  }
  .smf-form .smf-checkbox-control__label::before {
    width: calc(60 / 780 * 100vw);
    height: calc(60 / 780 * 100vw);
  }
  .smf-form .smf-checkbox-control [type="checkbox"]:checked + .smf-checkbox-control__label::after {
    width: calc(60 / 780 * 100vw);
    height: calc(60 / 780 * 100vw);
  }

  .privacy-check { margin: 0; }
  .privacy-check a { font-size: calc(26 / 780 * 100vw); }
  .privacy-check a::before {
    width: calc(19 / 780 * 100vw);
    height: calc(16 / 780 * 100vw);
  }
}

/*
  Button Styles
------------------------------------------------------------- */
.smf-action {
  max-width: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}
.smf-action .smf-button-control {
  position: relative;
  width: 300px;
  height: 60px;
  margin: auto;
  background: none;
  text-align: center;
  display: block;
}
.smf-action .smf-button-control__control {
  position: relative;
  width: 100%;
  height: 60px;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  border-style: solid;
  border-width: 1px;
  border-color: #badfdb;
  border-radius: 30px;
  color: var(--green);
  background-color: var(--white);
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: .05em;
  display: block;
  background: none;
  background-image: none;
  transition: all .3s;
  pointer-events: auto;
  text-align: center;
}
.smf-action .smf-button-control__control:hover {
  color: var(--white);
  background-color: #badfdb;
}
.smf-action .smf-button-control__control.is-disabled {
  pointer-events: none;
  background-color: #d7d7d7;
}

/* Return */
.smf-action .smf-button-control__control[data-action="back"] {
  color: var(--white);
  border-color: #90a4ae;
  background-color: #90a4ae;
}
.smf-action .smf-button-control__control[data-action="back"]:hover {
  opacity: .6;
  transition: opacity .3s;
}

@media screen and (max-width:780px) {
  .smf-action { max-width: 100%; }
  .smf-action .smf-button-control {
    width: calc(450 / 780 * 100vw);
    height: calc(90 / 780 * 100vw);
  }
  .smf-action .smf-button-control__control {
    height: calc(90 / 780 * 100vw);
    border-radius: calc(45 / 780 * 100vw);
    font-size: calc(26 / 780 * 100vw);
  }
}

/*
  zipaddr-jp
------------------------------------------------------------- */
#autozip { display: none !important; }

/*
  Confirm Styles
------------------------------------------------------------- */
.snow-monkey-form[data-screen="confirm"] .df { display: block; }
.snow-monkey-form[data-screen="confirm"] .smf-item.df { display: block; }
.snow-monkey-form[data-screen="confirm"] .smf-item .smf-item__col--label {
  width: 100%;
  display: block;
  border-bottom: solid 1px #e3e3e3;
  padding: 0 0 10px;
  margin: 0 0 10px;
}

/* location */
.snow-monkey-form[data-screen="confirm"] .location { display: none; }

/* Address */
.snow-monkey-form[data-screen="confirm"]　.smf-item.df .smf-item__label__text {
  width: 100%;
}

/* Search Zipcode */
.snow-monkey-form[data-screen="confirm"] .search-zipcode { display: none !important; }

/* Privacy Check */
.snow-monkey-form[data-screen="confirm"] .privacy-check > p,
.snow-monkey-form[data-screen="confirm"] .privacy-check > span {
  display: none;
}

@media screen and (max-width:780px) {
  .snow-monkey-form[data-screen="confirm"] .smf-item.df {
    margin: 0 0 calc(75 / 780 * 100vw) !important;
  }
}

/*
  Complete Styles
------------------------------------------------------------- */
.snow-monkey-form[data-screen="complete"] { width: 100%; }

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

/* Round
------------------------------------------------------------- */
.dr05 { display: none; }

/* Square
------------------------------------------------------------- */
.ds04, .ds05, .ds06, .ds07 { display: none; }

/* Triangle
------------------------------------------------------------- */
.dt07 { display: none; }