@charset "Shift_JIS";
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, em, img, ins, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, legend, table, tr, th, td, article, aside, figure, footer, header, menu, nav, section {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
body {
    line-height:1;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
ul, li{
list-style:none;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
img,img a {
border:none;
vertical-align:middle;
}
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px dashed #bbb;
    margin:10px 0;
    padding:0;
}
input, select {
    vertical-align:middle;
}
.clearfix::after {
   content: "";
   display: block;
   clear: both;
}
.clears{
clear:both;
} 
/*-----------------------------------*/
html{font-size: 62.5%;}
body{
font-size:12px;font-size:1.2rem;
line-height:1.4;
font-family:'Lucida Grande', Meiryo, sans-serif;
-webkit-text-size-adjust: 100%;
}
a:link,
a:visited,
a:active{
color:#00f;
text-decoration:none;
}
a:hover {
color:#f00;
}
a:hover img{
filter: saturate(200%);
opacity:0.8;
}
input[type=submit]:active{
box-shadow:2px 2px 3px 2px rgba(0, 0, 0, 0.2) inset;
}
/*-----------------*/
#header,
#container,
#footer{
max-width:840px; 
margin:0px auto;
}
/*-----------------*/
#header{}
.h_box{
border-bottom:solid 1px #ccc;
padding-top:8px;
}
.h_box1{
float:left;
width:50%;
box-sizing: border-box;
}
.h_box2{
float:right;
width:50%;
box-sizing: border-box;
}
.h_box1 img{
width:220px;
height:34px;
}
input {
box-sizing: border-box;
border:1px solid #cde;
height:28px;
}
input[type=text] {
width:70%;
}
input[type=submit] {
width:30%;
background-color:#cde;
color:#58b;
}
.pgd{
display: none;
}
.stm{
font-size:13px;font-size:1.3rem;
}
.pnkz{
margin-top:6px;
padding-left:20px;
word-break: keep-all;
background-image: url("../im/ic1.gif");
background-repeat: no-repeat;
background-position:0 3px;
}
.pnkz1{
color:#f90;
}
.pnkz2{
color:#000;
font-weight: bold;
}
/*-----------------*/
#sectionwk{
float:left;
width:100%;
margin-right:-150px;
}
#section{
margin-right:150px;
}
.h_gg{
margin:10px 0 14px;
display: none;
}
.h_me{
margin-top:6px;
}
.h_me li {
display: inline-block;
margin:6px 10px 0;
padding-left:10px;
	position: relative;
}
.h_me li::after {
	display: block;
	content: '';
	position: absolute;
	top:5px;
	left:0px;
	width: 5px;
	height: 5px;
	background-color: #0ff;
	border: 1px solid #00f;
}
.h_me span{
color:#f0c;
font-family:Georgia;
}
.pn{
margin:12px 0;
line-height:1.9;
word-break:keep-all;
}
.pn1{
font-size:12px;
vertical-align:bottom;
}
.pn2 {
font-size:18px;font-size:1.8rem;
vertical-align:middle;
}
.pn b,
.pn a:link,.pn a:visited,.pn a:active {
box-shadow:0px 0px 3px rgba(0, 0, 0, 0.3);
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border:1px solid #aaa;
padding:0 5px;
}
.pn a:hover {
background-color:#ff0;
}
.pn b{
color:#f00;
background-color:#ff0;
padding:0 4px;
}
.box{
  display: table;
  table-layout: fixed;
  width: 100%;
box-sizing: border-box;
border: 1px solid #bbb;
padding:10px;
margin:15px 0;
box-shadow: 0px 0px 1px rgba(100,255,255,0.4);
}
.box1{
display: table-cell;
width:200px;
box-sizing: border-box;
vertical-align:middle;
}
.box2{
display: table-cell;
width:108px;
box-sizing: border-box;
vertical-align:middle;
}
.box3{
display: table-cell;
vertical-align:top;
box-sizing: border-box;
}
.box1 img{
width:180px;
height:164px;
background-color:#eee;
}
.box4 img,
.box2 img{
width:88px;
height:31px;
     box-shadow: 0 10px 8px -6px #8d8c8c;
background-color:#eee;
}
.box4{
display:none;
}
.rnk{
color:#690;
font-size:12px;font-size:1.2rem;
font-weight:normal;
margin-right:7px;
}
.rnk2{
font-size:18px;font-size:1.8rem;
color:#f00;
font-weight:bold;
font-family:'arial black','Verdana',sans-serif;
text-shadow:0px 0px 2px rgba(255, 0, 0, 0.3);
}
.rnk3{
font-size:14px;font-size:1.4rem;
color:#f0f;
margin-left:5px;
}
h2{
font-size:16px;font-size:1.6rem;
text-shadow:1px 1px 2px rgba(0, 0, 200, 0.2);
}
h2 b{
line-height:1.1;
font-family: 'Yusei Magic', sans-serif;
font-size:17px;font-size:1.7rem;
}
.fv{
width:16px;
height:16px;
margin:0 5px 0 0;
}
.kmnt{
margin-top:8px;
color:#555;
font-family:'Yu Gothic',sans-serif;
}
.kmnt2{
margin-top:7px;
font-size:16px;font-size:1.6rem;
}
.kmnt2 p {
font-family:'Comic Sans MS',sans-serif;
padding-left:15px;
	position: relative;
}
.kmnt2 p::after,
.kmnt2 p::before {
	display: block;
	content: '';
	position: absolute;
}
.kmnt2 p::after {
	top: 7px;
	left: 4px;
	width: 4px;
	height: 4px;
box-sizing: border-box;
border: 4px solid transparent;
border-left: 5px solid #f00;
}
.kmnt2 p::before {
	top: 5px;
	left: 0px;
	width: 11px;
	height: 11px;
background-color:#ff0;
border: 1px solid #f00;
border-radius:100%;
}
h5{
margin-top:8px;
color:#bcd;
font-size:12px;font-size:1.2rem;
line-height:1.1;
font-family:'Comic Sans MS',sans-serif;
}
h5 span {
font-weight:normal;
font-family:'Yu Mincho',sans-serif;
}
h5 b{
font-weight:bold;
color:#999;
font-family:'Verdana',sans-serif;
margin:0 4px 0 1px;
}
.point{
margin-top:2px;
color:#ba9;
text-align:right;
font-size:12px;font-size:1.2rem;
}
.point a{
cursor:text; 
}
.point2,
.point3{
color:#c67;
font-weight:bold;
font-family:'arial black',sans-serif;
}
.mylink{
margin-top:6px;
text-align:right;
font-family:Gulim;
}
.syki1,
.syki2{
font-weight:bold;
font-family:"Yu Gothic";
text-align:center; 
}
.syki1{
color:#e60;
font-size:20px;font-size:2rem;
padding:16px 0 4px;
margin-top:150px;
}
.syki2{
font-size:18px;font-size:1.8rem;
padding:4px 0 16px;
margin-bottom:80px;
}
/*-----------------*/
#nav{
width:130px;
float:right;
}
h3{
background-color:#e6f6f9;
padding:6px 0 4px 10px;
}
.n_wk{
padding:1px 2px;
border: 0px solid #bdf;
margin-bottom:20px;
background-color:#dee;
}
#nav li a:link,#nav li a:visited {
padding:6px 0 6px 17px;
display:block;
background-color:#e6f6f9;
border-top: 1px solid #ccc;
}
#nav li a:active, #nav li a:hover{
background-color:#ff0;
}
#nav ul li {
	position: relative;
}
#nav ul li::after {
	display: block;
	content: '';
	position: absolute;
	top:13px;
	left:8px;
	width: 3px;
	height: 3px;
