@charset "utf-8";

/* override chiba-machidukuri base module.css & add new */
.side-enable{
  
  /* heading */
  .heading-bar{
    background-color: var(--color-green);
    color:white;
    padding: 2px 11px;
    font-weight: bold;
    font-size:1.8rem;
    margin: 2em 0 0 0;
    @media (max-width: 834px) {
      font-size:1.7rem;
    }
    @media (max-width: 500px) {
      font-size:1.6rem;
    }
    + *{
      margin-top:2em !important;
      @media (max-width: 500px) {
        margin-top:1.4em !important;
      }
    }
  }
  .heading-subsection{
    font-size:20px;
    padding-left:28px;
    font-weight: bold;
    &::after{
      background-color: var(--color-yellow);
      top:8px;
      width:18px;
      height:18px;
    }
  }
  .heading-border{
    font-weight: bold;
    font-size:18px;
  }
  .heading-item{
    font-weight: bold;
    font-size:17px;
  }


  /* p */
  .p-caution{
    color:var(--color-caution);
  }

  /* grid */
  .grid-block{
    &.-searchfacility{
      .btn-basic{
        display: block;
        padding:6px;
      }
    }
  }

  /* card */
  .card-horizontal{
    display: flex;
    column-gap: 30px;
    @media (max-width: 830px) {
      flex-direction: column;
      column-gap: 0;
      row-gap: 20px;
    } 
    @media (max-width: 500px) {
      row-gap: 12px;
    }
    > *{
      flex:1;
    }
    .image{
      img{
        display: block;
        width:100%;
        overflow: hidden;
        aspect-ratio:  4 / 3;
        object-fit: cover;
      }
    }
    .summary{
      .title{
        font-size:2.0rem;
        font-weight: bold;
        margin:0 0 0.2em 0;
        @media (max-width: 830px) {
          font-size:1.8rem;
        } 
        @media (max-width: 500px) {
          font-size:1.6rem;
        }
      }
      .detail{
        margin:0 0 1em 0;
        line-height: 1.6;
      }
      .btn-basic{
        display: block;
        width:100%;
        box-sizing: border-box;
        text-align: center;
      }
    }
  }
  .card-sportscenter{
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid #eee;;
    overflow: hidden;
    a{
      color:var(--color-text);
    }
    .image{
      overflow: hidden;
      img{
        display: block;
        width:100%;
        aspect-ratio: 4 / 2.7;
        object-fit: cover;
        @media (max-width: 500px) {
          aspect-ratio: 2 / 1.4;
        }
      }
    }
    .caption{
      padding:14px 0;
      text-align: center;
      @media (max-width: 500px) {
        padding: 8px 0;
      }
    }
  }
  .card-searchfacility{
    display: flex;
    align-items: center;
    width:100%;
    font-size:90%;
    @media (max-width: 500px) {
      flex-direction: column;
    }
    dt{
      width:50px;
      margin-right:5px;
      @media (max-width: 500px) {
        min-width:60px;
        margin-bottom:0px;
      }
    }
  }

  /* btn */
  .btn-basic{
    border-radius: 8px;
    background-color: var(--color-yellow);
    color:white;
    display: inline-block;
    padding:6px 18px;
    text-decoration: none;
    transition: all .3s;
    border:none;
    white-space: nowrap;
    @media (max-width: 500px) {
      max-width:90%;
      margin:0 auto;
      padding:4px 12px;
    }
    &.-caution{
      background-color: var(--color-caution);
      &:hover{
        background-color: #990000;
      }
    }
    &.-block{
      display: block;
      box-sizing: border-box;
      width: 100%;
      text-align: center;
      padding: 30px 20px;
      border-radius: 14px;
      @media (max-width: 500px) {
        padding: 14px 10px;
      }
      &.-sports,
      &.-area{
        font-size:120%;
        font-weight: bold;
        background-repeat: no-repeat;
        background-position: top 50% left 6%;
        background-size: auto 60%;
        padding-left:40px;
        @media (max-width: 500px) {
          background-position: top 50% left 20px;
          background-size: auto 50%;
        }
      }
      &.-sports{
        background-image: url(/kouen/sicc/assets/img/common/icon/run.svg);
      }
      &.-area{
        background-image: url(/kouen/sicc/assets/img/common/icon/chiba.svg);
      }
    }
    &:hover{
      background-color: #f27f05;
    }
  }

  /* list */
  .list-news{
    > ul{
      > li{
        .link{
          display: flex;
          column-gap: 20px;
          padding:8px 0;
          text-decoration: none;
          transition: all .3s;
          @media (max-width: 500px) {
            flex-direction: column;
          }
          .time{
            padding:0 0 0 14px;
            @media (max-width: 500px) {
              padding:0 10px;
            }
          }
          .title{
            padding:0 14px 0 4px ;
            @media (max-width: 500px) {
              padding:0 10px;
            }
          }
          
        }
        &:nth-child(even){
          background-color: #f6f6f6;
        }
        a{
          &.link{
            .title{
              color:var(--color-link);
            }
            &:hover{
              background-color: #EDF8FD;
            }
          }
        }
        span{
          &.link{
            .title{
              color:var(--color-text)
            }
          }
        }
      }
    }
  }
  .list-club{
    counter-reset: item-counter;
    .item{
      counter-increment: item-counter;
      /*box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
      box-shadow: 0 0 0 1px #ddd;*/
      border:1px solid #ddd;
      border-radius:6px;
      padding:8px 12px;
      transition: all .2s;
      height:100%;
      box-sizing: border-box;
      font-size:90%;
      margin:6px 0;
      background-color: white;
      @media (max-width: 500px) {
        padding:6px 10px;
      }
      &:hover{
        transform: scale(1.01);
      }
      a{
        display: block;
        position: relative;
        padding-left:22px;
        &::before {
          content: counter(item-counter) ".";
          position: absolute;
          left: 0;
          font-weight: bold;
        }
      }
      dl{
        display: flex;
        @media (max-width: 500px) {
          flex-direction: column;
        }
        dt{
          font-weight: bold;
          flex:0.7;
        }
        dd{
          color: var(--color-text);
          flex:0.3;
          
        }
      }
    }
  }
  .list-area{
    margin:1em 0 0 0;
    display: flex;
    font-size:90%;
    flex-wrap: wrap;
    .item{
      width:calc( 100% / 8 ) ;
      box-sizing: border-box;
      padding:6px;
      @media (max-width: 834px) {
        width:calc( 100% / 6 ) ;
      }
      @media (max-width: 500px) {
        width:calc( 100% / 3 ) ;
      }
      &.-full{
        width:100%;
        border:1px solid #ccc;
        padding: 8px;
        border-radius: 6px;
        margin:4px;
        > a{
          width:calc( 100% / 8 );
          @media (max-width: 500px) {
            width:calc( 100% / 3 ) ;
          }
        }
        .sub{
          display: flex;
          flex-wrap: wrap;
          margin:10px -5px 0 -5px;
          > *{
            width:calc( 100% / 8 );
            @media (max-width: 834px) {
              width:calc( 100% / 6 ) ;
            }
            @media (max-width: 500px) {
              width:calc( 100% / 3 ) ;
            }
          }
        }
      }
      a{
        border:1px solid var(--color-link);
        text-align: center;
        border-radius: 6px;
        padding: 2px 6px;
        display: block;
      }
    }
  }
  .list-gun{
    margin: 1em 0 0 0;
    dl{
      margin:0;
      display: flex;
      align-items: center;
      border-top:1px solid #eee;
      dt{
        margin-right:20px;
        padding:0 10px;
      }
      dd{
        flex:1;
        .list-area{
          margin:0;
        }
      }
    }
  }

  /* container */
  .container-jspo{
    background-color: #C7151E;
    padding:28px;
    display: flex;
    column-gap: 80px;
    align-items: center;
    @media (max-width: 500px) {
      flex-direction: column;
      row-gap: 30px;
    }
    .banner{
      display: block;
      max-width:250px;
      @media (max-width: 500px) {
        max-width: 100%;
      }
      img{
        display: block;
        width:100%;
      }
    }
    .summary{
      color:white;
      a{
        color:var(--color-yellow)
      }
      dl{
        dt{
          font-weight: bold;
          font-size:120%;
          margin:0 0 0.2em 0;
        }
      }
    }
  }
  /* table */
  .club{
    width:100%;
    border-top:1px solid #ddd;
    border-left:1px solid #ddd;
    td,th{
      padding: 6px;
      border-right:1px solid #ddd;
      border-bottom:1px solid #ddd;
    }
    th{
      background-color: var(--color-bg);
      font-weight: bold;
    }
  }
  .table-grid{
    &.-history{
      tr{
        td,th{
          border-bottom:none;
          &.dashed{
            border-bottom:1px dashed #ccc;
          }
        }
        th{
          text-align: center;
          font-weight: bold;
          background-color: var(--color-bg);
          border-bottom:1px solid #ddd;
        }
        td{
          &.month{
            text-align: right;
          }
        }
        &.clr{
         td,th{
          background-color: #efefef;
         }
        }
      }
    }
    &.-searchresult{
      font-size:85%;
      @media (max-width: 834px) {
        min-width:1000px;
      }
      td,th{
        padding: 3px 6px;
        @media (max-width: 834px) {
          min-width:1000px;
        }
        @media (max-width: 500px) {
          min-width:0;
        }
      }
      th{
        text-align: center;
        font-weight: bold;
        white-space: nowrap;
        font-size:90%;
        padding: 3px 3px;
      }
      td{
        &.td_bariafree,
        &.td_toilet,
        &.td_kurumaisu,
        &.td_shougai{
          text-align: center;
          vertical-align: middle;
        }
        &.td_shichouson{
          white-space: nowrap;
        }
      }
      .btn-basic.-window:before{
        margin-right:4px;
      }
    }
  }

  /* image */
  .image-full{
    margin:1em 0 0 0;
    img{
      display: block;
      width:100%;
    }
  }
  table{
    .btn-basic{
      padding: 4px 8px;
    }
  }
}


.container-ccc{
  display: flex;
  align-items: center;
  text-align: left;
  line-height: 1.6;
  dt{
    max-width: 80px;
    margin-right:30px;
    @media (max-width: 500px) {
      max-width: 50px;
    }
    img{
      display: block;
      width:100%;
    };
  }
  dd{
    font-weight: bold;
    font-size:110%;
  }
}