/*
Theme Name: fourruof
*/



*{
margin:0;
padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
font-family: 'Montserrat', Gotham, 'Proxima Nova', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
font-size: 15px;
line-height: 1.5;
color: #000;
background: #fff;
}



ul, li{
list-style:none;
}


a {
text-decoration:none;
color:#333;
}





/* ---- demos ---- */

.demo {
  margin-bottom: 0.8em;
}


/* clearfix */
.isotope:before,
.isotope:after {
  content: " ";
  display: table;
}

.isotope:after {
  clear: both;
}


.isotope {
border-top: 1px solid hsla(0, 0%, 0%, 0);
border-left: 1px solid hsla(0, 0%, 0%, 0);
  background: hsla(0, 0%, 0%, 0.1);
}


/* ---- item elements ---- */

.element-item {
  position: relative;
  float: left;
  width: 220px;
  height: 220px;
  margin-right: 1px;
  margin-bottom: 1px;
  background: #888;
  color: #262524;
}

.element-item a{
outline: none;
}


.element-item .name {
  position: absolute;
left: 10px;
top: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: normal;
}

.element-item .symbol {
position: absolute;
  top: 185px;
  font-size: 13px;
  font-weight: bold;
  color: #333;
  text-align:center;
  width: 100%;
}

.element-item .itemnumber {
  position: absolute;
  right: 8px;
  top: 5px;
}

.element-item .number {
  position: absolute;
left: 10px;
top: 28px;
  font-size: 12px;
}

.element-item.alkali          { background: #F00; background: hsl(   0, 100%, 50%); }
.element-item.alkaline-earth  { background: #F80; background: hsl(  36, 100%, 50%); }
.element-item.lanthanoid      { background: #FF0; background: hsl(  72, 100%, 50%); }
.element-item.actinoid        { background: #0F0; background: hsl( 108, 100%, 50%); }
.element-item.transition      { background: #0F8; background: hsl( 144, 100%, 50%); }
.element-item.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }
.element-item.metalloid       { background: #08F; background: hsl( 216, 100%, 50%); }
.element-item.diatomic        { background: #00F; background: hsl( 252, 100%, 50%); }
.element-item.halogen         { background: #F0F; background: hsl( 288, 100%, 50%); }
.element-item.noble-gas       { background: #F08; background: hsl( 324, 100%, 50%); }


.ui-group {
width: 100%;
}

.ui-group h3 {
vertical-align: top;
line-height: 36px;
margin: 0 0.2em 0 0;
font-size: 16px;
text-align: center;
}









































@media screen and (max-width : 442px){
#hero .primary-content > *{
width:443px;
margin: 0 auto;
}
}



@media screen and (min-width : 443px){
#hero .primary-content > *{
width:443px;
margin: 0 auto;
}
}



@media screen and (min-width : 664px){
#hero .primary-content > *{
width:664px;
margin: 0 auto;
}
}


@media screen and (min-width : 885px){
#hero .primary-content > *{
width:885px;
margin: 0 auto;
}
}


@media screen and (min-width : 1106px){
#hero .primary-content > *{
width:1106px;
margin: 0 auto;
}
}


@media screen and (min-width : 1327px){
#hero .primary-content > *{
width:1327px;
margin: 0 auto;
}
}




#header{
margin-top:30px;
}



#header .header_inner {
overflow:hidden;
}



@media screen and (max-width : 445px){
#header .header_inner {
width:446px;
margin: 0 auto;
}
}



@media screen and (min-width : 446px){
#header .header_inner {
width:446px;
margin: 0 auto;
}
}



@media screen and (min-width : 668px){
#header .header_inner {
width:668px;
margin: 0 auto;
}
}


@media screen and (min-width : 890px){
#header .header_inner {
width:890px;;
margin: 0 auto;
}
}


@media screen and (min-width : 1112px){
#header .header_inner {
width:1112px;
margin: 0 auto;
}
}



































