/*
Theme Name: みるみるネット
Description: みるみるネット専用のテーマです。
Version: 1.0
*/
/* 上下ブルーライン青文字の見出し*/
.blue-top-bottom1 {
  padding: 0.5em 0.5em; /*上下の余白*/
	margin: 1em 0;
  border-top: solid 3px #3b3b8b; /*上線*/
  border-bottom: solid 3px #3b3b8b; /*下線*/
  font-size: 20px;
  color: #3b3b8b;
}

/* 上下ブルーライン背景薄青の見出し*/
.blue-top-bottom2 {
  padding: 0.5em 0.5em; /*上下の余白*/
	margin: 1em 0;
  border-top: solid 3px #3b3b8b; /*上線*/
  border-bottom: solid 3px #3b3b8b; /*下線*/
  background: #F4F7FA; /*背景色*/
  font-size: 20px;
  color: #444444;
}


/* 蛍光ペン幅40%の下線 水色*/
.rightblue-40-line {
  background: linear-gradient(transparent 60%, #B3E0FB 0%);
}
/* 蛍光ペン幅60%の下線 黄色*/
.yellow-60-line {
  background: linear-gradient(transparent 40%, #FEFE8B 0%);
}
/* 蛍光ペン幅80%の下線 橙色*/
.orange-80-line {
  background: linear-gradient(transparent 20%, #ffe4b5 0%);
}
/* 角丸ボックス*/
.box-blue {
  padding: 1em 1em 1em 1em;
  margin: 1em 0;
   background: #FFF;
  border: solid 3px #3b3b8b; /*線*/
  border-radius: 5px; /*角の丸み*/
}
.box-blue p {
  margin: 0;
  padding: 0;
}
.box-back-blue {
  padding:  1em 1em 1em 1em;
  margin: 1em 0;
  background: #F4F7FA;
  border-radius: 5px; /*角の丸み*/
}

.box-back-yellow {
  padding: 1em 1em 1em 1em;
  margin: 1em 0;
  background: #FEFE8B;
  border-radius: 5px; /*角の丸み*/
}


/* 付箋風のボックスデザイン*/
.box-fusen-orange {
  padding: 0.5em 1em;
  margin: 2em 0;
  color: #444444;
  background: #fff8e8;
  border-left: solid 10px #ffc06e;
}
.box-fusen-orange p {
  margin: 0;
  padding: 0;
}
/* サブコピーを入れた見出し */
.point-box {
  position: relative;
  padding: 1rem 2rem;
	margin-top: 3em;
  text-align: center;
  color: #444444;
  border-radius: 0 10px 10px 10px;
  background: #F4F7FA;
}
.point-box:before {
  font-family: 'Font Awesome 5 Free';
  font-size: 10px;
  font-size: 1rem;
  position: absolute;
  top: -24px;
  left: 0;
  height: 24px;
  padding: 0 1em;
  content: '\f0a4  POINT';
  color: #fff;
  border-radius: 10px 10px 0 0;
  background: #3b3b8b;
}
.btn--blue {
  color: #fff;
  background-color: #3b3b8b;
  font-weight: 700;
  padding: 35px auto;
  width: 100%;
  text-align: center;
  line-height: 2em;
  border-radius: 5px; /*角の丸み*/
}
.btn--blue a {
  color: #fff;
}
.btn--blue:hover, a.btn--blue:hover {
  color: #fff;
  background: #9797C3;
}