@charset "utf-8";

/*『アファメーション』の「list90」ボックス設定
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
#main .list90 {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;  /* ボックスの外（下）に空けるスペース */
    padding: 20px;  /* ボックス内の余白 */
    border: 1px solid #666666;  /* 枠線の幅、線種、色 */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2); /* 影のへこみ効果 */
}

/* 元のリンク全体の設定 */
.list90 {
  position: relative;  /* 吹き出しの基準位置にする */
} 

/* 元のリンクのデザイン */  
.list90 a {
  display: block;
  text-decoration: none;
  overflow: hidden;
  border-bottom: none;/* 下線をオフにする */
  
  transition: box-shadow 0.2s; /* ホバー時の影のアニメーション */
}

/* 元のリンクのホバー時 */
.list90 a:hover {
  border: 1px solid #7e6b50;
  background: #f8f7f5;
  

}

/* 吹き出し部分 */
.list90 .message {
  opacity: 0;
  transition: opacity 0.2s; /* フェードインアニメーション */
  
  position: absolute; /* 絶対位置にする */
  top: 0; 
  left: 100%; /* 元のリンクの右に配置 */
  padding: 20px;  
  border: 1px solid #7e6b50;
  background: #f8f7f5;
}

/* 元のリンクにマウスオーバー時 */  
.list90:hover .message {
  opacity: 1; /* 吹き出しを表示　2023年11月9日【できない】*/
}

/*写真*/
#main .list90 figure img {
	width: 15%;			/*写真の幅　変更可*/
	float: left;		/*左に回り込み*/
border-radius: 20% 20%;/*円形にくり抜く指定。通常通りに表示させたいならこの１行削除。*/
}
/*h4タグ*/
#main .list90 h4 {
	margin-left: 18%;	/*左に空けるスペース。写真(figure)のwidth指定とバランスをとって指定する。*/
	color: #7e6b50;		/*文字色*/
	font-size: 18px;	/*文字サイズ*/
	border-bottom: dashed 1px #7e6b50;	/*枠線の幅、線種、色*/
	margin-bottom: 10px;	/*下に空けるスペース*/
}
/*段落(p)タグ*/
#main .list90 p {
	padding: 0 !important;
	margin-left: 22%;	/*左に空けるスペース。写真(figure)のwidth指定とバランスをとって指定する。*/
}
/*『カプッ』の「list90」ボックス設定
---------------------------------------------------------------------------*/
.boxhasen .voice-label {
  font-size: 14px;
  font-weight: 700;
  color: #5F446B;
  margin-bottom: 6px;
		letter-spacing: 0.05em;
}

/*━─━─━─━─━─━─━─━─━─━─*/
/*<div class="boxhasen-c"><p>波線枠のテーブル</p></div>*/
/* 読者の心の声（軽め） */
.boxhasen-c {
    padding: 18px 22px 5px 22px;
    margin: 18px auto 8px;
    max-width: 88%;
    background: linear-gradient(
        315deg,
        rgba(0,0,0,0.015) 0%,
        rgba(0,0,0,0.008) 40%,
        rgba(0,0,0,0.0) 70%
    ), #ffffff;
    border: dashed 1.5px #d0d0d0;
    border-radius: 14px;
}

/*━─━─━─━─━─━─━─━─━─━─*/
/*<div class="cta90">この記事を読む ▶👩🏻‍💻</div>*/
/* この記事を読む ▶👩🏻‍💻 */
.list90 .cta90 {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #d0d0d0;
  background: #fafafa;
  font-weight: 700;
  font-size: 13px;
  float: right;
}