@charset "utf-8";
/* Reset
-------------------------------------------------------------------------------*/

/* html5doctor.com Reset v1.6.1 - http://cssreset.com */
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; /*追加 max-height:100%;*/ }body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav 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}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}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, body{ background-color: #ffffff; }
h1,h2,h3,h4,p,strong,span{ font-weight: normal; }
ul,li{ list-style: none; }
img{ vertical-align: bottom; }
address{ font-style: normal; }

/* basic
-------------------------------------------------------------------------------*/
body{
	font: 14px/1.8 "秀英丸ゴシック L", "Shuei MaruGo L","ヒラギノ丸ゴ Pro W3", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	-webkit-text-size-adjust: 100%;
	color: #333;
}

a{ text-decoration: none; color: #333; outline:none: }


.op:hover,
a > img:hover{ opacity: 0.6; }
.clrfx:after{
	content:"";
	display:block;
	clear:both;
	height: 0;
}
.tac{text-align: center;}
.ml_05{margin-left: -0.5em;}
.fl {float: left;}
.fr {float: right;}
@media only screen and (max-width: 479px) {
	.fl,.fr {float: none;clear: both;}
}

/* module
-------------------------------------------------------------------------------*/
.wrapper{
	width: 1000px;
	margin: 31px auto;
}

/* layout
-------------------------------------------------------------------------------*/
/* main nav */
#mainNav{
	position: fixed;
	width: 1000px;
	margin-top: -32px;
	background-color: #FFF;
	z-index: 999;
}

#mainNav li{
	display: inline-block;
	box-sizing: border-box;
	width: 12.5%;
	border: 1px solid #000;
	border-right: none;
	vertical-align: top;
}
#mainNav li:last-child{ border-right: 1px solid #000; }

#mainNav a{
	display: block;
	height: 25px;
	padding-top: 6px;
	text-align: center;
	font-size: 10px;
}

#openMenu{
	display: none;
	position: fixed;
	top: 12px;
	right: 22px;
	width: 40px;
	height: 39px;
	z-index: 1000;
	background: url(../images/1506/nav_btn.gif) no-repeat;
	background-size: cover;
	text-indent: -9999px;
	cursor: pointer;
}

/* header */
#header{
	position: relative;
	box-sizing: border-box;
	border: 1px solid #000;
	border-top: none;
	padding: 20px 0;
	margin-bottom: 10px;
	
	padding-left: 48px;
}

#header h1 img{
	top: 154px;
	left: 520px;
}

#header .ttl_jp {
	padding-left: 280px;
}

/* box ------ */
.box {
	border: 1px solid #000;
	margin-bottom: 10px;
	text-align: left;
	letter-spacing:2px;
	padding:20px 0 0 50px;
}

.box h2.ttl {
	padding-bottom: 40px;
	font-size: 28px;
	color:#FF47AD;
	font-family: "秀英丸ゴシック B", "Shuei MaruGo B","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.box a {color:#0082FF;}
.box a:link{color:#0082FF;}
.box a:visited{color:#0082FF;}
.box a:hover{color:#69BBFF;}
.box a:focus{outline:0}

.explain {
	margin-bottom: 40px;
}
/* サイズ */
.box .wear {
	padding-bottom: 80px;
}
.box .sizeList img{
	padding-top: 20px;
	padding-right: 20px;
}
.sizeTable th,
.sizeTable td {
	border: 1px solid #000;
	padding: 15px 30px;
}
.sizeTable {
	margin-bottom: 50px;
}



/*
*
    20170706_write
* 
*/

#leg.warmer:after{
    content: '';
    clear: both;
    display: block;
}

#leg.warmer .explain{
    margin: 0 40px 0 0;
    display: inline-block;
    float: left;
    vertical-align: top;
}

#leg.warmer .img{
    margin: 0 0 40px 0;
    display: inline-block;
    vertical-align: top;
}


#pochi_pants:after{
    content: '';
    clear: both;
    display: block;
}

