/* ==========================================================
foodc.css
foodc_maker v1.1 用

【主な変更箇所】

①ページ外背景色
body

②ページ本体背景色
.foodc-page

③ページ枠線色
.foodc-page

④H1タイトル色
h1

⑤ロゴ画像
HTML側で指定

========================================================== */

/* ==========================================================
全体
========================================================== */

body{
margin:0;
padding:20px;

```
/* ページ外背景色 */
background:#e8f0f8;

color:#222;
line-height:1.8;
font-family:
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    sans-serif;
```

}

/* ==========================================================
ページ本体
========================================================== */

.foodc-page{
    width:760px;
    max-width:760px;
    margin:0 auto;
    padding:10px 25px 25px 25px;
    background:#ffffff;
    border:3px solid #4a7cb8;
    border-radius:10px;
    box-sizing:border-box;
    overflow:hidden;
}

/* ==========================================================
ロゴ
========================================================== */

.foodc-logo{
    width:760px;
    margin:0 auto;
    text-align:center;
}

.foodc-logo img{
    width:90%;
    height:auto;
}

/* ==========================================================
H1
========================================================== */

h1{

margin-top:15px;
margin-bottom:20px;
text-align:center;
font-size:2rem;

/* タイトル色 */
color:#204f88;

border-bottom:2px solid #aac3e6;
padding-bottom:5px;

}
/* ==========================================================
H2
========================================================== */

h2{

margin-top:5px;
text-align:left;
font-size:1.2rem;

/* タイトル色 */
color:#204f88;

}


/* ==========================================================
小見出し
========================================================== */

h3{

margin-top:15px;
margin-bottom:10px;
font-size:1.5rem;

/*  padding-left:10px;
border-left:6px solid #4a7cb8; */

color:#204f88; 

}

h4{
/* text-decoration: underline double;  */
padding-left:10px;
border-left:6px solid #4a7cb8; 
padding-bottom: 2px;
color:blue;
}

/* ==========================================================
目次
========================================================== */

.foodc-toc{
    border:none;
    background:none;
    padding:0;

    padding-left:10px;
    border-left:6px solid #4a7cb8; 
}

.foodc-toc ul{
    list-style:none;
    padding:0;
}

.foodc-toc li{
    margin:0;
}

.foodc-toc a{
color:#0066cc;
text-decoration:none;
}

.foodc-toc a:hover{
text-decoration:underline;
}

/* ==========================================================
段落
========================================================== */

.foodc-block{

margin:15px 0;

padding:15px;

background:#fafafa;

/* border-left:5px solid #4a7cb8; */


}

/* ==========================================================
画像
========================================================== */

.foodc-image{
text-align:center;
margin:25px 0;
}

.foodc-image img{
max-width:85%;
height:auto;
}

.foodc-image figcaption{
margin-top:8px;
font-size:0.9rem;
color:#666;
}

/* ==========================================================
動画
========================================================== */

.foodc-video{
text-align:center;
margin:25px 0;
}

.foodc-video video{
max-width:85%;
}

/* ==========================================================
表
========================================================== */

.foodc-table{
    width:100%;
    border-collapse:collapse;
    margin:25px 0;
}

.foodc-table th,
.foodc-table td{
    border:1px solid #999;
    padding:8px 10px;
    text-align:left;
}

.foodc-table th{
    background:#dbe8f7;
    font-weight:bold;
}

/* ==========================================================
文字色
========================================================== */

.txt-red{
color:#d60000;
}

.txt-blue{
color:#0055cc;
}

.txt-yellow{
color:#fff7c8;
}

.txt-green{
color:#008000;
}

.txt-purple{
color:#8000aa;
}

/* ==========================================================
背景色
========================================================== */

.bg-red{
background:#ffd8d8;
}

.bg-blue{
background:#dcecff;
}

.bg-yellow{
background:#fff7c8;
}

.bg-green{
background:#dcffd9;
}

.bg-purple{
background:#f0ddff;
}

/* ==========================================================
囲み枠
========================================================== */

