@charset "UTF-8";
/******************** parts css ***********************/
/******************** global navigation ***********************/
/*! 	HeadShrinker v1.0.2
To be used with jquery.headshrinker.js by Chris Wharton (https://github.com/weare2ndfloor/HeadShrinker)
*/
.headshrinker .headshrunk a.headshrinker-reveal.hs-reveal-left {
right: auto;
left: 20px;
}
.headshrinker .headshrunk a.headshrinker-reveal span {
display: block;
width: 60%;
margin: 0 auto;
height: 4px;
margin-top: 13px !important;
margin-bottom: -10px !important;
border-radius: 50px;
}
.headshrinker .headshrunk .headshrinker-menu {
position: absolute;
top: 0;
left: 0;
overflow-y: scroll;
max-height: 500px;
}
.headshrinker .headshrunk .headshrinker-menu {
display: block;
width: 100%;
text-align: left;
}
.headshrinker .headshrunk .headshrinker-menu ul, .headshrinker .headshrunk .headshrinker-menu li  {
display: block;
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
.headshrunk > ul li { }
@media screen and (min-width: 641px)  {
.smrt_title {display: none; }
ul.leftnav li a.active { background-color: #1E3C79; color: #fff; }
#navi nav ul.leftnav li a.active, #navi nav ul li.leftnav a.active:visited { color: #fff; }
#navi { background-color: #fff; box-shadow: 5px 0px 10px;}
#navi nav ul  { display: inline-block; padding: 0; }
#navi nav ul li { display: inline-block; float: left; line-height: 1; }
#navi nav ul.leftnav li { display: inline-block; padding: 0; font-size: 14px; border-right: 1px solid #ccc; float: left; }
#navi nav ul.leftnav li a, #navi nav ul li.leftnav a:visited { color: #51565b; }
#navi nav ul.rightnav  { float: right; }
#navi nav ul.rightnav li {  display: inline-block; float: left; font-size:32px;}
.tbtn,.tbtn a, .tbtn a:visited {color:#53A8EB;}
.fbtn,.fbtn a, .fbtn a:visited {color:#425E8D;}
#navi nav ul.leftnav li a { display: block; width: 100%; height: 100%; padding: 14px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
}
@media screen and (min-width: 0px) and (max-width: 640px) {
header > div#nav {display: none;}
.headshrinker-menu > ul {}
.headshrinker .headshrunk { background: #fff; }
#navi nav .headshrinker-menu >ul.leftnav li a,
#navi nav .headshrinker-menu >ul.leftnav li a.active, #navi nav .headshrinker-menu >ul li.leftnav a.active:visited { color: #000; }
.headshrinker .headshrunk a.headshrinker-reveal span { background: #fff; }
.headshrinker .headshrunk a.headshrinker-reveal {
width: 44px;
height: 44px;
background: #336699;;
display: inline-block;
position: absolute;
top: 12px;
right: 20px;
}
.headshrinker .headshrunk .headshrinker-menu a {
display: block;
background: none repeat scroll 0% 0% #f3f3f3;
padding: 10px 20px !important;
border-bottom: 1px solid #efefef;
color: #000;
}
.headshrinker .headshrunk .headshrinker-menu ul ul a {
padding-left: 40px !important;
color: #000;
}
.headshrinker .headshrunk .headshrinker-menu ul ul ul a {
padding-left: 60px !important;
color: #000;
}
.headshrinker .headshrunk .headshrinker-menu ul ul ul ul a {
padding-left: 80px !important;
color: #000;
}
.headshrinker .headshrunk .headshrinker-menu ul ul ul ul ul a {
padding-left: 100px !important;
color: #000;
}
.headshrinker .headshrunk .headshrinker-menu ul li a.headshrinker-expand {
width: 26px;
height: 26px;
border: none !important;
padding: 7px !important;
text-align: center;
position: absolute;
right: 0;
top: 0;
z-index: 2;
font-weight: 700;
background: none !important;
font-size: 20px;
}
}
#headerarea { width: 100%; margin: 0; padding: 0 0 14px; }
#headerlogo { display: table-cell; margin: 0; vertical-align: bottom; height: 100%; width: 40%; }
#headerinfo { display: table-cell; margin: 0; vertical-align: bottom; height: 100%; text-align: right; }
#headersubtext { display: table-cell; margin: 0; vertical-align: bottom; height: 100%; text-align: right; font-size: 18px;}
span#logoImg img { display: inline-block; margin-right: 7px; width: 250px; margin-top: 14px; }
span#logoTitle { padding: 0; font-size: 18px; color: #000; display: inline-block; margin-top: 7px;
text-shadow: -1px 1px 0 rgba(255, 255, 255, 1);
font-family: “Times New Roman”, “游明朝”, YuMincho, “ヒラギノ明朝 ProN W3″, “Hiragino Mincho ProN”, “HG明朝E”, “メイリオ”, Meiryo, serif;
}
#headerinfo { text-align: right; }
#searchbox {
float: right;
overflow: hidden;
margin-top: 20px;
}
#website_search, #google_search {
position: relative;
float: right;
margin-left: 20px;
overflow: hidden;
}
#searchbox form, #searchbox input, #searchbox button, #searchbox select, #searchbox textarea { margin-bottom: 0; line-height: 1;}
input.google_btn, input#flexSBtn {
margin: 0;
width:37px;
height:30px;
font-size: 30px;
font-size: 5px;
background-color: transparent;
border: none;
color: #f8f8f8;
font-family: WebHostingHub-Glyphs;
font-weight: normal;
font-style: normal;
color: #ddd;
font-size: 30px;
}
.highlight { background-color: yellow }
@media screen and (min-width: 0px) and (max-width: 320px) {
#logoTitle  { width: 100%; display: block; margin-top: 14px; font-size: 23px; float:none; text-align: center; }
#headerinfo p { font-size: 18px;}
#headerinfo ul li {font-size: 18px;}
#headerlogo, #headerinfo, #headersubtext {width: 100%;float:none;  display: inline-block; margin: 0; padding:0;}
#logoImg, #headerinfo { width: 100%; display: inline-block; float:none; text-align: center; }
#headerlogo { margin-top: 10px; }
#searchbox { float:none; margin: 14px auto; display: inline-block;}
}
@media screen and (min-width: 321px) and (max-width: 480px) {
#logoTitle  { width: 100%; margin-top: 14px; display: block; font-size: 26px; float:none; text-align: center; }
#headerinfo p { font-size: 18px;}
#headerinfo ul li.tell {font-size: 18px;}
#headerinfo ul li.tell i {font-size: 21px;}
#headerlogo, #headerinfo, #headersubtext {width: 100%;float:none;  display: inline-block; margin: 0; padding:0; }
#logoImg, #headerinfo { width: 100%; display: inline-block; float:none; text-align: center; }
#headerlogo { margin-top: 10px; }
#searchbox { float:none; margin: 14px auto; display: inline-block;}
}
@media screen and (min-width: 481px) and (max-width: 767px) {
#logoTitle  {  font-size: 30px; }
#headerinfo p { font-size: 18px;}
#headerinfo ul li.tell {font-size: 18px;}
#headerinfo ul li.tell i {font-size: 21px;}
#headerlogo, #headerinfo, #headersubtext {width: 100%;float:none;  display: inline-block; margin: 0; padding:0; }
#headerlogo { margin-top: 10px; }
}
@media screen and (min-width: 768px) {
#wrap_logo { display:table; width:100%; }
#toplogo, #topinfo, #topsubtext{ display: table-cell; margin: 0; vertical-align: bottom; }
#logoTitle  {  font-size: 32px; }
}
#footer_content { text-align: left; width: 100%; height: 100%; padding: 21px 0; margin: 0; overflow: hidden; background-color: #1E3C79; color:#fff;}
#ft_contactbox { text-align: right; }
.qrbtn {color: #fff;display: inline-block;margin-top: 7px;}
#ft_qrbox img { width: 80%; max-width: 150px;  max-height: 150px; }
#footer_content a, #footer_content a:visted {color:#fff;}
@media screen and (min-width: 0px) and (max-width: 480px) {
#ft_companylogo img { display: inline-block; width: 100%;  }
#ft_companylogo { width:100%; }
#ft_contactbox { width:100%; }
#ft_qrbox { font-size: 18px; text-align: center;}
}
@media screen and (min-width: 481px) and (max-width: 767px) {
#ft_companylogo { width:100%; }
#ft_contactbox { width:100%; }
#ft_qrbox { font-size: 10px; text-align: center;}
}
@media screen and (min-width: 768px) {
#ft_content { display:table; width:100%;}
#ft_companylogo, #ft_contactbox, #ft_qrbox { display: table-cell; }
#ft_companylogo { width:48%; }
#ft_contactbox { vertical-align: bottom; }
#ft_contactbox ul { padding:0 14px; }
#ft_qrbox { width:145px; vertical-align: bottom; }
#ft_contactbox br { display: none; }
#ft_qrbox { font-size: 10px; text-align: center;}
}
#footer_bottom { margin: 0; padding: 20px 0; width: 100%; text-align: center; }
#copyright { font-size: 11px; padding: 0; }
#copyright, #copyright a, #copyright a:visited { color: #ccc; }
ul#catelink { display: block; width: 100%;font-size: 21px; letter-spacing: 0.15em;}
ul#catelink li { display: inline-block; position: relative; width: 100%; margin-bottom: 2px;}
ul#catelink li a { display: block; width: 100%;
overflow: hidden;
}
ul#catelink li, ul#catelink li a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
ul#catelink li a, ul#catelink li a:visited { color: #000; }
ul#catelink li .linkimg { position: absolute; display: inline-block;
z-index: 1;
}
ul#catelink li .linkimg img { min-width: 100%; min-height: 100%;}
@media screen and (min-width: 801px) {
ul#catelink li a { padding-bottom : 38%; }
ul#catelink li .linklabel { position: absolute; display: inline-block; }
ul#catelink li .linklabel { z-index: 9; top: 3px; left: 7px; }
}
#mail-form-footer { margin: 21px 0; }
#mailnotes { font-size:13px; border:solid #ccc 1px; padding: 1em; margin: 2em 0; }
#engallrybox ul li { float: left; display: inline-block; margin-bottom: 7px; }
@media screen and (min-width: 0px) and (max-width: 480px) {
#engallrybox ul li { width: 49%; margin-right: 2%; }
#engallrybox ul li:nth-child(2n) {margin-right: 0;}
}
@media screen and (min-width: 481px) and (max-width: 640px) {
#engallrybox ul li { width: 32%; margin-right: 2%; }
#engallrybox ul li:nth-child(3n) {margin-right: 0;}
}
@media screen and (min-width: 640px) and (max-width: 800px) {
#engallrybox ul li { width: 24%; margin-right: 1.2%; }
#engallrybox ul li:nth-child(4n) {margin-right: 0;}
}
@media screen and (min-width: 801px) {
#engallrybox ul li { width: 19%; margin-right: 1.2%; }
#engallrybox ul li:nth-child(5n) {margin-right: 0;}
}
#before_link, #curent_link, #next_link { display: inline-block; width: 32%; font-size: 13px;
padding: 5px 21px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#before_link span, #next_link span {
display: inline-block;
width : 90% ; /* IE8以下とAndroid4.3以下用フォールバック */
width : -webkit-calc(100% - 38px) ;
width : calc(100% - 38px) ;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
#curent_link span {
display: inline-block;
width : 80% ; /* IE8以下とAndroid4.3以下用フォールバック */
width : -webkit-calc(90% - 38px) ;
width : calc(90% - 38px) ;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
#next_link { text-align: right; }
#curent_link { text-align: center; }
#before_link i {margin-right: 7px;}
#next_link i {margin-left: 7px;}
.nbnavi { display: inline-block; width: 100%; margin-bottom: 3px; }
#entrynavi a, #entrynavi a:visited { color: #51565b; }
@media screen and (min-width: 0px) and (max-width: 480px) {
#before_link, #curent_link, #next_link { display: block; width: 100%; font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
margin-bottom: 3px;
}
#next_link, #curent_link { text-align: left; }
}
.catenextpre_body { font-size: 14px; width: 100%; min-height: 2em;}
.catebefore, .catenext{ width: 49%; display: inline-block; }
.catebefore {float:left; text-align: left;}
.catenext{float:right; text-align: right;}
.catebefore i { margin-right: 7px;}
.catenext i { margin-left: 7px;}
.catebefore span, .catenext span {
display: inline-block;
width : 80% ; /* IE8以下とAndroid4.3以下用フォールバック */
width : -webkit-calc(90% - 38px) ;
width : calc(90% - 38px) ;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
#topLabeltitle { position: relative; }
#topLabeltitle .on_tt { position: absolute; bottom: 0; right: 14px; color: #fff; }
#topimgtitle {
width: 100%;
height: auto;
display:table;
margin: 14px 0 21px; padding: 7px 14px;
color: #51565b;
background-color: #CCC;
border: solid #ddd 1px;
font-size: 40px;
text-align: center;
line-height: 1.3;
overflow: hidden;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#topimgtitle img { display: table-cell;  vertical-align: middle; margin-right; 1em; }
#topimgtitle span.side_tt { display: table-cell; height: 100%; vertical-align: middle; }
@media screen and (min-width: 0px) and (max-width: 800px) {
.forpc {display:none;}
}
@media screen and (min-width: 801px) {
.forsmart {display:none;}
}
footer[class^="span"],[class*=" span"] {
margin:0 0 7px; pdding: 7px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and (min-width: 0px) and (max-width: 480px) {
.forpc, .forpctab { display:none; }
#footer_content > .wrap > .row-fluid > .span3 {width: 100%; margin: 3px 0;}
[class$="_title"], [class*="_title "] {font-size: 18px;}
section.sidebox, footer [class^="icon-span"], footer [class*=" span"] { width: 100%; }
section.sidebox.w100 { width: 100%; }
section.sidebox.w100 > div { width: 48%; marigin-right: 1%;}
section.sidebox.w100 > div:nth-child(2n) { marigin-right: 0;}
#left[class^="span"] section.sidebox { width: 49%; }
#gammainner  section.sidebox { width: 100%; }
dl[class^="dt"] dt,dl[class*=" dt"] dt {width:100%;}
dl[class^="dt"] dd,dl[class*=" dt"] dd {padding:0 14px 3.5px}
}
@media screen and (min-width: 481px) and (max-width: 640px) {
.forpc, .forphone { display:none; }
#footer_content > .wrap > .row-fluid > .span3 {width: 48%; margin: 3px 0.8%;}
[class$="_title"], [class*="_title "] {font-size: 18px;}
section.sidebox { width: 48%; marigin-right: 1%;}
section.sidebox:nth-child(2n) { marigin-right: 0;}
section.sidebox.w100 { width: 100%; margin-right: 0; }
section.sidebox.w100 > div { width: 32%; margin-right: 1%;}
section.sidebox.w100 > div:nth-child(3n) {margin-right: 0;}
#left[class^="span"] section.sidebox { width: 49%; }
footer.span2 {width: 49%;}
footer.span3 {width: 49%;}
footer.span4 {width: 49%;}
footer.span6 {width: 100%;}
dl[class^="dt"] dt,dl[class*=" dt"] dt {width:100%;}
dl[class^="dt"] dd,dl[class*=" dt"] dd {padding:0 14px 3.5px}
}
@media screen and (min-width: 641px) and (max-width: 800px) {
.forpc, .forphone {display:none;}
section.sidebox, section.sidebox.w100 > div { width: 32%; margin-right: 1%;}
section.sidebox:nth-child(3n), section.sidebox.w100 > div:nth-child(3n) {margin-right: 0;}
section.sidebox.w100 { width: 100%; margin-right: 0;}
#left[class^="span"] section.sidebox, span2 section .sidebox, span3 section .sidebox { width: 24%; }
footer.span2 {width: 33%;}
footer.span3 {width: 33%;}
footer.span4 {width: 49%;}
footer.span6 {width: 49%;}
}
@media screen and (min-width: 801px) {
.forphone {display:none;}
footer.span2 {width: 19.5%;}
footer.span3 {width: 24%;}
footer.span4 {width: 33%;}
footer.span6 {width: 49%;}
.forphone, forsmart {display:none;}
#sidemenubox {display:none;}
}
@media screen and (min-width: 0px) and (max-width: 799px) {
body { width:100%; margin:0; padding:0; }
header, footer,#alphabox, #betabox, #beta2box, #gammabox {
padding: 3px 7px; margin: 0; width: 100%;
float: none; display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#left[class^="span"] { width: 100%; padding: 0; margin: 0; float: none; display: block; }
#alphabox, #betabox, #gammabox { height: auto; padding-bottom: 0px !important; margin-bottom: 0px !important; }
#betainner, #gammainner { padding-top: 0; padding-bottom: 7px; }
[id^="wrap_"], [id*=" wrap_"], [class^="wrap_"], [class*=" wrap_"], .wrap { margin: 0px; padding: 0px; border: none;}
#font-resize-area { padding: 7px 0; }
header, footer { margin: 0px; padding: 0px; }
#wrap_slider, [class$="_body"],[class*="_body "] { padding-left: 7px;padding-right: 7px; }
.wrap { padding: 7px;}
}
/* clearfix */
.clear { clear:both;display:block;overflow:hidden;visibility:hidden;width:100%;height:0 }
.clearfix { width:100%; }
.clearfix:after,
[class$="_tilte"]:after, [class*="_tilte "]:after,
[class$="_body"]:after, [class*="_body "]:after,
[class^="wrap_"]:after ,[class*=" wrap_"]:after,
[id^="wrap_"]:after ,[id*=" wrap_"]:after,
.wrap:after { content: ""; display: block; clear: both; font-size:0; line-height:0; visibility:hidden; width:100%; height:0; }