@charset "UTF-8";

/* ---------------------------------
 Page Title
--------------------------------- */
.fx #pageTitle__outer {
	background-image: url("../img/header/economic_charts.webp");
	background-position: center 0%;
}
.cx #pageTitle__outer {
	background-image: url("../img/header/gold.webp");
	background-position: center 10%;
}
.cx #pageTitle {
	letter-spacing: 3px;
	text-shadow:
		 1px  1px 5px rgba(45, 22, 0, 0.5),
		 1px -1px 5px rgba(45, 22, 0, 0.5),
		-1px  1px 5px rgba(45, 22, 0, 0.5),
		-1px -1px 5px rgba(45, 22, 0, 0.5),
		 0px  0px 5px rgba(45, 22, 0, 0.5),
		 0px -0px 5px rgba(45, 22, 0, 0.5),
		-0px  0px 5px rgba(45, 22, 0, 0.5),
		-0px -0px 5px rgba(45, 22, 0, 0.5);
	font-size: 44px;
}
.aboutUs #pageTitle__outer {
	background-image: url("../img/header/office_space.webp");
	background-position: center 30%;
}
.compliance #pageTitle__outer {
	background-image: url("../img/header/businessman_compliance_meeting.webp");
	background-position: center 20%;
}
.contactUs #pageTitle__outer {
	background-image: url("../img/header/telephone.webp");
	background-position: center 20%;
}
.fxOnline #pageTitle__outer {
	background-image: url("../img/header/typing_hands_laptop.webp");
	background-position: center 20%;
}

/* ---------------------------------
 Side Column (Navi)
--------------------------------- */
.outerMenu {
	margin: 0 0 20px;
}
.menuTitle { /* h3 */
	position: relative;
	margin: 0 0 5px;
	letter-spacing: 2px;
	text-align: center;
	font-weight: 500;
	font-size: 20px;
}
.menuTitle::before {
	position: relative;
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	margin: 0 0 10px;
	background-color: #000;
}
.menuTitle::after {
	position: relative;
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	margin: 10px 0 0;
	background-color: #000;
}
.menuTitle span::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	margin: 0 7px 0 0;
	background-color: var(--silver);
	vertical-align: -4px;
}
#marketData__title::before {
	mask: url("../img/icon/icon_graph_simple.svg") no-repeat 50% 50% / contain;
	-webkit-mask: url("../img/icon/icon_graph_simple.svg") no-repeat 50% 50% / contain;
}
#menu__title::before {
	mask: url("../img/icon/icon_list.svg") no-repeat 50% 50% / contain;
	-webkit-mask: url("../img/icon/icon_list.svg") no-repeat 50% 50% / contain;
}


/* Menu about Panel */
.indexPanel {
	list-style-type: none;
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width:100%;
}
.panel__item {
	transition: background-color 1.0s ease;
	flex: 0 0 calc( 50% - 0.5px );
	margin: 0 0 1px;
	background-color: var(--navy);
}
.panel__item:hover {
	background-color: var(--deep-navy);
}

.panel__item a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 118px;
	text-decoration: none;
	text-align: center;
	font-weight: 600;
	font-size: 14px;
	color: #fff;
}
.panel__item:nth-child(3):last-child {
	flex: 0 0 100%;
}
.panel__item:nth-child(4) {
	flex: 0 0 calc( 50% - 1px );
}
.panel__item span::before {
	content: "";
	display: block;
	width: 74px;
	height: 66px;
	margin: 0 auto 7px;
	background-color: #fff;
}
.panel__item#panel__item--news span::before {
	mask: url("../img/icon/icon_news.svg") no-repeat 50% 50% / contain;
	-webkit-mask: url("../img/icon/icon_news.svg") no-repeat 50% 50% / contain;
}
.panel__item#panel__item--graph span::before {
	mask: url("../img/icon/icon_graph.svg") no-repeat 50% 50% / contain;
	-webkit-mask: url("../img/icon/icon_graph.svg") no-repeat 50% 50% / contain;
}
.panel__item#panel__item--swap span::before {
	mask: url("../img/icon/icon_swap.svg") no-repeat 50% 50% / contain;
	-webkit-mask: url("../img/icon/icon_swap.svg") no-repeat 50% 50% / contain;
}
.panel__item#panel__item--chart span::before {
	mask: url("../img/icon/icon_chart.svg") no-repeat 50% 50% / contain;
	-webkit-mask: url("../img/icon/icon_chart.svg") no-repeat 50% 50% / contain;
}
.panel__item#panel__item--gold span::before {
	mask: url("../img/icon/icon_gold.svg") no-repeat 50% 50% / contain;
	-webkit-mask: url("../img/icon/icon_gold.svg") no-repeat 50% 50% / contain;
}

