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

kakuyasu-hp-custom.css

********************************************************************************/
/*============================================================
 サイト共通　基本色
*============================================================*/
:root {
    --common-color-text: #234;           /* 基本テキスト色 */
    --common-color-main: #234;           /* メイン色 */
    --common-color-sub: #EEFAFF;            /* サブ色 */
    --common-color-accent: #234;      /* アクセント色 */
    --common-color-attention: #D93838;   /* 注意色 */
    /* --common-color-link: #2784D6;        テキストリンク色 */
    --common-color-link: #234;        /* テキストリンク色 */
    --common-color-notice: #B3B3B3;      /* 注釈色 */
    --common-background-color-01: #F7F9FB;    /* 背景色 */
}

/*============================================================
 サイト共通　見出し
*============================================================*/
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: 700;
    font-size: 32px;
    line-height: 140%;
}
h3.block-title {
    font-weight: bold;
}

/*============================================================
 サイト共通　ヘッダー調整
*============================================================*/
header#fixed-header {
    display: none;
}

/*============================================================
 サイト共通　フッター調整
*============================================================*/
#site-footer {
    background-color: var(--common-background-color-01);
    color: var(--common-color-text);
}
/* 各ページリンク削除のため位置調整 */
#site-footer #fnav {
    justify-content: center; 
}
#site-footer #fnav .logo {
    text-align: center;
}
#site-footer #footer-info {
    justify-content: center;
}
#site-footer #footer-info #copyright {
    text-align: center;
} 
/* メニューリスト
---------------------------------------- */
#site-footer #fnav .menu-list {
    width: 288px;
}
#site-footer #fnav .menu-list li {
    width: 108px;
}

/*============================================================
 サイト共通　パーツ調整
*============================================================*/
/* パンくず */
#breadcrumb ul {
    color: var(--common-color-text);
}
/* CTA お問い合わせ
---------------------------------------- */
.kyhp-sec-cta[data-name="contact"] {
    background: var(--common-color-main);
    color: #fff;
    padding: 64px 0;
}
.kyhp-sec-cta[data-name="contact"] .kyhp-btn a {
    color: var(--common-color-main);
	background-color: #ffffff;
}
/* CTA お問い合わせ（フッター上部配置）
---------------------------------------- */
.kyhp-sec-cta[data-name="footer-contact"] {
    background: var(--common-color-main);
    color: #fff;
}
.kyhp-sec-cta[data-name="footer-contact"] .kyhp-flex {
    gap: 8px;
}
.kyhp-sec-cta[data-name="footer-contact"] .catch {
    margin-bottom: 32px;
}
.kyhp-sec-cta[data-name="footer-contact"] .kyhp-btn a {
    color: var(--common-color-main);
    background-color: #ffffff;
}
/* リスト
---------------------------------------- */
.kyhp-card-list[data-type="illust"] .image img {
    max-width: 256px;
}

/*============================================================
 トップページ調整
*============================================================*/
/* ページ内共通
---------------------------------------- */
#page-top #main-contents {
    padding-bottom: 0;
}
#page-top .section {
    padding: 80px 0 0;
    margin-bottom: 0;
}
#page-top .sec-title {
    text-align: center;
}

/* メインビジュアル
---------------------------------------- */
#page-top #mainvisual{
    height: 720px;
    background-image: url(../images/top/mv-image-bg.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 1920px auto;
    color: var(--common-color-text);
    position: relative;
    padding: 0 24px;
}
#page-top #mainvisual .inner {
    max-width: var(--comp-header-max-width);
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
#page-top #mainvisual .kyhp-flex {
    gap: 0;
    height: 720px;
}
/* 画像エリア */
#page-top #mainvisual .image {
    width: 46%;
    display: flex;
    align-items: end;
}
/* テキストエリア */
#page-top #mainvisual .info {
    position: relative;
    width: 54%;
    padding-top: calc(var(--common-header-height) + 118px);
}
/* 医療✖️バックオフィス */
#page-top #mainvisual .info .txt-border {
    width: fit-content;
    font-size: 32px;
    font-weight: 900;
    border-bottom: 4px solid var(--common-color-text);
}
#page-top #mainvisual .info .txt-border span {
    font-size: 20px;
    font-weight: 900;
}
/* サイトキャッチコピー */
#page-top #mainvisual .info .site-title {
    font-weight: 700;
    font-size: 64px;
    line-height: 160%;
}
#page-top #mainvisual .info .site-title span {
    font-size: 48px;
}
#page-top #mainvisual .info .deco-line {
    position: absolute;
    bottom: 0;
    right: -60px;
    width: 863px;
    height: 184px;
}
@media screen and (max-width: 1328px) {
    /* サイトキャッチコピー */
    #page-top #mainvisual .info .site-title {
        font-size: 4.8vw;
    }
    #page-top #mainvisual .info .site-title span {
        font-size: 3.2vw;
    }

}

