@charset "Shift_JIS";
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, form, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, footer, header,  menu, nav, section,  audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
article,aside,footer,header,menu,nav,section { 
	display:block;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
img,img a {
border:none;
}
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px dotted #999;
    margin:15px 0;
    padding:0;
}
li {
list-style:none;
}
.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-size:12px;font-size:1.2rem;
font-family:"Hiragino Kaku Gothic ProN",Meiryo,"Yu Gothic","MS PGothic",Osaka,sans-serif;
line-height:1.4;
}
a:link,a:visited,a:active{
color:#00f;
text-decoration:none;
}
a:hover{
color:#f00;
}
/*-------------*/
#header,
#container,
#footer{
max-width:900px;  
margin:0px auto;
}
/*-------------*/
.h_wk{
height:60px;
border-bottom:1px solid #9cf;
}
.h_bar{
display: table;
table-layout:fixed;
width:100%;
box-sizing: border-box;
}
.h_bar1{
display: table-cell;
vertical-align:middle;
box-sizing: border-box;
}
.h_bar2{
display: table-cell;
width:320px;
text-align:right;
padding-top:5px;
vertical-align:middle;
box-sizing: border-box;
}
.h_bar1 img{
width:238px;
height:40px;
margin-top:10px;
}
.pgd{
display: none;
}
.pnkz {
font-size:16px;font-size:1.6rem;
margin-top:6px;
padding-left:16px;
	position: relative;
}
.pnkz::after,
.pnkz::before {
	display: block;
	content: '';
	position: absolute;
}
.pnkz::after {
	top: 7px;
	left: 6px;
	width: 6px;
	height: 6px;
box-sizing: border-box;
border: 6px solid transparent;
border-left: 6px solid #f09;
}
.pnkz::before {
	top: 6px;
	left: 0px;
	width:8px;
	height: 8px;
box-sizing: border-box;
border-left: 3px solid #f09;
border-bottom: 3px solid #f09;
}
.pnkz1{
font-weight:bold;
color:#f06;
font-family:"arial black";
}
.pnkz2{
font-weight:bold;
color:#036;
}
.iti{
margin-bottom:10px;
line-height:1.8;
}
.iti span{
color:#c00;
}
.h_me span{
display: inline-block;
padding:0 6px;
margin:6px 10px 0;
}
.h_me b{
color:#f0c;
font-family:'Yu Gothic',sans-serif;
}
/*--------------------------*/
#sectionwk{
float:left;
width:100%;
margin-right:-180px;
}
#section{
margin-right:180px;
}
.srt{
margin-top:12px;
}
.srt input{
outline: none;
box-sizing: border-box;
border:1px solid #abc;
vertical-align:middle;
}
.srt input[type=text]{
width:77%;
height:28px;
padding:6px;
}
.srt input[type=submit]{
width:23%;
height:28px;
background-color:#bcd;
 margin:0px;
}
.srt input[type=submit]:active{
box-shadow:2px 2px 3px 2px rgba(0, 0, 0, 0.2) inset;
}
.srt input[type="submit"]::-moz-focus-inner{
border: 0px;
}
.kusn{
margin-top:6px;
}
.kusn span{
color:#c00;
font-weight:bold;
}
.pn{
margin-top:10px;
line-height:1.9;
word-break:keep-all;
}
.pn1{
margin-right:8px;
font-size:12px;font-size:1.2rem;
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;
}
.s_jkn{
margin-top:6px;
font-size:12px;font-size:1.2rem;
}
.s_jkn span{
color:#c00;
font-size:120%;
margin-left:4px;
}
.box1{
display:table;
width:100%;
box-sizing: border-box;
border:1px solid #ace;
padding:10px;
margin:16px 0;
}
.box2{
display:table-cell;
width:180px;
padding-right:20px;
vertical-align:middle;
}
.box3{
display:table-cell;
vertical-align:middle;
}
.box2 img{
width:180px;
height:164px;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.6);
border-radius: 240px 15px 100px 15px / 15px 200px 15px 185px;
}
.box2 a:hover img{
filter: brightness(80%);
}
.box4{
display:table-cell;
width:120px;
padding:0 5px 0 15px;
vertical-align:middle;
}
.titrba{
color:#888;
font-family:'Yu Gothic',sans-serif;
line-height:1.2;
}
.titr{
font-size:16px;font-size:1.6rem;
font-weight:bold;
font-family:'Meiryo',sans-serif;
}
.titr2{
font-size:140%;
color:#f00;
font-weight:bold;
font-family:'arial black',sans-serif;
}
.titr3{
color:#f0c;
font-size:120%;
}
.bana{
float:right;
}
.bana img{
max-width:108px;
margin:20px 0 10px 10px;
border-radius: 240px 15px 100px 15px / 15px 200px 15px 185px;
    -webkit-box-shadow: 0 10px 8px -6px #8d8c8c;
    -moz-box-shadow: 0 10px 8px -6px #8d8c8c;
     box-shadow: 0 10px 8px -6px #8d8c8c;
}
h4{
margin:6px 0;
font-weight:normal;
line-height:1.6;
}
.poit{
text-align:right;
}
.poit2{
color:#999;
}
.poit2 span{
color:#f00;
}
.ktgr{
margin-top:2px;
font-family:Geneva,"ＭＳ Ｐゴシック",Osaka;
}
.ktgr span{
padding-left:10px;
margin:0 6px;
	position: relative;
}
.ktgr span::after {
	display: block;
	content: '';
	position: absolute;
	top:4px;
	left:0px;
	width: 5px;
	height: 5px;
background-color:#ccc; 
border:1px solid #000;
}
.box4 li a{
display:block;
background-color:#def;
border-bottom:1px solid #fff;
padding:7px 0px 5px;
text-align:center;
font-family:Geneva,"ＭＳ Ｐゴシック",Osaka;
}
.box4 li a:hover{
background-color:#cff;
}
.hnt{
text-align:center;
padding:9px 0px 7px;
background-color:#def;
color:#090;
}
.hnt span{
color:#090;
}
.pgrn{
text-align:center;
padding-top:3px;
}
.sysi{
text-align:right;
}
.syki,
.syki2{
font-weight:bold;
font-size:20px;font-size:2rem;
text-align:center; 
}
.syki{
color:#f60;
margin-top:150px;
}
.syki2{
color:#666;
margin:20px 0 80px;
}
.s_gg{ 
margin:18px 0; 
}
.hnt2,
.yn2{
display:none;
}
/*--------------------------*/
#nav{
width:160px;
float:right;
}
#nav h3{
padding:5px 0 2px 8px;
background-color:#cef;
color:#369;
}
.n_mewk{
margin-bottom:18px;
border:1px solid #bdf;
padding:4px;
}
#nav li a:link,#nav li a:visited,#nav li a:active {
display:block;
padding:7px 0 7px 18px;
border-bottom:1px dashed #bce;
}
#nav li a:hover{
border-bottom:1px solid #f00;
}
#nav li span{
color:#c99;
}
#nav li{
	position: relative;
}
#nav li::after {
	display: block;
	content: '';
	position: absolute;
	top:12px;
	left:8px;
	width: 5px;
	height: 5px;
