/* ────────────────────────────────────────────────
   1.  @font-face
   ────────────────────────────────────────────────*/

/* ===============  Noto Serif JP  =============== */

@font-face {
  font-family: "Noto Serif JP";
  src: url("fonts/NotoSerifJP-Regular.woff2") format("woff2"),
       url("fonts/NotoSerifJP-Regular.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: "Noto Serif JP";
  src: url("fonts/NotoSerifJP-Medium.woff2") format("woff2"),
       url("fonts/NotoSerifJP-Medium.woff")  format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: "Noto Serif JP";
  src: url("fonts/NotoSerifJP-SemiBold.woff2") format("woff2"),
       url("fonts/NotoSerifJP-SemiBold.woff")  format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: "Noto Serif JP";
  src: url("fonts/NotoSerifJP-Bold.woff2") format("woff2"),
       url("fonts/NotoSerifJP-Bold.woff")  format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: "Noto Serif JP";
  src: url("fonts/NotoSerifJP-Light.woff2") format("woff2"),
       url("fonts/NotoSerifJP-Light.woff")  format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* ===============  Playfair Display  =============== */


@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-Regular.woff2") format("woff2"),
       url("fonts/PlayfairDisplay-Regular.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-SemiBold.woff2") format("woff2"),
       url("fonts/PlayfairDisplay-SemiBold.woff")  format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-SemiBoldItalic.woff2") format("woff2"),
       url("fonts/PlayfairDisplay-SemiBoldItalic.woff")  format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}


/* ===============  M PLUS 2  =============== */


@font-face {
  font-family: "M PLUS 2";
  src: url("fonts/MPLUS2-SemiBold.woff2") format("woff2"),
       url("fonts/MPLUS2-SemiBold.woff")  format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* ────────────────────────────────────────────────
   2.  CSS
   ────────────────────────────────────────────────*/

:root{
  --font-body:"Noto Serif JP", serif;
  --font-sans:"M PLUS 2", system-ui, sans-serif;
  --font-display:"Playfair Display","Noto Serif JP",serif;}


/* ────────────────────────────────────────────────
   3.  全局
   ────────────────────────────────────────────────*/

html {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  font-feature-settings: "palt", "pkna";
}

h1{
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .02em;
}

 h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 1.25;
  letter-spacing: .02em;
}


h3{
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.35;
}

h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.35;
  font-size: 1rem;
}



strong, .btn {
  font-family: var(--font-body);
  font-weight: 600;
}


.em-italic {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
}