/* Scss Document */
html, body {
  position: relative;
  height: 100%; }

/*--------------------------------------------------------
header
--------------------------------------------------------*/
header {
  position: fixed;
  width: 100%;
  height: 80px;
  padding-left: 25px;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 2000; }
  @media (max-width: 1024px) {
    header {
      padding-left: 10px; } }
  header .headerMain {
    display: flex;
    width: 100%;
    height: 80px; }
    header .headerMain .site-name {
      width: 110px;
      height: auto;
      margin-top: 20px; }
      @media (max-width: 480px) {
        header .headerMain .site-name {
          width: 25%; } }
    header .headerMain .corp-name {
      flex: 1;
      position: relative; }
      header .headerMain .corp-name a {
        position: absolute;
        right: 0;
        top: 36px;
        width: 120px;
        height: auto; }
  header .navi {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: auto;
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s, visibility .5s;
    display: block;
    border: none;
    position: fixed;
    padding: 90px 40%;
    top: 0;
    left: 0;
    z-index: 2;
    overflow: auto; }
    header .navi.active {
      opacity: 0.85;
      visibility: visible; }
    @media (max-width: 1024px) {
      header .navi {
        padding: 64px 16.53%; } }
    header .navi .naviArea {
      display: block;
      margin-right: 0; }
      header .navi .naviArea li {
        font-weight: 700;
        margin-left: 0;
        text-align: center;
        line-height: 1.0; }
      header .navi .naviArea .spNavi {
        display: block;
        border-top: none; }
        header .navi .naviArea .spNavi ul {
          font-size: 12rem; }
          header .navi .naviArea .spNavi ul li a {
            display: block;
            color: #fff;
            border-bottom: 1px solid #333;
            padding: 20px 0; }
  header .naviToggle {
    position: relative;
    display: block;
    width: 82px;
    height: 78px;
    cursor: pointer;
    z-index: 3; }
    header .naviToggle span {
      display: block;
      position: absolute;
      width: 22px;
      left: 30px;
      border-bottom: 4px solid #fff;
      transition: 0.3s ease-in-out; }
      header .naviToggle span:nth-child(1) {
        top: 27px; }
      header .naviToggle span:nth-child(2) {
        top: 38px; }
      header .naviToggle span:nth-child(3) {
        top: 49px; }

