/* リンクを四角いボックスで囲んでボタン風にする orange　*/


/* box type */
.btn-square-pop {
  position: relative;
  display: inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #FFF;
  background: #B43104;/*背景色 orange color*/
  border-bottom: solid 2px #d27d00;/*少し濃い目の色に*/
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
}
.btn-square-pop:active {
  border-bottom: solid 2px #B43104;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

/* リンクを四角いボックスで囲んでボタン風にする blue　*/
/* box type2 */
.btn-square-pop2 {
  position: relative;
  display: inline-block;
/*  padding: 0.25em 0.5em;*/
  padding: 0.1em 0.5em;
  text-decoration: none;
  color: #FFF;
  background: #086A87;/*背景色 orange color*/
  border-bottom: solid 2px #585858;/*grey*/
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
}
.btn-square-pop2:active {
  border-bottom: solid 2px #086A87;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
  color: #F4FA58;
}

/* リンクを四角いボックスで囲んでボタン風にする green　*/
/* box type3 */
.btn-square-pop3 {
  position: relative;
  display: inline-block;
/*  padding: 0.25em 0.5em;*/
  padding: 0.1em 0.5em;
  text-decoration: none;
  font-size: 25px;
  color: #FFF;
  background: #1D541D;/*背景色 orange color*/
  border-bottom: solid 2px #585858;/*grey*/
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
}
.btn-square-pop3:active {
  border-bottom: solid 2px #086A87;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
  color: #F4FA58;
}



/* リンクを四角いボックスで囲んでボタン風にする h2カラー　*/
/* box type4 */
.btn-square-pop4 {
  position: relative;
  display: inline-block;
/*  padding: 0.25em 0.5em;*/
  padding: 0.1em 0.5em;
  text-decoration: none;
font-size: 100%;  color: #FFF;
background:#4783c2; /*背景色*/
  border-bottom: solid 2px #585858;/*grey*/
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
}
.btn-square-pop4:active {
  border-bottom: solid 2px #4783c2;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
  color: #F4FA58;
}



/* リンクを付箋のように　TOPボタン　　*/

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

/* リンクを付箋のように2　戻るボタン　　*/
.btn-sticky2 {
/*display: inline-block;*/
  padding: 0.2em 1.2em;
  text-decoration: none;
  background: #f7f7f7; /* grey color */
  border-left: solid 2px #F7FE2E;/*左線*/
  color: #FF4000;/*文字色*/
  font-weight: bold;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}
.btn-sticky2:active {
  box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
  transform: translateY(2px);
}


/*  リンクを太く、アンダーラインは引かない　　*/

/*  bottom   orange  */

.btn-border-bottom {
  position: relative;
/*display: inline-block;*/
  font-weight: bold;
  font-size: 1.15em;
  padding: 0.01em 0;
 /*  text-decoration: none;*/
  color: #FF8000;  
}

/*  
.btn-border-bottom:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 2px;
  top:100%;
  left: 0;
  border-radius: 2px;
  background:#FF8000;
  transition: .2s;
}
 */

.btn-border-bottom:hover:before {
  top: -webkit-calc(100% - 3px);
  top: calc(100% - 3px);
}


/*  bottom2  水色   */

.btn-border-bottom2 {
  position: relative;
/*display: inline-block;*/
  font-weight: bold;
  font-size: 1.15em;
  padding: 0.01em 0;
 /*  text-decoration: none;*/
  color: #0080FF;
}

/*  
.btn-border-bottom2:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 2px;
  top:100%;
  left: 0;
  border-radius: 2px;
  background: #0080FF;
  transition: .2s;
}
  */

.btn-border-bottom2:hover:before {
  top: -webkit-calc(100% - 3px);
  top: calc(100% - 3px);
}


/*  bottom3 wasede color  */

.btn-border-bottom3 {
  position: relative;
/*display: inline-block;*/
  font-weight: bold;
  font-size: 1.1em;
  padding: 0.01em 0;
/*  text-decoration: none;*/
  color: #FF4000;
}

/*  
.btn-border-bottom3:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 2px;
  top:100%;
  left: 0;
  border-radius: 2px;
  background:#FF4000;
  transition: .2s;
}
  */

.btn-border-bottom3:hover:before {
  top: -webkit-calc(100% - 3px);
  top: calc(100% - 3px);
}



/*    文章ブロックを線で囲む　水色　　*/
.box1 {
    position: relative;
    margin: 1em 0;
	margin-bottom: 0.5em;
    padding-top: 0.3em;
    padding-left: 20px;
    padding-bottom: 0em;
    border: solid 3px #0174DF;
    border-radius: 8px;
}
.box1 .box-title {
    position: absolute;
    display: inline-block;
    top: 2px;
    left: 10px;
    padding: 0 9px;
    padding-bottom: 2px;
    line-height: 1;
    font-size: 16px;
    background: #FFF;
    color: #0174DF;
    font-weight: bold;
}
.box1 p {
    margin: 0; 
    padding: 0;
}


/*    文章ブロックを線で囲む　orange　　*/
.box2 {
    position: relative;
    margin: 1em 0;
	margin-bottom: 0.5em;
    padding-top: 0.3em;
    padding-left: 20px;
    padding-bottom: 0em;
    border: solid 3px #DF7401;
    border-radius: 8px;
}
/*    .box2 .box-title {
    position: absolute;
    display: inline-block;
    top: -10px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 16px;
    background: #FFF;
    color: #DF7401;
    font-weight: bold;
}　　*/
.box2 p {
    margin: 0; 
    padding: 0;
}

/*    文章ブロックを線で囲む　grey　　*/
.box3 {
    position: relative;
    margin: 0.3m 0;
	margin-bottom: 0.1em;
    padding-top: 3.px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 2px;
    border: solid 3px #cccccc;
    border-radius: 8px;
}
/*    .box3 .box-title {
    position: absolute;
    display: inline-block;
    top: -10px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 16px;
    background: #FFF;
    color: #cccccc;
    font-weight: bold;
}　　*/
.box3 p {
    margin: 0; 
    padding: 0;
}



/*inputボタンの設定
---------------------------------------------------------------------------*/
input[type="submit"],
input[type="button"],
input[type="reset"] {
width: 200px;	/*ボタン幅*/
padding: 5px;	/*ボタン内の余白*/
margin-bottom: 20px;
border-radius: 30px;	/*角丸のサイズ*/
background: #e5e5e5;	/*背景色（古いブラウザだとここの色のみが出ます）*/
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#e5e5e5));	/*グラデーション*/
background: -webkit-linear-gradient(#FFF, #e5e5e5);	/*同上*/
background: linear-gradient(#FFF, #e5e5e5);			/*同上*/
color: #000000;
font-size: 15px;	/*文字サイズ*/
letter-spacing: 0.1em;
border: 1px solid #999;	/*枠線の幅、線種、色*/
}
/*ボタンのマウスオン時の設定*/
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
background: #FFF;	/*背景色（古いブラウザだとここの色のみが出ます）*/
background: -webkit-gradient(linear, left top, left bottom, from(#e5e5e5), to(#FFF));	/*グラデーション*/
background: -webkit-linear-gradient(#e5e5e5, #FFF);	/*同上*/
background: linear-gradient(#e5e5e5, #FFF);			/*同上*/
color: #000000;
}