@import url(notosansjp.css);

html
{
  margin: 0px;
  padding: 0px;
}

body
{
  width: 100%;
  padding: 0px;
  margin: 0px;
  position: relative;
  line-height: 1.5;
  font-family: 'BIZ UDPGothic', Sans-Serif;
  font-weight: normal;
  z-index: 1;
}


/*
 * Header
 */

header
{
  background: #C2AED9 url(header_background.png) repeat-x top center;
  margin: 0px;
  padding: 0px;
  position: relative;
  z-index: 2;
}

/* Header - Title */

header > div
{
  background: url(title_background.png) no-repeat top center;
  min-width: 980px;
  max-width: 1280px;
  margin: 0px auto;
}

header > div > h1
{
  width: 960px;
  margin: 0px auto;
  padding: 24px 0px 8px 0px;
}

header > div > h1 > a
{
  background: url(title.png) no-repeat;
  display: block;
  width: 560px;
  height: 64px;
  line-height: 64px;
  font-size: 24px;
  text-align: center;
  text-decoration: none;
  color: #2E213D;
}

header > div > h1 > a:hover,
header > div > h1 > a:focus
{
  color: #503F63;
}

header > div > h1 > a > strong
{
  display: block;
  position: relative;
  z-index: -1;
}


/* Header - Navi */

header > nav
{
  background: #745399;
}

header > nav > h2
{
  display: none;
}

header > nav > ul
{
  display: table;
  margin: 0px auto;
  padding: 0px 10px;
  list-style-type: none;
  width: 960px;
  position: relative;
  z-index: 3;
}

header > nav > ul > li
{
  display: table-cell;
  vertical-align: top;
  position: relative;
}

header > nav > ul > li > a
{
  display: block;
  line-height: 24px;
  height: 24px;
  text-align: center;
  text-decoration: none;
  color: #FFF;
  font-size: 12px;
  transition: background-color 0.15s ease-out;
  position: relative;
}

header > nav > ul > li > a:hover,
header > nav > ul > li > a:focus,
header > nav > ul > li:hover > a,
header > nav > ul > li:focus > a
{
  background-color: #9075AD;
}

header > nav > ul > li > a > span
{
  display: block;
  background-color: #745399;
  transition: background-color 0.15s ease-out;
  position: relative;
  z-index: -1;
}

header > nav > ul > li > a:hover > span,
header > nav > ul > li > a:focus > span,
header > nav > ul > li:hover > a > span,
header > nav > ul > li:focus > a > span
{
  background-color: #9075AD;
}

header > nav > ul > li.home
{
  width: 64px;
}

/*
header > nav > ul > li.home > a
{

}
*/

header > nav > ul > li.home > a:before
{
  content: "";
  display: block;
  width: 64px;
  height: 24px;
  position: absolute;
  overflow: hidden;
  transition: background-image 0.15s ease-out;
  background-image: url(navi_home.png);
  background-position: center top;
}

header > nav > ul > li.home > a:hover:before
{
  background-position: center bottom;
}

header > nav > ul > li.outline
{
  width: 192px;
}

header > nav > ul > li.seminar
{
  width: 144px;
}

header > nav > ul > li.gokei
{
  width: 108px;
}

header > nav > ul > li.contact
{
  width: 120px;
}

header > nav > ul > li.member
{
  width: 160px;
}

header > nav > ul > li.auth > a
{
  width: 112px;
}

header > nav > ul > li.right
{
  width: auto;
}

header > nav > ul > li.right > a
{
  margin: 0px 0px 0px auto;
}

header > nav > ul > li.right:hover > a,
header > nav > ul > li.right:focus > a
{
  background-color: #745399;
}

header > nav > ul > li.right > a:hover,
header > nav > ul > li.right > a:focus
{
  background-color: #9075AD;
}