/*セクション　lead
------------------------------------------- */
#page-top #sec-lead {
padding: 80px 0;
}
#page-top #sec-lead .sec-lead {
    text-align: center;
}

/* 業務管理でこんなお悩みありませんか？
------------------------------------------- */
#page-top #sec-problem {
    padding: 0 0 80px;
}
#page-top #sec-problem .info .lead {
    font-size: 18px;
    font-weight: 700;
    line-height: 160%;
}
/* Healthcare Agentの”アクマネ”でバックオフィス業務を効率化！
------------------------------------------------------- */
#page-top #sec-work-efficiency {
    padding: 64px 0 0;
    background-color: var(--common-background-color-01);
}
#page-top #sec-work-efficiency .inner {
    gap: 16px;
}
#page-top #sec-work-efficiency .kyhp-color-box {
    border-radius: 8px;
    background: #F1F1F1;
}

/* Healthcare Agentが提供するサービス
------------------------------------------- */
#page-top #sec-service {
    padding: 48px 0;
    background-color: var(--common-background-color-01);
}
#page-top #sec-service .inner {
    gap: 48px;
}
#page-top #sec-service .kyhp-btn > * {
    font-size: 16px;
}

/* Healthcare Agentが選ばれる理由
------------------------------------------- */
#page-top #sec-reasons {
    padding: 0 0 64px;
    background-color: var(--common-background-color-01);
}
#page-top #sec-reasons .inner {
    gap: 48px;
}
#page-top #sec-reasons .title span {
    font-size: 24px;
    padding-top: 0;
}

/* お知らせ
---------------------------------------- */
#page-top #sec-news {
}
#page-top #sec-news .kyhp-btn > * {
    font-size: 16px;
}
#page-top #sec-news .kyhp-dl-list,
#page-top #sec-news .kyhp-dl-list .item {
    gap: 16px;
}
#page-top #sec-news .kyhp-dl-list .item {
    border-bottom: solid 1px #F7F9FB;
}
#page-top #sec-news .kyhp-dl-list .item dt {
    font-weight: 400;
}
#page-top #sec-news .kyhp-dl-list .item dd a {
    text-decoration: underline;
}

/* 会社情報
---------------------------------------- */
#page-top #sec-company p {
    text-align: center;
}
#page-top #sec-company .kyhp-btn > * {
    font-size: 16px;
}

/* 実績
---------------------------------------- */
#page-top #sec-works {
    padding: 80px 0;
}
#page-top #sec-works .kyhp-btn > * {
    font-size: 16px;
}

/*セクション　share
---------------------------------------- */
/* #page-top #sec-share {
    background-color: var(--common-color-sub);
    padding: 80px 0;
} */

/*============================================================
 下層共通　メインビジュアル調整
*============================================================*/
.page-lower #mainvisual{
    margin-bottom: 32px;    
}
/*============================================================
 下層共通　パーツ調整
*============================================================*/
.page-lower #main-contents .kyhp-btn > * {
    font-size: 16px;
}
/* パーツ カードリスト（イラスト）
--------------------------- */
.page-lower .kyhp-card-list[data-type="illust"] {
    --row-gap: 64px;
}
.page-lower .kyhp-card-list[data-type="illust"] .image img {
    max-width: 200px;
}
.page-lower .kyhp-card-list[data-type="illust"] .info .title {
    font-size: 18px;
}

