@charset "UTF-8";

/* ********************************
base
******************************** */
*{
    font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    word-break: normal !important;
    word-wrap: break-word !important;
}
html{
    font-size: 14px;
}
body{
    line-height: 1.5;
    min-width: 1000px;
}
.wrap{
    overflow: hidden;
}
body.movie{
    background-color: #2e2d2d;
}
a{
    text-decoration: none;
    color: inherit;
}
ul{
    list-style: none;
}
h1{
    font-size: inherit;
    font-weight: normal;
}
input:not([type="checkbox"]),
input:not([type="radio"]),
select{
	padding: 3px 5px;
}

/* ********************************
header
******************************** */
#header{
    width: 100%;
    background-color: #ffffff;
}
#header.headerVer2{
    border-bottom: 1px solid #0a4b9b;
}
.headerInner{
    width: 980px;
    margin: 0 auto;
    display: table;
    background-color: #ffffff;
    padding-bottom: 15px;
    table-layout: fixed;
    padding: 10px 0 5px;
}
#header.headerVer2 .headerInner{
    padding: 15px 0;
}
.headerLeft,.headerCenter,.headerRight{
    display: table-cell;
    *display: inline;
    *zoom: 1;
}
.headerLeft,.headerRight{
    vertical-align: bottom;
    *vertical-align: middle;
}
#header.headerVer2 .headerLeft,#header.headerVer2 .headerRight{
    vertical-align: middle;
}
.headerLeftLogo{
    font-size: 0;
    line-height: 0;
}
.logo{
    line-height: 0;
    font-size: 0;
    margin-bottom: 10px;
}
.headerCenter{
    vertical-align: middle;
    text-align: center;
    *width: 660px;
}
.headerRight{
    text-align: right;
    *width: 195px;
    *vertical-align: middle;
}
.headerLeftInner{
    display: table;
    /* width: 170px; */
}

/* 20200722追加 */
.headerKoudoku {
    line-height: 0;
    margin-bottom: 2px;
}
.headerKoudokuText {
    font-size: 12px;
    color: #00418f;
    line-height: 1;
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #0a4b9b;
    padding: 3px 6px;
    border-radius: 3px;
}
.headerKoudokuText :hover{
    background-color: #0a4b9b;
    color: #ffffff;
}

.headerWeather{
    display: table-cell;
    padding-right: 10px;
    vertical-align: middle;
    *display: inline;
    *zoom: 1;
    *text-align: center;
}
.headerWeatherIcon{
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    line-height: 0;
}
.headerWeatherLeftIconBlock{
    width: 50px;
    display: table-cell;
    vertical-align: bottom;
}
.headerWeatherLeftIcon{
    vertical-align: bottom;
    width: 35px;
}
.headerWeatherIcon img{
    max-height: 28px;
}
.headerWeatherSelectBlock{
    text-align: center;
    vertical-align: middle;
    display: inline-block;
}
.headerWeatherSelectTitle{
    font-weight: bold;
    font-size: 14px;
}
.headerWeatherSelectLink{
    font-size: 11px;
    line-height: 1;
}
.headerWeatherSelect{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    width: 100%;
    padding: 0;
    font-size: 14px;
    background: url(//static.hokkaido-np.co.jp/image/builtin/arrow_bottom_blue.png) 100% 50% no-repeat;
    -webkit-background-size: 15%;
    background-size: 15%;
    padding-right: 18px;
}
.headerFortune{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    border-left: 1px solid #e6e6e6;
    line-height: 1;
    font-size: 14px;
    font-weight: bold;
    *display: inline;
    *zoom: 1;
}

.headerViewer {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding-left: 5px;
    line-height: 1;
    color: #fff;
    font-weight: bold;
    padding: 0;
}
.headerViewer a{
    display: inline-block;
    background:#00418E;
    padding: 5px;
}
.headerViewer img{
    vertical-align: middle;
    padding: 0 5px 0 0;
}
.headerViewer a:hover{
    opacity: 0.7;
}
/* ▼紙面を見る・おくやみ */
.headerViewerExt {
  position: relative;
  display: table-cell;
  white-space: nowrap;
}
.headerViewerExtInner {
  background: #00418E;
  position: absolute;
  bottom: 0;
  left: 15px;
  padding: 2px 6px 0 42px;
}
.headerViewerExtInner > img {
  width: 31px;
  height: 24px;
  position: absolute;
  top: 50%;
  left: 6px;
  margin-top: -12px;
}
.headerViewerExtInner a {
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  display: block;
  text-align: center;
  border-radius: 1px;
  margin: 4px 0;
  padding: 2px 0;
  transition: all .3s ease;
}
.headerViewerExtInner a:hover {
  background: #fff;
  color: #00418E;
}
.headerViewerExtInner > ul > li:first-child {
  border-bottom: solid 1px #fff;
}
/* ▲紙面を見る・おくやみ */
.headerLogin{
    line-height: 0;
}
.headerLogin img{
    display: inline-block;
    vertical-align: middle;
}
.headerLoginButton{
    display: inline-block;
    vertical-align: middle;
    margin-left: 3px;
}
.headerLoginButton #js-loginBtn #js-hoverTextOff{
    display: inline;
}
.headerLoginButton #js-loginBtn:hover #js-hoverTextOff{
    display: none;
}
.headerLoginButton #js-loginBtn #js-hoverTextOn{
    display: none;
}
.headerLoginButton #js-loginBtn:hover #js-hoverTextOn{
    display: inline;
}
#header.headerVer2 .headerLoginButton .button{
    padding: 10px 15px;
    font-size: 18px;
    line-height: 1;
}
.headerLoginButton .button{
    transition: none;
}
.headerLoginButton .button-white,.headerLoginButton .button-blue{
    padding: 3px 8px;
    font-size: 12px;
    font-weight: bold;
    border-width: 1px;
    line-height: 1;
}
.headerLoginText{
    font-size: 12px;
    color: #00418f;
    line-height: 1;
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
}
#header.headerVer2 .headerLoginText{
    font-size: 18px;
    font-weight: normal;
}
.currentRegion{
    margin-left: 5px;
    font-weight: bold;
}
.regionSetting{
    font-size: 11px;
    margin-left: 5px;
}
.headerFunction{
    display: table;
    width: 100%;
    margin-top: 10px;
}
.search{
    display: table-cell;
    vertical-align: middle;
    width: 155px;
    letter-spacing: -0.4em;
    *display: inline;
}
.searchInputText{
    width: 150px;
    height: 26px;
    border: 1px solid #d9d9d9;
    border-right: none;
    font-size: 14px;
    padding: 2px 3px;
    display: inline-block;
    vertical-align: top;
    letter-spacing: normal;
}
.searchButton{
    display: inline-block;
    vertical-align: top;
    border: none;
    background-color: transparent;
    color: #ffffff;
    font-size: 14px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    letter-spacing: normal;
    line-height: 0;
    font-size: 0;
}
.switchFontSizeBlock{
    display: table-cell;
    vertical-align: middle;
    width: 70px;
    *display: inline;
    *zoom: 1;
    *width: 90px;
}
.switchFontSizeHead{
    display: inline-block;
    vertical-align: middle;
    *display: inline;
    *zoom: 1;
}
.switchFontSize{
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    line-height: 1;
    width: 25px;
    height: 25px;
    background-color: #e5e5e5;
    color: #0a4b9b;
    border-radius: 3px;
    cursor: pointer;
    *display: inline;
    *zoom: 1;
}
.switchFontSize.isActive{
    background-color: #0a4b9b;
    color: #ffffff;
}
.switchFontSizeText{
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    line-height: 25px;
    font-weight: bold;
}
.switchFontSizeSmall{
    font-size: 12px;
}
.switchFontSizeMedium{
    font-size: 14px;
}
.switchFontSizeLarge{
    font-size: 16px;
}

/* ********************************
nav
******************************** */
#nav{
    background-color: #ffffff;
}
.mainNavWrapper{
    background-color: #ebf2fa;
}
.mainNavTable{
    display: table;
    width: 980px;
    margin: 0 auto;
}
.mainNav{
    display: table-cell;
    margin: 0 auto;
    letter-spacing: -0.4em;
    *display: inline;
}
.mainNav.mainNavVer2{
    padding: 20px 0;
}
.mainNav.mainNav-right{
    text-align: right;
}
.mainNavItem{
    letter-spacing: normal;
    /* width: 140px; */
    display: inline-block;
    vertical-align: middle;
    /* height: 30px; */
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    *display: inline;
}
.mainNav.mainNavVer2 .mainNavItem + .mainNavItem{
    border-left: 1px solid #0a4b9b;
}
.mainNavItem a{
    display: inline-block;
    padding: 6px 12px;
    width: 100%;
    height: 100%;
    color: #000000;
    text-decoration: none;
    transition: all 0.4s;
    font-weight: bold;
    *display: inline;
    *width: auto;
    *zoom: 1;
    *padding: 8px 10px;
}
.mainNav.mainNavVer2 .mainNavItem a{
    color: #0a4b9b;
    padding: 0 15px;
    font-size: 16px;
    line-height: 1;
    border-bottom: none;
}
.mainNav.mainNavVer2 .mainNavItem:first-of-type a{
    padding-left: 0;
}
.mainNav.mainNav-right .mainNavItem a{
    border-right: 1px solid #ffffff;
}
.mainNav.mainNav-right .mainNavItem:first-of-type a{
    border-left: 1px solid #ffffff;
}
.mainNavItem a:hover{
    color: #ffffff;
    background-color: #00418f;
}
.mainNav.mainNavVer2 .mainNavItem a:hover{
    background-color: transparent;
    border-bottom: none;
    text-decoration: none;
    color: #3b91fb;
}
.mainNavItem.isActive{
}
.mainNavItem.isActive a{
    color: #ffffff;
    background-color: #00418f;
}
.subNavWrapper{
    background-color: #00418f;
}
.subNav{
    width: 980px;
    margin: 0 auto;
    padding: 4px 0;
    letter-spacing: -0.4em;
}
.subNavItem{
    display: inline-block;
    letter-spacing: normal;
    color: #ffffff;
    border-right: 1px solid #114d96;
    font-size: 14px;
    text-align: center;
    padding: 0px 5px;
    *display: inline;
}
.subNavItem.subNavItem-right{
    float: right;
    *float: none;
}
.subNavItem a{
    padding: 2px 5px;
    border-radius: 3px;
    color: #ffffff;
    *display: inline;
}
.subNav .subNavItem:first-of-type{
    border-left: none;
    padding-left: 0;
}
.subNav .subNavItem:last-of-type{
    padding-right: 0;
    border-right: none;
}
.subNavItem a{
    transition: all .3s;
}
.subNavItem a:hover{
    background-color: #ffffff;
    color: #00418f;
}
.subNavItem .isActive{
    background-color: #ffffff;
    color: #00418f;
    font-weight: bold;
}

/* ********************************
main
******************************** */
.main{
    width: 1000px;
}
#main{
    width: 1000px;
    margin: 0 auto;
    padding: 10px 10px 0;
    overflow: hidden;
    color: #313131;
    display: block;
}
body.movie #main{
    color: #ffffff;
}
.mainBnr{
    text-align: center;
    padding-top: 5px !important;
/*    margin-bottom: 10px; */
    background-color: #fff;
}
.newsletterBlock{
    position: relative;
    margin-bottom: 10px;
    background-color: #cc0001;
    padding: 5px 75px 5px 0;
}
.newsletterHead{
    display: block;
    margin-left: 5px;
    color: #ffffff;
    background-color: #cc0001;
    font-size: 18px;
    font-weight: bold;
    vertical-align: middle;
    padding: 0 5px;
    position: relative;
    top: 50%;
    transform: translate(0,-50%);
    /* ie7用 */
    *float: left;
}
.newsletterTitle{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    background-color: #ffffff;
    height: 100%;
    background-color: #cc0001;
    padding: 5px 15px;
    /* ie7用 */
    *width: 110px;
}
.newsletterArrow{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    background-color: #cc0001;
    color: #ffffff;
    height: 100%;
    padding: 5px 0;
    /* ie7用 */
    *width: 110px;
}

.newsletterArrowPrev,
.newsletterArrowNext,
.newsletterArrowPrevBgBlack,
.newsletterArrowNextBgBlack{
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    font-size: 20px;
    padding: 0 5px;
    position: relative;
    top: 50%;
    transform: translate(0,-50%);
    /* ie7用 */
    *float: left;
}
/* .newsletterArrowPrev{
    background: url(//static.hokkaido-np.co.jp/image/builtin/prev.png) 0 0 no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
}
.newsletterArrowPrevBgBlack{
    background: url(//static.hokkaido-np.co.jp/image/builtin/prev_bgblack.png) 0 0 no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
}
.newsletterArrowNext{
    background: url(//static.hokkaido-np.co.jp/image/builtin/next.png) 0 0 no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
}
.newsletterArrowNextBgBlack{
    background: url(//static.hokkaido-np.co.jp/image/builtin/next_bgblack.png) 0 0 no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
} */
.newsletterArrowPrev img,
.newsletterArrowNext img,
.newsletterArrowPrevBgBlack img,
.newsletterArrowNextBgBlack img{
    width: 17px;
}
.newsletterArrow a{
    display: block;
}
.newsletterArrow a img{
    vertical-align: bottom;
}
.newsletterList{
    width: 920px;
}
.newsletterItem{
    padding-left: 90px !important;
    padding-right: 10px;
}
.newsletterList .newsletterItem:not(:first-of-type){
    display: none;
}
.newsletterBlock .bx-wrapper{
    background-color: #ffffff;
}
.bx-viewport .newsletterList .newsletterItem{
    display: block;
    background-color: #ffffff;
}
.newsletterItem a{
    display: inline-block;
    color: #cc0001;
    font-weight: bold;
    font-size: 18px;
    text-decoration: none;
}
.newsletterItem a:hover{
    text-decoration: underline;
}

/* ********************************
emergency_flash
******************************** */
.emergencyFlashBlock{
    position: relative;
    margin-bottom: 10px;
    background-color: #fffba9;
    padding: 5px 75px 0 0;
}
.emergencyImage{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    height: 100%;
    background-color: #fffba9;
    padding: 5px 5px;
    /* ie7用 */
    *width: 25px;
    *height: auto;
}
.emergencyHead{
    display: block;
    margin-left: 5px;
    background-color: #fffba9;
    vertical-align: middle;
    position: relative;
    top: 50%;
    transform: translate(0,-50%);
    /* ie7用 */
    *float: left;
    *top: 0;
}
.emergencyArrow{
    position: absolute;
    top: 0;
    right: 10px;
    z-index: 3;
    background-color: #fffba9;
    height: 100%;
    padding: 5px 0;
    /* ie7用 */
    *width: 50px;
    *height: auto;
}
.emergencyArrowPrev,
.emergencyArrowNext{
    display: inline-block;
    vertical-align: middle;
    padding: 0 8px;
    position: relative;
    top: 50%;
    transform: translate(0,-50%);
    /* ie7用 */
    *float: left;
    *top: 0;
}

.emergencyArrow a{
    display: block;
}
.emergencyArrow a img{
    vertical-align: middle;
}
.emergencyList{
    width: 500px;
}
.emergencyItem{
    padding-left: 35px !important;
    padding-right: 10px;
    width:600px;
}
.emergencyList .emergencyItem:not(:first-of-type){
    display: none;
}
.bx-viewport .emergencyList .emergencyItem{
    display: block;
}

.emergencyItem > a{
    text-decoration: underline;
}

/* ********************************
content
******************************** */
#content{
    width: 650px;
    float: left;
    font-size: 1rem;
}
#content.content1col{
	float: none;
	margin: 0 auto;
}

