/* CSS Document */
article section {
	font-size: 1.15em;
	line-height: 1.35;
	margin-bottom: 30px;
}

section#Howto p small {
	display: block;
	margin-left: 1em;
	text-indent: -1em;
}


article section h2 {
	font-size: 1.5em;
	color:#004097;
	border-color: #004097;
	text-align: justify;
	clear: both;
}

article section h3 {
	color: #FFF;
	background: #004097;
	padding: 5px;
	border-radius: 6px;
	border: none;
}

article section#Point div {
	box-sizing: border-box;
}

article section div.flexwrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	flex-direction: row;
}

article section div.flexbox {
	width:49.5%;
}

article section div.flexbox:nth-child(odd) {
	margin-right: 0.5%;
}

article section div.flexbox:nth-child(even) {
	margin-left: 0.5%;
}

article section#Point p {
	text-align: justify;
}

article section img {
	width:99%;
	text-align: center;
}

/* What */
article section#What ol {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	flex-direction: column;
	height: 360px;
}

article section#What ol li {
	width : 35%;
	margin: 20px 0 0px 150px;
	height: 100px;
	display: block;
	position: relative;
	font-weight: bold;
	font-size: 1.5em;
}

article section#What ol li span {
	display: block;
	font-size: 0.7em;
	padding-top: 0.5em;
}

article section#What ol li:nth-child(1) {
	color: #999;
}

article section#What ol li:nth-child(2) {
	color: #000;
}

article section#What ol li:nth-child(3) {
	color: #F00;
}

article section#What ol li:nth-child(4) {
	color: #187FC3;
}

article section#What ol li:nth-child(5) {
	color: #FCBF00;
}

article section#What ol li:nth-child(6) {
	color: #009A63;
}

article section#What ol li:nth-child(1)::before ,
article section#What ol li:nth-child(2)::before ,
article section#What ol li:nth-child(3)::before ,
article section#What ol li:nth-child(4)::before ,
article section#What ol li:nth-child(5)::before ,
article section#What ol li:nth-child(6)::before {
	content: "　";
	position: absolute;
	top:-5px;
	left: 0;
	width:100px;
	height: 100px;
	margin-left: -110px;
}

article section#What ol li:nth-child(1)::before {
	content: "　";
	background:  url(./../img/kappa1.png);
	background-repeat: no-repeat;
	background-size:contain;
	width:100px;
	height: 100px;
}

article section#What ol li:nth-child(2)::before {
	content: "　";
	background:  url(./../img/kappa2.png);
	background-repeat: no-repeat;
	background-size:contain;
}

article section#What ol li:nth-child(3)::before {
	content: "　";
	background:  url(./../img/kappa3.png);
	background-repeat: no-repeat;
	background-size:contain;
}

article section#What ol li:nth-child(4)::before {
	content: "　";
	background:  url(./../img/kappa4.png);
	background-repeat: no-repeat;
	background-size:contain;
}

article section#What ol li:nth-child(5)::before {
	content: "　";
	background:  url(./../img/kappa5.png);
	background-repeat: no-repeat;
	background-size:contain;
}

article section#What ol li:nth-child(6)::before {
	content: "　";
	background:  url(./../img/kappa6.png);
	background-repeat: no-repeat;
	background-size:contain;
}


/* Admission */
article section#Admission {
	
}

article section#Admission div#AdmissionImage img:first-child {
	width:40%;
	height: auto;
	float: left;
}

article section#Admission div#AdmissionImage img:last-child {
	width:60%;
	height: auto;
}

article section#Admission div p {
	margin: 5px;
}

article section#Admission dl {
	font-weight: bold;
	margin: 10px auto;
}

article section#Admission dl dt {
	margin-left: 1em;
}


article section#Admission dl dt::before {
	content: "◆";
}

article section#Admission dl dd {
	font-size: 1.2em;
	margin-left: 1.5em;
	color: #F00;
}

article section#Admission div ul {
	margin:0px 10px 10px 20px;
	font-size: 0.875em;
}

article section#Admission div ul li::before {
	content: "※";
}

/* Present */
article section#Present p {
	text-align: center;
	font-size: 1.2em;
}

article section#Present ul {
	width:80%;
	margin: 10px auto;
	font-size: 0.95em;
}

article section#Present ul li {
}

article section#Present ul li::before {
	content: "※";
	margin-left: -1em;
}

