@charset "utf-8";

/*--------------------------------------------------------
■スタイルの初期化(HTML5 Doctor Reset 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;
    vertical-align: baseline;
    background: transparent;
}

/*文字サイズrem指定*/
html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } 

/* モダンブラウザ */
img{max-width: 100%;height: auto;}


body {
background-color:#fff;
color: #555555;
line-height:1.5;
font-family: Verdana, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, sans-serif;
min-width: 320px;
-webkit-text-size-adjust: 100%;
}

/*--------------------------------------------------------
■リンク関連
--------------------------------------------------------*/

a:link{
color:#555;
text-decoration:underline;
}

a:visited{
color:#666666;
text-decoration:underline;
}

a:hover{
color:#ff6600;
text-decoration:underline;
}

/*--------------------------------------------------------
■wrapper＆影表示部分
--------------------------------------------------------*/

#wrapper {
	background-image:url(/img/header/back_01.gif);
	background-repeat:repeat;
	width: 100%;
	margin: 0 auto;
	padding-top:50px;
}

#shadow{
	background-image:url(/img/header/back_02.gif);
	background-repeat:no-repeat;
	width:100%;
	position: relative;
	background-color:#fff;
}


/*--------------------------------------------------------
■ロゴ表示部分
--------------------------------------------------------*/

#pc-header{
	width:100%;
	position: relative;
	background-image:url(img/header/leaf_02.gif);
	background-repeat:no-repeat;
}


#pc-header p{
	margin-bottom:5px;
	margin-bottom:0.5rem;
}


/*▼ロゴ表示部分*/

#logo{
	display:block;
}

#logo-l{
	width:60%;
}

/*----------------------------------
■パンくずリンク部分
-----------------------------------*/

#bread-search{
	width:96%;
	background-color:#565620;
	color:#fff;
	padding:2.5px 2% 2.5px 2%;
	padding:0.25rem 2% 0.25rem 2%;
}

#breadcrumb{
	float:left;
	width:100%;
}

#breadcrumb ol{
	list-style:none;
	font-size:10px;
	font-size:1.0rem;
}

#breadcrumb li{
	float:left;
	padding-right:1%;
}

#breadcrumb li:before {
content: '＞'; 
}
#breadcrumb li:first-child:before {
content: ''; 
}

#breadcrumb a:link{
color:#fff;
text-decoration:none;
}

#breadcrumb a:visited{
color:#ccc;
text-decoration:underline;
}

#breadcrumb a:hover{
color:#ccc;
text-decoration:underline;
}

/*--------------------------------------------------------
■メインコンテンツ
--------------------------------------------------------*/

#mid{
	width:100%;
	padding-bottom:50px;
	padding-bottom:5em;
}

#main{
	width:100%;
}

.article{
	margin-bottom:50px;
	margin-bottom:5rem;
	line-height:1.7;
}

.article-c,.article-half-1,.article-half-2,.article-fabric,.article1-3-1,.article1-3-2,.article1-3-3{ /*スマホ版記事分割ナシ*/
	width:92%;
	padding:0 4% 0 4%;
	margin:0 auto;
	margin-bottom:10px;
	margin-bottom:1rem;
}

.article2-3-1{ /*スマホ版記事2分割　PC版３分割 左側*/
	width:46.25%;
	padding:0 1.25% 0 2.5%;
	float:left;
	margin-bottom:10px;
	margin-bottom:1rem;
}

.article2-3-2{ /*右側*/
	width:46.25%;
	padding:0 2.5% 0 1.25%;
	float:left;
	margin-bottom:10px;
	margin-bottom:1rem;
}

/*--------------------------------------------------------
■商品一覧ページ
--------------------------------------------------------*/

.article-fabric{
	width:96%;
	padding:0 2% 0 2%;
	margin:0 auto;
	background-image:url(/img/ichiran/background.gif);
}


.fabric-background,.fabric-background-r {
	padding-top:20px;
	border-bottom:1px solid #9A7946;
}

.step{
	width:20%;
	padding:1% 0 0 1%;
	float:left;
}

.brown-white{
width:76%;
padding:1% 0 0 3%;
float:left;
font-size:17px;
font-size:1.7rem;
font-weight:bold;
color:#503409;
text-shadow: #fff 1px 1px 0px, #fff -1px 1px 0px,
             #fff 1px -1px 0px, #fff -1px -1px 0px;
			 display:block;
}

.fabric-blue{
width:auto;
padding:10px 0 0  10px;
padding:1rem 0 0  1rem;
float:left;
font-size:17px;
font-size:1.7rem;
font-weight:bold;
color:#3B8FE4;
}

.fabric-brown{
width:auto;
padding:10px 0 10px  10px;
padding:1rem 0 1rem  1rem;
float:left;
font-weight:bold;
color:#503409;
}

.fabric-pin{
	width:90%;
	margin:0 auto;
}

.fabric-white-bg{
		width:90%;
	margin:0 auto;
	background-color:#fff;
	padding:5%;
	border:solid #ccc 1px;
	border-top:none;
	margin-bottom:50px;
	margin-bottom:5rem;
	max-width:346px;
}

.fabric-text{
	clear:both;
	width:auto;
	background-color:#fff;
	padding-top:20px;
	padding-top:2rem;
	margin-bottom:20px;
	margin-bottom:2em;
}

.fabric-background img,.fabric-background-r img{
	display: block;
	margin: 0 auto;
	padding: 0;
}

.fabric-cart{
-moz-border-radius: 5px;    /* 古いFirefox */
-webkit-border-radius: 5px; /* 古いSafari,Chrome */
border-radius: 5px;         /* CSS3 */

border: 10px #FCD8E0 solid;     /* 枠線の装飾 */
background-color: #fff;   /* 背景色 */
padding:2%;
margin-bottom:50px;
margin-bottom:5rem;
}

.fabric-cart form{
display:inline;
}

.fabric-cart input{
	vertical-align:middle;
	padding:2%;
}

