@charset "UTF-8";
/*
 * 【制作期間】2025年3月31日-
 * 【制作者】三上雅樹
 * 【仕様】
 * グリッドレイアウトで制作
 * コンテンツ幅:84%（min：312px max：350px）
 * 単語間は‐（ハイフン）を使用
 * スタイルの指定はすべてclassで行う。idは目印として使用。
 * 
*/
:root{
    /*コンテンツ幅*/
    --content-width: 84%;
    --content-min-width: 312px;/*device-width 375px */
    --content-max-width: 350px;/*device-width 414px以上*/
    /*グリッド設定*/
    --grid-column: 4;
    --grid-min-width: calc(var(--content-min-width) / var(--grid-column) - var(--grid-column-gap));
    --grid-max-width: calc(var(--content-max-width) / var(--grid-column) - var(--grid-column-gap));
    --grid-row-gap-64: 64px;
    --grid-row-gap-32: 32px;
    --grid-row-gap-16: 16px;
    --overview-gap-16: 16px;
    --overview-gap-8: 8px;
    --footer-gap-24: 24px;
    --footer-gap-32: 32px;
    --grid-column-gap: 16px;
    --index-news-height: 96px;
    /*行間*/
    --line-height-180: 1.8;
    --line-height-160: 1.6;
    --post-code-gap: 8px;
    --h2-gap: 32px;
    /*お問い合わせ*/
    --form-margin: 16px;
    --form-input-height: 20px;
    --form-textare-min-height: 256px;
    --form-row-gap-8: 8px;/*labelと入力要素の行間*/
    --form-row-gap-12: 12px;/*headingとadditionalの行間*/
    --form-row-gap-16: 16px;/*form要素の行間*/
    --form-row-gap-24: 24px;/*form内のadditionalとform要素の行間*/
    --form-row-gap-32: 32px;
    --form-row-gap-40: 40px;
    --page-head-gap-16: 16px;
    /*背景設定*/
    --background-text-size: 32px;/*サイト装飾の英字*/
    --background-text-line-height: 0.68;
    --background-text-opacity: 100%; 
    --background-block-height: calc(100% - 128px);/*常に--grid-row-gap-64の2倍の数値を引く*/
    /*フォント設定*/
    --font: "Inter", "Noto Sans JP", sans-serif;
    --h1-size: 32px;
    --h2-size: 24px;
    --main-text-size: 16px;/*本文サイズ*/
    --small-text-size: 14px;
    --text-size-32: 32px;
    --text-size-24: 24px;
    --text-size-20: 20px;
    --text-size-18: 18px;
    --news-heading-size: 20px;
    --first-view-heading-size: 32px;
    --before-size: 24px;
    --after-size: 56px;
    /*配色*/
    --white: #ffffff;
    --red: #FF4043;
    --text-color: #1F231F;
    --main-color: #82cd00;
    --light-main-color:rgba(130, 205, 0, 0.2);
    --sub-color:#3D6100;
    --translucent-white: rgba(255, 255, 255, 0.6);
    --no-active-color: #ccc;
    /*header*/
    --duration: 0.5s;
    --nav-list-height: 48px;
    --header-height: 56px;
    --header-tel-height: 100px;
    /*contact*/
    --contact-tel-gap-8: 8px;
    --contact-tel-img-size: 24px;
    /*service*/
    --service-grid-heading-height: 40px;
    --service-grid-row-gap-8: 8px;
    --service-grid-row-gap-16: 16px;
    --service-grid-row-gap-32: 32px;
    --service-img-size: 72px;
    --service-heading-padding: 4px;
    --service-checklist-padding: 28px;
    --service-margin-8: 8px;
    /*beginner*/
    --beginner-grid-row-gap-16: 16px;
    --beginner-grid-row-gap-32: 32px;
    --beginner-grid-row-gap-56: 56px;
    --beginner-flow-list-padding-bottom: 4px;
    --beginner-flow-list-padding-left: 48px;
    --beginner-flow-number-line-height: 0.72;
    --beginner-arrow-width: 48px;
    --beginner-arrow-height: calc(var(--beginner-arrow-width) / 2);
    --beginner-arrow-position: -40px;
    --beginner-msg-padding: 16px;
    --beginner-question-padding-8: 8px;
    --beginner-question-padding-16: 16px;
    --beginner-question-padding-32: 32px;
    /*works*/
    --works-work-lists-margin: 4px;
    --works-work-lists-category-height: 20px;
    --works-work-lists-category-width: 72px;
    --works-work-lists-area-height: 24px;
    --works-work-lists-area-padding: 4px;
    --works-pagination-link-size: 48px;
    --works-pagination-row-gap: 16px;
    /*work-example*/
    --work-example-explanation-row-gap-8: 8px; 
    --work-example-explanation-row-gap-16: 16px;
    --work-example-thumbnail-gap: 16px; 
    --work-example-button-padding: 14%;
    /*privacy-policy*/
    --privacy-policy-title-padding: 4px;
    --privacy-policy-row-gap-8: 8px;
    /*button*/
    --button-hover-scale: 1.04;
    --button-transition: 0.4s;
    --splide-arrow-size: 60px;
    --splide-arrow-svg-size: 48px;
    --splide-arrow-svg-hover-scale: 1.3;
    /*supplement-regarding-inquiries*/
    --supplement-margin: 10px;
    --supplement-padding-3: 3px;
    --supplement-padding-6: 6px;
    --supplement-padding-10: 10px;
    --supplement-padding-16: 16px;
    /*sns-icons*/
    --sns-icon-size: 40px;
    --sns-icon-min-margin: calc(var(--sns-icon-size) / 2);

}
/*
 * 共通部品の設定
 * > 全体設定
 * > header
 * > footer
 * > contact-banner
 * > backgroud-text（装飾の英字）
 * > swiper
*/
/*
 * 全体設定
*/
*{
    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);
}
body{
    position: relative;
}
a{
    transform: scale(1);
    transition: transform var(--button-transition);
}
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: 80px;
}
.main .page-head{
    width: calc(var(--content-width) + (100% - var(--content-width)) / 2);
    max-height: 256px;
    aspect-ratio: 1.414 / 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: 256px;
    height: 48px;
    border: none;
    background: var(--main-color);
    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;
}
.sp-br{
    display: inline-block;
}
/*
 * header
*/
.header.hidden{
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
    transition: opacity 1s ease;
}
.header{
    width: 100%;
    position: fixed;
    background: rgba(31, 35, 31, 0.8);/*#1F231F*/
    color: var(--white);
    z-index: 50;
    display: grid;
    grid-template:
    ".... title    ........ nav-btn  ...." var(--header-height)
    ".... ........ ........ ........ ...." 1fr
    ".... nav      nav      nav      ...." auto
    ".... sns      sns      sns      ...." auto
    ".... tel-wrap tel-wrap tel-wrap ...." auto
    /32px auto 1fr auto 32px;
    transform: scaleY(1);
    transform-origin: top;
    opacity: 1;
    transition: opacity 1s ease;

}
.header .title.link{
    grid-area: title;
    font-size: 24px;
    align-self: center;
    font-weight: 400;
    color: var(--white);
}
.header .title .subtitle{
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}
.header .nav-btn-wrap{
    grid-area: nav-btn;
    align-self: center;
    justify-self: center;
    width:32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
} 
.header .nav-btn-wrap .nav-btn{
    width: 32px;
    height: 4px;
    position: relative;
    border-radius: 2px;
    background: var(--white);
    transition-duration: var(--duration);
}
.header .nav-btn-wrap .nav-btn::before{
    content: "";
    width: 100%;
    height: 4px;
    position: absolute;
    top: -12px;
    left: 0;
    background: var(--white);
    border-radius: 2px;
    transition-duration: var(--duration);
}
.header .nav-btn-wrap .nav-btn::after{
    content: "";
    width: 100%;
    height: 4px;
    position: absolute;
    top: 12px;
    left: 0;
    background: var(--white);
    border-radius: 2px;
    transition-duration: var(--duration);
}
.header .nav-btn-wrap .nav-btn:active,
.header .nav-btn-wrap .nav-btn:active::before,
.header .nav-btn-wrap .nav-btn:active::after{
    background: var(--main-color);
}
.header .nav-btn-wrap.open .nav-btn{
    transform: rotate(135deg);
    transition-duration: var(--duration);
}
.header .nav-btn-wrap.open .nav-btn::before,
.header .nav-btn-wrap.open .nav-btn::after{
    top: 0;
    transform: rotate(90deg);
    transition-duration: var(--duration);
}
.header .nav,
.header .contact-msg,
.header .tel-contact,
.header .contact-btn-wrap,
.header .sns-icons{
    display: none;
}
.header.open{
    height: 100%;
    background: var(--text-color);
}
.header.open .nav{
    grid-area: nav;
    display: block;
}
.header .nav .nav-lists{
    grid-area: nav-lists;
}
.header.open .nav .nav-lists .grid{
    height: calc(100svh - var(--header-height) - var(--header-tel-height) - (var(--sns-icon-size) * 3));
    display: grid;
    grid-template:
    ".... ........ ...." 1fr
    ".... home     ...." var(--nav-list-height)
    ".... ........ ...." var(--grid-row-gap-16)
    ".... about    ...." var(--nav-list-height)
    ".... ........ ...." var(--grid-row-gap-16)
    ".... service  ...." var(--nav-list-height)
    ".... ........ ...." var(--grid-row-gap-16)
    ".... works    ...." var(--nav-list-height)
    ".... ........ ...." var(--grid-row-gap-16)
    ".... beginner ...." var(--nav-list-height)
    ".... ........ ...." var(--grid-row-gap-16)
    ".... contact  ...." var(--nav-list-height)
    ".... ........ ...." 1fr
    /1fr 256px 1fr;
    list-style: none;
}
.header.open .nav .nav-lists .grid .nav-home{
    grid-area: home;
}
.header.open .nav .nav-lists .grid .nav-about{
    grid-area: about;
}
.header.open .nav .nav-lists .grid .nav-service{
    grid-area: service;
}
.header.open .nav .nav-lists .grid .nav-works{
    grid-area: works;
}
.header.open .nav .nav-lists .grid .nav-beginner{
    grid-area: beginner;
}
.header.open .nav .nav-lists .grid .nav-contact{
    grid-area: contact;
}
.header.open .nav .nav-lists .grid .link{
    display: grid;
    align-items: center;
    padding-left: 16px;;
    width: 100%;
    height: 100%;
    font-size: var(--text-size-20);
    font-weight: 700;
    color: var(--white);
    border: 1px var(--white) solid;
}
.header.open .sns-icons{
    grid-area: sns;
    display: block;
    width: 100%;
    height: var(--sns-icon-size);
    margin: var(--sns-icon-size) auto;
}
.header.open .sns-icons .link{
    display: block;
    width: var(--sns-icon-size);
    height: var(--sns-icon-size);
    margin: 0 auto;
}
.header.open .sns-icons .link .instagram{
    height: var(--sns-icon-size);
    fill: var(--white);
}
.header.open .tel-contact{
    grid-area: tel-wrap;
    height: var(--header-tel-height);
    display: grid;
    grid-template:
    ".... .... .... .......... ...." 1fr
    ".... .... .... additional ...." auto
    ".... .... .... .......... ...." 8px
    ".... img  .... tel        ...." auto
    ".... .... .... .......... ...." var(--grid-row-gap-32)
    /1fr auto 16px auto 1fr;
}
.header.open .tel-contact .additional{
    grid-area: additional;
}
.header.open .tel-contact .tel-img{
    grid-area: img;
    width: 32px;
}
.header.open .tel-contact .tel-img .pass{
    fill: var(--white);
}
.header.open .tel-contact .tel-number{
    grid-area: tel;
    color: var(--white);
    font-size: var(--text-size-32);
}
/*
 * 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);
    min-width: var(--content-min-width);
    max-width: var(--content-max-width);
    display: grid;
    grid-template:
    "....... ....... ....... ......." var(--grid-row-gap-64)
    "....... ....... ....... ......." var(--grid-row-gap-32)
    "company company company company" auto
    "....... ....... ....... ......." var(--footer-gap-24)
    "address address address address" auto
    "....... ....... ....... ......." var(--sns-icon-size)
    "sns     sns     sns     sns    " auto
    "....... ....... ....... ......." var(--sns-icon-size)
    "nav     nav     nav     ......." auto
    "....... ....... ....... ......." var(--grid-row-gap-64)
    "copy    copy    copy    copy   " auto
    "....... ....... ....... ......." var(--grid-row-gap-32)
    /1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
    margin: auto;
}
.footer .grid .company-name{
    grid-area: company;
    font-size: var(--h1-size);
    font-weight: 700;
}
.footer .grid .address{
    grid-area: address;
}
.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: 10px 0 10px 0;
}
.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: center;
}
/*
 * contact-banner
*/
.contact-banner.grid{
    width: var(--content-width);
    min-width: var(--content-min-width);
    max-width: var(--content-max-width);
    display: grid;
    grid-template:
    "banner banner banner banner" auto
    /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  " auto
    "..........." var(--grid-row-gap-16)
    "tel        " auto
    "..........." var(--grid-row-gap-16)
    "contact-btn" auto
    "..........." var(--grid-row-gap-16)
    /100%;
    justify-items: center;
    border: 4px var(--main-color) solid;
}
.contact-banner.grid .banner .main-text{
    grid-area: main-text;
    color: var(--sub-color);
}
.contact-banner.grid .banner .tel{
    grid-area: tel;
    font-size: 28px;
}
.contact-banner.grid .banner .tel .tel-img{
    display: inline-block;
    width: 28px;
}
.contact-banner.grid .banner .contact-btn{
    grid-area: contact-btn;
    width: 260px;
    height: 48px;
    display: grid;
    justify-content: center;
    align-items: center;
    background: var(--main-color);
    font-size: var(--text-size-20);
    position: relative;
    padding-left: 24px;
}
.contact-banner.grid .banner .contact-btn::before{
    content: "";
    width: 24px;
    height: 24px;
    background-image: url("./image/mail.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: calc(50% - 12px);
    left: 52px;
}
/*
 * backgroud-text（装飾の英字）
*/
.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: 80px;
    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: 24px;
    font-weight: 400;
}
/*　
 *first-view
 * ここだけグリッドの構成が特殊（コンテンツ幅は同じになるように設定）
*/
.index .first-view .grid{
    height: 100svh;
    display: grid;
    grid-template:
    ".... ......... ......... .... .... ...." 80px
    ".... text-wrap text-wrap .... .... ...." 440px
    ".... ......... ......... .... .... ...." auto
    ".... news      news      news news ...." var(--index-news-height)
    /minmax(14px, 1fr) minmax(var(--grid-min-width), var(--grid-max-width)) minmax(var(--grid-min-width), var(--grid-max-width)) minmax(var(--grid-min-width), var(--grid-max-width)) minmax(var(--grid-min-width), var(--grid-max-width)) minmax(14px, 1fr);
    column-gap: var(--grid-column-gap);
    margin: auto;
    color: var(--white);
}
.index .first-view .text-wrap{
    grid-area: text-wrap;
    letter-spacing: 2px;
}
.index .first-view .text-wrap .heading{
    font-size: var(--first-view-heading-size);
    font-weight: 700;
    margin-left: 24px;
}
.index .first-view .text-wrap .msg{
    font-size: var(--text-size-18);
    margin-left: 24px;
    line-height: 1;
}
.index .first-view .text-wrap .msg_br{
    display: block;
    margin-left: 8px;
}
.index .first-view .text-wrap .co{
    font-size: var(--text-size-24);
    font-weight: 700;
    text-align: end;
}
.index .first-view .text-wrap .co .subtitle{
    display: none;
}
/*
 *お知らせ
*/
.index .first-view .news{
    grid-area: news;
    display: grid;
    grid-template:
    "....... ....... ....... ......." var(--grid-row-gap-16)
    "heading heading heading heading" calc(var(--news-heading-size) * 0.9)
    "....... ....... ....... ......." var(--grid-row-gap-16)
    "article article article arrow  " auto
    /1fr 1fr 1fr 1fr;
    line-height: 1;
}
.index .first-view .news::before{
    content: "";
    width: 100%;
    border-top: 1px var(--white) solid;
    position: absolute;
    top: calc(100% - var(--index-news-height));
    right: 0;
}
.index .first-view .news::after{
    content: "";
    width: 100%;
    border-top: 1px var(--white) solid;
    position: absolute;
    bottom: 0;
    right: 0;
}
.index .first-view .news .heading{
    grid-area: heading;
    font-size: var(--news-heading-size); 
}
.index .first-view .news .article{
    grid-area: article;
}
.index .first-view .news .article .date{
    display: block;
    font-size: var(--small-text-size);
}
.index .first-view .news .arrow-img{
    grid-area: arrow;
}
.index .first-view .news .arrow-svg{
    width: 60px;
    height: 24px;
    opacity: 1;
    margin: calc(var(--small-text-size) / 2) 0 0 auto;
}
.index .first-view .news .arrow-svg .icon{
    fill: transparent;
    stroke: var(--white);
    stroke-miterlimit: 10;
    stroke-width: 4px;
}
/*
 * 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);
    min-width: var(--content-min-width);
    max-width: var(--content-max-width);
    display: grid;
    grid-template:
    "......... ......... ......... ........." var(--grid-row-gap-64)
    "heading   heading   heading   heading  " auto
    "......... ......... ......... ........." var(--main-text-size)
    "main-text main-text main-text main-text" auto
    "......... ......... ......... ........." var(--grid-row-gap-64)
    /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;
    line-height: 1.8;
}
.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));
    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);
    min-width: var(--content-min-width);
    max-width: var(--content-max-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)
    "splide   splide   splide   splide  " auto
    "........ ........ ........ ........" var(--grid-column-gap)
    "splide-p splide-p splide-p splide-p" auto
    "........ ........ ........ ........" var(--grid-row-gap-32)
    "button   button   button   button  " auto
    "........ ........ ........ ........" var(--grid-row-gap-32)
    "........ ........ ........ ........" var(--grid-row-gap-64)
    /1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
    margin: auto;
}
.index .works .grid .heading{
    grid-area: heading;
}
.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 arrow" auto
    "...... ....." var(--grid-column-gap)
    "after  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: none;
}
.index .splide__pagination{
    grid-area: splide-p;
    position: static;
}
.index .splide__pagination__page.is-active{
    background: var(--main-color);
}
.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{
    grid-area: arrow;
    fill: var(--main-color);
    width: 64px;
    align-self: end;
    filter: opacity(0.6);
}
.index .works .grid .after-img{
    grid-area: after;
    position: relative;
    width: calc(100% - var(--grid-row-gap-16));
}
.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;
    margin-right: var(--grid-row-gap-16);
}
/*
 * 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);
    min-width: var(--content-min-width);
    max-width: var(--content-max-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 roof    roof   " auto
    ".......... .......... ....... ......." var(--grid-column-gap)
    "waterproof waterproof others  others " auto
    ".......... .......... ....... ......." var(--grid-row-gap-32)
    ".......... .......... ....... ......." var(--grid-row-gap-64)
    /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: 24px;
    color: var(--white);
    font-size: var(--text-size-18);
    letter-spacing: 2px;
    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: calc(var(--content-width) + (100% - var(--content-width)) / 2);
    height: calc(100% - var(--grid-row-gap-64));
    background: var(--white);
    position: absolute;
    top: var(--grid-row-gap-64);
    left: 0;
    z-index: -10;
}
.index .contact .grid{
    width: var(--content-width);
    min-width: var(--content-min-width);
    max-width: var(--content-max-width);
    display: grid;
    grid-template:
    ".......... .......... .......... .........." var(--grid-row-gap-64)
    ".......... .......... .......... .........." var(--grid-row-gap-32)
    "heading    heading    heading    heading   " auto
    ".......... .......... .......... .........." var(--form-row-gap-12)
    "additional additional additional additional" auto
    ".......... .......... .......... .........." var(--form-row-gap-32)
    "tel        tel        tel        tel       " auto
    ".......... .......... .......... .........." var(--form-row-gap-32)
    "form       form       form       form      " auto
    ".......... .......... .......... .........." var(--grid-row-gap-32)
    /1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
    margin: auto;
}
.index .contact .grid .heading{
    grid-area: heading;
    justify-self: center;
}
.index .contact .grid .additional{
    grid-area: additional;
    justify-self: center;
    font-size: var(--small-text-size);
}
.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" auto
    "........ ........ ........ ........" var(--contact-tel-gap-8)
    "tel-img  ........ number   number  " auto
    / var(--contact-tel-img-size) var(--contact-tel-gap-8) 1fr 1fr;
}
.index .contact .grid .tel-contact .text{
    grid-area: tel-text;
    justify-self: center;
}
.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(--text-size-24);
}
.index .contact .grid .form{
    grid-area: form;
    display: grid;
    grid-template:
    "additional    additional    additional    additional   " auto
    "............. ............. ............. ............." var(--form-row-gap-24)
    "name-label    name-label    name-label    name-label   " auto
    "............. ............. ............. ............." var(--form-row-gap-8)
    "name          name          name          name         " auto
    "............. ............. ............. ............." var(--form-row-gap-16)
    "mail-label    mail-label    mail-label    mail-label   " auto
    "............. ............. ............. ............." var(--form-row-gap-8)
    "mail          mail          mail          mail         " auto
    "............. ............. ............. ............." var(--form-row-gap-16)
    "tel-label     tel-label     tel-label     tel-label    " auto
    "............. ............. ............. ............." var(--form-row-gap-8)
    "tel           tel           tel           tel          " auto
    "............. ............. ............. ............." var(--form-row-gap-16)
    "inquiry-label inquiry-label inquiry-label inquiry-label" auto
    "............. ............. ............. ............." var(--form-row-gap-8)
    "inquiry       inquiry       inquiry       inquiry      " auto
    "............. ............. ............. ............." var(--form-row-gap-16)
    "privacy-check privacy-check privacy-check privacy-check" auto
    "............. ............. ............. ............." var(--form-row-gap-32)
    "next-button   next-button   next-button   next-button  " auto
    "............. ............. ............. ............." var(--form-row-gap-32)
    /1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
}
.index .contact .grid .form .additional{
    grid-area: additional;
    justify-self: start;
    color: var(--red);
}
.index .contact .grid .form .name-label{
    grid-area: name-label;
}
.index .contact .grid .form .name{
    grid-area: name;
    width: calc(100% - var(--form-margin));
    height: var(--form-input-height);
}
.index .contact .grid .form .mail-label{
    grid-area: mail-label;
}
.index .contact .grid .form .mail{
    grid-area: mail;
    width: calc(100% - var(--form-margin));
    height: var(--form-input-height);
}
.index .contact .grid .form .tel-label{
    grid-area: tel-label;
}
.index .contact .grid .form .tel{
    grid-area: tel;
    width: calc(100% - var(--form-margin));
    height: var(--form-input-height);
}
.index .contact .grid .form .inquiry-label{
    grid-area: inquiry-label;
}
.index .contact .grid .form .inquiry{
    grid-area: inquiry;
    width: calc(100% - var(--form-margin));
    height: auto;
    min-height: var(--form-textare-min-height);
}
.index .contact .grid .form .privacy-policy-checkbox{
    grid-area: privacy-check;
}
.index .contact .grid .form .privacy-policy-checkbox .checkbox{
    margin-right: 8px;
}
.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/sp-about-heading.jpg');
    background-position: center;
    background-size: cover;
}
/*　
 * ごあいさつ
*/
.about .message .grid{
    width: var(--content-width);
    min-width: var(--content-min-width);
    max-width: var(--content-max-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)
    "main-text main-text main-text main-text" auto
    "......... ......... ......... ........." var(--grid-row-gap-64)
    /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);
    min-width: var(--content-min-width);
    max-width: var(--content-max-width);
    display: grid;
    grid-template:
    "....... ....... ....... ......." var(--grid-row-gap-64)
    "heading heading heading heading " auto
    "....... ....... ....... ......." var(--grid-row-gap-32)
    "company company company company" auto
    "....... ....... ....... ......." var(--grid-row-gap-64)
    /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   h-company-name  " auto
    "................ ................ ................ ................" var(--overview-gap-8)
    "company-name     company-name     company-name     company-name    " auto
    "................ ................ ................ ................" var(--overview-gap-16)
    "h-representative h-representative h-representative h-representative" auto
    "................ ................ ................ ................" var(--overview-gap-8)
    "representative   representative   representative   representative  " auto
    "................ ................ ................ ................" var(--overview-gap-16)
    "h-address        h-address        h-address        h-address       " auto
    "................ ................ ................ ................" var(--overview-gap-8)
    "address          address          address          address         " auto
    "................ ................ ................ ................" var(--overview-gap-16)
    "h-tel            h-tel            h-tel            h-tel           " auto
    "................ ................ ................ ................" var(--overview-gap-8)
    "tel              tel              tel              tel             " auto
    "................ ................ ................ ................" var(--overview-gap-16)
    "h-founding       h-founding       h-founding       h-founding      " auto
    "................ ................ ................ ................" var(--overview-gap-8)
    "founding         founding         founding         founding        " auto
    "................ ................ ................ ................" var(--overview-gap-16)
    "h-history        h-history        h-history        h-history       " auto
    "................ ................ ................ ................" var(--overview-gap-8)
    "history          history          history          history         " auto
    "................ ................ ................ ................" var(--overview-gap-16)
    "h-service        h-service        h-service        h-service       " auto
    "................ ................ ................ ................" var(--overview-gap-8)
    "service          service          service          service         " auto
    "................ ................ ................ ................" var(--overview-gap-16)
    "h-work-time      h-work-time      h-work-time      h-work-time     " auto
    "................ ................ ................ ................" var(--overview-gap-8)
    "work-time        work-time        work-time        work-time       " auto
    "................ ................ ................ ................" var(--overview-gap-16)
    "h-permit         h-permit         h-permit         h-permit        " auto
    "................ ................ ................ ................" var(--overview-gap-8)
    "permit           permit           permit           permit          " auto
    "................ ................ ................ ................" var(--overview-gap-16)
    "h-qualification  h-qualification  h-qualification  h-qualification " auto
    "................ ................ ................ ................" var(--overview-gap-8)
    "qualification-1  qualification-1  qualification-1  qualification-1 " auto
    "................ ................ ................ ................" var(--overview-gap-8)
    "qualification-2  qualification-2  qualification-2  qualification-2 " auto
    "................ ................ ................ ................" var(--overview-gap-8)
    "qualification-3  qualification-3  qualification-3  qualification-3 " auto
    "................ ................ ................ ................" var(--overview-gap-8)
    "qualification-4  qualification-4  qualification-4  qualification-4 " auto
    "................ ................ ................ ................" var(--grid-row-gap-16)
    /1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
}
.about .company-overview .grid .company .list-heading{
    padding-bottom: 4px;
    color: var(--sub-color);
    border-bottom: 1px 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: 4px;
}
.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: 8px;
}
.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: 4px;
}
.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 .supplement-regarding-inquiries{
    width: var(--content-width);
    min-width: var(--content-min-width);
    max-width: var(--content-max-width);
    display: grid;
    grid-template:
    "customer" auto
    "........" var(--grid-row-gap-32)
    "vendor  " auto 
    /1fr;
    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.7);
    left: var(--supplement-padding-6);
    padding: 0 var(--supplement-padding-6) 0 var(--supplement-padding-3);
}
.about .supplement-regarding-inquiries .main-text{
    display: 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: 2px solid var(--main-color);
    margin-top: calc(var(--h2-size) * 0.7);
}
.about .supplement-regarding-inquiries .vendor{
    grid-area: vendor;
    position: relative;
    border: 2px solid var(--main-color);
    margin-top: calc(var(--h2-size) * 0.7);
}
/*　
 *協力会社
*/
.about .business-partner .grid{
    width: var(--content-width);
    min-width: var(--content-min-width);
    max-width: var(--content-max-width);
    display: grid;
    grid-template:
    "partner partner partner partner" auto
    /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: 8px 0 8px 0;
}
/*　
 *アクセス
*/
.about .access .grid{
    width: var(--content-width);
    min-width: var(--content-min-width);
    max-width: var(--content-max-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)
    "address address address address" auto
    "nearest nearest nearest nearest" auto
    "....... ....... ....... ......." var(--grid-row-gap-16)
    "map     map     map     map    " auto
    "....... ....... ....... ......." var(--grid-row-gap-32)
    "....... ....... ....... ......." var(--grid-row-gap-64)
    /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: block;
    margin-bottom: var(--post-code-gap);
}
.about .access .grid .nearest{
    grid-area: nearest;
}
.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/sp-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(--before-size);
    font-weight: 700;
    line-height: 0.75
}
.service .arrow-img{
    grid-area: arrow;
    fill: var(--main-color);
    width: 64px;
    align-self: end;
    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: 0;
}
.service .outer-wall .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)
    "heading       heading       heading       ............." var(--service-grid-heading-height)
    "............. ............. ............. ............." var(--service-grid-row-gap-32)
    "check-heading check-heading check-heading check-heading" auto
    "............. ............. ............. ............." var(--grid-row-gap-16)
    "checklist     checklist     checklist     checklist    " auto
    "............. ............. ............. ............." var(--service-grid-row-gap-8)
    "msg           msg           msg           msg          " auto
    "............. ............. ............. ............." var(--service-grid-row-gap-32)
    "works-heading works-heading works-heading works-heading" auto
    "............. ............. ............. ............." var(--service-grid-row-gap-16)
    "before-img    before-img    arrow-img     ............." auto
    "............. ............. ............. ............." var(--service-grid-row-gap-16)
    "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;
    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(--text-size-20);
    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;
    margin-bottom: var(--service-margin-8);
    padding-left: var(--service-checklist-padding);
    border-bottom: 2px 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: 16px;
    height: 16px;
    /*border:2px var(--sub-color) solid;*/
    position: absolute;
    top: 2px;
    left: 2px;
    /*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-weight: 700;
}
.service .outer-wall .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 .outer-wall .grid .before-img{
    grid-area: before-img;
    position: relative;
}
.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: 0;
}
.service .roof .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)
    "heading       heading       heading       ............." var(--service-grid-heading-height)
    "............. ............. ............. ............." var(--service-grid-row-gap-32)
    "check-heading check-heading check-heading check-heading" auto
    "............. ............. ............. ............." var(--grid-row-gap-16)
    "checklist     checklist     checklist     checklist    " auto
    "............. ............. ............. ............." var(--service-grid-row-gap-8)
    "msg           msg           msg           msg          " auto
    "............. ............. ............. ............." var(--service-grid-row-gap-32)
    "works-heading works-heading works-heading works-heading" auto
    "............. ............. ............. ............." var(--service-grid-row-gap-16)
    "before-img    before-img    arrow-img     ............." auto
    "............. ............. ............. ............." var(--service-grid-row-gap-16)
    "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;
    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(--text-size-20);
    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;
    margin-bottom: var(--service-margin-8);
    padding-left: var(--service-checklist-padding);
    border-bottom: 2px 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: 16px;
    height: 16px;
    position: absolute;
    top: 2px;
    left: 2px;
    /*left: calc(var(--service-checklist-padding) * -1);*/
    object-fit: contain;
}
.service .roof .grid .msg{
    grid-area: msg;
    line-height: var(--line-height-160);
    font-weight: 700;
}
.service .roof .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 .roof .grid .before-img{
    grid-area: before-img;
    position: relative;
}
.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: 0;
}
.service .waterproof .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)
    "heading       heading       heading       ............." var(--service-grid-heading-height)
    "............. ............. ............. ............." var(--service-grid-row-gap-32)
    "check-heading check-heading check-heading check-heading" auto
    "............. ............. ............. ............." var(--grid-row-gap-16)
    "checklist     checklist     checklist     checklist    " auto
    "............. ............. ............. ............." var(--service-grid-row-gap-8)
    "msg           msg           msg           msg          " auto
    "............. ............. ............. ............." var(--service-grid-row-gap-32)
    "works-heading works-heading works-heading works-heading" auto
    "............. ............. ............. ............." var(--service-grid-row-gap-16)
    "before-img    before-img    arrow-img     ............." auto
    "............. ............. ............. ............." var(--service-grid-row-gap-16)
    "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;
    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(--text-size-20);
    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;
    margin-bottom: var(--service-margin-8);
    padding-left: var(--service-checklist-padding);
    border-bottom: 2px 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: 16px;
    height: 16px;
    position: absolute;
    top: 2px;
    left: 2px;
    /*left: calc(var(--service-checklist-padding) * -1);*/
    object-fit: contain;
}
.service .waterproof .grid .msg{
    grid-area: msg;
    line-height: var(--line-height-160);
    font-weight: 700;
}
.service .waterproof .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 .waterproof .grid .before-img{
    grid-area: before-img;
    position: relative;
}
.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: 0;
}
.service .others .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)
    "heading       heading       heading       ............." var(--service-grid-heading-height)
    "............. ............. ............. ............." var(--service-grid-row-gap-32)
    "msg           msg           msg           msg          " auto
    "............. ............. ............. ............." var(--service-grid-row-gap-16)
    "steel-frame   steel-frame   vehicle       vehicle      " auto
    "............. ............. ............. ............." var(--service-grid-row-gap-16)
    "inner-wall    inner-wall    public-works  public-works " auto
    "............. ............. ............. ............." var(--service-grid-row-gap-32)
    "works-heading works-heading works-heading works-heading" auto
    "............. ............. ............. ............." var(--service-grid-row-gap-16)
    "before-img    before-img    arrow-img     ............." auto
    "............. ............. ............. ............." var(--service-grid-row-gap-16)
    "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;
    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(--main-text-size);
}
.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/sp-beginner-heading.jpg');
    background-position: center;
    background-size: cover;
}
/*　
 * チェックリスト
*/
.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  " auto
    "......... ......... ......... ........." var(--beginner-grid-row-gap-32)
    "checklist checklist checklist checklist" auto
    "......... ......... ......... ........." var(--grid-row-gap-64)
    /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;
    margin-bottom: var(--service-margin-8);
    padding-left: var(--service-checklist-padding);
    border-bottom: 2px 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: 16px;
    height: 16px;
    position: absolute;
    top: 2px;
    left: 2px;
    /*left: calc(var(--service-checklist-padding) * -1);*/
    object-fit: contain;
}
/*
 * ご依頼の流れ
*/
.beginner .request-flow .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" auto
    "....... ....... ....... ......." var(--beginner-grid-row-gap-32)
    "flow    flow    flow    flow   " auto
    "....... ....... ....... ......." var(--beginner-grid-row-gap-32)
    "msg     msg     msg     msg    " auto
    "....... ....... ....... ......." var(--grid-row-gap-64)
    /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" auto
    "......" var(--beginner-grid-row-gap-56)
    "flow-2" auto
    "......" var(--beginner-grid-row-gap-56)
    "flow-3" auto
    "......" var(--beginner-grid-row-gap-56)
    "flow-4" auto
    "......" var(--beginner-grid-row-gap-56)
    "flow-5" auto
    "......" var(--beginner-grid-row-gap-56)
    "flow-6" auto
    "......" var(--beginner-grid-row-gap-56)
    "flow-7" auto
    "......" var(--beginner-grid-row-gap-56)
    "flow-8" auto
    "......" var(--beginner-grid-row-gap-56)
    "flow-9" auto
    "......" var(--beginner-grid-row-gap-56)
    "flow-10" auto
    "......" var(--beginner-grid-row-gap-56)
    "flow-11" auto
    "......" var(--beginner-grid-row-gap-56)
    "flow-12" auto
    "......" var(--beginner-grid-row-gap-56)
    "flow-13" auto
    "......" var(--beginner-grid-row-gap-56)
    "flow-14" auto
    /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-18);
    border-bottom: 2px var(--main-color) solid;
    position: relative;
}
.beginner .request-flow .grid .flow .list::before{
    font-size: var(--text-size-32);
    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{
    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: 4px var(--main-color) solid;
}
/*
 * よくある質問
*/
.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     " auto
    "............ ............ ............ ............" var(--beginner-grid-row-gap-32)
    "cost-heading cost-heading cost-heading cost-heading" auto
    "............ ............ ............ ............" var(--beginner-grid-row-gap-32)
    "cost         cost         cost         cost        " auto
    "............ ............ ............ ............" var(--beginner-grid-row-gap-32)
    "cons-heading cons-heading cons-heading cons-heading" auto
    "............ ............ ............ ............" var(--beginner-grid-row-gap-32)
    "cons         cons         cons         cons        " auto
    "............ ............ ............ ............" var(--grid-row-gap-32)
    "............ ............ ............ ............" var(--grid-row-gap-64)
    /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(--text-size-24);
    font-weight: 400;
}
.beginner .question-wrap .grid .cost-heading{
    grid-area: cost-heading;
    font-size: var(--text-size-20);
    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-weight: 600;
    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-24);
    color: var(--main-color);
    position: absolute;
    bottom: 0;
    left: var(--beginner-question-padding-8);
}
.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-20);
    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-weight: 600;
    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-24);
    color: var(--main-color);
    position: absolute;
    bottom: 0;
    left: var(--beginner-question-padding-8);
}
.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/sp-contact-heading.jpg');
    background-position: center;
    background-size: cover;
}
/*　
 * form
*/
.contact .contact-form .grid{
    width: var(--content-width);
    min-width: var(--content-min-width);
    max-width: var(--content-max-width);
    display: grid;
    grid-template:
    ".......... .......... .......... .........." var(--grid-row-gap-64)
    ".......... .......... .......... .........." var(--grid-row-gap-32)
    "heading    heading    heading    heading   " auto
    ".......... .......... .......... .........." var(--form-row-gap-12)
    "additional additional additional additional" auto
    ".......... .......... .......... .........." var(--form-row-gap-40)
    "form       form       form       form      " auto
    ".......... .......... .......... .........." var(--grid-row-gap-32)
    /1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
    margin: auto;
}
.contact .contact-form .grid .heading{
    grid-area: heading;
    justify-self: center;
}
.contact .contact-form .grid .additional{
    grid-area: additional;
    justify-self: center;
    font-size: var(--small-text-size);
}
.contact .contact-form .grid .form{
    grid-area: form;
    display: grid;
    grid-template:
    "additional    additional    additional    additional   " auto
    "............. ............. ............. ............." var(--form-row-gap-24)
    "name-label    name-label    name-label    name-label   " auto
    "............. ............. ............. ............." var(--form-row-gap-8)
    "name          name          name          name         " auto
    "............. ............. ............. ............." var(--form-row-gap-16)
    "mail-label    mail-label    mail-label    mail-label   " auto
    "............. ............. ............. ............." var(--form-row-gap-8)
    "mail          mail          mail          mail         " auto
    "............. ............. ............. ............." var(--form-row-gap-16)
    "tel-label     tel-label     tel-label     tel-label    " auto
    "............. ............. ............. ............." var(--form-row-gap-8)
    "tel           tel           tel           tel          " auto
    "............. ............. ............. ............." var(--form-row-gap-16)
    "inquiry-label inquiry-label inquiry-label inquiry-label" auto
    "............. ............. ............. ............." var(--form-row-gap-8)
    "inquiry       inquiry       inquiry       inquiry      " auto
    "............. ............. ............. ............." var(--form-row-gap-16)
    "privacy-check privacy-check privacy-check privacy-check" auto
    "............. ............. ............. ............." var(--form-row-gap-32)
    "next-button   next-button   next-button   next-button  " auto
    "............. ............. ............. ............." var(--form-row-gap-32)
    /1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
}
.contact .contact-form .grid .form .additional{
    grid-area: additional;
    justify-self: start;
    color: var(--red);
}
.contact .contact-form .grid .form .name-label{
    grid-area: name-label;
}
.contact .contact-form .grid .form .name{
    grid-area: name;
    width: calc(100% - var(--form-margin));
    height: var(--form-input-height);
}
.contact .contact-form .grid .form .mail-label{
    grid-area: mail-label;
}
.contact .contact-form .grid .form .mail{
    grid-area: mail;
    width: calc(100% - var(--form-margin));
    height: var(--form-input-height);
}
.contact .contact-form .grid .form .tel-label{
    grid-area: tel-label;
}
.contact .contact-form .grid .form .tel{
    grid-area: tel;
    width: calc(100% - var(--form-margin));
    height: var(--form-input-height);
}
.contact .contact-form .grid .form .inquiry-label{
    grid-area: inquiry-label;
}
.contact .contact-form .grid .form .inquiry{
    grid-area: inquiry;
    width: calc(100% - var(--form-margin));
    height: auto;
    min-height: var(--form-textare-min-height);
}
.contact .contact-form .grid .form .privacy-policy-checkbox{
    grid-area: privacy-check;
}
.contact .contact-form .grid .form .privacy-policy-checkbox .checkbox{
    margin-right: 8px;
}
.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;
    font-size: var(--main-text-size);
    color: var(--text-color);
    font-weight: 400;
    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   " auto
    "............. ............. ............. ............." var(--form-row-gap-24)
    "name-label    name-label    name-label    name-label   " auto
    "............. ............. ............. ............." var(--form-row-gap-8)
    "name          name          name          name         " auto
    "............. ............. ............. ............." var(--form-row-gap-16)
    "mail-label    mail-label    mail-label    mail-label   " auto
    "............. ............. ............. ............." var(--form-row-gap-8)
    "mail          mail          mail          mail         " auto
    "............. ............. ............. ............." var(--form-row-gap-16)
    "tel-label     tel-label     tel-label     tel-label    " auto
    "............. ............. ............. ............." var(--form-row-gap-8)
    "tel           tel           tel           tel          " auto
    "............. ............. ............. ............." var(--form-row-gap-16)
    "inquiry-label inquiry-label inquiry-label inquiry-label" auto
    "............. ............. ............. ............." var(--form-row-gap-8)
    "inquiry       inquiry       inquiry       inquiry      " auto
    "............. ............. ............. ............." var(--form-row-gap-32)
    "prev-button   prev-button   prev-button   prev-button  " auto
    "............. ............. ............. ............." var(--form-row-gap-16)
    "next-button   next-button   next-button   next-button  " auto
    "............. ............. ............. ............." var(--form-row-gap-32)
    /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);
    color: var(--text-color);
    font-weight: 400;
}
.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/sp-contact-heading.jpg');
    background-position: center;
    background-size: cover;
}
.contact-submit .contents .grid{
    width: var(--content-width);
    min-width: var(--content-min-width);
    max-width: var(--content-max-width);
    display: grid;
    grid-template:
    ".......... .......... .......... .........." var(--grid-row-gap-64)
    ".......... .......... .......... .........." var(--grid-row-gap-32)
    "heading    heading    heading    heading   " auto
    ".......... .......... .......... .........." var(--grid-column-gap)
    "main-text  main-text  main-text  main-text " auto
    ".......... .......... .......... .........." var(--grid-column-gap)
    "annotation annotation annotation annotation" auto
    ".......... .......... .......... .........." var(--form-row-gap-40)
    "back-btn   back-btn   back-btn   back-btn  " auto
    ".......... .......... .......... .........." var(--grid-row-gap-64)
    /1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
    margin: auto;
    line-height: var(--line-height-160);
}
.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;
    font-size: var(--main-text-size);
    color: var(--text-color);
    font-weight: 400;
}
/*
 *--------------------------------------------------------
 * works.php
 * > 施工事例
 * > 施工事例一覧
 *--------------------------------------------------------
*/
/*　
 * 施工事例
*/
.works .page-head{
    background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)),
    url('./image/sp-works-heading.jpg');
    background-position: center;
    background-size: cover;
}
/*　
 * 施工事例一覧
*/
.works .works-contents .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   " auto
    ".......... .......... .......... .........." var(--grid-row-gap-32)
    "category   category   category   category  " auto
    ".......... .......... .......... .........." var(--grid-row-gap-32)
    "work-lists work-lists work-lists work-lists" auto
    ".......... .......... .......... .........." var(--grid-row-gap-32)
    "pagination pagination pagination pagination" auto
    ".......... .......... .......... .........." var(--grid-row-gap-64)
    /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     " auto
    "............ ............ ............ ............" var(--grid-column-gap)
    "outer-wall   outer-wall   roof         roof        " auto
    "............ ............ ............ ............" var(--grid-column-gap)
    "waterproof   waterproof   others       others      " auto
    "............ ............ ............ ............" var(--grid-column-gap)
    "all-category all-category all-category all-category" auto
    / 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-20);
    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: 48px;
    background: var(--no-active-color);
    font-size: var(--main-text-size);
    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;
}
.works .works-contents .grid .work-lists .work-example{
    position: relative;
    display: block;
    margin-bottom: var(--grid-row-gap-32);
    color: var(--text-color);
    text-decoration: none;
}
.works .works-contents .grid .work-lists .work-example::before{
    content: url(./image/arrow-img-1.svg);
    display: block;
    width: 160px;
    height: 60px;
    position: absolute;
    right: 0;
    bottom: calc(var(--works-work-lists-category-height) + var(--works-work-lists-margin));
}
.works .works-contents .grid .work-lists .work-example::after{
    content: "詳しくはコチラ";
    display: inline-block;
    color: var(--white);
    font-size: var(--small-text-size);
    width: auto;
    height: var(--small-text-size);
    position: absolute;
    right: 50px;
    bottom: calc(var(--works-work-lists-category-height) + var(--works-work-lists-margin) + 12px);
}
.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);
}
.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;
    display: flex;
    flex-wrap: wrap;
    gap: var(--works-pagination-row-gap);
    margin:auto;
    justify-content: 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.php
 * > 施工事例
 *--------------------------------------------------------