#header .logo{
float:left;
}




#header .grand_menu{
float:right;
}



#header .grand_menu li{
float:left;
margin-left:20px;
}



#header .grand_menu li p {
font-family: Futura, "Trebuchet MS", Arial, sans-serif;
font-size:12px;
}


.brand_logo{
width:100%;
display: inline-block;
margin: 20px 0 10px;
}

.brand_logo p{
text-align:center;
}


.button {
outline: none;
cursor: pointer;
font-size: 12px;
font-weight: bold;
padding:5px 10px;
background-color: #fff;
color: #333;
border-style: none;
}


.button-group{
text-align: center;
}



.sort_navi{
margin-bottom:15px;
background: #fff;
text-align: center;
width: 100%!important;
z-index:99;
display: block!important;
opacity:1!important;
height:auto!important;
padding: 0px!important;
margin: 0px!important;
}


.top_sign p{
font-family: Futura, "Trebuchet MS", Arial, sans-serif;
font-size:12px;
text-align:center;
}


.ui-group{
display:none;
position:absolute;
z-index:9999;
background:url(images/sort_navi_back.png) repeat;
padding-bottom: 10px;
}

.sort{
display:none!important;
}


#footer{
margin: 60px 0; 
}

#footer .footer_inner p{
font-size:11px;
font-family: Futura, "Trebuchet MS", Arial, sans-serif;
text-align:center;
}

#footer .footer_inner .copy{
margin-top:10px;
}


.top_sign_icon{
background:url(images/top_sign.png) no-repeat 0 0;
width:16px;
height:16px;
margin:0 auto;
}

.top_sign_icon_on{
background:url(images/top_sign_on.png) no-repeat 0 0;
}



.sort_navi_follow{
position:fixed;
z-index:99;
top:0;
text-align:center;
border-bottom:1px solid #ccc;
width:100%;
}







.isotope_follow{
margin-top:50px!important;
}


.top_sign{
padding:5px 0;
}

























.about #header .header_inner{
width:890px;
}


#page_content{
margin-top: 80px;
overflow:hidden;
}

#page_content .page_content_inner{
width:880px;
margin: 0 auto;
}


.bland_index .left{
float:left;
width:352px;
}

.bland_index .left img{
border: 4px solid #000;
}





.bland_index .right{
float:right;
width:480px;
}


.bland_index .main_title{
font-size:28px;
font-family: Futura, "Trebuchet MS", Arial, sans-serif;
margin-bottom:30px;
}


.bland_index .right .title{
font-size:28px;
font-family: Futura, "Trebuchet MS", Arial, sans-serif;
}

.bland_index .right .note{
font-size:13px;
line-height:220%;
margin-top:30px;
}


.bland_index .fourruof{
border-bottom: 2px dotted #333;
padding-bottom:40px;
margin-bottom:40px;
overflow:hidden;
}








.shoplist #header .header_inner{
width:890px;
}



.shoplist .area_name {
font-size:15px;
}



.shoplist tr {
padding-bottom:10px;
height:35px;
}


.shoplist td {
font-family: Futura, "Trebuchet MS", Arial, sans-serif;
letter-spacing:1px;
font-size:13px;
}


.shoplist td a{
text-decoration:underline;
}



.news #header .header_inner{
width:890px;

}






.coming {
font-family: Futura, "Trebuchet MS", Arial, sans-serif;
letter-spacing:1px;
font-size:18px;
min-height:500px;
text-align:center;
padding-top:200px;
}












.contact .left {
float: left;
width: 350px;
margin-right: 48px;
}

.contact .left p{
font-size:12px;
line-height:180%;
}

.contact .left li{
margin-bottom:20px;
}


.contact .right {
float: left;
width: 480px;
}






.wholesale .left {
float: left;
width: 350px;
margin-right: 48px;
}

.wholesale .left p{
font-size:12px;
line-height:180%;
}

