@charset "UTF-8";

input[type=button], input[type=reset], input[type=search], input[type=submit], select {
	-webkit-appearance: none
}

a, button, input, select, textarea {
	background-color: transparent;
	color: inherit
}

*, .srch_ttl h2, img {
	margin: 0;
	padding: 0
}

body, footer, header, html, table {
	width: 100%
}

.alignnone, .btn, .btn-style-02, .button, .contact_form .sbmt, .inpost_thumb, .reco_right figure, .tac {
	text-align: center
}

ol, ol li, ul, ul li {
	padding-left: 0
}
em{
	font-style:normal;
}

#feature_alert, .fred {
	color: red
}

.atoz .title span, .btn-style-02 {
	font-family: Montserrat, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif
}

.main-img-area .text-box .title, .main-img-area .text-box p {
	text-shadow: #fff 1px 1px 10px, #fff -1px 1px 10px, #fff 1px -1px 10px, #fff -1px -1px 10px
}

.name_r, .search-box .short.blk_right {
	float: right
}

html {
	overflow-y: scroll;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, :after, :before {
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background-repeat: no-repeat
}

.clm_post ol, .clm_post ul {
	margin-left: 2.5rem;
	margin-right:10px;
	margin-bottom: 2rem
}

div.hdn {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	overflow: hidden
}

.sub_nav, article, aside, canvas, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
	display: block
}

.fclear, section {
	clear: both
}

figcaption {
	display: none
}

blockquote, q {
	quotes: none
}

.bread_crumb_list ul li:last-child:after, .name-detail .pagetitle .fav-btn:after, .name-list .title .fav-btn:after, blockquote:after, blockquote:before, .ft-top .ft-list:last-of-type:after, q:after, q:before {
	content: none
}

::placeholder {
	color: #999
}

[role=button], [type=button], [type=reset], [type=submit], button {
	cursor: pointer
}

[disabled] {
	cursor: default;
	color:#ccc !important;
	text-decoration:none !important;
}

select option:disabled {
	background-color: #f2f2f2
}

textarea {
	overflow: auto;
	resize: vertical
}

button, input, optgroup, select, textarea {
	font: inherit
}

.column-list .text p{
	color:#333;
}

.column-list .text, .name-detail .text-area, body {
	line-height: 1.6
}

button {
	overflow: visible
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
	border-style: 0;
	padding: 0
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button:-moz-focusring {
	outline: ButtonText dotted 1px
}

a:focus, img {
	outline: 0
}

[type=reset], [type=submit], button, html [type=button] {
	-webkit-appearance: button
}

button, select {
	text-transform: none
}

button, input, select, textarea {
	border-style: none
}

select {
	-moz-appearance: none
}

select::-ms-expand {
	display: none
}

select::-ms-value {
	color: currentColor
}

[type=search] {
	-webkit-appearance: textfield;
	outline-offset: -2px
}

::-moz-selection {
	background-color: #b3d4fc;
	color: #000;
	text-shadow: none
}

::-moz-selection, ::selection {
	background-color: #b3d4fc;
	color: #000;
	text-shadow: none
}

ol, ul {
	list-style: none
}

.clm_post ol {
	list-style: decimal
}

.clm_post ul {
	list-style: disc
}

.clm_post ol li, .clm_post ul li, .kt_more p {
	margin-bottom: .5rem
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

caption, th {
	text-align: left
}
.italic{
	font-style:italic;
}

a {
	-webkit-text-decoration-skip: objects;
	-webkit-tap-highlight-color: transparent;
	-webkit-transition: background-color linear, color linear, opacity linear;
	transition: background-color linear, color linear, opacity linear
}

.btn-style-01, .ttl-style-02, .ttl-style-02 span, body {
	background-color: #fff
}

a:active, a:hover {
	outline-width: 0
}

:after, :before {
	text-decoration: inherit;
	vertical-align: inherit
}

.back_to_home a:hover, .bread_crumb_list li a:hover, .card-all a, .column .side-ttl a, .column a:hover, .column-list .more:hover, .fred, .mean_k_list li a:hover, .side-list-box .side-list a:hover, .side-bar .side-ttl a:link, .tag-list-box .more:hover, a:link, a:visited, .ft-top .ft-list li a:hover {
	text-decoration: none
}

.fred {
	font-style: normal
}

html {
	font-size: 75%;
	min-height: 100%;
	overflow-x: hidden
}

body {
	color: #333;
	/*font-family: HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;*/
	font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
	font-size: 1.5rem;
	margin: 0 auto;
	font-weight: normal;
	word-wrap: break-word
}

#love_ukraine_modal .mds, h1, p.mds {
	font-weight: 700
}

img {
	max-width: 100%;
	height: auto;
	border: none;
	vertical-align: middle
}

.column a, a.link_green {
	text-decoration: underline;
	color: #2563eb
}

.iine input[type=image]:hover, .pronunciation:hover, .sh_btns:hover, .fav_btn:hover, .voice_icon:hover, a:active, a:hover, a:hover img, a.link_green:hover, .act img:hover {
	opacity: .7;
	zoom: 1;
	text-decoration: none;
	cursor: pointer
}

.main-all a.no_underline{
	text-decoration:none;
}

@-ms-viewport {
	width: auto;
	initial-scale: 1
}

.contents-wrap {
	margin: 0 auto 40px
}

@media screen and (max-width:767px) {
	html {
		font-size: 70%;
	}
	body {
		font-size: 1.4rem;
	}

	.contents-wrap, .contents-wrap .side-bar, .contents-wrap .sub-contents, .contents-wrap .top-contents {
		width: 100%;
		max-width: 100%
	}
	#main{
		margin-bottom:20px;
	}

	footer, header {
		width: 100%
	}

	.contents-wrap {
		margin: 0 auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column
	}
}

@media screen and (min-width:768px) {
	.contents-wrap {
		display: block
	}

	.contents-wrap::after {
		content: "";
		clear: both;
		display: block
	}

	#main {
		float: left;
		margin-bottom: 40px
	}

	#side {
		float: right;
		margin-bottom: 0
	}

	footer {
		clear: both
	}

	#g-nav {
		display: block !important
	}

	/* Desktop: Right-align navigation items with even spacing */
	body .hdr-r {
		justify-content: flex-end;
		gap: 12px;
	}

	#menu-trigger-2 {
		display: none;
	}
}

@media screen and (min-width:768px) and (max-width:1065px) {
	#main, #side {
		width: 96%;
		margin-left: 2%;
		margin-right: 2%;
		float: none
	}

	.ft-top {
		width: auto !important;
		padding: 30px 0 !important
	}

	.search-box .short {
		width: 48% !important
	}

	.main-img-area {
		margin-bottom: 10px !important
	}

	.main-img-area .text-box {
		padding: 30px 0 0 !important
	}

	.shortcut-link {
		padding: 0 0 30px !important
	}

	.main-img-area .inner {
		padding: 0 2%
	}

	.btn-style-01 {
		padding: 10px 15px 10px 30px !important;
		margin: 0 10px 10px 0 !important;
		font-size: 1.4rem !important
	}

	.btn-style-01:before {
		left: 15px !important
	}

	.column.sec02.clm_post img {
		margin: 0 auto 15px !important;
		display: inherit
	}

	.column.sec02.clm_post img.voice_icon {
		display: inline-block;
		vertical-align: text-top;
		margin: 0 10px !important
	}

	.side-list-box.column .side-list li {
		width: 50%;
		float: left
	}

	.side-list-box .side-ttl {
		clear: both
	}

	.ft-top .ft-list:first-of-type {
		padding-right: 0 !important
	}

	.ft-top .ft-list {
		margin-right: 1% !important;
		margin-left: 1% !important;
		width: 31% !important
	}

	.atoz .atoz-list a {
		width: 6.1vw !important;
		height: 6.1vw !important
	}
}

.btn-style-01 {
	display: inline-block;
	/*color: #f59e0b;*/
	color:#2563eb;
	font-size: 1.6rem;
	font-weight: 600;
	/*border: 3px solid #fbbf24;*/
	border-radius: 30px;
	box-shadow: 0 2px 1px 0 rgba(0, 0, 0, .1);
	padding: 13px 31px 13px 50px;
	margin: 0 15px 15px 0;
	position: relative
}

.btn-style-01:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 30px;
	margin: auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 8px;
	border-color: transparent transparent transparent #fff;
}

/*
.btn-style-01:hover {
	color: #fff;
	font-weight: 600;
	background-color: #f59e0b;
	opacity: 1
}

.btn-style-01:hover:before {
	background: url(/images/common/ar_w.png) 0 0/8.75px 14px;
	width: 8.75px;
	height: 14px
}*/

.btn-style-02 {
	color: #fff;
	font-size: 1.6rem;
	font-weight: 600;
	border-radius: 8px;
	/*background-image: -webkit-gradient(linear, left top, left bottom, from(#f5d060), to(#e5a610));
	background-image: linear-gradient(180deg, #f5d060 0, #e5a610 100%);
	box-shadow: 0 1px 2px 0 rgba(121, 154, 71, .7);*/
	background-color:#2563eb;
	padding: 15.5px 75px
}

.btn, .button input, .search-box .button input, .btn_only a , .login-submit input[type=submit]{
	color: #fff;
	font-weight: 700;
	clear: both;
	font-size: 1.7rem;
	border: none !important;
	border-radius: 8px;
	/*background-image: -webkit-gradient(linear, left top, left bottom, from(#f5d060), to(#e5a610));
	background-image: linear-gradient(180deg, #f5d060 0, #e5a610 100%);
	box-shadow: 0 1px 2px 0 rgba(121, 154, 71, .7);
	transition: linear;*/
	background-color:#2563eb;
	padding: 10px 0;
	/*height: 50px;*/
	margin-top: 20px;
	width: 70%;
	text-decoration: none !important;
}

.column-list dt img, .column.sec02 img, .side-list-box.column .side-list img, .ft-column-list li img, .whatsnew dd img {
	box-shadow: 2px 2px 6px rgba(138, 138, 123, .5);
	border-radius: 4px;
}

.btn, .btn_only a, .login-submit{
	display: block;
	margin-left: auto;
	margin-right: auto;
	color:#fff !important;
	text-align: center;
}

.btn_only a{
	text-decoration:none !important;
}

.btn.top_more, .sub-contents .ad-area {
	margin-bottom: 25px
}

.btn:hover, .btn_s:hover, .button input:hover, input[type=submit]:hover {
	opacity: .7;
	zoom: 1
}

.ttl-style-01 {
	clear: both;
	color: #333;
	font-size: 2.4rem;
	font-weight: 400;
	padding: 0 15px;
	border-left: 5px solid #f59e0b;
	margin-bottom: 20px;
	position: relative
}

#first-name-search, #last-name-search, #name-search, #eng-first-name-search, #eng-last-name-search {
	border-left: none;
	padding-left: 0;
	margin-right: 15px;
	vertical-align: middle
}

#name-search .name_search_icon, .wiki ul {
	margin: 0 10px 0 0
}

.fs, .name-list .title .fav_btn, .srch_radio_list, .srch_radio_r {
	font-size: 80%
}

.ttl-style-02 {
	clear: both;
	position: relative;
	margin: 40px 0 20px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 0
}

/*.main-img-area, .name-list li:nth-of-type(odd), .search-box {
	background-color: #f0f4f9
}*/
.main-img-area, .search-box {
	background-color: #f0f4f9
}

.ttl-style-02 span {
	font-size: 2.2rem;
	font-weight: 400;
	padding: 0 15px 0 0;
	display: block;
	max-width: 90%
}

.ttl-style-02:after, .ttl-style-02:before {
	content: "";
	height: 1px;
	background-color: #f5d060;
	display: block
}

/*.ttl-style-02:before {
	-ms-flex-preferred-size: 10px;
	flex-basis: 10px
}*/

.ttl-style-02:after {
	-webkit-box-flex: 2;
	-ms-flex-positive: 2;
	flex-grow: 2
}

.search-box {
	width: 100%;
	border: 5px solid #a3b8d8;
	padding: 20px;
	margin-bottom: 20px
}

.search-box td, .search-box th {
	display: block;
	font-size: 1.5rem;
	font-weight: 500;
	margin-bottom: 3px
}
.search-box td{
	margin-bottom: 10px
}

.search-box .short {
	width: 290px;
	float: left
}

.search-box input, .search-box select {
	padding: 8px;
	font-weight: 400;
	border: 1px solid #ccc;
	width: 100%;
	border-radius: 4px;
	margin-bottom: 5px;
	background-color:#fff;
}


.search-box select {
	background: url(/images/common/arrow_selectdown.png) right 50%/41px no-repeat, 0 0/100% #fff;

	padding-right: 45px; /* 背景画像の幅より少し大きめのパディングを追加 */
    text-overflow: ellipsis; /* 文字が切れる際に「...」を表示 */
    white-space: nowrap; /* テキストを1行に制限 */
    overflow: hidden; /* コンテンツがはみ出るのを隠す */
}

.love_ukraine, .srch_radio_list li {
	display: inline-block;
	margin: 0 0 0 10px
}
.srch_radio_list li{
	margin:0 10px 0 0;
}
.srch_radio {
	display: flex;
	justify-content: space-between;
	align-items: normal;
}
.srch_radio_list {
	flex: 0 0 70%; /* 左側を70%の幅で固定 */
}
.srch_radio.only_r {
	justify-content:flex-end;
}
.search-box input.single_check {
	width: auto;
	display: inline-block;
	vertical-align: middle;
	margin: 0 5px;
	padding: 0
}
.exact_check{
	margin-left:5px !important;
}

.srch_fw {
	display: flex !important;
	justify-content: space-between
}

.column #toc_container .toc_title a, .meaning_list a, .name-list .more, .side-list-box.column .side-list a:hover, .srch_fw a {
	color: #2563eb
}

.srch_fw_r {
	margin-top: auto;
	font-size: 1.3rem;
	line-height: 1.8rem
}

.name_search_icon {
	margin: 0 5px 0 0;
	position:relative;
	top:-1px;
}
.ttl-style-01 .name_search_icon {
	top:-3px;
}

/*3列構成*/
.clm3 {
	display: flex !important; /* フレックスボックスとして表示 */
	justify-content: space-between; /* 各アイテム間に均等なスペースを設定 */
	flex-wrap: wrap; /* 必要に応じて折り返し */
}

.clm3 dl {
	flex: 1 1 33%; /* 3列配置、各列は全体の約33%の幅を使用 */
	box-sizing: border-box; /* パディングとボーダーを幅に含む */
	padding: 0 1%; /* 内側のパディングで隙間を調整 */
}

.clm3 dd {
	width: 100%; /* セレクトボックスをdlの幅全体に拡張 */
}
.clm3 dl:first-child {
	padding-left: 0; /* 最初の要素の左パディングを削除 */
}

.clm3 dl:last-child {
	padding-right: 0; /* 最後の要素の右パディングを削除 */
}


.column-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	align-items: flex-start
}

.column-list dd, .column-list dt {
	width: 316px;
	margin-bottom: 22px;
	position: relative
}

.column-list dd {
	width: 396px
}

.column-list dt {
	min-height: 220px;
	overflow: hidden
}

.column-list dt img {
	position: absolute;
	margin: auto;
	top: 0;
	height: auto;
	width: 95%
}

.column-list .ttl {
	color: #2563eb;
	font-size: 1.8rem;
	font-weight: 600;
	padding-bottom: 13px
}
.column-list .ttl a{
	text-decoration:none;
}

.column-list .text a {
	text-decoration: none;
	color:#333;
}

#toc_container a:hover, .bread_crumb_list li a, .card-all a:hover, .column-list .more, .side-list-box .side-list a, .tag-list-box .more {
	text-decoration: underline
}

.column-list .more {
	color: #2563eb;
	display: block;
	text-align: right;
	margin-top: 10px
}

.name-detail .text-area p, .name-list, .tag-list-box, .tax-gender-btm-ad .ad-res-text, main .mb20, main p.mb20 {
	margin-bottom: 20px
}

.name-list{
	border-top:dashed 1px #7b9bc7;
	clear:both;
}
.name-list li {
	padding: 15px;
	position: relative;
	content-visibility: auto;
	contain-intrinsic-size: 124px;
	border-bottom:dashed 1px #7b9bc7;
}

.name-list .title a {
	color: #2563eb;
	font-size: 2rem;
	font-weight: 600;
	display: inline-block;
	position: relative
}
.name-list.eng-list .title a {
	color:#0052A5;
}

.name-list.eng-list{
border-top:dashed 1px #ccc;
}
.name-list.eng-list li{
	border-bottom:dashed 1px #ccc;
}

.atoz .atoz-list a, header .header-inner {
	display: -webkit-box;
	display: -ms-flexbox
}

.name-detail .pagetitle{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
}
.name-detail .pagetitle .detail_ttl_r {
	white-space: nowrap;
}
.name-detail .pagetitle .detail_ttl_r img{
	vertical-align: middle;
}

.detail_ttl_r .fav_btn img{
	width:20px !important;
	height:auto !important;
}
.detail_ttl_r .fav_btn, .detail_ttl_r .sh_btns, .detail_ttl_r .cp_btn{
	margin-left:10px !important;
}

.name-list .title em, .name-list .title h3 {
	font-style: normal;
	margin-right: 0;
	font-size:2rem;
	word-break: break-all;
	overflow-wrap: anywhere;
	vertical-align:middle;
}
.name-detail .pagetitle em{
	font-size:3rem;
}

.name-detail .pagetitle span{
	font-size:1.8rem;
	margin-left:5px;
	vertical-align: middle;
}
.pagetitle.with_txt span{
	font-size:1.8rem;
}

.blocker.behind, .kanji_name ruby:hover, .name-detail .pagetitle a:hover:after, .name-list .title a:hover:after {
	background-color: transparent
}

.name-list .title .icon {
	width: 20px;
	height: 20px;
	margin: 0 0 0 10px;
	vertical-align: middle
}

.name-list .wpfp-span {
	font-weight: 400;
	margin: 0
}

.atoz .title:before, .name-list .tn {
	margin: auto;
	top: 0;
	position: absolute;
	bottom: 0
}

.name-list .wpfp-span a {
	font-weight: 400;
	font-size: 80%
}

.name-detail .pagetitle .fav-txt {
	font-size: 1.4rem;
	vertical-align: middle
}

.name-list .tn {
	width: 145px;
	height: 88px;
	padding: 0;
	overflow: hidden;
	right: 25px
}

.name-list .tn img {
	width: 100%;
	height: auto
}

.name-list .tn-box div:not(.tn) {
	padding-right: 145px
}

.name_r {
	text-align: right;
	font-size: 80%
}

.name_r a {
	font-size: 80% !important;
	font-weight: 400 !important
}

.atoz, main .mb30 {
	margin-bottom: 30px
}

.atoz .title {
	font-size: 2.2rem;
	font-weight: 600;
	position: relative;
	padding-left: 0;
	margin-bottom: 6px;
	clear:both;
}

.atoz .title span {
	font-size: 1.5rem;
	padding-left: 8px
}

.atoz .title:before {
	content: "";
	background: url(/images/common/icon_girl.png) left 50%/cover no-repeat;
	width: 32px;
	height: 32px;
	left: 0
}

.atoz.eng .title:before {
	background: url(/images/common/icon_eng.svg) left 50%/cover no-repeat;
}

.atoz .atoz-list {
	overflow: hidden;
	margin-bottom: 10px
}

.atoz .atoz-list a {
	float: left;
	font-size: 2.6rem;
	border-radius: 8px;
	background-color: #4a6aaa;
	color: #fff;
	width: 44px;
	height: 44px;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin-right: 10px;
	margin-left: 0;
	margin-bottom: 10px;
	cursor: pointer
}

.atoz .atoz-list a.active, .atoz .atoz-list a:hover {
	color: #fff;
	background-color: #34508a;
	opacity: 1;
	zoom: 1
}

.atoz.boy .title:before {
	background: url(/images/common/icon_boy.png) left 50%/cover no-repeat
}

.atoz.boy .atoz-list a {
	background-color: #cde9f9
}

.atoz .atoz-list a.no-result,
.atoz.boy .atoz-list a.no-result,
.atoz.girl .atoz-list a.no-result,
.atoz.unisex .atoz-list a.no-result,
.atoz.last-name .atoz-list a.no-result {
	background-color: #f2f2f2;
}

.atoz.boy .atoz-list a.active, .atoz.boy .atoz-list a:hover {
	background-color: #8ecdf3
}

.atoz.unisex .title:before {
	background: url(/images/common/icon_unisex.png) left 50%/cover no-repeat
}

.atoz.unisex .atoz-list a {
	background-color: #fae8a8
}

.atoz.unisex .atoz-list a.active, .atoz.unisex .atoz-list a:hover {
	background-color: #f5d060
}
.atoz.eng .atoz-list a {
	background-color: #0052A5; /*#1976D2*/
	color:white;
}

.atoz.eng .atoz-list a:hover, .atoz.eng .atoz-list a.active{
	background-color: #02396f;
}

@media screen and (max-width:400px) {
	.atoz .atoz-list .inner {
		width: 95%
	}
}

@media screen and (max-width:350px) {
	.atoz .title span {
		display: block
	}

	.atoz .atoz-list {
		margin-right: -8px
	}

	.atoz .atoz-list .inner {
		width: 313px
	}

	.atoz .atoz-list .inner a {
		margin-right: 8px
	}
}

.ad-area {
	margin: 25px 0
}

.ad-area.mt15, .name-detail.sec04 .name-list {
	margin-top: 15px
}

header {
	margin: 0 auto
}

header .header-inner {
	width: 100%;
	max-width: 1068px;
	margin: 0 auto;
	padding: 20px 0;
	display: flex;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-ms-flex-line-pack: center;
	align-content: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between
}

.hdr-r .fav-btn, body .hdr-r {
	display: -webkit-box;
	display: -ms-flexbox
}

header .header-logo-area .header-logo {
	font-weight: 400;
	color: #2563eb;
	font-size: 0;
	display: inline-block;
	position: relative;
	padding-left: 66px;
	vertical-align: middle
}

header .header-logo-area .header-logo a:before {
	content: "";
	display: inline-block;
	background: url(/images/common/logo.svg) center left/contain no-repeat;
	width: 64px;
	height: 40px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto
}

header .header-logo-area .header-logo a {
	font-size: 0;
	background: url(/images/common/world-names-info.svg) center left/contain no-repeat;
	width: 262px;
	height: 33px;
	display: inline-block
}

header .header-logo-area p {
	font-size: 1rem;
	display: inline-block;
	margin-left: 0;
	bottom: 1px;
	vertical-align: middle
}

.act .fav_btn, .ccp_ul ul, header .header-logo-area p.header-logo {
	margin-left: 0
}

@media screen and (max-width:980px) {
	header .header-logo-area p {
		display: none
	}
}

body .hdr-r {
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	align-items: center
}

.gen_loading, .pagetop-btn, .wp-caption-text, header #menu-trigger, header .menu-bg {
	display: none
}

main .hdr-r {
	width: 124px;
	margin: 0 auto
}

main.page {
	margin-bottom: 40px
}

.hdr-r .fav-btn {
	color: #999;
	border-radius: 30px;
	font-weight: 700;
	border: 1px solid #7ed0d8;
	/*width: 180px;*/
	padding:3px 20px;
	min-height: 40px;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	/*margin-right: 10px;*/
	/*font-size: 1.3rem;*/
	cursor: pointer;
	max-width:240px;
	word-break: break-all;
}

.hdr-r .fav-btn i, footer .fav-btn i {
	color: #fff;
	padding-right: 8px
}

.hdr-r .fav-btn.active i, footer .fav-btn i {
	color: #ff8b8b
}

.hdr-r .fb-btn, .hdr-r .gp-btn, .hdr-r .tw-btn {
	background-color: #7ed0d8;
	width: 38px;
	height: 38px;
	color: #fff;
	border-radius: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin-left: 5px;
	cursor: pointer
}

.hdr-r li.sh{
	line-height:0;
}

.hdr-r .fb-btn {
	font-size: 1.8rem
}

.hdr-r .tw-btn {
	font-size: 1.6rem
}

.hdr-r .gp-btn {
	font-size: 2.2rem
}

.ft-top, #g-nav .list {
	display: -webkit-box;
	display: -ms-flexbox
}

#g-nav {
	background-color: #34508a;
	height: 55px;
	display: none
}

#g-nav .g-nav-inner {
	width: 100%;
	max-width: 1068px;
	margin: 0 auto
}

#g-nav .list {
	display: flex;
	-ms-flex-line-pack: center;
	align-content: center;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap
}

#g-nav .list li {
	margin: 0;
	position: relative
}

/*#g-nav .list > li > a {*/
#g-nav .list li a {
	color: #fff;
	text-decoration: none;
	display: block;
	width: 100%;
	height: 55px;
	padding: 0 10px;
	text-align: center;
	line-height: 1.2;
	font-size: 1.4rem;
	font-weight: 600;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}
/*
#g-nav .list li:first-child a{
	padding:0 10px 0 0;
}
#g-nav .list li:last-child a{
	padding:0 0 0 10px;
}*/

/*#g-nav .list > li.current a, #g-nav .list > li > a:hover {*/
#g-nav .list li.current a, #g-nav .list li a:hover {
	background-color: #4a6aaa;
	opacity: 1;
	zoom: 1
}

.pagetop-btn {
	position: fixed;
	bottom: 14px;
	right: 16px;
	width: 56px;
	height: 56px;
	cursor: pointer;
	z-index: 9999
}

footer {
	background-color: #e8edf5;
	position: relative
}

.ft-top {
	max-width: 1068px;
	margin: 0 auto;
	padding: 30px 0;
	display: flex;
	flex-wrap: wrap;
}

.ft-top .ft-list {
	margin-right: 20px;
	position: relative;
	flex: 1;
}

.ft-top .ft-list:last-of-type {
	margin-right: 0;
}

.ft-top .ft-list li a {
	display: block;
	font-size: 1.4rem;
	font-weight: 600;
	margin-bottom: 9px;
	text-decoration: none
}

.ft-top .ft-list li .icon {
	width: 20px;
	height: 20px;
	margin-right: 5px;
	margin-left: 5px
}

.ft-top .ft-list:after {
	content: "";
	display: block;
	background-color: #c5d5e8;
	width: 1px;
	height: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto
}

.ft-top .ft-list:first-of-type, .ft-top .ft-list:nth-of-type(2) {
	padding-right: 25px
}

.ft-top .ft-column-list li a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: start
}

.ft-top .ft-column-list li img {
	margin-right: 10px;
	margin-bottom: 5px
}

.ft-bottom {
	background-color: #34508a
}

.ft-bottom p {
	line-height: 1.2;
	font-size: 1.2rem;
	text-align: center;
	padding: 15px 0;
	color: #fff;
	font-weight: 500
}

/* Dark Mode Toggle in Footer */
.ft-dark-mode {
	text-align: center;
	padding: 30px 0 0 0;
	flex-basis: 100%;
	width: 100%;
}

.ft-dark-mode button {
	background-color: #fff;
	border: 2px solid #34508a;
	color: #333;
	padding: 10px 20px;
	font-size: 1.4rem;
	font-weight: 500;
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.ft-dark-mode button:hover {
	background-color: #34508a;
	color: #fff;
	transform: translateY(-2px);
}

.ft-dark-mode button:active {
	transform: translateY(0);
}

#ft-dark-mode-status {
	font-weight: 700;
	color: #34508a;
}

.ft-dark-mode button:hover #ft-dark-mode-status {
	color: #fff;
}

.ft-sites{
	text-align: center;
	margin-bottom:20px;
}
.ft-sites a{
	text-decoration:underline;
}
.ft-sites a:hover{
	text-decoration: none;
}

.side-bar .name-list, .side-ad-area {
	margin-bottom: 28px
}
.side-ad-area img{
	box-shadow: 2px 2px 6px rgba(138,138,123,.5);
}
.side-list-box .side-ttl {
	color: #1e838d;
	font-size: 1.5rem;
	font-weight: 600;
	border-radius: 4px;
	background-color: #bbedf2;
	width: 100%;
	padding: 13px 20px;
	position: relative;
	margin-bottom: 20px
}

.side-list-box .side-ttl:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 19px 9.5px 0;
	border-color: #bbedf2 transparent transparent;
	position: absolute;
	top: calc(100% - 5px);
	left: 30px
}

.side-list-box.girl .side-ttl:before {
	content: "";
	background: url(/images/common/icon_pic_girl.png) 0 0/cover no-repeat;
	width: 55px;
	height: 60px;
	position: absolute;
	bottom: 0;
	right: 23px
}

.side-list-box.boy .side-ttl:before {
	content: "";
	background: url(/images/common/icon_pic_boy.png) 0 0/cover no-repeat;
	width: 66px;
	height: 62px;
	position: absolute;
	bottom: 0;
	right: 17px
}

.side-list-box .side-list {
	margin-bottom: 24px
}

.side-list-box.column .side-list {
	margin-bottom: 20px;
	overflow: hidden
}

.side-list-box .side-list li {
	font-size: 1.3rem;
	line-height: 1.3;
	font-weight: 400;
	margin-bottom: 15px
}

.side-list-box .side-list a {
	display: block;
	color: #2563eb;
	font-size: 1.6rem;
	font-weight: 600;
	margin-bottom: 3px
}

.side-list-box.column .side-list li {
	margin-bottom: 8px
}

.side-list-box.column .side-list a {
	font-size: 1.5rem;
	line-height: 1.3;
	font-weight: normal;
	text-decoration: none;
	display: table;
	width: 100%;
	color:#333;
}

.list-l, .list-r, .side-list-box.column .side-list dd, .side-list-box.column .side-list dt {
	display: table-cell;
	vertical-align: middle
}


.side-list-box.column .side-list dt {
	width: 75px
}

.side-list-box.column .side-list dd {
	padding: 0 0 0 10px
}

.main-img-area {
	width: 100%;
	margin: 0 auto 30px;
	background-image: url(/images/top/main_img.webp);
	background-size: cover;
	background-position: center
}

main-img-area a{
	background-color:#fff; /*必要*/
}

.main-img-area .inner {
	width: 100%;
	max-width: 1040px;
	margin: 0 auto;
	position: relative
}