.box-red{
border:2px solid #d60000;
padding:12px;
margin:15px 0;
}

.box-blue{
border:2px solid #0055cc;
padding:12px;
margin:15px 0;
}

.box-green{
border:2px solid #008000;
padding:12px;
margin:15px 0;
}

.box-yellow{
border:2px solid #c9a300;
padding:12px;
margin:15px 0;
}

.box-purple{
border:2px solid #8000aa;
padding:12px;
margin:15px 0;
}

/* ==========================================================
ページ内ナビ
========================================================== */

.foodc-page-nav{

```
margin-top:40px;

padding-top:20px;

border-top:1px solid #ccc;

position:relative;

text-align:center;
```

}

.foodc-page-nav a{
margin:0 12px;
color:#0066cc;
text-decoration:none;
}

.foodc-page-nav a:hover{
text-decoration:underline;
}

.foodc-page-top{

```
position:absolute;

right:-15px;

top:20px;
```

}

/* ==========================================================
フッターナビ
========================================================== */

.foodc-footer{

```
max-width:760px;

margin:15px auto;

text-align:center;

font-size:0.9rem;
```

}

.foodc-footer a{

```
margin:0 10px;

color:#0066cc;

text-decoration:none;
```

}

.foodc-footer a:hover{
text-decoration:underline;
}

/* 図表用追加　*/
/* =====================================================
図表スタイル
foodc.css 追加用
===================================================== */

/* -------------------------------------------------

1. 流れ図
   ------------------------------------------------- */

.foodc-flow{
max-width:600px;
margin:15px auto;
padding:10px;
background:#f7fbff;
border:1px solid #cfdfee;
border-radius:12px;
text-align:center;
}

.foodc-flow .box{
background:#ffffff;
border:1px solid #bcd4e6;
border-radius:8px;
padding:5px;
margin:0 auto;
max-width:350px;
font-weight:bold;
}

.foodc-flow .arrow{
font-size:1.4em;
color:#3b6e99;
margin:3px 0;
}

/* -------------------------------------------------
2. 比較表（2列）
------------------------------------------------- */

.foodc-compare{
display:flex;
gap:20px;
margin:30px auto;
max-width:800px;
}

.foodc-compare .card{
flex:1;
background:#fffdf5;
border:1px solid #e3d7ad;
border-radius:12px;
padding:15px;
}

.foodc-compare .title{
font-weight:bold;
text-align:center;
margin-bottom:10px;
color:#8b5d00;
font-size:1.1em;
}

/* -------------------------------------------------
3. 三項目比較
------------------------------------------------- */

.foodc-card3{
display:flex;
gap:15px;
margin:30px auto;
max-width:900px;
}

.foodc-card3 .card{
flex:1;
background:#f8fff8;
border:1px solid #c7dfc7;
border-radius:12px;
padding:15px;
}

.foodc-card3 .title{
text-align:center;
font-weight:bold;
margin-bottom:10px;
color:#2f6d2f;
}

/* -------------------------------------------------
4. ピラミッド
------------------------------------------------- */

.foodc-pyramid{
margin:30px auto;
max-width:700px;
text-align:center;
}

.foodc-pyramid .level1,
.foodc-pyramid .level2,
.foodc-pyramid .level3,
.foodc-pyramid .level4{
background:#ffffff;
border:1px solid #cfd7e0;
border-radius:8px;
padding:10px;
margin:8px auto;
font-weight:bold;
}

.foodc-pyramid .level1{
width:25%;
background:#ffe8c2;
}

.foodc-pyramid .level2{
width:45%;
background:#fff2d9;
}

.foodc-pyramid .level3{
width:65%;
background:#fff8ec;
}

.foodc-pyramid .level4{
width:85%;
background:#ffffff;
}

/* -------------------------------------------------
スマホ対応
------------------------------------------------- */

@media(max-width:700px){

```
.foodc-compare{
    flex-direction:column;
}

.foodc-card3{
    flex-direction:column;
}
```

}