@charset "UTF-8";
@import url('css/reset.css');


body.home,
body.page-template-page-about,
body.page-template-page-service,
body.page-template-page-work,
body.page-template-page-news,
body.page-template-page-contact,
body.page-template-page-privacy-policy,
.single,
.page-template-page-contact-confirm,
.page-template-page-contact-complete,
error404
{
overflow-y: unset;
}

body{
background: #342C25;
color: #f5f5f5;
font-weight: lighter;
font-size: 12px;
font-family: 'Cinzel','游明朝','Yu Mincho','Hiragino Mincho Pro';
letter-spacing: 3px;
line-height: initial;
overflow: hidden;
}

::selection {
background: #cfa7a770;
}



/*
------------------------------------------------------
animation
------------------------------------------------------
*/
@keyframes noise-anim {
from {
background-position: 0 0;
}
to {

background-position: 100% 100%;
}
}

.noise {
background-image: url("img/back-noise.png");
background-repeat: repeat;
animation: noise-anim 0.2s infinite linear alternate-reverse;
}


#scrolltarget{
display: none;
position: fixed;
top: 0;
left: 0;
}

#cursor{
position: fixed;
background: #cfa7a770;
border-radius:10px;
width: 1em;
height: 1em;
margin: -10px 0 0 -10px;
z-index: 2;
pointer-events: none;
opacity: 0;
transition: transform 0.1s;
}

#stalker{
position: fixed;
background: #ffffff70;
width: 100px;
height: 100px;
border-radius:30px;
margin: -30px 0 0 -30px;
z-index: 1;
pointer-events: none;
opacity: 0;
transition: transform 0.5s;
}

#cursor.active,
#stalker.active{
transform: scale(4.5);
}



/*
------------------------------------------------------
common-1
------------------------------------------------------
*/
a{
color: #f5f5f5;
text-decoration: none;
	display: block;
	width: 100%;
}

.link-btn{
margin-top: 0px;
}

.link-btn a{
display: inline-block;
border-bottom: 1px solid #525050;
}

img{
object-fit: cover;
}

h1{
font-size: 2.5rem;
}

h2{
font-size: 1.2rem;
}

nav li{
font-size: .8rem;
}

.sub-head{
font-size: .8rem;
}

p, li, dt, dd {
font-size: .8rem;
letter-spacing: 2px;
}

.link {
    width: fit-content;
margin-top: 3rem;
}

.link a {
display: inline-block;
border-bottom: 1px solid #525050;
color: #f5f5f5;
}

.spacer{
margin-left: 2em;
}

.fixed{
position: fixed
}

.non-display{
display: none;
}

.red {
color: red;
}

.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: brightness(50%) grayscale(50%);
transition: all 0.3s ease-in;
}

.title__icon{
    align-items: center;
    display: flex;
    ustify-content: start;
}

.title__icon::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
background-color: #6D0303;
  background-size: contain;
  margin-right: 1em;
    display: block;
    eight: var(--gx);
    idth: var(--gx);
 }

.scrol-arrow__icon{
    align-items: center;
    display: flex;
    ustify-content: start;
}

.scrol-arrow__icon::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: url(img/common/arrow.png) no-repeat;
  background-size: contain;
  margin-right: 1em;
  transform: rotate(-90deg);
 }


.move-arrow__icon{
	justify-content: space-between;
    align-items: center;
    display: flex;
    ustify-content: start;
    padding: 2rem .5rem 2rem .5rem;
}

.move-arrow__icon::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: url(img/common/arrow.png) no-repeat;
  background-size: contain;
  margin-left: 1em;
  transform: rotate(180deg);
 }


.top-return-arrow__icon{
align-items: center;
display: flex;
}
  
.top-return-arrow__icon::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: url(img/common/arrow.png) no-repeat;
  background-size: contain;
  margin-right: 1em;
  transform: rotate(90deg);
 }

.scroll-text p{
align-items: center;
display: flex;
}
  
.scroll-text p::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: url(img/common/arrow.png) no-repeat;
  background-size: contain;
  margin-right: 1em;
  transform: rotate(-90deg);
 }
 
 .g-map__icon{
	justify-content: space-between;
    align-items: center;
    display: flex;
    ustify-content: start;
    padding: 2rem 0 0 0;
}

.g-map__icon::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: url(img/common/g-map__icon.png) no-repeat;
  background-size: contain;
  margin-left: 1em;
  transform: rotate(0deg);
      filter: invert(1);
 }
 
 
 .outer-link__icon{
	justify-content: center;
    align-items: center;
    display: flex;
    ustify-content: start;
    padding: 2rem .5rem 2rem .5rem;
}

.outer-link__icon::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: url(img/common/outer-link.svg) no-repeat;
  background-size: contain;
  margin-left: 0.3em;
 transform: rotate(0deg);
    filter: invert(1);
 }
 
 .del{
	 text-decoration: line-through;
 }

/*
------------------------------------------------------
common-2
------------------------------------------------------
*/
.main-content {
width: 100%;
height: auto;
position: relative;
}

.single .main-content {
background: #B19A7D;
}

/*-- fv --*/
.fv{
background: #B19A7D;
position: relative;
margin: 0 auto;
width: 100%;
height: 100vh;
}

.fv .catch-copy{
position: absolute;
width: 95%;
top: 50%;
transform: translate(0%, -50%);
left: 2.5%;
}

.fv .catch-copy .content-inner {
}

.fv .catch-copy .title {
padding-left: 10px;
border-left: 5px solid #6D0303;
}


/*-- kv --*/
.kv{
display: block;
width: 100%;
height: 15vh;
position: absolute;
left: 0;
bottom: 0;
}

.kv img{
display: block;
width: 100%;
height: 70vh;
background: #6e5c5c;
position: absolute;
object-fit: cover;
}


.fv-scroll{
width: 95%;
left: 2.5%;
bottom: 2rem;
        font-size: .6rem;
}

.fade-out{
 position: fixed; /* 重要 */
  pointer-event: all;
 z-index:999; /* 重要 */
}
 
.hidden {
    animation: fade .2s ease-in-out forwards;
    pointer-events:none;/* 重要 */
}

