/**********************************************************************
*** Stylesheet for any browsers
*** DAT, R-CCS, RIKEN
*** June 27, 2018 Kohei Takatama: Create
**********************************************************************/

/**********************************************************************
* 全体に適用
***********************************************************************/
/*** 全要素のほとんどのプロパティをリセット */
/* font-size, font-weight は入れ子要素の指定が煩雑になるのでここでは行わない */
*, *:before, *:after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'メイリオ', 'ＭＳ Ｐゴシック', 'ヒラギノ角ゴシックW3', 'Osaka', 'sans-serif';
  list-style-type: none;
  border:none;
  text-decoration: none;
}

/*** body */
/* font-size は最小値 */
body{
  background-color: #FFFFFF; /* ベースカラー */
  color: #000000;
  font-size: 9.8px;
  line-height:1.2em;
  min-width: 360px;
}

/* font-size がブラウザ表示幅に依存 */
@media (min-width: 675px){
  body{
    font-size: 1.45vw;
  }
}

/* font-size の最大値 */
@media (min-width: 960px){
  body{
    font-size: 14px;
  }
}

/*** コンテナ */
.wrapper{
  width: 95%;
  max-width: 960px;
  margin: auto;
}

/*** モバイル用改行位置制御 */
.block{
  display: inline-block;
  text-indent: 0;
}

/*** リンク */
a, a:link, a:visited, a:hover, a:active{
  text-decoration: none;
}

/*** 見出し */
h1, h2, h4, h5, h6{
  font-weight: normal;
  font-size: 1em;
}

/*** 強調 */
strong{
  font-weight: bold;
}

/*** 強勢（アクセント） */
em{
  font-style: italic;
}

/*** 太字 */
/* 単なる装飾用ではなく，一般的に太字で書かれるものを表記するために使用 */
b{
  font-weight: bold;
}

/*** イタリック */
/* 単なる装飾用ではなく，一般的に斜体で書かれるものを表記するために使用 */
i{
  font-style: italic;
}

del{
  text-decoration: line-through;
}

/*** e-mail アドレスに添える不可視のテキスト */
.dummy{
  display: none;
}

/*** スクリーンリーダー用 通常の画面には表示されない */
.screen_reader{
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: 1px;
}

/*** 長文の段落の連続 */
p.long+p.long{
  margin-top: 1em;
}

img{
  max-width: 100%;
}

.wrapper{
  margin: auto;
}

/**********************************************************************
* ページ上部
**********************************************************************/
#header{
  background-color: #302C40;
  border-bottom: #FFFFFF double 4px;
}
 
  #header h1{
    width: 100%;
    background-image: url(../img/title.png);
    padding-top: calc(100%*220/960);
    background-size: 100% auto;
    background-repeat: no-repeat;
  }
  
/*********************************************************************
* サイト内ナビ
**********************************************************************/
#site_navi{
  margin-top: 2em;
}

  #site_navi ul{
    display: table;
    width: 100%;
    min-height: 2.5em;
  }
  
  #site_navi li{
    display: table-cell;
    margin: 0;
    width: 16.6666%;
    vertical-align: middle;
    overflow:hidden;
    background-color: #302C40;
    /*background: linear-gradient(to bottom, #CCCCCC, #000000 40%, #000000);*/
    border-radius: 2px 50% 0 0;
    border-bottom: solid 2px #302C40;
    border-left: solid 2px #FFFFFF;
    border-right: solid 2px #FFFFFF;
  }

  #site_navi li:first-of-type{
    border-left: none;
  }

  
  #site_navi li:last-of-type{
    border-right: none;
  }
  
  #site_navi li:before{
    content: "";
  }
  
  #site_navi li a{
    display: block;
    width: 100%;
    height: 100%;
    padding: 1em 0.2em;
    color: #FFFFFF;
    text-align: center;
    vertical-align: middle;
  }
  
  #site_navi li:hover{
    border-bottom: solid 2px #FFCC00;
  }

