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

/* ---------- ページトップに戻るボタン ---------- */

#page-top {
  height: 50px;
  width: 50px;
  background: var(--base-color);
  border: solid 2px var(--main-color);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 70;
  box-shadow: 0 4px 6px rgb(0 0 0 / 30%);
}

.pagetop__arrow {
  height: 10px;
  width: 10px;
  border-top: 3px solid var(--main-color);
  border-right: 3px solid var(--main-color);
  transform: translateY(20%) rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {
    #page-top:hover, #page-top:hover .pagetop__arrow {
        border-color: var(--accent-color);
        transition: .3s;
    }
}
/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 30px;
	bottom:30px;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#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);
  }
}

/* ---------- 右からでてくるお問い合わせ ---------- */

/*リンクの形状*/
#side-contact a{
	display: flex;
	justify-content:center;
	align-items:center;
	background: var(--content-color);
	width: 100px;
	height: 300px;
	color: #fff;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:1.6rem;
	transition:all 0.3s;
}

#side-contact a:hover{
	background: var(--accent-color);
}

/*リンクを右下に固定*/
#side-contact {
	position: fixed;
	right: 0;
	top:500px;
	z-index: 999999;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateX(100px);
}

/*　左の動き　*/

#side-contact.LeftMove{
	animation: LeftAnime 0.5s forwards;
}

@keyframes LeftAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }
  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/*　右の動き　*/

#side-contact.RightMove{
	animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime{
  from {
  	opacity: 1;
	transform: translateX(0);
  }
  to {
  	opacity: 1;
	transform: translateX(100px);
  }
}