@charset "utf-8";

/**
 *
 * index: トップページ
 *
 */
/*
*/
/*----------------------------
	Info
-----------------------------*/
#Info {
	background: #fff;
	padding: 20px 30px;
	/* box-shadow */
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
}

#Info li {
	display: block;
	position: relative;
	padding: 2px 20px 2px 0;
}

#Info li:nth-of-type(1) {
	/*background: #ddd;*/
}

/* Fix bug click icon news detail in screen main001 - IFI*/
#Info a::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 24px;
	vertical-align: middle;
	background-size: contain;
	margin: 0 5px 0 0;
}

#Info li.book::before {
	background: url(../images/ico-book.png) no-repeat center center;
	background-size: contain;
}

#Info li::after {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	background: url(../images/ico-close.png) no-repeat center center;
	background-size: contain;
	position: absolute;
	right: 10px;
	top: 12px;
}

#Info li a {
	text-decoration: none;
	color: #32363a;
}

@media all and (max-width: 743px) {
	#Info {
		padding: 10px 15px;
		/* box-shadow */
		box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
	}

	#Info li {
		padding: 2px 10px 2px 0;
		font-size: 1.1rem;
	}

	/* Fix bug click icon news detail in screen main001 - IFI*/
	#Info a::before {
		width: 16px;
		height: 16px;
	}

	#Info li::after {
		width: 6px;
		height: 6px;
		right: 10px;
		top: 9px;
	}
}

/*----------------------------
	MyData
-----------------------------*/
#MyData {
	padding: 0;
	position: relative;
}

#MyData.theme02 {
	max-width: 750px;
	margin: 0 auto;
	padding: 20px 0 0;
}

#MyData.theme02 .inner {
	padding: 0 0 20px 0;
}

#MyDataInner {
	text-align: center;
	color: #fff;
	position: relative;
	line-height: 1;
	/*グラデーション*/
	background: rgb(20, 212, 203);
	background: -moz-linear-gradient(left, rgba(20, 212, 203, 1) 0%, rgba(95, 168, 242, 1) 100%);
	background: -webkit-linear-gradient(left, rgba(20, 212, 203, 1) 0%, rgba(95, 168, 242, 1) 100%);
	background: linear-gradient(to right, rgba(20, 212, 203, 1) 0%, rgba(95, 168, 242, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#14d4cb', endColorstr='#5fa8f2', GradientType=1);
	width: 345px;
	height: 345px;
	border-radius: 50%;
	margin: 10px auto 35px;
}

#MyData h2 {
	font-size: 2.4rem;
}

#MyData .pt {
	font-size: 4.8rem;
	margin: 10px 0;
}

#MyData .pt span {
	font-size: 6rem;
}

#MyData .trans,
#MyData .status {
	font-size: 2rem;
	background: #fff;
	color: #0c3752;
	display: block;
	width: 160px;
	height: 35px;
	line-height: 38px;
	margin: 0 auto 5px;
	border-radius: 30px;
	text-align: center;
}

#MyData .status {
	font-size: 1.6rem;
	line-height: 35px;
}

#MyData .trans.up {
	color: #cc0033;
}

#MyData .trans.up::before {
	content: "↑";
	display: inline-block;
	font-weight: bold;
	vertical-align: top;
}

#MyData .trans.down {
	color: #4957e5;
}

#MyData .trans.down::before {
	content: "↓";
	display: inline-block;
	font-weight: bold;

}

#MyData .trans span:not(.in) {
	font-size: 2.6rem;
	font-weight: normal;
	color: #32363a;
}

#MyData .update {
	margin: 15px 0 0 0;
	font-family: "Abel", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", YuGothic, '游ゴシック', Sans-Serif;
}

/*--------------------------------------------------------------------------
	helpアイコン
---------------------------------------------------------------------------*/
#MyData div.modal {
	position: absolute;
	top: 30px;
	right: 24px;
}

#MyData .help {
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;
	width: 36px;
	height: 40px;
	margin: -3px 0 0 0;
	background: url(../images/beginnermark.png) no-repeat center center;
	background-size: 25px;
}

#MyData .help.type02 {
	background: url(../images/beginnermark.png) no-repeat center center !important;
	background-size: 25px !important;
}

#MyData .help.type03 {
	background: url(../images/beginnermark.png) no-repeat center center !important;
	background-size: 25px !important;
}


#MyData .analysis {
	width: 100%;
	/* background: #a4aebd; */
	border-radius: 0;
	max-width: 750px;
	margin: 40px auto 0 auto;
	/*グラデーション
	background: rgb(20,212,203);
	background: -moz-linear-gradient(left, rgba(20,212,203,1) 0%, rgba(95,168,242,1) 100%);
	background: -webkit-linear-gradient(left, rgba(20,212,203,1) 0%,rgba(95,168,242,1) 100%);
	background: linear-gradient(to right, rgba(20,212,203,1) 0%,rgba(95,168,242,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14d4cb', endColorstr='#5fa8f2',GradientType=1 )*/
	padding: 0 30px;
	text-decoration: none;
}

#analysis {
	padding: 0 !important;
}

#MyData .analysis .inner {
	padding: 20px 30px;
}

#MyData .analysis .inner_l {
	width: 35%;
	background: #a4aebd;
	border-radius: 30px 0 0 30px;
	border-right: solid 1px #fff;
	border-style: solid solid none none;
}

#MyData .analysis .inner_r {
	width: 100%;
	background: #a4aebd;
	border-radius: 30px;
	position: relative;
	padding: 15px 40px 15px 30px;
	border: 0;
	text-decoration: none;
}

#MyData .analysis .inner_r .arw {
	position: absolute;
	right: 15px;
	max-width: 10px;
}

#MyData .analysis span {
	font-family: "Abel", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", YuGothic, '游ゴシック', Sans-Serif;
	color: #fff;
	font-size: 2.0rem;
	line-height: 1.8rem;
	letter-spacing: 0;
	letter-spacing: .1rem;
	font-weight: bold;
}

#MyData .analysis span.up {
	color: #d00f31;
}

#MyData .analysis span.dn {
	color: #105afb;
}

@media all and (max-width: 743px) {
	#analysis {
		padding: 0 15px !important;
	}

	#MyData.theme02 div.modal {
		top: 18px;
	}

	#MyData.theme02 .inner {
		padding: 0 15px 10px 15px;
	}

	#MyData {
		padding: 0;
		margin: 10px 0 0 0;
		position: relative;
	}

	#MyDataInner {
		width: 215px;
		height: 215px;
		border-radius: 110px;
		margin: 0 auto;
		padding: 20px 0;
	}

	#MyData h2 {
		font-size: 1.2rem;
	}

	#MyData .pt {
		font-size: 2.4rem;
		margin: 5px 0;
	}

	#MyData .pt span {
		font-size: 4rem;
	}

	#MyData .pt span.size01 {
		font-size: 3rem;
	}

	#MyData .trans,
	#MyData .status {
		font-size: 1.3rem;
		width: 100px;
		height: 24px;
		line-height: 24px;
	}

	#MyData .trans span {
		font-size: 1.3rem;
	}

	#MyData .trans span:not(.in) {
		font-size: 1.3rem;
	}

	#MyData .update {
		margin: 10px 0 0 0;
		font-size: 1rem;
	}

	#MyData div.modal {
		position: absolute;
		top: 8px;
		right: 15px;
	}

	#MyData .help {
		width: 35px;
		height: 35px;
		background: url(../images/beginnermark.png) no-repeat center center;
		background-size: 25px;
	}

	#MyData .trans.up,
	#MyData .trans.down {
		font-size: 1.1rem;
	}

	#MyData .analysis {
		max-width: 100%;
		width: 100%;
		padding: 0 15px;
		margin: 30px auto 30px auto;

	}

	#MyData .analysis .inner {
		padding: 0 15px 0 10px;
		align-items: center;
	}

	#MyData .analysis .inner_l {
		border: solid 1px #fff;
		border-style: none solid none none;
		height: 35px;
		padding: 0 6px 0 15px;
	}

	#MyData .analysis .inner_r {
		border: none;
		height: 35px;
		padding: 0 30px 0 20px;
	}

	#MyData .analysis .inner_r .arw {
		right: 15px;
		width: 6px;
	}

	#MyData .analysis span {
		font-size: 1.2rem;
		line-height: 1rem;
		letter-spacing: 0;
		letter-spacing: .0rem;
	}

	#MyData .analysis span.point {
		font-size: 1.2rem;
		align-self: center;
	}
}

/*----------------------------
	Graph
-----------------------------*/
#Graph {
	position: relative;
	max-width: 750px;
	margin: 0 auto;
	padding: 0;
}

#Graph .label {
	position: absolute;
	top: 90px;
	right: 60px;
}

#Graph .label img {
	width: 150px;
	height: auto;
}

#Graph #GraphData {
	text-align: center;
	width: 750px;
	margin: -30px auto 0 auto;
}

#Graph #GraphData img {
	width: 100%;
}

#Graph #Periodform {
	text-align: center;
	margin: 1em 0 0 0;
}

