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

site-style.css　サイトcss

********************************************************************************/
/*============================================================
 【サイト共通設定】
*============================================================*/
/* 標準色
---------------------------------------- */
body {
    --ini-color: #333333;               /* 基本文字色 */
    --site-color: #1591EB;              /* サイト色 */
}

/* 標準ボタン色
    --color: #fff;					    ラベル色
    --background: var(--site-color);    ボタン背景色
    --border-color: var(--site-color);  ボタン線色
    --hover-color: #fff;                ホバー時　ラベル色
    --hover-background: #277AB6;        ホバー時　ボタン背景色
    --hover-border-color: #277AB6;      ホバー時　ボタン線色
---------------------------------------- */
.parts-btn {
    --color: #fff;
    --background: var(--site-color);
    --border-color: var(--site-color);
    --hover-color: #fff;
    --hover-background: #277AB6;
    --hover-border-color: #277AB6;
}


/*============================================================
 【サイト共通設定】ヘッダー
*============================================================*/
/* 追従あり
---------------------------------------- */
/* 背景色 */
#site-header[data-type="fixed"] {
    background-color: rgba(255, 255, 255, 0.5);
}
/* CTAボタン設定
---------------------------------------- */
.parts-btn[data-name="header"] {
    /* --color: #fff;
    --background: var(--site-color);
    --border-color: var(--site-color);
    --hover-color: #fff;
    --hover-background: #277AB6;
    --hover-border-color: #277AB6; */
}

/*============================================================
 【サイト共通設定】下層ページ関連
*============================================================*/
/* ページヘッダー
---------------------------------------- */
/* 背景色 */
#page-header {
    background-color: #F3F3F3;
}

/* ページネーション
---------------------------------------- */
/* 現在のページ背景色、文字色 */
.pagination .page-numbers li > *.current {
    background-color: var(--site-color);
    color: #fff;
}

/*============================================================
 【サイト共通設定】PAGE TOP
*============================================================*/
/* 背景色 */
#pagetop {
    background-color: #51596D;
}
/* アイコン色 */
#pagetop .kkys-bg-icon {
    --icon-color: #fff;
}

/*============================================================
 【サイト共通設定】フッター
*============================================================*/
/* 背景色、文字色 */
#site-footer {
    background-color: #323647;
    color: #fff;
}
/* アイコン色 */
#site-footer #footer-sns li .kkys-bg-icon {
    --icon-color: #fff;
}



/*============================================================
 【パーツ】メインビジュアル　parts-btn
*============================================================*/
/* CTA用ボタン
---------------------------------------- */
#page-top .parts-btn[data-name="mainvisual-cta"] {
    /* --color: #fff;
    --background: var(--site-color);
    --border-color: var(--site-color);
    --hover-color: #fff;
    --hover-background: #277AB6;
    --hover-border-color: #277AB6; */
}

/* メインビジュアル01
---------------------------------------- */
/* 文字色 */
#page-top #sec-mainvisual[data-type="01"] .info {
    color: #fff;
}

/* メインビジュアル02
---------------------------------------- */
/* 文字色 */
#page-top #sec-mainvisual[data-type="02"] .info {
    color: #fff;
}

/* メインビジュアル03
---------------------------------------- */
/* サイドバー背景色、文字色 */
#page-top #sec-mainvisual[data-type="03"] .sidebar {
    background-color: #323647;
    color: #fff;
}
/* アイコン色 */
#page-top #sec-mainvisual[data-type="03"] .sidebar .kkys-bg-icon {
    --icon-color: #fff;
}
/* キャッチコピー背景色、文字色 */
#page-top #sec-mainvisual[data-type="03"] .info .catch > * {
    background-color: #323647;
    color: #fff;
}
/* 円背景色、文字色 */
#page-top #sec-mainvisual[data-type="03"] .info .result-list li {
    background-color: #FFB800;
    color: #fff;
}

/* メインビジュアル04
---------------------------------------- */
/* キャッチコピー背景色、文字色 */
#page-top #sec-mainvisual[data-type="04"] .mainvisual-inner {
    background-color: rgba(50, 54, 71, 0.8);
}
/* キャッチコピー文字色 */
#page-top #sec-mainvisual[data-type="04"] .info .catch {
    color: #fff;
}

/*============================================================
 【パーツ】コンセプト　kkys-concept
*============================================================*/
/* コンセプト01
---------------------------------------- */
/* 背景色、文字色 */
#page-top #sec-concept[data-type="01"] {
    background-color: #fff;
    color: var(--ini-color);
}

