@charset "utf-8";
/* ################################################################################
   Foundation
   ################################################################################ */


/* ======================================================================
   Normalize
   ====================================================================== */

/* ブラウザ間の表示差異をなくし、作成者の意図通りにスタイリングを行なう。 */

/* normalize.css */
/* 参考元URL: http://necolas.github.io/normalize.css/ */

/* フォルダ[CSS]に格納しています。 */





/* ======================================================================
   Base
   ====================================================================== */


/* 全体にbox-sizin指定
   ================================================================= */

/* paddingとborderを幅と高さに含める */


*, 
*:before, 
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}




/* CSS変数によるサイト全体の各種指定
   ================================================================= */

/* 主に視覚的な要素で、かつ共通的な指定は、こちらで管理を行う。 */
/* 各要素の詳細は指定は、要素ごとに個別で指定を行う。 */

/* ▽ CSS カスタムプロパティ (変数) の使用 */
/* Refernce URL: https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties */

/* ▽ margin, paddingなど、レスポンシブに対応したスペースをCSSで効率的に定義する方法 */
/* Refernce URL: https://coliss.com/articles/build-websites/operation/css/css-spacing-system-and-relative-units.html */


: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: 72.4rem;
  /* [レイアウト]コンテンツ領域の横幅_メイン */
  --layout-width-main-primary: 72.4rem;
  /* [レイアウト]コンテンツ領域の横幅_サブ */
  --layout-width-main-secondary: 72.4rem;
  
  /* [レイアウト]各コンテンツの下端の余白（Margin） */
  --layout-content-margin-bottom: var(--space-300-basic);
  /* [レイアウト]各コンテンツの左右両端の隙間（Padding）※片側のみの指定 */
  --layout-site-bothends-padding: 0;
  
	
	/* [ページ全体]キーカラー_メイン */
  --keycolor-main: #808080;
  /* [ページ全体]キーカラー_サブ */
  --keycolor-sub: #d9d9d9;
	
  /* [ページ全体]背景カラー_container */
  --bgcolor-container: inherit;
  /* [ページ全体]背景カラー_header */
  --bgcolor-header: #fff;
  /* [ページ全体]背景カラー_main */
  --bgcolor-main: inherit;
  /* [ページ全体]背景カラー_footer */
  --bgcolor-footer: #fff;
	/* [ページ全体]背景カラー_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;
	
	
  /* [記事]キーカラー_メイン */
  --keycolor-article-main: #808080;
  /* [記事]キーカラー_サブ */
  --keycolor-article-sub: #d9d9d9;

	/* [記事]フォントカラー_テキスト */
  --fontcolor-article-text: #262626;
  /* [記事]フォントの種類_テキスト */
  --fontfamily-article-text: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  /* [記事]フォントサイズ_テキスト */
  --fontsize-article-text: 1.8rem;
  /* [記事]行の高さ_テキスト */
  --lineheight-article-text: 1.5;
  /* [記事]文字間隔_テキスト */
  --letterspacing-article-text: 0.05em;
  /* [記事]文字の太さ_テキスト */
  --fontweight-article-text: normal;
	
  /* [メニュー]リストの背景色 */
  --link-bgcolor: #fff;
  /* [メニュー]リストの背景色_マウスオン */
  --link-bgcolor-hover: #f3f3f3;
}

@media screen and (max-width:959px) {
:root {
  /* [ページ全体]コンテンツ領域の横幅 */
  --layout-width-basic: 100%;
  /* [Main]コンテンツ領域の横幅_メイン */
  --layout-width-main-primary: 100%;
  /* [Main]コンテンツ領域の横幅_サブ */
  --layout-width-main-secondary: 100%;
	
  /* [レイアウト]各コンテンツの左右両端の隙間（Padding）※片側のみの指定 */
  --layout-site-bothends-padding: var(--space-200-basic);
  
  /* [ページ全体]フォントサイズ_テキスト */
  --fontsize-basic-text: 2.488vw;

  /* [記事]フォントサイズ_テキスト */
  --fontsize-article-text: 2.8vw;
}
}

@media screen and (max-width:559px) {
:root {
  /* [ページ全体]コンテンツ領域の横幅 */
  --layout-width-basic: 100%;
  /* [Main]コンテンツ領域の横幅_メイン */
  --layout-width-main-primary: 100%;
  /* [Main]コンテンツ領域の横幅_サブ */
  --layout-width-main-secondary: 100%;
	
  /* [レイアウト]各コンテンツの左右両端の隙間（Padding）※片側のみの指定 */
  --layout-site-bothends-padding: var(--space-100-basic);
  
  /* [ページ全体]フォントサイズ_テキスト */
  --fontsize-basic-text: 4.262vw;

  /* [記事]フォントサイズ */
  --fontsize-article-text: 4.4vw;
}
}




/* HTMLの基本タグの共通指定
   ================================================================= */

/* フォントサイズ「rem」を扱いやすくするための対応 */

/* font-size: 62.5%;は、10px相当。*/
/* 10px = 1.0rem */
/* font-sizeを指定する際は、pxとremを併記する。 */

/* ※レスポンシブWeb用CSSフレームワークを使用すると、上記の想定から崩れたサイズになる。 */
/* その場合、サイト全体の土台となる見直す必要がある。 */

/* フォントサイズの絶対値（px,rem）を、相対値（%,vw,vh）に置き換える計算式 */

/* 見せたい文字の絶対値（px,rem）÷端末の横幅の絶対値（px,rem）=VWに登録する相対値 */
/* 例：14px÷320px=0.04375(4.375%) */


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%;
  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;
}