@charset "utf-8";

html {
	scroll-padding: 75px;
	scroll-behavior: smooth;
}

body {
	font-family: "UD デジタル 教科書体 NP", "UD 明朝", "serif"
}

/* ヘッダー◆ーーーーーーーーーーーーーーーーーーーーーーー*/
header {
	width: 100%;
	height: 65px;
	background-color: #f4bfac;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 900;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

/*ヘッダーロゴ部分*/
header h1 img {
	float: left;
	max-width: 350px;
}

#header_area {
	max-width: 1100px;
	margin-right: auto;
	margin-left: auto;
}

/* ナビゲーションメニュー◆ーーーーーーーーーーーーーーーーーーーーーー*/
nav {
	float: right;
}

#gnavi>ul {
	display: flex;
	height: 65px;
	width: 600px;
}

#gnavi>ul>li {
	width: 20%;
}

#gnavi li {
	list-style-type: none;
	position: relative;
}

#gnavi li a {
	color: #ffffff;
	display: block;
	line-height: 65px;
	text-align: center;
	text-decoration: none;
	font-weight: 700;
	width: 100%;
	height: 65px;
}

#gnavi li a:hover {
	background-color: #ec9a82;
}

/* ハンバーガーメニュー◆ーーーーーーーーーーーーーーーーーーーーーーー*/
#sp_gnavi_check {
	display: none;
}

/* パンくずリスト◆ーーーーーーーーーーーーーーーーーーーーーーー */
#breadcrumb {
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
	font-size: smaller;
	padding-top: 20px;
	margin: auto;
	padding-bottom: 20px;
	max-width: 900px;
	padding-left: 0;
}

#breadcrumb li:not(:last-of-type)::after {
	content: "›";
	margin: 0.4rem;
	color: #a58e7a;
}

#breadcrumb a {
	color: #df786b;
}

#breadcrumb a:hover {
	text-decoration: none;
}

#breadcrumb a:visited {
	color: #df786b;
}

/* コンテンツ全体◆ーーーーーーーーーーーーーーーーーーーーーーー */
main {
	clear: both;
	color: #42210b;
	background-color: #F6F1ED;
	margin-top: 65px;
}

/* メインビジュアル◆ーーーーーーーーーーーーーーーーーーーーーーー */
#mainvisual {
	background-color: #F6F1ED;
}

#mainvisual img {
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 1100px;
}


/* ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆ */
/* ◆◆◆◆◆トップページ◆ーーーーーーーーーーーーーーーーーーーーーーー */
/*トップのコンテンツ全て*/
#top_contents {
	text-align: center;
	max-width: 900px;
	margin: auto;
	padding-bottom: 50px;
}

/*トップメイン文章*/
#maintext {
	line-height: 180%;
}

#maintext img {
	max-width: 250px;
	padding-top: 20px;
}

#maintext p {
	padding-top: 10px;
	padding-bottom: 10px;
}


/*トップあいさつの箱*/
#aisatu>div {
	display: flex;
	margin-top: 40px;
}

#aisatu>div:nth-child(2) {
	flex-direction: row-reverse;
}

/*トップあいさつの箱の中の画像のサイズ*/
#aisatu>div>img {
	width: 50%;
}

#aisatu>div>div {
	width: 50%;
	text-align: left;
}

#a1 {
	padding-left: 20px;
	margin: auto;
}

#a2 {
	padding-right: 20px;
	margin: auto;
}

/*手書き文字部分*/
#a1 img,
#a2 img {
	max-height: 100px;
	margin-bottom: 10px;
}

/*トップあいさつ詳しく見るボタン*/
#aisatu>p {
	margin-top: 40px;
	margin-bottom: 70px;
}

/*ボタンの色とか*/
#aisatu>p a,
#news>p a {
	background-color: #ec9a82;
	border-radius: 15px;
	text-decoration: none;
	color: #ffffff;
	padding: 5px 10px;
}

/*ホバーしたとき*/
#aisatu>p a:hover,
#news>p a:hover {
	background-color: #f4bfac;
}

/* トップお知らせ */
#news h2 {
	margin-top: 20px;
	margin-bottom: 10px;
}

/*トップお知らせ3つ*/
#news_list {
	text-align: left;
	padding: 0 20px 0 20px;
	line-height: 150%;
}

/*トップお知らせ3つリンクの色*/
#news_list a {
	color: #42210b;
}

/*トップお知らせ3つホバーしたとき*/
#news_list a:hover {
	color: #df786b;
	text-decoration: none;
}

