/*----------------------------------------------------
	アドセンス
----------------------------------------------------*/
ins {
	background: none;
}
.single_ads h3 {
	background-color: #404040;
	font-weight: bold;
	padding: 10px;
	margin: 10px 0 10px 0;
	color: #ffffff;
	font-size: 1.2em;
}

/* 2カラム */
.ads_2column {
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
}
.ads_2column .left {
	width: 50%;
}
.ads_2column .right {
	width: 50%;
}

/*----------------------------------------------------
	トップ　よく見られている夢
----------------------------------------------------*/

.dream_list {
	overflow: hidden;
	padding: 10px;
}
.dream_list li{
	position:relative;
	clear: both;
	overflow: hidden;
/*	margin: 0 0 30px 0;*/
	border-bottom: 1px solid #eee;
	margin: 0 0 10px 0;
	padding: 5px 0;
}
.dream_list li:after{
	content:"\f054";
	font-family: "Font Awesome 5 Free";
    font-weight: bold;
	position:absolute;
	right:10px;
	top: 50%;
	margin-top: -0.45em;
	font-size:2em;
}

.dream_list li h2{
	padding: 15px;
	border-left: 5px solid #F397AC;
	background-color: #fff5f7;
	font-weight: bold;
	margin: 0 0 10px 0;
	font-size: 1.3em;
}
.dream_list li h2.new_title {
	border-left: 5px solid #FFBE73;
	background-color: #fff5e9;
}
.dream_list li .imgcatch{
	float: left;
	margin: 0 15px 0 0;
    background-color: #eee;
    border-radius: 5px;
    padding: 5px;
    width: 80px;
}
.dream_list li .imgcatch img {
	width: 100%;
	height: 100%;
}
.dream_list li a {
	display:block;
	overflow: hidden;
}

.dream_list li .detail{
/*	margin: 10px 0 0 30px;*/
	margin: 0 25px 0 0;
	width: auto;
	position: relative;
}

.dream_list li .detail .date{
	color: #222;
	margin: 0 0 0 10px;
}
.dream_list li .detail .view{
    color: #222;
}
.dream_list li summary {
	font-size: 0.9em;
	background-color: #eeeeee;
	border-radius: 5px;
	padding: 5px;
}

/* サイド夢 */

/* .side_dream_list li{
	width:100%;
	border-bottom:1px solid #eee;
	margin:0;
	overflow: hidden;
	padding: 5px 25px 0 0;
	position: relative;
}
.side_dream_list li:after{
	content:"\f054";
	font-family: "Font Awesome 5 Free";
    font-weight: bold;
	position:absolute;
	right:10px;
	top:50%;
	margin-top: -0.45em;
	font-size:2em;
}

.side_dream_list li a {
	display: block;
	overflow: hidden;
}

.side_dream_list li .imgcatch {
	float:left;
	margin: 0 15px 0 0;
	background-color: #eeeeee;
	border-radius: 5px;
	padding: 5px;
	width: 75px;
}
.side_dream_list li .imgcatch img{
	width: 100%;
	height: 100%;
}
.side_dream_list li .detail {
	margin: 10px 0 0 0;
}
.side_dream_list li .detail a {
	display: block;
} */
.line_headline{
	font-size:1.3em;
	padding: 10px 5px;
	margin:0 0 10px;
	font-weight: bold;
	border-bottom: 2px solid #ccc;
}
.aside_fixed_js {
	position: fixed;
	margin: 30px 0 0 0;
}

/*----------------------------------------------------
	夢占いカテゴリー
----------------------------------------------------*/
.yume_post_list {
	overflow:hidden;
}
.yume_post_list li{
	width:12%;
	display: inline-block;
	margin:0 2% 20px;
	text-align:center;
}
.yume_post_list li .images{
	margin:0 0 10px;
}
.yume_post_list li .images img{
	width:100%;
	height:auto;
}
.yume_post_list li a{
	color:#000;
	text-decoration:none;
}

/*----------------------------------------------------
	検索結果一覧
----------------------------------------------------*/

.single-box{
	clear:both;
	overflow:hidden;
	margin:0 0 30px;
	padding:0 0 30px;
	border-bottom:1px solid #ddd6bd;
}
.chatch-img{
	width:100px;
	float:left;
	margin:0 30px 0 0;
}
.chatch-img img{
	width:100%;
	height:auto;
	border-radius:100%;
}
.single-box .name {
	margin:0 0 5px;
}
.single-box .name a{
	font-size:1.3em;
}

/*----------------------------------------------------
	夢single
----------------------------------------------------*/
.thecontent .eyecatch{
	margin:0 0 10px 0;
	background-color: #eee;
}
.thecontent .eyecatch .inner {
	width: 200px;
	margin:0 auto;
}
.thecontent .eyecatch .inner img {
	width: 100%;
	text-align: center;
}
.thecontent .content{
	font-size:1.2em;
	margin:0 0 20px;
}
.thecontent h2 {
	font-size: 1.3em;
	margin: 20px 0 20px 0;
	min-height:50px;
/*
	padding:10px 20px 10px 20px;
	background:#113184;
	border-radius:5px;
*/
	padding: 10px 0 0 10px;
	border-left: 4px solid #404040;
	background-color: #e9e9e9;
}
#dream_children .fixed {
	position: fixed;
	top: 0;
	margin: 0px;
	visibility: hidden;
	z-index: 1000;
}
.thecontent h2 a {
	font-weight: bold;
	color: #222;
	text-decoration: none;
}
.thecontent h2 a:hover {
	color: #ff9600;
}
.thecontent h3{
	font-size:1.2em;
	margin:30px 0 20px;
	position:relative;
	padding:0 0 10px 30px;
	border-bottom:2px solid #CDC1A2;
}
.thecontent h3:before{
	width:20px;
	height:25px;
	background:url(/wp-content/themes/yumeuranai-yakata/images/common/ico02.png) 0 0 no-repeat;
	position:absolute;
	top:0px;
	left:0;
	content:"";
	border-radius:100%;
}

.thecontent .summary .title {
	padding:15px 5px;
	font-size:1.3em;
	margin: 40px 0;
	padding:10px 0 10px 20px;
	min-height:50px;
	background:#841111;
	color:#fff;
	border-radius:5px;
}

.single_posts .category {
	margin: 0 0 10px 0;
	border-bottom: 1px solid #ccc;
	font-size: 0.8em;
	padding: 0 10px 10px 10px;
}
.single_posts .category a {
	padding: 0 5px;
	margin: 0 5px 0 0;
}
.single_posts .category span {
	color: #939393;
}

.thecontent .mokuji_back {
	margin: 20px 0 0 0;
	clear: both;
}
.thecontent .mokuji_back a {
	color: #222;
	text-decoration: none;
	font-weight: bold;
}
.thecontent .mokuji_back a:hover {
	text-decoration: underline;
}
.thecontent .view {
	margin: 0 0 10px 10px;
	padding: 5px 8px;
	background-color: #fff;
	display: inline-block;
	border: 1px solid #dcdcdd;
	font-size: 1.5em;
}
.thecontent .view span {
	font-weight: bold;
	color: #015fa0;
	margin: 0 10px 0 0;
}
.thecontent .content .info {
	clear: both;
}

/* コメント
----------------------------------------------------*/
.button_send {
    padding: 5px 10px;
    background-color: #154bc0;
    border-radius: 5px;
    color: #ffffff;
}
.button_send:hover {
    opacity: 0.7;
}

.content_bottom {
    overflow: hidden;
}

/* ボックス */
.comment_info {
    float: left;
    margin: 15px 0 0 0;
}
.comment_info a {
    border-radius: 5px;
    background-color: #098511;
    display: inline-block;
    padding: 5px 10px;
    color: #ffffff;
}
.comment_info a:hover {
    opacity: 0.7;
}

/* 各記事の入力ボックス */
.article_comment_form {
    display: none;
}
.comment_error {
    background-color: #ffdddd;
    border: 1px solid #fd1e1e;
}

/* 関連夢キーワード
----------------------------------------------------*/

ul.related_post{
	margin:0 0 30px;
	overflow:hidden;
	text-align:center;
}
ul.related_post li{
	text-align:center;
	display:inline-block;
	width:13%;
	margin:0 3% 20px 0;

}
ul.related_post li a{
	font-size:1.1em;
}
ul.related_post li img{
	border-radius:100%!important;
	box-shadow:none;
}



/*----------------------------------------------------
	星座トップ
----------------------------------------------------*/

/* タイトル */
.seiza_content .title{
/*	background:url(/wp-content/themes/yumeuranai-yakata/images/contents/hr_ribbon.png) center 80px no-repeat;*/
	overflow:hidden;
	text-align:center;
	margin: 0 0 10px 0;
}
.seiza_content .title img {
	width: 100%;
}
.seiza_content .title h1{
	text-align:center;
	font-size: 2em;
	padding: 10px;
	line-height: 30px;
}

/* 星座ランキング */
ul.seiza_rank_top{
	overflow:hidden;
	padding: 10px;
}
ul.seiza_rank_top li{
	width:29%;
	margin:0 6% 60px 0;
	float:left;
	border:none;
	clear:none;
}
ul.seiza_rank_top li:nth-of-type(3n){
	margin:0 0 30px 0;
}
ul.seiza_rank_top li:before{
	content:"\f054";
	font-family: "Font Awesome 5 Free";
    font-weight: bold;
	color:#ccc;
	float:right;
	font-size:2em;
	top:0px;
	position:relative;
}
ul.seiza_rank_top li a{
	color:#000;
	text-decoration:none;
}
ul.seiza_rank_top li a:hover{
	background:#e9e9e9;
}

ul.seiza_rank_top li .rankno{
	background:#51afc1;
	color:#fff;
	font-weight:700;
	border-radius:100%;
	width:40px;
	height:40px;
	text-align:center;
	font-size:1.1em;
	padding:11px 0 0;
	float:left;
	margin:0 20px 0 0;
}
ul.seiza_rank_top li .name{
	font-size:1.4em;
}
ul.seiza_rank_top li .image{
	text-align:center;
	height:50px;
	width:80px;
	float:left;
	margin:0 20px 0 0;
}
ul.seiza_rank_top li .image img{
	height:100%;
	width:auto;
}
ul.seiza_rank_top li .kikan{
	font-size:0.9em;
}
ul.seiza_rank_top li .rankno{
	margin:0 10px 0 0;
}

ul.seiza_rank_top li .image{
	float:none;
	clear:both;
	padding:20px 0;
	height:100px;
	width:auto;
}
ul.seiza_rank_top li .star_wrap{
	margin:0 0 10px;
}
ul.seiza_rank_top li .star_wrap img{
	height:17px;
	margin:0 0 0 10px;
}
ul.seiza_rank_top li .link{
	color:#fff;
	background:#eabc32;
	border-radius:5px;
	padding:3px;
	text-align:center;
	font-size:0.9em;
	border:2px solid #fff;
}
ul.seiza_rank_top li .link:after{
	content:"\f054";
	font-family: "Font Awesome 5 Free";
    font-weight: bold;
	color:#fff;
	float:right;
	top:0px;
	right:10px;
	position:relative;
}
ul.seiza_rank_top li .link:hover{
	background:#fff;
	color:#eabc32;
	border:2px solid #eabc32;
}
ul.seiza_rank_top li .link:hover:after{
	color:#eabc32;
}
ul.seiza_rank_top li .exp{
	margin:0 0 10px;
	font-size:0.9em;
}


/* 1~3位 */

