/* ログインホーム
====================================================*/
@media screen and (max-width: 500px) {
    .home-announce {
        text-align: left;
    }
}
/* Noto Sans JP Medium */
@font-face {
    font-family: "NSJ";
    src: url("/view/font/NotoSansJP-Medium.ttf") format("truetype");
}

.dm-wrap {
    width: 90%;
    margin: 0 auto;
}

.dm-in {
    display: flex;
    padding: clamp(1.5rem, 1.3182rem + 0.9091vw, 2rem) 0
        clamp(0.7875rem, 0.675rem + 0.6vw, 1.125rem);
    border-bottom: 2px solid #c28cb7;
    align-items: center;
}

.dm-in-img {
    width: 80px;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 50%;
    aspect-ratio: 1/1;
}

@media screen and (max-width: 500px) {
    .dm-in-img {
        width: 60px;
    }
}

@media screen and (max-width: 400px) {
    .dm-in-img {
        width: 40px;
    }
}

.dm-in-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.dm-in-r {
    font-family: "NSJ", sans-serif;
    font-weight: 500;
    flex-grow: 1;
    margin-left: 1rem;
    overflow: hidden;
}

.dm-in-r-t {
    text-align: left;
    justify-content: space-between;
    align-items: baseline;
}

.dm-in-r-name {
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 1;
    white-space: normal;
    margin: clamp(0.125rem, 0.0568rem + 0.3409vw, 0.3125rem) 0;
}

.dm-in-r-title {
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 1;
    white-space: normal;
    margin: clamp(0.125rem, 0.0568rem + 0.3409vw, 0.3125rem) 0;
}

.dm-in-r-name p {
    font-weight: bold;
    font-size: clamp(0.625rem, 0.5341rem + 0.4545vw, 0.875rem);
}

.dm-in-r-title p {
    font-weight: bold;
}

.dm-in-r-time {
    text-align: right;
    display: block;
    white-space: nowrap; /* テキストを折り返さないように変更 */
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-in-r-s {
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
    white-space: normal;
}

.dm-in-r-s pre {
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
    white-space: pre-wrap;
    font-size: clamp(0.875rem, 0.75rem + 0.6667vw, 1.25rem);
    font-family: "NSJ", sans-serif;
    font-weight: 500;
}

/* プロフィール
====================================================*/
.profile-edit {
    width: clamp(0.875rem, 0.75rem + 0.6667vw, 1.25rem);
    height: clamp(0.875rem, 0.75rem + 0.6667vw, 1.25rem);
    margin-left: clamp(0.875rem, 0.75rem + 0.6667vw, 1.25rem);
}
.profile-edit img {
    width: 100%;
}

.profile-box {
    margin: 0 auto;
    width: 90%;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.2));
    overflow: hidden;
    border: 5px solid #c28cb7;
    padding: 5%;
}

@media screen and (max-width: 500px) {
    .profile-box {
        border: 3px solid #c28cb7;
    }
}

.profile-title {
    display: flex;
    justify-content: left;
    align-items: center;
}

.profile-title p {
    margin: clamp(0.125rem, 0.0568rem + 0.3409vw, 0.3125rem) 0;
}

.profile-box-text {
    text-align: left;
}

.profile-box-text p {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.profile-box-pre pre{
    text-align: left;
    white-space: pre-wrap;
    font-family: "NSJ", sans-serif;
    font-weight: 500;
    font-size: clamp(0.75rem, 0.6591rem + 0.4545vw, 1rem);
}

/* プロフィールアイコン*/
.profile-edit-icon {
    width: clamp(0.875rem, 0.75rem + 0.6667vw, 1.25rem);
    height: clamp(0.875rem, 0.75rem + 0.6667vw, 1.25rem);
    margin-top: auto;
    margin-left: clamp(0.875rem, 0.75rem + 0.6667vw, 1.25rem);
}
.profile-edit-icon img {
    width: 100%;
}
.profile-icon {
    display: flex;
    justify-content: center;
}
.image-container {
    width: 100px;
    height: 100px;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    border: 1px solid #ccc;
    margin: 0;
    border-radius: 50%;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 50%;
}

/* 退会 */
.unsubscribe-box {
    margin: 0 auto;
    width: 20%;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.2));
    overflow: hidden;
    border: 5px solid #c28cb7;
    padding: 1.5%;
    font-size: clamp(0.6875rem, 0.625rem + 0.3333vw, 0.875rem);
}

