@charset "UTF-8";

/*共通
---------------------------------------------------------------------------*/
:root {
	--themecolor: #552e00;
	--maincolor: #333333;
}

/*container（サイト全般を囲むブロック）
---------------------------------------------------------------------------*/
.container {
padding: 0 6%;
box-sizing:border-box;
width:100%;
}
.container__yoko {
padding: 0 0 0 6%;
box-sizing:border-box;
width:100%;
}
@media screen and (min-width: 600px) {
.container__yoko {
padding: 0 10%;
}
}
@media screen and (min-width: 1200px) {
.container {
padding: 0 10%;
}
}

/*メインコンテンツ
---------------------------------------------------------------------------*/
#main {
float: none;
width:100%;
text-align: left;
overflow: hidden
}
/* 全体 750px*/
.con75 {
box-sizing:border-box;
width:100%;
}
@media screen and (min-width: 1024px){
.con75{
width:750px;
margin: 0 auto;
}}


/*スライド
---------------------------------------------------------------------------*/
.rslides_box{
position:relative;
display:flex;
min-height:100vh;
overflow:hidden;
}
.rslides,
.rslides ul,
.rslides li{
height:100%;
}
.rslides img{
width: 100% !important;
height: 100% !important;
object-fit:cover;
display:block;
object-position: center bottom;
}
.rslides {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
/* metaslider */
.metaslider,
.metaslider .slides,
.metaslider .slides li,
.metaslider .flex-viewport,
.metaslider .flexslider,
.metaslider .flexslider ul {
height: 100vh !important;
}
.flex-viewport {
height: 100vh !important;
}
.metaslider .slides li {
position: relative;
overflow: hidden;
}
.metaslider img {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center bottom;
}

/* テキストを重ねる */
.catch_text{
position:absolute;
bottom: clamp(15%, 25%, 35%);
left:5%;
z-index:2;
}
.catch_text img{
width: clamp(280px, 45vw, 600px);
height: auto;
}

@media screen and (max-width:767px){
.rslides_box{
height:600px; /* スマホ高さ固定 */
min-height:auto;/* ← これ重要（100vh解除） */
position:relative;
}
.rslides,
.rslides ul,
.rslides li{
height:100%;
}
.rslides img{
width:100%;
height:100%;
object-fit:cover;
}
/* metaslider */
.metaslider,
.metaslider .slides,
.metaslider .flex-viewport,
.metaslider .slides li {
height:600px !important;
min-height:auto !important;
}
.metaslider img {
object-position: center bottom !important;
}
}
@media screen and (max-width:500px){
.rslides_box{
    height:500px;
  }
.metaslider .slides,
.metaslider .flex-viewport,
.metaslider .slides li,
.rslides_box{
height:500px !important;
}
}

/*スクロールダウン
---------------------------------------------------------------------------*/
.scrolldown{
position:absolute;
bottom:30px;
left:50%;
transform:translateX(-50%);
}

.scrolldown a{
text-decoration:none;
display:block;
}

.scrolldown span{
position:relative;
display:block;
color:#fff;
font-size:12px;
letter-spacing:.2em;
text-align:center;
}

.scrolldown span::after{
content:"";
position:absolute;
left:50%;
transform:translateX(-50%);
top:20px;
width:1px;
height:50px;
background:#fff;
animation:scrollLine 1.8s ease-in-out infinite;
}

@keyframes scrollLine{
0%{transform:translate(-50%,0);opacity:0;}
30%{opacity:1;}
100%{transform:translate(-50%,20px);opacity:0;}
}

/*背景
---------------------------------------------------------------------------*/
#bg_fff_1,
#bg_fff_2,
#bg_fff_3{
background: #fff;
margin: 50px 0
}
#bg_img{
width: 100%;
padding: 50px 0;
background: url(../img/top_bg.jpg) repeat;
}
@media screen and (min-width: 768px) {
#bg_fff_1,
#bg_fff_2,
#bg_fff_3{
margin: 90px 0
}
#bg_img {
padding: 90px 0
}
}


/*全体見出し
---------------------------------------------------------------------------*/
.section-center-h3,
.section-side-h3{
font-size: 23px;
line-height: 1.5;
font-weight: normal;
letter-spacing:.05em;
margin: 0 0 20px 0;
color: var(--maincolor);
}
.section-center-h3{
text-align:center;
}
.section-side-h3{
text-align:left;
}
.section-center-h3 span,
.section-side-h3 span{
font-size: .5em;
display: block;
letter-spacing:.05em;
color: var(--maincolor);
padding-bottom: 10px
}
@media screen and (min-width: 1024px) {
.section-center-h3,
.section-side-h3{
font-size: 28px;
margin: 0 0 30px 0;
}}


/*read-more
---------------------------------------------------------------------------*/
.read_btn{
display:flex;
justify-content:flex-end;
margin-top:30px;
}
.read_btn_center{
display:flex;
justify-content:center;
}
.read_btn a,
.read_btn_center a{
display:flex;
justify-content:center;
align-items:center;
width:200px;
padding:.2em 1.3em;
border:1px solid var(--themecolor);
border-radius:25px;
color:var(--themecolor);
transition:.3s;
}
.read_btn a:hover,
.read_btn_center a:hover{
background:var(--themecolor);
color:#fff;
}
@media (max-width: 600px) {
div.read_btn.sekou {
margin-right: 30px;
}
}

/*info
---------------------------------------------------------------------------*/
/* 全体 */
.info_box_0{
display:flex;
width:100%;
gap:40px;
}
/* 左（タイトル側） */
.info_box_l{
width:25%;
text-align:left;
}
/* 右（一覧側） */
.info_box2{
width:75%;
margin:5px 0 20px 0;
}
/* =========================
 記事一覧 comへ
========================= */
@media screen and (max-width:767px){
.info_box_0{
flex-direction:column; /* ← 縦並び */
gap:0
}
.info_box_l{
width:100%;
}
.info_box2{
width:100%;
margin:0
}
}


