@charset "UTF-8";
:root {
    --angle400: 400deg;
   }


/*---------------------------

main_area

---------------------------*/
.main_area{
    position: relative;
    }
/* 背景動画 */
.main_area .background-video-wrapper {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
    }
.main_area .background-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; /* 動画が画面全体を覆うようにする */
      z-index: 1; /* 動画を背景として設定 */
    }
.main_area .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5); /* 透過した黒 */
      z-index: 2; /* オーバーレイを動画の上に配置 */
    }
.main_area .main_title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      text-align: left;
      z-index: 2; /* コンテンツが最上位に来るように */
      max-width: 1280px;
      width: 94%;
      font-size: 36px;
    }

@media (max-width: 1024px) {
.main_area .main_title {
    font-size: 26px;
}

    
}
@media (max-width: 768px) {
.main_area .background-video-wrapper {
    aspect-ratio: auto;
    height: 768px;
} 
.main_area .main_title {
    font-size: 24px;
    text-align: center;
    line-height: 1.8;
}
    
}
@media (max-width: 599px) {
.main_area .main_title {
    font-size: 22px;
    line-height: 1.8;
    }
}


/*---------------------------

banner_area

---------------------------*/
.banner_area{
    padding:100px 0;
}
.banner_area ul{
    display: flex;
    gap: 30px;
    max-width:940px;
    margin: 0 auto;
}
.banner_area ul li {
     width: 100%;
}

