html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

#universal {
  width: min(1120px, calc(100% - 24px));
  margin: 0 auto;
}

#header,
#body,
#footer {
  width: 100%;
}

.sec:after,
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.sec-p,
.sec-fp {
  padding: 10px 14px;
}

.sec table,
table {
  max-width: 100%;
}

td,
th {
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  height: auto;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="file"],
textarea,
select {
  max-width: 100%;
}

input[type="submit"],
input[type="button"],
button,
a.button,
.flowjs-button {
  margin: 4px 6px 4px 0;
}

iframe {
  max-width: 100%;
}

.pankuzu,
.pankuzu li,
#last-pankuzu,
.transfer-box,
.ui-state-highlight,
.ui-dialog,
.ui-tabs,
.ui-tabs-panel {
  overflow-wrap: break-word;
  word-break: break-word;
}

.ui-tabs .ui-tabs-nav li {
  margin-right: 6px;
}

.ui-progressbar {
  overflow: hidden;
}

.ui-progressbar > div:first-child {
  max-width: calc(100% - 180px);
}

#thumbs ul.thumbs,
#thumbs ul,
ul.thumbs {
  margin: 0;
  padding-left: 0;
}

#thumbs ul.thumbs li,
ul.thumbs li {
  overflow: hidden;
}

.content,
.navigation,
#slideshow,
#caption,
#thumbs {
  max-width: 100%;
}

body:not(.toreteru-modern) .archive-photo-detail .archive-photo-caption {
  height: 230px;
}

body:not(.toreteru-modern) .archive-photo-detail #thumbs.archive-photo-thumbs {
  margin: 5px;
  overflow: hidden;
}

body:not(.toreteru-modern) .archive-photo-detail table.form-w640 {
  max-width: 640px;
  width: 100%;
}

body:not(.toreteru-modern) .archive-photo-detail .archive-photo-actions {
  margin: 8px 0 0;
}

pre {
  max-width: 100%;
  overflow: auto;
}

@media (max-width: 900px) {
  body.toreteru-modern #universal {
    width: min(100%, calc(100% - 16px));
  }

  body.toreteru-modern .sec-lc50,
  body.toreteru-modern .sec-rc50,
  body.toreteru-modern .sec-lc70,
  body.toreteru-modern .sec-rc30,
  body.toreteru-modern .sec-lc80,
  body.toreteru-modern .sec-rc20,
  body.toreteru-modern .sec-fc,
  body.toreteru-modern .navigation,
  body.toreteru-modern .content {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.toreteru-modern .sec-p,
  body.toreteru-modern .sec-fp {
    padding: 10px 12px;
  }

  body.toreteru-modern table,
  body.toreteru-modern tbody,
  body.toreteru-modern tr,
  body.toreteru-modern td,
  body.toreteru-modern th {
    max-width: 100%;
  }
}

body:not(.toreteru-modern) {
  width: 998px;
  margin: auto;
}

body:not(.toreteru-modern) #universal {
  width: 988px;
  margin: auto;
  margin-top: 5px;
}

body:not(.toreteru-modern) td,
body:not(.toreteru-modern) th,
body:not(.toreteru-modern) .file-thumb,
body:not(.toreteru-modern) .folder-thumb,
body:not(.toreteru-modern) .file-ctrl,
body:not(.toreteru-modern) .file-capt,
body:not(.toreteru-modern) .file-del {
  vertical-align: middle;
}

body:not(.toreteru-modern) .sec-lc70 {
  width: 70%;
  float: left;
}

body:not(.toreteru-modern) .sec-rc30 {
  width: 30%;
  float: right;
}

@media (max-width: 1080px) {
  body:not(.toreteru-modern) {
    width: auto;
    margin: 0 8px;
  }

  body:not(.toreteru-modern) #universal {
    width: auto;
    margin: 5px 0 0;
  }

  body:not(.toreteru-modern) #album-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    text-align: left;
  }

  body:not(.toreteru-modern) #album-items > .clear,
  body:not(.toreteru-modern) #album-items > .line-gray {
    display: none !important;
  }

  body:not(.toreteru-modern) #album-items .album-item {
    width: auto;
    margin: 0;
    float: none;
  }

  body:not(.toreteru-modern) #album-items .album-item table {
    width: 100%;
  }

  body:not(.toreteru-modern) #album-items .file-thumb,
  body:not(.toreteru-modern) #album-items .folder-thumb {
    width: auto;
  }

  body:not(.toreteru-modern) #album-items .file-thumb img,
  body:not(.toreteru-modern) #album-items .folder-thumb img {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 720px) {
  body:not(.toreteru-modern) #album-items {
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 10px;
  }

  body:not(.toreteru-modern) .sec-lc70,
  body:not(.toreteru-modern) .sec-rc30 {
    width: auto;
    float: none;
  }
}