body {
  font-family: hannari;
  
  position: relative;      /* body要素にflexboxを指定する */
  
  align-items: flex-start;
  justify-content: center;
	background: white   
		background-image: url(facepack.png);
		
}

.button {
	size:10px 10px;
}

.show-modal { /*写真*/
  border: none;   /*枠線*/
  margin-top: 76px;   /*表示する位置*/
  background-color: #fff;
  border-radius: 50px;   /*写真の角の丸み*/
  cursor: help;   /*マウスの種類*/
}

.close-modal {
  position: absolute;              /*modalを閉じるボタン＝×ボタン*/
  top: 4px;
  right: 22px;
  font-size: 40px;
  color: #333;
  cursor: pointer;
  border: none;
  background: none;
}

.hidden {
  display: none;            /* hiddenクラスが付与されている場合は表示させないようにする */
}

	.modal {
  position: fixed;
  top: 50%;    /*上下位置*/
  left: 50%;     /*左右位置*/
  transform: translate(-50%, -50%);
  width: 50%;   /*大きさが50×50*/
  height: 50%;
  background-color: white;
		background-image: url(facepack.png);  
  padding: 4rem;   /*ボックスのサイズ感*/
  border-radius: 1px;   /*ボックスの角の丸み*/
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);   /*ボックスの影*/
  z-index: 10;           /* z-indexでmodalを一番上に位置させる */
}

.overlay {
  position: absolute; /* overlayの絶対位置を左上を起点にし幅と高さを100%にする */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);    
  backdrop-filter: blur(3px); /* 一番下のbody領域をぼやかす */
  z-index: 5; /* z-indexの数字を0と10の間の数字にし、bodyとmodalの真ん中に位置させる */
}
	
	
.backTop {
  color: black;
  position: fixed;/*画面上の一定の位置に固定する*/
  right:50px;
  bottom:50px;
  text-decoration: none;/*装飾なし*/
  display: block;/*要素を縦に並べる*/
  width: 100px;/**/
  padding: 16px 20px;/*内側の余白、上右下左*/
  text-align: right; /*右寄せ*/
  transform: rotate(90deg); /*矢印を90度傾けてる*/
  transform-origin: bottom right;
}

.arrow1 {
width: 48px;
height: 1px;
background: #333;
position: absolute;
top: 50%;
right: 62px;
}

.arrow2 {
width: 1px;
height: 12px;
background: #333;
position: absolute;
top: calc(50% + 1px);
right: 109px;
transform: rotate(-130deg);
transform-origin: top left;
}
	
	

	
	
/**/linear-gradient(to top left, #a4d5bd, #f0f8ff);