@charset "utf-8";

/*--------------------
    全体レイアウト
---------------------*/
.l-maincontent .topGroupName {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding-left: 5%;
    padding-right: 5%;
}
@media (min-width: 768px) {
    .l-maincontent .topGroupName {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (min-width: 481px) and (max-width: 978px) {
    .l-maincontent .topGroupName {
        margin-top: 50px;
    }
}

.l-maincontent .topGroupName .l-section {
    padding-left: 0;
    padding-right: 0;
}
.l-maincontent .l-section .topGroupName {
    padding-left: 0;
    padding-right: 0;
}

/* 画面横幅いっぱいにする */
.widthFull {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}


/*ヘッダー*/
@media (min-width: 980px){
	.l-maincontent {
   	 	padding-top: 184px;
	}
}

/* タイトル */
.titleItemWrap .title,
.titleAfterShippingItemWrap .titleAfterShipping,
.titleNoChangeGoodsItemWrap .titleNoChangeGoods,
.dateTitleItemWrap .dateTitle,
.destChangeTitleItemWrap .title,
.dateChangeTitleItemWrap .title,
.destTitleItemWrap .title,
.dateTitleItemWrap .title {
    font-size: 2.6rem;
    line-height: 1.6;
}
@media (min-width: 768px) {
    .titleItemWrap .title,
    .titleAfterShippingItemWrap .titleAfterShipping,
    .titleNoChangeGoodsItemWrap .titleNoChangeGoods,
    .dateTitleItemWrap .dateTitle,
    .destChangeTitleItemWrap .title,
    .dateChangeTitleItemWrap .title,
    .destTitleItemWrap .title,
    .dateTitleItemWrap .title {
       font-size: 2.8rem;
    }
}

#titleItemWrap,
#titleAfterShippingItemWrap,
#titleNoChangeGoodsItemWrap,
#dateTitleItemWrap,
#destChangeTitleItemWrap,
#dateChangeTitleItemWrap,
#destTitleItemWrap,
#dateTitleItemWrap {
    margin-bottom: 5px;
}

/* 見出し */
.underlineTitle {
    border-bottom: 1px solid #000;
    position: relative;
    padding: 16px 48px 16px 0;
    font-weight: bold;
    font-size: 1.8rem;
    margin: 0px 0 40px;
}
/*★*/
#OrderInfoConfirm .underlineTitle {
    margin-top: 24px;
}
@media screen and (min-width: 641px) {
    .underlineTitle {
        font-size: 2.2rem;
        margin: 0px 0 40px;
    }
    #OrderInfoConfirm .underlineTitle {
        margin-top: 48px;
    }
}

.orderCancelCompleteNormalItemWrap,
.destChangeCompMsgItemWrap,
.dateChangeCompMsgItemWrap,
.completeMessageItemWrap,
.descriptionItemWrap {
    margin-top: 60px;
}

.c-heading-prim {
    font-size: 2.8rem;
}


/* 説明文
.dispInfoItemWrap,
.descriptionItemWrap {
    margin-top: 5px;
}*/

/* フォント指定 */
input, button, select, textarea, pre {
	font-family: "Noto Sans JP", "ヒラギノ角ゴシック", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", Hiragino Sans, "メイリオ", Meiryo, sans-serif;
}
.ui-dialog.ui-widget {
	font-family: "Noto Sans JP", "ヒラギノ角ゴシック", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", Hiragino Sans, "メイリオ", Meiryo, sans-serif;
}
.ui-dialog.ui-widget input, .ui-dialog.ui-widget select, .ui-dialog.ui-widget textarea, .ui-dialog.ui-widget button {
	font-family: "Noto Sans JP", "ヒラギノ角ゴシック", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", Hiragino Sans, "メイリオ", Meiryo, sans-serif;
}

/* ボタン */
.buttonGroup  {
    margin: 80px auto 0;
}
@media (min-width: 768px) {
    .buttonGroup {
        margin: 112px auto 0;
    }
}

/* 決定ボタン */
.buttonGroup .submitWrap,
.buttonGroup .buttonWrap,
.buttonGroup .saveButtonItemWrap,
.buttonGroup .orderLink2ItemWrap,
.buttonGroup .newButtonItemWrap {
    max-width: 335px;
    margin: 0 auto;
}

.buttonGroupTop .submitWrap,
.buttonGroupTop .buttonWrap {
    max-width: 335px;
    margin: 40px auto 0;
}
@media screen and (min-width: 641px) {
    .buttonGroupTop .submitWrap,
    .buttonGroupTop .buttonWrap {
        margin-top: 64px;
    }
}
.buttonGroup input[type="submit"],
.buttonGroup input[type="button"],
.buttonGroupTop input[type="submit"],
.buttonGroupTop input[type="button"],
.buttonGroup .toTopButton {
    width: 100%;
    min-height: 48px;
    border: 1px solid #D70146;
    background-color: #D70146;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s linear, border-color 0.2s linear;
}
.buttonGroup input[type="submit"]:hover,
.buttonGroupTop input[type="submit"]:hover,
.buttonGroup input[type="button"]:hover,
.buttonGroupTop input[type="button"]:hover,
.buttonGroup .toTopButton:hover {
    border-color: #FF0052;
    background-color: #FF0052;
}
.buttonGroup input[type="submit"].stop,
.buttonGroup input[type="button"].stop,
.buttonGroupTop input[type="submit"].stop,
.buttonGroup .toTopButton.stop {
    border: 1px solid #ccc;
    background-color: #ccc;
    cursor: auto;
    pointer-events: none;
}

/* Safari用に別途指定 */
_::-webkit-full-page-media, _:future, :root input[type="submit"],
_::-webkit-full-page-media, _:future, :root input[type="button"] {
    -webkit-appearance: none;
    border-radius: 0;
}

/* 戻るボタン */
.buttonGroup .returnButtonItemWrap,
.buttonGroup .returnButton2ItemWrap,
.buttonGroup .memberTopButtonItemWrap,
.buttonGroup .continueLink2ItemWrap,
.buttonGroup .lpReturnButtonItemWrap,
.buttonGroup .lpDownsellButtonItemWrap {
    max-width: 250px;
    margin: 24px auto 0;
}
.buttonGroup .returnButtonItemWrap:first-child,
.buttonGroup .continueLink2ItemWrap:first-child,
.buttonGroup .lpReturnButtonItemWrap:first-child,
.buttonGroup .lpDownsellButtonItemWrap:first-child {
    margin: 0 auto;
}
.buttonGroup .returnButtonItemWrap a,
.buttonGroup .returnButtonItemWrap input[type="button"],
.buttonGroup .memberTopButtonItemWrap a,
.buttonGroup .memberTopButtonItemWrap input[type="button"],
.buttonGroup .returnButton2ItemWrap a,
.buttonGroup .returnButton2ItemWrap input[type="button"],
.buttonGroup .continueLink2ItemWrap a,
.buttonGroup .continueLink2ItemWrap input[type="button"],
.buttonGroup .lpReturnButtonItemWrap a,
.buttonGroup .lpReturnButtonItemWrap input[type="button"],
.buttonGroup .lpDownsellButtonItemWrap a,
.buttonGroup .lpDownsellButtonItemWrap input[type="button"] {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    border: 1px solid #D70146;
    background-color: #fff;
    color: #D70146;
    cursor: pointer;
    transition: .2s;
}
.buttonGroup .returnButtonItemWrap a:hover,
.buttonGroup .returnButtonItemWrap input[type="button"]:hover,
.buttonGroup .continueLink2ItemWrap a:hover,
.buttonGroup .continueLink2ItemWrap input[type="button"]:hover,
.buttonGroup .lpReturnButtonItemWrap a:hover,
.buttonGroup .lpReturnButtonItemWrap input[type="button"]:hover,
.buttonGroup .lpDownsellButtonItemWrap a:hover,
.buttonGroup .lpDownsellButtonItemWrap input[type="button"]:hover {
    color: #fff;
    background-color: #D70146;
}

