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

kakuyasu-hp-custom.css
英語サイト用
********************************************************************************/
/*============================================================
 サイト共通　基本色
*============================================================*/
:root {
    --common-color-text: #111;           /* 基本テキスト色 */
    /* --common-color-main: #000;           メイン色 */
    --common-color-main: #013FB7;           /* メイン色 */
    --common-color-sub: #fff;            /* サブ色 */
    --common-color-bg1: #111;            /* サブ色 */
    --common-color-accent: #F7BC27;      /* アクセント色 */
    --common-color-attention: #FF451D;   /* 注意色 */
    --common-color-link: #2784D6;        /* テキストリンク色 */
    --common-color-notice: #B3B3B3;      /* 注釈色 */
}

/*============================================================
 サイト共通
*============================================================*/
body {
    /* font-family: Roboto; */
}
p {
    word-break: break-word;
}

/*============================================================
 サイト共通　見出し
*============================================================*/
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;
}


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

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

#site-footer {
    background-color: var(--common-color-bg1);
}

/*============================================================
 サイト共通　パーツ調整
*============================================================*/
.kyhp-btn[data-type="border"] > a {
    font-size: 18px;    
    font-weight: 700;
    line-height: 32px;
    padding: 8px;
}
.kyhp-btn input[name="submitBack"] {
    background-color: grey;
}
/* CTAセクション
---------------------------------------- */
.kyhp-sec-cta[data-name="contact"] {
    /* background-image: url(../images/sample/cta-bg.jpg); */
    background: var(--line, linear-gradient(45deg, #013FB7 0%, #0148D0 46.37%, #8AB2FF 100%));
    color: #fff;
}
.kyhp-sec-cta[data-name="contact"] .kyhp-btn {
    background-color: #fff;
    color: var(--common-color-main);
}
.kyhp-sec-cta[data-name="contact"] .kyhp-btn a {
    color: var(--common-color-main);
}
/* リスト
---------------------------------------- */
.kyhp-card-list[data-type="illust"] .image img {
    max-width: 256px;
}
.kyhp-dl-list .item dt {
    max-width: none;
}
/*============================================================
 トップページ調整
*============================================================*/
/* メインビジュアル
---------------------------------------- */
#page-top.home #mainvisual {
    height: auto;
    /* 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: 0;
    padding: 0;
    overflow: hidden;
}
#page-top #mainvisual::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.2);
    left: 0;
    top: 0;
    z-index: 1;
}
#page-top #mainvisual video {
    display: block;
    min-width: 100%;
    min-height: 100%;
}
#page-top #mainvisual .info {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    z-index: 2;
}
#page-top #mainvisual .info .inner {
    display: block;
}
#page-top #mainvisual .catch-copy {
    color: var(--common-color-text);
    text-align: center;
    text-shadow: 4px 4px 10px #0000001a;
    /* text-shadow: ; */
    font-size: 64px;
    font-weight: 800;
    line-height: 120%;
}

/*セクション lead
---------------------------------------- */
#page-top #sec-lead {
    background: var(--radial, radial-gradient(50% 50.00% at 50% 50.00%, #2D3034 0%, #11161B 100%));
}

#page-top #sec-lead .sec-lead {
    color: rgba(255, 255, 255, 0.50);
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    /* line-height: 220%; */
    line-height: 1.6;
}
#page-top #sec-lead .sec-lead strong {
    color: var(--common-color-sub);
}
/*セクション service
---------------------------------------- */
#page-top #sec-service {
    background: linear-gradient(360deg, #013FB7 0%, #6398FF 100%);
}
#page-top #sec-service .sec-title {
    color: rgba(255, 255, 255, 0.50);
    text-align: center;
    font-size: 96px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
}
#page-top #sec-service .kyhp-card-list .item {
    background: transparent;
    color: var(--common-color-sub);
}
#page-top #sec-service .kyhp-btn {
    margin: 0 auto;
}

/*セクション works
---------------------------------------- */
#page-top #sec-works .sec-title {
    color: rgba(1, 63, 183, 0.50);
    text-align: center;
    font-size: 96px;
    font-weight: 700;
    line-height: 100%;
}