@keyframes fade {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.visible {
    animation: fadeOut .2s ease-in-out forwards;
    pointer-events:all;/* 重要 */
}

@keyframes fadeOut {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*-- breadcrumb --*/
.breadcrumb-box {
width: 100%;
display: inline-block;
margin: 10rem auto 3rem;
}

.breadcrumb-box nav {
display: contents;
}

.breadcrumb {
width: 95%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
list-style: none;
}

.breadcrumb-box nav li {
display: inline-block;
margin: 0;
}

.breadcrumb a{
display: inline;
}

.breadcrumb li:not(:last-of-type)::after {
content: "›";
margin: 0 .6em;
color: #f5f5f5;
}


/*
------------------------------------------------------
header
------------------------------------------------------
*/

.head {
filter: none;
transition: .5s;
}

.head.invert {
filter: invert(1);
}


header {
top: 1rem;
position: fixed;
position: -webkit-sticky;
width: 100%;
z-index: 100;
box-sizing: border-box;
margin: 0 auto;
align-items: center; /* 垂直方向のセンタリング */
display: flex;
}

header .content-inner{
margin: 0 auto;
width: 95%;
height: 60px;
}

header .flexbox {
display: flex;
justify-content: space-between;
align-items: inherit;

}

header nav, header .head-logo {
flex-shrink: 0;
align-items: center; /* ロゴの縦位置をセンタリング */
display: flex;
}

header .head-logo{
font-size: 1rem;
font-weight: bold;
}

header .head-logo a {
font-weight: normal;
text-decoration: none;
color: #f5f5f5;
}

header .head-logo img{
width: 70px;
height: auto;
filter: invert(1);
}

header nav{
height: auto;
overflow: visible;
text-align: end;
}

header li {
margin-right:;
margin-right: 0.8rem;
height: auto;
overflow: visible;
text-align: end;
display: inline-block;
/* transition: all 1s ease-out; アニメーションを追加 */
}

header li:last-child{
margin-right: 0;
margin-bottom: 0;
}

.arrow {
margin-right: 10px;
transform: rotate( -90deg );
width: 20px;
height: 20px;
}

.arrow-up {
margin-left: 10px;
transform: rotate( 90deg );
width: 45px;
height: 45px;
}



/*------------- nav -------------*/

.menu {
margin-right: 10px;
}

.menu ul {
display: flex;
justify-content: space-around;
list-style: none;
padding: 0;
}

.menu li {
margin-left: 35px;
line-height: 1.5;
position: relative;
}

.menu li a {
text-decoration: none;
color: #f5f5f5;
font-size: 12px;
letter-spacing: 2px;
}

.menu li.onlineshop a {
display: inline-block;
padding: 1px 18px;
background-color: white;
color: black;
border-radius: 20px;
text-decoration: none;
transition: 0.3s;
}

.menu-icon {
cursor: pointer;
font-size: 12px;
text-align: center;
color: #f5f5f5;
z-index: 1000;
}

.mobile-hidden {
display: none;
}




/*
------------------------------------------------------
side-menu
------------------------------------------------------
*/
.side-fixed {
width: 100%;
height: 100vh;
right: 0;
position: relative;
z-index: 1;
}


#circular-text {
position: absolute !important;
font-size: 8px !important;
color: #f5f5f5;
letter-spacing: -0.5em;
top: 50% !important;
right: 2.5% !important;
transform: translate(0, -50%) !important;
}

/*
------------------------------------------------------
top
------------------------------------------------------
*/


body.home .kv img{
display: block;
width: 100%;
height: 70vh;
}


/*------------- top-work -------------*/


.top-work-content {
width: 100%;
margin: 80vh 0 0;
}

.top-work-content .content-inner {
display: block;
width: 95%;
margin: 0 auto;
}

.top-work-content .content-inner .title{

}

.top-work-content .content-inner p{
margin-right: 5%;
}

.top-work-content .content-inner .flex-box{
display: flex;
align-items: center;
justify-content: space-between;
}

.top-work-content .select-nav{
margin-top: ;

}

.select-nav .content-inner {
width: 100%;
margin: 0;
}

.select-nav ul{
display: flex;
}

.select-nav li{
margin-right: 2rem;
}

.select-nav li:last-child{
margin-right: 0;
}

.top-work-content .work-select{
width: 100%;
margin: 3rem 0 0 auto;
}


/*-- 素材から選ぶ --*/
.top-work-content .material{
width: 100%;
}

.top-work-content .material .grid{
display: grid;
gap: 0 30px;
grid-template-columns: repeat(2, 1fr);
}

.top-work-content .material li:nth-of-type(n+3){
border-top: none;
}

.top-work-content .material li{
box-sizing: content-box;
border-top: 1px solid #525050;
border-bottom: 1px solid #525050;
}


/*-- 用途から選ぶ --*/
.top-work-content .purpose{
width: 95%;
}

.top-work-content .purpose dl{
background: aliceblue;
}

.top-work-content .purpose dl .grid{
display: inline-block;
gap: 9px 9px;
grid-template-columns: repeat(7, 0fr);
}

.top-work-content .purpose dl .item{
display: inline-block;
width: auto;
height: 150px;
}

.top-work-content .purpose dt{
}


/*-- よくある補修事例 --*/
.top-work-content .situation{

width: 50%;
}

.top-work-content .situation .grid{
display: grid;
gap: 0 30px;
grid-template-columns: repeat(2, 1fr);
}


.top-work-content .situation li:nth-of-type(n+3){
border-top: none;
}

.top-work-content .situation li{
box-sizing: content-box;
border-top: 1px solid #525050;
border-bottom: 1px solid #525050;
}


/*
------------------------------------------------------
top-work-content　タブ切り替え
------------------------------------------------------
*/
/* 初期状態ですべて非表示 */
.top-work-content .material, .top-work-content .purpose-area, .top-work-content .situation {
display: none;
}

/* 選択された要素を表示するためのクラス */
.top-work-content .show {
display: block;
}

.select-nav ul li {
cursor: pointer;
    cursor: pointer;
    display: inline-block;
    padding: 1px 18px;
    border: 1px solid;
    border-radius: 20px;
    text-decoration: none;
    transition: 0.3s;
    white-space: nowrap;
}

/*------------- concept-img -------------*/

.concept-img-content{
	width: 100%;
margin-top: 20rem;
}

.concept-img-content .content-inner{

width: 95%;
margin: 0 auto;
}

.concept-img-content .content-inner img{
width: ;
}

.concept-img-content .content-inner .img-1{
	position: absolute;
margin-left:;
}

.concept-img-content .content-inner .img-1 img{
width: 50vh;
height: 21vh;
}

.concept-img-content .content-inner .img-2{
width: 60%;
margin-top: 0;
margin-left: auto;
}

.concept-img-content .content-inner .img-2 img{
width: 100%;
height: 40vh;
}


/*------------- top-service -------------*/
.top-service-content {
width: 100%;
margin: 20rem 0 0;
}

.top-service-content .content-inner {
display: block;
width: 95%;
margin: 0 auto;
}


.top-service-content .content-inner .flex-box{
display: flex;
align-items: center;
justify-content: space-between;
}

.top-service-content .title{
width: 100%;
}

.top-service-content .content-inner p{

}

.top-service-content .service-select{
width: 100%;
margin-top: 3rem;
}

.top-service-content .service-select img{

}

.service-select .image-item:first-child{
    border-top: 1px solid #525050;
}

.service-select .image-item {
flex: 1;
position: relative;
    overflow: hidden;
    height: 14rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #525050;
}

.service-select .image-item img {
position: absolute;
width: 35%;
height: 14rem;
display: block;
background: #6e5c5c;
margin-right: auto;
}

.service-select .image-item img.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: brightness(50%) grayscale(50%);
transition: all 0.3s ease-in;
}

