/*
Theme Name: KO-YADO
Theme URI:
Author:
Description: A minimal WordPress theme for small accommodations.
Version: 1.0.0
Text Domain: ko-yado
*/



/* =========================================================
   FONT
========================================================= */

@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/inter-v20-latin-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/inter-v20-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/inter-v20-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/inter-v20-latin-600italic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/inter-v20-latin-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  src: url("./assets/fonts/noto-sans-ja-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Babylonica";
  src: url("./assets/fonts/babylonica-v7-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* =========================================================
   DESIGN TOKENS
========================================================= */

:root {

  /* COLORS */
  --color-gold: #BEA549;
  --color-olive: #3C392B;

  --color-white: #FFFFFF;
  --color-off-white: #F7F6F2;

  --color-black: #171714;
  --color-text: #2B2A25;
  --color-gray: #77756D;
  --color-border: #DDDAD0;


  /* FONT */
  --font-en: "Inter", sans-serif;

 --font-no: "Noto Sans JP", sans-serif;

  --font-ja:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;
--font-it: "Babylonica";


  /* LAYOUT */
  --container: 1280px;
  --container-small: 960px;
  --side-padding: 6vw;

  --section-space: 120px;
  --section-space-sp: 80px;


  /* MOTION */
  --transition: 0.35s ease;
}


/* =========================================================
   BASE
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-white);
  color: var(--color-text);

  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
  line-height: 1.5;
}

/* 英字部分 */
.en {
  font-family: var(--font-en);
}


/* =========================================================
   LAYOUT
========================================================= */

.container {
  width: min(
    calc(100% - (var(--side-padding) * 2)),
    var(--container)
  );
  margin-inline: auto;
}

.container--small {
  max-width: var(--container-small);
}

.section {
  padding-block: var(--section-space);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 767px) {

  html {
    width: 100%;
    height: auto;

    overflow-x: hidden;
    overflow-y: auto;

    -webkit-overflow-scrolling: touch;
  }

  body {
    width: 100%;
    min-height: 100%;

    margin: 0;

    overflow: visible;

    position: static;

    font-size: 15px;
  }


  main,
  .site-main {
    width: 100%;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;

    position: relative !important;
  }


  .section {
    padding-block: var(--section-space-sp);
  }

}

p {
  font-family: "Noto Sans JP", sans-serif;
}