/* -----------------------------------------------------
    占い師プロフィール
----------------------------------------------------- */

.profile__top {
    width:100%;
    height: 150px;

    position: relative;
}

.profile__back {
    width: 100%;
    height: 50%;
}

.profile__back--purple {
    background: #EDECFF;
}

.profile__back--gray {
    background: #F7F7F7;;
}
.profile__thumb {
    width: 120px;
    height: 120px;
    border-radius: 100px;
    overflow: hidden;
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0px 4px 4px 0px #6859B233;
}

.profile__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile_container {
    padding: 0 5%;
}

.profile__head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}

.profile__data {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 5px;
    margin: 0 auto;
}

.profile__name {
    width: 100%;
    font-weight: 700;
    font-size: 16px;

    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;

    text-align: center;
}

.profile__price {
    font-size: 16px;
    font-weight: bold;
    color: var(--gray)
}

/* .profile__price::before{
    content: "1分 ";
}

.profile__price::after{
    content: "pt";
} */

.profile__status {
    width: 90%;
    max-width: 200px;
    border-radius: 4px;
    color: #FFFFFF;
    padding: 4px 8px;
}

.profile__score {
    display: flex;
    column-gap: 15px;
}

.profile__favorite {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
}

.profile__favorite::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("data:image/svg+xml,%3csvg%20width='15'%20height='13'%20viewBox='0%200%2015%2013'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M13.9637%206.64109C15.3954%205.07669%2015.3436%202.67051%2013.8084%201.167C12.2732%20-0.336518%209.81633%20-0.387229%208.21895%201.01487C8.1632%201.06381%208.10849%201.11452%208.0549%201.167L7.5%201.71045L6.9451%201.167C6.89151%201.11452%206.8368%201.06381%206.78105%201.01487C5.18367%20-0.387229%202.72679%20-0.336518%201.19159%201.167C-0.34361%202.67051%20-0.39539%205.07669%201.03625%206.64109C1.08622%206.6957%201.138%206.74928%201.19159%206.80176L1.74606%207.34479L1.72604%207.36523L7.47955%2013L7.5%2012.98L7.52045%2013L13.274%207.36524L13.2535%207.34521L13.8084%206.80176C13.862%206.74928%2013.9138%206.6957%2013.9637%206.64109Z'%20fill='%23F24370'/%3e%3c/svg%3e");
}


.profile__favoriteButton {
    font-size: 14px;
    height: 40px;
    column-gap: 5px;
    box-shadow: 0px 4px 4px 0px #00000026;
    transition: 0.25s;

    margin-top: 5px;
}

.profile__favoriteButton::after {
    content: "お気に入り登録";
}


.profile__favoriteButton::before {
    content: "";
    display: flex;
    align-items: center;
    width: 15px;
    height: 13px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-image: url("data:image/svg+xml,%3csvg%20width='16'%20height='13'%20viewBox='0%200%2016%2013'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M7.65015%202.06767L8%202.41029L8.34985%202.06767L8.90475%201.52422C8.95182%201.47811%208.99986%201.43359%209.04879%201.39064C10.451%200.159813%2012.6116%200.205017%2013.9586%201.52422C15.3005%202.83843%2015.3452%204.93725%2014.0949%206.30354L14.4637%206.64109L14.0949%206.30354C14.0511%206.35141%2014.0056%206.39844%2013.9586%206.44454L13.4037%206.98799L13.0389%207.3452L13.0594%207.36523L8.02045%2012.3002L8%2012.2801L7.97954%2012.3001L2.93311%207.35786L2.95313%207.33742L2.59591%206.98757L2.04144%206.44454C1.99436%206.39844%201.94892%206.35141%201.90511%206.30354C0.654772%204.93725%200.699532%202.83843%202.04144%201.52422C3.38844%200.205017%205.54895%200.159813%206.95121%201.39064C7.00014%201.43359%207.04818%201.47811%207.09525%201.52422L7.65015%202.06767Z'%20stroke='%236859B3'/%3e%3c/svg%3e");
}

