@charset "UTF-8";

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

  FIRON "Index" SP Styles

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

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

/*
  Section
=============================================================================== */

/* Section01
------------------------------------------------------------------------------- */
.sec01 { padding: 10% 0 12.5%; }
.sec01 .inner { padding: 0; }
.news-list { display: block; }
.news-list a {
  display: flex;
  align-items: center;
  margin: 0 0 2.5%;
  text-align: left;
}
.news-list a figure { width: 40%; }
.news-list a p {
  margin: 0;
  padding: 0 0 0 1em;
}

@media screen and (max-width:480px) {
  .sec01 h2 {
    font-size: max(calc(28 / 480 * 100vw), 21px);
    margin: 0 0 6.25%;
  }
  .news-list a p { font-size: max(calc(16 / 480 * 100vw), 12px); }
}

/* Section02
------------------------------------------------------------------------------- */
.sec02 { padding: 0 0 18.75%; }
.sec02::after {
  transform: scale(.75) translateX(-50%);
  transform-origin: 50% 0;
}
.sec02 > figure { height: calc(350 / 640 * 100vw); }
.sec02 .inner {
  padding: 0;
  margin: -18.75% auto 0;
}
.about { padding: 6.25% 0 12.5%; }
.about h2 {
  font-size: calc(60px * .8);
  font-size: calc(6.0rem * .8);
}
.about h3 {
  font-size: calc(44px * .8);
  font-size: calc(4.4rem * .8);
}
.about figure:first-of-type { width: calc(470 / 850 * 100% * 1.25); }
.about p {
  font-size: 16px;
  font-size: 1.6rem;
  padding: 0 2em;
}
.about figure:last-of-type {
  width: calc(50% * 1.25);
  margin: 7.5% auto 9.375%;
}

@media screen and (max-width:480px) {
  .about h2 { font-size: calc((60 * .8 * .75) / 480 * 100vw); }
  .about h3 { font-size: calc((44 * .8 * .75) / 480 * 100vw); }
  .about p { padding: 0 1.5em; }
}

/* Section03
------------------------------------------------------------------------------- */
.sec03 { padding: 0 0 33.75%; }
.sec03 .inner { padding: 6.25% 0 0; }

/* Section Header */
.sec03 .sec-header {
  height: calc(555 / 640 * 100vw);
  background-position: 15% 0;
}
.sec03 .sec-header h2 {
  font-size: calc(56px * .8);
  font-size: calc(5.6rem * .8);
  margin: 0 0 10%;
}
.sec03 .sec-header p {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.8;
  padding: 0 2em;
}

.sec03 h3 {
  font-size: calc(30px * .8);
  font-size: calc(3.0rem * .8);
  margin: 0 0 7.5%;
}
.product-unit {
  gap: 3.75%;
  margin: 0 0 15%;
}
.product figure figcaption {
  font-size: calc(30px * .8);
  font-size: calc(3.0rem * .8);
  margin: 3.75% 0 1.25%;
}
.product p {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.6;
}
.attention {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.6;
}

@media screen and (max-width:480px) {
  .sec03 .sec-header h2 { font-size: calc((56 * .8 * .75) / 480 * 100vw); }
  .sec03 .sec-header p {
    font-size: max(calc(16 / 480 * 100vw), 12px);
    padding: 0 1.5em;
  }
  .sec03 h3 { font-size: max(calc((30 * .8 * .75) / 480 * 100vw), 16px); }
  .product figure figcaption { font-size: max(calc((30 * .8 * .75) / 480 * 100vw), 16px); }
  .product p, .attention { font-size: max(calc(16 / 480 * 100vw), 12px); }
}

@media screen and (max-width:375px) {
  .product-unit {
    display: block;
    padding: 0 7.5%;
  }
  .product { margin: 0 auto 7.5%; }
}