@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: 1080px;     /* 通常サイト幅 880px or 1080px */

    --common-color-site-bg: #E2E1D7;           /* サイト背景色 */
    --common-color-text: #4F545A;           /* 基本テキスト色 */
    --common-color-main: #5A6C5F;           /* メイン色 */
    --common-color-sub: #fff;            /* サブ色 */
    --common-color-accent: #F7BC27;      /* アクセント色 */
    --common-color-attention: #D93838;   /* 注意色 */
    --common-color-attention-bg: #FFF5F5;   /* 注意色(背景用) */
    --common-color-link: var(--common-color-text);        /* テキストリンク色 */
    --common-color-notice: #B3B3B3;      /* 注釈色 */

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

    --common-color-footer-bg: var(--common-color-sub);  /* フッター背景色 */
    --common-color-footer-text: var(--common-color-text);  /* フッターテキスト色 */

}

/* フォーム色
---------------------------------------- */
.mw_wp_form {
    --form-background-color: #FAFAFA;
    --form-border-color: #F0F0F0;
    --form-placeholder-color: #B3B3B3;
    --form-check-border-color: #B3B3B3;
    --form-checked-color: #000;
}

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

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


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

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

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

/*============================================================
 サイト共通　パーツ調整
*============================================================*/
/* CTAセクション info (Reserve／instagram)
---------------------------------------- */
.kyhp-sec-cta[data-name="info"] {
    background: var(--common-color-main);
    color: #fff;
    padding: 48px 0;
}
.kyhp-sec-cta[data-name="info"] .inner {
    gap: 32px;
}
/* CTAセクション Location
---------------------------------------- */
.kyhp-sec-cta[data-name="location"] {
    background-image: unset;
    color: var(--common-color-text);
    text-align: left;
    padding: 0;
}
.kyhp-sec-cta[data-name="location"] .inner {
    flex-wrap: unset;
}
.kyhp-sec-cta[data-name="location"] .catch {
    text-align: center;
}
/* CTAセクション Re:choice
---------------------------------------- */
.kyhp-sec-cta[data-name="re-choice"] {
    background-image: url(../images/top/cta-re-choice-bg.jpg);
}

/* リスト
---------------------------------------- */
.kyhp-card-list[data-type="illust"] .image img {
    max-width: 256px;
}
/*============================================================
 トップページ調整
*============================================================*/
/* フッター前余白
---------------------------------------- */
/* #page-top #main-contents {
    padding-bottom: 0;
} */
/* セクション間余白がない部分がある場合
---------------------------------------- */
/* #page-top #main-contents {
    gap: 0;
}
#page-top #main-contents .section:not(:last-child):not(.no-margin) {
    margin-bottom: 80px;
} */

/* 動的セクションで記事がない場合はセクション非表示
---------------------------------------- */
#page-top .section.post-data-none {
    display: none;
}

/* メインビジュアル
---------------------------------------- */
#page-top #mainvisual{
    height:768px;
    background-color: var(--common-color-site-bg);
    background-image: url(../images/top/mainvisual-bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 1920px auto;
    color: #fff;
    position: relative;
}
#page-top #mainvisual .info {
    width: 100%;
    position: absolute;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 22.05%, rgba(255, 255, 255, 0.15) 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
#page-top #mainvisual .info .inner {
    display: block;
    max-width: calc( var(--comp-header-max-width) + ( var(--inner-padding) * 2 ) );
}
#page-top #mainvisual .info .catch {
    text-align: left;
    margin: 12px 0;
}

/*セクション　イントロ
---------------------------------------- */
#page-top #sec-intro .sec-lead {
    text-align: center;
}

/*セクション　Rental space
---------------------------------------- */
#page-top #sec-rental-space .kyhp-card-list {
    --col: 2;
}
#page-top #sec-rental-space .kyhp-card-list .item .info .title,
#page-top #sec-rental-space .kyhp-card-list .item .info .lead {
    text-align: center;
}

/*セクション　YouTube
---------------------------------------- */
#page-top #sec-youtube .wrap-movie {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
 
/*セクション　Contact
---------------------------------------- */
#page-top #sec-contact .sec-lead {
    text-align: center;
}
    
/*============================================================
 下層共通　メインビジュアル調整
*============================================================*/
.page-lower #mainvisual {
    /* background-color: var(--common-color-lower-mv-bg);   */    
}

