@charset "utf-8";

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

汎用クラス

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

span.session-id {

    display: inline-block;

    color: #FFF;

    padding: 0 5px;

}

a.session-title {

    text-decoration: underline;

}















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

お申し込み

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

a.application {

    position: fixed;

    top: 200px;

    right: 10px;

    z-index: 8;

}

a.application img {

    width: 80px;

}

a.application img:hover {

    opacity: 0.9;

}



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

    a.application {

        top: auto;

        bottom: -70px;

        transition: bottom 0.5s;

    }

    a.application.scrolled {

        bottom: 80px;

        transition: bottom 0.5s;

    }

    a.application img {

        width: 60px;

    }

}















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

トップの帯

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

.bar_top {

    background-image: linear-gradient(90deg, #1DC598 5%, #4CAEF3 50%, #FF61BE 95%);

    color: #FFF;

    padding: 15px;

    text-align: center;

    font-weight: 600;

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

}

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

    .bar_top {

        padding: 10px 15px;

        font-size: 100%;/*16*/

    }

}















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

フィーチャー2

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

.feature2 {

    display: table;

    width: 100%;

    max-width: 1150px;

    margin: 0 auto;

}



.feature2_l,

.feature2_r {

    display: table-cell;

    vertical-align: middle;

    width: 50%;

}



.feature2_l img {

    width: 100%;

    max-width: 500px;

}



.feature2_r {

    text-align: right;

}

.feature2_r > div {

    display: inline-block;

    text-align: left;

}

.feature2_r h2 {

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

}

.feature2_r ul {

    margin-top: 1em;

}

.feature2_r li {

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

    margin: 0.5em 0 0 1.5em;

}



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

    .feature2_l,

    .feature2_r {

        display: block;

        width: 100%;

        text-align: center;

    }

    .feature2_r > div {

        padding: 0 15px 70px 15px;

    }

}

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

    .feature2_l img {

        width: 90%;

    }

    .feature2_r h2 {

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

    }

    .feature2_r li {

        font-size: 100%;/*16*/

    }

}

















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

イントロ

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

.intro {

    background-image: linear-gradient(0deg, #2C2C2E 0%, #000 75%);

    color: #FFF;

    padding: 100px 15px;

    text-align: center;

}



.intro h2 {

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

    display: inline-block;

    background: linear-gradient(90deg, #1DC598 5%, #4CAEF3 50%, #FF61BE 95%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}



.intro_symbol {

    font-size: 0;

    margin: 75px 0 25px 0;

}

.intro_symbol img {

    width: 50px;

}

img.intro_symbol_connect {

    margin: 0 50px;

}



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

    .intro h2 br,

    .intro p br {

        display: none;

    }

}

















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

Claris のお客様は以下のように DX を実現しています。

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

.problem {

    background-image: linear-gradient(135deg, #C6F0E5 5%, #D2EBFC 50%, #FFD7EF 95%);

    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-color: #FFF;

    box-sizing: border-box;

    padding: 20px 15px;

}

.problem_list_card img {

    opacity: 0.5;

}

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

}



















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

セッション リスト

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

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

    opacity: 0.5;

}



.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 カンファレンス 2025 に参加して、

業務改善やビジネス課題解決のヒントをお持ち帰りください！

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

.participate {

    padding: 75px 15px;

}

.participate > div {

    max-width: 1000px;

    margin: 0 auto;

}



.participate h2 {

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

    text-align: center;

    margin-bottom: 2em;

}

@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: #000;

    background: #FFE67B;

}

.participate b.highlight a:hover {

    background: #FFD426;

}



















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

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

}



















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

予習、できます。

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

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

}