@charset "UTF-8";
/*
 * 【制作期間】2025年3月31日-2025年7月3日
 * 【制作者】三上雅樹
 * 【仕様】
 * グリッドレイアウトで制作
 * コンテンツ幅:84%（min：832px max：1152px）
 * 単語間は‐（ハイフン）を使用
 * スタイルの指定はすべてclassで行う。idは目印として使用。
 *　
*/
:root{
    /*コンテンツ幅*/
    --content-width: clamp(832px, 84%, 1152px);
    --height: clamp(720px, 100%, 1080px);
    /*グリッド設定*/
    --grid-column: 12;
    --grid-width: calc(var(--content-width) / var(--grid-column) - var(--grid-column-gap));
    --swiper-width: calc(var(--content-width) / var(--grid-colum));
    --grid-row-gap-64: 128px;
    --grid-row-gap-32: 64px;
    --grid-row-gap-16: 16px;
    --overview-gap-16: 16px;
    --overview-gap-8: 8px;
    --footer-gap-24: 24px;
    --footer-gap-32: 32px;
    --grid-column-gap: 32px;
    /*行間*/
    --line-height-180: 1.8;
    --line-height-160: 1.6;
    --post-code-gap: 8px;
    --h2-gap: clamp(28px, 2.5vw, 32px);
    --letter-spacing: 2px;
    /*お問い合わせ*/
    --form-margin: clamp(14px, 1.25vw, 16px);
    --form-input-height: clamp(28px, 2.5vw, 32px);
    --form-input-text-size: clamp(16px, 1.5625vw, 20px);
    --form-textare-min-height: clamp(196px, 20vw, 256px);
    --form-row-gap-8: 8px;/*labelと入力要素の行間*/
    --form-row-gap-12: 12px;/*headingとadditionalの行間*/
    --form-row-gap-24: clamp(21px, 1.875vw, 24px);/*form内のadditionalとform要素の行間*/
    --form-row-gap-32: clamp(28px, 2.5vw, 32px);
    --form-row-gap-48: clamp(40px, 3.75vw, 48px);/*pc*/
    /*背景設定*/
    --background-text-size: clamp(64px, 8.4vw, 160px);/*サイト装飾の英字*/
    --background-text-line-height: 0.72;
    --background-text-opacity: 100%;
    --background-block-height: calc(100% - (var(--grid-row-gap-64) * 2));
    /*
     *フォント設定
     * 表示サイズが1280pxまでは最大フォントサイズを維持
     * 1280px - 960pxの間で可変
     * 【理想値の計算式】size / 1280 * 100
    */
    --font: "Inter", "Noto Sans JP", sans-serif;
    --h1-size: clamp(60px, 6.25vw, 80px);
    --h2-size: clamp(32px, 3.125vw, 40px);
    --main-text-size: clamp(16px, 1.5625vw, 20px);/*本文サイズ*/
    --small-text-size: clamp(14px, 1.25vw, 16px);
    --text-size-32: clamp(28px, 2.5vw, 32px);
    --text-size-24: clamp(21px, 1.875vw, 24px);
    --text-size-20: clamp(16px, 1.5625vw, 20px);
    --text-size-18: clamp(14px, 1.40625vw, 18px);
    --news-heading-size: calc(clamp(21px, 1.875vw, 24px) * 0.7);
    --first-view-heading-size: clamp(32px, 5.2vh, 56px);
    --before-size: clamp(54px, 5vw, 64px);
    --after-size: clamp(54px, 5vw, 64px);
    /*-- フォント設定（pcのみ） --*/
    --first-view-msg-size: clamp(21px, 1.875vw, 24px);
    --first-view-co-size: clamp(28px, 2.5vw, 32px);
    --first-view-subtitle-size: clamp(14px, 1.25vw, 16px);
    --footer-co-text-size: clamp(40px, 3.75vw, 48px);
    /*配色*/
    --white: #ffffff;
    --red: #FF4043;
    --text-color: #1f231f;
    --main-color: #82cd00;
    --light-main-color:rgba(130, 205, 0, 0.2);
    --sub-color:#3D6100;
    --header-color: rgba(31, 35, 31, 0.8);/*#1F231F*/
    --translucent-white: rgba(255, 255, 255, 0.6);
    --no-active-color: #ccc;
    /*header*/
    --duration: 0.5s;
    --nav-btn-width: clamp(28px, 2.5vw, 32px);
    --nav-btn-height: 4px;
    --nav-btn-bar-height: 4px;
    --nav-btn-bar-gap: 12px;
    --nav-list-height: clamp(40px, 3.75vw, 48px);
    --header-height: clamp(80px, 7.5vw, 96px);
    --header-tel-height: clamp(120px, 12.5vw, 160px);
    --header-gap: clamp(28px, 2.5vw, 32px);
    --header-title-size: clamp(28px, 2.5vw, 32px);
    --header-subtitle-size: clamp(14px, 1.25vw, 16px);
    --header-margin: clamp(14px, 1.25vw, 16px);
    --header-nav-gap-12: 12px;
    --header-nav-gap-32: clamp(28px, 2.5vw, 32px);
    --header-nav-height: clamp(54px, 5vw, 64px);
    --header-nav-text-size: clamp(14px, 1.25vw, 16px);
    --header-nav-icon-size: clamp(40px, 3.75vw, 48px);
    --header-nav-icon-top: -4px;
    --header-nav-icon-left: calc((100% - var(--header-nav-icon-size)) / 2);
    --header-tel-size: clamp(21px, 1.875vw, 24px);
    --header-tel-line-height: 0.8;
    --header-tel-gap: clamp(14px, 1.25vw, 16px);
    --header-contact-btn-text-size: clamp(14px, 1.25vw, 16px);
    --header-contact-btn-width: clamp(160px , 15.625vw, 200px);
    --header-contact-btn-height: clamp(40px, 3.75vw, 48px);
    /*padding*/
    --main-padding: clamp(80px, 10vw, 128px);
    /*button*/
    --button-width: clamp(232px, 20vw, 256px);
    --button-height: clamp(40px, 3.75vw, 48px);
    /*footer*/
    --footer-padding: 10px;
    --footer-co-text-size: clamp(40px, 3.75vw, 48px);
    /*contact-banner*/
    --banner-border: 12px;
    --banner-tel-size: clamp(32px, 3.125vw, 40px);
    --banner-btn-width: clamp(240px, 20.3125vw, 260px);
    --banner-btn-height: clamp(40px, 3.75vw, 48px);
    --banner-btn-position: clamp(32px, 3.125vw, 40px);
    /*first-view*/
    --first-view-heading-size: clamp(32px, 5.2vh, 56px);
    --first-view-msg-size: clamp(21px, 1.875vw, 24px);
    --first-view-co-size: clamp(28px, 2.5vw, 32px);
    --first-view-subtitle-size: clamp(14px, 1.25vw, 16px);
    --first-view-row-gap: clamp(80px, 7.5vw, 96px);
    --first-view-text-colums-gap-16: clamp(14px, 1.25vw, 16px);
    --first-view-text-colums-gap-64: clamp(54px, 5vw, 64px);
    --first-view-margin-8: 8px;
    --first-view-margin-4: 4px;
    /*news*/
    --index-news-height: clamp(80px, 7.5vw, 96px);
    --index-news-grid-row-gap: clamp(21px, 1.875vw, 24px);/*pcのみ*/
    --index-news-border: 1px;
    --index-news-heading-size: calc(clamp(21px, 1.875vw, 24px) * 0.7);
    --index-news-margin: 12px;
    --index-news-arrow-width: clamp(80px, 10vw, 128px);
    --index-news-arrow-height: clamp(32px, 5.2vh, 56px);
    --index-news-arrow-stroke-size: 2px;
    /*service*/
    --index-service-gap: clamp(28px, 2.5vw, 32px);
    --service-grid-heading-height: clamp(80px, 7.5vw, 96px);
    --service-grid-row-gap-8: 8px;
    --service-grid-row-gap-16: clamp(28px, 2.5vw, 32px);
    --service-grid-row-gap-32: clamp(54px, 5vw, 64px);
    --service-img-size: clamp(198px, 20.625vw, 264px);
    --service-img-position: clamp(80px, 7.5vw, 96px);/*pc*/
    --service-heading-padding: 4px;
    --service-checklist-padding: clamp(24px, 2.1875vw, 28px);
    --service-margin-8: clamp(14px, 1.25vw, 16px);
    --service-heading-size: clamp(28px, 2.5vw, 32px);/*pc*/
    --service-checkllist-size: clamp(14px, 1.25vw, 16px);/*pc*/
    --service-checkllist-top: calc(var(--main-text-size) * 0.3);/*pc*/
    --service-before-size: clamp(28px, 2.5vw, 32px);/*pc*/
    --service-before-img-size: clamp(198px, 20.625vw, 264px);/*pc*/
    --service-arrow-size: clamp(80px, 10vw, 128px);/*pc*/
    /*privacy-policy*/
    --privacy-policy-margin: 8px;
    --privacy-policy-title-padding: 4px;
    --privacy-policy-row-gap-8: 8px;
    /*about*/
    --about-padding-4: 4px;
    --about-padding-8: 8px;
    --about-padding-16: clamp(28px, 2.5vw, 32px);
    --about-border-size-1: 1px;
    --page-head-gap-16: clamp(40px, 3.75vw, 48px);
    /*contact*/
    --contact-tel-gap-8: clamp(14px, 1.25vw, 16px);
    --contact-tel-img-size: clamp(40px, 3.75vw, 48px);
    --contact-tel-text-size: clamp(21px, 1.875vw, 24px);/*pc*/
    --contact-tel-size: clamp(40px, 3.75vw, 48px);/*pc*/
    /*beginner*/
    --beginner-grid-row-gap-16: clamp(14px, 1.25vw, 16px);
    --beginner-grid-row-gap-32: clamp(54px, 5vw, 64px);
    --beginner-grid-row-gap-56: clamp(32px, 5.2vh, 56px);
    --beginner-arrow-width: clamp(40px, 3.75vw, 48px);
    --beginner-arrow-height: calc(var(--beginner-arrow-width) / 2);
    --beginner-arrow-position: calc(clamp(32px, 3.125vw, 40px) * -1);
    --beginner-msg-padding: clamp(14px, 1.25vw, 16px);
    --beginner-question-padding-8: clamp(14px, 1.25vw, 16px);
    --beginner-question-padding-16: clamp(28px, 2.5vw, 32px);
    --beginner-question-padding-32: clamp(54px, 5vw, 64px);
    --beginner-background-img-width: clamp(600px, 62.5vw, 800px);
    --beginner-background-img-position: 10vw;
    --beginner-flow-number-size: clamp(32px, 5.2vh, 56px);
    --beginner-flow-list-padding-bottom: 4px;
    --beginner-flow-list-padding-left: calc(var(--beginner-flow-number-size) + var(--text-size-24));
    --beginner-flow-number-line-height: 0.68;
    --beginner-icon-size: clamp(14px, 1.25vw, 16px);
    /*works*/
    --works-work-lists-margin: 4px;
    --works-work-lists-category-height: clamp(21px, 1.875vw, 24px);
    --works-work-lists-category-width: clamp(64px, 6.25vw, 80px);
    --works-work-lists-area-padding-4: 4px;
    --works-work-lists-area-padding-16: clamp(14px, 1.25vw, 16px);
    --works-pagination-link-size: 48px;/*固定*/
    --works-pagination-row-gap: clamp(14px, 1.25vw, 16px);
    --works-category-btn-height: clamp(40px, 3.75vw, 48px);
    /*work-example*/
    --work-example-grid-row-gap-32: clamp(28px, 2.5vw, 32px);
    --work-example-explanation-padding: 4px;
    --work-example-explanation-row-gap-16: clamp(14px, 1.25vw, 16px);
    --work-example-thumbnail-gap: clamp(14px, 1.25vw, 16px);
    --work-example-button-padding: 14%;
    --work-example-btn-height: clamp(32px, 5.2vh, 56px);
    /*button*/
    --button-hover-scale: 1.04;
    --button-transition: 0.4s;
    /*splide*/
    --splide-arrow-size: clamp(54px, 5vw, 64px);
    --splide-arrow-svg-size: clamp(40px, 3.75vw, 48px);
    --splide-arrow-svg-hover-scale: 1.3;
    --splide-pagination-size: 8px;
    --splide-pagination-margin: 4px;
    /*supplement-regarding-inquiries*/
    --supplement-margin: 10px;
    --supplement-padding-3: 4px;
    --supplement-padding-6: 6px;
    --supplement-padding-10: 10px;
    --supplement-padding-16: clamp(14px, 1.25vw, 16px);
    --supplement-border: 2px;
    /*checkbox*/
    --border-size-2: 2px;
    --check-icon-left: 2px;
    /*sns-icons*/
    --sns-icon-size: clamp(32px, 5.2vh, 56px);
}
@media screen and (min-width:1920px){
    :root{
        /*コンテンツ幅*/
        --content-width: 60%;
        --height: calc(100svh / 1920 * 1vw);
        /*グリッド設定*/
        --grid-row-gap-64: 6.7vw;/*≒128px*/
        --grid-row-gap-32: 3.4vw;/*≒64px*/
        --grid-row-gap-16: 0.83vw;/*≒16px*/
        --overview-gap-16: 0.83vw;/*≒16px*/
        --overview-gap-8: 0.42vw;/*≒8px*/
        --footer-gap-24: 1.25vw;/*≒24px*/
        --footer-gap-32: 1.67vw;/*≒32px*/
        --grid-column-gap: 1.67vw;/*≒32px*/
        --grid-width: calc(var(--content-width) / var(--grid-column) - var(--grid-column-gap));
        /*行間*/
        --post-code-gap: 0.42vw;/*≒8px*/
        --h2-gap: 1.67vw;/*≒32px*/
        --letter-spacing: 0.104vw;/*≒2px*/
        /*お問い合わせ*/
        --form-margin: 0.83vw;/*≒16px*/
        --form-input-height: 1.67vw;/*≒32px*/
        --form-input-text-size: 1.05vw;/*≒20px*/
        --form-textare-min-height: 13.4vw;/*≒256px*/
        --form-row-gap-8: 0.42vw;/*≒8px*/
        --form-row-gap-12: 0.625vw;/*≒12px*/
        --form-row-gap-24: 1.25vw;/*≒24px*/
        --form-row-gap-32: 1.67vw;/*≒32px*/
        --form-row-gap-48: 2.5vw;/*≒48px*/
        /*背景設定*/
        --background-text-size: 8.4vw;/*≒160px*/
        --background-text-line-height: 0.7;
        /*
         *フォント設定
        */
        --h1-size: 4.2vw;/*≒80px*/
        --h2-size: 2.1vw;/*≒40px*/
        --main-text-size: 1.05vw;/*本文サイズ≒20px*/
        --small-text-size: 0.83vw;/*≒16px*/
        --text-size-32: 1.67vw;/*≒32px*/
        --text-size-24: 1.25vw;/*≒24px*/
        --text-size-20:1.05vw;/*≒20px*/
        --before-size: 3.4vw;/*≒64px*/
        --after-size: 3.4vw;/*≒64px*/
        /*header*/
        --nav-btn-width: 1.67vw;/*≒32px*/
        --nav-btn-height: 0.21vw;/*≒4px*/
        --nav-btn-bar-height: 0.21vw;/*≒4px*/
        --nav-btn-bar-gap: 0.625vw;/*≒12px*/
        --nav-list-height: 2.5vw;/*≒48px*/
        --header-height: 5vw;/*≒96px*/
        --header-tel-height: 8.4vw;/*≒160px*/
        --header-gap: 1.67vw;/*≒32px*/
        --header-title-size: 1.67vw;/*≒32px*/
        --header-subtitle-size: 0.83vw;/*≒16px*/
        --header-margin: 0.83vw;/*≒16px*/
        --header-nav-gap-12: 0.625vw;/*≒12px*/
        --header-nav-gap-32: 1.67vw;/*≒32px*/
        --header-nav-height: 3.4vw;/*≒64px*/
        --header-nav-text-size: 0.83vw;/*≒16px*/
        --header-nav-icon-size: 2.5vw;/*≒48px*/
        --header-nav-icon-top: -0.21vw;
        --header-nav-icon-left: calc((100% - var(--header-nav-icon-size)) / 2);
        --header-tel-size: 1.25vw;/*≒24px*/
        --header-tel-gap: 0.83vw;/*≒16px*/
        --header-contact-btn-text-size: 0.83vw;/*≒16px*/
        --header-contact-btn-width: 10.42vw;/*200px*/
        --header-contact-btn-height: 2.5vw;/*≒48px*/
        /*padding*/
        --main-padding: 6.67vw;/*≒128px*/
        /*button*/
        --button-width: 13.4vw;/*≒256px*/
        --button-height: 2.5vw;/*≒48px*/
        /*footer*/
        --footer-padding: 0.52vw;/*≒10px*/
        --footer-co-text-size: 2.5vw;/*≒48px*/
        /*contact-banner*/
        --banner-border: 0.625vw;/*≒12px*/
        --banner-tel-size: 2.1vw;/*≒40px*/
        --banner-btn-width: 13.54vw;/*≒260px*/
        --banner-btn-height: 2.5vw;/*≒48px*/
        --banner-btn-position: 2.1vw;/*≒40px*/
        --banner-border-size: 0.83vw;/*≒16px*/
        /*first-view*/
        --first-view-heading-size: 2.92vw;/*≒56px*/
        --first-view-msg-size: 1.25vw;/*≒24px*/
        --first-view-co-size: 1.67vw;/*≒32px*/
        --first-view-subtitle-size: 0.83vw;/*≒16px*/
        --first-view-row-gap: 5vw;/*≒96px*/
        --first-view-text-colums-gap-16: 0.83vw;/*≒16px*/
        --first-view-text-colums-gap-64: 3.4vw;/*≒64px*/
        --first-view-margin-8: 0.42vw;/*≒8px*/
        --first-view-margin-4: 0.21vw;/*≒4px*/
        /*news*/
        --index-news-height: 5vw;/*≒96px*/
        --index-news-grid-row-gap: 1.25vw;/*≒24px*/
        --index-news-border: 0.052vw;/*≒1px*/
        --index-news-heading-size: calc(1.25vw * 0.7);
        --index-news-margin: 0.625vw;/*≒12px*/
        --index-news-arrow-width: 6.7vw;/*≒128px*/
        --index-news-arrow-height: 2.92vw;/*≒56px*/
        --index-news-arrow-stroke-size: 0.104vw;/*≒2px*/
        /*service*/
        --index-service-gap: 1.67vw;/*≒32px*/
        --service-grid-heading-height: 5vw;/*≒96px*/
        --service-grid-row-gap-8: 0.42vw;/*≒8px*/
        --service-grid-row-gap-16: 1.67vw;/*≒32px*/
        --service-grid-row-gap-32: 3.4vw;/*≒64px*/
        --service-img-size: 13.75vw;/*≒264px*/
        --service-img-position: 5vw;/*≒96px*/
        --service-heading-padding: 0.21vw;/*≒4px*/
        --service-checklist-padding: 1.46vw;/*≒28px*/
        --service-margin-8: 0.84vw;/*≒16px*/
        --service-heading-size: 1.67vw;/*≒32px*/
        --service-checkllist-size: 0.84vw;/*≒16px*/
        --service-before-size: 1.67vw;/*≒32px*/
        --service-before-img-size: 13.75vw;/*≒264px*/
        --service-arrow-size: 6.67vw;/*≒128px*/
        /*privacy-policy*/
        --privacy-policy-margin: 0.42vw;/*≒8px*/
        --privacy-policy-title-padding: 0.21vw;/*≒4px*/
        --privacy-policy-row-gap-8: 0.42vw;/*≒8px*/
        /*about*/
        --about-padding-4: 0.21vw;/*≒4px*/
        --about-padding-8: 0.42vw;/*≒8px*/
        --about-padding-16: 0.84vw;/*≒16px*/
        --about-border-size-1: 0.052vw;/*≒1px*/
        --page-head-gap-16: 3.4vw;/*≒64px*/
        /*contact*/
        --contact-tel-gap-8: 0.84vw;/*≒16px*/
        --contact-tel-img-size: 2.5vw;/*≒48px*/
        --contact-tel-text-size: 1.25vw;/*≒24px*/
        --contact-tel-size: 2.5vw;/*≒48px*/
        /*beginner*/
        --beginner-grid-row-gap-16: 0.84vw;/*≒16px*/
        --beginner-grid-row-gap-32: 3.4vw;/*≒64px*/
        --beginner-grid-row-gap-56: 2.92vw;/*≒56px*/
        --beginner-arrow-width: 2.5vw;/*≒48px*/
        --beginner-arrow-height: calc(var(--beginner-arrow-width) / 2);
        --beginner-arrow-position: calc(2.1vw * -1);/*≒40px*/
        --beginner-msg-padding: 0.84vw;/*≒16px*/
        --beginner-question-padding-8: 0.84vw;/*≒16px*/
        --beginner-question-padding-16: 1.67vw;/*≒32px*/
        --beginner-question-padding-32: 3.4vw;/*≒64px*/
        --beginner-background-img-width: 41.67vw;/*≒800px*/
        --beginner-flow-number-size: 2.92vw;/*≒56px*/
        --beginner-flow-list-padding-bottom: 0.21vw;/*≒4px*/
        --beginner-flow-list-padding-left: calc(var(--beginner-flow-number-size) + var(--text-size-24));
        --beginner-icon-size: 0.84vw;/*≒16px*/
        /*works*/
        --works-work-lists-margin: 0.21vw;/*≒4px*/
        --works-work-lists-category-height: 1.25vw;/*≒24px*/
        --works-work-lists-category-width: 4.2vw;/*≒80px*/
        --works-work-lists-area-padding-4: 0.21vw;/*≒4px*/
        --works-work-lists-area-padding-16: 0.84vw;/*≒16px*/
        --works-pagination-link-size: 2.5vw;/*≒48px*/
        --works-pagination-row-gap: 0.84vw;/*≒16px*/
        --works-category-btn-height:  2.5vw;/*≒48px*/
        /*work-example*/
        --work-example-grid-row-gap-32: 1.67vw;/*≒32px*/
        --work-example-explanation-padding: 0.21vw;/*≒4px*/
        --work-example-explanation-row-gap-16: 0.84vw;/*≒16px*/
        --work-example-thumbnail-gap: 0.84vw;/*≒16px*/
        --work-example-btn-height: 2.92vw;/*≒56px*/
        /*splide*/
        --splide-arrow-size: 3.4vw;/*≒64px*/
        --splide-arrow-svg-size: 2.5vw;/*≒48px*/
        --splide-pagination-size: 0.42vw;/*≒8px*/
        --splide-pagination-margin: 0.21vw;/*≒4px*/
        /*supplement-regarding-inquiries*/
        --supplement-margin: 0.52vw;/*10px*/
        --supplement-padding-3: 0.21vw;/*≒4px*/
        --supplement-padding-6: 0.31vw;/*6px*/
        --supplement-padding-10: 0.52vw;/*10px*/
        --supplement-padding-16: 0.84vw;/*≒16px*/
        --supplement-border: 0.104vw;/*≒2px*/
    }
}
/*
 * 共通部品の設定
 * > 全体設定
 * > header
 * > footer
 * > contact-banner
 * > backgroud-text（装飾の英字）
*/
/*
 * 全体設定
*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-size: var(--main-text-size);
    font-family: var(--font);
    font-style: 400;
    line-height: 1;
    color: var(--text-color);
}
a{
    transform: scale(1);
    transition: transform var(--button-transition);
}
a[href^="tel:"]{
    pointer-events: none;
}
a:hover{
    transform: scale(var(--button-hover-scale));
    transition: transform var(--button-transition);
}
.vartical-text{
    writing-mode: vertical-rl;
}
.background-blur{
    position: fixed;
    top: 0;
    left: 0;
    z-index: -40;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari用 */
    filter: brightness(60%);
    opacity: 0;
    transition: opacity 0.8s ease;
}
.background-blur.active{
    opacity: 1;
    transition: opacity 0.8s ease;
}
.background-movie{
    position: fixed;
    top: 0;
    left: 0;
    z-index: -50;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right;
    filter: brightness(70%);
}
.main{
    position: relative;
    padding-top: var(--main-padding);
}
.main .page-head{
    width: calc(var(--content-width) + (100% - var(--content-width)) / 2);
    max-height: none;
    aspect-ratio: 4.8 / 1;
    margin-left: calc((100% - var(--content-width)) / 2);
    display: grid;
    grid-template:
    ".... ....... ...." 1fr
    ".... heading ...." auto
    ".... ....... ...." var(--page-head-gap-16)
    / var(--page-head-gap-16) auto 1fr;
}
.main .page-head .heading{
    grid-area: heading;
    color: var(--white);
    font-size: var(--h1-size);
    font-weight: 400;
}
.main-text{
    line-height: var(--line-height-160);
    font-size: var(--main-text-size);
}
.line-break{
    display: block;
}
.link{
    text-decoration: none;
    color: var(--text-color);
}
.text-link{
    color: var(--main-color);
}
.list{
    list-style: none;
}
.next-button{
    display: grid;
    justify-items: center;
    align-items: center;
    width: var(--button-width);
    height: var(--button-height);
    border: none;
    background: var(--main-color);
    font-size: var(--main-text-size);
    cursor: pointer;
    transform: scale(1);
    transition: transform var(--button-transition);
}
.next-button:hover{
    transform: scale(var(--button-hover-scale));
    transition: transform var(--button-transition);
}
.next-button:disabled{
    filter: grayscale(1);
    transform: scale(1);
}
.img{
    width: 100%;
}
.br{
    display: inline-block;
}
.pc-br{
    display: inline-block;
}
.sp-br{
    display: inline;
}

