@charset "utf-8";

/*
************************************************************************
* 協賛表示
* @copyright Revolme Inc.
************************************************************************
*/

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */
.relational-link
{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:stretch;
    align-content:stretch;
    
    margin:-2em;
}
.relational-link > .relational-link-01
{
	margin:2em;
	flex:0 0 auto;
}
.relational-link > .relational-link-02
{
	margin:2em;
	flex:0 0 auto;
}
.relational-link > .relational-link-03
{
	margin:2em;
	flex:1 0 auto;
}
.relational-link .relational-link-title
{
	line-height:1;
	padding-left:0.5em;
	border-left:0.5em solid;
	margin-bottom:0.5em;
}
.relational-link .relational-link-title .main
{
	font-size:1.2em;
	font-weight:bold;
}
.relational-link .relational-link-list
{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:flex-start;
    align-items:stretch;
    align-content:stretch;
    
    margin:-1em;
}
.relational-link .relational-link-list .relational-link-list-item
{
    display:block;
    margin:1em;
    flex:0 0 200px;
}
.relational-link > .relational-link-03 .relational-link-list .relational-link-list-item
{
    display:block;
    margin:1em;
    flex:0 0 180px;
}

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

}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
	.relational-link
	{
	    display:flex;
	    flex-direction:row;
	    flex-wrap:wrap;
	    justify-content:flex-start;
	    align-items:stretch;
	    align-content:stretch;
	    
	    margin:-1em;
	}
	.relational-link > .relational-link-01
	{
		margin:1em;
		flex:0 0 calc(100% - 2em);
		order:1;
	}
	.relational-link > .relational-link-02
	{
		margin:1em;
		flex:0 0 calc(100% - 2em);
		order:3;
	}
	.relational-link > .relational-link-03
	{
		margin:1em;
		flex:0 0 calc(100% - 2em);
		order:2;
	}
	.relational-link .relational-link-title
	{
		line-height:1;
		padding-left:0.5em;
		border-left:0.5em solid;
		margin-bottom:0.5em;
	}
	.relational-link .relational-link-title .main
	{
		font-size:1.2em;
		font-weight:bold;
	}
	.relational-link .relational-link-list
	{
	    display:flex;
	    flex-direction:row;
	    flex-wrap:wrap;
	    justify-content:flex-start;
	    align-items:stretch;
	    align-content:stretch;
	    
	    margin:-0.5em;
	}
	.relational-link .relational-link-list .relational-link-list-item
	{
	    display:block;
	    margin:0.5em;
	    flex:0 0 calc(50% - 1em);
	}

}