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

.page_header .vis_map { width: 100%; margin: auto; }
.page_header .vis_map img { width: 100%; height: auto; display: block; /* 画像の余白を防ぐ */ }

.page_header .vis_map img.balloon { width: auto; height: auto; }


/* balloon */
.vis_map  p.balloon {
	margin: 0;
	position: absolute;
}
.vis_map  p.balloon a img{
	opacity:1.0;
    border: solid 1px #111111
}

[id^="balloon"] {
  display: none; /* ページ読み込み時にバルーンを非表示にする */
  position: absolute;
  z-index: 9999;
}


.vis_map  p.balloon#balloon01 { right: 17%; top: 5%; /*北海道*/ }
.vis_map  p.balloon#balloon02 { right: 20%; top: 7%; /*青森*/ }
.vis_map  p.balloon#balloon03 { right: 16%; top: 8%; /*岩手*/ }
.vis_map  p.balloon#balloon04 { right: 17%; top: 14%; /*宮城*/ }
.vis_map  p.balloon#balloon05 { right: 24%; top: 8%; /*秋田*/ }
.vis_map  p.balloon#balloon06 { right: 24%; top: 14%; /*山形*/ }
.vis_map  p.balloon#balloon07 { right: 17%; top: 22%; /*福島*/ }

.vis_map  p.balloon#balloon08 { right: 15%; top: 32%; /*茨城*/ }
.vis_map  p.balloon#balloon09 { right: 18%; top: 28%; /*栃木*/ }
.vis_map  p.balloon#balloon10 { right: 25%; top: 28%; /*群馬*/ }
.vis_map  p.balloon#balloon11 { right: 21%; top: 35%; /*埼玉*/ }
.vis_map  p.balloon#balloon12 { right: 15%; top: 42%; /*千葉*/ }
.vis_map  p.balloon#balloon13 { right: 20%; top: 42%; /*東京*/ }
.vis_map  p.balloon#balloon14 { right: 22%; top: 48%; /*神奈川*/ }

.vis_map  p.balloon#balloon15 { right: 30%; top: 22%; /*新潟*/ }
.vis_map  p.balloon#balloon16 { right: 36%; top: 22%; /*富山*/ }
.vis_map  p.balloon#balloon17 { right: 43%; top: 22%; /*石川*/ }
.vis_map  p.balloon#balloon18 { right: 44%; top: 29%; /*福井*/ }
.vis_map  p.balloon#balloon19 { right: 30%; top: 42%; /*山梨*/ }
.vis_map  p.balloon#balloon20 { right: 32%; top: 35%; /*長野*/ }
.vis_map  p.balloon#balloon21 { right: 38%; top: 35%; /*岐阜*/ }
.vis_map  p.balloon#balloon22 { right: 30%; top: 48%; /*静岡*/ }
.vis_map  p.balloon#balloon23 { right: 37%; top: 48%; /*愛知*/ }

.vis_map  p.balloon#balloon24 { right: 42.5%; top: 48%; /*三重*/ }
.vis_map  p.balloon#balloon25 { right: 43%; top: 35%; /*滋賀*/ }
.vis_map  p.balloon#balloon26 { right: 48%; top: 35%; /*京都*/ }
.vis_map  p.balloon#balloon27 { right: 51%; top: 43%; /*大阪*/ }
.vis_map  p.balloon#balloon28 { right: 55%; top: 36%; /*兵庫*/ }
.vis_map  p.balloon#balloon29 { right: 46.2%; top: 45%; /*奈良*/ }
.vis_map  p.balloon#balloon30 { right: 42%; top: 51%; /*和歌山*/ }

.vis_map  p.balloon#balloon31 { left: 40%; top: 30%; /*鳥取*/ }
.vis_map  p.balloon#balloon32 { left: 36%; top: 30%; /*島根*/ }
.vis_map  p.balloon#balloon33 { left: 40%; top: 38%; /*岡山*/ }
.vis_map  p.balloon#balloon34 { left: 36%; top: 38%; /*広島*/ }
.vis_map  p.balloon#balloon35 { left: 31.5%; top: 36%; /*山口*/ }