.shortcut-link {
	padding: 0 0 50px;
	text-align:center;
}

.main-img-area .text-box {
	width: auto;
	padding: 50px 0 0
}

.main-img-area .text-box .title {
	color: #d4940a;
	font-weight: 400;
	font-size: 4.2rem;
	line-height: 1.2;
	display: block;
	margin-bottom: 20px
}

.main-img-area .text-box p {
	font-size: 1.5rem;
	line-height: 1.5;
	margin-bottom: 33px;
	text-shadow: #fff 1px 1px 6px, #fff -1px 1px 6px;
}

.column.sec04 .post-list, .tag-list-box .tag-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between
}

.tag-list-box .tag-list li a {
	border-radius: 8px;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#def6f8), to(#c5d5e8));
	background-image: linear-gradient(180deg, #def6f8 0, #c5d5e8 100%);
	width: 158px;
	height: 76px;
	margin-bottom: 9px;
	font-weight: 600;
	font-size: 1.5rem;
	display: block;
	padding-top: 43px;
	text-align: center;
	position: relative
}

.tag-list-box .tag-list li a:before {
	content: "";
	display: block;
	position: absolute;
	margin: auto;
	bottom: 37px;
	left: 0;
	right: 0;
	background: url(/images/common/icon_tag_girl.png) center/contain no-repeat;
	width: 19px;
	height: 28px
}

.tag-list-box .tag-list li.tag-boy a:before {
	background: url(/images/common/icon_tag_boy.png) center/contain no-repeat;
	width: 25px;
	height: 25px
}

.tag-list-box .tag-list li.tag-unisex a:before {
	background: url(/images/common/icon_tag_unisex.png) center/contain no-repeat;
	width: 22px;
	height: 28px
}

.tag-list-box .tag-list li.tag-manga a:before {
	background: url(/images/common/icon_tag_manga.png) center/contain no-repeat;
	width: 22px;
	height: 22px
}

.tag-list-box .tag-list li.tag-flower a:before {
	background: url(/images/common/icon_tag_flower.png) center/contain no-repeat;
	width: 23px;
	height: 22px
}

.tag-list-box .tag-list li.tag-prince a:before {
	background: url(/images/common/icon_tag_prince.png) center/contain no-repeat;
	width: 29px;
	height: 22px
}

.tag-list-box .tag-list li.tag-zen a:before {
	background: url(/images/common/icon_tag_zen.png) center/contain no-repeat;
	width: 36px;
	height: 24px
}

.tag-list-box .tag-list li.tag-pet a:before {
	background: url(/images/common/icon_tag_pet.png) center/contain no-repeat;
	width: 29px;
	height: 23px
}

.tag-list-box .more {
	display: block;
	text-align: right;
	font-size: 1.5rem;
	color: #2563eb
}

.top-contents .top-sec-02 {
	margin-top: 35px;
	margin-bottom: 35px
}

.top-contents .top-sec-02 .btn {
	position: absolute;
	margin: auto;
	right: 0;
	top: 0;
	bottom: 0
}

.top-contents .top-sec-02 .top-name-area {
	margin-top: 28px
}

.bread_crumb_list {
	padding: 20px 0;
}

.bread_crumb_list ul {
	max-width: 1068px;
	margin: 0 auto;
	font-size: 1.3rem
}

.bread_crumb_list ul li {
	display: inline;
	margin-right: 0
}

.bread_crumb_list ul li:after {
	content: ' > ';
	padding-left: .5em;
	margin-right: .5em
}

.wp-pagenavi {
	clear: both;
	text-align: center;
	font-size: 1.6rem;
	line-height: 1;
	margin: 0 auto;
	padding: 0 0 20px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}
/*.wp-pagenavi.nav_top {
	padding: 0;
}*/

hr {
	line-height: 0
}

.wp-pagenavi a, .wp-pagenavi span, .whatsnew .wp-pagenavi a {
	border: 1px solid #fbbf24;
	border-radius: 8px;
	margin-left: 5px;
	min-width: 33px;
	padding: 5px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	white-space: nowrap;
	text-decoration: none !important
}

.wp-pagenavi li {
	display: inline-block;
	vertical-align: middle;
	border-bottom:none !important;
}

.wp-pagenavi span.pages {
	border: none;
	width: auto;
	height: auto;
	font-size: 1.5rem;
	margin-right: 10px;
	background-color: transparent
}

.wp-pagenavi span.current {
	background-color: #e6f4d1;
	font-weight: 600
}

.wp-pagenavi span.dots, .wp-pagenavi span.extend {
	border: none
}

.wp-pagenavi a:hover {
	background-color: #e6f4d1
}

.wp-pagenavi .nextpostslink, .wp-pagenavi .previouspostslink, .wp-pagenavi a.first, .wp-pagenavi a.last {
	font-size: 0;
	content: "";
	font-weight: 900;
	background-color: #fbbf24
}

.wp-pagenavi .previouspostslink:after, .wp-pagenavi a.first:after {
	content: "";
	background: url(/images/common/ar_w2.png) 0 0/8.75px 14px;
	width: 8.75px;
	height: 14px
}

.wp-pagenavi .nextpostslink:after, .wp-pagenavi a.last:after {
	content: "";
	background: url(/images/common/ar_w.png) 0 0/8.75px 14px;
	width: 8.75px;
	height: 14px
}

.pagetitle {
	padding: 0 0 20px;
	font-size: 3rem;
	font-weight: 400
}

.name-detail .text-area img {
	height: auto
}

.name-detail .pagetitle {
	padding-bottom: 5px
}

.name-detail .pagetitle a {
	color: #2563eb;
	font-size: 2rem;
	font-weight: 600;
	display: inline-block;
	position: relative;
	vertical-align: middle
}

.eng-name-detail .pagetitle a{
	vertical-align:inherit;
}

.kanji-archive .pagetitle a {
	text-decoration: none;
	color: #333
}

.kanji-archive .pagetitle a:hover {
	text-decoration: none
}

.name-detail .pagetitle a:after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	position: absolute;
	bottom: 3px;
	left: 0
}

.name-detail .pagetitle .icon {
	width: 24px;
	height: 24px;
	margin: 0 10px 0 0;
	float: none;
	vertical-align: inherit;
}

.name-detail .pagetitle .voice_icon {
	margin-left: 10px;
	/*width: 24px;*/
	height: auto
}

.ano_gender {
	font-size: 1.4rem
}

.dum, .wiki a {
	font-size: 1.5rem
}

.dum p {
	margin-bottom: 5px !important
}

.ano_gender .icon, .name-detail .dum img.icon, .ano_name_type .icon {
	width: 18px;
	height: 18px;
	margin: 0 5px;
	float: none
}

.name-detail .pagetitle .wpfp-span img {
	width: 18px;
	height: auto
}

.fav_btn {
	margin-left: 10px;
	cursor: pointer;
	text-decoration: none;
	z-index:1000;
}
.name-card .fav_btn{
	margin-left:15px;
}
.name-detail .pagetitle .fav_btn, .name-list .pagetitle .fav_btn {
	position: static
}

.name-detail .title02 {
	margin-top: 30px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	/*border-bottom: 2px solid #f5d060;*/
	font-size: 2.2rem;
	font-weight: 400;
	position: relative;
	padding-left: 52px
}

.name-detail .title02:before {
	content: "";
	display: inline-block;
	background: url(/images/last-name/icon_01.png) 0 0/contain no-repeat;
	width: 40px;
	height: 30px;
	position: absolute;
	top: -5px;
	bottom: 0;
	left: 0;
	margin: auto
}

.name-detail .title02.ico_p:before {
	background: url(/images/common/icon_p.png) 0 0/contain no-repeat;
	width: 40px;
	height: 40px;
}

.detail-list {
	border-top: 1px solid #f5d060;
	border-bottom: 1px solid #f5d060;
	margin-bottom: 25px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	width: 100%;
	padding: 8px 0;
}
.detail-list li.col3{
	flex: 0 0 calc(33.33%); /* 3列構成 */
	margin-right: 0;
	margin-bottom:5px;
	white-space:nowrap;
}
.detail-list li.col2{
	flex: 0 0 calc(50%); /* 2列構成 */
	margin-right: 0;
	margin-bottom:5px;
	white-space:nowrap;
}
.detail-list li.col1{
	flex: 0 0 calc(100%); /* 1列構成 */
	margin-bottom:5px;
}
.detail-list li.nickname p{
	font-size:1.3rem;
	display: inline;
}
.detail-list li.nickname p span{
	font-weight: normal;
}
.detail-list li.nickname .nk-1{
	font-size:1.3rem;
	font-weight: 400;
	margin:0 3px 5px 0;
	font-weight: normal;
}
.detail-list li.nickname .nk-2{
	font-size:1.1rem;
	margin:0 3px 5px 0;
}
.detail-list li.nickname .nk-3{
	margin:0 10px 5px 0;
}
.nk-3 .voice_icon{
	width:16px;
}
.detail-list li.col1.last_col{
	margin-bottom:0;
}

.detail-list li {
	position: relative;
	/*display: table-cell;*/
	font-size: 1.7rem;
	font-weight: normal;
	line-height:1.7;
}

/*.detail-list li > span {*/
.detail-list li span {
	color: #d4940a;
	font-size: 1.4rem;
	font-weight: normal;
	margin-right: 5px
}
.detail-list li.nickname p span {
	color:#333;
}


.detail-list img.q_btn{
	margin:0;
}

.detail-list li i {
	color: #8b8a8a;
	padding: .2em;
	cursor: pointer
}

.sort_ul a:hover {
	opacity: 1 !important
}

.q-icon-all {
	position: relative;
	white-space: nowrap
}

.q_btn {
	width: 15px;
	height: auto;
	margin: 0 3px;
	cursor: pointer
}

.q_btn2 {
	height: auto;
	margin: 0 0 0 3px;
	cursor: pointer
}

.q-icon-all .q-box {
	position: absolute;
	z-index: 10000;
	display: none;
	top: 25px;
	left: 0;
	width: 300px
}

.q-box {
	color: #fff;
	font-size: 1.2rem;
	font-weight: 500;
	background-color: #8b8a8a;
	padding: 7px 12px;
	position: absolute
}

.q-box:after {
	content: "";
	position: absolute;
	left: 25px;
	bottom: -11px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 12px 0
}

.name-detail .meaning-box {
	border-top: 1px solid #7b9bc7;
	padding: 25px 0;
	word-wrap: break-word;
	width: 96vw;
	margin: 0 2vw;
	content-visibility: auto;
	contain-intrinsic-size: 700px;
}

.meaning_txt, .ttl-style-02.related-ttl {
	margin-bottom: 10px
}

.meaning_txt ul {
	list-style-position: outside;
	list-style-type: decimal;
	margin: 0 0 10px 2rem;
	padding: 0 0 0 1rem
}
.meaning_txt ul a, .meaning_list ul a, .meaning_cont ul a{
	text-decoration: underline;
	color: #2563eb;
	/*margin: 0 0 0 0.5rem;*/
}
.meaning_txt ul a:first-of-type, .meaning_list ul a:first-of-type, .meaning_cont ul a:first-of-type{
	margin: 0;
}
.meaning_txt ul a:hover, .meaning_list ul a:hover, .meaning_cont ul a:hover{
	text-decoration: none;
}

.ccp_ul {
	margin: 0 0 10px;
	/*border:solid 1px #ccc;*/
	background-color:#f4fcfd;
	padding:10px;
	border-radius:10px;
	display: none
}

.ccp_ttl {
	text-align: center;
	margin: 0 0 15px 0
}

.ccp_h {
	display: inline-block;
	border: 1px solid #2563eb;
	border-radius: 20px;
	padding: 3px 15px;
	cursor: pointer;
	color: #2563eb;
	font-weight: 400
}

.ccp_h::after {
	content: "";
	background: url(/images/common/ar3.png) 0 0/cover;
	width: 10px;
	height: 4.5px;
	display: inline-block;
	margin-left: 6px;
	vertical-align: middle
}

.ccp_h.on::after {
	background-position: 0 4.5px
}

.ccp_h:hover {
	background-color: #bbedf2
}

.meaning-box .kanji_one, .wiki a {
	border: 1px solid #2563eb;
	padding: 3px 8px;
	display: inline-block;
	margin: 0 0 5px 0;
	border-radius: 5px
}

.wiki a {
	padding: 3px 7px
}

.name-list .name_summary p {
	display: inline-block;
	margin-right: 10px
}
.name-list h3{
	display:inline-block;
}

.f_ico {
	text-align: center;
	margin: 0;
	padding: 0 0 20px;
	line-height: 1.8;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 0
}

.cmn_ico {
	font-size: 1rem;
	padding: 2px 5px;
	margin: 0 3px;
	background-color: #30b026;
	color: #fff;
	border-radius: 5px;
	white-space: nowrap;
	display: inline-block
}

.cmn_ico.beauty{
	background-color: #FFAAB9;
}
.cmn_ico.common{
	background-color: #87CEEB;
}
.cmn_ico.emperor{
	background-color: #4B0082;
}
.cmn_ico.flower{
	background-color: #FF925E;
}
.cmn_ico.goodfortune{
	background-color: #FFD700;
}
.cmn_ico.mangaanime{
	background-color: #FFFF00;
	color:#333;
}
.cmn_ico.demonslayer{
	background-color: #8B0000;
}
.cmn_ico.nature{
	background-color: #228B22;
}
.cmn_ico.petanimal{
	background-color:#6889c4;
}
.cmn_ico.princeprincess{
	background-color: #800080;
}
.cmn_ico.uncommon, .cmn_ico.rare{
	background-color: #F5F5DC;
	color:#333
}
.cmn_ico.strength{
	background-color: #B22222;
}
.cmn_ico.wisdom{
	background-color: #4682B4;
}
.cmn_ico.light{
	background-color: #FFA500;
}
.cmn_ico.love{
	background-color: #FF69B4;
}
.cmn_ico.season{
	background-color: #2E8B57;
}
.cmn_ico.color{
	background-color: #9370DB;
}
.cmn_ico.music{
	background-color: #DA70D6;
}
.cmn_ico.zenbushido{
	background-color: #191970;
}

.ew_list {
	border: 1px solid #d4940a;
	padding: 10px;
	margin: 0 0 20px;
	border-radius: 10px;
	text-align: center;
	font-weight:normal;
}
.ew_list legend{
	color:#d4940a;
	padding:0 10px;
	font-size:1.2rem;
}

.mean_k_list {
	text-align: center;
	margin: 0;
	font-size: 1.8rem
}

.mean_k_list li {
	display: inline-block;
	margin: 0 10px
}

.back_to_home a, .column.sec02 a:link, .mean_k_list li a {
	color: #2563eb;
	text-decoration: underline
}

.name-detail .meaning-box:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0
}

.name-detail .meaning-box .name {
	padding-bottom: 10px;
	text-align: center
}

.name-detail .meaning-box .name h3 {
	font-weight: normal;
	font-size: 3rem;
	margin-bottom: 15px
}

.name-detail .meaning-box .name .f_name {
	font-size: 6rem;
	line-height: initial;
	position: relative
}

.font_ao {
	font-family: ao !important;
	color:#333 !important;;
}

.kn_result a{
	font-size: 2.4rem;
	font-weight:normal !important;
}

.name-detail .meaning-box .name span.furi {
	font-size: 1.3rem;
	font-family: "Times New Roman", Times, serif;
	display: block
}

.wiki {
	text-align: right;
	padding-top: 10px
}

.kanji_link {
	display: block;
	text-align: right;
	margin-bottom:15px !important;
}
.kanji_link a{
	color: #2563eb;
	font-size:1.3rem;
}

.card-all, .load_circle {
	padding: 20px 0;
	text-align: center
}

.name-detail .ico_kanji_search, .sorts li, .wiki h5, .wiki li, .wiki ul {
	display: inline-block
}

.ico_kanji_search.kd {
	margin-left: 10px
}

.wiki h5 {
	margin: 0 0 0 20px
}

.wiki ul.last {
	margin: 0
}

.wiki li {
	margin: 0 0 0 10px
}

.wiki img {
	vertical-align: middle;
	width: 21px;
	height: 22px
}

.wiki img.kd {
	width: 27px
}

.name-detail .meaning-box .meaning {
	clear: both;
	word-wrap: break-word;
	overflow: hidden;
	text-align: center
}

.mb5, .meaning_list p, .name-detail .meaning-box .meaning p {
	margin-bottom: 5px
}

.name-detail .tag-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-bottom: 28px;
	justify-content: center
}

.name-detail .tag-list li {
	color: #2563eb;
	font-size: 1.3rem;
	font-weight: 600;
	padding: 6px 10px;
	border: 1px solid #2563eb;
	border-radius: 4px;
	margin-right: 10px;
	margin-bottom: 10px
}

.name-detail .tag-list li:before {
	content: "";
	background: url(/images/common/t.png) 0 0/12px 12px;
	width: 12px;
	height: 12px;
	display: inline-block;
	margin-right: 5px
}
.name-detail .tag-list.no-icon li:before, .name-detail .tag-list.no-icon li:hover:before {
	content: "";
	background:none;
	width: 0;
	height: 0;
	display: inline-block;
	margin-right: 0;
}

.name-detail .tag-list li:hover {
	color: #fff;
	background-color: #2563eb
}

.name-detail .tag-list li:hover:before {
	background: url(/images/common/t_w.png) 0 0/12px 12px;
}

.name-detail .tag-list li:hover a {
	opacity: 1;
	zoom: 1
}

.name-detail.sec04 .ttl-style-02 {
	margin-top: 40px
}

.generator .search-box {
	padding: 20px;
	margin-bottom: 33px
}

.generator .search-box th {
	font-size: 1.4rem;
	font-weight: 500;
	min-height: 30px
}

.fs12rem, .generator .search-box th span, .like__number {
	font-size: 1.2rem
}

.generator .search-box th:before {
	content: "";
	background: url(/images/generator/icon_gender.png) 0 0/contain no-repeat;
	width: 15px;
	height: 18px;
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 5px
}

.generator .search-box th.feature:before {
	background: url(/images/generator/icon_feature.png) 0 0/contain no-repeat;
	width: 19px;
	height: 18px
}

.generator .search-box th.initial-first:before {
	/*background: url(/images/generator/icon_initial_first.png) 0 0/contain no-repeat;
	width: 18px;
	height: 18px*/
	background: url(/images/generator/icon_feature.png) 0 0/contain no-repeat;
	width: 19px;
	height: 18px
}

.generator .search-box th.initial-last:before {
	background: url(/images/generator/icon_initial_last.png) 0 0/contain no-repeat;
	width: 20px;
	height: 16px
}

.generator .search-box .button input {
	margin-top: 10px
}

/* Generator panel layout */
.gen-section {
	border: 1px solid #d0e8eb;
	border-radius: 8px;
	padding: 16px 18px 12px;
	margin-bottom: 14px;
	background-color: #f8fcfd;
}
.gen-section h3 {
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0 0 10px;
	color: #2563eb;
}
.gen-row {
	display: flex;
	gap: 14px;
	margin-bottom: 6px;
}
.gen-field {
	flex: 1;
	min-width: 0;
}
.gen-field label {
	display: block;
	font-size: 1.3rem;
	font-weight: 500;
	margin-bottom: 3px;
}
.gen-field .gen-exact {
	display: flex;
	align-items: center;
	font-size: 1.2rem;
	margin-top: 2px;
	margin-bottom: 4px;
}
.gen-field .gen-exact input[type="checkbox"] {
	width: auto;
	margin: 0 5px 0 0;
	padding: 0;
}
.gen-selects {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.gen-selects .gen-sel {
	flex: 1;
	min-width: 0;
}
.gen-selects .gen-sel label {
	display: block;
	font-size: 1.2rem;
	font-weight: 500;
	margin-bottom: 3px;
}
#gen_names .gen-submit {
	text-align: center;
	margin-top: 6px;
}

/* Dark mode - generator panel */
body.dark-mode .gen-section {
	border-color: var(--border-color);
	background-color: var(--bg-secondary);
}
body.dark-mode .gen-section h3 {
	color: var(--link-color);
}

.generator .name-card-wrap {
	margin-top: 20px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between
}

.generator .name-card {
	font-size: 2.6rem;
	font-weight: normal;
	border-top: 1px solid #ccc;
	/*width: 49%;*/
	width:100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.card-all {
	width: 100%;
	height: 100%;
	padding:12.5px 0 30px 0;
}

@media only screen and (min-width:768px) {
	.card-all {
		display: flex;
		justify-content:space-evenly;
		align-items: baseline;
	}
	.card-all > div {
		flex: 1 1 50%; /* Flex-grow, flex-shrink, and flex-basis set to 50% */
	}
}

.roma_name .icon {
	width: 20px;
	height: 20px;
	margin: 0 5px;
	vertical-align: unset
}

.generator .name-card .name-type {
	color: #d4940a;
	font-size: 1.2rem;
	line-height:1;
	font-weight: normal;
	display: inline-block;
	margin-bottom:20px;
	border:solid 1px #d4940a;
	padding:2px 10px;
	border-radius:10px;
}

#name-list.ttl-style-01, .column.sec02 h2 {
	font-size: 2.4rem
}

.generator .image-box {
	text-align: center;
	padding: 35px 0 30px
}

.generator .image-box img {
	width: 98px
}

/*.generator.sec01 > p {*/
.generator.sec01 p {
	margin-bottom: 15px
}

.column .pagetitle {
	padding-bottom: 20px;
	line-height: 1.3;
	margin-top: 7px
}

.column .pagetitle:after {
	content: "";
	height: 7px;
	width: 100%;
	display: block;
	margin-top: 15px;
	background-repeat: repeat-x;
	background-size: 7px 5px;
	background-image: linear-gradient(45deg, transparent 50%, #f5d880 50%, #f5d880 60%, transparent 60%, transparent)
}

.column #toc_container {
	margin: 25px auto;
	border: 2px solid #fae8a8;
	padding: 20px;
	width: 100%
}

.column #toc_container .toc_title {
	text-align: center;
	font-weight: 600;
	background-color: #e9f4d7;
	padding: 11px;
	margin-bottom: 15px
}

.column #toc_container ul {
	margin-left: 8px
}

.column #toc_container ul ul {
	margin-left: 30px
}

.column #toc_container ul li {
	color: #2563eb;
	line-height: 1.3;
	font-weight: 600
}

.column #toc_container ul a {
	display: block;
	margin-bottom: 5px;
	padding: 0 10px 5px 2px
}

.column #toc_container ul a span {
	padding-right: .5em
}

/*.column #toc_container > ul > li > a {*/
.column #toc_container ul li a {
	border-bottom: 2px solid #fae8a8;
	margin-top: 10px
}

/*.column #toc_container > ul > li > ul li a {*/
.column #toc_container ul li ul li a {
	border-bottom: 1px solid #fae8a8;
	padding-left: 7px
}

/*.column #toc_container > ul > li > ul li > ul li a {*/
.column #toc_container ul li ul li ul li a {
	border-bottom-style: dotted
}

.column.sec02 h2 {
	font-weight: 400;
	padding-bottom: 5px;
	margin-bottom: 20px;
	border-bottom: 1px solid #f5d060;
	margin-top: 35px;
	padding-left: 5px;
	padding-right: 5px
}

.column.sec02 h3 {
	font-size: 2rem;
	font-weight: normal !important;
	line-height: 1.3;
	/*background-color: #dcedc3;*/
	border-left:5px solid #f59e0b;
	padding:5px 12px;
	border-radius: 0;
	margin: 30px 10px 20px 0;
	/*margin: 30px 10px 20px 10px;*/
}

.column.sec02 h4 {
	color: #6e9c28;
	line-height: 1.3;
	font-size: 1.8rem;
	/*border-bottom: 1px dashed #f5d060;
	padding-left: 15px;
	padding-bottom: 15px;
	*/
	margin: 20px 10px 15px;
	position: relative
}

.column.sec02 h4:before {
	/*content: "";
	background-color: #6e9c28;
	border-radius: 2px;
	display: block;
	width: 5px;
	height: 20px;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 15px;
	left: 0
	*/
}

.column.sec02 b {
	font-weight: 600
}

.column.sec02 .red {
	color: #d0021b
}

.column.sec02 .blue {
	color: #026d93
}

.column.sec02 .green {
	color: #417505
}

.column.sec02 .marker {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, rgba(248, 231, 28, .5)), color-stop(90%, rgba(248, 231, 28, .5)), color-stop(90%, transparent), to(transparent));
	background: linear-gradient(transparent 60%, rgba(248, 231, 28, .5) 60%, rgba(248, 231, 28, .5) 90%, transparent 90%, transparent)
}

.column.sec02 a:active, .column.sec02 a:hover {
	text-decoration: none;
	color: #2563eb;
	opacity: 1;
	zoom: 1
}

.column.sec02 a.arrow-link:link {
	text-decoration: none;
	font-weight: 600
}

.column.sec02 a.arrow-link:before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 7px;
	border-color: transparent transparent transparent currentColor;
	margin-right: .2em
}

.column.sec02 p, .zero_nav p {
	margin: 0 10px 1em;
	/*line-height: 1.8;
	font-size: 1.6rem
	*/
}
.column.sec02 p, .zero_nav p, .column.sec02 ol, .column.sec02 ul{
	line-height: 1.7;
	font-size: 1.6rem
}

.column.sec02 img {
	margin: 15px 0
}

.column.sec03 .ttl-style-02 {
	margin: 35px 0 17px
}

.column.sec03 input, .column.sec03 textarea {
	padding: 8px;
	font-weight: 400;
	border: 1px solid #ccc;
	width: 100%;
	border-radius: 4px;
	margin-bottom: 9px
}

.column.sec03 input {
	width: 330px
}

.column.sec04 .ttl-style-02 {
	margin: 29px 0 24px
}

.column.sec04 .post-list li {
	width: 206px;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.28;
	margin-bottom: 15px
}

.column.sec04 .post-list li .tn {
	width: 100%;
	height: 125px;
	overflow: hidden;
	position: relative;
	display: block;
	margin-bottom: 15px
}

.column.sec04 .post-list li .tn img {
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: auto
}

.u-show {
	display: block;
	visibility: visible;
	opacity: 1
}

.u-hidden {
	display: none;
	visibility: hidden;
	opacity: 0
}

.ad-area {
	clear: both;
	width: 100%
}

.pt20 {
	padding-top: 20px
}

.back_to_home {
	padding: 30px 0;
	text-align: center
}

a:link.blue_link{
	color: #2563eb;
	text-decoration: underline
}

.mr10{
	margin-right:10px;
}
#toc_container a, .simplefavorites-clear:hover, .srch_r a:hover, .wn-list a:hover {
	text-decoration: none
}

a:visited.blue_link, span.blue_link {
	color: #2563eb
}

a:link.blue_link:hover {
	text-decoration: none
}

.pronunciation {
	color: #666;
	margin: 0 0 0 10px;
	cursor: pointer
}

.archive_middle_ad {
	padding: 10px 0 20px
}

.single_middle_ad {
	padding: 0 0 30px;
	clear: both
}

.atoz-ttl {
	display: table
}

.atoz-left, .atoz-right {
	display: table-cell
}

.atoz-right {
	padding-left: 10px;
	text-align: right
}

#filt_noname p, .filt_noname p, .answer, .zero_nav {
	padding: 20px 0
}

.filt_num{
	font-size:1.3rem;
	margin-left:10px;
	font-weight:bold;
}
.ad-blk p, .answer, .reco_right h4 {
	text-align: center
}

.clearfix:after {
	content: "";
	clear: both;
	display: block
}

.nav_link a {
	color: #2563eb;
	font-weight: normal;
	text-decoration: underline
}

#filt_n, .contact_form input[type=email], .contact_form input[type=text], .contact_form textarea, .contact_form input[type=password] {
	border: 1px solid #ccc;
	width: 100%;
	padding: 5px
}

.contact_form input[type=checkbox]{
	margin-right:5px;
}

.contact_form .inpt {
	margin-bottom: 2vw
}

#toc_container, .ad-blk.pc-btm1em {
	margin-bottom: 1em
}

.contact_form .sbmt_btn, button.send {
	color: #2563eb;
	border: 1px solid #2563eb;
	padding: 20px 40px
}

.back_btn, button.back{
	margin:0 10px 0 0;
	padding: 20px 40px;
	border:solid 1px #ccc;
}

.sbmt form{
	display:inline-block;

}

.contact_form .must, .contact_form .error{
	color: #d93636
}
.contact_form h2{
	font-size:2rem;
	font-weight: normal;
}

.pp p, .pp ul {
	margin-bottom: 2rem;
}

.pp p{
	/*margin-left:1rem;*/
}
.pp ul{
	list-style-type: disc;
	margin-left:2rem;
	padding-left:1rem;
}

.pp h2, .pp h3, .pp h4, .pp h5 {
	margin-bottom: 1rem
}

.ad-blk p {
	padding: 0 0 10px;
	margin-bottom: 0 !important
}

/*
.ad_cmn {
	padding: calc(20/750*100vw) 0;
	clear: both
}
.clm_post .ad_cmn {
	padding: 0 0 1em
}
*/
.ad_cmn{
	clear: both
}
.mv-ad-box{
	padding: calc(20/750*100vw) 0 !important;
}

footer .ad-blk p {
	color: #fff
}

.ad-area-half {
	overflow: hidden
}

.ad-area-half .left, .ad-area-half .right {
	width: 48%;
	float: left;
	margin: 20px 1% 0;
	text-align: center
}

.sns_bottn_origins {
	display: table;
	margin: 0 auto
}

body .mt0 {
	margin-top: 0
}

.sns_bottn_origins li {
	display: table-cell;
	padding: 0;
	vertical-align: top
}

.btn_s, .like_all, .translate_txt p {
	display: inline-block
}

.sorts ul {
	margin: 0 0 20px;
	float: left
}
.sort_txt{
	margin-right:1px;
}

.sorts li.sort_li {
	border: 1px solid #2563eb;
	border-radius: 5px;
	color: #2563eb;
	padding: 1px 5px;
	font-size: 1.2rem;
	line-height:1.3;
	margin: 0 3px;
	min-height: 18px;
	vertical-align: middle
}
.sorts li.sort_li .q-icon-all img{
	vertical-align:middle
}

