@charset "utf-8";

html{
	font-size:16px;	
}

h1{
	font-size:1.3rem !important;	
}

h2{
	font-size:1.2rem !important;	
}

h3,h4{
	font-size:1.1rem !important;	
}
h1,h2,h3,h4{
	margin-bottom:2vh;	
}

body{
	margin:0px;
	padding:0px;
	width:100%;	
	font-family: arial,sans-serif;
	line-height:162%;
}

.display-center{
	position:fixed;
	width:40%;
	height:auto;
	padding:20px;
	top:300px;
	left:30%;
}


/* --------------- */
/* widow幅設定 */

body > footer,
.field-outer{
	padding:0 10vw;
}

body > header{
	border-bottom:1px solid hsl(var(--themes-color),0%,80%);
}

body > header nav{
	text-align:center;
}

body > header nav > *{
	width:100%;
}


body > header nav > .name{
	padding:2vh 10vw !important;	
}

body > header nav > .name > a{
	color:#000;
	text-decoration:none;
	font-size:1.3rem;
}


body > header nav > ul{
	background:hsl(var(--themes-color),75%,30%);
	gap:1vh 1vw;
	padding:1vh 10vw;
}

body > header nav > ul > li{
	border-left:1px dotted hsl(var(--themes-color),0%,95%);
	flex-grow:1;
	text-align:center;
	position:relative;
}
body > header nav > ul > li:last-of-type{
	border-right:1px dotted hsl(var(--themes-color),0%,95%);
}

body > header nav > ul > li > *,
body > header nav > ul > li > *:hover,
body > header nav > ul > li > *:visited
{
	color:#fff;	
	text-decoration:underline;
}

body > header nav > ul > li > span,
body > header nav > ul > li > a
{
	padding:1vh 2vw;
	display:block;
}

body > header nav > ul > li > div{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	width:100%;
	background:#fff;
	border:1px dotted hsl(var(--themes-color),75%,30%);
}

body > header nav > ul > li > div > *{
	display:block;
	border-bottom:1px dotted hsl(var(--themes-color),0%,95%);
	padding:.5vh 1vw;
}

main > *{
	padding:2vh 10vw 4vh;
}

main > * > *{
	margin-top:2vh;	
}

main > *:nth-of-type(odd){
	background:hsl(var(--themes-color),0%,97%);
}

main > * > .eyecatch-brocker{
	gap:2vw;
	margin-top:2vh;
}

main > * > .eyecatch-brocker > *{
	border-color:hsl(var(--themes-color),0%,80%);
	border-top:4px solid hsl(var(--themes-color-red),80%,50%);
	flex-grow:1;
}

main > .comparison > .description > .flex{
	gap:1vh 1vw;
	flex-wrap:wrap;
	margin-top:1vh;
}

main > .comparison > .description > .flex > *{
	border:1px solid hsl(var(--themes-color),0%,80%);
	border-top:4px solid hsl(var(--themes-color-red),80%,50%);
	flex-grow:1;
	padding:1vh 1vw;
	text-align:center;
}

main > .comparison > .list,
main > .bonus > .flex,
main > .articles > .flex

{
	gap:2vh 2vw;
}

main > .comparison > .list > *,
main > .bonus > .flex > *,
main > .articles > .flex > *
{
	width:48%;
	flex-grow:1;
	border:1px solid hsl(var(--themes-color),0%,90%);
	border-top:4px solid hsl(var(--themes-color),0%,90%);
	padding:1vh 1vw;
}

main > .articles > .flex > .flex{
	gap:2vw;
	color:#000;
	text-decoration:none;
}

main > .articles > .flex > .flex > *{
	width:60%;
}

main > .articles > .flex > .flex > * > .title{
	display:block;
	font-weight:bold;
	color:var(--themes-color-link);
	text-decoration:underline;
}

main > .articles > .flex > .flex > .thumb{
	width:30%;
}

main > .comparison > .list > * > *,
main > .bonus > .flex > * > *
{
	margin-bottom:1.5vh;	
}


main > .comparison > .list > * > *{
	margin-top:2vh;
}

main > .profile > .flex{
	gap:2vh 2vw;
}

main > .profile > .flex > *{
	width:48%;
	flex-grow:1;
}

main > .profile > .flex > .flex{
	gap:2vh 2vw;
}

main > .profile > .flex > .flex > *{
	border-bottom:1px dotted hsl(var(--themes-color),0%,90%);
	padding:0 1vh;
	width:47%;
	flex-grow:1;
}

main > .profile .broker,
main > .bonus > .flex > .broker,
main > * > .broker
{
	padding:1.5vh 1vw;
	border:1px solid hsl(var(--themes-color),0%,90%);
	border-left-width:4px;
	display:block;
	width:100%;
}

main > .q-a > ol > *{
	padding:1.5vh 0;
	border-bottom:1px dotted hsl(var(--themes-color),0%,90%);
}

main > .q-a > ol > *:last-of-type{
	border-bottom:none;
}

main > .detail *[class*="grid"]{
	display:flex;	
	gap:1vh 1vw;
	width:100% !important;
	flex-wrap:wrap;
}

main > .detail *[class*="grid"] .clm{
	padding:1vh 1vw;
	border:1px solid hsl(var(--themes-color),0%,90%);
	font-size:1rem;
}

main > .detail *[class*="outer"]{
	width:100%;
}

.brokers-link,
.broker-fix
{
	gap:1vw;
}

.broker-fix{
	position:fixed;
	top:0;
	left:0;
	background:hsla(var(--themes-color),0%,100%,.9) !important;
	padding:1vh 1vw 1.5vh;
	margin:0;
	width:100%;
}

.broker-fix > *,
.brokers-link > *
{
	width:48%;
	flex-grow:1;
	padding:2vh 1vw;
	background:#F00;
	text-align:center;
	font-weight:bold;
}

.broker-fix *,
.brokers-link *
{
	color:#fff !important;
}


.brokers-link > .xm
{
	background:hsl(var(--themes-color-green),50%,40%);
}

.brokers-link > .iforex
{
	background:hsl(var(--themes-color-skyblue),75%,40%);
}

.broker-fix > img,
.brokers-link > img
{
	display:none;	
}

@media screen and (max-width: 800px) {
	main > .comparison > .list > *,
	main > .bonus > .flex > *,
	main > .profile > .flex > *,
	main > .profile > .flex > .flex > *,
	main > .articles > .flex > *
	{
		width:100%;
	}

	body > footer,
	.field-outer{
		padding:0 1.5vw;
	}


	body > header nav > .name{
		padding:.5vh 1.5vw !important;	
	}

	body > header nav > ul{
		padding:.5vh 1vw;
	}
	
	main > *{
		padding:2vh 1.5vw 4vh;
	}


}