@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

:root {
  scroll-behavior: smooth;
  --speed1: .1s;
  --speed2: .2s;
  --speed3: .3s;

  --color-00p : transparent;

  --thumbnail-size: 8svw;
  --no-size: 0;

  --bg-image: url('');
}

body {
  &.light{
      /* 白色 */
      --color-base: 236, 238, 239; /*　--surface-container　*/
      --color-25p: rgba(var(--color-base), .35);
      --color-50p: rgba(var(--color-base), .5);
      --color-80p: rgba(var(--color-base), .8);
      --color-90p: rgba(var(--color-base), .9);
      --color-100p: rgba(var(--color-base), 1);
      
      --bg-pattern: url('./image/bg-pattern-l.svg');
  }
  &.dark{
      /* 黒色 */
      --color-base: 29, 32, 33; /*　--surface-container */
      --color-25p : rgba(var(--color-base), .25);
      --color-50p : rgba(var(--color-base), .5);
      --color-80p : rgba(var(--color-base), .8);
      --color-90p : rgba(var(--color-base), .9);
      --color-100p : rgba(var(--color-base), 1);
      
      --bg-pattern: url('./image/bg-pattern-d.svg');
  }

  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--secondary);
  word-break: auto-phrase;

  --bg-gra-1: linear-gradient(
                var(--color-00p) 10%,
                var(--color-25p) 20%,
                var(--color-80p) 80%,
                var(--color-90p) 90%);

  background-image: 
    var(--bg-pattern),
    var(--bg-gra-1),
    var(--bg-gra-2),
    var(--bg-image);

  background-repeat: repeat, repeat, repeat, no-repeat;
  background-position: left, right, right, calc(var(--thumbnail-size) / -2) top;
  background-attachment: fixed;
  --loading-image: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.0%22%20width%3D%2264px%22%20height%3D%2264px%22%20viewBox%3D%220%200%20128%20128%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%3Cpath%20d%3D%22M64%20128A64%2064%200%200%201%2018.34%2019.16L21.16%2022a60%2060%200%201%200%2052.8-17.17l.62-3.95A64%2064%200%200%201%2064%20128z%22%20fill%3D%22%23B0C4DE%22%2F%3E%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22rotate%22%20from%3D%220%2064%2064%22%20to%3D%22360%2064%2064%22%20dur%3D%221800ms%22%20repeatCount%3D%22indefinite%22%3E%3C%2FanimateTransform%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  --zoom-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="rgb(40, 40, 40)"><path d="M792-120.67 532.67-380q-30 25.33-69.64 39.67Q423.39-326 378.67-326q-108.44 0-183.56-75.17Q120-476.33 120-583.33t75.17-182.17q75.16-75.17 182.5-75.17 107.33 0 182.16 75.17 74.84 75.17 74.84 182.27 0 43.23-14 82.9-14 39.66-40.67 73l260 258.66-48 48Zm-414-272q79.17 0 134.58-55.83Q568-504.33 568-583.33q0-79-55.42-134.84Q457.17-774 378-774q-79.72 0-135.53 55.83-55.8 55.84-55.8 134.84t55.8 134.83q55.81 55.83 135.53 55.83Zm-34-76.66v-81.34h-81.33v-66.66H344V-698h66.67v80.67h80.66v66.66h-80.66v81.34H344Z"/></svg>');
}

ol,
ul,
li {
  list-style: none;
  padding: 0;
}

a {
  transition: all var(--speed2);

  &:hover {
    color: var(--outline);
  }
}
button, .button {
  font-family: "Outfit", sans-serif;
  font-weight: 500;
}

img {
  vertical-align: middle;
}


