html {
	font-size: 100%; /* 100% = 16px = 12pt */
}

BODY {
	background-color: mintcream;
	font-family: 'MS UI Gothic','Osaka';
	line-height: 140%;
	margin: 0px 0px;
	width: 900px;
	height: auto;
	margin-right: auto;
	margin-left: auto;
}

.hompo_l { float: left; 
	margin-top: 0.3em;
	font-size: 2.5rem;
	color: blue;
	font-weight: bolder;

}
.hompo_c { float: left; 
	margin-top: 0.8em;
	margin-left: 0.5em;
	font-size: 1.5rem;
	color: blue;
	font-weight: bold;
}
.hompo_r { float: left; 
	margin-top: 0.2em;
	margin-left: 2.0em;
	font-size: 0.8rem; 
	color: red;
	font-weight: bold;
}

.page_top {
	background-color: mintcream;
	border-style: none none double none;
	border-color: orange;
	width: 920px;
	padding: 0px 10px 0px 10px;
}
.menu_top {
	background-color: lemonchiffon;
/*	font-size: 15px; */
	font-size: 0.94rem; 
	color: blue;
	width: 920px;
	padding: 0px 10px 0px 10px;
}

.breadcrumb {
	background-color: ivory;
	font-size: 15px;
	font-size: 0.94rem;
	color: black;
	width: 920px;
	border-style: dashed none solid none;
	border-color: orange;
	border-width: 2px;
	padding: 0px 10px 0px 10px;
}

div.menu_top A       {color: blue; text-decoration: none;}
div.menu_top A:link  {text-decoration: none;}
div.menu_top A:visited {color: blue; text-decoration: none;}
div.menu_top A:hover {background-color: red; color: white; text-decoration: none;}
header {z-index: 3;
	position: fixed;
	top:0px;
}
footer {
	font-size: 16px;
	font-size: 1rem;
	line-height: 120%;
 	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 5px;
}
.center { text-align: center; }
.honmon {
	border-style: none none double none;
	border-color: orange;
	border-width: 3px;
/*	font-size: 16px;
	font-size: 1rem; */
	width: 920px;
	padding: 0px 10px 0px 10px; /* 上 右 下 左 */
	margin-top: 130px;
}
.komoji {
	font-size: 0.8rem;
}
.komoji td {
	font-size: 0.8rem;
}
.chuji {
	font-size: 0.9rem;
}
.akaji {
	font-size: 0.8rem;
	color: red;
	line-height: 120%;
}
.aoji {
	font-size: 0.8rem;
	color: blue;
	line-height: 120%;
}
.haba { /* euphoria.htm で使用 */
	width: 25%;
}

TABLE {
 	margin: 0px 0px 0px 0px; /* 上 右 下 左 */
	padding: 0px 0px 0px 0px;
}

IMG {
	margin: 0px 5px;
}

TD {
	padding: 5px;
	line-height: 120%;
}
CAPTION{
	caption-side: top;
	font-weight: bold;
	text-align: right;
}
A       {color:	blue; text-decoration: none;}
A:link  {text-decoration: none;}
A:visited {color: blue; text-decoration: none;}
A:hover {color: red; text-decoration: underline;}
h1 {
	font-size: 28px; 
	font-size: 1.75rem;
	color: green;
	line-height: 100%;
	margin-top: 15px;
	margin-bottom: 2px;
	text-align: left;
	border-bottom:solid 2px orange;
	border-left:solid 20px orange;
	padding:3px;
}
h2 {
	font-size: 22px;
	font-size: 1.37rem;
	font-weight: bold;
	color: brown;
	line-height: 100%;
	margin-top: 25px;
	margin-bottom: 7px;
	text-align: left;
	border-bottom:solid 2px yellowgreen;
	border-left:solid 20px yellowgreen;
	padding:3px;
}
h3 {
	font-size: 20px;
	font-size: 1.25rem;
	font-weight: bold;
	color: blue;
	line-height: 100%;
	margin-top: 7px;
	margin-bottom: 7px;
	text-align: left;
	border-bottom:solid 2px gold;
	border-left:solid 20px gold;
	padding:3px;
}
UL {
	margin-top: 0px;
	margin-bottom: 0px;
}
OL {
	margin-top: 0px;
	margin-bottom: 0px;
}
.frame-wrapper_video {
  position: relative;
  width: 80%;
  height: 0;
  padding-bottom: 45%;
  overflow: hidden;
  margin-bottom: 10px;
}

