@charset "shift-jis";
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/*--  ---------------------------*/
html{
	width:100%;
	background: #fff;
}
body {
	width:100%;
	max-width: 1280px;
	margin: auto;
	color: #000;
	font-size: 16px;
	font-family: 'ヒラギノ角ゴ pro W3', "Hiragino KaKu Gothic Pro", Osaka, sans-serif;
	-webkit-text-size-adjust: 100%;
	-webkit-appearance: none;
}
div {
	display: table;
	width: 100%;
}
p {
	margin: 4px;
	padding: 0 8px;
	line-height: 1.4em;
}
img {
	display: block;
	width: 100%;
}
ul, ol {
	margin-left: 4em;
	margin-right: 2em;
}
li {
	margin-top: 8px;
	line-height: 1.2em;
}
.clear {
	clear: both;
}
.bg-fff {
	background: #fff;
}

/*-- header ---------------------------*/
header {
	background: #fff;
}
header p {
	font-size: 20px;
	text-align: right;
	font-weight: bold;
}
.headmenu {
	display: flex;
}

.headmenu a, .headmenu p {
	display: block;
	border: solid 1px #000;
	border-right: none;
	text-align: center;
	text-decoration: none;
	color: #000;
	margin: 0!important;
}

.headmenu p {
	width: 100%;
	font-size: 100%;
	font-weight: normal;
	height: 20px;
	line-height: 20px;
	border-bottom: none;
	font-size: 12px;
	letter-spacing: 2em;
}
.headmenu div.headmenu1 {
	width: calc(100% / 10);
	background: #cfc;
}
	.headmenu div.headmenu1 a {
		height: 56px;
		line-height: 56px;
	}
.headmenu div.headmenu2 {
	width: calc((100% / 10) * 6);
	background: #ffc;
}
	.headmenu div.headmenu2 a {
		float: left;
		width: calc(100% / 6);
		height: 36px;
		line-height: 36px;
	}
.headmenu div.headmenu3 {
	background: #cff;
	width: calc((100% / 10) * 3);
}
	.headmenu div.headmenu3 a {
		float: left;
		width: calc(100% / 3);
		height: 56px;
		line-height: 1em;
		padding-top: calc((56px - 2em) / 2);
	}
		.headmenu div.headmenu3 a:last-child {
			border-right: solid 1px #000;
		}

	@media only screen and (max-width: 680px) {

	}

