@charset "utf-8";
/* ===================================================================
CSS information
 file name  :product.css
 style info :製品案内用
=================================================================== */

@media screen and (max-width: 767px) {
    #headImg h1{
    width: auto;
    }
  }

/*--- タブ設定 ---*/
#commonBody #headImg {
}

h1 {
	width: 990px;
	margin:0px auto;
	padding: 0px;
	text-indent: -9999px;
}

#tabBox {
	width: 990px;
	height: 290px;
	margin: 0 auto;
}

#tabBox div {
	line-height: 1%;
	padding-top: 10px;
	display: none;
}

#tabBox h1 {
	width: 990px;
	margin:0px auto;
	padding: 0px;
	text-indent: 0;
}

ul.tabNav {
	width: 990px;
	margin: 0 auto 18px auto;
}

ul.tabNav li {
	float: left;
	width: 330px;
	line-height: 1%;
}

ul.tabNav li.clear {
	float: none;
	clear: both;
}

ul.tabNav li a {
	display: block;
	width: 330px;
	height: 52px;
	background-repeat: no-repeat;
	background-position: 0 0;
}

ul.tabNav li#tab01 a {
	background-image: url(../BK_img/product/tab/tabNavi01.jpg);
}

ul.tabNav li#tab02 a {
	background-image: url(../BK_img/product/tab/tabNavi02.jpg);
}

ul.tabNav li#tab03 a {
	background-image: url(../BK_img/product/tab/tabNavi03.jpg);
}

ul.tabNav li a:hover,
ul.tabNav li a:active,
ul.tabNav li a.active {
	background-position: 0 -52px;
}


/*--- ヘッダイメージ設定 ---*/
#headImg .product_ivr {
	background-image: url(../BK_img/headImg/product_ivr.jpg);
}

#headImg .product_skin {
	background-image: url(../BK_img/headImg/product_skin.jpg);
}

#headImg .product_other {
	background-image: url(../BK_img/headImg/product_other.jpg);
}

h2 {
	margin: 0 0 15px 0;
	padding: 20px 0 2px 0;
	color: #009949;
	font-size: 1.5em;
	border-bottom: 1px solid #009949;
	font-weight: bold;
}

h2 span {
	margin: 0 1em 0 0;
	color: #333333;
	font-size: 0.875em;
}

h3 {
	font-size: 1.125em;
	font-weight: bold;
	background-image: url(../BK_img/item/arrowMaru.gif);
	background-repeat: no-repeat;
	background-position: left 0.45em;
	padding-left: 15px;
	margin-top: 20px;
}

h4 {
	font-size: 1.05em;
	font-weight: bold;
	margin-top: 20px;
}
div#product.wide table {
	clear: both;
	width: 848px;
	margin: 0;
	padding: 0;
}
div#product.wide table th,
div#product.wide table td {
	padding: 10px 20px 10px 20px;
	border: 1px solid #CCCCCC;
}
div#product.wide table td.midashi {
	font-weight: bold;
	width: 424px;
	background-color: #F1EEE9;
}
div#product.wide table td ul li {
	margin-left: 0;
	padding: 3px 0 3px 15px;
	background-image: url(../BK_img/item/arrow.gif);
	background-repeat: no-repeat;
	background-position: left 0.5em;
	list-style-type: none;
}
/* サブカラム無しレイアウト用 */
#main .wide {
	width: 880px;	
	padding: 0 50px 0 50px;
}

#main .wide p.txt {
	margin: 0 15px 1em 15px;
}

#main .wide div.box {
	width: 848px;
	margin: 30px 0 0;
	padding: 15px;
	border: 1px solid #CCCCCC;
}

#main .wide div.box table {
	clear: both;
	width: 848px;
	margin: 0;
	padding: 0;
	font-size: 0.85em;
}

#main .wide h3.midashi {
	margin: 10px 0 0 0;
	padding: 0 0 0 10px;
	color: #025D17;
	font-size: 1.125em;
	background-image: none;
	font-weight: bold;
	border-left: 5px solid #025D17;
	border-bottom: 1px solid #CCCCCC;
}

#main .wide img.dermaray {
	margin-top: 15px;
}

/* 製品トップテキストナビ用 */
#main h3.menu {
	height: 40px;
	margin-top: 10px;
	background-image: url(../BK_img/product/menuBg.gif);
	background-repeat: no-repeat;
	background-position: center center;
	color: #FFFFFF;
	font-size: 1.35em;
	line-height: 45px;
}

