@charset "utf-8";

/* override chiba-machidukuri base module.css & add new */
.side-enable{
  p{
    margin-bottom:1em;
  }
  .p-summary{
    font-size:120%;
  }
  /* heading */
  .heading-bar{
    background-color: var(--color-waterblue);
    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;
      }
    }
  }
  table caption,
  .heading-caption{
    text-align: left;
    padding: 4px 12px;
    background-color:#333 ;
    font-weight: bold;;
    color:white;
    font-size:90%;
    max-width:160px;
    text-align: center;
  }
  table caption{
    display: table-caption;
  }
  .heading-caption{
    display: block;
  }
  .heading-table{
/*    background-color: var(--color-waterblue);*/
    color:var(--color-waterblue);
    padding: 4px 0;
    font-weight: bold;
    border-bottom:1px solid var(--color-waterblue);;
    font-size:1.8rem;
    margin: 1.8em 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{
    gap:40px;
    @media (max-width: 830px) {
      gap:34px;
    }
    @media (max-width: 500px) {
      gap:20px;
    }
  }

  /* 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-vertical{
    > *{
      flex:1;
    }
    .image{
      margin:0 0 20px 0;
      @media (max-width: 500px) {
        margin-bottom: 14px;
      }
      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 0 0;
        line-height: 1.6;
      }
      .btn-basic{
        /*display: block;
        width:100%;
        box-sizing: border-box;
        text-align: center;*/
      }
    }
    &.-min{
      .summary{
        .title{
          font-size:1.8rem;
        }
        .detail{
          font-size:90%;
        }
      }
    }
  }
  .card-backnumber{
    display: flex;
    width:100%;
    column-gap: 40px;
    & + .card-backnumber{
      margin-top: 50px;
      /*border-top:1px solid #ddd;
      padding-top: 40px;*/
    }
    .thumb{
      min-width:280px;
      img{
        display: block;
        width:100%;
      }
    }
    .summary{
      flex:1;
      .title{
        font-weight: bold;
        font-size: 110%;
        margin:0 0 1em 0;
        background-color: #efefef;
        padding: 4px 12px;
      }
    }
  }
  /* 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;
    }
  }
  .btn-pdf{
    border-radius: 8px;
    
    color:white;
    display: inline-block;
    padding:4px 18px 4px 40px;
    text-decoration: none;
    transition: all .3s;
    border:none;
    white-space: nowrap;
    background: url(/jigyo/assets/img/common/icon/pdf.svg) no-repeat;
    background-color: var(--color-yellow);
    background-size: auto 50% ;
    background-position: top 50% left 12px;
    @media (max-width: 500px) {
      max-width:90%;
      margin:0 auto;
    }
  }

  /* 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;
        }
      }
    }
  }
  .list-magazine{
    & > li{
      padding:6px 12px;
      &:nth-child(odd){
        background-color: #f5f5f5;
      }
    }
  }
  .list-pdf{
    & > li{
      background: url(/jigyo/assets/img/common/icon/pdf.svg) no-repeat;
      background-size: auto 50% ;
      background-position: top 50% left 12px;
      &:nth-child(odd){
        background-color: #f5f5f5;
      }
      a{
        display: block;
        padding:6px 12px 6px 44px;
      }
      dl{
        display: flex;
        dt{
          margin-right:10px;
        }
      }
    }
  }
  .list-nolink{
    & > li{
      background-size: auto 50% ;
      background-position: top 50% left 12px;
      &:nth-child(odd){
        background-color: #f5f5f5;
      }
      a{
        display: block;
        padding:6px 12px 6px 44px;
      }
      dl{
        display: flex;
        dt{
          margin-right:10px;
        }
      }
    }
  }

  /* table */

  .table-line{
    font-size:100%;
    &.-research{
      @media (max-width: 500px) {
        display: block;
        tr,td,th{
          display: block;
        }
        th{
          border-bottom:none;
        }
        td{
          padding-bottom:20px;
        }
      }
    }
  }
  .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;
    }
  }
}
  .table-mokuji{
    margin:0;
    border-top:1px solid #333;
    width:100%;
    tr{
      &.all{
    /*            background-color:#f9f9f9;*/
    th,td{
      padding-top:12px;
      padding-bottom: 12px;
    /*              font-size:110%;*/
    font-weight: bold;
    border-color:#333;
    }
    }
    td,th{
      vertical-align: middle;
      border-bottom:1px solid #ddd;
      padding: 6px 6px 6px 6px ;
      &.pdf{
        a{
          border: 1px solid var(--color-link);
          display: inline-block;
          padding: 2px 8px;
          line-height: 1.4;
          border-radius: 4px;
          background-color: white;
        }
      }
    }
    th{
      width:80%;
    }
    }

    }


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

.container-info{
  background:  var(--color-green);
  padding: 30px 30px;
  border-radius: 12px;
  font-weight: bold;
  dt{
    background-color: white;
    color:var(--color-green);
    padding: 4px 8px;
    margin-bottom:10px;
  }
  dd{
    padding: 0px 0px ;
    color: white;
    a{
      color:yellow;
    }
  }
}
.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%;
  }
}