ul.seiza_rank_top li .rankno.rank1{background:#E57373;}
ul.seiza_rank_top li .rankno.rank2{background:#E57373;}
ul.seiza_rank_top li .rankno.rank3{background:#E57373;}



/*----------------------------------------------------
	星座single
----------------------------------------------------*/
.seiza_content.detail .title{
	overflow:hidden;
	padding:30px 0 0px 0;
	text-align:center;
	background:none;
	background:url(/wp-content/themes/yumeuranai-yakata/images/common/title_bg.png) center 0 no-repeat;
}
.seiza_content.detail .title h1{
	text-align:center;
	line-height:1em;
}
.seiza_content.detail .title h2{
	text-align:center;
	font-size:2em;
	line-height:1em;
	padding:10px 0 10px;
}
.seiza_content.detail .date{
	text-align:center;
	padding:5px 0 0;
	color:#000;
}
.seiza_detail_main .eyecatch{
	margin:0 auto 30px;
	text-align:center;
	width:300px;
}
.seiza_detail_main .eyecatch img{
	width:100%;
}
/* 詳細 */
.seiza_detail_main .detail{
}
.seiza_detail_main .rank{
	font-size:1.5em;
	padding: 10px;
	margin: 10px 0;
	background-color: #ffdcdc;
	border-radius: 5px;
}
.seiza_detail_main .born{
	margin:0 0 20px;
}
.seiza_detail_main .point {
	font-size: 1.3em;
	font-weight: bold;
	padding: 10px;
	background-color: #ebebeb;
	border-radius: 5px;
}
.seiza_detail_main .rank span{
	color:#e57373;
	font-weight:700;
	font-size:1.5em;
	margin:0 5px;
}
/* メイン */
.seiza_detail_text{
	border-top:1px solid #ddd;
	padding: 10px;
}
.seiza_detail_text .luck_wrap{
	border-bottom:1px solid #ddd;
	clear:both;
	overflow:hidden;
	padding:30px 0;
}
.seiza_detail_text .luck_wrap .ttl{
	text-align:center;
	margin:0 auto;
/*	position:relative;
	z-index:1;
	float:left;*/
}
/*
.seiza_detail_text .luck_wrap .ttl05{
	background:url(/wp-content/themes/yumeuranai-yakata/images/contents/ttl_lucky.png) 0 0 no-repeat;
	width:226px;
	height:105px;
}
*/
.color_circle{
	width:105px;
	display:block;
	height:105px;
	padding:40px 0 0;
	border-radius:100%;
	text-align:center;
	color: #ffffff;
	font-weight: bold;
}
/*
.seiza_detail_text .luck_wrap .ttl:after{
    content: '';
    position: absolute;
    border-top: 10px solid #e8e8e8;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    bottom: -10px;
    left: 46%;
}

.luck_wrap .ttl01{background:#70ca9b;}
.luck_wrap .ttl02{background:#f6a0c2;}
.luck_wrap .ttl03{background:#fec34a;}
.luck_wrap .ttl04{background:#85a2e6;}
.luck_wrap .ttl05{background:#8eca70;}
.luck_wrap .ttl01:after{border-top-color:#70ca9b!important;}
.luck_wrap .ttl02:after{border-top-color:#f6a0c2!important;}
.luck_wrap .ttl03:after{border-top-color:#fec34a!important;}
.luck_wrap .ttl04:after{border-top-color:#85a2e6!important;}
.luck_wrap .ttl05:after{border-top-color:#8eca70!important;}
*/
.seiza_detail_text .luck_wrap .txt_wrap{
	background:#fff;
	position:relative;
	z-index:0;
/*	float:right;
	width:400px;
*/
	margin: 10px 0;
}
.seiza_detail_text .luck_wrap .point {
	font-weight: bold;
	padding: 5px;
	border-radius: 5px;
	background-color: #ffa0a0;
	color: #ffffff;
}

.seiza_detail_text .luck_wrap .star{
	margin: 15px 0 10px;
}
.seiza_detail_text .luck_wrap .star img{
	height:20px;
}


.thecontent .content{
	line-height:1.8em;
}
.thecontent .content p{
	margin:0 0 30px;
}




/*----------------------------------------------------
	一覧
----------------------------------------------------*/

/* .archive_list{
}
.archive_list .post{
	margin:0 0 20px;
	border:1px solid #ddd;
}
.archive_list .post .content .title {
	text-overflow: ellipsis;
	font-size:1.2em;
	border-bottom:1px solid #ddd;
	padding:10px 20px;
	background-color: #EFEFEF;
}
.archive_list .post .content .title a {
	color: #222;
	font-weight: bold;
} */
/*
.archive_list .post .title .icon,
table.cart .title .icon{
	background:#e3356f;
	color:#fff;
	font-size:0.8em;
	border-radius:5px;
	margin:0 5px 0 0;
}
*/
/* .archive_list .post .content .thecontent{
	overflow:hidden;
	padding: 10px;
}
.archive_list .post .content .thecontent .imgcatch {
	margin: 0 20px 0 0 ;
	float:left;
	width:100px;
} 
.archive_list .post .content .thecontent .imgcatch img {
	width:100%;
	height:auto;
}
.archive_list .post .content .thecontent .imgcatch img a {
	overflow: hidden;
}
.archive_list .post .content .thecontent a.txt:hover {
	text-decoration: underline:
} */
/*
.archive_list .post .main_image{
	overflow:hidden;
}

.archive_list .post .eyecatch{
	width:20%;
	float:left;
}
.archive_list .post .eyecatch img{
	width:100%;
	height:auto;
}
.archive_list .post .message{
	width:78%;
	float:right;
	line-height:1.5em;
}

*/

/*----------------------------------------------------
	singleページ
----------------------------------------------------*/
/*
ul.single_menu{
	display: flex;
	margin:0 0 10px;
}
ul.single_menu li{
	width:30%;
	flex-grow: 1;
	background:#ECECEC;
}

ul.single_menu li a{
    display: block;
	text-align:center;
	padding:10px 0;
	font-size:1.1em;
	font-weight:700;
	text-decoration:none;
	line-height:1.2em;
}
ul.single_menu li a i{
	font-size:1.2em;
	margin:0 10px 0 0;
}

.detail_content .eyecatch{
	width:300px;
	float:left;
}
.detail_content .eyecatch img{
	width:100%;
	height:auto;
}
.detail_content h1{
	margin:0 0 10px;
}
.detail_main_right{
	width:590px;
	float:right;
}

.single_bottom_siryo{
	padding:10px 0;
	width:49%;
	float:right;
}
*/



/*----------------------------------------------------
	次へ前へ 
----------------------------------------------------*/


.nav-below{
	border-top:1px solid #ddd;
	clear:both;
	overflow:hidden;
	margin:50px 0 ;
	font-size:0.9em;
}
.nav-below i{
	color:#000;
	font-size:2.5em;
	display:block;
	padding:12px 0 0;
}
.nav-below a{
	width:85%;
	height:60px;
	display:table;
	color:#000;
}
.nav-below a span{
    display: table-cell;
    height: 60px;
    vertical-align: middle;
	font-size:1.2em;
}
.nav-below .current{
	background:#0085e1;
	color:#fff;
}
.nav-below a:hover{
	opacity:0.8;
}
.nav-below .link{
	display:block;
	width:50%;
	line-height:1.5em;
}

.nav-previous{
	border-right:1px solid #ddd;
	float:left;
	margin:0 -1px 0 0;
}
.nav-previous i,.nav-previous a{float:left;}
.nav-previous a{
	padding:0 0 0 20px;
}
.nav-next{
	float:right;
	text-align:right;
}
.nav-next a{
	text-align:right;
	padding:0 20px 0 0;
}
.nav-next a span{
	text-align:right;
	width:100%;
}
.nav-next i,.nav-next a{float:right;}
/*----------------------------------------------------
	その他
----------------------------------------------------*/
/*検索項目の「もっと見る」*/
.search_more {
}
.search_more_hidden {
	display: none !important;
}



/*

	これからは下記は木内追加したので適当に調整宜しく。
	ちなみに、口コミ関連のCSSです
*/
/*--------------------------------------
  コメントポップアップ
--------------------------------------*/

#new_review_popbox{
	position:fixed;
	bottom:0;
	right:0;
	z-index:200;
	background:#fff;
	line-height:1.5em;
	padding:5px;
	border-radius:5px 5px 0 0;
	font-weight:700;
	border:3px solid #50C6F8;
	color:#000;
}

/*--------------------------------------
  コミュニティーsingleページ
--------------------------------------*/
#topic_detail_wrap{
	margin:0 0 50px;
}

.ress_wrap{
	overflow:hidden;
	background:#fff;
	border-bottom:1px solid #e4e4e4;
	padding:15px 15px 5px;
}
.ress_wrap .head{
	font-size:0.8em;
	color:#999;
	margin:0 0 10px;
	line-height: 1.2em;
}
.ress_wrap .head .no{
	border-radius:5px 0 0 5px;
	font-weight:700;
}
.ress_wrap .head .name{
	margin:0;
	font-weight:700;
}
.ress_wrap .head .hensin{
	text-align:center;
	margin:0 5px 0 5px;
}

.ress_wrap .content{
	font-size:1.3em;
	font-weight: bold;
    line-height: 1em;
    margin: 0 0 10px 0;
}
.ress_wrap .content img{
	max-width:100%;
	max-height:300px;
}
.ress_wrap .content a:hover{
	text-decoration:none;
}

/*記事の使用語句のツールチップ*/
.ress_wrap_dream {
	color: #222;
}
.ress_wrap_dream p.title {
	font-weight: bold;
	font-size: 1.2em;
	padding: 5px;
	background-color: #ffa8a8;
}
.ress_wrap_dream p.content {
	font-size: 1em;
	color: #999;
	margin: 10px 0;
}

/*--------------------------------------
  プラスマイナス
--------------------------------------*/
.review_state{
	float:right;
}

/* プラス */

.review_state .btn_plus{
	float:left;
	font-weight:700;
}
.review_state .btn_plus,
.review_state .btn_plus i{
	color:#feae01;
}
.review_state .btn_plus i{
	text-shadow:0px 2px 0 #e8910f;
}
.progress_state .plus {
	background-color: #feae01;
	position: absolute;
	left: 0px;
	height: 15px;
	border-radius:15px 0 0 15px;
}
.progress_state .plus.point100,
.progress_state .minus.point100{
	border-radius:15px;
}

/* バー */
.review_state .progress_state{
	height: 15px;
	position: relative;
	overflow: hidden;
	float:left;
	margin:22px 10px 0;
}

/* マイナス */
.review_state .btn_minus{
	float:left;
}
.review_state .btn_minus,
.review_state .btn_minus i{
	color:#D6D6D6;
}
.review_state .btn_minus i{
	text-shadow:0px 2px 0 #a09f9f;
}
.progress_state .minus {
	background-color: #D6D6D6;
	position: absolute;
	height: 15px;
	right: 0px;
	border-radius: 0 15px 15px 0 ;
}

/* プラスマイナスアイコン */
.review_state .btn_plus i,
.review_state .btn_minus i{
	top:-7px;
	position:relative;
	font-size:1.7em;
}
/* 数字 */
.point_plus, .point_minus{
	font-weight:700;
	margin: 0px !important;
}

/* 出典 */
.link_src {
	display:block;
	font-size:0.8em;
}

/*--------------------------------------
  コミュニティー
--------------------------------------*/
/*メニュー*/
.community_menu {
	margin: 0 0 20px 0;
}
.community_menu ul {
	clear: both;
	overflow: hidden;
}
.community_menu li {
	float: left;
	margin: 0 5px 0 0;
}
.community_menu li a {
	display: block;
	text-align: center;
	border-radius: 3px;
	background-color: #dedede;
	padding: 10px;
	color: #222;
	font-weight: bold;
	text-decoration: none;
}
.community_menu li a:hover {
	opacity: 0.5;
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
	-khtml-opacity: 0.5;
	-moz-opacity: 0.5;
}
.community_menu li.on a {
	background-color: #9ac55c;
}


/*----------------------------------------------------
	記事中
----------------------------------------------------*/
/*目次*/
.info_box {
	border: 1px solid #ccc;
	margin: 20px 0 0 0;
}
.info_box p {
	background:#404040;
	color: #ffffff;
	margin: 0 0 10px 0 !important;
	padding: 0 10px;
	height: 30px;
	line-height: 30px;
}
.info_box ul {
	padding: 10px;
}
.info_box li span {
	margin: 0 10px 0 0;
	font-weight: bold;
}

/*夢占いのワード*/
.info_box .dream_word {
	overflow: hidden;
}
.info_box .dream_word li {
	float: left;
	margin: 0 10px 5px 0;
}
.info_box .dream_word li i {
    margin: 0 0 0 5px;
    position: relative;
    top: -3px;
}
.info_box .view_child {
	color: #ccc;
	font-size: 0.8em;
	margin: 0 0 0 3px;
}
/*記事中の夢占いワード*/
.content .word_link {
	/* background: linear-gradient(transparent 60%, #a8c0fb 60%);
	font-weight: bold; */
	margin: 0 5px;
}

.content .word_link:after {
	content:"\f35d";
	font-family: "Font Awesome 5 Free";
    font-weight: bold;
	margin: 0 0 0 5px;
}

/*強調文字*/
.content strong {
	background: linear-gradient(transparent 60%, #ffff66 60%);
	font-weight: bold;
}

/*----------------------------------------------------
	サイトマップ
----------------------------------------------------*/
#sitemap i {
	background-color: #113184;
	border-radius: 3px;
	color: #ffffff;
	padding: 3px;
	margin: 5px 10px;
}
#sitemap li {
	margin: 0 0 5px 0;
}
#sitemap .sitemap_item1, #sitemap .sitemap_item2 {
	background-color: #E9E9E9;
}