#pochi_pants .explain{
    margin: 0 40px 40px 0;
    display: inline-block;
    float: left;
    vertical-align: top;
}

#pochi_pants .img{
    margin: -40px 0 0 0;
    display: inline-block;
    vertical-align: top;
}



/* 素材 */
#material .yodogawa{
	padding-bottom: 30px;
}
#material .box h2.ttl{
	padding-bottom: 30px;
}
.materialPhoto {
	margin: 20px 0 60px 0;
}
.materialPhoto span{
	display: block;
	font-size:12px;
	color: #4D4D4D;
	text-align: center;
	padding-top: 10px;
}
.materialPhoto .adjst10{
	padding-left: 10px;
}

#material .label {
	padding-bottom: 10px;
	font-size: 18px;
	color:#FF47AD;
}
#material .box .m_cat {
	display: inline-block;
}

#material .explain {
	width: 440px;
}

#material .expR{
	padding-left: 60px;
}
#material .explain span {
	display: block;
}

/* サーモグラフィ */
#thermography .wrapper {
	margin-top: 0;
}

#thermography #header{
	border: 1px solid #FF47AD;
	background-color: #FF47AD;
	text-align: center;
}
#thermography #header img{
	margin-left: -10px;
}

#thermography .box {
	margin-bottom: 0px; 
	border: none;
	border-top: 1px solid #FF47AD;
	border-right: 1px solid #FF47AD;
	border-left: 1px solid #FF47AD;
	padding: 40px 0 0px 0;
	text-align: center;
	font-size:16px;
	line-height: 32px;
}

#thermography .box .tac {
	font-size:14px;
	line-height: 28px;
}
#thermography .box img {
	padding: 30px 0 0 0;
}
#thermography .box .caption {
	font-size:14px;
	line-height: 28px;
	text-align: left;
	padding-left: 100px;
	padding-bottom: 50px;
}
#thermography .box.adjstBtm {
	border-bottom: 1px solid #FF47AD;
}
#thermography .explain {
	text-align: left;
	display: inline-block;
	padding-left: 40px;
}

/* 知っておいて */
#demerit #header .ttl_jp{
	padding-left: 80px;
}

#demerit .box {
	margin: 0 auto;
	padding: 40px 0 30px 0;
	font-size:16px;
	line-height: 32px;
	text-align: center;
	border: none;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	border-left: 1px solid #000;
}
#demerit .box p {
	display: inline-block;
	text-align: left;
}
#demerit .box.adjstBtm {
	border-bottom: 1px solid #000;
	font-size:14px;
	line-height: 28px;
}

#demerit .box .inner  {
	padding-left: 20px;
	text-align: left;
}
#demerit .box .inner h2,#demerit .box .inner h3
 {
 	color: #FF47AD;
	font-family: "秀英丸ゴシック B", "Shuei MaruGo B","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#demerit .box .inner{
	padding-left: 294px;
}
#demerit .box .inner h2 {
 	font-size:28px;
	line-height: 50px;
}
#demerit .box .inner h3 {
 	font-size:18px;
	line-height: 33px;
	padding-top: 30px;
	padding-bottom: 10px;
}
#demerit .box .inner h4 {
 	padding-bottom: 10px;
 	padding-top: 10px;
}
#demerit .box .inner h4.taorin {
 	padding-top: 20px;
}
#demerit .icon{
	color: #FF47AD;
	margin-left: -18px;
}
#demerit .item {
	padding-left: 14px;
	padding-bottom: 42px;
}
#demerit .item h5 {
	font-size:16px;
	line-height: 28px;
	font-family: "秀英丸ゴシック B", "Shuei MaruGo B","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#demerit .item p {
	padding-top: 10px;
	padding-left: 5px;
}