/* ********************************
side
******************************** */
#side{
    width: 300px;
    float: right;
}
.sideBnr{
    padding: 0 20px;
    margin-top: 10px;
    overflow: hidden;
    line-height: 1;
    font-size: 0;
    margin-left: -20px;
    margin-bottom: -10px;
    text-align: center;
}
.sideBnrItem{
    margin-left: 20px;
    margin-bottom: 10px;
    display: inline-block;
}
.sideBnrItem:hover{
   /*  opacity: 0.7; */
}
.sideBnr .sideBnrItem:last-of-type{
    margin-right: 0;
}
.sideButtonBlock{
    margin-top: 10px;
}
.sideButton{
    margin-bottom: 10px;
}
.sideButton2col{
    overflow: hidden;
}
.sideButton2colLeft{
    float: left;
}
.sideButton2colRight{
    float: right;
}
.sideButtonBlock a{
    transition: all 0.3s;
    display: block;
    font-size: 0;
    line-height: 0;
}
.sideButtonBlock a:hover{
    opacity: 0.7;
}
.sideNotice{
    margin-top: 5px;
}
.sideNoticeHead{
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 10px;
    color: #313131;
}
.sideNoticeList{
    border-top: 1px solid #e5e5e5;
}
.sideNoticeItem{
    overflow: hidden;
}
.sideNoticeItem a{
    display: table;
    width: 100%;
    min-height: 43px;
    padding: 3px 0;
    transition: all 0.3s;
    *display: block;
    *overflow: hidden;
}
.sideNoticeItem a:hover{
    opacity: 0.7;
}
.sideNoticeImage{
    display: table-cell;
    width: 60px;
    padding-left: 10px;
    line-height: 0;
    font-size: 0;
    *float: right;
}
.sideNoticeTitle{
    display: table-cell;
    vertical-align: middle;
    font-size: 14px;
    *float: left;
    *width: 230px;
}
.sidePr{
    margin-top: 20px;
}
.sidePrHead{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}
.sidePrList{
    border-top: 1px solid #e5e5e5;
}
.sidePrItem{
    border-bottom: 1px solid #e5e5e5;
}
.sidePrItem a{
    display: block;
    overflow: hidden;
    padding: 5px 0;
    transition: all 0.3s;
}
.sidePrItem a:hover{
    opacity: 0.7;
}
.sidePrItemImage{
    float: left;
    margin-right: 10px;
    font-size: 0;
    line-height: 0;
}
.sidePrItemTextHead{
    font-size: 14px;
    font-weight: bold;
}
.sidePrItemTextBody{
    font-size: 12px;
}
.sideSmallBnr{
    letter-spacing: -0.4em;
    padding: 0 10px;
    margin-top: 10px;
}
.sideSmallBnrItem{
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    letter-spacing: normal;
    /* IE7用 */
    *float: left;
}
.sideSmallBnrItem a{
    font-size: 0;
    line-height: 0;
    display: block;
    transition: all 0.3s;
}
.sideSmallBnrItem a:hover{
    opacity: 0.7;
}
.sideSmallBnr .sideSmallBnrItem:nth-of-type(3n){
    margin-right: 0;
}
.accessRanking{
    border: 1px solid #e4e4e4;
    padding: 15px 10px 0;
    margin-top: 10px;
}
body.movie .accessRanking{
    border-color: #555555;
}
.accessRankingHead{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1;
}
.accessRankingType{
    position: relative;
    margin-bottom: 5px;
}
.accessRankingPeriod{
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    margin-right: 5px;
    vertical-align: bottom;
}
.accessRankingDate{
    font-size: 12px;
    display: inline-block;
    vertical-align: bottom;
}
.accessRankingLink{
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 12px;
    color: #0a4b9b;
}
.accessRankingItem{
    border-top: 1px solid #e4e4e4;
}
body.movie .accessRankingItem{
    border-color: #969696;
}
.accessRankingItem a{
    padding: 5px 0;
    min-height: 47px;
    display: table;
    width: 100%;
    transition: all 0.3s;
    /* IE7用 */
    *display: block;
    *overflow: hidden;
}
.accessRankingItem a:hover{
    opacity: 0.7;
}
.accessRankingNumber{
    display: table-cell;
    padding: 0 4px;
    font-weight: bold;
    vertical-align: top;
    font-size: 18px;
    line-height: 1;
    width:22px;
    /* IE7用 */
    *float: left;
}
.accessRankingText{
    display: table-cell;
    vertical-align: top;
    /* IE7用 */
    *float: left;
    *width: 160px;
}
.accessRankingImage{
    display: table-cell;
    padding-left: 10px;
    font-size: 0;
    line-height: 0;
    width: 76px;
    height: 55px;
    /* IE7用 */
    *float: left;
}
.accessRankingImage .sideImage{
    width: 76px;
    height: 55px;
}
.sideNewsPaperBlock{
    border: 1px solid #e4e4e4;
    padding: 15px 10px;
    margin-top: 20px;
}
.sideNewsPaperHead{
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
}
.sideNewsPaperName{
    margin-bottom: 10px;
    font-size: 0;
    line-height: 0;
}
.sideNewsPaperName > img{
    display: inline-block;
    vertical-align: middle;
}
.sideNewsPaperDate{
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    margin-left: 16px;
}
.sideNewsPaperTitle{
    font-weight: bold;
    margin-bottom: 10px;
}
.sideNewsPaperTitle a:hover{
    text-decoration: underline;
}
.sideNewsPaperImage{
    text-align: center;
    font-size: 0;
    line-height: 0;
}
.sideNewsPaperImage a{
    transition: all 0.3s;
}
.sideNewsPaperImage a:hover{
    opacity: 0.7;
}
.sideBlogNews{
    margin-top: 20px;
}
.sideBlogNewsHead{
    font-size: 16px;
    font-weight: bold;
    overflow: hidden;
}

.sideBlogNewsHead .blogTitle{
        width:50%;
        float:left;
}

.sideBlogNews .blogLink{
        font-size:0.8rem;
        text-align: right;
        width:50%;
        float:right;
}

.sideBlogNews .blogLink a:hover{
        text-decoration: underline;
}


.sideBlogNewsList{
    margin-top: 5px;
    border-top: 1px solid #e4e4e4;
}
.sideBlogNewsItem{
    border-bottom: 1px solid #e4e4e4;
    font-size: 12px;
}
.sideBlogNewsItem a{
    padding: 7px 0;
    transition: all 0.3s;
    display: block;
}
.sideBlogNewsItem a:hover{
    opacity: 0.7;
}
.sideBlogNewsTitle{
    font-weight: bold;
}
.sideTopAdsense{
    line-height: 0;
}
.sideBottomAdsense{
    margin-top: 20px;
}
.sideImage{
    width: 50px;
    height: 37px;
    position: relative;
    overflow: hidden;
    display: block;
    font-size: 0;
    line-height: 0;
    background-color: #ffffff;
}
.movie .sideImage{
    background-color: transparent;
}
.sideImage img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -51%);
    -ms-transform: translate(-50%, -51%);
    transform: translate(-50%, -51%);
    *position: static;
}
.sideWeather{
    border: 1px solid #e5e5e5;
    padding: 15px 10px;
    margin-top: 15px;
}
.sideWeatherHead{
    display: table;
    width: 100%;
}
.sideWeatherTitle{
    display: table-cell;
    vertical-align: bottom;
    font-size: 16px;
    font-weight: bold;
}
.sideWeatherDate{
    display: table-cell;
    vertical-align: bottom;
    font-size: 12px;
    text-align: right;
}
.sideWeatherLink{
    display: table-cell;
    vertical-align: bottom;
    font-size: 12px;
    text-align: right;
}
.sideWeatherLink a{
    color: #0a4b9b;
    text-decoration: underline;
}
.sideWeatherLink a:hover{
    text-decoration: none;
}
.sideWeatherBody{
    margin-top: 10px;
}
.sideWeatherTableHead,.sideWeatherTableData{
    display: table;
    table-layout: fixed;
    width: 100%;
    text-align: center;
}
.sideWeatherTableHead,.sideWeatherTableData-border{
    padding-bottom: 5px;
    margin-bottom: 5px;
}
.sideWeatherTableHeadItem,.sideWeatherTableDataItem{
    display: table-cell;
    vertical-align: middle;
}
.sideWeatherTableHeadItem{
    font-size: 16px;
    font-weight: bold;
}
.sideWeatherTableHead,.sideWeatherTableData-border {
    border-bottom: 1px solid #e5e5e5;
}
.sideWeatherTableHead .sideWeatherTableHeadItem:first-of-type{
    font-weight: normal;
    font-size: 12px;
}
.sideWeatherTableData .sideWeatherTableDataItem:first-of-type{
    font-size: 12px;
}
.sidePrimaryNews{
    margin-top: 20px;
}
.sidePrimaryNewsDisaster{
    border: 2px solid #0a4b9b;
}
.sidePrimaryNewsHead{
    border-bottom: 2px solid #313131;
    display: table;
    width: 100%;
}
.sidePrimaryNews2 .sidePrimaryNewsHead{
    border-bottom: 2px solid #969495;
}
.sidePrimaryNewsDisaster .sidePrimaryNewsHead{
    border-bottom: none;
    background-color: #0a4b9b;
    padding: 10px 5px 5px;
}
.sidePrimaryNewsHeadTitle{
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    color: #313131;
    display: table-cell;
}
.sidePrimaryNews2 .sidePrimaryNewsHeadTitle,.sidePrimaryNewsDisaster .sidePrimaryNewsHeadTitle{
    color: #ffffff;
}
.sidePrimaryNewsHeadLink{
    display: table-cell;
    text-align: right;
}
.sidePrimaryNewsHeadLink a{
    font-size: 12px;
    color: #0a4b9b;
}
.sidePrimaryNewsDisaster .sidePrimaryNewsHeadLink a{
    color: #ffffff;
}
.sidePrimaryNews2 .sidePrimaryNewsHeadLink a{
    color: #0a96d8;
}
.sidePrimaryNewsList{
    border-top: 1px solid #e5e5e5;
}
.sidePrimaryNewsDisaster .sidePrimaryNewsList{
    padding: 5px 10px 10px;
}
.sidePrimaryNews2 .sidePrimaryNewsList{
    border: none;
}
.sidePrimaryNewsItem{
    overflow: hidden;
    border-bottom: 1px solid #e5e5e5;
}
.sidePrimaryNews2 .sidePrimaryNewsItem{
    border-bottom: 1px solid #989697;
}
.sidePrimaryNewsItem a{
    display: table;
    width: 100%;
    min-height: 43px;
    padding: 5px 0;
    transition: all 0.3s;
}
.sidePrimaryNewsItem a:hover{
    opacity: 0.7;
}
.sidePrimaryNewsImage{
    display: table-cell;
    width: 76px;
    padding-left: 10px;
    line-height: 0;
    font-size: 0;
}
.sidePrimaryNewsImage .sideImage{
    width: 76px;
    height: 55px;
}
.sidePrimaryNewsTitle{
    display: table-cell;
    vertical-align: middle;
}
.sideRecommend{
    margin-top: 20px;
}
.sideRecommendHead{
    border-bottom: 2px solid #313131;
    display: table;
    width: 100%;
}
.sideRecommendHeadTitle{
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    color: #313131;
    display: table-cell;
}
.sideRecommendHeadLink{
    display: table-cell;
    text-align: right;
}
.sideRecommendHeadLink a{
    font-size: 12px;
    color: #0a4b9b;
}
.sideRecommendList{
    border-top: 1px solid #e5e5e5;
}
.sideRecommendItem{
    overflow: hidden;
    border-bottom: 1px solid #e5e5e5;
}
.sideRecommendItem a{
    display: table;
    width: 100%;
    min-height: 43px;
    padding: 5px 0;
    transition: all 0.3s;
}
.sideRecommendItem a:hover{
    opacity: 0.7;
}
.sideRecommendImage{
    display: table-cell;
    width: 76px;
    padding-left: 10px;
    line-height: 0;
    font-size: 0;
}
.sideRecommendImage .sideImage{
    width: 76px;
    height: 55px;
}
.sideRecommendTitle{
    display: table-cell;
    vertical-align: middle;
}
.sideLink{
    font-size: 12px;
    text-align: right;
}
.sideLink a{
    color: #0a4b9b;
    text-decoration: underline;
}
.sideLink a:hover{
    text-decoration: none;
}

