@charset "utf-8";



/*****************************************************************************************************

ホーム切り替えの帯

******************************************************************************************************/

.bar_to-new,

.bar_to-home {

    text-align: center;

    font-weight: 600;

    padding: 10px 0;

}

.bar_to-new a img,

.bar_to-home a img {

    height: 10px;

}



.bar_to-new {

    background-color: #34C759;

}

.bar_to-home {

    background-color: #FFD426;

}

.bar_to-new a {

    color: #FFF;

}

.bar_to-home a {

    color: #222;

}











/*****************************************************************************************************

フィーチャー

******************************************************************************************************/

.feature {

    background-color: #FFF;

    height: 500px;

    position: relative;

    overflow: hidden;

}



img.feature_pc {

    pointer-events: none;

    width: 1000px;

    height: 500px;

    position: absolute;

    top: 0;

    left: 50%;

    margin-left: -500px;

}

img.feature_sp {

    pointer-events: none;

    width: 100%;

    display: none;

}



@media screen and (max-width: 700px) {

    .feature {

        height: auto;

    }

    img.feature_pc {

        display: none;

    }

    img.feature_sp {

        display: block;

    }

}













/*****************************************************************************************************

概要

******************************************************************************************************/

.summary {

    background-color: #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: 50%;

}

.summary_r {

    width: 50%;

}



@media screen and (max-width: 820px) {

    .summary_l,

    .summary_r {

        display: block;

        width: 100%;

        text-align: center;

    }

}



.summary h2 {

    font-size: 150%;/*24*/

}

.summary h3 {

    font-size: 118.8%;/*19*/

}



/* カウントダウン ***********************************/

#countOutput {

    font-size: 87.5%;/*14*/

}

#countOutput span {

    font-weight: 600;

}



/* .share *******************************************/

.share {

    letter-spacing: -.4em;

}

.share a {

    letter-spacing: normal;

    display: inline-block;

    width: 20px;

    height: 20px;

}

a.share_t {

    background: url("../images/common/icon_sns_gray_t_v2.png") no-repeat center center;

    background-size: 20px 20px;

}

a.share_f {

    background: url("../images/common/icon_sns_gray_f.png") no-repeat center center;

    background-size: 20px 20px;

    margin-left: 20px;

}



/*****************************************************************************************************

概要 2

******************************************************************************************************/

.summary_2 {

    background-color: #333;

    color: #FFF;

    padding: 50px 15px;

}

.summary_2 > div {

    max-width: 1000px;

    margin: 0 auto;

}

























/*****************************************************************************************************

Claris カンファレンス とは

******************************************************************************************************/

.what-cc {

    background-color: #333;

    color: #FFF;

    padding: 35px 0;

}

.what-cc > div {

    display: table;

    width: 100%;

    max-width: 1030px;

    margin: 0 auto;

}



.what-cc_l,

.what-cc_r {

    display: table-cell;

    vertical-align: top;

    box-sizing: border-box;

    padding: 15px;

}

.what-cc_l {

    width: 40%;

}

.what-cc_r {

    width: 60%;

}



@media screen and (max-width: 820px) {

    .what-cc_l,

    .what-cc_r {

        display: block;

        width: 100%;

    }

}



.what-cc_l h2 {

    font-size: 150%;/*24*/

}

.what-cc_r p {

    font-size: 87.5%;/*14*/

}























/*****************************************************************************************************

来場者全員に Claris オリジナルグッズをプレゼント！

******************************************************************************************************/

.novelty {

    background-color: #f2f2f7;

    padding: 50px 15px;

    text-align: center;  

}

.novelty > div {

    max-width: 1000px;

    margin: 0 auto;

}



.novelty h2 {

    font-size: 150%;/*24*/

}



img.novelty_goods {

    pointer-events: none;

    width: 100%;

    max-width: 750px;

}











/*****************************************************************************************************

公式アカウント

******************************************************************************************************/

.official-account {

    background-color: #34C759;

    color: #000;

    padding: 50px 15px;

    text-align: center;  

}

.official-account > div {

    max-width: 1000px;

    margin: 0 auto;

}



.official-account h2 {

    font-size: 150%;/*24*/

}