#Graph #Periodform select {
	width: 100%;
	background: #e1e6f0 url(../images/lower/ico-pulldown2.png) no-repeat;
	background-size: 10px;
	background-position: right 25px center;
	border-radius: 50px;
	padding: 15px 30px;
	margin: 0;
	font-size: 16px;
	line-height: 20px;
	height: 62px;
	color: #0c3752;
	border: solid 1px #bdc4ce;
}

#Graph #Periodform select:hover {
	background-color: #fff;
}

#Graph .tabs {
	padding: 30px 0 0 0;
}

#Graph .tabs li {
	width: 48%;
	height: 60px;
	line-height: 60px;
	border-radius: 30px;
	background: #ffffff;
	text-align: center;
	position: relative;
	font-size: 1.8rem;
	cursor: pointer;
	-webkit-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.04);
	-moz-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.04);
	box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.04);
}

#Graph .tabs li.active {
	background: #888fa0;
	color: #fff;
	cursor: default;
	-webkit-box-shadow: inset 1px 1px 4px 0px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: inset 1px 1px 4px 0px rgba(0, 0, 0, 0.1);
	box-shadow: inset 1px 1px 4px 0px rgba(0, 0, 0, 0.1);
}

#Graph .tabs li.active::after {
	content: "";
	display: block;
	position: absolute;
	top: -15px;
	left: 50%;
	margin: 0 0 0 -18px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 22px 18px 22px;
	border-color: transparent transparent #888fa0 transparent;
}

@media all and (max-width: 743px) {
	#Graph {
		padding: 0 0 0 0;
		position: relative;
	}

	#Graph .label {
		position: absolute;
		top: 0;
		right: 15px;
	}

	#Graph .label img {
		width: 108px;
		height: auto;
	}

	#Graph h2 {
		margin: 0 0 0 20px;
	}

	#Graph .inner {
		padding: 0;
	}

	#Graph #GraphData {
		width: 100%;
		margin: -32px auto 0 auto;
	}

	#Graph #GraphData p {
		padding: 5px 15px 0 15px;
		text-align: left;
		font-size: 1rem;
	}

	#Graph .tabs {
		padding: 30px 15px 0 15px;
	}

	#Graph .tabs li {
		width: 49%;
		height: 35px;
		line-height: 35px;
		border-radius: 18px;
		font-size: 1.2rem;
	}

	#Graph .tabs li.active::after {

		top: -7px;
		left: 50%;
		margin: 0 0 0 -7px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 11px 9px 11px;
		border-color: transparent transparent #888fa0 transparent;
	}

	#Graph #Periodform {
		margin: 0 15px;
		/* overflow:  hidden; */
	}

	#Graph #Periodform select {
		width: 133%;
		padding: 10px 20px;
		font-weight: normal;
		line-height: 20px;
		height: 48px;
		background-size: 8px;
		background-position: right 18px center;
		transform: scale(0.75);
		transform-origin: left;
	}
}

/*----------------------------
	If
-----------------------------*/
#If {
	background: #d2d9e9;
	text-align: center;
}

@media all and (max-width: 743px) {}

/*----------------------------
	Help
-----------------------------*/

#Help .flex {
	padding: 50px 40px;
}

#Help .balloon {
	width: 50%;
}

#Help .balloon p {
	position: relative;
	background: #fff;
	border-radius: 10px;
	padding: 30px 40px;
	-webkit-box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.1);
	box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.1);

}

#Help .balloon p::after {
	content: "";
	display: block;
	position: absolute;
	top: 40px;
	right: -30px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 0 0 30px;
	border-color: transparent transparent transparent #ffffff;
}

#Help .chara {
	width: 48%;
	text-align: center;
}

#Help .chara img {
	width: 72%;
	height: auto;
}

@media all and (max-width: 743px) {
	#Help .flex {
		padding: 0 15px;
	}

	#Help .balloon {
		width: 50%;
	}

	#Help .balloon p {
		position: relative;
		background: #fff;
		border-radius: 10px;
		padding: 15px;
		font-size: 1.0rem;
	}

	#Help .balloon p::after {
		top: 30px;
		right: -20px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 20px 0 0 20px;
	}

	#Help .chara {
		width: 45%;
		text-align: center;
	}

	#Help .chara img {
		width: 82%;
		height: auto;
		margin: 10px 0 0 0;
	}
}

/*----------------------------
	Column
-----------------------------*/
#Column {
	background: #fff;
}

#Column ul {
	padding: 30px 0 0 0;
	border-bottom: 1px solid #c4cddc;
}

#Column ul li {
	border-top: 1px solid #c4cddc;
	padding: 20px 0;
}

#Column ul li a {
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	align-items: center;
	background: url(../images/ico-arrow-right.png) no-repeat right center;
	background-size: 12px 22px;
	background-position: center right 20px;
	text-decoration: none !important;
}

#Column ul li .image {
	width: 100px;
}

#Column ul li .body {
	width: 100%;
	padding: 0 0 0 20px;
}

@media all and (max-width: 743px) {
	#Column {
		background: none;
		padding: 18px 0 0 0;
		border-top: 1px solid #c4cddc;
	}

	#Column .inner {
		padding: 0;
	}

	#Column h2 {
		margin: 0 0 0 15px;
	}

	#Column ul {
		padding: 18px 0 0 0;
		border-bottom: 1px solid #c4cddc;
	}

	#Column ul li {
		border-top: 1px solid #c4cddc;
		padding: 15px 15px 15px 15px;
		background: #fff;
	}

	#Column ul li a {
		background-size: 6px 11px;
		background-position: center right;
		padding: 0 30px 0 0;
	}

	#Column ul li .body {
		padding: 0 0 0 15px;
	}

	#Column ul li .body h3 {
		font-size: 1.2rem;
	}
}

/*----------------------------
	Banners
-----------------------------*/
#Banners {
	background: #ebeff6;
}

#Banners li {
	width: 540px;
	margin: 0 auto;
	height: 200px;
	background: #ccc;
}

@media all and (max-width: 743px) {
	#Banners {
		background: #ebeff6;
	}

	#Banners li {
		width: 100%;
		margin: 0 auto;
		height: 140px;
		background: #ccc;
	}
}

/*----------------------------
	Modal
-----------------------------*/
.modal_box {
	position: fixed;
	display: none;
	z-index: 7777;
	width: 90%;
	max-width: 640px;
	margin: 0;
	padding: 0;
	text-align: center;
	box-sizing: border-box;
}

.modal_close {
	background: #32363a url(../images/ico-modal-close.png) no-repeat center center;
	background-size: 10px;
	border: 2px solid #fff;
	border-radius: 15px;
	width: 30px;
	height: 30px;
	position: absolute;
	top: -15px;
	right: -10px;
}

.modal_bg {
	z-index: 6666;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 120%;
	background-color: rgba(36, 38, 41, 0.9);
}

.modal-content {
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

.modal-content div.head {
	padding: 20px 15px;
	text-align: left;
	font-size: 1.8rem;
}

.modal-content div.head img {
	width: 40px;
	height: auto;
	vertical-align: middle;
	margin: 0 10px 0 0;
}

.modal-content div.body {
	padding: 40px 15px 20px 15px;
	text-align: left;
	background: #fff;
	line-height: 1.75;
	font-size: 1.5rem;
}

.modal-content div.body.helpBox {
	background: #ebeff6;
	position: relative;
}

.modal-content div.body.helpBox .inner {
	max-width: 500px;
	margin: 0 auto;
}

.modal-content div.body.helpBox .chara {
	position: absolute;
	top: 40px;
	left: 66%;
}

.modal-content div.body.helpBox .chara img {
	width: 190px;
}

.modal-content div.body.helpBox .balloon {
	width: 61%;
}

.modal-content div.body.helpBox .balloon p {
	position: relative;
	background: #FFF;
	border-radius: 10px;
	padding: 30px 40px;
	color: #32363a;
}

.modal-content div.body.helpBox .balloon p::after {
	content: "";
	display: block;
	position: absolute;
	top: 40px;
	right: -30px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 0 0 30px;
	border-color: transparent transparent transparent #FFF;
}

.modal-content div.body.flex .image {
	width: 48%;
}

.modal-content div.body.flex .image img {
	width: 100%;
	height: auto;
}

.modal-content div.body.flex ul {
	width: 48%;
	counter-reset: number;
}

.modal-content div.body.flex ul li {
	counter-increment: number;
	margin: 0 0 10px 0;
}

.modal-content div.body.flex ul li::before {
	content: counter(number);
	display: inline-block;
	width: 16px;
	height: 16px;
	line-height: 16px;
	border-radius: 10px;
	font-size: 1.2rem;
	background: #d00f31;
	color: #fff;
	vertical-align: middle;
	text-align: center;
	margin-right: 2px;
	margin-top: -2px;
}

@media all and (max-width: 743px) {
	.modal-content div.head {
		padding: 20px 15px;
		font-size: 1.4rem;
	}

	.modal-content div.body {
		padding: 20px 15px;
		font-size: 1.1rem;
	}

	.modal-content div.head img {
		width: 25px;
		height: auto;
		margin: 0 10px 0 0;
	}

	.modal-content div.body.helpBox .chara {
		position: absolute;
		bottom: -7px;
		right: 6px;
		top: auto;
		left: auto;
		width: 33%;
		text-align: right;
	}

	.modal-content div.body.helpBox .inner {
		max-width: 100%;
		margin: 0 auto;
	}

	.modal-content div.body.helpBox .chara img {
		width: 100%;
		max-width: 120px;
	}

	.modal-content div.body.helpBox .balloon {
		width: 70%;
	}

	.modal-content div.body.helpBox .balloon p {
		position: relative;
		border-radius: 10px;
		line-height: 2;
		padding: 15px;
	}

	.modal-content div.body.helpBox .balloon p::after {
		top: 20px;
		right: -14px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 14px 0 0 14px;
	}

	.modal-content div.body.flex {
		padding: 24px 15px;
	}
}

.modal-alert-inner {
	box-sizing: border-box;
	padding: 64px 16px;
}

.modal-alert-ico {
	display: block;
	width: 77px;
	margin: auto;
	margin-bottom: 16px;
}

.modal-alert-h3 {
	color: #32363A;
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 24px;
	text-align: left;
}

.modal-alert-btn {
	border-radius: 28px;
	color: #FFFFFF;
	display: block;
	font-size: 16px;
	margin: auto;
	margin-bottom: 24px;
	line-height: 3.5;
	text-align: center;
	max-width: 506px;
	width: 100%;
}

.modal-alert-banner {
	display: block;
	margin: auto;
	margin-bottom: 24px;
	max-width: 350px;
	width: 90%;
}

.modal-alert-banner img {
	width: 100%;
}

.modal-alert-btn._02 {
	background-color: #CC0033;
}

.modal-alert-btn img {
	width: 100%;
}

.modal-alert-caution {
	color: #707070;
	font-size: 12px;
	line-height: 1.5;
	text-align: left;
}

@media screen and (min-width: 744px) {
	.modal-alert-h3 {
		text-align: center;
	}

	.modal-alert-inner {
		padding: 64px 24px;
	}
}

/*----------------------------
	Button
-----------------------------*/

#Button .flex {}

#Button .flex .modalbtn,
.THEO_modalbtn.flex .modalbtn {
	display: block;
	margin: 0 auto;
	cursor: pointer;
}

#Button .flex .modalbtn img.button,
.THEO_modalbtn img.button {
	max-width: 500px;
	width: 100%;
	height: auto;
}

#Button.main0001 {
	background-color: #d2d9e9;
	padding: 20px 0 15px;
}