/*トップお知らせ日付*/
#news_list ul {
	list-style-type: none;
}

/*トップお知らせ日付の飾り*/
#news_list span {
	background-color: #a58e7a;
	padding: 5px 8px;
	margin-right: 20px;
	border-radius: 15px;
	color: #ffffff;
}

/*トップお知らせ点線部分*/
#news_list li {
	border-bottom: 2px #a58e7a dashed;
	padding: 10px 0;
}

/*トップお知らせ一覧へボタン*/
#news>p {
	margin-top: 40px;
}


/* ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆ */
/* ◆◆◆◆◆ごあいさつページ◆ーーーーーーーーーーーーーーーーーーーーーーー */
/*あいさつページのコンテンツ全て*/
#goaisatu {
	text-align: center;
	max-width: 900px;
	margin: auto;
	padding-bottom: 60px;
}

#kodawari {
	text-align: center;
	max-width: 900px;
	margin: auto;
	padding-bottom: 50px;
}

/*あいさつページのごあいさつ*/

/*あいさつページのこだわり*/

/*あいさつページのこだわり項目を横並びにする*/
#kodawari>div {
	display: flex;
	margin-top: 30px;
}

#kodawari>div:nth-child(odd) {
	flex-direction: row-reverse;
}

/*あいさつページのこだわり項目の画像サイズ*/
#kodawari>div>img {
	width: 50%;
}

#kodawari>div>div {
	width: 50%;
	text-align: left;
}

/*こだわり項目左寄せ*/
#ko1,
#ko3,
#ko5 {
	padding-left: 20px;
	margin: auto;
}

/*こだわり項目右寄せ*/
#ko2,
#ko4 {
	padding-right: 20px;
	margin: auto;
}

/*手書き文字サイズ*/
#goaisatu img {
	max-width: 250px;
	margin-top: 10px;
	margin-bottom: 5px;
}

#ko1 img,
#ko2 img {
	max-height: 100px;
}

#ko3 img,
#ko4 img,
#ko5 img {
	max-height: 45px;
}

#ko1 img,
#ko2 img,
#ko3 img,
#ko4 img,
#ko5 img {
	margin-bottom: 5px;
}



/* ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆ */
/* ◆◆◆◆◆メニューページ◆ーーーーーーーーーーーーーーーーーーーーーーー */
/*文字・ボックス真ん中揃え*/
#menutext {
	text-align: center;
	max-width: 900px;
	margin: auto;
	padding-bottom: 50px;
}

#menubox {
	max-width: 900px;
	margin: auto;
	padding-bottom: 30px;
}

/*メニューリスト*/
.menulist {
	max-width: 700px;
	margin: auto;
	margin-bottom: 40px;
	padding: 20px 30px;
}

.menulist dl {
	display: table;
	width: 100%;
	border-bottom: 1px dashed #a58e7a;
}

.menulist dt {
	display: table-cell;
	padding: 0.4rem 0 0.4rem 0.8rem;
}

/*価格*/
.menulist dd {
	text-align: right;
	display: table-cell;
	min-width: 6rem;
	padding: 0.4rem 0.8rem 0.4rem 0;
}

/*メニュー上の文章*/
.menulist h3 {
	max-width: 180px;
	margin: auto;
	text-align: center;
	background-color: #a58e7a;
	border-radius: 20px;
	color: #ffffff;
	padding: 5px 0px;
}

.menulist>p {
	text-align: center;
	padding-bottom: 10px;
	padding-top: 10px;
}

/*期間限定メニュー*/
.gentei {
	display: inline-block;
	background-color: #ec9a82;
	margin-left: 10px;
	padding: 1px 8px 0 8px;
	color: #ffffff;
	border-radius: 15px;
}

/*メニュー写真*/
#menuimg {
	max-width: 900px;
	margin: auto;
	text-align: center;
}


/* ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆ */
/* ◆◆◆◆◆お知らせ一覧ページ◆ーーーーーーーーーーーーーーーーーーーーーーー */
/*お知らせ一覧ページのコンテンツ全て*/
#osirasetext,
#news_card {
	text-align: center;
	max-width: 900px;
	margin: auto;
}

#osirasetext {
	margin-bottom: 50px;
}

/*お知らせカード*/
#news_card {
	display: flex;
	flex-wrap: wrap;
	gap: 50px;
	max-width: 900px;
	padding-bottom: 50px;
}

