/* body */
body { background:#000; font-family: TBゴシック SL, TBGothic SL, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;}

/* header */
header { width:100%; background:#000;}
header nav {padding: 40px 40px 36px 40px; font-family: Montserrat; font-weight: 700; overflow:hidden;}
header nav .logo {float:left;}
header nav ul {float:right;}
header nav ul li {display: inline-block; margin: 0 0 0 20px;}
header nav ul li a {text-decoration: none; font-size: 14px; line-height:180%; color: #fff;}
header nav ul li a:before {font-family: 'Ionicons'; margin-right:6px; content: "\f125";}
@media all and (min-width: 1025px) {
header { border-bottom:thin solid #999; position:fixed; z-index:9999;}
header nav .logo a, header nav ul li a { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
header nav .logo a:hover, header nav ul li a:hover { opacity:0.4;}
}
@media all and (max-width:1024px) {
header nav { width:90%; padding: 40px 0 20px 0; margin:auto;}
header nav .logo { width:100%; margin-bottom:20px;}
header nav ul { width:100%; float:left; padding:6px 0 6px 0; border-top: solid thin #666; border-bottom: solid thin #999;}
header nav ul li {margin: 0 20px 0 0;}
}

/* main */
main {display: block; background:#eee; padding-bottom:40px;}
main section { width:100%; padding:140px 0px 60px 0px; margin:auto; overflow:hidden;}
main h2 { font-size:24px; margin-bottom:40px; font-family: Montserrat; font-weight: 700;}
main h2 span { font-size:18px; font-family: TBゴシック M, TBGothic M;}
main #visual { background:#000; width:100%; padding:40px 0 20px 0; margin-bottom:40px;}
main #visual .area { width:100%; margin:auto;}
main #visual img { width:100%;}
main #introduction ul li { float:left; width:100%; margin-bottom:40px;}
main #introduction ul li img { float:left; width:360px;}
main #introduction ul li div { float:right; width:720px;}
main #introduction ul li div h3 { font-size:24px; line-height:160%; margin-bottom:19px; font-family: TBゴシック M, TBGothic M;}
main #introduction ul li div p { font-size:16px; line-height:160%;}
main #introduction .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin-top:50px; } 
main #introduction .embed-container iframe, main #introduction .embed-container object, main #introduction .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
main #artwork ul li a { float:left; width:260px; margin-right:40px; margin-bottom:40px; display:block; text-decoration:none;}
main #artwork ul li a img { width:260px; margin-bottom:20px;}
main #artwork ul li a div img { float:left; width:90px;}
main #artwork ul li a div h3, main #artwork ul li a div p { float:left; margin-left:20px; width:120px; font-family: Montserrat; color:#000;}
main #artwork ul li a div h3 { font-size:18px; margin-bottom:64px; font-weight: 700;}
main #artwork ul li a div h3:before {font-family: 'Ionicons'; margin-right:6px; content: "\f125";}
main #artwork ul li a div p { font-size:12px; line-height:180%;}
main #artwork ul li a div p span { display:block;}
main #artwork ul li:nth-child(4) a, main #artwork ul li:nth-child(8) a { margin-right:0px;}
main #artwork ul li:nth-child(n+4) a div h3, main #artwork ul li:nth-child(n+4) a div p { margin-left:0px;}
main #artwork ul li:nth-child(n+4) a div h3 { width:100%; margin-bottom:10px;}
main #artwork p { display: inline-block; font-size: 14px; line-height: 160%;}
main #schedule table { width:100%;}
main #schedule table td { border-collapse: separate; border-spacing: 0; display:table; table-layout:fixed; font-size:20px; line-height:200%;}
main #schedule table td.left { float:left;}
main #schedule table td.right { float:left;}
main #schedule table td a { color:#000;}
main #seminar ul { float:left; margin-bottom:60px;}
main #seminar ul li { float:left; display:block;}
main #seminar ul li strong { border-top:thin solid #999; border-bottom:thin solid #999; box-sizing:border-box; padding:20px 0 20px 0; margin-bottom:24px; text-align:center; width:100%; display:block; font-size:18px; font-family: TBゴシック M, TBGothic M;}
main #seminar ul li span.deadline { padding:0 0 0 20px; text-align:center; width:100%; font-size:14px; font-family: TBゴシック M, TBGothic M; color:#dc0a1e;}
main #seminar ul li div.lecturer { width:180px; float:left;}
main #seminar ul li div.lecturer img { width:180px;}
main #seminar ul li div.lecturer p { float: left; font-size:19px; margin-bottom:10px; line-height:140%; font-family: TBゴシック M, TBGothic M;}
main #seminar ul li div.lecturer p span { margin-right:10px; font-size:15px;}
main #seminar ul li div.profile { float: left; width:900px; margin-left:80px; font-size:16px; line-height:180%;}
main #seminar ul li div.profile span { display:block; font-size:20px; margin-bottom:10px; font-family: Montserrat; font-weight: 700;}
main #seminar ul li div.profile a { display:block; color:#000; margin-top:8px;}
/* main #seminar ul { float:left; margin-bottom:60px;}
main #seminar ul li { float:left; display:block;}
main #seminar ul li strong { border-top:thin solid #999; border-bottom:thin solid #999; box-sizing:border-box; padding:20px 0 20px 0; margin-bottom:24px; text-align:center; width:100%; display:block; font-size:18px; font-family: TBゴシック M, TBGothic M;}
main #seminar ul li span.deadline { padding:0px 0 20px 0; text-align:center; width:100%; display:block; font-size:14px; font-family: TBゴシック M, TBGothic M; color:#dc0a1e;}
main #seminar ul li h3 { font-size:18px; line-height:160%; margin-bottom:20px; font-family: TBゴシック M, TBGothic M;}
main #seminar ul li div { float:left; display:block;}
main #seminar ul li div.lecturer { height:200px;}
main #seminar ul li div.lecturer img, main #seminar ul li div.lecturer figure { float:left;}
main #seminar ul li div.lecturer figcaption { font-size:12px; line-height:180%;}
main #seminar ul li div.lecturer p { float: right; font-size:19px; margin-left:16px; line-height:140%; font-family: TBゴシック M, TBGothic M;}
main #seminar ul li div.lecturer p span { display:block; font-size:14px; margin-bottom:6px;}
main #seminar ul li div.lecturer p em { display:block; font-size:12px;}
main #seminar ul li div.profile { font-size:13px; line-height:160%;}
main #seminar ul li div.profile span { display:block; font-size:16px; margin-bottom:6px; font-family: Montserrat; font-weight: 700;}
main #seminar ul li div.profile a { display:block; color:#000; margin-top:8px;} */
main #seminar table { width:100%; margin-bottom:60px;}
main #seminar table td { border-collapse: separate; border-spacing: 0; display:table; table-layout:fixed; font-size:18px; line-height:200%;}
main #seminar table td.left { float:left;}
main #seminar table td.right { float:left;}
main #seminar table td.title { font-size:18px; margin-bottom:10px; font-family: TBゴシック M, TBGothic M;}
main #seminar table td.note { font-size:13px; line-height:180%; margin-top:12px;}
main #seminar table td a { color:#000;}
main #seminar table td .color { color:#dc0a1e;}
main #seminar .btn { width:100%; text-align:center;}
main #seminar .btn a {padding:30px 40px 30px 40px; background:#dc0a1e; color:#fff; text-decoration:none; font-size:16px; font-family: TBゴシック M, TBGothic M;}
main #seminar .btn a:before {font-family: 'Ionicons'; margin-right:8px; content: "\f125";}
main #thanks ul { float:left; margin-bottom:60px;}
main #thanks ul li { float:left; display:block;}
main #thanks ul li a { display:block; font-size:15px; line-height:200%; color:#000;}
@media all and (min-width:1281px) {
main section { width:1160px;}
main #visual .area { width:1280px;}
main #introduction ul li div h3 { margin-bottom:23px;}
main #artwork ul li a div img { width:120px;}
main #schedule table td.left { width:120px;}
main #schedule table td.right { width:1040px;}
/* main #seminar ul li { width:320px;}
main #seminar ul li:nth-child(1), main #seminar ul li:nth-child(2) { margin-right:100px;}
main #seminar ul li div.lecturer img, main #seminar ul li div.lecturer figure { width:160px;}
main #seminar ul li div.lecturer p { width:140px;} */
main #seminar table td.left { width:120px;}
main #seminar table td.right { width:1040px;}
main #seminar table td.title { width:100%;}
main #seminar table td.note { width:100%;}
main #thanks ul li { width:260px; margin-right:40px;}
main #thanks ul li:nth-child(4) { margin-right:0px;}
main #thanks ul li a img { width:260px;}
}
@media screen and (min-width: 1024px) and (max-width: 1280px) {
main section { width:940px;}
main #introduction ul li img { width:300px;}
main #introduction ul li div { float:right; width:600px;}
main #introduction ul li div h3 { font-size:22px;}
main #introduction ul li div p { font-size:14px;}
main #introduction .embed-container { margin-top:8px; } 
main #artwork ul li a { width:220px; margin-right:20px;}
main #artwork ul li a img { width:220px;}
main #artwork ul li a div h3 { margin-bottom:36px;}
main #artwork ul li a div h3, main #artwork ul li a div p { margin-left:10px;}
main #artwork ul li:nth-child(4) a, main #artwork ul li:nth-child(8) a { margin-right:0px;}
main #schedule table td.left { width:120px;}
main #schedule table td.right { width:820px;}
main #seminar ul li div.profile { width:700px; margin-left:60px; font-size:14px; line-height:180%;}
main #seminar ul li div.profile span { font-size:18px;}
/* main #seminar ul li { width:280px;}
main #seminar ul li:nth-child(1), main #seminar ul li:nth-child(2) { margin-right:50px;}
main #seminar ul li div.lecturer { height:160px;}
main #seminar ul li div.lecturer img, main #seminar ul li div.lecturer figure { width:120px;}
main #seminar ul li div.lecturer p { width:140px;} */
main #seminar table td.left { width:120px;}
main #seminar table td.right { width:820px;}
main #seminar table td.title { width:100%;}
main #seminar table td.note { width:100%;}
main #thanks ul li { width:220px; margin-right:20px;}
main #thanks ul li:nth-child(4) { margin-right:0px;}
main #thanks ul li a img { width:220px;}
}
@media screen and (max-width: 1023px) {
main section { width:90%; padding:20px 0px 20px 0px; margin:auto; overflow:hidden;}
main #visual { padding:0;}
main #introduction ul li img { width:100%;}
main #introduction ul li div { float:left; width:100%; margin-top:20px;}
main #introduction ul li div h3 { font-size:18px;}
main #introduction ul li div h3 br { display:none;}
main #introduction ul li div p { font-size:12px;}
main #introduction .embed-container { margin-top:10px; } 
main #artwork ul li a { width:100%;}
main #artwork ul li a img { width:100%;}
main #artwork ul li a div img { width:120px;}
main #artwork ul li a div h3 { margin-bottom:10px;}
main #artwork ul li a div h3, main #artwork ul li a div p {margin-left:0px; width:100%;}
main #artwork ul li:nth-child(1) a, main #artwork ul li:nth-child(2) a { margin-right:0px;}
main #artwork ul li:nth-child(n+4) a { margin-right:0px;}
main #artwork ul li:nth-child(7) a { margin-right:0px;}
main #schedule table td { font-size:16px; line-height:160%;}
main #schedule table td.left { width:100%;}
main #schedule table td.right { width:100%; margin-bottom:16px;}
main #seminar { margin-bottom:60px;}
main #seminar ul li span.deadline { display: block; padding:10px 0 0 0; font-size:12px;}
main #seminar ul li div.profile { width:100%; margin:20px 0 0 0; font-size:14px; line-height:180%;}
main #seminar ul li div.profile span { font-size:18px;}
/* main #seminar ul { margin-bottom:0px;}
main #seminar ul li { width:100%; margin-bottom:40px;}
main #seminar ul li div.lecturer { height:150px;}
main #seminar ul li div.lecturer img, main #seminar ul li div.lecturer figure { float:left; width:120px;}
main #seminar ul li div.lecturer p { float: left; margin-left:10px;} */
main #seminar table { margin-bottom:30px;}
main #seminar table td { font-size:16px; line-height:160%;}
main #seminar table td.left { width:100%;}
main #seminar table td.right { width:100%; margin-bottom:16px;}
main #seminar table td.title { width:100%;}
main #seminar table td.note { width:100%; font-size:14px;}
main #seminar table td.note br { display:none;}
main #seminar .btn { width:90%; text-align:center;}
main #seminar .btn a { width:100%; padding:20px 40px 30px 40px; font-size:12px;}
main #thanks ul li { width:100%; margin-bottom:40px;}
main #thanks ul li:nth-child(4) { margin-bottom:0px;}
main #thanks ul li a img { width:100%;}
}
@media all and (min-width: 1025px) {
main { padding-top:100px;}
main #artwork ul li a, main #schedule table td a, main #seminar .btn a, main #seminar ul li div.profile a, main #thanks ul li a { -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s;-webkit-backface-visibility:hidden; backface-visibility:hidden;}
main #artwork ul li a:hover, main #schedule table td a:hover, main #seminar .btn a:hover, main #seminar ul li div.profile a:hover, main #thanks ul li a:hover { opacity:0.4;}
}
@media all and (min-width:768px) {
.pc { display: block !important; }
.sp { display: none !important; }
}
@media all and (max-width:767px) {
.pc { display: none !important; }
.sp { display: block !important; }
main #visual {margin-top:-20px;}
}

/* footer */
footer { width:100%;}
footer nav {padding: 40px; font-family: Montserrat; font-weight: 700; overflow:hidden;}
footer nav .logo {float:left;}
footer nav .logo p { display:inline-block; font-size:11px; font-weight: normal; margin-left:30px; vertical-align: text-top; color:#fff;}
footer nav ul {float:right;}
footer nav ul li {display: inline-block; margin: 0 0 0 20px;}
footer nav ul li a {text-decoration: none; font-size: 14px; line-height:180%; color: #fff;}
footer nav ul li a img { width:32px;}
@media all and (min-width: 1025px) {
footer nav .logo a, footer nav ul li a { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
footer nav .logo a:hover, footer nav ul li a:hover { opacity:0.4;}
}
@media all and (max-width:1024px) {
footer nav { width:90%; padding: 40px 0 20px 0; margin:auto;}
footer nav .logo { width:100%; margin-bottom:20px;}
footer nav .logo p { display:block; margin-top:10px; margin-left:0px;}
footer nav ul { width:100%; float:left;}
footer nav ul li {margin: 0 14px 0 0;}
}

/* ハイライト */
::selection { background-color: #999; color: #fff;}
::-moz-selection { 	background: #999; color: #fff;}


.logo a img{
    width: 15%;
}