Newer
Older
matsugaoka / web / main.css
@大石桃菜 大石桃菜 on 24 Jul 2019 2 KB changed the footer design
/*
 *  main.css for id
 */

/* body */
 body{
 background: #8fbc8f;
 font-family:"ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","MS P明朝","MS PMincho","MS 明朝",serif;
 }


 #center{
 width: auto;
 margin: 0px auto;
 padding: 0px auto;
 background: #ffffff;
 }

 #main{
 width: auto;
 margin: 8px;
 padding: 4px;
 }

 /* header */
header{
  padding: 10px ;
}

.setumei{
  padding: 10px ;
}

 /* nav */
nav{
 text-align: center;
}

#nav {
  list-style: none;
  overflow: hidden;
  display: flex;
  margin: 0 auto;
	width: 100%;
	max-width: 100%;
}

#nav li {
  position: relative;
  background-color:#385572;
  float: left;
  width:  18%;
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
}

#nav li+ li {
  border-left: 1px solid #fff;
}

#nav li a {
  display: block;
	padding: 15px 5%;
  width: 90%;
	color: #fff;
	text-align: center;
  text-decoration: none;
  font-weight: bold;
}

#nav li:hover{
  background-color: #808080;
}

/* img */

.img{
  text-align: center;
}

/* h1 */

h1 {
  position: relative;
  display: inline-block;
  padding: 0 55px;
}

h1:before, h1:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: black;
}

h1:before {
  left:0;
}
h1:after {
  right: 0;
}

/* h2 */

h2 {
  border-bottom: double 5px #a52a2a;
}

/* list */

ul.access {
	padding:0.5em;
	list-style-type:none;
}
ul.access li {
	position:relative;
	padding: 0em 0.3em 0.3em 1.3em;
}
ul.access li:after,ul.access li:before {
	position:absolute;
	content:'';
	display:block;
	background: #d2691e;
	top: 0.43em;
	left: 0.5em;
	height: 11px;
	width: 4px;
	border-radius: 10px;
	transform: rotate(45deg);
}
ul.access li:before {
	top: 0.6em;
	left: 0.2em;
	height:8px;
	transform:rotate(-45deg);
}

/* swiper */

.swiper-container{
  text-align: center;
}

/* table */

table.ryokin {
	background-color: #FFF;
	border: 1px solid #152501;
	empty-cells: show;
	width: 560px;
  border-collapse: collapse;
}

table.ryokin th {
	background-color: #324e0e;
	border: 1px solid #152501;
	color: #FFF;
	padding: 6px 12px;
	text-align: center;
	width: 280px;
}
table.ryokin td {
	border: 1px solid #152501;
	padding: 6px 12px;
	text-align: center;
	vertical-align: middle;
}
table.ryokin  {
	text-align: right;
}

/* footer */

#center{
    height: 100%;
    min-height: 100vh;
    position: relative;
    padding-bottom: 150px;
    box-sizing: border-box;

}

footer{
    width: 100%;
    background-color: #4a4a4a;
    color: #fff;
    padding: 25px 0;

    position: absolute;
    bottom: 0;
}

#footer{
 margin-left: 100px;
}