@charset "utf-8";

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

/*****************************************************************************************************
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;
}








/*****************************************************************************************************
セッション リスト
******************************************************************************************************/
.session-list {
    background-color: #FFF;
    padding: 75px 15px;
    text-align: center;
}
.session-list > div {
    max-width: 1000px;
    margin: 0 auto;
}

.session-list h3 {
    font-size: 150%;/*24*/
}
.session-list h3 img {
    margin-bottom: 10px;
}

.session-list h4 {
    margin-top: 1.5em;
}
.session-list p {
    font-size: 87.5%;/*14*/
}

.session-list_btn {
    padding-top: 20px;
}
.session-list_btn a.btn {
    margin: 10px 5px 0 5px;
}