/* PC・タブレット・スマホ共通設定 */
/* 全体の設定 */
body {
	margin: 0px;
	padding: 0px;
	color: #686e75;		/*全体の文字色*/
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 16px;	/*文字サイズ*/
	line-height: 1.5;		/*行間*/
	background: #faf6ee;	/*背景色*/
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form,select,input,textarea {margin: 0px;padding: 0px;font-size: 100%;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}
video,audio {max-width: 100%;}

/* サイトの最大幅の設定 */
.inner {
	max-width: 768px;
	margin: 0 auto;
}

/* ヘッダー */
header {
}

header .inner {
    display: flex;           /* 子要素を横並びに */
    align-items: center;     /* 縦方向の中央揃え */
    gap: 15px;               /* ロゴとテキストの間隔 */
    color: #683c21;
    font-size: .75em;
    background-color: #ffca00;
}

/* ロゴ画像 */
header #logo {
    width: 250px;
}

header #logo img {
    max-width: 100%;        /* 画像のサイズが親要素の幅を超えないようにする */
}



/* メインメニュー */
#contents {
	background: #faf6ee;	/*背景色*/
}

/* メインコンテンツ */
#main {
	float: left;
	width: 72%;
	padding-bottom: 40px;
	padding: 0 10px;
}

/* パンくずリストの親要素に横スクロールを適用 */
#main .breadcrumb {
    display: flex;
    gap: 0 22px;
    list-style: none;
    padding: 0;
    font-size: .9em;
    overflow-x: auto;    /* 横スクロールを可能にする */
    white-space: nowrap; /* 折り返しを防ぐ */
}

#main .breadcrumb li {
    display: flex;
    align-items: center;
}

#main .breadcrumb li:first-child::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20ZM11 13V19H13V13H11Z' fill='%23333333'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    content: '';
}

#main .breadcrumb li:not(:last-child)::after {
    display: inline-block;
    transform: rotate(45deg);
    width: .3em;
    height: .3em;
    margin-left: 10px;
    border-top: 1px solid #333333;
    border-right: 1px solid #333333;
    content: '';
}

#main .breadcrumb a:link {
	padding:10px 0;
    color: #686e75;     /* 全体の文字色 */
    text-decoration: none;
}

#main h1 {
	margin-top: 10px;
	margin-bottom: 20px;
    position: relative;
    padding: .5em .7em;
    border-radius: 10px;
    background-color: #faf6ee;
	font-size: 24px;	/*文字サイズ*/
	font-weight: normal;
}
#main h2 {
	margin-bottom: 20px;
    position: relative;
    padding: .5em .7em;
    border-radius: 10px;
    background-color: #efbf75;
    color: #fff;
	font-size: 22px;	/*文字サイズ*/
	font-weight: normal;
}
#main h2::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 30px;
    width: 0;
    height: 0;
    border: 11px solid transparent;
    border-top: 11px solid #efbf75;
}

#main h3 {
    margin-bottom: 20px;
    padding: .7em .7em .7em 2em;
    border-left: 5px solid #fcd38b;
    border-bottom: 1px dashed #efbf75;
    background-color: #faf6ee;
    color: #4d5156;      /* 全体の文字色 */
    font-size: 18px;     /* 文字サイズ */
    position: relative;
    counter-increment: section; /* カウンターをインクリメント */
}

#main h3::before {
    content: counter(section) ". "; /* カウンターの値を表示 */
    position: absolute;
    left: 15px; /* ナンバーを文字の手前に表示 */
    /*font-weight: bold;*/
    color: #4d5156; /* ナンバーの色を文字と同じにする */
}

#main h4 {
	position: relative;
	padding-left: 1.5em;
	font-size: 1.1em;	/*文字サイズ*/
    font-weight: bold;
}
#main h4:before {
	position: absolute;
	font-family: "Font Awesome 5 Free";
	content: "\f138";
	left: 0;
	top: 0;
	font-weight: 900;
	font-size: 1em;
	color: #ffa500;
}

#main p {
	padding-top: 20px;
	padding-bottom: 20px;
	line-height: 1.8;		/*行間*/
}
#main p + p {
	margin-top: -5px;
}
#main h2 + p,
#main h3 + p {
	margin-top: -10px;
}
#main section + section {
	padding-top: 30px;
}

#main a:link {
  color: #1558d6;
  text-decoration: none;
}
#main a:hover {
  color: #0056b3;
  text-decoration: underline;
}
#main a:visited {
  color: #551a8b;
}

/* サイドコンテンツ */
#sub {
  float: right;
  width: 24%;
  margin-top: 20px;
  padding-left: 10px;
  padding-bottom: 40px;
  /*background: #ccc;*/
}
#sub h2 {
	margin-bottom: 10px;
	font-size: 110%;
}
#sub h2::first-letter {
	border-left: 3px solid #767676;
	padding-left: 10px;
}
#sub p {
	line-height: 1.6;
}


/* フッター設定 */
footer {
	font-size: 12px;	/*文字サイズ*/
	clear: both;overflow: hidden;
	color: #c96d2c;
}

#footermenu ul {
	list-style: none; /* デフォルトのリストスタイルを消す */
	margin-top: 100px;
	padding: 0;
	display: flex; /* 横並びにする */
	flex-wrap: wrap; /* 折り返しを許可 */
	gap: 10px; /* 各項目の間隔 */
}

#footermenu ul li {
	padding: 0 10px;
}

#footermenu a {
	text-decoration: none;
	color: #c96d2c;
	opacity: 0.7;
}

#footermenu a:hover {
	opacity: 1;
}

#footermenu .container {
  display: flex;
  justify-content: space-between; /* 横並びにし、間隔を自動調整 */
}

#footermenu .container div {
  text-align: center; /* テキストを中央揃え */
}

/* コピーライト */
#copyright {
	clear: both;
	text-align: center;
	padding: 10px;
}
#copyright a {
	text-decoration: none;
	color: #fff;
}
#copyright .pr {
	display: block;
}

/* 画面幅900px以下の設定 */
@media screen and (max-width:900px) {
	#main, #sub {
		float: none;
		width: auto;
		overflow: hidden;
	}

	body.s-n #sub, body.s-n #side {
		display: none;
	}
	.big1 {
		font-size: 150%;
		letter-spacing: normal;
	}
	.sh {
		display: block;
	}
	.pc {
		display: none;
	}
}

/* 画面幅800px以下の設定 */
@media screen and (max-width:800px) {
	header .inner {
		position: static;
		height: auto;
		padding: 10px;
		background-position: right center;
	}
	header #logo {
		position: static;
		margin: 0 auto;
	}
}

/* 画面幅480px以下の設定 */
@media screen and (max-width:480px) {

	header .inner {
	    display: block;
	}

	header #logo {
		width: 220px;
		padding: 10px 0;
	}

	.ws, .wl {
		width: 94%;
	}

	.sp-sns-area {
	  font-size:10px;
	  margin-top:10px;
	}

}

