.company #banner .contentimage{
    background-image: url(../images/product_top.jpg);
    background-position: 80% 50%;
}



.products p{
    color:#000;
}

.products h2{
    border-top:2px solid;
    border-bottom:2px solid;
    line-height: 1.2em;
    padding: 0.6em 0;
    text-align: center;
}

.obi{
    background-color: #f7f7f7;
}

.body .message{
    background-color: #f7f7f7;
    padding: 0 1em;
    margin: 2em 0;
}

.body .message p{
    line-height: 1.5;
    margin: 1em 0;
}

/*

.pagenav{
    line-height: 1.2;
    margin: 2em auto;
    max-width: 800px;    
}

.pagenav > ul{
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
.pagenav > ul > li{
    list-style: none;
    display: inline-block;
    padding: 0;
    margin: 0;
    width:30%;
}

.pagenav > ul > li > a {
    list-style: none;
    display: block;
}

.pagenav > ul > li > a .frame{
    list-style: none;
    display: block;
    height: 2em;
    border: 1px solid;
    line-height: 2em;
}

.pagenav > ul > li > a i{
    
    font-size:120%;
    line-height: 1.5em;
}

*/

.pagenav{
    line-height: 1.2;
    margin: 2em auto;
    max-width: 800px;    
}

.pagenav > ul{
    display: flex;
    /* overflow: hidden; */
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
    column-gap: 0.5em;
    flex-wrap: nowrap;
    justify-content: center;
    line-height: 1;
}
.pagenav > ul > li{
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
    flex-basis: 30%;
    line-height: 1;
}

.pagenav > ul > li > a {
    list-style: none;
    display: flex;
    line-height: 1.2;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
	border:1px solid;
    height:2em;
	padding:0.2em 0.5em;
}

.pagenav > ul > li > a i{
    
    font-size:120%;
    line-height: 1.5em;
}





.productsnav{
    position: relative;
    line-height: 1.2;
    margin: 2em auto;
    max-width: 800px;    
}

.productsnav > ul{
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

#menu-products > li,
.productsnav > ul > li{
    list-style: none;
    display: inline;
    float:left;
    padding: 0;
    margin: 0 0.5% 0 0.5%;
    width:24%;
}



.productsnav > ul > li > a{
    display: block;
	border:none;
    height:auto;
	padding:0;
}

#menu-products{
    min-height:8em;
}

#menu-products > li > a,
.productsnav > ul > li a .box {
    display:block;
    margin: 0 0 0 0;
    padding: 0 0.2em;
    height:5em;
}

#menu-products > li > a:before,
.productsnav > ul > li a .box:before{
    content: ' ';
    overflow:hidden;
    display:inline-block;
    margin: 0 -1px 0 0;
    width:1px;
    height:5em;
    vertical-align: middle;
}

#menu-products > li > a span,
.productsnav > ul > li > a span{
    display: inline-block;
    vertical-align: middle;
}

#menu-products > li ul{
    position: absolute;
    margin: 0;
    left:0;
    right:0;
    top:6em;
    padding: 0 5px;
}


#menu-products > li ul li{
    width:auto;
    padding: 0;
    margin: 0;
}
#menu-products > li ul li a{
    display: block;
    margin: 10px 5px;
    width:auto;
    padding: 1em;
}

#menu-products > li:after{
    display: none;
    content:'';
    width:0;
    height:0;
    overflow: hidden;
    border-top:solid 0px transparent;
    border-left:solid 16px transparent;
    border-right:solid 16px transparent;
    border-bottom-style: solid;
    border-bottom-width: 16px;
    margin: auto;
}

#menu-products li ul{
    display: none;
}

#menu-products li:hover ul,
#menu-products li:focus-within ul{
    display: block;
    z-index: 100;
}
#menu-products > li:hover:after,
#menu-products > li:focus-within:after{
    display: block;
}

/*
#menu-products .current-menu-parent ul {
    display: block;
}
#menu-products > li.current-menu-parent:after{
    display: block;
}*/




.productsbox{
    list-style: none;
    margin: 2em -1em 2em 0;
    padding: 0;
    /*padding: 0 0 1em 2em;*/
    /*max-width: 800px;*/
    overflow: hidden;
    box-sizing: border-box;
	display:flex;
	flex-wrap:wrap;
}


.productsbox > li{
    list-style: none;
    display: block;
    margin: 0 0 0 0;
    float:left;
    width:calc(50% - 1em);
}

.productsbox .topcontent{
    width:calc(100% - 1em);
}
.productsbox .frame{
    background-color: #fff;
    position: relative;
    display: block;
    margin: 0 1em 1em 0;
    border-left:20px solid;
    border-right:3px solid;
    border-top:3px solid;
    border-bottom:3px solid;
    padding: 0 0 0 3px;
    overflow:hidden;
	box-sizing: border-box;
}


.productsbox .image{
    float:right;
    width:30%;
    margin: 1em 1em 1em 0;
}



.productsbox .content{
    border-left:3px solid;
    overflow: hidden;
    padding: 1em;
    /*min-height: 18em;*/
    height:100%;
    box-sizing: border-box;
}

.productsbox .topcontent .content{
    width: auto;
    margin-right: 40%;
}
.productsbox .content p{
    line-height: 1.5;
}