/* Menu on Image */
.menu__onImage {
	list-style-type: none;
}
.menu__byPlane {
	list-style-type: none;
}
.menu__onImage .menu__item { /* li */
	transition: filter 0.4s ease;
	filter: saturate(110%);
	position: relative;
	margin: 0 0 2px;
	background-color: var(--navy);
}
.menu__onImage .menu__item:hover {
	filter: saturate(75%);
}
.menu__onImage .menu__item::before {
	cursor: pointer;
	z-index: 1;
	transition: opacity 0.4s ease;
	opacity: 0.0;
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000a1c;
}
.menu__onImage .menu__item:hover::before {
	opacity: 0.3;
}
.menu__onImage .menu__item a {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	height: 72px;
	padding: 0 20px;
	text-decoration: none;
	font-weight: 600;
	text-shadow:
		 1px  1px 5px rgba(0, 0, 34, 0.5),
		 1px -1px 5px rgba(0, 0, 34, 0.5),
		-1px  1px 5px rgba(0, 0, 34, 0.5),
		-1px -1px 5px rgba(0, 0, 34, 0.5),
		 0px  0px 5px rgba(0, 0, 34, 0.5),
		 0px -0px 5px rgba(0, 0, 34, 0.5),
		-0px  0px 5px rgba(0, 0, 34, 0.5),
		-0px -0px 5px rgba(0, 0, 34, 0.5);
	color: #fff;
}
.menu__onImage .menu__item span {
	position: relative;
	display: block;
	width: 100%;
}
.menu__onImage .menu__item span::after {
	position: absolute;
	top: 7px;
	right: 0;
	content: "";
	display: inline-block;
	width: 30px;
	height: 10px;
	background-image: url("../img/icon/arrow_long_right_white.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#menu__item--swap {
	background-image: url("../img/side/swap.webp");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#menu__item--margin {
	background-image: url("../img/side/margin.webp");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#menu__item--phone {
	background-image: url("../img/side/phone.webp");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#menu__item--call {
	background-image: url("../img/side/call.webp");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

/* Menu by Plane */
.menu__byPlane .menu__item {
	margin: 0 0 2px;
}
.menu__byPlane .menu__item a {
	transition: background-color 1.0s ease;
	display: flex;
	align-items: center;
	height: 52px;
	padding: 0 20px;
	background-color: var(--water);
	text-decoration: none;
	line-height: 1.2;
	letter-spacing: 2px;
	font-weight: 500;
	font-size: 15px;
	color: var(--navy);
}
.menu__byPlane .menu__item a:hover {
	background-color: var(--deep-water);
}
.menu__byPlane small {
	display: inline-block;
	margin: 0 6px 0 0;
	padding: 2px 4px 2px 6px; 
	background-color: var(--dull-blue);
	border-radius: 2px;
	font-size: 12px;
	font-weight: 500;
	font-family:
		"Outfit",
		"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
		"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
		"游ゴシック Medium", "Yu Gothic Medium",
		"游ゴシック", "YuGothic",
		"メイリオ", "Meiryo",
		sans-serif;
	color: #fff;
}

/* Contact Information */
.contactInformation {
	border: solid 2px var(--vivid-blue);
}
.contactInformation__title {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	background-color: var(--vivid-blue);
	letter-spacing: 2px;
	font-size: 19px;
	color: #fff;
}
.contactInformation__title span {
	display: block;
	line-height: 1.1;
	text-align: center;
}
.contactInformation__title .note {
	letter-spacing: 1px;
	font-weight: 500;
	font-size: 13px;
}
.contactInformation__content {
	padding: 18px 13px 15px;
}
.sectionInfo {
	flex: 0 0 calc( 50% - 20px );
}
.sectionInfo:first-child {
	margin: 0 0 30px;
}

.fxOnline .sectionInfo:first-child {
	margin: 0;
}
.sectionInfo__label {
	padding: 0 0 7px;
	margin: 0 0 10px;
	border-bottom: solid 2px var(--dull-blue);
}
.sectionInfo__label::before {
	content: '';
	display: inline-block;
	width: 25px;
	height: 25px;
	margin-right: 0px;
	background-image: url("../img/icon/bill.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	vertical-align: -4px;
}
.sectionInfo__label span {
	font-weight: 600;
	font-size: 17px;
	color: var(--dull-blue);
}
.sectionInfo__number {
	text-align: center;
}
.toiawase .telnumber {
	letter-spacing: 2px;
	font-weight: 600;
	font-size: 28px;
}
.toiawase .telnumber::before {
	content: '';
	display: inline-block;
	width: 27px;
	height: 27px;
	margin-right: 7px;
	background-image: url("../img/icon/telphone_boldline.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	vertical-align: -4px;
}
.sectionInfo__number .note {
	display: block;
	margin: 5px 0 0;
	letter-spacing: 0.5px;
}

/* compliance menu */
#compliance__menuTitle {
	padding: 14px 20px 11px;
	background-color: var(--light-gray);
	font-weight: 500;
	letter-spacing: 2px;
	font-size: 16px;
	color: #000;
}
#compliance__menuTitle span::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 5px;
	background-image: url("../img/icon/rect_exclamation_mark.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	vertical-align: -3px;
}
#compliance__menuInner {
	padding: 5px 16px 9px;
	border: solid 3px var(--light-gray);
}
.menu__white {
	list-style-type: none;
}
.menu__white a {
	transition: color 0.4s ease;
	display: block;
	padding: 9px 2px 10px;
	border-bottom: dashed 1px var(--light-silver);
	text-decoration: none;
	font-weight: 400;
	font-size: 15px;
	color: #333;
}
.menu__white a:hover {
	color: var(--pink);
}
.menu__white .menu__item:last-child a {
	border-bottom: 0;
}
.menu__white small {
	transition: background-color 0.4s ease;
	display: inline-block;
	margin: 0 4px 0 0;
	padding: 2px 5px 2px 6px; 
	background-color: var(--silver);
	border-radius: 2px;
	font-size: 12px;
	font-weight: 500;
	font-family:
		"Outfit",
		"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
		"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
		"游ゴシック Medium", "Yu Gothic Medium",
		"游ゴシック", "YuGothic",
		"メイリオ", "Meiryo",
		sans-serif;
	color: #fff;
}
.menu__white a:hover small {
	background-color: var(--pink);
}

/* FX Online */
#fxOnline-account-opening {
	width: 300px;
	height: 250px;
	margin: 0 0 2px;
}
#fxOnline-account-opening__link {
	position: relative;
	display: block;
	width: 300px;
	height: 250px;
	border: 1px solid #6587b5;
	background-image: url("../img/side/fxonline_account_opening.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
#fxOnline-ao__link--catch {
	position: absolute;
	left: 3px;
	top: 48px;
}
#fxOnline-ao__link--bottom {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 44px;
	background-color: rgba(19, 71, 141, 0.65);
}
#fxOnline-ao__link--bottom span {
	display: block;
	text-indent: 3px;
	font-weight: 600;
	font-size: 16px;
	color: #fff;
}
#fxOnline-ao__link--bottom span::after {
	content: "";
	display: inline-block;
	width: 20px;
	height: 8px;
	margin: 0 0 0 8px;
	background-color: #fff;
	mask: url("../img/icon/arrow_short_right_white.svg") no-repeat 50% 50% / contain;
	-webkit-mask: url("../img/icon/arrow_short_right_white.svg") no-repeat 50% 50% / contain;
	vertical-align: 3px;
}