/* QA */
#qa .box {
	margin: 0 auto;
	padding: 40px 0 30px 0;
	font-size:16px;
	line-height: 32px;
	letter-spacing:2px;
	text-align: center;
	border: none;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	border-left: 1px solid #000;
}
#qa .box p ,#qa .qaList {
	display: inline-block;
	text-align: left;
}
#qa .qaList {
	padding-top: 30px;
	padding-left: 100px;
}
#qa .qaList li{
	background-image:url(../images/1506/sub/icon_qa.png);
	 background-repeat: no-repeat;
	 background-position: left center;
	 background-size:58px;
	 text-align: left;
	 font-size:18px;
	 padding: 10px 0 10px 80px;
}

#qa .qaList li:hover{
	filter: alpha(opacity=60);
	opacity: 0.6;
}

#qa .box_qa {
	padding: 40px 0 15px 0;
}

#qa .box_qa dl {
	padding-left: 250px;
}

#qa .box_qa dt {
	width: 40px;
}
#qa .box_qa dd {
	margin: -28px 0 0 50px;
	text-align: left;
}

#qa .box_qa dl.question{
	font-size:18px;
	line-height: 32px;
	color: #0082FF;
}
#qa .box_qa dl.answer {
	padding-top: 20px;
}

#qa .box_qa dl.answer dd{
	margin: -24px 0 0 50px;
	font-size:14px;
	line-height: 25px;
}

#qa .box_qa .photo {
	padding-top: 10px;
}
#qa .box_qa .photo span {
	font-size:12px;
	line-height: 20px;
	padding-top: 5px;
	  display: inherit;
}
#qa .sizeTable {
	margin-top: 25px;
	margin-bottom: 0;
}
#qa .sizeTable th{
	text-align: center;
}
#qa .box_qa dd .adjstL{
	padding-left: 30px;
}

#qa .box.adjstBtm {
	border-bottom: 1px solid #000;
}

/* 使い方レシピ */
.prev:hover, .top:hover, .next:hover{
	filter: alpha(opacity=60);
	opacity: 0.6;
}

#recipe .box {
	padding:40px 0 0 0;
}

#recipe #header{
	border-bottom: none;
	margin-bottom: 0;
}

#recipe a.info_link {
	display: block;
	position: absolute;
	 top: 142px;
	left: 390px;
	width: 100px;
	height: 22px;
	text-indent: -9999px;
	z-index: 1000;
}
#recipe a.info_link:hover {
	background-color:#fff;
	opacity:0.6;
	-moz-opacity:0.6;
	-ms-filter:"alpha(opacity=60)";
	filter:alpha(opacity=60);
}

#recipe .credit {
	padding-top: 50px;
	padding-left: 45px;
}

/* news */
#lbOverlay {z-index: 10000;}
#lbCenter, #lbBottomContainer {z-index: 10001;}
#news .box {
	margin: 0 auto;
	padding: 40px 0 40px 0;
	font-size:16px;
	line-height: 32px;
	letter-spacing:2px;
	text-align: center;
	border: none;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	border-left: 1px solid #000;
}

#news .box.adjstBtm {
	border-bottom: 1px solid #000;
	font-size:14px;
	line-height: 28px;
	
	padding: 30px 0;
  	text-align: left;
}

#news .textlive{
	width: 850px;
	margin: 0 auto;
}
#news .textlive .infoL{
	float: left;
	width: 340px;
}

#news .textlive .infoL img{
	box-shadow:rgba(163, 163, 163, 0.65098) 0px 0px 6px 3px;
	-webkit-box-shadow:rgba(163, 163, 163, 0.65098) 0px 0px 6px 3px;
	-moz-box-shadow:rgba(163, 163, 163, 0.65098) 0px 0px 6px 3px;
	border:10px solid #fff;
	margin-bottom: 30px;
}
	
#news .textlive .infoR{
	text-align: left;
	float: left;
	padding-left: 62px;
}

