@charset "utf-8";

/* ====================================================================================================
   基本設定
   ---------------------------------------------------------------------------------------------------- */

#baneikinen #main                  { background:#fff0ff; }


/* ====================================================================================================
   トピックパス
   ---------------------------------------------------------------------------------------------------- */
   
#baneikinen #topic_pass            { background:#fff0ff; }
#baneikinen #topic_pass li         { border-bottom:1px solid #e2d3ff; }
#baneikinen.detail #topic_pass li  { border-bottom:none; }


/* ====================================================================================================
   メインビジュアル
   ---------------------------------------------------------------------------------------------------- */

/* スライダー */ 
#baneikinen #bk_mv                 { position:relative; }
#baneikinen #bk_mv::before         { content:""; width:100%; height:0; padding-bottom:54.5%; display:block; }
#baneikinen #bk_mv h1              { position:absolute; top:0; left:0; z-index:4; width:100%; height:100%; }
#baneikinen #bk_mv .slider         { position:absolute; top:0; left:0; z-index:2; width:100%; height:100%; background:#6a0031; }
#baneikinen #bk_mv .slick-dots     { bottom:20px; }
#baneikinen #bk_mv .slick-next     { right:10px; }
#baneikinen #bk_mv .slick-prev     { left:10px; }

/* カウント */
#baneikinen #bk_count              { position:absolute; bottom:-15px; left:50px; z-index:2; width:220px; height:auto; }
#baneikinen #bk_count .thumb       { width:200px; height:200px; border-radius:50%; background:#fff001; border:15px solid #fff001; margin:10px; box-shadow:2px 2px 5px rgba(0,0,0,0.5); }
#baneikinen #bk_count .thumb:hover { transform: scale(1.1); }
#baneikinen #bk_count h1           { position:absolute; top:50%; left:50%; z-index:2; width:220px; height:220px; margin:-110px 0 0 -110px; animation:count_h1 10s infinite linear; pointer-events:none; }
#baneikinen #bk_count h1 img       { width:220px; height:220px; }
@keyframes count_h1                { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg); }}


/* ====================================================================================================
   グローバルナビ
   ---------------------------------------------------------------------------------------------------- */
   
#baneikinen #bk_gnav               { position:relative; padding:50px 25px 55px 25px; background:#e2d3ff; background:linear-gradient(to top right, #e2d3ff, #ffa2b3); }
#baneikinen #bk_gnav::before       { content:""; position:absolute; bottom:-1px; left:0; width:100%; height:12px; background:url(../../img/banei_kinen/2020/bg_bottom.svg) repeat-x center bottom; background-size:24px 12px; display:block; }
#baneikinen #bk_gnav a             { width:calc(33.33% - 30px); height:140px; margin:0 15px; position:relative; background:url(#) no-repeat center center #111; border:2px solid #6a0031; box-shadow:1px 1px 4px rgba(0,0,0,0.3); background-size:cover; }
#baneikinen #bk_gnav a:hover       { border-color:#fff001; }
#baneikinen #bk_gnav a img         { display:none; }
#baneikinen #bk_gnav a .cat        { position:absolute; top:-15px; left:-2px; z-index:4; width:100px; height:21px; font-size:16px; line-height:20px; text-align:center; color:#6a0031; font-weight:bold; background:#fff001; padding-top:1px; display:block; box-shadow:1px 2px 3px rgba(0,0,0,0.3); }
#baneikinen #bk_gnav a .cat.race   { background:#6a0031; color:#fff; }
#baneikinen #bk_gnav a .ttl        { position:absolute; top:  0px; left:0; z-index:2; width:100% ; height:100%; font-size:26px; line-height:1.15;  text-align:center; color:#fff; font-weight:bold; background:rgba(0,0,0,0.6); padding:10px 5px 5px 5px; display:block; display:flex; align-items:center; justify-content:center; text-align:center; text-shadow:1px 1px 0px #000,-1px 1px 0px #000,1px -1px 0px #000,-1px -1px 0px #000,1px 0px 0px #000,0px 1px 0px #000,-1px 0px 0px #000,0px -1px 0px #000; display:none; }

