@charset "utf-8";
/* CSS Document */
main .top{
	background-image: url("../img/top/img_top.jpg");	
	background-size: cover;
	background-position: center center;
	height: 76vh;   
}
main .top .text{
	height: 76vh; 
	display: flex;                
	flex-direction: column;
	justify-content: center;
	padding: 0;
}
main .top .text h2{
  font-size: xx-large;
  font-weight: 500;
}
main .top .text h3{
  font-size: x-large;	
  font-weight: 500;
}
main .top .text p{
	line-height: 2;
}
.about-box{
	margin: 0 0 50px;	
}

.about-loop {
  width: 100%;
  overflow: hidden;
}
.about-inner {
  display: inline-block;
  white-space: nowrap;
  animation: loop-left 50s linear infinite;
}
.about-inner span {
  font-size: 100px;
  font-weight: 400;
  color: #f9f9f9;
  margin-right: 100px; /* 文字間隔 */
}
@keyframes loop-left {
  0% {
    transform: translateX(0);       /* 左端から表示 */
  }
  100% {
    transform: translateX(-50%);    /* テキスト幅の半分流したら再スタート */
  }
}

.about-box .text h2{
  font-size: x-large;
  font-weight: 500;
}

.service-box{
	margin: 0 0 50px;	
}
.service-box .back-color{
	background: #F2F3F4;	
}
.service-box h2,
.news-box h2,
.company-box h2{
	padding: 40px 0 100px;
  font-size: xx-large;
	font-weight: 400;
}
.service-box h2 span,
.news-box h2 span,
.company-box h2 span{
	display: block;
  font-size: small;
  color: #707070;
}
.service-box .service-inner{
	background: #fff;
	padding: 40px 20px;
	margin: -60px 10px 0;
	box-shadow: 0 -4px 6px -4px rgba(0,0,0,0.1),   /* 上 */
              -4px 0 6px -4px rgba(0,0,0,0.1),  /* 左 */
               4px 0 6px -4px rgba(0,0,0,0.1);  /* 右 */	
}
.service-box .service-inner .box:nth-child(2) {
	margin: 50px 0 0;
}
.service-box .service-inner h3{
  font-size: xx-large;
	font-weight: 400;
}
.service-box .service-inner h3 span{
	color: var(--main);
}

.service-box .btn a{
	max-width: 100%;
}
.news-box h2{
	padding: 20px 0 0;	
}
.news-box .cat-nav{
	display: none;
}

.news-box .news-area{
	margin: 50px 0;
}
.news-box .news-area .index_newsList{
	border-bottom: 1px solid #ddd;
}
.news-box .news-area .index_newsList .cat li{
	margin: 0 10px 0 0;
	background: #f1f1f1;
	padding: 2px 10px;
  border-radius: 50px;
  font-size: 14px;
}

.news-box .news-area .index_newsList li{
	border-top: 1px solid #ddd;
  position: relative;
  padding: 2em 0;
}
.news-box .news-area .index_newsList li a::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    pointer-events: auto;
    content: "";
    background-color: rgba(0, 0, 0, 0);
    cursor: pointer;
}
.news-box .news-area .index_newsList li a{
	width: 100%;
  position: relative;
  margin: 8px 0 0;

}
.news-box .news-area .index_newsList li a::before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 26px;
    /* top: 50%;と、transform: translateY(-50%) で上下中央に配置 */
    top: 50%;
    transform: translateY(-50%);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
		transition: right 0.4s ease; /* ← 追加：右方向の移動をスムーズに */
}
.news-box .news-area .index_newsList li a:hover::before{
    right: 4px;	
    transition: right 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}



.news-box .news-area .index_newsList li a.arrow-b::before {
    background-image: url("../img/icon/arrow-b.png");
}
.company-box{
	margin: 50px 0;
}
.company-box .img {
    width: 100%;
    height: 100%;
    background: url(../img/top/company.png) no-repeat center center / cover;
		background-size: cover;
		width: 100%;
    height: 320px;
    border-radius: 20px;
}
.company-box .text {
	width: 100%;
	
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.company-box h2{
	color: #fff;
  padding: 20px 0;
	text-align: center;
}
.company-box h2 span{
	color: #fff;	
}

.company-box .btn{
		padding: 0 0 50px;	
}


/* ===============================
   レスポンシブ：768px以上（タブレット）
================================== */
@media (min-width: 768px) {
	main .top .text h2{
	  font-size: xxx-large;
	}
	main .top .text h3{
	  font-size: xx-large;	
	}
	.about-inner span {
	  font-size: 180px;
	}


	.about-box .block{
	  display: grid;
	  grid-template-columns: repeat(2, 1fr); /* 4項目を均等に配置 */	
	}
	.about-box .text{
		padding: 0 20% 0 0;
	}
	.about-box .text h2{
	  font-size: xx-large;
	  font-weight: 500;
	}
	.service-box h2,
	.news-box h2{
	  font-size: xxx-large;
	}
	.service-box .service-inner{
	  display: grid;
	  grid-template-columns: repeat(2, 1fr); /* 2項目を均等に */
	  gap: 160px;                              /* 互いの余白 */
	  position: relative;                     /* 棒線の基準 */
	}
	
	/* 間の棒線（セパレーター） */
	.service-box .service-inner::before {
	  content: "";
	  position: absolute;
	  top: 50%;                 /* 親の縦の真ん中に配置 */
	  left: 50%;                /* 横の中央 */
	  transform: translate(-50%, -50%); /* 中心基準に調整 */
	  width: 1px;               /* 線の太さ */
	  height: 60%;              /* 高さは50% */
	  background: #E0E0E0;      /* 線の色 */
	  pointer-events: none; 
	}
	.service-box .service-inner .box:nth-child(2) {
		margin: 0;
	}
	
	.news-box .news-inner{
		display: flex;	
	}
	.news-box .news-inner .box{
		width: 230px;
	}
	.news-box .cat-nav {
	    display: block;
	    margin: 20px 0 0;
	}
	.news-box .cat-nav li a{
		color: #707070;
	   padding: 2px 20px;
	}
	.news-box .cat-nav li a:hover{
		width: 160px;
	  background: #AD8146;
	  padding: 2px 20px;
	  border-radius: 50px;	
		color: #fff;
	}
	
	.news-box .news-area{
	  margin: 40px 0;
		-webkit-box-flex: 1;
	  -ms-flex: 1;
	  flex: 1;	
	}

	.company-box .block {
        padding-inline: 0;
	}
	.company-box h2{
		text-align: left;
		padding: 0;
		width: 42%;
	}
	.company-box .btn {
		padding: 13px 0;
		width: 42%;
	}
	.company-box .btn a{
		margin:  0 0 0 auto;
	}
	.company-box .text{
		display: flex; justify-content: center; align-items: center;
	}	
}
/* ===============================
   レスポンシブ：992px以上（ノートPC以上）
================================== */
@media (min-width: 992px) {

}