* html #main h3.menu {
	padding-top: 3px;
}

#main .wide ul.menu {
	float: left;
	width: 270px;
	margin: 0 11px 5px 11px;
}

* html #main .wide ul.menu {
	margin: 0 11px 5px 8px;
}

#main .wide ul.menu_wide {
	float: left;
	width: 562px;
	margin: 0 11px 5px 11px;
}

#main .wide ul.menu_wide li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#main .wide ul.menu_wide li ul {
	float: left;
	width: 270px;
	margin: 0 11px 0 0;
}

#main .wide ul.menu li,
#main .wide ul.menu_wide li ul li {
	margin-left: 30px;
	padding: 3px 0px;
	list-style-position: outside;
	list-style-type: disc;
}

#main .wide ul.menu li.category,
#main .wide ul.menu_wide li.category {
	list-style-type: none;
	margin: 0 0 5px 0;
	border-bottom: 1px solid #CCCCCC;
}

#main .wide ul.menu li.none,
#main .wide ul.menu_wide li.none {
	display: none;
}

#main .wide ul.menu ul li.series,
#main .wide ul.menu_wide li ul li.series {
	margin-left: 0;
	padding: 3px 0 3px 15px;
	background-image: url(../BK_img/item/arrow.gif);
	background-repeat: no-repeat;
	background-position: left 0.5em;
	list-style-type: none;
	color: #009949;
}

#main .wide ul.menu li h4 {
	font-size: 1.125em;
	font-weight: bold;
	background-image: url(../BK_img/item/arrowMaru.gif);
	background-repeat: no-repeat;
	background-position: left 0.45em;
	padding-left: 15px;
	margin-top: 20px;
}

#main .wide ul.menu_wide li h4 {
	font-size: 1.125em;
	font-weight: bold;
	background-image: url(../BK_img/item/arrowMaru.gif);
	background-repeat: no-repeat;
	background-position: left 0.45em;
	padding-left: 15px;
	padding-bottom: 3px;
	margin-top: 23px;
}

/* 皮膚科関連製品トップダーモスコピー用 */
.dermoscopyBox {
	float: right;
	width: 588px;
	padding: 15px 0 15px 15px;
	text-align: center;
}

#main .wide ul.dermoscopy {
	width: 255px;
	padding-top: 25px;
}

#dermoscopy_related {
	background:url(../BK_img/product/skin/dermoscopy_related/dermoscopy_bg.jpg) no-repeat left top;
	width:588px;
	height:529px;
	position:relative;
	text-align: left;
}

#dermoscopy_related h3 {
	margin: 0 0 15px;
	font-size: 1.75em;
	background-image: none;
	padding: 0px;
}

#dermoscopy_related ul#dermoscopy_link {
	position:absolute;
	left:328px;
	top:83px;
	list-style:none !important;
}

#dermoscopy_related ul#dermoscopy_link li {
	background:url(../BK_img/product/skin/dermoscopy_related/ico01.gif) no-repeat left 7px;
	line-height:160% !important;
	padding:0px 0px 10px 12px !important;
	list-style:none !important;
}

#dermoscopy_related #dermoscopy_bt01 {
	position:absolute;
	left:10px;
	top:81px;
}

#dermoscopy_related #dermoscopy_bt02 {
	position:absolute;
	left:0px;
	top:232px;
}

#dermoscopy_related #dermoscopy_bt03 {
	position:absolute;
	left:329px;
	top:213px;
}

#dermoscopy_related #dermoscopy_bt04 {
	position:absolute;
	left:266px;
	top:350px;
}

/*新製品情報*/
#product {
	width: 620px;	
	padding: 0 50px 0 50px;
}

#product div.box {
	width: 588px;
	margin: 30px 0 0;
	padding: 15px;
	border: 1px solid #CCCCCC;
}

#product div.box h3 {
	margin: 0 0 15px;
	font-size: 1.75em;
	background-image: none;
	padding: 0px;
}

#product div.box h3.option {
	margin: 0 0 10px 0;
	font-size: 1.3em;
	background-image: none;
	padding: 0;
	color: #009949;
	border-bottom: 1px dashed #CCCCCC;
}

#product div.box p {
	margin: 0;
	padding: 0;
	text-indent: 0px;
}

#product div.box p.subTitle {
	font-size: 0.875em;
	margin-bottom: 3px;
}

#product div.box .kome {
	margin-left: 1em;
	text-indent: -1em;
}