/* コンセプト02
---------------------------------------- */
/* 背景1枚画像(文字色) */
#page-top #sec-concept[data-type="02"][data-bg="image"] {
    color: #fff;

    /* 背景が1枚画像の場合　data-bg="image" */
    background-image: url(../images/top/concept-02-bg.jpg);

    /* 背景がパターン画像の場合　data-bg="pattern" */
    /* background-image: url(../images/top/concept-02-bg.svg);
    background-size: 24px auto; */

    /* 背景がグラデーションの場合　data-bg="gradation" */
    /* background: linear-gradient(90deg, #336DC1 0%, #3EAAC4 100%); */

    /* 背景が色塗りの場合　data-bg="color" */
    /* background-color: #fff; */
}
/* 背景色(文字色、背景色) */
#page-top #sec-concept[data-type="02"][data-bg="color"] {
    color: var(--ini-color);

    /* 背景が色塗りの場合　data-bg="color" */
    background-color: #fff;

    /* 背景が1枚画像の場合　data-bg="image" */
    /* background-image: url(../images/top/concept-02-bg.jpg); */

    /* 背景がパターン画像の場合　data-bg="pattern" */
    /* background-image: url(../images/top/concept-02-bg.svg);
    background-size: 24px auto; */

    /* 背景がグラデーションの場合　data-bg="gradation" */
    /* background: linear-gradient(90deg, #336DC1 0%, #3EAAC4 100%); */
}

/*============================================================
 【パーツ】言いたいこと（シンプル）　kkys-important
*============================================================*/
/* 言いたいこと（シンプル）01
---------------------------------------- */
/* 背景色、文字色 */
#page-top #sec-important[data-type="01"] {
    background-color: var(--site-color);
    color: #fff;
}
/* アイコン色 */
#page-top #sec-important[data-type="01"] .item .image.kkys-bg-icon {
    --icon-color: #fff;
}

/* 言いたいこと（シンプル）02
---------------------------------------- */
/* 背景色、文字色 */
#page-top #sec-important[data-type="02"] {
    background-color: var(--site-color);
    color: #fff;
}

/* 言いたいこと（シンプル）03
---------------------------------------- */
/* 背景色、文字色 */
#page-top #sec-important[data-type="03"] {
    background-color: #323647;
    color: #fff;
}

/* 言いたいこと（シンプル）04
---------------------------------------- */
/* 背景色、文字色 */
#page-top #sec-important[data-type="04"] {
    background-color: var(--site-color);
    color: #fff;
}
/* 線 */
#page-top #sec-important[data-type="04"] .item-info .point-list li::after {
    border-bottom: solid 1px #fff;
}

/*============================================================
 【パーツ】言いたいこと（詳細）3つ縦積み　kkys-features
*============================================================*/
/* 言いたいこと（詳細）01
---------------------------------------- */
/* 背景色、文字色 */
#page-top #sec-features[data-type="01"] {
    background-color: #fff;
    color: var(--ini-color);
}

/* 言いたいこと（詳細）02
---------------------------------------- */
/* 背景画像、文字色 */
#page-top #sec-features[data-type="02"] {
    background-image: url(../images/top/features-02-bg.jpg);
    color: #fff;
}

/* 言いたいこと（詳細）03
---------------------------------------- */
/* 背景色、文字色 */
#page-top #sec-features[data-type="03"] {
    background-color: #fff;
    color: var(--ini-color);
}
/* チェックアイコン背景色 */
#page-top #sec-features[data-type="03"] .item .image {
    background-color: var(--site-color);
}
/* チェックアイコン色 */
#page-top #sec-features[data-type="03"] .item .image .kkys-bg-icon {
    --icon-color: #fff;
}

/*============================================================
 【パーツ】フロー　kkys-flow
*============================================================*/
/* フロー01
---------------------------------------- */
/* 背景色、文字色 */
#page-top #sec-flow[data-type="01"] {
    background-color: #F4F8FB;
    color: var(--ini-color);
}
/* ボックス背景色 */
#page-top #sec-flow[data-type="01"] .item-list .item {
    background-color: #fff;
}
/* STEP円背景色、文字色 */
#page-top #sec-flow[data-type="01"] .item-list .item .num {
    background-color: var(--site-color);
    color: #fff;
}