#baneikinen #bk_gnav a:nth-child(1){ background-image:url(../../img/banei_kinen/2020/gnav_01.jpg); }

#baneikinen #bk_gnav a:nth-child(2){ background-image:url(../../img/banei_kinen/2020/gnav_02.jpg); }
#baneikinen #bk_gnav a:nth-child(3){ background-image:url(../../img/banei_kinen/2020/gnav_03.jpg); }


/* ====================================================================================================
   記事リスト
   ---------------------------------------------------------------------------------------------------- */

/* タイトル */
#baneikinen .pickup .ttl           { color:#080040; }
#baneikinen .pickup .ttl span a    { color:#080040; font-weight:bold; text-decoration:underline; }
#baneikinen .pickup .ttl::before   { background:#080040; }
#baneikinen .ttl,
#baneikinen .ttl span              { color:#6a0031; }
#baneikinen .ttl span a            { color:#6a0031; font-weight:bold; text-decoration:underline; }
#baneikinen .ttl::before           { background:#6a0031; }

/* ピックアップ／ノーマル */
#baneikinen .atls                  { margin:0px -2% 25px -2% !important; }
#baneikinen .atls article          { position:relative; width:29.33%; margin:1% 2% 4% 2% !important; background: #fff; padding:15px 15px 25px 15px; box-shadow:15px 15px 0px #ffc0d0; box-sizing:border-box; }
#baneikinen .atls article img      { margin-bottom:4px; }
#baneikinen .pickup .atls article  { box-shadow:15px 15px 0px #e2d3ff; }
#baneikinen .pickup .atls article:nth-child(4)  { display:none; }
#baneikinen .normal                { padding-bottom:40px; }


/* ====================================================================================================
   ギャラリー
   ---------------------------------------------------------------------------------------------------- */
   
#baneikinen #box_gallery                       { position:relative; padding:60px 0; background:#7ee4c8; background:linear-gradient(to top right, #7ee4c8, #7ee4e3); }
#baneikinen #box_gallery::before               { content:""; position:absolute; top:-1px; left:0; width:100%; height:12px; background:url(../../img/banei_kinen/2020/bg_top.svg) repeat-x center top; background-size:24px 12px; display:block; }
#baneikinen #box_gallery h1.ttl_l              { width:100%; margin:-90px auto 50px auto; font-size:18px; font-weight:bold; letter-spacing:0.2em; text-align:center; color:#080040; text-shadow:2px 2px 0px #7ee4e3,-2px 2px 0px #7ee4e3,2px -2px 0px #7ee4e3,-2px -2px 0px #7ee4e3,2px 0px 0px #7ee4e3,0px 2px 0px #7ee4e3,-2px 0px 0px #7ee4e3,0px -2px 0px #7ee4e3; }
#baneikinen #box_gallery h1.ttl_l span         { position:relative; display:inline-block; }
#baneikinen #box_gallery h1.ttl_l span::before { content:""; position:absolute; top:50%; right:-30px; z-index:0; width:2px; height:80px; background:#000; margin-top:-40px; transform:rotate( 20deg); box-shadow:2px 2px 0px #7ee4e3,-2px 2px 0px #7ee4e3,2px -2px 0px #7ee4e3,-2px -2px 0px #7ee4e3,2px 0px 0px #7ee4e3,0px 2px 0px #7ee4e3,-2px 0px 0px #7ee4e3,0px -2px 0px #7ee4e3; }
#baneikinen #box_gallery h1.ttl_l span::after  { content:""; position:absolute; top:50%; left: -30px; z-index:0; width:2px; height:80px; background:#000; margin-top:-40px; transform:rotate(-20deg); box-shadow:2px 2px 0px #7ee4e3,-2px 2px 0px #7ee4e3,2px -2px 0px #7ee4e3,-2px -2px 0px #7ee4e3,2px 0px 0px #7ee4e3,0px 2px 0px #7ee4e3,-2px 0px 0px #7ee4e3,0px -2px 0px #7ee4e3; }
#baneikinen #box_gallery h1.ttl_l strong       { font-size:50px; letter-spacing:0.05em; font-family: 'Denk One', sans-serif; margin:0 0 5px 0; }
#baneikinen #box_gallery .photolist            { margin:0 auto; width:calc(100% - 100px); column-count:3; column-gap:0; }
#baneikinen #box_gallery .photolist .grid      { padding:10px; -webkit-column-break-inside:avoid; page-break-inside:avoid; break-inside:avoid; }
#baneikinen #box_gallery .photolist .grid img  { width:100%;}
#baneikinen #box_gallery .photolist .grid h3   { width:100%; padding:10px; font-size:110%; line-height:1.5; }
#baneikinen #box_gallery .photolist .grid h3 a { padding:0 0 0 24px; background:url(../../img/common/bk/next.svg) no-repeat left center; background-size:14px; color:#333; text-decoration:underline; }


