@charset "UTF-8";

/*初期設定*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

img{
max-width: 100%;
height: auto;
vertical-align:top;
}

/*サイト幅*/
.container{
margin: 0 auto;
width: 1280px;
}

/*ヘッダーここから*/
h1{
width: 320px;
margin-left:50px;
padding:100px 0 ;
line-height: 50px;/*ロゴ画像の上下の隙間をなくす。文字の高さと行の高さが同じになる*/
display:flex;
align-items:center; 
}

.rog{
width: 50px;
}

.shop-rog{
width: 270px;
}

/*ボタン化
display:block;
padding:10px;
*/

/*============================*/
/*ヘッダー部分*/
header{
background-color: #fff;
}
.header-inner{
display: flex;/*横並び・左よせ*/
justify-content:space-between;/*両端揃え*/
height:80px;/*設計図の指定の高さ*/
align-items:center;/*上下の中央揃え*/
}

/*============================*/
/*グローバルナビゲーション*/
.global-nav ul{
list-style: none;
display: flex;
}
.global-nav a{
color:#3a3e1d;
font-size: 20px;
font-weight: bold;
text-decoration: none;
display: block;/*ボタン化*/
padding:20px;
}

.global-nav a:hover{
background-color: #eee;/*カーソルをのせるとboxの色が変化する*/
}

.global-nav ul li a:hover{
color:#60C740;/*カーソルをのせると文字の色が変化する*/
}

/*============================*/
/*ファーストビュー*/
.first-view h2{
width: 100%;/*100%=親サイズ。（100vw=ブラウザー基準）
	100vw理由はスクロールバー15px*/
height: 720px;/*100vh*/

/*背景画像*/
background-image:url("../images/main-visual1.jpg");
background-repeat:no-repeat;
background-position: bottom;
background-size: cover;/*画像全体のサイズの調整してくれる*/
}

/*============================*/
.bnr{
	background-color:#f9f0e2;
}
.bnr_list{
	display: flex;
	justify-content: space-between;
}
.bnr_list div{
	width: 320px;
	margin: 80px 0;
	height: 160px;
}

.koke{
	cursor: pointer;/*対象物の上でカーソルが「手」マークに変化*/
	transition-delay: 0.2s;/*1秒たってから変化する*/
	transition: 2000ms all steps(5,strat) 1s;/*ショートハンドプロパティ*/
}
.koke:hover{
	box-shadow: 0 0 3px 0 rgba(0,0,0,1);/*ボックスにシャドウ*/
	transform: translate(0,-5px);/*上に5px浮く*/
}

.aroma{
	cursor: pointer;/*対象物の上でカーソルが「手」マークに変化*/
	transition-delay: 0.2s;/*1秒たってから変化する*/
	transition: 2000ms all steps(5,strat) 1s;/*ショートハンドプロパティ*/
}
.aroma:hover{
	box-shadow: 0 0 3px 0 rgba(0,0,0,1);/*ボックスにシャドウ*/
	transform: translate(0,-5px);/*上に5px浮く*/
}

.himawari{
	cursor: pointer;/*対象物の上でカーソルが「手」マークに変化*/
	transition-delay: 0.3s;/*1秒たってから変化する*/
	transition: 2000ms all steps(5,strat) 1s;/*ショートハンドプロパティ*/
}
.himawari:hover{
	box-shadow: 0 0 3px 0 rgba(0,0,0,1);/*ボックスにシャドウ*/
	transform: translate(0,-5px);/*上に5px浮く*/
}

/*============================*/
h4{
	color: #f9f0e2;
	font-size: 25px;
	text-align: center;
	background-color: #84bc4c;
	border: 1px solid #f9f0e2;/*四方向*/
	padding: 20px 40px;
	margin-bottom: 20px;
	margin-left: -30px;
}

/*↓↓↓カード↓↓↓*/
.Ucard{
	display: flex;
		justify-content: space-between;/*画像と文字テキストに余白*/
	margin:120px 0;
}

.Ucard__image{
	width: 640px;
	margin-right: 40px;
}

.Ucard__text{
	width: 400px;/*文字テキストサイズ*/
}

.Ucard__text li{
	font-size: 25px;
}
.plant-list {
  list-style: none; /* デフォルトのマーカーを消す */
  padding: 0;
  margin: 0;
}

.plant-list li {
  background: url("../images/happa.png") no-repeat left center;
  background-size: 40px 40px; /* アイコンのサイズを調整 */
  padding-left: 70px; /* アイコン分の余白を追加 */
  margin-bottom: 30px;
  line-height: 1.5;
}

/*↑↑↑カード↑↑↑*/

/*============================*/
h5{
	font-size: 40px;
	color: #3a3e1d;
	text-align: center;/*文字真ん中*/
	padding-top: 120px;
	padding-bottom: 80px;
/*<!--	text-decoration:underline;-->*/
}
.servic{
	background-color:#c1dda5;
	background-size: cover;/*カバー＝背景画像の全体表示*/
	background-position: center;/*画像が真ん中へ*/
	background-attachment: fixed;/*画像の固定*/
}

.servic ul{
	display: flex;/*画像横並び*/
	flex-wrap: wrap;/*改行。これを入力しないとずっと横並びになる*/
	justify-content: space-between;/*両端揃え（隙間）*/
	list-style-type: none;/*リストマーカー消し*/
	padding: 0;
}
.servic li{
	display: flex;
  flex-direction: column; /* 縦並び */
  align-items: center;    /* 中央寄せ */
  text-align:center;     /* テキスト中央寄せ */
	margin-bottom: 120px;/*下に外余白*/
	margin-left: 90px;
}
.servic li img {
  width: 240px;
  height: 240px;
}

.servic li p{
  margin: 0;
	}
section h6{
	font-size: 20px;
	color: #3a3e1d;
	margin-top: 20px;
  margin-bottom: 10px;
}

.slideshow{
	width: 1080px;/*画像サイズ*/
	margin: 0 auto;
}
.gallery {
  padding-bottom: 2;
}
.gallery .slick-slide{
	width: 560px;
	margin: 0 30px;
	border-radius: 20px;/*角丸*/
	overflow: hidden;/*はみ出た部分を隠す*/
}

.gallery .slick-prev{
	left: 0;
	z-index: 1;/*並び順*/
	width: 50px;
	height: 50px;
	background-size:contain;
}

/*=====フッター=====*/
footer{
padding:60px;
height: 420px;/*ボックス内の内側の余白*/
/*継承*/
text-align:center;/*文字が中央揃え*/
color:#3a3e1d;/*文字色*/
background-image:url("../images/rog_haikei.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;/*画像全体のサイズの調整してくれる*/
}

.footer_rog{
	display: flex;
	align-items: center;
  	justify-content: center; /* 中央寄せしたい場合 */
  	gap: 20px; /* ←ここで隙間を調整（例: 20px） */
	width: 400px;
}


.footer_rog_img ul{
	display: flex;
	list-style: none;
	justify-content:center;/*中央揃え*/
	margin-top: 30px;
}

.footer_rog_img li{
margin: 10px;
width: 40px;
}

/*=====================*/

.footer-nav ul{
	list-style: none;
	display: flex;
	justify-content:center;/*中央揃え*/
}

.footer-nav a{
color:#3a3e1d;
font-size: 15px;
font-weight: solid;
text-decoration: none;
display: block;/*ボタン化*/
padding:20px;
}

/*ホバーアニメーション*/
.footer-nav a:hover{
background-color: #eee;/*カーソルをのせるとboxの色が変化する*/
}

.footer-nav ul li a:hover{
color:#60C740;/*カーソルをのせると文字の色が変化する*/
}