/*============================================================
 Rental spaceページ調整
*============================================================*/
/* セクション　詳細ページリンク
---------------------------------------- */
#page-rental-space #sec-detail .kyhp-card-list {
    --col: 2;
}
#page-rental-space #sec-detail .kyhp-card-list .item .info .title {
    text-align: center;
}
#page-rental-space #sec-detail .kyhp-card-list .item .info .lead {
    text-align: center;
}

/*============================================================
 Rental space 下層ページ(第3階層)調整
*============================================================*/
/* セクション　Price
---------------------------------------- */
.page-rental-space  #sec-price .inner {
    flex-wrap: unset;
}

/* セクション　関連ページリンク
---------------------------------------- */
.page-rental-space #sec-related-page .kyhp-card-list .item .info .title {
    text-align: center;    
}

/*============================================================
 メインルーム（キッチンルーム）ページ調整
*============================================================*/
/* セクション　設備・備品
---------------------------------------- */
#page-room-with-kitchen #sec-supplies .sec-lead {
    text-align: center;
}

/*============================================================
 設備・備品一覧ページ調整
*============================================================*/
/* 表
---------------------------------------- */
#page-supplies #sec-supplies-list .kyhp-tbl th {
    width: calc( 100% / 3 );
}
#page-supplies #sec-supplies-list .kyhp-tbl td {
    text-align: left;
}

/*============================================================
 Re:choiceページ調整
*============================================================*/
/* ページ内共通設定　
---------------------------------------- */
#page-re-choice .sec-lead {
    text-align: center;
}

/* セクション　Seed library
---------------------------------------- */
#page-re-choice #sec-seed-library .kyhp-flex .info {
    justify-content: center;
}

/*============================================================
 Informationページ調整
*============================================================*/
/* ページ内共通設定　
---------------------------------------- */
#page-information .inner {
    flex-wrap: unset;
}

/*============================================================
 Contactページ調整
*============================================================*/
/* ページ内共通設定　
---------------------------------------- */
/* フォームボタン */
.page-contact .kyhp-btn[data-name="form"] {
    background-color: #000000;
    border: solid 1px #000000;
}
.page-contact #sec-form .kyhp-btn[data-type="border"] {
    border: solid 1px #000000;
}
.page-contact #sec-form .kyhp-btn[data-type="border"] > * {
    color: #000000;
}

/*============================================================
 Contact(入力)ページ調整
*============================================================*/
/* セクション　プライバシーポリシー同意
---------------------------------------- */
#page-contact.page-form #form-footer .policy {
    max-width: 680px;
    margin: 0 auto 64px;
}

/*============================================================
 Contact(送信完了)ページ調整
*============================================================*/
/* セクション　完了メッセージ
---------------------------------------- */
#page-contact-thanks #sec-thanks .kyhp-btn {
    background-color: #000000;
    border: solid 1px #000000;    
}


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

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

********************************************************************************/
@media screen and (max-width: 1079px) {
    /*============================================================
     サイト共通　ヘッダー調整
    *============================================================*/
    /* .gnav .gnav-main .gnav-left .gnav-logo {
        width: 104px;
    } */
}


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

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: 24px;
        line-height: 150%;
    }
    h3.block-title,
    .block-post-content h3 {
    }

    /*============================================================
     サイト共通　ヘッダー調整
    *============================================================*/
    .gnav .gnav-main .gnav-left .gnav-logo {
        width: 102px;
    }

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

    /*============================================================
     サイト共通　パーツ調整
    *============================================================*/
    /* CTAセクション info (Reserve／instagram)
    ---------------------------------------- */
    .kyhp-sec-cta[data-name="info"] .catch {
        font-size: 24px;
    }
    /* CTAセクション Location
    ---------------------------------------- */
    .kyhp-sec-cta[data-name="location"] .catch {
        font-size: 24px;
    }
    /* CTAセクション Re:choice
    ---------------------------------------- */
    .kyhp-sec-cta[data-name="re-choice"] .catch {
        font-size: 24px;
    }
        
    /*============================================================
     トップページ 調整
    *============================================================*/
    /* セクション
    ---------------------------------------- */

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



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

for SP

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

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

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

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

    /*============================================================
     トップページ 調整
    *============================================================*/
    /* メインビジュアル
    ---------------------------------------- */
    #page-top #mainvisual{
        background-image: url(../images/top/mainvisual-bg-sp.jpg);
        background-size: 767px auto;
    }
    #page-top #mainvisual .info .catch {
        text-align: center;
    }
    /* セクション
    ---------------------------------------- */

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

}