/* ダイアログ */
.ui-dialog-content,
.ui-dialog-buttonpane {
    display: flex;
    align-items: center;
    justify-content: center;
}
.ui-widget.ui-widget-content .ui-dialog-buttonpane {
    padding: 0;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    display: flex;
    justify-content: space-around;
    width: 100%;
}
.ui-dialog.ui-widget .ui-dialog-buttonpane button {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    padding: 0 40px;
    min-height: 38px;
    border: 1px solid #D70146;
    background-color: #fff;
    color: #D70146;
    margin: 0 0 10px;
}
.ui-dialog.ui-widget .ui-dialog-buttonpane button:hover {
    color: #fff;
    background-color: #D70146;
}
.ui-dialog.ui-widget .ui-dialog-buttonpane button:focus {
    outline: none;
}
.ui-widget-overlay.ui-front {
    background: #000;
}
.ui-widget.ui-widget-content {
    border: 1px solid #bfbfbf;
    box-shadow: 1px 0px 10px rgb(0,0,0,.3);
}
.ui-draggable .ui-dialog-titlebar {
    display: none;
}
.ui-dialog .ui-dialog-buttonpane {
    border: none;
}
@media (max-width: 640px) {
    .ui-dialog-content pre {
        width: 100%;
        font-size: 12px;
    }
}

/* リンク */
a {
    transition: color 0.2s linear;
    color: #333;
}
a:hover {
    color: #D70146;
}

/* 表示・非表示 */
.onPC {
    display: none;
}
.onSP {
    display: inline-block;
}
@media (min-width: 768px) {
    .onPC {
        display: inline-block;
    }
    .onSP {
        display: none;
    }
}

/* 日本郵政版の郵便番号検索リンクを非表示にする */

.japanpost{display:none;}

/*--------------------
    フォームのエラー表示
---------------------*/
.errorGroup {
    margin-top: 40px;
    margin-bottom: 20px;
    padding: 16px;
    border: 1px solid #E80000;
    color: #E80000;
    display: none; /* 最初は消しておく */
}
.errorGroup.show {
    position: relative;
    display: block;
}
.c-form-caution .c-form-caution__title::before,
.errorGroup.show .alertMessageContentTitle::before {
    content: "";
    display: inline-block;
    font-family: "icons" !important;
    speak: none;
    font-style: normal !important;
    font-size: inherit;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none;
    line-height: 1;
    color: #E80000;
    position: absolute;
    top: 0.3em;
    left: 0;
}
.errorGroup > div,
.errorGroup > ul {
    max-width: 656px;
    margin: 0 auto;
    padding-left: 40px;
    position: relative;
}
.errorGroup > ul {
    margin-top: 16px;
}

.errorMessage .detailText a {
    color: #D70146;
    text-decoration: underline;
}
.errorMessage .detailText a:hover {
    opacity: .7;
}

/* 各入力欄下のエラー表示 */
.__error .alertMessage {
    margin-top: 8px;
    font-size: 1.1rem;
    color: #E80000;
}
/* システムメッセージを非表示に */
body#errorPage #errors {
    display: none;
}



/*--------------------
    フォーム
---------------------*/
/* 通常テーブル */
.table {
    margin-top: 24px;
}
.table .tr {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    max-width: 828px;
    border: 1px solid #ddd;
    margin-top: -1px;
}
.table .th {
    flex: 0 2 116px;
    flex-basis: 200px;
    flex-shrink: 0;
    padding: 16px;
    border-right: 1px solid #ddd;
    background-color: #F3F3F3;
    font-weight: bold;
    font-size: 1.4rem;
}
@media (min-width: 768px) {
    .table .th {
        width: 200px;
        flex-basis: 200px;
        padding: 16px 24px;
    }
}
.table .th .required::after,
.table .th .required_condition::after {
    content: "必須";
    display: inline-block;
    margin-left: 8px;
    font-size: 1.2rem;
    color: white;
    background-color:#D70146;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 1px;
}
.table .birthdaySayNo .required::after,
.table .birthdaySayNo .required_condition::after {
    content: "";
    display: none;
}
.table .td {
    padding: 16px;
    flex-grow: 1;
    background-color: transparent !important;
}
.table .td .items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.table .td .items .suffixLabel {
    order: 3;
    width: 100%;
}
.table .td .items .__error {
    order: 2;
    width: 100%;
}
@media (min-width: 768px) {
    .table .td {
        padding: 16px 24px;
        font-size: 1.6rem;
        max-width:626px;
    }
}


/* input */
.table .td input {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1px solid #ddd;
    background-color: #fff;
    font-size: 1.6rem;
}
.table .td input.REQUIRED_INPUT {
    border: 1px solid #FFF0F0;
    background-color: #FFF0F0;
}
.table .td input:focus {
    outline: none;
    border-color: #D70146;
    background-color: #fff;
}
.table .td input.enterd {
    border-color: #ddd;
    background-color: #fff;
}
.table .td input[readonly=readonly] {
    background-color: #f0f0f0;
    border-color: #ddd;
}

/* select */
.table .td select,
.comboboxWrap select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 32px 0 16px;
    border: 1px solid #ddd;
    background-color: #fff;
    font-size: 1.6rem;
}
.table .td select.REQUIRED_COMBO {
    outline: none;
    border: 1px solid #D70146;
    background-color: #fff;
}
.table .birthdaySayNo.NG select {
    outline: none;
    border: 1px solid #D70146;
    background-color: #fff;
}
.table .td select.focus {
    outline: none;
    border: 1px solid #D70146;
    background-color: #fff;
}
.table .td select.enterd {
    border: 1px solid #ddd;
    background-color: #fff;
}
.table .td select[disabled=disabled] {
    background-color: #f0f0f0;
    opacity: 1;
    color: #000;
    border-color: #ddd;
}
/* Safari用に別途指定 */
_::-webkit-full-page-media, _:future, :root select {
    color: #333;
}


/* textarea */
.table .td textarea {
    display: block;
    width: 100%;
    height: auto;
    min-height: 190px;
    padding: 16px;
    margin-top: 10px;
    border: 1px solid #ddd;
    background-color: #fff;
}
.table .td textarea.REQUIRED_TEXT_AREA {
    border: 1px solid #FFF0F0;
    background-color: #FFF0F0;
}
.table .td textarea:focus {
    outline: none;
    border-color: #D70146;
    background-color: #fff;
}
.table .td textarea.enterd {
    border-color: #ddd;
    background-color: #fff;
}
.table .td textarea[readonly=readonly] {
    background-color: #f0f0f0;
    border-color: #ddd;
}


/* checkbox */
.topGroupName .checkboxWrap .items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.topGroupName .checkboxWrap .checkboxLabel,
.spanWrap .checkboxLabel {
    text-indent: -32px;
    margin-left: 32px;
}
.topGroupName .checkboxWrap .items .__error {
    width: 100%;
}
.topGroupName input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    width: 16px;
    height: 16px;
    padding: 0;
    margin-right: 16px;
    border: 2px solid #ccc;
    position: relative;
    vertical-align: middle;
    background-color: #fff;
    -webkit-transform: translateY(-0.1em);
    transform: translateY(-0.1em);
}
.topGroupName input[type="checkbox"]:checked::after {
    font-family: 'icons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    content: "\e912";
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    top: -2px;
    left: -2px;
    font-size: 16px;
    color: #D70146;
}
.topGroupName input[type="checkbox"].readonly:checked::after {
    color: #858585;
}
.topGroupName input[type="checkbox"]:focus {
    outline: none;
    border-color: #D70146;
}
@media (min-width: 768px) {
    .lineLessTable .checkboxWrap .checkboxLabel,
    .lineLessTable .spanWrap .checkboxLabel {
        position: relative;
        top: -7px;
    }
}

/* checkbox-toggle */
.toggle_input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0;
}

.checkboxLabel:has(.toggle_input[type="checkbox"] ) {
  width: 75px;
  height: 35px;
  background: #ccc;
  position: relative;
  display: inline-block;
  border-radius: 40px;
  transition: 0.4s;
  box-sizing: border-box;
  margin-left: auto;
}

