@charset "utf-8";
/* CSS Document */

#right_box ul.anchor{
	margin-bottom:3rem;
	font-size:0px;
}
#right_box ul.anchor li{
	display:inline-block;
	width:31%;
	margin-right:3.5%;
	font-size:1.6rem;
}
#right_box ul.anchor li:nth-of-type(3){
	margin-right:0px;
}
#right_box ul.anchor li a{
	display:block;
	border-bottom:1px solid #ccc9c9;
	padding:0 1.5em 0.8em 0;
	position:relative;
	margin-bottom:1em;
}
#right_box ul.anchor li a:hover{
	color:#EB0100;
}
#right_box ul.anchor li a:after {
    content: "";
    vertical-align: middle;
    position: absolute;
    top: 50%;
    margin-top: -0.7em;
    right: 0.5em;
    width: 0.3em;
    height: 0.3em;
    border-top: 0.15em solid #ff0a0a;
    border-right: 0.15em solid #ff0a0a;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
#right_box h2{
	background-color:#f1eee9;
	text-align:center;
	padding:0.3em 0;
	margin-bottom:1.5em;
}
#right_box h3{
	padding:0.3em 0;
	font-size:1.8rem;
	border:solid 1px;
	padding:0.3em 0.5em;
	margin-bottom:1.5em;
	display:inline-block;
}
#right_box h3 + .img{
	margin-bottom:0.5em;
}
#system{
	margin-bottom:6rem;
}
#system .think{
	padding:1.5em;
	border:solid 1px #cbc9ca;
	margin-bottom:4rem;
}
#system .flex{
	margin-bottom:5rem;
}
#system .flex .left{
	width:48%;

}
#system .flex .left table{
	width:100%;
}
#system .flex .left th{
	border:solid 1px #cbc9ca;
	background-color:#f3f4f4;
	font-weight:bold;
	padding:0.5em 0;
	width:50%;
}
#system .flex .left td{
	border:solid 1px #cbc9ca;
	padding:0.5em 0.5em;
	text-align:center;
	vertical-align:middle;
}
#system .flex .left td:first-child{
	text-align:left;
}

#system .flex .right{
	width:46%;
}
#system .flex .right .history div{
	padding-left:3.5rem;
	position:relative;
}
#system .flex .right .history div:before{
	background-color:#bc9a78;
	content:"";
	height:100%;
	width:2.5rem;
	position:absolute;
	left:0px;
	top:0px;
}

#system .flex .right .history div:nth-of-type(2):before{
	background-color:#a87d53;
}
#system .flex .right .history div:nth-of-type(3):before{
	background-color:#9f6f43;
}
#system .flex .right .history div:nth-of-type(4):before{
	background-color:#956235;
}
#system .flex .right .history div:nth-of-type(5):before{
	background-color:#743d13;
}

#system .flex .right .history dt{
	font-size:2rem;
	display:flex;
	justify-content:flex-start;
	padding:0.3em 0.5em 0 0.5em;
	font-weight:bold;
}
#system .flex .right .history div:nth-of-type(1) dt{
	padding-top:0em;
}
#system .flex .right .history dt span{
	color:#8b5825;
	display:inline-block;
	margin-right:1em;
}
#system .flex .right .history dd{
	border-bottom:1px solid #cbc9ca;
	padding-bottom:0.5em;
	padding-top:0.5em;
	position:relative;
}
#system .flex .right .history dd:before{
	content: "";
    vertical-align: middle;
    position: absolute;
    bottom: -0.5rem;
    margin-top: -0.5em;
    left: -3rem;
    width: 2.5rem;
    height: 0.7em;
    border-top: 0.5em solid #FFF;
    -webkit-transform: rotate(145deg);
    transform: rotate(145deg);
	z-index:1;
}
#system .flex .right .history dd:after{
	content: "";
    vertical-align: middle;
    position: absolute;
    bottom: -0.5rem;
    margin-top: -0.5em;
    left: -4rem;
    width: 2.5rem;
    height: 0.7em;
    border-top: 0.5em solid #FFF;
    -webkit-transform: rotate(215deg);
    transform: rotate(215deg);
	z-index:1;
}
#system .flex .right .history dd ul{
	padding:0 0.5em;
}
#system .flex .right .history dd li{
	padding-left:1em;
	text-indent:-1em;
}

#system .link_code,#reward .link_code{
	margin:2em 0 3em 0;
}
#system .link_code a,#reward .link_code a{
	text-decoration:underline;
	padding-left:1em;
	position:relative;
	display:inline-block;
}
#system .link_code a:before,#reward .link_code a:before {
    content: "";
    vertical-align: middle;
    position: absolute;
    top: 50%;
    margin-top: -0.3em;
    left: 0em;
    width: 0.3em;
    height: 0.3em;
    border-top: 0.15em solid #ff0a0a;
    border-right: 0.15em solid #ff0a0a;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#system .link_code a:hover,#reward .link_code a:hover{
	text-decoration:none;
}
main .img img{
	width:100%;
}

#name .text{
	margin-bottom:2em;
}
#reward{
	margin-bottom:5rem;
}
#reward table{
	width:100%;
	margin-top:4rem;
	margin-bottom:1em;
}
#reward th{
	border:solid 1px #cbc9ca;
	padding:0.7em 1em;
	text-align:left;
	font-weight:normal;
	background-color:#fff6e0;
	color:#f54d05;
	font-weight:bold;
}
#reward tr:nth-of-type(2) th{
	background-color:#e6dacc;
	color:#956235;
}
#reward td{
	border:solid 1px #cbc9ca;
	padding:0.5em 1em;
	text-align:left;
}
#reward td .sup{
  font-size: 0.7em;
    position: relative;
    top: -0.4em;
}
#reward .caption li{
	padding-left:2.5em;
	text-indent:-2.5em;
}
#risk .text{
	margin-bottom:2em;
}
#risk h4 {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "メイリオ", sans-serif;
    line-height: 1;
    border-left: 0.3em solid #EB0100;
    padding-left: 0.2em;
    margin-bottom: 2em;
}




/*---------------------------------------------------------------
横幅768px～1190pxまでのレイアウト
---------------------------------------------------------------*/
@media screen and (min-width:768px) and (max-width:1150px){
#right_box ul.anchor li a{
	font-size:1.35vw;
}
#right_box h3{
	font-size:1.53vw;
}
#system .flex .left th{
	font-size:1.35vw;
}
#system .flex .left td{
	font-size:1.35vw;
}
#system .flex .right .history dt {
    font-size: 1.69vw;
}
#system .flex .right .history dd li {
	font-size:1.35vw;
}


}





/*---------------------------------------------------------------
スマホレイアウト
---------------------------------------------------------------*/
@media screen and (max-width:767px){
#right_box ul.anchor {
}
#right_box ul.anchor li {
    width:100%;
    margin-right:0%;
}
#system .flex .left {
    width: 100%;
	margin-bottom:3em;
}
#system .flex .right {
    width: 100%;
}
#reward td:nth-of-type(1) {
	width:8em;
}
#risk h4 {
    line-height: 1.6;
}

}