article section#Admission div#DM {
	background: #008cd6;
	border-radius: 0.25em;
	padding: 0.25em 0.5em;
	font-weight: 800;
	font-size: 1.25em;
	color: #fff100;
	position: relative;
}

article section#Admission div#DM p::before {
	content: "★";
}
	
article section#Admission div#DM p {
	margin: 0 8em 0 1em;
	text-indent: -1em;
}

article section#Admission div#DM img {
	width:7em;
	height: auto;
	position: absolute;
	bottom: 0;
	right: 0;
}


/* Howto */
article section#Howto div.flexwrap h3 {
	padding-left: 10px;
}

article section#Howto div.flexwrap h3.num1::before {
	content:"① ";	
}

article section#Howto div.flexwrap h3.num2::before {
	content:"② ";	
}

article section#Howto div.flexwrap h3.num3::before {
	content:"③ ";	
}

article section#Howto div.flexwrap h3.num4::before {
	content:"④ ";	
}

article section#Howto div.flexwrap div.flexbox {
	margin-bottom: 10px;
}

article section#Howto div.flexwrap div.flexbox p {
	margin: 5px;
}

article section#Howto div.flexwrap div.flexbox div#Furthermore {
	margin: 30px  10px 10px 10px;
	border: 3px solid #EC6C00;
	border-radius: 10px;
	padding: 1em 0 0.5em 0;
}

article section#Howto div.flexwrap div.flexbox div#Furthermore p {
	position: relative;
	margin: 0 0.5em;
}

article section#Howto div.flexwrap div.flexbox div#Furthermore p span {
	position: absolute;
	top:-1.8em;
	left:0;
	background: #EC6C00;
	color: #FFF;
	font-size: 1.5em;
	font-weight: bold;
	padding: 5px 10px;
	border-radius: 2em;
}

article section#Howto div.flexwrap div.flexbox div#Only {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	flex-direction: row;
}

article section#Howto div.flexwrap div.flexbox div#Only p {
	width:60%;
	padding: 5px;
	margin: 1em 5% 1em 10px;
	color: #004097;
	font-size: 1.1em;
	font-weight: bold;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	border: #004097 solid 3px;
	background-color: #E3EFFF;
	border-radius: 10px;
}

article section#Howto div.flexwrap div.flexbox div#Only img {
	width:25%;
	height: 25%;
	float: right;
}
/* Point*/
article section#Point h3 {
	color: #EC6C00;
	background: none;
	padding:5px 0 0 0;
	clear: both;
}

article section#Point div.pointbox h3 {
	background: #EC6C00;
	color: #FFF;
	text-align: center;
	border-radius: 0 0;
	padding:5px 0 ;
}

article section#Point div.pointbox h3::before ,
article section#Point div.pointbox h3::after {
	content: "★";
}

article section#Point h3:nth-child(n+9) {
	font-size: 1em;
}

article section#Point div.pointbox {
	margin:0 1% 10px 0;
	border: 3px solid #EC6C00;
	border-radius: 10px 10px 10px 10px;
}

article section#Point div.pointbox p,
article section#Point div.pointbox ul {
	margin:0 10px;
	line-height: 1.5;
}

article section#Point div.pointbox p {
	text-align: center;
}

article section#Point div.text-justify p {
	text-align: justify;
	font-size: 0.975em;
	margin: 0.5em 0.25em;
}

article section#Point div.text-justify p.f120 {
	font-size: 1.15em;
	font-weight: 600;
	text-indent: -2em;
	margin-left: 2.2em;
}

article section#Point div.pointbox p.text-right {
	text-align: right;
}

article section#Point div.pointbox ul li {
	display:block;
}

article section#Point div.pointbox ul li span {
	text-align: left;
	float: left;
	clear: right;
	padding: 10px 0 0 0;
	font-size: 0.9em;
}

article section#Point div.pointbox ul li em {
	color: #000;
	font-size: 1.4em;
	text-align: right;
	width:3em;
	float: right;
	position: relative;
}

article section#Point div.pointbox ul li em::before {
	content: url(../img/right.png);
	position:absolute;
	top:0;
	left: 0;
}

article section#Point div.flexbox img {
	margin: 40px 0 0 0;
}

article section#Point div.flexbox dl {
	padding-bottom: 0px;
	margin-bottom: 5px;
	height: auto;
}

