@import "http://";
	@charset "utf-8";   
/*************************************************
 全ブロックの共通設定
*************************************************/

body {
	margin:0;
	padding:0;
	font-size:100%;
	font-style:normal;
	font-weight:normal;
	list-style-type:none;
	background-color:#fff0f0;
}

div,ul,ol,li,p,blockquote,form,table,th,tr,td,img {
	margin:0;
	padding:0;
	font-size:100%;
	font-style:normal;
	font-weight:normal;
	list-style-type:none;
}

h1 { 	margin:5px;
	font-size: 110%;
	font-style:normal;
	font-weight:normal; }
h2 { 	margin:5px;
	font-size: 115%; }
	
h3 { 
	margin:5px;	
	font-size: 115%; }
	
h4,h5,h6 { 
	margin:5px;
	font-size: 100%; }

*{}

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	line-height: 1.4; 
	color:#555;
}

table{
	border-collapse:collapse;
	}

td {margin:5px;
	padding:5px;	
}

select,input {
	vertical-align:middle;
}

textarea,input,select {
	border:solid 1px #B3C6FF;
	text-decoration:none;
	color:#555;
	background-color:#FFF;
}

img {
	border:none;
}

blockquote {
	margin:0px;
	padding:0px;
	border:dotted 1px #7AD;
}

hr {
	width:90%;
	height:1px;
	text-align:center;
	margin:5px auto;
	background-color:#999;
	color:#9CC;
	border:none;
	
}


/*************************************************
  リンクの共通設定
*************************************************/
/*通常のリンクの設定*/
a:link {
	text-decoration:none;
	color:#369;
}
/*過去に見たことがあるページのリンクの設定*/
a:visited{
	text-decoration:none;
	color:#369;
}
/*カーソルが合っている状態のリンクの設定*/
a:hover {
	text-decoration:none;
	color:#9CC;
}
/*アクティブ状態のリンクの設定*/
a:active {
	text-decoration:none;
	color:#9CC;
}


/*************************************************
  メインブロック
*************************************************/

@media (min-width: 850px) {

   /* ↓ページレイアウト */
   .page-cover {
      display: flex;       /* フレキシブルボックスでレイアウト */
      flex-direction: row; /* 横並びにする */
   }

   /* ▼メインカラムの装飾 */
   .main-column {
      order: 2;   /* 2番目に表示 */
      width: 70%;
      margin-left:10px;
   }
   /* ▽サイドカラムの装飾 */
   .side-column {
      order: 1;   /* 1番目に表示 */
      width: 20%;
	background-color:#ffe0df;
   }

}


#footer{
  clear: both;
  width: 100%;
}


/*************************************************
  サイドブロック
*************************************************/

@media (min-width: 601px) and (max-width: 849px) {

   /* ▼サイドカラムの内側だけで各ボックスを2段組にする */
   .side-box {
      display: inline-block;  /* インラインブロック化 */
      width: 48%;             /* 横幅を48%に(2段組にするため) */
      vertical-align: top;    /* 横並びのブロック間では上端を揃える */
      margin: 0;              /* 外側の余白をなくす */
      text-align: left;       /* ボックス内部は左寄せ */
      background-color:#ffe0df;
   }

   /* ▼サイドカラムの装飾 */
   .side-column {
      text-align: center;   /* 内部のインラインブロックを中央に寄せる */
      padding: 1em 0.2em;   /* 上下に若干の余白を設ける */
      background-color:#ffe0df;
   }

}


/*************************************************
  600px以下
*************************************************/

@media (max-width: 600px) {
 .page-cover {
   display: block;
   width: 100%;
}

    /* ▼メインカラムの装飾 */
  .main-column {
      display: block;
      width: 100%;
   }

   /* ▽サイドカラムの装飾 */
   .side-column-left {
      display: block;
      width: 100%;
      background-color:#e8f3ff;
   }

   /* ▽サイドカラムの装飾 */
   .side-column-right {
      display: block;
      width: 100%;
      background-color:#e8f3ff;
   }
}


