@charset "UTF-8";
/* CSS Document */

img { -ms-interpolation-mode: bicubic; }

html {
    scroll-behavior: smooth;
}

.sp{
display: none;
}

.hamburger-menu{
display: none;
}


/* video */
.video{
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
}

.video::after{
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.50);
  mix-blend-mode: multiply;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

.video video{
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

@media screen and (min-width: 768px) {
  .video{
    min-width: 960px;
  }
}

header{
position: relative;
height: 100vh;
}


.head_section{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 2%;
}

.head_section div:first-of-type{
width: 328px;
}

.head_section div:last-of-type{
width: auto;
}

nav ul{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}

nav ul li{
margin-left: 40px;
}

nav ul li:last-child{
margin-left: 20px;
}

nav ul li a{
font-family: "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
color: #fff;
font-size: 1.7rem;
position: relative;
}

nav ul li[class^="under"] a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 1px;
background: #fff;
bottom: -1px;               /*アンダーラインがaタグの下端から現れる*/
transform: scale(0, 1);     /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
transition: transform 0.3s; /*変形の時間*/
}

nav ul li a:hover::after {
transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
}

nav ul li a:hover{
opacity: 1;
}


nav ul li a i{
margin-right: 0.5em;
}

nav ul li:nth-of-type(6){
background: #493C22;
font-size: 1.6rem;
width: 160px;
height: 40px;
display: inline-block;
text-align: center;
position: relative;
}

nav ul li:nth-of-type(6)::after{
position: absolute;
left: 0;
content: '';
display: block;
width: 100%;
height: 100%;
background: #000000;
top: 0;               /*アンダーラインがaタグの下端から現れる*/
transform: scale(0, 1);     /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
transition: transform 0.3s; /*変形の時間*/
}

nav ul li:nth-of-type(6):hover::after {
transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
}

nav ul li:nth-of-type(6) a{
position: relative;
display: block;
width: 100%;
height: 95.5%;
padding-top: 4.5%;
z-index: 99;
}

nav ul li:nth-of-type(7){
background: #006837;
font-size: 1.6rem;
width: 160px;
height: 40px;
display: inline-block;
text-align: center;
position: relative;
}

nav ul li:nth-of-type(7)::after{
position: absolute;
left: 0;
content: '';
display: block;
width: 100%;
height: 100%;
background: #C1272D;
top: 0;               /*アンダーラインがaタグの下端から現れる*/
transform: scale(0, 1);     /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
transition: transform 0.3s; /*変形の時間*/
}

nav ul li:nth-of-type(7):hover::after {
transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
}

nav ul li:nth-of-type(7) a{
position: relative;
display: block;
width: 100%;
height: 95.5%;
padding-top: 4.5%;
z-index: 99;
}

header h2{
font-family: "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: 6.5rem;
color: #fff;
padding-left: 2%;
padding-top: 10%;
padding-top: 15%;
}

.news{
position: absolute;
bottom: 0;
right: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 45%;
}

.news:before{
  display:block;
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  background-color:#006837;
  mix-blend-mode:multiply;
  }

.news div:first-of-type{
width: 20%;
  position:relative;
  padding-top: 5%;
}

.news div h3{
font-family: "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 100;
font-style: normal;
font-size: 2.4rem;
color: #fff;
padding-left: 25%;
padding-right: 5%;
}

.news div:last-of-type{
width: 73%;
padding-right: 5%;
padding-bottom: 5%;
  padding-top: 5%;
  position:relative;
}

.news div dl{
color: #fff;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.news div dl dt{
width: 20%;
font-family: "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 100;
font-style: normal;
font-size: 1.6rem;
}

.news div dl dd{
width: 80%;
margin-bottom: 2%;
}
.news div dl dd:last-of-type{
margin-bottom: 0;
}

.news div dl dd a{
color: #fff;
font-family: "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 100;
font-style: normal;
font-size: 1.6rem;
}

.top_section_01{
padding: 10% 10%;
position: relative;
}


.bgextend{
  animation-name:bgextendAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden;/*　はみ出た色要素を隠す　*/
  opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
  animation-name:bgextendAnimeSecond;
  animation-duration:1s;
  animation-delay: 1.4s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}

