@charset "Shift_JIS";
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
body {
    line-height:1;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { 
	display:block;
}
ul,li {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #999999;
    margin:10px 0;
    padding:0;
}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
.clearfix:before {
　　　　content: "";
	display: block;
	clear: both;
}
.clearfix {
	display: block;
}
.clears{clear:both;} 
/*-----------------------------------*/
html{font-size: 62.5%;}
body{
font-family:"Hiragino Kaku Gothic ProN",Meiryo,"Yu Gothic",sans-serif;
font-size:12px;font-size:1.2rem;
color:#555;
line-height:1.4;
}
a:link,a:visited,a:active{
color:#00f;
text-decoration:none;
}
a:hover{
color:#f00;
text-decoration:underline;
}
/*-----------------*/
.wk,
#header,
#container,
#footer{
max-width:900px; 
margin:0px auto;
display:block;
}
/*-----------------*/
.h_box{
display:block;
height:60px;
border-bottom:1px solid #9cf;
}
.h_ta{
float:left;
}
.h_ta img{
width:238px;
height:40px;
margin-top:13px;
}
.h_gg{
float:right;
padding-top:5px;
height:55px;
text-align:right;
}
.pgd{
display: none;
}
/*-----------------*/
#container{
}
/*-----------------*/
#sectionwk{
float:right;
width:100%;
margin-left:-210px;
}
#section{
margin-left:210px;
}
.h_tx{
text-align:right;
margin-top:-2px;
font-size:12px;font-size:1.2rem;
}
.h_tx span{
font-size:16px;font-size:1.6rem;
color:#f0c;
font-weight:bold;
}
#section h3{
background-color:#def;
padding:2px 0 0 10px;
line-height:1;
}
.barwk{
line-height:2;
}
.bar {
width:15%;
float:left;
}
.bar2 {
width:20%;
float:left;
}
#section h4{
width:90%;
border-bottom:2px solid #bdf;
margin:12px 0 5px;
line-height:1;
}
.srt{
text-align:center;
margin:2px auto 12px; 
width:77%;
}
input{
outline: none;
box-sizing: border-box;
border:1px solid #abc;
vertical-align:middle;
height:28px;
}
input[type=text]{
width:77%;
padding:0 6px;
}
input[type=submit]{
width:23%;
background-color:#bcd;
background: linear-gradient(#69c, #cff); 
}
input[type=submit]:active{
box-shadow:2px 2px 3px 2px rgba(0, 0, 0, 0.2) inset;
}
input[type="submit"]::-moz-focus-inner{
border: 0px;
}
#section li{
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
} 
.new_box{
width:29.333%;
margin:12px 2%;
height:180px;
text-align:center;
float:left;
overflow:hidden;
}
.new_box p{
color:#e39;
font-weight:bold;
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
margin-bottom:4px;
}
.new_ss img{
width:100%;
max-width:120px; 
}
.new_title{
height:38px;
overflow:hidden;
}
.new_title span{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; 
  overflow: hidden;
            line-height: 1.2;
            max-height: 2.4em;
}
.s_gg{
margin:16px 0;
} 
.yn2{
display:none;
} 
/*-----------------*/
#nav{
float:left;
width:180px;
margin-top:10px;
}
.n_me{
border:1px solid #bdf;
padding:2px ;
margin-bottom:16px;
} 
#nav h3{
padding:5px 0 2px 8px;
background-color:#cef;
color:#00f;
}
.n_me ul{
padding:3px 5px 12px;
}
.n_me li a:link,.n_me li a:visited,.n_me li a:active {
display:block;
padding:9px 0 6px 8px;
border-bottom:1px dashed #bce;
}
.n_me li a:hover{
border-bottom:1px solid #f00;
text-decoration:none;
}
.n_me span{
color:#c99;
}
.pu_kw_wk{
padding:3px 5px 12px;
}
.pu-ki{
display:table;
width:100%;
line-height:1.9;
border-bottom:1px dashed #bce;
box-sizing: border-box;
}
.pu-ki1{
display:table-cell;
width:68px;
vertical-align:middle;
color:#999;
}
.pu-ki2{
display:table-cell;
vertical-align:middle;
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.pu-ki1 b{
color:#39c;
font-size:140%;
}
.pu-ki1 span{
color:#f09;
font-size:110%;
}
.n_gg{
text-align:center;
margin:18px 0;
} 
/* ---------------*/ 
#footer{
clear:both;
}
.f_me{
border-top:1px solid #999;
border-bottom:1px solid #999;
padding:8px 0 8px 10px;
margin:12px 0;
box-sizing: border-box;
}
.f_me p{
float:left;
width:16.66%;
box-sizing: border-box;
padding:5px 0 5px 10px;
	position: relative;
}
.f_me p::after {
	display: block;
	content: '';
	position: absolute;
	top:10px;
	left:0px;
	width: 6px;
	height: 6px;
background: linear-gradient(145deg, #f90, #fff); 
border:1px solid #f00;
}
.f_me a:hover {
text-decoration:underline;
}
.pgu {
display: none;
position: fixed;
bottom:40px;
right:5px;
}
.pgu img{
width:55px;
height:45px;
}
.pgu a {
display: block;
opacity: 0.6;
}
.pgu a:hover {
opacity:0.9;
}
.cr{
text-align:center;
margin:20px 0;
font-size:12px;font-size:1.2rem;
color:#999;
font-family:"MS PGothic",Osaka,sans-serif;
}
.cr img{
vertical-align:middle;
}  
.cr a{
text-decoration:none;
color:#999;
}
.f_lnk1{
margin:15px 0;
}
.f_lnk1 a{
color:#000;
}
.f_lnk2 a{
color:#aaa;
font-size:11px;
}
.f_lnk3 a{
color:#fff;
font-size:0px;
}
.f_lnk3{
font-size:0px;
display:none;
}
/*---------------------------------------*/
@media screen and (max-width: 920px){
#header,
#container,
#footer{
margin:0px 10px;
}
} 
/*-----------*/
@media screen and (max-width:800px){
.bar {
width:33.333%;
}
.bar2 {
width:33.333%;
}
.new_box{
width:46%;
}
} 
/*-----------*/
@media screen and (max-width:700px){
body{
font-size:15px;font-size:1.5rem;
}
.f_me p{
width:25%;
}
.pu-ki1{
width:80px;
}
} 
/*-----------*/
@media screen and (max-width:600px){
body{
font-size:16px;font-size:1.6rem;
}
.h_box{
height:auto;
}
.h_ta{
float:none;
}
.h_ta img{
margin-top:10px;
}
.h_gg{
float:none;
text-align:center;
padding:0;
}
.pgd{
display:block;
position:absolute;top:10px;right:18px;
transform: scale(1.5, 1);
}
.pgd a{
font-size:26px;
line-height:26px;
color:#9cf;
border:1px solid #9cf;
background-color:#eff;
border-radius:5px;
padding:0 8px;
opacity:0.5;
}
.pgd a:hover {
color:#69f;
background-color:#dff;
opacity:0.8;
}
#container{
margin:0px 26px;
}
#footer{
margin:0px;
}
#sectionwk{
float:none;
margin:0;
}
#section{
margin:0px;
}
#nav{
float:none;
width:100%;
}
#section h3,
#nav h3,
#footer h3{
background-color:#9cf;
padding:3px 0 0 10px;
line-height:1;
color:#009;
font-size:18px;font-size:1.8rem;
border:none;
}
.pu-ki{
padding-left:12px;
}
.pu-ki1{
width:85px;
}
.n_me ul{
padding:3px 0 12px;
}
.n_me li a:link,.n_me li a:visited,.n_me li a:active {
padding:9px 0 6px 12px;
}
.n_me{
border:0px solid #bdf;
padding:0;
}
.h_tx{
margin-top:10px;
}
.srt{
width:100%;
}
.s_me{
border:1px solid #aaa;
padding:4px;
margin-bottom:16px;
}
.f_gg{
padding:0;
margin:15px 0 6px;
border:none;
}
.f_me{
border:none;
background-color:#eee;
padding:4px 10px;
}
.yn1{
display:none;
}
 .yn2{
display:block;
} 
}
/*-----------*/
@media screen and (max-width:500px){
.f_me p{
width:50%;
}
}