.profile__favoriteButton.active::before {
    background-image: url("data:image/svg+xml,%3csvg%20width='15'%20height='13'%20viewBox='0%200%2015%2013'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M13.9637%206.64109C15.3954%205.07669%2015.3436%202.67051%2013.8084%201.167C12.2732%20-0.336518%209.81633%20-0.387229%208.21895%201.01487C8.1632%201.06381%208.10849%201.11452%208.0549%201.167L7.5%201.71045L6.9451%201.167C6.89151%201.11452%206.8368%201.06381%206.78105%201.01487C5.18367%20-0.387229%202.72679%20-0.336518%201.19159%201.167C-0.34361%202.67051%20-0.39539%205.07669%201.03625%206.64109C1.08622%206.6957%201.138%206.74928%201.19159%206.80176L1.74606%207.34479L1.72604%207.36523L7.47955%2013L7.5%2012.98L7.52045%2013L13.274%207.36524L13.2535%207.34521L13.8084%206.80176C13.862%206.74928%2013.9138%206.6957%2013.9637%206.64109Z'%20fill='%23F24370'/%3e%3c/svg%3e");
}

.profile__favoriteButton.active::after {
    content: "登録済み";
}

.profile__favoriteButton.active {
    font-weight: 700;
    color: var(--black);
    box-shadow: none;
    border: 1px solid var(--light-gray);
}

.profile__dl {
    width: 100%;
    max-width: 400px;
    /* max-height: calc(100% - (107px + 150px + 50px)); */
    /* overflow-y: scroll; */
    display: block;
    margin: 15px auto;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;

}

.profile__dt {
    font-weight: bold;
    color: var(--sub-purple);;
    margin-bottom: 10px;
    width: 35%;
    text-align: center;
    display: flex;
    justify-content: center;
}

.profile__dd {
    width: 65%;
    margin-bottom: 10px;

    display: flex;
    column-gap: 5px;
    row-gap: 2px;

    flex-wrap: wrap;

}

.profile__dd:last-child {
    margin-bottom: 0;
}

.profile__dd--forStandbySchedule {
    flex-wrap: wrap;

    height: auto;

    box-sizing: border-box;
    border: 1px solid var(--light-gray);;
    border-radius: 4px;
    padding: 10px 5px;
}

.profile__fortuneCategory::after {
     content:"、";
}

.profile__fortuneCategory:last-child::after {
    content: "";
}

.profile__talkCategory {
    display: inline-block;
}

.profile__talkCategory::after {
    content:"、"
}

.profile__talkCategory:last-child::after {
    content: "";
}

/* .buttonArea {
    width: 100%;
    height:100px;
    background-color: rgb(0, 0, 0, 0.3);
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 5%;
    box-sizing: border-box;
} */
.profileCard__foot {
    max-width: 400px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    left: 0;
    right: 0;
    margin: 0 auto;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

.callButton {
    width: 96%;
    border: 2px solid #F24370;
    border-radius: 5px;
    overflow: hidden;
    padding: 0;
    font-family: sans-serif;
    background-color: white;
    cursor: pointer;
    max-width: 400px;
    margin: 0 auto;
    background: #F24370;
    color: #F24370;
}

.callButton__top {
  background-color: white;
  text-align: center;
  padding: 4px;
  font-weight: bold;
  align-items: center;
  margin-top: 0%;
}

.callButton__bottom {
  color: #F24370;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  gap: 8px;
}

.callButton__icon {
  width: 20px;
  height: 20px;
}

.callButton__points {
  font-weight: bold;
  font-size: 20px;
}


.callButton__list {
  display: flex;
  gap: 20px;
}


.callButton__icon {
  width: 20px;
  height: 20px;
  margin-right: 6px;
}

.callButton__points {
  color: #ffffff;
  font-size: 18px;
}

.callButton__row {
  display: flex;
    gap: 16px;
    width: 94%;
    text-align: center;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding-top: 4%;
    align-items: center;
}

.fixed-footer button {
    margin-bottom: 4%;
}

/* 色違い用の修飾クラス */
.callButton--alt1 {
  background-color: #59B83F; /* 緑系 */
  border:2px solid #59B83F;
  color:#59B83F;
}

.callButton--alt2 {
  background-color: #129AD9; /* 青系 */
  border:2px solid #129AD9;
  color:#129AD9;
}

.fixed-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.5); /* ← 黒50%透過 */
  border-top: 1px solid #ccc;
  text-align: center;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
  z-index: 999;
  padding-top: 10px;
  padding-bottom: 10px;
  height: 200px;
  max-width: 430px;
  right: 0;
  left: 0;
  margin: 0 auto;
}

.buttonArea--hover {
    transition: 0.1.25s;
    background-color: var(--white);
}

.schedule {
    padding: 0 5%;

}

.schedule__title {
    font-size: 14px;
    color: var(--purple);
    padding: 15px 0 5px;
}

