@charset "UTF-8";
.g-container {
  line-height: 2;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif; }
  @media screen and (max-width: 767px) {
    .g-container {
      line-height: 1.75; } }

body.is-building-warema p {
  margin-bottom: 0; }

.inner {
  width: 1200px;
  margin: 0 auto; }

.title {
  font-size: 34px;
  font-weight: normal;
  text-align: center;
  letter-spacing: .06em; }

.txt {
  margin: 12px auto 0;
  text-align: center; }

@media screen and (max-width: 767px) {
  .inner {
    width: 90.67%;
    margin: 0 auto; }
  .headline {
    margin-bottom: 8vw; }
  .title {
    font-size: 27px;
    line-height: 1.5; }
  .txt {
    margin: 4vw auto 0;
    text-align: left;
    font-size: 15px; }
  p, dd {
    font-size: 15px; } }

img {
  -webkit-backface-visibility: hidden; }

.txt_source {
  margin: 10px 0 0;
  text-align: right;
  color: #898f9c;
  font-size: 14px; }
  .txt_source a {
    color: #898f9c;
    border-bottom: 1px solid #898f9c;
    padding-right: 2em;
    position: relative; }
    .txt_source a::after {
      content: '';
      display: block;
      width: 15px;
      height: 14px;
      position: absolute;
      top: -1px;
      right: 6px;
      background: url(../img/icon_blank.png) no-repeat right center;
      background-size: 100%; }
    @media screen and (max-width: 767px) {
      .txt_source a {
        padding-right: 1em; }
        .txt_source a::after {
          width: 1em;
          display: inline-block;
          position: relative;
          left: 0.4em;
          top: auto;
          bottom: -0.1em; } }
    .txt_source a:hover {
      border: none; }
  @media screen and (max-width: 767px) {
    .txt_source {
      margin: 10px 0 0;
      text-align: left;
      font-size: 13px; } }

