@charset "utf-8";
body{
    background-color: #F3F2F1;
}
/* mypage-pc.html と同じフォント（UserPageOrder.master = body.font-noto-sans） */
body.font-noto-sans,
body.font-noto-sans input,
body.font-noto-sans button,
body.font-noto-sans select,
body.font-noto-sans textarea,
body.font-noto-sans .corop-header,
body.font-noto-sans .corop-footer,
body.font-noto-sans .my-wrapper,
body.font-noto-sans #dvUserBox,
body.font-noto-sans #dvUserBox h1,
body.font-noto-sans #dvUserBox h2,
body.font-noto-sans #dvUserBox h3,
body.font-noto-sans #dvUserBox p,
body.font-noto-sans #dvUserBox a,
body.font-noto-sans #dvUserBox li,
body.font-noto-sans #dvUserBox label,
body.font-noto-sans #dvUserBox span,
body.font-noto-sans #dvUserBox td,
body.font-noto-sans #dvUserBox th {
	font-family: "Avenir", "Avenir Next", "Hiragino Kaku Gothic ProN",
		"Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
}
.my-wrapper{
    margin: 0;
    padding: 89px 0 0; /* fixed ヘッダー分 */
    background: #f3f2f1;
}
/* w2 ヘッダ枠：中身の .corop-header は fixed のため枠自体は高さを取らない */
#Header {
    display: block !important;
    margin: 0;
    padding: 0;
    height: 0;
    overflow: visible;
}
#form1 {
    margin: 0;
    padding: 0;
}
#Wrap{
    display: block;
    width: 100%;
    min-height: calc(100vh - 89px);
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background: transparent;
}
.wrapBottom,
.wrapTop {
    display: block;
    margin: 0;
    padding: 0;
}
#Contents {
    width: 100%;
    margin: 0;
    padding: 0;
}

/*
  PCレイアウト（1200/1440 で同じサイズ感）:
  - 左メニュー 314px 固定（スクロールしても動かない）
  - 右コンテンツ 幅1024px 固定
  - 全体シェル 1338px（314+1024）を中央寄せ
  - z-index: ヘッダー／フッター > 左メニュー > コンテンツ
*/
#dvUserBox.clearFix {
    position: relative;
    display: block;
    width: 1338px;
    max-width: 100%;
    min-height: calc(100vh - 89px);
    margin: 0 auto;
    padding: 0 0 0 79px;
    box-sizing: border-box;
}
#dvUserBox.clearFix::after {
    display: none;
}
#dvUserBox > .mp-menu {
    position: fixed;
    top: 89px;              /* .corop-header の高さ */
    left: 0;
    z-index: 30;            /* ヘッダー／フッターより下 */
    width: 314px;
    height: 100%;
    min-height: 0;
    padding: 40px 20px 60px;
    margin: 0;
    background: #dcd7c4;
    box-sizing: border-box;
    overflow-y: auto;
    flex: none;
    align-self: auto;
}
#dvUserBox > #dvUserFltContents,
#dvUserBox > #dvUserContents {
    display: block;
    width: 1097px;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 48px 60px;
    box-sizing: border-box;
    flex: none;
}

/* -------------------------ログインページ --------------------------------*/
#dvUserBox h2 {
    border-left: none;
    border-right: none;
    border-top: none;
    padding: 24px 0px 36px;
    font-size: 17px;
}
.row-body{
    margin: 37px auto 0px;
}
#dvUserContents .unit, #dvUserFltContents .unit {
    border-bottom: none;
    border-left: none;
    border-right: none;

}
.display-none{
    display: none;
}
#login-wrapper .row-3 .row-body {
    padding: 0 3%;
}
.row .row-body {
    margin: 0 auto;
    max-width: 1000px;
}
/* メールログイン部分 */
#dvUserBox #dvLogin #dvLoginWrap {
    float: none;
    width: 100%;
}
.row-3,
.row-body,

.row-3,
.row-body,
.form-control,
label {
    font-size: 14px;
    line-height: 26px;
}

input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea {
    color: #666;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 504px;
    color: #666;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 12px;
    font-size: 17px;
    line-height: 28px;
}

#dvUserBox #dvLogin p {
    margin: auto;
    line-height: 1.5;
}
#dvUserBox #dvLogin .dvLoginLogin ul li {
    margin: 23px auto;
    line-height: 30px;
    padding: 10px;
    font-size: 19px;
    width: 520px;
}
#dvUserBox #dvLogin .dvLoginLogin ul {
    margin: 10px auto;
    padding: 0px;
}

