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

kakuyasu-hp-custom.css

********************************************************************************/
/*============================================================
 サイト共通　変数
*============================================================*/
:root {
    /* --common-font-family-main: 'Noto Serif JP', serif;
    --common-font-family-sub: 'Noto Sans JP', sans-serif; */

    --common-font-family-main: 'Noto Sans JP', sans-serif;
    --common-font-family-sub: 'Noto Serif JP', serif;

	--common-inner-max-width-inside: 880px;     /* 通常サイト幅 880px or 1080px */

    --common-color-site-bg: #EFF6FC;           /* サイト背景色 */
    --common-color-text: #000;           /* 基本テキスト色 */
    --common-color-main: #3A5BAB;           /* メイン色 */
    --common-color-sub: #fff;            /* サブ色 */
    --common-color-accent: #3A5BAB;      /* アクセント色 */
    --common-color-attention: #D93838;   /* 注意色 */
    --common-color-attention-bg: #FFF5F5;   /* 注意色(背景用) */
    --common-color-link: #2784D6;        /* テキストリンク色 */
    --common-color-notice: #B3B3B3;      /* 注釈色 */

    --common-color-header-bg: #ffffff80;  /* ヘッダー背景色 */
    --common-color-breadcrumb: #B3B3B3;  /* パンくず色 */
    --common-color-lower-mv-bg: #EFF6FC;  /* 下層メインビジュアル背景色 */

}

/* フォーム色
---------------------------------------- */
.mw_wp_form {
    --form-background-color: #FAFAFA;
    --form-border-color: #F0F0F0;
    --form-placeholder-color: var(--common-color-notice);
    --form-check-border-color: var(--common-color-notice);
    --form-checked-color: var(--common-color-main);
}

/*============================================================
 サイト共通　角丸無効
*============================================================*/
* {
    /* border-radius: unset !important; */
}

/*============================================================
 サイト共通　見出し
*============================================================*/
h1.page-title {
    font-weight: 500;
    font-size: 48px;
    line-height: 140%;
}
.page-title-en {
    font-size: 20px;
    line-height: 140%;
    color: #D3D3D3;
    margin-top: 8px;
}
h2.sec-title,
.block-post-content h2 {
    font-weight: 500;
    font-size: 24px;
    line-height: 150%;
    text-align: center;
}
h3.block-title,
.block-post-content h3 {
    font-weight: 500;
    font-size: 18px;
    line-height: 180%;
    text-align: center;
}


/*============================================================
 サイト共通　ヘッダー調整
*============================================================*/
/* 追従ヘッダー
---------------------------------------- */
/* #fixed-header .gnav {
    background-color: #fff;
} */

/* ハンバーガーボタン
---------------------------------------- */
.hamburger .hamburger-bar {
    border-radius: 100%;
}

/* ハンバーガーメニュー
---------------------------------------- */
#hamburger-menu .hamburger-menu-list li {
    font-weight: 500;
}

/*============================================================
 サイト共通　フッター調整
*============================================================*/
#site-footer {
    background-color: unset;
    color: var(--common-color-text);
}

/* フッターロゴ
---------------------------------------- */
#site-footer #fnav .logo {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 8px;
}

/* メニューリスト
---------------------------------------- */
/* #site-footer #fnav .menu-list {
    width: 240px;
}
#site-footer #fnav .menu-list li {
    width: 84px;
} */

/*============================================================
 サイト共通　パーツ調整
*============================================================*/
/* 背景色ボックス
---------------------------------------- */
.kyhp-color-box {
    background-color: #fff;
}

/* ボタン
---------------------------------------- */
.kyhp-btn {
    border-radius: 30px; 
}

