@charset "UTF-8";
/* CSS Document */
:root{
  --side-nav-h:0px;
}
.member-container footer {
  z-index: 1;
}
#content.member-contents {
  padding-bottom: 0;
}
.fix-button-set {
  position: fixed;
  bottom: calc(min(20px, 2.5vw) + var(--side-nav-h));
  right: min(50px, 2vw);
  z-index: 3;
  transition: all var(--transit);
  pointer-events: none;
}
.fix-button-set.is-fit {
  position: absolute;
  bottom: min(20px, 2.5vw);
}
.fix-button-set > div {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: flex-end;
  -ms-align-items: center;
  align-items: center;
  gap: min(10px, 2.5vw);
}
button.sp-category-open, button.btn-comment {
  width: min(94px, 20vw);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  place-items: center;
  border-radius: 100vmax;
  gap: 3px;
  pointer-events: all;
}
button.sp-category-open .text, button.btn-comment .text {
  font-size: min(13px, 2.8vw);
  font-weight: 600;
}
button.sp-category-open {
  background: var(--wall_gry);
  color: var(--clr-wblue);
  display: none;
}
button.btn-comment {
  background: #fff;
  color: var(--clr-wblue);
}
button.btn-comment svg {
  fill: currentColor;
}
button.sp-category-open .icon {
  width: 26%;
}
button.btn-comment .icon {
  width: 30%;
}
#l-side button.sp-category-open {
  position: absolute;
  right: 0;
  top: 0;
  translate: max(-10px, -2.5vw) calc(-100% - min(10px, 5vw));
  transition: translate var(--transit);
}
#l-side.nav-hide button.sp-category-open {
  translate: calc(100% + min(20px, 5vw)) calc(-100% - min(10px, 5vw));
}
#l-side {
  width: 280px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100dvh;
  overflow-y: scroll;
  z-index: 1;
}
.l-side-inner {
  min-height: 100%;
  width: 100%;
  padding-top: 120px;
  background: var(--wall_gry);
}
.l-side_nav {
  padding-left: min(30px, 4vw);
  padding-right: min(30px, 4vw);
}
.l-side_nav > li > a {
  width: 100%;
  height: min(50px, 12vw);
  display: grid;
  grid-template-columns: auto 1fr;
  -ms-align-items: center;
  align-items: center;
  font-weight: 500;
  color: #113A58;
  border-bottom: 1px solid var(--bdr-gry);
  transition: background var(--transit);
}
.l-side_nav > li.active > a {
  color: var(--clr-org);
}
.l-side_nav > li > a .icn {
  width: min(50px, 12vw);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  grid-template-columns: 1.21em;
}
.l-side_nav > li > a .icn svg {
  fill: currentColor;
}
.l-side_nav > li.home {
  margin-top: min(35px, 5vw);
}
.l-side_nav > li.home a {
  border-top: 1px solid var(--bdr-gry);
}
.l-side_nav > li.back a {
  background-color: #D6D6D6;
  border-radius: 5px;
  border-bottom: none;
  padding-right: min(50px, 12vw);
  text-align: center;
}
.l-side_nav > li.back a .icn {
  scale: -1 -1;
  grid-template-columns: 20%;
}
@media(hover) {
  .l-side_nav > li > a:hover {
    background-color: #E5E5E5;
  }
}
.l-side_category {
  padding-top: min(42px, 10vw);
}
.l-side_title {
  padding-left: min(30px, 4vw);
  padding-right: min(30px, 4vw);
  padding-bottom: 10px;
  color: var(--clr-wblue);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: flex-end;
  align-items: flex-end;
  font-weight: 600;
}
.l-side_title .ja {
  font-size: min(12px, 3.2vw);
}
.l-side_title .en {
  font-size: min(20px, 5vw);
  font-family: var(--fnt-en);
  margin-top: 5px;
}
.sp-cate-close {
  width: 5em;
  aspect-ratio: 1;
  display: none;
  position: fixed;
  top: 10px;
  right: 0;
}
.sp-cate-close span {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--clr-base);
  font-family: var(--fnt-en);
  font-size: min(16px, 3.8vw);
}
.sp-cate-close span::before, .sp-cate-close span::after {
  content: "";
  width: 100%;
  height: 1px;
  background: currentColor;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -.8em;
}
.sp-cate-close span::before {
  rotate: 45deg;
}
.sp-cate-close span::after {
  rotate: -45deg;
}
.l-side_category .category-list {
  padding-left: min(30px, 4vw);
  padding-right: min(30px, 4vw);
  margin-top: min(10px.2.5vw);
}
.l-side_category .category-list > li:nth-child(n+2) {
  margin-top: min(10px, 2.5vw);
}
.search_radio_wrap span {
  height: min(50px, 12vw);
  border-radius: 5px;
  padding: min(13px, 3vw) min(15px, 3vw);
  display: grid;
  grid-template-columns: 100%;
  align-items: center;
  color: #fff;
  background: #9FD1D9;
  cursor: pointer;
  font-weight: 600;
}
.search_radio_wrap input:checked + span {
  background: var(--clr-wblue);
}
/* L-MAIN
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#l-main {
  width: calc(100% - 280px);
  margin-left: auto;
  padding-bottom: min(170px, 30vw);
  padding-left: min(60px, 4vw);
  padding-right: min(60px, 4vw);
  z-index: 2;
}
#l-main .under-hero-inner {
  width: min(934px, 100%);
}
.l-main-contents {
  width: min(934px, 100%);
  margin-top: min(70px, 10vw);
  margin-left: auto;
  margin-right: auto;
}
.l-main-contents._wid {
  width: 100%;
}
.l-main-contents .tag-new::before {
  width: min(46px, 10.8vw);
}
/*page movie ++++++++++++++++++++++++++++++++++++*/
/*player*/
.page-movie-blc {
  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(60px, 10vw);
}
.page-movie__player {}
.page-movie__player .player {
  aspect-ratio: 1/0.5631;
  width: 100%;
}
.page-movie__player .player video {
  object-fit: cover;
  height: 100%;
  width: 100%;
  object-position: center;
}
/*movie ++++++++++++++++++++++++++++++++++++++++++++++++*/
.movie-player-box .data {
  margin-top: min(16px, 4vw);
}
.movie-player-box .data .movie-title {
  font-weight: 700;
  line-height: calc(24/16);
}
.movie-button-set {
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: min(10px, 3vw);
  margin-top: min(15px, 3.2vw);
}
.fev-button {
  width: min(20px, 10vw);
  aspect-ratio: 1;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/image/tmariko_template/park-yuchun-site/icon/favorite_line.svg");
  z-index: 2;
}
.fev-button.ccl {
  width: min(30px, 12vw);
  border-radius: 100vmax;
  background-image: url("/image/tmariko_template/park-yuchun-site/icon/icon/favorite_pnk.svg");
  background-size: 50%;
  border: 1px solid var(--base-clr);
  background-color: #fff;
}
.fev-button.ccl.active {
  background-color: var(--base-clr);
  background-image: url("/image/tmariko_template/park-yuchun-site/icon/icon/favorite_wht.svg");
}
.fev-button.active {
  background-image: url("/image/tmariko_template/park-yuchun-site/icon/favorite_org.svg");
}
.fev-l-button, .rep-button, .auto-button {
  width: auto;
  height: min(34px, 10vw);
  background: #AFAFAF;
  border-radius: 3px;
  overflow: hidden;
  color: #fff;
  padding: 5px 1.125em;
}
.fev-l-button.active, .rep-button.active, .auto-button.active {
  background: var(--clr-wblue);
}
.fev-l-button span::before, .rep-button span::before, .auto-button span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.fev-l-button span {
  padding-left: 1.5em;
}
.fev-l-button span::before {
  width: 1.2em;
  aspect-ratio: 1/0.8287;
  background-image: url("/image/tmariko_template/park-yuchun-site/icon/favorite_w.svg");
}
.rep-button span {
  padding-left: 1.75em;
}
.rep-button span::before {
  background-image: url("/image/tmariko_template/park-yuchun-site/icon/repeat_w.svg");
  width: 1.25em;
  aspect-ratio: 1/1.049;
}
.auto-button span {
  padding-left: 2.25em;
}
.auto-button span::before {
  background-image: url("/image/tmariko_template/park-yuchun-site/icon/autoplay_off.svg");
  width: 1.78em;
  aspect-ratio: 1/0.48;
}
.auto-button.active span::before {
  background-image: url("/image/tmariko_template/park-yuchun-site/icon/autoplay_on.svg");
}
/*related-box*++++++++++++++++++++++++++++++++++*/
.related-box .archive-grid-list {
  gap: min(50px, 12vw) min(30px, 5vw);
}
.related-box .related-title {
  padding-bottom: min(55px, 12vw);
}
.related-box .related-title p {
  border-bottom: 1px #CBCBCB solid;
  padding-bottom: 5px;
  font-weight: bold;
  font-size: min(25px, 5vw);
}
@media (max-width: 480px) {
   .related-box .archive-video-list,
   .related-box .archive-voice-list {
     grid-template-columns: repeat(2, 1fr);}
}
/*acv-photo*++++++++++++++++++++++++++++++++++*/
.acv-photo-item {
  transition: color var(--transit);
}
.acv-photo-item .thumb {
  aspect-ratio: 1;
}
.acv-photo-item .thumb img {
  object-fit: cover;
}
.acv-photo-item .thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--clr-wblue);
  transition: opacity var(--transit);
  opacity: 0;
  border-radius: 3px;
  overflow: hidden;
  z-index: 3;
}
@media(hover) {
  .acv-photo-item:hover {
    color: var(--clr-wblue);
  }
  .acv-photo-item:hover .thumb::after {
    opacity: 1;
  }
}
/*detail*/
.page-gallery-detail {
  display: grid;
  grid-template-columns: min(320px, 30vw) auto;
  gap: min(60px, 5vw);
}
.page-gallery-detail .thumb {
  overflow: hidden;
  border-radius: 5px;
  isolation: isolate;
}
.page-gallery-detail .comment {
  display: grid;
  place-content: center;
  place-items: center;
  gap: min(60px, 5vw);
}
.page-gallery-detail .comment .in-title {
  font-size: min(20px, 4vw);
  font-weight: 600;
}
.page-gallery-detail .comment .button-wrap {
  width: 100%;
}
/* page - blog ++++++++++++++++++++++++++++++++++*/
.l-main-contents .acv-notice_item {
  display: grid;
  grid-template-columns: auto 1fr;
  -ms-align-items: flex-start;
  align-items: flex-start;
  gap: 5px 1.25em;
  padding-left: 1em
}
.l-main-contents .acv-notice_item .post-title {
  font-size: min(16px, 3.6vw);
}
.l-main-contents .acv-notice_item.tag-new {
  padding-right: calc(min(60px, 10vw) + min(50px, 4vw));
}
.l-main-contents .acv-notice_item.tag-new::before {
  right: 0;
}
.l-main-contents .acv-notice_item .post-title {
  margin-top: 0;
}
.l-main-contents .acv-notice_item::after {
  right: auto;
  left: 0;
}
.l-main-contents .acv-notice_item a::after {
  content: "";
  width: 100vw;
  height: 1px;
  background-color: var(--clr-wblue);
  position: absolute;
  bottom: 0;
  left: 0;
  scale: 0 1;
  transform-origin: left center;
  transition: scale .4s var(--easing);
}
@media(hover) {
  .l-main-contents .acv-notice_item:hover a::after {
    scale: 1 1;
  }
}
/* page - live ++++++++++++++++++++++++++++++++++*/
.live-contents {
  padding-top: min(70px, 12vw);
  overflow-x: hidden;
}
.acv-live-list li {
  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;
  gap: min(16px, 2.5vw);
  font-weight: 500;
}
.acv-live-list li {
  padding-bottom: min(24px, 6vw);
}
.acv-live-list li::before, .acv-live-list li::after {
  content: "";
  width: 100vw;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
}
.acv-live-list li::before {
  background-color: currentColor;
}
.acv-live-list li::after {
  background-color: var(--clr-wblue);
  transition: scale var(--transit);
  scale: 0 1;
  transform-origin: left center;
}
@media(hover) {
  .acv-live-list li:hover::after {
    scale: 1 1;
  }
}
.acv-live-list li:nth-child(n+2) {
  padding-top: min(24px, 6vw);
}
.acv-live-list li .post-title {
  font-size: min(18px, 3.6vw);
}
.acv-live-list li .air-date {
  background-color: #2D3839;
  border-radius: 5px;
  padding: .5em 1.125em;
}
/*--player*/
.page-live__player {
  display: grid;
  grid-template-columns: auto min(330px, 30%);
  gap: min(16px, 3.7vw) min(40px, 3vw);
}
.live-movie {
  aspect-ratio: 1/.5625;
}
.live-chat {
  height: 100%;
}
.live-movie iframe, .live-chat iframe {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}
.live-title {
  font-size: min(18px, 3.6vw);
  font-weight: 500;
  line-height: calc(24/18);
}
.page-live-play .button-wrap {
  margin-top: min(60px, 10vw);
}
/*pagee - thread ++++++++++++++++++++++++++++++++++++++++++++++++*/
.page-thread-head {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  -ms-align-items: center;
  align-items: center;
}
.page-thread-head .category {
  font-size: min(40px, 8vw);
  font-family: var(--fnt-en);
}
.sort-button {
  width: min(129px, 40vw);
  height: min(33px, 10vw);
  border-radius: 3px;
  border: 1px solid currentColor;
  color: var(--clr-wblue);
  font-weight: 600;
  display: grid;
  place-content: center;
}
.sort-button span {
  padding-left: 1.55em;
}
.sort-button span::before {
  content: "";
  width: .95em;
  height: 4px;
  border: 1px solid;
  border-color: currentColor transparent;
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
}
.thread-archive-list {
  display: grid;
  /*  gap:min(75px,8vw) min(50px,4vw);*/
  gap: min(60px, 8vw) min(22px, 4vw);
  grid-template-columns: repeat(3, 1fr);
  margin-top: min(30px, 8vw);
}
.thread-archive-item {
  border-radius: 3px;
  overflow: hidden;
  background: #fff;
  isolation: isolate;
  transition: color var(--transit);
}
.thread-archive-item a {
  border: 2px solid rgba(0, 167, 198, 0);
  transition: border var(--transit);
  border-radius: 3px;
  overflow: hidden;
}
.thread-archive-item .thumb {
  width: 100%;
  aspect-ratio: 1/0.569;
}
.thread-archive-item .thumb img {
  object-fit: cover;
  height: 100%;
  object-position: center;
}
.thread-archive-item .comment {
  padding: min(14px, 3vw) min(12px, 3vw);
  font-size: min(14px, 3.6vw);
  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;
}
.thread-archive-item .comment .post-date {
  font-family: var(--fnt-en);
}
.thread-archive-item .comment .thread-title {
  font-weight: 600;
  line-height: calc(20/14);
  margin-top: 5px;
  font-size: min(16px, 3.8vw);
}
.thread-archive-item .comment .comment-data-count {
  margin-top: min(16px, 4vw);
}
.comment-data-count {
  gap: 10px 1em;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  color: var(--clr-base);
}
.comment-data-count > div {
  display: grid;
  grid-template-columns: 1.07em 1fr;
  -ms-align-items: center;
  align-items: center;
  gap: .5em;
  font-weight: 500;
}
.comment-data-count > div .icn {
  aspect-ratio: 1;
}
.comment-data-count > div .icn svg {
  object-fit: contain;
  height: 100%;
  width: 100%;
  object-position: center;
  fill: currentColor;
}
.comment-data-count > div.fev {
  color: var(--clr-org);
}
@media(hover) {
  .thread-archive-item:hover {
    color: var(--clr-wblue);
  }
  .thread-archive-item:hover a {
    border: 2px solid rgba(0, 167, 198, 1);
  }
}
/*detail ++++++++++++++++++++++++++++*/
.thread-detail_intro {
  display: grid;
  grid-template-columns: min(400px, 40%) auto;
  gap: min(40px, 5vw);
  -ms-align-items: flex-start;
  align-items: flex-start;
}
.thread-detail_intro .thumb {
  border-radius: 3px;
  overflow: hidden;
  aspect-ratio: 1/0.5692;
  isolation: isolate;
}
.thread-detail_intro .thumb img {
  object-fit: cover;
  height: 100%;
  object-position: center;
}
.thread-detail_intro .detail_head .title {
  border-bottom: 1px solid var(--bdr-gry);
  padding-bottom: 10px;
}
.thread-detail_intro .detail_head .post-date {
  font-size: min(14px, 3.4vw);
}
.thread-detail_intro .detail_head .in-title {
  font-size: min(20px, 4.5vw);
  margin-top: 5px;
  font-weight: 500;
  line-height: calc(24/20);
}
.thread-detail_intro .detail_head .comment-data-count {
  margin-top: 10px;
}
.thread-detail_intro .comment {
  margin-top: min(15px, 3vw);
}
.thread-detail_intro .comment .in-text {
  font-size: min(14px, 3.6vw);
}
/*comment modal*/
.mdl-thread-contents {
  background-color: var(--wall_gry);
}
.mdl-comment_area {
  width: min(888px, 100%);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mdl-comment_area .title {
  font-size: var(--head3_min);
  font-weight: 600;
  text-align: center;
}
.mdl-comment_area textarea {
  margin-top: 10px;
  height: min(280px, 90vw);
  padding: min(7.5px, 3vw) min(15px, 4vw);
  font-size: 16px;
  border-radius: 5px;
}
.mdl_comment_att {
  margin-top: min(1em, 3vw);
}
.mdl_comment_att p {
  font-size: min(14px, 3.2vw);
  line-height: calc(20/14);
  font-weight: 500;
}
/*thread board*/
.thread-detail_comment {
  margin-top: min(60px, 10vw);
  gap: 10px;
}
.thread-detail_comment .title {
  color: var(--clr-gld);
  font-weight: 700;
  font-size: var(--head3_min);
}
.thread-comment_board {
  border-radius: 3px;
  background: #fff;
  padding: min(40px, 6vw) min(40px, 3vw);
}
.comment-list {
  font-size: min(14px, 3.6vw);
  line-height: calc(18/17);
}
.comment-list > li:not(:first-child) {
  margin-top: min(50px, 6vw);
}
.comment-list > li:not(:last-child) {
    border-bottom: 1px solid var(--clr-mix);
    padding-bottom: 15px;
}
.comment-list > li:not(:last-child) {
    border-bottom: 1px solid var(--clr-mix);
    padding-bottom: 15px;
}
.comment-list .user-comme {
  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;
}
.comment-list .user-name {
  width: 100%;
  font-weight: 700;
  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;
  -ms-align-items: center;
  align-items: center;
  justify-content: space-between;
}
.comment-list .user-comme > * + * {
  margin-top: 10px;
}
.comment-list .post-comment {
  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: min(20px, 3vw);
}
.comment-list .post-comment p {
  width: 100%;
  overflow: hidden;
  line-height: calc(21/14);
}
.comment-list .post-comment p.is-hide::after {
  content: "";
  width: 100%;
  height: 3em;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .8));
  position: absolute;
  bottom: 0;
  left: 0;
}
.chat-reply-area > .chat-reply-thread > li > .comment .post-comment > p.is-hide::after {
  background: linear-gradient(rgba(236, 249, 252, 0), rgba(236, 249, 252, 1));
}
.acd-read-more {
  width: auto;
  padding-left: 1.625em;
  padding-right: 1.625em;
  border-radius: 3px;
  height: 32px;
  color: #fff;
  background: #113A58;
  margin-left: auto;
  margin-right: auto;
  display: none;
  font-weight: 600;
}
.comment-list .post-time {
  font-family: var(--fnt-en);
  margin-left: auto;
  font-size: min(16px, 3.6vw);
}
.reply-button-set {
  width: 100%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  gap: 15px;
  justify-content: flex-start;
}
.reply-button-set > button {
  color: #05688E;
  width: auto;
  transition: all var(--transit);
  font-weight: 600;
}
.reply-button {
  display: grid;
  grid-template-columns: 1em 1fr;
  gap: .5em;
  -ms-align-items: center;
  align-items: center;
}
.reply-button .icn {
  aspect-ratio: 1;
}
.reply-button .icn svg {
  object-fit: contain;
  height: 100%;
  width: 100%;
  object-position: center;
  fill: currentColor;
}
.view-reply-button {
  border-left: 1px solid;
  padding-left: 15px;
}
.chat-reply-area {
  display: none;
  margin-top: min(20px, 5vw) !important;
}
.chat-reply-close {
  height: 45px;
  display: grid;
  place-content: center;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: #fff;
  font-weight: 600;
  margin-top: min(20px, 5vw);
}
.chat-reply-thread > li > .comment {
  padding: min(16px, 3vw);
}
.chat-reply-area > .chat-reply-thread > li > .comment {
  background: #ECF9FC;
  border-radius: 3px;
  padding: min(30px, 4vw) min(40px, 4vw);
}
.chat-reply-area .chat-reply-thread .chat-reply-child .chat-reply-thread li .comment {
  background: none;
}
.chat-reply-area .chat-reply-thread .chat-reply-child .chat-reply-thread li .comment:not(:last-child) {
    border-bottom: 1px solid var(--clr-mix);
    padding-bottom: 15px;
}
.chat-reply-area > .chat-reply-thread > li:not(:first-child) {
  margin-top: min(30px, 4vw);
}
.chat-reply-child {
  width: calc(100% - min(20px, 3vw));
  margin-left: auto;
  border-left: 2px solid #ECF9FC;
  display: grid;
  grid-template-columns: min(710px, 100%);
  justify-content: flex-end;
}
.recom-link {
  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: flex-start;
  align-items: flex-start;
}
.recom-link > p {
  font-size: min(12px, 3.2vw);
  background: #89BAC6;
  color: #fff;
  padding: 4px 10px;
  border-radius: 3px;
}
.js-reco-open {
  cursor: pointer;
}
.recom-link .recomment {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  border-radius: 3px;
  z-index: 1;
  padding: min(10px, 2vw) min(14px, 3vw) min(13px, 3vw);
  display: none;
  border: 1px solid #113A58;
}
.recomment_head {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  -ms-align-items: center;
  align-items: center;
}
.recomment_head .post-date {
  font-family: var(--fnt-en);
}
.recomment_head .reco-data, .recomment_head .reco-data a {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
}
.recomment_head .reco-data a {
  gap: 3px;
}
.recomment_head .reco-data {
  gap: 5px;
}
.recomment_head .reco-data .close {
  width: 1.3em;
  aspect-ratio: 1;
  cursor: pointer;
}
.recomment_head .reco-data .close::before, .recomment_head .reco-data .close::after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: currentColor;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%
}
.recomment_head .reco-data .close::before {
  rotate: 45deg;
}
.recomment_head .reco-data .close::after {
  rotate: -45deg;
}
.recomment_body .name {
  font-weight: 700;
  margin-top: 10px;
}
.recomment_body .text {
  margin-top: 10px;
}
input.load-button {
  width: min(378px, 100%);
  height: min(50px, 12vw);
  color: #fff;
  border-radius: 3px;
  background-color: var(--clr-wblue);
  font-size: min(14px, 3.6vw);
  font-weight: 600;
}
.thread-comment_board .button-wrap {
  margin-top: min(40px, 10vw);
}
  /*mypage top ++++++++++++++++++++++++++++++++*++++*/
