@import url('variables.css');
@import url('fonts.css');

@keyframes stroke-in {
    0%{ width:   0%; }
  100%{ width: 100%; }
}

:root {
  --thumb: #000;
  --track: #eee;

  scrollbar-color: var(--thumb) var(--track);

  /* scrollbar-gutter: stable; */
  scrollbar-width: thin;
  &::-webkit-scrollbar { width: 4px; height: 4px; }
  &::-webkit-scrollbar-thumb, &::-webkit-scrollbar-track { border-radius: 16px; }
  &::-webkit-scrollbar-thumb { background-color: var(--thumb); }
  &::-webkit-scrollbar-track { background-color: var(--track); }
}

::selection {
  color: #fff;
  background-color: #000;
}

html {
  overflow-x: hidden;
  background-color: #f7f7f7;
}

body {
  min-height: 100dvh;
}

img {
  max-width: 100%;
  height: auto;
  font-style: italic;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 0.75rem;
}

a {
  color: var(--color-link);

  &:not([class]) {
    font-family: noto-sans-cjk-jp, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN','Yu Gothic', YuGothic, Verdana, Meiryo, sans-serif;
    text-decoration: underline;

    @media (hover: hover) {
      &:hover {
        text-decoration: none;
      }
    }

    &[target="_blank"]:after {
      content: '';
      display: inline-block;
      width: 1em;
      height: 1em;

      --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M432 64H208c-8.8 0-16 7.2-16 16v16h-64V80c0-44.2 35.8-80 80-80h224c44.2 0 80 35.8 80 80v224c0 44.2-35.8 80-80 80h-16v-64h16c8.8 0 16-7.2 16-16V80c0-8.8-7.2-16-16-16M0 192c0-35.3 28.7-64 64-64h256c35.3 0 64 28.7 64 64v256c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64zm64 32c0 17.7 14.3 32 32 32h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H96c-17.7 0-32 14.3-32 32'/%3E%3C/svg%3E");

      background-color: currentcolor;
      mask-image: var(--svg);
      mask-repeat: no-repeat;
      mask-size: 100% 100%;
      margin-left: 0.25em;

    }
  }
}

svg[class*='fa-'] {
  width: 1rem;
  height: 1rem;
  vertical-align: text-bottom;
}

.-loaded {
  .pageHead:after {
    animation: stroke-in forwards 1s cubic-bezier(1,0,0,1);
  }
}

main, .styleFormat {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: calc(var(--bs) *6);

  /* base style setting */

  h1, h2, h3, h4, h5, h6 {
    margin-top: 2em;
    font-weight: 900;
    line-height: 1.2;
  }

  h1 {
    font-size: calc(var(--fs) * 2.000 * var(--coef));
    &:first-child { margin-top: 0; }
    &.-en { font-size: calc(var(--fs) * 3.000 * var(--coef)); }
  }
  h2 { font-size: calc(var(--fs) * 1.500 * var(--coef)); }
  h3 { font-size: calc(var(--fs) * 1.350 * var(--coef)); }
  h4 { font-size: calc(var(--fs) * 1.250 * var(--coef)); }
  h5, h6 { font-size: calc(var(--fs) * 1 * var(--coef)); }

  p {
    margin-top: 1em;
    font-feature-settings: "palt" 1;
    line-height: 1.8;
    letter-spacing: 2;

    /* word-break: auto-phrase; */
  }

  ul {
    &:not([class]){
      margin-top: 1em;
      margin-left: 1.25em;

      & > li:not(:first-child) {
        margin-top: .25em;
        line-height: 1.8;

        & > ul, & > ol {
          margin-top: .5em;
          margin-bottom: .75em;
        }
      }
    }
  }

  .pageHead {
    width: 100%;
    margin-top: calc(var(--bs) *6);

    &:after {
      display: block;
      width: 0;
      height: 3px;
      content: '';
      background-color: #000;
    }

    h1 {
      display: flex;
      gap: calc(var(--bs) *.25);
      align-items: baseline;
      max-width: 1100px;
      padding: calc(var(--bs) *.25) var(--bs);
      font-size: 2.4rem;

      &:after {
      font-size: small;
      line-height: 1;
      content: attr(data-enlabel);
    }
    }
  }
}

article {
  &:not([class]) {
    max-width: 1100px;
    padding: var(--bs) var(--bs);
    margin-inline: auto;
    margin-top: calc(var(--bs) *2);
  }
}

/* .pagination {
  display: flex;
  gap: var(--bs);
  justify-content: center;

  button:not([class]) {
    width: 1.5em;
    height: 1.5em;
    aspect-ratio: 1/1;

    &:disabled {
      color: #fff;
      background-color: #000;
    }
  }
} */