header > nav > ul > li > ul
{
  display: none;
  position: absolute;
  width: inherit;
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

header > nav > ul > li:hover > ul
{
  display: block;
}

header > nav > ul > li > ul > li
{
  padding: 0px;
  margin: 0px 0px;
}

header > nav > ul > li > ul > li > a
{
  display: block;
  color: #FFF;
  /* background-color: #745399; */
  background-color: #9075AD;
  padding: 0px 16px;
  text-decoration: none;
  line-height: 32px;
  font-size: 12px;
  /* opacity: 0.8; */
  transition: all 0.15s ease-out;
}

header > nav > ul > li > ul > li > a:hover,
header > nav > ul > li > ul > li > a:focus
{
  /* opacity: 0.95; */
  background-color: #7D5DA1;
}



/*
 * Content Base
 */

body > div
{
  background: #C2AED9 url(content_background.png) top center;
}


/*
 * Footer
 */

footer
{
  background: url(footer_background.png) repeat-x top center;
  border-top: 2px solid #745399;
  min-width: 980px;
}

/* Footer - Copyright */

footer > div
{
  background: url(copyright_background.png) no-repeat top center;
  width: 960px;
  height: 128px;
  margin: 0px auto;
}

footer > div > div
{
  text-align: right;
  font-size: 90%;
  line-height: 16px;
  margin: 0px;
  padding: 8px 0px 0px 0px;
  color: #4D3866;
  position: relative;
  z-index: -1;
}

footer > div > p
{
  text-align: right;
  font-size: 82%;
  line-height: 16px;
  margin: 0px;
  padding: 4px 0px 0px 0px;
  color: #4D3866;
  position: relative;
  z-index: -1;
}


/*
 * Content
 */

main
{
  display: block;
  width: 932px;
  min-height: 600px;
  margin: 0px auto;
  padding: 24px 24px 24px 24px;
  background: #FFF;
  position: relative;
  z-index: 1;
  font-size: 90%;
  color: #463B52;
}

main h1
{
  background-repeat: no-repeat;
  padding: 4px;
  font-size: 200%;
  font-weight: normal;
  margin: -24px -24px 12px -24px;
  height: 48px;
  line-height: 48px;
  padding: 64px 0px 16px 32px;
  position: relative;
}

main h1:before
{
  content: "";
  display: block;
  width: 100%;
  height: 128px;
  margin: 0px 0px 0px -32px;
  position: absolute;
  top: 0px;
  background-color: #ddd9f0;
  z-index: -1;
}

main h1:after
{
  content: "";
  display: block;
  width: 100%;
  height: 128px;
  margin: 0px 0px 0px -32px;
  position: absolute;
  top: 0px;
  background: inherit;
}


/* Content - Elements */

main a:link
{
  color: #648;
  text-decoration: underline;
}

main a:visited
{
  color: #848;
}

main a:hover,
main a:focus
{
  color: #48A;
  text-decoration: none;
}

main a.arrow
{
  padding-left: 16px;
  background: url(icon/arrow.png) no-repeat left center;
}

main a.arrow:hover
{
  background-image: url(icon/arrow_hover.png);
}

main a.out
{
  color: #852 !important;
  padding-left: 16px;
  background: url(icon/outlink.png) no-repeat left center;
}

main a.order:link,
main a.order:visited
{
  padding-left: 16px;
  background: url(icon/order.png) no-repeat left center;
  text-decoration: none !important;
  color: #468 !important;
}

main a.order:hover,
main a.order:focus
{
  color: #A48 !important;
}

main .after_clear:after
{
  content: "";
  display: block;
  clear: both;
}

main h2,
main h3,
main h4,
main h5,
main h6
{
  margin: 0px 0px 16px 0px;
  padding: 12px 0px 4px 0px;
  font-weight: normal;
  color: #36516b;
}

main h2,
main h3
{
  border-bottom: 1px solid #aebcca;
}

main h2
{
  font-size: 145%;
}

main h3
{
  font-size: 135%;
}

main h4
{
  font-size: 120%;
}

main h5
{
  font-size: 110%;
}

main h6
{
  font-size: 100%;
}

main dl
{
  margin: 0px;
  padding: 0px;
}

main dl > dt
{
  width: 120px;
  line-height: 1.5em;
  padding: 0.4em 0px;
  color: #62768c;
}

main dl > dd
{
  margin: -2.3em 0px 4px 132px;
  padding: 0.4em 0px;
  min-height: 1.5em;
  line-height: 1.5em;
}

main dl > dd + dd {
  margin-top: -4px;
  padding-top: 0px;
}

main dl > dd > dl > dt {
  width: auto;
  padding: 0px;
  line-height: 1;
  font-size: 0.7rem;
}

main dl > dd > dl > dd {
  margin: 0px 0px 0px 0px;
  padding: 0.4em 0px;
  line-height: 1;
}

/* Selector */

.selector
{
  display: flex;
  width: 100%;
}

.selector > ul
{
  margin: 0px;
  padding: 0px;
  width: 240px;
  min-width: 240px;
  max-width: 240px;
  list-style-type: none;
}

.selector > ul > li
{
  margin: 0px 20px 0px 0px;
  padding: 16px 32px;
  border-bottom: 1px dashed #dde;
}

.selector > ul > li > a,
.selector > ul > li > span
{
  display: block;
  margin: -10px -32px;
  padding: 12px 32px;
  border: 1px solid #fff;
  border-radius: 4px;
}

.selector > ul > li > a:link,
.selector > ul > li > a:visited,
.selector > ul > li > span
{
  background-color: #ffffff;
  color: #756A82;
  text-decoration: none;
  transition: background-color linear 0.2s, border-color linear 0.2s, color linear 0.2s;
}

.selector > ul > li > a.current,
.selector > ul > li > span.current
{
  border: 1px solid #8C6FAD;
  color: #4B2D6C;
}

.selector > ul > li > a:hover,
.selector > ul > li > a:focus,
.selector > ul > li > a:active
{
  background-color: #AB94C6;
  border: 1px solid #AB94C6;
  color: #ffffff;
  text-decoration: none;
}



.selector > div
{
  width: 100%;
}


/* Content - Table */

.table
{
  margin: 12px -12px;
}

.table > *
{
  display: table;
  width: 100%;
  border-spacing: 12px 0px;
}

.table > * > *
{
  display: table-cell;
  vertical-align: top;
}

table.timetable
{
  width: 100%;
  border-collapse: collapse;
}

table.timetable > thead > tr > th
{
  padding: 4px 8px;
  background-color: hsl(280, 20%, 55%);
  text-align: left;
  font-weight: normal;
  color: #fff;
}

table.timetable > thead > tr > th:nth-child(1)
{
  width: 144px;
  text-align: center;
}

table.timetable > thead > tr > th:nth-child(3)
{
  width: 25%;
}

table.timetable > thead > tr > th:nth-child(4)
{
  width: 25%;
}

table.timetable > tbody > tr > td
{
  padding: 8px 8px;
  border-bottom: 1px solid hsl(280, 10%, 80%);
}

table.timetable > tbody > tr > td:nth-child(1)
{
  text-align: center;
}

table.timetable > tbody > tr > td:nth-child(1) > span
{
  display: inline-block;
  width: 56px;
  text-align: center;
}

/* Content - Frame */

.frameA
{
  margin-bottom: 12px;
  padding: 0px 0px 0px 24px;
}

.frameA > h1
{
  background: url(frame/frameA_title_bg.png) repeat-x bottom center;
  font-size: 135%;
  margin: 0px 0px 12px -24px;
  line-height: 32px;
  padding: 4px 0px 0px 12px;
  font-weight: normal;
  color: #683D99;
  letter-spacing: 1px;
}

.frameA > h2
{
  margin: 32px 0px 12px -24px;
  padding: 0px 0px 0px 24px;
  border-bottom: 1px dotted #C3B0D8;
  font-size: 120%;
  font-weight: normal;
  color: #683D99;
  letter-spacing: 1px;
}

.frameB
{
  border: 1px solid #EAE8EF;
  padding: 16px;
  box-shadow: 0px 0px 4px rgba(200, 180, 225, 0.25);
  margin-bottom: 12px;
}

.frameB > h1
{
  background: #EFECF3 url(frame/frameB_title_bg.png) repeat-x top center;
  margin: -15px -15px 12px -15px;
  height: 24px;
  padding: 8px 16px 4px 16px;
  font-size: 120%;
  line-height: 24px;
  font-weight: normal;
  color: #64596F;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
  letter-spacing: 2px;
}

.frameB > p
{
  margin: 8px 0px;
}


dl.sampling dt
{
  line-height: 1.5em;
  min-height: 1.5em;
  width: 160px;
  margin: 0px 0px 12px 0px;
  position: absolute;
  color: #408080;
}

dl.sampling dd
{
  line-height: 1.5em;
  min-height: 1.5em;
  margin: 0px 0px 12px 172px;
}

dl.sampling dd + dd
{
  margin-top: -9px;
}

dl.sampling dd samp
{
  white-space: pre;
  font-family: inherit;
}

.console
{
  border: 1px solid Gray;
  margin: 32px;
  padding: 8px;
  font-family: 'Ricty Diminished';
  font-size: 10pt;
  line-height: 1.2;
  white-space: pre-wrap;
  word-break: break-all;
}