@charset "utf-8";

#boxVisual_1 {
  height:300px;
  background:url("../img/visual_1.jpg") repeat-x top center;
  background-size:contain;
}
#boxVisual_2 {
  height:300px;
  background:url("../img/visual_2.jpg") repeat-x top center;
  background-size:contain;
}
#boxVisual_3 {
  height:300px;
  background:url("../img/visual_3.jpg") repeat-x top center;
  background-size:contain;
}

#Content {
  padding:50px 0 90px;
}

#Content section p.boxMessage {
  padding:20px 30px;
  font-size:21px;
  line-height:1.5em;
  background:#f9f9f9;
}

#frameClass1 .boxClassNavi {
  background:#ce6fc5;
}
#frameClass2 .boxClassNavi {
  background:#649b62;
}
#frameClass3 .boxClassNavi {
  background:#4062dd;
}
#frameClass1 .boxClassNavi ul,
#frameClass2 .boxClassNavi ul,
#frameClass3 .boxClassNavi ul {
  list-style:none;
}
#frameClass1 .boxClassNavi ul li,
#frameClass2 .boxClassNavi ul li,
#frameClass3 .boxClassNavi ul li {
  float:left;
  padding:4px 2px;
  width:33%;
  list-style:none;
}
#frameClass1 .boxClassNavi ul li a,
#frameClass2 .boxClassNavi ul li a,
#frameClass3 .boxClassNavi ul li a {
  display:block;
  padding:15px 0;
  text-align:center;
  font-size:24px;
  color:#fff;
  line-height:1.0em;
  text-decoration:none;
  border:1px solid #fff;
}
#frameClass1 .boxClassNavi ul li a span {
  display:inline-block;
  padding:6px 12px;
  font-size:15px;
  line-height:1.0em;
  color:#ce6fc5;
  background:#fff;
}
#frameClass2 .boxClassNavi ul li a span {
  display:inline-block;
  padding:6px 12px;
  font-size:15px;
  line-height:1.0em;
  color:#649b62;
  background:#fff;
}
#frameClass3 .boxClassNavi ul li a span {
  display:inline-block;
  padding:6px 12px;
  font-size:15px;
  line-height:1.0em;
  color:#4062dd;
  background:#fff;
}
#frameClass3 .boxClassNavi ul li.itemClass1 a:hover,
#frameClass2 .boxClassNavi ul li.itemClass1 a:hover,
#frameClass1 .boxClassNavi ul li.on a {
  color:#ce6fc5;
  background:#fff;
}
#frameClass3 .boxClassNavi ul li.itemClass1 a:hover span,
#frameClass2 .boxClassNavi ul li.itemClass1 a:hover span,
#frameClass1 .boxClassNavi ul li.on a span {
  color:#fff;
  background:#ce6fc5;
}
#frameClass2 .boxClassNavi ul li.on a,
#frameClass3 .boxClassNavi ul li.itemClass2 a:hover,
#frameClass1 .boxClassNavi ul li.itemClass2 a:hover {
  color:#649b62;
  background:#fff;
}
#frameClass2 .boxClassNavi ul li.on a span,
#frameClass3 .boxClassNavi ul li.itemClass2 a:hover span,
#frameClass1 .boxClassNavi ul li.itemClass2 a:hover span {
  color:#fff;
  background:#649b62;
}
#frameClass3 .boxClassNavi ul li.on a,
#frameClass1 .boxClassNavi ul li.itemClass3 a:hover,
#frameClass2 .boxClassNavi ul li.itemClass3 a:hover {
  color:#4062dd;
  background:#fff;
}
#frameClass3 .boxClassNavi ul li.on a span,
#frameClass1 .boxClassNavi ul li.itemClass3 a:hover span,
#frameClass2 .boxClassNavi ul li.itemClass3 a:hover span {
  color:#fff;
  background:#4062dd;
}

#frameClass1 #Content section p.boxMessage {
  border-left:10px solid #ce6fc5;
}
#frameClass1 #Content section h2 {
  color:#ce6fc5;
}
#frameClass2 #Content section p.boxMessage {
  border-left:10px solid #649b62;
}
#frameClass2 #Content section h2 {
  color:#649b62;
}
#frameClass3 #Content section p.boxMessage {
  border-left:10px solid #4062dd;
}
#frameClass3 #Content section h2 {
  color:#4062dd;
}



#Content section .tableSchedule {
  background:#999;
}
#Content section .tableSchedule table {
  width:100%;
}
#Content section .tableSchedule table tr {
}
#Content section .tableSchedule table tr th {
  padding:12px 0;
  width:20%;
  font-size:15px;
  font-weight:300;
  line-height:1.0em;
  background:#eee;
}
#Content section .tableSchedule table tr td {
  padding:18px 0;
  font-size:15px;
  text-align:center;
  line-height:1.2em;
  background:#fff;
}