/*
 * header
*/
.header.hidden{
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
    transition: opacity 1s ease;
}
.header{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: var(--header-color);
    color: var(--white);
    z-index: 50;
    display: grid;
    grid-template:
    ".... title .... nav ...." var(--header-height)
    /var(--header-gap) auto 1fr auto var(--header-gap);
    transform: scaleY(1);
    transform-origin: top;
    opacity: 1;
    transition: opacity 1s ease;
}
.header .title.link{
    grid-area: title;
    font-size: var(--header-title-size);
    align-self: center;
    font-weight: 400;
    color: var(--white);
}
.header .title .subtitle{
    display: block;
    font-size: var(--header-subtitle-size);
    margin-bottom: var(--header-margin);
}
.header .nav-btn-wrap{
    grid-area: nav-btn;
    display: none;
}
.header .nav{
    grid-area: nav;
    display: grid;
    grid-template:
    "......... .... ........... ........... ..........." var(--header-nav-gap-12)
    "nav-lists .... contact-msg contact-msg contact-msg" auto
    "nav-lists .... tel-wrap    ........... contact-btn" auto
    "......... .... ........... ........... ..........." var(--header-nav-gap-12)
    / auto var(--header-nav-gap-32) auto var(--header-nav-gap-12) auto;
}
.header .nav .nav-lists{
    grid-area: nav-lists;
    align-self: end;
}
.header .nav .nav-lists .grid{
    display: grid;
    grid-template:
    "about .... service .... works .... beginner" var(--header-nav-height)
    / auto var(--header-margin) auto var(--header-margin) auto var(--header-margin) auto;
    list-style: none;
    align-items: end;
}
.header .nav .nav-lists .grid .nav-home{
    display: none;
}
.header .nav .nav-lists .grid .nav-about{
    grid-area: about;
    position: relative;
}
.header .nav .nav-lists .grid .nav-about::before{
    content: "";
    width: var(--header-nav-icon-size);
    height: var(--header-nav-icon-size);
    background-image: url(./image/nav-about.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: var(--header-nav-icon-top);
    left: var(--header-nav-icon-left);
    z-index: -5;
}
.header .nav .nav-lists .grid .nav-about:hover::before{
    background-image: url(./image/nav-about--active.png);
}
.header .nav .nav-lists .grid .nav-service{
    grid-area: service;
    position: relative;
}
.header .nav .nav-lists .grid .nav-service::before{
    content: "";
    width: var(--header-nav-icon-size);
    height: var(--header-nav-icon-size);
    background-image: url(./image/nav-service.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: var(--header-nav-icon-top);
    left: var(--header-nav-icon-left);
    z-index: -5;
}
.header .nav .nav-lists .grid .nav-service:hover::before{
    background-image: url(./image/nav-service--active.png);
}
.header .nav .nav-lists .grid .nav-works{
    grid-area: works;
    position: relative;
}
.header .nav .nav-lists .grid .nav-works::before{
    content: "";
    width: var(--header-nav-icon-size);
    height: var(--header-nav-icon-size);
    background-image: url(./image/nav-works.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: var(--header-nav-icon-top);
    left: var(--header-nav-icon-left);
    z-index: -5;
}
.header .nav .nav-lists .grid .nav-works:hover::before{
    background-image: url(./image/nav-works--active.png);
}
.header .nav .nav-lists .grid .nav-beginner{
    grid-area: beginner;
    position: relative;
}
.header .nav .nav-lists .grid .nav-beginner::before{
    content: "";
    width: var(--header-nav-icon-size);
    height: var(--header-nav-icon-size);
    background-image: url(./image/nav-beginner.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: var(--header-nav-icon-top);
    left: var(--header-nav-icon-left);
    z-index: -5;
}
.header .nav .nav-lists .grid .nav-beginner:hover::before{
    background-image: url(./image/nav-beginner--active.png);
}
.header .nav .nav-lists .grid .nav-contact{
    display: none;
}
.header .nav .nav-lists .grid .link{
    display: grid;
    align-items: end;
    justify-items: center;
    font-size: var(--header-nav-text-size);
    font-weight: 700;
    color: var(--white);
    height: var(--header-nav-height);
}
.header .nav .nav-lists .grid .nav-home:hover .link,
.header .nav .nav-lists .grid .nav-about:hover .link,
.header .nav .nav-lists .grid .nav-service:hover .link,
.header .nav .nav-lists .grid .nav-works:hover .link,
.header .nav .nav-lists .grid .nav-beginner:hover .link{
    color: var(--main-color);
}
.header .sns-icons{
    display: none;
}
.header .contact-msg{
    grid-area: contact-msg;
    font-size: var(--header-nav-text-size);
}
.header .tel-contact{
    grid-area: tel-wrap;
    height: auto;
    display: grid;
    grid-template:
    "img  .... tel" auto
    /auto var(--header-tel-gap) auto;
    align-items: end;
}
.header .tel-contact .additional{
    grid-area: additional;
    display: none;
}
.header .tel-contact .tel-img{
    grid-area: img;
    width: calc(var(--header-tel-size) * 1.4);
}
.header .tel-contact .tel-img .pass{
    fill: var(--white);
}
.header .tel-contact .tel-number{
    grid-area: tel;
    color: var(--white);
    font-size: var(--header-tel-size);
    line-height: var(--header-tel-line-height);
}
.header .contact-btn-wrap{
    grid-area: contact-btn;
    width: var(--header-contact-btn-width);
    height: var(--header-contact-btn-height);
    align-self: end;
}
.header .contact-btn-wrap .contact-btn{
    display: grid;
    width: 100%;
    height: 100%;
    background: var(--main-color);
    font-size: var(--header-contact-btn-text-size);
    justify-content: center;
    align-content: center;
}
/*
 * footer
*/
.footer{
    position: relative;
}
.footer::before{
    content: "KOGATOSOUKOUGYOU";
    font-size: var(--background-text-size);
    color: var(--main-color);
    opacity: var(--background-text-opacity);
    width: 100%;
    text-align: center;
    line-height: var(--background-text-line-height);
    position: absolute;
    top: calc(var(--grid-row-gap-64) - (var(--background-text-size) * var(--background-text-line-height)));
    left: 0;
}
.footer::after{
    content: "";
    width: 100%;
    border-top: 1px var(--main-color) solid;
    position: absolute;
    top: var(--grid-row-gap-64);
    left: 0;
}
.footer .grid{
    width: var(--content-width);
    display: grid;
    grid-template:
    "....... ....... ....... ....... ....... .... .... ... ... ... ... ..." var(--grid-row-gap-64)
    "....... ....... ....... ....... ....... .... .... ... ... ... ... ..." var(--grid-row-gap-32)
    "company company company company company .... .... nav nav nav nav nav" auto
    "....... ....... ....... ....... ....... .... .... nav nav nav nav nav" var(--footer-gap-24)
    "address address address address address .... .... nav nav nav nav nav" auto
    "....... ....... ....... ....... ....... .... .... nav nav nav nav nav" var(--sns-icon-size)
    "sns     sns     sns     sns     sns     .... .... nav nav nav nav nav" auto
    "....... ....... ....... ....... ....... .... .... nav nav nav nav nav" var(--sns-icon-size)
    "copy    copy    copy    copy    copy    .... .... nav nav nav nav nav" auto
    "....... ....... ....... ....... ....... .... .... ... ... ... ... ..." var(--grid-row-gap-32)
    /1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
    margin: auto;
}
.footer .grid .company-name{
    grid-area: company;
    font-size: var(--footer-co-text-size);
    font-weight: 700;
}
.footer .grid .address{
    grid-area: address;
    font-size: var(--text-size-32);
}
.footer .grid .address .post-code{
    display: block;
    margin-bottom: var(--post-code-gap);
}
.footer .grid .nav{
    grid-area: nav;
}
.footer .grid .nav .list .link{
    display: block;
    padding: var(--footer-padding) 0 var(--footer-padding) 0;
    font-size: var(--text-size-24);
}
.footer .grid .sns-icons{
    grid-area: sns;
}
.footer .grid .sns-icons .instagram{
    width: var(--sns-icon-size);
    height: var(--sns-icon-size);
    object-fit: contain;
    fill: var(--text-color);
}
.footer .grid .copy{
    grid-area: copy;
    font-size: var(--small-text-size);
    justify-self: start;
}
/*
 * contact-banner
*/
.contact-banner.grid{
    width: var(--content-width);
    display: grid;
    grid-template:
    ".... banner banner banner banner banner banner banner banner banner banner ...." auto
    ".... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...." var(--grid-row-gap-64)
    /1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
    margin: auto;
}
.contact-banner.grid .banner{
    grid-area: banner;
    display: grid;
    grid-template:
    ".... .... ......... ......... ......... .........   ........... ........... ........... ..........." var(--grid-row-gap-16)
    ".... .... main-text main-text main-text main-text   main-text   main-text   ........... ..........." auto
    ".... .... ......... ......... ......... .........   ........... ........... ........... ..........." var(--grid-row-gap-16)
    "tel  tel  tel       tel       tel       contact-btn contact-btn contact-btn contact-btn contact-btn" auto
    ".... .... ......... ......... ......... .........   ........... ........... ........... ..........." var(--grid-row-gap-16)
    /1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    justify-items: center;
    border: var(--banner-border) var(--main-color) solid;
}
.contact-banner.grid .banner .main-text{
    grid-area: main-text;
    color: var(--sub-color);
    font-size: var(--text-size-24);
}
.contact-banner.grid .banner .tel{
    grid-area: tel;
    font-size: var(--banner-tel-size);
}
.contact-banner.grid .banner .tel .tel-img{
    display: inline-block;
    width: var(--banner-tel-size);
}
.contact-banner.grid .banner .contact-btn{
    grid-area: contact-btn;
    width: var(--banner-btn-width);
    height: var(--banner-btn-height);
    display: grid;
    justify-content: center;
    align-items: center;
    background: var(--main-color);
    font-size: var(--text-size-24);
    padding-left: var(--text-size-24);
    position: relative;
}
.contact-banner.grid .banner .contact-btn::before{
    content: "";
    width: var(--text-size-24);
    height: var(--text-size-24);
    background-image: url("./image/mail.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: calc(50% - (var(--text-size-24) / 2));
    left: var(--banner-btn-position);
}
/*
 * backgroud-text（装飾の英字）
*/
.background-text{
    white-space: nowrap;
    overflow-x: visible;
    height: auto;
}
.background-text.active{
    font-size: var(--background-text-size);
    font-weight: 700;
    line-height: var(--background-text-line-height);
    writing-mode: vertical-rl;
    text-orientation: sideways;
    color: var(--main-color);
    opacity: var(--background-text-opacity);
    display: block;
    position: fixed;
    top: var(--main-padding);
    left: 0;
}
.background-text.stop{
    font-size: var(--background-text-size);
    font-weight: 700;
    line-height: var(--background-text-line-height);
    writing-mode: vertical-rl;
    text-orientation: sideways;
    color: var(--main-color);
    opacity: var(--background-text-opacity);
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
}
/*
 *--------------------------------------------------------
 * index.html
 * > first-view
 * > お知らせ 
 * > MESSAGE
 * > WORKS
 * > SERVICE
 * > CONTACT
 * > footer
 *--------------------------------------------------------
*/
.index .h1{
    font-size: var(--header-title-size);
    font-weight: 400;
}
/*　
 *first-view
 * ここだけグリッドの構成が特殊（コンテンツ幅は同じになるように設定）
*/
.index .first-view .grid{
    height: var(--height);
    display: grid;
    grid-template:
    ".... ......... ......... ......... .... .... .... .... .... .... .... .... .... ...." var(--first-view-row-gap)
    ".... text-wrap text-wrap text-wrap .... .... .... .... .... .... .... .... .... ...." auto
    ".... ......... ......... ......... .... .... .... .... .... .... .... .... .... ...." auto
    ".... ......... ......... ......... news news news news news news news news news news" var(--index-news-height)
    /minmax(32px, 1fr) var(--grid-width) var(--grid-width) var(--grid-width) var(--grid-width) var(--grid-width) var(--grid-width)
    var(--grid-width) var(--grid-width) var(--grid-width) var(--grid-width) var(--grid-width) var(--grid-width) minmax(32px, 1fr);
    column-gap: var(--grid-column-gap);
    margin: auto;
    color: var(--white);
}
.index .first-view .text-wrap{
    grid-area: text-wrap;
    display: grid;
    /*縦書きなので縦横が逆*/
    grid-template:
    "heading heading" auto
    "....... ......." var(--first-view-text-colums-gap-16)
    "msg     msg    " auto
    "....... ......." var(--first-view-text-colums-gap-64)
    "....... co     " auto
    "....... ......." 1fr
    /auto auto;
    letter-spacing: var(--letter-spacing);
}
.index .first-view .text-wrap .heading{
    grid-area: heading;
    font-size: var(--first-view-heading-size);
    font-weight: 700;
}
.index .first-view .text-wrap .msg{
    grid-area: msg;
    font-size: var(--first-view-msg-size);
}
.index .first-view .text-wrap .msg_br{
    display: block;
    margin-left: var(--first-view-margin-8);
}
.index .first-view .text-wrap .co{
    grid-area: co;
    font-size: var(--first-view-co-size);
    font-weight: 700;
    
}
.index .first-view .text-wrap .co .subtitle{
    display: block;
    font-size: var(--first-view-subtitle-size);
    margin-left: var(--first-view-margin-4);
}
/*
 *お知らせ
*/
.index .first-view .news{
    grid-area: news;
    display: grid;
    grid-template:
    "....... ....... ....... ......." var(--index-news-grid-row-gap)
    "heading heading heading heading" var(--index-news-heading-size)
    "....... ....... ....... arrow  " var(--index-news-grid-row-gap)
    "article article article arrow  " auto
    /1fr 1fr 1fr 1fr;
    line-height: 1;
    border-top: var(--index-news-border) var(--white) solid;
}
.index .first-view .news .heading{
    grid-area: heading;
    font-size: var(--text-size-24);
}
.index .first-view .news .article{
    grid-area: article;
}
.index .first-view .news .article .date{
    margin-right: var(--index-news-margin);
    font-size: var(--small-text-size);
}
.index .first-view .news .arrow-img{
    grid-area: arrow;
}
.index .first-view .news .arrow-svg{
    width: var(--index-news-arrow-width);
    height: var(--index-news-arrow-height);
    opacity: 1;
    justify-self: end;
    align-self: top;
}
.index .first-view .news .arrow-svg .icon{
    fill: transparent;
    stroke: var(--white);
    stroke-miterlimit: 10;
    stroke-width: var(--index-news-arrow-stroke-size);
}
.index .first-view .news .arrow-svg:hover .icon{
    stroke: var(--main-color);
}
/*
 * MESSAGE
*/
.index .message{
    position: relative;
}
.index .message::before{
    content: "MESSAGE";
    writing-mode: vertical-rl;
    text-orientation: sideways;
    font-size: var(--background-text-size);
    font-weight: 700;
    line-height: var(--background-text-line-height);
    position: absolute;
    top: var(--grid-row-gap-64);
    left: 0;
    color: var(--white);
    opacity: var(--background-text-opacity);
}
.index .message .grid{
    width: var(--content-width);
    display: grid;
    grid-template:
    "......... ......... ......... ......... ......... ......... ......... ......... .... .... .... ...." var(--grid-row-gap-64)
    "heading   heading   heading   heading   heading   heading   heading   heading   .... .... .... ...." auto
    "......... ......... ......... ......... ......... ......... ......... ......... .... .... .... ...." var(--grid-row-gap-32)
    "main-text main-text main-text main-text main-text main-text main-text main-text .... .... .... ...." auto
    "......... ......... ......... ......... ......... ......... ......... ......... .... .... .... ...." var(--grid-row-gap-64)
    /1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
    margin: auto;
    color: var(--white);
    line-height: 1.6;
}
.index .message .grid .heading{
    grid-area: heading;
    font-size: var(--h2-size);
}
.index .message .grid .main-text{
    grid-area: main-text;
}
.index .message .grid .main-text .line-height{
    margin-bottom: var(--main-text-size);
}
/*
 * WORKS
*/
.index .works{
    position: relative;
}
.index .works::before{
    content: "WORKS";
    writing-mode: vertical-rl;
    text-orientation: sideways;
    font-size: var(--background-text-size);
    font-weight: 700;
    line-height: var(--background-text-line-height);
    position: absolute;
    top: var(--grid-row-gap-64);
    right: 0;
    color: var(--white);
    opacity: var(--background-text-opacity);
}
.index .works::after{
    content: "";
    width: calc(var(--content-width) + (100% - var(--content-width)) / 2);
    height: calc(100% - var(--grid-row-gap-64) * 2);
    background: var(--white);
    position: absolute;
    top: var(--grid-row-gap-64);
    left: 0;
    z-index: -10;
}
.index .works .grid{
    grid-area: works;
    position: relative;
    width: var(--content-width);
    display: grid;
    grid-template:
    "........ ........ ........ ........ ........ ........ ........ ........ ........ ........ ........ ........" var(--grid-row-gap-64)
    "........ ........ ........ ........ ........ ........ ........ ........ ........ ........ ........ ........" var(--grid-row-gap-32)
    "heading  heading  heading  heading  heading  heading  heading  heading  heading  heading  heading  heading " auto
    "........ ........ ........ ........ ........ ........ ........ ........ ........ ........ ........ ........" var(--grid-row-gap-32)
    "........ prev     splide   splide   splide   splide   splide   splide   splide   splide   next     ........" auto
    "........ ........ ........ ........ ........ ........ ........ ........ ........ ........ ........ ........" var(--grid-column-gap)
    "splide-p splide-p splide-p splide-p splide-p splide-p splide-p splide-p splide-p splide-p splide-p splide-p" auto
    "........ ........ ........ ........ ........ ........ ........ ........ ........ ........ ........ ........" var(--grid-row-gap-32)
    "........ ........ ........ button   button   button   button   button   button   ........ ........ ........" auto
    "........ ........ ........ ........ ........ ........ ........ ........ ........ ........ ........ ........" var(--grid-row-gap-32)
    "........ ........ ........ ........ ........ ........ ........ ........ ........ ........ ........ ........" var(--grid-row-gap-64)
    /1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
    margin: auto;
}
.index .works .grid .heading{
    grid-area: heading;
    font-size: var(--h2-size);
}
.index .splide__track{
    grid-area: splide;
}
.index .splide__track a:hover{
    transform: scale(1);
}
.index .splide__track .splide__list{
    display: flex;
    flex-wrap: nowrap;
}
.index .splide__track .splide__list .splide__slide{
    display: grid;
    width: 100%;
    grid-template:
    "before after" auto
    / 1fr 1fr;
    column-gap: var(--grid-column-gap);
}
.index .splide__slide .img{
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.index .splide__arrow{
    display: grid;
    background: transparent;
    border-radius: 0;
    width: var(--splide-arrow-size);
    height: var(--splide-arrow-size);
    opacity: 1;
}
.index .splide__arrow:hover{
    opacity: 1;
}
.index .splide__arrow svg{
    fill: var(--main-color);
    width: var(--splide-arrow-svg-size);
    height: var(--splide-arrow-svg-size);
}
.index .splide__arrow--prev{
    grid-area: prev;
}
.index .splide__arrow--prev svg{
    transform: scale(-1);
    transition: transform var(--button-transition);
}
.index .splide__arrow--prev svg:hover{
    transform: scale(calc(var(--splide-arrow-svg-hover-scale) * -1));
    transition: transform var(--button-transition);
}
.index .splide__arrow--next{
    grid-area: next;
}
.index .splide__arrow--next svg{
    transform: scale(1);
    transition: transform var(--button-transition);
}
.index .splide__arrow--next svg:hover{
    transform: scale(var(--splide-arrow-svg-hover-scale));
    transition: transform var(--button-transition);
}
.index .splide__pagination{
    grid-area: splide-p;
    position: static;
}
.index .splide__pagination__page.is-active{
    background: var(--main-color);
}
.index .splide__pagination__page{
    width: var(--splide-pagination-size);
    height: var(--splide-pagination-size);
    margin: var(--splide-pagination-margin);
}
.index .works .grid .before-img{
    grid-area: before;
    position: relative;
}
.index .works .grid .before-img::before{
    content: "Before";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    color: var(--white);
    font-size: var(--before-size);
    font-weight: 700;
    line-height: 0.75;
}
.index .works .grid .arrow-img{
    display: none;
}
.index .works .grid .after-img{
    grid-area: after;
    position: relative;
    width: 100%;
}
.index .works .grid .after-img::before{
    content: "After";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    color: var(--white);
    font-size: var(--after-size);
    font-weight: 700;
    line-height: 0.75;
}
.index .works .grid .next-button{
    grid-area: button;
    justify-self: center;
}
/*
 * SERVICE
*/
.index .service{
    position: relative;
}
.index .service::before{
    content: "SERVICE";
    font-size: var(--background-text-size);
    font-weight: 700;
    line-height: var(--background-text-line-height);
    position: absolute;
    top: calc(var(--grid-row-gap-64) - (var(--background-text-size) * var(--background-text-line-height)));
    left: 0;
    color: var(--white);
    opacity: var(--background-text-opacity);
}
.index .service::after{
    content: "";
    display: block;
    width: 100%;
    height: var(--background-block-height);
    background: var(--white);
    position: absolute;
    top: var(--grid-row-gap-64);
    left: 0;
}
.index .service .grid{
    width: var(--content-width);
    display: grid;
    grid-template:
    ".......... .......... .......    ....... .... .... .......... .......... .......... ...... ...... ......" var(--grid-row-gap-64)
    ".......... .......... .......    ....... .... .... .......... .......... .......... ...... ...... ......" var(--grid-row-gap-32)
    "heading    heading    heading    heading .... .... .......... .......... .......... ...... ...... ......" auto
    ".......... .......... .......    ....... .... .... .......... .......... .......... ...... ...... ......" var(--grid-row-gap-32)
    "outer-wall outer-wall outer-wall roof    roof roof waterproof waterproof waterproof others others others" auto
    ".......... .......... .......    ....... .... .... .......... .......... .......... ...... ...... ......" var(--grid-row-gap-32)
    ".......... .......... .......    ....... .... .... .......... .......... .......... ...... ...... ......" var(--grid-row-gap-64)
    /1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
    margin: auto;
    position: relative;
    z-index: 10;
}
.index .outer-wall{
    grid-area: outer-wall;
}
.index .roof{
    grid-area: roof;
}
.index .waterproof{
    grid-area: waterproof;
}
.index .others{
    grid-area: others;
}
.index .service .grid .heading{
    grid-area: heading;
    font-size: var(--h2-size);
}
.index .service .grid .service-item{
    width: auto;
    height: auto;
    position: relative;
}
.index .service .grid .service-item .image{
    width: 100%;
    height: auto;
}
.index .service .grid .service-item .menu-text{
    writing-mode: vertical-rl;
    position: absolute;
    top: 0;
    left: var(--index-service-gap);
    color: var(--white);
    font-size: var(--text-size-32);
    font-weight: 700;
    letter-spacing: var(--letter-spacing);
    height: 100%;
    text-align: center;
}
/*
 * CONTACT
*/
.index .contact{
    position: relative;
}
.index .contact::before{
    content: "CONTACT";
    writing-mode: vertical-rl;
    text-orientation: sideways;
    font-size: var(--background-text-size);
    font-weight: 700;
    line-height: var(--background-text-line-height);
    position: absolute;
    top: var(--grid-row-gap-64);
    right: 0;
    color: var(--white);
    opacity: var(--background-text-opacity);
}
.index .contact::after{
    content: "";
    width: var(--content-width);
    height: calc(100% - (var(--grid-row-gap-64) * 2));
    background: var(--white);
    position: absolute;
    top: var(--grid-row-gap-64);
    left: calc((100% - var(--content-width)) / 2);
    z-index: -10;
}
.index .contact .grid{
    width: var(--content-width);
    display: grid;
    grid-template:
    ".......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .........." var(--grid-row-gap-64)
    ".......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .........." var(--grid-row-gap-32)
    " heading    heading    heading    heading   heading    heading    heading    heading    heading    heading    heading    heading   " auto
    ".......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .........." var(--form-row-gap-12)
    "additional additional additional additional additional additional additional additional additional additional additional additional" auto
    ".......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .........." var(--form-row-gap-32)
    "tel        tel        tel        tel        tel        tel        tel        tel        tel        tel        tel        tel       " auto
    ".......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .........." var(--form-row-gap-32)
    "form       form       form       form       form       form       form       form       form       form       form       form      " auto
    ".......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .........." var(--grid-row-gap-32)
    ".......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .........." var(--grid-row-gap-64)
    /1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
    margin: auto;
}
.index .contact .grid .heading{
    grid-area: heading;
    font-size: var(--h2-size);
    justify-self: center;
}
.index .contact .grid .additional{
    grid-area: additional;
    justify-self: center;
    font-size: var(--text-size-20);
}
.index .contact .grid .tel-contact{
    grid-area: tel;
    justify-self: center;
    font-size: var(--small-text-size);
    display: grid;
    grid-template:
    ".... .... .... tel-text tel-text tel-text tel-text tel-text tel-text .... .... ...." auto
    ".... .... .... ........ ........ ........ ........ ........ ........ .... .... ...." var(--contact-tel-gap-8)
    ".... .... .... tel-img  ........ number   number   number   number   .... .... ...." auto
    / 1fr 1fr 1fr var(--contact-tel-img-size) var(--contact-tel-gap-8) 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.index .contact .grid .tel-contact .text{
    grid-area: tel-text;
    font-size: var(--contact-tel-text-size);
}
.index .contact .grid .tel-contact .tel-img{
    grid-area: tel-img;
    width: var(--contact-tel-img-size);
}
.index .contact .grid .tel-contact .tel-img .pass{
    fill: var(--text-color);
}
.index .contact .grid .tel-contact .tel-number{
    grid-area: number;
    font-size: var(--contact-tel-size);
}
.index .contact .grid .form{
    grid-area: form;
    display: grid;
    grid-template:
    ".... .... additional    additional    additional    additional    additional    additional    additional    additional    .... ...." auto
    ".... .... ............. ............. ............. ............. ............. ............. ............. ............. .... ...." var(--form-row-gap-24)
    ".... .... name-label    name-label    name-label    name          name          name          name          name          .... ...." auto
    ".... .... ............. ............. ............. ............. ............. ............. ............. ............. .... ...." var(--form-row-gap-24)
    ".... .... mail-label    mail-label    mail-label    mail          mail          mail          mail          mail          .... ...." auto
    ".... .... ............. ............. ............. ............. ............. ............. ............. ............. .... ...." var(--form-row-gap-24)
    ".... .... tel-label     tel-label     tel-label     tel           tel           tel           tel           tel           .... ...." auto
    ".... .... ............. ............. ............. ............. ............. ............. ............. ............. .... ...." var(--form-row-gap-24)
    ".... .... inquiry-label inquiry-label inquiry-label inquiry-label inquiry-label inquiry-label inquiry-label inquiry-label .... ...." auto
    ".... .... ............. ............. ............. ............. ............. ............. ............. ............. .... ...." var(--form-row-gap-8)
    ".... .... inquiry       inquiry       inquiry       inquiry       inquiry       inquiry       inquiry       inquiry       .... ...." auto
    ".... .... ............. ............. ............. ............. ............. ............. ............. ............. .... ...." var(--form-row-gap-32)
    ".... .... privacy-check privacy-check privacy-check privacy-check privacy-check privacy-check privacy-check privacy-check .... ...." auto
    ".... .... ............. ............. ............. ............. ............. ............. ............. ............. .... ...." var(--form-row-gap-48)
    ".... .... ............. ............. next-button   next-button   next-button   next-button   ............. ............. .... ...." auto
    /1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
    font-size: var(--text-size-24);
}
.index .contact .grid .form .additional{
    grid-area: additional;
    justify-self: start;
    color: var(--red);
    font-size: var(--small-text-size);
}
.index .contact .grid .form .name-label{
    grid-area: name-label;
}
.index .contact .grid .form .name{
    grid-area: name;
    width: 100%;
    height: var(--form-input-height);
    font-size: var(--form-input-text-size);
}
.index .contact .grid .form .mail-label{
    grid-area: mail-label;
}
.index .contact .grid .form .mail{
    grid-area: mail;
    width: 100%;
    height: var(--form-input-height);
    font-size: var(--form-input-text-size);
}
.index .contact .grid .form .tel-label{
    grid-area: tel-label;
}
.index .contact .grid .form .tel{
    grid-area: tel;
    width: 100%;
    height: var(--form-input-height);
    font-size: var(--form-input-text-size);
}
.index .contact .grid .form .inquiry-label{
    grid-area: inquiry-label;
}
.index .contact .grid .form .inquiry{
    grid-area: inquiry;
    width: 100%;
    height: auto;
    min-height: var(--form-textare-min-height);
    font-size: var(--form-input-text-size);
}
.index .contact .grid .form .privacy-policy-checkbox{
    grid-area: privacy-check;
    font-size: var(--main-text-size);
}
.index .contact .grid .form .privacy-policy-checkbox .checkbox{
    margin-right: var(--privacy-policy-margin);
}
.index .contact .grid .form .privacy-policy-checkbox .checkbox:hover{
    cursor: pointer;
}
.index .contact .grid .form .privacy-policy-checkbox .privacy-policy{
    display: inline-block;
}
.index .contact .grid .form .privacy-policy-checkbox .privacy-policy .link{
    text-decoration: underline;
}
.index .contact .grid .form .privacy-policy-checkbox .privacy-policy .link:hover{
    color: var(--main-color);
}
.index .contact .grid .form .next-button{
    grid-area: next-button;
    justify-self: center;
}
/*
 * footer
*/
.index .footer{
    color: var(--white);
}
.index .footer::before{
    color: var(--white);
}
.index .footer::after{
    border-top: 1px var(--white) solid;
}
.index .footer .grid .nav .list .link{
    color: var(--white);
}
.index .footer .grid .sns-icons .instagram{
    fill: var(--white);
}

/*
 *--------------------------------------------------------
 * about.html
 * > 会社紹介
 * > ごあいさつ
 * > 会社概要
 * > 協力会社
 * > アクセス
 *--------------------------------------------------------
*/
/*　
 * 会社紹介
*/
.about .page-head{
    background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)),
    url('./image/pc-about-heading.jpg');
    background-position: center;
    background-size: cover;
}
/*　
 *ごあいさつ
*/
.about .message .grid{
    width: var(--content-width);
    display: grid;
    grid-template:
    "....... ....... ......... ......... ......... ......... ......... ......... ......... ......... ....... ......." var(--grid-row-gap-64)
    "....... ....... ......... ......... ......... ......... ......... ......... ......... ......... ....... ......." var(--grid-row-gap-32)
    "heading heading heading   heading   heading   heading   heading   heading   heading   heading   heading heading" auto
    "....... ....... ......... ......... ......... ......... ......... ......... ......... ......... ....... ......." var(--grid-row-gap-32)
    "....... ....... main-text main-text main-text main-text main-text main-text main-text main-text ....... ......." auto
    "....... ....... ......... ......... ......... ......... ......... ......... ......... ......... ....... ......." var(--grid-row-gap-64)
    /1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
    margin: auto;
}
.about .message .grid .heading{
    grid-area: heading;
    text-align: center;
    font-size: var(--h2-size);
}
.about .message .grid .main-text{
    grid-area: main-text;
    line-height: var(--line-height-180);
}
.about .message .grid .main-text .line-height{
    margin-bottom: var(--main-text-size);
}
/*　
 *会社概要
*/
.about .company-overview .grid{
    width: var(--content-width);
    display: grid;
    grid-template:
    "....... ....... ....... ....... ....... ....... ....... ....... ....... ....... ....... ......." var(--grid-row-gap-64)
    "heading heading heading heading heading heading heading heading heading heading heading heading" auto
    "....... ....... ....... ....... ....... ....... ....... ....... ....... ....... ....... ......." var(--grid-row-gap-32)
    "company company company company company company company company company company company company" auto
    "....... ....... ....... ....... ....... ....... ....... ....... ....... ....... ....... ......." var(--grid-row-gap-64)
    /1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
    margin: auto;
}
.about .company-overview .grid .heading{
    grid-area: heading;
    text-align: center;
    font-size: var(--h2-size);
}
.about .company-overview .grid .company{
    grid-area: company;
    width: 100%;
    display: grid;
    grid-template:
    ".... .... h-company-name   h-company-name   h-company-name   company-name    company-name    company-name    company-name    company-name    company-name    ...." auto
    ".... .... ................ ................ ................ ............... ............... ............... ............... ............... ............... ...." var(--overview-gap-16)
    ".... .... h-representative h-representative h-representative representative  representative  representative  representative  representative  representative  ...." auto
    ".... .... ................ ................ ................ ............... ............... ............... ............... ............... ............... ...." var(--overview-gap-16)
    ".... .... h-address        h-address        h-address        address         address         address         address         address         address         ...." auto
    ".... .... ................ ................ ................ ............... ............... ............... ............... ............... ............... ...." var(--overview-gap-16)
    ".... .... h-tel            h-tel            h-tel            tel             tel             tel             tel             tel             tel             ...." auto
    ".... .... ................ ................ ................ ............... ............... ............... ............... ............... ............... ...." var(--overview-gap-16)
    ".... .... h-founding       h-founding       h-founding       founding        founding        founding        founding        founding        founding        ...." auto
    ".... .... ................ ................ ................ ............... ............... ............... ............... ............... ............... ...." var(--overview-gap-16)
    ".... .... h-history        h-history        h-history        history         history         history         history         history         history         ...." auto
    ".... .... ................ ................ ................ ............... ............... ............... ............... ............... ............... ...." var(--overview-gap-16)
    ".... .... h-service        h-service        h-service        service         service         service         service         service         service         ...." auto
    ".... .... ................ ................ ................ ............... ............... ............... ............... ............... ............... ...." var(--overview-gap-16)
    ".... .... h-work-time      h-work-time      h-work-time      work-time       work-time       work-time       work-time       work-time       work-time       ...." auto
    ".... .... ................ ................ ................ ............... ............... ............... ............... ............... ............... ...." var(--overview-gap-16)
    ".... .... h-permit         h-permit         h-permit         permit          permit          permit          permit          permit          permit          ...." auto
    ".... .... ................ ................ ................ ............... ............... ............... ............... ............... ............... ...." var(--overview-gap-16)
    ".... .... h-qualification  h-qualification  h-qualification  qualification-1 qualification-1 qualification-1 qualification-1 qualification-1 qualification-1 ...." auto
    ".... .... h-qualification  h-qualification  h-qualification  ............... ............... ............... ............... ............... ............... ...." var(--overview-gap-16)
    ".... .... h-qualification  h-qualification  h-qualification  qualification-2 qualification-2 qualification-2 qualification-2 qualification-2 qualification-2 ...." auto
    ".... .... h-qualification  h-qualification  h-qualification  ............... ............... ............... ............... ............... ............... ...." var(--overview-gap-16)
    ".... .... h-qualification  h-qualification  h-qualification  qualification-3 qualification-3 qualification-3 qualification-3 qualification-3 qualification-3 ...." auto
    ".... .... h-qualification  h-qualification  h-qualification  ............... ............... ............... ............... ............... ............... ...." var(--overview-gap-16)
    ".... .... h-qualification  h-qualification  h-qualification  qualification-4 qualification-4 qualification-4 qualification-4 qualification-4 qualification-4 ...." auto
    ".... .... ................ ................ ................ ............... ............... ............... ............... ............... ............... ...." var(--grid-row-gap-16)
    /1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
    align-items: end;
}
.about .company-overview .grid .company .list-heading{
    padding-bottom: var(--about-padding-4);
    color: var(--sub-color);
    border-bottom: var(--about-border-size-1) var(--sub-color) solid;
}
.about .company-overview .grid .company .list-heading.company-name{
    grid-area: h-company-name;
}
.about .company-overview .grid .company .company-name{
    grid-area: company-name;
}
.about .company-overview .grid .company .list-heading.representative{
    grid-area: h-representative;
}
.about .company-overview .grid .company .representative{
    grid-area: representative;
}
.about .company-overview .grid .company .list-heading.address{
    grid-area: h-address;
}
.about .company-overview .grid .company .address{
    grid-area: address;
}
.about .company-overview .grid .company .address .post-code{
    display: block;
    margin-bottom: var(--about-padding-4);
}
.about .company-overview .grid .company .list-heading.tel{
    grid-area: h-tel;
}
.about .company-overview .grid .company .tel{
    grid-area: tel;
}
.about .company-overview .grid .company .list-heading.founding{
    grid-area: h-founding;
}
.about .company-overview .grid .company .founding{
    grid-area: founding;
}
.about .company-overview .grid .company .list-heading.history{
    grid-area: h-history;
}
.about .company-overview .grid .company .history{
    grid-area: history;
}
.about .company-overview .grid .company .history .event{
    display: block;
    margin-bottom: var(--about-padding-8);
}
.about .company-overview .grid .company .history .event:last-child{
    margin-bottom: 0;
}
.about .company-overview .grid .company .list-heading.service{
    grid-area: h-service;
}
.about .company-overview .grid .company .service{
    grid-area: service;
}
.about .company-overview .grid .company .list-heading.work-time{
    grid-area: h-work-time;
}
.about .company-overview .grid .company .work-time{
    grid-area: work-time;
}
.about .company-overview .grid .company .list-heading.permit{
    grid-area: h-permit;
}
.about .company-overview .grid .company .permit{
    grid-area: permit;
}
.about .company-overview .grid .company .permit .line-break{
    margin-bottom: var(--about-padding-4);
}
.about .company-overview .grid .company .list-heading.qualification{
    grid-area: h-qualification;
}
.about .company-overview .grid .company .qualification-1{
    grid-area: qualification-1;
}
.about .company-overview .grid .company .qualification-2{
    grid-area: qualification-2;
}
.about .company-overview .grid .company .qualification-3{
    grid-area: qualification-3;
}
.about .company-overview .grid .company .qualification-4{
    grid-area: qualification-4;
}
.about .company-overview .grid .company .pc-border{
    border-bottom: var(--about-border-size-1) var(--main-color) solid;
}
/*
 *お問い合わせに関する補足
*/
.about .supplement-regarding-inquiries{
    width: var(--content-width);
    min-width: var(--content-min-width);
    max-width: var(--content-max-width);
    display: grid;
    grid-template:
    ".... customer customer customer customer customer vendor vendor vendor vendor vendor ...." auto
    /1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
    margin: auto;
}
.about .supplement-regarding-inquiries .heading{
    display: inline-block;
    color: var(--main-color);
    background: var(--white);
    position: absolute;
    top: calc(var(--h2-size) * -0.5);
    left: var(--supplement-padding-6);
    padding: 0 var(--supplement-padding-6) 0 var(--supplement-padding-3);
}
.about .supplement-regarding-inquiries .main-text{
    display: inline-block;
    padding: var(--supplement-padding-16) var(--supplement-padding-10) var(--supplement-padding-6);

}
.about .supplement-regarding-inquiries .customer{
    grid-area: customer;
    position: relative;
    border: var(--supplement-border) solid var(--main-color);
    margin-top: calc(var(--h2-size) * 0.7);
}
.about .supplement-regarding-inquiries .vendor{
    grid-area: vendor;
    position: relative;
    border: var(--supplement-border) solid var(--main-color);
    margin-top: calc(var(--h2-size) * 0.7);
}
/*　
 *協力会社
*/
.about .business-partner .grid{
    width: var(--content-width);
    display: grid;
    grid-template:
    ".... .... .... partner partner partner partner partner partner .... .... ...." auto
    /1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
    margin: auto;
}
.about .business-partner .grid .main-text{
    grid-area: partner;
    border-top: 1px var(--main-color) solid;
    border-bottom: 1px var(--main-color) solid;
    padding: var(--about-padding-16) 0 var(--about-padding-16) 0;
}
/*　
 *アクセス
*/
.about .access .grid{
    width: var(--content-width);
    display: grid;
    grid-template:
    ".... .... ....... ....... ....... ....... ....... ....... ....... ....... .... ...." var(--grid-row-gap-64)
    ".... .... ....... ....... ....... ....... ....... ....... ....... ....... .... ...." var(--grid-row-gap-32)
    ".... .... heading heading heading heading heading heading heading heading .... ...." auto
    ".... .... ....... ....... ....... ....... ....... ....... ....... ....... .... ...." var(--grid-row-gap-32)
    ".... .... address address address address address address address address .... ...." auto
    ".... .... ....... ....... ....... ....... ....... ....... ....... ....... .... ...." var(--grid-row-gap-16)
    ".... .... nearest nearest nearest nearest nearest nearest nearest nearest .... ...." auto
    ".... .... ....... ....... ....... ....... ....... ....... ....... ....... .... ...." var(--grid-row-gap-16)
    ".... .... map     map     map     map     map     map     map     map     .... ...." auto
    ".... .... ....... ....... ....... ....... ....... ....... ....... ....... .... ...." var(--grid-row-gap-32)
    ".... .... ....... ....... ....... ....... ....... ....... ....... ....... .... ...." var(--grid-row-gap-64)
    /1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
    margin: auto;
}
.about .access .grid .heading{
    grid-area: heading;
    text-align: center;
    font-size: var(--h2-size);
}
.about .access .grid .address{
    grid-area: address;
}
.about .access .grid .address .post-code{
    display: inline-block;
    margin-right: var(--main-text-size);
}
.about .access .grid .nearest{
    grid-area: nearest;
    line-height: 1.6;
}
.about .access .grid .google-map{
    grid-area: map;
    width: 100%;
    aspect-ratio: 1.333 / 1;
}
/*
 *--------------------------------------------------------
 * service.html
 * > 事業内容
 * > 外壁塗装
 * > 内壁塗装
 * > 防水工事
 * > その他
 *--------------------------------------------------------
*/
/*　
 * 事業内容
*/
.service .page-head{
    background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)),
    url('./image/pc-service-heading.jpg');
    background-position: center;
    background-size: cover;
}
.service .before-img::before{
    content: "Before";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    color: var(--white);
    font-size: var(--service-before-size);
    font-weight: 700;
    line-height: 0.75
}
.service .arrow-img{
    grid-area: arrow;
    fill: var(--main-color);
    width: var(--service-arrow-size);
    align-self: start;
    justify-self: end;
    transform: scaleX(-1) rotate(90deg);
    filter: opacity(0.6);
}
.service .after-img::before{
    content: "After";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    color: var(--white);
    font-size: var(--after-size);
    font-weight: 700;
    line-height: 0.75;
}
.service .before-img .img,
.service .after-img .img{
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
}
/*　
 * 外壁塗装
*/
.service .outer-wall{
    position: relative;
}
.service .main .outer-wall::before{
    content: "";
    width: var(--service-img-size);
    height: var(--service-img-size);
    background-image: url('./image/service-1.jpg');
    background-size: cover;
    position: absolute;
    top: var(--grid-row-gap-64);
    right: var(--service-img-position);
}
.service .outer-wall .grid{
    width: var(--content-width);
    margin: auto;
    display: grid;
    grid-template:
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--grid-row-gap-64)
    "heading heading       heading       heading       heading       heading       heading       heading   heading   .... .... ...." var(--service-grid-heading-height)
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--service-grid-row-gap-32)
    "....... check-heading check-heading check-heading check-heading check-heading check-heading ......... ......... .... .... ...." auto
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--grid-row-gap-16)
    "....... checklist     checklist     checklist     checklist     checklist     checklist     ......... ......... .... .... ...." auto
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--service-grid-row-gap-8)
    "....... msg           msg           msg           msg           msg           msg           ......... ......... .... .... ...." auto
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--service-grid-row-gap-32)
    "....... works-heading works-heading works-heading works-heading works-heading works-heading ......... ......... .... .... ...." auto
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--service-grid-row-gap-16)
    "....... before-img    before-img    before-img    after-img     after-img     after-img     after-img after-img .... .... ...." auto
    "....... ............. ............. ............. after-img     after-img     after-img     after-img after-img .... .... ...." var(--service-grid-row-gap-16)
    "....... arrow-img     arrow-img     arrow-img     after-img     after-img     after-img     after-img after-img .... .... ...." auto
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--grid-row-gap-32)
    "....... ............. ............. ............. next-btn      next-btn      next-btn      next-btn  ......... .... .... ...." auto
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--grid-row-gap-32)
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--grid-row-gap-64)
    /1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
}
.service .outer-wall .grid .heading{
    grid-area: heading;
    display: grid;
    justify-content: center;
    align-content: center;
    width: 100%;
    height: 100%;
    background: var(--main-color);
    font-size: var(--h2-size);
    font-weight: 400;
}
.service .outer-wall .grid .checklist-heading{
    grid-area: check-heading;
    font-size: var(--service-heading-size);
    font-weight: 400;
    border-bottom: 2px var(--main-color) solid;
    padding-bottom: var(--service-heading-padding);
}
.service .outer-wall .grid .checklist{
    grid-area: checklist;
    /*padding-left: var(--service-checklist-padding);*/
    line-height: var(--line-height-160);
}
.service .outer-wall .grid .checklist .list{
    position: relative;
    display: block;
    padding-left: var(--service-checklist-padding);
    margin-bottom: var(--service-margin-8);
    border-bottom: var(--border-size-2) solid var(--light-main-color);
}
.service .outer-wall .grid .checklist .list:last-child{
    margin-bottom: 0;
}
.service .outer-wall .grid .checklist .list::before{
    content: url("./image/check-icon.svg");
    display: inline-block;
    width: var(--service-checkllist-size);
    height: var(--service-checkllist-size);
    /*border:2px var(--sub-color) solid;*/
    position: absolute;
    top: 0;
    left: var(--check-icon-left);
    /*
    top: var(--service-checkllist-top);
    left: calc(var(--service-checklist-padding) * -1);
    */
    object-fit: contain;
}
.service .outer-wall .grid .msg{
    grid-area: msg;
    line-height: var(--line-height-160);
    font-size: var(--text-size-24);
    font-weight: 400;
}
.service .outer-wall .grid .works-heading{
    grid-area: works-heading;
    font-size: var(--service-heading-size);
    font-weight: 400;
    border-bottom: 2px var(--main-color) solid;
    padding-bottom: var(--service-heading-padding);
}
.service .outer-wall .grid .before-img{
    grid-area: before-img;
    position: relative;
    display: block;
}
.service .outer-wall .grid .arrow-img{
    grid-area: arrow-img;
}
.service .outer-wall .grid .after-img{
    grid-area: after-img;
    position: relative;
}
.service .outer-wall .grid .next-button{
    grid-area: next-btn;
    justify-self: center;
}
/*　
 * 屋根塗装
*/
.service .roof{
    position: relative;
}
.service .main .roof::before{
    content: "";
    width: var(--service-img-size);
    height: var(--service-img-size);
    background-image: url('./image/service-2.jpg');
    background-size: cover;
    position: absolute;
    top: var(--grid-row-gap-64);
    right: var(--service-img-position);
}
.service .roof .grid{
    width: var(--content-width);
    margin: auto;
    display: grid;
    grid-template:
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--grid-row-gap-64)
    "heading heading       heading       heading       heading       heading       heading       heading   heading   .... .... ...." var(--service-grid-heading-height)
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--service-grid-row-gap-32)
    "....... check-heading check-heading check-heading check-heading check-heading check-heading ......... ......... .... .... ...." auto
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--grid-row-gap-16)
    "....... checklist     checklist     checklist     checklist     checklist     checklist     ......... ......... .... .... ...." auto
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--service-grid-row-gap-8)
    "....... msg           msg           msg           msg           msg           msg           ......... ......... .... .... ...." auto
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--service-grid-row-gap-32)
    "....... works-heading works-heading works-heading works-heading works-heading works-heading ......... ......... .... .... ...." auto
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--service-grid-row-gap-16)
    "....... before-img    before-img    before-img    after-img     after-img     after-img     after-img after-img .... .... ...." auto
    "....... ............. ............. ............. after-img     after-img     after-img     after-img after-img .... .... ...." var(--service-grid-row-gap-16)
    "....... arrow-img     arrow-img     arrow-img     after-img     after-img     after-img     after-img after-img .... .... ...." auto
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--grid-row-gap-32)
    "....... ............. ............. ............. next-btn      next-btn      next-btn      next-btn  ......... .... .... ...." auto
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--grid-row-gap-32)
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--grid-row-gap-64)
    /1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
}
.service .roof .grid .heading{
    grid-area: heading;
    display: grid;
    justify-content: center;
    align-content: center;
    width: 100%;
    height: 100%;
    background: var(--main-color);
    font-size: var(--h2-size);
    font-weight: 400;
}
.service .roof .grid .checklist-heading{
    grid-area: check-heading;
    font-size: var(--service-heading-size);
    font-weight: 400;
    border-bottom: 2px var(--main-color) solid;
    padding-bottom: var(--service-heading-padding);
}
.service .roof .grid .checklist{
    grid-area: checklist;
    /*padding-left: var(--service-checklist-padding);*/
    line-height: var(--line-height-160);
}
.service .roof .grid .checklist .list{
    position: relative;
    display: block;
    padding-left: var(--service-checklist-padding);
    margin-bottom: var(--service-margin-8);
    border-bottom: var(--border-size-2) solid var(--light-main-color);
}
.service .roof .grid .checklist .list:last-child{
    margin-bottom: 0;
}
.service .roof .grid .checklist .list::before{
    content: url("./image/check-icon.svg");
    display: inline-block;
    width: var(--service-checkllist-size);
    height: var(--service-checkllist-size);
    /*border:2px var(--sub-color) solid;*/
    position: absolute;
    top: 0;
    left: var(--check-icon-left);
    /*
    top: var(--service-checkllist-top);
    left: calc(var(--service-checklist-padding) * -1);
    */
    object-fit: contain;
}
.service .roof .grid .msg{
    grid-area: msg;
    line-height: var(--line-height-160);
    font-size: var(--text-size-24);
    font-weight: 400;
}
.service .roof .grid .works-heading{
    grid-area: works-heading;
    font-size: var(--service-heading-size);
    font-weight: 400;
    border-bottom: 2px var(--main-color) solid;
    padding-bottom: var(--service-heading-padding);
}
.service .roof .grid .before-img{
    grid-area: before-img;
    position: relative;
    display: block;
}
.service .roof .grid .arrow-img{
    grid-area: arrow-img;
}
.service .roof .grid .after-img{
    grid-area: after-img;
    position: relative;
}
.service .roof .grid .next-button{
    grid-area: next-btn;
    justify-self: center;
}
/*　
 * 防水工事
*/
.service .waterproof{
    position: relative;
}
.service .main .waterproof::before{
    content: "";
    width: var(--service-img-size);
    height: var(--service-img-size);
    background-image: url('./image/service-3.jpg');
    background-size: cover;
    position: absolute;
    top: var(--grid-row-gap-64);
    right: var(--service-img-position);
}
.service .waterproof .grid{
    width: var(--content-width);
    margin: auto;
    display: grid;
    grid-template:
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--grid-row-gap-64)
    "heading heading       heading       heading       heading       heading       heading       heading   heading   .... .... ...." var(--service-grid-heading-height)
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--service-grid-row-gap-32)
    "....... check-heading check-heading check-heading check-heading check-heading check-heading ......... ......... .... .... ...." auto
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--grid-row-gap-16)
    "....... checklist     checklist     checklist     checklist     checklist     checklist     ......... ......... .... .... ...." auto
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--service-grid-row-gap-8)
    "....... msg           msg           msg           msg           msg           msg           ......... ......... .... .... ...." auto
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--service-grid-row-gap-32)
    "....... works-heading works-heading works-heading works-heading works-heading works-heading ......... ......... .... .... ...." auto
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--service-grid-row-gap-16)
    "....... before-img    before-img    before-img    after-img     after-img     after-img     after-img after-img .... .... ...." auto
    "....... ............. ............. ............. after-img     after-img     after-img     after-img after-img .... .... ...." var(--service-grid-row-gap-16)
    "....... arrow-img     arrow-img     arrow-img     after-img     after-img     after-img     after-img after-img .... .... ...." auto
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--grid-row-gap-32)
    "....... ............. ............. ............. next-btn      next-btn      next-btn      next-btn  ......... .... .... ...." auto
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--grid-row-gap-32)
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--grid-row-gap-64)
    /1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
}
.service .waterproof .grid .heading{
    grid-area: heading;
    display: grid;
    justify-content: center;
    align-content: center;
    width: 100%;
    height: 100%;
    background: var(--main-color);
    font-size: var(--h2-size);
    font-weight: 400;
}
.service .waterproof .grid .checklist-heading{
    grid-area: check-heading;
    font-size: var(--service-heading-size);
    font-weight: 400;
    border-bottom: 2px var(--main-color) solid;
    padding-bottom: var(--service-heading-padding);
}
.service .waterproof .grid .checklist{
    grid-area: checklist;
    /*padding-left: var(--service-checklist-padding);*/
    line-height: var(--line-height-160);
}
.service .waterproof .grid .checklist .list{
    position: relative;
    display: block;
    padding-left: var(--service-checklist-padding);
    margin-bottom: var(--service-margin-8);
    border-bottom: var(--border-size-2) solid var(--light-main-color);
}
.service .waterproof .grid .checklist .list:last-child{
    margin-bottom: 0;
}
.service .waterproof .grid .checklist .list::before{
    content: url("./image/check-icon.svg");
    display: inline-block;
    width: var(--service-checkllist-size);
    height: var(--service-checkllist-size);
    /*border:2px var(--sub-color) solid;*/
    position: absolute;
    top: 0;
    left: var(--check-icon-left);
    /*
    top: var(--service-checkllist-top);
    left: calc(var(--service-checklist-padding) * -1);
    */
    object-fit: contain;
}
.service .waterproof .grid .msg{
    grid-area: msg;
    line-height: var(--line-height-160);
    font-size: var(--text-size-24);
    font-weight: 400;
}
.service .waterproof .grid .works-heading{
    grid-area: works-heading;
    font-size: var(--service-heading-size);
    font-weight: 400;
    border-bottom: 2px var(--main-color) solid;
    padding-bottom: var(--service-heading-padding);
}
.service .waterproof .grid .before-img{
    grid-area: before-img;
    position: relative;
    display: block;
}
.service .waterproof .grid .arrow-img{
    grid-area: arrow-img;
}
.service .waterproof .grid .after-img{
    grid-area: after-img;
    position: relative;
}
.service .waterproof .grid .next-button{
    grid-area: next-btn;
    justify-self: center;
}
/*　
 * その他
*/
.service .others{
    position: relative;
}
.service .main .others::before{
    content: "";
    width: var(--service-img-size);
    height: var(--service-img-size);
    background-image: url('./image/service-4.jpg');
    background-size: cover;
    position: absolute;
    top: var(--grid-row-gap-64);
    right: var(--service-img-position);
}
.service .others .grid{
    width: var(--content-width);
    margin: auto;
    display: grid;
    grid-template:
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--grid-row-gap-64)
    "heading heading       heading       heading       heading       heading       heading       heading   heading   .... .... ...." var(--service-grid-heading-height)
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--service-grid-row-gap-32)
    "....... msg           msg           msg           msg           msg           msg           ......... ......... .... .... ...." auto
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--service-grid-row-gap-32)
    "....... steel-frame   steel-frame   steel-frame   vehicle       vehicle       vehicle       ......... ......... .... .... ...." auto
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--service-grid-row-gap-16)
    "....... inner-wall    inner-wall    inner-wall    public-works  public-works  public-works  ......... ......... .... .... ...." auto
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--service-grid-row-gap-32)
    "....... works-heading works-heading works-heading works-heading works-heading works-heading ......... ......... .... .... ...." auto
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--service-grid-row-gap-16)
    "....... before-img    before-img    before-img    after-img     after-img     after-img     after-img after-img .... .... ...." auto
    "....... ............. ............. ............. after-img     after-img     after-img     after-img after-img .... .... ...." var(--service-grid-row-gap-16)
    "....... arrow-img     arrow-img     arrow-img     after-img     after-img     after-img     after-img after-img .... .... ...." auto
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--grid-row-gap-32)
    "....... ............. ............. ............. next-btn      next-btn      next-btn      next-btn  ......... .... .... ...." auto
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--grid-row-gap-32)
    "....... ............. ............. ............. ............. ............. ............. ......... ......... .... .... ...." var(--grid-row-gap-64)
    /1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
}
.service .others .grid .heading{
    grid-area: heading;
    display: grid;
    justify-content: center;
    align-content: center;
    width: 100%;
    height: 100%;
    background: var(--main-color);
    font-size: var(--h2-size);
    font-weight: 400;
}
.service .others .grid .msg{
    grid-area: msg;
    line-height: var(--line-height-160);
}
.service .others .grid .steel-frame{
    grid-area: steel-frame;
}
.service .others .grid .vehicle{
    grid-area: vehicle;
}
.service .others .grid .inner-wall{
    grid-area: inner-wall;
}
.service .others .grid .public-works{
    grid-area: public-works;
}
.service .others .grid .steel-frame .text,
.service .others .grid .vehicle .text,
.service .others .grid .inner-wall .text,
.service .others .grid .public-works .text{
    display: grid;
    justify-content: center;
    margin-top: var(--service-margin-8);
    font-size: var(--text-size-24);
}
.service .others .grid .works-heading{
    grid-area: works-heading;
    font-size: var(--text-size-20);
    font-weight: 400;
    border-bottom: 2px var(--main-color) solid;
    padding-bottom: var(--service-heading-padding);
}
.service .others .grid .before-img{
    grid-area: before-img;
    position: relative;
}
.service .others .grid .arrow-img{
    grid-area: arrow-img;
}
.service .others .grid .after-img{
    grid-area: after-img;
    position: relative;
}
.service .others .grid .next-button{
    grid-area: next-btn;
    justify-self: center;
}
/*
 *--------------------------------------------------------
 * beginner.html
 * > はじめての方へ
 * > チェックリスト
 * > ご依頼の流れ
 * > よくある質問
 *--------------------------------------------------------
*/
/*　
 * はじめての方へ
*/
.beginner .page-head{
    background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)),
    url('./image/pc-beginner-heading.jpg');
    background-position: center;
    background-size: cover;
}
.beginner .main .background-img{
    width: var(--beginner-background-img-width);
    position: relative;
    top: 0;
}
.beginner .main .background-img:nth-of-type(odd){
    left: var(--beginner-background-img-position);
}
.beginner .main .background-img:nth-of-type(even){
    right: calc(var(--beginner-background-img-width) - (100vw - var(--beginner-background-img-position)));
}
/*　
 * チェックリスト
*/
.beginner .checklist-wrap{
    position: relative;
}
.beginner .checklist-wrap .grid{
    width: var(--content-width);
    min-width: var(--content-min-width);
    max-width: var(--content-max-width);
    margin: auto;
    display: grid;
    grid-template:
    ".... .... .... ......... ......... ......... ......... ......... ......... ......... .... ...." var(--grid-row-gap-64)
    ".... .... .... ......... ......... ......... ......... ......... ......... ......... .... ...." var(--grid-row-gap-32)
    ".... .... .... heading   heading   heading   heading  heading   heading   .......... .... ...." auto
    ".... .... .... ......... ......... ......... ......... ......... ......... ......... .... ...." var(--beginner-grid-row-gap-32)
    ".... .... .... checklist checklist checklist checklist checklist checklist checklist .... ...." auto
    ".... .... .... ......... ......... ......... ......... ......... ......... ......... .... ...." var(--grid-row-gap-64)
    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
}
.beginner .checklist-wrap .grid .heading{
    grid-area: heading;
    font-size: var(--h2-size);
    font-weight: 400;
    justify-self: center;
}
.beginner .checklist-wrap .grid .checklist{
    grid-area: checklist;
    /*padding-left: var(--service-checklist-padding);*/
    line-height: var(--line-height-160);
}
.beginner .checklist-wrap .grid .checklist .list{
    position: relative;
    display: block;
    padding-left: var(--service-checklist-padding);
    margin-bottom: var(--service-margin-8);
    border-bottom: var(--border-size-2) solid var(--light-main-color);
}
.beginner .checklist-wrap .grid .checklist .list:last-child{
    margin-bottom: 0;
}
.beginner .checklist-wrap .grid .checklist .list::before{
    content: url("./image/check-icon.svg");
    display: inline-block;
    width: var(--beginner-icon-size);
    height: var(--beginner-icon-size);
    position: absolute;
    top: 0;
    left: var(--check-icon-left);
    /*left: calc(var(--service-checklist-padding) * -1);*/
    object-fit: contain;
}
/*
 * ご依頼の流れ
*/
.beginner .request-flow .grid{
    width: var(--content-width);
    margin: auto;
    display: grid;
    grid-template:
    "....... ....... ....... ....... ....... ....... ....... ....... ....... ....... ....... ......." var(--grid-row-gap-64)
    "....... ....... ....... ....... ....... ....... ....... ....... ....... ....... ....... ......." var(--grid-row-gap-32)
    "heading heading heading heading heading heading heading heading heading heading heading heading" auto
    "....... ....... ....... ....... ....... ....... ....... ....... ....... ....... ....... ......." var(--beginner-grid-row-gap-32)
    "flow    flow    flow    flow    flow    flow    flow    flow    flow    flow    flow    flow   " auto
    "....... ....... ....... ....... ....... ....... ....... ....... ....... ....... ....... ......." var(--beginner-grid-row-gap-32)
    "....... ....... msg     msg     msg     msg     msg     msg     msg     msg     ....... ......." auto
    "....... ....... ....... ....... ....... ....... ....... ....... ....... ....... ....... ......." var(--grid-row-gap-64)
    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
}
.beginner .request-flow .grid .heading{
    grid-area: heading;
    justify-self: center;
    font-size: var(--h2-size);
    font-weight: 400;
}
.beginner .request-flow .grid .flow{
    grid-area: flow;
    display: grid;
    grid-template:
    ".... flow-1 flow-1 flow-1 flow-1 .... .... flow-8  flow-8  flow-8  flow-8  ...." auto
    ".... ...... ...... ...... ...... .... .... ....... ....... ....... ....... ...." var(--beginner-grid-row-gap-56)
    ".... flow-2 flow-2 flow-2 flow-2 .... .... flow-9  flow-9  flow-9  flow-9  ...." auto
    ".... ...... ...... ...... ...... .... .... ....... ....... ....... ....... ...." var(--beginner-grid-row-gap-56)
    ".... flow-3 flow-3 flow-3 flow-3 .... .... flow-10 flow-10 flow-10 flow-10 ...." auto
    ".... ...... ...... ...... ...... .... .... ....... ....... ....... ....... ...." var(--beginner-grid-row-gap-56)
    ".... flow-4 flow-4 flow-4 flow-4 .... .... flow-11 flow-11 flow-11 flow-11 ...." auto
    ".... ...... ...... ...... ...... .... .... ....... ....... ....... ....... ...." var(--beginner-grid-row-gap-56)
    ".... flow-5 flow-5 flow-5 flow-5 .... .... flow-12 flow-12 flow-12 flow-12 ...." auto
    ".... ...... ...... ...... ...... .... .... ....... ....... ....... ....... ...." var(--beginner-grid-row-gap-56)
    ".... flow-6 flow-6 flow-6 flow-6 .... .... flow-13 flow-13 flow-13 flow-13 ...." auto
    ".... ...... ...... ...... ...... .... .... ....... ....... ....... ....... ...." var(--beginner-grid-row-gap-56)
    ".... flow-7 flow-7 flow-7 flow-7 .... .... flow-14 flow-14 flow-14 flow-14 ...." auto
    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.beginner .request-flow .grid .flow .list{
    display: block;
    padding-left: var(--beginner-flow-list-padding-left);
    padding-bottom: var(--beginner-flow-list-padding-bottom);
    font-size: var(--text-size-24);
    border-bottom: 2px var(--main-color) solid;
    position: relative;
}
.beginner .request-flow .grid .flow .list::before{
    font-size: var(--beginner-flow-number-size);
    color: var(--main-color);
    line-height: var(--beginner-flow-number-line-height);
    position: absolute;
    left: 0;
    bottom: 0;
}
.beginner .request-flow .grid .flow .list::after{
    content: "";
    width: var(--beginner-arrow-width);
    height: var(--beginner-arrow-height);
    background-image: url('./image/arrow-img-2.png');
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: calc(50% - var(--beginner-arrow-height));
    bottom: var(--beginner-arrow-position);
    filter: opacity(0.4);
}
.beginner .request-flow .grid .flow .list:last-child:after,
.beginner .request-flow .grid .flow .list:nth-child(7):after{
    display: none;
}
.beginner .request-flow .grid .flow .list:nth-child(1){
    grid-area: flow-1;
}
.beginner .request-flow .grid .flow .list:nth-child(1)::before{
    content: "01";
}
.beginner .request-flow .grid .flow .list:nth-child(2){
    grid-area: flow-2;
}
.beginner .request-flow .grid .flow .list:nth-child(2)::before{
    content: "02";
}
.beginner .request-flow .grid .flow .list:nth-child(3){
    grid-area: flow-3;
}
.beginner .request-flow .grid .flow .list:nth-child(3)::before{
    content: "03";
}
.beginner .request-flow .grid .flow .list:nth-child(4){
    grid-area: flow-4;
}
.beginner .request-flow .grid .flow .list:nth-child(4)::before{
    content: "04";
}
.beginner .request-flow .grid .flow .list:nth-child(5){
    grid-area: flow-5;
}
.beginner .request-flow .grid .flow .list:nth-child(5)::before{
    content: "05";
}
.beginner .request-flow .grid .flow .list:nth-child(6){
    grid-area: flow-6;
}
.beginner .request-flow .grid .flow .list:nth-child(6)::before{
    content: "06";
}
.beginner .request-flow .grid .flow .list:nth-child(7){
    grid-area: flow-7;
}
.beginner .request-flow .grid .flow .list:nth-child(7)::before{
    content: "07";
}
.beginner .request-flow .grid .flow .list:nth-child(8){
    grid-area: flow-8;
}
.beginner .request-flow .grid .flow .list:nth-child(8)::before{
    content: "08";
}
.beginner .request-flow .grid .flow .list:nth-child(9){
    grid-area: flow-9;
}
.beginner .request-flow .grid .flow .list:nth-child(9)::before{
    content: "09";
}
.beginner .request-flow .grid .flow .list:nth-child(10){
    grid-area: flow-10;
}
.beginner .request-flow .grid .flow .list:nth-child(10)::before{
    content: "10";
}
.beginner .request-flow .grid .flow .list:nth-child(11){
    grid-area: flow-11;
}
.beginner .request-flow .grid .flow .list:nth-child(11)::before{
    content: "11";
}
.beginner .request-flow .grid .flow .list:nth-child(12){
    grid-area: flow-12;
}
.beginner .request-flow .grid .flow .list:nth-child(12)::before{
    content: "12";
}
.beginner .request-flow .grid .flow .list:nth-child(13){
    grid-area: flow-13;
}
.beginner .request-flow .grid .flow .list:nth-child(13)::before{
    content: "13";
}
.beginner .request-flow .grid .flow .list:nth-child(14){
    grid-area: flow-14;
}
.beginner .request-flow .grid .flow .list:nth-child(14)::before{
    content: "14";
}
.beginner .request-flow .grid .msg{
    grid-area: msg;
    line-height: var(--line-height-160);
    padding: var(--beginner-msg-padding);
    border: var(--banner-border) var(--main-color) solid;
    font-size: var(--text-size-24);
}
/*
 * よくある質問
*/
.beginner .question-wrap .grid{
    width: var(--content-width);
    min-width: var(--content-min-width);
    max-width: var(--content-max-width);
    margin: auto;
    display: grid;
    grid-template:
    ".... .... ............ ............ ............ ............ ............ ............ ............ ............ .... ...." var(--grid-row-gap-64)
    ".... .... ............ ............ ............ ............ ............ ............ ............ ............ .... ...." var(--grid-row-gap-32)
    ".... .... heading      heading      heading      heading      heading      heading      heading      heading      .... ...." auto
    ".... .... ............ ............ ............ ............ ............ ............ ............ ............ .... ...." var(--beginner-grid-row-gap-32)
    ".... .... cost-heading cost-heading cost-heading cost-heading cost-heading cost-heading cost-heading cost-heading .... ...." auto
    ".... .... ............ ............ ............ ............ ............ ............ ............ ............ .... ...." var(--beginner-grid-row-gap-32)
    ".... .... cost         cost         cost         cost         cost         cost         cost         cost         .... ...." auto
    ".... .... ............ ............ ............ ............ ............ ............ ............ ............ .... ...." var(--beginner-grid-row-gap-32)
    ".... .... cons-heading cons-heading cons-heading cons-heading cons-heading cons-heading cons-heading cons-heading .... ...." auto
    ".... .... ............ ............ ............ ............ ............ ............ ............ ............ .... ...." var(--beginner-grid-row-gap-32)
    ".... .... cons         cons         cons         cons         cons         cons         cons         cons         .... ...." auto
    ".... .... ............ ............ ............ ............ ............ ............ ............ ............ .... ...." var(--grid-row-gap-32)
    ".... .... ............ ............ ............ ............ ............ ............ ............ ............ .... ...." var(--grid-row-gap-64)
    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
    line-height: var(--line-height-160);
}
.beginner .question-wrap .grid .heading{
    grid-area: heading;
    justify-self: center;
    font-size: var(--h2-size);
    font-weight: 400;
}
.beginner .question-wrap .grid .cost-heading{
    grid-area: cost-heading;
    font-size: var(--text-size-32);
    font-weight: 400;
    border-bottom: 2px var(--main-color) solid;
}
.beginner .question-wrap .grid .cost{
    grid-area: cost;
    display: grid;
    grid-template:
    "question-1" auto
    "answer-1  " auto
    ".........." var(--beginner-grid-row-gap-16)
    "question-2" auto
    "answer-2  " auto
    ".........." var(--beginner-grid-row-gap-16)
    "question-3" auto
    "answer-3  " auto
    ".........." var(--beginner-grid-row-gap-16)
    "question-4" auto
    "answer-4  " auto
    ".........." var(--beginner-grid-row-gap-16)
    "question-5" auto
    "answer-5  " auto
    ".........." var(--beginner-grid-row-gap-16)
    /1fr;
}
.beginner .question-wrap .grid .cost .question{
    position: relative;
    background: var(--light-main-color);
    font-size: var(--text-size-24);
    font-weight: 400;
    line-height: 1;
    padding:var(--beginner-question-padding-16) var(--beginner-question-padding-16) 0 var(--beginner-question-padding-32);
}
.beginner .question-wrap .grid .cost .question::before{
    content: "Q";
    font-size: var(--text-size-32);
    color: var(--main-color);
    position: absolute;
    bottom: 0;
    left: var(--beginner-question-padding-16);
}
.beginner .question-wrap .grid .cost .question:nth-of-type(1){
    grid-area: question-1;
}
.beginner .question-wrap .grid .cost .question:nth-of-type(2){
    grid-area: question-2;
}
.beginner .question-wrap .grid .cost .question:nth-of-type(3){
    grid-area: question-3;
}
.beginner .question-wrap .grid .cost .question:nth-of-type(4){
    grid-area: question-4;
}
.beginner .question-wrap .grid .cost .question:nth-of-type(5){
    grid-area: question-5;
}
.beginner .question-wrap .grid .cost .answer{
    background: var(--light-main-color);
    padding: var(--beginner-question-padding-8) var(--beginner-question-padding-16) var(--beginner-question-padding-16) var(--beginner-question-padding-32);
}
.beginner .question-wrap .grid .cost .answer:nth-of-type(1){
    grid-area: answer-1;
}
.beginner .question-wrap .grid .cost .answer:nth-of-type(2){
    grid-area: answer-2;
}
.beginner .question-wrap .grid .cost .answer:nth-of-type(3){
    grid-area: answer-3;
}
.beginner .question-wrap .grid .cost .answer:nth-of-type(4){
    grid-area: answer-4;
}
.beginner .question-wrap .grid .cost .answer:nth-of-type(5){
    grid-area: answer-5;
}
.beginner .question-wrap .grid .construction-heading{
    grid-area: cons-heading;
    font-size: var(--text-size-32);
    font-weight: 400;
    border-bottom: 2px var(--main-color) solid;
}
.beginner .question-wrap .grid .construction{
    grid-area: cons;
    display: grid;
    grid-template:
    "question-1" auto
    "answer-1  " auto
    ".........." var(--beginner-grid-row-gap-16)
    "question-2" auto
    "answer-2  " auto
    ".........." var(--beginner-grid-row-gap-16)
    "question-3" auto
    "answer-3  " auto
    ".........." var(--beginner-grid-row-gap-16)
    "question-4" auto
    "answer-4  " auto
    ".........." var(--beginner-grid-row-gap-16)
    "question-5" auto
    "answer-5  " auto
    ".........." var(--beginner-grid-row-gap-16)
    "question-6" auto
    "answer-6  " auto
    ".........." var(--beginner-grid-row-gap-16)
    "question-7" auto
    "answer-7  " auto
    ".........." var(--beginner-grid-row-gap-16)
    /1fr;
}
.beginner .question-wrap .grid .construction .question{
    position: relative;
    background: var(--light-main-color);
    font-size: var(--text-size-24);
    font-weight: 400;
    line-height: 1;
    padding:var(--beginner-question-padding-16) var(--beginner-question-padding-16) 0 var(--beginner-question-padding-32);
}
.beginner .question-wrap .grid .construction .question::before{
    content: "Q";
    font-size: var(--text-size-32);
    color: var(--main-color);
    position: absolute;
    bottom: 0;
    left: var(--beginner-question-padding-16);
}
.beginner .question-wrap .grid .construction .question:nth-of-type(1){
    grid-area: question-1;
}
.beginner .question-wrap .grid .construction .question:nth-of-type(2){
    grid-area: question-2;
}
.beginner .question-wrap .grid .construction .question:nth-of-type(3){
    grid-area: question-3;
}
.beginner .question-wrap .grid .construction .question:nth-of-type(4){
    grid-area: question-4;
}
.beginner .question-wrap .grid .construction .question:nth-of-type(5){
    grid-area: question-5;
}
.beginner .question-wrap .grid .construction .question:nth-of-type(6){
    grid-area: question-6;
}
.beginner .question-wrap .grid .construction .question:nth-of-type(7){
    grid-area: question-7;
}
.beginner .question-wrap .grid .construction .answer{
    background: var(--light-main-color);
    padding: var(--beginner-question-padding-8) var(--beginner-question-padding-16) var(--beginner-question-padding-16) var(--beginner-question-padding-32);
}
.beginner .question-wrap .grid .construction .answer:nth-of-type(1){
    grid-area: answer-1;
}
.beginner .question-wrap .grid .construction .answer:nth-of-type(2){
    grid-area: answer-2;
}
.beginner .question-wrap .grid .construction .answer:nth-of-type(3){
    grid-area: answer-3;
}
.beginner .question-wrap .grid .construction .answer:nth-of-type(4){
    grid-area: answer-4;
}
.beginner .question-wrap .grid .construction .answer:nth-of-type(5){
    grid-area: answer-5;
}
.beginner .question-wrap .grid .construction .answer:nth-of-type(6){
    grid-area: answer-6;
}
.beginner .question-wrap .grid .construction .answer:nth-of-type(7){
    grid-area: answer-7;
}

/*
 *--------------------------------------------------------
 * contact.html
 * > お問い合わせ
 * > form
 *--------------------------------------------------------
*/
/*　
 * お問い合わせ
*/
.contact .page-head{
    background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)),
    url('./image/pc-contact-heading.jpg');
    background-position: center;
    background-size: cover;
}
/*　
 * form
*/
.contact .contact-form .grid{
    width: var(--content-width);
    display: grid;
    grid-template:
    ".......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .........." var(--grid-row-gap-64)
    ".......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .........." var(--grid-row-gap-32)
    " heading    heading    heading    heading   heading    heading    heading    heading    heading    heading    heading    heading   " auto
    ".......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .........." var(--form-row-gap-12)
    "additional additional additional additional additional additional additional additional additional additional additional additional" auto
    ".......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .........." var(--form-row-gap-48)
    "form       form       form       form       form       form       form       form       form       form       form       form      " auto
    ".......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .........." var(--grid-row-gap-32)
    ".......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .........." var(--grid-row-gap-64)
    /1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
    margin: auto;
}
.contact .contact-form .grid .heading{
    grid-area: heading;
    font-size: var(--h2-size);
    justify-self: center;
}
.contact .contact-form .grid .additional{
    grid-area: additional;
    justify-self: center;
    font-size: var(--text-size-20);
}
.contact .contact-form .grid .form{
    grid-area: form;
    display: grid;
    grid-template:
    ".... .... additional    additional    additional    additional    additional    additional    additional    additional    .... ...." auto
    ".... .... ............. ............. ............. ............. ............. ............. ............. ............. .... ...." var(--form-row-gap-24)
    ".... .... name-label    name-label    name-label    name          name          name          name          name          .... ...." auto
    ".... .... ............. ............. ............. ............. ............. ............. ............. ............. .... ...." var(--form-row-gap-24)
    ".... .... mail-label    mail-label    mail-label    mail          mail          mail          mail          mail          .... ...." auto
    ".... .... ............. ............. ............. ............. ............. ............. ............. ............. .... ...." var(--form-row-gap-24)
    ".... .... tel-label     tel-label     tel-label     tel           tel           tel           tel           tel           .... ...." auto
    ".... .... ............. ............. ............. ............. ............. ............. ............. ............. .... ...." var(--form-row-gap-24)
    ".... .... inquiry-label inquiry-label inquiry-label inquiry-label inquiry-label inquiry-label inquiry-label inquiry-label .... ...." auto
    ".... .... ............. ............. ............. ............. ............. ............. ............. ............. .... ...." var(--form-row-gap-8)
    ".... .... inquiry       inquiry       inquiry       inquiry       inquiry       inquiry       inquiry       inquiry       .... ...." auto
    ".... .... ............. ............. ............. ............. ............. ............. ............. ............. .... ...." var(--form-row-gap-32)
    ".... .... privacy-check privacy-check privacy-check privacy-check privacy-check privacy-check privacy-check privacy-check .... ...." auto
    ".... .... ............. ............. ............. ............. ............. ............. ............. ............. .... ...." var(--form-row-gap-48)
    ".... .... ............. ............. next-button   next-button   next-button   next-button   ............. ............. .... ...." auto
    /1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
    font-size: var(--text-size-24);
}
.contact .contact-form .grid .form .additional{
    grid-area: additional;
    justify-self: start;
    color: var(--red);
    font-size: var(--small-text-size);
}
.contact .contact-form .grid .form .name-label{
    grid-area: name-label;
}
.contact .contact-form .grid .form .name{
    grid-area: name;
    width: 100%;
    height: var(--form-input-height);
    font-size: var(--form-input-text-size);
}
.contact .contact-form .grid .form .mail-label{
    grid-area: mail-label;
}
.contact .contact-form .grid .form .mail{
    grid-area: mail;
    width: 100%;
    height: var(--form-input-height);
    font-size: var(--form-input-text-size);
}
.contact .contact-form .grid .form .tel-label{
    grid-area: tel-label;
}
.contact .contact-form .grid .form .tel{
    grid-area: tel;
    width: 100%;
    height: var(--form-input-height);
    font-size: var(--form-input-text-size);
}
.contact .contact-form .grid .form .inquiry-label{
    grid-area: inquiry-label;
}
.contact .contact-form .grid .form .inquiry{
    grid-area: inquiry;
    width: 100%;
    height: auto;
    min-height: var(--form-textare-min-height);
    font-size: var(--form-input-text-size);
}
.contact .contact-form .grid .form .privacy-policy-checkbox{
    grid-area: privacy-check;
    font-size: var(--main-text-size);
}
.contact .contact-form .grid .form .privacy-policy-checkbox .checkbox{
    margin-right: var(--privacy-policy-margin);
}
.contact .contact-form .grid .form .privacy-policy-checkbox .checkbox:hover{
    cursor: pointer;
}
.contact .contact-form .grid .form .privacy-policy-checkbox .privacy-policy{
    display: inline-block;
}
.contact .contact-form .grid .form .privacy-policy-checkbox .privacy-policy .link{
    text-decoration: underline;
}
.contact .contact-form .grid .form .privacy-policy-checkbox .privacy-policy .link:hover{
    color: var(--main-color);
}
.contact .contact-form .grid .form .next-button{
    grid-area: next-button;
    justify-self: center;
    cursor: pointer;
}
.contact .contact-form .grid .form .next-button:disabled{
    cursor: default;
}
/*
 *--------------------------------------------------------
 * contact-check.php
 * > 入力内容の確認
 *--------------------------------------------------------
*/
/*　
 * 入力内容の確認
*/
input[readonly],
textarea[readonly]{
    background: #f5f5f5;
    border: 1px var(--no-active-color) solid;
}
.contact .contact-form.check .grid .form{
    grid-area: form;
    display: grid;
    grid-template:
    ".... .... additional    additional    additional    additional    additional    additional    additional    additional    .... ...." auto
    ".... .... ............. ............. ............. ............. ............. ............. ............. ............. .... ...." var(--form-row-gap-24)
    ".... .... name-label    name-label    name-label    name          name          name          name          name          .... ...." auto
    ".... .... ............. ............. ............. ............. ............. ............. ............. ............. .... ...." var(--form-row-gap-24)
    ".... .... mail-label    mail-label    mail-label    mail          mail          mail          mail          mail          .... ...." auto
    ".... .... ............. ............. ............. ............. ............. ............. ............. ............. .... ...." var(--form-row-gap-24)
    ".... .... tel-label     tel-label     tel-label     tel           tel           tel           tel           tel           .... ...." auto
    ".... .... ............. ............. ............. ............. ............. ............. ............. ............. .... ...." var(--form-row-gap-24)
    ".... .... inquiry-label inquiry-label inquiry-label inquiry-label inquiry-label inquiry-label inquiry-label inquiry-label .... ...." auto
    ".... .... ............. ............. ............. ............. ............. ............. ............. ............. .... ...." var(--form-row-gap-8)
    ".... .... inquiry       inquiry       inquiry       inquiry       inquiry       inquiry       inquiry       inquiry       .... ...." auto
    ".... .... ............. ............. ............. ............. ............. ............. ............. ............. .... ...." var(--form-row-gap-48)
    ".... .... ............. ............. prev-button   prev-button   prev-button   prev-button   ............. ............. .... ...." auto
    ".... .... ............. ............. ............. ............. ............. ............. ............. ............. .... ...." var(--form-row-gap-32)
    ".... .... ............. ............. next-button   next-button   next-button   next-button   ............. ............. .... ...." auto
    /1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
}
.contact .contact-form.check .grid .form .prev-button{
    grid-area: prev-button;
    justify-self: center;
    align-self: center;
    width: 256px;
    height: 48px;
    border: none;
    background: var(--main-color);
    cursor: pointer;
    transform: scale(1);
    transition: transform var(--button-transition);
    font-size: var(--main-text-size);
}
.contact .contact-form.check .grid .form .prev-button:hover{
    transform: scale(var(--button-hover-scale));
    transition: transform var(--button-transition);
}
/*
 *--------------------------------------------------------
 * contact-submit.php
 * > お問い合わせが完了しました
 *--------------------------------------------------------
*/
/*　
 * お問い合わせが完了しました
*/
.contact-submit .page-head{
    background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)),
    url('./image/pc-contact-heading.jpg');
    background-position: center;
    background-size: cover;
}
.contact-submit .contents .grid{
    width: var(--content-width);
    display: grid;
    grid-template:
    ".... .... .......... .......... .......... .......... .......... .......... .......... .......... .... ...." var(--grid-row-gap-64)
    ".... .... .......... .......... .......... .......... .......... .......... .......... .......... .... ...." var(--grid-row-gap-32)
    ".... .... heading    heading    heading    heading    heading    heading    heading    heading    .... ...." auto
    ".... .... .... .... .......... .......... .......... .......... .... .... .... ...." var(--grid-column-gap)
    ".... .... main-text  main-text  main-text  main-text  main-text  main-text  main-text  main-text  .... ...." auto
    ".... .... .......... .......... .......... .......... .......... .......... .......... .......... .... ...." var(--grid-column-gap)
    ".... .... annotation annotation annotation annotation annotation annotation annotation annotation .... ...." auto
    ".... .... .......... .......... .......... .......... .......... .......... .......... .......... .... ...." var(--form-row-gap-48)
    ".... .... .......... .......... back-btn   back-btn   back-btn   back-btn   .......... .......... .... ...." auto
    ".... .... .......... .......... .......... .......... .......... .......... .......... .......... .... ...." var(--grid-row-gap-64)
    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
    margin: auto;
    line-height: var(--line-height-160);
    font-size: var(--main-text-size);
}
.contact-submit .contents .grid .heading{
    grid-area: heading;
}
.contact-submit .contents .grid .main-text{
    grid-area: main-text;
}
.contact-submit .contents .grid .annotation{
    grid-area: annotation;
    color: var(--red);
    font-size: var(--small-text-size);
}
.contact-submit .contents .grid .next-button{
    grid-area: back-btn;
    justify-self: center;
}
/*
 *--------------------------------------------------------
 * works.html
 * > 施工事例
 * > 施工事例一覧
 *--------------------------------------------------------
*/
/*　
 * 施工事例
*/
.works .page-head{
    background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)),
    url('./image/pc-works-heading.jpg');
    background-position: center;
    background-size: cover;
}
/*　
 * 施工事例一覧
*/
.works .works-contents .grid{
    width: var(--content-width);
    margin: auto;
    display: grid;
    grid-template:
    ".......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .........." var(--grid-row-gap-64)
    ".......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .........." var(--grid-row-gap-32)
    "heading    heading    heading    heading    heading    heading    heading    heading    heading    heading    heading    heading   " auto
    ".......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .........." var(--grid-row-gap-32)
    "category   category   category   category   category   category   category   category   category   category   category   category  " auto
    ".......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .........." var(--grid-row-gap-32)
    "work-lists work-lists work-lists work-lists work-lists work-lists work-lists work-lists work-lists work-lists work-lists work-lists" auto
    ".......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .........." var(--grid-column-gap)
    "pagination pagination pagination pagination pagination pagination pagination pagination pagination pagination pagination pagination" auto
    ".......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .........." var(--grid-row-gap-64)
    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
}
.works .works-contents .grid .heading{
    grid-area: heading;
    justify-self: center;
    font-size: var(--h2-size);
    font-weight: 400;
}
.works .works-contents .grid .category-group{
    grid-area: category;
    width: 100%;
    display: grid;
    grid-template:
    ".......... .......... .......... heading    heading      heading      heading     heading      heading     .......... .......... .........." auto
    ".......... .......... .......... .......... ............ ............ ........... ............ ........... .......... .......... .........." var(--grid-column-gap)
    "outer-wall outer-wall outer-wall outer-wall roof         roof         roof         roof         waterproof waterproof waterproof waterproof" auto
    ".......... .......... .......... .......... ............ ............ ........... ............ ........... .......... .......... .........." var(--grid-column-gap)
    "others     others     others     others     all-category all-category all-category all-category .......... .......... .......... .........." auto
    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
}
.works .works-contents .grid .category-group .category-text{
    grid-area: heading;
    font-size: var(--text-size-32);
    justify-self: center;
}
.works .works-contents .grid .category-group .outer-wall{
    grid-area: outer-wall;
}
.works .works-contents .grid .category-group .roof{
    grid-area: roof;
}
.works .works-contents .grid .category-group .waterproof{
    grid-area: waterproof;
}
.works .works-contents .grid .category-group .others{
    grid-area: others;
}
.works .works-contents .grid .category-group .all-category{
    grid-area: all-category;
}
.works .works-contents .grid .category-group .category-btn{
    display: grid;
    justify-items: center;
    align-items: center;
    width: 100%;
    height: var(--works-category-btn-height);
    background: var(--no-active-color);
    font-size: var(--text-size-24);
    text-decoration: none;
    color: var(--text-color);
}
.works .works-contents .grid .category-group .category-btn.active{
    background: var(--main-color);
}
.works .works-contents .grid .work-lists{
    grid-area: work-lists;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-column-gap);

}
.works .works-contents .grid .work-lists .work-example{
    position: relative;
    display: block;
    color: var(--text-color);
    text-decoration: none;
}
.works .works-contents .grid .work-lists .work-example .img{
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin-bottom: var(--works-work-lists-margin);
}
.works .works-contents .grid .work-lists .work-example .area{
    background: var(--translucent-white);
    position: absolute;
    bottom: calc(var(--works-work-lists-category-height) + var(--works-work-lists-margin));
    left: 0;
    padding: var(--works-work-lists-area-padding-4) var(--works-work-lists-area-padding-16) var(--works-work-lists-area-padding-4) var(--works-work-lists-area-padding-16);
}
.works .works-contents .grid .work-lists .work-example .category{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
}
.works .works-contents .grid .work-lists .work-example .category .list{
    display: grid;
    justify-items: center;
    align-items: center;
    width: var(--works-work-lists-category-width);
    height: var(--works-work-lists-category-height);
    font-size: var(--small-text-size);
    background: var(--main-color);
}
.works .works-contents .grid .pagination{
    grid-area: pagination;
    width: calc(var(--works-pagination-link-size) * 10 +  var(--works-pagination-row-gap) * 9);
    display: flex;
    flex-wrap: wrap;
    gap: var(--works-pagination-row-gap);
    justify-content: center;
    justify-self: center;
}
.works .works-contents .grid .pagination .link{
    display: grid;
    justify-items: center;
    align-items: center;
    width: var(--works-pagination-link-size);
    height: var(--works-pagination-link-size);
    background: var(--no-active-color);
}
.works .works-contents .grid .pagination .link.active{
    background: var(--main-color);
}
/*
 *--------------------------------------------------------
 * work-example.html
 * > 施工事例
 *--------------------------------------------------------
*/
/*　
 * 施工事例
*/
.work-example .page-head{
    background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)),
    url('./image/pc-works-heading.jpg');
    background-position: center;
    background-size: cover;
}
.work-example .work-example-grid{
    width: var(--content-width);
    margin: auto;
    display: grid;
    grid-template:
    ".......... .......... ........... ........... ........... ........... ........... ........... ........... ........... ........... ........." var(--grid-row-gap-64)
    ".......... .......... ........... ........... ........... ........... ........... ........... ........... ........... ........... ........." var(--grid-row-gap-32)
    "before-img before-img before-img  before-img  before-img  before-img  after-img   after-img   after-img   after-img   after-img   after-img" auto
    ".......... .......... ........... ........... ........... ........... ........... ........... ........... ........... ........... ........." var(--grid-row-gap-32)
    ".......... .......... explanation explanation explanation explanation explanation explanation explanation explanation explanation ........." auto
    ".......... .......... ........... ........... ........... ........... ........... ........... ........... ........... ........... ........." var(--grid-row-gap-32)
    ".......... .......... work-img    work-img    work-img    work-img    work-img    work-img    work-img    work-img    ........... ........." auto
    ".......... .......... ........... ........... ........... ........... ........... ........... ........... ........... ........... ........." var(--work-example-grid-row-gap-32)
    ".......... .......... tmb-wrap    tmb-wrap    tmb-wrap    tmb-wrap    tmb-wrap    tmb-wrap    tmb-wrap    tmb-wrap    ........... ........." auto
    ".......... .......... ........... ........... ........... ........... ........... ........... ........... ........... ........... ........." var(--grid-row-gap-64)
    ".......... .......... ........... ........... back-btn    back-btn    back-btn    back-btn    ........... ........... ........... ........." auto
    ".......... .......... ........... ........... ........... ........... ........... ........... ........... ........... ........... ........." var(--work-example-grid-row-gap-32)
    ".......... .......... ........... ........... prev-btn    prev-btn    next-btn    next-btn    ........... ........... ........... ........." auto
    ".......... .......... ........... ........... ........... ........... ........... ........... ........... ........... ........... ........." var(--grid-row-gap-64)
    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
}
.work-example .work-example-grid .before-img{
    grid-area: before-img;
    position: relative;
}
.work-example .work-example-grid .before-img::after{
    content: "Before";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    color: var(--white);
    font-size: var(--after-size);
    font-weight: 700;
    line-height: 0.75;
}
.work-example .work-example-grid .after-img{
    grid-area: after-img;
    position: relative;
}
.work-example .work-example-grid .after-img::after{
    content: "After";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    color: var(--white);
    font-size: var(--after-size);
    font-weight: 700;
    line-height: 0.75;
}
.work-example .work-example-grid .explanation{
    grid-area: explanation;
    display: grid;
    grid-template:
    "area     area     area     area-cont   area-cont   area-cont   area-cont   area-cont   area-cont  " auto
    "........ ........ ........ ........... ........... ........... ........... ........... ..........." var(--work-example-explanation-row-gap-16)
    "period   period   period   period-cont period-cont period-cont period-cont period-cont period-cont" auto
    "........ ........ ........ ........... ........... ........... ........... ........... ..........." var(--work-example-explanation-row-gap-16)
    "category category category cat-cont    cat-cont    cat-cont    cat-cont    cat-cont    cat-cont   " auto
    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
    font-size: var(--text-size-24);
}
.work-example .work-example-grid .explanation .work-title{
    color: var(--sub-color);
    border-bottom: 1px var(--sub-color) solid;
    padding-bottom: var(--work-example-explanation-padding);
}
.work-example .work-example-grid .explanation .work-title:nth-of-type(1){
    grid-area: area;
}
.work-example .work-example-grid .explanation .work-title:nth-of-type(2){
    grid-area: period;
}
.work-example .work-example-grid .explanation .work-title:nth-of-type(3){
    grid-area: category;
}
.work-example .work-example-grid .explanation .work-contents{
    border-bottom: 1px var(--main-color) solid;
    padding-bottom: var(--work-example-explanation-padding);
}
.work-example .work-example-grid .explanation .work-contents:nth-of-type(1){
    grid-area: area-cont;
}
.work-example .work-example-grid .explanation .work-contents:nth-of-type(2){
    grid-area: period-cont;
}
.work-example .work-example-grid .explanation .work-contents:nth-of-type(3){
    grid-area: cat-cont;
}
.work-example .work-example-grid .explanation .work-contents:nth-of-type(3) .category{
    margin-right: var(--main-text-size);
}
.work-example .work-example-grid .explanation .work-contents:nth-of-type(3) .category:last-of-type{
    margin-right: 0;
}
.work-example .work-example-grid .work-img{
    grid-area: work-img;
}
.work-example .work-example-grid .work-img .img{
    display: grid;
    align-items: center;
    justify-items: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}