@media screen and (max-width: 500px) {
    .unsubscribe-box {
        width: 40%;
        border-radius: 7px;
        border: 3px solid #c28cb7;
    }
}

/* プラットフォーム
====================================================*/
.platform-wrap {
    display: flex;
    margin: 2%;
    flex-wrap: wrap;
}
.platform-box {
    margin: 2%;
    width: 46%;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.2));
    overflow: hidden;
    border: 5px solid #c28cb7;
}

.platform-box-in {
    text-align: left;
    margin: 0 5%;
}
/* .platform-box-wait{
    font-size: clamp(0.75rem, 0.6591rem + 0.4545vw, 1rem);
    color: red;
    margin-left: clamp(0.75rem, 0.6591rem + 0.4545vw, 1rem);
} */
.platform-box-text {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

@media screen and (max-width: 500px) {
    .platform-box {
        width: 96%;
        border: 3px solid #c28cb7;
    }
}

/* ボタン */

.platform-box-button {
    color: #fff; /*文字・アイコン色*/
    border-radius: 7px; /*角丸に*/
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    height: clamp(1.5rem, 1.2273rem + 1.3636vw, 2.25rem); /*高さ*/
    width: 190px; /*幅*/
    text-align: center; /*中身を中央寄せ*/
    font-size: clamp(0.875rem, 0.75rem + 0.6667vw, 1.25rem); /*文字のサイズ*/
    line-height: 1; /* line-heightの値を1に設定 */
    background: #c28cb7;
    overflow: hidden; /*はみ出た部分を隠す*/
    text-decoration: none; /*下線は消す*/
    vertical-align: middle; /* 垂直方向の配置を中央に調整 */
}
.platform-box-button span {
    /*テキスト*/
    display: inline-block;
    transition: 0.5s;
}
.platform-box-button button {
    /*テキスト*/
    display: inline-block;
    transition: 0.5s;
}

.platform-box-button2 {
    color: #fff; /*文字・アイコン色*/
    border-radius: 7px; /*角丸に*/
    display: inline-block;
    height: clamp(1.5rem, 1.2273rem + 1.3636vw, 2.25rem); /*高さ*/
    width: 190px; /*幅*/
    text-align: center; /*中身を中央寄せ*/
    font-size: clamp(0.875rem, 0.75rem + 0.6667vw, 1.25rem); /*文字のサイズ*/
    line-height: clamp(
        1.5rem,
        1.2273rem + 1.3636vw,
        2.25rem
    ); /*高さと合わせる*/
    background: #ff7777;
    overflow: hidden; /*はみ出た部分を隠す*/
    text-decoration: none; /*下線は消す*/
}

/* 応援リクエスト
====================================================*/
.request-button {
    float: left;
    clear: both;
    font-size: clamp(0.7875rem, 0.675rem + 0.6vw, 1.125rem);
    color: blue;
}

/* 応援詳細
====================================================*/
.adopt-box {
    width: 80%;
    margin: 0 auto;
}
.adopt-box p {
    word-break: break-all;
}
.ouen-detail-pre{
    font-family: "NSJ2", sans-serif;
    font-weight: 400;
    margin: clamp(0.125rem, 0.0568rem + 0.3409vw, 0.3125rem) 0;
    text-align: left;
    white-space: pre-wrap;
    font-size: clamp(0.7875rem, 0.675rem + 0.6vw, 1.125rem);
}

/* 応援リスト
====================================================*/
.ouenlist-head{
    display: flex;
    width:85%;
    margin: 0 auto;
    justify-content: left;
    color: #fff;
}
.ouenlist-head-in{
    margin: 0 1px;
    padding: 2% 0.5% 1% 0.5%;
    width:250px;
    background-color: #ccc;
    border-radius: 10px 10px 0px 0px;
}

.ouenlist-head-in:hover{
    background-color: #c28cb7;
    transition : 0.3s;
}

.ouenlist-head .acctive{
    background-color: #c28cb7;
}

/* 応援からのお知らせ詳細
====================================================*/
.news-body-text {
    text-align: left;
    white-space: pre-wrap;
    font-size: clamp(0.875rem, 0.75rem + 0.6667vw, 1.25rem);
    font-family: "NSJ", sans-serif;
    font-weight: 500;
}

/* 報酬確認
====================================================*/
.payment-top-day {
    text-align: center;
    display: block;
    white-space: nowrap; /* テキストを折り返さないように変更 */
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(0.7875rem, 0.675rem + 0.6vw, 1.125rem);
}

.payment-top-box {
    display: flex;
    margin: clamp(20px, 5vw, 44px) auto;
    padding: clamp(10px, 2.5vw, 22px);
    justify-content: space-between;
    width: 90%;
    background-color: #c28cb7;
    border-radius: 10px;
}
.payment-top-price {
    font-size: clamp(1.125rem, 0.9583rem + 0.8889vw, 1.625rem);
    color: #fff;
}
.payment-top-detail {
    font-size: clamp(0.625rem, 0.5417rem + 0.4444vw, 0.875rem);
    background-color: #fff;
    color: #c28cb7;
    border-radius: 5px;
    padding: clamp(5px, 1.25vw, 11px);
}
.payment-top-detail:hover {
    background-color: #ffeafa;
    transition: 0.3s;
}
.payment-top-text {
    font-size: clamp(0.625rem, 0.5417rem + 0.4444vw, 0.875rem);
}

/* テーブル */
.table_payment {
    border-spacing: 0;
    border-collapse: separate;
    width: 100%;
}
.table_payment th,
.table_payment td {
    border-top: 1px solid #c28cb7;
    text-align: left;
}
.table_payment th {
    padding: 9px 5px 7px;
    background: #c28cb7;
    color: #ffffff;
    font-size: clamp(0.625rem, 0.5417rem + 0.4444vw, 0.875rem);
    font-weight: bold;
}
.table_payment td {
    padding: 9px 5px 7px;
    background: #fcfcfc;
    color: #000000;
    font-size: clamp(0.625rem, 0.5417rem + 0.4444vw, 0.875rem);
}
.table_payment tr:nth-child(even) td {
    background: #eeeeee;
}
.table_payment tr:last-child th,
.table_payment tr:last-child td {
    border-bottom: 1px solid #c28cb7;
}
.table_payment th:not(:first-child),
.table_payment td:not(:first-child) {
    border-left: none;
}
.table_payment .table_detail {
    text-align: center;
    color: #b889ae;
    white-space: nowrap;
}

/* 報酬確認詳細
====================================================*/
.paymentdetail-ele {
    display: flex;
    justify-content: space-between;
    padding-top: clamp(10px, 2.5vw, 22px);
    padding-bottom: clamp(2.5px, 0.625vw, 5.5px);
    border-bottom: 1px solid #a3a3a3;
}
.paymentdetail-ele p {
    font-size: clamp(0.625rem, 0.5417rem + 0.4444vw, 0.875rem);
}

.paymentdetail-ele-price {
    margin-left: clamp(1.125rem, 0.9583rem + 0.8889vw, 1.625rem);
}

.paymentdetail-certificate {
    padding-top: clamp(10px, 2.5vw, 22px);
    text-align: right;
}
.paymentdetail-certificate a {
    border-bottom: 1px solid #000;
    font-size: clamp(0.625rem, 0.5417rem + 0.4444vw, 0.875rem);
}

/* 報酬支払い明細書
====================================================*/
.paymentdetail-c-price {
    display: flex;
    justify-content: space-between;
    padding-top: clamp(10px, 2.5vw, 22px);
    padding-bottom: clamp(2.5px, 0.625vw, 5.5px);
    border-bottom: 1px solid #a3a3a3;
}

.paymentdetail-c-ele-price p {
   padding-top: clamp(5px, 1.25vw, 11px);
   font-size: clamp(0.625rem, 0.5417rem + 0.4444vw, 0.875rem);
}

.paymentdetail-c-ele-me p {
    padding-top: clamp(5px, 1.25vw, 11px);
    font-size: clamp(0.625rem, 0.5417rem + 0.4444vw, 0.875rem);
 }