@charset "utf-8";
/***********************************************************************
 * Reset
 **********************************************************************/
 
 /***********************************************************************
 * Structure
 **********************************************************************/
html {
	height: 100%;
}

 /***********************************************************************
 * header
 **********************************************************************/
 header img{
  margin: 15px 15px 15px 15px;
}
header h1{
  padding: 0.1em 0.3em 0em 0.3em;
  background-position: 0 0;
  background-size: auto 200%;
  transition: .3s;
  position: absolute;
  top:50px;
  left:130px;
  color: #FFFFFF;
}

header h1:hover{
 background-position: 0 100%;
 color: #a8a8a8;
}
header img:hover{
 color:#eeeeee94;
 opacity:0.9;
}
header #title {
  display: flex;
  background-color:#0b5f79;
}

/***********************************************************************
 * h1-h6
 **********************************************************************/

/***********************************************************************
 * main
 **********************************************************************/
 main h1 {
    margin: auto auto 20px;
    padding:10px;
    border:7px outset #000099 ;
    background-repeat: repeat;
    background-position:  center top;
    width: 50%;
    padding-top: 30px;
    background-color: #dfdbdb;
    background-image: url(../image/pattern/pattern10.jpg);
    display: block;
    font-size: xx-large;
    color: #004700;
    font-weight: bold;
    text-align: center;
    height: 65px;
  }
 main h1 span {
    padding:2px;
    background-color:#fdfdfd; 
 }
 main h2 {
    border-style: dotted solid;
    border-color: #33cc00;
    border-width: 2px 1px 2px 8px;
    padding: 2px 2px 2px 2px;
    font-size: large;
    text-align: left;
    font-weight: bold;
    color: #006300;
    font-style: italic;
    display: block;
  }
  main h3 {
    border-left:5px solid #bd0cd4;
    border-bottom:1px solid #124ac2;
    border-width: 0px 0px 2px 2px;
    padding: 2px 1em;
    margin:1em 1em 0.5em;
    font-size: normal;
    text-align: left;
    font-weight: normal;
    color: black;
    display: block;
    width:auto;
  }

  
main .p{
 margin:0 2em;
}

main #mail{
	border: 1px solid black;
	padding:3px;
	margin:1em 1em;
	width:80%;
	display:box;
	height: auto;
}

main #mail span{
	padding:4px;
}

main .box2{
	display: flexbox;
	flex-direction: column;
}

main ol{
	border:2px solid #00a5de;
}
/*
main table{
	width:100%;
}

main table td{
	border: 1px solid black;
	padding:2px 1em;
}
*/
@media screen and (min-width: 800px){
	main #mail{
		border: 1px solid black;
		padding:3px;
		margin:1em 1em;
		width:600px;
	}
}

@media screen and (max-width: 800px) {
  main .box{
    flex-direction:column;
  }
  
  main .float{
    display:flex; 
    margin:0 3px;
    flex-direction:column-reverse;
  }

  main .image{
    max-width:80%;
    height:auto;
    position: relative;
    align-self: center;
  }


  main .image dd{
    text-align:center;
  }

/*
  main table{
	width:100%;
}
*/
}
@media screen and (min-width: 800px) and (max-width: 1000px) {
  main .box{
    flex-direction:row;
  }
/*
  main table{
	width:90%;
}
*/
}
@media screen and (min-width: 1000px){
  main .box{
    flex-direction:row;
  }

}