@charset "UTF-8";

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

  FIRON "About" SP Styles

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

/* Margin & Padding 〜 40px = 5%で算出 */

/*
  Main
=============================================================================== */
.l-main { padding-bottom: calc((500 * .8) / 640 * 100%); }

/*
  Section
=============================================================================== */
.sec-heading {
  font-size: calc(56px * .8);
  font-size: calc(5.6rem * .8);
}

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

/* Section01
------------------------------------------------------------------------------- */
.sec01 > figure { height: calc((500 * .8) / 640 * 100vw); }
.sec01 .inner {
  padding: 10% 5% 11.25%;
  margin: -16.875% auto 0;
}
.mv-container { margin: 8.125% 0 0; }
.sec01 .lead {
  font-size: 16px;
  font-size: 1.6rem;
  margin: 7.5% 0 9.375%;
}
.sec01 .inner figure:first-of-type {
  width: calc(663.3995 / 850 * 100% * 1.25);
  margin: 0 auto 12.5%;
}
.sec01 .inner figure:last-of-type { width: calc(470 / 850 * 100% * 1.25); }

.firon-material { margin: 13.75% 0 0; }
.firon-material h3 {
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1.4;
  margin: 3.75% 0 5%;
}
.firon-material ul li {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.4;
  padding: .5em calc(24px * .8 * .75) .5em calc(24px * .8 * 2.25);
  margin: 20px 0 0;
}
.firon-material ul li::before {
  left: calc(24px * .8 * .75);
  width: calc(24px * .8);
  height: calc(24px * .8);
}

@media screen and (max-width:480px) {
  .sec01 .lead { font-size: max(calc(16 / 480 * 100vw), 12px); }
  .firon-material h3 { font-size: max(calc(18 / 480 * 100vw), 14px); }
  .firon-material ul li {
    font-size: max(calc(16 / 480 * 100vw), 12px);
    padding: .5em calc(24px * .8 * .5) .5em calc(24px * .8 * 2.25);
  }
}

/* Section02
------------------------------------------------------------------------------- */
.sec02 .inner {
  padding: 5%;
  margin: -12.5% auto 0;
}

/* Section Header */
.sec02 .sec-header { height: calc(500 / 640 * 100vw); }
.sec02 .sec-header h2 {
  font-size: calc(29px * .8);
  font-size: calc(2.9rem * .8);
}
.sec02 .sec-heading { margin: 0 0 6.25%; }

/* Feature */
.feature-unit { padding: 6% 4% 16%; }
.feat01, .feat02, .feat03 { margin: 0 0 5.625%; }

.feature-unit > h3 {
  font-size: calc(32px * .8);
  font-size: calc(3.2rem * .8);
  margin: 0 0 .5em;
}
.feature-unit > h4 {
  font-size: calc(40px * .8);
  font-size: calc(4.0rem * .8);
  line-height: 1.4;
  padding: .25em 0;
  margin: 0 0 4%;
}

.feat-intro {
  display: block;
  margin: 0 0 3.125%;
}
.feat-intro > figure { margin: 0 0 3.125%; }
.feat-intro > dl dt {
  font-size: calc(25px * .8);
  font-size: calc(2.5rem * .8);
}
.feat-intro > dl dd {
  font-size: 15px;
  font-size: 1.5rem;
  margin: .5em 0 2em;
}

.feat-lead, .feat04 .feat-lead {
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 1.4;
  padding: .75em 1em;
}

.feat01 .feat-images figure figcaption span {
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 1.3;
}

.feat03 .feat-lead + small {
  font-size: 13px;
  font-size: 1.3rem;
}

/* Contact Button */
.contact-btn {
  max-width: 100%;
  height: calc(66px * .8);
  border-radius: calc(66px * .8);
  padding: 0 9em 0 5em;
  margin: 10% auto 0;
}
.contact-btn span {
  font-size: calc(22px * .8);
  font-size: calc(2.2rem * .8);
}
.contact-btn span::after {
  right: calc(-50px * .8);
  width: calc(35px * .8);
  height: calc(35px * .8);
}

@media screen and (max-width:480px) {
  .sec02 .sec-header h2 { font-size: calc((29 * .8 * .75) / 480 * 100vw); }

  /* Feature */
  .feature-unit > h3 { font-size: calc((32 * .8 * .75) / 480 * 100vw); }
  .feature-unit > h4 { font-size: calc((40 * .8 * .75) / 480 * 100vw); }
  .feat-intro > dl dt {
    font-size: calc((25 * .8 * .75) / 480 * 100vw);
    line-height: 1.4;
    padding: .5em 0;
  }
  .feat-intro > dl dd { font-size: max(calc(14 / 480 * 100vw), 10px); }
  .feat-lead, .feat04 .feat-lead {
    font-size: max(calc(14 / 480 * 100vw), 10px);
    padding: .5em 1em;
  }
  .feat-images { display: block; }
  .feat-images figure { margin: 4% 0 0; }
  .feat01 .feat-images figure figcaption { padding: 1em 0; }
  .feat01 .feat-images figure figcaption span { font-size: max(calc(14 / 480 * 100vw), 10px); }

  .feat03 .feat-lead + small {
    font-size: max(calc(12 / 480 * 100vw), 9px);
    text-align: left;
  }

  /* Contact Button */
  .contact-btn {
    height: calc(66px * .8);
    border-radius: calc(66px * .8);
  }
  .contact-btn span { font-size: calc((22 * .8 * .75) / 480 * 100vw); }
}