.productsbox .contentimage{
    position: absolute;
    left:60%;
    right:1em;
    top:1em;
    bottom:1em;
    max-width: 900px;
    margin: auto;
    
    background-size: cover;
    background-repeat: no-repeat;
    
    
}



.productsbox .productlogo{
    text-align: center;
    font-weight: bold;
    min-height: 5em;
}

.productsbox .productlogo span{ 
    display: inline-block;
    line-height: 1.3;
    padding: 40px 0;
    font-size:140%;
     transform: rotate(0.05deg);
      font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.productsbox .productlogo img{
    width:auto;
    height:auto;
    max-width:90%;
    max-height:120px;
    margin:0 0 1em 0;
}

.productsbox .productname{
    border-bottom:1px solid;
    font-weight: bold;
     transform: rotate(0.05deg);

}
.productsbox .productname span{
    display: inline-block;
}

.productsbox p{
    padding: 0;
    margin: 0.5em 0 0 0;
    font-size: 90%;
     text-justify: distribute;
     text-align: justify;
}
.productsbox p span{
    display: inline-block;
}

.productsbox .catch{
    font-weight: bold;
     transform: rotate(0.05deg);

}

.productsbox .productsmenu{
    display: block;
    list-style: none;
    margin: 0.5em 0 0 0;
    padding: 0;
    text-align: right;
 
    position: absolute;
    bottom: 0;
    right: 0;

}

.productsbox .productsmenu li{
    list-style: none;
    display: inline-block;
    margin: 0 0.5em;
    padding: 0;
}

.productsbox .productsmenu li a{
    margin:0;
    padding: 0;
    text-decoration: none;
}
.productsbox .productsmenu li a i{
    margin: 0 0.3em 0 0;
}

.productsbox .productsmenu.hasoption{
    text-align: center;
    border: 1px solid;
    margin: 1em 0 0 0;
    position: static;
}




.productsbox .full{
    width:99.6%;
   
}
.productsbox .productsfull{
    width:99.6%;
}

.home .productsbox .productsfull{
    width:calc(50% - 1em);
   
}

.home .productsbox .onlyproducts{
    display:none;
}

.home .productshead p{
    display:none;
}
.home .productshead h2{
    font-size: 130%;
    border:none;
}
.home .productshead h2 span{
    border-bottom:2px solid;
}


.home .products section{
    padding: 0;
    margin: 0;
}
.home .obi{
    background-color: transparent;
    padding: 0;
    margin: 0;
}



@media screen and (max-width: 640px) {
   
    .productsbox{
        margin: 2em auto;
        padding:0;
    }
    .productsbox > li{
        float:none;
        width:auto !important;
        margin: 0;
    }
    .productsbox .frame{
        margin: 0 0 1em 0;
    }
    .productsbox .content{
        min-height: 0;
    }
  
    
    .productsbox .contentimage{
        background-image: none;
        display: none;
    }
    .productsbox .topcontent .content{
        min-height: 0;
        width:auto;
        margin: 0;
    }
    .productsbox .productlogo span{ 
        padding: 20px 0;
      font-size: 120%;
    }


    .productsbox .productlogo img{
       max-width:80%;
    }
    
}


#japanresult{
   max-width: none;
   margin:-3em 0 -3em 0;
   padding: 0;
   width:auto;
}


#japanresult h3{
   text-align: center;
   margin: 0;
   padding: 0;
}
#japanresult h3:after{
    content:'';
    display: block;
    margin: 0 auto;
    width:0;
    height:0;
    overflow:hidden;
   border-top:8px solid transparent;
   border-left:16px solid transparent;
   border-right:16px solid transparent;
   border-bottom:16px solid;   
}

#japanresult .box{
    background-image: url(../images/wmjapan.png);
    background-repeat: no-repeat;
    background-position: 50% 20%;
    text-align: center;
    padding: 6em 0;
    
}

#japanresult .box dl{
    position: relative;
    display: inline-block;
    width:200px;
    height:200px;
    border-radius: 150px;
    border:3px solid #fff;
    overflow: hidden;
    padding: 0;
    margin: 0 1em;
}
#japanresult .box dt{
    position: absolute;
    left:0;
    right: 0;
    bottom:66%;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.2em;
    display: block;
    line-height: 1.5em;
    padding: 0 0 0 0.2em;
    margin: 0;
    white-space: nowrap;
}

#japanresult .box dd{
    display: block;
    position: absolute;
    left:0;
    right: 0;
    top:33%;
    bottom:20%;
    padding: 0;
    margin: 0;
    letter-spacing: 0;
    
}
#japanresult .box dd .count{
    font-size:100px;
    line-height: 1.1;
    vertical-align: baseline;
}
#japanresult .box dd .caption{
    display: inline-block;
    font-size:33px;
    line-height: 1.2;
    width:33px;
    height:80px;
    vertical-align: baseline;
}



.markssection{
}
.markssection h3{
    border-bottom:1px solid;
    padding: 0;
}

.markssection h3 span{
    position: relative;
    padding: 0 0.5em;
    top:0.8em;
    left:-0.5em;
    line-height: 1.2em;
    display: inline-block;
    background-color: #fff;
    
}