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

body{
background: #1b1b1b;
color: #dcdcdc;
font-weight: lighter;
font-family: Noto Sans JP, sans-serif, Open Sans, Hiragino Kaku Gothic ProN, Meiryo;
letter-spacing: 3px;
line-height: initial;
overflow: hidden;
overflow-y: scroll;
font-size: .8rem;
letter-spacing: 2px;
}


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

.noto-sans-jp {
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 100;
font-style: normal;
}


::selection {
ackground: #cfa7a770;
}

a{
color: #dcdcdc;
text-decoration: none;
}

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

.link a {
display: inline-block;
position: relative;
}

.link a::before {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #525050;
  bottom: -2px;

}

.link a::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #dcdcdc;
  bottom: -2px;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform 0.3s;
}

.link a:hover::after {
  transform: scale(1, 1);
  transform-origin: left top;
}


.item a:hover {
background-color: #b19a7d63;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.date a:hover {
background-color: #b19a7d63;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.online-item a:hover {
background-color: #b19a7d63;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}


/**
.link {
display: block;
width: fit-content;
margin-top: 3rem;
}
**/

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

h1{
font-weight: lighter;
font-size: 3rem;
}

h2{
font-weight: lighter;
font-size: 1.3rem;
}

.sub-head{
	color: #B19A7D;
	font-size: .8rem;
	margin-left: -0.45rem;
}


.bold{
font-weight: normal;
}

.text-content {
font-size: .8rem;
text-align: justify;
line-height: 2;
}

img{
object-fit: cover;
}

.fixed{
position: fixed;
}

.non-display{
display: none;
}

.flex-box{
display: flex;
}


.red{
color: red;
}

.blank{
pointer-events: none;
filter: grayscale(100%);
}

/*-- icon --*/
.move-arrow__icon{
justify-content: space-between;
align-items: center;
display: flex;
ustify-content: start;
adding: 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);
 }

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

.scrol-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(-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;
}

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


/*
------------------------------------------------------
common-2
------------------------------------------------------
*/

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



/*-- パンくず --*/
.breadcrumb-box {
width: 100%;
display: inline-block;
margin-top: 10rem;
}


.breadcrumb-box nav {
display: contents;
}


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


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


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

/*
------------------------------------------------------
animation
------------------------------------------------------
*/


@keyframes noise-anim {
from {
background-position: 0 0;
}
to {
background-position: 100% 100%;
}
}

.noise {
background-image: url("img/common/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);
}

.loop {
overflow: hidden;
white-space: nowrap;
position: relative;
}

.p-content__container {
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
}

.c-text {
overflow: hidden;
display: flex;
width: 100vw;
margin-inline:calc(50% - 50vw);
}

.c-text__item {
flex-shrink: 0;
white-space: nowrap;
font-size: 6vw;
letter-spacing: -.03em;
padding-inline:.1em;
color: #B19A7D;
background: linear-gradient(to right,#8c7c7c,#B19A7D);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.c-text:not(.no-tick) .c-text__item:nth-child(odd) {
-webkit-animation: MoveLeft var(--tick-duration, 18s) var(--tick-delay, -9s) infinite linear;
animation: MoveLeft var(--tick-duration, 18s) var(--tick-delay, -9s) infinite linear;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

 .c-text--reverse:not(.no-tick) .c-text__item:nth-child(odd) {
-webkit-animation: MoveLeft var(--tick-duration, 18s) var(--tick-delay, -9s) infinite linear reverse;
animation: MoveLeft var(--tick-duration, 18s) var(--tick-delay, -9s) infinite linear reverse;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.c-text:not(.no-tick) .c-text__item:nth-child(even) {
-webkit-animation: MoveLeft2 var(--tick-duration, 18s) infinite linear;
animation: MoveLeft2 var(--tick-duration, 18s) infinite linear;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.c-text--reverse:not(.no-tick) .c-text__item:nth-child(even) {
-webkit-animation: MoveLeft2 var(--tick-duration, 18s) infinite linear reverse;
animation: MoveLeft2 var(--tick-duration, 18s) infinite linear reverse;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

@-webkit-keyframes MoveLeft {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%)
}

to {
-webkit-transform: translateX(-100%);
transform: translateX(-100%)
}
}

@keyframes MoveLeft {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%)
}

to {
-webkit-transform: translateX(-100%);
transform: translateX(-100%)
}
}

@-webkit-keyframes MoveLeft2 {
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}

to {
-webkit-transform: translateX(-200%);
transform: translateX(-200%)
}
}

@keyframes MoveLeft2 {
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}

to {
-webkit-transform: translateX(-200%);
transform: translateX(-200%)
}
}