.service-select .image-item img.gray:hover {
filter: none;
transition: all 0.3s ease-in;
}

.service-select .sub-head {
width: 60%;
height: 100%;
box-sizing: border-box;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0%, -50%);
    color: #f5f5f5;
}



/*
------------------------------------------------------
about
------------------------------------------------------
*/
.about-content {
width: 100%;
margin: 80vh auto 0;
}

/*-- about_select nav --*/
.about-content .page-select-nav{
width: 95%;
ax-width: 60rem;
margin-left: auto;
margin-right: auto;
padding-top: 1rem;
padding-bottom: 1rem;
border-top: 1px solid #525050;
border-bottom: 1px solid #525050;
}

.about-content .page-select-nav ul{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}

.about-content .page-select-nav ul:first-child{
margin-top: 0;
}

.about-content .page-select-nav li {
	align-items: center;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
position: relative;
}

.about-content .page-select-nav li a{
justify-content: center;
    align-items: center;
    display: flex;
    padding: 1em;
    font-weight: var(--fwb);
    font-family: var(--min);
    letter-spacing: .06em;
    line-height: 1;
    color: var(--Title);
    fill: var(--Title);
    white-space: nowrap;
}

  
.about-content .page-select-nav li a::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: url(img/common/arrow.png) no-repeat;
  background-size: contain;
  margin-left: 1em;
  transform: rotate(-90deg);
 }

.about-content .page-select-nav .content-inner{
width: 90%;
margin: 0 auto ;
}

.about-content .title{
	margin-left: -1.2rem;
}


.about{
margin-top: 10rem;
}

.about .content-inner{
	position: relative;
width: 95%;
margin: 0 auto ;
}

.about .concept{
margin-top: 2rem;
width: 60%
}

.about .concept-img{
margin-top: ;
}

.about .flex-box{
display: block;
}

.about .concept .sub-head {
font-size: 5rem;
}

.about-content p.text{
width: ;
font-size: ;
}

.about .concept-img{
margin-top: 3rem;
}

.concept-img .flex-box{
display: flex
}

.about .img-1{
width: 12rem;
height: 17rem;
margin-right: 3rem;
}

.about .img-2{
width: 20rem;
height: 25rem;
}

.about img{
width: 100%;
height: 100%;
object-fit: cover;
}

body.page-template-page-about .side-fixed {
height: 100vh;
right: 0;
position: absolute;
z-index: 1;
/* top: 0; */
}

body.page-template-page-about #circular-text {
position: absolute !important;
font-size: 8px !important;
color: #f5f5f5;
letter-spacing: -0.5em;
top: 0 !important;
right: 0% !important;
transform: none !important;
}

.about-value{
margin-top: 20rem;
width: 100%;
height: 75vh;
background-image: url(img/about/about_img01.jpg);
background-size: cover;
background-repeat: no-repeat;/*画像が繰り返すのを防ぐ*/
transition: all 0.3s ease-in;
}

.about-value .content-inner{
/* width: 90%; */
/* height: 50vh; */
margin: 0 auto;
position: relative;
top: 50%;
transform: translate(0%, -50%);
}

.about-value .title{
margin-left: -1.2rem;
}

.about-value .grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

.about-value .about-value-section{
text-align: center;
padding: 6rem 3rem;
border-right: 1px solid #858585;
border-right: 1px solid #858585;
}

.about-value .about-value-section:last-child{
border-right: none;
}

.about-outline{
margin-top: 20rem;
}

.about-outline .content-inner{
width: 95%;
margin: 0 auto;
}

.about-outline .data-list-blk:first-child{
border-top: 1px solid #525050;
}

.about-outline .data-list-blk{
flex-direction: row;
padding-block: 3rem;
border-bottom: 1px solid #525050;
}

.about-outline .flex-box{
display: flex;
}

.about-outline dl{
width: 100%;
margin-top: 1rem;
}

.about-outline dt{
width: 10%;
}

.about-outline dd{
width: 70%;
}

.about-access{
margin-top: 20rem;
}

.about-access .content-inner{
width: 95%;
margin: 0 auto;
}

.about-access .google-map{
margin-top: 1rem;
}

.about-access .link {
    margin-top: 0;
}

.about-access .move-arrow__icon {
    padding: 0;
}


/*
------------------------------------------------------
service
------------------------------------------------------
*/
.service-content {
width: 100%;
margin: 50vh auto 0;
}

.service-content .select-nav .content-inner{
width: 95%;
margin: 0 auto ;
}

/*-- page_select nav --*/
.service-content .page-select-nav{
width: 95%;
ax-width: 60rem;
margin-left: auto;
margin-right: auto;
padding-top: 1rem;
padding-bottom: 1rem;
border-top: 1px solid #525050;
border-bottom: 1px solid #525050;
}

.service-content .page-select-nav ul{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}

.service-content .page-select-nav ul:first-child{
margin-top: 0;
}

.service-content .page-select-nav li {
	align-items: center;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
position: relative;
}

.service-content .page-select-nav li a{
justify-content: center;
    align-items: center;
    display: flex;
padding: 1em;
font-weight: var(--fwb);
font-family: var(--min);
letter-spacing: .06em;
line-height: 1;
color: var(--Title);
fill: var(--Title);
white-space: nowrap;
}

  
.service-content .page-select-nav li a::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: url(img/common/arrow.png) no-repeat;
  background-size: contain;
  margin-left: 1em;
  transform: rotate(-90deg);
 }

.service-content .page-select-nav .content-inner{
width: 90%;
margin: 0 auto ;
}


.service-img{
	width: 95%;
margin: 9rem auto 0;	
}

.service-comment{
	width: 90%;
text-align: center;
margin: 0 auto;
}

.service-content img{
width: 100%;
height: 300px;
}

.service-content .flex-box{
display: flex;
justify-content: space-between;
}

.service-content .select-nav ul{
display: flex;
margin-top: 1rem;
}


.service-list {
margin-top: 10rem;
}
.service-list .content-inner{
width: 95%;
margin: 0 auto ;
}

.service-renovation, .service-paint, .service-area{
margin-top: 20rem;
}


.service-content .r-content{
width: 60%;
}

.service-content .l-content{
width: 30%;
}

.service-content .title{
margin-top: 0rem;
}

.service-content .service-price{
width: 100%;
}

