@charset "UTF-8";
@import "/include/css/common.sp.css";

/* ---------------------------------------------------------
	CSS Document index
--------------------------------------------------------- */

#index {
	text-align: left;
}

#index h3 {
	margin-bottom: 3%;
	padding-left: 10px;
	border-left: solid 5px #7f8dba;
	font-weight: 100;
	font-size: 20px;
	line-height: 1.3;
	text-align: left;
}

#index .section {
	margin-bottom: 40px;
}

#index dl {
	position: relative; 
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: top;
	width: 100%;
	margin-bottom: 30px;
	padding: 5%;
	border: solid 5px #e8eefc;
	text-align: center;
	background-position:184px 27px;
}

#index dl:hover {
	opacity: 0.8;
	filter: Alpha(opacity=80);
}

#index dt {
	font-size: 18px;
}

#index dd p a {
	display: inline-block;
	vertical-align: top;
	width: 70%;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	background: #fd6d16;
	text-decoration: none;
	font-size: 15px;
	line-height: 32px;
	color: #fff;
	position: relative;
}

#index .name01 {
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	font-size:16px;
	color:#fff;
	background:#5671bf;
	padding:5px 20px 4px;
	border-radius:50px;
}

#index .icon01 {
	display:block;
	margin:10px;
}

#index .sb01 {
	background:#fef8da;
	margin-top:10px;
	padding:20px;
	border-radius:20px;
	font-size:19px;
	line-height:26px;
	font-weight:bold;
}

#index .nth3 .sb01 {
	top:55px;
}

#index .link {
	text-align: center;
}
#index .link a {
	display: block;
	padding:10px 20px;
	line-height: 1;
	border: 2px solid #b9c6da;
	background: #fff;
	font-size: 18px;
	color: #333;
	text-decoration: none;
}
#index .link a:hover {

	opacity: 0.8;
	filter: Alpha(opacity=80);
}
#index .link a:before {
	content: url(/include/images/array.png);
	vertical-align: middle;
	padding-right: 10px;
}

/* ---------------------------------------------------------
	CSS Document detail
--------------------------------------------------------- */

#detail {
	text-align: left;
}

#detail h3 {
	margin-bottom: 3%;
	padding: 6px 5px 5px 5px;
	border-bottom: solid 2px #808fbb;
	background: #e8eefc;
	font-weight: 100;
	font-size: 18px;
	line-height: 1.2;
}

#detail h4 {
	font-size: 16px;
	background:#e8eefc;
	border-left:solid 12px #3d559a;
	padding:16px 20px 13px;
	text-align:left;
	margin-bottom:5%
}

#detail h5 {
	font-size: 16px;
	background:url("../images/bk_line01.png");
	border-radius:10px;
	padding:10px 6px 8px;
	text-align:center;
	margin-bottom:20px;
	color:#fff
}

#detail h6 {
	font-size: 18px;
	margin-bottom:15px;
	display: flex;
	align-items: center;
}

#detail h6 span {
	display: inline-block;
	background:#fff;
	color:#5671bf;
	border:2px solid #5671bf;
	border-radius:50px;
	margin-right:8px;
	padding:2px 11px 1px;
}

#detail h6:before,#detail h6:after {
	content: "";
	flex-grow: 1;
	height: 1px;
	background: #5671bf;
	display: block;
}

#detail h6:before {
	margin-right:8px
}

#detail h6:after {
	margin-left:8px
}

#detail .section {
	margin-bottom: 5%;
}

#detail p {
	margin-bottom: 5%;
}

#detail p.txt01 {
	font-size:16px;
	font-weight:bold;
	text-align:center
}

#detail p.year01 {
	margin:5% 0;
	font-size:20px;
	color:#5671bf;
	font-weight:bold;
	display: flex;
	align-items: center;
}

#detail p.year01:before,#detail p.year01:after {
	content: "";
	flex-grow: 1;
	height: 7px;
	background: #5671bf;
	display: block;
}

#detail p.year01:before {
	margin-right:30px
}

#detail p.year01:after {
	margin-left:30px
}


/* ---------------------------------------------------------
	CSS Document detail > type_navi
--------------------------------------------------------- */

.type_navi {
	background:#bccff9;
	margin-bottom: 3%;
	padding:3%;
}