.card {
	flex-basis: calc((100% - 50px * 2)/3);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	overflow-wrap: break-word;
	background-color: #ffffff;
	color: #42210b;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

.card_img img {
	width: 100%;
	object-fit: cover;
}

.card_naiyo {
	padding: 10px 12px;
	text-align: center;
}

.card_naiyo h3 {
	font-size: 1.2rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.card_naiyo_day {
	font-size: smaller;
	font-weight: 700;
	color: #a58e7a;
	margin-bottom: 0.5rem;
}

.card:hover {
	transform: scale(1.04);
	box-shadow: 0 7px 15px rgba(0, 0, 0, 0.25);
}


/* ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆ */
/* ◆◆◆◆◆お知らせ記事◆ーーーーーーーーーーーーーーーーーーーーーーー */
#newstitle {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 20px;
}

#newstext {
	max-width: 900px;
	margin: 0 auto;
	text-align: left;
	padding-bottom: 50px;
}

#newstext_lesson {
	max-width: 900px;
	margin: 0 auto;
	text-align: left;
	padding-bottom: 50px;
	padding-top: 10px;
}

/* ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆ */
/* ◆◆◆◆◆カレンダーページ◆ーーーーーーーーーーーーーーーーーーーーーーー */
.calendar {
	max-width: 900px;
	margin: 0 auto;
	background-color: #ffffff;
	padding: 30px;
	margin-bottom: 30px;
}

.calendar th,
.calendar td {
	padding: 20px;
	border: 1px solid;
	width: calc(100% / 7);
	height: 80px;
}

.calendar th {
	padding: 10px;
	height: 0px;
}

/*土曜日*/
.calendar th:nth-child(6),
.calendar td:nth-child(6) {
	color: #3185df;
}

/*日曜日*/
.calendar th:nth-child(7),
.calendar td:nth-child(7) {
	color: #cc4d55;
}

/*火曜日*/
.day td:nth-child(2) {
	background-color: rgb(228, 209, 209);
}


/* ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆ */
/* ◆◆◆◆◆料理教室ページ◆ーーーーーーーーーーーーーーーーーーーーーーー */
/*開催情報*/
.lessonjoho {
	text-align: left;
	width: 900px;
	margin: auto;
	line-height: 1.5;
	padding-bottom: 40px;
}

.lessonjoho th,
.lessonjoho td {
	border-bottom: 1px dashed #a58e7a;
	padding: 10px;
	padding-left: 0px;
}

.lessonjoho th {
	vertical-align: top;
}

#newsimg {
	text-align: center;
	max-width: 900px;
	margin: auto;
}

/*お問い合わせフォームへボタン*/
#mousikomi>p {
	margin-top: 20px;
	max-width: 900px;
	margin: auto;
	padding-bottom: 50px;
	text-align: center;
}

#mousikomi>p a {
	background-color: #ec9a82;
	border-radius: 15px;
	text-decoration: none;
	color: #ffffff;
	padding: 5px 10px;
	width: auto;
}

#mousikomi>p a:hover {
	background-color: #f4bfac;
}



/* ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆ */
/* ◆◆◆◆◆店舗情報ページ◆ーーーーーーーーーーーーーーーーーーーーーーー */
/*店舗ページのコンテンツ全て*/
#tenpo {
	text-align: center;
	max-width: 900px;
	margin: auto;
	padding-bottom: 50px;
}

/*店舗情報の内容*/
.tenpojoho {
	text-align: left;
	width: 700px;
	margin: 40px auto 50px;
	line-height: 2;
	padding-bottom: 30px;
}

.tenpojoho th,
.tenpojoho td {
	border-bottom: 2px dashed #a58e7a;
	padding: 10px 0;
	padding-left: 50px;
}

.tenpojoho th {
	vertical-align: top;
}

/* ◆◆◆◆◆お問い合わせページ◆ーーーーーーーーーーーーーーーーーーーーーーー */
#otoiawasetext,
#tell {
	text-align: center;
	max-width: 900px;
	margin: auto;
	padding-bottom: 50px;
}

#formtext {
	text-align: center;
	max-width: 900px;
	margin: auto;
}

/*電話番号の色*/
#tell a {
	color: #df786b;
	font-weight: 700;
}

#tell a:hover {
	text-decoration: none;
}

/*フォーム*/
form {
	max-width: 800px;
	margin: auto;
	padding-bottom: 50px;
	text-align: center;
}

/*項目部分*/
form p {
	margin: 25px 0;
}

