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



/* =========================================
    共通部分
==========================================*/

html {
	font-size: 100%;
}

body {
	background-color: antiquewhite;
}

a {
	text-decoration: none;
	color: color-mix(in srgb, #493907 97%, white);
}
h1,h2,h3,p {
	color: color-mix(in srgb, #493907 97%, white);
}

/* ↓ 画像の大きさの指定（画像が親要素よりも大きくなることを防ぐ） ↓ */
img {
	max-width: 100%;
}

li {
	list-style: none;
}

/* =========================================
    レイアウト
==========================================*/

.align-center {
	text-align: center;
}


/* =========================================
    ★トップページ★
==========================================*/
/* =========================================
    ヘッダー
==========================================*/

/* オーニングのような装飾 
＿＿＿＿＿＿＿＿＿＿＿＿＿＿__________________________________________*/
.box {
	width: 100%;
	height: 80px;
	background-color: #821908;
}

.box_instagram {
	width: 100%;
	height: 80px;
	display: flex;            /* ← 横並びにする */
	justify-content: flex-end;/* ← 中身を右寄せにする */
	align-items: center;      /* ← 上下中央に配置する（必要なら） */
	padding: 0 20px;          /* 右側の余白（お好みで） */
}

.box_instagram img {
	width: 37px;
	height: 37px;
}

.harf-circle {
	width: 100%;
	height: 55px; 
	background-image: url("../img/cercle.png");
	background-repeat: repeat-x;
	margin-top: -2px; /* 少し重ねる場合 */
	margin-bottom: 45px;
}

/* ナビゲーション 
__________________________________________*/

.navigation {
	width: 575px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
}

.navigation li {
	display: flex;
	margin-right: 17px;
}

.navigation li img {
	display: flex;
	margin-right: 17px;
	
}

.navigation li a {
	font-size: 24px;
	color: color-mix(in srgb, #493907 97%, white);
	padding-right: 52px;
}

/* メインビジュアル
__________________________________________*/

.main_visual img {
	width: 100%;
	height: auto;
	margin-top: 42px;
}

/* =========================================
    コンテンツ
==========================================*/

/* About（ボタン）
__________________________________________*/

.btn_about {
	display: inline-block;
	justify-content: center;
	font-size: 30px;
	font-weight: normal;
	background-color: #821908;
	color: #fff;
	border-radius: 15px;
	margin-top: 150px;
	margin-bottom: 50px;
	padding: 18px 70px;
	text-align: center;	
	transition: .5s;
}

.btn_about:hover {
	background-color: rgba(135, 25, 8, 0.7);
}

/* About（パンの説明＆イートインのレイアウト）
__________________________________________*/

.section_inner_about_1-1 {
	display: flex;
	height: 300px;
	margin: 80px 0 80px 0;
	justify-content: center; /* 横方向の中央揃え */
	align-items: center;     /* 縦方向の中央揃え */
	/*background-color: orange;*/
}

.section_inner_about_1-2 {
	display: flex;
	height: 300px;
	margin-bottom: 100px;
	justify-content: center; /* 横方向の中央揃え */
	align-items: center;     /* 縦方向の中央揃え */
	/*background-color: orange;*/
}

/* About（パンの説明＆イートインの横幅調整）
__________________________________________*/

.section_inner_pan-explaination,
.section_inner_eat-in-image {
	margin-right: 150px; /* ＊後で幅調整＊ */
}

/* About（パンの説明＆イートインの文字や行間調整...ect）
＿＿＿＿＿__________________________________________*/

.section_inner_pan-explaination h2,
.section_inner_eat-in-explaination h2 {
	font-size: 35px;
	line-height: 42px;
	margin-bottom: 10px;
	/*background-color: hotpink;*/
}

/* About（パンの説明の文字サイズ＆行間）
__________________________________________*/

.section_inner_pan-explaination p {
	font-size: 16px;
	line-height: 29px;
	/*background-color: darkcyan;*/
}


/* About（イートインの説明の文字サイズ＆行間）
__________________________________________*/

.section_inner_eat-in-explaination p {
	font-size: 16px;
	line-height: 29px;
	/*background-color: darkcyan;*/
}


/* Recommend（ボタン）
__________________________________________*/

.btn_recommend {
	display: inline-block;
	justify-content: center;
	text-align: center;
	font-size: 30px;
	font-weight: normal;
	background-color: #821908;
	color: #fff;
	border-radius: 15px;
	padding: 18px 26px;
	margin: 97px 0 83px 0;
	transition: .5s;
}

.btn_recommend:hover {
	background-color: rgba(135, 25, 8, 0.7);
}

/* recommend（画像のレイアウト）
__________________________________________*/

.section_inner_recommend {
	display: flex;
	width: 70%;
	height: 350px;
	justify-content: space-around; /* 横方向の中央揃え */
	align-items: center;     /* 縦方向の中央揃え */
	text-align: center;
	margin: 0 auto;
	margin-top: 60px;
	margin-bottom: 20px;
	/*background-color: orange;*/
}

/* recommend（パンの商品名）
__________________________________________*/

.section_inner_recommend h3 {
	font-size: 15px;
}

/* recommend（and moreのボタン）
__________________________________________*/

.btn_andmore {
	display: inline-block;
	justify-content: center;
	text-align: center;
	font-size: 14px;
	color: #fff;
	font-weight: normal;
	background-color: #821908;
	margin-top: 70px;
	margin-bottom: 100px;
	padding: 10px 13px;
	border-radius: 15px;		
	transition: .5s;
}

.btn_andmore:hover {
	background-color: rgba(135, 25, 8, 0.7);
}

/* =========================================
   TOPボタン  
==========================================*/
.circle-button {
	position: fixed;
	bottom: 50px;
	right: 100px;
	width: 100px;
	height: 100px;
	background: #821908;
	border: none;
	border-radius: 50%; /* ← 丸くするポイント */

	/* 中央揃え */
	display: flex;
	justify-content: center;
	align-items: center;

	cursor: pointer;
	z-index: 1000;
	
	text-decoration: none;
	color: white;
	font-size: 15px;

  	/* 影 */
	/*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);*/
}

.circle-button:hover {
	background-color: rgba(135, 25, 8, 0.7);
}

/* =========================================
   フッター   
==========================================*/

footer {
	margin-top: 103px;
}

.footer_navigation {
	width: 100%;
	height: 50px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	background-color: #821908;
}

.footer_navigation li {
	margin: 40px 75px;
}


.footer_navigation li a {
	font-size: 16px;
	color: #fff;
}

.copy {
	background-color: #821908;
}

.copy p {
	color: #fff;
}


/* =========================================
   ★Aboutページ★
==========================================*/
/*  ナビゲーション
------------------------------------------*/
/*  メインビジュアル
------------------------------------------*/




/*  ぱんくずリスト 
------------------------------------------*/
.pankuzu-list p {
	margin-left: 200px;
	font-size: 16px;
	margin-top: 10px;
	margin-bottom: 150px;
}

/* =========================================
   セクション 
==========================================*/

.section_inner_emily-image {
	margin-right: 150px; /* ＊後で幅調整＊ */
}

.section_inner_emily-explaination h2 {
	font-size: 35px;
	line-height: 42px;
	margin-bottom: 10px;
	/*background-color: hotpink;*/
}

.section_inner_about {
	display: flex;
	height: 300px;
	margin: 60px 0 180px 0;
	justify-content: center; /* 横方向の中央揃え */
	align-items: center;     /* 縦方向の中央揃え */
	/*background-color: orange;*/
}

.section_inner_about_2-3 {
	display: flex;
	height: 300px;
	margin: 60px 0 220px 0;
	justify-content: center; /* 横方向の中央揃え */
	align-items: center;     /* 縦方向の中央揃え */
	/*background-color: orange;*/
}