@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
* {
    margin: 0;
}

:root{
    --black:#232323;
    --white:#d6d0ca;
    --green:#547443;
    --camel:#a77f58;
    --dark-brown:#433309;
}

body{
    width: 100%;
}

.container {
    overflow: hidden;
    z-index: -10;
    width: 100%;
    position: relative;
    display: inline-block; /* 画像の横幅に合わせる（重要！） */
}

/* 一番下の画像：あえて position: absolute を使わない */
.back {
    display: block; /* 画像の下にできる謎の隙間を消す */
    width: 100%;    /* コンテナの幅に合わせる */
    height: auto;
    z-index: 1;
}

/* 中間と前面：これらは absolute で自由に配置 */
.front {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.middle-text {
    z-index: 2;
    width: 100%;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%) scaleY(2);
    font-family: "Playfair Display", serif;
    font-weight: 900;
    font-size: 30cqw;
    letter-spacing: 0.1em;
    text-align: center;
    color: var(--camel)
}

.front { z-index: 3; }

main{
    margin-top: -21vw;
    background-color: var(--black);
    color: var(--white);
}

article{
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

section{
    display: flex;
}

article h1{
    font-family: "Playfair Display", serif;
    font-weight: 900;
    font-size: 6.5cqi;
}

.thumb{
    width: 50%;
}

.disc{
    container-type: inline-size;
    width: 50%;
}

.disc h2{
    font-family: "Playfair Display", serif;
    font-weight: 900;
    font-size: 10cqi;
    writing-mode: vertical-rl;
}

.grid-imgs{
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas: 
    "item-1 item-2"
    "item-1 item-3"
    "item-4 item-4";
}

.item-1{
    aspect-ratio: 1 / 2;
    background-image: url(https://raw.githubusercontent.com/haha794uguisu/site_one/refs/heads/main/img/joubitaki.jpg);
    background-size:  360% auto;
    background-position: 39% 100%;
}

.item-2{
    aspect-ratio: 1 / 1;
    background-image: url(https://raw.githubusercontent.com/haha794uguisu/site_one/refs/heads/main/img/misago.jpg);
    background-size:  500% auto;
    background-position: 50% 35%;
}

.item-3{
    aspect-ratio: 1 / 1;
    background-image: url(https://raw.githubusercontent.com/haha794uguisu/site_one/refs/heads/main/img/hoshigoi.jpg);
    background-size:  240% auto;
    background-position: 70% 79%;
}

.item-4{
    aspect-ratio: 2 / 1;
    background-image: url(https://raw.githubusercontent.com/haha794uguisu/site_one/refs/heads/main/img/kawasemi_2.jpg);
    background-size:  280% auto;
    background-position: 50% 49%;
}

.grid-boxes{
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas: 
    "box-1 box-2"
    "box-1 box-3"
    "box-4 box-4";
}

.box-1{
    aspect-ratio: 1 / 2;
}

.box-2{
    aspect-ratio: 1 / 1;
}

.box-3{
    aspect-ratio: 1 / 1;
}

.box-4{
    aspect-ratio: 2 / 1;
}

.center-ripple-btn {
    font-family: "Playfair Display", serif;
    font-weight: 600;
    letter-spacing: 0.1em;
    position: relative;
    width: 80%;
    height: 50%;
    left: 10%;
    top: 50%;
    font-size: 6.5cqi;
    color: var(--white);
    background-color: var(--black00);
    border: 0.1cqi solid var(--white);
    cursor: pointer;
    overflow: hidden; /* はみ出た色を隠す */
    transition: color 1s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

/* 広がる背景色 */
.center-ripple-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px; /* ボタンより大きく */
    height: 300px;
    background-color: var(--white); /* 変わる後の色 */
    border-radius: 50%; /* 円形にする */
    transform: translate(-50%, -50%) scale(0); /* 真ん中に配置してサイズ0 */
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

/* ホバー時の文字色と背景の拡大 */
.center-ripple-btn:hover {
    color: var(--black);
}

.center-ripple-btn:hover::before {
    transform: translate(-50%, -50%) scale(1.5); /* 円を大きくして塗りつぶす */
}