@charset "UTF-8";


/*===============================================
●共通
===============================================*/





/*===============================================
●画面の横幅が813px以上(タブレット・PC)
===============================================*/
@media screen and (min-width: 813px) {
    
    /* メイン画像 */
    #sub-mainImage {
        background: url(../images/topics/main_img.jpg) bottom center no-repeat;
        background-size: cover;
    }
    

    /* topics-list お知らせ一覧 */
    #topics-list {
        width: 1030px;
        margin: 70px auto 80px auto;
        text-align:left;
    }
    
    #topics-list > h2 {
        width: 251px;
        margin: 0;
    }
    
    #topics-list > h2 > img {
        width: 251px;
    }
    
    #topics-list ul {
        width: 1030px;
        margin: 40px auto 0 auto;
        border-top: #b0b0b0 1px dotted;
    }
    
    #topics-list ul > li {
        width: 1030px;
        text-align: left;    
        border-bottom: #b0b0b0 1px dotted;  
        background: url(../images/topics/arrow01.png) top 50% right 30px no-repeat;
        background-size: 16px;
    }
            
    #topics-list ul > li > a {
        display: block;
        padding: 20px 0;
    }
    
    #topics-list ul > li > a > span:nth-of-type(1) {
        display: inline-block;
        width: 115px;
        color: #ee98bd;
        vertical-align: top;
    }
    
    #topics-list ul > li > a > span:nth-of-type(2) {
        display: inline-block;
        width: 830px;
        vertical-align: top;
    }
    
    .pref_next{
        margin: 50px 0;
        text-align: center;
        font-size:20px;
    }

    .pref_next span{
        color: #ffffff;
        background: #ee98bd !important;
        margin: 0 3px;
        padding: 8px 12px 6px 12px;
    }

    .pref_next a{
        margin: 0 3px;
        padding: 8px 12px 6px 12px;
        text-decoration:none;
        background: #eeeeee !important;                
    }

    .pref_next a:hover{
        color: #ffffff;
        background: #e3ee9d !important;
    }
    
    /* topics-detail お知らせ詳細 */
    #topics-detail {
        width: 1030px;
        margin: 70px auto 0 auto;
        text-align:center;
    }
    
    #topics-detail > p:nth-of-type(1) {
        font-size: 18px;
        color: #ee98bd;
        text-align: left;
    }
    
    #topics-detail > h2 {
        margin: 30px 0 0 0;
        font-size: 30px;
        text-align: left;  
        line-height: 140%;
    }
    
    #topics-detail > p:nth-of-type(2) {
        margin: 25px 0;
        padding: 40px 0 50px 0;
        text-align: left;
        border-top: #b0b0b0 1px dotted;
        border-bottom: #b0b0b0 1px dotted;
    }
    
    #topics-detail > p:nth-of-type(2) a {
        color: #0044ff;
        text-decoration: underline;
    }
    
    #topics-detail > a {
        display: inline-block;
        margin: 60px auto 80px auto;
        padding: 0 0 0 30px;
        background: url(../images/topics/arrow02.png) top 3px left no-repeat;
        background-size: 20px;
    }
    
}


/*===============================================
●画面の横幅が812px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 812px) {
    
    /* topics-list お知らせ一覧 */
    #topics-list {
        width: 100%;
        margin: 40px auto;
    }
    
    #topics-list > h2 {
        width: 94%;
        margin: 0 auto;
        text-align:left;
    }
    
    #topics-list > h2 > img {
        width: 196px;
    }
    
    #topics-list ul {
        width: 94%;
        margin: 10px auto 0 auto;
    }
    
    #topics-list ul > li {
        width: 100%;
        text-align: left;    
        border-bottom: #b0b0b0 1px dotted;  
        background: url(../images/topics/arrow01.png) top 50% right 10px no-repeat;
        background-size: 17px;
    }

    #topics-list ul > li > a {
        display: block;
        padding: 20px 0;
    }

    #topics-list ul > li > a > span:nth-of-type(1) {
        display: block;
        width: 100%;
        color: #ee98bd;
    }

    #topics-list ul > li > a > span:nth-of-type(2) {
        display: block;
        width: 100%;
        margin: 5px 0 0 0;
        padding: 0 40px 0 0;
    }
    
    .pref_next{ 
        margin: 30px 0; 
        text-align: center; 
        font-size:14px; 
    }

    .pref_next span{
        display: inline-block;
        width: 26px;
        height: 26px;
        margin: 0 3px; 
        padding: 2px 0 0 0;
        color: #ffffff;
        text-align: center;
        background: #ee98bd !important;
    }

    .pref_next a{
        display: inline-block;
        width: 26px;
        height: 26px;
        margin: 0 3px; 
        padding: 2px 0 0 0;
        text-align: center;
        text-decoration:none;
        background: #eeeeee !important;
    }

    .pref_next a:hover{ 
        color: #ffffff;
        background: #e3ee9d !important;
    }
    
    /* topics-detail お知らせ詳細 */
    #topics-detail {
        width: 94%;
        margin: 35px auto 0 auto;
        text-align:center;
    }
    
    #topics-detail > p:nth-of-type(1) {
        font-size: 14px;
        color: #ee98bd;
        text-align: left;
    }
    
    #topics-detail > h2 {
        margin: 15px 0 0 0;
        font-size: 24px;
        text-align: left;
        line-height: 140%;
    }
    
    #topics-detail > p:nth-of-type(2) {
        margin: 15px 0;
        padding: 20px 0 25px 0;
        font-size: 14px;
        text-align: left;
        border-top: #b0b0b0 1px dotted;
        border-bottom: #b0b0b0 1px dotted;
    }
    
    #topics-detail > p:nth-of-type(2) a {
        color: #0044ff;
        text-decoration: underline;
    }
    
    #topics-detail > a {
        display: inline-block;        
        margin: 40px auto;
        padding: 0 0 0 30px;
        font-size: 15px;
        background: url(../images/topics/arrow02.png) top 2px left no-repeat;
        background-size: 17px;
    }
    
}