@charset "utf-8";
/* CSS Document */



/*-----------------------------------------------
  text link
-----------------------------------------------*/

a         { color:#184085; }
a:link    { color:#184085; }
a:visited { color:#184085; }
a:hover   { color:#184085; text-decoration:underline; }
a:active  { color:#184085; }

body {
color:#333;
font-size:15px;
line-height:1.5;
font-family:"メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

input, textarea {
font-family:"メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}




/*-----------------------------------------------
  layout
-----------------------------------------------*/

body {
text-align:center;
background:#D21 url(../img/common/body_bg.png) top center repeat;
}
#wrapper {
text-align:left;
}


/*-----------------------------------------------
  header
-----------------------------------------------*/

#header {
width:950px;
margin:0 auto;
padding:15px 0;
overflow:hidden;
}
#header .logo {
float:left;
width:25%;
}
#header .logo img {
width:100%;
}
#header p.catch {
float:right;
margin-top:20px;
font-size:0.8em;
letter-spacing:0.1em;
color:#FFF;
}
#header #sp_menu {
display:none;
}

@media screen and (max-width:500px) {
#header {
position:relative;
width:95%;
margin-left:5%;
}
#header .logo {
width:60%;
}
#header p.catch {
display:none;
}
#header #sp_menu {
display:block;
position:absolute;
top:0;
right:0;
float:right;
width:22%;
height:100%;
text-align:center;
color:#FFF;
background:#D12 url(../img/common/sp_menu.png) center 25% no-repeat;
background-size:50%;
}
#header #sp_menu.close {
background:#D12 url(../img/common/sp_menu_close.png) center 25% no-repeat;
background-size:50%;
}
#header #sp_menu p {
margin-top:55%;
font-size:0.8em;
letter-spacing:0.1rem
}
}


/*-----------------------------------------------
  gnavi
-----------------------------------------------*/

#gnavi_area {
background:#EEE;
border-top:4px solid #A83;
border-bottom:1px solid #CCC;
}
#gnavi {
width:950px;
margin:0 auto;
padding:8px 0;
}
#gnavi ul {
overflow:hidden;
}
#gnavi li {
float:left;
width:14.5%;
padding:0 1%;
text-align:center;
border-left:1px dotted #CCC;
}
#gnavi li.first {
border-left:0;
}
#gnavi li a {
display:block;
padding:8px 0;
color:#333;
}
#gnavi li a:hover {
text-decoration:none;
border-radius:5px;
background:rgba(0,0,0,0.05);
}
#gnavi li img {
display:block;
width:30%;
margin:0 auto;
}

@media screen and (max-width:500px) {
#gnavi_area {
display:none;
position:absolute;
z-index:9999;
width:100%;
margin-top:0;
border-top:none;
border-bottom:none;
}
#gnavi {
width:100%;
padding:0;
opacity:0.8;
}
#gnavi li {
float:none;
width:100%;
padding:0;
font-size:1.1em;
letter-spacing:0.1em;
text-align:left;
background:#EEE;
border-left:none;
border-bottom:1px solid #CCC;
}
#gnavi li a {
padding:15px 0;
color:#333;
}
#gnavi li a:hover {
border-radius:0;
}
#gnavi li img {
display:inline;
width:8%;
margin:0 2.5% 0 5%;
vertical-align:middle;
}
}


/*-----------------------------------------------
  contents
-----------------------------------------------*/

#contents_area {
padding-bottom:40px;
background:url(../img/common/contents_bg.png) center top repeat;
overflow:hidden;
}
#contents {
width:950px;
margin:0 auto;
min-height:200px;
overflow:hidden;
}


@media screen and (max-width:500px) {
#contents {
width:90%;
}
}


/*-----------------------------------------------
  main
-----------------------------------------------*/

#main {
float:left;
width:650px;
margin-top:30px;
}

@media screen and (max-width:500px) {
#main {
float:none;
width:100%;
}
}


/*-----------------------------------------------
  side
-----------------------------------------------*/

