@charset "utf-8";

.mainvisual-container {
  position: relative;
  height: 100svh;
  overflow: hidden;
}
.mainvisual-movie {
  width: 100%;
  height: 100%;
}
.mainvisual-movie > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mainvisual-lead {
  position: absolute;
  bottom: 7%;
  left: 0;
  z-index: 50;
}
.mainvisual-lead-main > span {
  display: inline-flex;
  align-items: baseline;
  padding: 16px 24px;
  color: var(--color-white);
  font-size: clamp(1.5rem, 5vw, 4rem);
  font-weight: var(--font-bold);
  line-height: 1.1;
  background: #111;
}
.mainvisual-lead-main em {
  font-size: 1.5em;
  color: var(--color-lightmain);
}
.mainvisual-lead-sub {
  display: flex;
  flex-direction: column;
  row-gap: 1px;
  padding-top: 24px;
  padding-left: 24px;
}
.mainvisual-lead-sub > span {
  display: flex;
  align-items: baseline;
}

.mainvisual-lead-sub em {
  display: inline-block;
  padding: 16px 16px;
  font-size: clamp(1rem, 3.1vw, 2.5rem);
  font-weight: var(--font-bold);
  line-height: 1.1;
  background: var(--color-white);
}

@media (max-width: 640px) {
  .mainvisual-lead-main > span {
    flex-direction: column;
    padding: 8px 24px;
    line-height: 1.35;
    letter-spacing: 0.07em;
  }
  .mainvisual-lead-sub {
    padding-top: 16px;
    padding-left: 16px;
  }
  .mainvisual-lead-sub em {
    padding: 8px 16px;
  }
}
@media (max-width: 520px) {
  .mainvisual-container {
    width: 100%;
    height: auto;
    max-height: 100svh;
    aspect-ratio: 9 / 16;
  }
  .mainvisual-lead-sub {
    padding-left: 0;
    padding-right: 8px;
  }
  .mainvisual-lead-sub em {
    padding: 8px 8px;
    line-height: 1.3;
  }
}

.front-accent {
  opacity: 0.6;
}

.frt-cat-text {
  position: relative;
  padding-left: 16px;
  color: var(--color-darkmain);
  font-size: 0.9375rem;
  font-weight: var(--font-black);
  line-height: 1.1;
}
.frt-cat-text::before {
  position: absolute;
  top: calc(50% - 4px);
  left: 0;
  content: '';
  width: 8px;
  height: 8px;
  background: var(--color-gray);
  border-radius: 50%;
}
.frt-cat-text + .title-front {
  padding-top: 12px;
}
.linkbtn-front {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 85%;
  max-width: 280px;
  height: 3.2em;
  padding: 0 2.5em 0 1.2em;
  color: var(--color-white);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: var(--font-bold);
  line-height: 1.1;
  background: var(--color-main);
  border-radius: 6px;
}
.linkbtn-front::after {
  position: absolute;
  top: 50%;
  right: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.5em;
  font-family: "Material Symbols Rounded";
  content: '\e5c8';
  color: var(--color-main);
  font-size: 1.2em;
  font-weight: var(--font-regular);
  background: var(--color-white);
  border-radius: 50%;
  transform: translateY(-50%)
}
.linkbtn-front:hover:after {
  animation: fuwafuwa 1s linear infinite;
}
@keyframes fuwafuwa{
  0% {
    transform: translate(0, -50%)
  }
  50% {
    transform: translate(-8px, -50%)
  }
  100% {
    transform: translate(0, -50%)
  }
}

.title-front_lead {
  padding-top: clamp(24px, 4.7vw, 48px);
  line-height: 1.6;
}
.frt-std-linkbtn-wrap {
  padding-top: clamp(24px, 4.7vw, 48px);
  text-align: right;
}
@media (max-width: 768px) {
  .frt-std-linkbtn-wrap {
    text-align: left;
  }
}
@media (max-width: 520px) {
  .frt-cat-text {
    padding-left: 14px;
  }
}

