@charset "utf-8";

/* MAIN
------------------------------------------ */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box
}
h1,
h2,
h3,
h4,
h5,
h6{
  font-size:100%;
  font-weight:normal
}
ol,
ul{
  list-style:none
}
table{
  border-collapse:collapse;
  border-spacing:0
}
img{
  vertical-align: top;
}
a{
  display: inline-block;
  cursor: pointer;
}
:focus{
  outline:none;
}
address{
  font-style: normal;
}
input[type="text"] {
  border-radius: 0;
  outline: none;
  background: none;
  -webkit-appearance: none;
  border: none;
}
input[type="radio"] ,
input[type="radio"]:checked + label,
input[type="checkbox"],
input[type="checkbox"]:checked + label{
  vertical-align: middle;
  border: none;
}
select {
  outline: none;
  border-radius: 0;
  -webkit-border-radius: 0;
  border: none;
}
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  outline: none;
  border: none;
}
button,
input[type="submit"] ,
input[type="reset"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  outline: none;
  -webkit-border-radius: 0;
  -webkit-appearance: none;
  border: none;
}
a{
  color: inherit;
  text-decoration: none;
  width: 100%;
}
img{
  width: 100%;
  max-width: 100%;
  height:auto;
}
p a{
  text-decoration: underline;
}
@media screen and (min-width: 768px){
  img{
    width:auto;
    max-width:100%;
    height:auto;
  }
  p a:hover{
    opacity: .5;
    text-decoration: none;
  }
}

/* BASE
------------------------------------------ */
:root {
  --jp: 'Noto Sans JP', sans-serif;
  --jpAccent: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',serif;
  --en: 'Lato', sans-serif;
  --enAccent: 'Courgette', cursive;

  --fW__base--jp: normal;
  --fW__base--jpAccent: normal;
  --fW__base--en: normal;
  --fW__base--enAccent: normal;

  --fW__normal: normal;
  --fW__bold: bold;
  --fW__normal--jp: normal;
  --fW__bold--jp: bold;
  --fW__normal--jpAccent: normal;
  --fW__bold--jpAccent: bold;
  --fW__normal--en: normal;
  --fW__bold--en: bold;
  --fW__normal--enAccent: normal;
  --fW__bold--enAccent: bold;
  
  --color--font: #000;
  --color--base: #fc6b5b;
  --color--item: #fffbfa;
  --color--accent: #ffa197;
  --color--bg: #fffbfa;
  --color--baseBg: #fff;
  --color--black: #000;
  --color--white: #fff;
  --color--gray: #ccc;
  --color--lightgray: #eee;
  --color--darkgray: #999;

  --w: 0.45;

  --f__value: 0.75;
  --plus: 1px;
  --f__en__value: 1.13;
  --f__enAccent__value: 1.2;
  --space__value: 0.9;
  --blockSpace__value: .75;
  --lH__value: 1;
  --lS: 0.08rem;

  --spaceS: 4vw;
  --spaceM: 10vw;
  --spaceL: 15vw;

  --ease-out: ease-out;
  --ease-in: ease-in;
  --linear: linear;
  --ease: ease;

  --animation__time: 1s;
}
body {
  position: relative;
  width:100%;
  min-height: 100vh;
  line-height: 1;
  --f: 1.3;font-size: clamp(calc(var(--f)*10px),calc(var(--f)*10px*var(--f__value)),calc(calc(var(--f)*10px) + var(--plus)));
  font-family: var(--jp);
  font-weight: var(--fW__normal--jp);
  color: var(--color--font);
  letter-spacing: var(--lS);
  background-color: var(--color--baseBg);
  overflow-x: hidden;
}
@media screen and (min-width: 768px){
  :root{
    --w: .9;

    --f__value: 1;
    --plus: 1px;
    --space__value: 1;
    --blockSpace__value: 1;
    --lH__value: 1;

    --animation__time: 1.2s;
  }
  body {
    --f: 1.3;
  }
}
@media screen and (min-width: 1024px){
  :root{
    --w: 1.3;

    --f__value: 1;
    --plus: 1px;
    --space__value: 1;
    --blockSpace__value: 1.25;
    --lH__value: 1;

    --animation__time: 1.2s;
  }
  body {
    --f: 1.3;
  }
}
@media screen and (min-width: 1280px){
  :root{
    --f__value: 1.1;
    --plus: 2px;
  }
}

@media screen and (min-width: 1600px){
  :root{
    --f__value: 1.2;
    --plus: 3px;
  }
}