/*********************************************************************
* コンテンツ領域
**********************************************************************/
#contents{
  clear: both;
}
  
#contents:after{
  display: block;
  clear: both;
  content: ".";
  height: 0;
  visibility: hidden;
}

  /**********************************************************************
  * リンク
  **********************************************************************/
  /* <span class="block"> を inline-block にすることで，改行位置の制御を行っている．
    これはリンク文中でも使用されるが，inline-block に対しては text-decoration を指定できないため，
    background プロパティで下線を生成している．
    なお，borderプロパティはテキストから下線までの位置が離れすぎるので使用しない．
    疑似要素の指定は，link, visited, hover, active の順番で行うこと．
    ただし，スマホでは hover疑似要素は機能しない．
  */
  #contents a:link{
    color:#0961b9;
    text-decoration:none;
    background-image: linear-gradient(#0961b9, #0961b9);
    background-position: 0 1.15em;
    background-repeat: repeat-x;
    background-size: 1px 1px;
  }
  
  #contents a:visited{ 
    color:#004284;
    text-decoration:none;
    background:none;
  }
  
  #contents a:hover{ 
    color:#0961b9;
    text-decoration:none;
    background: none;
  }
  
  #contents a:active{ 
    color:#004284;
    text-decoration:none;
    background: none;
  }
  
  /**********************************************************************
  * その他の共用パーツ
  **********************************************************************/
  /*** （ほぼ）リンクだけの短いブロック要素用 */
  #contents .link{
    padding-left: 0.7em;
    text-indent: -0.7em;
  }
  
  #contents .link:before{
    content: "▶";
    color: #FF9900;
    font-size: 0.5em;
    vertical-align: middle;
    padding:0 0.2em;
  }
  
  /* 画像に下線を表示させないために，imgクラスを指定すること */
  #contents a.img:link{
    background-image: none;
  }


  /*** 画像のみで構成されるブロック要素 */
  #contents p.img{
    text-align: center;
  }
  
  /*** 画像のキャプション */
  #contents p.caption{
    font-style: italic;
  }
  
  #contents ul, #contents dl{
    margin-left: 0.5em;
  }
  
  #contents li, #contents dt{
    margin-left: 1em;
    text-indent: -1em;
  }
  
  #main ul li:before, #main dl dt:before{
    content:"●";
    font-size: 0.5em;
    vertical-align: middle;
    color: #000000;
    padding: 0 0.5em;
  }
  
  #contents dl dt{
    font-weight: bold;
  }
  
  #contents dl dd{
    margin-left: 1em;
  }
    
  #contents ol li{
    margin-left: 2em;
    text-indent: 0;
    list-style-type: decimal;
  }
  
  #main h3{
    font-size: 1.5em;
    padding: 0.2em;
    border-radius: 0.5em;
    font-family: monospace;
    margin: 1.5em 0.2em 0.5em 0.2em;
    background-color: none;
    position: relative;
    color: #F0F0F0;
  }
  
  #main section h3:first-child{
    margin-top: 0;
  }
  
  #main h3:before{
    content: "●";
    font-size: 0.6em;
    margin-right: 0.2em;
    vertical-align: middle;
  }
  
  #main h3:after{
    content: "";
    display: block;
    position: absolute;
    border-radius: 0.5em;
    background-color: #302C40;
    filter: blur(1px);
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    z-index: -1;
  }
  
  #main h4{
    margin-left: 0.5em;
    margin-top: 1em;
    font-weight: bold;
  }
  
  #main h3+h4{
    margin-top: 0;
  }
  
  #main h4:before{
    content: "●";
    color: #FFCC00;
    vertical-align: middle;
    padding: 0 0.2em 0 0;
  }
  
  #main p{
    padding: 0 1em;
  }
  
  #main .tba{
    text-align: center;
    font-size: 2em;
    margin: 2em;
    font-weight: bold;
    text-shadow: 0.2em 0.2em 0.15em rgba(0,0,0,0.4);
  }

  /*********************************************************************
  * メインパート
  **********************************************************************/
  #main{}
  
    #main section{
      margin-top: 2em;
    }
    
  /*********************************************************************
  * トップページ
  **********************************************************************/
    #top .intro p{
      text-align: justify;
      text-indent: 2em;
    }
    
    #top .important li{
      font-size: 1.5em;
      line-height: 1.2em;
      margin-bottom: 0.8em;
    }
    
    #top .important a:link{
      color:#0961b9;
      text-decoration:none;
      background-image: none;
    }
    
    #top .important .text{
      color: black;
    }
    
    #top .important strong{
      color: red;
    }
    
    #top .important .now_open{
      display: inline-block;
      margin-left: 1em;
      font-weight: bold;
      color:#0961b9;
      text-decoration:none;
      background-image: linear-gradient(#0961b9, #0961b9);
      background-position: 0 1.15em;
      background-repeat: repeat-x;
      background-size: 1px 1px;
    }
    
    #top .important .now_open:before{
      content: "▶";
      color: #FFCC00;
      animation: blink 1.5s infinite;
    }
    
    @keyframes blink{
        50%{
          opacity: 0.0;
        }
    }
    
    /*********************************************************************
    * トップページのスケジュール
    **********************************************************************/
    #top .schedule{}
    
      #top .schedule table{
        width: 95%;
        border-collapse: collapse;
        margin: auto;
        text-align: center;
      }
      
      #top .schedule td, #main .schedule th{
        border: #666666 solid 1px;
        width: 25%;
        padding: 0.5em 0;
      }
      
      #top .schedule tr.talk{
        background-color: #DDCCCC;
      }
      
      #top .schedule tr.poster{
        background-color: #CCCCDD;
      }
      
      #top .schedule th{
        background-color: #999999;
        color: #FFFFFF;
      }
      
      #top .schedule .day{
        display: block;
        font-weight: bold;
      }
      
      #top .schedule .date{
        display: block;
        margin-top: 0.2em;
        font-weight: normal;
      }
      
      #top .schedule .time{
        display: block;
        margin-bottom: 0.5em;
      }
      
      #top .schedule .content{
        font-weight: bold;
      }
      
      #top .schedule .content:after{
        content: "\A";
        word-break: break-all;
        white-space: pre-wrap;
      }
      
      #top .schedule .time:nth-child(n+2){
        border-top: 1px solid #666666;
        margin-top: 0.5em;
        padding-top: 0.5em;
      }
      
      #top .schedule .chair{
        font-style: italic;
      }
      
      #top .schedule .chair:before{
        content: "(";
      }
        
      #top .schedule .chair:after{
        content: ")";
      }
      
      #top .schedule .session_id:before{
        content: "[";
      }
        
      #top .schedule .session_id:after{
        content: "] ";
      }
    
    #top .invited{}
  
  
  /*********************************************************************
  * Application
  **********************************************************************/
  #application .deadline{
    font-size: 1.5em;
    line-height: 1.5em;
    padding-left: 0.6666em;
    padding-bottom: 1em;
  }
  
  #application .deadline strong{
    color: red;
  }
  
  #application .button_container{
    padding-top: 1em;
    margin: 0 auto 1em auto;
    width: 50%;
  }
  
  #application .button{
    padding: 0.5em 0;
    font-size: 1.5em;
    background-color: #FFCC00;
    color: #FFFFFF;
    border-radius: 0.5em;
    text-align: center;
    border-bottom: solid 4px #CC9900;
    line-height: 1.4em;
    font-weight: bold;
  }
  
  #application .button:active{
    margin-top: 4px;
    border-bottom: none;
    -webkit-transform: translateY(4px);
    transform: translateV(4px);
  }
  
  #application .new_tab{
    text-align: center;
    padding-bottom: 2em;
  }
  
  #application .visa{
    font-size: 1.2em;
  }
  
  #application .visa strong{
    color: blue;
  }
  
  
  /*********************************************************************
  * Venue
  **********************************************************************/
  #venue div.map{
    margin-top: 1em;
  }
  /*
  @media (min-width: 960px){
    #venue .main{
      width: 100%;
      display: table;
    }
    #venue h2{
      margin-bottom: 2em;
    }
    #venue .map{
      width: 55%;
      display: table-cell;
    }
    
    #venue .transport{
      width: 45%;
      display: table-cell;
      padding-left: 1em;
    }
  }
  */
  
  /*********************************************************************
  * Accomodation
  **********************************************************************/
  #accomodation .hotels dl{
    margin-top: 1em;
  }
  
  #accomodation .hotels dl dt:before{
    color: #FF9900;
    content: "▶";
  }
  
  #accomodation .hotels dl dd{
    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: #CCCCCC;
    margin-left:0;
    padding: 0 0 0.2em 1em;
    margin-bottom: 1em;
  }
  
  #accomodation .map_wrapper{
    text-align: center;
  }
  
  #accomodation .map{
    width: 95%;
    height: 500px;
    max-height: 100vh;
    margin: auto;
    border:none;
  }
 
  /**********************************************************************
  * コンテンツ領域下部の組織名
  **********************************************************************/
  #organizer{
    margin-top: 2em;
    padding-top: 1em;
    border-top: solid #000000 1px;
    display: table;
    width: 100%;
  }
  
    #organizer h4{
      margin-left: 0.5em;
    }
  
    #organizer .box{
      display: table-cell;
      width: 70%;
    }
    
      #organizer .box h4{
        margin-top: 1em;
        font-weight: bold;
      }
    
      #organizer .box h4:first-child{
        margin-top: 0;
      }

    #organizer .logo{
      display: table-cell;
      vertical-align: middle;
      width: 30%;
      text-align: center;
    }
  
    #organizer p, #organizer li{
      margin-left: 1em;
      text-indent: 0;
    }
  
  /**********************************************************************
  * コンテンツ領域下部のサポーター
  **********************************************************************/
  #supporter{
    margin-top: 2em;
    width: 100%;
    display: table;
  }
  
    #supporter .box{
      display: table-cell;
      width: 70%;
      padding-left: 1em;
    }
    
  
    #supporter .logo{
      display: table-cell;
      vertical-align: middle;
      width: 30%;
      text-align: center;
    }

  /**********************************************************************
  * コンテンツ領域部のコンタクト情報
  **********************************************************************/
  #contact{
    clear: both;
    margin: 4em 0 0 0;
    border-style: solid;
    border-width: 1px;
    border-color: #BCBCBC;
  }
    
    #contact h3{
      height: auto;
      text-align: center;
      color: white;
      background-color: #302C40;
      font-size: 1.5em;
      font-weight: bold;
      padding: 0.5em 0;
    }
      
    #contact h3:before{
      content: "■■ ";
    }
    
    #contact h3:after{
      content: " ■■";
    }
    
    /*** 情報 */
    #contact .info{
      display: table;
    }
    
      /*** チームロゴ */
      #contact .info .logo{
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        border-style: solid;
        border-width: 0 1px 0 0;
        border-color: #BCBCBC;
        width: 25%;
      }
      
      /*** 詳細 */
      #contact .info .description{
        display: table-cell;
        vertical-align: middle;
        text-align: left;
        padding: 1em;
      }
      
        /*** e-mail アドレス */
        #contact .info .description .e-mail{
          margin-top: 1em;
        }
        
        /*** 理研内コンテンツへのリンク */
        #contact .info .description .riken{
          margin-top: 1em;
        }

  /*********************************************************************
  * ページコントローラー
  **********************************************************************/
  #controller{
    margin-top: 5em;
    text-align: right;
  }

    #controller .btn_top{
      line-height: 1.2em;
      border-radius: 4px;
      border-style: double;
      border-color: #333333;
      font-size: 1.1em;
      width: 10em;
      text-align: center;
      margin: 0 0 0 auto;
      background-color: #FFFFFF;
      padding: 0.4em 0 0.2em 0;
      cursor: pointer;
      box-shadow: 4px 4px 4px rgba(0,0,0,0.4);
    }
    
    #controller .btn_top:before{
      content: "▲ ";
    }