@media screen and (min-width: 801px) {
.c-text__item {
font-size: 6vw;
}

.c-text:not(.no-tick) .c-text__item:nth-child(odd) {
-webkit-animation: MoveLeft var(--tick-duration, 24s) var(--tick-delay, -12s) infinite linear;
animation: MoveLeft var(--tick-duration, 24s) var(--tick-delay, -12s) infinite linear;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.c-text--reverse:not(.no-tick) .c-text__item:nth-child(odd) {
-webkit-animation: MoveLeft var(--tick-duration, 24s) var(--tick-delay, -12s) infinite linear reverse;
animation: MoveLeft var(--tick-duration, 24s) var(--tick-delay, -12s) infinite linear reverse;
-webkit-animation-fill-mode: both;
 animation-fill-mode: both;
}

.c-text:not(.no-tick) .c-text__item:nth-child(even) {
-webkit-animation: MoveLeft2 var(--tick-duration, 24s) infinite linear;
animation: MoveLeft2 var(--tick-duration, 24s) infinite linear;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.c-text--reverse:not(.no-tick) .c-text__item:nth-child(even) {
-webkit-animation: MoveLeft2 var(--tick-duration, 24s) infinite linear reverse;
animation: MoveLeft2 var(--tick-duration, 24s) infinite linear reverse;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

}

/*-- img-effect_top-about 

#about .content-inner figure {
height: 100%;
position: relative;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
}

#about .content-inner figure::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
z-index: 1;
transform: translateY(100%);
transition: transform 1s ease-in-out;
}

#about .content-inner img {
display: block;
opacity: 0;
transform: translateY(50px);
transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

#about .content-inner.visible figure::before {
transform: translateY(-100%);
}

#about .content-inner.visible img {
opacity: 1;
transform: translateY(0);
}
--*/

/*-- img-effect_top-service 
.renovation figure,
.repair figure,
.paint figure {
position: relative;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
}

.renovation figure::before,
.repair figure::before,
.paint figure::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
z-index: 1;
transform: translateY(100%);
transition: transform 1s ease-in-out;
}

.renovation img,
.repair img,
.paint img {
display: block;
opacity: 0;
transform: translateY(50px);
transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

--*/


/* visible クラスが追加されたときのアニメーション */
.renovation.visible figure::before,
.repair.visible figure::before,
.paint.visible figure::before {
transform: translateY(-100%);
}

.renovation.visible img,
.repair.visible img,
.paint.visible img {
opacity: 1;
transform: translateY(0);
}


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

header {
top: 1rem;
position: fixed;
position: -webkit-sticky;
width: 100%;
z-index: 100;
box-sizing: border-box;
margin: 0 auto;
}

header nav, header .head-logo {
flex-shrink: 0;
position: relative;
}

header .head-logo{
font-size: 22px;
font-weight: bold;
}

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

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

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

header li {
margin-right: 1rem;
margin-bottom: 0.8rem;
height: auto;
overflow: visible;
text-align: end;
display: inline-block;
}

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

header .flexbox {
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
width: 95%;
margin: 0 auto;
}

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

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

span.scroll-text{
position: relative;
top: -5px;
font-size: 8px;
left: -5px;
}


/*------------- 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: #fff;
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: #fff;
z-index: 1000;
}

.mobile-hidden {
display: none;
}



/*------------- fv -------------*/
.fv{
width: 100%;
height: 100vh;
position: relatve;
}

.fv .page-title{
width: 95%;
position: absolute;
display: block;
left: 2.5%;
top: 50%;
transform: translate(0%, -50%);
z-index: 99;
}

.fv .kv img{
width: 100%;
height: 100vh;
object-fit: cover;
-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;
}

.page-template-page-news .fv,
.single .fv,
.page-template-page-work .fv,
.page-template-page-contact .fv,
.page-template-page-privacy-policy .fv{
height: 55vh !important ;
}


/*
------------------------------------------------------
top
------------------------------------------------------
*/
.top-fv{
position: relative;
margin: 0 auto;
width: 100%;
height: 100dvh;
}

.top-fv .loop {
position: absolute;
bottom: 4rem;
width: 100%;
z-index: 99;
}

.concept-img-content{
display: block;
width: 100%;
height: 100vh;
position: absolute;
right: 0;
bottom: 0;
}

.concept-img-content img{
display: block;
width: 100vh;
height: 100vh;
position: absolute;
right: 0;
bottom: 0;
}

.top-fv .posts {
position: absolute;
display: block;
margin: 0 auto;
width: 100%;
bottom: 10rem;
}

.top-fv .posts a{
border-bottom: 1px solid;
}

.top-fv ul {
display: block;
width: 90%;
box-sizing: border-box;
margin: 0 auto;
}



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

.top-about-content {
width: 100%;
margin: 20rem 0 0;
}

.top-about-content .content-inner{
position: relative;
width: 100%;
height: 100%;
display: flex;
margin: 0 auto;
}




.top-about-content .img-1{
width: 60%;
height: 70vh;
margin-right: 3rem;
right: 0;
bottom: 0;
}


.top-about-content .img-1 img{
display: block;
width: 100%;
height: 100%;
right: 0;
}

.top-about-content .img-2{
width: 17vw;
height: 24vw;
}

.top-about-content .img-2 img{
display: block;
width: 100%;
height: 100%;
right: 0;
}

.top-about-content .catch-copy{
width: 95%;
max-width: ;
margin-top: 10rem;
margin-left: auto;
margin-right: auto;
}

.top-about-content h1{
font-size: 6rem;
}

.top-about-content .text-content{
width: 30%;
}

.top-about-content .catch-copy .content-inner {
width: 100%;
display: block;
height: auto;
margin: 0 0 0 auto;
margin-top:;
}



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

/*
.top-service-content .sub-head::after {
top: -17rem;
position: relative;
font-size: 27rem;
font-weight: lighter;
content: 'SERVICE';
display: block;
width: 100%;
height: 1px;
color: #B19A7D;
opacity: .04;
bottom: 0;
left: 0rem;
ransform-origin: left bottom;
transform: scaleX(125%) skewX(-12deg);
}
*/

.top-service-concept-img{
	margin-top: 15rem;
}


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

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

.top-service-content .img-1 img{
margin-left: auto;
    width: 100%;
    display: block;
    height: 34rem;
}

.top-service-content .flex-box{
margin-top: 10rem;
justify-content: space-between;
}

.top-service-content .sub-head{
}

.top-service-detail{
width: 70%;
}

.top-service-detail .text-content{
width: 500px;
}

.service-list{
margin-top: 3rem;
}

.service-list li{
border-top: 1px solid  #525050;
font-size: 3rem;
font-weight: lighter;
}

.service-list li:last-child{
border-bottom: 1px solid  #525050;
}

.service-list li a{
    padding: 2rem .5rem;
}

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

/*
.top-work-content-header .sub-head::after {
top: -7rem;
position: relative;
font-size: 7rem;
content: 'バンブーリペアが今までにてがけた補修事例';
display: block;
width: 100%;
height: 1px;
color: #B19A7D;
opacity: .04;
bottom: 0;
left: 0rem;
transform-origin: left bottom;
transform: scaleX(125%) skewX(-17deg);
}
*/

.top-work-content {
width: 100%;
margin: 20rem 0 0;
}

.top-work-content .content-inner {
osition: relative;
width: 95%;
max-width: ;
eight: 61vh;
margin: 0 auto;
}

.top-work-content-header.flex-box{
display: flex;
justify-content: space-between;
}

.top-work-content .content-inner .sub-head{
margin-top: 3rem;
}

.top-work-content .top-work-content-header{
width: 100%;
height: 100%;
display:;
osition: relative;
}

.top-work-content .img-content .img-1{
width: 40vh;
eight: 50vh;
margin-right: 3rem;
}

.top-work-content .img-content .img-1 img{
display: block;
width: 100%;
height: 100%;
osition: absolute;
right: 0;
}

.top-work-content .img-content .img-2{
top: -13rem;
left: 15rem;
osition: relative;
display: block;
width: 26vh;
height: 35vh;
}

.top-work-content .img-content .img-2 img{
display: block;
width: 100%;
height: 100%;
osition: absolute;
right: 0;
}

.work-select{
margin-top: 10rem !important;
}



/*-- 素材から選ぶ --*/
.top-work-content .material{
}

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

.top-work-content .material .item{
display: block;
width: ;
height: ;
}

.top-work-content .material .item a{
padding: 2rem .5rem;
}

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

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


/*-- 用途から選ぶ --*/
.top-work-content .purpose .grid{
display: grid;
gap: 9px 9px;
grid-template-columns: repeat(7, 0fr);
}

.top-work-content .purpose{
margin-top: 10rem;
}

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

.top-work-content .purpose dt{
}


/*-- よくある補修事例 --*/
.top-work-content .situation{
margin-top: 10rem;
}

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

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

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

.top-work-content .situation .item{
display: block;
width: ;
height: ;
}

.top-work-content .situation .item a{
padding: 2rem .5rem;
}


/*
------------------------------------------------------
about
------------------------------------------------------
*/
.about-content {
width: 100%;
margin: 10rem 0 0;
}

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

/*-- about_select nav --*/
.about-content .page-select-nav{
width: 100%;
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 {
justify-content: center;
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 .flex-box{
display: flex;
justify-content: space-between;
}

.about .catch-copy{
	width: 46%;
}

.about .catch-copy p{
font-size: 5rem;
}

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

.about .about-img{
width: 25rem;
height: 17rem;
margin-top: 5rem;
}

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

.about-content .content-inner .select-nav{

}

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

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

.about-content .content-inner .select-nav li {
margin-right: 1rem;
height: auto;
display: inline-block;
}

.about{
margin-top: 10rem;
}

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

.about-content .content-inner .about-value .value {
margin-top: 3rem;
}

.about-content .content-inner .about-value .grid {
display: grid;
ap: 0 30px;
grid-template-columns: repeat(3, 1fr);
}

.about-content .content-inner .about-value .about-value-section{
text-align: center;
font-size: 2rem;
padding-top: 11rem;
padding-bottom: 12rem;
border-right: 1px solid #525050;
}

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

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

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

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

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

.about-content .content-inner .about-outline dl{
width: 100%;
margin-top: 3rem;
}

.about-content .content-inner .about-outline dt{
width: 10rem;
padding-right: 4rem;
}

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

.about-access .data-list-blk ul{
margin-top: 1rem;
}

.about-access .flex-box{
justify-content: space-between;
}

.about-access .google-map{
width: 60%;
margin-top: 3rem;
}

.about-access .access-data{
width: 35%;
margin-top: 3rem;
}



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

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

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

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

/*-- service_select nav --*/
.service-content .page-select-nav{
width: 100%;
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 {
justify-content: center;
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-area, .service-renovation, .service-paint{
margin-top: 8rem;
}

.service-content .content-inner .service-area .area-list{
bottom: 11vw;
position: absolute;
width: 79%;
}

.service-content .content-inner .service-area{
position: relative;
}

 .service-area .text-content{
font-size: 2rem;
}

.area-block{
    margin-top: 1rem;
    padding-top: 1rem;
    display: block;
    font-size: .8rem;
}

.area-block li{
    text-align: center;
    width: 4rem;
    margin-right: 2rem;
    display: inline-block;
    padding: .01rem 2rem;
    border: 1px solid #B19A7D;
    border-radius: 20px;
    text-decoration: none;
    transition: 0.3s;
    white-space: nowrap;
}

.service-content .content-inner .service-area .area-img{
opacity: 0.2;
margin-left: auto;
width: 62%;
height: auto;
}

.service-content .content-inner .service-area .area-img img {
width: 100%;
height: auto;
margin-left: 20%;
}

.service-content .content-inner .service-list{
margin-top: 20rem;
}

.list-content{
width: 70%;
}

.service-content .content-inner .service-price:first-child{
margin-top: 0;
}

.service-content .content-inner .service-price{
width: 100%;
margin-top: 8rem;
}

.service-content .content-inner .price{
}

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

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

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

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



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

.work-content {
width: 100%;
}

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

.work-content .content-inner .select-nav{
width: 300px;
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{
margin-top: 1rem;
}

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

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

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

.work-content .content-inner .work-list .list-box figure{
width: 100%;
height: auto;
}

.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;
}



/*
------------------------------------------------------
single-work
------------------------------------------------------
*/
.single-work-content {
width: 100%;

}

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

.work_record .title{

}

.single-work-content .item .body{
font-size: 1.5rem;
margin-top: 3rem;
}

.record_list{
width: 70%;

}

.data-list-blk:first-child{
}

.work_record .data-list-blk{
justify-content: unset;
flex-direction: row;
padding-block: 1rem;
}

.work_record dl {
width: 100%;
}

.work_record dt{
width: 10rem;
padding-right: 4rem;
}

.work_record_img{
margin-top: 10rem;
}

.work_record_img .title{
}

.record_img{
width: 70%;
}

.bf_img{
margin-top: 3rem;
}

.bf_img img{
width: 100%;
}

.af_img{
margin-top: 3rem;
}

.af_img img{
width: 100%;
margin-top: 1rem;
}

.wp-block-post-featured-image img {
width: 60% !important;
}

.wp-block-image img {
margin-top: 3rem !important;
}


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

.news-content .content-inner{
margin: 2rem auto 0;
width: 95%;
ax-width: 1380px;
}

.news-content .article li:first-child {
border-top: 1px solid #525050;
}

.news-content .article li {
display: block;
border-bottom: 1px solid #525050;
line-height: 5rem;
}

.news-content .article li a{
display: block;
}

/*
------------------------------------------------------
single-news
------------------------------------------------------
*/
.single-news-content{
width: 100%;

}

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



/*
------------------------------------------------------
contact
------------------------------------------------------
*/
.contact-content {
width: 100%;
margin: 10rem 0 0;
}

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

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

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

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

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


.contact-content .content-inner .customer-contact .sub-head{
font-size: 1.5rem !important; 
}

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

.contact-content .content-inner .customer-contact .contact-form{
margin-top: 1rem;
}

.contact-content .wpcf7 {
color: #fff;
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-top: 3rem;
}

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

button {
padding: 10px 20px;
border: none;
background-color: #FFF;
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: #fff;
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: #fff;
cursor: pointer;
display: inline-block;
margin: .4rem;
outline: none;
border-radius: 100%;
margin-right: 10px;
transform:scale(1.5);
border: 1px solid #FFF;
}

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

.wpcf7-submit{
margin-top: 3rem;
padding: 10px 20px;
background-color: #FFF;
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: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
width: 150px;
}

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

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

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

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

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



/*
------------------------------------------------------
プライバシーポリシー
------------------------------------------------------
*/

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

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

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

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

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

/*
------------------------------------------------------
フッター
------------------------------------------------------
*/

.footer{
margin-top: 10rem;
}

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

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



/*------------- online -------------*/
.footer-online-content{
background: #616161;
width: 100%;
margin: 0;
}

.bg{
background: url(./img/common/online_bg.jpg) no-repeat;
background-size: 100%;
padding: 0;
}

.footer-online-content .content-inner {
width: 95%;
max-width: ;
margin: 0 auto;
padding: 10rem 0;
justify-content: space-between;
}


.footer-online-content .content-inner .flex-box{
justify-content: space-between;
}

.footer-online-content .content-inner .sub-head h2 {
font-size: 2rem;
}

.footer-online-content .text-content{
	width: 43%;
}

.footer-online-content .online-tool{
width: 45%;
}

.footer-online-content .online-tool .online-itme:first-child {
border-left: 1px dotted;
}

.online-item {
	width: 45%;
    justify-content: center;
    display: flex;
    font-size: 2rem;
   
    text-align: center;
    border-top: 1px solid #525050;
    border-bottom: 1px solid #525050;
}

.online-item a{
	width: 100%;
	padding: 3rem 1rem;
font-size: 1.5rem;
}

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

.footer-online-content .arrow {
margin-right: 10px;
transform: rotate(-180deg);
width: 2rem;
height: 2rem;
}

.footer-online-content {
background-color: #000;
}
.content-inner .work-select{
margin: 0 auto;
}

.select-content{
margin-top: 2rem;
}

.tool-icon {
/* width: 60px; */
height: 60px;
margin-bottom: 10px;
}
.download-links {
display: flex;
flex-direction: column;
align-items: center;
}

.download-icon {
margin: 5px 0;
width: 135px;
}
.gplay{
width: 156px;
}
.vertical-line {
width: 1px;
background-color: #fff;
height: 300px;
align-self: center;
}


/*------------- news -------------*/
.footer-news-content {
width: 100%;
margin: 10rem 0;
}

.footer-news-content .content-inner {
display: block;
width: 95%;
max-width: ;
margin: 0 auto;
}

.footer-news-content .content-inner .flex-box{
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-top: 3rem;
}

.footer-news-content .content-inner .l-content{
width: 35%;
}

.footer-news-content .content-inner .title{
display: ;
margin: 0;
}

.footer-news-content .select-nav {
margin-top: 3rem;
}

.footer-news-content .select-nav li:first-child{
margin-top: 0;
}

.footer-news-content .select-nav li{
margin-top: 1rem;
cursor: pointer;
display: block;
}

.footer-news-content .select-nav li.active {
color: #fff;
}

.footer-news-content .content-inner .r-content{
width: 65%;
}

.footer-news-content .content-inner .article{
display: ;
width: 100%;
margin-top: 0;
}

.footer-news-content .article li:first-child {
border-top: 1px solid #525050;
}

.footer-news-content .article li {
display: flex;
border-bottom: 1px solid #525050;
line-height: 5rem;
}

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

.footer-news-content .content-inner .article .date a{
display: block;
padding: 0 0 0 .5rem;
}

.time-block{
width: 30%;
}

.article .link {
margin-top: 5rem;
}



/*------------- contact -------------*/
.footer-contact-content{
width: 100%;
background: #000;
margin-top: 5rem;
}

.footer-contact-content a {
display: block;
text-align: center;
font-size: 5rem;
text-decoration: none;
padding: 10rem 0;
}

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

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

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



/*------------- footer menu -------------*/
footer {
width: 100%;
margin-top: 5rem;
padding-bottom: 2rem;
}

footer .content-inner{
width: 95%;
eight: 50rem;
margin: 0 auto;
}

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

.footer-l-content{
width: 35%;
}

.footer-l-content .footer-concept-img{
width: 100%;
}

.footer-l-content .footer-concept-img img{
width: 100%;
height: 150px;
object-fit: cover;
}

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

.footer-r-content .footer-l-nav{
width: 60%;
box-sizing: border-box;
padding-right: 1rem;
}

.footer-r-content .footer-l-nav .footer-sitemap{
height: 10rem;
}

.footer-r-content .footer-l-nav .footer-sns{
margin-top: 5rem;
}

.footer-r-content .footer-r-nav{
width: 40%;
box-sizing: border-box;
padding-left: 1rem;
}

.footer-r-content .footer-r-nav .footer-online{
height: 10rem;
}

.footer-r-content .footer-r-nav .footer-etc{
display: none;
}

.footer-subhead{
border-bottom: 1px solid  #525050;
opacity: .4;
color: var(--COLOR_WHITE);
}

.footer-r-content .footer-sitemap .footer-list {
display: grid;
}

.footer-list li {
margin-top: 1rem;
}

.footer-l-nav .footer-list li:nth-child(-n+2){
margin-top: 0;
}

.footer-r-content .footer-list {
grid-template-columns: repeat(2, 1fr);
idth: 32rem;
margin-top: 1.5rem;
}

 .footer-sitemap .footer-item{
 }

 
.footer-bottom{
width: 100%;
margin-top: 10rem;
}

.footer-bottom .content-inner{
width: 95%;
}

.footer-bottom .footer-logo img{
width: 3rem;
height: auto;
}


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

.o_769{
display: block;
}

.menu-icon {
display: none;
}

.menu {
display: block !important;
}

}



/*
=================================================================================
ipad pro

@media screen and (max-width: 1024px) {
#top.main-content{
background: #fff url(img/top.png) calc(100% + 250px) center/cover no-repeat;
}
}

=================================================================================
*/


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

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

#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;
}

.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;
}

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

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

.top-about-content{
display: block
}

.top-about-content .content-inner .img-1 {
display: ;
width: 100%;
height: auto;
}

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

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

.top-service-content {
}

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

.top-service-content .title {
flex: 0 0 auto;
width: 100%;
position: -webkit-sticky;
position: unset;
top: 0;
/* height: 100vh; */
overflow-y: auto;
}

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



/*------------- top-work -------------*/
.work-select{
margin-top: 5rem;
}

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

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

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

.top-work-content .top-work-content-header {
height: auto;
display: ;
position: relative;
}

.top-work-content .content-inner .title {
position: absolute;
/* width: auto; */
/* height: auto; */
display: block;
top: unset;
right: unset;
left: 0;
bottom: 0;
transform: unset;
}

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



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

.about-content .content-inner .about-value .grid {
display: block;
gap: 0 30px;
}

.about .about-img{
width: 80%;
height: 17rem;
margin-top: 5rem;
}

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

.about-content .content-inner .about-value .about-value-section {
padding-top: 5rem;
padding-bottom: 5rem;
border-right: none;
border-bottom: 1px solid;
}

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

.about-access .google-map {
width: 100%;
}

/*
------------------------------------------------------
service
------------------------------------------------------
*/
.service-area .flex-box{
display: flex;
}

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

.service-content .content-inner .service-list{
margin-top: 10rem;
}

.service-list .title {
display: none;
}

.service-list .u961_title {
display: inherit;
}

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

/*
------------------------------------------------------
cace
------------------------------------------------------
*/

.work-content {
width: 100%;
margin: 10rem 0 0;
}

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

.work-content .content-inner .select-nav{
width: 25%;
margin-top: 0;
}

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


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

.page-template-page-work .work-list {
display: flex; /* これで親要素を再度flexに設定 */
}

.page-template-page-work .list-box {
flex: 1 1 calc(50% - 10px); /* タブレットで2列表示 */
}

.work-content .content-inner .work-list{
width: 100%;
}

.work-content .content-inner .work-list .list-box {
width: 100%;
}

.work-content .content-inner .work-list .list-box{
width: 50%;
margin-top: 0;
}

.work-content .content-inner .work-list .list-box figure {
width: 100%;
height: auto;
}



/*
------------------------------------------------------
news
------------------------------------------------------
*/
.news-content {
width: 100%;
margin: 10rem 0 0;
}

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



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




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

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

.privacy-policy h2{
font-size: 3rem;
margin-top: 50px;
}

.privacy-policy h3{
font-size: 1.5rem;
color: #505050;
}

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

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



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

.footer-online-content .content-inner {
display: block;
width: 95%;
margin: 0 auto;
padding: 10rem 0;
}


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

.footer-online-content .online-tool {
width: 100%;
}


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

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

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

.footer-news-content .content-inner .title {
display: ;
width: 100%;
margin: 0;
}

.footer-news-content .content-inner .l-content {
width: 100%;
}

.footer-news-content .content-inner .l-content .select-nav li{
display: inline-block;
}

.footer-news-content .content-inner .r-content {
width: 100%;
}

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

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

.footer-l-content {
width: 100%;
}

.footer-r-content .footer-l-nav {
padding-right: 0;
}

.footer-r-content {
width: 100%;
margin-top: 5rem;
}

.footer-r-content .footer-r-nav {
width: 60%;
padding-left: 0;
}

}



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

.u_769{
display: block;
}

.o_769{
display: none !important;
}

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

header nav, header .head-logo {

}

.page-template-page-contact .head-logo,.page-template-page-privacy-policy .head-logo {
position: relative;
}

/*
------------------------------------------------------
animation
------------------------------------------------------
*/

#cursor{
display: none;
}

#stalker{
display: none;
}

.top-who-we-are .txet-content {
font-size: 2rem;
width: ;
}

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

/*
------------------------------------------------------
common-1
------------------------------------------------------
*/
h1{
font-weight: lighter;
font-size: 2rem;
}

h3{
margin-bottom: 3rem;
}

.sub-head {
    margin-left: -0.3rem;
    color: #B19A7D;
    font-size: .8rem;
width: fit-content;
}

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

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


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



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

header {
position: fixed;
width: 100%;
}

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

header h1 {
font-size: 1rem;
}

header .flexbox {
display: flex;
justify-content: space-between;
align-items: center;
height: auto;
width: 100%;
}

header .head-logo {
font-size: 14px;
font-weight: bold;
}

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

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



/*
------------------------------------------------------
top
------------------------------------------------------
*/
.concept-img-content {
display: block;
width: 100%;
height: 100vh;
/* position: relative; */
}

.concept-img-content img {
display: block;
width: 100%;
height: 100vh;
position: static;
right: 0;
bottom: 0;
}

/*------------- top-about -------------*/
.top-about-content{
margin: 5rem 0 0;
display: block;
}

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

.top-about-content h1{
font-size: 3rem;
}

.top-about-content .content-inner .img-1 {
display: ;
width: 100%;
height: auto;
}

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

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

.top-about-content .catch-copy {
    width: 95%;
    max-width: ;
    margin-top: 3rem;
    margin-left: auto;
    margin-right: auto;
}

.top-about-content .catch-copy .content-inner {
position: static;
display: block;
width: 100%;
height: auto;
bottom: 0;
left: 0;
}

.top-about-content .text-content {
    width: 100%;
    margin-top: 2rem;
    text-align: justify;
    line-height: 2;
}



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

.top-service-content {
width: 100%;
margin: 15rem 0 0;
}

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

.top-service-content .flex-box {
display: block;
margin-top: 3rem;
}

.top-service-concept-img{
    width: 100%;
    margin-left: auto;
}

.top-service-concept-img .img-1 img {
    margin-left: auto;
    width: 100%;
    display: block;
    height: 14rem;
}

.top-service-detail {
    width: 100%;
    position: relative;
    bottom: 0;
}

.top-service-detail .text-content {
    margin-top: 1rem;
    width: 100%;
}

.service-list li {
        font-size: 2rem;
        padding: 1rem 0;
}

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

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

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

.top-work-content .top-work-content-header {
height: auto;
display: ;
position: relative;
}

.top-work-content-header.flex-box {
display: grid;
}

.top-work-content .img-content{
order: 2;
margin-top: 2rem;
}

.top-work-content .img-content .img-1 {
width: 55%;
height: 100%;
margin-right: 2rem;
}

.top-work-content .img-content .img-2 {
width: 15vh;
height: 100%;
}

.top-work-content .content-inner .title {
order: 1;
position: static;
display: block;
top: unset;
right: unset;
left: 0;
bottom: 0;
transform: unset;
}

.top-work-content .work-select {
margin: 2rem auto !important;
}

.top-work-content .material .grid {
grid-template-columns: repeat(1, 1fr);
}

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

.top-work-content .material li {
}

.top-work-content .situation .grid {
grid-template-columns: repeat(1, 1fr);
}

.top-work-content .situation li:first-child{

border-bottom: none;
}

.top-work-content .situation li {

}

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

.about-content {
margin: 5rem 0 0;
}

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

.about .catch-copy {
width: 100%;
}

.about .catch-copy p{
font-size: 3rem;
}

.about .about-img{
width: 85%;
height: 100%;
margin-top: 5rem;
}

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

.about-value {
margin-top: 15rem;
}

.about-content .content-inner .about-value .grid {
display: block;
gap: 0 30px;
}

.about-content .content-inner .about-value .value{
margin-top: 2rem;
}

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

.about-content .content-inner .about-value .about-value-section {
padding-top: 5rem;
padding-bottom: 5rem;
border-right: none;
border-bottom: 1px solid #525050;
}

.about-content .content-inner .about-value .about-value-section dt{
text-align: start;
}

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

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

.about-content .content-inner .about-outline dl {
margin-top: 2rem;
}

.about-content .content-inner .about-outline dt {
width: 7rem;
padding-right: 1rem;
}

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

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

.about-access .google-map {
width: 100%;
margin-top: 2rem;
}

.about-access .google-map iframe{
height: 20rem;
}

.about-access .access-data {
width: 100%;
margin-top: 1rem;
}

.about-access .access-data li{
margin-top: .1rem;
}

.about-access .access-data .link-btn{
margin-top: 1rem;
}


/*
------------------------------------------------------
service
------------------------------------------------------
*/

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


.service-content {
margin: 5rem 0 0;
}
.service-content img {
object-fit: cover;
width: 100%;
height: 15rem;
}

.service-area .text-content {
	margin-top: 2rem;
    font-size: .8rem;
}

.service-content .content-inner .service-area .area-list {
width: 100%;
height: auto;
position: relative;
bottom: 0;
margin-top: 10rem;
font-size: 1.5rem;
}

.service-content .content-inner .service-area .area-img {
display: none;
}

.service-content .content-inner .service-area .area-img img {
display: block;
}

.service-repair .title, .service-renovation .title, .service-paint .title{
display: none;
}

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

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

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

.service-content .content-inner .service-list{
margin-top: 10rem;
}

.list-content {
width: 100%;
}

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


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

.work-content {
width: 100%;
margin: 2rem 0 0;
}

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

.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-list .flex-box{
display: block;
}


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

.page-template-page-work .work-list {
display: flex; /* これで親要素を再度flexに設定 */
}
.page-template-page-work .list-box {
flex: 1 1 100%; /* スマホで1列表示 */
}

.work-content .content-inner .work-list .list-box:first-child{
width: 100%;
margin-top: 0 !important;
}

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

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

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

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

.wp-block-post-featured-image img {
width: 100% !important;
}

.work_record .title{
position: relative;
}

.record_list {
margin-top: 1rem;
width: 100%;
}

.work_record_img .title{
position: relative;
}

.record_img {
width: 100%;
margin-left: auto;
}

.bf_img {
margin-top: 1rem;
}

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

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

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

/*
------------------------------------------------------
single-news
------------------------------------------------------
*/
.single-news-content {
margin: 2rem auto 0;
}

.single-news-content .body{
margin: 2rem auto 0;
}



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



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



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

.footer{
margin-top: 5rem;
}

.footer-online-content {
margin:0;
}

.footer-online-content .content-inner {
display: block;
width: 95%;
margin: 0 auto;
padding: 5rem 0;
}

.footer-online-content .flex-box{
display: block;
margin-top: 2rem;
}

.footer-online-content .content-inner .sub-head{
}

.footer-online-content .text-content {
    width: 100%;
}

.footer-online-content .online-tool {
width: 100%;
margin-top: 3rem;
}

.footer-online-content .online-item {
width: 100%;
margin: 0 auto;
box-sizing: border-box;
padding: 0;
margin-top: 3rem;
}

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

.footer-online-content .arrow {
display: none;
}

.footer-news-content {
margin: 5rem 0;
}

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

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

.footer-news-content .content-inner .title {
display: ;
width: 100%;
margin: 0;
}

.footer-news-content .content-inner .l-content {
width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
}

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

.footer-news-content .content-inner .l-content .select-nav li{
display: inline-block;
margin-top: 0;
margin-right: 1rem;
}

.footer-news-content .content-inner .l-content .select-nav li:last-child{
margin-right: 0;
}

.footer-news-content .content-inner .r-content {
width: 100%;
}

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

.footer-contact-content a {
font-size: 3rem;
}

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

.footer-l-nav .footer-list li:nth-child(-n+2) {
margin-top: 1rem;
}

.footer-r-content .footer-l-nav .footer-sitemap {
height: auto;
}

.footer-r-content .footer-sitemap .footer-list {
display: block;
}

.footer-l-content {
width: 100%;
}

.footer-r-content .footer-l-nav {
width: 100%;
padding-right: 0;
}

.footer-r-content .footer-l-nav .footer-etc {
display: none;
}

.footer-r-content {
width: 100%;
margin-top: 5rem;
}

.footer-r-content .footer-r-nav {
width: 100%;
margin-top: 5rem;
padding-left: 0;
}

.footer-r-content .footer-r-nav .footer-online {
height: auto;
margin-top: 5rem;
}

.footer-r-content .footer-r-nav .footer-sns {
height: auto;
margin-top: 5rem;
}

.footer-r-content .footer-r-nav .footer-etc{
display: inherit;
margin-top: 5rem;
}

.footer-r-content .footer-r-nav .footer-etc .footer-list{
border-top: 1px solid #fff;
opacity: .4;
color: var(--COLOR_WHITE);
}

.footer-bottom a{
display: block;
margin-top: 2rem;
}


}