#sitemap .sitemap_child {
	background-color: #ffffff;
	padding: 10px 0 0 0;
}
#sitemap .sitemap_child li {
	margin: 0 0 0 20px;
}

/*----------------------------------------------------
	タロットカード
----------------------------------------------------*/
.talot_title {
	padding: 10px;
	background-color: #2a5a4e;
	color: #ffffff;
	margin: 0 0 10px 0;
	font-size: 1.2em;
}

/*一覧*/
.talot_cart_list {
	overflow: hidden;
}
.talot_cart_list li {
	float: left;
	margin: 0 10px 0 0;
	padding: 5px;
	width: 150px;
}
.talot_cart_list li a {
	overflow: hidden;
}
.talot_cart_list li img {
	width: 100%;
}
.talot_cart_list li span {
	display: block;
	text-align: center;
	margin: 10px 0;
	font-weight: bold;
}

/*----------------------------------------------------
	マイページ
----------------------------------------------------*/
/*見出し*/
h1.mypage_title {
	font-weight: bold;
	font-size: 1.5em;
	padding: 10px;
	margin: 0 0 10px 0;
}
h2.mypage_title {
	font-weight: bold;
	border-left: 5px solid #1220a9;
	padding: 5px 5px 5px 10px;
	background-color: #eaecff;
	margin: 0 0 10px 0;
	color: #2b2b2b;
}

/*カレンダーのナビ*/
.calendar_nav {
	display: -webkit-flex; /* Safari */
	display: flex;
    flex-wrap:wrap;
	justify-content:space-between;
/*
	margin: 10px 0;
	padding: 10px 0;
*/
	overflow: hidden;
}
.calendar_nav .list {
	width: 33%;
	text-align: center;
	background-color: #4F616B;
}
.calendar_nav .list:nth-child(n + 2) a {
	font-weight: bold;
	padding: 6px 0 0 0;
}
.calendar_nav .list a {
	color: #ffffff;
}
.calendar_nav .list a i {
	font-size: 2em;
}
/*カレンダー*/
#calendar_box .base_time {
    text-align: center;
    font-size: 32px;
    margin: 10px 0 10px 0;
    font-weight: bold;
}
#calendar_box table {
	width: 100%;
	border-spacing: 0;
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
	margin-bottom: 0;
	line-height: 1.5;
}
#calendar_box table th {
    color: #fff;
    background: #4F616B;
    vertical-align: top;
    padding-top: 7px;
    padding-bottom: 7px;
	text-align: center;
	padding: 5px;
}
#calendar_box table td {
    width: 14.3%;
    height: 100px;
    vertical-align: top;
	padding: 2px;
    border: none;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
#calendar_box table td.sunday {
	color: #CE2727;
	background-color: #FCF3F3;
}
#calendar_box table td.saturday {
	color: #54AFC8;
	background-color: #F5FBFE;
}
#calendar_box table td .content {
	font-size: 0.9em;
}
#calendar_box table td .content ul {
	margin: 3px;
}
#calendar_box table td .content ul li {
	margin: 0 0 10px 0;
/*	background-color: #86c2ff;*/
	border-bottom: 1px dotted #222;
	padding: 1px;
}
#calendar_box table td .content ul li .number {
	color: #e60c0c;
}
#calendar_box table td .head span.day {
    font-style: normal;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-weight: bold;
    font-size: 16px;
    display: block;
    padding: 0 3px;
    line-height: 1.2;
}
#calendar_box table td .head .day .inner {
	vertical-align: middle;
	font-size: 0.8em;
}
/*#calendar_box table td .head .day .memo {*/
.memo {
	color: #4653d2;
	margin: 0 0 0 4px;
	font-size: 1.1em;
}
#calendar_box .calendar .content .memo_waku {
	background-color: #dadada;
	padding: 2px;
	word-break:break-all;
}


/*----------------------------------------------------
	ツイッター検索
----------------------------------------------------*/
.search_result_twitter {
	margin: 20px 0;
}
.search_result_twitter li.list {
	border-top: 1px solid #e6ecf0;
	border-bottom: 1px solid #e6ecf0;
	padding: 10px;
}
.search_result_twitter li .content {
    margin: 0 0 0 58px;
}
/*ヘッダー*/
.search_result_twitter li .content .header {
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}
.search_result_twitter li .content .header .avatar {
    float: left;
    margin-top: 3px;
    margin-left: -58px;
    position: absolute;
	width: 48px;
    height: 48px;
    border-radius: 50%;
}
.search_result_twitter li .content .header .username {
    font-size: 14px;
    color: #657786;
	margin: 0 0 0 10px;
}
.search_result_twitter li .content .header .time {
    color: #657786;
	margin: 0 0 0 10px;
}
/*コンテンツ*/
.search_result_twitter li .content .container {
	margin: 0 0 10px 0;
}
.search_result_twitter li .content .container p {
	font-size: 14px;
	line-height: 20px;
}
.search_result_twitter li .content .container p .link {
	display: block;
	text-decoration: underline;
}
.search_result_twitter li .content .container p .photo {
	width: 100%;
	border-radius: 5px;
}
/*フッター*/
.search_result_twitter .footer ul {
	overflow: hidden;
}
.search_result_twitter .footer ul li {
	float: left;
	margin: 0 30px 0 0;
}
.search_result_twitter .footer ul li a {
	color: #ccc;
	font-size: 18px;
}


/*----------------------------------------------------
	雑談
----------------------------------------------------*/
/*投稿のボタン*/
.btn_send_review {
	margin: 10px 0 10px 0;
}
.btn_send_review a {
	text-align: center;
	margin: 0 auto;
	display: block;
	border-radius: 5px;
	width: 200px;
	font-size: 1.3em;
	font-weight: bold;
	color: #222;
	text-decoration: none;
	padding: 10px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffb76b+0,ffa73d+50,ff7c00+51,ff7f04+100;Orange+Gloss */
	background: #ffb76b; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); /* IE6-9 */
}
.btn_send_review a:hover {
	color: #ffffff;
}


/*----------------------------------------------------
	夢占い記事詳細ページ - モダンデザイン
----------------------------------------------------*/

/* 記事詳細ページのスタイル */
.dream-article {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 記事ヘッダー */
.article-header {
	margin-bottom: 30px;
	padding-bottom: 20px;
	border-bottom: 2px solid #f0f0f0;
}

.article-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 15px;
	font-size: 0.9em;
	color: #666;
}

.article-meta > * {
	display: flex;
	align-items: center;
	gap: 5px;
}

.article-title {
	font-size: 2.2em;
	font-weight: 700;
	color: #333;
	line-height: 1.3;
	margin-bottom: 15px;
}

.article-categories {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.95em;
	color: #667eea;
}

.article-categories a {
	color: #667eea;
	text-decoration: none;
	padding: 4px 8px;
	background: rgba(102, 126, 234, 0.1);
	border-radius: 4px;
	transition: all 0.3s ease;
}

.article-categories a:hover {
	background: rgba(102, 126, 234, 0.2);
	transform: translateY(-1px);
}

/* アイキャッチ画像 */
.article-eyecatch {
	margin-bottom: 30px;
}
.eyecatch-figure {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.eyecatch-figure a span {
	display: block;
	text-align: center;
}
.eyecatch-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
	color: white;
	padding: 20px 15px 15px;
	font-size: 0.9em;
}

/* 記事本文 */
.article-body {
	margin-bottom: 40px;
}

.article-introduction {
	font-size: 1.1em;
	line-height: 1.8;
	color: #333;
}

/* 子記事 */
.dream-children {
	margin-top: 40px;
}

.children-title {
	font-size: 1.8em;
	font-weight: 600;
	color: #333;
	margin-bottom: 30px;
	padding-bottom: 10px;
	border-bottom: 3px solid #667eea;
}

.child-article {
	margin-bottom: 40px;
	padding: 25px;
	background: #f8f9fa;
	border-radius: 12px;
	border-left: 4px solid #667eea;
	transition: all 0.3s ease;
}

.child-article:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.child-header {
	margin-bottom: 20px;
}

.child-title {
	font-size: 1.4em;
	font-weight: 600;
	color: #333;
	display: flex;
	align-items: center;
	gap: 10px;
}

.child-number {
	background: #667eea;
	color: white;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9em;
	font-weight: 700;
}

.child-content {
	font-size: 1.05em;
	line-height: 1.7;
	color: #444;
	margin-bottom: 25px;
}

/* レビューシステム */
.review-system {
	margin-bottom: 20px;
}

.review-buttons {
	display: flex;
	align-items: center;
	gap: 15px;
}

.review-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 15px;
	border: none;
	border-radius: 8px;
	background: #f8f9fa;
	color: #666;
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: 0.95em;
}

.review-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.review-plus:hover {
	background: #d4edda;
	color: #155724;
}

.review-minus:hover {
	background: #f8d7da;
	color: #721c24;
}

/* クリック時のアニメーション効果 */
.review-btn.clicked {
	transform: scale(0.95);
	transition: transform 0.1s ease;
}

.review-btn.clicked.review-plus {
	background: #d4edda;
	color: #155724;
}

.review-btn.clicked.review-minus {
	background: #f8d7da;
	color: #721c24;
}

.review-progress {
	flex: 1;
	max-width: 200px;
}

.progress-bar {
	height: 8px;
	background: #e9ecef;
	border-radius: 4px;
	overflow: hidden;
	display: flex;
}

.progress-plus {
	height: 100%;
	background: #28a745;
	transition: width 0.3s ease;
}

.progress-minus {
	height: 100%;
	background: #dc3545;
	transition: width 0.3s ease;
}

/* コメントシステム */
.comment-system {
	margin-bottom: 15px;
}

.comment-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border: none;
	border-radius: 6px;
	background: #e3f2fd;
	color: #1976d2;
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: 0.9em;
}

.comment-toggle:hover {
	background: #bbdefb;
	transform: translateY(-1px);
}

/* コメントフォーム */
.comment-form {
	margin: 20px 0;
	padding: 20px;
	background: #f8f9fa;
	border-radius: 8px;
}

.comment-form textarea {
	width: 100%;
	min-height: 100px;
	padding: 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	resize: vertical;
	font-family: inherit;
	font-size: 0.95em;
}

.comment-actions {
	display: flex;
	gap: 10px;
	margin-top: 15px;
}

.btn {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 10px 15px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.9em;
	transition: all 0.3s ease;
}

.btn-primary {
	background: #667eea;
	color: white;
}

.btn-primary:hover {
	background: #5a67d8;
	transform: translateY(-1px);
}

.btn-secondary {
	background: #6c757d;
	color: white;
}

.btn-secondary:hover {
	background: #5a6268;
	transform: translateY(-1px);
}

/* 目次への戻りリンク */
.mokuji-back {
	margin-top: 20px;
	text-align: center;
}

.back-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 15px;
	color: #667eea;
	text-decoration: none;
	border-radius: 6px;
	transition: all 0.3s ease;
	font-size: 0.9em;
}

.back-link:hover {
	background: rgba(102, 126, 234, 0.1);
	transform: translateY(-1px);
}

/* 目次と関連ワードのスタイル */
.mokuji-container,
.related-words {
	margin: 30px 0;
	padding: 20px;
	background: #f8f9fa;
	border-radius: 12px;
	border-left: 4px solid #667eea;
}

.mokuji-title,
.related-title {
	font-size: 1.3em;
	font-weight: 600;
	color: #333;
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.mokuji-list,
.word-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mokuji-item,
.word-item {
	padding: 8px 0;
	border-bottom: 1px solid #e9ecef;
}

.mokuji-item:last-child,
.word-item:last-child {
	border-bottom: none;
}

.mokuji-number {
	display: inline-block;
	width: 25px;
	font-weight: 600;
	color: #667eea;
}

.mokuji-link,
.word-item a {
	color: #333;
	text-decoration: none;
	transition: color 0.3s ease;
}

.mokuji-link:hover,
.word-item a:hover {
	color: #667eea;
}

.mokuji-views,
.word-views {
	font-size: 0.85em;
	color: #666;
	margin-left: 10px;
}

.word-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.word-item a {
	display: flex;
	align-items: center;
	gap: 5px;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
	.dream-article {
		padding: 15px;
		margin: 10px;
	}
	
	.article-title {
		font-size: 1.8em;
	}
	
	.article-meta {
		flex-direction: column;
		gap: 10px;
	}
	
	.child-article {
		padding: 20px;
	}
	
	.review-buttons {
		flex-direction: column;
		gap: 10px;
	}
	
	.review-progress {
		max-width: none;
	}
	
	.comment-actions {
		flex-direction: column;
	}
	
	.mokuji-container,
	.related-words {
		padding: 15px;
	}
	
	.word-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
	}
}

