@media (max-width: 600px) {
  br:not(.sp) {
    display: none; } }

a[target="_blank"] {
  background: none;
  padding-right: 0; }
  a[target="_blank"]::after {
    content: "\e914";
    font-family: 'Hobonichi-Icons';
    font-size: 75%; }

body {
  font-size: 16px;
  line-height: 2; }

#wrapper {
  width: 100%;
  max-width: 960px; }

#header h1 {
  height: auto;
  max-height: 630px; }
  #header h1 img {
    width: 100%;
    vertical-align: top; }
  body.archive #header h1 {
    height: auto;
    max-height: 330px; }

#header #aera {
  top: auto;
  bottom: calc(5.5555555556% + 28px);
  right: 3.6458333333%; }
  body.archive #header #aera {
    top: auto;
    bottom: calc(9.0909090909% + 24px); }
  #header #aera a {
    display: block;
    line-height: 1; }
  @media (max-width: 767px) {
    #header #aera {
      width: 50%;
      max-width: 200px; }
      body.archive #header #aera {
        width: 25%;
        max-width: 160px; }
      #header #aera a img {
        width: 100%;
        vertical-align: top; } }

#contentHeader {
  width: 90%;
  max-width: 800px; }
  @media (max-width: 767px) {
    #contentHeader #yodogawa {
      float: none; }
      #contentHeader #yodogawa img {
        width: 100%;
        max-width: 371px; }
    #contentHeader #toc {
      width: 100%;
      max-width: 400px;
      position: static;
      margin: 30px auto 0;
      background-repeat: repeat-x; }
      #contentHeader #toc ol {
        background-repeat: repeat-x; }
      #contentHeader #toc li {
        width: 100%;
        line-height: 1; }
        #contentHeader #toc li img {
          width: 100%;
          max-width: 301px; } }

.content {
  width: 90%;
  max-width: 800px; }
  @media (max-width: 767px) {
    .content {
      margin-top: 30px; } }
  .content h2 img:first-of-type {
    display: inline-block; }
  .content h2 img:last-of-type {
    display: none; }
  @media (max-width: 767px) {
    .content h2::before {
      content: none; }
    .content h2 img {
      width: 97.2222222222%;
      max-width: 400px; }
      .content h2 img:first-of-type {
        display: none; }
      .content h2 img:last-of-type {
        display: inline-block; } }

.conv {
  width: 100%;
  max-width: 500px; }
  .conv dt {
    width: 80px;
    letter-spacing: 0; }
    .conv dt.talker2 {
      line-height: 1.5;
      padding-top: 2.25em; }
  @media (max-width: 600px) {
    .conv dl, .conv dt, .conv dd {
      display: block;
      width: auto; }
    .conv dl {
      margin-bottom: 0; }
      .conv dl:first-of-type dt, .conv dl:first-of-type dt.talker2 {
        padding-top: 0; }
    .conv dt.talker2 {
      line-height: 2;
      padding-top: 2em; }
    .conv dd {
      padding: 0;
      margin: 0; } }
  @media (max-width: 767px) {
    .conv {
      width: 93.75%; } }
  .conv .photo {
    margin: 40px auto 10px; }
    @media (max-width: 600px) {
      .conv .photo {
        margin: 30px auto 0; } }
    .conv .photo img {
      width: auto;
      max-width: 100%;
      max-height: 500px;
      vertical-align: top; }
  .conv .continue {
    width: 100%; }

@media (max-width: 600px) {
  #navi {
    position: relative; }
    #navi::before {
      content: none; }
    #navi ul li:nth-of-type(2) {
      position: absolute;
      top: 50px;
      left: 50%;
      transform: translate(-50%);
      margin: 0; } }

@media (max-width: 800px) {
  #banner li {
    display: block;
    max-width: 380px;
    margin: 30px auto; }
    #banner li:first-child {
      margin-right: auto; } }

#banner img {
  width: 100%; }

.info {
  width: 100%;
  max-width: 640px; }
  @media (max-width: 767px) {
    .info {
      width: 93.75%;
      margin: 40px auto; }
      .info .photo {
        width: 31.25%;
        max-width: 200px; }
        .info .photo img {
          width: 100%; }
      .info .text {
        margin-left: 37.5%; }
        .info .text h3 {
          font-size: 16px; }
        .info .text p {
          font-size: 14px; } }

#footer {
  width: 100%;
  max-width: 960px; }
  #footer ul li {
    margin: 10px auto; }