html, body {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
}

body {
  /*タッチデバイスやmacでスクロールされないようにする*/
  overflow: scroll;
}


/* 縦横中央揃え */
.site-box {
        width : 100vw ;
        height: 100vh ;
		/*margin : 1px auto ;*/
		text-align: left;
  display: flex; /* 要素をflexboxに対応させる */
  align-items: center; /* 縦方向の中央揃え */
  justify-content: center; /* 横方向の中央揃え */
  flex-direction: column;  /*子要素の並びを上から下にする（要素の改行に対応） */
overflow:hidden;
}
@media screen and (max-width: 320px) and (max-width: 480px) {
.site-box  {
    width: 320px;
    height: 540px;
  }
}

/* 上から下へ揃え */
.site0-box {
        width : 100vw ;
        height: 100vh ;
		/*margin : 1px auto ;*/
		text-align: left;
background-color: #FFFFFF;
  display: flex; /* 要素をflexboxに対応させる */
  display : inline-flex;
  align-items: flex-start;
  justify-content: center; /* 横方向の中央揃え */
  flex-direction: column;  /*子要素の並びを上から下にする（要素の改行に対応） */
overflow:hidden;
}
@media screen and (max-width: 320px) and (max-width: 480px) {
.site0-box  {
    width: 320px;
    height: 540px;
  }
}


#a-box {
        width : 100% ;
        height: 100px ;
        padding : 5px;
background-color:#FFFFFF;
text-align: center;
}

#b-box {
        width : 100%  ;
        height: 30px ;
        padding : 5px;
background-color:#FF4500;
}

#c-box {
        width : 100%  ;
        height: 100%   ;
      min-height:330px;
border : 0px solid #FFFFFF ;
background-color:#FFFFFF;
padding : 5px ;
text-align: left;
/*margin: 0 ;*/

}

.a-box {
        width : 100% ;
        height: 10% ;
      min-height:100px;
border : 0px solid #FFFFFF ;
/*background-image: url(img/DWS_logo.gif);*/
background-color:#FFFFFF;
/*background-size: contain;*/
/*background-position: top center;*/
/*background-attachment: fixed;*/
/*background-repeat: no-repeat;*/
padding : 5px;
vertical-align:top;
text-align: center;
margin: 0 ;
}

.b-box {
        width : 100% ;
        height: 10% ;
      max-height:30px;
border : 0px solid #FFFFFF ;
background-color:#FF4500;
padding : 5px ;
text-align: left;
vertical-align:middle;
margin: 0 ;
}

.middle img{
vertical-align:middle;
margin: 4px 4px;

}

.c-box {
        width : 100% ;
        height: 80% ;
border : 0px solid #FFFFFF ;
background-color:#FFFFFF;
padding : 5px 5px 5px 5px ;
text-align: left;
margin: 0 ;
}


.d-box {
        width : 100% ;
        height: 100% ;
  background-color:#FF4500;
  overflow: scroll;
}

.e-box {
        width : 100% ;
        height: 100% ;
      max-height:600px;
border : 0px solid #FFFFFF ;
/*background-color:#FF4500;*/
padding : 0px;
text-align: center;
margin: 0 auto;
}

.f-box {
        width : 97% ;
        height: 65% ;
padding : 0px -10px 0px 0px ;
margin: -10px -10px 10px 0px ;
  overflow: scroll;
background-color: #ffffff;
}

.g-box {
        width : 97% ;
        height: 75% ;
padding : 0px -10px 0px 0px ;
margin: 5px -10px 10px 0px ;
  overflow: scroll;
background-color: #ffffff;
}

.h-box {
        width : 97% ;
        height: 90% ;
padding : 0px -10px 0px 0px ;
margin: -10px -10px 10px 0px ;
  overflow: scroll;
background-color: #ffffff;
}



#googleMap {
        width : 100%  ;
        height: 65% ;
    margin-left: auto;
    margin-right: auto;
display:block;

}

#map {
        width : 100%  ;
        height: 350px;
    margin-left: auto;
    margin-right: auto;
}

table#table-rec {
    width: 100%;
    border: 1px #FF6600 solid;
    border-collapse: collapse;
    border-spacing: 0;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
}

table#table-rec th {
    font-size: 15px;
    padding: 5px;
    border: #FF6600 solid;
    border-width: 1 1px 1px 1px;
    background: #FFCC99;
    font-weight: bold;
    line-height: 100%;
	color: #000000;
}

table#table-rec td {
    font-size: 15px;
	padding: 5px;
    border: 1px #FF6600 solid;
    border-width: 0 0 1px 1px;
    line-height: 80%;