@media all and (max-width: 743px) {
	#Button {
		background: none;
		padding: 20px 0;
	}

	#Button .flex {}

	#Button .flex .modalbtn,
	.THEO_modalbtn.flex .modalbtn {
		display: block;
		margin: 0 auto;
		cursor: pointer;
	}

	#Button .flex .modalbtn img.button,
	.THEO_modalbtn img.button {
		width: 90%;
		display: block;
		margin: 0 auto;
	}

}

/*----------------------------
	Button_lead
-----------------------------*/
#Button.main0001._lead {
	padding: 40px 0 15px;
}

.lead_outer {
	padding: 0 15px;
	margin-bottom: 30px;
}

.lead_outer>div {
	background-color: #ffffff;
	border-radius: 10px;
	position: relative;
}

.lead_outer>div {
	padding: 30px 15px 15px 5px;
	margin-bottom: 35px;
}

.lead_outer>div:last-of-type {
	margin-bottom: 0;
}

.lead_outer img {
	max-width: 100%;
}

.lead_outer.flex>div {
	width: 49%;
	padding: 45px 0 15px;
}

.lead_outer div h2.balloon {
	padding: 7px 15px;
	position: absolute;
	top: -20px;
	left: 15px;
}

.lead_outer div h3 {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 35px;
	position: absolute;
	left: 20px;
	right: 0;
	top: -20px;
	margin: auto;
}

.lead_outer div h3 img {
	display: block;
	height: 35px;
}

.lead_outer div.lead_smabo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding: 0 0 0 10px;
}

.lead_outer .lead_smabo>div {
	width: 42.6%;
}

.lead_outer .lead_smabo>div p {
	background-color: #EBEFF6;
	border-radius: 10px;
	font-size: 1.1rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.5;
	margin-top: 10px;
	padding: 10px 8px;
	position: relative;
}

.lead_outer .lead_smabo>div p::after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 15px;
	border-color: transparent transparent transparent #EBEFF6;
	position: absolute;
	right: -10px;
	bottom: 15px;
}

.lead_outer div.lead_smabo>img {
	width: 54%;
}

.lead_inner {
	padding: 0 15px;
}

.lead_inner:first-of-type {
	margin-bottom: 20px;
}

.lead_inner:last-of-type {
	padding: 0 10px;
}

.lead_inner img {
	display: block;
	margin: auto;
}

.lead_inner:first-of-type img {
	margin-bottom: 20px;
	margin-top: 0;
	width: 55%;
}

.lead_inner h4 {
	text-align: center;
	font-size: 2rem;
	line-height: 1;
	margin-bottom: 15px;
	color: #1464E0;
}

.lead_outer div._monex .lead_inner h4 {
	color: #FDC735;
}

.lead_outer div._floggy .lead_inner h4 {
	color: #4BBFBF;
}

.lead_outer div._ideco .lead_inner h4 {
	color: #E5003E;
}

.lead_inner p {
	font-size: 1.4rem;
	line-height: 1.5;
	text-align: center;
}

.lead_inner p span {
	font-size: 1.2rem;
}

.lead_inner p.note {
	font-size: 14px;
}

.lead_inner a,
#Button .flex .lead_inner .modalbtn {
	display: block;
	margin: auto;
	margin-top: 1vw;
	cursor: pointer;
}

.lead_inner.simulation_img {
	margin-bottom: 1.4rem;
}

.lead_inner a img,
#Button .flex .lead_inner .modalbtn img.button {}

.lead_inner a {
	font-size: 3.733vw;
	text-align: center;
	font-weight: bold;
}

.lead_inner .theo_banner {
	margin-bottom: 5.333vw;
}

p.lead_btntext {
	font-weight: bold;
	font-size: 1.4rem;
	text-align: center;
	line-height: 1.5;
}

.lead_outer div._monex p.lead_btntext {
	font-size: 1.2rem;
}

.orange {
	color: orange;
}

.blue {
	color: blue;
}

@media (max-width: 743px) {
	#Button .flex .lead_inner .modalbtn {
		margin-top: 1.8vw;
	}

	#Button .flex .lead_inner .modalbtn img.button {
		width: 100%;
	}
}

@media screen and (min-width: 769px) {
	.lead_outer {
		margin-bottom: 50px;
	}

	.lead_outer:last-of-type {
		margin-bottom: 0;
	}

	.lead_outer>div {
		padding: 60px 30px 30px 10px;
		margin-bottom: 60px;
	}

	.lead_outer.flex>div {
		padding: 90px 0 30px;
	}

	.lead_outer div h2.balloon {
		padding: 10px 30px;
		top: -35px;
	}

	.lead_outer div h3 {
		border-radius: 30px;
		height: 60px;
		top: -30px;
	}

	.lead_outer div h3 img {
		height: 60px;
	}

	.lead_inner {
		padding: 0 30px;
	}

	.lead_inner:first-of-type {
		margin-bottom: 45px;
	}

	.lead_inner:first-of-type img {
		margin-bottom: 45px;
	}

	.lead_inner.simulation_img {
		margin-bottom: 45px;
	}

	.lead_outer .lead_smabo>div p {
		font-size: 16px;
	}

	.lead_inner h4 {
		font-size: 24px;
	}

	.lead_inner p {
		font-size: 20px;
	}

	.lead_inner p span {
		font-size: 18px;
	}

	.lead_inner a,
	#Button .flex .lead_inner .modalbtn {
		margin-top: 15px;
	}

	p.lead_btntext {
		font-size: 18px;
	}

	.lead_outer div._monex p.lead_btntext {
		font-size: 18px;
	}

	.lead_inner a {
		font-size: 20px;
	}

	.lead_inner .theo_banner {
		margin-bottom: 45px;
	}
}

/*----------------------------
	ServeceList
-----------------------------*/

#ServeceList {
	padding: 0;
	padding-bottom: 10px;
}

#ServeceList sp {
	display: none;
}

#ServeceList pc {
	display: inline;
}

#ServeceList h2 {
	font-size: 1.8rem;
	padding: 10px;
}

#ServeceList ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
}

#ServeceList ul li {
	background-color: #ffffff;
	border-bottom: solid 1px #dddddd;
	width: 50%;
	padding: 5px 7.5px 20px;
}

#ServeceList ul li:nth-of-type(2n-1) {
	border-right: solid 1px #dddddd;
}

#ServeceList ul li a {
	display: block;
}

#ServeceList ul li img {
	max-width: 240px;
	display: block;
	width: 75%;
}

@media (max-width: 743px) {
	#ServeceList sp {
		display: inline;
	}

	#ServeceList pc {
		display: none;
	}

	#ServeceList h2 {
		font-size: 1.2rem;
	}

	#ServeceList ul li {
		padding-bottom: 5px;
	}
}

/*----------------------------
	Modal2
-----------------------------*/

#modal2 {}

#modal2 .modal-content {}

#modal2 .modal-content .head {
	background: #105AFB;
}

