@charset "utf-8";
/* @import url(style.css); */

/* リセットｃｓｓ */
body {
	margin: 0;
	padding: 0;
	/* background-color: #cccccc; */
	background-image: url(../images/haikei.jpg);
	color: #333333;
	font-size: 15px;
	line-height: 2;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
}

img {
	vertical-align: bottom;
}

ul {
	margin: 0;
	padding: 0;
}

/* リンク色、訪問後のリンク色 */
a {
	color: #191970;
	text-decoration: none;
}

a:visited {
	color: #635846;

}

/* グーグルフォントでトップの見出しを明朝体に */

.main h1 {
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-style: normal;
}

.main p,.btn{
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-style: normal;
}



/* ポインタを合わせた場合だけ下線表示 */
a:hover {
	text-decoration: underline;
}

/* ヘッダーエリアのサイズと位置を設定 */
header {
	width: 960px;
	height: 170px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;

}

/* ナビ項目を横並びに 位置調整 */
.global-nav {
	display: flex;
	justify-content: space-between;
}

.global-nav li {
	margin: 0 20px;
	font-size: 18px;
	list-style: none;
	font-family: "Noto Serif JP", serif;
}

.global-nav li a {
	color: #333333;
}

.global-nav a:hover {
	border-bottom: 2px solid #333333;
	padding-bottom: 8px;
	text-decoration: none;
}

/* コンテンツエリアを中央揃えにする */
.main {
	width: 960px;
	margin: 0 auto;
}

/* フッターエリア調整 */
footer {
	text-align: center;
	color: #ffffff;
	padding: 20px 0;
}

footer {
	font-size: 12px;
}

/* トップページ装飾 */
#top h1 {
	  font-size: clamp(32px, 8vw, 95px);
    line-height: 1.2;
    color: #ffffff;
    text-align: center;
    margin: clamp(40px, 10vw, 100px) 0 40px 0;
}

#top p {
	font-size: 16px;
	color: #ffffff;
	text-align: center;
}

.btn {
	background-color: #333333;
	color: #ffffff;
	font-weight: 100;
	font-size: 20px;
	width: 200px;
	display: block;
	margin: 20px auto;
	padding: 5px 0;
	text-align: center;
	border-radius: 5px;
	border: 1px solid #333333;
}

.btn:hover {
	text-decoration: none;
	background-color: #ffffff;
	color: #333333;
}

#top footer {
	margin-top: 200px;
}

/* トップの背景画像調整 */

#top {
    background: url("../images/top.jpg") no-repeat center/cover;
    animation: bgsoft 3.5s ease forwards;
    opacity: 0;
    filter: blur(8px);
}

@keyframes bgsoft {
    0% {
        opacity: 0;
        filter: blur(12px);
    }
    100% {
        opacity: 1;
        filter: blur(0);
    }
}





/* フェードアウト用クラス（JSで使う） */
.fade {
	opacity: 0;
}


/* コンセプトページ装飾 */
.two-column {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 20px;
}

.contents-area,
.side-area {
	background-color: #fdfbf8;
	padding: 20px 40px;
	border-radius: 10px;
	box-sizing: border-box;
}

.contents-area {
	width: 680px;
}

.side-area {
	width: 270px;
}

.contents-area a img:hover {
	opacity: 0.8;
}

h1 {
	font-size: 30px;
	margin: 5px 0 10px;
}

h2 {
	font-size: 18px;
	margin: 20px 0 10px;
	color: #8B4513;
}

footer {
	margin-top: 20px;
}

/* レシピページ装飾 */
.grid-outer {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.grid-inner {
	width: 48%;
	margin-bottom: 5px;
}

.grid-inner img {
	max-width: 100%;
}

figcaption {
	color: #fdfbf8;
	font-size: large;
	text-align: center;
	background-color: #635846;
}

/* ecサイトへいくバナー */
.side-area img {
	max-width: 100%;
	height: auto;
    transition: 0.3s ease; /* ふわっと変化 */
}

.side-area img:hover {
    filter: brightness(20%); /* 明るさを下げて色を薄くする */
}


.grid-inner p {
	line-height: 1.6;
}

/*トップへいくリンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background:#333333;
	border-radius: 5px;
	width: 80px;
	height: 80px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:1rem;
	transition:all 0.3s;
}

#page-top a:hover{
	background: #777;
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}
/* 見出しがふわっとなる */
.contents-area h1 {
    opacity: 0;
    transform: translateY(20px); /* 下にずらしておく */
	animation: fadeUp 0.9s cubic-bezier(.25,.46,.45,1.4) forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* コンタクトページ装飾 */
.one-column .contents-area{width: 100%;}
.access .access-inner{
	display: flex;
	justify-content: space-between;
}
.access th,.access td{
	text-align: left;
	vertical-align: top;
	line-height: 2.5;
}
.access td{
	padding: 0 20px;
}

/* ===========================
   スマホ用レイアウト（768px以下）
   =========================== */
@media screen and (max-width: 768px) {

    /* 全体の余白とフォント */
    body {
        padding: 0 16px;
        font-size: 16px;
        line-height: 1.7;
    }

  
    nav ul.global-nav {
        flex-direction: column;
        gap: 10px;
        padding: 0;
    }

    /* 2カラム → 1カラム化 */
    .two-column {
        display: block;
    }
    .contents-area,
    .side-area {
        width: 100%;
    }
    .side-area {
        margin-top: 40px;
    }

    /* レシピカード（grid-inner）を1列に */
    .grid-outer {
        display: block;
    }
    .grid-inner {
        margin-bottom: 40px;
    }

    /* 画像がはみ出る問題を完全解決 */
    img {
        max-width: 100%;
        height: auto;
    }

    /* 見出しのメリハリ */
    h1 {
        font-size: 24px;
        margin-bottom: 20px;
    }

.main {
        width: 100%;
        padding-top: 28vh;   /* ← ここが最重要：背景の中央に寄せる */
        padding-bottom: 20vh;
        text-align: center;
    }

    h2 {
        font-size: 20px;
        margin-top: 40px;
        margin-bottom: 20px;
    }

    /* サイドバーのリンクを見やすく */
    .side-area ul li {
        margin-bottom: 12px;
        font-size: 16px;
    }

    /* Page Top ボタンの改善 */
    #page-top {
        bottom: 20px;
        right: 20px;
    }
}
@media screen and (max-width: 768px) {
    header {
        width: 100%;          /* ← これが必須 */
        height: auto;         /* ← 高さ固定も崩れの原因なので解除 */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px 0;
        gap: 16px;
    }

    header .logo img {
        max-width: 180px;
        height: auto;
    }

    nav ul.global-nav {
		/* 縦並びにする */
        flex-direction: column;
        gap: 12px;
        padding: 0;
        margin: 0;
    }

.contents-area p{
	max-width: 400px;
}
.contents-area img{
	max-width: 400px;
	
}


}