/* 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: #666; 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:#FF9900;}

a:hover{text-decoration:underline;}

.clear{clear:both;}

.clearfix{zoom:1;}

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





/* base */

html {

    background: #E0E0E0;

}

div#pagetop {

    width: 1000px;

    margin: 10px auto;

    border-top: 5px solid #FF9900;

    background: #FFF;

}



div#header {

    position: relative;

    height: 160px;

    background-color:#C63;

    border-bottom: 2px solid #EEE;

}



div#header div#header-inner {

    position: relative;

    margin: 0 auto;

    height: 100%;

}


div#header h1 {
    
    font-size: 32px;
    
    font-weight: bold;
    
    width: 910px;
    
    height: 51px;
    
    position: absolute;
    
    top: 0;
    
    right: 0;
    
    bottom: 0;
    
    left: 0;
    
    margin: auto;
    
    text-align: center;
    
}



div#header p#title {
    
    font-size: 32px;
    
    font-weight: bold;
    
    width: 840px;
    
    height: 51px;
    
    position: absolute;
    
    top: 0;
    
    right: 0;
    
    bottom: 0;
    
    left: 0;
    
    margin: auto;
    
    text-align: center;
    
}


/*div#header h1,

div#header p#title {

    position: absolute;

    top: 20px;

    left: 40px;

    font-size: 32px;

    font-weight: bold;

}*/



div#header h1 a,

div#header p#title a {

    color: #FFF;

}



div#header h1 a:hover,

div#header p#title a:hover {

    text-decoration: none;

}



div#header img {

    position: absolute;

    right: 20px;

    bottom: 0px;

}



/*div#wrapper {

    overflow: hidden;

    margin: 20px auto;

}*/


div#wrapper {
    
    margin-top: 30px;
    
}



div#alpha {

    width: 730px;

    float: left;

    margin-bottom: 20px;

}



div#alpha-inner {

    padding-left: 20px;

}

    

div#alpha div.alpha-content {

    margin: 0 0 20px;

}



div.alpha-content h2.title,

div.alpha-content h1 {

    position: relative;

    font-size: 14px;

}



div.alpha-content h2.title a,

div.alpha-content h1 {

    position: relative;

    display: block;

    height: 100%;

    padding: 6px 12px 4px;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    -o-border-radius: 5px;

    -ms-border-radius: 5px;

	border-left:6px solid #DDD;

}



div.alpha-content h2 a:hover {

    background-position: 0 10px;

}



div.alpha-content p {

    margin: 10px 0;

    line-height: 2;

}



div.alpha-content p.entry-date {

    text-align: right;

    margin: 0 -20px 10px;

    padding: 4px 20px 0;

    color: #FFA206;

}



div#run {

    margin-bottom: 10px;

}



div#run p {

    font-weight: bold;

}



div#beta {

    width: 220px;

    padding: 0 20px;

    float: right;

}



div#beta div.beta-content {

    margin-bottom: 20px;

}



div#beta div.beta-content h2,

div#beta div.beta-content h3 {

    font-size: 14px;

    color: #ffa206;

    border-bottom: 1px solid #ffa206;

    margin-bottom: 6px;

}



div#beta div.beta-content ul {

    margin-bottom: 8px;

    margin-top: 2px;

}



div#beta div.beta-content ul li {

    line-height: 1.6;

    font-size: 12px;

}



div#beta div.beta-content ul li a {

    position: relative;

    display: block;

    text-decoration: none;

    border-bottom: 1px solid #EEE;

    padding: 6px 10px 4px;

}



div#beta div.beta-content ul li a:hover {

}



div#adx_footer {
    
    text-align: center;
    
    width: 728px;
    
    margin: 0 auto 10px;
}


div#footer {

    margin: 0 auto;

    border-top: 1px solid #DDD;

    padding-bottom: 10px;

}



div#footer address {

    text-align: right;

    font-style: normal;

    margin: 10px 20px 0;

}



p#topicpath {

    margin-bottom: 30px;

}



div.entry-content {

    margin-top: 10px;

    padding-bottom: 20px;

    line-height: 2;

}



div.adv {

    padding-top: 10px;

    border-top: 1px dotted #CCC;

    padding-bottom: 4px;

}



div.adv h3 {

    margin-bottom: -10px;

}



div.rel-block {

    padding-top: 10px;

    border-top: 1px dotted #CCC;

}



div.rel-block dl dt {

    float: left;

    margin-bottom: 6px;

    line-height: 1.2;

    font-weight: bold;

    display: inline;

}



div.rel-block dl dd {

    clear: both;

    margin: 0;

    padding: 0;

}



.PNLINK-wrapper {
	
	width: 1000px;
	
	margin: 25px auto 0;
    
    padding: 0 20px;
    
    box-sizing: border-box;
	
}




/* Smartphone */

@media screen and (max-width: 767px) {
	
	div#pagetop {
		
		width: 100vw;
		
	}
	
	
	
	div#header h1, div#header p#title {
		
		width: 90vw;
		
		font-size: clamp(16px, 5.8vw, 24px);
		
		height: clamp(47px, 16.91vw, 70px);
        
        text-align: left;

		
	}
	
	
	
	.br:before {
		
		content: "\A";
		
		white-space: pre;
		
	}

	
	
    div#alpha {

        width: 100%;

        float: none;

        border-left: none;

    }

    

    div#alpha-inner {
		
		width: 90vw;

		padding: 0 1em;

    }
	
	
	
	div#beta {
		
		width: 90vw;
		
		float: none;
		
		border-right: none;
		
		padding: 0;
		
		margin: 0 auto;
		
	}
    
    
    
    ul#adx li {
        
        width: 200px;
        
        margin: 0 auto;
    }
    
    
    
    div#adx_footer {
        
        width: 100vw;
        
    }
	

	
	.PNLINK-wrapper {
		
		width: 90vw;
        
        padding: 0 1em;
        
        box-sizing: content-box;
		
	}	
    
    
    
    
	div#footer address {
		
		text-align: center;
		
	}

	
	
}



/*  Tablet  */



@media screen and (min-width: 768px) and (max-width: 1023px) {
	
	
	
	div#pagetop {
		
		width: 100vw;
		
	}
	
	
	
	div#header h1, div#header p#title {
		
		height: 102px;
		
		top: 0;
		
		bottom: 0;
		
		left: 40px;
		
		margin: auto;
        
        text-align: left;
		
	}
	
	.br:before {
		content: "\A";
		white-space: pre;
	}
	
	
	
	div#wrapper {
		
		display: flex;
		
		justify-content: space-around;
		
	}
	
	
	
	div#alpha {
		
		width: 60%;
		
	}
	
	
	
	div.entry-content {
		
		padding: 0 1.5em;
		
	}
	
	div#beta {
		
		float: none;
		
		width: 30%;
		
		padding: 0;
		
	}
	
	
	
	.clearfix:after {
		
		display: none;
		
	}
    
    
    
	.PNLINK-wrapper {
		
		width: 90vw;
        
        padding: 0 1em;
        
        box-sizing: content-box;
		
	}
    
    
    
    div#footer {
        
        width: 90vw;
        
        padding-right: 1em;
        
    }
	
	
	
}