.fabric-link{
	width:60%;
	margin:0 auto;
	text-align:center;
	font-weight:bold;
	margin-bottom:10px;
	margin-bottom:1rem;
}

/*--------------------------------------------------------
■ランディングページ
--------------------------------------------------------*/

.pc-banner{
	display:none;
}

.img-right{
	float:right;
	padding:2.5% 0 2.5% 2.5%;
}

.img-left{
	float:left;
	padding:2.5% 2.5% 2.5% 0%;
}


/*--------------------------------------------------------
■カテゴリページ
--------------------------------------------------------*/

h2.style1,h1.style1 {
position: relative;
/*padding: 0.5em 0.5em 0.5em 1.5em;*/
padding: 0.5em 0.5em 0.5em 1.0em;
line-height: 1.4;
/*color: #503409;*/
color: #fff;
/*border-top: dotted 1px #503409;
border-bottom: dotted 1px #503409;*/
/*background: #F7E9D4;*/
background: #565620;
font-size:15px;
font-size:1.5rem;
margin-bottom:20px;
margin-bottom:2rem;
/*font-weight:bold;*/
font-weight:normal;
}

/*h2.style1:before,h1.style1:before,h3.style1:before,h4.style1:before{ font-family: FontAwesome;
content: "\f06c";
position: absolute;
font-size: 1em;
left: 0.25em;
top: 0.5em;
color: #7FAE00; 
}*/

h2.style2,h1.style2 {
position: relative;
padding: 0.5em 0.5em 0.5em 2em;
line-height: 1.4;/*行高*/
color: #503409;/*文字色*/
border-top: dashed 1px #503409;
border-bottom: dashed 1px #503409;
font-size:15px;
font-size:1.5rem;
margin-bottom:20px;
margin-bottom:2rem;
font-weight:bold;
}

h2.style2:before,h1.style2:before{ font-family: FontAwesome;
content: "\f14a";
position: absolute;
font-size: 1.5em;
left: 0.25em;
top: 0.2em;
color: #FF6666;
}


h1.style3,h2.style3,p.style3{
  position: relative;
  color: white;
  background: #7E5618;
  line-height: 1.4;
  padding: 0.5em 0.5em 0.5em 1.8em;
  font-size:15px;
  font-size:1.5rem;
  margin-bottom:20px;
margin-bottom:2rem;
}

h1.style3:before,h2.style3:before,p.style3:before {/*疑似要素*/
  font-family: FontAwesome;
  content: "\f14a";
  position: absolute;
  left : 0.5em; /*左端からのアイコンまでの距離*/
}

h3.style1 {
position: relative;
padding: 0.5em 0.5em 0.5em 1.5em;
line-height: 1.4;
color: #503409;
border-top: dotted 1px #503409;
border-bottom: dotted 1px #503409;
font-size:15px;
font-size:1.5rem;
margin-top:50px;
margin-top:5rem;
margin-bottom:20px;
margin-bottom:2rem;
}

h4.style1 {
position: relative;
padding: 0.5em 0.5em 0.5em 1.5em;
line-height: 1.4;
color: #503409;
border-top: none;
border-bottom: dotted 1px #503409;
font-size:15px;
font-size:1.5rem;
margin-top:50px;
margin-top:5rem;
margin-bottom:20px;
margin-bottom:2rem;
}

h3.style2 {
position: relative;
padding: 0.5em 0.5em 0.5em 0.5em;
line-height: 1.4;
color: #503409;
border-top: dotted 1px #503409;
border-bottom: dotted 1px #503409;
font-size:15px;
font-size:1.5rem;
margin-top:50px;
margin-top:5rem;
margin-bottom:20px;
margin-bottom:2rem;
}


/*▼FAQページ*/

p.faq,h3.faq{
position: relative;
padding: 0.5em 0.5em 0.5em 2em;
line-height: 1.4;/*行高*/
color: #503409;/*文字色*/
border-top: dashed 1px #503409;
border-bottom: dashed 1px #503409;
font-size:15px;
font-size:1.5rem;
margin-bottom:20px;
margin-bottom:2rem;
font-weight:bold;
}

p.faq:before,h3.faq:before{ font-family: FontAwesome;
content: "\f14a";
position: absolute;
font-size: 1.5em;
left: 0.25em;
top: 0.2em;
color: #FF6666;
}

ul.faq{
    list-style: none;
	margin:20px 0 30px 0;
	margin:2rem 0 3rem 0;
}

.faq li{
	line-height:30px;
	line-height:3rem;
	padding-left:2rem;
	text-indent:-2rem;
}
 
.faq li:before {
    content: "\f059";
    font-family: FontAwesome;
	margin-right:0.5rem;
	font-size:2rem;
	color: #6C4818;
}

.question{
	font-weight:bold;
	margin-bottom:10px;
	margin-bottom:1rem;
	font-size:14px;
	font-size:1.4rem;
}

p.question:before,h3.question:before {
    content: "\f059";
    font-family: FontAwesome;
	margin-right:0.5rem;
	font-size:2rem;
	color: #6C4818;
}

.answer{
	margin-bottom:10px;
	margin-bottom:1rem;
	font-size:14px;
	font-size:1.4rem;
}

p.answer:before,h3.answer:before {
    content: "\f05a";
    font-family: FontAwesome;
	margin-right:0.5rem;
	font-size:2rem;
	color: #4b7d0a;
}

.back-right{
	text-align:right;
	margin-bottom:10px;
	margin-bottom:1rem;
}

.back-right:after {
    content: "\f139";
    font-family: FontAwesome;
	margin-left:0.5rem;
	font-size:2rem;
	color: #4b7d0a;
}


/*▼お客さまの声ページ*/

ul.voice,ul.sitemap,ul.glossary{
    list-style: none;
	margin:0 0 30px 0;
	margin:0 0 3rem 0;
}

.voice li,.sitemap li,.glossary li{
	line-height:30px;
	line-height:3rem;
	padding-left:2rem;
	text-indent:-2rem;
}
 