.type_navi ul.navi01 li {
	display: inline-block;
	width: 48%;
	text-align: center;
	margin:1%;
	background: url("../images/btn_mk01.png"),#fff;
	background-repeat:no-repeat;
	background-position:3px 10px;
	padding:7px 0 5px 15px
}

.type_navi ul.navi01 li.this01 {
	background:#3d559a;
	color:#fff;
	padding:7px 0 5px
}

.type_navi ul.navi02 li {
	display: inline-block;
	vertical-align:top;
	background: url("../images/btn_mk02.png");
	background-repeat:no-repeat;
	background-position:0 7px;
	padding-left:15px;
	margin-left:15px;
}

.type_navi ul.navi02 .this02 {
	background:none;
	color:#3d559a;
	font-weight:bold
}

.type_navi li a {
	display: block;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	background: #e8eefc;
	text-decoration: none;
	color: #354f9e;
}

.type_navi li a:hover {
	opacity: 0.8;
	filter: Alpha(opacity=80);
}

.type_navi li.this a {
	background: #7f8dba;
	color: #fff;
	position: relative;
	opacity: 1;
	filter: Alpha(opacity=100);
}

.type_navi li.this a:before {
	content: '';
	width: 10px;
	height: 10px;
	margin-left: -4px;
	background: #7f8dba;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	left: 50%;
	bottom: -5px;
}

.type_navi .navi01 {
	margin-bottom:10px
}

.type_navi .navi01 a {
	font-size:16px;
	color:#333
}

.type_navi .navi02 a {
	color:#333
}

.type_navi .navi01 a:hover,
.type_navi .navi02 a:hover {
	color:#fd6d16
}

/* ---------------------------------------------------------
	CSS Document detail > balloon
--------------------------------------------------------- */

.balloon {
	text-align: center;
}

.balloon .chart {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: middle;
}

