@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:1200px)
{
	.pc-visible  {display:none !important;}
	.tab-hide    {display:none !important;}
	.sp-visible  {display:none !important;}
}
@media screen and (min-width:1201px)
{
	.pc-hide     {display:none !important;}
	.tab-visible {display:none !important;}
	.sp-visible  {display:none !important;}
}

/*
************************************************************************
 マージン
************************************************************************
*/
.mt-ll      {margin-top:120px}
.mt-l       {margin-top:100px}
.mt,.mt-m   {margin-top:80px}
.mt-s       {margin-top:40px}
.mt-ss      {margin-top:20px}
.mt-sss     {margin-top:0.5em}

.mb-ll      {margin-bottom:120px}
.mb-l       {margin-bottom:100px}
.mb,.mb-m   {margin-bottom:80px}
.mb-s       {margin-bottom:40px}
.mb-ss      {margin-bottom:20px}
.mb-sss     {margin-bottom:0.5em}

/*
************************************************************************
 パッディング
************************************************************************
*/
.pt-ll      {padding-top:120px}
.pt-l       {padding-top:100px}
.pt,.pt-m   {padding-top:80px}
.pt-s       {padding-top:40px}
.pt-ss      {padding-top:20px}

.pb-ll      {padding-bottom:120px}
.pb-l       {padding-bottom:100px}
.pb,.mb-m   {padding-bottom:80px}
.pb-s       {padding-bottom:40px}
.pb-ss      {padding-bottom:20px}

/*
************************************************************************
 フォント
************************************************************************
*/
.fc-noto_sans{font-family:"Noto Sans JP", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-weight:400;}
.fc-noto_sans_thin{font-family:"Noto Sans JP", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-weight:300;}
.fc-m_plus{font-family:"M PLUS 1p", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-weight:400;}
.fc-m_plus_thin{font-family:"M PLUS 1p", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-weight:300;}
.fc-m_plus_rounded{font-family:"M PLUS Rounded 1c", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-weight:400;}
.fc-m_plus_rounded_thin{font-family:"M PLUS Rounded 1c", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-weight:300;}
.fc-yugo{font-family:"YuGothic-Medium", "Yu Gothic Medium", "YuGothic-Regular", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-weight:400;}
.fc-noto_serif{font-family:"Noto Serif JP", serif; font-weight:400;}
.fc-noto_serif_thin{font-family:"Noto Serif JP", serif; font-weight:300;}
.fc-yumin{font-family:"游明朝体", "Yu Mincho", "YuMincho", serif; font-weight:400;}

/*
************************************************************************
* 文字の太さ
************************************************************************
*/
.fw-normal {font-weight:normal }
.fw-bold   {font-weight:bold   }

/*
************************************************************************
* 文字のサイズ
************************************************************************
*/
.fs-lll   {font-size:4.0rem !important;}
.fs-ll    {font-size:3.0rem !important;}
.fs-l     {font-size:2.0rem !important;}
.fs-m     {font-size:1.6rem !important;}
.fs-s     {font-size:1.4rem !important;}
.fs-ss    {font-size:1.2rem !important;}
.fs-sss   {font-size:0.8rem !important;}

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

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

/*
************************************************************************
* 文字色
************************************************************************
*/
.fc-white
{
	color:#FFFFFF;
}
.fc-red
{
	color:#AF0123;
}

/*
************************************************************************
* 文字間
************************************************************************
*/
.ls-05
{
	letter-spacing:0.5em;
}

/*
************************************************************************
* 背景色
************************************************************************
*/
.bg-white
{
	background-color:#FFFFFF;
}
.bg-black
{
	background-color:#323232;
}
.bg-gray
{
	background-color:#EBEBEB;
}
.bg-gray-grd
{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+1,ebebeb+100 */
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 1%, #ebebeb 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ffffff 1%,#ebebeb 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ffffff 1%,#ebebeb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebebeb',GradientType=0 ); /* IE6-9 */
}