.voice li:before {
    content: "\f27a";
    font-family: FontAwesome;
	margin-right:0.5rem;
	font-size:2rem;
	color: #6C4818;
}

.sitemap li:before {
    content: "\f041";
    font-family: FontAwesome;
	margin-right:0.5rem;
	font-size:2rem;
	color: #6C4818;
}

.glossary li:before {
    content: "\f040";
    font-family: FontAwesome;
	margin-right:0.5rem;
	font-size:2rem;
	color: #6C4818;
}

.voice{
	margin-bottom:10px;
	margin-bottom:1rem;
}

p.voice:before {
    content: "\f27a";
    font-family: FontAwesome;
	margin-right:0.5rem;
	font-size:2rem;
	color: #4b7d0a;
}

.voice{
	font-weight:bold;
	margin-bottom:10px;
	margin-bottom:1rem;
}

/*▼用語集ページ*/


ul.grossary{
	text-align:center;
	line-height:30px;
	line-height:3rem;
}

.grossary li{
	display:inline;
	list-style-type:none;
	margin-right:6px;
	padding-left:10px;
}

.grossary li+li {
	border-left:1px solid #999;
}


/*--------------------------------------------------------
■SNSシェアボタン部分
--------------------------------------------------------*/

.sns-share{
	width:92%;
	text-align: center;
	list-style:none;
	margin:0 auto;
}
 
.sns-share li {
	display: inline-block;
	vertical-align: top;
	margin: 0 7px 10px 7px;
}
 
.sns-share li:first-child {
	margin-left: 0;
}
 
.sns-share li:last-child {
	margin-right: 0;
}

.facebook-page{
	background-color:#f7f7f7;
}

.sns-pic{
	width:50%;
	float:left;
}

.sns-pic img{
	display: block;
}

.sns-intro{
	width:50%;
	padding-top:20px;
	padding-top:2rem;
	float:left;
}

.sns-text01{
	margin-top:10px;
	margin-top:1rem;
	font-weight:bold;
}

#sns-text02{
	margin-top:10px;
	margin-top:1rem;
	margin-bottom:10px;
	margin-bottom:1rem;
	font-size:12px;
	font-size:1.2rem;
}
 

/*--------------------------------------------------------
■カテゴリリンク部分
--------------------------------------------------------*/

#category-link{
	width:100%;
}


.category-link-cell{
	width:50%;
	background-color:#fff;
	float:left;
	border-right:dashed #c3b59e 1px;
	border-bottom:dashed #c3b59e 1px;
	border-left:dashed #c3b59e 1px;
	box-sizing:border-box;
	display:table;
	border-collapse: separate;
	border-spacing: 10px 10px;
}

.category-link-cell2{
	width:50%;
	background-color:#fff;
	float:left;
	border-right:dashed #c3b59e 1px;
	border-bottom:dashed #c3b59e 1px;
	box-sizing:border-box;
	display:table;
	border-collapse: separate;
	border-spacing: 10px 10pX;
}

.category-link-cell a,.category-link-cell2 a{
display: block;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
}


#category-link h2{
	margin-bottom:0;
}


.category-img-cell{
	width:25.3%;
	display:table-cell;
	margin-right:5%;
}

.category-text-cell{
	font-size:12px;
	font-size:1.2rem;
	width:auto;
	display:table-cell;
	vertical-align:middle;
}

.category-link-cell:hover,.category-link-cell2:hover{
    background-color:#FFF;
	opacity:0.5;
	filter: alpha(opacity=50);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=50)";  /* ie 8 */
	-moz-opacity:0.5;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.5;              /* Safari 1.x */
}


/*--------------------------------------------------------
■SNS部分
--------------------------------------------------------*/

#sns{
	width:90%;
	background-color:#f7f7f7;
	padding:30px 5% 10px 5%;
	padding:3rem 5% 1rem 5%;
	border-bottom:solid #ddd 1px;
	border-top:solid #ddd 1px;
}

#sns p{
	text-align:center;
	font-size:17px;
	font-size:1.7rem;
	margin-bottom:10px;
	margin-bottom:1rem;
	font-weight:bold;
	color:#7c7c7c;
}

#sns ul{
	list-style:none;
	font-size:40px;
	font-size:4.0rem;
	color:#606060;
}

#sns li{
	width:20%;
	float:left;
}

#sns a:link {color:#7c7c7c;}
#sns a:visited {color:#7c7c7c;}
#sns a:hover {color:#cccccc;}
#sns a:active {color:#cccccc;}


/*--------------------------------------------------------
■送料＆お問い合わせ部分
--------------------------------------------------------*/

#footer-send-fee,#footer-inquiry{
	width:92%;
	background-color:#f7f7f7;
	padding:20px 4% 10px 4%;
	padding:2rem 4% 1rem 4%;
	border-bottom:solid #ddd 1px;
	font-size:13px;
	font-size:1.3rem;
}

/*--------------------------------------------------------
■フッター検索窓部分
--------------------------------------------------------*/

#footer-search{
	width:92%;
	background-color:#eaeaea;
	padding:20px 4% 20px 4%;
	padding:2rem 4% 2rem 4%;
	border-bottom:solid #ddd 1px;
}

/*--------------------------------------------------------
■フッターリンク部分
--------------------------------------------------------*/

#footer-link{
	width:92%;
	background-color:#f7f7f7;
	padding:20px 4% 20px 4%;
	padding:2rem 4% 2rem 4%;
	border-bottom:solid #ddd 1px;
	text-align:center;
	font-size:13px;
	font-size:1.3rem;
}

#footer-link li {
  display:inline;
  border-right:1px solid #555;
  padding:0 1%;
}

.footer-link-cell {
  border-left:1px solid #555;
}


/*--------------------------------------------------------
■固定ヘッダ部分
--------------------------------------------------------*/
#header{
	position: fixed;
	display: block;
	z-index: 1;
	top:0;
	width: 100%;
	font-size:9px;
	font-size:0.9rem;
    background: #f7f7f7;
    border-bottom: 1px solid #ddd;
}