article section#Point div.flexbox dl dt {
	float: left;
	font-weight: normal;
	padding-top: 5px;
	margin-left: 10px;
	width:15em;
	text-align: right;
}

article section#Point div.flexbox dl dt span {
	width:10em;
	float: left;
	text-align: left;
}

article section#Point div.flexbox dl dd {
	font-size: 1.2em;
	text-align: right;
	width:7.5em;
	float: right;
	position: relative;
	font-weight: bold;
	margin-right: 10px;
}

article section#Point div.flexbox dl dd::before {
	content: url(../img/right.png);
	position:absolute;
	top:0;
	left: 0;
}

article section#Point div#RaijoPoint {
	border: 1px solid #0075c2;
	border-radius: 0.75em;
	box-sizing: border-box;
	position: relative;
}

article section#Point div#RaijoPoint h3 {
	color: #FFF;
	font-weight: 800;
	background: #0075c2;
	border-radius: 0.5em 0.5em 0 0;
	padding: 5px 10px;
	display: block;
	width:100%;
}

article section#Point div#RaijoPoint img {
	width:15em;
	height: auto;
	position: absolute;
	top:-10px;
	right: 0;
}

article section#Point div#RaijoPoint p {
	margin: 1em 6em 1em 1em;
}

article section#Point div#H30Point {
	margin: 1em 0;
	position: relative;
}

article section#Point div#H30Point h3 {
	background-color: #fff100;
	color: #006934;
	font-weight: 800;
	font-size: 1.25em;
	border-radius:　0;
	padding: 5px 0 5px 5em;
}

article section#Point div#H30Point h3::before {
	content:" ";
	background-image: url("../img/h30.png");
	display: inline-block;
	position: absolute;
	top:-20px;
	left: 0;
	width:5em;
	height: 5em;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top left;
	z-index: 0;
}

article section#Point div#H30Point p {
	color: #006934;
	margin:0.75em 1em 0.75em 7.5em;
	font-size: 0.9em;
}

article section#Point div#H30Point table {
	border: 1px solid #006934;
	border-collapse: collapse;
	width:100%;
	z-index: 1000;
	position: relative;
	background: #fff;
}

article section#Point div#H30Point table th,
article section#Point div#H30Point table td {
	font-weight: 800;
	font-size: 1.25em;
	padding: 5px;
	text-align: center;
	border: 1px solid #006934;
	
}

article section#Point div#H30Point table th {
	border-right: 1px solid #fff;
	background: #006934;
	color: #fff;
}

article section#Point div#H30Point table th:last-child {
	border-right: 1px solid #006934;
}

article section#Point div#H30Point ul {
	font-size: 0.875em;
}

article section#Point div#H30Point ul li  {
	margin-right: 1em;
	float: left;
	width:auto;
}

article section#Point div#RaijoPoint p small::before,
article section#Point div#H30Point ul li::before {
	content:"※";
}

/* Rank */
article section#Rank {
}

article section#Rank h3 {
	clear: left;
}

article section#Rank div.flexwrap h3 {
	background: none;
	color: #000;
	font-weight: 800;
}

article section#Rank div.flexwrap h3::before {
	content:"●";
	color: #E80000;
}

article section#Rank div.flexwrap ol {
	margin: 0 0 0.25em 1em;
	font-size: 1.25em;
}

article section#Rank div.flexwrap div.flexbox:first-child ol li::after {
	content: "　　→";
}

article section#Rank ul {
	font-size: 0.875em;
	margin: 0 0 1em 1em;
}

article section#Rank ul li {
	width:auto;
	margin-right: 1em;
	float: left;
}
article section#Rank ul li::before {
	content: "※";	
}


article section#Rank div#RankTable h3 {
	color: #E80000;
	background: none;
	font-size: 1.25em;
	font-weight: 800;
}

article section#Rank div#RankTable table {
	border: 2px solid #E80000;
	border-collapse: collapse;
}

article section#Rank div#RankTable table th {
	background: #E80000;
	border: 1px #FFF solid;
	text-align: center;
	color: #FFF;
	padding: 5px;
	white-space: nowrap;
}

article section#Rank div#RankTable table td {
	border: 1px solid #E80000;
	white-space: normal;
	text-align: center;
	padding: 5px;
}

article section#Rank div#RankTable table td.g3 {
	text-align: justify;
	width:25%;
	color: #eb6120;
	background: #fffeee;
	font-weight: 800;
}