.banner_area ul li a {
    aspect-ratio: 455 / 160;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.banner_area ul li .text {
    width: 45%;
    height: 100%;
    background: linear-gradient(170deg, #020A5F 10%, #1F51C4 52%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.banner_area ul li .image {
    width: 55%;
    height: 100%;
    background-size: cover;
    overflow: hidden;
}
.banner_area ul li:nth-child(1) .image {
  background-image: url('../../img/banner_01.jpg'); 
}
.banner_area ul li:nth-child(2) .image {
  background-image: url('../../img/banner_02.jpg'); 
}

.banner_area ul li .text .inner {
    background: linear-gradient(40deg, rgb(31 81 193) 0%, rgba(151, 154, 191, 0.5) 75%);
    padding: 8px 8px 8px 10px;
    margin-right: -35px;
    z-index: 1;
    width: 220px;
}
.banner_area ul li .text .inner h2 {
  font-size: 24px;
  margin-bottom: 5px;
}
.banner_area ul li .text .inner p {
  font-size: 14px;
  margin-bottom: 10px;
  line-height: 1.4;
}


/* hover時変化reset */
.banner_area ul li a:hover{
  opacity: 1;
}



@media (max-width: 1024px) {
.banner_area ul {
    gap: 20px;
}

.banner_area ul li .text .inner {
    margin-left: 10px;
    margin-right: -45px;
}
.banner_area ul li .text .inner h2 {
    font-size: 20px;
    margin-bottom: 5px;
}
.banner_area ul li .text .inner p {
    font-size: 12px;
    margin-bottom: 5px;
    line-height: 1.4;
}
}
@media (max-width: 768px) {
.banner_area {
    padding: 60px 0;
}
.banner_area ul li a {
    aspect-ratio: 344 / 120;
}
/*.banner_area ul li .text .inner h2 {
    font-size: 21px;
}
.banner_area ul li .text .inner p {
    font-size: 12px;
    margin-bottom: 5px;
}  */
.banner_area ul li .text .inner {
    padding: 8px 8px 8px 12px;
}
.banner_area ul li .text .inner h2{
    font-size: 2.7vw;
}
.banner_area ul li .text .inner p{
    font-size: 1.5vw;
    margin-bottom: 5px;
}
}
@media (max-width: 599px) {
.banner_area {
    padding: 30px 0;
}
.banner_area ul {
    flex-direction: column;
    align-items: center;
}
.banner_area ul li .text .inner {
    padding: 8px 8px 8px 12px;
    height: 84%;
    width: 120%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-right: -50px;
}
.banner_area ul li .text .inner h2 {
    font-size: 4vw;
}
.banner_area ul li .text .inner p {
    font-size: 2.4vw;
}
}
@media (max-width: 375px) {
.banner_area ul {
    width: 274px;
    }
.banner_area ul li .text .inner {
    height: 86%;
    padding: 8px 8px 8px 12px;
    width: 176px;
    margin-right: -63px;
}
.banner_area ul li .text .inner h2 {
    font-size: 16px;
    margin-bottom: 3px;
}
.banner_area ul li .text .inner p {
    font-size: 11px;
}
}
/*---------------------------

company_area

---------------------------*/
.company_area{
    
}
.company_area ul{
    display: flex;
    height: 520px;
}
.company_area ul li.image {
    width: 50%;
    height: 100%;
    background-size: cover;
    overflow: hidden;
    background-image: url('../../img/company_01.jpg'); 
    background-position: center;
}
.company_area ul li.text {
    width: 50%;
    height: 100%;
    background: linear-gradient(220deg, #020A5F 0%, #1F51C4 75%);
    color: white;
    display: flex;
}
.company_area ul li.text .inner{
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 580px;
    margin: 0 7%;
}
.company_area ul li.text h2{
    font-size: 36px;
    line-height: 1.3;
    margin-bottom: 15px;
}
.company_area ul li.text p{
    margin-bottom:25px;
}




@media (max-width: 1024px) {
.company_area ul {
    height: 550px;
    }
.company_area ul li.text .inner {
    margin: 0 auto;
    width: 84%;
    max-width: fit-content;
}
.company_area ul li.text h2 {
    font-size: 26px;
}
    
}
@media (max-width: 768px) {
.company_area ul{
    height: auto;
    flex-direction: column;
    align-items: center;
}
.company_area ul li.text .inner {
    padding: 45px 0;
}
.company_area ul li.image {
    width: 92%;
    aspect-ratio: 7 / 5;
    }
.company_area ul li.text {
    width: 100%;
    display: flex;
    padding-top: 50vw;
    margin-top: -50vw;
    z-index: -1;
}
.company_area ul li.text h2 {
    font-size: 32px;
}
    
}
@media (max-width: 599px) {
.company_area ul li.image {
    width: 90%;
    }
.company_area ul li.text .inner {
    width: 90%;
}
.company_area ul li.text h2 {
    font-size: 24px;
    }
}



/*---------------------------

taiyoproducts_area

---------------------------*/
.taiyoproducts_area {
    padding: 100px 0;
}
.taiyoproducts_area h2{
    font-size: 36px;
    text-align: center;
    color: var(--blue);
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-bottom: 15px;
}
.taiyoproducts_area ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}
.taiyoproducts_area li {
    flex: 1; /* デフォルトで等分 */
    transition: flex 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    background-position: center;
    background-size: cover;
    position: relative;
}
.taiyoproducts_area p {
    margin-bottom:15px;
    line-height: 1;
}
.taiyoproducts_area a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    font-size: 24px;
    height: 240px;
    position: relative;
    z-index: 2;
}
/* デフォルトでブルーの透過オーバーレイをかぶせる */
.taiyoproducts_area ul li .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(40deg, rgb(8 39 107 / 71%) 0%, rgb(44 56 201 / 30%) 75%);
    transition: opacity 0.3s ease;
    z-index: 1;
}
.taiyoproducts_area li:hover .overlay{
  opacity: 0;
}
.taiyoproducts_area ul li:hover {
  flex: 1.5; /* hover した要素を大きく */
}
.taiyoproducts_area ul li:nth-child(1){
    background-image: url('../../img/taiyoproducts_01.jpg'); 
}
.taiyoproducts_area ul li:nth-child(2){
    background-image: url('../../img/taiyoproducts_02.jpg'); 
}
.taiyoproducts_area ul li:nth-child(3){
    background-image: url('../../img/taiyoproducts_03.jpg'); 
}


/* hover時変化reset */
.taiyoproducts_area ul li a:hover{
  opacity: 1;
}


@media (max-width: 1024px) {
    
    
}
@media (max-width: 768px) {
    
    
}
@media (max-width: 599px) {
.taiyoproducts_area {
    padding: 50px 0;
}
.taiyoproducts_area h2 {
    font-size: 24px;
} 
.taiyoproducts_area a {
    font-size: 16px;
    }  
}   