/*  */
/* alpineとBeerCSSの設定 */
/*  */
[x-cloak] { display: none !important; }
:is(.dark [class*="blur"], [class*="blur"].dark, .light [class*="blur"], [class*="blur"].light) {
  background-color: var(--color-25p) !important;
}
:is([class *= "-shadow"]) {
  --_to: to bottom;

  background-image: linear-gradient(var(--_to), var(--color-25p) 0, transparent 50%) !important;
  background-origin: border-box;
  background-clip: border-box;
  border: solid 2px transparent;
}
.top-shadow {
    --_to: to bottom;
}
.bottom-shadow {
    --_to: to top;
}
.left-shadow {
    --_to: to right;
}
.right-shadow {
    --_to: to left;
}
.overflow- {
    backdrop-filter: blur(10px) saturate(60%);
    -webkit-backdrop-filter: blur(10px) saturate(60%);
    background-color: rgba(17, 25, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.125);
}
img.emoji {
  height: 1.25em;
  width: 1.25em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.25em;
}

/*                       */
/* てがろぐのクラスに対する設定 */
/*                       */
*:is(.nodata.nolist, .recountlink.Login-Required) {
  grid-area: auto/span 12;
}
span.num:is(a:hover ~ span) {
  color: var(--outline) !important;
}
p.situation {
  /* font-weight: 600; */
  margin: 0;
  margin-left: .5rem;
  color: var(--on-surface);
  text-shadow: 0 0 .125rem var(--on-primary);
}
span.situation-hits { /* カテゴリーとかタグを表示したときの横に表示される数字の装飾 */
  --_x: .5rem;
  --_y: .25rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  font-size: .6875em;
  text-transform: none;
  z-index: 2;
  padding: 0.125rem .55rem;
  min-block-size: 1rem;
  min-inline-size: 1rem;
  background-color: var(--error-container);
  color: var(--error);
  line-height: normal;
  border-radius: 1rem;
  inset: 50% auto auto 50%;
  transform: translate(var(--_x, 50%), var(--_y, -50%));
  font-family: var(--font);
  inset: auto !important;
}

ul.cattree  {
  --_padding: 1.5svw;
  margin: 0;
  padding: calc(var(--_padding) * .25) var(--_padding);
}
a.catlink {
  position: relative;
  padding: 0rem 3rem .125rem .5rem;
  margin-right: -2.5rem;

  &[class *= 'cat-'] {
      border-bottom: solid 1px var(--outline-variant);
    }
  &.cat-{
      padding: 0 1rem .125rem .5rem;
    }
  &:hover{
      font-size: 1rem;
    }
}
span.catdescription {
  display: none;
  position: absolute;
  left: -1rem;
  opacity: 0;
  width: fit-content;
  padding: 0.125rem .5rem;
  line-height: 1rem;
  color: var(--on-primary);
  font-size: clamp(.5rem, 1svw, 0.5rem);
  background: var(--on-primary-container);
  border-radius: 3px;
  transition: all var(--speed3);

  &:is(a.catlink:hover ~ *){
    display: block;
    z-index: 100;
    opacity: .8;
  }
}
a.categorylink {
  color: var(--on-surface);
  margin-left: .5rem;
  text-shadow: 0 0 .125rem var(--on-primary);
  
  &:hover {
      color: var(--outline) !important;
    }
}
span.catseparator::after {
  display: inline-block;
  margin: 0 .25rem;
  padding: 0;
  content: ">";
  color: var(--outline-variant);
  transform: scaleX(50%);
}

