@charset "utf-8";

/*

Colour Scheme
http://www.css-color-extractor.com/ is useful for checking.

Basic
#19448e (25, 68, 142) 瑠璃紺: Link
#98abbd (105, 138, 171) 薄花色: Menu Background
#9d5b8b (157, 91, 139) 京紫: Highlight
#FFFFFF (255, 255, 255) 白: Background, Characters in dark bg
#2b2b2b (43, 43, 43) 黒: Characters

Table
#F5F5F5 (245, 245, 245) WhiteSmoke: General
#DCDCDC (220, 220, 220) Gainsboro: Table Head
#8FBC8F (143, 188, 143) HSV 120, 23, 73 DarkSeaGreen: Presentations
#FFC0CB (255, 192, 203) HSV 349, 24, 100 Pink: Public Events
#EEE8AA (238, 232, 170) HSV 54, 28, 93 PaleGoldenrod: Other Events

Originally derived from https://fct.co/css-templates/ but, changed a lot in 2022.

*/

/* Basic */

*
{
    margin: 0em;
    padding: 0em;
}

body
{
    font-family: Helvetica,"Sawarabi Gothic",Meiryo,"メイリオ","Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN",YuGothic,"游ゴシック",Arial,sans-serif;
    font-size: 16pt;
    color: #2b2b2b;
    margin: 1.2em auto 0em auto;
    width: 100%;
}

a
{
    color: #19448e;
    text-decoration: underline;
}

a:hover
{
    text-decoration: none;
}

td.border {
	border: 1px solid;
}

/* Header */

#header
{
    padding: 0.5em 3em;
}
#header h1{
    display: inline-block;
}
#header h1 a
{
    text-decoration: none;
}
#header img{
    width:20rem;
    margin-bottom:1rem;
    vertical-align: top; 
    border: none;
}

#header p.subtitle
{
	font-size: 1.5em;
    font-weight: bolder;
    padding: 0 0 0 0.5em;
    display: inline-block;
}

/* Content */

#content
{
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    padding-right: 10px;
}

.box
{
    margin: 0.5em 0em;
    padding: 0.25em 1em 0.25em 1em;
}

#content p
{
    margin-bottom: 0.5em;
    text-align: justify;
    line-height: 1.5;
}

#content h3
{
    font-size: 1.2em;
    margin: 0.8em;
}

#content h2
{
    font-size: 1.25em;
    border:solid #3288bd;
    border-width: 0px 0px 0px 5px;
    padding: 3px 3px 3px 15px;
    margin: 3px;
}

#content ul
{
    line-height: 1.8;
}

#content table
{
    margin-bottom: 1.5em;
}

#content table tr{
    background-color: #F5F5F5;
}

#content table.nobg tr{
    background-color: #FFFFFF;
}

#content table th
{
    text-align: left;
    font-weight: bold;
    vertical-align: top;
    padding: 0.5em;
}

#content table td
{
    padding: 0.5em;
    text-align: left;
}

#content table tr.rowHead
{
    background-color: #DCDCDC;
    color: inherit;
}

#content table.sub {
    margin: 0;
}

#content table.sub td {
    padding: 0.5em 0.5rem 0 0;
}

/* Primary Content */

#primaryContentContainer
{
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  max-width: 100%;
}

#primaryContent
{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 0.8em;
}

/* Secondary Content */

#secondaryContent
{
    min-width: 10em;
    padding: 0.8em;
}

div.sticky{
    position: sticky;
    top: 20px;
}

.boxContent{
    margin: 0.5em;
}

/* Sticky Menu */

div.sticky ul{
    list-style: none;
}

div.sticky li{
    border: solid #98abbd 2px;
    margin: 5px;
    font-weight:bold;
}

div.sticky li.self{
    padding:5px;
}

div.sticky li a{
    text-decoration: none;
    display: block;
    height: 100%;
    width: 100%;
    padding: 5px;
}

div.sticky li:hover{
	background-color:#98abbd;
}

div.sticky li a:hover
{
    color:white;
}


/* Other */
.boxContent ol, .boxContent ul
{
    margin: 0 0 0 1.5em;
}
.boxContent ol li
{
    margin: 0 0 0.6em 0;
    line-height: 1.5;
}
.boxContent dl dt
{
    font-weight: bolder; 
    color: #2b2b2b;
}
.boxContent dl dd
{
    padding-left: 5em;
}
.boxContent img
{
    border: none;
}
.boxContent table tr td
{
    text-align: center;
}
.red
{
    /* color: #af0e26; */
    background:linear-gradient(transparent 70%, rgba(157, 91, 139, 0.7) 90%);
    padding-bottom: 2px;
}
.headline
{
    border: solid #9d5b8b; 
    border-width: 3px 0px; 
    font-size: 110%;
    padding: 0.5em; 
    margin: 20px 0px; 
    /* color: #af0e26; */
}
#content .headline h3{
    margin: 0.3em; 
}
.headline span
{
    font-weight: bolder;
    color: #2b2b2b;
}

p.abstract {
    text-indent: 1em;
}

p.note {
    text-align: right;
    font-size: 8pt;
}

td.price {
    white-space: nowrap;
}

table.program {
    border-width: 1px;
    width: 100%;
}

table.program th {
    background: #DCDCDC;
    width: 20%;
}

table.program td {
    width: 20%;
}

.event {
    background-color: #EEE8AA;
}

.technical {
    background-color: #8FBC8F;
}

.public {
    background-color: #FFC0CB;
}

/* Program Full List */

#fullList h3{
  margin: 1em 0 0.5em 0;
  border-bottom: double 5px #98abbd;
}

#fullList div.timeFullList{
  margin-bottom: 0.7em;
  width: 100%;
}

#fullList span.placeFullList{
  display: inline-block;
  margin: 0em 0.4em;
  padding: 0.1em 0.6em;
  border-radius: 15px;
  text-decoration: none;
  border: solid 1px #3288bd;
  color: #3288bd;
  font-size: 0.8em;
  vertical-align: top;
}

#fullList div.descFullList{
}


@media screen and (max-width:880px) {
  div.sticky{
    position: static;
  }
  div.sticky li{
    display:inline-block;
    min-width: 8em;
    font-size: 1.2em;
  }
  #primaryContentContainer {
    display: flex;
    flex-direction: column;
  }
  #header p.subtitle{
    display: block;
  }
  #header img{
    width: 80%;
  }
}