/*---------------------------

製品情報

---------------------------*/
.products_area {
    padding:0 0 60px 0;
    position: relative;
}
.products_area .bg{
    position: absolute;
    width: 100%;
    height:400px;
    bottom:0;
    background: linear-gradient(220deg, #020A5F 0%, #1F51C4 75%);
}
.products_area h2{
    font-size: 36px;
    text-align: center;
    color: var(--blue);
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-bottom: 15px;
}
.products_area ul {
    display: flex;
    
    z-index: 1;
    position: relative;
}

.products_area  ul li {
    flex: 1; 
    height: 480px;
    transition: flex 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    background-position: center;
    background-size: cover;
    
    overflow: hidden;
}

/* `a` にテキストを配置しつつ、擬似要素で背景画像を拡大 */
.products_area a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: white;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}

/* 背景画像を `::before` に設定 */
.products_area a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
  z-index: -1; /* 背景を後ろに配置 */
}
.products_area ul li:nth-child(1) a::before {
  background-image: url('../../img/products_01.jpg'); 
}
.products_area ul li:nth-child(2) a::before {
  background-image: url('../../img/products_02.jpg'); 
}
.products_area ul li:nth-child(3) a::before {
  background-image: url('../../img/products_03.jpg'); 
}
.products_area ul li:nth-child(4) a::before {
  background-image: url('../../img/products_04.jpg'); 
}


/* テキスト要素の配置調整 */
.products_area h3,
.products_area p,
.products_area button {
    position: relative;
    z-index: 2;
}
.products_area .h3_outer {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.products_area h3 {
    font-size: 24px;
    margin-bottom: 12px;
    text-align: center;
}
.products_area p {
    font-size: 16px;
    position: absolute;
    bottom: 20px;
    padding: 0 40px;
    line-height: 1.2;
}



/* hover時変化reset */
.products_area ul li a:hover{
  opacity: 1;
}
/* hover で背景画像のみ拡大 */
.products_area a:hover::before {
  transform: scale(1.1); /* 拡大 */
}
/* オーバーレイ（青の透過レイヤー） */
.products_area .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(40deg, rgb(8 39 107 / 90%) 0%, rgb(44 56 201 / 50%) 75%);
  transition: opacity 0.3s ease;
  z-index: 1;
}
/* hover でオーバーレイを解除 */
/*.products_area a:hover .overlay {
  opacity: 0;
}*/
@media (max-width: 1024px) {
/*.products_area ul li {
    height: 400px;
}*/
.products_area .h3_outer {
    height: 95px;
    justify-content: flex-end;
}
.products_area h3 {
    line-height:1.2;
}
.products_area p {
    padding: 0 15px;
}
}
@media (max-width: 768px) {
.products_area {
    padding: 0 0 70px 0;
}
.products_area ul {
    flex-wrap: wrap;
}
.products_area ul li {
    flex: auto;
    width: 50%;
} 
.products_area .bg {
    height: 90%;
}
}
@media (max-width: 599px) {
.products_area {
    padding: 0 0 30px 0;
}
.products_area ul {
    flex-wrap: wrap;
}
.products_area ul li {
    width: 100%;
    height: auto;
    aspect-ratio: 335 / 200;
}

.products_area h2 {
    font-size: 24px;
} 
.products_area .h3_outer {
    justify-content: normal;
}
.products_area h3 {
    font-size: 20px;
}
.products_area p {
    font-size: 14px;
    text-align: center;
    line-height: 1.4;
}

}



/*---------------------------

news_area

---------------------------*/
.news_area {
    padding:100px 0 100px 0;
    position: relative;
    background: #183ea80a;
}
.news_area h2{
    font-size:24px;
    color: var(--blue);
    margin-bottom: 30px;
}
.news_area iframe{
    height: 300px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    border: none !important;
}

@media (max-width: 1024px) {
    
    
}
@media (max-width: 768px) {
    
    
}

@media (max-width: 599px) {
.news_area {
    padding: 40px 0 40px 0;
}
}


