@charset "utf-8";

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

  Hiraya "Highly Insulated and Airtight Housing" SP Style

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

/*
  Main Visual
-------------------------------------------------------------------- */
.main-visual { margin: 0; }
.main-visual figure {
  height: auto;
  max-height: initial;
  aspect-ratio: 750 / 670;
}
.main-visual figure img {
  aspect-ratio: 750 / 670;
  object-position: 70% 50%;
}
.page-heading {
  font-size: calc(48 / 750 * 100vw);
  margin: calc(150 / 750 * 100%) 0 0;
}
.page-heading small {
  font-size: calc(30 / 48 * 1em);
  line-height: calc(48 / 30);
  margin: calc(40 / 750 * 100%) 0 0;
}

/*
  Page Link
-------------------------------------------------------------------- */
.page-link { padding-top: calc(75 / 750 * 100%); }
.page-link ul { padding: 0; }

/*
  Section
-------------------------------------------------------------------- */
.sec-heading {
  font-size: calc(48 / 750 * 100vw);
  line-height: calc(60 / 48);
}

/* メリット
---------------------------------- */
.sec01 { padding: calc(70 / 750 * 100%) 0 0; }

.point h3 { margin: 0 0 0 calc(20 / 750 * 100% * -1) }
.point h3 i { width: calc(177 / 750 * 100%); }
.point h3 span {
  position: relative;
  top: -.15em;
  font-size: calc(38 / 750 * 100vw);
  line-height: calc(48 / 38);
  margin: 0 0 0 15px;
}
.point h3 + p {
  font-size: calc(24 / 750 * 100vw);
  line-height: calc(40 / 24);
  margin: calc(40 / 750 * 100%) 0 calc(45 / 750 * 100%);
}
.point figure + small {
  font-size: calc(20 / 750 * 100vw);
  line-height: calc(30 / 20);
  margin: 0;
}

.point01 { padding: calc(70 / 750 * 100%) 0 calc(50 / 750 * 100%); }
.point01 figure {
  width: calc(700 / 670 * 100%);
  margin: calc(45 / 750 * 100%) auto calc(35 / 750 * 100%) calc(15 / 700 * 100% * -1);
}
.point02 figure {
  width: calc(590 / 670 * 100%);
  margin: calc(40 / 750 * 100%) auto;
}
.point03 figure {
  width: calc(700 / 670 * 100%);
  margin: calc(40 / 750 * 100%) auto calc(40 / 750 * 100%) calc(15 / 700 * 100% * -1);
}
.point03 ul {
  width: calc(700 / 750 * 100vw);
  margin: calc(40 / 750 * 100%) auto calc(40 / 750 * 100%) calc(15 / 700 * 100% * -1);
}

