@charset "UTF-8";

/* デスクトップ	*/

@media screen and (min-width: 950px)
{
/* CSSリセット */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}



/*html
-----------------------------------------------------*/

html{
	height: 100%;
	padding: 0;
	margin: 0;
}


/*body
-----------------------------------------------------*/

body{
	height: 100%;
	background-color: #F1EDCB;
	font-size: 1em;
	font-family:"メイリオ",sans-serif;
	line-height: 1.7em;
	margin: 0;
	padding: 0;
	word-wrap : break-word;
	overflow-wrap : break-word;
}

a:link {
	text-decoration: none;
	color: #6A5ACD;
}

a:visited {
	text-decoration: none;
	color: #7A67EE;
}

a:hover {
	color: #6A5ACD;
	font-weight: bold;
}

a:active {
	color: #6A5ACD;
}

a:focus {
	color: #6A5ACD;
	font-weight: bold;
}

/*ページトップへ戻る
-----------------------------------------------------*/

#page_top{
  width: 60px;
  height: 60px;
  position: fixed;
  right: 0;
  bottom: 30px;
  z-index: 9999;
  background: #A5A28F;
  opacity: 0.6;
  border-radius: 28px;
}
#page_top a{
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -25px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 30px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/*wrap
-----------------------------------------------------*/

div.wrap{
	width: 100%;
	height: auto !important;
	height: 100%;
	position: relative;
}

/*container
-----------------------------------------------------*/

div#container{
	width: 900px;
	background-color: #FFF;
	margin: 0 auto;
	border-left: 1px solid #CDCDC1;
	border-right: 1px solid #CDCDC1;
	position: relative;
	padding-bottom: 50px;/*←footerの高さ*/
	box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	height: 100%;
}

/*ヘッダー
-----------------------------------------------------*/

h1{
	font-size: 2em;
	color: #615441;
	font-weight: bold;
	padding: 30px 20px;
	text-shadow: #FFF 2px 0px,  #FFF -2px 0px,
				#FFF 0px -2px, #FFF 0px 2px,
				#FFF 2px 2px , #FFF -2px 2px,
				#FFF 2px -2px, #FFF -2px -2px,
				#FFF 1px 2px,  #FFF -1px 2px,
				#FFF 1px -2px, #FFF -1px -2px,
				#FFF 2px 1px,  #FFF -2px 1px,
				#FFF 2px -1px, #FFF -2px -1px;
}

/* ヘッダー改行スマホ用 修正 */
span.head_br{
	font-weight: bold;
}

header {
	background-image: url(img/header_bg.jpg);
	background-repeat: no-repeat;
	padding: 0;
}
header .headerTop{
    padding: 0;
}

.navDrawr>ul:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

.navDrawr>ul>li {
    float: left;
    width: 25%;
    position: relative;
    background: rgba(250,235,215,0.5);
    margin: 0;
}
.navDrawr a {
	display: block;
	color: #6A5ACD;
	font-weight: bold;
	text-decoration: none;
	padding: 7px;
}
.navDrawr .sub li:last-child {
    border: none;
}

.navDrawr>ul>li>a {
    border-top: 1px solid #FAEBD7;
    border-bottom: 1px solid #FAEBD7;
    text-align: center;
}
.navDrawr>ul>li>a:hover {
    background: rgba(250,235,215,0.8);
}
.navDrawr .sub {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 9999;
}
.navDrawr .sub a {
    background: rgba(250,235,215,0.8);
    border-bottom: 1px solid #FAEBD7;
    padding: 10px 10px 10px 20px;
}
.navDrawr .sub a:hover {
    background: #FFB90F;
}
 /* tab用
-----------------------------------------------------*/

@media only screen and (min-width: 751px) and (max-width: 949px) {
#wrapper{
        overflow:hidden;
    }
.navDrawr {
        background-color: #FFFFFF;
        position: fixed;
        width: 270px;
        top: 87px;
        bottom: 0;
        right: -270px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
}
body.menuOpen #wrapper{
        padding-top: 87px;
}
.overlay {
        display: none;
        background-color: rgba(0,0,0,0.3);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
}
header {
        position:relative;
        height: 87px;
        padding:0;
}
body.menuOpen header{
        position: fixed;
        top: 0;
        width: 100%;
}
header .headerTop{
        padding: inherit;
        height: 87px;
}
.navDrawrBtn {
        text-align: right;
}
.navDrawrBtn span {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        display: block;
        width: 60px;
        height: 87px;
        cursor: pointer;
    }
