/*
Theme Name: nocks graphic collaboration
Theme URI: http://norry.sakura.ne.jp/profile/
*/
.c-mv .left-area .img-container {
  width: 100%;
  aspect-ratio: 3083/2133;
  position: relative;
}
.c-mv .left-area .img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-mv .right-area {
  display: flex;
  flex-wrap: wrap;
}
.c-mv .right-area li {
  width: 50%;
}
.c-mv__work figure {
  width: 100%;
  height: 100%;
}
.c-mv__work figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-mv__work .txt-area {
  border-top: 1px solid #423F3B;
  padding: 16px 24px;
}
@media screen and (min-width: 540px) {
  .c-mv__work .txt-area {
    padding: 24px 32px 26px;
  }
}

/* PC(desktop) setting */
@media screen and (min-width: 1280px) {
  .c-mv {
    display: flex;
  }
  .c-mv .left-area {
    width: 69.056%;
  }
  .c-mv .right-area {
    width: 30.944%;
    flex-direction: column;
    border-left: 1px solid #423F3B;
  }
  .c-mv .right-area li {
    width: 100%;
  }
}
.c-urge__contact {
  position: relative;
  z-index: 10;
  background: #423F3B;
  color: #fff;
  max-width: 1800px;
  margin: 0 auto;
}
.c-urge__contact .left-area {
  padding: 16px 24px 8px;
}
.c-urge__contact .left-area h2 {
  font-size: clamp(5rem, 11.5vw, 12.5rem);
  font-weight: 700;
  line-height: 1;
}
.c-urge__contact .right-area {
  padding: 0 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
}

/* PC setting */
@media screen and (min-width: 1024px) {
  .c-urge__contact {
    display: flex;
  }
  .c-urge__contact .left-area {
    width: 50%;
    padding: 16px 24px;
    border-right: 1px solid #fff;
  }
}
@media screen and (min-width: 1024px) and (min-width: 540px) {
  .c-urge__contact .left-area {
    padding: 24px 32px 26px;
  }
}
@media screen and (min-width: 1024px) {
  .c-urge__contact .right-area {
    width: 50%;
    padding: 16px 24px;
  }
}
@media screen and (min-width: 1024px) and (min-width: 540px) {
  .c-urge__contact .right-area {
    padding: 24px 32px 26px;
  }
}
.c-btn__main {
  display: inline-block;
  border: 1px solid #423F3B;
  height: 24px;
  padding: 6px 38px 0px 16px;
  line-height: 1;
  border-radius: 12px;
  font-size: 0.75rem;
  position: relative;
}
.c-btn__main::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-right: 3px solid #f00;
  border-bottom: 3px solid #f00;
  transform: rotate(-45deg) translateY(calc(-50% - 2px));
  position: absolute;
  top: 50%;
  right: 16px;
  transition: all 0.5s ease-in-out;
}
.c-btn__main:hover::after {
  right: 2px;
  transition: all 0.3s ease-in-out;
}
.c-btn__main.white {
  color: #fff;
  border: 1px solid #fff;
}
.c-btn__btn-area {
  display: block;
  max-width: 1800px;
  margin: 0 auto;
  text-align: right;
  padding: 16px 24px;
}
@media screen and (min-width: 540px) {
  .c-btn__btn-area {
    padding: 24px 32px 26px;
  }
}
.c-btn__btn-area {
  position: relative;
  z-index: 10;
  background: #F6F5F3;
}
.c-btn__share-btn {
  display: inline-block;
  border: 1px solid #423F3B;
  height: 24px;
  padding: 6px 38px 0px 16px;
  line-height: 1;
  border-radius: 12px;
  font-size: 0.75rem;
  position: relative;
}
.c-btn__share-btn::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-right: 3px solid #f00;
  border-bottom: 3px solid #f00;
  transform: rotate(-45deg) translateY(calc(-50% - 2px));
  position: absolute;
  top: 50%;
  right: 16px;
  transition: all 0.5s ease-in-out;
}
.c-btn__share-btn:hover::after {
  right: 2px;
  transition: all 0.3s ease-in-out;
}