/* ZEBに求められるビル用日射制御システム
/* ---------------------------------- */
.area_lead {
  padding: 247px 0 100px;
  background: url(../img/image01_pc.jpg) no-repeat center top #f6f6f6; }
  .area_lead .box_lead {
    padding: 62px 80px 80px;
    background: #fff; }
  .area_lead .img {
    width: 920px;
    margin: 36px auto 0; }
  .area_lead .box_list {
    margin: 36px 0 0;
    padding: 24px 20px 16px 26px;
    border: 4px solid #f6f6f6; }
    .area_lead .box_list ul li + li {
      margin-top: 18px; }
    .area_lead .box_list dl dt {
      font-weight: bold; }
      .area_lead .box_list dl dt span {
        width: 26px;
        height: 26px;
        margin-right: .8em;
        display: inline-block;
        text-align: center;
        line-height: 28px;
        background: #f4822c;
        color: #fff;
        position: relative;
        top: 2px; }
    .area_lead .box_list dl dd {
      margin-top: 8px; }
  @media screen and (max-width: 767px) {
    .area_lead {
      padding: 36vw 0 18vw;
      background: url(../img/image01_sp.jpg) no-repeat center top #f6f6f6;
      background-size: 100%; }
      .area_lead .box_lead {
        padding: 11vw 4.6% 13vw; }
      .area_lead .img {
        width: 100%;
        margin: 6vw auto 0; }
      .area_lead .box_list {
        margin: 7.5vw 0 0;
        padding: 4.1vw 5% 2.6vw;
        border: 3px solid #f6f6f6; }
        .area_lead .box_list ul li + li {
          margin-top: 3vw; }
        .area_lead .box_list dl dt {
          font-weight: bold;
          font-size: 15px; }
          .area_lead .box_list dl dt span {
            width: 1.55em;
            height: 1.55em;
            margin-right: .6em;
            line-height: 1.6em; }
        .area_lead .box_list dl dd {
          margin-top: 2vw; } }

/* ZEBでの採用実績
/* ---------------------------------- */
.box_achievement {
  margin: 84px auto 0; }
  @media screen and (max-width: 767px) {
    .box_achievement {
      margin: 15.5vw auto 0; } }

.ul_achievement {
  width: 1200px;
  margin: 20px auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .ul_achievement li {
    width: 380px; }
    @media screen and (min-width: 768px) {
      .ul_achievement li {
        margin-left: 30px; }
        .ul_achievement li:nth-child(3n + 1) {
          margin-left: 0; }
        .ul_achievement li:nth-child(n + 4) {
          margin-top: 34px; } }
    .ul_achievement li a {
      display: block; }
    .ul_achievement li .name {
      margin: 12px 0 0;
      color: #007f41;
      font-weight: bold; }
      .ul_achievement li .name span {
        padding-right: 2em;
        position: relative; }
        .ul_achievement li .name span::after {
          content: '';
          display: block;
          width: 15px;
          height: 14px;
          position: absolute;
          top: -1px;
          right: 6px;
          background: url(../img/icon_blank.png) no-repeat right center;
          background-size: 100%; }
        @media screen and (max-width: 767px) {
          .ul_achievement li .name span {
            padding-right: 1em; }
            .ul_achievement li .name span::after {
              width: 1em;
              display: inline-block;
              position: relative;
              left: 0.4em;
              top: auto;
              bottom: -0.1em; } }
        .ul_achievement li .name span::after {
          top: 1px;
          right: 9px; }
  @media screen and (max-width: 767px) {
    .ul_achievement {
      width: 100%;
      margin: 5.5vw auto 0; }
      .ul_achievement li {
        width: calc( (100% - 1px) / 2);
        margin-left: 1px; }
        .ul_achievement li:nth-child(odd) {
          margin-left: 0; }
        .ul_achievement li:nth-child(n + 3) {
          margin-top: 6vw; }
        .ul_achievement li a {
          display: block; }
        .ul_achievement li dl {
          margin: 2.8vw 0 0;
          padding: 0 8.02%; }
          .ul_achievement li dl dt {
            font-size: 14px;
            line-height: 1.7; }
            .ul_achievement li dl dt span {
              padding-right: 0; }
              .ul_achievement li dl dt span::after {
                left: auto;
                right: -.3em; }
          .ul_achievement li dl dd {
            font-size: 13px; } }

/* 対象商品
/* ---------------------------------- */
.box_shipping {
  margin: 94px auto 0;
  padding: 62px 0 80px;
  background: #f6f6f6; }
  .box_shipping .ul_shipping {
    width: 1040px;
    margin: 22px auto 0; }
    .box_shipping .ul_shipping li {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; }
      .box_shipping .ul_shipping li + li {
        margin: 40px 0 0; }
      .box_shipping .ul_shipping li .img {
        width: 450px; }
      .box_shipping .ul_shipping li .box_text {
        width: 550px; }
        .box_shipping .ul_shipping li .box_text dl {
          margin: 30px 0 0; }
          .box_shipping .ul_shipping li .box_text dl dt {
            font-size: 20px;
            font-weight: bold; }
          .box_shipping .ul_shipping li .box_text dl dd {
            margin: 10px 0 0;
            font-size: 16px; }
        .box_shipping .ul_shipping li .box_text .btn {
          width: 350px;
          margin: 34px 0 0; }
          .box_shipping .ul_shipping li .box_text .btn a {
            padding: 15px 0 13px;
            display: block;
            border: 1px solid #333;
            font-size: 15px;
            font-weight: bold;
            text-align: center; }
          .box_shipping .ul_shipping li .box_text .btn:hover, .box_shipping .ul_shipping li .box_text .btn:hover a {
            opacity: 1; }
          .box_shipping .ul_shipping li .box_text .btn:hover a {
            background: #333;
            color: #f6f6f6; }
  @media screen and (max-width: 767px) {
    .box_shipping {
      margin: 14vw auto 0;
      padding: 0;
      background: none; }
      .box_shipping .box_sp {
        margin: 5vw auto 0;
        padding: 10vw 0 10vw;
        background: #f6f6f6; }
      .box_shipping .ul_shipping {
        width: 89.71%;
        margin: 1vw auto 0; }
        .box_shipping .ul_shipping li {
          display: block; }
          .box_shipping .ul_shipping li + li {
            margin: 13.3vw 0 0; }
          .box_shipping .ul_shipping li .img {
            width: 100%; }
          .box_shipping .ul_shipping li .box_text {
            width: 100%; }
            .box_shipping .ul_shipping li .box_text dl {
              margin: 3.5vw 0 0; }
              .box_shipping .ul_shipping li .box_text dl dt {
                font-size: 17px;
                line-height: 1.65; }
              .box_shipping .ul_shipping li .box_text dl dd {
                margin: 2.4vw 0 0;
                font-size: 15px; }
            .box_shipping .ul_shipping li .box_text .btn {
              width: 100%;
              margin: 6.3vw 0 0; }
              .box_shipping .ul_shipping li .box_text .btn a {
                padding: 3vw 0;
                font-size: 14px; } }

/* ZEBとは
/* ---------------------------------- */
.area_zeb {
  margin: 100px auto 0;
  padding: 433px 0 10px;
  background: url(../img/image02_pc.jpg) no-repeat center top; }
  .area_zeb .title span {
    padding: 0 5px;
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
    letter-spacing: 0; }
  .area_zeb .box_wrap {
    margin: 25px auto 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
    .area_zeb .box_wrap .img {
      width: 570px; }
      .area_zeb .box_wrap .img .txt_source {
        margin: 13px 0 0; }
    .area_zeb .box_wrap .box_text {
      width: 594px;
      padding: 40px 0; }
      .area_zeb .box_wrap .box_text p {
        letter-spacing: .05em;
        -webkit-font-feature-settings: "palt";
        font-feature-settings: "palt"; }
        .area_zeb .box_wrap .box_text p + p {
          margin: 30px 0 0; }
        .area_zeb .box_wrap .box_text p span {
          letter-spacing: .01em; }
  @media screen and (max-width: 767px) {
    .area_zeb {
      margin: 17.5vw auto 0;
      padding: 57.6vw 0 5vw;
      background: url(../img/image02_sp.jpg) no-repeat center top;
      background-size: 100%; }
      .area_zeb .box_wrap {
        margin: 7vw auto 0;
        display: block; }
        .area_zeb .box_wrap .img {
          width: 100%; }
          .area_zeb .box_wrap .img .txt_source {
            margin: 3vw 0 0; }
            .area_zeb .box_wrap .img .txt_source::after {
              bottom: 0; }
        .area_zeb .box_wrap .box_text {
          width: 100%;
          margin: 5vw auto 0;
          padding: 0; }
          .area_zeb .box_wrap .box_text p {
            letter-spacing: .05em;
            -webkit-font-feature-settings: "palt";
            font-feature-settings: "palt"; }
            .area_zeb .box_wrap .box_text p + p {
              margin: 7vw 0 0; }
            .area_zeb .box_wrap .box_text p span {
              letter-spacing: .01em; } }

/* ZEB化のメリット
/* ---------------------------------- */
.area_merit {
  margin: 96px auto 0;
  padding: 80px 0 100px;
  background: #f6f6f6; }
  @media screen and (max-width: 767px) {
    .area_merit {
      margin: 15.3vw auto 0;
      padding: 15.7vw 0 17vw; }
      .area_merit .txt {
        width: 90.67%; } }

.box_merit {
  margin: 34px auto 0;
  padding: 80px 0 74px;
  background: #fff; }
  .box_merit .img {
    width: 960px;
    margin: 0 auto; }
  @media screen and (max-width: 767px) {
    .box_merit {
      margin: 6vw auto 0;
      padding: 10.8vw 0 9.8vw; }
      .box_merit .img {
        width: 89.71%; } }

/* ZEBの定義
/* ---------------------------------- */
.area_definition {
  width: 1040px;
  margin: 80px auto 0; }
  .area_definition .img {
    width: 1040px;
    margin: 34px auto 0; }
    .area_definition .img p {
      margin: 14px 0 0; }
      .area_definition .img p a {
        padding-right: 1.1em; }
        .area_definition .img p a::after {
          top: -1px;
          right: 0; }
  .area_definition .box_energy {
    margin: 36px auto 0;
    border: 4px solid #f6f6f6;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
    .area_definition .box_energy dl {
      width: 510px;
      padding: 18px 30px 20px 26px;
      font-size: 15px; }
      .area_definition .box_energy dl + dl {
        position: relative; }
        .area_definition .box_energy dl + dl::before {
          content: '';
          display: block;
          width: 1px;
          height: 80px;
          background: #f6f6f6;
          position: absolute;
          top: 0;
          bottom: 0;
          left: -6px;
          margin: auto; }
      .area_definition .box_energy dl dt {
        padding-left: 1.3em;
        font-weight: bold;
        position: relative; }
        .area_definition .box_energy dl dt::before {
          content: '';
          display: block;
          width: 8px;
          height: 8px;
          background: #333;
          position: absolute;
          top: 10px;
          left: 0;
          border-radius: 100%; }
      .area_definition .box_energy dl dd {
        margin: 5px 0 0;
        letter-spacing: -.02em; }
  @media screen and (max-width: 767px) {
    .area_definition {
      width: 90.67%;
      margin: 16vw auto 0; }
      .area_definition .img {
        width: 100%;
        margin: 7vw auto 0; }
        .area_definition .img p {
          margin: 2vw 0 0; }
      .area_definition .box_energy {
        margin: 7vw auto 0;
        border: 3px solid #f6f6f6;
        display: block; }
        .area_definition .box_energy dl {
          width: 100%;
          padding: 2.8vw 4.6% 3vw; }
          .area_definition .box_energy dl + dl {
            margin: 2vw 0 0; }
            .area_definition .box_energy dl + dl::before {
              width: 90%;
              height: 1px;
              top: -1vw;
              bottom: auto;
              left: 0;
              right: 0; }
          .area_definition .box_energy dl dt, .area_definition .box_energy dl dd {
            font-size: 14px; }
          .area_definition .box_energy dl dt {
            padding-left: 1em; }
            .area_definition .box_energy dl dt::before {
              width: 7px;
              height: 7px;
              top: .65em; }
          .area_definition .box_energy dl dd {
            margin: 1vw 0 0;
            letter-spacing: -.02em; } }

/* 消費エネルギーの削減割合ごとのZEBランク
/* ---------------------------------- */
.area_rank,
.area_webpro {
  margin: 60px auto 0; }

.tit_putti {
  padding: 2px 15px;
  font-size: 18px;
  background: #c5d2d8; }
  .tit_putti span {
    font-weight: normal;
    font-size: 14px;
    vertical-align: bottom;
    position: relative;
    bottom: 2px; }

@media screen and (max-width: 767px) {
  .area_rank,
  .area_webpro {
    margin: 10.4vw auto 0; }
  .tit_putti {
    padding: 3vw 5% 2vw;
    font-size: 16px;
    line-height: 1.6; }
    .tit_putti span {
      display: block;
      font-size: 13px;
      bottom: 0;
      left: -.5em;
      padding-bottom: .8vw; } }

.area_rank ol {
  margin: 30px auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }

@media screen and (max-width: 767px) {
  .area_rank ol {
    width: 89.71%;
    margin: 5.5vw auto 0;
    display: block; }
    .area_rank ol li + li {
      margin-top: 2.7vw; } }

.box_webpro {
  margin: 28px auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }
  @media screen and (min-width: 768px) {
    .box_webpro ul:nth-child(2) {
      margin-left: 12px; }
    .box_webpro ul:nth-child(3) {
      margin-right: 8px; } }
  .box_webpro ul li {
    font-size: 15px; }
    .box_webpro ul li + li {
      margin: 16px 0 0; }
    .box_webpro ul li span {
      width: 26px;
      height: 26px;
      margin-right: .55em;
      display: inline-block;
      text-align: center;
      line-height: 28px;
      background: #dbe5ea;
      color: #333;
      font-weight: bold;
      position: relative;
      top: 1px;
      font-family: 'Roboto'; }
  @media screen and (max-width: 767px) {
    .box_webpro {
      margin: 5.3vw auto 0;
      display: block; }
      .box_webpro ul + ul, .box_webpro ul li + li {
        margin: 2vw 0 0; }
      .box_webpro ul li {
        font-size: 14px; }
        .box_webpro ul li span {
          width: 1.55em;
          height: 1.55em;
          margin-right: .75em;
          line-height: 1.6em; } }