@charset "utf-8";
/* ----------------------------------------------------------------------------------------
* Author        : MFHM
* File          : Member Control CSS file
* ---------------------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------------------
                     01. Contents area css
------------------------------------------------------------------------------------------ */
.required-txt {
  font-size: 0.875rem;
}

.form-table.control-table tr {}

@media screen and (max-width: 960px) {
    .form-table.control-table tr {
        flex-direction: column;
    }
}

.form-table.control-table th {
    width: 434px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding-left: 24px;
    flex-shrink: 0;
}

@media screen and (max-width: 960px) {
    .form-table.control-table th {
        width: 100%;
        padding: 12px;
    }
}

@media screen and (max-width: 559px) {
    .form-table.control-table th {
        padding-left: 12px;
    }
}

.form-table.control-table td {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: calc(100% - 434px);
}

@media screen and (max-width: 960px) {
    .form-table.control-table td {
        width: 100%;
    }
}

@media screen and (max-width: 960px) {
  .form-table .unflex {
    display: block;
  }
}

.add-label {
	font-size: 0.875rem;
}

/*title*/
.form-table tr:first-of-type td div:first-of-type {
    width: 26%;
}

/*name*/
.form-table tr:first-of-type td div:last-of-type {}

.form-table tr:first-of-type td div:last-of-type ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.form-table tr:first-of-type td div:last-of-type li {
    width: 32%;
}

.form-table .form-radio-area {
    display: flex;
}

.form-radio-area label span {
    padding-left: 12px;
}

/*メルマガ*/
.form-table.control-table .form-newsletter th {
    width: 126px;
}

@media screen and (max-width: 960px) {
    .form-table.control-table .form-newsletter th {
        width: 100%;
    }
}

@media screen and (max-width: 559px) {
  .form-table.control-table td {
    font-size: 0.875rem;
  }
}

.form-table.control-table .form-newsletter td {
    width: calc(100% - 126px);
    padding: 0;
}

@media screen and (max-width: 960px) {
    .form-table.control-table .form-newsletter td {
        width: 100%;
    }
}

.form-newsletter-list {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.form-newsletter-list > li {
    display: flex;
}

.form-newsletter-list > li:not(:first-child) {
    border-top: 1px solid #98BFDB;
}

/*メルマガ名*/
.form-newsletter-list > li > label {
    width: 308px;
    padding: 8px 24px 8px 0;
    text-align: right;
    font-size: 0.875rem;
    color: #7D7D7D;
    background-color: #f2f2f2;
    flex-shrink: 0;
}

@media screen and (max-width: 960px) {
    .form-newsletter-list > li > label {
        padding: 8px;
        text-align: left;
    }
}

@media screen and (max-width: 768px) {
    .form-newsletter-list > li > label {
        width: 40%;
        font-size: 0.6875rem;
    }
}
@media screen and (max-width: 559px) {
    .form-newsletter-list > li > label {
        width: 30%;
        padding: 5px 12px;
        font-size: 0.6875rem;
    }
}

.form-newsletter-list > li > div {
    padding: 8px 0 8px 24px;
}

@media screen and (max-width: 960px) {
    .form-newsletter-list > li > div {
        padding: 8px 12px;
    }
}

@media screen and (max-width: 559px) {
    .form-newsletter-list > li > div {
        width: 70%;
        padding: 5px 12px;
        font-size: 0.875rem;
    }
}

.form-newsletter-list > li .form-radio-area li {
    margin-right: 24px;
}

@media screen and (max-width: 960px) {
    .form-newsletter-list > li .form-radio-area li {
        margin-right: 12px;
        font-size: 0.875rem;
    }
}

.btn.only-once {
  width: 120px;
  margin-left: 2rem;
  line-height: 40px;
}

[data-mirror="gender"][data-key="M"]::after {
  content: 'Male';
}
[data-mirror="gender"][data-key="F"]::after {
  content: 'Female';
}
[data-mirror="gender"][data-key="X"]::after {
  content: '"Sigh."';
}

[data-key="EMH"]::after {
  content: 'HTML mails';
}
[data-key="EM"]::after {
  content: 'Text mails';
}
[data-key=""]::after {
  content: 'Needless';
}

[data-target="modal-reconfirm"]:disabled {
    opacity: 0.5;
}

[data-mirror="privacy-title"] {
  margin-right: 2px;
}

[data-mirror="privacy-name-first-real"],
[data-mirror="privacy-name-middle"] {
  margin-right: 8px;
}

[data-mirror="privacy-name-middle"]:empty {
  margin-right: -8px;
}

.wrap .btn-behind,
.wrap .btn-default {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 48px;
	line-height: 1;
}

.wrap .btn-behind span,
.wrap .btn-default span {
	display: block;
	margin-top: 4px;
	font-size: 0.75rem;
}

/* ----------------------------------------------------------------------------------------
                     02. modal area css
------------------------------------------------------------------------------------------ */
@media screen and (max-width: 1200px) {
    #modal-reconfirm .modal-inner {
        width: 92%;
    }
}

@media screen and (max-width: 1200px) {
    .form-table.mypage-table tr {
        flex-direction: column;
    }
}

.form-table.mypage-table th {
    width: 434px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding-left: 24px;
}

@media screen and (max-width: 1200px) {
  .form-table.mypage-table th {
    width: 100%;
    padding: 12px 24px;
  }
}

@media screen and (max-width: 559px) {
    .form-table.mypage-table th {
        padding: 5px 12px;
    }
}

.form-table.mypage-table td {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: calc(100% - 434px);
}

@media screen and (max-width: 1200px) {
  .form-table.mypage-table td {
    width: 100%;
  }
}

/*メルマガ*/
.form-table.mypage-table tr:last-of-type th {
    width: 120px;
}

@media screen and (max-width: 1200px) {
    .form-table.mypage-table tr:last-of-type th {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
  .form-table.mypage-table td {
    font-size: 0.875rem;
  }
}

.form-table.mypage-table tr:last-of-type td {
    width: calc(100% - 120px);
    padding: 0;
}

@media screen and (max-width: 1200px) {
    .form-table.mypage-table tr:last-of-type td {
        width: 100%;
    }
}

.form-table.mypage-table ul {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.form-table.mypage-table li {
    width: 100%;
    display: flex;
    align-items: center;
}

@media screen and (max-width: 768px) {
    .form-table.mypage-table li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.6875rem;
    }
}

.form-table.mypage-table li:not(:first-child) {
    border-top: 1px solid #98BFDB;
}

/*メルマガ名*/
.form-table.mypage-table li label {
    width: 314px;
    padding: 8px 24px 8px 0;
    text-align: right;
    font-size: 0.875rem;
    color: #7D7D7D;
    background-color: #f2f2f2;
}

@media screen and (max-width: 768px) {
    .form-table.mypage-table li label {
        width: 60%;
        padding: 8px 12px 8px 0;
        font-size: 0.6875rem;
    }
}

.form-table.mypage-table li span {
    width: calc(100% - 480px);
    margin-left: 24px;
    font-size: 1rem;
    color: #333;
}

@media screen and (max-width: 768px) {
    .form-table.mypage-table li span {
        width: 40%;
        margin-left: 12px;
        font-size: 0.875rem;
    }
}