#header ul{
	text-align:center;
	height:49px;
	display:table;
	margin:0 auto;
}

#header li{
	display:table-cell;	/*右寄せで横並び*/
    vertical-align: bottom;
	list-style: none;
	width:200px;
}

#header_hajimete{
	background-image:url(/img/rd-header/hajimete.png);
	background-repeat:no-repeat;
	background-position:center;
}

#header_cart{
	background-image:url(/img/rd-header/cart.png);
	background-repeat:no-repeat;
	background-position:center;
}

#header_ichiran{
	background-image:url(/img/rd-header/ichiran.png);
	background-repeat:no-repeat;
	background-position:center;
}

#header_home{
	background-image:url(/img/rd-header/home.png);
	background-repeat:no-repeat;
	background-position:center;
}

#header_hajimete a,#header_cart a,#header_ichiran a,#header_home a{
	display:block;
	width: 100%;
	height: 100%;
}


/*--------------------------------------------------------
■コピーライト部分
--------------------------------------------------------*/

#copyright{
width: 100%;
background-color:#565620;
color:#FFF;
padding:5px 0 5px 0;
padding:0.5em 0 0.5em 0;
text-align:center;
font-size:12px;
font-size:1.2rem;
}

#copyright span{
display:inline-block;}



/*--------------------------------------------------------
■ページトップヘ戻るボタン
--------------------------------------------------------*/

.pagetop{
	display: none; position: fixed; bottom: 30px; right: 15px;
}

.pagetop a {
display: block;
background-color: #ccc;
text-align: center; color:
#222; font-size: 12px;
text-decoration: none;
padding: 5px 10px;
filter:alpha(opacity=50);
-moz-opacity: 0.5; opacity: 0.5;
}

.pagetop a:hover {
display: block;
background-color: #b2d1fb;
text-align: center;
color: #fff;
font-size: 12px;
text-decoration: none;
padding:5px 10px;
filter:alpha(opacity=50);
-moz-opacity: 0.5; opacity: 0.5;
}


/*--------------------------------------------------------
■見出し＆テキスト
--------------------------------------------------------*/

.b{
	font-weight:bold;
}

.f12{
	font-size:12px;
	font-size:1.2rem;
}

.f13{
	font-size:13px;
	font-size:1.3rem;
}

.f15{
	font-size:15px;
	font-size:1.5rem;
}

.f16{
	font-size:16px;
	font-size:1.6rem;
}


.f17{
	font-size:17px;
	font-size:1.7rem;
}

.f18{
	font-size:18px;
	font-size:1.8rem;
}

.f19{
	font-size:18px;
	font-size:1.8rem;
}

.f20{
	font-size:20px;
	font-size:2.0rem;
}

.f30{
	font-size:30px;
	font-size:3.0rem;
}

.glow{
	text-shadow: 
	2px 2px 2px #fff,
	2px -2px 2px #fff,
	-2px 2px 2px #fff,
	-2px -2px 2px #fff;
}


/*テキストカラー　若い番号が濃い*/
/*.pink1{
color:#f64a8e;
}*/

*.pink{
color:#f64a8e;
}*

.pink1{
box-shadow:0px -6px 5px -5px #f64a8e inset,0px 8px 4px -8px #f5929b;
font-weight: normal !important;
}

/*.pink2{
color:#f5929b;
}*/

.pink2{
box-shadow:0px -6px 5px -5px #87B5E3 inset,0px 8px 4px -8px #87B5E3;
font-weight: normal !important;
}

.green1{
color:#6C4818;
}

.green2{
color:#84c146;
}

/*.orange{
color:#ff6600;
}*/

*.orange{
color:#6C4818;
}

.brown{
	color:#6C4818;
}

.black{
	color:#222222;
}

.gray{
	color:#7c7c7c;
}

.aqua{
	color:#3B8FE4;
}

.wine{
color:#ae0f00;
}


/*テキストボタン装飾*/
.button-pink {
	width:94%;
	display: inline-block;
	margin:30px 3% 0 3%;
	padding: .65em 0;
	background: rgb(255,134,160); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(255,134,160,1) 0%, rgba(255,81,118,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,134,160,1) 0%,rgba(255,81,118,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,134,160,1) 0%,rgba(255,81,118,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff86a0', endColorstr='#ff5176',GradientType=0 ); /* IE6-9 */
	border: 1px solid #FF516E;	
	border-radius: 20px;
	color: #fff;
	text-decoration: none;
	text-align: center;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.button-pink a {
	display:block;
}

.button-pink:link{
color:#fff;
font-weight:bold;
text-decoration:none;
}

.button-pink:visited{
color:#fff;
text-decoration:none;
}

.button-pink:hover {
	background-color:#fff;
	opacity:0.5;
	filter: alpha(opacity=50);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=50)";  /* ie 8 */
	-moz-opacity:0.5;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.5;              /* Safari 1.x */
}

/*--------------------------------------------------------
■余白＆文字寄せ
--------------------------------------------------------*/

.mg-b0{
	margin-bottom:0px;
	margin-bottom:0em;
}

.mg-b05{
	margin-bottom:5px;
	margin-bottom:0.5rem;
}

.mg-b1{
	margin-bottom:10px;
	margin-bottom:1rem;
}

.mg-b2{
	margin-bottom:20px;
	margin-bottom:2rem;
}

.mg-b3{
	margin-bottom:30px;
	margin-bottom:3rem;
}

.mg-b5{
	margin-bottom:50px;
	margin-bottom:5rem;
}

.mg-t1{
	margin-top:10px;
	margin-top:1rem;
}

.mg-t2{
	margin-top:20px;
	margin-top:2rem;
}

.mg-t3{
	margin-top:30px;
	margin-top:3rem;
}

.center{
	text-align:center;
}

.pd-b1{
	padding-bottom:10px;
	padding-bottom:1rem;
}

.pd-t1{
	padding-top:10px;
	padding-top:1rem;
}

.pd-t2{
	padding-top:20px;
	padding-top:2rem;
}

.right{
	text-align:right;
}

.left{
	text-align:left;
}


/*--------------------------------------------------------
■その他
--------------------------------------------------------*/

/*▼クリア*/

.clearfix:after {
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";
}
.clearfix {
	min-height: 1px; /*IE6、7対策*/
}
* html .clearfix {
	height: 1px;
	/*\*//*/ /*MAC IE5.x対策*/
	height: auto;
	overflow: hidden;
	/**/
}

.clear{
	clear:both;
	visibility:hidden;
	height:0;
}


/*▼ホバー時に透過*/

.opacity:hover {
	background-color:#fff;
	opacity:0.5;
	filter: alpha(opacity=50);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=50)";  /* ie 8 */
	-moz-opacity:0.5;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.5;              /* Safari 1.x */
}


