@charset "UTF-8";
/* image */
.ph, .thumb, .keyvisual {
  position: relative;
  line-height: 0;
}

.ph img, .thumb img, .keyvisual img {
  width: 100%;
}

.ph img::after, .thumb img::after, .keyvisual img::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.ph::after, .thumb::after, .keyvisual::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.ph .dummy, .thumb .dummy, .keyvisual .dummy {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

body {
  background-color: #f5f5f5;
}

a {
  color: #000;
}
a:hover {
  color: #444;
}

.btn--main {
  background: #E73820;
  color: #fff;
}
.btn--main:hover {
  background: #e36958;
}

.btn--sub {
  background: transparent;
  color: #E73820;
}
.btn--sub:hover {
  color: #fff;
  background: #e36958;
}

.detail__btn a::before {
  border-color: #000000;
}

.btn--chevron {
  color: #E73820;
}
.btn--chevron::after {
  border-color: #E73820;
}
.btn--chevron:hover {
  color: #e36958;
}
.btn--chevron:hover::after {
  border-color: #e36958;
}

.btn--chevron-left {
  color: #E73820;
}
.btn--chevron-left::after {
  border-color: #E73820;
}
.btn--chevron-left:hover {
  color: #e36958;
}
.btn--chevron-left:hover::after {
  border-color: #e36958;
}

.flex--container {
  display: flex;
}

header {
  padding: 2em 5% 0;
}
header h1 {
  width: 20vw;
  margin: 20px auto;
  position: relative;
  max-width: 280px;
}
header h1 svg {
  fill: #000;
}

.section--login {
  padding-top: 0;
}

.wrap {
  background: #f5f5f5;
}

.block--attention {
  font-size: 14px;
  border: 1px solid;
  padding: 20px;
  border-radius: 6px;
}

.txt--attention {
  font-size: 14px;
  background: #ffdada;
  color: #cc0000;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 40px;
}

/* SP */
/* tablet */
@media screen and (min-width: 570px) and (max-width: 960px) {
  .page--mypage h1.logo {
    width: 110px;
    margin-bottom: 5px;
  }
}
body.trigger .artist--image, body.trigger .oshimen {
  opacity: 1;
}

.artist--image {
  width: clamp(276.2px, 22.5vw, 325px);
  height: clamp(276.2px, 22.5vw, 325px);
  background: rgb(79, 79, 79);
  border-radius: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 5;
  box-shadow: 0px 6px 18px -5px rgba(119, 119, 119, 0.55);
  opacity: 0;
  transition: all 0.7s;
}

.artist--image {
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center 0%;
}
.artist--image.anna {
  background-image: url("/static/oactors/fanclub/oshimen/anna_koe3gg3w.jpg");
}
.artist--image.garcia {
  background-image: url("/static/oactors/fanclub/oshimen/garcia_koe3gg3w.jpg");
}
.artist--image.miori {
  background-image: url("/static/oactors/fanclub/oshimen/miori_koe3gg3w.jpg");
}
.artist--image.hinano {
  background-image: url("/static/oactors/fanclub/oshimen/hinano_koe3gg3w.jpg");
}
.artist--image.caily {
  background-image: url("/static/oactors/fanclub/oshimen/caily_koe3gg3w.jpg");
}
.artist--image.daniel {
  background-image: url("/static/oactors/fanclub/oshimen/daniel_koe3gg3w.jpg");
}
.artist--image.miria {
  background-image: url("/static/oactors/fanclub/oshimen/miria_koe3gg3w.jpg");
}
.artist--image.aine {
  background-image: url("/static/oactors/fanclub/oshimen/aine_koe3gg3w.jpg");
}
.artist--image.mioka {
  background-image: url("/static/oactors/fanclub/oshimen/mioka_koe3gg3w.jpg");
}
.artist--image.clara {
  background-image: url("/static/oactors/fanclub/oshimen/clara_koe3gg3w.jpg");
}
.artist--image.kiyoto {
  background-image: url("/static/oactors/fanclub/oshimen/kiyoto_koe3gg3w.jpg");
}
.artist--image.kuromu {
  background-image: url("/static/oactors/fanclub/oshimen/kuromu_koe3gg3w.jpg");
}
.artist--image.maria01 {
  background-image: url("/static/oactors/fanclub/oshimen/maria01_koe3gg3w.jpg");
}
.artist--image.lia {
  background-image: url("/static/oactors/fanclub/oshimen/lia_koe3gg3w.jpg");
}
.artist--image.mimi {
  background-image: url("/static/oactors/fanclub/oshimen/mimi_koe3gg3w.jpg");
}
.artist--image.rio {
  background-image: url("/static/oactors/fanclub/oshimen/rio_koe3gg3w.jpg");
}
.artist--image.riko {
  background-image: url("/static/oactors/fanclub/oshimen/riko_koe3gg3w.jpg");
}
.artist--image.soul {
  background-image: url("/static/oactors/fanclub/oshimen/soul_koe3gg3w.jpg");
}
.artist--image.hikaru {
  background-image: url("/static/oactors/fanclub/oshimen/hikaru_koe3gg3w.jpg");
}
.artist--image.maria02 {
  background-image: url("/static/oactors/fanclub/oshimen/maria02_koe3gg3w.jpg");
}
.artist--image.yuito {
  background-image: url("/static/oactors/fanclub/oshimen/yuito_koe3gg3w.jpg");
}
.artist--image.rui {
  background-image: url("/static/oactors/fanclub/oshimen/rui_koe3gg3w.jpg");
}
.artist--image.rarana {
  background-image: url("/static/oactors/fanclub/oshimen/rarana_koe3gg3w.jpg");
}
.artist--image.karin {
  background-image: url("/static/oactors/fanclub/oshimen/karin_koe3gg3w.jpg");
}
.artist--image.rian {
  background-image: url("/static/oactors/fanclub/oshimen/rian_koe3gg3w.jpg");
}
.artist--image.nanami {
  background-image: url("/static/oactors/fanclub/oshimen/nanami_koe3gg3w.jpg");
}
.artist--image.neil {
  background-image: url("/static/oactors/fanclub/oshimen/neil_koe3gg3w.jpg");
}
.artist--image.makana {
  background-image: url("/static/oactors/fanclub/oshimen/makana_koe3gg3w.jpg");
}
.artist--image.matsurika {
  background-image: url("/static/oactors/fanclub/oshimen/matsurika_koe3gg3w.jpg");
}
.artist--image.yuna {
  background-image: url("/static/oactors/fanclub/oshimen/yuna_koe3gg3w.jpg");
}
.artist--image.ren {
  background-image: url("/static/oactors/fanclub/oshimen/ren_koe3gg3w.jpg");
}
.artist--image.kumi {
  background-image: url("/static/oactors/fanclub/oshimen/kumi_koe3gg3w.jpg");
}
.artist--image.niki {
  background-image: url("/static/oactors/fanclub/oshimen/niki_koe3gg3w.jpg");
}
.artist--image.yuzuki01 {
  background-image: url("/static/oactors/fanclub/oshimen/yuzuki01_koe3gg3w.jpg");
}
.artist--image.miyu {
  background-image: url("/static/oactors/fanclub/oshimen/miyu_koe3gg3w.jpg");
}
.artist--image.saiki {
  background-image: url("/static/oactors/fanclub/oshimen/saiki_koe3gg3w.jpg");
}
.artist--image.lana01 {
  background-image: url("/static/oactors/fanclub/oshimen/lana01_koe3gg3w.jpg");
}
.artist--image.yunaki {
  background-image: url("/static/oactors/fanclub/oshimen/yunaki_koe3gg3w.jpg");
}
.artist--image.anju {
  background-image: url("/static/oactors/fanclub/oshimen/anju_koe3gg3w.jpg");
}
.artist--image.ramu {
  background-image: url("/static/oactors/fanclub/oshimen/ramu_koe3gg3w.jpg");
}
.artist--image.lizu {
  background-image: url("/static/oactors/fanclub/oshimen/lizu_koe3gg3w.jpg");
}
.artist--image.rino {
  background-image: url("/static/oactors/fanclub/oshimen/rino_koe3gg3w.jpg");
}
.artist--image.ryunoshin {
  background-image: url("/static/oactors/fanclub/oshimen/ryunoshin_koe3gg3w.jpg");
}
.artist--image.rune {
  background-image: url("/static/oactors/fanclub/oshimen/rune_koe3gg3w.jpg");
}
.artist--image.rea {
  background-image: url("/static/oactors/fanclub/oshimen/rea_koe3gg3w.jpg");
}
.artist--image.robin {
  background-image: url("/static/oactors/fanclub/oshimen/robin_koe3gg3w.jpg");
}
.artist--image.lana02 {
  background-image: url("/static/oactors/fanclub/oshimen/lana02_koe3gg3w.jpg");
}
.artist--image.miin {
  background-image: url("/static/oactors/fanclub/oshimen/miin_koe3gg3w.jpg");
}
.artist--image.mirai {
  background-image: url("/static/oactors/fanclub/oshimen/mirai_koe3gg3w.jpg");
}
.artist--image.noah {
  background-image: url("/static/oactors/fanclub/oshimen/noah_koe3gg3w.jpg");
}
.artist--image.raim {
  background-image: url("/static/oactors/fanclub/oshimen/raim_koe3gg3w.jpg");
}
.artist--image.yuzuki02 {
  background-image: url("/static/oactors/fanclub/oshimen/yuzuki02_koe3gg3w.jpg");
}
.artist--image.kotone {
  background-image: url("/static/oactors/fanclub/oshimen/kotone_koe3gg3w.jpg");
}
.artist--image.yumeno {
  background-image: url("/static/oactors/fanclub/oshimen/yumeno_koe3gg3w.jpg");
}
.artist--image.seina {
  background-image: url("/static/oactors/fanclub/oshimen/seina_koe3gg3w.jpg");
}
.artist--image.yume {
  background-image: url("/static/oactors/fanclub/oshimen/yume_koe3gg3w.jpg");
}
.artist--image.all {
  background-image: url("/static/oactors/fanclub/oshimen/all_koe3gg3w.jpg");
}

.oshimen {
  width: clamp(282.5px, 23vw, 332.3px);
  height: clamp(268.6px, 21vw, 304.5px);
  margin: 0 auto;
  border-radius: 0 0 10px 10px;
  position: relative;
  background-color: #E73820;
  margin-top: clamp(-161.8px, -11.2vw, -142.4px);
  box-shadow: 0px 23px 26px -9px rgba(119, 119, 119, 0.4196078431);
  opacity: 0;
  transition: all 0.7s;
}
.oshimen .hole {
  width: 110%;
  height: 110%;
  -webkit-clip-path: circle(48.5% at top);
          clip-path: circle(48.5% at top);
  background: #f5f5f5; /* 透明な円形 */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.oshimen__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 10% 8%;
  overflow: hidden;
}
.oshimen__detail {
  position: relative;
}
.oshimen__logo {
  position: absolute;
  left: 4%;
  bottom: -3%;
  z-index: 0;
}
.oshimen__txt {
  position: absolute;
  right: 4%;
  top: 33%;
  transform: rotate(4deg);
  width: 30%;
}
.oshimen--area {
  margin: 4vw 0 1vw;
}
.oshimen .name,
.oshimen .days {
  color: #ffffff;
  text-align: right;
  font-weight: 600;
  font-family: "nimbus-sans", sans-serif;
  line-height: 1;
  letter-spacing: 0.1em;
}
.oshimen .name {
  font-size: clamp(13px, 1.4vw, 18px);
  margin-bottom: 0.6em;
}
.oshimen .duration {
  align-items: baseline;
  justify-content: flex-end;
}
.oshimen .term {
  color: #ffffff;
  font-weight: 300;
  font-family: "nimbus-sans", sans-serif;
  font-size: clamp(10px, 0.8vw, 11px);
  margin-right: 1em;
  letter-spacing: 0.1em;
}
.oshimen .days {
  font-size: clamp(10px, 1vw, 12px);
}

@media screen and (min-width: 1px) and (max-width: 960px) {
  .oshimen--area {
    margin: 10vw 0 5vw;
  }
  .oshimen .name {
    font-size: clamp(15px, 1.4vw, 18px);
    margin-bottom: 0.6em;
  }
  .oshimen .days {
    font-size: clamp(13px, 1vw, 12px);
  }
}
.block--card {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  display: none;
  transition: none;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.close {
  position: absolute;
  width: 40px;
  height: 40px;
  right: 5%;
  top: 30px;
  cursor: pointer;
}
.close::before, .close::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: #000;
  position: absolute;
  top: 50%;
  left: 0;
}
.close::before {
  transform: rotate(45deg);
}
.close::after {
  transform: rotate(-45deg);
}

.card {
  width: 390px;
  padding: 45px 40px;
  border-radius: 10px;
  background-color: #E73820;
  color: #ffffff;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.card .star {
  position: absolute;
  z-index: 0;
}
.card .star--01 {
  top: -20px;
  right: -27px;
  transform: rotate(20deg);
}
.card .star--02 {
  width: 13%;
  right: 23%;
  top: 58%;
  transform: rotate(58deg);
}
.card .star--03 {
  width: 7%;
  right: 18%;
  bottom: -3%;
  transform: rotate(25deg);
}
.card .block--logo {
  margin-bottom: 70px;
  width: 90%;
  position: relative;
}
.card .block--status {
  position: relative;
}
.card .list-tit {
  font-size: 14px;
  font-family: "nimbus-sans", sans-serif;
  margin-right: 1.5em;
  line-height: 1.5;
}
.card .list-name {
  font-size: 14px;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "游ゴシック体", YuGothic, "Yu Gothic Medium", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Arial", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.08em;
}

@media screen and (min-width: 1px) and (max-width: 768px) {
  .card {
    width: 90%;
    padding: 10% 8%;
    max-width: 380px;
  }
}
.mypage .detail__btn.app a::after {
  content: "BACK";
}

@media screen and (min-width: 1px) and (max-width: 768px) {
  header h1 {
    width: 50vw;
    margin: 6px auto 20px auto;
  }
}/*# sourceMappingURL=mypage-service.css.map */