#news .textlive .infoR .date{
	width: 178px;
	font-size:16px;
	line-height: 24px;
	background-color: #FF47AD;
	color: #fff;
	padding: 0px 25px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
#news .textlive .infoR .time{
	font-size:14px;
	padding-left: 6px;
}
#news .textlive .infoR .ttl {
	padding: 10px 0 40px 0;
}
#news .textlive .infoR .ttl .subject{
	float: left;
	display: inline-block;
	font-size:23px;
	padding-top: 18px;
	font-family: "秀英丸ゴシック B", "Shuei MaruGo B","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#news .textlive .infoR .ttl .icon{
	float: right;
	display: inline-block;
	padding-left: 10px;
}

#news .box.adjstBtm h3 {
	padding-bottom: 10px;
	text-align: center;
}
#news .textlive .infoR .bodyTxt{
	font-size:14px;
	line-height: 26px;
	padding-left: 3px;
}
#news .archiveArea{
	margin: 0 auto;
	width: 826px;
	display: table;
}

#news .archive{
	display: inline-table;
	width: 130px;
	text-align: left;
	vertical-align: top;
	margin: 10px 15px;
}
#news .archive span {
	display: block;
}

#news .box.adjstBtm .archive_date {
	font-size: 13px;
	line-height: 12px;
	letter-spacing:1px;
	font-weight:bold;
	color:#666;
	padding-top: 10px;
}

#news .box.adjstBtm .archive_subject{
	font-size: 11px;
	line-height: 12px;
	padding-top: 5px;
}

/* footer */
#footer{
	margin-top: 45px;
	text-align: center;
	font-size: 16px;
	letter-spacing: 0.2em;
}
#footer li{ display: inline-block; }
#footer li + li{ margin-left: 52px; }
#footer li > a{ display: block; }

#footer li.line{display: none;}
@media only screen and (max-width: 479px) {
	#footer li.line{display: inline-block;}
}

#footer ul:first-of-type{ margin-top: 25px; }
#footer ul:first-of-type img{ width: 39px; }

/*#footer ul:last-of-type{
	margin-top: 50px;
	padding-top: 30px;
	border-top: 1px solid #000;
}*/
#footer ul:last-child li{ margin-bottom: 3%; }


#footer p img{ width: 229px; }


/* reflow
-------------------------------------------------------------------------------*/
/* 1000px 以下 メインナビ用マイナーブレイクポイント */
@media only screen and (max-width: 1000px) {
	.wrapper{ margin-top: 63px; }
	#mainNav{
		width: 100%;
		margin-top: -63px;
	}
	#mainNav li{ width: 25%;}
	#mainNav li:nth-child(4){ border-right: 1px solid #000; }
	#mainNav li:nth-child(n+5){ border-top: none; }
}

/* 500px 以下 */
@media only screen and (max-width: 500px) {
	
	.wrapper{ width: 100%; }
	
	/* logo */
	#indexTop a {
		display: block;
		position: absolute;
		top: 10px;
		left: 10px;
		width: 140px;
		height: 45px;
		text-indent: -9999px;
		z-index: 1000;
	}
	
	#openMenu{ display: block; }
	
	#mainNav{
		box-sizing: border-box;
		padding-top: 64px;
		/*border: 1px solid #000;*/
		border-left: 1px solid #000;
		border-right: 1px solid #000;
		border-bottom: 1px solid #000;
		background: #fff url(../images/1506/logo_haramaki_sp.png) no-repeat 20px 10px;
		background-size: 124px auto;
	}
	#mainNav li{ width: 50%;border-top: 1px solid #000; }
	#mainNav li:nth-child(2n+1){ border-left: none; }
	#mainNav li:nth-child(2n){ border-right: none; }
	#mainNav li:nth-child(n+3){ border-top: none; }
	#mainNav li:nth-child(n+7){ border-bottom: none; }
	.manuDeactive li{ display: none !important; }
	
	#header{
		width: 100%;
		height: auto;
		background-size: 100% auto;
		text-align: center;
		padding-left: 0;
	}
	#header h1 img{
		position: static;
	}
	
	#header .ttl_jp {
		padding-top: 20px;
		padding-left: 0;
	}

	.box {
		padding: 26px 10px 20px 10px;
	}
	#footer .op {margin-left: 0;}
		
	/* [smp] サイズ ------ */
	.wear3 img {
		width: 100%;
	}
	.sizeTable th {
		text-align: center;
		padding: 0 5px;
	}
	.sizeTable td {
		text-align: center;
		padding: 10px;
	}