.checkboxLabel:has(.toggle_input[type="checkbox"] ):after {
  content: "";
  position: absolute;
  width: 35px;
  height: 35px;
  border-radius: 100%;
  left: 40px;
  top: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: 0.4s;
}

.checkboxLabel:has(.toggle_input[type="checkbox"]:checked ) {
  background-color: #D70146;
}
.checkboxLabel:has(.toggle_input[type="checkbox"]:checked ):after {
  left: 0px;
}


/* radio */
.table .td.mailMagazineFlgTdSurround label,
.radioWrap label,
.singleradioWrap label,
.giftTypeLabelTdSurround label {
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    align-items: center;
    font-size: 1.6rem;
    line-height: 1.6;
    margin-bottom: 14px;
}
.table .td.mailMagazineFlgTdSurround label [type="radio"],
.radioWrap label [type="radio"],
.singleradioWrap label [type="radio"],
.giftTypeLabelTdSurround label [type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 3px 16px 0 0;
    padding: 0;
    border: 2px solid #ccc;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    background-color: #fff;
    -webkit-transform: translateY(-0.1em);
    transform: translateY(-0.1em);
}
.table .td.mailMagazineFlgTdSurround label.checked [type="radio"],
.radioWrap label.checked [type="radio"],
.singleradioWrap label.checked [type="radio"],
.giftTypeLabelTdSurround label checked [type="radio"] {
    outline: none;
}
.table .td.mailMagazineFlgTdSurround label.checked [type="radio"]::after,
.radioWrap label.checked [type="radio"]::after,
.singleradioWrap label.checked [type="radio"]::after,
.giftTypeLabelTdSurround label.checked [type="radio"]::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    position: absolute;
    top: -2px;
    left: -2px;
    background-color: #D70146;
}
.table .td.mailMagazineFlgTdSurround label.checked .readonly[type="radio"]::after,
.radioWrap label.checked .readonly[type="radio"]::after,
.singleradioWrap label.checked .readonly[type="radio"]::after,
.giftTypeLabelTdSurround label.checked .readonly[type="radio"]::after {
    background-color: #858585;
}
.lineLessTable .items.radiobuttonLabelWrap {
    flex-direction: column;
    align-items: flex-start;
}
@media (min-width: 768px) {
    .lineLessTable .items.radiobuttonLabelWrap {
        position: relative;
        top: 2px;
    }
}


/* 姓名 */
.table .td[class*=ameSeiTdSurround] .items {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.table .td[class*=ameSeiTdSurround] .items [class*=ameSei],
.table .td[class*=ameSeiTdSurround] .items [class*=ameMei] {
    flex: 0 0 auto;
    width: 48%;
}
form .table .td[class*=ameSeiTdSurround] .items [class*=ameSei],
form .table .td[class*=ameSeiTdSurround] .items [class*=ameMei] {
    flex: 1 0 auto;
}
form .table .td[class*=ameSeiTdSurround] .items span[class*=ameSei],
form .table .td[class*=ameSeiTdSurround] .items span[class*=ameMei] {
    flex-grow: 0;
}
.table .td[class*=ameSeiTdSurround] .items .__error {
    width: 100%;
}
@media (min-width: 768px) {
    .table .td[class*=ameSeiTdSurround] .items [class*=ameMei] {
        margin-left: 4%;
    }
    .table .td[class*=ameSeiTdSurround] .items [class*=__error_name],
    .table .td[class*=ameSeiTdSurround] .items [class*=__error_orderName] {
        margin-left: 0;
    }
}
@media (min-width: 768px) and (max-width: 768px) {
    .table .td[class*=ameSeiTdSurround] .items [class*=ameSei],
    .table .td[class*=ameSeiTdSurround] .items [class*=ameMei] {
        max-width: 225px;
    }
}

/* 姓名（カナ） */
.table .td[class*=ameSeiKanaTdSurround] .items {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.table .td[class*=ameSeiKanaTdSurround] .items [class*=ameSeiKana],
.table .td[class*=ameSeiKanaTdSurround] .items [class*=ameMeiKana] {
    flex: 0 0 auto;
    width: 48%;
}
form .table .td[class*=ameSeiKanaTdSurround] .items [class*=ameSeiKana],
form .table .td[class*=ameSeiKanaTdSurround] .items [class*=ameMeiKana] {
    flex: 1 0 auto;
}
form .table .td[class*=ameSeiKanaTdSurround] .items span[class*=ameSeiKana],
form .table .td[class*=ameSeiKanaTdSurround] .items span[class*=ameMeiKana] {
    flex-grow: 0;
}
.table .td[class*=ameSeiKanaTdSurround] .items .__error {
    width: 100%;
}
@media (min-width: 768px) {
    .table .td[class*=ameSeiKanaTdSurround] .items [class*=ameMeiKana] {
        margin-left: 4%;
    }
    .table .td[class*=ameSeiKanaTdSurround] .items [class*=__error_name],
    .table .td[class*=ameSeiKanaTdSurround] .items [class*=__error_orderName] {
        margin-left: 0;
    }
}
@media (min-width: 768px) and (max-width: 768px) {
    .table .td[class*=ameSeiKanaTdSurround] .items [class*=ameSeiKana],
    .table .td[class*=ameSeiKanaTdSurround] .items [class*=ameMeiKana] {
        max-width: 225px;
    }
}

/* 郵便番号 */
.table .td[class*=ostCode] .items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.table .td[class*=ostCode] .items input[class*=ostCode] {
    width: 14em;
    order: 1;
    margin-bottom: 10px;
    margin-right: 20px;
}
.table .td[class*=ostCode] .items [class*=__error_postCode] {
    width: 100%;
    order: 3;
}
.table .td[class*=ostCode] .items span[class*=ostCode] {
    width: calc(100% - 50px);
}
.table .td[class*=ostCode] .items span.preLabel {
    width: auto;
}
.table .td[class*=ostCode] .items [class*=ostCode][class*=SuffixLabel] {
    width: 100%;
    order: 4;
}
.table .td[class*=ostCode] .items [class*=ostCodeSearchButton] {
    order: 2;
    width: auto;
    height: 32px;
    border: 1px solid #D70146;
    color: #D70146;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s linear;
}
.table .td[class*=ostCode] .items [class*=ostCodeSearchButton]:hover {
    background-color: #D70146;
    color: #fff;
}
.table .td[class*=ostCode] .items [class*=ostCodeSearchButton]:disabled {
    background-color: #ccc;
    border: 1px solid #ccc;
    color: #fff;
}
.table .td[class*=ostCode] .items .japanpost {
    font-size: 14px;
    text-indent: -1.3em;
    margin-left: 1.3em;
    margin-top: 16px;
}
@media (min-width: 768px) {
    .table .td[class*=ostCode] .items [class*=ostCode] {
        width: 15em;
    }
}
@media (max-width: 767px) {
    .table .td[class*=ostCode] .items input[class*=ostCode] {
        order: 4;
        margin-bottom: 5px;
    }
    .table .td[class*=ostCode] .items [class*=ostCode][class*=SuffixLabel] {
        margin-bottom: 5px;
    }
}


/* 生年月日 */
.table .td.birthdayYearTdSurround .items > .underArrowWrap {
    margin-right: 3.65854%;
    margin-bottom: 10px;
}
.table .td.birthdayYearTdSurround .items > .underArrowWrap:last-of-type {
    margin-right: 0;
}

/* 電話番号 */
.table .td.telNoTdSurround .items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.table .td.telNoTdSurround .items .telNoPre,
.table .td.telNoTdSurround .items .telNoMiddle,
.table .td.telNoTdSurround .items .telNoPost {
    flex: 1 0 auto;
    width: 20%;
}
.table .td.telNoTdSurround .items .telSeparateLabel {
    margin: 0 10px;
    padding-top: 0;
}
.table .td.telNoTdSurround .items .telNoPostSuffixLabel {
    width: 100%;
}

.table .td.telNo1TdSurround .items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.table .td.telNo1TdSurround .items .telNo1Pre,
.table .td.telNo1TdSurround .items .telNo1Middle,
.table .td.telNo1TdSurround .items .telNo1Post {
    flex: 1 0 auto;
    width: 20%;
}
.table .td.telNo1TdSurround .items .telSeparateLabel {
    margin: 0 10px;
}
.table .td.telNo1TdSurround .items .telNo1PostSuffixLabel {
    width: 100%;
}

.table .td.mobileNo1TdSurround .items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.table .td.mobileNo1TdSurround .items .mobileNo1Pre,
.table .td.mobileNo1TdSurround .items .mobileNo1Middle,
.table .td.mobileNo1TdSurround .items .mobileNo1Post {
    flex: 1 0 auto;
    width: 20%;
}
.table .td.mobileNo1TdSurround .items .telSeparateLabel {
    margin: 0 10px;
}
.table .td.mobileNo1TdSurround .items .mobileNo1PostSuffixLabel {
    width: 100%;
}

.table .td.orderTelNoTdSurround .items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.table .td.orderTelNoTdSurround .items .orderTelNoPre,
.table .td.orderTelNoTdSurround .items .orderTelNoMiddle,
.table .td.orderTelNoTdSurround .items .orderTelNoPost {
    flex: 1 0 auto;
    width: 20%;
}
.table .td.orderTelNoTdSurround .items .telSeparateLabel {
    margin: 0 10px;
}
.table .td.orderTelNoTdSurround .items .orderTelNoPostSuffixLabel {
    width: 100%;
}

/* お届け先情報 */
.table .td.destinationAlterFlgTdSurround label + .colorRed {
    font-size: 12px;
    margin: -10px 0 20px 30px;
}

/* 肌質・肌の悩み、髪の悩み、その他の悩み */
.skinType_selections_itemLabel,
.skinTrouble_selections_itemLabel,
.hairType_selections_itemLabel,
.hairTrouble_selections_itemLabel,
.otherTrouble_selections_itemLabel {
    margin: 0 40px 10px 0;
}
.skinType_selections_itemLabel:last-of-type ,
.skinTrouble_selections_itemLabel:last-of-type,
.hairType_selections_itemLabel:last-of-type,
.hairTrouble_selections_itemLabel:last-of-type,
.otherTrouble_selections_itemLabel:last-of-type {
    margin: 0 0 10px 0;
}

/* 個人情報のお取り扱いについて */
.privacyPolicyGroup {
    margin-top: 52px;
    max-width: 828px;
}
.privacyPolicyGroup .privacyPolicyTitle {
    font-weight: bold;
    font-size: 1.6rem;
}
.privacyPolicyGroup .privacyPolicyPartsIncludeItemWrap {
    margin-top: 24px;
}

/* 同意チェック */
.isMemberAgreementFlgItemWrap {
    margin-top: 16px;
    max-width: 828px;
    padding: 16px;
    background-color: #FFF0F0;
    transition: background-color 0.2s linear;
}
.isMemberAgreementFlgItemWrap.checked {
    background-color: #fff;
}

/* クレジットカード */
.table .td .enableMonth {
    width: 5em;
}
.table .td .enableYear {
    width: 6em;
}
.table .td .securityCode,
.table .td .securityCodeForMember {
    width: 5em;
}
.table .td.registeredCardTdSurround .items {
    width: 15em;
}
.table .td .OrderInfoInputSecurityCode  {
    margin-top: -50px;
}
@media (min-width: 768px) {
    .table .td .OrderInfoInputSecurityCode  {
        margin-left: 180px;
        margin-top: -20px;
    }
}



/* jsで付与したdivに対しての指定 */
.table .td .items .underArrowWrap + .suffixLabel {
    order: 0;
    width: 0;
    position: relative;
    margin: 0 20px;
}
.table .underArrowWrap,
.comboboxWrap .underArrowWrap {
    position: relative;
}
.table .underArrowWrap::after,
.comboboxWrap .underArrowWrap::after {
    font-family: 'icons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    content: "\e901";
    display: block;
    width: 14px;
    height: 12px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    left: auto;
    font-size: 14px;
    color: #666;
    pointer-events: none;
}

/* 配送希望日時と包装のし指定 */
.table .td.appointedDeliveryDateTdSurround .items .underArrowWrap,
.table .td.appointedDeliveryTimeCodeTdSurround .items .underArrowWrap {
    width: fit-content;
    max-width: 100%;
}
.table .td.wrappingCodeTdSurround .items {
    width: auto;
}
@media (min-width: 768px) {
    .table .td.wrappingCodeTdSurround .items {
        width: 30em;
    }
}

/* ポイント */
#currentPointSuffixLabel {
    width: auto;
    padding-left: 1em;
}
#usePoint {
    width: auto;
}

