@charset "utf-8";


/*Font Awesome
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css");


/*Google Fonts
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@400;500;700&display=swap');


/*css読み込み
---------------------------------------------------------------------------*/
@import url("../css/kanri.css");
@import url("../css/search.css");
@import url("../css/masonry.css");
@import url("../css/detail.css");
@import url("../css/masonry.css");


/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {

	--base-color: #fff;
	--base-inverse-color: #383937;
	
	--primary-color: #0093da;
	--primary-inverse-color: #fff;
	
	--simple-btn-background: #fafafa;
	--simple-btn-text: #383937;
	--simple-btn-border: #ccc;
	
	--content-space: 2rem;

}


/*animation11のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}


/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}

html,body {
	font-size: 13px;
}

	/*画面幅1000px以上の追加指定*/
	@media screen and (min-width:1000px) {

	html, body {
		font-size: 15px;
	}

	}/*追加指定ここまで*/

body {
	margin: 0;padding:0;
  font-family: "IBM Plex Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 400;
  font-style: normal;
	-webkit-text-size-adjust: none;
	background: var(--base-color);
	color: var(--base-inverse-color);
	line-height: 2.4;
	overflow-x: hidden;
}
	/*画面幅650px以下の追加指定*/
	@media screen and (max-width:650px) {
	
	body {
		line-height: 1.8;
	}

	}/*追加指定ここまで*/

figure {margin: 0;}
dd {margin: 0;}
nav ul {list-style: none;}
nav,ul,li,ol {margin: 0;padding: 0;}
table {border-collapse:collapse;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
video {max-width: 100%;}
iframe {width: 100%;border-style: none;}
input {font-size: 1rem;}
main li {margin-left: 1.8rem;}
section {margin-bottom: var(--content-space);}

select {
  -webkit-appearance: none;
  appearance: none;
  background: #fff url('../images/arrow-down.svg') no-repeat right 0.8em center/1em;
  padding-right: 2.5em !important;
}

a {
	transition: 0.3s;
	color: inherit;
}
a:hover {
	text-decoration: none;
	filter: brightness(1.1);
}

.error{color:#d00;margin:.5rem 0;}
.err{color:#d00;text-align:center;margin-bottom:1rem;}

/*container
---------------------------------------------------------------------------*/
#container {
	min-height: 100vh;
}

body#terms main,
body#company main,
body#faq main {
	padding: 3rem 10rem;
}

	/*画面幅650px以下の追加指定*/
	@media screen and (max-width:650px) {

	body#terms main,
	body#company main,
	body#faq main {
		padding: 2rem;
	}

	}/*追加指定ここまで*/

body#terms .summary {	
	color: var(--primary-color);
}
body#terms h2,body#terms h3 {
	margin-bottom: 0 !important;
}
main {
	padding: var(--content-space);
}

/*header
---------------------------------------------------------------------------*/
header {
	padding: 1rem var(--content-space);
}
header div {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}
header div a.signup {
	background: var(--primary-color);
	color: var(--primary-inverse-color);
	border-color: var(--primary-color);
}
#logo img {display: block;}
#logo {
	padding: 0;
	width: 150px;
	margin: 0 auto 1rem;
}

	/*650以上*/
	@media (min-width:650px){
	
	header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	#logo {
		margin: 0;
	}
	
	}


/*point-primary-color
---------------------------------------------------------------------------*/
.point-primary-color {
	background: var(--primary-color);
	color: var(--primary-inverse-color);
	padding: 1rem 2rem;
	border-radius: 4px;
	line-height: 1.6;
}

/*point2
---------------------------------------------------------------------------*/
.point2 {
	background: #ff0000;
	color: #fff;
	padding: 1rem 2rem;
	border-radius: 4px;
	line-height: 1.6;
}

/*simple-btn
---------------------------------------------------------------------------*/
.simple-btn a {
	display: inline-block;text-decoration: none;
	padding: 0.2rem 1rem;
	background: var(--simple-btn-background);
	color: var(--simple-btn-text);
	border: 1px solid var(--simple-btn-border);
	border-radius: 4px;
}


/*footer
---------------------------------------------------------------------------*/
footer {
	text-align: center;
}
footer ul {
	list-style: none;margin: 0;padding: 0;
	font-size: 0.85rem;
	text-align: center;
	line-height: 1.5rem;
}
footer ul li {
	display: inline-block;
	margin: 0.5rem;
}


/*faq
---------------------------------------------------------------------------*/
body#faq dt {
	color: var(--primary-color);
	font-weight: bold;
	background: #e4f2ff;
	padding: 0.5rem 1rem;
	border-radius: 4px;
	margin-bottom: 1rem;
}
body#faq dd {
	padding: 0 1rem;
	margin-bottom: 1rem;
}


/*ta1
---------------------------------------------------------------------------*/
.ta1 {
	table-layout: fixed;
	border-top: 1px solid #888;
	width: 100%;
	margin-bottom: 2rem;
}
.ta1 ul,.ta1 ol {margin: 0;}

.ta1 tr {
	border-bottom: 1px solid #888;
}
.ta1 th, .ta1 td {
	padding: 1rem;
	word-break: break-all;
}
.ta1 th {
	width: 30%;
	text-align: left;
	background: #eee;
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		.ta1 th {
			width: 20%;
		}

	}/*追加指定ここまで*/


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.m0 {margin: 0px !important;}
.mb0 {margin-bottom: 0px !important;}
.mt0 {margin-top: 0px !important;}
.mb1rem {margin-bottom: 1rem !important;}
.mb3rem {margin-bottom: 3rem !important;}
.small {font-size: 0.8em;opacity: 0.6;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.inline-block {display: inline-block !important;}
.color1 {color: #ff0000 !important;}
.marker {background: linear-gradient(transparent 60%, yellow);}
.line-height1 {line-height: 1.6 !important;}