@charset "utf-8";

/*==============================================================================
	General Settings
==============================================================================*/

/*** HTML Element ***/
html {
	font-size: 62.5%; /* 1rem = 16px * 0.625 = 10px */
}

/*** Body Element ***/

body {
	position: relative;
	font-family: "Droid Sans", Helvetica, "Helvetica Neue", Arial, Verdana, 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.5; /* 24/16 */
	text-align: left;
	color: #000;
	background-color: #fff;
}

/*** Heading Elements ***/

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	margin-bottom: 24px;
}

h1 {font-size:36px; font-size: 3.6rem;}
h2 {font-size:30px; font-size: 3.0rem;}
h3 {font-size:24px; font-size: 2.4rem;}
h4 {font-size:20px; font-size: 2.0rem;}
h5 {font-size:18px; font-size: 1.8rem;}
h6 {font-size:16px; font-size: 1.6rem;}

/*** Anchor Element ***/

a {
	color: #4d6e9c;
	text-decoration:none;
	cursor: pointer;
}

a:hover {
	color: #99ced4;
}

/***  Image Element ***/

img {
	margin: 0 auto;
	max-width: 100%;
	height: auto;
	image-rendering: auto;
	-ms-interpolation-mode: bicubic;
}

/***  Internal Frame ***/

iframe {
	max-width: 100%;
}

/***  Object Elements ***/

object {
	max-width: 100%;
	pointer-events: none;
}

/*** Emphasis Element ***/

em {
	font-style: italic;
	font-weight: normal;
}

/*** Strong Element ***/

strong {
	font-style: normal;
	font-weight: bold;
}

/*** Form Elements ***/

label {
	clear: both;
	display: block;
	float: left;
	cursor: pointer;
}

input, textarea {
	font-size: 16px;
	font-size: 1.6rem;
	border: solid 1px #ccc;
	padding: 4px;
	background-color: #fff;
}

textarea {
	resize: none;
}

/*==============================================================================
	Basic Layout
==============================================================================*/

.btn, .navbar-toggle {
	border-radius: 0;
}

.btn-primary {
	color: #fff;
	background-color: #4d6e9c;
	border: none;
}

.btn-primary:hover, .btn-primary.focus {
	background-color: #99ced4;
	border-color: #99ced4;
}

.no-gutter > [class*='col-'] {
	padding-left: 0;
	padding-right: 0;
}

/*==============================================================================
	Header
==============================================================================*/

header {
	padding: 10px 0;
	background-color: #fff;
}

header .lang {
	margin: 10px 0;
	text-align: center;
}

.input-group-addon {
	border-width: 0 0 2px;
	border-color: #eeb6b7;
	border-radius: 0;
	background-color: #fff;
}

.input-group input {
	border: none;
	border-bottom: 2px solid #eeb6b7;
	border-radius: 0;
	box-shadow: none;
}

#mascot, #logo {
	text-align: center;
	height: auto;
	background-color: #fff;
}

#mascot img {
	width: 100px;
}

/*==============================================================================
	Navigation
==============================================================================*/

.nav .disabled a {
	cursor: default;
	pointer-events: none;
}

.navbar-default .navbar-nav .open .dropdown-menu>li>a,
.navbar-default .navbar-brand, .navbar-default .navbar-nav>li>a,
.dropdown-menu>li>a {
	color: #4d6e9c;
}

.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
	color: #fff;
	background-color: #99ced4;
}

.dropdown-menu {
	border: 1px solid #6e7376;
	border-radius: 0;
}

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
	color: #fff;
	background-color: #99ced4;
}

.dropdown-menu .divider {
	background-color: #6e7376;
}

.dropdown-header {
	color: #6e7376;
}

/*==============================================================================
	Main
==============================================================================*/

/*
#en #en, #ja #ja {
	cursor: default;
	pointer-events: none;
}

#home a#home, #our-concept a#our-concept, #activities a#activities,
#courses a#courses, #past-courses a#past-courses, #tutorials a#tutorials,
#summer-camp a#summer-camp, #past-camp a#past-camp,
#open-workshop a#open-workshop, #past-workshops a#past-workshops,
#intl-symposium a#intl-symposium, #past-symposium a#past-symposium,
#act-others a#act-others, #act-past a#act-past {
	cursor: default;
	pointer-events: none;
}
*/

