@charset "utf-8";


/*
---------------------------------------------------------------------------*/
/*特徴アイコン*/
.midashi1 {
     position: relative;
     color: white;
     padding:0.5em 0.5em 0.5em 1.8em;
     font-size: 18px;
     background-color: #408080;
     border-radius: 5px;
}
 
.midashi1::after {
     position: absolute;
     top: 50%;
     left:0.7em;
     transform:translateY(-50%);
     content: '';
     width: 8px;
     height:8px;
     border: solid 3px white;
     border-radius:100%;
}
.midashi2 {
  position: relative;
  background: #b0c257;
  padding: 2px 5px 2px 48px;
  font-size: 18px;
  color: #474747;
  border-radius: 0 10px 10px 0;
}

.midashi2:before {
  font-family: "Font Awesome 5 Free";
  content: "\f19d";
  display: inline-block;
  line-height: 40px;
  position: absolute;
  padding: 0em;
  color: white;
  background: #008040;
  font-weight: 900;
  width: 40px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border: solid 3px white; 
  border-radius: 50%;
 left: -1.3px;
}
.midashi3{
font-size: 18px;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
padding: .5em .7em;
margin-bottom: 2em;
position: relative;
background-color: #e0ebe2;/* 背景色 */
border-left: solid 2em #1b8440;/* 線 */
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);/* 影 */
color: #1b833f;/* フォント色 */
}