.sorts li.sort_li:hover {
	background-color: #d6fbfe
}

.sorts li.sort_li.active {
	background-color: #2563eb;
	color: #fff
}

.ui-sortable li {
	cursor: move
}

.simplefavorites-clear, .srch_r a, .wn-list a {
	color: #2563eb;
	text-decoration: underline
}

.hdr_ad {
	clear: both;
	padding: calc(20/750*100vw) 2vw 0
}

.hdr_ttl_ad {
	clear: both;
	padding: 0 calc(20/750*100vw) 2vw
}

.clm_post .wp-caption-text {
	display: block;
	font-size: 1rem !important;
	margin-bottom: 20px !important
}

.column.sec02.clm_post img {
	margin: 0 0 15px
}

.column.sec02.clm_post .wp-caption img {
	margin: 0 0 5px !important
}

.clm_post h3.phrase {
	border: 1px solid #dcedc3;
	margin: 22px 0;
	line-height: 2.5;
	background-color: #fff
}

ruby {
	ruby-align: space-around;
	padding: 0 5px
}

/*ruby:hover {
	background-color: #ff0
}*/

.roma_txt, .kt_txt{
	line-height:1;
	font-size:2.8rem;
	font-weight: normal;
}

.roma_txt a{
	margin:0 5px;
}

.kanji_name ruby {
	font-family: ao;
	font-size: 3.8rem;
	font-weight: normal;
	ruby-position: under;
}
.roma_name_after{
	padding:5px 0 0 0;
	line-height:0;
}
.kt_name_after{
	padding:5px 0 0 0;
	line-height:0;
}

.srch_index_txt{
	display:none;
}

.kanji_name ruby.small_ruby {
	font-family: ao;
	font-size: 90%;
	font-weight: normal;
	padding:0 !important;
	display: block;
}
.kanji_name ruby.small_ruby rt {
	font-size: 60%;
	margin:0;
	display:block;
	text-align: center;
}
.kanji_name ruby.small_ruby span{
	text-align: center;
	display: block;
}

.kanji_name .all-rt {
	margin:0 5px;
}

.voice_icon{
	width: 20px;
	height: auto;
	cursor: pointer;
	vertical-align: middle;
	z-index:1000;
}

.kanji_name .voice_icon {
	margin: 0 0 0 5px;
	/*vertical-align: super*/
}
.meaning_cont .voice_icon{
	margin:0 0 0 5px;
}

.name-list .voice_icon{
	width: 20px;
	height: auto;
	margin: 0 0 0 10px;
	vertical-align: middle
}

.column.sec02 img.voice_icon {
	box-shadow: none;
	margin: 0 10px;
	vertical-align: sub;
	width: 21px
}

.column.sec02 h2 img.voice_icon, .column.sec02 h3 img.voice_icon{
	vertical-align: middle
}
.q-icon-all img{
	vertical-align:inherit;
}

.column.sec02 h3 img.voice_icon, .column.sec02 h4 img.voice_icon {
	margin: 0 5px
}

.column.sec02 table{
	border:solid 1px #ccc;
	border-collapse: collapse;

}
.column.sec02 table th, .column.sec02 table td{
	border:solid 1px #ccc;
	padding: 10px;
}
.column.sec02 table th{
	background-color: #e9f4d7;
}
.pronunciation .voice_icon {
	width: 28px;
	height: auto;
	vertical-align: unset
}

hr {
	padding-top: 30px;
	margin: 0 25% 60px;
	height: 1px;
	color: #ccc;
	border: none;
	border-bottom: 1px solid #dcedc3
}

.cmn_p {
	margin: 0 0 1rem
}

@media screen and (min-width:768px) {
	.name-detail .meaning-box {
		width: 100%;
		margin: 0;
		border-top: none;
		padding: 0;
		display: table
	}

	.name-detail .name-blk {
		width: 100%;
		margin: 0;
		display: table-row
	}

	.name-detail .name_list .meaning-box .name {
		padding: 35px 0 25px;
		width: 37%;
		vertical-align: middle;
		display: table-cell
	}

	.name-detail .name_list .meaning-box .meaning {
		padding: 30px 0 25px;
		display: table-cell;
		text-align: left;
		vertical-align: middle
	}

	.act {
		margin: 0 !important
	}

	.u-sp {
		display: none !important
	}

	.u-pc {
		display: inline-block
	}

	.ftr_ad {
		margin: 0 auto 60px;
		text-align: center
	}

	.name-detail .name_list .meaning-box .meaning, .name-detail .name_list .meaning-box .name {
		border-top: 1px solid #7b9bc7
	}
}

.attention {
	border: 2px dashed #f60;
	margin: 0 0 28px;
	border-radius: 5px;
	padding: 5px
}
.atten_green{
	background-color: #f9f9f9;
	padding:10px;
	border-radius: 5px;
	margin-bottom: 20px;
}

.premium-restore-alert {
	background-color: #f9f9f9;
	padding: 15px;
	border-radius: 5px;
	margin-bottom: 15px;
}

.premium-restore-alert p {
	margin: 5px 0;
}

.mem-trial-blocked-notice {
	background-color: #f9f9f9;
	padding: 15px;
	border-radius: 5px;
	margin-bottom: 15px;
}

.mem-trial-blocked-notice p {
	margin: 5px 0;
}

.mem-upgrade-notice a {
	color: inherit;
	text-decoration: none;
}

.mem-upgrade-notice a:hover {
	text-decoration: underline;
}

.fixed_pos {
	position: fixed;
	top: 0
}

.clm_list li, .fn_fav, .iine {
	position: relative
}

.translate_txt p {
	font-size: 90%;
	margin: 0 10px 0 0
}

.btn_s {
	color: #fff !important;
	text-decoration:none !important;
	border: none !important;
	border-radius: 10px;
	padding: 5px 15px;
	/*background-image: -webkit-gradient(linear, left top, left bottom, from(#f5d060), to(#e5a610));
	background-image: linear-gradient(180deg, #f5d060 0, #e5a610 100%);
	box-shadow: 0 1px 2px 0 rgba(121, 154, 71, .7);
	transition: linear*/
	background-color:#2563eb;

}

.like_all {
	margin: 0 0 0 15px
}

.like__btn {
	border: none;
	color: #f60;
	cursor: pointer;
	padding: .3rem .5rem;
	border-radius: .4rem;
	max-width: 200px;
	transition: .3s;
	display: flex;
	align-items: center
}

.like__btn:hover {
	background-color: rgba(255, 102, 0, .8);
	color: #fff
}

.like__btn:disabled {
	background-color: #d4cfcf;
	cursor: pointer
}

.like__icon {
	font-size: 1.3rem;
	margin-right: .5rem
}

.reco_blk {
	display: table;
	width: 100%;
	margin-bottom: 40px
}

.reco_left, .reco_right {
	display: table-cell;
	vertical-align: top
}

.reco_left {
	width: 49%;
	padding: 0 1% 0 0
}

.reco_left img {
	border-radius: 5px
}

.reco_right {
	width: 48%;
	padding: 0 0 0 2%
}

.reco_right h4 {
	margin-bottom: 10px
}

.reco_right img {
	margin-bottom: 10px;
	width: 50%
}

.ebay_area {
	width: auto;
	height: 220px
}

.yel_mark {
	background: linear-gradient(transparent 75%, #ffdc00 75%);
	font-weight: 700
}

.views {
	font-size: 0.9rem;
	text-align: right
}

.iine {
	/*padding: 0 5px;*/
	display: inline-block
}
/*アイコン統一*/
.act img, .list-l img{
	width:18px;
	height:auto;
}
.act .iine {
	margin: 0 15px 0 0
}

.iine input[type=image] {
	width: 18px;
	height: auto;
	cursor: pointer;
	vertical-align: middle
}

.iine .good_num {
	color: #1e838d;
	font-size: .8rem;
	margin: 0 0 0 2px;
	vertical-align: super;
	/*position: absolute*/
}
.iine .good_num:after {
content:" ";
}

.blocker:before, .fav-btn, .modal {
	vertical-align: middle
}

.google-auto-placed {
	display: none !important
}

.fn_fav {
	left: 0
}

.fn_fav a.fav_btn {
	font-size: 12px;
	margin-left: 5px
}

.sh_btns {
	margin-left: 15px;
	cursor: pointer;

}
.cp_btn, .gen_btn {
	cursor: pointer;
	z-index:1000;
}
.act {
	margin: 0 0 10px
}
.act .voice_icon{
	margin:0 15px 0 0;
}
.act .cp_btn, .act .gen_btn{
	margin-left: 15px;
}
.list-l .cp_btn, #fav_lists .cp_btn, .fav_right .cp_btn{
	margin-left: 10px;
}

.roma_name_after .cp_btn, .kt_name_after .cp_btn{
	margin-left: 15px;
}

a.atten_link {
	color: #f60;
	text-decoration: underline !important
}

a.atten_link:hover {
	text-decoration: none !important
}

.kt_more {
	text-align: center;
	padding: 10px;
	font-size: 1.5rem
}
.kanji-list.no-furi .fav_btn{
	margin-left:0;
}

@media screen and (max-width:767px) and (max-width:350px) {
	header .header-logo-area .header-logo {
		font-size: 2rem
	}
}

@media screen and (max-width:767px) {
	.name-list .title a {
		font-size:1.8rem;
	}
	.ew_list {
		margin-right: 2vw;
		margin-left: 2vw
	}

	.atoz, .atoz .title, .ew_list p.cmn_p, .name-detail .meaning-box .name, .tax-gender-btm-ad .ad-res-text {
		margin-bottom: 0
	}

	.name-detail.sec02, .ttl-style-01, .ttl-style-02, .sub-contents .chara_txt, .sub-contents .clm_list, .sub-contents .filt_all {
		margin-bottom: calc(30/750*100vw)
	}
	.name-list .title em, .name-list .title h3 {
		font-size:1.8rem;
	}

	.atoz-left, .atoz-right, .atoz-ttl, .btn-style-01, .column-list, .fs.sp_disblock, .u-sp {
		display: block
	}
	.atoz .title{
		font-size:1.8rem;
	}

	.ttl-style-01, .ttl-style-02 span {
		font-size: 1.9rem
	}
	.ttl-style-02 span{
		padding: 2vw 3vw 2vw 2vw;
	}
	.name_summary strong{
		font-size:140% !important;
	}

	#menu-trigger-2, header #menu-trigger {
		-webkit-transition: .4s;
		-webkit-box-sizing: border-box;
		z-index: 500;
		height: 20px;
		cursor: pointer;
		margin: auto;
		bottom: 0;
		color: #fff
	}

	.shortcut-link {
		padding: 0 !important;
		align-items: inherit;
		display: flex;
		flex-flow: wrap;
		align-content: center;
		justify-content: center;
		justify-items: center
	}
	.btn, .button input, .search-box .button input, .btn_only a , .login-submit input[type=submit]{
		font-size:1.6rem;
	}

	.btn-style-01 {
		/*border: 3px solid #fbbf24;*/
		border-radius: 30px;
		box-shadow: 0 2px 1px 0 rgba(0, 0, 0, .1);
		padding: 5px;
		width: 100%;
		font-size:1.4rem;
		text-align: center;
		display: flex;
		margin: 5px;
		min-height: 55px;
		flex: 0 0 calc(50% - 10px);
		align-items: center;
		justify-content: center
	}
	.btn-style-01.blk_l{
		flex: 0 0 calc(80% - 10px);
	}

	.btn-style-01:before {
		margin-right: calc(16/750*100%);
		background: 0 0;
		display: none
	}

	.btn-style-02 {
		max-width: 310px;
		min-height: 50px;
		padding-right: 15px;
		padding-left: 15px
	}

	.btn, .search-box .button input {
		width: 80%;
		margin-top:10px;
	}

	.button input {
		margin-top: calc(12/750*100vw)
	}

	.ttl-style-01 {
		padding-left: calc(20/750*100vw);
		border-left: calc(10/750*100vw) solid #f59e0b
	}

	.ttl-style-02 {
		margin-top: calc(40/750*100vw)
	}

	/*.ttl-style-02:before {
		flex-basis: 0
	}*/

	.search-box {
		border-top: 5px solid #a3b8d8;
		border-bottom: 5px solid #a3b8d8;
		border-left: none;
		border-right: none;
		padding: 15px calc(30/750*100vw);
	}
	.generator .search-box {
		padding: 15px calc(30/750*100vw)
	}

	/* Generator panel responsive */
	.gen-section {
		padding: 12px 12px 8px;
	}
	.gen-row {
		flex-direction: column;
		gap: 0;
	}
	.gen-selects {
		flex-direction: column;
		gap: 0;
	}

	.search-box .short {
		width: 270px;
		float: none
	}

	.search-box .short.blk_right {
		float: none
	}

	.search-box input, .search-box select {
		margin-bottom: calc(10/750*100vw)
	}
	.search-box select {
		background: url(/images/common/arrow_selectdown.png) right 50%/20px no-repeat, 0 0/100% #fff;
		padding-right: 22px; /* 背景画像の幅より少し大きめのパディングを追加 */
	}
	.srch_radio_list li {
		display: block;
		font-size:1.1rem;
	}

	.column-list dd {
		width: 100%;
		margin-bottom: calc(24/750*100vw);
		padding: 0 2vw 2em
	}

	.column-list dt img {
		position: relative
	}

	.column-list dt {
		width: 100%;
		min-height: auto;
		height: auto;
		text-align: center;
		overflow: unset;
		margin-bottom: 10px
	}

	.column-list .ttl {
		padding-bottom: calc(13/750*100vw);
		font-size:1.6rem;
	}

	.column-list .more {
		padding-right: 2vw
	}

	.name-list li {
		/*padding: calc(30/750*100vw) calc(45/750*100vw)*/
		padding:15px calc(30/750*100vw);
	}

	.name-list .tn {
		width: 100%;
		height: auto;
		position: relative;
		right: 0
	}
	.name-detail .pagetitle em{
		font-size:2.8rem;
	}
	.name-detail .pagetitle .icon{
		width:20px;
		height:20px;
	}

	.name-list .tn img {
		margin-top: calc(20/750*100vw)
	}

	.name-list .tn-box div:not(.tn), .ft-top .ft-list:first-of-type, .ft-top .ft-list:nth-of-type(2) {
		padding-right: 0
	}

	.atoz .title {
		padding: 13.5px 5px 13.5px 40px
	}

	.atoz .title:before {
		content: "";
		left: 2vw;
		width: 26px;
		height: 26px
	}

	.atoz .title span {
		padding-left: 5px
	}

	.atoz .atoz-list {
		padding: calc(18/750*100vw) 0 0;
		margin-right: -10px;
		max-width: 100vw;
		margin-bottom: 10px;
		overflow: hidden
	}

	.atoz .atoz-list .inner {
		margin: 0 auto;
		width: 95%;
		overflow: hidden
	}

	.atoz .atoz-list a {
		margin-bottom: 9px;
		font-size: 1.6rem;
		width: 8.9vw;
		height: 8.9vw;
		margin-right: 3px;
		margin-left: 3px
	}

	.q_btn2 {
		width: 3vw
	}

	.ad-area {
		margin: 0;
		width: 100%
	}

	.ad-area img, .column.sec03 input {
		width: 100%
	}

	header {
		background-color: #34508a;
		position: fixed;
		height: 52px;
		z-index: 99999;
		top: 0;
		left: 0;
	}
	body {
		padding-top: 52px;
	}

	header .header-inner {
		/*width: 100%;
		max-width: 100%;*/
		margin: 0 auto;
		padding: 10px calc(16/750*100%)
	}

	header .header-logo-area .header-logo {
		color: #fff;
		padding-left: calc(108px/2.5);
		line-height: 33px
	}

	header .header-logo-area .header-logo a:before {
		width: calc(104px/2.5);
		height: calc(66px/2.5);
	}

	header .header-logo-area .header-logo a {
		background: url(/images/common/world-names-info-white.svg) center 6px/contain no-repeat;
		width: 196px;
		height: 33px;
		margin-left: 0;
	}

	#g-nav, header .header-logo-area p, header .menu-bg {
		display: none
	}
	header.gnav-active #g-nav {
		display: block
	}
	header.gnav-active .menu-bg {
		display: block
	}

	header .g-nav-inner .hdr-r {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		margin-top: 75px;
		position: relative
	}

	header .g-nav-inner .hdr-r .fav-btn {
		margin: 0 auto;
		position: absolute;
		top: -60px
	}

	.column.sec02 img.voice_icon, header .g-nav-inner .hdr-r .fb-btn, header .g-nav-inner .hdr-r .gp-btn, header .g-nav-inner .hdr-r .tw-btn {
		margin: 0 5px
	}

	#g-nav {
		background-color: #fff;
		height: auto;
		position: absolute;
		top: 52px;
		width: 100%;
		z-index: 100;
		box-shadow: 0 4px 12px rgba(0, 0, 0, .15)
	}

	#g-nav .g-nav-inner {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		padding: 15px 20px 30px
	}

	#g-nav .list {
		display: block;
		width: 100%;
		margin: 0 auto;
		position: relative
	}

	#g-nav .list li {
		margin: 0;
		padding: 0 10px;
		position: relative
	}

	/*#g-nav .list > li > a {*/
	#g-nav .list li a {
		color: #2563eb;
		height: auto;
		padding: 10px 0;
		display: block;
		font-size: 1.6rem
	}

	/*#g-nav .list > li.current a, #g-nav .list > li > a:hover {*/
	#g-nav .list li.current a, #g-nav .list li a:hover {
		background-color: transparent;
		opacity: 1;
		zoom: 1
	}

	header #menu-trigger {
		display: block;
		transition: .4s;
		box-sizing: border-box;
		position: relative;
		top: 0;
		/*right: calc(16/750*100%);*/
		width: 24px;
		margin-left:8px;
	}

	#menu-trigger-2 {
		display: block;
		transition: .4s;
		box-sizing: border-box;
		position: relative;
		top: 0;
		/*right: calc(80/750*100%);*/
		width: 20px
	}

	.hdr_mem_icon{
		margin-left:8px !important;
	}
	.hdr_mem_icon img{
		width:30px !important;
		height:30px !important;
	}

	#menu-trigger-2 span, header #menu-trigger span {
		display: block;
		-webkit-transition: .4s;
		transition: .4s;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		cursor: pointer;
		position: absolute;
		width: 100%;
		height: 1px;
		left: 0;
		margin: auto;
		background: #fff
	}

	#menu-trigger-2 span:first-of-type, header #menu-trigger span:first-of-type {
		top: 0
	}

	#menu-trigger-2 span:nth-of-type(2) {
		top: 5px;
		transform: rotate(-45deg);
		width: 50%;
		left: 2px
	}

	#menu-trigger-2 span:nth-of-type(3) {
		top: 5px;
		transform: rotate(45deg);
		width: 50%;
		right: 2px;
		left: auto
	}

	#menu-trigger-2 span:nth-of-type(4) {
		top: 12px;
		left: auto;
		transform: rotate(90deg)
	}

	header #menu-trigger span:nth-of-type(2) {
		top: 0;
		bottom: 0
	}

	header #menu-trigger span:nth-of-type(3) {
		bottom: 0
	}

	header.gnav-active #menu-trigger {
		color: #fff;
		opacity: 1;
		zoom: 1
	}

	header.gnav-active #menu-trigger span {
		background: #fff
	}

	header.gnav-active #menu-trigger span:first-of-type {
		transform: translateY(9px) rotate(-45deg)
	}

	header.gnav-active #menu-trigger span:nth-of-type(2) {
		opacity: 0
	}

	header.gnav-active #menu-trigger span:nth-of-type(3) {
		transform: translateY(-9px) rotate(45deg)
	}

	header.gnav-active .menu-bg {
		display: block;
		background-color: rgba(255, 255, 255, 0);
		width: 100vw;
		height: 120vh;
		z-index: 90;
		top: 0;
		position: absolute
	}

	body.gnav-active, html.gnav-active {
		overflow: hidden;
		height: 100%
	}

	.pagetop-btn {
		bottom: 17px;
		right: 8px
	}

	footer {
		background-color: #2563eb;
		margin-top: 0
	}

	.ft-top {
		max-width: 100%;
		padding: 0 calc(16/750*100%) 30px;
		display: block
	}

	.ft-top .ft-list {
		margin-right: 0;
		width: 100%
	}

	.ft-top .ft-list li a {
		display: block;
		color: #fff;
		margin-bottom: 0;
		text-decoration: none;
		padding: 13px calc(14/750*100%);
		position: relative;
		border-bottom: 2px solid #c5d5e8;
		font-weight: 500
	}

	.ft-top .ft-list li a:after {
		content: "";
		background: url(/images/common/ar_w.png) 0 0/8.75px 14px;
		font-weight: 900;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: calc(20/750*100%);
		width: 8.75px;
		height: 14px
	}

	.ft-top .ft-list li .icon {
		margin-right: calc(10/750*100%);
		margin-left: calc(10/750*100%)
	}

	.ft-top .ft-list:after {
		content: none
	}

	.ft-top .ft-column-list li a {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: start
	}

	.side-list-box.column .side-list img, .ft-top .ft-column-list img {
		margin-right: calc(20/750*100%)
	}

	.side-bar .side-ad-area {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: calc(50/750*100%)
	}

	.side-bar .side-ad-area img {
		width: calc(600/750*100%);
		height: auto
	}

	.side-list-box .side-ttl {
		border-radius: 0
	}

	.side-list-box .side-ttl:after {
		left: calc(60/750*100%)
	}

	.side-list-box.girl .side-ttl:before {
		width: 53px;
		height: 57px;
		right: calc(60/750*100%)
	}

	.side-list-box.boy .side-ttl:before {
		width: 63px;
		height: 60px;
		right: calc(44/750*100%)
	}

	.side-list-box .side-list {
		padding: 0 2vw;
		margin-bottom: calc(48/750*100%)
	}

	.side-list-box .side-list li {
		margin-bottom: calc(30/750*100%)
	}

	.side-list-box.column .side-list li {
		margin-bottom: calc(20/750*100%)
	}

	.side-list-box.column .side-list span {
		width: calc(100% - 90px)
	}

	.main-img-area {
		margin-bottom: calc(40/750*100vw);
		padding-bottom: calc(30/750*100vw);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top center
	}

	.main-img-area .inner {
		max-width: 100%;
		height: auto;
		background-image: none
	}

	.main-img-area .text-box {
		position: relative;
		margin: 0 auto;
		text-align: center;
		border-radius: 12px;
		padding: calc(30/750*100vw) calc(20/750*100vw) calc(0/750*100vw);
		top: 0;
		right: 0
	}

	.main-img-area .text-box .title {
		color: #547d16;
		font-size: 2.7rem;
		margin-bottom: calc(30/750*100vw)
	}

	.main-img-area .text-box p {
		line-height: 1.6;
		font-size:1.2rem;
		margin-bottom: calc(30/750*100vw)
	}

	.tag-list-box {
		padding: 0 0 calc(20/750*100vw);
		margin-bottom: 0
	}

	/*.tag-list-box .tag-list {
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center
	}*/
	.tag-list-box .tag-list {
		margin:0 2vw;
	}

	.tag-list-box .tag-list li a {
		max-width: 23vw;
		/*margin: 0 calc(10/750*100vw) calc(10/750*100vw);*/
		margin:0 0 5px 0;
		font-size: 1rem
	}

	.tag-list-box .tag-list .tag-girl {
		-webkit-box-ordinal-group: 2;
		-ms-flex-order: 1;
		order: 1
	}

	.tag-list-box .tag-list .tag-boy {
		-webkit-box-ordinal-group: 3;
		-ms-flex-order: 2;
		order: 2
	}

	.tag-list-box .tag-list .tag-unisex {
		-webkit-box-ordinal-group: 4;
		-ms-flex-order: 3;
		order: 3
	}

	.tag-list-box .tag-list .tag-flower {
		-webkit-box-ordinal-group: 5;
		-ms-flex-order: 4;
		order: 4
	}

	.tag-list-box .tag-list .tag-prince {
		-webkit-box-ordinal-group: 6;
		-ms-flex-order: 5;
		order: 5
	}

	.tag-list-box .tag-list .tag-zen {
		-webkit-box-ordinal-group: 7;
		-ms-flex-order: 6;
		order: 6
	}

	.tag-list-box .tag-list .tag-manga {
		-webkit-box-ordinal-group: 8;
		-ms-flex-order: 7;
		order: 7
	}

	.tag-list-box .tag-list .tag-pet {
		-webkit-box-ordinal-group: 9;
		-ms-flex-order: 8;
		order: 8
	}

	.tag-list-box .more {
		color: #fff;
		padding-right: calc(40/750*100vw)
	}

	.top-contents .top-sec-02 {
		position: relative;
		margin-top: calc(30/750*100vw);
		margin-bottom: 0
	}

	.top-contents .top-sec-02 .ttl-style-01 {
		margin-bottom: 80px
	}

	.top-contents .top-sec-02 .btn {
		position: absolute;
		margin: auto;
		right: 0;
		top: 115%;
		bottom: auto;
		left: 0
	}

	.top-contents .top-sec-02 .top-name-area {
		margin-top: 0;
		border-bottom: 5px solid #ebe8e8
	}

	.bread_crumb_list {
		padding: 10px;
		width: auto
	}

	.bread_crumb_list ul {
		width: auto;
		font-size: 1rem
	}

	.wp-pagenavi {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		margin: 0 auto;
		padding: 0 0 calc(50/750*100vw)
	}

	/*.wp-pagenavi.nav_top {
		padding: 0 0 calc(20/750*100vw)
	}*/

	.sorts ul {
		margin: 0 0 calc(20/750*100vw)
	}

	.wp-pagenavi span.extend {
		font-size: 1.3rem;
		width: auto;
		height: auto
	}

	.pagetitle {
		padding: 0 2vw calc(20/750*100vw);
		font-size: 2rem;
		line-height: 1.6
	}

	.column.sec04 .post-list, .name-detail .text-area p {
		margin: 0 2vw calc(20/750*100vw)
	}

	.name-detail .text-area img {
		/*width: 100%;*/
		/*margin: 0 0 calc(20/750*100vw)*/
		width:16px;
	}

	.name-detail .pagetitle {
		font-size: 3rem;
		/*padding-bottom: 0*/
	}

	.name-detail .title02 {
		font-size: 1.7rem;
		line-height: 1.4;
		margin-top: calc(40/750*100vw);
		margin-bottom: calc(10/750*100vw);
		width: 96vw;
		left: 2vw;
		padding-left: 10vw
	}
	#name-list.ttl-style-01, .column.sec02 h2 {
		font-size: 2.1rem
	}

	.name-detail .title02:before,.name-detail .title02.ico_p:before {
		width: 8vw;
		height: 8vw
	}

	.name-detail .title02 span, .srch_fw_r {
		font-size: 1.2rem
	}
	.name-detail .title02 span.var{
		font-size:1.1rem;
	}

	.ano_gender, .dum, .name-detail .detail-desc {
		font-size: 1.3rem
	}

	.detail-list {
		display:block;
		padding: 10px;
		margin:0 0 15px 0;
	}

	/*.name-detail.sec04 > p*/
	.column #toc_container ul, .column .text-area, .name-detail .meaning-box .meaning, .name-detail .meaning-box .name, .name-detail .tag-list, .name-detail.sec04 p, .cmn-area {
		margin-left: 2vw;
		margin-right: 2vw
	}

	.detail-list li {
		display: block;
		padding-bottom: 2px;
		text-align: left;
		font-size: 1.6rem
	}

	.sorts li.sort_li, .sorts ul li {
		font-size: 70%
	}

	.q-box {
		top: -40px;
		left: 45px
	}

	.q-box.left_pos {
		top: 25px;
		left: -150px
	}

	.q-box.right_pos {
		top: 25px;
		right: 0;
		left: auto
	}

	.name-detail .meaning-box {
		margin-top: 0;
		margin-bottom: 0;
		padding: 20px 0 0;
	}

	.name-detail .meaning-box:after {
		content: "";
		width: 96vw;
		height: 1px;
		position: absolute;
		top: 0;
		left: 2vw
	}

	.column.sec02 h4:before, .name-detail .meaning-box:before {
		left: 2vw
	}

	.name-detail .meaning-box .meaning {
		margin-bottom: 25px
	}
	.name-detail .detail_ttl_r{
		padding-right:10px;
	}

	.meaning_txt {
		margin-bottom: 10px;
		text-align: left
	}
	.mean_sum_txt{
		font-size:1.6rem;
	}

	.act, .wiki ul.last {
		margin: 0
	}

	.name-detail .tag-list {
		margin-bottom: calc(16/750*100vw)
	}

	.column.sec03 .ttl-style-02, .name-detail.sec04 .ttl-style-02 {
		margin-top: 0
	}

	.name-detail.sec04 .name-list {
		margin-top: 15px;
		margin-bottom: 0
	}

	.generator .search-box {
		margin-bottom: calc(40/750*100vw)
	}

	.generator .name-card-wrap {
		width: 100%;
		padding: calc(16/750*100vw) 0;
		margin-top: calc(28/750*100vw)
	}

	.generator .name-card-wrap .ad-area {
		margin: calc(28/750*100vw) 0
	}

	.generator .name-card {
		width: calc(718/750*100vw);
		margin-left: auto;
		margin-right: auto;
		margin-bottom: calc(4/750*100vw)
	}

	.column.sec04 .post-list li, .column.sec04 .post-list li .tn, .generator.sec02 {
		margin-bottom: calc(20/750*100vw)
	}

	.generator .name-card a {
		text-align: center;
		padding: 9px 0;
		width: 100%;
		height: 100%
	}

	.generator .image-box {
		background: #e9f2da;
		padding: calc(50/750*100vw) 0 calc(80/750*100vw)
	}

	/*.cmn_all p, .generator.sec01 > p, p.cmn_p {*/
	.cmn_all p, .generator.sec01 p, p.cmn_p {
		margin: 0 2vw calc(20/750*100vw);
		/*font-size: 90%*/
	}

	/*.column.sec03 dl, .generator.sec02 > p {*/
	.column.sec03 dl, .generator.sec02 p {
		margin: 0 2vw
	}

	.column .pagetitle {
		margin-top: 0;
		padding-bottom: calc(22/750*100vw)
	}

	.column .pagetitle:after {
		margin-top: calc(10/750*100vw)
	}

	.column #toc_container {
		margin: calc(60/750*100vw) 0;
		padding: 0;
		padding-bottom: calc(36/750*100vw);
		border: none;
		border-bottom: 2px solid #fae8a8
	}

	.column #toc_container ul ul {
		margin-left: calc(50/750*100vw)
	}

	.column #toc_container ul a {
		padding: 0 10px 3px 2px
	}

	.column.sec02 h2 {
		margin-top: 0;
		font-size: 1.9rem;
		padding-top: 20px;
		padding-bottom: calc(15/750*100vw);
		padding-left: 2vw;
		padding-right: 2vw;
		line-height: 1.4
	}

	.column.sec02 h3 {
		margin-top: calc(30/750*100vw);
		border-radius: 0;
		font-size: 1.8rem;
		padding-left: 2vw
	}

	.column.sec02 h4 {
		font-size: 1.7rem;
		padding-bottom: calc(20/750*100vw);
		padding-left: calc(2vw + 15px)
	}

	.column.sec02 p {
		margin: 0 4vw 2vw
	}

	.column.sec02 img {
		width: 100%;
		max-width: 767px;
		margin: 0
	}

	.column.sec03 p {
		margin: 0 2vw .5em
	}

	.column.sec04 .post-list li {
		width: 48%
	}

	.column.sec04 .post-list li .tn {
		height: calc(208/750*100vw)
	}

	.column.clm_post ol, .column.clm_post ul {
		margin-left: 8vw
	}

	.name-detail.sec02 .single_middle_ad {
		padding-bottom: 0
	}

	.atoz-right {
		margin: 0 10px 10px 0;
		text-align: right
	}

	.reco_blk h3, .reco_right figure, .waldo_tac_mgn {
		text-align: center
	}

	.u-pc {
		display: none !important
	}

	.zero_nav {
		padding: 20px 2vw
	}

	.name-detail.sec04 .name-list.sp_mb20, .related_ad {
		margin-bottom: 20px
	}

	.ad-blk {
		margin-bottom: 1em
	}

	.clm_post h3.phrase {
		margin: 20px 4vw;
		font-size: 1.6rem
	}

	ruby {
		padding: 0 3px
	}

	.cmn_p {
		margin: 0 2vw calc(40/750*100vw)
	}

	.waldo_tac_mgn {
		margin: 0 0 20px
	}

	.reco_blk {
		display: block;
		margin-bottom: 30px
	}

	.reco_left, .reco_right {
		display: block;
		width: auto;
		padding: 0;
		margin: auto 4vw 10px
	}

	.ttl-style-02.font_s span {
		font-size: 1.8rem
	}

	.sorts ul li {
		margin-left: 0
	}

	#name-search {
		margin-left: 2vw
	}
	#first-name-search, #last-name-search, #name-search {
		/*padding-left: 2vw;*/
		margin-right:0;
	}
	.exact_label, .name_search_icon{
		width:5vw;

	}
	.exact_label{
		font-size:1.1rem;
	}
	.card-all .roma_name{
		margin-bottom:25px !important;
	}
}

