.hero{
  height:80vh;
  background:
  radial-gradient(
      circle at left bottom,
      rgba(0, 0, 0, 0.75) 0%,
      rgba(0, 0, 0, 0.45) 35%,
      rgba(0, 0, 0, 0.15) 55%,
      rgba(0, 0, 0, 0) 60%
    ),
    url(img/top/topimg.jpg) center top / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 8%;
}
.hero h2{
  color:#fff;
  font-size: clamp(1.375rem, 0.511rem + 4.32vw, 3.75rem);
  line-height:1.5;
  text-shadow: 1px 1px 2px #666;
}

.splide__slide img {
  width: 100%;
  height:80vh;
  object-fit: cover;
}
.slide_text {
  position: relative;
}
.slide_text .slide .slide-media img {
  transition: 7s 1s ease-out;
}
.slide_text .slide .splide__slide[class*=-active] .slide-media img {
  transition-delay: 0s;
  transform: scale(1.05);
}
.slide_text .slide .splide__slide[class*=-active] .slide-title {
  animation: mv01-fadeIn 2s 0.5s var(--easing) both;
}
@keyframes mv01-fadeIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
    filter: blur(300px);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.splide__slide {
  position: relative;
}
.splide__slide:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(-120deg, rgba(255,255,255,0) 0, rgba(0,0,0,0.3) 99%);
}
.text_w {
  color:#fff;
  font-size: clamp(1.375rem, 0.511rem + 4.32vw, 3.75rem);
  text-shadow: 1px 1px 2px #666;
  position: absolute;
  top:25%;
  left:8%;
}
@keyframes tt_anime {
  0% {
    transform: translateX(-20px);
  }
   100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.text_w p {
  transition: 1s;
  opacity: 0;
  display: block;
}
.text_w p:first-child {
  animation: textanime 1.4s forwards 1s;?@
}
.text_w p:nth-child(2) {
  animation: textanime 1.4s forwards 2s;
}
.text_w p:nth-child(3) {
  animation: textanime 1.4s forwards 3s;
}
@keyframes textanime
{
 0%{
  opacity: 0;
 }
 100%{
  opacity: 1;
 }
}
@media(max-width:910px){
  .splide__slide img {
    height:500px;
  }
}
@media(max-width:769px){
.splide__slide img {
    height:450px;
  }
}
@media(max-width:560px){
.splide__slide img {
    height:300px;
  }
}

.container h2 {
  font-size: clamp(2rem, 1.682rem + 1.59vw, 2.875rem);
  margin: 0 0 55px 0; 
  text-align:center;
}

.service{
  padding:80px 0;
  background:#f7f7f7;
}
.service-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:25px;
  margin: 55px 0;
}
.card{
  background:#fff;
  border-radius:15px;
  overflow:hidden;
  box-shadow:0 5px 15px rgba(0,0,0,.05);
}
.card img{
  width:100%;
  height:200px;
  object-fit:cover;
}
.card h3 {
  padding:20px;
  text-align: center;
  font-size: clamp(1.125rem, 0.681rem + 2.22vw, 1.375rem);
}
.card p{
  padding:0 20px 20px;
}

.works{
  padding:80px 0;
}
.works-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:20px;
  margin-bottom: 55px;
  height: 450px;
}
.large{
  grid-row:span 2;
}
.work{
  position:relative;
  overflow:hidden;
  border-radius:15px;
  display:block;
}
.work img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.work::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.4);
  opacity:1;
  transition:opacity .4s ease;
  z-index:1;
  pointer-events:none;
}
.work:hover::before{
  opacity:0;
}
.work:hover img{
  transform:scale(1.1);
}
.work .p {
  position:absolute;
  bottom:25px;
  left:25px;
  color:#fff;
  z-index: 2;
  width: 86%;
}
.work .p span {
  margin-right: 15px;
  font-size: 21px;
}
.btn{
  position:relative;
  overflow:hidden;
  display:inline-block;
  padding:8px 40px;
  border:1px solid #000;
  background:#fff;
  border-radius:30px;
  text-decoration:none;
  color:#000;
  font-size:13px;
  transition:all .3s ease;
}
.btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:80px;
  height:100%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.7),
    transparent
  );
  transform:skewX(-25deg);
  transition:left .6s ease;
}
.btn:hover{
  background:#000;
  color:#fff;
}
.btn:hover::before{
  left:120%;
}

.container2 {
  width: 96%;
  margin: 0 auto;
}
.sns{
  padding:0 0 80px 0;
  background:#eef4f7;
}
.marquee{
  width: 100%;
  overflow: hidden;
}
.marquee-track{
  display: flex;
  width: max-content;
  animation: marquee 120s linear infinite;
}
.marquee-track p{
  font-family: sans-serif;
  padding-right: 100px;
  font-size: 120px;
  font-weight: bold;
  white-space: nowrap;
  line-height: 1;
  color: #e3eaed;
}
@keyframes marquee{
  from{
    transform: translateX(0);
  }
  to{
    transform: translateX(calc(-50%));
  }
}
.sns h2 {
  margin-top: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sns h2 img {
  margin-right: 0.2em;
}
.sns-flex{
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin:30px 0 80px;
}
.sns-flex2 {
margin: 15px 0 55px 0;
}
.sns-flex li {
  width: 24%;
  text-align: center;
  font-size: 14px;
}
.sns-flex li img{
  width:100%;
  height: auto;
  margin-bottom: 7px;
}

.news-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
}
.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-content {
  padding: 60px;
}
.news-content h2 {
  color: #0066b3;

}
.news ul {
  margin-bottom: 35px;
}
.news ul li {
  padding:25px 0;
  border-bottom: solid 1px #ccc;
}
.news ul li span {
  display: block;
  font-size: 13px;
  font-weight: bold;
  color: #0066b3;
}

.contact-area {
  margin-top: 0;
}

@media(max-width:1000px){
  .service-grid {
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:910px){
  .hero{
    height:500px;
  }
  .hero h2{
    text-shadow: 1px 1px 2px #000;
  }
}
@media(max-width:769px){
  .hero{
    height:450px;
  }
  .hero {
    container-type: inline-size;
  }
  .hero h2 {
    font-size: 8cqw;
  }
  .service-grid {
    grid-template-columns:1fr;
  }
  .sns{
    padding:0 0 15px 0;
  }
  .sns-flex li {
    width: 49%;
    margin-bottom: 10px;
  }
  .works-grid,
  .news-wrap{
    grid-template-columns:1fr;
    display:block;
  }
  .works-grid{
    height: auto;
  }
  .work::before{
    background: none;
  }
  .work {
    margin-bottom: 25px;
  }
  .work .p {
    text-shadow: 1px 1px 2px black;
  }
  .work img {
    height: 350px;
  }
  .news-content {
    padding: 60px 25px;
  }
  .news-image img {
    height: 230px;
  }
}