@charset "UTF-8";
/******************** parts css ***********************/
#hgroup { width: 100%; background-color:#F0F0F0; }
#wrap_hgroup {position: relative;}
#headline1 { margin: 0; max-width: 510px; float: left; color:#777; text-shadow: #fffff8 1px 1px 0;
line-height: 1.1;
max-height: 27px;
-webkit-line-clamp: 2;
-moz-line-clamp: 2;
-ms-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
box-orient: vertical;
display: -webkit-box;
display: -moz-box;
display: -ms-box;
display: box;
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#headline1 h1,#headline1 h2,#headline1 p { display: inline; margin: 0; padding: 0; font-size: 11px; font-weight: normal; text-decoration: none;}
#social-button-mini { margin-top: 7px; max-width: 250px; float: right; }
#fontnavi { margin: 0; min-width: 220px; float: right; }
ul#fontSizer { mini-height: 2.5em; float: right; display: inline-block; margin: 0.25em; clear:both; }
ul#fontSizer li { text-align: center; float: left; padding: 0.5em; line-height: 1; font-size: 12px;
background-color: transparent; color:#333; text-shadow: #fffff8 1px 1px 0;}
ul#fontSizer li#font-s, ul#fontSizer li#font-m, ul#fontSizer li#font-l{ background-color: #fff; }
ul#fontSizer li#font-s.active, ul#fontSizer li#font-m.active, ul#fontSizer li#font-l.active { background-color: #C0C6C9; color:#fff; text-shadow: #333 1px 1px 0;}
.font-s { font-size: 80%; }
.font-m { font-size: 100%; }
.font-l { font-size: 130%; }
#font-s, #font-m, #font-l { margin-left: 2px; cursor: pointer; font-weight: normal; border:solid #ccc 1px; background-color: #fff; }
@media screen and (min-width: 0px) and (max-width: 979px) {
#headline1 { float: none; padding: 2px 14px;}
#fontnavi, #social-button-mini { display: none; }
}
#headline1, #fontnavi { margin:0; paddnig: 0; height: 100%;}
.social-button.google .popn-socialbutton-count {
position: relative;
box-shadow: none !important;
}
.social-button.google .popn-socialbutton-count:after,
.social-button.google .popn-socialbutton-count:before {
border: solid transparent;
content: ' ';
width: 0;
height: 0;
left: -16px;
position: absolute;
}
.social-button.google .popn-socialbutton-count:after {
border-width: 6px;
border-right-color: #eee;
top: 5px;
left: -11px;
}
.social-button.google .popn-socialbutton-count:before {
border-width: 8px;
border-right-color: #888;
top: 3px;
}
.social-button.google a.popn-socialbutton-count:hover:after {
border-right-color: #ddd;
}
#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; }
span#logoTitle { padding: 0; font-size: 23px; color: #51565b; display: inline-block; }
#headerinfo { text-align: right; }
#head_access {
color: #333;
overflow: hidden;
}
#head_access li {
font-size: 13px;
float: right;
line-height: 1.2;
vertical-align: bottom;
}
.head_contact_btn {
padding: 3px 0;
display: block;
background: none repeat scroll 0% 0% #C00;
color: #FFF;
font-weight: bold;
text-align: center;
width: 186px;
margin-left: 20px;
}
.head_contact_btn a, .head_contact_btn a:visited { color: #fff; }
.head_list a, .head_list a:visited { color: #51565b; }
.head_list {
background: url('http://www.alphanet.co.jp/images/listmark_foot.png') no-repeat scroll left 9px transparent;
padding-left: 13px;
padding-top: 5px;
margin-left: 15px;
}
#searchbox,
#alpha_search,
#google_search { margin: 5px auto; float: none; width: 95%; text-align: right; }
#searchbox {
float: right;
overflow: hidden;
margin-top: 20px;
}
#alpha_search,
#google_search {
position: relative;
float: right;
margin-left: 20px;
overflow: hidden;
}
#searchbox input { margin-bottom: 5px; }
input.google_btn,
input.fs-btn.fs-submit {
margin: 0 5px;
width:30px;
height:30px;
font-size: 30px;
font-size: 5px;
background-color: transparent;
border: none;
color: #f8f8f8;
}
#google_search:after,
#alpha_search:after {
font-family: WebHostingHub-Glyphs;
font-weight: normal;
font-style: normal;
position: absolute;
bottom: 0;
right: 0;
content:'\f69a';
font-size: 1em;
color: #ddd;
font-size: 30px;
}
@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; }
#head_access { margin: 14px 0;}
#head_access li { margin-right: 21px; }
#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 { width: 100%; display: inline-block; float:none; text-align: center; }
li.head_list { display: none; }
#searchbox,
#alpha_search,
#google_search { margin: 5px auto; float: none; width: 95%; text-align: right; }
#headerlogo { padding-top: 14px; }
}
@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; }
#head_access { margin: 14px 0;}
#head_access li { margin-right: 21px; }
#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 { padding-top: 14px; }
#logoImg { width: 100%; display: inline-block; float:none; text-align: center; }
li.head_list { display: none; }
#searchbox,
#alpha_search,
#google_search { margin: 5px auto; float: none; width: 95%; text-align:  right; }
}
@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 { padding-top: 14px; }
}
@media screen and (min-width: 768px) and (max-width: 979px) {
#logoTitle  {  font-size: 32px; }
#headerinfo p { font-size: 18px;}
}
@media screen and (min-width: 980px)  {
#wrap_logo { display:table; width:100%; }
#toplogo, #topinfo, #topsubtext{ display: table-cell; margin: 0; vertical-align: bottom; }
#logoTitle  {  font-size: 32px; }
}
#footer_nav { width: 100%; margin: 0; padding: 14px 0; text-align: right; overflow : hidden; border-top:solid #555555 3px; }
#footer_nav ul { min-width: 280px; margin-right: 0; padding: 0; text-align: left; display: inline-block; }
#footer_nav ul li { min-width: 2em; margin: 0; padding: 0; float: left; display: inline-block; overflow:hidden; position: relative; }
#footer_nav ul li a, #footer_nav ul li a:visited { display: inline-block;
color: #2b2b2b; font-size: 16px; padding: 0px 10px;
letter-spacing: 0.1em;
border-left:1px solid #ccc;
text-decoration: none;
}
#footer_nav ul li a,
#footer_nav ul li a:visited {
box-shadow:1px 0 #ddd, -1px 0 #eee inset;
-pie-box-shadow: 1px 0 #ddd, -1px 0 #eee inset;
position: relative;
behavior: url(http://www.alphanet.co.jp/catalog/js/PIE.htc);
}
#footercbox { text-align: left; width: 100%; height: 100%; padding: 21px 0; margin: 0; overflow: hidden; background-color: #F0F0F0; }
.footer_title { position:relative; height:25px; font-size: 21px; padding-left: 21px; margin-bottom: 14px; }
.footer_title:before {
content:'';
height:25px;
width:2px;
display:block;
position:absolute;
top:-1px;
left:4px;
background-color:#333;
border-left: 4px solid #333;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
}
.ft_contactbox { margin-bottom: 14px; }
.footer-cols { float: left; width:30.3%; height: 100%; padding: 1.5%; }
.footer-cols {
padding-bottom: 800px;
margin-bottom: -800px;
}
.fc_title { margin-bottom: 1.5em; }
.footerclorsnav a, .footerclorsnav a:visited { color: #51565b; }
dl.addressbox { display: bloack; }
dl.addressbox dt { margin-bottom: 0.5em; }
dl.contactbox { clear: both;  margin-top: 10px; width: 100% }
dl.contactbox dt { float: left; width: 6em; clear: both; padding: 0; margin-bottom: 0.5em; font-weight: bold; height: auto; }
dl.contactbox dd { margin-bottom: 0.5em; margin-left: 6em; height: auto; }
@media screen and (min-width: 0px) and (max-width: 320px) {
.footerbox { padding: 1em; }
}
@media screen and (min-width: 321px) and (max-width: 480px) {
.footerbox { padding: 1em; }
}
@media screen and (min-width: 481px) and (max-width: 767px) {
.footerbox { padding: 1em; }
}
@media screen and (min-width: 768px) and (max-width: 979px) {
}
@media screen and (min-width: 980px)  {
}
#footer_bottom { margin: 0; padding: 21px 0; width: 100%; text-align: center; background-color:#000; color: #fff; }
#copyright { font-size: 11px; padding: 0; }
#copyright, #copyright a, #copyright a:visited { color: #fff; }
#poweredby { font-size: 11px; padding: 0 10px; font-family: "Monotype Corsiva"; }
#poweredby, #poweredby a, #poweredby 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%;}
li#cate170 {
font-size: 21px;
backgorund-color: #fcfcfc;
border:solid #ccc 0.5px;
}
li#cate170 .linkimg span.imglabel { width: 100%; height: 100%; top: 0; left: 0; }
@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; }
}
.pdbox { width: 170px; padding:14px; float: left; margin: -14px 14px 14px 0; }
.pd_link { text-algin: left; }
.pd_link i { vertical-align:middle; }
.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;
}
.navbar .nav { margin: 0; width: 100%;}
.navbar-inner { padding-right: 0; padding-left: 0;}
.navbar .nav > li { display:table; float: left; border-right:solid #D4D4D4 1px; }
.navbar .nav > li:last-child {border-right:none;}
.navbar .nav > li > a { display: table-cell; vertical-align: middle; line-height: 1; height:48px; padding: 0 7px; text-align: center;}
ul .nav-tabs li a, ul .nav-tabs li a:visited,
ul .nav-pills li a, ul .nav-pills li a:visited,
ul .btn-group li a, ul .btn-group li a:visited {  color: #51565b; }
ul .nav-tabs li.active a, ul .nav-tabs li.active a:visited {  color: #51565b; }
ul .nav-pills li.active a, ul .nav-pills li.active a:visited {  color: #51565b; }
ul .btn-group li.active a, ul .btn-group li.active a:visited {  color: #51565b; }
.skrollbody { position: relative; overflow:hidden; margin-bottom: 56px;
width: 100%; margin-bottom: 7px; height:300px; }
.navbar .nav > li > a.active {
color: #555;
text-decoration: none;
background-color: #E5E5E5;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.125) inset;
}
.infonav_t {}
.menu_title { color:#FFB53C; border-bottom:solid #FFB53C 1px; }
[class^="infocate"],[class*=" infocate"] { display: inline-block; margin-left: 21px; padding: 0 14px;
position:relative;
background:#ffb53c;
color:#fff;
text-shadow:0 0 1px rgba(000,000,000,0.3);
}
[class^="infocate"] a, [class^="infocate"] a:visited { color: #fff; }
[class^="infocate"]:before,
[class*=" infocate"]:before {
position: absolute;
top: 0px;
left: 0px;
display: block;
content: "";
border-width: 5px 6px;
border-style: solid;
border-color: rgb(255, 255, 255) rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.5) rgb(255, 255, 255);
}
.slabtexted .slabtext{display:-moz-inline-box;display:inline-block;white-space:nowrap}.slabtextinactive .slabtext{display:inline;white-space:normal;font-size:1em !important;letter-spacing:inherit !important;word-spacing:inherit !important;*letter-spacing:0 !important;*word-spacing:0 !important;}.slabtextdone .slabtext{display:block;line-height:0.9;}
#infolist a, #infolist a:visited { color: #51565b; }
ul.dotline li.noline { border-bottom: none; margin-bottom: 0; }
#infoskroll { position: relative; overflow:hidden; width: 100%; margin-bottom: 7px; height: 600px; }
ul.shopitem li { display: inline-block; float: left; position: relative; border:solid #C4DE88 1px; margin-right: 3px; line-height: 1;}
ul.shopitem li:last { float: none; }
ul.shopitem li span.new { position: absolute; top: 5px; left: 5px; line-height: 1.8;}
span.itemname { position: absolute; bottom: 0; left: 0; width: 100%; color:#fff; text-indent: 7px;
text-shadow:0 0 1px rgba(000,000,000,0.3); background-color: rgb(157, 200, 56);
line-height: 1;
font-size: 18px;
padding: 7px 0;
text-align: center;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
.forpc {display:none;}
}
@media screen and (min-width: 801px) {
.forsmart {display:none;}
}

