* {
    margin: 0;
    padding: 0;
    vertical-align: top;
    text-align: center;
    font-family:  'Tunga','Times New Roman', serif;  /* フォントの種類指定 */
  }

.page-header {
    background-image: url(../images/header_s.png);
    /* contain ではなく cover にすることで、枠内を隙間なく埋めます */
    background-size: cover;
    /* 上端を基準に配置することで、見切れを最小限にします */
    background-position: center top;
    background-repeat: no-repeat;
    
    /* 比率を維持する設定（現状のまま） */
    aspect-ratio: 1200 / 236; 
    width: 100%;
    display: block;
    
    /* 【重要】念のため、要素自体の余白を完全にゼロにします */
    border: none;
    outline: none;
    border-bottom: 7px solid;
    border-image: linear-gradient(to right,	#CD4187, white) 1;
}

#home {
    margin-top: -2px; /* 隙間対策 */
    padding-top: 30px;
    min-height: 100vh;
    /* 【デザイン解説】
       1. 全体を和紙のような少し黄みのある白(#fcfaf2)に。
       2. 右上と左下に、ヘッダーの花をイメージした「濃いめの赤」と「ピンク」の滲みを配置。
       3. 複数のグラデーションを重ねることで、単調ではない「和の色彩」を再現。
    */
    background-color: #fcfaf2;
    background-image: 
        /* 左下の淡いピンクの滲み */
        radial-gradient(circle at 20% 80%, rgba(255, 182, 193, 0.4) 0%, transparent 50%),
        /* 右上の濃い赤の滲み */
        radial-gradient(circle at 80% 20%, rgba(212, 0, 0, 0.15) 0%, transparent 50%),
        /* 中央の柔らかい赤のアクセント */
        radial-gradient(circle at 50% 50%, rgba(255, 240, 240, 0.5) 0%, #fcfaf2 100%);
    
    /* 質感を出すための和紙風テクスチャ（ごく薄いノイズ） */
    background-blend-mode: multiply;
}

.SNSlink {
    position: fixed;
    left: 5%;
    top: 100;
    
}

@media screen and (max-width: 959px) {
    .SNSlink {
    position: fixed;
    left: 5%;
    top: 100%
    }
}

h1 {
    font-family:  'Tunga','Times New Roman', serif;  /* フォントの種類指定 */
    font-size: 4rem;
}

img {
    border-radius: 260px;        /* 角丸指定 */

}

/* 元の画像サイズを活かす設定 */
.SNSall {
    width: 100%;           /* 親要素の幅に合わせる */
    max-width: 300px;      /* 大きすぎる場合はここで最大幅を制限（お好みで） */
    height: auto;          /* 縦横比を維持 */
}

.SNS {
    width: 100%;           /* 親要素の幅に合わせる */
    max-width: 200px;      /* 大きすぎる場合はここで最大幅を制限（お好みで） */
    height: auto;          /* 縦横比を維持 */
}

.left {
    padding: 10px 20px 10px 20px;
    text-align: left;
}

li.left {
    padding: 10px 150px 10px 100px;
    list-style-type: none;
    text-align: left;
}

h2.left {
    padding: 10px 150px 10px 80px;
    list-style-type: none;
    text-align: left;
}

li.right {
    padding: 10px 100px 10px 150px;
    list-style-type: none;
    text-align: right;
}

h2.right {
    padding: 10px 80px 10px 150px;
    list-style-type: none;
    text-align: right;
}

.SNS {
  text-decoration: none; /* すべての状態で下線をなくす */
}

.SNS_R {
  text-decoration: none; /* すべての状態で下線をなくす */

}

/* ホバー時（マウスオーバー時）にだけ下線を表示させるなど、特定の装飾を適用することも可能です */
a:hover {
  text-decoration: underline;
  color: pink; /* 特定の色を指定したい場合 */
}

h1.left {
    padding: 10px 100px 10px 100px;
    text-align: left;
}

#top {
    text-decoration: none; /* すべての状態で下線をなくす */
    color: indigo; /* 特定の色を指定したい場合 */
    text-align: left;
}