/*▼要素の内側にボーダー*/

.boxsizing {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
}

/*▼画像の下の謎の余白消し */

.img-margin{  
	display: block;
	margin: 0 auto;
	padding: 0;
}


/*▼水平線スタイル*/

hr.style1 {
	height: 1px;
	border: 0;
	border-top: 1px dashed #ddd;
	margin:20px 0 20px 0;
	margin:2rem 0 2rem 0;
}


/*▼引用スタイル*/

/*お客さまからの問い合わせ*/
blockquote.mail {
position: relative;
margin: 2rem 0;
padding: 5rem 2rem 2rem 2rem;
border: 1px solid #CCC;
border-radius: 2px;
box-shadow: 0px 1px 3px rgba(0,0,0,.2);
}
blockquote.mail:before,
blockquote.mail:after{
position: absolute;

}
blockquote.mail:before{
font-family: FontAwesome;
top: 0px;
left: 20px;
content: '\f0e0';
font-size: 3rem;
opacity: .5;
}
blockquote.mail:after{
font-size: 4rem;
opacity: .1;
bottom: 0px;
right: 20px;
content: '”';
}


/*普通の引用*/
blockquote.normal {
position: relative;
margin: 2rem 0;
padding: 2rem;
border: 1px solid #CCC;
border-radius: 2px;
box-shadow: 0px 1px 3px rgba(0,0,0,.2);
}



/*▼茶色の枠線付きリスト*/

ul.style1,ul.another-faq,ul.another-voice {
    border: 2px solid #4B3212;
    border-radius: 4px;
    margin: 2rem 0;
    padding: 2rem;
    position: relative;
}
ul.style1::before,ul.another-faq::before,ul.another-voice::before {
    background-color: #fff;
    color: #4B3212;
    font-weight: bold;
    left: 1rem;
    padding: 0 1rem;
    position: absolute;
    top: -1.2rem;
}

ul.style1::before {
    content: "CHECK!";	
}

ul.another-faq::before {
    content: "★その他のＦＡＱ";	
}

ul.another-voice::before {
    content: "★その他の口コミ＆レビュー";	
}


.style1 li,.another-faq li,.another-voice li{
	line-height:30px;
	line-height:3rem;
	list-style:none;
	padding-left:2rem;
	text-indent:-2rem;
}

.style1 li:before,.another-faq li:before,.another-voice li:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 4px;
    margin-left: 4px;
    border: transparent solid 5px;
    border-left-color: #4B3212;
}


/* ブルーのリスト*/
ul.list-aqua{
margin:20px 0 30px 0;
margin:2rem 0 3rem 0;
list-style-image:url(/img/listmark/bule.png); 
}

ul.list-aqua li{
margin-left:20px;
margin-left:2rem;
line-height:25px;
line-height:2.5rem;
}

ol.list-aqua{
margin:20px 0 30px 0;
margin:2rem 0 3rem 0;
}

ol.list-aqua li{
margin-left:30px;
margin-left:3rem;
line-height:25px;
line-height:2.5rem;
}

.point a {
	background:url(/img/common/point.png) no-repeat right center;
	padding-right:30px;
}


/* 商品誘導のリスト*/

ul.list-products{
margin:10px 0 30px 0;
margin:1rem 0 3rem 0;
list-style-image:url(/img/common/icon-check02.png); 
}

ul.list-products li{
margin-left:45px;
margin-left:4.5rem;
line-height:24px;
line-height:2.4rem;
/*font-size:16px;
font-size:1.6rem;*/
font-weight:bold;
}


/* 監修者紹介*/

.supervision{
	width:92%;
	margin:0 auto;
	border: 2px solid #f5f5f5;
    border-radius: 4px;
    position: relative;
	line-height:1.5;
}

.pic{
	width:35%;
	padding: 5%;
}

.intro{
	width:90%;
	padding: 0 5% 5% 5%;
}


/* ＣＴＡ風ボタン*/
.sq_btn {
    display: inline-block;
    padding: 0.3em 1em;
    text-decoration: none;
	background: #5BADFF;
    color: #ffffff;
    border: solid 2px #5BADFF;
    border-radius: 3px;
    transition: .4s;
	text-align:center;
	margin-top:30px;
	margin-top:3.0rem;
}

.sq_btn:link {
     text-decoration: none;
	 color: #ffffff;
}

.sq_btn:visited {
     text-decoration: none;
	 color: #ffffff;
}

.sq_btn:hover {
    color: #5BADFF;
	background: #ffffff;
}

.sq_btn:before{
	content: "\f138";
	font-family: FontAwesome;
	padding-right:5px;
}

/* ボックス（ページ最後のリンクなど） */
.box {
    position: relative;
    margin: 5rem 4% 3rem 4%;
    padding: 2rem 2rem;
    border: solid 2px #3B8FE4;
    border-radius: 4px;
}
.box .box-title {
    position: absolute;
    display: inline-block;
    top: -7px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    background: #FFF;
    color: #3B8FE4;
    font-weight: bold;
}
.box p {
    margin: 0; 
    padding: 0;
}

.box ul li{
	line-height:30px;
	line-height:3rem;
	list-style:none;
	padding-left:2rem;
	text-indent:-2rem;
}