#fxOnline-tradeTool {
	width: 300px;
	height: 250px;
	margin: 0 0 2px;
}
#fxOnline-tradeTool__link { /* a */
	position: relative;
	display: block;
	width: 300px;
	height: 250px;
	background-image: url("../img/side/trade_tools_back.webp");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	text-decoration: none;
	color: #fff;
}
#fxOnline-tradeTool__title {
	position: absolute;
	left: 0;
	top: 12px;
}
#fxOnline-tradeTool__logo {
	filter:
		drop-shadow(0px 0px 1px #fff)
		drop-shadow(0px 0px 1px #fff)
		drop-shadow(0px 0px 1px #fff)
		drop-shadow(0px 0px 1px #fff)
		drop-shadow(0px 0px 2px #fff);
}
#fxOnline-tradeTool__text {
	margin: 3px;
	padding: 3px 44px 3px 10px;
	line-height: 1;
	font-weight: 700;
	font-size: 24px;
	background-color: rgba( 0, 0, 25, 0.7);
	color: #fff;
}
#fxOnline-tradeTool__text small {
	font-size: 14px;
}
#fxOnline-tradeTool__download {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 44px;
}
#fxOnline-tradeTool__download em {
	display: block;
	width: 217px;
	padding: 2px 0 3px;
	margin: auto;
	border-radius: 50vh;
	background-color: #fff;
	text-align: center;
}
#fxOnline-tradeTool__download em span {
	display: block;
	text-indent: 15px;
	font-weight: 700;
	font-size: 19px;
	color: var(--deep-navy);
}
#fxOnline-tradeTool__download em span::after {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0 0 0 5px;
	background-color: var(--deep-navy);
	mask: url("../img/icon/icon_download.svg") no-repeat 50% 50% / contain;
	-webkit-mask: url("../img/icon/icon_download.svg") no-repeat 50% 50% / contain;
	vertical-align: -2px;
}