.blocker, .modal {
	box-sizing: border-box;
	padding: 20px
}

@media screen and (min-width:768px) and (max-width:1067px) {
	.column-list dt {
		width: 43.4%
	}

	.column-list dd {
		width: 54.3%
	}

	header .header-inner {
		width: auto
	}

	.bread_crumb_list ul, .ft-top, header .header-inner {
		margin-left: 1%;
		margin-right: 1%
	}

	.tag-list-box .tag-list {
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center
	}

	.tag-list-box .tag-list li a {
		width: 150px;
		margin: 0 10px 10px
	}
}

@media screen and (min-width:1068px) {
	.bread_crumb_list ul, .contents-wrap, .ft-top {
		width: 1068px
	}

	.contents-wrap .sub-contents, .contents-wrap .top-contents {
		width: 728px;
		max-width: 728px
	}

	.contents-wrap .side-bar {
		width: 300px;
		max-width: 300px
	}

	.search-box .short {
		width: 320px;
		float: left
	}

	.main-img-area .inner, #g-nav .g-nav-inner, header .header-inner {
		max-width: 1068px
	}

	.tag-list-box .tag-list li a {
		width: 174px
	}
}

.link_name_search {
	text-align: right;
	float: right;
	font-size:1.5rem;
}

.link_name_search.top_list {
	margin-bottom:10px;
}

.name_summary {
	font-size: 90%
}

.name_summary strong {
	display: inline-block;
	margin: 0 10px 0 0;
	font-family: ao;
	font-size: 180%;
	font-weight: normal;
}

.name-list .title {
	display: table;
	width: 100%
}

/*.modal-spinner > div*/
.blocker:before, .clm_list li, .last-st li, .modal-spinner div, .sub_nav ul a {
	display: inline-block
}

.name-more {
	color: #2563eb;
	margin: 0 10px 0 0;
	font-size: 80%;
	white-space: nowrap
}

.num_sfx {
	color: #675443 !important;
	margin: 0 !important
}

.make_mug {
	margin: 0 10px 0 13px
}

.adunitlabel {
	position: unset !important
}

@media only screen and (max-width:359px) {
	.name-list li {
		padding-left: 10px !important;
		padding-right: 10px !important
	}
}

@media only screen and (min-width:768px) {
	.name-list li[data-slot-rendered-dynamic=true] .mv-ad-box {
		width: calc(100% + 44px) !important;
		margin-left: -22px
	}
}

.mb0 {
	margin-bottom: 0 !important
}

.tar {
	text-align: right
}

.fav-btn img {
	margin-right: 8px !important
}

em.fav-txt {
	margin-left: 5px;
	font-weight: 400;
	font-style: italic !important;
	margin-right: 0 !important;
	color: #2563eb;
	font-size: 1.2rem
}

#toc_container li, #toc_container ul {
	margin: 0;
	padding: 0
}

#toc_container.no_bullets li, #toc_container.no_bullets ul, #toc_container.no_bullets ul li, .toc_widget_list.no_bullets, .toc_widget_list.no_bullets li {
	background: 0 0;
	list-style: none
}

#toc_container.have_bullets li {
	padding-left: 12px
}

#toc_container ul ul {
	margin-left: 1.5em
}

#toc_container {
	background: #f9f9f9;
	border: 1px solid #aaa;
	padding: 10px;
	width: auto;
	display: table;
	font-size: 95%
}

#toc_container.toc_light_blue {
	background: #edf6ff
}

#toc_container.toc_white {
	background: #fff
}

#toc_container.toc_black {
	background: #000
}

#toc_container.toc_transparent {
	background: 0 0
}

#toc_container p.toc_title {
	text-align: center;
	font-weight: 700;
	margin: 0;
	padding: 0
}

#toc_container.toc_black p.toc_title {
	color: #aaa
}

#toc_container span.toc_toggle {
	font-weight: 400;
	font-size: 90%
}

#toc_container p.toc_title+ul.toc_list {
	margin-top: 1em
}

.toc_wrap_left {
	float: left;
	margin-right: 10px
}

.toc_wrap_right {
	float: right;
	margin-left: 10px
}

#toc_container a {
	text-shadow: none
}

.toc_sitemap_posts_letter {
	font-size: 1.5em;
	font-style: italic
}

.clm_list {
	text-align: center;
	margin: 0 0 30px
}

.clm_list li {
	padding: .3em 0 .3em 1.6em;
	line-height: 1.5;

}

.clm_list a:before {
	content: '';
	background-color: #34508a;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	margin:0 7px 0 0;
}
.clm_list a{
	color: #2563eb;
	text-decoration: underline;
	display: flex;
	align-items: center;  /* 自然な中央寄せ */
}
.clm_list a:hover{
	text-decoration: none;
}

.clm_intro {
	margin: 0 0 40px
}

.love_ukraine img {
	width: 25px;
	height: auto
}

.love_ukraine.u-sp{
margin-left:20px;
}

#love_ukraine_modal, .modal {
	display: none;
	text-align: center
}

.modal p {
	margin: 0 0 .5rem
}

.modal a {
	color: #34508a
}

.author_img {
	width: 36px;
	height: auto
}

.blocker {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	z-index: 100000;
	background-color: rgba(255, 255, 255, .75);
	text-align: center
}

.blocker:before {
	content: "";
	height: 100%;
	margin-right: -.05em
}

.modal {
	display: none;
	position: relative;
	z-index: 200000;
	max-width: 600px;
	width: 90%;
	border-radius: 8px;
	background-color:#fff; /*必要*/
	box-shadow: 0 0 20px #0000004d;
	text-align: left
}

.modal a.close-modal {
	position: absolute;
	top: -12.5px;
	right: -12.5px;
	display: block;
	width: 30px;
	height: 30px;
	text-indent: -9999px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==)
}

.modal-spinner {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	padding: 12px 16px;
	border-radius: 5px;
	background-color: #111;
	height: 20px
}

/*.modal-spinner > div {*/
.modal-spinner div {
	border-radius: 100px;
	height: 20px;
	width: 2px;
	margin: 0 1px;
	-webkit-animation: 1.2s ease-in-out infinite sk-stretchdelay;
	animation: 1.2s ease-in-out infinite sk-stretchdelay
}

.modal-spinner .rect2 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s
}

.modal-spinner .rect3 {
	-webkit-animation-delay: -1s;
	animation-delay: -1s
}

.modal-spinner .rect4 {
	-webkit-animation-delay: -.9s;
	animation-delay: -.9s
}

@-webkit-keyframes sk-stretchdelay {
	0%, 100%, 40% {
		-webkit-transform: scaleY(.5)
	}

	20% {
		-webkit-transform: scaleY(1)
	}
}

@keyframes sk-stretchdelay {
	0%, 100%, 40% {
		transform: scaleY(.5);
	}

	20% {
		transform: scaleY(1);
	}
}

.srch_ttl {
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin-bottom: 10px
}

.srch_r img {
	width: 6px;
	height: auto;
	margin: 0 5px 0 0
}

.last-st {
	padding: 0 0 10px;
	text-align: right
}

.last-st .q-icon-ttl, .name_summary .q-icon-ttl {
	color: #d4940a
}

.last-st li {
	margin: 0
}

.atoz.last-name .atoz-list a {
	background-color: #e2f8f1
}

/*.name-list.last-names li:nth-of-type(odd), .search-box.last-names {
	background-color: #f1fefa
}*/
.search-box.last-names {
	background-color: #f1fefa
}

.atoz.last-name .title:before {
	background: url(/images/common/icon_lastname.png) left 50%/contain no-repeat
}

.atoz.last-name .atoz-list a.active, .atoz.last-name .atoz-list a:hover {
	background-color: #7b9bc7
}

.search-box.last-names {
	border-color: #7b9bc7
}

/* ───────────── sub_nav ───────────── */
.sub_nav.detail_nav, .sub_nav.detail_nav3{
  padding-top:20px !important;
}

.sub_nav{
  margin:0 0 25px 0;                /* PC は両端いっぱい・下 25px */
}

.sub_nav ul,
.sub_nav.detail_nav3 ul{
  display:grid;
  grid-template-columns:repeat(3,1fr); /* 3 列 */
  margin:0;
  padding:0;
  justify-items:center;               /* ボタンを中央寄せ */
}

.sub_nav.detail_nav ul, .sub_nav.cols2 ul{
  grid-template-columns:repeat(2,1fr); /* 2 列 */
}

.sub_nav li{
  list-style:none;
  display:flex;                       /* 子 a を stretch させる器 */
}

.sub_nav li a{
  flex:1 1 auto;                      /* li の幅・高さいっぱいに */
  height:100%;
  display:flex;
  flex-direction:row;                 /* アイコン左・文字右 */
  align-items:center;                 /* 垂直中央 */
  justify-content:center;
  padding:10px 20px;
  box-shadow:2px 2px 6px rgb(138 138 123 / 50%);
  border-radius:30px;
  color:#2563eb;
  font-size:1.6rem;
  text-align:left;
  text-decoration:none;
}

.sub_nav.detail_nav a, .sub_nav.detail_nav3 a{                /* アイコン無しの場合は中央 */
  justify-content:center;
}

/* .detail_nav3 でセルを stretch し、幅を強制 100% */
.sub_nav.detail_nav3 ul{
  /*justify-items:stretch;*/
}
.sub_nav.detail_nav3 li a{
  width:100%;
}

@media (max-width:767px){

  .sub_nav{
    margin:0 2vw 20px 2vw;            /* サイドに余白・下 20px */
  }

  .sub_nav ul{                        /* ボタンを stretch させ高さ調整 */
    justify-items:stretch;
  }

  .sub_nav li a{
    flex-direction:column;            /* アイコン上・文字下 */
    align-items:center;
    justify-content:flex-start;       /* 上寄せ */
    padding:10px;
    border-radius:20px;               /* 丸みを少し小さく */
    text-align:center;
  }

  /* .detail_nav3 の stretch 設定はモバイルでも必要 */
  .sub_nav.detail_nav3 ul{
    justify-items:stretch;
  }
  .sub_nav.detail_nav3 li a{
    width:100%;
  }
}
@media (min-width:768px){
	.sub_nav ul, .sub_nav.detail_nav3 ul{
		display:flex;
		justify-content:space-evenly;
	}
}
/* ───────────── /sub_nav ───────────── */


hr.p2 {
	padding-top: 40px;
	margin: 0 25% 40px
}

.wn-list li {
	border-bottom: 1px dotted #ccc;
	margin-bottom: 15px
}

.wn-list dl {
	display: flex;
	align-items: baseline;
	justify-content: left;
	padding: 0 0 15px
}

.wn-list dt {
	padding: 0 20px 0 10px;
	width: 160px
}

.wn-list dd {
	padding: 0;
	flex: 1
}

.sln .detail-list {
	border-bottom: 1px solid #7b9bc7;
	border-top: 1px solid #7b9bc7
}

/*.sln .name-detail .title02 {
	border-bottom: 2px solid #7b9bc7
}*/

.sln .ttl-style-02:after, .sln .ttl-style-02:before {
	background-color: #7b9bc7
}

.sh_btns.hdr {
	margin-left: 0 !important;
	display: inline-block
}


#sh_modal {
	opacity: 0;
	display: none
}

#sh_modal :is(.modal_ttl, .icons, .field) {
	display: flex;
	align-items: center;
	justify-content: space-between
}

#sh_modal .modal_ttl {
	padding-bottom: 15px;
	border-bottom: 1px solid #ebedf9
}

#sh_modal .modal_ttl span {
	font-size: 2rem;
	font-weight: normal
}

#sh_modal .icons a {
	display: flex;
	align-items: center;
	border-radius: 50%;
	justify-content: center;
	transition: .3s ease-in-out
}

#sh_modal .content {
	margin: 20px 0;
	text-align: center
}

#sh_modal .icons {
	margin: 15px 10px 20px
}

#sh_modal .content .icons a {
	height: auto;
	width: 50px;
	text-decoration: none;
	border: 1px solid transparent
}

#sh_modal .content .field {
	margin: 10px 0 0 0;
	border-radius: 4px;
	padding: 4px;
	border: 1px solid #757171
}

#sh_modal .field.active {
	border-color: #7d2ae8
}

#sh_modal .field.active i {
	color: #7d2ae8
}

#sh_modal .field input {
	width: 100%;
	height: 100%;
	border: none;
	outline: 0
}

#sh_modal .field button {
	color: #fff;
	padding: 5px 18px;
	background: #7d2ae8;
	border-radius:4px;
}

#sh_modal .field button:hover {
	background: #8d39fa
}

.pt0 {
	padding-top: 0 !important
}

.filt_all {
	margin: 0 0 30px;
	padding: 20px 0 0
}
.filt_all h2, .filt_all h3{
	font-size:1.8rem;
	font-weight:normal
}

.filt_all.kt {
	margin: 0 0 20px;
	padding: 0
}

#filt_noname p, .filt_noname p {
	text-align: center
}

@media screen and (max-width:767px) {
	.clm_intro {
		margin: 0 2vw 30px
	}

	.sorts, .srch_r {
		margin-right: 2vw
	}
	.srch_ttl{
		margin-bottom:5px;
	}
	.srch_r {
		font-size: 1.2rem
	}
	.link_name_search {
		font-size:1.2rem;
	}
	.name_search_icon{
		top:0;
	}
	.ttl-style-01 .name_search_icon {
		top:-2px;
		margin-right:2vw !important;
	}
	.wn-list dl {
		display: block
	}

	.wn-list dd, .wn-list dt {
		padding: 0;
		margin: 0 2vw;
		width: auto
	}

	.sub_nav ul {
		margin:5px 0 10px;
	}
	.sub_nav.detail_nav{
		padding-top:20px !important;
	}
	.sub_nav.detail_nav ul{
		margin-bottom:30px !important;
	}

	.sub_nav li {
		padding: 0 2vw;
		text-align: center
	}

	.sub_nav ul a {
		line-height: 1.1;
		font-size:1.3rem;
	}

	.sub_nav ul a img {
		display: block;
		margin: 0 auto 5px
	}

	.sorts {
		margin-left: 2vw
	}

	#sh_modal .icons {
		margin: 15px 0 20px
	}
	/*#sh_modal .content .icons a {
		width: 8vw
	}*/
	#sh_modal .content .icons {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 18px 14px; /* 行・列の余白 */
		justify-items: center;
		margin: 18px 18px 22px;
	}

	.filt_all {
		margin: 0 2vw 30px;
		padding: 20px 0 0
	}
}

#timestamp {
	display: none
}

#timestamp.on {
	display: inline-block
}

.hitomoji {
	display: inline-block;
	margin: 0 0 30px;
	font-family: ao;
	font-size: 260px;
	font-weight: 400;
	line-height: 1
}

.kanji-detail .meaning, .kanji-detail .meaning-box .name {
	vertical-align: top !important
}

.kanji-detail .meaning-box .name {
	min-width: 340px
}

.kanji-detail .meaning-box .name .ad_cmn {
	padding: 0
}

.kanji-detail canvas {
	display: inline-block
}

.kt_info span {
	color: #d4940a;
	font-size: 1.5rem;
	font-weight: 600;
	margin-right: 0
}

.kt_info .meaning_cont {
	margin-left: 10px
}

.kt_info li.kt_blk {
	margin-bottom: 20px
}

.strokes {
	display: table
}

.strokes .stroke_right {
	display: table-cell;
	vertical-align: middle
}

.strokes canvas {
	display: none;
	margin-right: 10px;
	margin-bottom: 10px
}

#imageContainer canvas {
	border: 1px solid #ccc
}

.meaning_list {
	margin: 0 10px 40px
}

.kanji-detail .search-box {
	margin-bottom: 40px
}

.kanji-archive a {
	color: #2563eb;
	text-decoration: underline
}

.kanji-archive a:hover {
	text-decoration: none
}


.kanji-list, .name-list.fav-list.kanji-list{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 10px;
	width: 96%;
	list-style: none;
	padding: 0;
	margin: 0 2% 30px 2%;
	justify-items:stretch;
}
.name-list.fav-list.kanji-list{
	padding: 10px 0 0 0;
}

.kanji-list li {
	border: 1px solid #ccc; /* 枠線のスタイル */
	padding: 5px; /* 内部のパディング */
	text-align: center; /* テキストを中央揃えに */
	box-shadow: .707px .707px 4px 0 rgba(0, 0, 0, .1);
}

.kanji-list li.no_chara_li{
	border:none;
	box-shadow:none;
	grid-column: 1 / -1;
	text-align:left;
	padding: 5px 0 22px 0;

    content-visibility: auto;
    border-bottom: dashed 1px #7b9bc7;
}
.kanji-list li.no_chara_li a {
	display:inline !important;
	font-weight:normal !important;
	font-size:1.5rem !important;
}

.kanji-list li.inaus{
	background-color:#f2f2f2
}

/* リンクのスタイル */
.kanji-list li a, .name-list.kanji-list .title em{
	text-decoration: none; /* 下線を無効化 */
	color: black; /* テキストの色 */
	box-shadow: none;
	border:none;
	margin:0;
	float:none;
	display:block;
	font-size: 3rem !important;
	font-weight:normal;
	font-family: ao;
}
.kanji-list li.no_chara_li a {
    font-family: inherit;
    font-size: inherit !important;
}
.kanji-list.creative-list {
	grid-template-columns: repeat(3, 1fr);
}

@media screen and (max-width:767px) {
	.kanji-detail .pagetitle {
		font-size: 2.6rem
	}

	.kanji-detail .meaning-box {
		padding: 10px 0 0
	}

	.kanji-detail .meaning-box .meaning {
		text-align: left
	}

	.last-st .q-icon-ttl, .name_summary .q-icon-ttl {
		font-size: 80%
	}
	.kanji-list.creative-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

.sh_txt {
	color: #2563eb;
	margin-left: 10px
}

/* membership */

.fr{
	float: right;
}
.hdr_mem_icon{
	/*margin-left:10px;*/
}
.hdr_mem_icon img, img.profile_img{
	border-radius:100%;
	/*box-shadow:2px 2px 6px rgb(138 138 123 / 50%);*/
}
/*
.ttl_r{
	float:right;
	font-size:1.3rem;
	font-weight:normal;
}
*/
.with_flex{
	display:flex;
	align-items: center;
}
.pagetitle .with_flex{
	align-items: baseline;
}
.with_flex .ttl_l{
	text-align: left;
	flex-grow: 1;
}
.with_flex .ttl_r{
	text-align: right;
   flex-grow: 1;
	font-size:1.5rem;
}
.ttl_r a, .ttl_r span{
	color: #2563eb;
	text-decoration: underline;
	display:inline-block;
}
.ttl_r a:hover, .ttl_r span:hover{
	text-decoration: none;
}
.mr_1ch{
	padding-right:1ch;
	box-decoration-break: clone;
	text-decoration: underline;
}
.file_up_atten{
	padding-top:10px;
	font-size:1.2rem;
}
.img.profile_img{
	max-width:225px;
}

.mig_fav{
	margin-bottom:15px;
}
.edit_profile_img img{
	box-shadow:2px 2px 6px rgb(138 138 123 / 50%);
}
.edit_profile_img{
	margin:0 0 10px 0;
}

.column .name-list a{
	text-decoration:none;
}
.arrow_links li, .with_flex .ttl_r a{
	background: url(/images/common/ar2.png) no-repeat left center/6px;
	padding-left:11px;
}
.with_flex .ttl_r.srch a{
	background:none !important;
}
@media screen and (max-width:767px) {
	.with_flex .ttl_r.srch span{
		font-size:1.2rem;
	}
}

.ttl_link{
	text-decoration: none !important;
	color:#333 !important;
}
.ttl_link:hover{
	text-decoration: none !important;
}

.whatsnew-ttl{
	display: flex;
	justify-content:space-between;
	align-items:baseline;
}
.whatsnew ul{
	margin:0 0 20px 0;
}
.whatsnew li{
	border-bottom: none;
}
.whatsnew dd ul, .top-wn-list dd ul {
	list-style-type: disc;
	list-style-position: outside;
	padding-left: 1.5em;
	margin: 0 0 0.5em 0;
}
.whatsnew li:last-child{
	border:none;
}
.whatsnew dl{
	display: flex;
	padding:10px 0 10px 0;
}
.whatsnew dt{
	margin-right: 20px;
	flex-shrink: 0;
	padding:0 0 0 10px;
}
.whatsnew dd{
	padding:0 10px 0 0;
}
.whatsnew .fl{
	float:left;
	margin:0 10px 10px 0;
}
.whatsnew .fr{
	float:right;
	margin:0 0 10px 10px;
}
.whatsnew img.no_shadow{
	box-shadow:none !important;
	margin:0 3px;
}
.whatsnew dd p{
	margin-bottom:0.5rem;
}
.whatsnew ul a{
	color:#2563eb;
}
.whatsnew-link{
	text-align:right;
	margin-bottom:20px;
}
.radius100{
	border-radius:100% !important;
}
.chara_txt{
	margin-bottom:30px;
}
.chara_txt p{
	margin-bottom:1rem;
}

.chara_top h2 a{
	text-decoration:none;
	color:#000;
}

.hirakana-list {
	display: grid;
	grid-template-columns: repeat(5, 1fr); /* 5つの等幅の列を作成 */
	grid-gap: 10px; /* 列と行の間隔 */
	width: 96%; /* コンテナの幅を全幅に設定 */
	list-style: none; /* リストのスタイルを無効化 */
	padding: 0; /* パディングをリセット */
	margin: 0 2% 30px 2%; /* マージンをリセット */
}
.hirakana-list li {
	border: 1px solid #ccc;
	padding: 10px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
}
.hirakana-list li a {
	text-decoration: none; /* 下線を無効化 */
	color: black; /* テキストの色 */
	box-shadow: none;
	border:none;
	margin:0;
	float:none;
	display:inline-block;

}
.hirakana-list .furigana{
display:block;
}

.s_icon{
	margin-right:3px;
}

@media screen and (max-width:767px) {
	.whatsnew dl{
		display:block;
	}
	.whatsnew dt,.whatsnew dd{
		margin:0;
		padding:0;
	}
	.top-wn-list{
		margin-bottom:10px !important;
	}
	.top-wn-list > li {
		display: none; /* TOPページ すべてのリストアイテムを非表示にする */
		border:none !important;
	}
	.top-wn-list > li:first-child {
		display: block; /* TOPページ 最初のリストアイテムのみを表示 */
	}
	.wn-ttl{
	margin-bottom: 0 !important;
	}
	.hirakana-list li{
		padding:5px;
	}
	.hirakana-list li a {
		font-size:2rem;
	}
	.hirakana-list .furigana{
		font-size:1rem;
	}
	.hirakana-list .speech img{
		width:4vw;
	}
}
.eng_ts{
	font-size:1.7rem;
	font-weight:bold;
	vertical-align:middle;
	margin-left:3px;
}


#ans .search-box{
	padding-bottom:15px;
}
#ans .ans_kanji_detail{
	margin:0 15px 20px 15px;
}

#ans .ans_kanji_detail ul{
	font-size:1.2rem;
	margin:5px 0 0 1.5rem;
}


#ans .answer {
	text-align: center;
	/*font-size: 2rem;*/
}

#ans h2{
	font-weight:normal;
	font-size:1.6rem;
	/*color:#d4940a;*/
}
#ans h2 .italic{
	font-size:1.3rem;
}

#ans .kanji_copy{
	margin-bottom:30px;
}
#ans .fav_btn img{
	width:22px;
}
#ans .copy_txt{
	font-size:1.5rem;
	padding-top:15px;
}
#ans .kanji_copy .copy_area{
	font-size:1.5rem;
	border:solid 1px #ccc;
	padding:2px;
	text-align: center;
	position: relative;
	width:auto;
	padding:5px 10px;
	width:90%;
	margin:0 auto 10px auto;
	box-sizing: border-box;
	border-radius: 5px;
}
#ans .copy_btn button{
	background-color:#7d2ae8;
	color:#fff;
	padding:5px 10px;
	border-radius:5px;
	font-size:1.5rem;
}
#ans .copy_btn button:hover {
	background: #8d39fa;
}
#ans .fav_btn{
	margin-left:0;
}
#ans .answer.katakana_txt {
	padding-top:10px;
	font-size: 1.6rem;
	margin-bottom:30px;
}
#ans .answer .sh_btns{
	vertical-align:middle;
}
#ans .no_name{
	margin-bottom:2rem;
}
.ml0{
	margin-left:0 !important;
}

#ans .voice_icon{
	width:25px;
	margin:0;
	vertical-align:middle;
}
.ans_txt{
	display: block;
}

#ans .kanji_before_txt{
	font-size:1.5rem;
	margin-bottom: 10px;
}

.kt_credit{
	font-size:1.5rem;
	text-align:center;
	margin-bottom:20px;
}
.credit_txt{
	font-size:1rem;
	margin:0 0 10px 0;
}

#ans .again{
	margin:0 0 40px 0;
}

.answer .ans_txt{
	font-family: ao, Yu Mincho, YuMincho, MS Mincho;
	font-size: 4rem;
	margin-bottom:10px;
}
.answer .ans_txt.kanji_ans_txt{
	margin-bottom:20px;
}

.answer .kanji_name .ans_txt{
	font-size: 3.5rem;
}

#ans .voice_icon, #ans .cp_icon{
	vertical-align: middle;
}
#ans .cp_icon{
	margin-left:15px;
}

.kanji-note{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 14px;
  background:#f2fafc;                 /* やわらかい水色背景 */
  border:1px solid #cfe7ef;            /* 薄い枠線 */
  border-radius:12px;
  color:#2a3b47;                       /* 読みやすい文字色 */
  font-size:1.3rem; line-height:1.6;
  margin:20px 0 0;
  text-align:left;
}
.kanji-note__icon{
  width:20px; height:20px; min-width:20px;
  fill:#0f6c8a;                        /* サイトのティール系に合わせる */
  margin-top:2px;
}
.kanji-note a{
  color:#0f6c8a; text-decoration:underline; text-underline-offset:2px;
}


.generator .roma_names_disting{
	font-size:1.3rem !important;
	font-weight: normal;
	margin:0 !important;
	padding:10px 0;
	line-height:1.6;
	color:#999;
}
.roma_names_disting a{
	text-decoration:underline;
	color:#666;
}
.roma_names_disting a:hover{
	text-decoration:none;
}
.pb10{
	padding-bottom:10px;
}

/*fav tab*/
/*
#tabs {
	overflow: hidden;
	padding: 0;
	margin: 0;
}

#tabs .tab-link {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
	font-size: 1.4rem;
	border-radius:10px 10px 0 0;
}*/

#tabs {
	display: flex;
	justify-content: space-between; /* または space-around や flex-start などお好みに合わせて調整 */
	gap: 0 5px; /* ボタン間のスペースを調整 */
	align-items:streach;
	flex-wrap:wrap;
	border-bottom:dashed 1px #7b9bc7;
}

.tab-link {
	font-size:1.2rem;
	border-top:dashed 1px #7b9bc7;
	border-left:dashed 1px #7b9bc7;
	border-right:dashed 1px #7b9bc7;
	border-radius:10px 10px 0 0 ;
	padding: 10px 0;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.3s ease;
	/*flex-grow: 1; /* これにより、ボタンの幅が均等に配置されます */
	flex:1;
}