.carousel-inner figure {
	display: inline-block;
	position: relative;
}

.carousel-inner figure:after {
	display: block;
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(77, 110, 156, .6);
}

.carousel-caption {
	left: 10%;
	right: 10%;
	padding-bottom: 0;
}

.carousel-caption h3 {
	margin-top: 0;
	margin-bottom: 10px;
}

.carousel-caption h3 + p {
	display: none;
}

.carousel-caption p {
	font-size: 12px;
	font-size: 1.2rem;
}

.carousel-control {
	background-color: transparent;
	background-image: none !important;
	opacity: 1;
}

section {
	margin-bottom: 30px;
}

article {
	padding: 10px 20px;
}

article h1 {
	border-top: 1px solid #4d6e9c;
	border-bottom: 1px solid #4d6e9c;
	padding: 18px 0;
}

.buttonlink {
	margin-bottom: 10px;
}

#staff figure {
	margin: 30px;
}

#staff figure img {
	-ms-box-shadow: 0 12px 8px -4px #999;
	-o-box-shadow: 0 12px 8px -4px #999;
	box-shadow: 0 12px 8px -4px #999;
}

#workshop article section h2, #symposium article section h2,
#staff article section h2 {
	font-size: 20px;
	font-size: 2.0rem;
	margin-bottom: 10px;
}

#materials article section h2, #reports article section h2 {
	font-size: 20px;
	font-size: 2.0rem;
}

#materials article section h3, #reports article section h3 {
	font-size: 18px;
	font-size: 1.8rem;
	margin: 15px 0 5px;
}

#materials th, #materials td, #reports th, #reports td {
	vertical-align: middle;
}

legend {
	clear: both;
	margin: 0;
	border: 0;
	font-size: 16px;
	font-weight: bold;
	color: #000;
	line-height: 24px;
}

/*==============================================================================
	Footer
==============================================================================*/

footer {
	background-color: #fff;
}

#office, #links, footer .lang {
	margin: 0;
}

#office div, #links div, footer .lang > div {
	padding: 10px;
}

footer hr {
	height: 1px;
	background-color: #ccc;
	background-image: -webkit-linear-gradient(left, #fff, #4d6e9c, #fff);
	background-image: linear-gradient(left, #fff, #4d6e9c, #fff);
}

footer address {
	margin-bottom: 0;
}

#credit {
	font-size: 12px;
	line-height: 1.0;
}

#page-top {
	position:fixed;
	right: 10px;
	bottom: 5px;
	z-index:9999;
}

/*==============================================================================
	Home (Top) Page: index.html
==============================================================================*/

#home #logo {
	padding-top: 20px;
}

#space {
	padding-top: 50px;
}

#contact1 {
	display: block;
	padding-top: 70px;
	padding-bottom: 50px;
}

#contact2 {
	display: none;
}

#team {
	padding-top: 30px;
}

/*==============================================================================
	Calendar Form 01
==============================================================================*/

#admin h1 {
	border-top: 1px solid #4d6e9c;
	border-bottom: 1px solid #4d6e9c;
	margin: 18px;
	padding: 18px 0;
}

.modal-footer button {
	margin-bottom: 24px;
}

/* Floating Side Bar for Calendar */
#ta-sidebar {
	z-index: 1000;
}

#ta-sidebar .affix {
	position: fixed;
	right: 0;
	top: 33%;
	background-color: #fff;
	opacity: .8;
}

#ta-sidebar .affix-bottom {
	position: absolute;
}

#ta-sidebar .nav {
	margin: 0;
}

#ta-sidebar .nav li {
	padding: 0;
}

#ta-sidebar .nav .active > a {
	color: #000;
}

/* Cube for Holiday and Closed Day */
.holidayCube, .closedCube {
	display: inline-block;
	position: relative;
	width: 24px;
	height: 12px;
	margin: 0 3px;
}

/* Holidays */
.youbi_0, .shukujitsu {
	color: #f00;
}

/* Saturday */
.youbi_6 {
	color: #36f;
}

#accordion form {
	margin: 15px;
}

#accordion form a {
	vertical-align: top;
}

li[class*="youbi_"] {
	border-bottom: 1px solid #000;
	padding: 12px 16px;
}

li[class*="youbi_"]:first-child {
	border-top: 1px solid #000;
}