.dvLoginLogin {
    width: 600px;
    margin: auto;
}
.btn-large {
    padding: 0px;
    font-size: 15px;
    line-height: 30px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 2px;
    width: 300px;
    color: white;
    background-color: #e1c9b4;
    border: solid 1px #e1c9b4;
    margin: 20px auto;
    text-align: center;
    font-size: 20px;
    line-height: 67px;
}
.login-form{
    width: 300px;
    margin: auto;
}
.login-pass-lost{
    text-align: right;
    width: 300px;
}
.login-pass-lost-2{
    border-bottom: 1px solid;
}
#dvUserBox #dvLogin #dvLoginWrap .dvLoginReminder {
    margin-top: 70px;
}
.login-bana{
    width: 100%;
    margin: 10px auto;
    text-align: center;
}
/* ---------------------------footer----------------------- */
footer {
    max-width: 1240px;
    width: 1240px;
    height: 116px;
    margin-left: 322px;
}
footer .footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 110px;
    width: 1240px;
}
footer .footer-row .icons {
    display: flex;
    align-items: center;
}
footer .footer-row .icons .icon {
    height: 68px;
    margin-right: 70px;
}
#Foot {
    width: 100%;
    clear: both;
    border-top: none;
    margin: 0;
    padding: 0;
    min-height: 0;
    height: 0;
    overflow: hidden;
    line-height: 0;
}
#FootNav {
    display: none;
}
.footer {
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1100; /* 左メニューより上層（見た目詳細は header-footer.css） */
}
/* --------------------------- /footer（見た目は header-footer.css） ----- */
.footer-small {
    font-size: 80%;
    padding-left: 30px;
    width: auto;
    max-width: 1240px;
    margin: auto;
    text-align: left;
    padding-bottom: 48px;
}
/* ---------------------------mypagemenu----------------------- */
.menu {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  .menuTtl {
    flex: 0 1 160px;
  }
  
  .menuTtl__eng {
    display: block;
    margin: 0 0 11px;
    font-size: 2.25rem;
    letter-spacing: .15rem;
  }
  
  .menuTtl__jpn {
    display: block;
    font-size: .75rem;
  }
  
  .menuList {
    flex: 0 1 690px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  .menu__item {
    flex: 0 1 340px;
    margin: 0 0 23px;
    transition: all .2s;
    background: #FFF;
  }
  
  .menu__item:hover {
    box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
  }
  
  .menu__link {
    position: relative;
    display: block;
    padding: 11px 0 11px 76px;
  }
  
  .menu__link::before {
    position: absolute;
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    top: 50%;
    right: 17px;
    margin: -7px 0 0;
    border-top: #333333 1px solid;
    border-right: #333333 1px solid;
    transform: rotate(45deg);
  }
  
  .menu__link:hover {
    opacity: 1;
  }
  
  .menu__name {
    margin: 0 0 -5px;
    font-size: 1.25rem;
    letter-spacing: .07rem;
  }
  
  .menu__txt {
    font-size: .825rem;
    line-height: 2;
    letter-spacing: .05rem;
    margin-top: 10px !important;
  }
  /* -------------------mypage-left-menu--------------------------
  ---------------Form/Common?BodyMyPageMenu.ascx ----------------*/
  #dvUserBox ul, #dvUserBox li {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1.4;
    list-style: none;
    margin: auto;
    margin-top: 10px;
}
#dvUserBox li a:hover{
  opacity: 0.5;
}

  .s-splitFixed {
    position: fixed;
    width: 320px;
    height: 100%;
    background: #FFF;
    top: 0;
    left: 0;
    z-index: 1000;
    overflow-y: scroll;
}
.header__logo {
    display: flex;
    width: 100%;
    min-height: 190px;
    height: 190px;
    margin: 0 0 20px;
    align-items: flex-end;
    justify-content: flex-end;
    background-color: #F2E7DE;
}
.header__nav {
    margin: 0 0 auto;
    font-family: "Noto Sans JP", sans-serif;
}
.header__nav01 {
    width: 260px;
    margin: 0 auto 21px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.header__nav01Item {
    position: relative;
    flex: 0 1 80px;
}
.header__nav01Item:first-child::before,
.header__nav01Item:nth-child(2)::before{
    position: absolute;
    display: block;
    content: "";
    width: 1px;
    height: 30px;
    background: #E8E8E8;
    top: 50%;
    right: -5px;
    margin: -15px 0 0;
}

.header__nav01Link {
    display: block;
    height: 80px;
    padding: 60% 0 0;
    font-size: .6875rem;
    text-align: center;
    box-sizing: border-box;
}
.header__nav01Link--01 {
    background: 50% 32%/28% no-repeat url(../img/common_icon_01_blk.svg);
}
.header__nav01Link--02 {
    background: 50% 33%/38% no-repeat url(../img/teiki_henkou.png);
}
.header__nav01Link--03 {
    background: 50% 33%/35% no-repeat url(../img/toiawase.svg);
}
.header__nav02Link {
    display: flex;
    height: 55px;
    padding: 0 0 0 54px;
    font-size: .875rem;
    letter-spacing: .04rem;
    box-sizing: border-box;
    text-align: left;
    align-items: center;
}
.header__nav02Link--01 {
    background: 8% 50%/7% no-repeat url(../img/touroku_jouhou_01.png);
}
.header__nav02Link--02 {
    background: 8.6% 53%/6% no-repeat url(../img/kounyu_jouhou.png);
}
.header__nav02Link--03 {
    background: 7.2% 50%/7.7% no-repeat url(../img/teiki_henkou01.png);
}
.header__nav02Link--04 {
    background: 8% 51%/7% no-repeat url(../img/card.png);
}
.header__nav02Link--05 {
    background: 7.5% 50%/7% no-repeat url(../img/mail.png);
}
.header__nav02Link--06 {
    background: 7.7% 47%/7.4% no-repeat url(../img/guide.png);
}
.header__nav02Link--07 {
    background: 7.7% 47%/7.4% no-repeat url(../img/back.svg);
}

.stage {
    width: 280px;
    margin: 30px auto;
    border-radius: 1.5625vw;
}
.stage__ttl {
    margin: 0 0 4px !important;
    text-align: center;
    font-weight: 400;
    font-size: .8125rem;
    font-family: "Noto Sans JP", sans-serif;
}
.stage__ttl--small {
    font-size: .625rem;
}
.stageCard {
    position: relative;
    width: 280px;
    height: 156px;
    padding: 15px 0 10px;
    box-sizing: border-box;
    display: block;
}
.stageCard {
    background: 50% 50%/100% 100% no-repeat url(../img/svgexport-1.png);
}
.stageCard::before {
    position: absolute;
    content: "";
    display: block;
    width: 44px;
    height: 52px;
    top: -6px;
    left: -7px;
    background: 50% 50%/contain no-repeat url(../img/rank-oukan.png);
}
.stageBody__eng {
    display: block;
    margin: 0 0 16px !important;
    text-align: center;
    font-size: 1.625rem;
    letter-spacing: 0.15rem;
    line-height: 1;
}
.stageBody__jpn {
    display: block;
    margin: 0 0 3px !important;
    text-align: center;
    font-size: .75rem;
}
.ST-gold .stageCard {
    background: 50% 50%/100% 100% no-repeat url(../img/svgexport-1.png);
}
.stageBody {
    width: 240px;
    margin: 17px auto 5px;
    padding: 15px 0 14px;
    background: #FFF;
    box-sizing: border-box;
}
.stageGauge {
    width: 194px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  
  .stageGauge__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 25%;
            flex: 0 1 25%;
    height: 7px;
  }
  
  .stageGauge__item--05 {
    background: #F0F0F0;
  }
  .ST-normal .stageGauge__item--05 {
    background:#D6C687;
  }
  
  
  .ST-beginner .stageGauge__item--04 {
    background: #E3B84A;
  }
  
  .stageGauge__item--04 {
    background: #E6E6E6;
  }
  
  .ST-gold .stageGauge__item--03 {
    background: #AF8748;
  }
  
  .stageGauge__item--03 {
    background: #D9D9D9;
  }
  
  .ST-diamond .stageGauge__item--02 {
    background: #818181;
  }
  
  .stageGauge__item--02 {
    background: #D0D0D0;
  }
  
  .ST-platinum .stageGauge__item--01 {
    background: #478A96;
  }
  
  .stageGauge__item--01 {
    background: #C4C4C4;
  }
  
 
  .stage__next {
    text-align: center;
    font-size: .75rem;
  }
  
  .stage__btn {
    margin-bottom: 8.5%;
  }
/* ラインバナー部分 */
.headerLine {
    display: block;
    width: 280px;
    margin: 0 auto;
    padding: 33px 16px 18px;
    background: 94.6% 8.2%/17.9% no-repeat url(../img/footer_lineimage_01.png), #F2F0E7;
    box-sizing: border-box;
}
.headerLine__ttl {
    position: relative;
    margin: 0 0 3px;
    font-weight: 700;
    letter-spacing: .04rem;
    color: #00B900;
    font-family: "Noto Sans JP", sans-serif;
}
.headerLine__ttlTxt--01 {
    position: absolute;
    font-size: 1rem;
    top: -15px;
    left: -9px;
    transform: scale(0.6);
}
.headerLine__ttlTxt--01::before {
    left: -8px;
    transform: rotate(-25deg);
}
.headerLine__ttlTxt--01::after {
    right: -8px;
    transform: rotate(25deg);
}
.headerLine__ttlTxt--01::before, .headerLine__ttlTxt--01::after {
    content: "";
    position: absolute;
    display: block;
    width: 1px;
    height: 19px;
    border-right: #00B900 1px solid;
    top: -1px;
}
.headerLine__ttlTxt--02 {
    font-size: 1.625rem;
}
.headerLine__ttlTxt--03 {
    font-size: 1.125rem;
}
.headerLine__ttlTxt--04 {
    font-size: 1.4375rem;
}
.headerLine__txt {
    margin: 0 0 12px;
    font-size: .75rem;
    line-height: 1.5;
    font-family: "Noto Sans JP", sans-serif;
}
.btn-basic {
    position: relative;
    display: flex;
    background: #707070;
    color: #FFF;
    font-size: 1rem;
    align-items: center;
    justify-content: center;
}
.headerLine__btn {
    width: 160px;
    height: 34px;
    margin: 0 auto;
    font-family: "Noto Sans JP", sans-serif;
}
.btn-basic::before {
    content: "";
    position: absolute;
    display: block;
    width: 4px;
    height: 4px;
    top: 50%;
    right: 8px;
    margin: -2px 0 0;
    border-top: #FFF 1px solid;
    border-right: #FFF 1px solid;
    transform: rotate(45deg);
}
/* -------------------mypage-body--------------------------
  ---------------Form/User/BodyMyPage.ascx ----------------*/

.slideOuter {
    position: relative;
    width: 850px !important;
    max-width: 850px !important;
    margin: 0 auto 67px!important;
    overflow: hidden;
}
.slideBox, .slide .swiper-container {
    width: 850px;
    margin: 0 auto 4.3%;
    overflow: visible;
    z-index: 1;
}

.slideOuter::before, .slideOuter::after {
    display: block;
    position: absolute;
    content: "";
    width: 127px;
    height: 100%;
    top: 0;
    z-index: 10;
}
.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
}
.swiper-container-pointer-events {
    touch-action: pan-y;
}
.swiper-container {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    overflow: visible;
    z-index: 1;
}
.slideBtn__prev {
    left: 90px;
}
.slideBtn__next {
    right: 90px;
}
.slideOuter::before {
    left: 0;
    background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0.95) 5%, rgba(255, 255, 255, 0.59) 41%, rgba(255, 255, 255, 0.32) 68%, rgba(255, 255, 255, 0) 100%);
}
.slideOuter::after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.32) 32%, rgba(255, 255, 255, 0.59) 59%, rgba(255, 255, 255, 0.95) 95%, white 100%);
}
/* -------------------mypage-body-news--------------------------
  ---------------Form/User/BodyMyPage.ascx ----------------*/
  .u-Poiret {
    font-family: 'Poiret One', cursive;
  }
