@charset "utf-8";

.header {
}

/* old device setting (ex:iphone5) */
@media screen and (max-width: 320px) {
}

@media screen and (max-width: 640px) {
	.header {
		width: 100%;
		z-index: 99999;
		transform: translate3d(0, 0, 0);
		position: absolute;
		top: 0;
		left: 0;
	}
	.header.header-scroll {
		position: fixed;
		top: 0;
		left: 0;
	}
	.header-inner {
	}

	.header .header-top {
		width: 100%;
		background: #fff;
	}
	.header .header-top-inner {
	}
	.header .header-top h1 {
	}
	.header .header-top #header-info,
	.header .header-top #header-link {
		display: none;
	}

	.header .header-top {
		width: 100%;
	}
	.header .header-top h1 {
		display: block;
		background: url(../include/images/header-sp.png) no-repeat center top;
		font-size: 0px;
		line-height: 0px;
		text-indent: -9999px;
		padding: 21.5625% 0 0;
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
	}
	.header.header-scroll .header-top h1 {
		display: block;
		background: url(../include/images/header-sp-fix.png) no-repeat center top;
		font-size: 0px;
		line-height: 0px;
		text-indent: -9999px;
		padding: 10.938% 0 0;
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
	}

	.header .search-scroll-box {
		z-index: 99999;
	}
	.header .header-top .search-scroll-btn,
	.header .search-scroll-box {
		display: none;
	}
	.header.header-scroll .search-scroll-btn {
		display: block;
	}
	.header.header-scroll .search-scroll-btn span {
		display: block;
		background: url(../include/images/nav-search-sp.png) no-repeat 0 0;
		font-size: 0px;
		line-height: 0px;
		text-indent: -9999px;
		width: 13.281%;
		padding: 10.937% 0 0; /* w100% = 82.353% */
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		position: absolute;
		top: 0;
		right: 0;
		cursor: pointer;
	}
	.header.header-scroll .search-scroll-btn.open span {
		display: block;
		background: url(../include/images/nav-search-sp.png) no-repeat 0 0;
		padding: 10.937% 0 0; /* w100% = 82.353% */
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
	}
	.header.header-scroll .search-scroll-btn.close span {
		display: block;
		background: url(../include/images/nav-close-sp.png) no-repeat 0 0;
		padding: 10.937% 0 0; /* w100% = 82.353% */
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
	}
	.header.header-scroll .search-close-btn {
		display: block;
		background: url(../include/images/btn-search-close-sp.png) no-repeat 0 0;
		font-size: 0px;
		line-height: 0px;
		text-indent: -9999px;
		width: 23.438%;
		padding: 6.25% 0 0; /* w100% = 26.667% */
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		cursor: pointer;
		margin: 0 auto;
	}

	.header .search-defalt-box {
		z-index: 99999;
	}
	.header.header-scroll .search-defalt-box {
		display: none;
	}
	.header .search-defalt-btn span {
		display: block;
		background: url(../include/images/btn-search-detail-sp.png) no-repeat 0 0;
		font-size: 0px;
		line-height: 0px;
		text-indent: -9999px;
		width: 23.438%;
		padding: 6.25% 0 0; /* w100% = 26.667% */
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		cursor: pointer;
		margin: 0 auto;
	}
	.header .search-defalt-btn.open span {
		display: block;
		background: url(../include/images/btn-search-detail-sp.png) no-repeat 0 0;
		padding: 6.25% 0 0; /* w100% = 26.667% */
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
	}
	.header .search-defalt-btn.close span {
		display: block;
		background: url(../include/images/btn-search-close-sp.png) no-repeat 0 0;
		padding: 6.25% 0 0; /* w100% = 26.667% */
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
	}


	.header .search-form {
		background: #e60a26;
		width: 100%;
		padding: 3.2% 3%;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.header .search-form-inner {
		overflow: hidden;
		position: relative;
		zoom:1;
		width: 100%;
		background: #fff;
		padding: 1.8% 1.8% 1.2%;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
	}
	.header .search-form input[type="text"] {
		float: left;
		width: 85%;
		border: none;
		outline: none;
	}
	.header .search-form input[type="submit"] {
		float: right;
		width: 11.4%;
		display: block;
		background: url(../include/images/btn-search.png) no-repeat center;
		font-size: 0px;
		line-height: 0px;
		text-indent: -9999px;
		padding: 5% 3.2% 0; /* w100% = 100% */
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		border: none;
		outline: none;
		cursor: pointer;
	}


	.header .search-defalt-nav {
		display: none;
		background: #e60a26;
		width: 100%;
		padding: 2.4% 0 7.2%;
	}
	.header .search-scroll-box {
		display: none;
		width: 100%;
		position: fixed;
		left: 0;
		z-index: 99999;
	}
	.header .search-scroll-nav {
		background: #e60a26;
		padding: 2.4% 0 7.2%;
	}
	.header .search-defalt-nav-inner,
	.header .search-scroll-nav-inner {
		width: 94%;
		margin: 0 auto;
	}
	.header .search-defalt-nav ul,
	.header .search-scroll-nav ul {
		width: 100%;
		background: url(../include/images/search-nav.png) no-repeat center top;
		padding: 50.333% 0 0;
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		position: relative;
	}
	.header .search-defalt-nav li a,
	.header .search-scroll-nav li a {
		display: block;
		font-size: 0px;
		line-height: 0px;
		text-indent: -9999px;
		height: 50%;
	}
	.header li#s-nav01 a {
		width: 33.333%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.header li#s-nav02 a {
		width: 33.333%;
		position: absolute;
		top: 0;
		left: 33.333%;
	}
	.header li#s-nav03 a {
		width: 33.334%;
		position: absolute;
		top: 0;
		left: 66.666%;
	}
	.header li#s-nav04 a {
		width: 33.333%;
		position: absolute;
		top: 50%;
		left: 0;
	}
	.header li#s-nav05 a {
		width: 33.333%;
		position: absolute;
		top: 50%;
		left: 33.333%;
	}
	.header li#s-nav06 a {
		width: 33.334%;
		position: absolute;
		top: 50%;
		left: 66.666%;
	}


	.header .global-nav {
		background: #fff;
		width: 100%;
		height: 52px;
		color: #e60a26;
		border-top: 1px solid #e60a26;
		border-bottom: 1px solid #e60a26;
		/* overflow: hidden; */
		position: relative;
	}
	/* .header .global-nav:after {
		content: "\F104";
		font-family: FontAwesome;
		font-weight: normal;
		position: absolute;
		top: 28%;
		left: 0.6%;
	}
	.header .global-nav:before {
		content: "\F105";
		font-family: FontAwesome;
		font-weight: normal;
		position: absolute;
		top: 28%;
		right: 0.6%;
	} */
	.header .global-nav-inner {
		width: 92%;
		margin: 0 auto;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.header .global-nav-inner {
		width: 92%;
		margin: 0 auto;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.header .global-nav-inner::-webkit-scrollbar {
		display: none;
	}
	.header .global-nav ul {
		display: table;
		max-width: 100%;
		margin: 0 auto;
	}
	.header .global-nav li {
		display: table-cell;
		white-space: nowrap;
		background: url(../include/images/nav-line-sp.png) no-repeat right center;
		background-size: auto 30%;
		-webkit-background-size: auto 30%;
		-moz-background-size: auto 30%;
		padding: 4px 3px 4px 0;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.header .global-nav li:last-child {
		background: none;
	}
	.header .global-nav li a {
		display: table-cell;
		height: 44px;
		font-size: 1.0em;
		line-height: 1.0;
		color: #e60a26;
		vertical-align: baseline;
		/* border-right: 1px solid #b8b8b8; */
		text-decoration: none;
		padding: 14px 1.2em 4px 1.0em;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	#home .header .global-nav li#nav01 a,
	.special55th .header .global-nav li#nav02 a,
	#date-index .header .global-nav li#nav03 a,
	#about-index .header .global-nav li#nav04 a,
	#teacher-index .header .global-nav li#nav05 a,
	#oa-index .header .global-nav li#nav06 a,
	#text-index .header .global-nav li#nav07 a,
	#mail-index .header .global-nav li#nav08 a {
		background: rgba(230,10,38,.9);
		color: #fff;
	}
	.header .global-nav li span {
		font-size: 0.8em;
	}
	.header .global-nav li img {
		width: auto;
		height: 20px;
		vertical-align: middle;
	}

}

@media screen and (min-width: 641px) {
	.fixed {
		position: fixed;
		top: 0;
		z-index: 99999;
	}


	.header {
		width: 100%;
	}
	.header-inner {
	}

	.header .header-top {
		width: 100%;
		background: #fff;
		height: 86px;
	}
	.header .header-top-inner {
		width: 940px;
		padding: 16px 0 13px;
		margin: 0 auto;
		position: relative;
	}
	.header .header-top h1 {
		display: block;
		background: url(../include/images/header.png) no-repeat center top;
		font-size: 0px;
		line-height: 0px;
		text-indent: -9999px;
		text-decoration: none;
		width: 544px;
		height: 57px;
	}
	.header .header-top h1 a {
		display: block;
		width: 350px;
		height: 57px;
	}
	.header .header-top #header-info {
		display: none;
	}
	.header .header-top #header-link {
		width: 146px;
		height: 44px;
		position: absolute;
		top: 21px;
		right: 0;
	}
	.header .header-top #header-link a {
		display: block;
		background: url(../include/images/bnr-kewpie-pc-header.png) no-repeat center top;
		font-size: 0px;
		line-height: 0px;
		text-indent: -9999px;
		text-decoration: none;
		width: 146px;
		height: 44px;
	}
	.header .header-top p {
		display: none;
		overflow: hidden;
		height: 0px;
	}

	.header .search-scroll-box,
	.header .search-defalt-box {
		display: none;
	}


	.header .global-nav {
		background: #e60a26 url(../include/images/nav-bg.png) repeat-x center top;
		width: 100%;
		height: 41px;
	}
	.header .global-nav-inner {
		background: url(../include/images/nav.png) no-repeat 0 0;
		width: 827px;
		margin: 0 auto;
		position: relative;
	}
	.header .global-nav ul {
	}
	.header .global-nav li a {
		display: block;
		font-size: 0px;
		line-height: 0px;
		text-indent: -9999px;
		text-decoration: none;
		height: 41px;
		-webkit-transition: 0.3s;
		transition: 0.3s;
		backface-visibility: hidden; 
		-webkit-backface-visibility: hidden;
	}
	.header .global-nav li a:hover {
		background-color: rgba(255,255,255,.4);
	}
	.header .global-nav li#nav01 a {
		width: 69px;
		/* position: absolute; */
		top: 0;
		left: 0;
	}
	#home .header .global-nav li#nav01 a {
		display: block;
		background: url(../include/images/nav-on.png) no-repeat 0 0;
		width: 69px;
		height: 41px;
		/* position: absolute; */
		top: 0;
		left: 0;
	}
	.header .global-nav li#nav09 a {
		width: 123px;
		position: absolute;
		top: 0;
		left: 69px;
	}
	#eco-index .header .global-nav li#nav09 a {
		display: block;
		background: url(../include/images/nav-on.png) no-repeat -69px 0;
		width: 123px;
		position: absolute;
		top: 0;
		left: 69px;
	}
	.header .global-nav li#nav02 a {
		width: 82px;
		position: absolute;
		top: 0;
		left: 192px;
	}
	#special-index .header .global-nav li#nav02 a {
		display: block;
		background: url(../include/images/nav-on.png) no-repeat -192px 0;
		width: 82px;
		position: absolute;
		top: 0;
		left: 192px;
	}
	.header .global-nav li#nav03 a {
		width: 79px;
		position: absolute;
		top: 0;
		left: 274px;
	}
	#date-index .header .global-nav li#nav03 a {
		display: block;
		background: url(../include/images/nav-on.png) no-repeat -274px 0;
		width: 79px;
		position: absolute;
		top: 0;
		left: 274px;
	}
	.header .global-nav li#nav04 a {
		width: 141px;
		position: absolute;
		top: 0;
		left: 353px;
	}
	#about-index .header .global-nav li#nav04 a {
		display: block;
		background: url(../include/images/nav-on.png) no-repeat -353px 0;
		width: 141px;
		position: absolute;
		top: 0;
		left: 353px;
	}
	.header .global-nav li#nav05 a {
		width: 79px;
		position: absolute;
		top: 0;
		left: 494px;
	}
	#teacher-index .header .global-nav li#nav05 a {
		display: block;
		background: url(../include/images/nav-on.png) no-repeat -494px 0;
		width: 79px;
		position: absolute;
		top: 0;
		left: 494px;
	}
	/* .header .global-nav li#nav06 a {
		width: 174px;
		position: absolute;
		top: 0;
		left: 381px;
	}
	#oa-index .header .global-nav li#nav06 a {
		display: block;
		background: url(../include/images/nav-on.png) no-repeat -510px 0;
		width: 174px;
		position: absolute;
		top: 0;
		left: 381px;
	} */
	.header .global-nav li#nav07 a {
		width: 135px;
		position: absolute;
		top: 0;
		left: 573px;
	}
	#text-index .header .global-nav li#nav07 a {
		display: block;
		background: url(../include/images/nav-on.png) no-repeat -573px 0;
		width: 135px;
		position: absolute;
		top: 0;
		left: 573px;
	}
	.header .global-nav li#nav08 a {
		width: 119px;
		position: absolute;
		top: 0;
		left: 708px;
	}
	#mail-index .header .global-nav li#nav08 a {
		display: block;
		background: url(../include/images/nav-on.png) no-repeat -708px 0;
		width: 119px;
		position: absolute;
		top: 0;
		left: 708px;
	}
}