@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Inconsolata');
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

html{
	/* font-family: 'Noto Sans JP', sans-serif;
    font-family: 'Roboto', sans-serif; */

	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	
}

body{
	margin: 0;
	text-align: center;
	z-index: 0;
	
	/* background-image: url(pattern.webp); */
	background-image: url(backgroud/abstract-envelope.svg);
	background-size: cover;
	background-attachment: fixed;
}

p,h2{
	color: #000000;
}

.p-color{
	background-color: #d8ff00;
	background-position: center;
}

.kotei-header{
	margin-top: 0;
	background-color: rgba(255, 255, 255,0.5);
	position: fixed;
	top :0;
	left :0; 
	height: 6em;
    width: 100%;
	backdrop-filter: blur(70px);
	-webkit-backdrop-filter: blur(70px);
	z-index: 6;
}

#main-content{
	max-width: 1000px;
	margin:7em auto;
	margin-bottom: 2em;
}

#copyright{
    background-color: #b4cef7;
    padding: 30px;
	font-size: 13.4px;
}

.menu{
	font-family: 'Inconsolata', monospace;
}

.blue-h{
	color: #6594e0;/*文字色*/
	border-bottom: dashed 2px #6594e0;
	margin-top: 0px;
	/*線の種類（点線）2px 線色*/
}

a.blue-h{
	color: #6594e0;
}

.box3 {
    padding: 0.5em 1em ;
    margin: 2em 3%;
	border-radius: 20px;
    color: #2c2c2f;
	background: rgba(205, 228, 255 , 0.9);
	
	backdrop-filter: blur(70px);
	-webkit-backdrop-filter: blur(70px);
}

.bhr {
    border-top: dashed 2px #6594e0;
    }

.blue-kote{
	color: #6594e0;/*文字色*/
	border-bottom: dashed 2px #6594e0;
	background-color: #d6cc40;
	width: 100%;
	text-align: center;
	/*線の種類（点線）2px 線色*/
}

.a-m{
	color: #000000;
}

.a-m:visited{
	color: #000000;
}

a{
	text-decoration: #000000;
}


.profile-card{
	background-color: rgba(243, 243, 243, 0.6);
	
	border-radius: 20px;
	color: #a7a7ab;
	padding: 0.5em 1em;
    margin: 2em 3%;
	margin-top: 0.5em;
	margin-left: 3%;
	margin-right: 3%;
	margin-bottom: 0em;
	text-align: center;
	backdrop-filter: blur(70px);
	-webkit-backdrop-filter: blur(70px);
}

/*小さなディスプレイ向け*/
.card-wrapper{
	display: flex;
	flex-direction: column;
	margin:0 0 1em;
}

.ul_del_dot{
	list-style-type: none;
	color:#000000;
  	padding: 0;
}

.card{
	padding: 0.5em 1em ;
    margin-top: 0.5em;
	margin-left: 3%;
	margin-right: 3%;
	margin-bottom: 0em;
	border-radius: 20px;
    color: #2c2c2f;
    background: #cde4ff;/*背景色*/
	
	background-color: rgba(243, 243, 243, 0.60);
	padding-bottom: 1em;
	
	backdrop-filter: blur(70px);
	-webkit-backdrop-filter: blur(70px);
}

.card-link{
	padding: 0.5em 1em ;
    margin: 0.5em 3%;
	border-radius: 20px;
    color: #000000;
    background: #cde4ff;/*背景色*/
	
	background-color: rgba(243, 243, 243, 0.60);
	padding-bottom: 1em;
	
	backdrop-filter: blur(70px);
	-webkit-backdrop-filter: blur(70px);
}


.large-card {
    padding: 0.5em 1em ;
    margin: 0em 3%;
	border-radius: 20px;
    color: #2c2c2f;
	background-color: rgba(243, 243, 243, 0.60);
	
	backdrop-filter: blur(70px);
	-webkit-backdrop-filter: blur(70px);
}

.device_block{
	padding: 0.5em 1em ;
    margin: 0em 1%;
	border-radius: 20px;
    color: #000000;

}

.x_timeline_block{
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

/* 大きなディスプレイ向け */
@media (min-width: 1000px) {
	
	.device_block{
		width: 50%;
	}

	.card-wrapper{
		display: flex;
		flex-direction: row;
	}

	.card{
		border-radius: 20px;
		color: #a7a7ab;
		height: 10em;
		width: 45%;
		max-width: 45%;
		padding: 0.5em 1em;
		margin: 0em 1%;
		text-align: left;
		display: inline-block;
		vertical-align: top;
		margin: 0 auto;
		
		backdrop-filter: blur(70px);
		-webkit-backdrop-filter: blur(70px);
	}

	.card-link{
		
		border-radius: 20px;
		color: #000000;
		height: 40em;
		width: 45%;
		max-width: 45%;
		padding: 0.5em 1em;
		margin: 2em 1%;
		text-align: left;
		display: inline-block;
		vertical-align: top;
		margin: 0 auto;
		
		backdrop-filter: blur(70px);
		-webkit-backdrop-filter: blur(70px);
	}

	.box3 , .large-card , .profile-card{
		margin: 0em 1%;
	}
	
}