@charset "utf-8";

/*****************************************************************************************************
フィーチャー
******************************************************************************************************/
.feature {
    height: 500px;
    position: relative;
    overflow: hidden;
}

img.feature_pc {
    width: 1000px;
    height: 500px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -500px;
}
img.feature_sp {
    display: none;
}

@media screen and (max-width: 900px) {
    .feature {
        height: 400px;
    }
    img.feature_pc {
        width: 800px;
        height: 400px;
        margin-left: -400px;
    }
}
@media screen and (max-width: 700px) {
    .feature {
        height: auto;
    }
    img.feature_pc {
        display: none;
    }
    img.feature_sp {
        display: block;
        width: 100%;
    }
}







/*****************************************************************************************************
概要
******************************************************************************************************/
.summary {
    background: #F2F2F7;
    padding: 35px 0;
}
.summary > div {
    display: table;
    width: 100%;
    max-width: 1030px;
    margin: 0 auto;
}

.summary_l,
.summary_r {
    display: table-cell;
    vertical-align: top;
    box-sizing: border-box;
    padding: 15px;
}
.summary_l {
    width: 52%;
}
.summary_r {
    width: 48%;
}

#countOutput {
    font-size: 81.25%;/*13*/
    margin-bottom: 1.231em;
}
#countOutput span {
    font-size: 123.1%;/*16*/
    font-weight: 600;
}

.summary h2 {
    font-size: 150%;/*24*/
}
.summary h3 {
    font-size: 118.75%;/*19*/
}
.summary h3 span {
    display: inline-block;
}

@media screen and (max-width: 900px) {
    .summary_l,
    .summary_r {
        display: block;
        width: 100%;
        text-align: center;
    }
}






/*****************************************************************************************************
汎用バー 1
******************************************************************************************************/
.bar_1 {
    padding: 50px 15px;
    text-align: center;
}
.bar_1 > div {
    max-width: 1000px;
    margin: 0 auto;
}

.bar_1 h2 {
    font-size: 150%;/*24*/
}
.bar_1 h3 {
    font-size: 118.75%;/*19*/
}
.bar_1 p {
    margin: 1em 0 0 0;
}
.bar_1 a.btn {
    margin: 1em 0.5em 0 0.5em;
}







/*****************************************************************************************************
課題
******************************************************************************************************/
.issue {
    background: #000;
    color: #FFF;
    padding: 75px 0 100px 0;
    text-align: center;
}

.issue h2 {
    font-size: 150%;/*24*/
    margin: 0 15px;
}

ul.issue_list {
    max-width: 1030px;
    margin: 0 auto;
    letter-spacing: -.4em;
}
ul.issue_list li {
    letter-spacing: normal;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    padding: 50px 15px 0 15px;
    width: 25%;
}
ul.issue_list li h3 {
    font-weight: 300;
    font-size: 93.75%;/*15*/
    margin-top: 1em;
}