/*リクルートバナー
---------------------------------------------------------------------------*/
.banner_recruit{
margin: 50px 0
}



/*事業案内
---------------------------------------------------------------------------*/
.banner_3col{
display:flex;
width:100%;
}

/* 各バナー */
.banner_item{
width:33.333%;
position:relative;
overflow:hidden;
display:block;
color:#fff;
text-decoration:none;
aspect-ratio:4/5;
-webkit-tap-highlight-color: transparent;
}
/* バナーリンクの文字色固定 */
.banner_item,
.banner_item:link,
.banner_item:visited,
.banner_item:hover,
.banner_item:active{
color:#fff;
text-decoration:none;
}

/* ===================
 下から透明グラデ（色違い）
=================== */
.banner_item::before{
content:"";
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
mix-blend-mode:multiply;
}
/* #552e00 */
.banner_1::before{
background:linear-gradient(
to top,
rgba(85,46,0,0.75) 0%,
rgba(85,46,0,0.35) 50%,
rgba(85,46,0,0) 100%
);
}

/* #d98560 */
.banner_2::before{
background:linear-gradient(
to top,
rgba(217,133,96,0.75) 0%,
rgba(217,133,96,0.35) 50%,
rgba(217,133,96,0) 100%
);
}

/* #686230 */
.banner_3::before{
background:linear-gradient(
to top,
rgba(104,98,48,0.75) 0%,
rgba(104,98,48,0.35) 50%,
rgba(104,98,48,0) 100%
);
}

/* 画像 */
.banner_item img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:.4s;
}

/* 左下テキスト */
.banner_text{
position:absolute;
left:30px;
bottom:30px;
z-index:2;
line-height:1.8;
}

.banner_text span{
font-size:10px;
display:block;
}

.banner_text h3{
font-size:28px;
font-weight:normal;
margin:0 0 10px 0;
}

.banner_text p{
margin:0;
font-size:14px;
}

/* hover */
.banner_item:hover img{
transform:scale(1.05);
}
@media screen and (max-width:980px){
.banner_3col{
flex-direction:column;
}
.banner_item{
width:100%;
aspect-ratio: 2 / 1;
}
.banner_text h3{
font-size:23px;
}
}


/*メッセージ
---------------------------------------------------------------------------*/
/* スマホ：改行しない */
.br-sp{
display:inline;
}
@media screen and (max-width:767px){
.br-sp{
display:none;
}
}

/* ======================
 全体
====================== */
#next {
position: relative;
z-index: 0;
}
#next::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/top/kage.jpg") no-repeat left top;
  background-size: clamp(250px, 30vw, 450px) auto;
  opacity: 0.6;
  pointer-events: none;
	z-index: -1;
}
.concept_area{
position:relative;
padding:90px 0;
overflow:hidden;
isolation:isolate;
}

/* ======================
 中央テキスト
====================== */
.concept_inner{
max-width:760px;
margin:auto;
text-align:center;
position:relative;
z-index:10;
}
.concept_en{
letter-spacing:0.1em;
margin-bottom:20px;
font-size: .5em;
display: block;
color: var(--maincolor);
padding-bottom: 10px;
text-align: center
}
.concept_inner h2{
font-size:36px;
line-height:1.9;
font-weight:normal;
margin-bottom:40px;
}
.concept_text{
margin-bottom:40px;
letter-spacing: 0;
text-align: center
}

/* ======================
 背景画像
====================== */
.concept_bg{
position:absolute;
overflow:hidden;
transition:.6s;
}
.concept_bg img{
width:100%;
height:100%;
object-fit:cover;
transition:1.2s;
}
/* hover ズーム */
.concept_bg:hover img{
transform:scale(1.05);
}
/* 左上 */
.bg1{
top:60px;
left:5%;
width:200px;
z-index:1;
opacity:.9;
}
/* 右上 */
.bg2{
top:60px;
right:0;
width:400px;
z-index:3;
}
/* 左下（人物） */
.bg3{
position:absolute;
bottom:40px;
left:0;
width:320px;
height:420px;
z-index:2;
overflow:hidden;
}
.bg3 img{
width:100%;
height:100%;
object-fit:cover;
}
/* 右下（アクセント） */
.bg4{
bottom:80px;
right:12%;
width:220px;
z-index:1;
opacity:.95;
}
@media screen and (max-width:1200px){
.bg1{
width:150px;
}
.bg2{
width:300px;
}
.bg3{
width:270px;
height:370px;
}
.bg4{
right:10%;
width:200px;
}
}
@media screen and (max-width:1023px){
.bg2{
width:250px;
}
.bg3{
width:200px;
height:300px;
}
}
@media screen and (max-width:767px){
.concept_area{
padding:40px 6%;;
}
.concept_bg{
display:none;
}
.concept_inner h2{
font-size:21px;
line-height:1.8;
margin-bottom:30px;
}
.concept_text{
text-align: left
}
}


/*施工事例　横並び
---------------------------------------------------------------------------*/
@media (max-width: 600px) {
.info_box_list ul {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;/* ←縦スクロール禁止 */
gap: 15px;
padding: 0 15px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.info_box_list ul li {
flex: 0 0 80%;
scroll-snap-align: start;
}
.info_box_list ul {
scrollbar-width: auto; /* Firefox */
padding-bottom: 15px;
}
.info_box_list ul::-webkit-scrollbar {
height: 4px;
}
.info_box_list ul::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 10px;
}
}





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

} 
@media screen and (min-width: 1024px) {

}
@media screen and (min-width: 1200px) {

}