#modal2 .modal-content .head h3 {
	text-align: center;
	color: #FFF;
	line-height: 140%;
	padding: 16px 0 0 0;
	font-size: 1.8rem;
	max-width: 500px;
	margin: 0 auto;
}

#modal2 .modal-content .head img.modal-in-logo {
	display: block;
	width: 90%;
	margin: 0 auto;
	padding: 32px 0px 16px;
	max-width: 421px;
}

#modal2 .modal-content .head img.modal-in-img {
	display: block;
	width: 90%;
	margin: 0 auto;
	padding: 8px 0px;
	max-width: 448px;
}

#modal2 .modal-content .head p {
	color: #FFF;
	line-height: 150%;
	text-align: center;
	padding: 16px 0;
	font-size: 12px;
	width: 90%;
	margin: 0 auto;
	max-width: 460px;
}

#modal2 .modal-content .content-inner {
	padding: 20px 50px;
}

#modal2 .modal-content .content-inner .box {
	border: 1px solid #105afb;
	border-radius: 4px;
	padding: 20px 15px;
	/* margin-bottom: 32px; */
	margin-top: 16px;
}

#modal2 .modal-content .content-inner .box h4 {
	text-align: left;
	color: #105AFB;
	font-size: 1.8rem;
}

#modal2 .modal-content .content-inner .box p {
	padding: 20px 0px 0px 0px;
	font-size: 12px;
	text-align: left;
	line-height: 150%;
}

#modal2 .modal-content .head a {
	display: block;
	margin: 0 auto;
}

#modal2 .modal-content .head a img.modal-in-img {
	max-width: 400px;
	width: 85%;
	display: block;
	margin: 0 auto;
	padding: 16px 0px 0px;
}

#modal2 .modal-content .head a+p {
	font-size: 12px;
	margin-top: 8px;
	padding: 0px;
}

@media all and (max-width: 743px) {

	#modal2 {}

	#modal2 .modal-content {}

	#modal2 .modal-content .head {}

	#modal2 .modal-content .head h3 {
		text-align: center;
		color: #FFF;
		line-height: 135%;
		padding: 0;
		font-size: 1.5rem;
	}

	#modal2 .modal-content .head img.modal-in-logo {
		display: block;
		width: 80%;
		margin: 0 auto;
		padding: 16px 0px;
	}

	#modal2 .modal-content .head img.modal-in-img {
		display: block;
		width: 80%;
		margin: 0 auto;
		padding: 0px;
	}

	#modal2 .modal-content .head p {
		color: #FFF;
		line-height: 140%;
		text-align: center;
		padding: 16px 0 0 0;
		font-size: 12px;
		width: 80%;
		margin: 0 auto;
	}

	#modal2 .modal-content .content-inner {
		padding: 20px 30px;
	}

	#modal2 .modal-content .content-inner .box {
		border: 1px solid #105afb;
		border-radius: 4px;
		padding: 15px;
		/* margin-bottom: 20px; */
		margin-top: 0px;
	}

	#modal2 .modal-content .content-inner .box h4 {
		text-align: left;
		color: #105AFB;
		font-size: 1.6rem;
	}

	#modal2 .modal-content .content-inner .box p {
		padding: 10px 0px 0px 0px;
		font-size: 12px;
		text-align: left;
		line-height: 140%;
		letter-spacing: 0.02em;
	}

	#modal2 .modal-content .head a {
		display: block;
		margin: 0 auto;
	}

	#modal2 .modal-content .head a img.modal-in-img {
		max-width: 400px;
		width: 85%;
		display: block;
		margin: 0 auto;
		padding: 16px 0px 0px;
	}

	#modal2 .modal-content .head a+p {
		font-size: 12px;
		margin-top: 8px;
		padding: 0px;
	}

}

/*----------------------------
	CpnBanner
-----------------------------*/
.CpnBanner_text {
	text-align: center;
	font-weight: 900;
	margin-top: -25px;
}

.CpnBanner {
	display: block;
	width: 100%;
	padding: 0 5% 0px 5%;
	max-width: 750px;
	margin: auto;
	padding-bottom: 30px;
}

.CpnBanner.loginHome {
	padding-bottom: 10px;
}

.banner_text {
	text-align: center;
	font-weight: bold;
	margin-top: 10px;
}

.CpnBanner:hover {
	opacity: 0.6;
}

.CpnBanner img {
	width: 100%;
}

@media (min-width: 767px) {
	.CpnBanner_text {
		font-size: 1.8rem !important;
	}

	.CpnBanner {
		padding-bottom: 60px;
		padding: 0;
		padding-bottom: 30px;
	}

	.CpnBanner.loginHome {
		padding-bottom: 40px;
	}

	.banner_text {
		margin-top: 40px;
	}
}

/*----------------------------
	Banner
-----------------------------*/

.theo-load {
	display: none;
}

.theo-load.is-on-load {
	display: block;
}

.theo-footer__banner {
	position: fixed;
	z-index: 5;
}

.theo-footer__banner a {
	display: block;
}

.theo-footer__banner a img {
	width: 100%;
}

.theo-footer__banner__close {
	position: absolute;
	cursor: pointer;
}

.theo-footer__banner.is-hidden {
	display: none;
}

@media screen and (min-width: 768px) {


	.theo-footer__banner {
		right: 20px;
		bottom: 20px;
		width: 310px;
		height: 115px;
		transition: .5s ease-out opacity;
		opacity: 1;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	}

	.theo-footer__banner__close {
		top: -10px;
		right: -10px;
		width: 32px;
		height: 32px;
	}

	.theo-footer__banner__close img {
		width: 100%;
	}

}


@media screen and (max-width: 743px) {
	.theo-footer__banner {
		right: 0;
		bottom: 0;
		left: 0;
		transition: .5s ease-out transform;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	.theo-footer__banner__close {
		top: -10px;
		right: 5px;
		width: 25px;
		height: 25px;
	}

	.theo-footer__banner__close img {
		width: 100%;
	}
}

.analysis_block {
	max-width: 400px;
	margin: 5px auto 0;
	justify-content: space-between;
	text-align: center;
}

.analysis_block .inner {
	padding: 15px 15px 0;
}

.analysis_block .analysis_box {
	/*color: #113955;*/
	background-color: #fff;
	border-radius: 5px;
	position: relative;
	width: 49%;
	padding: 6% 0 4%;
	text-decoration: none !important;
}

.analysis_block .analysis_box.entrust.active {
	background: rgb(13, 215, 208);
	background: -moz-linear-gradient(left, rgba(13, 215, 208, 1) 0%, rgba(95, 168, 242, 1) 100%);
	background: -webkit-linear-gradient(left, rgba(13, 215, 208, 1) 0%, rgba(95, 168, 242, 1) 100%);
	background: linear-gradient(to right, rgba(13, 215, 208, 1) 0%, rgba(95, 168, 242, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0dd7d0', endColorstr='#5fa8f2', GradientType=1);
}


.analysis_block .analysis_box.theme.active {
	background: rgb(252, 200, 126);
	background: -moz-linear-gradient(left, rgba(252, 200, 126, 1) 0%, rgba(246, 127, 136, 1) 33%, rgba(185, 184, 240, 1) 79%, rgba(135, 217, 214, 1) 100%);
	background: -webkit-linear-gradient(left, rgba(252, 200, 126, 1) 0%, rgba(246, 127, 136, 1) 33%, rgba(185, 184, 240, 1) 79%, rgba(135, 217, 214, 1) 100%);
	background: linear-gradient(to right, rgba(252, 200, 126, 1) 0%, rgba(246, 127, 136, 1) 33%, rgba(185, 184, 240, 1) 79%, rgba(135, 217, 214, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcc87e', endColorstr='#87d9d6', GradientType=1);
}

.analysis_block .analysis_box.active div.white_box {
	position: relative;
	margin: -9.9% auto -5.9%;
	z-index: 10;
	background: #fff;
	color: #32363a;
	width: 95.7142%;
	height: auto;
	border-radius: 0;
}

.analysis_block .analysis_box.active div.white_box .analysis_arw {
	opacity: 1;
}


.analysis_block .analysis_box.active .active_text {
	padding: 29.2% 0;
	font-size: 18px;
}

@media screen and (max-width: 743px) {
	.analysis_block .analysis_box.active .active_text {
		padding: 32.2% 0;
	}
}

/* @media screen and (max-width: 420px) { */
/*     .analysis_block .analysis_box.active .active_text { */
/*     padding:0; */
/*     line-height:102px; */
/*     height:102px; */
/*   } */
/* } */

.analysis_block .analysis_title {
	padding-top: 0.1em;
	position: absolute;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	background-image: url(../images/balloon01.png);
	background-repeat: no-repeat;
	display: block;
	width: 90%;
	background-size: 100%;
	height: 60px;
	left: 5%;
	/*
  top: -14%;
*/
	top: -12%;
	z-index: 12;
}

/*
.analysis_block .analysis_title.w_title{
  top: -12%;
}
*/


@media screen and (max-width: 420px) {
	.analysis_block .analysis_title {
		font-size: 3.5vw;
	}
}



.analysis_block .analysis_title.analysis_title_theme {
	background-image: url(../images/balloon02.png);
}

.analysis_block .analysis_point {
	font-size: 26px;
	font-family: "Abel";
	color: #32363a;
}

.analysis_block .analysis_point span {
	font-size: .7em;
}

.analysis_block .analysis_point_state {
	font-family: "Abel";
	font-size: 1.2rem;
	border: 1px solid #a4aebd;
	display: block;
	width: 70%;
	margin: 0 auto;
	border-radius: 30px;
	color: #32363a;
}



.analysis_block .analysis_point_state .up {
	color: #d00f31;
}

.analysis_block .analysis_point_state .dn {
	color: #105afb;
}

.analysis_block .analysis_arw {
	position: absolute;
	right: 10px;
	top: 46%;
	width: 7px;
}


#MyData.theme {}

#MyData.theme .pie-chart01 {
	display: block;
	width: 490px;
	height: 490px;
	margin: 10px auto 30px;

}

#MyData.theme .button-layout {
	position: relative;
	width: 100%;
	margin: auto;
	padding: 0 0 10px 0;
}

#MyData.theme .button-radio {
	position: relative;
}

#MyData.theme .button-radio input {
	display: none;
}

#MyData.theme .button-radio span {
	background-color: #fff;
	padding: 10px 10px 10px 25px;
	border-radius: 15px;
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.4);
	font-size: 1.3rem;
}