.box ul li:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 4px;
    margin-left: 4px;
    border: transparent solid 5px;
    border-left-color: #3B8FE4;
}

/* ボックス（番号付きリスト） */
.box ol {
  counter-reset: my-counter;
  list-style: none;
  padding-top:1rem;
}
 

.box ol li{
padding: 0;
  margin:0;
  margin-bottom: 10px;
  padding-left: 30px;
  position: relative;
}

.box ol li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  background-color: #3B8FE4;
  color: #fff;
  display: block;
  float: left;
  line-height: 22px;
  margin-left: -30px;
  text-align: center;
  height: 22px;
  width: 22px;
  border-radius: 50%;
}


/* 吹き出し */
.speech {
  margin-bottom: 50px;
}
.speech-img-left {
  margin: 0;
  float: left;
  width: 100px;
  height: 100px;
  line-height: 100%;
}
.speech-img-right {
  margin: 0;
  float: right;
  width: 100px;
  height: 100px;
  line-height: 100%;
}
.speech figure img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  margin: 0;
}
.speech-img-description {
  padding: 0;
  font-size: 12px;
  text-align: center;
}
.speech-text-right {
  position: relative;
  margin: 10px 0px 10px 115px;
  padding: 10px 15px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: #fff;
}
.speech-text-left {
  position: relative;
  margin: 10px 115px 10px 0px;
  padding: 10px 15px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: #fff;
}
p.speech-text {
  margin: 0 0 20px;
}
p.speech-text:last-child {
  margin-bottom: 0;
}
.speech-text-right:before {
  position: absolute;
  content: '';
  border: 8px solid transparent;
  border-right: 10px solid #ccc;
  top: 15px;
  left: -18px;
}
.speech-text-right:after {
  position: absolute;
  content: '';
  border: 8px solid transparent;
  border-right: 10px solid #fff;
  top: 15px;
  left: -17px;
  z-index: 1;
}
.speech-text-left:before {
  position: absolute;
  content: '';
  border: 8px solid transparent;
  border-left: 10px solid #ccc;
  top: 15px;
  right: -18px;
}
.speech-text-left:after {
  position: absolute;
  content: '';
  border: 8px solid transparent;
  border-left: 10px solid #fff;
  top: 15px;
  right: -17px;
  z-index: 1;
}
.speech:after,.speech:before {
  clear: both;
  content: "";
  display: block;
}


/* フローチャート */
.flow {
margin: 0 auto 50px;
}

.flow .flow_box {
margin: 0 auto 61px;
width: 80%;
padding: 10px;
border: 2px solid #ccc;
-webkit-border-radius: 5px;
border-radius: 4px;
position: relative;
}

.flow .flow_box span{
/* font-size: 1.6em;*/ /* テキストの指定 */
font-weight: bold; /* テキストの指定 */
}

.flow .flow_box:after {
border-top: 25px solid #EA96BC;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
content: "";
position: absolute;
bottom: -42px; /* 三角形の高さ＋ボックスのボーダーをマイナスに */
left: 50%;/* 中央寄せに使用 */
margin-left: -50px; /* 中央寄せに使用 */
}

.flow .flow_box:last-child:after {
border: none; /* 最後のボックスだけ三角形を表示しない */
}


/*目次のデザイン変更*/
.mokuji {
	margin-top: 30px;
    margin-left: 0;
    padding: 15px 15px 15px 20px;  /* 枠内の余白(上右下左) */
    border:dotted 1px #503409; /* 線の種類と色 */
    background:#fff;  /* 背景 */
	border-radius: 5px;
}
.mokuji:before {
    content: "目次";
    font-size: 15px;
    font-weight:bold;   /* 文字の太さ　通常はnormal */
    color:#503409;  /* 文字の色 */
}
/*大見出し*/
.mokuji li{
    font-weight:normal; /* 通常はnormal */
    list-style-type:decimal;   /* マークの種類 */
	padding: 5px 0 5px 0 ;
	border-top: dotted 1px #ccc;
	list-style-position: inside;
	padding-left: 5px;
}

/*中見出し*/
.mokuji li ul li{
    margin-left:20px;
    font-weight:normal;    
    list-style-type:disc;
	border:none;
	padding: 0;
}

/*小見出し*/
.mokuji li ul li ul li{
    list-style-type:circle;
	border : none;
}


/* テーブル組み */
table, th, td {
  border-collapse: collapse;
  border: 1px solid #ccc;
  line-height: 1.5;
}

table.style1 th {
  vertical-align: top;
  text-align:center;
}
table.style1 td {
  vertical-align: top;
  text-align:center;
}


/*▼商品誘導リンク product-link pl*/

/* トライアル */

.pl01{
	position: relative;
	width:199px;
	height:69px;
	background-image: url(img/side/left01_tr.jpg);
	font-size:12px;
	font-size:1.2rem;
	margin-bottom:10px;
	margin-bottom:1rem;
}

/* 洗顔石鹸 */

.pl02{
	position: relative;
	width:199px;
	height:69px;
	background-image: url(img/side/left01_so.jpg);
	font-size:12px;
	font-size:1.2rem;
	margin-bottom:10px;
	margin-bottom:1rem;
}

/* 化粧水 */

.pl03{
	position: relative;
	width:199px;
	height:69px;
	background-image: url(img/side/left01_lo.jpg);
	font-size:12px;
	font-size:1.2rem;
	margin-bottom:10px;
	margin-bottom:1rem;
}


/* 美容液 */

.pl04{
	position: relative;
	width:199px;
	height:69px;
	background-image: url(img/side/left01_es.jpg);
	font-size:12px;
	font-size:1.2rem;
	margin-bottom:10px;
	margin-bottom:1rem;
}

/* 美容オイル */

.pl05{
	position: relative;
	width:199px;
	height:69px;
	background-image: url(img/side/left01_oi.jpg);
	font-size:12px;
	font-size:1.2rem;
	margin-bottom:10px;
	margin-bottom:1rem;
}

/* クリーム */