p.issue_foot {
    font-weight: 600;
    font-size: 150%;/*24*/
    margin: 100px 15px 0 15px;
    display: inline-block;
    background: linear-gradient(90deg, #1DC598 5%, #4CAEF3 50%, #FF61BE 95%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media screen and (max-width: 900px) {
    ul.issue_list li {
        width: 33.33%;
    }
}
@media screen and (max-width: 700px) {
    ul.issue_list li {
        width: 50%;
    }
}







/*****************************************************************************************************
目的
******************************************************************************************************/
.recommend {
    padding: 75px 0;
    text-align: center;
}

.recommend h2 {
    font-size: 150%;/*24*/
    margin: 0 15px;
}

ul.recommend_list {
    max-width: 1030px;
    margin: 0 auto;
    letter-spacing: -.4em;
}
ul.recommend_list li {
    letter-spacing: normal;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    padding: 50px 15px 0 15px;
    width: 25%;
}
ul.recommend_list li h3 {
    font-size: 93.75%;/*15*/
    margin-top: 1em;
}
ul.recommend_list li a.btn {
    font-size: 81.25%;/*13*/
    margin-top: 1em;
}

@media screen and (max-width: 900px) {
    ul.recommend_list li {
        width: 33.33%;
    }
}
@media screen and (max-width: 700px) {
    ul.recommend_list li {
        width: 50%;
    }
}







/*****************************************************************************************************
セッションカテゴリ
******************************************************************************************************/
.category {
    padding: 75px 0;
    text-align: center;
}

.category h2 {
    font-size: 150%;/*24*/
    margin: 0 15px;
}
.category > p {
    margin: 1em 15px 0 15px;
}

ul.category_list {
    max-width: 1030px;
    margin: 0 auto;
    letter-spacing: -.4em;
}
ul.category_list li {
    letter-spacing: normal;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    padding: 50px 15px 0 15px;
    width: 33.33%;
}
ul.category_list li h3 {
    font-size: 118.75%;/*19*/
    margin-top: 0.5em;
}
ul.category_list li p {
    font-size: 93.75%;/*15*/
}
ul.category_list li > a.btn {
    font-size: 87.5%;/*14*/
    margin-top: 1em;
}

.btn_tech {
    letter-spacing: -.4em;
}
.btn_tech a.btn {
    letter-spacing: normal;
    font-size: 81.25%;/*13*/
    margin: 10px 5px 0 5px;
}

@media screen and (max-width: 900px) {
    ul.category_list li {
        width: 50%;
    }
}
@media screen and (max-width: 700px) {
    ul.category_list li {
        width: 100%;
    }
}










/*****************************************************************************************************
スポンサー
******************************************************************************************************/
.sponsor {
    padding: 75px 15px;
}
.sponsor > div {
    max-width: 1000px;
    margin: 0 auto;
}

.sponsor h2 {
    font-size: 150%;/*24*/
}
.sponsor h3 {
    font-size: 118.75%;/*19*/
    margin-top: 2em;
}

/* リスト ***********************************************/
.sponsor ul {
    letter-spacing: -.4em;
}
.sponsor ul li {
    letter-spacing: normal;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}
.sponsor ul.col2 li { width: 50%; }
.sponsor ul.col3 li { width: 33.33%; }
.sponsor ul.col4 li { width: 25%; }
.sponsor ul.col5 li { width: 20%; }

@media screen and (max-width: 1000px) {
    .sponsor ul.col2 li { width: 100%; }
    .sponsor ul.col3 li { width: 50%; }
    .sponsor ul.col4 li { width: 33.33%; }
    .sponsor ul.col5 li { width: 25%; }
}
@media screen and (max-width: 700px) {
    .sponsor ul.col3 li { width: 100%; }
    .sponsor ul.col4 li { width: 100%; }
    .sponsor ul.col5 li { width: 100%; }
}

ul.diamond li  { padding: 40px 0; }
ul.platinum li { padding: 35px 0; }
ul.gold li     { padding: 30px 0; }
ul.silver li   { padding: 25px 0; }
ul.bronze li   { padding: 20px 0; }
ul.emerald li  { padding: 15px 0; }
ul.training li { padding: 15px 0; }
ul.regist li   { padding: 15px 0; }


/* 画像 ***************************************************/
.sponsor img.logo {
    width: 100%;
}

/* DIAMOND */
img.logo.yeswecan       { max-width: 225px; }
img.logo.kotobukishokai { max-width: 300px; }
img.logo.genecom        { max-width: 375px; }
img.logo.technicalunion { max-width: 400px; }

/* PLATINUM */
img.logo.vonage { max-width: 300px; }

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

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

/* BRONZE */
img.logo.iandc       { max-width: 200px; }
img.logo.atdel       { max-width: 225px; }
img.logo.wisdom      { max-width: 125px; }
img.logo.icds        { max-width: 150px; }
img.logo.supportas   { max-width: 175px; }
img.logo.balloonhelp { max-width: 200px; }

/* EMERALD */
img.logo.cssg    { max-width:  75px; }
img.logo.jtpl    { max-width: 125px; }
img.logo.splash  { max-width: 175px; }
img.logo.briller { max-width: 150px; }

/* トレーニング相談 */
img.logo.yeswecan2   { max-width:  75px; }
img.logo.supportas2  { max-width: 125px; }
img.logo.topoffice   { max-width:  80px; }
img.logo.u-nexus     { max-width: 130px; }

/* Registration Partner */
img.logo.eventregist { max-width: 100px; }