ul.hashtaglist {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: .5vw;
  align-content: center;
  justify-content: center;
  gap: .125rem;
}
li:is(.hashtaglist li) {
  font-size: .75rem;
  margin-right: 5px;
  margin-bottom: 5px;
  background: var(--color-25p);
  line-height: 1;
  vertical-align: text-top;
  padding: 4px 5px;
  border: solid 1.5px;
  border-radius: 1rem;
  transition: all var(--speed2);

  & > .num {
      font-size: .5rem;
      margin-left: 3px;
    }
  &:has( > a.taglink:hover){
    color: var(--outline);
    background-color: var(--color-90p);
  }
}
a.taglink {

  &:is(ul.hashtaglist a)::before {
      content: "#";
      color: var(--color-blue-1);
    }
  &:is(body.onelog [data-style = "onelog-body"] a) {
      justify-content: flex-end; 
      font-size: .75rem;
      margin-right: 5px;
      margin-bottom: 5px;
      background: var(--color-25p);
      line-height: 1;
      vertical-align: text-top;
      padding: 4px 5px;
      border: solid 1.5px;
      border-radius: 1rem;
    }
  &:is(body.onelog [data-style = "onelog-body"] a):hover {
      background: var(--color-90p);
    }
}
ul.datelimitlist {
  --_padding: 1.25svw;
  margin: 0;
  padding: var(--_padding);
  scroll-snap-type: y proximity;
}
ul.datelimitsublist {
  margin: 0;
  padding: .5rem 1rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease;
  opacity: 0;

  &:is(a.datelistlink:focus + .num + ul) {
      max-height: 500px;
      opacity: 1;
    }
  &:is(li.datelimit-year:hover ul) {
      max-height: 500px;
      opacity: 1;
    }
}
li.datelimit-year {
  margin-left: .5svw;

  &::before {
      position: absolute;
      top: 0;
      left: 5.75rem;
      content: "\e145";
      font-family: "Material Symbols Outlined";
      padding: 0 .35rem;
      background-color: var(--color-50p);
      border-radius: 2px;
    }
  &:hover::before {
      content: "\e69b";
    }
  &:has(>a.datelistlink:hover)::before {
    top: .5rem;

    top: 0;
    left: 6.25rem;
  }
}
li.datelimit-month {
  scroll-snap-align: end;
}
a.datelistlink:hover {
  font-size: 1.125rem;
}

a.imagelink {
  overflow: hidden;
  width: fit-content;
  border: solid 0.125px transparent !important;

  &:is(body:not(.onelog) a) {
      transition: all var(--speed2);
    
      &:is([data-style=onelog-box]:hover *):first-of-type {
          scale: 200%;
          opacity: .35;
        }
    }
  &:is([data-style = "image-container"] a){
      cursor: var(--zoom-icon), zoom-in;
      width: fit-content;
      background-color: var(--background);
    }
  &:is([data-style = "image-container"] a):first-child {
      width: 100%;
      margin: 5rem 0;
      background-color: var(--color-00p);
    }
  &:is([data-style = "image-container"] a):nth-child(n+2) {
      aspect-ratio: unset;
      box-sizing: content-box;
    }

  &.nsfw {
      /* --_error: #FF4B00; */
      --_error: var(--inverse-surface);
      position: relative;
      overflow: hidden;
      outline: dashed 2px var(--_error);
      outline-offset: -2px;

      &::before {
          position: absolute;
          top: 30%;
          left: 50%;
          transform: translateY(-50%) translateX(-50%); 
          z-index: 100;
          content: "\e8f5";
          font-family: "Material Symbols Outlined";
          font-size: 2.5rem;
          color: var(--_error);
          font-weight: bold;
          text-shadow: 0px 0px 3px var(--surface-container-high);
        }
      &::after {
          position: absolute;
          top: 60%;
          left: 50%;
          transform: translateY(-50%) translateX(-50%); 
          z-index: 100;
          content: "18禁イラストにつき、閲覧注意";
          font-size: .75rem;
          color: var(--_error);
          font-weight: bold;
          text-shadow: 0px 0px 3px var(--surface-container-high);
          word-break: keep-all;
          text-align: center;
        }
    }
}
img.embeddedimage:is(a.imagelink img) {
  color: transparent;
  border-radius: unset;
  background-image: var(--loading-image);
  background-size: calc(var(--thumbnail-size) / 3);
  background-repeat: no-repeat;
  background-position: center;
  background-color: unset !important;
  
  &:is(body:not(.onelog) img) {
      width: var(--thumbnail-size);
      height: auto;
      aspect-ratio: 1;
      object-fit: cover;
    }
  &:is([data-style="image-container"] img) {
      width: fit-content;
      width: 100%;
      height: auto;
      max-height: 80svh;
      max-width: 60svw;
      aspect-ratio: auto 3 / 4;
      object-fit: contain;

    &:is(a.imagelink:nth-child(n+2) img) {
          width: min(50svw, var(--thumbnail-size) * 2) !important;
          object-fit: cover;
        }
    }
  &.nsfw{
      --_blur: 5px;

      opacity: .35;
      filter: blur(var(--_blur));
      transform: scale(1.035);
    }
}

