﻿@media screen and (max-width:600px) {
    .w3-container{padding:0.01em 4px}
    
    #top-panel {
        height: 90px;
    }

    .sitetitle-box{
        margin: -5px 0 10px 0
    }

    #sitetitle{
        font-size: 1.7em;
        font-weight: bold;
        margin: -12px 0 10px 10px;
    }
    
    #sitetitle-sub{
        font-size:smaller;
        margin: -15px 0 0 10px;
    }

    #floatbox {
        display: none;
    }
    #sidemenu {
        display: none;
    }
    #openbutton {
        display: block;
    }
    #closebutton {
        display: block;
    }
    #prev-article, #next-article {
        font-size: smaller;
    }
    .postheader {
        font-size: 1.4rem;
    }
    .postheader-sub {
        font-size: 1.1rem;
    }
    .postheader-sub-2 {
        font-size: 1.05rem;
    }

    #pic-and-info img {
        max-width: 90%;    
        min-width: 70%;
    }

    #pic-and-info img.half {
        max-width: 40%;
        min-width: 30%;
    }
    .pic-row {
        width: 90%;
    }

    #company {
        font-size:0.9em;
        line-height: 1.5em;
    }

    #comname, .comname{
        font-size:1.37em;
        font-weight:bold;
        margin: 12px 0px 8px 0px;
    }

    #___gcse_0 {
        visibility: collapse
    }

}


@media screen and (min-width:601px) {
    #top-panel {
        height: 120px;
    }
    .sitetitle-box{
        margin: -15x 0 10px 0
    }

    #sitetitle{
        color: #206 !important;
        font-size: 2.2em;
        font-weight: bold;
        margin: 20px 0 0 10px;
    }
    
    #sitetitle-sub{
        font-size: 1.1em;
        margin: -5px 0 0 10px;
    }
        
    #floatbox {
        display: block;
    }
    #sidemenu {
        display: block;
    }
    #openbutton {
        display: none;
    }
    #closebutton {
        display: none;
    }
    .postheader {
        font-size: 1.5rem;
    }
    .postheader-sub {
        font-size: 1.1rem;
    }
    .postheader-sub-2 {
        font-size: 1.05rem;
    }
  
    #pic-and-info img {
        max-width: 90%;
        min-width: 30%;
    }
    #pic-and-info img.half {
        max-width: 40%;
        min-width: 30%;
    }

    #company {
        font-size:1.05em;
        line-height: 1.4em;
    }

    #comname, .comname{
        font-size:1.4em;
        font-weight:bold;
        line-height: 1.3;
        margin: 6px 0px 6px 0px;
    }
    .pic-row {
        display: flex;
        justify-content: space-around;
        width: 90%;
        margin: auto;
    }

    #___gcse_0 {
        visibility: collapse
    }
}

@media screen and (min-width:1280px) {
    #pic-and-info img {
        max-width: 85%;
    }
    #pic-and-info img.half {
        max-width: 45%;
    }
    #___gcse_0 {
        visibility: visible
    }

}    
@media screen and (min-width:1600px) {
    #pic-and-info img {
        max-width: 85%;
    }
    #pic-and-info img.half {
        max-width: 40%;
    }



}    


#___gcse_0 {width: 50%; float: right; margin-top: 1em; max-width: 25em;}
.gsib_a {height: 2em;}
.gsc-search-button-v2 {padding: 12px 27px !important;}
.cse .gsc-control-cse, .gsc-control-cse {
    border: 0px none !important;
    background-color: lightskyblue !important;
}


body {
    font-size: 0.98em;
    line-height: 1.8;
}

#top-panel {
    background-color: lightskyblue
}

.sitetitle-box{
    color: #206 !important;
}
#sitetitle-sub{
    color: #fff !important;
}

#openbutton {
    background-color: lightskyblue;
    margin: 15px;
    color: #206 !important;
}

#floatbox  a {
    text-decoration: none;
    line-height: 0.92;
}

#right-box a {
    text-decoration: none;
    color: blue;
}

#floatbox {
    z-index: 100;
}

#right-box {
    z-index: 0;
    min-height: 50em;
}

/*
#page-navi {
    display: flex; justify-content: space-between;  top:400px; position: fixed; width: 100%; height: 80px; z-index: 20;
}

#prev-page {
    font-weight: bold;
    cursor:pointer;
    color:#aaa;
    opacity:0.2;
}

#next-page {
    font-weight: bold;
    cursor:pointer;
    color:#eee;
    opacity:0.2;
}
*/

.indicator {
    font-weight: bold;
    font-size: larger;
}

.accblock {
    margin-left: 0px;
    margin-right: 0px;
    display: none;
}