.midashi3:before {
position: absolute;
content: "\f303";
font-family: "Font Awesome 5 Free";
padding: 0em;
font-weight: 900;
left: -1.5em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #ffffff;
}
.midashi4{
font-weight:normal;
padding:10px 0;
margin-bottom:5px;
border-top:3px double #ebebeb;
border-bottom:3px double #ebebeb;
font-size: 18px;

}
.midashi5 {
  background: #fff;
  border-top:1px solid #ddd;
  border-right:1px solid #ddd;
  border-bottom:1px solid #ddd;
  border-left:3px solid #81d0cb;
  font-size: 18px;
  padding: 5px 0 5px 10px;
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ",Helvetica,Sans-Serif;
  background: -moz-linear-gradient(top, #fff 0%, #eee 50%, #ddd 51%, #fff 100%); /* firefox */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(50%,#eee), color-stop(51%,#ddd), color-stop(100%,#fff)); /* webkit */
  -pie-background:linear-gradient(top, #fff 0%, #eee 50%, #ddd 51%, #fff 100%);
  behavior: url(http://www.webcreatorbox.com/sample/images/PIE.htc);  /* ie */
}
.midashi6 {
  position: relative;
  color: white;
  background: #81d0cb;
  line-height: 1.4;
  padding: 0.5em 0.5em 0.5em 1.8em;
  font-size: 18px;/* フォントサイズ */
  font-weight: 900;
}

.midashi6:before {
  font-family: "Font Awesome 5 Free";
  content: "\f14a";
  font-weight: bold;
  position: absolute;
  left : 0.5em; /*左端からのアイコンまでの距離*/
}

.midashi7{
	position: relative;
	padding-top: 20px;
	font-size: 20px;
}
.midashi7::before{
	position: absolute;
	content: attr(title);
	top:0;
	font-size: 18px;
	font-weight:normal;
	color:#999;
}
.midashi8{
	position:relative;
	padding:10px 10px;
	border:1px solid #325A8C;
    font-size:18px;
   line-height: 1.4;
   margin-bottom:10px;
}
.midashi8::after{
    content       : attr(title);
    font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
	position: absolute;
	top: -8px;
	left: 10px;
	background: #fff;
	font-size: 12px;
	color: #325A8C;
	padding: 0 10px;
}
.midashi9 {
  position: relative;
  border-top: solid 2px #80c8d1;
  border-bottom: solid 2px #80c8d1;
  background: #f4f4f4;
  line-height: 1.4;
  padding: 0.4em 0.5em;
  margin: 2em 0 0.5em;
  font-size: 18px;
}

.midashi9::after {
  /*タブ*/
  content       : attr(title);
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  font-weight: 900;
  background: #80c8d1;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 5px 7px 3px;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.05em;
}

 /* --- BOXの定義 -------------------------------------------------*/
.midashi10 {
  position      : relative;            /* タイトル用に親要素定義  */
  box-sizing    : border-box;          /* 罫線・余白も含む大きさ  */
  margin        : 0;                   /* BOXの位置               */
  max-width     : 100%;               /* BOXの最大横幅           */
  background    : #fff;                /* BOXの背景色             */
  padding       : 10px 10px 10px 20px; /* BOX内の余白             */
  border        : 3px solid #408080;   /* BOXの枠線               */
  font-size     : 20pt;                /* BOXの文字サイズ         */
  text-align    : center;              /* BOXの文字位置           */
  border-radius : 10px;                /* タイトルの角丸          */
  margin-bottom:10px;
}
 
 /* --- タイトル部分の定義 ----------------------------------------*/
.midashi10::before {
  position      : absolute;          /* 親からの相対位置の定義  */
  display       : inline-block;      /* インラインボックス定義  */
  box-sizing    : border-box;        /* 罫線・余白も含む大きさ  */
  line-height   : 1;                 /* 1行の高さを初期化       */
  background    : #004000;           /* タイトル背景色          */
  color         : #ffffff;           /* タイトルの文字色        */
  font-weight   : bold;              /* タイトルは太字          */
  padding       : 8px 10px;          /* タイトル内の余白        */
  top           : 4px;               /* タイトル上位置はマイナス*/
  left          : 4px;               /* タイトル右位置は1文字分 */
  border-radius : 6px;               /* タイトルの角丸          */
  font-size     : 12px;              /* タイトルの文字サイズ    */
  animation     : sample2bAnime 3s infinite alternate;
}
@keyframes sample2bAnime{
   0% { opacity : 0; }
  50% { opacity : 1; }
 100% { opacity : 1; }
}

.midashi11 {
  border-bottom: 5px #3cf solid;
  padding-bottom: 5px;
  font-weight: normal;
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ",Helvetica,Sans-Serif;
}
.midashi11  span {
  margin-left:20px;
  font-size:18px;
  color: #ccc;
  position: relative;
  top: -5px;
}

.midashi12 {
position: relative;
border-left: 6px solid #ccc;
padding: 10px;
color: #000;
margin-bottom:10px;
border-bottom: 2px solid #00a02e;
font-size: 18px;

}

.midashi12::before {
position: absolute;
left: -6px;
bottom: 0;
content: '';
width: 6px;
height: 50%;
background-color: #00a02e;
}

.midashi12::after {
position: absolute;
left: 0;
bottom: 0;
content: '';
width: 100%;
height: 0;
border-bottom: 1px solid #00a02e;
}

.midashi13 {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 2rem 1.5rem 130px;
  word-break: break-all;
  border-top: 3px solid #000;
  border-radius: 12px 0 0 0;
  font-size: 18px;
}

.midashi13 span {
  font-size: 40px;
  font-size: 4rem;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  padding: 3px 20px;
  color: #fff;
  border-radius: 10px 0 20px 10px;
  background: #000;
}

.midashi14 {
  position: relative;
  padding-left: 5em;
  font-size: 18px;
}

.midashi14  span {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 1.5rem;
  color: #fff;
  border-radius: 10px;
  background: #0075a9;
}

.midashi14 span i {
  margin-right: 1rem;
}

.midashi14  span:after {
  position: absolute;
  top: calc(50% - 7px);
  right: -11px;
  width: 0;
  height: 0;
  content: '';
  border-width: 7px 0 7px 12px;
  border-style: solid;
  border-color: transparent transparent transparent #0075a9;
}
.midashi15 {
     position: relative;
     padding: 1em 1.9em;
     border: 1px solid #CCC;
     border-radius:5px;
     background: linear-gradient(#FFF 0%, #EEE 100%);
     box-shadow:inset -1px -1px 0 rgba(255,255,255,1);
	font-size:26px;
	text-align:center;
}
 
.midashi15 span::after {
     position: absolute;
     top: 50%;
     left:0.8em;
     transform:translateY(-50%);
     content: '';
     width: 8px;
     height:8px;
     border: solid 3px #446689;
     border-radius:100%;
}
.midashi16 {
  position: relative;
  padding: 1rem .5rem;
  font-size:18px;
}

.midashi16:before,
.midashi16:after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  content: '';
  background-image: -webkit-gradient(linear, right top, left top, from(#30cfd0), to(#330867));
  background-image: -webkit-linear-gradient(right, #30cfd0 0%, #004040 100%);
  background-image: linear-gradient(to left, #30cfd0 0%, #004040 100%);
}

.midashi16:before {
  top: 0;
}

.midashi16:after {
  bottom: 0;
}

/*見出しマークのみ*/
.midam1{
	position:relative;
	padding-left:30px;
	font-weight: bold;
	font-size: 16px;
	
}
 
.midam1:before{
	content:''; 
	height:12px; 
	width:12px; 
	display:block; 
	background:#00A8FF; 
	box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
	-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
	-webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
	-moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; 
	position:absolute; 
	top:-0px; 
	left:5px;
	transform:rotate(-50deg);
	-webkit-transform:rotate(-50deg);
	-moz-transform:rotate(-50deg);
	-o-transform:rotate(-50deg);
	-ms-transform:rotate(-50deg);
    font-size: 18px;
}
.midam1:after{
	content:''; 
	height:8px; 
	width:6px; 
	display:block; 
	background:#00A8FF; 
	box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
	-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
	-webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
	-moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; 
	position:absolute; 
	top:16px; 
	left:2px;
	transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	-o-transform:rotate(-90deg);
	-ms-transform:rotate(-75deg);
}

.midam2{
	position:relative;
	padding-left:30px;
	font-weight:bold;
	font-size: 18px;
}
 
.midam2:before{
	content:''; 
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px; 
	height:12px; 
	width:12px; 
	display:block; 
	position:absolute; 
	top:14px; 
	left:7px; 
	background-color:#6B0CE8;
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
	filter:alpha(opacity=50);
	-moz-opacity:0.50;
	-khtml-opacity: 0.50;
	opacity:0.50;
	z-index: 1;
}
 
.midam2:after{
	content:''; 
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px; 
	height:15px; 
	width:15px; 
	display:block; 
	position:absolute; 
	top:7px; 
	left:2px; 
	background-color:#00A8FF;
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset
}

.midam3 {
	position: relative;
	padding: 0 .5em .5em 2em;
　  font-size: 18px;

}
.midam3::before,
.midam3::after {
	position: absolute;
	content: '';
	border-radius: 100%
}
.midam3::before {
	top: .2em;
	left: .2em;
	width: 18px;
	height: 18px;
	background-color: rgba(255,90,95,.5);
	z-index: 2;
}
.midam3::after {
	top: .7em;
	left: .7em;
	width: 13px;
	height: 13px;
	background-color: rgba(255,90,95,.2);
}