@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;
}
: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 {
  --px1: 1px;
  --s1: calc(var(--px1) * 1);
  --s2: calc(var(--px1) * 2);
  --s3: calc(var(--px1) * 3);
  --s4: calc(var(--px1) * 4);
  --s5: calc(var(--px1) * 5);
  --s6: calc(var(--px1) * 6);
  --s7: calc(var(--px1) * 7);
  --s8: calc(var(--px1) * 8);
  --s9: calc(var(--px1) * 9);

  --px10: 2.6vw;
  --s10: calc(var(--px10) * 1);
  --s15: calc(var(--px10) * 1.5);
  --s20: calc(var(--px10) * 2);
  --s25: calc(var(--px10) * 2.5);
  --s30: calc(var(--px10) * 3);
  --s35: calc(var(--px10) * 3.5);
  --s40: calc(var(--px10) * 4);
  --s50: calc(var(--px10) * 5);
  --s60: calc(var(--px10) * 6);
  --s70: calc(var(--px10) * 7);
  --s80: calc(var(--px10) * 8);
  --s90: calc(var(--px10) * 9);
  --s100: calc(var(--px10) * 10);
  --s110: calc(var(--px10) * 11);
  --s120: calc(var(--px10) * 12);
  --s130: calc(var(--px10) * 13);
  --s140: calc(var(--px10) * 14);
  --s150: calc(var(--px10) * 15);
  --s160: calc(var(--px10) * 16);
  --s170: calc(var(--px10) * 17);
  --s180: calc(var(--px10) * 18);
  --s190: calc(var(--px10) * 19);
  --s200: calc(var(--px10) * 20);
  --s250: calc(var(--px10) * 25);
  --s300: calc(var(--px10) * 30);
  --s350: calc(var(--px10) * 35);
  --s400: calc(var(--px10) * 40);
  --s450: calc(var(--px10) * 45);
  --s500: calc(var(--px10) * 50);
  --s550: calc(var(--px10) * 55);
  --s600: calc(var(--px10) * 60);
  --s650: calc(var(--px10) * 65);
  --s700: calc(var(--px10) * 70);
  --s750: calc(var(--px10) * 75);
  --s800: calc(var(--px10) * 80);
  --s850: calc(var(--px10) * 85);
  --s900: calc(var(--px10) * 90);
  --s950: calc(var(--px10) * 95);
  --s1000: calc(var(--px10) * 100);
  --s1050: calc(var(--px10) * 105);
  --s1100: calc(var(--px10) * 110);
  --s1150: calc(var(--px10) * 115);
  --s1200: calc(var(--px10) * 120);

  --jp: 'YuGothic','Yu Gothic','Arial',sans-serif;
  --jpAccent: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',serif;
  --en: 'Montserrat', sans-serif;;
  --enAccent: 'Courgette', cursive;;

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

  --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: 400;
  --fW__bold--en: 700;
  --fW__normal--enAccent: 400;
  --fW__bold--enAccent: 700;
  
  --color--logo: #000;
  --color--font: #222;
  --color--base: #FC6B5B;
  --color--item: #FC6A59;
  --color--accent: transparent linear-gradient(140deg, #FAA0AE 0%, #FF6450 100%) 0% 0%;
  --color--bg: #ffc0b9;
  --color--baseBg: #fff;
  --color--black: #000;
  --color--white: #fff;
  --color--gray: #ccc;
  --color--lightgray: #eee;
  --color--darkgray: #888;

  --f__base: clamp(1.3rem, 3.4vw, 1.4rem);

  --f__value: .75; /*SPの時のフォントの基本値*/
  --f__en__value: 1.18;
  --f__enAccent__value: 1.18;
  --space__value: .9;/*余白の基本値*/
  --blockSpace__value: 1; /*セクション同士の余白の基本値*/
  --lH__value: 1;
  --lS: .08rem;

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

  --ease-out: ease-out;
  --ease-in: ease-in;
  --linear: linear;
  --ease: ease;
  --ease-custom: cubic-bezier(0.22, 0.61, 0.36, 1);

  --animation__time: 1s;
}
html {
  font-size: 62.5%;
}
body {
  position: relative;
  width:100%;
  min-height: 100vh;
  line-height: 1;
  font-size: var(--f__base);
  font-family: var(--jp);
  font-weight: var(--fW__normal--jp);
  color: var(--color--font);
  letter-spacing: var(--lS);
  background-color: var(--color--baseBg);
}
@media screen and (min-width: 768px){
  :root{
    --px10: 10px;

    --f__base: clamp(1.3rem, 1.6vw, 1.5rem);

    --f__value: 0.85;
    --space__value: 1;
    --blockSpace__value: 1.2;
    --lH__value: 1;
    --lS: .08rem;

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

    --ease-out: ease-out;
    --ease-in: ease-in;
    --linear: linear;
    --ease: ease;
    --ease-custom: cubic-bezier(0.22, 0.61, 0.36, 1);

    --animation__time: 1.2s;
}
@media screen and (min-width: 1024px){
  :root{
    --f__base: calc(clamp(1.3rem, 1vw, 1.5rem) * var(--f__value));

    --f__value: 1; /*PCの時のフォントの基本値*/
    --space__value: 1;/*余白の基本値*/
    --blockSpace__value: 1.5; /*セクション同士の余白の基本値*/
    --lH__value: 1.2;
    --lS: .08rem;

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

    --ease-out: ease-out;
    --ease-in: ease-in;
    --linear: linear;
    --ease: ease;
    --ease-custom: cubic-bezier(0.22, 0.61, 0.36, 1);

    --animation__time: 1.2s;
  }
}