@charset "UTF-8";


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





/*===============================================
●画面の横幅が813px以上(タブレット・PC)
===============================================*/
@media screen and (min-width: 813px) {

    /* メイン画像 */
    #mainImage {
        width: 100%;
        margin: 0 auto;
        padding: 0;
        text-align: center;
    }

    #mainImage img {
        width: 100%;
    }


    /* お知らせ一覧 */
    #topics-lsit {
        width: 1030px;
        margin: 60px auto 0 auto;
        text-align:center;
    }
    
    #topics-lsit ul {
        width:1030px;
        margin: 50px auto 0 auto;
        text-align:left;
    }

    #topics-lsit ul > li {

        width:1030px;
        margin: 0 auto 15px auto;
        background-color: #FFF;
        border: #bbdfbe 1px solid;
        border-radius: 10px;
        background: url(../images/common/news_arrow.png) center right 22px no-repeat;
    }

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

    #topics-lsit ul > li > a > span:nth-of-type(1) {
        display: inline-block;
        width: 130px;
        color: #48b14d;
        vertical-align: top;
    }

    #topics-lsit ul > li > a > span:nth-of-type(2) {
        display: inline-block;
        width: 800px;
        vertical-align: top;
    }

    .pref_next{
        margin: 60px auto 0 auto;
        text-align: center;
        font-size:20px;
    }

    .pref_next span{        
        display: inline-block;
        width: 40px;
        height: 40px;
        color: #ffffff;
        background: #48b14d !important;
        margin: 0 3px;
        padding: 7px 0 0 0;
        border-radius: 20px;
        vertical-align: top;
    }

    .pref_next a{
        display: inline-block;
        width: 40px;
        height: 40px;
        margin: 0 3px;
        padding: 7px 0 0 0;
        text-decoration:none;
        background: #eeeeee !important;                
        border-radius: 20px;
        vertical-align: top;
    }
    
    .pref_next a.list-arrow{        
        padding: 14px 0 0 0;
    }

    .pref_next a:hover{
        color: #ffffff;
        background: #48b14d !important;
    }

    
    /* お知らせ詳細 */
    #topics-detail {
        width: 1030px;
        margin: 70px auto 0 auto;
        text-align:center;
    }

    #topics-detail > p:nth-of-type(1) {
        font-size: 18px;
        color: #48b14d;
        text-align: left;
    }

    #topics-detail > h3 {
        margin: 10px 0 0 0;
        font-size: 30px;
        text-align: left;  
        line-height: 140%;
    }

    #topics-detail > p:nth-of-type(2) {
        margin: 15px 0 0 0;
        padding: 30px 0 50px 0;
        text-align: left;
        border-top: #bbdfbe 1px dotted;
        border-bottom: #bbdfbe 1px dotted;
    }

    #topics-detail > p:nth-of-type(2) a {
        color: #0044ff;
        text-decoration: underline;
    }

    #topics-detail > a > img {
        width: 340px;
        margin: 60px auto 0 auto;
    }

}


/*===============================================
●画面の横幅が812px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 812px) {

    /* メイン画像 */
    #mainImage {
        width: 100%;
        margin: 0 auto;
        padding: 0;
        text-align: center;
    }

    #mainImage img {
        width: 100%;
    }

    /* box01 */
    #topics-lsit {
        width: 94%;
        margin: 45px auto 0 auto;
        text-align:center;
    }

    #topics-lsit ul {
        width:100%;
        margin: 20px auto 0 auto;
        text-align:left;
    }

    #topics-lsit ul > li {
        width:100%;
        margin: 0 auto 15px auto;
        background-color: #FFF;
        border: #bbdfbe 1px solid;
        border-radius: 5px;
        background: url(../images/common/news_arrow.png) center right 10px no-repeat;
        background-size: 6px;
    }

    #topics-lsit ul > li > a {
        display: block;
        padding: 10px 30px 10px 10px;
    }

    #topics-lsit ul > li > a > span:nth-of-type(1) {
        display: block;
        color: #48b14d;
    }

    #topics-lsit ul > li > a > span:nth-of-type(2) {
        display: block;
    }
    
    .pref_next{
        margin: 30px auto 0 auto;
        text-align: center;
        font-size:20px;
    }

    .pref_next span{        
        display: inline-block;
        width: 36px;
        height: 36px;
        color: #ffffff;
        background: #48b14d !important;
        margin: 0 3px;
        padding: 7px 0 0 0;
        font-size: 13px;
        border-radius: 18px;
        vertical-align: top;
    }

    .pref_next a{
        display: inline-block;
        width: 36px;
        height: 36px;
        margin: 0 3px;
        padding: 7px 0 0 0;
        font-size: 13px;
        text-decoration:none;
        background: #eeeeee !important;                
        border-radius: 18px;
        vertical-align: top;
    }

    .pref_next a.list-arrow{        
        padding: 12px 0 0 0;
    }

    
    /* お知らせ詳細 */
    #topics-detail {
        width: 94%;
        margin: 35px auto 0 auto;
        text-align:center;
    }

    #topics-detail > p:nth-of-type(1) {
        font-size: 14px;
        color: #48b14d;
        text-align: left;
    }

    #topics-detail > h3 {
        margin: 5px 0 0 0;
        font-size: 24px;
        text-align: left;
        line-height: 140%;
    }

    #topics-detail > p:nth-of-type(2) {
        margin: 10px 0 0 0;
        padding: 15px 0 25px 0;
        font-size: 14px;
        text-align: left;
        border-top: #bbdfbe 1px dotted;
        border-bottom: #bbdfbe 1px dotted;
    }

    #topics-detail > p:nth-of-type(2) a {
        color: #0044ff;
        text-decoration: underline;
    }

    #topics-detail > a > img { 
        width: 280px;
        margin: 30px auto 0 auto;
    }
    

}