@charset "utf-8";/**/

#fontSize{
	margin-left: 50px; 
}


#fontSize ul{
	overflow: hidden;
}

#fontSize li{
	list-style-type: none;
	float: left;
	cursor: pointer;
	padding: 5px 0; 
	text-align: center;
	margin:0 5px;
}
#fontSize li p{
	list-style-type: none;
	float: left;
	cursor: pointer;
	padding: 5px 0; 
	text-align: center;
/*	font-size:95%;*/
}

#fontSize li.current{
	font-weight: bold;
	color: red;
}


@media print, screen and (min-width:768px) {
#fontSize{
width:50%;
}
}


/*************
/* ボタン
*************/

.btn {
	background: -moz-linear-gradient(
	top,#80CCE6,#80CCE6 5%,#09C 5%,#069 95%,#069 95%,#00293D);
	background: -webkit-gradient(linear, left top, left bottom, from(#80CCE6), color-stop(0.05,#80CCE6), color-stop(0.05,#09C), color-stop(0.95,#069), color-stop(0.95,#00293D), to(#00293D));
	border: 1px solid #DDD;
	color: #FFF;	
	padding: 5px 0; 
	margin-right: px;
	width: 50px;
}

.btn  li.current{
	font-weight: bold;
	color: red;
}

/*1 https://saruwakakun.com/html-css/reference/buttons#section1*/
.square_btn {
    position: relative;
    display: inline-block;
    padding: 0.25em 0.5em;
    text-decoration: none;
    color: #FFF;
    background: #fd9535;/*背景色*/
    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;
    
    width: 50px;/*オリジナルに追加*/
}

.square_btn:active {
    border-bottom: solid 2px #fd9535;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

/*2*/
.square_btn2 {
    position: relative;
    display: inline-block;
    padding: 0.25em 0.5em;
    text-decoration: none;
    color: #FFF;
    background: #fd9535;/*色*/
    border-radius: 4px;/*角の丸み*/
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
    font-weight: bold;
    border: solid 2px #d27d00;/*線色*/
    
    width: 50px;/*オリジナルに追加*/
}

.square_btn2:active {/*押したとき*/
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

/*3*/
.square_btn3{
    position: relative;
    display: inline-block;
    font-weight: bold;
    padding: 0.25em 0.5em;
    text-decoration: none;
    color: #00BCD4;
    background: #ECECEC;
    transition: .4s;
        
    width: 50px;/*オリジナルに追加*/
  }

.square_btn3:hover {
    background: #00bcd4;
    color: white;
}

/*4*/
.square_btn4 {
    position: relative;
    display: inline-block;
    font-weight: bold;
    padding: 8px 10px 5px 10px;
    text-decoration: none;
    color: #FFA000;
    background: #fff1da;
    border-bottom: solid 4px #FFA000;
    border-radius: 15px 15px 0 0;
    transition: .4s;
            
    width: 50px;/*オリジナルに追加*/
}

.square_btn4:hover {
    background: #ffc25c;
    color: #FFF;
}

/*5*/
.square_btn5 {
    position: relative;
    display: inline-block;/**/
    padding: 0.25em 0.5em;/*0.25em 0.5em*/
    text-decoration: none;
    color: #FFF;
    background: #03A9F4;/*色*/
    border: solid 1px #0f9ada;/*線色*/
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
    
        width: 50px;/*オリジナルに追加*/
}

.square_btn5:active {/*押したとき*/
    border: solid 1px #03A9F4;
    box-shadow: none;
    text-shadow: none;
}
/*6*/

.square_btn6{
    display: inline-block;
    padding: 0.5em 1em;/*0.5em 1em*/
    text-decoration: none;
    background: #668ad8;/*ボタン色*/
    color: #FFF;
    border-bottom: solid 4px #627295;
    border-radius: 3px;
    
            width: 50px;/*オリジナルに追加*/
}
.square_btn6:active {/*ボタンを押したとき*/
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
}
/*7*/
/*8*/
/*9*/







/*9*/
.square_btn9{

    text-decoration: none;
    font-weight: bold;
    /*font-size: 37px;*/
    color: #799dec;
    text-shadow: 0px 4px 2px rgba(0, 0, 0, 0.32), 0px 1px 0px #6182ca, 0px 2px 0px #4f6aa7, 0px 3px 0px #5470ad;
    
   
}
.square_btn9:active {
    top: 4px;
	box-shadow: none;
}


/*button01-20 https://www.nxworld.net/tips/css-only-button-design-and-hover-effects.html*/
/*ベーススタイル*/
.button {
  display: inline-block;
  width: 200px;
  height: 54px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
}
.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}


/*01*/
.button01 {            width: 50px;/*オリジナルに追加*/
  background-color: #333;
  color: #fff;
}
.button01:hover {
  background-color: #59b1eb;
}

/*02*/
.button02 {            width: 50px;/*オリジナルに追加*/
  background-color: #333;
  border: 2px solid #333;
  color: #fff;
  line-height: 25px;/*オリジナル50px*/
}
.button02:hover {
  background-color: #fff;
  border-color: #59b1eb;
  color: #59b1eb;
}

/*03*/
.button03 {            width: 50px;/*オリジナルに追加*/
  position: relative;
  z-index: 2;
  background-color: #333;
  border: 2px solid #333;
  color: #fff;
  line-height: 25px;/*オリジナル50px*/
}
.button03:hover {
  background-color: #fff;
  border-color: #59b1eb;
  color: #59b1eb;
}
.button03::before,
.button03::after {
  top: 0;
  width: 50%;
  height: 100%;
  background-color: #333;
}
.button03::before {
  right: 0;
}
.button03::after {
  left: 0;
}
.button03:hover::before,
.button03:hover::after {
  width: 0;
  background-color: #59b1eb;
}

/*04*/
.button04 {            width: 50px;/*オリジナルに追加*/
  position: relative;
  z-index: 2;
  background-color: #333;
  border: 2px solid #333;
  color: #fff;
  line-height: 50px;
}
.button04:hover {
  background-color: #fff;
  border-color: #59b1eb;
  color: #59b1eb;
}
.button04::before,
.button04::after {
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #333;
}
.button04::before {
  top: 0;
}
.button04::after {
  bottom: 0;
}
.button04:hover::before,
.button04:hover::after {
  height: 0;
  background-color: #59b1eb;
}

/*06*/
.button06 {            width: 50px;/*オリジナルに追加*/
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
  line-height: 50px;
}
.button06:hover {
  background-color: rgba(255, 255, 255, .2);
}
/*09*/
.button09 {            width: 50px;/*オリジナルに追加*/
  position: relative;
  z-index: 2;
  background-color: #fff;
  border: 2px solid #333;
  color: #333;
  line-height: 50px;
  overflow: hidden;
}
.button09:hover {
  color: #fff;
}
.button09::after {
  top: -100%;
  width: 100%;
  height: 100%;
}
.button09:hover::after {
  top: 0;
  background-color: #333;
}
/*10*/
.button10 {            width: 50px;/*オリジナルに追加*/
  position: relative;
  z-index: 2;
  background-color: #fff;
  border: 2px solid #333;
  color: #333;
  line-height: 50px;
  overflow: hidden;
}
.button10:hover {
  color: #fff;
}
.button10::after {
  top: -100%;
  left: -100%;
  width: 100%;
  height: 100%;
}
.button10:hover::after {
  top: 0;
  left: 0;
  background-color: #333;
}
/*11*/
.button11 {            width: 50px;/*オリジナルに追加*/
  position: relative;
  z-index: 2;
  background-color: #fff;
  border: 2px solid #333;
  color: #333;
  line-height: 50px;
  overflow: hidden;
}
.button11:hover {
  color: #fff;
}
.button11::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(.5);
  transform: scale(.5);
}
.button11:hover::after {
  background: #333;
  -webkit-transform: scale(1);
  transform: scale(1);
}
/*12*/
.button12 {            width: 50px;/*オリジナルに追加*/
  position: relative;
  z-index: 2;
  background-color: #fff;
  border: 2px solid #333;
  color: #333;
  line-height: 50px;
  overflow: hidden;
}
.button12:hover {
  color: #fff;
}
.button12::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.button12:hover::after {
  -webkit-transform: scale(2) rotate(180deg);
  transform: scale(2) rotate(180deg);
  background: #333;
}
/*13*/
.button13 {            width: 50px;/*オリジナルに追加*/
  position: relative;
  z-index: 2;
  border: 2px solid #333;
  color: #333;
  line-height: 50px;
  -webkit-perspective: 300px;
  perspective: 300px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.button13:hover {
  color: #fff;
}
.button13::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333;
  -webkit-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  opacity: 0;
}
.button13:hover::after {
  -webkit-transform: rotateX(0);
  transform: rotateX(0);
  opacity: 1;
}

/*14*/
.button14 {            width: 50px;/*オリジナルに追加*/
  position: relative;
  z-index: 2;
  border: 2px solid #333;
  color: #fff;
  line-height: 50px;
  -webkit-perspective: 300px;
  perspective: 300px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.button14:hover {
  color: #333;
}
.button14::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transform: rotateX(0);
  transform: rotateX(0);
}
.button14:hover::after {
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
}
/*15*/
.button15 {           width: 50px;/*オリジナルに追加*/
  position: relative;
  -webkit-perspective: 300px;
  perspective: 300px;
}
.button15 span {
  display: block;
  position: absolute;
  width: 200px;
  height: 60px;
  border: 2px solid #333;
  text-align: center;
  line-height: 56px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
  pointer-events: none;
}
.button15 span:nth-child(1) {
  background-color: #333;
  color: #fff;
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: 50% 50% -30px;
  -moz-transform-origin: 50% 50% -30px;
  transform-origin: 50% 50% -30px;
}
.button15 span:nth-child(2) {
  background-color: #fff;
  color: #333;
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-transform-origin: 50% 50% -30px;
  -moz-transform-origin: 50% 50% -30px;
  transform-origin: 50% 50% -30px;
}
.button15:hover span:nth-child(1) {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.button15:hover span:nth-child(2) {
  background-color: #333;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}
/*16*/
.button16 {           width: 50px;/*オリジナルに追加*/
  position: relative;
  background-color: #1abc9c;
  border-radius: 4px;
  color: #fff;
  line-height: 25px;/*オリジナル52px*/
  -webkit-transition: none;
  transition: none;
  box-shadow: 0 3px 0 #0e8c73;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.button16:hover {
  background-color: #31c8aa;
  box-shadow: 0 3px 0 #23a188;
}
.button16:active {
  top: 3px;
  box-shadow: none;
}
/*17*/
.button17 {           width: 50px;/*オリジナルに追加*/
  position: relative;
  background-color: #f7d034;
  border-radius: 4px;
  color: #fff;
  line-height: 25px;/*オリジナル52px*/
  -webkit-transition: none;
  transition: none;
  box-shadow: 0 3px 0 #f7ba59;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
.button17:hover {
  top: -4px;
  box-shadow: 0 7px 0 #f7ba59;
}
.button17:active {
  top: 3px;
  box-shadow: none;
}
/*18*/
.button18 {           width: 50px;/*オリジナルに追加*/
  border: 1px solid #15aeec;
  background-color: #49c0f0;
  background-image: -webkit-linear-gradient(top, #49c0f0, #2cafe3);
  background-image: linear-gradient(to bottom, #49c0f0, #2cafe3);
  border-radius: 4px;
  color: #fff;
  line-height: 25px;/*オリジナル50px*/
  -webkit-transition: none;
  transition: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.button18:hover {
  border:1px solid #1090c3;
  background-color: #1ab0ec;
  background-image: -webkit-linear-gradient(top, #1ab0ec, #1a92c2);
  background-image: linear-gradient(to bottom, #1ab0ec, #1a92c2);
}
.button18:active {
  background: #1a92c2;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2);
  color: #1679a1;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
}
/*19*/
.button19 {           width: 50px;/*オリジナルに追加*/
  position: relative;
  border-radius: 4px;
  color: #fff;
 line-height: 25px;/*オリジナル50px*/
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-transition: none;
  transition: none;
  text-shadow: 0px 1px 0px #f56778;
}
.button19,
.button19:hover {
  border-bottom: 4px solid #cb5462;
  background-color: #f56778;
  background-image: -webkit-linear-gradient(top, #f997b0, #f56778);
  background-image: linear-gradient(to bottom, #f997b0, #f56778);
  box-shadow: inset 1px 1px 0 #fbc1d0;
}
.button19::before,
.button19::after {
  bottom: -1px;
  left: -1px;
  width: 200px;
  height: 50px;
  border: 1px solid #ee8090;
  border-bottom: 1px solid #b84d5a;
  border-radius: 4px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-transition: none;
  transition: none;
}
.button19::before {
  height: 48px;
  bottom: -4px;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 1px 1px 0px #bfbfbf;
}
.button19:hover {
  background: #f56778;
  background-image: -webkit-linear-gradient(top, #f56778, #f997b0);
  background-image: linear-gradient(to bottom, #f56778, #f997b0);
  color: #913944;
  text-shadow: 0px 1px 0px #f9a0ad;
}
.button19:active {
  bottom: -4px;
  margin-bottom: 4px;
  border: none;
  box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, .3);
}
.button19:active::before,
.button19:active::after {
  border: none;
  box-shadow: none;
}
/*20*/
.button20 {           width: 50px;/*オリジナルに追加*/
  background-color: rgba(255, 255, 255, .2);
  border-radius: 4px;
  color: #fff;
  box-shadow: 0 3px 3px rgba(0, 0, 0, .2), inset 0 1px 1px rgba(255, 255, 255, .7);
  text-shadow: 0px 1px 0px rgba(0, 0, 0, .4);
}
.button20:hover {
  background-color: rgba(255, 255, 255, .3);
}