/*============================================================
 下層共通　メインコンテンツ調整
*============================================================*/
.page-lower #main-contents {
    padding-bottom: 96px;
}
/* 固定ページ
---------------------------------------- */
/* セクション共通
---------------------- */
.page-lower.page .section:not(:last-child) {
    margin-bottom: 80px;
}
.page-lower.page .section .inner {
    gap: 40px;
}
/* セクション　リード
---------------------- */
.page-lower #sec-excerpt {
    text-align: center;
}
/* セクション　見出し
---------------------- */
.page-lower.page .sec-title {
    font-size: 24px;
    text-align: center;
}
/* アーカイブページ
---------------------------------------- */
/* セクション　リード
----------------------- */
.page-lower #sec-page-lead p {
    text-align: center;
}
/* ページネーション
------------------------ */
.page-lower .pagination .page-numbers li > a.prev,
.page-lower .pagination .page-numbers li > a.next {
    background-color: var(--common-color-main);
}
.page-lower .pagination .page-numbers li > a {
    background-color: #F1F1F1;
}

/*============================================================
 バックオフィス支援事業 ページ調整
*============================================================*/
/* セクション　プラン　
---------------------------------------- */
#page-back-office-support #sec-plan .lead {
    font-weight: 700;
    text-align: left;
}
#page-back-office-support #sec-works .sec-title {
    text-align: left;
}
/*============================================================
 開発支援事業 ページ調整
*============================================================*/
/* セクション　プラン　
---------------------------------------- */
#page-opening-support {
}

/*============================================================
 会社情報 ページ調整
*============================================================*/
/* セクション　メインビジュアル　
---------------------------------------- */
#page-company #mainvisual {
    margin-bottom: 80px;
}
/* セクション　代表挨拶　
---------------------------------------- */
#page-company #sec-greeting .block-title {
    font-size: 24px;
    font-weight: 700;
    color: #404040;
    line-height: 180%
}
#page-company #sec-greeting .caption {
    font-size: 16px;
    color: var(--common-color-text) ;
}
/* セクション　会社概要　
---------------------------------------- */
#page-company #sec-company-info .kyhp-dl-list .item {
    padding-bottom: 0;
}
/*============================================================
 お知らせ一覧 ページ調整
*============================================================*/
/* セクション　一覧表
---------------------------------------- */
#page-news-list #sec-post-list .kyhp-dl-list {
    gap: 16px;
}
#page-news-list #sec-post-list .kyhp-dl-list .item {
    margin-bottom: 0;
    border-bottom: 1px solid #F7F9FB;
}
#page-news-list #sec-post-list .kyhp-dl-list .item dt {
    font-weight: 400;
}
#page-news-list #sec-post-list .kyhp-dl-list .item dd a {
    text-decoration: underline;
}
/*============================================================
 お問い合わせ ページ調整
*============================================================*/
/* CTA */
#page-contact .kyhp-sec-cta[data-name="footer-contact"] {
    display: none;
}
#page-contact #form-header .lead {
    text-align: center;
}
/* フォーム
---------------------------------------- */
/* 必須 */
.page-form #form-main .form-item dt.form-valid::after {
    width: 50px;
    height: 24px;
    color: var(--common-color-attention);
    background-color: #ffffff;
    line-height: 21px;
    padding: 0 12px;
    border: 1px solid var(--common-color-attention);
    border-radius: 0;
}
input[type="text"],
input[type="tel"],
input[type="email"],
textarea,
select {
    background-color: var(--form-border-color);
}
/* チェックボックス */
.mw_wp_form input[type=checkbox] + span::after {
    border-radius: 1px;
    border: 1px solid var(--common-color-main);
}
.mw_wp_form input[type=checkbox] + span::before {
    border-radius: 1px;
    border: 1px solid #B3B3B3;
}
/* ラジオボタン */
.mw_wp_form input[type=radio] + span::after,
.mw_wp_form input[type=radio] + span::before{
    border: 1px solid #B3B3B3;
}

