/*! Writen  by SCSS */
@media screen and (max-width: 480px) {
  .w10_sp {
    width: 10%;
    margin: 0 auto; } }

@media screen and (max-width: 480px) {
  .w20_sp {
    width: 20%;
    margin: 0 auto; } }

@media screen and (max-width: 480px) {
  .w30_sp {
    width: 30%;
    margin: 0 auto; } }

@media screen and (max-width: 480px) {
  .w40_sp {
    width: 40%;
    margin: 0 auto; } }

@media screen and (max-width: 480px) {
  .w50_sp {
    width: 50%;
    margin: 0 auto; } }

@media screen and (max-width: 480px) {
  .w60_sp {
    width: 60%;
    margin: 0 auto; } }

@media screen and (max-width: 480px) {
  .w70_sp {
    width: 70%;
    margin: 0 auto; } }

@media screen and (max-width: 480px) {
  .w80_sp {
    width: 80%;
    margin: 0 auto; } }

@media screen and (max-width: 480px) {
  .w90_sp {
    width: 90%;
    margin: 0 auto; } }

@media screen and (max-width: 480px) {
  .w100_sp {
    width: 100%;
    margin: 0 auto; } }

.fr10 {
  font-size: 10%; }

.fr20 {
  font-size: 20%; }

.fr30 {
  font-size: 30%; }

.fr40 {
  font-size: 40%; }

.fr50 {
  font-size: 50%; }

.fr60 {
  font-size: 60%; }

.fr70 {
  font-size: 70%; }

.fr80 {
  font-size: 80%; }

.fr90 {
  font-size: 90%; }

.fr100 {
  font-size: 100%; }

.fr110 {
  font-size: 110%; }

.fr120 {
  font-size: 120%; }

.fr130 {
  font-size: 130%; }

.fr140 {
  font-size: 140%; }

.fr150 {
  font-size: 150%; }

.fr160 {
  font-size: 160%; }

.fr170 {
  font-size: 170%; }

.fr180 {
  font-size: 180%; }

.fr190 {
  font-size: 190%; }

.fr200 {
  font-size: 200%; }

.fr210 {
  font-size: 210%; }

.fr220 {
  font-size: 220%; }

.fr230 {
  font-size: 230%; }

.fr240 {
  font-size: 240%; }

.fr250 {
  font-size: 250%; }

.fr260 {
  font-size: 260%; }

.fr270 {
  font-size: 270%; }

.fr280 {
  font-size: 280%; }

.fr290 {
  font-size: 290%; }

.fr300 {
  font-size: 300%; }

.sec01 {
  padding-top: clamp(40px, 7.82%, 80px);
  padding-bottom: clamp(90px, 16.61%, 170px); }
  @media screen and (max-width: 768px) {
    .sec01 {
      padding-bottom: clamp(60px, 11.72%, 120px); } }

