/* ベースリセットとフォント */
body {
    margin: 0;
    font-family: sans-serif; /* 適切なフォントを設定 */
    background-color: #f7f3e8; /* 画面下部の薄いクリーム色 */
}

/* 画面全体 */
.app-screen {
    max-width: 450px; /* スマホ画面を想定した最大幅 */
    margin: 0 auto;
    background-color: #f7f3e8;
    min-height: 100vh;
    position: relative;
}

.hero {
  position: relative; /* 基準を作る */
  z-index: 9999;   /* ← これ大事！基準にする */
}

.header-img {
  width: 100%;    /* 横幅を画面いっぱいに */
  height: auto;  
  position: relative; /* 基準を作る */
  z-index: 100;   /* 縦横比を保ったまま縮小／拡大 */
}
.overlay-img {
  position: absolute;  /* 親を基準に配置される */
  top: 20px;           /* 上からの距離 */
  right: 12px;         /* 右からの距離 */
  width: 100px;        /* 画像サイズ（お好みで） */
  height: auto;
  z-index: 101;
}

.overlay-img3 {
  position: absolute;  /* 親を基準に配置される */
  top: 70px;           /* 上からの距離 */
  right: 12px;         /* 右からの距離 */
  width: 55px;        /* 画像サイズ（お好みで） */
  height: auto;
  z-index: 101;
}

.overlay-img2 {
  position: absolute;  /* 親を基準に配置される */
  top: 30px;           /* 上からの距離 */
  left: 12px;         /* 右からの距離 */
  width: 20px;        /* 画像サイズ（お好みで） */
  height: auto;
  z-index: 101;
}

.aikonn-box {
  position: relative; /* ← 子要素の絶対配置の基準にする！ */
  display: inline-block; /* ← 画像サイズに合わせる */
}

.aikonn-img {
margin-top: -1000px;
margin-bottom: 70px; 
width: 250px;  /* 横幅を200pxにする */
  height: auto;
    
}

.aikonn-text {
  position: absolute;
  top: -20%;        /* 縦位置（中央） */
  left: 50%;       /* 横位置（中央） */
  transform: translate(-50%, -50%); /* 中央にぴったり */
  color: rgb(63, 58, 58);     /* 文字の色 */
  font-size: 15px;  /* 文字サイズ */
  font-weight:  600;
  z-index: 10; /* 念のため最前面に */
  font-family: "M PLUS Rounded 1c", sans-serif;
}

/* 2. プロフィールエリア */
.profile-area {
    position: relative;
    z-index: 10;
    margin-top: -40px; /* ヘッダーとのわずかな重なりを調整 */
}

.profile-background {
    height: 500px;
    /* 背景画像: プリンとオムライスの画像をここで設定 */
    background-image: url('satenn_purin.png'); /* 大きなプリンの画像 */
    background-size: cover;
    background-position: center bottom;
    position: relative;
    margin-top: -80px;
    
}

.profile-content {
    text-align: center;
    margin-top: -100px; /* プロフィール画像を上に浮かせる */
    position: relative;
}


.profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.backwindow-maru {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* 3. コンテンツグリッド */
.content-grid-area {
    padding: 20px 10px;
    position: relative;
    margin-top: -430px;/* FABボタンのためのスペース */
}


.content-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    padding-bottom: 80px; 
}




.grid-item {
    aspect-ratio: 1 / 1; /* 正方形 */
    background-color: #e6e0d2; /* プレースホルダーの薄い灰色 */
    border-radius: 5px;
    
}

.grid-item {
  aspect-ratio: 1 / 1;
  border-radius: 5px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.bg1 { background-image: url("satenn_one.jpg"); }
.bg2 { background-image: url("satenn_two.jpg"); }
.bg3 { background-image: url("satenn_three.jpg"); }
.bg4 { background-image: url("satenn_four.jpg"); }
.bg5 { background-image: url("satenn_five.jpg"); }
.bg6 { background-image: url("satenn_six.jpg"); }
.bg7 { background-image: url("satenn_seven.jpg"); }
.bg8 { background-image: url("satenn_eight.jpg"); }
.bg9 { background-image: url("satenn_nine.jpg"); }
.bg10 { background-image: url("satenn_ten.jpg"); }
.bg11 { background-image: url("satenn_eleven.jpg"); }
.bg12 { background-image: url("satenn_twenty.jpg"); }

.flower {
    position: absolute;
    top: -65px;
    left: 0;
    width: 100%;
}

/* 4. FABボタン (右下の新規投稿ボタン) */
.fab-button {
    position: fixed;
    bottom: 100px;
    right: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #00bcd4; /* 水色 */
    color: white;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 30; /* 最前面に */
}

.fab-icon {
  width: 75%;  /* ボタンの60%サイズに縮小 */
  height: auto;
}