.news {
    width: 100%;
    margin: 0 0 79px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.newsTtl {
    flex: 0 1 160px;
}
.newsTtl__eng {
    display: block;
    margin: 0 0 11px;
    font-size: 2.25rem;
    letter-spacing: .15rem;
}
.newsTtl__jpn {
    display: block;
    font-size: .75rem;
}
.newsList {
    flex: 0 1 690px;
    border-bottom: 1px dotted #a0a0a0;
}
.news__link {
    position: relative;
    display: flex;
    width: 100%;
    height: 57px;
    padding: 0 0 0 14px;
    align-items: center;
    justify-content: left;
    font-size: 14px;
    border-top: 1px dotted #a0a0a0;
    box-sizing: border-box;
}
.news__link::before {
    position: absolute;
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    top: 50%;
    right: 12px;
    margin: -5px 0 0;
    border-top: #333333 1px solid;
    border-right: #333333 1px solid;
    transform: rotate(45deg);}
.l-main {
    display: block;
    width: 1000px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 0 50px;
    float: none;
    box-sizing: border-box;
}
/* UpdatePanel が間に入るため直下セレクタは使わない */
#dvUserBox main.l-main {
    margin-left: auto;
    margin-right: auto;
}
/* -------------------OrderHistoryList--------------------------
  ---------------Form/OrderHistory/OrderHistoryList.aspx ----------------*/