.service-content .service-price .data-list-blk:first-child {
border-top: 1px solid #525050;
}

.service-content .service-price .data-list-blk{
justify-content: unset;
flex-direction: row;
padding-block: 3rem;
border-bottom: 1px solid #525050;
}

.service-content .service-price dl{
width: 100%;
margin-top: 1rem;
}

.service-content .service-price dt{
width: 24rem;
padding-right: 4rem;
}

.service-price p.annotation{
margin-top: 3rem;
}

.service-area .content-inner{
width: 95%;
margin: 0 auto ;
}

/*
------------------------------------------------------
work
------------------------------------------------------
*/

body.page-template-page-work .main-content {
background: #B19A7D;
}


body.page-template-page-work .fv{
background: #B19A7D;
position: relative;
margin: 0 auto;
width: 100%;
height: 50vh;
}

body.page-template-page-work .fv .catch-copy{
position: absolute;
width: 95%;
top: 80%;
transform: translate(0%, -50%);
left: 2.5%;
}

.work-content{
width: 100%;
}

.work-content .content-inner{
width: 95%;
margin: 0 auto;
}

.work-content .content-inner .select-nav{
width: 300px;
margin-top: 0;
ackground: aqua;
}


.work-content .content-inner .select-nav h2{
margin-top: 2rem;
font-size: 1rem;
}

.work-content .content-inner .select-nav h2:first-child{
margin-top: 0;
}

.work-content .content-inner .select-nav ul{
display: inline-block;
margin-top: 1rem;

}

.work-content .content-inner .select-nav ul:first-child{
margin-top: 0;
}

.work-list{
	display: flex;
	flex-wrap: wrap;
}

.list-box{
  width: 32%;
  background-color: ;
}

.list-box:not(:nth-child(3n+3)) {
  margin-right: 2%;
}

.list-box:nth-child(n+4) {
  margin-top: 30px;
}


.work-content .content-inner .work-list .list-box img{
width: 100%;
height: 100%;
object-fit: cover;
}

.work-content .work-list .list-box a{
display: inline;
}


/*-- single-work --*/

.single .fv {
background: #B19A7D;
position: relative;
margin: 0 auto;
width: 100%;
height: 50vh;
}

.single .fv .catch-copy {
position: absolute;
width: 95%;
top: 80%;
transform: translate(0%, -50%);
left: 2.5%;
}

.single-work-content {
width: 100%;
margin: 0 auto;
}

.single-work-content .content-inner{
margin: 0 auto;
width: 95%;
}

.single-work-content .flex-box{
display: flex;
}

.single-work-content .data-list-blk{
    border-bottom: 1px dotted;
    margin-top: 1rem;
}

.single-work-content img{
width: 60%;
}

.single-work-content dt{
width: 15%;
}

.record_list {
margin-top: 1rem;
}

.work_record_img{
margin-top: 3rem;
}

.record_img{
margin-top: 1rem;
}

.af_img{
margin-top: 1rem;
}


/*
------------------------------------------------------
news
------------------------------------------------------
*/

body.page-template-page-news .main-content{
background: #B19A7D;
}

body.page-template-page-news .fv{
background: #B19A7D;
position: relative;
margin: 0 auto;
width: 100%;
height: 50vh;
}

body.page-template-page-news .fv .catch-copy{
position: absolute;
width: 95%;
top: 80%;
transform: translate(0%, -50%);
left: 2.5%;
}

.news-content{
width: 100%;
margin: 0 auto;
}

.news-content .content-inner{
width: 95%;
margin: 0 auto;
}

.news-content .date a{
width: 100%;
}

.news-content .time{
width: 10%;
display: inline-block;
}

/*-- single-news --*/

.single-news-content {
width: 100%;
margin: 0 auto;
}


.single-news-content .content-inner{
margin: 0 auto;
width: 95%;
}



/*
------------------------------------------------------
contact
------------------------------------------------------
*/

.contact-content {
width: 100%;
margin: 0;
}

.contact-content .content-inner{
margin: 0 auto;
width: 95%;
}

body.page-template-page-contact{

}

body.page-template-page-contact .fv{
background: #B19A7D;
position: relative;
margin: 0 auto;
width: 100%;
height: 50vh;
}

body.page-template-page-contact .fv .catch-copy{
position: absolute;
width: 95%;
top: 80%;
transform: translate(0%, -50%);
left: 2.5%;
}

body.page-template-page-contact .main-content {
background: #B19A7D;
}

.contact-content .content-inner .sales-contact{
margin-top: 0;
    padding: 3rem .5rem;
    border-top: 1px solid;
    border-bottom: 1px solid;
}

.contact-content .content-inner .sales-contact .mail{
	width: fit-content;
font-size: 1.5rem;
}

.sales-contact .mail .move-arrow__icon{
padding: 0;
}

.sales-contact .mail .move-arrow__icon::after {
}


.sales-contact a{
	border-bottom: 1px solid;
}

.contact-content .content-inner .sales-contact p{
margin-top: 3rem;
}

.contact-content .content-inner .customer-contact{
padding: 3rem 0;
}

.contact-content .wpcf7 {
margin-top: 50px;
color: #f5f5f5;
width: 100%;
}

.contact-contact .wpcf7 p{
padding: 0;
}

.contact-contact .wpcf7 span.req{
color: red;
}

.wpcf7 input[name="your-name"] {
width: 100%;
}

.wpcf7 input[name="your-email"] {
width: 100%;
}

.wpcf7 input[name="your-subject"] {
width: 100%;
}

.wpcf7 textarea[name="your-message"] {
width: 100%;
}

.wpcf7 input[name="tel-232"] {
width: 100%;
}

.form-field {
margin-bottom: 4rem;
width: 100%;
}

label {
display: block;
margin-bottom: .5rem;
}

input[type="text"], input[type="email"], input[type="tel"], select,textarea {
width: 100%;
padding: 10px 0;
border: none;
border-bottom: 1px solid #525050;
background-color: transparent;
color: #f5f5f5;
outline: none;
}

button {
padding: 10px 20px;
border: none;
background-color: #f5f5f5;
color: #000;
cursor: pointer;
}

input[type=checkbox],input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
position: relative;
right: 0;
bottom: 0;
left: 0;
height: 20px;
width: 20px;
vertical-align: -0.8rem;
transition:all .15s ease-out 0s;
color: #f5f5f5;
cursor: pointer;
display: inline-block;
margin: .4rem;
outline: none;
border-radius: 10%;
}

input[type=checkbox]:before,input[type=checkbox]:after {
position: absolute;
content: "";
background: #fff;
transition: all .2s ease-in-out;
}

input[type=checkbox]:before {
left: 2px;
top: 6px;
width: 0;
height: 2px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}

