@charset "UTF-8";
/* CSS Document */


/*------------------------------------------------------

    contents common

------------------------------------------------------*/
main article { background-color: #fff;}
main article h2 { text-align: center; font-size: 2.8rem; font-weight: bold; }



@media (min-width: 768px) {
    main article { border-radius: 20px; max-width: 1100px; margin-left: auto; margin-right: auto; padding: 45px 95px;}
    main article h2 { margin-bottom: 40px; }

}

@media (max-width: 767px) {
    main article { border-radius: 10px; padding: 40px 20px;}
    main article h2 { margin-bottom: 30px; }
}

/*------------------------------------------------------

    information

------------------------------------------------------*/
#informationList {}
#informationList h2 { text-align: center;}
#informationList h2 img { max-width: 232px;}

#informationList dl { margin-bottom: 18px;}
#informationList dl dt { font-weight: bold; font-size: 1.5rem; }
#informationList dl dd { margin-bottom: 10px;}
#informationList dl dd .colWrap { flex-flow: nowrap; }
#informationList dl dd .colWrap .cat {}
#informationList dl dd .colWrap .cat span { color: #fff; font-size: 1.4rem; display: inline-block; background-color: #ff7bac; letter-spacing: -1px; white-space: nowrap; padding: 3px 5px; line-height: 1;}
#informationList dl dd .colWrap .cat + div { font-weight: bold; font-size: 1.5rem; }
#informationList dl dd a {}
#informationList dl dd .body { font-size: 1.4rem; padding-top: 8px;}


@media (min-width: 768px) {
    #informationList { position: relative;}

    #informationList dl { position: relative;}
    #informationList dl::before { content: ''; position: absolute; height: 1px; width: 150px; background-color: #007bc7; left: 0; bottom: 0;}
    #informationList dl::after { content: ''; position: absolute; height: 1px; width: calc(100% - 190px); background-color: #007bc7; right: 0; bottom: 0;}
    #informationList dl dt { width: 150px; text-align: center; letter-spacing: 2px;}
    #informationList dl dd { width: calc(100% - 190px);}
    #informationList dl dd .colWrap .cat { margin-right: 15px;}

}

@media (max-width: 767px) {

    #informationList h2 { margin-bottom: 50px;}

    #informationList dl { border-bottom: 1px solid #007bc7;}
    #informationList dl dt { width: 100%; margin-bottom: 5px;}
    #informationList dl dd { width: 100%;}
    #informationList dl dd .colWrap .cat { margin-right: 10px;}

}


/*------------------------------------------------------
	ページング
------------------------------------------------------*/
#pagination { text-align: center; margin-top: 80px;}
#pagination ul { display: inline-block;}
#pagination ul li { border: 1px solid #007bc7; float: left; text-align: center; margin: 0 1px;}
#pagination ul li a { padding: 5px 6px; display: block; }
#pagination ul li.active { padding: 5px 6px; background-color: #007bc7; color: #fff;}



/*------------------------------------------------------

    informationSingle

------------------------------------------------------*/
#informationSingle {}
#informationSingle h2 { color: #000; text-align: left; margin-bottom: 10px;}
#informationSingle #date { font-size: 1.4rem; color: #999; border-bottom: 3px solid #007bc7; padding-bottom: 15px; margin-bottom: 30px;}
#informationSingle #date .cat { color: #fff; display: inline-block; background-color: #ff7bac; padding: 3px 5px; line-height: 1; margin-right: 15px;}


#informationSingle .back { font-size: 1.6rem;}
#informationSingle .back a { color: #007bff;}

@media (min-width: 768px) {
    #informationSingle { max-width: 760px; padding-left: 40px; padding-right: 40px;}
    #informationSingle h2 { font-size: 2.8rem;}

    .infoContent .col-2 { width: calc(50% - 10px);}
}

@media (max-width: 767px) {

}