@charset "UTF-8";

:root {
  --hd-font: "Montserrat", sans-serif;
  --text-font: "Noto Sans JP", sans-serif;
  --deco-color: #B0A287;
}

#wrapper .actor {
  width: calc((1050 / 1366) * 100%);
  max-width: 1050px;
  margin: 0 auto 160px;
  padding-top: 80px;
}

#wrapper .actor .act-list h2 {
  font-family: var(--hd-font);
  font-size: 42px;
  font-weight: 100;
  letter-spacing: 0.08em;
  color: var(--deco-color);
  text-align: center;
  margin-bottom: 50px;
}

#wrapper .actor .act-list ul {
  display: flex;
  flex-wrap: wrap;
  row-gap: 48px;
}

#wrapper .actor .act-list ul li {
  width: calc(100% / 3);
}

#wrapper .actor .act-list ul li img {
  width: 100%;
}

#wrapper .actor .act-list ul li a {
  text-decoration: none;
  transition: 0.3s ease-in-out;
}

#wrapper .actor .act-list ul li a h3 {
  font-family: var(--text-font);
  font-size: 16px;
  font-weight: 100;
  color: #000;
  line-height: 1.5;
  text-align: center;
  margin-top: 26px;
}

#wrapper .actor .act-list ul li a h3 span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--deco-color);
  letter-spacing: 0.2em;
  margin-top: 8px;
}

@media (any-hover: hover) {
  #wrapper .actor .act-list ul li a:hover {
    opacity: 0.75;
  }
}

/*sp*/
@media (max-width:767px) {
  #wrapper .actor {
    width: 100%;
    padding-top: 40px;
    margin-bottom: 80px;
  }

  #wrapper .actor .act-list h2 {
    font-size: 24px;
    margin-bottom: 40px;
  }

  #wrapper .actor .act-list ul {
    row-gap: 20px;
  }

  #wrapper .actor .act-list ul li {
    width: calc(100% / 2);
  }

  #wrapper .actor .act-list ul li a h3 {
    margin-top: 12px;
  }
}

/*======================
俳優詳細
=======================*/
#wrapper.detail main {
  overflow: hidden;
}

#wrapper .actor .act-detail-header .inner {
  display: flex;
  gap: calc((50 / 1050) * 100%);
}

/*スライダー*/
#wrapper .actor .act-detail-header .inner .img-area {
  width: calc((500 / 1050) * 100%);
}

/*メイン*/
#wrapper .actor .act-detail-header .inner .img-area #mainSlider ul {
  aspect-ratio: 1/1;
}

#wrapper .actor .act-detail-header .inner .img-area #mainSlider ul li {
  text-align: center;
}

#wrapper .actor .act-detail-header .inner .img-area #mainSlider img {
  height: 100%;
  object-fit: cover;
}

/*サムネ*/
#wrapper .actor .act-detail-header .inner .img-area #thumbnail {
  width: fit-content;
  margin: 10px auto 0;
}

#wrapper .actor .act-detail-header .inner .img-area #thumbnail .splide__arrow {
  width: 14px;
  height: 24px;
  background: transparent;
}

#wrapper .actor .act-detail-header .inner .img-area #thumbnail .splide__arrow.splide__arrow--prev {
  left: -36px;
}

#wrapper .actor .act-detail-header .inner .img-area #thumbnail .splide__arrow.splide__arrow--prev img {
  rotate: 180deg;
}

#wrapper .actor .act-detail-header .inner .img-area #thumbnail .splide__arrow.splide__arrow--next {
  right: -36px;
}

#wrapper .actor .act-detail-header .inner .img-area #thumbnail ul {
  justify-content: center;
  align-items: flex-start;
}

#wrapper .actor .act-detail-header .inner .img-area #thumbnail li {
  border: none;
}

#wrapper .actor .act-detail-header .inner .img-area #thumbnail li:nth-of-type(2) {
  width: 42px !important;
}

#wrapper .actor .act-detail-header .inner .img-area #thumbnail ul.management li:nth-of-type(2) {
  width: 48px !important;
}

#wrapper .actor .act-detail-header .inner .img-area #thumbnail li+li {
  margin-left: 10px;
}

#wrapper .actor .act-detail-header .inner .img-area #thumbnail li.is-active {
  position: relative;
  border: none;
}

#wrapper .actor .act-detail-header .inner .img-area #thumbnail li.is-active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border: solid 1px #000;
}

#wrapper .actor .act-detail-header .inner .img-area #thumbnail li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#wrapper .actor .act-detail-header .inner .text-area {
  width: calc((500 / 1050) * 100%);
}