#MyData.theme .button-radio span:before {
	content: "";
	display: block;
	position: absolute;
	top: calc(50% - 7px);
	left: 10px;
	width: 12px;
	height: 12px;
	background-color: #ebeff6;
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.4) inset;
	border-radius: 50%;
}

#MyData.theme .button-radio:nth-of-type(1) input:checked+span {
	background-color: #fcbe7e;
}

#MyData.theme .button-radio:nth-of-type(2) input:checked+span {
	background-color: #f6959c;
}

#MyData.theme .button-radio:nth-of-type(3) input:checked+span {
	background-color: #bbb6ee;
}

#MyData.theme .button-radio:nth-of-type(4) input:checked+span {
	background-color: #a7dcf5;
}

#MyData.theme .button-radio:nth-of-type(5) input:checked+span {
	background-color: #87d9d6;
}

#MyData.theme .button-radio input:checked+span:before {
	box-shadow: none;
	border: 2px solid #000;
	width: 8px;
	height: 8px;
}

#MyData.theme .button-layout .button-show-all {
	position: absolute;
	top: -60px;
	left: 0;
}

#MyData.theme .button-layout .button-show-all input:checked+span {
	background: rgb(252, 199, 126);
	background: -moz-linear-gradient(left, rgba(252, 199, 126, 1) 0%, rgba(252, 199, 126, 1) 29%, rgba(250, 132, 129, 1) 72%, rgba(228, 139, 172, 1) 100%);
	background: -webkit-linear-gradient(left, rgba(252, 199, 126, 1) 0%, rgba(252, 199, 126, 1) 29%, rgba(250, 132, 129, 1) 72%, rgba(228, 139, 172, 1) 100%);
	background: linear-gradient(to right, rgba(252, 199, 126, 1) 0%, rgba(252, 199, 126, 1) 29%, rgba(250, 132, 129, 1) 72%, rgba(228, 139, 172, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcc77e', endColorstr='#e48bac', GradientType=1);
	/*
	background: -moz-linear-gradient(left, rgba(252,200,126,1) 20%, rgba(246,127,136,1) 35%, rgba(185,184,240,1) 70%, rgba(135,217,214,1) 85%);
	background: -webkit-linear-gradient(left, rgba(252,200,126,1) 20%,rgba(246,127,136,1) 35%,rgba(185,184,240,1) 70%,rgba(135,217,214,1) 85%);
	background: linear-gradient(to right, rgba(252,200,126,1) 20%,rgba(246,127,136,1) 35%,rgba(185,184,240,1) 70%,rgba(135,217,214,1) 85%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcc87e', endColorstr='#87d9d6',GradientType=1 );
    */
	color: #000;
}

.theme .update-date {
	display: none;
}

#MyData .update-date {
	padding: 10px 0 10px 0;
	margin: 20px 0 20px 0;
	color: #0c3752;
	font-size: 1.4rem;
	text-align: center;
	background-color: #ccd4dc;
	border-radius: 100px;
}

#MyData.theme .theme-button-layout {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

#MyData.theme .theme-button-layout li {
	width: 48%;
	margin: 0 0 10px 0;
}

#MyData.theme .theme-button-layout span {
	display: block;
	padding: 7px 10px 7px 25px;
	font-size: 1.3rem;
	border-radius: 40px;
}

@media all and (max-width: 415px) {

	#MyData.theme .button-radio span,
	#MyData.theme .theme-button-layout span {
		font-size: 3.2vw;
	}

	#MyData.theme .theme-button-layout li {
		width: 49%;
		margin: 0 0 10px 0;
	}
}


@media all and (max-width: 743px) {
	#MyData.theme {
		/* border-bottom: 1px solid #c4cddc; */
	}

	#MyData.theme .pie-chart01 {
		width: 190px;
		height: 190px;
	}

	#MyData.theme .theme-button-layout {
		margin-bottom: 20px;
	}

	#MyData .update-date {
		padding: 2px 0 2px 0;
		margin: 15px 0 15px 0;

	}
}

#Graph.theme {
	padding: 0 0 0 0 !important;
}

#Graph.theme .theme-title {
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	background-color: #fcbe7e;
}

#Graph.theme .theme-title p {
	padding: 3px 15px 3px 15px;
	font-size: 15px;
	font-weight: bold;
}

#Graph.theme .theme-title a {
	display: block;
	padding: 4px 20px 3px 14px;
	font-size: 14px;
	text-decoration: none;
	border-left: 1px solid #fff;
	font-weight: bold;
	position: relative;
	color: #313131;
}

#Graph.theme .theme-title a span {
	position: absolute;
	top: 3px;
	right: 6px;
}

#Graph.theme .balloon {
	position: absolute;
	top: 50px;
	left: 5px;
}

#Graph.theme #GraphData {
	width: 100%;
	margin: 0 0 10px 0 !important;
}

#Graph.theme .theme-title.grad {
	background: rgb(252, 200, 126);
	background: -moz-linear-gradient(left, rgba(252, 200, 126, 1) 20%, rgba(246, 127, 136, 1) 35%, rgba(185, 184, 240, 1) 70%, rgba(135, 217, 214, 1) 85%) !important;
	background: -webkit-linear-gradient(left, rgba(252, 200, 126, 1) 20%, rgba(246, 127, 136, 1) 35%, rgba(185, 184, 240, 1) 70%, rgba(135, 217, 214, 1) 85%) !important;
	background: linear-gradient(to right, rgba(252, 200, 126, 1) 20%, rgba(246, 127, 136, 1) 35%, rgba(185, 184, 240, 1) 70%, rgba(135, 217, 214, 1) 85%) !important;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcc87e', endColorstr='#87d9d6', GradientType=1) !important;
	color: #fff;
}

#Graph.theme .theme-title.grad a {
	color: #fff;
}


#CourseSelect.theme {
	margin: 0 auto 35px auto;
	padding: 0;
	max-width: 750px
}

#CourseSelect.theme .inner {
	margin: 0 0 15px 0;
}

#CourseSelect.theme .select-box-layout {
	margin: 0 auto;
}

#CourseSelect.theme .select-box-layout .select-box {
	width: 49%;
	margin: 0 0 17px 0;
	border-radius: 5px;
	box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
}

#CourseSelect.theme .select-box-layout .select-box .inner {
	margin: 0 0 0 0;
}

#CourseSelect.theme .select-box-layout .select-box img {
	width: 100%;
	height: auto;
	border-radius: 5px 5px 0 0;
}

#CourseSelect.theme .select-box-layout .select-box .theme-course-text {
	padding: 14px 17px 14px 17px;
}

#CourseSelect.theme .select-box-layout .select-box .theme-course-text p {
	font-size: 1.4rem;
	text-align: center;
}

#CourseSelect.theme .select-box-layout .select-box .theme-course-text .theme-table th {
	font-size: 1.2rem;
	font-weight: normal;
}

#CourseSelect.theme .select-box-layout .select-box .theme-course-text .theme-table td {
	font-size: 1.2rem;
	text-align: right;
}

#MyStatus.inactive h2 {
	width: 60%;
	font-size: 1.2rem;
}

#MyStatus.inactive p.pt {
	width: 35%;
	color: #fff;
}

#MyStatus.inactive p span {
	padding: 2px 8px 2px 8px;
	background-color: #5da8f1;
	border-radius: 5px;
}


#MyData.inactive {
	padding: 15px 0 20px 0;
}

#MyData.inactive .pie-chart01 {
	margin: 0 auto 15px;
}

#MyData.inactive .button-layout .update-date {
	margin: 0 0 0 0;
}


#Graph.inactive .balloon {
	position: absolute;
	top: 10px;
	left: 0px;
}


#Button.inactive {
	border: none;
}

/*
#Button.inactive .btn:not(.def),#Button.inactive .new_btn:not(.def),#Button.inactive .caution-text:not(.def){
	opacity: 0.4;
	pointer-events: none;
}
*/

#Button.inactive .btn_group {
	opacity: 0.4;
	pointer-events: none;
}

