@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 { 
	margin:5px;
	font-size: 100%; }

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:10px;
	padding:10px;
	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: 60%;
      margin:10px;
   }
   /* ▽サイドカラムの装飾 */
   .side-column-left {
      order: 1;   /* 1番目に表示 */
      width: 20%;
      background-color:#ffe0df;
   }
   .side-column-right {
      order: 3;   /* 3番目に表示 */
      width: 20%;
   }
}


/*************************************************
  601px～849ｐｘ以下
*************************************************/

@media (min-width: 601px) and (max-width: 849px) {
   /* ▽サイドカラムの装飾 */
   .side-column-left {
      display: inline-block;  /* インラインブロック化 */
      width: 48%;
      vertical-align: top;    /* 横並びのブロック間では上端を揃える */
      background-color:#ffe0df;
   }

   /* ▽サイドカラムの装飾 */
   .side-column-right {
      display: inline-block;  /* インラインブロック化 */
      vertical-align: top;    /* 横並びのブロック間では上端を揃える */
      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:#ffe0df;
   }

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

/*************************************************
  共通ボックス　テーブル3カラム
*************************************************/   

div.cover {
   display: table;
   border-spacing: 1em 3px;
   margin: 0px;
   padding: 0px;
   width: 90%;
   text-align:center;
}

div.cover div.box1 {
   display: table-cell;
   width: 33%;
}
div.cover div.box2 {
   display: table-cell;
   width: 33%
}
div.cover div.box3 {
   display: table-cell;
}

div.cover div.title {
   text-align:center;
   display: table-cell;
   width: 100%;
}

/*************************************************
  テーブル3カラム　650ｐｘ以下
*************************************************/

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

/*************************************************
  共通ボックス
*************************************************/   
div.infoaroma {
   	padding: 0px 10px 0;
	font-size: 100%;
	width: 95%;
 border: 1px solid #ff77bb;
}
div.aishoulist a {
   	padding: 0px 0.3em;
   	}
   	
/*************************************************
  共通ボックス2
*************************************************/   
div.infoaroma2 {
   	padding: 0px 10px 0;
	font-size: 100%;
	width: 95%;
 border: 1px solid #ccccff;
}
div.aishoulist a {
   	padding: 0px 0.3em;
   	}
   	

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

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

/*************************************************
  新着情報ボックス
*************************************************/   	
   p.infomationbox {
   width:  92%;        /* 横幅 */
   height: 10em;
   margin:5px;
   padding:5px;
   overflow: auto;
   border: red 1px dashed;
}

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

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: 80%;
   width:  170px;        /* 横幅 */
   margin-right: 0px;  /* マイナス「横幅÷2」 */
   margin-top:  3px;  /* マイナス「高さ÷2」 */
   overflow: auto;  /* 内容がはみ出る場合の表示方法 */

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


/*************************************************
  ツイッターボックス
*************************************************/
/*ツイッターボックスの設定*/

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

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

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

/*************************************************
  レシピ解説ボックス
*************************************************/   	
   p.infomationrecipebox {
   width:  520px;        /* 横幅 */
   height: 4em;
   margin:5px;
   padding:5px;
   overflow: auto;
   border: silver 1px dashed;
}
/*************************************************
  index用アロマ解説ボックス
*************************************************/   	
   p.infomationindexbox {
   width:  500px;        /* 横幅 */
   height: 4em;
   margin:5px;
   padding:8px;
   overflow: auto;
   border: gray 1px dashed;
}