.sideFormListHead{
    margin-top: 20px;
    border-bottom: 2px solid #313131;
    display: table;
    width: 100%;
}
.sideFormListHeadTitle{
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    color: #313131;
    display: table-cell;
}
.sideFormListHeadLink{
    display: table-cell;
    text-align: right;
}
.sideFormListHeadLink a{
    font-size: 12px;
    color: #0a4b9b;
}
.sideFormList{
    margin-bottom: 20px;
    margin-top: 10px;
}
.sideFormListItem{
    background: url(//static.hokkaido-np.co.jp/image/builtin/textarrow.gif) 0 6px no-repeat;
    padding-left: 1em;
    margin-bottom: 5px;
    font-size: 12px;
}
.sideFormListItem a:hover{
    text-decoration: underline;
}

.eventSearch{
    border: 1px solid #e7e7e7;
    margin-top: 20px;
    padding-bottom: 20px;
}
.eventSearchHead{
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    padding: 10px;
    border-bottom: 1px solid #e7e7e7;
}
.eventSearchContent{
    margin-top: 10px;
    padding: 0 5px 5px 5px;
}
.eventSearchContentHead{
    font-size: 14px;
    font-weight: bold;
}
/*.eventSearchCalendar{
    padding: 5px;
}
.eventSearchCalendarHead{
    display: table;
    width: 100%;
    border-bottom: 1px solid #e5e5e5;
    padding: 0 0 5px;
}
.eventSearchCalendarPrev{
    display: table-cell;
    vertical-align: bottom;
    font-size: 12px;
}
.eventSearchCalendarPrev a{
    color: #0a4b9b;
}
.eventSearchCalendarCurrent{
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}
.eventSearchCalendarNext{
    display: table-cell;
    text-align: right;
    vertical-align: bottom;
    font-size: 12px;
}
.eventSearchCalendarNext a{
    color: #0a4b9b;
}
.calendarTable{
    margin-top: 10px;
}
.calendarTableRow{
    display: table;
    table-layout: fixed;
    width: 100%;
    padding: 4px 0;
}
.calendarTableCell{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.calendarTableCell.sunday{
    color: #e60012;
}
.calendarTableCell.saturday{
    color: #00a0e9;
}
.calendarTableCell.notCurrent{
    color: #bfbfbf;
}
.calendarTableCell a{
    font-weight: bold;
    color: #0a4b9b;
    text-decoration: underline;
}
.calendarTableCell a:hover{
    text-decoration: none;
}*/
.eventSearchList{
    padding: 10px 15px;
}
.eventSearchListItem{
    margin-bottom: 10px;
}
.eventSearchList .eventSearchListItem:last-of-type{
    margin-bottom: 0;
}
.eventSearchListTitle{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
    line-height: 1.5;
}
.eventSearchListContent{
    display: table;
    width: 100%;
}
.eventSearchListContent > *{
    display: table-cell;
    vertical-align: top;
}
.eventSearchListContentInner{
    width: 100%;
}
.eventSearchInputText{
    font-size: 14px;
    line-height: 1;
    padding: 3px 5px;
    border: 1px solid #e5e5e5;
    width: 100%;
}
.eventSearchInputTextNarrow{
    width: 30%;
}
.eventSearchCalendar{
    width: 8%;
    padding: 0 9px;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
}
.eventSearchCalendar img{
    width: 100%;
}
.eventSearchReset{
    vertical-align: middle;
    background-color: #808080;
    width: 7%;
    padding: 0 0.5%;
    border-radius: 1px;
    cursor: pointer;
}
.eventSearchResetInner{
    color: #ffffff;
    font-size: 12px;
    line-height: 1;
    text-align: center;
}
.eventSearchListContent select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #e5e5e5;
    width: 100%;
    padding: 3px 5px;
    font-size: 14px;
    background: url(//static.hokkaido-np.co.jp/image/builtin/arrow_bottom.png) 95% 50% no-repeat;
    -webkit-background-size: 4%;
    background-size: 4%;
}
.eventSearchBtn{
    width: 50%;
    margin: 3% auto 0;
}
.eventSearch button{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: none;
    padding: 5px 0;
    border: none;
    border-radius: 3px;
    background-color: #434343;
    font-size: 18px;
    color: #ffffff;
    text-align: center;
    display: block;
    width: 100%;
}
.eventSideNews {
    margin-top: 20px;
}
.eventSideNewsHead {
    border-bottom: 1px solid #313131;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    padding-bottom: 10px;
}
.eventSideNewsImage{
    display: table-cell;
    width: 60px;
    padding-right: 10px;
    line-height: 0;
    font-size: 0;
}
.eventSideNewsImage .sideImage{
    width: 60px;
    height: 60px;
}
.eventSideNewsTitle {
    display: table-cell;
    vertical-align: middle;
}

.inputCalendarBlock{
    display: none;
    width: 100%;
}
.inputCalendar{
    background-color: #ffffff;
    padding: 7% 0 5%;
}
.inputCalendarHead{
    display: table;
    width: 100%;
    /* border-bottom: 1px solid #e5e5e5; */
    background-color: #d8e4f2;
    padding: 0 5px;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.inputCalendarPrev{
    display: table-cell;
    vertical-align: bottom;
    font-size: 24px;
    color: #0a4b9b;
    cursor: pointer;
}
.inputCalendarPrevInner{
    display: inline-block;
    transform: rotate(90deg);
}
.inputCalendarCurrent{
    font-size: 18px;
    display: table-cell;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    cursor: default;
    /* width: 40%; */
}
.inputCalendarNext{
    display: table-cell;
    text-align: right;
    vertical-align: bottom;
    font-size: 24px;
    color: #0a4b9b;
    cursor: pointer;
}
.inputCalendarNextInner{
    display: inline-block;
    transform: rotate(-90deg);
}
.calendarTable{
    /* margin-top: 3%; */
}
.calendarTableRow {
    display: table;
    table-layout: fixed;
    width: 100%;
    padding: 4px 0;
}
.calendarTableCell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 16px;
    padding: 5px 0;
    border-right: 1px solid #ffffff;
}
.calendarTable .calendarTableRow:not(:first-child) .calendarTableCell{
    cursor: pointer;
}
.calendarTable .calendarTableRow .calendarTableCell:last-of-type{
    border-right: none;
}
.calendarTableCell.today{
    border: 1px solid #0a4b9b !important;
}
.calendarTableCell.selectDay{
    background-color: #0a4b9b;
    color: #ffffff;
}
.calendarTableCell.notCurrent {
    color: #bfbfbf;
}
.calendarTableCell.disabled{
    background-color: #efefef;
    cursor: default !important;
}
.calendarTableCell.lastMonth{
    visibility: hidden;
}
.calendarTableCell.saturday {
    color: #00a0e9;
}
.calendarTableCell.sunday {
    color: #e60012;
}
.eventSearchOthers{
    /* background-color: #efefef; */
    border-top: 1px solid #efefef;
    padding: 12px 8px;
    margin-top: 10px;
}
.eventSearchInputBlock{
    margin-bottom: 30px;
}
.eventSearchInput{
    padding: 0 10px;
    margin-top: 5px;
}
.eventSearchInput input,.eventSearchInput select{
    width: 100%;
    border: 1px solid #e5e5e5;
    padding: 5px;
}
.eventSerchWhereItem li{    /* nishimura #214 */
    display: inline-block;
    margin-right: 0.5rem;
}

.sideSearchButton{
    display: block;
    background-color: #434343;
    border: 2px solid #434343;
    color: #ffffff;
    font-size: 18px;
    padding: 5px;
    white-space: nowrap;
    width: 50%;
    margin: 0 auto;
    cursor: pointer;
    transition: all .3s;
    border-radius: 3px;
}
.sideSearchButton:hover{
    color: #434343;
    background-color: #ffffff;
}
.relationMovie{
    margin-top: 20px;
}
.relationMovieHead{
    border-bottom: 2px solid #969696;
}
.relationMovieListItem{
    border-bottom: 1px solid #969696;
    padding: 10px 0;
    overflow: hidden;
}
.relationMovieListItem a{
    display: block;
    transition: all 0.3s;
}
.relationMovieListItem a:hover{
    opacity: 0.7;
}
.relationMovieImage{
    width: 70px;
    height: 40px;
    float: right;
    margin-left: 10px;
    position: relative;
    background-color: #ebebeb;
}
.relationMovieImage img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.relationMovieText .category{
    color: #878787;
    font-size: 12px;
}
.rssBlock{
    margin-top: 20px;
    padding: 20px 0;
}
.rssHead{
    font-size: 16px;
    border-bottom: 2px solid #969696;
    margin-bottom: 8px;
}
.rssDescription{
    margin-bottom: 8px;
}
.rss{
    border: 2px solid #ffffff;
    border-radius: 3px;
}
.rss a{
    background-color: #ebebeb;
    color: #ec6100;
    font-size: 16px;
    display: block;
    padding: 15px 10px;
}
.rss a i{
    font-size: 20px;
}
.sideRelatedLink{
    margin-top: 20px;
    margin-bottom: 20px;
}
.sideRelatedLinkHead{
    border-bottom: 1px solid #313131;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    padding-bottom: 10px;
}
.movie .sideRelatedLinkHead{
    border-bottom: 1px solid #555555;
    color: #ffffff;
}
.sideRelatedLinkList{
    margin-top: 10px;
}
.sideRelatedLinkItem{
    background: url(//static.hokkaido-np.co.jp/image/builtin/textarrow.gif) 0 6px no-repeat;
    padding-left: 1em;
    margin-bottom: 5px;
    font-size: 12px;
}
.movie .sideRelatedLinkItem{
    background: url(//static.hokkaido-np.co.jp/image/builtin/textarrow2.gif) 0 6px no-repeat;
    color: #ffffff;
}
.sideRelatedLinkItem a:hover{
    text-decoration: underline;
}

/* ********************************
footer
******************************** */
#footer{
    margin-top: 100px;
}
.footerTop{
    background-color: #f5f5f5;
    padding: 20px 0;
    color: #313131;
}
.footerBottom{
    color: #000000;
    padding: 30px 0 60px;
    background-color: #d7d7d7;
}
.footerInner{
    width: 980px;
    margin: 0 auto;
}
.footerNavBlock{
    border-bottom: 1px solid #cccccc;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.footerInner .footerNavBlock:last-of-type{
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.footerNav{
    display: table;
    margin-bottom: 20px;
}
.footerNavBlock .footerNav:last-of-type{
    margin-bottom: 0;
}
.footerNavItem{
    display: table-cell;
    width: 200px;
    font-size: 14px;
    font-weight: bold;
    vertical-align: top;
    *display: inline;
    *zoom: 1;
}
.footerNavLink{
    display: table-cell;
    vertical-align: top;
    letter-spacing: -0.4em;
    *display: inline;
    *zoom: 1;
    *width: 770px;
}
.footerNavLink-simple{
    display: block;
}
.footerNavLinkItem{
    display: inline-block;
    letter-spacing: normal;
    padding-right: 0.7em;
    margin-right: 0.7em;
    border-right: 1px solid #acacac;
    font-size: 12px;
    line-height: 1.5;
    *display: inline;
    *zoom: 1;
}
.footerNavLink .footerNavLinkItem:last-of-type{
    margin-left: 0;
    padding-right: 0;
    border-right: none;
}
.footerNavLinkItem a:hover{
    text-decoration: underline;
}
.footerDescription{
    margin-top: 20px;
    font-size: 11px;
}
.footerCopyrightBlock{
    display: table;
    width: 100%;
    margin-top: 30px;
    font-size: 12px;
    table-layout: fixed;
}
.footerCopyright{
    display: table-cell;
    vertical-align: middle;
}
.logoutButtonBlock{
    display: table-cell;
    text-align: right;
    vertical-align: middle;
}
.logoutButton{
    background-color: #ffffff;
    border: 1px solid #000000;
    border-radius: 3px;
    padding: 5px;
    cursor: pointer;
}

/* ********************************
module
******************************** */

/* mainNews ------------------- */
.mainNewsLarge{
    margin-bottom: 5px;
}
.mainNewsLargeHead{
    font-size: 1.5714rem;
    font-weight: bold;
    margin-bottom: 5px;
}
.mainNewsLargeHead a:hover{
    text-decoration: underline;
}
.mainNewsLarge .postDate{
    padding-left: 5px;
    color: #aaaaaa;
    font-size: 1rem;
}
.mainNews{
    overflow: hidden;
    padding: 10px 0 0;
}
.newsTitleBlock{
    margin-top: 10px;
}
.newsTitle{
    font-size: 1.714em;
    font-weight: bold;
}

.newsTitle2{
    font-size: 1.4em;
    font-weight: bold;
    margin: 0 0 25px 15px;
}


.newsTitleBlock .postDate{
    color: #aaaaaa;
}
.mainNewsLeft{
    float: left;
    width: 250px;
/* 西村修正 issue #140 */
    /*border: 1px solid #e5e5e5; */
}
.categoryMainNewsLeft{
    width: 400px;
}
.mainNewsLeft-border{
    border: 1px solid #e5e5e5;
}
/* ここまで */

.mainNewsLeft-detail .pr{
    color: #aaaaaa;
    font-size: 60%;
    text-align: center;
}
.mainNewsLeft-detail{
    width: 300px;
    margin-right: 20px;
    background-color: transparent;
}
.mainNewsLeftImageBlock{
    padding: 4px;
}
.mainNewsLeft a{
    display: block;
    transition: all 0.3s;
}
.categoryMainNewsLeft a{
    display: inline;
    transition: none;
}
.mainNewsLeft a:hover{
    opacity: 0.7;
}
.categoryMainNewsLeft a:hover{
    opacity: 1;
}
.mainNewsLeftImage{
    width: 240px;
    height: 160px;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
}
.mainNewsLeftImage-detail{
    width: 290px;
    height: 180px;
}
.mainNewsLeftImage.noResize{
    height: auto;
    text-align: center;
    font-size: 0;
}
.mainNewsLeftImage img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.mainNewsLeftImage.noResize img{
    max-width: 240px;
    max-height: 240px;
    margin: 0 auto;
    position: static;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}
.mainNewsLeftImage-detail.noResize img{
    max-width: 290px;
}
.mainNewsLeftCaption{
    font-size: 1rem;
    margin-bottom: 15px;
    line-height: 1.3;
}
.mainNewsLeftCaption.mainNewsLeftCaption-bgGray{
    padding: 5px 10px;
    background-color: #eeeeee;
}
.mainNewsLeftCaption.mainNewsLeftCaption-bgGray:empty{
    display: none;
}
.mainNewsRight{
    float: left;
    width: 400px;
}
.categoryMainNewsRight{
    width: 250px;
    float: right;
}
.categoryMainNewsRight a.mainNewsLeftImageBlock{
    display: block;
    transition: all 0.3s;
}
.categoryMainNewsRight a.mainNewsLeftImageBlock:hover{
    opacity: 0.7;
}
.mainNewsRight-detail{
    width: auto;
    float: none;
}
.mainNewsItem{
    padding-left: 30px;
    margin-top: 12px;
    font-size: 1.1428rem;
    line-height: 1.3;
    color: #313131;
    font-weight: bold;
}
.categoryMainNewsLeft .mainNewsItem{
    padding-left: 0;
    padding-right: 30px;
}
.mainNewsItem a:hover{
    text-decoration: underline;
}
.mainNews .mainNewsItem:first-of-type{
    margin-top: 0;
}
.mainNews .postDate{
    padding-left: 5px;
    color: #aaaaaa;
    font-size: 0.8rem;
}
.mainNewsItem.currentNews{
    /* background: url(//static.hokkaido-np.co.jp/image/builtin/arrow.gif) 0 center no-repeat; */
}
.mainNewsLeftImageSelect{
    margin: 10px 0;
    overflow: hidden;
    padding: 0 10px;
}
.mainNewsLeftImageSelectItem{
    float: left;
    background-color: #eeeeee;
    position: relative;
    margin-right: 10px;
    cursor: pointer;
}
.mainNewsLeftImageSelect .mainNewsLeftImageSelectItem:last-of-type{
    margin-right: 0;
}
.mainNewsLeftImageSelectItem a{
    display: block;
    width: 60px;
    height: 60px;
}
.mainNewsLeftImageSelectItem img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.mainNewsLeftAdsense{
    margin-top: 30px;
}

/* pickupWord ------------------- */
div.genre_line {
	border-bottom: 1px solid #e5e5e5;
	height: 15px;
}
.pickupWordBlock{
    overflow: hidden;
    padding: 10px 0;
/*    border-top: 1px solid #e5e5e5; */
/*    border-bottom: 1px solid #e5e5e5; */
}
.pickupWordLeft{
    float: left;
}
.pickupWordLeftHead{
    font-size: 1.285rem;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1;
    width: 200px;
}
.pickupWordLeftTitle{
    width: 200px;
    font-size: 1rem;
    margin-bottom: 10px;
    font-weight: bold;
    line-height: 1.3;
}
.pickupWordLeft a{
    display: block;
    transition: all 0.3s;
}
.pickupWordLeft a:hover{
    opacity: 0.7;
}
.pickupWordRight{
    float: right;
    width: 420px;
}
.pickupWord{
    border: 1px solid #a0a0a0;
    background: #efefef;
    padding: 10px;
}
.pickupWordHead{
    font-size: 1.1428rem;
    font-weight: bold;
    color: #0a4b9b;
    line-height: 1;
}
.pickupWordList{
    letter-spacing: -0.4em;
    padding: 5px 0 0;
    /* IE7用 */
    *overflow: hidden;
}
.pickupWordItem{
    display: inline-block;
    letter-spacing: normal;
    line-height: 1;
    margin-top: 5px;
    margin-right: 5px;
    color: #313131;
    font-weight: bold;
    border: 1px solid #a0a0a0;
    background-color: #ffffff;
    white-space: nowrap;
    /* IE7用 */
    *float: left;
}
.pickupWordItem a{
    padding: 5px 5px;
    display: block;
    transition: all 0.3s;
}
.pickupWordItem a:hover{
    color: #ffffff;
    background-color: #a0a0a0;
}
.pickupWordTextAdsense{
    color: #313131;
    line-height: 1.8;
}
.pickupWordTextAdsense td{
    padding: 1px 0;
}
.pickupWordTextAdsense a{
        line-height: 1.8;
}

.pickupWordTextAdsense a:hover{
    text-decoration: underline;
}

.pickupWordTextAdsense ul {
        overflow: hidden;
}


.pickupWordTextAdsense li {
        width:50%;
        float:left;
}
.pickupWordTextAdsense .PR {
        font-size: 1.2em;
        font-weight:bold;
}

.pickupWordTextAdsense .aboutBanner{
        text-align: right;
}

.pickupWordImageAdsense{
    width: 100%;
    border-top: 1px solid #e5e5e5;
    padding-top: 10px;
    margin-top: 10px;
}

/* pickupWordLong ------------------- */
/*
.pickupWordLeft{
    float: left;
}
.pickupWordLeftHead{
    font-size: 1.285rem;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1;
    width: 200px;
}
.pickupWordLeftTitle{
    width: 200px;
    font-size: 1rem;
    margin-bottom: 10px;
    font-weight: bold;
    line-height: 1.3;
}
.pickupWordLeft a{
    display: block;
    transition: all 0.3s;
}
.pickupWordLeft a:hover{
    opacity: 0.7;
}
*/

.pickupWordRightLong{
    float: right;
    width: 650px;
}
.pickupWordLong{
    border: 1px solid #a0a0a0;
    background: #efefef;
    padding: 10px 10px 3px 10px;
}
.pickupWordHeadLong{
    font-size: 1.1428rem;
    font-weight: bold;
/*
    color: #0a4b9b;
    line-height: 1;
*/
    background: #0a4b9b;
    color: #FFF;
    min-width: 10px;
    padding: 1px 10px;
    float: left;
    margin-right: 10px;
}
.pickupWordListLong{
    letter-spacing: -0.4em;
    /* padding: 5px 0 0; */
    /* IE7用 */
    *overflow: hidden;
}
.pickupWordItemLong{
    display: inline-block;
    letter-spacing: normal;
    line-height: 1;
    /* margin-top: 5px; */
    margin-right: 5px;
    margin-bottom: 6px;
    color: #313131;
    font-weight: bold;
    border: 1px solid #a0a0a0;
    background-color: #ffffff;
    white-space: nowrap;
    /* IE7用 */
    *float: left;
}
.pickupWordItemLong a{
    padding: 5px 5px;
    display: block;
    transition: all 0.3s;
}
.pickupWordItemLong a:hover{
    color: #ffffff;
    background-color: #a0a0a0;
}


/* Hokkaido_news ------------------- */
/* 2020/09/23 */
.newsHkd {
    width: 650px;
    margin-top: 10px;
    margin-right:0;
    margin-bottom: 5px;
    float:none;
    overflow:hidden;
}
.newsHkdHead {
    font-size: 1.35rem;
    display: table;
    border-bottom: 2px solid #0a4b9b;
    padding-bottom: 4px;
    color: #0a4b9b;
    table-layout: fixed;
    width: 100%;
}
.newsHkdName {
    font-size: 1.35rem;
    display: table-cell;
    font-weight: bold;
    vertical-align: bottom;
    line-height: 1;
    white-space: nowrap;
}
.newsHkdDate {
    float: left;
    margin-top: 2px;
    font-size: 0.857rem;
}
.newsHkdTitle {
    font-size: 1.15rem;
    font-weight: normal;
    margin: 4px 0 4px 2.8em;
}
.newsHkdItemNew {
    border-bottom: 1px solid #e5e5e5;
}
.newsHkdItemNew a {
    min-height: auto;
    display: table;
    transition: all 0.3s;
}
.newsHkdItemNew a:hover{
    opacity: 0.7;
}

/* newsTile ------------------- */
.newsTile{
    margin-top: 20px;
}
.newsTileList{
    overflow: hidden;
}
.newsTileItem{
    float: left;
    margin-right: 25px;
    margin-bottom: 10px;
    width: 200px;
    *margin-right: 15px;
    *text-align: center;
}
.newsTileItem{
    transition: all 0.3s;
}
.newsTileItem:hover{
    opacity: 0.7;
}
.newsTileList .newsTileItem:nth-of-type(3n){
    margin-right: 0;
}
.newsTileImage{
    width: 200px;
    height: 150px;
    overflow: hidden;
    position: relative;
}
.newsTileImage img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    *position: static;
}
.newsTileCaptionType{
    font-size: 0.857rem;
    margin-right: 3px;
}
.newsTileCaptionType.CaptiontypeSkyblue{
    color: #00a0e9;
}
.newsTileCaptionType.CaptiontypeRed{
    color: #e40012;
}

/* newsCategory ------------------- */
.newsCategoryBlock{
    overflow: hidden;
    margin-top: 20px;
}
.newsCategory{
    width: 310px;
    float: left;
    margin-right: 30px;
    margin-bottom: 20px;
    *width: 100%;
}
.newsCategoryBlock .newsCategory:nth-of-type(2n){
    margin-right: 0;
}
.newsCategoryHead{
    display: table;
    border-bottom: 2px solid #0a4b9b;
    padding-bottom: 10px;
    color: #0a4b9b;
    table-layout: fixed;
    width: 100%;
    /* IE7用 */
    *overflow: hidden;
}
.newsCategoryName{
    font-size: 1.285rem;
    display: table-cell;
    font-weight: bold;
    vertical-align: bottom;
    line-height: 1;
    white-space: nowrap;
    /* IE7用 */
    *float: left;
    *line-height: 1.5;
}
.newsCategoryLink{
    font-size: 0.857rem;
    display: table-cell;
    vertical-align: bottom;
    text-align: right;
    line-height: 1;
    width: 40px;
    white-space: nowrap;
    /* IE7用 */
    *float: right;
    *line-height: 1.5;
}
.newsCategoryLink a:hover{
    text-decoration: underline;
}
.newsCategoryItem{
    border-bottom: 1px solid #e5e5e5;
}
.newsCategoryItem a{
    display: block;
    overflow: hidden;
    padding: 5px 0;
    min-height: 85px;
    transition: all 0.3s;
}
.newsCategoryItem a:hover{
    opacity: 0.7;
}
.newsCategoryItemRight{
    width: 100px;
    height: 70px;
    position: relative;
    float: right;
    margin-left: 10px;
    line-height: 0;
    font-size: 0;
}
.newsCategoryItemRight img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    *position: static;
}
.newsCategoryTitle-H3 {
    font-size: 1.0rem;
    font-weight: normal;
}
.newsCategoryDate{
    font-size: 0.857rem;
}

/* movieNews ------------------- */
.movieNews{
    margin-top: 20px;
}
.movieNews-detail{
    margin-top: 30px;
}
.movieNewsHead{
    display: table;
    border-bottom: 2px solid #0a4b9b;
    padding-bottom: 10px;
    color: #0a4b9b;
    table-layout: fixed;
    width: 100%;
}
.movieNewsName{
    font-size: 1.285rem;
    display: table-cell;
    font-weight: bold;
    vertical-align: bottom;
    line-height: 1;
}
.movieNewsLink{
    font-size: 0.857rem;
    display: table-cell;
    vertical-align: bottom;
    text-align: right;
    line-height: 1;
}
.movieNewsLink a:hover{
    text-decoration: underline;
}
.movieNewsList{
    overflow: hidden;
    margin-top: 20px;
}
.movieNewsItem{
    width: 200px;
    margin-right: 25px;
    float: left;
}
.movieNewsItem a{
    display: block;
    transition: all 0.3s;
}
.movieNewsItem a:hover{
    opacity: 0.7;
}
.movieNewsList .movieNewsItem:last-of-type{
    margin-right: 0;
}
.movieNewsThumbnail{
    position: relative;
    font-size: 0;
    line-height: 0;
    margin-bottom: 5px;
    width: 200px;
    height: 113px;
    overflow: hidden;
}
.movieNewsThumbnail.noResize{
    height: 112px;
    text-align: center;
}
.movieNewsThumbnail img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.movieNewsThumbnail.noResize img{
    max-width: initial;
    max-height: initial;
    /* IE用 */
    max-width: auto;
    max-height: auto;
    width: auto;
    height: 112px;
}
.movieNewsThumbnail::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: block;
    background: url(../image/builtin/playback.png) center center no-repeat;
    -webkit-background-size: 30%;
    background-size: 30%;
}