span.embeddedmovie {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  border: none;
}

iframe:is(span.embeddedmovie iframe) {
  width: 80svw;
  height: auto;
  aspect-ratio: auto 16 / 9;
  
  &:is(body:not(.onelog) iframe) {
    aspect-ratio: 1;
  }
}

div.twitter-tweet.twitter-tweet-rendered {
  margin-top: 0 !important;
}

a.pagenumlink {
  --_size: 2rem;
  --_maegin: .5rem;
  --_padding: .75rem;

  box-sizing: content-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: var(--_size);
  font-size: .875rem;
  font-weight: 500;
  color: var(--on-secondary-container);
  padding: 0 var(--_padding);
  background-color: var(--secondary-container);
  margin: 0 var(--_maegin);
  border-radius: var(--_size);
  transition: transform var(--speed3), border-radius var(--speed2), padding var(--speed3);
  -webkit-user-select: none;
  user-select: none;
  gap: var(--_maegin);
  line-height: normal;
  transition: all var(--speed2);

  &:hover{
    color: var(--on-secondary);
  }
  &:active {
    border-radius: var(--_maegin) !important;
  }
}
a.pagenumhere {
  color: var(--on-secondary);
  background-color: var(--secondary);
}


/*　　　　　　　　*/
/* 　新規投稿用  */
/*  　　       */
div#quick-post {
  display: flex !important;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: var(--outline);

  & form.postform {
      background-color: var(--color-80p);
      padding: clamp(5dvw, 5rem, 10dvw);
      border-radius: 5px;
      height: 80dvh;
      width: min(80dvw, 50rem);
    }
  & textarea:is(p.line-textarea *) {
      width: 100%;
    }
  & div.line-control {
      display: grid;
    }
  & input:is(div.line-control span input) {
      background: var(--secondary);
      color: var(--on-secondary);
      border: solid 1.3px var(--outline);
      padding: 0 4px;
      margin-right: 3px;
    }
}