/* フロー02
---------------------------------------- */
/* 背景色、文字色 */
#page-top #sec-flow[data-type="02"] {
    background-color: #fff;
    color: var(--ini-color);
}
/* ボックス背景色 */
#page-top #sec-flow[data-type="02"] .box {
    background-color: #F9F9F9;
}
/* STEP文字色 */
#page-top #sec-flow[data-type="02"] .box .item .num {
    color: var(--site-color);
}

/* フロー03
---------------------------------------- */
/* 背景色、文字色 */
#page-top #sec-flow[data-type="03"]  {
    background-color: #fff;
    color: var(--ini-color);
}
/* ボックス背景色 */
#page-top #sec-flow[data-type="03"] .box-list {
    background-color: #F9F9F9;
}
/* STEP文字色 */
#page-top #sec-flow[data-type="03"] .box-list .box .item-info .num {
    color: var(--site-color);
}

/*============================================================
 【パーツ】お客様の声　kkys-voice
*============================================================*/
/* お客様の声01
---------------------------------------- */
/* 背景色、文字色 */
#page-top #sec-voice[data-type="01"] {
    background-color: #fff;
    color: var(--ini-color);
}
/* 属性文字色 */
#page-top #sec-voice[data-type="01"] .item .info .cat {
    color: #8B8B8B;
}

/* お客様の声02
---------------------------------------- */
/* 背景色、文字色 */
#page-top #sec-voice[data-type="02"] {
    background-color: #F9F9F9;
    color: var(--ini-color);
}
/* アイコン背景色 */
#page-top #sec-voice[data-type="02"] .item .image {
    background-color: var(--site-color);
}
/* アイコン色 */
#page-top #sec-voice[data-type="02"] .item .image .kkys-bg-icon {
    --icon-color: #fff;
}
/* ボックス背景色 */
#page-top #sec-voice[data-type="02"] .item .info {
    background-color: #fff;
}

/*============================================================
 【パーツ】よくある質問　kkys-faq
*============================================================*/
/* よくある質問01
---------------------------------------- */
/* 背景色、文字色 */
#page-top #sec-faq[data-type="01"] {
    background-color: #fff;
    color: var(--ini-color);
}
/* ボックス背景色、文字色 */
#page-top #sec-faq[data-type="01"] .parts-accordions .accordion {
    background-color: #fff;
}
/* Q背景色、文字色 */
#page-top #sec-faq[data-type="01"] .parts-accordions .accordion-sw .accordion-sw-inner::before {
    background-color: var(--site-color);
    color: #fff;
}
/* 開閉アイコン色 */
#page-top #sec-faq[data-type="01"] .parts-accordions .accordion-sw .accordion-sw-inner::after {
    --icon-color: var(--ini-color);
}
/* 質問文字色 */
#page-top #sec-faq[data-type="01"] .parts-accordions .accordion-sw .accordion-sw-inner .accordion-sw-title {
    color: var(--site-color);
}
/* 質問・回答境界線色 */
#page-top #sec-faq[data-type="01"] .parts-accordions .accordion-content::before {
    border-top-color: #E7E7E7;
}
/* A背景色、文字色 */
#page-top #sec-faq[data-type="01"] .parts-accordions .accordion-content .accordion-content-inner::before {
    background-color: #F7A429;
    color: #fff;
}

/* よくある質問02
---------------------------------------- */
/* 背景色、文字色 */
#page-top #sec-faq[data-type="02"] {
    background-color: var(--site-color);
    color: var(--ini-color);
}
/* ボックス背景色 */
#page-top #sec-faq[data-type="02"] .item-list .item {
    background-color: #fff;
}
/* Q文字色 */
#page-top #sec-faq[data-type="02"] .item-list .item .title::before {
    color: var(--site-color);
}
/* 質問文字色 */
#page-top #sec-faq[data-type="02"] .item-list .item .title {
    color: var(--ini-color);
}

/*============================================================
 【パーツ】金額表　kkys-plan
*============================================================*/
/* 金額表01　共通  
---------------------------------------- */
/* 背景色 */
#page-top #sec-plan[data-type="01"] {
    background-color: #F4F8FB;
}
/* 「おすすめ」背景色、文字色 */
#page-top #sec-plan[data-type="01"] .item[data-type="recommend"]::before {
    background-color: #FFB800;
    color: #fff;
}
/* ボックスヘッダー背景色、文字色 */
#page-top #sec-plan[data-type="01"] .item .item-header {
    background-color: #323647;
    color: #fff;
}
/* ボックスヘッダー(おすすめ)背景色、文字色 */
#page-top #sec-plan[data-type="01"] .item[data-type="recommend"] .item-header {
    background-color: var(--site-color);
    color: #fff;
}
/* ボックス背景色 */
#page-top #sec-plan[data-type="01"] .item .item-info {
    background-color: #fff;
}
/* リスト背景色、ドット色 */
#page-top #sec-plan[data-type="01"] .item .item-info .note .parts-list[data-type="mark-dot"] {
    background-color: #FFF0C8;
    --li-mark-color: #FFB800;
}
/* 注記文字色 */
#page-top #sec-plan[data-type="01"] .notice {
    color: var(--ini-color);
}

