@charset "utf-8";


/*----------------------------------------------------------------------------
   TOP - business -
------------------------------------------------------------------------------*/

#business {
  width: 100%;
  height: auto;
  padding-top: calc(var(--BaseSpaceSize) * 10);
  margin-bottom: calc(var(--BaseSpaceSize) * 10);    

  .description {
    padding: calc(var(--BaseSpaceSize) * 4);
    background-color: #fff;
    border-top-left-radius: var(--BaseSpaceSize);
    border-bottom-left-radius: var(--BaseSpaceSize);
    overflow: hidden;
  }
}
    
@media (max-width:1500px) {  
  #business {
    display: flex;
    align-items: center;
    position: static;
    flex-wrap: wrap;
    padding-bottom: 0;
    margin-bottom: calc(var(--BaseSpaceSize) * 10);    

    .photo {
      width: 50%;
      aspect-ratio: auto;
      border-radius: 0;
      object-fit: cover;
      
      img {
        object-fit: cover;
        min-height: 335px;
      }
    }

    .description {
      position: static;
      width: 50%;    
      border-radius: 0;
    }
  }
}
    
@media (max-width:960px) {  
  #business {
    .photo {
      width: 100%;
      aspect-ratio: 960 / 460;
      
      img {
        min-height: auto;
      }
    }

    .description {
      position: static;
      width: 100%;    
    }
  }
}


/*----------------------------------------------------------------------------
   TOP - vacancy -
------------------------------------------------------------------------------*/

#vacancy {
  padding-bottom: calc(var(--BaseSpaceSize) * 10);
  
  .vacancy-list {
    width: 100%;
    padding: calc(var(--BaseSpaceSize)* 4);
    background-color: #fff;
    margin-top: calc(var(--BaseSpaceSize) * 4);
    
    dl {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin: 0 0 1em;
      padding-bottom: 1em;
      border-bottom: 1px dotted #ccc;
      
      &:last-child {
        margin: 0;
        padding-bottom: 0;
        border-bottom: none;
      }
      
      dt {
        width: calc(100% - 6em);
        font-weight: bold;
        margin: 0;
        padding: 0;
      }
      dd {
        width: 6em;
        margin: 0;
        padding: 0;

        .available {
          display: inline-block;
          color: #fff;
          padding: 0 0.5em;
          background-color: var(--Color3);
        }
        .unavailable {
          display: inline-block;
          color: #fff;
          padding: 0 0.5em;
          background-color: var(--Color2);
        }
      }    
      @media (max-width:800px) {
        dt { width: 100%; }
        dd { width: 100%; margin-bottom: 0.25em; }
      }
    }
  }
  
  /*
  .vacancy-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: calc(var(--BaseSpaceSize) * 4);
    
    .box {
      width: calc(50% - (var(--BaseSpaceSize) * 2));
      box-sizing: border-box;  
      border-radius: var(--BaseSpaceSize);
      overflow: hidden;
      background-color: #fff;
      
      .facility_name {
        display: flex;
        padding: .75em calc(var(--BaseSpaceSize) * 2);
        box-sizing: border-box;
        line-height: 1.2;
        
        .cate {
          margin-right: .75em;
          
          span {
            display: inline-block;
            padding: .5em 1em;
            font-weight: bold;
            line-height: 1;           
          }

          &.none {
            background-color: #606060;
            color: #fff !important;
          }  

          &.ok {
            background-color: #fff;
            animation:blink .7s ease-in-out infinite alternate;
          }  
        }
        
        h2 {
          margin: 0;
          color: #fff;
        }        
      }
      
      .description {
        padding: calc(var(--BaseSpaceSize) * 2);
        box-sizing: border-box;
        
        address { font-style: normal; }
        
        p { margin: 0; }
      }
      
      &:nth-child(1) {
        border: 1px solid var(--Color2);
        
        .facility_name {
          background-color: var(--Color2);
          
          .cate { color: var(--Color2); }
        }
      }
      
      &:nth-child(2) {
        border: 1px solid var(--Color3);
        
        .facility_name {
          background-color: var(--Color3);
          
          .cate { color: var(--Color3); }
        }
      }
    }

    @media (max-width:768px) { 
      .box { width: 100%; }
    }
  }
  */
}



/*----------------------------------------------------------------------------
   TOP - facilities -
------------------------------------------------------------------------------*/

