@charset "utf-8";

/*-----------------------------------------------------	*/
/*	 スマホ用定義
/*-----------------------------------------------------	*/

@media screen and (max-width: 640px) {
/* 基本スタイル
=============================================== */

*{
	box-sizing: border-box;
}
img {
	max-width: 100%!important;
}
.dn {
	display: none;
}
#main {
	width: 100%!important;
	float: none!important;
	margin: 0px 0px 50px!important;
}
#sub {
	width: 100%!important;
	float: none!important;
	margin: 0px!important;
	clear:both!important;
}
#sub #sidemenu {
	width: 100%;
	box-sizing: border-box;
}
#contents {
  width: 100%;
  padding: 60px 10px 50px;
  box-sizing: border-box;
}
#home #contents {
  padding-top: 90px;
}
.tbl th, .tbl td {
	display: block;
	width: auto;
}

  /* ヘッダー
=============================================== */

#gHeader {
	height: 60px!important;
	z-index:100000;
}
#gHeader #gHeadeInner {
	width:100%;
	height: 60px;
}
#gHeader h1 {
  margin: 0;
  position: relative;
  left: auto;
  top: auto;
	text-align: center;
}
#gHeader h1 img {
  margin-top: 10px;
	height: 40px;
  width: auto;
}


/* グローバルナビ
=============================================== */

#gHeader #gNav {
	width: 100%!important;
	position: absolute!important;
	right: 0px!important;
	top: 0px!important;
	z-index:100000;
}
#gHeader #gNav ul {
	display:none;
	margin:0;
	padding:0;
	width: 100%!important;
	position: absolute;
	left: 0px!important;
	top: 60px!important;
}
#gHeader #gNav li {
	width: 100%!important;
	font-size: 12px;
	padding: 0!important;
	margin: 0px!important;
	text-align:center!important;
}
#gHeader #gNav li+li {
	margin: 0px!important;
	border-top: 1px solid #7b6d65;
	border-left: none!important;
}
#gHeader #gNav li a {
	display: block;
	width: 100%!important;
	background: #706058!important;
	padding: 20px 10px 17px!important;
	box-sizing: border-box!important;
	border-radius: 0px!important;
	color: #FFF;
}
#gHeader #gNav li a:hover {
	background: #9e866a!important;
	color: #fff!important;
	text-decoration: none!important;
}
#gHeader #gNav li span {
	color: #A39289!important;
}




#toggle_gNav {
	display: block;
}
#toggle_gNav a {
	display: block;
	height: 60px;
	width: 60px;
	position: absolute;
	    top: 0px;
	    right: 0px;
	padding: 0px;
  z-index:200000;
}
#toggle_gNav  a:active,
#toggle_gNav  a:hover {
      color: #4F3524;
}






/* フッター
=============================================== */

#gFooter {
  min-height: auto;
  margin: 0px auto;
  width: 100%;
  padding: 30px 0 0 0;
}
#gFooterInner {
  width: 100%;
}
#gFooter #fNav dl {
	float: none;
	padding: 0px 20px;
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}
#gFooter #fNav dd {
  padding-left: 10px;
}
#gFooter #fNav dl+dl {
  border-left: none;
}
#gFooter #copyright {
  font-size: 10px;
    padding: 20px 5px;
}


/* サイドメニュー
=============================================== */

#sub #searchForm .search input[type="text"] {
	right: 0;
	width: 100%;
}
#sub #categoryMenu li {
	font-size: 12px;

}



/* 共通
=============================================== */

#contents #title h2 {
	font: normal 26px/1.4 "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	margin: 0px 0px 20px;
}

#pagetop {
	width: 10%;
}


/* 共通表
=============================================== */

dl.table dt {
	float: none;
	padding: 15px 10px 5px;
	font-size: 11px;
	font-weight: bold;
}
dl.table dd {
	padding: 0px 10px 15px;
}
dl.table dd:nth-child(4n+2) {
	background: none;
}



/* パンくずナビ
=============================================== */

#topicpath {
	width: 100%;
	padding-top: 20px;
	margin-bottom: 40px;
}

/* コンテンツタイトル
=============================================== */