#Content section #listLicense {
}
#Content section #listLicense dl {
  float:left;
  width:700px;
  font-size:15px;
  line-height:1.5em;
}
#Content section #listLicense dl dt {
}
#Content section #listLicense dl dt span {
  display:inline-block;
  padding:6px 9px;
  font-size:15px;
  line-height:1.0em;
  background:#eee;
  border-radius:9px;
}
#Content section #listLicense dl dd {
  margin-top:-1.5em;
  margin-left:13em;
  margin-bottom:1.0em;
}
#Content section #listLicense img {
  float:right;
  width:400px;
  height:auto;
}

#Content section #listMessage {
}
#Content section #listMessage ul {
  list-style:none;
}
#Content section #listMessage ul li {
  float:left;
  margin:0 10px 20px;
  width:calc( 50% - 20px );
  list-style:none;
}
#Content section #listMessage ul li div.frameMessage {
  padding:12px;
  border:1px solid #ccc;
}
#Content section #listMessage ul li div.frameInfo {
  position:relative;
  height:280px;
  z-index:10;
}
#Content section #listMessage ul li h3 {
  position:absolute;
  display:block;
  top:0;
  left:0;
  margin:0 0 6px;
  padding:0;
  width:300px;
  font-size:18px;
  line-height:1.5em;
  background:none;
  z-index:12;
}
#Content section #listMessage ul li span {
  position:absolute;
  display:inline-block;
  bottom:0;
  left:0;
  margin:0 0 12px;
  padding:6px 12px;
  color:#fff;
  font-size:15px;
  line-height:1.0em;
  border-radius:9px;
  z-index:13;
}
#Content section #listMessage ul li img {
  position:absolute;
  top:0;
  right:0;
  width:auto;
  height:100%;
  z-index:11;
}
#Content section #listMessage ul li p {
  padding:15px 20px;
  min-height:17em;
  font-size:15px;
  line-heght:1.2em;
  background:#f9f9f9;
}
#frameClass1 #Content section #listMessage ul li h3 {
  color:#ce6fc5;
}
#frameClass1 #Content section #listMessage ul li span {
  background:#ce6fc5;
}
#frameClass2 #Content section #listMessage ul li h3 {
  color:#649b62;
}
#frameClass2 #Content section #listMessage ul li span {
  background:#649b62;
}
#frameClass3 #Content section #listMessage ul li h3 {
  color:#4062dd;
}
#frameClass3 #Content section #listMessage ul li span {
  background:#4062dd;
}



/* ------------------------------------------------------------ */
/*   For SmartPhones                                            */
/* ------------------------------------------------------------ */
@media print, screen and (max-width: 640px) {

#boxVisual_1 {
  height:150px;
  background:url("../img/visual_1.jpg") repeat-x top center;
  background-size:cover;
}
#boxVisual_2 {
  height:150px;
  background:url("../img/visual_2.jpg") repeat-x top center;
  background-size:cover;
}
#boxVisual_3 {
  height:150px;
  background:url("../img/visual_3.jpg") repeat-x top center;
  background-size:cover;
}

#Content {
  padding:50px 10px 90px;
}

#Content section p.boxMessage {
  padding:15px 20px;
  font-size:18px;
  line-height:1.5em;
}

#frameClass3 .boxClassNavi ul li,
#frameClass2 .boxClassNavi ul li,
#frameClass1 .boxClassNavi ul li {
  padding:4px 1px;
  width:calc( 33% - 2px );
}
#frameClass3 .boxClassNavi ul li a,
#frameClass2 .boxClassNavi ul li a,
#frameClass1 .boxClassNavi ul li a {
  padding:10px 0;
  font-size:14px;
}
#frameClass3 .boxClassNavi ul li a span,
#frameClass2 .boxClassNavi ul li a span,
#frameClass1 .boxClassNavi ul li a span {
  display:block;
  margin-bottom:6px;
  padding:6px 6px;
  font-size:11px;
  line-height:1.0em;
}

#Content section #listLicense dl {
  float:none;
  width:auto;
  font-size:13px;
  line-height:1.0em;
}
#Content section #listLicense dl dd {
  margin:6px 0 12px;
  line-height:1.3em;
}
#Content section #listLicense img {
  float:none;
  padding-top:9px;
  width:100%;
  height:auto;
}

#Content section #listMessage ul li {
  float:none;
  margin:0 0 20px;
  width:100%;
}
#frameClass1 #Content section #listMessage ul li h3 {
  top:5px;
  padding:3px 6px;
  width:auto;
  color:#fff;
  font-size:15px;
  background:#ce6fc5;
}
#frameClass2 #Content section #listMessage ul li h3 {
  top:5px;
  padding:3px 6px;
  width:auto;
  color:#fff;
  font-size:15px;
  background:#649b62;
}
#frameClass3 #Content section #listMessage ul li h3 {
  top:5px;
  padding:3px 6px;
  width:auto;
  color:#fff;
  font-size:15px;
  background:#4062dd;
}
#frameClass3 #Content section #listMessage ul li span,
#frameClass2 #Content section #listMessage ul li span,
#frameClass1 #Content section #listMessage ul li span {
  border-radius:0;
  font-size:12px;
}


}