.tab-link:nth-child(3),
.tab-link:nth-child(4),
.tab-link:nth-child(5){
    flex-basis: calc(33.333% - 5px);
    /* 3 tabs per row, accounting for gap */
}

.tab-link:nth-child(1),
.tab-link:nth-child(2){
    flex-basis: calc(50% - 5px);
    /* 2 tabs per row, accounting for gap */
}

#tabs .tab-link:hover {
	/*background-color: #f0f4f9*/
	opacity:0.7;
}
#tabs .tab-link.active {
	background-color: #f0f4f9;/* アクティブなタブの背景色 */
	font-weight: bold; /* 文字を太字に */
}

#tabs .tab-link .num{
	font-size:1.2rem;
	margin:0 0 0 3px;
}
#tabs .atten .q-icon{
	background-color:red;
	color:white;
	padding:0px 4px;
	border-radius:2px;
	margin:0 0 0 5px;
}

.load_circle img {
	display: block;
	margin: 20px auto;
}

.name-list.fav-list{
	/*display: none; /* 初期状態ではすべて隠す */
	border:none !important;
}
.hidden{
 display: none !important;
}

.fav_li{
	display:flex;
	align-items:center;
	justify-content:flex-start;
}
.fav_left{
	width:30px;
	text-align:left;
}

.fav-list.kanji-list .fav_right .title{
	display:flex;
	flex-direction:column;
	justify-content:space-evenly;
	align-items:center;
}

.drag-handle {
	cursor: move;
}

.name-list.fav-list.active {
	display: block; /* アクティブなリストだけ表示 */
}
.sortable-list .sortable-ghost{
	opacity: 0.6;
	background-color: #cceeff;
}

.tip-message {
	text-align: center;
	box-shadow: 0 0 20px #0000004d;
	z-index: 100000;
	font-size:1.3rem;
	border-radius: 8px;
	position:absolute;
	padding:8px;
	white-space:'nowrap';
	background-color:#fff;
	color:#333;
}
.tip-message a{
	text-decoration:none;
	color: #34508a;
}
.tip-message a:hover{
	text-decoration:none;
}

.modal_center{
	text-align:center;
}

/* Modal button container */
.del_fav_btns {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	width: 100%;
}

/* Base button styles */
.del_fav_btns button, .del_fav_btns a {
	padding: 10px 20px;
	cursor: pointer;
	font-size: 1.4rem;
	border-radius: 5px;
	border: none;
	text-decoration: none;
	text-align: center;
	display: inline-block;
	min-width: 100px;
	transition: all 0.2s ease;
}

/* Cancel button (secondary) - always on left */
.del_fav_btns .modal-cancel-btn {
	background: #f5f5f5;
	color: #333 !important;
	border: 1px solid #ddd;
	order: 1;
}
.del_fav_btns .modal-cancel-btn:hover {
	background: #e8e8e8;
}

/* Safe action button (primary/green) - always on right */
.del_fav_btns .modal-ok-btn {
	background: #28a745;
	color: white !important;
	order: 2;
}
.del_fav_btns .modal-ok-btn:hover {
	background: #218838;
}

/* Dangerous action button (danger/red) - always on right */
.del_fav_btns .modal-danger-btn {
	background: #dc3545;
	color: white !important;
	order: 2;
}
.del_fav_btns .modal-danger-btn:hover {
	background: #c82333;
}

/* Mobile: Stack buttons vertically */
@media (max-width: 480px) {
	.del_fav_btns {
		flex-direction: column;
		gap: 0;
	}
	.del_fav_btns button, .del_fav_btns a {
		width: 100%;
		margin-bottom: 10px;
	}
	.del_fav_btns button:last-child, .del_fav_btns a:last-child {
		margin-bottom: 0;
	}
	/* Reverse order so Cancel appears on top, Action on bottom */
	.del_fav_btns .modal-cancel-btn {
		order: 1;
	}
	.del_fav_btns .modal-ok-btn,
	.del_fav_btns .modal-danger-btn {
		order: 2;
	}
}

/* Dark mode support */
.dark .del_fav_btns .modal-cancel-btn {
	background: #444;
	color: #fff !important;
	border-color: #555;
}
.dark .del_fav_btns .modal-cancel-btn:hover {
	background: #555;
}

.del_fav_txt{
	display:none;
	color: orange;
}
.disabled {
	color: grey !important;
	cursor: not-allowed !important;
}

/* Migration notice button container */
.atten_green > div[style*="display: flex"] {
	flex-wrap: wrap;
}

/* Migration notice buttons - mobile stack */
@media (max-width: 480px) {
	.atten_green > div[style*="display: flex"] {
		flex-direction: column !important;
		gap: 0 !important;
	}
	.atten_green > div[style*="display: flex"] button {
		max-width: 100% !important;
		margin-bottom: 10px;
	}
	.atten_green > div[style*="display: flex"] button:last-child {
		margin-bottom: 0;
	}
}

/*
.adthrive-ad{
	min-height:250px;
}*/

/* 広告による横スクロール防止 */
body {
	overflow-x: hidden;
}
.adthrive-ad,
.adthrive-content,
[class*="adthrive"] {
	max-width: 100vw;
	/*overflow-x: hidden;*/
	box-sizing: border-box;
}

/* Frameworks page - テーブル横スクロール（スマホのみ） */
@media (max-width: 768px) {
	.frameworks table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
	}

	.frameworks table th,
	.frameworks table td {
		white-space: nowrap;
		padding: 8px 12px;
	}
}

/* Column articles - テーブル横スクロール（スマホのみ） */
@media (max-width: 768px) {
	.clm_post table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
	}

	.clm_post table th,
	.clm_post table td {
		white-space: nowrap;
		padding: 8px 12px;
	}

	.clm_post table td .note {
		white-space: normal;
	}
}

/* Column articles - Note text in merged Notes cells */
.clm_post .note {
	display: inline-block;
	font-size: 0.85rem;
	color: #777;
}
[data-theme="dark"] .clm_post .note {
	color: #aaa;
}

/* Column articles - Name + voice icon nowrap */
.clm_post table td .voice_icon {
	vertical-align: middle;
}

.atten_not_permit{
	padding:10px;
}


/*samples*/
.samples {
	max-width: 800px;
	margin: 20px auto;
	padding: 20px;
	background: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 8px;
	text-align: center;
}

.samples h3 {
	margin-bottom: 15px;
	font-size: 1.5em;
	color: #333;
}

.samples ul {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	list-style: none;
	padding: 0;
	margin: 20px 0;
}

.samples li {
	flex: 1;
	border: 1px solid #ddd;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.samples img {
	width: 100%;
	height: auto;
	display: block;
	border-bottom: 1px solid #ddd;
}

.samples .btns {
	display: flex;
	justify-content:center;
	gap: 10px;
	margin-top: 20px;
}

.samples .btns a {
	display: inline-block;
	padding: 10px 20px;
	color: #fff;
	text-decoration: none;
	border-radius: 5px;
	font-weight: bold;
	transition: background 0.3s ease;
}

.samples .btns a:first-child {
	background: #28a745; /* Green button */
}

.samples .btns a:first-child:hover {
	background: #218838;
}

.samples .btns a:last-child {
	background: #dc3545; /* Red button */
}

.samples .btns a:last-child:hover {
	background: #c82333;
}
.feedback-msg {
	margin-top: 10px;
	color: #28a745;
	text-align: center;
}
.feedback-msg a{
	text-decoration: underline;
}


.atten_txt {
	padding: 20px;
	color: #666;
	border: solid 1px #dbdbdb;
	margin: 0 0 30px 0;
}

.atten_txt legend {
	padding: 0 10px;
	border: solid 1px #dbdbdb;
}
.atten_txt p{
	margin-bottom:15px;
}
.mb2rem{
	margin-bottom:2rem !important;
}
.person_list{
	border-top:dashed 1px #ccc;
}
.person_list ruby{
	font-size:2.5rem;
}
.person_list ruby span{
	font-family:ao;
}
.person_list li:first-child{
	padding-top:25px;
}
.person_list li{
	border-bottom:dashed 1px #ccc;
	margin-bottom:10px;
	padding:15px 10px 10px 10px;
}
.person_list a{
	color:#2563eb;
	text-decoration: none;
}
.person_list a:hover{
	text-decoration: none;
}
.wiki_link img{
	width:20px;
	height:auto;
	margin-left:5px;
}
.kanji-meta{
	margin:0 0 20px 0;
}
@media screen and (max-width:767px) {
	.person_list li{
		padding-left:2vw;
		padding-right:2vw;
		font-size:1.3rem;
	}
	.name-list.fav-list.kanji-list{
		grid-gap:5px;
	}
	.name-list.kanji-list .fav_left{
		width:auto;
		font-size:0.9rem;
		flex-shrink:0;
	}
	.name-list.kanji-list .fav_right{
		padding:0;
		flex:1;
	}
	.name-list.kanji-list .fav_btn{
		margin-left:0;
	}
	.name-list.kanji-list .cp_btn{
		display:none;
	}
	.name-list.kanji-list .fav_li{
		justify-content:space-around;
	}
	.kanji-meta{
		margin:0 2vw calc(20/750*100vw) 2vw;
	}
	.atten_txt {
		border-left:none;
		border-right:none;
		border-top: solid 1px #dbdbdb;
		border-bottom: solid 1px #dbdbdb;
	}
	.kanji-note{
		margin:20px 2vw;
		}
}
#loadingOverlay{
	display: none;
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background-color: rgba(255,255,255,0.75);
	z-index: 9999;
}
#loadingOverlay img{
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10000;
}
#meaningSearchMessage {
	position: absolute;
	top: calc(50% + 40px);
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	font-size:1.3rem;
	width: 100%;
	max-width: 400px;
	z-index: 10000;
	margin-top: 20px;
}

/* my name in Japanese */

/* 1. KatakanaとHiraganaブロックの2列構成（PC）/ 1列構成（スマホ） */
/* 各セクションを識別するためのラッパー */
.eng-name-detail .name-detail.kanji-detail.sec02 {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* KatakanaとHiraganaセクションを2列に */
.eng-name-detail .name-detail.kanji-detail.sec02 > h2.wn-ttl:nth-of-type(1),
.eng-name-detail .name-detail.kanji-detail.sec02 > section.katakana_txt:nth-of-type(1),
.eng-name-detail .name-detail.kanji-detail.sec02 > h2.wn-ttl:nth-of-type(2),
.eng-name-detail .name-detail.kanji-detail.sec02 > section.katakana_txt:nth-of-type(2) {
    flex: 1 1 calc(50% - 10px);
}

/* Kanji Examplesセクションは全幅 */
.eng-name-detail .name-detail.kanji-detail.sec02 > h2.wn-ttl:nth-of-type(3),
.eng-name-detail .name-detail.kanji-detail.sec02 > ul.ateji_list,
.eng-name-detail .name-detail.kanji-detail.sec02 > fieldset,
.eng-name-detail .name-detail.kanji-detail.sec02 > h2.wn-ttl:nth-of-type(4),
.eng-name-detail .name-detail.kanji-detail.sec02 > ul.name-list {
    flex: 1 1 100%;
}

/* 2. Kanji Examplesの意味説明を3列構成に */
.eng-name-detail .ateji_list .meaning, #ans .meaning{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}
#ans .meaning{
	margin-top:30px;
}

.eng-name-detail .ateji_list .meaning_txt, #ans .meaning .meaning_txt{
    flex: 1 1 calc(33.333% - 10px);
    box-sizing: border-box;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
    margin-bottom: 0 !important;
}

/* 漢字リンクを中央揃え */
.eng-name-detail .ateji_list .meaning_txt .kanji_link, #ans .meaning .meaning_txt .kanji_link{
    text-align: center;
    margin-bottom: 0 !important;
}

ul.ateji_list li{
	margin-bottom:50px;
}
/* モバイル対応 */
@media screen and (max-width: 767px) {
    /* KatakanaとHiraganaを1列に戻す */
    .eng-name-detail .name-detail.kanji-detail.sec02 > h2.wn-ttl:nth-of-type(1),
    .eng-name-detail .name-detail.kanji-detail.sec02 > section.katakana_txt:nth-of-type(1),
    .eng-name-detail .name-detail.kanji-detail.sec02 > h2.wn-ttl:nth-of-type(2),
    .eng-name-detail .name-detail.kanji-detail.sec02 > section.katakana_txt:nth-of-type(2) {
        flex: 1 1 100%;
    }

    /* 漢字の意味説明も1列に */
    .eng-name-detail .ateji_list .meaning_txt, #ans .meaning .meaning_txt {
        flex: 1 1 100%;
        margin-bottom: 10px !important;
    }

    .eng-name-detail .ateji_list .meaning_txt:last-child, #ans .meaning .meaning_txt:last-child{
        margin-bottom: 0 !important;
    }

	.name-detail .pagetitle span{
		font-size:1.6rem;
	}
	.pagetitle.with_txt span{
		font-size:1.6rem;
		margin-left:0;
	}
}

/* タブレット対応（中間サイズ） */
@media screen and (min-width: 768px) and (max-width: 1065px) {
    /* 漢字の意味説明を2列に */
    .eng-name-detail .ateji_list .meaning_txt, #ans .meaning .meaning_txt{
        flex: 1 1 calc(50% - 7.5px);
    }
}

/* セクション間の余白調整 */
.eng-name-detail .name-detail.kanji-detail.sec02 > h2.wn-ttl {
    margin-top: 0;
}

.eng-name-detail .name-detail.kanji-detail.sec02 > section.katakana_txt {
    margin-bottom: 0;
}

/* Kanji Examplesセクションの上部マージン */
.eng-name-detail .name-detail.kanji-detail.sec02 > h2.wn-ttl:nth-of-type(3) {
    margin-top: 30px;
}

.eng-name-detail .answer{
	padding: 0 0 20px 0;
}
.q-icon.with-txt{
	font-size:1.3rem;
}

.katakana_txt .q-icon img{
	vertical-align:inherit;
}

/* KatakanaとHiraganaの2列構成（PCのみ） */
@media screen and (min-width: 768px) {
    .eng-name-detail .kata-hira {
        display: flex;
        gap: 20px;
        margin-bottom: 30px;
        width: 100%;  /* 全幅を使用 */
    }

    .eng-name-detail .kata-section,
    .eng-name-detail .hira-section {
        flex: 1;  /* 同じ幅で配分 */
        min-width: 0;  /* flexアイテムの収縮を許可 */
    }

    /* 見出しのマージン調整 */
    .eng-name-detail .kata-hira .title.ttl-style-01 {
        margin-top: 0;
    }

    /* 内部のコンテンツも全幅を使うように */
    .eng-name-detail .kata-hira .answer.katakana_txt {
        width: 100%;
    }

    .eng-name-detail .kata-hira .katakana_name {
        width: 100%;
        box-sizing: border-box;
    }
}

/* モバイルでは縦並びを維持 */
@media screen and (max-width: 767px) {
    .eng-name-detail .kata-hira {
        display: block;
		  width:100%;
    }

    .eng-name-detail .kata-section,
    .eng-name-detail .hira-section {
        width: 100%;
        margin-bottom: 20px;
    }
}

.dis_blk{
	display:block;
}

.jni-name-found{
 margin:10px 0 15px 0;padding:10px 15px;border-left:4px solid #0052a5;background:#eff6ff;
}
.jni-name-found.ln{
border-left:4px solid #22c55e;background:#f0fdf4;
}
.jni-name-found_link{
	margin:8px;display:inline-block;padding:6px 10px;border-radius:6px;background:#3b82f6;color:#fff;text-decoration:none;
}
.jni-name-found.ln .jni-name-found_link{
background:#22c55e;
}
.jni-conv-iine{
	display:inline-block;vertical-align:middle;margin:0 0 0 4px;
}
.jni-conv-iine input[type=image]{
	width:18px;height:auto;cursor:pointer;vertical-align:middle;
}
.jni-conv-iine .good_num{
	color:#1e838d;font-size:.8rem;margin:0;vertical-align:super;
}
.jni-conv-iine .good_num:empty::after{
	content:none;
}
.fbold{
	font-weight:bold;
}


.export-import-container {
	display: flex;
	gap: 20px;
	margin: 20px 0;
	flex-wrap: wrap;
}

.export-box, .import-box {
	flex: 1;
	min-width: 280px;
	padding: 15px;
	border-radius: 8px;
	background: #f9f9f9;
}

.export-box h3, .import-box h3 {
	margin-top: 0;
	color: #333;
	font-size: 18px;
}

.export-box p, .import-box p {
	color: #666;
	font-size: 14px;
	margin-bottom: 15px;
}
@media (max-width: 768px) {
	.export-import-container {
		flex-direction: column;
	}
	.export-box, .import-box {
		margin-left:2vw;
		margin-right:2vw;
	}
}

/* ========================================
   Premium Custom Favorite Lists Styles
   ======================================== */

/* Premium tabs container */
.premium-tabs-container {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 20px 0;
	padding: 10px 0;
	/*border-bottom: 2px solid #e0e0e0;*/
	position: relative;
	overflow: hidden;
}

/* Tabs wrapper with horizontal scroll */
.premium-tabs-wrapper {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	flex: 1;
	padding: 5px 0;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #ccc #f0f0f0;
}

.premium-tabs-wrapper::-webkit-scrollbar {
	height: 6px;
}

.premium-tabs-wrapper::-webkit-scrollbar-track {
	background: #f0f0f0;
	border-radius: 3px;
}

.premium-tabs-wrapper::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 3px;
}

.premium-tabs-wrapper::-webkit-scrollbar-thumb:hover {
	background: #999;
}

/* Tab button base styles */
.premium-tab-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.3s ease;
	white-space: nowrap;
	font-size: 14px;
	color: #333;
	position: relative;
	flex-shrink: 0;
	user-select: none;
}

.premium-tab-btn:hover {
	background: #e8e8e8;
	border-color: #ccc;
}

/* Active tab */
.premium-tab-btn.active {
	background: #2563eb;
	color: white;
	border-color: #2563eb;
	font-weight: 500;
}

/* Active tab hover - only on devices with mouse */
@media (hover: hover) and (pointer: fine) {
	.premium-tab-btn.active:hover {
		background: #34508a;
	}
}

/* Tab icon (first letter) */
.premium-tab-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	font-weight: bold;
	font-size: 14px;
	flex-shrink: 0;
}

.premium-tab-btn:not(.active) .premium-tab-icon {
	background: #2563eb;
	color: white;
}

/* Tab name (collapsed for inactive tabs) */
.premium-tab-name {
	transition: all 0.3s ease;
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.premium-tab-btn:not(.active) .premium-tab-name {
	max-width: 0;
	opacity: 0;
	margin: 0;
	padding: 0;
}

/* Tab name editable state */
.premium-tab-name-edit {
	background: white;
	border: 1px solid #2563eb;
	border-radius: 3px;
	padding: 2px 6px;
	font-size: 14px;
	min-width: 100px;
	max-width: 200px;
}

/* Tab count */
.premium-tab-count {
	font-size: 12px;
	opacity: 0.8;
	margin-left: 4px;
}

.premium-tab-btn:not(.active) .premium-tab-count {
	display: none;
}

/* Delete button on tab */
.premium-tab-delete {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	color: white;
	font-size: 16px;
	line-height: 1;
	margin-left: 6px;
	transition: all 0.2s ease;
	cursor: pointer;
}

/* Delete button hover - only on devices with mouse (not touch) */
@media (hover: hover) and (pointer: fine) {
	.premium-tab-delete:hover {
		background: rgba(255, 0, 0, 0.8);
		transform: scale(1.1);
	}
}

.premium-tab-btn:not(.active) .premium-tab-delete {
	display: none;
}

/* Drag handle for tabs */
.premium-tab-btn.draggable {
	cursor: grab;
}

.premium-tab-btn.dragging {
	opacity: 0.5;
	cursor: grabbing;
}

.premium-tab-btn.drag-over {
	border-color: #2563eb;
	border-style: dashed;
}

/* Add new list button */
.add-list-btn {
	background: #2563eb;
	color: white;
	font-size: 24px;
	font-weight: bold;
	width: 40px;
	height: 40px;
	padding: 0;
	margin:0 1px;
	border-radius: 50%;
	border: none;
	flex-shrink: 0;
}

.add-list-btn:hover {
	background: #34508a;
	transform: scale(1.05);
}

/* Premium lists content area */
.premium-lists-content {
	margin: 20px 0;
	min-height: 300px;
}

/* List title with edit button */
.premium-list-title-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 15px;
	flex-wrap: wrap;
}

.premium-list-title-wrapper h2.premium-list-title {
	margin: 0;
	font-weight: normal;
}

.premium-list-title-edit-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
	color: #888;
	border-radius: 4px;
	transition: background-color 0.2s, color 0.2s;
	line-height: 0;
	vertical-align: middle;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.premium-list-title-edit-btn svg {
	display: block;
	pointer-events: none;
}

.premium-list-title-edit-btn:hover {
	color: #2563eb;
}

.premium-list-title-edit-btn:active {
	color: #248a94;
}

input.premium-list-title-edit {
	font-size: 1.5em;
	font-weight: normal;
	padding: 5px 10px;
	border: 2px solid #2563eb;
	border-radius: 4px;
	width: 100%;
	max-width: 300px;
}

/* Inline fav icon style */
.fav-icon-inline {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}

.fav-icon-inline img {
	vertical-align: middle;
}

/* Secondary button style */
.btn-secondary {
	background: #6c757d !important;
	color: white;
}

.btn-secondary:hover {
	background: #5a6268 !important;
}

.mem-bnr{
	margin:0 auto 20px auto;
	text-align:center;
}
.mem-bnr img{
	border-radius:10%;
}
body.premium .mem-bnr{
	display:none;
}

.mb10{
	margin-bottom:10px !important;
}

/* ========================================
   Membership System Styles (from mem.css)
   ======================================== */
/**
 * Membership System Styles
 */

/* Container */
.mem-container {
    margin: 0 auto 20px;
    padding: 0;
}

/* Form wrapper */
.mem-form-wrapper {
    padding: 0;
}

.mem-form-wrapper h2 {
    margin-top: 0;
    margin-bottom: 25px;
    color: #333;
    font-size: 1.95rem;
    text-align: center;
}

.mem-form-wrapper h3 {
    margin-top: 25px;
    margin-bottom: 15px;
    color: #555;
    font-size: 1.46rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
}

/* Form styles */
.mem-form label {
    display: block;
    margin-bottom: 5px;
    color: #555;
    /*font-weight: 500;*/
}

.mem-form input[type="email"],
.mem-form input[type="text"],
.mem-form input[type="password"],
.mem-form select {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1.3rem;
    transition: border-color 0.3s;
    background: white;
}

.mem-form select {
    background: url(/images/common/arrow_selectdown.png) right 50%/41px no-repeat, 0 0/100%;
    padding-right: 45px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.mem-form input:focus,
.mem-form select:focus {
    outline: none;
    border-color: #2563eb;
}

.mem-form input[type="checkbox"] {
    transform: scale(1.5);
    margin-right: 5px;
    cursor: pointer;
}


/* PIN input special style */
#mem-pin,
#mem-login-pin {
    font-size: 1.95rem;
    text-align: center;
    letter-spacing: 8px;
    font-weight: bold;
}

/* Buttons */
.mem-btn {
    display: block;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    /*font-size: 1.3rem;*/
    cursor: pointer;
    text-decoration: none;
    /*transition: background-color 0.3s;*/
    text-align: center;
	 font-weight:bold;
}
.mem-btn:hover {
	opacity:0.7;
}

.mem-btn-primary {
    background-color: #2563eb;
    color: white !important;
    width: 100%;
	 text-decoration:none !important;
}

.wdt70{
	width:70% !important;
}

.mem-btn-primary:hover:not(:disabled) {
    /*background-color: #45a049;*/
}

.main-all .mem-btn-secondary {
    background-color: #f9f9f9;
    color: #333;
    width: 70%;
	 margin:0 auto;
	 text-decoration:none;
}
#mem-delete-pic.mem-btn-secondary{
	margin:0;
	font-size:1.1rem;
}

.mem-btn-secondary:hover:not(:disabled) {
    background-color: #eee;
}

.mem-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Settings page Save button - add top margin */
.mem-settings-save-btn, .mem-btn_s{
	 width:70%;
	 display:block;
	 margin: 20px auto 10px;
}

.mem-no-cc {
    text-align: center;
    font-size: 1.3rem;
    /*color: #666;*/
    margin-top: 8px;
    margin-bottom: 0;
}

/* Messages */
.mem-info {
    background-color: #e3f2fd;
    color: #1976d2;
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 15px;
}

.mem-success {
    background-color: #e8f5e9;
    color: #2e7d32;
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 15px;
}

.mem-error {
    background-color: #ffebee;
    color: #c62828;
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 15px;
}

.mem-message {
    background-color: #fff3cd;
    color: #856404;
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 15px;
    display: none;
}

.mem-message:not(:empty) {
    display: block;
}

.mem-note {
    color: #666;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

/* Tabs */
.mem-tabs {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
}

.mem-tab {
    flex: 1;
    padding: 10px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 1.3rem;
    color: #666;
}

.mem-tab:hover {
    color: #333;
}

.mem-tab.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

/* Account page */
.mem-account-wrapper {
    border-radius: 8px;
    padding: 20px;
}

.mem-account-wrapper h2 {
    margin-top: 0;
    margin-bottom: 25px;
    color: #333;
    font-size: 1.95rem;
}

.mem-account-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.mem-account-basic {
    min-width: 0;
    overflow: hidden;
}

.mem-account-basic h3 {
    margin: 0 0 5px 0;
    /*color: #333;*/
    font-size: 1.79rem;
    word-break: break-all;
    overflow-wrap: break-word;
}

.mem-email {
    color: #666;
    font-size: 1.14rem;
}

.main-all .mem-edit-icon {
    display: inline-block;
    vertical-align: inherit;
    margin-left: 8px;
    color: #888;
    text-decoration: none;
    transition: color 0.2s;
}

.mem-edit-icon:hover {
    color: #2563eb;
}

.mem-edit-icon svg {
    display: block;
}

.mem-account-info {
    margin-bottom: 30px;
}

.mem-account-info h3 {
    margin-top: 0;
    margin-bottom: 15px;
    /*color: #555;*/
    font-size: 1.46rem;
}

.mem-account-info p {
    margin: 10px 0;
    /*color: #666;*/
}

.mem-account-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Profile Picture */
.mem-profile-pic-section {
    margin-bottom: 30px;
}

.mem-profile-pic-container {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 15px;
}

.mem-profile-pic-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    /*border: 3px solid #f0f0f0;*/
    transition: opacity 0.3s ease;
}

.mem-profile-pic-preview:hover {
    opacity: 0.7;
}

.mem-profile-pic-large {
    width: 150px;
    /*height: 150px;*/
    border-radius: 50%;
    object-fit: cover;
    /*border: 3px solid #f0f0f0;*/
    transition: opacity 0.3s ease;
}

.mem-profile-pic-large:hover {
    opacity: 0.7;
}

.mem-profile-pic-upload {
    flex: 1;
}

.mem-profile-pic-upload .mem-btn-secondary {
    width: auto;
    padding: 8px 20px;
}

/* Form links section */
.mem-form-links {
    margin-top: 25px;
    text-align: center;
}

.mem-link-divider {
    border-top: 1px solid #e0e0e0;
    margin: 25px 0 20px 0;
}

.mem-link-text {
    /*color: #666;*/
    font-size: 1.3rem;
    margin: 8px 0;
}

/*
.mem-link-text a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.mem-link-text a:hover {
    color: #45a049;
    text-decoration: underline;
}
	 */

/* Back link */
.mem-back {
    margin-top: 20px;
    text-align: center;
}

/*.mem-back a {
    color: #666;
    text-decoration: none;
}

.mem-back a:hover {
    color: #333;
}
*/

/* Logout link */
.mem-logout-link {
    color: #666;
    text-decoration: none;
    padding: 5px 10px;
}

.mem-logout-link:hover {
    color: #c62828;
}


/* Mobile: 3 columns with responsive sizing */
@media screen and (max-width:767px) {
	 .mem-voice-selection {
        grid-template-columns: repeat(3, 1fr);
    }
    .mem-account-actions {
        flex-direction: column;
    }

    .mem-account-header {
        flex-direction: column;
        text-align: center;
    }

    .mem-profile-pic-container {
        flex-direction: column;
    }

    .mem-voice-selection {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: calc(8/750*100vw) !important;
    }

    .mem-voice-selection .mem-voice-card {
        /*padding: calc(8/750*100vw);*/
		  padding:1vh 2vw;
    }

    .mem-voice-selection .mem-voice-icon {
        width: calc(120/750*100vw);
        height: calc(120/750*100vw);
    }

    .mem-voice-selection .mem-voice-name {
        /*font-size: calc(11/750*100vw);*/
		  font-size:1.3rem;
    }

    .mem-voice-selection .mem-voice-names {
        /*font-size: calc(10/750*100vw);*/
		  font-size:1.2rem;
    }

    .mem-voice-selection .mem-voice-name-en,
    .mem-voice-selection .mem-voice-name-ja {
        /*font-size: calc(10/750*100vw);*/
    }

    .mem-voice-card .voice_icon {
        /*width: calc(18/750*100vw) !important;
        height: calc(15/750*100vw) !important;
        margin-top: calc(3/750*100vw);
		  */
    }
}

/* VOICEVOX Voice Selection */
.mem-voice-selection {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.mem-voice-option {
    position: relative;
    height: 100%;
}

.mem-voice-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.mem-voice-label {
    display: block;
    cursor: pointer;
    height: 100%;
}

.mem-voice-label.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.mem-voice-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.3s;
    position: relative;
    height: 100%;
}

.mem-voice-card:hover {
    border-color: #2563eb;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
}

.mem-voice-option input[type="radio"]:checked + .mem-voice-card {
    border-color: #2563eb;
    background: #f1f8f4;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.mem-voice-label.disabled .mem-voice-card {
    background: #f5f5f5;
    cursor: not-allowed;
}

