@charset "UTF-8";
#index #sec1 {
  width: 100%;
  aspect-ratio: 2600/800;
  padding: 0;
}

#index #sec1 .swiper{
  width: 100%;
  position: relative;
  z-index: 0;
  margin-top: 36px;
}

#index #sec1 .swiper_text {
  position: absolute;
  right: 90px;
  bottom: 80px;
  z-index: 10;
}

#index #sec1 h2 {
  font-size: 48px;
  color: white;
  text-align: right;
  line-height: 1.2;
  margin-top: -200px;
  margin-bottom: 20px;
}
#index #sec1 p {
  color: #edf6fd;
  text-align: right;
  font-weight: 600;
  font-size: 18px;
  margin-top: 0;
}
#index #sec2 {
  padding: 40px 90px 60px;
}
#index #sec2 .works_wrap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 60px;
}
#index #sec2 .works_wrap .work_img {
  position: relative;
  display: block;
  margin-bottom: 10px;
}

#index #sec2 .works_wrap .work_img img{
  height: auto !important;
}
#index #sec2 .works_wrap .work_img .area {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #9e5618;
  color: white;
  font-size: 12px;
  font-weight: 300;
  padding: 3px 10px;
}
#index #sec2 .works_wrap p {
  font-weight: 600;
  line-height: 1.2;
}
#index #sec2 .works_wrap .with_subsidy {
  color: #0064b6;
  font-size: 12px;
  margin-bottom: 4px;
  display: block;
}
#index #sec2 .works_wrap .with_subsidy .empty{
  visibility: hidden;
}
#index #sec2 .works_wrap .tags {
  margin-top: 4px;
}
#index #sec2 .works_wrap .tags .tag {
  display: inline-block;
  width: fit-content;
  color: white;
  background-color: #2a2a2b;
  padding: 5px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 300;
  margin-right: 4px;
}
#index #sec2 .other_works_btn {
  background-color: #9e5618;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 40px auto 60px;
  width: 300px;
  padding: 5px 20px;
  border-radius: 10px;
}
#index #sec2 .other_works_btn p {
  color: white;
  font-weight: 600;
  font-size: 20px;
}
#index #sec2 .other_works_btn .triangle {
  width: 0;
  height: 0;
  border-top: 8px solid transparent; /* 上側を透明 */
  border-bottom: 8px solid transparent; /* 下側を透明 */
  border-left: 12px solid white; /* 左側だけ色をつける → 右向き三角に見える */
}
#index #sec3 {
  background-color: #f0f0f0;
  padding: 60px 90px;
  margin-bottom: 100px;
}

#index #sec3 .info-swiper{
  margin-top: 50px;
}

#index #sec3 .info-swiper .swiper-slide .date{
  width: 100%;
  color: white;
  background-color: #2A2A2B;
  text-align: center;
  padding: 5px 0;
  margin-bottom: 10px;
}

#index #sec3 .info-swiper .swiper-slide .thumb{
  width: 100%;
  aspect-ratio: 1/1;
  display: block;
  overflow: hidden;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
#index #sec3 .info-swiper .swiper-slide .cat,#index #sec3 .info-swiper .swiper-slide .title{
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
}
#index #sec3 .info-swiper .swiper-slide .title{
  height: 80px;
}


#index #sec3 .info-swiper .swiper-slide .black{
  width: 100%;
  display: block;
  height: 10px;
  background-color: #2A2A2B;
  margin-top: 20px;
}
#index #sec3 .sec3_wrap {
  margin-top: 50px;
  display: flex;
}

#index #sec3 .sec3_wrap .sec3_left {
  width: calc(50vw - 90px);
}
#index #sec3 .sec3_wrap .sec3_right {
  margin-left: 30px;
  width: calc(50vw - 90px);
}
#index #sec3 .sec3_wrap .sec3_right h3 {
  color: #0064b6;
  font-size: 36px;
}
#index #sec3 .sec3_wrap .sec3_right p {
  line-height: 1.2;
  font-weight: 500;
}
#index #sec3 .sec3_wrap .sec3_right .subsidy_wrap {
  margin-top: 20px;
  width: 50vw;
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(3, 220px);
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 20px;
}
#index #sec3 .sec3_wrap .sec3_right .subsidy_wrap p {
  font-weight: 600;
  font-size: 20px;
}


@media(max-width:767px){
  #index #sec1 {
  padding: 0;
  width: 100dvw;
  height: 80dvh;
}

#index #sec1 .swiper{
  width: 100%;
  height: 100%;
  margin-top: 0;
}

#index #sec1 .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* 画像を埋める（トリミングあり）*/
  object-position: center;    /* 中央部分を表示 */
  display: block;             /* 画像下の余白防止 */
}

#index #sec1 .swiper_text {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

#index #sec1 .swiper_text p,#index #sec1 .swiper_text h2{
  margin: 0;
}
  #index #sec1 h2 {
  text-align: left;
  font-size: 24px;
  line-height: 1.2;
  margin-bottom: 20px;
}
#index #sec1 p {
  font-size: 16px;
  text-align: left;
  line-height: 1;
}

#index #sec2 {
    width: 100%;
    overflow: hidden;
    padding: 30px 20px;
    box-sizing: border-box;
}


#index #sec2 .works_wrap {
  grid-template-columns: repeat(2,1fr);
  margin: 30px 0;
  gap: 20px;
}

#index #sec2 .works_wrap .work_box{
  margin-top: 30px;
}

#index #sec2 .other_works_btn {
  margin: 30px auto 0;
  width: 250px;
  padding: 5px 20px;
  border-radius: 10px;
}

#index #sec2 .other_works_btn p {
  font-size: 16px;
}

#index #sec3 {
  padding: 30px 20px;
  margin-bottom: 30px;
  position: relative;
}

#index #sec3 .sec3_wrap {
  margin-top: 30px;
  display: block;
  width: 100%;
}

#index #sec3 .sec3_wrap .sec3_left {
  width: 100%;
}

#index #sec3 .sec3_wrap .sec3_right {
  margin-left: 0;
  width: 100%;
}

#index #sec3 .sec3_wrap .sec3_right h3 {
  font-size: 24px;
}
#index #sec3 .sec3_wrap .sec3_right p {
  font-size: 14px;
}

#index #sec3 .sec3_wrap .sec3_right .subsidy_wrap {
  width: 100%;
  padding-bottom: 20px;
  grid-template-columns: repeat(3, 180px);
  gap: 10px;
}

#index #sec3 .sec3_wrap .sec3_right .subsidy_wrap p {
  margin-top: 10px;
  font-size: 14px;
}

#index #sec3 .swiper {
  --swiper-navigation-color: black;
  --swiper-pagination-color: black;
}



}