.page-mypage_top {
  align-items: center;
  display: flex;
  flex-direction: column;
}
.mypage-user-state {
  display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
  gap: min(45px, 8vw) min(65px, 5vw);
  -ms-align-items: center;
  align-items: center;
}
.mypage-user-state .card-area {
  overflow: hidden;
}
.mypage-user-state .card-area .card {
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
}
.card-data {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 4%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto 1fr auto;
  font-size: min(16px, 3.6vw);
  text-shadow: 0 0 10px rgba(255, 255, 255, .8);
  color: #FFFFFF;
}
.card-data .title {
  font-family: var(--fnt-audio);
}
.card-data .data {
  margin-top: min(5px, 2vw);
}
.card-data .number {
  grid-area: 1 / 1 / 2 / 3;
  font-family: var(--fnt-audio);
}
.card-data .nickname {
  grid-area: 2 / 1 / 3 / 2;
  align-self: end;
}
.card-data .name {
 grid-area: 3 / 1 / 4 / 2;
  align-self: end;
  margin-top: 7%;
}
.card-data .joined {
  grid-area: 2 / 2 / 3 / 3;
  align-self: end;
  justify-self: end;
  font-family: var(--fnt-audio);
}
.mypage-user-state .user-data .in-title {
    font-size: clamp(40px, 4vw, 47px);
  font-family: var(--fnt-audio);
  color: #C7C7C7;
    padding-right: min(30px, 5vw);
	font-weight: 300;
}
.mypage-user-state .user-data dl {
  margin: min(60px,5vw) 0;
  border-left: 1px solid #CBCBCB;
    padding-left: min(20px, 3vw);
}
.mypage-user-state .user-data dl > div {
    font-size: clamp(16px, 1.6667vw, 20px);
  font-weight: 500;
  display: grid;
 grid-template-columns: 1fr 1fr 1fr;
  padding-bottom: 8px;
}
.user-data dl > div dt {
  grid-column: 1;
}

