html { font-size: 62.5%;} body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-size: 1.0rem; font-weight: 500; color: #333333; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /************************************** input **************************************/ select{ width: 100%; height: 36px; box-sizing: border-box; font-size: 1.6rem; line-height: 34px; padding: 0 50px 0 9px; background: #FFFFFF; border: 1px solid #cccccc; border-radius: 4px; vertical-align: middle; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("../img/common/icon_arrow_bottom_black.svg"); background-repeat: no-repeat; background-position: calc(100% - 10px) center; background-size: 10px auto; } select > option:checked{ background-color: #eeeeee; position: relative; } input[type="text"], input[type="tel"], input[type="number"], input[type="password"], input[type="email"]{ width: 100%; height: 36px; box-sizing: border-box; line-height: 16px; font-size: 1.6rem; padding: 9px 9px 9px; background: #FFFFFF; border-radius: 4px; border: 1px solid #cccccc; vertical-align: middle; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; } textarea{ width: 100%; height: 200px; box-sizing: border-box; font-size: 1.6rem; line-height: 1.4; padding: 9px 9px; background: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 4px; vertical-align: middle; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; } :placeholder-shown { color: #999999; } ::-webkit-input-placeholder { color: #999999; } :-moz-placeholder { color: #999999; opacity: 1; } ::-moz-placeholder { color: #999999; opacity: 1; } :-ms-input-placeholder { color: #999999; } input[type="text"].err, input[type="tel"].err, input[type="number"].err, input[type="password"].err, input[type="email"].err, select.err, option.err, textarea.err{ border: 1px solid #e35555; } input[type="text"]:disabled, input[type="tel"]:disabled, input[type="number"]:disabled, input[type="password"]:disabled, input[type="email"]:disabled, select:disabled, option:disabled, textarea:disabled{ background-color: #efefef; color: #999999; } input[type="radio"], input[type="checkbox"]{vertical-align: middle;} /** radioBox *********************/ label.radioBox{cursor: pointer;} label.radioBox + label.radioBox{/*margin-left: 40px;*/} label.radioBox > input , li.registAddreList > input{display: none;} label.radioBox > span{ display: inline-block; text-align: left; min-height: 24px; font-size: 1.5rem; line-height: 1.7; padding-left: 34px; vertical-align: middle; position: relative; width: 100% } label.radioBox.small > span{ min-height: 16px; padding-left: 25px; font-size: 1.4rem; line-height: 1.7; } label.radioBox > span::before{ content: ''; display: inline-block; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; border: 1px solid #CCCCCC; vertical-align: middle; text-align: center; position: absolute; left: 0; top: 1px; z-index: 2; } label.radioBox.small > span::before{ width: 16px; height: 16px; top: 2px; } label.radioBox > span::after{ content: ' '; display: block; width: 12px; height: 12px; border-radius: 50%; background: #e35555; position: absolute; left: 6px; top: 7px; z-index: 2; opacity: 0; transform: scale(0); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } label.radioBox.small > span::after{ width: 8px; height: 8px; left: 4px; top: 6px; } label.radioBox > input:checked + span::after{ opacity: 1; transform: scale(1); } label.radioBox > input:disabled + span::before{background-color: #efefef;} label.radioBox > input:checked:disabled + span::after{opacity: 0;} /** checkBox *********************/ label.checkBox{ cursor: pointer; max-width: max-content; display: inline-table; } label.checkBox + label.checkBox{margin-left: 40px;} label.checkBox > input{display: none;} label.checkBox > span{ display: inline-block; text-align: left; min-height: 20px; font-size: 1.5rem; line-height: 1.7; padding-left: 30px; vertical-align: middle; position: relative; } label.checkBox.small > span{ min-height: 16px; padding-left: 25px; font-size: 1.4rem; line-height: 1.4; } label.checkBox > span::before{ content: ''; display: inline-block; width: 20px; height: 20px; border-radius: 4px; background: #FFFFFF; border: 1px solid #CCCCCC; vertical-align: middle; text-align: center; position: absolute; left: 0; top: 3px; z-index: 2; } label.checkBox.small > span::before{ width: 16px; height: 16px; top: 1px; } label.checkBox > span::after{ content: ' '; display: block; width: 16px; height: 16px; background: url("../img/common/icon_checked.svg") center center no-repeat; background-size: 16px auto; position: absolute; left: 2px; top: 5px; z-index: 2; opacity: 0; transform: scale(0); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } label.checkBox.small > span::after{ width: 12px; height: 12px; background-size: 12px auto; left: 2px; top: 3px; } label.checkBox > input:checked + span::after{ opacity: 1; transform: scale(1); } label.checkBox > input:disabled + span::before{background-color: #efefef;} label.checkBox > input:disabled + span::after{ opacity: 0;} /************************************** btn **************************************/ /*** btnWhite ***********/ .btnWhite{} .btnWhite > a, .btnWhite > button, .btnWhite > span{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 100%; height: 50px; font-size: 1.6rem; font-weight: 700; border: 1px solid #333333; border-radius: 4px; color: #333333; background: #FFFFFF; text-align: center; text-decoration: none; cursor: pointer; box-shadow: 2px 2px 0 rgba(187,187,187,1); } .btnWhite.small > a, .btnWhite.small > button, .btnWhite.small > span{ height: 30px; font-size: 1.5rem; border: 1px solid #333333; } .btnWhite > a:disabled, .btnWhite > button:disabled, .btnWhite > a:disabled:hover, .btnWhite > button:disabled:hover{ color: #999999; border-color: #999999; background: #FFFFFF; box-shadow: none; cursor: default; } .btnWhite span.otherSiteLink::after{ content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 10px; background: url("../img/common/icon_open_blank.svg") left 0 no-repeat; background-size: 12px auto; vertical-align: middle; } /*** btnBlack ***********/ .btnBlack{} .btnBlack > a, .btnBlack > button, .btnBlack > span, button.clickOnAddToCartContentAsset{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 100%; height: 50px; font-size: 1.6rem; font-weight: 700; color: #FFFFFF; border: 2px solid #333333; border-radius: 4px; background: #333333; text-align: center; text-decoration: none; cursor: pointer; box-shadow: 2px 2px 0 rgba(187,187,187,1); } .btnBlack.small > a, .btnBlack.small > button, .btnBlack.small > span, button.clickOnAddToCartContentAsset.small{ height: 30px; font-size: 1.5rem; border: 1px solid #333333; } .btnBlack > a:disabled, .btnBlack > button:disabled, .btnBlack > a:disabled:hover, .btnBlack > button:disabled:hover, button.clickOnAddToCartContentAsset:disabled:hover{ color: #FFFFFF; border-color: #999999; background: #999999; box-shadow: none; cursor: default; } button.changedAddress:disabled:hover, button.changedAddress:disabled, button.changedAddress:disabled > span, button.changedWrapping:disabled:hover, button.changedWrapping:disabled, button.changedWrapping:disabled > span, button.changedDateTime:disabled:hover, button.changedDateTime:disabled, button.changedDateTime:disabled > span{ box-shadow: none; background-color: #0000; cursor: default; pointer-events: none; } /*** btnCustom ***********/ button.clickOnAddToCartContentAsset.btnCustom01, button.clickOnAddToCartContentAsset.btnCustom02, button.clickOnAddToCartContentAsset.btnCustom03, button.clickOnAddToCartContentAsset.btnCustom04, button.clickOnAddToCartContentAsset.btnCustom05{ width: auto; max-width: 100%; height: auto; line-height: 1.2; padding: 0.65em 1.5em !important; border-radius: 3em; outline: none; color:#FFF; } button.clickOnAddToCartContentAsset.btnCustom06, button.clickOnAddToCartContentAsset.btnCustom07, button.clickOnAddToCartContentAsset.btnCustom08, button.clickOnAddToCartContentAsset.btnCustom09, button.clickOnAddToCartContentAsset.btnCustom10, button.clickOnAddToCartContentAsset.btnCustom11{ width: auto; max-width: 100%; height: auto; line-height: 1.2; padding: 0.65em 1.5em !important; border-radius: 4px; outline: none; color:#FFF; } button.clickOnAddToCartContentAsset.btnCustom01{ border: solid 2px #D6062D; background: #BC0000; background: -moz-linear-gradient(top, #fe9797 0%, #ea1010 27%, #940000 100%); background: -webkit-linear-gradient(top, #fe9797 0%,#ea1010 27%,#940000 100%); background: linear-gradient(to bottom, #fe9797 0%,#ea1010 27%,#940000 100%); } button.clickOnAddToCartContentAsset.btnCustom01{ border: solid 2px #D6062D; background: #BC0000; background: -moz-linear-gradient(top, rgba(254, 151, 151, 1) 0%, rgba(234, 16, 16, 1) 27%, rgba(148, 0, 0, 1) 100%); background: -webkit-linear-gradient(top, rgba(254, 151, 151, 1) 0%, rgba(234, 16, 16, 1) 27%, rgba(148, 0, 0, 1, 1) 100%); background: linear-gradient(to bottom, rgba(254, 151, 151, 1) 0%,rgba(234, 16, 16, 1) 27%,rgba(148, 0, 0, 1) 100%); } button.clickOnAddToCartContentAsset.btnCustom02{ border: solid 2px #0F0F0F; background: #2D2D2D; background: -moz-linear-gradient(top, rgba(185, 185, 185, 1) 0%, rgba(112, 112, 112, 1) 27%, rgba(5, 5, 5, 1) 100%); background: -webkit-linear-gradient(top, rgba(185, 185, 185, 1) 0%,rgba(112, 112, 112, 1) 27%,rgba(5, 5, 5, 1) 100%); background: linear-gradient(to bottom, rgba(185, 185, 185, 1) 0%,rgba(112, 112, 112, 1) 27%,rgba(5, 5, 5, 1) 100%); } button.clickOnAddToCartContentAsset.btnCustom03{ border: solid 2px #002671; background: #0136B1; background: -moz-linear-gradient(top, rgba(88, 126, 232, 1) 0%, rgba(5, 61, 208, 1) 27%, rgba(0, 50, 151, 1) 100%); background: -webkit-linear-gradient(top, rgba(88, 126, 232, 1) 0%,rgba(5, 61, 208, 1) 27%,rgba(0, 50, 151, 1) 100%); background: linear-gradient(to bottom, rgba(88, 126, 232, 1) 0%,rgba(5, 61, 208, 1) 27%,rgba(0, 50, 151, 1) 100%); } button.clickOnAddToCartContentAsset.btnCustom04{ border: solid 2px #E1010C; background: #C0470A; background: -moz-linear-gradient(top, rgba(251, 178, 110, 1) 0%, rgba(230, 117, 26, 1) 27%, rgba(170, 48, 3, 1) 100%); background: -webkit-linear-gradient(top, rgba(251, 178, 110, 1) 0%,rgba(230, 117, 26, 1) 27%,rgba(170, 48, 3, 1) 100%); background: linear-gradient(to bottom, rgba(251, 178, 110, 1) 0%,rgba(230, 117, 26, 1) 27%,rgba(170, 48, 3, 1) 100%); } button.clickOnAddToCartContentAsset.btnCustom05{ border: solid 2px #129900; background: #159301; background: -moz-linear-gradient(top, rgba(166, 239, 153, 1) 0%, rgba(30, 192, 2, 1) 27%, rgba(14, 113, 0, 1) 100%); background: -webkit-linear-gradient(top, rgba(166, 239, 153, 1) 0%,rgba(30, 192, 2, 1) 27%,rgba(14, 113, 0, 1) 100%); background: linear-gradient(to bottom, rgba(166, 239, 153, 1) 0%,rgba(30, 192, 2, 1) 27%,rgba(14, 113, 0, 1) 100%); } button.clickOnAddToCartContentAsset.btnCustom06{ border: solid 2px #002F6C; background: #002F6C; } button.clickOnAddToCartContentAsset.btnCustom07{ border: solid 2px #BC0000; background: #BC0000; } button.clickOnAddToCartContentAsset.btnCustom08{ border: solid 2px #2D2D2D; background: #2D2D2D; } button.clickOnAddToCartContentAsset.btnCustom09{ border: solid 2px #0136B1; background: #0136B1; } button.clickOnAddToCartContentAsset.btnCustom10{ border: solid 2px #C0470A; background: #C0470A; } button.clickOnAddToCartContentAsset.btnCustom11{ border: solid 2px #159301; background: #159301; } button.clickOnAddToCartContentAsset.btnCustom06::before, button.clickOnAddToCartContentAsset.btnCustom07::before, button.clickOnAddToCartContentAsset.btnCustom08::before, button.clickOnAddToCartContentAsset.btnCustom09::before, button.clickOnAddToCartContentAsset.btnCustom10::before, button.clickOnAddToCartContentAsset.btnCustom11::before{ content: ''; display: inline-block; width: 30px; height: 30px; margin-right: 20px; background: url("../img/common/icon_cart_white.svg") center center no-repeat; background-size: 29px auto; } button.clickOnAddToCartContentAsset.btnCustom01:hover{ background: -moz-linear-gradient(top, rgba(254, 151, 151, .7) 0%, rgba(234, 16, 16, .7) 27%, rgba(148, 0, 0, .7) 100%); background: -webkit-linear-gradient(top, rgba(254, 151, 151, .7) 0%, rgba(234, 16, 16, .7) 27%, rgba(148, 0, 0, 1, .7) 100%); background: linear-gradient(to bottom, rgba(254, 151, 151, .7) 0%,rgba(234, 16, 16, .7) 27%,rgba(148, 0, 0, .7) 100%); } button.clickOnAddToCartContentAsset.btnCustom02:hover{ background: -moz-linear-gradient(top, rgba(185, 185, 185, .7) 0%, rgba(112, 112, 112, .7) 27%, rgba(5, 5, 5, .7) 100%); background: -webkit-linear-gradient(top, rgba(185, 185, 185, .7) 0%,rgba(112, 112, 112, .7) 27%,rgba(5, 5, 5, .7) 100%); background: linear-gradient(to bottom, rgba(185, 185, 185, .7) 0%,rgba(112, 112, 112, .7) 27%,rgba(5, 5, 5, .7) 100%); } button.clickOnAddToCartContentAsset.btnCustom03:hover{ background: -moz-linear-gradient(top, rgba(88, 126, 232, .7) 0%, rgba(5, 61, 208, .7) 27%, rgba(0, 50, 151, .7) 100%); background: -webkit-linear-gradient(top, rgba(88, 126, 232, .7) 0%,rgba(5, 61, 208, .7) 27%,rgba(0, 50, 151, .7) 100%); background: linear-gradient(to bottom, rgba(88, 126, 232, .7) 0%,rgba(5, 61, 208, .7) 27%,rgba(0, 50, 151, .7) 100%); } button.clickOnAddToCartContentAsset.btnCustom04:hover{ background: -moz-linear-gradient(top, rgba(251, 178, 110, .7) 0%, rgba(230, 117, 26, .7) 27%, rgba(170, 48, 3, .7) 100%); background: -webkit-linear-gradient(top, rgba(251, 178, 110, .7) 0%,rgba(230, 117, 26, .7) 27%,rgba(170, 48, 3, .7) 100%); background: linear-gradient(to bottom, rgba(251, 178, 110, .7) 0%,rgba(230, 117, 26, .7) 27%,rgba(170, 48, 3, .7) 100%); } button.clickOnAddToCartContentAsset.btnCustom05:hover{ background: -moz-linear-gradient(top, rgba(166, 239, 153, .7) 0%, rgba(30, 192, 2, .7) 27%, rgba(14, 113, 0, .7) 100%); background: -webkit-linear-gradient(top, rgba(166, 239, 153, .7) 0%,rgba(30, 192, 2, .7) 27%,rgba(14, 113, 0, .7) 100%); background: linear-gradient(to bottom, rgba(166, 239, 153, .7) 0%,rgba(30, 192, 2, .7) 27%,rgba(14, 113, 0, .7) 100%); } button.clickOnAddToCartContentAsset.btnCustom01:hover, button.clickOnAddToCartContentAsset.btnCustom02:hover, button.clickOnAddToCartContentAsset.btnCustom03:hover, button.clickOnAddToCartContentAsset.btnCustom04:hover, button.clickOnAddToCartContentAsset.btnCustom05:hover{ color: #FFFFFF; } button.clickOnAddToCartContentAsset.btnCustom06:hover{ color: #002F6C; background: #FFFFFF; } button.clickOnAddToCartContentAsset.btnCustom07:hover, button.clickOnAddToCartContentAsset.btnCustom08:hover, button.clickOnAddToCartContentAsset.btnCustom09:hover, button.clickOnAddToCartContentAsset.btnCustom10:hover, button.clickOnAddToCartContentAsset.btnCustom11:hover{ background: #FFFFFF; } button.clickOnAddToCartContentAsset.btnCustom07:hover{ color:#BC0000; } button.clickOnAddToCartContentAsset.btnCustom08:hover{ color:#2D2D2D; } button.clickOnAddToCartContentAsset.btnCustom09:hover{ color:#0136B1; } button.clickOnAddToCartContentAsset.btnCustom10:hover{ color:#C0470A; } button.clickOnAddToCartContentAsset.btnCustom11:hover{ color:#159301; } button.clickOnAddToCartContentAsset.btnCustom06:hover:before{ content: ''; display: inline-block; width: 30px; height: 30px; margin-right: 20px; background: url("../img/common/icon_cart_blue.svg") center center no-repeat; background-size: 29px auto; } button.clickOnAddToCartContentAsset.btnCustom07:hover:before{ content: ''; display: inline-block; width: 30px; height: 30px; margin-right: 20px; background: url("../img/common/icon_cart_red.svg") center center no-repeat; background-size: 29px auto; } button.clickOnAddToCartContentAsset.btnCustom08:hover:before{ content: ''; display: inline-block; width: 30px; height: 30px; margin-right: 20px; background: url("../img/common/icon_cart_black.svg") center center no-repeat; background-size: 29px auto; } button.clickOnAddToCartContentAsset.btnCustom09:hover:before{ content: ''; display: inline-block; width: 30px; height: 30px; margin-right: 20px; background: url("../img/common/icon_cart_indigo.svg") center center no-repeat; background-size: 29px auto; } button.clickOnAddToCartContentAsset.btnCustom10:hover:before{ content: ''; display: inline-block; width: 30px; height: 30px; margin-right: 20px; background: url("../img/common/icon_cart_orange.svg") center center no-repeat; background-size: 29px auto; } button.clickOnAddToCartContentAsset.btnCustom11:hover:before{ content: ''; display: inline-block; width: 30px; height: 30px; margin-right: 20px; background: url("../img/common/icon_cart_green.svg") center center no-repeat; background-size: 29px auto; } button.clickOnAddToCartContentAsset.btnCustom01:disabled, button.clickOnAddToCartContentAsset.btnCustom02:disabled, button.clickOnAddToCartContentAsset.btnCustom03:disabled, button.clickOnAddToCartContentAsset.btnCustom04:disabled, button.clickOnAddToCartContentAsset.btnCustom05:disabled, button.clickOnAddToCartContentAsset.btnCustom01:disabled:hover, button.clickOnAddToCartContentAsset.btnCustom02:disabled:hover, button.clickOnAddToCartContentAsset.btnCustom03:disabled:hover, button.clickOnAddToCartContentAsset.btnCustom04:disabled:hover, button.clickOnAddToCartContentAsset.btnCustom05:disabled:hover{ color: #FFFFFF; border: solid 2px #999999; background: #999999; background: -moz-linear-gradient(top, #e2e2e2 0%, #c2c2c2 27%, #939393 100%); background: -webkit-linear-gradient(top, #e2e2e2 0%,#c2c2c2 27%,#939393 100%); background: linear-gradient(to bottom, #e2e2e2 0%,#c2c2c2 27%,#939393 100%); box-shadow: 2px 2px 0 rgba(187,187,187,1); cursor: default; } button#btnDisabled.clickOnAddToCartContentAsset.btnDisabled:disabled{ pointer-events: none; color: #FFFFFF; border-color: #999999; background: #999999; box-shadow: none; cursor: default; } button#btnDisabled.clickOnAddToCartContentAsset.btnDisabled:disabled,button.clickOnAddToCartContentAsset.btnDisabled:disabled:hover{ pointer-events: none !important; color: #FFFFFF; border-color: #999999 !important; background: #999999 !important; box-shadow: none; cursor: default; white-space: normal !important; opacity: 1.0 !important; } div:has(.product-detail button#btnDisabled.clickOnAddToCartContentAsset.btnDisabled), div:has(.product-detail button#btnDisabled.clickOnAddToCartContentAsset.btnDisabled:hover){ opacity:1.0 !important; animation: none !important; transform: none !important; transition: unset !important; } /*** btnMore ***********/ .btnMore{} .btnMore > a, .btnMore > button, .btnMore > span{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 100%; height: 40px; font-size: 1.4rem; font-weight: 700; border: 1px solid #cccccc; border-radius: 4px; color: #333333; background: #FFFFFF; text-align: center; text-decoration: none; cursor: pointer; } .btnMore > a > em, .btnMore > button > em, .btnMore > span > em{ display: block; width: 10px; height: 10px; margin-left: 5px; position: relative; } .btnMore > a > em::before, .btnMore > button > em::before, .btnMore > span > em::before, .btnMore > a > em::after, .btnMore > button > em::after, .btnMore > span > em::after{ content: ''; display: block; width: 10px; height: 2px; background: #333333; position: absolute; webkit-transition: transform 0.2s ease,opacity 0.5s ease; -moz-transition: transform 0.2s ease,opacity 0.5s ease; -o-transition: transform 0.2s ease,opacity 0.5s ease; transition: transform 0.2s ease,opacity 0.5s ease; } .btnMore > a > em::before, .btnMore > button > em::before, .btnMore > span > em::before{ top: calc(50% - 1px); right: 0; } .btnMore > a > em::after, .btnMore > button > em::after, .btnMore > span > em::after{ transform: rotate(90deg); top: calc(50% - 1px); right: 0; } .btnMore.open > a > em::after, .btnMore.open > button > em::after, .btnMore.open > span > em::after{ opacity: 0; transform: rotate(0); } /*** btnInCart ***********/ .btnInCart{} .btnInCart > a, .btnInCart > button{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 100%; height: 60px; font-size: 2.0rem; font-weight: 700; color: #FFFFFF; border: 2px solid #333333; border-radius: 4px; background: #333333; text-align: center; text-decoration: none; box-shadow: 2px 2px 0 rgba(187,187,187,1); position: relative; cursor: pointer; } .btnInCart > a::before, .btnInCart > button::before{ content: ''; display: inline-block; width: 30px; height: 30px; margin-right: 20px; background: url("../img/common/icon_cart_white.svg") center center no-repeat; background-size: 29px auto; } .btnInCart > a:disabled, .btnInCart > button:disabled{ color: #FFFFFF; border-color: #999999; background: #999999; box-shadow: none; cursor: default; } .btnInCart > a:disabled::before, .btnInCart > button:disabled::before{ display: none; } /*** arrowLink ***********/ a.arrowLink, span.arrowLink{ display: inline-block; font-size: 1.5rem; color: #333333; font-weight: 700; text-decoration: none; padding-left: 26px; position: relative; } a.arrowLinkLP{ display: inline-block; font-size: 1.5rem; font-weight: 700; color: #333333; text-decoration: none; margin-left: 10px; padding-left: 20px; position: relative; vertical-align: middle; cursor: pointer; } a.arrowLink::before, span.arrowLink::before{ content: ''; display: inline-block; width: 16px; height: 16px; border-radius: 2px; background: url("../img/common/icon_arrow_right_white.svg") center center no-repeat #333333; background-size: auto 9px; position: absolute; left: 0; top: calc(50% - 8px); } a.arrowLinkLP::before{ content: ''; display: inline-block; width: 16px; height: 16px; border-radius: 2px; background: url("../img/common/icon_arrow_right_white.svg") center center no-repeat #333333; background-size: auto 9px; position: absolute; left: 0px; top: calc(50% - 18px); } a.arrowLink:hover, a.arrowLinkLP:hover{ text-decoration: underline; } a.arrowLinkWhite{ display: inline-block; font-size: 1.5rem; color: #FFFFFF; text-decoration: none; padding-left: 26px; position: relative; } a.arrowLinkWhite::before{ content: ''; display: inline-block; width: 16px; height: 16px; border-radius: 2px; background: url("../img/common/icon_arrow_right_black.svg") center center no-repeat #FFFFFF; background-size: auto 8px; position: absolute; left: 0; top: calc(50% - 9px); } a.arrowLinkUnder{ display: inline-block; font-size: 1.5rem; color: #333333; text-decoration: none; padding-left: 26px; position: relative; } a.arrowLinkUnder::before{ content: ''; display: inline-block; width: 16px; height: 16px; border-radius: 2px; background: url("../img/common/icon_arrow_bottom_white.svg") center center no-repeat #333333; background-size: 10px auto; position: absolute; left: 0; top: calc(50% - 8px); } /*【FFHC v1.0】【No.206 「この商品がすぐに必要ですか？」ボタンの表示を変更】 #40608 Start.*/ .ded .subscriptionArea .content .bottomBtnArea > ul > li a.SubscriptionListBtnInCart{ display: inline-block; font-size: 1.7rem; color: #333333; font-weight: 700; text-decoration: none; padding-left: 26px; position: relative; text-decoration: underline; } a.SubscriptionListBtnInCart::before{ content: ''; display: inline-block; width: 16px; height: 16px; border-radius: 2px; background: url("../img/common/icon_arrow_right_white.svg") center center no-repeat #333333; background-size: auto 9px; position: absolute; left: 0; top: calc(50% - 8px); } a.SubscriptionListBtnInCart:hover{ text-decoration: underline; } /*【FFHC v1.0】【No.206 「この商品がすぐに必要ですか？」ボタンの表示を変更】 #40608 End.*/ /*** otherSiteLink ***********/ a.otherSiteLink, span.otherSiteLink{} a.otherSiteLink::after, span.otherSiteLink::after{ content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 10px; background: url("../img/common/icon_open_blank.svg") left 0 no-repeat; background-size: 12px auto; vertical-align: middle; } /************************************** modalBox **************************************/ .modalBox{ display: block; width: 100%; background: rgba(0,0,0,.8); overflow: auto; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; position: fixed; visibility: hidden; opacity: 0; top: 0; bottom: 0; left: 0; z-index: -1; webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; -webkit-transform: translate(-200vw, 0); -moz-transform: translate(-200vw, 0); -o-transform: translate(-200vw, 0); transform: translate(-200vw, 0); } .modalBox.open{ visibility: visible; opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); z-index: 1000; } .modalBox .modalBg{ content: ''; display: block; width: 100%; position: fixed; top: 0; bottom: 0; left: 0; z-index: 1; cursor: pointer; } .modalBox .modalInner{ width: 90%; margin: 0 auto; padding: 40px 0 30px; background: #FFFFFF; position: relative; z-index: 2; } .modalBox .modalTTL, #dialog-container .modalTTL, .modalInner .modalTTL{ display: block; width: calc(100% - 40px); padding: 0 0 30px; margin: 0 auto; font-size: 1.8rem; line-height: 1.4; font-weight: 700; } .modalBox .modalInner .closeBtn{ display: block; width: 20px; height: 20px; cursor: pointer; position: absolute; right: 0; top: -35px; } .modalBox .modalInner .closeBtn::before, .modalBox .modalInner .closeBtn::after{ content: ''; display: block; width: 25px; height: 1px; background: #FFFFFF; position: absolute; left: 0; top: 50%; } .modalBox .modalInner .closeBtn::before{ -webkit-transform: translate(-3px,-3px) rotate(45deg); -moz-transform: translate(-3px,-3px) rotate(45deg); -o-transform: translate(-3px,-3px) rotate(45deg); transform: translate(-3px,-3px) rotate(45deg); } .modalBox .modalInner .closeBtn::after{ -webkit-transform: translate(-3px,-3px) rotate(-45deg); -moz-transform: translate(-3px,-3px) rotate(-45deg); -o-transform: translate(-3px,-3px) rotate(-45deg); transform: translate(-3px,-3px) rotate(-45deg); } .modalBox .modalInner .closeText, #dialog-container .closeText, #bonus-product-dialog .closeText{ display: block; margin: 30px 20px 0; padding-top: 20px; border-top: 1px solid #333333; text-align: center; } .modalBox .modalInner .closeText > span, #dialog-container .closeText > span, #bonus-product-dialog .closeText >span{ font-size: 1.4rem; text-decoration: underline; cursor: pointer; } .modalBox .modalInner .closeText > span:hover{text-decoration: none;} #dialog-container .closeText > span:hover{text-decoration: none;} #bonus-product-dialog .closeText > span:hover{text-decoration: none;} .helpBox{} .helpBox .openModal{ display: -webkit-inline-flex; display: inline-flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; font-size: 1.4rem; text-decoration: underline; cursor: pointer; } .helpBox .openModal:hover{text-decoration: none;} .helpBox .openModal > em{ display: block; width: 23px; height: 23px; margin-right: 5px; } .helpBox .openModal > em > img{display: block; width: 23px; height: auto;} .helpBox .modalBox .helpText > dl{ padding: 0 20px; } /**【FFHC v1.0】【一部のアセット、スロットなどが未実装】#5420 Start.*/ .helpBox .modalBox .helpText > dl > dt, .helpBox .modalBox .helpText > div> dl > dt{ display: block; text-align: left; font-size: 1.8rem; line-height: 1.4; font-weight: 700; margin-bottom: 30px; } .helpBox .modalBox .helpText > dl > dd, .helpBox .modalBox .helpText > div > dl > dd{ display: block; font-size: 1.4rem; line-height: 1.4; text-align: left; margin-bottom: 30px; } .helpBox .modalBox .helpText > dl > dd > dl, .helpBox .modalBox .helpText > div > dl > dd > dl{ margin-bottom: 30px; } .helpBox .modalBox .helpText > dl > dd > dl:nth-last-of-type(1), .helpBox .modalBox .helpText > div > dl > dd > dl:nth-last-of-type(1){ margin-bottom: 0; } .helpBox .modalBox .helpText > dl > dd > dl > dt, .helpBox .modalBox .helpText > div > dl > dd > dl > dt{ display: block; font-size: 1.5rem; font-weight: 700; margin-bottom: 10px; } /**【FFHC v1.0】【一部のアセット、スロットなどが未実装】#5420 End.*/ .modalBox .securityCodeImg{display: block; width: 100%; margin-bottom: 25px;} .modalBox .securityCodeImg img{display: block; width: 100%; height: auto;} .cautionListOuter{ display: block; width: calc(100% - 40px); padding-top: 20px; margin: 0 auto; } .helpBox .modalBox .infoText, .paymentHelp .modalBox .infoText, .nextShippingHelp .modalBox .infoText{ text-indent: 1em; padding-top: 0.5rem; padding-right: 0.5rem; padding-bottom: 1.3rem; margin: 0 15px; } .helpBox .modalBox .refText { text-indent: 1em; font-size: 1.2rem; padding-bottom: 0.5rem; margin: 0 15px; } .helpBox .modalBox .subText { text-indent: 2em; font-size: 1.2rem; padding-bottom: 0.5rem; margin: 0 15px; } .helpBox .modalBox .contactTTL { display: block; width: 100%; padding: 20px 0 20px; margin: 0 auto; font-size: 2.2rem; line-height: 1.6; font-weight: 700; text-indent: 0; text-align: center; } .helpBox .modalBox .contactText { text-align: center; margin: 0 15px; } /************************************** wrap **************************************/ #wrapper{ width: 100%; margin: 0 auto; padding: 60px 0 0 0; overflow: hidden; } .simpleheader #wrapper{ padding: 40px 0 0 0; } #wrapper.lock{ position: fixed; overflow: hidden; top: 0; } #wrapper.fixedFootOpen{ padding-bottom: 116px; } /************************************** #headMsg **************************************/ #noscriptMsg, #cookieMsg{ display: block; width: 100%; background: #fbe6e6; padding: 15px 20px; font-size: 1.4rem; line-height: 1.4; text-align: left; margin-top: -60px; } /************************************** #header **************************************/ #header{ width: 100%; height: 60px; margin: 0 auto; padding: 0 0; background: #FFFFFF; border-bottom: 2px solid #cccccc; position: fixed; z-index: 100; left: 0; top: 0; } #noscriptMsg + #header, #header.viewCookieErr{ position: relative; top: inherit; left: inherit; } #header.simple{ height: 40px; border-bottom: 2px solid #cccccc; position: absolute; } #header .headInner{ display: block; width: 100%; padding: 0 145px 0 60px; margin: 0 auto; position: relative; } #header .headLogo{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; width: 100%; max-width: 145px; height: 60px; padding: 0; } #header .headLogo > a{ display: block;} #header .headLogo > a > img{display: block;} #header .headLogo > a > img:nth-of-type(1){ width: 100%; max-width: 85px; margin-bottom: 7px; } #header .headLogo > a > img:nth-of-type(2){ width: 100%; max-width: 143px; } #header.simple .headLogo{ display: block; width: 250px; height: 40px; margin: 0 auto; } #header.simple .headLogo > a{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; height: 40px; -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } #header.simple .headLogo > a > img{display: block;} #header.simple .headLogo > a > img:nth-of-type(1){width: 87px; margin-right: 10px} #header.simple .headLogo > a > img:nth-of-type(2){width: calc(100% - 97px);} #header .headLogo2{ top: 0; bottom: 0; left: 0; right: 0; } #header .headLogo2 > img{ display: block; padding-top: 0px; margin: 0px auto 0px; width: 70px; } /*** #headLoiginBtn *****************************/ #headLoiginBtn{ display: block; position: absolute; width: 36px; height: 60px; right: 100px; top: 0; } #headLoiginBtn > a{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 100%; height: 100%; padding-bottom: 0; } #headLoiginBtn > a > img{ display: block; width: 28px; height: auto; } /*** #headSearchBox *****************************/ #headSearchBox{ display: block; } #headSearchBox .openBtn{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 40px; height: 60px; position: absolute; right: 60px; top: 0; } #headSearchBox .openBtn > img{ display: block; width: 25px; height: auto; } /*** headSearch ***********/ #headSearch{ display: block; width: 100%; height: calc(100vh - 60px); padding: 20px; background: #eeeeee; opacity: 0; visibility: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; position: fixed; top: 60px; left: 0; z-index: 100; webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; -webkit-transform: translate(-200vw,0); -moz-transform: translate(-200vw,0); -o-transform: translate(-200vw,0); transform: translate(-200vw,0); } #headSearch.open{ visibility: visible; opacity: 1; -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0); } #headSearch::after{ content: ''; display: block; width: 100%; height: 100px; } #headSearch fieldset{ display: block; width: 100%; height: 40px; margin: 0; padding: 0; } #headSearch fieldset > input[type="text"], #headSearch fieldset > button{ display: block; float: left; } #headSearch fieldset > input[type="text"]{ display: block; width: calc(100% - 60px); height: 40px; border-radius: 4px 0 0 4px; font-size: 1.6rem; line-height: 38px; border-right: none; float: left; } #headSearch fieldset > button{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 60px; height: 40px; border-radius: 0 4px 4px 0; background: #333333; float: right; } #headSearch fieldset > button > img{ display: block; width: 26px; height: auto; } /*** searchSuggestions ***********/ #searchSuggestions{ display: none; width: 100%; background: #FFFFFF; border: 1px solid #cccccc; margin-top: -1px; box-shadow: 0 5px 5px rgba(0,0,0,.2); } #headSearch #searchSuggestions.open{ display: block; } #searchSuggestions .inner{ display: block; width: 100%; text-align: left; } /*** searchPhrase ***********/ #searchSuggestions ul.searchPhrase{ display: block; width: 100%; } #searchSuggestions ul.searchPhrase > li{ display: block;} #searchSuggestions ul.searchPhrase > li > a{ display: block; font-size: 1.6rem; padding: 15px; background: #FFFFFF; color: #333333; text-decoration: none; } /*** productSuggest ***********/ #searchSuggestions dl.productSuggest{ display: block; border-top: 1px solid #cccccc; } #searchSuggestions dl.productSuggest > dt{ display: block; padding: 12px 15px; font-size: 1.8rem; text-align: left; background: #eeeeee; } #searchSuggestions dl.productSuggest > dd{ display: block;} #searchSuggestions dl.productSuggest > dd > a{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: flex-start; justify-content: flex-start; padding: 15px; color: #333333; background: #FFFFFF; text-align: left; } #searchSuggestions dl.productSuggest > dd figure{ display: block; width: 80px; margin-right: 10px; } #searchSuggestions dl.productSuggest > dd figure > img{display: block; width: 100%; height: auto;} #searchSuggestions dl.productSuggest > dd .text{ display: block; width: calc(100% - 90px); font-size: 1.4rem; line-height: 1.7; margin-top: -0.25em; } /*** contentsSuggest ***********/ #searchSuggestions dl.contentsSuggest{ display: block; border-top: 1px solid #cccccc; } #searchSuggestions dl.contentsSuggest > dt{ display: block; padding: 12px 15px; font-size: 1.8rem; text-align: left; background: #eeeeee; } #searchSuggestions dl.contentsSuggest > dd{ display: block; border-bottom: 1px dotted #CCCCCC; } #searchSuggestions dl.contentsSuggest > dd:nth-last-of-type(1){border-bottom: none;} #searchSuggestions dl.contentsSuggest > dd > a{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: flex-start; justify-content: flex-start; padding: 15px; color: #333333; background: #FFFFFF; text-align: left; font-size: 1.4rem; line-height: 1.3; } /** btnClose ***/ #headSearchBox .closeBtn{ display: block; margin-top: 20px; font-size: 1.4rem; text-align: center; } #headSearchBox .closeBtn > span{ text-decoration: underline; } /*** cart popup *****************************/ #headCart{ display: block; width: 40px; height: 60px; position: absolute; right: 20px; top: 0; z-index: 2; } #headCart > a{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 40px; height: 60px; } #headCart > a > em{ display: block; width: 30px; position: relative; } #headCart > a > em > img{display: block; width: 100%; height: auto;} #headCart > a > em > span{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #e35555; color: #FFFFFF; font-size: 12px; font-weight: 700; position: absolute; top: -10px; right: -9px; } #headCart > a > span{ display: none;} #headCart #cartInner{ display: none;} /*** coupon *****************************/ #headCart.viewCoupon{right: 75px;} #headSearchBox .viewCoupon{right: 110px;} /**#headSearchBox .openBtn {right: 110px;}**/ /** #headLoiginBtn{ right: 155px;} **/ #headCoupon{ display: block; width: 40px; height: 60px; position: absolute; right: 25px; top: 0; z-index: 2; } #headCoupon a{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 30px; height: 60px; } #headCoupon a > em{ display: block; width: 30px; position: relative; } #headCoupon a > em > img{display: block; width: 100%; height: auto;} #headCoupon a > em > span{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #e35555; color: #FFFFFF; font-size: 12px; font-weight: 700; position: absolute; top: -7px; right: -9px; } #headCoupon a > span{ display: none;} /** #headNav ************************************/ #header #headNav{ display: block; width: 100%; height: 60px; padding: 0; opacity: 1; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 100; webkit-transition: transform 0.4s ease; -moz-transition: transform 0.4s ease; -o-transition: transform 0.4s ease; transition: transform 0.4s ease; -webkit-transform: translate(-100%,0); -moz-transform: translate(-100%,0); -o-transform: translate(-100%,0); transform: translate(-100%,0) translateX(60px); -webkit-backface-visibility: hidden; backface-visibility: hidden; } #header #headNav.open{ height: 100vh; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } #noscriptMsg + #header #headNav, #cookieMsg + noscript + #header #headNav{ position: absolute; } #header #headNav #headNavBg{ display: block; width: 100%; background: rgba(0,0,0,.4); position: fixed; visibility: hidden; opacity: 0; top: 0; bottom: 0; left: 0; z-index: 3; webkit-transition: opacity 0.4s ease 0.2s; -moz-transition: opacity 0.4s ease 0.2s; -o-transition: opacity 0.4s ease 0.2s; transition: opacity 0.4s ease 0.2s; -webkit-transform: translate(-200vw, 0); -moz-transform: translate(-200vw, 0); -o-transform: translate(-200vw, 0); transform: translate(-200vw, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } #header #headNav.open #headNavBg{ visibility: visible; opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } #header #headNav .openBtn{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items:center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 60px; height: 60px; border-bottom: 2px solid #CCCCCC; background: #FFFFFF; cursor: pointer; position: absolute; z-index: 1000; right: 0; top: 0; webkit-transition: transform 0.4s ease; -moz-transition: transform 0.4s ease; -o-transition: transform 0.4s ease; transition: transform 0.4s ease; } #header #headNav > .openBtn::before{ content: ''; display: block; height: 2px; width: 20px; left: 20px; top: 29px; background-color: #333333; opacity: 1; position:absolute; webkit-transition: transform 0.2s ease,opacity 0.5s ease; -moz-transition: transform 0.2s ease,opacity 0.5s ease; -o-transition: transform 0.2s ease,opacity 0.5s ease; transition: transform 0.2s ease,opacity 0.5s ease; } #header #headNav > .openBtn::after{ content: ''; display: block; height: 2px; width: 20px; left: 20px; top: 21px; background-color: #333333; opacity: 1; position:absolute; webkit-transition: transform 0.2s ease,opacity 0.5s ease; -moz-transition: transform 0.2s ease,opacity 0.5s ease; -o-transition: transform 0.2s ease,opacity 0.5s ease; transition: transform 0.2s ease,opacity 0.5s ease; } #header #headNav > .openBtn > span{ display: block; height: 2px; width: 20px; left: 20px; top: 37px; background-color: #333333; opacity: 1; position:absolute; webkit-transition: opacity 0.5s ease; -moz-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; transition: opacity 0.5s ease; } #header #headNav.open > .openBtn::before{ opacity: 1; -webkit-transform: translateY(0) rotate(-45deg); -moz-transform: translateY(0) rotate(-45deg); -o-transform: translateY(0) rotate(-45deg); transform: translateY(0) rotate(-45deg); } #header #headNav.open > .openBtn::after{ opacity: 1; -webkit-transform: translateY(8px) rotate(45deg); -moz-transform: translateY(8px) rotate(45deg); -o-transform: translateY(8px) rotate(45deg); transform: translateY(8px) rotate(45deg); } #header #headNav.open > .openBtn > span{opacity: 0;} /** #headNavInner ************************************/ #header #headNav #headNavInner{ display: block; width: calc(100% - 60px); height: 100vh; padding: 0; background: #333333; opacity: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; position: relative; z-index: 100; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #header #headNav #headNavInner::after{ content: ''; display: block; width: 100%; height: 100px; } /*** #headLogin ***********/ #headLogin{ display: block; } #headLogin > dl{} #headLogin > dl > dt{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; height: 60px; padding: 0 30px 0 20px; border-bottom: 2px solid #CCCCCC; background: url("../img/common/icon_arrow_right_white.svg") calc(100% - 20px) center no-repeat; background-size: 7px auto; color: #FFFFFF; text-decoration: none; } #headLogin > dl > dt > em{ display: block; width: 16px; height: 23px; position: relative; margin-right: 12px; background: url("../img/common/icon_head_member_white.svg") 0 0 no-repeat; background-size: 16px auto; } #headLogin > dl > dt > em > img{display: none;} #headLogin > dl > dt > span{ display: block; width: calc(100% - 38px); font-size: 1.5rem; line-height: 1.4; padding-right: 20px; background-size: 13px auto; } #headLogin > dl > dd{ display: block; width: calc(100% - 60px); height: 100vh; padding: 0; background: #333333; opacity: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; position: fixed; top: 0; left: 0; z-index: 1000; webkit-transition: transform 0.4s ease; -moz-transition: transform 0.4s ease; -o-transition: transform 0.4s ease; transition: transform 0.4s ease; -webkit-transform: translate(-100vw,0); -moz-transform: translate(-100vw,0); -o-transform: translate(-100vw,0); transform: translate(-100vw,0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } #headLogin.open dl > dd{ visibility: visible; -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0); } #headLogin.open dl > dd::after{ content: ''; display: block; width: 100%; height: 100px; } #headLogin > dl > dd .navBack{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; height: 60px; padding: 0 20px 0 35px; border-bottom: 2px solid #CCCCCC; background: url("../img/common/icon_arrow_left_white.svg") 20px center no-repeat; background-size: 7px auto; font-size: 1.5rem; line-height: 1.4; color: #FFFFFF; text-decoration: none; } /*** memberGradeBox ***********/ #headLogin > dl > dd .memberGradeBox{ display: block; padding: 15px 0 15px 20px; background: #FFFFFF; position: relative; } #headLogin > dl > dd .memberGradeBox::before{ content: ''; display: block; width: 100%; height: 4px; position: absolute; top: 0; left: 0; } #headLogin > dl > dd .memberGradeBox.bronze::before{ background: #98afb8; background: -moz-linear-gradient(left, #a17576 30%, #b49495 50%, #a17576 70%); background: -webkit-linear-gradient(left, #a17576 30%,#b49495 50%,#a17576 70%); background: linear-gradient(to right, #a17576 30%,#b49495 50%,#a17576 70%); } #headLogin > dl > dd .memberGradeBox.silver::before{ background: #98afb8; background: -moz-linear-gradient(left, #a3a3a3 30%, #d9d9d9 50%, #a3a3a3 70%); background: -webkit-linear-gradient(left, #a3a3a3 30%,#d9d9d9 50%,#a3a3a3 70%); background: linear-gradient(to right, #a3a3a3 30%,#d9d9d9 50%,#a3a3a3 70%); } #headLogin > dl > dd .memberGradeBox.gold::before{ background: #98afb8; background: -moz-linear-gradient(left, #c5a56c 30%, #e5d4b4 50%, #c5a56c 70%); background: -webkit-linear-gradient(left, #c5a56c 30%,#e5d4b4 50%,#c5a56c 70%); background: linear-gradient(to right, #c5a56c 30%,#e5d4b4 50%,#c5a56c 70%); } #headLogin > dl > dd .memberGradeBox.platinam::before{ background: #98afb8; background: -moz-linear-gradient(left, #98afb8 30%, #b1c3cb 50%, #98afb8 70%); background: -webkit-linear-gradient(left, #98afb8 30%,#b1c3cb 50%,#98afb8 70%); background: linear-gradient(to right, #98afb8 30%,#b1c3cb 50%,#98afb8 70%); } #headLogin > dl > dd .memberGradeBox dl.nowGrade{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; width: 100%; } #headLogin > dl > dd .memberGradeBox dl.nowGrade > dt{ display: block; width: 110px; font-size: 1.4rem; text-align: left; } #headLogin > dl > dd .memberGradeBox dl.nowGrade > dd{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; width: calc(100% - 110px); height: 25px; padding-left: 28px; font-size: 1.6rem; font-weight: 700; white-space: nowrap; } #headLogin > dl > dd .memberGradeBox.bronze dl.nowGrade > dd{ background: url("../img/common/icon_rank_bronze.svg") left calc(50% - 1px) no-repeat; background-size: 22px auto; color: #a17576; } #headLogin > dl > dd .memberGradeBox.silver dl.nowGrade > dd{ background: url("../img/common/icon_rank_silver.svg") left calc(50% - 1px) no-repeat; background-size: 22px auto; color: #a3a3a3; } #headLogin > dl > dd .memberGradeBox.gold dl.nowGrade > dd{ background: url("../img/common/icon_rank_gold.svg") left calc(50% - 1px) no-repeat; background-size: 22px auto; color: #c5a56c; } #headLogin > dl > dd .memberGradeBox.platinam dl.nowGrade > dd{ background: url("../img/common/icon_rank_platinum.svg") left calc(50% - 1px) no-repeat; background-size: 22px auto; color: #98afb8; } #headLogin > dl > dd .memberGradeBox > p{ padding-top: 6px; font-size: 1.4rem; } #headLogin > dl > dd .memberGradeBox > p > strong{font-weight: 700;} /*** headMypageNav ***********/ #headLogin > dl > dd ul.headMypageNav, #headLogin > dl > dd ul.headLoginNav{ display: block;} #headLogin > dl > dd ul.headMypageNav > li, #headLogin > dl > dd ul.headLoginNav > li{ display: block; border-bottom: 1px solid #555555; } #headLogin > dl > dd ul.headMypageNav > li > a, #headLogin > dl > dd ul.headLoginNav > li > a{ display: block; width: 100%; padding: 15px 20px; font-size: 1.5rem; line-height: 1.4; color: #FFFFFF; text-decoration: none; } #headLogin > dl > dd ul.headLoginNav > li.btnWhite > a{ display: block; width: 100%; height: auto; padding: 15px 20px; font-size: 1.5rem; line-height: 1.4; color: #FFFFFF; text-decoration: none; font-weight: normal; border: none; border-radius: 0; background: inherit; text-align: left; box-shadow: none; } #headLogin > dl > dd ul.headLoginNav > li > a.arrowLinkWhite::before{ display: none; } /** #glnav ************************************/ #glnav{ display: block; width: 100%; } /** navBack ***************/ #glnav .navBack{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; height: 60px; padding: 0 20px 0 35px; border-bottom: 2px solid #CCCCCC; background: url("../img/common/icon_arrow_left_white.svg") 20px center no-repeat; background-size: 7px auto; font-size: 1.5rem; line-height: 1.4; color: #FFFFFF; text-decoration: none; } /** level2 ***************/ #glnav .level2{ display: block; } #glnav .level2 > li{ display: block; border-bottom: 1px solid #555555; } #glnav .level2 > li > span{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; height: 60px; padding: 0 30px 0 20px; font-size: 1.5rem; line-height: 1.4; background: url("../img/common/icon_arrow_right_white.svg") calc(100% - 20px) center no-repeat; background-size: 7px auto; color: #FFFFFF; text-decoration: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #glnav .level2 > li > a{ display: block; width: 100%; padding: 15px 20px; font-size: 1.5rem; line-height: 1.4; color: #FFFFFF; text-decoration: none; } #glnav .level2 > li > .level3{ display: block; width: calc(100% - 60px); height: 100vh; padding: 0; background: #333333; opacity: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; position: fixed; top: 0; left: 0; z-index: 1000; webkit-transition: transform 0.4s ease; -moz-transition: transform 0.4s ease; -o-transition: transform 0.4s ease; transition: transform 0.4s ease; -webkit-transform: translate(-100vw,0); -moz-transform: translate(-100vw,0); -o-transform: translate(-100vw,0); transform: translate(-100vw,0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } #glnav .level2 > li.open > .level3{ visibility: visible; -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0); } #glnav .level2 > li > .level3::after{ content: ''; display: block; width: 100%; height: 100px; } #glnav .level2 > li > .level3 a.arrowLinkWhite{ font-size: 1.5rem; color: #FFFFFF; text-decoration: none; padding: 15px 20px 15px; line-height: 1.4; position: relative; } #glnav .level2 > li > .level3 a.arrowLinkWhite::before{ content: ''; display: none; } #glnav .level2 > li > .level3 > ul{ display: block; width: 100%; max-width: 860px; } #glnav .level2 > li > .level3 > ul > li{ display: block; border-bottom: 1px solid #555555; } #glnav .level2 > li > .level3 > ul > li > a{ display: block; width: 100%; padding: 15px 20px; font-size: 1.5rem; line-height: 1.4; color: #FFFFFF; text-decoration: none; } #glnav .level2 > li > .level3 > ul > li.imgLink{} #glnav .level2 > li > .level3 > ul > li.imgLink > a{padding-left: 40px;} #glnav .level2 > li > .level3 > ul > li.imgLink > a > figure{display: none;} #glnav .level2 > li > .level3 > ul > li.category{padding-left:20px;} #glnav .level2 > li > .level3 .closeBtn{ display: none;} #glnav .level2 > li > .level3 > ul > li > ul{display: none;} #glnav .level2 > li > .level3 > dl{ display: block;} #glnav .level2 > li > .level3 > dl > dt{ display: block; border-bottom: 1px solid #555555; } #glnav .level2 > li > .level3 > dl > dt > a{ display: block; width: 100%; padding: 15px 20px 15px 20px; font-size: 1.5rem; line-height: 1.4; color: #FFFFFF; text-decoration: none; } #glnav .level2 > li > .level3 > dl > dd{} #glnav .level2 > li > .level3 > dl > dd > ul{display: block;} #glnav .level2 > li > .level3 > dl > dd > ul > li{ display: block; border-bottom: 1px solid #555555; } #glnav .level2 > li > .level3 > dl > dd > ul > li > a{ display: block; width: 100%; padding: 15px 20px 15px 40px; font-size: 1.5rem; line-height: 1.4; color: #FFFFFF; text-decoration: none; } /** #headUtility ************************************/ #headUtility{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; padding-top: 30px; text-align: center; max-width: 260px; margin: 0 auto; } #headUtility > li{ display:block; width: 50%; font-size: 1.4rem; text-align: center; } #headUtility > li:nth-of-type(1){ border-right: 1px solid #FFFFFF; } #headUtility > li > a{ font-size: 1.4rem; color: #FFFFFF; text-decoration: none; } /************************************** #importantNotices **************************************/ #importantNotices{ display: block; width: 100%; padding: 20px; background: #f7f7f7; } #importantNotices > dl{ display: block; width: 100%; } #importantNotices > dl > dt{ display: block; font-size: 1.4rem; line-height: 1.4; font-weight: 700; color: #e35555; text-align: left; margin-bottom: 10px; } #importantNotices > dl > dd{ display: block; text-align: left; } #importantNotices > dl > dd > ul{} #importantNotices > dl > dd > ul > li{ display: block; margin-bottom: 8px; font-size: 1.4rem; line-height: 1.4; } #importantNotices > dl > dd > ul > li:nth-last-of-type(1){margin-bottom: 0;} #importantNotices > dl > dd > ul > li > span{} #importantNotices > dl > dd > ul > li > a{text-decoration: none;} #importantNotices > dl > dd > ul > li time{ display: inline-block; text-decoration: none; text-indent: -0.5em; } #importantNotices > dl > dd > ul > li > a > span{text-decoration: underline;} /************************************** #footer **************************************/ #footer{ width: 100%; padding: 0 0 40px; background: #eeeeee; position: relative; } #footer.simple{ margin-top: 20px; padding: 10px 20px; text-align: center; background: #FFFFFF; border-top:1px solid #CCCCCC; color: #999999; } /*** footNav **************/ #footer #footNav{ display: block; width: 100%; margin: 0 auto; padding: 40px 20px 35px; } #footer #footNav > .footLine{ display: block; } #footer #footNav > .footLine:nth-of-type(1){ border-top: 1px solid #cccccc; } #footer #footNav > .footLine > dl{ display: block; border-bottom: 1px solid #cccccc; } #footer #footNav > .footLine > dl > dt{ display: block; padding: 17px 20px 17px 0; font-size: 1.4rem; font-weight: 700; position: relative; } #footer #footNav > .footLine > dl > dt::before, #footer #footNav > .footLine > dl > dt::after{ content: ''; display: block; width: 10px; height: 2px; background: #333333; position: absolute; webkit-transition: transform 0.2s ease,opacity 0.5s ease; -moz-transition: transform 0.2s ease,opacity 0.5s ease; -o-transition: transform 0.2s ease,opacity 0.5s ease; transition: transform 0.2s ease,opacity 0.5s ease; } #footer #footNav > .footLine > dl > dt::before{ top: 50%; right: 0; } #footer #footNav > .footLine > dl > dt::after{ transform: rotate(90deg); top: 50%; right: 0; } #footer #footNav > .footLine > dl.open > dt::after{ opacity: 0; transform: rotate(0); } #footer #footNav > .footLine > dl > dd{ display: none; padding-bottom: 17px; } #footer #footNav > .footLine > dl > dd > ul{} #footer #footNav > .footLine > dl > dd > ul > li{ display: block; font-size: 1.4rem; line-height: 1.4; font-weight: 700; } #footer #footNav > .footLine > dl > dd > ul > li:nth-last-of-type(1){margin-bottom: 0;} #footer #footNav > .footLine > dl > dd > ul > li > a, #footer #footNav > .footLine > dl > dd > ul > li > span{ display: block; padding: 12px 20px 12px 20px; text-decoration: none; } #footer #footNav > .footLine > ul{} #footer #footNav > .footLine > dl + ul{padding-top: 40px;} #footer #footNav > .footLine > ul > li{margin-bottom: 20px; font-weight: 700;} #footer #footNav > .footLine > ul > li:nth-last-of-type(1){margin-bottom: 0;} /** footUnder ****************/ #footer .footUnder{ display: block; width: 100%; margin: 0 auto; } #footer .footUnder .copyRightArea{ display: block; } #footer .footUnder .copyRightArea .footLogo{ display: block; width: 230px; margin: 0 auto 15px; } #footer .footUnder .copyRightArea .footLogo > a{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: flex-end; align-items: flex-end; -webkit-justify-content: center; justify-content: center; width: 100%; } #footer .footUnder .copyRightArea .footLogo > a > img{display: block;} #footer .footUnder .copyRightArea .footLogo > a > img:nth-of-type(1){width: 97px; margin-right: 10px} #footer .footUnder .copyRightArea .footLogo > a > img:nth-of-type(2){width: calc(100% - 107px);} #footer .footUnder .copyRightArea .footLogoCresc{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: flex-end; align-items: flex-end; -webkit-justify-content: center; justify-content: center; width: 230px; } #footer .footUnder .copyRightArea .footLogoCresc > img{display: block;} #footer .footUnder .copyRightArea .footLogoCresc > img:nth-of-type(1){width: 97px; margin-right: 10px} #footer .footUnder .copyRightArea .footLogoCresc > img:nth-of-type(2){width: 123px;} #footer .footUnder .copyRightArea .copyRight{ display: block; padding: 0 20px; font-size: 0.7rem; line-height: 1.4; text-align: center; color: #999999; letter-spacing: -0.026em; } #footer .footUnder .certificationMarks{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: flex-end; align-items: flex-end; -webkit-justify-content: center; justify-content: center; margin-bottom: 40px; } #footer .footUnder .certificationMarks > li{ display: block; margin-right: 25px; } #footer .footUnder .certificationMarks > li:nth-last-of-type(1){margin-right: 0;} #footer .footUnder .certificationMarks > li.pmark{ width: 58px;} #footer .footUnder .certificationMarks > li.jdma{ width: 100px;} #footer .footUnder .certificationMarks > li img{display: block; width: 100%; height: auto;} /** normalLp・formLp footUnder ****************/ #footer.formLp #footNav > .footLine > dl > dd{ display: block; } #footer.formLp #footNav > .footLine > dl > dt{ display: none; } #footer.formLp #footNav > .footLine > dl > dd{ padding-bottom: 0px; } #footer.formLp #footNav > .footLine > dl > dd > ul > li > a, #footer.formLp #footNav > .footLine > dl > dd > ul > li > span{ padding-left: 0px; } #footer.formLp #footNav > .footLine > dl > dd > ul > li > a.arrowLink, #footer.formLp #footNav > .footLine > dl > dd > ul > li > span.arrowLink{ padding-left: 25px; } /************************************** btnPageTop **************************************/ #btnPageTop{ display: block; width: 100%; margin: 0 auto; position: relative; } #btnPageTop > a{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 40px; height: 40px; border-radius: 2px; opacity: 0; background: rgba(51,51,51,.5); position: absolute; right: 20px; bottom: 0; z-index: 10; webkit-transition: opacity 0.2s ease,transform 0.2s ease; -moz-transition: opacity 0.2s ease,transform 0.2s ease; -o-transition: opacity 0.2s ease,transform 0.2s ease; transition: opacity 0.2s ease,transform 0.2s ease; -webkit-transform: translate(0, 80px); -moz-transform: translate(0, 80px); -o-transform: translate(0, 80px); transform: translate(0, 80px); /** 【FFHC v1.0】【2.3.1. 決済導線】カート画面のボタン位置:5508 Start */ margin-bottom: 65px; /** 【FFHC v1.0】【2.3.1. 決済導線】カート画面のボタン位置:5508 End. */ } #btnPageTop.view > a{ opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } #btnPageTop.fixed > a{ position: fixed; bottom: 40px; } #btnPageTop.fixedFootOpen > a{ position: absolute; bottom: 0; z-index: 1; } #btnPageTop > a > img{ display: block; width: 16px; height: auto; } /************************************** #breadcrumbs **************************************/ #breadcrumbs{ display: none;} #breadcrumbsSP{ display: block; width: 100%; padding: 20px; } #breadcrumbsSP > ol{ display: block; } #breadcrumbsSP > ol > li{ display: inline; font-size: 1.2rem; line-height: 2; } #breadcrumbsSP > ol > li::after { content: '\>'; padding: 0 5px; } #breadcrumbsSP > ol > li:last-child::after { display: none; } #breadcrumbsSP > ol > li:last-child a{ text-decoration: none; } /************************************** main **************************************/ #main{ padding: 0; position: relative; } #header.simple + #main{margin-top: -20px;} #main img{max-width: 100%;} #main .mainTTL{ display: block; width: 100%; padding: 50px 20px 30px; margin: 0 auto; font-size: 2.2rem; line-height: 1.4; font-weight: 700; } #main .subTTL, #dialog-container .subTTL{ display: block; width: 100%; padding: 60px 20px 30px; margin: 0 auto; font-size: 2.0rem; line-height: 1.4; font-weight: 700; } #main .mainTTL + .subTTL{ padding-top: 50px;} #dialog-container .mainTTL + .subTTL{ padding-top: 50px;} #main .modalBox .subTTL{padding-top: 0;} #dialog-container .modalBox .subTTL{padding-top: 0;} #main .smallTTL{ display: block; width: 100%; padding: 50px 20px 30px; margin: 0 auto; font-size: 1.8rem; line-height: 1.4; font-weight: 700; } #main .brandSearchTTL{ font-size: 1.6rem; padding: 0px 0 0px; } #main .subTTL + .smallTTL{padding-top: 20px;} #dialog-container .subTTL + .smallTTL{padding-top: 20px;} .modalInner .ledeBox + .smallTTL{padding-top: 20px;} #main .ledeBox + .smallTTL{padding-top: 0;} #dialog-container .ledeBox + .smallTTL{padding-top: 0;} #main .cautionBox + .smallTTL{padding-top: 20px;} #dialog-container .cautionBox + .smallTTL{padding-top: 20px;} .modalInner .cautionBox + .smallTTL{padding-top: 20px;} #main .subSmallTTL{ display: block; width: calc(100% - 40px); padding-left: 10px; border-left: 4px solid #999999; margin: 40px auto 20px; font-size: 1.6rem; line-height: 1.4; font-weight: 700; } #main .smallTTL + .subSmallTTL{margin-top: 10px;} #main .ledeBox, #dialog-container .ledeBox, .modalInner .ledeBox{ display: block; width: calc(100% - 40px); margin: 0 auto 40px; font-size: 1.4rem; line-height: 1.4; } #main .modalBox .ledeBox, #dialog-container .modalBox .ledeBox{ margin-bottom: 20px; } /*【FFHC v1.0】【初回ログイン時にログイン画面に注意書きを出す】:5488 Start*/ main#main section#userSection > div.txLoginScreen{ display: block; margin-top: 50px; margin-bottom: -10px; } /*【FFHC v1.0】【初回ログイン時にログイン画面に注意書きを出す】:5488 End.*/ /************************************** stepFlow **************************************/ /** 【FFHC v1.0】メアドリマインダ画面のステップフロー周りの修正:#5928 Start */ div.cusStepFlow{ margin-bottom: 80px; } /** 【FFHC v1.0】メアドリマインダ画面のステップフロー周りの修正:#5928 End. */ /** 【FFHC v1.0】会員登録画面のステップフロー周りのデザイン調整:#5927 Start */ div.cusStepFlowRegister{ margin-top: 40px; } /** 【FFHC v1.0】会員登録画面のステップフロー周りのデザイン調整:#5927 End. */ .stepFlow{ display: block; width: 100%; margin: 0 auto; position: relative; z-index: 0; } .stepFlow + .ledeBox{padding-top: 60px;} #main .stepFlow + * > .subTTL{padding-top: 50px;} .stepFlow > ol{ display: table; position: relative; margin: 0 auto; } .stepFlow.cart > ol{} .stepFlow > ol::after{ content: ' '; display: block; width: calc(100% - 50px); height: 1px; position: absolute; top: 26px; left: 25px; background: #cccccc; z-index: -1; } .stepFlow.cart > ol::after{ width: calc(100% - 40px); left: 20px; } .stepFlow > ol > li{ display: table-cell; width: 100px; font-size: 14px; line-height: 1.25; text-align: center; vertical-align: text-top; position: relative; } .stepFlow.cart > ol > li{ width: 90px; } .stepFlow > ol > li.current{ color: #e35555; font-weight: 700; } .stepFlow > ol > li > em{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 50px; height: 50px; margin: 0 auto 10px; border: 1px solid #CCCCCC; border-radius: 50%; background: #FFFFFF; font-size: 20px; font-weight: 700; line-height: 1; } .stepFlow > ol > li.current > em{ border: 2px solid #e35555; } .stepFlow > ol > li > span > a{ text-decoration: none; } /**【FFHC v1.0】SP決済導線内ステップフローの改行位置がずれている:#5655 Start*/ .stepFlow > ol > li.active > span a, .stepFlow > ol > li.active > span{ color: #e35555; } /**【FFHC v1.0】SP決済導線内ステップフローの改行位置がずれている:#5655 End.*/ /************************************** requiredCautionMsgBox **************************************/ .requiredCautionBox{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: flex-start; justify-content: flex-start; width: calc(100% - 40px); padding: 15px; margin: 0 auto 20px; background: #fbe6e6; font-size: 1.4rem; line-height: 1.4; color: #e35555; } .formTable + .requiredCautionBox{margin-top: 30px;} .stepFlow + .requiredCautionBox{margin-top: 30px;} .requiredCautionBox > em{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 23px; margin-right: 10px; } .requiredCautionBox > em > img{display: block; width: 100%; height: auto;} .requiredCautionBox > .msg{display: block; width: calc(100% - 33px); padding-top: 3px} /** requiredCautionAccordionBox ********/ .requiredCautionAccordionBox{ display: block; width: calc(100% - 40px); margin: 0 auto 20px; background: #fbe6e6; font-size: 1.4rem; line-height: 1.4; color: #e35555; } .requiredCautionAccordionBox dl > dt{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; width: 100%; padding: 15px 40px 15px 15px; background: #fbe6e6; font-size: 1.4rem; line-height: 1.4; color: #e35555; position: relative; cursor: pointer; } .requiredCautionAccordionBox > dl > dt > em{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 23px; margin-right: 10px; } .requiredCautionAccordionBox dl > dt > em > img{display: block; width: 100%; height: auto;} .requiredCautionAccordionBox dl > dt > span{display: block; width: calc(100% - 33px); padding-top: 3px;} .requiredCautionAccordionBox > dl > dt::before, .requiredCautionAccordionBox > dl > dt::after{ content: ''; display: block; width: 11px; height: 2px; background: #e35555; position: absolute; webkit-transition: transform 0.2s ease,opacity 0.5s ease; -moz-transition: transform 0.2s ease,opacity 0.5s ease; -o-transition: transform 0.2s ease,opacity 0.5s ease; transition: transform 0.2s ease,opacity 0.5s ease; } .requiredCautionAccordionBox > dl > dt::before{ top: calc(50% - 1px); right: 15px; } .requiredCautionAccordionBox > dl > dt::after{ transform: rotate(90deg); top: calc(50% - 1px); right: 15px; } .requiredCautionAccordionBox > dl.open > dt::after{ opacity: 0; transform: rotate(0); } .requiredCautionAccordionBox > dl > dd{ display: none; padding: 0 15px 15px 47px; } /************************************** formTable **************************************/ .formTable{ display: block; width: calc(100% - 40px); margin: 0 auto; border-top: 1px solid #cccccc; } .formTable > dl{ display: block; width: 100%; border-bottom: 1px solid #cccccc; } .formTable > dl.cardSecurityNotRequired{ display: none; } .formTable > dl > dt{ display: block; width: 100%; padding: 15px; background: #eeeeee; font-size: 1.4rem; line-height: 1.4; vertical-align: middle; text-align: left; position: relative; } .formTable > dl > dt >div.paymentTitle{ display: flex; justify-content: space-between; -webkit-justify-content: space-between; line-height:20px } .formTable > dl > dt > span{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; width: 100%; min-height: 22px; position: relative; } .formTable > dl.required > dt > span{ padding-right: 40px; } .formTable > dl.required > dt > span::after{ content: '必須'; display: block; width: 40px; height: 22px; border: 1px solid #e35555; background: #FFFFFF; font-size: 12px; line-height: 20px; text-align: center; color: #e35555; position: absolute; right: 0; top: calc(50% - 11px); } .formTable > dl.changing > dt > span{ padding-right: 53px; } .formTable > dl.changing > dt > span::after{ content: '変更中'; display: block; width: 53px; height: 22px; border: 1px solid #e35555; background: #FFFFFF; font-size: 12px; line-height: 20px; text-align: center; color: #e35555; position: absolute; right: 0; top: calc(50% - 11px); } .formTable > dl > dd{ display: block; width: 100%; box-sizing: border-box; padding: 20px 15px; vertical-align: middle; background: #FFFFFF; border-left:1px solid #FFFFFF; font-size: 1.4rem; line-height: 1.4; text-align: left; } .formTable > dl > dd .password .form-caption{ display: block; width: 100%; box-sizing: border-box; vertical-align: middle; background: #FFFFFF; border-left:1px solid #FFFFFF; font-size: 1.2rem; line-height: 2; text-align: left; } .formTable > dl.err > dd{ background: #fbe6e6; } .formTable > dl > dd p{margin-bottom: 10px;} .formTable > dl > dd p:nth-last-child(1){margin-bottom: 0;} .formTable > dl > dd .inputArea + p{margin-top: 15px;} .formTable > dl > dd p.note{margin-top: 9px;} .formTable > dl > dd p.note:nth-child(1){margin-top: 0;} .formTable > dl > dd p.errMsg{ color: #e35555; margin-bottom: 10px; } .formTable > dl > dd p.note{ font-size: 1.2rem; line-height: 1.4; } .formTable > dl > dd p.paymentSlip{margin-top: 9px;} .formTable > dl > dd p.matomeSlip{margin-top: 9px;} .formTable > dl > dd p.matomeSlip > span{ margin-top: 9px; display: block;} .formTable > dl > dd .itemName{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; } .formTable > dl > dd .itemName > figure{ display: block; width: 90px; margin-right: 15px; } .formTable > dl > dd .itemName > figure img{display: block; width: 100%; height: auto;} .formTable > dl > dd .itemName > span{ display: block; width: calc(100% - 105px); } .formTable > dl > dd .itemName > .text{ display: block; width: calc(100% - 105px); } .formTable > dl > dd .itemName > .text > p{margin-bottom: 0;} .formTable > dl > dd .itemName > .text .price{font-weight: 700;} .formTable > dl > dd p.afterDate{ padding-top: 15px; color: #e35555; position: relative; } .formTable > dl > dd p.afterDate::before{ content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 7px 6px 0 6px; border-color: #e35555 transparent transparent transparent; position: absolute; top: 0; left: 6em; } .formTable .labelText{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; margin-bottom: 10px; } .formTable .statusLabel{ display: inline-block; font-size: 1.2rem; line-height: 1; padding: 5px 10px 4px; background: #eeeeee; vertical-align: top; } .formTable .labelText > .statusLabel{margin-left: 15px;} .formTable .inputArea{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; } label.name{ display: block; width: 100%; } label.name + label.name{ margin-top:15px;} label.name > span{display: inline-block; width: 45px;} label.name > input[type="text"]{ width: calc(100% - 45px); } .dateSelect{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; } .dateSelect > label{margin-right: 12px} .dateSelect > .year, .dateSelect > .month, .dateSelect > .date{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; } .dateSelect > .year label, .dateSelect > .month label, .dateSelect > .date label, .dateSelectCredit > .year label, .dateSelectCredit > .month label{margin-right: 12px;} .dateSelect > .year{width: 100%; margin-bottom: 15px;} .dateSelect > .date{ margin-left: 18px; } .error-messageCredit{ padding: 0px; position: absolute; } label.tel{width: 100%;} label.zipCode{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; width: 100%; } label.zipCode > span{width: 35px; padding-left: 5px;} label.zipCode > input{width: calc(100% - 35px);} label.password{width: 100%;} label.password + label.checkBox{ margin-top: 20px; } .formTable > dl > dd > dl{ display: block; margin-bottom: 15px; } .formTable > dl > dd > dl:nth-last-child(1){margin-bottom: 0;} .formTable > dl > dd > dl > dt{ font-size: 1.5rem; line-height: 1.4; font-weight: 700; margin-bottom: 10px; } /** deliveDateSelect ****************/ .formTable > dl > dd .deliveDateSelect{} .formTable > dl > dd .deliveDateSelect > .wish{ /* display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; */ display: block; width: 100%; margin-top: 10px; } .formTable > dl > dd .deliveDateSelect > .wish > .selectBox, .formTable > dl > dd .deliveDateSelect > .wish > #datePickerOuter{ display: block; width: calc(100% - 36px); margin-left: 36px; margin-top: 5px; } /** checkList ****************/ .formTable > dl > dd .checkList{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; margin-top: -10px; } .formTable > dl > dd .checkList > li{ display: block; margin-top: 10px; margin-right: 20px; } /** changeBox ****************/ .formTable > dl > dd .changeBoxOuter{ display: block; } .formTable > dl > dd .changeBoxOuter > .data{ display: block; } .formTable > dl > dd .changeBoxOuter > .changeOpenBtn{ display: block; width: 100%; margin-top: 20px; } .formTable > dl > dd .changeBoxOuter > .changeOpenBtn > span{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 100%; height: 40px; font-size: 1.4rem; line-height: 1; font-weight: 700; border: 1px solid #333333; padding-left: 22px; color: #333333; background: #FFFFFF; text-align: center; text-decoration: none; position: relative; cursor: pointer; } .formTable > dl > dd .changeBoxOuter > .changeOpenBtn > span > em{ display: inline-block; width: 12px; height: 38px; margin-left: 10px; background: url("../img/common/icon_arrow_bottom_black.svg") center center no-repeat; background-size: 12px auto; -webkit-transition: background 0.2s ease, color 0.2s ease; -moz-transition: transform 0.2s ease; -o-transition: transform 0.2s ease; transition: transform 0.2s ease; } .formTable > dl > dd .changeBoxOuter > .changeOpenBtn.open > span > em{ transform: rotate(180deg); } .formTable > dl > dd .changeList{ display: none; padding: 15px; border: 1px solid #333333; border-top: none; } /** changeItemList *****/ .formTable > dl > dd .changeList > ul.changeItemList{ display: block; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; } .formTable > dl > dd .changeList > ul.changeItemList > li{ display: block; padding: 20px 0 20px 0; border-bottom: 1px dotted #CCCCCC; } .formTable > dl > dd .changeList > ul.changeItemList > li:nth-last-of-type(1){ border-bottom: none; } .formTable > dl > dd .changeList > ul.changeItemList > li > label{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; height: 100%; cursor: pointer; } .formTable > dl > dd .changeList > ul.changeItemList > li > label> input{display: none;} .formTable > dl > dd .changeList > ul.changeItemList > li > label > .item{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; padding-left: 25px; position: relative; } .formTable > dl > dd .changeList > ul.changeItemList > li > label > .item > figure{ display: block; width: 90px; margin-right: 10px; } .formTable > dl > dd .changeList > ul.changeItemList > li > label > .item > figure img{display: block; width: 100%; height: auto;} .formTable > dl > dd .changeList > ul.changeItemList > li > label > .item > .text{ display: block; width: calc(100% - 100px); line-height: 1.4; } .formTable > dl > dd .changeList > ul.changeItemList > li > label > .item > .text > p{margin-bottom: 0;} .formTable > dl > dd .changeList > ul.changeItemList > li > label > .item > .text .price{font-weight: 700; padding-top: 5px;} .formTable > dl > dd .changeList > ul.changeItemList > li > label > .item::before{ content: ''; display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; border: 1px solid #CCCCCC; vertical-align: middle; text-align: center; position: absolute; left: 0; top: calc(50% - 8px); z-index: 2; } .formTable > dl > dd .changeList > ul.changeItemList > li > label > .item::after{ content: ' '; display: block; width: 8px; height: 8px; border-radius: 50%; background: #e35555; position: absolute; left: 4px; top: calc(50% - 4px); z-index: 2; opacity: 0; transform: scale(0); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .formTable > dl > dd .changeList > ul.changeItemList > li > label > input:checked + .item::after{ opacity: 1; transform: scale(1); } /** freeComment **/ .formTable > dl > dd .changeList .freeComment{ display: block; padding: 30px 0 0 0; } .formTable > dl > dd .changeList .freeComment > .boxTwoC{ display: block; } .formTable > dl > dd .changeList .freeComment > .boxTwoC > figure{ width: 100%; margin-bottom: 30px; } .formTable > dl > dd .changeList .freeComment > .boxTwoC > figure img{display: block; width: 100%; height: auto;} .formTable > dl > dd .changeList .freeComment > .boxTwoC > .text{} .formTable > dl > dd .changeList .freeComment .itemContactBox{ display: block; width: 100%; padding-top: 20px; text-align: center; } .formTable > dl > dd .changeList .freeComment .itemContactBox > dl{} .formTable > dl > dd .changeList .freeComment .itemContactBox > dl > dt{ font-size: 1.6rem; margin-bottom: 5px; } .formTable > dl > dd .changeList .freeComment .itemContactBox > dl > dd{ display: block; } .formTable > dl > dd .changeList .freeComment .itemContactBox > dl > dd > .telNum{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; margin-bottom: 10px; } .formTable > dl > dd .changeList .freeComment .itemContactBox > dl > dd > .telNum > em{ display: block; width: 28px; margin-right: 10px; } .formTable > dl > dd .changeList .freeComment .itemContactBox > dl > dd > .telNum > em > img{display: block; width: 100%; height: auto;} .formTable > dl > dd .changeList .freeComment .itemContactBox > dl > dd > .telNum > span{ display: block; font-size: 2.0rem; font-weight: 700; line-height: 1; } .formTable > dl > dd .changeList .freeComment .itemContactBox > dl > dd > .telNum .reception{font-size: 1.2rem;} /** nextShippingSelect **/ .formTable > dl > dd .nextShippingSelect{} .formTable > dl > dd .nextShippingSelect .radioBox + .radioBox{margin-left: 15px;} .formTable > dl > dd .nextShippingSelect .helpBox{ text-align: right; margin-top: 20px; } /** intervalChange **/ .formTable > dl > dd .changeList ul.intervalChange{ display: block; } .formTable > dl > dd .changeList ul.intervalChange > li{ margin-bottom: 30px; } .formTable > dl > dd .changeList ul.intervalChange > li:nth-last-of-type(1){margin-bottom: 0;} .formTable > dl > dd .changeList ul.intervalChange > li > .intervalParent{ display: block; } .formTable > dl > dd .changeList ul.intervalChange > li > .intervalParent > .radioBox{} .formTable > dl > dd .changeList ul.intervalChange > li > .intervalParent > .intervalDetail{ padding: 10px 0 0 34px; } .formTable > dl > dd .changeList ul.intervalChange > li > .intervalParent > .intervalDetail > .selectBox{ display: inline-block; } .formTable > dl > dd .changeList ul.intervalChange > li > ul.intervalChild{ display: block; width: 100%; background: #f7f7f7; padding: 15px; margin-top: 20px; } .formTable > dl > dd .changeList ul.intervalChange > li > ul.intervalChild > li{ margin-bottom: 20px; } .formTable > dl > dd .changeList ul.intervalChange > li > ul.intervalChild > li:nth-last-of-type(1){margin-bottom: 0;} .formTable > dl > dd .changeList ul.intervalChange > li > ul.intervalChild > li > .radioBox{ display: block; } .formTable > dl > dd .changeList ul.intervalChange > li > ul.intervalChild > li > .selectBox{ display: inline-block; margin-top: 10px; padding-left: 34px; } .formTable > dl > dd .changeList ul.intervalChange > li > ul.intervalChild > li > .selectWeekDay{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; padding-left: 34px; padding-top: 10px; } .formTable > dl > dd .changeList ul.intervalChange > li > ul.intervalChild > li > .selectWeekDay > .selectBox{ width: calc(50% - 10px); margin-right: 10px; margin-bottom: 5px; } .formTable > dl > dd .changeList ul.intervalChange > li > ul.intervalChild > li > .selectWeekDay > .selectBox:nth-of-type(2){margin-right: 0;} /** adderChange **/ .formTable > dl > dd .changeList .adderChange{ padding-top: 10px; padding-bottom: 15px; } .formTable > dl > dd .changeList ul.adderChangeList{ border-top: 1px dotted #CCCCCC; } .formTable > dl > dd .changeList ul.adderChangeList + .closeText{margin-top: 0;} .formTable > dl > dd .changeList .adderChangeList li{ display: block; padding: 20px 0 20px 0; border-bottom: 1px dotted #CCCCCC; } /**【FFHC v1.0】【SP　定期変更画面のスタイル修正】#5903 Start.*/ /*.formTable > dl > dd .changeList .adderChangeList li:nth-of-type(2n + 1):nth-last-of-type(2),*/ /**【FFHC v1.0】【SP　定期変更画面のスタイル修正】#5903 End.*/ .formTable > dl > dd .changeList .adderChangeList li:nth-last-of-type(1){ border-bottom: none; } .formTable > dl > dd .changeList .adderChange > label > input, .formTable > dl > dd .changeList .adderChangeList li > label > input{display: none;} .formTable > dl > dd .changeList .adderChange > label > .adder, .formTable > dl > dd .changeList .adderChangeList li > label > .adder{ display: block; padding-left: 25px; position: relative; } .formTable > dl > dd .changeList .adderChange > label > .adder::before, .formTable > dl > dd .changeList .adderChangeList li > label > .adder::before{ content: ''; display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; border: 1px solid #CCCCCC; vertical-align: middle; text-align: center; position: absolute; left: 0; top: 2px; z-index: 2; } .formTable > dl > dd .changeList .adderChange > label > .adder::after, .formTable > dl > dd .changeList .adderChangeList li > label > .adder::after{ content: ' '; display: block; width: 8px; height: 8px; border-radius: 50%; background: #e35555; position: absolute; left: 4px; top: 6px; z-index: 2; opacity: 0; transform: scale(0); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .formTable > dl > dd .changeList .adderChange > label > input:checked + .adder::after, .formTable > dl > dd .changeList .adderChangeList li > label > input:checked + .adder::after{ opacity: 1; transform: scale(1); } /** closeText **/ .formTable > dl > dd .changeList .closeText{ display: block; margin-top: 30px; padding-top: 20px; border-top: 1px solid #333333; text-align: center; } .formTable > dl > dd .changeList .closeText > span{ font-size: 1.4rem; text-decoration: underline; cursor: pointer; } .formTable > dl > dd .changeList .closeText > span:hover{text-decoration: none;} /** subscriptionDate **/ .formTable > dl > dd .subscriptionDate{display: block;} .formTable > dl > dd .subscriptionDate > dl{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; border-bottom: 1px solid #CCCCCC; padding-bottom: 15px; margin-bottom: 15px; font-size: 1.4rem; } .formTable > dl > dd .subscriptionDate > dl:nth-last-of-type(1){border-bottom: 0; padding-bottom: 0; margin-bottom: 0;} .formTable > dl > dd .subscriptionDate > dl > dt{ font-weight: 700; margin-right: 20px; } .formTable > dl > dd .subscriptionDate > dl > dt::before{ content: '■'; margin-right: 5px; } /** confirmItemList *****/ .formTable > dl > dd.confirmItemOuter{ padding: 0; } .formTable > dl > dd ul.confirmItemList{ display: block; } .formTable > dl > dd ul.confirmItemList > li{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; padding-left: 25px; position: relative; padding: 20px 15px 20px; border-bottom: 1px dotted #CCCCCC; } .formTable > dl > dd ul.confirmItemList > li:nth-last-of-type(1){border-bottom: none;} .formTable > dl > dd ul.confirmItemList > li > figure{ display: block; width: 90px; margin-right: 15px; } .formTable > dl > dd ul.confirmItemList > li > figure img{display: block; width: 100%; height: auto;} .formTable > dl > dd ul.confirmItemList > li > .text{ display: block; width: calc(100% - 105px); line-height: 1.4; } .formTable > dl > dd ul.confirmItemList > li > .text > p{margin-bottom: 0;} .formTable > dl > dd ul.confirmItemList > li > .text .price{font-weight: 700; padding-top: 5px;} /************************************** paymentSelectBox **************************************/ .paymentSelectBox{ display: block; width: calc(100% - 40px); margin: 0 auto; } .paymentSelectBox > ul{ display: block; border-top: 1px solid #CCCCCC; } .paymentSelectBox > ul > li{ display: block; padding: 0; border-bottom: 1px solid #CCCCCC; } .paymentSelectBox > ul > li > .radioBox{ display: block; padding: 20px 15px; } /*EC function upgrade Start.*/ .paymentSelectBox > ul > li > .paymentDetail{ display: none; padding: 0 9px 20px; font-size: 1.4rem; line-height: 1.7; } /*EC function upgrade End.*/ .paymentSelectBox > ul > li.current > .paymentDetail{display: block;} .paymentSelectBox > ul > li > .paymentDetail .tagBtnSmall{ width: 100%; padding: 0; margin-bottom: 30px; background-color: inherit; } .paymentSelectBox > ul > li > .paymentDetail #registCard{display: none;} .paymentSelectBox > ul > li > .paymentDetail #registCard.current{display: block;} .paymentSelectBox > ul > li > .paymentDetail ul.registCardList{ display: block; width: 100%; border-top: 1px dotted #CCCCCC; } .paymentSelectBox > ul > li > .paymentDetail ul.registCardList > li{ display: block; border-bottom: 1px dotted #CCCCCC; } /*EC function upgrade Start.*/ .paymentSelectBox > ul > li > .paymentDetail ul.registCardList > li > .radioBox span{ display: block; width: 100%; padding-top: 15px; padding-bottom: 15px; padding: 15px 9px 15px 33px; } /*EC function upgrade End.*/ .paymentSelectBox > ul > li > .paymentDetail ul.registCardList > li > .radioBox span::before{ top: calc(50% - 10px); left: 15px;} .paymentSelectBox > ul > li > .paymentDetail ul.registCardList > li > .radioBox span::after{ top: calc(50% - 6px); left: 19px;} .paymentSelectBox > ul > li > .paymentDetail ul.registCardList > li > .radioBox input:checked + span{ background: #f7f7f7; } /**【FFHC v1.0】#33321 3Dセキュア2.0対応 Start.*/ .paymentSelectBox > ul > li > .paymentDetail ul.registCardList > li> dl.creditName { background: #f7f7f7; display: block; width: 100%; padding-top: 15px; padding-bottom: 15px; padding: 15px 9px 15px 33px; } .paymentSelectBox > ul > li > .paymentDetail ul.registCardList > li> dl.creditName.required > dt > span::after{ content: '必須'; width: 40px; height: 22px; border: 1px solid #e35555; background: #FFFFFF; font-size: 12px; line-height: 25px; text-align: center; color: #e35555; position: relative; left: 20px; } /**【FFHC v1.0】#33321 3Dセキュア2.0対応 End.*/ .paymentSelectBox > ul > li > .paymentDetail #newCard{display: none;} .paymentSelectBox > ul > li > .paymentDetail #newCard.current{display: block;} .paymentSelectBox > ul > li > .paymentDetail .cardHelp{ margin-top: 10px; margin-bottom: 20px; } .paymentSelectBox > ul > li > .paymentDetail .cardHelp > ul.enableCardList{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: flex-start; justify-content: flex-start; width: 100%; margin-bottom: 20px; } .paymentSelectBox > ul > li > .paymentDetail .cardHelp > ul.enableCardList > li{ display: block; width: 25%; text-align: center; font-size: 1.0rem; line-height: 1.2; } .paymentSelectBox > ul > li > .paymentDetail .cardHelp > ul.enableCardList > li > figure{ display: block; width: 100%; margin: 0 auto 5px; } .paymentSelectBox > ul > li > .paymentDetail .cardHelp > ul.enableCardList > li > figure img{display: block; width: 100%; height: auto;} .paymentSelectBox > ul > li > .paymentDetail .cardHelp > ul.enableCardList > li > span{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; height: 2em; text-align: center; } .paymentSelectBox > ul > li > .paymentDetail .cardHelp > ul.circleList{ display: block; width: 100%; } .paymentSelectBox .innerInputArea{ display: block; padding: 15px; background: #eeeeee; } .paymentSelectBox .innerInputArea dl{ margin-bottom: 30px; } .paymentSelectBox .innerInputArea dl > dt{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; margin-bottom: 10px; font-size: 1.4rem; position: relative; min-height: 22px; } .paymentSelectBox .innerInputArea dl.required > dt > span{ display: block; padding-top: 1px; padding-right: 10px; } .paymentSelectBox .innerInputArea dl.required > dt::after{ content: '必須'; display: block; width: 40px; height: 22px; border: 1px solid #e35555; background: #FFFFFF; font-size: 12px; line-height: 20px; text-align: center; color: #e35555; } .paymentSelectBox .innerInputArea .cardInput > dl > dd{ display: block; } .paymentSelectBox .innerInputArea .cardInput > dl > dd p.note, .paymentSelectBox .innerInputArea > dl > dd p.note, .paymentSelectBox #registCard dl#cardOwnerName > dd p.note{ margin-top: 5px; font-size: 1.2rem; } .paymentSelectBox .innerInputArea .dateSelect, .dateSelectCredit{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; } .paymentSelectBox .innerInputArea .dateSelect > .year, .paymentSelectBox .innerInputArea .dateSelect > .month, .dateSelectCredit > .year, .dateSelectCredit > .month{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; width: auto; margin-bottom: 0; } .paymentSelectBox .innerInputArea .dateSelect > .year, .dateSelectCredit > .year{margin-right: 20px;} .paymentSelectBox .innerInputArea .securityCode{margin-bottom: 20px;} .paymentSelectBox .innerInputArea dl.securityCode > dd{ display: block; } .paymentSelectBox .innerInputArea dl.securityCode > dd .inputArea{ display: block; width: 120px; margin-bottom: 10px; } .paymentSelectBox .innerInputArea .addCard{} .paymentSelectBox .innerInputArea .addCard > ul{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; padding: 15px 0 0; } .paymentSelectBox .innerInputArea .addCard > ul > li{ margin-right: 20px; } .paymentSelectBox .innerInputArea .addCard > ul > li:nth-last-of-type(1){margin-right: 0;} .paymentSelectBox .innerInputArea .addCard > ul + p{padding-top: 15px;} /************************************** bottomBtnArea **************************************/ .bottomBtnArea{ display: block; width: calc(100% - 40px); padding: 40px 0 0; margin: 0 auto; } /** 【FFHC v1.0】【2.3.1. 決済導線】カート画面のボタン位置:5508 Start */ section#cartSection > div.cartDetail > div.bottomBtnArea > ul{ margin-top: -110px; margin-bottom: -55px; display: block; } /** 【FFHC v1.0】【2.3.1. 決済導線】カート画面のボタン位置:5508 End. */ .bottomBtnArea > ul{ display: block;} .bottomBtnArea > ul > li{ display: block; margin-bottom: 20px; } .bottomBtnArea > ul > li:nth-last-of-type(1){margin-bottom: 0;} .bottomBtnArea > ul > li > button{ display: block; margin-bottom: 20px; } .bottomBtnArea.verical{ padding-top: 0; } .bottomBtnArea.verical > ul > li.textLink{ text-align: center; font-size: 1.4rem; } .bottomBtnArea.verical > ul > li.textLink > span{cursor: pointer; text-decoration: underline;} .bottomBtnArea.verical > ul > li.textLink > span:hover{text-decoration: none;} .ledeBox + .bottomBtnArea{padding-top: 0;} .cautionBox + .bottomBtnArea{padding-top: 0;} /************************************** accordionBox **************************************/ .accordionBox{ display: block; width: calc(100% - 40px); margin: 0 auto 30px; } .accordionBox:nth-last-child(1){margin-bottom: 0;} .accordionBox > dl{ margin: 0 auto 10px; font-size: 1.4rem; line-height: 1.4; } .accordionBox > dl:nth-last-child(1){margin-bottom: 0;} .accordionBox > dl > dt{ display: block; width: 100%; padding: 15px 38px 15px 15px; background: #eeeeee; font-size: 1.5rem; line-height: 1.4; font-weight: 700; position: relative; cursor: pointer; } .accordionBox > dl > dt::before, .accordionBox > dl > dt::after{ content: ''; display: block; width: 13px; height: 2px; background: #333333; position: absolute; webkit-transition: transform 0.2s ease,opacity 0.5s ease; -moz-transition: transform 0.2s ease,opacity 0.5s ease; -o-transition: transform 0.2s ease,opacity 0.5s ease; transition: transform 0.2s ease,opacity 0.5s ease; } .accordionBox > dl > dt::before{ top: calc(50% - 1px); right: 15px; } .accordionBox > dl > dt::after{ transform: rotate(90deg); top: calc(50% - 1px); right: 15px; } .accordionBox > dl.open > dt::after{ opacity: 0; transform: rotate(0); } .accordionBox > dl > dd{ display: none; padding: 15px 0; } .accordionBox > dl > dd p{ margin-bottom: 10px; } .accordionBox > dl > dd p:nth-last-child(1){margin-bottom: 0;} .accordionBox > dl > dd > dl{ display: block; text-align: left; margin-bottom: 30px; } .accordionBox > dl > dd > dl:nth-last-child(1){margin-bottom: 0;} .accordionBox > dl > dd > dl > dt{ font-size: 1.5rem; margin-bottom: 15px; font-weight: 700; } .accordionBox > dl > dd > dl > dd{ margin-bottom: 10px;} .accordionBox > dl > dd > dl > dd:nth-last-of-type(1){margin-bottom: 0;} /************************************** cautionList **************************************/ ul.cautionList{ display: block; width: 100%; } ul.cautionList:nth-last-child(1){margin-bottom: 0;} ul.cautionList > li{ display: block; text-indent: -1em; padding-left: 1em; margin-bottom: 10px; font-size: 1.2rem; line-height: 1.5; } ul.cautionList > li:nth-last-child(1){margin-bottom: 0;} /************************************** cautionNumList **************************************/ ol.cautionNumList{ display: block; width: 100%; margin: 0 auto 30px; counter-reset: cautionNum; } ol.cautionNumList:nth-last-child(1){margin-bottom: 0;} ol.cautionNumList > li{ display: block; text-indent: -22px; padding-left: 22px; font-size: 1.4rem; line-height: 1.5; } ol.cautionNumList > li::before{ counter-increment: cautionNum; content: counter(cautionNum)"."; width: 22px; font-weight: 700; padding-right: 10px; } /************************************** circleList **************************************/ ul.circleList, #myDiv ul{ display: block; width: 100%; margin: 0 auto 20px; } ul.circleList:nth-last-child(1), #myDiv ul:nth-last-child(1) {margin-bottom: 0;} ul.circleList > li, #myDiv ul > li{ display: block; text-indent: -1em; padding-left: 1em; font-size: 1.4rem; line-height: 1.5; margin-bottom: 5px; } ul.circleList > li::before, #myDiv ul > li::before{ content: '・'; width: 1em; font-weight: 700; } ul.circleList > li:nth-last-of-type(1), #myDiv ul > li:nth-last-of-type(1){margin-bottom: 0;} /************************************** cautionBox **************************************/ .cautionBox{ display: block; width: calc(100% - 40px); margin: 0 auto 30px; padding: 15px; background: #f7f7f7; font-size: 1.4rem; line-height: 1.4; } .cautionBox:nth-last-child(1){margin-bottom: 0;} .accordionBox .cautionBox{width: 100%;} .formTable + .cautionBox{margin-top: 30px;} .cautionBox > dl{ display: block;} .cautionBox > dl > dt{ font-size: 1.5rem; margin-bottom: 15px; font-weight: 700; } .cautionBox > dl > dd{margin-bottom: 10px;} .cautionBox > dl > dd:nth-last-child(1){margin-bottom: 0;} .cautionBox > dl > dd > dl{ display: block; padding-top: 10px; margin-bottom: 10px; } .cautionBox > dl > dd > dl > dt{margin-bottom: 10px; font-weight: 700;} .cautionBox > dl > dd.btnWhite{ display: block; width: 100%; padding-top: 20px; margin: 0 auto; } .cautionBox.center{text-align: center;} .cautionBoxTwoC{ display: block; width: 100%; margin-bottom: 0; } .cautionBoxTwoC > .cautionBox{ margin: 0 auto 10px; } .cautionBoxTwoC > .cautionBox:nth-last-of-type(1){margin-bottom: 0;} .cautionBox > dl > dt.textCenter{ text-align: center; padding-bottom: 10px; border-bottom: 1px solid #CCCCCC; } .cautionBox > dl > dt.textCenter > span{ display: block; padding-top: 5px; text-align: center; font-size: 1.4rem; font-weight: 500; } .stepFlow + .cautionBox{margin-top: 20px;} /************************************** tagBtnBig **************************************/ .tagBtnBig{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; width: calc(100% - 40px); border-bottom: 4px solid #e35555; margin: 0 auto -40px; } /** 【FFHC v1.0】2.3.5. 代理注文 - Task 3699修正　Start*/ section.onbehalfSearchProduct .tagBtnBig{ border-bottom-color: #eeeeee; } section.onbehalfSearchProduct .tagBtnBig li{ z-index: 1; } /** 【FFHC v1.0】2.3.5. 代理注文 - Task 3699修正　End.*/ .tagBtnBig > li{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: calc(50% - 5px); height: 46px; padding-top: 4px; font-size: 1.5rem; font-weight: 700; color: #333333; border: 1px solid #CCCCCC; border-bottom: none; border-radius: 4px 4px 0 0; cursor: pointer; -webkit-transition: background 0.2s ease, color 0.2s ease; -moz-transition: background 0.2s ease, color 0.2s ease; -o-transition: background 0.2s ease, color 0.2s ease; transition: background 0.2s ease, color 0.2s ease; } .tagBtnBig > li.current{ background: #e35555; color: #FFFFFF; border-color: #e35555; } /** 【FFHC v1.0】2.3.5. 代理注文 - Task 3699修正　Start*/ section.onbehalfSearchProduct .tagBtnBig > li.current{ background: #eeeeee; border-color: #eeeeee; color:#333333; } /** 【FFHC v1.0】2.3.5. 代理注文 - Task 3699修正　End.*/ /************************************** tagBtnSmall **************************************/ .tagBtnSmall{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; width: calc(100% - 40px); margin: 0 auto 30px; padding: 15px; background: #eeeeee; } .tagBtnSmall > li{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: calc(50% - 5px); height: 40px; background: #FFFFFF; border: 1px solid #CCCCCC; font-size: 1.4rem; color: #333333; cursor: pointer; -webkit-transition: border 0.2s ease; -moz-transition: border 0.2s ease; -o-transition: border 0.2s ease; transition: border 0.2s ease; } #cardSelectTab > li > label > input{display: none;} #cardSelectTab > li > label > input:checked + span { height: 100%; width: 100%; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } .tagBtnSmall > li > label{ height: 100%; width: 100%; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; cursor: pointer; } .tagBtnSmall > li .checkMark{ display: inline-block; width: 16px; text-align: center; vertical-align: middle; margin-right: 5px; } .tagBtnSmall > li .checkMark > img{display: block; width: 100%; height: auto;} .tagBtnSmall > li.current{ border: 2px solid #e35555; font-weight: 700; } /************************************** userSection **************************************/ #userSection{padding-bottom: 80px;} .backMypage{ display: block; width: calc(100% - 40px); margin: 40px auto 0; padding-top: 30px; border-top: 1px solid #333333; text-align: center; } /************************************** subscriptionTabArea **************************************/ #subscriptionTabArea{} #subscriptionActiveList, #subscriptionInactiveList{display: none;} #subscriptionActiveList.current, #subscriptionInactiveList.current{display: block;} #subscriptionTabArea .subscriptionSortBox{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; width: calc(100% - 40px); margin: 0 auto 30px; } #subscriptionTabArea .subscriptionSortBox > .sort{} #subscriptionTabArea #nextPriceSum{ display: block; width: 100%; max-width: 1200px; font-size: large; margin: 0 auto; line-height: 1.6; font-weight: 700; text-align: right; } /*** subscriptionItemList ****************/ #subscriptionTabArea .subscriptionItemList{ display: block; width: calc(100% - 40px); margin: 0 auto; } /*** checkGuide *****/ #subscriptionTabArea .subscriptionItemList > .checkGuide{display: none;} #subscriptionTabArea .subscriptionItemList.bulk > .checkGuide{ display: block; width: 100%; padding: 15px; margin-bottom: 25px; background: #eeeeee; position: relative; } #subscriptionTabArea .subscriptionItemList > .checkGuide::after{ content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 15px 10px 0 10px; border-color: #eeeeee transparent transparent transparent; position: absolute; left: 10px; bottom: -14px; } #subscriptionTabArea .subscriptionItemList > .checkGuide > p{ display: block; position: relative; padding-left: 30px; font-size: 1.3rem; line-height: 1.4; } #subscriptionTabArea .subscriptionItemList > .checkGuide > p::before{ content: ''; display: inline-block; width: 20px; height: 20px; border-radius: 4px; background: #FFFFFF; border: 1px solid #CCCCCC; vertical-align: middle; text-align: center; position: absolute; left: 0; top: calc(50% - 10px); z-index: 2; } #subscriptionTabArea .subscriptionItemList > .checkGuide > p::after{ content: ' '; display: block; width: 16px; height: 16px; background: url("../img/common/icon_checked.svg") center center no-repeat; background-size: 16px auto; position: absolute; left: 2px; top: calc(50% - 8px); z-index: 2; } /*** subscriptionItemList *****/ #subscriptionTabArea .subscriptionItemList > ul{ display: block; } #subscriptionTabArea .subscriptionItemList > ul > li{ display: block; border-top: 1px solid #333333; margin-bottom: 30px; } #subscriptionTabArea .subscriptionItemList > ul > li:nth-last-of-type(1){margin-bottom: 0;} #subscriptionTabArea .subscriptionItemList.bulk > ul > li.changeDisabled{display: none;} #subscriptionTabArea .subscriptionItemList > ul > li > .lineCheck{display: none;} #subscriptionTabArea .subscriptionItemList.bulk > ul > li > .lineCheck{ display: block; width: 100%; padding: 8px 20px; background: #333333; cursor: pointer; } #subscriptionTabArea .subscriptionItemList > ul > li > .lineCheck > input{display: none;} #subscriptionTabArea .subscriptionItemList > ul > li > .lineCheck > span{ display: block; width: 100%; padding-left: 30px; min-height: 20px; line-height: 20px; position: relative; } #subscriptionTabArea .subscriptionItemList > ul > li > .lineCheck > span::before{ content: ''; display: inline-block; width: 20px; height: 20px; border-radius: 4px; background: #FFFFFF; border: 1px solid #CCCCCC; vertical-align: middle; text-align: center; position: absolute; left: 0; top: 0; z-index: 2; } #subscriptionTabArea .subscriptionItemList > ul > li > .lineCheck > span::after{ content: ' '; display: block; width: 16px; height: 16px; background: url("../img/common/icon_checked.svg") center center no-repeat; background-size: 16px auto; position: absolute; left: 2px; top: 2px; z-index: 2; opacity: 0; transform: scale(0); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } #subscriptionTabArea .subscriptionItemList > ul > li > .lineCheck > input:checked + span::after{ opacity: 1; transform: scale(1); } #subscriptionTabArea .subscriptionItemList > ul > li > .lineCheck > span > span{ color: #FFFFFF; font-size: 1.4rem; } /*** itemInfoBox *****/ #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox{ display: block; width: 100%; padding: 20px 0 0; font-size: 1.4rem; line-height: 1.4; text-align: left; } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox > .name{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; width: 100%; margin-bottom: 20px; } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox > .name > figure{ display: block; width: 90px; margin-right: 15px; } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox > .name figure img{display: block; width: 100%; height: auto;} #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox > .name > .text{ display: block; width: calc(100% - 105px); } /**【FFHC v1.0】【商品詳細画面へのリンク削除】#6394 Start.*/ #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox > .name > .text div{ /**【FFHC v1.0】【商品詳細画面へのリンク削除】#6394 End.*/ font-weight: 700; font-size: 1.5rem; } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox > .name > .text div > span{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; height: 25px; padding: 0 10px; background: #FFFFFF; border: 1px solid #e35555; font-size: 1.2rem; line-height: 1; text-align: center; margin-right: 10px; color: #e35555; width: 150px; } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox > .name > .text .status{ color: #e35555; font-size: 1.6rem; font-weight: 700; margin-bottom: 5px; } /*** detailTable *****/ #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .detailTable{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: flex-start; justify-content: flex-start; } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .detailTable dl{ display: block; width: 100%; border-bottom: 1px solid #cccccc; } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .detailTable dl:nth-of-type(1){border-top: 1px solid #cccccc;} #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .detailTable dl:nth-last-of-type(1){border-top: none;} #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .detailTable dl > dt{ display: block; width: 100%; padding: 15px; background: #eeeeee; font-size: 1.4rem; line-height: 1.4; vertical-align: middle; text-align: left; position: relative; } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .detailTable dl > dd{ display: block; width: 100%; padding: 20px 15px 20px 15px; background: #FFFFFF; font-size: 1.4rem; line-height: 1.4; text-align: left; } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .detailTable dl > dd > strong{ display: block; font-weight: 700; font-size: 1.5rem; } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .detailTable > .shippingInfo{ display: block; width: 100%; } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .detailTable > .paymentInfo, #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .detailTable > .adderInfo{ display: block; width: 100%; height: 0; overflow: hidden; opacity: 0; visibility: hidden; webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .detailTable > .paymentInfo > dl:nth-of-type(1){border-top: none;} #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .detailTable.fullOpen > .paymentInfo, #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .detailTable.fullOpen > .adderInfo{ opacity: 1; height: auto; visibility: visible; } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .detailTable > .separateAdder{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 100%; padding: 20px 15px 0; font-size: 1.2rem; opacity: 1; webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .detailTable.fullOpen > .separateAdder{ opacity: 0; visibility: hidden; padding: 0; height: 0; overflow: hidden; } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .detailTable > .separateAdder > em{ display: block; width: 26px; margin-right: 10px; } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .detailTable > .separateAdder > em > img{display: block;width: 100%; height: auto;} #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .detailTable > .moreInfoBtn{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 100%; height: 40px; font-size: 1.4rem; border: 1px solid #CCCCCC; border-radius: 4px; color: #333333; background: #FFFFFF; text-align: center; text-decoration: none; margin-top: 20px; } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .detailTable > .moreInfoBtn > span{ display: inline-block; padding-right: 23px; text-align: center; position: relative; } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .detailTable > .moreInfoBtn > span::before, #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .detailTable > .moreInfoBtn > span::after{ content: ''; display: block; width: 12px; height: 2px; background: #333333; position: absolute; webkit-transition: transform 0.2s ease,opacity 0.5s ease; -moz-transition: transform 0.2s ease,opacity 0.5s ease; -o-transition: transform 0.2s ease,opacity 0.5s ease; transition: transform 0.2s ease,opacity 0.5s ease; } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .detailTable > .moreInfoBtn > span::before{ top: calc(50% - 1px); right: 0; } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .detailTable > .moreInfoBtn > span::after{ transform: rotate(90deg); top: calc(50% - 1px); right: 0; } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .detailTable.fullOpen > .moreInfoBtn > span::after{ opacity: 0; transform: rotate(0); } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .btnArea{ display: block; width: 100%; padding: 15px; margin-top: 20px; background: #f7f7f7; } #subscriptionTabArea .subscriptionItemList.bulk > ul > li > .itemInfoBox .btnArea{display: none;} #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .btnArea > ul{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .btnArea > ul > li{ display: block; width: calc((100% - 30px) / 3); } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .btnArea > ul > li.btnBlack > button{ height: 50px; } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .changeDisabledText{ display: block; width: 100%; padding: 15px; margin-top: 20px; background: #f7f7f7; text-align: center; } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .restartBtnArea{ display: block; width: 100%; padding: 15px; margin-top: 20px; background: #f7f7f7; } #subscriptionTabArea .subscriptionItemList.bulk > ul > li > .itemInfoBox .restartBtnArea{display: none;} #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .restartBtnArea > ul{ display: block; position: relative; } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .restartBtnArea li.btnBlack{ width: 100%; margin: 0 auto 10px; } #subscriptionTabArea .subscriptionItemList > ul > li > .itemInfoBox .restartBtnArea li:nth-last-of-type(1){ display: block; text-align: center; } #subscriptionTabArea .subscriptionItemList > div > p{ font-size: 1.6rem; } /**【FFHC v1.0】【定期の休止/解約理由入力欄について】#6259 Start.*/ #stopFormModal .formTable .inputArea textarea{ margin-top: 20px } /**【FFHC v1.0】【定期の休止/解約理由入力欄について】#6259 End.*/ /** bulkChangeBtnArea *******/ #subscriptionTabArea .bulkChangeBtnArea{ display: block; width: 100%; opacity: 0; visibility: hidden; background: rgba(51,51,51,.9); padding: 20px 0 15px; bottom: 0; left: 0; z-index: 50; webkit-transition: opacity 0.4s ease 0.2s,transform 0.4s ease 0.2s; -moz-transition: opacity 0.4s ease 0.2s,transform 0.4s ease 0.2s; -o-transition: opacity 0.4s ease 0.2s,transform 0.4s ease 0.2s; transition: opacity 0.4s ease 0.2s,transform 0.4s ease 0.2s; -webkit-transform: translate(0, 100px); -moz-transform: translate(0, 100px); -o-transform: translate(0, 100px); transform: translate(0, 100px); } #subscriptionTabArea .bulk .bulkChangeBtnArea.open{ visibility: visible; opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } #subscriptionTabArea .bulk .bulkChangeBtnArea.fixed{ position: fixed; } #subscriptionTabArea .bulkChangeBtnArea > .inner{ display: block; width: 100%; text-align: center; } #subscriptionTabArea .bulkChangeBtnArea > .inner > p{ display: inline-block; text-align: center; font-size: 1.4rem; font-weight: 700; color: #FFFFFF; position: relative; padding-left: 30px; margin: 0 auto 15px; } #subscriptionTabArea .bulkChangeBtnArea > .inner > p::before{ content: ''; display: inline-block; width: 20px; height: 20px; border-radius: 4px; background: #FFFFFF; border: 1px solid #CCCCCC; vertical-align: middle; text-align: center; position: absolute; left: 0; top: -2px; z-index: 2; } #subscriptionTabArea .bulkChangeBtnArea > .inner > p::after{ content: ' '; display: block; width: 16px; height: 16px; background: url("../img/common/icon_checked.svg") center center no-repeat; background-size: 16px auto; position: absolute; left: 2px; top: 0; z-index: 2; } #subscriptionTabArea .bulkChangeBtnArea > .inner > .btnWhite{ width: 100%; padding: 0 20px; } #subscriptionTabArea .adderInfo .labelText{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; margin-bottom: 15px; } #subscriptionTabArea .adderInfo .statusLabel{ display: inline-block; font-size: 1.2rem; line-height: 1; padding: 5px 10px 4px; background: #eeeeee; vertical-align: top; } #subscriptionTabArea .adderInfo .labelText > .statusLabel{margin-left: 15px;} /************************************** datapicker Calender **************************************/ #datePickerOuter{position: relative; z-index: 10;} .ui-datepicker{ display: none; margin-top: 10px; margin-left: -15px; padding: 15px calc(25 * (100vw / 375)) 25px; background: #FFFFFF; border: 1px solid #CCCCCC; box-shadow: 0 10px 10px rgba(0,0,0,.2); border-radius: 4px; position: absolute; /**【FFHC v1.0】【SPで配送希望日選択用のカレンダーサイズが大きい】#:5813 Start*/ width: auto; /**【FFHC v1.0】【SPで配送希望日選択用のカレンダーサイズが大きい】#:5813 End.*/ } .ui-datepicker::before{ content: ''; width: 0; height: 0; border-style: solid; border-width: 0 9px 14px 9px; border-color: transparent transparent #FFFFFF transparent; position: absolute; top: -14px; left: calc(110 * (100vw / 375)); z-index: 2; border-collapse: inherit; } .ui-datepicker::after{ content: ''; width: 0; height: 0; border-style: solid; border-width: 0 10px 15px 10px; border-color: transparent transparent #CCCCCC transparent; position: absolute; top: -15px; left: calc(109 * (100vw / 375)); z-index: -1; border-collapse: inherit; } .ui-datepicker-header{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: calc(240 * (100vw / 375)); height: 40px; margin: 0 auto; font-size: 20px; line-height: 1; font-weight: 700; text-align: center; position: relative; } .ui-datepicker-header .ui-datepicker-prev, .ui-datepicker-header .ui-datepicker-next{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: calc(45 * (100vw / 375)); height: 25px; border: 1px solid #333333; border-radius: 4px; color: #333333; background: #FFFFFF; text-align: center; text-decoration: none; cursor: pointer; position: absolute; top: 6px; box-shadow: 2px 2px 0 rgba(187,187,187,1); -webkit-transition: background 0.2s ease; -moz-transition: background 0.2s ease; -o-transition: background 0.2s ease; transition: background 0.2s ease; } .ui-datepicker-header .ui-datepicker-prev{ left: 0;} .ui-datepicker-header .ui-datepicker-next{ right: 0;} .ui-datepicker-header .ui-datepicker-prev:hover, .ui-datepicker-header .ui-datepicker-next:hover{ background-color: #efefef; } .ui-datepicker-header .ui-datepicker-prev.ui-state-disabled, .ui-datepicker-header .ui-datepicker-next.ui-state-disabled{ opacity: 0.3; box-shadow: none; cursor: default; } .ui-datepicker-header .ui-datepicker-prev.ui-state-disabled:hover, .ui-datepicker-header .ui-datepicker-next.ui-state-disabled:hover{background-color: #FFFFFF;} .ui-datepicker-header .ui-datepicker-prev > span{ display: block; width: 100%; height: 25px; background:url("../img/common/icon_arrow_left_black.svg") center center no-repeat; background-size: 8px auto; margin-left: -24px; margin-top: -14px; } .ui-datepicker-header .ui-datepicker-next > span{ display: block; width: 100%; height: 25px; background:url("../img/common/icon_arrow_right_black.svg") center center no-repeat; background-size: 8px auto; margin-left: -22px; margin-top: -14px; } .ui-datepicker-calendar{} .ui-datepicker-calendar th, .ui-datepicker-calendar td{ width: calc(40 * (100vw / 375)); height: calc(44 * (100vw / 375)); padding: 2px 0; font-size: calc(16 * (100vw / 375)); color: #333333; font-weight: 700; text-align: center; vertical-align: middle; } .ui-datepicker-calendar td a{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; text-decoration: none; width: calc(40 * (100vw / 375)); height: calc(40 * (100vw / 375)); border-radius: 50%; background: #FFFFFF; -webkit-transition: background 0.2s ease; -moz-transition: background 0.2s ease; -o-transition: background 0.2s ease; transition: background 0.2s ease; } .ui-datepicker-calendar td a:hover{ background: #eeeeee; } .ui-datepicker-week-end:first-child, .ui-datepicker-week-end:first-child a{ color: #e35555; } .ui-datepicker-week-end:last-child, .ui-datepicker-week-end:last-child a{ color: #1e80cc; } .ui-datepicker-calendar td.ui-state-disabled{opacity: .3;} .ui-datepicker-calendar td.ui-datepicker-current-day a{ background: #e35555; color: #FFFFFF; } .ui-datepicker-calendar td.ui-datepicker-current-day a:hover{background: #e35555;} .ui-datepicker-buttonpane{ width: 100%; } .ui-datepicker-buttonpane{ padding-top: 16px; } .ui-datepicker-close{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 100%; height: 40px; font-size: 1.6rem; font-weight: 700; color: #FFFFFF; border: 1px solid #333333; border-radius: 4px; background: #333333; text-align: center; text-decoration: none; cursor: pointer; box-shadow: 2px 2px 0 rgba(187,187,187,1); -webkit-transition: background 0.2s ease, color 0.2s ease; -moz-transition: background 0.2s ease, color 0.2s ease; -o-transition: background 0.2s ease, color 0.2s ease; transition: background 0.2s ease, color 0.2s ease; } .ui-datepicker-close:hover{ background: #FFFFFF; color: #333333; } @media screen and (min-width:376px) { .ui-datepicker{ padding: 15px 25px 25px; } .ui-datepicker::before{left: 110px;} .ui-datepicker::after{left: 109px;} .ui-datepicker-header{width: 280px;} .ui-datepicker-header .ui-datepicker-prev, .ui-datepicker-header .ui-datepicker-next{width:45px;} .ui-datepicker-calendar th, .ui-datepicker-calendar td{ width: 40px; height: 44px; font-size: 16px; } .ui-datepicker-calendar td a{ width: 40px; height: 40px; } } .ui-datepicker td span, .ui-datepicker td a { text-align: inherit; } input[type="text"].datePicker{ width: 100%; max-width: 230px; height: 36px; box-sizing: border-box; font-size: 1.6rem; line-height: 34px; padding: 0 30px 0 40px; background: #FFFFFF; border: 1px solid #cccccc; border-radius: 4px; vertical-align: middle; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("../img/common/icon_calendar.svg"),url("../img/common/icon_arrow_bottom_black.svg"); background-repeat: no-repeat; background-position: 10px center,calc(100% - 10px) center; background-size: 22px auto ,10px auto; } input[type="text"].datePicker:disabled{ background-color: #efefef; color: #999999; } .formTable > dl > dd .nextShippingSelect .datePicker{ margin-top: 10px; } /************************************** labelBtnList **************************************/ .labelBtnList{ display: block; width: calc(100% - 40px); margin: 0 auto; padding: 20px; background: #eeeeee; } .labelBtnList > ul{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: flex-start; justify-content: flex-start; } .labelBtnList > ul > li{ display: block; width: calc(50% - 10px); margin-right: 20px; } .labelBtnList > ul > li:nth-of-type(2n){margin-right: 0;} .labelBtnList > ul > li:nth-of-type(n + 3){margin-top: 20px;} .labelBtnList > ul > li > a{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 100%; height: 40px; font-size: 1.5rem; font-weight: 700; border: 1px solid #333333; border-radius: 4px; color: #333333; background: #FFFFFF; text-align: center; text-decoration: none; cursor: pointer; box-shadow: 2px 2px 0 rgba(187,187,187,1); -webkit-transition: background 0.2s ease, color 0.2s ease; -moz-transition: background 0.2s ease, color 0.2s ease; -o-transition: background 0.2s ease, color 0.2s ease; transition: background 0.2s ease, color 0.2s ease; } .labelBtnList > ul > li > a:hover{ background: #333333; color: #FFFFFF; } /************************************** contetsInnerSearchBox **************************************/ .contetsInnerSearchBox{ display: block; } .contetsInnerSearchBox fieldset{ display: block; width: 100%; margin: 0; padding: 0; } .contetsInnerSearchBox fieldset > input[type="text"], .contetsInnerSearchBox fieldset > button{ display: block; float: left; } .contetsInnerSearchBox fieldset > input[type="text"]{ display: block; width: calc(100% - 60px); height: 40px; padding: 0 10px; border-radius: 4px 0 0 4px; line-height: 38px; border-right: none; float: left; } .contetsInnerSearchBox fieldset > button{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 60px; height: 40px; border-radius: 0 4px 4px 0; background: #333333; float: right; -webkit-transition: background 0.2s ease; -moz-transition: background 0.2s ease; -o-transition: background 0.2s ease; transition: background 0.2s ease; } .contetsInnerSearchBox fieldset > button:hover{ background: #999999; } .contetsInnerSearchBox fieldset > button > img{ display: block; width: 26px; height: auto; } /************************************** contetsInnerSearchBox **************************************/ #presentSelectLIst{ display: block; width: calc(100% - 40px); margin: 0 auto 40px; } #presentSelectLIst > ul{ display: block; } #presentSelectLIst > ul > li{ display: block; margin-bottom: 40px; position: relative; } #presentSelectLIst > ul > li:nth-last-of-type(1){margin-bottom: 0;} #presentSelectLIst > ul > li.disabled{ pointer-events: none; } #presentSelectLIst > ul > li > .lineCheck{ display: block; width: 100%; padding: 8px 20px; background: #333333; } #presentSelectLIst > ul > li > .lineCheck > input{display: none;} #presentSelectLIst > ul > li.disabled > .lineCheck{ opacity: .5; } #presentSelectLIst > ul > li > .lineCheck > span{ display: block; width: 100%; padding-left: 30px; min-height: 20px; line-height: 20px; position: relative; } #presentSelectLIst > ul > li > .lineCheck > span::before{ content: ''; display: inline-block; width: 20px; height: 20px; border-radius: 4px; background: #FFFFFF; border: 1px solid #CCCCCC; vertical-align: middle; text-align: center; position: absolute; left: 0; top: 0; z-index: 2; } #presentSelectLIst > ul > li > .lineCheck > span::after{ content: ' '; display: block; width: 16px; height: 16px; background: url(../img/common/icon_checked.svg) center center no-repeat; background-size: 16px auto; position: absolute; left: 2px; top: 2px; z-index: 2; opacity: 0; transform: scale(0); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } #presentSelectLIst > ul > li > .lineCheck > input:checked + span::after{ opacity: 1; transform: scale(1); } #presentSelectLIst > ul > li > .lineCheck > span > span{display: none;} #presentSelectLIst > ul > li > .itemInfoBox{ display: block; width: 100%; padding: 20px 0 0; font-size: 1.4rem; line-height: 1.7; text-align: left; position: relative; } #presentSelectLIst > ul > li.disabled > .itemInfoBox{ opacity: .5; } #presentSelectLIst > ul > li > .itemInfoBox > figure{ display: block; width: 95px; padding-left: 10px; position: absolute; left: 0; top: 20px; } #presentSelectLIst > ul > li > .itemInfoBox > figure img{display: block; width: 100%; height: auto;} #presentSelectLIst > ul > li > .itemInfoBox > dl{ display: block; width: 100%; } #presentSelectLIst > ul > li > .itemInfoBox > dl > dt{ display: block; min-height: 51px; padding-left: 120px; font-size: 1.4rem; line-height: 1.4; font-weight: 700; word-break: break-all; } #presentSelectLIst > ul > li > .itemInfoBox > dl > dd.productName{ min-height: 34px; padding-left: 120px; font-size: 1.2rem; line-height: 1.4; padding-top: 5px; } #presentSelectLIst > ul > li > .itemInfoBox > dl dd.info{ font-size: 1.4rem; line-height: 1.4; padding-top: 20px; } #presentSelectLIst > ul > li > .itemInfoBox > dl dd.info .caution{ padding-top: 20px; font-size: 1.2rem; line-height: 1.4; } #presentSelectLIst > ul > li > .itemInfoBox > dl dd.quantity{ display: block; padding-top: 20px; } #presentSelectLIst > ul > li > .itemInfoBox > dl dd.quantity > dl{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; } #presentSelectLIst > ul > li > .itemInfoBox > dl dd.quantity > dl > dt{ font-size: 1.5rem; } #presentSelectLIst > ul > li > .itemInfoBox > dl dd.quantity > dl > dt::after{content: '：';} #presentSelectLIst > ul > li > .itemInfoBox > dl dd.quantity > dl > dd.delete{ display: none; padding-left: 10px; font-size: 1.4rem; text-decoration: underline; } #presentSelectLIst > ul > li > .itemInfoBox > dl dd.quantity > dl > dd.delete:hover{text-decoration: none;} /* #presentSelectLIst > ul > li.checked > .itemInfoBox > dl dd.quantity > dl > dd.delete{display: block;cursor: pointer;} */ #presentSelectLIst > ul > li.checked > .itemInfoBox > dl dd.quantity > dl > dd select{pointer-events : none;background : #CCCCCC;} /* #presentSelectLIst > ul > li > label > input:checked + span::before{pointer-events : none;background : #CCCCCC;} */ /* #presentSelectLIst > ul > li.checked > label{pointer-events : none;} */ #presentSelectLIst > ul > li > label > input:disabled + span::before{background : #CCCCCC;} #presentSelectLIst > ul > li > .itemInfoBox > dl dd.quantity > dl > dd.disabled{ display: none; padding-left: 10px; font-size: 1.4rem; } #presentSelectLIst > ul > li.disabled > .itemInfoBox > dl dd.quantity > dl > dd.disabled{display: block;} #presentSelectLIst > ul > li > .endMsg{ display: none;} #presentSelectLIst > ul > li.disabled > .endMsg{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 100%; height: 60px; font-size: 1.4rem; font-weight: 700; color: #333333; border: 1px solid #CCCCCC; background: #FFFFFF; text-align: center; position: absolute; top: calc(50% - 30px); left: 0; } #checkedPresent{ display: block; width: calc(100% - 40px); padding: 15px; background: #eeeeee; margin: 40px auto; } #checkedPresent > dl{display: block;} #checkedPresent > dl > dt{ font-size: 1.5rem; font-weight: 700; margin-bottom: 10px; } #checkedPresent > dl > dd{} #checkedPresent > dl > dd > ul{} #checkedPresent > dl > dd > ul > li{ display: block; font-size: 1.4rem; line-height: 1.4; margin-bottom: 5px; padding-left: 1em; text-indent: -1em; word-break: break-all; } #checkedPresent > dl > dd > ul > li::before{ content: '・'; } #checkedPresent > dl > dd > ul > li:nth-last-of-type(1){margin-bottom: 0;} /************************************** termsBox **************************************/ .termsBox{ display: block; width: calc(100% - 40px); height: 200px; margin: 30px auto 30px; padding: 15px; border: 1px solid #CCCCCC; overflow-y: auto; } .termsSection{ display: block; width: 100%; margin: 0 auto; padding: 0 0 70px; font-size: 1.4rem; line-height: 1.4; } .termsSection .termsTTL{ font-size: 1.6rem; line-height: 1.4; font-weight: 700; margin-bottom: 20px; } .termsSection .lede{margin-bottom: 20px;} .termsSection > dl{display: block; margin-bottom: 30px;} .termsSection > dl > dt{font-weight: 700; margin-bottom: 10px;} /************************************** agreeTerms **************************************/ #agreeTerms{ display: block; width: calc(100% - 40px); margin: 0 auto; text-align: left; } #agreeTerms > ul > li{padding-top: 10px;} .agreeMailMagazine{ min-height: 16px; padding-left: 0px; font-size: 1.4rem; line-height: 1.4; } /************************************** borderBox **************************************/ .borderBoxOuter{ display: block; width: calc(100% - 40px); margin: 0 auto 30px; } .borderBoxOuter:last-child{margin-bottom: 0;} .bottomBtnArea + .borderBoxOuter{margin-top: 40px;} .borderBox{ display: block; width: 100%; padding: 19px; border: 1px solid #CCCCCC; } .borderBox > dl{} .borderBox > dl > dt{ margin-bottom: 15px; font-size: 1.6rem; font-weight: 700; line-height: 1.25; } .borderBox > dl > dd{ font-size: 1.4rem; line-height: 1.4; margin-bottom: 15px; } .borderBox > dl > dd:nth-last-of-type(1){margin-bottom: 0;} .borderBox > dl > dd.note{ font-size: 1.2rem; line-height: 1.4; } /************************************** borderBox **************************************/ dl.precautionsBox{ display: block; width: calc(100% - 40px); margin: 0 auto 30px; } dl.precautionsBox:nth-last-child(1){margin-bottom: 0;} dl.precautionsBox > dt{ display: block; padding: 15px 20px 15px 20px; font-size: 1.6rem; font-weight: 700; margin: 0; border: none; background: #eeeeee; position: relative; cursor: pointer; } dl.precautionsBox > dt::before, dl.precautionsBox > dt::after{ content: ''; display: block; width: 10px; height: 2px; background: #333333; position: absolute; webkit-transition: transform 0.2s ease,opacity 0.5s ease; -moz-transition: transform 0.2s ease,opacity 0.5s ease; -o-transition: transform 0.2s ease,opacity 0.5s ease; transition: transform 0.2s ease,opacity 0.5s ease; } dl.precautionsBox > dt::before{ top: 50%; right: 20px; } dl.precautionsBox > dt::after{ transform: rotate(90deg); top: 50%; right: 20px; } dl.precautionsBox.open > dt::after{ opacity: 0; transform: rotate(0); } dl.precautionsBox > dd{ display: none; padding: 20px 20px 20px; font-size: 1.4rem; line-height: 1.4; } dl.precautionsBox > dd.warppingCaution{ display: none; padding: 0 20px 20px; font-size: 1.2rem; line-height: 1.4; background: #eeeeee; } dl.precautionsBox > dd.warppingCaution > dl{display: block;} dl.precautionsBox > dd.warppingCaution > dl > dt{ font-size: 1.4rem; font-weight: 700; margin-bottom: 10px; } dl.precautionsBox > dd.warppingCaution > dl > dd{ display: block; padding-left: 1em; text-indent: -1em; margin-bottom: 10px; } dl.precautionsBox > dd.warppingCaution > dl > dd::before{ content: '●'; } /************************************** otpBox **************************************/ .formTable .otpBox{ display: block; } .formTable .otpBox > .btnWhite{ width: 100%; margin-bottom: 20px; } .formTable .otpBox > .inputArea{ width: 100%; margin-bottom: 20px; } .formTable .otpBox > .inputArea > input, .formTable .otpBox > .inputArea > .form-row{ display: block; width: calc(100% - 70px); margin-right: 20px; } .formTable .otpBox > .inputArea > .btnWhite{ width: 50px; } .formTable .otpBox > .inputArea > .btnWhite > button{height: 36px;} /**【FFHC v1.0】【SPゲスト注文時配送先選択画面のOTP入力欄の修正】#:5822 Start*/ div.customShippingOtp { display: table-row; padding: 0!important; margin:0!important; margin-bottom:20px!important; width: 100%; align-items: flex-start!important; } div.customShippingOtp > div.form-row{ display: table-cell; padding: 0!important; padding-right: 20px!important; margin:0!important; width: 60%!important; } div.customShippingOtp > div.btnWhite{ display: table-cell; padding: 0!important; margin:0!important; width: 40%!important; } /**【FFHC v1.0】【SPゲスト注文時配送先選択画面のOTP入力欄の修正】#:5822 End.*/ /************************************** overRide **************************************/ .mb10{margin-bottom: 10px!important;} .fcRed{color: #e35555!important;} .fcBlack{color: #333333!important;} /************************************** PCitem **************************************/ .pcView{display: none!important;} /************************************** displayNone Input (for Validation) **************************************/ .displaynone > .field-wrapper > input { height: 1px; width: 1px; padding: 0px; margin: 0px; border: 0px; position: absolute; top: -100px; } /************************************** sitemapSection **************************************/ #sitemapSection{ padding: calc(10 * (100vw / 320)) 3% 0; margin: 0 auto; } #sitemapSection .sitemapList{ padding-top: calc(10 * (100vw / 320)); } #sitemapSection .sitemapList > dl{ margin-bottom: calc(40 * (100vw / 320)); } #sitemapSection .sitemapList > dl:nth-last-of-type(1){margin-bottom: 0;} #sitemapSection .sitemapList > dl > dt{ font-size: 1.8rem; font-weight: 700; position: initial; } #sitemapSection .sitemapList > dl > dt::after{ content: ''; display: block; width: 100%; height: 1px; /* border-top: 1px dotted #CCCCCC; */ position: absolute; left: 0; top: 0.9rem; } #sitemapSection .sitemapList > dl > dt > a{ color: #e35555; background: #FFFFFF; text-decoration: none; padding-right: 1em; position: relative; z-index: 1; } #sitemapSection .sitemapList > dl > dd{ } #sitemapSection .sitemapList > dl > dd > dl{ /* border-bottom: 1px solid #AAAAAA; */ padding: 0 3%; } #sitemapSection .sitemapList > dl:nth-last-of-type(1) > dd > dl:nth-last-of-type(1){border-bottom: none;} #sitemapSection .sitemapList > dl > dd > dl > dt{ border-bottom: 1px solid #dbdbdb; padding-top: calc(25 * (100vw / 320)); padding-bottom: calc(15 * (100vw / 320)); } #sitemapSection .sitemapList > dl > dd > dl > dt > a{ font-size: 1.6rem; color: #000000; text-decoration: none; font-weight: 700; } #sitemapSection .sitemapList > dl > dd > dl > dd{ } #sitemapSection .sitemapList > dl > dd > dl > dd > ul{ display: block; padding: 0; } #sitemapSection .sitemapList > dl > dd > dl > dd > ul > li{ display: block; /* border-top: 1px dotted #dbdbdb; */ } #sitemapSection .sitemapList > dl > dd > dl > dd > ul > li:nth-of-type(1){border-top: none;} #sitemapSection .sitemapList > dl > dd > dl > dd > ul > li > a{ display: block; text-align: left; font-size: 1.6rem; color: #000000; text-decoration: none; padding: calc(15 * (100vw / 320)) calc(25 * (100vw / 320)) calc(15 * (100vw / 320)) calc(10 * (100vw / 320)); background: url(../img/common/icon_arrow_red.svg) calc(100% - 10 * (100vw / 320)) center no-repeat; background-size: auto calc(8 * (100vw / 320)); } /**【FFHC v1.0】【SP　別送先変更画面のスタイル修正】#:5901 Start*/ form > fieldset > div.formTable > dl.required:nth-child(1) > dd >div.inputArea > label.name >span, form > fieldset > div.nextForm > div.formTable > dl.required:nth-child(1) > dd >div.inputArea > label.name >span{ vertical-align: middle; display: table-cell; white-space: nowrap!important; padding-right: 15px; } form > fieldset > div.formTable > dl.required:nth-child(1) > dd >div.inputArea > label.name > div.form-row, form > fieldset > div.nextForm > div.formTable > dl.required:nth-child(1) > dd >div.inputArea > label.name > div.form-row{ display: table-cell; } form > fieldset > div.formTable > dl.required:nth-child(1) > dd >div.inputArea > label.name, form > fieldset > div.nextForm > div.formTable > dl.required:nth-child(1) > dd >div.inputArea > label.name{ display: table-row; } form > fieldset > div.formTable > dl.required:nth-child(2) > dd >div.inputArea > label.name >span, form > fieldset > div.nextForm > div.formTable > dl.required:nth-child(2) > dd >div.inputArea > label.name >span{ vertical-align: middle; display: table-cell; white-space: nowrap!important; padding-right: 15px; } form > fieldset > div.formTable > dl.required:nth-child(2) > dd >div.inputArea > label.name > div.form-row, form > fieldset > div.nextForm > div.formTable > dl.required:nth-child(2) > dd >div.inputArea > label.name > div.form-row{ display: table-cell; width: 100%; padding:0px!important; margin:0!important; } form > fieldset > div.formTable > dl.required:nth-child(2) > dd >div.inputArea > label.name, form > fieldset > div.nextForm > div.formTable > dl.required:nth-child(2) > dd >div.inputArea > label.name{ display: table-row; width: 100%; } /**【FFHC v1.0】【SP　別送先変更画面のスタイル修正】#:5901 End.*/ /**【FFHC v1.0】【WEB会員登録:姓名入力欄のラベル表示デザインを修正する】#6010 Start*/ #smsModal form > div.formTable > dl.required:nth-child(1) > dd >div.inputArea > label.name >span{ vertical-align: middle; display: table-cell; white-space: nowrap!important; padding-right: 15px; } #smsModal form > div.formTable > dl.required:nth-child(1) > dd >div.inputArea > label.name > div.form-row{ display: table-cell; width: 100%; padding:0px!important; margin:0!important; } #smsModal form > div.formTable > dl.required:nth-child(1) > dd >div.inputArea > label.name{ display: table-row; width: 100%; } /**【FFHC v1.0】【WEB会員登録:姓名入力欄のラベル表示デザインを修正する】#6010 End.*/ /**【FFHC v1.0】【LINE連携対応】 #6562 Start.*/ /************************************** lineLoginSection **************************************/ #lineLoginSection .mainTTL{ text-align: center; padding: 30px 0 30px; } #lineLoginSection ul > li{ font-size: 1.4rem; padding: 30px 0 30px; text-align: center; } #lineLoginSection .errorMessageBox{ display: block; } #lineLoginSection .errorMessageBox > .subTTL{ display: block; width: 100%; background: #f7f7f7; padding: 20px 30px 20px 30px; margin-bottom: 20px; font-size: 2.0rem; line-height: 1.4; font-weight: 700; } #lineLoginSection .errorMessageBox:nth-last-child(1){margin-bottom: 0;} #lineLoginSection .errorMessageBox > div{ font-size: 1.4rem; margin-bottom: 15px; padding: 20px 30px 20px 30px; } /**【FFHC v1.0】【LINE連携対応】 #6562 End.*/ .g-recaptcha{margin: 20px 0 0 0;} .g-recaptcha > div{margin: auto;} /************************************** informationBox **************************************/ .informationBox{ display: block; width: calc(100% - 40px); margin: 0 auto 15px; padding: 15px; background: #f7f7f7; font-size: 1.4rem; line-height: 1.4; } .informationBox:nth-last-child(1){margin-bottom: 0;} .accordionBox .informationBox{width: 100%;} .formTable + .informationBox{margin-top: 30px;} .informationBox > dl{ display: block;} .informationBox > dl > dt{ font-size: 1.5rem; margin-bottom: 15px; font-weight: 700; } .informationBox > dl > dd{ margin-bottom: 5px; font-weight: 700; } .informationBox > dl > dd.red{ color: #e35555; } .informationBox > dl > dd{margin-bottom: 10px;} .informationBox > dl > dd:nth-last-child(1){margin-bottom: 0;} .informationBox > dl > dd > dl{ display: block; padding-top: 10px; margin-bottom: 10px; } .informationBox > dl > dd > dl > dt{margin-bottom: 10px; font-weight: 700;} #guestAgreeTerms{text-align: center; margin-bottom: 20px;} /************************************** txMatomeChoiceMessage **************************************/ .txMatomeChoiceMessage { display: block; width: calc(100% - 40px); margin: 10px auto; font-size: 1.4rem; line-height: 1.5; } .txMatomeChoiceMessage dd > span { font-weight: bolder; } /************************************** txMatomeMessage **************************************/ .txMatomeMessage { display: block; margin: 10px 10px 0px; font-size: 1.4rem; line-height: 1.5; } .txMatomeMessage dd > span { font-weight: bolder; } /************************************** txButtonExplanation **************************************/ .txButtonExplanation { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; width: calc(100% - 40px); margin: 0 auto 30px; font-size: 1.4rem; line-height: 1.4; } .txButtonExplanation dd { padding-bottom: 5px; } .txButtonExplanation dd > span { font-weight: bolder; } #deliveryselectCaution{margin-bottom: 10px;} /************************************** .cresc ***************************************/ .cresc #headLoiginBtn{ right: 60px; } #header .cresc .headLogo > img:nth-of-type(1) { width: 80px; margin-left: -30px; } #header .cresc .headLogo > a > img:nth-of-type(1) { width: 80px; margin-left: -30px; } /************************************** .subsclist(2回目定期情報) ***************************************/ #nextSubscInfo { display: block; width: calc(100% - 40px); margin: 50px auto 0; position: relative; font-size:1.4rem; } #nextSubscInfo >dl#nextSubscInformation{ border: 1px solid #CCCCCC; /*margin: 0 30px;*/ } #skipFormModal #nextSubscInfo { margin-top:0px; } #nextSubscInfo >#nextSubscInformation dt{ padding: 15px; background: #696969; font-size: 1.4rem; color: white; line-height: 1.4; text-align: center; } #nextSubscInfo >#nextSubscInformation dd{ padding: 15px; background: #eeeeee; font-size: 1.4rem; line-height: 1.4; } #nextSubscInfo > ul{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: stretch; align-items: stretch; -webkit-justify-content: flex-start; justify-content: flex-start; margin-top:24px; } #nextSubscInfo >ul >li{ display: block; width: 100%; height: 175px; /*margin-bottom: 12px;*/ border: 1px solid #CCCCCC; border-top:none; position: relative; padding:10px; } #skipFormModal #nextSubscInfo >ul >li{ height:200px; } #nextSubscInfo >ul >li * { /*margin-bottom: 10px;*/ /*display:flex;*/ } #nextSubscInfo > ul > li:nth-child(1){border-top: 1px solid #CCCCCC;} #nextSubscInfo > ul > li:nth-last-child(1){margin-bottom: 12px;} #nextSubscInfo > ul > li > dl > dd div.text p.name, #nextSubscInfo > ul > li > div dl.price, #nextSubscInfo > ul > li > div dl.price dt, #nextSubscInfo > ul > li > div dl.price dd, #nextSubscInfo > ul > li > div dl.quantity, #nextSubscInfo > ul > li > div dl.quantity dt, #nextSubscInfo > ul > li > div dl.quantity dd{ display: inline-block!important; width: auto; padding: 0!important; margin: 0!important; } #nextSubscInfo > ul > li > dl.itemInfo { font-weight: 700; line-height: 1.5; height: 40%; margin-bottom:0px; } #nextSubscInfo > ul > li > dl.itemInfo dd{ padding:0; } #nextSubscInfo .itemInfo > dd > .text{ display: flex; width: 100%; } #nextSubscInfo .itemInfo > dd > .text > p > span::before{ width: 14px; display: inline-block; content: "◇"; } #nextSubscInfo > ul > li > dl.deliveCourse, #nextSubscInfo > ul > li > div.priceQuantity, #nextSubscInfo > ul > li > dl.subscriptionTotal{ padding-top: 15px ; font-size: 1.4rem; } #nextSubscInfo > ul > li > dl.deliveCourse > dd >div.product-option{ font-weight:700; } #nextSubscInfo dl.price::after { width: 5px; display: inline-block; content: "/"; } #nextSubscInfo > ul > li > div.priceQuantity dl.price dt, #nextSubscInfo > ul > li > div.priceQuantity dl.quantity dt{ padding-right: 10px!important; } #nextSubscInfo > ul > li > dl.subscriptionTotal{ font-weight: 700; line-height: 1.5; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; } #nextSubscInfo > ul > li > dl.subscriptionTotal dt, #nextSubscInfo > ul > li > dl.subscriptionTotal dd{ font-weight: 700; } #nextSubscInfo > ul > li > dl.subscriptionTotal > dd.subscriptionTotalPrice{ font-size:1.6rem; } #nextSubscInfo >dl.precautionsBox{ width: 100%; margin:20px auto; } #nextSubscInfo dl.precautionsBox > dt{ /*padding:15px 20px 15px 10px; font-size:1.4rem;*/ text-align:center; } dd.orderOrSubscCancelCaution > ul .subTitle, dd.nextShippingCaution > ul .subTitle{ font-weight:700; line-height:1.5; } dd.orderOrSubscCancelCaution > ul > li >ul.caution li, dd.nextShippingCaution > ul > li >ul.caution li{ display: block; /*padding-left: 0.5em;*/ margin-bottom: 5px; text-indent: 1em; position:relative; } dd.orderOrSubscCancelCaution > ul > li >ul.caution li::before, dd.nextShippingCaution > ul > li >ul.caution li::before{ content:"●"; left:-1em; display:inline-block; position:absolute; } dd.orderOrSubscCancelCaution > ul > li.returnPhone, dd.nextShippingCaution > ul > li.returnPhone{ padding-top:0.5em; } dd.orderOrSubscCancelCaution > ul > li >span.modalNote, dd.nextShippingCaution > ul > li >span.modalNote{ color: #e35555; } /** 定期変更画面 **/ .btnBlack .updateFormOpen{ line-height: 2.3rem; } #updateFormModal div#nextSubscInfo { margin: 0 auto; } #updateFormModal div#nextSubscInfo li.nextSubscription{ height:250px; } #updateFormModal div#nextSubscInfo li.nextSubscription > div.itemInfo{ line-height: 1.5; height: 30%; margin-bottom:0; } #updateFormModal div#nextSubscInfo li.nextSubscription > div.itemInfo .text p{ display:inline; } #updateFormModal div#nextSubscInfo li.nextSubscription > div.itemInfo .name, #updateFormModal div#nextSubscInfo li.nextSubscription > div.teikiCycle p >span, #updateFormModal div#nextSubscInfo li.nextSubscription > div.teikiPayment p >span{ font-weight: 700; } #nextSubscInfo .label { -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; height: 22px; padding: 5px 10px 4px; margin-left: 10px; font-size: 1.2rem; line-height: 1.2rem; background: #eeeeee; } #updateFormModal div#nextSubscInfo li.nextSubscription > div.teikiCycle, #updateFormModal div#nextSubscInfo li.nextSubscription > div.teikiPayment{ line-height: 1.5; padding-top: 10px; } #updateFormModal div#nextSubscInfo li.nextSubscription > div.teikiCycle div, #updateFormModal div#nextSubscInfo li.nextSubscription > div.teikiPayment div { height: 4.2rem; } #updateFormModal div#nextSubscInfo > ul > li > dl.subscriptionTotal{ padding-top: 0; } /************************************** .helpmodal(ポップアップモーダル表示) ***************************************/ div.nextShippingHelp{ text-align:right; } div.nextShippingHelp > div.nextShipping{ text-align:initial; } div.paymentTitle > div.paymentHelp{ font-size:1.2rem; } em.question{ display: inline-block; width: 20px; height: 20px; background: #696969; border-radius: 50%; color: white; text-align: center; line-height: 20px; margin-left:0.5rem } .nextShippingHelpModal, .paymentHelpModal{ position: fixed; top: 0; left: 0; display: none; width: 100vw; height: 100vh; z-index: 3; } .nextShippingHelpModal div, .paymentHelpModal div { position: absolute; top: 50%; left: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; width: 91vw; background: #fff 0% 0% no-repeat padding-box; -webkit-box-shadow: 0 3px 6px #00000029; box-shadow: 0 3px 6px #00000029; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 0.25rem !important; border: 1px solid #888 !important; padding: 1.5rem !important; } .nextShipping div >p >span.modalNote{ color: #e35555; } /*no108*/ .onbehalfSearchProduct .contentID { background: #eeeeee; font-size: 1.4em; font-weight: bold; margin-top: 10px; padding-top: 18px; padding-left: 16px; height: 50px; width: 605px; } .invisibleBox { display: none!important; } /*no99*/ .boldRed{ font-weight: bold; color: #e35555; } /*no99ここまで*/ /************************************** RemiseToken ***************************************/ .mainCoverBox{ height: 100%; content: ''; display: block; width: 100%; position: fixed; top: 0px;//60px; bottom: 0; left: 0; z-index: 10000; background-color: rgba(255,255,255,0.5); visibility: visible; opacity: 1; } .noBorder { border: none!important; } .mainCoverBox p { padding-bottom: 10px; } .mainCoverBox .container { margin: 10px; padding: 10px; text-align: center; } .mainCoverBox .cond { padding-bottom: 20px; padding-top: 40px; z-index: 1000; position: relative; background-color: rgb(255,255,255); max-width: fit-content; margin: 0 auto; } .mainCoverBox .iptbtn { font-size: 3rem; margin: 20px; } .mainCoverBox .iptbtn input { font-size: 3.6rem; } .mainCoverBox .rcnbtn { font-size: 2rem; margin: 10px; } .mainCoverBox .rcnbtn input { } .mainCoverBox .result { padding-top: 30px; } .mainCoverBox .message { font-size: 2rem; color: #FE0000; } .mainCoverBox .message2 { margin-bottom: 20px; border: 3px solid #AAAAAA; margin-left: 40px; margin-right: 40px; padding: 20px; font-size: 2.8rem; } .mainCoverBox .message4 { margin-bottom: 20px; margin-left: 40px; margin-right: 40px; padding: 20px; font-size: 2.8rem; } .mainCoverBox .cardinfo { font-size: 2rem; margin: 20px; text-align: center; } .mainCoverBox #list { } .mainCoverBox #list table { position: relative; text-align: center; margin: 0 auto; } .mainCoverBox #list table th { width: 320px; background-color: #DDDDDD; font-size: 3rem; padding: 2px; margin: 1px 5px; text-align: left; border: 2px solid #FFFFFF; } .mainCoverBox #list table td { font-size: 3rem; padding: 2px; margin: 1px 5px; text-align: left; } .mainCoverBox #create { padding: 10px 20px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; background: linear-gradient(#F0F0F0, #BBBBBB); font-size: 3rem; padding-left: 80px; padding-right: 80px; } .mainCoverBox #cancel,#successfulEnd,#cancel3,#cancel2,#pushYes,#pushNo,.mainCoverBox .remiseBtn { padding: 10px 20px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; background: linear-gradient(#F0F0F0, #BBBBBB); font-size: 4rem; padding-left: 25px; padding-right: 25px; color: #000000; border: 1px solid #3f3f3f; box-shadow: 2px 2px 0 rgba(187,187,187,1); -webkit-transition: background 0.2s ease, color 0.2s ease; -moz-transition: background 0.2s ease, color 0.2s ease; -o-transition: background 0.2s ease, color 0.2s ease; min-width: 250px; } .mainCoverBox #pushYes:focus,#pushNo:focus { outline: solid 4px red; } .mainCoverBox #cancel2,#reset,#reset2 { padding: 10px 35px 10px 35px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; background: linear-gradient(#F0F0F0, #BBBBBB); font-size: 3rem; min-width: 200px; } .paymentDetail #create2,#reset3 { padding: 10px 20px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; background: linear-gradient(#FFFFFF, #CCCCCC); font-size: 1.8rem; padding-left: 25px; padding-right: 25px; color: #000000; border: 1px solid #3f3f3f; box-shadow: 2px 2px 0 rgba(187,187,187,1); -webkit-transition: background 0.2s ease, color 0.2s ease; -moz-transition: background 0.2s ease, color 0.2s ease; -o-transition: background 0.2s ease, color 0.2s ease; width: 320px; margin-bottom: 20px; margin-right: 20px; } .mainCoverBox #dialog-message { font-size: 2.8rem; } @media screen and (max-width:640px) { .mainCoverBox #cancel,#successfulEnd,#cancel3,#cancel2,#pushYes,#pushNo,.mainCoverBox .remiseBtn { font-size: 3rem; } .mainCoverBox #list table th { width: 200px; font-size: 2rem; padding: 2px; margin: 1px 5px; } .mainCoverBox #list table td { font-size: 2rem; } .mainCoverBox .message2 { margin-bottom: 10px; margin-left: 20px; margin-right: 20px; padding: 10px; } .mainCoverBox .message4 { margin-bottom: 10px; margin-left: 20px; margin-right: 20px; padding: 10px; } } @media screen and (max-width:390px) { .mainCoverBox #list table th { width: 100px; font-size: 1.5rem; padding: 2px; margin: 1px 5px; } .mainCoverBox #list table td { font-size: 1.5rem; } .mainCoverBox .message2 { margin-bottom: 5px; margin-left: 10px; margin-right: 10px; padding: 5px; } .mainCoverBox .message4 { margin-bottom: 5px; margin-left: 10px; margin-right: 10px; padding: 5px; } .mainCoverBox #cancel,#successfulEnd,#cancel3,#cancel2,#pushYes,#pushNo,.mainCoverBox .remiseBtn { min-width: 100px; font-size: 2rem; } .paymentDetail #create2,#reset3 { width: 240px; font-size: 1.5rem; padding: 5px 10px; } .mainCoverBox #dialog-message { font-size: 1.5rem; } } .paymentDetail .message { font-size: 1.6rem; color: #FE0000; display: inline-block; vertical-align: middle; width: 290px; } .paymentDetail .message3 { font-size: 1.6rem; color: #FE0000; display: inline-block; vertical-align: middle; } .mainCoverBox #dialog-overlay { position: absolute; top: 0; left: 0; z-index: 99; width: 100%; height: 100%; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; background: #000000; display: none; } .mainCoverBox #dialog-box { position: absolute; z-index: 999; width: 650px; height: 230px; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); //background: #EEEEEE; background-color: rgb(255,255,255); display: none; } .mainCoverBox #dialog-box .dialog-content { text-align: center; vertical-align: middle; margin: 30px; padding: 10px 5px; } #changeTabBtn .changeSelectTabFocus, #noChangeTabBtn .changeSelectTabFocus { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; border: 2px solid #e35555; font-weight: 700; width: calc(100% - 10px); height: 40px; margin: 0px; padding: 0px; background: #FFFFFF; font-size: 1.4rem; color: #333333; cursor: pointer; transition: border 0.2s ease; } #changeTabBtn .changeSelectTab, #noChangeTabBtn .changeSelectTab { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; width: calc(100% - 10px); height: 40px; margin-right: 0px; margin-bottom: 30px; padding: 0px; background: #FFFFFF; border: 1px solid #CCCCCC; font-size: 1.4rem; color: #333333; cursor: pointer; transition: border 0.2s ease; font-weight: 400; } #emailBeforeChange { margin-top: 0px; } #noChangeTabBtn { margin-left: 0px; width: 100%; /* float: left; width: 50%; */ } #changeTabBtn { margin-left: 0px; width: 100%; } .formTable > dl > dd .flexClass { display: flex; } #EditProfileForm .changeList { border: none; } .uncheckedDisplay:checked ~ .onlyUnchecked { display: none; } /*mgm*/ .noOutline { outline: none!important; } .formFieldTitle { display: block; width: 100%; padding: 15px; background: #eeeeee; font-size: 1.4rem; line-height: 1.4; vertical-align: middle; text-align: left; position: relative; } .formFieldVal { display: block; width: 100%; box-sizing: border-box; padding: 20px 15px; vertical-align: middle; background: #FFFFFF; border-left: 1px solid #FFFFFF; font-size: 1.4rem; line-height: 1.4; text-align: left; } .formField { display: block; width: calc(100% - 40px); margin: 0 auto; border-top: 1px solid #cccccc; } /*EC function upgrade Start.*/ .cardbrand{ height: 50px; vertical-align: middle; } #registCard .cardbrand{ padding-bottom: 0px; margin-top: 0px; height: 30px; min-width: 44.75px; } .creditCardList em { vertical-align: middle; } .subsccondition{ border: 1px solid #d7073b; color: #d7073b; text-align: center; padding: 5px 10px; margin-right: 20px; background-color: #feddaa; } .cannotchange{ border: 3px solid #d7073b; color: #ffffff; text-align: center; padding: 5px 5px; margin: 10px; background-color: #fe88aa; border-radius: 8px; } #newCard.current{ display: block; } /*no194*/ #confirmModal2 .modalInner{ margin-bottom: 200px; } #selectalternativecard #cardSelectTab{ background-color: white; padding-bottom: 0px; padding-top: 0px; } #subscriptionArea .contentList{ font-size: 1.6rem; } .endOfContent{ padding-bottom: 20px; padding-left: 20px; } .listContent .listContentImg img{ max-width: 100px; max-height: 100px; } #selectalternativecard .mainTTL + .creditCardListSection .creditCardList{ margin-top: 10px; } #selectalternativecard #paymentSelectBox{ margin-top: 80px; } #selectalternativecard #paymentSelectBox{ line-height: 1.7; } #selectalternativecard .cardHelp{ margin-top: 10px; margin-bottom: 20px; } #selectalternativecard .cardHelp > ul.enableCardList{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: flex-start; justify-content: flex-start; width: 100%; margin-bottom: 20px; } #selectalternativecard .cardHelp > ul.enableCardList > li{ display: block; width: 25%; text-align: center; font-size: 1.0rem; line-height: 1.2; } #selectalternativecard .cardHelp > ul.enableCardList > li > figure{ display: block; width: 100%; margin: 0 auto 5px; } #selectalternativecard .cardHelp > ul.enableCardList > li > figure img{display: block; width: 100%; height: auto;} #selectalternativecard .cardHelp > ul.enableCardList > li > span{ display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; height: 2em; text-align: center; } #selectalternativecard .cardHelp > ul.circleList{ display: block; width: 100%; } #selectalternativecard .tagBtnSmall > li{ /*width: calc(50% - 1px);*/ width: calc(50% - 5px); } #selectalternativecard .tagBtnSmall{ width: calc(100% - 30px); padding-left: 0px; padding-right: 0px; margin-bottom: 30px; } #selectalternativecard #newCard{ font-size: 1.4rem; line-height: 24px; margin-left: 20px; margin-right: 20px; } #selectalternativecard .innerInputArea{ display: block; padding: 15px; background: #eeeeee; } #selectalternativecard .innerInputArea dl.required > dt::after { content: '必須'; display: block; width: 40px; height: 22px; border: 1px solid #e35555; background: #FFFFFF; font-size: 12px; line-height: 20px; text-align: center; color: #e35555; } #selectalternativecard .innerInputArea dl > dt { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; margin-bottom: 10px; font-size: 1.4rem; position: relative; min-height: 22px; } #selectalternativecard #newCard .innerInputArea .cardInput > dl > dd p.note, #selectalternativecard #newCard .innerInputArea > dl > dd p.note, #selectalternativecard #registCard dl#cardOwnerName > dd p.note{ margin-top: 5px; font-size: 1.2rem; } #selectalternativecard .creditCardList em{ font-weight: 500; } #selectalternativecard .innerInputArea dl { margin-bottom: 30px; } #selectalternativecard .cvn input{ width: 120px; } #selectalternativecard #registCard li > .radioBox span{ display: grid; grid-template-columns: 30% 37% 33%; grid-template-rows: 40% 60%; width: 100%; padding-top: 15px; padding-bottom: 15px; padding: 10px 30px 10px; border-top: 1px dotted #CCCCCC; border-bottom: 1px dotted #CCCCCC; flex-direction: column-reverse; flex-wrap: wrap; align-content: stretch; justify-content: space-evenly; align-items: center; justify-items: start; } #selectalternativecard #registCard li > .radioBox span p{ display: inline-block; } #selectalternativecard #registCard{ padding-left: 15px; } #selectalternativecard .registCardList .radioBox{ padding-left: 15px; } #selectalternativecard .registCardList .radioBox input:checked ~ span{ background: #f7f7f7; } #selectalternativecard #registCard li > .radioBox span::after { top: calc(50% - 6px); left: 15px; } #selectalternativecard #registCard li > .radioBox span::before { top: calc(50% - 10px); left: 11px; } #selectalternativecard #newCard { display: none; padding-left: 12px; } #selectalternativecard #newCard.current{ display: block; } #selectalternativecard #userSection { padding-bottom: 20px; } #selectalternativecard .grid1{ grid-column: 1 / 2; grid-row: 1 / 3; vertical-align: middle; } #selectalternativecard .grid2{ grid-column: 2 / 3; grid-row: 1 / 3; vertical-align: middle; } .couponCodeForSubsc{ text-align: center; padding: 10px 5px 5px 5px; font-size: 16px; } .hideContent{ display: none; } #couponFormModal .contentListItem{ border-top: 8px solid #25906C; padding: 17px 0px 0; } #couponFormModal .contentTtl{ padding-bottom: 8px; padding-top: 8px; margin-left: 20px; } #couponFormModal .ledeBox{ padding-top: 17px; } #couponFormModal .listTTL{ border-top: 4px solid #B4AA99; padding: 10px 0 10px 0; } #couponFormModal .modalInner{ width: 94%; } #couponFormModal .formTable{ width: calc(100% - 4px); } .couponInfoArea{ font-size: 14px; padding-left: 20px; padding-right: 20px; margin: 20px auto 20px; } #couponFormModal .hasIcon,#subscriptionArea .hasIcon { align-items: center; } #couponFormModal .hasIcon .img,#subscriptionArea .hasIcon .img { align-items: center; display: contents; } #couponFormModal .hasIcon img,#subscriptionArea .hasIcon img { height: 23px; width: auto; } .teikipayInfo{ padding-bottom: 30px; } #orderDetailPayment24.inlinebrPC { margin-bottom: 0px; } @media screen and (max-width: 414px) { .alignRightSP { text-align: center; /*padding-right: 60px;*/ } } @media screen and (min-width: 414px) { #orderDetailPayment24.inlinebrPC { display: inline-block; margin-bottom: 0px; } .alignRightSP { display: inline-block; } } #cartPaymentArea #cardSelectTab{ margin-bottom: 15px; } #cartPaymentArea .registCardList span p{ display: inline-block; font-size: 1.4rem; } #selectalternativecard #registCardOpen span{ text-align: center } #selectalternativecard #paymentSelectBox .paymentDetailTitle{ font-size: 16px; } #selectalternativecard .creditCardListSection:nth-of-type(1){ margin-top: -20px; } #selectalternativecard > section#userSection > section.creditCardListSection > #registCard > ul.registCardList > li> label > span::after { white-space: nowrap; border-bottom: none; } /**【FFHC v1.0】#33321 3Dセキュア2.0対応 Start.*/ #selectalternativecard > section#userSection > section.creditCardListSection > #registCard > ul.registCardList > li> label > dl.creditName { background: #f7f7f7; display: none; width: 100%; padding: 0 30px 15px; } #selectalternativecard > section#userSection > section.creditCardListSection > #registCard > ul.registCardList > li> label > dl.creditName > dt > span { border-top: none; border-bottom: none; white-space: nowrap; font-size: 12px; padding: 15px 0 5px; } #selectalternativecard > section#userSection > section.creditCardListSection > #registCard > ul.registCardList > li> label > dl.creditName > dd > p { font-size: 12px; padding: 12px 0 5px; } #selectalternativecard > section#userSection > section.creditCardListSection > #registCard > ul.registCardList > li> label > dl.creditName.required > dt > span::after{ content: '必須'; width: 36px; height: 16px; border: 1px solid #e35555; background: #FFFFFF; font-size: 11px; line-height: 17px; text-align: center; color: #e35555; position: relative; left: 50%; top: auto; } /**【FFHC v1.0】#33321 3Dセキュア2.0対応 End.*/ /*EC function upgrade End.*/ /* #33221　3Dセキュア2.0対応 決済導線のカード有効期限切れの場合のデザイン修正 Start. */ /* 決裁導線 有効期限 */ .paymentSelectBox .inputArea .selectBox .form-row.error { display: block; } /* クレカ一括 有効期限 */ #selectalternativecard .inputArea .selectBox .form-row.error { display: block; } .txGetTokenFailedMessage-d-none { display: none; } /* #33221　3Dセキュア2.0対応 決済導線のカード有効期限切れの場合のデザイン修正 End. */