#nav-drawer {
	position: relative;
	height: 100%;
}
.nav-unshown {
	display: none;
}
#nav-open {
	position: fixed;
	top: 0;
	right: 0;
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 4px;
	padding: 3px;
	background: rgba(255, 255, 255, .75);
	vertical-align: middle;
	border-radius: 4px;
	box-shadow: 1px 1px 3px #aaa;
}
#nav-open span, #nav-open span:before, #nav-open span:after {
	position: absolute;
	height: 4px;
	width: 24px;
	background: rgba(0, 0, 100, 1);
	display: block;
	content: '';
	cursor: pointer;
	margin-top: 2px;
	border-radius: 2px;
}
#nav-open span:before {
	bottom: -8px;
}
#nav-open span:after {
	bottom: -16px;
}
#nav-close {
	display: none;
	position: fixed;
	z-index: 99;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: #ffecd6;
	opacity: 100;
	transition: 6s ease-in-out;
}
#nav-content {
	overflow: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 80%;
	max-width: 330px;
	height: 100%;
	background: rgba(255, 255, 255, .8);
	transition: .4s ease-in-out;
	-webkit-transform: translateX(-105%);
	transform: translateX(-105%);
}
#nav-input:checked ~ #nav-close {
	display: block;
	opacity: .3;
}
#nav-input:checked ~ #nav-content {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);
	box-shadow: 6px 0 25px rgba(0, 0, 0, .15);
}
#nav-content p {
	margin: 0;
	padding-top: .3em;
	padding-left: 1em;
	font-size: 100%;
	color: #000;
	text-align: left;
	line-height: 1.4em;
}
.navimenu {
	display: block;
	overflow : scroll;
	height: 100%;
	-webkit-overflow-scrolling: touch;
}
#nav-content ul {
	width: 100%;
	margin: 0;
	padding: 0;
}
#nav-content ul li {
	border-top: solid 2px rgba(125, 125, 125, .2);
	border-bottom: solid 2px rgba(125, 125, 125, .3);
	color: #fff;
	list-style: none;
	margin: 0;
}
#nav-content ul li a {
	color: #000;
	list-style: none;
	margin: 0;
	padding: 1em .3em 1em 1.2em;
	display: block;
	width: 100%;
	cursor: pointer;
	text-decoration: none;
	font-weight: bold;
}
#nav-content ul li a:before {
	content: ">> ";
}
#nav-content ul li.sub1 {
	background: rgba(204, 255, 204, .4);
}
#nav-content ul li.subp {
	border-top: solid 2px rgba(125, 125, 125, .2);
	border-bottom: solid 1px rgba(125, 125, 125, .3);
	background: rgba(255, 255, 204, .4);
}
#nav-content ul li.sub2 {
	border-top: solid 1px rgba(125, 125, 125, .2);
	border-bottom: solid 1px rgba(125, 125, 125, .3);
	padding-left: 1.5em;
	background: rgba(255, 255, 204, .4);
}
#nav-content ul li.sub2-5 {
	border-top: solid 1px rgba(125, 125, 125, .2);
	border-bottom: solid 2px rgba(125, 125, 125, .3);
	padding-left: 1.5em;
	background: rgba(255, 255, 204, .4);
}
#nav-content ul li.sub3 {
	background: rgba(204, 255, 255, .4);
}
/*-- footer.html ---------------------------*/
footer {
	clear:both;
	width: 100%;
	font-size: 80%;
	text-align: center;
	margin: 0;
	padding: 16px 0;			
	background: #def;
	border-top: solid 1px #cdf;
	border-bottom: solid 2px #cdf;
}
footer p {
	clear: both;
}
	footer p span {
		white-space: nowrap;
	}
.counter {
	clear: both;
	text-align: center;
	font-size: 10pt;
	margin-top: 16px;
}
	.counter img {
		width: auto;
		display: inline;
	}
/*-- margin / padding ---------------------------*/
.mgn-t-em2 {
	margin-top: 2em!important;
}

.mgn-t-px0 {
	margin-top: 0px!important;
}
.mgn-t-px8 {
	margin-top: 8px!important;
}
.mgn-t-px12 {
	margin-top: 12px!important;
}
.mgn-t-px16 {
	margin-top: 16px!important;
}
.mgn-t-px24 {
	margin-top: 24px!important;
}
.mgn-t-px32 {
	margin-top: 32px!important;
}
.mgn-b-px0 {
	margin-bottom: 0px!important;
}
.mgn-b-px32 {
	margin-bottom: 32px!important;
}
.pdg-px16 {
	padding: 16px!important;
}
.mgn-l-px104-4 {
	margin-left: 104px!important;
}
	@media only screen and (max-width: 680px) {
		.mgn-l-px104-4 {
			margin-left: 4px!important;
		}
	}
.m-tbpx24-24 {
	margin: 24px auto -24px;
}
/*-- p ---------------------------*/
.normal {
	font-weight: normal;	
}
.bold {
	font-weight: bold;
}
.nowrap {
	white-space: nowrap;
}
.p-center {
	text-align: center;
}
.p-right {
	text-align: right;
}
.fs-per100 {
	font-size: 100%!important;
}
.fs-per90 {
	font-size: 90%!important;
}
.fs-px12 {
	font-size: 12px!important;
}
.fs-px18 {
	font-size: 18px!important;
}
.fs-px20 {
	font-size: 20px!important;
}
.fs-px24 {
	font-size: 24px!important;
}
.fs-px24-12 {
	font-size: 24px!important;
}
.fs-px24-18 {
	font-size: 24px!important;
}
.fs-px48 {
	font-size: 48px!important;
}
	@media only screen and (max-width: 680px) {
		.fs-px24-12 {
			font-size: 16px!important;
		}
		.fs-px24-18 {
			font-size: 18px!important;
		}
		.fs-px48 {
			font-size: 24px!important;
		}
		.sp_fs-per90 {
			font-size: 90%!important;
		}
		.fs-per90 {
			font-size: 80%!important;
		}
	}