/*テキストエリア*/
.input {
	display: block;
	width: 600px;
	margin: auto;
	font-size: 14px;
}

#usercomment {
	width: 600px;
	height: 200px;
}

button {
	width: 100px;
	height: 50px;
	padding: 10px;
}

/*ボタンの色とか*/
button {
	background-color: #ec9a82;
	border-radius: 15px;
	color: #ffffff;
	padding: 5px 10px;
	border: none;
	font-size: 15px;
}

/*ホバーしたとき*/
button:hover {
	background-color: #f4bfac;
}

/* フッター◆ーーーーーーーーーーーーーーーーーーーーーーー */
footer {
	background-color: #f4bfac;
}

#footer_inner {
	color: #ffffff;
	margin: 0 auto;
	padding: 2rem;
	font-size: 15px;
	max-width: 900px;
}

#footer_inner>div {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

/*フッターのロゴ画像*/
#footer_inner img {
	max-width: 140px;
}

/*フッターの店舗情報*/
.tenpojoho_footer {
	text-align: left;
	width: 400px;
}

.tenpojoho_footer th,
.tenpojoho_footer td {
	padding: 5px 0;
	padding-left: 20px;
}

/*電話番号*/
.tenpojoho_footer td a {
	color: #ffffff;
	font-weight: 700;
}

.tenpojoho_footer td a:hover {
	text-decoration: none;
}

#copyright {
	border-top: 2px solid #ffffff;
	margin-top: 30px;
	padding-top: 10px;
	text-align: center;
}

/* ページの先頭へ戻る◆ーーーーーーーーーーーーーーーーーーーーーーー */
#pagetop {
	border-radius: 50%;
	height: 55px;
	width: 55px;
	background-color: #ffffff;
	border: 2px solid #df786b;
	position: fixed;
	right: 30px;
	bottom: 30px;
	z-index: 100;
	opacity: 0.9;
	display: flex;
	justify-content: center;
	align-items: center;
}

#pagetop:hover {
	background-color: #f8e4dd;
}

#pagetop_inner {
	height: 15px;
	width: 15px;
	border-top: 3px solid #df786b;
	border-right: 3px solid #df786b;
	transform: translate(0, 20%) rotate(-45deg);
}






/* 970px以下の場合◆ーーーーーーーーーーーーーーーーーーーーーーー  */
@media(max-width:970px) {

	/* ◆ハンバーガーメニューボタン部分*/
	#sp_gnavi_btn {
		position: fixed;
		top: 10px;
		right: 10px;
		height: 45px;
		width: 45px;
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 200;
	}

	#sp_gnavi_btn span,
	#sp_gnavi_btn span::before,
	#sp_gnavi_btn span::after {
		content: "";
		display: block;
		position: absolute;
		width: 25px;
		height: 3px;
		background-color: #f4bfac;
		transition: all 0.6s ease-in-out;
	}

	#sp_gnavi_btn span::before {
		bottom: 8px;
	}

	#sp_gnavi_btn span::after {
		top: 8px;
	}

	#sp_gnavi_check:checked~#sp_gnavi_btn span {
		background-color: transparent;
	}

	#sp_gnavi_check:checked~#sp_gnavi_btn span::before {
		bottom: 0;
		transform: rotate(45deg);
	}

	#sp_gnavi_check:checked~#sp_gnavi_btn span::after {
		top: 0;
		transform: rotate(-45deg);
	}

	/* ◆ハンバーガーメニューナビゲーションメニュー*/
	#gnavi {
		position: fixed;
		top: 0;
		left: 100%;
		width: 100%;
		height: 100%;
		padding-top: 70px;
		background-color: rgba(255, 255, 255, 0.8);
		z-index: 100;
		transition: all 0.6s ease-in-out;
	}

	#sp_gnavi_check:checked~#gnavi {
		left: 0%;
	}

	#gnavi>ul {
		display: block;
		width: 100%;
		height: 50px;
	}

	#gnavi>ul>li {
		background-color: #f4bfac;
		width: 100%;
		height: auto;
	}

	#gnavi ul li a {
		border-top: 1px solid #ffffff;
		width: 100%;
		margin: 0;
		padding-left: 10px;
		color: #ffffff;
		text-align: center;
	}

	#gnavi>ul>li:last-child {
		border-bottom: 1px solid #ffffff;
	}

	#gnavi li li {
		background-color: #CC9F8B;
		height: 45px;
		overflow: visible;
		display: block;
	}

	#gnavi li li a {
		padding-left: 30px;
		line-height: 45px;
	}

	#gnavi li:hover {
		background-color: #f4bfac;
	}

	#gnavi li:hover li {
		height: 45px;
	}

	#gnavi li li:hover {
		background-color: #f4bfac;
	}

	#breadcrumb {
		width: 90%;
	}
}