background-color:#0ff; 
border:1px solid #00f;
}
/*--------------------------*/
#footer{
clear:both;
}
.pgt{
text-align:right;
padding-top:14px;
line-height:1;
}
.pgt a:link,.pgt a:visited,.pgt a:active {
font-size:12px;font-size:1.2rem;
color: #69c;
font-weight:bold;
}
.pgt a:hover{
color: #f00;
}
.pgt span{
padding-left:13px;
	position: relative;
}
.pgt span::after {
	display: block;
	content: '';
	position: absolute;
	top:1px;
	left:0px;
	width: 6px;
	height: 6px;
box-sizing: border-box;
border: 6px solid transparent;
border-bottom: 6px solid #f00;
}
.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;
}
.f_me{
padding:10px 0px;
border-top:1px solid #9cc;
border-bottom:1px solid #9cc;
font-size:16px;font-size:1.6rem;
}
.f_me span{
display: inline-block;
box-sizing: border-box;
width:16%;
padding:4px 0 4px 10px;
	position: relative;
}
.f_me span::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_gg{
margin:16px auto 10px;
}
.f_cr{
padding:14px 0;
text-align:center;
font-size:12px;font-size:1.2rem;
color: #999;
font-family:Geneva,"ＭＳ Ｐゴシック",Osaka;
}
.f_cr img{
vertical-align:middle;
}
.f_jkn b{
color:#d87;
font-size:112%;
font-family:Comic Sans MS;
}
.f_lnk1{
padding-bottom:10px;
font-family:"Meiryo UI";
letter-spacing:-1px;
}
.f_lnk1 a{
color:#999;
}
.f_lnk1 a:hover{
color:#09f;
}
.f_lnk2 a{
color:#ccc;
font-size:8px;
}
.f_lnk3 a{
color:#ccc;
font-size:2px;
}
/*-----------------------------------------------------*/
@media screen and (max-width:920px) {
#header,
#container,
#footer{
margin:0px 10px;
}
}
/*--------*/
@media screen and (max-width: 800px) {
body{
font-size:16px;font-size:1.6rem;
}
h4{
font-size:14px;font-size:1.4rem;
}
.pn2 {
font-size:20px;font-size:2rem;
}
#sectionwk{
float:none;
margin:0;
}
#section{
margin:0;
}
#nav{
width:100%;
float:none;
margin:20px 0 -10px;
font-size:14px;font-size:1.4rem;
}
#nav li{
width:48%;
margin:0 1%;
float:left;
}
.f_me span{
width:24%;
}
.bana{
float:none;
}
.pn1{
display:block;
}
.ktgr{
display:none;
}
}
/*--------*/
@media screen and (max-width: 600px) {
#header,
#footer{
margin:0px;
}
.wk{
margin:0px 10px;
}
.h_wk{
height:auto;
}
.h_bar{
table-layout:auto;
}
.h_bar1{
display: table-row;
}
.h_bar2{
display: table-row;
width:100%;
text-align:center;
padding-top:0px;
}
.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:0;
}
#section{
margin:0 20px;
}
.box1{
display:block;
border:0px solid #ace;
padding-top:10px;
margin-bottom:20px;
}
.box2{
display:block;
width:100%;
}
.box2 img{
width:100%;
max-width:320px;
height:auto;
border: 1px solid #ccc;
}
.box3{
display:block;
width:100%;
}
.box4{
display:block;
width:100%;
padding:0;
}
.box4 li a{
display:inline;
float:left;
background-color:transparent;
border:0;
padding:0 0 0 7px;
margin:0 8px 4px 0;
	position: relative;
}
.box4 li a::after {
	display: block;
	content: '';
	position: absolute;
	top:8px;
	left:0px;
	width: 5px;
	height: 5px;
background-color:#0ff; 
border:1px solid #00f;
}
.box4 li a:hover{
background-color:transparent;
}
.titr{
font-size:20px;font-size:2rem;
}
h4{
margin:2px 0;
}
.n_mewk{
border:0;
background-color:#eee;
}
.f_me{
border:0;
background-color:#eee;
}
.f_me span{
width:auto;
margin:0 10px;
}
.poit,
.bana,
.hnt,
#nav h3,
.yn1{
display:none;
}
.yn2{
display:block;
}
}
/*--------*/
@media screen and (max-width:500px) {
.f_me li{
width:50%;
}
.n_mewk{
padding:0;
margin:0;
}
#nav li{
float:none;
width:100%;
margin:0;
font-size:16px;font-size:1.6rem;
}
#nav li a:link,#nav li a:visited,#nav li a:active {
padding:7px 0 7px 24px;
background-color:#def;
border-bottom:0px solid #fff;
border-top:1px solid #fff;
}
#nav li::after {
	top:14px;
	left:12px;
}
#nav li a:hover{
background-color:#ff0;
}
}