@charset "UTF-8";
:root {
  --main-blue: #0078c5;
  --sub-blue: #D9EBF7;
  --sub-blue-40: rgba(217, 235, 247, 0.4); 
  --mk-blue: #123556;
  --text-color: #333333;
  --base-color: #FAFAFA;
  --step-color01: #83CCFE;
  --step-color02: #65BBF6;
  --step-color03: #49ACEF;
  --step-color04: #2D9CE7;
  --step-color05: #178CD7;
  --step-color06: #0E83CE;
  --step-color07: #0078c5;
  --white: #ffffff;
}

/* メディアクエリ */

/*コンテンツ幅1200pxに変更*/

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: min(100%, 1200px + 3%);
}
.is-layout-constrained > .alignwide {
    width: min(100%, 1200px + 4%);
}
.w1100{
  /* max-width: 1100px; */
  /* margin:1.5rem auto; */
  padding: 1.5rem;
}
.w1000{
  /* margin:1.5rem auto; */
  padding: 1.5rem;
}
.w960 {
  max-width: 960px;
  margin: 0 auto;
}
.w700{
  max-width: 700px;
  margin: 0 auto;
}

@media screen and (max-width: 781px){
  .w1100{
  padding: 0;
}
.w1000{
  margin:0 auto;
  padding: 0;
}
}


main#top-page {
    margin-top: 0;
    padding-top: 0;
}
.top-section{
  padding-block: 70px;
}

#top-page .main-visual-container .pc-video,
#top-page .main-visual-container .sp-video {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: 1;
}
#top-page .main-visual-container .sp-video {
    display: none;
}
#top-page .main-visual-container .pc-video {
    display: block;
}

@media screen and (max-width: 767px) {
    #top-page .main-visual-container .pc-video {
        display: none;
    }
    #top-page .main-visual-container .sp-video {
        display: block;
    }
}

#top-page .main-visual {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
    min-height: 600px;
}

#top-page .main-visual-text {
  position: absolute;
  z-index: 1;
  text-align: center;
  bottom: 0;
  left: 0;
  background-image: url(../images/images/main-visual-text-bg.svg);
  background-repeat: no-repeat;
  width: 100%;
  height: 400px;
  background-size: contain;
  background-position: left bottom;
  /* background-color: pink; */
  
}
#top-page .main-visual-text div {
  position: absolute;
  width: -moz-fit-content;
  width: fit-content;
  bottom: 50px;
  left: 0;
  margin-left: 5rem;
  text-align: left;
}
#top-page .main-visual-text div h1 {
  color: var(--main-blue);
  font-weight: bold;
  font-size: clamp(20px, 3vw, 45px);
  margin-bottom: 1rem;
  border-top: none;
  border-bottom: none;
}
#top-page .main-visual-text div p {
  font-weight: bold;
  font-size: clamp(16px, 3vw, 28px);
  margin-bottom: 0;
}
@media screen and (max-width: 900px) {
    #top-page .main-visual-text {
        height: 300px;
    }
    #top-page .main-visual-text div {
        margin-left: 1.8rem;
        bottom: 30px;
    }
}

@media screen and (max-width: 781px) {
    #top-page .main-visual {
        height: 85vh;
        min-height: 450px;
    }
    #top-page .main-visual-text{
      max-height: 400px;
      min-height: 350px;
      background-image: url(../images/images/main-visual-text-bg-sp.svg);
    }
}
@media screen and (max-width: 680px){
      #top-page .main-visual-text{
      min-height: 250px;
    }
}

/*ニュースフィールド*/
.news-section{
  margin-block: 5rem;
}

#top-page .top-news-title{
  display: flex;
  justify-content: space-between;
}
#top-page .top-news-title a{
  text-decoration: none;
}
.news-section .news-list-container .news-item{
  border-bottom: none;
}
#top-page .main-inner .top-news-title .news-h2wrap{
  position: relative;
  width: 20%;
}

#top-page .main-inner .top-news-title h2{
  position: absolute;
  top: 50%;
  width: 100%;
  color: var(--mk-blue);
  font-weight: bold;
  font-size: clamp(16px,4vw,22px);
  transform: translateY(-50%);
  flex-shrink: 0;
  border-top: none;
  border-bottom: none;
  text-align: center;
}

#top-page .main-inner .top-news-title .news-list-container{
  margin: 0 20px;
  flex-grow: 1;
  border-left: 1px solid var(--mk-blue);
  padding-left: 1rem;
}
#top-page .main-inner .top-news-title .news-cta{
  flex-shrink: 0;
  width: 20%;
  position: relative;
}
#top-page .main-inner .top-news-title .news-archive-link{
  position: absolute;
  text-align: right;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}