/* ---------------------------------
 FX Online Faq
--------------------------------- */
.coreContents .faq {
	counter-reset: question-counter;
}
.coreContents ul.q_and_a {
	list-style-type: none;
	padding: 0 0 40px;
	margin: 0 0 40px;
	border-bottom: 1px dotted var(--gray);
	line-height: 1.9;
	font-size: 17px;
}
.q_and_a li {
	position: relative;
}
.q_and_a > li:nth-child(1) {
	counter-increment: question-counter;
	margin: 0 0 30px;
	padding: 0 0 0 80px;
	font-weight: 600;
	font-family:
		"Noto Sans JP",
		"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
		"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
		"游ゴシック Medium", "Yu Gothic Medium",
		"游ゴシック", "YuGothic",
		"メイリオ", "Meiryo",
		sans-serif;
	font-size: 20px;
}
.q_and_a > li:nth-child(1)::before {
	position: absolute;
	top: -17px;
	left: 0px;
	display: block;
	content: "Q" counter(question-counter) ". ";
	margin: 0 0 0 0;
	font-weight: 500;
	font-family:
		"Outfit",
		"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
		"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
		"游ゴシック Medium", "Yu Gothic Medium",
		"游ゴシック", "YuGothic",
		"メイリオ", "Meiryo",
		sans-serif;
	font-size: 36px;
	color: var(--vivid-blue);
}
.q_and_a > li:nth-child(2) {
	padding: 0 0 0 75px;
}
.q_and_a > li:nth-child(2)::before {
	position: absolute;
	top: -17px;
	left: 0px;
	display: block;
	content: "A" counter(question-counter) ". ";
	margin: 0 0 0 1px;
	font-weight: 500;
	font-family:
		"Outfit",
		"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
		"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
		"游ゴシック Medium", "Yu Gothic Medium",
		"游ゴシック", "YuGothic",
		"メイリオ", "Meiryo",
		sans-serif;
	font-size: 32px;
	color: var(--pink);
}
.coreContents .q_and_a > li:nth-child(2) p:nth-child(1) {
	display: inline;
}
.coreContents .q_and_a > li:nth-child(2) p:nth-child(2) {
	margin: 30px 0;
}
.coreContents .q_and_a > li ul {
	margin: 10px 0 30px 25px;
}
.coreContents .q_and_a > li ul li {
	margin: 0;
}

