#pageTop,
#CustomContentNavigation {
	display: none;
}
body {
	display: flex;
	flex-flow: column;
	align-items: stretch;
}
/***********
*	ファンドランキング
************/
#FundRanking {
	font-size: var(--article-font-size);
	display: flex;
	flex-flow: column;
	align-items: stretch;
	margin-bottom: 4em;
}
#FundRanking [data-fund-ranking-section='header'],
.FundRankingPeriodTab [data-fund-ranking-period-tab-section="header"]{
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--column-length, 0), 1fr);
	--column-gap: 10px;
	gap: var(--column-gap);
	padding-inline: var(--column-gap);
	user-select: none;
}
#FundRanking [data-fund-ranking-section='header']::before,
.FundRankingPeriodTab [data-fund-ranking-period-tab-section="header"]::before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #ddd;
}
#FundRanking [data-fund-ranking-section='header']{
	--column-length: 3;
}
#FundRankingRateOfReturn .FundRankingPeriodTab [data-fund-ranking-period-tab-section="header"]{
	--column-length: 6;
}
#FundRankingEfficientlyManaged .FundRankingPeriodTab [data-fund-ranking-period-tab-section="header"]{
	--column-length: 3;
}
#FundRanking .FundRankingTabHeader ,
#FundRanking .FundRankingPeriodTabHeader {
	position: relative;
	padding: 0.75em 0.5em;
	font-size: clamp(0.6875rem, 0.4872rem + 0.8013vw, 1rem);
	line-height: 1.2;
	display: grid;
	align-items: center;
	justify-content: center;
	text-align: center;
	--border-color: rgba(0,0,0,0);
	--background-color: rgba(0,0,0,0);
	background-color: var(--background-color);
	cursor: pointer;
	transition-duration: 0.25s;
	transition-property: background-color;
}
#FundRanking .FundRankingTabHeader .FundRankingTabChecker ,
#FundRanking .FundRankingPeriodTabHeader .FundRankingPeriodTabChecker {
	display: none;
}
#FundRanking .FundRankingTabHeader:has(.FundRankingTabChecker:checked) ,
#FundRanking .FundRankingPeriodTabHeader:has(.FundRankingPeriodTabChecker:checked) {
	--background-color: var(--col2);
}
#FundRanking
	.FundRankingTabHeader::after ,
#FundRanking
	.FundRankingPeriodTabHeader::after {
	content: '';
	position: absolute;
	bottom: 0;
	border-bottom: 3px solid var(--border-color);
	width: calc(100% + var(--column-gap));
	left: calc(0px - (var(--column-gap) / 2));
	transition-duration: 0.25s;
	transition-property: border-bottom;
}

#FundRanking
	.FundRankingTabHeader:has(.FundRankingTabChecker:checked)::after ,
#FundRanking
	.FundRankingPeriodTabHeader:has(.FundRankingPeriodTabChecker:checked)::after {
	--border-color: var(--col1);
}
#FundRanking .FundRankingDataInformation {
	font-size: calc(var(--article-font-size) * 0.8);
	margin-block: 0.5em;
	padding-inline: 1em;
	text-align: right;
	line-height: 1.4;
}
#FundRanking [data-fund-ranking-section='footer'] {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	margin-top: 2em;
}
#FundRanking [data-fund-ranking-section='comparisons'] {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	gap: 0em;
	margin-bottom: 1em;
}
#FundRanking [data-fund-ranking-section='comparisons'] button {
	all: unset;
	color: var(--col1);
	font-size: var(--article-font-size);
	padding: 0.15em 0.5em;
	border-radius: 10px;
	text-align: center;
	font-weight: normal;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 8px;
	background-color: rgb(255, 255, 255);
	min-width: 9.5em;
	margin: 1em;
	cursor: pointer;
}
#FundRanking [data-fund-ranking-section='comparisons'] button:hover {
	color: var(--col1);
	background-color: var(--col2);
}
#FundRanking [data-fund-ranking-section="show-all-fund-ranking"]{
	cursor: pointer;
	user-select: none;
}
/***********
*	ファンドランキング タブ切替
************/
#FundRanking .FundRankingTabContents {
	display: none;
}
#FundRanking:has(
		.FundRankingTabHeader:nth-child(1)
			.FundRankingTabChecker:checked
	)
	.FundRankingTabContents:nth-child(1),