#top-page .main-inner .top-news-title .news-item{
  margin-bottom: 0.5rem;
  font-size: 1rem;
}
/*お知らせページ*/
#news-main .news-inner{
   max-width: 1200px;
   width: 100%;
   margin-inline: auto;
}
@media screen and (max-width: 800px) {
    #top-page .main-inner .top-news-title .news-h2wrap {
        width: 100% !important;
        position: static; 
        margin-bottom: 1rem; 
    }
    #top-page .top-news-title {
        flex-direction: column; 
        justify-content: flex-start; 
    }
    #top-page .main-inner .top-news-title h2 {
        position: static; 
        top: auto;
        transform: none; 
        width: auto;
        text-align: center;
        border-top: none;
        border-bottom: none;
    }
    #top-page .main-inner .top-news-title .news-list-container {
        margin: 1rem 0; 
        border-left: none; 
        padding-left: 0; 
    }
    #top-page .main-inner .top-news-title .news-cta {
        width: 100%; 
        position: static; 
        text-align: center; 
        margin-top: 1rem;
    }
    #top-page .main-inner .top-news-title .news-archive-link {
        position: static; 
        top: auto;
        transform: none; 
        width: auto;
        text-align: center;
    }
}
/* 画面幅が狭い場合の調整 */
@media (max-width: 600px) {
    .top-news-title .news-list-container .news-item .news-date{
      display: block;
    }
}

/* ========================================
   新着情報一覧ページのデザイン調整 (archive-news.php)
======================================== */

.news-list {
    list-style: none; /* リストの点や数字を非表示 */
    padding-left: 0;
    margin-top: 20px;
    border-top: 1px solid #e0e0e0; /* リスト全体の上の線 */
}

.news-item {
    border-bottom: 1px solid #e0e0e0; /* 各アイテムの下の線 */
}

.news-item-link {
    display: flex; /* 日付とタイトルを横並びにする */
    align-items: center;
    padding: 15px 1rem;
    text-decoration: none;
    transition: background-color 0.3s;
    color: var(--mk-blue); /* ホバー時の背景色 */
  }
  
  .news-item-link:hover {
    background-color: #fafafa;
    color: var(--step-color03);
}

.news-date-meta {
    flex-shrink: 0; /* 幅を固定 */
    width: 100px; /* 日付の表示幅 */
    font-size: 0.9em;
    color: #777;
    margin-right: 20px;
}

.news-title {
    flex-grow: 1; /* 残りの幅をタイトルが使う */
    margin: 0;
    font-size: 1em;
    font-weight: normal;
}

/* 画面幅が狭い場合の調整 */
@media (max-width: 600px) {
    .news-item-link {
        flex-direction: column; /* 縦並びに戻す */
        align-items: flex-start;
        padding: 10px 0;
    }
    
    .news-date-meta {
        margin-right: 0;
        margin-bottom: 5px; /* 日付とタイトルの間に隙間 */
        width: auto;
    }
}



/*トップページ_製品・サービス紹介*/
#top-products{
  background-color: var(--sub-blue-40); 
  /* padding-block: 10px; */
}

.top-products-sec {
  position: relative;
  /* outline: 1px solid blue; */
}
.top-products-sec:nth-child(1){
  margin-top: 50px;
}
.top-products-sec::before{
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(250px,48vw,960px);
  height: clamp(200px,50vw,500px);
  background-position: left center;
  background-size: contain;
  background-repeat: no-repeat;
  inset: 50% auto auto 0;
  translate: 0 -50%;
}
.top-products-sec:nth-child(1)::before {
  content: "";
  position: absolute;
  background-image: url(../images/images/products-tp-curtain.webp);
}
.top-products-sec:nth-child(2)::before {
  content: "";
  position: absolute;
  background-image: url(../images/images/products-tp-booth.webp);
  background-position: right center;
  inset: 50% 0 auto auto; 
  translate: 0 -50%;
}
.top-products-sec-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 0;
  padding-block: clamp(30px,4vw,130px);
}
.top-products-sec-text {
  width: 50%;
  margin-left: auto;
}
.top-products-sec-text p{
  font-size: 1.2rem;
  color: var(--text-color);
}
.top-products-sec.-reverse::before {
  right: 0;
  left: auto;
}
.top-products-sec.-reverse .top-products-sec-text {
  margin-right: auto;
  margin-left: 0;
  padding-right: 5%;
  padding-left: 0;
}
#top-products .top-products-sec-text a{
  position: relative;
  width: 230px;
  padding: 0.8rem 0;
  text-align: center;
  align-items: center;
  color: #fff;
  background-color: var(--main-blue);
  transition: all 0.4s;
}
#top-products .top-products-sec-text a:hover{
  color: var(--main-blue);
  background-color: #fff;
  transition: all 0.4s;
}
#top-products .top-products-sec-text a:after{
  position: absolute;
  content: "";
  display: block;
  height: 20px;
  width: 15px;
  top: 50%;
  right: 0.8rem;
  background-image: url(../images/images/arrow-w.png);
  transform: translateY(-50%);
  background-size: contain;
  background-repeat: no-repeat;
}
#top-products .top-products-sec-text a:hover:after{
  background-image: url(../images/images/arrow-b.png); 
}
#top-products h2{
  font-weight: bold;
  color: var(--mk-blue);
  /* font-size: clamp(16px,4vw,28px); */
  border-top: none;
  border-bottom: none;
}
#top-products h3{
  font-weight: bold;
  color: var(--mk-blue);
}
#top-products .main-inner ul{
  display: flex;
  justify-content: center;
  gap: clamp(15px,2vw,30px);
  padding-top: 5rem;
  padding-left: 0;
}
#top-products .main-inner ul li{
  width: 315px;
  text-align: center;
  height: 320px;
}
#top-products .main-inner ul li a{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
  color: #fff;
  transition: transform 0.5s ease-out;
}