/* ====================================================================================================
   カウントダウン
   ---------------------------------------------------------------------------------------------------- */
   
#baneikinen #box_countdown                       { position:relative; padding:60px 0; background:#fff001; }
#baneikinen #box_countdown::before               { content:""; position:absolute; top:-1px; left:0; width:100%; height:12px; background:url(../../img/banei_kinen/2020/bg_top.svg) repeat-x center top; background-size:24px 12px; display:block; }
#baneikinen #box_countdown h1.ttl_l              { width:100%; margin:-90px auto 50px auto; font-size:18px; font-weight:bold; letter-spacing:0.2em; text-align:center; color:#080040; text-shadow:2px 2px 0px #7ee4e3,-2px 2px 0px #7ee4e3,2px -2px 0px #7ee4e3,-2px -2px 0px #7ee4e3,2px 0px 0px #7ee4e3,0px 2px 0px #7ee4e3,-2px 0px 0px #7ee4e3,0px -2px 0px #7ee4e3; }
#baneikinen #box_countdown h1.ttl_l span         { position:relative; }
#baneikinen #box_countdown h1.ttl_l span::before { content:""; position:absolute; top:50%; right:-30px; z-index:0; width:2px; height:80px; background:#000; margin-top:-40px; transform:rotate( 20deg); box-shadow:2px 2px 0px #7ee4e3,-2px 2px 0px #7ee4e3,2px -2px 0px #7ee4e3,-2px -2px 0px #7ee4e3,2px 0px 0px #7ee4e3,0px 2px 0px #7ee4e3,-2px 0px 0px #7ee4e3,0px -2px 0px #7ee4e3; }
#baneikinen #box_countdown h1.ttl_l span::after  { content:""; position:absolute; top:50%; left: -30px; z-index:0; width:2px; height:80px; background:#000; margin-top:-40px; transform:rotate(-20deg); box-shadow:2px 2px 0px #7ee4e3,-2px 2px 0px #7ee4e3,2px -2px 0px #7ee4e3,-2px -2px 0px #7ee4e3,2px 0px 0px #7ee4e3,0px 2px 0px #7ee4e3,-2px 0px 0px #7ee4e3,0px -2px 0px #7ee4e3; }
#baneikinen #box_countdown h1.ttl_l strong       { font-size:50px; letter-spacing:0.05em; font-family: 'Denk One', sans-serif; margin:0 0 5px 0; }
#baneikinen #box_countdown .photolist            { margin:0 auto; width:calc(100% - 100px); column-count:3; column-gap:0; }
#baneikinen #box_countdown .photolist .grid      { padding:10px; -webkit-column-break-inside:avoid; page-break-inside:avoid; break-inside:avoid; }
#baneikinen #box_countdown .photolist .grid img  { width:100%;}
#baneikinen #box_countdown .photolist .grid h3   { width:100%; padding:10px; font-size:110%; line-height:1.5; }
#baneikinen #box_countdown .photolist .grid h3 a { padding:0 0 0 24px; background:url(../../img/common/bk/next.svg) no-repeat left center; background-size:14px; color:#333; text-decoration:underline; }


/* ====================================================================================================
   ユーザーボイス
   ---------------------------------------------------------------------------------------------------- */
   
