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

/* リセット */
body {
	font:14px/1.231 "ヒラギノ角ゴ Pro W3";
	background-color: #950101;
}

/* スムーズスクロールを有効にする */
html {
  scroll-behavior: smooth;
}

section, nav {
     margin-bottom: 1em;
}
p {
     margin-bottom: 1em;
}
/* ここまで */

/* clearfix */
.clearfix:after {
   content: " ";
   display: block;
   clear: both;
   height: 0;
   visibility: hidden;
}

/* フロートクリア */
.float-clear {
	font-size: 0px;
	clear: both;
}

/* コンテナ */
#container {
	width: 320px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(images_smart/main.jpg);
	background-repeat: no-repeat;
}

/* コンテナ・コンテンツページ用 */
#container_conts {
	width: 320px;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFF;
}

/* ヘッダー */
header {
    margin-bottom: 0;
}

/* ★★★ 修正点1: ヘッダー内の画像を強制的にコンテナ幅に合わせる ★★★ */
header img {
    width: 100%; 
    max-width: 100%; /* これが重要 */
    height: auto;
    display: block;
}

/* メインビジュアル */
#mainphoto {
	height: 380px;
}

/* タイトル */
#mainphoto #title {
	padding-top: 100px;
}
#mainphoto #title p {
	text-align: center;
}
/* ここまで */

/* トピックパス */
#topicpath {
	width: 280px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10px;
}
#topicpath h6 {
	font-size: 12px;
	/* 文字色を濃い色 (#333) に設定 (前回の修正を維持) */
	color: #333; 
}
#topicpath h6 a {
	color: #960103;
}

/* プロダクツ用 */
#products {
	width: 300px;
	margin-right: auto;
	margin-left: auto;
	background-color: #ffeeee;
	padding-bottom: 20px;
}
#products h2 {
	font-size: 16px;
	color: #666;
	padding-left: 5px;
	margin-left: 15px;
	border-left-width: 3px;
	border-left-style: solid;
	border-left-color: #960103;
	margin-top: 10px;
	margin-bottom: 10px;
}
#products p {
	font-size: 12px;
	color: #333;
	padding-right: 10px;
	padding-left: 10px;
}
#products .box_cake {
	margin-bottom: 20px;
}
/* プロダクツ用 - 画像とテキスト縦並びのスタイル */
#products .box_cake img {
    /* 商品画像は最大幅に設定 */
    width: 300px;
    height: auto;
    display: block;
    margin: 0 auto 10px;
}

#products h5 {
    text-align: center;
    margin-right: 10px;
    margin-left: 10px;
    font-size: 14px;
    color: #900;
    padding-right: 10px;
    padding-bottom: 3px;
    margin-bottom: 5px;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
}
#products h6 {
    text-align: left;
    margin-right: 10px;
    margin-left: 10px;
    font-size: 12px;
    color: #999;
    padding-right: 10px;
    padding-bottom: 3px;
    margin-bottom: 5px;
    line-height: 13px;
}
/* vegan.gif のサイズ指定 */
#products p img[src="images_smart/vegan.gif"],
#products h6 img[src="images_smart/vegan.gif"] {
    width: 18px;
    height: 25px;
    margin-right: 3px;
    float: none;
    display: inline;
}
/* vegan.gif 専用のアイコンクラス */
.vegan-icon {
    width: 18px;
    height: 25px;
    float: none;
    margin-right: 3px;
    vertical-align: middle;
}


/* コンセプト用 */
#concept {
	width: 300px;
	margin-right: auto;
	margin-left: auto;
	background-color: #ffeeee;
	padding-bottom: 20px;
}
#concept h2 {
	font-size: 16px;
	color: #666;
	padding-left: 5px;
	margin-left: 15px;
	border-left-width: 3px;
	border-left-style: solid;
	border-left-color: #960103;
	margin-top: 10px;
	margin-bottom: 10px;
}
#concept p {
	font-size: 12px;
	color: #333;
	padding-right: 10px;
	padding-left: 10px;
}
#concept .box_photo {
	margin-bottom: 20px;
}
/* コンセプト用 - 画像とテキスト縦並びのスタイル */
#concept .box_photo img {
    /* コンセプト画像は最大幅に設定 */
    width: 300px;
    height: auto;
    display: block;
    margin: 0 auto 10px;
}

/* プライバシーポリシー用 */
#privacy {
	width: 300px;
	margin-right: auto;
	margin-left: auto;
	background-color: #ffeeee;
	padding-bottom: 20px;
    /* ★★ 修正点: floatのクリアを確実にするために追加 ★★ */
    overflow: hidden; 
}
#privacy h2 {
	font-size: 16px;
	color: #666;
	padding-left: 5px;
	margin-left: 15px;
	border-left-width: 3px;
	border-left-style: solid;
	border-left-color: #960103;
	margin-top: 10px;
	margin-bottom: 10px;
}
#privacy p {
	font-size: 12px;
	color: #333;
	padding-right: 10px;
	padding-left: 10px;
}
#privacy .box {
	margin-bottom: 20px;
}

