@charset "utf-8";
/*---------- button ----------*/
.button {
	background: #fff;
}
/*---------- movie ----------*/
.movie__youtube {
	aspect-ratio: 16 / 9;
	display: block;
	height: auto;
	margin-inline: auto;
	max-width: 600px;
	width: 100%;
}
/*---------- doc ----------*/
.doc__headingLv1--docInfo {
	margin-bottom: 1rem;
}
.doc__headingTooltip {
	background-color: var(--etf-color);
	border-radius: 7px;
	color: #fff;
	display: block;
	font-size: 1.14rem;
	font-weight: normal;
	inline-size: fit-content;
	line-height: 1;
	margin-inline: auto;
	margin-bottom: .85rem;
	padding: .4rem .3rem .4rem .7rem;
	text-align: center;
	white-space: nowrap;
}
.doc__headingTooltip::after {
	background-color: var(--etf-color);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	bottom: -5px;
	content: "";
	display: block;
	height: 6px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 8px;
}
/*---------- accordion ----------*/
.accordion--etf {
	border-top: 1px solid #CDCDCD;
	border-bottom: 1px solid #CDCDCD;
	margin-top: 1rem;
}
.accordion--etf[open] {
	padding-bottom: 0;
}
.accordion--etf .accordion__detail {
	background-color: #fff;
	border-top: 1px solid #CDCDCD;
	margin-top: 0;
}
.accordion--etf .accordion__heading {
	font-size: 1rem;
	padding: .5rem .5rem .6rem;
	text-align: center;
}
.accordion--etf .accordion__heading::before {
	color: #fff;
	content: "+";
	font-size: 1.2rem;
	line-height: 1;
	right: .75rem;
	position: absolute;
	top: 50%;
	translate: 0 -56%;
	z-index: 1;
}
.accordion--etf[open] .accordion__heading::before {
	rotate: 45deg;
}
.accordion--etf .accordion__heading::after {
	background-color: #333;
	border: none;
	content: "";
	height: 1.2rem;
	right: .5rem;
	top: 50%;
	translate: 0 -50%;
	width: 1.2rem;
	z-index: 0;
}
.accordion--etf .accordion__detail {
	padding: 1.2rem 1rem 2rem;
}
.accordion--etf .accordion__detail > *:first-child {
	margin-top: 0 !important;
}
/*---------- button ----------*/
.button--etf {
	background-color: var(--etf-color);
	border: none;
	border-radius: 2rem;
	box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
	color: #fff;
	font-size: 1.285rem;
	font-weight: bold;
	line-height: 1;
	margin-bottom: 0;
	padding: .55rem;
	width: 100%;
}
.button--etf + .button--etf {
	margin-top: 1rem;
}
.button--etf::after {
	display: none;
}
.button--etf span {
	display: block;
	font-size: .85rem;
	font-weight: normal;
	margin-top: .5rem;
}
/*---------- etf ----------*/
:root {
	--etf-color: #DA204E;
	--etf-color2: #6C075C;
}
.etf {
	padding-bottom: 7.5rem;
}
@media all and (max-width: 768px) {
	.etf {
		padding-inline: 3.8%;
	}
}
.contents--etf {
	margin-top: 1.5rem;
	max-width: 880px;
}
.contents--etf > *:first-child {
	margin-top: 0 !important;
}
.etf__strong {
	background: linear-gradient(transparent 68%, rgba(237, 112, 127, .3) 68%);
	font-weight: normal;
}
.etf__red,
.etf__note.etf__red {
	color: var(--etf-color);
}
.etf__headingLv2 {
	font-size: 1.42rem;
	font-weight: normal;
	line-height: 1.6;
	margin-block: 5.35rem 1.6rem;
	text-align: center;
}
.etf__headingLv3 {
	color: var(--etf-color);
	font-size: 1.285rem;
	font-weight: normal;
	line-height: 1.3;
	margin-block: 1.2rem 1rem;
	text-align: center;
}
.etf__headingLv4 {
	color: var(--etf-color);
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.43;
	margin-block: 1.85rem 1rem;
	text-align: center;
}
.etf__headingLv4:has( + .etf__imgWrapper) {
	margin-bottom: 0;
}
.etf__headingLv5 {
	font-size: 1rem;
	font-weight: normal;
	line-height: 1.4;
	margin-block: 2.5rem .7rem;
	text-align: center;
}
.etf__headingLv4 + .etf__headingLv5 {
	margin-top: 1.285rem;
}
.etf__headingLv5 span {
	font-size: .85rem;
}
.etf__text--sizeL {
	font-size: 2.2rem;
	line-height: 1.2;
}
.etf__text--center {
	text-align: center;
}
.etf__text--right {
	text-align: right;
}
.etf__note {
	color: rgba(51, 51, 51, .6);
	font-size: .8rem;
	padding-left: 1em;
	text-indent: -1em;
}
.etf__note--4 {
	padding-left: 4em;
	text-indent: -4em;
}
.etf__note,
p + .etf__note {
	margin-top: .5rem;
}
.etf__note + .etf__note {
	margin-top: 0;
}
.etf__hr {
	border-top: 1px solid #CDCDCD;
	margin-block: 2.5rem;
}
.etf__headingItem {
	background-color: var(--etf-color2);
	color: #fff;
	font-size: 1.285rem;
	font-weight: normal;
	display: grid;
	grid-template-columns: auto 1fr;
	line-height: 1;
	margin-top: 2rem;
}
.etf__headingItemNum {
	background-color: var(--etf-color);
	padding: .8rem .85rem .9rem;
	text-align: center;
}
.etf__headingItemCode {
	background-color: #fff;
	color: var(--etf-color);
	display: block;
	font-size: 1rem;
	margin-top: .5rem;
	padding: .35rem 1rem;
}
.etf__headingItemCode + .etf__headingItemCode {
	margin-top: 2px;
}
.etf__headingItemName {
	align-self: center;
	line-height: 1.3;
	padding-inline: .785rem;
}
.etf__imgWrapper {
	margin-block: .7rem;
	text-align: center;
}
.etf__icon {
	display: block;
	margin-inline: auto;
	max-width: 140px;
}
.etf__box {
	background-color: #F5F2F3;
	padding: .64rem 1.43rem 2.85rem;
}
ol.etf__list,
ul.etf__list {
	margin-top: .7rem;
}
.etf__item {
	line-height: 1.4;
	padding-left: 1em;
}
ul:not(.etf__list--grid) .etf__item + .etf__item {
	margin-top: .3rem;
}
.etf__list--disc > .etf__item {
	text-indent: -.5em;
}
.etf__list--disc > .etf__item::before {
	color: var(--etf-color);
	content: "・";
	display: inline-block;
}
ul.etf__list--grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	inline-size: fit-content;
	margin-inline: auto;
}
.etf__table {
	border: 1px solid #CCC;
	border-collapse: collapse;
	border-spacing: 0;
	margin-inline: auto;
}
.etf__table th {
	background-color: #F5F2F3;
	color: rgba(51, 51, 51, .5);
	font-weight: normal;
	padding: .8rem;
	text-align: left;
}
.etf__table td {
	border-top: 1px solid #CCC;
	padding: .8rem;
}
/*---------- buttonToggle ----------*/
.buttonToggle {
	border-color: #333;
}
.buttonToggle::before,
.buttonToggle::after {
	background: #333;
}
/*----------  ----------*/