input[type=checkbox]:after {
right: 9px;
bottom: 3px;
width: 2px;
height: 0;
transform: rotate(40deg);
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transition-delay: .2s;
}

input[type=checkbox]:checked:before {
left: 1px;
top: 10px;
width: 6px;
height: 2px;
}

input[type=checkbox]:checked:after {
right: 7px;
bottom: 2px;
width: 2px;
height: 14px;
}

input[type=checkbox]:indeterminate:before,input[type=checkbox]:indeterminate:after {
width: 7px;
height: 2px;
transform: rotate(0);
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
}

input[type=checkbox]:indeterminate:before {
left: 1px;
top: 7px;
}

input[type=checkbox]:indeterminate:after {
right: 1px;
bottom: 7px;
}

.checkbox-section {
margin-bottom: 50px;
}

.checkbox-section input[type="checkbox"] {
height: 20px;
width: 20px;
vertical-align: -0.8rem;
transition:all .15s ease-out 0s;
color: #f5f5f5;
cursor: pointer;
display: inline-block;
margin: .4rem;
outline: none;
border-radius: 100%;
margin-right: 10px;
transform:scale(1.5);
border: 1px solid  #525050;
}

.checkbox-section input[type="checkbox"]:checked {
background: #000000;
}

.wpcf7-submit{
padding: 10px 20px;
background-color: #f5f5f5;
border: none;
color: #000;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
width: 150px;
}

.wpcf7-previous{
padding: 10px 20px;
background-color: inherit;
border: none;
color: #f5f5f5;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
width: 150px;
}

.wpcf7-submit:active {
transform: scale(0.95);
}

a.policy{
color: #f5f5f5;
text-decoration: underline;
}

.page-template-page-contact-confirm .form-field{
border-bottom: 1px solid #525050;
width: 37%;
}

.button-container {
margin-top: 70px;
}

.button-container p {
display: block;
gap: 20px;
align-items: center;
}



/*
------------------------------------------------------
privacy-policy
------------------------------------------------------
*/

body.page-template-page-privacy-policy .fv{
background: #B19A7D;
position: relative;
margin: 0 auto;
width: 100%;
height: 50vh;
}

body.page-template-page-privacy-policy .fv .catch-copy{
position: absolute;
width: 95%;
top: 80%;
transform: translate(0%, -50%);
left: 2.5%;
}

body.page-template-page-privacy-policy .main-content {
background: #B19A7D;
}

.privacy-policy-content {
width: 100%;
margin: 0;
}

.privacy-policy-content .content-inner{
margin: 0 auto;
width: 95%;
}

.privacy-policy{
background: #000;
display: block;
width: 100%;
}

.pp-section {
border-top: 1px dotted;
margin: 0;
padding: 50px 0;
}

.pp-section:last-child{
border-bottom: none;
border-bottom: 1px dotted;
}

.pp-section .txet-content{
margin-top: 1rem;
}



/*
------------------------------------------------------
footer
------------------------------------------------------
*/

body.home footer{
margin-top: 20rem;
}

footer {
width: 100%;
margin-top: 0;
}

.single footer{
margin-top: 0;
}

body.page-template-page-work footer {
margin: 0;
}

body.page-template-page-news footer {
margin: 0;
}

/*------------- others_content -------------*/
.others_content{
clear: both;
height: auto;
margin-top: 20rem;
}

.others_content .image_container {
display: flex;
    margin: 0 auto;
    width: 95%;
}

.others_content .image_item {
flex: 1;
    width: 100%;
    height: 15rem;
    position: relative;
    overflow: hidden;
}

.others_content .image_item img{
    width: 100%;
    height: 15rem;
}

.others_content .image_text{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #f5f5f5;
font-size: 2rem;
}

.others_content .image_item img.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: brightness(50%) grayscale(50%);
transition: all 0.3s ease-in;
}

.others_content .image_item img.gray:hover {
filter: brightness(50%) grayscale(50%);
transition: all 0.3s ease-in;
}


/*-- footer-online --*/
.f-online-content{
background: #3d362d;
width: 100%;
margin-top: 0rem;
}

.f-online-content .content-inner {
width: 100%;
margin: 0 auto;
padding: 0;
}

.f-online-content .content-inner .flex-box{
display: flex;
ustify-content: space-between;
}

.f-online-content .content-inner figure{
display: flex;
}

.f-online-content .online-img{
width: 50%;
eight: 40rem;
}

.f-online-content .content-inner img{
width: 100%;
height: 40rem;
}

.f-online-content .online-tool{
position: relative;
margin: 0 auto;
width: 45%;
height: 40rem;
}

.f-online-content .online-tool .content-inner{
position: absolute;
top: 50%;
transform: translate(0%, -50%);
}

.f-online-content .content-inner .title{
width: 100%;
text-align: center;
}

.f-online-content .content-inner .title h2 {
font-size: 2rem;
}

.online-item {
width: 75%;
margin: 5rem auto 0;
font-size: 2rem;
flex: 1;
border-top: 1px solid #525050;
border-bottom:  1px solid #525050;
}

.online-item a{
width: fit-content;
}

.online-item.move-arrow__icon{
	justify-content: center;
}

.online-item p{
font-size: 1rem;
}



/*-- footer-news --*/

.f-news-content {
background: #342C25;
width: 100%;
padding: 10rem 0;
}

.f-news-content .content-inner {
width: 95%;
margin: 0 auto;

}

.f-news-content .content-inner .title{
display: ;
width: 50%;
margin: 0;
}

.f-news-content .content-inner .flex-box{
display: flex;
align-items: center;
justify-content: space-between;
}

.f-news-content .select-nav {
margin-top: 0;
}

.f-news-content .content-inner .article{
display: ;
width: 100%;
margin-top: 3rem;
}


.article li:last-child{
border-bottom: 1px dotted #525050;
}

.article li{
box-sizing: content-box;
display: flex;
border-top: 1px dotted #525050;
}

.article li a{
		box-sizing: border-box;
	justify-content: space-between;
    align-items: center;
    display: flex;
    ustify-content: start;
    padding: 2rem .5rem 2rem .5rem;


}

.article li a:hover {
    background-color:#ebebeb0f;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;    }


.article li a::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: url(img/common/arrow.png) no-repeat;
  background-size: contain;
  margin-left: 1em;
  transform: rotate(180deg);
 }

.f-news-content .content-inner .article .date{
width: 100%;
}

.f-news-content .content-inner .article .date .time{
margin-right: 1rem;
}





/*------------- footer-contact -------------*/

.f-contact-content{
width: 100%;
background: #3d362d;
padding: 5rem 0;
}

.f-contact-content a {
display: block;
text-align: center;
color: #f5f5f5;
font-size: 5rem;
text-decoration: none;
padding: 5rem 0;
}

.contact-area-bg{
background: #2f2f2f;
padding: 0;
}