article section#Rank div#RankTable table td.service {
	font-size: 0.65em;
	text-align: justify;
}

article section#Rank div#RankG3 {
	margin: 2em 0 0 0;
}
article section#Rank div#RankG3 h3 {
	background-color: #eb6120;
	background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #ffffff), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #ffffff),color-stop(.75, #ffffff), color-stop(.75, transparent),to(transparent));
	background-size: 10px 10px;
	color: #eb6120;
	text-align: center;
	border-radius: 0;
	padding: 0;
	font-weight: 800;
}

article section#Rank div#RankG3 h3 span {
	display: inline-block;
	background: #ffffff;
	height: 1.4em;
	padding: 0 1em;
}

article section#Rank div#RankG3 div#Yutai {
	background: #fffeee;
	border: 2px solid #eb6120;
}

article section#Rank div#RankG3 div#Yutai div {
	width:50%;
	float: left;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

article section#Rank div#RankG3 div#Yutai div:last-child {
	border-left: 1px solid #eb6120;
}


article section#Rank div#RankG3 div#Yutai div ul {
	width:90%;
	margin: 1em 1em 0 1em;
	font-size: 1.35em;
	font-weight: 800;
	color:#eb6120;
}

article section#Rank div#RankG3 div#Yutai div ul li {
	float: none;
	margin: 0 0 0 1em;
	text-indent: -1em;
}

article section#Rank div#RankG3 div#Yutai div ul li::before {
	content:"★";
}

article section#Rank div#RankG3 div#Yutai div p {
	font-size: 0.75em;
	text-align: center;
}

article section#Rank div#RankG3 div#Yutai div p::before {
	content:"※";
}

/* Trouble */
article section#Trouble {
}


/* Inquiry*/
article section#Inquiry {
	text-align: center;
}

article section#Inquiry img {
	width:40%;
	height: auto;
	display: block;
	margin: 0 auto;
}

@media screen and (max-width:960px) {
	article {
		width:98%;
		margin: 0 auto;
	}
	article img {
		width:100%;
		height: auto;
	}
	
	article section {
		font-size: 2em;
	}
	
	article section div.flexwrap {
		display:block;
	}

	article section div.flexbox {
		width:100%;
	}

	article section#Point div.flexbox img {
		margin: 0px 0 0 0;
	}

	article section#Point div.flexbox dl {
		padding-bottom: 10px;
		height: auto;
	}
	
	article section#What ol {
		display: block;
		height: inherit;
	}
	
	article section#What ol li {
		width:inherit;
		margin-left: 280px;

	}
	
	article section#What ol li:nth-child(1)::before ,
	article section#What ol li:nth-child(2)::before ,
	article section#What ol li:nth-child(3)::before ,
	article section#What ol li:nth-child(4)::before ,
	article section#What ol li:nth-child(5)::before ,
	article section#What ol li:nth-child(6)::before {
		content: "　";
		position: absolute;
		top:0;
		left: 0;
		width:150px;
		height: 150px;
		margin-left: -160px;
	}
	
	article section#Present ul {
		width:90%;
	}
	article section#Howto div.flexwrap div.flexbox div#Furthermore {
		margin-top:2em;
	}	
	
	article section#Admission div#DM p {
		margin: 0 0 0 1em;
	}
	article section#Point div#RaijoPoint p  {
		margin: 0.5em;
	}
	article section#Point div#RaijoPoint img ,
	article section#Admission div#DM img {
		display:none;
	}
	
	article section#Point div#H30Point table,
	article section#Point div#H30Point table tr,
	article section#Point div#H30Point table th,
	article section#Point div#H30Point table td {
		font-size: 1em;
		display: block;
		width:100%;
	}
	
	article section#Point div#H30Point table th {
		border-bottom: 1px solid #FFF;
	}
	article section#Point div#H30Point table th:last-child {
		border-bottom: none;
	}

	article section#Point div#H30Point table thead {
	  display: block;
	  float: left;
	  width: 50%;
	}
	article section#Point div#H30Point table tbody {
	  display: block;
	  float: left;
	  width: 50%;
	}
	article section#Rank div.flexwrap div.flexbox:first-child ol li::after {
		content: none;
	}
	article section#Rank div#RankG3 div#Yutai div {
		width:100%;
		float: none;
	}
	
	article section#Rank div#RankG3 div#Yutai div:last-child {
		border-left: none;
		border-top: 1px solid #eb6120;
	}


}