@charset "utf-8";

/* 共通のCSS======================================================= */

/* h3のデザインを変更する
----------------------------*/

h3 {
    padding: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
    background-color: #e6d9cf;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
	line-height: 2.5; /* 数値のみの指定がおすすめ（フォントサイズの2.5倍） */
}

/* 行間を詰めるクラス 
---------------------------*/
.tight-line {
    line-height: 1.3; /* 数値のみの指定がおすすめ（フォントサイズの1.3倍） */
}

/* 文字サイズを大きくするクラス 
-----------------------------------*/
.text-bigger12 {
    font-size: 1.2rem; /* 元のサイズの1.2倍 */
}

/* 文字の色を変え、太字にするクラス 
----------------------------------------*/
.text-red {
  color: red; /* 色の指定 */
  font-weight: bold; /* 太字 */
}

/* 共通のCSS　ここまで　=========================================== */

/*チラシ画像の設定（幅、中央、枠線、影）
--------------------------------------------------------------------*/
img.waku {
  width: 85%; /* 親要素に対する幅を85%に指定 */
  height: auto; /* 縦横比を維持して表示 */
  display: block; /* 中央寄せ（margin: auto）を有効化 */
  margin: 0 auto; /* 左右の余白を均等にして中央に配置 */
  border: 1px solid #999999; /* 枠線の太さ、種類、色を指定（お好みで変更） */
  box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.3);  /*画像周囲に影をつける*/
}

/*h4タグのデザインをタグ風にする
--------------------------------------------------------------------*/
h4.tag {
  color: #505050;/*文字色*/
  padding: 0.5em;/*文字周りの余白*/
  display: inline-block;/*おまじない*/
  line-height: 1.3;/*行高*/
  background: #e6d9cf;/*背景色*/
  vertical-align: middle;
  border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
}

h4.tag:before {
  content: '●';
  color: white;
  margin-right: 1em;

}

/*メイン領域のリストのデザイン
--------------------------------------------------------------------*/
main li {
	line-height: 20px;	/*リストの行間隔*/
	margin-left: 20px;	/*リストの左余白*/
	margin-right: 15px;	/*リストの右余白*/
	margin-bottom: 5px;	/*リストの下余白*/
	padding-left: 5px; /*リストマーカーとテキストの間隔*/
}
main ul {
	margin-bottom: 15px;		/*リストブロックの下余白*/
	list-style-image: url(../images/icon_list.png);
}