@charset "Shift_JIS";
/****************************************
news page --news.php
/****************************************/

/****************************************/
body {
    background-color: #fff;
    color: #3c3730;
    font-size: 100%;
}

header {
    width: 98%;
    margin: 0 auto;
}
.h_block01 {border: 0px solid red;
    width: 50%;
    display: inline-block;
        vertical-align: top;
}
.h_block02 {
    width: 18%;
    display: inline-block;
    vertical-align: bottom;
}
.h_block02 p{
    font-weight: bold;
}
.h_block03 {
    width: 22%;
    display: inline-block;
    vertical-align: bottom;
    padding: 0 0 0 6px;
    border-left: 1px dotted #555;
}
.kagolookBox {
    width: 6%;
    display: inline-block;
    vertical-align: bottom;
    font-size: 65%;
}
.kagolook img {
    width: 50px;
}
.h_phone {
    font-size: 150%;
    font-family: "Times New Roman", Times, serif;
    color: #1e1e1e;
    margin-top: -10px;
}
.glovalNavArea {border: 0px solid red;
    width:100%;
    background-color: #00246c;
}
.globalNavBox {
    width:90%;
    margin: 0 auto;
}
.globalNavBox li {
    float: left;
    padding: 10px 0;
    font-size: 130%;
    font-weight: normal;
    letter-spacing: 0.1em;
}
.globalNavBox li a{
    padding: 0 10px;

}
.shop_open {
    font-size: 90%;
    font-weight: bold;
    border-top: 1px dotted #00246c;
    margin: 6px auto;
    color: #0028d2;
    width: 97%;
    padding: 0 6px;
}
main {
    width: 100%;
    margin: 0 auto;
}

/**  mainArea  ****************************/

.mainArea {
    float: right;
    width: 76%;
    margin: 20px 10px 0 0;
}
.mainImageArea {
    text-align: center;
    margin-top: 20px;
}

.mainProductCatBox h2 {
    font-size: 100%;
    border-left : 6px solid #00246c;
    padding: 4px 4px;
    line-height: 1em;
}
.category {
    border: 2px solid #0028d2;
    background-color: #0028d2;
    color: #fff;
    line-height: 1.5em;
    width: 172px;
    height: 50px;
    display: table;
    float: left;
    margin: 6px;

}
.category .image {
    display: inline-block;
    display: table-cell;
}
.category .image img{
    width: 50px;
}
.category .text {border:0px solid green;
    display: inline-block;
    text-align: left;
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    padding: 0 0 0 6px;
}

.todaysOndoBox {
    border: 1px solid #979797;
    padding: 10px;
}
.todaysOndoBox h2 {
    font-size: 100%;
    border-bottom : 1px solid #979797;
    padding: 0 4px;
}
.todaysOndoBox p {
     margin-top: 10px;
}
.todaysondo {
    display: table;
}
.todaysondo  span {
     border: 1px solid #979797;
     margin-top: 30px;
     padding: 10px;
     font-size: 130%;
     display: table-cell;
}
.todaysOndoL {
    float:left;
    width:45%;
}
.todaysOndoR {
    float:left;
    width:45%;
}
.usageGuideBox {
    border: 1px solid #979797;
    padding: 0;
    margin-top: 30px;
}
.usageGuideBox h2 {
    background-color:#3d81ff;
    font-size: 100%;
    padding: 8px 10px;
    color: #fff;
}
.usageGuideWrap {
    padding: 10px;
    float: left;
    width: 45%;
}
.usageGuideBox h3 {
    font-size: 90%;
    border-left : 6px solid #3d81ff;
    padding: 4px 4px;
    line-height: 0.8em;
}
.usageGuideBox h4 {
    font-size: 80%;
    border-bottom : 1px solid #ccc;
    padding: 4px 4px;
    line-height: 1em;
}
.usageGuide li {
    list-style-type: disc;
    font-size: 80%;
    margin: 0 0 0 30px;
    line-height: 2em;
}
.souryo,
.toiawase {
    font-size: 80%;
    margin: 0 0 0 10px;
}
.productSubTitle {
     font-size: 110%;
     font-weight: bold;
}
/**  fujimoto  ****************************/
.photo {
     width: 640px;
}
.traceability p {
     width:330px;
     display: inline-block;
     vertical-align: top;
}

/**  sideArea  ****************************/

