h1 {font-size:13px;font-weight:bolder;}
strong {font-size:18px;font-weight:normal;}
a.line {text-decoration:none;font-size: 11px; color: #808080;}
a.line:visited{color:#808080;}
hr {
    border-width: 1px 0px 0px 0px; /* 太さ */
    border-style: solid; /* 線種 */
    border-color: gold; /* 線色 */
    height: 1px; /* 高さ */
 }
.table1 { 
border-collapse: collapse; /* 枠線の表示方法 */ 
border: 1px #hotpink solid; /* テーブル全体の枠線（太さ・色・スタイル） */ 
 } 
.table1 TD { 
border: 1px gold solid; /* セルの枠線（太さ・色・スタイル） */ 
 }  


#menu ul{ 
margin: 0; 
padding: 0; 
list-style: none; 
}
#menu li{ 
display: inline; 
padding: 0; 
margin: 0; 
float: left;
width: 140px;
}
#menu li a{
display: block; 
border-left: 8px solid yellow;
background-color: white;
padding: 3px 10px;
text-decoration: none;
color: black;
width: 140px; 
margin: 1px 0px;
text-align: left;
font-size: 14px;
}
#menu li a:hover{
border-left: 8px solid gray;
background-color: lightgray;
}



.square_btn{
    width: 87%;
    display: inline-block;
    padding: 0.5em 1.2em;
    text-decoration: none;
    background: #f7f7f7;
    border-left: solid 6px blue;/*左線*/
    color: blue;/*文字色*/
    font-weight: bold;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}
.square_btn:active {
    box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
    transform: translateY(2px);
}

.square_btn1{
    width: 87%;
    display: inline-block;
    padding: 0.5em 1.2em;
    text-decoration: none;
    background: #f7f7f7;
    border-left: solid 6px #ff7c5c;/*左線*/
    color: #ff7c5c;/*文字色*/
    font-weight: bold;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}
.square_btn1:active {
    box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
    transform: translateY(2px);
}


.square_btn2 {
    width: 100%;
    display: inline-block;
    padding: 1.3em 1em;
    text-decoration: none;
    color: red;
    border: solid 2px red;
    border-radius: 3px;
    transition: .4s;
    background: red;
}

.square_btn2:hover {
    background: hotpink;
    color: white;
}
.square_btn3 {
    width: 70%;
    display: inline-block;
    padding: 0.8em 1em;
    text-decoration: none;
    color: #67c5ff;
    border: solid 2px #67c5ff;
    border-radius: 3px;
    transition: .4s;
}

.square_btn3:hover {
    background: #67c5ff;
    color: white;
}

.example1 {
  position: relative;
  }

.example1 p {

  position: absolute;
  color: white;/*文字は白に*/
  font-weight: normal; /*太さ普通に*/
  font-size: 1em;/*サイズ2倍*/
  font-family :Quicksand, sans-serif;/*Google Font*/
  
  top: 50%;
  left: 43%;
  -ms-transform: translate(-39%,-39%);
  -webkit-transform: translate(-39%,-39%);
  transform: translate(-39%,-39%);
  margin:0;
  padding:0;
  /*文字の装飾は省略*/
  }

.example1 img {
  width: 100%;
  }




.example {
  position: relative;
  }

.example p {

  position: absolute;
  color: white;/*文字は白に*/
  font-weight: normal; /*太さ普通に*/
  font-size: 1em;/*サイズ2倍*/
  font-family :Quicksand, sans-serif;/*Google Font*/
  
  top: 50%;
  left: 45%;
  -ms-transform: translate(-40%,-40%);
  -webkit-transform: translate(-40%,-40%);
  transform: translate(-40%,-40%);
  margin:0;
  padding:0;
  /*文字の装飾は省略*/
  }

.example img {
  width: 100%;
  }


.box1 {
    padding: 0.5em 1em;
    margin: 0.5em 0;
    color: #FFF;
    background: green;
    border-bottom: solid 6px limegreen;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    border-radius: 9px;
}
.box1 p {
    margin: 0; 
    padding: 0;
}

.box2 {
    position: relative;
    margin: 0em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box2 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.box2 p {
    margin: 0; 
    padding: 0;
}
.box3 {
    position: relative;
    margin: 0em 0;
    padding: 0.5em 1em;
    border: solid 3px gray;
    border-radius: 8px;
}
.box3 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: red;
    font-weight: bold;
}
.box3 p {
    margin: 0; 
    padding: 0;
}
.box4 {
    position: relative;
    margin: 0em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box4 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: blue;
    font-weight: bold;
}
.box4 p {
    margin: 0; 
    padding: 0;
}


.down{
  position: relative;
  transform: translate(0%,30%);
  width: 0;
  height: 0;
  border: 16px solid transparent;
  border-top-color: red;
  
}


.down1{
  position: relative;
  transform: translate(0%,30%);
  width: 0;
  height: 0;
  border: 16px solid transparent;
  border-top-color: red;
  
}
.down1:after{
  position: absolute;
  content: '';
  top: -182px;
  left: -8px;
  width: 16px;
  height: 166px;
  background: red;
}



.box11 {
    background-color: #a0522d;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold ; 
    padding: 16px;
}
.box22 {
    background-color: #67c5ff;
    border-radius: 10px;
    font-size: 17px;
    font-weight: bold ; 
    padding: 16px;
}
.box33 {
    background-color: blue;
    border-radius: 10px;
    font-size: 17px;
    font-weight: bold ; 
    padding: 16px;
}

.down11{
  position: relative;
  transform: translate(0%,-2%);
  width: 0;
  height: 0;
  border: 16px solid transparent;
  border-top-color: #a0522d;
  
}
.down22{
  position: relative;
  transform: translate(0%,0%);
  width: 0;
  height: 0;
  border: 16px solid transparent;
  border-top-color: #67c5ff;
  
}
.down33{
  position: relative;
  transform: translate(0%,0%);
  width: 0;
  height: 0;
  border: 16px solid transparent;
  border-top-color: blue;
  
}



.box111 {
    padding: 1.2em 1em;
    margin: 0.5em 0;
    font-weight: bold;
    color: #ff7c5c;/*文字色*/
    background: #FFF;
    border: double 5px #ff7c5c;
    border-radius: 5px;/*角の丸み*/
}
.box111 p {
    margin: 0; 
    padding: 0;
}

.box444 {
    padding: 1.2em 1em;
    margin: 0.5em 0;
    font-weight: bold;
    color: blue;/*文字色*/
    background: #FFF;
    border: double 5px blue;/*線*/
    border-radius: 5px;/*角の丸み*/
}
.box444 p {
    margin: 0; 
    padding: 0;
}



p.sample img:hover {
    opacity: 0.6; /* 40％ほど透過させる */
 }