.user-data dl > div dd {
  grid-column: 3;
}

.user-data dl > div::after{
    content: "";
    grid-column: 2;
    height: 1px;
    background: #080808;
    width: 33%;
    margin: auto;
    position: absolute;
    top: 47%;
    left: 25%;
    transform: translateY(-50%) translateX(-50%);
}
.mypage-user-state .user-data dl > div:not(:first-child) {
  margin-top: min(15px, 2vw);
}
.user-data{
	display: flex;
    justify-content: center;
    align-items: center;
		border-top: 1px solid #CBCBCB;
    border-bottom: 1px solid #CBCBCB;
}
/*++----------------------------------------------
 responsive
-----------------------------------------------+++*/
@media(max-width:900px) {
	  /*mypage top ++++++++++++++++++++++++++++++++*++++*/
	.mypage-user-state {
        grid-template-columns: 1fr;
    }
		.user-data {
    flex-direction: column;
}
	.mypage-user-state .user-data .in-title {
    padding-right: 0px;
	padding-top: 30px;
}
	.mypage-user-state .user-data dl {
    margin: min(60px, 5vw) 0;
    border-left: none;
    padding-left: 0px;
}
}
@media(max-width:768px) {
  button.sp-category-open {
    display: grid;
  }
  #l-side {
    width: 100%;
    top: auto;
    bottom: 0;
    z-index: 100;
    height: auto;
    overflow: visible;
  }
  #l-side.cate-open {
    z-index: calc(infinity);
  }
  .l-side-inner {
    height: auto;
    padding-top: 0;
    background: none;
  }
  .l-side_nav {
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    transition: translate var(--transit);
  }
  .nav-hide .l-side_nav {
    translate: 0 100%;
  }
  .l-side_nav li.back, .l-side_nav li.home {
    display: none;
  }
  .l-side_nav > li:not(:first-child) {
    margin-top: 0;
  }
  .l-side_nav > li > a {
    border-radius: 0;
    background-color: #113A58;
    color: #fff;
    place-content: center;
    height: min(70px, 15vw);
  }
  .l-side_nav > li > a span {
    width: auto;
    padding-left: 1.8em;
  }
  .l-side_nav > li > a span::before {
    left: 0;
  }
  .l-side_nav > li.favorite > a span::before {
    --icon-img: url("/image/tmariko_template/park-yuchun-site/icon/favorite.svg");
  }
  .l-side_nav > li.history > a span::before {
    --icon-img: url("/image/tmariko_template/park-yuchun-site/icon/history.svg");
  }
  .l-side_nav > li.history a::before {
    content: "";
    width: 1px;
    height: calc(100% - 20px);
    position: absolute;
    left: 0;
    top: 50%;
    translate: 0 -50%;
    background: #fff;
  }
  .l-side_category {
    display: block;
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    z-index: calc(infinity);
    background-color: var(--wall_gry);
    overflow-y: scroll;
    transition: all var(--transit);
    padding-bottom: min(50px, 10vw);
  }
  .l-side_category.is-view {
    visibility: visible;
    opacity: 1;
  }
  .l-side_category.is-view .l-side_title {}
  .sp-cate-close {
    display: block;
  }
  #l-main {
    width: 100%;
    min-height: 100svh;
  }
  /*page - photo +++++++++++++++++++++++++++++++++++*/
  .archive-photo-list {
    grid-template-columns: repeat(2, 1fr);
  }
  /*detail*/
  .page-gallery-detail {
    grid-template-columns: 100%;
  }
  /* page - blog ++++++++++++++++++++++++++++++++++*/
  .l-main-contents .acv-notice_item {
    grid-template-columns: 100%;
  }
  /*page - live +++++++++++++++++++++++++++++++++++*/
  /*--player*/
  .page-live__player {
    grid-template-columns: 100%;
  }
  .live-chat {
    min-height: 500px;
  }
  .live-title {
    grid-area: 2;
  }
  /*pagee - thread +++++++++++++++++++++++++++++++++*/
  .thread-archive-list {
    grid-template-columns: repeat(2, 1fr);
  }
  /*detail*/
  .thread-detail_intro {
    grid-template-columns: 100%;
  }
}
@media(max-width:480px) {
  /* page - live ++++++++++++++++++++++++++++++++++*/
  .acv-live-list li::before, .acv-live-list li::after {
    left: 50%;
    translate: -50% 0;
  }
  /*pagee - thread +++++++++++++++++++++++++++++++++*/
  .recom-link .recomment {
    width: 96vw;
    left: 50%;
    translate: -50% 0;
  }
}