.frt-message-container {
  text-align: center;
  background: var(--color-bg-lightgray);
}
.frt-message-wrap {
  position: relative;
  /* display: inline-block; */
  display: flex;
  justify-content: center;
  flex-direction: row-reverse;
  margin: 0 auto;
  padding-top: clamp(60px, 10vw, 112px);
  padding-bottom: clamp(64px, 10vw, 112px);
  /* padding-left: 4vw; */
  /* padding-right: 4vw; */
  text-align: left;
}
.frt-message-side {
  align-self: flex-end;
  width: min(50%, 480px);
  padding-bottom: 80px;
}
.frt-message-pict-frm {
  position: relative;
  display: flex;
  justify-content: left;
  /*background-color: var(--color-white);*/
  border-radius: 6px;  
  overflow: hidden;
  /*box-shadow: 3px -3px 23px rgba(3, 7, 18, 0.03);*/
}
/*.frt-message-pict-frm::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  display: block;
  width: 100%;
  height: 33%;
  background: var(--color-white);
  border-radius: 6px;
  z-index: 0;
}*/
.frt-message-pict_set {
  position: relative;
  width: 90%;
  aspect-ratio: 5 / 4;
  border-radius: 6px;
  overflow: hidden;
  z-index: 1;
}
.frt-message-pict_set > img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.frt-message-name {
  padding-top: 4px;
  width: 90%;
  text-align: center;
  font-size: 0.9375rem;
}
.frt-message-name > span {
  padding-right: 1em;
  font-size: 0.9em;
}
.frt-message-side > .frt-message-linkbtn-wrap {
  display: none;
}
.frt-message-main {
  position: relative;
  margin-left: -88px;
  z-index: 5;
}
.frt-message-text {
  margin: 0 auto;
  padding-top: 8px;
  font-size: clamp(1.5rem, 4.7vw, 3.75rem);
  font-weight: var(--font-bold);
  line-height: 1.6;
  letter-spacing: 0.07em;
}
.frt-message-text > span {
  font-size: 0.73em;
}
.frt-message-text > em {
  display: inline-block;
  width: 6em;
  padding: 0 6px;
  vertical-align: text-bottom;
}
.frt-message-text_sub {
  padding-top: clamp(24px, 4vw, 40px);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
}
.frt-message-linkbtn-wrap {
  padding-top: clamp(48px, 6.25vw, 64px);
  
  .linkbtn-front {
    max-width: 17em;
  }
}
@media (max-width: 768px) {
  .frt-message-wrap {
    display: block;
    text-align: center;
  }
  .frt-message-main {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
  .frt-message-main > .frt-message-linkbtn-wrap {
    display: none;
  }
  .frt-message-side {
    padding: 0 4vw;
    width: 100%;
    text-align: center;
  }
  .frt-message-linkbtn-wrap {
    text-align: center;
  }
  .frt-message-text {
    letter-spacing: 0.04em;
  }
  .frt-message-text > em {
    width: 7.5em;
  }
  .frt-message-pict-wrap {
    width: 100%;
    margin-top: -16px;
  }
  .frt-message-pict-frm {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    background: #fff;
  }
  .frt-message-pict_set {
    text-align: center;
    width: min(60%, 320px);
  }
  .frt-message-name {
    width: 100%;
  }
  .frt-message-side > .frt-message-linkbtn-wrap {
    display: block;
    padding-top: 32px;
  }
}
@media (max-width: 640px) {
  .frt-message-text {
    letter-spacing: 0.04em;
  }
}
@media (max-width: 520px) {
  .frt-message-text {
    padding-top: 16px;
    max-width: 13em;
    text-align: center;
  }
}

.frt-about-container {
  position: relative;
  padding: clamp(64px, 10vw, 112px) 0;
  background: var(--color-white);
  z-index: 5;
  will-change: transform;
}
.frt-about-container .section-inner_wide {
  padding-top: 0;
}
.frt-about-block {
  display: flex;
  column-gap: 80px;
}
.frt-about-col {
  position: relative;
  flex: 1;
  overflow: hidden;
}
.frt-about-pict {
  margin-left: 14%;
  border-radius: 6px;
  overflow: hidden;
}
.frt-about-pict > img {
  object-fit: contain;
  border-radius: 6px;
}
.frt-about-main {
  position: absolute;
  width: 80%;
  max-width: 480px;
  padding: 32px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
}
.frt-about-col:nth-of-type(1) {
  .frt-about-pict {
    padding-top: 14%;
  }
  .frt-about-main {
    top: 0;
    left: 0;
  }
}
.frt-about-col:nth-of-type(2) {
  .frt-about-pict {
    padding-bottom: 14%;
  }
  .frt-about-main {
    bottom: 0;
    left: 0;
  }
}

@media (max-width: 1203px) {
  .frt-about-block {
    display: block;
  }
  .frt-about-col:nth-of-type(n+2) {
    margin-top: 64px;
  }
  .frt-about-pict {
    position: absolute;
    top: 0;
    right: 0;
    aspect-ratio: 16 / 9;
    margin-left: 14%;
    z-index: 0;
  }
  .frt-about-pict > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 75%;
  }
  .frt-about-main {
    position: relative;
    margin-top: 72px;
    z-index: 10;
  }
  .frt-about-col:nth-of-type(1) {
    .frt-about-pict {
      padding-top: 0;
    }
  }
  .frt-about-col:nth-of-type(2) {
    .frt-about-pict {
      padding-bottom: 0;
    }
  }
}
@media (max-width: 768px) {
  .frt-about-main {
    width: 90%;
    max-width: none;
    margin-top: -64px;
    padding-left: 0;
  }
  .frt-about-pict {
    position: relative;
  }
}

