@charset "utf-8";



/*リセットCSS（ress.css）の読み込み
---------------------------------------------------------------------------*/
@import url("https://unpkg.com/ress/dist/ress.min.css");


/* 見出し*/
.midasi {
  padding: 0.4em 0.5em 0.2em 0.5em;/*文字の上下 左右の余白*/
  font-size:1.5rem;
  font-weight: bold;
  color: #06c755;/*文字色*/
  background: #e8ffe3;/*背景色*/
  border-left: solid 7px #06c755;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
}


/* 小見出し*/
.komidasi {
  position: relative;
  font-size:1.5rem;
  font-weight: bold;
  color: #06c755;
  line-height: 1.4;
  padding: 0.25em 0.5em 0.1em 0.5em;
  margin: 2em 0 1em 0.5em;
  background:linear-gradient(transparent 90%, #ff6 90%);/*黄色のマーカー*/
}

.komidasi:after {
  /*タブ*/
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  font-weight: 900;
  content: '✔ポイント';
  background: #06c755;
  color: #fff;
  left: 10px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 3px 7px 1px;
  font-size: 0.7em;
  line-height: 1;
  letter-spacing: 0.05em
}


/* 画像とテキスト横並び */

.image {
  width: 100%; /*画像サイズ指定*/
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.text {
  margin: -10px 0 20px 20px;
  padding: 0 20px 0 0;
  font-size:1.1rem;
  line-height: 1.5;
}


/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.img_pc { display: none !important; }
.img_sp { display: block !important; }




/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ここから下は画面幅800px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:800px) {


/* 説明文*/
.setumei {
  margin: -20px 0 20px 0;
  padding: 0 20px 0 20px;
  font-size:1rem;
  line-height: 1.7;
}


/* 画像とテキスト横並び */

.flexservice {
  display: flex; /*横並び*/
}
.flexservice .image {
  width: 170%; /*画像サイズ指定*/
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.flexservice .text {
width: 130%;
  margin: 0 0 20px 30px;
  padding: 0 20px 0 0;
  font-size:1rem;
  line-height: 1.7;
}

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
.img_pc { display: block !important; }
.img_sp { display: none !important; }

}