.wholesale .left li{
margin-bottom:20px;
}


.wholesale .right {
float: left;
width: 480px;
}








input, textarea, select {
background-color: white;
border: 2px solid #000;
color: #333;
outline: none;
padding: 5px;
width: 480px;
}


input[type="submit"] {
background: #000;
color:#fff;
cursor: pointer;
width: 482px;
margin-top: 0px;
font-family: Helvetica, Arial, sans-serif!important;
letter-spacing: 1px;
}




div.wpcf7-response-output {
margin:0!important;
font-size:12px;
}

div.wpcf7-mail-sent-ok {
border: 2px solid red!important;
}

div.wpcf7-validation-errors {
border: 2px solid red!important;
}



span.wpcf7-not-valid-tip {
font-size: 11px!important;
}


.textbox{
margin-bottom: 20px;
}

div.wpcf7-response-output {
margin:0!important;
}

div.wpcf7-validation-errors{
font-size:12px;
}

div.wpcf7-mail-sent-ok {
font-size:12px;
}


.sub_bottan p {
text-align: center;
}



.radio_boxs input {
width: auto!important;
margin-right: 5px;
margin-bottom:25px;
margin-top: -20px;
}

span.wpcf7-list-item {
margin-left:0!important;
margin-right: 20px;
}

.wpcf7-form-control-wrap .last{
margin-right: 2px!important;
}







#loader {
width: 64px;
height: 36px;
display: none;
position: fixed;
_position: absolute; /* IE6対策 */
top: 50%;
left: 50%;
margin-top: -32px; /* heightの半分のマイナス値 */
margin-left: -18px; /* widthの半分のマイナス値 */
z-index: 9999;
font-family: normal ,"ＭＳ Ｐゴシック", "Helvetica Neue",Arial,sans-serif;
letter-spacing:1px;
font-size:11px;
}



#fade {
display: none;
background-color: #FFFFFF;
position: absolute;
top: 0px;
left: 0px;
z-index: 999;
width: 100%!important;
height: 100%!important;
}



.mobile #loader {
display: none!important;
}



.mobile #fade {
display: none!important;
}









































.mobile .grand_menu {
display:none;
}



.mobile #header .logo{
text-align: center;
width: 100%;
float:none;
}


.mobile .top_sign {
width:100%;
text-align: center;
}


.mobile .sort_navi {
width:440px!important;
}

.mobile .ui-group{
width:440px!important;
}


.mobile #header .header_inner {
width:440px!important;
}

.mobile #footer .footer_inner {
width:440px!important;
}






.mobile #cboxOverlay {
background: #fff;
}



.mobile #colorbox {
width: 100%!important;
height:100%!important;
position: fixed!important;
top:0!important;
left: 0!important;
}

.mobile .cboxIframe {
height: 100%;
}

.mobile #cboxContent {
height: 100%!important;
}



.mobile #cboxWrapper {
max-width: none;
padding: 0px 0;
}

.mobile #cboxClose {
top: 0px;
}



.mobile #cboxNext {
top: 0;
}

.mobile #cboxNext {
top: 0;
left: 80px;
}

.mobile #cboxPrevious{
top: 0;
left: 40px;
}


.mobile #cboxLoadedContent{
width: 100%!important;
}








.mobile #page_content{
width: 100%;
overflow: visible;
margin-left:50px;
}



.mobile #page_content .page_content_inner {
width: 100%;
}


.mobile .bland_index .fourruof{
width: 100%;
}


.mobile .bland_index .left {
float: none;
width: 100%;
}

.mobile .bland_index .left img {
width: 99%;
}


.mobile .bland_index .right {
float: none;
width: 100%;
}












.mobile input, .mobile textarea, .mobile select {
width: 330px;
}


.mobile input[type="submit"] {
width: 332px;
}

.mobile .wholesale #page_content{
min-height:700px;
}