.frt-env-container {
  /* padding-top: 136px; */
  /* padding-top: clamp(64px, 13vw, 136px); */
  padding-top: clamp(64px, 10vw, 112px);
}
.frt-env-header {
  display: flex;
  align-items: flex-end;
  column-gap: 52px;
}
.frt-env-titlesub {
  padding-bottom: 1em;
}
.frt-env-group {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 80px;
  /* padding-top: 64px; */
  padding-top: clamp(32px, 6.2vw, 64px);
}
.frt-env-item {
  position: relative;
}
.frt-env-item:nth-of-type(n+2)::after {
  position: absolute;
  top: 0;
  left: -40px;
  content: '';
  display: block;
  width: 1px;
  height: 100%;
  background: var(--color-gray);
}
.frt-env-pict {
  text-align: center;
}
.frt-env-pict > img {
  width: 90%;
  max-width: 320px;
  margin: auto;
  transition: var(--transit-default);
}
.frt-env-item > a:hover img {
  transform: scale(1.15);
}
.frt-env-link {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 16px;
  font-size: clamp(0.9375rem, 2vw, 1.625rem);
}
.frt-env-link::after {
  position: absolute;
  top: 50%;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.5em;
  font-family: "Material Symbols Rounded";
  content: '\e5c8';
  color: var(--color-white);
  font-size: 0.9em;
  background: var(--color-main);
  border-radius: 50%;
  transform: translateY(-50%)
}
.frt-env-item > a:hover .frt-env-link::after {
  animation: fuwafuwa 1s linear infinite;
}
@keyframes fuwafuwa{
  0% {
    transform: translate(0, -50%)
  }
  50% {
    transform: translate(-8px, -50%)
  }
  100% {
    transform: translate(0, -50%)
  }
}
@media (max-width: 1280px) {
  .frt-env-group {
    column-gap: 64px;
  }
  .frt-env-item:nth-of-type(n+2)::after {
    left: -32px;
  }
}
@media (max-width: 767px) {
  .frt-env-header {
    display: block;
  }
  .frt-env-titlesub {
    padding-top: min(24px, 4.7vw);
    line-height: 1.6;
  }
  .frt-env-group {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 32px;
  }
  .frt-env-item:nth-of-type(n+2)::after {
    display: none;
  }
}
@media (max-width: 520px) {
  .frt-env-group {
    column-gap: 24px;
  }
}

