@charset "UTF-8";
/* CSS Document */
main.under-wrapper {
  padding-bottom: min(150px, 25vw);
}
.under-key-inner {
  padding-left: 20px;
  padding-right: 20px;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  min-height: 280px;
}
#key.under .page-title {
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
}
#key.under .page-title .en {
  color: var(--clr-gry);
  font-size: min(100px, calc(100vw/6));
  font-weight: 900;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -55%;
  white-space: nowrap;
}
#key.under .page-title .en.min{
  font-size: min(100px, calc(100vw/8.5));
} 
#key.under .page-title h1.ja {
  font-size: min(2em, 6vw);
  text-align: center;
  font-weight: 700;
  letter-spacing: .1em;
}
.wq-Form .wq-Option > .wq--label > .wq--main > .wq--name {
  font-size: min(14px, 3.6vw);
}
.under-contents {
  margin-top: min(100px, 20vw);
}
.breadcrumbs {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: min(11px, 3vw);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 10px 1.5em;
}
.breadcrumbs::before {
  content: "";
  width: 100vw;
  height: 100%;
  background: #fff;
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
}
.breadcrumbs > * + *::before {
  content: "";
  width: 4px;
  aspect-ratio: 1/1;
  border: 1px solid;
  border-color: var(--clr-blk) var(--clr-blk) transparent transparent;
  position: absolute;
  left: -1em;
  top: 50%;
  translate: -55% -50%;
  rotate: 45deg;
}
/*archive
=====================================*/
.page-archive-box {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  gap: min(80px, 15vw);
}
.child-categories {
  width: 100%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  gap:10px;
}
.category-back {
  margin-right: auto;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  gap:5px;
  font-weight: 700;
  font-size: min(14px,3.4vw);
}
.category-back .arrow{
  display: block;
  width: min(1.5em,7vw);
  aspect-ratio: 1/1;
  border-radius: 100vmax;
  background: var(--clr-blk) url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20version%3D%221.1%22%20viewBox%3D%220%200%2015.8%2015.8%22%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M15.8%2C1c0-.6-.4-1-1-1H5.8c-.6%2C0-1%2C.4-1%2C1s.4%2C1%2C1%2C1h8v8c0%2C.6.4%2C1%2C1%2C1s1-.4%2C1-1V1ZM1.4%2C15.8L15.6%2C1.7l-1.4-1.4L0%2C14.4l1.4%2C1.4Z%22/%3E%3C/svg%3E') no-repeat center/40%;
  scale: -1 1;
  rotate: -45deg;
  transition:var(--transit);
}
.category-back:hover .arrow{
  background-image: url( "../images/arrow.svg");
  translate:-25% 0;
}
.child-categories .in-title .title{
  color: var(--clr-gry);
  font-size: min(50px, calc(100vw/10));
  font-weight: 900;
}
.child-categories-list {
  max-width: 100%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  overflow-x: scroll;
  white-space: nowrap;
  gap: 5px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -ms-align-items: center;
  align-items: center;
}
.child-categories-list::-webkit-scrollbar {
  display: none;
}
.child-categories-list > li:not(.back) {
  padding: 2px;
  border-radius: 100vmax;
  background: var(--bdr-gry);
  transition: all var(--transit);
}
.child-categories-list > li a {
  display: block;
  border-radius: 100vmax;
  padding: 10px 1.25em;
  font-size: min(14px, 3.4vw);
  background: #fff;
  font-weight: 700;
  transition: all var(--transit);
}
.child-categories-list > li.active {
  background: var(--gra-pale);
}
.child-categories-list li.active a {
  background: var(--clr-blk);
}
.child-categories-list li.active a span {
  background: var(--gra-pale);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media(hover) {
  .child-categories-list > li:hover {
    background: var(--gra-pale);
  }
  .child-categories-list > li:hover a {
    background: var(--clr-blk);
  }
  .child-categories-list li:hover a span {
    background: var(--gra-pale);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.acv-info-list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: min(50px, 8vw) min(40px, 4vw);
}
.acv-info-list li .thumb {
  width: 100%;
}
.acv-info-list li .thumb::before {
  content: "";
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  background: var(--gra-pale);
  overflow: hidden;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
.acv-info-list li .thumb figure {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  isolation: isolate;
  aspect-ratio: 1/0.664;
}
.acv-info-list li .thumb img {
  object-fit: cover;
  height: auto;
  object-position: center;
  transition:scale var(--transit);
}
.acv-info-list li .post-data {
  margin-top: min(20px, 3vw);
}
.acv-info-list li .post-data .post-title {
  font-size: min(18px,4vw);
  line-height: 1.4;
}
.acv-info-list li .post-data .tag {
  font-size: min(12px, 3.4vw);
  line-height: calc(20/14);
}
@media(hover){
  .acv-info-list li:hover .thumb img{
    scale:1.05;
  }
}
.acv-pager {
  margin-top: min(50px, 15vw);
}
.acv-pager .nav-links {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  gap: 10px;
  font-size: min(14px, 3.4vw);
  font-family: sans-serif;
  font-weight: 700;
}
.acv-pager .nav-links > * {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  justify-content: center;
}
.acv-pager .nav-links > a {
  border: 2px solid var(--clr-blk);
}
.acv-pager .nav-links > span {
  background: var(--clr-blk);
  color: #fff;
}
.acv-pager .nav-links > *:not(.prev):not(.next) {
  width: calc(2.25em + 2px);
  aspect-ratio: 1/1;
  border-radius: 100vmax;
}
.acv-pager .nav-links > .prev, .acv-pager .nav-links > .next {
  width: 2.25em;
  aspect-ratio: 1/1;
  border: none;
  /*  background: var(--clr-blk);*/
  border-radius: 100vmax;
}
.acv-pager .nav-links > .prev::before, .acv-pager .nav-links > .next::before {
  content: "";
  width: 5px;
  aspect-ratio: 1/1;
  border: 2px solid;
  border-color: var(--clr-blk) var(--clr-blk) transparent transparent;
  position: absolute;
  border-radius: 2px;
  top: 50%;
  left: 50%;
  rotate: 45deg;
}
.acv-pager .nav-links > .next::before {
  translate: calc(-50% - 2.5px) -50%;
}
.acv-pager .nav-links > .prev::before {
  translate: calc(-50% + 2.5px) -50%;
  scale: -1 -1;
}
/*SINGLE
============================================================*/
.page-single-blc {
  gap: min(80px, 15vw);
}
.single-works-box {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: min(50px, 5vw);
}
.single-works-box .thumb-area {
  aspect-ratio: 1/1;
  overflow: hidden;
}
.single-works-box .thumb-area figure {
  overflow: hidden;
  isolation: isolate;
  border: 2px solid var(--clr-gry);
}
.single-works-box .thumb-area .pc-view {
  width: 78%;
  aspect-ratio: 1/1.25;
}
.single-works-box .thumb-area .sp-view {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 45%;
  aspect-ratio: 1/2;
  border-radius: 10px;
}
.single-works-box .detail-area {
  background: #fff;
  padding: min(50px, 8vw) min(50px, 5vw) min(30px, 8vw);
  border-radius: min(30px, 8vw);
}
.single-works-box .detail-area .entry-head {
  border-bottom: 1px solid;
  gap: 10px;
  padding-bottom: min(15px, 4vw);
}
.single-works-box .detail-area .entry-head .site-title {
  font-size: var(--fs-mid23);
  font-weight: 700;
  letter-spacing: .05em;
  text-indent: .05em;
}
.single-works-box .detail-area .entry-head .link {
  font-size: min(14px, 3.6vw);
}
.works-detail-list {
  margin-top: min(15px, 4vw);
}
.works-detail-list > div {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  padding: 15px;
  line-height: calc(20/14);
}
.works-detail-list > div:not(:last-child) {
  border-bottom: 1px solid var(--bdr-gry);
}
.works-detail-list > div:last-child {
  padding-bottom: 0;
}
.works-detail-list dt {
  width: 6em;
  font-weight: 700;
}
.works-detail-list dd {
  width: calc(100% - 6em);
}
.works-detail-list dd.works-detail {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -ms-align-items: flex-start;
  align-items: flex-start;
}
.works-detail-list dd p.with_sonic::after, .works-detail-list dd p.link-sonicgrow::before {
  content: "*";
  position: absolute;
  top: 0;
  right: 0;
  translate: 125% 0;
  color: #6aa545;
}
.works-detail-list dd p.link-sonicgrow {
  margin-left: auto;
  margin-top: min(3em, 5vw);
  font-size: min(12px, 3.2vw);
}
.works-detail-list dd p.link-sonicgrow::before {
  right: auto;
  top: 0;
  left: 0;
  translate: -125% -10%;
  font-size: min(16px, 3.6vw);
}
.works-detail-list dd p.link-sonicgrow a {
  text-decoration: underline;
  color: #6aa545;
  text-underline-offset: 3px;
}
/*thanks*/
.page-thanks-box {
  width: min(800px, 100%);
  gap: min(50px, 10vw);
}

/*legal contents
==========================================*/
.page-legal-blc{
  gap:min(60px,15vw)
}
.page-legal-box{
  width: 100%;
  gap:min(40px,8vw);
  counter-reset: count 0;    
}
.page-legal-box{}
.legal-item{
  line-height: calc(24/14);
}
.legal-item h3{
  font-weight: 700;
  border-bottom: 1px solid var(--clr-gry);
  padding-bottom: 5px;
}
.legal-item h3::before{
  counter-increment: count 1;
  content: "第"counter(count)"条";   
}
.page-legal-box.site-policy .legal-item h3::before{
  content: counter(count)".";   
}
.legal-item .comment{
  margin-top: 10px;
  font-size: min(14px,3.6vw);
}
.legal-item .comment > * + *{
  margin-top: .5em;
}
ul.num-list{
  counter-reset: number 0;
}
ul.num-list > li{
  padding-left: 1.15em;
}
ul.num-list.parens > li{
  padding-left: 1.45em;
}
ul.num-list > li::before{
  counter-increment: number 1;
  content: counter(number)".";
  position: absolute;
  left: 0;
  top: 0;
}
ul.num-list.parens > li::before{
  content: "("counter(number)")";
}
.dot-list > li{
  padding-left: 1em;
}
.dot-list > li::before{
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}
.page-legal-box.site-policy h2{
  font-size: min(20px,4vw);
  margin-right: auto;
  font-weight: 700;
  padding-left: 1em;
}
.page-legal-box.site-policy h2::before{
  content: "";
  width: .5em;
  aspect-ratio:1/1;
  background: var(--clr-blk);
  position: absolute;
  left: 0;
  top: .35em;
}