@charset "UTF-8";
@import url("global.css");
.introduction {
  display: flex;
  column-gap: 50px;
  justify-content: space-between;
  margin-bottom: 110px; }
  .introduction .commitcatch {
    min-width: 330px; }
  .introduction .text {
    line-height: 2;
    max-width: 600px; }

.rule {
  background-color: #3E4443;
  padding-block: 60px;
  color: #fff; }
  .rule .wrapper {
    display: flex;
    justify-content: space-between; }
  .rule .main {
    width: 300px; }
    .rule .main .main_inner {
      position: sticky;
      top: 120px; }
    .rule .main .title {
      margin-bottom: 20px; }
      .rule .main .title span {
        display: block; }
      .rule .main .title .ja {
        font-size: 12px;
        margin-left: -6px; }
        .rule .main .title .ja::before, .rule .main .title .ja::after {
          display: inline-block; }
        .rule .main .title .ja::before {
          content: "［";
          padding-right: 5px; }
        .rule .main .title .ja::after {
          content: "］";
          padding-left: 5px; }
      .rule .main .title .en {
        font-family: "Marcellus", "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
        font-size: min(29px,5vw);
        letter-spacing: .08em; }
    .rule .main p:not([class]) {
      color: #aeaeae; }
    .rule .main figure {
      margin-top: 50px; }
  .rule ol {
    width: 66%;
    counter-reset: flownum 0; }
    .rule ol li {
      position: relative;
      padding-left: 80px;
      padding-bottom: 45px;
      counter-increment: flownum 1;
      /*&::after {
      	content: "";
      	width: 9px;
      	height: 50px;
      	background: url("../architect/img/arrow.png") no-repeat center bottom;
      	background-size: contain;
      	position: absolute;
      	top: 42px;
      	left: 13px;
      }*/ }
      .rule ol li:last-of-type {
        padding-bottom: 0; }
        .rule ol li:last-of-type::after {
          display: none; }
      .rule ol li::before {
        content: "0" counter(flownum);
        font-size: min(27px,6vw);
        font-family: "Marcellus", "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
        position: absolute;
        top: 3px;
        left: 0;
        line-height: 1; }
      .rule ol li .title {
        font-size: min(19px,2.4vw);
        font-weight: 500;
        margin-bottom: 5px; }
      .rule ol li .text {
        color: #aeaeae;
        font-size: .9em; }
        .rule ol li .text strong {
          font-weight: bold; }
        .rule ol li .text + .text {
          margin-top: 1em; }
      .rule ol li .text_list li {
        position: relative;
        padding: 0 0 3px 10px;
        line-height: 1.4; }
        .rule ol li .text_list li::before {
          content: "";
          width: 4px;
          height: 4px;
          border-radius: 50%;
          background: #aeaeae;
          position: absolute;
          left: 0;
          top: 7px; }

.designcode {
  position: relative;
  padding-top: 130px; }
  .designcode::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 400px;
    width: 30%;
    background-color: #E9E9E5;
    z-index: -1; }
  .designcode .headblock {
    display: flex;
    justify-content: space-between;
    column-gap: 60px;
    margin-bottom: 80px; }
    .designcode .headblock .title {
      margin-left: 10px;
      text-align: center;
      width: 410px;
      min-width: 300px;
      line-height: 1; }
      .designcode .headblock .title span {
        display: block; }
      .designcode .headblock .title .en {
        width: 126px;
        margin: 0 auto 5px; }
        .designcode .headblock .title .en img {
          width: 100%; }
      .designcode .headblock .title strong {
        display: block;
        margin-block: 12px; }
      .designcode .headblock .title .ja {
        font-size: 16px;
        font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
    .designcode .headblock .text {
      max-width: 600px; }
  .designcode ul.code {
    display: flex;
    margin-bottom: 100px;
    flex-wrap: wrap;
    row-gap: 80px;
    margin-inline: max(-22px,-2vw);
    counter-reset: codenum 0; }
    .designcode ul.code li {
      box-sizing: border-box;
      width: 33.3333333333%;
      padding-inline: min(22px,2vw);
      counter-increment: codenum 1; }
      .designcode ul.code li .image {
        margin-bottom: 20px;
        aspect-ratio: 5.3 / 3;
        height: auto; }
      .designcode ul.code li .title {
        font-size: min(19px,2.2vw);
        font-weight: 500;
        margin-bottom: 10px; }
        .designcode ul.code li .title::before {
          content: "Code 0" counter(codenum);
          display: block;
          color: #727E82;
          font-size: 12px;
          font-family: "Marcellus", "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
          font-weight: 400; }
      .designcode ul.code li p:not([class]) {
        font-size: .93em; }
      .designcode ul.code li .simulation {
        display: flex;
        gap: 20px; }
        .designcode ul.code li .simulation figure {
          position: relative;
          border: #dcdcdc 1px solid;
          background-color: #fff; }
          .designcode ul.code li .simulation figure figcaption {
            position: absolute;
            bottom: -30px;
            left: 0;
            color: #727E82;
            font-size: .8em; }
      .designcode ul.code li .sec_pointbox {
        background-color: #FFF;
        border-left: #8B835A solid 7px;
        padding: 40px 50px;
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; }
        .designcode ul.code li .sec_pointbox > dl {
          width: 100%; }
          .designcode ul.code li .sec_pointbox > dl dt {
            font-weight: 500;
            font-size: clamp(14px, 1.5vw, 18px); }
            .designcode ul.code li .sec_pointbox > dl dt strong {
              display: inline-block;
              font-weight: 900;
              line-height: 1.5;
              position: relative; }
              .designcode ul.code li .sec_pointbox > dl dt strong::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                height: 1px;
                background-color: #3E4443; }
          .designcode ul.code li .sec_pointbox > dl dd {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #F1F1EE;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: row-reverse;
            /*&:first-of-type, &:nth-of-type(3) {
            	figure {
            		img {
            			width: 150px;
            			margin: 0 auto;
            			display: block;
            		}
            	}
            }*/ }
            .designcode ul.code li .sec_pointbox > dl dd:first-of-type {
              border-top: none; }
            .designcode ul.code li .sec_pointbox > dl dd figure {
              width: 180px; }
            .designcode ul.code li .sec_pointbox > dl dd .inner {
              flex: 1;
              padding-left: 30px; }
              .designcode ul.code li .sec_pointbox > dl dd .inner h5 {
                margin-bottom: 5px;
                font-weight: 500;
                font-size: clamp(13px, 1.4vw, 17px); }
                .designcode ul.code li .sec_pointbox > dl dd .inner h5 span {
                  padding-right: 5px;
                  color: #8B835A;
                  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
                  font-size: clamp(14px, 1.5vw, 18px); }
        .designcode ul.code li .sec_pointbox .sub_block {
          display: flex;
          align-items: center;
          padding: 40px 0;
          margin: 80px 0 50px;
          border-top: 1px solid #dcdcdc;
          border-bottom: 1px solid #dcdcdc; }
          .designcode ul.code li .sec_pointbox .sub_block .text_area {
            flex: 1;
            padding-right: 40px; }
            .designcode ul.code li .sec_pointbox .sub_block .text_area .sub_block_catch {
              position: relative;
              padding-left: 20px;
              margin-bottom: 20px;
              font-size: clamp(14px, 2.2vw, 18px);
              font-weight: 500; }
              .designcode ul.code li .sec_pointbox .sub_block .text_area .sub_block_catch::before {
                content: "";
                width: 8px;
                height: 8px;
                background: #dcdcdc;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%); }
          .designcode ul.code li .sec_pointbox .sub_block figure {
            width: 45%; }
        .designcode ul.code li .sec_pointbox .movie {
          width: 80%;
          margin: 0 auto; }
          .designcode ul.code li .sec_pointbox .movie .iframe {
            width: 100%;
            height: 0;
            padding-top: 56.25%;
            position: relative;
            overflow: hidden;
            margin: 30px auto 0; }
            .designcode ul.code li .sec_pointbox .movie .iframe iframe {
              width: 100%;
              height: 100%;
              position: absolute;
              left: 0;
              top: 0; }
      .designcode ul.code li:last-of-type {
        width: 100%;
        display: grid;
        column-gap: min(70px,5vw);
        grid-template-rows: auto auto;
        grid-template-columns: 1fr 33%;
        grid-template-areas: "text image" "simulation image"; }
        .designcode ul.code li:last-of-type .image {
          grid-area: image;
          aspect-ratio: inherit;
          margin: 0;
          height: 100%; }
        .designcode ul.code li:last-of-type .text {
          grid-area: text;
          margin-bottom: 30px; }
        .designcode ul.code li:last-of-type .simulation {
          grid-area: simulation;
          width: 90%; }
        .designcode ul.code li:last-of-type .sec_pointbox {
          width: 100%;
          grid-column: 1 / -1;
          margin-top: 60px; }

.energy-zoo .sec_title {
  display: flex;
  align-items: flex-end;
  margin-bottom: 55px;
  line-height: 1; }
  .energy-zoo .sec_title::after {
    content: "";
    height: 1px;
    display: block;
    background-color: #727E82;
    flex-grow: 1;
    margin-left: 30px;
    margin-bottom: 12px; }
  .energy-zoo .sec_title span {
    display: block; }
  .energy-zoo .sec_title .en {
    font-family: "Marcellus", "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: clamp(23px, 4.5vw, 36px);
    margin-right: 10px;
    letter-spacing: .05em; }
  .energy-zoo .sec_title .ja {
    font-size: 14px;
    margin-bottom: 5px; }
    .energy-zoo .sec_title .ja::before, .energy-zoo .sec_title .ja::after {
      display: inline-block; }
    .energy-zoo .sec_title .ja::before {
      content: "［";
      padding-right: 8px; }
    .energy-zoo .sec_title .ja::after {
      content: "］";
      padding-left: 8px; }
.energy-zoo .wrap {
  display: flex; }
  .energy-zoo .wrap .imgarea {
    order: 2;
    flex-shrink: 0;
    margin-left: 5%;
    width: 26%; }
    .energy-zoo .wrap .imgarea a {
      display: block;
      position: relative;
      border: #dcdcdc 1px solid;
      background-color: #fff;
      padding: 20px; }
      @media (any-hover: hover) {
        .energy-zoo .wrap .imgarea a:hover .img {
          opacity: .85; }
        .energy-zoo .wrap .imgarea a:hover .linkbtn {
          background-color: #727E82;
          color: #fff; } }
      .energy-zoo .wrap .imgarea a .img {
        transition: all 0.3s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
        -webkit-transition: all 0.3s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden; }
        .energy-zoo .wrap .imgarea a .img span {
          display: block; }
          .energy-zoo .wrap .imgarea a .img span + span {
            margin-top: 15px; }
      .energy-zoo .wrap .imgarea a .linkbtn {
        background-color: #dcdcdc;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 12px;
        padding: 5px;
        font-size: .8em;
        font-weight: 500;
        border-radius: 1px;
        transition: all 0.3s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
        -webkit-transition: all 0.3s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden; }
        .energy-zoo .wrap .imgarea a .linkbtn i {
          margin-left: .3em; }
    .energy-zoo .wrap .imgarea figcaption {
      color: #727E82;
      font-size: .8em;
      margin-top: 10px; }
  .energy-zoo .wrap .textarea .catch {
    margin-bottom: 20px;
    line-height: 2; }
    .energy-zoo .wrap .textarea .catch .sub {
      display: block;
      font-size: min(14px, 3vw);
      font-weight: 500; }
    .energy-zoo .wrap .textarea .catch .main {
      display: block;
      font-size: min(20px, 4vw);
      font-weight: 500; }
  .energy-zoo .wrap .textarea .text p + p {
    margin-top: 15px; }

.odl {
  background-color: #3E4443;
  color: #fff;
  padding: min(80px,7vw);
  display: flex;
  gap: min(70px,7vw);
  margin-top: 100px; }
  .odl .text {
    padding-block: 10px;
    width: 50%;
    box-sizing: border-box; }
    .odl .text .title {
      font-size: 1.13em;
      font-weight: 500;
      margin-bottom: 25px;
      word-break: keep-all; }
    .odl .text p:not([class]) {
      font-size: .93em; }
    .odl .text .link {
      margin-top: 25px; }
      .odl .text .link a {
        font-size: .8em;
        font-weight: 500;
        max-width: 330px;
        padding: 10px 8px 12px 3px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-image: linear-gradient(#fff, #fff);
        background-repeat: no-repeat;
        background-position: bottom left;
        background-size: 100% 1px;
        transition: background-size 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9); }
        .odl .text .link a::after {
          content: "\f35d";
          font-family: 'Font Awesome 6 free','Font Awesome 6 Brands';
          font-weight: 900;
          display: inline-block;
          margin-left: 10px;
          vertical-align: 1px; }
        @media (any-hover: hover) {
          .odl .text .link a:hover {
            background-position: bottom right;
            background-size: 0 1px; } }
  .odl .gallery {
    width: 46%; }
    .odl .gallery figure {
      aspect-ratio: 3 / 2; }

/* Dots */
.slick-dots {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center; }
  .slick-dots li {
    position: relative;
    width: 10px;
    height: 20px;
    margin-inline: 5px;
    cursor: pointer; }
    .slick-dots li button {
      font-size: 0;
      line-height: 0;
      display: block;
      width: 16px;
      height: 20px;
      padding: 5px;
      cursor: pointer;
      color: transparent;
      border: 0;
      outline: none;
      background: transparent; }
      .slick-dots li button:hover, .slick-dots li button:focus {
        outline: none; }
      .slick-dots li button:hover:before, .slick-dots li button:focus:before {
        background-color: #8B835A; }
      .slick-dots li button:before {
        content: "";
        position: absolute;
        top: 4px;
        left: 4px;
        width: 8px;
        height: 8px;
        text-align: center;
        color: black;
        border-radius: 100%;
        background-color: #dcdcdc; }
    .slick-dots li.slick-active button:before {
      background-color: #8B835A; }

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 ( 1300px )
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  .introduction {
    display: block;
    margin-bottom: 70px; }
    .introduction .commitcatch {
      margin-bottom: 20px; }
    .introduction .text {
      max-width: none;
      line-height: inherit; }

  .rule .main figure {
    width: 85%; }
  .rule ol li {
    padding-left: 55px;
    padding-bottom: 30px; }

  .designcode {
    padding-top: 80px; }
    .designcode::before {
      height: 400px;
      width: 45%; }
    .designcode .headblock {
      display: block;
      margin-bottom: 60px; }
      .designcode .headblock .title {
        margin: 0 auto 40px;
        width: 300px;
        min-width: inherit; }
        .designcode .headblock .title strong {
          margin-block: 12px; }
        .designcode .headblock .title .ja {
          font-size: 14px; }
      .designcode .headblock .text {
        max-width: none; }
    .designcode ul.code {
      margin-bottom: 80px;
      row-gap: 50px; }
      .designcode ul.code li .image {
        margin-bottom: 12px;
        aspect-ratio: 5 / 3; }
      .designcode ul.code li p:not([class]) {
        letter-spacing: 0; }
      .designcode ul.code li .simulation {
        gap: 2vw; }
        .designcode ul.code li .simulation figure figcaption {
          bottom: -22px;
          font-size: .7em;
          letter-spacing: 0; }
      .designcode ul.code li .sec_pointbox {
        padding: 30px; }
        .designcode ul.code li .sec_pointbox > dl dd {
          /*&:first-of-type, &:nth-of-type(3) {
          	figure {
          		img {
          			width: 100px;
          		}
          	}
          }*/ }
          .designcode ul.code li .sec_pointbox > dl dd figure {
            width: 120px; }
          .designcode ul.code li .sec_pointbox > dl dd .inner {
            padding-left: 20px; }
        .designcode ul.code li .sec_pointbox .sub_block {
          display: block;
          margin: 60px 0 40px; }
          .designcode ul.code li .sec_pointbox .sub_block .text_area {
            padding-right: 0;
            margin-bottom: 20px; }
          .designcode ul.code li .sec_pointbox .sub_block figure {
            width: 80%;
            margin: 0 auto; }
        .designcode ul.code li .sec_pointbox .movie {
          width: 100%; }

  .odl {
    padding: 60px min(100px,7vw);
    display: block;
    margin-top: 80px; }
    .odl .text {
      padding-block: 0;
      margin-bottom: 40px;
      width: auto; }
      .odl .text .link {
        margin-top: 20px; }
        .odl .text .link a {
          max-width: 300px; }
    .odl .gallery {
      width: auto; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  .introduction {
    margin-bottom: 60px; }
    .introduction .commitcatch {
      min-width: inherit; }

  .rule {
    padding-block: 60px; }
    .rule .wrapper {
      display: block; }
    .rule .main {
      width: auto;
      text-align: center;
      margin-bottom: 40px; }
      .rule .main .main_inner {
        position: relative;
        top: auto; }
      .rule .main .title .ja {
        margin-left: 0; }
      .rule .main p:not([class]) {
        display: inline-block;
        text-align: left; }
      .rule .main figure {
        width: 100%;
        margin-top: 30px;
        height: 0;
        padding-top: 52%;
        position: relative;
        overflow: hidden; }
        .rule .main figure img {
          width: 100%;
          position: absolute;
          left: 0;
          top: 0; }
    .rule ol {
      width: auto; }
      .rule ol li {
        padding-left: 50px;
        padding-bottom: 25px; }
        .rule ol li::before {
          font-size: 24px;
          top: 2px; }
        .rule ol li::after {
          left: 12px; }
        .rule ol li .title {
          font-size: min(19px,4.5vw); }

  .designcode {
    padding-top: 80px; }
    .designcode::before {
      height: 380px;
      width: 45%; }
    .designcode .headblock {
      margin-bottom: 50px; }
      .designcode .headblock .title {
        margin: 0 auto 35px;
        width: 280px; }
        .designcode .headblock .title .en {
          width: 110px; }
        .designcode .headblock .title .ja {
          font-size: 13px; }
    .designcode ul.code {
      margin-bottom: 60px;
      row-gap: 30px;
      margin-inline: -2.5vw; }
      .designcode ul.code li {
        width: 50%;
        padding-inline: 2.5vw; }
        .designcode ul.code li .image {
          margin-bottom: 10px; }
        .designcode ul.code li .title {
          font-size: min(16px,3.7vw);
          margin-bottom: 8px; }
          .designcode ul.code li .title::before {
            line-height: 1.5; }
        .designcode ul.code li p:not([class]) {
          font-size: .9em;
          line-height: 1.6; }
        .designcode ul.code li .simulation {
          gap: 3vw; }
          .designcode ul.code li .simulation figure figcaption {
            font-size: .8em; }
        .designcode ul.code li .sec_pointbox .sub_block {
          padding: 30px 0;
          margin: 40px 0 30px; }
          .designcode ul.code li .sec_pointbox .sub_block .text_area .sub_block_catch {
            margin-bottom: 10px; }
          .designcode ul.code li .sec_pointbox .sub_block figure {
            width: 100%; }
        .designcode ul.code li:last-of-type {
          row-gap: 25px;
          grid-template-columns: 1fr 40%;
          grid-template-areas: "text image" "simulation simulation"; }
          .designcode ul.code li:last-of-type .text {
            margin-bottom: 0; }
          .designcode ul.code li:last-of-type .simulation {
            width: auto; }
          .designcode ul.code li:last-of-type .sec_pointbox {
            margin-top: 25px;
            border-left-width: 4px;
            padding: 25px;
            display: block; }
            .designcode ul.code li:last-of-type .sec_pointbox > dl dd {
              display: block;
              /*&:first-of-type, &:nth-of-type(3) {
              	figure {
              		img {
              			width: 150px;
              		}
              	}
              }*/ }
              .designcode ul.code li:last-of-type .sec_pointbox > dl dd:first-of-type {
                padding-top: 0;
                margin-top: 20px; }
              .designcode ul.code li:last-of-type .sec_pointbox > dl dd figure {
                width: 180px;
                margin: 0 auto; }
              .designcode ul.code li:last-of-type .sec_pointbox > dl dd .inner {
                padding-left: 0;
                margin-bottom: 10px; }

  .energy-zoo .sec_title {
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 25px;
    line-height: 1.6; }
    .energy-zoo .sec_title::after {
      margin-left: 10px;
      margin-bottom: 0; }
    .energy-zoo .sec_title .en {
      width: 100%;
      margin-right: 0; }
    .energy-zoo .sec_title .ja {
      margin: 0 0 0 -7px; }
  .energy-zoo .wrap {
    display: block; }
    .energy-zoo .wrap .imgarea {
      width: auto;
      margin: 0 0 30px; }
      .energy-zoo .wrap .imgarea a {
        padding: 15px; }
        .energy-zoo .wrap .imgarea a .img {
          display: flex; }
          .energy-zoo .wrap .imgarea a .img span + span {
            margin: 0 0 0 8px; }
    .energy-zoo .wrap .textarea .catch .main {
      line-height: 1.5;
      margin-top: 5px; }

  .odl {
    padding: min(100px,7vw);
    margin-top: 50px; }
    .odl .text {
      margin-bottom: 50px; }
      .odl .text .link a {
        font-size: .8em;
        font-weight: 500;
        max-width: 280px;
        padding: 10px 5px 12px 3px; } }