.red {
	color: #f00;
}
.blue {
	color: #00f;
}
.line-h_em2 {
	line-height: 2em;
}
.greet {
	margin: 1em 3em!important;
}
	@media only screen and (max-width: 680px) {
		.greet {
			margin: .8em 1.2em!important;
		}
	}
.koukai {
	font-size: 90%!important;
	margin: 16px 8px -4px!important;
}
	@media only screen and (max-width: 680px) {
		.koukai {
			margin-bottom: -8px!important;
		}
	}
.ls0 {
	letter-spacing: 0;
}
/*-- img ---------------------------*/
.product {
	width: 96%;
	margin: 32px auto 0;
	box-shadow: 1px 1px 3px #777;
}

.maxw-px800 {
	max-width: 800px;
	margin: auto;
}

/*-- ul / ol ---------------------------*/
.member {
	padding: 24px;
	border: solid 1px #000;
}
.member li {
	margin-left: 48px;
}
	@media only screen and (max-width: 680px) {
		.member {
			padding: 8px 16px;
			margin: auto 8px;
		}
		.member li {
			margin-left: 24px;
			font-size: 16px;
		}
	}
.iroha li {
	list-style-type: katakana-iroha
}

/*-- background ---------------------------*/
.bg_fff {
	background: #fff;
}
.bg_ddd {
	background: #ddd;
}
.bg_cff {
	background: #cff;
}
.bg_ffc {
	background: #ffc;
}
.bg_fee {
	background: #fee;
}
/*-- width ---------------------------*/
.w_per100 {
	width: 100%!important;
}
.w_per50 {
	width: 50%!important;
}
.w_per30 {
	width: 30%!important;
}
/*-- div ---------------------------*/
.flex {
	display: flex;
	width: (100% - 16px);
	margin: 0 4px;
	padding: 2px 4px;
}
.block {
	display: block;
}
.flex div {
	width: calc((100% / 3) - 10px);
	margin: 2px 4px;
	border: solid 1px #000;
	padding: 4px;
}
	@media only screen and (max-width: 680px) {
		.flex {
			display: table;

		}
		.flex div {
			width: calc(100% - 16px);
			margin: 4px;
		}
	}
.flex2 {
	display: flex;
	width: (100% - 16px);
	margin: 24px 8px 0;
	padding: 2px 4px;
}
.flex2 div:first-child {
	width: 40%;
	margin-right: 24px;
}
	@media only screen and (max-width: 680px) {
		.flex2 {
			display: block;
			padding: 0;
		}
		.flex2 div:first-child {
			width: calc(100% - 16px);
			margin: 0;
		}
	}

.info {
	margin-top:4px;
}
.info div {
	width: 100%;
	margin: 16px auto;
	padding: 8px 0;
	background: #fff;
	border-radius: 12px;
}
.info div:first-child {
	margin-top: 0;
}
.bbs {
	display: block;
	padding: 0!important;
}
.bbs p {
	margin-left: 0!important;
	margin-right: 0!important;	
	padding: 0!important;
}
.bbs p a {
	display: block;
	width: calc(100% - 16px);
	max-width: 480px;
	margin: 0 auto 24px;
	padding-top: 4px;
	text-align: center;
	background: #eee;
	font-size: 120%;
	font-weight: bold;
	color: #333;
	line-height: 3em;
	text-decoration: none;
	box-shadow: 2px 2px 2px #ccc;
	border-radius: 8px;
}
	@media only screen and (max-width: 680px) {
		.bbs p a {
			margin: 4px auto;
		}
	}
.wahtsnew {
	display: block;
}
.new {
	list-style: none;
	height: 120px;
	overflow: scroll;
}
	@media only screen and (max-width: 680px) {
		.bbs, .whatsnew {
			width: calc(100% - 16px)!important;
			margin: 16px auto 0!important;
		}
	}
