@charset "utf-8";

/*
************************************************************************
* デザイン・レイアウト基本設定
* @copyright Revolme Inc.
*
* レイアウトの設定
************************************************************************
*/

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

/*
************************************************************************
 画像のホバー
************************************************************************
*/
a img
{
	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
}
a:hover img
{
    filter:alpha(opacity=70);
    -moz-opacity: 07;
    opacity: 0.7;
}

/*
************************************************************************
 マージン
************************************************************************
*/
.mt {margin-top:30px}
.mt-s {margin-top:20px}
.mt-ss {margin-top:10px}

.mb {margin-bottom:30px}
.mb-s {margin-bottom:20px}
.mb-ss {margin-bottom:10px}

.mt-l {margin-top:50px}
.mt-ll {margin-top:60px}
.mt-lll {margin-top:70px}
.mb-l {margin-bottom:50px}
.mb-ll {margin-bottom:60px}
.mb-lll {margin-bottom:70px}


/*
************************************************************************
 パッディング
************************************************************************
*/
.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;}

/*英語版のみ使用 両端寄せ*/
.ta-just   {text-align: justify !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;
}
.fc-grey
{
	color:#999;
}
/*
************************************************************************
* インデント
************************************************************************
*/
/*2行目以降文字下げる*/
.indent-05{padding-left:0.5em;text-indent: -0.5em;}
.indent-10{padding-left:1em;text-indent: -1em;}
.indent-15{padding-left:1.5em;text-indent: -1.5em;}
.indent-20{padding-left: 2em;text-indent: -2em;}

/*
************************************************************************
* 文字間
************************************************************************
*/
.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:767px) {
	/*
	************************************************************************
	 マージン
	************************************************************************
	*/
	.mt {margin-top:4vw} /*750px時30px*/
	.mt-s {margin-top:2.67vw} /*750px時20px*/
	.mt-ss {margin-top:1.3333vw} /*750px時10px*/

	.mt-l {margin-top:6.6666vw} /*750px時50px*/
	.mt-ll {margin-top:8vw} /*750px時60px*/
	.mt-lll {margin-top:9.3333vw} /*750px時70px*/

	.mb {margin-bottom:4vw} /*750px時30px*/
	.mb-s {margin-bottom:2.67vw} /*750px時20px*/
	.mb-ss {margin-bottom:1.3333vw} /*750px時10px*/

	.mb-l {margin-bottom:6.6666vw} /*750px時50px*/
	.mb-ll {margin-bottom:8vw} /*750px時60px*/
	.mb-lll {margin-bottom:9.3333vw}/*750px時70px*/


	/*
	************************************************************************
	 パッディング
	************************************************************************
	*/
	.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;}
}