table[id^="calendarTable"] thead th {
	font-size: 24px;
	text-align: center;
}

#calendarTable td {
	width: 14.2857%;
	text-align: left;
}

#admin label {
	font-weight: normal;
}

/* Schedule Pulldown List */
.schedulePulldownList, #admin .adminPullDown {
	padding: 6px 16px;
	border-bottom: 1px dotted #ccc;
}

#calendarTable .schedulePulldownList {
	padding: 6px;
}

.rsv {
	border: 1px solid #4d6e9c;
}

.scheduleComment {
	color: #000;
}

.dpmj {
	padding-top: 0 !important;
	line-height: 24px;
}

.borderless {
	border: 0 !important;
}

input[id$="-others"] {
	margin-top: 5px;
}

/* Fixed Header Table
#calendarTable thead th {
	position: -webkit-sticky;
	position: sticky;
	white-space: nowrap;
	z-index: 1;
}

#calendarTable thead th:before {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	border-bottom: 2px solid #ddd;
}

#calendarTable thead tr:nth-child(1) th {
	top: 0;
}

#calendarTable thead tr:nth-child(1) th:before {
	top: 2px;
}

#calendarTable thead tr:nth-child(2) th {
	top: 64px;
}

#calendarTable thead tr:nth-child(2) th:before {
	top: 2px;
}

.calendarClassAdmin thead th {
	position: -webkit-sticky;
	position: sticky;
	white-space: nowrap;
	z-index: 1;
}

.calendarClassAdmin thead th:before {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	border-bottom: 2px solid #ddd;
}

.calendarClassAdmin thead tr:nth-child(1) th {
	top: -1px;
}

.calendarClassAdmin thead tr:nth-child(1) th:before {
	top: 2px;
}

.calendarClassAdmin thead tr:nth-child(2) th {
	top: 50px;
	background-color: #fff;
}

.calendarClassAdmin thead tr:nth-child(2) th:before {
	top: 2px;
}
*/

button[name="holiday_submit"] {
	margin-bottom: 20px;
}

/*==============================================================================
	Media Queries
==============================================================================*/

/* width more than 480px */
@media screen and (min-width: 480px) {

	#mascot img {
		width: 120px;
	}

	#logo img {
		width: 480px;
	}

	.carousel-caption h3 {
		margin-top: 20px;
	}

	.carousel-caption h3 + p {
		display: block;
	}

}

/* width more than 768px (-sm: small) */
@media screen and (min-width: 768px) {

	header .lang {
		margin: 3px 0;
		text-align: right;
	}

	#mascot {
		text-align: left;
	}

	#mascot img {
		width: 150px;
	}

	#logo {
		text-align: right;
	}

	.navbar-default {
		border: none;
	}

	.navbar-nav {
		float: none;
		display: table;
		margin: 0 auto;
	}

	.navbar-default .navbar-nav>.open>a,
	.navbar-default .navbar-nav>.open>a:focus,
	.navbar-default .navbar-nav>.open>a:hover {
		color: #fff;
		background-color: #99ced4;
	}

	.dropdown:hover > .dropdown-menu {
		display: block;
	}

	.carousel {
		padding: 15px;
		background-color: #fff;
	}

	.carousel-caption {
		left: 20%;
		right: 20%;
		padding-bottom: 30px;
	}

	.carousel-caption p {
		font-size: 14px;
		font-size: 1.4rem;
	}

	.container h1 br {
		display: none;
	}

	.buttonlink {
		margin-bottom: 0px;
	}

	#office, #links, footer .lang {
		margin: 20px 0;
	}

	#office div, #links div, footer .lang > div {
		padding: 20px;
	}

	#credit {
		margin-bottom: 20px;
	}

	#page-top {
		right: 7%;
		bottom: 60px;
	}

}

/* width more than 992px (-md: medium) */
@media screen and (min-width: 992px) {

	header {
		padding: 20px 0;
	}

	#mascot img {
		width: 200px;
	}

	#logo img {
		width: 640px;
	}

	#home #logo {
		padding-top: 40px;
	}

	#space {
		padding-top: 130px;
	}

	#contact1 {
		display: none;
	}

	#contact2 {
		display: block;
	}

}

/* width more than 1200px (-lg: large) */
@media screen and (min-width: 1200px) {

}