/*                                */
/* 自分で追加したデザインクラスに対する設定 */
/*                                */
div:has(>main) {
  background: unset !important;
}
header[data-style = header] {
  height: 100svh;
}
hgroup:has(h1[data-style = site-title]) {
  flex-flow: row-reverse;
}
img[alt = "user-icon"] {
  border: solid 1.5px var(--primary) !important;
  
  &:is([data-style="site-title"] ~ *) {
      margin-top: 0.75rem;
    }
}
h1[data-style = site-title] {
  
  --_shadow: .15rem;
  display: block;
  margin: 0;
  padding: 0;
  color: var(--primary);
  font-family: 'Anton', impact;
  font-size: 3rem;
  font-weight: 500;
  text-align: center;
  letter-spacing: -.012rem;
  text-shadow: 0 0 var(--_shadow) var(--on-primary);

  &:is([data-style = header] h1) {
      --_shadow: .25rem !important;
      width: 0;
      font-size: 5rem;
    }
}
h2[data-style = sub-title]:is([data-style = header] h2) {

  color: var(--secondary);
  font-size: .85rem;
  font-family: 'Anton', "M PLUS 1p", impact;
  font-weight: 400;
  letter-spacing: 0.1rem;
  text-align: left;
  margin: 0;
  text-shadow: 0 0 .125rem var(--on-primary);
}
h3[data-style = site-guide]:is([data-style=header] h3) {
  color: var(--tertiary);
  font-size: 0.65rem;
  margin: 0;
  text-align: left;
  text-shadow: 0 0 .125rem var(--on-primary);

  &:empty {
      display: none;
    }
}
nav:is(header.top hgroup:has([data-style = "site-title"]) + nav) {
  height: fit-content !important;
  margin-top: 3rem !important;

  &::after {
    display: none;
  }
} 
main[data-style = main-aria]{
  max-inline-size: unset;
  scroll-behavior: auto;
  scroll-margin-top: 5svh;

  &:is(body:not(.onelog) main) {
      max-width: 100%;
      max-width: -moz-available;
      min-height: 80svh;
    }
}
div[data-style = "top-space"] {
  width: 100%;
  height: auto;
  aspect-ratio: 6;
  background-color: transparent;

  &:is(body.onelog div) {
    display: none;
  }
}
div[data-style="main-container"] {
  --_gap: 2.5svw;
  
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--_gap);
  block-size: auto;
  padding: 0 5svw;
  padding-top: 5svh;

  &:has(section) {
    display: block;
    max-width: 80dvw;
    padding: 0;
  }
}
article[data-style = onelog-box] {
  position: relative;
  width: min(9svw, var(--thumbnail-size));
  height: auto;
  overflow: hidden;
  aspect-ratio: 1;
  margin-block-start: unset;
  border: unset !important;
  cursor: var(--zoom-icon), zoom-in;
  box-shadow: 2px 2px 15px 0px rgba(0, 0, 0, .5) !important;

  &:not(article:has(a.imagelink, span.embeddedmovie, div.twitter-tweet.twitter-tweet-rendered)) {
      text-shadow: 0 0 5px var(--on-primary);
      background-image: linear-gradient(var(--color-50p), var(--color-25p)),
                        url(./image/paper-image.jpg) !important;                  
      background-position: 50% 50%;
    }
}
div[data-style = onelog-body] {
  overflow: hidden;
  border-radius: unset;

  &:not(div:has(a.imagelink, span.embeddedmovie, div.twitter-tweet.twitter-tweet-rendered)) {
      border: solid .5rem transparent;
      aspect-ratio: 1;

      &:is(section div) {
        aspect-ratio: unset;
      }
    }
  &:is(body.onelog div) {
      padding-top: 2rem;
      background: unset !important;
    }
  &:is(body:not(.onelog) [data-style=onelog-box]:hover div) {
      filter: blur(2px);
    }
}
section[data-style="image-container"] {
  width: 100%;
  justify-content: center;
  align-items: center;

  &:has(a.imagelink:nth-child(n+2)) {
      display:flex;
      flex-wrap:wrap;
      gap: 2rem;
    
    }
  &:has(a.imagelink:nth-child(n+5):last-child)::after {
      display: block;
      content: "";
      width: calc(var(--thumbnail-size) * 2);
    }
}
section[data-style="onelog-article-content"] {
    width: 100%;
    margin-inline: auto;
    max-inline-size: max-content;
    text-shadow: 0 0 5px var(--on-primary);
    
    & *:is(ol, ul, li) {
      list-style: auto !important;
    }
    & a:is(.imagelink, .taglink) {
      display: none;
    }
    &:has(span.embeddedmovie) {
        padding: 0 10svw;
      }
}
a[data-style = "onelog-link"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 初期は背面 */
  opacity: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-50p); /* オーバーレイ色 */
  transition: all var(--speed3) ease;
  cursor: var(--zoom-icon), zoom-in;


  &:is([data-style=onelog-box]:hover a) {
      z-index: 100;
      opacity: 1;
      pointer-events: auto;
    }
    
  & i {
      color: var(--secondary);
      font-size: 2rem;
      text-decoration: none;
    }
}
a[data-style *= "share-"] {
  position: relative;
  color: whitesmoke;
  font-size: .65rem;
  font-weight: 700;
  padding: 0 .5rem;
  border-radius: 3px;
  
  &::before {
    content: "+";
    display: block;
    position: absolute;
    width: 100%;
    opacity: 0;
    color: transparent;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.3);
    transition: all var(--speed3);
  }
  &:hover::before {
    opacity: 1;
  }
}
a[data-style = "share-twitter"] {
  background-color: #1DA1F2;
}
a[data-style = "share-facebook"] {
  background-color: #1877f2;
}
a[data-style = "share-line"] {
  background-color: #06C755;
}
a[data-style = "share-misskey"] {
  background: #2ba3bc;
}
nav[data-style = side-bar] {
  max-width: 20dvw;
  max-height: 100svh;
  overflow: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important;
  scroll-snap-type: y mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--color-00p) var(--color-00p);
  transition: all var(--speed1);
  direction: rtl;

  &:hover {
      scrollbar-color: var(--primary) var(--color-50p);
    }
  &:is(body.grandhome nav) {
      margin-top: 100svh;
      
      &.s {
          margin-top: 0;  
        }
    }
  &.s{
      max-width: unset;
      max-height: unset;
    }
}
li:is(nav[data-style = side-bar] > ul li){
  direction: ltr;
  text-align: start;

  &:is([data-style = home-button]) {
      width: 100%;
      margin-bottom: 15svh !important;
      text-align: center;
    }
}
li[data-style = side-nav] {
  width: 90%;
  margin: .125rem;
  padding: .5rem;
  --_blur: .5rem;
  -webkit-backdrop-filter: blur(var(--_blur));
  backdrop-filter: blur(var(--_blur));
  background-color: var(--color-25p) !important;

  & h6{
      font-size: 1.125rem !important;
    }
}
menu[data-style="side-nav"] {
  --_size: 1rem;
  --_small-size: .75rem;

  font-size: var(--_size);
  text-shadow: 0px 0px 5px var(--surface-container-high);
  
  & span.num:is(a.catlink + span)  {
      font-size: var(--_small-size);
    }
  & ul.hashtaglist {
      gap: clscalc(var(--_size) / 2);
    }
  & li:is(.hashtaglist li) {
      font-size: var(--_size);
    }
  & span.num:is(a.taglink + span)  {
      font-size: var(--_small-size);
    }
  & ul.datelimitsublist{
      margin: 0;
      padding: var(--_small-size);
    }  
  & ul.datelimitsublist {
      color: var(--outline);

      & *:is(li.datelimit-month:has(a.datelistlink:hover), a.datelistlink:hover) {
          color: var(--secondary);
        }
    }
  & span.num:is(.datelistlink + span) {
      font-size: var(--_small-size);
    }
  & span.year:is(.datelistlink span) {
      font-size: var(--_small-size);
      margin-right: calc(var(--_size) / 2);
;
    }
}
:where([data-posts="1"], [data-posts="2"]) {
  display: none;
}
/*              */
/* メディアクエリ別 */
/*              */
@media only screen and (992px <= width) {
  *:is(.m, .s):not(.l) {
    display: none;
  }
  body {
    --bg-gra-2: linear-gradient( to right,
                                var(--color-00p) 0%,
                                var(--color-bg-50p) 20%,
                                var(--color-bg-80p) 30%,
                                var(--color-bg) 55svw);
                
    background-size: cover, cover, cover, 60svw;
    background-color: var(--surface);
  }
}