.sideArea {border: 0px solid red;
    width: 20%;
    float: left;
    margin: 20px 10px 0 10px;
}
.sideArea h2 {
    background-color: #00246c;
    font-size: 100%;
    font-weight: normal;
}
.sideArea h2 a {
    color: #fff;
    padding: 6px;
}
.sideArea h3 {
    background-color: #e3eefb;
    font-size: 100%;
    font-weight: normal;
    margin: 6px;
    padding: 6px;
    line-height: 1em;
}
.sideArea li a {
    font-size: 90%;
}
.sideKg li,
.sideOndo li,
.sidePersent li,
.sidePro li,
.sideML li,
.sideMM li,
.sideSec li,
.sideDo li,
.sideHo li {
    position: relative;
    padding-left: 2.5em;
    counter-increment: li;
    list-style-type: none;
}
.sideKg li ::before {
    content: 'kg';
    display: block;
    position: absolute;
    top: .3em;
    left: 0.5em;
    font-size: 80%;
    line-height: 1;
    color: #fff;
    background-color: #00246c;
    padding: 4px;
}
.sideOndo li ::before {
    content: '℃';
    display: block;
    position: absolute;
    top: .3em;
    left: 0.5em;
    font-size: 80%;
    line-height: 1;
    color: #fff;
    background-color: #00246c;
    padding: 4px;
}
.sidePersent li ::before {
    content: '％';
    display: block;
    position: absolute;
    top: .3em;
    left: 0.5em;
    font-size: 80%;
    line-height: 1;
    color: #fff;
    background-color: #00246c;
    padding: 4px;
}
.sidePro li ::before {
    content: 'pro';
    display: block;
    position: absolute;
    top: .3em;
    left: 0.5em;
    font-size: 80%;
    line-height: 1;
    color: #fff;
    background-color: #00246c;
    padding: 4px;
}
.sideML li ::before {
    content: 'ml';
    display: block;
    position: absolute;
    top: .3em;
    left: 0.5em;
    font-size: 80%;
    line-height: 1;
    color: #fff;
    background-color: #00246c;
    padding: 4px;
}
.sideMM li ::before {
    content: 'mm';
    display: block;
    position: absolute;
    top: .3em;
    left: 0.5em;
    font-size: 80%;
    line-height: 1;
    color: #fff;
    background-color: #00246c;
    padding: 4px;
}
.sideSec li ::before {
    content: '秒';
    display: block;
    position: absolute;
    top: .3em;
    left: 0.5em;
    font-size: 80%;
    line-height: 1;
    color: #fff;
    background-color: #00246c;
    padding: 4px;
}
.sideDo li ::before {
    content: '度';
    display: block;
    position: absolute;
    top: .3em;
    left: 0.5em;
    font-size: 80%;
    line-height: 1;
    color: #fff;
    background-color: #00246c;
    padding: 4px;
}
.sideHo li ::before {
    content: '歩';
    display: block;
    position: absolute;
    top: .3em;
    left: 0.5em;
    font-size: 80%;
    line-height: 1;
    color: #fff;
    background-color: #00246c;
    padding: 4px;
}
.bannerArea p {
    margin: 20px 0 0 0;
}
/**  footerArea  ****************************/
footer {
    background-color: #e3e3e3;
    padding: 30px 0 0 0;
    margin: 20px 0 0 0;
    width: 100%;
}
.footer {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    justify-content: space-around;
    -webkitjustify-content: space-around;
}
.footer div{
    width: 30%;
    margin: 0 8px;
}
.columnBox h2,
.calBox h2,
.blogBox h2 {
    font-size: 100%;
    border-left : 6px solid #00246c;
    padding: 4px 4px;
    line-height: 1em;
}
.blogBox {
    width: 100%;
}
.blogbtn {
    display: block;
}
a.blogbtn:hover {
    text-decoration: none;
}
.blog2 {
    background-color: #0073a1;
    color: #fff;
    padding: 2px 10px;
}
.blog2 span {
    font-size: 80%;
}
.blogFun {
    background-color: #3366cc;
    color: #fff;
    padding: 2px 10px;
}
.websiteHakari {
    background-color: #fff;
    border: 1px solid  #b69860;
    padding: 2px 10px;
}
.websiteHakari span {
    font-size: 80%;
}
.websiteOmosa {
    background-color: #a41d1e;
    color: #fff;
    padding: 2px 10px;
}
.websiteOmosa span {
    font-size: 80%;
}
.footerNavBox {
    margin: 20px 0 0 0;
}
.footerNav01 li {
    display: inline-block;
    padding: 0 20px;
}
.footerNav02 li {
    display: inline-block;
    padding: 0 20px;
}
.btnBefore:before{
	content:"＞";
}
small {
    display: block;
    text-align: center;
}
/****************************************
PRODUCT LIST PAGE
/****************************************/
.pegeTitle {
    background-color: #00246c;
    color: #fff;
    padding: 6px 6px;
    margin-bottom: 10px;
}
.guideLine {
    margin-bottom: 10px;
    border-bottom: 1px dotted #bbb;
}
.subTitle {
    background-color: #e3eefb;
    color: #00246c;
    padding: 6px 6px;
    border-bottom: 3px solid #00246c;
    margin: 20px 0 0 0;
}
.sub2Title {
    color: #6594e0;
    border-bottom: dashed 2px #6594e0;
    margin: 16px 0 0 0;
}
.productLine {
    /*display:table;*/

}
.product {
    vertical-align: top;
    width: 139px;
    /*display: table-cell;*/
    display:inline-block;
    padding: 20px 20px 0 0;
    font-size: 90%;
    line-height: 1.2em;
}