.breadcrumb {
    margin: 0 0 23px !important;
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    font-family: "Hiragino Sans";
}
.breadcrumb__item--link:link, .breadcrumb__item--link:visited, .breadcrumb__item--link {
    text-decoration: underline;
    border-bottom: 1px solid black;
}
.breadcrumb__item {
    position: relative;
    display: block;
    font-size: .75rem;
    line-height: 1;
    margin: 0 12px 0 0;
}
.breadcrumb__item::after {
    position: absolute;
    display: block;
    content: "";
    width: 6px;
    height: 6px;
    top: 50%;
    right: -8px;
    margin: -3px 0 0;
    border-top: #2B2B2B 1px solid;
    border-right: #2B2B2B 1px solid;
    transform: scale(1, 0.8) rotate(45deg);
}
.u-pageTtl {
    display: flex;
    width: 100%;
    height: 51px;
    margin: 0 0 26px;
    background: #F0F0F0;
    text-align: center;
    font-size: 1.25rem;
    letter-spacing: .06rem;
    align-items: center;
    justify-content: center;
}
.u-Serif {
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "游明朝", serif;
}
.purchaseList__txt {
    margin:20px auto 26px !important;
    font-family: "Hiragino Sans";
}
.u-txt {
    font-size: .875rem;
    line-height: 2;
    font-family: "Hiragino Sans";
    margin-top: 30px !important;
    margin-bottom: 30px !important;
}
.itemList__outer {
    margin: 0 0 7.7%;
    padding: 41px 0 46px;
    background: #F0F0F0;
}
.itemList {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
}
.itemList__item {
    background: #FFF;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: rgb(0 0 0 / 16%) 2px 2px 10px;
    margin: 0 0 20px;
}
.itemList__link {
    position: relative;
    display: flex;
    padding: 23px 48px 22px 27px;
    box-sizing: border-box;
}
.itemBody__image {
    flex: 0 1 189px;
}
.itemBody {
    width: 462px;
    margin: 0 0 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: column;
}
.item__name {
    margin: 0 0 6px;
    font-size: 1.125rem;
    line-height: 1.5555555;
}
.itemId {
    margin: 0 0 12px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-items: center;
}
.itemId__ttl {
    display: flex;
    flex: 0 1 53px;
    height: 18px;
    margin-right: 5px;
    align-items: center;
    justify-content: center;
    background: #2B2B2B;
    border-radius: 3px;
    color: #FFF;
    font-size: 0.625rem;
}
.itemId__txt {
    display: flex;
    padding: 0 0 .3%;
    font-size: 0.875rem;
    align-items: center;
    justify-content: center;
    font-family: "Hiragino Sans";
}
.itemInformation {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    margin-bottom: auto;
}
.Deli-error .itemInformation__current {
    background: #AA6868;
    font-family: "Hiragino Sans";
}
.itemInformation__current {
    display: flex;
    height: 25px;
    margin-top: 9px;
    margin-bottom: auto;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 0.875rem;
    width: 145px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.itemTable {
    width: 282px !important;
}
.itemTableBody {
    width: 100%;
}
.itemTable__head {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1;
}
.itemTable__head, .itemTable__data {
    padding: 11px 0 8px !important;
    border-bottom: #E5E5E5 1px solid !important;
    background-color: white !important;
}
.itemTable__data {
    text-align: right;
    font-size: 1rem;
    line-height: 1;
}
.itemTable__data--small {
    font-size: .75rem;
    line-height: 1;
}
.itemTable__row{
    font-family: "Hiragino Sans";
}
.pager-basic {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    justify-content: center;
}
.pager-basic__item--now:visited, .pager-basic__item--now:link {
    color: #FFF;
}
.pager-basic__item--now {
    pointer-events: none;
    background: #707070;
}
.pager-basic__item {
    display: flex;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0 8px;
    background: #F0F0F0;
    font-size: 1rem;
    text-align: center;
    align-items: center;
}
.btn-toTop {
    position: relative;
    display: flex;
    width: 180px;
    height: 48px;
    margin: 80px auto 0;
    padding-bottom: 2px;
    border: #DDD 1px solid;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    color: #707070;
    box-sizing: border-box;
    font-family: "Hiragino Sans";
}
.btn-toTop::before {
    position: absolute;
    display: block;
    content: "";
    width: 7px;
    height: 7px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    left: 15px;
    border-bottom: #707070 1px solid;
    border-left: #707070 1px solid;
    transform: rotate(45deg);
    transition: .2s all;
}
.itemList__link::after {
    width: 12px;
    height: 12px;
    top: 50%;
    right: 12px;
    border-top: #2B2B2B 1px solid;
    border-right: #2B2B2B 1px solid;
    transform: rotate(45deg);
    display: block;
    position: absolute;
    content: "";
}
#dvUserBox #dvOrderHistoryList table {
    border-top-style: none !important;
    margin: 0px !important;
}
.menu__link--01 {
    background: 9.5% 49%/9% no-repeat url(../img/touroku_jouhou_01.png);
}
.menu__link--02 {
    background: 10.6% 47%/9.2% no-repeat url(../img/kounyu_jouhou.png);
}
.menu__link--03 {
    background: 7.4% 52%/10% no-repeat url(../img/teiki_henkou01.png);
}
.menu__link--04 {
    background: 9.8% 51%/8.7% no-repeat url(../img/card.png);
}
.menu__link--05 {
    background: 8.3% 54%/8.5% no-repeat url(../img/mail.png);
}
.menu__link--06 {
    background: 9.7% 55.6%/8.5% no-repeat url(../img/guide.png);
}
.menu__link--07{
    background: 9.7% 56.6%/10.5% no-repeat url(../img/rank-img.png)
}