.facilities {
  padding-top: calc(var(--BaseSpaceSize) * 10);
  margin-top: calc(var(--BaseSpaceSize) * -10);
  padding-bottom: calc(var(--BaseSpaceSize) * 10);
  
  .tab-btn {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    padding: 0;
    margin: 0;

    .btn {
      width: 20%;
      display: block;
      padding: .5em .5em .25em;
      box-sizing: border-box;
      border-top-left-radius: var(--BaseSpaceSize);
      border-top-right-radius: var(--BaseSpaceSize);
      overflow: hidden;
      background-color: var(--Color4);
      color: #fff;
      font-weight: bold;
      text-align: center;
      line-height: 1.3;
      opacity: .7;
      transition: .1s;

      &:hover,
      &.is-active {
        text-decoration: none;
        cursor: pointer;
        opacity: 1;
      }
    }
  }
  
  @media (max-width:800px) {
    .tab-btn {
      flex-wrap: wrap;
      margin-bottom: var(--BaseSpaceSize);

      .btn {
        width: calc(50% - 2px);
        padding: .5em 1em;
        border-radius: var(--BaseSpaceSize);
      }
    }
  }

  .tab-contents {
    overflow: hidden;
    padding: calc(var(--BaseSpaceSize) * 4);
    border: 2px solid var(--Color4);
    box-sizing: border-box;
    background-color: #fff;

    .tab-contents-item {
      display: none;
      
      &.is-active {
        display: block;
        animation: fadeinAnime .3s forwards;
      }
    }
    
    .head {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding-bottom: calc(var(--BaseSpaceSize) * 2);
      margin-bottom: calc(var(--BaseSpaceSize) * 4);
      border-bottom: 1px solid #bbb;
      
      .name {      
        h2 {
          margin: 0;
          line-height: 1.3;
        }

        p {
          margin: 0;
        }
        
      }
      
      .document {
        width: 12em;
        justify-content: center;
        padding: .5em 1em;
      }
    }
    
    @media (max-width:1000px) {      
      .head {      
        .name {      
          width: 100%;
          margin-bottom: 1em;
        }
      }
    }
    
    .photo {
      margin-bottom: calc(var(--BaseSpaceSize) * 4);
    }
      
    .slide-container {
      width: 100%;
      display: flex;
      align-items: center;
      overflow: hidden;
    }
    
    .slide-wrapper {
      display: flex;
      gap: 10px;
      animation: slide-flow 80s infinite linear 1s both;
      padding-right: 10px;
    }
    
    .slide {
      width: 400px;
      object-fit:cover;
    }
    
    @media (max-width:768px) {
      .slide {
        width: 200px;
        object-fit:cover;
      }
    }
    
    .description {
      display: grid;
      gap: calc(var(--BaseSpaceSize) * 4);
    }
    
    #focus .description,    
    #ran1 .description {
      grid-template-columns: 1fr 1fr;
    }
    
    #ran2 .description {      
      grid-template-columns: 1fr 1fr;
      
      .service {
        grid-column: 1 / 3;            
        
        .service-wrap {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          gap: calc(var(--BaseSpaceSize) * 4);
          margin-top: calc(var(--BaseSpaceSize) * 4);
          
          .service-item {
            width: calc(50% - var(--BaseSpaceSize) * 2);
            padding: 1em;
            background-color: var(--Color5);
            border: 1px solid var(--Color1);
            border-radius: var(--BaseSpaceSize);
            box-sizing: border-box;
            
            h4 {
              margin-bottom: 0.5em;
            }
            
            ul {
              list-style: none;
              padding: 0;
              margin: 0;
              
              li::before {
                content: "・";
              }
            }
          }
        }
      
        @media (max-width:800px) {
          .service-wrap {
            gap: calc(var(--BaseSpaceSize) * 2);

            .service-item {
              width: 100%;
            }
          }
        }
      }
      
      .access {
        grid-column: 1 / 3;            
        
        .access-wrap {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: calc(var(--BaseSpaceSize) * 4);
          
          .information {
            order: 2;
            width: calc(50% - var(--BaseSpaceSize) * 2);
          }

          iframe {
            width: calc(50% - var(--BaseSpaceSize) * 2);
            margin-top: 0;
          }
          
          @media (max-width:800px) {
            .information {
              order: 0;
              width: 100%;
            }

            iframe {
              width: 100%;
            }
          }
        }
      }
    }
    
    #mahoroba .description {
      grid-template-columns: 1fr 1fr;
      
      .service {        
        grid-column: 1 / 3;
        
        ul {
          list-style: none;
          padding: 0;
          margin: 0;
          color: var(--Color2);
          font-weight: bold;
          
          li::before {
            content: "●";
          }
        }
      }
      
      
      .access {
        grid-column: 1 / 3;      
                
        .access-wrap {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: calc(var(--BaseSpaceSize) * 4);
          
          .information {
            order: 2;
            width: calc(50% - var(--BaseSpaceSize) * 2);
          }

          iframe {
            width: calc(50% - var(--BaseSpaceSize) * 2);
            margin-top: 0;
          }
          
          @media (max-width:800px) {
            .information {
              order: 0;
              width: 100%;
            }

            iframe {
              width: 100%;
            }
          }
        }
      }
    }
    
    #ran3 .description {
      grid-template-columns: 1fr 1fr;
      
      .consultation {
        grid-column: 1 / 3;      
        
        ul {
          list-style: none;
          padding: 0;
          margin: 0;
        }
      }
      
      .service {
        grid-column: 1 / 3;      
        
        ul {
          list-style: none;
          padding: 0;
          margin: 0;
        }
        
        .appeal {
          color: var(--Color2);
          font-weight: bold;
        }
      }
      
      .access {                
        grid-column: 1 / 3;      
        
        .access-wrap {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: calc(var(--BaseSpaceSize) * 4);
          
          .information {
            order: 2;
            width: calc(50% - var(--BaseSpaceSize) * 2);
          }

          iframe {
            width: calc(50% - var(--BaseSpaceSize) * 2);
            margin-top: 0;
          }
          
          @media (max-width:800px) {  
            .information {
              order: 0;
              width: 100%;
            }

            iframe {
              width: 100%;
            }
          }
        }
      }
    }

    h3 {
      display: flex;
      align-items: center;
      margin-top: 0;
      padding-left: .75em;
      border-left: 3px solid var(--Color2);
      line-height: 1.2;
    }

    h4 {
      color: var(--Color2);
      margin-top: 0;
    }
      
    .price {        
      .total th,
      .total td {
        font-weight: bold;
      }

      .note {
        margin-top: calc(var(--BaseSpaceSize) * 2);
      }
    }

    .access {        
      address {
        font-style: normal;
        margin-bottom: calc(var(--BaseSpaceSize) * 2);
      }

      iframe {
        width: 100%;
        height: 360px;
        border: none;
        margin-top: calc(var(--BaseSpaceSize) * 2);
      }
    }    
  
    @media (max-width:800px) {    
      .description {
        .price {
          grid-column: 1 / 3;          
          width: 100%;
        }

        .access {
          grid-column: 1 / 3;
          width: 100%;
        }
      }
          
      .table-content {

        th,
        td {
          display: table-cell;
        }            
      }
    }
  }
}