.movieNewsThumbnailBilling:hover::before {
    width: 100%;
    height: 100%;
    position: absolute;
    background: url(//static.hokkaido-np.co.jp/image/builtin/padlock.svg) no-repeat 50% 50%;
    background-size: 50px;
    top: 0;
    left: 0;
    right: 0;
}

.movieNewsCaption{
    line-height: 1.3;
}
.movieNewsCaption .postDate{
    color: #aaaaaa;
}
.photoGallery{
    margin-top: 20px;
}
.photoGalleryHead{
    display: table;
    border-bottom: 2px solid #0a4b9b;
    padding-bottom: 10px;
    color: #0a4b9b;
    table-layout: fixed;
    width: 100%;
}
.photoGalleryName{
    font-size: 1.285rem;
    display: table-cell;
    font-weight: bold;
    vertical-align: bottom;
    line-height: 1;
}
.photoGalleryLink{
    font-size: 0.857rem;
    display: table-cell;
    vertical-align: bottom;
    text-align: right;
    line-height: 1;
}
.photoGalleryLink a:hover{
    text-decoration: underline;
}
.photoGalleryList{
    overflow: hidden;
    margin-top: 20px;
}
.photoGalleryItem{
    width: 310px;
    margin-right: 30px;
    float: left;
}
.photoGalleryItem a{
    display: block;
    transition: all 0.3s;
}
.photoGalleryItem a:hover{
    opacity: 0.7;
}
.photoGalleryList .photoGalleryItem:last-of-type{
    margin-right: 0;
}
.photoGalleryThumbnail{
    width: 310px;
    height: 232px;
    margin-bottom: 5px;
    position: relative;
    overflow: hidden;
    display: block;
    font-size: 0;
    line-height: 0;
}
.photoGalleryThumbnail img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.photoGalleryCaption .postDate{
    margin-left: 5px;
    color: #aaaaaa;
}

/* categoryTypeArchive ------------------- */
.categoryTypeArchive{
    margin-top: 30px;
}
.categoryTypeLatestHead{
    display: table;
    border-bottom: 2px solid #0a4b9b;
    padding-bottom: 10px;
    table-layout: fixed;
    width: 100%;
}
.categoryTypeLatestName{
    font-size: 1.285rem;
    color:#0a4b9b;
    display: table-cell;
    font-weight: bold;
    vertical-align: bottom;
    line-height: 1;
}
.categoryTypeArchiveItemTitle{
    line-height: 1.3;
}

/* categoryArchive ------------------- */
.categoryArchive{
    margin-top: 20px;
}
.categoryArchiveHead{
    border-bottom: 2px solid #0a4b9b;
    color: #0a4b9b;
    font-size: 1.714rem;
    font-weight: bold;
}
.categoryTag{
    padding: 10px 0;
    margin-top: -5px;
}
.categoryTag-detail{
    text-align: left;
}
.categoryTag a{
    display: inline-block;
    font-size: 1rem;
    border: 1px solid #e1e1e1;
    background-color: #f9f9f9;
    /* margin-left: 10px; nishimura */
    padding: 4px 8px;
    line-height: 1;
    margin: 7px 7px 0 0;
    transition: all 0.3s;
}
.categoryTag a:hover{
    background-color: #e1e1e1;
}
.categoryTag a:first-of-type{
    margin-left: 0;
}
.categoryArchiveList{
    border-top: 1px solid #e5e5e5;
}
.categoryArchiveItem{
    border-bottom: 1px solid #e5e5e5;
}
.categoryArchiveItem a{
    display: block;
    padding: 5px 0;
    transition: all 0.3s;
}
.categoryArchiveItem a:hover{
    opacity: 0.7;
}
.categoryArchiveItem a:hover .categoryArchiveItemTitle{
    text-decoration: underline;
}
.categoryArchiveItemDate{
    color: #6d6d6d;
    font-size: 0.857rem;
}
.categoryArchiveItemTable{
    display: table;
    width: 100%;
    table-layout: fixed;
}
.categoryArchiveItemTableCell{
    display: table-cell;
    vertical-align: top;
}
.categoryArchiveItemTableCellText{
    padding-right: 15px;
}
.categoryArchiveItemTableCellImg{
    width: 200px;
}
.categoryArchiveItemImg{
    width: 200px;
    height: 150px;
    position: relative;
    background-color: #eeeeee;
}
.categoryArchiveItemImg img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    image-rendering: -webkit-optimize-contrast;
}
.categoryArchiveItemTitle{
    font-weight: bold;
    font-size: 1.142rem;
    line-height: 1.3;
}
.categoryArchiveList .categoryArchiveItem:first-of-type .categoryArchiveItemTitle{
    font-size: 1.428rem;
}

.categoryArchiveItemDescription{
    font-size: 1rem;
}

.myWordList .categoryArchiveItem:first-of-type .categoryArchiveItemTitle,
.myScrapList .categoryArchiveItem:first-of-type .categoryArchiveItemTitle{
        font-size: 1.142rem;
}

.myWordList .categoryArchiveItem .listKeyword{
        font-size: 1.4rem;
        padding:1rem 0;
}

.myWordList .categoryArchiveItem .listKeyword strong{
        color:#0a4b9b;
}


.myWordList .categoryArchiveItem,
.myScrapList .categoryArchiveItem{
        overflow: hidden;
}


.myScrapList .categoryArchiveItem a{
        width:70%;
        float:left;
}
.myScrapList .noExistsArticle{
        color:#999999;
        padding:1rem 0;
        width:70%;
        float:left;
}


.myWordList .categoryArchiveItem  a{
        width:70%;
        float:left;
        display:block;
}

.myWordList .categoryArchiveItem .buttonSpace,
.myScrapList .categoryArchiveItem .buttonSpace{
        width:30%;
        float:right;
        padding-left: 10px;
}

.myScrapList .categoryArchiveItem .buttonSpace a.del-clip{
        width:90%;
        margin:1.3rem auto;
        height:2.8rem;
        vertical-align: middle;
        text-align:center;
        background-color: #434343;
        border-color: #434343;
        color: #ffffff;
}

.myScrapList .categoryArchiveItem .buttonSpace a.del-clip:hover{
        background-color: #FFFFFF;
        color: #434343;
}


.myWordList .categoryArchiveItem .buttonSpace a.post-clip{
        width:90%;
        margin:1.3rem auto;
        height:2.8rem;
        vertical-align: middle;
        text-align:center;
        border-color: #0a4b9b;
        background-color: #ffffff;
        color: #0a4b9b;
}

.myWordList .categoryArchiveItem .buttonSpace a.post-clip:hover{
        background-color: #0a4b9b;
        color: #ffffff;
}


.myWordList .categoryArchiveItem .buttonSpace a.active{
        background-color: #434343;
        border-color: #434343;
        color: #ffffff;
}

.myWordList .categoryArchiveItem .buttonSpace a.active:hover{
        background-color: #fff;
        color: #434343;
}