.mem-voice-label.disabled .mem-voice-card:hover {
    border-color: #e0e0e0;
    box-shadow: none;
}

.mem-voice-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    border: 3px solid #f0f0f0;
}

.mem-voice-option input[type="radio"]:checked ~ .mem-voice-icon {
    border-color: #2563eb;
}

.mem-voice-name {
    font-size: 1.14rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 8px;
}

.mem-voice-names {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 8px;
}

.mem-voice-name-en {
    font-size: 1.14rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.mem-voice-name-ja {
    font-size: 0.98rem;
    font-weight: 400;
    color: #666;
}

.mem-voice-card .voice_icon {
    cursor: pointer;
    margin-top: 5px;
    transition: transform 0.2s;
    display: block;
}

.mem-voice-card .voice_icon:hover {
    transform: scale(1.2);
}

/* Voice icon opacity control for instant loading */
.voice_icon:not(.sample-icon) {
    opacity: 0;
}

.voice_icon.icon-ready {
    opacity: 1;
}

/* Hover effects for all 5 buttons site-wide */
.iine input[type=image],
.voice_icon,
.fav_btn img,
.sh_btns img,
.cp_btns img,
.cp_btn {
    transition: transform 0.2s;
    cursor: pointer;
}

.iine input[type=image]:hover,
.voice_icon:hover,
.fav_btn img:hover,
.sh_btns img:hover,
.cp_btns img:hover,
.cp_btn:hover {
    transform: scale(1.2);
}

/* Favorites Limit Warning Alerts */
.fav-limit-warning {
    padding: 12px 16px;
    margin: 15px 0;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
}

.fav-limit-warning a {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}

.fav-limit-warning a:hover {
    text-decoration: none;
}

/* Approaching limit - yellow/orange warning */
.fav-limit-warning.limit-approaching {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
}

.fav-limit-warning.limit-approaching a {
    color: #664d03;
}

/* Reached limit - red warning */
.fav-limit-warning.limit-reached {
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    color: #842029;
}

.fav-limit-warning.limit-reached a {
    color: #6a1a21;
}
/* ========================================
   Membership Top Page Styles (from mem_top.css)
   ======================================== */

/* Full width layout for membership page (no sidebar) */
.contents-wrap.membership-fullwidth {
	display: block;
	max-width: 100%;
}

.contents-wrap.membership-fullwidth main.membership-fullwidth {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0;
}

.membership-fullwidth .column {
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
	padding: 0 20px;
}

/* Hero Section */
.mem-hero {
	text-align: center;
	padding: 30px 20px;
	margin-bottom: 10px;
}

.mem-hero-title {
	font-size: 2.4em;
	font-weight: 700;
	margin-bottom: 15px;
	line-height: 1.2;
}

.mem-hero-subtitle {
	font-size: 1.2em;
	max-width: 700px;
	margin: 0 auto;
}

@media (max-width: 768px) {
	.membership-fullwidth .column {
		padding: 0 2vw;
	}
	.mem-hero {
		padding: 20px 15px;
	}
	.mem-hero-title {
		font-size: 1.8em;
	}
	.mem-hero-subtitle {
		font-size: 1em;
	}
	.mem-plans {
		padding: 0;
	}
	.mem-feature-detail {
		padding: 25px 15px;
	}
	.mem-section-premium {
		padding: 40px 10px;
	}
	.mem-coming-soon-grid {
		padding: 0;
	}
	.mem-section-coming-soon {
		padding: 40px 10px;
	}
}

/* Section Titles */
.mem-section-title {
	text-align: center;
	font-size: 2.2em;
	font-weight: 700;
	margin-bottom: 20px;
	color: #3d5a96;
}

.mem-comparison .mem-section-title {
	margin-bottom:30px;
}

.mem-section-subtitle {
	text-align: center;
	font-size: 1.1em;
	color: #7f8c8d;
	margin-bottom: 40px;
}

.mem-section {
	margin-bottom: 60px;
}

/* Comparison Table */
.mem-comparison {
	margin-bottom: 60px;
}

.mem-plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	max-width: 900px;
	margin: 0 auto;
	padding: 0 20px;
}

.mem-plans-three {
	max-width: 1200px;
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
	.mem-plans-three {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	}
}

.mem-plan {
	background: white;
	border: 2px solid #e0e0e0;
	border-radius: 16px;
	padding: 30px;
	position: relative;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
}

.mem-plan:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}

/* Guest Plan - minimal styling, no border, no hover */
.mem-plan-guest {
	border: none;
	background: #fafafa;
	padding: 30px;
	font-size: 0.9em;
	box-shadow: none;
}

.mem-plan-guest:hover {
	transform: none;
	box-shadow: none;
}
/*.mem-plan-guest .mem-plan-header {
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: none;
	min-height: 120px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}*/

.mem-plan-guest .mem-plan-name {
	font-size: 1.5em;
	margin-bottom:15px;
	/*margin-bottom: 55px;*/
}

.mem-plan-guest .mem-plan-body {
	margin-bottom: 0;
}

/* Free Plan - using teal color */
.mem-plan-free {
	border-color: #2563eb;
	box-shadow: 0 10px 20px rgba(46, 160, 171, 0.25);
}

/* Premium Plan - using premium gradient */
.mem-plan-premium {
	border-color: #34508a;
	box-shadow: 0 10px 20px rgba(102, 126, 234, 0.25);
}

.mem-plan-premium .mem-price-amount {
	color: #34508a;
}

/* Badge for Free Plan - teal gradient */
.mem-plan-badge {
	position: absolute;
	top: -12px;
	right: 30px;
	background: linear-gradient(135deg, #2563eb 0%, #1a7f8a 100%);
	color: white;
	padding: 6px 16px;
	border-radius: 20px;
	font-size: 0.85em;
	font-weight: 600;
}

.mem-plan-header {
	text-align: center;
	margin-bottom: 20px;
	padding-bottom: 0px;
	border-bottom: 2px solid #f0f0f0;
	/*min-height: 120px;*/
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.mem-plan-name {
	font-size: 1.8em;
	line-height:5rem;
	font-weight: 700;
	margin-bottom: 0;
	color: #2c3e50;
}

.mem-plan-name a,
.mem-plan-name-link {
	color: inherit !important;
	text-decoration: none !important;
}

.mem-plan-name a:hover,
.mem-plan-name-link:hover {
	color: inherit !important;
	text-decoration: none !important;
}

.mem-plan-price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 5px;
	margin-bottom:10px;
}

.mem-price-amount {
	font-size: 3em;
	font-weight: 700;
	color: #3d5a96;
}

.mem-price-period {
	font-size: 1.2em;
	color: #7f8c8d;
}

.mem-plan-body {
	margin-bottom: 30px;
}

.mem-feature-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mem-feature-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 15px;
	font-size: 1em;
	line-height: 1.6;
}

.mem-feature-icon {
	color: #89B555;
	font-weight: 700;
	font-size: 1.3em;
	flex-shrink: 0;
}

.mem-feature-text {
	color: #34495e;
}

.mem-feature-text a {
	color: #3d5a96;
	text-decoration: none;
}

.mem-feature-text a:hover {
	color: #2a7d85;
	text-decoration: underline;
}

.mem-feature-link {
	color: #3d5a96;
	text-decoration: none;
}

.mem-feature-link:hover {
	color: #2a7d85;
	text-decoration: none;
}

.mem-plan-footer {
	text-align: center;
}

/* No Credit Card Required text */
.mem-no-cc-required {
	margin-top: 10px;
	font-size: 0.85em;
	color: inherit;
	font-weight: 500;
}

.mem-cta-buttons {
	display: flex;
	gap: 20px;
	justify-content: center;
	flex-wrap: wrap;
	align-items: flex-start;
}

.mem-cta-buttons > a,
.mem-cta-buttons > .mem-cta-premium-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.mem-cta-buttons > a.mem-btn {
	height: auto;
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mem-cta-premium-wrap .mem-btn {
	width: 100%;
}

.mem-cta-premium-wrap .mem-no-cc-required {
	margin-top: 8px;
}

/* Buttons */
.mem_top .mem-btn {
	display: inline-block;
	padding: 14px 32px;
	border-radius: 8px;
	/*font-size: 1.05em;*/
	font-weight: 600;
	text-decoration: none !important;
	text-align: center;
	transition: all 0.3s ease;
	cursor: pointer;
	border: none;
}

.mem-btn-free {
	background: #7b9bc7;
	color: white !important;
}

.mem-btn-free:hover {
	background: #3d5a96;
	transform: translateY(-2px);
	box-shadow: 0 6px 12px rgba(52, 158, 169, 0.3);
	color: white !important;
	text-decoration: none !important;
}

.mem-btn-premium {
	background-color: #2563eb;
	color: white !important;
}

.mem-btn-premium:hover {
	background-color: #45a049;
	transform: translateY(-2px);
	box-shadow: 0 6px 12px rgba(76, 175, 80, 0.4);
	color: white !important;
	text-decoration: none !important;
}

.mem-btn-large {
	padding: 18px 40px;
	font-size: 1.15em;
}

/* Feature Details */
.mem-feature-detail {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	margin-bottom: 30px;
	padding: 40px;
	background: #f8f9fa;
	border-radius: 12px;
}

.mem-feature-detail-reverse {
	direction: rtl;
}

.mem-feature-detail-reverse > * {
	direction: ltr;
}

.mem-feature-detail-content h3 {
	font-size: 1.8em;
	margin-bottom: 20px;
	color: #2c3e50;
}

.mem-feature-detail-content p {
	font-size: 1.05em;
	line-height: 1.8;
	color: #34495e;
}

.mem-feature-title {
	display: flex;
	align-items: center;
	gap: 15px;
}

.mem-feature-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: linear-gradient(135deg, #3d5a96 0%, #7b9bc7 100%);
	color: white;
	border-radius: 50%;
	font-size: 0.75em;
	font-weight: 700;
	flex-shrink: 0;
}

/* Premium number badge with premium gradient */
.mem-feature-number-premium {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: linear-gradient(135deg, #34508a 0%, #764ba2 100%);
	color: white;
	border-radius: 50%;
	font-size: 0.75em;
	font-weight: 700;
	flex-shrink: 0;
}

.mem-feature-detail-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
	.mem-feature-detail {
		grid-template-columns: 1fr;
		padding: 25px;
		gap: 25px;
	}
	.mem-feature-detail-reverse {
		direction: ltr;
	}
}

/* Premium Section Highlight - using premium gradient */
.mem-section-premium {
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.06) 0%, rgba(118, 75, 162, 0.06) 100%);
	padding: 40px 0 10px 0;
	border-radius: 12px;
	margin-bottom: 60px;
}

.mem-section-premium .mem-section-title {
	color: #34508a;
}

.mem-section-premium .mem-feature-detail {
	background: transparent;
}

/* Free Section Highlight - light gray background */
.mem-section-free {
	background: #f8f9fa;
	padding: 40px 0 10px 0;
	border-radius: 12px;
	margin-bottom: 60px;
}

.mem-section-free .mem-feature-detail {
	background: transparent;
}

/* Coming Soon Grid */
.mem-coming-soon-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 30px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.mem-coming-soon-item {
	background: white;
	padding: 30px;
	border-radius: 12px;
	text-align: center;
	border: 2px solid #f0f0f0;
	transition: all 0.3s ease;
}

.mem-coming-soon-item:hover {
	border-color: #3d5a96;
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.mem-coming-soon-icon {
	font-size: 3em;
	margin-bottom: 15px;
}

.mem-coming-soon-title {
	font-size: 1.3em;
	font-weight: 600;
	margin-bottom: 12px;
	color: #2c3e50;
}

.mem-coming-soon-desc {
	font-size: 0.95em;
	line-height: 1.6;
	color: #7f8c8d;
}

.mem-section-coming-soon {
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.06) 0%, rgba(118, 75, 162, 0.06) 100%);
	padding: 60px 20px;
	border-radius: 12px;
}

.mem-section-coming-soon .mem-section-title {
	color: #34508a;
}

/* CTA Section */
.mem-cta-section {
	margin-bottom: 60px;
}

.mem-cta-box {
	padding: 0;
	text-align: center;
}

.mem-cta-title {
	font-size: 2em;
	font-weight: 700;
	margin-bottom: 15px;
}

.mem-cta-text {
	font-size: 1.1em;
	margin-bottom: 30px;
}

@media (max-width: 768px) {
	.mem-cta-box {
		padding: 30px 15px;
	}
	.mem-cta-title {
		font-size: 1.5em;
	}
	.mem-cta-text {
		font-size: 1em;
	}
	.mem-cta-buttons {
		flex-direction: column;
		align-items: stretch;
	}
	.mem-cta-buttons .mem-btn {
		width: 100%;
	}
	.mem-cta-premium-wrap {
		width: 100%;
	}
}

/* FAQ - New Style */
.mem-faq {
	background: white;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 25px 30px;
	margin-bottom: 20px;
	transition: all 0.3s ease;
}

.mem-faq:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.mem-faq dt {
	font-size: 1.15em;
	font-weight: 600;
	color: #2c3e50;
	margin-bottom: 12px;
}

.mem-faq dd {
	font-size: 1em;
	line-height: 1.7;
	color: #34495e;
	margin: 0;
}

.mem-faq dd a {
	color: #3d5a96;
	text-decoration: none;
	font-weight: 500;
}

.mem-faq dd a:hover {
	text-decoration: underline;
}

/* FAQ Category Headings */
.mem-faq-category {
	font-size: 1.4em;
	font-weight: 600;
	color: #333;
	margin: 40px 0 20px 0;
	padding-bottom: 10px;
	border-bottom: 2px solid #BCE7EC;
}

.mem-faq-category:first-of-type {
	margin-top: 0;
}


/* ========================================
   Original Membership Page Styles (Legacy)
   ======================================== */


.mem_top .mem-btn:hover {
    opacity: 1 !important;
}


.mem_top .bubble-wrap {
    display: flex;
    align-items: start;
    gap: 28px;
}

.mem_top .bubble-wrap .thumbnail {
    flex-shrink: 0;
}

.mem_top .bubble-wrap .thumbnail img {
    width: 8vw;
    height: 8vw;
    max-width: 60px;
    max-height: 60px;
    min-width: 50px;
    min-height: 50px;
}
.mem_top .bubble-wrap .thumbnail .thumb-name {
    text-align: center;
    /*font-size: 14px;*/
	 font-size:1.3rem;
	 line-height:1.4;
	 margin:5px 0 0 0;
}

.mem_top .bubble-wrap .bubble {
    background-color: #E5F2CE;
    border-radius: 12px;
    padding: 1.5em;
    position: relative;
}

.mem_top .bubble-wrap .bubble a {
    text-decoration: none;
}

.mem_top .bubble-wrap .bubble a:hover {
    text-decoration: underline;
}

.mem_top .bubble-wrap .bubble::before {
    content: "";
    position: absolute;
    top: 40px;
    left: -27px;
    margin-top: -15px;
    border: 15px solid transparent;
    border-right: 15px solid #E5F2CE;

}
@media screen and (max-width:767px) {
    .mem_top .bubble-wrap .bubble {
        padding: 1em;
    }
    .mem_top .bubble-wrap {
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }
    .mem_top .bubble-wrap .thumbnail {
        text-align: center;
    }
    .mem_top .bubble-wrap .bubble::before {
        display: none;
    }
}
.mem_top .faq {
    padding-left: 65px;
    font-size: 2.21rem;
}
.mem_top .faq dt,
.mem_top .faq dd
 {
    position: relative;
    min-height: 50px;
    margin-bottom: 10px;
}
.mem_top .faq dt {
    font-weight: bold;
    display: flex;
    align-items: center;
}
.mem_top .faq dt:before,
.mem_top .faq dd:before
 {
    position: absolute;
    border-radius: 50%;
    display: inline-block;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* line-height: 50px; */
    /* margin-right: 15px; */
    text-align: center;
    font-size: 1.176em;
    font-weight: normal;
    left: -65px;
    top: 0;
}
.mem_top .faq dt:before
 {
    content: 'Q';
    background: #DEF5F7;
}
.mem_top .faq dd:before
 {
    content: 'A';
    background: #FCEDF0;
}
@media screen and (max-width:767px) {
    .mem_top .faq {
        padding-left: 40px;
        font-size: 2.21rem;
    }
    .mem_top .faq dt:before,
    .mem_top .faq dd:before
    {
    width: 30px;
    height: 30px;
    /* line-height: 30px; */
    /* margin-right: 15px; */
    /* text-align: center; */

    font-size: 1em;
    left: -40px;
    }
    .mem_top .faq dt,
    .mem_top .faq dd
    {
    min-height: 30px;
    }
}
/* show & erase */
@media screen and (max-width:767px) {
    .show-sp {display: block;}
    .show-pc-tab {display: none;}
}
@media screen and (min-width:768px) {
    .show-sp {display: none;}
    .show-pc-tab {display: block;}
}
/* align */
.mem_top .tac {
    text-align: center;
}
.tac {
    text-align: center;
}


/* ========================================
   Ad-Free for Premium / Membership Page
   ======================================== */
body.premium .ad-area,
body.premium .adthrive-ad,
body.premium [class*="adthrive"],
body.premium .ad-res-text,
body.premium .tax-gender-btm-ad {
	display: none !important;
}

/* ========================================
   Premium Lists Styles (from premium-lists.css)
   ======================================== */
/* Premium Custom Lists Styles */

/* Main tabs container */
.premium-tabs-container {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 0;
	position: relative;
	overflow: hidden;
}

/* Tabs wrapper with horizontal scroll */
.premium-tabs-wrapper {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	flex: 1;
	padding: 0;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
	-webkit-overflow-scrolling: auto;  /* Disable momentum scrolling on iOS */
	scroll-behavior: auto;  /* Disable smooth scrolling */
}

.premium-tabs-wrapper::-webkit-scrollbar {
	display: none;  /* Hide native scrollbar on all devices */
}

/* Custom scrollbar container */
.premium-custom-scrollbar {
	position: relative;
	height: 10px;
	background: transparent;
	border-radius: 0;
	cursor: pointer;
	touch-action: none;
	width: 100%;
	margin-top: 0px;
	margin-bottom: 5px;
	box-sizing: border-box;
}

/* Custom scrollbar thumb (draggable part) */
.premium-scrollbar-thumb {
	position: absolute;
	top: 2px;
	height: 6px;
	/*background: #2563eb;*/
	background:#ccc;
	border-radius: 4px;
	cursor: grab;
	transition: background 0.2s;
	min-width: 40px;
}

.premium-scrollbar-thumb:active {
	cursor: grabbing;
	background: #34508a;
}

/* Tab button base styles */
.premium-tab-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.3s ease;
	white-space: nowrap;
	font-size: 14px;
	color: #333;
	position: relative;
	flex-shrink: 0;
	user-select: none;
}

/* Tab hover - only on devices with mouse */
@media (hover: hover) and (pointer: fine) {
	.premium-tab-btn:hover {
		background: #e8e8e8;
		border-color: #ccc;
	}
}

/* Disable hover effects during tab transitions */
.tabs-transitioning .premium-tab-btn:hover {
	background: #f5f5f5;
	border-color: #ddd;
}

/* Active tab */
.premium-tab-btn.active {
	background: #2563eb;
	color: white;
	border-color: #2563eb;
	font-weight: 500;
}

/* Active tab hover - only on devices with mouse */
@media (hover: hover) and (pointer: fine) {
	.premium-tab-btn.active:hover {
		background: #34508a;
	}
}

/* Disable hover effects for active tab during transitions */
.tabs-transitioning .premium-tab-btn.active:hover {
	background: #2563eb;
}

/* Tab icon (first letter) */
.premium-tab-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	font-weight: bold;
	font-size: 14px;
	flex-shrink: 0;
}

.premium-tab-btn:not(.active) .premium-tab-icon {
	background: #2563eb;
	color: white;
}

/* Tab name (collapsed for inactive tabs) */
.premium-tab-name {
	transition: all 0.3s ease;
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Active tab name has text cursor on hover */
.premium-tab-btn.active .premium-tab-name {
	cursor: text;
}

.premium-tab-btn:not(.active) .premium-tab-name {
	max-width: 0;
	opacity: 0;
	margin: 0;
	padding: 0;
}

/* Tab hover expansion for inactive tabs - only on devices with mouse (not touch) */
@media (hover: hover) and (pointer: fine) {
	.premium-tab-btn:not(.active):hover .premium-tab-name {
		max-width: 200px;
		opacity: 1;
		margin-left: 8px;
		margin-right: 8px;
	}
}

/* Tab name editable state */
.premium-tab-name-edit {
	background: white;
	border: 1px solid #2563eb;
	border-radius: 3px;
	padding: 2px 6px;
	font-size: 14px;
	min-width: 100px;
	max-width: 200px;
	color: #333 !important; /* Override parent's white color */
}

/* Input field in modal */
.premium-modal input[type="text"] {
	outline: none;
}

.premium-modal input[type="text"]:focus {
	border-color: #2563eb;
	box-shadow: 0 0 0 2px rgba(46, 160, 171, 0.1);
}

/* Tab count */
.premium-tab-count {
	font-size: 12px;
	opacity: 0.8;
	margin-left: 4px;
	transition: all 0.3s ease;
}

/* Inactive tabs show count (not hidden) */
.premium-tab-btn:not(.active) .premium-tab-count {
	font-size: 10px;
	opacity: 0.9;
}

/* Delete button on tab */
.premium-tab-delete {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	color: white;
	font-size: 17px;
	line-height: 1;
	margin-left: 6px;
	transition: all 0.2s ease;
	cursor: pointer;
	align-self: center;
}

/* Delete button hover - only on devices with mouse (not touch) */
@media (hover: hover) and (pointer: fine) {
	.premium-tab-delete:hover {
		background: rgba(255, 0, 0, 0.8);
		/*transform: scale(1.1);*/
	}
}

.premium-tab-btn:not(.active) .premium-tab-delete {
	display: none;
}

/* Drag and drop visual feedback for tabs */
.premium-tab-btn.sortable-ghost {
	background: #b3e5fc !important;
	opacity: 0.5;
}

.premium-tab-btn.sortable-drag {
	opacity: 0.8;
}

/* Disable hover effects during tab dragging (PC and mobile) */
#premium_tabs[data-dragging="true"] .premium-tab-btn:not(.active) .premium-tab-name {
	max-width: 0 !important;
	opacity: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

#premium_tabs[data-dragging="true"] .premium-tab-delete:hover {
	background: rgba(255, 255, 255, 0.3) !important;
}

/* Drag handle for tabs */
.premium-tab-btn.draggable {
	cursor: grab;
}

.premium-tab-btn.dragging {
	opacity: 0.5;
	cursor: grabbing;
}

.premium-tab-btn.drag-over {
	border-color: #2563eb;
	border-style: dashed;
}

/* Add new list button */
.add-list-btn {
	background: transparent;
	color: #2563eb;
	font-size: 25px;
	font-weight: bold;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid #ddd;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	align-self: center;
}

.add-list-btn:hover {
	background: transparent;
	border-color: #2563eb;
	color: #34508a;
}

/* Premium lists content area */
.premium-lists-content {
	margin: 0 0 20px 0;
	/*min-height: 300px;*/
}

/* Premium empty state */
.premium-empty-state {
	text-align: center;
	padding: 60px 20px;
	color: #666;
}

.premium-empty-state p {
	font-size: 16px;
	margin: 10px 0;
}

.premium-empty-state strong {
	color: #2563eb;
}

/* List view container */
.premium-list-view {
	display: none;
}

.premium-list-view.active {
	display: block;
}

/* Modal for delete confirmation */
.premium-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
}

.premium-modal {
	background: white;
	border-radius: 8px;
	padding: 30px;
	max-width: 500px;
	width: 90%;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.premium-modal-title {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 15px;
	color: #333;
}

.premium-modal-message {
	font-size: 14px;
	color: #666;
	margin-bottom: 25px;
	line-height: 1.5;
}

.premium-modal-buttons {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

.premium-modal-btn {
	padding: 10px 20px;
	border-radius: 4px;
	border: none;
	cursor: pointer;
	font-size: 14px;
	transition: all 0.2s ease;
}

.premium-modal-btn-primary {
	background: #2563eb;
	color: white;
}

.premium-modal-btn-primary:hover {
	background: #34508a;
}

.premium-modal-btn-secondary {
	background: #f5f5f5;
	color: #333;
	border: 1px solid #ddd;
}

.premium-modal-btn-secondary:hover {
	background: #e8e8e8;
}

.premium-modal-btn-danger {
	background: #dc3545;
	color: white;
}

.premium-modal-btn-danger:hover {
	background: #c82333;
}

/* Notification toast */
.premium-toast {
	position: fixed;
	top: 20px;
	right: 20px;
	background: #2563eb;
	color: white;
	padding: 15px 20px;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	z-index: 100000;
	animation: slideInRight 0.3s ease;
	max-width: 350px;
}

.premium-toast.error {
	background: #dc3545;
}

.premium-toast.success {
	background: #28a745;
}

@keyframes slideInRight {
	from {
		transform: translateX(400px);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/* Multi-list selector popup for fav button */
.premium-list-selector {
	position: absolute;
	background: white;
	border: 1px solid #ddd;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	padding: 10px;
	min-width: 200px;
	max-width: 300px;
	z-index: 1000;
	display: none;
}

.premium-list-selector.show {
	display: block;
}

.premium-list-selector-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	cursor: pointer;
	border-radius: 4px;
	transition: background 0.2s ease;
}

.premium-list-selector-item:hover {
	background: #f5f5f5;
}

.premium-list-selector-checkbox {
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.premium-list-selector-name {
	flex: 1;
	font-size: 14px;
	color: #333;
	word-break: break-word;
	overflow-wrap: break-word;
	line-height: 1.4;
}

.premium-list-selector-count {
	font-size: 12px;
	color: #999;
}

/* Create New List item in selector */
.premium-list-selector-create-new {
	border-top: 1px solid #eee;
	margin-top: 5px;
	padding-top: 10px;
	color: #3d5a96;
}

.premium-list-selector-create-new.no-border {
	border-top: none;
	margin-top: 0;
	padding-top: 8px;
}

.premium-list-selector-create-new:hover {
	background: #f0f9fa;
}

.premium-list-selector-plus {
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: bold;
	color: #3d5a96;
}

.premium-list-selector-create-new .premium-list-selector-name {
	color: #3d5a96;
	font-weight: 500;
}

/* Drag handle for list selector (same style as favorites page) */
.premium-list-selector-drag-handle {
	cursor: move;
	color: #999;
	font-size: 12px;
	padding: 0 4px;
	user-select: none;
	flex-shrink: 0;
}
.premium-list-selector-drag-handle:hover {
	color: #666;
}

/* Ghost element during drag */
.premium-list-selector-item.premium-list-selector-ghost {
	background: #e3f2fd !important;
	opacity: 0.6;
}

/* Dragging element */
.premium-list-selector-item.premium-list-selector-dragging {
	background: white;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
	z-index: 10;
}

/* Fallback clone (appended to body during drag with fallbackOnBody) */
.premium-list-selector-item.sortable-fallback {
	display: flex !important;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	background: white;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
	z-index: 10001;
	opacity: 0.95;
}

/* Loading state for list selector */
.premium-list-selector-loading {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 15px;
	color: #666;
	cursor: default;
}

.premium-list-selector-loading:hover {
	background: transparent;
}

.premium-list-selector-loading .loading-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid #e0e0e0;
	border-top-color: #3d5a96;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

body.dark-mode .premium-list-selector-loading {
	color: #aaa;
}

body.dark-mode .premium-list-selector-loading .loading-spinner {
	border-color: #444;
	border-top-color: #6889c4;
}

/* Responsive styles */
@media (max-width: 768px) {
	.premium-tabs-container {
		gap: 5px;
	}

	/* Add horizontal margin to custom scrollbar on mobile */
	.premium-custom-scrollbar {
		margin-left: 2vw;
		margin-right: 2vw;
		width: calc(100% - 4vw);
	}

	/* Add horizontal margin to list title on mobile */
	.premium-list-title-wrapper {
		margin-left: 2vw;
		margin-right: 2vw;
	}

	.premium-lists-content h2 {
		margin-left: 2vw;
		margin-right: 2vw;
	}

	input.premium-list-title-edit {
		max-width: calc(100% - 50px);
	}

	.premium-tab-btn {
		padding: 6px 10px;
		font-size: 13px;
	}

	.premium-tab-icon {
		width: 24px;
		height: 24px;
		font-size: 12px;
	}

	.add-list-btn {
		width: 36px;
		height: 36px;
		font-size: 20px;
		margin-left: 2vw;
	}

	/* Show list selector as modal on mobile */
	.premium-list-selector {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		max-width: 90%;
		max-height: 80vh;
		overflow-y: auto;
	}

	.premium-toast {
		right: 10px;
		max-width: calc(100vw - 20px);
	}
}

/* Inline fav icon style */
.fav-icon-inline {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}

.fav-icon-inline img {
	vertical-align: middle;
}

/* Secondary button style */
.btn-secondary {
	background: #6c757d !important;
	color: white;
}

.btn-secondary:hover {
	background: #5a6268 !important;
}

@media screen and (max-width:767px) {
	.premium-tabs-wrapper {
		scrollbar-width: none;
		padding: 0 2vw 0 0;
	}
}

/* ========================================
   Dark Mode Styles (from dark.css)
   ======================================== */
/**
 * Dark Mode Styles
 * Premium Feature - Applied when body has 'dark-mode' class
 */

/* Base colors */
body.dark-mode {
	background-color: #1a1a1a !important;
	color: #fff;
}

/* Text colors */
body.dark-mode {
	--text-primary: #fff;
	--text-secondary: #b0b0b0;
	--text-muted: #808080;
	--bg-primary: #1a1a1a;
	--bg-secondary: #2a2a2a;
	--bg-tertiary: #3a3a3a;
	--border-color: #404040;
	--link-color: #7b9bc7;
	--link-hover: #7dd4df;
	--accent-green: #2563eb;
	--accent-green-hover: #7b9bc7;
}

body.dark-mode,
body.dark-mode .btn-style-01,
body.dark-mode .ttl-style-02,
body.dark-mode .ttl-style-02 span {
	background-color: var(--bg-primary);
}

body.dark-mode .main-img-area .text-box .title,
body.dark-mode .main-img-area .text-box p{
	text-shadow:none;
}
body.dark-mode header {
	background-color: var(--bg-primary) !important;
}

body.dark-mode header .header-inner {
	background-color: transparent;
}

body.dark-mode .hdr-sum a {
	color: var(--text-primary);
}

body.dark-mode #main,
body.dark-mode .main-content,
body.dark-mode .contents-wrap {
	background-color: var(--bg-primary);
	color: var(--text-primary);
}

body.dark-mode .main-all,
body.dark-mode .column,
body.dark-mode .clm_post,
body.dark-mode .side-bar,
body.dark-mode .side-list-box,
body.dark-mode .tag-list-box,
body.dark-mode .name-detail,
body.dark-mode .pagetitle {
	background-color: var(--bg-primary) !important;
}
body.dark-mode .pagetitle a,
body.dark-mode .kanji-archive .pagetitle a {
	color: #fff;
}

body.dark-mode h2 a,
body.dark-mode header .header-logo-area p,
body.dark-mode .hdr-r .fav-btn,
body.dark-mode .sort_li.active a,
body.dark-mode .name_summary strong,
body.dark-mode h2.side-ttl a,
body.dark-mode .nickname p span,
body.dark-mode .ttl-style-01,
body.dark-mode .atten_txt,
body.dark-mode .mem-form-wrapper h3,
body.dark-mode .mem-form label{
	color: var(--text-primary);
}

body.dark-mode .meaning_txt ul a, body.dark-mode .meaning_list ul a, body.dark-mode .meaning_cont ul a{
	color:var(--link-color);
}

body.dark-mode .eng-name-detail .ateji_list .meaning_txt,
body.dark-mode #ans .meaning .meaning_txt,
body.dark-mode .kanji-list li.inaus{
 background-color:var(--bg-secondary);
}



body.dark-mode .kanji-note{
	background-color:inherit;
	color: var(--text-primary);
}
body.dark-mode .name-list.eng-list .title a{
	color:#2c89e7;
}
body.dark-mode .side-list-box .side-ttl:after{
	border-color: var(--bg-secondary) transparent transparent;
}

/* Links */
body.dark-mode a {
	color: var(--link-color);
}

/*body.dark-mode a:hover {
	color: var(--link-hover);
}*/

/* Sections and containers */
body.dark-mode .top-sec-01,
body.dark-mode .content-section,
body.dark-mode section {
	background-color: var(--bg-primary);
}

/* Boxes and cards */
body.dark-mode .box,
body.dark-mode .card,
body.dark-mode .name-box,
body.dark-mode .search-box {
	background-color: var(--bg-primary);
	border-color: var(--border-color);
}

/* Tables */
body.dark-mode table {
	background-color: var(--bg-primary);
	border-color: var(--border-color);
}

body.dark-mode table th, body.dark-mode .mem-form-wrapper h2{
	color: var(--text-primary);

}
body.dark-mode #toc_container{
	background:inherit;
}
body.dark-mode #toc_container .toc_title{
	background-color: var(--bg-secondary);
}

body.dark-mode .generator .name-card .name-type{
	color:var(--text-secondary);
	border-color:var(--text-secondary);
}

/* Forms */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="search"],
body.dark-mode input[type="number"],
body.dark-mode textarea,
body.dark-mode select {
	background-color: var(--bg-tertiary);
	border-color: var(--border-color);
	color: var(--text-primary);
}

body.dark-mode .kanji-list li a,
body.dark-mode .name-list.kanji-list .title em{
color: var(--text-primary);
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
	color: var(--text-muted);
}

body.dark-mode .ccp_ul{
	background-color: var(--bg-primary);
	border:solid 1px var(--border-color);
}
body.dark-mode .cmn_ico a,
body.dark-mode .font_ao,
body.dark-mode .name_summary a{
	color:var(--text-primary);
}

body.dark-mode .name_summary a.name-more{
	color:var(--accent-green);
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
	border-color: var(--link-color);
	background-color: var(--bg-tertiary) !important;
}
body.dark-mode .strokes canvas,
body.dark-mode #imageContainer canvas{
	background-color:#fff;
}