#cTitle {
	width: 100%;
	height: auto;
	padding: 25px 10px 22px;
	background: #A29888;
	color: #FFF;
	margin: 0px -10px;
	box-sizing: content-box;
	border-bottom: none;
}
#cTitle h1 {
	font-size: 16px;
	margin: 0px 0px 7px;
}
#cTitle p {
	font-size: 10px;
	color: #CFCAC2;
}

/* コンテンツ用ナビゲーション
=============================================== */

#cNav {
	border-top: 1px solid #e8e8e8;
	text-align: center;
	overflow: hidden;
	margin: 0px -10px 50px;
}
#cNav ul {
	display: block;
	width: 100%;
	margin:0;
}
#cNav li {
	display: block;
	float: left;
	width: 50%;
	box-sizing: border-box;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
	line-height: 50px;
}
#cNav li:nth-child(odd) {
	border-right: 1px solid #e8e8e8;
}


/* 共通スタイル
=============================================== */

h3.ttl {
	font-size: 18px;
}

#pNav li{
  display: inline-block;
  width: 100%;
}
#pNav li+li{
  margin: 10px 0 0;
}


/* アロマガイド
=============================================== */

#aromaguide #aromaguideList ul {
	width: 100%;
}
#aromaguide #aromaguideList li {
	float: none;
	width: 100%;
	margin: 0px 0px 50px 0px;
}
#aromaguide #visual {
	margin: 0px 0px 40px;
}
#aromaguide #entry {
	clear: both;
	overflow: hidden;
	width:100%;
}
#aromaguide #entry h2 {
	margin: 0 0 30px;
	font-size: 20px;
}
#aromaguide #recipe {
	width: 100%;
	float: none;
	padding: 20px;
	margin: 0px 0px 40px;
}
#aromaguide #recipe h3 {
	font-size: 16px;
	margin: 0px 0px 10px;
	color: #4f3524;
}
#aromaguide #recipe dt {
	clear: both;
	float: none;
	padding: 15px 0px 0px 5px;
}
#aromaguide #recipe dd {
	padding: 0px 5px 15px 0px;
}

/* キャンペーン
=============================================== */

#campaign #campaignList ul {
	width: 100%;
}
#campaign #campaignList li {
	float: none;
	width: 100%;
	margin-bottom: 40px;
}



/* アロマテラピー101
=============================================== */

#aromatherapy101 .chapter+.chapter {
	margin-top:50px;
}
#aromatherapy101 .chapter .visual {
	float: none;
}
#aromatherapy101 .chapter .visual figure {
	margin: 0px 0px 30px;
}
#aromatherapy101 .chapter .text {
	float: none;
	width: 100%;
}
#aromatherapy101 .chapter h2 {
	margin: 30px 0px;
	color: #4f3524;
	font: normal 26px 'Libre Baskerville', "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#aromatherapy101 .chapter .visual .sectionList {
	display: none;
}



/* エッセンスについて
=============================================== */

#about #contentsList {
	width: 100%;
}
#about #contentsList ul {
	width: 100%;
}
#about #contentsList li {
	float: none;
	width: 100%;
	margin: 0px 0px 10px 0px;
}
#about #contentsList li figure img {
	height: 100px;
	max-width:240px!important;
	position: absolute;
	margin-left:-60px
}
#about #contentsList li .text {
	padding: 0px 20px;
}
#about #contentsList li {
	display: table;
	width: 100%;
}
#about #contentsList li figure {
	display: table-cell;
	width:100px;
	height:100px;
	height: auto;
	position:relative;
	overflow: hidden;
}
#about #contentsList li .text {
	display: table-cell;
	vertical-align: middle;
	height:100px;
}
#about #contentsList li .text h3 {
	font-size: 13px;
}
#about #contentsList li .text p {
  font-size: 11px;
}


/* メッセージ 日本のみなさまへ
=============================================== */

#about.message #ceo #photo {
	width: 80%;
	float: none;
	margin: 0 auto 20px;
}
#about.message #ceo #text {
	float: none;
	width: 100%;
}
#about.message #ceo #text h2 {
	font-size: 22px;
}
#about.message #ceo #text .sign {
	text-align: right;
	margin: 40px 0px 0px;
}
#about.message #ceo #text .sign {
	text-align: right;
	margin: 40px 0px 0px;
}
#about.message #featureList {
	width: 100%;
}
#about.message #featureList ul {
	width: 100%;
	margin-bottom: -50px;
}
#about.message #featureList li {
	float: nene;
	width: 100%;
	margin: 0px 0px 50px 0px;
}
#about.message #featureList li figure {
	text-align:center;
}
#about.message #featureList li .text {
	min-height: 1em !important;
}