/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* 768px以下の場合ーーーーーーーーーーーーーーーーーーーーーーー */
@media(max-width: 768px) {

	#explanation,
	#menu>p,
	#info>p {
		text-align: left;
		margin-left: 1rem;
		margin-right: 1rem;
	}

	body {
		font-size: 90%;
	}

	article {
		width: 95%;
		margin: auto;
	}

	.card_naiyo h3 {
		font-size: 1rem;
	}

	/*ヘッダーロゴ部分*/
	header h1 img {
		float: left;
		max-width: 280px;
		padding-top: 8px;
	}

	/* ◆◆◆◆◆トップページ◆ーーーーーーーーーーーーーーーーーーーーーーー */
	/*トップメイン文章*/
	#maintext {
		margin: 0;
	}

	/*トップあいさつの箱*/
	#aisatu>div {
		display: block;
	}

	/*トップあいさつの箱の中の画像のサイズ*/
	#aisatu>div>img {
		width: 90%;
	}

	#aisatu>div>div {
		width: 90%;
	}

	#a1 img {
		max-width: 80%;
	}

	#a1 {
		padding-left: 0px;
		margin: auto;
	}

	#a2 {
		padding-right: 0px;
		margin: auto;
	}

	/*手書き文字部分上下に空白*/
	#a1 img,
	#a2 img {
		margin-top: 10px;
		margin-bottom: 5px;
	}

	/*トップお知らせ日付の飾り*/
	#news_list span {
		padding: 3px 6px;
	}

	/* ◆◆◆◆◆ごあいさつページ◆ーーーーーーーーーーーーーーーーーーーーーーー */
	/*あいさつページのこだわり*/
	#kodawari>div {
		display: block;
	}

	/*あいさつページのこだわり項目の画像サイズ*/
	#kodawari>div>img {
		width: 90%;
	}

	#kodawari>div>div {
		width: 90%;
	}

	#ko1,
	#ko3,
	#ko5 {
		padding-left: 0px;
	}

	#ko2,
	#ko4 {
		padding-right: 0px;
	}

	#ko1 img,
	#ko2 img,
	#ko3 img,
	#ko4 img,
	#ko5 img {
		margin-bottom: 5px;
		margin-top: 5px;
	}



	/* ◆◆◆◆◆店舗情報ページ◆ーーーーーーーーーーーーーーーーーーーーーーー */
	/*店舗情報の内容*/
	.tenpojoho {
		width: 100%;
		margin: 20px auto 50px;
		line-height: 1.5;
	}

	.tenpojoho th,
	.tenpojoho td {
		padding-left: 0px;
	}

	.tenpojoho th {
		width: 20%;
	}

	iframe {
		width: 100%;
	}


	/* ◆◆◆◆◆お問い合わせページ◆ーーーーーーーーーーーーーーーーーーーーーーー */
	form {
		max-width: 800px;
	}

	.input {
		width: 100%;
	}

	textarea {
		width: 100%;
	}

	button {
		width: 70px;
	}

	#usercomment {
		width: 100%;
	}

	/* ◆◆◆◆◆カレンダーページ◆ーーーーーーーーーーーーーーーーーーーーーーー */
	.calendar {
		max-width: 90%;
		padding: 10px;
	}

	.calendar th,
	.calendar td {
		padding: 5px;
		height: 0px;
	}

	.calendar th {
		padding: 5px;
		height: 0px;
	}

	/* ◆◆◆◆◆料理教室ページ◆ーーーーーーーーーーーーーーーーーーーーーーー */
	/*開催情報*/
	.lessonjoho {
		width: 100%;
	}

	#newsimg img {
		width: 90%;
	}

	#menuimg img {
		width: 90%;
	}






	/* フッター */
	#footer_inner {
		max-width: 100%;
	}

	#footer_inner>div {
		justify-content: center;
	}

	#copyright {
		text-align: center;
	}

	/*お知らせ*/
	.card {
		flex-basis: calc((100% - 20px) / 2);
	}

	/*お知らせカード*/
	#news_card {
		gap: 20px;
		max-width: 900px;
	}
}