@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: #FFF url("../images/home/feature_bg.png") no-repeat center center;
    background-size: auto 500px;
    height: 500px;
}
@media screen and (max-width: 820px) {
    .feature {
        background-size: auto 400px;
        height: 400px;
    }
}





/*****************************************************************************************************
概要
******************************************************************************************************/
.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: 52%;
}
.summary_r {
    width: 48%;
}

@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;
}






/*****************************************************************************************************
あなたがこのような方でしたら、ぜひご参加ください。
******************************************************************************************************/
.recommend {
    background: url("../images/common/bg_dot.png") no-repeat center top;
    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%;
    }
}





/*****************************************************************************************************
公式アカウント
******************************************************************************************************/
.official-account {
    background-color: #2F9FBC;
    color: #FFF;
    padding: 50px 15px;
    text-align: center;
}
.official-account > div {
    max-width: 1000px;
    margin: 0 auto;
}

.official-account h2 {
    font-size: 118.8%;/*19*/
}
.official-account p {
    font-size: 87.5%;/*14*/
    margin-top: 1em;
}






/*****************************************************************************************************
セッションカテゴリ
******************************************************************************************************/
.category {
    background: url("../images/common/bg_dot.png") no-repeat center top;
    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.platinum li {
	width: 50%;
    padding: 50px 0;
}
.sponsor ul.gold li {
	width: 33.33%;
    padding: 40px 0;
}
.sponsor ul.silver li {
	width: 25%;
    padding: 30px 0;
}
.sponsor ul.bronze li {
    width: 25%;
    padding: 20px 0;
    font-size: 87.5%;/*14*/
    vertical-align: top;
}
.sponsor ul.bronze li a {
    color: #222;
}

@media screen and (max-width: 820px) {
    .sponsor ul.platinum li {
        width: 100%;
    }
    .sponsor ul.gold li {
        width: 50%;
    }
    .sponsor ul.silver li,
    .sponsor ul.bronze li {
        width: 33.33%;
    }
}
@media screen and (max-width: 700px) {
    .sponsor ul.gold li,
    .sponsor ul.silver li,
    .sponsor ul.bronze li {
        width: 100%;
    }
}

.sponsor .logo { width: 100%; }

/* DIAMOND */
.sponsor .logo.supportas      { max-width: 300px; }
.sponsor .logo.juppo          { max-width: 200px; }
.sponsor .logo.txpmedical     { max-width: 250px; }
.sponsor .logo.balloonhelp    { max-width: 300px; }
.sponsor .logo.vonage         { max-width: 250px; }

/* PEARL */
.sponsor .logo.yeswecan       { max-width: 150px; }
.sponsor .logo.kotobukishokai { max-width: 200px; }
.sponsor .logo.genecom        { max-width: 225px; }
.sponsor .logo.dbpowers       { max-width: 150px; }
.sponsor .logo.pattosystem    { max-width: 150px; }

/* RUBY */
.sponsor .logo.iandc          { max-width: 200px; }
.sponsor .logo.arsystem       { max-width: 125px; }
.sponsor .logo.kawai          { max-width: 100px; }

/* SAPPHIRE */
.sponsor .logo.nishikawa      { max-width: 100px; }

/* Registration Partner */
.sponsor .logo.eventregist    { max-width: 200px; }











/*****************************************************************************************************************************************
new.html
*****************************************************************************************************************************************/
span.session-id {
    display: inline-block;
    color: #FFF;
    padding: 0 5px;
}

/*****************************************************************************************************
Claris のお客様は以下のような問題を解決しています。
******************************************************************************************************/
.problem {
    background: url("../images/common/bg_dot.png") no-repeat center top;
    background-color: #f2f2f7;
    padding: 75px 0;
}

/******************************/
.problem_head,
.problem_foot {
    box-sizing: border-box;
    padding: 0 15px;
    max-width: 1030px;
    margin: 0 auto;
    text-align: center;
}
.problem_head {
    padding-bottom: 40px;
}
.problem_foot {
    padding-top: 40px;
}

.problem_head h2 {
    font-size: 150%;/*24*/
    margin-bottom: 1em;
}

.problem_foot h3 {
    font-size: 118.8%;/*19*/
}
.problem_foot h4 {
    margin-top: 1.5em;
}
.problem_foot p {
    font-size: 87.5%;/*14*/
}

/******************************/
ul.problem_list {
    box-sizing: border-box;
    padding: 0 10px;
    max-width: 1500px;
    margin: 0 auto;
    text-align: center;
    letter-spacing: -.4em;
}
ul.problem_list li {
    letter-spacing: normal;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    padding: 10px;
    width: 25%;
}
@media screen and (max-width: 1024px) {
    ul.problem_list li {
        width: 33.33%;
    }
}
@media screen and (max-width: 820px) {
    ul.problem_list li {
        width: 50%;
    }
}
@media screen and (max-width: 700px) {
    ul.problem_list li {
        width: 100%;
    }
}

.problem_list_card {
    background-color: #FFF;
    box-sizing: border-box;
    padding: 20px 15px;
}
.problem_list_card h3 {
    margin-top: 1em;
}
.problem_list_card p {
    font-size: 87.5%;/*14*/
    margin: 1em 0;
}
.problem_list_card a.btn {
    font-weight: 600;
}








/*****************************************************************************************************
Claris Road Show 2024 OSAKA に参加して、問題を解決に導こう!
******************************************************************************************************/
.participate {
    background-color: #FFF;
    padding: 75px 15px;
}
.participate > div {
    max-width: 1000px;
    margin: 0 auto;
}

.participate h2 {
    font-size: 150%;/*24*/
    text-align: center;
    margin-bottom: 1em;
}
@media screen and (max-width: 700px) {
    .participate h2 br {
        display: none;
    }
}

.participate p {
    margin-top: 1em;
}

.participate b.highlight {
    font-size: 118.8%;/*19*/
}
.participate b.highlight a {
    color: #222;
    background-color: #FFE67B;
}
.participate b.highlight a:hover {
    background-color: #FFD426;
}





/*****************************************************************************************************
製品紹介
******************************************************************************************************/
.product-intro {
    background-color: #FFF;
    padding: 75px 15px;
}
.product-intro > div {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

img.product-intro_logo {
    height: 50px;
    margin-bottom: 50px;
}
@media screen and (max-width: 700px) {
    img.product-intro_logo {
        height: auto;
        width: 80%;
    }
}

.product-intro h2 {
    font-size: 150%;/*24*/
}
.product-intro h3 {
    font-size: 118.8%;/*19*/
}






/*****************************************************************************************************
予習、できます。
******************************************************************************************************/
.prepare {
    background-color: #f2f2f7;
    padding: 75px 15px;
}
.prepare > div {
    max-width: 1000px;
    margin: 0 auto;
}

.prepare h2 {
    font-size: 200%;/*32*/
    text-align: center;
    margin-bottom: 1em;
}

.prepare h3 {
    font-size: 118.8%;/*19*/
    margin-top: 2em;
}
.prepare h3 a {
    color: #222;
    background-color: #4FE669;
}
.prepare h3 a:hover {
    background-color: #34C759;
}

.prepare p {
    margin-top: 1em;
}