#Button.theme.inactive .inout.add {
	background: rgb(14, 215, 208);
	background: -moz-linear-gradient(left, rgb(14, 215, 208) 0%, rgb(21, 210, 211) 25%, rgb(30, 205, 214) 51%, rgb(40, 200, 219) 77%, rgb(52, 193, 224) 100%);
	background: -webkit-linear-gradient(left, rgb(14, 215, 208) 0%, rgb(21, 210, 211) 25%, rgb(30, 205, 214) 51%, rgb(40, 200, 219) 77%, rgb(52, 193, 224) 100%);
	background: linear-gradient(to right, rgb(14, 215, 208) 0%, rgb(21, 210, 211) 25%, rgb(30, 205, 214) 51%, rgb(40, 200, 219) 77%, rgb(52, 193, 224) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0ed7d0', endColorstr='#34c1e0', GradientType=1);
}

#Button.theme.inactive .inout.drawer {
	background: rgb(57, 190, 226);
	background: -moz-linear-gradient(left, rgb(57, 190, 226) 0%, rgb(69, 183, 231) 25%, rgb(79, 177, 235) 51%, rgb(89, 171, 239) 77%, rgb(94, 168, 242) 100%);
	background: -webkit-linear-gradient(left, rgb(57, 190, 226) 0%, rgb(69, 183, 231) 25%, rgb(79, 177, 235) 51%, rgb(89, 171, 239) 77%, rgb(94, 168, 242) 100%);
	background: linear-gradient(to right, rgb(57, 190, 226) 0%, rgb(69, 183, 231) 25%, rgb(79, 177, 235) 51%, rgb(89, 171, 239) 77%, rgb(94, 168, 242) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#39bee2', endColorstr='#5ea8f2', GradientType=1);
}

#Button.inactive .caution-text {
	width: 85%;
	margin: 25px auto 0;
	color: #d00f31 !important;
	font-size: 1.2rem
}

.simulation {
	text-align: center;
	background-color: #d2d9e9;
	margin-top: 30px;
	padding: 30px 0;
}

.simulation .sup {
	color: #32363a;
	margin-top: 10px;
}

.money {
	margin-top: 30px;
}

.money .course-change {
	background: #105afb !important;
}

.money .course-change img {
	height: 26px;
	margin-right: 6px;
	height: 26px;
	margin-right: 6px;
}

.home-graf_state {
	background-color: #a6aebb !important;
	color: #fff !important;
	font-size: 1.6rem;
	line-height: 35px;
}

.red {
	color: #d00f31;
}

.blue {
	color: #4957e5;
}

.select-box .theme-course-text .theme-table th {
	width: 210px;
	border: 0;
}

.select-box .theme-course-text .theme-table td {
	width: 110px;
	border: 0;
}

.new_btn {
	border-bottom: 1px solid #c4cddc;
}

.new_btn .flex {
	justify-content: center;
}

.new_btn .btn {
	position: relative;
	width: 310px;
	height: 70px;
	border-radius: 35px;
	margin: 0 10px;
}

.new_btn .btn a {
	position: absolute;
	left: 5px;
	top: 5px;
	width: 300px;
	background: #fff;
	color: #113955;
}

.new_btn .btn a:hover {
	color: #fff;
}

.new_btn .add,
.new_btn .drawer {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#87d9d6+0,a7dcf5+25,bbb6ee+50,f6959c+75,fcbe7e+100 */
	background: rgb(135, 217, 214);
	/* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg3ZDlkNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iI2E3ZGNmNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2JiYjZlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iI2Y2OTU5YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmY2JlN2UiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(left, rgb(135, 217, 214) 0%, rgb(167, 220, 245) 25%, rgb(187, 182, 238) 50%, rgb(246, 149, 156) 75%, rgb(252, 190, 126) 100%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgb(135, 217, 214) 0%, rgb(167, 220, 245) 25%, rgb(187, 182, 238) 50%, rgb(246, 149, 156) 75%, rgb(252, 190, 126) 100%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgb(135, 217, 214) 0%, rgb(167, 220, 245) 25%, rgb(187, 182, 238) 50%, rgb(246, 149, 156) 75%, rgb(252, 190, 126) 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#87d9d6', endColorstr='#fcbe7e', GradientType=1);
	/* IE6-8 */
}

.new_btn_blue .new_btn {
	border-bottom: 0 !important;
	margin-bottom: 0 !important;
	padding-bottom: 45px !important;
}

.new_btn_blue .def {
	margin: 0 0 40px 0;
}

.new_btn_blue .add,
.new_btn_blue .drawer {

	background: rgb(40, 200, 219);
	background: -moz-linear-gradient(left, rgba(40, 200, 219, 1) 0%, rgba(40, 200, 219, 1) 29%, rgba(40, 200, 219, 1) 72%, rgba(94, 168, 242, 1) 100%);
	background: -webkit-linear-gradient(left, rgba(40, 200, 219, 1) 0%, rgba(40, 200, 219, 1) 29%, rgba(40, 200, 219, 1) 72%, rgba(94, 168, 242, 1) 100%);
	background: linear-gradient(to right, rgba(40, 200, 219, 1) 0%, rgba(40, 200, 219, 1) 29%, rgba(40, 200, 219, 1) 72%, rgba(94, 168, 242, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#28c8db', endColorstr='#5ea8f2', GradientType=1);
}





@media all and (max-width: 743px) {
	#Button.inactive .caution-text {
		width: 100%;
		margin: 15px auto 0 15px;
	}

	.new_btn_blue .new_btn {
		padding-bottom: 15px !important;
	}

	#MyData.theme .button-layout {
		padding: 0 6px;
	}

	#MyData.theme .button-layout .button-show-all {
		top: -40px;
		left: 6px;
	}

	#Button.theme {}

	#Button.theme .inout {
		height: 45px;
	}

	.home-graf {
		width: 60%;
	}

	ul.theme li {
		width: 33.3333%;
	}

	/*
	ul.theme li:first-child { width:22% }
	ul.theme li { width:39% }
    */
	.select-box .theme-course-text .theme-table th {
		width: 22vw;
		padding: 0;
	}

	.select-box .theme-course-text .theme-table td {
		width: 15vw;
		padding: 0;
	}

	.new_btn {
		border-bottom: 1px solid #c4cddc;
		margin: 0 0 0 0 !important;
		padding-bottom: 25px !important;
	}

	.new_btn .btn {
		width: 130px;
		height: 45px;
	}

	.new_btn .btn a {
		min-width: auto;
		width: 120px;
	}

	.new_btn_blue .def {
		margin: 0 0 0 0;
	}

	.thme-main-001 {
		padding: 0 15px;
	}
}



/*----------------------------
	selectbox
-----------------------------*/
.select-box {
	background: #fff;
	-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
}

.select-box .inner {
	padding: 0;
}

.select-box li {
	padding: 30px 0;
	border-bottom: 1px solid #dee4ef;
}

.select-box li:last-child {
	border-bottom: none;
}

.select-box .icon {
	padding: 0 20px 0 0;
}

.select-box .icon img {
	width: 60px;
	height: auto;
}

.select-box label.flex {
	align-items: center;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
}

.select-box label.flex .label {
	width: 80%;
	text-align: left;
}

.select-box .modal {
	line-height: 1;
	padding: 0 20px;
}

@media all and (max-width: 743px) {
	.select-box {
		background: #fff;
		margin: 15px 0;
	}

	.select-box .inner {
		padding: 0;
	}

	.select-box li {
		padding: 25px 15px;
		border-bottom: 1px solid #dee4ef;
	}

	.select-box .icon {
		padding: 0 15px 0 0;
	}

	.select-box .icon img {
		width: 35px;
		height: auto;
	}

	.select-box label p {
		font-size: 0.9rem;
		line-height: 1.5;
	}

	.select-box label p.head {
		font-size: 1.4rem;
	}

	.select-box label.flex .label {
		width: 80%;
		text-align: left;
	}

	.select-box .modal {
		line-height: 1;
		padding: 0 20px;
	}
}

.bn {
	border-bottom: 0 !important;
}

.inner02 {
	margin: 0 auto 15px;
	padding: 60px 0 30px;
}

@media all and (max-width: 743px) {
	.inner02 {
		margin: 0 auto 0;
		padding: 0 0 15px;
	}
}




/* SUBSTANCE CUSTOMIZED */
.btn_group {
	justify-content: space-between;
}

