@charset "utf-8";

@import url("../style/variables.css");/*変数定義*/
	
:root{
}

#map_img{
  figure{
    border-radius: 10px;
    overflow: hidden;
  }
  p{
    margin:.5em auto 0 auto;
    text-align: left;
    font-size: .9rem;
  }
}

#sougou{
  display:grid;
  grid-template-columns: 2fr 3fr;
  gap:20px;
  margin:30px auto 0 auto;
  figure{
    img{
      border-radius: 10px;
    }
    figcaption{
      margin:10px auto 0 auto;
      font-weight: 600;
    }
  }
  > div{
    h3{
      font-size: 1.3rem;
      color:red;
      font-weight: 600;
      inline-size: fit-content;
      margin-inline: auto;
      text-align: left;
    }
    > * + *{
      margin:.7em auto 0 auto;
    }
    p{
      text-align: left;
    }
    aside{
      font-size: .9rem;
      text-align: left;
    }
  }
  @container (max-width: 735px) {
    display:block;
    figure{
      width:min(500px,100%);
      margin:0 auto;
    }
    > div{
      margin:20px auto 0 auto;
    }
  }
}

#gaiyou{
  margin:30px auto 0 auto;
  padding:30px;
  border:2px solid rgb(var(--mainColor));
  border-radius: 10px;
  > h3{
    img{
      width:min(250px,100%);
    }
  }
  dl{
    margin:20px auto 0 auto;
    display:grid;
    grid-template-columns: 10em 1fr;
    border-bottom:1px solid silver;
    > *{
      padding:10px;
      border-top:1px solid silver;
    }
    dt{

    }
    dd{
      text-align: left;
      svg{
        height:.8em;
        width:.8em;
      }
      span#tel{
        font-size: 1.1em;
        font-weight: 500;
        
      }
    }
  }
  @container (max-width: 735px) {
    padding:20px;
    dl{
      display:block;
      
      > *{
        padding:0;
        border-top:none;
      }
      dt{
        padding:.5em .5em 0 .5em;
        text-align: left;
        border-top:1px solid silver;
        font-weight: 500;
      }
      dd{
        padding:0 .5em .5em .5em;
      }
    }
  }
}

#pet{
  text-align: left;
  margin:30px auto 0 auto;
  padding:20px;
  border:2px solid #1b5cbe;;
  color:#1b5cbe;
  border-radius: 10px;
  h3{
    font-size: 1.2em;
    font-weight: 500;
    span{
      font-size: 1.2em;
      text-decoration: underline;
      text-underline-offset: .2em;
      text-decoration-thickness: 1px;
    }
  }
  p{
    margin:.2em auto 0 auto;
  }
}

#sisetu_list{
  > div{
    display:grid;
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
    gap:20px;
    article{
      border:3px solid silver;
      border-radius: 10px;
      background:#ffffe3;
      padding-bottom:20px;
      overflow: hidden;
      > * + *{
        margin:10px 20px 0 20px;
      }
      figure{
        aspect-ratio: 4 / 3;
        position:relative;
        overflow: hidden;
        img{
          min-width:100%;
					min-height:100%;
					object-fit: cover;
					position: absolute;
					top: 50%;
					transform: translate(-50%, -50%);
        }
      }
      h3{
        font-size: 1.2rem;
        font-weight: 600;
      }
      ul{
        display:flex;
        flex-wrap:wrap;
        justify-content: start;
        gap:.3em 2em;
        li{
          a{
            position:relative;
            display:block;
            text-align: left;
            color:rgb(var(--baceFontColor));
            font-weight: 600;
            span{
              display:inline-block;
              margin:0 .3em 0 0;
              background:red;
              color:white;
              font-size: .8rem;
              font-weight: 600;
              padding:0 .5em;
              border-radius: 3px;
              font-weight: 500;
            }
            &:hover{
              color:red;
              text-decoration: underline;
            }
          }
        }
      }
      &:nth-of-type(1){
        border:3px solid red;
        h3{
          color:red;
        }
      }
      &:nth-of-type(2){
        border:3px solid green;
        h3{
          color:green;
        }
      }
      &:nth-of-type(3){
        border:3px solid #0094d2;
        h3{
          color:#0094d2;
        }
      }
      &:nth-of-type(4){
        border:3px solid #6f2fd9;
        h3{
          color:#6f2fd9;
        }
      }
      &:nth-of-type(5){
        border:3px solid orange;
        h3{
          color:orangered;
        }
      }
    }
    figure{
      align-self: center;
      figcaption{
        margin:.5em auto 0 auto;
        font-size: .9rem;
        span{
          font-size: 1.1rem;
          font-weight: 600;
          display:block;
        }
      }
    }
  }
}