@font-face {
  font-family: 'NotoSansJP';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local("Noto Sans JP Thin"), url(https://cdn.stockpoint.jp/fonts/Noto_Sans_JP/static/NotoSansJP-Thin.ttf) format('truetype');
}
@font-face {
  font-family: 'NotoSansJP';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Noto Sans JP Light"), url(https://cdn.stockpoint.jp/fonts/Noto_Sans_JP/static/NotoSansJP-Light.ttf) format('truetype');
}
@font-face {
  font-family: 'NotoSansJP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Noto Sans JP Regular"), url(https://cdn.stockpoint.jp/fonts/Noto_Sans_JP/static/NotoSansJP-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'NotoSansJP';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local("Noto Sans JP SemiBold"), url(https://cdn.stockpoint.jp/fonts/Noto_Sans_JP/static/NotoSansJP-SemiBold.ttf) format('truetype');
}
@font-face {
  font-family: 'NotoSansJP';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Noto Sans JP Bold"), url(https://cdn.stockpoint.jp/fonts/Noto_Sans_JP/static/NotoSansJP-Bold.ttf) format('truetype');
}


@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local("Poppins-Thin"), url(https://cdn.stockpoint.jp/fonts/Poppins/Poppins-Thin.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Poppins-Light"), url(https://cdn.stockpoint.jp/fonts/Poppins/Poppins-Light.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Poppins-Regular"), url(https://cdn.stockpoint.jp/fonts/Poppins/Poppins-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local("Poppins-SemiBold"), url(https://cdn.stockpoint.jp/fonts/Poppins/Poppins-SemiBold.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Poppins-Bold"), url(https://cdn.stockpoint.jp/fonts/Poppins/Poppins-Bold.ttf) format('truetype');
}


/*****
 * common
 *****/
html,body,div,span,h1,h2,h3,h4,img,strong,i,ul,li,form,label,a,button,input,p,select,pre{
  border: 0;margin: 0;outline: 0;padding: 0;
	font-family: 'Avenir', 'Poppins', 'ヒラギノ角ゴシック', 'NotoSansJP', sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  color: #4A4A4A;
  background: transparent;
  box-sizing: border-box;
}
/*****
 * span
 ****/
span{
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

/*****
 * a(ボタン表示用)
 ****/
a.btn{
	display: block;
	width: 100%;
	max-width: 295px;
	text-align: center;
	padding: 16px 0;
	font-size: 14px;
	line-height: 20px;
  border-radius: 100px;
  cursor: pointer;
  color: #fff;
  border: 1px solid var(--col-main);
  background-color: var(--col-main);
}
a.btn.sub{
  color: var(--col-main);
  border: 1px solid var(--col-main);
  background-color: #fff;
}
a.btn.cancel{
  color: #A2A3A3;
  border: 1px solid #A2A3A3;
  background-color: transparent;
}

/*****
 * input,password
 *****/
input[type="text"],input[type="password"],input[type="number"],input[type="email"],input[type="tel"]{
	display: block;
  border-radius: 6px;
	padding: 0 30px 0 10px;
	height: 50px;
	width: 100%;
	max-width: 335px;
	line-height: 50px;
	background-color: #fff;
  border: 1px solid #BEBEBE;
	font-size: 16px;
}
input::placeholder{
	opacity: 0.4;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/*****
 * ul,li
 *****/
ul,li{
  display: block;
  overflow: hidden;
  width: 100%;
  list-style-type: none;
}

/*****
 * img
 *****/
img{
  vertical-align:middle;
  max-height:100%;
  max-width:100%;
}

/*****
 * table
 *****/
table{
	width: 100%;
}

/*****
 * select
 *****/
select{
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	outline: none;
	text-overflow: ellipsis;
	display: block;
	width: 100%;
	max-width: 335px;
	padding: 0 30px 0 10px;
	height: 50px;
	line-height: 50px;
	cursor: pointer;
	border: 1px solid #666;
	/*background: white url(/img/tri_mini.png) no-repeat top 50% right 15px;*/
	border-radius: 6px;
}

/*****
 * pre
 *****/
pre{
	white-space: pre-wrap;
}


.message{
	color: red;
}

/*****
 * modal
 *****/
.modal{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}
.mWrp{
  position: absolute;
  overflow-y: auto;
  width: calc(100% - 40px);
  max-width: 335px;
  max-height: calc(100% - 40px);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  border-radius: 20px;
  margin: auto;
}
.mWrp .title{
  height: 50px;
  font-size: 16px;
  line-height: 50px;
  text-align: center;
  color: white;
  background-color: var(--col-main);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}