@charset "utf-8";

/*メディアクエリー
スマホ @media (max-width: 768px)
タブレットのみ @media (min-width:768px) and (max-width:1000px)
タブレット・PC @media (min-width:768px)
PC大 @media (min-width:1200px) 
※上記以外のブレイクポイントは、例外的に設定。その場合はコメントアウトを記載すること。
*/

.openbtn span {background-color: #000;}
.contents_wrap_bg { width:100%; height:90vw; background:url(../img/bg_sp.jpg); background-size:cover; background-repeat:no-repeat; }
@media screen and ( min-width:768px) {
    .contents_wrap_bg { width:100%; height:fit-content; height:fit-content; background:url(../img/bg_pc.jpg); background-size:cover; background-repeat:no-repeat;  }
    
}

h1 { color:#fff; }
.head-subtext { color:#fff; }
h3 { padding-bottom: 60px;}
@media screen and ( min-width:768px) {
    h3 { padding-bottom: 80px;}
}


/*背景によって、ヘッダーのロゴ、ハンバーガーの色を変更*/
.logo_black { display:none; }
.openbtn span { background-color:#fff; }


.contents_wrap .contents p { width:100%; text-align:justify;}
.business_wrap .contents {border-top: 1px solid rgba(0, 80, 146);padding: 40px 0 0 0;}
.business_wrap:first-child .contents {border-top: none;padding: 40px 0 0 0;}

.business_wrap { width:100%; margin-bottom: 40px;}
.last_wrap { margin-bottom: 20px; }
.business_wrap { height:auto; display:block; float:left; }
.business_wrap .english {
    width: 100%;
    font-size: 60px;
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
    display: inline-block;
    line-height: 1.2;
    letter-spacing: 0;
    font-family: "EB Garamond", serif;
    margin-bottom:20px; 
  }
  .business_wrap .number {
    width: 100%;
    font-size: 40px;
    color: rgba(0, 80, 146);
    text-align: left;
    display: inline-block;
    line-height: 1.2;
  }
@media screen and ( min-width:768px) {
    .business_wrap { width:100%; margin-bottom: 40px;}
    .business_wrap .contents { width:1080px; margin:0 auto; }
    .business_wrap .english { width:100%; font-size:100px; text-align:right; }
    .business_wrap .number {
        font-size: 56px;
        white-space: nowrap;
      }
      .business_wrap:first-child .contents {padding:80px 0 0 0;}
      .business_wrap .contents {border-top: 1px solid rgba(0, 80, 146);padding: 80px 0 0 0;}
}


.business h2 { width:auto; position:relative; font-size: 24px; font-weight:400; }

@media screen and ( min-width:768px) {
    .business h2 {
        margin-top: 0;
        font-size: 36px;
        line-height: 72px;
        margin-left: 36px;
      }
    }
    .business p { margin-bottom: 0px; }
}

.lineTrigger::before { width:auto; position: absolute;content:"";width:0;height:16px;background:#FFF000;}
.lineTrigger::after {
    content: "";
    position: absolute;
    width: 0;
    height: 16px;
    bottom: 4px;
    left: 0;
    background:#FFF000; z-index:-1;
}
h2.lineTrigger {
    width: auto;
    display: inline-block;
    font-weight: 400;
    font-size: 24px;
    line-height: 48px;
    white-space: nowrap;
  }
.setsumei { margin-bottom:35px; }

.estate li { width:100%; }
.estate { width:100%;  flex-wrap:wrap; }
@media screen and ( min-width:768px) {
    .business_wrap { margin-bottom:80px; }
    .business { width:100%;  justify-content: space-between;}
    .business.fadeRight {animation: none;}
    .estate li { width:auto; height: fit-content;}
    .contents_wrap .contents p {width: auto;}
    .estate li:first-child{display: flex;}
    .estate img {margin-top: 20px;}
    .lineTrigger::after {top:40px;}
    .setsumei {
        margin-left: 100px;
        margin-right: 60px;
        padding: 24px 0 0px 0;
      }
}

@media screen and ( min-width:768px) {
    .contents_wrap .footer .footer_logo img { margin-top:30px; }
}

.land_usage_img_wrap { display:flex; justify-content: space-between; align-items: center;}
.land_usage_img {  height: auto;}
@media screen and ( min-width:768px) {
    .land_usage_img_wrap { display:flex; justify-content: space-between; align-items: center; margin-left: 100px;}
    .life_support_img_wrap li { width: 450px; margin-bottom: 30px;}
    .land_usage_img { max-width: 468px; height: auto;}
}

.life_support_img_wrap { display: flex; flex-wrap: wrap; justify-content: space-between;}
.life_support_img_wrap li { width: 47.2%; margin-bottom: 12px;}
.n02 .life_support_img_wrap li {width: 47.2%;margin-bottom: -20px;}
.life_support_img_wrap img { width: 100%; display: inline;}
.life_support_img_wrap span { width: 100%; display: inline-block; margin: 4px 0; font-size: 13px;line-height: 1.5;}
@media screen and ( min-width:768px) {
    .life_support_img_wrap { display: flex; flex-wrap: wrap; justify-content: space-between;width: 100%;}
    .last_wrap .life_support_img_wrap li { width: 300px; margin-bottom: 30px;}
    .life_support_img_wrap img { width: 100%; display: inline;}
    .life_support_img_wrap span { width: 100%; display: inline-block; margin:5px 0 0 0; font-size: 16px;}
    .life_support_img_wrap li { width: 47.2%; margin-bottom: none;}
    .life_support_img_wrap li {  margin-bottom: 0px;}
}

/*青のグラデーション　#02092b,*/
.Gradation {
    height: 100%; /* Ensure the background fills the entire viewport */
  
    /* Create a two-layered background */
    background: #02092b; /* Fixed color for the top 500px */
    background: linear-gradient(#fff 0%, #2294ea 100%); 
    background-size: 200% 200%; /* Enlarged for smooth diagonal animation */
    animation: Grad 10s ease infinite; /* Continuous diagonal movement */
    background-attachment: fixed; /* Keep the top part fixed while the rest animates */
   
  }
  
  @keyframes Grad {
    0% {
        background-position: 0% 0%; /* Start at the top-left */
    }
    50% {
        background-position: 100% 100%; /* Move to the bottom-right */
    }
    100% {
      background-position: 0% 0%; /* Move to the bottom-right */
  }
  }

  @media screen and ( min-width:768px) {
  .contents_wrap.footer .footer_logo img { margin-top:50px; }
}
  

.contents_wrap.blue { display:block; width:100%; height:auto; float:left; background: linear-gradient(#fff 0%, #2294ea 100%); }


h2 {font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;}

.img01 {margin-top: 32px;}
.life_support_img_wrap{margin-top: 32px;}
.h1_wrap h3 { margin: 20px 0 0 0 ;}
.h1_wrap .head-subtext {margin-bottom: 0px;}

@media screen and ( min-width:768px) {
    .h1_wrap h3 { margin: 80px 0 0 0 ;}
    .life_support_img_wrap{margin-top:32px;}
    .business_wrap .number {
        width: auto;
        white-space: nowrap;
    }
    h2.lineTrigger {
        width: auto;
        display: inline-block;
        font-weight: 400;
        font-size: 36px;
        line-height: 72px;
        white-space: nowrap;
      }
    
    /*.lineTrigger::after {
        top: 40px;
    }*/
    
    .contents { display: flex; max-width: 1080px;}
    .business_wrap .con02 { display: block; max-width: 1080px;}
    
}

.fadeRightTrigger { animation:fadeRightAnime 0s ease-out forwards, shake 0s ease-in-out infinite 0.5s;}


@media screen and ( max-width:768px) {
    .setsumei.gothic { margin-top:32px; }

}