/*セクション about
---------------------------------------- */
#page-top #sec-about {
    background: var(--radial, radial-gradient(50% 50.00% at 50% 50.00%, #2D3034 0%, #11161B 100%));
    color: var(--common-color-sub);
}
#page-top #sec-about .sec-title {
    color: rgba(255, 255, 255, 0.50);
    text-align: center;
    font-size: 96px;
    font-weight: 700;
    line-height: 100%;
}
#page-top #sec-about .kyhp-card-list .item {
    background: transparent;
}
#page-top #sec-about .kyhp-btn {
    margin: 0 auto;
}
/*セクション career
---------------------------------------- */
#page-top #sec-career .title {
    color: rgba(1, 63, 183, 0.50);
    font-size: 96px;
    font-weight: 700;
    line-height: 100%;
}
/*セクション blog
---------------------------------------- */
#page-top #sec-blog .sec-title {
    color: rgba(1, 63, 183, 0.50);
    font-size: 96px;
    font-weight: 700;
    line-height: 100%;
    text-align: left;
}

/*============================================================
 下層共通
*============================================================*/
/* メインビジュアル調整
---------------------------------------- */
body.page-lower {
    /* background-color: var(--common-color-bg1); */
    padding-top: 0;
}
.page-lower #breadcrumb {
    /* position: absolute; */
    margin-bottom: 0;
}
.page-lower #mainvisual {
    color: var(--common-color-sub);
    margin-bottom: 0;
    padding-top: 160px;
    padding-bottom: 48px;
    background: var(--radial, radial-gradient(50% 50.00% at 50% 50.00%, #2D3034 0%, #11161B 100%));
}
.page-lower #mainvisual .inner {
    gap: 8px;
}
.page-lower #main-contents {
    padding-top: 64px;
    background-color: var(--common-color-sub);
}
/* パーツ
---------------------------------------- */
.page-lower .block-title {
    color: #11111180;
    font-size: 24px;
    margin-bottom: 16px;
}
.page-lower .kyhp-color-box strong {
    color: inherit;
}
.page-lower .kyhp-ol-list > li:not(:last-child) {
    margin-bottom: 16px;
}
.page-lower .kyhp-dl-list .item {
    padding-bottom: 0;
    align-items: center;
}


/*============================================================
 アーカイブ
*============================================================*/
.archive #sec-post-list .cate-link {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 32px;
    align-items: center;
    margin-bottom: 32px;
    flex-wrap: wrap;    
}
.archive #sec-post-list .cate-link a {
    background-color: var(--common-color-bg1);
    color: var(--common-color-sub);
    padding: 10px;
    min-width: 180px;
    text-align: center;
}
.archive #sec-post-list .cate-name span {
    background-color: #111;
    color: #fff;
    padding: 4px 8px;
}
/*============================================================
 記事詳細
*============================================================*/
.single #sec-info .post-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.single #sec-info .post-category > span {
    border-radius: 2px;
    background-color: #EEF5FF;
    padding: 8px;
    color: #111;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
}
/* 記事コンテンツ 要素
---------------------------------------- */
h2.wp-block-heading {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}
h3.wp-block-heading {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}
.block-post-content ul ,
.block-post-content ol {
    background-color: #F9F9F9;
    border-radius: 6px;
    padding: 24px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/*============================================================
 フォーム
*============================================================*/
.page-form #form-footer .policy .policy-link {
    color: blue;
}
/********************************************************************************

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.home #mainvisual{
        /* background-position: center;
        background-size: min(75%, 378px) auto;
        height: var(--common-vh);
        position: static; */
        height: 70vh;
    }
    #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%;
    }
    #page-top #mainvisual video {
        /* display: none; */
        transform: translateX(-50%);
    }
    #page-top #mainvisual .catch-copy {
        font-size: 40px;
    }
    /* セクション
    ---------------------------------------- */

    /*============================================================
     サンプルページ 調整
    *============================================================*/
    /* セクション
    ---------------------------------------- */
    /*============================================================
    フォーム
    *============================================================*/
    .page-form #sec-step .box-step .step {
        margin-right: 24px;
        width: auto;
    }
    .page-form #sec-step .box-step .step:not(:last-child):after {
        right: -40px;

    }


}