h2,h3,dl{
  font-family: cursive, "MS明朝";
}

#photo {
  position: relative;
  width: 100%;
  min-width: 1100px;
  margin-bottom: 30px;
  font-size: 0;
  text-align: center;
}

.viewport {
  position: relative;
  display: inline-block;
  width: 75%;
  font-size: 0;
  box-sizing: border-box;
}

.viewport img {
  width: 100%;
  height: auto;
}

.viewport:after {
  content: '※ナゾトキ学部大学院はフィクションです。実際には開設されません。';
  display: inline-block;
  position: absolute;
  bottom: 1.5em;
  right: 1.5em;
  font-family: Meiryo, メイリオ, sans-serif;
  font-size: 11px;
  font-weight: lighter;
  color: var(--nazotokigd-gray);
}


.sectionBox {
    width: 100%;
    position: relative;
    height: 330px;
    border: 1px solid #a0a0a0;
    margin: 30px 0
}

.sectionTitle {
    height: 210px;
    border-bottom: 1px solid #a0a0a0;
}
  
.titleName {
    height: 100%;
    width: 40%;
    float: left;
    font-size: 18px;
    font-family: cursive;
    text-align: center;
    display: table
}

.titleName h3 {
    display: table-cell;
    vertical-align: middle
}

.titleImage {
    float: right;
    width: 60%;
    height: 100%
}

.titleImage img {
    width: 100%;
    height: 100%
}

.sectionContent {
    padding: 0 20px
}

.puzzle .titleName {
    background-color: #e8d17b;
    color: #fff
}

.code .titleName {
    background-color: #7bbfe8;
    color: #fff
}

.inspiration .titleName {
    background-color: #ff7f68;
    color: #fff
}