/* 画面全体の初期設定（フォントサイズ基準＆スクロール滑らか） */
    html {
      background: transparent;
      font-size: 62.5%; /* → 1rem = 10pxにするため */
      scroll-behavior: smooth;
    }

    /* 全体の見た目や色、余白 */
    body {
      background: #ece4e1;               /* 背景色 */
      color: #524e4d;                    /* 文字色 */
      font-size: 1.4rem;                 /* 初期の文字サイズ */
      font-family: "Zen Maru Gothic", serif; /* フォント */
      line-height: 1.8;                  /* 行間 */
      min-height: 100vh;                 /* 最低でも画面いっぱい */
      margin: 0;                   /* 上下10px、左右5%の余白 */
      padding: 10px 5%;
    }

    /* パソコンサイズ（1024px以上）のときの見た目調整 */
    @media screen and (min-width: 1024px) {
      body {
      font-size: 1.4rem;               /* 文字ちょい大きくする */
      margin: 0;                   /* 上下10px、左右5%の余白 */
      padding: 10px 20%;
      min-height: auto;
      }
    }

    /* 通常リンクのスタイル（色・下線など） */
    a:link, a:active, a:visited {
      color: #c1a37d;
      text-decoration: none;
      background-color: #ece4e1;
      border-bottom: 2px solid #eac5b6; /* 下に白線 */
    }

    /* ホバー時のスタイル（マウス乗せたとき） */
    a:hover {
      color: #eac5b6;
      background-color: #;         /* 背景色を黄色に変える */
      border-bottom: 0px solid #8ac8cf;   /* 点線に変化 */
    }

    /* スパンタグのフォントサイズ調整 */
    span {
      font-size:1.2rem;
    }

/* SVGアイコン共通設定（文字サイズ・色と連動） */
.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;       /* 文字色と連動 */
  vertical-align: -0.125em; /* 文字と中央揃え（微調整） */
}