/*
*
    20170706_write
* 
*/
#leg.warmer .explain{
    float: none;
    margin: 0 0 40px 0;
}

#leg.warmer .img{
    float: none;
    margin: -20px 0 40px 0;
}


#pochi_pants .explain{
    float: none;
    margin: 0 0 40px 0;
}

#pochi_pants .img{
    float: none;
    margin: -20px 0 0 0;
}

#pochi_pants .img img{
    width: 100%;
}

	
	/* [smp] 素材 ------ */
	.materialPhoto {
	  margin: 0px 0 40px 0;
	}
	.materialPhoto img {
		width: 100%;
	}
	.materialPhoto .adjst10 {
		padding-left: 0;
		padding-top: 10px;
	}
	#material .explain {
		width: 100%;
		padding: 10px 0;
	}
	#material .label {
		padding-bottom: 20px;
	}
	#material .expR {
		padding-left: 0px;
	}
	
	/* [smp] サーモグラフィ ------ */
	#thermography {
		
	}
	/* サーモグラフィ ------ */
	#thermography {
		/*border: 1px solid #FF47AD;*/
	}
	#thermography #header img{
		width: 90%;
		margin-left: 0px;
	}
	#thermography .box img {
		width: 98%;
	}
	#thermography .box .caption {
		font-size:14px;
		line-height: 28px;
		text-align: left;
		padding-left: 0px;
		padding-bottom: 20px;
	}
	#thermography .explain {
		padding: 0 10px;
	}
	
	/* 知っておいて */
	#demerit #header img{
		width: 90%;
		margin-left: 0px;
	}
	#demerit #header .ttl_jp{
		padding-left: 0px;
	}
	#demerit .box .inner{
		padding-left: 0;
	}
	#demerit .box  {
		padding: 26px 10px 20px 10px;
	}
	
	
	/* QA */
	#qa .box p{
		width: 98%;
	}
	#qa .qaList {
		padding-top: 30px;
		padding-left: 0px;
	}
	#qa .qaList li{
	 padding: 10px 0 10px 80px;
	}
	#qa .box_qa dl {
		 padding-left: 0; 
	}
	#qa .box_qa dd .adjstL{
		padding-left: 0;
	}
	
	/* 使い方レシピ */
	#recipe #header {
	  display: block;
	  text-align: center;
	  margin: 0 auto;
	}

	#recipe a.info_link {
		top: 43px;
		left: 148px;
		width: 100px;
		height: 30px;
	}
	#recipe .credit {
		padding-top: 0;
		padding-left: 0;
	}
	
	/* NEWS */
	#news .textlive{
		width: 100%;
	}
	#news img.ttl_jp{
		width: 100%;
	}
	#news .textlive .infoL{
		 float: none; 
		 width: 100%;
	}
	#news .box.adjstBtm {
		padding: 0;
	}
	#news .archiveArea{
		width: 346px;
		display: block;
		padding-bottom: 30px;
	}
	#news .box.adjstBtm h3 img {
		padding-top: 30px;
		width: 98%;
	}
	
	#news .textlive .infoR{
		float: none; 
		padding: 0; 
		margin: 0 auto;
		width: 88%;
	}
	#news .textlive .infoR .ttl {
		padding: 10px 0 25px 0;
	}
	#news .textlive .infoR .bodyTxt{
		padding-left: 0;
	}

}