#pagenation{
    font-size: smaller;
    color:gray;
}

#go-prev, #go-next {
    cursor: pointer; 
    color:#777777;
    opacity:0.6;
    
}

#pagenation a:hover {
    background-color: lightgray;
}

#device-list-list li a {
    text-decoration: none;
}

ul.list-mark-sq{
    list-style-image:url("../img/list-mark-sq.png");
}

ul.list-mark-sq ul{
    list-style-image:none;
    list-style-type: disc;
}

ul {
    margin-left: -15px;
}

ul ul {
    margin-left: -25px;
}

#company li {
    height:2em
}

.postheader {
    color: #214559;
    font-weight: bold;
}

.postheader-sub {
    color: #214559;
    font-weight: bold;
}

.postheader-sub-2 {
    color: #008ccf;
    font-weight: bold;
}

#product-name {
    font-size: 1.1em; 
    font-weight: bold;
}

#pic-and-info  {
    text-align: center;
}

#pic-and-info img {
    width: 90%;
}

#pic-and-info .info {
    text-align: left;
}

ul.contents-list {
    list-style-type: none;
}
ul.contents-list li {
    margin-bottom: 20px
}

ul.contents-list-sub {
    list-style-type: none;
}
ul.contents-list-sub li {
    margin-bottom: 10px;
    font-size: 1.0rem;
}

li:before { 
    content: "";
}
  
ul.literature{
    padding:0 0 0 2em;
    margin-left: -2em;
}

 ul.literature#from-1{
    counter-reset: cnt 0;
 }

 ul.literature#from-13{
    counter-reset: cnt 12;
 }
 
ul.literature li{
    list-style-type: none;
    counter-increment: cnt;
}

ul.literature li:before{
    display: marker;
    content: "[" counter(cnt) "]";
}

ul.literature li div{
    margin: -1.8em 0 0 2.5em
}
  

.sitetitle-box, #maker a  {
    text-decoration: none;
}

#breadcrumb {
    font-size: smaller;
}
#breadcrumb a {
    text-decoration: none;
    color: blue;
    cursor: pointer;
}

#breadcrumb a:hover {
    background-color: lightgray;
}

.table-border-1 th, .table-border-1 td {border: 1px solid gray;}

table#no-1 td:nth-child(1) {width: 1em;}
table#no-1 td:nth-child(2) {width: 4em;}

table#no-2 td:nth-child(1) {width: 4em;}

table#table-1 td:nth-child(1) {text-align: center}
table#table-2 td:nth-child(1) {text-align: center}

table#no-3 td {text-align: left}
table#no-4 td:nth-child(1) {text-align: left;}
table#no-4 td:nth-child(2) {text-align: center;}
table#no-4 td:nth-child(3) {text-align: center;}

table#no-5 td {text-align: left} 

table#no-6 td {text-align: left}
table#no-6 td:nth-child(1){text-align: center}

.fa-caret-right {
    color: red;
}

.video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin-bottom: 10px;
}
 
.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fa-registered, .fa-trademark{
    font-size:0.5em;
    vertical-align: top;
}

#device-list {
    cursor: pointer; 
}

#device-name {
    font-size: larger;
    font-weight: bold;
}

.info {
    font-size: small;
    margin-left: 20px;
}

.pic-row img {
    max-width: 100% !important; 
    padding:3px;
    width: 100% !important;
}

/*** 会社情報 ***/
#contact {
	background-color:#b5b5b5;
	height:30px;
	color:#FFFFFF;
	font-weight:bold;
    padding:4px 0px 4px 5px;
    margin-bottom: 4px;
}

#dealer {
    font-size: 0.9em;
    font-weight: bold;
}

#addr-phone-url {
    font-size: 0.98em;
}
/*** 会社情報 ***/

#pagetop{
    position:fixed;
    right: 20px;
    bottom:20px;
    cursor:pointer;
    color:#666;
    opacity:0.8;
    display:none;
}

.hr-visible {
    border-width:2px;
    border-color: gray;
    margin-top:0px
}

#logo-jms  {
    width: 100px;
    margin-bottom: 5px;
}

#logo-medikit  {
    width: 100px;
    margin: 10px 0 10px 0;
}

#logo_medline{
    
    width: 100px;
    margin: 10px 0 10px 0;
}

#logo_saraya{
    width: 170px;
    margin: 10px 0 10px 0;
}

#logo_kawasumi{
    margin: 10px 0 10px 0;
    width: 300px;
}

#logo-ethicon {
    margin: 10px 0 10px 0;
}

/* w3.css modify */
#go-prev,.w3-btn:hover{box-shadow:0 0 0 0 rgba(0,0,0,0.2),0 0 0 0 rgba(0,0,0,0.19)}

