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

/*初期設定*/

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

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

body{
min-width: 1280px;/*100px + 1080px + 100px*/
color: #333;
font-family: sans-serif;
}

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

/*ヘッダー部分*/
.header-innner{
display: flex;/*横並び*/
justify-content: space-between;/*両端揃え*/
	align-items: center;/*上下の中央*/
height: 80px;/*設計図の指定*/

}

.header-innner li img{
    width: auto;
    padding-right: 10px;
}
footer img{
	text-align: center;
}
footer p{
	text-align: center;
	padding-bottom: 43.5px;
}

h1{
width: 300px;
line-height: 1;/*ロゴ画像の上下の隙間を無くす*/
}

h2{
    font-family:serif;
	text-align: center;
	font-size:55px;
	padding: 120px 0 80px;
}

a{
	font-size: 15px;
}

/*グローバルナビゲーション*/
.global-nav ul{
list-style: none;
display: flex;
}

.global-nav a{
color: #333;
text-decoration: none;
display: block;/*ボタン化*/
padding: 0 20px;
margin: 20px 0;
border-left:#333 solid 0.5px;
}

.global-nav a:hover{
background-color: #eee;
}
/*ヘッダー*/
.global-nav2 ul{
list-style: none;
display: flex;/*横並べ*/
justify-content: center;/*中央揃え*/
padding:20px;
}

.global-nav2 a{
color: #333;
text-decoration: none;
display: block;/*ボタン化*/
padding:0 15px;
}

.global-nav2 img{
padding: 0 20px;
}

.global-nav2 a:hover{
background-color: #eee;
}
/*ヘッダー*/


/*ファーストビュー*/
.first-view{
width: 100%;
height: 720px;
/*背景画像*/
background-image: url("../images/first_view4.png"),
                    url("../images/first_view3.jpg");
/* 背景の表示位置（上：中央、下：中央上） */
background-position: 
center center, 
center top;

/* 背景の繰り返し設定（上：なし、下：リピートしない） */
background-repeat: 
no-repeat, 
no-repeat;

/* 背景のサイズ（上：そのまま、下：画面いっぱいにカバー） */
background-size: 
auto, 
cover;

/* 背景の動き（上：固定、下：スクロール） */
background-attachment: 
fixed, 
scroll;

/* 予備で背景色を設定（画像がないときの安全策） */
background-color: #f8f8f8;    
}

/*ファーストビュー*/


/*NEWS*/
.news{
	width: auto;
	height:830px
}

.news .slick-slide{
	width: 560px;
	margin: 0 30px;
}

.news .slick-prev{/*矢印ボタンの変更*/
	left:205px;
	z-index: 2;
	width: 50px;
	height: 50px;
}
.news .slick-next{/*矢印ボタンの変更*/
	right:205px;
	z-index: 2;
	width: 50px;
	height: 50px;
}
/*NEWS*/



/*MENU*/
.menu{
	width: auto;
	height: 850px;
/*背景画像*/
background-image: url("../images/burger_tex.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

.menu ul{
    display: flex;/*これで横並びになるはず*/
	justify-content: space-between;
	align-items: center;/*上下中央揃え*/
	list-style-type: none;
	text-align: center;
}

.menu img {
filter:drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3)) ;
}

.menu h3{
	font-family: serif;
	padding-top:1em;
}

.menu a{
display: block;/*ボタン化*/
padding:20px;
}
.menu a:hover {
transform: translateY(-2px); /* ちょっと浮かせる */
opacity: 0.9;
}

.menu a:hover img {
transform: scale(1.2); /* ホバー時に拡大 */
}


.movie{
	width: auto;
	height: 600px;
}

.movie p{
	font-size: 16px;
	padding-bottom: 18px;
}
.movie h2{
	 font-family:serif;
	text-align: center;
	font-size: 30px;
	padding:40px 0 35px;

}
/*NEWS*/

.news h2{
	padding: 120px 0 80px;/*news card*/
}
.card2{
	background-color: #fff;
	width: 1080px;/*カード一枚のサイズ*/
	display: flex;/*これで横並びになるはず*/
	justify-content: space-between;
	align-items: center;/*上下中央揃え*/
	padding-bottom: 50px
}

.card2_img{
width: 640px;
position: relative;
}

.bt-img{
	position: absolute;
	transform: translate(-50%,-50%);
	left: 50%;
	top:50%;
}
.card2_img:hover .bt-img{
opacity: 0.75;
}


.card2_txt{
	width: 400px;
	height: 360px;
	text-align: center;
	padding: 30px 0 30px;
}


/*INGREDIENTS*/
.ingredients{
	
	width: auto;
	height: 400px;
}

.ingredients h2{
    font-size: 30px;
	padding: 80px 0 35PX;
}

.topic {
  text-align: center;
  padding: 60px 0;
}

.topic h2 {
  font-size: 2rem;
  margin-bottom: 40px;
  letter-spacing: 2px;
  color: #333;
  text-transform: uppercase;
}

.topic_list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* 狭い画面で折り返し可能に */
    gap:50px;
}

.topic {
  width: auto; /* 各アイテムの幅 */
  color: #333;
}

.topic:hover {
transform: translateY(-10px); /* ちょっと浮かせる */
opacity: 0.9;
}

.topic:hover img {
transform: scale(1.05); /* ホバー時に拡大 */
}
/*INGREDIENTS*/