@charset "UTF-8";



/**********************************************/

/**********KV**********************************/

/**********************************************/

#kv_section {

  position: relative;

  width: 100%;

  height: 700px;

  min-height: 500px;

  overflow: hidden;

  padding: 0;

}



#kv_section::before {

  content: '';

  position: absolute;

  top: -10%;

  left: -14%;

  width: 66%;

  height: 120%;

  background-color: #000000;

  opacity: 0.6;

  transform: skewX(-10deg);

  z-index: 2;

}



#kv_section::after {

  content: '';

  position: absolute;

  top: -10%;

  right: -55%;

  width: 60%;

  height: 120%;

  background-color: #000000;

  opacity: 0.6;

  transform: skewX(-10deg);

  z-index: 2;

}



.kv_slider {

  position: relative;

  width: 100%;

  height: 100%;

}



.kv_slider .slide {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  opacity: 0;

  transition: opacity 1.5s ease-in-out;

  overflow: hidden;

}



.kv_slider .slide.active {

  opacity: 1;

  z-index: 1;

}



.kv_slider .slide img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  transform: scale(1.05);

}



/* ズームインアニメーション */

@keyframes zoomIn {

  0% {

    transform: scale(1.05);

  }

  100% {

    transform: scale(1.2);

  }

}



.kv_slider .slide.active img {

  animation: zoomIn 8s ease-out forwards;

}



.kv_text {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 10;

  color: var(--White);

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);

  width: 90%;

  max-width: 1000px;

  pointer-events: none;

}



.kv_text p {

  font-size: 2.2rem;

  font-weight: 600;

  line-height: 1.6;

}





/**********************************************/

/**********WORKS*******************************/

/**********************************************/

#works_section {

  position: relative;

  padding-top: 80px;

  background-color: var(--White);

  border-radius: 40px 40px 0 0;

  z-index: 3;

  margin-top: -60px;

}



#works_section .list {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 30px;

  margin-bottom: 50px;

}



#works_section .item {

  display: flex;

  flex-direction: column;

}



#works_section .item:nth-child(4) {

  display: none;

}



#works_section .item .img {

  position: relative;

  width: 100%;

  aspect-ratio: 4 / 3;

  overflow: hidden;

  margin-bottom: 15px;

}



#works_section .item .img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.3s ease;

}



#works_section .item:hover .img img {

  transform: scale(1.05);

}



#works_section .item .cat {

  position: absolute;

  top: 0;

  left: 0;

  background-color: var(--Blue);

  color: var(--White);

  padding: 4px 16px;

  font-size: 0.8rem;

  margin: 0;

  z-index: 1;

}



#works_section .item .name {

  color: var(--Black);

  text-align: center;

  margin: 0;

  line-height: 1.6;

}



#works_section .chips { 

  display:flex; 

  flex-wrap:nowrap;

  justify-content:center; 

  gap:6px;

  list-style:none; 

  margin:12px 0 0; 

  padding:0;

}



#works_section .chips li { 

  flex: 0 0 auto;

  max-width: 32%;

}



#works_section .chips li span { 

  display:block; 

  padding:4px 8px;

  border-radius:4px;

  font-size:0.8rem; 

  background: var(--LightBlue);

  color:var(--Blue);

  text-align:center;

  overflow:hidden;

  text-overflow: ellipsis;

  line-height: 1.4;

}



/**********************************************/

/**********INFO********************************/

/**********************************************/

#info_section {

  padding: 80px 0;

  background-color: var(--Blue);

  position: relative;

  overflow: hidden;

}



#info_section::before {

  content: '';

  position: absolute;

  top: -10%;

  left: -15%;

  width: 40%;

  height: 120%;

  background-color: #7dc5e3;

  transform: skewX(-10deg);

  z-index: 0;

}



#info_section::after {

  content: '';

  position: absolute;

  top: -10%;

  right: -35%;

  width: 60%;

  height: 120%;

  background-color: #7dc5e3;

  transform: skewX(-10deg);

  z-index: 0;

}



#info_section .inner {

  display: flex;

  gap: 40px;

  z-index: 1;

}



#info_section .block {

  flex: 1;

  background-color: var(--White);

  padding: 40px 24px;

  border-radius: 8px;

  display: flex;

  flex-direction: column;

}