.sec02, .sec04 {
  padding-top: clamp(60px, 11.72%, 120px);
  padding-bottom: clamp(60px, 11.72%, 120px);
  border-top: 1px solid #ff9600;
  border-bottom: 1px solid #ff9600;
  background: rgba(255, 249, 240, 0.8); }
  .sec02 .sec_head,
  .sec02 .item_head,
  .sec02 .item_head02, .sec04 .sec_head,
  .sec04 .item_head,
  .sec04 .item_head02 {
    color: #ff9600; }
  .sec02 .border_head, .sec04 .border_head {
    color: #ff9600;
    border-bottom: 1px solid #ff9600; }
  .sec02 .sec02_wrap:not(:last-child), .sec04 .sec02_wrap:not(:last-child) {
    margin-bottom: clamp(40px, 7.82%, 80px); }

.sec03, .sec05 {
  padding-top: clamp(60px, 11.72%, 120px);
  padding-bottom: clamp(60px, 11.72%, 120px);
  border-top: 1px solid #6eb5b8;
  border-bottom: 1px solid #6eb5b8; }

.text_box .item_head {
  margin-bottom: 0.8em; }
  @media screen and (max-width: 480px) {
    .text_box .item_head {
      margin-bottom: 0.6em; } }

.img_cap .cap.cap_name {
  right: auto;
  bottom: auto;
  left: 5px;
  top: 5px;
  font-size: 14px; }
  @media screen and (max-width: 768px) {
    .img_cap .cap.cap_name {
      font-size: 12px; } }
  @media screen and (max-width: 480px) {
    .img_cap .cap.cap_name {
      font-size: 10px; } }
  .img_cap .cap.cap_name.ex01 {
    left: 5%;
    top: 10%; }
    @media screen and (max-width: 768px) {
      .img_cap .cap.cap_name.ex01 {
        top: 10px; } }
  .img_cap .cap.cap_name.ex02 {
    top: 10%;
    left: 40%; }
    @media screen and (max-width: 768px) {
      .img_cap .cap.cap_name.ex02 {
        top: 10px; } }
.img_cap .cap.pos01 {
  right: 20%;
  bottom: 10%; }
.img_cap .cap.pos02 {
  right: auto;
  left: 30%;
  bottom: 10%; }
.img_cap .cap.pos03 {
  right: 10%;
  left: 20%;
  bottom: 10%; }

.col2 {
  flex-wrap: wrap;
  row-gap: 80px; }
  @media screen and (max-width: 768px) {
    .col2 {
      row-gap: 60px; } }
  @media screen and (max-width: 480px) {
    .col2 {
      row-gap: 40px; } }
  .col2 li {
    max-width: 480px;
    width: 46.88%; }
    .col2 li.full {
      width: 100%;
      max-width: 100%; }
    .col2 li.double {
      max-width: 660px;
      width: 64.46%; }
    .col2 li.quarter {
      max-width: 234px;
      width: 22.86%; }
    .col2 li.one_third {
      max-width: 310px;
      width: 30.28%; }
      @media screen and (max-width: 480px) {
        .col2 li.one_third {
          width: 100%;
          max-width: 100%; } }
    .col2 li.item {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 20px; }
    .col2 li .col_cont {
      display: flex;
      flex-direction: column;
      row-gap: 25px; }
      @media screen and (max-width: 480px) {
        .col2 li .col_cont {
          row-gap: 20px; } }

@media screen and (max-width: 480px) {
  .sec01 .sec01_col li {
    width: 100%; } }
@media screen and (max-width: 480px) {
  .sec01 .sec01_col li.one_third .image {
    width: fit-content;
    margin: 0 auto; } }
.sec01 .sec01_col li .item_head {
  letter-spacing: normal; }
  @media screen and (max-width: 768px) {
    .sec01 .sec01_col li .item_head {
      letter-spacing: -0.05em; } }
  .sec01 .sec01_col li .item_head .num {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 30px;
    margin-right: 5px;
    font-size: clamp(14px, 1.563vw, 16px);
    color: #fff;
    text-align: center;
    background: #6eb5b8; }
.sec01 .sec01_col li .diagram .cap {
  right: auto;
  left: 3%;
  bottom: 36%;
  right: auto; }
  @media screen and (max-width: 480px) {
    .sec01 .sec01_col li .diagram .cap {
      right: 0;
      bottom: 0;
      left: auto; } }
.sec01 .sec01_col li .sys01 {
  position: relative;
  background: #fff;
  padding: 30px 20px; }
  @media screen and (max-width: 480px) {
    .sec01 .sec01_col li .sys01 {
      padding: 20px 15px; } }
  .sec01 .sec01_col li .sys01:before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid #6eb5b8;
    pointer-events: none;
    z-index: 2; }
  .sec01 .sec01_col li .sys01 .sys_in {
    max-width: 950px;
    margin: 0 auto; }
  .sec01 .sec01_col li .sys01 .sys_l {
    float: left;
    margin-left: 1%;
    max-width: 310px;
    width: 32.64%; }
    @media screen and (max-width: 768px) {
      .sec01 .sec01_col li .sys01 .sys_l {
        margin-left: 0;
        width: 35%; } }
    @media screen and (max-width: 480px) {
      .sec01 .sec01_col li .sys01 .sys_l {
        float: none;
        width: 100%; } }
    .sec01 .sec01_col li .sys01 .sys_l.first {
      margin-bottom: 30px; }
      @media screen and (max-width: 480px) {
        .sec01 .sec01_col li .sys01 .sys_l.first {
          margin-bottom: 20px; } }
  .sec01 .sec01_col li .sys01 .sys_r {
    float: right;
    max-width: 580px;
    width: 61.06%; }
    @media screen and (max-width: 480px) {
      .sec01 .sec01_col li .sys01 .sys_r {
        float: none;
        width: 100%;
        margin-bottom: 20px; } }
    .sec01 .sec01_col li .sys01 .sys_r .image_box {
      background: #f7efe4; }
      .sec01 .sec01_col li .sys01 .sys_r .image_box figure {
        padding: 20px 10px; }
.sec01 .sec01_col li .sys02 .sys02_l {
  float: left;
  max-width: 480px;
  width: 46.88%; }
  @media screen and (max-width: 480px) {
    .sec01 .sec01_col li .sys02 .sys02_l {
      float: none;
      width: 100%; } }
  .sec01 .sec01_col li .sys02 .sys02_l .sys02_in:not(:first-child) {
    margin-top: 30px; }
    @media screen and (max-width: 768px) {
      .sec01 .sec01_col li .sys02 .sys02_l .sys02_in:not(:first-child) {
        margin-top: 20px; } }
  @media screen and (max-width: 480px) {
    .sec01 .sec01_col li .sys02 .sys02_l .sys02_in .item_head .small {
      font-size: 80%; } }
  .sec01 .sec01_col li .sys02 .sys02_l .sys02_in.sys_flex .text {
    max-width: 320px;
    width: 66.67%; }
  .sec01 .sec01_col li .sys02 .sys02_l .sys02_in.sys_flex .image {
    max-width: 140px;
    width: 29.17%; }
.sec01 .sec01_col li .sys02 .thumb_turn {
  font-size: clamp(12px, 1.563vw, 16px);
  border: 1px solid #6eb5b8;
  color: #6eb5b8;
  padding: 8px;
  line-height: 1; }
  @media screen and (max-width: 768px) {
    .sec01 .sec01_col li .sys02 .thumb_turn {
      font-size: 14px; } }
.sec01 .sec01_col li .sys02 .sys02_r {
  float: right;
  max-width: 480px;
  width: 46.88%;
  background: #FFF;
  padding: 100px 10px 60px; }
  @media screen and (max-width: 768px) {
    .sec01 .sec01_col li .sys02 .sys02_r {
      padding: 110px 10px; } }
  @media screen and (max-width: 480px) {
    .sec01 .sec01_col li .sys02 .sys02_r {
      float: none;
      width: 100%;
      padding: 15px;
      margin-bottom: 20px; } }
  .sec01 .sec01_col li .sys02 .sys02_r .image {
    max-width: 443px;
    margin: 0 auto; }
  .sec01 .sec01_col li .sys02 .sys02_r .cap_r {
    max-width: 320px;
    margin: 0 auto;
    color: #333; }
.sec01 .sec01_col li .sys03 {
  margin-top: 60px; }
  @media screen and (max-width: 768px) {
    .sec01 .sec01_col li .sys03 {
      margin-top: 40px; } }
  @media screen and (max-width: 480px) {
    .sec01 .sec01_col li .sys03 {
      flex-direction: column;
      row-gap: 30px; } }
  .sec01 .sec01_col li .sys03 .sys03_in {
    max-width: 480px;
    width: 46.88%; }
    @media screen and (max-width: 480px) {
      .sec01 .sec01_col li .sys03 .sys03_in {
        width: 100%; } }
    @media screen and (max-width: 480px) {
      .sec01 .sec01_col li .sys03 .sys03_in .item_head .small {
        font-size: 80%; } }
@media screen and (max-width: 480px) {
  .sec01 .sec01_col li .sys04 {
    flex-wrap: wrap;
    row-gap: 15px; } }
.sec01 .sec01_col li .sys04 .image {
  max-width: 320px;
  width: 31.25%; }
  @media screen and (max-width: 480px) {
    .sec01 .sec01_col li .sys04 .image {
      width: 48%; } }
  .sec01 .sec01_col li .sys04 .image .cap_top {
    right: auto;
    bottom: auto;
    left: 2px;
    top: 2px;
    font-size: 14px; }
    @media screen and (max-width: 480px) {
      .sec01 .sec01_col li .sys04 .image .cap_top {
        left: 0px;
        top: 0px;
        font-size: 10px;
        padding: 0; } }

@media screen and (max-width: 480px) {
  .sec02 .sec02_col li {
    width: 100%; } }
@media screen and (max-width: 768px) {
  .sec02 .sec02_col li .item_head {
    letter-spacing: normal; } }
.sec02 .sec02_col li .item_head .small {
  font-size: 60%; }
.sec02 .sec02_col li .handrail {
  align-items: center; }
  @media screen and (max-width: 480px) {
    .sec02 .sec02_col li .handrail {
      flex-direction: column;
      row-gap: 15px;
      max-width: 305px;
      margin: 0 auto; } }
  .sec02 .sec02_col li .handrail .image {
    max-width: 305px;
    width: 46.22%; }
    @media screen and (max-width: 480px) {
      .sec02 .sec02_col li .handrail .image {
        width: 100%; } }
  .sec02 .sec02_col li .handrail .arrow {
    max-width: 43px;
    width: 6.52%;
    margin-top: 40px; }
    @media screen and (max-width: 480px) {
      .sec02 .sec02_col li .handrail .arrow {
        width: fit-content;
        margin: 0 auto;
        transform: rotate(90deg); } }

@media screen and (max-width: 480px) {
  .sec03 .sec03_col li {
    width: 100%; } }
.sec03 .sec03_col li .wall_box {
  background: #FFF;
  padding: 20px;
  text-align: center;
  position: relative; }
  @media screen and (max-width: 480px) {
    .sec03 .sec03_col li .wall_box {
      padding: 15px 10px; } }
  .sec03 .sec03_col li .wall_box .cap {
    right: 13%;
    bottom: 35%; }
    @media screen and (max-width: 768px) {
      .sec03 .sec03_col li .wall_box .cap {
        right: 5%;
        bottom: 35%; } }
    @media screen and (max-width: 480px) {
      .sec03 .sec03_col li .wall_box .cap {
        right: 0;
        bottom: 0; } }
  .sec03 .sec03_col li .wall_box .wall_txt {
    position: absolute;
    right: 20px;
    bottom: 12%;
    width: 48.92578125%; }
    @media screen and (max-width: 480px) {
      .sec03 .sec03_col li .wall_box .wall_txt {
        position: static;
        width: 100%;
        margin-top: 15px; } }
@media screen and (max-width: 480px) {
  .sec03 .sec03_col li .method01,
  .sec03 .sec03_col li .method02 {
    flex-direction: column;
    row-gap: 30px; } }
.sec03 .sec03_col li .method01 .method_l,
.sec03 .sec03_col li .method02 .method_l {
  max-width: 330px;
  width: 32.23%; }
  @media screen and (max-width: 480px) {
    .sec03 .sec03_col li .method01 .method_l,
    .sec03 .sec03_col li .method02 .method_l {
      width: 100%;
      max-width: 100%; } }
.sec03 .sec03_col li .method01 .method_r,
.sec03 .sec03_col li .method02 .method_r {
  max-width: 640px;
  width: 62.5%; }
  @media screen and (max-width: 480px) {
    .sec03 .sec03_col li .method01 .method_r,
    .sec03 .sec03_col li .method02 .method_r {
      width: 100%;
      max-width: 100%; } }

@media screen and (max-width: 480px) {
  .sec04 li {
    width: 100%; } }
@media screen and (max-width: 480px) {
  .sec04 li .foundation {
    flex-direction: column;
    row-gap: 30px; } }
.sec04 li .foundation .fou_l {
  max-width: 480px;
  width: 46.88%; }
  @media screen and (max-width: 480px) {
    .sec04 li .foundation .fou_l {
      width: 100%; } }
  .sec04 li .foundation .fou_l .fou_l_flex {
    margin-bottom: clamp(40px, 11.719vw, 120px); }
    @media screen and (max-width: 768px) {
      .sec04 li .foundation .fou_l .fou_l_flex {
        margin-bottom: 40px; } }
    @media screen and (max-width: 480px) {
      .sec04 li .foundation .fou_l .fou_l_flex {
        margin-bottom: 20px; } }
    .sec04 li .foundation .fou_l .fou_l_flex .item_text {
      max-width: 260px;
      width: 54.17%; }
    .sec04 li .foundation .fou_l .fou_l_flex .image {
      max-width: 198px;
      width: 41.25%; }
.sec04 li .foundation .fou_r {
  max-width: 480px;
  width: 46.88%; }
  @media screen and (max-width: 480px) {
    .sec04 li .foundation .fou_r {
      width: 100%; } }