/****************************************
PRODUCT PAGE
/****************************************/
.topicPath {
    display: inline-block;
    list-style-type: none;
}
.topicPath:before{
	content:"＞";
	padding: 0 0 0 10px;
}
.productGrid {
    width:100%;
}
.productTitle {
    background-color: #00246c;
    color: #fff;
    padding: 6px 6px;
    margin-bottom: 10px;
}
.productImgBox {
    float: left;
    width: 66%;
    margin-right: 10px;
}
.productText ul {
    list-style-position: inside;
}
.thumbnail {
    display: inline-block;
}
.thumbnail img {
    width: 50px;
    height: auto;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
.selected {
    border: 1px solid red;
    box-sizing: border-box;
}
.note {
    color: red;
    font-size: 90%;
}
.tableCart {
    border: 1px solid #979797;
    font-size: 90%;
    margin-top: 10px;
    width: 100%;
}
.tableCart th {
    text-align: center;
    border: 1px solid #979797;
    padding: 6px;
    background-color: #e3eefb;
}
.tableCart td {
    text-align: center;
    border: 1px solid #979797;
    padding: 6px;
}
.cartBtn {
    border: 1px solid #ff0000;
    background-color: #ff0000;
    padding: 6px 12px;
    color :#fff;
    border-radius: 100vh;
}
.cartBtn:hover {
    background-color: #e40000;
}
.productSpec h3 {
    border-left : 6px solid #3d81ff;
    padding: 4px 4px;
    line-height: 0.8em;
}
.productSpec  {
    border : 0px solid #3d81ff;
    margin-top: 20px;
}

.table01 {
    border: 1px solid #979797;
    font-size: 90%;
    margin-top: 10px;
}
.table01 th {
    text-align: left;
    border: 1px solid #979797;
    background-color: #eee;
    padding: 6px;
}
.table01 td {
    border: 1px solid #979797;
    padding: 6px;
}
.youtubeBox {
    margin-top: 20px;
}

.youtube {
    width: 560px;
    height: 315px;
}

/****************************************
FUN LIST
/****************************************/
.funGaiyou {
    margin: 0 0 0 40px;
}
.funList {
    margin: 0 0 0 40px;
}
time {
    display: block;
    text-align: right;
    font-size: 110%
}
.fl h1 {
    background-color: #00246c;
    color: #fff;
    padding: 6px 6px;
    margin-bottom: 10px;
}
.fl .mainImg img {
    width: 80%;
}
/****************************************
LINK ETC
/****************************************/

#home .home a{
    color: #fff;
    border-bottom: 1px dotted #fff;
}


a.btn:link {
    color: #fff;
    text-decoration: none;
}
a.btn:visited {
    color: #fff;
    text-decoration: none;
}
a.btn:hover {
    color: #fff;
    border-bottom: 1px dotted #aaa;
}
a.btn:active {
    color: #fff;
    text-decoration: none;
}

a.tel:link {
    color: #000;
    text-decoration: none;
}
a.tel:visited {
    color: #000;
    text-decoration: none;
}
a.tel:hover {
    color: #000;
    text-decoration: underline;
}
a.tel:active {
    color: #000;
    text-decoration: none;
}
a:link {
    color: #0000ee;
    text-decoration: none;
}
a:visited {
    color: #0000ee;
    text-decoration: none;
}
a:hover {
    color: #0000ee;
    text-decoration: underline;
}
a:active {
    color: #0000ee;
    text-decoration: none;
}
.sideArea li a:link,
.sideArea h3 a:link  {
    color: #000;
    text-decoration: none;
}
.sideArea li a:visited,
.sideArea h3 a:visited {
    color: #000;
    text-decoration: none;
}
.sideArea li a:hover,
.sideArea h3 a:hover {
    color: #000;
    text-decoration: underline;
}
.sideArea li a:active,
.sideArea h3 a:active {
    color: #000;
    text-decoration: none;
}





a.underMenu:link {
    color: #888;
    text-decoration: none;
}
 a.underMenu:visited {
    color: #888;
    text-decoration: none;
}
 a.underMenu:hover {
    color: #888;
    text-decoration: underline;
}
 a.underMenu:active {
    color: #888;
    text-decoration: none;
}

/****************************************/
//@media screen
/****************************************/

@media screen and (max-width: 979px) {
    /* 979px以下用（タブレット用）の記述 */


    main {border:3px solid red;

    }

}

