@import url('https://fonts.googleapis.com/css2?family=Barlow&family=Noto+Sans+JP&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@1,200&display=swap');
@charset "utf-8";
* {
  font-family: 'Barlow', sans-serif;
  font-family: 'Noto Sans JP', sans-serif;
  outline: none;
  border: none;
  border-radius: 0;
  margin: 0px;
  padding: 0px;
  scroll-behavior:smooth;
}
 

 
body {
  margin: 0px;
  padding: 0px;
  top:0;

　


}


html { 
resize: none;
appearance: none;
}
a {
  color:green;
  text-decoration: none; }

a:hover {color:rgb(170, 136, 43);
  text-decoration:underline;}
a:active {color:red;
  text-decoration:underline;}

.header {
text-decoration:none;
background-color:Green;
width:100%;
height:none;
margin: 0;
z-index:102;
position:sticky;
top:0;
}
.fixed-background {
  min-height: 100vh;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
.backpic1 {
background-image: url(背景.jpg);
}
#welcom {
  font-weight: bold;
  font-size:35px;
}

img  {  width:500px; }

@media (max-width: 767px) {
  img {
    width:260px;
  }
}

#f 
{
  background-color: black;
  color:white;
  text-align: center;
}
.f-b img { width:200px }

#txt {
  background-color: rgb(166, 243, 185);

}

.txt-alia {
backdrop-filter:blur(10px);
  text-align: center;
}



.open {
	cursor:pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
  color:blue;
}
#pop-up {
	display: none; /* label でコントロールするので input は非表示に */
}
.overlay {
	display: none; /* input にチェックが入るまでは非表示に */
}
#pop-up:checked + .overlay {
	display: block;
	z-index: 9999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}
.window {
        
	width: 630px;
	height: 620px;
	background-color: #ffffff;
	border-radius: 6px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.text {
	font-size: 18px;
	margin: 0;
}
.close {
	cursor:pointer;
	position: absolute;
	top: 4px;
	right: 4px;
	font-size: 20px;
}



@media (max-width: 767px) {

.window {
    width: 80%;



.profile-container {
            text-align: center;
            margin-top: 20px;
        }
.profile img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }
    
	}
}