@charset "utf-8";

/*Font Awesomeの読み込み

---------------------------------------------------------------------------*/

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/*Google Fontsの読み込み

---------------------------------------------------------------------------*/

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

img {
  width: 100%;

  height: auto;

  display: block;
}

/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）

---------------------------------------------------------------------------*/

:root {
  --body-text-color: rgb(29, 29, 31);

  --headline-text-color: rgb(255, 255, 255);

  --body-background-color: rgb(255, 255, 255);

  --base-color-brand--bean: #371009;

  --base-color-brand--dark-red: #a70b04;

  --base-color-neutral--white: #fff;

  --base-color-brand--safron: #f90;

  --base-color-brand--red: #e21920;

  --base-color-brand--cinamon: #d85026;

  --base-color-brand--dark-pink: #f26b75;

  --font-size-1: clamp(1.2rem, 1.02rem + 0.76vw, 1.56rem);

  --font-size-5: clamp(2.49rem, 1.84rem + 2.78vw, 3.82rem);

  /* --sk-body-font-stack: text;

  --sk-default-stacked-margin: 0.4em;

  --sk-paragraph-plus-element-margin: 0.8em;

  --sk-headline-plus-first-element-margin: 0.8em;

  --sk-headline-plus-headline-margin: 0.4em;

  --sk-paragraph-plus-headline-margin: 1.6em; */

  /*余白の一括管理用。主に左右の余白に使っています。4rem＝4文字分。*/

  --global-section-padding: 96px;

  --content-space: 4rem;

  --breakpoint-md-margin: 3rem;
}

@media (min-width: 768px) {
  :root {
    --global-section-padding: 160px;

    --global-section-aap-padding: 226px;
  }
}

/* @media (max-width: 767px){

画面サイズが768px未満の場合の設定

} */

/* 共通の設定（スマートフォン用） */

/* body{

 background-color:red;

} */

/* 画面サイズが768px以上の場合の設定（タブレット用） */

/* @media (min-width:768px){

 body{

  background-color:blue;

 }

} */

/* 画面サイズが960px以上の場合の設定（PC用） */

/* @media (min-width:960px){

 body{

  background-color:green;

 }

} */

@media (min-width: 960px) {
  :root {
    --container_width: 960px;
    /*1170px*/
  }
}

.container {
  width: var(--container_width);

  margin: 0px auto;
}

/*全体の設定

---------------------------------------------------------------------------*/

body * {
  margin: 0;

  padding: 0;

  box-sizing: border-box;
}

html,
body {
  /*font-size: 13px;  基準となるフォントサイズ。*/

  /* font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; */

  font-family: Outfit, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;

  /* letter-spacing: .011em; */
}

/*画面幅900px以上の追加指定*/

@media screen and (min-width: 900px) {
  html,
  body {
    font-size: 15px;
    /*基準となるフォントサイズ。*/
  }
}

/*追加指定ここまで*/

body {
  margin: 0;
  padding: 0;

  -webkit-text-size-adjust: none;

  /* font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;    /*フォント種類（ゴシック）





    color: #555;

    line-height: 2;

    overflow-x: hidden; */
}

/*リセット*/

figure {
  margin: 0;
}

dd {
  margin: 0;
}

nav,
ul,
li,
ol {
  margin: 0;
  padding: 0;
}

nav ul {
  list-style: none;
}

/*table全般の設定*/

table {
  border-collapse: collapse;
}

/*画像全般の設定*/

img {
  border: none;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/*videoタグ*/

video {
  max-width: 100%;
}