@media screen and (max-width: 767px) {
    /* 767px以下用（タブレット／スマートフォン用）の記述 */
    /* body {border: 1px solid red}*/
    header {
        width: 100%;
        margin: 0 auto;
    }
    .h_block01 {
        width: 100%;
        display: block;
        vertical-align: top;
        text-align: center;
    }
    .h_block02 {
        width: 42%;
        display: inline-block;
        text-align: right;
    }
    .kagolookBox {
        width: 10%;
        display: inline-block;
        vertical-align: bottom;
        font-size: 50%;
    }
    .h_block03 {
        width: 42%;
        display: inline-block;
    }
    main {
        width: 96%;
        margin: 0 auto;
    }
    .mainArea {
        float: none;
        width: 100%;
        margin: 20px 0 0 0;
    }
    .mainImageArea {
        margin-top: 0;
    }
    .sideArea {
        float: none;
        width: 100%;
        margin: 0 10px 0 0;
    }
    .category {
        width: 45%;
    }
    .footer {
        display: block;
    }
    .footer div {
        width: 96%;
    }
    .calBox p {
        text-align: center;
    }
    .addrBox p,
    .addrBox address {
        text-align: center;
    }
    
    .footerNav01 li {
        display: block;
    }
    .footerNav02 li {
        display: block;
    }
    .topicPathBox {
        border-top: 1px solid #ccc;
    }
    .fl .mainImg img {
        width: 100%;
    }

}


@media screen and (max-width: 479px) {
    /* 479px以下用（スマートフォン用）の記述 */


    .category {
        width: 100%;
    }
    
    .todaysOndoL {
        float:none;
        width:100%;
    }
    .todaysOndoR {
        float:none;
        width:100%;
    }
    .usageGuideWrap {
        float: none;
        width: 96%;
    }
    .footer {
        display: block;
    }
    .footer div {
        width: 96%;
    }
    .footerNav01 li {
        display: block;
    }
    .footerNav02 li {
        display: block;
    }
    .calBox p {
        text-align: center;
    }
    .addrBox p,
    .addrBox address {
        text-align: center;
    }
    small {
        display: block;
        text-align: center;
    }
    .productImgBox {
        float: none;
        width: 100%;
    }
    .youtube {
        width: 100%;
        height: auto;
    }
    .funGaiyou {
    margin: 0 0 0 0;
    }
    .funList {
        margin: 0 0 0 0px;
    }
/****************************************
/*fujimoto*/
/****************************************/   
.photo {
     max-width: 100%;
     height: auto;
} 
.traceability p {
     max-width: 100%;
     height: auto;
}

}

/****************************************
/*メディアサイズ共通*/
/****************************************/
/****************************************
ARROW
/****************************************/
.arrow{
    position: relative;
    display: inline-block;
    padding: 0 0 0 20px;
    color: #000;
    vertical-align: middle;
    /*text-decoration: none;*/
    font-size: 15px;
}
.arrow::before,
.arrow::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}

.sample2-2::before{
    width: 12px;
    height: 2px;
    background: #9c000e;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
.sample2-2::after{
    left: 1px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #9c000e;
    border-right: 2px solid #9c000e;
}
/****************************************
PAGE_TOP
/****************************************/

#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 30px;
  background: #888;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: '';
  font-weight: 900;
  content: '▲';
  font-size: 16px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/**commonParts**************************************************/
.w2 {border: 0px solid red;
      width: 46%;
}
.w3 {border: 0px solid red;
      width: 33%;
}
.fsize80 {
    font-size: 80%;
}
.opacity a img:hover {
    opacity: 0.6;
    filter: alpha(opacity=60); /* IE lt 8 */
    -ms-filter: "alpha(opacity=60)"; /* IE 8 */
}

.opacity:hover {
    opacity: 0.6;
    filter: alpha(opacity=60); /* IE lt 8 */
    -ms-filter: "alpha(opacity=60)"; /* IE 8 */
} 


.clearfix {
    overflow: hidden;
}
.clearfix:after {
    display: block;
    clear: both;
    height: 1px;
    content: " ";
}
.clear {
    clear: both;
}
.textRight {
    display: block;
    text-align: right;
}
.textCenter {
    display: block;
    text-align: center;
}
.floatLeft {
    float: left;
}
.floatRight {
    float: right;
}
.borderImg {
    border: 1px solid #979797;
    box-sizing: border-box;
}
address {
    font-style: normal;
}
.fcolorRED {
    color:red;
}
.mt20 {
    margin-top: 20px;
}
.mt30 {
    margin-top: 30px;
}
.mt40 {
    margin-top: 40px;
}
.ml30 {
    margin-left: 30px;
}
.fs90 {
    font-size: 90%;
}
.fs80 {
    font-size: 80%;
}