@charset "utf-8";
/* CSS Document */

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

h2 { font-size: 2rem; font-weight: 600; padding-bottom: 10px; }
h2{ color: #333;/*文字色*/ border-top: dotted 2px #333; border-bottom: dotted 2px #333; margin:20px 0; position: relative;/*相対位置*/ padding: 0.5em 0.5em 0.5em 1.5em;/*アイコン分のスペース*/ }
h2:before{ color: #666; /*アイコン色*/ content: "\f1b9";/*アイコンのユニコード*/ font-family: "Font Awesome 5 Free";/*忘れずに*/ position: absolute;/*絶対位置*/ font-size: 1em;/*サイズ*/ left: 0.25em;/*アイコンの位置*/ top: 0.5em;/*アイコンの位置*/ }
h3 { font-size: 120%; font-weight: 400; padding-bottom: 10px; }
a:hover { color : #ff7043; }
a:active{ color : #26a69a; }
p { padding-bottom: 15px; }

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; }
}
/*
@media screen and (min-width:897px) and (max-width: 1024px) {
}
*/

/************************** id  **************************/

#main { width: 1000px; max-width: 1024px; padding: 40px 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%; }
}
/*
@media screen and (min-width:897px) and (max-width: 1024px) {
}
*/

/************************** class **************************/

.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; }
.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); }

.btnMini { font-size: 80%; 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; }

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