/* categoryFeature ------------------- */
.categoryFeature{
    margin-top: 100px;
}
.categoryFeature-detail{
    margin-top: 30px;
}
.categoryFeatureHead{
    display: table;
    border-bottom: 1px solid #313131;
    padding-bottom: 10px;
    table-layout: fixed;
    width: 100%;
}
.categoryFeatureName{
    font-size: 1.285rem;
    display: table-cell;
    font-weight: bold;
    vertical-align: bottom;
    line-height: 1;
}
.categoryFeatureLink{
    font-size: 0.857rem;
    display: table-cell;
    vertical-align: bottom;
    text-align: right;
    line-height: 1;
    color: #0a4b9b;
}
.categoryFeatureLink a:hover{
    text-decoration: underline;
}
.categoryFeatureList{
    overflow: hidden;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
.categoryFeatureItem{
    border-bottom: 1px solid #e5e5e5;
    float: left;
    width: 310px;
}
.categoryFeatureList .categoryFeatureItem:nth-of-type(odd){
    margin-right: 30px;
}
.categoryFeatureItem a{
    display: block;
    padding: 10px 0;
    transition: all 0.3s;
}
.categoryFeatureItem a:hover{
    opacity: 0.7;
}
.categoryFeatureImage{
    width: 100px;
    height: 70px;
    float: right;
    margin-left: 10px;
    font-size: 0;
    line-height: 0;
    position: relative;
    background-color: #eeeeee;
    margin-bottom: 10px;
}
.categoryFeatureImage img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.categoryFeatureTitle{
    margin-bottom: 5px;
}
.categoryFeatureDescription{
    font-size: 0.857rem;
}

/* categoryLatest ------------------- */
.categoryLatestBlock{
    margin-top: 20px;
    margin-bottom: -20px;
}
.categoryLatestBlockHead{
    font-size: 1.285rem;
    color: #0a4b9b;
    border-bottom: 2px solid #0a4b9b;
    font-weight: bold;
}
.categoryLatestInner{
    margin-top: 20px;
    overflow: hidden;
}
.categoryLatestHead{
    display: table;
    border-bottom: 1px solid #313131;
    padding-bottom: 10px;
    table-layout: fixed;
    width: 100%;
}
.categoryLatestName{
    display: table-cell;
    font-weight: bold;
    vertical-align: bottom;
    line-height: 1;
    width:85%; /* nishimura */
}
.categoryLatestLink{
    font-size: 0.857rem;
    display: table-cell;
    vertical-align: bottom;
    text-align: right;
    line-height: 1;
    color: #0a4b9b;
}
.categoryLatestLink a:hover{
    text-decoration: underline;
}
.categoryLatest{
    width: 310px;
    margin-bottom: 20px;
    float: left;
}
.categoryLatestInner .categoryLatest:nth-of-type(odd){
    margin-right: 30px;
}
.categoryLatestItem{
    border-bottom: 1px solid #e5e5e5;
    padding: 10px 0 10px 1em;
    background: url(../image/builtin/textarrow.gif) 0 center no-repeat;
}
.categoryLatestItem a{
    display: block;
    line-height: 1.3;
}
.categoryLatestItem a:hover{
    text-decoration: underline;
}
.categoryLatest-simple{
    width: 100%;
    margin-top: 30px;
    margin-bottom: 0;
    float: none;
}
.categoryLatest-simple .categoryLatestName{
    font-size: 1.1428rem;
}

/* categoryRecommend ------------------- */
.categoryRecommend{
    margin-top: 40px;
}
.categoryRecommendHead{
    display: table;
    border-bottom: 1px solid #313131;
    padding-bottom: 10px;
    table-layout: fixed;
    width: 100%;
}
.categoryRecommendName{
    font-size: 1.285rem;
    display: table-cell;
    font-weight: bold;
    vertical-align: bottom;
    line-height: 1;
}
.categoryRecommendLink{
    font-size: 0.857rem;
    display: table-cell;
    vertical-align: bottom;
    text-align: right;
    line-height: 1;
    color: #0a4b9b;
}
.categoryRecommendLink a:hover{
    text-decoration: underline;
}
.categoryRecommendList{
    overflow: hidden;
    padding: 10px 10px 0;
}
.categoryRecommendItem{
    width: 150px;
    float: left;
    margin-right: 10px;
}
.categoryRecommendList .categoryRecommendItem:last-of-type{
    margin-right: 0;
}
.categoryRecommendItem a{
    display: block;
    transition: all 0.3s;
}
.categoryRecommendItem a:hover{
    opacity: 0.7;
}
.categoryRecommendImage{
    width: 150px;
    height: 100px;
    font-size: 0;
    line-height: 0;
    margin-bottom: 5px;
    background-color: rgba(0, 0, 0, 0.4);
    position: relative;
}
.categoryRecommendImage img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* icon ------------------- */
.textIcon{
    display: inline-block;
    vertical-align: middle;
    padding-bottom: 3px;
    padding-left: 5px;
    height: 1.3rem;
}

/* pager ------------------- */
.pager{
    margin-top: 30px;
    text-align: center;
    letter-spacing: -0.4em;
    font-size: 1.142rem;
    line-height: 1;
    white-space: nowrap;
}
.pagerWhite{
    color: #ffffff;
}
.pager a:hover{
    text-decoration: underline;
}
.pager > *{
    display: inline-block;
    letter-spacing: normal;
    letter-spacing: normal;
    vertical-align: middle;
}
.pagerNumBlock{
    letter-spacing: -0.4em;
    margin: 0 25px;
    border-left: 1px solid #6d6d6d;
    border-right: 1px solid #e0e0e0;
}
.pagerNum{
    display: inline-block;
    vertical-align: middle;
    letter-spacing: normal;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #6d6d6d;
}
.pagerNum.noLink{
    padding: 0 8px;
}
.pagerNum a{
    display: block;
    padding: 0 8px;
}
.pagerNum.current{
    padding: 0 8px;
    font-weight: bold;
    color: #0a4b9b;
}
.pagerWhite .pagerNum.current{
    color: #0a96d8;
}

/* breadCrumb ------------------- */
.breadCrumb{
    font-size: 0.857rem;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 10px;
}
.breadCrumb a:hover{
    text-decoration: underline;
}

/* adsense ------------------- */
.contentAdsense{
    text-align: center;
    margin-top: 30px;
}
.contentAdsense2column{
    overflow: hidden;
    margin-top: 20px;
    padding: 0 10px;
}
.contentAdsense2columnLeft,.contentAdsense2columnRight{
    width: calc(50% - 15px);
    float: left;
}
.contentAdsense2columnLeft{
    margin-right: 30px;
}

/* detailHeadInfo ------------------- */
.detailHeadInfo{
    display: table;
    width: 100%;
    margin-top: 10px;
}
.detailHeadInfoLeft{
    display: table-cell;
    vertical-align: top;
    text-align: left;
}
.detailHeadInfoRight{
    display: table-cell;
    vertical-align: top;
    text-align: right;
    padding-top: 10px;
}

/* socialButton ------------------- */
.socialButton{
    font-size: 0;
    white-space: nowrap;
}
.socialButtonItem{
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    font-size: 14px;
}
.socialButton .socialButtonItem:first-of-type{
    margin-left: 0;
}
.socialButton a{
    display: block;
    font-size: 0;
    line-height: 0;
    transition: all 0.3s;
}
.socialButton a:hover{
    opacity: 0.7;
}

.socialButton a.post-clip{
    display: block;
    font-size: 0.8em;
    line-height: 1em;
    padding:5px 10px;
    background-color:#DC555B;
    border:1px solid #DC555B;
    color:#FFFFFF;
    width:120px;
    text-align: center;
    white-space: nowrap;
}

.socialButton a.active{
    background-color:#FFFFFF;
    color:#DC555B;
    border:1px solid #DC555B;
    cursor: default;
}

.socialButton .scrapLink a{
        font-size: 1rem;
        color:#DC555B;
        text-decoration: underline;
}

.socialButton .scrapLink a:hover{
        text-decoration: none;
}

.buttonLine{
	display: inline-block;
	background: url(//static.hokkaido-np.co.jp/image/builtin/line.png) 9% 50% no-repeat;
	background-color: #08a028;
	-webkit-background-size: 28%;
	background-size: 33%;
	font-size: 1rem;
	line-height: 1;
	font-weight: bold;
	border-radius: 4px;
/*	padding: 0.5rem 4% 0.5rem 9%; */
	color: #ffffff;
	box-sizing: content-box;
	white-space: nowrap;
	width: 61px;
	height: 20px;
}


/* detail ------------------- */
.detailSentence{
    font-size: 1.1428rem;
    line-height: 1.7;
}
.detailSentence > a{
    color: #0a4b9b;
    text-decoration: none;
}
.detailSentence > a:hover{
    text-decoration: underline;
}
.detailSentenceBody{
    margin-bottom:25px;
}
.detailSentenceBody:last-of-type{
    margin-bottom: 0;
}
.detailSentenceBody > a{
    color: #0a4b9b;
    text-decoration: none;
}
.detailSentenceBody > a:hover{
    text-decoration: underline;
}

.mainNews.detailSentence h2 {
    font-size: 1.4em;
    font-weight: bold;
    margin: 0 0 25px 15px;
}
.detailStrCount{
    font-size: 14px;
    margin-top: 25px;
    margin-bottom: -25px;
    text-align: center;
    clear: both;
}

.detailMeterText{
    border: 1px solid #e1e1e1;
    padding:5px 10px;
    color:#0a4b9b;
    font-weight:bold;
    font-size:1rem;
    margin:15px 0;
    text-align:center;
}
.detailSource{
    text-align:right;
    margin-top:10px;
}
.detailSourceImage{
    vertical-align: middle;
}
.detailSourceText{
    font-size:1rem;
    padding-right:5px;
}
.detailSourceText a:hover{
    text-decoration: underline;
}
/* contentButton ------------------- */
.contentButtonBlock{
/*    border: 1px solid #e5e5e5; */
    padding: 0 50px;
    margin-top: 25px;
    margin-bottom: 25px;
    clear: both;
}
.contentButtonBlockDescription{
    font-size: 14px;
    text-align: center;
}
.contentButtonBlockInner{
    overflow: hidden;
    text-align: center;
    font-size: 14px;
}
.contentButtonBlockInnerLeft,.contentButtonBlockInnerRight{
    width: auto;
    float: left;
    text-align: center;
}
.contentButtonBlockInnerLeft{
    margin-right: 60px;
    margin-left: 60px;
}
.contentButtonBlockInnerLeftHead{
}
.contentButtonBlockInnerRightHead{
}
.contentButton{
    margin-top: 5px;
}
.contentButtonBlockInner .contentButton .button{
    font-size: 14px;
    padding: 3px 0;
    width: 184px;
}
.contentButtonBlockInner1column{
    width: 60%;
    text-align: center;
    margin: auto;
}

.moviesSubscriptionBlock{
    background-color: #ffffff;
    color:#000000;
}

.contentButtonNewsMail {
    border: 1px solid #e5e5e5;
    padding: 10px 50px;
    margin-top: 10px;
    margin-bottom: 25px;
    clear: both;
}

/* btn ------------------- */
.button{
    border: 2px solid #353535;
    border-radius: 3px;
    background-color: #ebebeb;
    font-size: 1.1428rem;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    padding: 5px 0;
    transition: all 0.3s;
    cursor:pointer;
}
.button:hover{
    background-color: #353535;
    color: #ebebeb;
}

.mypageContentHeadRight .disabled{
        cursor:default;
}

.mypageContentHeadRight .disabled:hover{
        background-color: inherit;
        color: #353535;
}

.button-disabled{
    border: 2px solid #353535;
    border-radius: 3px;
    background-color: #ebebeb;
    font-size: 1.1428rem;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    padding: 10px 0;
    transition: all 0.3s;
}

.purchaseBtn-disabled{
    border: 2px solid #353535;
    border-radius: 3px;
    background-color: #ebebeb;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
    width: 184px;
    padding: 3px 0;
    transition: all 0.3s;
}

.button.small{
    width:35%;
    padding:5px 10px;
    text-align:center;
}

.button-blue{
    border-color: #0a4b9b;
    background-color: #0a4b9b;
    color: #ffffff;
}
.button-blue:hover{
    background-color: #ffffff;
    color: #0a4b9b;
}

.button-blue.pp{
        border-color: #ffffff;
        background-color: #3498DB;
        color: #ffffff;
}

.button-blue.pp:hover{
        background-color: #ffffff;
        color: #3498DB;
}

.button-white{
    border-color: #0a4b9b;
    background-color: #ffffff;
    color: #0a4b9b;
}
.button-white:hover{
    background-color: #0a4b9b;
    color: #ffffff;
}
.button-black{
    background-color: #434343;
    border-color: #434343;
    color: #ffffff;
}
.button-black:hover{
    background-color: #fff;
    color: #434343;
}
.button-black-noFlip{
    background-color: #434343;
    border-color: #434343;
    color: #ffffff;
}

.button-yellow{
    background-color: #f4c700;
    color: #000;
    border-color: #f4c700;
}
.button-yellow:hover{
    background-color: #fff;
    color: #000;
}
.button-yellow-disabled{
    background-color: #f4c700;
    color: #000;
    border-color: #f4c700;
}
.button-yellow-disabled:hover{
    background-color: #f4c700;
    color: #000;
    border-color: #f4c700;
}
.button-noLink{
    background-color: #d3d3d3;
    border-color: #d3d3d3;
    color: #707070;
}
.button-noLink:hover{
    background-color: #d3d3d3;
    border-color: #d3d3d3;
    color: #707070;
}




/* event ------------------- */
.weeklyEvent{
    margin-top: 20px;
}
.weeklyEventHead{
    display: table;
    width: 100%;
    border-bottom: 1px solid #313131;
    padding: 0 0 10px;
}
.weeklyEventTitle{
    display: table-cell;
    font-weight: bold;
    font-size: 1.142rem;
}
.weeklyEventLink{
    display: table-cell;
    text-align: right;
    font-size: 0.857rem;
    color: #0a4b9b;
}
.weeklyEventLink a{
    text-decoration: none;
}
.weeklyEventLink a:hover{
    text-decoration: underline;
}
.weeklyTabCalendar{
    margin-top: 10px;
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border: 1px solid #0a4b9b;
    border-right: none;
}
.weeklyTabCalendarItem{
    display: table-cell;
    border-right: 1px solid #0a4b9b;
    text-align: center;
    padding: 20px 0;
    cursor: pointer;
    line-height: 1;
    position: relative;
}
@-moz-document url-prefix(){
  .weeklyTabCalendar .weeklyTabCalendarItem:last-of-type{
    width: 92px;
  }
}
.weeklyTabCalendarItem.isActive{
    background-color: #0a4b9b !important;
    color: #ffffff !important;
}
.weeklyTabCalendarItem.isActive .weeklyTabCalendarDate span{
	color: #ffffff !important;
}
.weeklyTabCalendarItem.isActive::after{
    content: url(//static.hokkaido-np.co.jp/image/builtin/arrow_active.gif);
    position: absolute;
    width: 24px;
    height: 20px;
    bottom: -30px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.weeklyTabCalendarHead{
    margin-bottom: 10px;
    font-size:1.3rem;
}
.weeklyTabCalendarHead.saturday{
    color: #00a0e9;
}
.weeklyTabCalendarHead.sunday{
    color: #e60012;
}
.weeklyTabCalendarItem.isActive .weeklyTabCalendarHead.saturday{
    color: #ffffff;
}
.weeklyTabCalendarItem.isActive .weeklyTabCalendarHead.sunday{
    color: #ffffff;
}
.weeklyTabCalendarDay{
    font-size: 1.714rem;
    margin-bottom: 10px;
}
.weeklyEventContent{
    margin-top: 28px;
    border: 2px solid #0a4b9b;
    padding: 20px 18px;
}
.weeklyEventContentHead{
    display: table;
    width: 100%;
    padding: 0 0 10px;
}
.weeklyEventContentTitle{
    display: table-cell;
    font-weight: bold;
    font-size: 1.142rem;
}
.weeklyEventContentLink{
    display: table-cell;
    text-align: right;
    font-size: 0.857rem;
    color: #0a4b9b;
}
.weeklyEventContentLink a{
    text-decoration: none;
}
.weeklyEventContentLink a:hover{
    text-decoration: underline;
}
.eventContentListItem{
    border-top: 1px solid #e5e5e5;
}
.eventContentList.lastBorder .eventContentListItem:last-of-type{
    border-bottom: 1px solid #e5e5e5;
}
.eventContentListItem a{
    display: block;
    padding: 15px 0;
    display: table;
    width: 100%;
    transition: all 0.3s;
}
.eventContentListItem a:hover{
    opacity: 0.7;
}
.eventContentListItemSentence{
    display: table-cell;
    vertical-align: top;
    padding-right: 20px;
}
.eventContentListItemTitle{
    font-size: 1.285rem;
    color: #0a4b9b;
    margin-bottom: 10px;
}
.eventContentListItemDescription{
    font-size: 1rem;
    line-height: 2;
}
.eventContentListItemDescription2{
    font-size: 1rem;
    margin-top: 20px;
}
.eventContentListItemImageBlock{
    display: table-cell;
    width: 150px;
    vertical-align: top;
}
.eventContentListItemImage{
    width: 150px;
    height: 112px;
    position: relative;
    background-color: #ffffff;
}
.eventContentListItemImage-large{
    width: 200px;
    height: 150px;
}
.eventContentListItemImage img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -51%);
    -ms-transform: translate(-50%, -51%);
    transform: translate(-50%, -51%);
}
.attentionEvent{
    margin-top: 40px;
}
.attentionEventHead{
    display: table;
    width: 100%;
    background-color: #0a4b9b;
    padding: 10px;
}
.attentionEventTitle{
    display: table-cell;
    vertical-align: middle;
    font-weight: bold;
    font-size: 1.142rem;
    color: #ffffff;
}
.attentionEventTitle a:hover{
    text-decoration: underline;
}
.attentionEventLink{
    vertical-align: middle;
    display: table-cell;
    text-align: right;
    font-size: 0.857rem;
    color: #ffffff;
}
.attentionEventLink a{
    text-decoration: underline;
}
.attentionEventLink a:hover{
    text-decoration: none;
}
.categoryEvent{
    background-color: #f6f6f6;
    padding: 20px;
    margin-top: 50px;
}
.categoryEventHead{
    display: table;
    width: 100%;
    padding: 0 0 10px;
}
.categoryEventTitle{
    display: table-cell;
    font-weight: bold;
    font-size: 1.142rem;
    color: #0a4b9b;
}
.categoryEventTitle a:hover{
    text-decoration: underline;
}
.categoryEventLink{
    display: table-cell;
    text-align: right;
    font-size: 0.857rem;
    color: #0a4b9b;
}
.categoryEventLink a{
    text-decoration: none;
}
.categoryEventLink a:hover{
    text-decoration: underline;
}
.eventList{
    margin-top: 10px;
}
.eventListHead{
    background-color: #f3f3f3;
}
.eventListPager{
    display: table;
    width: 100%;
    table-layout: fixed;
    padding: 10px;
}
.eventListPagerItem{
    display: table-cell;
    vertical-align: middle;
}
.eventListPagerItemRight{
    width: 14%;
    font-size: 1.285rem;
    font-weight: bold;
    text-align: right;
}
.eventListPagerItemCenter{
    width: 70%;
    text-align: center;
    font-size: 1.285rem;
    font-weight: bold;
}
.eventListPagerItem a{
    color: #0a4b9b;
    text-decoration: none;
}
.eventListPagerItem a:hover{
    text-decoration: underline;
}
.eventListContentItem{
    border-bottom: 1px solid #e5e5e5;
}
.eventListContentItem a{
    padding: 10px 0 20px;
    display: table;
    width: 100%;
    transition: all .3s;
}
.eventListContentItem a:hover{
    opacity: .7;
}
.eventListSentence{
    display: table-cell;
    vertical-align: top;
    padding-right: 20px;
}
.eventListImageBlock{
    display: table-cell;
    vertical-align: top;
    width: 100px;
}
.eventListImage{
    width: 150px;
    height: 112px;
    position: relative;
    background-color: #ffffff;
}
.eventListImage img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.eventListTitle{
    font-size: 1.285rem;
    color: #0a4b9b;
    margin-bottom: 10px;
}
.eventListDescription{
    font-size: 1rem;
    line-height: 2;
}
.eventListPagerItemLeft{
    width: 14%;
    font-size: 1.285rem;
    font-weight: bold;
}
/* eventDetail ------------------- */
.eventDetail{
    margin-top: 20px;
}
.eventDetailInfo{
    display: table;
    width: 100%;
    margin-bottom: 20px;
}
.eventDetailDate{
    display: table-cell;
    font-size: 0.857rem;
    vertical-align: middle;
}
.eventDetailSocial{
    display: table-cell;
    font-size: 0;
    vertical-align: middle;
}
.eventDetailSocialItem{
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}
.eventDetailTitle{
    font-size: 1.714rem;
    font-weight: bold;
}
.eventDetailTag{
    margin-bottom: 20px;
}
.eventDetailTag{
    text-align: right;
    font-size: 0;
}
.eventDetailTagItem{
    display: inline-block;
    font-size: 1rem;
    margin-left: 8px;
}
.eventDetailTag .eventDetailTagItem:first-of-type{
    margin-left: 0;
}
.eventDetailTagItem a{
    color: #0a4b9b;
}
.eventDetailTagItem a:hover{
    text-decoration: underline;
}
.eventDetailDescription{
    margin-bottom: 20px;
    font-size: 1.142rem;
    line-height: 1.7;
}
.eventDetailImage{
    width: 360px;
    height: 270px;
    margin: 0 auto 20px;
    position: relative;
}
.eventDetailImage img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.eventDetailTable{
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #e5e5e5;
}
.eventDetailTable tr{
    border-bottom: 1px solid #e5e5e5;
}
.eventDetailTable th,.eventDetailTable td{
    padding: 10px 0;
}
.eventDetailTable th{
    font-weight: bold;
    text-align: left;
    width: 140px;
    padding-right: 10px;
    vertical-align: top;
    font-size: 1.142rem;
}
.eventDetailTableText{
    margin-top: 10px;
    font-size: 1.142rem;
}
.eventDetailTableText a{
    text-decoration: none;
    color: #0a4b9b;
}
.eventDetailTableText a:hover{
    text-decoration: underline;
}
.eventDetailTableTextIsLink a{
    color: #0a4b9b;
    text-decoration: none;
}
.eventDetailTableTextIsLink a:hover{
    text-decoration: underline;
}
.eventDetailTable .eventDetailTableTextBlock .eventDetailTableText:first-of-type{
    margin-top: 0;
}
.eventDetailTableTextLink{
    color: #0a4b9b;
    text-decoration: none;
}
.eventDetailTableTextLink:hover{
    text-decoration: underline;
}

/* mainMovie ------------------- */
.mainMovieBlock > a{
    display: block;
    transition: all 0.3s;
}
.mainMovieBlock > a:hover{
    opacity: .7;
}
.mainMovie,.mainMovieSlider{
    /* margin-bottom: 10px; */
    width: 650px;
    height: 366px;
    background-color: #7f7f7f;
    position: relative;
}
.mainMovie > img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.mainMovieSlider > li{
    width: 650px;
    height: 366px;
    position: relative;
}
.mainMovieSlider > li > img{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

.sliderCaption > a{
    display: none;
}
.sliderCaption > a.active{
    display: block;
}
.mainMovieTitleBlock{
    color: #ffffff;
    border-bottom: 2px solid #ffffff;
    margin-bottom: 20px;
    display: table;
    width: 100%;
    padding-bottom: 5px;
    margin-top:10px;
}
.mainMovieTitleBlockDetail{
    margin-bottom: 0;
}
.mainMovieTitle{
    display: table-cell;
    font-size: 1.142rem;
    font-weight: bold;
    vertical-align: middle;
}
.mainMovieLink{
    display: table-cell;
    font-size: 0.857rem;
    color: #0a96d8;
    vertical-align: bottom;
    text-align: right;
}
.mainMovieLink2{
    font-size: 1.142rem;
    vertical-align: bottom;
    /*text-align: right;*/
    margin-top:5px;
    display: table;
    width: 100%
}
.mainMovieLink2 > a{
    color: #0a96d8;
    display: table-cell;
    text-align: right;
    width: 25%
}
.mainMovieSearchKey{
    display: table-cell;
    width:75%;
}
.mainMovieType{
    font-size: 1.285rem;
    color: #ffffff;
    line-height: 3;
    font-weight: bold;
}
.mainMovieHead{
    font-size: 1.714rem;
    font-weight: bold;
    margin: 10px 0;
    overflow: hidden;
}
.mainMovieHeadTitle{
    font-size: 1.714rem;
    font-weight: bold;
}
.mainMovieCaption{
    font-size: 0.857rem;
    color: #aaaaaa;
    float: right;
    margin-top: 5px;
}
.mainMovieDescription{
    line-height: 1.7;
}
.mainMovieMoreLink{
    text-align: right;
    font-size: 1.285rem;
    color: #0a96d8;
    display: none;
    margin-bottom: 30px;
}
.mainMovieMoreLinkBlock .mainMovieMoreLink:first-of-type{
    display: block;
}
.mainMovieMoreLink a:hover{
    text-decoration: underline;
}

.mainMovieArticleLink{
    text-align: right;
    font-size: 1.285rem;
    color: #0a96d8;
    margin-bottom: 30px;
}
.mainMovieArticleLink a:hover{
    text-decoration: underline;
}

.movieSearch{
    display: table-cell;
    vertical-align: middle;
    width: 176px;
    letter-spacing: -0.4em;
    *display: inline;
}
.movieSearchInputText{
    width: 150px;
    height: 26px;
    border: 1px solid #d9d9d9;
    border-right: none;
    font-size: 14px;
    padding: 2px 3px;
    display: inline-block;
    vertical-align: top;
    letter-spacing: normal;
}
.movieSearchButton{
    display: inline-block;
    vertical-align: top;
    border: none;
    background-color: transparent;
    color: #ffffff;
    font-size: 14px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    letter-spacing: normal;
    line-height: 0;
    font-size: 0;
}
.mainMovieSerchText{
    margin:20px 0 100px;
    font-size:20px;
}
.mainMovieSocialBlock{
    margin-top:10px;
    text-align: right;
}
/* pictureList ------------------- */
.pictureListBlock{
    margin-top: 30px;
}
.pictureListHead{
    display: table;
    border-bottom: 1px solid #969696;
    padding-bottom: 10px;
    color: #0a96d8;
    /* table-layout: fixed; */
    width: 100%;
}
.pictureListName{
    font-size: 1.285rem;
    display: table-cell;
    font-weight: bold;
    vertical-align: bottom;
    line-height: 1.3;
}
.pictureListLink{
    font-size: 0.857rem;
    display: table-cell;
    vertical-align: bottom;
    text-align: right;
    line-height: 1;
}
.pictureList{
    overflow: hidden;
    margin-top: 20px;
    padding: 0 10px;
}
.pictureListItem{
    width: 150px;
    margin-right: 10px;
    float: left;
}
.pictureListItem a{
    display: block;
    transition: all 0.3s;
}
.pictureListItem a:hover{
    opacity: 0.7;
}
.pictureList .pictureListItem:last-of-type{
    margin-right: 0;
}
.pictureListThumbnail{
    position: relative;
    font-size: 0;
    line-height: 0;
    margin-bottom: 10px;
    width: 150px;
    height: 100px;
    overflow: hidden;
    background-color: #7f7f7f;
}
.pictureListThumbnail img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.pictureListCaption{
    line-height: 1.3;
}

/* movieList ------------------- */
.movieListBlock{
    margin-top: 30px;
}
.movieListHead{
    display: table;
    border-bottom: 1px solid #969696;
    padding-bottom: 10px;
    color: #0a96d8;
    /* table-layout: fixed; */
    width: 100%;
}
.movieListName{
    font-size: 1.285rem;
    display: table-cell;
    font-weight: bold;
    vertical-align: bottom;
    line-height: 1.3;
}
.movieListLink{
    font-size: 0.857rem;
    display: table-cell;
    vertical-align: bottom;
    text-align: right;
    line-height: 1;
}
.movieListLink a:hover{
    text-decoration: underline;
}
.movieList{
    overflow: hidden;
    margin-top: 20px;
}
.movieListItem{
    width: 200px;
    margin-right: 25px;
    float: left;
}
.movieList .movieListItem:nth-of-type(n+4){
    margin-top: 10px;
}
.movieListItem a{
    display: block;
    transition: all 0.3s;
}
.movieListItem a:hover{
    opacity: 0.7;
}

.movieList .movieListItem:last-of-type,.movieList .movieListItem:nth-child(3n){
    margin-right: 0;
}
.movieListThumbnail{
    position: relative;
    font-size: 0;
    line-height: 0;
    margin-bottom: 10px;
    width: 200px;
    height: 113px;
    overflow: hidden;
    background-color: #7f7f7f;
}
.movieListThumbnail.noResize{
    height: 112px;
    background-color: transparent;
    text-align: center;
}
.movieListThumbnail img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.movieListThumbnail.noResize img{
    width: auto;
    height: 112px;
    max-width: initial;
    max-height: initial;
    /* IE用 */
    max-width: auto;
    max-height: auto;
    position: static;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.movieListKey{
    width: 100%;
    height: 100%;
    position: absolute;
    background: url(//static.hokkaido-np.co.jp/image/builtin/padlock.svg) no-repeat 50% 50%;
    background-size:50px;
    top:0;
    left:0;
    right: 0;
    opacity: 0;
    transition: all 0.1s;
}

.movieListKey:hover {
    opacity: 1;
}


/* .movieListThumbnail::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: block;
    background: rgba(0, 0, 0, 0.5) url(../image/playback.png) center center no-repeat;
    -webkit-background-size: 30%;
    background-size: 30%;
} */
.movieListCaption{
    line-height: 1.3;
}
.movieListCaption .postDate{
    color: #aaaaaa;
}
.movieDate{
    font-size:1rem;
}
.movieListDate{
    font-size:0.9rem;
}

/* photoGallery ------------------- */

.photoGallery{
    margin-top: 20px;
}
.photoGalleryHead{
    display: table;
    border-bottom: 2px solid #0a4b9b;
    padding-bottom: 10px;
    color: #0a4b9b;
    table-layout: fixed;
    width: 100%;
}
.photoGalleryName{
    font-size: 1.285rem;
    display: table-cell;
    font-weight: bold;
    vertical-align: bottom;
    line-height: 1;
}
.photoGalleryLink{
    font-size: 0.857rem;
    display: table-cell;
    vertical-align: bottom;
    text-align: right;
    line-height: 1;
}
.photoGalleryLink a:hover{
    text-decoration: underline;
}
.photoGalleryList{
    overflow: hidden;
    margin-top: 20px;
}
.photoGalleryItem{
    width: 310px;
    margin-right: 30px;
    float: left;
    *float: none;
    *text-align: center;
    *margin-right: 0;
    *margin: 0 auto 30px;
}
.photoGalleryItem a{
    display: block;
    transition: all 0.3s;
}
.photoGalleryItem a:hover{
    opacity: 0.7;
}
.photoGalleryList .photoGalleryItem:last-of-type{
    margin-right: 0;
}
.photoGalleryThumbnail{
    width: 310px;
    height: 232px;
    margin-bottom: 5px;
    position: relative;
    overflow: hidden;
    display: block;
    font-size: 0;
    line-height: 0;
}
.photoGalleryThumbnail img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    *position: static;
}
.photoGalleryCaption .postDate{
    margin-left: 5px;
    color: #aaaaaa;
}

/* galleryList ------------------- */
.galleryList{
    padding-top: 30px;
    overflow: hidden;
    border-top: 1px solid #ffffff;
}
.galleryListItem{
    width: 200px;
    float: left;
    margin-right: 25px;
    margin-bottom: 30px;
}
.galleryListItem > a{
    transition: all 0.3s;
    display: block;
}
.galleryListItem > a:hover{
    opacity: .7;
}
.galleryList .galleryListItem:nth-of-type(3n){
    margin-right: 0;
}
.galleryListThumbnail{
    width: 200px;
    height: 113px;
    position: relative;
    background-color: #7f7f7f;
}
.galleryListThumbnail.noResize{
    height: 112px;
    background-color: transparent;
    text-align: center;
}
.galleryListThumbnail img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.galleryListThumbnail.noResize img{
    width: auto;
    height: 112px;
    max-width: initial;
    max-height: initial;
    /* IE用 */
    max-width: auto;
    max-height: auto;
    position: static;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}
.galleryListText{
    margin-top: 5px;
}
/* article_photo ---------------- */
.articlePhotoExplanation{
    font-size: 1.2rem;
    font-weight: normal;
    margin: 10px 0;
    overflow: hidden;
}
.articlePhotoSlider{
    width: 650px;
    height: 512px;
    background-color: #eeeeee;
    position: relative;
}

.articlePhotoSlider > li > img{
    max-height:512px;
    left: 0;
    right: 0;
    margin:auto;
}
.articlePhotoListThumbnail{
    background-color: #eeeeee;
}
.articlePhotoMoreLink{
    text-align: right;
    font-size: 1.285rem;
    color: #0a4b9b;
    margin-bottom: 30px;
}


/* movieCategory ------------------- */
.movieCategory{
    overflow: hidden;
    margin-top: 30px;
    margin-bottom: -20px;
}
.movieCategoryItem{
    float: left;
    width: 310px;
    margin-right: 30px;
    margin-bottom: 20px;
}
.movieCategoryItemSmall{
    width: 200px;
    margin-right: 25px;
}
.movieCategoryItemDouble{
    width: 425px;
}
.movieCategory .movieCategoryItem:nth-of-type(2n){
    margin-right: 0;
}
.movieCategory .movieCategoryItemSmall:nth-of-type(2n){
    margin-right: 25px;
}
.movieCategory .movieCategoryItemSmall:nth-of-type(3n){
    margin-right: 0;
}
.movieCategoryItem .movieListItem{
    width: 310px;
}

.movieCategoryItem .movieListItem{
    width: 310px;
}
.movieCategoryItemSmall .movieListItem,
.movieCategoryItemDouble .movieListItem{
    width: 200px;
}

.movieCategoryItem .movieListThumbnail{
    width: 310px;
    height: 210px;
}
.movieCategoryItemSmall .movieListThumbnail,
.movieCategoryItemDouble .movieListThumbnail{
    width: 200px;
    height: 112px;
}

/* disaster ------------------- */
.disasterBlock{
    margin-top: 50px;
    margin-bottom: 50px;
}
.disasterBlockFirst{
    margin-top: 20px;
}
.disasterHead{
    border-bottom: 1px solid #313131;
    display: table;
    width: 100%;
    padding: 6px 0;
}
.disasterTitle{
    font-size: 1.142rem;
    font-weight: bold;
    display: table-cell;
    vertical-align: middle;
    line-height: 1;
}
.disasterDate{
    display: table-cell;
    text-align: right;
    line-height: 1;
}
.disasterDate a{
    color: #0a4b9b;
}
.disasterDescription{
    font-size: 0.857rem;
    margin-top: 10px;
}
.disasterDescription.noData{
    font-size: 1rem;
    margin-top: 15px;
}
.disaster{
    margin-top: 10px;
    overflow: hidden;
}
.disasterBodyTitle{
    font-weight: bolder;
    font-size: 110%;
}
.disasterBodyBody{
}
.disasterAreaBlock{
    width: 320px;
    float: left;
}
.disasterArea{
    margin-top: 20px;
    position: relative;
}
.disasterArea img{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.disasterArea .disasterAreaFoundation{
    z-index: 1;
}
.disasterColorList{
    margin-top: 20px;
}
.disasterColorListItem::before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 1rem;
    height: 1rem;
    border: 1px solid #91abc9;
}
.disasterColorAlart::before{
    background-color: #f9cdba;
}
.disasterColorWarning::before{
    background-color: #fffbcc;
}
.disasterColorText{
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5rem;
}
.disasterTableBlock{
    float: right;
    width: 330px;
}
.disasterIconList{
    font-size: 0;
}
.disasterIconListItem{
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
}
.disasterIconList .disasterIconListItem:first-of-type{
    margin-left: 0;
}
.disasterIconListItem > *{
    font-size: 1rem;
    display: inline-block;
    vertical-align: middle;
}
.disasterIconListItem p{
    margin-left: 4px;
}
.disasterTable{
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    border: 1px solid #94adca;
}
.disasterTable th{
    text-align: left;
    vertical-align: middle;
    font-weight: normal;
    border: 1px solid #94adca;
    padding: 5px 10px;
}
.disasterTable tr th:first-of-type{
    width: 96px;
}
.disasterTable tr th:last-of-type{
    width: 80px;
}
.disasterTable tr:not(:first-of-type):hover{
/*    background-color: #d8e4f2;*/
}
.disasterTable tr:not(:first-of-type) th{
    font-weight: bold;
}
.disasterTable td:first-of-type:hover{
    background-color: #d8e4f2;
}
.disasterTable td{
    border: 1px solid #94adca;
    vertical-align: top;
    height: 100%;
}
.disasterTable td.nolink{
	height:42px;
}
.disasterTable td.nolink:first-of-type:hover{
	background: none !important;
}
.disasterTable td > a{
    display: block;
    height: 100%;
    width: 100%;
    padding: 5px 10px;
}
.disasterList{
    font-size: 0;
}
.disasterListItem{
    display: inline-block;
    font-size: 1rem;
    margin-right: 5px;
    padding: 0 5px;
    vertical-align: middle;
}
.disasterList .disasterListItem:last-of-type{
    margin-right: 0;
}
.disasterList .disasterListItem:nth-of-type(n){
/*    margin-top: 10px;*/
    margin: 5px;
}
.disasterWarning{
    background-color: #fffbcc;
}
.disasterAlart{
    background-color: #f9cdba;
}
.evacuationlist{
    font-size: 0;
    text-align: right;
}
.evacuationlistItem{
    display: inline-block;
    margin: 5px;
    vertical-align: middle;
}
/*
.evacuationlist .evacuationlistItem:last-of-type{
    margin-right: 0;
}
*/
.disasterLeft{
    float: left;
    width: 310px;
}
.disasterRight{
    float: right;
    width: 310px;
}
.disasterRight img{
    width: 310px;
}
.disasterInfoListItem{
    border-bottom: 1px solid #e5e5e5;
    border-top: 1px solid #f4f4f4;
}
.disasterInfoList .disasterInfoListItem:first-of-type{
    border-top: none;
}
.disasterInfoListItem a{
    display: block;
    padding: 7px 0;
    transition: all .3s;
}
.disasterInfoListItem a:hover{
    opacity: .7;
}
.disasterInfoDate{
    color: #aaaaaa;
}

/* disasterListBlock ------------------- */
.disasterListBlock > ul{
	padding: 0;
	margin: 0;
	width: 100%;
	overflow: auto;
}
.disasterListBlock > ul.List1column li{
	margin: 0;
	list-style-type:none;
	float: left;
	width: 100%;
}
.disasterListBlock > ul.List2column li{
	padding: 2% 1%;
	margin: 0;
	list-style-type:none;
	float: left;
	width: 50%;
}
.disasterListBlock .disasterListBlockSubject{
}
.disasterListBlock .disasterListBlockSubject span,
.disasterListBlock .disasterListBlockSubject a{
	background-color: #d8e4f2;
	color: #0a4b9b;
	display: table;
	padding: 2% 10% 1%;
	font-weight:bold;
}
.disasterListBlock .disasterListBlockSubject a:hover{
	/*text-decoration:underline ;*/
	color: #ffffff;
	background-color: #00418f;
}
.disasterListBlock .disasterListBlockContent{
	padding: 2%;
	display:table;
}
.disasterListBlock .disasterListBlockContent p{
	margin-bottom: 1%;
	word-break: keep-all !important;
}
.disasterListBlock .disasterListBlockContent span{
	display: table-cell;
}
.disasterListBlock .disasterListBlockContent span:first-child{
	width: 100px;
}

/* weatherBlock ------------------- */
.weatherHeadBlock {
    display: table;
    width: 100%;
    border-bottom: 2px solid #0a4b9b;
    padding: 20px 0 5px;
}
.weatherHeadTitle {
    display: table-cell;
    font-size: 1.714rem;
    color: #0a4b9b;
    font-weight: bold;
    line-height: 1;
}
.weatherHeadLink {
    display: table-cell;
    text-align: right;
}
.weatherHeadLink a{
    color: #0a4b9b;
}
.weatherBlock{
    margin-top: 15px;
}
.weatherDetailBlock{
    border: 1px solid #e7e7e7;
    margin-top: 10px;
    padding: 15px 40px;
}
.weatherDetail{
    margin-top: 30px;
}
.weatherDetailBlock .weatherDetail:first-of-type{
    margin-top: 0;
}
.weatherDetailDate{
    font-size: 1.714rem;
    line-height: 1;
    font-weight: bold;
    margin-bottom: 20px;
}
.weatherDetailInfoTop{
    display: table;
    width: 100%;
    margin-bottom: 10px;
}
.weatherDetailIconBlock{
    display: table-cell;
    vertical-align: bottom;
    width: 120px;
    text-align: center;
}
.weatherDetailIconBlock img{
    width: 90%;
}
.weatherDetailTemperature{
    margin-top: 5px;
    font-size: 1.142rem;
}
.weatherDetailTemperatureMax{
    color: #e60012;
}
.weatherDetailTemperatureMin{
    color: #00a0e9;
}
.weatherDetailTextBlock{
    line-height: 1.5;
    font-size: 1.142rem;
    display: table-cell;
    padding-left: 20px;
}
.weatherDetailText{
    margin-top: 5px;
}
.weatherDetailText_weather_str{
    font-size: 1.714rem;
    font-weight:bold;
}
.weatherDetailTextBlock .weatherDetailText:first-of-type{
    margin-top: 0;
}
.weatherDetailInfoBottom{
    margin-bottom: 10px;
}
.weatherDetailInfoTable{
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #d9d9d9;
}
.weatherDetailInfoTableLarge{
    margin-top: 10px;
}
.weatherDetailInfoTableHead{
    background-color: #f7f7f7;
}
.weatherDetailInfoTableHead th{
    border: 1px solid #d9d9d9;
    padding: 5px 0;
    font-weight: normal;
    text-align: center;
}
.weatherDetailInfoTable th{
    font-weight: normal;
}
.weatherDetailInfoTable td{
    border: 1px solid #d9d9d9;
    padding: 5px 0;
    text-align: center;
    font-size: 1.142rem;
}
.weatherDetailInfoTable.weatherDetailInfoTableLarge th,.weatherDetailInfoTable.weatherDetailInfoTableLarge td{
    font-size: 1.285rem;
}
.weatherDetailInfoTable .weatherDetailInfoTableLargeIcon{
    padding: 15px 0;
}
.weatherDetailInfoTableLargeIcon img{
    height: 30px;
}
.weatherDetailIndexBlock{
    display: table;
    table-layout: fixed;
    width: 100%;
}
.weatherDetailIndex{
    display: table-cell;
    text-align: center;
}
.weatherDetailIndexInner{
    width: 120px;
    text-align: center;
}
.weatherDetailIndexLeft{
    text-align: left;
}
.weatherDetailIndexCenter{
    text-align: center;
}
.weatherDetailIndexCenter .weatherDetailIndexInner{
    margin: 0 auto;
}
.weatherDetailIndexRight{
    text-align: right;
}
.weatherDetailIndexRight .weatherDetailIndexInner{
    margin-left: auto;
}
.weatherDetailIndex.weatherDetailIndexLegend{
    width: 70px;
    text-align: right;
}
.weatherDetailIndexLegend a{
    color: #0a4b9b;
    display: inline-block;
    line-height: 1;
}
.weatherDetailIndexLegend .linkBorder{
    border-bottom: 1px solid #0a4b9b;
    line-height: 1;
    display: inline-block;
}
.weatherDetailIndexLegend a:hover .linkBorder{
    border: none;
}
.weatherDetailIndexTitle{
    margin-bottom: 5px;
    text-align: center;
}
.weatherDetailIndexIcon{
    letter-spacing: -0.4em;
    text-align: center;
}
.weatherDetailIndexIconItem{
    letter-spacing: normal;
    display: inline-block;
    vertical-align: bottom;
    padding: 0 3px;
}

/* weather2column ------------------- */
.weather2Column{
	overflow: hidden;
}
.weatherLeft{
	float: left;
	width: 40%;
}
.weatherLeft img{
	width: 100%;
	margin-top:20px;
}
.weatherRight{
	float: right;
	width: 59%;
}
.weather2ColumnDummyImage{
	border: #ddd solid 1px;
	padding: 35%;
	margin-top: 20px;
	height: 90%;
}
table.weatherTable2Column{
	table-layout: fixed;
	float: left;
	width: 60%;
	margin-right: 1%;
}
table.weatherTable2Column tbody tr:nth-of-type(even){
	background-color: #efefef;
}
table.weatherTable2Column tbody tr th{
	text-align: left;
	padding-left: 5%;
	width: 70%;
	font-weight: normal;
	font-size: 1.0rem;
}
table.weatherTable2Column tbody tr td{
	width: 30%;
	font-size: 1.0rem;
}
table.weatherTable2Column:last-of-type{
	margin-right: 0;
	width: 39%;
}
table.weatherTable2Column:last-of-type > tbody tr th{
	width: 55%;
}
table.weatherTable2Column:last-of-type > tbody tr td{
	width: 45%;
}

/* weatherTable ------------------- */
.weatherTableBlock{
    margin-top: 20px;
}
.weatherTable{
    border: 1px solid #959595;
}
.weatherTable,.weatherTable tr,.weatherTable th,.weatherTable td{
    vertical-align: middle;
    text-align: center;
    padding: 5px 0;
}
.weatherTable tr > *:first-child,.weatherTable .weatherTableDayEnd{
    border-right: 1px solid #959595;
}
.weatherTable2,.weatherTable2 tr,.weatherTable2 th,.weatherTable2 td{
    border: 1px solid #d0d0d0;
}
.weatherTable2 tr > *:first-child{
    border: 1px solid #d0d0d0;
}
.weatherTable{
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    margin-top: 20px;
}
.weatherTable th{
    font-size: 1.142rem;
    font-weight: bold;
}
.weatherTable2 th{
    font-size: 1.285rem;
    font-weight: bold;
}
.weatherTable-detail th{
    font-size: 1rem;
    font-weight: normal;
}
.weatherTable .weatherTableDate{
    font-size: 1.142rem;
    padding: 10px 0;
    font-weight: bold;
}
.weatherTable2 .weatherTableDate{
    font-weight: normal;
    font-size: 1.714rem;
}
.weatherTable .weatherTableDay{
    font-size: 1rem;
}
.weatherTable .weatherTableTime{
    background-color: #eeeeee;
    font-size: 0.857rem;
    border-top: none;
}
.weatherTable-detail .weatherTableTime{
    font-size: 1rem;
}
.weatherTableTime .weatherTableTime,.weatherTableTime td{
    border-right: 2px solid #ffffff;
}
.weatherTableTime td:last-of-type{
    border-right: 1px solid #959595;
}
.weatherTable .weatherTablePlace{
    padding: 0;
    color: #0a4b9b;
}
.weatherTable2 .weatherTablePlace{
    width: 20%;
}
.weatherTablePlace a{
    display: block;
    width: 100%;
    height: 100%;
    /* padding: 20px 0; */
}
.weatherTablePlace.weatherTablePlace2line a{
    /* padding: 10px 0; */
}
.weatherTablePlace a:hover{
    text-decoration: underline;
}
.weatherTable .weatherTableData{
    text-align: center;
    padding: 15px 0;
}
.weatherTable2 .weatherTableData{
    padding: 10px 0;
}
.weatherTableData img{
    display: inline-block;
    vertical-align: middle;
    height: 25px;
}
.weatherTableDataInr{
    display: table;
    width: 100%;
}
.weatherTableDataIcon{
    display: table-cell;
    width: 50%;
    text-align: center;
    vertical-align: middle;
}
.weatherTableDataTemperature{
    display: table-cell;
    vertical-align: middle;
    width: 50%;
    text-align: center;
}
.weatherTableDataTemperatureMax{
    color: #e60012;
}
.weatherTableDataTemperatureMin{
    color: #00a0e9;
}
.weatherTableData p{
    font-size: 0.857rem;
    line-height: 1;
    margin-top: 8px;
}
.weatherTable-detail .weatherTableData p{
    font-size: 1.285rem;
}
.weatherTable2 .weatherTableData p{
    font-size: 1rem;
    margin-top: 0;
}
.weatherTable .weatherTableRow:nth-of-type(even){
    background-color: #efefef;
}
.weatherTable .weatherTableRow:nth-of-type(even) td.noneBorder{
    border-right: 2px solid #ffffff;
}
.weatherTable .weatherTableDayEnd, .weatherTable .weatherTableRow:nth-of-type(even) td.noneBorder:last-of-type{
    border-right: 1px solid #959595 !important;
}

/* weatherWarning ------------------- */
.weatherWarning{
    margin-top: 20px;
}

/* weatherLegend ------------------- */
.weatherLegendBlock{
    margin-top: 20px;
}
.weatherLegendTitle{
    color: #0a4b9b;
}
.weatherLegendTable{
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ffffff;
}
.weatherLegendTable tr{
    border-bottom: 1px solid #dcdcdc;
}
.weatherLegendTable tr:first-of-type{
    background-color: #f7f7f7;
}
.weatherLegendTable th{
    border-right: 1px solid #dcdcdc;
    font-weight: normal;
    text-align: left;
    padding: 5px 0 5px 5px;
    font-size: 0.857rem;
}
.weatherLegendTable th:not(:first-of-type){
    padding-left: 10px;
}
.weatherLegendTable tr th:last-of-type{
    border-right: none;
}
.weatherLegendTable td{
    border-right: 1px solid #dcdcdc;
    padding: 10px 20px 10px 5px;
}
.weatherLegendTable td:last-of-type{
    border-right: none;
}
.weatherLegendTable td:not(:first-of-type){
    padding: 0 20px;
}
.weatherLegendList{
    display: table;
    border-collapse: collapse;
    border: 1px solid #ffffff;
    width: 100%;
}
.weatherLegendListTr{
    display: table-row;
}
.weatherLegendListTd{
    display: table-cell;
    line-height: 1;
    vertical-align: middle;
    font-size: 0.857rem;
    padding: 3px 0;
}
.weatherLegendListTr .weatherLegendListTd:first-of-type{
    padding-right: 10px;
}
.weatherLegendListTd img{
    width: 12px;
}

/* weatherSlide ------------------- */
.weatherSlide{
}
.weatherSlide img {
	margin:0 auto;
	display:block;
	width:400px;
	height:480px;
}
.weatherSlide .sliderCaption{
	text-align:center;
}

/* weatherMark ------------------- */
img.weatherMarkArrow{
}
img.weatherMarkVerticalBar{
	vertical-align: middle;
}

/* txtBox ---------------- */
.txtBox {
	width: 100%;
	display: table;
}
.txtBoxOverTopRight{
    margin-top: 10px;
    display: block;
    text-align: right;
    line-height: 1;
}
.txtBoxOverTopLeft{
	margin-top: -20px;
	display: block;
	text-align: left;
	line-height: 1;
}
.txtBoxRight{
	float: right;
	line-height: 1;
}
.txtBoxLeft{
	float: left;
	line-height: 1;
}

/* borderBox ------------------- */
.borderBox{
    width: 100%;
    border-top: 2px solid #4674aa;
}
.borderBox > .borderBoxRight{
    text-align: right;
    margin-top: -6%;
    padding-right: 3%;
}

/* feature ------------------- */
.feature{
    margin-top: 15px;
}
.featureListItem{
    padding-bottom: 25px;
    margin-bottom: 15px;
    border-bottom: 1px solid #efefef;
}
.featureListHead{
    display: table;
    width: 100%;
    table-layout: fixed;
    background-color: #d8e4f2;
    border-left: 5px solid #1b3390;
    padding: 10px;
    margin-bottom: 20px;
}
.featureListTitle{
    display: table-cell;
    vertical-align: middle;
    font-size: 1.142rem;
    line-height: 1;
    font-weight: bold;
}
.featureListLink{
    display: table-cell;
    text-align: right;
    font-size: 0.857rem;
    width:50px;
}
.featureListLink a{
    text-decoration: underline;
    color: #0a4b9b;
}
.featureListLink a:hover{
    text-decoration: none;
}
.featureListBodyTable{
    display: table;
    width: 100%;
    padding: 0 7px;
}
.featureListBodyTableCell{
    display: table-cell;
    vertical-align: top;
}
.featureListBodyTableCellLeft{
    display: table-cell;
    vertical-align: top;
    width:69%;
}
.featureListBodyTxt{
    padding-right: 15px;
}
.featureListBodyTitle{
    font-size: 1.285rem;
    color: #0a4b9b;
    margin-bottom: 20px;
}
.featureListBodyTitle a:hover{
    text-decoration: underline;
}
.featureListBodyDescription{
    font-size: 0.857rem;
}
.featureListBodyDescription a{
    color: #0a4b9b;
    text-decoration: underline;
}
.featureListBodyDescription a:hover{
    text-decoration: none;
}
.featureListBodyImg{
    width: 200px;
    height: 150px;
    background-color: #eeeeee;
    position: relative;
}
.featureListBodyImg img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.featureListBodyTable2{
    display: table;
    width: 100%;
}

.featureListBodyTable2 > .categoryArchiveItemTitle{
    padding-right: 10px
}

.featureListBodyTable2 > .featureListBodyDescription{
    padding-right: 10px
}

.categoryTag-feature{
    margin-top:5px;
    text-align: left;
}
.categoryTag-feature span{
    display: inline-block;
    letter-spacing: normal;
    border: 1px solid #e1e1e1;
    background-color: #f9f9f9;
    padding: 4px 8px;
    line-height: 1;
    margin: 0 6px 6px 0;
}

/* .categoryTag-feature span:first-of-type{
    padding-left: 0;
}

.categoryTag-feature span:last-of-type{
    border-right: none;
} */

/* pressrelease --------------- */
.categoryTag-pressRelease span{
    display: inline-block;
    letter-spacing: normal;
    border-right: 1px solid #e1e1e1;
    padding: 4px 8px;
    line-height: 1;
    color: #7e7e7e;
}
.categoryTag-pressRelease span:first-of-type{
    padding-left: 0;
}

.categoryTag-pressRelease span:last-of-type{
    border-right: none;
}

/* Dosports ------------------- */
.DospoArea{
    overflow:hidden;
    padding:10px 0;
    margin-top:10px
}

.DospoAreaLeft{
    float:left;
    width:250px
}
.DospoAreaRight{
    line-height:2;
    font-size:18px;
    width: 400px;
    margin-left: 250px;
}
.DospoAreaBnr{
    margin-top: 15px;
}
.DospoAreaBnr a{
    transition: opacity 0.3s;
}
.DospoAreaBnr a:hover{
    opacity: 0.8;
}

/* Search ------------------- */
.SearchCountArea{
    padding:10px 0;
    text-align:right;
}

/* error ------------------- */
.errorBlock{
    margin-top:40px;
    width:100%
}
.errorBlock div{
    width:600px;
    margin:0 auto;
    text-align:left;
}
.errorMessage{
    font-size:20px;
    color:#e60012
}
.errorPrev{
    text-align:center;
    margin-top:100px;
    font-size:18px;
    color: #0a4b9b;
}

.errorPrev a:hover{
    text-decoration: underline;
}

/* mypage ------------------- */
.mypage{}
.mypageHead{
	display: table;
	width: 100%;
	padding: 15px 0;
	border-bottom: 2px solid #0a4b9b;
}
.mypageHeadLeft{
	display: table-cell;
	vertical-align: bottom;
}
.mypageTitle{
	font-size: 24px;
	line-height: 1;
	color: #0a4b9b;
	font-weight: bold;
}
.mypageHeadRight{
	display: table-cell;
	text-align: right;
	vertical-align: bottom;
}
.mypageHeadText{
	line-height: 1;
	font-size: 16px;
}
.mypageHeadLink{
	font-weight: bold;
	color: #0a4b9b;
}
.mypageHeadLink:hover{
	text-decoration: underline;
}
.mypageDescription{
	margin-top: 20px;
}
.mypageContent{
	margin-top: 20px;
}
.mypageContentHead{
	background-color: #f3f3f3;
	display: table;
	padding: 5px 10px;
	width: 100%;
        margin: 5px 0;
}

.mypageContent .passport{
	background-color: #3498DB;
        color:#FFFFFF;
}

.mypageContent .button-disabled{
        cursor:default;
}

.mypageContent .button-disabled:hover{
        background-color: #ebebeb;
        color:#353535;
}

.mypageContentHeadLeft{
	display: table-cell;
	vertical-align: middle;
}
.mypageContentHeadLeft{
	font-weight: bold;
	font-size: 16px;
}

.myWordList .mypageContentHeadLeft{
        display: block;
        width:400px;
        padding:0.5rem;
}
.myWordCaption{
        margin: 1rem 0;
}

.mypageContentHeadRight{
	display: table-cell;
	text-align: right;
	vertical-align: middle;
}
.mypageContentHeadRight .button{
	width: auto;
	padding: 0.5rem 0.5rem;
	line-height: 1;
	position: relative;
}
.mypageContentHeadRight .button.arrow::before{
	content: "▲";
	position: relative;
	transform: rotate(90deg);
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
	font-size: 10px;
	line-height: 1;
	margin-top: -1px;
}

.mypageContentBody{
	padding: 10px 0 20px;
}
.mypageContentText.caution{
	font-weight: bold;
	color: #ff0000;
}
.mypageContentText.info{
	color: #0a4b9b;
}
.mypageContentBody .mypageContentText:not(:first-of-type){
	margin-top: 10px;
}
.mypageContentBtn{
	width: 260px;
	margin: 20px auto 0;
	text-align: center;
}
.userName{
	color: #0a4b9b;
}

/* form ------------------- */
.formHead{
    display: table;
    width: 100%;
    padding: 15px 0;
    border-bottom: 2px solid #0a4b9b;
}
.formHeadLeft{
    display: table-cell;
    vertical-align: bottom;
}
.formTitle{
    font-size: 24px;
    line-height: 1;
    color: #0a4b9b;
    font-weight: bold;
}
.formDescription{
    margin-top: 20px;
}
.formQuestionTitle{
    margin:40px 0 -10px 0;
    text-align:center;
    color: #0a4b9b;
    font-size:20px;
}
.formBlock{
	margin-top: 20px;
}
.formList{
	border-top: 1px solid #e5e5e5;
}
.formListItem{
	border-bottom: 1px solid #e5e5e5;
	display: table;
	width: 100%;
	table-layout: fixed;
	padding: 10px 0;
}
.formListName{
	display: table-cell;
	vertical-align: middle;
	width: 40%;
	font-weight: bold;
        overflow: hidden;
}
.h50 {
        height:50px;
}

.formListName h3{
        width:65%;
        text-align: left;
        float:left;
}
.formListName p{
        width:35%;
        text-align: right;
        font-weight:bold;
        float:right;
        font-size:0.9rem;
        margin-top: 3px;
}

.formListName .formListNameExplanation{
    width: auto;
    text-align: left;
    font-weight: normal;
    float: none;
}

.mailSetting .formListName,
.weatherSetting .formListName{
	width: 30%;
}

.weatherSetting .formListInput p{
        font-size:0.8rem;
        margin:5px 0;
}


.formListName .required{
	color: #ff0000;
}
.formListInput{
	display: table-cell;
	vertical-align: middle;
	padding-left: 15px;
}

.formListInput .disabled{
        color:#999999;
        cursor: default;
        background: #E0E0E0;
        pointer-events: none;
}

.formListInput .disabled:hover{
        text-decoration: none !important;
}

.formListInput textarea{
	width: 100%;
	resize: vertical;
	min-height: 150px;
	padding: 5px;
}
.formListInput .zipTrigger{
	text-decoration: underline;
	color: #0a4b9b;
	cursor: pointer;
	margin-left: 1rem;
}
.formListInput .formListInputInner:not(:first-of-type){
	margin-top: 10px;
}
.formListInput .formListInputInner.formListInputInnerInline{
	margin-top: 0;
	display: inline-block;
}
.formListInput .formListInputInner.formListInputInnerInline:not(:last-of-type){
	margin: 5px 10px 5px 0;
}
.formListInputInner.formListInputInnerInline input{
	display: none;
}

.formListInputInner.formListInputInnerInline input + .radioIcon{
	background: url(../image/builtin/radio_off.png) 0 50% no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
	padding-left: 25px;
        cursor: pointer;
}

.formListInputInner.formListInputInnerInline input:checked + .radioIcon{
	background: url(../image/builtin/radio_on.png) 0 50% no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
        cursor: pointer;
}

.formListInputInner.formListInputInnerInline input + .checkboxIcon{
	background: url(../image/builtin/checkbox_off.png) 0 50% no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
	padding-left: 25px;
        cursor: pointer;
}
.formListInputInner.formListInputInnerInline input:checked + .checkboxIcon{
	background: url(../image/builtin/checkbox_on.png) 0 50% no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
        cursor: pointer;
}

.formListInputInner.formListInputInnerInline input + .radioIcon.disabled,
.formListInputInner.formListInputInnerInline input:checked + .radioIcon.disabled,
.formListInputInner.formListInputInnerInline input + .checkboxIcon.disabled,
.formListInputInner.formListInputInnerInline input:checked + .checkboxIcon.disabled{
        color: #999999;
        cursor: default;
        filter:alpha(opacity=70);
        -moz-opacity: 0.7;
        opacity: 0.7;
}


.formListInput input:not([type="checkbox"]),
.formListInput input:not([type="radio"]),
.formListInput select,
.formListInput textarea{
	width: 100%;
	border: 1px solid #c7e1ea;
}
.formListInput input.formSmall{
	width: 30%;
}
.formListInput input.formMiddle{
	width: 60%;
}

.formListInput input.formtiny{
	width: 65px;
}

.formListInput .js-getAddressLink.disabled{
    opacity: 0.5;
    cursor: default;
    background: #fff;
    pointer-events: none;
}

.mailServiceCaption {
        font-size:0.8rem;
        margin-bottom: 0.5rem;
}

.areaBox {
        margin:0.5rem;
}
.areaBox select{
        width:30%;
        display:inline-block;
}

.formBtn{
	margin-top: 30px;
	text-align: center;
}
.formBtnItem{
	width: 300px;
	display: inline-block;
	margin: 0 auto;
}
.formBtn .formBtnItem:not(:last-of-type){
	margin-right: 30px;
}
.formMessage{
    font-size:18px;
    margin:20px 0 80px;
}
.formImage{
    max-width:320px;
    vertical-align:middle;
}

/* form_list ------------- */
.formArchive{
    margin-top: 20px;
}
.formArchiveHead{
    border-bottom: 2px solid #0a4b9b;
    color: #0a4b9b;
    font-size: 1.714rem;
    font-weight: bold;
}
.formArchiveList{
    border-top: 1px solid #e5e5e5;
}
.formArchiveItem{
    border-bottom: 1px solid #e5e5e5;
}
.formArchiveItem a{
    display: block;
    padding: 5px 0;
}
.formArchiveItem a:hover .formArchiveItemTitle{
    text-decoration: underline;
}
.formArchiveItemTitle{
    font-weight: bold;
    font-size: 1.428rem;
    line-height: 1.3;
}
.formApplyDate{
    font-size: 14px;
    color: #000000;
}

/* Tag ------------------- */
.Tag{
    padding: 10px 0;
    text-align: right;
}
.Tag-detail{
    text-align: left;
}
.Tag a{
    display: inline-block;
    letter-spacing: normal;
    border: 1px solid #e1e1e1;
    background-color: #f9f9f9;
    margin-bottom: 5px;
    padding: 4px;
    line-height: 1;
}
.Tag a:hover{
    color: #0a4b9b;
    text-decoration: underline;
}
.Tag a.isCurrent{
    color: #0a4b9b;
    font-weight: bold;
}
.Tag a:hover.isCurrent{
    text-decoration: none;
}

/* 号外スライダー */
.extraSlide li, .extraSlideAuto li{
    height:300px;
}
.extraSlide li:not(:first-of-type),
.extraSlideAuto li:not(:first-of-type){
    display: none;
}
.extraSlideInr{
    display: table-cell;
    width: 250px;
    height: 248px;
    vertical-align: middle;
    text-align: center;
}
.mainNewsLeft a.extraSlideLink{
    display: inline-block;
}
.extraSlideImage{
    margin: auto;
    max-height: 248px;
}
.extraCaption{
    margin-top: 20px;
    text-align: center;
}

/* access_ranking ------------------ */
.rankingArchiveItem{
    border-bottom: 1px solid #e5e5e5;
}
.rankingArchiveItem a{
    display: block;
    padding: 10px 0;
    padding-left: 55px;
    position: relative;
}
.rankingArchiveItem a:hover .rankingArchiveItemTitle{
    text-decoration: underline;
}

.rankingArchiveItemDate{
    color: #6d6d6d;
    font-size: 0.857rem;
}
.rankingArchiveItemTitle{
    font-weight: bold;
    font-size: 1.285rem;
    line-height: 1.3;
}

.accessRankingNum{
    position: absolute;
    top: 3px;
    left: 3px;
    font-weight: bold;
    font-size:2rem;
    line-height: 1.3;
    width:50px;
}

.accessRankingNum > span{
    display: table-cell;
    height: 61px;
    vertical-align: middle;
    text-align: center;
    width:50px;
}
.accessRankingHeadBlock{
    display:table;
    width:100%;
    border-bottom: 2px solid #0a4b9b;
    padding: 18px 0;
}
.accessRankingHeadTitle{
    display:table-cell;
    font-size: 1.714rem;
    color: #0a4b9b;
    font-weight: bold;
    line-height: 1;
}
.accessRankingHeadDate{
    display:table-cell;
    text-align:right;
}
.accessRankingTab{
        font-size: 0;
        border-bottom: 1px solid #0a4b9b;
}
.accessRankingTabItem{
        font-size: 20px;
        color: #0a4b9b;
        background-color: #ffffff;
        border: 1px solid #0a4b9b;
        border-radius: 3px 3px 0 0;
        display: inline-block;
        vertical-align: middle;
        width: 214px;
        padding: 5px 0;
        margin-right: 3px;
        margin-bottom: -1px;
        text-align: center;
        border-bottom: none;
        cursor: pointer;
}
.accessRankingTabItem:last-of-type{
        margin-right: 0;
        width: 215px;
}
.accessRankingTabItem.isActive{
        background-color: #0a4b9b;
        color: #ffffff;
}

.accessRankingTabItem.errorTab{
        background-color: #ff3333;
        color: #FFFFFF;
        border-color: #ff3333;
}

.accessRankingTabItem.errorTab.isActive{
        background-color: #FFFFFF;
        color: #ff3333;
        border-color: #ff3333;
}
/* detailAdsense ------------------- */
.detailAdsense{
    border-collapse: separate;
    border-bottom: 1px solid #e5e5e5;
    padding: 4px 0;
    width: 100%;
    font-size: 12px;
    line-height: 12px;
}
.detailAdsense td{
    padding: 4px 0;
}
.detailAdsense a{
    text-decoration: none;
}
.detailAdsense a:hover{
    text-decoration: underline;
}
.detailAdsensePR{
    color: #ffffff;
    background-color: #a9aaac;
    padding: 0 2px;
}

/* メールサービス設定 タブUI */

.settingTab{
        font-size: 0;
        border-bottom: 1px solid #0a4b9b;
}
.settingTabItem{
        font-size: 14px;
        color: #ffffff;
        background-color: #0a4b9b;
        border: 1px solid #0a4b9b;
        border-radius: 3px 3px 0 0;
        display: inline-block;
        vertical-align: middle;
        width: 92px;
        padding: 5px 0;
        margin-right: 1px;
        margin-bottom: -1px;
        text-align: center;
        border-bottom: none;
        cursor: pointer;
}
.settingTab .settingTabItem:last-of-type{
        margin-right: 0;
}

.settingTabItem.isActive{
        background-color: #ffffff;
        color: #0a4b9b;
}

.settingTabItem.errorTab{
        background-color: #ff3333;
        color: #FFFFFF;
        border-color: #ff3333;
}

.settingTabItem.errorTab.isActive{
        background-color: #FFFFFF;
        color: #ff3333;
        border-color: #ff3333;
}



a.collectiveLink {
        color: #0a4b9b;
        padding: 0 1.4em;
}

a.collectiveLink:hover {
        text-decoration: underline;
}


a.inPageLink {
        color: #0a4b9b;
}

a.inPageLink:hover {
        text-decoration: underline;
}

/* ohter ------------------- */
.textLink{
    color: #0a4b9b;
    text-decoration: underline;
}
a.textLink:hover{
    text-decoration: none;
}
.textArrow{
    background: url(//static.hokkaido-np.co.jp/image/builtin/textarrow.gif) 0 6px no-repeat;
    padding-left: 1em;
    display: block;
}
.textArrow2{
    background: url(//static.hokkaido-np.co.jp/image/builtin/textarrow2.gif) 0 6px no-repeat;
    padding-left: 1em;
    display: block;
}
.moreRead{
    color: #0a4b9b;
}
.moreRead:hover{
    text-decoration: underline;
}
.contentHead{
    font-size: 1.714rem;
    color: #0a4b9b;
    font-weight: bold;
    line-height: 1;
    border-bottom: 2px solid #0a4b9b;
    padding: 18px 0;
}
.contentHead2{
    padding: 10px 0;
    border-width: 1px;
}
.contentHeadMore{
    border-bottom: 2px solid #0a4b9b;
    display: table;
    width: 100%
}
.contentHeadMoreTitle{
    font-size: 1.714rem;
    font-weight: bold;
    line-height: 1;
    color: #0a4b9b;
    display: table-cell;
    padding: 18px 0;
}
.contentHeadMoreLink {
    display: table-cell;
    text-align: right;
}
.contentHeadMoreLink a {
    color: #0a4b9b;
}
.contentHeadMoreLink a:hover{
    text-decoration: underline;
}
.infoHead{
    background-color: #d8e4f2;
    display: table;
    width: 100%;
    padding: 10px 5px;
}
.infoTitle{
    display: table-cell;
    vertical-align: middle;
    font-size: 1.142rem;
    font-weight: bold;
    line-height: 1;
}
.infoDate{
    display: table-cell;
    vertical-align: middle;
    font-size: 0.857rem;
    text-align: right;
    line-height: 1;
}
.infoDescription{
    margin-top: 10px;
}
.infoLink{
    margin-top: 10px;
    font-size: 1.142rem;
}
.infoLink .current{
    background-color: #0a4b9b;
    color: #ffffff;
    border-radius: 3px;
    padding: 0px 5px;
    word-break: keep-all !important;
}
.infoLink a{
    color: #0a4b9b;
    text-decoration: none;
    cursor: pointer;
    cursor: hand;
    padding: 0px 5px;
    word-break: keep-all !important;
}
.infoLink a:hover{
    text-decoration: underline;
}
.infoSection{
    background-color: #f7f7f7;
    padding: 10px;
    margin-top: 20px;
}
.infoLargeImage{
    text-align:center;
    margin-top:10px;
    margin-bottom: 10px;
}
.btnTop{
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 30px;
    right: 80px;
    cursor: pointer;
}
.btnTop img{
    width: 100%;
}

/* ********************************
moviesRss
******************************** */
.moviesRssContents{
    display: table;
    margin-top:10px;
}
.moviesRssLeft{
    display: table-cell;
    vertical-align: top;
}
.moviesRssRight{
    display: table-cell;
}
/* ********************************
sp_over
******************************** */
#sp_over {
    color: #ffffff;
    background-color: #a9a9a9;
    text-align: center;
    font-size: 60px;
    margin-bottom: 20px;
    padding: 40px 10px;
}
#sp_over span {
    margin-left:10px;
    font-size: 45px;
}
#sp_over .close {
    border: 5px solid #ffffff;
    padding: 5px 15px;
}
#sp_over a {
    color: #ffffff;
    font-weight: bold;
}
/* ********************************
JavaScript
******************************** */
#js-small{ font-size: 12px; }
#js-medium{ font-size: 14px; }
#js-large{ font-size: 16px; }

/* ********************************
bxSlider
******************************** */
.bx-wrapper .bx-prev{
    opacity: 1;
    left: 10px;
}
.bx-wrapper .bx-next{
    opacity: 1;
    right: 10px;
}

/* ********************************
common
******************************** */

/* color ---------------- */
.siteColor{
    color: #0a4b9b;
}
.colorRed{
    color: #e60012;
}
.colorBlue{
    color: #00a0e9;
}

/* background-color ------ */
.bgSkyBlue{
    background-color:#ebf2fa;
}
.bgPink{
    background-color:#ffe5e2;
}
.bgGray{
    background-color:#eeeeee;
}
/* border ---------------- */
.borderTopGray{
    border-top: 1px solid #e5e5e5;
}

.nb{
        border:none !important;
}

/* margin ---------------- */
.m00{
    margin: 0;
}
.m10{
    margin: 10px;
}
.mt0{
    margin-top: 0;
}
.mt10{
    margin-top: 10px;
}
.mt20{
    margin-top: 20px;
}
.mt30{
    margin-top: 30px;
}
.mt40{
    margin-top: 40px;
}
.mt50{
    margin-top: 50px;
}
.mt60{
    margin-top: 60px;
}
.mt_neg30{
    margin-top: -30px;
}

.mb20{
    margin-bottom: 20px;
}

.mb40{
    margin-bottom: 40px;
}

.pt30{
    padding-top:30px;
}

.pl25{
        padding-left:25px;
}



/* text-align ---------------- */
.ta-c{
    text-align: center;
}

/* font ---------------- */
.fs_m{
    font-size: medium !important;
}
.fs_10{
    font-size:10px;
}
.fs_20{
    font-size:20px;
}
.fw_b{
    font-weight:bold;
}

/* pointer ------------- */
.pointer{
    cursor: pointer;
}

/* newAdd 20170512 */
/* header */
.borderBottomBlue{
    border-bottom: 1px solid #0a4b9b;
}

/* pageError */
.pageError{
    min-width: 600px;
    margin: 40px auto 0;
    padding: 0 0;
}
.pageErrorHead{
    text-align: center;
    color: #ff0000;
    font-weight: bold;
    font-size: 24px;
}
.pageErrorHead.pageErrorHeadBlue{
    color: #0a4b9b;
}
.pageErrorBody{
    margin-top: 20px;
    font-size: 18px;
    text-align: center;
}
.pageErrorLinkBlock{
    margin-top: 40px;
    text-align: center;
}
.pageErrorLink{
    font-size: 18px;
}
.pageErrorLink:hover{
    text-decoration: underline;
}
.pageErrorBottonBlock{
    margin: 40px auto 0;
    text-align: center;
}
.pageErrorBottonBlock .button{
    width: auto;
    padding-left: 30px;
    padding-right: 30px;
}

/* Brightcove用 */
.video-js.vjs-ended .vjs-poster {
display: block;
}

.form_exp{
    display: table-footer-group;
}

.eventDetailDescription a{
    color: #0a4b9b;
}
.eventDetailDescription a:hover{
    text-decoration: underline;
    color: #0a4b9b;
}
body.movie #main .PrPr {
/* background-color: #a0a0a0; */
    background-color: #2e2d2d;
}

/* ********************************
special（右サイドなし）
******************************** */
.special {
  margin-top: 20px;
}
.special .newsBoxSList {
  display: flex;
  margin: auto;
  flex-wrap: wrap;
  width: 100%;
  max-width: 800px;
}
.special .newsBoxSList .newsBox{
  margin: 0 0 2rem;
  width: 50%;
}
.special .newsBoxSList .newsBox a{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.special .newsBoxSList .newsBox:nth-child(odd){
  padding: 0 10px 0 0;
}
.special .newsBoxSList .newsBox:nth-child(even){
  padding: 0 0 0 10px;
}

.special .newsBoxSList img {
  width: 100%;
  object-fit: cover;
  max-height: 230px;
}

.special .newsBoxSList .date {
  order: -1;
  margin: 0;
  padding: 0;
  color: #8e8e8e;
  font-size: 1.1rem;
}

.special .newsBoxSList .newsTitle {
  font-size: 1.5rem;
  margin: auto;
  padding: 6px 0;
}
.special .newsBoxSList .newsText {
  margin: 0;
  padding: 0;
}
.special  p {
    font-size: 1.15rem;
    line-height: 1.6em;
    font-family: 'Noto Sans JP', sans-serif;
}


/* ********************************
ioutou（硫黄島）
******************************** */
.ioutou {
  margin-top: 20px;
}
.ioutou .newsBoxSList {
  display: flex;
  margin: auto;
  flex-wrap: wrap;
  width: 100%;
/*  max-width: 800px; */
}
.ioutou .newsBoxSList .newsBox{
  margin: 0 0 2rem;
  width: 315px;
}
.ioutou .newsBoxSList .newsBox a{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.ioutou .newsBoxSList .newsBox a:hover {
  opacity: .7;
}
.ioutou .newsBoxSList .newsBox{
/*  padding: 0 10px 0 0; */
   margin-right:20px;
}
.ioutou .newsBoxSList .newsBox:nth-child(3n){
  margin-right: 0;
}

.ioutou .newsBoxSList img {
  width: 100% !important;;
  object-fit: cover;
  max-height: 230px !important;;
}
.ioutou .newsBoxSList .date {
  order: -1;
  margin: 0;
  padding: 0;
  color: #8e8e8e;
  font-size: 1.1rem;
}

.ioutou .newsBoxSList .newsTitle {
  font-size: 1.32rem;
  margin: auto;
  line-height: 1.2;
}
.ioutou .newsBoxSList .newsText {
  margin: 0;
  padding: 0;
}
.ioutou p {
    font-size: 1.15rem;
    line-height: 1.6em;
    font-family: 'Noto Sans JP', sans-serif;
}

/* ********************************
主要LIVEアイコン
******************************** */
.liveIcon {
    display: inline-block;
    vertical-align: middle;
    padding-bottom: 1px;
    padding-right: 5px;
    height: 1.4rem;
}

/* ********************************
ファイルアップロード入力項目
******************************** */
.file_up_box input{
    border: none !important;;
}
.file_up_box p{
    padding-left: 10px;
    padding-bottom: 10px;
    font-weight: bold;
}