@charset "utf-8";

/*****************************************************************************
.showcase-heading
*****************************************************************************/
.showcase-heading {
    padding: 50px 10px 25px 10px;
}
.showcase-heading > div {
    max-width: 1000px;
    margin: 0 auto;
}

.showcase-heading h1 {
    font-size: 150%;/*24*/
}
.showcase-heading p {
    font-size: 81.3%;/*13*/
}




/*****************************************************************************
.showcase-container
*****************************************************************************/
.showcase-container {
    padding: 0 10px 75px 10px;
}
.showcase-container > div {
    max-width: 1000px;
    margin: 0 auto;
}




/*****************************************************************************
.level-link
*****************************************************************************/
ul.level-link {
	letter-spacing: -.4em;
}
ul.level-link li {
	letter-spacing: normal;
    display: inline-block;
    margin: 10px 10px 0 0;
}

ul.level-link li a {
	display: block;
    
    font-size: 81.3%;/*13*/
	font-weight: bold;
	color: #FFF;
    
    padding: 5px 10px;
    border-radius: 5px 5px 0 0;
}
ul.level-link li a.platinum { background-color: #E8E8E8; color: #222; }
ul.level-link li a.gold     { background-color: #E8E866; color: #222; }
ul.level-link li a.silver   { background-color: #BBBBBB; }
ul.level-link li a.bronze   { background-color: #D9A300; }
ul.level-link li a.training { background-color: #34C759; }

ul.level-link li a.diamond  { background-color: #D5EBF7; color: #222; }
ul.level-link li a.pearl    { background-color: #F8E0F3; color: #222; }
ul.level-link li a.ruby     { background-color: #CA3370; }
ul.level-link li a.sapphire { background-color: #3C6CDF; }




/*****************************************************************************
.level-bar
*****************************************************************************/
.level-bar {
	position: relative;
    display: inline-block;
    
    font-size: 100%;/*16*/
    font-weight: bold;
	color: #FFF;
    
    padding: 5px 15px;
    border-radius: 10px 10px 0 0;
    
    margin-top: 50px;
}
.level-bar.platinum { background-color: #E8E8E8; color: #222; }
.level-bar.gold     { background-color: #E8E866; color: #222; }
.level-bar.silver   { background-color: #BBBBBB; }
.level-bar.bronze   { background-color: #D9A300; }
.level-bar.training { background-color: #34C759; }

.level-bar.diamond  { background-color: #D5EBF7; color: #222; }
.level-bar.pearl    { background-color: #F8E0F3; color: #222; }
.level-bar.ruby     { background-color: #CA3370; }
.level-bar.sapphire { background-color: #3C6CDF; }

.anchor {
	position: absolute;
	top: 0;
}





/*****************************************************************************
.showcase
*****************************************************************************/
.showcase {
	position: relative;
    display: table;
    width: 100%;
    border-top: solid 1px #CCC;
}

.showcase-l,
.showcase-r {
    display: table-cell;
    vertical-align: top;
}
.showcase-l {
	width: 40%;
    padding: 50px 0;
    text-align: center;
}
.showcase-r {
	width: 60%;
    padding: 30px 0;
}
@media screen and (max-width: 820px) {
    .showcase-l,
    .showcase-r {
        display: block;
        width: 100%;
    }
    .showcase-r {
        padding-top: 0;
    }
}

/* テキスト ******************************************************/
.showcase h3 {
    font-size: 106.3%;/*17*/
    margin: 0 0 20px 0;
}

.showcase h4 {
    font-size: 93.8%;/*15*/
    margin: 15px 0 0 0;
}
.showcase h5 {
    font-size: 87.5%;/*14*/
    margin: 15px 0 0 0;
}

.showcase p {
    font-size: 81.3%;/*13*/
    margin: 5px 0 10px 0;
}
.showcase p:last-child {
    margin-bottom: 0;
}

.showcase ul {
    font-size: 81.3%;/*13*/
    margin: 0 0 10px 0;
}
.showcase ul:last-child {
    margin-bottom: 0;
}
.showcase ul li {
    margin: 5px 0 0 1.5em;
}

.showcase ol {
    font-size: 81.3%;/*13*/
    margin: 0 0 10px 0;
}
.showcase ol:last-child {
    margin-bottom: 0;
}
.showcase ol li {
    margin: 5px 0 0 1.5em;
}

/* ロゴ ************************************************************/
.showcase .logo {
    width: 100%;
    /*max-width: 150px;*/
}

/* DIAMOND */
.showcase .logo.yeswecan       { max-width: 150px; }
.showcase .logo.kotobukishokai { max-width: 200px; }
.showcase .logo.genecom        { max-width: 225px; }
.showcase .logo.technicalunion { max-width: 250px; }

/* PLATINUM */
.showcase .logo.vonage         { max-width: 200px; }

/* GOLD */
.showcase .logo.cybertrust     { max-width: 150px; }
.showcase .logo.startiaraise   { max-width: 200px; }
.showcase .logo.txpmedical     { max-width: 200px; }

/* SILVER */
.showcase .logo.juppo          { max-width: 150px; }
.showcase .logo.dbpowers       { max-width: 150px; }
.showcase .logo.too            { max-width: 125px; }
.showcase .logo.pattosystem    { max-width: 150px; }

/* BRONZE */
.showcase .logo.iandc          { max-width: 250px; }
.showcase .logo.atdel          { max-width: 275px; }
.showcase .logo.wisdom         { max-width: 150px; }
.showcase .logo.icds           { max-width: 200px; }
.showcase .logo.supportas      { max-width: 225px; }
.showcase .logo.balloonhelp    { max-width: 250px; }

/* トレーニング相談 */
.showcase .logo.topoffice      { max-width: 150px; }
.showcase .logo.u-nexus        { max-width: 225px; }