background: linear-gradient(145deg, #0ff, #ff0); 
	border: 1px solid #09f;
}
#nav li span {
color:#000;
display: block;
line-height:1;
}
/*-----------------*/
#footer{
clear:both;
margin-top:18px;
}
.pgu {
display: none;
position: fixed;
bottom: 50px;
right:0px;
}
.pgu img{
width:50px;
height:45px;
}
.pgu a {
display: block;
opacity: 0.6;
}
.pgu a:hover {
opacity:1;
text-decoration:none;
}
.f_me{
margin-top:6px;
padding:10px;
border-top:solid 1px #ccc;
border-bottom:solid 1px #ccc;
font-size:16px;font-size:1.6rem;
}
.f_me li {
width:25%;
float:left;
box-sizing: border-box;
padding:2px 0 3px 10px;
	position: relative;
}
.f_me li::after {
	display: block;
	content: '';
	position: absolute;
	top:9px;
	left:0px;
	width: 5px;
	height: 5px;
background: linear-gradient(145deg, #f00, #ff0); 
	border: 1px solid #f09;
}
.ggk {
margin:12px auto;
width:60%;
}
.f_me1 {
padding:12px 0 12px 8px;
border-bottom:1px solid #ccc;
text-align:center;
}
.f_me1 a{
padding-right:14px;
margin-right:8px;
border-right:2px solid #fcc;
}
.f_me1 a:last-child {
border: 0;
padding-right:0;
margin-right:0;
}
#f_cr{
padding:12px 0 6px 0;
text-align:center;  
font-size: 12px;font-size:1.2rem;
color: #666;
font-family:"MS UI Gothic";
line-height:2;
}
.f_cr a{
color:#666;
}
#f_cr a:hover{
color:#f00;
}
.f_lnk a{
color:#000;
font-weight:bold;
}
.f_lnk span{
font-size: 80%;
color:#393;
}
.f_lnk1{
font-family:"Meiryo UI";
color:#f09;
}
.f_lnk1 a{
color:#666;
}
.jkn b{
font-family:"Comic Sans MS";
font-weight:bold;
}
.f_sp{
margin:10px 0;
}
.f_sp a{
display : inline-block;
color:#654;
font-size:14px;font-size:1.4rem; 
font-weight:bold;
transform : scaleY(1.4);
font-family: 'Yusei Magic', sans-serif;
}
.f_sp  a:hover{
color:#f00;
}
/*---------------------------------------*/
@media screen and (max-width: 856px) {
#header,
#container,
.wk{
margin:0 8px;
}
}
/*------------------*/
@media screen and (max-width: 760px) {
body{
font-size:14px;font-size:1.4rem;
}
#container{
margin:0;
}
#sectionwk{
float:none;
margin:0;
}
#section{
margin:0 8px;
padding-top:12px;
}
#nav{
width:100%;
float:none;
font-size:17px;font-size:1.7rem;
margin:20px 0 -25px;
}
.n_wk{
padding:0;
border:0;
margin-bottom:0px;
}
#nav li a:link,#nav li a:visited {
padding:7px 0 7px 27px;
}
h3{
display: none;
}
#nav ul li::after {
	top:15px;
	left:15px;
}
#nav li span {
color:#000;
display: block;
}
#nav li span {
display:inline;
}
.h_gg{
display: block;
}
.f_me{
background-color: #dee;
border:0;
}
.yn1{
display: none;
}
}
/*-------*/
@media screen and (max-width: 630px) {
.box2{
display: none;
}
body{
font-size:16px;font-size:1.6rem;
}
.kmnt{
font-size:14px;font-size:1.4rem;
}
.pn2 {
font-size:22px;font-size:2.2rem;
}
}
/*-------*/
@media screen and (max-width: 560px){
.kmnt{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5; 
  overflow: hidden;
            line-height: 1.4;
            max-height: 7em;
}
h2{
font-size:18px;font-size:1.8rem;
}
.ggk {
width:100%;
}
h5,
.f_me1 {
display: none;
}
}
/*-------*/
@media screen and (max-width: 500px) {
.h_box{
height:72px;
}
.h_box1,
.h_box2{
float:none;
width:100%;
}
.h_box1{
background: linear-gradient(transparent 50%, #bdf 50%);
margin-bottom:5px;
}
.pgd{
display: block;
position:absolute;top:0px;right:8px;
}
.pgd img{
width:50px;
height:45px;
transform:rotate(180deg);
transform: scale(1, -1);
    filter: FlipV;
    -ms-filter: "FlipV";
}
.pgd a {
display: block;
opacity: 0.4;
}
.pgd a:hover {
opacity:0.8;
}
.box1{
width:194px;
vertical-align:top;
}
.box1 img{
width:179px;
height:163px;
}
.f_me li {
width:33.33%;
}
.point_yn{
display: none;
}
}
/*-------*/
@media screen and (max-width: 420px) {
.box{
    display:block;
}
.box1{
width:100%;
    display:block;
}
.box3{
width:100%;
display:block;
margin-top:20px;
}
.box1 img{
width:100%; 
max-width:340px; 
height:auto;
margin:0px auto;
}
.box3 h2{
display:none;
}
.box4{
display:block;
}
.box4 img{
width:88px;
height:31px;
box-shadow: 0 10px 8px -6px #8d8c8c;
background-color:#eff;
}
.box4 .fv{
width:16px;
height:16px;
margin:0 5px 0 0;
}
.box4 h2{
margin:12px 0 6px;
line-height:1.1;
}
.kmnt{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6; 
  overflow: hidden;
            line-height: 1.4;
            max-height: 8.4em;
}
.f_me li {
width:50%;
}
}
/*-------*/
@media screen and (max-width: 380px) {
}