.menu__link {
    position: relative;
    display: block;
    padding: 11px 0 11px 76px;
}
.Deli-error .sItemStatus__current {
    background: #AA6868;
}
.Deli-reserve .sItemStatus__current {
    background: #E0B3B3;
}
.Deli-shipping .itemInformation__current {
    background: #94C9B5;
}
.Deli-temporary .itemInformation__current {
    background: #ADADAD;
}
.Deli-already .itemInformation__current {
    background: #AACACC;
}
.Deli-reserve .itemInformation__current {
    background: #E0B3B3;
}
.Deli-temporary .itemInformation__current {
    background: #ADADAD;
}

.btn{
    font-family: "Hiragino Sans"; 
}

.itemInformation {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 0 1 53.79%;
  }
  
  .itemInformation__current {
    display: flex;
    height: 2.46875vw !important;
    margin-bottom: auto;
    padding: 0 4.6vw !important;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 0.8125vw !important;
    letter-spacing: 0vw;
    text-indent: 0vw;
    line-height: 1;
    font-family: "Hiragino Sans";
  }
  
  .Deli-temporary .itemInformation__current {
    background: #ADADAD;
  }
  
  .Deli-reserve .itemInformation__current {
    background: #E0B3B3;
  }
  
  .Deli-shipping .itemInformation__current {
    background: #94C9B5;
  }
  
  .Deli-already .itemInformation__current {
    background: #AACACC;
  }
  
  .Deli-error .itemInformation__current {
    background: #AA6868;
  }
  
  .Deli-green .itemInformation__current {
    background: #94C9B5;
  }
  .orderItemBox {
    width: 718px;
    margin: 0 auto 22px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* new-header */
/* ==========================================================================
   corop マイページ 左メニュー  ―― WordPress とは独立（w2/aspx MyPage 用）
   --------------------------------------------------------------------------
   ● 単体完結（他CSSに依存しません）。クラスは全て "mp-" プレフィックス。
   ● w2(aspx) の MyPage 左カラムに、下記マークアップ + この CSS を入れて使う想定。
     画像パス（icons/*.svg）は w2 側の配置に合わせて置換してください。
   ● 色トークン（Figma）:
       ブラック #4C4948 / オレンジ #D79000 / 薄オリーブ #dcd7c4 / ホワイト #F3F2F1
   ========================================================================== */

   .mp-menu {
	--mp-ink: #4c4948;
	--mp-orange: #d79000;
	--mp-bg: #dcd7c4;
	box-sizing: border-box;
	/* mypage-pc.html と同じ：通常フロー（fixed しない）。親 flex で高さを伸ばす */
	width: 256px;
	min-height: 100%;
	padding: 40px 20px 60px;
	background: var(--mp-bg);
	color: var(--mp-ink);
	font-family: "Avenir", "Avenir Next", "Hiragino Kaku Gothic ProN",
		"Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
}
.mp-menu * { box-sizing: border-box; }

/* ===== 上部：丸アイコン3つ ===== */
.mp-menu__quick {
	display: flex;
	gap: 6px;
	margin-bottom: 44px;
}
.mp-menu__quick-item {
	flex: 1 1 0;          /* 3等幅カラム＝アイコン幅を均等に */
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;  /* 円とラベルを各カラム中央に */
	gap: 8px;
	text-decoration: none;
	color: var(--mp-ink);
	transition: opacity 0.2s ease;
}
.mp-menu__quick-item:hover { opacity: 0.75; }
.mp-menu__circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--mp-orange);
}
.mp-menu__circle img { width: 28px; height: 28px; display: block; }
.mp-menu__quick-label { font-size: 12px; letter-spacing: 0.02em; white-space: nowrap; text-align: center; }