/*********************************************************************
* ページ下部
**********************************************************************/
#footer{
  margin-top: 1em;
  background-color: #302C40; /* メインカラー */
  border-top: #FFFFFF double 4px;
  font-size: 0.8em;
  color: #FFFFFF;
}
  /*** リンク */  
  #footer a:link, #footer a:visited, #footer a:hover{
    color: #FFFFFF;
  }
  
  /*** 各リンクのコンテナ */
  #footer .site_navi li{
    width : 16.6666%;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    border-width: 0 1px;
    border-color: #CCCCCC;
    border-style: solid;
  }
  
  #footer .site_navi li:hover{
    background-color: #333333;
  }
  
    #footer .site_navi li a{
      display: block;
      width: 100%;
      height: 100%;
      vertical-align: middle;
    }
  
  /* イベント名称 */
  #footer .event_name{
    font-weight: bold;
    color:#FFFFFF;
    text-align: center;
  }
  
  /*** 版権 */  
  #footer .copyright{
    text-align: center;
  }
  
  /*** PC用 */
  @media (min-width:960px){
    #footer .box{
      margin: 1em 0;
    }
    
    #footer .box:after{
      display: block;
      clear: both;
      content: ".";
      height: 0;
      visibility: hidden;
    }
    
    #footer .site_navi{
      float: right;
      width: 70%;
    }
  
    #footer .site_navi ul{
      display: table;
      width: 100%;
    }
    
    /* イベント名称 */
    #footer .event_name{
      float: left;
      width: 30%;
    }
  }
  
  /*** モバイル用 */
  @media (max-width: 959px){
    /*** サイト内ナビゲーション */
    #footer .site_navi{
      border-style: solid;
      border-width: 0 0 1px 0;
      border-color: white;
      width: 100%;
    }
    
      #footer .site_navi ul{
        width: 100%;
        display: table;
        height: 3em;
      }
    
    /* イベント名称 */
    #footer .event_name{
      margin-top: 0.5em;
    }
  }