/* ---------------------------------
 Glossary
--------------------------------- */
.coreContents #glossaryIndex ul {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 50px;
}
.coreContents #glossaryIndex ul li {
	flex: 0 0 calc( 100% / 7 );
	margin: 0 0 1px;
}
#glossaryIndex ul li a {
	transition: background-color 0.4s ease;
	display: block;
	width: 100%;
	padding: 11px 0 10px;
	border-right: 1px solid #fff;
	background-color: var(--navy);
	text-decoration: none;
	text-align: center;
	color: #fff;
}
#glossaryIndex ul li a:hover {
	background-color: var(--bright-navy);
}
#glossaryIndex ul li:nth-child(7) a,
#glossaryIndex ul li:last-child a {
	border-right: 1px solid #fff;
}
#glossaryIndex::before {
	display: block;
	content: "用語集INDEX";
	margin: 0 0 5px;
	font-weight: 500;
	font-family:
		"Noto Sans JP",
		"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
		"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
		"游ゴシック Medium", "Yu Gothic Medium",
		"游ゴシック", "YuGothic",
		"メイリオ", "Meiryo",
		sans-serif;
	font-size: 17px;
}
.glossary tbody tr:nth-child(even) td {
	background-color: var(--pale-gray);
}

/* ---------------------------------
 Google Map
--------------------------------- */
.google-map {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.google-map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.google-map:has(+ :is(h4)) {
	margin: 0 0 100px;
}
.google-map:has(+ :is(h5, h6)) {
	margin: 0 0 40px;
}

/* ---------------------------------
 Greeting
--------------------------------- */
.coreContents #greeting p {
	margin: 0 0 50px;
	letter-spacing: 2px;
	line-height: 2;
	font-size: 17.5px;
}

/* ---------------------------------
 Request
--------------------------------- */
.required {
	display: block;
	width: 84px;
	margin: 5px 0 0;
	padding: 3px 0 2px;
	border-radius: 3px;
	background-color: var(--turquoise);
	text-align: center;
	font-weight: 500;
	font-size: 14px;
	color: #fff;
}
/* MW WP Form
------------------------- */
.mw_wp_form input {
	padding: 5px;
}
.mw_wp_form input::placeholder {
	color: #ccc;
}
.mw_wp_form textarea {
	padding: 20px;
}
.mw_wp_form input[type="text"],
.mw_wp_form input[type="email"],
.mw_wp_form textarea {
	width: 100%;
	border: solid 1px #999;
}
.mw_wp_form select {
	padding: 7px 10px;
}
.mw_wp_form select option {
	padding-right: 10px;
	margin-left: 10px;
}
.mw_wp_form input[type="submit"] {
	transition: 0.4s;
	cursor: pointer;
	position: relative;
	width: 240px;
	padding: 12px 0 11px;
	border: none;
	background-color: var(--navy);
	letter-spacing: 2px;
	line-height: 1;
	font-size: 19px;
	color: #fff;
}
.mw_wp_form input[type="submit"]:hover {
	background-color: var(--bright-navy);
}
.mw_wp_form_preview dd {
	color:#039;
}
.wrap-submit {
	position: relative;
	display: inline-block;
}
.mw_wp_form {
	margin: 0 0 50px;
}
.button-area {
	text-align: center;
}


/* ---------------------------------
 FX Online
--------------------------------- */
.step {
	margin: 0 0 100px;
}
.mw_wp_form_confirm p {
	margin: 0;
}
[type*="submit"] {
	margin: 0 0 10px;
}
#msg-error p {
	margin: 0;
}
[class*=account-opening] .waku p {
	margin: 0;
}

/* Account Opening */
[class*="account-opening"] #main_column {
	width:100%;
}
[class*="account-opening"] #page-header-image,
[class*="account-opening"] #side_column {
	display:none;
}
.step section {
	padding:0 0 10px;
}
.step .flow {
	width: 100%;
	margin: 0 0 50px;
	border-top: 1px solid var(--navy);
	border-left: 1px solid var(--navy);
	border-right: 1px solid var(--navy);
	border-collapse: collapse;
}