/* ===== 見出し（注文情報 / 会員情報 / その他 / ログアウト）===== */
.mp-menu__group { margin-bottom: 34px; }
.mp-menu__heading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 0.1em;
}
.mp-menu__hicon { display: block; flex-shrink: 0; }
.mp-menu__hicon--member { width: 45px; height: 34px; }
.mp-menu__hicon--logout { width: 33px; height: 25px; }

/* 合成アイコン（ベース＋パーツを重ねる） */
.mp-ico { position: relative; display: block; flex-shrink: 0; }
.mp-ico img { position: absolute; display: block; }
.mp-ico .base { inset: 0; width: 100%; height: 100%; }
.mp-ico--order { width: 33px; height: 35px; }
.mp-ico--order .p1 { top: 16.27%; left: 25.4%; right: 33.22%; bottom: 34.91%; width: auto; }
.mp-ico--order .p2 { top: 16.27%; left: 71.83%; right: 13.94%; bottom: 34.91%; width: auto; }
.mp-ico--other { width: 29px; height: 29px; }
.mp-ico--other .p1 { top: 45.29%; left: 20.3%; right: 20.3%; bottom: 45.29%; width: auto; }

/* ===== リンク（・○○○）===== */
.mp-menu__links {
	list-style: none;
	margin: 0;
	padding: 0 0 0 4px;
}
.mp-menu__links li { margin-top: 10px; }
.mp-menu__links a {
	color: var(--mp-ink);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity 0.2s ease;
}
.mp-menu__links a::before { content: "・"; text-decoration: none; }
.mp-menu__links a:hover { opacity: 0.65; }

/* ログアウト */
.mp-menu__logout {
	margin: 0;
	padding-top: 4px;
}
.mp-menu__logout a {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--mp-ink);
	text-decoration: none;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 0.1em;
	transition: opacity 0.2s ease;
}
.mp-menu__logout a:hover { opacity: 0.7; }

/* ===== レスポンシブ（左メニューが狭い場合は全幅に）===== */
@media (max-width: 360px) {
	.mp-menu { width: 100%; padding: 32px 20px 40px; }
}

/* ==========================================================================
   corop マイページ TOP（PC）  ―― WordPress とは独立（w2/aspx 用）
   Figma 2-376。header-footer.css / mypage-menu.css と併用。
   構成: ヘッダー / [左サイドメニュー | メイン] / フッター
   ========================================================================== */

   .mypc-wrap {
	--pc-ink: #4c4948;
	--pc-orange: #d79000;
	--pc-olive: #9d8a3c;
	--pc-bg: #dcd7c4;
	--pc-paper: #f3f2f1;
	background: var(--pc-paper);
	color: var(--pc-ink);
	font-family: "Avenir", "Avenir Next", "Hiragino Kaku Gothic ProN",
		"Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
}
.mypc-wrap * { box-sizing: border-box; }

.mypc {
	display: flex;
	align-items: stretch;
	min-height: 60vh;
}
.mypc__side {
	width: 256px;
	flex-shrink: 0;
	background: var(--pc-bg);
}
/* 左サイドの mp-menu をサイド幅に合わせる */
.mypc__side .mp-menu { width: 100%; max-width: none; padding: 40px 20px 60px; }

