/* reset */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote {margin: 0; padding: 0; font-weight: normal; font-size: 100%;}

html {color: #333333; background-color: #fff;}

body {font: 13px/1.6 "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; *font-size:small; *font:x-small;}

img{border:0;vertical-align:top;}

ul,ol,dl{text-indent:0;}

li{list-style:none;}

a{text-decoration:none;outline:none;color:#000;}

h2 a{color:#FCC;}

a:hover{text-decoration:underline;}

.clear{clear:both;}

.clearfix{zoom:1;}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}



address a{color:#FFF;}



/* base */

html {



}



div#frame {

    width: 1000px;

    margin: 0 auto;

    border-top: 5px solid #333;

}



div#headerArea {

    position: relative;

    border-bottom: 5px solid #CCC;

	/*height:50px;*/

    padding: 14px 20px;

    margin-bottom: 40px;

}



div#headerArea h1,

div#headerArea p#siteTitle {

    font-size: 28px;

    text-shadow: 1px 1px 1px #AAA;

    line-height: 1;

}



div#headerArea h1 a,

div#headerArea p#siteTitle a {

    font-weight: bold;

    color: #333;

}



div#headerArea h1 a:hover,

div#headerArea p#siteTitle a:hover {

    text-decoration: none;

}



div#contentArea {

    position: relative;

    padding-bottom: 40px;

}



div#rightArea {

    width: 660px;

    float: right;

}



div#rightArea div.entryBody {

    margin: 0 0 20px;

    padding: 10px;

    border-top: 1px solid #FFF;

    border-bottom: 5px solid #CCC;

    background: #f6f6f6;

}



div.entryBody h1,

div.entryBody h2 {

    font-weight: bold;

    font-size: 16px;

    padding: 2px 12px 0;

    margin-bottom: 4px;

    line-height: 2;

    background: #333 repeat-x;

    border-top: 1px solid #FFF;

    border-bottom: 2px solid #CCC;

    color: #FFF;

}



div.entryBody p {

    margin: 10px 0;

}



div.entryBody p.postMeta {

    font-weight: bold;
    
    padding: 0 1em;

}



div.entryBody p.postMore {

    font-size: 12px;
    
    text-align: right;
    
    padding: 0 1em;

}



div.entryBody div.postContent {

    line-height: 2;
    
    padding: 0 1em;

}



div#leftArea {

    width: 300px;

    float: left;

}



div#leftArea div.leftContents {

    margin-bottom: 40px;

}



div#leftArea div.leftContents dl dt {

    background: #999;

    border-bottom: 4px solid #666;

    padding: 4px 12px 2px;

    color: #f9f9f9;

    font-weight: bold;

    margin-bottom: 2px;

}



div#leftArea div.leftContents dl dd {

    margin: 6px 0;
    
    padding: 0 1em 6px;

    line-height: 1.2;

    border-bottom: 1px dotted #AAA;

    font-size: 12px;

}



div#footerArea {

    padding: 10px;

    background: #333;

    color: #FFF;

    border-top: 1px solid #CCC;

}



div#footerArea address {

    text-align: center;

    font-style: normal;

}



p#breadcrumb {

    margin-bottom: 15px;

}



div#prLink {

    margin: 20px;

}



div.prLinks {

    margin-top: 20px;

}



div.prLinks h2 {

    font-size: 14px;

    padding: 0;

    background: none;

    border-bottom: none;

}



div.relLinks {

    margin: 20px;

    font-size: 12px;

}



div.relLinks h2 {

    font-size: 14px;

    float: left;

    line-height: 1;

    font-weight: bold;

    margin-bottom: 10px;

    border-bottom: none;

    background: none;

    color: #333;

    padding: 0;

}



div.relLinks p {

    clear: both;

    margin: 0;

}



p#toTop {

    position: absolute;

    bottom: 0;

    right: 0;

    width: 10em;

}



p#toTop a {

    display: block;

    width: 100%;

    padding: 4px 0 2px;

    background: #666;

    color: #FFF;

    text-align: center;

    -webkit-border-top-left-radius: 10px;

    -webkit-border-top-right-radius: 10px;

    -moz-border-radius-topleft: 10px;

    -moz-border-radius-topright: 10px;

    border-top-left-radius: 10px;

    border-top-right-radius: 10px;

}



p#toTop a:hover {

    background: #999;

    text-decoration: none;

}

.PNLINK-wrapper {
	width: 1000px;
	margin: 25px auto 0 auto;
}



/* Smartphone */

@media screen and (max-width: 767px) {
	
	
	
	div#headerArea h1, div#headerArea p#siteTitle {
		
		text-align: center;
		
	}
	
	
	
	div#headerArea h1, div#headerArea p#siteTitle a {
		
		font-size: 26px;
		
		line-height: 1.5;
		
	}
	
	
	
	.br:before {
		
		content: "\A";
		
		white-space: pre;
		
	}
	
	
	
	div#frame {
		
		width: 100vw;
		
	}

	
	
	div#main-Area {
		
		display: flex;
		
		flex-direction: column-reverse;
		
	}
	
	
	
    div#rightArea {

        width: auto;

        margin: 0 10px;

        float: none;

    }
	
	
	
	div.entryBody p.postMeta {
		
		padding-left: 1em;
		
	}

	
	
	div#leftArea div.leftContents dl dd {
		
		padding: 0 1em 6px;
		
	}

	

    div#leftArea {

        width: auto;

        margin: 0 10px;

        float: none;

    }
	
	
    
    /*#PNLINK{padding: 0 10px;}*/
    #PNLINK.n4 ul{width:50% !important;}
    #PNLINK.n4 ul li{padding-right: 10px;}
	
	
	
	.PNLINK-wrapper {
		
		width: 95vw;
        
        margin: 30px auto 0;
        
        padding: 0 1em;
        
        box-sizing: border-box;
    
		
	}
	
	
	
	p#toTop {
		
		right: 20px;
		
	}
    
    
    
    div#footerArea {
        
        margin-bottom: 50px;
		
		font-size: 12px;
        
    }
	
	

}



/*  Tablet  */



@media screen and (min-width: 768px) and (max-width: 1023px) {
	
	
	
	div#frame {
		
		width: 100vw;
		
	}
	
	
	
	div#main-Area {
		
		display: flex;
		
		justify-content: space-around;
		
	}
	
	
	
	div#leftArea {
		
		width: 30%;
		
	}
	
	
	
	div#leftArea div.leftContents dl dd {
		
		padding: 0 1em 6px;
		
	}
	
	
	
	div#rightArea {
		
		width: 60%;
		
	}
	
	
	
	div.entryBody p.postMeta {
		
		padding: 0 1em;
		
	}
	
	
	
	.PNLINK-wrapper {
		
		width: 95vw;
		
	}
	
	
	
	p#toTop {
		
		right: 20px;
		
	}
	
	
}