/* エッセンスのストーリー
=============================================== */

#about.story #outline {
	text-align: left;
	margin: 100px 0px 40px;
}
#about.story #outline h2 {
	text-align: center;
	font-size: 28px;
	margin:0;
}
#about.story #outline p br {
	display: none;
}
#about.story #outline figure {
  margin: 50px -10px 40px;
}
#about.story #story {
	margin-top:40px;
}
#about.story #story #photo {
	margin: 0px 0px 40px;
	width: 100%;
	text-align: center;
}
#about.story #story #photo img {
  width: 60%;
}
#about.story #story #text {
	display: block;
	padding: 0px;
	width: 100%;
	height: auto;
	margin: 0px;

}


/* エッセンスのこだわり
=============================================== */
#about.quality .messageSec {
	text-align: left;
	margin: 100px 0px 40px;
}
#about.quality .messageSec h2 {
	text-align: center;
	font-size: 28px;
}
#about.quality .messageSec p br {
	display: none;
}
#about.quality .messageSec figure {
	margin: 50px -10px 40px;
}
#about.quality #approach {
	margin-top:40px;
}
#about.quality #approach #photo {
	display:none;
}
#about.quality #approach #text {
	display: block;
	padding: 40px 30px;
}


LIFE by ESCENTS

#lifeby #visual {
	margin: 0px 0px 30px;
}
#lifeby #outline {
  text-align:left;
}
#lifeby #outline p {
  font-size: 14px;;
}

#lifeby .messageSec {
    margin: 30px 0px 40px;
}
#lifeby .lifebyCat .outline figure {
    display: block;
  text-align: center;
  margin-bottom: 20px;
}
#lifeby .lifebyCat .outline h2 {
    font-size: 24px;
  text-align: center;
}
#lifeby .lifebyCat .outline figure img {
  width: 120px;
}
#lifeby .lifebyCat .outline .text {
    display: block;
    padding-left: 0;
}
#lifeby .lifebyCat .outline p {
    font-size: 14px;
}
#lifeby .essentialOil .product {
    margin: 0 0 10px 0;
    width: 100%;
    float: none;
}
#lifeby .essentialOil .product .text {
    padding: 0 0 0 20px;
}
#lifeby .essentialOil .product figure {
  width: 80px;
}
#lifeby .aromaBrend {
    margin-bottom: 50px;
    background: #fff;
    padding: 30px 20px 0px 20px;
    border: 1px #e5e1d1 solid;
}
#lifeby .aromaBrend .product {
    margin: 0 0 30px 0!important;
    width: 100%;
    float: none;
}
#lifeby .aromaBrend .product figure {
  display: block;
  width: 160px;
  margin-bottom: 20px;
}
#lifeby .aromaBrend .product .text {
  display: block;
    padding: 0;
}
#lifeby .aromaBrend .product .text h4 {
      margin: 0 0 0 0;
}
#lifeby .essentialOil {
    margin-bottom: 20px;
}

/* 製品情報
=============================================== */

#products #outline {
	text-align: left;
}
#products #outline h2 {
	text-align: center;
	font-size: 28px;
}
#products #outline p br {
	display: none;
}
#products #categoryList p {
	text-align: left;
}
#products #categoryList p br {
	display: none;
}
#products #categoryList ul {
	width: 100%;
}
#products #categoryList li {
	float: left;
	width: 48%;
	margin: 0px 4% 20px 0%;
}
#products #categoryList li h3 {
	font-size: 14px;
}
#products #categoryList li figure img {
  width: 100%;
  height: auto;
}
#products #categoryList li a {
	width: 100%;
}
#products #categoryList li a:hover {
	text-decoration: none;
	background: #f7f6f1;
}
#products #categoryList li:nth-child(2n) {
	margin-right: 0;
}


/* 商品一覧
=============================================== */