/* 注記 */
.table .td .suffixLabel {
    display: block;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #666;
    text-indent: -1.3em;
    margin-left: 1.3em;
}


/* 枠無しテーブル */
.table.lineLessTable {
    margin-top: 40px;
}
.table.lineLessTable .th {
    font-size: 16px;
}
@media (min-width: 768px) {
    .table.lineLessTable .th {
        width: 210px;
        flex: 0 0 210px;
        padding: 16px;
    }
}
.table.lineLessTable .tr {
    border: none;
    align-items: baseline;
}
@media (min-width: 768px) {
    .table.lineLessTable .tr {
        margin-top: 32px;
    }
/*
    .table.lineLessTable .tr:nth-of-type(1) {
        margin-top: 0;
    }
*/
}
@media (max-width: 767px) {
    .table.lineLessTable .tr {
        display: block;
        margin-top: 24px;
    }
}
.table.lineLessTable .th {
    border: none;
    background-color: transparent;
    padding-left: 0;
    padding-bottom: 0;
}
@media (max-width: 767px) {
    .table.lineLessTable .th {
        padding: 0;
    }
}
.table.lineLessTable .td {
    padding: 0;
}
@media (max-width: 767px) {
    .table.lineLessTable .td {
        margin-top: 8px;
        padding: 16px 0;
    }
}
.table.lineLessTable .th .readonly {
    background-color: transparent;
}

/* 枠無しテーブル、姓名 */
@media (max-width: 767px) {
    .table.lineLessTable .td[class*=ameSeiTdSurround] .items {
        display: block;
    }
    .table.lineLessTable .td[class*=ameSeiTdSurround] .items [class*=ameSei],
    .table.lineLessTable .td[class*=ameSeiTdSurround] .items [class*=ameMei] {
        width: 100%;
    }
    .table.lineLessTable .td[class*=ameSeiTdSurround] .items [class*=ameMei] {
        margin-top: 16px;
    }
    .table.lineLessTable .td[class*=ameSeiTdSurround] .items [class*=ameSei].__error,
    .table.lineLessTable .td[class*=ameSeiTdSurround] .items [class*=ameMei].__error {
        display: block;
        margin-top: 0
    }
}
/* 枠無しテーブル、姓名（カナ） */
@media (max-width: 767px) {
    .table.lineLessTable .td[class*=ameSeiKanaTdSurround] .items {
        display: block;
    }
    .table.lineLessTable .td[class*=ameSeiKanaTdSurround] .items [class*=ameSeiKana],
    .table.lineLessTable .td[class*=ameSeiKanaTdSurround] .items [class*=ameMeiKana] {
        width: 100%;
    }
    .table.lineLessTable .td[class*=ameSeiKanaTdSurround] .items [class*=ameMeiKana] {
        margin-top: 16px;
    }
    .table.lineLessTable .td[class*=ameSeiKanaTdSurround] .items [class*=ameSeiKana].__error,
    .table.lineLessTable .td[class*=ameSeiKanaTdSurround] .items [class*=ameMeiKana].__error {
        display: block;
        margin-top: 0
    }
}

/* 枠無しテーブル、お問い合わせ内容 */
.table.lineLessTable .tr.inqContItemWrap {
    display: flex;
}
form .table.lineLessTable .tr.inqContItemWrap {
    flex-wrap: wrap;
}
form .table.lineLessTable .td.inqContTdSurround {
    width: 100%;
    margin-top: 30px;
}
@media (max-width: 767px) {
    .table.lineLessTable .tr.inqContItemWrap {
        display: block;
    }
}