@media (max-width: 480px) {
	.article-title {
		font-size: 1.5em;
	}
	
	.child-title {
		font-size: 1.2em;
	}
	
	.child-article {
		padding: 15px;
	}
}

/*----------------------------------------------------
	記事内のstrongタグ強調スタイル
----------------------------------------------------*/

/* 記事本文内のstrongタグ */
.article-introduction strong,
.child-content strong,
.article-body strong {
	font-weight: 700;
	color: #d63384;
	background: linear-gradient(135deg, rgba(214, 51, 132, 0.1) 0%, rgba(214, 51, 132, 0.05) 100%);
	padding: 2px 6px;
	border-radius: 4px;
	/* border-left: 3px solid #d63384; */
	position: relative;
	transition: all 0.3s ease;
}

.article-introduction strong:hover,
.child-content strong:hover,
.article-body strong:hover {
	background: linear-gradient(135deg, rgba(214, 51, 132, 0.15) 0%, rgba(214, 51, 132, 0.1) 100%);
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(214, 51, 132, 0.2);
}

/* 子記事内のstrongタグ */
.child-article strong {
	font-weight: 700;
	color: #667eea;
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(102, 126, 234, 0.05) 100%);
	padding: 2px 6px;
	border-radius: 4px;
	/* border-left: 3px solid #667eea; */
	position: relative;
	transition: all 0.3s ease;
}

.child-article strong:hover {
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(102, 126, 234, 0.1) 100%);
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

/* 見出し内のstrongタグ */
.article-title strong,
.child-title strong,
.children-title strong {
	font-weight: 800;
	color: #dc3545;
	background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.05) 100%);
	padding: 3px 8px;
	border-radius: 6px;
	/* border-left: 4px solid #dc3545; */
	position: relative;
	transition: all 0.3s ease;
}

.article-title strong:hover,
.child-title strong:hover,
.children-title strong:hover {
	background: linear-gradient(135deg, rgba(220, 53, 69, 0.15) 0%, rgba(220, 53, 69, 0.1) 100%);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* リスト内のstrongタグ */
.article-introduction ul strong,
.article-introduction ol strong,
.child-content ul strong,
.child-content ol strong {
	font-weight: 700;
	color: #fd7e14;
	background: linear-gradient(135deg, rgba(253, 126, 20, 0.1) 0%, rgba(253, 126, 20, 0.05) 100%);
	padding: 1px 4px;
	border-radius: 3px;
	/* border-left: 2px solid #fd7e14; */
	transition: all 0.3s ease;
}

.article-introduction ul strong:hover,
.article-introduction ol strong:hover,
.child-content ul strong:hover,
.child-content ol strong:hover {
	background: linear-gradient(135deg, rgba(253, 126, 20, 0.15) 0%, rgba(253, 126, 20, 0.1) 100%);
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(253, 126, 20, 0.2);
}

/* 引用内のstrongタグ */
.article-introduction blockquote strong,
.child-content blockquote strong {
	font-weight: 700;
	color: #6f42c1;
	background: linear-gradient(135deg, rgba(111, 66, 193, 0.1) 0%, rgba(111, 66, 193, 0.05) 100%);
	padding: 2px 6px;
	border-radius: 4px;
	/* border-left: 3px solid #6f42c1; */
	transition: all 0.3s ease;
}

.article-introduction blockquote strong:hover,
.child-content blockquote strong:hover {
	background: linear-gradient(135deg, rgba(111, 66, 193, 0.15) 0%, rgba(111, 66, 193, 0.1) 100%);
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(111, 66, 193, 0.2);
}

/* テーブル内のstrongタグ */
.article-introduction table strong,
.child-content table strong {
	font-weight: 700;
	color: #198754;
	background: linear-gradient(135deg, rgba(25, 135, 84, 0.1) 0%, rgba(25, 135, 84, 0.05) 100%);
	padding: 1px 4px;
	border-radius: 3px;
	/* border-left: 2px solid #198754; */
	transition: all 0.3s ease;
}

.article-introduction table strong:hover,
.child-content table strong:hover {
	background: linear-gradient(135deg, rgba(25, 135, 84, 0.15) 0%, rgba(25, 135, 84, 0.1) 100%);
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(25, 135, 84, 0.2);
}

/* アニメーション効果 */
@keyframes strongPulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.02);
	}
	100% {
		transform: scale(1);
	}
}

/* 重要なstrongタグにアニメーション追加 */
.article-introduction strong.important,
.child-content strong.important {
	animation: strongPulse 2s ease-in-out infinite;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
	.article-introduction strong,
	.child-content strong,
	.article-body strong {
		padding: 1px 4px;
		font-size: 0.95em;
	}
	
	.article-title strong,
	.child-title strong,
	.children-title strong {
		padding: 2px 6px;
		font-size: 0.9em;
	}
}

@media (max-width: 480px) {
	.article-introduction strong,
	.child-content strong,
	.article-body strong {
		padding: 1px 3px;
		font-size: 0.9em;
	}
	
	.article-title strong,
	.child-title strong,
	.children-title strong {
		padding: 1px 4px;
		font-size: 0.85em;
	}
}

/*----------------------------------------------------
	子記事専用スタイル
----------------------------------------------------*/