.btn {
  padding: calc(var(--bs) *.25) calc(var(--bs) *.5);
  font-weight: 600;
  line-height: 1;
  color: #000;
  text-decoration: none;
  background-color: #fff;
  border: solid 3px #000;
  border-radius: 100vh;
  transition: all .25s;

  i {
    color: #000;
      transition: all .25s ease-out;
      translate: 0 0;
    }

  &:hover {
    color: #fff;
    background-color: #000;

    i {
      color: #fff;
      translate: 4px 0;
    }
  }

  &.-disabled {
    color: #999 !important;
    cursor: not-allowed;
    background-color: #ddd;
    border-color: #999;
  }
}

.captions {
  margin-top: var(--bs);
  list-style-type: none;

  li {
    padding-left: 1em;
    margin-top: calc(var(--bs) *.25);
    font-size: small;
    line-height: 1.2;
    text-indent: -1em;

    &:before {
      padding-right: 0.2em;
      content: '※';
    }
  }
}

.styleFormat {
  --coef: 1; /* 係数 */
  --fs: 2rem; /* 標準フォントサイズ */

  * { transition: font-size .2s; }

  @media(--mobile) {
    --coef: .9;
  }

  @media(--sp) {
    --coef: .85;
  }

  h1, h2, h3, h4, h5, h6 {
    margin-top: 1.5em;
    font-weight: 700;
    line-height: 1.2;
  }

  h1 { font-size: calc(var(--fs) * 2.000 * var(--coef)); &:first-child { margin-top: 0; } }
  h2 { font-size: calc(var(--fs) * 1.750 * var(--coef)); }
  h3 { font-size: calc(var(--fs) * 1.500 * var(--coef)); }
  h4 { font-size: calc(var(--fs) * 1.250 * var(--coef)); }
  h5, h6 { font-size: calc(var(--fs) * 1 * var(--coef)); }

  h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: .5em; }

  p, li, dt, dd, blockquote, pre, th, td {
    font-size: calc(var(--fs) * .8 * var(--coef)); /* = 16px */
    line-height: 1.8;
  }

  p {
    margin-top: 1em;
    font-feature-settings: "palt" 1;
  }

  img { width: 100%; }

  ul, ol  {
    &:not([class]) {
      margin-top: 1em;
      margin-left: 1.5em;

      & > li:not(:first-child) {
        margin-top: .25em;
        line-height: 1.6;

        & > ul, & > ol {
          margin-top: .5em;
          margin-bottom: .75em;
        }
      }
    }
  }

  pre {
    display: block;
    padding: 1em;
    margin-top: 1em;
    background-color: #ccc;
  }

  blockquote {
    display: block;
    padding: .5em;
    margin-top: 1em;
    border-left: .25em solid #ccc;
  }

  table {
    margin-top: 1em;
    border-collapse: collapse;

    th, td {
      padding: .5em;
      border: 1px solid #ccc;
    }
  }

  > br { display: none; }
}

.worksRoot {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  margin-top: -1px;
  background-image: url('/images/pages/works/bg-grid.png');
  background-repeat: repeat-y;
  background-position: top right;
  border-top: 1px solid #000;

  @media(--mobile) {
    flex-direction: column;
  }

  .sidebar {
    width: 20%;
    min-width: 200px;
    border-right: 3px solid #000;

    @media(--mobile) {
      width: 100%;
      border-right: none;
      border-bottom: 3px solid #000;
    }

    h2 {
      padding: calc(var(--bs) *.1);
      margin-top: 0;
      color: #fff;
      text-align: center;
      background-color: #000;
    }
  }

  .grid {
    flex: 1 1 auto;
    width: 100%;
  }

  .cards {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    list-style-type: none;

    @media(--mobile) {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .card {
      display: flex;
      align-items: center;
      justify-content: center;
      aspect-ratio: 1 / 1;
      padding: calc(var(--bs) *.25);
      background-color: #f7f7f7;
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;
      transition: background-color .2s;

      &:hover {
        background-color: #eee;
      }

      img {
        width: 100%;
        user-select: none;
        -webkit-user-drag: none;
        filter: drop-shadow(0 0 20px rgba(0 0 0 / 15%));
      }
    }
  }

  .pagination {
    padding: calc(var(--bs) *.5);
    margin-top: -1px;
    text-align: center;
    border-top: 3px solid #000;
  }
}



/* override setting for swiper */

.swiper-wrapper {
  transition-timing-function: linear !important;
}

.swiper .swiper-slide {
	height: auto;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.swiper .swiper-slide-item {
	height: 100%;
}

/* override grecaptcha */

.grecaptcha-badge { visibility: hidden; }