@charset "utf-8";

/*****************************************************************************************************
汎用クラス
******************************************************************************************************/
.session-id {
    display: inline-block;
    border-radius: 100vmax;
    color: #FFF;
    padding: 0 0.5em;
    margin-right: 0.5em;
}


.session-id.track1 { background: #CF0F2B; }
.session-id.track5 { background: #FF7346; }
.session-id.track6 { background: #D66CD1; }
.session-id.track2 { background: #8F6FE7; }
.session-id.track3 { background: #4F91FF; }
.session-id.track4 { background: #2F54E5; }
.session-id.track9 { background: #1D1D1F; }
.session-id.track7 { background: #FFC728; /*color: #000;*/ }
.session-id.track8 { background: #AAAAAA; }


/*
a.session-title {
    text-decoration: underline;
}
*/














/*****************************************************************************************************
トップの帯
******************************************************************************************************/
.bar_top {
    /*background-image: linear-gradient(90deg, #1DC598 5%, #4CAEF3 50%, #FF61BE 95%);*/
    background: linear-gradient(90deg, rgba(47,84,229,1) 0%, rgba(79,145,255,1) 25%, rgba(143,111,231,1) 50%, rgba(214,108,209,1) 75%, rgba(255,115,70,1) 100%);
    /*background:linear-gradient(90deg, rgba(47,84,229,1) 0%, rgba(91,124,255,1) 100%);*/
    color: #FFF;
    padding: 10px 15px;
    text-align: center;
    font-weight: 600;
    font-size: 150%;/*24*/
    
    font-size: 118.75%;/*19*/
}
@media screen and (max-width: 900px) {
    .bar_top {
        padding: 10px 15px;
        font-size: 100%;/*16*/
    }
}







/*****************************************************************************************************
フィーチャー2
******************************************************************************************************/
.feature2 {
    background: url("../images/home/feature_bg.png") no-repeat left top / 100% 100%;
}
.feature2 > div {
    display: table;
    width: 100%;
    max-width: 1230px;
    margin: 0 auto;
}
.feature2_l,
.feature2_r {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
}

/* 左 */
.feature2_l {
    text-align: center;
}
.feature2_l img {
    width: 100%;
    max-width: 500px;
}

/* 右 */
.feature2_r {
    box-sizing: border-box;
    padding: 0 15px;
}
.feature2_r h1 {
    font-size: 150%;/*24*/
}
.feature2_r p {
    margin-top: 1em;
}
.feature2_r h2 {
    font-size: 118.75%;/*19*/
    margin-top: 2em;
}
.feature2_r ul {
    margin-top: 1em;
}
.feature2_r li {
    margin: 0.5em 0 0 1.5em;
}

@media screen and (max-width: 1000px) {
    .feature2 {
        background: none;
    }
    .feature2_l,
    .feature2_r {
        display: block;
        width: 100%;
    }
    .feature2_l {
        background: url("../images/home/feature_bg.png") no-repeat left top / 100% 100%;
    }
    .feature2_r {
        padding: 50px 15px;
    }
}






/*****************************************************************************************************
Claris カンファレンス で体験できること
******************************************************************************************************/
.participate {
    padding: 75px 15px;
}
.participate > div {
    max-width: 1000px;
    margin: 0 auto;
}

.participate h2 {
    font-size: 150%;/*24*/
    text-align: center;
}
.participate h2 span {
    display: inline-block;
    background: linear-gradient(90deg, rgba(47,84,229,1) 0%, rgba(79,145,255,1) 25%, rgba(143,111,231,1) 50%, rgba(214,108,209,1) 75%, rgba(255,115,70,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.participate p {
    margin-top: 38px;
}
.participate p b {
    font-size: 118.75%;/*19*/
}







/*****************************************************************************************************
ユーザ企業登壇の成功事例
******************************************************************************************************/
.problem {
    background: #F5F5F7;
    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;
}

/******************************/
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: #FFF;
    border-radius: 20px;
    box-sizing: border-box;
    padding: 20px 15px;
}
.problem_list_card img {
    opacity: 0.9;
}
.problem_list_card h3 {
    margin-top: 1em;
}
.problem_list_card p {
    font-size: 87.5%;/*14*/
    margin-top: 1em;
}









/*****************************************************************************************************
セッション リスト
******************************************************************************************************/
.session-list {
    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;
}






















/*****************************************************************************************************
Claris FileMaker がはじめての方向けのセッション
******************************************************************************************************/
.product-intro {
    padding: 75px 15px;
    text-align: center;
}
.product-intro > div {
    max-width: 1000px;
    margin: 0 auto;
}

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*/
    margin-top: 2em;
}


.product-intro p {
    margin-top: 0.5em;
}






/*****************************************************************************************************
予習、できます。
******************************************************************************************************/
.prepare {
    /*background: #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: #000;*/
    /*background: #4FE669;*/
}
.prepare h3 a:hover {
    /*background: #34C759;*/
}

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