#product div.box .bold {
	font-weight: bold;
}

#product div.box h4 {
	font-size: 1.2em;
	font-weight: bold;
	margin: 0 0 15px 0;
	color: #009949;
}

#product div.box h4.sub {
	margin: 15px 0 0 0;
}
#product div.box h4.black {
	color: #333333;
}

#product div.box h5 {
	font-size: 1.125em;
	font-weight: bold;
	border-left: 5px solid #009A49;
	margin: 10px 0;
	padding-left: 10px;
}

#product div.box h6 {
	font-size: 1.2em;
	font-weight: bold;
	margin: 15px 0 0 0;
	color: #009949;
}

#product div.box h5.top_none {
	margin: 0 0 10px 0;
}

#product div.box .top {
	margin-top: 10px;
}

#product div.box .bottom {
	margin-bottom: 10px;
}

#product div.box p.point {
	font-size: 1.025em;
	font-weight: bold;
	border-left: 5px solid #CCCCCC;
	margin: 10px 0;
	padding-left: 10px;
}

#product div.box p.sizeS {
	font-size: 0.75em;
}

#product p.contact span.sizeL {
	font-size: 2em;
	font-weight: bold;
}

#product div.box p.right {
	clear: both;
	margin-top: 1em;
	font-size: 0.75em;
	text-align: right;
	color: #666666;
}
#product div.box table.hanbainame {
	font-size: 1em;
	margin-top: 1em;
	width: auto;
	float: right;
	border: none;

}
#product div.box table.hanbainame th,
#product div.box table.hanbainame td {
	margin: 0;
	padding: 0;
	border: none;
	text-align: left;
}
#product div.box table.hanbainame td p.left {
	clear: both;
	margin: 0;
	padding: 0;
	font-size: 0.75em;
	text-align: left;
	color: #666666;
}
#product div.box img.sadaoka {
	margin: 10px 0 0 0;
}

/* 画像用 */
#product div.box div.photo {
	padding: 5px;
	float: right;
	width: 250px;
	border: 1px solid #CCCCCC;
	background-color: #FFFFFF;
	margin: 0px 0px 10px 10px;
	text-align: center;
	font-size: 0.785em;
	line-height: 1%;
}

#product div.box div.none {
	border: none;
}


#product div.box div.photo p {
	padding: 10px 0 5px;
	line-height: 120%;
	text-align: left;
}

#product div.box div.photo p.center {
	text-align: center;
}

* html #product div.box div.photo p {
	padding: 13px 0 5px;
}

#product div.box div.wide {
	float: none;
	clear: both;
	width: 576px;
	margin: 0;
}

#product div.box div.top {
	margin: 10px 0 0 0;
}

#product div.box ul {
	margin: 0 0 10px 25px;
}

#product div.box ul.none {
	margin: 0 0 0 25px;
}

#product div.box ul li {
	padding: 0 0 8px 0;
	list-style-position: outside;
	list-style-type: disc;
}

#product div.box ul li em {
	display: block;
	font-weight: bold;
}

#product div.box p.chuu {
	font-size: 0.875em;
	margin: 0 0 0 2em;
	padding: 10px 0;
	text-indent: -2em;
}

/*tableデザイン用*/
#product div.box table {
	clear: both;
	width: 588px;
	margin: 0;
	padding: 0;
	font-size: 0.85em;
}

#product div.box table th,
#product div.box table td {
	padding: 5px;
	border: 1px solid #CCCCCC;
	text-align: center;
}

#product div.box table.sizeS {
	font-size: 0.775em;
}

#product div.box table.sizeSS {
	font-size: 0.75em;
}

#product div.box table.sizeSS th,
#product div.box table.sizeSS td {
	padding: 5px 2px;
}

#product div.box table th {
	background-color: #F1EEE9;
}

#product div.box table .left {
	text-align: left;
	padding-left: 10px;
}

#product div.box table td.photo {
	line-height: 1%;
}

/*
#product div.box table table {
	clear: both;
	width: auto;
	margin: 0;
	padding: 0;
}

#product div.box table table th,
#product div.box table table td {
	background-color: none;
	border: none;
	text-align: left;
	margin: 0;
	padding: 0 10px 0 0;
	font-size: 1.175em;
}
*/

/* お問い合わせへのリンクボタン */
#product p.contact {
	text-align: center;
	padding: 30px 0 15px 0;
}

#product div.contactbtn {
	clear: both;
	text-align: center;
}