/* Buttons */
body.dark-mode .btn,
body.dark-mode button {
	/*background-color: var(--accent-green);
	color: #1a1a1a;
	border-color: var(--accent-green);
	*/
}
body.dark-mode #tabs .tab-link.active{
background-color: var(--accent-green);
}
body.dark-mode button.mem-btn-link{
	background-color:inherit;
}

/*body.dark-mode .btn:hover,
body.dark-mode button:hover {
	background-color: var(--accent-green-hover);
	border-color: var(--accent-green-hover);
}
*/
body.dark-mode .export-box, body.dark-mode .import-box{
	border-color:var(--border-color);
}
body.dark-mode .export-box h3, body.dark-mode .import-box h3,
body.dark-mode .export-box p, body.dark-mode .import-box p{
	color:inherit;
}


body.dark-mode .btn-secondary {
	background-color: var(--bg-tertiary);
	color: var(--text-primary);
	border-color: var(--border-color);
}

body.dark-mode .btn-secondary:hover {
	background-color: var(--bg-primary);
}

body.dark-mode .mem-btn-secondary {
	background-color: var(--bg-tertiary);
	color: #fff !important;
}

body.dark-mode .mem-btn-secondary:hover:not(:disabled) {
	background-color: var(--bg-secondary);
}

/* Navigation */
body.dark-mode #g-nav {
	background-color: var(--bg-secondary) !important;
	border-color: var(--border-color);
}
/*
body.dark-mode .nav-menu a,
body.dark-mode .g-nav-inner a {
	color: var(--text-primary);
}

body.dark-mode .nav-menu a:hover,
body.dark-mode .g-nav-inner a:hover {
	color: var(--link-color);
}
*/

body.dark-mode #g-nav .list li.current a,
body.dark-mode #g-nav .list li a:hover{
	background-color:var(--accent-green);
}

body.dark-mode .hdr-r {
	background-color: transparent;
}

/* Footer */
body.dark-mode #footer,
body.dark-mode footer {
	background-color: var(--bg-secondary) !important;
	border-color: var(--border-color);
}

body.dark-mode .ft-top {
	background-color: transparent;
	border-color: var(--border-color);
}

body.dark-mode .ft-top .ft-list a {
	color: var(--link-color);
}

body.dark-mode .ft-dark-mode {
	background-color: transparent;
}

body.dark-mode .ft-dark-mode button {
	background-color: var(--bg-tertiary);
	color: var(--text-primary);
	border-color: var(--border-color);
}

body.dark-mode .ft-dark-mode button:hover {
	background-color: var(--bg-primary);
	border-color: var(--link-color);
}

/* Breadcrumbs */
body.dark-mode .bread_crumb_list,
body.dark-mode .breadcrumb {
	background-color: var(--bg-primary);
}

body.dark-mode .bread_crumb_list a {
	color: var(--link-color);
}

/* Alerts and messages */
body.dark-mode .atten_green,
body.dark-mode .alert,
body.dark-mode .notice {
	background-color: var(--bg-tertiary);
	border-color: var(--border-color);
}

body.dark-mode .premium-restore-alert {
	background-color: var(--bg-tertiary);
}

body.dark-mode .mem-trial-blocked-notice {
	background-color: var(--bg-tertiary);
}

/* Keep white text for upgrade/trial notice links (gradient background) */
body.dark-mode .mem-upgrade-notice a,
body.dark-mode .mem-trial-expired-notice a,
body.dark-mode .mem-trial-active-notice a {
	color: white;
}

body.dark-mode .mem-upgrade-notice a:hover,
body.dark-mode .mem-trial-expired-notice a:hover,
body.dark-mode .mem-trial-active-notice a:hover {
	text-decoration: underline;
}

/* Modal */
body.dark-mode .modal,
body.dark-mode .jquery-modal {
	background-color: var(--bg-primary) !important;
	color: var(--text-primary);
}

/* Modal backdrop - maintain transparency like light mode */
body.dark-mode .blocker {
	background-color: rgba(26, 26, 26, 0.75) !important;
}

body.dark-mode .modal-header {
	background-color: var(--bg-tertiary);
	border-color: var(--border-color);
}

/* Premium Lists */
body.dark-mode .premium-tab-btn {
	background-color: var(--bg-tertiary);
	color: var(--text-primary);
	border-color: var(--border-color);
}

body.dark-mode .premium-tab-btn.active,
body.dark-mode .premium-tab-btn:hover {
	background-color: var(--bg-primary);
	border-color: var(--link-color);
}

body.dark-mode .premium-tab-name-edit {
	background-color: var(--bg-secondary);
	color: var(--text-primary) !important;
	border-color: var(--link-color);
}

body.dark-mode .premium-list-content {
	background-color: var(--bg-primary);
}

/* Premium list selector (hover dropdown) */
body.dark-mode .premium-list-selector {
	background-color: var(--bg-secondary);
	border-color: var(--border-color);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

body.dark-mode .premium-list-selector-item:hover {
	background: var(--bg-tertiary);
}

body.dark-mode .premium-list-selector-name {
	color: var(--text-primary);
}

body.dark-mode .premium-list-selector-count {
	color: var(--text-secondary);
}

body.dark-mode .premium-list-selector-create-new {
	border-top-color: var(--border-color);
}

body.dark-mode .premium-list-selector-create-new:hover {
	background: var(--bg-tertiary);
}

body.dark-mode .premium-list-selector-drag-handle {
	color: var(--text-secondary);
}
body.dark-mode .premium-list-selector-drag-handle:hover {
	color: var(--text-primary);
}

body.dark-mode .premium-list-selector-item.premium-list-selector-ghost {
	background: var(--bg-tertiary) !important;
}

body.dark-mode .premium-list-selector-item.premium-list-selector-dragging {
	background: var(--bg-secondary);
	box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

body.dark-mode .premium-list-selector-item.sortable-fallback {
	background: var(--bg-secondary);
	border-color: var(--border-color);
	box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* Name lists */
body.dark-mode .name-list,
body.dark-mode .fav-list {
	background-color: var(--bg-primary);
}

body.dark-mode .name-list li,
body.dark-mode .fav-list li {
	background-color: var(--bg-primary);
	border-color: var(--border-color);
}

/*body.dark-mode .name-list li:hover,
body.dark-mode .fav-list li:hover {
	background-color: var(--bg-tertiary);
}*/

/* Borders */
body.dark-mode hr,
body.dark-mode .border-top,
body.dark-mode .border-bottom {
	border-color: var(--border-color);
}

/* Images - reduce brightness in dark mode */
body.dark-mode img:not(.no-dark-filter) {
	opacity: 0.9;
}

/* Sidebar */
body.dark-mode #sidebar,
body.dark-mode aside,
body.dark-mode .side-bar {
	background-color: var(--bg-primary) !important;
}

body.dark-mode .side-list-box,
body.dark-mode .side-list {
	background-color: var(--bg-primary);
}
body.dark-mode #side_all a{
	color:#fff;
}
body.dark-mode h2.side-ttl{
	background-color: var(--bg-secondary);
	color: #ffffff;
}
body.dark-mode .column-list .ttl a{
	color:var(--link-color);
}
body.dark-mode .column-list .text p,
body.dark-mode .column-list .text a{
	color: var(--text-primary);
}

/* Search results */
body.dark-mode .search-result-item {
	background-color: var(--bg-primary);
	border-color: var(--border-color);
}

/*body.dark-mode .search-result-item:hover {
	background-color: var(--bg-tertiary);
}*/

/* Code blocks */
body.dark-mode code,
body.dark-mode pre {
	background-color: var(--bg-tertiary);
	color: var(--text-primary);
	border-color: var(--border-color);
}

/* Tooltips */
body.dark-mode .tooltip {
	background-color: var(--bg-tertiary);
	color: var(--text-primary);
	border-color: var(--border-color);
}

body.dark-mode .mem-email {
    color: #f2f2f2;
}

body.dark-mode .mem-edit-icon {
    color: #888;
}

body.dark-mode .mem-edit-icon:hover {
    color: #2563eb;
}

/* Muted text */
body.dark-mode .text-muted,
body.dark-mode .cmn_p.tar,
body.dark-mode small {
	color: var(--text-muted);
}

/* Membership pages */
body.dark-mode .mem-section,
body.dark-mode .mem-form-group,
body.dark-mode .mem-card {
	background-color: var(--bg-primary);
}

body.dark-mode .mem-note,
body.dark-mode .mem-voice-name-ja  {
	color: var(--text-secondary);
}

/* Premium feature locks */
body.dark-mode .mem-lock-icon {
	opacity: 0.7;
}

/* Toast notifications */
body.dark-mode #toast,
body.dark-mode .toast {
	background-color: var(--bg-tertiary);
	color: var(--text-primary);
	border-color: var(--border-color);
}

body.dark-mode #toast.success,
body.dark-mode .toast.success {
	background-color: #2d5016;
	border-color: var(--accent-green);
}

body.dark-mode #toast.error,
body.dark-mode .toast.error {
	background-color: #5c1616;
	border-color: #d14040;
}

/* Additional white background overrides */
body.dark-mode .main-img-area,
body.dark-mode .search-box,
body.dark-mode .srch_ttl,
body.dark-mode .atoz,
body.dark-mode .column-list,
body.dark-mode .reco_right,
body.dark-mode .card-all{
	background-color: var(--bg-primary);
}
body.dark-mode .main-img-area .btn-style-01,
body.dark-mode .sub_nav li a{
background-color: var(--bg-secondary);
box-shadow:none;
}

body.dark-mode .tag-list-box .tag-list li a{
	background-image:none;
	border:solid 1px var(--accent-green);
}

body.dark-mode .jni-name-found{
	background:inherit;
}
body.dark-mode .jni-name-found_link{
	color:var(--text-primary);
}
body.dark-mode .jni-conv-iine .good_num{
	color:var(--link-color);
}
body.dark-mode .font_ao{
	color:var(--text-primary) !important;
}
body.dark-mode #sh_modal .field input{
	background-color:inherit;
}
body.dark-mode .sorts li.sort_li:hover {
	background-color:var(--bg-secondary);
}

body.dark-mode .atoz-list {
	color: #ffffff;
}
body.dark-mode .wp-pagenavi span.current{
	background-color:inherit;
}
/* A-Z list borders using light mode colors */
/* Girl names (default) */
body.dark-mode .atoz .atoz-list a{
	background-color:inherit;
	border: solid 1px #fdecf0;
}
body.dark-mode .atoz .atoz-list a.no-result{
	background-color:#000;
	color:var(--text-secondary);
}
body.dark-mode .atoz.boy .atoz-list a {
	border: solid 1px #cde9f9;
}
body.dark-mode .atoz.unisex .atoz-list a {
	border: solid 1px #fae8a8;
}
body.dark-mode .atoz.last-name .atoz-list a {
	border: solid 1px #e2f8f1;
}
body.dark-mode .atoz.eng .atoz-list a {
	border: solid 1px #0052A5;
}

/* Content areas */
body.dark-mode .top-contents,
body.dark-mode .sub-contents,
body.dark-mode article {
	background-color: var(--bg-primary);
}

/* Lists and items */
body.dark-mode ul,
body.dark-mode ol {
	background-color: transparent;
}

/* Sort filters - active state */
body.dark-mode .sorts li.sort_li.active {
	color: #ffffff;
}

/* Active tabs (My Favorite Names page) - match light mode styling */
body.dark-mode .premium-tab-btn.active {
	background-color: var(--accent-green) !important;
	color: #ffffff !important;
	border-color: var(--accent-green) !important;
}

/* Loading overlay - dark background for readability */
body.dark-mode #loadingOverlay {
	background-color: rgba(26, 26, 26, 0.85) !important;
}

body.dark-mode #meaningSearchMessage {
	color: #ffffff;
}


body.dark-mode .export-box,
body.dark-mode .import-box {
	background:var(--bg-secondary);
}

body.dark-mode .mem-voice-option input[type="radio"]:checked + .mem-voice-card {
    border-color: var(--accent-green);
    background:var(--bg-secondary);
}
body.dark-mode .tag-list li:hover a{
	color:var(--text-primary);
}

@media screen and (max-width: 767px){
	body.dark-mode header .header-inner{
		background-color: var(--bg-secondary);
	}
	body.dark-mode #menu-trigger-2 span, body.dark-mode header #menu-trigger span{
		background:#fff;
	}
	body.dark-mode #g-nav .list li.current a, body.dark-mode #g-nav .list li a:hover{
		background-color:inherit;
	}
	body.dark-mode #g-nav{
		box-shadow:none;
	}
}

/* ========================================
   Membership Page Dark Mode
   ======================================== */

/* Plan cards */
body.dark-mode .mem-plan {
	background-color: var(--bg-secondary);
	border-color: var(--border-color);
}

body.dark-mode .mem-plan:hover {
	box-shadow: 0 12px 24px rgba(0,0,0,0.3);
}

body.dark-mode .mem-plan-guest {
	background-color: var(--bg-tertiary);
	border-color: var(--border-color);
}

body.dark-mode .mem-plan-free {
	border-color: #2563eb;
	box-shadow: 0 10px 20px rgba(46, 160, 171, 0.3);
}

body.dark-mode .mem-plan-premium {
	border-color: #34508a;
	box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}

body.dark-mode .mem-plan-header {
	border-color: var(--border-color);
}

body.dark-mode .mem-plan-name {
	color: var(--text-primary);
}

body.dark-mode .mem-price-period {
	color: var(--text-secondary);
}

body.dark-mode .mem-feature-text {
	color: var(--text-primary);
}

body.dark-mode .mem-btn-guest {
	background-color: var(--bg-tertiary);
	color: var(--text-secondary) !important;
}

/* Feature detail sections */
body.dark-mode .mem-feature-detail {
	background-color: var(--bg-secondary);
}

body.dark-mode .mem-feature-detail-content h3 {
	color: var(--text-primary);
}

body.dark-mode .mem-feature-detail-content p {
	color: var(--text-secondary);
}

/* Premium section */
body.dark-mode .mem-section-premium {
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
}

body.dark-mode .mem-section-premium .mem-feature-detail {
	background: transparent;
}

/* Coming Soon section */
body.dark-mode .mem-coming-soon-item {
	background-color: var(--bg-secondary);
}

body.dark-mode .mem-coming-soon-title {
	color: var(--text-primary);
}

body.dark-mode .mem-coming-soon-desc {
	color: var(--text-secondary);
}

/* CTA section */
body.dark-mode .mem-cta-box {
	background-color: var(--bg-secondary);
}

body.dark-mode .mem-cta-title {
	color: var(--text-primary);
}

body.dark-mode .mem-cta-text {
	color: #ffffff;
}

/* FAQ section */
body.dark-mode .mem-faq {
	background-color: var(--bg-secondary);
	border-color: var(--border-color);
}

body.dark-mode .mem-faq dt {
	color: var(--text-primary);
}

body.dark-mode .mem-faq dd {
	color: var(--text-secondary);
}

body.dark-mode .mem-faq-category {
	color: var(--text-primary);
	border-bottom-color: var(--border-color);
}

/* Section titles */
body.dark-mode .mem-section-title {
	color: var(--link-color);
}

body.dark-mode .mem-section-premium .mem-section-title {
	color: #9b8cff;
}

body.dark-mode .mem-section-subtitle {
	color: var(--text-secondary);
}

/* Bubble wrap (closing message) */
body.dark-mode .bubble-wrap .bubble {
	background-color: var(--bg-secondary);
	color: var(--text-primary);
}

body.dark-mode .bubble-wrap .bubble::before {
	border-right-color: var(--bg-secondary);
}

body.dark-mode .bubble-wrap .bubble p {
	color: var(--text-primary);
}

body.dark-mode .bubble-wrap .thumb-name {
	color: var(--text-secondary);
}
/* ============================================
   WN Theme Overrides (merged from wn/style.css)
   ============================================ */

/* ============================================
   WN Overrides for JN CSS
   ============================================ */

/* --- Logo adjustments --- */
/* Main CSS now uses world_names_info.png directly. No overrides needed. */

/* --- Unified button style (override JN's gold outline with WN navy fill) --- */
.btn-style-01 {
    background: #34508a !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    padding: 12px 30px !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-block;
    text-align: center;
    width: auto;
    text-decoration: none;
}
.btn-style-01:hover {
    background: #2a4070 !important;
    color: #fff !important;
}
.btn-style-01:before {
    display: none !important;
}

/* --- Search panel on homepage/country --- */
.search-panel .search-form,
.wn-search-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.search-panel .search-input,
.wn-search-form .search-input {
    flex: 1;
    min-width: 200px;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1.4rem;
}
.search-panel .search-select,
.wn-search-form .search-select {
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1.4rem;
    background: #fff;
}

/* --- Quick links row --- */
.top-sec-02 {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.top-sec-02 .btn-style-01 {
    text-align: center;
    min-width: 130px;
    display: inline-block;
}

/* --- Country grid --- */
.country-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 20px;
}
.country-list a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #eee;
    border-radius: 4px;
    font-size: 1.3rem;
    text-decoration: none;
    color: #333;
    transition: background 0.2s;
}
.country-list a:hover {
    background: #f5f5f5;
}
.country-list .country-flag {
    vertical-align: middle;
}

/* --- Country section on detail page --- */
.country-name-section {
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px;
}
.country-name-header {
    display: block;
    margin-bottom: 10px;
}
.country-name-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 1.6rem;
    font-weight: normal;
    margin: 0;
}
.country-name-text {
    font-size: 2rem;
}
.country-name-details .detail-row {
    margin-bottom: 4px;
    font-size: 1.3rem;
}
.detail-label {
    color: #999;
    margin-right: 4px;
}
.country-name-variants {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #eee;
}
.variant-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.variant-tag {
    background: #fdf6e3;
    border: 1px solid #f0e6ce;
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 1.3rem;
}

/* --- Gender badge --- */
.gender-icon {
    font-size: 1.6rem;
    margin-left: 8px;
    vertical-align: middle;
}
.gender-icon img {
    vertical-align: middle;
    position: relative;
    top: -2px;
}
/* --- detail-list: consolidated WN styles --- */
.detail-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 8px 0;
    margin-bottom: 20px;
}
.detail-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.4rem;
    line-height: 1.6;
}
.detail-list li .icon {
    flex-shrink: 0;
}
.detail-list li:has(.wn-info-icon) {
    margin-left: auto;
}
.detail-list li .wn-info-icon {
    color: #7b8ba3;
    font-size: 11px;
}
@media screen and (min-width:768px) {
    .detail-list li { margin-right: 20px; }
}
@media screen and (max-width:767px) {
    .detail-list {
        margin: 0 0 15px 0;
        padding: 8px 0;
    }
    .detail-list li {
        flex: 0 0 auto;
        padding-left: calc(16/750*100%);
        padding-right: calc(16/750*100%);
    }
    .detail-list li:has(.wn-info-icon) {
        padding-right: calc(16/750*100%);
    }
}

/* --- Last Name Ethnic Distribution --- */
.ln-ethnic-dist {
    margin-top: 8px;
}
.ln-ethnic-dist .detail-label {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 6px;
}
.ethnic-bar {
    display: flex;
    height: 16px;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}