#side {
float:right;
width:270px;
margin-top:30px;
}
#side ul.bnr {
width:270px;
margin:0 auto;
}
#side ul.bnr li {
margin-top:10px;
}
#side ul.bnr li:first-child {
margin-top:0;
}
#side ul.bnr img {
width:100%;
}
#side ul.bnr img:hover {
opacity:0.8;
}
#side dl.contact {
margin-top:20px;
padding:20px 15px;
color:#FFF;
background:#A83 url(../img/common/side_bg.png) center center repeat;
border-radius:10px;
}
#side dl.contact dt {
width:100%;
text-align:center;
}
#side dl.contact dt img {
width:85%;
}
#side dl.contact dd {
width:100%;
}
#side dl.contact dd.photo {
margin-top:10px;
}
#side dl.contact dd.photo img {
width:100%;
border-radius:5px;
}
#side dl.contact dd.address {
margin-top:15px;
font-size:0.9em;
line-height:1.25;
}
#side dl.contact dd.tel {
margin-top:10px;
padding-left:28px;
font-size:150%;
background:url(../img/common/ico_tel.png) left center no-repeat;
background-size:25px;
}
#side dl.contact dd.fax {
padding-left:28px;
background:url(../img/common/ico_fax.png) left center no-repeat;
background-size:25px;
}
#side dl.contact dd.mail {
padding-left:28px;
background:url(../img/common/ico_mail.png) left center no-repeat;
background-size:25px;
}
#side dl.contact dd.mail a {
color:#FFF;
}
#side dl.contact dd.url {
padding-left:28px;
background:url(../img/common/ico_url.png) left center no-repeat;
background-size:25px;
}
#side dl.contact dd.url a {
color:#FFF;
}
#side dl.contact dd.hour {
margin-top:10px;
}
#side dl.contact dd.sekininsha {
margin-top:10px;
padding-top:10px;
border-top:1px dotted #FFF;
}
#side dl.contact dd.mobile {
padding-left:28px;
font-size:150%;
background:url(../img/common/ico_mobile.png) left center no-repeat;
background-size:25px;
}
#side p.illust {
margin-top:20px;
text-align:center;
}
#side p.illust img {
width:85%;
}

@media screen and (max-width:500px) {
#side {
float:none;
width:100%;
margin-top:40px;
font-size:1.1em;
}
#side dl.contact {
padding:20px;
border-radius:0;
}
#side dl.contact dt img {
width:65%;
}
}


/*-----------------------------------------------
  page Top
-----------------------------------------------*/

#pagetop {
position:fixed;
bottom:20px;
right:2.5%;
}
#pagetop a {
display:block;
width:40px;
height:28px;
padding:16px 10px;
font-size:0.7em;
text-align:center;
color:#FFF;
background:#A83;
border-radius:100%;
opacity:0.8;
}
#pagetop a:hover {
text-decoration:none;
opacity:0.6;
}


/*-----------------------------------------------
  link
-----------------------------------------------*/

#link {
width:950px;
margin:50px auto 0 auto;
overflow:hidden;
}
#link dt {
padding:2px 0 2px 35px;
font-size:1.25em;
background:#EEE url(../img/common/ico_link.png) 5px center no-repeat;
background-size:25px;
}
#link dd {
float:left;
width:180px;
margin:10px 0 0 10px;
border:1px solid #CCC;
box-sizing:border-box;
}
#link dd:nth-of-type(5n+1) {
margin-left:0;
}
#link dd img {
width:100%;
}
#link dd a:hover {
opacity:0.8;
}

@media screen and (max-width:500px) {
#link {
width:90%;
}
#link dd {
width:48%;
margin:4% 0 0 4%;
}
#link dd:nth-of-type(5n+1) {
margin-left:4%;
}
#link dd:nth-of-type(odd) {
margin-left:0;
}
}


/*-----------------------------------------------
  fnavi
-----------------------------------------------*/

#fnavi {
display:none;
}

@media screen and (max-width:500px) {
#fnavi {
display:block;
width:100%;
padding:0;
background:#EEE;
border-top:1px solid #CCC;
}
#fnavi li {
width:100%;
font-size:1.1em;
letter-spacing:0.1em;
background:#EEE;
border-bottom:1px solid #CCC;
}
#fnavi li a {
display:block;
padding:15px 0;
color:#333;
}
#fnavi li a:hover {
text-decoration:none;
background:rgba(0,0,0,0.05);
}
#fnavi li img {
width:8%;
margin:0 2.5% 0 5%;
vertical-align:middle;
}
}


/*-----------------------------------------------
  footer
-----------------------------------------------*/

#footer_area {
margin-top:5px;
padding:20px 0;
border-top:1px solid #FFF;
}
#footer {
width:950px;
margin:0 auto;
}
#footer p.copyright {
margin-top:15px;
font-size:0.8em;
text-align:center;
color:#FFF;
}


@media screen and (max-width:500px) {
#footer {
width:90%;
}
#footer dt {
float:none;
width:50%;
margin-right:0;
}
#footer dd {
margin-left:0;
}
#footer dd.address {
margin-top:10px;
}
}