/* CSS Document */
@media screen and (min-width: 800px) {
    
    /* ------------------------------------------------------------
        card 関連
    ------------------------------------------------------------ */
    article.card img.alignleft, article.card img.alignnone {
        float: left;
        margin: 1em;
        /**/
        max-width: 100%;
        height: auto;
    }
    article.card img.alignright {
        float: right;
        margin: 1em;
        /**/
        max-width: 100%;
        height: auto;
    }
    article.card img.aligncenter {
        display: block;
        margin: 0 auto;
        /**/
        max-width: 100%;
        height: auto;
    }
    /* 疑似Table関連 */
    article.card section.table-row2 {
        padding: 0.5em 2.5em;
    }
    article.card section.table-row2 > ul {
        padding: 0!important;
        /**/
        list-style: none!important;
        /**/
        display: flex;
    }
    article.card section.table-row2 > ul > li:first-child {
        margin: 1px 0;
        padding: 0.5em;
        /**/
        width: 200px;
        /**/
        background-color: #ddd;
    }
    article.card section.table-row2 > ul > li:last-child {
        flex: 1;
        /**/
        margin: 1px 0;
        padding: 0.5em;
    }
 
    /* ------------------------------------------------------------
        HEADER 関連
    ------------------------------------------------------------ */
    header#page-header {
        position: fixed;
        top: 0;
        z-index: 99;
        /**/
        width: 100%;
        /**/
        background-color: #fff;
    }
    div#header-tel {
        padding: 0.2em 0.5em;
        /**/
        font-size: 0.9em;
        /**/
        border-bottom: 1px solid #E06A3B;
    }
    /* ------------------------------------------------------------
        nav 関連
    ------------------------------------------------------------ */
    div#menu-open {
        display: none!important;
    }
    nav#page-nav {
        display: flex;
        align-items: center;
    }
	nav#page-nav > div#company-name {
		flex: 1;
		/**/
		margin-left: 20px;
		/**/
		color: #333;
		font-size: 1.2em;
        line-height: 1em;
	}
    nav#page-nav > div#company-name > span.sub {
        font-size: 0.7em;
    }
    nav#page-nav > a {
        display: block;
        /**/
        /*margin-right: auto;*/
        padding: 0em 0;
        /**/
        width: 150px;
        height: 80px;
        /**/
        background-position: center;
        background-repeat: no-repeat;
        /*background-size: cover;*/
    }
    nav#page-nav > ul {
        display: flex;
    }
    nav#page-nav > ul > li > a {
        display: block;
        /**/
        padding: 0em 0.8em;
        /**/
        height: 80px;
        /**/
        color: #666;
        /**/
        line-height: 80px;
        /**/
        border-bottom: 2px solid #e06a3b;
        /**/
        transition: all 0.2s;
    }
    nav#page-nav > ul > li > a:hover,
    nav#page-nav > ul > li > a:focus {
        color: #e06a3b;
        /**/
        border-bottom: 5px solid #e06a3b;
    }
    ul#mobile-menu {
        display: none!important;
    }
    /* ------------------------------------------------------------
        #base 関連
    ------------------------------------------------------------ */
    section#base {
        margin: 140px auto 40px auto;
        /**/
        width: 95%;
        max-width: 1000px;
    }
    /* ------------------------------------------------------------
        #top-catchphrase 関連
    ------------------------------------------------------------ */
    #top-catchphrase {
        
    }
    #top-catchphrase > div {
        text-align: center;
        margin: 0 0 40px 0;
    }
    #top-catchphrase > div > h1 {
        font-weight: normal;
        font-size: 2em;
        text-shadow: 0 0  5px #999;
    }
    #top-catchphrase > div > p {
        font-weight: normal;
        font-size: 1em;
        text-shadow: 0 0  5px #999;
    }
    /* ------------------------------------------------------------
        #top-banner 関連
    ------------------------------------------------------------ */
    #top-banner {
        
    }
    #top-banner > ul {
        display: flex;
    }
    #top-banner > ul > li {
        flex: 1;
        transition: all 0.2s;
    }
    #top-banner > ul > li:hover {
        flex: 2;
    }
    #top-banner > ul > li > a {
        display: block;
        /**/
        height: 200px;
        /**/
        text-align: center;
        /**/
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    /* ------------------------------------------------------------
        #top-news 関連
    ------------------------------------------------------------ */
    #top-news {
        display: flex;
        align-items: flex-start;
    }
    .news-list {
        margin: 20px 10px;
        /**/
        border-radius: 5px;
    }
    #news-notice, #news-req {
        flex: 1;
    }
    .news-list > h1 {
        padding: 0.2em;
        /**/
        font-size: 1.2em;
        /**/
        border-bottom: 1px solid #999;
    }
    .news-list > article {
        margin: 0.5em;
        padding: 0.5em 0;
        /**/
        border-bottom: 1px dashed #999;
    }
    .news-list > article > div.date {
        text-align: center;
        font-size: 0.8em;
    }
    .news-list > article > h1 {
        font-size: 1.1em;
        font-weight: normal;
    }
    .news-list > article > h1 > a {
        color: #e06a3b;
    }
    .news-list > article > h1 > a:hover,
    .news-list > article > h1 > a:focus {
        text-decoration: underline;
    }
    .news-list > article > p {
        padding: 0.5em 1em;
        /**/
        font-size: 0.9em;
        font-weight: 400;
    }
    .news-list > div.news-readmore {
    }
    .news-list > div.news-readmore > a {
        display: block;
        /**/
        padding: 0.2em 1em 0.6em 1em;
        /**/
        color: #e06a3b;
        /**/
        text-align: right;
        font-size: 0.9em;
        font-weight: 300;
    }
    .news-list > div.news-readmore > a:hover,
    .news-list > div.news-readmore > a:focus {
        text-decoration: underline;
    }
    /* ------------------------------------------------------------
        #pickup 関連
    ------------------------------------------------------------ */
    #pickup article > a {
        display: block;
        /**/
        margin: 0 auto;
        /**/
        height:200px;
        width: 200px;
        /**/
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        /**/
        border-radius: 100px;
    }
    #pickup article > h1 > a {
        color: #e06a3b;
    }
    /* ------------------------------------------------------------
        footer 関連
    ------------------------------------------------------------ */
    #page-footer > ul.menu {
        display: flex;
        justify-content: space-around;
        /**/
        margin: 1em 0;
            
    }
    #page-footer > ul.menu > li {
        flex: 1;
        /**/
        margin: 0 0.5em;
    }
    #page-footer > ul.menu > li > a {
        display: block;
        /**/
        height: 50px;
        /**/
        color: #666;
        background-color: #eee;
        /**/
        font-size: 0.8em;
        text-align: center;
        line-height: 50px;
        /**/
        border-radius: 5px;
        /**/
        transition: all 0.2s;
    }
    #page-footer > ul.menu > li > a:hover,
    #page-footer > ul.menu > li > a:focus {
        color: #fff;
        background-color: #e06a3b;
    }
    #page-footer > ul.privacy {
        display: flex;
        justify-content: space-around;
        /**/
        margin: 1px 0;
        /**/
        background-color: #e06a3b;
    }
    #page-footer > ul.privacy > li {
        flex: 1;
        /**/
        margin: 0 0.5em;
    }
    #page-footer > ul.privacy > li > a {
        display: block;
        /**/
        color: #fff;
        /**/
        font-size: 0.8em;
        text-align: center;
        /**/
    }
    #page-footer > ul.privacy > li > a:hover,
    #page-footer > ul.privacy > li > a:focus {
        color: #fff;
    }
}
/* ------------------------------------------------------------
    #content 関連
------------------------------------------------------------ */
@media screen and (min-width: 1000px) {
    section#content {
        display: flex;
    }
    section#posts {
        flex: 1;
    }
    section#widget {
        width: 300px;
    }
}

/* ------------------------------------------------------------
    ヘッダーの会社名関連
------------------------------------------------------------ */
@media screen and (max-width: 1050px) {
    nav#page-nav > a#company-img {
        background-position: left;
        flex: 1;
    }
    nav#page-nav > div#company-name {
        display: none;
    }
}