/* ################################################################################################ */
/* ## 中型                       ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1200px) {
}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
	/*
	************************************************************************
	 マージン
	************************************************************************
	*/
	.mt-ll      {margin-top:25vw}
	.mt-l       {margin-top:20vw}
	.mt,.mt-m   {margin-top:15vw}
	.mt-s       {margin-top:10vw}
	.mt-ss      {margin-top:6.25vw}

	.mb-ll      {margin-bottom:25vw}
	.mb-l       {margin-bottom:20vw}
	.mb,.mb-m   {margin-bottom:15vw}
	.mb-s       {margin-bottom:10vw}
	.mb-ss      {margin-bottom:6.25vw}

	/*
	************************************************************************
	 パッディング
	************************************************************************
	*/
	.pt-ll      {padding-top:25vw}
	.pt-l       {padding-top:20vw}
	.pt,.pt-m   {padding-top:15vw}
	.pt-s       {padding-top:10vw}
	.pt-ss      {padding-top:6.25vw}

	.pb-ll      {padding-bottom:35vw}
	.pb-l       {padding-bottom:20vw}
	.pb,.mb-m   {padding-bottom:15vw}
	.pb-s       {padding-bottom:10vw}
	.pb-ss      {padding-bottom:6.25vw}
	
	/*
	************************************************************************
	* 文字のサイズ
	************************************************************************
	*/
	.fs-lll   {font-size:3.8rem !important;}
	.fs-ll    {font-size:3.2rem !important;}
	.fs-l     {font-size:2.6rem !important;}
	.fs-m     {font-size:2.2rem !important;}
	.fs-s     {font-size:1.8rem !important;}
	.fs-ss    {font-size:1.6rem !important;}
	.fs-sss   {font-size:1.0rem !important;}
	
	/*
	************************************************************************
	 マージン
	************************************************************************
	*/
	.sp-mt-ll         {margin-top:25vw}
	.sp-mt-l          {margin-top:20vw}
	.sp-mt,.sp-mt-m   {margin-top:15vw}
	.sp-mt-s          {margin-top:10vw}
	.sp-mt-ss         {margin-top:6.25vw}

	.sp-mb-ll         {margin-bottom:25vw}
	.sp-mb-l          {margin-bottom:20vw}
	.sp-mb,.sp-mb-m   {margin-bottom:15vw}
	.sp-mb-s          {margin-bottom:10vw}
	.sp-mb-ss         {margin-bottom:6.25vw}

	/*
	************************************************************************
	 パッディング
	************************************************************************
	*/
	.sp-pt-ll         {padding-top:25vw}
	.sp-pt-l          {padding-top:20vw}
	.sp-pt,.sp-pt-m   {padding-top:15vw}
	.sp-pt-s          {padding-top:10vw}
	.sp-pt-ss         {padding-top:6.25vw}

	.sp-pb-ll         {padding-bottom:35vw}
	.sp-pb-l          {padding-bottom:20vw}
	.sp-pb,.sp-mb-m   {padding-bottom:15vw}
	.sp-pb-s          {padding-bottom:10vw}
	.sp-pb-ss         {padding-bottom:6.25vw}

	/*
	************************************************************************
	 フォント
	************************************************************************
	*/
	.sp-ff-noto     {font-family: "Roboto", "Noto Sans Japanese", sans-serif;}
	.sp-ff-sawarabi {font-family: "Roboto", "Sawarabi Mincho", serif;}
	.sp-ff-yugo     {font-family: "Roboto", "YuGothic-Medium", "Yu Gothic Medium", "YuGothic-Regular", "游ゴシック Medium", YuGothic, "游ゴシック体", "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;}
	.sp-ff-yumin    {font-family: "Roboto", "游明朝体", "Yu Mincho", YuMincho, "Sawarabi Mincho", serif;}

	/*
	************************************************************************
	* 文字の太さ
	************************************************************************
	*/
	.sp-fw-normal {font-weight:normal }
	.sp-fw-bold   {font-weight:bold   }

	/*
	************************************************************************
	* 文字のサイズ
	************************************************************************
	*/
	.sp-fs-lll   {font-size:3.8rem !important;}
	.sp-fs-ll    {font-size:3.2rem !important;}
	.sp-fs-l     {font-size:2.6rem !important;}
	.sp-fs-m     {font-size:2.2rem !important;}
	.sp-fs-s     {font-size:1.8rem !important;}
	.sp-fs-ss    {font-size:1.6rem !important;}
	.sp-fs-sss   {font-size:1.0rem !important;}
	
	/*
	************************************************************************
	* 文字寄せ
	************************************************************************
	*/
	.sp-ta-left   {text-align:left !important;}
	.sp-ta-right  {text-align:right !important;}
	.sp-ta-center {text-align:center !important;}

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