.work-example .work-example-grid .thumbnail-wrap{
    grid-area: tmb-wrap;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: var(--grid-column-gap);
}
.work-example .work-example-grid .thumbnail-wrap .thumbnail-button{
    width: 100%;
    aspect-ratio: 1 / 1;
    opacity: 0.6;
    border: none;
    background: none;
    cursor: pointer;
}
.work-example .work-example-grid .thumbnail-wrap .thumbnail-button.active{
    opacity: 1;
}
.work-example .work-example-grid .thumbnail-wrap .thumbnail-button .thumbnail-img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.work-example .work-example-grid .thumbnail-wrap .img.active{
    opacity: 1;
}
.work-example .work-example-grid .work-back-button{
    grid-area: back-btn;
    width: 100%;
    height: var(--work-example-btn-height);
    display: grid;
    justify-items: center;
    align-items: center;
    background: var(--main-color);
    font-size: var(--text-size-24);
}
.work-example .work-example-grid .work-prev-button{
    grid-area: prev-btn;
    width: 100%;
    height: var(--work-example-btn-height);
    display: grid;
    justify-items: center;
    align-items: center;
    background: var(--main-color);
    clip-path: polygon(100% 0%, 14% 0%, 0% 50%, 14% 100%, 100% 100%);
    padding-left: var(--work-example-button-padding);
    font-size: var(--text-size-24);
}
.work-example .work-example-grid .work-next-button{
    grid-area: next-btn;
    width: 100%;
    height: var(--work-example-btn-height);
    display: grid;
    justify-items: center;
    align-items: center;
    background: var(--main-color);
    clip-path:polygon(0% 0%,86% 0%,100% 50%,86% 100%,0% 100%);
    padding-right: var(--work-example-button-padding);
    font-size: var(--text-size-24);
}
.work-example .work-example-grid .work-prev-button.no-active,
.work-example .work-example-grid .work-next-button.no-active{
    visibility: hidden;
}
/*
 *--------------------------------------------------------
 * privacy-policy.html
 * > プライバシーポリシー
 *--------------------------------------------------------
*/
/*　
 * プライバシーポリシー
*/
.privacy-policy .page-head{
    background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)),
    url('./image/pc-about-heading.jpg');
    background-position: center;
    background-size: cover;
}
.privacy-policy .pp-grid{
    width: var(--content-width);
    min-width: var(--content-min-width);
    max-width: var(--content-max-width);
    margin: auto;
    display: grid;
    grid-template:
    "............" var(--grid-row-gap-64)
    "introduction" auto
    "............" var(--grid-row-gap-32)
    "definitions "
    "............" var(--grid-row-gap-64)
    /1fr;
    line-height: var(--line-height-160);
}
.privacy-policy .pp-grid .introduction{
    grid-area: introduction;
}
.privacy-policy .pp-grid .definitions{
    grid-area: definitions;
    display: grid;
    grid-template:
    "title-1      " auto
    "............." var(--grid-row-gap-16)
    "description-1" auto
    "............." var(--grid-row-gap-32)
    "title-2      " auto
    "............." var(--grid-row-gap-16)
    "description-2" auto
    "............." var(--grid-row-gap-32)
    "title-3     " auto
    "............." var(--grid-row-gap-16)
    "description-3" auto
    "............." var(--grid-row-gap-32)
    "title-4     " auto
    "............." var(--grid-row-gap-16)
    "description-4" auto
    "............." var(--grid-row-gap-32)
    "title-5     " auto
    "............." var(--grid-row-gap-16)
    "description-5" auto
    "............." var(--grid-row-gap-32)
    "title-6     " auto
    "............." var(--grid-row-gap-16)
    "description-6" auto
    "............." var(--grid-row-gap-32)
    "title-7     " auto
    "............." var(--grid-row-gap-16)
    "description-7" auto
    /1fr;
    font-size: var(--main-text-size);
}
.privacy-policy .pp-grid .definitions .title{
    border-bottom: 1px var(--sub-color) solid;
    margin-bottom: var(--privacy-policy-title-padding);
    font-size: var(--text-size-24);
    color: var(--sub-color);
}
.privacy-policy .pp-grid .definitions .title:nth-of-type(1){
    grid-area: title-1;
}
.privacy-policy .pp-grid .definitions .description:nth-of-type(1){
    grid-area: description-1;
}
.privacy-policy .pp-grid .definitions .title:nth-of-type(2){
    grid-area: title-2;
}
.privacy-policy .pp-grid .definitions .description:nth-of-type(2){
    grid-area: description-2;
}
.privacy-policy .pp-grid .definitions .title:nth-of-type(3){
    grid-area: title-3;
}
.privacy-policy .pp-grid .definitions .description:nth-of-type(3){
    grid-area: description-3;
}
.privacy-policy .pp-grid .definitions .title:nth-of-type(4){
    grid-area: title-4;
}
.privacy-policy .pp-grid .definitions .description:nth-of-type(4){
    grid-area: description-4;
}
.privacy-policy .pp-grid .definitions .title:nth-of-type(5){
    grid-area: title-5;
}
.privacy-policy .pp-grid .definitions .description:nth-of-type(5){
    grid-area: description-5;
}
.privacy-policy .pp-grid .definitions .title:nth-of-type(6){
    grid-area: title-6;
}
.privacy-policy .pp-grid .definitions .description:nth-of-type(6){
    grid-area: description-6;
}
.privacy-policy .pp-grid .definitions .title:nth-of-type(7){
    grid-area: title-7;
}
.privacy-policy .pp-grid .definitions .description:nth-of-type(7){
    grid-area: description-7;
}
.privacy-policy .pp-grid .definitions .description .list{
    list-style: disc;
    display: grid;
    row-gap: var(--privacy-policy-row-gap-8);
    margin-top: var(--privacy-policy-row-gap-8);
    margin-left: var(--text-size-20);
}
.privacy-policy .pp-grid .definitions .description:last-of-type .list{
    list-style: none;
    row-gap: 0;
    margin-left: 0;
}
.privacy-policy .pp-grid .definitions .description .margin-top{
    display: inline-block;
    margin-top: var(--privacy-policy-row-gap-8);
}
/*
 *--------------------------------------------------------
 * news.php
 * > お知らせ
 *--------------------------------------------------------
*/
/*　
 * お知らせ
*/
.news .page-head{
    background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)),
    url('./image/pc-about-heading.jpg');
    background-position: center;
    background-size: cover;
}
.news .news-list{
    width: var(--content-width);
    margin: var(--grid-row-gap-64) auto;
    display: grid;
    row-gap: var(--grid-row-gap-32);
}
.news .news-list .article .title{
    line-height: var(--line-height-160);
    border-bottom: 1px var(--main-color) solid;
    font-size: var(--text-size-24);
}
.news .pagination{
    display: flex;
    flex-wrap: wrap;
    width: var(--content-width);
    gap: var(--works-pagination-row-gap);
    margin: 0 auto var(--grid-row-gap-64);
    justify-content: center;
}
.news .pagination .link{
    display: grid;
    justify-items: center;
    align-items: center;
    width: var(--works-pagination-link-size);
    height: var(--works-pagination-link-size);
    background: var(--no-active-color);
}
.news .pagination .link.active{
    background: var(--main-color);
}