@charset "utf-8";

#contents_main{
  width:auto;
}

div#yoyaku_fuyou{/*11/1より予約不要*/
  margin:.5em auto 0 auto;
  border:2px solid red;
  padding:.7em;
  text-align: left;
  background:white;
  h4{
    font-weight: 500;
    font-size: 1.1em;
    color:red;
  }
  p{
    margin:.3em auto 0 auto;
  }
}

#maps{
  margin:2rem auto 0 auto;
  img{
    border:1px solid silver;
    border-radius: .7rem;
    overflow: hidden;
  }
}

#kids_top{
  > div{
    display:grid;
    grid-template-columns: repeat(2,1fr);
    gap:30px;
    figure{
      a{
        display:block;
        border-radius: 10px;
        overflow: hidden;
      }
      figcaption{
        margin:.3em auto 0 auto;
      }
    }
    > div{
      P{
        text-align: left;
      }
      aside{
        margin:20px auto 0 auto;
        padding:20px;
        border:2px solid red;
        background:white;
        border-radius: 10px;
        div{
          display:flex;
          justify-content: start;
          gap:.3em 1em;
          flex-wrap:wrap;
          a{
            display:block;
            padding:.3em .7em;
            background:red;
            color:white;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 10px;
            svg{
              fill:white;
              margin:0 .3em 0 0;
            }
            &:nth-of-type(1){
              background:#ff7315;
            }
            &:nth-of-type(3){
              background:#73bb15;
            }
            &:hover{
              opacity: .75;
            }
          }
        }
        > p{
          margin:10px auto 0 auto;
        }
      }
    }
  }
  @media (max-width: 768px) {
    > div{
      display:block;
      > div{
        margin-top:30px;
      }
    }
  }
}

#riyounituite{/*夏休み等長期休暇及び日曜祝祭日の利用について*/
  margin:30px auto 0 auto;
  border:1px solid silver;
  padding:30px;
  background:white;
  width:min(960px,100%);
  h3{
    font-size: 1.3rem;
    font-weight: 600;
    color:red;
  }
  > * + *{
    margin-top:30px;
  }
  p{
    text-align: left;
    span{
      color:red;
      text-decoration: underline;
      text-underline-offset: .2em;
    }
  }
}

#com{
  width:760px;
  max-width:calc(100% - 42px);
  padding:20px;
  border:1px solid rgb(var(--mainColor));
  border-radius: 10px;
  
  margin:0 auto;
  background:white;
  > p{
    text-align: left;
  }
  > div{
    display:grid;
    grid-template-columns: 200px 1fr;
    gap:20px;
    align-items: center;

    border-top:1px dotted silver;
    margin:30px auto 0 auto;
    padding:30px 0 0 0;
    > p{
      a{
        display:block;
        background:red;
        border-radius: 10px;
        color:white;
        font-weight: 600;
        font-size: 1.2rem;
        padding:20px 0;
        &:hover{
          background:#c40000;
        }
      }
      &:nth-of-type(2){
        font-size: 1rem;
        text-align: left;
        line-height: 1.5em;;
      }
    }
  }
  aside{
    margin:20px auto 0 auto;
    a{
      display:inline-block;
      font-size: 1.2rem;
      background:#ff812d;
      padding:.5em .5em;
      color:white;
      border-radius: 10px;
      &:hover{
        background:#ff7315;
      }
    }
  }
  @media (max-width: 768px) {
    width:auto;
    max-width:100%;
    
  }
}


#k_gaiyou{
  > ul{
    border-bottom:1px solid rgb(var(--mainColor));
    > li{
      text-align: left;
      padding:20px;
      border-top:1px solid rgb(var(--mainColor));
      h3{
        font-size: 1.2em;
        font-weight: 500;
        color:crimson;
      }
      h3 + * {
        margin-top:5px;
      }
      > ul{
        > li{
          margin:0 0 0 2em;
          list-style:circle;
        }
      }
      aside{
        font-size: .9em;
        color:red;
      }
    }
  }
}