/* ==========ブログのプロフィール表示========================== */
.wrapper {
  max-width: 1200px;
  border: 2px solid #ccc;
  padding: 16px;
  font-family: sans-serif;
}

.title {
  font-size: 18px;
  margin-bottom: 8px;
  font-weight: bold;
}

.divider {
  border-top: 1px dashed #999;
  margin: 8px 0 16px 0;
}

.profile {
  display: flex;
  align-items: flex-start;
}

.profile img {
  width: 150px;  /* サイズは任意で調整 */
  height: auto;
  margin-right: 16px;
  font-weight: bold;
}

.text-content {
  font-size: 17px;
  flex: 1;
}


/*契約までの流れのリスト*/
ol.sample1{
  counter-reset:list;
  list-style-type:none;
  font: 16px/1.6 'arial narrow', sans-serif;
  padding: 0px;
}
ol.sample1 li{
  position:relative;
  line-height: 47px;	/*ラインの上下*/
  margin: 7px 0 30px 30px;	/*上下左右のマージン*/
  padding-left:20px;
  font-weight: bold;
  font-size:25px;
color: #005EAE;		/*追加*/
  border-bottom:solid 1px #005EAE;	/*ライン*/
}
ol.sample1 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -50px;
  width: 50px;		/*四角のサイズ*/
  height: 50px;
border-radius: 9px;	/*四方の丸み*/
  box-shadow: 10px 5px 5px #d4d4d4;	/*影の指定*/
  background: #005EAE;
  text-align: center;	/*数字の位置をセンターに*/
  color: #fff;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-30%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}




/*-----------------------------------------------------------------*/

/*一年間の流れリスト hisigata*/
ol.sample2{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 0px;
/*  border: solid 1px #F6A38B;*/
}
ol.sample2 li{
  position:relative;
  line-height: 60px;		/*ラインの上下*/
  margin: 7px 0 30px 40px;	/*ひし形の外側上下左右のマージン*/
  padding-left: 30px;		/* テキスト左マージン*/
  font-weight: bold;
  font-size:25px;
color: #005EAE;			/*テキストカラー追加*/
border-bottom:solid 1px #005EAE;	/*下線追加*/
}
 ol.sample2 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  top: 0;
  left: -50px;
  width: 50px;	/*四角のサイズ*/
  height: 50px;
  text-align: center;
  color: #fff;
  line-height:60px;	/*リスト内数字の上下位置*/
   z-index:1;
}
ol.sample2 li:after{
  content:"";
  position: absolute;
  top: 3px;
  left: -50px;
  width: 50px;
  height: 50px;
  background: #F39801;	/*  ひし形のカラー*/
  color: #fff;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*-----------------------------------------------------------------*/

/*一年間の流れリスト kage*/
ol.sample3{
  counter-reset:list;
  list-style-type:none;
  font: 16px/1.6 'arial narrow', sans-serif;
  padding: 0px;
}
ol.sample3 li{
  position:relative;
  line-height: 47px;		/*ラインの上下*/
  margin: 7px 0 30px 30px;	/*上下左右のマージン*/
  padding-left:20px;
  font-weight: bold;
  font-size:25px;
　color: #005EAE;			/*追加*/
  border-bottom:solid 1px #005EAE;	/*ライン*/
}
ol.sample3 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -50px;
  width: 50px;		/*四角のサイズ*/
  height: 50px;
  background: #005EAE;
border-radius: 9px;	/*四方の丸み*/
/*  box-shadow: 10px 5px 5px #e9f5ff;	影の指定*/
  box-shadow: 10px 5px 5px #d4d4d4;	/*影の指定*/
  text-align: center;	/*数字の位置をセンターに*/
  color: #fff;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-30%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
img {
    max-width: 100%;
    height: auto;
}



/*-----------------------------------------------------------------*/

/*黄色下線、数値が低いほど太くなる*/
    .under1 {
      background: linear-gradient(transparent  50%, #ffff00  50%);
    }
    

/* ハッシュタグ群（投稿に表示） */
.hastags-wrapper .hashtags{
	margin: .25rem 0;
	display: flex;
	gap: .5rem;
}

/* ハッシュタグリスト（ハッシュタグページに表示） */
.hashtags-list h3{
	font-size: 1.0rem;
	margin: .5rem 0 1rem;
}
.hashtags-list h3 .hashtag{
	margin: auto .5rem;
	padding: .25rem .5rem;
	border: 1px solid gray;
//	background-color: darkgray;
//	color: white;
	background-color: #ffffff;	/*--背景色--*/
	color: #293fc6;		/*--文字カラー--*/
}
.hashtags-list ul{
	margin: 1rem 0 1rem 1rem;
}
.hashtags-list ul li{
	list-style-type: circle;
	margin: .5rem 0;
}
.hashtags-list ul li a{
	color: black;
}
.hashtags-list ul li a:hover{
	opacity: .5;
}

/* ハッシュタグ共通 */
.hashtag a{
	font-size: 0.9rem;	/*--フォントサイズ--*/
	display: inline-block;
	padding: .25rem .5rem;
	border: 1px solid gray;
//	background-color: darkgray;
	background-color: #ffffff;	/*--背景色--*/
//	color: white;
	color: #293fc6;		/*--文字カラー--*/
}
.hashtag a:hover{
	opacity: .5;
	text-decoration: none;
}