@charset "UTF-8";
/* _mixin */
/* media query */
/* layout */
/* padding, margin */
/* headline */
/* color */
/* flex */
/* font */
@font-face {
  font-family: "Noto";
  font-style: normal;
  font-weight: 900;
  src: url("../font/NotoSansJP-Black.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Noto";
  font-style: normal;
  font-weight: 700;
  src: url("../font/NotoSansJP-Bold.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Noto";
  font-style: normal;
  font-weight: 500;
  src: url("../font/NotoSansJP-Medium.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Noto";
  font-style: normal;
  font-weight: 400;
  src: url("../font/NotoSansJP-Regular.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Noto";
  font-style: normal;
  font-weight: 300;
  src: url("../font/NotoSansJP-Light.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Noto";
  font-style: normal;
  font-weight: 100;
  src: url("../font/NotoSansJP-Thin.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 700;
  src: url("../font/Jost-Bold.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 500;
  src: url("../font/Oswald-Medium.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 600;
  src: url("../font/Oswald-SemiBold.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 700;
  src: url("../font/Oswald-Bold.woff2") format("woff2");
  font-display: swap;
}
/* other */
/* indiviual */
/* コンテンツ共通スタイル */
body {
  background-image: url(../../about/img/bg.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: auto 38.5em;
}
body::before {
  height: 39em;
}
@media screen and (max-width: 767px) {
  body::before {
    height: 35em;
  }
}
@media screen and (min-width: 1920px) {
  body {
    background-size: contain;
  }
}
@media screen and (min-width: 1651px) and (max-width: 1920px) {
  body {
    background-size: contain;
  }
}
@media screen and (min-width: 1598px) and (max-width: 1650px) {
  body {
    background-size: contain;
  }
}

.under main::before {
  top: 39em;
}
@media screen and (max-width: 767px) {
  .under main::before {
    top: 35em;
  }
}

#headline-area {
  height: 35em;
  margin-bottom: 0;
}
@media screen and (min-width: 1920px) {
  #headline-area {
    height: 38em;
    padding-bottom: 3em;
    margin-bottom: 0;
  }
}
@media screen and (max-width: 767px) {
  #headline-area {
    height: 30em !important;
  }
}

#contents-area-sub {
  background: #fff;
}

#right-column {
  padding-top: 0;
}
#right-column #sub-navi-area h2 span {
  letter-spacing: 0.15em;
  text-indent: 0.15em;
}
#right-column #sub-navi-area ul.sub-navi-ul li.sub-navi-li.act::before {
  display: none;
}

#about-top-area {
  text-align: center;
  width: 100%;
  height: 20em;
  margin-top: 5em;
  display: -moz-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  justify-content: center;
  order: 2;
}
@media screen and (max-width: 767px) {
  #about-top-area {
    height: auto;
  }
}
#about-top-area figure.headoffice {
  width: 36%;
  padding-top: 7em;
}
#about-top-area figure.headoffice img {
  width: 133%;
  max-width: 133%;
  transform: translateX(-25%);
}
#about-top-area .catch-area {
  text-align: left;
}
#about-top-area .catch-area p.catch {
  text-align: center;
  display: inline-block;
}
#about-top-area .catch-area p.catch strong {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 900;
  font-style: normal;
  font-size: 1.25em;
  color: #fff;
  letter-spacing: 0.07em;
  float: left;
}
#about-top-area .catch-area p.catch strong span {
  font-size: 1.4em;
  display: inline-block;
  padding-top: 0.2em;
}
#about-top-area .catch-area figure.line {
  text-align: right;
  width: 100%;
  padding-top: 5em;
}
#about-top-area .catch-area figure.line video {
  width: 65%;
}