/* 金額表01　単数列
---------------------------------------- */
/* ボックスヘッダー背景色、文字色 */
#page-top #sec-plan[data-type="01"][data-col="single"] .item .item-header {
    background-color: var(--site-color);
    color: #fff;
}


/*============================================================
 【パーツ】代表者挨拶　kkys-message
*============================================================*/
/* 代表者挨拶01
---------------------------------------- */
/* 背景色、文字色 */
#page-top #sec-message[data-type="01"] {
    background-color: #fff;
    color: var(--ini-color);
}


/*============================================================
 【パーツ】会社情報　kkys-company
*============================================================*/
/* 会社情報01
---------------------------------------- */
/* 背景色 */
#page-top #sec-company[data-type="01"] {
    background-color: #fff;
    color: var(--ini-color);
}
/* 項目ラベル幅(データ幅は自動計算されるため設定不要) */
#page-top #sec-company[data-type="01"] dl.parts-table {
    --dt-width: 80px;
}
/* ボタン背景色、文字色 */
#page-top #sec-company[data-type="01"] .item-info .parts-btn {
    /* --color: #fff;
    --background: var(--site-color);
    --border-color: var(--site-color);
    --hover-color: #fff;
    --hover-background: #277AB6;
    --hover-border-color: #277AB6; */
}


/*============================================================
 【パーツ】CTA　kkys-cta
*============================================================*/
/* CTA01
---------------------------------------- */
/* 文字色、背景画像 */
#page-top #sec-cta[data-type="01"][data-bg="pattern"] {
    color: #346677;

    /* 背景がパターン画像の場合　data-bg="pattern" */
    background-image: url(../images/top/cta-01-bg.svg);
    background-size: 24px auto;

    /* 背景が1枚画像の場合　data-bg="image" */
    /* background-image: url(../images/top/cta-01-bg.jpg); */

    /* 背景がグラデーションの場合　data-bg="gradation" */
    /* background: linear-gradient(90deg, #336DC1 0%, #3EAAC4 100%); */

    /* 背景が色塗りの場合　data-bg="color" */
    /* background-color: #fff; */
}
/* ボックス背景色 */
#page-top #sec-cta[data-type="01"] .item-info {
    background-color: #fff;
}
/* ボックス見出し文字色 */
.kkys-cta[data-type="01"] .item-info .label {
    color: #346677;
}
/* ボックスリード文字色 */
.kkys-cta[data-type="01"] .item-info .lead {
    color: #346677;
}
/* ボタン背景色、文字色 */
#page-top #sec-cta[data-type="01"] .item-action .parts-btn {
	--color: #333333;
	--background: #F2E45F;
	--border-color: #F2E45F;
	--hover-color: #333333;
	--hover-background: #E8D840;
	--hover-border-color: #E8D840;
}

/* CTA02
---------------------------------------- */
/* 背景色、文字色 */
#page-top #sec-cta[data-type="02"][data-bg="gradation"] {
    color: #fff;

    /* 背景がグラデーションの場合　data-bg="gradation" */
    background: linear-gradient(90deg, #336DC1 0%, #3EAAC4 100%);

    /* 背景がパターン画像の場合　data-bg="pattern" */
    /* background-image: url(../images/top/cta-02-bg.svg);
    background-size: 24px auto; */

    /* 背景が1枚画像の場合　data-bg="image" */
    /* background-image: url(../images/top/cta-02-bg.jpg); */

    /* 背景が色塗りの場合　data-bg="color" */
    /* background-color: #fff; */
}
/* ボタン背景色、文字色 */
#page-top #sec-cta[data-type="02"] .parts-btn {
	--color: #333333;
	--background: #FFB800;
	--border-color: #FFB800;
	--hover-color: #333333;
	--hover-background: #dd9f00;
	--hover-border-color: #dd9f00;
}