#top-products .main-inner ul li a::before{
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 80%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1);
  transition: transform 0.5s ease-out;
  z-index: 1;
}
#top-products .main-inner ul li a:hover::before {
  transform: scale(1.08);
}
#top-products .main-inner ul li:nth-child(1) a:before{
  background-image: url(../images/images/products-tp-tentsouko.jpg);
}
#top-products .main-inner ul li:nth-child(2) a:before{
  background-image: url(../images/images/products-tp-hiyoketent.jpg);
}
#top-products .main-inner ul li:nth-child(3) a:before{
  background-image: url(../images/images/products-tp-kaihei.jpg);
}

#top-products .main-inner ul li a span { 
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  line-height: calc(320px * 0.2); 
  color: #fff; 
  z-index: 2;
  background-color: #0078c5;
}
#top-products .main-inner .common-btn{
  margin: 0 auto;
}

@media screen and (max-width: 1230px){
  .top-products-sec-text h2,
  .top-products-sec-text h3,
  .top-products-sec-text p{
    padding-inline: 5%;
    border-top: none;
    border-bottom: none;
  }
}
@media screen and (max-width: 781px){
  .top-products-sec::before{
    display: none;
  }
  #top-products h3{
    text-align: center;
    border-top: none;
    border-bottom: none;
  }
  .top-products-sec-text{
    width: 100%;
  }
  .top-products-sec .sp{
    padding-inline: 5%;
  }
  #top-products .main-inner ul{
      flex-wrap: wrap;
      max-width: 700px;
      margin: 0 auto;
  }
  #top-products .main-inner ul li{
    text-align: center;
    width: calc(50% - (clamp(15px, 2vw, 30px) / 2)); 
    height: 200px;
  }
  #top-products .main-inner ul li a{
    border-radius: 10px;
  }
  #top-products .main-inner ul li a span{
    line-height: calc(200px * 0.2);
  }
}
@media screen and (max-width: 600px){
  .top-products-sec-text p{
    font-size: 1rem;
  }
}
/*トップページ_業務内容*/
#top-service{
  background-color: var(--white);
}

#top-service .main-inner ul{
  display: flex;
  padding-left: 0;
  flex-wrap: wrap;
  justify-content: space-between;
}
#top-service .main-inner ul li{
  width: 32%;
  text-align: center;
  height: 290px;
}

#top-service .main-inner ul li a{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
  color: #fff;
  transition: transform 0.5s ease-out;
}

#top-service .main-inner ul li a::before{
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1);
  transition: transform 0.5s ease-out;
  z-index: 1;
}
#top-service .main-inner ul li a:hover::before {
  transform: scale(1.08);
}
#top-service .main-inner ul li:nth-child(1) a:before{
  background-image: url(../images/images/service-kikaku.webp);
}
#top-service .main-inner ul li:nth-child(2) a:before{
  background-image: url(../images/images/service-sekou.webp);
}
#top-service .main-inner ul li:nth-child(3) a:before{
  background-image: url(../images/images/service-kanri.webp);
}

#top-service .main-inner ul li a span { 
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  line-height: calc(320px * 0.2); 
  color: var(--text-color);
  text-shadow: 
      1px 1px 0 #fff,
      -1px 1px 0 #fff,
      1px -1px 0 #fff,
      -1px -1px 0 #fff;
  z-index: 2;
  font-size: clamp(18px,4vw,20px);
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.4);
}
#top-service .main-inner div{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}
#top-service .main-inner div p .common-btn{
  width: 300px;
  text-align: center;
}
@media screen and (max-width: 781px){
  #top-service .main-inner div{
    display: block;
  }
  #top-service .main-inner ul li{
    height: 150px;
  }
    #top-service .main-inner ul li a span{
    height: auto;
  }
  #top-service .main-inner ul li a{
    border-radius: 10px;
  }
}

@media screen and (max-width: 450px){
    #top-service .main-inner div p .common-btn{
    width: 250px;
    padding: 5px 2rem;
  }
  #top-service .main-inner ul li{
    width: 100%;
    height: 100px;
  }

}
/*トップページ_施工実績*/
#top-works{
  background-color: var(--base-blue);
}