@charset "utf-8";

/* yakuhanmp-noto */
@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@3.4.1/dist/css/yakuhanmp-noto.min.css");

/* Noto Serif Japanese */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap');

html {font-size: 87.5%;} /*14px*/

body {
  color: #050505;
	font-family: YakuHanJP_Noto, 'Noto Sans JP', sans-serif;
  letter-spacing: 0.05rem;
  line-height: 2rem;
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  background: #f4f5f7;
}


/* -- login-area ------*/

.login-area{
  width: 100%;
  margin: 0 auto;
  padding: 30px 0 50px;
  background: #f4f5f7;
}

/* -- ヘッダー ------*/

header {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	background: #006ab6;
	color:#fff;
}

header h1 {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(1rem, 0.85rem + 0.75vw, 1.75rem);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.1rem;
  line-height: 2.25;
}

header p.period {
  font-family: 'Noto Serif JP', serif;
  display: block;
  font-size: clamp(0.875rem, 0.8rem + 0.38vw, 1.25rem);
  padding: 5px 0;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.05rem;
  background: #54afe3;
}

/* -- form#login-form -------------------------------------------------------------------------------- */

form#login-form{
	width: 100%;
	max-width: 500px;
	min-width: 300px;
	height : auto;
	background : #ffffff;
	border : 1px solid #cccccc;
	margin: 35px auto;
	padding : 45px 0;
}


form#login-form p{
	width : 80%;
	margin : 15px 10% 0 10%;
	font-size : 100%;
	text-align : left;
	letter-spacing : 0;
	text-shadow : 3px 4px 2px rgba( 0, 0, 0, 0.1 );
	line-height: 1.8;
	padding-top:2em;
}

form#login-form p.logo {
  margin-top: 35px;
}

form#login-form input{
	height : 2em;
	padding : 2px 2%;
	border : 1px solid #cccccc;
	border-radius : 3px;
	background : #fafafa;
}

form#login-form input:focus{
	box-shadow : 0px 0px 5px #55ccff;
	border : 1px solid #55ccff;
	background : #ffffff;
}

form#login-form dl{
	width : 80%;
	margin : 15px auto 0;
	overflow: hidden;
}

form#login-form dl dt,form#login-form dl dd{
	margin : 0;
}

form#login-form dl dt{
	margin-top : 20px;
}

form#login-form dl dt:first-child{
	margin-top : 0px;
}

form#login-form dl dd input{
	width : 95%;
	margin-top : 5px;
	-webkit-appearance : none;
	font-size : 100%;
}

form#login-form p.submit{
	width : 80%;
	margin : 0 auto;
}

form#login-form p.submit input{
	display : inline-block;
	width : auto;
	height : auto;
	padding : 10px 35px;
	vertical-align : middle;
	line-height : 1;
	border-radius : 3px;
	color : #ffffff;
	font-family : inherit;
	-webkit-appearance : none;
	font-size : 100%;
	background : #4c73ae;
	border : 1px solid #4c73ae;
}

form#login-form p.submit input:hover{
	cursor : pointer;
	background : #436597;
	border : 1px solid #436597;
}

/* -- 送信エラー ------*/

@keyframes border {
	0% {
		border: medium solid #da3c41;
	}
	100% {
		border: medium solid #da3c4152;
	}
}

div.notinput {
	width: calc(100% - 20px);
	max-width: 500px;
	min-width: 300px;
	color: #da3c41;
	line-height: 1.65;
	padding: 15px 10px !important;
	animation: border 0.5s ease infinite alternate;
	margin:50px auto 0;
	background: #ffffff;
}

div.notinput p.blinking {
	text-align: center;
	font-weight: bold;
	padding-bottom: 10px !important;
}

div.notinput ul li {
	text-align: center;
}

/* -- footer ------*/
footer {
  /* background-color: #303f4e; */
  width: 100%;
  text-align: center;
	font-size:clamp(0.688rem, 0.662rem + 0.13vw, 0.813rem) ;
  /* box-shadow: -2px -2px 4px gray; */
}


/* --responsive------------------------------------------- */

/* 1000pixel start */
@media screen and ( max-width : 1000px ){

form#login-form{
	width : 95%;
	margin : 40px auto;
	position : static;
	transform : translate( 0, 0 );
}

div.notinput {
	width : 95%;
	padding: 15px 0 !important;
}

}
/* 1000pixel end */