.c-ttl--main {
  padding: 16px 24px;
}
@media screen and (min-width: 540px) {
  .c-ttl--main {
    padding: 24px 32px 26px;
  }
}
.c-ttl--main {
  background: #F6F5F3;
  border-bottom: 1px solid #423F3B;
  font-size: 1.5rem;
  font-weight: 700;
}
.c-ttl--main span {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.625rem;
  font-weight: 400;
}
.c-ttl--newreleaseitem--main {
  padding: 16px 24px;
}
@media screen and (min-width: 540px) {
  .c-ttl--newreleaseitem--main {
    padding: 24px 32px 26px;
  }
}
.c-ttl--newreleaseitem--main {
  background: #F6F5F3;
  border-top: 1px solid #423F3B;
  border-bottom: 1px solid #423F3B;
}
.c-ttl--newreleaseitem--main h2 {
  font-size: 1.25rem;
  font-weight: 700;
  position: relative;
  margin-bottom: 12px;
}
.c-ttl--newreleaseitem--main h2 .c-btn__main {
  font-weight: 400;
  margin-top: 8px;
}
.c-ttl--newreleaseitem--main p {
  font-size: 0.875rem;
  line-height: 1.3;
  letter-spacing: 1px;
}
.c-ttl__item {
  padding: 16px 24px;
}
@media screen and (min-width: 540px) {
  .c-ttl__item {
    padding: 24px 32px 26px;
  }
}
.c-ttl__item h3 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.c-ttl__item h3 span {
  font-weight: 400;
}
.c-ttl__work {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.c-ttl__work a {
  display: inline-block;
  margin-bottom: 12px;
}
.c-ttl__core-idea {
  font-size: 1.5rem;
  font-weight: 700;
}
.c-ttl__core-idea span {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.625rem;
  font-weight: 400;
}
.c-ttl__contents {
  font-size: 2.5rem;
  font-weight: 700;
  transform: rotate(-90deg);
  transform-origin: top left;
  position: absolute;
}
.c-ttl--sub {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.c-ttl--sub p {
  height: 24px;
  line-height: 24px;
  padding-right: 8px;
  border: 1px solid #423F3B;
  display: flex;
  gap: 8px;
  font-weight: 700;
  font-size: 0.75rem;
}
.c-ttl--sub p::before {
  content: "";
  width: 24px;
  height: 100%;
  display: block;
  background: #f00;
  border-right: 1px solid #423F3B;
}
.c-ttl--sub h3 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
}

/* PC setting */
@media screen and (min-width: 1024px) {
  .c-ttl--main {
    font-size: 2rem;
  }
  .c-ttl--main span {
    margin-left: 28px;
    font-size: 1rem;
  }
  .c-ttl--newreleaseitem--main h2 {
    font-size: 2rem;
  }
  .c-ttl--newreleaseitem--main h2 .c-btn__main {
    position: absolute;
    top: 6px;
    right: 0;
    margin-top: 0;
  }
  .c-ttl--newreleaseitem--main p {
    font-size: 1rem;
  }
  .c-ttl__item {
    width: calc(100% - 150px);
  }
  .c-ttl__item h3 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .c-ttl__work {
    font-size: 3rem;
    flex-direction: row;
    align-items: flex-end;
    gap: 16px;
  }
  .c-ttl__core-idea {
    font-size: 2rem;
  }
  .c-ttl__core-idea span {
    margin-left: 28px;
    font-size: 1rem;
  }
  .c-ttl__contents {
    font-size: 12.5rem;
  }
  .c-ttl--sub {
    margin-bottom: 24px;
  }
  .c-ttl--sub h3 {
    font-size: 1.5rem;
  }
}
.c-list__sns {
  display: flex;
  gap: 8px;
}
.c-list__sns li:first-child a img {
  height: 28px;
  aspect-ratio: 1/1;
}
.c-list__sns li:last-child a img {
  height: 20px;
  width: auto;
  margin-top: 4px;
}
.c-list__new-release--sub li {
  border-bottom: 1px solid #423F3B;
}
.c-list__new-release--sub li:nth-of-type(2n-1) {
  border-right: 1px solid #423F3B;
}
.c-list__new-release--sub li a figure {
  width: 100%;
  aspect-ratio: 1/1;
  position: relative;
}
.c-list__new-release--sub li a figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}
.c-list__items {
  display: flex;
  flex-wrap: wrap;
}
.c-list__items li {
  width: 50%;
  border-top: 1px solid #423F3B;
}
.c-list__items li:not(:last-child) {
  border-right: 1px solid #423F3B;
}
.c-list__items li:first-of-type, .c-list__items li:nth-of-type(2) {
  border-top: none;
}
.c-list__items li figure {
  width: 100%;
  aspect-ratio: 3083/2133;
  position: relative;
}
.c-list__items li figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.c-list__items li .c-ttl__item {
  width: 100%;
}
.c-list__core-idea {
  background: #fff;
}
.c-list__core-idea li {
  padding: 16px 24px;
}
@media screen and (min-width: 540px) {
  .c-list__core-idea li {
    padding: 24px 32px 26px;
  }
}
.c-list__core-idea li {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid #423F3B;
}
.c-list__core-idea li p {
  border-left: 1px solid #423F3B;
  padding-left: 24px;
}
.c-list__2column-dl {
  display: flex;
  flex-wrap: wrap;
}
.c-list__2column-dl > * {
  padding: 12px 24px;
  font-size: 0.875rem;
}
.c-list__2column-dl dt {
  width: 160px;
  background: #D9D9D9;
}
.c-list__2column-dl dd {
  width: calc(100% - 160px);
  background: #fff;
}
.c-list__tag {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row !important;
  gap: 24px 16px;
}
.c-list__tag li {
  display: inline-block;
  border: 1px solid #423F3B;
  height: 24px;
  padding: 6px 38px 0px 16px;
  line-height: 1;
  border-radius: 12px;
  font-size: 0.75rem;
  padding: 5px 16px 0;
}
.c-list__color-tips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.c-list__color-tips li {
  display: flex;
  gap: 8px;
}
.c-list__color-tips li .clip {
  width: 30px;
  height: 30px;
}