/* strプレミアム版モニター募集or1日無料お試し */
.premium-container {
  display: flex;
  align-items: center;
  background-color: #ffd600; /* 黄色背景 */
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  position: relative;
  max-width: 600px;
  margin: 0 auto 10px;
  font-family: Arial, sans-serif;
}
.close-btn {
  position: absolute;
  top: 30px;
  left: 2px;
  background: none;
  border: none;
  font-size: 16px;
  color: #666;
  font-weight: bold;
  cursor: pointer;
}
.premium-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.premium-logo {
  width: 60px;
  height: 60px;
  margin-right: 15px;
}
.premium-text {
  flex: 1;
}
.premium-title {
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  color: #333;
}
.premium-rating {
  font-size: 12px;
  margin: 5px 0 0;
  color: #666;
}
.premium-button {
  background-color: #fff;
  color: #333;
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 25px;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s;
}
.premium-button:hover {
  background-color: #f0f0f0;
}

/* strヘッダー全体 */
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffd600;
  padding: 10px 20px;
  font-family: Arial, sans-serif;
}
.logo-container {
  flex-shrink: 0;
}
.logo-img {
  height: 40px;
}
.button-group {
  display: flex;
  gap: 15px;
}
.header-button {
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 5px 10px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
.header-button:hover {
  background-color: #f0f0f0;
}
.keep-show-button .icon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.star-icon {
  font-size: 12px;
  margin-bottom: 5px;
}
.icon-text {
  font-size: 12px;
  color: #666;
}
.badge {
  position: absolute;
  top: -5px;
  right: -10px;
  background-color: #ff4500;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-button .menu-icon {
  font-size: 20px;
  color: #666;
  margin-right: 5px;
}
/* ハンバーガーメニューボタン */
.hamburger {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  /*background-color: #f0ad4e;*/
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.hamburger i {
    font-size: 24px;
    color: #919191;
}
/* メニュー全体 */
.menu-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 1000;
    overflow-y: auto;
}
.menu-content {
  position: relative;
  max-height: 90%; /* 画面の高さを超えない */
  margin: 5% auto;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
  overflow-y: auto; /* 内部スクロールを許可 */
}
.menu-content h2 {
    font-size: 1.3em;
    margin-bottom: 10px;
    color: #333;
}
.menu-content ul {
    list-style: none;
    padding: 0;
}
.menu-content ul li {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}
.menu-content ul li:last-child {
    border-bottom: none;
}
.menu-content ul li a {
    text-decoration: none;
    color: #007bff;
    font-size: 1em;
}
.close-menu {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: #666;
}
/* strプレミアムモニター＆1日無料体験 下からボタン */
.apply-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  background-color: transparent;
  position: fixed;
  bottom: -100px;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
  opacity: 0;
}
.apply-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 80%;
  max-width: 600px;
  padding: 15px 20px;
  background-color: #007bff;
  border-radius: 30px;
  text-decoration: none;
  color: white;
  font-family: Arial, sans-serif;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}
.apply-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.apply-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-grow: 1;
}
.apply-title {
  font-size: 1.2em;
  font-weight: bold;
  color: white;
  margin-bottom: 5px;
}
.apply-subtitle {
  font-size: 0.9em;
  color: #ffdd00;
}
.apply-arrow {
  font-size: 24px;
  margin-left: 15px;
  color: white;
}

/* str検索・命名候補メニュー */
.floating-header {
  display: flex;
  justify-content: center;
  gap: 15px;
  position: fixed;
  top: -100px;
  left: 0;
  right: 0;
  background-color: #ffd600;
  padding: 10px 20px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: top 0.3s ease-in-out;
}
.floating-button {
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.floating-button:hover {
  background-color: #f0f0f0;
}
.icon {
  font-size: 20px;
  margin-right: 10px;
}
.icon-container {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 10px;
}
.badge {
  position: absolute;
  top: -5px;
  right: -10px;
  background-color: #ff4500;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* str検索ボックス全体 */
.search-box {
  display: flex;
  /*align-items: center;*/
  border: 1px solid #007bff;
  border-radius: 5px;
  overflow: hidden;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
.search-input {
  flex-grow: 1;
  border: none;
  padding: 10px;
  font-size: 16px;
  color: #666;
  outline: none;
}
.search-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #007bff;
  padding: 10px;
  cursor: pointer;
  border: none;
  border: solid #007bff;
  color: #fff;
}
.select-h {
  font-size: 1.1em;
  font-weight: bold;
}

/* str検索タブ */
.slide__tabs__wrap {
  position: sticky;
  top: 0;
  z-index: 1;
  overflow-x: auto;
  border-bottom: 3px solid #eee;
  background: #fff;
  white-space: nowrap;
}

.slide__tabs {
  display: flex;
  padding: 8px 8px 0 0;
}

.tab {
  padding: 12px;
  border: 1px solid #ddd;
  margin-right: 5px;
  border-radius: 5px 5px 0 0;
  color: white;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
}
.tab:nth-child(1) {
  background: #ff6f61; /* 赤 */
}
.tab:nth-child(2) {
  background: #ffcc00; /* 黄色 */
}
.tab:nth-child(3) {
  background: #5cb85c; /* 緑 */
}
.tab:nth-child(4) {
  background: #5bc0de; /* 水色 */
}
.tab:nth-child(5) {
  background: #007bff; /* 青 */
}
.tab:nth-child(6) {
  background: #6f42c1; /* 紫 */
}
.tab:nth-child(7) {
  background: #ef810f; /* オレンジ */
  /*background: #f0ad4e;*/ /* オレンジ */
}
.tab:nth-child(8) {
  background: #d9534f; /* 濃い赤 */
}
.tab:nth-child(9) {
  background: #292b2c; /* グレー */
}
.tab:nth-child(10) {
  background: #17a2b8; /* ティール */
}
.tab.slick-active {
  background: #eee;
  color: black;
  font-weight: bold;
  border-top: 5px solid #ffca00;
  border-bottom: none;
  box-sizing: border-box;
}
.slide__list {
  display: flex;
}
.item {
  width: 100%;
  text-align: center;
  background: #eee;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* str検索レイアウト */
.input-area {
  border: none;
  margin-top: 10px;
}
.radio-area {
  display: flex;
  flex-wrap: wrap;
  gap: .3em 2em;
  border: none;
}
.radio-area label {
  cursor: pointer;
}
.radio-area input[type="radio"] {
  cursor: pointer;
}

/* 検索内サブミットボタンコンテナ */
.button-container {
  padding: 20px 0;
  display: flex;
  justify-content: center; /* 中央揃え */
  width: 100%;
}

/* ボタン全体 */
.custom-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%; /* 横幅いっぱいに広げる */
  max-width: 100%; /* レスポンシブ対応 */
  padding: 15px 20px;
  background-color: #007bff;
  border-radius: 30px;
  text-decoration: none;
  color: white;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  border: none;
  cursor: pointer;
}

/* ボタンを押したときの効果 */
.custom-button:active {
  transform: scale(0.98);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

/* ボタン内部のレイアウト */
.button-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* テキスト部分 */
.button-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-grow: 1;
}

.button-title {
  font-size: 1.2em;
  font-weight: bold;
  color: white;
  margin-bottom: 5px;
}

.button-subtitle {
  font-size: 0.9em;
  color: #ffdd00;
}

/* リンクボタンコンテナ */
.button-b-container {
  padding: 20px 0;
  display: flex;
  justify-content: center; /* 中央揃え */
  width: 100%;
}

/* ボタン全体 */
.custom-b-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%; /* 横幅いっぱいに広げる */
  max-width: 100%; /* レスポンシブ対応 */
  padding: 15px 20px;
  background-color: #007bff;
  border-radius: 30px;
  text-decoration: none;
  color: white;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  border: none;
  cursor: pointer;
}

/* ボタンを押したときの効果 */
.custom-b-button:active {
  transform: scale(0.98);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

/* ボタン内部のレイアウト */
.button-b-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* テキスト部分 */
.button-b-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-grow: 1;
}

.button-b-title {
  font-size: 1.2em;
  font-weight: bold;
  color: white;
  margin-bottom: 5px;
}

.button-b-subtitle {
  font-size: 0.9em;
  color: #ffdd00;
}

/* 矢印アイコン */
.button-b-arrow {
  margin-left: 10px;
  font-size: 1.5em;
  color: white;
}

/* str検索件数 */
.search-results {
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: bold;
  text-align: right;
}
.search-results .number {
  color: #ff9999;
  font-size: 1.4em;
}
/* str検索条件テキスト */
.search-select-tag ul {
  list-style-type: none;
  padding: 0;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.search-select-tag ul li {
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 14px;
  white-space: nowrap;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
}
.search-select-tag ul li:nth-child(even) {
  font-weight: bold;
  padding: 5px 0;
  background-color: transparent;
  border: none;
}

/* str一覧ソート */
.dropdown-container {
  text-align: right;
  margin-top: 10px;
}
#sort-select {
  padding: 5px;
  font-size: 1em;
  border-radius: 5px;
  border: 1px solid #ccc;
}

/* 文字数リンク */
.search-kjmj {
  overflow-x: auto; /* 横スクロールバーを追加 */
  white-space: nowrap; /* 文字の改行を防ぐ */
}

.search-kjmj ul {
  display: flex;
  list-style: none;
  padding: 5px 0;
  margin: 10px 0;
  background-color: #f8f8f8;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.search-kjmj ul li {
  margin-right: 10px;
  padding: 5px 10px;
  font-size: 14px;
  white-space: nowrap; /* リスト項目も改行しない */
}

.search-kjmj ul li a {
  text-decoration: none;
  color: #007bff;
}

.search-kjmj ul li a:hover {
  text-decoration: underline;
}

/* str性別タブ */
.search-sex ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  width: 98%;
}
.search-sex ul li {
  flex: 1;
  text-align: center;
  /*background-color: #f8f8f8;*/
  border: 1px solid #ddd;
  border-radius: 5px 5px 0 0;
  padding: 10px;
  transition: background-color 0.3s, color 0.3s;
  cursor: pointer;
}
.search-sex ul li.bg-fff {
  background-color: #fff;
}
.search-sex ul li a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-sex ul li:hover {
  background-color: #e9ecef;
}
.search-sex ul li.active {
  background-color: #007bff;
  color: #fff;
}
.search-sex ul li:last-child {
  border-right: none;
}
i {
  font-size: 1.5em;
  margin-right: 3px;
}
.fa-male {
  color: #007bff;
}
.fa-female {
  color: #ff6f61;
}