.contact-area a {
color: #f5f5f5;
display: block;
text-align: center;
font-size: 6rem;
padding: 12rem 0;
}

.text-adjustment{
display: inline-block;
position: relative;
top: -10px;
font-size: 12px;
}

div.footer-center-bottom{
cursor: pointer;
}

.footer-section a img {
height: 16px;
vertical-align: middle;
padding-right: 8px;
}



/*------------- footer-menu -------------*/

.f-menu-content .content-inner{
width: 95%;
margin: 0 auto;
padding-bottom: 20px;
}

footer .content-inner .flex-box {
display: flex;
align-items: baseline;;
justify-content: space-between;
}

footer h2{
flex-shrink: 0;
letter-spacing: inherit;
}

.l-footer .footer-text{
margin-top: 1rem;
}

footer .content-inner .f-top .r-footer{
margin-top: 5rem;
}

footer .content-inner .f-top .r-footer li{
margin-right: 2rem;
border-bottom: 1px solid #525050;
display: inline-block;
}

footer .content-inner .f-top .r-footer li:last-child{
margin-right: 0;
}

footer .content-inner .f-center {
    margin-top: 5rem;
    display: block;
    width: fit-content;
    margin-left: auto;
}

footer .content-inner .f-center .scroll {
text-align: end;
display: block;
}

span.scroll-text{
display: block;
font-size: 8px;
}

footer .content-inner .f-bottom {
margin-top: 5rem;
}



/* pc */
@media screen and (min-width: 769px) {
.u_769{
display: none !important;
}

.o_769{
display: block;
}

.menu-icon {
display: none;
}

.menu {
display: block !important;
}

}



/*
=================================================================================
tablet
=================================================================================
*/

@media only screen and (min-width: 768px) and (max-width: 1023px) {


/*
------------------------------------------------------
animation
------------------------------------------------------
*/
#cursor{
display: none;
}

#stalker{
display: none;
}

.horizontal-text-online{
display: none;
}


.c-text__item {
font-size: 8vw !important;
}

/*
------------------------------------------------------
common-1
------------------------------------------------------
*/




/*
------------------------------------------------------
common-2
------------------------------------------------------
*/
.main-content {
width: 100%;
height: auto;
position: relative;
margin: 0 auto;
}

.fv .catch-copy {
position: absolute;
width: 95%;
top: 40%;
transform: translate(0%, -50%);
left: 2.5%;
border-left: solid #6D0303;
}

.kv img {
display: block;
width: 100%;
height: 65vh;
}

.single {
background: #000;
display: block;
width: 100%;

}

.single h2{
font-size: 2rem;
margin-bottom: 50px;
}

.single .text-content{
color: #acacac;
font-size: 1.5rem;
margin-bottom: 50px;
}

.breadcrumb {
width: 95%;
}


/*
------------------------------------------------------
header
------------------------------------------------------
*/

header {
width: 100%;
}

header h1 {
font-size: 1rem;
}


header .content-inner{
margin: 0 auto;
width: 95%;
}

header .flex-box {
display: flex;
justify-content: space-between;
align-items: inherit;
height: auto;
}

header li {
margin-right: 0;
text-align: end;
display: block;
}

header li:last-child{
margin-bottom: 0;
}



/*
------------------------------------------------------
top
------------------------------------------------------
*/




/*------------- top-work -------------*/
.top-work-content {
width: 95%;
margin: 50vh auto 0;
}

.top-work-content .content-inner {
width: 100%;
margin: 0 auto;
}

.top-work-content .content-inner .flex-box{
display: block;
}

.top-work-content .work-select{
width: 100%;
margin: 5rem auto 0; 
}

/*-- 素材から選ぶ --*/
.top-work-content .material {
width: 100%;
}

/*-- 用途から選ぶ --*/
.top-work-content .purpose{
width: 100%;
}

.top-work-content .purpose dl {
}

/*-- よくある補修事例 --*/
.top-work-content .situation {
width: 100%;
}


/*------------- concept-img -------------*/
.concept-img-content .content-inner .img-1 img {
width: 30vh;
height: 15vh;
}

.concept-img-content .content-inner .img-2 {
margin-top: 4rem;
margin-left: 19vh;
}

.concept-img-content .content-inner .img-2 img {
width: 45vh;
height: 17vh;
}

/*------------- top-service -------------*/
.top-service-content .content-inner {
display: block;
width: 95%;
}

.top-service-content .content-inner .flex-box {
display: block;
}



/*
------------------------------------------------------
about
------------------------------------------------------
*/
.about-content {
width: 100%;
margin: 30vh auto 0;
}

.about-content .select-nav .content-inner {
width: 90%;
margin: 0 auto;
}

.about .concept .flex-box {
display: block;
}

.about p.concept-title {
width: 100%;
font-size: 4.5rem;
}

.about .img-1 {
width: 15rem;
height: 10rem;
margin-right: 3rem;
}

.about .img-2 {
width: 25rem;
height: 15rem;
}



/*
------------------------------------------------------
service
------------------------------------------------------
*/
.service-content {
margin: 30vh auto 0;
}

.service-content .flex-box {
display: grid;
}

.service-content .content-inner{
width: 95%;
}

.service-content .l-content {
order: 1;
width: 100%;
}

.service-content .l-content {
order: 2;
width: 100%;
}


/*
------------------------------------------------------
privacy-policy
------------------------------------------------------
*/




/*
------------------------------------------------------
contact
------------------------------------------------------
*/





/*
------------------------------------------------------
footer
------------------------------------------------------
*/

/*-- footer-online --*/
.f-online-content .content-inner {
display: block;
width: 100%;
margin: 0 auto;
padding: 0;
}

.f-online-content .online-tool .content-inner {
position: relative;
top: 0;
transform: none;
}

.f-online-content .content-inner .flex-box {
display: block;
}

.f-online-content .online-img {
width: 100%;
height: 20rem;
}

.f-online-content .content-inner img {
width: 100%;
height: 20rem;
}

.f-online-content .online-tool {
width: 95%;
height: 100%;
padding: 6rem 0;
}

body.page-template-page-news .f-online-content{
margin: 0;
}

.f-online-content .content-inner .title {
display: ;
width: 100%;
text-align: center;
}

.online-item p {
font-size: 1rem;
}

.online-item {
width: auto;
}

.f-news-content .content-inner {
width: 95%;
margin: 0 auto;
}

.f-news-content .content-inner .flex-box {
display: flex;
align-items: center;
justify-content: space-between;
}

.f-news-content .content-inner .title {
width: 50%;
margin: 0;
}

.f-news-content .select-nav {
margin-top: 0;
}

.f-news-content .content-inner .article {
display: ;
width: 100%;
margin-top: 5rem;
}