/* PC setting */
@media screen and (min-width: 1024px) {
  .c-list__new-release--sub li:nth-of-type(2n-1) {
    border-right: none;
  }
  .c-list__new-release--sub li a {
    display: flex;
  }
  .c-list__new-release--sub li a figure {
    width: 150px;
    height: 150px;
  }
  .c-list__items li {
    width: 25%;
    border-top: none;
    border-bottom: 1px solid #423F3B;
  }
  .c-list__core-idea li {
    flex-direction: row;
    gap: 24px;
  }
  .c-list__core-idea li p {
    border-left: none;
    padding-left: 0;
  }
  .c-list__core-idea li > *:first-child {
    border-right: 1px solid #423F3B;
    padding-right: 24px;
    width: 364px;
  }
  .c-list__core-idea li > *:last-child {
    font-size: 2rem;
    line-height: 1.3;
    width: calc(100% - 364px);
  }
  .c-list__2column-dl dd {
    width: calc((100% - 320px) / 2);
  }
}
.c-2column__harf {
  display: flex;
  flex-direction: column-reverse;
}
.c-2column__harf.no-reverse {
  flex-direction: column;
}
.c-2column__harf .left-area .txt-area {
  padding: 16px 24px;
}
@media screen and (min-width: 540px) {
  .c-2column__harf .left-area .txt-area {
    padding: 24px 32px 26px;
  }
}
.c-2column__harf .left-area .txt-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
}
.c-2column__harf .right-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}
.c-2column__one-third {
  display: flex;
  flex-direction: column;
}
.c-2column__one-third .left-area {
  padding: 16px 24px;
}
@media screen and (min-width: 540px) {
  .c-2column__one-third .left-area {
    padding: 24px 32px 26px;
  }
}
.c-2column__one-third .left-area img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.c-2column__one-third .right-area .txt-area {
  padding: 16px 24px;
}
@media screen and (min-width: 540px) {
  .c-2column__one-third .right-area .txt-area {
    padding: 24px 32px 26px;
  }
}
.c-2column__square figure {
  border-bottom: 1px solid #423F3B;
}
.c-2column__square figure img {
  width: 100%;
  height: auto;
}
.c-2column__square .right-area .txt-area {
  padding: 16px 24px;
}
@media screen and (min-width: 540px) {
  .c-2column__square .right-area .txt-area {
    padding: 24px 32px 26px;
  }
}