#info_section .title {

  text-align: center;

  margin-bottom: 40px;

}



#info_section .list {

  margin-bottom: 20px;

}



#info_section .list:last-of-type {

  margin-bottom: 40px;

}



#info_section .item:hover {

  background-color: #f9f9f9;

  opacity: 1;

}



#info_section .item {

  text-decoration: none;

  color: inherit;

  transition: background-color 0.2s ease;

}



#info_section .item .title {

  color: var(--Black);

  transition: color 0.2s ease;

}



#info_section .item:hover .title {

  color: var(--Blue);

}



#info_section .item time {

  font-size: 0.8rem;

  color: var(--Darkgray);

  white-space: nowrap;

}



#info_section .item h3 {

  font-weight: 500;

  font-size: 1rem;

  margin: 0;

  line-height: 1.6;

  flex: 1;

  line-height: 1.2;

  text-align: left;

}



#info_section .item h3 a {

  color: var(--Black);

  text-decoration: none;

  transition: color 0.3s ease;

}



#info_section .item h3 a:hover {

  color: var(--Blue);

  opacity: 1;

}



#info_section .item div {

  display: flex;

  gap: 10px;

}



#info_section .item .cat {

  display: inline-block;

  background-color: var(--LightBlue);

  color: var(--Blue);

  padding: 0px 12px 2px;

  font-size: 0.8rem;

  border-radius: 2px;

  margin: 0;

  white-space: nowrap;

}



#info_section .left .item {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 8px;

  padding: 12px 0;

  border-bottom: 1px solid var(--Lightgray);

}



#info_section .right .item {

  display: flex;

  gap: 20px;

  padding: 8px 0;

  border-bottom: 1px solid #e0e0e0;

}



#info_section .right .item .text {

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 10px;

}



#info_section .right .item .img {

  flex: 0 0 120px;

  height: 80px;

  overflow: hidden;

  border-radius: 4px;

}



#info_section .right .item .img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.3s;

}



#info_section .right .item:hover .img img {

  transform: scale(1.05);

}



#info_section .btn {

  align-self: center;

  margin-top: auto;

  position: relative;

}







/**********************************************/

/**********SERVICE*****************************/

/**********************************************/

#service_section .block {

  display: flex;

  align-items: center;

  gap: 60px;

}



#service_section .block .left {

  flex: 0 0 45%;

}



#service_section .block .left img {

  width: 100%;

  height: auto;

  display: block;

}



#service_section .block .right {

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 40px;

}



#service_section .block .right .top {

  display: flex;

  flex-direction: column;

  gap: 20px;

}



#service_section .block .right .read {

  line-height: 1.6;

  font-size: 1.2rem;

  font-weight: 600;

  color: var(--Blue);

  margin: 0;

}



#service_section .block .right .desc {

  line-height: 1.6;

  margin: 0;

  font-weight: 400;

}



#service_section .block .right a.btn {

  margin: 0 0 0 auto;

}





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

  #kv_section {

    height: 460px;

    min-height: auto;

  }

  .kv_text {

    text-shadow: 0 2px 4px rgba(0, 0, 0, 1);

  }

  .kv_text p {

    font-size: 1.25rem;

    text-align: center;

    font-weight: 800;

  }



  #works_section {

    padding-top: 40px;

  }

  #works_section .list {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 24px;

    margin-bottom: 40px;

  }

  #works_section .item {

    width: 100%;

  }

  #works_section .item:nth-child(4) {

    display: block;

  }

  #works_section .item .img {

    width: 100%;

    aspect-ratio: 4 / 3;

  }

  #works_section .item .name {

    line-height: 1.4;

  }

  #works_section .chips {

    flex-wrap: wrap;

  }

  #works_section .chips li {

    max-width: none;

  }

  #works_section .chips li span {

    font-size: 0.65rem;

  }



  #info_section .title {

    margin-bottom: 24px;

  }

  #info_section .inner {

    flex-direction: column;

  }

  #info_section::before {

    left: -40%;

  }

  #info_section::after {

    right: -60%;

  }

  #info_section .right .item {

    gap: 8px;

  }



  #service_section .block {

    flex-direction: column;

    gap: 24px;

  }

  #service_section .block .left img {

    width: 75%;

    margin: 0 auto;

  }

  #service_section .block .right a.btn {

    margin: 0 auto;

  }

}