.step .flow td {
	width: calc( 100%/3 );
	padding: 5px;
	border-bottom: 1px solid var(--navy);
}
.step .flow td.cur {
	background-color: var(--navy);
}
.step .flow td.cur .lav,
.step .flow td.cur .act {
	color:#fff;
}
.step .flow td.cur2 {
	background-image:url("../img/back/del_B.png");
	background-repeat:no-repeat;
	background-position: left top;
	background-size:contain;
}
.step .flow td.cur3 {
	background-image:url("../img/back/del_L.png");
	background-repeat:no-repeat;
	background-position: left top;
	background-size:contain;
}
.step .flow td.cur4 {
	background-image:url("../img/back/del_W.png");
	background-repeat:no-repeat;
	background-position: left top;
	background-size:contain;
}
.mw_wp_form_preview .step .flow td.cur.cur4 {
	background-color:#fff;
	background-image:url("../img/back/del_L.png");
	background-repeat:no-repeat;
	background-position: left top;
	background-size:contain;
}
.mw_wp_form_preview .step .flow td.cur.cur4 .lav {
	color: var(--dull-blue);
}
.mw_wp_form_preview .step .flow td.cur.cur4 .act {
	color:#000;
}
.mw_wp_form_preview .step .flow td.cur2 {
	background-color: var(--navy);
}
.mw_wp_form_preview .step .flow td.cur2 .lav,
.mw_wp_form_preview .step .flow td.cur2 .act {
	color:#fff;
}
.mw_wp_form_preview .step .flow td.cur2 {
	background-image:url("../img/back/del_W.png");
	background-repeat:no-repeat;
	background-position: left top;
	background-size:contain;
}

.step .flow td br {
	display:none;
}
.step .flow td span {
	display:block;
	font-family:
		"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic",
		"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN",
		"メイリオ", "Meiryo",
		sans-serif;
}
.step .flow td .lav {
	padding:0 0 0 14px;
	font-weight:900;
	font-size:12px;
	color: var(--bright-blue);
}
.step .flow td .act {
	padding:0 0 0 7px;
	text-align:center;
	letter-spacing: 1px;
	font-weight:900;
	font-size:15px;
}

.page .core_contents .step h4 {
	margin:0 0 14px;
	font-weight:bold;
	color: var(--bright-blue);
}
.page .core_contents .step p {
	margin:0 0 14px;
}
.step ul,
.step ol {
	margin:0 0 20px 18px;
}
.step ul li,
.step ol li {
	margin:0 0 6px;
}

[class^="ques"] {
	display:flex;
	padding:7px 0px 5px 10px;
	background-color:#c9e4ff;
	border-radius:5px;
}
[class*="ques"] dt {
	flex:0 0 76%;
}
[class*="ques"] dd {
	flex:0 0 24%;
}
[class*="ques"] dd br {
	display:none;
}
[class*="ques"] dd input[type="radio"] {
	display:inline-block;
	margin-right:3px;
	vertical-align:-2px;
}
[class*="ques"] dd span {
	display:inline-block;
	margin-right:12px;
}
[class*="ques"].agree {
	background-color:#d2ffc9;
}
[class*="ques"].not-agree {
	background-color:#ffc9c9;
}
.ques2 {
	display:block;
	overflow:hidden;
	margin:0 0 20px;
	padding:7px 10px 5px;
}
.ques2 dt {
	margin-bottom:12px;
}
.ques2 dd {
	float:right;
	padding-right:10px;
}
.ques2 li {
	font-size:13px;
}
.ques3 dt {
	flex:0 0 63%;
}
.ques3 dd {
	flex:0 0 37%;
}

#error-message {
	display:none;
	margin:15px 0 0;
	padding:5px 10px;
	border:solid 1px #f00;
	color:#f00;
}