/* 背景
---------------------------------- */
.sec02 { padding: calc(100 / 750 * 100%) 0; }
.sec02::before {
  height: calc(641 / 750 * 100vw);
  background-image: url(../images/hia/hia-housing_sec02_bg_top_sp.png);
}
.sec02::after {
  height: calc(649 / 750 * 100vw);
  background-image: url(../images/hia/hia-housing_sec02_bg_btm_sp.png);
}
.sec02 .sec-heading + p {
  width: 100%;
  font-size: calc(24 / 750 * 100vw);
  line-height: calc(40 / 24);
  margin: calc(40 / 750 * 100%) 0 0;
}
.regional-division-map {
  position: static;
  top: initial;
  right: initital;
  width: 100%;
}
.regional-division-map img {
  width: 100%;
  height: auto;
}
.ua-value {
  padding: 0;
  margin: calc(70 / 750 * 100%) 0 0;
}
.ua-explanation { display: block; }
.ua-explanation dl { margin: 0 0 calc(60 / 750 * 100%); }
.ua-explanation dl dt {
  font-size: calc(30 / 750 * 100vw);
  letter-spacing: .05em;
  line-height: calc(40 / 30);
  margin: 0 0 .5em;
}
.ua-explanation dl dd {
  font-size: calc(24 / 750 * 100vw);
  letter-spacing: .1em;
  line-height: calc(40 / 24);
}
.ua-value > figure {
  width: calc(700 / 670 * 100%);
  margin: 0 0 calc(40 / 750 * 100%) calc(15 / 700 * 100% * -1);
}
.ua-value > figure img {
  width: 100%;
  height: auto;
  padding: calc(20 / 750 * 100%) 0 0;
}
.ua-value > figure figcaption {
  font-size: calc(24 / 750 * 100vw);
  line-height: calc(30 / 24);
}
.whats-ua {
  width: calc(700 / 670 * 100%);
  padding: calc(45 / 750 * 100%) calc(30 / 750 * 100%) calc(30 / 750 * 100%);
  flex-direction: column;
  margin: 0 0 0 calc(15 / 700 * 100% * -1);
}
.whats-ua > dl dd {
  font-size: calc(24 / 750 * 100vw);
  line-height: calc(40 / 24);
  padding: 0;
}
.whats-ua > figure {
  width: calc(640 / 700 * 100%);
  margin: calc(40 / 750 * 100%) 0 0;
}

/* 断熱住宅とは？
---------------------------------- */
.sec03 { padding: calc(80 / 750 * 100%) 0 0; }
.sec-visual img { aspect-ratio: 750 / 560; }

/* 断熱住宅の事例
---------------------------------- */
.sec04 { padding: calc(50 / 750 * 100%) 0 calc(70 / 750 * 100%); }
.sec04 .sec-heading { margin: 0 0 calc(35 / 750 * 100%); }
.sec04 .sec-heading small { font-size: calc(30 / 48 * 1em); }

.example-intro { margin: 0; }
.example-intro p {
  font-size: calc(24 / 750 * 100vw);
  line-height: calc(40 / 24);
  margin: 0 0 calc(50 / 750 * 100%);
  padding: 0 calc(40 / 750 * 100%);
}
.example-intro > div { width: 100%; }
.example-intro > div figure:first-of-type {
  width: calc(511 / 750 * 100vw);
  margin: 0 auto calc(50 / 750 * 100%);
}
.example-intro > div img {
  width: 100%;
  height: auto;
}

.example-intro + .inner { width: calc(700 / 750 * 100%); }
.example {
  margin: calc(60 / 750 * 100%) 0 0;
  padding: 0;
}
.ex01 { padding: 0 0 calc(65 / 750 * 100%); }
.ex02 { padding: 0 0 calc(70 / 750 * 100%); }
.ex03 { padding: 0 0 calc(70 / 750 * 100%); }
.ex04 { padding: 0 0 calc(70 / 750 * 100%); }
.ex05 { padding: 0 0 calc(70 / 750 * 100%); }

.example-heading {
  top: calc(30 / 750 * 100vw);
  left: calc(15 / 750 * 100vw);
  padding: 0 calc(30 / 750 * 100vw) 0 0;
}
.example-heading i {
  width: calc(175 / 750 * 100vw);
  height: calc(175 / 750 * 100vw);
}
.example-heading i::before { font-size: calc(26 / 750 * 100vw); }
.example-heading span {
  font-size: calc(30 / 750 * 100vw);
  margin: 0 0 0 calc(15 / 750 * 100%);
}

/* Example01
---------------------------------- */

/* 断熱材 */
.insulation {
  display: block;
  padding: 0 calc(80 / 750 * 100%);
}
.insulation h4 {
  font-size: calc(28 / 750 * 100vw);
  line-height: calc(36 / 28);
  margin: calc(60 / 750 * 100%) 0 calc(30 / 750 * 100%);
}
.insulation h4 small { margin: .5em 0 0; }
.insulation ul:first-of-type { margin: 0 0 calc(60 / 750 * 100%); }
.insulation ul li span { font-size: calc(24 / 750 * 100vw); }
.insulation ul li p {
  font-size: calc(24 / 750 * 100vw);
  line-height: calc(40 / 24);
}

