@charset "utf-8";
	
:root{
}

#preamble{/*2カラム*/
  main:has(> div > nav) {
    > div{
      &:nth-of-type(1){
        nav{
          > ul{
            > li{
              > a{
                font-weight: 600;
              }
            }
          }
        }
      }
    }
  }
}

#gallery{/*新築リスト*/
  > div{
    display:grid;
    grid-template-columns: repeat(auto-fill,minmax(min(230px,100%),1fr));
    gap:20px;
    a{
      border-radius: 10px;
      color:rgb(var(--baceFontColor));
      border:1px solid #eee;
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 2;
      gap:10px;
      overflow: hidden;
      padding-bottom:15px;
      figure{
        span{
          display:block;
          aspect-ratio: 3 / 2;
          position:relative;
          img{
            min-width:100%;
						min-height:100%;
						object-fit: cover;
						position: absolute;
						top: 50%;
						transform: translate(-50%, -50%);
          }
        }
        figcaption{
          display:inline-block;
          text-align: left;
          margin:20px 15px 0 15px;
          font-weight: 600;
        }
      }
      > * + *{
        margin-left:15px;
        margin-right:15px;
      }
      p{
        text-align: left;
        font-size: .9rem;
      }
      &:hover{
        figure{
          span{
            img{
              opacity: .75;
            }
          }
        }
      }
    }
  }
}

h1#sintiku_title{
  text-align: left;
  border-bottom: 1px dashed #9A8249;
  padding-bottom:5px;
  span{
    display:inline-block;
    background:#735135;
    color:white;
    padding:.2em 10px;
    font-size: .9rem;
    border-radius: 5px;
  }
  i{
    display:inline-block;
    padding:.3em 10px;
    color: #735135;
    font-size: 1.3rem;
    font-weight: 600;
  }
}
div#sintiku_gallery{
  margin:30px auto 0 auto;
  > figure{
    border-radius: 10px;
    overflow: hidden;
    display:inline-block;
  }
  ul{
    display:grid;
    grid-template-columns: repeat(auto-fill,minmax(120px,1fr));
    gap:10px;
    margin:30px auto 0 auto;
    li{
      a{
        display:block;
        aspect-ratio: 3 / 2;
        position:relative;
        overflow: hidden;
        border-radius: 5px;
        img{
          min-width:100%;
          min-height:100%;
          object-fit: cover;
          position: absolute;
          top: 50%;
          transform: translate(-50%, -50%);
        }
        &:hover{
          opacity: .75;
        }
      }
    }
  }
}


p#comment {
  display: none;
}