@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:90px}
.mt-s {margin-top:50px}
.mt-ss {margin-top:30px}
.mt-l {margin-top:100px}
.mt-ll {margin-top:110px}
.mt-lll {margin-top:120px}

.mb {margin-bottom:90px}
.mb-s {margin-bottom:50px}
.mb-ss {margin-bottom:30px}
.mb-l {margin-bottom:100px}
.mb-ll {margin-bottom:110px}
.mb-lll {margin-bottom:120px}


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

/*
************************************************************************
 フォント
************************************************************************
*/
.ff-libre{font-family: 'Libre Baskerville', a-otf-ryumin-pr6n, serif;letter-spacing: 0.1em;}
.ff-crimson{font-family: 'Crimson Text', a-otf-ryumin-pr6n, serif;}
.ff-old-standard{font-family: 'Old Standard TT', a-otf-ryumin-pr6n, serif;}
.ff-trajan{font-family: trajan-pro-3, serif;font-weight: 400;font-style: normal;}
.ff-season{font-family: "the-seasons", serif;font-weight: 400;font-style: normal;}
/*
************************************************************************
* 文字の太さ
************************************************************************
*/
.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;
}
/*
************************************************************************
* インデント
************************************************************************
*/
/*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-contact
{
	background-color:#666666;
}
.bg-tel
{
	background-color:#3f4c4c;
}
.bg-footer
{
	background-color:#2d3838;
}
.bg-gray
{
	background-color:#eeeeee;
}
/*
************************************************************************
* 背景柄
************************************************************************
*/
.bg-ptn1
{
	background-image:url(../../_img/common/bg/bg-ptn1.png);
	background-position:center top;
	background-repeat:repeat-y;
	background-size:auto;
}

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

	.mb {margin-bottom:15vw;}
	.mb-s {margin-bottom:10vw;}
	.mb-l {margin-bottom:20vw;}


	/*
	************************************************************************
	 パッディング
	************************************************************************
	*/
	.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-mt-0          {margin-top:0vw}

	.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-mb-0          {margin-bottom:0vw}

	/*
	************************************************************************
	 パッディング
	************************************************************************
	*/
	.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;}
	
	/*
	************************************************************************
	* 背景柄
	************************************************************************
	*/
	.bg-contact
	{
		background-color:#bbbbbb;
	}


}