/* 枠付きテーブル */
.lineTable {
    max-width: 828px;
    margin-top: 24px;
}
.lineTable tr {
    border: 1px solid #ddd;
    margin-top: -1px;
}
.lineTable th {
    padding: 16px;
    border-right: 1px solid #ddd;
    background-color: #F3F3F3;
    font-weight: bold;
    font-size: 1.4rem;
}
@media (min-width: 768px) {
    .lineTable th {
        width: 200px;
        flex-basis: 200px;
        padding: 16px 24px;
    }
}
.lineTable td {
    padding: 16px;
    border-right: 1px solid #ddd;
}




/*---------------------------------------------
    3-3:table-paging
  ---------------------------------------------*/
  span.PRE_SURROUND_MAX_SELECT:before {
    content: "[";
}

span.MAX_SHOW_LINE_NUMBER:after {
    content: "件";
}

span.SEPARATOR_MAX_SELECT:before {
    content: "|";
}

span.POST_SURROUND_MAX_SELECT:before {
    content: "]";
}

span.dataNumber:before {
    content: "全";
   padding-right: 4px;
}

span.dataNumber:after {
    content: "件のうち、";
    padding-left: 4px;
}

span.startNumber:after {
    content: "-";
   padding: 0px 4px;
}

span.endNumber:after {
    content: "件目を表示中";
   padding-left: 4px;
}

.pagingSetting {
    display: table;
    width: 100%;
    margin: 10px auto;
}
.pagingSetting .view_ctrl_sort,
.pagingSetting .resultsShowPaging {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
}

table.data-table,
tr.PAGING_DETAILS_ROW,
tr.PAGING_DETAILS_ROW td {
    border: 0;
}


/*--------------------
    パンくず
---------------------*/
@media (min-width: 768px) {
    .l-breadcrumb {
        width: 100%;
    }
}
.l-breadcrumb {
    width: calc(100% - 10px);
    padding-left: 10px;
}


/*--------------------
    ページ内遷移の位置調整
---------------------*/
:target {
    scroll-margin-top: 80px;
}


/*---------------------------------------------
	ご注文ランキング
  ---------------------------------------------*/
.c-ranking .rankingExp {
    margin-top: 16px;
}
/*@media (min-width: 768px) {
    .c-ranking .rankingExp {
        margin-top: 50px;
    }
}*/


/*--------------------
    ログイン
---------------------*/
.s-login__member__form {
    margin-top: 24px;
}

.s-login__member__form input {
    margin-top: 8px;
    font-size: 1.4rem;
    color: #000;
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 16px;
    background-color: #fff;
    font-size: 1.4rem;
    line-height: 1.6;
}

.s-login__member__form .passwordItemWrap {
    margin-top: 16px;
}

.loginButtonGroup > div {
    margin-top: 40px;
}
.loginButtonGroup > .includeExp3ItemWrap {
    margin-top: -24px;
}

.s-login__button {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.s-login__new {
    margin-top: 48px;
}

.s-login__line {
    background-color: #F3F3F3;
    padding: 20px;
}

.s-login__lineTitle {
    color: #00B900;
    margin-bottom: 7px;
    font-size: 1.4em;
    text-align: center;
}

.c-button--conv .s-login__line__inner {
    background-color: #00B900;
    border-color: #00B900;
    font-weight: bold;
    color: #fff;
}

.s-login__linedesc {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.s-login__linedesc > p {
    flex-grow: 1;
    font-size: 1.2rem;
}

.c-button--conv .s-login__regist__inner {
    background-color: #BBAB76;
    border-color: #BBAB76;
    font-weight: bold;
    color: #fff;
}


@media (min-width: 768px) {
    .s-login {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
    }
    .s-login__member {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 50%;
        margin-right: 64px;
        padding: 40px;
        border: 3px solid #ddd;
    }
    .s-login__new {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: calc(50% - 64px);
        margin-top: 0;
    }
    .c-button--conv .s-login__line__inner:hover {
        background-color: #00DD00;
        border-color: #00DD00;
    }
    .c-button--conv .s-login__regist__inner:hover {
        background-color: #D4D04C;
        border-color: #D4D04C;
    }
}

.s-login-memberbenefit {
    margin-top: 48px;
    background-color: #F3F3F3;
}

.s-login-memberbenefit__inner {
    padding-top: 40px;
    padding-bottom: 40px;
}

.s-login-memberbenefit__list > li + li {
    margin-top: 24px;
}

@media (min-width: 768px) {
    .s-login-memberbenefit {
        margin-top: 80px;
    }
    .s-login-memberbenefit__inner {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .s-login-memberbenefit__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
    }
    .s-login-memberbenefit__list > li {
        width: 46%;
        flex: 0 0 46%;
    }
    .s-login-memberbenefit__list > li + li {
        margin-top: 0;
    }
    .s-login-memberbenefit__list > li:nth-child(n+3) {
        margin-top: 40px;
    }
}


/*--------------------
    ソーシャルボタン
---------------------*/
/* 注文完了 LINEボタン */
body[id$=OrderInfoComplete] #includeLineUnconnectedItemWrap {
    max-width: 335px;
    margin: 0 auto 15px;
}
body[id$=OrderInfoComplete] .s-line-button__inner {
	background-color: #00B900;
	border-color: #00B900;
	font-weight: bold;
	color: #fff;
}

body[id$=OrderInfoComplete] .s-line-button__inner > span {
	padding-top: 0;
	padding-bottom: 0;
}

body[id$=OrderInfoComplete] .s-line-button__line {
	display: inline-block;
	width: 48px;
	margin-right: 8px;
	vertical-align: middle;
}

body[id$=OrderInfoComplete] .completebtn {
	margin-top: 16px !important;
}

@media (min-width: 768px) {
	body[id$=OrderInfoComplete] .s-line-button__inner {
		opacity: 1;
		transition: opacity 0.2s linear;
	}
	body[id$=OrderInfoComplete] .s-line-button__inner:hover {
		background-color: #00B900;
		border-color: #00B900;
	}
	body[id$=OrderInfoComplete] .s-line-button__inner:hover {
		opacity: 0.8;
	}
}









/*--------------------
    エラー系ページ
---------------------*/
.error .errorMessage .mainText {
    font-size: 2.8rem;
    line-height: 1.6;
    margin-bottom: 64px;
}
@media (min-width: 768px) {
    .error .errorMessage .mainText {
        font-size: 3.6rem;
    }
}

.error .errorMessage .causeList,
#messageGroup .alertMsg {
    margin-top: 20px;
}
.error .errorMessage .causeList > li,
#messageGroup .alertMsg .systemMessageContent {
    list-style: disc inside;
    padding-left: 1.4em;
    text-indent: -1.4em;
}

.error .errorMessage .detailText {
    margin-top: 20px;
}
#messageGroup .alertMsg .systemMessageContent {
    color: #FF0052;
}
/* ボタン */
.error .errorMessage .linkText {
    margin: 80px auto 0;
}
@media (min-width: 768px) {
    .error .errorMessage .linkText {
        margin: 112px auto 0;
    }
}

/* 戻るボタン */
.error .errorMessage .linkText a {
    max-width: 200px;
    margin: 24px auto 0;
}
.error .errorMessage .linkText a {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    border: 1px solid #D70146;
    background-color: #fff;
    color: #D70146;
    cursor: pointer;
    transition: .2s;
}
.error .errorMessage .linkText a:hover {
    color: #fff;
    background-color: #D70146;
}

/* システムメッセージ */
.systemMessageContent {
    text-align: center;
}





