@charset "UTF-8";

/* ================================================
===================================================
===================================================
Base
===================================================
===================================================
================================================ */
body{-webkit-text-size-adjust: 100%;color: #292929;font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;padding: 0;height: auto;font-size: 16px;}
body * {
  box-sizing : border-box;
}
/*++++++++++++++++++++++++++
	Link : Img
++++++++++++++++++++++++++*/
/*  PC  */
@media screen and (min-width: 641px){a:hover img {filter: alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;}a:hover{filter: alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;}
/* hover */.hover,a.hover{text-decoration:none ;-webkit-transition: background-color 0.4s linear;-moz-transition: background-color 0.4s linear;-o-transition: background-color 0.4s linear;transition: background-color 0.4s linear;filter: alpha(opacity=100);-moz-opacity:1;opacity:1;}}
dl,dt,dd,ul,ol,li{margin: 0px;padding: 0px;list-style:none;}
/*++++++++++++++++++++++++++
	汎用クラス
++++++++++++++++++++++++++*/
td {text-align: left;}
th {font-weight: normal;text-align: center;}
section {clear: both;margin: 0;padding: 0;}
/* ================================================
===================================================
===================================================
Base end
===================================================
===================================================
================================================ */

/* ================================================
===================================================
===================================================
reset
===================================================
===================================================
================================================ */
/* 
	html5doctor.com Reset Stylesheet
	v1.6.1
	Last Updated: 2010-09-17
	Author: Richard Clark - http://richclarkdesign.com 
	Twitter: @rich_clark
*/
 
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tfoot, thead, 
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;margin: 0;font-style: normal;}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {display:block;}
nav ul {list-style:none;padding:0 ;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:'';content:none;}
.clear_both {clear: both;}
a {margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
h1, h2, h3, h4, h5, h6 {font-size:100%;font-weight:normal;}
address{font-style:normal ;}
/* ================================================
===================================================
===================================================
reset end
===================================================
===================================================
================================================ */

/*++++++++++++++++++++++++++
	ボタン
++++++++++++++++++++++++++*/

a{text-decoration:none; color:#0F1219;}
a:link{text-decoration:none; color:#0F1219;}
a:visited{text-decoration:none; color:#0F1219;}
a:hover{text-decoration:none; color:#0F1219;}
a:active {text-decoration:none; color:#0F1219;}

/*++++++++++++++++++++++++++
共通
++++++++++++++++++++++++++*/
.wrapper {
    font-family: "Noto Serif JP", serif, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "游ゴシック", "Yu Gothic", "メイリオ", "sans-serif";
    max-width: 1200px;
    width: 90%;
    margin: auto;
}
body{
    background-color: #fff;
    color: #0F1219;
    font-size: clamp(15px, 1.7vw, 16px);
    font-weight:normal;
    line-height: 1.7em;
    position: relative;
    overflow-x: hidden;
}
img{
    vertical-align: bottom;
    max-width: 100%;
    height: auto;
}
body a:hover{
    opacity: 1;
}
body a:hover img{
    opacity: 1;
}
section{
    overflow: hidden;
}
.kkg{
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "游ゴシック", "Yu Gothic", "メイリオ", "sans-serif";
}
.en{
    font-family: "Cormorant Garamond", "Noto Serif JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "游ゴシック", "Yu Gothic", "メイリオ", "sans-serif";
}
.sp{
    display: none;
}
.pc{
    display:block;
}
.common-btn {
    & a {
        display: inline-flex;
        align-items: center;
        position: relative;
        text-decoration: none;
        color: #3d3d3d;
        font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
        padding-right: 42px;
        transition: color .3s;
    }
    & a:hover{
        color: #B76E4C;
    }
    & .btn-text {
        font-size: 15px;
        font-weight: 500;
        line-height: 1;
    }
    & a::before {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%) scale(1);
        width: 32px;
        height: 32px;
        background-color: #B76E4C;
        border-radius: 50%;
        transition: transform 0.2s ease;
    }
    & a:hover::before {
        transform: translateY(-50%) scale(1.3);
    }
    & a::after {
        content: "";
        position: absolute;
        right: 11px;
        top: 50%;
        transform: translateY(-50%);
        width: 10px;
        height: 1px;
        background-color: #ffffff;
        pointer-events: none;
    }
    & .btn-text::after {
        content: "";
        position: absolute;
        right: 11px;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        width: 5px;
        height: 5px;
        border-top: 1px solid #ffffff;
        border-right: 1px solid #ffffff;
        pointer-events: none;
    }
}
@media only screen and (max-width: 780px) {
.sp{
     display: block;
}
.pc{
     display: none;
}
}


/*++++++++++++++++++++++++++
ヘッダー
++++++++++++++++++++++++++*/
header{
    position: fixed;
    z-index: 1000;
    top: 0px;
    width: 100%;
    font-family: "Noto Serif JP", serif, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "游ゴシック", "Yu Gothic", "メイリオ", "sans-serif";
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    height: 80px;
    & .menu-conts .menu-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding-top: 20px;
    }
    & .menu-conts .menu-box .left{
        margin-left: 30px;
        position: relative;
        z-index: 10;
    }
    & .menu-conts .menu-box .left figure{
        width: 280px;
    }
    & .menu-conts .menu-box .right{
        margin-right: 80px;
    }
    & .menu-conts .menu-box .menu-link > *{
        display: inline-block;
        font-size: 0;
        margin-right: 30px;
    }
    & .menu-conts .menu-box .menu-link h2{
        font-size: 16px;
        font-weight: 600;
        transition: color .3s;
    }
    & .menu-conts .menu-box .menu-link a:hover h2{
        color: #B76E4C;
    }
}
@media only screen and (max-width: 1120px) {
    header{
        & .menu-conts .menu-box .right{
            display: none;
        }
    }
}
@media only screen and (max-width: 780px) {
    header{
        height: 60px;
        & .menu-conts .menu-box{
            padding-top: 15px;
        }
        & .menu-conts .menu-box .left{
            margin-left: 15px;
        }
        & .menu-conts .menu-box .left figure{
            width: 210px;
        }
    }
}
/* ==========================================
   スクロール連動フェードイン（共通設定）
========================================== */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.fade-in-up.is-active {
    opacity: 1;
    transform: translateY(0);
}
/*++++++++++++++++++++++++++
メインビジュアル
++++++++++++++++++++++++++*/
#mainvisual{
    font-family: "Noto Serif JP", serif, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "游ゴシック", "Yu Gothic", "メイリオ", "sans-serif";
    padding-bottom: 250px;
    position: relative;
    z-index: -2;
    &::before{
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-image: linear-gradient(0deg, #000000cc, #00000026 50% 100%);
    }
    & .fixed-blk{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
    & .slide-container {
        position: relative;
        width: 100%;
        height: 100%;
    }
    & .slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 1.5s ease;
        z-index: 1;
        overflow: hidden;
    }
    & .slide.prev {
        opacity: 1;
        z-index: 2;
    }
    & .slide.active {
        opacity: 1;
        z-index: 3;
        transition: opacity 1.5s ease;
    }
    & .slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        vertical-align: top;
        transform: scale(1);
        will-change: transform;
    }
    & .slide.active img,
    & .slide.prev img {
        animation: zoomUp 6.5s linear forwards;
    }
    & .title{
        position: relative;
        z-index: 2;
    }
    & .title figure{
        width: 250px;
        margin: auto;
        padding-top: calc(50vh - 150px);
    }
    & .title figure img{
        filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.55));
    }
    & .about-conts{
        margin-top: 450px;
        position: relative;
        z-index: 2;
    }
    & .about-conts .flx-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    & .about-conts .flx-box .left{
        width: 250px;
    }
    & .about-conts .flx-box .right{
        width: 450px;
        margin-left: 70px;
    }
    & .about-conts .flx-box .left figure img{
        filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.55));
    }
    & .about-conts .flx-box .txt-box h6{
        font-size: clamp(23px, 3vw, 28px);
        font-weight: 500;
        line-height: 2em;
        letter-spacing: 0.25em;
        color: #fff;
        filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.55));
        margin-bottom: 25px;
    }
    & .about-conts .flx-box .txt-box p{
        font-size: clamp(15px, 1.7vw, 16px);
        line-height: 2.4em;
        letter-spacing: 0.05em;
        color: #fff;
        filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.55));
    }
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
@media only screen and (max-width: 780px) {
    #mainvisual{
        & .title figure{
            width: 200px;
            margin: auto;
            padding-top: calc(50dvh - 150px);
        }
        & .about-conts .flx-box .left{
            max-width: 260px;
            width: 60%;
            margin-bottom: clamp(40px, 9vw, 50px);
        }
        & .about-conts .flx-box .right{
            width: 100%;
            margin-left: 0;
        }
        & .about-conts .flx-box .txt-box h6{
            text-align: center;
        }
        & .about-conts .flx-box .txt-box p{
            text-align: center;
        }
    }
}