@media only screen and (601px <= width < 992px) {
  :root{
    --thumbnail-size: 10svw;
  }
  *:is(.l, .s):not(.m){
    display: none;
  }
  body {
    --bg-gra-2: linear-gradient( to right,
                                var(--color-00p) 0%,
                                var(--color-bg-25p) 25%,
                                var(--color-bg-50p) 50%,
                                var(--color-bg-80p) 80%,
                                var(--color-bg) 90%);

    background-position: left, right, right, left top;
    background-size: cover, cover, 100svw, cover;
  }

  img.embeddedimage:is(body:not(.onelog) img) {
    width: calc( var(--thumbnail-size) + var(--_gap) );
  }
  nav[data-style = side-bar] {
    direction: ltr;
  }
  ul.datelimitlist {  
    padding: .125rem;
  }
  ul.datelimitsublist {
    padding: .5rem .75rem;
  }
  button:is([data-style = side-bar]:is(.m) button) {
    overflow: visible;
    padding: 0 .75rem;
    font-size: 1.875svw;
    text-wrap: nowrap;
  }
  section[data-style="onelog-article-content"]:is(body.onelog section) {
      align-items: center;
      justify-content: center;
      max-width: 60dvw;
      margin-inline: auto;
      max-inline-size: max-content;
  }
}