.navDrawrBtn span::before {
        font-family: 'Font Awesome 5 Free';
        content: "\f0c9";
        font-weight: 900;
        font-size: 24px;
        color: #534B40;
        position: absolute;
        left: 0;
        width: 100%;
        text-align: center;
        line-height: 87px;
}
body.menuOpen .navDrawrBtn span::before {
        font-family: 'Font Awesome 5 Free';
        content: "\f00d";
        font-weight: 900;
        color: #534B40;
}
.navDrawr a {
        position: relative;
}
.navDrawr a::after {
        position: absolute;
        top: 50%;
        margin-top: -15px;
        right: 15px;
        font-family: 'Font Awesome 5 Free';
        content: "\f054";
        font-weight: 900;
        color: #CDB79E;
}
.navDrawr>ul>li {
        float: none;
        width: 250px;
}
.navDrawr>ul>li>a {
        text-align: left;
        border-right: none;
        border-bottom: 1px solid #CDB79E;
        width: 100%;
}
.navDrawr .sub {
        position: static;
        display: block!important;
        border-bottom: 1px solid #CDB79E;
}
} 

ul.imgList{}
ul.imgList::after{
    display: table;
    line-height: 0;
    content: "";
    clear:both;
}
ul.imgList li{
    float: left;
    width: 31.33333333%;
    margin: 1%;
}
ul.imgList li .thumbnail{
    background-color: #FFF;
    padding: 20px;
    border:solid 1px #ccc;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
ul.imgList li img{
    margin-bottom:10px;
}
ul.imgList li .caption{}
ul.imgList li .title{
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}
 
 /* スマホ用
-----------------------------------------------------*/

@media only screen and (max-width: 750px) {
#wrapper{
        overflow:hidden;
    }
.navDrawr {
        background-color: #FFFFFF;
        position: fixed;
        width: 270px;
        top: 87px;
        bottom: 0;
        right: -270px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
}
body.menuOpen #wrapper{
        padding-top: 87px;
}
.overlay {
        display: none;
        background-color: rgba(0,0,0,0.3);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
}
header {
        position:relative;
        height: 87px;
        padding:0;
}
body.menuOpen header{
        position: fixed;
        top: 0;
        width: 100%;
}
header .headerTop{
        padding: inherit;
        height: 87px;
}
.navDrawrBtn {
        text-align: right;
}
.navDrawrBtn span {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        display: block;
        width: 60px;
        height: 87px;
        cursor: pointer;
    }
.navDrawrBtn span::before {
        font-family: 'Font Awesome 5 Free';
        content: "\f0c9";
        font-weight: 900;
        font-size: 24px;
        color: #534B40;
        position: absolute;
        left: 0;
        width: 100%;
        text-align: center;
        line-height: 87px;
}
body.menuOpen .navDrawrBtn span::before {
        font-family: 'Font Awesome 5 Free';
        content: "\f00d";
        font-weight: 900;
        color: #534B40;
}
.navDrawr a {
        position: relative;
}
.navDrawr a::after {
        position: absolute;
        top: 50%;
        margin-top: -15px;
        right: 15px;
        font-family: 'Font Awesome 5 Free';
        content: "\f054";
        font-weight: 900;
        color: #CDB79E;
}
.navDrawr>ul>li {
        float: none;
        width: 250px;
}
.navDrawr>ul>li>a {
        text-align: left;
        border-right: none;
        border-bottom: 1px solid #CDB79E;
        width: 100%;
}
.navDrawr .sub {
        position: static;
        display: block!important;
        border-bottom: 1px solid #CDB79E;
}
ul.imgList li{
        float: none;
        width: 98%;
        margin: 1%;
    }
}

/*contents
-----------------------------------------------------*/

div#contents{
	width: 97%;
	background-color: #FFF;
	margin: 0 auto;
	padding-bottom: 50px;
}

/*main
-----------------------------------------------------*/

div#main{
	width: 93%;
	padding: 20px 30px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

span.futo{
	font-weight: bold;
}