#wrapper .actor .act-detail-header .inner .text-area .hd-area span.deco {
  display: block;
  font-family: var(--hd-font);
  font-size: 12px;
  font-weight: 400;
  color: #BFBFBF;
  letter-spacing: 0.08em;
  line-height: 1.0;
}

#wrapper .actor .act-detail-header .inner .text-area .hd-area h2 {
  font-family: var(--text-font);
  font-size: 32px;
  font-weight: 100;
  line-height: 1.5;
  margin-top: 50px;
}

#wrapper .actor .act-detail-header .inner .text-area .hd-area h2 span {
  display: block;
  font-family: var(--hd-font);
  font-size: 16px;
  font-weight: 400;
  color: var(--deco-color);
  line-height: 1.5;
  letter-spacing: 0.2em;
  margin-top: 5px;
}

#wrapper .actor .act-detail-header .inner .text-area .text-cont {
  margin-top: 24px;
}

#wrapper .actor .act-detail-header .inner .text-area .text-cont .flex-cont {
  display: flex;
  column-gap: calc((10 / 500) * 100%);
}

#wrapper .actor .act-detail-header .inner .text-area .text-cont .flex-cont+.flex-cont {
  margin-top: 8px;
}

#wrapper .actor .act-detail-header .inner .text-area .text-cont .flex-cont h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  height: 24px;
  font-family: var(--text-font);
  font-size: 12px;
  font-weight: 300;
  border-radius: 30px;
  background-color: #F7F7F7;
}

#wrapper .actor .act-detail-header .inner .text-area .text-cont .flex-cont h3.Montserrat {
  font-family: var(--hd-font);
}

#wrapper .actor .act-detail-header .inner .text-area .text-cont .flex-cont p {
  font-family: var(--text-font);
  font-size: 14px;
  font-weight: 300;
  line-height: calc(24 / 14);
}

/*リンクエリア*/
#wrapper .actor .act-detail-header .link-area {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-top: 20px;
}

#wrapper .actor .act-detail-header .link-area .link-wrapper {
  display: flex;
}

#wrapper .actor .act-detail-header .link-area a {
  display: block;
  text-decoration: none;
}

#wrapper .actor .act-detail-header .link-area .link-wrapper a img {
  max-width: 24px;
}

#wrapper .actor .act-detail-header .link-area a+a {
  margin-left: 10px;
}

#wrapper .actor .act-detail-header .link-area .pdf-download {
  margin-left: 32px;
}

/*sp*/
@media (max-width:767px) {
  #wrapper .actor.detail {
    width: 100%;
  }

  #wrapper .actor .act-detail-header {
    max-width: 96%;
    margin: auto;
  }

  #wrapper .actor .act-detail-header .inner {
    display: block;
  }

  /*スライダー*/
  #wrapper .actor .act-detail-header .inner .img-area {
    width: 100%;
  }

  #wrapper .actor .act-detail-header .inner .img-area #mainSlider ul {
    align-items: flex-start;
    aspect-ratio: initial;
  }

  #wrapper .actor .act-detail-header .inner .img-area #mainSlider ul li {
    aspect-ratio: 1 / 1;
  }

  #wrapper .actor .act-detail-header .inner .img-area #mainSlider ul li:nth-of-type(2).is-active {
    aspect-ratio: 333 / 500;
  }

  #wrapper .actor .act-detail-header .inner .img-area #mainSlider ul.management li:nth-of-type(2).is-active {
    aspect-ratio: 374 / 500;
  }

  /*サムネ付き*/
  #wrapper .actor .act-detail-header .inner .img-area #thumbnail {
    width: fit-content;
    margin: 10px auto 0;
  }

  #wrapper .actor .act-detail-header .inner .img-area #thumbnail li:nth-of-type(2),
  #wrapper .actor .act-detail-header .inner .img-area #thumbnail ul.management li:nth-of-type(2) {
    width: 32px !important;
    height: 48px;
  }

  #wrapper .actor .act-detail-header .inner .text-area {
    width: 100%;
    margin-top: 40px;
  }

  #wrapper .actor .act-detail-header .inner .text-area .hd-area {
    text-align: center;
  }

  #wrapper .actor .act-detail-header .inner .text-area .hd-area h2 {
    margin-top: 26px;
  }

  #wrapper .actor .act-detail-header .inner .text-area .text-cont .flex-cont {
    display: block;
  }

  #wrapper .actor .act-detail-header .inner .text-area .text-cont .flex-cont+.flex-cont {
    margin-top: 17px;
  }

  #wrapper .actor .act-detail-header .inner .text-area .text-cont .flex-cont h3 {
    width: 100%;
    height: 24px;
  }

  #wrapper .actor .act-detail-header .inner .text-area .text-cont .flex-cont p {
    margin-top: 8px;
  }

  /*リンクエリア*/
  #wrapper .actor .act-detail-header .link-area {
    display: block;
    margin-top: 44px;
  }

  #wrapper .actor .act-detail-header .link-area a {
    display: block;
    text-decoration: none;
  }

  #wrapper .actor .act-detail-header .link-area .link-wrapper {
    display: flex;
    justify-content: center;
  }

  #wrapper .actor .act-detail-header .link-area .pdf-download {
    width: 180px;
    margin: 16px auto 0;
  }
}

