/*--------- sp ---------*/
.first_view{
  height: 450px;
  position: relative;
  background: linear-gradient(to bottom, transparent,rgba(255,255,255,.9));

  .view_layer{
    width: min(80%,823px);
    position: absolute;      
    left: 0;
    bottom: clamp(50px,9vw,100px);

    h1{
      padding-left: clamp(30px,10%,90px);
    }
    p{
      font-size: 2.0rem;
      font-weight: 500;
      padding-left: clamp(30px,10%,90px);
      padding-top: 17px;
      border-top: min(0.36vw,3px) solid var(--main-color);
    }
  }
}

.content{
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(5px);
  /*-webkit-backdrop-filter: blur(5px);*/
  width: min(90%,1100px);
  margin: 3px auto clamp(42px,8vw,95px);
  border-radius: 20px;
  padding: clamp(10px,2vw,20px) 0;
}
.address_wrap{
  width: 92%;
  margin: 0 auto;
  padding: clamp(20px,5vw,50px) clamp(20px,3vw,25px) clamp(30px,5vw,60px);
  border-radius: 20px;
  background-color: rgba(248,247,242,.7);
  
  h2{
    font-size: clamp(2.8rem,4vw,4.0rem);
    font-weight: 900;
  }
  
  table{
    width: 100%;
    border-collapse: collapse;/*--trにボーダー--*/
    border-spacing: 0;
    margin-top: clamp(24px,4vw,40px);
  }
  tr {
    /*ドットを調整*/
    background-image : linear-gradient(to right, #8F8F8F 2px, transparent 1px);
    background-size: 4px 1px;
    background-repeat: repeat-x;
    background-position: left bottom;
    
    &:last-child{
      background-image : none;
    }
  }
  
  th {
    padding: 8px 3px 1px;
    font-weight: 900;
    text-align: left;
    vertical-align: center;
    display: block;
    
    img{
      width: 30px;
      margin-right: 5px;
    }
  }
  td {
    padding: 1px 6px 8px;
    display: block;
  }    
}

.contact_form{
  width: 92%;
  margin: 0 auto;
  padding: clamp(33px,6vw,66px) clamp(20px,3vw,25px) 0;
  
  h2{
    font-size: clamp(2.8rem,4vw,4.0rem);
    font-weight: 900;
  }
  h3{
    font-size: clamp(1.8rem,2.5vw,2.5rem);
    font-weight: 600;
  }
  
  .info_table{
    width: 100%;
    padding: clamp(20px,5vw,50px) 0 clamp(30px,5vw,60px);
    
    table{
      width: 98%;
      margin: 0 auto;
      border-collapse: collapse;/*--trにボーダー--*/
      border-spacing: 0;
    }
    tr {
      /*ドットを調整*/
      background-image : linear-gradient(to right, #8F8F8F 2px, transparent 1px);
      background-size: 4px 1px;
      background-repeat: repeat-x;
      background-position: left bottom;

      
    }
    th {
      text-align: left;
      display: block;
      font-weight: 900;
      padding: 8px 3px 1px;
      vertical-align: top;
    }
    td {
      display: block;
      padding: 8px 3px 16px;
    }
    input[type="submit"]{
      font-family: 'Noto Sans JP', sans-serif;
    }
    input[type="text"], input[type="email"], textarea{
      width: 100%;
      padding: 9px 16px;
      font-family: 'Noto Sans JP', sans-serif;
      transition: all .5s;
      border: 1px solid #707070;
    }
    input[type="text"]:focus, input[type="email"]:focus, textarea:focus{
      width: 100%;
      padding: 9px 16px;
      font-family: 'Noto Sans JP', sans-serif;
      transition: all .5s;
      border: 1px solid var(--main-color);
      outline: none;
    }
  }
  .input_btn_box{
      margin: 25px 0 0;
    
      .input_btn{
        display: block;
        padding: 8px 0;
        color: #ffffff;
        border-radius: 50px;
        position: relative;
        width: min(80%,150px);
        margin: 0 auto;
        background-color: var(--font-color);	
        border: 2px solid var(--font-color);	
        cursor: pointer;
        transition: all .3s;
        font-weight: 500;
        font-size: 1.6rem;
      }
      .input_btn:hover{
        transition: all .3s;
        color: var(--font-color);
        background-color: #fff;
        border: 2px solid var(--font-color);
        opacity: 1;
      }
      .input_btn_box input{
        font-family: 'Noto Sans JP', sans-serif;
      }
    }
}
.blank{
  height: 0;
}
@media (min-width:768px){
  /*--- contact tab ---*/
  .first_view{
    height: 500px;

    .view_layer{
      width: min(65%,823px);
    }
  } 

  .address_wrap{
    width: 95%;

    th {
      padding: 12px 20px;
      display: table-cell;

      img{
        margin-right: 10px;
      }
    }
    td {
      padding: 12px 20px;
      display: table-cell;
    }


  }

  .contact_form{
    width: 95%;
    
    .info_table{
      
      table{
        width: 100%;
      }

      th {
        display: table-cell;
        padding: 12px 5px 12px 1em;
        width: 10em;
      }
      td {
        display: table-cell;
        padding: 12px 5px;
      }
     
    }

  }
  
	
}
@media (min-width:1024px){
/*--------- pc ---------*/
  /*--- contact tab ---*/
  .first_view{
    height: 550px;
  }
	 .contact_form{
    
    .info_table{
      
      th {
        padding: 18px 5px 18px 1em;
        width: 12em;
      }
      td {
        display: table-cell;
        padding: 18px 5px;
      }

      
    }
     
    .contact_sns{

      li{
        width: min(45%,400px);
          margin: 0 2.5%;

      }
    }

  }
  



	
}
@media (min-width:1280px){
/*--------- 1280 ---------*/


  
  
  
  
  
}
@media (min-width:1580px){
/*--------- 1580 ---------*/
  
 
  
  
  
  
	
}