@charset "utf-8";
/* top.css */
.top-contents .anz-header {
  text-align: center;
}
.top-contents .gray {
  background-color: var(--anz-gray);
  padding: 10.6% 0;
  margin: 0;
}
.top-contents .anz-header p:has(time) {
  text-align: center;
  margin-top: 5.3vw;
}
.top-contents .anz-header time {
  display: grid;
  font-size: 24px;
  letter-spacing: 0.4em;
  line-height: 1;
  text-indent: 0.4em;
  gap: 5px;
}
.top-contents .anz-header time .y {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
}
.daily-anzu-widget {
  margin: 0;
}
.daily-anzu-widget h3 {
  font-size: 16px;
  margin: 0 0 4vw;
}
.daily-anzu-widget figure {
  width: 69%;
  margin: 0 auto;
}
.daily-anzu-widget p {
  text-align: center;
  margin: 0;
  line-height: calc(24/13);
}
.anz-header {
  padding-bottom: 6vw;
}
.top-anz-title h3,
.top-anz-title[class] p {
  font-size: 1em;
  font-size: 3.73cqw;
  letter-spacing: 0.1em;
  margin: 0;
  line-height: 1;
  text-indent: 0;
}
.top-anz-title {
  display: flex;
  align-items: center;
  gap: .5em;
  justify-content: center;
}
.selected_projects {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template:
    "a" 1fr/1fr;
  width: 100%;
  aspect-ratio: 375/568;
}
.selected_projects > li {
  grid-area: a;
  background: #fff;
  padding: 0;
  margin: 0;
  position: relative;
}
.selected_projects > li > a figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* 確認用 */
main:has(.selected_projects.test) {
  color: #fff;
  background: #555;
  padding: 30px 0;
  grid-template-columns: 1fr;
  h2 {
    margin: 30px 0 10px;
  }
  ul+h2 {
    margin: 50px 0 10px;
  }
  .entry-content {
    grid-column: span 2
  }
}
.selected_projects.test {
  display: block;
  aspect-ratio: inherit;
}
.selected_projects.test > li {
  grid-area: none;
  display: none;
  background: transparent;
  margin-bottom: 30px;
  &:has(img[src*="nd.svg"]) a {
    --title: attr(title);
    figure::after {
      content: var(--title);
      margin: 1em 0;
      display: block;
    }
  }
}
.selected_projects.test > li {
  aspect-ratio: 188/136;
}
:has([id="sp"]:checked) ~ ul {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  grid-auto-rows: 568px;
  margin-bottom: 50px;
  li {
    aspect-ratio: 375 / 568;
    height: 568px;
    width: 375px;
    grid-column: span 1;
    grid-row: span 1;
    .crip .mainv[class] {
      height: 125%;
      object-fit: cover!important;
    }
    figure {
      aspect-ratio: 375/568;
      img[data-w] {
        width: var(--ws)!important;
        left: var(--xs)!important;
        top: var(--ys)!important;
      }
    }
  }
}
.selected_projects.test li figure {
  margin: 0!important;
  /* img[data-w] {
    width: var(--w)!important;
    left: var(--x)!important;
    top: var(--y)!important;
  } */
}
.status_filter {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.status_filter input {
  position: absolute;
  clip: rect(0 0 0 0);
}
.status_filter label {
  border: 1px solid var(--gray);
  font-size: 12px;
  border-radius: 100vh;
  padding: 0 0.5em;
  cursor: pointer;
  background: #eee;
  color: #000;
}
.status_filter label[for="pc"] {
  border-radius: 100vh 0 0 100vh;
  margin: 0 -4px 0 13px;
}
.status_filter label[for="sp"] {
  border-radius: 0 100vh 100vh 0;
}
.status_filter input:checked+label {
  background: oklch(0.8 0.12 250);
}
:has([id="all"]:checked) ~ ul li,
:has([id="draft"]:checked) ~ ul .draft,
:has([id="future"]:checked) ~ ul .future,
:has([id="publish"]:checked) ~ ul .publish,
:has([id="pending"]:checked) ~ ul .pending,
:has([id="private"]:checked) ~ ul .private {
  display: block;
}
/* 確認用ここまで */
.selected_projects .wp-block-video video {
  object-fit: cover!important;
  height: 100%;
}
.selected_projects > li br,
.selected_projects > li p {
  display: none;
}
@media screen and (width < 1100px) {
  .crip .label {
    width: var(--ws)!important;
    left: var(--xs)!important;
    top: var(--ys)!important;
  }
  .selected_projects .crip {
    aspect-ratio: 375/568;
  }
  .selected_projects .crip .mainv[class] {
    height: 125%;
    object-fit: cover!important;
  }
  .top-contents {
    margin: 0 -30px!important;
  }
  .top-contents .gray {
    text-align: center;
    width: 100%;
    min-height: 151.6vw;
    aspect-ratio: 375 / 568;
    container-type: inline-size;
    font-size: 1cqw;
  }
  .top-contents .anz-header time {
    font-size: calc(24/375*100cqw);
  }
  .top-contents .anz-header time .y {
    font-size: calc(11/375*100cqw);
  }
  .daily-anzu-widget p {
    font-size: calc(13/375*100cqw);
    max-width: 69.3%;
    margin: 0 auto;
  }
  .daily-anzu-widget h3 {
    font-size: calc(16/375*100cqw);
  }
  .top-anz-title {
    font-size: calc(14/375*100cqw);
    font-size: 3.75cqw;
  }
}
.crip .mainv[class] {
  animation: op 5s 0s infinite ease-in both;
  .fadeout & {
    opacity: 0;
  }
}
.crip .mainv.no {
  animation-name: unset;
}
.crip .mainv.top {
  animation-name: toTop;
}
.crip .mainv.right {
  animation-name: toRight;
}
.crip .mainv.down {
  animation-name: toBottom;
}
.crip .mainv.left {
  animation-name: toLeft;
}
@keyframes op {
  0%,100% {
    opacity: 0;
  }
  20%,80% {
    opacity: 1;
  }
}
@keyframes toTop {
  0% {
    translate: 0 0;
  }
  100% {
    translate: 0 -10%;
  }
}
@keyframes toRight {
  0% {
    translate: 0 0;
  }
  100% {
    translate: -10% 0%;
  }
}
@keyframes toLeft {
  0% {
    translate: 0 0;
  }
  100% {
    translate: 10% 0;
  }
}
@keyframes toBottom {
  0% {
    translate: 0 0;
  }
  100% {
    translate: 0 10%;
  }
}
.top-news {
  margin: 60px 0;
  /* padding-bottom: 60px; */
}
.top-news > h2 {
  font-size: 18px;
  margin: 36px 0;
}
.top-news div {
  display: contents;
}
.top-news > div ul {
  display: grid;
  gap: 32px;
}
.top-news > div ul > li {
  margin: 0;
  font-size: 14px;
  --wp--preset--color--accent-4: var(--gray);
  color: var(--gray);
}
.top-news > div ul > li *:focus {
  outline: none;
  color: #000;
}
.top-news h2 {
  line-height: 1.5;
}
.top-news time {
  font-size: 12px;
}
.top-news > div ul > li:hover * {
  color: #000;
}
/* クロスフェード用 */
.top-contents > .gray {
  animation: fig .5s 1 ease-out both;
}
.top-contents > .gray.fadeout,
.top-contents > ul.selected_projects > li.fadeout {
  animation: fo .5s 1 ease-in both;
}
.top-contents > ul.selected_projects > li.fadein {
  /* display: block; */
  /* opacity: 1; */
  animation: fi .5s 1 ease-in both;
}
@keyframes fig {
  0% {
    opacity: 0;
    translate: 0 20px;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes fi {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fo {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.top-news .copyright[class] {
  text-align: left;
  margin: 80px 0 0;
  color: var(--gray);
  --wp--preset--font-size--small: 12px;
}
@media screen and (width >= 1100px) {
  .wp-site-blocks > main {
    display: grid;
    grid-template-columns: minmax(220px,auto) minmax(74.4%, 1500px);
    grid-template-areas:
      ". cont"
      "news cont";
    container-type: inline-size;
    margin-right: 0;
    max-width: 1820px;
    column-gap: 50px;
    --wp--preset--spacing--60: 20px;
    padding-right: 0;
    /* max-width: none; */
    /* margin-left: calc(100% - 1820px); */
  }
  .wp-site-blocks:has(main) {
    padding-bottom: 0;
  }
  .top-contents > .gray,
  .selected_projects {
    aspect-ratio: 1500/1085;
    aspect-ratio: 188/136;
  }
  .top-contents > .gray {
    padding: 6% 0 5.5%;
    grid-template-columns: 4fr 7fr 4fr;
    grid-template-rows: 1fr;
    grid-template-areas:
      "h cont .";
    /* aspect-ratio: 1800/1302; */
    display: grid;
  }
  .top-contents .anz-header {
    grid-area: h;
    padding: 0;
    display: grid;
    align-content: space-between;
  }
  .daily-anzu-widget {
    grid-area: cont;
    text-align: center;
  }
  .daily-anzu-widget h3 {
    font-size: 24px;
    letter-spacing: .2em;
    text-indent: .2em;
  }
  .daily-anzu-widget[class] p {
    font-size: 19.5px;
    line-height: calc(36/19.5);
    letter-spacing: .08em;
    text-indent: .08em;
    margin-top: 1em;
    text-align: center;
  }
  .top-contents {
    grid-area: cont;
  }
  .top-news[class] {
    grid-area: news;
    width: 100%;
    margin: 0;
    padding: 0;
    justify-self: start;
  }
  .top-news .copyright[class] {
    text-align: left;
    margin: 80px 0 35px;
    color: var(--gray);
    --wp--preset--font-size--small: 14px;
  }
  .top-news > h2 {
    font-size: 24px;
  }
  .top-news time {
    font-size: 14px;
  }
  .top-news ul h2 {
    font-size: 14px;
    --wp--preset--font-size--x-large: 14px;
  }
  .daily-anzu-widget figure {
    width: 100%;
    margin: 0;
  }
  .top-anz-title {
    flex-direction: column;
  }
  .top-anz-title h3 {
    font-size: clamp(20px, 18px + 0.83vw, 32px);
    letter-spacing: .42em;
    text-indent: .42em;
  }
  .top-anz-title[class] p {
    font-size: 13.4px;
    letter-spacing: .08em;
    text-indent: .08em;
    margin-top: 16px;
  }
  .top-anz-title[class] h3+p {
    order: 3;
    font-size: 20.4px;
    letter-spacing: .4em;
    text-indent: .4em;
    margin-top: 11px;
  }
  .top-contents .anz-header p:has(time) {
    margin: 0;
  }
  .top-contents .anz-header time {
    font-size: 30.72px;
    gap: 35px;
  }
  .top-contents .anz-header time .y {
    font-size: 15px;
  }
}
@media screen and (width >= 1720px) {
  .wp-site-blocks > main {
    max-width: none;
    margin-left: calc((100cqw - 1720px)/2);
  }
}