#FundRanking:has(
		.FundRankingTabHeader:nth-child(2)
			.FundRankingTabChecker:checked
	)
	.FundRankingTabContents:nth-child(2),
#FundRanking:has(
		.FundRankingTabHeader:nth-child(3)
			.FundRankingTabChecker:checked
	)
	.FundRankingTabContents:nth-child(3) {
	display: block;
}

.FundRankingPeriodTab .FundRankingPeriodTabContents {
	display: none;
}
.FundRankingPeriodTab:has(
		.FundRankingPeriodTabHeader:nth-child(1)
			.FundRankingPeriodTabChecker:checked
	)
	.FundRankingPeriodTabContents:nth-child(1),
.FundRankingPeriodTab:has(
		.FundRankingPeriodTabHeader:nth-child(2)
			.FundRankingPeriodTabChecker:checked
	)
	.FundRankingPeriodTabContents:nth-child(2),
.FundRankingPeriodTab:has(
		.FundRankingPeriodTabHeader:nth-child(3)
			.FundRankingPeriodTabChecker:checked
	)
	.FundRankingPeriodTabContents:nth-child(3) ,
.FundRankingPeriodTab:has(
		.FundRankingPeriodTabHeader:nth-child(4)
			.FundRankingPeriodTabChecker:checked
	)
	.FundRankingPeriodTabContents:nth-child(4) ,
.FundRankingPeriodTab:has(
		.FundRankingPeriodTabHeader:nth-child(5)
			.FundRankingPeriodTabChecker:checked
	)
	.FundRankingPeriodTabContents:nth-child(5) ,
.FundRankingPeriodTab:has(
		.FundRankingPeriodTabHeader:nth-child(6)
			.FundRankingPeriodTabChecker:checked
	)
	.FundRankingPeriodTabContents:nth-child(6) {
	display: block;
}

/***********
*	ファンドランキング 表
************/
#FundRanking #DivTable {
	width: 100%;
	margin-top: 0em;
	margin-bottom: 0em;
	padding: 0px 0px;
	overflow-y: hidden;
	overflow-x: hidden;
}
#FundRanking .FundRankingTable {
	max-width: 100dvw;
	border-collapse: collapse;
	border-spacing: 0px;
	--font-size: calc(var(--article-font-size) * 0.9);
	font-size: var(--font-size);
	width: 100%;
	border: 0px none rgba(0, 0, 0, 0);
	margin: 0;
	--border-color: #ddd;
}
#FundRanking .FundRankingTableHead {
}
#FundRanking .FundRankingTableRow {
}
#FundRanking .FundRankingTableCell {
	padding: 0.5em 0.5em;
	line-height: 1.2;
	vertical-align: middle;
	font-size: var(--font-size);
	cursor: default;
	border: 0px solid rgba(0, 0, 0, 0);
}
#FundRanking .FundRankingTableBody {
}
#FundRanking .FundRankingTableHead .FundRankingTableCell {
	white-space: nowrap;
	font-weight: normal;
}
#FundRanking .FundRankingTableHeadLabel {
	display: inline-block;
	margin-inline: auto;
}

