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

/*リンクの形状*/
#page-top a{
	display : flex;
	justify-content : center;
	align-items : center;
	background : #8d6639;
	border-radius : 5px;
	/*width : 60px;
	height : 60px;*/
	color : #fff!important;
	text-align : center;
	text-transform : uppercase; 
	text-decoration : none;
	font-size : 0.6em;
	transition : all 0.3s;
}

.hexagon {
	width: 66px;
	height: 37.5px;
	background: #8d6639;
	position: relative;
}

.hexagon_body {
  height: 100%;
  font-size: 21px;
  font-weight: bold;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
	letter-spacing: 0.05em;
}

.hexagon::before,
.hexagon::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #8d6639;
  z-index: 0;
}

.hexagon::before {
  transform: rotate(60deg);
}

.hexagon::after {
  transform: rotate(-60deg);
}



#page-top a :hover {
	background : #8d6639;
}

/*リンクを右下に固定*/
#page-top {
	position : fixed;
	right : 10px;
	bottom : 10px;
	z-index : 2;
    /*はじめは非表示*/
	opacity : 0;
	transform : translateY(100px);
	line-height: 0.9em;
	font-family: shippori-mincho,serif;
}

/*　上に上がる動き　*/
#page-top.UpMove{
	animation : UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity : 0;
	transform : translateY(100px);
  }
  to {
    opacity : 1;
	transform : translateY(0);
  }
}

/*　下に下がる動き　*/
#page-top.DownMove{
	animation : DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity : 1;
	transform : translateY(0);
  }
  to {
  	opacity : 1;
	transform : translateY(100px);
  }
}

.hexagon_body span::before {
	font-family: 'FontAwesome';
	content: "\f062\A"; /*\Aで改行*/
	white-space: pre; 
}
	
/************************************ Below is the Tablet/PC Style ************************************/
@media screen and (min-width: 768px){
	#page-top a{ font-size : 1.0em; }
	#page-top { line-height: 1.0em; }
	
	.hexagon_body { 
		height: 100%;
		font-size: 16px;
	}
}


/************************************ Below is the PC Style ************************************/
@media screen and (min-width: 1024px){
	#page-top a{ font-size : 0.8em; }
	#page-top { line-height: 0.8em; }
}