@charset "UTF-8";
/* ################################################################################
   Foundation
   ################################################################################ */
/* ======================================================================
   Normalize
   ====================================================================== */
/* ブラウザ間の表示差異をなくし、作成者の意図通りにスタイリングを行なう。 */
/* normalize.css */
/* 参考元URL: http://necolas.github.io/normalize.css/ */
/* フォルダ[CSS]に格納しています。 */
/* ======================================================================
   Base
   ====================================================================== */
/* 全体にbox-sizin指定
   ================================================================= */
*,
*:before,
*:after {
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

/* CSS変数によるサイト全体の各種指定
   ================================================================= */
:root {
  /* [スペース]space-unitの基準値 */
  --space-unit-basic: var(--fontsize-basic-text);
  /* [スペース]space-unitの0.25倍 */
  --space-025-basic: calc(var(--space-unit-basic) * 0.25);
  /* [スペース]space-unitの0.5倍 */
  --space-050-basic: calc(var(--space-unit-basic) * 0.5);
  /* [スペース]space-unitの0.75倍 */
  --space-075-basic: calc(var(--space-unit-basic) * 0.75);
  /* [スペース]space-unitの1倍 */
  --space-100-basic: calc(var(--space-unit-basic) * 1);
  /* [スペース]space-unitの1.25倍 */
  --space-125-basic: calc(var(--space-unit-basic) * 1.25);
  /* [スペース]space-unitの0.5倍 */
  --space-150-basic: calc(var(--space-unit-basic) * 1.5);
  /* [スペース]space-unitの1.75倍 */
  --space-175-basic: calc(var(--space-unit-basic) * 1.75);
  /* [スペース]space-unitの2倍 */
  --space-200-basic: calc(var(--space-unit-basic) * 2);
  /* [スペース]space-unitの2.25倍 */
  --space-225-basic: calc(var(--space-unit-basic) * 2.25);
  /* [スペース]space-unitの2.5倍 */
  --space-250-basic: calc(var(--space-unit-basic) * 2.5);
  /* [スペース]space-unitの3倍 */
  --space-300-basic: calc(var(--space-unit-basic) * 3);
  /* [スペース]space-unitの3.5倍 */
  --space-350-basic: calc(var(--space-unit-basic) * 3.5);
  /* [スペース]]space-unitの4倍 */
  --space-400-basic: calc(var(--space-unit-basic) * 4);
  /* [スペース]space-unitの4.5倍 */
  --space-450-basic: calc(var(--space-unit-basic) * 4.5);
  /* [スペース]space-unitの5倍 */
  --space-500-basic: calc(var(--space-unit-basic) * 5);
  /* [スペース]space-unitの5.5倍 */
  --space-550-basic: calc(var(--space-unit-basic) * 5.5);
  /* [スペース]space-unitの6倍 */
  --space-600-basic: calc(var(--space-unit-basic) * 6);
  /* [レイアウト]コンテンツ領域の横幅 */
  --layout-width-basic: 64.0rem;
  /* [レイアウト]各コンテンツの下端の余白（Margin） */
  --layout-content-margin-bottom: 0;
  /* [レイアウト]各コンテンツの左右両端の隙間（Padding）※片側のみの指定 */
  --layout-site-bothends-padding: 0;
  /* [ページ全体]キーカラー_メイン */
  --keycolor-main: #b31e29;
  /* [ページ全体]キーカラー_サブ */
  --keycolor-sub: #d9d9d9;
  /* [ページ全体]背景カラー_container */
  --bgcolor-container: inherit;
  /* [ページ全体]背景カラー_header */
  --bgcolor-header: #fff;
  /* [ページ全体]背景カラー_main */
  --bgcolor-main: inherit;
  /* [ページ全体]背景カラー_footer */
  --bgcolor-footer: #b31e29;
  /* [ページ全体]背景カラー_content */
  --bgcolor-content: #fff;
  /* [ページ全体]フォントカラー_テキスト */
  --fontcolor-basic-text: #262626;
  /* [ページ全体]フォントの種類_テキスト */
  --fontfamily-basic-text: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  /* [ページ全体]フォントサイズ */
  --fontsize-basic-text: 1.6rem;
  /* [ページ全体]行の高さ_テキスト */
  --lineheight-basic-text: 1.5;
  /* [ページ全体]文字間隔_テキスト */
  --letterspacing-basic-text: 0.05em;
  /* [ページ全体]文字の太さ_テキスト */
  --fontweight-basic-text: normal;
  /* [ページ全体]margin_テキスト */
  --margin-basic-text: 1.0em 0;
  /* [ページ全体]padding_テキスト */
  --padding-basic-text: 0;
  /* [メニュー]リストの背景色 */
  --link-bgcolor: #fff;
  /* [メニュー]リストの背景色_マウスオン */
  --link-bgcolor-hover: #f3f3f3;
}

@media screen and (max-width: 959px) {
  :root {
    /* [ページ全体]コンテンツ領域の横幅 */
    --layout-width-basic: 100%;
    /* [ページ全体]フォントサイズ_テキスト */
    --fontsize-basic-text: 2.488vw;
  }
}

@media screen and (max-width: 559px) {
  :root {
    /* [ページ全体]コンテンツ領域の横幅 */
    --layout-width-basic: 100%;
    /* [ページ全体]フォントサイズ_テキスト */
    --fontsize-basic-text: 4.262vw;
  }
}

/* HTMLの基本タグの共通指定
   ================================================================= */
html {
  font-size: 62.5%;
}

body {
  min-width: 32.0rem;
  color: var(--fontcolor-basic-text);
  font-family: var(--fontfamily-basic-text);
  font-size: var(--fontsize-basic-text);
  line-height: var(--lineheight-basic-text);
  letter-spacing: var(--letterspacing-basic-text);
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-feature-settings: "palt" 1;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
      text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: auto;
}

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

p,
ol,
ul,
pre,
blockquote,
table,
hr,
iframe,
figure,
video,
canvas,
iframe,
audio,
form {
  margin: 1.0em 0;
}

img,
svg,
figure,
video,
canvas,
iframe,
audio {
  max-width: 100%;
  vertical-align: bottom;
  border: 0;
}

img,
svg,
figure,
video,
canvas,
audio {
  height: auto;
}

blockquote {
  width: auto;
  padding: 0.75em;
  background: #f4f4f4;
  border-left: solid 0.2em #4c4c4c;
  text-align: left;
}

blockquote p {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

blockquote p:first-child {
  margin-top: 0;
}

blockquote p:last-child {
  margin-bottom: 0;
}

table {
  width: auto;
  border: solid 0.075em #4c4c4c;
}

th {
  padding: 0.5em;
  background: #f4f4f4;
  border: solid 0.075em #4c4c4c;
  font-weight: normal;
  text-align: center;
}

td {
  padding: 0.5em;
  background: #ffffff;
  border: solid 0.075em #4c4c4c;
  text-align: left;
}

hr {
  max-width: 100%;
  height: 0;
  border-top: 0;
  border-bottom: solid 0.15em #4c4c4c;
  clear: both;
}

input[type="submit"],
input[type="search"] {
  -webkit-appearance: none;
}

/* リンクの各種指定
   ================================================================= */
a {
  color: #78ccf0;
  text-decoration: none;
}

a:hover {
  color: #78ccf0;
  text-decoration: underline;
}

a:active {
  color: #78ccf0;
  text-decoration: none;
}

a:focus {
  color: #78ccf0;
  text-decoration: none;
}

/* ------------------------------------------------------------
   要素を選択時の背景色
   ------------------------------------------------------------ */
::selection {
  background: var(--keycolor-main);
  color: #fff;
}

::-moz-selection {
  background: var(--keycolor-main);
  color: #fff;
}

/* ------------------------------------------------------------
   フォーム関連タグのブラウザデフォルトスタイルの無効化
   ------------------------------------------------------------ */
/* Reference URL: https://hacknote.jp/archives/9505/ */
/* Reference URL: https://www.nedia.ne.jp/blog/tech/2018/02/06/11250 */
input,
button,
textarea,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ======================================================================
   ClearFix
   ====================================================================== */
/* 「任意の要素」に対し、Clearfixを指定をする場合に */
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}