/* PC setting */
@media screen and (min-width: 1024px) {
  .c-2column__harf {
    flex-direction: initial;
  }
  .c-2column__harf.no-reverse {
    flex-direction: initial;
  }
  .c-2column__harf.reverse {
    flex-direction: row-reverse !important;
  }
  .c-2column__harf .left-area {
    width: 50%;
  }
  .c-2column__harf .left-area .txt-area {
    gap: 24px;
  }
  .c-2column__harf .right-area {
    width: 50%;
  }
  .c-2column__one-third {
    flex-direction: initial;
  }
  .c-2column__one-third .left-area {
    width: 33.333%;
  }
  .c-2column__one-third .right-area {
    width: 66.667%;
  }
  .c-2column__square {
    display: flex;
    align-items: flex-start;
  }
  .c-2column__square figure {
    width: 350px;
    height: auto;
    border-right: 1px solid #423F3B;
  }
  .c-2column__square .right-area {
    width: calc(100% - 350px);
  }
}
.c-grid__9x4__container > * {
  padding: 12px 24px;
  font-size: 0.875rem;
  line-height: 1.5;
}
.c-grid__9x4__container > * p {
  line-height: 1.5;
  letter-spacing: 0;
}
.c-grid__9x4__container dt {
  background: #D9D9D9;
}
.c-grid__2x2.parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 2fr 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  aspect-ratio: 1672/771;
}
.c-grid__2x2 .div1 {
  grid-area: 1/1/2/3;
  border-bottom: 1px solid #423F3B;
}
.c-grid__2x2 .div2 {
  grid-area: 2/1/3/2;
  border-right: 1px solid #423F3B;
}
.c-grid__2x2 .div3 {
  grid-area: 2/2/3/3;
}

/* PC setting */
@media screen and (min-width: 1024px) {
  .c-grid__9x4__container {
    display: grid;
    grid-template-columns: 174px 1fr 174px 1fr;
    grid-template-rows: repeat(9, 1fr);
    column-gap: 0px;
    row-gap: 0px;
  }
  .c-grid__9x4__container #area-1 {
    grid-area: 1/1/2/2;
  }
  .c-grid__9x4__container #area-2 {
    grid-area: 1/2/2/3;
  }
  .c-grid__9x4__container #area-3 {
    grid-area: 2/1/3/2;
  }
  .c-grid__9x4__container #area-4 {
    grid-area: 2/2/3/3;
  }
  .c-grid__9x4__container #area-5 {
    grid-area: 3/1/4/2;
  }
  .c-grid__9x4__container #area-6 {
    grid-area: 3/2/4/3;
  }
  .c-grid__9x4__container #area-7 {
    grid-area: 4/1/5/2;
  }
  .c-grid__9x4__container #area-8 {
    grid-area: 4/2/5/3;
  }
  .c-grid__9x4__container #area-9 {
    grid-area: 5/1/6/2;
  }
  .c-grid__9x4__container #area-10 {
    grid-area: 5/2/6/3;
  }
  .c-grid__9x4__container #area-11 {
    grid-area: 6/1/7/2;
  }
  .c-grid__9x4__container #area-12 {
    grid-area: 6/2/7/3;
  }
  .c-grid__9x4__container #area-13 {
    grid-area: 7/1/8/2;
  }
  .c-grid__9x4__container #area-14 {
    grid-area: 7/2/8/3;
  }
  .c-grid__9x4__container #area-15 {
    grid-area: 8/1/9/2;
  }
  .c-grid__9x4__container #area-16 {
    grid-area: 8/2/9/3;
  }
  .c-grid__9x4__container #area-17 {
    grid-area: 9/1/10/2;
  }
  .c-grid__9x4__container #area-18 {
    grid-area: 9/2/10/3;
  }
  .c-grid__9x4__container #area-19 {
    grid-area: 1/3/2/4;
  }
  .c-grid__9x4__container #area-20 {
    grid-area: 1/4/2/5;
  }
  .c-grid__9x4__container #area-21 {
    grid-area: 2/3/3/4;
  }
  .c-grid__9x4__container #area-22 {
    grid-area: 2/4/3/5;
  }
  .c-grid__9x4__container #area-23 {
    grid-area: 3/3/4/4;
  }
  .c-grid__9x4__container #area-24 {
    grid-area: 3/4/4/5;
  }
  .c-grid__9x4__container #area-25 {
    grid-area: 4/3/5/4;
  }
  .c-grid__9x4__container #area-26 {
    grid-area: 4/4/5/5;
  }
  .c-grid__9x4__container #area-27 {
    grid-area: 5/3/6/4;
  }
  .c-grid__9x4__container #area-28 {
    grid-area: 5/4/6/5;
  }
  .c-grid__9x4__container #area-29 {
    grid-area: 6/3/7/4;
  }
  .c-grid__9x4__container #area-30 {
    grid-area: 6/4/7/5;
  }
  .c-grid__9x4__container #area-31 {
    grid-area: 7/3/8/4;
  }
  .c-grid__9x4__container #area-32 {
    grid-area: 7/4/8/5;
  }
  .c-grid__9x4__container #area-33 {
    grid-area: 8/3/9/4;
  }
  .c-grid__9x4__container #area-34 {
    grid-area: 8/4/9/5;
  }
  .c-grid__2x2.parent {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(2, 1fr);
  }
  .c-grid__2x2 .div1 {
    grid-area: 1/1/3/2;
    border-right: 1px solid #423F3B;
    border-bottom: none;
  }
  .c-grid__2x2 .div2 {
    grid-area: 1/2/2/3;
    border-bottom: 1px solid #423F3B;
    border-right: none;
  }
  .c-grid__2x2 .div3 {
    grid-area: 2/2/3/3;
  }
}
.txt-area {
  padding: 16px 24px;
}
@media screen and (min-width: 540px) {
  .txt-area {
    padding: 24px 32px 26px;
  }
}

