@charset "utf-8";

/*
************************************************************************
* デザイン要素
* 背景、文字サイズ、文字色に関するスタイルをまとめる。
* 
* @copyright Revolme Inc.
************************************************************************
*/

/*
************************************************************************
* レスポンシブ別表示切り替え
************************************************************************
*/
@media screen and (max-width: 640px)
{
	.pc-visible  {display:none !important;}
	.tab-visible {display:none !important;}
	.sp-hide     {display:none !important;}
}
@media screen and (min-width: 641px) and (max-width: 1400px)
{
	.pc-visible  {display:none !important;}
	.tab-hide    {display:none !important;}
	.sp-visible  {display:none !important;}
}
@media screen and (min-width: 1401px)
{
	.pc-hide     {display:none !important;}
	.tab-visible {display:none !important;}
	.sp-visible  {display:none !important;}
}

/*
************************************************************************
* 文字の太さ
************************************************************************
*/
.fw-normal {font-weight:normal !important;}
.fw-bold   {font-weight:bold !important;}
.fw-200    {font-weight:200 !important;}
.fw-300    {font-weight:300 !important;}
.fw-400    {font-weight:400 !important;}
.fw-500    {font-weight:500 !important;}
.fw-600    {font-weight:600 !important;}
.fw-700    {font-weight:700 !important;}
.fw-800    {font-weight:800 !important;}
.fw-900    {font-weight:900 !important;}

/*
************************************************************************
* 文字のサイズ
************************************************************************
*/
.fs-s     {font-size:1.2rem !important;}
.fs-m     {font-size:1.4rem !important;}
.fs-l     {font-size:2.0rem !important;}
.fs-xl    {font-size:2.4rem !important;}
.fs-xxl   {font-size:2.8rem !important;}
.fs-xxxl  {font-size:3.2rem !important;}
.fs-xxxxl {font-size:3.6rem !important;}

/*
************************************************************************
* 文字色
************************************************************************
*/
a{color:#318445;}
.fc-default {color:#000000 !important;}
.fc-link    {color:#318445 !important;}
.fc-main    {color:#0a8228 !important;}
.fc-accent1 {color:#999999 !important;}
.fc-accent2 {color:#b2cfff !important;}
.fc-accent3 {color:#dddddd !important;}
.fc-accent4 {color:#dd0000 !important;}

.fc-ok      {color:#0a8228 !important;}
.fc-ng      {color:#f45342 !important;}
.fc-gray    {color:#999999 !important;}

/*
************************************************************************
* 背景色
************************************************************************
*/
.bg-default {background-color:#FFFFFF !important;}
.bg-light   {background-color:#F9F9F9 !important;}
.bg-main    {background-color:#0a8228 !important;}
.bg-accent1 {background-color:#999999 !important;}
.bg-accent2 {background-color:#b2cfff !important;}
.bg-accent3 {background-color:#dddddd !important;}
.bg-accent4 {background-color:#dd0000 !important;}

/*
************************************************************************
* 背景パターン・画像
************************************************************************
*/

/*
************************************************************************
* 文字寄せ
************************************************************************
*/
.ta-left   {text-align:left !important;}
.ta-right  {text-align:right !important;}
.ta-center {text-align:center !important;}

/*
************************************************************************
* フロート
************************************************************************
*/
.float-left   {float:left !important;}
.float-right  {float:right !important;}
.float-none   {float:none !important;}

/*
************************************************************************
* ブロック
************************************************************************
*/
.display-inline       {display:inline !important;}
.display-inline-block {display:inline-block !important;}
.display-block        {display:block !important;}

/*
************************************************************************
 特殊フォント
************************************************************************
*/
.ff-slabo
{
	font-family: 'Slabo 27px', serif;
}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width: 640px) {

	/* 文字太さ */
	.fw-sp-normal {font-weight:normal;}
	.fw-sp-bold   {font-weight:bold;}
	.fw-sp-200    {font-weight:200;}
	.fw-sp-300    {font-weight:300;}
	.fw-sp-400    {font-weight:400;}
	.fw-sp-500    {font-weight:500;}
	.fw-sp-600    {font-weight:600;}
	.fw-sp-700    {font-weight:700;}
	.fw-sp-800    {font-weight:800;}
	.fw-sp-900    {font-weight:900;}

	/* 文字サイズ */
	.fs-sp-s     {font-size:1.0rem}
	.fs-sp-m     {font-size:1.4rem}
	.fs-sp-l     {font-size:2.0rem}
	.fs-sp-xl    {font-size:2.0rem}
	.fs-sp-xxl   {font-size:2.4rem}
	.fs-sp-xxxl  {font-size:2.4rem}
	.fs-sp-xxxxl {font-size:2.8rem}

	/* 文字色 */
	.fc-sp-default {color:#000000 !important;}
	.fc-sp-link    {color:#318445 !important;}
	.fc-sp-main    {color:#0a8228 !important;}
	.fc-sp-accent1 {color:#999999 !important;}
	.fc-sp-accent2 {color:#b2cfff !important;}
	
	/* 背景色 */
	.bg-sp-default {background-color:#FFFFFF !important;}
	.bg-sp-main    {background-color:#0a8228 !important;}
	.bg-sp-accent1 {background-color:#999999 !important;}
	.bg-sp-accent2 {background-color:#b2cfff !important;}
	
	/*
	************************************************************************
	* 文字寄せ
	************************************************************************
	*/
	.ta-sp-left   {text-align:left !important;}
	.ta-sp-right  {text-align:right !important;}
	.ta-sp-center {text-align:center !important;}
}