/*	background: #FFFFFF;*/
	color: #000000;
}

table#table-rec .fixed {
  position: sticky;
  top: 0;
}

table#table-rec .fixed:before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  border: 1px solid #FF6600;
border-width: 1px;
}



table#table-course {
    width: 100%;
    border: 1px #000000 solid;
    border-collapse: collapse;
    border-spacing: 0;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
}

table#table-course th {
    font-size: 15px;
    padding: 5px;
    border: #000000 solid;
    border-width: 0 0 1px 1px;
    background: #FFCC99;
    font-weight: bold;
    line-height: 120%;
	color: #000000;
}

table#table-course td {
    font-size: 13px;
	padding: 5px;
    border: 1px #000000 solid;
    border-width: 0 0 1px 1px;
    line-height: 80%;
/*	background: #FF6600;*/
	color: #000000;
}

p.text1 {line-height: 150%; font-size: 25px; color: #FFFFFF; font-family: Verdana; font-weight: 700;}

p.text2 {line-height: 150%; font-size: 15px; color: #333333; font-family: Verdana;}

p.text3 {line-height: 150%; font-size: 20px; color: #0000FF; font-weight: bold; font-family: Verdana;}



.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #eb6100;
}
.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #f56500;
}



.button {
  width:110px;
  /*display       : inline-block;*/
  border-radius : 5px;          /* 角丸       */
  font-size     : 10pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  padding       : 5px 5px;   /* 余白       */
  background    : #000066;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 2em;         /* 1行の高さ  */
  border        : 0px solid #000066;    /* 枠の指定 */
}


.button2 {
  width:110px;
/*  display: flex;*/
  border-radius : 5px;          /* 角丸       */
  font-size     : 10pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  padding       : 5px 5px;   /* 余白       */
  background    : #FF4500;     /* 背景色     */
  color         : #FFFFFF;     /* 文字色     */
  font-weight: bold;
  line-height   : 2em;         /* 1行の高さ  */
  border        : 0px solid #c0c0c0;    /* 枠の指定 */
}


.button3 {
  width:99%;
  display: inline-block;
  border-radius : 5px;          /* 角丸       */
  font-size     : 1em;        /* 文字サイズ */
  text-align    : left;      /* 文字位置   */
  padding       : 5px 5px;   /* 余白       */
  line-height   : 1.5em;         /* 1行の高さ  */
  border        : 1px solid #000000;    /* 枠の指定 */
  margin: 0px 2px ;
}

.cp {
  border-radius : 5px;          /* 角丸       */
  font-size     : 1em;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  background    : #FFFFFF;     /* 背景色     */
  border        : 5px solid #000000;    /* 枠の指定 */
  font-weight: bold;
  line-height   : 2em; 
  margin: 0 1% ;
  display: block;
}


.box{
  height:350px;
  background-image: url(http://www.jva.e-sampo.co.jp/img/background.gif);
  background-position:center;
  background-size:250px;
  background-repeat:no-repeat;
}


.inner {
  padding-top: 30px;
  display: flex;
  justify-content: space-evenly;
}

details {
    border: 2px solid #000;
    border-radius: 4px;
    padding: .5em .5em 0;
  background: #FFFFFF;
}

summary {
    font-weight: bold;
    margin: -.5em -.5em 0;
    padding: .5em;
  background: #fff599;
}

details[open] {
    padding: .5em;
}

details[open] summary {
    border-bottom: 1px solid #000;
    margin-bottom: .5em;
}



table{
  border-collapse: collapse;  
  background-color: orange;
  color: Black;
}
td,th{ /* 各セルの指定 */
  padding:10px 30px;
	text-align:center;
  border-bottom:1px solid #000000;
  border-right:1px dotted #000000;
}
th{ /* 表の見出しの指定 */
	color:#000000;  
}
tr:first-child{  /* 最初の行の指定 */
	border-bottom: 3px solid #000000;	
}
tr:last-child{ /* 最後の行の指定 */
	border-bottom: 3px solid #000000;
}
td:last-child{ /* 一番左の列の指定 */
  border-right:0;
}
th:last-child{ /* 一番右の列の指定 */
  border-right:0;
}


body{
font-family:'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif !important;
}

img {
max-width:300px;
}

#cp-wrap {
position:  absolute;
    bottom: 10px;
    left: auto;
    right: auto;
}

.gps {
position:  absolute;
    top: 10px;
    left: 10px;
}

.hidarishita {
position:  absolute;
    left: 10px;
    bottom: 10px;
}

.migiue {
position:  absolute;
    right: 10px;
    top: 10px;
}