/*============================================================
 お問い合わせ確認 ページ調整
*============================================================*/
#page-contact-confirm #form-header .lead {
    text-align: center;
}
/* 修正ボタン */
#page-contact-confirm .kyhp-btn[data-name="form-border"] {
    background-color: #ffffff;
    border: 1px solid var(--common-color-main);
}
#page-contact-confirm .kyhp-btn[data-name="form-border"] > * {
    color: var(--common-color-text);
}
/* CTA */
#page-contact-confirm .kyhp-sec-cta[data-name="footer-contact"] {
    display: none;
}
/*============================================================
 お問い合わせ完了 ページ調整
*============================================================*/
/* thank you! */
#page-contact-thanks #sec-thanks .catch {
    color: var(--common-color-text);
}
/* CTA */
#page-contact-thanks .kyhp-sec-cta[data-name="footer-contact"] {
    display: none;
}
/*============================================================
 記事詳細
*============================================================*/
/* 記事コンテンツ　見出し
---------------------------------------- */
h2.wp-block-heading {
    font-size: 32px;
    font-weight: 700;
    line-height: 160%;
}
h3.wp-block-heading {
    font-size: 24px;
    font-weight: 700;
    line-height: 160%;
}
h4.wp-block-heading {
    font-size: 18px;
    font-weight: 700;
    line-height: 160%;
}
/*============================================================
 プライバシーポリシー
*============================================================*/
#page-privacy #sec-privacy .sec-title {
    text-align: left;
}
#page-privacy #sec-privacy .title {
    text-align: left;
}
/* CTA */
#page-privacy .kyhp-sec-cta[data-name="footer-contact"] {
    display: none;
}
/********************************************************************************

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: 24px;
        line-height: 150%;
    }

    /*============================================================
     サイト共通　ヘッダー調整
    *============================================================*/
    #fixed-header .gnav .kyhp-btn a {
        font-size: 16px;
    }
    /*============================================================
     サイト共通　フッター調整
    *============================================================*/

    /*============================================================
     サイト共通　パーツ調整
    *============================================================*/
    /* CTA お問い合わせ
    ---------------------------------------- */
    .kyhp-sec-cta[data-name="contact"] .catch {
        font-size: 24px;
    }

    /* CTA お問い合わせ（フッター上部配置）
    ---------------------------------------- */
    .kyhp-sec-cta[data-name="footer-contact"] .catch {
        font-size: 24px;
    }
    

    /*============================================================
     トップページ 調整
    *============================================================*/
    /* セクション
    ---------------------------------------- */
    /* メインビジュアル
    ---------------------------------------- */
    #page-top #mainvisual {
        padding: 0;
        height: 812px;
        overflow: hidden;
    }
    #page-top #mainvisual .kyhp-flex {
        height: 812px;
        margin: 0 auto;
    }
    #page-top #mainvisual .kyhp-flex[data-order="reverse"] {
        flex-direction: column-reverse;
    }
    /* 画像エリア */
    #page-top #mainvisual .image {
        width: 500px;
    }
    /* テキストエリア */
    #page-top #mainvisual .info {
        width: 500px;
        padding-top: calc(var(--common-header-height) + 112px);
    }
    /* 医療✖️バックオフィス */
    #page-top #mainvisual .info .txt-border {
        font-size: 28px;
    }
    /* サイトキャッチコピー */
    #page-top #mainvisual .info .site-title {
        font-size: 42px;
    }
    #page-top #mainvisual .info .site-title span {
        font-size: 34px;
    }
    #page-top #mainvisual .info .deco-line {
        left: 50%;
        transform: translateX(-50%);
    }

    /*============================================================
     サンプルページ 調整
    *============================================================*/
    /* セクション
    ---------------------------------------- */
    /*============================================================
     記事詳細
    *============================================================*/
    /* 記事コンテンツ　見出し
    ---------------------------------------- */
    h2.wp-block-heading {
        font-size: 24px;
    }
    h3.wp-block-heading {
        font-size: 20px;
    }
    h4.wp-block-heading {
        font-size: 16px;
    }
    
}



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

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%;
    } */
    /* 画像エリア */
    #page-top #mainvisual .image {
        width: 344px;
        margin-bottom: 100px;
    }
    /* テキストエリア */
    #page-top #mainvisual .info {
        width: 344px;
        padding-top: calc(var(--common-header-height) + 112px);
    }
    /* 医療✖️バックオフィス */
    #page-top #mainvisual .info .txt-border {
        font-size: 20px;
    }
    /* サイトキャッチコピー */
    #page-top #mainvisual .info .site-title {
        font-size: 32px;
    }
    #page-top #mainvisual .info .site-title span {
        font-size: 24px;
    }
    #page-top #mainvisual .info .deco-line {
        bottom: 20px;
    }
    /* セクション
    ---------------------------------------- */

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

}