#productsList ul {
  width: 100%!important;
}
#productsList li {
	float: left!important;
	width: 48%!important;
	margin: 0px 4% 30px 0%!important;
}
#productsList li a {
  width: 100%!important;
}
#productsList li figure {
  width: 100%!important;
  height: auto!important;
}
#productsList li figure img {
  width: 100%!important;
  height: auto!important;
}
#productsList li h4 {
  font-size: 12px;
}
#productsList li a:hover {
	padding: 4%!important;
	margin: -4%!important;
	width: 108%!important;
}
#productsList li:nth-child(3n+1) {
	clear: none!important;
}
#productsList li:nth-child(2n+1) {
	clear: both!important;
}

#productsList li:nth-child(2n) {
	margin-right: 0!important;
}
#productsList .listPager.foot {
	margin: 30px 0 0;
}
#productsList li input {
  margin-top:10px;
    width: 100%;
}


/* 商品詳細
=============================================== */

#products #gallery {
  float: none;
  width: 100%;
  margin-bottom: 30px;
}
#products #gallery #thumbnail li {
	width: 18%;
	height: auto;
}
#products #gallery #thumbnail li+li {
	margin-left: 0.5%;
}
#products #gallery #thumbnail li img {
	width: 100%;
	height: auto;
}
#products #details {
  float: none;
  width: 100%;
  margin-bottom: 0px;
}
#productsList.column4 li,
#productsList.column5 li {
  margin: 0px 25px 40px 0px;
}
#productsList.column4,
#productsList.column5 {
   width: 100%;
}
#productsList.column4 li:nth-child(5n+1),
#productsList.column5 li:nth-child(5n+1) {
	clear: none;
}


/* 会社案内
=============================================== */

#company #contentsList {
	width: 100%;
}
#company #contentsList ul {
	width: 100%;
}
#company #contentsList li {
	float: none;
	width: 100%;
	margin: 0px 0px 10px 0px;
}
#company #contentsList li figure img {
	width:100px;
	height:100px;
}
#company #contentsList li .text {
	padding: 0px 20px;
}
#company #contentsList li {
	display: table;
	width: 100%;
}
#company #contentsList li figure {
	display: table-cell;
	width:100px;
	height:100px;
	height: auto;
	position:relative;
	overflow: hidden;
}
#company #contentsList li .text {
	display: table-cell;
	vertical-align: middle;
	height:100px;
}
#company #contentsList li .text h3 {
	font-size: 13px;
	margin: 5px 0 2px;
}
#company #contentsList li .text p {
  font-size: 11px;
}
#company #contentsList li .text p br {
	display: none;
}
/* 取扱店舗
=============================================== */


#stores .sotoreList+.sotoreList {
	margin-top: 80px;
}
#stores .sotoreList figure {
	width: 100%;
	float: none;
	margin-bottom: 30px;
}
#stores .sotoreList .text {
	width: 100%;
	float: none;
}
#stores .sotoreList h3 {
	border-bottom: 3px solid #E5E1D1;
	margin: 0px 0px 30px;
	color: #4f3524;
	padding-bottom: 20px;
}
#stores .sotoreList .text p {
	line-height: 2;
}
#stores .sotoreList .text dl {
	padding: 0px;
	margin: 30px 0px 0px;
	font-size: 12px;
}
#stores .sotoreList .text dt {
	float: none;
	padding: 12px 5px 5px 5px;
}
#stores .sotoreList .text dd {
	padding: 0px 0px 12px 5px;
	margin: 0px;
}

/* お問い合わせ
=============================================== */

#contact #formArea {
	width: 100%;
}
#contact #formArea dl {
	border-top: 1px solid #e6e5dd;
	padding: 0px;
	margin: 0px;
	font-size: 12px;
}
#contact #formArea dt {
	float: none;
	padding: 15px 10px 5px;
	font-size: 11px;
	font-weight: bold;
}
#contact #formArea dd {
	padding: 0px 10px 15px;
}
#contact #formArea dd:nth-child(4n+2) {
	background: none;
}
#formArea .box100 {
	width: 20%;
}
#formArea .box180 {
	width: 33%;
}
#formArea .box500 {
	width: 100%;
}


/* インフォ・ブログ
=============================================== */

#post #contents {
  width: 100%;
}
#main .entry .title {
  height: auto;
  display: block;
  width: 100%;
}



#main .entry img {
	height: auto!important;
}



/* トップ
=============================================== */