.pl06{
	position: relative;
	width:199px;
	height:69px;
	background-image: url(img/side/left01_cr.jpg);
	font-size:12px;
	font-size:1.2rem;
	margin-bottom:10px;
	margin-bottom:1rem;
}

.pl-text{
	position:relative;
	top: 30%;  
    left: 37.5%;
	font-size:12px;
	font-size:1.2rem;
}

.pl01 a, .pl02 a, .pl03 a, .pl04 a, .pl05 a, .pl06 a{
	text-decoration:none;
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
}

/*--------------------------------------------------------
■レスポンシブ設定
--------------------------------------------------------*/


@media screen and (max-width:479px){
    /*　スマホ縦だけの設定　*/


/*ロゴ横テキスト非表示*/
#logo-c{
	display:none;
}

#logo-r{
	display:none;
}

#g-nav{
	display:none;
}

#sub-nav{
	display:none;
}

#search{
	display:none;
}

#double-line{
	display:none;
}


#side-bar{
	display:none;
}

.img-right,.img-left{
	width:35%;
}

.sns-pic img{
	height:150px;
	object-fit: cover;
}

.sns-text01{
	padding:0 10px 0 10px;
	font-size:13px;
}

#sns-text02{
	display:none;
}


}

@media screen and (min-width:480px) and (max-width:599px){
	    /*　スマホ横だけの設定　*/

#logo-c{
	width:65%;
}

#logo-r{
	display:none;
}

#g-nav{
	display:none;
}

#sub-nav{
	display:none;
}

#pc-header{
	padding:10px 0 0 0;
	padding:1rem 0 0 0;
}

#search{
	display:none;
}

#double-line{
	display:none;
}

#side-bar{
	display:none;
}

#sns-text02{
	display:none;
}

}

@media screen and (min-width:480px){
	    /*　スマホ横以上共通設定　*/

#pc-header{
	padding:10px 0 0 0;
	padding:1em 0 0 0;
}

/*▼ロゴ表示部分*/

#logo-l{
	width:30%;
	float:left;
}


#logo-c{
	width:53%;
	padding:0 2.5% 0 2.5%;
	float:left;
}

#logo-r{
	width:12%;
	float:left;
}

.pic{
	float:left;
	width:24%;
	padding: 3%;
}

.intro{
	float:left;
	width:65%;
	padding: 3% 3% 3% 2%;
}

}


/*--------------------------------------------------------
■PC版・タブレット版表示
--------------------------------------------------------*/

@media screen and (min-width:600px){
    /*　タブレット版以上共通設定　*/


/*固定ヘッダとサブナビの高さ調整*/
#wrapper {
	padding-top:24px;
}

/*固定ヘッダ非表示*/
#header{
		display: none;
}

/*----------------------------------
■ＰＣ＆タブレット版サブナビ部分
-----------------------------------*/

#sub-nav{
	width: 100%;
	position: absolute;  
	top: 0;  
	margin:0 auto;
	height: 24px;
	background-image: url(/img/header/header.gif);
	background-repeat: repeat-x;
	text-align:right;
}

#sub-nav ul{
	position:relative;
	display:block;
	color:#fff;
	font-size:12px;
	font-size:1.2rem;
}

#sub-nav li{
	display:inline-block;	/*右寄せで横並び*/
	vertical-align:middle;
	background: url(/img/header/sub_nav_list.gif) no-repeat;
	padding-left:1.5%;
	padding-right:2%;
}

#sub-nav a {
color: #fff;
text-decoration: none;
}

/*----------------------------------
■ＰＣ＆タブレット版グローバルナビ部分
-----------------------------------*/

#g-nav{
	clear:both;
	display:block;
	background-color:#565620;
	margin-bottom:7.5px;
	margin-bottom:0.75rem;
}

#g-nav ul{
	list-style:none;
	display:table;
	table-layout: fixed;
	text-align:center;
	height:36px;
	width:100%;
}
	
#g-nav li{
	display:table-cell;
	vertical-align:middle;
	width:15%;
}

.g-nav-bg{
	background-image:url(img/header/g-nav.gif);
	background-repeat:no-repeat;
}

#g-nav a {
color: #fff;
text-decoration: none;
}

/*----------------------------------
■パンくずリンク＆検索窓部分
-----------------------------------*/

#bread-search{
	margin-bottom:0;
	background-color:transparent;
	color:#555;
	padding:0 2% 0 2%;
}

#breadcrumb{
	float:left;
	width:70%;
	padding-top:5px;
	padding-top:0.5rem;
}


#search{
	float:left;
	width:30%;
}

/*▼二本線部分*/
#double-line{
	margin-bottom:10px;
	margin-bottom:1rem;
}

#breadcrumb a:link{
color:#555;
text-decoration:underline;
}

#breadcrumb a:visited{
color:#666666;
text-decoration:underline;
}

#breadcrumb a:hover{
color:#ff6600;
text-decoration:underline;
}


/* yahooカスタムサーチ */

#srchBox
{
width:298px;
_width:296px;
/*margin-bottom:10px;*/
background-color:#FFFFFF;
/*border-style:solid;
border-width:1px;*/
border-color:#EEEEEE;
color:#000000;
text-align:left;
}
#srchBox *
{
margin:0;
padding:0;
font-size:13px;
*font-size:small;
*font:x-small;
}
#srchBox a img
{
border:none;
}
#srchBox #srch
{
padding:/*1*/0px 10px 0 /*1*/0px;
}
#srchBox #srch #srchForm
{
white-space:nowrap;
}
#srchBox #srchInput
{
width:188px;
margin-right:6px;
vertical-align:bottom;
}
#srchBox #srchBtn
{
width:80px;
}
*html #srchBox #srchBtn
{
padding-top:2px;
}
*:first-child+html #srchBox #srchBtn
{
padding-top:2px;
}
#srchBox ul
{
margin-top:6px;
text-align:left;
}
#srchBox li
{
list-style-type:none;
display:inline;
zoom:1;
padding-right:10px;
}
#srchBox li input
{
zoom:1;
margin-right:2px;
_margin:-4px 0 -4px -4px;
vertical-align:middle;
border:0;
}
*:+html #srchBox li input
{
margin:-4px 0 -4px -4px;
}
#srchBox #srchLogo
{
margin:6px 6px 6px 0;
text-align:right;
}
#srchBox #srchLogo a
{
color:#666666;
text-decoration:none;
font-size:85%;
}
#srchBox #srchLogo a:hover
{
text-decoration:underline;
}
#srchBox.watermark
{
padding-bottom: 6px;
}
#srchBox.watermark #srchInput
{
padding:1px 1px 2px 1px;
border:1px solid #a5acb2;
background: #fff url(https://s.yimg.jp/images/search/customsearch/yjlogo/yjlogo_type4.gif) center center no-repeat;
}
#srchBox.watermark #srchInput.nomark
{
background: #fff;
}
#srchBox.watermark #srchLogo
{
display: none;
}

