@charset "UTF-8";
/*------------------------------------------------------------------------------------------------------
*
* common PC
*
------------------------------------------------------------------------------------------------------*/
html {
  background: #000000;
}

body {
  font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',Osaka,sans-serif;
  font-size: 13px;
  line-height: 1.8em;
  color: #161616;
}

.sp-only {
display:none;
}

.center {
  margin: 0 auto;
  width: 1000px;
  min-width: 1000px;
}

.section {
  position: relative;
  background: #FFFFFF;
  width: 100%;
  padding: 80px 0;
  min-width: 1000px;
}
.section h2 {
  text-align: center;
  color:#000;
  font-weight:bold;
  letter-spacing:5px;
  font-size:35px;
  line-height:35px;
  margin-bottom: 35px;
}
.section h2 span {
  font-size:25px;
}
.section h2 span.eng {
  font-size:30px;
  display:block;
  color:#fff;
  margin-top:10px;
}

.left {
  float: left;
}

.right {
  float: right;
}

img {
  vertical-align: bottom;
}

p {
  /*text-align: justify;*/
}

a {
  text-decoration: underline;
  color: #161616 !important;
}

a:hover {
  text-decoration: none;
}

.h {
  display: none;
}

.textC {
text-align:center;
}

.reserv_btn {
margin:30px auto;
width:200px;
padding:10px 20px;
text-align:center;
background-color:#1fc9d6;
color:#fff;
font-size:120%;
font-weight:bold;
letter-spacing:0.5em;
}
.reserv_btn a {color: #fff !important;}
.reserv_btn a:link {color: #fff;}
.reserv_btn a:visited {color:#fff;}
.reserv_btn a:active  {color:#fff;}
.reserv_btn a:hover   {color:#fff;}

.datebox {
background:#fff;
margin:30px auto;
padding:20px;
font-size:26px;
line-height:1.5;
font-weight:bold;
}
.datebox dl {
display:table
}
.datebox dl dt {
width:6em;
display:table-cell;
vertical-align:middle;
}
.datebox dl dd {
margin-right:8em;
font-size:30px;
display:table-cell;
vertical-align:middle;
}
.datebox dl dd span.year,
.datebox dl dd span.small {
font-size:80%;
}
.eventBlock .event-item {
  width: 300px;
  margin-right: 50px;
  margin-bottom:50px;
  float: left;
}
.eventBlock .event-item:nth-child(3n) {
  margin-right: 0;
}
.eventBlock .event-item .thum {
  overflow:hidden;
  height:200px;
  width:100%;
  position: relative;
}
.eventBlock .event-item .thum img {
  width:auto;
  max-width:100%;
  display:block;
  margin:0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.eventBlock .event-item .thum div.ytb {
  margin: 0 auto;
  width: 100%;
  position:relative;
  padding-top:67%;
}
.eventBlock .event-item .thum iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
.eventBlock .event-item h4 {
  text-align:center;
}
.eventBlock .event-item h4 span {
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  background: url("/opencampus/img/yellowLine.gif");
  background-repeat: repeat-x;
  background-position: bottom;
  margin: 15px 0;
}
.eventBlock .event-item p {
  font-size:14px;
}
.event-sch {
margin:50px auto;
width:800px;
min-width:800px;
}
.event-sch p {
font-size:15px;
}
.event-sch p span.small {
font-size:90%;
}
/*========================================================================================================================
*
* UpBtn
*
========================================================================================================================*/
#UpBtn {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 1000;
  display: none;
}

/*========================================================================================================================
*
* MENU
*
========================================================================================================================*/
#Menu {
  background: #fff;
  width: 100%;
  padding: 0;
}
#Menu #header-inner {
  margin: 12px auto;
  overflow: hidden;
}
#Menu #logo {
  display: block;
  float: left;
}
#Menu #sp-menu {
  transition: all .25s;
  position: fixed;
  background: #f63962;
  top: 10px;
  /*right: -220px;
  width: 220px;*/
  right: -270px;
  width: 270px;
  height: 100%;
  margin-top: 5px;
  padding: 12px 14px 12px 22px;
  box-sizing: border-box;
  display: block;
  z-index: 1100;
}
#Menu #sp-menu.open {
  right: 0;
}
#Menu #sp-menu #sp-btn-menu {
  position: absolute;
  top: 0;
  left: -93px;
}
#Menu #sp-menu #btn-menu-close {
  position: absolute;
  top: 4px;
  right: 0px;
  z-index: 1500;
  padding: 8px;
}
#Menu #sp-menu #sp-menu-inner {
  padding-right: 6px;
}
#Menu #sp-menu #sp-menu-inner #sp-menu-list > li {
  border-bottom: solid 1px #F65673;
}
#Menu #sp-menu #sp-menu-inner #sp-menu-list > li.last {
  border-bottom: none;
}
#Menu #sp-menu #sp-menu-inner #sp-menu-list a {
  text-decoration: none;
  color: #FFFFFF !important;
  font-weight: bold;
  font-size: 12px;
  display: block;
  height: 40px;
  line-height: 40px;
}
#Menu #sp-menu #sp-menu-inner #sp-menu-btns {
  padding-top: 20px;
}
#Menu #sp-menu #sp-menu-inner #sp-menu-btns > li {
  padding-bottom: 10px;
}
#Menu #sp-menu #sp-menu-inner #sp-menu-btns .materialBtn {
  margin-top: -10px;
  margin-bottom: 5px;
}
#Menu #sp-menu #sp-menu-inner #sp-menu-btns .twitterBtn {
  margin-right: 10px;
}

