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

*,*::before,*::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

img{
max-width: 100%;
width: 100%;/*画像サイズ以上になれる*/
height: auto;
vertical-align: top;
transition: 0.5s ease-in-out; /* なめらかに変化 */
}

body{
font-family: serif;
color: #0f3220;
line-height: 1.8;
align-items: center;
overflow-x: hidden;
}

/*サイト幅*/
.container{
width: 90%;/*可変レイアウト*/
max-width: 1080px;/*上限*/
margin: 0 auto;
}

p{
font-size: 16px;
}

/*ヘッダー*/
.logo{
width: 250px;
margin: 0 auto;
}

/*ヘッダーコンテナ*/
.header-container{
display: flex;
justify-content: space-between; /* 両端に配置 */
padding: 5px 0;
max-width: 1080px;
}

h1{
width: 320px;
margin: 0 0 0 20px;
}

/*グローバルナビ*/
.global-nav ul{
width: 430px;
display: flex;
justify-content: space-between;
}

.global-nav li{
width: 300px;
font-size: 14px;
font-weight: bold;
align-items: baseline;
background-color: #fdfff8;
}

.global-nav a{
display: block;
text-decoration: none;
color: #4ba049;
padding: 12px 1px 0 5px;
white-space: nowrap;/*絶対に文字を改行しない！*/
}

.global-nav a:hover{
text-decoration: underline;
}

/*ハンバーガーボタン*/
.ham_btn{
/*リセット*/
border: none;
outline: none;
/*ボタン*/
display: none;/*PCで非表示*/
width: 50px;
height: 50px;
background-color: #fff;
cursor: pointer;
/*配置位置*/
position: fixed;
top: 0;
right: 0;
z-index: 9999;
transition: 200ms;
}


h3{
font-size: 48px;
font-weight: bold;
text-align: center;
}

/*ファーストビュー*/
.mv{
color: rgba(0,0,0,0.00);
background-color: #4ba049;
max-width: 100%;
height: 60vh;
min-height: 540px;
/*幅・高さが設定された中での上下左右中央に配置*/
display: flex;
justify-content: center;
align-items: center;
/*背景画像*/
background-image: url("../images/mv.jpg");
background-repeat: no-repeat;
background-position: center; /*横も縦も中央になる*/
background-size: cover;
margin-bottom: 80px;
}

.mv h2{
color: #fff;
text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
font-size: 48px;
font-weight: bold;
position: relative;
right: -10%;
bottom: -32%;
line-height: 1.2;
font-family: serif;
}


/*バナー*/
.banner{
display: flex;
justify-content: space-between;
/*background-color: darkorchid;確認用*/
margin-bottom: 80px;
}

.banner img{
width: 320px;
height: auto;
}

.banner>li{
margin-right: 10px;
}

li:not(:last-child) {
  margin-right: 10px; /* 隙間のサイズを調整 */
}

.banner a:hover{
filter: brightness(0.7); /* 70% の明るさにする（暗くする） */
}

/*ボタンクリックで凹む*/
.banner a:active {
  transform: translateY(5px); /* 下に2pxずらす */
}

/*youtube*/
h3 span{
display: block;
color: #0f3220;
font-size: 14px;
font-weight: normal;
}

.youtube{
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 120px;
}

.tube_img img{
width: 640px;
margin-right: 40px;
margin-bottom: 20px;
}

.tube_txt{
width: 400px;
margin-left: 20px;
}

.tube_txt p{
margin-bottom: 30px;
}

.tube_txt h3{
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
line-height: 1.3;
text-align: left;
}

.btn{
background-color: #0F3220;
color: #fff;
padding: 20px;
text-decoration: none;
border-radius: 20px;
margin-bottom: 60px
}

.btn:hover{
filter: brightness(1.8); 
}

