html{
	overflow: -moz-scrollbars-vertical;
	overflow-y: scroll;
}
body{
	color: #333;
	font-family: 'Kosugi', sans-serif,"Meiryo UI","Meiryo","osaka",verdana;
	font-weight: 400;
}
h1,h2,h3,h4,h5,h6,h7,h8,p,dl,dt,dd,li,th,td{transform: rotate(0.001deg);}
header{height:60px;width:100%;background-image:url(img/top-background.jpg);background-position: center center;background-size:cover;}
header div.top-small-image{
	padding-top:20px;
	margin:0 auto;
	height:100%;max-width:1000px;
	background-repeat:no-repeat;
	background-position:left center;
	background-image:url(img/kokoro-subpage.png);
	background-size:contain;
}

h2,h3,h4,h5,h6,h7,h8{
	font-family: 'M PLUS Rounded 1c', sans-serif !important;
	font-weight: 400;
}
h2{
	margin-top:20px;
	background-image:url(img/title-background.png);
	background-position:left bottom;
	background-repeat:no-repeat;
	max-width: 1000px;
	padding-bottom:10px;
	text-shadow:0 0 12px #fff,0 0 12px #fff,0 0 12px #fff;
	font-weight: normal;
}

h3{
	margin-top:30px;
	font-size:28px;
	line-height: 48px;
	background: rgb(255,255,255);
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(249,249,249,1) 94%, rgba(252,252,252,1) 95%, rgba(249,249,249,1) 95%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(249,249,249,1) 94%,rgba(252,252,252,1) 95%,rgba(249,249,249,1) 95%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(249,249,249,1) 94%,rgba(252,252,252,1) 95%,rgba(249,249,249,1) 95%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
	border-radius: 4px;
}

h3 span{
	font-weight: normal;
	font-size:60%;
	margin-left:12px;
}


h4{
	margin-top:20px;
	font-size:22px;
	line-height:50px;
	display: block;
	vertical-align: middle;
	text-indent: 2px;
}

h5{
	margin-top:20px;
	font-size:21px;
	text-indent: 10px;
}

h5 span{
	font-weight: normal;
	font-size:80%;
	white-space:nowrap;
}

h6{
	margin-top:20px;
	font-size:18px;
	text-indent: 16px;
}
h7{
	margin-top:20px;
	font-size:16px;
	text-indent: 14px;
}

p.center{
	text-align: center;
}

*.comment{
	width: 90%;
	margin:10px auto;
	margin-bottom:24px;
	text-align: left;
	border:2px solid #777;
	background-color:#f9f9f9;
	color:#444;
	padding:10px;
}

*.comment + p{
	margin-top:24px;
}

*.oc{
	cursor:pointer;
	text-indent:6px;
}

*.oc:before{
	content: "";
	float: left;
	width: 16px;
	height: 50px;
	margin: 0 5px 0 0;
	margin-left:5px;
	background-image:url(img/arrow-bottom.png);
	background-position:left center;
	background-repeat: no-repeat;
}


*.oc-open.oc:before{
	transform: rotate(180deg);
}

*.ocd{
	height:100px;
	overflow: hidden;
	position: relative;
}

*.noscroll{
	overflow:hidden;
}

div.oc-trigger{
	display: block;
	position: absolute;

	bottom:0;
	left:0;
	width: 100%;
	height:100px;
	background-image:url(img/opacity-grad.png);
	background-repeat: repeat-x;
}

div.oc-trigger div{
	position: absolute;
	bottom:1px;
	margin:0 auto;
}
div.oc-closed{
	cursor:pointer;
}

p.label{
	background-color:#f5f5f5;
	padding:10px;
	text-indent: 0;
}

p.label.red{
	border-color:#f77;
	background-color:#fee;
	color:#700;
}

p.label span{
	padding:10px 5px;
}

a.image-link img{
	border:2px solid #b6ceff;
}

a.image-link:hover img{
	border:2px solid #667eff;
}

a.pdflink{
	background-image:url(img/pdficon.png);
	background-repeat:no-repeat;
	background-position: right center;
	padding-right:28px;
}

