@charset "utf-8";
/* Reset sanitize.css
----------------------------------------------------------------------------------------------*/
pre,textarea{overflow:auto}
[hidden],audio:not([controls]),template{display:none}
details,main,summary{display:block}
input[type=number]{width:auto}
input[type=search]{-webkit-appearance:textfield}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
progress{display:inline-block}
textarea{resize:vertical}
[unselectable]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
*,::after,::before{box-sizing:inherit;border-style:solid;border-width:0}
*{font-size:inherit;line-height:inherit;margin:0;padding:0;font-weight:normal;}
::after,::before{text-decoration:inherit;vertical-align:inherit}
:root{-ms-overflow-style:-ms-autohiding-scrollbar;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;box-sizing:border-box;cursor:default;font:16px/1.5 sans-serif;text-rendering:optimizeLegibility}
a{text-decoration:none}
audio,canvas,iframe,img,svg,video{vertical-align:middle}
button,input,select,textarea{background-color:transparent;color:inherit;font-family:inherit;font-style:inherit;font-weight:inherit;min-height:1.5em}
code,kbd,pre,samp{font-family:monospace,monospace}
ol,ul{list-style:none; margin:0;}
select{-moz-appearance:none;-webkit-appearance:none}
select::-ms-expand{display:none}
select::-ms-value{color:currentColor}
table{border-collapse:collapse;border-spacing:0}
::-moz-selection{background-color:#B3D4FC;text-shadow:none}
::selection{background-color:#B3D4FC;text-shadow:none}
@media screen{[hidden~=screen]{display:inherit}
[hidden~=screen]:not(:active):not(:focus):not(:target){clip:rect(0 0 0 0)!important;position:absolute!important}
}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;}
img { border-style:none;}
a img { border-style:none;}
/* Common
----------------------------------------------------------------------------------------------*/
/* --------------------------------------
Font base　14px
-----------------------------------------
10px 	72%			11px 	79%			12px 	86%			13px 	93%
14px 	100%		15px 	108%		16px 	115%		17px 	122%
18px 	129%		19px 	136%		20px 	143%		21px 	150%
22px 	158%		23px 	165%		24px 	172%		25px 	179%
26px 	186%
*/

/* imgoverを指マークに
==========================================================*/
.imgover { cursor:pointer; }
/* Base Setting
==========================================================*/
body { font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic Pro W3", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	  margin:0; padding: 0; letter-spacing:0.1px; color:#333;}
p { margin: 0;} 
a { text-decoration: none;color: #3194c1; }
a:hover{text-decoration: underline;}
a { outline:none;}
img { -ms-interpolation-mode: bicubic; } /*for IE7-8*/
:focus { outline: 0; }
/*Margin
==========================================================*/
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt50 { margin-top: 50px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb50 { margin-bottom: 50px; }
.mr10 { margin-right: 10px; }
.mr20 { margin-right: 20px; }
.mr30 { margin-right: 30px; }
.ml10 { margin-left: 10px; }
.ml20 { margin-left: 20px; }
.ml30 { margin-left: 30px; }
/* float reset
==========================================================*/
.clear { margin:0; padding:0; clear:both; }	
/*clearfix*/
* html .clearfix { zoom: 1; }
*+html .clearfix { zoom: 1; }
.clearfix:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; }
/*clearfix*/

/*common
========================================================*/
/*画像全幅*/
img.w-max{ width:100%; height:auto;}
.w-max img{ width:100%; height:auto;}
/*位置*/
.center { text-align:center;}
.right { text-align:right;}
/*list*/
.list01 li{ list-style-type:disc; list-style-position: outside; margin-left: 20px; }
/*コンテンツ*/
.inner { width:90%; margin-right: 5%; margin-left: 5%; box-sizing: border-box; }
section { position: relative; }
/*文字*/
.small { font-size: 0.86em !important;}
.color01 { color: #c91c0d;}
.attention {font-size: 1em !important;}
strong { font-weight: bold;}
/*ボタン*/
.btn a{
background : -webkit-linear-gradient(top, #69b1d2,#3194c1);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#69b1d2, endcolorstr=#3194c1))";
zoom: 1;
-pie-background : linear-gradient(to bottom, #69b1d2, #3194c1);
background : linear-gradient(to bottom, #69b1d2, #3194c1);
border-radius:3px;
margin-top: 20px;color: #fff;padding: 10px; text-decoration:none; display:inline-block;font-size: 1.0em; position: relative; }
.btn a:before {content: url(../images/icn-arrow.png); margin-right: 5px;}
.btn a:hover{
	background : -webkit-linear-gradient(top,#3194c1, #69b1d2);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#3194c1, endcolorstr=#69b1d2))";
zoom: 1;
-pie-background : linear-gradient(to bottom,#3194c1, #69b1d2);
background : linear-gradient(to bottom,#3194c1, #69b1d2); position: relative; }

@media screen and (min-width:769px){ .sponly{ display:none!important;}}
@media screen and (max-width:768px){ .pconly{ display:none!important;}}

/*ヘッダー
========================================================*/
header { padding-bottom: 20px;background:url(../images/bk-img.png) repeat;}
#head-inner { width: 1000px; margin: 0 auto; overflow:hidden;position: relative;}
#head-inner h1 { text-align: center;}
#head-inner nav{ margin: 20px 0 0 0;}
#head-inner li { float: left; overflow: hidden; text-indent: 100%; white-space: nowrap;}
#head-inner li a { display:block; height: 35px; }
#head-inner li#n-home a { background:url(../images/nav.png) no-repeat 0 0; width: 72px; }
#head-inner li#n-home a:hover { background:url(../images/nav.png) no-repeat 0 -35px; }
#head-inner li#n-about a { background:url(../images/nav.png) no-repeat -72px 0; width:185px; }
#head-inner li#n-about a:hover { background:url(../images/nav.png) no-repeat -72px -35px; }
#head-inner li#n-school a { background:url(../images/nav.png) no-repeat -257px 0; width: 119px; }
#head-inner li#n-school a:hover { background:url(../images/nav.png) no-repeat -257px -35px; }
#head-inner li#n-profile a { background:url(../images/nav.png) no-repeat -376px 0; width: 168px; }
#head-inner li#n-profile a:hover { background:url(../images/nav.png) no-repeat -376px -35px; }
#head-inner li#n-work a { background:url(../images/nav.png) no-repeat -554px 0; width: 83px; }
#head-inner li#n-work a:hover { background:url(../images/nav.png) no-repeat -554px -35px;}
#head-inner li#n-original a { background:url(../images/nav.png) no-repeat -637px 0; width: 185px; }
#head-inner li#n-original a:hover { background:url(../images/nav.png) no-repeat -637px -35px;}
#head-inner li#n-event a { background:url(../images/nav.png) no-repeat -822px 0; width: 96px; }
#head-inner li#n-event a:hover { background:url(../images/nav.png) no-repeat -822px -35px; }
#head-inner li#n-link a { background:url(../images/nav.png) no-repeat -918px 0; width: 92px; }
#head-inner li#n-link a:hover { background:url(../images/nav.png) no-repeat -918px -35px; }

#head-inner li#n-home a.hit { background:url(../images/nav.png) no-repeat 0 -35px; }
#head-inner li#n-about a.hit { background:url(../images/nav.png) no-repeat -72px -35px; }
#head-inner li#n-school a.hit { background:url(../images/nav.png) no-repeat -257px -35px; }
#head-inner li#n-profile a.hit { background:url(../images/nav.png) no-repeat -376px -35px; }
#head-inner li#n-work a.hit { background:url(../images/nav.png) no-repeat -554px -35px;}
#head-inner li#n-original a.hit { background:url(../images/nav.png) no-repeat -637px -35px;}
#head-inner li#n-event a.hit { background:url(../images/nav.png) no-repeat -822px -35px; }
#head-inner li#n-link a.hit { background:url(../images/nav.png) no-repeat -918px -35px; }
@media screen and (max-width: 960px) {
#head-inner { width: 96%;  margin: 0 2%;}
#head-inner h1 { width: 80%; margin: 0 auto;}
#head-inner h1 img { width: 100%;}
}
@media screen and (max-width: 640px) {
#head-inner h1 { width: 95%;}
}

/*枠
========================================================*/
#wrapper{ width: 1000px; margin:0 auto; position: relative; overflow:hidden}
@media screen and (max-width: 960px) {
#wrapper { width: 96%;  margin: 0 2%;}
}


/*本文共通
========================================================*/
#pagetitle {background:url(../images/bk02.png) repeat-y right; background-color: #f2f2f2; padding: 20px 0; margin: 30px 0;}
#pagetitle div { width: 1000px; margin:0 auto; position: relative; font-size: 1.36em;}
#pagetitle div span{ margin-left: 20px;font-size:1.0em!important; color:#69b1d2; font-family: 'Cookie', cursive;}
.title { text-align: center; font-size:1.29em; line-height: 1; margin-bottom:20px; padding-top: 10px}
.title span{ text-align: center; font-size:1.2em!important; color:#69b1d2; font-family: 'Cookie', cursive; display:block;}
.title02 { margin-top: 20px; font-weight: bold; font-size: 1.1; }
.title02:before { content: "●"; color:#69b1d2;}
section {}
section .inner { padding: 25px; overflow:hidden}
.inner-box {border:1px solid #e5e5e5; padding: 20px; margin-top: 30px;}
.inner-box h4 { font-weight: bold; margin-bottom: 10px; }
@media screen and (max-width: 960px) {
#pagetitle div { width: 96%; margin: 0 2%;}
}
@media screen and (max-width: 640px) {
#pagetitle { background-size: 15%; padding: 10px 0;margin: 10px 0 20px; line-height: 1.2;}
#pagetitle div { font-size: 1.2em;}
#pagetitle div span{ display:block;}
#pagetitle div span{ margin-left: 10px;font-size:1.0em!important;}
.title { font-size: 1.1em;}
}

/*フッター*/
.pagetop {text-align: center; margin-top: 50px;}
footer { background:url(../images/bk01.png) repeat-y left; background-color:#f2f2f2; font-size: 0.86em;}
#footer-inner { width: 1000px; margin: 0 auto; padding: 20px 0 0;position: relative; overflow:hidden}
#footer-inner h2 { text-align:right; color: #666;}
#footer-inner p { text-align:right; color: #666; margin-bottom: 10px; font-size: 0.86em;}
#footer-inner ul { text-align:right; }
#footer-inner li { display:inline-block;}
#footer-inner li:after { content:" | "; color: #666; }
#footer-inner li a { color: #666;}
#footer-inner li:last-child { padding-right: 0;}
#footer-inner li:last-child:after { content:none}

#copyright {width: 1000px; margin: 0 auto; text-align: right; padding: 10px 0; color: #666; font-size: 0.79em;}
@media screen and (max-width: 960px) {
#footer-inner  { width: 73%; margin-left: 25%; margin-right: 2%; font-size: 0.79em; }
footer { background-size: 23%}
#copyright { width: 96%; margin: 0 2%;}
}
@media screen and (max-width: 640px) {
.pagetop {margin-top: 30px;}
#copyright { width: 70%; margin: 0 2% 0 28%;}
}