/*----------------------------------
■メイン部分
-----------------------------------*/

#main{
	width:72.8%;
	padding:0 2.1% 0 4%;
	float:right;
}

.article-half-1{ /*スマホ版の１列を2分割　左側*/
	width:44.75%;
	float:left;
	padding-right:1.25%
}

.article-half-2{ /*スマホ版の１列を2分割　左側*/
	width:44.75%;
	float:left;
	padding-left:1.25%
}

.article1-3-1{ /*スマホ版の１列を3分割　左側*/
	width:29.8%;
	padding:0 1.25% 0 2.5%;
	float:left;
}

.article1-3-2{ /*真ん中*/
	width:29.8%;
	padding:0 1.25% 0 1.25%;
	float:left;
}

.article1-3-3{ /*右側*/
	width:29.8%;
	padding:0 2.5% 0 1.25%;
	float:left;
}

.border-r{
	border-right:dashed 1px #ccc;
}



.article2-3-1,.article2-3-2{ /*スマホ版の2列をＰＣ版で3列*/
	width:31.3%;
	padding:0 1% 0 1%;
	float:left;
}


/*----------------------------------
■商品一覧ページ部分
-----------------------------------*/

.article-fabric{
	border-bottom:1px dotted #ccc;
}

.fabric-background,.fabric-background-r{
	width:50%;
	float:left;
	border-bottom:none;
}

.fabric-background-r{
	border-left:0.5px dotted #ccc;
}

.fabric-background{
	border-right:0.5px dotted #ccc;
}

/*----------------------------------
■ランディングページ部分
-----------------------------------*/

.pc-banner{
	display:block;
}


/*----------------------------------
■カテゴリリンク部分
-----------------------------------*/

.category-text-cell{
	font-size:14px;
	font-size:1.4rem;
}


/*----------------------------------
■ＰＣ＆タブレット版サイドバー部分
-----------------------------------*/

#side-bar{
	width:21.1%;
	float:left;
}

#side-bar li{
	font-size:12px;
	font-size:1.2rem;
}

#side-bar img{  /* 画像の下の謎の余白消し */
	display: block;
	margin: 0 auto;
	padding: 0;
}

/* 商品カテゴリ */
#side-product{
	margin-bottom:30px;
	margin-bottom:3rem;
	list-style:none;
}

.side-product-cell{ /* 下だけボーダーなし */
position:relative;
width:auto;
border-left:solid 1px #c9c9c9;
border-right:solid 1px #c9c9c9;
border-top:solid 1px #c9c9c9;
border-bottom:none;
}

.side-product02{ /* 全部ボーダーあり */
position:relative;
width:auto;
border:solid 1px #c9c9c9;
}

.side_absolute{
	position:absolute;
	top: 65%;  
    left: 10%;
	font-size:10px;
	font-size:1rem;
}

.side_absolute02{
	position:absolute;
	top: 24%;  
    left: 37.5%;
	font-size:12px;
	font-size:1.2rem;
}

a.side_absolute02{text-decoration:none};

/* ピュアノーブルの化粧品について＆インフォーメーション */
ul.side-about{
	border:solid 1px #c9c9c9;
	margin-bottom:30px;
	margin-bottom:3rem;
}

li.side-about-cell{
margin-top:15px;
margin-top:1.5rem;
margin-left:20px;
margin-left:2rem;
list-style-image:url("img/side/mark.gif");
}

li.side-about-cell02{
margin-top:15px;
margin-top:1.5rem;
margin-left:20px;
margin-left:2rem;
/*margin-bottom:5px;
margin-bottom:0.5rem;*/
*margin-bottom:15px;
margin-bottom:1.5rem;
list-style-image:url("img/side/mark.gif");
}

/* サイドバーのバナー */
#side-banner{
	margin-bottom:20px;
	margin-bottom:2rem;
	list-style:none;	
}

#side-banner li{
	margin-bottom:10px;
	margin-bottom:1rem;
}

/* 非表示設定 */
#footer-send-fee,#footer-inquiry,#footer-search{
	display:none;
}

/* フッター部分 */
#sns,#footer-link{
	background-color:transparent;
}

#sns{
	width:39%;
	padding-left:30%;
	padding-right:30%;
	margin-left:1%
}

}


/*--------------------------------------------------------
■ＰＣ版表示
--------------------------------------------------------*/

/*メイン部分*/

@media screen and (min-width:960px){
    /*　ＰＣ版だけの設定　*/


/*メイン部分*/

#shadow{
	width:990px;
	margin:0 auto;
	background-image: url(img/header/back_02.gif);
	background-repeat: repeat-y;
}

#pc-header,#mid{ /* PC幅950px */
	width:96%;
	margin:0 auto;
	padding-left:1%;
}

#logo-l{

}

#logo-c{

}

#logo-r{

}

#sub-nav ul{
	width:990px;
	margin:0 auto;
}

#bread-search{
	margin-left:0;
}

.sns-share{
	margin-bottom:30px;
	margin-bottom:3rem;
}

#sns{
	width:29%;
	padding-left:35%;
	padding-right:35%;
	margin-left:1%
}

}