footer .content-inner .flex-box {
display: inline-block;
}

footer .content-inner .f-top .r-footer li {
display: block;
}

footer .content-inner .f-center .scroll {
text-align: start;
}

span.scroll-text {
display: block;
}

}



/*
=================================================================================
smartPhone
=================================================================================
*/
@media screen and (max-width: 767px) {


/*
------------------------------------------------------
アニメーション
------------------------------------------------------
*/

#cursor{
display: none;
}

#stalker{
display: none;
}


/*
------------------------------------------------------
common-1
------------------------------------------------------
*/
.u_769{
display: block;
}

.o_769{
display: none !important;
}

.br::before {
content: "\A";
white-space: pre;
}

h1{
font-size: 2rem;
}

h2{
font-size: .8rem;
}

p, li, dt, dd {
font-size: .8rem;
}

/*
------------------------------------------------------
common-2
------------------------------------------------------
*/
.main-content {
width: 100%;
height: auto;
position: relative;
margin: 0 auto;
}

.fv .catch-copy {
position: absolute;
width: 95%;
top: 37%;
transform: translate(0%, -50%);
}

.kv {
width: 100%;
height: 56vh;
}

.kv img {
display: block;
width: 97.5%;
height: 24vh;
background: #6e5c5c;
position: absolute;
right: 2.5%;
object-fit: cover;
}

.fv-scroll{
width: 95%;
left: 2.5%;
}

.single {
display: block;
width: 100%;
}

.single .text-content{
color: #acacac;
font-size: 1.5rem;
margin-bottom: 50px;
}


.about-content .title {
    margin-left: -0.8rem;
}

.title__icon::before {
    content: "";
    display: inline-block;
    width: .5rem;
    height: .5rem;
    background-color: #6D0303;
    background-size: contain;
    margin-right: 0.5em;
    display: block;
}

.about-outline dt {
width: 24%;
}

/*
------------------------------------------------------
header
------------------------------------------------------
*/
header {
position: fixed;
width: 100%;
}

header h1 {
font-size: 1rem;
}


header .content-inner{
margin: 0 auto;
width: 95%;
}

header .flex-box {
display: flex;
justify-content: space-between;
align-items: inherit;
height: auto;
}

header .head-logo img {
width: 50px;
height: auto;
}

header li {
margin-right: 0;
text-align: end;
display: block;
}

header li:last-child{
margin-bottom: 0;
}

body.page-template-page-about .side-fixed {
display: none;
}

#circular-text{
  font-size: 8px !important;
  color: #f5f5f5;
z-index: 2;
position: absolute !important;
left: 2% !important;
transform: none !important;
top: 25% !important;
right: 2.5% !important;
transform: translate(0, 100%) !important;
}


/*
------------------------------------------------------
top
------------------------------------------------------
*/

body.home{}

body.home .fv .catch-copy {
position: absolute;
width: 95%;
top: 40%;
transform: translate(0%, -50%);
}

body.home .kv {
width: 100%;
height: 25vh;
}

body.home .kv img {
display: block;
width: 100%;
height: 44vh;
background: #6e5c5c;
position: absolute;
left: 0;
object-fit: cover;
}

/*------------- top-work -------------*/
.top-work-content {
width: ;
margin: 30vh auto 0;
}

.top-work-content .content-inner {
width: 100%;
margin: 0 auto;
}

.top-work-content .content-inner p {
margin-right: 0;
}

.top-work-content .content-inner .title{
width: 30%;
height: auto;
}

.top-work-content .select-nav{
margin-top: ;
white-space: nowrap;
    overflow: scroll;
    margin-top: ;
    width: 66%;
     scrollbar-width: none;
}

.top-work-content .content-inner .flex-box{
        width: 97.5%;
        display: flex;
        margin-left: auto;
}

.select-nav .content-inner {
width: 100%;
margin: 0;
}

.top-work-content .work-select{
width: 95%;
margin: 3rem auto 0; 
}

/*-- 素材から選ぶ --*/
.top-work-content .material {
width: 100%;
}

.top-work-content .material .grid {
display: block;
}

.top-work-content .material li:first-child{
border-bottom: none;
}

/*-- 用途から選ぶ --*/
.top-work-content .purpose{
width: 100%;
}

.top-work-content .purpose dl {
}

.top-work-content .purpose dl .item {
display: inline-block;
width: 32%;
height: 150px;
}

/*-- よくある補修事例 --*/
.top-work-content .situation {
width: 100%;
}

.top-work-content .situation .grid {
display: block;
}

.top-work-content .situation li:first-child{
border-bottom: none;
}


/*------------- concept-img -------------*/
.concept-img-content{
width: 100%;
margin-top: 10rem;
}

.concept-img-content .content-inner{
width: 95%;
margin-left: auto;
margin-right: auto;
}

.concept-img-content .content-inner img{
}

.concept-img-content .content-inner .img-1{
position: static;
margin-left: 0;
}

.concept-img-content .content-inner .img-1 img{
width: 100%;
height: 17vh;
}

.concept-img-content .content-inner .img-2{
margin-top: 4rem;
margin-left: 25vh;
}

.concept-img-content .content-inner .img-2 img{
display: none;
}


/*------------- top-service -------------*/
.top-service-content {
margin-top: 10rem;
}

.top-service-content .content-inner {
display: block;
width: 95%;
margin: 0 auto;
}

.top-service-content .content-inner .flex-box {
display: block;
}

.top-service-content .service-select {
    margin-top: 3rem;
}

.service-select .image-item {
    flex: 1;
    position: relative;
    overflow: hidden;
    height: 4rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #525050;
}

.service-select .image-item img {
width: 30%;
display: block;
height: 4rem;
}



/*
------------------------------------------------------
about
------------------------------------------------------
*/


.about-content {
width: 100%;
margin: 5vh auto 0;
}

    .about-content .select-nav ul {
        display: grid;
        gap: 0 30px;
        grid-template-columns: repeat(2, 1fr);
    }

    .about-content .select-nav li {
        display: flex;
        ustify-content: end;
        /* justify-content: flex-end; */
        margin-right: 0;
    }

.about-content .select-nav li a {
padding: 1em 1em 1em 0em;
        justify-content: space-between;
}

.about-content .page-select-nav .content-inner {
    width: 100%;
    margin: 0 auto;
}

.about {
display: grid;
}

.about .title{
}

.about .concept {
width: 100%;
}

.about .concept .sub-head{
font-size: 3rem;
}

.about-value, .about-outline, .about-access{
margin-top: 10rem;
}

.about .flex-box {
display: block;
}

.about p.concept-title {
width: 100%;
font-size: 3rem;
}

.about-content p.text {
width: 100%;
}

.about .concept-img {
width: 100%;
margin-top: 2rem;
argin-left: auto;
margin-right: auto;
}

