@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

/*読み込みアニメーション*/
body {
  animation: fadeout 1.5s ease 0s 1 normal;
}

@keyframes fadeout {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@font-face {
  font-family: 'Noto Sans JP';
  font-display: swap;
  src: url('../fonts/NotoSansJP-VariableFont_wght.ttf') format('truetype');
}

html {font-size: 16px;color: #3a3a3a;}
body {
  font-feature-settings: 'palt';
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  letter-spacing: 0.07rem;
}


/* テクスト選択反転カラー */
::selection {
  background: #fafacb;
}

/*Firefox*/
::-moz-selection {
  background: #fafacb;
}

table,
tr,
th,
td,
ul,
ol,
li,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
figure {
  margin: 0;
  padding: 0;
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* テキストリンク */
a {
  text-decoration: none;
  color: #3a3a3a;
  outline: none;
  transition: 0.2s ease;
}

/*
transition: CSSプロパティ名 0.2s ease;
（対象のプロパティ名　変化の始まりから終わりの時間　変化の仕方）
カンマで区切って別のプロパティを複数対象にできる

transition-property：変化対象のCSS（allは使わない）
transition-duration：変化の開始から終了までの時間
transition-delay：変化がいつ始まるか(遅延)
transition-timing-function：変化の仕方

ease(開始と終了を滑らかに)
linear（一定）
ease-in(開始がゆっくり)
ease-out(終了がゆっくり)
ease-in-out（開始と終了がゆっくり）
cubic-bezier(※)

*/
.l-footer__wrap a:hover,
.news__list a:hover {opacity: 0.6;}

/* 本文 */
p {
  padding: 0;
  margin: 0;
  line-height: 1.75rem;
  word-wrap: break-word;
}
/* 画像 */
img {
  vertical-align: top;
  font-size: 0;
  line-height: 0;
  max-width: 100%;
  height: auto;
  border-style: none;
  image-rendering: -webkit-optimize-contrast;
}

/* clear */
.cle:before,
.cle:after {
  content: ' ';
  display: table;
}
.cle:after {
  clear: both;
}
.cle {
  zoom: 1;
}

hr {
  height: 1px;
  background-color: #4d4d4d;
  border: none;
  color: #4d4d4d;
  margin: 10px 0;
}

input[type='text']:focus,
input[type='tel']:focus,
input[type='email']:focus,
textarea:focus {
  border: none;
  outline: 0;
}

input[type='submit'],
input[type='button'] {
  cursor: pointer;
  outline: none;
  border: none;
}


/* -------------------------- */
:root {
  --width-main:1000px;

  /* 色 */
  --white:#ffffff;
  --main-el:#eaf6fc;
  --main-c:#30a9e3;
  --main-d:#278eb7;
  --red:#ea004d;
  --yellow:#f9f100;
  --gray:#3a3a3a;
  --gray-el:#e8e8e8;

  /* フォントサイズ */
  --font-xll:calc(40 / 16 * 1rem);
  --font-xl:calc(36 / 16 * 1rem);
  --font30:calc(30 / 16 * 1rem);
  --font-ml:calc(26 / 16 * 1rem);
  --font-l:calc(24 / 16 * 1rem);
  --font-sl:calc(22 / 16 * 1rem);
  --font20:calc(20 / 16 * 1rem);
  --font-m:calc(18 / 16 * 1rem);
  --font-sm:calc(16 / 16 * 1rem);
  --font14:calc(14 / 16 * 1rem);
  --font13:calc(13 / 16 * 1rem);
  --font12:calc(12 / 16 * 1rem);
  --font10:calc(10 / 16 * 1rem);
  --font8:calc(8 / 16 * 1rem);

  /* フォント */
  --font-b:500;

  /* 角丸 */
  --r15:1.5rem;
  --r1:1rem;

}