/* 子記事専用スタイル */
.dream-child-article {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 現在の記事の目次項目 */
.mokuji-item.current {
	background: rgba(102, 126, 234, 0.1);
	border-radius: 6px;
	padding: 8px 12px;
	margin: 5px 0;
}

.mokuji-current {
	color: #667eea;
	font-weight: 600;
}

/* 親記事への戻りリンク */
.parent-article-link {
	margin: 40px 0;
	padding: 25px;
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	border-radius: 12px;
	border-left: 4px solid #667eea;
}

.parent-title {
	font-size: 1.3em;
	font-weight: 600;
	color: #333;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.parent-article {
	background: white;
	border-radius: 8px;
	padding: 15px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.parent-article:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.parent-link {
	display: flex;
	align-items: center;
	gap: 15px;
	text-decoration: none;
	color: inherit;
}

.parent-thumbnail {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.parent-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.parent-info {
	flex: 1;
}

.parent-title-text {
	font-size: 1.1em;
	font-weight: 600;
	color: #333;
	margin-bottom: 5px;
	line-height: 1.3;
}

.parent-views {
	font-size: 0.9em;
	color: #666;
}

/* 子記事のレスポンシブ対応 */
@media (max-width: 768px) {
	.dream-child-article {
		padding: 15px;
		margin: 10px;
	}
	
	.parent-article-link {
		padding: 20px;
	}
	
	.parent-link {
		flex-direction: column;
		text-align: center;
		gap: 10px;
	}
	
	.parent-thumbnail {
		width: 60px;
		height: 60px;
	}
}

@media (max-width: 480px) {
	.parent-article-link {
		padding: 15px;
	}
	
	.parent-title-text {
		font-size: 1em;
	}
}

/* 星座占いページのスタイル */
.seiza-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* ページヘッダー */
.seiza-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 40px 30px;
    margin-bottom: 40px;
    text-align: center;
    color: white;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

.seiza-header-content {
    max-width: 600px;
    margin: 0 auto;
}

.seiza-title {
    font-size: 2.5em;
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.seiza-title i {
    font-size: 0.8em;
    color: #ffd700;
}

.seiza-date {
    font-size: 1.2em;
    margin-bottom: 10px;
    opacity: 0.9;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.seiza-subtitle {
    font-size: 1.1em;
    opacity: 0.8;
    font-weight: 500;
}

/* ランキングセクション */
.seiza-ranking {
    margin-bottom: 40px;
}

.seiza-container {
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.ranking-title {
    font-size: 1.8em;
    font-weight: 600;
    color: #333;
    margin-bottom: 30px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.ranking-title i {
    color: #ffd700;
}

/* 星座リスト */
.seiza-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

.seiza-item {
    background: #f8f9fa;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.seiza-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: #667eea;
}

/* ランキング別の色分け */
.seiza-item.rank-1 {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border-color: #ffd700;
}

.seiza-item.rank-2 {
    background: linear-gradient(135deg, #c0c0c0 0%, #e5e5e5 100%);
    border-color: #c0c0c0;
}

.seiza-item.rank-3 {
    background: linear-gradient(135deg, #cd7f32 0%, #daa520 100%);
    border-color: #cd7f32;
}

/* 星座リンク */
.seiza-link {
    display: block;
    padding: 25px;
    text-decoration: none;
    color: inherit;
    position: relative;
}

/* ランキング番号 */
.seiza-rank {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    align-items: center;
    gap: 2px;
}

.rank-number {
    font-size: 1.5em;
    font-weight: 700;
    color: #333;
}

.rank-text {
    font-size: 0.9em;
    font-weight: 600;
    color: #666;
}

/* 星座情報 */
.seiza-info {
    margin-bottom: 15px;
}

.seiza-name {
    font-size: 1.4em;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.seiza-period {
    font-size: 0.9em;
    color: #666;
    margin: 0;
}

/* 星座画像 */
.seiza-image {
    text-align: center;
    margin-bottom: 15px;
}

.seiza-image img {
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.seiza-item:hover .seiza-image img {
    transform: scale(1.1);
}

/* スコア情報 */
.seiza-score {
    margin-bottom: 15px;
}

.total-score {
    text-align: center;
    margin-bottom: 10px;
}

.score-number {
    font-size: 1.8em;
    font-weight: 700;
    color: #667eea;
}

.score-unit {
    font-size: 1em;
    color: #666;
    margin-left: 2px;
}

/* 星評価 */
.star-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.star-label {
    font-size: 0.9em;
    color: #666;
    font-weight: 500;
}

.stars {
    display: flex;
    gap: 2px;
}

.stars .fa-star {
    font-size: 0.9em;
}

.star-filled {
    color: #ffd700;
}

.star-empty {
    color: #e0e0e0;
}

/* 運勢説明 */
.seiza-description {
    margin-bottom: 15px;
}

.seiza-luck {
    font-size: 0.95em;
    line-height: 1.6;
    color: #444;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 詳細リンク */
.seiza-detail-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.seiza-item:hover .seiza-detail-link {
    background: rgba(102, 126, 234, 0.2);
}

.detail-text {
    font-size: 0.9em;
    font-weight: 600;
    color: #667eea;
}

.seiza-detail-link i {
    font-size: 0.8em;
    color: #667eea;
    transition: transform 0.3s ease;
}

.seiza-item:hover .seiza-detail-link i {
    transform: translateX(3px);
}

/* 星座占い詳細ページのスタイル */
.seiza-detail-main {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

/* エラーページ */
.seiza-error {
    text-align: center;
    padding: 60px 20px;
}

.error-content {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.error-content i {
    font-size: 3em;
    color: #ff6b6b;
    margin-bottom: 20px;
}

.error-content h1 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 15px;
}

.error-content p {
    color: #666;
    margin-bottom: 30px;
}

/* ページヘッダー */
.seiza-detail-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 40px 30px;
    margin-bottom: 40px;
    text-align: center;
    color: white;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

.seiza-detail-header-content {
    max-width: 600px;
    margin: 0 auto;
}

.seiza-detail-title {
    font-size: 2em;
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.seiza-detail-title i {
    font-size: 0.8em;
    color: #ffd700;
}

.seiza-name-title {
    font-size: 1.8em;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffd700;
}

.seiza-detail-date {
    font-size: 1.1em;
    opacity: 0.9;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* メインコンテンツ */
.seiza-detail-content {
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 星座概要 */
.seiza-overview {
    margin-bottom: 40px;
}

.seiza-overview-card {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 30px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    border-left: 4px solid #667eea;
}

.seiza-image-large img {
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.seiza-overview-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.seiza-score-large {
    text-align: center;
}

.score-number-large {
    font-size: 3em;
    font-weight: 700;
    color: #667eea;
}

.score-unit-large {
    font-size: 1.2em;
    color: #666;
    margin-left: 5px;
}

.seiza-ranking-info,
.seiza-period-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ranking-label,
.period-label {
    font-size: 0.9em;
    color: #666;
    font-weight: 500;
    min-width: 80px;
}

.ranking-number {
    font-size: 1.2em;
    font-weight: 600;
    color: #333;
}

.period-text {
    font-size: 1em;
    color: #333;
}

/* 運勢詳細 */
.seiza-fortunes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.fortune-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 25px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.fortune-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: #667eea;
}

.fortune-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e9ecef;
}

.fortune-title {
    font-size: 1.3em;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.fortune-title i {
    color: #667eea;
}

.fortune-score {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fortune-point {
    font-size: 1.1em;
    font-weight: 600;
    color: #667eea;
}

.fortune-stars {
    display: flex;
    gap: 2px;
}

.fortune-stars .fa-star {
    font-size: 0.9em;
}

.fortune-content {
    margin-top: 15px;
}

.fortune-text {
    font-size: 1em;
    line-height: 1.7;
    color: #444;
    margin: 0;
}

/* ラッキーカラー */
.lucky-color-display {
    display: flex;
    align-items: center;
    gap: 15px;
}

.color-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

/* 戻りリンク */
.seiza-back-link {
    text-align: center;
    margin-top: 30px;
}

.back-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 25px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.back-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    color: white;
    text-decoration: none;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
    .seiza-main {
        padding: 15px;
    }
    
    .seiza-header {
        padding: 30px 20px;
        margin-bottom: 30px;
    }
    
    .seiza-title {
        font-size: 2em;
    }
    
    .seiza-container {
        padding: 20px;
    }
    
    .seiza-list {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .seiza-link {
        padding: 20px;
    }
    
    .seiza-name {
        font-size: 1.2em;
    }
    
    .score-number {
        font-size: 1.5em;
    }
    
    .seiza-detail-main {
        padding: 15px;
    }
    
    .seiza-detail-header {
        padding: 30px 20px;
        margin-bottom: 30px;
    }
    
    .seiza-detail-title {
        font-size: 1.8em;
    }
    
    .seiza-name-title {
        font-size: 1.5em;
    }
    
    .seiza-detail-content {
        padding: 20px;
    }
    
    .seiza-overview-card {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding: 20px;
    }
    
    .seiza-fortunes {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .fortune-card {
        padding: 20px;
    }
    
    .fortune-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .score-number-large {
        font-size: 2.5em;
    }
}

@media (max-width: 480px) {
    .seiza-header {
        padding: 25px 15px;
    }
    
    .seiza-title {
        font-size: 1.8em;
        flex-direction: column;
        gap: 10px;
    }
    
    .seiza-container {
        padding: 15px;
    }
    
    .seiza-link {
        padding: 15px;
    }
    
    .seiza-image img {
        width: 60px;
        height: 60px;
    }
    
    .seiza-detail-header {
        padding: 25px 15px;
    }
    
    .seiza-detail-title {
        font-size: 1.5em;
        flex-direction: column;
        gap: 10px;
    }
    
    .seiza-detail-content {
        padding: 15px;
    }
    
    .seiza-overview-card {
        padding: 15px;
    }
    
    .fortune-card {
        padding: 15px;
    }
    
    .lucky-color-display {
        flex-direction: column;
        gap: 10px;
    }
}

/* サイドバーの基本スタイル */
.modern-sidebar {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* サイドバーセクション */
.sidebar-section {
    margin-bottom: 30px;
}

/* サイドバーヘッダー */
.sidebar-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
    color: white;
}

.sidebar-title {
    font-size: 1.1em;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i {
    font-size: 0.9em;
    color: #ffd700;
}

/* サイドバーコンテンツ */
.sidebar-content {
    padding: 20px;
}

/* 夢リスト - 既存スタイルを上書き */
.side_dream_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.side_dream_list li {
    margin-bottom: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
    position: relative;
    padding: 0;
}

.side_dream_list li:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-color: #667eea;
}

.side_dream_list li:last-child {
    margin-bottom: 0;
}

.side_dream_list li:after {
    display: none;
}

.side_dream_list li a {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 15px;
    position: relative;
}

.side_dream_list li .imgcatch {
    float: none;
    margin: 0 0 12px 0;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
}

.side_dream_list li .imgcatch img {
    /* width: 100%; */
    height: 120px;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: 6px;
}

.side_dream_list li:hover .imgcatch img {
    transform: scale(1.05);
}

.side_dream_list li .detail {
    margin: 0;
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1.4;
    color: #333;
    padding: 0 5px;
}

.side_dream_list li .detail a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
    display: block;
	font-weight: bold;
}

.side_dream_list li .detail a:hover {
    color: #667eea;
}

/* ランキング番号のスタイル */
.side_dream_list li .ranking {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #333;
    font-size: 0.8em;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    min-width: 20px;
    text-align: center;
    z-index: 10;
}

/* モダンな夢リスト（新しいクラス） */
.modern-dream-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dream-item {
    margin-bottom: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
}

.dream-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-color: #667eea;
}

.dream-item:last-child {
    margin-bottom: 0;
}

/* 夢リンク */
.dream-link {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 15px;
}

/* サムネイル */
.dream-thumbnail {
    position: relative;
    margin-bottom: 12px;
    border-radius: 6px;
    overflow: hidden;
}

.dream-thumbnail img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.dream-item:hover .dream-thumbnail img {
    transform: scale(1.05);
}

/* ランキング番号 */
.dream-ranking {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #333;
    font-size: 0.8em;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    min-width: 20px;
    text-align: center;
}

/* 詳細情報 */
.dream-detail {
    padding: 0 5px;
}

.dream-title {
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    color: #333;
}

.dream-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.dream-title a:hover {
    color: #667eea;
}

/* 検索フォーム */
.sidebar-search {
    margin-top: 30px;
}

.sidebar-search .sidebar-content {
    padding: 20px;
}

/* 検索フォームのスタイル調整 */
.sidebar-search form {
    display: flex;
    gap: 10px;
}

.sidebar-search input[type="search"] {
    flex: 1;
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 0.9em;
    transition: border-color 0.3s ease;
}

.sidebar-search input[type="search"]:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.sidebar-search input[type="submit"] {
    padding: 12px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sidebar-search input[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* サイドバーのレスポンシブデザイン */
@media (max-width: 768px) {
    .modern-sidebar {
        margin-top: 20px;
    }
    
    .sidebar-header {
        padding: 15px;
    }
    
    .sidebar-title {
        font-size: 1em;
    }
    
    .sidebar-content {
        padding: 15px;
    }
    
    .side_dream_list li,
    .dream-item {
        margin-bottom: 12px;
    }
    
    .side_dream_list li a,
    .dream-link {
        padding: 12px;
    }
    
    .side_dream_list li .imgcatch img,
    .dream-thumbnail img {
        height: 100px;
    }
    
    .side_dream_list li .detail,
    .dream-title {
        font-size: 0.9em;
    }
    
    .sidebar-search form {
        flex-direction: column;
    }
    
    .sidebar-search input[type="submit"] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .sidebar-header {
        padding: 12px;
    }
    
    .sidebar-content {
        padding: 12px;
    }
    
    .side_dream_list li a,
    .dream-link {
        padding: 10px;
    }
    
    .side_dream_list li .imgcatch img,
    .dream-thumbnail img {
        height: 80px;
    }
    
    .side_dream_list li .ranking,
    .dream-ranking {
        font-size: 0.7em;
        padding: 3px 6px;
    }
}

/* 今日の星座占い トップ３のスタイル */
.seiza-top3-section {
    margin: 40px 0;
}

.seiza-top3-container {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* セクションヘッダー */
.seiza-top3-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 30px;
    text-align: center;
    color: white;
}

.seiza-top3-title {
    font-size: 1.8em;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.seiza-top3-title i {
    font-size: 0.8em;
    color: #ffd700;
}

.seiza-top3-date {
    font-size: 1em;
    opacity: 0.9;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}

/* コンテンツエリア */
.seiza-top3-content {
    padding: 30px;
}

/* 星座リスト */
.seiza-top3-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.seiza-top3-item {
    background: #f8f9fa;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.seiza-top3-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: #667eea;
}

/* ランキング別の色分け */
.seiza-top3-item.rank-1 {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border-color: #ffd700;
}

.seiza-top3-item.rank-2 {
    background: linear-gradient(135deg, #c0c0c0 0%, #e5e5e5 100%);
    border-color: #c0c0c0;
}

.seiza-top3-item.rank-3 {
    background: linear-gradient(135deg, #cd7f32 0%, #daa520 100%);
    border-color: #cd7f32;
}

/* 星座リンク */
.seiza-top3-link {
    display: block;
    padding: 25px;
    text-decoration: none;
    color: inherit;
    position: relative;
}

/* ランキング番号 */
.seiza-top3-rank {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    align-items: center;
    gap: 2px;
}

.rank-number {
    font-size: 1.5em;
    font-weight: 700;
    color: #333;
}

.rank-text {
    font-size: 0.9em;
    font-weight: 600;
    color: #666;
}

/* 星座情報 */
.seiza-top3-info {
    margin-bottom: 15px;
}

.seiza-top3-name {
    font-size: 1.4em;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.seiza-top3-period {
    font-size: 0.9em;
    color: #666;
    margin: 0;
}

/* 星座画像 */
.seiza-top3-image {
    text-align: center;
    margin-bottom: 15px;
}

.seiza-top3-image img {
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.seiza-top3-item:hover .seiza-top3-image img {
    transform: scale(1.1);
}

/* 星評価 */
.seiza-top3-stars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px;
}

.stars-label {
    font-size: 0.9em;
    color: #666;
    font-weight: 500;
}

.stars-display {
    display: flex;
    gap: 2px;
}

.stars-display .fa-star {
    font-size: 0.9em;
}

.star-filled {
    color: #ffd700;
}

.star-empty {
    color: #e0e0e0;
}

/* 運勢説明 */
.seiza-top3-description {
    margin-bottom: 15px;
}

.seiza-top3-luck {
    font-size: 0.95em;
    line-height: 1.6;
    color: #444;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 詳細リンク */
.seiza-top3-detail-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.seiza-top3-item:hover .seiza-top3-detail-link {
    background: rgba(102, 126, 234, 0.2);
}

.detail-text {
    font-size: 0.9em;
    font-weight: 600;
    color: #667eea;
}

.seiza-top3-detail-link i {
    font-size: 0.8em;
    color: #667eea;
    transition: transform 0.3s ease;
}

.seiza-top3-item:hover .seiza-top3-detail-link i {
    transform: translateX(3px);
}

/* フッター */
.seiza-top3-footer {
    padding: 20px 30px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    text-align: center;
}

.seiza-all-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.seiza-all-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    color: white;
    text-decoration: none;
}

/* 今日の星座占い トップ３のレスポンシブデザイン */
@media (max-width: 768px) {
    .seiza-top3-header {
        padding: 25px 20px;
    }
    
    .seiza-top3-title {
        font-size: 1.5em;
    }
    
    .seiza-top3-content {
        padding: 20px;
    }
    
    .seiza-top3-list {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .seiza-top3-link {
        padding: 20px;
    }
    
    .seiza-top3-name {
        font-size: 1.2em;
    }
    
    .seiza-top3-footer {
        padding: 15px 20px;
    }
}

@media (max-width: 480px) {
    .seiza-top3-header {
        padding: 20px 15px;
    }
    
    .seiza-top3-title {
        font-size: 1.3em;
        flex-direction: column;
        gap: 10px;
    }
    
    .seiza-top3-content {
        padding: 15px;
    }
    
    .seiza-top3-link {
        padding: 15px;
    }
    
    .seiza-top3-image img {
        width: 60px;
        height: 60px;
    }
    
    .seiza-top3-footer {
        padding: 15px;
    }
}

/* 新着 夢占いTOP5のスタイル */
.latest-dreams-section {
    margin: 40px 0;
}

.latest-dreams-container {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* セクションヘッダー */
.latest-dreams-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 30px;
    text-align: center;
    color: white;
}

.latest-dreams-title {
    font-size: 1.8em;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.latest-dreams-title i {
    font-size: 0.8em;
    color: #ffd700;
}

.latest-dreams-date {
    font-size: 1em;
    opacity: 0.9;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}

/* コンテンツエリア */
.latest-dreams-content {
    padding: 30px;
}

/* 新着記事リスト */
.latest-dreams-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.latest-dreams-item {
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    position: relative;
}

.latest-dreams-item:last-child {
    border-bottom: none;
}

.latest-dreams-item:hover {
    background: #f8f9fa;
    transform: translateX(5px);
}

/* ランキング別の色分け */
.latest-dreams-item.rank-1 {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, rgba(255, 237, 78, 0.05) 100%);
}

.latest-dreams-item.rank-2 {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.05) 0%, rgba(229, 229, 229, 0.05) 100%);
}

.latest-dreams-item.rank-3 {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.05) 0%, rgba(218, 165, 32, 0.05) 100%);
}

.latest-dreams-item.rank-4,
.latest-dreams-item.rank-5 {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.02) 0%, rgba(118, 75, 162, 0.02) 100%);
}

/* 新着記事リンク */
.latest-dreams-link {
    display: flex;
    align-items: center;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    position: relative;
    gap: 20px;
}

/* ランキング番号 */
.latest-dreams-number {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.latest-dreams-number .rank-badge {
    font-size: 1.2em;
    font-weight: 700;
    color: white;
}

/* ランキング別の色分け */
.latest-dreams-item.rank-1 .latest-dreams-number {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.latest-dreams-item.rank-2 .latest-dreams-number {
    background: linear-gradient(135deg, #c0c0c0 0%, #e5e5e5 100%);
    box-shadow: 0 4px 12px rgba(192, 192, 192, 0.4);
}

.latest-dreams-item.rank-3 .latest-dreams-number {
    background: linear-gradient(135deg, #cd7f32 0%, #daa520 100%);
    box-shadow: 0 4px 12px rgba(205, 127, 50, 0.4);
}

/* 記事画像 */
.latest-dreams-image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.latest-dreams-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.latest-dreams-item:hover .latest-dreams-image img {
    transform: scale(1.1);
}

/* 記事情報 */
.latest-dreams-info {
    flex: 1;
    min-width: 0;
}

.latest-dreams-info .latest-dreams-title {
    font-size: 1.1em;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* メタ情報 */
.latest-dreams-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 8px;
    font-size: 0.85em;
}

.latest-dreams-meta .view-count,
.latest-dreams-meta .publish-date {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #666;
}

.latest-dreams-meta .view-count i,
.latest-dreams-meta .publish-date i {
    font-size: 0.9em;
    color: #667eea;
}

/* 記事説明 */
.latest-dreams-excerpt {
    font-size: 0.9em;
    color: #666;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 詳細リンク */
.latest-dreams-detail {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.latest-dreams-item:hover .latest-dreams-detail {
    background: rgba(102, 126, 234, 0.2);
}

.latest-dreams-detail .detail-text {
    font-size: 0.9em;
    font-weight: 600;
    color: #667eea;
}

.latest-dreams-detail i {
    font-size: 0.8em;
    color: #667eea;
    transition: transform 0.3s ease;
}

.latest-dreams-item:hover .latest-dreams-detail i {
    transform: translateX(3px);
}

/* フッター */
.latest-dreams-footer {
    padding: 20px 30px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    text-align: center;
}

.latest-all-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.latest-all-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    color: white;
    text-decoration: none;
}

/* 新着 夢占いTOP5のレスポンシブデザイン */
@media (max-width: 768px) {
    .latest-dreams-header {
        padding: 25px 20px;
    }
    
    .latest-dreams-title {
        font-size: 1.5em;
    }
    
    .latest-dreams-content {
        padding: 20px;
    }
    
    .latest-dreams-link {
        padding: 15px;
        gap: 15px;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .latest-dreams-number {
        width: 40px;
        height: 40px;
        align-self: flex-start;
    }
    
    .latest-dreams-number .rank-badge {
        font-size: 1em;
    }
    
    .latest-dreams-image {
        width: 60px;
        height: 60px;
        align-self: flex-start;
    }
    
    .latest-dreams-info {
        width: 100%;
    }
    
    .latest-dreams-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .latest-dreams-detail {
        align-self: flex-end;
        margin-top: 10px;
    }
    
    .latest-dreams-footer {
        padding: 15px 20px;
    }
}

@media (max-width: 480px) {
    .latest-dreams-header {
        padding: 20px 15px;
    }
    
    .latest-dreams-title {
        font-size: 1.3em;
        flex-direction: column;
        gap: 10px;
    }
    
    .latest-dreams-content {
        padding: 15px;
    }
    
    .latest-dreams-link {
        padding: 12px;
        gap: 12px;
    }
    
    .latest-dreams-number {
        width: 35px;
        height: 35px;
    }
    
    .latest-dreams-number .rank-badge {
        font-size: 0.9em;
    }
    
    .latest-dreams-image {
        width: 50px;
        height: 50px;
    }
    
    .latest-dreams-info .latest-dreams-title {
        font-size: 1em;
    }
    
    .latest-dreams-meta {
        font-size: 0.8em;
    }
    
    .latest-dreams-excerpt {
        font-size: 0.85em;
    }
    
    .latest-dreams-footer {
        padding: 15px;
    }
}

/* 夢占いの人気順のスタイル */
.popular-dreams-section {
    margin: 40px 0;
}

.popular-dreams-container {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* セクションヘッダー */
.popular-dreams-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 30px;
    text-align: center;
    color: white;
}

.popular-dreams-title {
    font-size: 1.8em;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.popular-dreams-title i {
    font-size: 0.8em;
    color: #ffd700;
}

.popular-dreams-date {
    font-size: 1em;
    opacity: 0.9;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}

/* コンテンツエリア */
.popular-dreams-content {
    padding: 30px;
}

/* 人気ランキングのコンテンツを新着記事と同じスタイルに統一 */
.popular-dreams-content .popular-ranking-section {
    margin: 0;
}

.popular-dreams-content .popular-ranking-container {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.popular-dreams-content .popular-ranking-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.popular-dreams-content .popular-ranking-item {
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    position: relative;
    background: #f8f9fa;
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
}

.popular-dreams-content .popular-ranking-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.popular-dreams-content .popular-ranking-item:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* ランキング別の色分け */
.popular-dreams-content .popular-ranking-item.rank-1 {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, rgba(255, 237, 78, 0.05) 100%);
    border: 2px solid rgba(255, 215, 0, 0.3);
}

.popular-dreams-content .popular-ranking-item.rank-2 {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.05) 0%, rgba(229, 229, 229, 0.05) 100%);
    border: 2px solid rgba(192, 192, 192, 0.3);
}

.popular-dreams-content .popular-ranking-item.rank-3 {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.05) 0%, rgba(218, 165, 32, 0.05) 100%);
    border: 2px solid rgba(205, 127, 50, 0.3);
}

.popular-dreams-content .popular-ranking-item.rank-4,
.popular-dreams-content .popular-ranking-item.rank-5 {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.02) 0%, rgba(118, 75, 162, 0.02) 100%);
    border: 2px solid rgba(102, 126, 234, 0.2);
}

/* ランキングリンク */
.popular-dreams-content .popular-ranking-link {
    display: flex;
    align-items: center;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    position: relative;
    gap: 20px;
}

/* ランキング番号 */
.popular-dreams-content .popular-ranking-number {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.popular-dreams-content .rank-badge {
    font-size: 1.2em;
    font-weight: 700;
    color: white;
}

/* ランキング別の色分け */
.popular-dreams-content .popular-ranking-item.rank-1 .popular-ranking-number {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.popular-dreams-content .popular-ranking-item.rank-2 .popular-ranking-number {
    background: linear-gradient(135deg, #c0c0c0 0%, #e5e5e5 100%);
    box-shadow: 0 4px 12px rgba(192, 192, 192, 0.4);
}

.popular-dreams-content .popular-ranking-item.rank-3 .popular-ranking-number {
    background: linear-gradient(135deg, #cd7f32 0%, #daa520 100%);
    box-shadow: 0 4px 12px rgba(205, 127, 50, 0.4);
}

/* 記事画像 */
.popular-dreams-content .popular-ranking-image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.popular-dreams-content .popular-ranking-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.popular-dreams-content .popular-ranking-item:hover .popular-ranking-image img {
    transform: scale(1.1);
}

/* 記事情報 */
.popular-dreams-content .popular-ranking-info {
    flex: 1;
    min-width: 0;
}

.popular-dreams-content .popular-ranking-title {
    font-size: 1.1em;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* メタ情報 */
.popular-dreams-content .popular-ranking-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 8px;
    font-size: 0.85em;
}

.popular-dreams-content .view-count,
.popular-dreams-content .update-date {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #666;
}

.popular-dreams-content .view-count i,
.popular-dreams-content .update-date i {
    font-size: 0.9em;
    color: #667eea;
}

/* 記事説明 */
.popular-dreams-content .popular-ranking-excerpt {
    font-size: 0.9em;
    color: #666;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 詳細リンク */
.popular-dreams-content .popular-ranking-detail {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.popular-dreams-content .popular-ranking-item:hover .popular-ranking-detail {
    background: rgba(102, 126, 234, 0.2);
}

.popular-dreams-content .detail-text {
    font-size: 0.9em;
    font-weight: 600;
    color: #667eea;
}

.popular-dreams-content .popular-ranking-detail i {
    font-size: 0.8em;
    color: #667eea;
    transition: transform 0.3s ease;
}

.popular-dreams-content .popular-ranking-item:hover .popular-ranking-detail i {
    transform: translateX(3px);
}

/* 人気ランキングのレスポンシブデザイン */
@media (max-width: 768px) {
    .popular-dreams-header {
        padding: 25px 20px;
    }
    
    .popular-dreams-title {
        font-size: 1.5em;
    }
    
    .popular-dreams-content {
        padding: 20px;
    }
    
    .popular-dreams-content .popular-ranking-link {
        padding: 15px;
        gap: 15px;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .popular-dreams-content .popular-ranking-number {
        width: 40px;
        height: 40px;
        align-self: flex-start;
    }
    
    .popular-dreams-content .rank-badge {
        font-size: 1em;
    }
    
    .popular-dreams-content .popular-ranking-image {
        width: 60px;
        height: 60px;
        align-self: flex-start;
    }
    
    .popular-dreams-content .popular-ranking-info {
        width: 100%;
    }
    
    .popular-dreams-content .popular-ranking-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .popular-dreams-content .popular-ranking-detail {
        align-self: flex-end;
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    .popular-dreams-header {
        padding: 20px 15px;
    }
    
    .popular-dreams-title {
        font-size: 1.3em;
        flex-direction: column;
        gap: 10px;
    }
    
    .popular-dreams-content {
        padding: 15px;
    }
    
    .popular-dreams-content .popular-ranking-link {
        padding: 12px;
        gap: 12px;
    }
    
    .popular-dreams-content .popular-ranking-number {
        width: 35px;
        height: 35px;
    }
    
    .popular-dreams-content .rank-badge {
        font-size: 0.9em;
    }
    
    .popular-dreams-content .popular-ranking-image {
        width: 50px;
        height: 50px;
    }
    
    .popular-dreams-content .popular-ranking-title {
        font-size: 1em;
    }
    
    .popular-dreams-content .popular-ranking-meta {
        font-size: 0.8em;
    }
    
    .popular-dreams-content .popular-ranking-excerpt {
        font-size: 0.85em;
    }
}

/* カテゴリー一覧ページのスタイル */
.page-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 60px 0;
    text-align: center;
    color: white;
    margin-bottom: 40px;
}

.page-header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.page-title {
    font-size: 2.5em;
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.page-title i {
    font-size: 0.8em;
    color: #ffd700;
}

.page-description {
    font-size: 1.2em;
    opacity: 0.9;
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
}

/* メインコンテンツ */
.page-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px;
}

/* ページコンテンツ */
.page-content {
    grid-column: 1;
}

.page-additional-content {
    grid-column: 1;
    margin-top: 40px;
}

.page-article {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 30px;
}

.article-content {
    font-size: 1em;
    line-height: 1.8;
    color: #333;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    color: #333;
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: 600;
}

.article-content h1 {
    font-size: 1.8em;
}

.article-content h2 {
    font-size: 1.5em;
}

.article-content h3 {
    font-size: 1.3em;
}

.article-content p {
    margin-bottom: 15px;
}

.article-content ul,
.article-content ol {
    margin-bottom: 15px;
    padding-left: 20px;
}

.article-content li {
    margin-bottom: 5px;
}

.article-content a {
    color: #667eea;
    text-decoration: none;
    transition: color 0.3s ease;
}

.article-content a:hover {
    color: #764ba2;
    text-decoration: underline;
}

/* サイドバー */
.page-sidebar {
    grid-column: 2;
}

/* カテゴリー一覧ページのレスポンシブデザイン */
@media (max-width: 1024px) {
    .page-main {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .page-sidebar {
        grid-column: 1;
        order: 2;
    }
    
    .page-content,
    .page-additional-content {
        grid-column: 1;
        order: 1;
    }
}

@media (max-width: 768px) {
    .page-header {
        padding: 40px 0;
        margin-bottom: 30px;
    }
    
    .page-title {
        font-size: 2em;
    }
    
    .page-description {
        font-size: 1.1em;
    }
    
    .page-main {
        padding: 0 15px;
        gap: 25px;
    }
    
    .page-article {
        padding: 25px;
    }
    
    .article-content h1 {
        font-size: 1.6em;
    }
    
    .article-content h2 {
        font-size: 1.4em;
    }
    
    .article-content h3 {
        font-size: 1.2em;
    }
}

@media (max-width: 480px) {
    .page-header {
        padding: 30px 0;
        margin-bottom: 20px;
    }
    
    .page-header-container {
        padding: 0 15px;
    }
    
    .page-title {
        font-size: 1.6em;
        flex-direction: column;
        gap: 10px;
    }
    
    .page-description {
        font-size: 1em;
    }
    
    .page-main {
        padding: 0 10px;
        gap: 20px;
    }
    
    .page-article {
        padding: 20px;
    }
    
    .article-content {
        font-size: 0.95em;
    }
    
    .article-content h1 {
        font-size: 1.4em;
    }
    
    .article-content h2 {
        font-size: 1.3em;
    }
    
    .article-content h3 {
        font-size: 1.1em;
    }
}

.category-description-text {
    font-size: 0.85em;
}

/* 夢占いカテゴリーのスタイル */
.category-section {
    margin: 40px 0 !important;
}

.category-container {
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
}

/* セクションヘッダー */
.category-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    padding: 30px !important;
    text-align: center !important;
    color: white !important;
}

.category-title {
    font-size: 1.8em !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
}

.category-title i {
    font-size: 0.8em !important;
    color: #ffd700 !important;
}

.category-description {
    font-size: 1em !important;
    opacity: 0.9 !important;
    margin: 0 !important;
}

/* コンテンツエリア */
.category-content {
    padding: 30px !important;
}

/* カテゴリーリスト */
.category-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 20px !important;
}

.category-item {
    background: #f8f9fa !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    border: 2px solid transparent !important;
}

.category-item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    border-color: #667eea !important;
}

/* カテゴリーリンク */
.category-link {
    display: block !important;
    padding: 25px !important;
    text-decoration: none !important;
    color: inherit !important;
    position: relative !important;
}

/* カテゴリー画像 */
.category-image {
    text-align: center !important;
    margin-bottom: 20px !important;
    position: relative !important;
}

.category-image img {
    width: 100% !important;
    height: 120px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.3s ease !important;
}

.category-item:hover .category-image img {
    transform: scale(1.05) !important;
}

.category-placeholder {
    width: 100% !important;
    height: 120px !important;
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #999 !important;
    font-size: 2em !important;
}

/* カテゴリー情報 */
.category-info {
    text-align: center !important;
}

.category-name {
    font-size: 1.3em !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
}

/* メタ情報 */
.category-meta {
    margin-bottom: 15px !important;
}

.category-count {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 0.9em !important;
    color: #666 !important;
    background: rgba(102, 126, 234, 0.1) !important;
    padding: 5px 10px !important;
    border-radius: 15px !important;
}

.category-count i {
    font-size: 0.8em !important;
    color: #667eea !important;
}

/* カテゴリー説明 */
.category-description-text {
    font-size: 0.9em !important;
    color: #666 !important;
    line-height: 1.5 !important;
    margin: 0 0 15px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* 詳細リンク */
.category-detail {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px !important;
    background: rgba(102, 126, 234, 0.1) !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.category-item:hover .category-detail {
    background: rgba(102, 126, 234, 0.2) !important;
}

.detail-text {
    font-size: 0.9em !important;
    font-weight: 600 !important;
    color: #667eea !important;
}

.category-detail i {
    font-size: 0.8em !important;
    color: #667eea !important;
    transition: transform 0.3s ease !important;
}

.category-item:hover .category-detail i {
    transform: translateX(3px) !important;
}

/* カテゴリーのレスポンシブデザイン */
@media (max-width: 768px) {
    .category-header {
        padding: 25px 20px;
    }
    
    .category-title {
        font-size: 1.5em;
    }
    
    .category-content {
        padding: 20px;
    }
    
    .category-list {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 15px;
    }
    
    .category-link {
        padding: 20px;
    }
    
    .category-name {
        font-size: 1.2em;
    }
}

@media (max-width: 480px) {
    .category-header {
        padding: 20px 15px;
    }
    
    .category-title {
        font-size: 1.3em;
        flex-direction: column;
        gap: 10px;
    }
    
    .category-content {
        padding: 15px;
    }
    
    .category-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .category-link {
        padding: 15px;
    }
    
    .category-image img,
    .category-placeholder {
        height: 100px;
    }
    
    .category-name {
        font-size: 1.1em;
    }
    
    .category-count {
        font-size: 0.8em;
    }
    
    .category-description-text {
        font-size: 0.85em;
    }
}

/* タクソノミー・カテゴリーページのスタイル */
.taxonomy-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 60px 0;
    text-align: center;
    color: white;
    margin-bottom: 40px;
}

.taxonomy-header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.taxonomy-title {
    font-size: 2.5em;
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.taxonomy-title i {
    font-size: 0.8em;
    color: #ffd700;
}

.taxonomy-description {
    font-size: 1.2em;
    opacity: 0.9;
    margin: 0 0 20px 0;
    max-width: 600px;
    margin: 0 auto 20px auto;
}

.taxonomy-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.taxonomy-count {
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
}

.taxonomy-count i {
    color: #ffd700;
}

/* メインレイアウト */
.taxonomy-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 250px;
    gap: 30px;
}

.taxonomy-content {
    grid-column: 1;
}

.taxonomy-article-list {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 25px;
}

/* 記事一覧 */
.modern-dream-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dream-item {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20px;
    transition: transform 0.3s ease;
}

.dream-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dream-item:hover {
    transform: translateY(-2px);
}

.dream-link {
    display: flex;
    gap: 20px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.dream-link:hover {
    text-decoration: none;
    color: inherit;
}

.dream-image {
    flex-shrink: 0;
    width: 120px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dream-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.dream-item:hover .dream-image img {
    transform: scale(1.05);
}

.dream-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dream-title {
    font-size: 1.2em;
    font-weight: 600;
    color: #333;
    margin: 0 0 10px 0;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.dream-item:hover .dream-title {
    color: #667eea;
}

.dream-meta {
    display: flex;
    gap: 15px;
    font-size: 0.85em;
    color: #666;
    margin-bottom: 8px;
}

.dream-views,
.dream-date {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dream-views i,
.dream-date i {
    color: #667eea;
    font-size: 0.9em;
}

.dream-excerpt {
    font-size: 0.9em;
    color: #666;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ページネーション */
.taxonomy-pagination {
    margin-top: 30px !important;
    padding-top: 20px !important;
    border-top: 1px solid #f0f0f0 !important;
    text-align: center !important;
}

/* 記事が見つからない場合 */
.no-posts-article {
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
    padding: 60px 30px !important;
    text-align: center !important;
}

.no-posts-content {
    max-width: 500px !important;
    margin: 0 auto !important;
}

.no-posts-title {
    font-size: 1.8em !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

.no-posts-title i {
    color: #667eea !important;
}

.no-posts-description {
    font-size: 1.1em !important;
    color: #666 !important;
    margin-bottom: 30px !important;
}

.no-posts-search {
    max-width: 400px !important;
    margin: 0 auto !important;
}

/* サイドバー */
.taxonomy-sidebar {
    grid-column: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
}

.category-section,
.sidebar-section {
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
    padding: 20px !important;
}

/* タクソノミーページのレスポンシブデザイン */
@media (max-width: 1024px) {
    .taxonomy-main {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    .taxonomy-sidebar {
        grid-column: 1 !important;
        order: 2 !important;
    }
    
    .taxonomy-content {
        grid-column: 1 !important;
        order: 1 !important;
    }
}

@media (max-width: 768px) {
    .taxonomy-header {
        padding: 40px 0 !important;
        margin-bottom: 30px !important;
    }
    
    .taxonomy-title {
        font-size: 2em !important;
    }
    
    .taxonomy-description {
        font-size: 1.1em !important;
    }
    
    .taxonomy-main {
        padding: 0 15px !important;
        gap: 25px !important;
    }
    
    .taxonomy-article-list {
        padding: 25px !important;
    }
    
    .dream-link {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .dream-image {
        width: 100% !important;
        height: 200px !important;
    }
    
    .dream-title {
        font-size: 1.1em !important;
    }
    
    .no-posts-article {
        padding: 40px 25px !important;
    }
    
    .no-posts-title {
        font-size: 1.5em !important;
    }
}

@media (max-width: 480px) {
    .taxonomy-header {
        padding: 30px 0 !important;
        margin-bottom: 20px !important;
    }
    
    .taxonomy-header-container {
        padding: 0 15px !important;
    }
    
    .taxonomy-title {
        font-size: 1.6em !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .taxonomy-description {
        font-size: 1em !important;
    }
    
    .taxonomy-meta {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .taxonomy-main {
        padding: 0 10px !important;
        gap: 20px !important;
    }
    
    .taxonomy-article-list {
        padding: 20px !important;
    }
    
    .modern-dream-list {
        gap: 15px !important;
    }
    
    .dream-item {
        padding-bottom: 15px !important;
    }
    
    .dream-image {
        height: 150px !important;
    }
    
    .dream-title {
        font-size: 1em !important;
    }
    
    .dream-meta {
        flex-direction: column !important;
        gap: 5px !important;
    }
    
    .no-posts-article {
        padding: 30px 20px !important;
    }
    
    .no-posts-title {
        font-size: 1.3em !important;
    }
    
    .category-section,
    .sidebar-section {
        padding: 20px !important;
    }
}

/* 検索ページのスタイル */
.search-form-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px 0;
    text-align: center;
    color: white;
    margin-bottom: 40px;
}

.search-form-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.search-form-header {
    margin-bottom: 40px;
}

.search-form-title {
    font-size: 2.5em;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.search-form-title i {
    font-size: 0.8em;
    color: #ffd700;
}

.search-form-description {
    font-size: 1.2em;
    opacity: 0.9;
    margin: 0;
    line-height: 1.6;
}

.search-form-note {
    font-size: 0.8em;
    opacity: 0.8;
    display: block;
    margin-top: 10px;
}

.search-form-content {
    max-width: 500px;
    margin: 0 auto;
}

/* モダン検索フォーム */
.modern-search-form {
    width: 100%;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50px;
    padding: 5px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
}

.search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 15px 20px;
    font-size: 1.1em;
    color: #333;
    outline: none;
}

.search-input::placeholder {
    color: #999;
}

.search-submit {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.search-submit:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.search-submit i {
    font-size: 1.2em;
}

/* 検索結果ページ */
.search-results-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 250px;
    gap: 30px;
}

.search-results-header {
    grid-column: 1 / -1;
    background: #f8f9fa;
    padding: 25px;
    border-radius: 16px;
    margin-bottom: 25px;
    text-align: center;
}

.search-results-container {
    max-width: 100%;
}

.search-results-title {
    font-size: 1.8em;
    font-weight: 600;
    color: #333;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.search-results-title i {
    color: #667eea;
}

.search-results-count {
    background: #667eea;
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 600;
}

.search-results-content {
    grid-column: 1;
}

.search-results-list {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 25px;
}

/* 検索結果が見つからない場合 */
.no-search-results {
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
    padding: 60px 30px !important;
    text-align: center !important;
}

.no-search-content {
    max-width: 500px !important;
    margin: 0 auto !important;
}

.no-search-title {
    font-size: 1.8em !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

.no-search-title i {
    color: #667eea !important;
}

.no-search-description {
    font-size: 1.1em !important;
    color: #666 !important;
    margin-bottom: 30px !important;
}

.no-search-suggestions {
    background: #f8f9fa !important;
    padding: 25px !important;
    border-radius: 12px !important;
    text-align: left !important;
}

.no-search-suggestions h4 {
    font-size: 1.2em !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 15px !important;
}

.no-search-suggestions ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.no-search-suggestions li {
    padding: 8px 0 !important;
    color: #666 !important;
    position: relative !important;
    padding-left: 20px !important;
}

.no-search-suggestions li::before {
    content: "•" !important;
    color: #667eea !important;
    font-weight: bold !important;
    position: absolute !important;
    left: 0 !important;
}

/* 検索ページネーション */
.search-pagination {
    margin-top: 25px !important;
    padding-top: 20px !important;
    border-top: 1px solid #f0f0f0 !important;
    text-align: center !important;
}

/* 検索サイドバー */
.search-sidebar {
    grid-column: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important;
}

/* コミュニティ掲示板のスタイル */
.community-menu-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 30px;
}

.community-post-button {
    text-align: center;
    margin-bottom: 30px;
}

.modern-post-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 50px;
    padding: 15px 30px;
    color: white;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.modern-post-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.modern-post-btn i {
    font-size: 1.2em;
}

/* コミュニティメイン */
.community-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 250px;
    gap: 30px;
}

.topic-detail-wrapper {
    grid-column: 1;
}

/* コメントセクション */
.comments-section {
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
    margin-bottom: 25px !important;
}

.comment-item {
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 25px !important;
    transition: background-color 0.3s ease !important;
}

.comment-item:last-child {
    border-bottom: none !important;
}

.comment-item:hover {
    background: #f8f9fa !important;
}

.comment-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 15px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.comment-meta {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
}

.comment-number {
    background: #667eea !important;
    color: white !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    font-size: 0.8em !important;
    font-weight: 600 !important;
}

.comment-date,
.comment-id {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 0.9em !important;
    color: #666 !important;
}

.comment-date i,
.comment-id i {
    color: #667eea !important;
    font-size: 0.8em !important;
}

.comment-actions {
    display: flex !important;
    gap: 10px !important;
}

.reply-btn {
    background: #f8f9fa !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 20px !important;
    padding: 8px 16px !important;
    color: #667eea !important;
    font-size: 0.9em !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.reply-btn:hover {
    background: #667eea !important;
    color: white !important;
    border-color: #667eea !important;
}

.reply-btn i {
    font-size: 0.8em !important;
}

.comment-content {
    font-size: 1em !important;
    line-height: 1.6 !important;
    color: #333 !important;
    margin-bottom: 20px !important;
}

/* レビューシステム */
.comment-review-system {
    border-top: 1px solid #f0f0f0 !important;
    padding-top: 15px !important;
}

.review-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    justify-content: center !important;
}

.review-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 15px !important;
    border-radius: 25px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-size: 0.9em !important;
    font-weight: 600 !important;
}

.review-plus {
    background: rgba(40, 167, 69, 0.1) !important;
    color: #28a745 !important;
    border: 1px solid rgba(40, 167, 69, 0.2) !important;
}

.review-plus:hover {
    background: rgba(40, 167, 69, 0.2) !important;
    transform: translateY(-1px) !important;
}

.review-minus {
    background: rgba(220, 53, 69, 0.1) !important;
    color: #dc3545 !important;
    border: 1px solid rgba(220, 53, 69, 0.2) !important;
}

.review-minus:hover {
    background: rgba(220, 53, 69, 0.2) !important;
    transform: translateY(-1px) !important;
}

.review-btn i {
    font-size: 1em !important;
}

.review-count {
    font-weight: 600 !important;
}

.review-progress {
    flex: 1 !important;
    max-width: 200px !important;
}

.progress-bar {
    height: 8px !important;
    background: #f0f0f0 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    display: flex !important;
}

.progress-plus {
    background: #28a745 !important;
    transition: width 0.3s ease !important;
}

.progress-minus {
    background: #dc3545 !important;
    transition: width 0.3s ease !important;
}

/* コメントがない場合 */
.no-comments {
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
    padding: 60px 30px !important;
    text-align: center !important;
}

.no-comments-content {
    max-width: 400px !important;
    margin: 0 auto !important;
}

.no-comments-title {
    font-size: 1.8em !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

.no-comments-title i {
    color: #667eea !important;
}

.no-comments-description {
    font-size: 1.1em !important;
    color: #666 !important;
}

/* コミュニティページネーション */
.community-pagination {
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
    padding: 20px !important;
    text-align: center !important;
}

/* モーダル */
.modern-modal {
    background: rgba(0, 0, 0, 0.8) !important;
}

.modal-content {
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden !important;
    max-width: 600px !important;
    width: 90% !important;
}

.modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    padding: 25px 30px !important;
}

.modal-title {
    font-size: 1.5em !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.modal-close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    color: white !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.1) !important;
}

.modal-body {
    padding: 30px !important;
}

.modal-textarea {
    width: 100% !important;
    border: 2px solid #f0f0f0 !important;
    border-radius: 12px !important;
    padding: 15px !important;
    font-size: 1em !important;
    line-height: 1.5 !important;
    resize: vertical !important;
    transition: border-color 0.3s ease !important;
    font-family: inherit !important;
}

.modal-textarea:focus {
    outline: none !important;
    border-color: #667eea !important;
}

.modal-actions {
    margin-top: 20px !important;
    text-align: center !important;
}

.modal-submit-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 12px 30px !important;
    color: white !important;
    font-size: 1em !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.modal-submit-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

.modal-submit-btn i {
    font-size: 1em !important;
}

/* コミュニティサイドバー */
.community-sidebar {
    grid-column: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important;
}

/* 検索・コミュニティページのレスポンシブデザイン */
@media (max-width: 1200px) {
    .search-results-main,
    .community-main {
        max-width: 1000px !important;
        grid-template-columns: 1fr 220px !important;
        gap: 25px !important;
    }
}

@media (max-width: 1024px) {
    .search-results-main,
    .community-main {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    .search-sidebar,
    .community-sidebar {
        grid-column: 1 !important;
        order: 2 !important;
    }
    
    .search-results-content,
    .topic-detail-wrapper {
        grid-column: 1 !important;
        order: 1 !important;
    }
}

@media (max-width: 768px) {
    .search-form-section {
        padding: 40px 0 !important;
        margin-bottom: 30px !important;
    }
    
    .search-form-title {
        font-size: 2em !important;
    }
    
    .search-form-description {
        font-size: 1.1em !important;
    }
    
    .search-input-wrapper {
        flex-direction: column !important;
        border-radius: 25px !important;
        padding: 10px !important;
    }
    
    .search-input {
        padding: 15px !important;
        text-align: center !important;
    }
    
    .search-submit {
        width: 60px !important;
        height: 60px !important;
        border-radius: 50% !important;
    }
    
    .search-results-main,
    .community-main {
        padding: 0 15px !important;
        gap: 25px !important;
    }
    
    .search-results-header {
        padding: 25px 20px !important;
    }
    
    .search-results-title {
        font-size: 1.5em !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .search-results-list,
    .comments-section {
        padding: 25px !important;
    }
    
    .comment-item {
        padding: 20px !important;
    }
    
    .comment-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    
    .comment-meta {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    
    .review-buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .review-progress {
        max-width: 100% !important;
    }
    
    .modal-content {
        width: 95% !important;
    }
    
    .modal-header,
    .modal-body {
        padding: 20px !important;
    }
}

@media (max-width: 480px) {
    .search-form-section {
        padding: 30px 0 !important;
        margin-bottom: 20px !important;
    }
    
    .search-form-container {
        padding: 0 15px !important;
    }
    
    .search-form-title {
        font-size: 1.6em !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .search-form-description {
        font-size: 1em !important;
    }
    
    .search-results-main,
    .community-main {
        padding: 0 10px !important;
        gap: 20px !important;
    }
    
    .search-results-header {
        padding: 20px 15px !important;
    }
    
    .search-results-title {
        font-size: 1.3em !important;
    }
    
    .search-results-list,
    .comments-section {
        padding: 20px !important;
    }
    
    .comment-item {
        padding: 15px !important;
    }
    
    .comment-content {
        font-size: 0.95em !important;
    }
    
    .modern-post-btn {
        padding: 12px 25px !important;
        font-size: 1em !important;
    }
    
    .no-search-results,
    .no-comments {
        padding: 40px 20px !important;
    }
    
    .no-search-title,
    .no-comments-title {
        font-size: 1.4em !important;
    }
    
    .modal-content {
        width: 98% !important;
    }
    
    .modal-header,
    .modal-body {
        padding: 15px !important;
    }
    
    .modal-textarea {
        padding: 12px !important;
        font-size: 0.95em !important;
    }
}

/* アーカイブページのスタイル */
.archive-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 60px 0;
    text-align: center;
    color: white;
    margin-bottom: 40px;
}

.archive-header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.archive-title {
    font-size: 2.5em;
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.archive-title i {
    font-size: 0.8em;
    color: #ffd700;
}

.archive-description {
    font-size: 1.2em;
    opacity: 0.9;
    margin: 0 0 20px 0;
    max-width: 600px;
    margin: 0 auto 20px auto;
}

.archive-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.archive-count {
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
}

.archive-count i {
    color: #ffd700;
}

/* メインレイアウト */
.archive-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 250px;
    gap: 30px;
}

.archive-content {
    grid-column: 1;
}

.archive-article-list {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 25px;
}

/* 記事一覧 */
.archive-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.archive-post {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20px;
    transition: transform 0.3s ease;
}

.archive-post:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.archive-post:hover {
    transform: translateY(-2px);
}

.post-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.post-link:hover {
    text-decoration: none;
    color: inherit;
}

.post-content {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.post-image {
    flex-shrink: 0;
    width: 120px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.archive-post:hover .post-image img {
    transform: scale(1.05);
}

.post-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 2em;
}

.post-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.post-title {
    font-size: 1.2em;
    font-weight: 600;
    color: #333;
    margin: 0 0 10px 0;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.archive-post:hover .post-title {
    color: #667eea;
}

.post-meta {
    display: flex;
    gap: 15px;
    font-size: 0.85em;
    color: #666;
    margin-bottom: 8px;
}

.post-date,
.post-author {
    display: flex;
    align-items: center;
    gap: 5px;
}

.post-date i,
.post-author i {
    color: #667eea;
    font-size: 0.9em;
}

.post-excerpt {
    font-size: 0.9em;
    color: #666;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ページネーション */
.archive-pagination {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
    text-align: center;
}

/* サイドバー */
.archive-sidebar {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* アーカイブページのレスポンシブデザイン */
@media (max-width: 1200px) {
    .archive-main {
        max-width: 1000px;
        grid-template-columns: 1fr 220px;
        gap: 25px;
    }
}

@media (max-width: 1024px) {
    .archive-main {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .archive-sidebar {
        grid-column: 1;
        order: 2;
    }
    
    .archive-content {
        grid-column: 1;
        order: 1;
    }
}

@media (max-width: 768px) {
    .archive-header {
        padding: 40px 0;
        margin-bottom: 30px;
    }
    
    .archive-title {
        font-size: 2em;
    }
    
    .archive-description {
        font-size: 1.1em;
    }
    
    .archive-main {
        padding: 0 15px;
        gap: 25px;
    }
    
    .archive-article-list {
        padding: 25px;
    }
    
    .post-content {
        flex-direction: column;
        gap: 15px;
    }
    
    .post-image {
        width: 100%;
        height: 200px;
    }
    
    .post-title {
        font-size: 1.1em;
    }
}

@media (max-width: 480px) {
    .archive-header {
        padding: 30px 0;
        margin-bottom: 20px;
    }
    
    .archive-header-container {
        padding: 0 15px;
    }
    
    .archive-title {
        font-size: 1.6em;
        flex-direction: column;
        gap: 10px;
    }
    
    .archive-description {
        font-size: 1em;
    }
    
    .archive-meta {
        flex-direction: column;
        gap: 10px;
    }
    
    .archive-main {
        padding: 0 10px;
        gap: 20px;
    }
    
    .archive-article-list {
        padding: 20px;
    }
    
    .archive-list {
        gap: 15px;
    }
    
    .archive-post {
        padding-bottom: 15px;
    }
    
    .post-image {
        height: 150px;
    }
    
    .post-title {
        font-size: 1em;
    }
    
    .post-meta {
        flex-direction: column;
        gap: 5px;
    }
}

/* 新着ランキングページのスタイル */
.ranking-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 60px 0;
    text-align: center;
    color: white;
    margin-bottom: 40px;
}

.ranking-header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.ranking-title {
    font-size: 2.5em;
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.ranking-title i {
    font-size: 0.8em;
    color: #ffd700;
}

.ranking-description {
    font-size: 1.2em;
    opacity: 0.9;
    margin: 0 0 20px 0;
    max-width: 600px;
    margin: 0 auto 20px auto;
}

.ranking-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.ranking-count {
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
}

.ranking-count i {
    color: #ffd700;
}

/* メインレイアウト */
.ranking-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 250px;
    gap: 30px;
}

.ranking-content {
    grid-column: 1;
}

.ranking-article-list {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 25px;
}

/* ランキングページのレスポンシブデザイン */
@media (max-width: 1200px) {
    .ranking-main {
        max-width: 1000px;
        grid-template-columns: 1fr 220px;
        gap: 25px;
    }
}

@media (max-width: 1024px) {
    .ranking-main {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .ranking-content {
        grid-column: 1;
        order: 1;
    }
}

@media (max-width: 768px) {
    .ranking-header {
        padding: 40px 0;
        margin-bottom: 30px;
    }
    
    .ranking-title {
        font-size: 2em;
    }
    
    .ranking-description {
        font-size: 1.1em;
    }
    
    .ranking-main {
        padding: 0 15px;
        gap: 25px;
    }
    
    .ranking-article-list {
        padding: 25px;
    }
}

@media (max-width: 480px) {
    .ranking-header {
        padding: 30px 0;
        margin-bottom: 20px;
    }
    
    .ranking-header-container {
        padding: 0 15px;
    }
    
    .ranking-title {
        font-size: 1.6em;
        flex-direction: column;
        gap: 10px;
    }
    
    .ranking-description {
        font-size: 1em;
    }
    
    .ranking-meta {
        flex-direction: column;
        gap: 10px;
    }
    
    .ranking-main {
        padding: 0 10px;
        gap: 20px;
    }
    
    .ranking-article-list {
        padding: 20px;
    }
}