#FundRanking .FundRankingTableBody .FundRankingTableRow {
	border-bottom: 1px solid var(--border-color);
}
#FundRanking
	.FundRankingTableCell:has(.FundRankingTableComparisonCheckerLabel) {
	padding: 0px;
	position: relative;
	min-height: 1em;
}
#FundRanking .FundRankingTableComparisonCheckerLabel {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
}
#FundRanking .FundRankingTableComparisonChecker {
	--accent-color: #0e7df4;
	--border-color: #888;
	--background-color: rgba(0,0,0,0);
	all: unset;
	display: block;
	position: relative;
	width: 1.5em;
	aspect-ratio: 1 / 1;
	border-radius: 5px;
	border-color: var(--border-color);
	border-width: 1px;
	border-style: solid;
	padding: 0px;
	background-color: var(--background-color);
	transition-duration: 0.25s;
	transition-property: border-color background-color;
}
#FundRanking .FundRankingTableComparisonChecker:checked {
	--border-color: var(--accent-color);
	--background-color: var(--accent-color);
}
#FundRanking .FundRankingTableComparisonChecker:checked::after {
	content: "";
	position: absolute;
	top: 0.35em;
	left: 0.3em;
	width: 1em;
	height: 0.5em;
	border-radius: 0px;
	border-bottom: 2px solid #ffffff;
	border-left: 2px solid #ffffff;
	transform: rotate(-45deg);
}
#FundRanking .FundRankingTableContentsRanking {
	display: block;
	width: 2em;
	aspect-ratio: 1 / 1;
	margin-inline: auto;
}
#FundRanking
	.FundRankingTableBody
	.FundRankingTableRow:nth-child(1)
	.FundRankingTableContentsRanking {
	background-image: url(./assets/ranking-1.svg);
}
#FundRanking
	.FundRankingTableBody
	.FundRankingTableRow:nth-child(2)
	.FundRankingTableContentsRanking {
	background-image: url(./assets/ranking-2.svg);
}
#FundRanking
	.FundRankingTableBody
	.FundRankingTableRow:nth-child(3)
	.FundRankingTableContentsRanking {
	background-image: url(./assets/ranking-3.svg);
}
#FundRanking
	.FundRankingTableBody
	.FundRankingTableRow:nth-child(4)
	.FundRankingTableContentsRanking {
	background-image: url(./assets/ranking-4.svg);
}
#FundRanking
	.FundRankingTableBody
	.FundRankingTableRow:nth-child(5)
	.FundRankingTableContentsRanking {
	background-image: url(./assets/ranking-5.svg);
}

#FundRanking .FundRankingTableContentsFromLastTime {
	display: block;
	width: 1.5em;
	aspect-ratio: 1 / 1;
	margin-inline: auto;
}
#FundRanking .FundRankingTableContentsFromLastTime[data-from-last-time='up'] {
	background-image: url(./assets/ranking-up.svg);
}
#FundRanking .FundRankingTableContentsFromLastTime[data-from-last-time='eq'] {
	background-image: url(./assets/ranking-eq.svg);
}
#FundRanking .FundRankingTableContentsFromLastTime[data-from-last-time='down'] {
	background-image: url(./assets/ranking-down.svg);
}
#FundRanking .FundRankingTableContentsInvestmentTargets {
}
#FundRanking .FundRankingTableContentsFund {
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	row-gap: 0.5em;
	column-gap: 0.5em;
}
#FundRanking .FundRankingTableContentsNISALabel {
	border-radius: 3px;
	color: #fff;
	font-size: calc(var(--font-size) * 0.8);
	line-height: 1;
	padding-inline: 0.75em;
	padding-block: 0.5em;
	white-space: nowrap;
}
#FundRanking .FundRankingTableContentsNISALabel::after {
	content: 'NISA';
	font-size: calc(var(--font-size) * 0.6);
	padding-right: 0.4em;
}
#FundRanking
	.FundRankingTableContentsNISALabel[data-limit='growth-investment'] {
	background-color: #b23f45;
}
#FundRanking
	.FundRankingTableContentsNISALabel[data-limit='accumulated-investment'] {
	background-color: #de6e34;
}
.FundRankingTableContentsFundName {
	display: block;
	width: 100%;
	cursor: default;
}
a.FundRankingTableContentsFundName {
	cursor: pointer;
	font-weight: bold;
}
.FundRankingTableContentsFundNickname {
	font-size: calc(var(--font-size) * 0.8);
}