a.checking:before{
	content: '*';
	color:red;
	display: inline-block;
	animation-name: checking-link;
	animation-iteration-count: infinite;
	animation-timing-function: liner;
	animation-duration: 0.8s;
}
a.invalid:before{
	content: '× ';
	color:red;
	font-weight:bold;

	animation-name: invalid-link;
	animation-iteration-count: infinite;
	animation-timing-function: liner;
	animation-duration: 0.8s;
}
div#toc{
	position:fixed;
	left:0;
	bottom:0;
	background-color:#fffe;
}
div#toc > div.title{
	cursor:pointer;
	border-bottom:1px solid black;
}
div#toc > div.title:hover{
	background-color:#fafafa;
}
div#toc > div span.toc{
	display: block;
	font-size:12px;
	cursor:pointer;
}
div#toc > div span.toc:hover{
	background-color:#fafafa;
}

div#toc > div span.toc span{display:none;}

div#toc > div span.toc-H2{margin-left:0px;font-weight: bold;}
div#toc > div span.toc-H3{margin-left:6px;font-weight: bold;}
div#toc > div span.toc-H4{margin-left:12px;font-weight: bold;}
div#toc > div span.toc-H5{margin-left:18px;}
div#toc > div span.toc-H6{margin-left:24px;}

div.row{margin:0 auto;}
div.mg-top{margin-top:20px;}

div.image-preview{
	display: block;
	width: 100%;
	height: 100%;
	display: block;
	position: fixed;
	top:0;
	left:0;
	padding:0;
	padding-bottom:50px;
	background-color:rgba(0,0,0,0.7);
	overflow:scroll;
}
div.image-preview img{
	display: block;
	margin:10px auto;
}
div.image-preview button.button{
	width: calc( 100px );
	margin:0 auto;
	text-align: center;
	display: block;
	margin-top:10px;
}

ol.cnt-paren{
	padding:0 0 0 2em;
	margin:0;
}

ol.cnt-paren li{
	list-style-type:none;
	list-style-position:inside;
	counter-increment: cnt;
}
ol.cnt-paren li:before{
	display: marker;
	content: "(" counter(cnt) ") ";
	margin-left:-2em;
}

ol.strong-fstline li:first-line,ul.strong-fstline li:first-line{
	font-weight: bold;
}

p{
	text-indent: 1em;
	margin-left: 2em;
	margin-right:2em;
}

*.bcenter{
	margin:0 auto;
	display: block;
}

*.pos-box{
	display: inline-block;
	vertical-align: top;
}

*.resp{
	display: block;
	height: auto;
	max-width: 100%;
	cursor:pointer;
}

footer{
	border-top:2px solid #c2f4fd;
	background-color:#e7fbff;
	font-size:12px;
	text-align: center;
	margin-top:24px;
	line-height:22px;
	vertical-align: middle;
	font-weight: bold;
	padding-top:20px;
	padding-bottom:20px;
}


/**********************************/
div.container > p{padding-right: 2em;}
nav#head-menu{display:block;border-bottom:2px solid #c2f4fd;background-color: #fff;padding:0;}
nav{box-shadow:0 10px 10px 0 #f5f5f5;}
/*nav#head-menu ul.main-menu,nav ul.main-menu li{margin:0;padding: 0;} */

button#menu-toggle-button{
	position: absolute;
	top:-50px;
	right:20px;
	margin-bottom:5px;
	background-color: rgba(255,255,255,0.95);
}

nav.navbar-collapse.collapse{padding:0;}

.navbar-light .navbar-nav .nav-link{
	height: 44px;
	font-size:20px;
	color:#222;
	white-space: nowrap;
}

.navbar-light .navbar-nav li .nav-link{
	background-color:rgba(255,255,255,0.95);
}
.navbar-light .navbar-nav li .nav-link:hover{
	background-color:rgba(255,255,255,0.9);
}
.navbar-light .navbar-nav li .nav-link.active{
	background-color:rgba(255,255,255,0.8);
	font-weight: bold;
}


*.wmax{width:100%;}

*.zebra2n li{
	padding:2px 5px;
}

