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

/* 2010local/index.html 全国の郷土のおせち料理 2010年 */
#local2010            { margin: 0 auto; width: 980px; }
#local2010 article    { margin: 60px auto; }
#local2010 article h2 { margin: 1em auto; text-align: center; font-weight: bold; font-size: 36px; line-height: 1.5; font-family: 'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック', sans-serif; color: #921717; }
#local2010 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; }
#local2010 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; }
@media only screen and (max-width: 768px){
#local2010            { width: 100%; }
#local2010 article    { margin: 6vw auto!important; padding: 0 3vw; }
#local2010 article h2 { margin: 2em auto 1em auto; font-size: 6vw!important; }
#local2010 article h2 .sp_block { display: inline-block; }
#local2010 article h3 { margin: 0 auto .5em auto; font-size: 4.5vw!important; }
}

/* 郷土のおせちアンカーリンク */
article h2 a               { pointer-events: none; }
.spend_navi ul             { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; }
.spend_navi ul li          { margin-bottom: 1em; width: 230px; height: 52px; font-size: 18px; font-weight: 900; font-family: "游明朝",YuMincho,"ヒラギノ明朝 ProN W6","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝","MS PMincho","Sawarabi Mincho",serif; }
.spend_navi ul li a        { padding-left: 34px; width: 230px; height: 52px; color: #000; border: 1px solid #ccc; border-radius: .5em; display: table-cell; vertical-align: middle; position: relative; }
.spend_navi ul li.active   { background-image: none!important; }
.spend_navi ul li.active a { background: #fdefec; }
.spend_navi ul li a:hover  { background: #fdefec; }
.spend_navi ul li a:before { content: '\f0ab'; position: absolute; left: .5em; top: 50%; color: #871717; transform: translateY(-50%); font-family: 'Font Awesome 5 Free'; font-weight: 900; }
@media only screen and (max-width: 768px){
.spend_navi ul li          { margin-bottom: 1em; width: calc(50% - .5em); height: auto; font-size: 3.3vw; }
.spend_navi ul li a        { padding: .5em 1em .5em 2em; width: 100%; height: auto; display: block; }
}

/* 郷土のおせちマップ */
ul.kyodo_osechi       { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; }
ul.kyodo_osechi li    { width: 230px; }
ul.kyodo_osechi img   { margin-bottom: .5em; }
ul.kyodo_osechi p.cap { text-align: center; }
@media only screen and (max-width: 768px){
ul.kyodo_osechi li    { width: calc(25% - .3em); }
ul.kyodo_osechi p.cap span:before { content: '\A'; white-space: pre; }
}

article .map_wrap   { margin: 1em -110px; width: 1200px; border: solid 1px #ccc; overflow: hidden; position:relative; }
article .summary    { margin: 1em 0; padding-bottom: 1em; font-size: 1em; /*border-top: solid 1px #ccc;*/ }
article .summary h3 { font-size: 1em!important; text-align: left!important; }
article .summary p  { margin: 0; font-size: 85%; }
@media only screen and (max-width: 768px){
article .map_wrap        { margin: 0 -1em; width: 150vw; background: #f5f9fa; border: solid 1px #ccc; overflow: hidden; position: relative; }
article .map_wrap .move  { position: relative; left: -25vw; top: 0px; }
.drug_info                        { text-align: center; }
.db_contents article .drug_info p { margin-bottom: 0; }
.drug_info div                    { padding: 0 4em; }
#local2010 article .summary h3    { font-size: 3.3vw!important; margin: 1em 0 0 0; }
article .summary p                { font-size: 3vw; }
}

/* 郷土のおせちレシピ一覧 */
#local2010 article.kyodo_recipe h3       { margin-top: 1em; padding: .5em 0; font-size: 30px; color: #fff; background: #ccc; border-radius: .5em; }
#local2010 article.kyodo_recipe > div    { display: flex; flex-wrap: wrap; justify-content: space-between; }
#local2010 article.kyodo_recipe > div h3 { width: 100%; }
#local2010 article.kyodo_recipe > div h4 { margin: 0; padding: 0 0 .5em 0; color: #921717; border-bottom: solid 2px #921717; }
@media only screen and (max-width: 768px){
#local2010 article.kyodo_recipe h3       { margin: 1em 0; padding: .5em 0; font-size: 5vw!important; }
#local2010 article.kyodo_recipe > div h4 { font-size: 4.5vw!important; }
}

#local2010 article.kyodo_recipe #hokkaido_recipe > h3  { background-color: #b4d5ee; }
#local2010 article.kyodo_recipe #fukushima_recipe > h3 { background-color: #a3bee8; }
#local2010 article.kyodo_recipe #gumma_recipe > h3     { background-color: #c2b8f2; }
#local2010 article.kyodo_recipe #nigata_recipe > h3    { background-color: #abdead; }
#local2010 article.kyodo_recipe #gifu_recipe > h3      { background-color: #abdead; }
#local2010 article.kyodo_recipe #kyoto_recipe > h3     { background-color: #d3eba3; }
#local2010 article.kyodo_recipe #shimane_recipe > h3   { background-color: #eef08e; }
#local2010 article.kyodo_recipe #tokushima_recipe > h3 { background-color: #fad7b4; }
#local2010 article.kyodo_recipe #miyazaki_recipe > h3  { background-color: #fac67d; }
#local2010 article.kyodo_recipe #okinawa_recipe > h3   { background-color: #f893a6; }

#local2010 article.kyodo_recipe > div .recipeLeftImg     { width: calc(33.333% - 1em); }
#local2010 article.kyodo_recipe > div .recipeLeftImg img { width: 100%; }
#local2010 article.kyodo_recipe > div .recipeLeft        { width: calc(33.333% - 1em); }
#local2010 article.kyodo_recipe > div .recipeRight       { width: calc(33.333% - 1em); }
#local2010 article.kyodo_recipe > div .recipecom         { width: 100%; margin-top: 1em; }
@media only screen and (max-width: 768px){
#local2010 article.kyodo_recipe > div                { display: flex; flex-wrap: wrap; flex-direction: column; }
#local2010 article.kyodo_recipe > div .recipeLeftImg { width: 100%; margin-top: 1em; }
#local2010 article.kyodo_recipe > div .recipeLeft    { width: 100%; margin-top: 1em; }
#local2010 article.kyodo_recipe > div .recipeRight   { width: 100%; margin-top: 1em; }
#local2010 article.kyodo_recipe > div .recipecom p   { font-size: 4vw; margin-top: .5em; }
}

.recipeLeft dl  { width: 100%; display: table; font-size: 15px; }
.recipeLeft dt  { float: left; width: 55%; padding: .5em 0; border-bottom: solid 1px #ccc; display: table-cell; }
.recipeLeft dd  { float: left; width: 45%; padding: .5em 0; border-bottom: solid 1px #ccc; display: table-cell; }
.recipeRight ol { margin-top: .5em; font-size: 15px; }
.recipeRight li { padding-bottom: .5em; }
@media only screen and (max-width: 768px){
.recipeLeft dl  { font-size: 4vw; }
.recipeRight ol { font-size: 4vw; }
}

/* 47都道府県おせち */
#local2010 article.pref_recipe table             { margin: 2em 0 1em 0; width: 100%; border-bottom: solid 2px #921717; }
#local2010 article.pref_recipe table tr          { border-top: solid 2px #ccc; }
#local2010 article.pref_recipe table tr.pref     { border-top: solid 2px #921717; }
#local2010 article.pref_recipe table th          { padding: .25em 1em .5em 0em; vertical-align: top; font-size: 20px; white-space: nowrap; }
#local2010 article.pref_recipe table td          { padding: .5em 1em .5em 0; vertical-align: top; font-size: 18px; }
#local2010 article.pref_recipe table td span     { display: inline-block; }
#local2010 article.pref_recipe table tr td:nth-last-child(2) { width: 14em; } 
#local2010 article.pref_recipe table tr td:last-child        { padding-right: 0; } 
#local2010 article.pref_recipe .cap p            { margin: 0 0 .25em 0; padding-left: 1em; text-indent: -1em; font-size: 14px; }
#local2010 article.pref_recipe .cap p:last-child { margin-top: 1em; padding: 1em 0 0 5em; text-indent: -5em; border-top: solid 2px #ccc; }
#local2010 article.pref_recipe .cap p:last-child span:after{ content: '：'; }
@media only screen and (max-width: 768px){
#local2010 article.pref_recipe table               { margin: 0; width: 100%; }
#local2010 article.pref_recipe table th            { display: none; }
#local2010 article.pref_recipe table tr.sp_pref td { padding: .5em; font-size: 4vw; font-weight: bold; text-align: center; border-top: solid 2px #921717; }
#local2010 article.pref_recipe table td            { padding: .5em 1em .5em 0; font-size: 3.3vw; width: 60%; }
#local2010 article.pref_recipe table td span       { display: inline; }
#local2010 article.pref_recipe table tr td:nth-last-child(2) { width: auto; } 
#local2010 article.pref_recipe table tr td:last-child        { padding-right: 0; } 
#local2010 article.pref_recipe .cap                          { margin-top: .5em; }
#local2010 article.pref_recipe .cap p                        { font-size: 3vw; }
#local2010 article.pref_recipe .cap p:last-child             { margin-top: 1em; padding: 1em 0 0 0; text-indent: 0; border-top: solid 2px #ccc; }
#local2010 article.pref_recipe .cap p:last-child span        { display: block; font-size: 3.3vw; font-weight: bold; }
#local2010 article.pref_recipe .cap p:last-child span:after  { content: ''; }
}
@media only screen and (min-width: 769px){
#local2010 article.pref_recipe table tr.sp_pref { display: none;  }
}

article p.cap { font-size: 14px; }
@media only screen and (max-width: 768px){
article p.cap { font-size: 3vw; }
}

/* 郷土のおせちコラム */
article.column       { padding: 0 0; max-width: 980px; min-width: 600px; }
article.column .data { margin: 40px auto .5em auto; padding: 20px 50px; background: #fffae7; border: solid 1px #ccc; }
@media only screen and (max-width: 768px){
article.column       { padding: 0 0; max-width: 100%; min-width: 100%; }
article.column .data { margin: 1.5em auto .5em auto; padding: 1em; }
article.column .data p { margin: .5em auto 0 auto;  }
#local2010 article.column .data h3 { margin: .5em auto;  font-size: 3.75vw!important; }
}
