@charset "UTF-8";

body{
    background-color: rgba(248, 235, 242, 0.6);
    margin: 0 auto;
    max-width: 100%;
}

.header{
    display: flex;
    position: fixed;
    z-index: 1;
    background-color: rgba(248, 235, 242);
    justify-content: space-between;
    left: 0;
    right: 0;
}

h1{
    color: #fff;
    font-size: 20px;
    padding-left: 20px;
}

nav ul{
    display: flex;
}

nav ul li{
    list-style-type: none;
    padding-right: 20px;
    padding-top: 10px;
}

nav ul li a{
    text-decoration: none;
    color: #dfafcc;
    font-weight: bold;
}

nav ul li a:hover{
    color: rgb(168, 157, 143);
}

h2{
    text-align: center;
    font-size: 20px;
    color: #b5ae99;
}

.text{
    text-align: center;
    color: #a2937f;
    font-size: 20px;
    font-weight: bold;
}

#profile{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 16px;
    place-items: center;
}

#profile img{
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
}

.name{
    font-weight: bold;
    font-size: 20px;
    border-bottom: #dfafcc solid 1px;
}

#profile p{
    color: #807b6b;
}

#design{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
    place-items: center;
    margin: 30px;
}

#design img{
width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
}

#design p{
    color: #807b6b;
}

.bold{
    font-weight: bold;
}

.memo{
    border-radius: 20px;
    background-color: rgba(185, 107, 152, 0.5);
    color: #fff;
    padding: 3px;
}

#contact{
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
}

#contact a{
      display: inline-block; /* 枠線を正しく表示するために必要 */
  padding: 10px 30px;    /* リンク文字の周りの余白 */
  border: 1px solid #d7b7c5; /* 枠線の太さ、種類、色 */
  border-radius: 25px;   /* 角の丸み（高さを半分以上にすると円形に） */
  text-decoration: none; /* 下線を消す */
  color: #b0ab95;           /* 文字色 */
}

#contact a:hover{
    color: #817d6c;
}

footer{
    background-color: #b5ae99;
    color: #fff;
    text-align: center;
}

.effect-fade{
    opacity: 0;
    transform: translate(0,100px);
    transition: all 2000ms;
}

.effect-scroll{
    opacity: 1;
    transform: translate(0,0);
}

/* ▼ グリッド */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* ▼ カード */
.card {
  position: relative;
  overflow: hidden;
  background-color: rgba(236, 216, 229, 0.5)
}

/* ▼ 画像 */
.card img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
}

/* ▼ オーバーレイ（初期は非表示） */
.overlay {
  position: absolute;
  inset: 0; /* top:0 right:0 bottom:0 left:0 と同じ */

  background: rgba(0, 0, 0, 0.5);
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transition: opacity 0.3s;
}

/* ▼ hoverで表示 */
.card:hover .overlay {
  opacity: 1;
}