.add_btn {
	position: relative;
	font-size: 16px;
	z-index: 2;
	color: initial;
	line-height: 60px;
	border-radius: 30px;
	overflow: hidden;
	letter-spacing: 1px;
	font-weight: bold;
	text-align: center;
	margin: 0 10px 10px;
	width: 30%;
	background:
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#87d9d6+0,a7dcf5+25,bbb6ee+50,f6959c+75,fcbe7e+100 */
		background: rgb(135, 217, 214);
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(right, rgb(135, 217, 214) 0%, rgb(167, 220, 245) 25%, rgb(187, 182, 238) 50%, rgb(246, 149, 156) 75%, rgb(252, 190, 126) 100%);
	background: -webkit-linear-gradient(right, rgb(135, 217, 214) 0%, rgb(167, 220, 245) 25%, rgb(187, 182, 238) 50%, rgb(246, 149, 156) 75%, rgb(252, 190, 126) 100%);
	background: linear-gradient(to left, rgb(135, 217, 214) 0%, rgb(167, 220, 245) 25%, rgb(187, 182, 238) 50%, rgb(246, 149, 156) 75%, rgb(252, 190, 126) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#87d9d6', endColorstr='#fcbe7e', GradientType=1);
}

.add_btn::before {
	content: " ";
	display: block;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	background: #fff;
	position: absolute;
	border-radius: 40px;
	top: 5px;
	left: 5px;
	z-index: -1;
}

.add_btn.main {
	background: rgb(40, 200, 219);
	background: -moz-linear-gradient(left, rgba(40, 200, 219, 1) 0%, rgba(40, 200, 219, 1) 29%, rgba(40, 200, 219, 1) 72%, rgba(94, 168, 242, 1) 100%);
	background: -webkit-linear-gradient(left, rgba(40, 200, 219, 1) 0%, rgba(40, 200, 219, 1) 29%, rgba(40, 200, 219, 1) 72%, rgba(94, 168, 242, 1) 100%);
	background: linear-gradient(to right, rgba(40, 200, 219, 1) 0%, rgba(40, 200, 219, 1) 29%, rgba(40, 200, 219, 1) 72%, rgba(94, 168, 242, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#28c8db', endColorstr='#5ea8f2', GradientType=1);
}

.add_btn:hover {
	color: #fff;
}

.add_btn:hover::before {
	background: #32363a;
	color: #fff;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

div:has(.text-add_btn),
ul:has(.text-add_btn) {
	align-items: flex-end;
}

.text-add_btn {
	margin: 0 10px;
	width: 30%;
	line-height: 0.5;
}

.text-add_btn p {
	text-align: center;
	color: #cc0033;
	line-height: 2;
	font-weight: bold;
}

.text-add_btn .add_btn {
	width: 100%;
	margin: 0;
}

.text-add_btn+.add_btn {
	height: 60px;
	margin: 0;
}

@media all and (max-width: 743px) {

	.add_btn {
		line-height: 35px;
		border-radius: 30px;
		width: 40%;
		font-size: 13px;
	}

	.add_btn::before {
		content: " ";
		display: block;
		width: calc(100% - 6px);
		height: calc(100% - 6px);
		background: #fff;
		position: absolute;
		border-radius: 40px;
		top: 3px;
		left: 3px;
		z-index: -1;
	}

	.add_btn:hover {
		color: #fff;
	}

	.add_btn:hover::before {
		background: #32363a;
		color: #fff;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}

	.text-add_btn {
		width: 40%;
		margin: 0 10px;
	}

	.text-add_btn+.add_btn {
		height: 35px;
		margin: 0 10px;
	}
}

.topIfFont {
	font-size: 2rem;
}

@media all and (max-width: 743px) {
	.topIfFont {
		font-size: 1.4rem;
	}
}


#DepositDraw {
	padding-top: 0;
	padding-bottom: 60px;
}

.depositdraw_list {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: auto;
	padding: 0 20px;
	width: 100%;
	max-width: 480px;
}

.depositdraw_list .add_btn {
	transition: all 0.5s ease;
	width: 48%;
}

.depositdraw_list .add_btn {
	background: #33363A;
	color: #33363A;
}

.depositdraw_list .add_btn:hover {
	color: #FFFFFF;
}

.depositdraw_list .add_btn::before {
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	top: 3px;
	left: 3px;
	transition: all 0.5s ease;
}

.depositdraw_list .add_btn::after {
	content: '';
	position: absolute;
	width: 6px;
	height: 6px;
	border: solid 1px;
	border-color: #33363A #33363A transparent transparent;
	transform: rotate(45deg);
	right: 15%;
	top: 0;
	bottom: 0;
	margin: auto;
	transition: all 0.5s ease;
}

.depositdraw_list .add_btn:hover::after {
	border-color: #FFFFFF #FFFFFF transparent transparent;
}

.depositdraw_list .text-add_btn {
	width: 48%;
}

.depositdraw_list .text-add_btn .add_btn {
	width: 100%;
}

.depositdraw_link {
	margin-top: 16px;
	text-align: center;
}

.depositdraw_link a {
	font-size: 13px;
	text-decoration: underline;
}

@media screen and (max-width: 374px) {
	.depositdraw_list li a {
		font-size: 12px;
	}
}

@media screen and (min-width: 768px) {
	#DepositDraw {
		padding: 30px 0;
	}
}

/* PR追加　23.10 */
.lead_outer ._floggy,
.lead_outer ._ideco {
	position: relative;
}

.lead_outer ._floggy::after,
.lead_outer ._ideco::after {
	content: '[PR]';
	position: absolute;
	width: auto;
	bottom: 0.05em;
	right: 0.5em;
	font-size: 1.2em;
}

.lead_outer ._floggy::after {
	color: #4BBFBF;

}

.lead_outer ._ideco::after {
	color: #E5003E;
}

/* PC */
@media screen and (min-width: 744px) {

	.lead_outer ._floggy::after,
	.lead_outer ._ideco::after {
		right: 1em;
		font-size: 1em;
		bottom: 0.5em;
	}
}

/* 2024.04 banner 追加 */
.banner_area {
	margin: 20px auto 40px;
	text-align: center;
}

.banner_area img {
	max-width: 558px;
	width: 90%;
}

@media screen and (min-width: 744px) {
	.banner_area {
		margin: 60px auto 30px;
	}

	.banner_area img {
		width: 100%;
	}
}

/* 2024.04 floating-btn  -btm 追加 */
.floating_btn._btm {
	padding-bottom: 30vw;
}

.floating_btm {
	display: none;
}

.floating_btm._active {
	display: block;
	position: fixed;
	background-color: rgba(255, 255, 255, 0.8);
	padding: 5.16vw 0 3.13vw;
	bottom: 0;
	left: 0;
	width: 100vw;
	z-index: 100;
	text-align: center;
	margin: auto;
	line-height: 1.5;
}

.floating_btm a {
	position: relative;
	display: block;
	font-weight: bold;
	background-color: #ffc700;
	color: #333333;
	font-size: 3.75vw;
	width: 84.06vw;
	text-align: center;
	padding: 4.69vw 0 4.22vw 2.66vw;
	margin: -2.5vw auto 0;
	border-radius: 1.56vw;
}

.floating_btm a::before {
	content: '';
	position: absolute;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(../images/ico-money.png);
	width: 5.63vw;
	height: 5.63vw;
	left: 3.75vw;
	top: 50%;
	transform: translateY(-50%);
}

.floating_btm span {
	display: inline-block;
	position: relative;
	border-radius: 2.5vw;
	background-color: #f5808a;
	color: #fff;
	padding: 1.09vw 3.44vw;
	font-size: 2.66vw;
	z-index: 100;
}

.floating_btm span::after {
	content: '';
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.6em 0.45em 0 0.45em;
	border-color: #f5808a transparent transparent transparent;
	margin: 0 auto;
	bottom: -0.45em;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}

.floating_btm p {
	color: #333333;
	font-weight: normal;
	font-size: 2.5vw;
	text-align: center;
	margin: 2.34vw auto 0;
}


@media screen and (min-width: 744px) {
	.floating_btn._btm {
		padding-bottom: 80px;
	}

	.floating_btm._active {
		padding: 12px 0 11px;
	}

	.floating_btm a {
		width: 656px;
		font-size: 18px;
		padding: 17px 0 15px;
		border-radius: 10px;
		margin: -12px auto 0;
	}

	.floating_btm a::before {
		width: 28px;
		height: 28px;
		left: 30px;
	}

	.floating_btm span {
		border-radius: 12px;
		padding: 4px 11px 5px 13px;
		font-size: 12px;
	}

	.floating_btm span::after {
		border-width: 7px 5px 0 5px;
		bottom: -5px;
	}

	.floating_btm p {
		font-size: 12px;
		margin: 8px auto 0;
	}
}

/* 2024.10 slick */
.slick-slider {
	max-width: 620px;
}

/* 2024.12 グラフエリア対応 */
#Page div.graph_background {
	background: #C4C4C4 !important;
}

#MyData.theme {
	margin: 0 0 40px;
	font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	color: #3D3D3D;
}
.point_operation_area {
	width: 100%;
	padding: 6.4vw 24px;
	margin: auto;
	background: #FFF;
	position: relative;
	border-radius: 4.266vw 0 0 0;
}
.point_operation_area button {
	font-family: "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP" , sans-serif;
}
.point_operation_area .point_area_wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
	margin-top: 4.267vw;
}
.point_operation_area .point_title {
	font-size: 4.8vw;
	font-weight: bold;
	display: flex;
	align-items: center;
}
.point_operation_area .point_title span {
	font-size: 2.933vw;
	font-weight: normal;
	vertical-align: middle;
	line-height: 0.8;
}
.point_operation_area .point_title::before {
	content: "";
	display: inline-block;
	background-image: url(../images/graph/icon_dpoint.png);
	background-size: contain;
	background-repeat: no-repeat;
	width: 4.8vw;
	height: 4.8vw;
	margin-right: 3.2vw;
	vertical-align: middle;
}