.frame-wrapper_video iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.s-box {
	width: 47%;
	float: left;
	padding: 5px 5px;
	margin: 5px 5px;
/*	border: solid 1px orange; */
}
.m-box {
	width: 47%;
	float: left;
	padding: 5px 5px;
	margin: 5px 5px;
/*	border: solid 1px orange; */
}
.t-box {	/* 商品一覧表の説明文, 特約店取引条件（表） */
	float: left;
	width: 65%;
	padding: 5px 5px;
	margin: 5px 5px;
/*	border: solid 1px orange; */
}
.tp-box {	/* 商品一覧表の写真, 特約店取引条件（送料） */
	float: left;
	width: 25%;
	padding: 5px 5px;
	margin: 5px 5px;
/*	border: solid 1px orange; */
}
.ss-box {
	width: 14%;
	float: left;
	padding: 5px 5px;
	margin: 5px 5px;
}
.ss-box img { 
	padding: 0;
	margin: 0 0 5px 0;
}
.hinmei {
	font-size: 13px;
	font-size: 0.8rem;
	text-align: center;
}



  /*　「続きを読む」動作のためのCSS　*/
.grad-wrap {
  position: relative;
}
.grad-btn {
  z-index: 1;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 148px;
  margin: auto;
  padding: .5em 0;
  border-radius: 2px;
  background: #98fb98;
  color: #000;
  font-size: 1rem;
  text-align: center;
  cursor: pointer;
  transition: .2s ease;
  box-shadow: 0 0 3px rgba(0,0,0,.3);

}
.grad-btn::before {
  content: "続きを読む"
}
.grad-item {
  position: relative;
  overflow: hidden;
  height: 80px; /*隠した状態の高さ*/
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px; /*グラデーションで隠す高さ＝うっとうしいのでゼロにしてある*/
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  content: "";
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked ~ .grad-btn::before {
  content: "閉じる" /*チェックされていたら、文言を変更する*/
}
.grad-trigger:checked ~ .grad-item {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .grad-item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}








@media only screen and (max-device-width: 850px) {  /* max-device-width: は非推奨に。850px以下の解像度で適用される
@media screen and (max-width: 850px) { */


html {		font-size: 150%;
		line-height: 180%;	}
.hompo_r { 	margin-left: 0;
		font-size: 2.5vw;	}
.menu_top {	font-size: 3.5vw;
		line-height: 150%;	}
.breadcrumb {	line-height: 150%;	}
.honmon {	width: 100%;
	/*	margin-top: 15vh; */
		margin-top: 15rem;
		line-height: 150%;	}
img {		width: 30%;		}
TH {		font-size: 1.5rem;	}
TD {		font-size: 1.2rem;	}
input[type="radio"], input[type="checkbox"], select
{
   		-webkit-transform: scale(3.0);
   		transform: scale(3.0);
   		margin: 1rem 2rem 1rem 3rem;		} /* 上 右 下 左 */
input[type="text"], textarea {
   		-webkit-transform: scale(1.5);
   		transform: scale(1.5);
   		margin-left: 6rem;
   		margin-top: 1rem;		} 
.s-box { 	width: 100%; 
		padding: 5px;
		margin: 5px 0px;
		font-size: 1.4rem;
		line-height: 120%;	}
.s-box img {	width: 30%;		}						
TD .s-box {	font-size: 1.4rem; 	}
INPUT {		font-size: 1rem;	}
LI {		font-size: 80%;	
		line-height: 120%;	}
.komoji {	font-size: 60%; 	}
H2 .komoji {	font-size: 30%; 	}
.grad-wrap {	font-size: 2.0rem;	}


  .frame-wrapper_video {
  	position: relative;
  	width: 100%;
  	height: 0;
  	padding-bottom: 56.25%;
  	overflow: hidden;
  	margin-bottom: 10px;
  }
  .yamato img { width: 100%; }
.m-box { /* 温灸器　注文欄 */
	float: left;
}
.m-box img {
	width: 100%;
}

  .t-box {	/* 商品一覧表の説明文 */
	float: right;
	width: 60%;
	padding: 5px 5px 5px 5px;
	margin: 5px 0px 5px 0px;
  }
  .tp-box {	/* 商品一覧表の写真 */
	float: left;
	width: 30%;
	padding: 5px 5px;
	margin: 5px 5px;
/*	border: solid 1px orange; */
}
  .tp-box img {
	width: 100%;
}

  .ss-box { width: 45%; 
	padding: 5px 5px 5px 5px;
	margin: 5px auto;
/* 	display: block;
 	margin-left: auto;
 	margin-right: auto;
	background-color: beige;
	border: solid 1px orange; */
  }
  .ss-box img { 
  }
  .s-pix img { zoom: 50%; }
  .m-pix img { zoom: 75%; }
  .hinmei { 
	font-size: 0.75rem; 
	text-align: left;
  }
  CAPTION { font-size: 0.65rem; }
  }
  .haba { /* euphoria.htm で使用 */
	width: 35%;
  }

@media only screen and (max-device-width: 400px) { /* max-device-width: 400px 以下の解像度で適用される */

  .m-pix table { width: 100%; }

}