/*========================================================================================================================
*
* Header
*
========================================================================================================================*/
#Header {
  width: 100%;
  /*background:#e9e9e9;*/
  position:relative;
  top: 0;
  min-width: 1000px;
  z-index: 40;
  /*padding: 90px 0;*/
padding: 200px 0 0;
  background: url("/opencampus/img/mainImage.jpg") top center;
width: 100%;
height: 446px;
z-index: 20;
position: relative;
color:#fff;

}
#Header .center .topBlock h1 {
  text-align:center;
}
#Header .center .topBlock h2 {
  text-align:center;
  font-weight:bold;
  font-size:45px;
  letter-spacing:0.2em;
  margin:20px 0 25px;
}
#Header .center .topBlock h3 {
  text-align:center;
  font-weight:bold;
  font-size:20px;
  letter-spacing:0.2em;
  margin:20px 0;
}
#Header .center .topBlock .typelist {
margin:0 auto;
width:460px
}
#Header .center .topBlock .typelist li {
width:140px;
height:140px;
float:left;
margin:0 20px 10px 0;
border-radius:50%;
text-align:center;
font-size:17px;
font-weight:bold;
}
#Header .center .topBlock .typelist li:nth-child(3n) {
margin-right:0;
}
#Header .center .topBlock .typelist li.experience {
background-color:#1fc9d6;
}
#Header .center .topBlock .typelist li.tour {
background-color:#e84f2c;
}
#Header .center .topBlock .typelist li.spo {
background-color:#dbb80b;
}
#Header .center .topBlock .typelist li a {
display:table;
width:140px;
height:140px;
color:#fff !important;
}
#Header .center .topBlock .typelist li a:link   {color:#fff;text-decoration:underline;}
#Header .center .topBlock .typelist li a:visited{color:#fff;text-decoration:underline;}
#Header .center .topBlock .typelist li a:active {color:#fff;text-decoration:none;}
#Header .center .topBlock .typelist li a:hover  {color:#fff;text-decoration:none;}
#Header .center .topBlock .typelist li a span {
display:table-cell;
width:100%;
vertical-align:middle;
}
/*========================================================================================================================
*
* ScheduleSection
*
========================================================================================================================*/
#ScheduleSection {
  background: #d0f383;
}
#ScheduleSection h2 {
  color:#000;
}
#ScheduleSection p.lead {
  margin:0 0 20px;
  background:#fff;
  padding:10px;
}
#ScheduleSection p.lead strong {
font-weight:bold;
}
#ScheduleSection div.ocmenu {
  margin:0 0 20px;
  background:#fff;
  padding:10px;
}
#ScheduleSection div.ocmenu ol li {
  list-style-type:decimal;
  margin:0 0 0 20px;
}
#ScheduleSection div.caution {
  background:#fff;
  padding:10px;
  margin:20px 0 0 0;
  text-align:center;
}
#ScheduleSection div.caution h3 {
  font-size:22px;
  font-weight:bold;
  margin:20px 0 10px;
}
#ScheduleSection #schedule-box {
background:#fff;
padding:20px 20px 20px 0; /*padding:20px;*/ /* 2018.09.12 modified */
}
#ScheduleSection #schedule-box ul li {
float:left;
width:120px;
height:120px;
margin:10px 0 10px 20px; /* margin:10px 20px 10px 0; */  /* 2018.09.12 modified */
text-align:center;
font-size:18px;
position:relative;
background: #1fc9d6;
}
/*#ScheduleSection #schedule-box ul li:nth-child(7n) {
margin-right:0;
}*/ /* 2018.09.12 modified */
#ScheduleSection #schedule-box ul li.tour {
background:#e84f2c;
}
#ScheduleSection #schedule-box ul li.spo {
background:#dbb80b;
}
#ScheduleSection #schedule-box ul li a {
display:block;
}
#ScheduleSection #schedule-box ul li a:link {text-decoration:none;}
#ScheduleSection #schedule-box ul li a:visited {text-decoration:none;}
#ScheduleSection #schedule-box ul li a:active  {background:#53cad3;}
#ScheduleSection #schedule-box ul li a:hover   {background:#53cad3;}
#ScheduleSection #schedule-box ul li.tour a:active  {background:#bc745e;}
#ScheduleSection #schedule-box ul li.tour a:hover   {background:#bc745e;}
#ScheduleSection #schedule-box ul li.spo a:active  {background:#c5a508;}
#ScheduleSection #schedule-box ul li.spo a:hover   {background:#c5a508;}