/*************************************************
  共通ボックス　テーブル2カラム(右揃え、枠あり)
*************************************************/

div.cover-aroma {
   display: table;
   margin: 3px;
   padding: 0px;
   width: 98%;
}

div.cover-aroma div.box1-aroma {
   display: table-cell;
}

    /* ▼右カラム(キーワード＆おすすめ)装飾 */
div.cover-aroma div.box2-aroma {
   padding: 1em 0.2em;
      vertical-align: top; 
   background-color: #e1e1e1;
   display: table-cell;
   width: 30%;
}



/*************************************************
  テーブル2カラム(右揃え、枠あり)　650ｐｘ以下
*************************************************/

@media screen and (max-width: 650px) {
   div.cover-aroma {
      display: block;
   }
   div.cover-aroma div.box1-aroma {
      display: block;
      width: 100%;
   }
   div.cover-aroma div.box2-aroma {
      display: block;
      width: 100%;
   }
}

/*************************************************
  共通ボックス　テーブル2カラム(右揃え、枠あり)
*************************************************/

div.cover-aroma-s {
   display: table;
   margin: 3px;
   padding: 0px;
   width: 98%;
}

    /* ▼左カラム(グレー点線・アロマ＆オイル名)装飾 */
div.cover-aroma-s div.box1 {
   vertical-align: middle;
   border-color:#999999;
   border-width:1px;
   border-style:dotted;
   display: table-cell;
   width: 28%;
}

div.cover-aroma-s div.box2 {
   border: 2px solid #9CC;
   display: table-cell;
}

/*************************************************
  テーブル2カラム(右揃え、枠あり)　650ｐｘ以下
*************************************************/

@media screen and (max-width: 650px) {
   div.cover-aroma-s {
      display: block;
   }
   div.cover-aroma-s div.box1 {
   border-color:#999999;
   border-width:1px;
   border-style:dotted;
      display: block;
      width: 100%;
   }
   div.cover-aroma div.box2 {
   border: 2px;
   border-color:#9CC;
      display: block;
      width: 100%;
   }
}
 
/*************************************************
  共通ボックス
*************************************************/   
div.info {
   	padding: 0px 10px 0;
	font-size: 100%;
	width: 96%;
 border: 1px solid #ccccff;
 background-color:#f7f5f5;
}

/*************************************************
  共通ボックス
*************************************************/   
div.info2 {
   	padding: 0px 10px 0;
	font-size: 100%;
	width: 70%;
 border: 1px solid #ccccff;
}

/*************************************************
  共通ボックス4
*************************************************/   
div.info4 {
	padding:0;
	font-size: 100%;
	width: 90%;
 border: 1px solid #ff9999;
}

/*************************************************
  グーグルボックス
*************************************************/

div.gbox {
   position: absolute;
   left: 70%;
   width:  338px;        /* 横幅 */
   height: 280px;        /* 高さ */
   margin-right: 0px;  /* マイナス「横幅÷2」 */
   margin-top:  3px;  /* マイナス「高さ÷2」 */
   overflow: auto;  /* 内容がはみ出る場合の表示方法 */

   background-color: ; /* 背景色 */
   color: #000000;            /* 文字色 */
}

/*グーグルボックス(long)の設定*/

div.gboxlong {
   position: absolute;
   left: 70%;
   width:  180px;        /* 横幅 */
   margin-right: 0px;  /* マイナス「横幅÷2」 */
   margin-top:  3px;  /* マイナス「高さ÷2」 */
   overflow: auto;  /* 内容がはみ出る場合の表示方法 */

   background-color: ; /* 背景色 */
   color: #000000;            /* 文字色 */
}

/*************************************************
 レシピボックス
*************************************************/
div.recipebox {
   	padding: 5px 10px 5px;
	font-size: 100%;
	width: 96%;
 border: 1px solid #aaffaa;
}
div.recipebox a {
   	padding: 0px 0.3em;