.mobile .contact #page_content{
min-height:700px;
}


.mobile .contact .right {
width: 100%;
}



.mobile .wholesale .right {
width: 100%;
}






.mobile .shoplist_index{
display:none;
}




.mobile  .shoplist_index_mobile{
width:100%;
}


.mobile  .shoplist_index_mobile .area{
font-size:15px;
margin-top:20px;
margin-bottom:20px;
}


.mobile  .shoplist_index_mobile ul{
margin-bottom:20px;
}





.mobile .shoplist_index_mobile{
display:block!important;
}









.mobile .mobile_menu{
position:fixed;
top:8px;
left:8px;
z-index:9999;
display: block!important;
}

.mobile .mobile_menu p{
background: url(images/moblie_nav_menu_off.png);
width:37px;
height:30px;
background-size:37px 30px;
}


.mobile .mobile_menu .active{
background: url(images/moblie_nav_menu_on.png);
width:37px;
height:30px;
background-size:37px 30px;
}


.mobile .mobile_menu_index{
position:fixed;
top:0px;
z-index:999;
background:#fff;
width:100%;
height: 100%;
padding-top: 45px;
}

.mobile .mobile_menu_index ul{
height:90%;
padding:20px 20px;
overflow: auto;
}

.mobile .mobile_menu_index li{
padding-bottom:8px;
margin-bottom:8px;
}







.bland_index_section{
overflow:hidden;
margin-bottom:40px;
}






.submenu{
position:absolute;
padding-top: 45px;
margin-left:-30px;

}

.submenu ul{
}

.submenu li{
margin-left:0!important;
margin-right:10px;
}





.submenu{
content: '';
opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transform: translateY(5px);
-moz-transform: translateY(5px);
transform: translateY(5px);
visibility:hidden;
}



.menu_on .submenu{
opacity: 1;
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
transform: translateY(-30px);
visibility:visible;
}




.submenu_li_on{
-webkit-animation: submenu_li_on 0.1s ease forwards 2;
}



@-webkit-keyframes submenu_li_on {
from{
-webkit-transform: translateY(-5px);
}
to {
-webkit-transform: translateY(0px);
}
}






.smartphone_sub_menu{
display:none;
}


.smartphone_sub_menu ul {
padding: 0px!important;
}


.smartphone_sub_menu li{
padding: 0px!important;
}


.mobile_menu_index a {
height: 61px;
display:block;
}



.mobile_menu_index li p{
width:100%;
height:61px;
}


.mobile_menu_index li p{
background-size:400px 61px!important;
}

.mobile_menu_index .mobile_menu_top p{
background:url(images/moblie_menu_top.png) no-repeat top center;
}


.mobile_menu_index .mobile_menu_about p{
background:url(images/moblie_menu_about.png) no-repeat top center;

}

.mobile_menu_index .mobile_menu_news p{
background:url(images/moblie_menu_news.png) no-repeat top center;
}

.mobile_menu_index .mobile_menu_product p{
background:url(images/moblie_menu_product.png) no-repeat top center;
}

.mobile_menu_index .mobile_menu_product_active p{
background:url(images/moblie_menu_product_active.png) no-repeat top center;
}

.mobile_menu_index .mobile_menu_shoplist p{
background:url(images/moblie_menu_shoplist.png) no-repeat top center;
}

.mobile_menu_index .mobile_menu_wholesale p{
background:url(images/moblie_menu_wholesale.png) no-repeat top center;
}


.mobile_menu_index .mobile_menu_contact p{
background:url(images/moblie_menu_contact.png) no-repeat top center;
}


.mobile_menu_index .mobile_menu_product_holldall p{
background:url(images/mobile_menu_product_holldall.png) no-repeat top center;
}

.mobile_menu_index .mobile_menu_product_be_active p{
background:url(images/mobile_menu_product_be_active.png) no-repeat top center;
}




.name span{
font-size: 11px;
}