/* Step2 */
.step input[type*="text"] {
	width:150px;
}
.step input[type*="text"].w100,
.step input[type*="email"] {
	width:100%;
}
.step input[type*="text"].w65 {
	width:65%;
}
.step .tb {
	width: 100%;
	margin: 0 0 100px;
	border-collapse: collapse;
	border-top:solid 1px #bbb;
}
.step .tb th,
.step .tb td {
	padding:12px 10px 10px;
}
.step .tb th {
	width: 250px;
	border-bottom:solid 1px #bbb;
	background-color:#f1f5f9;
	text-align:left;
	vertical-align:top;
	letter-spacing:1px;
}
.step .tb td {
	width:auto;
	border-bottom:solid 1px #bbb;
	vertical-align:top;
}
.step .tb th .required {
	display:inline-block;
	width:44px;
	margin-left:3px;
	padding:3px 0 1px;
	border-radius:3px;
	background-color:#549fed;
	line-height:1;
	letter-spacing:0px;
	vertical-align:1px;
	text-align:center;
	font-weight:normal;
	font-size:11px;
	color:#fff;
}
.step .tb th .required.wide {
	width:130px;
	margin-left:0px;
}
.step .tb td div {
	margin:0 0 6px;
}
.step .tb td small {
	font-size:12px;
}
.step .tb td .mwform-checkbox-field input,
.step .tb td .mwform-radio-field input {
	margin-right: 0px;
}
.step .tb td.experience span {
	display:inline-block;
	width:185px;
}
.step .tb td#motivation .horizontal-item {
	display:block;
}
.mw_wp_form td#motivation .horizontal-item + .horizontal-item {
	margin-left: 0px;
}
#motivation #sample {
	display:none;
}
#motivation span[id*="samp"] {
	display:block;
	margin:0 0 5px;
}
.step .tb img {
	width:240px;
	height:auto;
}
.lab-name:after {
	content:" ";
}
.mw_wp_form_preview .lab-name:after {
	content:": ";
}
.step .tb td div.mw-wp-form_image {
	margin:10px 0 0;
}
.mw_wp_form_preview .step .tb small {
	display:none;
}
.mw-wp-form_image + br {
	display:none;
}
.request-caution,
[class*=account-opening] .waku {
	padding:20px 15px;
	margin:0 0 20px;
	border:double 3px #cce198;
	background-color:#f7fff1;
	font-weight:bold;
	font-size:14px;
}
.request-caution p {
	margin: 0;
}
.mw_wp_form #request .error {
	color: var(--pink);
}
[class*=account-opening] .mw_wp_form_input .waku {
	display:none;
}
[class*=account-opening] .mw_wp_form_preview .waku#msg-confirm {
	display:block;
}
[class*=account-opening] .mw_wp_form_error .waku#msg-error {
	display:block;
}
[class*=account-opening] .mw_wp_form_error .waku#msg-confirm {
	display:none;
}
[class*=account-opening] .mw_wp_form_preview .waku#msg-error {
	display:none;
}
.page [class*=account-opening] .core_contents .step .waku p {
	margin:0;
}
.mw_wp_form .outer-name .error {
	display: inline-block;
}
[class*=account-opening] .mw_wp_form_preview #purpose-of-investment div,
[class*=account-opening] .mw_wp_form_preview #motivation div {
	height:0;
	overflow:hidden;
}
[class*=account-opening] .mw_wp_form .error {
	color: #f00;
}

.comb {
	margin:0 0 12px;
}
.comb dt {
	font-weight:bold;
}
.comb dd {
	padding:7px 10px;
	border:dotted 1px #666;
	font-size:12px;
}

/* ---------------------------------
 Swap Calendar
--------------------------------- */
.swap-calendar img {
	display: inline-block;
	width: 36px;
	height: 24px;
	margin: 0 7px 0 0;
	border: 1px solid var(--light-silver) ;
	vertical-align: -5px;
}
.with-border {
	border: 1px solid var(--light-silver) ;
}
.coreContents table.swap-calendar tbody th {
	text-align: center;
}
.current-sp {
	text-align: center;
}
.days {
	text-align: center;
}
.ta-right {
	text-align: right;
}
.ta-center {
	text-align: center;
}

/* ---------------------------------
 Sitemap (contents)
--------------------------------- */
.coreContents .sitemap {
	margin: 0 0 70px;
}
.coreContents ul.sitemap-menu {/* ul */
	list-style-type: none;
	display: grid;
	gap: 10px 15px;
	grid-template-columns: repeat(2, 1fr);
	margin: 0 0 20px;
}
.coreContents .sitemap div:has(+ :is(h5, h6)) {
    margin: 0 0 30px;
}
.coreContents ul.sitemap-menu li {
	margin: 0;
}
.coreContents ul.sitemap-menu a {
	display: block;
	padding: 5px 5px 7px;
	border-bottom: 1px solid var(--light-silver);
	text-decoration: none;
	font-size: 16px;
}

/* CX「今週の取引証拠金」テーブル */
/* テーブル全体の基本設定 */
.coreContents table.trading-margin {
	border-collapse: collapse;
	width: 100%;
}
.coreContents table.trading-margin tbody th,
.coreContents table.trading-margin tbody td {
	border: 1px solid #ccc;
	padding: 8px;
}

