html,body{
	padding:0;
	margin:0;
}

body{
	width:100%;
	height:100vh;
}

body, body * {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	line-height: 1.75;
	box-sizing:border-box;
}


.inner{
	width:100%;
	max-width:680px;
	padding:0 20px;
	margin:0 auto;
}

/* header
--------------------------------------------------*/
header{
	background:;
	color:$333;
	padding:10px 0;
	border-bottom:1px solid #ccc;
	margin:0;
}

header .inner{
	display: flex;
	justify-content: space-between;
	align-items: center;
}


header #logo{
	height:60px;
	width:auto;
}


header #logo img{
	height:100%;
	width:auto;
}


/* main
--------------------------------------------------*/
main{
	background:;
	color:$333;
}

main h1{
	margin:0;
	padding:30px 0;
	text-align: center;
	font-size:40px;
	background:#1E56AD;
	color:#FFF;
}

main #philosophy{
	margin-top:40px;
}

main #philosophy p{
	margin-top:0.5em;
	margin-bottom:0.5em;
	padding-left:1em;
	font-size:15px;
}

main #philosophy strong{
	color:#222;
	font-weight: 700;
}

main .inner figure{
	float: right;
	width:150px;
	margin:0px 0 0 30px;
}

main .inner figure img{
	border-radius: 100%;
	width:100%;
	height: auto;
	box-shadow: 0 0 15px #00000033;
	outline: 1px solid #ddd;
}

main section{
	padding:40px 0 60px;
}

main section h2{
	font-size:30px;
	text-align: center;
	margin-bottom:50px;
	color: #1a3a6d;
}

main section h2:before,
main section h2:after{
	content: "-";
	width:40px;
	margin:10px;
	font-size:30px;
	font-weight: 300;
}

main section#career,
main section#philosophy{
	background: #f0f7ff;
}

main section div.flex{
	display: flex;
	gap:40px;
}

main section div.flex > div{
	width:calc(100% - 180px);
}

main summary{
	cursor: pointer;
}

main summary:hover{
	transform: scale(1.01);
}

main .link{
	color:#0969da;
	text-decoration: underline;
	cursor:pointer;
}

main details{
	font-size:15px;
	padding:0 20px;
}

main details[open]{
	padding:10px 20px;
	/*background:#f0f0f0;*/
	border-radius: 10px;
	box-shadow: 0 0 10px #0002;
	margin:10px 0;
}

main details summary{
	font-size:16px;
}

main details[open] summary{
	font-weight:700;
	color:#1E56AD;
}



/* popup
-----------------------------*/
#popup{
		position: fixed;
		top:0;
		left:0;
		width:100%;
		height:100%;
		display: grid;
		place-items: center;
		background:#000C;
		transition: transform 0.2s ease-in, opacity 0.2s linear;
		transform: scale(0.0);
		opacity:0.3;
		pointer-events: none;
	}

	#popup.active{
			transform: scale(1.0);
			transition:all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
			opacity:1.0;
			pointer-events: auto;	
	}

	#popup .close{
		position: absolute;
		top:0;
		right:10px;
		display: grid;
		place-items: center;
		width:40px;
		height:40px;
		background: #1E56AD;
		color:#FFF;
		font-size:30px;
		line-height: 1.0;
		font-weight: 700;
		border-top:none;
		transition-duration: .5s;
		border-radius: 0 0 5px 5px;
	}

	#popup .close:hover {
	    background: #eee;
	    color: #1E56AD; /* メインカラーと合わせる */
	    cursor: pointer;
	}

	#popup iframe{
		background:#FFF;
		width:calc(100% - 80px);
		height:calc(100vh - 80px);
	}