.mypc__main {
	--pc-ink: #4c4948;
	--pc-orange: #d79000;
	--pc-olive: #9d8a3c;
	--pc-bg: #dcd7c4;
	--pc-paper: #f3f2f1;
	width: 1024px;
	max-width: 100%;
	min-width: 0;
	padding: 0 48px 60px;
	box-sizing: border-box;
}

/* ===== 会員バー ===== */
.mypc-member {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 34px 0 24px;
}
.mypc-member__icon { width: 56px; height: 56px; flex-shrink: 0; }
.mypc-member__icon img { width: 100%; height: 100%; display: block; }
.mypc-member__no { display: flex; gap: 18px; font-size: 14px; font-weight: 700; letter-spacing: 0.1em; margin: 0; }
.mypc-member__name { margin: 5px 0 0; font-size: 15px; font-weight: 700; letter-spacing: 0.1em; }

/* ===== ヒーロー（Swiper）＝ 中央大・左右半分見え ===== */
.mypc-hero { text-align: center; width: 100%; }
.mypc-hero__swiper {
	width: 100%;
	overflow: hidden;
	padding: 20px 0 8px;
	box-sizing: border-box;
}
.mypc-hero__swiper .swiper-wrapper {
	align-items: center;
}
.mypc-hero__swiper .swiper-slide {
	height: auto !important;
	aspect-ratio: 340 / 190;
	background: transparent;
	overflow: visible;
	box-sizing: border-box;
}
.mypc-hero__card {
	width: 100%;
	height: 100%;
	border-radius: 6px;
	overflow: hidden;
	transform: scale(0.65);
	transform-origin: center center;
	transition: transform 0.4s ease;
}
.mypc-hero__swiper .swiper-slide-active .mypc-hero__card,
.mypc-hero__swiper .swiper-slide-duplicate-active .mypc-hero__card {
	transform: scale(1.08);
}
.mypc-hero__card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* ページネーションはスライダーの下（外）に配置 */
.mypc-hero__pagination {
	position: static !important;
	margin-top: 16px;
	width: 100%;
}
.mypc-hero__pagination .swiper-pagination-bullet {
	width: 9px;
	height: 9px;
	margin: 0 5px !important;
	background: var(--pc-bg, #dcd7c4);
	opacity: 1;
	transition: width 0.2s ease;
}
.mypc-hero__pagination .swiper-pagination-bullet-active {
	width: 30px;
	border-radius: 5px;
	background: var(--pc-olive, #9d8a3c);
}

/* ===== セクション（見出し左・本文右） ===== */
.mypc-sec {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 24px;
	padding-top: 56px;
}
.mypc-sec__head { padding-top: 4px; }
.mypc-sec__en { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: 0.1em; color: var(--pc-olive); }
.mypc-sec__ja { margin: 4px 0 0; font-size: 13px; letter-spacing: 0.18em; }

/* NEWS リスト */
.mypc-news { list-style: none; margin: 0; padding: 0; }
.mypc-news__item { border-top: 1px dashed rgba(76, 73, 72, 0.3); }
.mypc-news__item:last-child { border-bottom: 1px dashed rgba(76, 73, 72, 0.3); }
.mypc-news__item a {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 16px 6px;
	text-decoration: none;
	color: var(--pc-ink);
}
.mypc-news__item a:hover { opacity: 0.65; }
.mypc-news__date { font-size: 14px; letter-spacing: 0.05em; flex-shrink: 0; }
.mypc-news__text { font-size: 14px; flex: 1; }
.mypc-news__arrow { width: 26px; flex-shrink: 0; }
.mypc-news__arrow img { width: 100%; display: block; }

/* MENU 2カラムカード */
.mypc-menu {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 40px;
	row-gap: 6px;
}
.mypc-menu__item {
	display: grid;
	grid-template-columns: 60px 1fr 24px;
	align-items: center;
	gap: 16px;
	padding: 24px 4px;
	border-top: 1px dashed rgba(76, 73, 72, 0.3);
	text-decoration: none;
	color: var(--pc-ink);
}
.mypc-menu__item:hover { opacity: 0.72; }
.mypc-menu__icon { display: flex; align-items: center; justify-content: center; }
.mypc-menu__icon img { display: block; }
.mypc-menu__icon--i1 img { width: 50px; }
.mypc-menu__icon--i2 img { width: 34px; }
.mypc-menu__icon--i3 img { width: 46px; }
.mypc-menu__icon--i4 img { width: 48px; }
.mypc-menu__icon--i5 img { width: 46px; }
.mypc-menu__icon--i6 img { width: 52px; }
.mypc-menu__title { display: block; font-size: 16px; font-weight: 500; letter-spacing: 0.06em; margin-bottom: 4px; }
.mypc-menu__desc { display: block; font-size: 13px; line-height: 1.5; color: rgba(76, 73, 72, 0.62); }
.mypc-menu__arrow { justify-self: end; }
.mypc-menu__arrow img { width: 23px; height: 23px; display: block; }


/* ヘッダー／フッター見た目は asset/css/header-footer.css に移管済み */


/* ============================================================
   corop ログインページ 見た目カスタム（Figma 2-375）
   ※ #dvUserContents.corop-login スコープ限定。既存ルールは変更しない。
   ============================================================ */
/* フォント（Figma準拠：Avenir＋和文ゴシック。入力欄・ボタン含め全要素へ） */
#dvUserContents.corop-login,
#dvUserContents.corop-login h1,
#dvUserContents.corop-login h2,
#dvUserContents.corop-login h3,
#dvUserContents.corop-login p,
#dvUserContents.corop-login a,
#dvUserContents.corop-login li,
#dvUserContents.corop-login label,
#dvUserContents.corop-login input,
#dvUserContents.corop-login button,
#dvUserContents.corop-login small {
    font-family: "Avenir", "Avenir Next", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
}
#dvUserContents.corop-login .row-body { width: 100%; max-width: 100%; margin-left: 0; margin-right: auto; text-align: left; }
/* 見出し */
#dvUserContents.corop-login .corop-login__head { margin-top: 48px; }
#dvUserContents.corop-login .corop-login__head h1 {
    font-size: 32px; font-weight: 700; color: #4c4948; letter-spacing: .06em; margin: 0 0 6px; line-height: 1.3;
}
#dvUserBox #dvUserContents.corop-login .corop-login__head h2 {
    border: none; padding: 0 0 24px; margin: 0; font-size: 18px; font-weight: 500;
    color: #d79000; letter-spacing: .08em; text-transform: none;
}
/* 説明・注記 */
#dvUserContents.corop-login .note { font-size: 14px; line-height: 1.9; color: #4c4948; }
#dvUserContents.corop-login .corop-login__nopass { margin-top: 22px; font-size: 13px; line-height: 1.9; color: #4c4948; }
#dvUserContents.corop-login .corop-login__nopass-ttl { margin: 0 0 4px; }
#dvUserContents.corop-login .corop-login__link { color: #4c4948; text-decoration: underline; text-underline-offset: 3px; }