#baneikinen #box_voice                         { position:relative; padding:60px 0; background:#8dcaef; }
#baneikinen #box_voice h1.ttl_l                { width:100%; margin:-90px auto 50px auto; font-size:18px; font-weight:bold; letter-spacing:0.2em; text-align:center; color:#080040; text-shadow:2px 2px 0px #8dcaef,-2px 2px 0px #8dcaef,2px -2px 0px #8dcaef,-2px -2px 0px #8dcaef,2px 0px 0px #8dcaef,0px 2px 0px #8dcaef,-2px 0px 0px #8dcaef,0px -2px 0px #8dcaef; }
#baneikinen #box_voice h1.ttl_l span           { position:relative; width:300px; display:block; margin:0 auto; }
#baneikinen #box_voice h1.ttl_l span::before   { content:""; position:absolute; top:50%; right:-30px; z-index:0; width:2px; height:80px; background:#000; margin-top:-40px; transform:rotate( 20deg); box-shadow:2px 2px 0px #8dcaef,-2px 2px 0px #8dcaef,2px -2px 0px #8dcaef,-2px -2px 0px #8dcaef,2px 0px 0px #8dcaef,0px 2px 0px #8dcaef,-2px 0px 0px #8dcaef,0px -2px 0px #8dcaef; }
#baneikinen #box_voice h1.ttl_l span::after    { content:""; position:absolute; top:50%; left: -30px; z-index:0; width:2px; height:80px; background:#000; margin-top:-40px; transform:rotate(-20deg); box-shadow:2px 2px 0px #8dcaef,-2px 2px 0px #8dcaef,2px -2px 0px #8dcaef,-2px -2px 0px #8dcaef,2px 0px 0px #8dcaef,0px 2px 0px #8dcaef,-2px 0px 0px #8dcaef,0px -2px 0px #8dcaef; }
#baneikinen #box_voice h1.ttl_l strong         { font-size:50px; letter-spacing:0.05em; font-family: 'Denk One', sans-serif; margin:0 0 5px 0; }
#baneikinen #box_voice h2.ttl                  { color:#080040; width:80%; max-width:640px; margin:0 auto 10px auto;}
#baneikinen #baneikinen #box_voice h2.ttl::before          { background:#080040; }
#baneikinen #box_voice p.read                  { width:80%; max-width:640px; margin:0 auto 35px auto; font-size:16px; font-weight:bold; color:#080040; }
#baneikinen #box_voice .btns                   { width:80%; max-width:640px; }
#baneikinen #box_voice .widget                 { width:80%; max-width:640px; margin:0 auto 35px auto; }


/* ====================================================================================================
   シェアボタン
   ---------------------------------------------------------------------------------------------------- */
   
#baneikinen #sns_share                         { background:#fff0ff; padding:40px; overflow:hidden; }


/* ====================================================================================================
   詳細ページ
   ---------------------------------------------------------------------------------------------------- */
   
#baneikinen.detail #bk_pghd                   { background:#fff0ff; padding-top:40px; }

/* ばんば盛り */
#baneikinen.detail .boxs .box                 { background:#fff; margin:0 4% 4% 0; padding-bottom:25px; border-radius:8px; }
#baneikinen.detail .boxs .box h2              { font-size:20px; line-height:1.2; font-weight:bold; color:#ffffff; width:calc(100% + 25px); padding:10px 10px 10px 25px; margin:0 0 12px -25px; background:#be3e32; background:linear-gradient(to right, #be3e32, #d08935); text-shadow:1px 1px 4px rgba(0,0,0,0.5); }
#baneikinen.detail .boxs .box h3              { font-size:18px; line-height:1.2; font-weight:bold; color:#be3e32; padding: 5px 10px; margin-bottom:15px; }
#baneikinen.detail .boxs .box .img_center     { position:relative; margin:0px auto 25px auto; }
#baneikinen.detail .boxs .box .img_center img { margin:0; border-radius:5px; }
#baneikinen.detail .boxs .box .img_center p.caption { position:absolute; bottom:0; left:0; float:left; padding:10px; font-size:15px !important; font-weight:bold; margin:0 !important; background:rgba(0,0,0,.5); color:#fff !important; }
#baneikinen.detail .boxs .box p a             { font-weight:bold; text-decoration:underline; color:#099; }


/* ====================================================================================================
   タブレット対応
   ---------------------------------------------------------------------------------------------------- */

