@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

@media screen and (min-width: 800px){
#radarChart{
	max-height:600px;
	}
}
#payoutChart{
	max-height:400px;
}
#epsChartCanvas{
	max-height:400px;
}


/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/

}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	#stockTable th, #stockTable td{
		font-size: 11px　!important;
	}
	#radarChart{
	max-height:400px;
	}
}
        

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.related-entry-card-title, .entry-card-title{
		font-size:16px;
	}
	#totalScoreDisplay{
		font-size: 20px;
	}
	.chart-card2 {
		height:80vw !important;
    }  

}

/*タグ色分け*/
.cat-label-4 {background-color: #ee7800;}
.cat-label-11 {background-color: #008899;}
.cat-label-12 {background-color: #e95295;}
.cat-label-24 {background-color: #f6ad49;}

/*見出し装飾*/

/*H2見出し*/
.entry-content h2 {
    color: #6e7283;/*文字色*/
    font-size: 20px;/*文字サイズ*/
    padding: 10px 10px 5px 0px;/*文字回りの余白（上 右 下 左）*/
    display: block;
    border-bottom: 3px solid #5bd5d5;/*下線（太さ 実線 色）*/
	background-color:inherit;
	border-left:none;
	margin-top:80px;
}

.entry-content h2:first-letter {
    color: #5bd5d5;/*文字色（最初の文字）*/
    font-size: 35px;/*文字サイズ（最初の文字）*/
    margin-right: 4px;/*最初の文字の右側余白*/
}

.entry-content h3{
	padding:10px;
	font-size:20px;
	background-color:rgb(106 186 180);
	border-radius:10px;
	border:none;
	color:#ffffff;
	font-weight: lighter;
}


.ect-3-columns .entry-card-snippet {
	display:none;
}

.ect-vertical-card .entry-card-wrap .entry-card{
	border:none;
	background-color:#ced1d54d;
	color:#504a4a;
	box-shadow:0 4px 8px rgb(0 0 0 / 35%);
	border-radius:10px;
}

.ect-vertical-card .entry-card-wrap .entry-card-content{
	padding:10px;
}

.card-thumb img{
	border:none;
}

.related-entry-card-title, .entry-card-title{
	padding:4px;
}
.public-page{
	background-color:#f2f2f2db !important;
}
#main{
	background-color:inherit;
}
#sidebar{
	background-color:#ededed;
}

/* 個別分析ページCSS */
        /* タイトルスタイル */
        .stock-title {
			display: flex;
			width: auto;
            position: relative;
            font-size: 20px;
            color: #ffffff;
			border-radius:10px 10px 0px 0px;
			background-color:#d664a4;
			padding:15px;
        }
        .stock-title-n {
			display: flex;
			width: auto;
            position: relative;
            font-size: 20px;
            color: #ffffff;
			border-radius:10px 10px 0px 0px;
			background-color:#648dd6;
			padding:15px;
        }
        /* カードスタイルのテーブル */
        .card-table {
            margin: 0 auto;
            padding: 5px;
            border: 1px solid #ddd;
            border-radius:0 0 8px 8px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
            background-color: #fff;
			width: auto;
			'max-height:500px;
            width: 100%;
            overflow: auto; /* スクロール可能に */
			white-space:nowrap;
			margin-bottom:50px;
        }

        /* テーブルのスタイル */
        #stockTable {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }
        #stockTable th, #stockTable td {
            padding: 2px;
            text-align: center;
            border: 1px solid #ddd;
        }
        #stockTable th {
            background-color: #f4f4f4;
            color: #333;
            font-weight: bold;
        }
        #stockTable tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        #stockTable tr:hover {
            background-color: #e6f7ff;
        }

        /* head-card全体のスタイル */
        .head-card {
            display: flex;
            flex-direction: column; /* 縦方向に要素を並べる */
            background: linear-gradient(45deg, #7bbab9a1, #c4e0dc7a); /* 背景色を変更 */
            border-radius: 10px;
            padding: 20px;
            margin:20px auto;
            width: auto;
            box-shadow: 0 4px 8px rgb(0 0 0 / 36%);
			font-weight:700;
        }

        /* 証券コードと銘柄名の横並びレイアウト */
        .stock-info {
            display: contents;
            justify-content: space-between;
            align-items: center;
            color: #000;
        }

        /* 各詳細カードのスタイル */
        .stock-details {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }

        .detail-card {
            background-color: rgb(247 247 247 / 67%);
            border-radius: 10px;
            padding: 10px;
            flex: 1;
            margin: 10px;
            color: #000;
            text-align: center;
			border-color: rgb(222 222 222);
        }

        /* グラフカードのスタイル */
        .chart-card {
            background-color: rgb(247 247 247 / 67%);
            border-radius: 0 0 10px 10px;
            padding: 10px;
            margin: auto;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: auto;
            position: relative; /* タイトルのために相対位置 */
        }

        .chart-card2 {
            background-color: rgb(247 247 247 / 67%);
            border-radius: 0 0 10px 10px;
            padding: 10px;
            margin: auto;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: auto;
            position: relative; /* タイトルのために相対位置 */
			height: 30vw;
        }

        /* グラフのタイトル */
        .chart-title {
			display: flex;
			width: auto;
            position: relative;
            font-size: 20px;
            color: #ffffff;
			border-radius:10px 10px 0px 0px;
			background-color:#59b9c6;
			padding:5px 15px;
			margin:0px auto;
        }
		
		.stats-title{
			display: block;
			width: auto;
            position: relative;
            font-weight: bold;
            font-size: 16px;
            color: #ffffff;
			border-radius:5px;
			background-color:#59b9c6;
			padding:0 10px;
			margin:5px 0 0 0;
			text-align:center;
			height:30px;
        }
		

        /* スタッツカードのスタイル */
        .stats-cards {
            display: flex;
            justify-content: space-between;
            margin: 3px auto;
            width: auto;
        }

        .card {
            border-radius: 5px;
            padding: 5px;
            flex: 1;
            margin: 4px;
            text-align: center;
            color: #000;
			box-shadow:0 4px 8px rgba(0, 0, 0, 0.1);
			background-color:rgb(85 133 183 / 32%);
        }

        .stat-value {
            font-size: 20px;
            font-weight: bold;
        }

        .stat-label {
            font-size: 14px;
            color: #666;
			background-color:rgb(241 242 244);
			border-radius:10px;
        }
		

		.stats-cards2 {
            display: flex;
            justify-content: space-between;
            margin: 3px auto;
            width: auto;
        }

        .card2 {
            border-radius: 5px;
            padding: 5px;
            flex: 1;
            margin: 4px;
            text-align: center;
            color: #000;
			box-shadow:0 4px 8px rgba(0, 0, 0, 0.1);
			background-color:rgb(218 219 223 / 43%);
        }
		
		.stat-label2 {
            font-size: 14px;
            color: #666;
			background-color:rgb(241 242 244);
			border-radius:10px;
        }
		
		.stock-item-lastupdate{
			background-color: rgba(255, 255, 255, 0.1);
			border-radius:10px;
			padding:5px;
			color:#000;
			font-weight: 100;
			max-width: fit-content;
			font-size: 12px;
		}
		
		.chart-title2 {
			display: flex;
			width: auto;
            position: relative;
            font-size: 20px;
            color: #ffffff;
			border-radius:10px 10px 0px 0px;
			background-color:#be6fb3bf;
			padding:5px 15px;
			margin:0px auto;
			margin-top: 20px;
        }

		 .chart-title3 {
			 text-align:center;
			 color:rgb(208 201 122);
			 background-color:#0000004a;
			 border-radius:15px;
			 font-size:24px;
        }

		.chart-title4{
			display: flex;
			width: auto;
			position: relative;
			font-size: 20px;
			color: #ffffff;
			border-radius: 10px 10px 0px 0px;
			background-color: #ffae00db;
			padding: 5px 15px;
			margin: 0px auto;
			margin-top: 20px;
		}

		.chart-title5 {
			display: flex;
			width: auto;
            position: relative;
            font-size: 20px;
            color: #ffffff;
			border-radius:10px 10px 0px 0px;
			background-color:#7c2b9dbf;
			padding:5px 15px;
			margin:0px auto;
			margin-top: 20px;
        }

		.chart-title6 {
			display: flex;
			width: auto;
            position: relative;
            font-size: 20px;
            color: #ffffff;
			border-radius:10px 10px 0px 0px;
			background-color:#2b4c9dbf;
			padding:5px 15px;
			margin:0px auto;
			margin-top: 20px;
        }

        #chart-container {
            justify-content: center;
            align-items: center;
            width: auto;
            margin-top: 40px;
			background: linear-gradient(135deg, #1a252d, #4e4376);
            margin: 40px 0 10px 0;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            position: relative;
			border-radius:10px;
			
        }
        #radarChart {
            width: auto;
            height: auto;
			max-height:500px;
        }
		#totalScoreDisplay{
			text-align:center;
			font-weight:bold;
			color:rgb(208 201 122) !important;
			width: auto;
			margin:10px 0 10px 0;
			border-radius:10px;
			font-size:20px;
			font-family:matrix;
			padding:10px;
		}
	
		.recommended.rcs-card-margin a{
			border-radius: 20px;
			border: solid;
			border-color:rgb(0 0 0 / 10%);
		}

		.Consecutive-dividend-increases{
			position: relative;
			font-size: 50px;
			background-color: #d664a4;
			margin: 0 auto;
			padding: 0 0 0 50px;
			border-radius: 10px 10px 0 0;
			color: white;
			font-family: "Noto Sans JP", sans-serif;
		}
		.Consecutive-dividend-conteiner{
			background-color:rgb(219 89 167);
			border-radius:10px;
		}

		.wp-block-image img.wp-image-2330:hover{
			transition:0.3s;
			opacity:0.5;
		}
		.wp-block-image img.wp-image-2332:hover{
			transition:0.3s;
			opacity:0.5;
		}
		.wp-block-image img.wp-image-2334:hover{
			transition:0.5s;
			opacity:0.5;
		}

    .result-container {
        color: white;
        margin: auto;
        background: linear-gradient(135deg, #1a252d, #4e4376);
        border-radius: 12px;
        padding: 30px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        margin-bottom: 40px;
    }

    .result-title {
        text-align: center;
        font-size: 24px !important;
        margin-bottom: 20px;
        color: #4fc3f7 !important;
    }

    .result-item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .label {
		font-size: 16px;
		color: white;
    }

    .progress-container {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .meter-container {
        flex: 4;
        width: 40%;
        height: 20px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 10px;
        overflow: hidden;
        margin: 0 10px;
        position: relative;
    }

    .meter {
        height: 100%;
        background: linear-gradient(90deg, #4fc3f7, #00acc1);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        transition: width 0.5s ease-in-out;
    }

    .grade {
        flex: 0.1;
        font-size: 20px;
        text-align: center;
        padding: 0 10px;
        border-radius: 9px;
        font-weight: bold;
		font-family:sans-serif;
		background-color:rgb(57 57 57 / 56%);
    }
	.totalgrade{
		font-size: 50px;
		background-color:#0000004a;
		padding:2px 50px;
		border-radius:50px;
	}

	/* 広告がニューステーブル内に表示されないように */
	#news .tbody .tr .adsbygoogle {
		display: none;
	}
.stock-screener-results{
	font-size: 0.7em;
}
.cta-image{
	border-radius: 10px;
}

    .cta-button {
      text-align: center;
    }
	.btn {
		border-radius:10px;
	}

    .btn.btn-pink.btn-l {
      position: relative;
      display: inline-block;
      padding: 15px 30px;
      color: #fff;
      border-radius: 5px;
      text-decoration: none;
      font-size: 18px;
      font-weight: bold;
      overflow: hidden;
	  border-radius: 8px;
    }

    .btn.btn-pink.btn-l {
      background-color: #4077ae;
	}

    @keyframes shine {
      0% {
        left: -75%;
      }
      100% {
        left: 125%;
      }
    }

	/* ✅ Cocoon風：シンプルな新着記事一覧（サムネイルなし） */
	.stock-data-widget {
		border: 1px solid #ddd;
		background-color: #fff;
		border-radius: 6px;
		padding: 10px 5px;
		font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
		font-size: 14px;
		background-image: repeating-linear-gradient(142deg, #fbfbfb, #fbfbfb 3px, transparent 3px, transparent 6px);
	}

	.stock-data-list {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.stock-data-list li {
		padding: 10px 0;
		border-bottom: 1px solid #eee;
	}

	.stock-data-list li:last-child {
		border-bottom: none;
	}

	.stock-data-link {
		display: block;
		color: #333;
		text-decoration: none;
		transition: all 0.2s ease;
	}

	.stock-data-link:hover {
		color: #0073aa;
	}

	.stock-data-title {
		font-weight: bold;
		font-size: 15px;
		margin-bottom: 4px;
		display: block;
		color:#3bc8e8;
	}

	.stock-data-date {
		font-size: 12px;
		color: #999;
	}


/*検索フォーム*/
	.stock-search-form {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		align-items: center; /* 縦位置を中央揃え */
		margin-bottom: 20px;
		border: solid;
		padding: 0.5rem;
		border-width: 0.5px;
		border-radius: 10px;
		border-color: #b4b4b4;
	}

	.stock-search-form input[type="text"],
	.stock-search-form select,
	.stock-search-form button {
		height: 2em;
		font-size: 16px;
		box-sizing: border-box;
		padding: 6px 10px;
		line-height: 1.2;
		vertical-align: middle;
	}

	.stock-search-form button {
		background-color: #337ab7;
		color: white;
		border: none;
		border-radius: 4px;
		width: 25%;
	}

	.stock-search-form button:hover {
		background-color: #286090;
		cursor: pointer;
	}



	.tab-label-group .tab-label.is-active{
		background-color: #8088a9;
		font-size: 1rem;
	}
	.tab-label-group .tab-label{
		background-color: #d6d6d6;
		font-size: 1rem;
	}

/*Game/////////////////////////////////////////////////////////////////*/
/* style.css */

	/** { margin: 0; padding: 0; box-sizing: border-box; }
	/*body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; color: #333; }
	/*.container { max-width: 1400px; margin: 0 auto; padding: 20px; }
	/*.header { text-align: center; margin-bottom: 30px; color: white; }
	/*.header h1 { font-size: 2.5em; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }

	/* PCでも縦並びにするための調整 */
	.game-board {
		display: grid;
		grid-template-columns: 1fr; /* 常に1列 */
		gap: 20px;
		margin-bottom: 30px;
	}

	.panel { background: rgba(255, 255, 255, 0.95); border-radius: 15px; padding: 10px 15px; box-shadow: 0 8px 32px rgba(0,0,0,0.2); backdrop-filter: blur(10px); }
	.character-display { text-align: center; margin-bottom: 20px; background: radial-gradient(#b9b9b9, #ffffff); padding-top: 1rem; }
	.character-avatar {
		/*width: 512px;  /* サイズを適切な大きさに調整 */
		height: 512px; /* サイズを適切な大きさに調整 */
		border-radius: 5%; /* 円形に切り抜く */
		object-fit: cover; /* 画像がコンテナに収まるように調整 */
		background: #f0f0f0; /* 画像読み込み中の背景色 */
		margin: 0 auto 15px;
		display: block; /* 画像としてブロック要素にする */
		box-shadow: 0 4px 15px rgba(0,0,0,0.3);
		transition: all 0.3s ease;
		border: 1px solid #fff; /* オプション: 白い枠線を追加して見栄えを良くする */
	}
	.character-name { font-family: monospace; background-color: #c6c6c6;}
	.job-display { display: flex; justify-content: space-between; margin-bottom: 15px; }
	.job-card { background: #f8f9fa; padding: 10px; border-radius: 8px; text-align: center; flex: 1; margin: 0 5px; }
	.job-title { font-size: 0.9em; color: #666; margin-bottom: 5px; }
	.job-level { font-weight: bold; color: #4c7daf; }
	.progress-bar { width: 100%; height: 20px; background: #e0e0e0; border-radius: 10px; overflow: hidden; margin: 10px 0; }
	.progress-fill { height: 100%; transition: width 0.5s ease; border-radius: 10px; }
	.progress-dividend { background: linear-gradient(90deg, #2052b9, #63dde3); }
	.progress-gain { background: linear-gradient(90deg, #b3439e, #e19fd5); }
	.form-group { margin-bottom: 15px; }
	label { display: block; margin-bottom: 5px; font-weight: bold; }
	input, select { width: 100%; padding: 10px; border: 2px solid #ddd; border-radius: 5px; font-size: 16px; transition: border-color 0.3s ease; }
	input:focus, select:focus { outline: none; border-color: #4CAF50; }
	.button { background: linear-gradient(45deg, #daa34f, #ec5eb7); color: white; padding: 12px 24px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3); margin-right: 10px; margin-bottom: 10px; }
	.button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4); }
	.button-secondary { background: linear-gradient(45deg, #2196F3, #1976D2); box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3); }
	.search-results { background: white; border: 1px solid #ddd; border-radius: 5px; max-height: 200px; overflow-y: auto; margin-top: 5px; display: none; }
	.search-item { padding: 10px; cursor: pointer; border-bottom: 1px solid #eee; }
	.search-item:hover { background: #f5f5f5; }
	.holdings-list { max-height: 400px; overflow-y: auto; }
	.holding-item { background: #f8f9fa; padding: 15px; margin: 10px 0; border-radius: 8px; border-left: 4px solid #4CAF50; }
	.holding-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
	.holding-details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 0.9em; }
	.positive { color: #4CAF50; }
	.negative { color: #f44336; }
	.remove-btn { background: #f44336; color: white; border: none; padding: 5px 10px; border-radius: 3px; cursor: pointer; font-size: 0.8em; }
	.message { margin-top: 10px; padding: 10px; border-radius: 5px; }
	.message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
	.message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
	.equipment-stock-name{ color: #676767; font-weight: bold;}
	.equipment-icon{ display: none;}



/* --- RPG おすすめの逸品 洗練された新デザイン --- */

/* パネル全体の背景とスタイル */
.recommended-section {
    background-color: #fdfaf2; /* クリーム色がかった羊皮紙の色 */
    background-size: 20px 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2), inset 0 0 10px rgba(139, 90, 43, 0.2);
}

/* 各おすすめアイテム */
.recommended-section .item {
    display: flex;
    flex-direction: column; /* 縦並びに変更 */
    align-items: flex-start; /* 左寄せ */
    padding: 10px 0;
    border-bottom: 1px solid rgba(139, 90, 43, 0.2);
    transition: background-color 0.2s ease-in-out;
}
.recommended-section .item:last-child {
    border-bottom: none;
}
.recommended-section .item:hover {
    background-color: rgba(210, 180, 140, 0.1); /* ホバー時に少し色を付ける */
}

/* 銘柄名（リンク）のスタイル */
.recommended-section .item-name {
    font-weight: bold;
    font-size: 0.9em;
    margin-bottom: 8px; /* タグとの間に余白 */
}
.recommended-section .item-name a {
    text-decoration: none;
    color: #8b5a2b; /* 木枠と合わせた濃い茶色 */
    transition: color 0.2s;
}
.recommended-section .item-name a:hover {
    color: #e53935; /* ホバー時に伝説のアイテムのような赤色に */
    text-decoration: none;
}

/* タグのスタイル */
.recommended-section .item-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap; /* スマホでタグが折り返せるように */
}
/* タグの見た目を少し変更 */
/* ★★★ 新規追加：おすすめ欄専用のタグサイズ ★★★ */
/* 既存の .equipment-tag よりも優先させるため、より詳細なセレクタで指定 */
.recommended-section .equipment-tag {
    padding: 1px 6px; /* 上下の余白を詰め、左右も少し詰める */
    font-size: 0.7em; /* フォントサイズを小さくする */
    border-radius: 3px; /* 角の丸みを少し小さく */
    box-shadow: 1px 1px 2px rgba(0,0,0,0.15); /* 影も少し控えめに */
}



/* --- RPG装備 レアリティ凡例 --- */

/* 凡例全体のコンテナ */
.rarity-legend-container {
    width: 100%;
    overflow-x: auto; /* 横スクロールを可能にする */
    -webkit-overflow-scrolling: touch; /* iOSでのスムーズなスクロール */
    scrollbar-width: thin; /* スクロールバーを細く */
    scrollbar-color: #ccc #f0f0f0; /* スクロールバーの色 */
    padding-bottom: 8px;
    margin-bottom: 15px;
}
/* スクロールバーのスタイル (Chrome, Safari) */
.rarity-legend-container::-webkit-scrollbar {
    height: 5px;
}
.rarity-legend-container::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 3px;
}
.rarity-legend-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

/* 凡例の中身 */
.rarity-legend {
    display: flex; /* 横並びにする */
    align-items: center; /* 中央揃え */
    justify-content: flex-start; /* 左詰め */
    white-space: nowrap; /* 折り返しを禁止 */
    padding: 0 5px;
    min-width: max-content; /* 中身の幅を確保 */
}

/* 凡例用のレアリティタグ */
.rarity-tag-legend {
    font-size: 0.8em;
    font-weight: bold;
    padding: 2px 10px;
    border-radius: 12px;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    box-shadow: inset 0 -2px 0px rgba(0,0,0,0.15); /* 立体感を出す影 */
    line-height: 1.5;
}
/* 既存のレアリティカラーを流用 */
.rarity-tag-legend.rarity-S { background-color: #dc3545; }
.rarity-tag-legend.rarity-A { background-color: #e83e8c; }
.rarity-tag-legend.rarity-B { background-color: #fd7e14; }
.rarity-tag-legend.rarity-C { background-color: #28a745; }
.rarity-tag-legend.rarity-D { background-color: #007bff; }
.rarity-tag-legend.rarity-E { background-color: #6f42c1; }
.rarity-tag-legend.rarity-F { background-color: #adb5bd; }

/* 区切り文字 > のスタイル */
.rarity-legend .separator {
    font-size: 1.2em;
    font-weight: bold;
    color: #adb5bd;
    margin: 0 8px;
}

	/* デバッグ情報表示用のスタイル */
	.debug-info {
		background-color: #f8f8f8;
		border: 1px solid #ddd;
		padding: 15px;
		margin-top: 20px;
		font-family: 'Courier New', Courier, monospace;
		font-size: 0.9em;
		white-space: pre-wrap; /* 改行を保持 */
		word-wrap: break-word; /* 長い単語を折り返す */
		max-height: 500px;
		overflow-y: auto;
		color: #333;
	}
	.debug-info h3 {
		color: #c0392b;
		margin-bottom: 10px;
	}
	.debug-info p {
		margin-bottom: 5px;
	}
	.debug-info pre {
		background-color: #eee;
		padding: 10px;
		border-radius: 5px;
		overflow-x: auto;
	}

	/* 装備スロットの新しいレイアウト */
	.equipment-grid {
		display: flex; /* Flexboxに変更 */
		flex-direction: column; /* 縦に並べる */
		gap: 10px; /* アイテム間の余白 */
		margin-top: 15px;
	}

	.equipment-slot {
		background: #f5f5f5;
		padding: 10px; /* パディングを少し減らす */
		border-radius: 8px;
		border: 2px solid #ddd;
		text-align: left; /* テキストを左寄せに */
		transition: all 0.3s ease;
		display: flex; /* 内部要素を横並びにするため */
		align-items: center; /* 垂直方向中央寄せ */
		justify-content: space-between; /* 左右に要素を配置 */
		width: 100%; /* フル幅にする */
	}
	/* 洗練された装備中スロットのUI強化 */
	.equipment-slot.equipped {
		position: relative;
		overflow: hidden;
	}
	/* レアリティごとの装備中スロット強調 */
	.equipment-slot.equipped.rarity-F {
		background: linear-gradient(90deg, #ffffff 60%, #e0e0e0 100%);
	}
	.equipment-slot.equipped.rarity-E {
		background: linear-gradient(90deg, #ffffff 60%, #e3edef 100%);
	}
	.equipment-slot.equipped.rarity-D {
		background: linear-gradient(90deg, #e1f5fe 60%, #81d4fa 100%);
	}
	.equipment-slot.equipped.rarity-C {
		background: linear-gradient(90deg, #f1f8e9 60%, #dcedc8 100%);
	}
	.equipment-slot.equipped.rarity-B {
		background: linear-gradient(90deg, #fff3e0 60%, #ffe0b2 100%);
	}
	.equipment-slot.equipped.rarity-A {
		background: linear-gradient(120deg, #fce4ec 60%, #f8bbd0 100%);
		position: relative;
		overflow: hidden;
	}
	.equipment-slot.equipped.rarity-S {
		border-color: #f44336;
		background: linear-gradient(120deg, #fff8f8 60%, #ffcdd2 100%);
		position: relative;
		overflow: hidden;
	}
	.equipment-slot.equipped .equipment-name {
		color: #00bfa5;
		text-shadow: 0 1px 4px #b9f6ca;
	}

	.equipment-info {
		flex-grow: 1; /* 情報を占めるスペースを広げる */
	}

	.equipment-name {
		font-weight: bold;
		color: #555;
		margin-bottom: 3px;
	}

	.equipment-description {
		font-size: 0.85em;
		color: #777;
	}

	.equipment-rarity-tag {
		padding: 1px 6px;
		border-radius: 3px;
		margin-left: 10px;
		white-space: nowrap; /* タグが改行されないように */
	}

	/* タグ表記 */
	.equipment-tags {
		margin-top: 5px;
		font-size: 0.75em;
		color: #666;
		display: flex;
		flex-wrap: wrap;
		gap: 5px;
	}

	.equipment-tag {
		background-color: #e0e0e0;
		padding: 2px 6px;
		border-radius: 3px;
		/*font-weight: bold;*/
		white-space: nowrap;
	}
	.tag-continuous-dividend-increase { background-color: #d664a4; color: #ffffff; } /* 連続増配 */
	.tag-doe { background-color: #f9c052; color: #ffffff; } /* DOE採用 */
	.tag-cumulative-dividend { background-color: #4fc682; color: #ffffff; } /* 累進配当 */
	
	.level-info {
		margin-bottom: 2em;
	}

	/* --- RPG装備スロット 洗練された新デザイン --- */

	/* 装備品グリッド */
	.equipment-grid {
		display: flex;
		flex-direction: column;
		gap: 15px; /* カード間の余白を少し広げる */
	}

	/* 装備スロット（カード全体） */
	.equipment-slot {
		background: #ffffff;
		border-radius: 12px;
		border: 2px solid #e0e0e0;
		padding: 15px;
		display: flex;
		align-items: center;
		gap: 15px;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden; /* アニメーションのため */
	}
	.equipment-slot.empty {
		opacity: 0.6;
		background: #f5f5f5;
	}

	/* 装備アイコン */
	.equipment-icon-container {
		flex-shrink: 0;
		width: 50px;
		height: 50px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #e9ecef;
		font-size: 28px;
		color: #495057;
		border: 1px solid #dee2e6;
	}

	/* 情報エリア */
	.equipment-info-wrapper {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		gap: 8px; /* 情報間の縦の余白 */
	}
	.equipment-info-wrapper .equipment-header {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
	}
	.equipment-info-wrapper .equipment-name {
		font-size: 1.1em;
		font-weight: bold;
		color: #343a40;
	}
	.equipment-info-wrapper .equipment-stock-name {
		font-size: 0.8em;
		color: #868e96;
		margin-top: 2px;
	}
	.equipment-info-wrapper .equipment-body {
		display: flex;
		flex-direction: column;
		gap: 6px; /* ステータスやタグ間の余白 */
		font-size: 0.9em;
	}
	.equipment-info-wrapper .equipment-description {
		color: #495057;
	}
	.equipment-info-wrapper .equipment-flavor-text {
		font-style: italic;
		color: #6c757d;
		font-size: 0.85em;
		padding-top: 6px;
		border-top: 1px dashed #ced4da;
	}

	/* レアリティタグ */
	.equipment-rarity-tag {
		font-size: 0.75em;
		font-weight: bold;
		padding: 3px 8px;
		border-radius: 12px;
		color: #fff;
		text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
	}
	/* レアリティごとのタグ色 */
	.rarity-F { background-color: #adb5bd; }
	.rarity-E { background-color: #6f42c1; }
	.rarity-D { background-color: #007bff; }
	.rarity-C { background-color: #28a745; }
	.rarity-B { background-color: #fd7e14; }
	.rarity-A { background-color: #e83e8c; }
	.rarity-S { background-color: #dc3545; }


	/* ★★★ 既存のレアリティ別スタイルを新しい構造に適応 ★★★ */
	.equipment-slot.rarity-F { border-color: #bdbdbd; }
	.equipment-slot.rarity-E { border-color: #6f42c1; background: #f8f0ff; }
	.equipment-slot.rarity-D { border-color: #03a9f4; background: #e1f5fe; }
	.equipment-slot.rarity-C { border-color: #8bc34a; background: #f1f8e9; }
	.equipment-slot.rarity-B { border-color: #ff9800; background: #fff3e0; }
	.equipment-slot.rarity-A {
		border-color: #e91e63;
		background: linear-gradient(120deg, #fce4ec 60%, #f8bbd0 100%);
		animation: sparkle-a 2s linear infinite;
		box-shadow: 0 0 10px rgba(233, 30, 99, 0.3);
	}
	.equipment-slot.rarity-S {
		border-color: #f44336;
		background: linear-gradient(120deg, #ffebee 60%, #ffcdd2 100%);
		animation: sparkle-s 1.5s linear infinite;
		box-shadow: 0 0 15px rgba(244, 67, 54, 0.4);
	}
	/* --- RPG装備名 レアリティ別カラー --- */

	/* デフォルト（Fランク）の武器名の色 */
	.equipment-slot.rarity-F .equipment-name {
		color: #546e7a; /* Blue Grey */
		font-family: serif;
	}

	/* Eランク (Uncommon - 紫系) */
	.equipment-slot.rarity-E .equipment-name {
		color: #6a1b9a; /* Deep Purple */
		text-shadow: 0 0 5px rgba(243, 229, 245, 0.8);
		font-family: serif;
	}

	/* Dランク (Rare - 青系) */
	.equipment-slot.rarity-D .equipment-name {
		color: #0277bd; /* Deep Blue */
		text-shadow: 0 0 5px rgba(225, 245, 254, 0.8);
		font-family: serif;
	}

	/* Cランク (Epic - 緑系) */
	.equipment-slot.rarity-C .equipment-name {
		color: #33691e; /* Deep Green */
		text-shadow: 0 0 5px rgba(241, 248, 233, 0.8);
		font-family: serif;
	}

	/* Bランク (Legendary - オレンジ系) */
	.equipment-slot.rarity-B .equipment-name {
		color: #e65100; /* Deep Orange */
		text-shadow: 0 0 8px rgba(255, 243, 224, 0.9);
		font-family: serif;
	}

	/* Aランク (Mythic - ピンク/マゼンタ系) */
	.equipment-slot.rarity-A .equipment-name {
		color: #ad1457; /* Deep Magenta */
		text-shadow: 0 0 10px rgba(252, 228, 236, 1);
		font-family: serif;
		animation: text-glitter 2s ease-in-out infinite;
	}

	/* Sランク (Ancient - 赤系) */
	.equipment-slot.rarity-S .equipment-name {
		color: #b71c1c; /* Deep Red */
		text-shadow: 0 0 12px rgba(255, 235, 238, 1);
		font-family: serif;
		animation: text-glitter 2s ease-in-out infinite;
	}
	/* Aランクのレアリティタグ */
	.equipment-slot.rarity-A .equipment-rarity-tag {
		animation: tag-shimmer 2s ease-in-out infinite;
	}
	/* Sランクのレアリティタグ (Aランクより少し速く、強く光る) */
	.equipment-slot.rarity-S .equipment-rarity-tag {
		animation: tag-shimmer 1.5s ease-in-out infinite;
	}

	/* --- RPG装備名 リンクのスタイル調整 --- */

	a.equipment-name-link,
	a.equipment-name-link:visited {
		text-decoration: none; /* リンクの下線を消す */
		color: inherit; /* 親要素の色を継承する */
		display: block;
	}

	a.equipment-name-link:hover .equipment-name {
		text-decoration: underline; /* ホバー時だけ下線を付ける */
		color: #0056b3; /* ホバー時の色を少し変える（任意） */
		text-shadow: none; /* ホバー時はキラキラを消す（任意） */
	}




	/* 特殊テキスト */
	.special-text {
		font-style: italic;
		color: #900;
		margin-top: 5px;
		font-size: 0.8em;
	}
	.next-level-info {
		font-size: 0.8em;
		color: #888;
		margin-left: 10px;
	}
	.game-container h3 {
		background: linear-gradient(5deg, #a9fddf 0%, #2a87b8ba 50%, #5afe4f59 100%);
		margin-top: 0 !important;
		margin-bottom: 0.5em;
	}

            /* グラフとタブのスタイル */
            .chart-tabs { display: flex; margin-bottom: 15px; border-bottom: 2px solid #eee; }
            .chart-tabs .tab-button { padding: 10px 15px; cursor: pointer; border: none; background-color: transparent; font-size: 16px; color: #888; border-bottom: 3px solid transparent; transition: all 0.2s ease-in-out; }
            .chart-tabs .tab-button:hover { color: #555; }
            .chart-tabs .tab-button.active { color: #4a6fd8; border-bottom-color: #4a6fd8; font-weight: bold; }
            
            .chart-wrapper { position: relative; margin: 0 auto 1rem; max-height: 450px; width: 100%; }
            
            /* ★★★ 修正点：トグルボタンのスタイル ★★★ */
            .chart-toggle-container {
                position: relative; /* ボタンを配置する基準 */
                width: 100%;
				/* ボタンを配置するために、上に少しスペースを確保 */
				padding-top: 45px; 
            }
            .chart-toggle {
                position: absolute; /* コンテナの右上に配置 */
                top: 0px; /* グラフのタイトルとかぶらないように上にずらす */
                right: 0;
                z-index: 10; /* グラフより手前に表示 */
                display: flex; /* ボタンを横並びに */
                gap: 5px;
            }
            .chart-toggle .toggle-button {
                padding: 4px 8px; font-size: 12px; border: 1px solid #ccc;
                background-color: #fff; cursor: pointer; border-radius: 4px;
                transition: all 0.2s ease-in-out;
            }
            .chart-toggle .toggle-button:hover { background-color: #f0f0f0; }
            .chart-toggle .toggle-button.active {
                background-color: #4a6fd8; color: white; border-color: #4a6fd8;
                box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            }
			/* 横棒グラフのY軸ラベルのコンテナ */
			.chart-wrapper .chartjs-xaxis-labels,
			.chart-wrapper .chartjs-yaxis-labels {
				overflow: hidden; /* はみ出したテキストを隠す */
			}

			/* 各ラベルのコンテナ */
			.chart-wrapper .chartjs-yaxis-labels .chartjs-yaxis-label {
				white-space: nowrap; /* テキストを改行させない */
				overflow: hidden;    /* はみ出したテキストを隠す */
				text-overflow: ellipsis; /* ...で省略（アニメーション非対応ブラウザ用） */
				display: block;      /* アニメーションのためにブロック要素に */
				position: relative;
				width: 100%;
			}

			/* スクロールさせるテキスト本体 */
			.chart-wrapper .chartjs-yaxis-label span {
				display: inline-block;
				padding-left: 100%; /* アニメーションの開始位置を右端にする */
				animation: chart-ticker 15s linear infinite; /* 15秒かけてスクロール */
			}

			/* --- RPG X共有モーダル 新デザイン (ポップアップ風) --- */

			.share-modal-overlay {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.6);
				z-index: 1000;
				display: none; /* JSで flex に変更 */
				align-items: center;
				justify-content: center;
				padding: 15px;
				box-sizing: border-box;
			}

			.share-modal-content {
				background-color: #f9f9f9;
				padding: 25px;
				border-radius: 15px;
				box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
				width: 100%;
				max-width: 500px; /* ポップアップの最大幅 */
				max-height: 95vh;
				overflow-y: auto;
				text-align: center;
				transform: scale(0.95);
				opacity: 0;
				transition: transform 0.3s ease-out, opacity 0.3s ease-out;
			}
			/* 表示時のアニメーション */
			.share-modal-overlay.visible .share-modal-content {
				transform: scale(1);
				opacity: 1;
			}

			.share-modal-content h4 {
				margin-top: 0;
				font-size: 1.5em;
				color: #333;
			}

			/* ★★★ スクリーンショットのプレビューコンテナ ★★★ */
			.screenshot-container {
				padding: 20px; /* このパディングが画像の余白になる */
				background-color: #ffffff; /* 余白の色 */
				margin: 20px 0;
				border: 1px solid #e0e0e0;
			}
			#screenshot-preview {
				max-width: 100%;
				height: auto;
				display: block; /* 中央寄せのため */
				margin: 0 auto;
			}

			.share-modal-controls button {
				margin: 5px;
			}

			.share-modal-steps {
				text-align: left;
				margin: 20px auto;
				max-width: 400px;
				background-color: #fff;
				padding: 15px;
				border-radius: 8px;
				font-size: 0.9em;
			}
			.share-modal-steps ol {
				padding-left: 20px;
				margin: 0;
			}

			#share-spinner {
				display: none;
				margin: 20px auto;
				color: #666;
			}
			/* --- RPG X共有モーダル コントロールボタンの新デザイン --- */

			/* ボタンを囲むコンテナ */
			.share-modal-controls {
				display: flex;
				justify-content: center; /* 中央揃え */
				align-items: center;
				margin-bottom: 20px;
			}

			/* ラベルのスタイル (不要なら削除してもOK) */
			.share-modal-controls label {
				margin-right: 15px;
				font-weight: bold;
				color: #555;
			}

			/* トグルスイッチ風のコンテナ */
			.toggle-switch {
				display: flex;
				border: 1px solid #ccc;
				border-radius: 20px; /* 角を丸くして一体感を出す */
				overflow: hidden; /* 中のボタンの角をマスクする */
				background-color: #e9ecef;
				padding: 3px;
				box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
			}

			/* トグルスイッチ内の各ボタン */
			.toggle-switch .toggle-button {
				padding: 8px 15px;
				border: none;
				background-color: transparent; /* 背景は親に任せる */
				color: #6c757d;
				cursor: pointer;
				font-size: 14px;
				transition: all 0.3s ease;
				border-radius: 18px; /* ボタンの角も丸く */
			}

			/* アクティブ状態のボタンのスタイル */
			.toggle-switch .toggle-button.active {
				background-color: #ffffff; /* 白い背景 */
				color: #007bff; /* アクティブな色 */
				font-weight: bold;
				box-shadow: 0 2px 5px rgba(0,0,0,0.15);
				transform: scale(1.02); /* 少しだけ大きくして選択状態を強調 */
			}
			/* --- RPG X共有モーダル スマホ表示対応 --- */

			/* share-modal-actionsコンテナの基本スタイル */
			.share-modal-actions {
				display: flex; /* PCでは横並び（Flexbox） */
				flex-wrap: wrap; /* PCでも幅が足りなければ折り返す */
				justify-content: center; /* 中央揃え */
				gap: 10px; /* ボタン間の隙間 */
			}
			/* 画面幅が600px以下のデバイス（一般的なスマホ）に適用 */
			@media (max-width: 600px) {
				/* アクションボタンのコンテナ */
				.share-modal-actions {
					flex-direction: column;
					align-items: stretch;
				}

				/* ★★★ ここからが修正・追加部分 ★★★ */

				/* aタグとbuttonタグ両方にスタイルを適用 */
				.share-modal-actions .button,
				.share-modal-actions a.button {
					width: 100%;
					margin-right: 0;
					box-sizing: border-box; /* paddingとborderを幅計算に含める */

					/* --- 見た目を完全に統一するための追加指定 --- */
					display: inline-block; /* aタグの挙動をボタンに合わせる */
					text-align: center;    /* aタグのテキストを中央揃えに */
					line-height: normal;   /* aタグとbuttonの行の高さを揃える */
					padding: 12px 24px;    /* paddingを明示的に再指定 */
				}
			}
/* アニメーションの定義 */
	@keyframes chart-ticker {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(-100%);
		}
	}
/*テキストとタグキラキラアニメーション*/
	@keyframes text-glitter {
		0% {
			text-shadow: 0 0 5px rgba(255, 255, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.7);
			opacity: 0.9;
		}
		50% {
			text-shadow: 0 0 15px rgba(255, 255, 255, 1), 0 0 25px rgba(255, 255, 255, 1);
			opacity: 1;
		}
		100% {
			text-shadow: 0 0 5px rgba(255, 255, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.7);
			opacity: 0.9;
		}
	}

	@keyframes tag-shimmer {
		0% {
			box-shadow: 0 0 4px rgba(255, 255, 255, 0.5), inset 0 0 5px rgba(255, 255, 255, 0.4);
		}
		50% {
			box-shadow: 0 0 12px rgba(255, 255, 255, 1), inset 0 0 10px rgba(255, 255, 255, 0.8);
		}
		100% {
			box-shadow: 0 0 4px rgba(255, 255, 255, 0.5), inset 0 0 5px rgba(255, 255, 255, 0.4);
		}
	}

	/* その他のレスポンシブ調整（必要であれば） */
@media (max-width: 768px) {
    .game-container .game-board {
        /* グリッドレイアウトをやめて、単純なブロック要素に戻す */
        display: block; 
    }

    .game-container .game-board .panel {
        /* スマホでは、各パネルは縦に並ぶだけなので、下のマージンが必要 */
        margin-bottom: 20px;
    }

    /* 最後のパネルだけは下のマージンが不要 */
    .game-container .game-board .panel:last-child {
        margin-bottom: 0;
    }
	.job-level{
		font-size: 0.6em !important;
	}
}

--wp--preset--font-family--default:"Helvetica", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", YuGothic, "Yu Gothic", "メイリオ", Meiryo, sans-serif;

/* スマホ対応 */
@media screen and (max-width: 600px) {
    .stock-data-widget {
        font-size: 13px;
    }
    .stock-data-title {
        font-size: 14px;
    }
    .stock-data-date {
        font-size: 11px;
    }
}


    .stock-data-title {
        font-size: 14px;
    }

    .stock-data-date {
        font-size: 11px;
    }
}