/* CTA03
---------------------------------------- */
/* 背景色、文字色 */
#page-top #sec-cta[data-type="03"][data-bg="color"] {
    color: #fff;

    /* 背景が色塗りの場合　data-bg="color" */
    background-color: #323647;

    /* 背景がパターン画像の場合　data-bg="pattern" */
    /* background-image: url(../images/top/cta-03-bg.svg);
    background-size: 24px auto; */

    /* 背景が1枚画像の場合　data-bg="image" */
    /* background-image: url(../images/top/cta-03-bg.jpg); */

    /* 背景がグラデーションの場合　data-bg="gradation" */
    /* background: linear-gradient(90deg, #336DC1 0%, #3EAAC4 100%); */
}
/* ボタン背景色、文字色 */
#page-top #sec-cta[data-type="03"] .parts-btn {
    /* --color: #fff;
    --background: var(--site-color);
    --border-color: var(--site-color);
    --hover-color: #fff;
    --hover-background: #277AB6;
    --hover-border-color: #277AB6; */
}

/* CTA04
---------------------------------------- */
/* 背景色、文字色 */
#page-top #sec-cta[data-type="04"][data-bg="color"] {
    color: #fff;

    /* 背景が色塗りの場合　data-bg="color" */
    background-color: #323647;

    /* 背景がパターン画像の場合　data-bg="pattern" */
    /* background-image: url(../images/top/cta-04-bg.svg);
    background-size: 24px auto; */

    /* 背景が1枚画像の場合　data-bg="image" */
    /* background-image: url(../images/top/cta-04-bg.jpg); */

    /* 背景がグラデーションの場合　data-bg="gradation" */
    /* background: linear-gradient(90deg, #336DC1 0%, #3EAAC4 100%); */
}
/* ボタン背景色、文字色 */
#page-top #sec-cta[data-type="04"] .parts-btn {
	--color: #333333;
	--background: #fff;
	--border-color: #fff;
	--hover-color: #333333;
	--hover-background: #f7f7f7;
	--hover-border-color: #f7f7f7;
}

/* CTA05
---------------------------------------- */
/* ボックス背景色、文字色 */
#page-top #sec-cta[data-type="05"][data-bg="image"] {
    /* 背景が1枚画像の場合　data-bg="image" */
    background-image: url(../images/top/cta-05-bg.jpg);

    /* 背景がパターン画像の場合　data-bg="pattern" */
    /* background-image: url(../images/top/cta-05-bg.svg);
    background-size: 24px auto; */

    /* 背景がグラデーションの場合　data-bg="gradation" */
    /* background: linear-gradient(90deg, #336DC1 0%, #3EAAC4 100%); */

    /* 背景が色塗りの場合　data-bg="color" */
    /* background-color: #fff; */
}
#page-top #sec-cta[data-type="05"] .item-action {
    background-color: #fff;
    color: var(--ini-color);
}
/* ボタン背景色、文字色 */
#page-top #sec-cta[data-type="05"] .item-action .parts-btn {
	--color: #fff;
	--background: #323647;
	--border-color: #323647;
	--hover-color: #fff;
	--hover-background: #44495f;
	--hover-border-color: #44495f;
}

/*============================================================
 【パーツ】見出し文章　※極力使わない。　kkys-appeal
*============================================================*/
/* 見出し文章01
---------------------------------------- */
/* 背景色、文字色 */
#page-top #sec-appeal[data-type="01"] {
    background-color: #fff;
    color: var(--ini-color);
}

/*============================================================
 【パーツ】お問い合わせ　kkys-contact
*============================================================*/
/* お問い合わせ（iframeの場合）01
---------------------------------------- */
/* 背景色、文字色 */
#page-top #sec-contact[data-type="01"] {
    background-color: #fff;
    color: var(--ini-color);
}
/* iframe外枠線 */
#page-top #sec-contact[data-type="01"] .form-code {
    border: solid 2px #0D9FCD;
}


/*============================================================
 お問い合わせ(別ページ)
*============================================================*/
/*  チェックボックス、ラジオボタン デザイン　for mw_wp_form
---------------------------------------- */
.mw_wp_form {
	--border-color: #D8D8D8;
	--checked-color: #1591EB;
}

/* フォーム用ボタン設定　(白+線)
---------------------------------------- */
.parts-btn[data-name="form-border"] {
	--color: var(--site-color);
	--background: #fff;
	--border-color: var(--site-color);
	--hover-color: var(--site-color);
	--hover-background: #f7f7f7;
	--hover-border-color: var(--site-color);
}