@charset "UTF-8";
/*
FLAT / font: sans-serif / color: 06
グローバル変数とフォントの読み込み
----------------------------------------*/
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,700&display=swap&subset=japanese");
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,500,600,700,900&display=swap&subset=japanese');
@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900&display=swap");
@import url('https://fonts.googleapis.com/css?family=Oswald:400,500,600,700&display=swap');

@font-face {
	font-family: YuGothicM;
	src: local("Yu Gothic Medium");
}

/* グローバル変数
----------------------------------------*/
:root {
/* フォント
10(base font size) / 16(Browser Default font size) = 0.625em * 100 = 62.5%
----------------------------------------*/
	--font-family-primary: "Noto Sans JP", sans-serif;
	--font-family-english: "Montserrat", "Noto Sans JP", sans-serif;

	--root-font-size: 62.5%;
	--sp-root-font-size: 2.6667vw;
	--base-font-size: 1.4rem;
	--sp-base-font-size: 1.4rem;

	--base-line-height: 1.7;
	--h-line-height: 1.38;
	--en-line-height: 1.2;
	--wide-line-height: 2;

	--base-letter-space: 0.05em;
	--wide-letter-space: 0.1em;
	--indent-sub-list: 2em;

/* 色
----------------------------------------*/
	--white:    #fff;
	--black:    #000;

/* サイトで最も明るい色
----------------------------------------*/
	--lightest-color: #fff;
	--lightest-color-op2: rgba(255, 255, 255, 0.4);
	--lightest-color-op3: rgba(255, 255, 255, 0.58);
	--lightest-color-op4: rgba(255, 255, 255, 0.9);

/* サイトで最も暗い色
----------------------------------------*/
	--darkest-color: #151515;
	--darkest-color-op2: rgb(3, 3, 2);

/* メインカラー
----------------------------------------*/
	--primary-color: #15A085;
	--primary-color-op2: rgba(21, 160, 133, 0.7);
	--primary-color-op3: rgba(21, 160, 133, 0.9);
	--primary-color-op4: #1d4baf;
	--primary-color-op5: #0570c7;

/* body背景カラー
----------------------------------------*/
	--bg-body-color: #fff;

/* 標準のテキストの色
----------------------------------------*/
	--font-primary-color: #272727;
	--font-secondary-color: #909090;

/* ラインのカラー
----------------------------------------*/
	--line-color: #E5E5E5;
	--line-color-op2: #E0E0E0;

/* その他カラー
----------------------------------------*/
	--secondary-color: #f38200;
	--secondary-color-op2: #eee;
	--secondary-color-op5: #f6eee5;

	--notice-color: #dd0000;
	--accent-color: var(--primary-color-op4);
	--gray-color: #f7f7f7;
	--input-bg-color: #fafafa;
	--placeholder-color: #bababa;
	--btn-glow-color: var(--primary-color-op5);

/* ドロップシャドウ
----------------------------------------*/
	--card-shadow: 0 3px 6px rgba(0, 0, 0, .16);

/* hover
----------------------------------------*/
	--hover-opacity: 0.6;
	--hover-transition: 300ms;

/* 汎用space
----------------------------------------*/
	--spacer: 1.8rem;
	--sp-spacer: 1.2rem;

/* ページのコンテナサイズ
----------------------------------------*/
	--page-base-width: 1088px;

/* ページのコンテナmax-widthサイズ
----------------------------------------*/
	--page-base-max-width: 92%;
	--page-base-max-width-sm: 90%;

/* ヘッダーロゴサイズ
----------------------------------------*/
--header-logo-width: 434px;
--sp-header-logo-width: 200px;

/* フッターロゴサイズ
----------------------------------------*/
--footer-logo-width: 434px;
--sp-footer-logo-width: 60vw;
}