#ScheduleSection #schedule-box ul li span.inn {
color:#fff;
display: table-cell;
vertical-align: middle;
width:116px;
height:116px;
padding:2px;
}
#ScheduleSection #schedule-box ul li a span.inn span.date {
text-decoration:underline;
}
#ScheduleSection #schedule-box ul li span.week {
display: block;
font-size: 12px;
}
#ScheduleSection #schedule-box ul li span.other {
display:block;
font-size:12px;
line-height:1.2;
bottom:5px;
left:0;
right:0;
margin:auto;
width:80%;
text-align:left;
}

#ScheduleSection #schedule-box ul li span.close {
background:rgba(31,201,214,0.7);
display:block;
font-size:12px;
color:#fff;
line-height:120px;
width:120px;
height:120px;
position:absolute;
bottom:0;
left:0;
right:0;
margin:auto;
text-align:center;
font-weight:bold;
}
#ScheduleSection #schedule-box ul li.tour span.close {
background:rgba(232,79,44,0.7);
}
#ScheduleSection #schedule-box ul li.spo span.close {
background:rgba(219,184,11,0.7);
}

/*========================================================================================================================
*
* ExperienceSection
*
========================================================================================================================*/
#ExperienceSection {
  padding-bottom: 50px;
  background:#95e1e6;
}
#ExperienceSection .datebox dl dd .time {
  color:#075f63;
}
#ExperienceSection h3 {
font-size:28px;
margin:50px 0 30px;
text-align:center;
font-weight:bold;
color:#075f63;
letter-spacing:0.2em;
}
#ExperienceSection .event-sch h3 {
font-size:25px;
color:#000;
}
#ExperienceSection .event-sch h3 span {
color:#1fc9d6;
font-size:120%;
}
#ExperienceSection table{
background:#FFFFFF;
width:100%;
}
#ExperienceSection table th,
#ExperienceSection table td{
border:1px #95e1e6 solid;
padding:10px;
}
#ExperienceSection table td{
width:40%;
}
#ExperienceSection table td.ba,
#ExperienceSection table td.wfs,
#ExperienceSection table td.child,
#ExperienceSection table td.kss,
#ExperienceSection table td.ns{
width:2%;
}
#ExperienceSection table td.ba{background:#5dc3dd;}
#ExperienceSection table td.wfs{background:#f8b981;}
#ExperienceSection table td.child{background:#8bc383;}
#ExperienceSection table td.kss{background:#c6a9cc;}
#ExperienceSection table td.ns{background:#ffabac;}
#ExperienceSection table td.gakka{
width:18%;
font-weight:bold;
}
#ExperienceSection table td.gakka span.small{
font-size:10px;
font-weight:normal;
}
#ExperienceSection table thead th{
text-align:center;
}
#ExperienceSection table thead th.gakka{
background:#95e1e6;
}
#ExperienceSection .caution {
padding: 15px 10px 0;
border-left: 10px solid #bcecf0;
border-bottom: 10px solid #bcecf0;
background:#e3f7f8;
position: relative;
margin: 50px 0 27px 0;
z-index: 1;
color: #43200a;
line-height: 1.4;
}
#ExperienceSection .caution::after {
content: "";
width: 100%;
height: 100%;
top: -10px;
right: -10px;
border-right: 10px solid #bcecf0;
border-top: 10px solid #bcecf0;
position: absolute;
z-index: -1;
}
#ExperienceSection .caution dl {
margin:0 0 15px;
}
#ExperienceSection .caution dl dt {
width:16em;
display:table-cell;
vertical-align:middle;
font-size:17px;
font-weight:bold;
color:#075f63;
padding-left:1.5em;
text-indent:-1.5em;
}
#ExperienceSection .caution dl dt:before {
content:"●";
padding:0 0.5em 0 0;
}
#ExperienceSection .caution dl dd {
margin-right:18em;
display:table-cell;
vertical-align:middle;
font-size:15px;
}
#ExperienceSection .caution dl dd a {
color:#075f63 !important;
display:inline-block;
position: relative;
padding-left:10px;
}
#ExperienceSection .caution dl dd a:before {
content:"";
position: absolute;
top:50%;
left: 0;
margin-top:-7px;
border: 7px solid transparent;
border-left: 7px solid #075f63;
}
#ExperienceSection .caution dl dd a:link {color: #075f63 !important;}
#ExperienceSection .caution dl dd a:visited {color:#075f63 !important;}
#ExperienceSection .caution dl dd a:active  {color:#075f63 !important;}
#ExperienceSection .caution dl dd a:hover   {color:#075f63 !important;}
/*========================================================================================================================
*
* TourSection
*
========================================================================================================================*/
#TourSection {
padding-bottom: 50px;
background:#ffc773;
}
#TourSection .reserv_btn{
background-color:#e84f2c;
}
#TourSection .datebox dl dd .time {
  color:#e84f2c;
}
#TourSection h3 {
font-size:28px;
margin:50px 0 30px;
text-align:center;
font-weight:bold;
color:#e84f2c;
letter-spacing:0.2em;
}
#TourSection .event-sch h3 {
font-size:25px;
color:#000;
}
#TourSection .event-sch h3 span {
color:#e84f2c;
font-size:120%;
}
#TourSection .caution {
padding: 15px 10px 0;
border-left: 10px solid #ffeadf;
border-bottom: 10px solid #ffeadf;
background:#fff2ea;
position: relative;
margin: 50px 0 27px 0;
z-index: 1;
color: #43200a;
line-height: 1.4;
}
#TourSection .caution::after {
content: "";
width: 100%;
height: 100%;
top: -10px;
right: -10px;
border-right: 10px solid #ffeadf;
border-top: 10px solid #ffeadf;
position: absolute;
z-index: -1;
}
#TourSection .caution dl {
margin:0 0 15px;
}
#TourSection .caution dl dt {
width:16em;
display:table-cell;
vertical-align:middle;
font-size:17px;
font-weight:bold;
color:#e84f2c;
padding-left:1.5em;
text-indent:-1.5em;
}
#TourSection .caution dl dt:before {
content:"●";
padding:0 0.5em 0 0;
}
#TourSection .caution dl dd {
margin-right:18em;
display:table-cell;
vertical-align:middle;
font-size:15px;
}
#TourSection .caution dl dd a {
color:#075f63 !important;
display:inline-block;
position: relative;
padding-left:10px;
}
#TourSection .caution dl dd a:before {
content:"";
position: absolute;
top:50%;
left: 0;
margin-top:-7px;
border: 7px solid transparent;
border-left: 7px solid #e84f2c;
}
#TourSection .caution dl dd a:link {color: #e84f2c !important;}
#TourSection .caution dl dd a:visited {color:#e84f2c !important;}
#TourSection .caution dl dd a:active  {color:#e84f2c !important;}
#TourSection .caution dl dd a:hover   {color:#e84f2c !important;}