.btn:active{
filter: drop-shadow(5px 5px 2px #45d75c); 
}

/*メニュー*/
.menu{
background-color: #979625;
background-image: url("../images/reaf.gif");
background-size: 15px;
background-repeat: repeat;
text-align: left;
}

.menu h3{
padding-top: 50px;
}

.menu_item h4{
font-size: 36px;
text-align: center;
}

.menu img{
border-radius: 50%;
width: 240px;
height: auto;
}

.menu_grid{
display: flex;          
flex-wrap: wrap;        
justify-content: space-evenly;
min-width: 750px;
padding: 150px 0;
}

.menu_item{
width: 240px;
font-size: 36px;
font-weight: bold;
margin: 5px 5px;
/*background-color: aqua;
*/}

.menu_item a{
text-decoration: none;
color: #0f3220;
}

.menu_item a:hover{
filter: brightness(0.7); 
}

.menu_item a:active {
filter: drop-shadow(5px 5px 0 #0f3220); 
}

/*取り組み*/
.attempt{
/*background-color: #C4A46B;
*/padding-bottom:50px;
padding-top: 100px;
}

/*カードレイアウト*/
.card{
width: 560px;
height: 420px;
background-color: #4ba049;
margin: 80px 30px 20px;/*隣のcardとの余白*/
box-shadow: 5px 5px 3px 1px #2c2f294f;
}

.slick-slide {
opacity: 0.5; /* 透明度を下げる */
transition: opacity 0.5s ease; /* スムーズに変化 */
}

.slick-active {
opacity: 1; /* 表示中のスライドはくっきり */
}

/*フッター*/
footer{
margin-top: 120px;
text-align: center;
}

footer .logo{
width: 200px;
margin: 50px 0;
}

.footer_nav{
display: flex;
justify-content: center;
margin-top: 10px;
}

.footer_nav li{
font-size: 12px;
}

.footer_nav a{
text-decoration: none;
padding: 0 20px;
display: block;
color: #0f3220;}

.footer_nav a:hover{
text-decoration: underline;
}

.footer_nav a:active{
color: #4ba049;
}

small{
font-size: 12px;
padding-bottom: 10px;
color: #0f3220;
}

/*トップ戻るボタン*/
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: rgba(255,255,255,0.5);
    border: solid 2px #4ba049;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99;
    box-shadow: 0 4px 6px rgb(0 0 0 / 30%);
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #4ba049;
    border-right: 3px solid #4ba049;
    transform: translateY(20%) rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {
    .pagetop:hover, .pagetop:hover .pagetop__arrow {
        border-color: #C5492B;
    }
}

@media (max-width:1024px){
    .menu_grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    min-width: 700px;
    padding: 70px 0;
    }
    .card {
    width: 470px;
    height: auto;
    }

}

@media (max-width:767px){
    p{
    font-size: 16px;
    text-align: left;
    }
    h3{
    font-size: 32px;
    }
    /*ロゴ*/
    h1{
    margin: 0;
    width: 200px;
    }
    .logo {
    width: 200px;
    min-width: 170px;
    margin: 6px 0 0 0;
    }
    
    /*ヘッダーコンテナ*/
    .header-container{
    padding: 0;
    width: 200px;
    }
    
    /*ハンバーガーボタン*/
    .ham_btn{
	display: block;/*SPで表示*/
    right: 0px;
	}
    /*三本線*/
    .ham_btn span,
    .ham_btn::before,
    .ham_btn::after{
    content: "";
    width: 30px;
    height: 2px;
    background-color: #4ba049;
    position: absolute;
    left: 10px;
    transform: translateY(-50%);
    transition: 200ms;
    }
    .ham_btn::before{
    top: 30%;
    }
    .ham_btn span{
    top: 50%;
    }
    .ham_btn::after{
    top: 70%;
    }
    /*ナビゲーション展開時*/
    .ham_btn.is_open{
    background-color: #4ba049;
    }
    .ham_btn.is_open span{
    opacity: 0;/*真ん中の１本を見えなくする*/
    }
    .ham_btn.is_open::before{
    top: 50%;
    transform:rotate(45deg);
    background-color: #fff;
    }
    .ham_btn.is_open::after{
    top: 50%;
    transform:rotate(-45deg);
    background-color: #fff;
    }
    /*navの中身*/
    .global-nav{
    height: 50px;
    }
    .global-nav>ul{
    width: 100vw;
    flex-wrap: wrap;
    }
	.global-nav li{
	font-size: 14px;
	text-align: left;
    width: 100%;
    height: 50px;
    border-bottom: #4ba049 dotted 3px;
    align-items: center;
	}
    .global-nav li:last-child {
    border-bottom: none; /* 最後のliだけボーダーを消す */
    }    
    .global-nav a{
    padding: 10px 16px 0;
    white-space: normal;
    }
    .global-nav a:hover{
    text-decoration: none;
    color: #A09849;
    }
   	.g_nav{
	display: block;/*たてならべ*/
	width: 100%;/*画面いっぱい*/
	background-color: #fff;
	position: fixed;/*固定配置*/
	top: 0;
	left: 100%;/*右の画面外に追い出す*/
	transition: left 200ms;
    z-index: 999;
	}

	/*くっつけて書く*/
	.g_nav.is_open{/*この２つを同時に持っている要素の意味*/
	left: 0;
	}  
    
    /*メインビジュアル*/
    .mv h2{
    font-size: 22px;
    font-size: 22px;
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%);
    writing-mode: vertical-rl;/*縦書き*/
    text-orientation: mixed;/*右から左への文字方向*/
    }
    .mv{
    margin-bottom: 50px;
    min-height: 570px;
    }
    
    /*バナー*/
    .banner li{
    max-width: 250px;
    height: auto;
    margin: 20px auto;
    }
    .banner{
    display: block;
    margin-bottom: 50px;
    }
    
    /*ようつべ*/
    .youtube h3{
    font-size: 24px;
    }
    .youtube{
	display: block;
    margin-bottom: 80px;
	}
	.tube_img{
	width: 100%;/*幅いっぱいに広がる*/
	margin-bottom: 10px;
	}
	.tube_txt{
	width: 100%;/*幅いっぱいに広がる*/
    margin-left: 0;
	}
    .tube_txt .btn {
    display: block; /* ボタンをブロック要素に */
    text-align: center; /* 中央揃え */
    padding: 15px;
    margin: 5px auto; /* 上下の余白 + 水平中央揃え */
    width: fit-content; /* ボタンの幅を内容に合わせる */
    }
    
    /*メニュー*/
    .menu_item img{
    width: 135px;
    }
    .menu h3 {
    padding-top: 20px;
    }    
    .menu_item h4{
    font-size: 20px;
    }
    .menu_item p{
    width: 90%;
    font-size: 12px;
    line-height: 1.8;
    margin: 0 auto;
    }
    .menu_item .sp-hide{
    display: none;
    }
    .menu_grid{
    padding: 35px 0;
    min-width: 220px;
    justify-content: space-between;
    }
    .menu_item{
    width: 100%;
    }
    .menu li:not(:last-child) {
    margin-right: 0;
    }
    
    /*取り組み*/
    .card{
    width: 200px;
    height: auto;
    margin: 40px 10px 20px;/*隣のcardとの余白*/
    }
    
    /*フッター*/
    footer li,footer p{
    margin: 0 auto;
    text-align: center;
    font-size: 12px;
    }
    small{
    font-size: 10px;
    }
    footer{
    margin-top: 43px;
    }
    footer .logo{
    margin: 20px 0;
    }
}