﻿@charset "UTF-8";
#mainSct {
  width: 94%;
  padding: 0;
  display: flex;
  flex-flow: wrap;
  margin: 12% auto 3%;
}

#mainSct .photoSet {
  width: 50%;
}
#mainSct .photoSet .imgObj {
  display: block;
  aspect-ratio: 19 / 14;
}
#mainSct .photoSet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#mainSct .photoSet .imgObj[data-pos="default"] img {
}
#mainSct .photoSet .imgObj[data-pos="top"] img {
  object-position: top;
}
#mainSct .photoSet .imgObj[data-pos="bottom"] img {
  object-position: bottom;
}
#mainSct .photoSet .imgObj[data-pos="left top"] img {
  object-position: left top;
}
#mainSct .photoSet .imgObj[data-pos="left bottom"] img {
  object-position: left bottom;
}
#mainSct .photoSet .imgObj[data-pos="center top"] img {
  object-position: center top;
}
#mainSct .photoSet .imgObj[data-pos="center bottom"] img {
}
#mainSct .photoSet .imgObj[data-pos="right top"] img {
  object-position: right top;
}
#mainSct .photoSet .imgObj[data-pos="right bottom"] img {
  object-position: right bottom;
}

@media screen and (min-width: 961px) {
  #mainSct {
    width: 95%;
    padding: 0;
    margin-top: 5%;
    overflow: hidden;
    margin-bottom: 5%;
  }
  #mainSct .photoSet {
    width: 25%;
  }
}
@media screen and (min-width: 961px) {
  #mainSct {
  }

  #mainSct .imgObj {
    cursor: pointer;
  }
  #cntsSct {
    min-height: 80vh;
  }
}

.imgBlk.filter .photoSet {
  opacity: 0;
  visibility: hidden;
}
.imgBlk.filter .photoSet.is-active {
  opacity: 1;
  visibility: visible;
}

.categoryTtlBlk {
  position: absolute;
  /* writing-mode: vertical-rl; */
  /* right: 22vw; */
  /* top: 15svh; */
  overflow: hidden;
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
  pointer-events: none;
}
.categoryTtlBlk .categoryTtlObj {
  line-height: 1;
  /* transform: rotate(-180deg); */
  pointer-events: none;
  position: absolute;
}

.categoryTtlBlk .categoryTtlObj.txt-right {
  text-align: right;
}
.categoryTtlBlk .categoryTtlObj.txt-left {
  text-align: left;
}
.categoryTtlBlk .categoryTtlObj.vertical {
  writing-mode: vertical-rl;
  transform: rotate(-180deg);
}
:root {
  --catettl_v-pos_left: 20vw;
  --catettl_v-pos_right: 20vw;
  --catettl_v-pos_top: 5vh;
  --catettl_v-pos_middle: 50vh;
  --catettl_v-pos_bottom: 5vh;
}

.categoryTtlBlk .categoryTtlObj.vertical[data-pos="left top"] {
  left: var(--catettl_v-pos_left);
  top: var(--catettl_v-pos_top);
}
.categoryTtlBlk .categoryTtlObj.vertical[data-pos="left middle"] {
  left: var(--catettl_v-pos_left);
  top: var(--catettl_v-pos_middle);
  transform: translate(0, -50%) rotate(-180deg);
}
.categoryTtlBlk .categoryTtlObj.vertical[data-pos="left bottom"] {
  left: var(--catettl_v-pos_left);
  bottom: var(--catettl_v-pos_bottom);
}
.categoryTtlBlk .categoryTtlObj.vertical[data-pos="center top"] {
  left: 50%;
  transform: translate(-50%, 0);
  top: var(--catettl_v-pos_top);
}
.categoryTtlBlk .categoryTtlObj.vertical[data-pos="center middle"] {
  left: 50%;
  transform: translate(-50%, -50%);
  top: var(--catettl_v-pos_middle);
}
.categoryTtlBlk .categoryTtlObj.vertical[data-pos="center bottom"] {
  left: 50%;
  transform: translate(-50%, 0);
  bottom: var(--catettl_v-pos_bottom);
}
.categoryTtlBlk .categoryTtlObj.vertical[data-pos="right top"] {
  right: var(--catettl_v-pos_right);
  top: var(--catettl_v-pos_top);
}
.categoryTtlBlk .categoryTtlObj.vertical[data-pos="right middle"] {
  right: var(--catettl_v-pos_right);
  top: var(--catettl_v-pos_middle);
  transform: translate(0, -50%) rotate(-180deg);
}
.categoryTtlBlk .categoryTtlObj.vertical[data-pos="right bottom"] {
  right: var(--catettl_v-pos_right);
  bottom: var(--catettl_v-pos_bottom);
}

:root {
  --catettl_h-pos_left: 5vw;
  --catettl_h-pos_right: 5vw;
  --catettl_h-pos_top: 5vh;
  --catettl_h-pos_middle: 50vh;
  --catettl_h-pos_bottom: 5vh;
}

.categoryTtlBlk .categoryTtlObj.horizon[data-pos="left top"] {
  left: var(--catettl_h-pos_left);
  top: var(--catettl_h-pos_top);
}
.categoryTtlBlk .categoryTtlObj.horizon[data-pos="left middle"] {
  left: var(--catettl_h-pos_left);
  top: var(--catettl_h-pos_middle);
  transform: translate(0, -50%);
}
.categoryTtlBlk .categoryTtlObj.horizon[data-pos="left bottom"] {
  left: var(--catettl_h-pos_left);
  bottom: var(--catettl_h-pos_bottom);
}
.categoryTtlBlk .categoryTtlObj.horizon[data-pos="center top"] {
  left: 50%;
  top: var(--catettl_h-pos_top);
  transform: translate(-50%, 0);
}
.categoryTtlBlk .categoryTtlObj.horizon[data-pos="center middle"] {
  left: 50%;
  top: var(--catettl_h-pos_middle);
  transform: translate(-50%, -50%);
}
.categoryTtlBlk .categoryTtlObj.horizon[data-pos="center bottom"] {
  left: 50%;
  bottom: var(--catettl_h-pos_bottom);
  transform: translate(-50%, 0);
}

.categoryTtlBlk .categoryTtlObj.horizon[data-pos="right top"] {
  right: var(--catettl_h-pos_right);
  top: var(--catettl_h-pos_top);
}
.categoryTtlBlk .categoryTtlObj.horizon[data-pos="right middle"] {
  right: var(--catettl_h-pos_right);
  top: var(--catettl_h-pos_middle);
  transform: translate(0, -50%);
}
.categoryTtlBlk .categoryTtlObj.horizon[data-pos="right bottom"] {
  right: var(--catettl_h-pos_right);
  bottom: var(--catettl_h-pos_bottom);
}