.dl p a {
	display: block;
	width: calc(100% - 16px);
	max-width: 480px;
	margin: 0 auto 24px;
	padding-top: 4px;
	text-align: center;
	background: #eee;
	font-size: 120%;
	font-weight: bold;
	color: #333;
	line-height: 3em;
	text-decoration: none;
	box-shadow: 2px 2px 2px #ccc;
	border-radius: 8px;
}
.width_px1024 {
	display: block;
	width: 964px;
	margin: auto;
	padding: 16px;
}
	@media only screen and (min-width:681px) and (max-width:1023px) {
		.width_px1024 {
			width: 90%;
			padding: 8px;
		}
	}
	@media only screen and (max-width: 680px) {
		.width_px1024 {
			width: 100%;
			padding: 8px;
		}
	}
.school {
	display: block;
	border: solid 1px #000;
	width: calc(100% - 16px);
	margin: auto;
	padding: 4px 0;
}
/*-- float ---------------------------*/
.f-left {
	float: left;
}
.f-right {
	float: right;
}
/*-- border ---------------------------*/
.no-border {
	border: 0!important;
}
.border-1-000 {
	border: solid 1px #000;
}
	@media only screen and (max-width: 680px) {
		.border-1-000 {
			border: none;
		}
	}
/*-- contact_form ---------------------------*/
.contactform {
	display: block;
	width: 80%;
	max-width: 680px;
	margin: 32px auto;
	border: solid 1px #777;
	border-radius: 16px;
	padding: 16px;
}
.contactform p {
	clear: both;
	width: 100%;
	line-height: 1.5em;
	background: rgba(180,255,100,0.2);
	text-indent: 1em;
	font-weight: bold;
	letter-spacing: 4px;
	margin: 16px 0 8px 0;
	padding-top: 4px;
	border-radius: 8px;
}
	.contactform p:first-child {
		margin-top: 0;
	}
.contactform p.bobo {
	text-indent: 0;
	padding-left: 2em!important;
}
.ukewatashihosoku {
	font-size: 90%;
	letter-spacing: 0;
}
	@media only screen and (max-width: 680px) {
		.ukewatashihosoku {
			font-size: 80%;
		}
	}
input[type="checkbox"] {
	margin-left: 2em;
}
.sample {
	margin-left: 0!important;
}
.textbox {
	width: 94%;
	height: 2.5em;
	line-height: 2.5em;
	margin: 4px 2% 4px 4%;
	padding-left: 0.5em;
	background: rgba(255,255,255,0.3);
	border: inset 1px #aaa;
}
.sample2 {
	width: 48px;
}
.t-area, .t-area2  {
	width: 94%;
	height: 150px;
	margin: 4px 2% 4px 4%;
	padding: 0.5em;
	background: rgba(255,255,255,0.3);
	border: inset 1px #aaa;
}
.t-area  {
	height: 150px;
}
.t-area2  {
	height: 2.8em;
}
	@media only screen and (max-width: 680px) {
		.contactform {
			width: 98%;
			padding: 8px;
			border-radius: 8px;
		}
		.contactform p {
			letter-spacing: 0;
		}
		.t-area {
			height: 80px;
		}
	}
.formbutton {
	display: block;
	text-align: center;
	width: 100%
	margin: 0;
	padding: 0;
	background: #fff!important;
}
	@media(max-width:480px){
		.formbutton {
			margin-top: 8px;
		}
	}
.kakunin {
	clear: both;
	width: 55%;
	height: 3em;
	margin: 0 0 0 2.5%;
	border-radius: 10px;
	line-height: 3em;
	letter-spacing: 2px;
	background: rgba(255,0,0,0.3);
	font-weight:bold;
	box-shadow: 2px 2px 2px #777;
	cursor: pointer;
	-webkit-appearance: none;
}
.reset {
	clear: both;
	width: 25%;
	height: 3em;
	margin: 0 0 0 0;
	border-radius: 10px;
	line-height: 3em;
	background: rgba(130,130,130,0.2);
	box-shadow: 2px 2px 2px #aaa;
	-webkit-appearance: none;
}
.yoyakuitem1, .yoyakuitem2 {
	display: block;
	clear: both;
	width: 90%!important;
	line-height: calc(1.5em - 1px);
	border: solid 1px #777;
	border-radius:8px;
	padding: 8px 0 8px 8px;
	margin: 4px auto 0!important;
}
.yoyakuitem1 {
	margin-bottom: -16px!important;
}
.yoyakuitem2 {
	margin-top: 0px!important;
}