@charset "utf-8";
/* font
--------------------------------------------
@font-face {
	font-family: Garamond;
	src: url("../font/GARA.eot");
}
@font-face {
	font-family: Garamond;
	src: url("../font/GARA.TTF") format("truetype");
}
---------*/

/* ベース ここから
 --------------------------------------------------------------*/

/* font-color
-----------------------------------------------------*/

body {
	background:#061123 ;
	color: #FFFFFF;
}

/* when drug color
-----------------------------------------------------*/

/* headline
-----------------------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 1em;
	font-weight:normal;
}


/* table
-----------------------------------------------------*/

table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* anchor
-----------------------------------------------------*/

a:link {
	color: #333333;
	text-decoration: underline;
}

a:visited {
	color: #333333;
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

a:active {
}

.clearfix:after{ content : ''; display : block; clear : both; height:0; }


/* ベース ここまで
 --------------------------------------------------------------*/
 
 
/* ヘッダー
-----------------------------------------------------*/
.wrap {
	width: 100%;} 

.wrap {
	width: 100%;} 
header {
	background-size: 50% 50%;}
	
header small {
	font-size: 0.7rem;
	display: inline-block;
	margin: 0.5rem 0 0.4rem 0.5rem;}
header div.upper {
	display: none;
}
header div.upper span:first-of-type { color: #E02020;}
header div.upper span:nth-of-type(2) {color: #FA6400;}
header div.upper span:nth-of-type(3) {color: #F7B500;}
header div.upper span:nth-of-type(4) {color: #6DD400;}
header div.upper span:nth-of-type(5) {color: #0091FF;}
header div.upper span:nth-of-type(6) {color: #6236FF;}
header div.upper span:nth-of-type(7) {color: #B620E0;}
div#summary {
	background: #0C2044;
	width: 100%;}
h1 img {
	width: 18%;
	height: auto;
	float: left;
	margin: 0 0.5rem 0.7rem;}
p.summary {
	width: 68%;
	line-height: 1.4;
	padding: 0.5rem 0.4rem 0 0;
	float: left;}
div.gad {
	padding: 0.3rem 0.5rem;}
div.g-ads {
	margin-bottom: 10px;}
div.hr-sp {
	padding: 0.1rem 0.5rem;
	margin-bottom: 0.4rem;}
.head-tweet {
	margin: 0 0 8px 0;
	font-size: 1.1em;
}
.glo-nav {
	background: #0C2044;
	margin-bottom: 0.5em;
}

.glo-nav a {
	display: inline-block;
	padding: 0.8em 1em;
	border-right: 1px solid #435169;
	border-bottom: 1px solid #435169;
}
.glo-nav a.current {
	background: #295ab1;
}
.glo-nav a:link,
.glo-nav a:visited {
	color: #FFF;
	text-decoration: none;
}
.glo-nav a:before {
    font-family: 'FontAwesome';
    content: "\f0da";
    margin-right: 0.3em;
}
 
/* メイン
-----------------------------------------------------*/

div.content {
	padding: 0.5rem 0.5rem 0;}
div.content p {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0.7rem 0 1.5em 0;}
	
div.content div.simulate {
	width: 100%;
	box-sizing: border-box;}
div.content div.simulate div.hit {
	width: 50%;
	padding-right: 5px;
	box-sizing: border-box;
	float: left;
	}
div.content div.simulate input#hit {
	text-align:right;
	width: 58%;}
div.content div.simulate input#floathit {
	width: 5%;
	padding-left: 0.6em;
	padding-right: 0.6em;
	}
div.content div.simulate div.cont {
	width: 47%;
	float: left;
	}
div.content div.simulate div.cont input#cont {
	text-align: right;
	width: 70% ;}
div.content div.simulate input#floatcont {
	width: 5%;
	padding-left: 0.6em;
	padding-right: 0.6em;
	}

div.content div.simulate p.ex {
	text-align: right;}
div.content div.simulate p.ex span {
	font-size: 0.8rem;
	display: inline-block;
	padding: 2px 5px;
	margin: 0 3px 0 0;
	background: #BC1E0A;
	cursor: pointer;
	position: relative;}

div.content div.simulate p.ex span:after {
	border:8px solid transparent;
	border-bottom-color:#BC1E0A;
	border-top-width:0;
	width:0;
	top:-5px;
	content:" ";
	display:block;
	right:5px;
	position:absolute;
}


div.content div.simulate input#submit {
	width: 100%;
	padding: 0.6em 0;
	margin: 1em auto;}



div.content p.datatime {
	text-align: right;}
div.content time {
	color: #8CC500;
	font-size: 1rem;
	margin: 0.8rem 0 0 0;}
div.content blockquote {
	margin: 1rem 0 0 0;
	padding: 1rem;}

div.content blockquote cite {
	font-size: 0.9rem;
	text-align: right;
	display: block;
	margin: 0.8rem 0.5rem 0 0;
}
div.content blockquote cite a{
	color:#0099FF;
	text-decoration: underline;
	padding:0.3rem 1rem 0.3rem 0;
	background: url(../img/bg_outlink.png) no-repeat right center;}

div.content blockquote cite a:hover {
	text-decoration: none;}
div.content dl {
	font-size: 1rem;
	line-height: 1.4;
	margin: 1.2rem 0 0 0rem;}
div.content dl dt {
	font-size: 1.2rem;
	margin: 0.8rem 0 0 0rem;
	font-weight: bold;
	color: green;}
div.content dl dd {
	margin: 0.8rem 0 1.2rem 0.8rem;}
div.content ol {
	list-style: decimal;
	margin: 0.8rem 0 0 0.7rem;
	padding: 0 0 0 1rem;
	font-size: 1rem;
	line-height: 1.4;}
div.content ul {
	list-style: disc;
	margin: 0.8rem 0 0 0.7rem;
	font-size: 1rem;
	line-height: 1.4;
	padding: 0 0 0 1rem;}
div.content ul li {
	margin-bottom: 0.5rem;}	
div.content ol li {
	margin-bottom: 0.5rem;}
div.content a {
	color: #0099FF;}
	
div.content img {
	max-width: 100%;}
div.content iframe {
	max-width: 100%;}
div.content div.serif-1-r{
	background: url(../img/bg_serif_01.png) no-repeat right top;
	background-size : 62px 62px;
	margin-top: 1.5rem;}

div.content div.serif-2-r  {
	background: url(../img/bg_serif_02.png) no-repeat right top;
	background-size : 62px 62px;
	margin-top: 1.5rem;}
div.content div.serif-1-r div,
div.content div.serif-2-r div {
	position:relative;
	background : #FFECD9;
	padding: 0.6rem 0.8rem;
	border-radius: 10px;
	margin-right: 5rem;}

div.content div.serif-1-r div p:first-child,
div.content div.serif-2-r div p:first-child {
	margin-top: 0;}
	
div.content div.serif-1-r div:after,
div.content div.serif-2-r div:after  {
	border:10px solid transparent;
	border-left-color:#FFECD9;
	border-right-width:0;
	right:-10px;
	content:"";
	display:block;
	top:2rem;
	position:absolute;
	width:0;
}	

div.content hr {
	border: none;
	padding: 3px 0px;
	background: url(../img/img_h2_hr.png) repeat-x left bottom;
	margin: 1rem 0 0 0;}
	
h2 {
	font-size: 1.0rem;
	margin: 1.5rem 0 1rem 0;}

h3 {
	font-size: 1.0rem;
	margin: 0rem 0 0.2rem 0;}
.result h3,
.h3-style {
	font-size: 0.9rem;
	color: #9B8E84;
	margin: 1rem 0 10px;
	padding-bottom: 5px;
    border-bottom: 1px solid #435169;}
h4 {
	font-size: 1.1rem;
	margin: 0.6rem 0 0.6rem 0;}
h4 span.l1 {
	background: linear-gradient(transparent 40%, #DCDCDC 100%)}
h4 span.l2 {
	background: linear-gradient(transparent 40%, #22B1FF 100%)}
h4 span.l3 {
	background: linear-gradient(transparent 40%, #E4EF02 100%)}
h4 span.l4 {
	background: linear-gradient(transparent 40%, #0EE91C 100%)}
h4 span.l5 {
	background: linear-gradient(transparent 40%, #D81818 100%)}
h4 span.l6 {
	background: linear-gradient(transparent 40%, #8021F5 100%)}
h4 span.l7 {
	background: linear-gradient(transparent 10%, #D81818 20%, #8021F5 30%, #0EE91C 40%, #E4EF02 60%, #22B1FF 80%, #DCDCDC 100%)}
h5 {
	font-size: 1.06rem;
	font-weight: bold;
	padding: 0.3rem 0.5rem 0.3rem 1.2rem;
	background: url(../img/bg_h5.png) no-repeat left 6px;
	margin: 1.5rem 0 0 0;}
h6 {
	font-size: 1rem;
	font-weight: bold;
	margin: 1.5rem 0 0 0;}
div.content div.reccomend p {
	background: -ms-linear-gradient(top, #0099FF,#0070D4);
	background: -moz-linear-gradient(top, #0099FF,#0070D4);
	background: -webkit-gradient(linear ,left top ,left bottom, from(#0099FF), to(#0070D4));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FF0099FF', endColorstr='#FF0070D4');
	margin: 0 0 0 0;}
div.reccomend p a {
	display: inline-block;
	background: url(../img/bg_link_arr_white.png) no-repeat 7px center;
	padding: 0.5rem 1rem 0.5rem 1.4rem;
	color: #FFF;}
div.content p.fortop {
	margin: 1.5rem 0 0 0;
	text-align: right;}
p.fortop a{
	color: #8CC500;
	padding: 0 0 0 0.7rem;
	background: url(../img/bg_link_tri_green.png) no-repeat left center;}

table {
	margin: 1rem 0 0 0;
	font-size: 1rem;
	width: 100%;
	border: 1px solid #DDD;}
table th {
	background: #DDD;
	padding: 0.5rem 0.8rem;
	font-weight: bold;
	border: 1px solid #DDD;}
table td {
	background: #FFF;
	padding: 0.5rem 0.8rem;
	border: 1px solid #DDD;}
div.submit {
	text-align: center;}
input#go {
	border: none;
	width: 100%;
	color: #FFF;
	font-size: 1.4rem;
	font-weight: bold;
	padding: 0.7rem 0rem 1.2rem;
	margin: 0.8rem 0 0 0;
	background: url(../img/bt-go.png) no-repeat left top;
	background-size: 100% 100%;
	}
div.result {
	margin: 1rem 0 0.7rem 0;}
div.advice {
	vertical-align: text-top;
	margin: 15px 0;}
div.advice p.adv-image {
	max-width: 130px;
	float: left;
	margin: 0;
}
div.advice p.adv-image img.l1 { box-shadow: #DCDCDC 0px 0px 15px;}
div.advice p.adv-image img.l2 { box-shadow: #22B1FF 0px 0px 15px;}
div.advice p.adv-image img.l3 { box-shadow: #E4EF02 0px 0px 15px;}
div.advice p.adv-image img.l4 { box-shadow: #0EE91C 0px 0px 15px;}
div.advice p.adv-image img.l5 { box-shadow: #D81818 0px 0px 15px;}
div.advice p.adv-image img.l6 { box-shadow: #8021F5 0px 0px 15px;}
div.advice p.adv-image a.l7 { 
	background: url(../img/l7-bg.png) no-repeat left top;
	border-radius: 10px;}
div.advice p.adv-image a.l7:before {
	content: "";
	background: inherit;
	position: absolute;
	display: block;
	z-index: -1;
	filter: blur(10px);
	width: 100%;
	height: 100%;}

div.advice p.adv-text {
	border-radius: 5px;
	display: block;
	float: left;
	padding: 0.7em;
    position: relative;
    max-width: calc(100% - 157px);
	margin: 0 0 0 5px;
	background: #435169;
}
div.advice p.adv-text:before {
    border: 10px solid transparent;
    border-right: 10px solid #435169;
    left: -20px;
    position: absolute;
    content: '';
    top: 15px;
}
div.error {
	background: #DC2528;} 
div.advice p {
	font-size: 0.8rem;}
div.advice img{
	border-radius: 10px;}
	
div.share p{
	border: none;
	width: 100%;
	color: #FFF;
	font-size: 1.3rem;
	text-align: center;
	font-weight: bold;
	padding: 0.3rem 0rem 1rem;
	margin: 0.8rem 0 0.5rem 0;
	background-size: 100% 100%;
	}

div.share p a {
	text-decoration: none;
	color: white;
	display: block;
}
div.share p a:before {
    font-family: 'FontAwesome';
    content: "\f0da";
    margin-right: 0.3em;
}
.l1 p {
	background: url(../img/bt-share1.png) no-repeat left top;}
.l2 p {
	background: url(../img/bt-share2.png) no-repeat left top;}
.l3 p {
	background: url(../img/bt-share3.png) no-repeat left top;}
.l4 p {
	background: url(../img/bt-share4.png) no-repeat left top;}
.l5 p {
	background: url(../img/bt-share5.png) no-repeat left top;}
.l6 p {
	background: url(../img/bt-share6.png) no-repeat left top;}
.l7 p {
	background: url(../img/bt-share7.png) no-repeat left top;}

/* フォーム部分
-----------------------------------------------------*/
form#mailform {}
form#mailform input{
	border: 1px solid #ccc;
	font-size: 1.4rem;
	width: 90%;
	padding: 0.5rem 0.8rem;
	border-radius: 8px;}
form#mailform textarea{
	border: 1px solid #ccc;
	font-size: 1.2rem;
	width: 90%;
	height: 5rem;
	padding: 0.5rem 0.8rem;
	border-radius: 8px;}
	p.submit-bt {
		text-align: center;}
form#mailform input[type="submit"]{
	border: none;
	font-size: 1rem;
	cursor: pointer;
	background: -ms-linear-gradient(top, #0099FF,#0070D4);
	background: -moz-linear-gradient(top, #0099FF,#0070D4);
	background: -webkit-gradient(linear ,left top ,left bottom, from(#0099FF), to(#0070D4));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FF0099FF', endColorstr='#FF0070D4');
	width: 80%;
	color: #fff;
	border-radius: 8px;
	padding: 0.6rem 3rem;}

form#mailform input[type="submit"]:hover {
	text-decoration: underline;}
form#mailform input[type="submit"]:focus {
	background:#0070D4;}
form#mailform input:focus {
	background: #EEFFC8;}
form#mailform textarea:focus {
	background: #EEFFC8;}

/* サブ
-----------------------------------------------------*/
section.sub {
	padding: 0 0.6rem;
	margin: 0.8rem 0 0 0;}
div.menu {
	padding: 3px;
	margin: 1rem 0 0 0;}
div.menu h6 {
	margin: 0.3rem 0 0 0;}
div.menu div {
	background: #FFF;
	padding: 0.5rem;}
	
	
div.menu div ol {
	list-style: decimal;
	margin: 0.8rem 0 0 0.7rem;
	padding: 0 0 0 0.8rem;}
div.menu div ol li {
	font-size: 1rem;
	margin-bottom: 0.8rem;}
div.menu div ol li a{
	padding: 0 0 0 0.9rem;
	background: url(../img/bg_link_arr_blue.png) no-repeat left 6px;
	color: #333;}
div.menu div ol li.current a {
	color: #0099FF;}
div.menu div ul {
	list-style: disc;
	margin: 0.8rem 0 0 0.7rem;
	padding: 0 0 0 1rem;}
div.menu div ul li {
	font-size: 1rem;
	margin-bottom: 0.5rem;}
	
div.forabout {
	margin: 0.8rem 0 0 0;}
div.forabout p{
	border: dotted 1px #8CC500;}
div.forabout p a{
	color: #8CC500;
	padding: 0.5rem 0.5rem 0.5rem 1.2rem;
	text-decoration: none;
	display: block;
	background: url(../img/bg_link_arr_green.png) no-repeat 5px center;
	}

div.forabout p.current {
	background:#8CC500;
	 }

div.forabout p.current a {
	background: url(../img/bg_link_arr_white.png) no-repeat 5px center;
	color: #FFF;}	
div.forabout p a:hover {
	text-decoration: underline;}

div.ad {
	padding: 3px;
	margin: 1rem 0 0 0;}
div.ad p {
	font-size: 0.9rem;
	line-height: 1.4;}
div.ad div {
	background: #FFF;
	padding: 0.5rem;}

div.ad div img,
div.ad div iframe {
	max-width: 100%; }

div.ad div p.desc {
	margin: 0.5em 0 0 0;
	font-size: 0.8rem;}

div.ad div p.desc-link a{
	font-size: 1rem;
	padding: 0.5rem 0.5rem 0.5rem 1.2rem;
	text-decoration: underline;
	display: inline-block;
	background: url(../img/bg_link_arr_blue.png) no-repeat 5px 12px;
}
div.ad div p.desc-link a:hover {
	text-decoration: none;}
div.tw-h  {
	margin: 1.5rem 0 0 0;}
	
div.tw-h h6 {
	font-size: 1.2rem;
	font-weight: normal;
	margin:  0;
	color: #0070D2;
	height: 32px;
	background: #00AFF0 url(../img/bg_h_twitter.png) no-repeat right top;}
div.tw-h h6 span {
	display: block;
	font-weight: normal;
	font-size: 0.8rem;
	padding-top: 0.1rem;
	color: #FFF;}

div.tw-widget {
	margin: 20px 0 25px 0;}
	
div.gad-s {
	margin-top: ;}

p.for-handbook {
	text-align: center;
	margin: 1.5rem 0 0 0;}	
/* フッター
-----------------------------------------------------*/
div.gad-f {
	margin-top: 1.5rem;}
footer {}
footer p.logo {
	text-align: center;
	margin: 1.5rem 0 0; }
footer p.logo img{
	width: 90%;
	height: auto;}
	
footer p.site-name {
	text-align: center;
	padding: 1rem 0 0;
	font-size: 0.6rem;
	background: url(../img/img_h2_hr.png) repeat-x left top;
	margin: 1rem 0 2rem; }
	
div.scroll {
	position: fixed;
	bottom: 1.2rem;
	right: 0rem;
	text-align: right;
	margin: 1rem 0.6rem 0;}
div.scroll li {
	display: inline-block;
	border: 1px solid #FFF;
	}
	
div.scroll li.for-top  {
	margin-left: 0rem;}
div.scroll li.for-menu a{
	display: inline-block;
	background: #0099FF;
	padding: 0.5rem 1.5rem;
	color: #fff;
	text-decoration: none;}

div.scroll li.for-menu a:hover {
	text-decoration: underline;}
div.scroll li.for-top a{
	display: inline-block;
	border: 1px solid #fff;
	padding: 0.5rem 1.8rem 0.5rem 1.5rem;
	color: #fff;
	text-decoration: none;
	background: #0070D4 url(../img/bg_fortop.png) no-repeat;
    background-position: right 10px center;
	}
div.scroll li.for-top a:hover {
	text-decoration: underline;}
p.for-bookmark {
	text-align: center;
	font-size: 0.6rem;
	background: #0C2044;
	padding: 0.5rem 0;
	color:#677b9c;}
.w50.clearfix {
	display: -webkit-box;}
.w50 p {
	font-size: 0.8rem !important;
}
p.for-top {
	text-align: center;
	margin-bottom: 0.5em !important;}
p.for-top a {
	color: #A59A8F;
	background: linear-gradient(#f4ae2d 45%, #a9771a 100%);
	color: #fff;
	text-decoration: underline;
	border-radius: 3px;
	padding: 0.5em 1em;
	text-decoration: none;
	margin-bottom: 1rem;
	display: block;}
p.for-top a.retry {
	margin-right: 0.5em;
	background: linear-gradient(#F15B69 45%, #af2633 100%);}

p.for-top a:before {
    font-family: 'FontAwesome';
    content: "\f0da";
    margin-right: 0.2em;
}
p.for-top a:hover {
	text-decoration: none;}
footer small{
	color:#677b9c;
	text-align: center;
	padding: 0.2rem 0;
	display: block;
	margin: 0.5rem 0;
	width: 100%;}
footer small a:link,
footer small a:visited{
	color :#677b9c;}
div.content div.simulate p {
	white-space: nowrap;
	line-height: 1.2;}
.up {
	color: #2D94F4;
}
.up:before {
	content: ".";
	color: transparent;
	/*background: url("../img/ico_up.png") no-repeat left top ;*/
	background-size: contain;
	padding-left: 1em;
}
.end {
	color: #F15B69;
}
.end:before {
	content: ".";
	color: transparent;
	/*background: url("../img/ico_up.png") no-repeat left top ;*/
	background-size: contain;
	padding-left: 1em;
}
.down {
	color: #F15B69;
}
.down:before {
	content: ".";
	color: transparent;
	/*background: url("../img/ico_down.png") no-repeat left top ;*/
	background-size: contain;
	padding-left: 1em;
}
.equal {
	color:#E9F165;
}
.equal:before {
	content: ".";
	color: transparent;
	/*background: url("../img/ico_equal.png") no-repeat left top ;*/
	background-size: contain;
	padding-left: 1em;
}
.ave {
	display: block;
	font-size: 1.2em;
	border-top: 1px solid #FFF;
	margin-top: 0.4rem;
	padding-top: 0.4rem;}

.luckyitem span:before {
	padding-left: 0.8em;
}


.input_w50 {
	width: 50%;
	padding-right: 5px;
	box-sizing: border-box;
	float: left;
}
.input_w50 input {
	width: 79%;
	text-align: right;
}
.inOutbox {
	display: flex;
}
.inOutbox input {
	width: 68%;}

.inOutbox p:nth-of-type(1) {
	flex:  0 0 35%;
}
.inOutbox p:nth-of-type(2) {
	flex:  0 0 65%;}

.plusminus input[type="radio"] {
	opacity: 0;
	position: absolute;
	width:  30px;
}
.inOutbox p.plusminus {
	margin: 14px 0 0 0;
}
.plusminus label {
	display: inline-block;
	border: 1px solid #fff;
}

.plusminus label:nth-of-type(1) {
	border-radius: 4px 0px 0px 4px;
	padding: 3px 8px 3px 8px;
	margin: 0;
}
.plusminus label:nth-of-type(2){
	border-radius: 0 4px 4px 0;
	padding: 3px 10px 3px 10px;
	margin: 0 0 0 -5px;
}
.plusminus input[type="radio"]:focus + label {
	outline: solid 3px #3373e5;
}
.plusminus input[type="radio"]:checked + label {
	background: #3373e5;
}


.input_w50 textarea {
	width: 90%;
}

.input_col {
	margin: 0 0 5px;
}
.his_sub_total {
	display: block;
	text-align: right;
}
.clearbutton {
	color: #fff;
	cursor: pointer;
	margin: -8px 15px 3px 0;
	float: right;
	text-align: right;
	display: inline-block;
	padding: 6px 6px 3px;
	background: #355185;
	border-radius: 4px;
	font-size: 0.8em;
}
.clearall {
	margin: -12px 0px 5px 0;
	padding: 8px 8px 5px;
}
.clearbutton:active,
.clearbutton:hover {
	background: #3373e5;

}
.grayout {
	background: #bbbbbb !important;
}