.about .img-1 {
isplay: none;
idth: 100%;
height: 16rem;
margin-right: 0;
}

.about .img-1 img{
idth: 100%;
height: 16rem;
}

.about .img-2{
	display: none;
argin-top: 2rem;
argin-left: auto;
eight: fit-content;
idth: 35%;
}

.about-value{
height: 100vh;
}

.about-value .content-inner {
width: 95%;
/* height: 50vh; */
margin: 0 auto;
position: relative;
top: 50%;
transform: translate(0%, -50%);
}

.value{
margin-top: 1rem;
text-align: justify;
}

.about-value .grid {
display: block;
}

.about-value .about-value-section:first-child{
border-top: 1px solid #858585;
}

.about-value .about-value-section {
padding-top: 3rem;
padding-bottom: 3rem;
padding-left: 0;
padding-right: 0; 
border-right: none;
border-bottom: 1px solid #858585;
}


/*
------------------------------------------------------
service
------------------------------------------------------
*/
.service-content{
margin: 5vh auto 0;
}

    .service-content .select-nav ul {
        display: grid;
        gap: 0 30px;
        grid-template-columns: repeat(2, 1fr);
    }

    .service-content .select-nav li {
        display: flex;
        ustify-content: end;
        /* justify-content: flex-end; */
        margin-right: 0;
    }

.service-content .select-nav li a {
padding: 1em 1em 1em 0em;
        justify-content: space-between;
}

.service-content .flex-box {
display: block;
}

.service-repair{
margin-top: 10rem;
}

.service-renovation, .service-paint, .service-area {
margin-top: 10rem;
}

.service-content .l-content {
width: 100%;
order: 2;
}

.service-content img {
width: 100%;
height: 10rem;
}

.service-content .content-inner .service-price dt {
width: 100%;
padding-right: 0;
}

.service-content .r-content {
	width: 100%;
    margin-top: 3rem;
}

.service-content .r-content .move-arrow__icon {
padding: 0;
}



/*
------------------------------------------------------
work
------------------------------------------------------
*/
.work-content {
width: 100%;
margin: 0;
}

.work-content .content-inner{
margin: 0 auto;
width: 95%;
}

body.page-template-page-work .fv .catch-copy {
top: 74%;

}

.work-content .content-inner > .flex-box,
.work-list > .flex-box{
display: unset;
}

.work-content .content-inner .select-nav{
width: 300px;
margin-top: 10rem;
}

.work-content .content-inner .select-nav li{
margin-bottom: 1rem;
}


.work-content .content-inner .work-list{
width: ;
ackground: blue;
}

.work-content .content-inner .work-list .list-box:first-child{
margin-top: 0;
}

.work-content .content-inner .work-list .list-box{
width: 100%;
margin: 5rem 0 0 0;
}


/*-- single-work --*/

.single .fv .catch-copy {
position: absolute;
width: 95%;
top: 74%;
transform: translate(0%, -50%);
left: 5%;
}

.single-work-content .content-inner {
margin: 0 auto;
width: 95%;
}

.single-work-content img {
    width: 100%;
}


/*
------------------------------------------------------
news
------------------------------------------------------
*/

body.page-template-page-news .fv .catch-copy {
    position: absolute;
    width: 95%;
    top: 74%;
    transform: translate(0%, -50%);
    left: 2.5%;
}

.news-content .time{
width: 30%;
display: inline-block;
}



/*
------------------------------------------------------
privacy-policy
------------------------------------------------------
*/

body.page-template-page-privacy-policy .fv .catch-copy {
    position: absolute;
    width: 95%;
    top: 74%;
    transform: translate(0%, -50%);
    left: 2.5%;
}


/*
------------------------------------------------------
contact
------------------------------------------------------
*/

body.page-template-page-contact .fv .catch-copy {
    position: absolute;
    width: 95%;
    top: 74%;
    transform: translate(0%, -50%);
    left: 2.5%;
}

.contact-content .content-inner .sales-contact p {
margin-top: 3rem;
color: #dedcdc;
}



/*
------------------------------------------------------
footer
------------------------------------------------------
*/

body.home footer{
margin-top: 10rem;
}

footer {
width: 100%;
margin-top: 0;
}

.others_content {
    margin-top: 10rem;
}

.others_content .image_item {
    height: 10rem;
}

.others_content .image_item img {
    height: 10rem;
}

.others_content .image_text {
 font-size: 1rem;
 white-space: nowrap;
}

/*-- footer-online --*/

.f-online-content {
    margin-top: 0rem;
}

.f-online-content .content-inner {
display: block;
width: 100%;
margin: 0 auto;
padding: 0;
}

.f-online-content .online-tool .content-inner {
position: relative;
top: 0;
transform: none;
}

.f-online-content .content-inner .flex-box {
display: block;
}

.f-online-content .online-img {
width: 100%;
height: 20rem;
}

.f-online-content .content-inner img {
width: 100%;
height: 20rem;
}

.f-online-content .online-tool {
width: 95%;
height: 100%;
padding: 6rem 0;
}

.f-online-content .content-inner .title {
display: ;
width: 100%;
text-align: center;
}

.online-item p {
font-size: 1rem;
white-space: nowrap;
}

.online-item {
width: auto;
}


/*-- footer-news --*/
.f-news-content {
width: 100%;
}



.f-news-content .content-inner {
display: block;
width: 100%;
margin: 0 auto;
}



.f-news-content .content-inner .title {
display: ;
width: 30%;
height: auto;
margin: 0;
}

.f-news-content .content-inner .flex-box {
        width: 97.5%;
        display: flex;
        margin-left: auto;
}

.f-news-content .select-nav {
margin-top: ;
white-space: nowrap;
    overflow: scroll;
    margin-top: ;
    width: 66%;
     scrollbar-width: none;
}

.select-nav li {
margin-right: 1rem;
}

.f-news-content .content-inner .article {
        display: ;
        width: 95%;
        margin: 0 auto;
        margin-top: 3rem;
}

.f-contact-content {
width: 100%;
background: #3d362d;
}

.f-contact-content a {
display: block;
text-align: center;
color: #f5f5f5;
font-size: 3rem;
text-decoration: none;
padding: 5rem 0;
}

footer .content-inner .flex-box {
display: inline-block;
}

.l-footer .footer-text{
margin-top: 1rem;
}

footer .content-inner .f-top .r-footer li:first-child{
margin-top: 0;
}

footer .content-inner .f-top .r-footer li {
display: block;
margin-top: 2rem;
margin-right: 0;
}

footer .content-inner .f-center {
        margin-right: auto;
        margin-left: 0;
}

.f-menu-content .content-inner {
width: 95%;
margin: 0 auto;
margin-top: 5rem;
padding-bottom: 20px;
}

}