/*左から右*/
.bgLRextend::before{
  animation-name:bgLRextendAnime;
  animation-duration:2s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #006837;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger{
    opacity: 0;
}

.top_section_01 h2{
font-size: 3.8rem;
line-height: 1.8em;
margin-bottom: 1em;
}



.top_section_01 p{
font-size: 1.8rem;
line-height: 2.2em;
}

.top_section_01 p b{
background:linear-gradient(transparent 60%, #ff6 60%);
}



/*========= 流れるテキスト ===============*/

/*全共通*/

.slide-in {
  overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
  display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
  animation-name:slideTextX100;
  animation-duration:0.8s;
  animation-delay: 0.5s;
  animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
  from {
  transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }

  to {
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
  animation-name:slideTextX-100;
  animation-duration:0.8s;
  animation-delay: 0.5s;
  animation-fill-mode:forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
  from {
  transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.parallax1 {
	position: absolute;
	top: 10%;
    right: 5%;
	width: 30%;
	height: auto;
}

.parallax2 {
	position: absolute;
	right: 34%;
	top: 25%;
	width: 15%;
	height: auto;
}

.parallax3 {
	position: absolute;
	right: 8%;
	top: 25%;
	width: 20%;
	height: auto;
}

.img_01{
width: 30%;
position: absolute;
top: 10%;
right: 5%;
}

.top_section_02{
background: url("../img/top/ba_01.jpg") no-repeat center center;
background-size: cover;
background-attachment: fixed;
width: 100%;
height: 400px;
}

.top_section_03{
position: relative;
padding: 5% 0;
}


.loop03 {
    overflow: hidden;
    position: absolute;
    top: -70px;
    left: 0;
}
.loop03__box {
    display: flex;
    width: 100vw;
}
.loop03__item {
    flex: 0 0 auto;
    font-size: 23.0rem;
    white-space: nowrap;
    color: #006837;
    opacity: 0.1;
}

.loop03__item:nth-child(odd) {
    animation: loop 100s -50s linear infinite;
}
.loop03__item:nth-child(even) {
    animation: loop2 100s linear infinite;
}

@keyframes loop {
    0% {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes loop2 {
    0% {
        transform: translateX(0);
    }
    to {
        transform: translateX(-200%);
    }
}

.midashi_01{
width: 1200px;
margin: 0 auto;
font-size: 4.5rem;
margin-top: 120px;
margin-bottom: 15px;
}

.two_c_list_01{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 1200px;
margin: 0 auto;
}

.two_c_list_01 li{
width: 48%;
}

.two_c_list_01 li:nth-of-type(2){
margin-top: 100px;
}

.hover_box{
 width:100%;
 overflow: hidden;
}

.hover_box img{
transition:1s all;
}

.two_c_list_01 li a:hover .hover_box img{
  transform:scale(1.1,1.1);
  transition:1s all;
}

.two_c_list_01 li a{

}

.two_c_list_01 li a:hover{
opacity: 1;
}

.two_c_list_01 li a h3{
font-size: 3.0rem;
padding: 0.5em 0;
border-bottom: rgba(0,0,0,1.00) 1px solid;
font-weight: 300;
position: relative;
}

.two_c_list_01 li a h3 b{
background: #006837;
width: 45px;
height: 45px;
display: block;
overflow: hidden;
border-radius: 40px;
position: absolute;
top: 15px;
right: 0;
}

.two_c_list_01 li a h3 b img{
width: 80px;
position: absolute;
top: 15px;
left: -32px;
transition:1s all;
}

.two_c_list_01 li a:hover h3 b img{
width: 80px;
position: absolute;
top: 15px;
left: 12px;
transition:1s all;
}

.two_c_list_01 li a p{
font-weight: 300;
font-size: 1.7rem;
line-height: 1.8em;
padding-top: 0.5em;
}

.top_section_04{
background: #006837;
width: 100%;
position: relative;
overflow: hidden;
}

.top_section_04 section{
width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.top_section_04 div:nth-of-type(1){
padding: 7% 0;
width: 43%;
}

.top_section_04 div:nth-of-type(2){
width: 57%;
/*margin-right: -7%;*/
}

.top_section_04 div:nth-of-type(2) img{
width: 100%;
margin-bottom: -2px;
}

.midashi_02{
color: #fff;
font-size: 4.5rem;
margin-bottom: 0.5em;
}

.midashi_02 span{
font-size: 50%;
opacity: 0.5;
}

.top_section_04 div p{
font-size: 1.7rem;
color: #fff;
line-height: 2.0em;
margin-bottom: 20px;
}

.link_01{
font-size: 2.2rem;
color: #fff;
position: relative;
}

.link_01 b{
background: #fff;
width: 45px;
height: 45px;
display: inline-block;
overflow: hidden;
border-radius: 40px;
position: relative;
top: 15px;
margin-left: 0.5em;
}



.link_01 b img{
width: 80px;
position: absolute;
top: 15px;
left: -32px;
transition:1s all;
}

.link_01:hover b img{
width: 80px;
position: absolute;
top: 15px;
left: 12px;
transition:1s all;
}

.link_01:hover{
opacity: 1;
}



.top_section_05{
width: 100%;
padding: 5% 0;
text-align: center;
}

.midashi_03{
font-size: 4.5rem;
margin-bottom: 2%;
}

.banne_list{
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.banne_list li{
width: 380px;
margin: 0 30px;
}

footer{
background: #006837;
padding-top: 5%;
}

footer section{
width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

footer section div{
width: 50%;
}

footer section div img{
width: 328px;
margin-bottom: 10px;
}

.data{
font-size: 1.6rem;
color: #fff;
font-weight: 100;
letter-spacing: 0.1em;
line-height: 2.0em;
}

footer section div ul{
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
height: 150px;
}

footer section div ul li{
margin-bottom: 20px;
}

footer section div ul li a{
font-size: 1.7rem;
color: #fff;
font-weight: 100;
letter-spacing: 0.1em;
}

.copyright{
font-size: 1.4rem;
font-weight: 100;
letter-spacing: 0.1em;
color: #fff;
text-align: center;
margin-top: 30px;
padding-bottom: 30px;
}

.top_logo{
width: 300px;
margin: 0 auto;
margin-top: 1%;
}

.enter{
width: 1100px;
margin: 0 auto;
margin-top: 2%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.enter li{
width: 500px;
background: rgba(0,0,0,0.80);
text-align: center;
overflow: hidden;
transition:1s all;
}

.enter li:hover{
background: rgba(255,255,255,0.80);
}

.enter li a{
transition:1s all;
height: 100%;
width: 100%;
display: inline-block;
padding: 5% 0 5% 0;
}

.enter li a:hover{
opacity: 1;
transition:1s all;
}

.enter li h4{
color: #fff;
font-size: 3.0rem;
padding-bottom: 0.8em;
}

.enter li a:hover h4{
color: #000000;
}

.enter li a div{
overflow: hidden;
height: 200px;
}

.enter li a div img{
transition:1s all;
}

.enter li a:hover div img{
width: 120%;
margin-left: -10%;
transition:1s all;
}

.enter li p:first-of-type{
font-size: 1.6rem;
color: #fff;
padding-bottom: 1em;
}

.enter li a:hover p:first-of-type{
color: #000000;
}

.enter li p:last-of-type{
font-size: 2.0rem;
color: #fff;
border: #fff 1px solid;
width: 65%;
padding: 2% 0;
display: inline-block;
margin-top: 5%;
}

.enter li a:hover p:last-of-type{
background: rgba(0,104,55,1.00);
border: rgba(0,104,55,1.00) 1px solid;
}

.pagetop{
background: #000000;
color: #fff;
font-size: 2.0rem;
display: block;
padding: 0.6em 1em 0.8em 1em;
position: fixed;
bottom: 2%;
right: 1%;
opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 1s,visibility 1s, transform 1s;
}




.pagetop.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
    }



.banner{
width: 1000px;
margin: 5% auto;
}

.banner img{
border-radius: 20px;
}

.banner p{
text-align: center;
font-size: 2.0rem;
margin-bottom: 2%;
}