/* 入力欄 */
#dvUserContents.corop-login #dvLogin #dvLoginWrap { max-width: 512px; margin: 0 auto; }
#dvUserContents.corop-login #dvLogin .dvLoginLogin { width: 100%; max-width: 512px; margin: 0 auto; }
#dvUserContents.corop-login #dvLogin .dvLoginLogin ul { margin: 24px auto 0; width: 100%; }
#dvUserContents.corop-login #dvLogin .dvLoginLogin ul li {
    width: 100%; max-width: 512px; margin: 0 auto 20px; padding: 0;
    font-size: 15px; line-height: 2; color: #4c4948;
}
#dvUserContents.corop-login #dvLogin input[type="email"],
#dvUserContents.corop-login #dvLogin input[type="text"],
#dvUserContents.corop-login #dvLogin input[type="password"] {
    width: 100%; max-width: 512px; box-sizing: border-box;
    background: #fff; border: 1px solid #cfc9b6; border-radius: 6px;
    padding: 16px 18px; font-size: 16px; line-height: 1.4; color: #4c4948; margin-top: 6px;
}

/* 共通ボタン（ログイン／パスワードリセット）＝オリーブ枠の白ピル＋矢印 */
#dvUserContents.corop-login .login-form,
#dvUserContents.corop-login .dvLoginReminder { width: 100%; max-width: 512px; margin-left: auto; margin-right: auto; text-align: center; }
#dvUserContents.corop-login .login-form { margin-top: 50px !important; }
#dvUserContents.corop-login #dvLogin .btn-large,
#dvUserContents.corop-login .corop-login__reset {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 340px; max-width: 100%; height: 62px; line-height: 1;
    background: #fff; color: #9d8a3c !important; border: 2px solid #9d8a3c; border-radius: 31px;
    font-size: 17px; letter-spacing: .1em; text-align: center; margin: 0 auto; box-sizing: border-box;
    text-decoration: none; transition: background .2s ease, color .2s ease;
}
#dvUserContents.corop-login #dvLogin .btn-large:hover,
#dvUserContents.corop-login .corop-login__reset:hover { background: #9d8a3c; color: #fff !important; }
#dvUserContents.corop-login #dvLogin .btn-large::after,
#dvUserContents.corop-login .corop-login__reset::after {
    content: ""; position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none'%3E%3Cpath d='M0 6h22M17 1l5 5-5 5' stroke='%239d8a3c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
#dvUserContents.corop-login #dvLogin .btn-large:hover::after,
#dvUserContents.corop-login .corop-login__reset:hover::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none'%3E%3Cpath d='M0 6h22M17 1l5 5-5 5' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* パスワードお忘れリード＋リセットボタン配置 */
#dvUserContents.corop-login .dvLoginReminder { margin-top: 40px; }
#dvUserContents.corop-login .corop-login__reminder-lead { text-align: center; font-size: 14px; color: #4c4948; letter-spacing: .06em; margin: 0 0 12px; }
#dvUserContents.corop-login .login-pass-lost { width: 100%; max-width: 512px; text-align: center; }
#dvUserContents.corop-login .login-pass-lost-2.corop-login__reset { border-bottom: 2px solid #9d8a3c; } /* 既存下線を枠色に統一 */