.content {
  position: relative;
  margin: 0 50px 150px 50px;
  padding-top: 150px; }
  .content .submenu {
    display: flex;
    width: 100%;
    margin-bottom: 50px;
    border-left: 1px solid #ddd; }
    .content .submenu a {
      flex: 1;
      padding: 15px 0;
      text-align: center;
      border-right: 1px solid #ddd; }
      .content .submenu a:hover {
        background-color: #ddd; }
  .content h1 {
    margin-bottom: 50px;
    font-size: 28rem;
    font-weight: 500; }
  .content h2 {
    clear: both;
    margin-bottom: 20px;
    font-size: 20rem;
    font-weight: 500;
    background-color: #e5e5e5;
    padding: 15px 10px; }
  .content h3 {
    clear: both;
    margin-bottom: 10px;
    padding-bottom: 4px;
    font-weight: 500;
    font-size: 16rem;
    border-bottom: 1px solid #ddd; }
  .content p.intro {
    margin-bottom: 20px;
    line-height: 1.5; }
  .content .contents-box {
    margin-bottom: 50px;
    padding: 0 10px; }
    .content .contents-box table.table-bordered {
      width: 100%;
      border: 1px solid #ccc;
      border-collapse: collapse; }
      .content .contents-box table.table-bordered th, .content .contents-box table.table-bordered td {
        padding: 10px;
        text-align: left;
        border: 1px solid #ccc;
        border-collapse: collapse; }
      .content .contents-box table.table-bordered th {
        background-color: #fff;
        font-weight: 600; }
    .content .contents-box table.table-striped .odd {
      background-color: #fff; }
    .content .contents-box table.table-striped .even {
      background-color: #f5f5f5; }
    .content .contents-box table.table-form label {
      line-height: 2; }
    .content .contents-box table.table-form input {
      margin-bottom: 5px; }
    .content .contents-box table.table-form img {
      display: block;
      margin: 0 auto 10px auto; }
    .content .contents-box.csv {
      display: flex; }
      .content .contents-box.csv .col-md-2 {
        width: 50%;
        padding: 30px 5px;
        border: 1px solid #000; }
        .content .contents-box.csv .col-md-2:first-child {
          display: flex;
          margin-right: 10px;
          background-color: #e3edf1;
          justify-content: center;
          align-items: center;
          text-decoration: underline; }
        .content .contents-box.csv .col-md-2:last-child {
          display: flex;
          flex-wrap: wrap;
          min-width: 0;
          justify-content: center;
          align-items: center; }
          .content .contents-box.csv .col-md-2:last-child p, .content .contents-box.csv .col-md-2:last-child input {
            margin: 5px;
            min-width: 0; }
          @media (max-width: 480px) {
            .content .contents-box.csv .col-md-2:last-child {
              display: inline-block; }
              .content .contents-box.csv .col-md-2:last-child p, .content .contents-box.csv .col-md-2:last-child input {
                width: 80%; } }
    .content .contents-box.img-edit table td {
      padding: 15px;
      word-break: break-all;
      line-height: 1.5; }
      .content .contents-box.img-edit table td.image-thumbnail {
        width: 25%;
        text-align: center; }
        .content .contents-box.img-edit table td.image-thumbnail img {
          width: 50%;
          height: auto; }
      .content .contents-box.img-edit table td .language {
        padding: 10px 0;
        font-weight: bold;
        border-top: 1px dashed #ccc; }
    .content .contents-box.img-edit table button, .content .contents-box.img-edit table input[type="submit"] {
      margin: 10px 0;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 5px 10px;
      background-color: #eee;
      font-weight: bold; }
    .content .contents-box.img-edit table label {
      display: flex; }
    .content .contents-box.img-edit table textarea {
      width: 60%; }
    .content .contents-box.img-edit table textarea, .content .contents-box.img-edit table input[type="text"] {
      padding: 5px; }
    @media (max-width: 480px) {
      .content .contents-box.img-edit table textarea, .content .contents-box.img-edit table input[type="text"] {
        width: 100%; } }
    .content .contents-box.main-list {
      display: flex;
      flex-wrap: wrap;
      width: 100%; }
      .content .contents-box.main-list .image-thumbnail {
        width: 24.66%;
        display: flex;
        flex-direction: row;
        margin-right: 5px;
        margin-bottom: 5px; }
        .content .contents-box.main-list .image-thumbnail a {
          display: block;
          width: 100%; }
          .content .contents-box.main-list .image-thumbnail a img {
            width: 100%; }
          .content .contents-box.main-list .image-thumbnail a p {
            width: 100%;
            padding: 10px 0px 20px 0px;
            word-wrap: break-word;
            line-height: 1.5; }
    .content .contents-box.selected .main-image {
      width: 25%;
      display: block; }
      .content .contents-box.selected .main-image img {
        max-width: 100%; }
      .content .contents-box.selected .main-image p {
        width: 100%;
        padding: 10px 0px 20px 0px;
        line-height: 1.5;
        word-wrap: break-word; }
      .content .contents-box.selected .main-image button {
        margin: 10px 0;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 5px 10px;
        background-color: #eee;
        font-weight: bold; }
    .content .contents-box.selected .sub-list {
      clear: left;
      margin: 30px 0 10px 0; }
      .content .contents-box.selected .sub-list h3 {
        padding-top: 30px; }
    .content .contents-box.selected #sortable-subimages, .content .contents-box.selected .subimages {
      margin-bottom: 60px; }
      .content .contents-box.selected #sortable-subimages .image-thumbnail, .content .contents-box.selected .subimages .image-thumbnail {
        float: left;
        width: 120px;
        height: auto;
        margin-right: 5px;
        margin-bottom: 5px;
        padding-bottom: 10px; }
        .content .contents-box.selected #sortable-subimages .image-thumbnail img, .content .contents-box.selected .subimages .image-thumbnail img {
          margin-bottom: 10px; }
    .content .contents-box .gallery-menu input {
      margin-bottom: 10px; }
    .content .contents-box .user-delete {
      border: 1px #767676 solid;
      background-color: #efefef;
      padding: 5px 10px;
      border-radius: 10%; }
    .content .contents-box #sortable-galleryimages {
      margin-bottom: 50px; }
      .content .contents-box #sortable-galleryimages .image-thumbnail {
        float: left;
        width: 120px;
        margin-right: 5px;
        margin-bottom: 5px; }
        .content .contents-box #sortable-galleryimages .image-thumbnail img {
          margin-bottom: 10px; }
        .content .contents-box #sortable-galleryimages .image-thumbnail p {
          padding-bottom: 20px; }
      .content .contents-box #sortable-galleryimages .ui-sortable {
        clear: left; }
      .content .contents-box #sortable-galleryimages .gallery-view {
        clear: left; }
      .content .contents-box #sortable-galleryimages .save-galleryimages-order {
        margin: 10px 0 50px 0;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 5px 10px;
        background-color: #eee;
        font-weight: bold; }
    .content .contents-box ul.input-list {
      margin-bottom: 20px; }
      .content .contents-box ul.input-list li {
        margin-bottom: 5px; }
    .content .contents-box p.intro {
      margin-bottom: 20px;
      line-height: 1.5; }
    .content .contents-box .btn {
      border: 1px #767676 solid;
      background-color: #efefef;
      padding: 5px 10px;
      border-radius: 10%; }
    .content .contents-box.three-d {
      margin-bottom: 60px; }
      .content .contents-box.three-d .list-view img {
        width: 50%;
        height: auto;
        margin-bottom: 10px; }
      .content .contents-box.three-d .thumb-view {
        margin-bottom: 40px;
        line-height: 1.5; }
      .content .contents-box.three-d .editor {
        margin-bottom: 40px;
        line-height: 2.5; }
    .content .contents-box.publish .row {
      margin-top: 5px; }
      .content .contents-box.publish .row .image-grid {
        float: left;
        width: 120px;
        height: auto;
        margin-right: 5px;
        margin-bottom: 5px; }
  .content form.smallForm {
    width: 100%; }
    .content form.smallForm .formBox {
      width: 100%;
      margin-bottom: 50px;
      border-bottom: 1px solid #ddd; }
    .content form.smallForm .sign-in {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      width: 40%;
      margin: 0 auto 50px auto;
      font-size: 16rem; }
      .content form.smallForm .sign-in label {
        width: 20%;
        margin-bottom: 20px; }
      .content form.smallForm .sign-in input {
        width: 80%;
        margin-bottom: 20px;
        padding: 10px 5px; }
  .content form input.login-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 40px;
    margin: 0 auto 10px auto;
    background-color: #000;
    border: none;
    color: #fff;
    cursor: pointer; }
    .content form input.login-button:hover {
      background-color: #666; }
  .content form .fogot-pass {
    text-align: center;
    text-decoration: underline; }
  .content ul.menu-list {
    margin-bottom: 50px;
    padding-left: 20px; }
    .content ul.menu-list li {
      margin-bottom: 20px;
      list-style-type: disc; }
      .content ul.menu-list li a {
        text-decoration: underline; }
  .content dl dt {
    margin-bottom: 40px;
    font-size: 28rem; }
  .content dl dd {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 40px 20px; }
    .content dl dd a {
      padding: 0 20px 20px 0;
      border-right: 1px solid #ddd; }
      .content dl dd a .thumbnail {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        padding: 10px;
        background-color: #fff;
        transition: all .6s; }
        .content dl dd a .thumbnail img {
          width: auto;
          height: auto;
          max-width: 100%;
          max-height: 100%; }
      .content dl dd a .ttl {
        margin-bottom: 8px;
        font-size: 18rem;
        line-height: 1.2; }
      .content dl dd a .artist {
        margin-bottom: 5px;
        font-size: 14rem;
        line-height: 1.2; }
      .content dl dd a .note {
        font-size: 10rem;
        line-height: 1.2; }
      .content dl dd a:hover .thumbnail {
        background-color: #2f2f45; }
  .content.detail {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0;
    padding-top: 80px; }
    .content.detail iframe {
      flex: 1;
      width: 100%;
      height: 100%; }
    .content.detail .ttl-box {
      display: flex;
      width: 100%;
      max-width: 1280px;
      margin: 0 auto; }
      .content.detail .ttl-box h1 {
        display: flex;
        flex: 1;
        height: 100px;
        margin: 0;
        padding-bottom: 20px;
        align-items: flex-end;
        font-size: 36rem; }
        .content.detail .ttl-box h1 span.ttl-eng {
          font-size: 20rem;
          font-style: italic;
          line-height: 1.2; }
      .content.detail .ttl-box .infoBtn {
        display: flex;
        padding-bottom: 20px;
        align-items: flex-end; }
        .content.detail .ttl-box .infoBtn a {
          display: inline-block;
          background: url("../images/info_icon.png") left center no-repeat;
          background-size: 11px;
          padding: 10px 0 10px 20px;
          color: #777; }

@media (max-width: 1024px) {
  .content {
    margin: 0 20px 150px 20px; } }
@media (max-width: 1024px) {
  .content h1 {
    margin-bottom: 50px;
    font-size: 24rem; } }
@media (max-width: 1024px) {
  .content h2 {
    margin-bottom: 20px;
    font-size: 18rem; } }
@media (max-width: 1024px) {
  .content form.smallForm .sign-in {
    width: 60%; } }
@media (max-width: 480px) {
  .content form.smallForm .sign-in {
    width: 80%; } }
@media (max-width: 1024px) {
  .content dl dt {
    font-size: 24rem; } }
@media (max-width: 480px) {
  .content dl dd {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    grid-gap: 40px 10px; } }
@media (max-width: 480px) {
  .content dl dd a {
    padding: 0;
    border-right: none; } }
@media (max-width: 480px) {
  .content dl dd a .thumbnail {
    min-width: 100px; } }
@media (max-width: 480px) {
  .content dl dd a .ttl {
    font-size: 16rem; } }
@media (max-width: 480px) {
  .content dl dd a .artist {
    font-size: 12rem; } }
@media (max-width: 480px) {
  .content dl dd a .note {
    font-size: 10rem; } }
@media (max-width: 1024px) {
  .content.detail {
    height: 80%; } }
@media (max-width: 1024px) {
  .content.detail .ttl-box {
    display: block;
    padding: 0 20px; } }
@media (max-width: 480px) {
  .content.detail .ttl-box {
    padding: 0 10px; } }
@media (max-width: 1024px) {
  .content.detail .ttl-box h1 {
    font-size: 28rem;
    line-height: 1.2; } }
@media (max-width: 480px) {
  .content.detail .ttl-box h1 {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    font-size: 24rem;
    padding-bottom: 0; } }
@media (max-width: 1024px) {
  .content.detail .ttl-box h1 span.ttl-eng {
    font-size: 16rem; } }
@media (max-width: 480px) {
  .content.detail .ttl-box h1 span.ttl-eng {
    flex-direction: column;
    align-items: stretch;
    font-size: 16rem; } }
@media (max-width: 1024px) {
  .content.detail .ttl-box .infoBtn {
    display: none; } }
.data-box {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto 80px auto;
  padding-top: 60px; }
  .data-box dl {
    display: flex;
    flex-basis: calc((100% - 2%) / 2);
    max-width: calc((100% - 2%) / 2);
    margin-top: 3%;
    padding: 20px 0;
    border-bottom: 1px solid #ccc; }
    .data-box dl dt {
      flex: 2;
      display: flex;
      align-items: center;
      font-size: 13rem;
      color: #777; }
    .data-box dl dd {
      flex: 8;
      display: flex;
      align-items: center;
      font-size: 18rem;
      line-height: 1.5; }

@media (max-width: 1024px) {
  .data-box {
    padding: 0 20px; } }
@media (max-width: 480px) {
  .data-box {
    padding: 0 10px; } }
@media (max-width: 480px) {
  .data-box dl {
    flex-direction: column;
    flex-basis: 100%;
    max-width: 100%; } }
@media (max-width: 480px) {
  .data-box dl dt {
    margin-bottom: 10px; } }
.comment-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto 40px auto; }
  .comment-box dl {
    margin-bottom: 60px; }
    .comment-box dl dt {
      font-size: 13rem;
      color: #777;
      margin-bottom: 20px; }
    .comment-box dl dd {
      font-size: 16rem;
      line-height: 2; }
    .comment-box dl:last-child {
      margin-bottom: 0; }

@media (max-width: 1024px) {
  .comment-box {
    padding: 0 20px; } }
@media (max-width: 480px) {
  .comment-box {
    padding: 0 10px; } }
.number-box {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto 150px auto; }
  .number-box P {
    text-align: right; }

@media (max-width: 1024px) {
  .number-box {
    padding: 0 20px; } }
@media (max-width: 480px) {
  .number-box {
    padding: 0 10px; } }
a.backBtn {
  display: block;
  width: 238px;
  height: 38px;
  margin: 0 auto 150px auto;
  padding-top: 10px;
  background: url("../images/back_icon.png") 10px center no-repeat;
  background-size: 20px;
  border: 1px solid #000;
  text-align: center;
  transition: all .6s; }
  a.backBtn:hover {
    color: #fff;
    background-color: #2f2f45; }

@media (max-width: 480px) {
  a.backBtn {
    width: 70%; } }
/*--------------------------------------------------------
footer
--------------------------------------------------------*/
footer {
  position: sticky;
  clear: both;
  top: 100vh;
  width: 100%;
  padding: 30px 0;
  background-color: #aaa;
  color: #fff; }
  footer p {
    text-align: center;
    color: #000;
    font-size: 10rem; }
  footer .pagetop {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 1; }
    footer .pagetop a {
      display: block;
      width: 60px; }
      footer .pagetop a img {
        width: 100%;
        height: auto; }
      footer .pagetop a:hover {
        opacity: 0.8; }

/*--------------------------------------------------------
fadein(jq)
--------------------------------------------------------*/
.fadein {
  position: relative;
  z-index: 1;
  opacity: 0.0;
  transform: translate(0, 30px);
  transition: all 1s; }
  .fadein.scrollin {
    position: relative;
    z-index: 1;
    opacity: 1.0;
    transform: translate(0, 0); }