@charset "UTF-8";

/*-------------------------
__top_style
-------------------------*/
#main .topics{display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:calc((100% - 20px) / 2);}
#main .topics + .topics{margin-left:20px;}
#main .topics .sub_ttl{font-size:2em;font-weight:700;line-height:1.4;margin:0 0 8px;}
#main .topics .sub_ttl::before{content:"";display:inline-block;width:15px;height:20px;vertical-align:top;margin:0 10px 0 0;padding:6px 0 0;background:url(/wp/wp-content/themes/super/images/ico_subttl@2x.png)no-repeat center center / contain;}
#main .topics .topics_inner{flex:1 0 auto;position:relative;}
#main .topics .topics_inner::before,
#main .topics .topics_inner::after{content:"";display:block;width:100%;height:3px;background:url(/wp/wp-content/themes/super/images/drop_shadow@2x.png)no-repeat center center / 100% 100%;position:absolute;right:0;left:0;}
#main .topics .topics_inner::before{top:0;}
#main .topics .topics_inner::after{bottom:0;}
#main .topics .topics_inner .box{font-size:1.3em;line-height:1.5;padding:12px 0;}
#main .topics .topics_inner .box + .box{background-image:linear-gradient(to right, #b3b3b3, #b3b3b3 1px, transparent 1px, transparent 3px);background-size:3px 1px;background-position:left top;background-repeat:repeat-x;}
#main .topics .topics_inner .box dt .date{display:inline-block;line-height:1;vertical-align:middle;margin:0 10px 0 0;}
#main .topics .topics_inner .box dt .ic{display:inline-block;font-size:90%;line-height:1;vertical-align:middle;text-decoration:none;margin:0 5px 0 0;padding:3px 5px;box-sizing:border-box;border-radius:10px;color:#f60b38;border:1px solid #f60b38;}
#main .topics .topics_inner .box dt .ic.new{color:#FFF;background-color:#f60b38;}
#main .topics .topics_inner .box dd{padding:8px 0 0;}
#main .topics .topics_inner .box dd a{color:#333;}
#main .topics .topics_inner .not_found{font-size:1.3em;line-height:1.5;text-align:center;margin:40px 0;}
#main .topics .btn_wrap{height:78px;margin:20px 0 0;}
#main .topics .btn_wrap .btn a{width:210px;text-align:center;margin:auto;padding:10px 0;}
#main .topics .btn_wrap .btn + .btn{margin-top:10px;}

#main .sns_box{width:calc((100% - 20px) / 2);max-width:500px;margin:30px 0 0;}
#main .sns_box + .sns_box{margin-left:20px;}
#main .sns_box .facebook-wrapper{width:100%;height:430px;}
#main .sns_box .facebook-wrapper > .fb-page,
#main .sns_box .facebook-wrapper > .fb-page > span,
#main .sns_box .facebook-wrapper iframe{width:100%!important;}

#banner_wrap{padding:20px 20px 40px;background-color:#dedede;position:relative;}
#banner_wrap::before{content:"";display:block;width:100%;height:3px;background:url(/wp/wp-content/themes/super/images/drop_shadow@2x.png)no-repeat center center / 100% 100%;position:absolute;top:0;right:0;left:0;}
#banner_wrap ul{display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:960px;margin:auto;}
#banner_wrap ul li{width:calc((100% - 60px)/4);margin:20px 20px 0 0;}
#banner_wrap ul li:nth-child(4n){margin-right:0;}
#banner_wrap ul li img{width:100%;}

@media screen and (min-width:768px) {
  #main .topics .topics_inner .box dt a{transition:color 0.3s,background-color 0.3s;}
  #main .topics .topics_inner .box dt a:hover{color:#FFF;background-color:#f60b38;}
  #main .topics .topics_inner .box dd a{transition:opacity 0.3s;}
  #main .topics .topics_inner .box dd a:hover{opacity:0.5;}
  #banner_wrap ul li a{transition:opacity 0.3s;}
  #banner_wrap ul li a:hover{opacity:0.5;}
}

@media screen and (max-width:980px) {
  #main .topics .sub_ttl{font-size:1.9em;}
  #banner_wrap{margin:30px 0 0;padding:20px 20px 30px;}
  #banner_wrap ul li{width:calc((100% - 30px)/4);margin:10px 10px 0 0;}
}

@media screen and (max-width:767px) {
  #main .topics{display:block;width:100%;}
  #main .topics + .topics{margin:20px 0 0;}
  #main .topics .topics_inner .topics_scroll{height:300px;overflow-y:auto;}
  #main .topics .topics_inner .box{padding:10px 0;}
  #main .topics .topics_inner .box dd{padding:6px 0 0;}
  #main .topics .btn_wrap{height:auto;margin:15px 0 0;}
  #main .topics .btn_wrap .btn + .btn{margin-top:8px;}
  #main .topics .btn_wrap .btn a{padding:8px 0;}

  #main .sns_box{width:100%;margin:20px auto 0;}
  #main .sns_box + .sns_box{margin:20px auto 0;}

  #banner_wrap{padding:10px 10px 20px;}
  #banner_wrap ul li{width:calc((100% - 10px)/2);margin:10px 10px 0 0;}
  #banner_wrap ul li:nth-child(2n){margin-right:0;}
}