/*========================================================================================================================
*
* SpoSection
*
========================================================================================================================*/
#SpoSection {
padding-bottom:50px;
background: #ede664;
}
#SpoSection .reserv_btn{
background-color:#dbb80b;
}
#SpoSection .datebox dl dd .time {
  color:#3c5711;
}
#SpoSection h3 {
font-size:28px;
margin:50px 0 30px;
text-align:center;
font-weight:bold;
color:#3c5711;
letter-spacing:0.2em;
}
#SpoSection p.lead {
font-size:18px;
line-height:1.5;
}
#SpoSection table{
background:#FFFFFF;
width:100%;
}
#SpoSection table th,
#SpoSection table td{
border:1px #ede664 solid;
padding:10px;
}
#SpoSection table td{
width:40%;
text-align:center;
}
#SpoSection table th{
width:20%;
text-align:left;
}
#SpoSection table thead th{
text-align:center;
}
#SpoSection table thead th.club{
background:#ede664;
}
/*========================================================================================================================
*
* BusSection
*
========================================================================================================================*/
#BusSection.section h2 {
  color:#000;
}
#BusSection.section p.lead {
text-align:center;
font-size:18px;
margin:0 0 10px;
}
#BusSection.section .placebox {
background:#f5f5f5;
padding:20px 150px;
display:table;
width:700px;
}
#BusSection.section .placebox div.placetitle,
#BusSection.section .placebox div.place {
display:table-cell;
}#BusSection.section .placebox div.placetitle {
font-size:18px;
font-weight:bold;
letter-spacing:0.2em;
width:150px;
}
#BusSection.section .placebox div.place .btn {
display:inline-block;
width:120px;
background:#000;
text-align:center;
padding:5px;
margin:0 15px 10px 0;
font-size:15px;
padding-left: 1.5em;
text-indent: -1.5em;
color:#fff;
}
#BusSection.section .placebox div.place .btn:before {
content: "\f041";
font-family: FontAwesome;
padding: 0 0.5em 0 0;
text-decoration:none;
}
#BusSection.section .placebox div.place .btn a {
color:#fff !important;
}
#BusSection.section .placebox div.place .btn a:link {color: #fff;}
#BusSection.section .placebox div.place .btn a:visited {color:#fff;}
#BusSection.section .placebox div.place .btn a:active  {color:#fff;}
#BusSection.section .placebox div.place .btn a:hover   {color:#fff;}
#BusSection.section p.lead span.small {
font-size:80%;
}
#BusSection h3 {
font-size:25px;
margin:50px 0 30px;
text-align:center;
font-weight:bold;
color:#000;
letter-spacing:0.2em;
}
#BusSection h3 span {
color: #e84f2c;
font-size: 120%;
}
#BusSection .experience h3 span {
color: #1fc9d6;
}
#BusSection table{
background:#FFFFFF;
width:100%;
margin:0 0 30px;
}
#BusSection table th,
#BusSection table td{
border:1px #e84f2c solid;
padding:10px;
}
#BusSection table td{
text-align:center;
}
#BusSection table thead th{
text-align:center;
background:#ffc773;
}
#BusSection .experience table th,
#BusSection .experience table td{
border:1px #1fc9d6 solid;
}
#BusSection .experience table thead th{
background:#95e1e6;
}
#BusSection.section .drawing {
margin:50px 0 0;
}
#BusSection.section .drawing img {
  max-width:100%;
  width:auto;
  margin:0 0 5px 0;
}