span.red{
	color: #FF0000;
}

span.hoso{
	font-weight: normal;
	font-size: 0.8em;
}

/* PC用改行 */
span.pc_br{
	display: block;
}

/* 改行 */
span.br{
	display: block;
}

h2{
	width: 97%;
	font-size: 1.1em;
	font-weight: bold;
	border-left: 7px solid #2E8B57;
	border-bottom: 1px solid #2E8B57;
	padding: 3px 8px 1px;
	margin: 25px 0 15px;
	clear: both;
}

h3.midashi{
	width: 97%;
	font-size: 0.9em;
	padding: 2px 5px 1px;
	border-left: 8px solid #FF7F24;
	font-weight: bold;
	margin: 10px 10px 5px;
}

div.prolg{
	margin: 0 auto;
	width: 97%;
	display: flex;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: flex-start;
}

p{
	font-size: 0.9em;
	margin: 10px;
	overflow-wrap: break-word;
	max-width: 70%;
}

/*top写真*/

img.sasie{
	margin: 10px;
	max-width: 100%;
	max-height: 100%;
}

ol{
	list-style-type: decimal;
	margin: 0 0 0 20px;
	padding-left: 20px;
}

ol li{
	font-size: 0.9em;
}

ul.hogozai{
	list-style-type: none;
	margin: 0 0 0 5px;
	padding-left: 20px;
}

ul li{
	font-size: 0.9em;
}

/*商品紹介
-----------------------------------------------------*/

div.shokai{
	width: 97%;
	display: flex;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: flex-start;
}

p.item_waku{
	text-align: center;
	font-size: 0.8em
	flex-basis: 150px;
	margin: 5px;
}

p.item_shokai{
	font-size: 0.9em;
	flex-basis: 80%;
}

/*医薬用外毒劇物*/

span.gk{
	float: left;
	display: normal;
	padding: 2px 10px 1px;
	color: #FFF;
	font-weight: bold;
	font-size: 0.9em;
	background-color: #FF0000;
	border-radius: 5px;
	margin: 3px 10px 5px;
}

span.dk{
	float: left;
	display: normal;
	padding: 2px 10px 1px;
	color: #FFF;
	font-weight: bold;
	font-size: 0.9em;
	background-color: #990033;
	border-radius: 5px;
	margin: 3px 10px 5px;
}

/* F☆☆☆☆ */

span.fourstar{
	display: normal;
	padding: 2px 10px 1px;
	color: #FFF;
	font-weight: bold;
	font-size: 0.9em;
	background-color: #00CD66;
	border-radius: 5px;
	margin: 3px 10px 5px;
}

/* 小さい文字 */

span.small{
	display: normal;
	font-size: 0.75em;
}

/* 使用方法内注意 */

ul.chui{
	list-style-type: none;
	margin: 0;
	padding-left: 0;
}

ul.chui li{
	font-size: 0.9em;
	text-indent: -0.9em;
	padding-left: 0.9em;
	color: #8B1A1A;
}

/* 使用方法補足 */

ul.hosoku{
	list-style-type: disc;
	margin: 10px 0 10px 10px;
	padding-left: 20px;
}

ul.hosoku li{
	font-size: 0.9em;
}

div.sekou{
	padding: 5px 0 0 10px;
	max-width: 97%;
	display: flex;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-content: flex-start;
	align-items: flex-start;
}

div.sekou img{
	max-width: 100%;
	max-height: 100%;
	margin: 0 0 20px 5px;
	flex-glow: 1;
	flex-shrink: 0;
}

/*footer すぐ上　リンク
-----------------------------------------------------*/

div.link_wk{
	flex-basis: 97%;
	margin: 50px auto 0px;
	text-align: center;
}

img.link{
	display: inline-block;
	max-width: 100%;
	max-height: 100%;
	margin: 3px;
}

/*footer
-----------------------------------------------------*/

div.foot{
	width: 100%;
}

footer{
	background-image: url(img/header_bg.jpg);
	background-repeat: no-repeat;
	width: 100%;
	height: 50px;
	padding: 20px 0;
	margin-top: auto;
	position: absolute;     
	bottom: 0;                 /*下に固定*/
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

p.copyright{
	font-size: 0.65em;
	color: #000;
	text-align: center;
	margin: auto;
}