@keyframes slide-flow {
  0% {transform: translateX(0);}
  100% {transform: translateX(-100%);}
}


/*----------------------------------------------------------------------------
   TOP - Information -
------------------------------------------------------------------------------*/

#information {
  padding-bottom: calc(var(--BaseSpaceSize) * 15);
  
  .list {
    border-top: 1px solid #bbb;
    
    li {
      border-bottom: 1px solid #bbb;
      
      a,
      .nolink {
        display: flex;
        align-items: center;
        padding: 1em 2em;
        box-sizing: border-box;
        
        .date {
          margin-right: 2em;
        }
      }
  
      @media (max-width:500px) {
        a,
        .nolink {
          padding: 1em 0;
        }
      }
    }
  }
  
  .list_link {
    display: flex;
    justify-content: center;
    margin: calc(var(--BaseSpaceSize) * 4) auto 0;
    
    .btn01 {
      width: 12em;
      justify-content: center;
    }
  }
}


/*----------------------------------------------------------------------------
   TOP - reserved-link -
------------------------------------------------------------------------------*
.reserved-link {
  position: fixed;
  right: 72px;
  bottom: 72px;
  z-index: 3;
  display: block;
  width: 200px;
  border-radius: 50%;
  overflow: hidden;
  animation:blink 1.5s ease-in-out infinite alternate;

  &:hover { animation: none; }
}

@media (max-width:1280px) {  
  .reserved-link {
    right: 24px;
    bottom: 100px;
    width: 150px;
  }
}

@media (max-width:768px) {  
  .reserved-link {
    right: 4px;
    bottom: 100px;
    width: 100px;
  }
}

@media (max-width:510px) {      
  .reserved-link {
    bottom: 72px;
  }
}


/*----------------------------------------------------------------------------
   error
------------------------------------------------------------------------------*/  
.not-found {
  margin-top:  calc(var(--BaseSpaceSize) * 6);
  margin-bottom:  calc(var(--BaseSpaceSize) * 6);
}