/* CTAセクション
---------------------------------------- */
.kyhp-sec-cta[data-name="contact"] {
    background-image: url(../images/common/cta-contact-bg.png), linear-gradient(180deg, #EFF6FC 0%, #FFF 47.4%, #EFF6FC 100%);
    background-size: 1440px auto;
    color: var(--common-color-main);

}
.kyhp-sec-cta[data-name="contact"] .kyhp-btn {
    width: 224px;
}

/* リスト
---------------------------------------- */
.kyhp-card-list[data-type="illust"] .image img {
    max-width: 256px;
}

/* 番号リスト
---------------------------------------- */
.kyhp-num-image-list .item .info .title {
    align-items: center;
}
.kyhp-num-image-list .item .info .title::before {
    font-size: 64px;
    color: var(--common-color-main);
}

/* dlリスト
---------------------------------------- */
.kyhp-dl-list .item {
    border-color: #D3D3D3;
}

/* アコーディオン
---------------------------------------- */
.kyhp-accordion-list .accordion {
    background-color: #fff;
}
.kyhp-accordion-list .accordion .accordion-summary .summary {
    font-weight: 500;
}


/*============================================================
 トップページ調整
*============================================================*/
/* フッター前余白
---------------------------------------- */
/* #page-top #main-contents {
    padding-bottom: 0;
} */

/* メインビジュアル
---------------------------------------- */
#page-top #mainvisual{
    height: 810px;
    /* background-color: var(--common-color-main); */
    background-image: url(../images/top/mainvisual-bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 1920px auto;
    color: #fff;
}
#page-top #mainvisual .info {
    width: 100%;
    padding-top: 364px;
    text-align: center;
}
#page-top #mainvisual .info .inner {
    display: block;
}
#page-top #mainvisual .info .catch {
    font-weight: 500;
    font-size: 27px;
    line-height: 150%;
    text-shadow: 0px 4px 6px rgba(66, 73, 75, 0.50);
}

/* セクション　Who We Are
---------------------------------------- */
#page-top #sec-who {
    text-align: center;
}
#page-top #sec-who .inner {
    gap: 8px;
}
#page-top #sec-who .sec-title {
    font-weight: 500;
    font-size: 16px;
    line-height: 200%;
}
#page-top #sec-who .catch {
    font-weight: 500;
    font-size: 18px;
    line-height: 200%;
}
#page-top #sec-who .catch span {
    font-weight: 500;
    font-size: 40px;
    line-height: 200%;
}

/* セクション　コンテンツ
---------------------------------------- */
#page-top #sec-contents .kyhp-flex .title {
    font-weight: 500;
}

/* セクション　製品紹介
---------------------------------------- */
#page-top #sec-products .kyhp-slider .swiper {
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
}

/* セクション　OEM・パートナー募集
---------------------------------------- */
#page-top #sec-partner .sec-lead {
    text-align: center;
}

/* セクション　お知らせ
---------------------------------------- */
#page-top #sec-news.post-data-none {
    display: none;
}

/*============================================================
 下層共通　メインビジュアル調整
*============================================================*/
.page-lower #mainvisual {
    /* background-color: var(--common-color-lower-mv-bg);   */    
}

/*============================================================
 みえるくんページ調整
*============================================================*/
/* セクション　除菌力が色で見える「みえるくん」　
---------------------------------------- */
#page-mierukun #sec-about .block-test-results .kyhp-image img {
    border-radius: unset;
}

/* セクション　ご使用方法　
---------------------------------------- */
#page-mierukun #sec-howto .kyhp-num-image-list .item .image img {
    border-radius: unset;
}

/*============================================================
 会社概要ページ調整
*============================================================*/
/* セクション　会社概要　
---------------------------------------- */
#page-company #sec-outline .kyhp-text-link {
    font-weight: bold;
    text-decoration: none;
    color: unset;
}

/*============================================================
 フォームページ調整
*============================================================*/
/* 完了画面
---------------------------------------- */
.page-form #sec-thanks .catch {
    color: var(--common-color-main);
}
.page-form #sec-thanks .message {
    text-align: center;
}


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

for 追従ヘッダー　(Tabletとブレイクポイントが異なる場合)

********************************************************************************/
/* @media screen and (max-width: 1079px) {
  */


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

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,
    .block-post-content h2 {
        font-size: 20px;
        line-height: 150%;
    }
    h3.block-title,
    .block-post-content h3 {
    }
    
   /*============================================================
     サイト共通　ヘッダー調整
    *============================================================*/
    .gnav .gnav-main .gnav-left .gnav-logo {
        width: 104px;
    }
    /* .gnav .gnav-main .gnav-right .btn-list .kyhp-btn > * {
        font-size: 16px;
    } */

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

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

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



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

for SP

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

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

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

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

    /*============================================================
     トップページ 調整
    *============================================================*/
    /* メインビジュアル
    ---------------------------------------- */
    #page-top #mainvisual{
        height: 682px;
        background-image: url(../images/top/mainvisual-bg-sp.jpg);
        background-size: 767px 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%;
    }
    /* セクション
    ---------------------------------------- */

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

}