/* Example02
---------------------------------- */
.wbp-pict {
  position: static;
  top: initial;
  right: initial;
  width: 100%;
  height: auto;
  margin: 0 auto calc(40 / 750 * 100%);
}
.w700 { width: 100%; }
.ex02 h4 {
  font-size: calc(30 / 750 * 100vw);
  font-weight: 400;
  line-height: calc(40 / 30);
  height: auto;
  border-width: 2px;
  text-align: left;
  border-radius: 5px;
  padding: .5em .75em;
  margin: auto;
}
.ex02 h4::before {
  content: "";
  position: absolute;
  top: calc(54 / 750 / 2 * 100vw * -1);
  left: calc(53 / 750 / 2 * 100vw * -1);
  width: calc(54 / 750 * 100vw);
  height: calc(53 / 750 * 100vw);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.ex02 h4.wbpp01::before {
  background-image: url(../images/hia/hia-housing_sec04_03_num001.png);
}
.ex02 h4.wbpp02::before {
  background-image: url(../images/hia/hia-housing_sec04_03_num002.png);
}
.ex02 h4.wbpp03::before {
  background-image: url(../images/hia/hia-housing_sec04_03_num003.png);
}
.ex02 h4::after { content: none; }

/* 構造体 */
.structure {
  padding: 0 calc(25 / 750 * 100%);
  margin: 0 0 calc(60 / 750 * 100%);
}
.structure .w700:first-of-type { margin: 0 0 calc(90 / 750 * 100%); }
.structure p {
  font-size: calc(24 / 750 * 100vw);
  line-height: calc(40 / 24);
}
.structure ul { display: block; }
.structure ul li { padding: 0 calc(55 / 750 * 100%); }
.structure ul li:first-of-type { margin: 0 0 calc(45 / 750 * 100%); }

/* 工場生産 */
.factory-production { padding: 0 calc(25 / 750 * 100%); }
.factory-production .w700 + p {
  font-size: calc(24 / 750 * 100vw);
  line-height: calc(40 / 24);
  letter-spacing: .075em;
  margin: calc(30 / 750 * 100%) 0 0;
}
.production {
  display: block;
  padding: 0 calc(55 / 750 * 100%);
  margin: calc(40 / 750 * 100%) 0 0;
}
.production > div { margin: calc(60 / 750 * 100%) 0 0; }
.production > div dl dt {
  font-size: calc(28 / 750 * 100vw);
  line-height: calc(36 / 28);
}
.production > div dl dd span { font-size: calc(20 / 750 * 100vw); }
.production > div p {
  width: calc(80 / 750 * 100%);
  margin: calc(25 / 750 * 100%) auto;
}

/* Example03
---------------------------------- */

/* 高気密 */
.high-airtightness { display: block; }
.high-airtightness > figure { padding: 0 calc(80 / 750 * 100%); }
.high-airtightness figcaption { font-size: calc(20 / 750 * 100vw); }
.high-airtightness > div {
  margin: calc(60 / 750 * 100%) 0 0;
  padding: 0 calc(45 / 750 * 100%);
}
.high-airtightness > div dl { padding: 0 calc(35 / 750 * 100%); }
.high-airtightness > div dl dt {
  font-size: calc(28 / 750 * 100vw);
  line-height: calc(36 / 28);
}
.high-airtightness > div dl dd {
  font-size: calc(24 / 750 * 100vw);
  line-height: calc(40 / 24);
}
.high-airtightness ul li p {
  font-size: calc(20 / 750 * 100vw);
  line-height: calc(30 / 20);
}

/* Example04
---------------------------------- */

/* 窓 */
.window-performance { display: block; }
.window-performance > figure {
  padding: 0 calc(80 / 750 * 100%);
  margin: 0 0 calc(80 / 750 * 100%);
}
.window-performance > figure figcaption {
  font-size: calc(24 / 750 * 100vw);
  line-height: calc(40 / 24);
  margin: calc(20 / 750 * 100%) 0 0;
}
.window-performance dl { padding: 0 calc(45 / 750 * 100%); }
.window-performance dl dt {
  padding: 0 calc(35 / 750 * 100%);
  font-size: calc(28 / 750 * 100vw);
  line-height: calc(36 / 28);
  margin: 0 0 15px;
}
.window-performance dl dd figure {
  width: calc(391 / 700 * 100%);
  margin: 0 auto 5px;
}
.window-performance dl dd p {
  font-size: calc(20 / 750 * 100vw);
  line-height: calc(30 / 20);
}

/* Example05
---------------------------------- */

/* 換気システム */
.ventilation-system { padding: 0 calc(15 / 750 * 100%); }
.ventilation-system > figure figcaption {
  font-size: calc(20 / 750 * 100vw);
  line-height: calc(30 / 20);
  letter-spacing: .025em;
  margin: .5em 0 0;
}
.ventilation-system > div {
  display: block;
  margin: calc(80 / 750 * 100%) 0 0;
  padding: 0 calc(65 / 750 * 100%);
}
.ventilation-system > div dl { margin: 0 0 calc(30 / 750 * 100%); }
.ventilation-system > div dl dt {
  font-size: calc(28 / 750 * 100vw);
  line-height: calc(36 / 28);
}
.ventilation-system > div dl dd {
  font-size: calc(24 / 750 * 100vw);
  line-height: calc(40 / 24);
}

/* 関連カタログプレセント
---------------------------------- */
.present-unit { padding: calc(120 / 750 * 100%) 0; }
.present-unit h3 {
  font-size: calc(30 / 750 * 100vw);
  line-height: calc(48 / 30);
}
.present-items {
  display: block;
  margin: 0;
}
.present { margin: 0 0 calc(90 / 750 * 100%); }
.present-summary { padding: 0 calc(80 / 750 * 100%); }

/* CheckBox */
.present-summary label { margin: 0 0 calc(20 / 750 * 100%); }
.present-summary label span {
  font-size: calc(28 / 750 * 100vw);
  line-height: calc(42 / 28);
}
.present-summary label span small { font-size: calc(22 / 28 * 1em); }
.present-summary p {
  font-size: calc(24 / 750 * 100vw);
  line-height: calc(33 / 24);
}

@media screen and (max-width:414px) {
  .present-summary label { padding: 0 0 0 25px; }
  .present-summary label span::before,
  .present-summary label input[type="checkbox"]:checked + span::after {
    transform: scale(0.9);
    transform-origin: 0 0;
  }
}
@media screen and (max-width:375px) {
  .present-summary label span::before,
  .present-summary label input[type="checkbox"]:checked + span::after {
    transform: scale(0.85);
  }
}

/* Tag */
.tag { margin: calc(25 / 750 * 100%) 0 0; }
.tag i {
  font-size: calc(20 / 750 * 100vw);
  padding: 4px 6px;
}

/* 応募ボタン */
.present-app-btn { margin: 0; }
.present-app-btn img {
  width: 100%;
  height: auto;
}

/* インタビュー掲載
---------------------------------- */
.sec06 h3 {
  font-size: calc(34 / 750 * 100vw);
  letter-spacing: .05em;
  line-height: calc(48 / 34);
}
.sec06 p {
  font-size: calc(30 / 750 * 100vw);
  line-height: calc(36 / 30);
}
.sec06 figure img { aspect-ratio: 750 / 280; }

/* Fixed Button
---------------------------------- */
.fixed-btn {
  top: initial;
  bottom: 0;
}
.fixed-btn a img {
  width: 100%;
  height: auto;
}