/* 取引所の縦書き設定 */
.ex-cell {
	text-align: center;
	vertical-align: middle;
	/*writing-mode: vertical-rl;*/
}
.ex-cell .vertical-wrapper {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.ex-cell .vertical-box {
	display: inline-block;
	writing-mode: vertical-rl;
	width: fit-content;
	height: max-content;
	min-height: 1em;
	margin: 0 auto;
}
.ex-cell .vertical {
	writing-mode: vertical-rl;
	display: inline-block;
	margin: 0 auto;
	text-align: center;
}


/* 商品名の中央揃え */
.p-cell {
	text-align: center;
	vertical-align: middle;
}

/* ★ ここが重要！ 上段と下段の間の線を点線にする */
.coreContents table.trading-margin tbody td.num-cell.row-bottom {
	border-top: 1px dotted #ccc;
}

/* ★ここがポイント！ */
/* 1. まず「下段のセル(row-bottom)」の「上の線」を一旦消す */
.coreContents table.trading-margin td.row-bottom {
	border-top: none !important;
}

/* 2. 代わりに「上段のセル(num-cell)」の「下の線」を点線にする */
/* row-bottomクラスを持っていないnum-cellが対象 */
.coreContents table.trading-margin td.num-cell:not(.row-bottom) {
	border-bottom: 1px dotted #ddd !important;
	background-color: var(--pale-gray);
}

.coreContents table.trading-margin thead th {
	border: 1px solid #fff;
	border-left: 1px solid #7ac1e6;
}
.coreContents table.trading-margin thead th:last-child {
	border-right: 1px solid #7ac1e6;
}
.coreContents table.trading-margin thead th.border-left-0 {
	border-left: 0;
}
.coreContents table.trading-margin thead th.border-right-1 {
	border-right: 1px solid #fff;
}

.dynamic-iframe {
	width: 100%;
	/* 標準的な計算 */
	height: calc(100vh - 64px) !important;
	/* スマホのアドレスバー伸縮に対応した計算（対応ブラウザ用） */
	height: calc(100dvh - 64px) !important;
	border: none;
	display: block;
}

.flexbox-centerline {
	display: flex;
}
.flexbox-centerline figure {
	flex: 0 0 330px;
}
.flexbox-centerline p {
	display: flex;
	align-items: center;
}

ul.step-bar {
	margin: 0 0 50px;
}
.step-bar {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
	background: #fff;
}

.step-bar li {
	position: relative;
	flex: 1;
	height: 60px; /* 高さを固定すると綺麗に見えます */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #fff;
	color: #000;
	border-top: 1px solid var(--navy);
	border-bottom: 1px solid var(--navy);
	margin-right: 20px; /* 矢印の出っ張り分、隙間を作る */
	box-sizing: border-box;
	line-height: 1.4;
}

/* --- 矢印の先端（右側） --- */
.step-bar li::after {
	content: "";
	position: absolute;
	top: -1px; /* 親のborder分ずらす */
	right: -20px;
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 20px solid #fff; /* 中の色 */
	z-index: 2;
}

/* 矢印の枠線部分 */
.step-bar li::before {
	content: "";
	position: absolute;
	top: -1px;
	right: -21px;
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 20px solid var(--navy); /* 枠線の色 */
	z-index: 1;
}

/* --- 矢印の凹み（左側） --- */
/* 2番目以降の要素に凹みを作る */
.step-bar li:not(:first-child)::after {
	/* 前の要素の矢印を受け入れるための背景色を左側に配置 */
}

/* 先頭の要素の設定 */
.step-bar li:first-child {
	border-left: 1px solid var(--navy);
}

/* 最後の要素の設定 */
.step-bar li:last-child {
	border-right: 1px solid var(--navy);
	margin-right: 0;
}
.step-bar li:last-child::after,
.step-bar li:last-child::before {
	display: none; /* 最後は尖らせない場合 */
}

/* --- アクティブ状態（色付き） --- */
.step-bar li.active {
	background: var(--navy);
	color: #fff;
}

.step-bar li.active::after {
	border-left-color: var(--navy); /* 矢印の色も塗りつぶす */
}
.step-num {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 2px;
	color: var(--turquoise);
}
li.active .step-num {
	color: #fff;
}
.step-txt {
	letter-spacing: 1px;
	font-size: 15px;
	font-weight: bold;
}
/* --- end of css --- */