#homeContents {
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
}
#home #productsSec {
	width: 100%;
	padding:0;
	margin-bottom:20px;
}
#home #productsSec ul {
  width: 100%;
}
#home #productsSec li {
  width: 47%;
  margin: 0 0 20px;
}
#home #productsSec li:nth-child(2n) {
  margin-left: 6%;
}
#home #productsSec li h3 {
  font-size: 12px;
  font-weight: normal;
}
#home #productsSec li p {
  display: none;
}
#home #visual {
  height: auto;
  background-position: center center;
  background-size: auto 100%;
  margin-bottom: 30px;
}
#home #visual .inner {
  width: 100%;
  padding: 0px;
}
#home #visual .copy {
  margin: 20% auto;
  width: 100%;
}
#home #visual .copy img {
  margin-top: 5%;
   width: 80%;
}
#home #visual .onlinebtn {
  display: none;
}
#home #visual .mobileapp {
	text-align: center;
	background-color: #4688A2;
}
#home #visual .appstore {
	display: inline-block;
	position: relative;
	top: auto;
	left: auto;
	padding:  10px 0;
}
#home #visual .googleplay {
	display: inline-block;
	position: relative;
	top: auto;
	left: auto;
	padding: 10px 0;
}
#home #visual .appstore img,
#home #visual .googleplay img {
	height: 45px;
}
#home #campaignSec {
  	width: 100%;
    margin: 20px 0;
}
#home #campaignSec ul {
	width: 100%;
	margin: 0px;
  height: auto;
}
#home #campaignSec li  {
  display: inline-block;
}

#home #campaignSec li img {
    height: auto;
}

#home #featureSec {
  width: 100%;
	margin: 0 0 40px;
	border-top: 1px solid #e6e6dc;
  float: none;
  overflow: visible;
}
#home #featureSec ul {
	margin: 0 -10px 0;
}
#home #featureSec li {
	float: none;
	width: 100%;
	text-align: left;
	display:table;
	border-bottom: 1px solid #e6e6dc;
  margin: 0;
}


#home #featureSec li figure {
	margin: 0;
	display: table-cell;
	width:30%;
}
#home #featureSec li .text {
	display: table-cell;
	vertical-align: middle;
	padding-left: 15px;
}
#home #featureSec li h3 {
	margin: 0;
	font-size: 13px;
}
#home #featureSec li .text p {
	display: none;
}
#home #featureSec li a:hover {
	text-decoration: underline;
}
#home #bannerSec {
  clear: both;
  overflow: hidden;
  width: 100%;
  margin: 20px 0 0px;
  padding: 0px 10px;
  text-align: center;
}

#home #informationSec {
	width: 100%;
	padding: 0;
	float: none;
	margin: 0px auto 40px;
}

#home #facebookSec {
	width: 100%;
    float: none;
    overflow: hidden;
    display: none;
}
#home #instagramSec {
    width: 100%;
    float: none;
    text-align:center;
   	margin-bottom:40px;
}

#home #purposeSec {
	width: 100%;
}
#home #purposeSec ul {
	width: 100%;
}
#home #purposeSec li {
  width: 48%;
  margin: 0px 0px 20px;
}
#home #purposeSec li:nth-child(odd) {
  margin-right: 4%;
}
#home #purposeSec li img {
  width: 100%;
}


#home #bannerSec ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
#home #bannerSec li {
	float: none;
}
#home #bannerSec li+li {
	margin: 10px 0px 0px;
}
#home #footBannerSec {
	width: 100%;
}
#home #footBannerSec li {
  width: 48%;
  margin-bottom:15px;
}
#home #footBannerSec li+li {
    margin-left: 0;
}
#home #footBannerSec li:nth-child(2n) {
    margin-left: 4%;
}

/* フォーム
=============================================== */


#formArea table  {
	font-size:12px;
}
#formArea table th {
	padding: 10px;
}
#formArea table td {
	padding: 10px;
}
#formArea table select {
	width:100%;
}
.btn_area {
	margin: 50px 0px 0px;
	text-align: center;
}
.btn_area li {
  display: block;
  min-width: 100%;
}
.btn_area .btn {
  display: block;
  min-width: 100%;
}
.btn_area li+li {
	margin-top: 10px;
  margin-left: 0;
}
#formArea input[type=text],
#formArea textarea,
#formArea select {
	max-width:100%;
}