/***********************************************************************
 * Style Sheet for ISDA2019 Abstract
 **********************************************************************/
#abstract{
  font-size: 1.0em;
  line-height: 1.4em;
}

#abstract #contents .wrapper{
  max-width: 800px;
}

#abstract p{
  margin: 0;
  padding: 0;
}

#abstract h1{
  margin-top: 0.5em;
  color: #FFFFFF;
  background-color: #302C40;
  padding: 0.3em 0;
  text-align: center;
  font-weight: bold;
}

#abstract h1 .session_id:before{
  content: "[";
}

#abstract h1 .session_id:after{
  content: "]";
}

#abstract #slot_info{
  margin-top: 2em;
  text-align: center;
  font-weight: bold;
}

#abstract #slot_info .slot_id:before{
  content: "[";
}

#abstract #slot_info .slot_id:after{
  content: "]";
}

#abstract #slot_info .day:after{
  content: ", ";
}

#abstract #note{
  margin: 2em;
  color: red;
  text-align: center;
  font-weight: bold;
}

#abstract #note:before{
  content: "[";
}

#abstract #note:after{
  content: "]";
}

#abstract #note:empty{
  margin: 0;
}

#abstract #note:empty:before{
  content: "";
}

#abstract #note:empty:after{
  content: "";
}