*/
/*　
 * 施工事例
*/
.work-example .page-head{
    background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)),
    url('./image/sp-works-heading.jpg');
    background-position: center;
    background-size: cover;
}
.work-example .work-example-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)
    "before-img  before-img  before-img  before-img " auto
    "........... ........... ........... ..........." var(--grid-row-gap-32)
    "after-img   after-img   after-img   after-img  " auto
    "........... ........... ........... ..........." var(--grid-row-gap-32)
    "explanation explanation explanation explanation" auto
    "........... ........... ........... ..........." var(--grid-row-gap-32)
    "work-img    work-img    work-img    work-img   " auto
    "........... ........... ........... ..........." var(--grid-row-gap-16)
    "tmb-wrap    tmb-wrap    tmb-wrap    tmb-wrap   " auto
    "........... ........... ........... ..........." var(--grid-row-gap-64)
    "back-btn    back-btn    back-btn    back-btn   " auto
    "........... ........... ........... ..........." var(--grid-row-gap-16)
    "prev-btn    prev-btn    next-btn    next-btn   " auto
    "........... ........... ........... ..........." var(--grid-row-gap-64)
    /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       " auto
    "........... ........... ........... ..........." var(--work-example-explanation-row-gap-8)
    "area-cont   area-cont   area-cont   area-cont  " auto
    "........... ........... ........... ..........." var(--work-example-explanation-row-gap-16)
    "period      period      period      period     " auto
    "........... ........... ........... ..........." var(--work-example-explanation-row-gap-8)
    "period-cont period-cont period-cont period-cont" auto
    "........... ........... ........... ..........." var(--work-example-explanation-row-gap-16)
    "category    category    category    category   " auto
    "........... ........... ........... ..........." var(--work-example-explanation-row-gap-8)
    "cat-cont    cat-cont    cat-cont    cat-cont   " auto
    / 1fr 1fr 1fr 1fr;
    column-gap: var(--grid-column-gap);
}
.work-example .work-example-grid .explanation .work-title{
    color: var(--sub-color);
    border-bottom: 1px var(--sub-color) solid;
}
.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: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 .category{
    margin-right: 8px;
}
.work-example .work-example-grid .explanation .work-contents .category:last-child{
    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(4, 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: 56px;
    display: grid;
    justify-items: center;
    align-items: center;
    background: var(--main-color);
}
.work-example .work-example-grid .work-prev-button{
    grid-area: prev-btn;
    width: 100%;
    height: 56px;
    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);
}
.work-example .work-example-grid .work-next-button{
    grid-area: next-btn;
    width: 100%;
    height: 56px;
    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);
}
.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/sp-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-18);
    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/sp-about-heading.jpg');
    background-position: center;
    background-size: cover;
}
.news .news-list{
    width: var(--content-width);
    min-width: var(--content-min-width);
    max-width: var(--content-max-width);
    margin: var(--grid-row-gap-64) auto;
    display: grid;
    row-gap: var(--grid-row-gap-32);
}
.news .news-list .article .date{
    font-size: var(--small-text-size);
}
.news .news-list .article .title{
    line-height: var(--line-height-160);
    border-bottom: 1px var(--main-color) solid;
}
.news .pagination{
    display: flex;
    flex-wrap: wrap;
    width: var(--content-width);
    min-width: var(--content-min-width);
    max-width: var(--content-max-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);
}