#FundRanking .FundRankingTableContentsFundPrice {
	display: flex;
	flex-flow: column;
	align-items: center;
	margin-inline: auto;
	row-gap: 0.25em;
	column-gap: 0.25em;
}
#FundRanking .FundRankingTableContentsFundBasePrice {
}
#FundRanking .FundRankingTableContentsFundChangeFromPreviousDay {
	font-size: calc(var(--font-size) * 0.8);
}
#FundRanking
	.FundRankingTableContentsFundChangeFromPreviousDay[data-from='minus'] {
	color: rgb(0, 119, 255);
}
#FundRanking
	.FundRankingTableContentsFundChangeFromPreviousDay[data-from='plus'] {
	color: rgb(255, 60, 60);
}
#FundRanking .FundRankingTableContentsInvestmentBaseDate {
	font-size: calc(var(--font-size) * 0.8);
}
#FundRanking .FundRankingTableContentsFundChart {
	/*
	ダミーのチャート
	*/
	display: block;
	aspect-ratio: 16 / 9;
	border: 1px solid #ddd;
	background-color: #ddd;
}
.FundRankingTableContentsInvestmentApplySimulation {
	all: unset;
	display: inline-block;
	margin: 5px 0.5em;
	border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 5px;
	aspect-ratio: 1 / 1;
	width: 2.5em;
	background-color: var(--col2);
	background-image: url(./assets/simulation_B.png);
	background-size: contain;
}
#FundRanking .FundRankingTableContentsInvestmentApplySimulation:hover {
	cursor: pointer;
	background-color: var(--col1);
	background-image: url(./assets/simulation_W.png);
	color: rgb(255, 255, 255);
}
#FundRanking .FundRankingTableCell:has(.FundRankingTableComparisonChecker),
#FundRanking .FundRankingTableCell:has(.FundRankingTableContentsRanking),
#FundRanking .FundRankingTableCell:has(.FundRankingTableContentsFromLastTime),
#FundRanking .FundRankingTableCell:has(.FundRankingTableContentsRanking),
#FundRanking .FundRankingTableCell:has(.FundRankingTableContentsRanking),
#FundRanking
	.FundRankingTableCell:has(.FundRankingTableContentsInvestmentBaseDate) {
	text-align: center;
}

@media (max-width: 900px) {
	#FundRankingMostPopular .FundRankingTableCell:nth-child(6),
	#FundRankingRateOfReturn .FundRankingTableCell:nth-child(6),
	#FundRankingEfficientlyManaged .FundRankingTableCell:nth-child(6){
		display: none;
	} 
}
@media (max-width: 850px) {
	#FundRankingMostPopular .FundRankingTableCell:nth-child(3),
	#FundRankingRateOfReturn .FundRankingTableCell:nth-child(3),
	#FundRankingEfficientlyManaged .FundRankingTableCell:nth-child(3){
		display: none;
	} 
}
@media (max-width: 768px) {
	#FundRanking [data-fund-ranking-section='comparisons'],
	#FundRankingMostPopular .FundRankingTableCell:nth-child(1),
	#FundRankingRateOfReturn .FundRankingTableCell:nth-child(1),
	#FundRankingEfficientlyManaged .FundRankingTableCell:nth-child(1){
		display: none;
	} 
}

/***********
*	積立投資シミュレーション
************/
#AccumulationInvestmentSimulation {
	display: flex;
	flex-flow: column;
	align-items: center;
	--font-size: calc(var(--article-font-size) * 1);
	font-size: var(--font-size);
	scroll-margin-top: 125px;
}
#AccumulationInvestmentSimulationArea {
	width: 100%;
}
#AccumulationInvestmentSimulationEmptyMessage {
	display: block;
	width: 600px;
	max-width: 100%;
	margin-inline: auto;
	padding: 2em 1em;
}
#AccumulationInvestmentSimulationEmptyMessage .FundRankingTableContentsInvestmentApplySimulation{
	vertical-align: bottom;
	width: 2em;
}
#AccumulationInvestmentSimulationArea:not(:empty)
	~ #AccumulationInvestmentSimulation
	#AccumulationInvestmentSimulationEmptyMessage {
	display: none;
}
#AccumulationInvestmentSimulationFundName {
	background-color: var(--col2);
	list-style: none outside;
	padding: 0.25em 1em;
	font-weight: bold;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	user-select: none;
}
#AccumulationInvestmentSimulationFundName::marker {
	display: none;
}
#AccumulationInvestmentSimulationFundName::after {
	content: '+';
	transition: 0.25s transform;
	font-size: calc(var(--font-size) * 1.5);
}
#AccumulationInvestmentSimulationFund[open]
	#AccumulationInvestmentSimulationFundName::after {
	transform: rotate(45deg);
}

#AccumulationInvestmentSimulationFundList {
	list-style: none outside;
	border: 4px solid var(--col2);
	border-top-width: 0px;
}
#AccumulationInvestmentSimulationFundList
	li
	.FundRankingTableContentsFundName {
	padding: 0.25em 1em;
	padding-left: 3em;
}
#AccumulationInvestmentSimulationFundList li:nth-child(even) {
	background-color: var(--col3);
}