.frt-member-container {
  /* padding: clamp(64px, 13vw, 136px) 0; */
  padding: clamp(64px, 10vw, 112px) 0;
  background: var(--color-bg-lightgray);
}
.frt-member-wrap {
  display: flex;
  column-gap: 6vw;
  margin-left: 4vw;
  /* padding-left: calc((96vw - 1320px) * 0.5); */
  padding-left: calc((98vw - 1320px) * 0.5 - 4vw);
}
.frt-member-side {
  width: min(40%, 448px);
}
.frt-member-main {
  flex: 1;
}
.frt-memberlist-item {
  position: relative;
}
.frt-memberlist-item {
  position: relative;
}
.frt-memberlist-pict {
  aspect-ratio: 5 / 7;
  overflow: hidden;
}
.frt-memberlist-pict > img {
  object-fit: contain;
  border-radius: 6px;
  transition: var(--transit-default);
}
.frt-memberlist-item:hover img {
  transform: scale(1.1);
}
.frt-memberlist-note {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  padding: 10px;
  font-size: 0.9375rem;
  line-height: 1.1;
  background: rgba(255, 255, 255, 1);
  border-top-right-radius: 6px;
}
.frt-memberlist-dev {
  color: var(--color-darkmain);
  white-space: nowrap;
}
.frt-memberlist-data {
  padding-left: 0.5em;
  white-space: nowrap;
}
.frt-member-pagination {
  justify-content: flex-end;
  bottom: inherit;
  margin-top: 16px;
  padding-right: 4vw;
}
.frt-member-page.is-active {
  background: var(--color-main);
}
.frt-member-block {
  .splide__arrow {
    background: var(--color-bg-lightgray);
  }
  .splide__arrow svg {
    fill: var(--color-darkmain);
  }
  .splide__arrow--prev {
    left: -1em;
  }
}
@media (max-width: 1203px) {
  .frt-member-side {
    width: 55%;
  }
  .frt-member-main {
    width: calc(45% - 10vw);
  }
}
@media (max-width: 767px) {
  .frt-member-wrap {
    display: block;
  }
  .frt-member-side {
    width: 100%;
    padding-right: 4vw;
  }
  .frt-member-main {
    margin-top: 48px;
    width: 100%;
  }
  .frt-memberlist-note {
    display: block;
    width: auto;
    padding-bottom: 0;
    white-space: nowrap;
    font-size: 0.875rem;
    line-height: 1.3;
  }
  .frt-memberlist-note > p {
    
  }
  .frt-memberlist-data {
    padding-left: 0;
  }
}

.front-rinen-container {
  position: relative;
}
.front-rinen-wrap {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(20vh, 41vw,400px);
  /*overflow: hidden;*/
  overflow: clip;
  z-index: 1;
  will-change: transform;
  transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.front-rinen-wrap > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.front-rinen-caption {
  position: absolute;
  top: -2.8em;
  right: 0;
  display: inline-flex;
  align-items: center;
  padding: 0.9em 0.5em 0.4em;
  color: var(--color-white);
  /*font-size: 2rem;*/
  font-size: clamp(1rem, 3.12vw, 1.75rem);
  letter-spacing: 0.04em;
  line-height: 1;
  /*background: var(--color-darkmain);*/
  background: rgba(102, 58, 111, 0.75);
  border-radius: 6px 0 0 6px;
  z-index: 5;
}
.front-rinen-caption > p > span {
  padding-right: 8px;
  font-size: 0.65em;
}
.front-rinen-caption ruby {
  position: relative;
  margin: 0;
  padding-top: 0.4em;
  /* font-weight: var(--font-bold); */
  letter-spacing: 0.08em;
  line-height: 1;
}
.front-rinen-caption ruby > rt {
  display: none;
}
.front-rinen-caption ruby::after {
  position: absolute;
  top: 0;
  left: 0;
  content: 'たんやけんま';
  font-size: 0.437em;
  font-weight: var(--font-regular);
  letter-spacing: 0.5em;
  line-height: 1;
}

/*@media (max-width: 960px) {
  .front-rinen-wrap {
    height: min(25svh, 400px);
  }
}*/