/* ==================================================
   全ページ共通設定
   ================================================== */
body {
    background-color: #186A49; /* 統一されたグリーン */
    margin: 0;
    padding: 0;
    color: white;
    font-family: 'Futura', sans-serif;
    display: flex;         /* フレックスボックスを使う宣言 */
    flex-direction: column;/* 中身を縦に並べる（ヘッダー、メイン、コピーライト） */
    justify-content: center; /* 【上下】の真ん中 */
    align-items: center;    /* 【左右】の真ん中 */
    min-height: 100vh;      /* 画面の高さ100%分を「最低限の高さ」として確保する */
}
.logo-link {
    text-decoration: none;
    color: white;
    display: block;
    margin: 5px 0;
}

.logo {
    font-weight: bold;
    font-size: 5vw;
    margin: 0;
}

.copyright {
    /* position: absolute; ← これを消すかコメントアウト！ */
    display: block;      /* ブロック要素として扱う */
    margin-top: 20px;    /* 背景画像との間に20pxの隙間を作る */
    text-align: center;  /* 文字を中央に */
    width: 100%;         /* 幅いっぱい */
    
    /* フォントの設定 */
    font-family: 'Futura', sans-serif;
    font-weight: bold;   /* BOLDにする */
    font-size: 0.8rem;
    color: white;
}

.fa-instagram {
  color: white; /* インスタのブランドカラーに近いピンク */
  font-size: 24px; /* アイコンのサイズ */
  vertical-align: middle;
}

footer {
    display: flex;          /* 中身を横並びにする */
    flex-direction: column; /* アイコンをコピーライトの下に配置 */
    align-items: center;    /* アイコンを左右の中央に寄せる */
    gap: 10px;              /* コピーライトとアイコンの隙間 */
    padding: 20px 0;        /* 上下の余白 */
}

/* アイコンを大きくしたり、色を変えたい場合 */
footer .fa-brands {
    font-size: 1.5rem;      /* アイコンの大きさ */
    color: #333;           /* アイコンの色 */
}

/* ==================================================
   HOME（トップページ）用
   ================================================== */
.room-container {
    width: 90%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 背景を表示する親の箱 */
/* 親の箱（背景） */
.room-box {
    position: relative; /* 子要素を絶対配置する基準 */
    width: 80vw;        /* 画面幅の80% */
    max-width: 600px;   /* 大きくなりすぎないように制限 */
    aspect-ratio: 1 / 1; /* 正方形を維持 */
    margin: 0 auto;     /* 中央寄せ */
    
    background-image: url('images/room-bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* リンク付き画像（item）の設定 */
.item {
    position: absolute; /* 親（room-box）に対して自由に配置 */
    display: block;
}

/* 中身の画像を枠にフィットさせる */
.item img {
    width: 100%;
    height: auto;
    display: block;
}

/* 各画像の位置（0〜100%で指定） */
/* 各リンクの位置を「指定した配置」に合わせました */
/* 個別のサイズ指定（％で指定すると親の大きさに合わせて自動計算されます） */
.gallery { top: 5%; left: 8%; width:50%}
.contact { top: 25%; right: 2%;  width:28%}
.about { top: 29%; left: 26%; width:48% }
.onlineshop { bottom: 15%; left: 3%; width:25% }
.fortune { bottom: 10%; right: 5%;  width:25%}


/* ==================================================
   ABOUT / CONTACT 用
   ================================================== */
.about-container {
    width: 80%;
    max-width: 600px;
    text-align: center;
    padding-bottom: 50px;
}

.contact2 {width:100% }
.profile {width:100% }

.profile-box, .contact-box {
    width: 200px;
    height: 200px;
    background-color: white;
    margin: 20px auto;
    border-radius: 10px;
    overflow: hidden;
}



.profile-text { text-align: left; margin-top: 30px; }
.email-address a { color: white; text-decoration: underline; }

/* ==================================================
   GALLERY 用
   ================================================== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 20px;
    width: 80vw;
    max-width: 600px;
}

.filter-buttons { margin-bottom: 20px; }
.filter-btn {
    border: 2px solid white;
    background: transparent;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    cursor: pointer;
    margin: 5px;
}

/* ==================================================
   FORTUNE 用
   ================================================== */
#fortune-box {
    width: 300px;  /* ここを好きなサイズに固定 */
    height: 300px;
    margin: 0 auto;
    overflow: hidden; /* はみ出し防止 */
}

#fortune-box img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* アスペクト比を保って枠に収める */
}