@charset "UTF-8";


/********************** main start ********************/

* {
  padding: 0;
  margin : 0;
}
body {
  margin : 0;
  color:#000;
  background:#fff;
  font-family: sans-serif;
  font-size:medium;
}

/* 全体 */
#container,
#s-container {
  width:100%;
  min-height: 100vh;
  margin: 0 auto;
  position:relative;
  padding-bottom: 2rem;			/*	footerの高さ */
  box-sizing:border-box;		/*	全てを含めて100vh */
}
/* pc width固定 */
#container {
  width:900px;
}
#container #header {
  width: 640px;
}
#container #footer {
  width:100%;
}
/* smartphone heaer/navi/main/footer width */
#s-container #header,
#s-container #navi,
#s-container #main,
#s-container #footer {
  width:640px;
}
@media (max-width: 639px) {
  #s-container #header,
  #s-container #navi,
  #s-container #main,
  #s-container #footer {
	  width:100%; 
  }
}
/* ヘッダー */
#header {
  margin:0 auto;
  padding-top:5px;
  height: 100px;
  background-color:white;
}
#s-container #header {
  height:15vh;
}

#header img {
  width:100%;
  height:100%;
  vertical-align:bottom;
}
/* メニュー */
#container #navi {
  padding-top  : 10px;
  padding-left : 130px;
  height:2rem;
  background-color: navy;
}

/* メニュー(smartphone) */
#s-container #navi {
  padding : 0 1px;
  margin : 5px auto 0;
  -moz-border-radius: 5px;    /* Firefox */
  -webkit-border-radius: 5px;	/* Safari,Chrome */
  border-radius: 5px;			/* CSS3 */
  border: 1px green solid;	/* 枠線の装飾 */
  background-color: navy;   	/* 背景色 */
  font-size:90%;
  box-sizing: border-box;

}

#navi ul.navi-menu-main {
  text-align: center;
  list-style-type: none;
  padding:0;
  display:flex;					/* float > flex 20220529 */
  justify-content: flex-start;
}
#s-container #navi ul.navi-menu-main {
  margin : auto;
  width  : 90%;
  justify-content: center;
  flex-wrap:wrap
}

#navi ul.navi-menu-main li {	
  position:relative;
  height: 2rem;
  color: white;
  box-sizing: border-box;
}
#container #navi ul.navi-menu-main li {
  padding:2px 0;
  width: 128px;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: silver;
}
#container #navi ul.navi-menu-main li.rightline {
  width: 129px;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: silver;
}
#s-container #navi ul.navi-menu-main li {
  margin :3px;
  padding:3px 0;
  min-width:6rem;
  border-width: 1px;
  border-style: solid;
  border-color: silver;
}
#s-container #navi ul.navi-menu-main li.empty {
  height:0;	
  width:0;
  padding-top:0;
  padding-bottom:0;
  margin-top:0;
  margin-bottom:0;
  border:none;
}

#navi ul.navi-menu-main li img {
  display:inline-block;
  border: none;
  width:20px;
  height:20px;
  vertical-align:-5px;
  margin:0 3px 0 0;
}
#navi ul.navi-menu-main li a {
  text-decoration: none;
  display: block;
  height:100%;
  width :100%;
  text-align: center;
  color: white;
}
#navi ul.navi-menu-main li a:hover {
  font-weight: bold;
  background-color: #006633;
}

#navi ul.navi-menu-main li ul.navi-menu-sub {
  position:absolute;
  left:-1px;
  z-index:9999;
  background-color: navy;
  list-style-type: none;
  display:none;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: silver;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: silver;
}
#s-container #navi ul.navi-menu-main li ul.navi-menu-sub {
  margin-top:7px;
  left:-4px;
  border-right: none;
  border-bottom: none;
}

/* メイン */
#main {
  margin: 0 auto 20px;
}
#container #main.between {
/*
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
*/
  display:flex;
  justify-content:space-between;
}

/* center + right side contents */
#cocenter  {
  margin  : 0 auto;
  width   : 640px;
}

@media (max-width: 639px) {
  #s-container #cocenter {
	  width:95%; 
  }
}

/* center2 pcのみ */
#cocenter2 {
  margin  : 0 auto;
  width   : 100%;
}

/* ***** footer start ***** */
#footer {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height: 2rem;
  line-height: 2rem;
  background-color: silver;
  text-align: center;
  margin:0 auto;
}

/* exception.jsp */
div#exception {
  margin:30px auto;
}
div#exception h1 {
  color:white;
  background-color:#525D76;
  font-size:22px;
  text-align:center;
}
div#exception p {
  margin:10px;
}
div#exception-img,
div#exception-click {
  width:300px;
  line-height:1.5rem;
  margin:30px auto 0 auto;
}
div#exception-img img {
  margin:0 5px;
  width:4rem;
  height:4rem;
}
div#exception-img span {
  vertical-align:1.5rem;
}


/********************** main end ********************/