.onsen{
  background: #fff;
  color: #000;

  .secin{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
  }

  .notes{
    >li{
      text-indent: -1em;
      padding-left: 1em;
    }
  }
}

.onsen_head{
  width: 100%;
  height: clamp(0px, calc(330 / 1000 * 100vw), 330px);
  background: url(../img/onsen/onsen_kv.webp) no-repeat center bottom / cover;

  .secin{
    height: 100%;
    max-width: 1200px;
    width: 92%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}

.onsen_head_ttl{
  font-size: 2.63rem;
  padding-left: 20px;
  color: #fff;
  line-height: 1;
}

.onsen_logo{
  max-width: 400px;
  margin: 0 auto;
}

.onsen_sec{
  padding: 120px 0;

  &.-color{
    background: #f5f0e4;
  }
}

.onsen_table{
  width: 100%;
  margin-top: 60px;

  th{
    background: #89826f;
    text-align: center;
    padding: 15px 20px;
  }

  td{
    border-right: 1px solid #89826f;
    border-bottom: 1px solid #89826f;
    padding: 15px 20px;

    &:first-child{
      text-align: center;
      width: 40%;
    }

    &:last-child{
      &:not(:first-child){
        border-right: none;
      }
    }
  }
}

.table_head{
  font-size: 1.25rem; 
  line-height: 1.4;
  color: #fff;
}

.table_txt{
  font-size: 1rem;
  line-height: 1.4;

  &:not(:first-child){
    margin-top: 10px;
  }
}

.table_notes{
  >li{
    font-size: 0.75rem;
    line-height: 1.4;

    &+li{
      margin-top: 5px;
    }
  }

  &:not(:first-child){
    margin-top: 10px;
  }
}

.table_under_notes{
  margin-top: 10px;
  text-align: left;

  >li{
    font-size: 0.75rem;
    line-height: 1.4;

    &+li{
      margin-top: 5px;
    }
  }
}

.onsen_head_02{
  font-size: 2rem;
}

.onsen_list{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-flow: row wrap;
  gap: 35px;
  margin-top: 60px;

  >li{
    width: 310px;
/*     background: rgba(255,255,255,.3); */
  }
}

.onsen_list_img{
  border-radius: 3px;
  overflow: hidden;
}

.onsen_list_inner{
/*   padding: 15px; */
}

.onsen_list_head{
  font-size: 1.25rem;
  line-height: 1.5;
  margin-top: 15px;

  .s{
    font-size: .88rem;
  }
}

.onsen_list_txt{
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: left;
  margin-top: 15px;

  &:not(:first-of-type){
    margin-top: 10px;
  }
}

.onsen_btn{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 420px;
  height: 60px;
  border-radius: 3px;
  background: #000;
  color: #fff !important;
  font-size: 1.25rem; 
  line-height: 1.4;
  margin: 0 auto;
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
  margin: 60px auto 0;
  position: relative;
  transition: opacity .2s ease-out;

  &:before{
    content: '';
    width: 8px;
    height: 8px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(45deg);
    position: absolute;
    right: 20px;
    top: calc( 50% - 4px );
    transition: right .2s ease-out;
  }

  @media (any-hover: hover) {
    &:hover{
      &:before{
        right: 16px;
      }
    }
  }

  &.-blank{
    &:before{
      content: '';
      width: 8px;
      height: 8px;
      border: 1px solid #fff;
      background: #000;
      position: absolute;
      right: 18px;
      top: calc( 50% - 6px );
      transform: rotate(0);
    }
    &:after{
      content: '';
      width: 8px;
      height: 8px;
      border: 1px solid #fff;
      background: #000;
      position: absolute;
      right: 20px;
      top: calc( 50% - 4px );
      transform: rotate(0);
    }
  }
}

@media only screen and (max-width: 750px) {
  .onsen{
    .secin{
      width: 90%;
      justify-content: center;
    }
  }
  
  .onsen_head{
    height: clamp(0px, calc(330 / 750 * 100vw), 330px);
  }
  
  .onsen_head_ttl{
    font-size: clamp(0px, calc(42 / 750 * 100vw), 42px);
    margin-top: clamp(0px, calc(40 / 750 * 100vw), 40px);
    padding-left: 0;
  }
  
  .onsen_logo{
    max-width: clamp(0px, calc(400 / 750 * 100vw), 400px);
  }
  
  .onsen_sec{
    padding: clamp(0px, calc(120 / 750 * 100vw), 120px) 0;
  }

  .onsen_table{
    width: 100%;
    margin-top: clamp(0px, calc(60 / 750 * 100vw), 60px);
  
    th{
      padding: clamp(0px, calc(15 / 750 * 100vw), 15px);
    }
  
    td{
      padding: clamp(0px, calc(15 / 750 * 100vw), 15px) clamp(0px, calc(20 / 750 * 100vw), 20px);

      &:first-child{
        text-align: left;
        width: auto;

        &.onsen_table_hotel{
          width: 45%;
        }
      }
    }
  }
  
  .table_head{
    font-size: clamp(0px, calc(28 / 750 * 100vw), 28px); 
  }
  
  .table_txt{
    font-size: clamp(0px, calc(24 / 750 * 100vw), 24px);
  
    &:not(:first-child){
      margin-top: clamp(0px, calc(10 / 750 * 100vw), 10px);
    }
  }
  
  .table_notes{
    >li{
      font-size: clamp(0px, calc(20 / 750 * 100vw), 20px);

      &+li{
        margin-top: clamp(0px, calc(5 / 750 * 100vw), 5px);
      }
    }
  
    &:not(:first-child){
      margin-top: clamp(0px, calc(10 / 750 * 100vw), 10px);
    }
  }
  
  .table_under_notes{
    margin-top: clamp(0px, calc(10 / 750 * 100vw), 10px);
  
    >li{
      font-size: clamp(0px, calc(20 / 750 * 100vw), 20px);
  
      &+li{
        margin-top: clamp(0px, calc(5 / 750 * 100vw), 5px);
      }
    }
  }
  
  .onsen_head_02{
    font-size: clamp(0px, calc(44 / 750 * 100vw), 44px);
  }
  
  .onsen_list{
    flex-flow: column wrap;
    gap: clamp(0px, calc(100 / 750 * 100vw), 100px);
    margin-top: clamp(0px, calc(60 / 750 * 100vw), 60px);
  
    >li{
      width: 100%;
    }
  }

  .onsen_list_head{
    font-size: clamp(0px, calc(36 / 750 * 100vw), 36px);
    margin-top: clamp(0px, calc(40 / 750 * 100vw), 40px);
    text-align: left;
    padding-left: clamp(0px, calc(40 / 750 * 100vw), 40px);
    position: relative;

    .s{
      font-size: clamp(0px, calc(20 / 750 * 100vw), 20px);
    }

    &:before{
      content: '';
      width: clamp(0px, calc(20 / 750 * 100vw), 20px);
      height: 2px;
      background: #89826f;
      position: absolute;
      left: 0;
      top: calc(50% - 1px);
    }
  }
  
  .onsen_list_txt{
    font-size: clamp(0px, calc(28 / 750 * 100vw), 28px);
    margin-top: clamp(0px, calc(30 / 750 * 100vw), 30px);
  
    &:not(:first-of-type){
      margin-top: clamp(0px, calc(10 / 750 * 100vw), 10px);
    }
  }
  
  .onsen_btn{
    width: 100%;
    height: clamp(0px, calc(140 / 750 * 100vw), 140px);
    font-size: clamp(0px, calc(32 / 750 * 100vw), 32px); 
    box-shadow: 0 clamp(0px, calc(4 / 750 * 100vw), 4px) clamp(0px, calc(12 / 750 * 100vw), 12px) rgba(0,0,0,.5);
    margin: clamp(0px, calc(60 / 750 * 100vw), 60px) auto 0;
  
    &:before{
      right: 10px;
    }
  
    &.-blank{
      &:before{
        right: 10px;
      }
      &:after{
        right: 12px;
      }
    }
  }

}