.point_operation_area .point {
	font-size: 9.6vw;
	font-weight: bold;
	line-height: 1;
}
.point_operation_area .point span {
	font-size: 5.333vw;
}
.point_operation_area .point_subtext {
	font-size: 4.8vw;
	font-weight: bold;
	color: #73c473;
}
.point_operation_area .point_subtext span {
	font-size: 3.733vw;
	display: inline-block;
    vertical-align: middle;
}
.point_operation_area .point_subtext::after {
	font-size: 16px;
}
.point_operation_area .point_subtext.minus {
	color: #ff5a5a;
}
.point_operation_area .point_subtext::before {
    content: "+";
    color: #73c473;
    display: inline-block;
    vertical-align: bottom;
}
.point_operation_area .point_subtext.minus::before {
	content: "-";
	color: #ff5a5a;
    display: inline-block;
    vertical-align: bottom;
}
.point_operation_area .select_theme {
    font-size: 3.19vw;
    padding: 0 1.6vw 0 3.2vw;
    height: 8vw;
    font-weight: bold;
    border-radius: 26.667vw;
    border: 1px solid #E0DEDC;
    background: #FCFCFC;
    color: #4D4639;
    margin-top: 1.066vw;
    display: flex;
    align-items: center;

}
.point_operation_area .select_theme::after {
	content: "";
	display: inline-block;
	background-image: url(../images/graph/icon_arrow_under.png);
	background-size: contain;
	background-repeat: no-repeat;
    width: 4vw;
    height: 4vw;
	margin-left: 1.067vw;
	vertical-align: middle;
}
.point_operation_area .profit_area {
	display: flex;
	justify-content: space-between;
	margin-top: 4.8vw;
}
.point_operation_area .profit_area>div {
	width: 49%;
	line-height: 1;
	background: #F7F5F3;
	border-radius: 2.133vw;
    padding: 3.2vw 3.733vw;
}
.point_operation_area .profit_area span {
	font-size: 3.533vw;
}
.point_operation_area .profit_area p {
	font-size: 4.8vw;
	font-weight: bold;
	margin-top: 1.6vw;
}
.point_operation_area .profit_area p span {
	font-size: 4.267vw;
}
.point_operation_area .profit_area .profit p {
	color: #73c473;
}
.point_operation_area .profit_area .profit p.minus {
	color: #ff5a5a;
}
.point_operation_area .profit_area .profit p::before {
	content: "+";
	display: inline-block;
	font-size: 4.266vw;
	border-radius: 2.667vw;
    vertical-align: top;
}
.point_operation_area .profit_area .profit p.minus::before {
	content: "-";
}
.point_operation_area .point_operation_graph {
    margin-top: 6.4vw;
}
.point_operation_area .point_operation_omakase_graph {
    margin-top: 6.4vw;
}
.point_operation_area .graph_text_area {
	margin-bottom: 3.2vw;
	display: flex;
}
.point_operation_area canvas {
    margin: 0 -10px;
}
.point_operation_area .graph_text_green,
.point_operation_area .graph_text_red {
	font-size: 3.19vw;
	color: #707070;
}
.point_operation_area .graph_text_green {
	margin-right: 5.333vw;
}
.point_operation_area .graph_text_green::before,
.point_operation_area .graph_text_red::before {
	content: "";
	display: inline-block;
	background-size: contain;
	background-repeat: no-repeat;
	width: 5.333vw;
	height: 2.667vw;
	margin-right: 1.067vw;
	vertical-align: middle;
}
.point_operation_area .graph_text_green::before {
	background-image: url(../images/graph/icon_line_blue.png);
}
.point_operation_area .graph_text_red::before {
	background-image: url(../images/graph/icon_line_gray.png);
}
.point_operation_area .graph_point_day,
.point_operation_area .graph_point_green,
.point_operation_area .graph_point_red {
	font-size: 3.19vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.point_operation_area .graph_point_green::before,
.point_operation_area .graph_point_red::before {
	content: "";
	display: inline-block;
	width: 1.867vw;
	height: 1.867vw;
	border-radius: 2.667vw;
	vertical-align: middle;
	margin-right: 1.067vw;
}
.point_operation_area .graph_point_green::before {
	background: #73c473;
}
.point_operation_area .graph_point_red::before {
	background: #ff5a5a;
}
.point_operation_area .point_text {
	width: auto;
	margin: 0;
	height: auto;
	font-weight: unset;
	color: unset;
	display: flex;
	justify-content: space-between;
	line-height: 1;
	align-items: center;
}
.point_operation_area .point_text span {
	font-size: 3.19vw;
}
.point_operation_area .point_text p {
	font-size: 4.8vw;
	font-weight: bold;
}
.point_operation_area .point_text p span {
	font-size: 6.4vw;
}
.point_operation_area .point_btn_area {
	padding: 2.667vw 11vw;
}
.point_operation_area .point_btn_omakase_area {
	padding: 2.667vw 11vw;
}
.point_operation_area .btn_wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.point_operation_area .btn_wrap button {
	width: 25%;
	border-radius: 26.667vw;
	height: 6.4vw;
	font-size: 3.19vw;
	font-weight: bold;
	border: unset;
	background: unset;
	color: #B3B3B3;
    line-height: 0.8;
}
.point_operation_area .btn_wrap button.selected {
	background: #EBEAE6;
	color: #3D3D3D;
}
.point_operation_area .profit_area button {
	width: 85%;
	display: block;
	margin: 3.2vw auto 0;
	border-radius: 26.667vw;
	height: 10.667vw;
	font-size: 3.733vw;
	font-weight: bold;
	border: 1px solid #c9c5c5;
	background: #FFF;
	color: #4D4639;
	line-height: 0.8;
}

@media screen and (min-width: 744px) {
	#MyData.theme {
        margin: 0 auto 40px;
        border-radius: 30px 0 0 0;
        background: #FFF;
        width: 690px;
	}
	.point_operation_area {
		padding: 44px 24px;
		border-radius: 30px 0 0 0;
	}
	.point_operation_area .point_area_wrap {
		margin-top: 30px;
	}
	.point_operation_area .point_title {
		font-size: 32px;
	}
	.point_operation_area .point_title span {
		font-size: 20px;
	}
	.point_operation_area .point_title::before {
		width: 32px;
		height: 32px;
		margin-right: 22px;
	}
	
	.point_operation_area .point {
		font-size: 66px;
	}
	.point_operation_area .point span {
		font-size: 36px;
	}
	.point_operation_area .point_subtext {
		font-size: 32px;
	}
	.point_operation_area .point_subtext span {
		font-size: 25px;
	}
	.point_operation_area .select_theme {
		font-size: 22px;
		padding: 0 22px 0 11px;
		height: 55px;
		border-radius: 50px;
		margin-top: 7px;
	}
	.point_operation_area .select_theme::after {
		width: 27px;
		height: 27px;
		margin-left: 7px;
	}
	.point_operation_area .profit_area {
		margin-top: 32px;
	}
	.point_operation_area .profit_area>div {
		width: 49%;
		border-radius: 14px;
		padding: 22px 25px;
	}
	.point_operation_area .profit_area span {
		font-size: 24px;
	}
	.point_operation_area .profit_area p {
		font-size: 32px;
		margin-top: 11px;
	}
	.point_operation_area .profit_area p span {
		font-size: 30px;
	}
	.point_operation_area .profit_area .profit p::before {
		font-size: 30px;
		border-radius: 10px;
	}
	.point_operation_area .point_operation_graph {
		margin-top: 44px;
	}
	.point_operation_area .point_operation_omakase_graph {
		margin-top: 44px;
	}
	.point_operation_area .graph_text_area {
		margin-bottom: 22px;
	}
	.point_operation_area canvas {
		margin: 0 -10px;
	}
	.point_operation_area .graph_text_green,
	.point_operation_area .graph_text_red {
		font-size: 22px;
	}
	.point_operation_area .graph_text_green {
		margin-right: 36px;
	}
	.point_operation_area .graph_text_green::before,
	.point_operation_area .graph_text_red::before {
		width: 36px;
		height: 18px;
		margin-right: 7px;
	}
	.point_operation_area .graph_point_day,
	.point_operation_area .graph_point_green,
	.point_operation_area .graph_point_red {
		font-size: 22px;
	}
	.point_operation_area .graph_point_green::before,
	.point_operation_area .graph_point_red::before {
		width: 12px;
		height: 12px;
		border-radius: 18px;
		margin-right: 7px;
	}
	.point_operation_area .point_text span {
		font-size: 22px;
	}
	.point_operation_area .point_text p {
		font-size: 32px;
	}
	.point_operation_area .point_text p span {
		font-size: 44px;
	}
	.point_operation_area .point_btn_area {
		padding: 18px 75px;
	}
	.point_operation_area .point_btn_omakase_area {
		padding: 18px 75px;
	}
	.point_operation_area .btn_wrap button {
		width: 25%;
    	border-radius: 25px;
		height: 44px;
		font-size: 22px;
	}
	.point_operation_area .profit_area button {
		margin: 22px auto 0;
    	border-radius: 25px;
		height: 73px;
		font-size: 25px;
	}
}

@media screen and (min-width: 744px) {
	
}