/*! Writen  by SCSS */
/* common */
.main_wrap {
  background-image: url("../images/spec/main.jpg"); }
  @media screen and (max-width: 480px) {
    .main_wrap {
      background-image: url("../images/spec/main_sp.jpg"); } }

/* common */
.iframe_wrap {
  max-width: 1000px;
  margin: 0 auto;
  position: relative; }
  .iframe_wrap:before {
    content: "";
    display: block;
    padding-bottom: 56.25%; }
  .iframe_wrap iframe {
    position: absolute;
    left: 0;
    top: 0px;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%; }

.sec01 {
  padding: 90px 0 110px;
  position: relative; }
  @media screen and (max-width: 768px) {
    .sec01 {
      padding: 60px 0 70px; } }
  .sec01 .frame_wrap {
    font-feature-settings: "palt";
    justify-content: space-between;
    padding: 30px; }
    @media screen and (max-width: 768px) {
      .sec01 .frame_wrap {
        padding: 20px; } }
    @media screen and (max-width: 480px) {
      .sec01 .frame_wrap {
        width: 100%;
        margin: 0 auto; } }
    .sec01 .frame_wrap .read_xl {
      width: 100%;
      line-height: 1.4;
      font-weight: bold;
      padding-bottom: 10px;
      margin-bottom: 20px;
      border-bottom: 1px solid #382e2b; }
    @media screen and (max-width: 480px) {
      .sec01 .frame_wrap .detail {
        flex-wrap: wrap; } }
    .sec01 .frame_wrap .detail.center {
      align-items: center; }
    .sec01 .frame_wrap .detail .text {
      font-size: 20px;
      font-weight: 600;
      line-height: 1.4; }
      @media screen and (max-width: 1200px) {
        .sec01 .frame_wrap .detail .text {
          font-size: 1.8vw; } }
      @media screen and (max-width: 768px) {
        .sec01 .frame_wrap .detail .text {
          font-size: 1.6vw; } }
      @media screen and (max-width: 480px) {
        .sec01 .frame_wrap .detail .text {
          width: 100%;
          text-align: center;
          font-size: 16px;
          margin-bottom: 20px; } }
      .sec01 .frame_wrap .detail .text .big {
        display: inline-block;
        font-size: 150%; }
    .sec01 .frame_wrap .detail .image {
      margin: 0 10px; }
      @media screen and (max-width: 480px) {
        .sec01 .frame_wrap .detail .image {
          width: 100%;
          margin-bottom: 20px; } }
    .sec01 .frame_wrap .detail .red_txt {
      font-size: 17px;
      color: #923336;
      font-weight: 600; }
      @media screen and (max-width: 1200px) {
        .sec01 .frame_wrap .detail .red_txt {
          font-size: 15px; } }
      @media screen and (max-width: 768px) {
        .sec01 .frame_wrap .detail .red_txt {
          font-size: 13px; } }
      @media screen and (max-width: 480px) {
        .sec01 .frame_wrap .detail .red_txt {
          font-size: 15px;
          width: 100%;
          line-height: 1.4;
          text-align: center; } }
    .sec01 .frame_wrap .detail .standard {
      width: 72.23%;
      align-items: flex-end; }
      @media screen and (max-width: 480px) {
        .sec01 .frame_wrap .detail .standard {
          width: 100%;
          flex-wrap: wrap;
          align-items: flex-start; } }
      .sec01 .frame_wrap .detail .standard .txt {
        width: 17%;
        line-height: 1.2;
        font-size: 11px; }
        @media screen and (max-width: 768px) {
          .sec01 .frame_wrap .detail .standard .txt {
            font-size: 10px; } }
        @media screen and (max-width: 480px) {
          .sec01 .frame_wrap .detail .standard .txt.left {
            order: 3;
            width: 41%; } }
        .sec01 .frame_wrap .detail .standard .txt.right {
          text-align: right; }
          @media screen and (max-width: 480px) {
            .sec01 .frame_wrap .detail .standard .txt.right {
              order: 2;
              width: 41%;
              text-align: left; } }
      .sec01 .frame_wrap .detail .standard .sta_img {
        width: 63.54%; }
        @media screen and (max-width: 480px) {
          .sec01 .frame_wrap .detail .standard .sta_img {
            width: 100%;
            order: 1;
            margin-bottom: 10px; } }
    .sec01 .frame_wrap .detail .sdgs {
      width: 66.67%;
      align-items: flex-end; }
      @media screen and (max-width: 480px) {
        .sec01 .frame_wrap .detail .sdgs {
          width: 100%;
          flex-wrap: wrap; } }
      .sec01 .frame_wrap .detail .sdgs .sdgs_img01 {
        width: 24.17%; }
        @media screen and (max-width: 480px) {
          .sec01 .frame_wrap .detail .sdgs .sdgs_img01 {
            width: 100%;
            text-align: center;
            margin-bottom: 15px; } }
      .sec01 .frame_wrap .detail .sdgs .sdgs_img02 {
        width: 70.17%; }
        @media screen and (max-width: 480px) {
          .sec01 .frame_wrap .detail .sdgs .sdgs_img02 {
            width: 100%; } }
    .sec01 .frame_wrap .detail .security {
      width: 52.18%; }
      @media screen and (max-width: 480px) {
        .sec01 .frame_wrap .detail .security {
          width: 100%; } }
      .sec01 .frame_wrap .detail .security li {
        width: 32%;
        text-align: center; }
        .sec01 .frame_wrap .detail .security li .name {
          text-align: center;
          font-size: 12px;
          line-height: 1.4;
          letter-spacing: normal; }
          @media screen and (max-width: 768px) {
            .sec01 .frame_wrap .detail .security li .name {
              font-size: 11px; } }
          .sec01 .frame_wrap .detail .security li .name .small {
            display: block;
            font-size: 10px; }
  .sec01 .caparea {
    margin: 40px auto 0; }

.sec02 {
  background: #f0e3d8;
  padding: 80px 0; }
  @media screen and (max-width: 768px) {
    .sec02 {
      padding: 60px 0; } }
  .sec02 .white_box {
    background: #fff;
    font-feature-settings: "palt";
    letter-spacing: normal;
    padding: 20px;
    justify-content: flex-start;
    align-items: center; }
    @media screen and (max-width: 480px) {
      .sec02 .white_box {
        flex-wrap: wrap; } }
    .sec02 .white_box .left {
      width: 33.696%; }
      @media screen and (max-width: 480px) {
        .sec02 .white_box .left {
          width: 100%;
          margin-bottom: 10px; } }
    .sec02 .white_box .right {
      width: 45.66%;
      margin-left: 4.34%; }
      @media screen and (max-width: 980px) {
        .sec02 .white_box .right {
          width: 60%; } }
      @media screen and (max-width: 480px) {
        .sec02 .white_box .right {
          width: 100%;
          margin-left: 0; } }
      .sec02 .white_box .right .title {
        font-size: 24px;
        color: #382e2b;
        font-weight: 600;
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #382e2b; }
        @media screen and (max-width: 768px) {
          .sec02 .white_box .right .title {
            font-size: 18px; } }
        @media screen and (max-width: 480px) {
          .sec02 .white_box .right .title {
            font-size: 17px; } }
      .sec02 .white_box .right .text {
        font-size: 15px; }
        @media screen and (max-width: 768px) {
          .sec02 .white_box .right .text {
            font-size: 14px; } }

.sec03 {
  padding: 80px 0; }
  @media screen and (max-width: 768px) {
    .sec03 {
      padding: 60px 0; } }
  .sec03 .gensler {
    border-top: 1px solid #382e2b;
    border-bottom: 1px solid #382e2b;
    padding: 25px 20px;
    align-items: center;
    font-weight: 600;
    margin-bottom: 50px; }
    @media screen and (max-width: 480px) {
      .sec03 .gensler {
        flex-wrap: wrap;
        padding: 20px 0px; } }
    .sec03 .gensler .g_l {
      width: 26%;
      letter-spacing: normal; }
      @media screen and (max-width: 480px) {
        .sec03 .gensler .g_l {
          width: 100%;
          margin-bottom: 20px;
          text-align: center; } }
      .sec03 .gensler .g_l .g01 {
        font-size: 18px; }
        @media screen and (max-width: 980px) {
          .sec03 .gensler .g_l .g01 {
            font-size: 16px; } }
        @media screen and (max-width: 480px) {
          .sec03 .gensler .g_l .g01 {
            font-size: 17px; } }
      .sec03 .gensler .g_l .g02 {
        font-size: 14px; }
        @media screen and (max-width: 980px) {
          .sec03 .gensler .g_l .g02 {
            font-size: 12px; } }
        @media screen and (max-width: 768px) {
          .sec03 .gensler .g_l .g02 {
            font-size: 11px; } }
        @media screen and (max-width: 480px) {
          .sec03 .gensler .g_l .g02 {
            font-size: 13px; } }
    .sec03 .gensler .g_r {
      width: 70%;
      font-size: 17px; }
      @media screen and (max-width: 980px) {
        .sec03 .gensler .g_r {
          font-size: 14px; } }
      @media screen and (max-width: 480px) {
        .sec03 .gensler .g_r {
          width: 100%; } }

/*# sourceMappingURL=spec.css.map */