@charset "utf-8";

/* css Document
*****************************************************************/
@import "../../n_common/css/_variable.css";

/* Support
*****************************************************************/
.support{
  margin-top: 50px;
  padding-bottom: 80px;
  @media (width < 896px) {
    margin-top: 30px;
    padding-bottom: 60px;
  }
  @media (width < 480px) {
    padding-bottom: 40px;
  }
  .sec_ttl_support{
    box-sizing: border-box;
    padding: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--point_c2);
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
    @media (width < 896px) {
      display: block;
    }
    h2{
      font-size: 2rem;
      letter-spacing: 0.2em;
      font-weight: 300;
      margin-right: 0.5em;
      font-family: "Roboto", sans-serif;
      color: var(--point_c2);
      @media (width < 896px) {
        font-size: 1.8rem;
        margin-bottom: 10px;
      }
    }
    p{
      font-size: 1.2rem;
      letter-spacing: 0.1em;
    }
  }
  .sec_ttl_mark {
    padding-top: 80px;
    background: url("../images/mark.png") no-repeat top center;
    background-size: 200px auto;
  }
  .subttl_service{
    margin-bottom: 20px;
    font-size: 1.6rem;
    text-align: center;
    letter-spacing: 2px;
    color: var(--font_c);
    @media (width < 896px) {
      font-size: 1.4rem;
    }
  }
  .name_service{
    box-sizing: border-box;
    padding: 5px 10px;
    font-size: 1.1rem;
    font-weight: 500;
    color: #fff;
    background: var(--point_c2);
    border-radius: 0.4em;
    position: relative;
    margin-bottom: 10px;
    &.narrow{
      letter-spacing: -0.1em;
    }
    .txt_small{
      font-size: 0.7em;
    }
    .icon_service{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 20px;
      position: absolute;
      top: 50%;
      right: 15px;
      transform: translate(0, -50%);
    }
  }
  .txt_support{
    font-size: 1rem;
  }
  .box_img{
    text-align: center;
    .txt_cap{
      text-align: left;
      font-size: 0.8rem;
      margin-top: 10px;
    }
  }
  .area_consierge{
    .sec_service01{
      padding-top: 20px;
    }
    .sec_hapisapo{
      position: relative;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom:30px;
      .box_img {
        width:30%;
        @media (width < 896px) {
          padding-bottom: 10px;
          width: 100%;
          margin-top: 10px;
        }
      }
      .box_txt {
        width:70%;
        @media (width < 896px) {
          padding-bottom: 10px;
          width: 100%;
          margin-top: 10px;
        }
      }
    }
    .list_hapisapo{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      >li{
        &:first-of-type{
          padding-bottom: 20px;
          width: 42%;
          @media (width < 896px) {
            width: 100%;
            margin-top: 10px;
          }
        }
        &:last-of-type{
          width: 56%;
          @media (width < 896px) {
            width: 100%;
          }
        }
      }
    }
    .logo_hapisapo{
      width: 100%;
      max-width: 400px;
      margin-left: 300px;
      @media (width < 896px) {
        max-width: 300px;
        margin: 20px auto;
      }
    }
    .txt_hapisapo{
      font-size: 1rem;
      line-height: 1.6;
      margin-top: 20px;
    }
    .note_hapisapo{
      font-size: 1.4rem;
      position: absolute;
      bottom: 0;
      left: 0;
      @media (width < 896px) {
        font-size: 1.2rem;
        position: static;
        margin-top: 10px;
      }
    }
    .list_service01{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: -30px;
      @media (width < 896px) {
        margin-bottom: -20px;
      }
      >li{
        width: 22%;
        margin-bottom: 30px;
        @media (width < 896px) {
          width: 46%;
          margin-bottom: 20px;
        }
        &:first-of-type{
          width: 48%;
        }
        .name_service{
          font-size:1.1rem;
          
          padding-right: 35px;
        }
        .box_img{
          margin-bottom: 10px;
        }
        .list_column{
          display: flex;
          justify-content: space-between;
          >li{
            &:first-of-type{
              padding-right: 10px;
            }
            &:last-of-type{
              padding-left: 10px;
            }
          }
        }
      }
    }
    .sec_service02{
      padding-top: 60px;
      @media (width < 896px) {
        padding-top: 30px;
      }
    }
    .list_service02{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      >li{
        width: 100%;
        @media (width < 896px) {
          margin-bottom: 20px;
        }
        &.flex {
          margin-top:20px;
          display:flex;
          justify-content: space-between;
          @media (width < 896px) {
            display:block;
          }
        }
        .box {
          width:24%;
          @media (width < 896px) {
            width:100%;
          }
        }
      }
    }
    .list_yuipota{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 30px;
      >li{
        width: 36%;
        @media (width < 480px) {
          width: 100%;
          margin-bottom:20px;
        }
        &.img{
          width: 25%;
          @media (width < 896px) {
            width: 100%;
            margin-bottom: 20px;
          }
        }
      }
    }
    .list_feature{
      width:73%;
      text-align: center;
      box-sizing: border-box;
      padding: 10px;
      border: 1px solid #898989;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 30px;
      @media (width < 896px) {
        width:100%;
        padding: 5px;
      }
      >li{
        width: 48%;
        @media (width < 896px) {
          width: 100%;
        }
        &:first-of-type{
          padding-right: 10px;
          position: relative;
          @media (width < 896px) {
            padding-right: 0;
          }
          &::after{
            content: "";
            display: block;
            width: 2px;
            height: 95%;
            background-image: linear-gradient(to bottom, #dcdcdc, #dcdcdc 5px, transparent 5px, transparent 9px);
            background-size: 2px 9px;
            background-position: center center;
            background-repeat: repeat-y;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translate(0, -50%);
            @media (width < 896px) {
              content: none;
            }
          }
        }
        &:last-of-type{
          padding-left: 10px;
          @media (width < 896px) {
            padding-left: 0;
          }
        }
      }
    }
    .logo_yuipota{
      margin-bottom: 20px;
      @media (width < 896px) {
        margin-bottom: 10px;
      }
    }
    .sec_service03{
      padding-top: 60px;
      @media (width < 896px) {
        padding-top: 30px;
      }
    }
    .list_service03{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      >li{
        width: 22%;
        @media (width < 896px) {
          width: 46%;
        }
      }
    }
    .sec_service04{
      padding-top: 60px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      @media (width < 896px) {
        padding-top: 30px;
      }
    }
    .block_service04{
      width: 48%;
      @media (width < 896px) {
        width: 100%;
      }
    }
    .block_guide{
      width: 48%;
      @media (width < 896px) {
        width: 100%;
      }
      .guide_img {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        @media (width < 896px) {
          display: block;
        }
        li {
          width: calc(50% - 10px);
          @media (width < 896px) {
            width: 100%;
            display: block;
          }
          img {
            width: 100%;
            height: auto;
          }
        }
      }
      .bg {
        padding: 20px;
        border-radius: 20px;
        background: #f8f4d6;
      }
      .copy_guide{
        font-size: 1.4rem;
        font-weight: bold;
        color: #D51460;
        text-align: center;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--font_c);
        @media (width < 896px) {
          font-size: 1.2rem;
        }
      }
      .txt_guide{
        font-size: 1rem;
        margin-top: 10px;
        line-height: 1.5;
      }
      .list_guide{
        text-align: center;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 20px;
        @media (width < 896px) {
          margin-top: 10px;
        }
        >li{
          &:first-of-type{
            width: 30%;
            @media (width < 480px) {
              width: 100%;
            }
            .box_img{
              @media (width < 480px) {
                max-width: 300px;
                margin: 0 auto;
              }
            }
          }
          &:last-of-type{
            width: 66%;
            @media (width < 480px) {
              width: 100%;
              margin-top: 10px;
            }
          }
        }
      }
      .txt_flow{
        font-size: 1.1rem;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--font_c);
        margin-top: 15px;
        
      }
      .name_guide{
        font-size: 1rem;
        margin-top: 10px;
      }
      .box_contact{
        box-sizing: border-box;
        padding: 15px;
        /*background: linear-gradient(to right, #FBEDC2 0%, #FDF8E1 28%, #EFE0C2 55%, #F9F2DB 85%, #FDFCEE 100%);*/
        background: #fff;
        position: relative;
        margin-top: 20px;
        &::after{
          content: "";
          display: block;
          width: calc(100% - 10px);
          height: calc(100% - 10px);
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border: 1px solid #898989;
        }
      }
      .box_call{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        >p{
          width: 49%;
          @media (width < 480px) {
            width: 100%;
          }
          &:first-of-type{
            @media (width < 480px) {
              margin-bottom: 10px;
            }
          }
        }
      }
      .txt_contact{
        font-size: 1rem;
        margin-top: 10px;
      }
    }
    .list_service04{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: -30px;
      @media (width < 896px) {
        margin-bottom: -20px;
      }
      >li{
        width: 46%;
        margin-bottom: 30px;
        @media (width < 896px) {
          margin-bottom: 20px;
        }
        &:last-of-type{
          width: 100%;
          @media (width < 896px) {
            margin-top: 20px;
          }
        }
        &.last {
          width: 46% !important;
          margin-bottom: 30px !important;
          @media (width < 896px) {
            margin-bottom: 20px !important;
          }
        }
      }
    }
  }
  .area_support{
    padding-top: 100px;
    @media (width < 896px) {
      padding-top: 50px;
    }
    .sec_support1 {
      position: relative;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom:30px;
      .box_img {
        width:30%;
        padding-right:15px;
        @media (width < 896px) {
          padding-right:0;
          padding-bottom: 10px;
          width: 100%;
          margin-top: 10px;
        }
      }
      .box_txt {
        width:70%;
        @media (width < 896px) {
          padding-bottom: 10px;
          width: 100%;
          margin-top: 10px;
        }
        .logo {
          text-align:center;
          img {
            max-width:70%;
            margin:0 auto 10px;
          }
        }
      }
    }
    .list_security{
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      >li{
        width: 48%;
        @media (width < 896px) {
          width: 100%;
          margin-bottom: 10px;
        }
      }
    }
    .copy_security{
      font-size: 1.4rem;
      margin-bottom: 15px;
      font-weight: 600;
      color: var(--font_c);
      @media (width < 896px) {
        font-size: 1.2rem;
      }
    }
    .ttl_follow{
      font-size: 1.1rem;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .ttl_follow{
      .red {
        color: var(--point_c2);
      }
    }
    .list_follow{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 20px;
      >li{
        &:first-of-type{
          width: 66%;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          @media (width < 896px) {
            width: 100%;
          }
          .box_txt{
            width: 42%;
            @media (width < 896px) {
              width: 100%;
            }
          }
          .box_img{
            width: 56%;
            @media (width < 896px) {
              width: 100%;
              margin-top: 10px;
            }
          }
        }
        &:last-of-type{
          width: 32%;
          @media (width < 896px) {
            width: 100%;
            margin-top: 20px;
          }
        }
      }
    }
    .box_after{
      box-sizing: border-box;
      padding: 15px;
      background: linear-gradient(135deg, #FAECB8 0%, #FCFAE3 25%, #EFE1BA 50%, #E5CD9C 75%, #F2E4BD 100%);
      border-radius: 20px;
      .ttl_follow{
        text-align: center;
      }
      .list_after{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row-reverse;
        >li{
          &:first-of-type{
            width: 50%;
          }
          &:last-of-type{
            width: 47%;
          }
          .box_img {
            overflow: hidden;
            border-radius: 6px;
          }
        }
      }
      .txt_after{
        font-size: 0.9rem;
        line-height: 1.5em;
      }
    }
  }
  .note_common{
    margin-top: 80px;
    @media (width < 896px) {
      margin-top: 40px;
    }
  }
}