.base-color + dd .c-list__color-tips li:first-of-type .clip {
  background: #fff;
}

.base-color + dd .c-list__color-tips li:first-of-type .clip {
  background: #fff;
}

.main-color + dd .c-list__color-tips li:first-of-type .clip,
.accent-color + dd .c-list__color-tips li:first-of-type .clip {
  background: #6d3d14;
}
.main-color + dd .c-list__color-tips li:nth-of-type(2) .clip,
.accent-color + dd .c-list__color-tips li:nth-of-type(2) .clip {
  background: #FFFF82;
}
.main-color + dd .c-list__color-tips li:nth-of-type(3) .clip,
.accent-color + dd .c-list__color-tips li:nth-of-type(3) .clip {
  background: #F5F7DC;
}
.main-color + dd .c-list__color-tips li:nth-of-type(4) .clip,
.accent-color + dd .c-list__color-tips li:nth-of-type(4) .clip {
  background: #B5D99C;
}
.main-color + dd .c-list__color-tips li:nth-of-type(5) .clip,
.accent-color + dd .c-list__color-tips li:nth-of-type(5) .clip {
  background: #E65F5C;
}
.main-color + dd .c-list__color-tips li:nth-of-type(6) .clip,
.accent-color + dd .c-list__color-tips li:nth-of-type(6) .clip {
  background: #AA4E38;
}

#mv .txt-area .c-ttl__work {
  margin-bottom: 12px;
}
#mv .txt-area .url-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

#pain-solution .left-area {
  border-bottom: 1px solid #423F3B;
  position: relative;
}
#pain-solution .left-area::after {
  content: "";
  display: block;
  width: 60px;
  height: 20px;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  border-left: solid 30px transparent;
  border-right: solid 30px transparent;
  border-top: solid 20px #f00;
  z-index: 100;
}

#concept {
  position: relative;
}
#concept::after {
  content: "";
  display: block;
  width: 60px;
  height: 20px;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  border-left: solid 30px transparent;
  border-right: solid 30px transparent;
  border-top: solid 20px #f00;
  z-index: 100;
}
#concept .txt-area {
  background: #fff;
}
#concept .txt-area p {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}

#design-concept {
  position: relative;
}
#design-concept::after {
  content: "";
  display: block;
  width: 60px;
  height: 20px;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  border-left: solid 30px transparent;
  border-right: solid 30px transparent;
  border-top: solid 20px #f00;
  z-index: 100;
}
#design-concept .txt-area {
  background: #fff;
}
#design-concept .txt-area p {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}

#design-sample .txt-area a {
  overflow-wrap: break-word;
}
#design-sample .design-area {
  width: 100%;
  aspect-ratio: 1920/1080;
  overflow-y: scroll;
}
#design-sample .design-area img {
  width: 100%;
}

/* PC setting */
@media screen and (min-width: 1024px) {
  #mv .txt-area .c-ttl__work {
    margin-bottom: 0;
  }
  #mv .txt-area .url-area {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
  }
  #pain-solution .left-area {
    border-right: 1px solid #423F3B;
    border-bottom: none;
  }
  #pain-solution .left-area::after {
    width: 20px;
    height: 60px;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    left: initial;
    border-top: solid 30px transparent;
    border-bottom: solid 30px transparent;
    border-left: solid 20px #f00;
    border-right: initial;
    z-index: 100;
  }
  #concept .txt-area p {
    font-size: 2rem;
  }
  #design-concept .txt-area p {
    font-size: 2rem;
  }
}/*# sourceMappingURL=single-work.css.map */