/* ==================================
   CSSリセット（スタイルの初期化）
   ============================================= */
/* 1. ボックスモデルの定義（サイズ計算を分かりやすくする） */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 2. ブラウザ独自の余白をゼロにする */
* {
    margin: 0;
    padding: 0;
}

/* 3. フォントを滑らかにし、高さのズレを防ぐ */
html {
    -webkit-text-size-adjust: 100%; /* iOSでの文字サイズ自動調整を防止 */
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased; /* 文字を綺麗に見せる */
    min-height: 100vh;
}

/* 4. 画像や動画が親要素からはみ出ないようにする */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

/* 5. フォーム要素のフォント継承 */
input, button, textarea, select {
    font: inherit;
}

/* 6. リストのポッチを消す（メニュー等でよく使うため） */
ul, ol {
    list-style: none;
}

/* 7. リンクの下線を消して色を継承する */
a {
    text-decoration: none;
    color: inherit;
}

/* =============================================
   ここから下に自分のスタイルを書いていく
   ============================================= */

body {
    font-family: "Kiwi Maru", serif;
    color: #555; 
}

/* 特定の見出しだけ別のフォントにしたい場合 */
h1 {
    font-family: "Dancing Script", cursive;
    font-size: 2rem; /* 文字の大きさ */
    color: #595959; /* タイトルだけピンクにするなど */
}

 .frame-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.frame-content {
    /* もこもこ画像を背景に設定 */
    background-image: url('images/waku.png');
    background-repeat: no-repeat;
    background-size: 100% 100%; /* これで中身の高さに画像が強制的に合わさります */
    
    width: 92%;           /* スマホでの横幅（少し余裕を持たせる） */
    max-width: 800px;     /* PCでの横幅 */
    margin: 20px auto;    /* 上下に余白 */
    padding: 60px 25px;   /* 重要：もこもこの端っこに文字がいかないよう内側の余白 */
    
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box; /* paddingを含めたサイズ計算にする */
}

/* 作品リストの絶対配置（absolute）を解除 */
.content-section {
    width: 100%;
    position: static;     /* 重なりではなく、自然に下へ伸びるように */
    margin-top: 20px;
}


/* お好みのh1サイズ */
.frame-content h1 {
    font-family: "Dancing Script", cursive;
    font-size: clamp(2rem, 8vw, 4rem); 
    margin-bottom: 30px; /* リストとの間隔 */
    text-align: center;
}

/* リスト全体を囲む箱 */
.content-section {
    width: 80%;           /* もこもこ内の白い部分に収まる幅 */
    max-width: 500px;     /* 横に広がりすぎないように制限（画像のようなスッキリ感） */
    margin: 0 auto;       /* 【重要】これで「もこもこの中央」に配置 */
    text-align: left;     /* 中身の文字は左寄せ */
    
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 中身の要素を左に寄せる */
    padding-left: 5%;     /* 画像のように少し左に余裕を持たせるなら調整 */
}

/* 作品ごとのまとまり */
.work-item {
    margin-bottom: 30px;  /* 作品ごとの間隔 */
    width: 100%;
}

/* タイトルと対応範囲の横並び */
.item-header {
    display: flex;
    align-items: baseline; /* 文字の高さ（底辺）を揃える */
    gap: 10px;             /* 作品名と説明の間のスキマ */
    margin-bottom: 5px;    /* 下のURLとの距離 */
}

.sakuhinn {
    font-size: 1.4rem;
    margin: 0;
    white-space: nowrap;   /* 改行させない */
}

.description {
    font-size: 0.9rem;
    color: #333;
    margin: 0;
}

.content-section a {
    color: #333;           /* 画像に合わせて黒系に */
    text-decoration: none;
    font-size: 0.9rem;
    text-decoration: underline;
    transition: 0.3s;
}

.content-section a:hover {
    color: #2980b9;          /* ホバー時に色を変える */
    opacity: 0.7;            /* 少し透明にする */
    text-decoration: none;   /* 下線を消す、などの変化をつける */
}

/* クリックできることを伝えるためにマウスを指の形に */
.zoom-img {
    cursor: pointer;
    transition: 0.3s;
    width: 25%;
    height: auto;
     /* 画像のサイズを調整（必要に応じて変更） */
}
.zoom-img:hover {
    opacity: 0.8;
}

/* 拡大表示用の外枠（モーダル） */
.modal {
    display: none; /* 最初は隠す */
    position: fixed;
    z-index: 1000; /* 一番手前に */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8); /* 背景を暗く */
    align-items: center;
    justify-content: center;
}

/* 拡大された画像本体 */
.modal-content {
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    animation: zoom 0.3s; /* ふわっと出す演出 */
}

@keyframes zoom {
    from {transform: scale(0.7); opacity: 0;}
    to {transform: scale(1); opacity: 1;}
}

/* 閉じるボタン */
.close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}