@charset "UTF-8";
/********************************************************************************

kakuyasu-hp-custom.css

********************************************************************************/
/*============================================================
 サイト共通　基本色
*============================================================*/
:root {
    --common-color-text: #000;           /* 基本テキスト色 */
    --common-color-main: #1E5598;           /* メイン色 */
    --common-color-sub: #fff;            /* サブ色 */
    --common-color-accent: #F7BC27;      /* アクセント色 */
    --common-color-attention: #FF451D;   /* 注意色 */
    --common-color-link: #2784D6;        /* テキストリンク色 */
    --common-color-notice: #B3B3B3;      /* 注釈色 */
}

.inner {
	gap: 16px;
}

/*============================================================
 サイト共通　見出し
*============================================================*/
h1.page-title {
    font-weight: bold;
    font-size: 48px;
    line-height: 140%;
}
.page-title-en {
    font-size: 20px;
    line-height: 140%;
    color: #B3B3B3;
}
h2.sec-title {
    font-weight: bold;
    font-size: 24px;
    line-height: 150%;
}
h3.block-title {
    font-weight: bold;
	font-size: 24px;
}


/*============================================================
 サイト共通　ヘッダー調整
*============================================================*/
/* 
---------------------------------------- */

/*============================================================
 サイト共通　フッター調整
*============================================================*/
/* メニューリスト
---------------------------------------- */
/* #site-footer #fnav .menu-list {
    width: 240px;
}
#site-footer #fnav .menu-list li {
    width: 84px;
} */

/*============================================================
 サイト共通　パーツ調整
*============================================================*/
.kyhp-btn {
	background: linear-gradient(93.6deg, #4B95D7 14.2%, #19488E 85.92%);
}
.kyhp-btn[data-type="border"] {
	background: #fff;
}
.kyhp-btn[data-type="white"] {
	background: #fff;
}
/* CTAセクション
---------------------------------------- */
.kyhp-sec-cta .catch span{
	font-size: 48px;
}
.kyhp-sec-cta[data-name="contact"] {
    background: linear-gradient(93.6deg, #4B95D7 14.2%, #19488E 85.92%);
    color: #fff;
}
.kyhp-sec-cta[data-name="contact"] .kyhp-btn {
    background-color: #fff;
    color: var(--common-color-main);
}
/* リスト
---------------------------------------- */
.kyhp-card-list[data-type="illust"] .image img {
    max-width: 256px;
}

/*============================================================
 トップページ調整
*============================================================*/
/* メインビジュアル
---------------------------------------- */
#page-top #mainvisual{
    height: var(--common-vh);
    background-color: var(--common-color-main);
    background-image: url(../images/top/mainvisual-bg.svg);
    background-repeat: no-repeat;
    background-position: top 40px left calc(50vw + 120px);
    background-size: 378px auto;
    color: #fff;
    position: relative;
    margin-bottom: 64px;
}
#page-top #mainvisual .info {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
#page-top #mainvisual .info .inner {
    display: block;
}
#page-top #mainvisual .info .site-title {
    font-weight: bold;
    font-size: 64px;
    line-height: 200%;
    margin-bottom: 48px;

}
#page-top #mainvisual .info .lead {
    font-weight: bold;
    font-size: 32px;
    line-height: 180%;
}

/*セクション　〇〇〇
---------------------------------------- */
#page-top #sec-●●●{
}
    
/*============================================================
 下層共通　メインビジュアル調整
*============================================================*/
.page-lower #mainvisual{
    
}

/*============================================================
 □□□ページ調整
*============================================================*/
/* セクション　〇〇〇　
---------------------------------------- */
#page-■■■ #sec-●●●{
    
}


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

for Tablet

********************************************************************************/
@media screen and (max-width: 959px) {
    /*============================================================
     サイト共通　見出し
    *============================================================*/
    h1.page-title {
        font-size: 32px;
        line-height: 140%;
    }
    .page-title-en {
        font-size: 16px;
        line-height: 140%;
    }
    h2.sec-title {
        font-size: 20px;
        line-height: 150%;
    }

    /*============================================================
     サイト共通　ヘッダー調整
    *============================================================*/

    /*============================================================
     サイト共通　フッター調整
    *============================================================*/

    /*============================================================
     サイト共通　パーツ調整
    *============================================================*/
    
    /*============================================================
     トップページ 調整
    *============================================================*/
    /* セクション
    ---------------------------------------- */

    /*============================================================
     サンプルページ 調整
    *============================================================*/
    /* セクション
    ---------------------------------------- */
    
}



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

for SP

********************************************************************************/
@media screen and (max-width: 767px) {
    /*============================================================
     サイト共通　見出し
    *============================================================*/

    /*============================================================
     サイト共通　ヘッダー調整
    *============================================================*/

    /*============================================================
     サイト共通　フッター調整
    *============================================================*/

    /*============================================================
     サイト共通　パーツ調整
    *============================================================*/

    /*============================================================
     トップページ 調整
    *============================================================*/
    /* メインビジュアル
    ---------------------------------------- */
    #page-top #mainvisual{
        background-position: center;
        background-size: min(75%, 378px) auto;
    }
    #page-top #mainvisual .info {
        text-align: center;
    }
    #page-top #mainvisual .info .site-title {
        font-size: 40px;
        line-height: 200%;
    }
    #page-top #mainvisual .info .lead {
        font-weight: bold;
        font-size: 24px;
        line-height: 180%;
    }
    /* セクション
    ---------------------------------------- */

    /*============================================================
     サンプルページ 調整
    *============================================================*/
    /* セクション
    ---------------------------------------- */

}