*{
  margin:0;
  padding:0;
}


body{
  font-size:14px;
  font-family:"meiryo";
}

.header{
margin-right:auto;
margin-left:auto;
width:800px;
height:120px;
}

.inside_option{
  background-image:url("gazou/top1.png");
  position:relative;
  width:800px;
  height:600px;
  margin-right:auto;
  margin-left:auto;
}

.inside_plan{
  background-image:url("gazou/top2.png");
  position:relative;
  height:600px;
  width:800px;
  margin-right:auto;
  margin-left:auto;
}

.inside_index{
  background-image:url("gazou/top3.png");
  position:relative;
  height:600px;
  width:800px;
  margin-right:auto;
  margin-left:auto;
}

.inside_kiki{
  background-image:url("gazou/top4.png");
  position:relative;
  height:600px;
  width:800px;
  margin-right:auto;
  margin-left:auto;
}

.inside_kiso{
  background-image:url("gazou/top5.png");
  position:relative;
  height:600px;
  width:800px;
  margin-right:auto;
  margin-left:auto;
}

.footer{
height:30px;
line-height:30px;
background:linear-gradient(90deg,rgb(139, 185, 214),rgb(20,143,200));
color:#fff;
font-size:10px;
text-align:right;
padding-right:20px;
margin:auto;
width:780px;
}

ul{
	position: relative;
  top:300px;
  left:40px;
  color:#3399cc;
  font-weight:bold;
}

ul.sec{
	position: relative;
  top:200px;
  left:200px;
  font-weight:bold;
}

ul.sec1{
	position: relative;
  top:300px;
  left:400px;
  font-weight:bold;
}

ul.sec2{
	position: absolute;
  top:330px;
  left:80px;
  font-weight:bold;
  color:#004400;
}

ul.sec3{
	position: relative;
  top: 180px;
  left:460px;
  font-weight:bold;
}

ul.sec4{
	position:absolute;
  top: 330px;
  left:500px;
  font-weight:bold;
  color:#004400;
}

.link {
	position: relative;
	display: inline-block;
	transition: .3s;
  text-decoration:none;
  color: #004400;
  line-height:45px;
  font-weight:bold;
}
.link::after {
	position: absolute;
	left: 50%;
  bottom:1px;
	content: '';
	width: 0;
	height: 2px;
	background-color: #004400;
	transition: .3s;
	transform: translateX(-50%);
}
.link:hover::after {
	width: 100%;
}

.link2 {
	position: relative;
	display: inline-block;
	transition: .3s;
  text-decoration:none;
  color: #3399cc;
  line-height:45px;
  font-weight:bold;
}
.link2::after {
	position: absolute;
	left: 50%;
  bottom:1px;
	content: '';
	width: 0;
	height: 2px;
	background-color: #3399cc;
	transition: .3s;
	transform: translateX(-50%);
}
.link2:hover::after {
	width: 100%;
}

h1{
  color:#696969;
  font-size:16px;
  font-weight:bold;
}

.moji1{
  position:absolute;
  top:160px;
  left:80px;
}

.moji2{
  position:absolute;
  top:120px;
  left:440px;
}

.moji3{
  position:absolute;
  top:140px;
  left:200px;
}

#page_top{
  width: 100px;
  height: 60px;
  position: fixed;
  right:13%;
  background: #3399cc;
  opacity: 80%;
  z-index:100;
  bottom:0%;
}
#page_top a{
  position: relative;
  display: block;
  width: 100px;
  height: 60px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -25px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'TOP PAGE';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 30px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

.onsei {
	font-size: 14px;
	position: relative;
	width: 0.4em;
	height: 0.4em;
	background-color: #3399cc;
  display: inline-block;  
  margin-left:0.8em;
  margin-bottom:0.15em;
}

.onsei::before {
	content: "";
	position: absolute;
	top: -0.3em;
	left: 0;
	width: 0;
	height: 0;
	border-top: 0.5em solid transparent;
	border-bottom: 0.5em solid transparent;
	border-right: 0.8em solid #3399cc;
}

.onsei2 {
	position: absolute;
	top: -0.2em;
	left: 0.4em;
	width: 0.4em;
	height: 0.5em;
	border-top: 0.15em solid transparent;
	border-left: 0.15em solid transparent;
	border-right: 0.15em solid #3399cc;
	border-bottom: 0.15em solid transparent;
	border-radius: 100%;
}