.float-works{
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 10;
    & .circle{
        position: relative;
        width: 100px;
        height: 100px;
        border-radius: 1000px;
        background-color: #B76E4C;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    & .circle .txt-blk{
        font-family: "Noto Serif JP", serif, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "游ゴシック", "Yu Gothic", "メイリオ", "sans-serif";
        font-size: 16px;
        font-weight: 600;
        line-height: 1.7em;
        letter-spacing: 0.05em;
        color: #fff;
    }
    & .circle .spinimg{
        position: absolute;
        top: -15px;
        left: -15px;
        width: 130px;
    }
    & .circle .spinimg img{
        animation: toSpin 20s linear infinite;
    }
}
@keyframes toSpin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media only screen and (max-width: 780px) {
    .float-works{
        bottom: 35px;
        right: 35px;
        & .circle{
            width: 90px;
            height: 90px;
        }
        & .circle .txt-blk{
            font-size: 14px;
            line-height: 1.3em;
            letter-spacing: 0.01em;
        }
        & .circle .spinimg{
            top: -12px;
            left: -11px;
            width: 114px;
        }
    }
}

/*++++++++++++++++++++++++++
service
++++++++++++++++++++++++++*/
hgroup{
    position: relative;
    margin-bottom: clamp(40px, 7vw, 60px);
    & h2{
        font-size: clamp(24px, 3.2vw, 28px);
        font-weight: 500;
        line-height: 1.6em;
        letter-spacing: 0.03em;
        position: relative;
        z-index: 2;
    }
    & h3{
        position: absolute;
        bottom: 0;
        left: -3%;
        z-index: 0;
        font-size: clamp(100px, 12vw, 128px);
        font-weight: 500;
        line-height: 1em;
        color: #F3F3F4;
    }
}

#service{
    padding: clamp(90px, 13vw, 130px) 0;
    background-color: #fff;
    & .flx-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: end;
    }
    & .flx-box .left{
        width: 50%;
    }
    & .flx-box .right{
        width: 46%;
    }
    & .flx-box .left figure img{
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
    & .flx-box .right p{
        line-height: 2.5em;
        margin-bottom: clamp(30px, 5vw, 50px);
    }
}
@media only screen and (max-width: 780px) {
    #service{
        padding: clamp(140px, 17vw, 150px) 0 clamp(90px, 13vw, 130px);
        & .flx-box{
            flex-direction: column-reverse;
        }
        & .flx-box .left{
            width: 100%;
        }
        & .flx-box .right{
            width: 100%;
            margin-bottom: 40px;
        }
    }
}

/*++++++++++++++++++++++++++
works
++++++++++++++++++++++++++*/
#works{
    padding: clamp(90px, 13vw, 130px) 0;
    background-color: #fff;
    & hgroup{
        margin-bottom: clamp(40px, 7vw, 60px);
    }
    & .common-btn{
        text-align: center;
    }
}
.work-list{
    & ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        gap: 2%;
    }
    & ul li{
        width: 32%;
        margin-bottom: clamp(40px, 7vw, 60px);
    }
    & .images{
        position: relative;
    }
    & .images .category{
        position: absolute;
        top: 0;
        right: 0;
        width: 105px;
        z-index: 2;
    }
    & .images .category .txt{
        font-size: 12px;
        color: #fff;
        text-align: center;
        line-height: 1.5em;
        background-color: #293254;
        padding: 6px 2px;
    }
    & .images .mainimg{
        width: 100%;
        height: clamp(50px, 19vw, 250px);
        overflow: hidden;
        box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08);
    }
    & a .images .mainimg img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .3s;
    }
    & a:hover .images .mainimg img{
        transform: scale(1.05);
    }
    & .midashi{
        margin-top: clamp(10px, 1.5vw, 15px);
    }
    & .midashi .txt{
        font-size: clamp(13px, 2vw, 16px);
        transition: color .3s;
    }
    & a:hover .midashi .txt{
        color: #B76E4C;
    }
}
@media only screen and (max-width: 780px) {
    .work-list{
        & ul li{
            width: 49%;
        }
        & .images .mainimg{
            height: clamp(50px, 27vw, 250px);
        }
    }
}
@media only screen and (max-width: 500px) {
    .work-list{
        & ul{
            gap: unset;
        }
        & ul li{
            width: 100%;
        }
        & .images .mainimg{
            height: clamp(50px, 50vw, 250px);
        }
    }
}
/* カテゴリ一覧のコンテナ */
.category-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    & .category-filter__item {
        display: inline-flex;
        align-items: center;
    }
    & .category-filter__item:not(:last-child)::after {
        content: "";
        display: inline-block;
        width: 1px;
        height: 16px;
        background-color: #9898A4;
        margin: 0 clamp(15px, 2.2vw, 22px);
    }
    & .category-filter__link {
        text-decoration: none;
        color: #333333;
        font-size: clamp(14px, 1.6vw, 16px);
        line-height: 1.2em;
        padding: 4px 0;
        border-bottom: 1px solid transparent;
        transition: border-color 0.2s ease, color 0.2s ease;
    }
    & .category-filter__link:hover {
        color: #B76E4C;
    }
    & .category-filter__item.is-active .category-filter__link {
        border-bottom-color: #B76E4C;
    }
}
.wp-pagenavi {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(10px, 1.6vw, 16px);
    font-size: 16px;
    font-weight: 700;
    margin-top: clamp(50px, 6vw, 60px);
    & a, 
    & span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        text-decoration: none;
        color: #333333;
        transition: background-color 0.2s ease, color 0.2s ease;
    }
    & span.current {
        background-color: #B76E4C;
        color: #ffffff;
    }
    & a:hover {
        background-color: #f4f4f4;
    }
    & a.previouspostslink,
    & a.nextpostslink {
        color: #9898A4;
        font-size: 18px;
    }
    & a.previouspostslink:hover,
    & a.nextpostslink:hover {
        background-color: transparent;
        color: #B76E4C;
    }
}
.wp-pagenavi a:hover, .wp-pagenavi span.current{
    border: none;
}
.wp-pagenavi a, .wp-pagenavi span{
    border: none !important;
}

/*++++++++++++++++++++++++++
athome
++++++++++++++++++++++++++*/
#athome{
    padding: clamp(60px, 10vw, 100px) 0;
    background-color: #fff;
    background-image: url(../images/home/bg_athome.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    & p{
        font-size: clamp(18px, 2.5vw, 20px);
        line-height: 1.8em;
        margin-bottom: clamp(40px, 6vw, 50px);
    }
}
/*++++++++++++++++++++++++++
company
++++++++++++++++++++++++++*/
#company{
    padding: clamp(90px, 13vw, 130px) 0 ;
    background-color: #fff;
    & .flx-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    & .flx-box .left{
        width: 46%;
        margin-left: 4%;
    }
    & .flx-box .right{
        width: 35%;
    }
    & .flx-box .right figure img{
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
    & .flx-box .left p{
        line-height: 2.5em;
        margin-bottom: clamp(30px, 5vw, 50px);
    }
}
@media only screen and (max-width: 780px) {
    #company{
        padding-top: clamp(150px, 20vw, 180px);
        & hgroup{
            margin-bottom: 60px;
        }
        & .flx-box{
            flex-direction: column-reverse;
        }
        & .flx-box .left{
            width: 100%;
            margin-left: auto;
        }
        & .flx-box .right{
            width: 90%;
            margin: auto auto 30px;
            font-family: "Noto Serif JP", serif, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "游ゴシック", "Yu Gothic", "メイリオ", "sans-serif";
        }
    }
}
/* スライダー全体のコンテナ */
.loop-slider {
  width: 100%;
  margin-top: clamp(60px, 10vw, 100px);
}
.loop-slider-track {
  display: flex;
  width: max-content;
  animation: infinite-scroll 45s linear infinite;
}
.slide-list {
  display: flex;
  gap: 25px;
  padding: 0;
  padding-right: 25px;
  margin: 0;
  list-style: none;
}
.slide-item {
  width: 350px;
  flex-shrink: 0;
}
.slide-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
@keyframes infinite-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@media (max-width: 780px) {
  .slide-item {
    width: 300px;
  }
  .slide-list {
    gap: 15px;
    padding-right: 15px;
  }
}
/*++++++++++++++++++++++++++
news
++++++++++++++++++++++++++*/
#news{
    padding: clamp(90px, 13vw, 130px) 0;
    background-color: #fff;
    & .flx-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    & .flx-box .left{
        width: 370px;
        margin-top: 40px;
    }
    & .flx-box .right{
        width: calc(100% - 400px);
    }
}
.news-list{
    & ul li{
        padding-bottom: 35px;
        margin-bottom: 35px;
        border-bottom: solid 2px #E6E6E6;
    }
    & .post-meta{
        margin-bottom: 20px;
    }
    & .post-meta > *{
        display: inline-block;
    }
    & .post-meta .time{
        font-size: 14px;
        line-height: 1.4em;
        font-weight: 500;
        color: #6C757D;
        margin-right: 30px;
    }
    & .post-meta .category{
        background-color: #F1F2F8;
        padding: 0.4em 0.6em;
        min-width: 100px;
        font-size: 13px;
        font-weight: 700;
        color: #293254;
        line-height: 1.2em;
        text-align: center;
    }
    & ul li p{
        transition: color .3s;
    }
    & ul li a:hover p{
        color: #B76E4C;
    }
}
@media only screen and (max-width: 780px) {
    #news{
        & .flx-box .left{
            width: 100%;
            margin-top: 0;
            margin-bottom: 20px;
        }
        & .flx-box .right{
            width: 100%;
        }
    }
}

