@charset "utf-8";
html {

	  background: #151515 url("../images/bg1.png") fixed; 	
/*    background-image: linear-gradient(270deg, rgb(230, 233, 233) 0%, rgb(216, 221, 221) 100%); */
    -webkit-font-smoothing: antialiased;
}
/* -------------------------------------------------------------box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);  */
body {
    background: #E6E9E9;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #545454;
   /* font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
    font-size: 18px;
    line-height: 1.5;	/*行間の指定*/
    margin: 0 auto;		/*中央寄せ*/
    max-width: 700px;
    padding: 2em 2% 4em;
}
h1,h2, h3, h4, h5, h6 {
    color: #333333;
/*text-decoration: underline;*/
	text-decoration: underline;
    font-weight: 600;
    line-height: 1.3;
    text-align:center;		/* 文字のセンタリング　*/
}


img {
    animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
    background: transparent;
/*    border: 10px solid rgba(0, 0, 0, 0.12); */
	
    border-radius: 4px;
    display: block;
    margin: 1.3em auto;
    max-width: 95%;
}
#footer	{
		text-align:center;		/* 文字のセンタリング　*/	
}

/* --------------------------------
 * about
 * -------------------------------- */
.about {
	padding: 8px 19px;
    margin: 2em 0;
    background:#cde4ff;
    color: #2c2c2f;
    text-align:left;
    border-top:solid 5px #5989cf;
    border-bottom: solid 5px #5989cf;
}
.about p {
    margin: 0; 
    padding: 0;
}
/* -----------------------------------------------------*/
.button {
  display: inline-block;
  margin: 3px 10px;/*余白も指定できる*/
  width: 135px;
  padding:  4px;/*余白も指定できる*/
  border-radius: 4px;
  background-color: #afa58d;
  color: #FFF;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 1.0rem;
}
.button:hover {
  opacity: 0.5;
/*  color: #0000FF;
  background: #CCFF99;*/
}
.button-showy {
/*  background-color: #D29E04;*/
  background-color: #afa58d;
  padding : 3px ;
}
.button-ghost {
  border: 1.2px solid #fff;
  background-color: #afa58d;
}

.button1 {
  background-color: #0099FF;
  text-decoration: none;
  color: #FFF;
  padding : 4px ;
  width: 135px;
  font-size: 1rem;
}
.button2 {
  background-color: #99CC00;
  text-decoration: none;
  border-radius: 4px;
  color: #0000FF;
  padding : 4px ;
  width: 135px;
  font-size: 1.0rem;
}
.button3 {
    position: relative;
    display: inline-block;
    font-weight: bold;
    padding : 3px ;
    width: 110px;
    text-decoration: none;
    color: #993300;
    background: #fff1da;
    border-bottom: solid 4px #FFA000;
    border-radius: 15px 15px 0 0;
    transition: .4s;
  }

.button3:hover {
    background: #ffc25c;
    color: #FFF;
  }
.button4 {
  background-color: #CCFFFF;
  text-decoration: none;
  border-radius: 4px;
  color: #000000;
  padding : 4px ;
  width: 135px;
  font-size: 1.0rem;
}
.button5 {
    position: relative;
    display: inline-block;
    font-weight: bold;
    padding : 3px ;
    width: 110px;
    text-decoration: none;
    color: #993300;
    background: #FFFFFF;
    border-bottom: solid 4px #FFA000;
    border-radius: 15px 15px 0 0;
    transition: .4s;
  }    
  
/* --------------------------------------------- */
.btn-cross {
  display: inline-block;
  position: relative;
  padding: 3px;
  border-top: solid 2px black;
  border-bottom: solid 2px black;
  text-decoration: none;
  font-weight: bold;
  color: #0000FF;
}
.btn-cross:before, .btn-cross:after {
  content: '';
  position: absolute;
  top: -7px;
  width: 2px;
  height: -webkit-calc(100% + 14px);
  height: calc(100% + 14px);
  background-color: rgb(255, 255, 128);
  transition: .3s;
}
.btn-cross:before {
  left: 7px;
}
.btn-cross:after {
  right: 7px;
}
.btn-cross:hover:before {
  top: 0px;
  left:0;
  height: 100%;
}
.btn-cross:hover:after {
  top: 0px;
  right: 0;
  height: 100%;
}
/* --------------------------------------------- */
.cect {
  padding: 0px 0px;
  background-color: #E6E9E9;
  color: #333;
  text-align:left;
  }
.waku {
	padding: 0.5em 1em;
    margin: 2em 0;
    color: #CCFFFF;
    background: #CCFFCC;
    border-top: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.waku2 {
	padding: 0.5em 1em;
    margin: 2em 0;
    color: #CCFFFF;
    background: #E6E9E9;
    border-top: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
    text-align:center;
}
.waku p {
    margin: 0; 
    padding: 0;
}
.waku01{
　　padding: 0.5em 1em;
    margin: 2em 0;
    border: double 5px #4ec4d3;
    background: #FFFF00;
    text-align:center;
}
.waku01 p {
    margin: 0; 
    padding: 0;
}
.box12{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #FFFFFF;
    background: #000000;
    border-bottom: solid 6px #aac5de;
    border-radius: 9px;
}
.box12 p {
    margin: 0; 
    padding: 0;
}
.box13{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #0000CC;
    background: #99FFCC;
    border-bottom: solid 6px #aac5de;
    border-radius: 9px;
}
.box13 p {
    margin: 0; 
    padding: 0;
}