/*****************************************************************************************************

新しいパスとチケットを導入

******************************************************************************************************/

.pass-ticket {

    background-color: #FFD426;

    color: #000;

    padding: 50px 15px;

    text-align: center;  

}

.pass-ticket > div {

    max-width: 1000px;

    margin: 0 auto;

}



.pass-ticket h2 {

    font-size: 150%;/*24*/

}









/*****************************************************************************************************

Claris カンファレンス - Annex

******************************************************************************************************/

.cc-annex {

    background-color: #60C0DB;

    color: #000;

    padding: 50px 15px;

    text-align: center;  

}

.cc-annex > div {

    max-width: 1000px;

    margin: 0 auto;

}



.cc-annex h2 {

    font-size: 150%;/*24*/

}









/*****************************************************************************************************

ピンバッジ

******************************************************************************************************/

.pin-badge {

    background-color: #376FA3;

    color: #FFF;

    padding: 50px 15px;

    text-align: center;  

}

.pin-badge > div {

    max-width: 1000px;

    margin: 0 auto;

}



.pin-badge h2 {

    font-size: 118.8%;/*19*/

}



@media screen and (max-width: 700px) {

    .pin-badge h2 br {

        display: none;

    }

}























/*****************************************************************************************************

あなたがこのような方でしたら、ぜひご参加ください。

******************************************************************************************************/

.recommend {

    background-color: #FFF;

    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;

    width: 25%;

    box-sizing: border-box;

    padding: 50px 15px 0 15px;

}



ul.recommend_list h3 {

    font-size: 87.5%;/*14*/

    margin: 1em 0;

}

ul.recommend_list a.btn {

    font-size: 75%;/*12*/

}



@media screen and (max-width: 820px) {

    ul.recommend_list li {

        width: 33.33%;

    }

}

@media screen and (max-width: 700px) {

    ul.recommend_list li {

        width: 50%;

    }

}













/*****************************************************************************************************

セッションカテゴリ

******************************************************************************************************/

.category {

    background-color: #FFF;

    padding: 75px 0;

    text-align: center;

}



.category > div {

    max-width: 1030px;

    margin: 0 auto;

    box-sizing: border-box;

    padding: 0 15px;

}

.category > div > h2 {

    font-size: 150%;/*24*/

}

.category > div > p {

    margin-top: 1em;

}



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;

    width: 33.33%;

    box-sizing: border-box;

    padding: 50px 15px 0 15px;

}



ul.category_list h3 {

    font-size: 118.8%;/*19*/

    margin-top: 12px;

}

ul.category_list p {

    font-size: 87.5%;/*14*/

    margin-bottom: 1em;

}

ul.category_list a.btn {

    font-size: 87.5%;/*14*/

}



.btn_tech {

    letter-spacing: -.4em;

}

ul.category_list .btn_tech a.btn {

    letter-spacing: normal;

    font-size: 75%;/*12*/

    margin: 10px 5px 0 5px;

}



@media screen and (max-width: 700px) {

    ul.category_list li {

        width: 100%;

    }

}













/*****************************************************************************************************

スポンサー

******************************************************************************************************/

.sponsor {

	background-color: #FFF;

    padding: 75px 15px;

    position: relative;

}

.sponsor > div {

	max-width: 1000px;

	margin: 0 auto;

}



.sponsor a.anchor {

    position: absolute;

	top: -60px;

}



.sponsor h2 {

	font-size: 150%;/*24*/

}

.sponsor h3 {

	font-size: 118.8%;/*19*/

    margin-top: 50px;

}



.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%; }

}



/*************************************************************/

.sponsor ul.diamond li {

    padding: 30px 0;

}

.sponsor ul.platinum li {

    padding: 30px 0;

}



.sponsor ul.gold li {

    padding: 25px 0;

}

.sponsor ul.silver li {

    padding: 20px 0;

}



.sponsor ul.bronze li {

    padding: 15px 0;

}

.sponsor ul.training li {

    padding: 15px 0;

}

.sponsor ul.sapphire li {

    padding: 15px 0;

}

.sponsor ul.rp li {

    padding: 15px 0;

}



/*************************************************************/

.sponsor .logo { width: 100%; }