.one-step-contents {
  margin-top: 5em !important;
  display: -moz-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  justify-content: space-between;
  align-items: flex-start;
}
.one-step-contents p.catch {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 900;
  font-style: normal;
  color: #3E83DB;
  font-weight: 300;
  letter-spacing: 0.5em;
  writing-mode: vertical-rl;
  position: sticky;
  top: 7em;
}
.one-step-contents p.catch strong {
  font-size: 1.5em;
}
.one-step-contents p.catch span {
  display: inline-block;
  padding-top: 3.25em;
}
.one-step-contents ol.one-step-ol {
  width: 81%;
}
.one-step-contents ol.one-step-ol li + li {
  margin-top: 8em;
}
.one-step-contents ol.one-step-ol li dl {
  display: -moz-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
}
.one-step-contents ol.one-step-ol li dl dt {
  width: 27%;
  display: -moz-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  flex-direction: column;
  order: 1;
}
.one-step-contents ol.one-step-ol li dl dt span.num {
  font-family: neue-haas-grotesk-display, sans-serif;
  font-style: normal;
  letter-spacing: 0;
  font-weight: 100;
  color: #3E83DB;
  font-size: 4.5em;
  line-height: 1;
}
.one-step-contents ol.one-step-ol li dl dt span.ja {
  font-size: 1.5em;
  padding-bottom: 0.5em;
  margin-left: auto;
  display: inline-block;
}
.one-step-contents ol.one-step-ol li dl dd.summary {
  width: 29%;
  padding: 4.5em 0 0 3.75%;
  order: 2;
}
.one-step-contents ol.one-step-ol li dl dd.summary p {
  font-size: 0.975em;
  font-weight: 500;
}
.one-step-contents ol.one-step-ol li dl dd.photo {
  width: 44%;
  position: relative;
  order: 0;
}
.one-step-contents ol.one-step-ol li dl dd.photo::before {
  width: 7em;
  height: 2px;
  display: block;
  position: absolute;
  top: 8em;
  left: -5em;
  background: linear-gradient(to right, #fff, #3E83DB);
  content: "";
}
.one-step-contents ol.one-step-ol li dl dd.photo picture {
  width: 100%;
  position: relative;
  z-index: 10;
}
.one-step-contents ol.one-step-ol li dl dd.photo picture img {
  width: 91.3%;
}
.one-step-contents ol.one-step-ol li dl dd.photo .onestep-movie {
  width: 91.3%;
  position: relative;
  z-index: 10;
}
.one-step-contents ol.one-step-ol li dl dd.photo .onestep-movie video {
  width: 100%;
}

.useful-in-life-area p.catch {
  text-align: center;
}
.useful-in-life-area p.catch strong {
  font-size: 1.25em;
  font-weight: 300;
  letter-spacing: 0.07em;
}
.useful-in-life-area .inner {
  font-size: 0.9vw;
  padding: 4em 0.5em 2em 0.5em;
  margin-top: 4em;
  display: -moz-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  flex-direction: column;
  justify-content: space-between;
  background-image: url(../../about/img/bg_useful_in_life.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}
@media screen and (min-width: 1920px) {
  .useful-in-life-area .inner {
    font-size: 0.9em;
  }
}
.useful-in-life-area .inner .useful-in-life-contents {
  font-size: 0.82vw;
  margin-bottom: 5em;
  width: 100%;
}
@media screen and (min-width: 1920px) {
  .useful-in-life-area .inner .useful-in-life-contents {
    font-size: 15px;
  }
}
.useful-in-life-area .inner .useful-in-life-contents .useful-in-life-content {
  width: 100%;
  height: 0;
  display: -moz-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  justify-content: space-between;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
}
.useful-in-life-area .inner .useful-in-life-contents .useful-in-life-content.active {
  height: auto;
  padding: 0 5%;
  opacity: 1;
}
.useful-in-life-area .inner .useful-in-life-contents .useful-in-life-content h3 {
  color: #000;
  font-size: 1.7em;
  border: none;
}
.useful-in-life-area .inner .useful-in-life-contents .useful-in-life-content p {
  font-size: 1.2em;
  font-weight: 500;
}
@media screen and (min-width: 1920px) {
  .useful-in-life-area .inner .useful-in-life-contents .useful-in-life-content p {
    font-size: 1.05em;
  }
}
@media screen and (min-width: 1651px) and (max-width: 1920px) {
  .useful-in-life-area .inner .useful-in-life-contents .useful-in-life-content p {
    font-size: 1em;
  }
}
.useful-in-life-area .inner .useful-in-life-contents .useful-in-life-content .txt-area {
  width: 68%;
  display: -moz-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
}
.useful-in-life-area .inner .useful-in-life-contents .useful-in-life-content .txt-area .img-contents {
  width: 38.5%;
  padding-right: 2em;
}
.useful-in-life-area .inner .useful-in-life-contents .useful-in-life-content .txt-area .img-contents img {
  width: 100%;
}
.useful-in-life-area .inner .useful-in-life-contents .useful-in-life-content .txt-area .txt-contents {
  width: 61.5%;
}
@media screen and (max-width: 767px) {
  .useful-in-life-area .inner .useful-in-life-contents .useful-in-life-content .txt-area .txt-contents {
    font-size: 1.6em;
  }
}
.useful-in-life-area .inner .useful-in-life-contents .useful-in-life-content picture {
  width: 27%;
}
.useful-in-life-area .inner .useful-in-life-contents .useful-in-life-content.cooling-device .txt-area {
  display: inline-block;
}
.useful-in-life-area .inner ul.life-ul {
  width: 100%;
  margin-bottom: 1em;
  display: -moz-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
}
.useful-in-life-area .inner ul.life-ul li {
  display: -moz-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  align-items: flex-end;
}
.useful-in-life-area .inner ul.life-ul li.water-heater {
  width: 7%;
  margin-bottom: 4em;
  order: 5;
}
.useful-in-life-area .inner ul.life-ul li.water-heater span::before {
  top: 3.85em;
  left: 1.45em;
  transform: rotate(-40deg);
}
.useful-in-life-area .inner ul.life-ul li.water-heater span::after {
  height: 1.5em;
  margin-left: 2.5em;
}
.useful-in-life-area .inner ul.life-ul li.floor-heating {
  width: 12%;
  order: 6;
}
.useful-in-life-area .inner ul.life-ul li.floor-heating span::before {
  top: 4.85em;
  left: 3.45em;
  transform: rotate(-40deg);
}
.useful-in-life-area .inner ul.life-ul li.floor-heating span::after {
  height: 2.5em;
  margin-left: 4.5em;
}
.useful-in-life-area .inner ul.life-ul li.floor-heating picture {
  margin-left: 2em;
}
.useful-in-life-area .inner ul.life-ul li.solar-water-heater {
  width: 12%;
  margin-right: 1em;
  order: 4;
}
.useful-in-life-area .inner ul.life-ul li.solar-water-heater span::before {
  top: 4.55em;
  left: 2.95em;
  transform: rotate(-40deg);
}
.useful-in-life-area .inner ul.life-ul li.solar-water-heater span::after {
  height: 2.2em;
  margin-left: 4em;
}
.useful-in-life-area .inner ul.life-ul li.solar-water-heater picture {
  margin-left: 1.5em;
}
.useful-in-life-area .inner ul.life-ul li.ecocute {
  width: 11%;
  margin-bottom: 2.5em;
  order: 7;
}
.useful-in-life-area .inner ul.life-ul li.ecocute span::before {
  top: 4.55em;
  left: 2.9em;
  transform: rotate(40deg);
}
.useful-in-life-area .inner ul.life-ul li.ecocute span::after {
  height: 2.2em;
  margin-left: 3em;
}
.useful-in-life-area .inner ul.life-ul li.ecocute picture {
  margin-left: 4.5em;
}
.useful-in-life-area .inner ul.life-ul li.fuel-cell {
  width: 10%;
  margin-bottom: 4em;
  order: 3;
}
.useful-in-life-area .inner ul.life-ul li.fuel-cell span::before {
  top: 3.5em;
  left: 2.9em;
  transform: rotate(40deg);
}
.useful-in-life-area .inner ul.life-ul li.fuel-cell span::after {
  height: 1.2em;
  margin-left: 3em;
}
.useful-in-life-area .inner ul.life-ul li.fuel-cell picture {
  margin-left: 4.5em;
}
.useful-in-life-area .inner ul.life-ul li.forklift {
  width: 10%;
  margin-bottom: 1.5em;
  order: 8;
}
.useful-in-life-area .inner ul.life-ul li.forklift span::before {
  top: 3.55em;
  left: 2.95em;
  transform: rotate(40deg);
}
.useful-in-life-area .inner ul.life-ul li.forklift span::after {
  height: 1.2em;
  margin-left: 3em;
}
.useful-in-life-area .inner ul.life-ul li.forklift picture {
  margin-left: 4.5em;
}
.useful-in-life-area .inner ul.life-ul li.washing-machine {
  width: 10%;
  margin-bottom: 5.5em;
  order: 2;
}
.useful-in-life-area .inner ul.life-ul li.washing-machine span::before {
  top: 4.55em;
  left: 2.95em;
  transform: rotate(40deg);
}
.useful-in-life-area .inner ul.life-ul li.washing-machine span::after {
  height: 2.2em;
  margin-left: 3em;
}
.useful-in-life-area .inner ul.life-ul li.washing-machine picture {
  margin-left: 4.5em;
}
.useful-in-life-area .inner ul.life-ul li.toilet-cleaning {
  width: 9%;
  margin-bottom: 2.5em;
  order: 9;
}
.useful-in-life-area .inner ul.life-ul li.toilet-cleaning span::before {
  top: 4.85em;
  left: 3.45em;
  transform: rotate(-40deg);
}
.useful-in-life-area .inner ul.life-ul li.toilet-cleaning span::after {
  height: 2.5em;
  margin-left: 4.5em;
}
.useful-in-life-area .inner ul.life-ul li.toilet-cleaning picture {
  margin-left: 2em;
}
.useful-in-life-area .inner ul.life-ul li.air-conditioning {
  width: 8%;
  margin-bottom: 2.5em;
  order: 1;
}
.useful-in-life-area .inner ul.life-ul li.air-conditioning span::before {
  top: 3.55em;
  left: 2.95em;
  transform: rotate(40deg);
}
.useful-in-life-area .inner ul.life-ul li.air-conditioning span::after {
  height: 1.2em;
  margin-left: 3em;
}
.useful-in-life-area .inner ul.life-ul li.air-conditioning picture {
  margin-left: 4.5em;
}
.useful-in-life-area .inner ul.life-ul li.train {
  width: 7%;
  margin-bottom: 0.5em;
  order: 10;
}
.useful-in-life-area .inner ul.life-ul li.train span {
  width: 100%;
  text-align: right;
}
.useful-in-life-area .inner ul.life-ul li.train span::before {
  top: 4.85em;
  left: 1.45em;
  transform: rotate(-40deg);
}
.useful-in-life-area .inner ul.life-ul li.train span::after {
  height: 2.5em;
  margin-left: 2.5em;
}
.useful-in-life-area .inner ul.life-ul li.cooling-device {
  width: 8%;
  margin-bottom: 2.5em;
  order: 0;
}
.useful-in-life-area .inner ul.life-ul li.cooling-device span::before {
  top: 6.4em;
  left: 2.95em;
  transform: rotate(-40deg);
}
.useful-in-life-area .inner ul.life-ul li.cooling-device span::after {
  height: 4em;
  margin-left: 4em;
}
.useful-in-life-area .inner ul.life-ul li.cooling-device picture {
  margin-left: 1.5em;
}
.useful-in-life-area .inner ul.life-ul li input {
  display: none;
}
.useful-in-life-area .inner ul.life-ul li input:checked + label {
  color: #3E83DB;
}
.useful-in-life-area .inner ul.life-ul li input:checked + label span {
  background-image: url(../img/icon/link_circle_blue.svg);
}
.useful-in-life-area .inner ul.life-ul li input:checked + label span::before, .useful-in-life-area .inner ul.life-ul li input:checked + label span::after {
  background: #3E83DB;
}
.useful-in-life-area .inner ul.life-ul li input:checked + label picture {
  background-image: none;
}
.useful-in-life-area .inner ul.life-ul li input:checked + label picture img {
  opacity: 1;
}
.useful-in-life-area .inner ul.life-ul li input:checked + label + .content {
  height: 56.5%;
  opacity: 1;
  pointer-events: initial;
  transition: 0.3s;
}
.useful-in-life-area .inner ul.life-ul li label span {
  font-size: 1.1vw;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding-right: 1.5em;
  padding-bottom: 1em;
  display: inline-block;
  position: relative;
  background-image: url(../img/icon/link_circle_black.svg);
  background-repeat: no-repeat;
  background-size: 1.05em auto;
  background-position: top 0.25em right;
}
@media screen and (min-width: 1920px) {
  .useful-in-life-area .inner ul.life-ul li label span {
    font-size: 1.1em;
  }
}
@media screen and (min-width: 1651px) and (max-width: 1920px) {
  .useful-in-life-area .inner ul.life-ul li label span {
    font-size: 0.9em;
  }
}
.useful-in-life-area .inner ul.life-ul li label span::before {
  width: 1.25em;
  height: 2px;
  display: block;
  position: absolute;
  background: #333;
  content: "";
}
.useful-in-life-area .inner ul.life-ul li label span::after {
  width: 2px;
  margin-top: 0.5em;
  display: block;
  background: #333;
  content: "";
}
.useful-in-life-area .inner ul.life-ul li label picture {
  width: 1.25em;
  background-image: url(../img/icon/pin_black.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.useful-in-life-area .inner ul.life-ul li label picture img {
  opacity: 0;
}
.useful-in-life-area .inner ul.products-photo-ul {
  padding: 2em 2em 0 2em;
  display: -moz-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  justify-content: center;
  gap: 2em;
}
.useful-in-life-area .inner ul.products-photo-ul li {
  text-align: center;
  width: 14%;
  padding: 1em;
  display: -moz-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
.useful-in-life-area .inner ul.products-photo-ul li img {
  max-height: 7em;
}

@media screen and (min-width: 1025px) and (max-width: 1280px) {
  .useful-in-life-area .inner {
    font-size: 1em;
  }
  .useful-in-life-area .inner .useful-in-life-contents ul.life-ul li {
    font-size: 1.3em;
  }
}
@media screen and (min-width: 951px) and (max-width: 1024px) {
  .useful-in-life-area .inner {
    font-size: 1em;
  }
  .useful-in-life-area .inner .useful-in-life-contents ul.life-ul li {
    font-size: 1.3em;
  }
}
@media screen and (min-width: 768px) and (max-width: 950px) {
  .useful-in-life-area .inner .useful-in-life-contents ul.life-ul {
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    flex-wrap: wrap;
    justify-content: center;
  }
  .useful-in-life-area .inner .useful-in-life-contents ul.life-ul li {
    width: auto !important;
    margin-right: 3em;
    margin-bottom: 1em !important;
    order: 0 !important;
  }
  .useful-in-life-area .inner .useful-in-life-contents ul.life-ul li label {
    font-size: 1.8em;
    display: -moz-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
  }
  .useful-in-life-area .inner .useful-in-life-contents ul.life-ul li label span {
    padding-bottom: 0;
    order: 1;
  }
  .useful-in-life-area .inner .useful-in-life-contents ul.life-ul li label span::before, .useful-in-life-area .inner .useful-in-life-contents ul.life-ul li label span::after {
    display: none !important;
  }
  .useful-in-life-area .inner .useful-in-life-contents ul.life-ul li label picture {
    width: 0.7em;
    margin: 0 0.5em 0 0 !important;
    display: -moz-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    align-items: flex-start;
    order: 0;
  }
  .useful-in-life-area .inner .useful-in-life-contents ul.life-ul li .content {
    font-size: 1.4em;
    padding: 2.5em;
  }
  .useful-in-life-area .inner .useful-in-life-contents ul.life-ul li .content .txt-area h3 {
    line-height: 1.5;
    display: inline;
  }
  .useful-in-life-area .inner .useful-in-life-contents ul.life-ul li .content .txt-area img {
    display: inline-block;
  }
  .useful-in-life-area .inner .useful-in-life-contents ul.life-ul li .content .txt-area p {
    font-size: 1.2em;
  }
}
@media screen and (max-width: 767px) {
  #about-top-area {
    flex-direction: column;
    position: relative;
  }
  #about-top-area .catch-area {
    text-align: center;
    width: 100%;
    order: 0;
  }
  #about-top-area .catch-area p.catch {
    font-size: 1.3em !important;
  }
  #about-top-area .catch-area p.catch strong {
    width: 100%;
    margin: 0 auto;
  }
  #about-top-area .catch-area figure.line {
    width: 50%;
    padding: 11em 0 0;
    margin-left: 50%;
  }
  #about-top-area .catch-area figure.line video {
    width: 100%;
  }
  #about-top-area figure.headoffice {
    width: 50%;
    position: absolute;
    bottom: 8em;
    order: 1;
  }
  #about-top-area figure.headoffice img {
    width: 100%;
    max-width: 100%;
    transform: translateX(0);
  }
  .one-step-area {
    margin-top: 8em;
  }
  .one-step-area p.catch {
    position: static;
  }
  .one-step-area .one-step-contents {
    flex-direction: column;
  }
  .one-step-area .one-step-contents p.catch {
    text-align: center;
    margin: 0 auto;
  }
  .one-step-area .one-step-contents ol.one-step-ol {
    width: 100%;
    padding: 0 2em;
  }
  .one-step-area .one-step-contents ol.one-step-ol li dl {
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    flex-wrap: wrap;
  }
  .one-step-area .one-step-contents ol.one-step-ol li dl dt {
    width: 100%;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;
    order: 0;
  }
  .one-step-area .one-step-contents ol.one-step-ol li dl dt span.ja {
    margin-left: 0.5em;
  }
  .one-step-area .one-step-contents ol.one-step-ol li dl dt picture {
    width: 100%;
    padding-top: 0.5em;
  }
  .one-step-area .one-step-contents ol.one-step-ol li dl dd.summary {
    width: 100%;
    padding: 1.5em 0;
    order: 1;
  }
  .one-step-area .one-step-contents ol.one-step-ol li dl dd.summary p {
    font-size: 1em;
  }
  .one-step-area .one-step-contents ol.one-step-ol li dl dd.photo {
    text-align: right;
    width: 100%;
    order: 2;
  }
  .useful-in-life-area .inner .useful-in-life-nav {
    font-size: 1.15em;
    margin-bottom: 12.5em;
  }
  .useful-in-life-area .inner .useful-in-life-nav ul.life-ul {
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    flex-wrap: wrap;
    justify-content: center;
  }
  .useful-in-life-area .inner .useful-in-life-nav ul.life-ul li {
    width: auto !important;
    margin-right: 3em;
    margin-bottom: 1em !important;
    order: 0 !important;
  }
  .useful-in-life-area .inner .useful-in-life-nav ul.life-ul li label {
    font-size: 3.3em;
    font-weight: 500;
    display: -moz-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
  }
  .useful-in-life-area .inner .useful-in-life-nav ul.life-ul li label span {
    font-weight: 500;
    font-size: 0.5em;
    padding-bottom: 0;
    order: 1;
  }
  .useful-in-life-area .inner .useful-in-life-nav ul.life-ul li label span::before, .useful-in-life-area .inner .useful-in-life-nav ul.life-ul li label span::after {
    display: none !important;
  }
  .useful-in-life-area .inner .useful-in-life-nav ul.life-ul li label picture {
    width: 0.5em;
    margin: 0 0.5em 0 0 !important;
    display: -moz-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    align-items: flex-start;
    order: 0;
  }
  .useful-in-life-area .inner .useful-in-life-nav ul.life-ul li .content {
    font-size: 2em;
    padding: 2.5em;
  }
  .useful-in-life-area .inner .useful-in-life-nav ul.life-ul li .content .txt-area h3 {
    line-height: 1.5;
    display: inline;
  }
  .useful-in-life-area .inner .useful-in-life-nav ul.life-ul li .content .txt-area h3 + p {
    margin-top: 1em;
  }
  .useful-in-life-area .inner .useful-in-life-nav ul.life-ul li .content .txt-area img {
    display: inline-block;
  }
  .useful-in-life-area .inner .useful-in-life-nav ul.life-ul li .content .txt-area p {
    font-size: 1.3em;
  }
  #right-column #sub-navi-area h2::after {
    height: 10em;
  }
  #right-column #sub-navi-area p {
    color: #000;
  }
  #right-column #sub-navi-area ul.sub-navi-ul {
    margin-top: 0;
  }
}/*# sourceMappingURL=about.css.map */