@charset "utf-8";

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

/*
************************************************************************
* レスポンシブ別表示切り替え
************************************************************************
*/
@media screen and (max-width:640px)
{
	.pc-visible  {display:none !important;}
	.pc-tab-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;}
}

/*
************************************************************************
 フォントファミリー
************************************************************************
*/
.ff-noto_sans{font-family:"Noto Sans JP", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-weight:400;}
.ff-noto_sans_thin{font-family:"Noto Sans JP", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-weight:300;}
.ff-noto_serif{font-family:"Noto Serif JP", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-weight:400;}
.ff-noto_serif_thin{font-family:"Noto Serif JP", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-weight:300;}

.ff-alp {font-family:'Pathway Gothic One', "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-weight:300;}
.ff-num {font-family:'Pathway Gothic One', "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-weight:300;}

/*
************************************************************************
 フォントウェイト
************************************************************************
*/
.fw-bold{font-weight: bold;}
.fw-7   {font-weight: 700;}
.fw-5   {font-weight: 500;}
.fw-4   {font-weight: 400;}
.fw-3   {font-weight: 350;}
.fw-3   {font-weight: 300;}
.fw-1   {font-weight: 100;}

/*
************************************************************************
 フォントサイズ
************************************************************************
*/
.fs-s{font-size:0.8em;}
.fs-l{font-size:1.2em;}
.fs-ll{font-size:1.5em;}
.fs-lll{font-size:2.0em;}

.fc-orange
{
	color:#EF7000;
}

/*
************************************************************************
 リンク
************************************************************************
*/
a
{
	text-decoration: none;
}
a:hover
{
	text-decoration: none;
}
a.link-text
{
	font-weight: bold;
	text-decoration: underline;
}
a.link-text:hover
{
	text-decoration: none;
}

/*
************************************************************************
 リスト
************************************************************************
*/
ul.flex-list
{
	display: flex;
	flex-wrap: wrap;
	margin:-0.5em;
	
	padding:0;
	list-style:none;
}
ul.flex-list li
{
	padding:0;
	margin:0.5em;
	list-style:none;
	line-height:1;
}

/*
************************************************************************
 テキスト
************************************************************************
*/

.ta-left{text-align: left;}
.ta-center{text-align: center;}
.ta-right{text-align: right;}

.inline-block
{
	display:inline-block;
}
/*
************************************************************************
 角丸
************************************************************************
*/
.rd-10 {border-radius: 10px; overflow:hidden;}
.rd-20 {border-radius: 20px; overflow:hidden;}
.rd-30 {border-radius: 30px; overflow:hidden;}

/*
************************************************************************
 マージン
************************************************************************
*/
.mt-05em     {margin-top:0.5em}
.mb-05em     {margin-bottom:0.5em}
.mr-05em     {margin-right:0.5em}
.ml-05em     {margin-left:0.5em}

.mt-1em     {margin-top:1em}
.mb-1em     {margin-bottom:1em}
.mr-1em     {margin-right:1em}
.ml-1em     {margin-left:1em}

.mt-2em     {margin-top:2em}
.mb-2em     {margin-bottom:2em}
.mr-2em     {margin-right:2em}
.ml-2em     {margin-left:2em}

/*
************************************************************************
 改行制御etc
************************************************************************
*/
.ellipsis
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.justify
{
    text-align: justify;
    text-justify: inter-ideograph;
}

/*
************************************************************************
 枠つきBOX
************************************************************************
*/
.bordered
{
	border:1px solid #CCCCCC;
	border-radius:0.5em;
	padding:1.0em;
}
.bordered.bordered-caution
{
	border:2px solid #AA3333;
	border-radius:0.5em;
	padding:1.0em;
	
	color:#AA3333;
	font-weight:bold;
}

.youtube
{
	padding-top:56.25%;
}
.youtube iframe
{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	
	width:80%;
	height:100%;

	margin: 0 auto;
}

.flex-list
{
	display: flex;
	flex-wrap: wrap;
	
	margin:-0.5em;
}
.flex-list > *
{
	margin:0.5em;
}



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

}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
	.rd-10 {border-radius: 1.5625vw;}
	.rd-20 {border-radius: 3.125vw;}
	.rd-30 {border-radius: 4.6875vw;}
	
	.sp-ta-left{text-align: left;}
	.sp-ta-center{text-align: center;}
	.sp-ta-right{text-align: right;}
	
	.sp-fs-s{font-size:0.8em;}
	.sp-fs-l{font-size:1.2em;}
	.sp-fs-ll{font-size:1.5em;}
	.sp-fs-lll{font-size:2.0em;}
	
	.sp-img80{width:80%;display:block;margin:0 auto;}

	.youtube iframe
	{
		width: 100%;
	}
}