@media screen and (max-width:1200px){
/* カウント */
#baneikinen #bk_count              { bottom:-15px; left:30px; width:170px; }
#baneikinen #bk_count .thumb       { width:150px; height:150px; border:12px solid #fff001; }
#baneikinen #bk_count h1           { width:160px; height:160px; margin:-80px 0 0 -80px; }
#baneikinen #bk_count h1 img       { width:160px; height:160px; }

/* グロナビ */
#baneikinen #bk_gnav a             { height:100px; }
#baneikinen #bk_gnav a .ttl        { font-size:18px; }
}

@media screen and (max-width:1000px){
/* グロナビ */
#baneikinen #bk_gnav               { padding:40px 15px 45px 15px; }
#baneikinen #bk_gnav a             { width:calc(33.33% - 20px); margin:0 10px; }
#baneikinen #bk_gnav a .cat        { width:80px; height:18px; font-size:13px; line-height:17px; }

/* トピックス記事 */
#baneikinen .atls article          { width:46%; box-shadow:10px 10px 0px #ffc0d0; }
#baneikinen .pickup .atls article  { box-shadow:10px 10px 0px #e2d3ff; }
#baneikinen .pickup .atls article:nth-child(4)  { display:block; }

#baneikinen.detail .boxs .box { width:100%; margin:0 0 15px 0; }
}

@media screen and (max-width:760px){
/* トピックス記事 */
#baneikinen .atls article                      { box-shadow:5px 5px 0px #ffc0d0; }
#baneikinen .pickup .atls article              { box-shadow:5px 5px 0px #e2d3ff; }
#baneikinen .pickup .atls article:nth-child(4) { display:block; }

/* カウントダウン */
#baneikinen #box_countdown                     { padding:30px 0 60px 0; }
#baneikinen #box_countdown .photolist          { width:calc(100% - 30px); column-count:2; column-gap:0; }
#baneikinen #box_countdown .photolist .grid    { padding:5px; }
#baneikinen #box_countdown .photolist .grid h3 { padding:5px; }

/* ギャラリー */
#baneikinen #box_gallery h1.ttl_l              { margin:-50px auto 30px auto; }
#baneikinen #box_gallery h1.ttl_l strong       { font-size:30px; }
#baneikinen #box_gallery h1.ttl_l span::before { right:-20px; height:48px; margin-top:-28px; }
#baneikinen #box_gallery h1.ttl_l span::after  { left: -26px; height:48px; margin-top:-28px; }
#baneikinen #box_gallery                       { padding:30px 0 60px 0; }
#baneikinen #box_gallery .photolist            { width:calc(100% - 30px); column-count:2; column-gap:0; }
#baneikinen #box_gallery .photolist .grid      { padding:5px; }
#baneikinen #box_gallery .photolist .grid h3   { padding:5px;}

/* みんなの声 */
#baneikinen #box_voice h1.ttl_l                { margin:-80px auto 30px auto; }
#baneikinen #box_voice h1.ttl_l span           { width:200px; display:block; margin:0 auto; }
#baneikinen #box_voice h1.ttl_l strong         { font-size:30px; }
#baneikinen #box_voice h1.ttl_l span::before   { right:-20px; height:48px; margin-top:-28px; }
#baneikinen #box_voice h1.ttl_l span::after    { left: -26px; height:48px; margin-top:-28px; }
#baneikinen #box_voice .btns                   { width:80%; }

.btns                                          { width:calc(100% - 55px); display:block; }
.btns a.btn                                    { width:100%; margin-bottom:10px; }

@media screen and (max-width:600px){
/* カウント */
#baneikinen #bk_count              { bottom:-15px; left:30px; width:110px; }
#baneikinen #bk_count .thumb       { width:100px; height:100px; margin:5px; border:6px solid #fff001; }
#baneikinen #bk_count h1           { width:110px; height:110px; margin:-55px 0 0 -55px; }
#baneikinen #bk_count h1 img       { width:110px; height:110px; }

/* グロナビ */
#baneikinen #bk_gnav a img         { padding:30px 0; }
#baneikinen #bk_gnav a .ttl        { font-size:14px; }
#baneikinen #bk_gnav a .ttl br     { display:none; }
}