@charset "utf-8";
/* CSS Document */
/*
@media screen and (min-width:897px) and (max-width: 1024px) {
}
*/

/************************** tag **************************/
html { box-sizing: border-box; font-family: 'Noto Sans JP', 'Noto Sans', sans-serif; } *, *:before, *:after { box-sizing: inherit; }
body { line-height: 1.4em; width: auto; color: #333; }

h2 { font-size: 2rem; font-weight: 600; padding:10px 0; margin: 20px 0 10px 0; }
h3 { font-size: 1rem; font-weight: 400; padding-bottom: 10px; }
p { padding-bottom: 1em; }
.fs08em { font-size: 0.8em; }
.fs05em { font-size: 0.5em; }

nav 	{ background: #ccc; margin: 0 auto; border-bottom: 1px #ccc soild; }
nav ul { width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
nav li { border-left: #000 1px solid; width: 33.3%; text-align: center; padding: 10px; }
nav li:last-child { border-right: #000 1px solid; }
@media screen and ( max-width:480px) { 
	nav ul { width: auto; }
	nav li { border-right: #000 1px solid; border-left:none; }
	nav li:last-first { border:none; }
	nav li:last-child { border:none; }
}
@media screen and (min-width:481px) and ( max-width:896px) { 
	nav ul { width: auto; }
	nav li { border-right: #000 1px solid; border-left:none; }
	nav li:last-first { border:none; }
	nav li:last-child { border:none; }
}


/************************** id  **************************/
#main { width: 1000px; max-width: 1024px; padding: 20px 0; margin: 0 auto; }
#contents { width: 800px; background: #666; }
@media screen and ( max-width:480px) { 
	#main { width: 100%; padding: 20px; margin: 0 !important; }
	#contents { width: 100%; }
}
@media screen and (min-width:481px) and ( max-width:896px) { 
	#main { width: 100%; padding: 20px; margin: 0 !important; }
	#contents { width: 100%; }
}


/************************** class **************************/
ul.middleDot { margin-left:0; }
.middleDot li { float: left; }
.middleDot li:after { margin-left:0; content: '・'; /* ←ここにリストマーカーにしたい文字列を設定 */ }
.middleDot li:last-child:after { content:none; }

ul.attention { margin-left:1em; }
.attention li:before { content: '※'; margin-left:-1em; }

.btn { padding: 10px; margin: 0; position: relative; display: block; vertical-align: middle; text-align: center; border: #ececec 1px solid; border: #666 1px solid; }
.btn:hover { background: #ccc; font-weight: 600; }

.btnMini { font-size: 0.8rem; border: none; padding: 0 1.5em 0 0; margin: 0 0 0 15px; display: inline-block; float: right; }
.btnMini:hover { background: none; font-weight: normal; }
.btnMini:before,
.btnMini:after { bottom: 2px; right: 0.5em; }

.arrow:before,
.arrow:after { position: absolute; top: 0; bottom: 0; right: 1em; margin: auto; content: ""; vertical-align: middle; }
.arrow:before { width: 8px; height: 8px; border-top: 2px solid #666; border-right: 2px solid #666;  -webkit-transform: rotate(45deg);  transform: rotate(45deg); }


/************************** clearfix **************************/
#link ul::after {
  content: "";
  display: block;
  clear: both;
}
.btnMini::after {
  content: "";
  display: block;
  clear: both;
}