/* 基本の文字・レイアウト（リセットCSS前提) */

:root{
  --color-base:#ffffff;     /*背景*/
  --color-text:#000000;     /*文字色*/
  --color-border:#000000;    /*ボーダー*/
  --color-gray:#efefef;      /*サブ背景や区切りに使うグレー*/
  
  /*アクセントカラー*/
  --color-accent:#d79696;   /*ポイントに使うアクセント*/

  /*グラデーションカラー.サイトバー*/
  --gradient: linear-gradient(
    110deg,
    rgba(247,93,139,1),
    rgba(254,220,64,1)
  );

}

html{
  box-sizing: border-box;
  --webkit-text-size-adjust:100%;
}

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

body{
  background-color: var(--color-base);
  color: var(--color-text);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  font-size: clamp(14px,1.6vw,18px);
  letter-spacing: 0.05em;
}

a{
  color:inherit; /*親要素を引き継ぐ*/
  text-decoration: none;
  transition: color 0.3s ease;
}

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

h1,h2,h3,h4,h5,h6{
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1.3;
  color:var(--color-text)
}

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

h1{
  font-size: clamp(28px,4vw,48px);
  letter-spacing: clamp(00.05em,0.1vw,0.1em);
}

h2{
  font-size: clamp(22px,3vw,36px);
  letter-spacing: clamp(00.05em,0.1vw,0.1em);
}

h3{
  font-size: clamp(18px,2.5vw,28px);
}

h3{
  font-size: clamp(16px,2vw,24px);
}

p,li{
  font-size: clamp(14px,1.6vw,18px);
  letter-spacing:1.8;
}

small{
  font-size: clamp(12px,1.2vw,14px);
  letter-spacing:0.02em;
}

strong{
  font-weight: 700;
}

/*フォーム*/

button,input,select,textarea{
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/*utility*/


.container {
  max-width: 1200px;
  margin: 0 auto;      /* 中央寄せ */
  padding: 0 15px;     /* 左右の余白 */
  box-sizing: border-box;
}