/*---------------------------

strength_sustainability_area

---------------------------*/
.strength_sustainability_area {
    padding:100px 0 100px 0;
    position: relative;
}
.strength_sustainability_area ul{
    display: flex;
}
.strength_sustainability_area ul li{
    flex: 1;
}
.strength_sustainability_area ul li .image{
    width: 100%;
    aspect-ratio: 640 / 320;
    background-size: cover;
    background-position: center;
}
.strength_sustainability_area ul li:nth-child(1) .image{
    background-image: url('../../img/strength_sustainability_01.jpg'); 
}
.strength_sustainability_area ul li:nth-child(2) .image{
    background-image: url('../../img/strength_sustainability_02.jpg'); 
} 
.strength_sustainability_area .text h2{
    font-size:24px;
    margin-bottom: 15px;
}
.strength_sustainability_area ul li .text{
    background: linear-gradient(220deg, #020A5F 0%, #1F51C4 75%);
    color: white;
    text-align: center;
    padding:25px 0;
}



.strength_sustainability_area button{
    margin:0 auto;
}
/* hover時変化reset */
.strength_sustainability_area a:hover{
  opacity: 1;
}

@media (max-width: 1024px) {

    
}
@media (max-width: 768px) {
.strength_sustainability_area {
    padding: 0 0 0 0;
}   
.strength_sustainability_area .common_inner_1280{
    width:100%;
}    
.strength_sustainability_area ul li .image {
    aspect-ratio: 384 / 318;
}
}
@media (max-width: 599px) {
.strength_sustainability_area ul {
    flex-direction: column;
}
.strength_sustainability_area ul li .image {
    aspect-ratio: 375 / 200;
}
}


/*---------------------------

recruit_area

---------------------------*/
.recruit_area {
    padding:0 0 0 0;
    position: relative;
}
.recruit_area .bg{
    position: absolute;
    width: 100%;
    height: 280px;
    bottom: 0;
    background: #F5F6FA;
    z-index: -1;
}
.recruit_area .image{
    background-image: url('../../img/recruit_01.jpg'); 
    background-size: cover;
    height:380px;
    background-position: 0px -75px;
}

.recruit_area .text{
    background: linear-gradient(220deg, rgb(22 41 155 / 77%) 0%, rgb(41 97 217 / 66%) 75%);
    height: 380px;
    width:50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
}
.recruit_area .text .inner{
    max-width: 550px;
    margin: 0 7%;
}
.recruit_area .text h2{
    font-size: 36px;
    margin-bottom: 20px;
}
.recruit_area .text p{
    margin-bottom:25px;
}


@media (max-width: 1024px) {
.recruit_area .image {
    height: 480px;
    background-size: 126%;
    background-position: 0px top;
}
.recruit_area .text {
    height: 480px;
}
.recruit_area .text .inner {
    margin: 0 auto;
    width: 84%;
    max-width: fit-content;
}
.recruit_area .text h2 {
    font-size: 26px;
}  
    
}
@media (max-width: 768px) {
.recruit_area .common_inner_1280{
    width:100%;
}
.recruit_area .image {
    height: auto;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 768 / 475;
    }
.recruit_area .text {
    height: auto;
    width: 100%;
}
.recruit_area .text .inner {
    padding: 40px 0 35px 0;
}
.recruit_area .text h2 {
    margin-bottom: 10px;
}
.recruit_area .text p {
    margin-bottom: 15px;
}
}
@media (max-width: 599px) {
    .recruit_area .text .inner {
        padding: 25px 0 20px 0;
        width: 90%;
    }
    .recruit_area .text h2 {
        font-size: 24px;
    }
.recruit_area .image {
    aspect-ratio: 375 / 450;
    background-position: center top;
    background-size: cover;
} 
}





.news-category a:hover {
  text-decoration: underline;
}

.news_list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-item {
  border-bottom: 1px solid #003399;
}

.news-link {
  display: block;
  padding: 15px;
  color: #003399;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}

.news-link:hover {
  background: #f0f4ff;
  color: #001f66;
}

.news-date {
  font-size: 14px;
  color: #666;
}

.news-category {
  font-size: 12px;
  color: #003399;
  margin: 5px 0;
}

.news-title {
  font-size: 16px;
  font-weight: bold;
  color: #003399;
}

@media (max-width: 768px) {
  .news-link {
    padding: 10px;
  }
  .news-title {
    font-size: 15px;
  }
  .news-date {
    font-size: 13px;
  }
}


.works_area{
    padding:50px 0;
}
.works_area h2{
    font-size:24px;
    color: var(--blue);
    margin-bottom: 30px;
}
ul.works_list{
    display: flex;
    text-align: center;
}


.news-category{
    background: var(--blue);
        display: inline-block;
        color:#fff;
        border-radius: 6px;
        padding:0 10px;
        font-size: 10px;
}
.news-more-link{
    margin-top:50px;
    display: block;
}

.wrap{
    display: flex;
    align-items: flex-end;
    gap: 10px;
}