@charset "UTF-8";
/* 2022.12.20 追加 */
/* 2022.12.09 追加 */
/* 2023.02.09 追加 */
/* 2022新作　レスポンシブ化に向けて事前スタイル 
======================================================================================================== */
/* レスポンシブ設定 */
/* commonのリセット分(共通)
------------------------------------------------------ */
@font-face   { font-family: "KozukaGB"; src: url("./KozukaGB.woff") format('woff'); }
@font-face   { font-family: "KozukaGR"; src: url("./KozukaGR.woff") format('woff'); }
@font-face   { font-family: "YuMinchoEXB"; src: url("./yumincho_exb.eot") format('eot'), url("./yumincho_exb.woff") format('woff'); }
.myFontClass { font-family: "YuMinchoEXB"!important; }

#Container           { width: 100%; }
#Container .org_wrap { margin: 0 auto; width: 980px; }
@media only screen and (max-width: 768px){
 #Container .org_wrap { width: 100%; }
}

.pc_mode { display: block; }
.sp_mode { display: none; }
@media only screen and (max-width: 768px){
.pc_mode { display: none; }
.sp_mode { display: block; }
}
/* データーベース・トビラ用 
======================================================================================================== */
.db_tobira   { background: #fff; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; display: flex; flex-direction: column; position: relative; }
.db_tobira * { box-sizing: border-box; }
@media only screen and (max-width: 768px){
.db_tobira { border-bottom: none; position: relative; }
}

/* ハンバーガーメニュー */
.navigation { margin: 0 auto; max-width: 1200px; width: 100%; display: block; position: relative; }
@media only screen and (max-width: 768px){
.navigation { height: 60px; }
}

.c-nav-btn  { padding-left: 5px; height: 44px; width: 44px; position: absolute; right: 10px; top: 10px; cursor:pointer; background: none; border: solid 2px #c30d23; border-radius: .5em; transition: transform 0.3s; }
.c-nav-btn::after,
.c-nav-btn::before { position: absolute; top: calc(50% - 1px); content: ""; width: 30px; height: 4px; border-radius: 2px; display: block; background: #c30d23; transition: transform 0.3s; }
.c-nav-btn::before { transform: translateY(-8px); box-shadow: 0 8px 0 #c30d23; }
.c-nav-btn::after  { transform: translateY(8px); }
.navigation.is-active .c-nav-btn::before { transform: rotate(45deg); box-shadow: none; }
.navigation.is-active .c-nav-btn::after  { transform: rotate(-45deg); }

.navigation #db_navi                { display: none; opacity: 0; height: 0; overflow: hidden; z-index: 2; }
.navigation.is-active #db_navi      { position: absolute; height: auto; top: 60px; right: 0; background: #fff; border: 1px solid #ccc; display: block; opacity: 1; animation-name: fadein; }
#db_navi ul li                      { }
#db_navi ul li:first-child          { border-bottom: solid 1px #ccc; }
#db_navi ul li a                    { margin: 0 1em; padding: 1em .5em; display: block; font-size: 1em; font-family: 'KozukaGR'; border-bottom: dotted 1px #ccc; }
#db_navi ul li:first-child a        { border: none; font-size: 1.2em; font-family: 'KozukaGB'; color: #e60012; }
#db_navi ul li:first-child a:before { content: '\f054'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: .5em; }
#db_navi ul li:last-child a         { border: none; }
#db_navi ul li a:before             { content: '\f101'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: .5em; }
#db_navi ul li a span               { font-size: 65%; }
#db_navi ul li a:hover              { opacity: 1; color: #e60012; }
#db_navi ul li:first-child a:hover  { opacity: .7; }
@media only screen and (max-width: 768px){
.navigation.is-active #db_navi { position: absolute; width: 100vw; top: 60px; right: 0; background: #fff; border: none; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
#db_navi ul li a               { margin: 0 3.5vw; font-size: 3.5vw; }
#db_navi ul li:first-child a   { font-size: 4vw; }
#db_navi ul li a span          { font-size: 75%; }
}

/* ローカルリンクボタン */
/*.local_navi   { padding: 1em; width: 980px; display: flex; border-top: 1px solid #ccc; }
.local_navi a { margin: 0 1em 0 0; font-weight: bold; font-family: 'KozukaGB'; text-decoration: none; border-bottom: 3px solid #c30d23; }
.local_navi a:last-child { margin: 0; } */
/*
@media only screen and (max-width: 1112px){
.local_navi   { padding: 0 60px; width: 100%; }
}*/

.local_navi               { margin: 0 auto; padding: 0; width: 100%; display: block; border-top: none; }
.local_navi a             { margin: 0; padding: 1em 1em 1em calc(.5em + 1em); display: block; font-family: 'KozukaGB'; text-decoration: none; font-size: 1em; border-bottom: 1px solid #ccc; }
.local_navi a:hover       { color: #c30d23; }
.local_navi a:first-child { border-top: 1px solid #c30d23; }
.local_navi a:before      { content: '\f054'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: .5em; color: #c30d23; }
@media only screen and (max-width: 768px){
.local_navi a             { padding: 1em 1em 1em calc(.5em + 3.5vw); font-size: 3.5vw; }
}


/* メインビジュアル */
.db_tobira #db_title    { margin: 0 auto; width: 100%; padding-top: 1em; }
.db_tobira #db_title h1 { margin: 0 auto; width: 1200px; text-align: right; }
@media only screen and (min-width: 769px) and (max-width: 1200px){
.db_tobira #db_title h1 { width: 100%; }
}
@media only screen and (max-width: 768px){
.db_tobira #db_title        { padding-top: 0; }
.db_tobira #db_title h1     { margin: 0 auto; width: 100%; }
.db_tobira #db_title h1 img { padding-top: ; width: 100%; }
}
/* article タイトル */
.db_tobira article.reserch2023                    { margin: 4em auto; width: 980px; }
.db_tobira article.reserch2023 h2                 { margin-bottom: 1em; color: #000; padding-left: 120px; font: normal bold 46px/1.2  'KozukaGB'; display: inline-block; position: relative; left: 50%; transform: translateX(-50%); background: url(/knowledge/shogatsu/database/img/icon_red.png) left no-repeat; background-size: auto 100%; }

.db_tobira article.reserch2023 h2.noicon          { margin-bottom: 1em; color: #000; padding-left: 0px; font: normal bold 46px/1.2 'KozukaGB'; display: inline-block; background: none!important; text-align: center; margin-bottom: 0.5em; }

.db_tobira article.reserch2023:last-child h2      { margin: 30px auto; background: url(/knowledge/shogatsu/database/img/icon_orange.png) left no-repeat; background-size: auto 100%; }
.db_tobira article.reserch2023:last-child h2.book { margin: 2em auto 30px auto; padding-left: 130px; background: url(/knowledge/shogatsu/database/img/icon_book.png) left no-repeat; background-size: auto 100%; }
@media only screen and (max-width: 768px){
.db_tobira article.reserch2023                    { margin: 10vw auto; padding: 0 3vw; width: 100%; }
.db_tobira article.reserch2023 h2                 { margin-bottom: 3vw; padding-left: 20vw; font-size: 7vw!important; }
.db_tobira article.reserch2023:last-child h2      { margin: 0; }
.db_tobira article.reserch2023:last-child h2.book { padding-left: 20vw; }
}
.db_tobira article.map2024, 
.db_tobira article.reserch2024                    { margin: 4em auto; width: 980px; }
.db_tobira article.reserch2024 h2                 { margin-bottom: 1em; color: #000; padding-left: 120px; font: normal bold 46px/1.2  'KozukaGB'; display: inline-block; position: relative; left: 50%; transform: translateX(-50%); background: url(/knowledge/shogatsu/database/img/icon_orange.png) left no-repeat; background-size: auto 100%; }

.db_tobira article.map2024 h2                     { margin-bottom: 1em; color: #000; font: normal bold 46px/1.2  'KozukaGB'; text-align: center; }


.db_tobira article.reserch2024 h2.noicon          { margin-bottom: 1em; color: #000; padding-left: 0px; font: normal bold 46px/1.2 'KozukaGB'; display: inline-block; background: none; text-align: center; margin-bottom: 0.5em; }

.db_tobira article.reserch2024:last-child h2      { margin: 30px auto; background: url(/knowledge/shogatsu/database/img/icon_orange.png) left no-repeat; background-size: auto 100%; }
.db_tobira article.reserch2024:last-child h2.book { margin: 2em auto 30px auto; padding-left: 130px; background: url(/knowledge/shogatsu/database/img/icon_book.png) left no-repeat; background-size: auto 100%; }
@media only screen and (max-width: 768px){
.db_tobira article.map2024, 
.db_tobira article.reserch2024                    { margin: 10vw auto; padding: 0 3vw; width: 100%; }
.db_tobira article.map2024 h2,
.db_tobira article.reserch2024 h2                 { margin-bottom: 3vw; padding-left: 20vw; font-size: 7vw!important; }
.db_tobira article.map2024 h2                     { margin-bottom: 3vw; padding-left: 0; font-size: 7vw!important; }

.db_tobira article.reserch2024:last-child h2      { margin: 0; }
.db_tobira article.reserch2024:last-child h2.book { padding-left: 20vw; }
}


/* article ボタン */
.db_tobira article .btn_layout                   { display: flex; flex-wrap: wrap; justify-content: space-between; }
.db_tobira article .btn_layout > div             { margin: 30px 0; width: calc(50% - 30px); border: 8px solid #dedfdf; position: relative; }
.db_tobira article .btn_layout .reserch_title.red { width: 100%; height: 6rem; vertical-align: middle; background: rgba(177,30,35,.85)!important; position: absolute!important; top: 0; z-index: 2; }
.db_tobira article .btn_layout .reserch_title.red h3 { color: #FFF!important; }
.db_tobira article .btn_layout .reserch_title    { width: 100%; height: 6rem; vertical-align: middle; background: rgba(177,30,35,.85); position: absolute; top: 0; z-index: 2; }
.db_tobira article .btn_layout .reserch_title h3 { width: 100%; text-align: center; font-weight: bold; font-size: 25px; line-height: 1.33; font-family: 'KozukaGB'; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.db_tobira article .btn_layout .bg_images        { position: relative; }
.db_tobira article .btn_layout .bg_images img    { position: relative; top: 0; width: 100%; height: auto; }
.db_tobira article .btn_layout div.double        { width: 100%; }
.db_tobira article .btn_layout div a             { text-decoration: none; }
.db_tobira article .btn_layout p                 { margin: 1em 1em .5em 1em; font-size: 22px; font-family:'KozukaGR'; line-height: 1.5; text-align: justify; }
.db_tobira article .btn_layout p.date            { margin: 0; padding: .5em .75em; display: inline-block; font-weight: bold; font-size: 18px; font-family: 'KozukaGB'; color:#fff; background: #008cd6; border: solid 2px #fff; border-radius: .25em; position: absolute; right: .5em; bottom: .5em; }
@media only screen and (max-width: 768px){
.db_tobira article .btn_layout                   { flex-direction: column; justify-content: center; }
.db_tobira article .btn_layout > div             { margin: 3vw 0; width: 100%; border: 10px solid #dedfdf; }
.db_tobira article .btn_layout .reserch_title    { height: 18vw; }
.db_tobira article .btn_layout .reserch_title h3 { font-size: 4.5vw!important; }
.db_tobira article .btn_layout p                 { margin: 1em 1em .5em 1em; font-size: 4vw; line-height: 1.5; text-align: justify; }
.db_tobira article .btn_layout p.date            { font-size: 3.5vw; }

.db_tobira article .btn_layout .reserch_title.red { width: 100%; height: 18vw!important; vertical-align: middle; background: rgba(177,30,35,.85)!important; position: absolute!important; top: 0; z-index: 2; }
}



.db_tobira article.reserch2023 .reserch_title                 { width: 100%; height: 6rem; vertical-align: middle; /*background: transparent;*/ position: absolute; top: 0; z-index: 2; }
.db_tobira article.reserch2023:last-child #db_research .reserch_title,
.db_tobira article.reserch2023:last-child #db_pref .reserch_title,
.db_tobira article.reserch2023:last-child #db_2010local .reserch_title,
.db_tobira article.reserch2023:last-child #db_tradition .reserch_title   { position: relative; }
.db_tobira article.reserch2023:last-child #db_2010local .reserch_title,
.db_tobira article.reserch2023:last-child #db_pref .reserch_title,
.db_tobira article.reserch2023:last-child #db_research .reserch_title,

.db_tobira article.reserch2023:last-child #db_fish .reserch_title,
.db_tobira article.reserch2023:last-child #db_sake .reserch_title,
.db_tobira article.reserch2023:last-child #db_tradition .reserch_title   { background: #fff; }
.db_tobira article.reserch2023:last-child .reserch_title h3              { color: #000; }


.db_tobira article.reserch2023:last-child #db_fish .reserch_title h3,
.db_tobira article.reserch2023:last-child #db_sake .reserch_title h3     { color: #000; }

.db_tobira article.reserch2023:last-child #db_kazarigiri .reserch_title h3,
.db_tobira article.reserch2023:last-child #db_zoniguzai .reserch_title h3,
.db_tobira article.reserch2023:last-child #db_shogatsufish .reserch_title h3,
.db_tobira article.reserch2023:last-child #db_dentoosechi .reserch_title h3 { color: #FFF; }

.db_tobira article.reserch2023:last-child #db_research .reserch_title h3,
.db_tobira article.reserch2023:last-child #db_pref .reserch_title h3     { width: auto; position: relative; padding-left: 1.5em; background: url(/knowledge/shogatsu/database/img/icon_black.png) left no-repeat; background-size: auto 100%; display: inline-block; }
@media only screen and (max-width: 768px){
.db_tobira article.reserch2023:last-child .reserch_title { height: 18vw; /*background: transparent;*/ }
}

.db_tobira article.reserch2024.reserch_title                 { width: 100%; height: 6rem; vertical-align: middle; /*background: transparent;*/ position: absolute; top: 0; z-index: 2; }
.db_tobira article.reserch2024 #db_research .reserch_title,
.db_tobira article.reserch2024 #db_pref .reserch_title,
.db_tobira article.reserch2024 #db_2010local .reserch_title,
.db_tobira article.reserch2024 #db_tradition .reserch_title   { position: relative; }
.db_tobira article.reserch2024 #db_2010local .reserch_title,
.db_tobira article.reserch2024 #db_pref .reserch_title,
.db_tobira article.reserch2024 #db_research .reserch_title,

.db_tobira article.reserch2024 #db_fish .reserch_title,
.db_tobira article.reserch2024 #db_sake .reserch_title,
.db_tobira article.reserch2024 #db_tradition .reserch_title   { background: #fff; }
.db_tobira article.reserch2024 .reserch_title h3              { color: #000; }


.db_tobira article.reserch2024 #db_fish .reserch_title h3,
.db_tobira article.reserch2024 #db_sake .reserch_title h3     { color: #000; }

.db_tobira article.reserch2024 #db_kazarigiri .reserch_title h3,
.db_tobira article.reserch2024 #db_zoniguzai .reserch_title h3,
.db_tobira article.reserch2024 #db_shogatsufish .reserch_title h3,
.db_tobira article.reserch2024 #db_dentoosechi .reserch_title h3 { color: #FFF; }

.db_tobira article.reserch2024 #db_research .reserch_title h3,
.db_tobira article.reserch2024 #db_pref .reserch_title h3     { width: auto; position: relative; padding-left: 1.5em; background: url(/knowledge/shogatsu/database/img/icon_black.png) left no-repeat; background-size: auto 100%; display: inline-block; }
@media only screen and (max-width: 768px){
.db_tobira article.reserch2024 .reserch_title { height: 18vw; /*background: transparent;*/ }
}




/* データーベース・2022新作 4コンテンツ用 .db_2022contents
======================================================================================================== */
.db_2023contents   { background: #fff; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; display: flex; flex-direction: column; }
.db_2023contents * { box-sizing: border-box; }
@media only screen and (max-width: 768px){
.db_2023contents             { border-bottom: none; }
.db_2023contents .db_content { margin-bottom: 6vw; }
}
.db_2023contents .h_title h2       { margin: 1em auto; text-align: center; font-weight: bolder; font-size: 60px; line-height: 1.5; font-family: "YuMinchoEXB"!important; color: #921717; }
.db_2023contents article h3        { 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; }
.db_2023contents article h3.large  { font-size: 50px; }
.db_2023contents article h3 .small { font-size: 75%; font-weight: normal; color: #333; }
.db_2023contents article           { margin: 60px auto; max-width: 1200px; min-width: 980px; }
.db_2023contents article p         { margin: 1em auto; font-size: 1rem; color: #000; }
@media only screen and (max-width: 768px){
.db_2023contents article h3        { font-size: 5vw!important; }
.db_2023contents article h3.large  { font-size: 6vw!important; }
.db_2023contents article           { margin: 6vw auto; max-width: 100%; min-width: auto; }
.db_2023contents article p         { font-size: 3.3vw; }
.db_2023contents span.ib           { display: inline-block; }
}

/* 汎用コンテンツ用 */
.db_contents   { background: #fff; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; display: flex; flex-direction: column; }
.db_contents * { box-sizing: border-box; }
@media only screen and (max-width: 768px){
.db_contents             { border-bottom: none; }
.db_contents .db_content { margin-bottom: 6vw; }
}
.page_header               { margin-top: 62px; position: relative; }
.page_header .h_visual     { margin: 0 auto; }
.page_header .h_visual img { width: 100%; height: auto; }
@media only screen and (max-width: 768px){
.page_header               { margin-top: 4px; }
}


.db_contents .h_title h2       { margin: 1em auto; text-align: center; font-weight: bolder; font-size: 60px; line-height: 1.5; font-family: "YuMinchoEXB"!important; color: #921717; }
.db_contents article h3        { 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; }
.db_contents article h3.large  { font-size: 50px; }
.db_contents article h3 .small { font-size: 75%; font-weight: normal; color: #333; }
.db_contents article           { margin: 60px auto; max-width: 1200px; min-width: 980px; }
.db_contents article p         { margin: 1em auto; font-size: 1rem; color: #000; }
@media only screen and (max-width: 768px){
.db_contents article h3        { font-size: 5vw!important; }
.db_contents article h3.large  { font-size: 6vw!important; }
.db_contents article           { margin: 6vw auto; max-width: 100%; min-width: auto; }
.db_contents article p         { font-size: 3.3vw; }
.db_contents span.ib           { display: inline-block; }
}

article.chart                      { margin: 80px auto!important; }
article.chart p.read               { margin: auto 100px; }
article.chart .ranking_chart       { display: flex; align-items: flex-start; }
article.chart .ranking_chart table { margin: 0 10px; }
article.chart .ranking_chart table tr:nth-child(odd)  { background: #eee; }
article.chart .ranking_chart table tr:nth-child(even) { background: rgba(255,255,255,0.5); }
article.chart .ranking_chart table th { padding: 5px 3px; vertical-align: middle; text-align: center; white-space: pre; border-right: 2px solid #fff; }
article.chart .ranking_chart table td { padding: 5px 3px; vertical-align: middle; color: #000; white-space: pre; }
@media only screen and (max-width: 768px){
article.chart                      { margin: 6vw auto!important; padding: 0 3vw; }
article.chart p.read               { margin: auto 0; }
article.chart .ranking_chart       { display: flex; flex-direction: column; }
article.chart .ranking_chart table { margin: 0; }
article.chart .ranking_chart table.rev tr:nth-child(odd)  { background: rgba(255,255,255,0.5); }
article.chart .ranking_chart table.rev tr:nth-child(even) { background: #eee; }
article.chart .ranking_chart table th { padding: .35em .5em; width: 6em; }
article.chart .ranking_chart table td { padding: .35em .5em; }
}

article.chart .ranking_chart table.best10                    { font-size: 18px; } 
article.chart .ranking_chart table.best10 tr:nth-child(odd)  { background: #f3fae1; }
article.chart .ranking_chart table.best10 tr:nth-child(even) { background: rgba(245,250,231,0.7); }
article.chart .ranking_chart table.best10 th,
article.chart .ranking_chart table.best10 td                 { padding: .35em .5em; border-bottom: 1px solid #fff; }
article.chart .ranking_chart table.best10 tr:nth-child(1) th,
article.chart .ranking_chart table.best10 tr:nth-child(1) td { background: #f4de62; border-bottom: 1px solid #fff; }
article.chart .ranking_chart table.best10 tr:nth-child(2) th,
article.chart .ranking_chart table.best10 tr:nth-child(2) td { background: #eee; border-bottom: 1px solid #fff; }
article.chart .ranking_chart table.best10 tr:nth-child(3) th,
article.chart .ranking_chart table.best10 tr:nth-child(3) td { background: #d2b18d; border-bottom: 1px solid #fff; }

article.chart .ranking_chart table.best10_full                    { font-size: 18px; margin: 0 auto 2em auto; width: 40%; } 
article.chart .ranking_chart table.best10_full tr:nth-child(odd)  { background: #fffabc; }
article.chart .ranking_chart table.best10_full tr:nth-child(even) { background: #fbe5a4; }
article.chart .ranking_chart table.best10_full th,
article.chart .ranking_chart table.best10_full td                 { padding: .35em .5em; font-weight: bold; color: #4c4c4c; border-bottom: 2px solid #fff; }
article.chart .ranking_chart table.best10_full tr:nth-child(1) th { background: #f4de62; }
article.chart .ranking_chart table.best10_full tr:nth-child(1) td { background: #efeeed; text-align: center; font-size: 16px; }
article.chart .ranking_chart table.best10_full tr:nth-child(1) td:nth-child(1) { border-right: 2px solid #fff; }
article.chart .ranking_chart table.best10_full tr:nth-child(2) th,
article.chart .ranking_chart table.best10_full tr:nth-child(2) td { padding: .45em.5em; font-size: 30px; color: #fff; background: #c7171e; }
article.chart .ranking_chart table.best10_full tr:nth-child(3) th,
article.chart .ranking_chart table.best10_full tr:nth-child(3) td { padding: .35em .5em; font-size: 27px; color: #fff; background: #d7713c; }
article.chart .ranking_chart table.best10_full tr:nth-child(4) th,
article.chart .ranking_chart table.best10_full tr:nth-child(4) td { padding: .35em.5em; font-size: 25px; color: #fff; background: #e5a160; }
@media only screen and (max-width: 768px){
article.chart .ranking_chart table.best10_full                    { font-size: 1em; margin: 0 auto; width: 100%; } 
article.chart .ranking_chart table.best10_full tr:nth-child(1) td { font-size: 3.3vw; }
article.chart .ranking_chart table.best10_full tr:nth-child(2) th,
article.chart .ranking_chart table.best10_full tr:nth-child(2) td { font-size: 7vw; }
article.chart .ranking_chart table.best10_full tr:nth-child(3) th,
article.chart .ranking_chart table.best10_full tr:nth-child(3) td { font-size: 6vw; }
article.chart .ranking_chart table.best10_full tr:nth-child(4) th,
article.chart .ranking_chart table.best10_full tr:nth-child(4) td { font-size: 5vw; }
}

.db_2023contents span.crown1,
.db_2023contents span.crown2,
.db_2023contents span.crown3 { vertical-align: baseline; padding-right:.5em; }

article.map                              { margin: 60px auto!important; }
article.map p.read                       { margin: auto 100px; }
article.map .round_clop .header_title    { padding: 1.5em;  text-align: center; background: #921717; border: solid 2px #921717; border-radius: 30px 30px 0 0; }
article.map .round_clop .header_title h3 { color: #fff; display: inline; position: relative; }
article.map .round_clop .map_image       { padding: 20px 40px; background: #fff; border: solid 2px #921717; border-top: none; border-radius: 0 0 30px 30px; }
article.map .round_clop .map_image ul    { display: flex; justify-content: space-between; }
article.map .round_clop .map_image li    { width: calc(50% - 10px); position: relative; }
article.map .round_clop .map_image li h4 { position: absolute; top: 1em; font-weight: bold; font-size: 30px; line-height: 1.5; color: #000; font-family: 'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック', sans-serif; }
article.map .round_clop .map_image li h4.east_up:after { content: ''; position: absolute; display: block; width: 151px; height: 109px; top: 3em; left: 0; background: url(/knowledge/shogatsu/database/img/east_up.png) no-repeat; background-size: contain; }
article.map .round_clop .map_image li h4.west_up:after { content: ''; position: absolute; display: block; width: 151px; height: 109px; top: 3em; left: 0; background: url(/knowledge/shogatsu/database/img/west_up.png) no-repeat; background-size: contain; }
article.map .round_clop .map_image li img              { width: 100%; margin-left: -40px; }
@media only screen and (max-width: 768px){
article.map                           { margin: 6vw auto!important; padding: 0 3vw; }
article.map p.read                    { margin: auto 0; }
article.map .round_clop .header_title { padding: 1em; border-radius: 5vw 5vw 0 0; }
article.map .round_clop .map_image    { padding: 4vw; border-radius: 0 0 5vw 5vw; }
article.map .round_clop .map_image ul { display: flex; flex-direction: column; }
article.map .round_clop .map_image li { width: 100%; }
article.map .round_clop .map_image li h4               { font-size: 4vw!important; }
article.map .round_clop .map_image li h4.east_up:after { width: 30vw; }
article.map .round_clop .map_image li h4.west_up:after { width: 30vw; }
article.map .round_clop .map_image li img              { margin-left: 0; }
}
article.summary               { margin: 60px auto; max-width: 640px; min-width: 600px; }
article.summary .data         { margin: 40px auto .5em auto; padding: 10px 25px; background: #fffae7; border: solid 1px #ccc; }
article.summary .data h3      { color: #000; font-size: 1em!important; font-family: 'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック', sans-serif; }
article.summary .data p       { margin: 0 0 0 5em; font-size: 85%; text-indent: -5em; }
article.summary .data_caption { font-size: 85%; }
@media only screen and (max-width: 768px){
article.summary               { margin: 6vw auto; padding: 0 3vw; min-width: auto; }
article.summary .data         { margin: 0 auto .5em auto; padding: 5vw; }
article.summary .data h3      { margin-top: 0; }
}

/* dentoosechi 伝統料理を含めたおせち料理49品での調査 */
article.visual_ranking       { margin: 80px auto!important; }
article.visual_ranking div   { margin: 0 auto; width: 980px; }
article.visual_ranking div p { margin: 1em 0; }
@media only screen and (max-width: 768px){
article.visual_ranking       { margin: 6vw auto!important; padding: 0 3vw; }
article.visual_ranking div   { margin: 0 auto; width: 100%; }
}
article.map_best10 ul        { display: flex; flex-wrap:wrap; }
article.map_best10 ul li     { padding: 20px; width: 50%; }
article.map_best10 ul li img { width: 100%; border: 1px solid #ccc; border-radius: 20px; }

/* zoniguzai 雑煮の餅と具材の分布 */
.mochi_map     { margin: 0 auto; position: relative; }
.mochi_map p   { position: absolute; top: 0; left: 100px; width: 50%; }
.mochi_map img { position: relative; left: 100px; }
@media only screen and (max-width: 768px){
.mochi_map p   { position: relative; top: 0; left: 0; width: 100%; }
.mochi_map img { position: relative; left: 0; }
}
article.map_yasai                             { margin: 60px auto!important; }
article.map_yasai .round_clop                 { display: flex; justify-content: space-between; flex-direction: row; padding: 20px 40px;  background: #fff; border: solid 2px #921717; border-radius: 30px; }
article.map_yasai .round_clop .clop_title     { width: 60%; }
article.map_yasai .round_clop .clop_title p   { padding: 0 0 40px 40px; font-size: 16px; }
article.map_yasai .round_clop .clop_image     { width: 40%; position: relative; }
article.map_yasai .round_clop .clop_image h4  { position: absolute; top: 1em; font-weight: bold; font-size: 30px; line-height: 1.5; color: #000; font-family: 'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック', sans-serif; }
article.map_yasai .round_clop .clop_image img { width: 100%; }
@media only screen and (max-width: 768px){
article.map_yasai                             { margin: 6vw auto!important; padding: 0 3vw; }
article.map_yasai .round_clop                 { display: flex; justify-content: center; flex-direction: column; padding: 4vw; border-radius: 5vw; }
article.map_yasai .round_clop .clop_title     { width: 100%; }
article.map_yasai .round_clop .clop_title p   { padding: 0; font-size: 3.3vw; }
article.map_yasai .round_clop .clop_image     { width: 100%; }
article.map_yasai .round_clop .clop_image h4  { font-size: 4vw!important; }
}

/* shogatsufish 年とり膳のごちそう「年とり魚」 */
article.sakana_intro h3     { color: #19264c; }
article.sakana_intro p.read { margin: auto 100px; }
@media only screen and (max-width: 768px){
article.sakana_intro        { padding: 0 3vw; }
article.sakana_intro p.read { margin: auto 0; }
}

article.sakana_chart               { margin: 40px auto; display: flex; justify-content: space-between; }
article.sakana_chart h4            { font-size: 24px; font-family: 'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック', sans-serif; text-align: center; color: #19264c; }
article.sakana_chart .best10_1st,
article.sakana_chart .best10_2nd   { width: calc(50% - 10px); padding: 20px; background: #fff; border: solid 2px #19264c; border-radius: 20px; }
article.sakana_chart .double_table { display: flex; justify-content: space-between; }
article.sakana_chart table th      { text-align: center; border: 1px solid #333; }
article.sakana_chart table td      { border: 1px solid #333; }
article.sakana_chart table td.ylw  { background: #ffc000; }
article.sakana_chart table td.grn  { background: #92d050; }
@media only screen and (max-width: 768px){
article.sakana_chart               { margin: 4vw auto; padding: 0 3vw; width: 100%; display: flex; flex-direction: column;  }
article.sakana_chart h4            { font-size: 4vw!important; }
article.sakana_chart .best10_1st,
article.sakana_chart .best10_2nd   { width: 100%; padding: 3vw; border-radius: 3.5vw; }
article.sakana_chart .best10_1st   { margin-bottom: 3vw; }
}

article.sakana_chart table td:first-child         { text-align: center; width: 4em; }
article.sakana_chart table td:nth-child(3)        { font-weight: 900; text-align: center; width: 1em; padding: 5px 5px; }
article.sakana_chart table td .arrow-up:before    { content: ''; width: 18px; height: 18px; display: block; background: url(/knowledge/shogatsu/database/shogatsufish/img/arrow_up.png) no-repeat; background-size: contain; }
article.sakana_chart table td .arrow-down:before  { content: ''; width: 18px; height: 18px; display: block; background: url(/knowledge/shogatsu/database/shogatsufish/img/arrow_down.png) no-repeat; background-size: contain; }
article.sakana_chart table td .arrow-right:before { content: ''; width: 18px; height: 18px; display: block; background: url(/knowledge/shogatsu/database/shogatsufish/img/arrow_right.png) center no-repeat; background-size: contain; }
article.sakana_chart .table_one { width: calc(47% - 10px); }
article.sakana_chart .table_two { width: calc(53% - 10px); }

article.fish_ranking .round_clop             { color: #fff; background: #19264c; border: solid 2px #19264c; border-radius: 30px 30px 0 0; }
article.fish_ranking .round_clop h3          { margin: .5em; color: #fff; }
.fish_ranking_clop                           { margin: 0; padding: 20px 40px 40px 40px; background: #fff; border: solid 2px #19264c; border-radius: 0 0 30px 30px; }
.fish_ranking_clop p.fish_ranking_copy       { font-size: 24px; text-align: center; }
.fish_ranking_clop ul.ranking_1st            { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; }
.fish_ranking_clop ul.ranking_1st li p       { margin: 0 0 10px 0; color: #000; font-size: 32px; font-weight: bold; font-family: "YuMinchoEXB"; }
.fish_ranking_clop ul.ranking_1st li.iteim1  { order: 2; width: calc(40% - 20px); }
.fish_ranking_clop ul.ranking_1st li.iteim2  { order: 1; width: calc(30% - 20px); }
.fish_ranking_clop ul.ranking_1st li.iteim3  { order: 3; width: calc(30% - 20px); }
.fish_ranking_clop ul.ranking_1st li div img { width: 100%; }
@media only screen and (max-width: 768px){
article.fish_ranking .round_clop                    { border-radius: 5vw 5vw 0 0; }
article.fish_ranking .round_clop h3                 { margin: .5em; }
.fish_ranking_clop                                  { padding: 3vw; border-radius: 0 0 5vw 5vw; }
.fish_ranking_clop p.fish_ranking_copy              { font-size: 5vw; }
.fish_ranking_clop ul.ranking_1st                   { display: flex; flex-wrap: wrap; align-items: center; flex-direction: column; margin-bottom: 5vw; }
.fish_ranking_clop ul.ranking_1st li                { margin-bottom: 3vw; }
.fish_ranking_clop ul.ranking_1st li p              { margin: 0 0 .5em 0; font-size: 7vw; text-align: center; }
.fish_ranking_clop ul.ranking_1st li.iteim1         { order: 1; width: 100%; text-align: center; }
.fish_ranking_clop ul.ranking_1st li.iteim2         { order: 2; width: 80%; }
.fish_ranking_clop ul.ranking_1st li.iteim3         { order: 3; width: 80%; }
.fish_ranking_clop ul.ranking_1st li.iteim1 div img { width: 100%; }
.fish_ranking_clop ul.ranking_1st li.iteim2 p       { font-size: 5vw; }
.fish_ranking_clop ul.ranking_1st li.iteim3 p       { font-size: 5vw; }
.fish_ranking_clop ul.ranking_1st li.iteim1 p img   { width: 25vw; }
.fish_ranking_clop ul.ranking_1st li.iteim2 p img   { width: 15vw; }
.fish_ranking_clop ul.ranking_1st li.iteim3 p img   { width: 15vw; }
}

/* kazarigiri 作ってみたい飾り切り */
article.kazarigiri_intro p.read  { margin: auto 100px; }

article.ranking                 { margin: 80px auto!important; }
article.ranking p.read          { margin: 40px 100px; }
article.ranking .round_clop     { color: #fff; background: #ff95aa; border: solid 2px #ff95aa; border-radius: 30px 30px 0 0; }
article.ranking .round_clop h3  { margin: .5em; color: #fff; }
article.ranking .ranking_clop   { padding: 20px 40px 40px 40px; background: #fff; border: solid 2px #ff95aa; border-radius:0 0 30px 30px; }
@media only screen and (max-width: 768px){
article.ranking               { margin: 6vw auto!important; padding: 0 3vw; }
article.ranking p.read        { margin: 4vw 0; }
article.ranking .round_clop   { border-radius: 5vw 5vw 0 0; }
article.ranking .ranking_clop { padding: 3vw; border-radius: 0 0 5vw 5vw; }
}
article.ranking .ranking_clop ul.ranking_1st            { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }
article.ranking .ranking_clop ul.ranking_1st li p       { margin: 0 0 10px 0; color: #000; font-size: 32px; font-weight: bold; font-family: "YuMinchoEXB"; }
article.ranking .ranking_clop ul.ranking_1st li.iteim1  { order: 2; width: calc(40% - 20px); }
article.ranking .ranking_clop ul.ranking_1st li.iteim2  { order: 1; width: calc(30% - 20px); }
article.ranking .ranking_clop ul.ranking_1st li.iteim3  { order: 3; width: calc(30% - 20px); }
article.ranking .ranking_clop ul.ranking_1st li div img { width: 100%; }

@media only screen and (max-width: 768px){
article.ranking .ranking_clop ul.ranking_1st                 { display: flex; flex-wrap: wrap; align-items: center; flex-direction: column; margin-bottom: 5vw; }
article.ranking .ranking_clop ul.ranking_1st li              { margin-bottom: 3vw; }
article.ranking .ranking_clop ul.ranking_1st li p            { margin: 0 0 .5em 0; font-size: 7vw; text-align: center; }
article.ranking .ranking_clop ul.ranking_1st li.iteim1       { order: 1; width: 100%; text-align: center; }
article.ranking .ranking_clop ul.ranking_1st li.iteim2       { order: 2; width: 80%; text-align: center; }
article.ranking .ranking_clop ul.ranking_1st li.iteim3       { order: 3; width: 80%; text-align: center; }
article.ranking .ranking_clop ul.ranking_1st li.iteim2 p     { font-size: 5vw; }
article.ranking .ranking_clop ul.ranking_1st li.iteim3 p     { font-size: 5vw; }
article.ranking .ranking_clop ul.ranking_1st li.iteim1 p img { width: 25vw; }
article.ranking .ranking_clop ul.ranking_1st li.iteim2 p img { width: 15vw; }
article.ranking .ranking_clop ul.ranking_1st li.iteim3 p img { width: 15vw; }
}

article.ranking .ranking_clop ul.ranking_2nd        { display: flex; justify-content: space-between; }
article.ranking .ranking_clop ul.ranking_2nd li     { width: calc(25% - 15px);  }
article.ranking .ranking_clop ul.ranking_2nd li p   { margin: 0 0; color: #000; font-size: 24px; font-weight: bold; font-family: "YuMinchoEXB"; }
article.ranking .ranking_clop ul.ranking_2nd li img { width: 100%; }
@media only screen and (max-width: 768px){
article.ranking .ranking_clop ul.ranking_2nd      { display: flex; flex-wrap: wrap; justify-content: space-between; }
article.ranking .ranking_clop ul.ranking_2nd li   { width: 48%; margin-bottom: 3vw; }
article.ranking .ranking_clop ul.ranking_2nd li p { font-size: 4.5vw; }
}

article.kazarigiri_web                    { margin: 40px auto; max-width: 980px; }
article.kazarigiri_web .visual_web        { width: 100%; margin-bottom: 20px; }
article.kazarigiri_web .visual_web img    { width: 100%; }
article.kazarigiri_web .visual_web p.capt { margin-top: .5em; font-size: 85%; }
article.kazarigiri_web .copy_web          { width: 100%; padding-left: ; }
article.kazarigiri_web .copy_web p.read   { font-size: 16px; position: relative; }
@media only screen and (max-width: 768px){
article.kazarigiri_web                    { margin: 6vw auto; padding: 0 3vw; max-width: auto; }
article.kazarigiri_web .visual_web        { margin-bottom: 4vw; }
article.kazarigiri_web .visual_web p.capt { margin-top: .5em; font-size: 85%; }
article.kazarigiri_web .copy_web p.read   { font-size: 1em; }
}

div.db_link   { margin: 1em auto; text-align: center; }
div.db_link a { margin: 1em auto; display: inline-block; min-width: 8em; padding: .5em; font-weight: bold; font-size: 1.125em; text-decoration: none; color: #fff; background: #fe0000; border-radius: .25em; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #fe0000; }
div.db_link a:after { content: ' ＞'; color: #fff; }

article.howto ul               { margin: 0 auto; width: 980px; }
article.howto ul li            { margin-bottom: 40px; display: flex; min-height: 250px; }
article.howto ul li div        { width: 50%; position: relative; }
article.howto ul li div img    { position: absolute; right: 20px; }
article.howto ul li div p      { position: relative; margin: 0 0 .5em calc(5em + 20px); }
article.howto ul li div p span { color: #f44b83; font-weight: bold; font-size: 18px; position: absolute; left: -5em; }
@media only screen and (max-width: 768px){
article.howto ul               { padding: 0 3vw; width: 100%; }
article.howto ul li            { margin-bottom: 5vw; display: flex; flex-direction: column; min-height: auto; }
article.howto ul li div        { width: 100%; }
article.howto ul li div img    { position: relative; right: 0; width: 100%; padding-bottom: .5em; }
article.howto ul li div p      { margin: .25em 0 0 5em; font-size: 1.2em; }
article.howto ul li div p span { font-size: 1em; display: inline-block; top: 0%; }
}

#topcontrol { width: 3em; height: 3em; }
#topcontrol img { width: 100%; }