#privacy h5 {
    text-align: center;
    margin-right: 10px;
    margin-left: 10px;
    font-size: 14px;
    color: #900;
    padding-right: 10px;
    padding-bottom: 3px;
    margin-bottom: 5px;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
}
#privacy h6 {
    text-align: left;
    margin-right: 10px;
    margin-left: 10px;
    font-size: 12px;
    color: #999;
    padding-right: 10px;
    padding-bottom: 3px;
    margin-bottom: 5px;
    line-height: 13px;
}
#concept h5 {
    text-align: center;
    margin-right: 10px;
    margin-left: 10px;
    font-size: 14px;
    color: #900;
    padding-right: 10px;
    padding-bottom: 3px;
    margin-bottom: 5px;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
}

/* --- TOPへ戻るボタン関連のスタイル --- */
/* セクションTOPへ戻るボタン（画像）の親要素のスタイル */
.to-section-top {
    text-align: right;
    padding-right: 15px;
    margin-bottom: 5px;
}

/* 矢印アイコンのスタイル (最優先で固定値を適用) */
.top-arrow-icon {
    /* ここでサイズを固定値に設定することで、他の大きな画像の影響を受けなくなります */
    width: 30px !important; 
    height: 30px !important;
    border-radius: 5px;
    vertical-align: middle;
    margin: 0;
    padding: 0;
}
/* -------------------------------------- */

/* フッター */
footer {
	background-color: #960103;
	padding: 20px;
	clear: both;
}
/* 【修正1】ナビゲーションコンテナ(#navi_btm)のリスト全体を中央寄せ */
#navi_btm {
    text-align: center;
    margin-bottom: 10px;
}
/* ul要素のリストマークを削除し、padding/marginをリセット */
#navi_btm ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
/* 【修正2】li要素を横並びにする（floatの代わり） */
#navi_btm ul li {
    display: inline-block;
}
/* 【修正3】float: left; を削除し、マージンをliに移動 */
footer ul li a {
	color: #FFF;
	text-decoration: none;
	font-size: 11px;
	/* margin-right: 10px; はliに設定することでより安定します */
}

footer p {
	color: #FFF;
	text-align: center;
	font-size: 11px;
	margin-top: 20px;
}
footer p a {
	color: #ffeeee;
}

/* 【重要】CSSファイルの末尾に余分な閉じ括弧（ } ）がある場合は、それを削除してください。 */

/* --- お問い合わせフォーム（smart_mail.html）用スタイル追加 --- */

/* フォーム全体を囲むセクション */
#mailform {
	width: 300px; /* #container_conts の幅に合わせる */
	margin-right: auto;
	margin-left: auto;
	background-color: #ffeeee; /* PCサイトの背景色 */
	padding-bottom: 20px;
    padding-top: 10px;
}

/* フォームのラッパー (index.htmlの #body に相当) */
#body_form {
    padding: 0 10px; /* 左右に少し余白 */
}

/* フォームのテーブル */
#form {
	border-collapse: collapse;
	margin: 1em auto; /* 中央寄せ */
    width: 100%;
}
#form th, #form td {
	/* thとtdをブロック要素にして縦並びにする（スマホ向け）*/
    display: block; 
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding: 8px 5px;
}
#form th {
    background: #960103;
    color: #fff;
    white-space: normal;
}
#form td {
    background: #fff;
    margin-bottom: 10px;
}
/* 入力欄の幅を100%にする */
#form input[type="text"],
#form textarea {
    width: 95%; /* 親要素(td)に合わせる */
    box-sizing: border-box;
    padding: 5px;
}
#form input[type="text"] {
    height: 30px;
}
#form textarea {
    min-height: 100px;
}
/* ラジオボタンの文字サイズ調整 */
#form input[type="radio"] + label,
#form td {
    font-size: 13px;
}

/* 送信ボタンの中央寄せ */
p.btn {
    text-align: center;
    margin: 1.5em 0;
}
p.btn input {
    width: 110px;
    height: 30px;
    margin: 0 5px;
}

/* 個人情報取り扱いの見出しとリスト */
.privacy-note {
    font-size: 100%;
    border-left: solid 4px #960103;
    border-bottom: 1px solid gray;
    padding: 4px 6px;
    margin: 2em 0;
    width: 100%;
    box-sizing: border-box;
}
.privacy-ol {
    font-size: 12px;
    color: #333;
    padding-left: 20px;
}