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

/* fish/index.html 正月と魚　～ハレの日の家庭の食文化～ */
#shogatsu_sakana            { margin: 0 auto; width: 980px; }
#shogatsu_sakana article    { margin: 60px auto; }
#shogatsu_sakana article h2 { margin: 0 auto; text-align: center; font-weight: bold; font-size: 44px; line-height: 1.5; font-family: 'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック', sans-serif; color: #921717; }
#shogatsu_sakana article h3 { margin: .5em auto; text-align: center; font-weight: bold; font-size: 24px; line-height: 1.5; font-family: 'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック', sans-serif; color: #4c4c4c; }
#shogatsu_sakana article h4 { margin: .5em auto; padding: .25em .5em; font-weight: bold; font-size: 18px; line-height: 1.5; font-family: 'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック', sans-serif; color: #921717; border: solid 2px #921717; border-radius: .5em; }
#shogatsu_sakana article h4 span.small        { font-weight: normal; font-size: 16px; display: inline-block; }
#shogatsu_sakana article h4 span.small:before { content: '　'; }
@media only screen and (max-width: 768px){
#shogatsu_sakana            { width: 100%; }
#shogatsu_sakana article    { margin: 6vw auto!important; padding: 0 3vw; }
#shogatsu_sakana article h2 { font-size: 6vw!important; }
#shogatsu_sakana article h3 { margin: .5em auto; font-size: 4.5vw!important; }
#shogatsu_sakana article h3 .sp_block { display: inline-block; }
#shogatsu_sakana article h4           { padding: .25em .5em; font-size: 4vw!important; border: solid 2px #921717; border-radius: .5em; }
#shogatsu_sakana article h4 .small    { font-size: 3.5vw; display: inline-block; }
}