.vis_map  p.balloon#balloon36 { left: 40%; top: 52%; /*徳島*/ }
.vis_map  p.balloon#balloon37 { left: 40%; top: 45%; /*香川*/ }
.vis_map  p.balloon#balloon38 { left: 33%; top: 45%; /*愛媛*/ }
.vis_map  p.balloon#balloon39 { left: 33%; top: 52%; /*高知*/ }


.vis_map  p.balloon#balloon40 { left: 20%; top: 35%; /*福岡*/ }
.vis_map  p.balloon#balloon41 { left: 15%; top: 35%; /*佐賀*/ }
.vis_map  p.balloon#balloon42 { left: 12%; top: 35%; /*長崎*/ }
.vis_map  p.balloon#balloon43 { left: 20%; top: 45%; /*熊本*/ }
.vis_map  p.balloon#balloon44 { left: 26%; top: 35%; /*大分*/ }
.vis_map  p.balloon#balloon45 { left: 26%; top: 45%; /*宮崎*/ }
.vis_map  p.balloon#balloon46 { left: 22%; top: 52%; /*鹿児島*/ }
.vis_map  p.balloon#balloon47 { left: 12%; top: 52%; /*沖縄*/ }




.osechimap article { width: 980px; margin: 0px auto; }
.osechimap article ul.maplink { display: flex; justify-content: space-between; margin-top: -60px; margin-bottom: 20px; }

.osechimap article ul.maplink li {
    position: relative;
    display: block;
    width: 13%;
    font-size: 98%;
    font-weight: bold;
}

.osechimap article ul.maplink li a {
    display: block;
    position: relative;
    border-radius: 5px;
    padding: 0.5em 0;
    width: 100%; /* ボタン全体をクリック可能に */
    text-align: center;
    background: rgba(253,250,214,1);
    background: #911d20;
    box-shadow: 2px 2px 4px rgba(55,2,4,0.8);
    color: #911d20;
    color: #FFF;
}

.osechimap article ul.maplink li a:before {
    content: '\f063';
    font-size: 80%;
    line-height: 2.05;
    position: absolute;
    left: 0.8em;
    font-family: 'Font Awesome 5 Free';
}

.osechimap article ul.maplink li a:hover {
    box-shadow: none; /* 影を消す */
    background: rgba(253,250,214,0.9);
    background: #ac2f32;
    color: #FFF;
    transition: box-shadow 0.3s ease; /* アニメーション */
}

/*
.osechimap article ul.maplink li { position: relative; display: block; }
.osechimap article ul.maplink li:before { content: '▼'; font-size: 80%; line-height: 1.8; position: absolute; left: 0.5em; font-family: 'Font Awesome 5 Free'; }
.osechimap article ul.maplink li a { display: block; }
.osechimap article ul.maplink li a:before { content: '▼'; font-size: 80%; line-height: 1.8; position: absolute; left: 0.5em; font-family: 'Font Awesome 5 Free'; }
.osechimap article ul.maplink li { border: solid 2px #971c21; border-radius: 5px; padding: 0.5em 0; width: 13%; text-align: center; background: rgba(253,250,214,0.9); box-shadow: 2px 2px 4px rgba(55,2,4,0.8); }
*/

