@charset "UTF-8";

/***********************************************************
  「再演トロイメライ」向けスタイルシートです
  作成 2020/03/xx
 ***********************************************************/


/***************************************
  reset(指定タグのスタイルをリセット) 
  基本的に、余白なし ＆ 箇条書きの「・」なし ＆ ボーダーなし
 ***************************************/

html, body, div, header, nav, ul {
  margin: 0;
  padding: 0;
}

img {
  margin: 0;
  padding: 0;
  border: none;
}


/***************************************
  全体のベース
 ***************************************/

.all_base {
  margin: 0 auto 0 auto;
  width: 100%;
  min-width: 900px;
  position: relative;
}


/***************************************
  ヘッダー画像・ナビゲーション
 ***************************************/

header {
  margin: 0 auto;
  text-align: center;
  max-width: 2000px;
  background-color: #0977d1; /* ナビゲーション部の色(その1) */
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

header h1 {
  font-size: 0;
  margin: 0;
}

header img {
  width: 100%;
  font-size: 0;
}

header nav {
  text-align: center;
  background-color: #0977d1; /* ナビゲーション部の色(その2、これがなくても平気だけど念のため) */
}
header nav ul {
  display:inline-block;
  overflow: auto;
}

header nav ul li {
  float: left;
  list-style-type: none;
  margin: 0;
}

header nav ul li a {
  display: block;
  padding: 2px 0 2px 0;
  width: 180px;
  text-align: center;
  color: #fff; 
  text-decoration: none;
}


/***************************************
  メイン と サイドバー が乗るベース
  幅 900px-50px=850px
 ***************************************/

.discription_base {
  width: 850px;
  position: absolute;
  left: 50%;                   /* 親要素の半分右にずらす */
  transform: translateX(-50%);    /* 要素自体の半分、上と左にずらす */
  overflow: auto;
  padding-top: 20px;
  padding-left: 25px;
  padding-right: 25px;
}

.discription_base ul li {
  list-style-position: inside;
  padding-left: 20px;
}
  

/***************************************
  メイン
  左寄せ
  幅 600px-50px=550px
  50pxのうち半分は padding-left へ
 ***************************************/

.main {
  float: left;
  margin: 0 20px 20px 0;
  max-width: 550px;
  padding-left: 25px;  /* これが50pxの半分 */
}

.list_all {
  margin: 20px 0 10px 0;
}

/***************************************
  サイドバー
  幅 260px-50px=210px
  50pxのうち半分は padding-right へ
 ***************************************/

/* htmlでsidebarと名付けた部分の指定 */
/* 左寄せ、全体幅260px (キービジュアル 900px - main 640px = 残り260px) */
.sidebar {
  float: left;
  margin: 0 0 20px 20px;
  width: 210px;
  padding-right: 25px;    /* これが50pxの半分 */
}

.sidebar ul.topics {
  height: 250px;
  overflow:hidden;
  overflow-y:scroll;
  padding: 2px;
  border: 1px solid #dddddd;
}

.sidebar ul.topics li {
  margin-top: 10px;
  padding-bottom: 10px; /* borderと干渉するのか、marginの下が反映されない */
  border-bottom: 1px solid #dddddd;
  width: 260px;
  list-style-type: none;
}

.sidebar .tw {
  border: 1px solid #dddddd;
}

.sidebar article section p a {
  color: red;   /* 注意喚起は一定期間で */
}

/***************************************
  メイン(サブページ用)
  左寄せ
  幅 900px - 余白50px = 850px
 ***************************************/

.main_for_subpage {
  float: left;
  margin: 0 20px 20px 0;
  max-width: 850px;
  padding-left: 25px;     /* 左右に余白を振ってる */
  padding-right: 25px;    /* ので 50/2=25px ずつ */
}

.main_for_subpage article {
  padding-bottom: 20px;
}

/* 青グラデの文字背景。標準化するとindexに干渉する */
.main_for_subpage article section h1 {
  padding: 10px 10px 10px 25px;    /* 背景色部分のサイズ制御。順に上右下左、文字位置の都合で左だけ多め */
  color: #ffffff;
  border-radius: 8px;   /* 角丸め */
  background:linear-gradient(.25turn, #0977d1, #05FBFF);   /* 左から右(角度指定)、始点の色、終点の色 */
}

.square {
  list-style-type: square; 
  list-style-position: inside;  /* 左右paddingと併用不可。使うならmarginへ */
  padding-top: -5px;  /* ページ全体でliに上下10px入れている、調整時注意 */
  padding-bottom: 5px;
}

.nodisc {
  list-style: none;
  margin-left: 1.5em;
  padding-top: 0px;   /* ページ全体でliに上下10px挿入済み、調整時注意 */
  padding-bottom: 0px;
}

.links {
  font-size: small;
  padding-top: 20px;
}

.shimekiri {
  font-weight: bold;
  padding: 10px 0 10px 0;
}

.retweet {
  float: center;
  max-width: 800px;
  padding-left: 50px;     
  padding-right: 50px; 
  background-color: #ffffff;
}

.retweet p,ul {
  padding-left: 20px;
}

/* 青グラデの文字背景。標準化するとindexに干渉する */
.retweet h3 {
  padding: 8px 8px 8px 12px;    /* 背景色部分のサイズ制御。順に上右下左、文字位置の都合で左だけ多め */
  color: #ffffff;
  border-radius: 3px;   /* 角丸め */
  background:linear-gradient(.25turn, #0977d1, #ffffff00);   /* 左から右(角度指定)、始点の色、終点の色 */
  margin: 20px 0 25px 0;
}

/***************************************
  参加案内のスケジュール表
 ***************************************/

.main_for_subpage article section table {
  height: 430px;
  border-collapse: collapse;
  border: none;
  padding: 20px 0 20px 0;
}

.main_for_subpage article section table tr td {
  text-align: center;
  border: 1px black solid;
  table-layout: fixed;
  padding: 1em 2em 1em 2em;
}

/***************************************
  メイン(サブページ用)に乗ってたもの
  第一回などで使用、現在は使用箇所なし
 ***************************************/

.box li {
  width: 31%;
  flex-grow: 1;
  float: left;
  list-style: none;
  margin-right: 2%;
  margin-bottom: 30px;
}

.for_list_kaigyou table tr td ul li {
  list-style: none;
  padding-left: 0;
}



/***************************************
  フッター
  ※いまのところ使わない
 ***************************************/

footer {
  clear: both;
}

footer {
  margin: 20px 0 20px 0;
  border-top: 1px solid #0977d1;
  padding-top: 10px;
  text-align: center;
}

/***************************************

  ここから新規で足した

  全ページに対する各種調整
  スマホでも見た方がいい、%指定がいい気がする

 ***************************************/

p {
  line-height: 200%;
}

hr {
  margin: 10px 0 20px 0;
}

ul li {
  margin: 10px 0 10px 0;
}

div article section {
  padding: 10px 0 20px 0;
}

h1 {
  margin: 20px 0 30px 0;
  font-size: 2em;   /* div直下以外は標準を適用してくれないので指定 */
}

h2 {
  padding: 18px 0 18px 0;
  margin:  0;
  font-size: 1.5em;
}

h3 {
  padding: 15px 0 15px 0;
  margin: 0;
  font-size: 1.2em;
}

/* 下線とリンクの見分けがつきにくいので標準を変更 */
u {
  text-decoration: black wavy underline;
  text-decoration-thickness: 1px;
}

/* ulやliは基本これを使う。入れ子にまで適用されると困るので名前を付けた */
.list {
  padding: 10px 0 10px 0;
}

/* 引用部分のグレー背景とか */
.quote {
  padding: 20px;
  background: #eee;
  font-size: small;
}

details summary {
  padding: 18px 0 18px 0;
}

.warning {
  text-decoration: red wavy underline;
  text-decoration-thickness: 1px;
}

header s {
  color: white;
}

/***************************************

  本文内 li 周辺の行間調整
  をなぜつくったのか

 ***************************************/

.rules p {
  padding-bottom: 10px;
}


/***************************************

  サークル参加関係
  250127の私はなぜ作ったのかわからない

 ***************************************/

 /*


.join_circle h2 {
  padding-bottom: 5px;
}

.join_circle section {
  padding-top: 5px;
  padding-bottom: 8px;
}

.join_circleMORE p {
  line-height: 180%;
}

.join_circleMORE h3 {
  padding-bottom: 5px;
  padding-top: 5px;
}

*/

/***************************************

  ナビゲーションバーの上下余白

 ***************************************/

header nav ul li {
  padding-top: 5px;
  padding-bottom: 5px;
}

/***************************************

  ページトップに飛ばす

  positionとtransformの併用不可に注意。
  body直下なら今のところ避けられるっぽい

 ***************************************/

.go_to_top {
  position: fixed;
  bottom: 5%;
  right: 10%;
  width: 80px;
}


/***************************************

  当日企画の li 余白調整

 ***************************************/
 .today li {
  padding: 8px;
 }

/***********************************************************
  End Of File
 ***********************************************************/