#abstract #title{
  margin-top: 0.5em;
  text-align: center;
  font-weight: bold;
  font-size: 2em;
  line-height: 1.2em;
}

#abstract #authors{
  margin-top: 2em;
  text-align: center;
}

#abstract #abstract_head{
  margin-top: 2em;
  font-weight: bold;
}

#abstract #abstract_body{
  margin-top: 0.5em;
  text-align: justify;
  text-justify: inter-ideograph;
}

#abstract #abstract_body p{
  text-indent: 2em;
}

#abstract #presentation_file{
  margin-top: 2em;
  font-weight: bold;
}

#abstract #presentation_file:empty{
  margin: 0;
}

#abstract #contact_information_head{
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid 1px #000000;
  font-style: italic;
}

#abstract #contact_information_body{
  font-style: italic;
}

#abstract #contact_information_body .affiliation:before{
  content: "(";
}
    
#abstract #contact_information_body .affiliation:after{
  content: ")";
}

#abstract #withdrawn{
  margin: 2em;
  color: black;
  text-align: center;
  font-weight: bold;
  font-size: x-large;
}

#abstract #withdrawn:before{
  content: "[";
}

#abstract #withdrawn:after{
  content: "]";
}

#abstract #withdrawn:empty{
  margin: 0;
}

#abstract #withdrawn:empty:before{
  content: "";
}