*.zebra2n li:nth-child(2n+1){
	background-color:#fafafa;
	padding:2px 5px;
}

*.none{
	display: none !important;
}

div.to-top{
	height:25px;
	line-height:25px;
	width:50px;
	text-align: center;
	cursor:pointer;
	box-shadow:0 0 15px 0 #ccc;
	position: fixed;
	right:10px;
	bottom:10px;
	color:white;
	opacity:0.5;
}
div.to-top:hover{
	box-shadow:0 0 15px 0 #bbb;
}
div.box > div{

}
/* Window Size Compatible */

@media (min-width: 900px) {

	div.container{
		max-width: 900px;
		margin:0 auto;
	}

	nav ul.main-menu{
		text-align: center;
		width: 750px;
	}

	.navbar-nav{
		margin: 0 auto;
	}
	.navbar-light .navbar-nav .nav-link{
		color:#000;
		background-color: #ffe;
	}

/*
		"center":"#6dc644"
		,"message":"#ff9800"
		,"group":"#5b9cd4"
		,"seminar":"#ff5722"
		,"counseling":"#9c27b0"
		,"info":"#68e3eb"
*/
}

/* Tablet Big */
@media (min-width: 768px) and (max-width: 900px) {
	nav ul.main-menu li:nth-child(4){width: 100px;}
	nav ul.main-menu li:nth-child(5){width: 140px;}
	h3 span{white-space: nowrap;}
	nav ul.main-menu{
		text-align: center;
		width: 750px;
	}

	.navbar-nav{
		margin: 0 auto;
	}
	.navbar-light .navbar-nav .nav-link{
		/* color:blue;*/
	}
}

/* Tablet  Middle */
@media (max-width: 767px) {
	nav ul.main-menu li:nth-child(4){width: 100px;}
	nav ul.main-menu li:nth-child(5){width: 140px;}
	h3 span{
		font-weight: normal;
		font-size:60%;
		margin-left:6px;
	}
	h2{font-size:22px;background-size:220%;}
	h3{font-size:20px;}
	h3 span{white-space: nowrap;}
	p{
		text-indent: 1em;
		margin-left: 0.5em;
		margin-right:0.5em;
	}
}

/* Mobile */
@media (max-width: 380px) {
	nav ul.main-menu li{width: 170px !important;}
	div.row{margin:0 5px;font-size:14px;}
	h2{font-size:20px;background-size:250%;}
	h3{font-size:17px;line-height:38px;}
	h3 span{white-space: nowrap;}
}

@media print {
	a[href]:after {
		content: " (" attr(href) ") ";
	}
}

*.reverse{transform: rotate(180deg);}
*.blink-star{position: relative;margin-right: 33px;}
*.blink-star span{
	position:absolute;
	display: inline-block;
	font-size:100%;
	animation-name: blinknew;
	animation-iteration-count: infinite;
	animation-timing-function: liner;
}
*.blink-star span:nth-child(1){animation-duration: 0.8s;top:2;left:0;font-size:18px;transform: rotate(180deg);}
*.blink-star span:nth-child(2){animation-duration: 0.6s;top:1px;left:16px;font-size:12px;transform: rotate(20deg);}
*.blink-star span:nth-child(3){animation-duration: 0.2s;top:12px;left:12px;font-size:10px;}


*.blink{
	animation-duration: 2.5s;
	animation-name: blink-link;
	animation-iteration-count: infinite;
	animation-timing-function: liner;
}

@keyframes blinknew{
	0%	{opacity:1.0;}
	50%	{opacity:0.65;}
	100%{opacity:1.0;}
}

@keyframes blink-link{
	0%	{opacity:1.0;}
	50%	{opacity:0.1;}
	100%{opacity:1.0;}
}


@keyframes invalid-link{
	0%	{opacity:1.0;}
	25%	{opacity:0.1;}
	50%	{opacity:1.0;}
	75%	{opacity:0.1;}
	100%	{opacity:1.0;}
}

@keyframes checking-link{
	0%	{opacity:1.0;transform: rotate(0deg);}
	100%	{opacity:0.0;transform: rotate(360deg);}
}