/* 免責事項用 */
#product div#menseki {
	border: 1px solid #CCCCCC;
	background-color: #F4F4F4;
	margin-top: 25px;
	padding: 15px;
	font-size: 0.875em;
}

#product div#menseki em {
	display: block;
	margin: 0 0 10px 0;
	padding: 0 0 5px 0;
	font-weight: bold;
	border-bottom: 1px dashed #CCCCCC;
}

#product div#menseki p {
	margin: 0;
	padding: 0;
	text-indent: 0;
}

/* ジャンプナビ（アンカーリンク）用 */
#product ul#jumpNavi {
	float: left;
	clear: both;
	width: 620px;
	margin: 10px 0 0 0;
	padding: 0;
}

#product ul#jumpNavi li {
	float: left;
	width: 16em;
	margin: 0px;
	padding: 3px 0px 3px 15px;
	background-image: url(../BK_img/item/arrow.gif);
	background-repeat: no-repeat;
	background-position: left 0.5em;
}

/* 類似製品へのリンクボタン */
#product div.button {
	clear: both;
	text-align: center;
}

#product div.button a {
	display: block;
	width: 300px;
	height: 35px;
	line-height: 35px;
	margin: 5px auto;
	padding: 0;
	text-decoration: none;
	text-align: center;
	font-size: 1.025em;
	font-weight: bold;
	color:#FFFFFF;
	background-image: url(../BK_img/product/btnBg.gif);
	background-repeat: no-repeat;
	background-position: center top;
}

#product div.button a:hover {
	background-image: url(../BK_img/product/btnBg.gif);
	background-repeat: no-repeat;
	background-position: center -35px;
}

/* 「このページの先頭へ」テキストリンク用 */
#product p.txtPageTop {
	text-align: right;
	text-decoration: none;
	line-height: normal;
	font-size: 0.785em;
	margin-top: 5px;
}

#product p.txtPageTop img {
	margin-bottom: -5px;
}







.smalltext {
    font-size: 0.8125rem;
  }
  .smalltext-imp {
    font-size: 0.8125rem !important;
  }
  body#commonBody {
    font-family: "Noto Sans JP", sans-serif;
    height: auto !important;
  }
  #header_container h1 {
    width: auto;
    text-indent: unset;
  }
  #footer_container h1 {
    width: auto;
    text-indent: unset;
  }
  #commonBody #contents {
    width: auto !important;
    /*margin-bottom: 4rem !important;*/
  }
  #commonBody #main {
    margin-bottom: 50px !important;
  }
  #contents a,
  #contents p,
  #contents li {
    line-height: 1.5;
  }
  #contents p {
      margin-top: 1.75em;
    }
  #main {
    width: calc(100% - (230px + 50px)) !important;
  }
  div#main h2 {
    margin-bottom: 3rem !important;
    padding-bottom: 5px !important;
    line-height: 1.5;
  }
  #sub {
      margin-top: 1rem;
    }
  #commonBody #sub ul#menuLeft li p.focus {
    width: auto !important;
  }
  #commonBody #sub ul#menuLeft li span, #commonBody #sub ul#menuLeft li a {
  width: auto !important;
  }
  
  #commonBody #sub ul#menuLeft li span:hover, #commonBody #sub ul#menuLeft li a:hover {
  width: auto !important;
  }
  @media screen and (max-width: 767px) {
    ul#pankuzu {
      margin-left: 0 !important;
    }
  
    #main {
      width: 100% !important;
    }
    #commonBody .sitemap {
      background-position: left !important;
    }
    #commonBody #contents {
      /*margin-bottom: 60px !important;*/
  padding-right: 0;
  padding-left: 0;
    }

  }

  div#main h2 {
	clear: both;
	margin: 0 0 15px 0;
	padding: 20px 0 2px 0;
	color: #009949;
	font-size: 1.5em;
	border-bottom: 1px solid #009949;
	font-weight: bold;
}




#main .wide{
	width: auto;
}

div#product.wide table{
    width: auto;
}

@media screen and (max-width: 767px) {
    #main .wide{
       padding: 0;
    }
    div#product.wide table td.midashi{
        width: 50%;
        padding-right: 10px;
        padding-left: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    div#product.wide table td {
        padding: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        /* padding-right: 10px;
        padding-left: 10px;
        padding-top: 10px;
        padding-bottom: 10px; */
    }
    div#product.wide table td ul{
        width: 156px;
        padding-right: 10px;
        padding-left: 10px;
    }
}