/*--------------------
    マイページ
---------------------*/
/** 定期系 */
.updateList .matrix-body,
.noUpdateList .matrix-body {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.updateListRow,
.noUpdateListRow {
    width: calc(20% - 10px);
    margin: 10px 5px;
}
.updateListRow:nth-of-type(5n + 1),
.noUpdateListRow:nth-of-type(5n + 1) {
    margin-left: 0;
}
.updateListRow:nth-of-type(5n),
.noUpdateListRow:nth-of-type(5n) {
    margin-right: 0;
}
.updateListRow > div,
.noUpdateListRow > div {
    display: flex;
    font-size: 12px;
}
.updateListRow > .updateListGoodsNameItemWrap,
.noUpdateListRow > .noUpdateListGoodsNameItemWrap  {
    font-size: 14px;
    margin: 5px 0;
}
.updateListRow > div label,
.noUpdateListRow > div label {
    padding-right: 5px;
}
@media (max-width: 640px) {
    .updateList .matrix-body,
    .noUpdateList .matrix-body {
        justify-content: flex-start;
    }
    .updateListRow,
    .noUpdateListRow {
        width: calc(50% - 10px);
    }
    .updateListRow:nth-of-type(2n + 1),
    .noUpdateListRow:nth-of-type(2n + 1) {
        margin-left: 0;
    }
    .updateListRow:nth-of-type(2n),
    .noUpdateListRow:nth-of-type(2n) {
        margin-right: 0;
    }
    .updateListRow > div,
    .noUpdateListRow > div {
        font-size: 10px;
    }
    .updateListRow > .updateListGoodsNameItemWrap,
    .noUpdateListRow > .noUpdateListGoodsNameItemWrap  {
        font-size: 12px;
    }
}

/* 注文お届け日変更画面の確認メッセージ */
.reglNotExistExpItemWrap + .reglScheduleAttentionItemWrap {
    display: none;
}
.reglScheduleAttention {
    border: 1px solid #D70146;
    display: block;
    max-width: 800px;
    padding: 20px;
    margin: 0 auto 20px;
}

.reglScheduleAttention .mainText {
    font-weight: bold;
    color: #D70146;
    margin-bottom: 10px;
}


/* --------------------
MemberIntroduce.jsp
---------------------*/

/* button override */
.c-button-container--invite .c-button-container__item {
	max-width: 312px;
}
.c-button-container--invite .c-button-container__item .c-button--invite .c-button__inner {
	background-color: #E95389;
	border: none;
	color: #fff;
	font-weight: bold;
}
.c-button-container--invite .c-button-container__item .c-button--invite .c-text-l {
	margin-top: 16px;
}

@media (min-width: 768px) {
	.c-button-container--invite .c-button-container__item {
		max-width: 484px;
	}
	.c-button-container--invite .c-button__inner > span {
		font-size: 1.6rem;
		padding: 16px 35px;
	}
}

/* kv */
.s-invite-kv {
    background: none;
    padding: 0;
    margin: 0 -5vw;
}
@media (min-width: 768px) {
	.s-invite-kv {
		max-width: 1000px;
		margin: 0 auto
	}
}

/* h2 */
.s-invite-heading-seco {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.s-invite-heading-seco::before,
.s-invite-heading-seco::after {
	display: block;
	content: '';
	width: 50px;
	height: 3px;
	background-color: #D70146;
}
.s-invite-heading-seco h2 {
	padding: 0 20px;
}

/* present */
.s-invite-present--02 {
    display: flex;
    margin-top: 106px;
    justify-content: center;
    flex-direction: column;
    gap: 85px;
}
.s-invite-present__item {
	position: relative;
	border: 3px solid;
	border-radius: 5px;
	margin: 80px 0 0;
}
.s-invite-present__item--02 {
    position: relative;
    display: flex;
}
.s-invite-present__item--friend {
	border-color: #E95389;
}
.s-invite-present__item--you {
	border-color: #D70146;
}
.s-invite-present__item--friend {
	background: -moz-linear-gradient(180deg, #E95389 0%, #E95389 80px, #fff 81px);
	background: -webkit-linear-gradient(180deg, #E95389 0%, #E95389 80px, #fff 81px);
	background: linear-gradient(180deg, #E95389 0%, #E95389 80px, #fff 81px);
}
.s-invite-present__item--you {
	background: -moz-linear-gradient(180deg, #D70146 0%, #D70146 80px, #fff 81px);
	background: -webkit-linear-gradient(180deg, #D70146 0%, #D70146 80px, #fff 81px);
	background: linear-gradient(180deg, #D70146 0%, #D70146 80px, #fff 81px);
}
.s-invite-present__head {
	position: relative;
	margin-top: -50px;
	color: #fff;
	text-align: center;
}
.s-invite-present__head img {
	display: inline-block;
	width: auto;
	height: 100px;
}
.s-invite-present__head span {
	display: block;
	font-weight: bold;
}
.s-invite-present__head--02 {
    position: absolute;
    top: -66px;
    left: 50%;
    margin-left: -154px;
    z-index: 1;
}
.s-invite-present__head--02 > img {
    width: 308px;
}
.s-invite-present__body {
	padding: 10px 0 20px;
}
.s-invite-present__body--02 {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 38px 18px;
    border-radius: 15px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
}
.s-invite-present__body--02::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    border: 2px solid #000;
    border-radius: 5px;
    z-index: -1;
}
.s-invite-present__item--02--you .s-invite-present__body--02::after {
    border-color: #D70146;
}
.s-invite-present__item--02--friend .s-invite-present__body--02::after {
    border-color: #E95389;
}
.s-invite-present__image {
	padding: 0 10px;
}
.s-invite-present__detail {
	margin: 0 20px;
	padding-top: 20px;
	border-top: 1px solid;
	font-size: 1.2rem;
}
.s-invite-present__detail--02 {
    width: calc(100% - 20px);
    height: 100%;
    margin: 15px auto 0;
    padding: 24px 18px;
    background-color: #FFFDDD;
}
.s-invite-present__text {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    color: #D70146;
}
.s-invite-present__list {
    margin-top: 8px;
}
.s-invite-present__list > li {
    font-size: 12px;
    line-height: 1.6;
    padding-left: 1em;
    text-indent: -1em;
}
.s-invite-present__list > li::before {
    content: "・";
    color: rgb(215, 1, 70);
}
.s-invite-present__list > li + li {
    margin-top: 6px;
}
.s-invite-present__item--friend .s-invite-present__detail {
	border-color: #E95389;
}
.s-invite-present__item--you .s-invite-present__detail {
	border-color: #D70146;
}
@media (min-width: 768px) {
	.s-invite-present {
		display: flex;
		justify-content: center;
	}
	.s-invite-present--02 {
		display: flex;
        margin-top: 145px;
		justify-content: center;
        flex-direction: row;
        gap: 40px;
	}
	.s-invite-present__item {
		width: 100%;
		max-width: 484px;
		margin: 80px 0 0;
		padding: 0 40px;
		border-radius: 10px;
	}
	.s-invite-present__item + .s-invite-present__item {
		margin-left: 32px;
	}
	.s-invite-present__item--02 {
        position: relative;
        display: flex;
	}
    .s-invite-present__head--02 {
        position: absolute;
        top: -97px;
        left: 50%;
        margin-left: -220px;
        z-index: 1;
    }
    .s-invite-present__head--02 > img {
        width: 440px;
    }
	.s-invite-present__body {
		padding: 20px 0 40px;
	}
    .s-invite-present__body--02 {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 50px 40px;
        border-radius: 20px;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
    }
    .s-invite-present__body--02::after {
        content: "";
        position: absolute;
        left: 10px;
        top: 10px;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        border: 4px solid #000;
        border-radius: 10px;
        z-index: -1;
    }
    .s-invite-present__item--02--you .s-invite-present__body--02::after {
        border-color: #D70146;
    }
    .s-invite-present__item--02--friend .s-invite-present__body--02::after {
        border-color: #E95389;
    }
	.s-invite-present__image {
		padding: 0;
	}
	.s-invite-present__detail {
		margin: 0;
		font-size: 1.4rem;
	}
    .s-invite-present__detail--02 {
        width: 100%;
        height: 100%;
        margin-top: 30px;
        padding: 20px 30px;
        background-color: #FFFDDD;
    }
    .s-invite-present__text {
        font-size: 14px;
        font-weight: 700;
        line-height: 1.6;
        color: #D70146;
    }
    .s-invite-present__list {
        margin-top: 8px;
    }
    .s-invite-present__list > li {
        font-size: 14px;
        line-height: 1.6;
        padding-left: 1em;
        text-indent: -1em;
    }
    .s-invite-present__list > li::before {
        content: "・";
        color: rgb(215, 1, 70);
    }
    .s-invite-present__list > li + li {
        margin-top: 8px;
    }
}

/* flow */
.s-invite-flow__item {
	position: relative;
	display: flex;
	align-items: center;
	padding: 26px 18px;
	background: #F3F3F3;
}
.s-invite-flow__item + .s-invite-flow__item {
	margin-top: 3px;
}
.s-invite-flow__item__you {
	background: #ffeeee;
}
.s-invite-flow__item__friend {
	background: #ffedf7;
}
.s-invite-flow__label {
	position: relative;
	margin: -6px auto 0;
	padding: 0 10px;
	width: 70px;
	border-radius: 20px;
	color: #fff;
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 28px;
	text-align: center;
}
.s-invite-flow__item__you .s-invite-flow__label {
	background: #D70146;
}
.s-invite-flow__item__friend .s-invite-flow__label {
	background: #E95389;
}
.s-invite-flow__icon {
	position: relative;
	flex: 0 0 90px;
	width: 90px;
}
.s-invite-flow__body {
	padding-left: 20px;
	font-size: 13px;
	line-height: 1.6;
}

@media (min-width: 768px) {
	.s-invite-flow {
		display: flex;
		justify-content: center;
	}
	.s-invite-flow__item {
		padding: 40px;
		max-width: 498px;
		width: 100%;
	}
	.s-invite-flow__item + .s-invite-flow__item {
		margin-top: 0;
		margin-left: 4px;
	}
	.s-invite-flow__label {
		width: 90px;
		font-size: 15px;
	}
	.s-invite-flow__body {
		font-size: 16px;
	}
}

/* note */
.s-invite-note .icon-caution {
	margin-right: 10px;
	vertical-align: -2px;
}

/* PC・SP表示切替用　220812 */
@media (min-width: 768px) {
    .sp-only{
        display: none;
    }
}
@media (max-width: 767px) {
    .pc-only{
        display: none;
    }
}

/* memberIntroduceBox */
.memberIntroduceBox {
	width: auto;
	margin: 64px -5% 0;
}
.memberIntroduceBox > .memberIntroduceBoxInner {
	padding: 64px 5%;
	background-color: rgba(215,1,70,0.05);
}
.memberIntroduceBox .memberIntroduceColWrap {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	gap: 30px;
}
.memberIntroduceBox .memberIntroduceColWrap > .memberIntroduceCol {
	width: 100%;
}
.memberIntroduceBox .memberIntroduceBoxBtn {
}
.memberIntroduceBox .memberIntroduceBoxBtn > a {
	position: relative;
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	font-size: 16px;
	min-height: 64px;
	font-weight: bold;
	color: #fff;
	cursor: pointer;
	transition: opacity 0.2s linear, color 0.2s linear;
}
.memberIntroduceBox .memberIntroduceBoxBtn > a:hover {
	opacity: 0.8;
}
.memberIntroduceBox .memberIntroduceBoxBtn.memberIntroduceBoxBtn--line > a {
	background-color: #06c755;
}
.memberIntroduceBox .memberIntroduceBoxBtn.memberIntroduceBoxBtn--mail > a {
	background-color: #F96F9C;
}
.memberIntroduceBox .memberIntroduceBoxBtnLead {
	margin-top: 18px;
	text-align: center;
}
.memberIntroduceBox .memberIntroduceBoxBtnLead > a {
	font-size: 14px;
	text-decoration: underline;
}
.memberIntroduceBox .memberIntroduceBoxBtnLead > a:hover {
	text-decoration: none;
}
.memberIntroduceBox .memberIntroduceBoxLead {
	margin-top: 30px;
	text-align: left;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
}
.memberIntroduceBox .memberIntroduceBoxCopy {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-top: 10px;
	padding: 20px 18px 20px;
	gap: 14px;
	border-radius: 10px;
	background-color: #fff;
	border: 1px solid #DDD;
}
.memberIntroduceBox .memberIntroduceBoxCopy .memberIntroduceBoxCopyArea {
	width: 100%;
	font-size: 14px;
	line-height: 1.6;
	overflow-wrap: break-word;
}
.memberIntroduceBox .memberIntroduceBoxCopy .memberIntroduceBoxCopyBtn {
	position: relative;
	width: 100%;
}
.memberIntroduceBox .memberIntroduceBoxCopy .memberIntroduceBoxCopyBtn .memberIntroduceBoxCopyBtnBalloon {
	position: absolute;
	top: -35px;
	left: 50%;
	display: inline-block;
	padding: 7px 10px;
	min-width: 100px;
	margin-left: -50px;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	background: #D70146;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
	transition: opacity 0.2s linear, top 0.2s linear;
	opacity: 0;
}
.memberIntroduceBox .memberIntroduceBoxCopy .memberIntroduceBoxCopyBtn.is-active .memberIntroduceBoxCopyBtnBalloon {
	top: -40px;
	opacity: 1;
}
.memberIntroduceBox .memberIntroduceBoxCopy .memberIntroduceBoxCopyBtn .memberIntroduceBoxCopyBtnBalloon:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border: 5px solid transparent;
	border-top: 5px solid #D70146;
}
.memberIntroduceBox .memberIntroduceBoxCopy .memberIntroduceBoxCopyBtn > button {
	width: 100%;
	padding: 15px;
	color: #fff;
	background-color: #D70146;
	appearance: none;
	border: none;
	outline: none;
	cursor: pointer;
	transition: opacity 0.2s linear, color 0.2s linear;
}
.memberIntroduceBox .memberIntroduceBoxCopy .memberIntroduceBoxCopyBtn > button:hover {
	opacity: 0.8;
}
.memberIntroduceBox .memberIntroduceBoxTel {
	margin-top: 48px;
}
.memberIntroduceBox .memberIntroduceBoxTel > .memberIntroduceBoxTelInner {
	padding: 38px 17px;
	background-color: #fff;
	border-radius: 10px;
	border: 2px solid #D70146;
}
.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelTitle {
	text-align: center;
}
.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelTitle img {
	width: 225px;
}
.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelLead {
	margin-top: 24px;
	text-align: center;
	font-size: 14px;
	line-height: 1.6;
	font-weight: 700;
}
.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelLead > em {
	color: #E95389;
}
.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelImg {
	margin-top: 23px;
	text-align: center;
}
.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelImg .memberIntroduceBoxTelImgSet {
}
.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelImg .memberIntroduceBoxTelImgSet img {
	width: 100%;
}
.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelImg .memberIntroduceBoxTelImgText {
	margin-top: 10px;
	font-size: 12px;
	text-align: left;
}
.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelDetail {
	margin-top: 32px;
	padding: 25px 20px 32px;
	border-radius: 10px;
	background-color: #FDF2F6;
	text-align: center;
}
.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelDetail .memberIntroduceBoxTelDetailLead {
	font-weight: 700;
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
}
.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelDetail .memberIntroduceBoxTelDetailInfo {
	display: flex;
	margin-top: 16px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 10px;
}
.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelDetail .memberIntroduceBoxTelDetailInfo .memberIntroduceBoxTelDetailInfoTtl {
	font-weight: 700;
	font-size: 14px;
	line-height: 1.6;
	color: #D70146;
}
.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelDetail .memberIntroduceBoxTelDetailInfo .memberIntroduceBoxTelDetailInfoList {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
}
.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelDetail .memberIntroduceBoxTelDetailInfo .memberIntroduceBoxTelDetailInfoList > li {
	position: relative;
	padding-left: 24px;
	font-size: 14px;
	line-height: 1.6;
}
.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelDetail .memberIntroduceBoxTelDetailInfo .memberIntroduceBoxTelDetailInfoList > li > span {
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	font-size: 12px;
	border-radius: 50%;
	color: #fff;
	background-color: #D70146;;
}

@media (min-width: 768px) {
	.memberIntroduceBox {
		margin: 80px 0 0;
	}
	.memberIntroduceBox > .memberIntroduceBoxInner {
		padding: 80px;
		background-color: rgba(215,1,70,0.05);
	}
	.memberIntroduceBox .memberIntroduceColWrap {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		flex-direction: row;
		gap: 40px;
	}
	.memberIntroduceBox .memberIntroduceColWrap > .memberIntroduceCol {
		width: 100%;
	}
	.memberIntroduceBox .memberIntroduceBoxBtn {
	}
	.memberIntroduceBox .memberIntroduceBoxBtn > a {
		position: relative;
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		min-height: 64px;
		font-weight: bold;
		color: #fff;
		cursor: pointer;
		transition: opacity 0.2s linear, color 0.2s linear;
	}
	.memberIntroduceBox .memberIntroduceBoxBtn > a:hover {
		opacity: 0.8;
	}
	.memberIntroduceBox .memberIntroduceBoxBtn.memberIntroduceBoxBtn--line > a {
		background-color: #06c755;
	}
	.memberIntroduceBox .memberIntroduceBoxBtn.memberIntroduceBoxBtn--mail > a {
		background-color: #F96F9C;
	}
	.memberIntroduceBox .memberIntroduceBoxBtnLead {
		margin-top: 15px;
		text-align: center;
	}
	.memberIntroduceBox .memberIntroduceBoxBtnLead > a {
		font-size: 14px;
		text-decoration: underline;
	}
	.memberIntroduceBox .memberIntroduceBoxBtnLead > a:hover {
		text-decoration: none;
	}
	.memberIntroduceBox .memberIntroduceBoxLead {
		margin-top: 50px;
		text-align: center;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.6;
	}
	.memberIntroduceBox .memberIntroduceBoxCopy {
		display: flex;
		align-items: center;
		flex-direction: row;
		margin-top: 16px;
		padding: 24px 30px 20px;
		gap: 40px;
		border-radius: 10px;
		background-color: #fff;
		border: 1px solid #DDD;
	}
	.memberIntroduceBox .memberIntroduceBoxCopy .memberIntroduceBoxCopyArea {
		width: calc(100% - 130px);
		font-size: 14px;
		line-height: 1.6;
		overflow-wrap: break-word;
	}
	.memberIntroduceBox .memberIntroduceBoxCopy .memberIntroduceBoxCopyBtn {
		width: 90px;
	}
	.memberIntroduceBox .memberIntroduceBoxCopy .memberIntroduceBoxCopyBtn > button {
		width: 100%;
		padding: 15px;
		color: #fff;
		background-color: #D70146;
		appearance: none;
		border: none;
		outline: none;
		cursor: pointer;
		transition: opacity 0.2s linear, color 0.2s linear;
	}
	.memberIntroduceBox .memberIntroduceBoxCopy .memberIntroduceBoxCopyBtn > button:hover {
		opacity: 0.8;
	}
	.memberIntroduceBox .memberIntroduceBoxTel {
		margin-top: 82px;
	}
	.memberIntroduceBox .memberIntroduceBoxTel > .memberIntroduceBoxTelInner {
		padding: 48px 60px;
		background-color: #fff;
		border-radius: 10px;
		border: 2px solid #D70146;
	}
	.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelTitle {
		text-align: center;
	}
	.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelTitle img {
		width: 385px;
	}
	.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelLead {
		margin-top: 32px;
		text-align: center;
		font-size: 16px;
		line-height: 1.6;
		font-weight: 700;
	}
	.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelLead > em {
		color: #E95389;
	}
	.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelImg {
		margin-top: 31px;
		text-align: center;
	}
	.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelImg .memberIntroduceBoxTelImgSet {
	}
	.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelImg .memberIntroduceBoxTelImgSet img {
		width: 400px;
	}
	.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelImg .memberIntroduceBoxTelImgText {
		margin-top: 16px;
		font-size: 14px;
		text-align: center;
	}
	.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelDetail {
		margin-top: 40px;
		padding: 33px 20px;
		border-radius: 10px;
		background-color: #FDF2F6;
		text-align: center;
	}
	.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelDetail .memberIntroduceBoxTelDetailLead {
		font-weight: 700;
		font-size: 16px;
		line-height: 1.6;
		text-align: center;
	}
	.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelDetail .memberIntroduceBoxTelDetailInfo {
		display: flex;
		margin-top: 20px;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		gap: 20px;
	}
	.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelDetail .memberIntroduceBoxTelDetailInfo .memberIntroduceBoxTelDetailInfoTtl {
		font-weight: 700;
		font-size: 16px;
		line-height: 1.6;
		color: #D70146;
	}
	.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelDetail .memberIntroduceBoxTelDetailInfo .memberIntroduceBoxTelDetailInfoList {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20px;
	}
	.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelDetail .memberIntroduceBoxTelDetailInfo .memberIntroduceBoxTelDetailInfoList > li {
		position: relative;
		padding-left: 27px;
		font-size: 16px;
		line-height: 1.6;
	}
	.memberIntroduceBox .memberIntroduceBoxTel .memberIntroduceBoxTelDetail .memberIntroduceBoxTelDetailInfo .memberIntroduceBoxTelDetailInfoList > li > span {
		position: absolute;
		left: 0;
		top: 2px;
		width: 22px;
		height: 22px;
		font-size: 14px;
		border-radius: 50%;
		color: #fff;
		background-color: #D70146;;
	}
}
/* .memberIntroduceSec */
.memberIntroduceSec {
	margin-top: 64px;
}
.memberIntroduceSec .s-introduce-heading-seco {
	text-align: center;
}
.memberIntroduceSec .s-introduce-heading-seco img {
	width: 264px;
}
.memberIntroduceSec .memberIntroduceSecLead {
	margin-top: 42px;
	text-align: center;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.6;
	color: #D70146;
	letter-spacing: 0.03em;
}
.memberIntroduceSec .memberIntroduceSecText {
	margin-top: 16px;
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
}
.memberIntroduceSec .memberIntroduceSecImg {
	margin-top: 66px;
}
.memberIntroduceSec .memberIntroduceSecImg .memberIntroduceSecImgSet {
	margin: 0 -15px;
	width: auto;
}
.memberIntroduceSec .memberIntroduceSecImg .memberIntroduceSecImgSet img {
	display: block;
}
@media (min-width: 768px) {
	.memberIntroduceSec {
		margin-top: 80px;
	}
	.memberIntroduceSec .s-introduce-heading-seco {
		text-align: center;
	}
	.memberIntroduceSec .s-introduce-heading-seco img {
		width: 385px;
	}
	.memberIntroduceSec .memberIntroduceSecLead {
		margin-top: 48px;
		text-align: center;
		font-weight: 700;
		font-size: 18px;
		line-height: 1.6;
		color: #D70146;
		letter-spacing: 0.03em;
	}
	.memberIntroduceSec .memberIntroduceSecText {
		margin-top: 16px;
		font-size: 16px;
		line-height: 1.6;
		text-align: center;
	}
	.memberIntroduceSec .memberIntroduceSecImg {
		margin-top: 120px;
	}
	.memberIntroduceSec .memberIntroduceSecImg .memberIntroduceSecImgSet {
		margin: 0 -15px;
		width: auto;
	}
	.memberIntroduceSec .memberIntroduceSecImg .memberIntroduceSecImgSet img {
		display: block;
	}
}

/*------------------------------------------
1-10:wait dialog, loading
------------------------------------------*/
#wait_dialog {
	position: absolute;
	z-index: 99;
	width: 100%;
	height: 100%;
	background-color: #fff;
	opacity: 0.8;
}

#wait_dialog_message {
	font-size: 20px;
	font-weight: bold;
	position: fixed;
}

#wait_dialog_loadingImg {
	display: inline-block;
	background: url('/import/tenant_1/manara.jp/contents/img/base/loading.webp') left center no-repeat;
	width: 16px;
	height: 16px;
}