/*++++++++++++++++++++++++++
voice
++++++++++++++++++++++++++*/
#voice{
    overflow: hidden;
    padding: clamp(40px, 8vw, 70px) 0 clamp(90px, 13vw, 130px);
    background-color: #fff;
    & .reviews ol{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    & .reviews ol li{
        width: calc(100% / 4);
        padding: 15px 0;
    }
    & .reviews ol li:not(:last-child){
        border-right: solid 2px #F5F6F9;
    }
    & .reviews ol li .inr{
        width: 85%;
        margin: auto;
    }
    & .reviews ol li .inr figure{
        max-width: 140px;
        width: 70%;
        margin: auto auto clamp(30px, 5vw, 35px);
    }
    & .reviews ol li .inr p{
        font-size: clamp(13px, 1.7vw, 15px);
    }
    & .reviews::-webkit-scrollbar{
        display: none;
    }
}
@media only screen and (max-width: 780px) {
    #voice{
        & .reviews ol li{
            width: 100%;
            padding: 15px 0;
        }
        & .reviews ol li:not(:last-child){
            border-right: none;
            border-bottom: solid 2px #F5F6F9;
        }
        & .reviews ol li .inr{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
        }
        & .reviews ol li .inr .re-left{
            width: 30%;
        }
        & .reviews ol li .inr .re-right{
            width: 70%;
        }
        & .reviews ol li .inr figure{
            width: 60%;
            margin-bottom: 0;
        }
    }
}
/*++++++++++++++++++++++++++
フッター
++++++++++++++++++++++++++*/
footer{
    & .cta{
        background-image: url(../images/back_cta.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        padding: clamp(60px, 9vw, 80px) 0;
        position: relative;
        overflow: hidden;
        z-index: 0;
    }
    & .cta::after{
        content: '';
        background: inherit;
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
        filter: blur(5px);
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        width: 105%;
        height: 105%;
        z-index: -1;
        pointer-events: none;
    }
    & .cta .contact-blk{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    & .cta .contact-blk .box{
        width: calc(96% / 3);
        background-color: #fff;
    }
    & .cta .contact-blk .box .inr{
        padding: clamp(30px, 6vw, 60px) 4%;
        & img{
            width: 100%;
        }
    }
    & .cta .contact-blk .box figure{
        width: 34px;
        margin: auto auto clamp(12px, 1.5vw, 15px);
    }
    & .cta .contact-blk .box.tel figure{
        width: 28px;
    }
    & .cta .contact-blk .box h6{
        font-size: clamp(22px, 2vw, 26px);
        font-weight: 500;
        line-height: 1.6em;
        text-align: center;
        margin-bottom: clamp(20px, 2.5vw, 25px);
        transition: color .3s;
    }
    & .cta .contact-blk .box a:hover h6{
        color: #B76E4C;
    }
    & .cta .contact-blk .box p{
        font-size: clamp(14px, 1.4vw, 15px);
        line-height: 1.7em;
        text-align: center;
    }
    & .foot{
        padding: 0 0 20px;
        background-color: #fff;
    }
    & .foot .pagetop{
        border-bottom: solid 1px #D9D9D9;
        margin-bottom: clamp(50px, 8vw, 70px);
    }
    & .foot .pagetop .totop-box{
        padding: clamp(30px, 4.5vw, 35px) 0;
    }
    & .foot .pagetop .totop-box .to-txt{
        font-size: 13px;
        letter-spacing: 0.07em;
        line-height: 1.7em;
        font-weight: 600;
        text-align: center;
        position: relative;
        padding-top: 20px;
        color: #888888;
        transition: color .3s;
    }
    & .foot .pagetop a:hover .totop-box .to-txt{
        color: #B76E4C;
    }
    & .foot .pagetop .totop-box .to-txt::before {
        content: '';
        position: absolute;
        top: -0.05em;
        right: 50%;
        width: 1px;
        height: 12px;
        background: #888888;
        transition: background-color .3s;
    }
    & .foot .pagetop a:hover .totop-box .to-txt::before{
        background: #B76E4C;
    }
    & .foot .pagetop .totop-box .to-txt::after {
        content: '';
        position: absolute;
        top: -0.05em;
        right: 50%;
        width: 7px;
        height: 7px;
        border: 1px solid #888888;
        border-left: 0;
        border-bottom: 0;
        transform: rotate(-45deg);
        transform-origin: top right;
        box-sizing: border-box;
        transition: border-color .3s;
    }
    & .foot .pagetop a:hover .totop-box .to-txt::after{
        border-color: #B76E4C;
    }
    & .foot .above .flx-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    & .foot .above .flx-box .left figure{
        width: clamp(130px, 16vw, 150px);
        margin-bottom: 25px;
    }
    & .foot .above .flx-box .left .info{
        font-size: 14px;
        line-height: 1.7em;
    }
    & .foot .above nav{
        font-size: 0;
    }
    & .foot .above nav ul{
        display: inline-block;
        vertical-align: top;
    }
    & .foot .above nav ul li{
        margin-bottom: 20px;
    }
    & .foot .above nav ul:first-child li{
        margin-right: 100px;
    }
    & .foot .above nav ul li .menu-link h2{
        font-size: 17px;
        line-height: 1.5em;
        transition: color .3s;
    }
    & .foot .above nav ul li a:hover .menu-link h2{
        color: #B76E4C;
    }
    & .foot .above nav ul li .sub-link{
        margin-top: 10px;
        margin-bottom: 30px;
    }
    & .foot .above nav ul li .sub-link .sub-link-txt{
        font-size: 13px;
        line-height: 1.4em;
        position: relative;
        padding-left: 14px;
        transition: color .3s;
    }
    & .foot .above nav ul li a:hover .sub-link .sub-link-txt{
        color: #B76E4C;
    }
    & .foot .above nav ul li .sub-link .sub-link-txt::before{
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        width: 8px;
        height: 1px;
        border-radius: 10px;
        background-color: #9898A4;
    }
    & .foot .under{
        margin: clamp(30px, 12vw, 100px) auto auto;
    }
    & .foot .under .layout-b{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    & .foot .under .layout-b .sns ul{
        font-size: 0;
    }
    & .foot .under .layout-b .sns ul li{
        display: inline-block;
        margin-right: 20px;
    }
    & .foot .under .layout-b .sns ul li img{
        width: 20px;
        vertical-align:middle;
    }
    & .foot .under .layout-b .sns ul li.tiktok img{
        width: 18px;
    }
    & .foot .under .layout-b .sns ul li.connectalo{
        border-left: solid 1px #B9B9B9;
        padding-left: 20px;
    }
    & .foot .under .layout-b .sns ul li.connectalo img{
        width: 30px;
    }
    & .foot .under .layout-b .copyright p{
        font-size: 12px;
        color: #9898A4;
    }
}
@media only screen and (max-width: 950px) {
    footer{
        & .foot .above .flx-box .right{
            display: none;
        }
    }
}
@media only screen and (max-width: 780px) {
    footer{
        & .cta .contact-blk .box{
            width: 100%;
        }
        & .cta .contact-blk .box:not(:last-child){
            margin-bottom: 15px;
        }
        & .foot .above .flx-box .left{
            width: 100%;
        }
        & .foot .above .flx-box .left figure{
            margin: auto auto 25px;
        }
        & .foot .above .flx-box .left .info{
            text-align: center;
        }
        & .foot .under .layout-b{
            display: block;
            margin: auto;
            text-align: center;
        }
        & .foot .under .layout-b .sns{
            margin-bottom: 20px;
        }
        & .foot .under .layout-b .sns ul li:last-child{
            margin-right: 0;
        }
    }
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++
下層ページ
++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++*/
#second-head{
    padding-top: 220px;
    margin-bottom: 120px;
    /*パンくず*/
    & .pankuzu{
        margin-bottom: 18px;
    }
    & .pankuzu ul{
        font-size: 0;
    }
    & .pankuzu ul li{
        display: inline-block;
        vertical-align: middle;
        position: relative;
        margin-right: 25px;
    }
    & .pankuzu ul li:not(:last-child)::before{
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: -18px;
        margin: auto;
        width: 10px;
        height: 1px;
        background-color: #ADADAD;
    }
    & .pankuzu ul li.home{
        width: 14px;
    }
    & .pankuzu ul li.home img{
        display: block;
    }
    & .pankuzu ul li p{
        font-size: 13px;
        line-height: 1.2em;
        color: #6D6D6D;
    }
    & .space-border{
        border-bottom: solid 1px #E6E6E6;
    }
    /*セカンドヘッダーイメージ*/
    & .sc-mainimg{
        padding: 150px 0;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    & .sc-mainimg.sc-about{
        background-image: url(../images/about/about_header.jpg);
    }
    & .sc-mainimg.sc-flow{
        background-image: url(../images/about/flow/flow_header.jpg);
    }
    & .sc-mainimg.sc-service{
        background-image: url(../images/service/service_header.jpg);
    }
    & .sc-mainimg.sc-customrenovation{
        background-image: url(../images/service/customrenovation/customrenovation_header.jpg);
    }
    & .sc-mainimg.sc-works{
        background-image: url(../images/works/works_header.jpg);
    }
    & .sc-mainimg.sc-company{
        background-image: url(../images/company/company_header.jpg);
    }
    & .sc-mainimg.sc-news{
        background-image: url(../images/news/news_header.jpg);
    }
    & .sc-mainimg.sc-contact{
        background-image: url(../images/contact/contact_header.jpg);
    }
    & .sc-mainimg.sc-recruit{
        background-image: url(../images/recruit/recruit_header.jpg);
    }
    & .sc-mainimg.sc-privacy{
        background-image: url(../images/privacy/privacy_header.jpg);
    }
}
@media only screen and (max-width: 780px) {
    #second-head{
        padding-top: 170px;
        margin-bottom: 90px;
        & .sc-mainimg{
            padding: 100px 0;
        }
    }
}

#second-contents{
    margin-bottom: clamp(100px, 14vw, 120px);
    & img{
        filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.1));
    }
    & img.not-sdw{
        filter: none;
    }
    & .mgn-top80-110{
        margin-top: clamp(80px, 13vw, 110px);

    }
    & .mgn-btm5{
        margin-bottom: 5px;
    }
    & .mgn-btm10{
        margin-bottom: 10px;
    }
    & .mgn-btm20{
        margin-bottom: 20px;
    }
    & .mgn-btm30{
        margin-bottom: 30px;
    }
    & .mgn-btm40{
        margin-bottom: 40px;
    }
    & .mgn-btm50{
        margin-bottom: 50px;
    }
    & .mgn-btm60{
        margin-bottom: 60px;
    }
    & .mgn-btm60{
        margin-bottom: 60px;
    }
    & .txt-cnt{
        text-align: center;
    }
    & .content-blk:not(:last-child){
        margin-bottom: clamp(80px, 13vw, 110px);
    }
    & .list-txt-box{
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: solid 2px #E6E6E6;
    }
    & .work-txt-box{
        padding-bottom: 40px;
        margin-bottom: 80px;
        border-bottom: solid 1px #E6E6E6;
    }
    & .sc-midashi h2{
        font-size: clamp(22px, 3vw, 28px);
        line-height: 1.4em;
        font-weight: 500;
        text-align: center;
        position: relative;
        padding-bottom: 25px;
    }
    & .sc-midashi h2::after{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        content: '';
        display: inline-block;
        background-image: url(../images/midashi_h2_title.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 2em;
        height: 1em;
    }
    & .sc-midashi .h3-en{
        font-family: "Cormorant Garamond", "Noto Serif JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "游ゴシック", "Yu Gothic", "メイリオ", "sans-serif";
        font-size: clamp(16px, 2vw, 18px);
        line-height: 1.3em;
        font-weight: 500;
        margin-bottom: 2px;
        color: #9898A4;
    }
    & .sc-midashi .h3-en.noen{
        font-family: "Noto Serif JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "游ゴシック", "Yu Gothic", "メイリオ", "sans-serif";
    }
    & .sc-midashi h3{
        font-size: clamp(20px, 2.8vw, 24px);
        line-height: 1.6em;
        font-weight: 500;
    }
    & .sc-midashi h4{
        font-size: clamp(20px, 2.4vw, 22px);
        line-height: 1.8em;
        font-weight: 500;
        margin-bottom: 30px;
    }
    & .sc-midashi h5{
        font-size: clamp(17px, 2vw, 18px);
        line-height: 1.7em;
        font-weight: 600;
        margin-bottom: 15px;
        padding-left: 22px;
        position: relative;
        color: #293254;
    }
    & .sc-midashi h5::before{
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 10px;
        margin: auto;
        width: 6px;
        height: 6px;
        background-color: #9898A4;
        border-radius: 100px;
    }
    & .sc-midashi h6{
        font-size: clamp(22px, 2.6vw, 24px);
        line-height: 1.7em;
        margin-bottom: clamp(30px, 4vw, 40px);
        padding-bottom: 10px;
        border-bottom: solid 2px #E6E6E6;
        position: relative;
    }
    & .sc-midashi h6::after{
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 40px;
        height: 2px;
        background-color: #293254;
    }
    & .sc-midashi p{
        font-size: clamp(15px, 1.7vw, 16px);
        line-height: 2.2em;
        text-align: center;
    }
    & p.txt1{
        font-size: clamp(15px, 1.8vw, 16px);
        line-height: 1.7em;
    }
    & p.txt2{
        font-size: clamp(15px, 1.8vw, 16px);
        line-height: 2.4em;
    }
    & p.txt3{
        font-size: clamp(14px, 1.7vw, 15px);
        line-height: 1.5em;
    }
    & .flx-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    & .algn-cnt{
        align-items: center;
    }
    & .algn-end{
        align-items: end;
    }
    & .flx-box .flx-inr60{
        width: 60%;
    }
    & .flx-box .flx-inr55{
        width: 55%;
    }
    & .flx-box .flx-inr50{
        width: 50%;
    }
    & .flx-box .flx-inr45{
        width: 45%;
    }
    & .flx-box .flx-inr40{
        width: 40%;
    }
    & .flx-box .flx-inr35{
        width: 35%;
    }
    & .flx-box .flx-inr-conleft{
        width: 350px;
    }
    & .flx-box .flx-inr-conright{
        width: calc(100% - 400px);
    }
    & .other-linklist .oth-box{
        padding: 40px 0;
        border-top: solid 2px #E6E6E6;
    }
    & .other-linklist .oth-box:last-child{
        border-bottom: solid 2px #E6E6E6;
    }
    & .other-linklist .oth-box .oth-flx{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-self: center;
    }
    & .other-linklist .oth-box .oth-flx .oth-img{
        width: 35%;
    }
    & .other-linklist .oth-box .oth-flx .oth-txt{
        width: 60%;
    }
    & .building-flow .bld-notes{
        font-size: clamp(13px, 1.5vw, 14px);
        line-height: 1.5em;
        margin-bottom: 10px;
    }
    & .building-flow .bld-notes::before{
        content: '';
        display: inline-block;
        background-image: url(../images/about/flow/flow-ico-star.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 1.2em;
        height: 1.2em;
        margin-bottom: -0.2em;
        margin-right: 0.2em;
    }
    & .building-flow ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
    }
    & .building-flow ul li{
        width: calc(95% / 3);
        margin-right: calc(5% / 2);
        margin-bottom: 50px;
    }
    & .building-flow ul li:nth-child(3n){
        margin-right: 0;
    }
    & .building-flow ul li .bld-main{
        background-color: #F3F3F4;
        min-height: 65px;
        margin-bottom: 10px;
    }
    & .building-flow ul li .bld-main > *{
        display: inline-block;
        vertical-align: middle;
    }
    & .building-flow ul li .bld-main .num-box{
        position: relative;
    }
    & .building-flow ul li .bld-main .num-box .free{
        position: absolute;
        top: 4px;
        left: 4px;
        width: 12px;
    }
    & .building-flow ul li .bld-main .num-box .free img{
        vertical-align: top;
    }
    & .building-flow ul li .bld-main .num-box .number{
        width: 65px;
        height: 65px;
        background-color: #293254;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    & .building-flow ul li .bld-main .num-box .number span{
        font-size: 28px;
        font-weight: 900;
        color: #fff;
        text-align: center;
    }
    & .building-flow ul li .bld-main .bld-midashi{
        font-size: clamp(10px, 1.4vw, 18px);
        font-weight: 700;
        color: #293254;
        line-height: 1.5em;
    }
    & .building-flow ul li .bld-main .bld-midashi::before{
        content: '';
        display: inline-block;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 1.7em;
        height: 1.7em;
        margin-bottom: -0.5em;
        margin-right: 0.5em;
        margin-left: 0.5em;
    }
    & .building-flow ul li .bld-main .bld-midashi.ico01::before{
        background-image: url(../images/about/flow/flow-ico01.svg);
    }
    & .building-flow ul li .bld-main .bld-midashi.ico02::before{
        background-image: url(../images/about/flow/flow-ico02.svg);
    }
    & .building-flow ul li .bld-main .bld-midashi.ico03::before{
        background-image: url(../images/about/flow/flow-ico03.svg);
    }
    & .building-flow ul li .bld-main .bld-midashi.ico04::before{
        background-image: url(../images/about/flow/flow-ico04.svg);
    }
    & .building-flow ul li .bld-main .bld-midashi.ico05::before{
        background-image: url(../images/about/flow/flow-ico05.svg);
    }
    & .building-flow ul li .bld-main .bld-midashi.ico06::before{
        background-image: url(../images/about/flow/flow-ico06.svg);
    }
    & .building-flow ul li .bld-main .bld-midashi.ico07::before{
        background-image: url(../images/about/flow/flow-ico07.svg);
    }
    & .building-flow ul li .bld-main .bld-midashi.ico08::before{
        background-image: url(../images/about/flow/flow-ico08.svg);
    }
    & .building-flow ul li .bld-txt{
        font-size: clamp(13px, 1.6vw, 15px);
        line-height: 1.5em;
    }
    & .flow-txt-box{
        margin-bottom: 30px;
    }
    & .flow-txt-box .midashi1{
        font-size: clamp(18px, 2.2vw, 20px);
        line-height: 1.7em;
        font-weight: 600;
        color: #293254;
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: solid 2px #E6E6E6;
    }
    & .flow-list-box{
        border: dashed 1px #293254;
        margin-bottom: 10px;
    }
    & .flow-list-box .midashi2{
        font-size: clamp(17px, 1.9vw, 18px);
        margin-top: -0.7em;
        line-height: 1.2em;
        margin-left: 10px;
    }
    & .flow-list-box .midashi2 span{
        background-color: #fff;
        padding: 2px 0.3em;
        display: inline-block;
    }
    & .flow-list-box .midashi2 span::before{
        content: '';
        display: inline-block;
        background-image: url(../images/about/flow/flow-ico-check.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 1em;
        height: 1em;
        margin-bottom: -0.2em;
        margin-right: 0.2em;
    }
    & .flow-list-box .flb-inr{
        padding: 10px;
    }
    & .flow-list-box .flb-inr .flb-txt{
        font-size: clamp(15px, 1.6vw, 16px);
        line-height: 1.6em;
        margin-left: 1em;
        text-indent: -1em;
    }
    & .flow-list-box .flb-inr .flb-txt::before{
        content: '・';
    }
    & .featured{
        border: solid 1px #293254;
        padding: 10px;
        max-width: 800px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    & .featured .feat-inr{
        border: dashed 1px #293254;
        padding: 5%;
    }
    & .featured .feat-inr .feat-midashi1{
        font-size: clamp(17px, 2vw, 18px);
        line-height: 1.6em;
        text-align: center;
        font-weight: 700;
        margin-bottom: 15px;
    }
    & .featured .feat-inr .feat-midashi2{
        font-size: clamp(18px, 2.2vw, 20px);
        line-height: 1.6em;
        text-align: center;
        font-weight: 500;
        margin-bottom: 25px;
    }
    & .featured .feat-inr .feat-txt1{
        font-size: clamp(14px, 1.6vw, 15px);
        line-height: 1.6em;
        text-align: center;
    }
    & .works-swiper {
        width: 100%;
        overflow: hidden;
        padding: 30px 0 50px;
        margin-bottom: -50px;
    }
    & .works-swiper .swiper-slide {
        height: auto;
    }
    
    & .works-swiper .works-slide-img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        display: block;
    }
    & .works-swiper .swiper-wrapper {
        transition-timing-function: linear !important;
    }
    & .main-service{
        width: 100%;
        height: 500px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        position: relative;
    }
    & .main-service .customhome{
        width: 100%;
        height: 100%;
        background-image: url(../images/service/service_img1.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    & .main-service .renovation{
        width: 100%;
        height: 100%;
        background-image: url(../images/service/service_img2.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    & .main-service .white-box{
        background-color: #fff;
        max-width: 500px;
        width: 50%;
        height: 420px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50px;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    & .main-service .white-box .size-blk{
        max-width: 420px;
        width: 80%;
        margin: auto;
    }
    & .main-service .white-box .sc-midashi{
        margin-bottom: 50px;
    }
    & .option-service{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    & .option-service .op-box{
        width: 48%;
        border-bottom: solid 1px #E6E6E6;
        padding-bottom: clamp(40px, 6vw, 50px);
        margin-bottom: clamp(40px, 6vw, 50px);
    }
    & .option-service .op-box:nth-child(5),
    .option-service .op-box:nth-child(6){
        margin-bottom: 0;
    }
    & .option-service .op-box .op-img{
        margin-bottom: 15px;
    }
    & .option-service .op-box .txt-box{
        width: 95%;
        margin: auto;
    }
    & .option-service .op-box .txt-box .sc-midashi{
        margin-bottom: 20px;
    }
    & .specification{
        max-width: 900px;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    & .message-caption{
        font-size: clamp(14px, 1.5vw, 15px);
        line-height: 2em;
        text-align: center;
        margin-top: 10px;
    }
    & .message-caption span{
        display: block;
        font-weight: 500;
        font-size: 1.4em;
    }
    & .map iframe{
        width: 100%;
        height: clamp(150px, 25vw, 300px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
    & .list-spec ul{
        border-top: solid 1px #E6E6E6;
    }
    & .list-spec ul li{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        border-bottom: solid 1px #E6E6E6;
    }
    & .list-spec ul li .label{
        width: 200px;
        background-color: #F1F2F8;
        padding: 20px 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border-right: solid 1px #E6E6E6;
    }
    & .list-spec ul li .value{
        width: calc(100% - 200px);
        padding: 20px;
    }
    & .list-spec ul li .label .l-txt h6{
        font-size: clamp(16px, 1.8vw, 18px);
        font-weight: 500;
        line-height: 1.4em;
        text-align: center;
    }
    & .list-spec ul li .label .l-txt h6 span{
        display: block;
        font-size: 0.67em;
    }
    & .list-spec ul li .value .v-txt1{
        font-size: clamp(14px, 1.5vw, 15px);
        line-height: 1.6em;
        margin-bottom: 15px;
    }
    & .list-spec ul li .value .v-txt2{
        font-size: clamp(13px, 1.4vw, 14px);
        line-height: 1.5em;
    }
    & .list-spec .l-notes{
        font-size: clamp(12px, 1.5vw, 13px);
        line-height: 1.5em;
        margin-top: 3px;
        margin-left: 1em;
        text-indent: -1em;
    }
    & .list-spec .l-notes::before{
        content: '※';
    }
    & .list-option ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    & .list-option ul li{
        width: calc(94% / 3);
        background-color: #F1F2F8;
        padding: 25px 15px;
        margin-bottom: clamp(10px, 5vw, 40px);
    }
    & .list-option ul li .op-icon{
        max-width: 100px;
        width: 50%;
        margin: auto auto 15px;
    }
    & .list-option ul li .op-title{
        font-size: clamp(15px, 1.6vw, 16px);
        line-height: 1.6em;
        margin-bottom: 20px;
        font-weight: 800;
        color: #293254;
        text-align: center;
    }
    & .list-option ul li .op-midashi1{
        font-size: clamp(14px, 1.5vw, 15px);
        line-height: 1.5em;
        margin-bottom: 5px;
        font-weight: 700;
        text-align: center;
    }
    & .list-option ul li .op-midashi2{
        font-size: clamp(13px, 1.4vw, 14px);
        line-height: 1.6em;
        font-weight: 700;
    }
    & .list-option ul li .op-txt1{
        font-size: clamp(13px, 1.4vw, 14px);
        line-height: 1.6em;
        margin-bottom: 25px;
    }
    & .list-option ul li .op-txt2{
        font-size: clamp(13px, 1.4vw, 14px);
        line-height: 1.6em;
    }
    /* Chrome, Edge, Safari */
    & .list-option::-webkit-scrollbar,
    & .list-renov::-webkit-scrollbar{
        display: none;
    }
    & .scroll-area .scrollbar{
        display: none;
    }
    & .list-renov ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
    }
    & .list-renov ul li{
        width: calc(94% / 3);
        margin-right: calc(6% / 2);
        margin-bottom: 40px;
    }
    & .list-renov ul li:nth-child(3n){
        margin-right: 0;
    }
    & .list-renov ul li .re-images{
        width: 100%;
        margin-bottom: 10px;
    }
    & .list-renov ul li .re-midashi{
        font-size: clamp(17px, 1.8vw, 18px);
        line-height: 1.6em;
        font-weight: 700;
        margin-bottom: 10px;
    }
    & .list-option ul li .re-txt{
        font-size: clamp(14px, 1.5vw, 15px);
        line-height: 1.6em;
    }
    & .list-info .title{
        font-size: clamp(20px, 2.4vw, 24px);
        font-weight: 500;
        position: relative;
        padding-left: 15px;
        margin-bottom: 20px;
    }
    & .list-info .title::before{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        content: '';
        width: 8px;
        height: 8px;
        background-color: #293254;
    }
    & .list-info ul li{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        border-top: solid 1px #E6E6E6;
        padding: 20px 0;
    }
    & .list-info.for-rec ul li{
        padding: 50px 0;
    }
    & .list-info ul li:last-child{
        border-bottom: solid 1px #E6E6E6;
    }
    & .list-info ul li .label{
        width: 8em;
    }
    & .list-info ul li .value{
        width: calc(100% - 9em);
    }
    & .list-info.for-rec ul li .label{
        width: 15em;
    }
    & .list-info.for-rec ul li .value{
        width: calc(100% - 18em);
    }
    & .list-info ul li .txt{
        font-size: clamp(15px, 1.6vw, 16px);
        line-height: 1.8em;
    }
    & .list-info ul li .txt a{
        color: #B76E4C;
        text-decoration: underline;
    }
    & .list-info ul li .label .txt{
        font-weight: 700;
    }
    & .con-phone{
        max-width: 1000px;
        width: 100%;
        margin: auto;
        background-color: #F6F8FD;
    }
    & .con-phone .box{
        padding: 30px clamp(30px, 5vw, 50px);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    & .con-phone .box .phone-txt{
        width: 310px;
        border-right: solid 1px #293254;
        padding: 20px 0;
    }
    & .con-phone .box .phone-tel{
        width: calc(100% - 350px);
    }
    & .con-phone .box .phone-tel .number{
        font-size: clamp(26px, 2.8vw, 28px);
        font-weight: 700;
        line-height: 1em;
        margin-bottom: 15px;
        color: #293254;
        & a{
            color: #293254;
        }
    }
    & .con-phone .box .phone-tel .number::before{
        content: '';
        display: inline-block;
        background-image: url(../images/ico_tel.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 0.8em;
        height: 0.8em;
        margin-right: 0.2em;
    }
    & .con-phone .box .phone-tel .notes{
        font-size: clamp(13px, 1.5vw, 15px);
    }
    & .complete{
        text-align: center;
        margin-bottom: 20px;
    }
    & .complete .comp-txt1{
        font-size: clamp(26px, 2.8vw, 28px);
        line-height: 1.5em;
        margin-bottom: 35px;
    }
    & .complete .comp-txt2{
        font-size: clamp(15px, 1.6vw, 16px);
        line-height: 1.7em;
        margin-bottom: 50px;
    }
    & .pp-box:not(:last-child){
        margin-bottom: clamp(50px, 6vw, 60px);
    }
    & .pp-box .pp-midashi{
        font-size: clamp(20px, 2.4vw, 24px);
        line-height: 1.5em;
        margin-bottom: 15px;
        font-weight: 600;
        color: #293254;
    }
    /******タブ切替え******/
    & .tab-container {
        width: 100%;
        margin: 0 auto;
        & .tab-buttons {
            display: flex;
            gap: 6px;
            position: relative;
            z-index: 2;
        }
        & .tab-button {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            background-color: #fff;
            border: 1px solid #293254;
            padding: 24px 10px;
            font-size: clamp(15px, 2.4vw, 20px);
            font-weight: 600;
            color: #293254;
            cursor: pointer;
            outline: none;
            transition: background-color 0.2s;
            font-family: "Noto Serif JP", serif, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "游ゴシック", "Yu Gothic", "メイリオ", "sans-serif";
            position: relative;
        }
        & .arrow-box{
            position: absolute;
            top: 0;
            bottom: 0;
            right: 20px;
            margin: auto;
            width: 32px;
            height: 32px;
        }
        & .arrow-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background-color: #B76E4C;
            border-radius: 50%;
            position: relative;
            flex-shrink: 0;
        }
        & .arrow-btn::after {
            content: "";
            display: block;
            width: 6px;
            height: 6px;
            border-right: 2px solid #fff;
            border-bottom: 2px solid #fff;
            transform: translateY(-2px) rotate(45deg);
            transition: transform 0.2s;
        }
        & .tab-button.active {
            border-bottom-color: #fff;
            margin-bottom: -1px;
            position: relative;
            z-index: 3;
        }
        & .tab-button.active .arrow-btn::after {
            transform: translateY(1px) rotate(-135deg);
        }
        & .tab-contents {
            border: 1px solid #293254;
            background-color: #fff;
            position: relative;
            z-index: 1;
            margin-top: -1px;
        }
        & .tab-content {
            display: none;
            padding: clamp(50px, 10vw, 80px) clamp(15px, 3vw, 25px);
        }
        & .tab-content.active {
            display: block;
        }
    }
}


@media only screen and (max-width: 1000px) {
    #second-contents{
        & .building-flow ul li .bld-main{
            min-height: 50px;
        }
        & .building-flow ul li .bld-main .num-box .free{
            width: 8px;
        }
        & .building-flow ul li .bld-main .num-box .number{
            width: 50px;
            height: 50px;
        }
        & .building-flow ul li .bld-main .num-box .number span{
            font-size: 20px;
        }
    }
}
@media only screen and (max-width: 780px) {
    #second-contents{
        & .flx-box.clm-rev{
            flex-direction: column-reverse;
        }
        & .flx-box .flx-inr60,
        .flx-box .flx-inr55,
        .flx-box .flx-inr50,
        .flx-box .flx-inr45,
        .flx-box .flx-inr40,
        .flx-box .flx-inr35,
        .flx-box .flx-inr-conleft,
        .flx-box .flx-inr-conright{
            width: 100%;
        }
        & .flx-box .flx-sp-btm{
            margin-bottom: 30px;
        }
        & .other-linklist .oth-box .oth-flx .oth-img{
            width: 100%;
            margin-bottom: 30px;
        }
        & .other-linklist .oth-box .oth-flx .oth-txt{
            width: 100%;
        }
        & .building-flow ul{
            justify-content: space-between;
        }
        & .building-flow ul li{
            width: calc(97% / 2);
            margin-right: 0;
            margin-bottom: 40px;
        }
        & .building-flow ul li .bld-main{
            min-height: 45px;
        }
        & .building-flow ul li .bld-main .num-box .free{
            top: 2px;
            left: 2px;
        }
        & .building-flow ul li .bld-main .num-box .number{
            width: 45px;
            height: 45px;
        }
        & .building-flow ul li .bld-main .num-box .number span{
            font-size: 20px;
        }
        & .building-flow ul li .bld-main .bld-midashi{
            font-size: clamp(10px, 2.2vw, 14px);
        }
        & .works-swiper {
            margin-bottom: 0;
        }
        & .main-service{
            height: auto;
        }
        & .main-service .customhome,
        .main-service .renovation{
            width: 100%;
            height: 300px;
        }
        & .main-service .white-box{
            max-width: 800px;
            width: 100%;
            height: auto;
            position: inherit;
            top: inherit;
            bottom: inherit;
            left: inherit;
            margin: auto;
            display: block;
            padding: 30px 0;
        }
        & .main-service .white-box .size-blk{
            max-width: 780px;
            width: 86%;
            margin: auto;
        }
        & .main-service .white-box .sc-midashi{
            margin-bottom: 30px;
        }
        & .option-service .op-box{
            width: 100%;
        }
        & .option-service .op-box:nth-child(5){
            margin-bottom: clamp(40px, 6vw, 50px);
        }
        & .map iframe{
            height: clamp(250px, 65vw, 700px);
        }
        & .list-spec ul li{
            border-right: solid 1px #E6E6E6;
            border-left: solid 1px #E6E6E6;
        }
        & .list-spec ul li .label{
            width: 100%;
            border-right: none;
        }
        & .list-spec ul li .value{
            width: 100%;
            padding: 20px 15px;
        }
        & .list-option{
            overflow-x: scroll;
            margin-bottom: 20px;
        }
        & .list-option ul{
            width: 2000px;
        }
        & .list-option ul li{
            width: 320px;
            margin-bottom: 0;
        }
        & .list-renov{
            overflow-x: scroll;
            margin-bottom: 20px;
        }
        & .list-renov ul{
            width: 2700px;
        }
        & .list-renov ul li{
            width: 320px;
            margin-right: 20px;
            margin-bottom: 0;
        }
        & .list-renov ul li:nth-child(3n){
            margin-right: 20px;
        }
        & .list-renov ul li:last-child{
            margin-right: 0;
        }
        & .list-info ul li .label,
        & .list-info.for-rec ul li .label{
            width: 100%;
            margin-bottom: 20px;
        }
        & .list-info ul li .value,
        & .list-info.for-rec ul li .value{
            width: 100%;
        }
        & .list-info.for-rec ul li .label .sc-midashi{
            text-align: center;
        }
        /***自作スクロールバー****/
        & .scroll-area{
            margin-bottom: 50px;
        }
        & .scroll-area .scrollbar{
            display:flex;
            align-items:center;
            justify-content:center;
            gap:6px;
            margin-top:4px;
        }
        & .scroll-area .scroll-track{
            width:calc(100% - 40px);
            height:8px;
            background:#ddd;
            border-radius:999px;
            position:relative;
        }
        & .scroll-area .scroll-thumb{
            position:absolute;
            left:0;
            top:0;
            width:80px;
            height:100%;
            background:#B76E4C;
            border-radius:999px;
        }
        & .scroll-area .arrow{
            font-size: 12px;
            color: #ddd;
        }
        & .con-phone .box{
            padding: 35px clamp(30px, 5vw, 50px);
        }
        & .con-phone .box .phone-txt{
            width: 100%;
            border-right: none;
            padding: 0 0 35px;
        }
        & .con-phone .box .phone-tel{
            width: 100%;
            padding: 10px 0 0;
            text-align: center;
        }
        & .con-phone .box .phone-txt .sc-midashi{
            text-align: center;
        }
        /******タブ切替え******/
        & .tab-container {
            & .tab-button {
                padding: 18px 10px;
            }
            & .arrow-box{
                right: 4px;
                width: 24px;
                height: 32px;
            }
            & .arrow-btn {
                width: 20px;
                height: 20px;
            }
            & .arrow-btn::after {
                width: 3px;
                height: 3px;
                transform: translateY(-1px) rotate(45deg);
            }
        }
    }
}
@media only screen and (max-width: 500px) {
    #second-contents{
        & .building-flow ul li{
            width: 100%;
        }
        & .building-flow ul li .bld-main{
            min-height: 55px;
        }
        & .building-flow ul li .bld-main .num-box .number{
            width: 55px;
            height: 55px;
        }
        & .building-flow ul li .bld-main .num-box .number span{
            font-size: 24px;
        }
        & .building-flow ul li .bld-main .bld-midashi{
            font-size: 15px;
        }
        & .main-service .customhome,
        .main-service .renovation{
            height: 250px;
        }
    }
}
/*---------------------お問い合わせフォーム---------------------*/
.form-container {
    margin: 0 auto;
    & .form-group {
        margin-bottom: 35px;
    }
    & .form-label {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    & .badge {
        font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "游ゴシック", "Yu Gothic", "メイリオ", "sans-serif";
        font-size: 12px;
        font-weight: 400;
    }
    & .badge.required {
        color: #D70000;
    }
    & .badge.optional {
        color: #9898A4;
    }
    & .input-text,
    & .select-box,
    & .textarea {
        font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "游ゴシック", "Yu Gothic", "メイリオ", "sans-serif";
        width: 100%;
        padding: 20px 15px;
        font-size: 16px;
        border: 1px solid #adb0be;
        color: #0F1219;
        background-color: #ffffff;
        outline: none;
        transition: border-color 0.2s;
    }
    & .input-text:focus,
    & .select-box:focus,
    & .textarea:focus {
        border-color: #293254;
    }
    & .input-text::placeholder,
    & .textarea::placeholder {
        color: #adadad;
    }
    & .radio-group {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    & .radio-group label,
    & .wpcf7-list-item {
        display: inline-flex;
        align-items: center;
        font-size: 16px;
        cursor: pointer;
        margin-bottom: 4px;
    }
    & .radio-group input[type="radio"] {
        margin-right: 10px;
        width: 18px;
        height: 18px;
        cursor: pointer;
        accent-color: #293254;
    }
    & .select-wrapper {
        position: relative;
    }
    & .select-box {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        padding-right: 40px;
    }
    & .select-wrapper::after {
        content: '';
        position: absolute;
        right: 18px;
        top: 50%;
        transform: translateY(-30%) rotate(45deg);
        width: 8px;
        height: 8px;
        border-right: 2px solid #99aab8;
        border-bottom: 2px solid #99aab8;
        pointer-events: none;
    }
    & .textarea {
        height: 280px;
        resize: vertical;
        line-height: 1.7;
    }
    & .submit-container {
        text-align: center;
        margin-top: 40px;
    }
    & .btn-submit {
        background-color: #B76E4C;
        color: #ffffff;
        border: none;
        border-radius: 50px;
        padding: 16px 80px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.2s;
        display: inline-block;
        text-decoration: none;
    }
    & .btn-submit:hover {
        background-color: #9e5c3d;
    }
}

@media only screen and (max-width: 780px) {
    .form-group {
        margin-bottom: 24px;
    }
    .btn-submit {
        width: 100%;
        padding: 16px 0;
    }
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++
新着情報 ページ
++++++++++++++++++++++++++++++++++++++++++++++++++*/
#second-contents{
    & .news-flx-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    & .news-flx-box .left{
        width: 170px;
    }
    & .news-flx-box .right{
        width: calc(100% - 270px);
    }
    & .news-nav .category-title{
        font-size: clamp(22px, 2.4vw, 24px);
        font-weight: 500;
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: solid 1px #E6E6E6;
    }
    & .news-nav .category-list .category-item{
        margin-bottom: 12px;
    }
    & .news-nav .category-list .category-link{
        font-size: clamp(15px, 1.6vw, 16px);
        font-weight: 600;
        transition:  color .3s;
    }
    & .news-nav .category-list a:hover.category-link{
        color: #B76E4C;
    }
    
}
@media only screen and (max-width: 780px) {
    #second-contents{
        & .news-flx-box .left{
            width: 100%;
            margin-bottom: 50px;
        }
        & .news-flx-box .right{
            width: 100%;
        }
    }
}
#single_n-contents{
    margin-bottom: clamp(100px, 14vw, 120px);
    & .wrapper-min{
        font-family: "Noto Serif JP", serif, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "游ゴシック", "Yu Gothic", "メイリオ", "sans-serif";
        max-width: 800px;
        width: 90%;
        margin: auto;
    }
    & .single-title{
        margin-bottom: clamp(40px, 6vw, 50px);
    }
    & .post-meta{
        margin-bottom: 20px;
    }
    & .post-meta > *{
        display: inline-block;
    }
    & .post-meta .time{
        & span{
            font-size: 14px;
            line-height: 1.4em;
            font-weight: 500;
            color: #6C757D;
            margin-right: 30px;
        }
    }
    & .post-meta .category{
        min-width: 120px;
        & span{
            display: inline-block;
            text-align: center;
            font-size: 14px;
            color: #293254;
            line-height: 1.5em;
            background-color: #F1F2F8;
            padding: 8px 5px;
            min-width: 140px;
        }
    }
    & .single-title .midashi{
        margin-top: clamp(10px, 1.5vw, 15px);
    }
    & .single-title .midashi .txt{
        font-size: clamp(18px, 2.2vw, 20px);
    }
    & h1{
        font-size: clamp(22px, 3vw, 28px);
        line-height: 1.4em;
        font-weight: 500;
        text-align: center;
        position: relative;
        padding-bottom: 25px;
    }
    & h1::after{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        content: '';
        display: inline-block;
        background-image: url(../images/midashi_h2_title.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 2em;
        height: 1em;
    }
    & h2{
        font-size: clamp(22px, 2.6vw, 24px);
        line-height: 1.7em;
        margin-bottom: clamp(30px, 4vw, 40px);
        padding-bottom: 10px;
        border-bottom: solid 2px #E6E6E6;
        position: relative;
    }
    & h2::after{
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 40px;
        height: 2px;
        background-color: #293254;
    }
    & h3{
        font-size: clamp(20px, 2.5vw, 24px);
        line-height: 1.8em;
        font-weight: 500;
        margin-bottom: 15px;
        padding-left: 15px;
        position: relative;
    }
    & h3::before{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        content: '';
        width: 8px;
        height: 8px;
        background-color: #293254;
    }
    & h4{
        font-size: clamp(20px, 2.5vw, 24px);
        line-height: 1.8em;
        font-weight: 800;
        margin-bottom: 15px;
    }
    & h5{
        font-size: clamp(17px, 2vw, 18px);
        line-height: 1.7em;
        font-weight: 700;
        margin-bottom: 15px;
        padding-left: 22px;
        position: relative;
        color: #293254;
    }
    & h5::before{
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 10px;
        margin: auto;
        width: 6px;
        height: 6px;
        background-color: #9898A4;
        border-radius: 100px;
    }
    & h6{
        font-size: clamp(15px, 1.6vw, 16px);
        line-height: 1.8em;
        font-weight: 800;
        margin-bottom: 10px;
    }
    & p{
        font-size: clamp(15px, 1.6vw, 16px);
        line-height: 1.7em;
        margin-bottom: 10px;
    }
    & img{
        max-width: 100%;
        height: auto;
        margin-bottom: 10px;
    }
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++
施工事例 記事ページ
++++++++++++++++++++++++++++++++++++++++++++++++++*/
#single_w-contents{
    margin-bottom: clamp(100px, 14vw, 120px);
    & .wrapper-min{
        font-family: "Noto Serif JP", serif, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "游ゴシック", "Yu Gothic", "メイリオ", "sans-serif";
        max-width: 800px;
        width: 90%;
        margin: auto;
    }
    & .single-title{
        margin-bottom: 25px;
    }
    & .single-title .category{
        min-width: 120px;
    }
    & .single-title .category .txt{
        display: inline-block;
        text-align: center;
        font-size: 14px;
        color: #fff;
        line-height: 1.5em;
        background-color: #293254;
        padding: 8px 5px;
        min-width: 140px;
    }
    & .single-title .midashi{
        margin-top: clamp(10px, 1.5vw, 15px);
    }
    & .single-title .midashi .txt{
        font-size: clamp(18px, 2.2vw, 20px);
    }
    & .thumbnail{
        max-width: 1200px;
        width: 90%;
        margin: auto auto clamp(40px, 5vw, 50px);
        & img{
            width: 100%;
        }
    }
    & .works-spec{
        margin-bottom: 100px;
    }
    & .works-spec .title{
        font-size: clamp(20px, 2.4vw, 24px);
        font-weight: 500;
        position: relative;
        padding-left: 15px;
        margin-bottom: 20px;
    }
    & .works-spec .title::before{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        content: '';
        width: 8px;
        height: 8px;
        background-color: #293254;
    }
    & .works-spec ul li{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        border-top: solid 1px #E6E6E6;
        padding: 20px 0;
    }
    & .works-spec ul li:last-child{
        border-bottom: solid 1px #E6E6E6;
    }
    & .works-spec ul li .label{
        width: 8em;
    }
    & .works-spec ul li .value{
        width: calc(100% - 9em);
    }
    & .works-spec ul li .txt{
        font-size: clamp(15px, 1.6vw, 16px);
        line-height: 1.8em;
    }
    & .works-spec ul li .label .txt{
        font-weight: 700;
    }
    & .works-contents .midashi h6{
        font-size: clamp(22px, 2.6vw, 24px);
        line-height: 1.7em;
        margin-bottom: clamp(30px, 4vw, 40px);
        padding-bottom: 10px;
        border-bottom: solid 2px #E6E6E6;
        position: relative;
    }
    & .works-contents .midashi h6::after{
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 40px;
        height: 2px;
        background-color: #293254;
    }
    & .works-contents .komidashi{
        font-size: clamp(15px, 1.6vw, 16px);
        line-height: 1.8em;
        margin-bottom: clamp(30px, 4vw, 40px);
    }
    & .works-contents .construction{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: clamp(40px, 5vw, 50px);
    }
    & .works-contents .construction .box{
        width: 48%;
    }
    & .works-contents .construction .box > *{
        margin-bottom: 10px;
    }
    & .works-contents .construction .box figure{
        width: 100%;
    }
    & .works-contents .construction .box .caption{
        font-size: clamp(14px, 1.5vw, 15px);
        line-height: 1.6em;
        text-align: center;
    }
    & .works-contents .txt-box{
        font-size: clamp(15px, 1.6vw, 16px);
        line-height: 1.6em;
        margin-bottom: clamp(40px, 5vw, 50px);
    }
}
@media only screen and (max-width: 780px) {
    #single_w-contents{
        & .thumbnail{
            width: 100%;
        }
        & .works-spec ul li .label{
            width: 100%;
            margin-bottom: 20px;
        }
        & .works-spec ul li .value{
            width: 100%;
        }
    }
}
/* ナビゲーション全体のコンテナ 
.post-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 500px;
    margin: 0 auto;
    padding-top: 70px;
}
.post-navigation__prev,
.post-navigation__archive,
.post-navigation__next {
    flex: 1;
    display: flex;
}
.post-navigation__prev { justify-content: flex-start; }
.post-navigation__archive { justify-content: center; }
.post-navigation__next { justify-content: flex-end; }
.post-navigation a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #333333;
    font-size: 15px;
    font-weight: 500;
    transition: color 0.3s ease;
    gap: 10px;
}
.post-navigation a:hover {
    color: #B76E4C;
}
.arrow-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #B76E4C;
    border-radius: 50%;
    color: #ffffff;
    font-size: 14px;
    line-height: 1;
    transition: opacity 0.3s ease;
}
.post-navigation a:hover .arrow-circle {
    opacity: 0.8;
}*/
.post-navigation{
    position: relative;
    max-width: 500px;
    margin: 0 auto;
    /* padding-top: 70px; */
    height: 120px;
    & h2{
        display: none;
    }
    & a{
        text-decoration: none;
        color: #333333;
        font-size: 15px;
        font-weight: 500;
        transition: color 0.3s ease;
    }
    & a:hover{
        color: #B76E4C;
    }
    & .navigation{
        position: absolute;
        bottom: 0;
        left: 0;
        margin: auto;
        width: 100%;
    }
    & .navigation .nav-links{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    & .post-navigation__archive{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 100px;
        & a{
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 4px;
        }
    }
    & .post-navigation__archive .icon-grid {
        display: inline-grid;
        grid-template-columns: repeat(3, 3px);
        grid-template-rows: repeat(3, 3px);
        gap: 1px;
    }
    & .post-navigation__archive .icon-grid span {
        display: block;
        width: 3px;
        height: 3px;
        background-color: #9898A4;
        transition: background-color 0.3s ease;
    }
    & .post-navigation__archive a:hover .icon-grid span{
        background-color: #B76E4C;
    }
    & .nav-previous a{
        position: relative;
        padding-left: 12px;
    }
    & .nav-next{
        margin-left: auto;
    }
    & .nav-next a{
        position: relative;
        padding-right: 12px;
    }
    & .nav-previous a::after,
    & .nav-next a::after{
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 7px;
        height: 7px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transition: border-color .3s;
    }
    & .nav-previous a::after{
        left: 0;
        border-left: solid 1px #9898A4;
        border-bottom: solid 1px #9898A4;
    }
    & .nav-next a::after{
        right: 0;
        border-top: solid 1px #9898A4;
        border-right: solid 1px #9898A4;
    }
    & .nav-previous a:hover::after,
    & .nav-next a:hover::after{
        border-color: #B76E4C;
    }
}
 @media only screen and (max-width: 780px) {
    .post-navigation a {
        font-size: 13px;
        gap: 8px;
    }
    .arrow-circle {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}