/* str前回の条件 */
.search-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f2f2f2;
}
.search-button-z {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 600px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  padding: 15px 20px;
  color: #333;
  transition: box-shadow 0.3s;
}
.search-button:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.search-icon {
  font-size: 20px;
  color: #333;
  margin-right: 15px;
}
.search-details {
  flex-grow: 1;
}
.search-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}
.search-count {
  font-size: 14px;
  color: #333;
}
.search-subtitle {
  font-size: 14px;
  color: #666;
  margin: 5px 0 0;
}
.search-arrow {
  font-size: 16px;
  color: #888;
}

/* str明細エリア */
.name-row {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px 0;
  padding: 10px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  border: 1px solid #ddd;
  font-size: 14px;
  line-height: 1.6;
}
.name-size {
  font-size: 1.6em;
}
.detail-sub {
  margin-left: 17px;
}
.detail-link {
  display: flex;
  gap: 0 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.fa-heart {
  color: pink;
}
.fa-arrow-right {
  color: red;
}
.fa-star {
  color: #ffdd00;
}

/* atr星表示 */
.flex_star5_box {
  display: flex;
}
.star5-rating{
    position: relative;
    z-index: 0;
    display: inline-block;
    white-space: nowrap;
    color: #CCCCCC; /* グレーカラー 自由に設定化 */
    /*font-size: 30px; フォントサイズ 自由に設定化 */
}
.star5-rating:before, .star5-rating:after{
    content: '★★★★★';
}
.star5-rating:after{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #ffcf32; /* イエローカラー 自由に設定化 */
}
.star5-rating[data-rate="5"]:after{ width: 100%; } /* 星5 */
.star5-rating[data-rate="4.9"]:after{ width: 98%; } /* 星4.9 */
.star5-rating[data-rate="4.8"]:after{ width: 96%; } /* 星4.8 */
.star5-rating[data-rate="4.7"]:after{ width: 94%; } /* 星4.7 */
.star5-rating[data-rate="4.6"]:after{ width: 92%; } /* 星4.6 */
.star5-rating[data-rate="4.5"]:after{ width: 90%; } /* 星4.5 */
.star5-rating[data-rate="4.4"]:after{ width: 88%; } /* 星4.4 */
.star5-rating[data-rate="4.3"]:after{ width: 86%; } /* 星4.3 */
.star5-rating[data-rate="4.2"]:after{ width: 84%; } /* 星4.2 */
.star5-rating[data-rate="4.1"]:after{ width: 82%; } /* 星4.1 */
.star5-rating[data-rate="4"]:after{ width: 80%; } /* 星4 */
.star5-rating[data-rate="3.9"]:after{ width: 78%; } /* 星3.9 */
.star5-rating[data-rate="3.8"]:after{ width: 76%; } /* 星3.8 */
.star5-rating[data-rate="3.7"]:after{ width: 74%; } /* 星3.7 */
.star5-rating[data-rate="3.6"]:after{ width: 72%; } /* 星3.6 */
.star5-rating[data-rate="3.5"]:after{ width: 70%; } /* 星3.5 */
.star5-rating[data-rate="3.4"]:after{ width: 68%; } /* 星3.4 */
.star5-rating[data-rate="3.3"]:after{ width: 66%; } /* 星3.3 */
.star5-rating[data-rate="3.2"]:after{ width: 64%; } /* 星3.2 */
.star5-rating[data-rate="3.1"]:after{ width: 62%; } /* 星3.1 */
.star5-rating[data-rate="3"]:after{ width: 60%; } /* 星3 */
.star5-rating[data-rate="2.9"]:after{ width: 58%; } /* 星2.9 */
.star5-rating[data-rate="2.8"]:after{ width: 56%; } /* 星2.8 */
.star5-rating[data-rate="2.7"]:after{ width: 54%; } /* 星2.7 */
.star5-rating[data-rate="2.6"]:after{ width: 52%; } /* 星2.6 */
.star5-rating[data-rate="2.5"]:after{ width: 50%; } /* 星2.5 */
.star5-rating[data-rate="2.4"]:after{ width: 48%; } /* 星2.4 */
.star5-rating[data-rate="2.3"]:after{ width: 46%; } /* 星2.3 */
.star5-rating[data-rate="2.2"]:after{ width: 44%; } /* 星2.2 */
.star5-rating[data-rate="2.1"]:after{ width: 42%; } /* 星2.1 */
.star5-rating[data-rate="2"]:after{ width: 40%; } /* 星2 */
.star5-rating[data-rate="1.9"]:after{ width: 38%; } /* 星1.9 */
.star5-rating[data-rate="1.8"]:after{ width: 36%; } /* 星1.8 */
.star5-rating[data-rate="1.7"]:after{ width: 34%; } /* 星1.7 */
.star5-rating[data-rate="1.6"]:after{ width: 32%; } /* 星1.6 */
.star5-rating[data-rate="1.5"]:after{ width: 30%; } /* 星1.5 */
.star5-rating[data-rate="1.4"]:after{ width: 28%; } /* 星1.4 */
.star5-rating[data-rate="1.3"]:after{ width: 26%; } /* 星1.3 */
.star5-rating[data-rate="1.2"]:after{ width: 24%; } /* 星1.2 */
.star5-rating[data-rate="1.1"]:after{ width: 22%; } /* 星1.1 */
.star5-rating[data-rate="1"]:after{ width: 20%; } /* 星1 */
.star5-rating[data-rate="0.9"]:after{ width: 18%; } /* 星0.9 */
.star5-rating[data-rate="0.8"]:after{ width: 16%; } /* 星0.8 */
.star5-rating[data-rate="0.7"]:after{ width: 14%; } /* 星0.7 */
.star5-rating[data-rate="0.6"]:after{ width: 12%; } /* 星0.6 */
.star5-rating[data-rate="0.5"]:after{ width: 10%; } /* 星0.5 */
.star5-rating[data-rate="0.4"]:after{ width: 8%; } /* 星0.4 */
.star5-rating[data-rate="0.3"]:after{ width: 6%; } /* 星0.3 */
.star5-rating[data-rate="0.2"]:after{ width: 4%; } /* 星0.2 */
.star5-rating[data-rate="0.1"]:after{ width: 2%; } /* 星0.1 */
.star5-rating[data-rate="0"]:after{ width: 0%; } /* 星0 */
.star-rating {
  font-weight: bold;
  color: #5c5c5c;
  margin-left: 5px
}
.star-area {
  display: flex;
  gap: 0 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}

/* str関連エリア */
.connection-box {
  background-color: #fff;
  border-radius: 5px;
  margin: 30px 0;
  padding: 10px 20px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  border: 1px solid #ddd;
  font-size: 14px;
  line-height: 1.6;
}
.connection-link {
  margin-top: 10px;
  display: flex;
  gap: 0 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.connection-box h2 {
  font-size: 15px;
}

/* str性別判定 */
.sex_box_area {
  width:60%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.male_color,
.female_color {
  font-size: 14px;
  white-space: nowrap;
}
.sex_box {
  flex-grow: 1;
  height: 10px;
  border-radius: 10px;
  margin: 0 10px;
}
.male_color {
  color: #0066FF;
}
.female_color {
  color: #FF69B4;
}
.ratio_0 {background: linear-gradient(to right, #0066FF 100%, #FF69B4 0%);}
.ratio_1 {background: linear-gradient(to right, #0066FF 99%, #FF69B4 1%);}
.ratio_2 {background: linear-gradient(to right, #0066FF 98%, #FF69B4 2%);}
.ratio_3 {background: linear-gradient(to right, #0066FF 97%, #FF69B4 3%);}
.ratio_4 {background: linear-gradient(to right, #0066FF 96%, #FF69B4 4%);}
.ratio_5 {background: linear-gradient(to right, #0066FF 95%, #FF69B4 5%);}
.ratio_6 {background: linear-gradient(to right, #0066FF 94%, #FF69B4 6%);}
.ratio_7 {background: linear-gradient(to right, #0066FF 93%, #FF69B4 7%);}
.ratio_8 {background: linear-gradient(to right, #0066FF 92%, #FF69B4 8%);}
.ratio_9 {background: linear-gradient(to right, #0066FF 91%, #FF69B4 9%);}
.ratio_10 {background: linear-gradient(to right, #0066FF 90%, #FF69B4 10%);}
.ratio_11 {background: linear-gradient(to right, #0066FF 89%, #FF69B4 11%);}
.ratio_12 {background: linear-gradient(to right, #0066FF 88%, #FF69B4 12%);}
.ratio_13 {background: linear-gradient(to right, #0066FF 87%, #FF69B4 13%);}
.ratio_14 {background: linear-gradient(to right, #0066FF 86%, #FF69B4 14%);}
.ratio_15 {background: linear-gradient(to right, #0066FF 85%, #FF69B4 15%);}
.ratio_16 {background: linear-gradient(to right, #0066FF 84%, #FF69B4 16%);}
.ratio_17 {background: linear-gradient(to right, #0066FF 83%, #FF69B4 17%);}
.ratio_18 {background: linear-gradient(to right, #0066FF 82%, #FF69B4 18%);}
.ratio_19 {background: linear-gradient(to right, #0066FF 81%, #FF69B4 19%);}
.ratio_20 {background: linear-gradient(to right, #0066FF 80%, #FF69B4 20%);}
.ratio_21 {background: linear-gradient(to right, #0066FF 79%, #FF69B4 21%);}
.ratio_22 {background: linear-gradient(to right, #0066FF 78%, #FF69B4 22%);}
.ratio_23 {background: linear-gradient(to right, #0066FF 77%, #FF69B4 23%);}
.ratio_24 {background: linear-gradient(to right, #0066FF 76%, #FF69B4 24%);}
.ratio_25 {background: linear-gradient(to right, #0066FF 75%, #FF69B4 25%);}
.ratio_26 {background: linear-gradient(to right, #0066FF 74%, #FF69B4 26%);}
.ratio_27 {background: linear-gradient(to right, #0066FF 73%, #FF69B4 27%);}
.ratio_28 {background: linear-gradient(to right, #0066FF 72%, #FF69B4 28%);}
.ratio_29 {background: linear-gradient(to right, #0066FF 71%, #FF69B4 29%);}
.ratio_30 {background: linear-gradient(to right, #0066FF 70%, #FF69B4 30%);}
.ratio_31 {background: linear-gradient(to right, #0066FF 69%, #FF69B4 31%);}
.ratio_32 {background: linear-gradient(to right, #0066FF 68%, #FF69B4 32%);}
.ratio_33 {background: linear-gradient(to right, #0066FF 67%, #FF69B4 33%);}
.ratio_34 {background: linear-gradient(to right, #0066FF 66%, #FF69B4 34%);}
.ratio_35 {background: linear-gradient(to right, #0066FF 65%, #FF69B4 35%);}
.ratio_36 {background: linear-gradient(to right, #0066FF 64%, #FF69B4 36%);}
.ratio_37 {background: linear-gradient(to right, #0066FF 63%, #FF69B4 37%);}
.ratio_38 {background: linear-gradient(to right, #0066FF 62%, #FF69B4 38%);}
.ratio_39 {background: linear-gradient(to right, #0066FF 61%, #FF69B4 39%);}
.ratio_40 {background: linear-gradient(to right, #0066FF 60%, #FF69B4 40%);}
.ratio_41 {background: linear-gradient(to right, #0066FF 59%, #FF69B4 41%);}
.ratio_42 {background: linear-gradient(to right, #0066FF 58%, #FF69B4 42%);}
.ratio_43 {background: linear-gradient(to right, #0066FF 57%, #FF69B4 43%);}
.ratio_44 {background: linear-gradient(to right, #0066FF 56%, #FF69B4 44%);}
.ratio_45 {background: linear-gradient(to right, #0066FF 55%, #FF69B4 45%);}
.ratio_46 {background: linear-gradient(to right, #0066FF 54%, #FF69B4 46%);}
.ratio_47 {background: linear-gradient(to right, #0066FF 53%, #FF69B4 47%);}
.ratio_48 {background: linear-gradient(to right, #0066FF 52%, #FF69B4 48%);}
.ratio_49 {background: linear-gradient(to right, #0066FF 51%, #FF69B4 49%);}
.ratio_50 {background: linear-gradient(to right, #0066FF 50%, #FF69B4 50%);}
.ratio_51 {background: linear-gradient(to left, #FF69B4 51%, #0066FF 49%);}
.ratio_52 {background: linear-gradient(to left, #FF69B4 52%, #0066FF 48%);}
.ratio_53 {background: linear-gradient(to left, #FF69B4 53%, #0066FF 47%);}
.ratio_54 {background: linear-gradient(to left, #FF69B4 54%, #0066FF 46%);}
.ratio_55 {background: linear-gradient(to left, #FF69B4 55%, #0066FF 45%);}
.ratio_56 {background: linear-gradient(to left, #FF69B4 56%, #0066FF 44%);}
.ratio_57 {background: linear-gradient(to left, #FF69B4 57%, #0066FF 43%);}
.ratio_58 {background: linear-gradient(to left, #FF69B4 58%, #0066FF 42%);}
.ratio_59 {background: linear-gradient(to left, #FF69B4 59%, #0066FF 41%);}
.ratio_60 {background: linear-gradient(to left, #FF69B4 60%, #0066FF 40%);}
.ratio_61 {background: linear-gradient(to left, #FF69B4 61%, #0066FF 39%);}
.ratio_62 {background: linear-gradient(to left, #FF69B4 62%, #0066FF 38%);}
.ratio_63 {background: linear-gradient(to left, #FF69B4 63%, #0066FF 37%);}
.ratio_64 {background: linear-gradient(to left, #FF69B4 64%, #0066FF 36%);}
.ratio_65 {background: linear-gradient(to left, #FF69B4 65%, #0066FF 35%);}
.ratio_66 {background: linear-gradient(to left, #FF69B4 66%, #0066FF 34%);}
.ratio_67 {background: linear-gradient(to left, #FF69B4 67%, #0066FF 33%);}
.ratio_68 {background: linear-gradient(to left, #FF69B4 68%, #0066FF 32%);}
.ratio_69 {background: linear-gradient(to left, #FF69B4 69%, #0066FF 31%);}
.ratio_70 {background: linear-gradient(to left, #FF69B4 70%, #0066FF 30%);}
.ratio_71 {background: linear-gradient(to left, #FF69B4 71%, #0066FF 29%);}
.ratio_72 {background: linear-gradient(to left, #FF69B4 72%, #0066FF 28%);}
.ratio_73 {background: linear-gradient(to left, #FF69B4 73%, #0066FF 27%);}
.ratio_74 {background: linear-gradient(to left, #FF69B4 74%, #0066FF 26%);}
.ratio_75 {background: linear-gradient(to left, #FF69B4 75%, #0066FF 25%);}
.ratio_76 {background: linear-gradient(to left, #FF69B4 76%, #0066FF 24%);}
.ratio_77 {background: linear-gradient(to left, #FF69B4 77%, #0066FF 23%);}
.ratio_78 {background: linear-gradient(to left, #FF69B4 78%, #0066FF 22%);}
.ratio_79 {background: linear-gradient(to left, #FF69B4 79%, #0066FF 21%);}
.ratio_80 {background: linear-gradient(to left, #FF69B4 80%, #0066FF 20%);}
.ratio_81 {background: linear-gradient(to left, #FF69B4 81%, #0066FF 19%);}
.ratio_82 {background: linear-gradient(to left, #FF69B4 82%, #0066FF 18%);}
.ratio_83 {background: linear-gradient(to left, #FF69B4 83%, #0066FF 17%);}
.ratio_84 {background: linear-gradient(to left, #FF69B4 84%, #0066FF 16%);}
.ratio_85 {background: linear-gradient(to left, #FF69B4 85%, #0066FF 15%);}
.ratio_86 {background: linear-gradient(to left, #FF69B4 86%, #0066FF 14%);}
.ratio_87 {background: linear-gradient(to left, #FF69B4 87%, #0066FF 13%);}
.ratio_88 {background: linear-gradient(to left, #FF69B4 88%, #0066FF 12%);}
.ratio_89 {background: linear-gradient(to left, #FF69B4 89%, #0066FF 11%);}
.ratio_90 {background: linear-gradient(to left, #FF69B4 90%, #0066FF 10%);}
.ratio_91 {background: linear-gradient(to left, #FF69B4 91%, #0066FF 9%);}
.ratio_92 {background: linear-gradient(to left, #FF69B4 92%, #0066FF 8%);}
.ratio_93 {background: linear-gradient(to left, #FF69B4 93%, #0066FF 7%);}
.ratio_94 {background: linear-gradient(to left, #FF69B4 94%, #0066FF 6%);}
.ratio_95 {background: linear-gradient(to left, #FF69B4 95%, #0066FF 5%);}
.ratio_96 {background: linear-gradient(to left, #FF69B4 96%, #0066FF 4%);}
.ratio_97 {background: linear-gradient(to left, #FF69B4 97%, #0066FF 3%);}
.ratio_98 {background: linear-gradient(to left, #FF69B4 98%, #0066FF 2%);}
.ratio_99 {background: linear-gradient(to left, #FF69B4 99%, #0066FF 1%);}
.ratio_100 {background: linear-gradient(to left, #FF69B4 100%, #0066FF 0%);}

/* str名前一覧枠 */
.name-list {
  flex-direction: column;
}

.detail-other {
  margin-top: 10px;
  text-align: right;
}

.keep-button {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #f8f8f8;
  cursor: pointer;
  transition: background-color 0.3s;
  position: relative;
}

.keep-button:hover {
  background-color: #e9ecef;
}

/* ポップアップ全体 */
.keep-balloon {
  position: absolute; /* ボタンに基づく絶対位置 */
  padding: 10px 20px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  background: rgba(0, 123, 255, 0.9); /* 青色背景 */
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  white-space: nowrap; /* 文字列を1行で表示 */
  opacity: 0; /* 初期状態は非表示 */
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 9999; /* 最前面に表示 */
}

/* ポップアップ表示状態 */
.keep-balloon.show {
  opacity: 1;
  visibility: visible;
}

.keep-name-list {
  display: none;
}

/* strページネーション */
.next-page-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.next-page-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  background-color: #007bff;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  width: 350px;
  max-width: 100%;
}
.next-page-button:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
}
.button-text {
  margin-right: 10px;
}
.apply-arrow {
  font-size: 18px;
  color: white;
}
.pagination {
    display: flex;
    gap: 10px;
    justify-content: center;
    list-style: none;
    padding: 10px 0;
}

.pagination a {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-decoration: none;
    color: #007bff;
}

.pagination a:hover {
    background-color: #f0f0f0;
}

.pagination .current {
    padding: 8px 12px;
    border: 1px solid #007bff;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    font-weight: bold;
}
@media (max-width: 600px) {
  .pagination-link {
    font-size: 14px;
    padding: 6px 8px;
  }
}

.next-page-button-check {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  background-color: #ff00bb;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  width: 350px;
  max-width: 100%;
}
.next-page-button-check:hover {
  background-color: #b80287;
  transform: translateY(-2px);
}


/* ぱんくず */
.pankuz {
  background-color: #f8f8f8;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.breadcrumb {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  font-size: 14px;
  color: #666;
}
.breadcrumb li {
  display: flex;
  align-items: center;
  margin-right: 10px;
}
.breadcrumb li a {
  text-decoration: none;
  color: #666;
}
.breadcrumb li a:hover {
  text-decoration: underline;
}
.breadcrumb li span {
  color: #000;
  font-weight: bold;
}
.breadcrumb .breadcrumb-level {
  margin-left: -20px;
}

.warning-text {
  color: red;
  font-weight: bold;
}

/* プロフィールカード */
.profile-card {
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 15px 15px 0 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 0 auto;
  margin-bottom: 15px;
}

/* 画像エリア */
.profile-image {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
}

.profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* テキストエリア */
.profile-content {
  flex: 1;
}

.profile-content-title {
  font-size: 14px;
  color: #777;
  margin: 0;
}

.profile-content-name {
  font-size: 20px;
  font-weight: bold;
  margin: 5px 0;
}

.description {
  font-size: 14px;
  color: #555;
  margin: 5px 0 0;
}

.read-more {
  color: #aaa;
  font-size: 14px;
  text-decoration: none;
}

/* SNSアイコンのエリア */
.sns-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; /* アイコンの間隔 */
  margin: 0;
}

/* アイコンのリンクスタイル */
.sns-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px; /* アイコンのサイズ */
  height: 5px;
  text-decoration: none;
  font-size: 12px; /* アイコンサイズ */
  transition: color 0.3s ease, transform 0.3s ease;
}

/* ホバー時の効果 */
.sns-link:hover {
  color: #555; /* ホバー時は少し濃いグレー */
  transform: translateY(-2px); /* 少し浮く */
}
.fa-twitter:before {
  content: '𝕏';
  font-family: unset;
  font-weight: bold;
  color: #808080;
}
.fa-instagram {
  color: #808080;
}
.fa-line {
  color: #808080;
}
.fa-youtube {
  color: #808080;
}
.fa-envelope {
  color: #808080;
}

/* キープ・履歴 */
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}
.grid a {
    display: block;
    padding: 10px;
    font-size: 1em;
    text-align: center;
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #1558d6 !important;
    border-radius: 5px;
    transition: background-color 0.3s;
}
.grid a:hover {
    background-color: #e9ecef;
}
.list {
    border: 1px solid #ccc;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #f9f9f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap; /* 折り返しを防ぐ */
}

.list a {
    text-decoration: none;
    color: #1558d6 !important;
    flex: 1; /* リンク部分の幅を自動調整 */
    margin-right: 10px; /* 削除ボタンとの間隔 */
    word-break: break-word; /* テキストが長い場合に折り返し */
}

.delete-btn {
    white-space: nowrap; /* 改行を防ぐ */
    padding: 5px 10px;
    background-color: #ff4d4f; /* 削除ボタン色 */
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

.delete-btn:hover {
    background-color: #d9363e; /* ホバー時の色変更 */
}

@media (max-width: 600px) {
    .list {
        flex-direction: row; /* 横並び */
        align-items: center; /* 垂直中央揃え */
    }
    .delete-btn {
        font-size: 12px; /* スマホ向けに文字サイズ調整 */
    }
}
.delete-btn {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
}
.delete-btn:hover {
    background-color: #0056b3;
}

.voice-icon-text {
  margin-top:2em;
  margin-bottom:1em;
  cursor:pointer;
  display: flex; /* 横並びにする */
  align-items: center; /* 垂直中央揃え */
  justify-content: center; /* 左右中央揃え */
  gap: 10px; /* アイコンとテキストの間隔 */
  cursor: pointer; /* クリックできるように */
  font-size: 1.2em;
  font-weight: bold;
}

.voice-icon-text img {
  width: 24px; /* アイコンのサイズ指定 */
  height: 24px;
}

.voice-icon-text span {
  font-size: 16px; /* テキストのサイズ */
  color: #333;
}


.voice-icon-line-text {
  margin-top:1em;
  margin-bottom:1em;
  cursor:pointer;
  display: flex; /* 横並びにする */
  align-items: center; /* 垂直中央揃え */
  justify-content: center; /* 左右中央揃え */
  gap: 10px; /* アイコンとテキストの間隔 */
  cursor: pointer; /* クリックできるように */
  font-size: 1.2em;
  font-weight: bold;
}

.voice-icon-line-text img {
  width: 24px; /* アイコンのサイズ指定 */
  height: 24px;
}

.voice-icon-line-text span {
  font-size: 16px; /* テキストのサイズ */
  color: #333;
}

/* ブログカード */
.blog-card {
  display: flex;
  align-items: flex-start;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 15px 15px 0 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 10px auto;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-card:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.blog-card-tag {
  background-color: #f9a825;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 3px;
  position: absolute;
  top: 0px;
  left: 0px;
}
.blog-card-content {
  display: flex;
  gap: 15px;
}
.blog-card-image img {
  width: 150px;
  height: 100px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid #ddd;
}
.blog-card-text {
  flex: 1;
}
.blog-card-title {
  margin: 0 0 10px;
  font-weight: bold;
  font-size: 1em;
}
.blog-card-description {
  font-size: 0.85em;
  color: #555;
  line-height: 1.6;
  margin: 0;
}

/*通常リスト枠*/
#main .box-normal-list {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 1em 1em 1em 2em;
    border: 1px solid #efbf75;
    background-color: #faf6ee;
    border-radius: 10px;
}

#main .box-normal-list ul {
    padding-left: 1.5em; /* マーカーとテキストの間隔を少し縮める */
    list-style-position: outside; /* マーカーを外側に */
    line-height: 1.8;
}

#main .box-normal-list li {
    padding: 0.3em 0;
    line-height: 1.5;
    margin-left: -1.2em; /* 1行目と2行目を揃える */
}

#main .box-normal-list li::marker {
    color: #efbf75; /* マーカーの色を指定 */
}

#main .normal-list {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 2em;
}

#main .normal-list ul {
    padding-left: 1.5em; /* マーカーとテキストの距離を調整 */
    list-style-position: outside; /* マーカーを外側に配置 */
    line-height: 1.3;
}

#main .normal-list li {
    padding: 0.3em 0;
    line-height: 1.3;
    margin-left: -1.5em; /* 折り返し位置を1行目に揃える */
}

#main .box-normal-list li::marker {
    color: #efbf75; /* マーカーの色を指定 */
}

/* 吹き出し左 */
.balloon-l {
	padding-top: 20px;
	padding-bottom: 20px;
	display: flex;
	justify-content: center;
	align-items: start;
	gap: 0 22px;
}
.balloon-l img {
	width: 70px;
	height: 70px;
	object-fit: cover;
	border: 3px solid #faf6ee;
	border-radius: 50%;
}
.balloon-l p {
	position: relative;
	max-width: 200px;
	margin: 3px 0 0;
	padding: .8em 1em;
	border-radius: 5px;
	background-color: #ded5c3;
}
.balloon-l p::before {
	position: absolute;
	left: -15px;
	width: 15px;
	height: 30px;
	background-color: #ded5c3;
	clip-path: polygon(0 50%, 100% 0, 100% 100%);
	content: '';
}

/* 黄色マーカー */
span.marker {
  background: linear-gradient(transparent 70%, yellow 70%);
}

/* 引用スタンダード */
.quote-1 {
  max-width: 500px;
  padding: 1em 1.5em;
  border-left: 4px solid #dbdbdb;
}
.quote-1:has(cite) {
  padding-bottom: .5em;
}
.quote-1 p {
  margin-top: 0;
}
.quote-1 cite {
  display: block;
  font-size: .8em;
  text-align: right;
}

/* ナンバーリング */
#main .box-number-normal-list {
  margin-top: 20px;
  margin-bottom: 20px;
  list-style-type: none;
  padding: 2em 1em 2em 1.5em;
  counter-reset: li;
  background-color: #ffffff;
  line-height: 1.8em;
  border-radius: 10px;
  border: 2px solid #efbf75;
}
#main .box-number-normal-list li {
  display: flex;
  align-items: center;
  padding: 0.3em 0;
  line-height: 1.5;
}
#main .box-number-normal-list li::before {
  display: inline-block;
  min-width: 1.7em;
  margin-right: 10px;
  border-radius: 50%;
  background-color: #efbf75;
  color: #fff;
  font-weight: bold;
  font-size: .75em;
  line-height: 1.7em;
  text-align: center;
  content: counter(li);
  counter-increment: li;
  position: relative;
  top: 0;
}

/* 名前つけるボタン */
.button-on {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  margin: 0 auto;
  padding: .9em 2em;
  border: 1px solid #2589d0;
  border-radius: 5px;
  background-color: #fff;
  color: #2589d0;
  font-size: 1em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
.button-on:hover {
  background-color: #2589d0;
  color: #fff;
}

/* 共通目次 */
.mokuji-text-center {
  text-align: center; /* 左右中央揃え */
  font-size: 18px; /* フォントサイズの修正 */
  margin: 0 auto; /* 上下中央揃えには影響しませんが、ブロック要素としての余白を確保 */
  padding: 5px; /* 適度な余白 */
}
.numbered-list {
  border: 1px solid #dcdcdc; /* 薄いグレーの枠線 */
  padding: 20px; /* 内側の余白 */
  margin: 20px 0; /* 外側の余白 */
  border-radius: 5px; /* 角を少し丸める */
  background-color: #f9f9f9; /* 背景色を薄いグレーに設定 */
}

.numbered-list ol {
  list-style-type: none; /* 数字リスト */
  margin: 0;
  padding: 0; /* 左側のインデント */
}

.numbered-list ol > li {
  margin-bottom: 10px; /* 各番号付き項目の間隔 */
  line-height: 1.5; /* 改行されたときの行間を1.5に設定 */
}

.numbered-list ul {
  list-style-type: disc; /* 黒点リスト */
  margin: 5px 0 20px 30px; /* 左側のインデント */
  padding: 0;
}

.numbered-list ul > li {
  margin-bottom: 5px; /* 各黒点付き項目の間隔 */
  line-height: 1.5; /* 改行されたときの行間を1.5に設定 */
}

.numbered-list a {
  color: #686e75; /* 指定されたリンクの色 */
  text-decoration: none;
  display: inline-block;
}
.numbered-list a {
  color: #686e75 !important;
  text-decoration: none;
  display: inline-block;
}

/* まとめリスト */
.box-matome-list {
    margin-top: 20px;
    margin-bottom: 20px;
    list-style-type: none;
    padding: 1em 2.5em 2em 2.5em;
    background-color: #ffffff;
    line-height: 1.8em;
    border-radius: 10px;
    border: 2px solid #efbf75;
}

.box-matome-list li{
    margin-bottom: 20px; /* 各<li>の下に20pxの余白を追加 */
    line-height: 1.8;    /* 行間を1.8に設定 */
}
/* 名前検索用リスト 共通スタイル */
.link-m-list, .link-w-list {
  display: flex;
  flex-wrap: nowrap;
  justify-content: left;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 8px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.link-m-list::-webkit-scrollbar,
.link-w-list::-webkit-scrollbar {
  height: 6px;
}
.link-m-list::-webkit-scrollbar-thumb,
.link-w-list::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}
.link-m-list li, .link-w-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: center;
  flex: 0 0 auto;
  min-width: max-content;
}
.link-m-list li {
  background-color: #e0ecf8;
}
.link-w-list li {
  background-color: #fde2e2;
}
.link-m-list li a, .link-w-list li a {
  text-decoration: none;
  font-size: 1em;
  font-weight: bold;
}

/* メニュー */
#sub .gender-buttons .sex {
  color: orange;
  background: white;
}
#sub .button-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  font-weight: bold;
  text-decoration: none;
  border: 2px solid #ddd;
  border-radius: 25px;
  transition: 0.3s;
  cursor: pointer;
}

#sub .button-link i {
  margin-right: 8px;
  font-size: 18px;
}
/* book */
#sub .btn-book {
  color: orange;
  border-color: orange;
  background: white;
}
#sub .btn-book:hover {
  background: orange;
  color: white;
}
/* 男の子の名前*/
#sub .btn-boy {
  color: #64b5f6;
  border-color: #64b5f6;
  background: white;
}
#sub .btn-boy:hover {
  background: #64b5f6;
  color: white;
}
/* 女の子の名前 */
#sub .btn-girl {
  color: #f06292;
  border-color: #f06292;
  background: white;
}
#sub .btn-girl:hover {
  background: #f06292;
  color: white;
}
#sub .menu {
  background: white;
  border-radius: 8px;
  margin-bottom: 15px;
  padding: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
#sub .menu-title {
  font-weight: bold;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
#sub .menu-title i {
  margin-right: 8px;
}
#sub ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#sub ul li {
  padding: 8px 0;
}
#sub ul li a {
  text-decoration: none;
  color: #333;
  display: flex;
  align-items: center;
  transition: 0.3s;
}
#sub ul li a i {
  margin-right: 8px;
  color: #aaa;
}
#sub ul li a:hover {
  color: #007bff;
}
#sub ul li a:hover i {
  color: #007bff;
}

/* 一覧用テキスト */
.favorite-box {
  background-color: #f5e6e1;
  border-radius: 5px;
  text-align: center;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.main-text {
    font-weight: bold;
}
.sub-text {
    text-decoration: underline;
}

/* まとめ用関連検索 */
.related-search-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  justify-content: center;
  margin-bottom: 30px;
  max-width: 100%;
}
.related-search-grid a {
  display: inline-block;
  padding: 10px 15px;
  border: 1px solid #aaa;
  border-radius: 5px;
  text-decoration: none;
  color: #666;
  font-size: 16px;
  text-align: center;
  min-width: 80px;
  max-width: 100%;
  background-color: #fff;
  word-break: break-word;
}
.related-search-grid a:hover {
  background-color: #f0f0f0;
}

/* 記事リンク */
.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tag-name {
  padding: 10px 16px;
  border-radius: 20px;
  font-size: 16px;
  display: inline-block;
  white-space: nowrap;
  font-weight: bold;
  transition: all 0.3s ease;
}
.blue .tag-name { background-color: #e0ecf8; }  /* 薄いブルー */
.pink .tag-name { background-color: #fde2e2; }  /* 薄いピンク */
.yellow .tag-name { background-color: #fdf2b0; }  /* 薄い黄色 */

.tag-name a {
text-decoration: none;
color: #333;
display: block;
width: 100%;
height: 100%;
}
.blue .tag-name:hover { background-color: #c9dff7; }
.pink .tag-name:hover { background-color: #f8cdd2; }
.yellow .tag-name:hover { background-color: #fbe58e; }

/* ダークボックス */
.dark-box {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 1.5em 2.5em 1.5em 2em;
  border: 1px solid #f0e9dd;
  background-color: #f0e9dd;
  border-radius: 10px;
}

/* ポイント */
.free-box {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 2px #efbf75;
    border-radius: 8px;
}
.free-box .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #faf6ee;
    color: #efbf75;
    font-weight: bold;
}
.free-box p {
    margin: 0; 
    padding: 0;
}

.line-list {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.line-list li {
    padding: 10px;
}
/* ナンバーリスト記事 */
  .numbered-a-list {
  width: calc(100% - 60px); /* 画面幅 - 左右30px */
  margin: 0 auto; /* 中央寄せ */
  margin-left: 20px;
  margin-right: 20px;
}
.numbered-a-list ul {
  list-style: none;
  background: #f7f1e5;
  padding: 20px;
  border-radius: 5px;
  counter-reset: list-counter;
}
.numbered-a-list li {
  position: relative;
  padding-left: 40px;
  margin-bottom: 10px;
  font-size: 16px;
  color: #555;
  counter-increment: list-counter;
}
.numbered-a-list li::before {
  content: counter(list-counter);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #e2b774;
  color: white;
  font-size: 12px;
  font-weight: bold;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* 枠 */
.waku {
  padding: 30px 30px;
  border: 1px solid #efbf75;
  border-radius: 10px;
}

/* box memo */
.box-007 {
  /*max-width: 400px;*/
  margin: 0 auto;
  border: 2px solid #ffb36b;
  border-radius: 5px;
  font-size: 16px;
  /*color: #333333;*/
}

.box-007 div {
  display: inline-flex;
  align-items: center;
  column-gap: 4px;
  position: relative;
  top: -13px;
  left: 10px;
  margin: 0 7px;
  padding: 0 8px;
  background: #faf6ee;
  color: #ffb36b;
  font-weight: 600;
  vertical-align: top;
  font-size: 18px;
}
.box-007 div::before {
  content: "\f304";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 22px;
  color: #ffb36b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}
.box-007 p {
  margin: 0;
  padding: 0 1.5em 1em;
}

/* box ？ */
.box-006 {
  display: flex;
  align-items: center;
  grid-gap: 0 .7em;
  margin: 0 auto;
  padding: 1em;
  border-radius: 5px;
  background-color: #fff9e5;
  font-family: Arial, sans-serif;
}
.box-006::before {
  content: "\f059";
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  font-size: 24px;
  color: #ffb36b;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.box-006 p {
  margin: 0;
  padding: 0 0 0 .7em;
  border-left: 1px solid #ffb36b;
}

/* ブログ共通ボタン */
.premium-button01-area {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.premium-button01 {
  display: inline-block;
  padding: 15px 40px;
  text-decoration: none;
  color: #ffffff !important;
  background-color: #f0b974;
  border-radius: 50px;
  font-size: 16px;
  text-align: center;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.premium-button01:hover {
  background-color: #e8a85f;
  transform: scale(0.95);
}
/* グローバルメニュー */
.global-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
  background-color: #fff;
}
.global-menu .global-menu-item {
  border-radius: 12px;
  padding: 10px;
  text-align: center;
  width: 150px;
  transition: transform 0.3s ease;
}
.global-menu .global-menu-item img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  cursor: pointer;
}

/* PC用: ホバー時に少し上に移動 */
@media (min-width: 768px) {
  .global-menu .global-menu-item:hover {
    transform: translateY(-10px);
  }
}

/* ブログ共通ボタン */
.premium-button02-area {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.premium-button02 {
  display: inline-block;
  padding: 20px 50px;
  text-decoration: none;
  color: #ffffff !important;
  background-color: #007bff;
  border-radius: 50px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.premium-button02:hover {
  background-color: #0056b3;
  transform: scale(1.05);
  box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.3);
}

.price-content {
  text-align: center;
  margin: 40px auto;
  max-width: 320px;
}
.price-heading {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 6px;
}
.price-info {
  color: #666;
  font-size: 14px;
  margin-bottom: 20px;
}
.price-box {
  margin-bottom: 20px;
}
.sale-label {
  background-color: #f87d6f;
  color: white;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 12px;
  display: inline-block;
  margin-bottom: 8px;
}
.price {
  font-size: 24px;
  color: #e85c4f;
  font-weight: bold;
}
.original-price {
  text-decoration: line-through;
  font-size: 14px;
  color: #999;
  margin-right: 6px;
  vertical-align: middle;
}
.sale-period {
  font-size: 12px;
  color: #e85c4f;
  margin-top: 4px;
}

.rating {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  font-size: 14px;
  color: #555;
}

.normal-list-new ul {
  list-style: none;
  margin-left: 5px;
  padding-left: 0;
  line-height: 1.5;
}

.button-submit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  margin:0 auto;
  padding: .9em 2em;
  border: none;
  border-radius: 25px;
  box-shadow: 0 2px 3px rgb(0 0 0 / 25%), 0 2px 3px -2px rgb(0 0 0 / 15%);
  background-color: #2589d0;
  color: #fff;
  font-weight: 600;
  font-size: 1em;
  cursor:pointer
}
.button-submit::after {
  transform: rotate(45deg);
  width: 5px;
  height: 5px;
  margin-left: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  content: '';
}
.button-submit:hover {
  background-color: #1579c0;
}

.h3 {
  margin-bottom: 20px;
  padding: .7em .7em .7em .7em;
  border-left: 5px solid #fcd38b;
  border-bottom: 1px dashed #efbf75;
  background-color: #faf6ee;
  color: #4d5156;
  font-size: 18px;
}