article.description { padding-bottom: 50px; }
article h2 { margin-top: 2em; font-size: 44px; padding-bottom: 1em; line-height: 1.5; text-align: center; font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif; color: #921717; }
.inner p { margin-bottom: 4em!important; }

.osechimap article .item_lists { width: 100%; }
.osechimap article .item_lists ul { display: flex; flex-wrap: wrap; justify-content: space-between; }
.osechimap article .item_lists ul::after { content: ""; display: block; width: 300px; } 
.osechimap article .item_lists ul > li { margin-bottom: 40px; width: 300px; text-align: center; border: none; overflow: hidden; position: relative; background: #FFF; box-shadow: 2px 2px 4px gray; }
.item_lists ul > li h5 { background: #FFF; border: none; padding: 1em 0; font-size: 20px; font-weight: normal; }


.item_lists ul > li .item {  }
.item_lists ul > li .item img { width: 100%; height: auto; }
.item_lists ul > li .item p { padding: 0.5em!important; text-align: center!important; margin: auto; min-height: 1em!important; border-top: none!important; }
.osechimap article .item_lists ul > li p { width: 90%; margin: auto; margin-top: 0!important; padding: 1em 0; text-align: left; border-top: solid 1px; min-height: 9em; margin-bottom: 0em; padding-bottom: 0em; }
.item_lists ul > li .btnArea { /*border-top: solid 1px #6fba2c; /*position: absolute; */padding-top: 0.8em; left: 0; right: 0; bottom: 0; width: 90%; margin: auto; }
.item_lists ul > li p.egao_recipe { margin-bottom: 0!important; padding: 0 0 1em!important; border-top: none!important; min-height: 1em!important; text-align: center!important; }
.item_lists ul > li p.egao_recipe img { width: 100%; height: auto; }

.osechimap article .areabg { width: 980px; margin: auto; }


article h3.onmouse { font-size: 1.4rem; margin-bottom: 0; color: #000; }

/** エリア名　H3 **/
.osechimap article h3#hokkaido { color: #325ca2; font-size: 3rem; font-weight: normal; }
.osechimap article h3#hokkaido span.touhoku { color: #45b4d9; }
.osechimap article h3#kanto { color: #acc836; font-size: 3rem; font-weight: normal; }
.osechimap article h3#chubu { color: #198c3b; font-size: 3rem; font-weight: normal; }
.osechimap article h3#kinki { color: #caad4f; font-size: 3rem; font-weight: normal; }
.osechimap article h3#chugoku { color: #b85f8a; font-size: 3rem; font-weight: normal; }
.osechimap article h3#shikoku { color: #ebbf28; font-size: 3rem; font-weight: normal; }
.osechimap article h3#kyushu { color: #e68f91; font-size: 3rem; font-weight: normal; }
.osechimap article h3#kyushu span.okinawa { color: #e0641e; }


/** エリア背景色 **/
.osechimap article.hokkaido { width: 100%!important; max-width: 100%!important; min-width: 100%!important; background: rgba(50,92,162,0.1); padding: 2em 0; }
.osechimap article.kanto { width: 100%!important; max-width: 100%!important; min-width: 100%!important; background: rgba(172,200,54,0.2); padding: 2em 0; }
.osechimap article.chubu { width: 100%!important; max-width: 100%!important; min-width: 100%!important; background: rgba(25,140,59,0.2); padding: 2em 0; }
.osechimap article.kinki { width: 100%!important; max-width: 100%!important; min-width: 100%!important; background: rgba(202,173,79,0.2); padding: 2em 0; }
.osechimap article.chugoku { width: 100%!important; max-width: 100%!important; min-width: 100%!important; background: rgba(184,95,138,0.2); padding: 2em 0; }
.osechimap article.shikoku { width: 100%!important; max-width: 100%!important; min-width: 100%!important; background: rgba(235,191,40,0.2); padding: 2em 0; }
.osechimap article.kyushu { width: 100%!important; max-width: 100%!important; min-width: 100%!important; background: rgba(230,143,145,0.2); padding: 2em 0; }


/** 県別レシピ名　H5 **/
.osechimap article.hokkaido .item_lists ul > li h5 { background: #FFF; border: none; padding: 1em 0; color: #325ca2; font-size: 20px; font-weight: bold; }
.osechimap article.kanto .item_lists ul > li h5 { background: #FFF; border: none; padding: 1em 0; color: #acc836; color: #97b228; font-size: 20px; font-weight: bold; }
.osechimap article.chubu .item_lists ul > li h5 { background: #FFF; border: none; padding: 1em 0; color: #198c3b; font-size: 20px; font-weight: bold; }
.osechimap article.kinki .item_lists ul > li h5 { background: #FFF; border: none; padding: 1em 0; color: #caad4f; font-size: 20px; font-weight: bold; }
.osechimap article.chugoku .item_lists ul > li h5 { background: #FFF; border: none; padding: 1em 0; color: #b85f8a; font-size: 20px; font-weight: bold; }
.osechimap article.shikoku .item_lists ul > li h5 { background: #FFF; border: none; padding: 1em 0; color: #ebbf28; font-size: 20px; font-weight: bold; }
.osechimap article.kyushu .item_lists ul > li h5 { background: #FFF; border: none; padding: 1em 0; color: #e68f91; font-size: 20px; font-weight: bold; }




/*
.osechimap article .item_lists ul > li.kanto { border-color: #acc836; }
.osechimap article .item_lists ul > li.kanto h5 { background-color:rgba(69,180,217,0.10); border-color: #acc836; color: #acc836; }
*/


.dento_toplink { padding: 50px 0; }
.dento_toplink .dentolink           { margin: 0 auto; text-align: center; }
.dento_toplink .dentolink .out_line { margin: 0 0.5em; padding: 2px; width: 360px; border: solid 2px #fe0000; border-radius: 6px; display: inline-block; }
.dento_toplink .dentolink p         { margin: 0!important; padding: 0!important; font-family: sans-serif; background-image: linear-gradient(to right, #fe0000 0%, #fe8080 100%)!important; border-radius: 4px; position: relative; }
.dento_toplink .dentolink p         { margin: 0!important; padding: 0!important; font-family: sans-serif; background-image: linear-gradient(to right, #fe0000 0%, #fe0000 100%)!important; border-radius: 4px; position: relative; }
.dento_toplink .dentolink p a       { padding: 0 3rem 0 0.5rem; height: 3rem; line-height: 3rem; font-weight: bold; font-size: 16px; text-decoration: none; color: #fff; display: block; position: relative; }
.dento_toplink .dentolink p a:after { content: '\f054'; font-weight: 900; font-family: "Font Awesome 5 Free"; text-align: center; width: 3rem; height: 3rem; background: #fe0000; position: absolute; top: 0; right: 0; border-radius: 0 4px 4px 0; -webkit-font-smoothing: antialiased; }


/* プロフィール */
article.summary   { margin: 60px auto; }
article.summary   { margin-top: 20px; }
.summary .caption { font-size: 14px!important; }
.profile          { padding: 1em; background: #fffae7; border: solid 1px #ccc; }
.profile img      { float: left; margin: 0 1em 0.5em 0; }
.profile span     { font-size: 120%; }
@media only screen and (max-width: 768px){
article.summary   { width: 100%; margin-top: 20px; }
.summary .caption { font-size: 3.3vw; }
.profile          { margin: 2em 0; font-size: 95%; }
.profile img      { margin-right: .5em; max-width: 33%; }
}

@media only screen and (max-width: 768px){
.db_contents article { max-width: 95%; }
.vis_map  p.balloon a img{
	opacity:1.0;
    width: 90%!important;
    height: auto!important;
}

.osechimap article .areabg { width: 98%; margin: auto; }
.osechimap article .item_lists ul::after { content: ""; display: block; width: 32%; } 
.osechimap article .item_lists ul > li { width: 32%; }
.osechimap article .item_lists ul > li p { font-size: 16px; }

}

@media only screen and (max-width: 650px){
.osechimap article ul.maplink li a { font-size: 75%; letter-spacing: -0.6px; }

article h3.onmouse { font-size: 0.8rem!important; }

.osechimap article ul.maplink { margin-top: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.osechimap article ul.maplink li { width: 24%; font-size: 98%; font-weight: bold; padding: 0.5em 0; }
.osechimap article ul.maplink::after { content: ""; display: block; width: 24%; } 

.osechimap article .item_lists ul > li { width: 96%; margin: auto; margin-bottom: 1.5em; }
.osechimap article .item_lists ul > li p { min-height: 6em; }
.osechimap article .item_lists ul > li p img { width: 50%; }
}