/* DIAMOND */

.sponsor .logo.yeswecan       { max-width: 200px; }

.sponsor .logo.kotobukishokai { max-width: 275px; }

.sponsor .logo.genecom        { max-width: 350px; }

.sponsor .logo.technicalunion { max-width: 400px; }



/* PLATINUM */

.sponsor .logo.sb-cs          { max-width: 250px; }

.sponsor .logo.supportas      { max-width: 300px; }

.sponsor .logo.vonage         { max-width: 275px; }



/* GOLD */

.sponsor .logo.cybertrust     { max-width: 175px; }

.sponsor .logo.startiaraise   { max-width: 225px; }

.sponsor .logo.txpmedical     { max-width: 225px; }



/* SILVER */

.sponsor .logo.splash      { max-width: 225px; }

.sponsor .logo.dbpowers    { max-width: 150px; }

.sponsor .logo.too         { max-width: 125px; }

.sponsor .logo.pattosystem { max-width: 140px; }



/* BRONZE */

.sponsor .logo.iandc       { max-width: 175px; }

.sponsor .logo.imageone    { max-width: 100px; }

.sponsor .logo.wisdom      { max-width: 100px; }

.sponsor .logo.icds        { max-width: 125px; }

.sponsor .logo.juppo       { max-width: 100px; }

.sponsor .logo.balloonhelp { max-width: 150px; }

.sponsor .logo.beezwax     { max-width: 150px; }



/* トレーニング相談 */

.sponsor .logo.yeswecan2   { max-width:  75px; }

.sponsor .logo.candc       { max-width: 140px; }

.sponsor .logo.u-nexus     { max-width: 125px; }



/* Registration Partner */

.sponsor .logo.eventregist { max-width: 100px; }

















/*****************************************************************************************************

Claris Japan Excellence Award

******************************************************************************************************/

.award {

    display: table;

    width: 100%;

    background-color: #186A80;

}



.award_text {

    display: table-cell;

    width: 55%;

    

    color: #FFF;

    text-align: center;

    box-sizing: border-box;

    padding: 75px 15px;

}



.award_text h2 {

    font-size: 125%;/*20*/

    margin-bottom: 1em;

}

.award_text h3 {

    font-weight: 300;

    font-size: 93.8%;/*15*/

    margin-top: 1em;

}

.award_text p {

    font-size: 93.8%;/*15*/

}



.award_text a {

    color: #FFD426;

}

.award_text a:hover {

    color: #FFE67B;

}



.award_img {

    display: table-cell;

    width: 45%;

    

    background: url("../images/home/award_img.jpg") no-repeat center top;

    background-size: cover;

}



@media screen and (max-width: 820px) {

    .award {

        display: block;

    }

    .award_text {

        display: block;

        width: 100%;

    }

    .award_img {

        display: block;

        width: 100%;

        height: 540px;

    }

}

@media screen and (max-width: 700px) {

    .award_img {

        height: 360px;

    }

}

















/*****************************************************************************************************

Claris カンファレンス の模様

******************************************************************************************************/

.event-photo {

    background-color: #FFF;

    padding: 75px 0;

}



.event-photo h2 {

	font-size: 150%;/*24*/

    text-align: center;

    padding: 0 15px 1em 15px;

}



/*****************************************************************************

スライド

*****************************************************************************/

/* 矢印調整 */

.slick-prev {

    z-index: 1;

    left: 10px;

}

.slick-next {

    right: 10px;

}

.slick-prev:before, .slick-next:before {

    color: #000;

}



/* ロード時に一瞬縦並びになるのを防ぐ */

.slider {

    opacity: 0;

}

.slider.slick-initialized {

    opacity: 1;

    transition: opacity 1s;

}



/**************************************/

.slider-image img {

    height: 400px;

    margin: 0 10px;

    cursor: grab;

}

.event-photo img:active {

    cursor: grabbing;

}



.slider-title {

    text-align: center;

    width: 200px;

    margin: 1em auto 0 auto;

}



@media screen and (max-width: 1024px) {

    .slider-image img {

        height: 300px;

    }

}

@media screen and (max-width: 700px) {

    .slider-image img {

        height: 200px;

    }

}