.schedule__frame {
    padding: 10px;
    border: 1px solid var(--purple);;
    border-radius: 4px;
    font-size: 14px;
    display: flex;
    margin-bottom: 2%;
}

.schedule__date {
    width: 35%;
}

.schedule__time {
    width: 65%;
    /* margin-bottom: 10px; */
    display: flex;
    column-gap: 5px;
    row-gap: 2px;
    flex-wrap: wrap;
}

.schedule__hour::after {
    content: "、";
}

.schedule__hour:last-child::after {
    content: "";
}

.schedule__reservButton {
    margin: 20px 0;
}

.schedule__detail {
    width: 100%;
    display: inline-block;
    text-align: end;
    font-size: 14px;
    text-decoration: underline;
    color: #377BFF;
    padding: 10px 0;
    cursor: pointer;
}

.message {
    padding: 5%;
}

.message__title {
    color: var(--purple);;
}

.message__frame {
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid var(--purple);;
    border-radius: 4px;
    font-size: 14px;

    display: flex;
}

/* .pr {

} */

.pr__tab {
    border-bottom: 1px solid var(--light-gray);
    text-align: center;
}

.pr__title {
    font-weight: 700;
    padding: 15px 0;
    margin: 0 5%;
    width: 120px;
    border-bottom: 3px solid var(--accent-purple);

}

.pr__text {
    font-size: 14px;
    text-align: justify;
    padding: 5%;
}



/* 退会ページ */
.cancelTop {
    border-top: 1px solid var(--light-gray);
    padding: 20px;
    text-align: center;
}

.cancelTop__head {
    color: var(--sub-purple);
    font-size: 22px;
    font-weight: 700;
}

.cancelTop__text {
    font-size: 16px;
    font-weight: 700;
    margin:  10px 0;
}

.cancelBanner {
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.radio-wrapper {
    padding: 15px;
    font-size: 16px;
    line-height: 2;
}

.radio-wrapper input[type="radio"] {
    accent-color: var(--purple);
}

.cancelContainer__text {
    background-color: var(--white-gray);
    font-size: 16px;
    padding: 10px;
    /* text-align: center; */
    display: flex;
    justify-content: center;
}

.cancelContainer {
    padding: 15px;
}

.cancelFoot {
    padding: 0px 15px 15px;
}
.cancelFoot__highButton {
    height: 64px;
    margin-bottom: 20px;
}
.cancelFoot__sub-text {
    font-size: 16px;
    text-align: center;
    padding: 10px 0;
}

.cancelForm {
    padding: 15px;
    font-size: 15px;
}

.cancelForm__inputArea {
    margin-top: 20px;
}

.cancelForm__checkbox {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    gap: 5px;
    font-size: 14px;
}

.cancelForm__textarea {
    padding: 15px;
    margin-bottom: 15px;
    vertical-align: text-top;
}

.cancelForm__button {
    margin: 30px auto;
}

.callButton__bottom {
    display: flex;
    align-items: center; /* 垂直センター揃え */
    gap: 6px; /* アイコンとテキストの間 */
}

.callButton__bottom img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;         /* ← Androidのインライン画像ずれ防止 */
}

.callButton__bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.callButton__bottom img {
    width: 20px;
    height: 20px;
    display: block;
    object-fit: contain;
}

.callButton__points {
    line-height: 1;
    display: block;
}

a {
    width: 100%;
}

/* ボタン追加のため調整 */

.main {
    min-height: 100vh;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    max-width: 430px;
    background-color: #F7F7F7;
    margin: 0 auto;
    overflow-x: hidden;
}

#main2 {
    min-height: 100vh;
    position: relative;
    padding-bottom: 220px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    max-width: 430px;
    background-color: #F7F7F7;
    margin: 0 auto;
    overflow-x: hidden;
}

.footer {
    position: static;
    width: 100%;
    height: auto;
    padding-top: 20px;
}

.profileCard__head {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
    background: #EDECFF;
    padding: 4%;
    margin-bottom: 4%;
}

.profileCard__thumb {
    width: 120px;
    height: 120px;
    border-radius: 100px;
    overflow: hidden;
}

.profileCard__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profileCard__data {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 5px;
}

.profileCard__name {
    width: 100%;
    font-size: 16px;

    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;

    text-align: center;
}

.profileCard__price {
    font-size: 16px;
    font-weight: bold;
}

img.callTeller__image {
    width: 120px;
}

span.text-white.font18{
    color: #ffffff;
}