/*========================================================================================================================
*
* MapSection
*
========================================================================================================================*/
#MapSection {
  position: relative;
  min-width: 1000px;
}
#MapSection .namePlate {
  background: #FFFFFF;
  padding: 16px 20px;
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 10;
  /* box-shadow */
  box-shadow: rgba(0, 20, 46, 0.13725) 1px 1px 0px 0px;
  -webkit-box-shadow: rgba(0, 20, 46, 0.13725) 1px 1px 0px 0px;
  -moz-box-shadow: rgba(0, 20, 46, 0.13725) 1px 1px 0px 0px;
}
#MapSection .namePlate .title {
  font-size: 14px;
  color: #8F0000;
  margin-bottom: 5px;
}
#MapSection .namePlate .title a{color: #8F0000 !important;}
#MapSection .namePlate .title a:link {color: #8F0000;}
#MapSection .namePlate .title a:visited {color:#8F0000;}
#MapSection .namePlate .title a:active  {color:#8F0000;}
#MapSection .namePlate .title a:hover   {color:#8F0000;}
#MapSection .namePlate .small {
  font-size: 12px;
  line-height: 1.5em;
}
#MapSection .namePlate .btn a {
  background:#000;
  display:inline-block;
  padding:5px;
  margin:10px 0 0;
  color:#fff;
  font-size: 12px;
  line-height: 1.5em;
}
#MapSection .namePlate .btn a {color: #fff !important;}
#MapSection .namePlate .btn a:link {color: #fff;}
#MapSection .namePlate .btn a:visited {color:#fff;}
#MapSection .namePlate .btn a:active  {color:#fff;}
#MapSection .namePlate .btn a:hover   {color:#fff;}

#MapSection #map {
  width: 100%;
  height: 560px;
}

#MapSection #gmap {
  width: 100%;
  height: 560px;
}
#MapSection #gmap iframe {
  width: 100%;
  height: 560px;
}

/*========================================================================================================================
*
* Footer
*
========================================================================================================================*/
#Footer {
  min-width: 1000px;
  background: #000000;
  height: 60px;
  color: #CCCCCC;
  text-align: center;
  font-size: 11px;
  line-height: 60px;
}