.balloon dt {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

.balloon dt p {
	font-size: 20px;
	background:#73503c;
	color:#fff;
	padding:1px 0 0;
	border-radius:50px;
}

.balloon dd {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

.balloon dd p {
	vertical-align: middle;
	padding: 7%;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	border: solid 1px #ccc;
	text-align: left;
	font-size: 16px;
	position: relative;
}

/* ---------------------------------------------------------
	CSS Document detail > balloon02
--------------------------------------------------------- */

.balloon02 {
	text-align: center;
}


.balloon02 dt {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

.balloon02 dt p {
	font-size: 16px;
	background:#73503c;
	color:#fff;
	padding:1px 0 0;
	border-radius:50px;
}


/* ---------------------------------------------------------
	CSS Document detail > advice01
--------------------------------------------------------- */

.advice01 {
	text-align: center;
	margin-bottom:30px
}

.advice01 dl {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: middle;
}

.advice01 dt {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

.advice01 dt p {
	vertical-align: middle;
	padding: 7%;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	border: solid 1px #ccc;
	text-align: left;
	font-size: 16px;
	position: relative;
}

.advice01 dt p:after {
	content: '';
	width: 14px;
	height: 14px;
	margin-top: -9px;
	border-top: solid 1px #ccc;
	border-right: solid 1px #ccc;
	background: #fff;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	position: absolute;
	bottom: -8px;
}

.advice01 dd {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

.advice01 dd p {
	font-size: 22px;
	background:#5671bf;
	color:#fff;
	margin:0 10px;
	padding:1px 0 0;
	border-radius:50px;
}

.advice01 .navi_point01 {
	margin-top:10px;
}

.advice01 .navi_point01 li:nth-child(1),
.advice01 .navi_point01 li:nth-child(3),
.advice01 .navi_point01 li:nth-child(5),
.advice01 .navi_point01 li:nth-child(7){
	position: relative;
	display: block;
	background:#e8eefc;
	font-size:16px;
	font-weight:bold;
	padding:25px 0 10px;
	border-radius:10px
}

.advice01 .navi_point01 li:nth-child(2),
.advice01 .navi_point01 li:nth-child(4),
.advice01 .navi_point01 li:nth-child(6){
	display: inline-block;
	padding:5px 0 15px;
}

.advice01 .navi_point01 li img{
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

.advice01 .navi_point01 li span{
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	background:#fff;
	border-radius:60px;
	border:2px solid #5671bf;
	padding:4px 12px 1px;
	font-size:18px;
	color:#5671bf;
}

.advice01 .btn_point01 a{
	text-align:center;
}

.advice01 .btn_point01 a{
	display: inline-block;
	width:265px;
	height:33px;
	color:#333;
	text-decoration:none;
	border:1px solid #5671bf;
	padding:4px 0 1px 10px;
	margin:20px 0;
	box-shadow: 3px 3px #d2ddf8;
}

.advice01 .btn_point01 a:after{
	content:url(../images/btn_mk04.png);
	margin-left:15px;
	vertical-align:bottom;
}

.advice01 .btn_point01 a:hover{
	background: #eff3fc;
}

/* ---------------------------------------------------------
	CSS Document detail > voice01
--------------------------------------------------------- */

.voice01 dl {
	background:url(../images/bk_line02.png);
	padding:5% 5% 2%
}

.voice01 dt {
	width:200px;
	text-align:center;
	margin:auto;
}

.voice01 dt p {
	background:#73503c;
	color:#fff;
	margin:8px 50px;
	padding:1px 0 0;
	border-radius:50px;
}

.voice01 dd {
	text-align:center;
	margin:auto;
}

.voice01 dd p {
	vertical-align: middle;
	padding: 7%;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	text-align: left;
	font-size: 16px;
	position: relative;
	background:#fff
}

.voice01 dd p strong {
	color:#d95309
}

.voice01 dd p:before {
	content: '';
	width: 14px;
	height: 14px;
	margin-top: -9px;
	border-bottom: solid 1px #ff;
	border-left: solid 1px #fff;
	background: #fff;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	position: absolute;
	top: 0;
	left:70px
}

.voice01 span.point_txt01 {
	display:block;
	margin-left:1.5em;
	text-indent:-1.5em
}

.voice01 span.point_txt01:before {
	content:'●';
	margin-right:0.5em;
	color:#5671bf
}

.voice01 .pr_img01 {
	margin:5% 0
}


/* ---------------------------------------------------------
	CSS Document detail > voice02
--------------------------------------------------------- */

.voice02 dl {
	background:url(../images/bk_line03.png);
	padding:5% 5% 2%
}

.voice02 dt {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

.voice02 dt p {
	vertical-align: middle;
	padding: 7%;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	text-align: left;
	font-size: 16px;
	position: relative;
	background:#fff
}

.voice02 dt p strong {
	color:#d95309
}

.voice02 dt p:after {
	content: '';
	width: 14px;
	height: 14px;
	margin-top: -9px;
	border-bottom: solid 1px #ff;
	border-left: solid 1px #fff;
	background: #fff;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	position: absolute;
	bottom: -8px;
	right:70px
}

.voice02 dd {
	width:200px;
	text-align:center;
	margin:auto;
}

.voice02 dd p {
	background:#73503c;
	color:#fff;
	margin:8px 50px;
	padding:1px 0 0;
	border-radius:50px;
}


.voice02 span.point_txt01 {
	display:block;
	margin-left:1.5em;
	text-indent:-1.5em
}

.voice02 span.point_txt01:before {
	content:'●';
	margin-right:0.5em;
	color:#5671bf
}

.voice02 .chart_img01 {
	display:block;
	margin:auto;
	margin-top:20px;
}

/* ---------------------------------------------------------
	CSS Document detail > btn_go01
--------------------------------------------------------- */
.btn_go01{
	text-align:center;
}

.btn_go01 a{
	display:block;
	background:#5671bf;
	padding:16px 10px 13px;
	font-size:16px;
	font-weight:bold;
	color:#fff;
	box-shadow: 3px 3px #d2ddf8;
	text-decoration:none;
	margin:40px 0;
	position: relative;
}

.btn_go01 a span{
	display: inline-block;
	background:#fff;
	color:#5671bf;
	border:1px solid #5671bf;
	border-radius:50px;
	margin-right:20px;
	padding:4px 12px 2px;
	position: absolute;
	top:-20px;
	left: 50%;
	transform: translateX(-50%);
}

.btn_go01 a:after{
	content:url("../images/btn_mk05.png");
	margin-left:15px;
	vertical-align:bottom;
}

.btn_go01 a:hover{
	background: #37519c;
}