@import "../common/css/mixin_style";

#pageTitle{
  padding: 8em 0 5em 0;
  text-align: center;
  @media only screen and (max-width: 767px){
    padding-left: 3%;
    padding-right: 3%;
  }
  .flex{
    align-items: center;
    >div{
      width: 50%;
      @media only screen and (max-width: 767px){
        width: 100%;
      }
      p{
        text-align: left;
        font-size: 1.3rem;
        transform: scale( 1 , 1.2 );
        line-height: 200%;
        margin-bottom: 30px;
      }
    }
  }
  h1{
    margin-bottom: 0.8em;
  }
  p{
    color: #636466;
    font-size: 1.5rem;
    transform: scale( 1 , 1.2 );
    letter-spacing: 1px;
  }
}
.search{
  &.btm{
    margin-top: 6em;
    .bg{
      >.flex{
        >div{
          padding: 1.2em;
        }
      }
    }
  }
  &.more{
    margin-top: 3em;
    text-align: center;
    .more{
      a{
        min-width: 320px;
      }
    }
  }
  .bg{
    background-color: #f4f4f4;
    padding: 2em;
    h2{
      margin-top: -50%;
      @media only screen and (max-width: 767px){
        margin-top: 0;
        img{
          width: 137px;
        }
      }
    }
    >.flex{
      justify-content:space-between;
      >div{
        width: 32%;
        border: 4px #62bcc3 solid;
        border-radius: 14px;
        background-color: #fff;
        padding: 2.2em 1.6em;
        position: relative;
        margin-top: 20px;
        @media only screen and (max-width: 767px){
          width: 100%;
        }
        h3{
          line-height: 140%;
        }
        img{
          vertical-align: bottom;
        }
        &.noBorder{
          border:none;
          background-color: transparent;
          @media only screen and (max-width: 767px){
            padding: 0;
          }
        }
        a{
          display: inline-block;
          background-color: #62bcc3;
          color: #fff;
          padding: 5px 40px;
          line-height: 120%;
          border-top-left-radius: 14px;
          border-bottom-left-radius: 14px;
          position: absolute;
          right: 0;
          bottom: 14px;
          &:after{
            content: "";
            display: block;
            width: 12px;
            height: 15px;
            background: url(/common/img/icon_arrow.png) no-repeat 0 0;
            position: absolute;
            right: 15%;
            top: 26%;
          }
          span{
            display: inline-block;
            font-size: 1.3rem;
            transform: scale( 1 , 1.2 );
          }
        }
      }
    }
    .lists{
      justify-content: space-between;
      >div:nth-child(1){
        width: 55%;
        img{
          max-width: 100%;
        }
      }
      >div:nth-child(2){
        width: 40%;
      }
    }
  }
}

#detail{
  .bg{
    background-color: #f4f4f4;
    padding:26px 40px;
    @media only screen and (max-width: 767px){
      padding: 15px;
    }
    .labels{
      >div{
        width: 50%;
        @media only screen and (max-width: 767px){
          width: 100%;
        }
        h2{
          font-size: 1.3rem;
          color: #62bcc3;
          line-height: 100%;
          padding: 12px 8px;
        }
        p{
          display: inline-block;
          background-color: #62bcc3;
          line-height: 100%;
          font-size: 1.2rem;
          color: #fff;
          padding: 6px 16px;
          border-radius: 12px;
        }
      }
      .green{
        h2{
          color: #3ccc79;
        }
        p{
          background-color: #3ccc79;
        }
      }
    }
    .borderBox{
      border: 4px #62bcc3 solid;
      border-radius: 14px;
      background-color: #fff;
      padding:10px 1.6em  1.4em 1.6em;
      margin-top: 20px;
      table.gaiyo{
        width: 100%;
        th,td{
          font-size: 1.4rem;
          line-height: 170%;
          text-align: left;
          border-bottom: 2px #e2e2e2 solid;
          padding: 20px 0;
          @media only screen and (max-width: 767px){
            width: 100%;
            display: block;
          }
        }
        th{
          width: 24%;
          @media only screen and (max-width: 767px){
            width: 100%;
          }
          &:before{
            content: "";
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 5px;
            background-color: #62bcc3;
            margin-right: 6px;
          }
        }
        td{
          line-height: 2;
          figure{
            text-align: center;
          }
          a{
            text-decoration: underline;
            position: relative;
            display: inline-block;
            padding-left: 10px;
            &:before{
              content: "";
              display: block;
              width: 0;
              height: 0;
              border-style: solid;
              border-width: 5px 0 5px 5px;
              border-color: transparent transparent transparent #000000;
              transform: scale(1, 0.75);
              position: absolute;
              left: 0;
              top: 7px;
            }
          }
        }
        td.bold{
          font-weight: bold;
          font-size: 1.6rem;
        }
        .noBorder{
          border: none;
        }
        td.noBorder{
          @media only screen and (max-width: 767px){
            padding-top: 0;
            padding-bottom: 0;
          }
        }
      }
      table.ph{
        th,td{
          border: none;
          padding: 5px;
          text-align: center;
          @media only screen and (max-width: 767px){
            width: 33%;
            display: table-cell;
            img{
              max-width: 100%;
            }
          }
        }
        th{
          text-align: center;
          font-size:1.6rem;
          @media only screen and (max-width: 767px){
            font-size: 1.2rem;
          }
          &:before{
            display: none;
          }
        }
        @media only screen and (max-width: 767px){
          td{
            font-size: 1.0rem;
            line-height: 150%;
          }
        }
        .border{
          border-right: 2px #e2e2e2 solid;
        }
      }
    }
  }
}
.rev{
  .more{
    a{
      padding: 6px 3em 12px 4em;
      &:after{
        transform: rotate(180deg);
        right: auto;
        left: 15%;
      }
    }
  }
}
#service{
  @media only screen and (max-width: 1060px){
    padding-left: 3%;
    padding-right: 3%;
  }
  h2{
    text-align: center;
    margin-bottom: 2em;
    img{
      max-width: 100%;
    }
  }
  p{
    @include transformFont();
    font-size: 1.3rem;
    text-align: center;
  }
  .more{
    text-align: center;
    margin-top: 2em;
  }
}