#abstract #withdrawn:empty:after{
  content: "";
}

/* e-main is not shown */
/*
#abstract #contact_information_body .e-mail:after{
  content: ")";
}
*/

/***********************************************************************
 * Style Sheet for ISDA2019 Program
 **********************************************************************/
#program section{
  margin-top:4em;
}

#program section:first-of-type{
  margin-top: 2em;
}

#program .page_navi{
  margin-top: 1em;
  text-align: center;
}

#program .page_navi li{
  display: inline-block;
}

#program .page_navi li:before{
  content: "|";
}

#program .page_navi li:last-child:after{
  content: "l";
}


#program section h4{
  margin-top: 1em;
  background-color: #DDCCCC;
  padding: 0.2em 0 0.2em 0.2em;
  border-left: solid 0.8em #AA0000;
}

#program section h4:before{
  content: "";
}

#program section h4 .session_chair{
  display: inline-block;
}

#program section table{
  width: 98%;
  margin: auto;
}

#program section tr td:nth-child(1){
  width: 15%;
  min-width: 100px;
}

#program section table .note{
  display: block;
}

#program section table .presentator{
  display: block;
  text-align: left;
}

#program section .affiliation{
  display: inline-block;
}

#program section .affiliation:before{
  content: "(";
}

#program section .affiliation:after{
  content: ")";
}

#program section .session_id:before{
  content: "[";
}

#program section .session_id:after{
  content: "]";
}

#program section .session_id:empty:before{
  content: "";
}

#program section .session_id:empty:after{
  content: "";
}

#program section .session_chair:before{
  content: "/";
  margin-right: 0.5em;
}

#program section td{
  padding:0.5em 0;
}

#program section tr td:nth-child(2){
  text-align: justify;
  text-justify: inter-ideograph;
}


#program section tr td:nth-child(1):before{
  content: "■";
}

#program section tr.registration td:nth-child(1):before{
  color: #999999;
}

#program section tr.oral td:nth-child(1):before{
  color: #FF3333;
}

#program section tr.poster td:nth-child(1):before{
  color: #9999FF;
}

#program section tr.event td:nth-child(1):before{
  color: #DDDD00;
}

#program section.poster tr td:nth-child(1):before{
  color: #9999FF;
}

#program section .note{
  font-style: italic;
  margin-left: 1em;
}

#program section .slot_id:before{
  content: "[";
}

#program section .slot_id:after{
  content: "]";
}

#program section span.withdrawn{
  margin-left: 1em;
  font-weight: bold;
  display: block;
}

#program section div.withdrawn{
  color: #777777;
  display: inline-block;
}

#program section a.withdrawn:link {
  color: #777777;
}

#program section a.withdrawn:visited {
  color: #777777;
}

#program section a.withdrawn:hover {
  color: #333333;
}

#program section a.withdrawn:active {
  color: #777777;
}