.ethnic-seg { min-width: 1px; }
.ethnic-seg.white { background: #6b8dc4; }
.ethnic-seg.hispanic { background: #f59e0b; }
.ethnic-seg.black { background: #34508a; }
.ethnic-seg.api { background: #10b981; }
.ethnic-seg.aian { background: #e74c8b; }
.ethnic-seg.mixed { background: #a78bfa; }
.ethnic-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 1.1rem;
    color: #666;
}
.ethnic-legend span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.leg-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}
.leg-dot.white { background: #6b8dc4; }
.leg-dot.hispanic { background: #f59e0b; }
.leg-dot.black { background: #34508a; }
.leg-dot.api { background: #10b981; }
.leg-dot.aian { background: #e74c8b; }
.leg-dot.mixed { background: #a78bfa; }

/* --- Name Variants & Related --- */
.name-variants-section {
    background: #f8f9fc;
    border: 1px solid #e8ecf2;
    border-radius: 6px;
    padding: 14px 18px;
    margin-bottom: 20px;
}
.variants-heading {
    font-size: 1.4rem;
    font-weight: 700;
    color: #34508a;
    margin: 0 0 10px;
}
.name-variants-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}
.name-variants-list li {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 1.4rem;
}
.name-variants-list .variant-name {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
}
.name-variants-list .variant-name:hover {
    text-decoration: underline;
}
.name-variants-list .variant-reason {
    color: #999;
    font-size: 1.2rem;
}
.similar-names-desc {
    font-size: 1.3rem;
    color: #999;
    margin: -8px 0 12px;
}

/* --- Side search form --- */
.side-search {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.side-search .search-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1.3rem;
}

/* --- Link more (View All buttons) --- */
.link-more .btn-style-01 {
    display: inline-block;
    text-align: center;
    min-width: 160px;
}

/* --- Name meta section --- */
.name-meta {
    margin-bottom: 20px;
}

/* --- Section wrapper --- */
.sec-wrap {
    margin-bottom: 30px;
}

/* --- Side section --- */
.side-section {
    margin-bottom: 20px;
}
.side-ttl {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

/* --- Source link on country section --- */
.source-link {
    text-align: right;
    margin-top: 8px;
    font-size: 1.1rem;
}
.source-link a {
    color: #999;
    text-decoration: none;
}
.source-link a:hover {
    color: #34508a;
    text-decoration: underline;
}
.source-link .fa-external-link-alt {
    font-size: 0.9em;
    margin-left: 2px;
}

/* --- Country grid (country list page) --- */
.country-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 30px;
}
.country-card {
    display: block;
    padding: 10px 16px;
    border: 1px solid #eee;
    border-radius: 6px;
    color: #333;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.country-card:hover {
    border-color: #34508a;
    box-shadow: 0 2px 8px rgba(52,80,138,0.1);
}
.country-card-flag img {
    width: 24px;
    height: 18px;
}
.country-card-name {
    font-size: 1.4rem;
    font-weight: 600;
    min-width: 120px;
}
.country-card-count {
    font-size: 1.2rem;
    color: #999;
    margin-left: auto;
    white-space: nowrap;
}

/* --- Search result count --- */
.result-count {
    color: #666;
    margin-bottom: 16px;
    font-size: 1.8rem;
}
.no-chart-data {
    color: #999;
    font-size: 1.3rem;
    font-style: italic;
    margin: 10px 0;
}

/* --- Advanced search panel --- */
.wn-search-panel .search-field {
    margin-bottom: 10px;
}
.wn-search-panel .search-label {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 4px;
    text-align: left;
}
.wn-search-panel .search-checkbox label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.3rem;
    cursor: pointer;
}
.wn-search-panel .search-checkbox input[type="checkbox"] {
    width: auto !important;
    min-width: 16px;
}
/* Initial + Gender: 2-column row */
.wn-search-panel .search-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.wn-search-panel .search-row .search-field {
    flex: 1;
    margin-bottom: 0;
}
/* Select dropdown with arrow */
.wn-search-panel .search-select,
select.search-select {
    width: 100%;
    padding: 8px 28px 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1.3rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E") no-repeat right 10px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}
/* Country list: inline flow */
.wn-search-panel .search-country-list {
    border: none;
    border-radius: 0;
    padding: 6px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 4px;
    text-align: left;
}
.wn-search-panel .search-country-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 4px;
    white-space: nowrap;
}
.wn-search-panel .search-country-item span {
    white-space: nowrap;
}
.wn-search-panel .search-country-item:hover {
    background: #f0f4ff;
}
.wn-search-panel .search-country-item input[type="radio"],
.wn-search-panel .search-country-item input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
    width: auto !important;
    min-width: 16px;
}
.wn-search-panel .search-country-item .country-flag {
    flex-shrink: 0;
}

/* --- H1 with search link (JN-style) --- */
.pagetitle .with_flex {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
}
.pagetitle .ttl_r.srch a {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 1.4rem;
    font-weight: 400;
    color: #2563eb;
    text-decoration: none;
    white-space: nowrap;
}
.pagetitle .ttl_r.srch a:hover { text-decoration: underline; }
.pagetitle .ttl_r.srch .name_search_icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    position: relative;
    top: 3px;
    margin: 0;
}

/* Responsive: u-pc / u-sp */
.u-sp { display: none; }
@media (max-width: 767px) {
    .u-pc { display: none !important; }
    .u-sp { display: block !important; }
}

/* --- Gender filter tabs (sub_nav, JN-style pill buttons) --- */
.sub_nav ul {
    display: flex;
    justify-content: space-evenly;
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}
.sub_nav .nav1 {
    flex: none;
}
.sub_nav .nav1 a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    border-radius: 30px;
    font-size: 1.4rem;
    text-decoration: none;
    color: #34508a;
    background: transparent;
    transition: background 0.2s, border-color 0.2s;
}
.sub_nav .nav1 a:hover {
    background: #eef2f9;
    border-color: #34508a;
}
.sub_nav .nav1 a .nav-count {
    font-size: 1.2rem;
    color: #999;
}
.sub_nav .nav1.current a {
    background: #34508a;
    color: #fff;
}
.sub_nav .nav1.current a .nav-count {
    color: rgba(255,255,255,0.8);
}
@media (max-width: 767px) {
    .sub_nav .nav1 a {
        flex-direction: column;
        padding: 8px 12px;
        font-size: 1.2rem;
        gap: 2px;
    }
    .sub_nav .nav1 a .nav-count {
        font-size: 1.1rem;
    }
}

/* --- A-Z colors: merged into base .atoz .atoz-list a above --- */

/* --- A-Z colors: last names — vivid indigo --- */
.atoz.last-name .atoz-list a {
    background-color: #5c6daf !important;
    color: #fff !important;
}
.atoz.last-name .atoz-list a:hover,
.atoz.last-name .atoz-list a.active {
    background-color: #34508a !important;
    color: #fff !important;
}

/* --- Pagination centered --- */
.pagination .nav-links,
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin: 20px 0;
    flex-wrap: wrap;
}
.pagination .nav-links .page-numbers,
.pagination > .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1.3rem;
    text-decoration: none;
    color: #34508a;
    background: #fff;
    transition: background 0.2s, color 0.2s;
}
.pagination .nav-links .page-numbers:hover,
.pagination > .page-numbers:hover {
    background: #34508a;
    color: #fff;
    border-color: #34508a;
}
.pagination .nav-links .page-numbers.current,
.pagination > .page-numbers.current {
    background: #34508a;
    color: #fff;
    border-color: #34508a;
    font-weight: 600;
}
.pagination .nav-links .page-numbers.dots,
.pagination > .page-numbers.dots {
    border: none;
    background: none;
    color: #999;
}

/* --- Favorites page (JN-style tabs) --- */
.fav-intro {
    margin-bottom: 16px;
    font-size: 1.4rem;
    color: #666;
}
.fav-intro p { margin: 4px 0; }
.fav-actions { text-align: right; }
.blue-link { color: #2563eb; text-decoration: none; }
.blue-link:hover { text-decoration: underline; }

#fav-tabs {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 0;
}
.fav-tab-link {
    font-size: 1.4rem;
    border-top: dashed 1px #34508a;
    border-left: dashed 1px #34508a;
    border-right: dashed 1px #34508a;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    padding: 10px 0;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    flex: 1;
    background-color: inherit;
    color: #34508a;
}
.fav-tab-link:hover { opacity: 0.7; }
.fav-tab-link.active {
    background-color: #eef2f9;
    font-weight: bold;
}
.fav-tab-num {
    font-size: 1.2rem;
    margin-left: 3px;
}
.fav-tab-num::before { content: '('; }
.fav-tab-num::after { content: ')'; }

.fav-empty {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    font-size: 1.4rem;
}
.fav-empty p { margin: 10px 0; }

/* Drag-to-sort */
.sortable-list li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0;
}
.sortable-list li .drag-handle {
    cursor: grab;
    color: #bbb;
    font-size: 1.6rem;
    padding: 8px 10px 8px 0;
    user-select: none;
    line-height: 1;
    flex-shrink: 0;
}
.sortable-list li .drag-handle:active { cursor: grabbing; }
.sortable-list li .li-content {
    flex: 1;
    min-width: 0;
}
.drag-icon-sample {
    color: #bbb;
    font-size: 1.2rem;
    letter-spacing: -2px;
}
.sortable-list li.dragging {
    opacity: 0.3;
}
.drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.85;
    background: #fff;
    border: 1px solid #34508a;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    padding: 6px 12px;
    font-size: 1.4rem;
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.drag-placeholder {
    border: 2px dashed #34508a;
    background: #eef2f9;
    border-radius: 4px;
    list-style: none;
    transition: height 0.15s ease;
}

/* --- Common modal system (shared by share, confirm, alert) --- */
.wn-blocker {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    overflow: auto;
    z-index: 100000;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.25s;
}
.wn-blocker > * {
    position: relative;
    z-index: 200000;
    background: #fff;
    border-radius: 8px;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    text-align: left;
}
/* Share modal content */
#sh_modal { padding: 20px; }
/* Confirm/alert modal */
.wn-confirm-modal { padding: 28px 32px; max-width: 420px; }
.wn-confirm-title {
    margin: 0 0 12px;
    font-size: 1.8rem;
    color: #34508a;
}
.wn-confirm-message {
    margin: 0 0 20px;
    font-size: 1.4rem;
    color: #555;
    line-height: 1.6;
}
.wn-confirm-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.wn-confirm-btn {
    padding: 8px 20px;
    font-size: 1.4rem;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-weight: 600;
}
.wn-confirm-btn.cancel {
    background: #e5e7eb;
    color: #333;
}
.wn-confirm-btn.cancel:hover { background: #d1d5db; }
.wn-confirm-btn.ok {
    background: #dc2626;
    color: #fff;
}
.wn-confirm-btn.ok:hover { background: #b91c1c; }

/* --- Gender info icon --- */
.wn-info-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    font-style: normal;
    color: #7b8ba3;
    border: 1.5px solid #b0bec5;
    border-radius: 50%;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 4px;
    transition: color 0.2s, border-color 0.2s;
    user-select: none;
}
.wn-info-icon:hover {
    color: #34508a;
    border-color: #34508a;
}
/* --- Gender info modal --- */
.wn-info-modal { padding: 28px 32px; max-width: 520px; }
.wn-info-modal-inner { position: relative; }
.wn-info-modal h3 {
    margin: 0 0 14px;
    font-size: 1.8rem;
    color: #34508a;
}
.wn-info-modal h4 {
    margin: 16px 0 6px;
    font-size: 1.4rem;
    color: #34508a;
}
.wn-info-modal p {
    margin: 0 0 10px;
    font-size: 1.35rem;
    color: #444;
    line-height: 1.7;
}
.wn-info-modal ul {
    margin: 0 0 10px 20px;
    padding: 0;
    font-size: 1.35rem;
    color: #444;
    line-height: 1.8;
}
.wn-info-modal .wn-info-modal-note {
    font-size: 1.2rem;
    color: #999;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

/* --- Share modal (JN-style, uses jQuery Modal .modal/.blocker from main CSS) --- */
/* #sh_modal styles are in /css/style.css — no overrides needed */

/* --- Fav/Share/Copy button spacing --- */
.name-detail .pagetitle { align-items: center; }
.detail_ttl_r { display: flex; align-items: center; gap: 0; white-space: nowrap; }
.detail_ttl_r .fav_btn, .detail_ttl_r .sh_btns, .detail_ttl_r span { cursor: pointer; }
.detail_ttl_r img { vertical-align: middle; }
.country-name-actions { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; white-space: nowrap; }
.country-name-actions img { vertical-align: middle; cursor: pointer; }
.country-name-actions .fav_btn, .country-name-actions .sh_btns, .country-name-actions > span { margin-left: 0; cursor: pointer; }
.country-name-ranks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 4px 0 0; }

/* --- Tooltip (JN-style .tip-message — defined in main /css/style.css) --- */

/* --- Header fav button (override JN green #7ed0d8 → WN navy) --- */
.hdr-r .fav-btn { display: flex; align-items: center; gap: 4px; font-size: 1.2rem; text-decoration: none; color: #34508a; white-space: nowrap; border-color: #34508a; }
.hdr-r .fav-btn img { vertical-align: middle; }
.hdr-r .sh img { cursor: pointer; }
.hdr-r .fb-btn, .hdr-r .gp-btn, .hdr-r .tw-btn { background-color: #34508a; }

/* --- Hero area (main-img-area, JN-style) --- */
.main-img-area {
    width: 100%;
    margin: 0 auto 30px;
    background-image: url(/images/common/main_img.webp);
    background-size: cover;
    background-position: center;
}
.main-img-area a { background-color: #fff; }
.main-img-area .inner {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    position: relative;
}
.main-img-area .text-box {
    width: 100%;
    padding: 50px 0 0;
    position: static;
    top: auto;
    right: auto;
}
.main-img-area .text-box .title {
    color: #34508a;
    font-weight: 400;
    font-size: 4.2rem;
    line-height: 1.2;
    display: block;
    margin-bottom: 20px;
    text-shadow: #fff 1px 1px 10px, #fff -1px 1px 10px, #fff 1px -1px 10px, #fff -1px -1px 10px;
}
/* .main-img-area .text-box p — merged into base block above */
/* .shortcut-link — merged into base block above */
.main-img-area .shortcut-link .btn-style-01 {
    display: inline-block;
    width: auto;
    padding: 10px 15px 10px 30px;
    margin: 0 10px 10px 0;
    font-size: 1.3rem;
}
@media (max-width: 767px) {
    .main-img-area { margin-bottom: 10px; }
    .main-img-area .text-box { padding: 30px 0 0; }
    .shortcut-link { padding: 0 0 30px; }
    .main-img-area .inner { padding: 0 2%; }
    .main-img-area .shortcut-link .btn-style-01 { padding: 10px 15px 10px 15px; margin: 0 5px 10px 5px; }
}

/* --- What's New --- */
.whatsnew { margin-bottom: 20px; }
.whatsnew-ttl {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.whatsnew-ttl .wn-ttl { margin-bottom: 0; }
.whatsnew-ttl .wn-ttl a { color: inherit; text-decoration: none; }
.whatsnew-ttl .srch_r a {
    font-size: 1.2rem;
    color: #2563eb;
    text-decoration: none;
}
.whatsnew-ttl .srch_r a:hover { text-decoration: underline; }
.top-wn-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
}
.top-wn-list li dl {
    display: flex;
    gap: 0;
    padding: 8px 0;
}
.top-wn-list li dt {
    flex-shrink: 0;
    font-size: 1.2rem;
    color: #999;
    min-width: 80px;
}
.top-wn-list li dd {
    font-size: 1.3rem;
    margin: 0;
    line-height: 1.6;
}
.top-wn-list li dd a { color: #2563eb; }

/* What's New archive page */
.whatsnew-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.whatsnew-list > li {
    border-bottom: 1px solid #eee;
}
.whatsnew-list > li dl {
    display: flex;
    gap: 16px;
    padding: 14px 0;
}
.whatsnew-list > li dt {
    flex-shrink: 0;
    font-size: 1.3rem;
    color: #999;
    min-width: 90px;
}
.whatsnew-list > li dd {
    font-size: 1.4rem;
    margin: 0;
    line-height: 1.7;
}
.whatsnew-list > li dd a { color: #2563eb; }

/* --- TOP page gender sections — .atoz .title merged into base block above --- */
.atoz .title:before { display: none; }
.atoz .title a { color: #34508a; text-decoration: none; }
.atoz .title a:hover { text-decoration: underline; }
.atoz .title span { font-size: 1.3rem; color: #999; font-weight: 400; margin-left: 6px; }
.atoz .title .name_search_icon { vertical-align: middle; margin-right: 4px; width: 28px; height: 28px; position: relative; top: -3px; }
.atoz.pt20 { padding-top: 20px; }
.atoz.mb0 { margin-bottom: 0; }

/* --- Override JN accent colors site-wide → WN navy/pink --- */
/* JN green #7ed0d8 → WN navy #34508a */
/* JN amber #f59e0b / #fbbf24 → WN navy #34508a */
.ttl-style-01 { border-left: 5px solid #34508a; font-size: 2rem; }
.search-box { border-top-color: #a3b8d8; border-bottom-color: #a3b8d8; }
.search-box input, .search-box select { margin-bottom: 0; }
/* .atoz .atoz-list a — merged into base block above */
.atoz { margin-bottom: 4px; }
.atoz-search-link { text-align: right; margin: 2px 10px 8px 0; }
.atoz-search-link a { display: inline-flex; align-items: center; gap: 3px; font-size: 1.3rem; color: #2563eb; text-decoration: none; }
.atoz-search-link a:hover { text-decoration: underline; }
.atoz-search-link .name_search_icon { position: relative; top: 1px; }
.link-more { text-align: center; }
/* result-count link */
.result-count a { color: #2563eb; text-decoration: none; }
.result-count a:hover { text-decoration: underline; }
/* Footer links */
footer .ft-top .ft-list li a { text-decoration: none; }
/* Name list: remove borders */
.name-list { border-top: none; }
.name-list li { border-bottom: none; }
.wn-search-panel form { text-align: center; }
.wp-pagenavi a, .wp-pagenavi span { border-color: #34508a; }
@media (max-width: 767px) {
    .ttl-style-01 { border-left-color: #34508a; }
    .btn-style-01 { border-color: #34508a; }
}

/* --- Static page content (JN article style) --- */
.column.sec02.clm_post p {
    margin-bottom: 1em;
    line-height: 1.8;
    font-size: 1.6rem;
}
.column.sec02.clm_post h2 {
    font-size: 2rem;
    margin: 2em 0 0.8em;
    padding-bottom: 0.4em;
    border-bottom: 1px solid #eee;
}
.column.sec02.clm_post h3 {
    font-size: 1.8rem;
    margin: 1.5em 0 0.6em;
}
.column.sec02.clm_post a {
    color: #34508a;
    text-decoration: underline;
}
.column.sec02.clm_post a:hover {
    text-decoration: none;
}

/* Hide screen-reader-only heading */
h2.screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --- LW Simple Forms (Contact page) --- */
.lwsf-form h2 {
    font-size: 1.6rem;
    font-weight: 600;
    margin: 20px 0 6px;
    border: none;
    padding: 0;
}
.lwsf-form h2 .must {
    color: #e53e3e;
    font-size: 1.3rem;
    margin-left: 4px;
}
.lwsf-form .inpt {
    margin-bottom: 4px;
}
.lwsf-form .inpt input[type="text"],
.lwsf-form .inpt input[type="email"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1.4rem;
    font-family: inherit;
    background: #fff;
}
.lwsf-form .inpt textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1.4rem;
    font-family: inherit;
    background: #fff;
    min-height: 150px;
    resize: vertical;
}
.lwsf-form .inpt input:focus,
.lwsf-form .inpt textarea:focus {
    border-color: #34508a;
    outline: none;
    box-shadow: 0 0 0 2px rgba(52, 80, 138, 0.15);
}
.lwsf-form .sbmt {
    text-align: center;
    margin: 20px 0;
}
.lwsf-form .sbmt button {
    padding: 12px 40px;
    font-size: 1.4rem;
    font-weight: 600;
    color: #fff;
    background: #34508a;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
.lwsf-form .sbmt button:hover {
    background: #2a4070;
}

/* LWSF confirm page buttons */
.lwsf-buttons {
    text-align: center;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    gap: 12px;
}
.lwsf-buttons button {
    padding: 12px 30px;
    font-size: 1.4rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
.lwsf-buttons button[value="back"] {
    background: #ddd;
    color: #333;
}
.lwsf-buttons button[value="back"]:hover {
    background: #ccc;
}
.lwsf-buttons button[value="send"] {
    background: #34508a;
    color: #fff;
}
.lwsf-buttons button[value="send"]:hover {
    background: #2a4070;
}

/* LWSF confirm buttons (Back / Send) — each is a separate <form> */
.lwsf-confirm-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 24px 0;
}
.lwsf-confirm-buttons form {
    display: inline-block;
}
.lwsf-confirm-buttons button,
.lwsf-confirm-buttons input[type="submit"] {
    padding: 12px 30px;
    font-size: 1.4rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
.lwsf-form-back button,
.lwsf-form-back input[type="submit"] {
    background: #ddd;
    color: #333;
}
.lwsf-form-back button:hover,
.lwsf-form-back input[type="submit"]:hover {
    background: #ccc;
}
.lwsf-confirm-buttons form.lwsf-form button,
.lwsf-confirm-buttons form.lwsf-form input[type="submit"] {
    background: #34508a;
    color: #fff;
}
.lwsf-confirm-buttons form.lwsf-form button:hover,
.lwsf-confirm-buttons form.lwsf-form input[type="submit"]:hover {
    background: #2a4070;
}

/* LWSF error messages */
.lwsf-field-error,
.lwsf-error-message,
p.lwsf-error-message {
    color: #e53e3e !important;
    font-size: 1.2rem;
    margin-top: 2px;
}
.lwsf-error-summary {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 16px;
    color: #991b1b;
    font-size: 1.3rem;
}

/* Confirm page values display */
.lwsf-form .inpt:not(:has(input)):not(:has(textarea)) {
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 4px;
    font-size: 1.4rem;
    min-height: 20px;
}

/* --- Rich name list items --- */
.name-list li .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.name-list li .list-l {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.name-list li .list-l > * {
    margin-left: 0;
    flex-shrink: 0;
}
.name-list li .list-l h3 {
    font-size: 1.9rem;
    font-weight: normal;
    margin: 0;
    display: inline;
    line-height: 1.6;
}
.name-list li .list-l a {
    text-decoration: none;
    display: flex;
    align-items: center;
}
.name-list li .list-l .icon { width: 20px; height: 20px; }
.name-list li .list-l .voice_icon { width: 21px; height: 18px; cursor: pointer; }
.name-list li .list-l .fav_btn img { width: 16px; height: 14px; }
.name-list li .list-l .cp_btn { width: 15px; height: 15px; }
.name-list li .list-l .icon,
.name-list li .list-l .voice_icon,
.name-list li .list-l .fav_btn,
.name-list li .list-l .fav_btn img,
.name-list li .list-l .cp_btn,
.name-list li .list-l span {
    vertical-align: middle;
    margin: 0;
    padding: 0;
}
.name-list li .list-r.views {
    font-size: 1.2rem;
    color: #999;
    white-space: nowrap;
    margin: 0;
}
.name-list li .name_summary {
    font-size: 1.2rem;
    color: #666;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.name-list li .name_summary a {
    color: #2563eb;
    text-decoration: none;
}
.name-list li .name_summary .country-flag {
    vertical-align: middle;
}

/* --- Gender rank badges in country headers --- */
.gender-rank {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 1.2rem;
    color: #666;
    margin-left: 0;
    background: #f5f5f5;
    padding: 2px 8px;
    border-radius: 4px;
}
.gender-rank img {
    vertical-align: middle;
}

/* --- Popularity Chart --- */
.chart-wrap {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: 0 auto 16px;
}
.chart-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.chart-header .chart-title { margin: 0; font-weight: normal; }
.chart-controls {
    display: flex;
    gap: 6px;
}
.chart-toggle {
    padding: 0 5px;
    font-size: 1.2rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f9f9f9;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}
.chart-toggle.active {
    background: #34508a;
    color: #fff;
    border-color: #34508a;
}
.chart-source {
    font-size: 1.1rem;
    color: #999;
    text-align: right;
    margin-top: 4px;
}

/* --- Name etymology section --- */
.name-etymology {
    background: #f8f9fc;
    border: 1px solid #e8ecf2;
    border-radius: 6px;
    padding: 14px 18px;
    margin-bottom: 20px;
}
.name-etymology .origin-badge {
    font-size: 1.4rem;
    margin: 0 0 6px;
    color: #34508a;
}
.name-etymology .etymology-text {
    font-size: 1.4rem;
    line-height: 1.7;
    color: #444;
    margin: 0 0 8px;
}
.name-etymology .etymology-source {
    font-size: 1.1rem;
    color: #999;
    margin: 0;
}
.name-etymology .etymology-source a {
    color: #2563eb;
}

/* --- Alphabet tabs (local initial) --- */
.alphabet-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
}
.alphabet-tab {
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-bottom: none;
    background: #f9f9f9;
    color: #666;
    cursor: pointer;
    font-size: 1.3rem;
    font-weight: 600;
}
.alphabet-tab:first-child { border-radius: 4px 0 0 0; }
.alphabet-tab:last-child { border-radius: 0 4px 0 0; }
.alphabet-tab.active {
    background: #fff;
    color: #34508a;
    border-color: #34508a;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
}
.alphabet-panel { display: none; }
.alphabet-panel.active { display: block; }

/* --- Hamburger icon (3-line, replaces Font Awesome fa-bars) --- */
.wn-hamburger {
    display: inline-block;
    width: 20px;
    height: 14px;
    position: relative;
    vertical-align: middle;
}
.wn-hamburger::before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    top: 0;
    box-shadow: 0 6px 0 currentColor;
}
.wn-hamburger::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    bottom: 0;
}

/* --- Universal modal close button (top-right ×) --- */
.wn-modal-x {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 4px 8px;
    z-index: 10;
}
.wn-modal-x:hover { color: #333; }

/* --- Mobile: hide sidebar (search panels already in page body) --- */
@media screen and (max-width:767px) {
    .side-bar { display: none; }
}

/* --- Mobile: hide header share icon (each page has its own) --- */
@media screen and (max-width:767px) {
    .hdr-r li.sh { display: none; }
}


/* --- Mobile nav: hdr-r inside g-nav layout --- */
@media screen and (max-width:767px) {
    #g-nav .g-nav-inner {
        padding-bottom: 60px;
    }
    #g-nav .hdr-r {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
        width: 100%;
        gap: 24px;
    }
    #g-nav .hdr-r .fav-btn {
        position: static;
        margin: 0;
        display: flex !important;
        align-items: center;
        gap: 6px;
        color: #34508a;
        text-decoration: none;
        font-size: 1.5rem;
        font-weight: 500;
    }
    #g-nav .hdr-r .sh_btns {
        cursor: pointer;
        line-height: 0;
    }
    #g-nav .hdr-r .sh_btns img {
        width: 32px;
        height: auto;
    }
}

/* --- Mobile: 2vw side margins for content elements (JN pattern) --- */
@media screen and (max-width:767px) {
    /* Text content with 2vw side margins */
    .result-count,
    h3 {
        margin-left: calc(16/750*100%);
        margin-right: calc(16/750*100%);
    }
    /* Grid/card elements with 2vw side padding */
    .country-grid {
        padding-left: calc(16/750*100%);
        padding-right: calc(16/750*100%);
    }
    /* Pagination centered with side padding */
    .pagination {
        padding-left: calc(16/750*100%);
        padding-right: calc(16/750*100%);
    }
    /* Front page What's New content */
    .whatsnew .whatsnew-content {
        padding-left: calc(16/750*100%);
        padding-right: calc(16/750*100%);
    }
    /* Etymology/origin block on detail page */
    .etymology-section,
    .origin-section {
        margin-left: calc(16/750*100%);
        margin-right: calc(16/750*100%);
    }
}

/* === Batch fixes 2026-04-08 === */

/* 1. Front page .atoz .title left margin 2vw on mobile */
@media screen and (max-width:767px) {
    .atoz > .title { padding-left: calc(16/750*100%); }
}

/* 2. Name list alternating row background (PC + mobile) */
.name-list li:nth-of-type(odd) { background-color: #f0f4f9; }

/* 3. Mobile A-Z alphabet 3 columns (matching JN) */
@media screen and (max-width:767px) {
    .atoz .atoz-list .inner {
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
        padding: 0 2vw;
    }
    .atoz .atoz-list .inner a {
        width: calc((100% - 24px) / 8);
        margin: 0 1.5px 6px;
        font-size: 2.2rem;
        height: 40px;
    }
}

/* 4. Mobile footer background color */
@media screen and (max-width:767px) {
    footer { background-color: #4a6aaa !important; }
}

/* 5. Mobile footer list arrow (replaces ar_w.png) */
@media screen and (max-width:767px) {
    .ft-top .ft-list li a:after {
        content: "";
        position: absolute;
        right: calc(20/750*100%);
        top: 0; bottom: 0;
        margin: auto;
        width: 0; height: 0;
        border-style: solid;
        border-width: 5px 0 5px 7px;
        border-color: transparent transparent transparent #fff;
        background: none;
    }
}

/* 6. Mobile .sub_nav .nav1 — match JN style */
@media screen and (max-width:767px) {
    .sub_nav .nav1 a {
        flex-direction: column;
        padding: 8px 12px;
        font-size: 1.2rem;
        gap: 2px;
        border: none;
        box-shadow: none;
        background: #f0f4f9;
        border-radius: 20px;
    }
    .sub_nav .nav1 a .nav-count {
        font-size: 1.1rem;
    }
    .sub_nav .nav1 a img.name_search_icon {
        width: 24px;
        margin: 0 auto 4px !important;
        height: 24px;
        margin: 0 auto 4px !important;
    }
}

/* 7. Chart toggle — merged into main block above */

/* 9. (replaced by new country-name-ranks structure) */

/* 10. Mobile similar-names-desc margin 2vw */
@media screen and (max-width:767px) {
    .similar-names-desc {
        margin-left: calc(16/750*100%);
        margin-right: calc(16/750*100%);
    }
}

/* (detail-list consolidated above) */

/* --- Mobile modal: scrollable when content exceeds viewport --- */
@media screen and (max-width:767px) {
    .wn-blocker {
        align-items: flex-start;
        padding: 20px 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .wn-blocker > * {
        max-width: 95%;
        max-height: none;
        margin: auto;
    }
    .wn-info-modal {
        padding: 20px 16px;
    }
    .wn-info-modal h3 { font-size: 1.6rem; }
    .wn-info-modal h4 { font-size: 1.3rem; }
    .wn-info-modal p, .wn-info-modal ul { font-size: 1.25rem; }
}

/* === Batch fixes 2026-04-08 #2 === */

/* 1-A. Mobile A-Z: JN sizing */
@media screen and (max-width:767px) {
    .atoz .atoz-list .inner { width: 100% !important; margin: 0 !important; }
    .atoz .atoz-list .inner a {
        width: 8.9vw !important;
        height: 8.9vw !important;
        margin: 0 3px 6px 3px !important;
        font-size: 1.6rem !important;
    }
}

/* 1-B. Mobile result-count smaller */
@media screen and (max-width:767px) {
    .result-count { font-size: 1.5rem; }
}


/* === Batch fixes 2026-04-08 #3 === */

/* 1. What's New: mobile — date on top, content below full-width, 2vw side margins */
@media screen and (max-width:767px) {
    .whatsnew dl { display: block !important; padding: 0; margin: 0 calc(16/750*100%); }
    .whatsnew dt { margin: 0 0 4px; padding: 0; font-size: 1.2rem; color: #999; }
    .whatsnew dd { margin: 0 !important; padding: 0 !important; }
}

/* 2. gender-rank — merged into main block above */

/* (detail-list consolidated above) */

/* === Batch fixes 2026-04-07 === */

/* (detail-list consolidated above) */

/* 3. What's New mobile margins: front page + archive page */
@media screen and (max-width:767px) {
    .whatsnew-list dl { display: block !important; }
    .whatsnew-list dt { margin: 0 calc(16/750*100%) 4px; padding: 0; font-size: 1.2rem; color: #999; }
    .whatsnew-list dd { margin: 0 calc(16/750*100%); }
    /*.top-wn-list dt { margin-left: calc(16/750*100%); margin-right: calc(16/750*100%); }*/
    /*.top-wn-list dd { margin-left: calc(16/750*100%); margin-right: calc(16/750*100%); }*/
}

/* === Batch fixes 2026-04-08 #4 === */

/* (detail-list consolidated above) */

/* === Batch fixes 2026-04-08 #5 === */

/* 2. Mobile .sub_nav .nav1 — match JN exactly */
@media screen and (max-width:767px) {
    .sub_nav ul {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .sub_nav .nav1 {
        flex: 1 !important;
    }
    .sub_nav .nav1 a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 10px !important;
        border: none !important;
        border-radius: 20px !important;
        box-shadow: 2px 2px 6px rgba(138, 138, 123, .5) !important;
        background: transparent !important;
        color: #34508a !important;
        font-size: 1.4rem !important;
        font-weight: 400 !important;
        gap: 2px !important;
    }
}

/* 3. Mobile .btn-style-01 — match JN (text vertically centered) */
@media screen and (max-width:767px) {
    .shortcut-link .btn-style-01 {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 5px !important;
        font-size: 1.5rem !important;
        min-height: 50px;
    }
    .btn-style-01::before {
        display: none !important;
    }
}

/* === Batch fixes 2026-04-08 #6 === */

/* 3. Mobile main-img-area — match JN balance */
@media screen and (max-width:767px) {
    .main-img-area { margin-bottom: 10px !important; }
    .main-img-area .text-box { padding: 20px 0 0 !important; }
    .main-img-area .text-box .title {
        font-size: 2.4rem !important;
        margin-bottom: calc(15/750*100vw) !important;
    }
    .main-img-area .text-box p {
        font-size: 1.2rem !important;
        line-height: 1.6 !important;
        margin-bottom: calc(15/750*100vw) !important;
    }
    .shortcut-link { padding: 0 0 20px !important; }
}

/* === Fix: separate .atoz-heading from .atoz .title === */
/* Desktop: atoz-heading inherits .atoz .title base styles */
.atoz-heading {
    font-size: 2.2rem;
    font-weight: 400;
    position: relative;
    padding-left: 0;
    margin-bottom: 20px;
    clear: both;
}
.atoz-heading span {
    font-size: 1.5rem;
    padding-left: 8px;
}
/* Mobile: no extra padding on atoz-heading */
@media screen and (max-width:767px) {
    .atoz-heading {
        padding: 0 calc(16/750*100%) !important;
        font-size: 1.8rem;
    }
    /* Remove JN padding from list-item .title inside .atoz */
    .atoz .title {
        padding: 0 !important;
    }
}

/* atoz-heading gender icon size */
.atoz-heading .name_search_icon { width: 24px; height: 24px; }

/* --- Anchor offset for fixed header on mobile --- */
@media screen and (max-width:767px) {
    [id] {
        scroll-margin-top: 60px;
    }
}

/* === Batch fixes 2026-04-08 #7 === */

/* 1. Mobile atoz-heading margin-bottom */
@media screen and (max-width:767px) {
    .atoz-heading { margin-bottom: 10px !important; }
	 .name-etymology, .name-variants-section {
   	margin-bottom: 15px;
	}
}

/* 5. Unified bottom margins — already in main blocks above */

/* === A-Z background color unified === */
.atoz .atoz-list a,
.atoz.boy .atoz-list a,
.atoz.unisex .atoz-list a,
.atoz.eng .atoz-list a,
.atoz.last-name .atoz-list a {
    background-color: #4a6aaa !important;
    color: #fff !important;
}
.atoz .atoz-list a.active,
.atoz .atoz-list a:hover,
.atoz.boy .atoz-list a.active,
.atoz.boy .atoz-list a:hover,
.atoz.unisex .atoz-list a.active,
.atoz.unisex .atoz-list a:hover,
.atoz.eng .atoz-list a.active,
.atoz.eng .atoz-list a:hover,
.atoz.last-name .atoz-list a.active,
.atoz.last-name .atoz-list a:hover {
    background-color: #34508a !important;
    color: #fff !important;
}

/* --- Country card top names --- */
.country-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.country-card-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #333;
}
.country-card-link:hover .country-card-name {
    color: #34508a;
}
.country-card-top {
    margin-top: 6px;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #666;
}
.country-card-top a {
    color: #2563eb;
    text-decoration: none;
    margin-right: 2px;
}
.country-card-top a:hover {
    text-decoration: underline;
}
.country-card-top a::after {
    content: ",";
    color: #999;
    margin-right: 3px;
}
.country-card-top a:last-of-type::after {
    content: "";
}
.country-card-top-label {
    color: #999;
    font-size: 1.1rem;
    margin-right: 4px;
}
.country-card-viewall {
    font-weight: 600;
    margin-left: 2px;
}
.country-card-viewall::after {
    content: "" !important;
}