/* ローカルリンクボタン*/
.fish_navi ul             { margin-right: -4px!important; }
.fish_navi ul li          { margin-right: 4px; width: 160px; float: left; }
.fish_navi ul li a        { padding-left: 34px; width: 160px; height: 60px; font-size: 14px; font-weight: 900; font-family: "游明朝",YuMincho,"ヒラギノ明朝 ProN W6","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝","MS PMincho","Sawarabi Mincho",serif;  border: 1px solid #ccc; border-radius: .5em; display: table-cell; vertical-align: middle; position: relative; }
.fish_navi ul li.active   { background-image: none!important; }
.fish_navi ul li.active a { background: #fdefec; }
.fish_navi ul li a:hover  { background: #fdefec; }
.fish_navi ul li:nth-child(1) a:before { content: '1.'; position: absolute; left: 5px; top: 50%; color: #871717; font-size: 28px; transform: translateY(-50%); }
.fish_navi ul li:nth-child(2) a:before { content: '2.'; position: absolute; left: 5px; top: 50%; color: #871717; font-size: 28px; transform: translateY(-50%); }
.fish_navi ul li:nth-child(3) a:before { content: '3.'; position: absolute; left: 5px; top: 50%; color: #871717; font-size: 28px; transform: translateY(-50%); }
.fish_navi ul li:nth-child(4) a:before { content: '4.'; position: absolute; left: 5px; top: 50%; color: #871717; font-size: 28px; transform: translateY(-50%); }
.fish_navi ul li:nth-child(5) a:before { content: '5.'; position: absolute; left: 5px; top: 50%; color: #871717; font-size: 28px; transform: translateY(-50%); }
.fish_navi ul li:nth-child(6) a:before { content: '6.'; position: absolute; left: 5px; top: 50%; color: #871717; font-size: 28px; transform: translateY(-50%); }
.fish_navi p         { margin: 0!important; text-align: right; }
.fish_navi p a       { color: #000; font-weight: 500; text-decoration: none; }
.fish_navi p a:after { content: ' >'; color: #921717; font-weight: 900; font-size: 120%; }
.fish_navi p a:hover { text-decoration: none; }
@media only screen and (max-width: 768px){
.fish_navi ul             { margin-right: -.5em!important; }
.fish_navi ul li          { margin-bottom: .5em; margin-right: .5em; width: calc(33.33% - .5em); float: left; display: table; }
.fish_navi ul li a        { padding-left: 6.5vw; width: 100%; height: 12vw; font-size: 2.5vw; white-space: pre; }
.fish_navi ul li a:before { font-size: 5vw!important; }
.fish_navi p a            { font-size: 3vw!important; }
}

/*
.fish_navi ul             { margin: 0; display: flex; justify-content: space-between; align-items: stretch; }
.fish_navi ul li          { margin-bottom: 1em; width: calc(100% / 6); height: 60px; font-size: 14px; font-weight: 900; font-family: "游明朝",YuMincho,"ヒラギノ明朝 ProN W6","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝","MS PMincho","Sawarabi Mincho",serif; display: block; }
.fish_navi ul li a        { padding-left: 34px; width: 160px; height: 60px; color: #000; border: 1px solid #ccc; border-radius: .5em; display: table-cell; vertical-align: middle; position: relative; }
.fish_navi ul li.active   { background-image: none!important; }
.fish_navi ul li.active a { background: #fdefec; }
.fish_navi ul li a:hover  { background: #fdefec; }
.fish_navi ul li:nth-child(1) a:before { content: '1.'; position: absolute; left: 5px; top: 50%; color: #871717; font-size: 28px; transform: translateY(-50%); }
.fish_navi ul li:nth-child(2) a:before { content: '2.'; position: absolute; left: 5px; top: 50%; color: #871717; font-size: 28px; transform: translateY(-50%); }
.fish_navi ul li:nth-child(3) a:before { content: '3.'; position: absolute; left: 5px; top: 50%; color: #871717; font-size: 28px; transform: translateY(-50%); }
.fish_navi ul li:nth-child(4) a:before { content: '4.'; position: absolute; left: 5px; top: 50%; color: #871717; font-size: 28px; transform: translateY(-50%); }
.fish_navi ul li:nth-child(5) a:before { content: '5.'; position: absolute; left: 5px; top: 50%; color: #871717; font-size: 28px; transform: translateY(-50%); }
.fish_navi ul li:nth-child(6) a:before { content: '6.'; position: absolute; left: 5px; top: 50%; color: #871717; font-size: 28px; transform: translateY(-50%); }
.fish_navi p         { margin: 0!important; text-align: right; }
.fish_navi p a       { color: #000; font-weight: 500; text-decoration: none; }
.fish_navi p a:after { content: ' >'; color: #921717; font-weight: 900; font-size: 120%; }
.fish_navi p a:hover { text-decoration: none; }
@media only screen and (max-width: 768px){
.fish_navi ul             { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-around; }
.fish_navi ul li          { margin-bottom: .75em; width: calc(33% - .5em); }
.fish_navi ul li a        { padding: 0 3px 0 6.5vw; width: 100%; height: 12vw; font-size: 2.5vw; white-space: pre; }
.fish_navi ul li a:before { font-size: 5vw!important; }
.fish_navi p a            { font-size: 3vw!important; }
}
 */

article p.fish_01_01     { margin: 1em 0; width: 100%; }
article p.fish_01_01 img { margin-bottom: .5em; width: 100%; border: solid 1px #ccc; }

article .fish_01_02     { margin: 2em 0; display: flex; justify-content: space-between; }
article .fish_01_02 p   { margin: 0; width: calc(65% - 20px); }
article .fish_01_02 img { width: 35%; border: solid 1px #ccc; }
@media only screen and (max-width: 768px){
article .fish_01_02     { margin: 1em 0; display: block; }
article .fish_01_02 p   { margin: 1em 0; width: 100%; }
article .fish_01_02 img { width: 100%; }
}

article .fish_01_03                  { margin: 1em 0; display: flex; justify-content: space-between; }
article .fish_01_03 .copy            { width: calc(50% - 10px); }
article .fish_01_03 .copy p          { margin-top: 0; }
article .fish_01_03 .copy img        { width: 50%; border: solid 1px #ccc; }
article .fish_01_03 .copy p.cap      { margin-top: .5em; }
article .fish_01_03 .riTable         { width: calc(50% - 10px); font-size: 1rem; }
article .fish_01_03 .riTable caption { margin-bottom: .5em; text-align: left; font-weight: bold; }
article .fish_01_03 .riTable th      { padding: 2px 8px; border: solid 1px #999; text-align: center; font-weight: normal; background: #fdf7e0; }
article .fish_01_03 .riTable td      { padding: 2px 8px; border: solid 1px #999; text-align: center; }
article .fish_01_03 .cap             { margin-top: .5em; }
@media only screen and (max-width: 768px){
article .fish_01_03           { margin: 1em 0; display: block; }
article .fish_01_03 .copy     { width: 100%; }
article .fish_01_03 .copy img { width: 66%; }
article .fish_01_03 .riTable  { width: 100%; font-size: 3.3vw; }
}

article .fish_01_04       { margin: 0; }
article .fish_01_04 .half { float: left; width: 50%; padding-right: 10px; }
article .fish_01_04 img   { float: right; width: calc(50% - 10px); margin: 1em 0 0 10px; border: solid 1px #ccc; }
article .fish_01_04 .full { clear: both; width: 100%; }
@media only screen and (max-width: 768px){
article .fish_01_04 .half { float: none; width: 100%; padding-right: 0; }
article .fish_01_04 img   { float: none; width: 100%; margin: 0; }
}

article .fish_02_01       { margin: 1em 0; }
article .fish_02_01 p img { float: right; width: 25%; border: solid 1px #ccc; margin: 0 0 0 20px; }
@media only screen and (max-width: 768px){
article .fish_02_01 p img { float: right; width: calc(50% - 1em); margin: 0 0 .5em 1em; }
}

article .fish_02_02              { margin: 1em 0; display: flex; justify-content: space-between; }
article .fish_02_02 .images      { width: calc(50% - 10px); }
article .fish_02_02 .images img  { width: 100%; }
article .fish_02_02 .images .cap { margin-top: .5em; }
article .fish_02_02 .copy        { margin: 0; width: calc(50% - 10px); }
@media only screen and (max-width: 768px){
article .fish_02_02              { margin: 1em 0; display: block; }
article .fish_02_02 .images      { width: 100%; }
article .fish_02_02 .copy        { margin: 1em 0; width: 100%; }
}

article .fish_02_03              { margin: 1em 0; }
article .fish_02_03 .images      { float: left; width: 20%; margin: 0 20px 0 0; }
article .fish_02_03 .images img  { width: 100%; border: solid 1px #ccc; }
article .fish_02_03 .images .cap { margin-top: .5em; }
@media only screen and (max-width: 768px){
article .fish_02_03 .images      { float: left; width: 33%; margin: 0 1em 0 0; }
article .fish_02_03 .images .cap { margin-bottom: .5em; }
}

article .fish_02_04     { margin: 1em 0; }
article .fish_02_04 img { float: right; width: 35%; border: solid 1px #ccc; margin: 0 0 0 20px; }
@media only screen and (max-width: 768px){
article .fish_02_04 img { float: right; width: calc(50% - 1em); margin: 0 0 .5em 1em; }
}

article .fish_03_01       { margin: 1em 0; }
article .fish_03_01 p img { float: right; width: 480px; margin-left: 20px; }
@media only screen and (max-width: 768px){
article .fish_03_01 p img { float: none; width: 100%; margin: 0 0 1em 0; }
}

article .fish_03_02                      { margin: 1em 0; display: flex; justify-content: space-between; }
article .fish_03_02 .half_l              { margin: 0; width: 480px; }
article .fish_03_02 .half_l img          { width: 100%; border: solid 1px #ccc; }
article .fish_03_02 .half_l .cap         { margin: .5em 0 0 0; }
article .fish_03_02 .half_r              { margin: 0; width: 480px; }
article .fish_03_02 .half_r .images      { display: flex; justify-content: space-between; }
article .fish_03_02 .half_r .images .cap { margin: 0; }
article .fish_03_02 .half_r .images img  { margin-bottom: .5em; width: 233px; border: solid 1px #ccc; }
@media only screen and (max-width: 768px){
article .fish_03_02                      { display: block; }
article .fish_03_02 .half_l              { width: 100%; }
article .fish_03_02 .half_r              { width: 100%; }
article .fish_03_02 .half_r .images      { width: 100%; }
article .fish_03_02 .half_r .images .cap { width: calc(50% - .5em); }
article .fish_03_02 .half_r .images img  { margin-bottom: .5em; width: 100%; }
}

article .fish_03_03                           { margin: 1em 0; }
article .fish_03_03 .copy_fst                 { margin: 1em 0; width: 680px; float: left; }
article .fish_03_03 .fish_03_table01          { margin: 1em 0; width: 280px; float: right; }
article .fish_03_03 .fish_03_table01 table th { font-weight: normal; font-size: 1rem; border: solid 1px #4c4c4c; text-align: center; background: #fdf7e0; } 
article .fish_03_03 .fish_03_table01 table td { font-weight: normal; font-size: 1rem; border: solid 1px #4c4c4c; }
article .fish_03_03 .fish_03_table02          { margin: 1em 0; width: 680px; float: left; }
article .fish_03_03 .fish_03_table02 table th { font-weight: normal; font-size: 1rem; border: solid 1px #4c4c4c; text-align: center; background: #fdf7e0; } 
article .fish_03_03 .fish_03_table02 table td { font-weight: normal; font-size: 1rem; border: solid 1px #4c4c4c; }
article .fish_03_03 .cap                      { margin: .5em 0 0 0; }
article .fish_03_03 .full                     { width: 980px; clear: both; }
article .fish_03_03 .full .cap                { margin: 0 0 0 20px; width: 234px; float: right; }
article .fish_03_03 .full .cap img            { margin-bottom: .5em; width: 234px; border: solid 1px #ccc; }
@media only screen and (max-width: 768px){
article .fish_03_03 .copy_fst                 { width: 100%; float: none; }
article .fish_03_03 .fish_03_table01          { margin: 1em auto 2em auto; width: 100%; float: none; }
article .fish_03_03 .fish_03_table01 table    { margin: 0 auto; width: 67%; } 
article .fish_03_03 .fish_03_table01 table th,
article .fish_03_03 .fish_03_table01 table td { font-size: 3vw; }
article .fish_03_03 .fish_03_table02          { margin: 1em 0 2em auto; width: 100%; float: none; }
article .fish_03_03 .fish_03_table02 table th,
article .fish_03_03 .fish_03_table02 table td { font-size: 2.6vw; }
article .fish_03_03 .full                     { width: 100%; clear: both; }
article .fish_03_03 .full .cap                { margin: 0 0 0 1em; width: calc( 50% - 1em); }
article .fish_03_03 .full .cap img            { margin-bottom: .5em; width: 100%; }
}

article .fish_04_01                         { margin: 1em 0; }
article .fish_04_01 p.copy01 img            { margin: 0 20px 0 0; float: left; width: 174px; border: solid 1px #ccc; }
article .fish_04_01 p.copy02                { margin-top: 0; float: left; width: 526px; }
article .fish_04_01 .fish_04_table          { float: right; width: 260px; padding-left: 20px; }
article .fish_04_01 .fish_04_table table th { font-weight: normal; font-size: 1rem; border: solid 1px #4c4c4c; text-align: center; background: #fdf7e0; } 
article .fish_04_01 .fish_04_table table td { font-weight: normal; font-size: 1rem; border: solid 1px #4c4c4c; } 
@media only screen and (max-width: 768px){
article .fish_04_01 p.copy01 img            { margin: 0 1em 0 0; float: left; width: 33%; }
article .fish_04_01 p.copy02                { float: none; width: 100%; }
article .fish_04_01 .fish_04_table          { margin: 1em 0 2em 0; float: none; width: 100%; padding-left: 0; }
article .fish_04_01 .fish_04_table table    { margin: 0 auto; width: 50%; }
article .fish_04_01 .fish_04_table table th,
article .fish_04_01 .fish_04_table table td { font-size: 3vw; } 
}

article .fish_04_02 .cap     { margin: 0 0 0 20px; width: 234px; float: right; }
article .fish_04_02 .cap img { margin-bottom: .5em; width: 234px; border: solid 1px #ccc; }
@media only screen and (max-width: 768px){
article .fish_04_02 .cap     { margin: 0 0 0 1em; width: calc(45% - 1em); }
article .fish_04_02 .cap img { margin-bottom: .5em; width: 100%; }
}

article .fish_04_03                  { display: flex; justify-content: space-between; }
article .fish_04_03 p.copy_left      { width: calc(50% - 10px); margin: 1em 0 0 0; }
article .fish_04_03 .graph_right     { width: calc(50% - 10px); margin-top: 1em; }
article .fish_04_03 .graph_right img { width: 100%; }
article .fish_04_03 .graph_right a   { text-decoration: none; }
article .fish_04_03 div.ex_btn       { width: 100%; display: block; }
article .fish_04_03 div.ex_btn span  { padding: .75em 1em; font-size: 1rem; text-align: center; color: #fff; background: #921717; border-radius: .5em; }
@media only screen and (max-width: 768px){
article .fish_04_03                  { display: block; }
article .fish_04_03 p.copy_left      { width: 100%; }
article .fish_04_03 .graph_right     { display: none; }
article .fish_04_03 .graph_sp        { margin: 1em 0; }
article .fish_04_03 .graph_sp img    { width: 100%; }
}

article p.cap           { font-size: 14px; }
article  table .buri    { background: #6c0!important; }
article  table .sake    { background: #fc0!important; }
article  table .tai     { background: #fcc!important; }
article .ex_btn         { margin: 1em 0; text-align: center; }
article .ex_btn a       { padding: .75em 1em; font-size: 1rem; text-decoration: none; color: #fff; background: #921717; border-radius: .5em; }
article .ex_btn a:hover { opacity: 0.7; cursor: pointer; }
@media only screen and (max-width: 768px){
article p.cap           { font-size: 3vw; }
article .ex_btn a       { font-size: 3.3vw; }
}
article .fish05_01 .copy01 img     { float: right; width: 313px; margin: 0 0 0 20px; border: solid 1px #ccc; }
article .fish05_01 .cap            { margin: 0 20px 0 0; float: left; width: 175px; }
article .fish05_01 .cap img        { margin-bottom: .5em; width: 100%; border: solid 1px #ccc; }
article table.fish05_table         { margin: 2em 0 0 0; }
article table.fish05_table caption { margin-bottom: .5em; text-align: left; font-weight: bold; font-size: 1rem; }
article table.fish05_table th      { font-weight: normal; border: solid 1px #4c4c4c; text-align: center; } 
article table.fish05_table td      { font-weight: normal; border: solid 1px #4c4c4c; text-align: center; white-space: nowrap; }
@media only screen and (max-width: 768px){
article .fish05_01 .copy01 img     { width: calc(50% - 0em); margin: 0 0 0 1em; }
article .fish05_01 .cap            { margin: 0 1em 0 0; width: calc(34% - 1em); }
article table.fish05_table caption { font-size: 3.3vw; }
article table.fish05_table th,
article table.fish05_table td      { font-size: 2.3vw; white-space: normal; }
}

article .fish06_01 p img { float: right; width: 329px; margin: 0 0 0 20px; border: solid 1px #ccc; }
@media only screen and (max-width: 768px){
article .fish06_01 p img { width: calc(50% - 0em); margin: 0 0 0 1em; }
}
/* 山本さんプロフィール */
.summary .caption { font-size: 14px; }
.profile          { padding: 1em; background: #fffae7; border: solid 1px #ccc; }
.profile img      { float: left; margin: 0 6px -4px 0; }
.profile span     { font-size: 120%; }
@media only screen and (max-width: 768px){
.summary .caption { font-size: 3.3vw; }
.profile          { margin: 2em 0; font-size: 95%; }
.profile img      { margin-right: .5em; max-width: 33%; }
}

/* 注釈　コメント */
article sup          { font-size: 75%; color: #921717; }
article sup:before   { content: '※'; }
article .cite        { margin: 0 100px; font-size: 14px; padding: 1em 2em 1em 5em; border: solid 1px #ccc; }
article .cite p      { margin: 0!important; margin-left: 0; text-indent: -3em }
article .cite p span { color: #921717; display: inline-block; width: 3em; text-indent: 0em; }

@media only screen and (max-width: 768px){
article .cite        { margin: 0 0; padding: 1em 1em 1em 5em; font-size: 3vw; }
}

/* graph.html */
article .graph_table01               { display: flex; justify-content: space-between; align-items: flex-start; }
article .graph_table01 table         { margin: 0; width: 320px; }
article .graph_table01 table caption { margin-bottom: .5em; text-align: left; font-weight: bold; font-size: 1rem; }
article .graph_table01 table th      { font-weight: normal; font-size: 1rem; border: solid 1px #4c4c4c; text-align: center; background: #fdf7e0; } 
article .graph_table01 table td      { font-weight: normal; font-size: 1rem; border: solid 1px #4c4c4c; }
article .graph_table01 table tr td:last-child { text-align: right; }
article .graph_table01 p.cap         { width: 100%; text-align: right; }
@media only screen and (max-width: 768px){
article .graph_table01 table              { margin: 0; width: 33%; }
article .graph_table01 table caption      { font-size: 3vw; }
article .graph_table01 table caption span { font-size: 2vw; }
article .graph_table01 table th,
article .graph_table01 table td      { font-size: 3vw; }
}

article .graph_pic01     { width: 100%; padding: 0 100px; }
article .graph_pic01 img { width: 100%; }
@media only screen and (max-width: 768px){
article .graph_pic01     { width: 100%; padding: 0; }
}
article .graph_table02               { display: flex; justify-content: space-between; align-items: flex-start; }
article .graph_table02 table         { margin: 0; width: 320px; }
article .graph_table02 table caption { margin-bottom: .5em; text-align: left; font-weight: bold; font-size: 1rem; }
article .graph_table02 table th      { font-weight: normal; font-size: 1rem; border: solid 1px #4c4c4c; text-align: center; background: #fdf7e0; } 
article .graph_table02 table td      { font-weight: normal; font-size: 1rem; border: solid 1px #4c4c4c; }
article .graph_table02 p.cap         { width: 100%; text-align: right; }
@media only screen and (max-width: 768px){
article .graph_table02 table              { margin: 0; width: 33%; }
article .graph_table02 table caption      { font-size: 3vw; }
article .graph_table02 table th,
article .graph_table02 table td      { font-size: 2.5vw; }
}
article .graph_pic02     { width: 100%; padding: 0; }
article .graph_pic02 img { width: 100%; }

/*カラー*/
.red    { color: #ff0000!important; }/*赤*/
.blue   { color: #0000dd!important; }/*青*/
.green  { color: #234f28!important; }/*緑*/
.yellow { color: #ffff00!important; }/*黄*/
.navy   { color: #1F26A9!important; }/*紺*/
.orange { color: #ff6600!important; }/*橙*/
.pink   { color: #cc6699!important; }/*ピンク*/
.purple { color: #660099!important; }/*紫*/
.olive  { color: #808000!important; }/*黄土色*/
.lime   { color: #00ff00!important; }/*黄緑*/
.aqua   { color: #167FA6!important; }/*水色*/
.black  { color: #000!important; }/*黒*/
.gray   { color: #ccc!important; }/*灰*/
.white  { color: #fff!important; }/*白*/
.wine   { color: #a63226!important; }/*ワイン*/