/*======================
career
=======================*/
#wrapper .actor .career-sec {
  display: flex;
  flex-wrap: wrap;
  margin-top: 48px;
}

#wrapper .actor .career-sec input {
  display: none;
}

#wrapper .actor .career-sec label {
  position: relative;
  flex: 1 1;
  order: -1;
  font-size: 14px;
  font-family: var(--hd-font);
  color: var(--deco-color);
  text-align: center;
  border-top: 1px solid #EDEDED;
  border-bottom: 1px solid #EDEDED;
  padding: 16px 0.5em;
  cursor: pointer;
}

#wrapper .actor .career-sec input:checked+label {
  color: #000;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

#wrapper .actor .career-sec label:not(:last-of-type)::after {
  content: "";
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 18px;
  background-color: #EDEDED;
}

#wrapper .actor .career-sec .tab-cont {
  display: none;
  width: 100%;
}

#wrapper .actor .career-sec input:checked+label+.tab-cont {
  display: block;
}

#wrapper .actor .career-sec .tab-cont .cont {
  display: flex;
  flex-wrap: wrap;
  padding: 24px 0;
}

#wrapper .actor .career-sec .tab-cont .cont+.cont {
  border-top: solid 1px #EDEDED;
}

#wrapper .actor .career-sec .tab-cont .cont .head {
  width: calc((100 / 1050) * 100%);
  font-family: var(--hd-font);
  font-size: 14px;
  font-weight: 400;
  text-align: center;
}

#wrapper .actor .career-sec .tab-cont .cont p {
  width: calc((950 / 1050) * 100%);
  font-family: var(--text-font);
  font-size: 14px;
  font-weight: 300;
  line-height: calc(24 / 14);
  padding-left: calc((32 / 1050) * 100%);
  border-left: 1px solid #EDEDED;
}

#wrapper .actor .career-sec .tab-cont .cont p.text-only {
  width: 100%;
  padding: 0;
  border: none;
}

#wrapper .actor .career-sec .tab-cont .cont ul li {
  display: flex;
  font-family: var(--text-font);
  font-size: 14px;
  font-weight: 300;
  line-height: calc(24 / 14);
}

#wrapper .actor .career-sec .tab-cont .cont ul li::before {
  content: "・";
}


#wrapper .actor .career-sec .tab-cont .sub {
  display: flex;
  justify-content: center;
  width: fit-content;
  min-width: 65px;
  font-family: var(--hd-font);
  font-size: 12px;
  font-weight: 300;
  color: #FFF;
  padding: 4px 6px 2px;
  margin: 24px 0 -10px;
  border-radius: 25px;
  background: var(--deco-color);
  line-height: 1.0;
}

/*sp*/
@media (max-width:767px) {
  #wrapper .actor .career-sec label {
    flex: initial;
    font-size: clamp(5px, 3.2vw, 12px);
    width: calc(100% / 3);
    padding: 16px 0;
    cursor: pointer;
  }

  #wrapper .actor .career-sec label:not(:nth-of-type(3))::after {
    content: "";
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 18px;
    background-color: #EDEDED;
  }

  #wrapper .actor .career-sec label:last-of-type::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 100%;
    width: 300%;
    height: 1px;
    background-color: #EDEDED;
  }

  #wrapper .actor .career-sec label:nth-of-type(n+4) {
    border-top: none;
  }

  #wrapper .actor .career-sec .tab-cont {
    max-width: 96%;
    margin: auto;
  }

  #wrapper .actor .career-sec .tab-cont .cont {
    padding: 16px 0;
  }

  #wrapper .actor .career-sec .tab-cont .cont .head {
    width: calc((67 / 360) * 100%);
    font-family: var(--hd-font);
    font-size: 14px;
    font-weight: 400;
    text-align: center;
  }

  #wrapper .actor .career-sec .tab-cont .cont p {
    width: calc((293 / 360) * 100%);
    padding: 0 12px;
  }
}