html,
body{
  position: relative;
  font-family: sans-serif;
  line-height: 1.8em;
  width: 100%;
  margin: 0;
}

/* 外枠ボックスの位置と大きさ */
main,
aside{
  border-width: 1px;
  border-bottom-width: 3px;
}
nav.mainMenu li a,
nav.mainMenu li span{
  border-width: 0px;
  border-bottom-width: 3px;
}
header .catch .logoArea,
main,
aside,
footer{
  position: relative;
  display: block;
  margin: 2rem auto;
  padding: 0 2rem;
  max-width: 1080px;
  box-sizing: border-box;
}
header{
  position: relative;
  display: block;
  padding: 0;
  border-bottom-width: 1px;
}
main,
aside{
  padding-bottom: 1rem;
}
header .catch{
  position: relative;
}
header .catch .logoArea{
  margin: 0 auto;
  padding: 1px 0;
}
header h1{
  margin: 0;
  text-align: center;
}
header h1 img.logoImg{
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
nav.mainMenu ul{
  margin: 0 auto;
  padding: 0;
  max-width: 1080px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
nav.mainMenu li{
  list-style: none;
  text-align: center;
}
nav.mainMenu li a,
nav.mainMenu li span{
  box-sizing: border-box;
  display: block;
  padding: 1em 0;
  width: 100%;
  height: 100%;
}
nav.subMenu ul{
  list-style: none;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 0;
  text-align: center;
}
nav.subMenu li{
  display: inline-block;
  margin: 0 8px;
}
footer{
  padding: 4px;
}
@media (max-width: 480px){
  header,
  main{
    border-left: 0;
    border-right: 0;
  }
  main{
    padding: 0 1rem;
  }
  nav.mainMenu li{
    flex-basis: 100%;
  }
}
@media (min-width: 480px) and (max-width: 768px){
  nav.mainMenu li{
    flex-basis: calc(50% - 0px);
  }
}
@media (min-width: 768px){
  nav.mainMenu li{
    flex-basis: calc(25% - 0px);
  }
}

/* 外枠ボックスの色とスタイル */
body{
  background: linear-gradient(#edf9fd, #f5fff2, #fff3f3);
  background-attachment: fixed;
}
main,
aside{
  background: #ffffff;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
  border-style: double;
  border-color: #fff;
}
header .catch.commonCatch{
  background-color: #dca;
  background-image: url(common_bg.jpg);
  background-position: center 36%;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
nav.mainMenu{
  background: #ffedca;
}
nav.mainMenu li a,
nav.mainMenu li span{
  background: #ffedca;
  border-style: double;
  border-color: currentColor;
  color: #59553c;
  text-decoration: none;
}
nav.mainMenu li a:hover{
  background: #ffffff;
  color: #b7a959;
}
nav.mainMenu li a.here,
nav.mainMenu li .here{
  background: #ffffff;
  border-bottom-style: solid;
  color: #b84500;
  font-weight: bold;
}
nav.mainMenu li .unready{
  background: #ede7e7;
  cursor: not-allowed;
  opacity: 0.5;
}
footer{
  font-size: small;
  line-height: 1.5em;
}

/* トップページ（メインビジュアル全体使用ページ） */
header .mainVisual2026{
  position: relative;
  background-color: #dca;
}
header .mainVisual2026Illustrator{
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: x-small;
  color: #522;
  text-shadow: 0 0 2px #fff;
  pointer-events: none;
}
header .mainVisual2026Info {
  position: absolute;
  left: 0;
  bottom: 0;
}
header .mainVisual2026Info ul.timeplace {
  color: #fff;
  font-size: x-large;
  font-weight: bold;
  line-height: 1.3em;
  list-style: none;
  margin: 0;
  padding: 0;
  text-shadow: 2px 2px 8px #522;
  display: flex;
  flex-wrap: wrap;
  column-gap: 1em;
  justify-content: center;
}
header .mainVisual2026Info .timeplaceWrap,
header .mainVisual2026Info ul.timeplace li {
  display: inline-block;
}
/* 画角が横長のときのトップページ */
@media (orientation: landscape) {
  /* ロゴと日時場所 */
  header .mainVisual2026Info {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  header .mainVisual2026Info h1.logoImgHead {
    flex-shrink: 0;
  }
  header .mainVisual2026Info img.logoImg {
    max-width: 60vw;
    margin: 0;
  }
  header .mainVisual2026Info ul.timeplace {
    flex-grow: 1;
    justify-content: flex-end;
    margin-right: 1em;
    margin-bottom: 1em;
    text-align: right;
  }
  /* スライドショー部分は表示しない */
  header .mainVisual2026PictureFleets {
    display: none;
  }
  /* ヒーローイメージ領域はイラストにそのまま合わせる */
  header .mainVisual2026{
    height: auto;
  }
  header .mainVisual2026landscape {
    display: block;
  }
  header .mainVisual2026landscapePic {
    display: block;
    width: 100%;
    pointer-events: none;
  }
}

/* 画角が縦長のときのトップページ */
@media (orientation: portrait) {
  /* ロゴと日時場所 */
  header .mainVisual2026Info {
    display: block;
    text-align: center;
    padding-bottom: 1em;
  }
  header .mainVisual2026Info img.logoImg {
    width: 100vw;
  }
  /* imgタグでのヒーローイメージは表示しない */
  header .mainVisual2026landscape {
    display: none;
  }
  /* メインビジュアルをスライドショーする */
  header .mainVisual2026{
    height: 100vh;
  }
  header .mainVisual2026PictureFleets,
  .mainFleetPic {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .mainVisual2026PictureFleets {
    background-color: #dca;
  }
  .mainFleetPic.pic1,
  .mainFleetPic.pic2,
  .mainFleetPic.pic3 {
    background-image: url(main.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    transition: opacity 1s;
  }
  .mainFleetPic.pic1 {
    background-position: left;
    opacity: 1;
  }
  .mainFleetPic.pic2 {
    background-position: center;
    opacity: 0;
  }
  .mainFleetPic.pic3 {
    background-position: right;
    opacity: 0;
  }
  .mainFleetBarArea {
    position: absolute;
    top: 1rem;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .mainFleetBar {
    box-sizing: border-box;
    width: 32px;
    height: 4px;
    background: #aaa8;
    border-left-color: #feed;
    border-left-style: solid;
    margin: 0 2px;
    cursor: pointer;
  }
  .mainFleetExpandArea {
    display: block;
    position: absolute;
    top: 1rem;
    left: 1rem;
  }
  .mainFleetExpandLink {
    color: #fee;
    display: block;
    background: #aaa8;
    padding: 4px;
    border-radius: 50%;
    text-decoration: none;
  }
  .mainFleetExpandLink .material-icons{
    display: block;
    font-size: 24px;
  }
}
@keyframes fleetBarProgress {
  from { border-left-width: 0 }
  to { border-left-width: 32px }
}

/* 見出し h2-h6 */
h2,
h3,
h4,
h5,
h6{
  color: #890106;
}
h2{
  margin: 2rem -1rem;
  padding: 0.7rem 1rem;
  border-bottom: 3px double #dd3535;
  border-left: 6px solid currentColor;
  border-top: 3px double transparent;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
h3{
  margin: 1.6rem -0.5rem;
  padding: 0.4rem 0.5rem;
  border: 3px solid transparent;
  border-left-color: currentColor;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
}

/* テーブル table */
table{
  border-collapse: collapse;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
th,
td{
  padding: 2px .5em;
}
tr:nth-child(odd){
  background: #eee;
}
tr:nth-child(even){
  background: #fff;
}
th{
  background: #ffedca;
  font-size: small;
}
table.border-gray tr{
  border-bottom: 2px solid #ddd;
}
table.border-white tr{
  border-bottom: 2px solid #fff;
}
table.border-white tr:last-child{
  border-bottom: 0;
}

/* 説明リスト dl */
dl{
  padding-bottom: .5em;
}
dt{
  color: #890106;
  padding-top: .5em;
}

/* 説明リスト・ワンライン */
dl.oneLine dt,
dl.oneLine dd{
  margin: 0;
  padding-top: .5em;
  box-sizing: border-box;
}
dl.oneLine dt{
  float: left;
  width: 5rem;
}
dl.oneLine dd{
  padding-left: 5rem;
}
dl.oneLine dd+dd{
  padding-top: 0;
}
dl.oneLine dd:after{
  content: "";
  clear: both;
}

/* 説明リスト・テーブルライク */
dl.tableLike{
  padding: 0;
  background: #ffedca;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
dl.tableLike dt,
dl.tableLike dd{
  margin: 0;
  padding: 2px .5em;
  box-sizing: border-box;
  border-top: 2px solid #fff;
}
dl.tableLike dt:nth-of-type(1),
dl.tableLike dd:nth-of-type(1){
  border-top: 0;
}
dl.tableLike dt{
  float: left;
  width: 5rem;
  background: #ffedca;
  color: #000;
  font-size: small;
  font-weight: bold;
  text-align: center;
}
dl.tableLike dd{
  margin-left: 5rem;
}
dl.tableLike dd:after{
  content: "";
  clear: both;
}
dl.tableLike dd:nth-of-type(odd){
  background: #eee;
}
dl.tableLike dd:nth-of-type(even){
  background: #fff;
}

/* 説明リスト・お知らせ */
dl.update{
  margin-top: -0.5em;
  padding-bottom: .5em;
}
dl.update dt{
  border-bottom: 1px dotted #890106;
  padding-top: 1em;
}
dl.update dt time{
  margin-right: 1em;
  font-size: small;
  font-weight: bold;
}
dl.update dt strong{
  display: inline-block;
}
dl.update dd{
  margin-left: 0;
}
dl.update h4{
  margin: 0;
  color: black;
}

/* figure */
figure{
  max-width: 100%;
  margin: 1em 40px;
  padding: 1em;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
  box-sizing: border-box;
  background: #fff;
}
figcaption{
  font-size: small;
}
.float-left,
.float-right{
  max-width: 50%;
  margin: 0;
  margin-bottom: 2em;
}
.float-left{
  float: left;
  margin-right: 2em;
}
.float-right{
  float: right;
  margin-left: 2em;
}
@media (max-width: 768px){
  figure{
    margin: 1em 0;
  }
  .float-left,
  .float-right{
    float: none;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin: 1em 0;
  }
}

/* フレージングコンテンツのスタイル */
img{
  max-width: 100%;
}
em {
  color: red;
  font-weight: normal;
  font-style: normal;
}
.twitterIcon{
  display: inline-block;
  width: 1.4rem;
  height: 1.4rem;
}
svg.eventTimeLine{
  max-width: 100%;
  height: auto;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
a.linkButton{
  background: linear-gradient(#fff, #ccc);
  border: 1px solid #888;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
  color: #016;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  margin: 4px;
  padding: 4px 1em;
  text-decoration: none;
}
a.linkButton:hover{
  box-shadow: none;
  color: #e06;
}
a.linkButton:active{
  background: linear-gradient(#eee, #bbb);
  color: #c06;
}
.linkButtonDisabled{
  background: linear-gradient(#fff, #ccc);
  border: 1px solid #888;
  border-radius: 8px;
  color: #016;
  cursor: not-allowed;
  display: inline-block;
  font-weight: bold;
  margin: 4px;
  padding: 4px 1em;
  text-decoration: none;
  opacity: 0.6;
}
cite{
  font-style: normal;
  font-weight: bold;
}

/* 非推奨スタイリング */
.center{
  text-align: center;
}
.left{
  text-align: left;
}
.right{
  text-align: right;
}
.mark{
  background-color: yellow;
}
.strong{
  font-weight: bold;
}
.red{
  color: red;
}
.blue{
  color: blue;
}
.white{
  color: white;
}
.reimu{
  color: #890106;
}
.box{
  border: 1px solid #890106;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
  padding: 2px .5em;
}
.nodisc{
  list-style: none;
}
.nodisplay{
  display: none;
}

/* サークルリスト */
@media (max-width: 640px){
  th.circleList-siteTH{
    overflow: hidden;
    max-width: 16px;
  }
  .circleList th:nth-child(4),
  .circleList th:nth-child(5),
  .circleList th:nth-child(6){
    font-size: xx-small;
  }
  .circleList td:nth-child(4),
  .circleList td:nth-child(5),
  .circleList td:nth-child(6){
    padding: 2px 2px;
  }
}
.circleList a {
  display: block;
  position: relative;
  width: 24px;
  height: 24px;
  margin: 2px 0;
  overflow: hidden;
}

/* 情勢変更注意喚起 */
aside.caution h2{
  border-left: 0;
  color: red;
  text-align: center;
}
div.caution h4{
  color: red;
  text-align: center;
}
