@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

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

:root {
    --main-color: #ffd400;
    --main-color-dark: #a38707;
    --sub-color: #000;
    --accent-color: #fff;
    --cb: cubic-bezier(0, 0.69, 0.58, 0.99);
    --mainWidth: min(90%, 1300px);
    --demoWidth: min(90%, 700px);
    --paddindMax5: max(calc((100% - 1300px) / 2), 5%);
  }


html:focus-within {
    scroll-behavior: smooth;
}

body {
    font-family:"Noto Sans JP", serif;
    font-weight: 400;
    letter-spacing: 0.5px;
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
    color: var(--sub-color);
	background-color:var(--main-color);
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s var(--cb);
}
a:hover{
    color: var(--main-color-dark);
}
a:not([class]) {
    text-decoration-skip-ink: auto
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
}

img,
picture {
    max-width: 100%;
    display: block
}

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

@media(prefers-reduced-motion:reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
    }
}
.btn{
    display: inline-block;
    background-color: var(--sub-color);
    font-weight: bold;
    border-radius: 15px;
    padding: 0.3em 1.3em;
    color: var(--accent-color);
    width: fit-content;
}
.btn:hover{
    background-color: var(--main-color-dark);
    color: var(--accent-color);
}
.btn.btn2{
    background-color: var(--main-color);
    color: var(--sub-color);
}
.btn.btn2:hover{
    background-color: var(--main-color-dark);
    color: var(--sub-color);
}