@media only screen and (width < 601px) {
  :root{
    --thumbnail-size: 50svh;
  }
  *:is(.m, .l):not(.s){
    display: none;
  }
  body {
    --bg-gra-2: linear-gradient(
        to right,
        var(--color-00p) 0%,
        var(--color-bg-25p) 0%,
        var(--color-bg-50p) 20%,
        var(--color-bg-80p) 50%,
        var(--color-bg) 200%);

    background-position: left, right, right, center top;
    background-size: cover, cover, cover, cover;
  }
  header {
    min-block-size: 0;
  }
  a.imagelink{
    width: 100%;
    
    &:is(body:not(.onlog) [data-style=onelog-box]:hover a):first-of-type {
        scale: unset;
        opacity: unset;
      }
    &:is([data-style = "image-container"] a):first-child {
        margin: unset;
        width: 100%;
    }
  }
  img.embeddedimage:is(a.imagelink img) {

    &:is(body:not(.onelog) img) {
        width: var(--thumbnail-size);
        aspect-ratio:
        unset;
      }
    &:is([data-style = "image-container"] img) {
        max-width: 100dvw;
        height: auto;
        max-height: 100svh;
        aspect-ratio: auto 3 / 4;
        border-radius: unset;
      }
  }
  ul.cattree {
    margin-left: 1.5rem;
  }
  ul.datelimitlist {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    align-self: center;
    scroll-snap-type: y proximity !important;
  }
  ul.datelimitsublist {
    background-color: var(--active);
    margin: .5rem;
    padding: .5rem;
    text-align: center;
  }
  li.datelimit-month {
    scroll-snap-align: end !important;

    &:hover {
      font-size: 1.5rem;
    }
  }

  h1[data-style = site-title] {
    font-size: 2rem;

    &:is([data-style=header] h1) {
        font-size: 3rem;
        padding-left: 0;
      }
  }
  img[alt="user-icon"]:is([data-style="site-title"] ~ img){
    width: 2rem;
    height: auto;
    aspect-ratio: 1;
    margin-top: 0.5rem;
  }
  div[data-style = "top-space"] {
    display: none;
  }

  article[data-style = onelog-box] {
    aspect-ratio: unset;
    aspect-ratio: auto;
    width: unset;
    max-height: 65svh;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    cursor: unset !important;
    box-shadow: none !important;
  }
  div[data-style = onelog-body] {
    padding: 0 1rem 0 2rem;

    &:is(body:not(.onelog) div){
        overflow: hidden;
        pointer-events: none;
        user-select: none;
      }
    &:is(body:not(.onelog) [data-style=onelog-box]:hover div) {
        filter: unset !important;
      }
  }
  a.imagelink:is([data-style = "onelog-body"] a) {
    margin-left: 5svw;
    width: fit-content;
    
    &:is(body:not(.onelog) a) {
      border: none !important;
    }
  }
  img.embeddedimage:is(a.imagelink img) {
    width: 100% !important;

    &:is(body:not(.onelog) a.imagelink:nth-child(n+2) img) {
      display: none !important;
    }
  }
  section[data-style="onelog-article-content"]:is(body.onelog section) {
    /* max-width: 75svw; */
    padding: 1rem;
    margin: 0 !important;
  }
  p[data-style = onelog-date] {
    margin: .5rem;
    border-bottom: 1px solid var(--outline-variant);
  }
  a[data-style = "onelog-link"]:is(.s) {
    z-index: 100;
    opacity: 1;
    top: unset;
    bottom: 0;
    height: 15rem;
    padding-top: 13rem;
    padding-bottom: 1rem;
    border: 0;
    border-radius: 0;
    background-color: unset;
    background-image: linear-gradient(var(--color-00p) 0, var(--color-80p) 50%, var(--color-100p) 100%) !important;
    
    cursor: pointer !important;

    &:hover {
        cursor: pointer !important;
        color: var(--secondary);
      }

    & span {
        transition: all var(--speed3);
      }
  }
  div[data-style="main-container"]:has(section) {
    max-width: unset;
  }
}


/*                      */
/* lightboxに対する追加設定 */
/*                      */
div.lum-lightbox {
  z-index: 1000;
}
.luminous {
	max-width: 90vw;
}
button.lum-gallery-button,
div.lum-close-button {
  display: none;
}
.lum-lightbox-inner img {
    max-height: 100%;
    max-width: 95svw !important;
  }
@media (hover: none) {
  div[data-style="main-container"] {
    --speed3: 0;
  }
}