-
ホーム
-
ライトノベル
-
この素晴らしい世界に祝福を！ ９ 紅の宿命 【電子特別版】
```
*/
.breadCrumbs, .breadCrumbs--pcOnly {
position: relative;
background-color: #f4f6f8;
color: #1d2334;
height: 48px;
font-size: 12px;
border-bottom: 1px solid #dedede;
}
.breadCrumbs__inner {
padding: 0 0 0 80px;
}
.breadCrumbs__inner:after {
content: "";
clear: both;
display: block;
}
.breadCrumbs__listItem {
line-height: 48px;
float: left;
padding: 0 0 0 0;
max-width: 20%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
}
.breadCrumbs__listItem + .breadCrumbs__listItem {
padding: 0 0 0 36px;
}
.breadCrumbs__listItem + .breadCrumbs__listItem::after {
content: '';
position: absolute;
width: 6px;
height: 1px;
background-color: rgba(29, 32, 52, 0.7);
top: 22px;
left: 14px;
-webkit-transform: rotate(28deg);
transform: rotate(28deg);
}
.breadCrumbs__listItem + .breadCrumbs__listItem::before {
content: '';
position: absolute;
width: 6px;
height: 1px;
background-color: rgba(29, 32, 52, 0.7);
top: 25px;
left: 14px;
-webkit-transform: rotate(-28deg);
transform: rotate(-28deg);
}
.breadCrumbs__listLink {
color: #ab8e48;
position: relative;
display: inline;
}
.detailTopItem__inner {
margin: auto;
padding: 60px 80px 60px;
box-sizing: border-box;
min-width: 1024px;
position: relative;
}
.detailTopItem__inner:after {
content: "";
clear: both;
display: block;
}
.detailTopItem__imageBox {
float: left;
padding: 0 40px 0 0;
margin: 0 0 0 0;
width: 260px;
box-sizing: border-box;
position: relative;
text-align: center;
}
.detailTopItem__button {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
}
.detailTopItem__button.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.detailTopItem__button.is-buttonDisabled span {
color: #bbbbbb !important;
}
.detailTopItem__button.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.detailTopItem__button.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.detailTopItem__button.is-buttonCancel span {
color: #999999 !important;
}
.detailTopItem__button.is-buttonCancel span::before {
color: #999999 !important;
}
.detailTopItem__imageWrapper {
position: relative;
margin: 0;
max-width: 145px;
height: 210px;
font-size: 0;
white-space: nowrap;
text-align: center;
max-width: initial;
height: auto;
margin: 0 0 30px;
}
.detailTopItem__imageWrapper.js-imgLoading > * {
opacity: 0;
}
.detailTopItem__imageWrapper.js-imgLoading .loadingIcon {
opacity: 1;
font-size: 10px;
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 1.2em;
height: 1.2em;
margin: auto;
text-indent: -9999em;
color: #d1d5d8;
background: #d1d5d8;
border-radius: 50%;
line-height: 1;
}
.detailTopItem__imageWrapper.js-imgLoading .loadingIcon::before, .detailTopItem__imageWrapper.js-imgLoading .loadingIcon::after {
position: absolute;
top: 0;
width: 1.2em;
height: 1.2em;
content: '';
background: #d1d5d8;
border-radius: 50%;
}
.detailTopItem__imageWrapper.js-imgLoading .loadingIcon::before {
left: -2em;
}
.detailTopItem__imageWrapper.js-imgLoading .loadingIcon::after {
left: 2em;
}
.detailTopItem__imageWrapper::before {
content: '';
width: 1px;
height: 210px;
display: inline-block;
margin-left: -1px;
}
.detailTopItem__image {
width: 100%;
cursor: pointer;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
}
.detailTopItem__itemNoImage {
display: inline-block;
position: relative;
background: #f5f5f5 url(../materials/noimage.png) 0 0 no-repeat;
background-size: 100% 100%;
background-position: center bottom;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
width: 145px;
height: 0;
padding: 139% 0 0;
word-wrap: break-word;
white-space: normal;
line-height: 1.4;
width: 100%;
height: 0;
padding-top: 139%;
margin: 0 0 30px;
cursor: pointer;
}
.detailTopItem__itemNoImage.is-adult {
font-size: 14px;
}
.detailTopItem__itemNoImage.is-adult::before {
content: "";
display: block;
text-indent: 0;
}
.detailTopItem__itemNoImage.is-adult div {
top: -webkit-calc(50% - 0);
top: calc(50% - 0);
padding: 10px 0 40px;
}
.detailTopItem__itemNoImage.is-adult::before {
position: absolute;
display: inline-block;
left: 0;
right: 0;
top: 55px;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #c0c0c0;
font-size: 28px;
z-index: 1;
text-align: center;
}
.detailTopItem__itemNoImageInner {
position: absolute;
left: 5px;
right: 5px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #888;
background: #f5f5f5;
padding: 10px 0;
}
.detailTopItem__noImageTitle {
font-size: 12px;
font-weight: bold;
padding: 0 0 5px;
max-height: 2.8em;
overflow: hidden;
}
.detailTopItem__noImageAuthor {
font-size: 12px;
max-height: 2.8em;
overflow: hidden;
}
.detailTopItem__infoBoxWrapper {
float: right;
width: -webkit-calc(100% - 260px);
width: calc(100% - 260px);
}
.detailTopItem__infoBox {
float: left;
width: -webkit-calc(100% - 360px);
width: calc(100% - 360px);
box-sizing: border-box;
padding: 0 0 0 0;
}
.detailTopItem__ranking {
font-size: 14px;
padding: 0 0 0 35px;
position: relative;
color: #b39347;
line-height: 1;
margin: 0 0 10px;
font-weight: bold;
}
.detailTopItem__ranking::before {
content: "";
display: block;
text-indent: 0;
}
.detailTopItem__ranking::before {
position: absolute;
top: -14px;
left: 0;
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
margin: auto 0;
height: 1.5em;
font-size: 32px;
color: #b39347;
}
.detailTopItem__label {
margin: 0 0 10px;
}
.detailTopItem__labelItem {
display: inline-block;
height: 24px;
line-height: 24px;
color: #fff;
padding: 0 8px;
background: #d4b15c;
font-size: 12px;
font-weight: bold;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
position: relative;
margin: 0 18px 0 0;
}
.detailTopItem__labelItem::before {
content: '';
position: absolute;
right: -6px;
width: 0;
height: 0;
top: 0;
border-style: solid;
border-width: 12px 7px 12px 0;
border-color: #d4b15c transparent #d4b15c #d4b15c;
}
.detailTopItem__labelItem::after {
content: '';
position: absolute;
right: -5px;
bottom: 0;
width: 5px;
height: 4px;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
}
.detailTopItem__labelItem.is-redBadge {
background: #c00;
}
.detailTopItem__labelItem.is-redBadge::before {
border-color: #c00 transparent #c00 #c00;
}
.detailTopItem__title {
font-size: 20px;
color: #1d2334;
font-weight: bold;
margin: 0 0 5px;
}
.detailTopItem__text {
color: #888;
margin: 0 0 0;
font-size: 14px;
}
.detailTopItem__text .detailTopItem__link {
color: #888;
}
.detailTopItem__priceBox {
margin: 10px 0 0;
margin: 0;
border-bottom: 1px solid #dedede;
padding: 0 0 15px 0;
}
.detailTopItem__priceStrike {
color: #888;
font-size: 14px;
}
.detailTopItem__price {
font-size: 18px;
color: #c01200;
position: relative;
font-size: 28px;
}
.detailTopItem__price .detailTopItem__tax {
color: rgba(27, 36, 51, 0.8);
}
.detailTopItem__price--original {
font-size: 18px;
color: #c01200;
position: relative;
color: rgba(20, 35, 52, 0.4);
font-size: 14px;
font-weight: normal;
display: inline-block;
}
.detailTopItem__tax {
color: #888;
font-size: 14px;
font-weight: normal;
}
.is-negative .detailTopItem__tax {
color: rgba(20, 35, 52, 0.4);
font-size: 8px;
margin: 5px 0 0;
}
.is-negative .detailTopItem__tax {
color: rgba(20, 35, 52, 0.4);
font-size: 8px;
margin: 5px 0 0;
}
.detailTopItem__discount {
color: #fff;
background-color: #cc0000;
font-weight: bold;
padding: 3px 5px;
line-height: 1;
font-size: 12px;
position: relative;
top: -3px;
}
.detailTopItem__point {
font-size: 14px;
margin: 5px 0 0 0;
}
.detailTopItem__buttonListBox {
margin: 0 0 0;
padding: 0 0 0;
background-color: #f4f6f8;
border-radius: 6px;
border: 1px solid #dedede;
}
.detailTopItem__buttonListBoxInner {
width: 100%;
padding: 25px 30px 30px;
box-sizing: border-box;
}
.detailTopItem__buttonListBoxList {
width: 100%;
padding: 5px 0 0;
margin: 0 0 0;
}
.detailTopItem__buttonListBoxList:after {
content: "";
clear: both;
display: block;
}
.detailTopItem__buttonListBoxItem {
margin: 15px 0 0;
}
.detailTopItem__buttonStyle {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
}
.detailTopItem__buttonStyle.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.detailTopItem__buttonStyle.is-buttonDisabled span {
color: #bbbbbb !important;
}
.detailTopItem__buttonStyle.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.detailTopItem__buttonStyle.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.detailTopItem__buttonStyle.is-buttonCancel span {
color: #999999 !important;
}
.detailTopItem__buttonStyle.is-buttonCancel span::before {
color: #999999 !important;
}
.detailTopItem__buttonStyle--blue {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
border: 0 solid #cccccc;
color: #fff;
box-shadow: 0 -3px 0px 0px #00a2b1 inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
cursor: pointer;
}
.detailTopItem__buttonStyle--blue.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.detailTopItem__buttonStyle--blue.is-buttonDisabled span {
color: #bbbbbb !important;
}
.detailTopItem__buttonStyle--blue.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.detailTopItem__buttonStyle--blue.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.detailTopItem__buttonStyle--blue.is-buttonCancel span {
color: #999999 !important;
}
.detailTopItem__buttonStyle--blue.is-buttonCancel span::before {
color: #999999 !important;
}
.detailTopItem__buttonStyle--blue.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.detailTopItem__buttonStyle--blue.is-buttonDisabled span {
color: #bbbbbb !important;
}
.detailTopItem__buttonStyle--blue.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.detailTopItem__buttonStyle--blue.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.detailTopItem__buttonStyle--blue.is-buttonCancel span {
color: #999999 !important;
}
.detailTopItem__buttonStyle--blue.is-buttonCancel span::before {
color: #999999 !important;
}
.detailTopItem__buttonStyle--disable {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
pointer-events: none;
}
.detailTopItem__buttonStyle--disable span {
color: #bbbbbb !important;
}
.detailTopItem__buttonStyle--disable span::before {
color: #bbbbbb !important;
}
.detailTopItem__buttonStyle--disable .detailTopItem__iconFavorite,
.detailTopItem__buttonStyle--disable .detailTopItem__iconBookshelf {
color: #bbb;
}
.detailTopItem__buttonStyle--disable .detailTopItem__iconFavorite::before,
.detailTopItem__buttonStyle--disable .detailTopItem__iconBookshelf::before {
color: #bbb;
}
.detailTopItem__buttonStyle--cancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.detailTopItem__buttonStyle--cancel span {
color: #999999 !important;
}
.detailTopItem__buttonStyle--cancel span::before {
color: #999999 !important;
}
.detailTopItem__infoBlock, .detailTopItem__infoBlock--border {
margin: 35px 0 0;
position: relative;
}
.detailTopItem__infoBlock:after, .detailTopItem__infoBlock--border:after {
content: "";
clear: both;
display: block;
}
.detailTopItem__infoBlock--border {
padding: 30px 0 0;
border-top: 1px solid #eeeeee;
}
.detailTopItem__infoBlockInner {
width: 100%;
padding: 0 0 0;
box-sizing: border-box;
}
.detailTopItem__infoBlockInner.is-title {
padding: 30px 20px 15px;
}
.detailTopItem__infoBlockTitle {
color: #1b2433;
font-size: 16px;
font-weight: bold;
text-align: left;
}
.detailTopItem__infoBlockText {
color: #1b2433;
font-size: 12px;
margin: 10px 0 0;
}
.detailTopItem__infoBlockSwichTextBox {
max-height: 100px;
overflow: hidden;
position: relative;
-webkit-transition: height .3s ease;
transition: height .3s ease;
margin: 0 0 40px 0;
}
.detailTopItem__infoBlockSwichTextBox::after {
content: '';
position: absolute;
height: 65px;
width: 100%;
bottom: 0;
opacity: 1;
-webkit-transition: opacity .3s ease;
transition: opacity .3s ease;
background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, white 79%, white 100%);
background: linear-gradient(rgba(255, 255, 255, 0) 0%, white 79%, white 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.detailTopItem__infoBlockSwichTextBox.is-show {
height: auto;
max-height: none;
overflow: visible;
}
.detailTopItem__infoBlockSwichTextBox.is-show::after {
opacity: 0;
}
.detailTopItem__infoBlockSwichTextBox.is-show + .detailTopItem__moreButton {
display: none;
}
.detailTopItem__infoBlockSwichTextBox.is-load {
max-height: 100px;
}
.detailTopItem__infoBlockSwichTextBox.is-load::after {
opacity: 1;
}
.detailTopItem__infoBlockSwichTextBox.is-load + .detailTopItem__moreButton {
display: none;
}
.detailTopItem__infoBlockSwichText, .detailTopItem__infoBlockSwichText--more {
color: #1b2433;
font-size: 14px;
margin: 10px 0 0;
}
.detailTopItem__infoBlockSwichText + .detailTopItem__infoBlockTitle, .detailTopItem__infoBlockSwichText--more + .detailTopItem__infoBlockTitle {
margin: 25px 0 0;
}
.detailTopItem__infoBlockSwichText--more {
display: none;
}
.detailTopItem__infoBlockBookTitle {
width: -webkit-calc(100% - 74px);
width: calc(100% - 74px);
display: inline-block;
vertical-align: middle;
text-align: left;
float: left;
font-size: 12px;
}
.detailTopItem__notificationItem {
margin: 20px 0 0;
position: relative;
display: none;
}
.detailTopItem__notificationItem:after {
content: "";
clear: both;
display: block;
}
.detailTopItem__notificationItem:nth-child(-n + 3) {
display: block;
}
.detailTopItem__toggleBox {
width: 86px;
float: left;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
height: 22px;
}
.detailTopItem__infoBlockButtonBox {
margin: 0px 0 5px;
text-align: center;
}
.detailTopItem__moreButtonWrapper {
text-align: center;
margin: 0 0 20px 0;
}
.detailTopItem__moreButton {
margin: 20px 0 0;
border: 1px solid #cccccc;
text-align: center;
position: relative;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
display: inline-block;
line-height: 1;
border-radius: 17px;
padding: 6px 34px 8px 13px;
position: relative;
width: auto;
color: #1b2433;
font-size: 14px;
cursor: pointer;
background-color: #fff;
position: absolute;
margin: -25px auto 25px;
top: 150px;
left: 0;
right: 0;
display: block;
width: 120px;
box-sizing: border-box;
}
.detailTopItem__moreButton::after {
content: '';
position: absolute;
right: 20px;
background-color: #cccccc;
width: 1px;
height: 11px;
top: 40%;
margin: 0 0 0 0;
-webkit-transform: rotate(-40deg) translateY(-50%);
transform: rotate(-40deg) translateY(-50%);
}
.detailTopItem__moreButton::before {
content: '';
position: absolute;
right: 21px;
background-color: #cccccc;
width: 1px;
height: 11px;
top: 40%;
margin: 0 0 0 0;
-webkit-transform: rotate(40deg) translateY(-50%);
transform: rotate(40deg) translateY(-50%);
}
.detailTopItem__infoBlockLabelBox {
margin: 0 0 5px;
text-align: left;
min-height: 55px;
}
.detailTopItem__taglist:after {
content: "";
clear: both;
display: block;
}
.detailTopItem__tagItem {
display: block;
box-sizing: border-box;
margin: 10px 0 0;
}
.detailTopItem__tagItemInner {
border: 1px solid #bda450;
padding: 5px 12px;
box-sizing: border-box;
color: #bda450;
border-radius: 12px;
display: inline-block;
font-size: 14px;
line-height: 1;
}
.detailTopItem__starBox {
margin: 20px 0 0;
}
.detailTopItem__starBox:after {
content: "";
clear: both;
display: block;
}
.detailTopItem__starList {
display: inline-block;
float: left;
margin: 0 5px 0 0;
font-size: 20px;
line-height: 1;
position: relative;
top: -8px;
}
.detailTopItem__starList:after {
content: "";
clear: both;
display: block;
}
.detailTopItem__starItem, .detailTopItem__starItem--on {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
}
.detailTopItem__starItem::before, .detailTopItem__starItem--on::before {
content: "";
display: block;
text-indent: 0;
}
.detailTopItem__starItem::before, .detailTopItem__starItem--on::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.detailTopItem__starItem--on {
color: #ffb349;
}
.detailTopItem__starItem--half {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
}
.detailTopItem__starItem--half::before {
content: "";
display: block;
text-indent: 0;
}
.detailTopItem__starItem--half::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.detailTopItem__starItem--half::after {
content: "";
display: block;
text-indent: 0;
}
.detailTopItem__starItem--half::after {
color: #ffb349;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
right: 50%;
overflow: hidden;
}
.detailTopItem__starNumber {
display: inline-block;
font-size: 12px;
float: left;
line-height: 1;
position: relative;
color: #888888;
}
.detailTopItem__starLink {
display: inline-block;
font-size: 14px;
float: left;
line-height: 1;
position: relative;
top: 0;
color: #ab8e48;
margin: 0 0 0 10px;
}
.detailTopItem__terminal {
background-color: #f4f6f8;
padding: 20px 20px 10px;
box-sizing: border-box;
margin: 25px 0 0;
}
.detailTopItem__terminal:after {
content: "";
clear: both;
display: block;
}
.detailTopItem__terminalText {
font-size: 12px;
line-height: 1;
display: table;
vertical-align: top;
}
.detailTopItem__terminalTitleWrap {
display: table-cell;
line-height: 16px;
position: relative;
vertical-align: top;
}
@media screen and (max-width: 1150px) {
.detailTopItem__terminalTitleWrap {
display: block;
}
}
.detailTopItem__terminalTitleText {
color: #1d2334;
border-right: 1px dotted #ccc;
padding: 2px 12px 2px 0;
white-space: nowrap;
text-align: left;
}
@media screen and (max-width: 1150px) {
.detailTopItem__terminalTitleText {
border-right: 0px dotted #ccc;
}
}
.detailTopItem__terminalItemWrap {
display: table-cell;
position: relative;
padding: 0 0 0 12px;
width: 100%;
}
@media screen and (max-width: 1150px) {
.detailTopItem__terminalItemWrap {
margin: 10px 0 0;
padding: 0 0 0 0;
display: block;
}
}
.detailTopItem__terminalItemList {
position: relative;
top: -14px;
width: 100%;
}
.detailTopItem__terminalItemList:after {
content: "";
clear: both;
display: block;
}
.detailTopItem__terminalItem, .detailTopItem__terminalItem--iconVita, .detailTopItem__terminalItem--iconReader, .detailTopItem__terminalItem--iconAndroid, .detailTopItem__terminalItem--iconIphone, .detailTopItem__terminalItem--iconBrowser {
font-size: 12px;
color: #1d2334;
line-height: 1;
padding: 0px 15px 0px 30px;
position: relative;
float: left;
line-height: 16px;
margin: 16px 0 0 0;
width: 50%;
min-width: 150px;
box-sizing: border-box;
text-align: left;
}
@media screen and (max-width: 1280px) {
.detailTopItem__terminalItem, .detailTopItem__terminalItem--iconVita, .detailTopItem__terminalItem--iconReader, .detailTopItem__terminalItem--iconAndroid, .detailTopItem__terminalItem--iconIphone, .detailTopItem__terminalItem--iconBrowser {
width: 100%;
}
}
.detailTopItem__terminalItem::before, .detailTopItem__terminalItem--iconVita::before, .detailTopItem__terminalItem--iconReader::before, .detailTopItem__terminalItem--iconAndroid::before, .detailTopItem__terminalItem--iconIphone::before, .detailTopItem__terminalItem--iconBrowser::before {
position: absolute;
top: -3px;
left: 0%;
margin: auto 0;
height: 1.1em;
font-size: 28px;
color: #666666;
}
.detailTopItem__terminalItem--iconVita::before {
content: "";
display: block;
text-indent: 0;
}
.detailTopItem__terminalItem--iconReader::before {
content: "";
display: block;
text-indent: 0;
}
.detailTopItem__terminalItem--iconAndroid::before {
content: "";
display: block;
text-indent: 0;
}
.detailTopItem__terminalItem--iconIphone::before {
content: "";
display: block;
text-indent: 0;
}
.detailTopItem__terminalItem--iconBrowser::before {
content: "";
display: block;
text-indent: 0;
}
.detailTopItem__infoList, .detailTopItem__infoList--more {
margin: 15px 0 0;
}
.detailTopItem__infoList:after, .detailTopItem__infoList--more:after {
content: "";
clear: both;
display: block;
}
.detailTopItem__infoList--more {
text-align: left;
}
.detailTopItem__infoListItem {
display: inline-block;
width: -webkit-calc(50% - 5px);
width: calc(50% - 5px);
margin: 5px 0 0;
vertical-align: top;
font-size: 0px;
}
@media screen and (max-width: 1280px) {
.detailTopItem__infoListItem {
width: 100%;
}
}
.detailTopItem__infoListTitle {
color: #1d2334;
font-size: 14px;
position: relative;
max-width: 170px;
width: 35%;
display: inline-block;
vertical-align: top;
word-break: break-all;
padding: 0 10px 0 0;
box-sizing: border-box;
}
.detailTopItem__infoListTitle::after {
content: ':';
position: absolute;
right: 0;
top: 0;
}
.detailTopItem__infoListText {
font-size: 14px;
color: #1d2334;
display: inline-block;
width: 65%;
padding: 0 0 0 10px;
box-sizing: border-box;
}
.detailTopItem__infoListLink {
color: #ab8e48;
}
.detailTopItem__staffComment {
margin: 25px 0 0;
}
.detailTopItem__staffCommentInner {
width: 100%;
padding: 0;
box-sizing: border-box;
}
.detailTopItem__staffCommentWrapper {
display: table;
}
.detailTopItem__staffCommentWrapper:after {
content: "";
clear: both;
display: block;
}
.detailTopItem__staffCommentFaceBox {
width: 50px;
text-align: center;
display: table-cell;
padding: 0 5px 0 0;
vertical-align: middle;
}
.detailTopItem__staffCommentName {
font-size: 12px;
font-weight: bold;
color: #aaa;
white-space: nowrap;
margin: 2px 0 0;
position: relative;
height: 50px;
vertical-align: bottom;
display: table-cell;
top: 5px;
}
.detailTopItem__staffCommentName::after {
background-image: url(../materials/sprites.png);
background-position: -248px -69px;
width: 26.5px;
height: 26.5px;
background-size: 290px 251.5px;
content: '';
position: absolute;
top: -2px;
left: 50%;
-webkit-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
}
.detailTopItem__staffCommentCommentBox {
width: 2000px;
display: table-cell;
}
.detailTopItem__staffCommentBalloon {
width: 100%;
position: relative;
background: #ffffff;
border: 1px solid #cccccc;
border-radius: 5px;
font-size: 14px;
padding: 6px 10px;
min-height: 42px;
box-sizing: border-box;
}
.detailTopItem__staffCommentBalloon::after {
right: 100%;
top: 50%;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-right-color: #ffffff;
border-width: 5px;
margin-top: -5px;
}
.detailTopItem__staffCommentBalloon::before {
right: 100%;
top: 50%;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(204, 204, 204, 0);
border-right-color: #cccccc;
border-width: 7px;
margin-top: -7px;
}
.detailTopItem__buttonListBoxWrapper {
float: right;
width: 320px;
}
.detailTopItem__iconBuy {
position: relative;
display: inline-block;
padding: 0 0 0 30px;
}
.detailTopItem__iconBuy::before {
content: "";
display: block;
text-indent: 0;
}
.detailTopItem__iconBuy::before {
position: absolute;
top: -10px;
left: 0;
margin: auto 0;
height: 1.1em;
font-size: 30px;
color: #fff;
}
.detailTopItem__iconCart {
position: relative;
display: inline-block;
padding: 0 0 0 30px;
}
.detailTopItem__iconCart::before {
content: "";
display: block;
text-indent: 0;
}
.detailTopItem__iconCart::before {
position: absolute;
top: -10px;
left: 0;
margin: auto 0;
height: 1.1em;
font-size: 30px;
color: #fff;
}
.detailTopItem__iconBookshelf {
position: relative;
display: inline-block;
padding: 0 0 0 30px;
}
.detailTopItem__iconBookshelf::before {
content: "";
display: block;
text-indent: 0;
}
.detailTopItem__iconBookshelf::before {
position: absolute;
top: -10px;
left: 0;
margin: auto 0;
height: 1.1em;
font-size: 30px;
color: #fff;
}
.detailTopItem__iconFavorite {
position: relative;
display: inline-block;
padding: 0 0 0 30px;
color: #ab8e48;
}
.detailTopItem__iconFavorite::before {
content: "";
display: block;
text-indent: 0;
}
.detailTopItem__iconFavorite::before {
position: absolute;
top: -10px;
left: 0;
margin: auto 0;
height: 1.1em;
font-size: 30px;
color: #ab8e48;
}
.detailTopItem__campaignBox {
margin: 35px 0 0;
}
.detailTopItem__campaignList {
margin: 0 0 10px 0;
}
.detailTopItem__campaignTitle {
font-size: 16px;
}
.detailTopItem__campaignItem {
border-top: 1px dotted #dedede;
padding: 15px 0;
}
.detailTopItem__campaignItem:first-child {
border-top: 0px dotted #dedede;
}
.detailTopItem__campaignLink {
color: #cc0000;
display: block;
font-size: 14px;
}
.detailTopItem__arrowLink {
text-align: right;
display: block;
color: #ab8e48;
font-size: 14px;
position: relative;
padding: 0 16px 0 0;
}
.detailTopItem__arrowLink::before {
content: '';
position: absolute;
right: 14px;
background-color: #969696;
width: 1px;
height: 9px;
top: 50%;
margin: 0 0 0 0;
-webkit-transform: rotate(50deg) translateY(-50%);
transform: rotate(50deg) translateY(-50%);
}
.detailTopItem__arrowLink::after {
content: '';
position: absolute;
right: 7px;
background-color: #969696;
width: 1px;
height: 9px;
top: 50%;
margin: -6px 0 0 0;
-webkit-transform: rotate(-50deg) translateY(-50%);
transform: rotate(-50deg) translateY(-50%);
}
.detailTopItem__autoButtonBox {
margin: 15px 0 0;
padding: 0 30px;
}
.detailTopItem__alertBox {
border-radius: 6px;
position: fixed;
top: 40px;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
min-width: 400px;
height: 40px;
z-index: 1002;
box-shadow: 2.828px 2.828px 8px 0px rgba(0, 0, 0, 0.15);
background-color: #3cbba8;
box-sizing: border-box;
padding: 0 40px 0 40px;
display: none;
}
.detailTopItem__alertBox.is-alertRed {
background-color: #c00;
}
.detailTopItem__alertText {
color: #fff;
text-align: center;
line-height: 40px;
font-size: 14px;
}
.detailTopItem__alertClose {
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
right: 10px;
margin: auto 0;
padding: 0;
cursor: pointer;
width: 20px;
height: 20px;
}
.detailTopItem__alertClose::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 10px;
margin: auto 0;
padding: 0;
width: 1px;
height: 20px;
background: #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.detailTopItem__alertClose::before {
display: block;
content: '';
position: absolute;
top: 50%;
left: 0px;
width: 20px;
height: 1px;
margin-top: 0;
background: #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.detailTopItem__planText {
border: 2px solid #0093bf;
text-align: center;
padding: 11px;
line-height: 1;
color: #0093bf;
margin: 0 0 16px;
font-size: 14px;
font-weight: bold;
}
.detailTopItem__downloadWrapper {
text-align: center;
}
.detailTopItem__download, .detailTopItem__download--color02 {
font-size: 14px;
padding: 0 0 0 28px;
position: relative;
color: #cdb354;
line-height: 1;
margin: 20px 0 0;
display: inline-block;
}
.detailTopItem__download::before, .detailTopItem__download--color02::before {
content: "";
display: block;
text-indent: 0;
}
.detailTopItem__download::before, .detailTopItem__download--color02::before {
position: absolute;
top: -8px;
left: 0;
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
margin: auto 0;
height: 1.5em;
font-size: 28px;
color: #cdb354;
}
.detailTopItem__download--color02 {
color: #af9c5a;
}
.detailTopItem__download--color02::before {
color: #af9c5a;
}
.detailTopItem__deadlineList {
color: #cc0000;
font-size: 14px;
margin: 15px 0 0;
}
.detailTopItem__deadlineList:after {
content: "";
clear: both;
display: block;
}
.detailTopItem__deadlineTerm {
width: 90px;
float: left;
position: relative;
}
.detailTopItem__deadlineTerm::after {
content: ':';
position: absolute;
right: 0;
}
.detailTopItem__deadlineDescription {
padding: 0 0 0 15px;
float: left;
width: -webkit-calc(100% - 105px);
width: calc(100% - 105px);
}
.detailTopItem__badge {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
position: absolute;
left: -4px;
bottom: 10px;
height: 24px;
line-height: 24px;
color: #fff;
padding: 0 8px;
display: block;
background: #c01d20;
font-size: 12px;
font-weight: bold;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
z-index: 3;
bottom: 20px;
}
.detailTopItem__badge::before {
content: '';
position: absolute;
right: -6px;
width: 0;
height: 0;
top: 0;
border-style: solid;
border-width: 12px 7px 12px 0;
border-color: #c01d20 transparent #c01d20 #c01d20;
}
.detailTopItem__badge::after {
content: '';
position: absolute;
right: -5px;
bottom: 0;
width: 5px;
height: 4px;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
}
.detailTopItem__badge.is-goldBadge {
background: #d4b15c;
}
.detailTopItem__badge.is-goldBadge::before {
border-color: #d4b15c transparent #d4b15c #d4b15c;
}
.detailTopItem__noImageTitle {
font-size: 12px;
font-weight: bold;
padding: 0 0 5px;
max-height: 2.8em;
overflow: hidden;
}
.detailTopItem__noImageAuthor {
font-size: 12px;
max-height: 2.8em;
overflow: hidden;
}
.detailTopItem__noImageItem {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.detailTopItem__moduleCaution {
color: #888888;
font-size: 12px;
margin: 15px 0 0;
}
.detailTopItem__transitionBox {
font-size: 14px;
color: #ab8e48;
float: right;
margin: 10px 80px 0 0;
}
.detailTopItem__transitionText {
display: inline-block;
margin: 0 20px;
}
.detailTopItem__transitionLinkNext {
position: relative;
padding: 0 18px 0 0;
color: #ab8e48;
}
.detailTopItem__transitionLinkNext::after {
content: '';
position: absolute;
width: 10px;
height: 1px;
background-color: #c8c8c9;
top: 5px;
right: 0px;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
.detailTopItem__transitionLinkNext::before {
content: '';
position: absolute;
width: 10px;
height: 1px;
background-color: #c8c8c9;
top: 11px;
right: 0px;
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
.detailTopItem__transitionLinkNext.is-disable {
pointer-events: none;
color: #c8c8c9;
}
.detailTopItem__transitionLinkPrev {
position: relative;
padding: 0 0 0 18px;
color: #ab8e48;
}
.detailTopItem__transitionLinkPrev::after {
content: '';
position: absolute;
width: 10px;
height: 1px;
background-color: #c8c8c9;
top: 5px;
left: 0px;
-webkit-transform: rotate(140deg);
transform: rotate(140deg);
}
.detailTopItem__transitionLinkPrev::before {
content: '';
position: absolute;
width: 10px;
height: 1px;
background-color: #c8c8c9;
top: 11px;
left: 0px;
-webkit-transform: rotate(-140deg);
transform: rotate(-140deg);
}
.detailTopItem__transitionLinkPrev.is-disable {
pointer-events: none;
color: #c8c8c9;
}
.detailTopItem__transitionText {
color: #ab8e48;
}
.detailTopItem__notificationMoreButtonWrapper {
text-align: center;
margin: 16px 0 0;
}
.detailTopItem__notificationMoreButton {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
display: none;
position: relative;
top: 0;
margin: 0 auto;
width: 120px;
cursor: pointer;
}
.detailTopItem__notificationMoreButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.detailTopItem__notificationMoreButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.detailTopItem__notificationMoreButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.detailTopItem__notificationMoreButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.detailTopItem__notificationMoreButton.is-buttonCancel span {
color: #999999 !important;
}
.detailTopItem__notificationMoreButton.is-buttonCancel span::before {
color: #999999 !important;
}
.summaryItem {
position: relative;
}
.summaryItem__titleBlock {
margin: 0 0 0;
padding: 0 80px 0;
width: 100%;
min-width: 1024px;
}
.summaryItem__titleBlock:after {
content: "";
clear: both;
display: block;
}
.summaryItem__titleBlockInner {
border-top: 1px solid #eeeeee;
padding: 55px 0 0;
position: relative;
}
.summaryItem__titleBlockTitle {
color: #1b2433;
font-size: 20px;
font-weight: bold;
}
.summaryItem__inner {
padding: 40px 80px 30px;
min-width: 1024px;
width: 100%;
}
.summaryItem__list {
font-size: 0;
letter-spacing: -0.1em;
}
.summaryItem__list:after {
content: "";
clear: both;
display: block;
}
.summaryItem__listItem {
margin: 0 0 30px 36px;
width: -webkit-calc((100% - 72px)/3);
width: calc((100% - 72px)/3);
display: inline-block;
vertical-align: top;
}
.summaryItem__listItem:after {
content: "";
clear: both;
display: block;
}
.summaryItem__listItem:first-child {
margin: 0 0 30px 0;
}
.summaryItem__listItem:nth-child(3n + 1) {
margin: 0 0 30px 0;
}
.summaryItem__listItemInner {
width: 100%;
box-sizing: border-box;
}
.summaryItem__imageBox {
float: left;
padding: 0 20px 0 0;
width: 35%;
box-sizing: border-box;
position: relative;
text-align: center;
}
.summaryItem__imageWrapper {
position: relative;
width: 100%;
font-size: 0;
}
.summaryItem__imageWrapper.js-imgLoading > * {
opacity: 0;
}
.summaryItem__imageWrapper.js-imgLoading .loadingIcon {
opacity: 1;
font-size: 10px;
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 1.2em;
height: 1.2em;
margin: auto;
text-indent: -9999em;
color: #d1d5d8;
background: #d1d5d8;
border-radius: 50%;
line-height: 1;
}
.summaryItem__imageWrapper.js-imgLoading .loadingIcon::before, .summaryItem__imageWrapper.js-imgLoading .loadingIcon::after {
position: absolute;
top: 0;
width: 1.2em;
height: 1.2em;
content: '';
background: #d1d5d8;
border-radius: 50%;
}
.summaryItem__imageWrapper.js-imgLoading .loadingIcon::before {
left: -2em;
}
.summaryItem__imageWrapper.js-imgLoading .loadingIcon::after {
left: 2em;
}
.summaryItem__image {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
display: inline-block;
min-width: 75%;
max-width: 100%;
max-height: 100%;
}
.summaryItem__image.is-horizontal {
width: 100%;
}
.summaryItem__image.is-vertical {
height: 100%;
width: auto;
}
.summaryItem__infoBox {
float: right;
width: 65%;
box-sizing: border-box;
padding: 0 20px 0 0;
}
.summaryItem__title {
font-size: 16px;
color: #1d2334;
font-weight: bold;
}
.summaryItem__text {
color: #888;
margin: 5px 0 0;
font-size: 14px;
}
.summaryItem__text .summaryItem__link {
color: #888;
}
.summaryItem__date {
color: #888;
margin: 3px 0 0;
font-size: 10px;
}
.summaryItem__button, .summaryItem__button--iconCart {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
height: 36px;
line-height: 36px;
border-radius: 18px;
font-size: 14px;
font-weight: bold;
background-color: #ff9000;
box-shadow: 0 -2px 0 0 #e58100 inset;
color: #fff;
margin: 10px 0 0;
padding: 0 15px 0;
width: 96px;
}
.summaryItem__button--iconCart::before {
content: "";
display: block;
text-indent: 0;
}
.summaryItem__button--iconCart::before {
position: relative;
display: inline-block;
top: -2px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 34px;
line-height: 1;
}
.summaryItem__button--iconCartBlue {
display: inline-block;
text-align: center;
position: relative;
height: 34px;
line-height: 34px;
border-radius: 18px;
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 0 15px 0;
width: 80px;
box-shadow: 0 -2px 0 0 #00abbb inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
margin: 5px 0 0;
}
.summaryItem__button--iconCartBlue::before {
content: "";
display: block;
text-indent: 0;
}
.summaryItem__button--iconCartBlue::before {
position: relative;
display: inline-block;
top: 0px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 28px;
line-height: 1;
}
.summaryItem__button--iconCartBlue.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.summaryItem__button--iconCartBlue.is-buttonDisabled span {
color: #bbbbbb !important;
}
.summaryItem__button--iconCartBlue.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.summaryItem__button--iconCartBlue.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.summaryItem__button--iconCartBlue.is-buttonCancel span {
color: #999999 !important;
}
.summaryItem__button--iconCartBlue.is-buttonCancel span::before {
color: #999999 !important;
}
.summaryItem__button--iconCartBlue::before {
content: "";
display: block;
text-indent: 0;
}
.summaryItem__button--bookShelfAdd {
display: inline-block;
text-align: center;
position: relative;
height: 34px;
line-height: 34px;
border-radius: 18px;
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 0 15px 0;
width: 80px;
box-shadow: 0 -2px 0 0 #00abbb inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
margin: 5px 0 0;
}
.summaryItem__button--bookShelfAdd::before {
content: "";
display: block;
text-indent: 0;
}
.summaryItem__button--bookShelfAdd::before {
position: relative;
display: inline-block;
top: 0px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 28px;
line-height: 1;
}
.summaryItem__button--bookShelfAdd.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.summaryItem__button--bookShelfAdd.is-buttonDisabled span {
color: #bbbbbb !important;
}
.summaryItem__button--bookShelfAdd.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.summaryItem__button--bookShelfAdd.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.summaryItem__button--bookShelfAdd.is-buttonCancel span {
color: #999999 !important;
}
.summaryItem__button--bookShelfAdd.is-buttonCancel span::before {
color: #999999 !important;
}
.summaryItem__button--bookShelfAdd::before {
content: "";
display: block;
text-indent: 0;
}
.summaryItem__itemNoImageWrapper {
position: relative;
margin: 0;
max-width: 145px;
height: 210px;
font-size: 0;
white-space: nowrap;
text-align: center;
}
.summaryItem__itemNoImageWrapper.js-imgLoading > * {
opacity: 0;
}
.summaryItem__itemNoImageWrapper.js-imgLoading .loadingIcon {
opacity: 1;
font-size: 10px;
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 1.2em;
height: 1.2em;
margin: auto;
text-indent: -9999em;
color: #d1d5d8;
background: #d1d5d8;
border-radius: 50%;
line-height: 1;
}
.summaryItem__itemNoImageWrapper.js-imgLoading .loadingIcon::before, .summaryItem__itemNoImageWrapper.js-imgLoading .loadingIcon::after {
position: absolute;
top: 0;
width: 1.2em;
height: 1.2em;
content: '';
background: #d1d5d8;
border-radius: 50%;
}
.summaryItem__itemNoImageWrapper.js-imgLoading .loadingIcon::before {
left: -2em;
}
.summaryItem__itemNoImageWrapper.js-imgLoading .loadingIcon::after {
left: 2em;
}
.summaryItem__itemNoImageWrapper::before {
content: '';
width: 1px;
height: 210px;
display: inline-block;
margin-left: -1px;
}
.summaryItem__itemNoImage {
display: inline-block;
position: relative;
background: #f5f5f5 url(../materials/noimage.png) 0 0 no-repeat;
background-size: 100% 100%;
background-position: center bottom;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
width: 145px;
height: 0;
padding: 139% 0 0;
word-wrap: break-word;
white-space: normal;
line-height: 1.4;
width: 100%;
}
.summaryItem__itemNoImage.is-adult {
font-size: 14px;
}
.summaryItem__itemNoImage.is-adult::before {
content: "";
display: block;
text-indent: 0;
}
.summaryItem__itemNoImage.is-adult div {
top: -webkit-calc(50% - 0);
top: calc(50% - 0);
padding: 10px 0 40px;
}
.summaryItem__itemNoImage.is-adult::before {
position: absolute;
display: inline-block;
left: 0;
right: 0;
top: 55px;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #c0c0c0;
font-size: 28px;
z-index: 1;
text-align: center;
}
.summaryItem__itemNoImageInner {
position: absolute;
left: 5px;
right: 5px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #888;
background: #f5f5f5;
padding: 10px 0;
}
.summaryItem__noImageTitle {
font-size: 12px;
font-weight: bold;
padding: 0 0 5px;
max-height: 2.8em;
overflow: hidden;
}
.summaryItem__noImageAuthor {
font-size: 12px;
max-height: 2.8em;
overflow: hidden;
}
.summaryItem__label {
line-height: 1;
margin: 0 0 8px;
}
.summaryItem__labelItem {
display: inline-block;
padding: 3px 5px 2px;
box-sizing: border-box;
color: #bda450;
border: 1px solid #bda450;
font-size: 14px;
line-height: 1;
}
.summaryItem__linkBlock {
margin: 0 0 0;
border-top: 1px solid #eeeeee;
position: relative;
}
.summaryItem__linkBlock:after {
content: "";
clear: both;
display: block;
}
.summaryItem__linkBlockInner {
width: 100%;
}
.summaryItem__linkBlockItem {
border-top: 1px solid #eeeeee;
color: #1b2433;
font-size: 14px;
}
.summaryItem__linkBlockItem:first-child {
border-top: 0px solid #eeeeee;
}
.summaryItem__linkBlockLink {
padding: 18px 0;
position: relative;
display: block;
text-align: center;
font-size: 13px;
color: #1b2433;
}
.summaryItem__linkBlockLink::after {
background-image: url(../materials/sprites.png);
background-position: -13px -239.5px;
width: 8px;
height: 12px;
background-size: 290px 251.5px;
content: '';
position: absolute;
right: 15px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.summaryItem__starBox {
margin: 0 0 0;
}
.summaryItem__starBox:after {
content: "";
clear: both;
display: block;
}
.summaryItem__star {
margin: 6px 0 0;
}
.summaryItem__star:after {
content: "";
clear: both;
display: block;
}
.summaryItem__starList {
display: inline-block;
float: left;
margin: 0 5px 0 0;
font-size: 20px;
line-height: 1;
}
.summaryItem__starList:after {
content: "";
clear: both;
display: block;
}
.summaryItem__starItem {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
}
.summaryItem__starItem::before {
content: "";
display: block;
text-indent: 0;
}
.summaryItem__starItem::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.summaryItem__starItem--on {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
color: #ffb349;
}
.summaryItem__starItem--on::before {
content: "";
display: block;
text-indent: 0;
}
.summaryItem__starItem--on::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.summaryItem__starItem--half {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
}
.summaryItem__starItem--half::before {
content: "";
display: block;
text-indent: 0;
}
.summaryItem__starItem--half::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.summaryItem__starItem--half::after {
content: "";
display: block;
text-indent: 0;
}
.summaryItem__starItem--half::after {
color: #ffb349;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
right: 50%;
overflow: hidden;
}
.summaryItem__starNumber {
display: inline-block;
font-size: 12px;
float: left;
line-height: 1;
position: relative;
top: 7px;
color: #888888;
}
.summaryItem__priceBox {
margin: 10px 0 0;
margin: 5px 0 0;
}
.summaryItem__priceStrike {
color: #888;
font-size: 14px;
}
.summaryItem__price {
font-size: 18px;
color: #c01200;
position: relative;
}
.summaryItem__price .summaryItem__tax {
font-size: 12px;
}
.summaryItem__price--original {
font-size: 18px;
color: #c01200;
position: relative;
color: rgba(20, 35, 52, 0.4);
font-size: 14px;
font-weight: normal;
display: inline-block;
}
.summaryItem__tax {
color: #888;
font-size: 14px;
font-weight: normal;
}
.is-negative .summaryItem__tax {
color: rgba(20, 35, 52, 0.4);
font-size: 8px;
margin: 5px 0 0;
}
.is-negative .summaryItem__tax {
color: rgba(20, 35, 52, 0.4);
font-size: 8px;
margin: 5px 0 0;
}
.summaryItem__moreLinkWrapper {
position: absolute;
top: 60px;
right: 0;
}
.summaryItem__moreLink {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
}
.summaryItem__moreLink.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.summaryItem__moreLink.is-buttonDisabled span {
color: #bbbbbb !important;
}
.summaryItem__moreLink.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.summaryItem__moreLink.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.summaryItem__moreLink.is-buttonCancel span {
color: #999999 !important;
}
.summaryItem__moreLink.is-buttonCancel span::before {
color: #999999 !important;
}
.summaryItem + .choiceProductList--wide {
border-top: 1px solid #eeeeee;
padding: 55px 0 0 0;
}
.summaryItem + .choiceProductList--wide .choiceProductList__moreLinkWrapper {
top: 55px;
}
.summaryItem + .choiceProductList--wide .choiceProductList__list {
margin: 35px 0 0;
}
.summaryItem + .choiceProductList--wide .choiceProductList__title {
margin: 0 0 20px;
}
.summaryItem + .recommendModule::before {
content: '';
position: absolute;
left: 10px;
top: -38px;
right: 10px;
height: 1px;
background: #eee;
}
/*
#styleguide
レビュー
書籍詳細
@
```
-
クラピカ、久しぶりの登場！
題の通り、クラピカ久しぶりの登場。映画用の番外編除けばまともに活躍してるのは10年ぶりぐらいな気がする。
投稿日：2016/01/01
報告する
-
クラピカ、久しぶりの登場！
題の通り、クラピカ久しぶりの登場。映画用の番外編除けばまともに活躍してるのは10年ぶりぐらいな気がする。
投稿日：2016/01/01
報告する
-
クラピカ、久しぶりの登場！
題の通り、クラピカ久しぶりの登場。映画用の番外編除けばまともに活躍してるのは10年ぶりぐらいな気がする。
投稿日：2016/01/01
報告する
-
クラピカ、久しぶりの登場！
題の通り、クラピカ久しぶりの登場。映画用の番外編除けばまともに活躍してるのは10年ぶりぐらいな気がする。
投稿日：2016/01/01
報告する
すべてのレビューを見る
```
*/
.reviewBlock {
padding: 0 80px 40px;
}
.reviewBlock + aside {
position: relative;
}
.reviewBlock + aside::before {
content: '';
position: absolute;
top: -40px;
width: 100%;
height: 1px;
background: #eee;
}
.reviewBlock__inner {
border-top: 1px solid #eeeeee;
padding: 60px 0 40px;
}
.reviewBlock__inner:after {
content: "";
clear: both;
display: block;
}
.reviewBlock__title {
font-size: 20px;
font-weight: bold;
color: #182432;
margin: 0 0 25px;
word-wrap: break-word;
}
.reviewBlock__writeBox {
width: 300px;
float: left;
}
.reviewBlock__scoreBox {
float: left;
width: -webkit-calc(100% - 300px);
width: calc(100% - 300px);
padding: 0 0 0 30px;
box-sizing: border-box;
}
.reviewBlock__score, .reviewBlock__score--small {
margin: 0 0 0;
font-size: 12px;
color: #182432;
position: relative;
height: 24px;
}
.reviewBlock__score:after, .reviewBlock__score--small:after {
content: "";
clear: both;
display: block;
}
.reviewBlock__score .reviewBlock__starList, .reviewBlock__score--small .reviewBlock__starList, .reviewBlock__score .reviewBlock__starList--large, .reviewBlock__score--small .reviewBlock__starList--large,
.reviewBlock__score .reviewBlock__starList--star1, .reviewBlock__score--small .reviewBlock__starList--star1,
.reviewBlock__score .reviewBlock__starList--star2, .reviewBlock__score--small .reviewBlock__starList--star2,
.reviewBlock__score .reviewBlock__starList--star3, .reviewBlock__score--small .reviewBlock__starList--star3,
.reviewBlock__score .reviewBlock__starList--star4, .reviewBlock__score--small .reviewBlock__starList--star4,
.reviewBlock__score .reviewBlock__starList--star5, .reviewBlock__score--small .reviewBlock__starList--star5 {
position: absolute;
bottom: 0px;
}
.reviewBlock__score--small {
position: relative;
margin: 0 0 10px;
height: 14px;
}
.reviewBlock__score--small .reviewBlock__starList, .reviewBlock__score--small .reviewBlock__starList--large,
.reviewBlock__score--small .reviewBlock__starList--star1,
.reviewBlock__score--small .reviewBlock__starList--star2,
.reviewBlock__score--small .reviewBlock__starList--star3,
.reviewBlock__score--small .reviewBlock__starList--star4,
.reviewBlock__score--small .reviewBlock__starList--star5 {
position: absolute;
bottom: 0px;
}
.reviewBlock__scorePoint {
font-size: 28px;
font-weight: bold;
color: #182432;
}
.reviewBlock__scorePointText {
font-size: 12px;
font-weight: bold;
color: #182432;
}
.reviewBlock__buttonBox {
margin: 20px 0 0;
}
.reviewBlock__scoreText {
position: absolute;
bottom: 0;
left: 120px;
line-height: 1;
}
.reviewBlock__scoreBarBox {
width: 190px;
height: 10px;
position: absolute;
left: 105px;
}
.reviewBlock__scoreBar {
width: 190px;
height: 10px;
background-color: #f4f6f8;
position: relative;
}
.reviewBlock__scoreBarInner {
height: 10px;
background-color: #c2a359;
}
.reviewBlock__userIcon {
position: relative;
z-index: 2;
background: #ccc;
width: 40px;
height: 40px;
overflow: hidden;
border-radius: 50%;
display: inline-block;
position: relative;
}
.reviewBlock__userIconimage {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
-webkit-transition: all .5s ease;
transition: all .5s ease;
z-index: 0;
}
.reviewBlock__userIconimage.is-display {
opacity: 1;
z-index: 2;
}
.reviewBlock__likeBox {
position: absolute;
top: 85px;
right: 0;
}
.reviewBlock__starBox:after {
content: "";
clear: both;
display: block;
}
.reviewBlock__userName {
position: absolute;
top: 38px;
left: 50px;
font-size: 14px;
color: #1b2433;
}
.reviewBlock__list {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.reviewBlock__list:after {
content: "";
clear: both;
display: block;
}
.reviewBlock__list::before {
content: '';
position: absolute;
top: 0;
width: 100%;
height: 1px;
background-color: #eeeeee;
}
.reviewBlock__listItem {
border-bottom: 1px solid #eeeeee;
padding: 30px 0 60px;
position: relative;
width: -webkit-calc(50% - 20px);
width: calc(50% - 20px);
display: inline-block;
vertical-align: top;
}
.reviewBlock__listItem:nth-child(2n) {
margin: 0 0 0 40px;
}
.reviewBlock__reviewTitle {
font-size: 16px;
font-weight: bold;
color: #1b2433;
margin: 5px 0 0;
width: -webkit-calc(100% - 90px);
width: calc(100% - 90px);
word-wrap: break-word;
}
.reviewBlock__reviewText {
font-size: 14px;
color: #1b2433;
margin: 4px 0 0;
word-wrap: break-word;
}
.reviewBlock__date {
color: #888888;
font-size: 14px;
margin: 10px 0 0;
position: absolute;
left: 0;
bottom: 30px;
}
.reviewBlock__editButtonBox {
position: absolute;
bottom: 30px;
right: 0px;
}
.reviewBlock__edit {
display: inline-block;
margin: 0 5px 0 0;
}
.reviewBlock__delete {
display: inline-block;
margin: 0 5px 0 0;
}
.reviewBlock__violation {
display: inline-block;
}
.reviewBlock__violationText {
position: relative;
font-size: 12px;
line-height: 1;
display: inline-block;
color: #888888;
margin: 0 0 0 20px;
}
.reviewBlock__violationText::before {
content: "";
display: block;
text-indent: 0;
}
.reviewBlock__violationText::before {
position: absolute;
top: 30%;
left: -20px;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
margin: auto 0;
font-size: 16px;
width: 16px;
height: 16px;
color: #888888;
}
.reviewBlock__editText {
position: relative;
font-size: 12px;
line-height: 1;
display: inline-block;
color: #888888;
margin: 0 0 0 20px;
}
.reviewBlock__editText::before {
content: "";
display: block;
text-indent: 0;
}
.reviewBlock__editText::before {
position: absolute;
top: 30%;
left: -20px;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
margin: auto 0;
font-size: 16px;
width: 16px;
height: 16px;
color: #888888;
}
.reviewBlock__deleteText {
position: relative;
font-size: 12px;
line-height: 1;
display: inline-block;
color: #888888;
margin: 0 0 0 20px;
}
.reviewBlock__deleteText::before {
content: "";
display: block;
text-indent: 0;
}
.reviewBlock__deleteText::before {
position: absolute;
top: 30%;
left: -20px;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
margin: auto 0;
font-size: 16px;
width: 16px;
height: 16px;
color: #888888;
}
.reviewBlock__reviewButton {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
width: 240px;
}
.reviewBlock__reviewButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.reviewBlock__reviewButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.reviewBlock__reviewButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.reviewBlock__reviewButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.reviewBlock__reviewButton.is-buttonCancel span {
color: #999999 !important;
}
.reviewBlock__reviewButton.is-buttonCancel span::before {
color: #999999 !important;
}
.reviewBlock__bottomButtonBox {
text-align: center;
margin: 40px 0 0;
padding: 0 0 40px;
}
.reviewBlock__bottomButton {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
width: 300px;
margin: auto;
}
.reviewBlock__bottomButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.reviewBlock__bottomButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.reviewBlock__bottomButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.reviewBlock__bottomButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.reviewBlock__bottomButton.is-buttonCancel span {
color: #999999 !important;
}
.reviewBlock__bottomButton.is-buttonCancel span::before {
color: #999999 !important;
}
.reviewBlock__starList, .reviewBlock__starList--large {
display: inline-block;
float: left;
margin: 0 5px 0 0;
font-size: 20px;
line-height: 1;
}
.reviewBlock__starList:after, .reviewBlock__starList--large:after {
content: "";
clear: both;
display: block;
}
.reviewBlock__starList--large {
font-size: 25px;
}
.reviewBlock__starItem, .reviewBlock__starItem--on {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
}
.reviewBlock__starItem::before, .reviewBlock__starItem--on::before {
content: "";
display: block;
text-indent: 0;
}
.reviewBlock__starItem::before, .reviewBlock__starItem--on::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.reviewBlock__starItem--on {
color: #ffb349;
}
.reviewBlock__starItem--half {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
}
.reviewBlock__starItem--half::before {
content: "";
display: block;
text-indent: 0;
}
.reviewBlock__starItem--half::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.reviewBlock__starItem--half::after {
content: "";
display: block;
text-indent: 0;
}
.reviewBlock__starItem--half::after {
color: #ffb349;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
right: 50%;
overflow: hidden;
}
.reviewBlock__starPoint {
display: inline-block;
font-size: 10px;
float: left;
line-height: 1;
position: relative;
top: 3px;
}
.reviewBlock__starNumber {
color: #888888;
font-size: 12px;
position: absolute;
left: 200px;
top: -7px;
}
.reviewBlock__like {
width: 30px;
height: 30px;
border: 1px solid #cdcdcd;
border-radius: 50%;
position: relative;
display: inline-block;
color: #c2a359;
line-height: 1;
cursor: pointer;
background-color: #fff;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
}
.reviewBlock__like::before {
content: "";
display: block;
text-indent: 0;
}
.reviewBlock__like::before {
position: absolute;
top: 48%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: auto 0;
height: 1.1em;
font-size: 20px;
}
.reviewBlock__like.is-mine {
pointer-events: none;
color: #bbbbbb;
background-color: #f5f5f5;
box-shadow: 0 -2px 0 0 transparent inset;
}
.reviewBlock__like.is-checked {
width: 30px;
height: 30px;
border: 1px solid #cdcdcd;
border-radius: 50%;
position: relative;
display: inline-block;
color: #c2a359;
line-height: 1;
cursor: pointer;
background-color: #fff;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #bbbbbb;
background-color: #f5f5f5;
box-shadow: 0 -2px 0 0 transparent inset;
}
.reviewBlock__like.is-checked::before {
content: "";
display: block;
text-indent: 0;
}
.reviewBlock__like.is-checked::before {
position: absolute;
top: 48%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: auto 0;
height: 1.1em;
font-size: 20px;
}
.reviewBlock__like.is-checked.is-mine {
pointer-events: none;
color: #bbbbbb;
background-color: #f5f5f5;
box-shadow: 0 -2px 0 0 transparent inset;
}
.reviewBlock__likeBalloon {
position: relative;
background: #f5f5f5;
border: 1px solid #cccccc;
border-radius: 5px;
font-size: 16px;
padding: 0px 8px;
display: inline-block;
color: #1b2433;
top: -10px;
margin: 0 0 0 5px;
}
.reviewBlock__likeBalloon::after {
right: 100%;
top: 50%;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-right-color: #f5f5f5;
border-width: 5px;
margin-top: -5px;
}
.reviewBlock__likeBalloon::before {
right: 100%;
top: 50%;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(204, 204, 204, 0);
border-right-color: #cccccc;
border-width: 7px;
margin-top: -7px;
}
.reviewBlock__readMore {
color: #ab8e48;
position: relative;
bottom: 0;
right: 0;
cursor: pointer;
padding: 0 0 0 0;
width: 90px;
box-sizing: border-box;
display: inline-block;
}
.reviewBlock__readMore::after {
content: '';
width: 0;
height: 0;
position: absolute;
right: 0;
top: 7px;
border: 5px solid transparent;
border-top: 8px solid rgba(171, 142, 72, 0.5);
}
.reviewBlock__reviewTextMore {
display: none;
}
.recommendList {
position: relative;
padding: 60px 0 0;
}
.recommendList__heading {
margin: 0 80px 40px 80px;
padding-top: 20px;
}
.recommendList__listType {
float: right;
width: 200px;
height: 20px;
}
.recommendList__searchBox {
text-align: right;
font-size: 0;
}
.recommendList__listResult {
position: relative;
display: inline-block;
padding: 2px 14px;
line-height: 1.1em;
font-size: 24px;
vertical-align: 3px;
}
.recommendList__listResult:first-child::before {
display: none;
}
.recommendList__listResult::before {
content: '';
position: absolute;
left: 0;
top: 8px;
bottom: 3px;
border-left: 1px dotted #ccc;
}
.recommendList__listButton, .recommendList__listButton--block, .recommendList__listButton--list {
display: block;
color: #dddee0;
}
.recommendList__listButton--block::before {
content: "";
display: block;
text-indent: 0;
}
.recommendList__listButton--block.is-current {
color: #8b9198;
}
.recommendList__listButton--list::before {
content: "";
display: block;
text-indent: 0;
}
.recommendList__listButton--list.is-current {
color: #8b9198;
}
.recommendList_inner {
width: 100%;
position: relative;
overflow: hidden;
padding-bottom: 80px;
}
.recommendList__title {
font-size: 24px;
margin: 0 0 40px;
}
.recommendList__mainBox {
margin: 0 80px 0 80px;
}
.recommendList__list {
position: relative;
font-size: 0;
margin: 0 -5px 0 -32px;
}
.recommendList__itemList {
margin: 0 0 0 -40px;
font-size: 0;
}
.recommendList__itemList:after {
content: "";
clear: both;
display: block;
}
.recommendList__itemListWide {
position: relative;
font-size: 0;
margin: 0 -5px 0 -32px;
}
.recommendList__item {
display: inline-block;
vertical-align: bottom;
text-align: center;
width: 25%;
margin: 0;
padding: 0 0 32px 32px;
}
@media screen and (min-width: 500px) and (max-width: 1151px) {
.recommendList__item {
width: 25%;
}
}
@media screen and (min-width: 1052px) and (max-width: 1279px) {
.recommendList__item {
width: 20%;
}
}
@media screen and (min-width: 1280px) and (max-width: 1439px) {
.recommendList__item {
width: 16.66%;
}
}
@media screen and (min-width: 1440px) and (max-width: 1599px) {
.recommendList__item {
width: 14.28%;
}
}
@media screen and (min-width: 1600px) and (max-width: 1759px) {
.recommendList__item {
width: 12.5%;
}
}
@media screen and (min-width: 1760px) and (max-width: 1919px) {
.recommendList__item {
width: 11.11%;
}
}
@media screen and (min-width: 1920px) {
.recommendList__item {
width: 10%;
}
}
.recommendList__itemBox {
float: left;
text-align: left;
font-size: 14px;
width: 100%;
padding: 0 0 0 140px;
line-height: 1.6em;
}
.recommendList__imageBox {
float: left;
padding: 0;
margin: 0 0 0 -100%;
width: 120px;
}
.recommendList__imageWrapper {
position: relative;
margin: 0;
max-width: 145px;
height: 210px;
font-size: 0;
white-space: nowrap;
text-align: center;
max-width: 120px;
height: 174px;
}
.recommendList__imageWrapper.js-imgLoading > * {
opacity: 0;
}
.recommendList__imageWrapper.js-imgLoading .loadingIcon {
opacity: 1;
font-size: 10px;
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 1.2em;
height: 1.2em;
margin: auto;
text-indent: -9999em;
color: #d1d5d8;
background: #d1d5d8;
border-radius: 50%;
line-height: 1;
}
.recommendList__imageWrapper.js-imgLoading .loadingIcon::before, .recommendList__imageWrapper.js-imgLoading .loadingIcon::after {
position: absolute;
top: 0;
width: 1.2em;
height: 1.2em;
content: '';
background: #d1d5d8;
border-radius: 50%;
}
.recommendList__imageWrapper.js-imgLoading .loadingIcon::before {
left: -2em;
}
.recommendList__imageWrapper.js-imgLoading .loadingIcon::after {
left: 2em;
}
.recommendList__imageWrapper::before {
content: '';
width: 1px;
height: 210px;
display: inline-block;
margin-left: -1px;
}
.recommendList__imageWrapper::before {
height: 174px;
}
.recommendList__itemImage {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
display: inline-block;
min-width: 75%;
max-width: 100%;
max-height: 100%;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
}
.recommendList__itemListImage {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
display: inline-block;
min-width: 75%;
max-width: 100%;
max-height: 100%;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
}
.recommendList__listBox {
line-height: 1;
display: inline-block;
margin: 0 0 50px 0;
padding: 0 0 0 40px;
width: 49.9%;
vertical-align: top;
width: 33.3%;
}
.recommendList__listBox:after {
content: "";
clear: both;
display: block;
}
.recommendList__itemLink {
display: block;
}
.recommendList__itemNoImageWrapper {
width: 100px;
position: relative;
}
.recommendList__itemNoImage {
display: inline-block;
position: relative;
background: #f5f5f5 url(../materials/noimage.png) 0 0 no-repeat;
background-size: 100% 100%;
background-position: center bottom;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
width: 145px;
height: 0;
padding: 139% 0 0;
word-wrap: break-word;
white-space: normal;
line-height: 1.4;
width: 120px;
}
.recommendList__itemNoImage.is-adult {
font-size: 14px;
}
.recommendList__itemNoImage.is-adult::before {
content: "";
display: block;
text-indent: 0;
}
.recommendList__itemNoImage.is-adult div {
top: -webkit-calc(50% - 0);
top: calc(50% - 0);
padding: 10px 0 40px;
}
.recommendList__itemNoImage.is-adult::before {
position: absolute;
display: inline-block;
left: 0;
right: 0;
top: 55px;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #c0c0c0;
font-size: 28px;
z-index: 1;
text-align: center;
}
.recommendList__itemNoImageInner {
position: absolute;
left: 5px;
right: 5px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #888;
background: #f5f5f5;
padding: 10px 0;
}
.recommendList__noImageTitle {
font-size: 12px;
font-weight: bold;
padding: 0 0 5px;
max-height: 2.8em;
overflow: hidden;
}
.recommendList__noImageAuthor {
font-size: 12px;
max-height: 2.8em;
overflow: hidden;
}
.recommendList__noImageItem {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.recommendList__itemBadge {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
position: absolute;
left: -4px;
bottom: 10px;
height: 24px;
line-height: 24px;
color: #fff;
padding: 0 8px;
display: block;
background: #c01d20;
font-size: 12px;
font-weight: bold;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
white-space: nowrap;
z-index: 3;
}
.recommendList__itemBadge::before {
content: '';
position: absolute;
right: -6px;
width: 0;
height: 0;
top: 0;
border-style: solid;
border-width: 12px 7px 12px 0;
border-color: #c01d20 transparent #c01d20 #c01d20;
}
.recommendList__itemBadge::after {
content: '';
position: absolute;
right: -5px;
bottom: 0;
width: 5px;
height: 4px;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
}
.recommendList__itemBadge.is-goldBadge {
background: #d4b15c;
}
.recommendList__itemBadge.is-goldBadge::before {
border-color: #d4b15c transparent #d4b15c #d4b15c;
}
.recommendList__itemListLink {
display: inline-block;
}
.recommendList__itemListLink:after {
content: "";
clear: both;
display: block;
}
.recommendList__itemTitle {
font-size: 16px;
color: #1d2334;
font-weight: bold;
word-wrap: break-word;
line-height: 1.6em;
}
.recommendList__itemText {
color: #888;
font-size: 12px;
}
.recommendList__itemText a {
color: #888;
}
.recommendList__text {
color: #888;
font-size: 12px;
}
.recommendList__text a {
color: #888;
}
.recommendList__listLine {
border-top: 0;
border-bottom: 0;
}
.recommendList__starBox {
margin: 0 0 0;
}
.recommendList__starBox:after {
content: "";
clear: both;
display: block;
}
.recommendList__star {
margin: 6px 0 0;
}
.recommendList__star:after {
content: "";
clear: both;
display: block;
}
.recommendList__starList {
display: inline-block;
float: left;
margin: 0 5px 0 0;
font-size: 20px;
line-height: 1;
font-size: 20px;
}
.recommendList__starList:after {
content: "";
clear: both;
display: block;
}
.recommendList__starItem {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
}
.recommendList__starItem::before {
content: "";
display: block;
text-indent: 0;
}
.recommendList__starItem::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.recommendList__starItem--on {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
color: #ffb349;
}
.recommendList__starItem--on::before {
content: "";
display: block;
text-indent: 0;
}
.recommendList__starItem--on::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.recommendList__starItem--half {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
}
.recommendList__starItem--half::before {
content: "";
display: block;
text-indent: 0;
}
.recommendList__starItem--half::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.recommendList__starItem--half::after {
content: "";
display: block;
text-indent: 0;
}
.recommendList__starItem--half::after {
color: #ffb349;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
right: 50%;
overflow: hidden;
}
.recommendList__starNumber {
display: inline-block;
font-size: 12px;
float: left;
line-height: 1;
position: relative;
top: 7px;
color: #888888;
}
.recommendList__priceBox {
margin: 10px 0 0;
}
.recommendList__priceStrike {
color: #888;
font-size: 14px;
}
.recommendList__price {
font-size: 18px;
color: #c01200;
position: relative;
}
.recommendList__price--original {
font-size: 18px;
color: #c01200;
position: relative;
color: rgba(20, 35, 52, 0.4);
font-size: 14px;
font-weight: normal;
display: inline-block;
}
.recommendList__tax {
color: #888;
font-size: 14px;
font-weight: normal;
}
.is-negative .recommendList__tax {
color: rgba(20, 35, 52, 0.4);
font-size: 8px;
margin: 5px 0 0;
}
.is-negative .recommendList__tax {
color: rgba(20, 35, 52, 0.4);
font-size: 8px;
margin: 5px 0 0;
}
.recommendList__viewChange {
position: absolute;
top: 60px;
right: 0px;
white-space: nowrap;
font-size: 0;
}
.recommendList__viewChangeItem {
position: relative;
display: inline-block;
font-size: 26px;
margin: 0 0 0 15px;
}
.recommendList__viewChangeItem::before {
content: '';
position: absolute;
left: -7px;
top: 1px;
bottom: 2px;
width: 1px;
border-left: 1px dotted #dddee0;
}
.recommendList__viewChangeItem:first-child::before {
display: none;
}
.recommendList__viewChangeLink, .recommendList__viewChangeLink--tile, .recommendList__viewChangeLink--list, .detailItem__viewChangeLink--tile, .detailItem__viewChangeLink--list {
white-space: nowrap;
overflow: hidden;
text-indent: 120%;
display: block;
width: 1em;
height: 1em;
white-space: nowrap;
color: #dddee0;
}
.recommendList__viewChangeLink::before, .recommendList__viewChangeLink--tile::before, .recommendList__viewChangeLink--list::before, .detailItem__viewChangeLink--tile::before, .detailItem__viewChangeLink--list::before {
display: inline-block;
}
.recommendList__viewChangeLink.is-current, .is-current.recommendList__viewChangeLink--tile, .is-current.recommendList__viewChangeLink--list, .is-current.detailItem__viewChangeLink--tile, .is-current.detailItem__viewChangeLink--list {
color: #8b9198;
}
.recommendList__viewChangeLink--tile::before {
content: "";
display: block;
text-indent: 0;
}
.recommendList__viewChangeLink--list::before {
content: "";
display: block;
text-indent: 0;
}
.recommendList__leadBox {
margin: -25px 0 20px;
}
.recommendList__leadBox:after {
content: "";
clear: both;
display: block;
}
.recommendList__lead {
width: -webkit-calc(100% - 500px);
width: calc(100% - 500px);
float: left;
font-size: 14px;
}
.recommendList__caution {
float: right;
font-size: 14px;
width: 400px;
}
.recommendList__button--iconCart {
display: inline-block;
text-align: center;
position: relative;
height: 34px;
line-height: 34px;
border-radius: 18px;
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 0 15px 0;
width: 80px;
box-shadow: 0 -2px 0 0 #00abbb inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
margin: 5px 0 0;
}
.recommendList__button--iconCart::before {
content: "";
display: block;
text-indent: 0;
}
.recommendList__button--iconCart::before {
position: relative;
display: inline-block;
top: 0px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 28px;
line-height: 1;
}
.recommendList__button--iconCart.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.recommendList__button--iconCart.is-buttonDisabled span {
color: #bbbbbb !important;
}
.recommendList__button--iconCart.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.recommendList__button--iconCart.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.recommendList__button--iconCart.is-buttonCancel span {
color: #999999 !important;
}
.recommendList__button--iconCart.is-buttonCancel span::before {
color: #999999 !important;
}
.recommendList__button--iconCart::before {
content: "";
display: block;
text-indent: 0;
}
.recommendList__button--bookShelfAdd {
display: inline-block;
text-align: center;
position: relative;
height: 34px;
line-height: 34px;
border-radius: 18px;
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 0 15px 0;
width: 80px;
box-shadow: 0 -2px 0 0 #00abbb inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
margin: 5px 0 0;
}
.recommendList__button--bookShelfAdd::before {
content: "";
display: block;
text-indent: 0;
}
.recommendList__button--bookShelfAdd::before {
position: relative;
display: inline-block;
top: 0px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 28px;
line-height: 1;
}
.recommendList__button--bookShelfAdd.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.recommendList__button--bookShelfAdd.is-buttonDisabled span {
color: #bbbbbb !important;
}
.recommendList__button--bookShelfAdd.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.recommendList__button--bookShelfAdd.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.recommendList__button--bookShelfAdd.is-buttonCancel span {
color: #999999 !important;
}
.recommendList__button--bookShelfAdd.is-buttonCancel span::before {
color: #999999 !important;
}
.recommendList__button--bookShelfAdd::before {
content: "";
display: block;
text-indent: 0;
}
.recommendList__button--reservation {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
width: 80px;
font-size: 14px;
font-weight: bold;
padding: 9px 12px 9px;
margin: 10px 5px 0 0;
height: 34px;
vertical-align: bottom;
}
.recommendList__button--reservation.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.recommendList__button--reservation.is-buttonDisabled span {
color: #bbbbbb !important;
}
.recommendList__button--reservation.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.recommendList__button--reservation.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.recommendList__button--reservation.is-buttonCancel span {
color: #999999 !important;
}
.recommendList__button--reservation.is-buttonCancel span::before {
color: #999999 !important;
}
.recommendList__button--read {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
width: 120px;
font-size: 14px;
font-weight: bold;
padding: 9px 12px 9px;
margin: 10px 5px 0 0;
height: 34px;
vertical-align: bottom;
}
.recommendList__button--read.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.recommendList__button--read.is-buttonDisabled span {
color: #bbbbbb !important;
}
.recommendList__button--read.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.recommendList__button--read.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.recommendList__button--read.is-buttonCancel span {
color: #999999 !important;
}
.recommendList__button--read.is-buttonCancel span::before {
color: #999999 !important;
}
.recommendList__mainBox.is-tile .recommendList__itemList {
position: relative;
font-size: 0;
margin: 0 -5px 0 -32px;
}
.recommendList__mainBox.is-tile .recommendList__listBox {
display: inline-block;
vertical-align: bottom;
text-align: center;
width: 25%;
margin: 0;
padding: 0 0 32px 32px;
}
@media screen and (min-width: 500px) and (max-width: 1151px) {
.recommendList__mainBox.is-tile .recommendList__listBox {
width: 25%;
}
}
@media screen and (min-width: 1052px) and (max-width: 1279px) {
.recommendList__mainBox.is-tile .recommendList__listBox {
width: 20%;
}
}
@media screen and (min-width: 1280px) and (max-width: 1439px) {
.recommendList__mainBox.is-tile .recommendList__listBox {
width: 16.66%;
}
}
@media screen and (min-width: 1440px) and (max-width: 1599px) {
.recommendList__mainBox.is-tile .recommendList__listBox {
width: 14.28%;
}
}
@media screen and (min-width: 1600px) and (max-width: 1759px) {
.recommendList__mainBox.is-tile .recommendList__listBox {
width: 12.5%;
}
}
@media screen and (min-width: 1760px) and (max-width: 1919px) {
.recommendList__mainBox.is-tile .recommendList__listBox {
width: 11.11%;
}
}
@media screen and (min-width: 1920px) {
.recommendList__mainBox.is-tile .recommendList__listBox {
width: 10%;
}
}
.recommendList__mainBox.is-tile .recommendList__imageBox {
margin: 0;
float: none;
width: auto;
display: block;
}
.recommendList__mainBox.is-tile .recommendList__imageWrapper {
position: relative;
max-width: 145px;
height: 210px;
display: inline-block;
font-size: 0;
white-space: nowrap;
}
.recommendList__mainBox.is-tile .recommendList__imageWrapper.js-imgLoading > * {
opacity: 0;
}
.recommendList__mainBox.is-tile .recommendList__imageWrapper.js-imgLoading .loadingIcon {
opacity: 1;
font-size: 10px;
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 1.2em;
height: 1.2em;
margin: auto;
text-indent: -9999em;
color: #d1d5d8;
background: #d1d5d8;
border-radius: 50%;
line-height: 1;
}
.recommendList__mainBox.is-tile .recommendList__imageWrapper.js-imgLoading .loadingIcon::before, .recommendList__mainBox.is-tile .recommendList__imageWrapper.js-imgLoading .loadingIcon::after {
position: absolute;
top: 0;
width: 1.2em;
height: 1.2em;
content: '';
background: #d1d5d8;
border-radius: 50%;
}
.recommendList__mainBox.is-tile .recommendList__imageWrapper.js-imgLoading .loadingIcon::before {
left: -2em;
}
.recommendList__mainBox.is-tile .recommendList__imageWrapper.js-imgLoading .loadingIcon::after {
left: 2em;
}
.recommendList__mainBox.is-tile .recommendList__imageWrapper::before {
content: '';
width: 1px;
height: 210px;
display: inline-block;
margin-left: -1px;
}
.recommendList__mainBox.is-tile .recommendList__itemNoImage {
display: inline-block;
position: relative;
background: #f5f5f5 url(../materials/noimage.png) 0 0 no-repeat;
background-size: 100% 100%;
background-position: center bottom;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
width: 145px;
height: 0;
padding: 139% 0 0;
word-wrap: break-word;
white-space: normal;
line-height: 1.4;
}
.recommendList__mainBox.is-tile .recommendList__itemNoImage.is-adult {
font-size: 14px;
}
.recommendList__mainBox.is-tile .recommendList__itemNoImage.is-adult::before {
content: "";
display: block;
text-indent: 0;
}
.recommendList__mainBox.is-tile .recommendList__itemNoImage.is-adult div {
top: -webkit-calc(50% - 0);
top: calc(50% - 0);
padding: 10px 0 40px;
}
.recommendList__mainBox.is-tile .recommendList__itemNoImage.is-adult::before {
position: absolute;
display: inline-block;
left: 0;
right: 0;
top: 55px;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #c0c0c0;
font-size: 28px;
z-index: 1;
text-align: center;
}
.recommendList__mainBox.is-tile .recommendList__image {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
display: inline-block;
min-width: 75%;
max-width: 100%;
max-height: 100%;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
}
.recommendList__mainBox.is-tile .recommendList__itemBox {
display: none;
}
/*
#overview
レコメンドの商品一覧
*/
/*
#styleguide
レコメンドの商品一覧
```
```
*/
/*
#styleguide
レコメンドの商品一覧（縦）
```
```
*/
.recommendModule {
display: block;
position: relative;
margin: 0 80px;
overflow: hidden;
}
.recommendModule--wide {
margin: 0 0 60px;
}
.recommendModule--ranking .recommendModule__body {
height: 350px;
}
.recommendModule--row {
padding: 0 0 40px;
}
.recommendModule--row .recommendModule__body {
height: 1480px;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.recommendModule__body {
position: relative;
border: none;
display: block;
width: 100%;
height: 300px;
margin: -30px 0 30px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.recommendModule__sp {
display: none;
}
.recommendModule + .recommendModule .recommendModule__body {
margin-top: 0;
}
.recommendModule + .choiceProductList, .recommendModule + .choiceProductList--wide,
.recommendModule + .featureList,
.recommendModule + .recentNewsList,
.recommendModule + .featureModule {
padding-top: 30px;
}
.recommendModule + .choiceProductList::before, .recommendModule + .choiceProductList--wide::before,
.recommendModule + .featureList::before,
.recommendModule + .recentNewsList::before,
.recommendModule + .featureModule::before {
content: '';
position: absolute;
left: 10px;
top: 0px;
right: 10px;
height: 1px;
background: #eee;
}
.recommendModule__displaySp {
display: none;
}
.recommendModule__displayTb {
display: none;
}
.recommendModule__displayPc, .recommendModule__displayPcSp {
display: block;
height: 100%;
width: 100%;
}
.recommendModule__displayTbSp {
display: none;
}
.detailItem__menu {
height: 64px;
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
margin: 0 0 0;
font-size: 0;
white-space: nowrap;
position: relative;
}
.detailItem__menu:after {
content: "";
clear: both;
display: block;
}
.detailItem__menuList {
display: block;
margin: 0 70px;
height: 80px;
}
.detailItem__menuItem {
display: inline-block;
margin: 0 0 0 8px;
}
.detailItem__menuItem:first-child {
margin-left: 0;
}
.detailItem__menuLink {
position: relative;
display: block;
padding: 0 25px;
font-size: 16px;
color: #888;
line-height: 64px;
font-weight: bold;
}
.detailItem__menuLink.is-current {
color: #c3a358;
}
.detailItem__menuLink.is-current::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 4px;
background: #c3a358;
}
.detailItem__toggleList {
position: absolute;
right: 70px;
top: 20px;
}
.detailItem__authorToggleList {
display: inline-block;
padding: 10px 0 0;
}
.detailItem__toggleTitleBox {
float: left;
}
.detailItem__toggleTitle {
font-size: 14px;
font-weight: bold;
}
.detailItem__toggleBox {
float: left;
margin: 0 0 0 20px;
height: 22px;
width: 60px;
position: relative;
cursor: pointer;
}
.detailItem__authorToggleBox {
float: left;
margin: 0 0 0 10px;
height: 22px;
width: 60px;
position: relative;
cursor: pointer;
}
.detailItem__input {
border: 1px solid #cccccc;
border-radius: 8px;
background-color: #f9f9f9;
box-shadow: inset 0px 3px 4px 0px rgba(0, 0, 0, 0.15);
height: 40px;
line-height: 40px;
width: 100%;
margin: 10px 0 0 0;
padding: 0 10px;
}
.detailItem__selectTitleWrap {
display: inline-block;
padding: 0;
margin: 0 0 20px;
position: relative;
}
.detailItem__selectTitleWrap::before {
content: '';
position: absolute;
pointer-events: none;
right: 0;
top: 0;
bottom: 0;
margin: auto 0;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 5px 0 5px;
border-color: #8b9198 transparent transparent transparent;
}
.detailItem__selectTitle {
font-size: 20px;
font-weight: bold;
padding: 0 20px 0 0;
}
.detailItem__itemNumHeaderSeries {
margin: 0 0 20px;
}
.detailItem__itemNumHeaderSeries:after {
content: "";
clear: both;
display: block;
}
.detailItem__itemNumHeader {
margin: 0 0 40px;
}
.detailItem__itemNumHeader:after {
content: "";
clear: both;
display: block;
}
.detailItem__itemNumHeaderInner {
width: 100%;
box-sizing: border-box;
}
.detailItem__itemNumHeaderTitle {
padding: 0 0 20px;
border-bottom: 1px solid #eeeeee;
}
.detailItem__itemNumHeaderNum {
font-size: 20px;
font-weight: bold;
}
.detailItem__itemNumHeaderBox {
width: 100%;
padding: 0 0 20px;
border-bottom: 1px solid #eee;
}
.detailItem__itemNumHeaderTitleBox {
float: left;
width: -webkit-calc(100% - 200px);
width: calc(100% - 200px);
word-wrap: break-word;
}
.detailItem__itemNumHeaderSubBox {
float: right;
}
.detailItem__checkboxText {
font-size: 14px;
}
.detailItem__switchBox {
width: 100%;
background-color: #fff;
border-top: 1px solid #dedede;
border-bottom: 1px solid #dedede;
margin: 0 0 60px;
clear: both;
}
.detailItem__switchBox:after {
content: "";
clear: both;
display: block;
}
.detailItem__switchInner {
padding: 16px 0;
float: right;
}
.detailItem__switchList {
text-align: center;
}
.detailItem__switchListItem, .detailItem__switchListItem--current {
display: inline-block;
padding: 5px 12px;
border-left: 1px solid #dedede;
line-height: 1;
}
.detailItem__switchListItem:first-child, .detailItem__switchListItem--current:first-child {
border-left: 0px solid #dedede;
}
.detailItem__switchListItem--current .detailItem__switchListLink {
color: #bca450;
font-weight: normal;
display: inline-block;
position: relative;
pointer-events: none;
}
.detailItem__switchListItem--current .detailItem__switchListLink::after {
position: absolute;
content: '';
width: 100%;
height: 2px;
background-color: #ab8e48;
bottom: -8px;
left: 0;
}
.detailItem__switchListLink {
text-decoration: none;
font-size: 14px;
color: #888;
line-height: 1;
}
.detailItem__matomelistBox:after {
content: "";
clear: both;
display: block;
}
.detailItem__inner, .detailItem__inner--write {
position: relative;
padding: 60px 80px 0;
}
.detailItem__inner--write {
padding: 15px 70px 50px;
}
.detailItem__inner--write .detailItem__itemNumHeaderBox {
border-bottom: 0 solid #eee;
padding: 0;
}
.detailItem__inner--write .detailItem__listItem {
line-height: 1;
display: inline-block;
margin: 0 0 50px 0;
padding: 0 0 0 40px;
width: 49.9%;
vertical-align: top;
width: 33.3%;
}
.detailItem__inner--write .detailItem__listItem:after {
content: "";
clear: both;
display: block;
}
.detailItem__autherInner {
position: relative;
padding: 50px 80px 0;
min-width: 1024px;
width: 100%;
}
.detailItem__listBox {
display: block;
}
.detailItem__list {
margin: 0 0 0 -40px;
font-size: 0;
}
.detailItem__list:after {
content: "";
clear: both;
display: block;
}
.detailItem__listItem {
line-height: 1;
display: inline-block;
margin: 0 0 50px 0;
padding: 0 0 0 40px;
width: 49.9%;
vertical-align: top;
margin: 0 0 50px 40px;
padding: 0;
width: -webkit-calc((100% - 140px)/3);
width: calc((100% - 140px)/3);
vertical-align: top;
}
.detailItem__listItem:after {
content: "";
clear: both;
display: block;
}
.detailItem__listItemInner {
font-size: 14px;
}
.detailItem__listItemInner:after {
content: "";
clear: both;
display: block;
}
.detailItem__imageBox {
float: left;
padding: 0;
margin: 0 0 0 -100%;
width: 120px;
}
.detailItem__imageWrapper {
position: relative;
margin: 0;
max-width: 145px;
height: 210px;
font-size: 0;
white-space: nowrap;
text-align: center;
max-width: 120px;
height: 174px;
}
.detailItem__imageWrapper.js-imgLoading > * {
opacity: 0;
}
.detailItem__imageWrapper.js-imgLoading .loadingIcon {
opacity: 1;
font-size: 10px;
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 1.2em;
height: 1.2em;
margin: auto;
text-indent: -9999em;
color: #d1d5d8;
background: #d1d5d8;
border-radius: 50%;
line-height: 1;
}
.detailItem__imageWrapper.js-imgLoading .loadingIcon::before, .detailItem__imageWrapper.js-imgLoading .loadingIcon::after {
position: absolute;
top: 0;
width: 1.2em;
height: 1.2em;
content: '';
background: #d1d5d8;
border-radius: 50%;
}
.detailItem__imageWrapper.js-imgLoading .loadingIcon::before {
left: -2em;
}
.detailItem__imageWrapper.js-imgLoading .loadingIcon::after {
left: 2em;
}
.detailItem__imageWrapper::before {
content: '';
width: 1px;
height: 210px;
display: inline-block;
margin-left: -1px;
}
.detailItem__imageWrapper::before {
height: 174px;
}
.detailItem__image {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
display: inline-block;
min-width: 75%;
max-width: 100%;
max-height: 100%;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
}
.detailItem__itemNoImage {
display: inline-block;
position: relative;
background: #f5f5f5 url(../materials/noimage.png) 0 0 no-repeat;
background-size: 100% 100%;
background-position: center bottom;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
width: 145px;
height: 0;
padding: 139% 0 0;
word-wrap: break-word;
white-space: normal;
line-height: 1.4;
width: 120px;
margin: 0 0 30px;
}
.detailItem__itemNoImage.is-adult {
font-size: 14px;
}
.detailItem__itemNoImage.is-adult::before {
content: "";
display: block;
text-indent: 0;
}
.detailItem__itemNoImage.is-adult div {
top: -webkit-calc(50% - 0);
top: calc(50% - 0);
padding: 10px 0 40px;
}
.detailItem__itemNoImage.is-adult::before {
position: absolute;
display: inline-block;
left: 0;
right: 0;
top: 55px;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #c0c0c0;
font-size: 28px;
z-index: 1;
text-align: center;
}
.detailItem__itemNoImageInner {
position: absolute;
left: 5px;
right: 5px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #888;
background: #f5f5f5;
padding: 10px 0;
}
.detailItem__noImageTitle {
font-size: 12px;
font-weight: bold;
padding: 0 0 5px;
max-height: 2.8em;
overflow: hidden;
}
.detailItem__noImageAuthor {
font-size: 12px;
max-height: 2.8em;
overflow: hidden;
}
.detailItem__infoBox {
float: left;
text-align: left;
font-size: 14px;
width: 100%;
padding: 0 0 0 140px;
line-height: 1.6em;
}
.detailItem__infoBoxCenter {
float: right;
width: -webkit-calc(100% - 146px);
width: calc(100% - 146px);
box-sizing: border-box;
position: relative;
}
.detailItem__infoBoxCenter::before {
content: '';
width: 1px;
height: 192px;
display: inline-block;
vertical-align: middle;
}
.detailItem__infoBoxCenterInner {
width: -webkit-calc(100% - 7px);
width: calc(100% - 7px);
display: inline-block;
vertical-align: middle;
}
.detailItem__title {
font-size: 16px;
color: #1d2334;
font-weight: bold;
word-wrap: break-word;
line-height: 1.6em;
}
.detailItem__text {
color: #888;
font-size: 12px;
}
.detailItem__text a {
color: #888;
}
.detailItem__text .detailItem__link {
display: inline-block;
color: #888;
}
.detailItem__text--name {
color: #888;
font-size: 12px;
}
.detailItem__text--name a {
color: #888;
}
.detailItem__text--name .detailItem__link {
display: inline-block;
color: #888;
}
.detailItem__link {
display: inline-block;
}
.detailItem__link:after {
content: "";
clear: both;
display: block;
}
.detailItem__starBox {
margin: 0 0 0;
}
.detailItem__starBox:after {
content: "";
clear: both;
display: block;
}
.detailItem__star {
margin: 6px 0 0;
}
.detailItem__star:after {
content: "";
clear: both;
display: block;
}
.detailItem__starList {
display: inline-block;
float: left;
margin: 0 5px 0 0;
font-size: 20px;
line-height: 1;
}
.detailItem__starList:after {
content: "";
clear: both;
display: block;
}
.detailItem__starItem {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
}
.detailItem__starItem::before {
content: "";
display: block;
text-indent: 0;
}
.detailItem__starItem::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.detailItem__starItem--on {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
color: #ffb349;
}
.detailItem__starItem--on::before {
content: "";
display: block;
text-indent: 0;
}
.detailItem__starItem--on::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.detailItem__starItem--half {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
}
.detailItem__starItem--half::before {
content: "";
display: block;
text-indent: 0;
}
.detailItem__starItem--half::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.detailItem__starItem--half::after {
content: "";
display: block;
text-indent: 0;
}
.detailItem__starItem--half::after {
color: #ffb349;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
right: 50%;
overflow: hidden;
}
.detailItem__starNumber {
display: inline-block;
font-size: 12px;
float: left;
line-height: 1;
position: relative;
top: 7px;
color: #888888;
}
.detailItem__deliveryDate {
font-size: 12px;
}
.detailItem__priceBox {
margin: 10px 0 0;
}
.detailItem__priceStrike {
color: #888;
font-size: 14px;
}
.detailItem__price {
font-size: 18px;
color: #c01200;
position: relative;
}
.detailItem__price .detailItem__tax {
font-size: 12px;
}
.detailItem__price--original {
font-size: 18px;
color: #c01200;
position: relative;
color: rgba(20, 35, 52, 0.4);
font-size: 14px;
font-weight: normal;
display: inline-block;
}
.detailItem__tax {
color: #888;
font-size: 14px;
font-weight: normal;
}
.is-negative .detailItem__tax {
color: rgba(20, 35, 52, 0.4);
font-size: 8px;
margin: 5px 0 0;
}
.is-negative .detailItem__tax {
color: rgba(20, 35, 52, 0.4);
font-size: 8px;
margin: 5px 0 0;
}
.detailItem__caution {
color: #c01200;
font-size: 12px;
font-weight: bold;
padding: 0 0 0 22px;
margin: 10px 0 0;
position: relative;
line-height: 1.5;
}
.detailItem__caution::before {
content: "";
display: block;
text-indent: 0;
}
.detailItem__caution::before {
position: absolute;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
margin: auto 0;
height: 1.1em;
font-size: 20px;
line-height: 1;
left: 0px;
top: -3px;
}
.detailItem__button, .detailItem__button--iconCart {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
height: 36px;
line-height: 36px;
border-radius: 18px;
font-size: 13px;
font-weight: bold;
background-color: #ff9000;
box-shadow: 0 -2px 0 0 #e58100 inset;
color: #fff;
margin: 10px 5px 0 0;
}
.detailItem__button--iconCart::before {
content: "";
display: block;
text-indent: 0;
}
.detailItem__button--iconCart::before {
position: relative;
display: inline-block;
top: 8px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 30px;
line-height: 0;
}
.detailItem__button--iconCartBlue {
display: inline-block;
text-align: center;
position: relative;
height: 34px;
line-height: 34px;
border-radius: 18px;
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 0 15px 0;
width: 80px;
box-shadow: 0 -2px 0 0 #00abbb inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
margin: 10px 5px 0 0;
vertical-align: bottom;
}
.detailItem__button--iconCartBlue::before {
content: "";
display: block;
text-indent: 0;
}
.detailItem__button--iconCartBlue::before {
position: relative;
display: inline-block;
top: 0px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 28px;
line-height: 1;
}
.detailItem__button--iconCartBlue.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.detailItem__button--iconCartBlue.is-buttonDisabled span {
color: #bbbbbb !important;
}
.detailItem__button--iconCartBlue.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.detailItem__button--iconCartBlue.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.detailItem__button--iconCartBlue.is-buttonCancel span {
color: #999999 !important;
}
.detailItem__button--iconCartBlue.is-buttonCancel span::before {
color: #999999 !important;
}
.detailItem__button--iconCartBlue::before {
content: "";
display: block;
text-indent: 0;
}
.detailItem__button--write {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
margin: 10px 5px 0 0;
}
.detailItem__button--write.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.detailItem__button--write.is-buttonDisabled span {
color: #bbbbbb !important;
}
.detailItem__button--write.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.detailItem__button--write.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.detailItem__button--write.is-buttonCancel span {
color: #999999 !important;
}
.detailItem__button--write.is-buttonCancel span::before {
color: #999999 !important;
}
.detailItem__button--reservation {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
width: 80px;
font-size: 14px;
font-weight: bold;
padding: 9px 12px 9px;
margin: 10px 5px 0 0;
height: 34px;
vertical-align: bottom;
}
.detailItem__button--reservation.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.detailItem__button--reservation.is-buttonDisabled span {
color: #bbbbbb !important;
}
.detailItem__button--reservation.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.detailItem__button--reservation.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.detailItem__button--reservation.is-buttonCancel span {
color: #999999 !important;
}
.detailItem__button--reservation.is-buttonCancel span::before {
color: #999999 !important;
}
.detailItem__button--read {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
width: 120px;
font-size: 14px;
font-weight: bold;
padding: 9px 12px 9px;
margin: 10px 5px 0 0;
height: 34px;
vertical-align: bottom;
}
.detailItem__button--read.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.detailItem__button--read.is-buttonDisabled span {
color: #bbbbbb !important;
}
.detailItem__button--read.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.detailItem__button--read.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.detailItem__button--read.is-buttonCancel span {
color: #999999 !important;
}
.detailItem__button--read.is-buttonCancel span::before {
color: #999999 !important;
}
.detailItem__button--bookShelfAdd {
display: inline-block;
text-align: center;
position: relative;
height: 34px;
line-height: 34px;
border-radius: 18px;
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 0 15px 0;
width: 80px;
box-shadow: 0 -2px 0 0 #00abbb inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
margin: 10px 5px 0 0;
vertical-align: bottom;
}
.detailItem__button--bookShelfAdd::before {
content: "";
display: block;
text-indent: 0;
}
.detailItem__button--bookShelfAdd::before {
position: relative;
display: inline-block;
top: 0px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 28px;
line-height: 1;
}
.detailItem__button--bookShelfAdd.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.detailItem__button--bookShelfAdd.is-buttonDisabled span {
color: #bbbbbb !important;
}
.detailItem__button--bookShelfAdd.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.detailItem__button--bookShelfAdd.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.detailItem__button--bookShelfAdd.is-buttonCancel span {
color: #999999 !important;
}
.detailItem__button--bookShelfAdd.is-buttonCancel span::before {
color: #999999 !important;
}
.detailItem__button--bookShelfAdd::before {
content: "";
display: block;
text-indent: 0;
}
.detailItem__viewChange {
float: right;
white-space: nowrap;
font-size: 0;
}
.detailItem__viewChangeItem {
position: relative;
display: inline-block;
font-size: 26px;
margin: 0 0 0 15px;
}
.detailItem__viewChangeItem::before {
content: '';
position: absolute;
left: -10px;
top: 1px;
bottom: 2px;
width: 1px;
border-left: 1px dotted #dddee0;
}
.detailItem__viewChangeItem:first-child::before {
display: none;
}
.detailItem__viewChangeItem .detailItem__viewChangeLink--tile::before {
display: block;
}
.detailItem__viewChangeItem .detailItem__viewChangeLink--list::before {
display: block;
}
.detailItem__viewChangeLink {
white-space: nowrap;
overflow: hidden;
text-indent: 120%;
display: block;
width: 1em;
height: 1em;
white-space: nowrap;
color: #dddee0;
}
.detailItem__viewChangeLink::before {
display: block;
}
.detailItem__viewChangeLink.is-current {
color: #8b9198;
}
.detailItem__viewChangeLink--tile::before {
content: "";
display: block;
text-indent: 0;
}
.detailItem__viewChangeLink--tile::before {
display: block;
}
.detailItem__viewChangeLink--list::before {
content: "";
display: block;
text-indent: 0;
}
.detailItem__viewChangeLink--list::before {
display: block;
}
.detailItem__writeTitle {
font-size: 20px;
font-weight: bold;
margin: 22px 0 0;
}
.detailItem__period {
clear: both;
overflow: hidden;
padding: 0 0 0 10px;
margin: 0 0 -1px 0;
width: -webkit-calc(100% - 100px);
width: calc(100% - 100px);
float: left;
}
.detailItem__periodList {
font-size: 0;
}
.detailItem__periodItem {
width: 160px;
display: inline-block;
}
.detailItem__periodLink {
display: block;
font-size: 12px;
font-weight: bold;
text-align: center;
margin: 4px 0 -1px -1px;
padding: 6px 0 6px;
border-top: 1px solid #dedede;
border-left: 1px solid #dedede;
border-right: 1px solid #dedede;
color: #aaa;
background: #eee;
position: relative;
}
.detailItem__periodLink.is-current {
margin-top: 0;
padding-top: 10px;
border-bottom: 1px solid #fff;
color: #1d2334;
background: #fff;
}
.detailItem__periodLink.is-current::after {
content: '';
position: absolute;
width: 100%;
height: 5px;
background: #fff;
bottom: -3px;
left: 0;
}
.detailItem__pagerBox .pager {
margin: 10px 0 20px;
}
.detailItem__itemBadge {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
position: absolute;
left: -4px;
bottom: 10px;
height: 24px;
line-height: 24px;
color: #fff;
padding: 0 8px;
display: block;
background: #c01d20;
font-size: 12px;
font-weight: bold;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
white-space: nowrap;
z-index: 3;
}
.detailItem__itemBadge::before {
content: '';
position: absolute;
right: -6px;
width: 0;
height: 0;
top: 0;
border-style: solid;
border-width: 12px 7px 12px 0;
border-color: #c01d20 transparent #c01d20 #c01d20;
}
.detailItem__itemBadge::after {
content: '';
position: absolute;
right: -5px;
bottom: 0;
width: 5px;
height: 4px;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
}
.detailItem__itemBadge.is-goldBadge {
background: #d4b15c;
}
.detailItem__itemBadge.is-goldBadge::before {
border-color: #d4b15c transparent #d4b15c #d4b15c;
}
.detailItem__label {
line-height: 1;
margin: 0 0 8px;
}
.detailItem__labelItem {
display: inline-block;
font-size: 12px;
line-height: 1;
color: #ab8e48;
border: 1px solid #c3a358;
padding: 4px 6px;
color: #bda450;
margin: 0 5px 0 0;
}
.detailItem__discount {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
position: absolute;
left: -4px;
bottom: 10px;
height: 24px;
line-height: 24px;
color: #fff;
padding: 0 8px;
display: block;
background: #c01d20;
font-size: 12px;
font-weight: bold;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
z-index: 3;
}
.detailItem__discount::before {
content: '';
position: absolute;
right: -6px;
width: 0;
height: 0;
top: 0;
border-style: solid;
border-width: 12px 7px 12px 0;
border-color: #c01d20 transparent #c01d20 #c01d20;
}
.detailItem__discount::after {
content: '';
position: absolute;
right: -5px;
bottom: 0;
width: 5px;
height: 4px;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
}
.detailItem__discount.is-goldBadge {
background: #d4b15c;
}
.detailItem__discount.is-goldBadge::before {
border-color: #d4b15c transparent #d4b15c #d4b15c;
}
.detailItem__noItem {
padding: 170px 0 100px;
text-align: center;
}
.detailItem__noItemText {
position: relative;
font-size: 20px;
color: #d5d8de;
}
.detailItem__noItemText::before {
content: "";
display: block;
text-indent: 0;
}
.detailItem__noItemText::before {
position: absolute;
top: -85px;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
margin: auto 0;
font-size: 120px;
color: #e5e8ee;
}
.detailItem__listTitle {
font-size: 20px;
display: inline-block;
}
.detailItem__viewChangeWrapper {
margin: 0 0 10px;
}
.detailItem__viewChangeWrapper:after {
content: "";
clear: both;
display: block;
}
.detailItem__sort {
background: #F4F6F8;
padding: 10px 0px 10px 20px;
overflow: hidden;
font-size: 15px;
position: relative;
margin: 0 0 30px;
}
.detailItem__sort--border {
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
padding: 15px 0px 15px 20px;
overflow: hidden;
font-size: 15px;
}
.detailItem__sortSelect {
position: absolute;
background: url(../materials/select.png) no-repeat 95% 50%;
line-height: 1.2;
padding: 0 40px 0 15px;
min-width: 200px;
height: 48px;
background-color: #fff;
border: 2px solid #eee;
top: 0;
left: 0;
}
.detailItem__sortBox {
float: right;
width: 200px;
font-size: 0px;
text-align: right;
}
.detailItem__sortType {
display: inline-block;
padding: 5px 12px;
line-height: 1.0;
border-right: 1px solid #aaa;
font-size: 14px;
}
.detailItem__sortType:last-child {
border-right: none;
}
.detailItem__sortButton {
color: #888;
}
.detailItem__sortButton.is-current {
color: #C3A358;
position: relative;
}
.detailItem__sortButton.is-current::after {
content: '';
position: absolute;
height: 2px;
width: 100%;
left: 0;
bottom: -8px;
background-color: #ab8e48;
}
.detailItem__tabWrapper {
position: relative;
margin: 0 0 30px;
}
.detailItem__tabWrapper:after {
content: "";
clear: both;
display: block;
}
.detailItem__tabWrapper::after {
content: '';
bottom: 0px;
width: 100%;
height: 1px;
background: #dedede;
z-index: 1;
}
.detailItem__listBox.is-tile {
position: relative;
margin: 0 0px 30px;
}
.detailItem__listBox.is-tile .detailItem__list {
position: relative;
font-size: 0;
margin: 0 -5px 0 -32px;
}
.detailItem__listBox.is-tile .detailItem__listItem {
display: inline-block;
vertical-align: bottom;
text-align: center;
width: 25%;
margin: 0;
padding: 0 0 32px 32px;
}
@media screen and (min-width: 500px) and (max-width: 1151px) {
.detailItem__listBox.is-tile .detailItem__listItem {
width: 25%;
}
}
@media screen and (min-width: 1052px) and (max-width: 1279px) {
.detailItem__listBox.is-tile .detailItem__listItem {
width: 20%;
}
}
@media screen and (min-width: 1280px) and (max-width: 1439px) {
.detailItem__listBox.is-tile .detailItem__listItem {
width: 16.66%;
}
}
@media screen and (min-width: 1440px) and (max-width: 1599px) {
.detailItem__listBox.is-tile .detailItem__listItem {
width: 14.28%;
}
}
@media screen and (min-width: 1600px) and (max-width: 1759px) {
.detailItem__listBox.is-tile .detailItem__listItem {
width: 12.5%;
}
}
@media screen and (min-width: 1760px) and (max-width: 1919px) {
.detailItem__listBox.is-tile .detailItem__listItem {
width: 11.11%;
}
}
@media screen and (min-width: 1920px) {
.detailItem__listBox.is-tile .detailItem__listItem {
width: 10%;
}
}
.detailItem__listBox.is-tile .detailItem__listItemInner {
padding: 0;
}
.detailItem__listBox.is-tile .detailItem__imageBox {
margin: 0;
float: none;
width: auto;
}
.detailItem__listBox.is-tile .detailItem__imageWrapper {
position: relative;
max-width: 145px;
height: 210px;
display: inline-block;
font-size: 0;
white-space: nowrap;
}
.detailItem__listBox.is-tile .detailItem__imageWrapper.js-imgLoading > * {
opacity: 0;
}
.detailItem__listBox.is-tile .detailItem__imageWrapper.js-imgLoading .loadingIcon {
opacity: 1;
font-size: 10px;
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 1.2em;
height: 1.2em;
margin: auto;
text-indent: -9999em;
color: #d1d5d8;
background: #d1d5d8;
border-radius: 50%;
line-height: 1;
}
.detailItem__listBox.is-tile .detailItem__imageWrapper.js-imgLoading .loadingIcon::before, .detailItem__listBox.is-tile .detailItem__imageWrapper.js-imgLoading .loadingIcon::after {
position: absolute;
top: 0;
width: 1.2em;
height: 1.2em;
content: '';
background: #d1d5d8;
border-radius: 50%;
}
.detailItem__listBox.is-tile .detailItem__imageWrapper.js-imgLoading .loadingIcon::before {
left: -2em;
}
.detailItem__listBox.is-tile .detailItem__imageWrapper.js-imgLoading .loadingIcon::after {
left: 2em;
}
.detailItem__listBox.is-tile .detailItem__imageWrapper::before {
content: '';
width: 1px;
height: 210px;
display: inline-block;
margin-left: -1px;
}
.detailItem__listBox.is-tile .detailItem__image {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
display: inline-block;
min-width: 75%;
max-width: 100%;
max-height: 100%;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
}
.detailItem__listBox.is-tile .detailItem__infoBox {
display: none;
}
.detailItem__listBox.is-tile .detailItem__link {
display: block;
height: 210px;
}
.detailCollect__inner {
padding: 10px 70px 0;
min-width: 1024px;
width: 100%;
}
.detailCollect__titleBlock {
margin: 0 0 25px;
padding: 0 0 20px;
position: relative;
border-bottom: 1px solid #eeeeee;
}
.detailCollect__titleBlock:after {
content: "";
clear: both;
display: block;
}
.detailCollect__titleBlockInner {
display: inline-block;
box-sizing: border-box;
float: left;
padding: 12px 0 0;
}
.detailCollect__titleBlockTitle {
color: #1b2433;
font-size: 20px;
font-weight: bold;
}
.detailCollect__allCartBox {
float: right;
padding: 0 10px 0 0;
}
.detailCollect__button {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
height: 36px;
line-height: 36px;
border-radius: 18px;
font-size: 13px;
font-weight: bold;
background-color: #ff9000;
box-shadow: 0 -2px 0 0 #e58100 inset;
color: #fff;
}
.detailCollect__button--iconCart {
white-space: nowrap;
overflow: hidden;
text-indent: 120%;
display: inline-block;
border-radius: 50%;
line-height: 33px;
width: 33px;
height: 33px;
text-align: center;
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
box-shadow: 0 -2px 0 0 #00abbb inset;
color: #fff;
font-size: 14px;
font-weight: bold;
background: #00a2d6;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a2d6', endColorstr='#00bcd0',GradientType=0 );
}
.detailCollect__button--iconCart::before {
content: "";
display: block;
text-indent: 0;
}
.detailCollect__button--iconCart::before {
position: absolute;
display: inline-block;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: auto 0;
height: 1.1em;
font-size: 22px;
line-height: 1;
}
.detailCollect__button--iconCart.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.detailCollect__button--iconCart.is-buttonDisabled span {
color: #bbbbbb !important;
}
.detailCollect__button--iconCart.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.detailCollect__button--iconCart.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.detailCollect__button--iconCart.is-buttonCancel span {
color: #999999 !important;
}
.detailCollect__button--iconCart.is-buttonCancel span::before {
color: #999999 !important;
}
.detailCollect__button--iconCartAll {
display: inline-block;
text-align: center;
position: relative;
height: 34px;
line-height: 34px;
border-radius: 18px;
font-size: 13px;
font-weight: bold;
color: #fff;
box-shadow: 0 -2px 0 0 #00abbb inset;
width: 150px;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
width: 190px;
}
.detailCollect__button--iconCartAll::before {
content: "";
display: block;
text-indent: 0;
}
.detailCollect__button--iconCartAll::before {
position: relative;
display: inline-block;
top: 5px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 25px;
line-height: 0;
}
.detailCollect__buttonBox {
background-color: #f4f6f8;
border-top: 1px solid #eeeeee;
}
.detailCollect__buttonBoxInner {
padding: 20px 20px;
box-sizing: border-box;
}
.detailCollect__buttonStyle, .detailCollect__buttonStyle--iconBuy {
display: block;
border: 1px solid #cccccc;
border-radius: 21px;
line-height: 42px;
height: 42px;
text-align: center;
position: relative;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #bda452;
font-size: 14px;
font-weight: bold;
width: 100%;
}
.detailCollect__buttonStyle--iconBuy {
background-color: #fff;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #ab8e48;
}
.detailCollect__buttonStyle--iconBuy::before {
content: "";
display: block;
text-indent: 0;
}
.detailCollect__buttonStyle--iconBuy::before {
position: relative;
display: inline-block;
top: 4px;
margin: auto 0;
height: 1.1em;
font-size: 22px;
line-height: 1;
}
.detailCollect__collectList {
margin: 25px 0 0 -40px;
}
.detailCollect__collectListItem {
display: inline-block;
margin: 0 0 30px 40px;
padding: 15px 15px;
width: -webkit-calc((100% - 131px)/3);
width: calc((100% - 131px)/3);
border: 1px solid #dedede;
border-radius: 4px;
background: #f4f6f8;
position: relative;
}
.detailCollect__collectListItem:after {
content: "";
clear: both;
display: block;
}
.detailCollect__listText {
font-size: 16px;
font-weight: bold;
}
.detailCollect__listTextPrice {
display: inline-block;
position: absolute;
top: 50%;
right: 65px;
font-size: 16px;
color: #c01200;
font-weight: bold;
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
}
.detailCollect__listPrice {
color: #c01200;
font-size: 18px;
font-weight: bold;
display: inline-block;
position: absolute;
top: 50%;
right: 65px;
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
}
.detailCollect__tax {
font-weight: normal;
color: #1d2334;
font-size: 12px;
margin: 0 0 0 5px;
}
.detailCollect__cartButton {
white-space: nowrap;
overflow: hidden;
text-indent: 120%;
display: inline-block;
border-radius: 50%;
line-height: 33px;
width: 33px;
height: 33px;
text-align: center;
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
box-shadow: 0 -2px 0 0 #00abbb inset;
color: #fff;
font-size: 14px;
font-weight: bold;
background: #00a2d6;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a2d6', endColorstr='#00bcd0',GradientType=0 );
}
.detailCollect__cartButton::before {
content: "";
display: block;
text-indent: 0;
}
.detailCollect__cartButton::before {
position: absolute;
display: inline-block;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: auto 0;
height: 1.1em;
font-size: 22px;
line-height: 1;
}
.detailCollect__cartButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.detailCollect__cartButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.detailCollect__cartButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.detailCollect__cartButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.detailCollect__cartButton.is-buttonCancel span {
color: #999999 !important;
}
.detailCollect__cartButton.is-buttonCancel span::before {
color: #999999 !important;
}
.detailCollect__cartButton::before {
content: "";
display: block;
text-indent: 0;
}
.detailCollect__bookShelfButton {
white-space: nowrap;
overflow: hidden;
text-indent: 120%;
display: inline-block;
border-radius: 50%;
line-height: 33px;
width: 33px;
height: 33px;
text-align: center;
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
box-shadow: 0 -2px 0 0 #00abbb inset;
color: #fff;
font-size: 14px;
font-weight: bold;
background: #00a2d6;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a2d6', endColorstr='#00bcd0',GradientType=0 );
}
.detailCollect__bookShelfButton::before {
content: "";
display: block;
text-indent: 0;
}
.detailCollect__bookShelfButton::before {
position: absolute;
display: inline-block;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: auto 0;
height: 1.1em;
font-size: 22px;
line-height: 1;
}
.detailCollect__bookShelfButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.detailCollect__bookShelfButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.detailCollect__bookShelfButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.detailCollect__bookShelfButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.detailCollect__bookShelfButton.is-buttonCancel span {
color: #999999 !important;
}
.detailCollect__bookShelfButton.is-buttonCancel span::before {
color: #999999 !important;
}
.detailCollect__bookShelfButton::before {
content: "";
display: block;
text-indent: 0;
}
.detailCollect__caution {
color: #cc0000;
font-size: 14px;
}
.bookVisualDetail {
width: 100%;
position: relative;
overflow: hidden;
background-color: #000;
}
.bookVisualDetail::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: 1;
}
.bookVisualDetail__inner {
position: relative;
z-index: 2;
padding: 30px 80px 20px;
}
.bookVisualDetail__authorInner {
position: relative;
z-index: 2;
padding: 50px 80px;
}
.bookVisualDetail__mainBox {
font-size: 0;
display: inline-block;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
box-shadow: 0 0 12px 12px rgba(0, 0, 0, 0.12) inset;
}
.bookVisualDetail__mainBox:after {
content: "";
clear: both;
display: block;
}
.bookVisualDetail__mainBoxContent {
display: inline-block;
width: 60%;
position: relative;
z-index: 2;
margin: 0 0 0 0;
padding: 0 25px 10px 0;
vertical-align: middle;
}
.bookVisualDetail__mainBoxContent:after {
content: "";
clear: both;
display: block;
}
.bookVisualDetail__mainBoxContent.is-bookImage {
width: 400px;
float: left;
}
.bookVisualDetail__bookContent {
display: table-cell;
position: relative;
}
.bookVisualDetail__imageBox {
float: left;
width: 100px;
position: relative;
}
.bookVisualDetail__image {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
display: inline-block;
min-width: 75%;
max-width: 100%;
max-height: 100%;
width: 100%;
line-height: 0;
}
.bookVisualDetail__image.is-horizontal {
width: 100%;
}
.bookVisualDetail__image.is-vertical {
height: 100%;
width: auto;
}
.bookVisualDetail__itemNoImageWrapper {
width: 100px;
position: relative;
}
.bookVisualDetail__itemNoImage {
display: inline-block;
position: relative;
background: #f5f5f5 url(../materials/noimage.png) 0 0 no-repeat;
background-size: 100% 100%;
background-position: center bottom;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
width: 145px;
height: 0;
padding: 139% 0 0;
word-wrap: break-word;
white-space: normal;
line-height: 1.4;
width: 100%;
height: 0;
padding-top: 139%;
cursor: pointer;
}
.bookVisualDetail__itemNoImage.is-adult {
font-size: 14px;
}
.bookVisualDetail__itemNoImage.is-adult::before {
content: "";
display: block;
text-indent: 0;
}
.bookVisualDetail__itemNoImage.is-adult div {
top: -webkit-calc(50% - 0);
top: calc(50% - 0);
padding: 10px 0 40px;
}
.bookVisualDetail__itemNoImage.is-adult::before {
position: absolute;
display: inline-block;
left: 0;
right: 0;
top: 55px;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #c0c0c0;
font-size: 28px;
z-index: 1;
text-align: center;
}
.bookVisualDetail__itemNoImageInner {
position: absolute;
left: 5px;
right: 5px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #888;
background: #f5f5f5;
padding: 10px 0;
}
.bookVisualDetail__noImageTitle {
font-size: 12px;
font-weight: bold;
padding: 0 0 5px;
max-height: 2.8em;
overflow: hidden;
}
.bookVisualDetail__noImageAuthor {
font-size: 12px;
max-height: 2.8em;
overflow: hidden;
}
.bookVisualDetail__noImageItem {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.bookVisualDetail__titleBox {
float: right;
width: -webkit-calc(100% - 120px);
width: calc(100% - 120px);
}
.bookVisualDetail__labelItem {
display: inline-block;
font-size: 12px;
line-height: 1;
color: #fff;
border: 1px solid #fff;
padding: 4px 6px;
margin: 0 5px 10px 0;
}
.bookVisualDetail__authorTitleBox {
display: table-cell;
position: relative;
z-index: 2;
margin: 0 0 0 0;
padding: 0 0 10px;
vertical-align: middle;
}
.bookVisualDetail__authorTitleBox:after {
content: "";
clear: both;
display: block;
}
.bookVisualDetail__authorTitleBox.is-bookImage {
width: 400px;
float: left;
}
.bookVisualDetail__textBox {
display: inline-block;
vertical-align: middle;
margin: 0px 0 0 0;
font-size: 14px;
color: #fff;
position: relative;
z-index: 2;
width: 40%;
}
.bookVisualDetail__title, .bookVisualDetail__title--author {
font-size: 20px;
color: #fff;
text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
font-weight: bold;
margin: 0 0 5px;
word-wrap: break-word;
}
.bookVisualDetail__title--author {
font-size: 24px;
}
.bookVisualDetail__text {
font-size: 14px;
color: #fff;
text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
margin: 0 0 5px;
}
.bookVisualDetail__detailText {
font-size: 14px;
color: #fff;
text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
line-height: 1.8;
}
.bookVisualDetail__toggleList {
padding: 15px 0 0;
}
.bookVisualDetail__toggleList:after {
content: "";
clear: both;
display: block;
}
.bookVisualDetail__toggleTitleBox {
float: left;
}
.bookVisualDetail__toggleTitle {
font-size: 14px;
color: #fff;
font-weight: bold;
}
.bookVisualDetail__toggleBox {
float: left;
margin: 0 0 0 12px;
height: 22px;
width: 60px;
position: relative;
cursor: pointer;
background: rgba(255, 255, 255, 0.3);
}
.bookVisualDetail__toggleText {
color: #dedede;
}
.bookVisualDetail__input {
border: 1px solid #cccccc;
border-radius: 8px;
background-color: #f9f9f9;
box-shadow: inset 0px 3px 4px 0px rgba(0, 0, 0, 0.15);
height: 40px;
line-height: 40px;
width: 100%;
margin: 10px 0 0 0;
padding: 0 10px;
}
.bookVisualDetail__tagList {
padding: 10px 0 0;
}
.bookVisualDetail__tagList:after {
content: "";
clear: both;
display: block;
}
.bookVisualDetail__tagItem {
float: left;
display: inline-block;
padding: 5px 12px;
box-sizing: border-box;
border-radius: 12px;
color: #fff;
border: 1px solid #fff;
font-size: 12px;
line-height: 1;
margin: 0 5px 5px 0;
}
.bookVisualDetail__linkButton {
background: #b1994e;
display: inline-block;
padding: 2px 24px 2px 10px;
border-radius: 13px;
font-size: 12px;
color: #fff;
margin: 13px 0 0;
position: relative;
}
.bookVisualDetail__linkButton::after {
background-image: url(../materials/sprites.png);
background-position: 0px -222.5px;
width: 9px;
height: 12px;
background-size: 290px 251.5px;
content: '';
position: absolute;
right: 5px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.bookVisualDetail__bg {
position: absolute;
width: 100%;
z-index: 0;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
opacity: .7;
padding-bottom: 65%;
background-size: contain;
background-position: center;
}
.bookVisualDetail__bg::before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
z-index: 51;
}
.bookVisualDetail__bg .blurr-bg {
min-width: -webkit-calc(100% + 70px);
min-width: calc(100% + 70px);
margin: 0 0 0 -35px;
}
.bookVisualDetail__link {
color: #fff;
}
.bookVisualDetail__starBox {
margin: 0 0 0;
}
.bookVisualDetail__starBox:after {
content: "";
clear: both;
display: block;
}
.bookVisualDetail__star {
margin: 6px 0 0;
}
.bookVisualDetail__star:after {
content: "";
clear: both;
display: block;
}
.bookVisualDetail__starList {
display: inline-block;
float: left;
margin: 0 5px 0 0;
font-size: 20px;
line-height: 1;
}
.bookVisualDetail__starList:after {
content: "";
clear: both;
display: block;
}
.bookVisualDetail__starItem {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
}
.bookVisualDetail__starItem::before {
content: "";
display: block;
text-indent: 0;
}
.bookVisualDetail__starItem::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.bookVisualDetail__starItem--on {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
color: #ffb349;
}
.bookVisualDetail__starItem--on::before {
content: "";
display: block;
text-indent: 0;
}
.bookVisualDetail__starItem--on::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.bookVisualDetail__starItem--half {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
}
.bookVisualDetail__starItem--half::before {
content: "";
display: block;
text-indent: 0;
}
.bookVisualDetail__starItem--half::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.bookVisualDetail__starItem--half::after {
content: "";
display: block;
text-indent: 0;
}
.bookVisualDetail__starItem--half::after {
color: #ffb349;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
right: 50%;
overflow: hidden;
}
.bookVisualDetail__starNumber {
display: inline-block;
font-size: 12px;
color: #fff;
float: left;
line-height: 1;
position: relative;
top: 7px;
}
.bookVisualDetail__starText {
font-size: 14px;
color: #fff;
font-weight: bold;
text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
.reviewVisualDetail {
width: 100%;
position: relative;
overflow: hidden;
background-color: #000;
}
.reviewVisualDetail__inner {
position: relative;
z-index: 2;
background: #f4f6f8;
}
.reviewVisualDetail__mainBox {
width: 100%;
position: relative;
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
padding: 0 40px 30px;
}
.reviewVisualDetail__mainBox:after {
content: "";
clear: both;
display: block;
}
/*
#styleguide
ページャー
@detail
```
```
*/
.pager {
margin: 10px 0 50px;
width: 100%;
box-sizing: border-box;
}
.pager__list {
position: relative;
font-size: 0;
text-align: center;
}
.pager__item {
display: inline-block;
position: relative;
width: 45px;
letter-spacing: 0;
}
.pager__link {
display: block;
height: 45px;
line-height: 45px;
background-color: #edeff3;
letter-spacing: normal;
text-align: center;
font-size: 15px;
}
.is-current .pager__link {
color: #fff;
background-color: #1d2334;
font-weight: bold;
}
.is-noLink .pager__link {
background-color: transparent;
}
.modalReviewBlock {
padding: 0 70px 0;
}
.modalReviewBlock__title {
font-size: 20px;
font-weight: bold;
color: #182432;
margin: 0 0 25px;
}
.modalReviewBlock__score, .modalReviewBlock__score--small, .modalReviewBlock__score--large {
margin: 0 0 0;
font-size: 12px;
color: #182432;
position: relative;
height: 24px;
}
.modalReviewBlock__score:after, .modalReviewBlock__score--small:after, .modalReviewBlock__score--large:after {
content: "";
clear: both;
display: block;
}
.modalReviewBlock__score .modalReviewBlock__starList, .modalReviewBlock__score--small .modalReviewBlock__starList, .modalReviewBlock__score--large .modalReviewBlock__starList,
.modalReviewBlock__score .modalReviewBlock__starList--star1, .modalReviewBlock__score--small .modalReviewBlock__starList--star1, .modalReviewBlock__score--large .modalReviewBlock__starList--star1,
.modalReviewBlock__score .modalReviewBlock__starList--star2, .modalReviewBlock__score--small .modalReviewBlock__starList--star2, .modalReviewBlock__score--large .modalReviewBlock__starList--star2,
.modalReviewBlock__score .modalReviewBlock__starList--star3, .modalReviewBlock__score--small .modalReviewBlock__starList--star3, .modalReviewBlock__score--large .modalReviewBlock__starList--star3,
.modalReviewBlock__score .modalReviewBlock__starList--star4, .modalReviewBlock__score--small .modalReviewBlock__starList--star4, .modalReviewBlock__score--large .modalReviewBlock__starList--star4,
.modalReviewBlock__score .modalReviewBlock__starList--star5, .modalReviewBlock__score--small .modalReviewBlock__starList--star5, .modalReviewBlock__score--large .modalReviewBlock__starList--star5 {
position: absolute;
bottom: 0px;
font-size: 20px;
}
.modalReviewBlock__score--small {
position: relative;
margin: 0 0 8px;
height: 14px;
}
.modalReviewBlock__score--small .modalReviewBlock__starList,
.modalReviewBlock__score--small .modalReviewBlock__starList--star1,
.modalReviewBlock__score--small .modalReviewBlock__starList--star2,
.modalReviewBlock__score--small .modalReviewBlock__starList--star3,
.modalReviewBlock__score--small .modalReviewBlock__starList--star4,
.modalReviewBlock__score--small .modalReviewBlock__starList--star5 {
position: absolute;
bottom: 0px;
font-size: 14px;
}
.modalReviewBlock__score--large {
position: absolute;
top: 50px;
left: 410px;
width: 320px;
}
.modalReviewBlock__score--large .modalReviewBlock__starList,
.modalReviewBlock__score--large .modalReviewBlock__starList--star1,
.modalReviewBlock__score--large .modalReviewBlock__starList--star2,
.modalReviewBlock__score--large .modalReviewBlock__starList--star3,
.modalReviewBlock__score--large .modalReviewBlock__starList--star4,
.modalReviewBlock__score--large .modalReviewBlock__starList--star5 {
position: absolute;
bottom: 0px;
font-size: 20px;
}
.modalReviewBlock__scorePoint {
font-size: 28px;
font-weight: bold;
color: #182432;
}
.modalReviewBlock__scorePointText {
font-size: 12px;
font-weight: bold;
color: #182432;
}
.modalReviewBlock__buttonBox {
margin: 20px 0 0;
}
.modalReviewBlock__scoreText {
position: absolute;
bottom: 0;
left: 110px;
line-height: 1;
}
.modalReviewBlock__scoreBarBox {
width: 190px;
height: 10px;
position: absolute;
left: 80px;
}
.modalReviewBlock__scoreBar {
width: 190px;
height: 10px;
background-color: #f4f6f8;
position: relative;
}
.modalReviewBlock__scoreBarInner {
height: 10px;
background-color: #c2a359;
}
.modalReviewBlock__userIcon {
width: 40px;
height: 40px;
overflow: hidden;
border-radius: 50%;
display: inline-block;
}
.modalReviewBlock__userIconImage {
width: 100%;
}
.modalReviewBlock__likeBox {
position: absolute;
top: 30px;
right: 0;
}
.modalReviewBlock__starBox {
position: absolute;
top: 34px;
left: 50px;
}
.modalReviewBlock__userName {
position: absolute;
top: 48px;
left: 50px;
font-size: 14px;
color: #1b2433;
}
.modalReviewBlock__list {
position: relative;
}
.modalReviewBlock__list:after {
content: "";
clear: both;
display: block;
}
.modalReviewBlock__list::before {
content: '';
position: absolute;
top: 0;
width: 100%;
height: 1px;
background-color: #eeeeee;
}
.modalReviewBlock__listItem {
border-bottom: 1px solid #eeeeee;
padding: 30px 0;
position: relative;
width: -webkit-calc(50% - 20px);
width: calc(50% - 20px);
float: left;
}
.modalReviewBlock__listItem:nth-child(2n) {
float: right;
}
.modalReviewBlock__reviewTitle {
font-size: 16px;
font-weight: bold;
color: #1b2433;
margin: 12px 0 0;
}
.modalReviewBlock__reviewText {
font-size: 14px;
color: #1b2433;
margin: 4px 0 0;
}
.modalReviewBlock__date {
color: #888888;
font-size: 14px;
margin: 10px 0 0;
}
.modalReviewBlock__violation {
position: absolute;
bottom: 30px;
right: 0px;
}
.modalReviewBlock__violationText {
position: relative;
font-size: 14px;
line-height: 1;
cursor: pointer;
padding: 0 0 0 22px;
color: #888888;
}
.modalReviewBlock__violationText::before {
content: "";
display: block;
text-indent: 0;
}
.modalReviewBlock__violationText::before {
position: absolute;
top: 1px;
left: 0px;
margin: auto 0;
height: 1.1em;
font-size: 16px;
}
.modalReviewBlock__reviewButton {
display: inline-block;
border: 1px solid #cccccc;
border-radius: 5px;
line-height: 48px;
height: 48px;
text-align: center;
position: relative;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #bda452;
font-size: 16px;
font-weight: bold;
padding: 0 40px;
}
.modalReviewBlock__bottomButtonBox {
text-align: center;
margin: 40px 0 0;
}
.modalReviewBlock__bottomButton {
display: inline-block;
border: 1px solid #cccccc;
border-radius: 5px;
line-height: 48px;
height: 48px;
text-align: center;
position: relative;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #bda452;
font-size: 16px;
font-weight: bold;
padding: 0 40px;
margin: auto;
}
.modalReviewBlock__starList {
display: inline-block;
float: left;
margin: 0 5px 0 0;
font-size: 14px;
line-height: 1;
}
.modalReviewBlock__starList:after {
content: "";
clear: both;
display: block;
}
.modalReviewBlock__starItem, .modalReviewBlock__starItem--on {
position: relative;
float: left;
color: #cccccc;
}
.modalReviewBlock__starItem::before, .modalReviewBlock__starItem--on::before {
content: "";
display: block;
text-indent: 0;
}
.modalReviewBlock__starItem::before, .modalReviewBlock__starItem--on::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.modalReviewBlock__starItem--on {
color: #ffb349;
}
.modalReviewBlock__starPoint {
display: inline-block;
font-size: 10px;
float: left;
line-height: 1;
position: relative;
top: 3px;
}
.modalReviewBlock__starNumber {
color: #888888;
font-size: 12px;
position: absolute;
left: 200px;
top: -7px;
}
.modalReviewBlock__like, .modalReviewBlock__like--checked {
width: 30px;
height: 30px;
border: 1px solid #cdcdcd;
border-radius: 50%;
position: relative;
display: inline-block;
color: #bbbbbb;
background-color: #f5f5f5;
line-height: 1;
cursor: pointer;
}
.modalReviewBlock__like::before, .modalReviewBlock__like--checked::before {
content: "";
display: block;
text-indent: 0;
}
.modalReviewBlock__like::before, .modalReviewBlock__like--checked::before {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: auto 0;
height: 1.1em;
font-size: 16px;
}
.modalReviewBlock__like--checked {
color: #c2a359;
background-color: #fff;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
}
.modalReviewBlock__likeBalloon {
position: relative;
background: #f5f5f5;
border: 1px solid #cccccc;
border-radius: 5px;
font-size: 16px;
padding: 0px 8px;
display: inline-block;
color: #1b2433;
top: -10px;
margin: 0 0 0 5px;
}
.modalReviewBlock__likeBalloon::after {
right: 100%;
top: 50%;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-right-color: #f5f5f5;
border-width: 5px;
margin-top: -5px;
}
.modalReviewBlock__likeBalloon::before {
right: 100%;
top: 50%;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(204, 204, 204, 0);
border-right-color: #cccccc;
border-width: 7px;
margin-top: -7px;
}
.modalReviewBlock__leftImageBox {
width: 340px;
float: left;
}
.modalReviewBlock__rightImageBox {
float: left;
width: -webkit-calc(100% - 340px);
width: calc(100% - 340px);
padding: 0 0 0 30px;
box-sizing: border-box;
}
.modalReviewBlock__mainBox {
padding: 50px 0 50px 40px;
position: relative;
}
.modalReviewBlock__mainBox:after {
content: "";
clear: both;
display: block;
}
.modalReviewBlock__infoBox {
float: right;
width: 200px;
}
.modalReviewBlock__imageBox {
float: left;
width: 108px;
}
.modalReviewBlock__bookImage {
width: 100%;
}
.modalReviewBlock__bookTitle {
font-size: 18px;
}
.modalReviewBlock__bookText {
font-size: 14px;
color: #888888;
}
.modalReviewBlock__imageWrapper {
overflow: hidden;
border-radius: 4px;
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
line-height: 0;
}
.modalReviewBlock__tabBox {
height: 44px;
background-color: #f4f6f8;
box-sizing: border-box;
width: 100%;
}
.modalReviewBlock__tabBox:after {
content: "";
clear: both;
display: block;
}
.modalReviewBlock__tabList {
float: right;
margin: 10px 30px 0 0;
}
.modalReviewBlock__tabItem {
font-size: 12px;
color: #888888;
float: left;
border-left: 1px solid #dedede;
line-height: 1;
}
.modalReviewBlock__tabItem:first-child {
border-left: 0px solid #dedede;
}
.modalReviewBlock__tabItemLink, .modalReviewBlock__tabItemLink--current {
display: block;
padding: 5px 10px;
}
.modalReviewBlock__tabItemLink--current {
color: #ab8e48;
pointer-events: none;
}
.modalReviewBlock__modalList {
position: relative;
box-sizing: border-box;
}
.modalReviewBlock__modalList:after {
content: "";
clear: both;
display: block;
}
.modalReviewBlock__modalList .modalReviewBlock__starBox {
left: 90px;
}
.modalReviewBlock__modalList .modalReviewBlock__userName {
left: 90px;
}
.modalReviewBlock__modalList .modalReviewBlock__likeBox {
right: 40px;
}
.modalReviewBlock__modalList .modalReviewBlock__violation {
right: 40px;
}
.modalReviewBlock__modalListItem {
border-bottom: 1px solid #eeeeee;
padding: 30px 40px;
position: relative;
float: left;
box-sizing: border-box;
}
.modalReviewBlock__smallStarBox {
margin: 44px 0 0 0;
}
.modalReviewBlock__modalButtonBox {
margin: 20px 0 0 0;
}
.modalReviewBlock__pagerBox {
display: none;
}
.modalSetItem {
padding: 35px 20px 0;
}
.modalSetItem__title {
font-size: 14px;
font-weight: bold;
}
.modalSetItem__listBox {
border-top: 1px solid #eeeeee;
padding: 20px 0 0 0;
margin: 15px 0 0 0;
}
.modalSetItem__list {
width: -webkit-calc(100% + 20px);
width: calc(100% + 20px);
margin: 0 0 0 -20px;
font-size: 0;
}
.modalSetItem__list:after {
content: "";
clear: both;
display: block;
}
.modalSetItem__listItem {
display: inline-block;
vertical-align: bottom;
width: 25%;
padding: 0 0 0 20px;
margin: 0 0 20px;
letter-spacing: -.4em;
}
.modalSetItem__itemLink {
display: block;
line-height: 0;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
}
.modalSetItem__itemImage {
width: 100%;
}
.modalSetItem__itemNoImage {
display: inline-block;
position: relative;
background: #f5f5f5 url(../materials/noimage.png) 0 0 no-repeat;
background-size: 100% 100%;
background-position: center bottom;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
width: 145px;
height: 0;
padding: 139% 0 0;
word-wrap: break-word;
white-space: normal;
line-height: 1.4;
width: 100%;
height: 0;
padding-top: 139%;
}
.modalSetItem__itemNoImage.is-adult {
font-size: 14px;
}
.modalSetItem__itemNoImage.is-adult::before {
content: "";
display: block;
text-indent: 0;
}
.modalSetItem__itemNoImage.is-adult div {
top: -webkit-calc(50% - 0);
top: calc(50% - 0);
padding: 10px 0 40px;
}
.modalSetItem__itemNoImage.is-adult::before {
position: absolute;
display: inline-block;
left: 0;
right: 0;
top: 55px;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #c0c0c0;
font-size: 28px;
z-index: 1;
text-align: center;
}
.modalSetItem__itemNoImage.is-adult > div {
padding: 10px 0 35px;
}
.modalSetItem__itemNoImage.is-adult::before {
top: 67px;
}
.modalSetItem__itemNoImageInner {
position: absolute;
left: 5px;
right: 5px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #888;
background: #f5f5f5;
padding: 10px 0;
}
.modalSetItem__noImageTitle {
font-size: 12px;
font-weight: bold;
padding: 0 0 5px;
max-height: 2.8em;
overflow: hidden;
}
.modalSetItem__noImageAuthor {
font-size: 12px;
max-height: 2.8em;
overflow: hidden;
}
.modalSetItem__itemBadge {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
position: absolute;
left: -4px;
bottom: 10px;
height: 24px;
line-height: 24px;
color: #fff;
padding: 0 8px;
display: block;
background: #c01d20;
font-size: 12px;
font-weight: bold;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
white-space: nowrap;
z-index: 3;
}
.modalSetItem__itemBadge::before {
content: '';
position: absolute;
right: -6px;
width: 0;
height: 0;
top: 0;
border-style: solid;
border-width: 12px 7px 12px 0;
border-color: #c01d20 transparent #c01d20 #c01d20;
}
.modalSetItem__itemBadge::after {
content: '';
position: absolute;
right: -5px;
bottom: 0;
width: 5px;
height: 4px;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
}
.modalSetItem__itemBadge.is-goldBadge {
background: #d4b15c;
}
.modalSetItem__itemBadge.is-goldBadge::before {
border-color: #d4b15c transparent #d4b15c #d4b15c;
}
.adult {
color: #182432;
font-size: 14px;
}
.adult__inner {
margin: 90px 0 100px;
width: 100%;
padding: 0 20px;
box-sizing: borer-box;
text-align: center;
}
.adult__mark {
color: #aaaaaa;
width: 100px;
height: 100px;
margin: auto;
position: relative;
display: inline-block;
}
.adult__mark::before {
content: "";
display: block;
text-indent: 0;
}
.adult__mark::before {
position: absolute;
left: 50%;
top: 50%;
margin: auto;
height: 1.1em;
line-height: 1;
font-size: 100px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.adult__title {
font-size: 24px;
margin: 30px 0 0;
}
.adult__text {
font-size: 16px;
margin: 10px 0 0 0;
}
.adult__buttonBox {
margin: 15px 0 0 0;
}
.adult__button {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
width: 160px;
margin: 0 10px;
display: inline-block;
}
.adult__button.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.adult__button.is-buttonDisabled span {
color: #bbbbbb !important;
}
.adult__button.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.adult__button.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.adult__button.is-buttonCancel span {
color: #999999 !important;
}
.adult__button.is-buttonCancel span::before {
color: #999999 !important;
}
.adult__caution {
color: #b62626;
margin: 30px 0 0 0;
font-size: 14px;
}
.reviewer {
color: #182432;
font-size: 14px;
}
.reviewer__nameWrapper {
position: relative;
padding: 40px 70px;
box-sizing: border-box;
background: #f4f6f8;
color: #1b2433;
}
.reviewer__mainTitle {
margin: 50px 0 15px 80px;
font-size: 20px;
}
.reviewer__userImage {
position: relative;
z-index: 2;
background: #ccc;
width: 74px;
height: 74px;
overflow: hidden;
border-radius: 50%;
display: inline-block;
}
.reviewer__userIconImage {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
-webkit-transition: all .5s ease;
transition: all .5s ease;
z-index: 0;
min-width: 74px;
min-height: 74px;
}
.reviewer__userIconImage.is-display {
opacity: 1;
z-index: 2;
}
.reviewer__nameBox {
position: relative;
height: 74px;
}
.reviewer__userNameWrapper {
display: inline-block;
vertical-align: middle;
width: -webkit-calc(100% - 90px);
width: calc(100% - 90px);
position: absolute;
top: 50%;
left: 90px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: calc(100% - 90px);
}
.reviewer__userName {
position: absolute;
font-size: 20px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: -webkit-calc(100% - 200px);
width: calc(100% - 200px);
font-weight: normal;
}
.reviewer__likeIcon {
color: #1b2433;
font-size: 14px;
padding: 0 0 0 0;
display: inline-block;
position: relative;
}
.reviewer__likeIcon::before {
content: "";
display: block;
text-indent: 0;
}
.reviewer__likeIcon::before {
position: absolute;
top: -3px;
left: -28px;
margin: auto 0;
height: 1.1em;
font-size: 26px;
color: #1b2433;
}
.reviewer__userLikeBox {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
right: 0;
height: 25px;
}
.reviewer__userLikeBox .reviewer__likeBalloon {
position: absolute;
top: -3px;
left: 100px;
}
.reviewer__likeBox {
position: absolute;
top: 0;
right: 0;
}
.reviewer__likeNum {
position: relative;
font-size: 24px;
display: inline-block;
color: #1b2433;
top: 1px;
padding: 0 0 0 30px;
font-weight: bold;
}
.reviewer__likeNum::before {
content: ':';
position: absolute;
top: 2px;
left: 14px;
font-size: 14px;
font-weight: normal;
}
.reviewer__like {
width: 30px;
height: 30px;
border: 1px solid #cdcdcd;
border-radius: 50%;
position: relative;
display: inline-block;
color: #c2a359;
line-height: 1;
cursor: pointer;
background-color: #fff;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
}
.reviewer__like::before {
content: "";
display: block;
text-indent: 0;
}
.reviewer__like::before {
position: absolute;
top: 48%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: auto 0;
height: 1.1em;
font-size: 20px;
}
.reviewer__like.is-mine {
pointer-events: none;
color: #bbbbbb;
background-color: #f5f5f5;
box-shadow: 0 -2px 0 0 transparent inset;
}
.reviewer__like.is-checked {
width: 30px;
height: 30px;
border: 1px solid #cdcdcd;
border-radius: 50%;
position: relative;
display: inline-block;
color: #c2a359;
line-height: 1;
cursor: pointer;
background-color: #fff;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #bbbbbb;
background-color: #f5f5f5;
box-shadow: 0 -2px 0 0 transparent inset;
}
.reviewer__like.is-checked::before {
content: "";
display: block;
text-indent: 0;
}
.reviewer__like.is-checked::before {
position: absolute;
top: 48%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: auto 0;
height: 1.1em;
font-size: 20px;
}
.reviewer__like.is-checked.is-mine {
pointer-events: none;
color: #bbbbbb;
background-color: #f5f5f5;
box-shadow: 0 -2px 0 0 transparent inset;
}
.reviewer__likeBalloon {
position: relative;
background: #f5f5f5;
border: 1px solid #cccccc;
border-radius: 5px;
font-size: 16px;
padding: 0px 8px;
display: inline-block;
color: #1b2433;
top: -10px;
margin: 0 0 0 5px;
}
.reviewer__likeBalloon::after {
right: 100%;
top: 50%;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-right-color: #f5f5f5;
border-width: 5px;
margin-top: -5px;
}
.reviewer__likeBalloon::before {
right: 100%;
top: 50%;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(204, 204, 204, 0);
border-right-color: #cccccc;
border-width: 7px;
margin-top: -7px;
}
.reviewer__tabBox {
height: 58px;
box-sizing: border-box;
width: -webkit-calc(100% - 160px);
width: calc(100% - 160px);
border-top: 1px solid #dedede;
border-bottom: 1px solid #dedede;
margin: 2px 80px 0;
}
.reviewer__tabBox:after {
content: "";
clear: both;
display: block;
}
.reviewer__tabList {
float: right;
margin: 17px 0 0 0;
}
.reviewer__tabItem {
font-size: 14px;
color: #888;
float: left;
border-left: 1px solid #dedede;
line-height: 1;
padding: 5px 12px;
}
.reviewer__tabItem:first-child {
border-left: 0px solid #dedede;
}
.reviewer__tabItem:last-child {
padding: 5px 0 5px 12px;
}
.reviewer__tabItemLink, .reviewer__tabItemLink--current {
display: block;
color: #888;
}
.reviewer__tabItemLink--current {
color: #ab8e48;
pointer-events: none;
position: relative;
}
.reviewer__tabItemLink--current::after {
position: absolute;
content: '';
width: 100%;
height: 2px;
background-color: #ab8e48;
bottom: -8px;
left: 0;
}
.reviewer__reviewItemList {
box-sizing: border-box;
padding: 0 80px;
min-width: 1024px;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.reviewer__reviewItemList:after {
content: "";
clear: both;
display: block;
}
.reviewer__reviewItem {
padding: 30px 0;
box-sizing: border-box;
border-bottom: 1px solid #dedede;
display: inline-block;
width: -webkit-calc(50% - 20px);
width: calc(50% - 20px);
vertical-align: top;
margin: 0 20px 0 0;
}
.reviewer__reviewItem:after {
content: "";
clear: both;
display: block;
}
.reviewer__reviewItem:nth-child(even) {
margin: 0 0 0 20px;
}
.reviewer__reviewItemBox {
width: 100%;
}
.reviewer__reviewItemBox:after {
content: "";
clear: both;
display: block;
}
.reviewer__reviewItemLink {
display: block;
}
.reviewer__reviewItemLink:after {
content: "";
clear: both;
display: block;
}
.reviewer__imageWrapper {
width: 94px;
float: left;
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
overflow: hidden;
line-height: 0;
position: relative;
}
.reviewer__bookImage {
width: 100%;
}
.reviewer__itemNoImage {
display: inline-block;
position: relative;
background: #f5f5f5 url(../materials/noimage.png) 0 0 no-repeat;
background-size: 100% 100%;
background-position: center bottom;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
width: 145px;
height: 0;
padding: 139% 0 0;
word-wrap: break-word;
white-space: normal;
line-height: 1.4;
width: 100%;
height: 0;
padding-top: 139%;
}
.reviewer__itemNoImage.is-adult {
font-size: 14px;
}
.reviewer__itemNoImage.is-adult::before {
content: "";
display: block;
text-indent: 0;
}
.reviewer__itemNoImage.is-adult div {
top: -webkit-calc(50% - 0);
top: calc(50% - 0);
padding: 10px 0 40px;
}
.reviewer__itemNoImage.is-adult::before {
position: absolute;
display: inline-block;
left: 0;
right: 0;
top: 55px;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #c0c0c0;
font-size: 28px;
z-index: 1;
text-align: center;
}
.reviewer__itemNoImageInner {
position: absolute;
left: 5px;
right: 5px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #888;
background: #f5f5f5;
padding: 10px 0;
}
.reviewer__noImageTitle {
font-size: 12px;
font-weight: bold;
padding: 0 0 5px;
max-height: 2.8em;
overflow: hidden;
}
.reviewer__noImageAuthor {
font-size: 12px;
max-height: 2.8em;
overflow: hidden;
}
.reviewer__reviewTitle {
font-weight: bold;
font-size: 14px;
word-wrap: break-word;
width: -webkit-calc(100% - 80px);
width: calc(100% - 80px);
}
.reviewer__reviewItemNameBoxWrapper {
float: right;
width: -webkit-calc(100% - 112px);
width: calc(100% - 112px);
}
.reviewer__reviewItemNameBoxWrapper::before {
content: '';
left: 0;
height: 136px;
width: 1px;
display: inline-block;
vertical-align: middle;
}
.reviewer__reviewItemNameBox {
display: inline-block;
margin: 0 0 0 0;
width: -webkit-calc(100% - 7px);
width: calc(100% - 7px);
vertical-align: middle;
}
.reviewer__reviewItemName {
font-size: 16px;
font-weight: bold;
word-wrap: break-word;
}
.reviewer__reviewAutherName {
font-size: 14px;
color: #888888;
}
.reviewer__reviewBox {
width: 100%;
position: relative;
margin: 20px 0 0 0;
}
.reviewer__reviewText {
margin: 10px 0 0 0;
word-wrap: break-word;
}
.reviewer__reviewTextMore {
display: none;
}
.reviewer__starBox {
display: block;
margin: 5px 0 0 0;
}
.reviewer__starBox:after {
content: "";
clear: both;
display: block;
}
.reviewer__starList {
display: inline-block;
float: left;
margin: 0 5px 0 0;
font-size: 20px;
line-height: 1;
}
.reviewer__starList:after {
content: "";
clear: both;
display: block;
}
.reviewer__starItem {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
}
.reviewer__starItem::before {
content: "";
display: block;
text-indent: 0;
}
.reviewer__starItem::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.reviewer__starItem--on {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
color: #ffb349;
}
.reviewer__starItem--on::before {
content: "";
display: block;
text-indent: 0;
}
.reviewer__starItem--on::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.reviewer__starItem--half {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
}
.reviewer__starItem--half::before {
content: "";
display: block;
text-indent: 0;
}
.reviewer__starItem--half::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.reviewer__starItem--half::after {
content: "";
display: block;
text-indent: 0;
}
.reviewer__starItem--half::after {
color: #ffb349;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
right: 50%;
overflow: hidden;
}
.reviewer__readMore {
color: #ab8e48;
position: relative;
cursor: pointer;
padding: 0 15px 0 0;
white-space: nowrap;
}
.reviewer__readMore::after {
content: '';
width: 0;
height: 0;
position: absolute;
right: 0;
top: 5px;
border: 5px solid transparent;
border-top: 8px solid rgba(171, 142, 72, 0.5);
}
.reviewer__date {
color: #888888;
font-size: 14px;
margin: 10px 0 0;
}
.reviewer__editButtonBox {
position: absolute;
bottom: 0;
right: 0px;
}
.reviewer__edit {
display: inline-block;
margin: 0 5px 0 0;
}
.reviewer__delete {
display: inline-block;
margin: 0 5px 0 0;
}
.reviewer__violation {
display: inline-block;
}
.reviewer__violationText {
position: relative;
font-size: 12px;
line-height: 1;
display: inline-block;
color: #888888;
margin: 0 0 0 20px;
}
.reviewer__violationText::before {
content: "";
display: block;
text-indent: 0;
}
.reviewer__violationText::before {
position: absolute;
top: 30%;
left: -20px;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
margin: auto 0;
font-size: 16px;
width: 16px;
height: 16px;
color: #888888;
}
.reviewer__editText {
position: relative;
font-size: 12px;
line-height: 1;
display: inline-block;
color: #888888;
margin: 0 0 0 20px;
}
.reviewer__editText::before {
content: "";
display: block;
text-indent: 0;
}
.reviewer__editText::before {
position: absolute;
top: 30%;
left: -20px;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
margin: auto 0;
font-size: 16px;
width: 16px;
height: 16px;
color: #888888;
}
.reviewer__deleteText {
position: relative;
font-size: 12px;
line-height: 1;
display: inline-block;
color: #888888;
margin: 0 0 0 20px;
}
.reviewer__deleteText::before {
content: "";
display: block;
text-indent: 0;
}
.reviewer__deleteText::before {
position: absolute;
top: 30%;
left: -20px;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
margin: auto 0;
font-size: 16px;
width: 16px;
height: 16px;
color: #888888;
}
.reviewer__pagerBox .pager {
margin: 60px 0 60px;
}
.reviewer__noReview {
padding: 260px 0 160px;
text-align: center;
}
.reviewer__noReviewText {
position: relative;
font-size: 20px;
color: #d5d8de;
}
.reviewer__noReviewText::before {
content: "";
display: block;
text-indent: 0;
}
.reviewer__noReviewText::before {
position: absolute;
top: -85px;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
margin: auto 0;
font-size: 120px;
color: #e5e8ee;
}
.reviewWrite {
font-size: 14px;
color: #182432;
}
.reviewWrite + .detailItem .detailItem__listItemInner {
padding: 0 0 0 0;
}
.reviewWrite__itemTitle {
font-size: 18px;
font-weight: bold;
text-align: center;
word-wrap: break-word;
}
.reviewWrite__inputBox {
position: relative;
padding: 60px 40px 100px;
box-sizing: border-box;
width: 720px;
margin: auto;
}
.reviewWrite__starBox {
width: 300px;
margin: 10px auto 0;
text-align: center;
}
.reviewWrite__starNumber {
position: absolute;
opacity: 0;
visibility: hidden;
}
.reviewWrite__starListWrapper {
width: 300px;
margin: auto;
}
.reviewWrite__starListWrapper:after {
content: "";
clear: both;
display: block;
}
.reviewWrite__starList {
display: block;
margin: 0 0 0 0;
font-size: 24px;
line-height: 1;
}
.reviewWrite__starList:after {
content: "";
clear: both;
display: block;
}
.reviewWrite__starItem, .reviewWrite__starItem--on {
position: relative;
display: inline-block;
cursor: pointer;
color: #cccccc;
margin: 0 2px 0;
}
.reviewWrite__starItem::before, .reviewWrite__starItem--on::before {
content: "";
display: block;
text-indent: 0;
}
.reviewWrite__starItem::before, .reviewWrite__starItem--on::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto -3px;
height: 1.1em;
line-height: 1;
font-size: 36px;
}
.reviewWrite__starItem--on {
color: #ffb349;
}
.reviewWrite__starItem.is-current, .is-current.reviewWrite__starItem--on {
-webkit-animation: starSelect 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s 1 both;
animation: starSelect 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s 1 both;
}
.reviewWrite__starItem.is-current::after, .is-current.reviewWrite__starItem--on::after {
content: "";
display: block;
text-indent: 0;
}
.reviewWrite__starItem.is-current::after, .is-current.reviewWrite__starItem--on::after {
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto -3px;
height: 1.1em;
line-height: 1;
font-size: 36px;
-webkit-animation: starSelect--after 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s 1 both;
animation: starSelect--after 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s 1 both;
}
.reviewWrite__starText {
font-size: 11px;
color: #888888;
}
.reviewWrite__starText:after {
content: "";
clear: both;
display: block;
}
.reviewWrite__inputText {
background-color: #f9f9f9;
border-radius: 6px;
box-shadow: inset 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
padding: 10px 15px;
box-sizing: border-box;
width: 100%;
margin: 20px 0 0 0;
font-size: 16px;
border: 1px solid #cccccc;
}
.reviewWrite__inputText:-ms-input-placeholder {
color: #ccc;
}
.reviewWrite__inputText:-webkit-input-placeholder {
color: #ccc;
}
.reviewWrite__inputText:-moz-placeholder {
color: #ccc;
}
.reviewWrite__textArea {
background-color: #f9f9f9;
border-radius: 6px;
box-shadow: inset 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
padding: 10px 15px;
box-sizing: border-box;
width: 100%;
margin: 15px 0 0 0;
font-size: 16px;
border: 1px solid #cccccc;
}
.reviewWrite__textArea:-ms-input-placeholder {
color: #ccc;
}
.reviewWrite__textArea:-webkit-input-placeholder {
color: #ccc;
}
.reviewWrite__textArea:-moz-placeholder {
color: #ccc;
}
.reviewWrite__buttonBox {
width: 360px;
margin: 25px auto 0;
}
.reviewWrite__buttonBox:after {
content: "";
clear: both;
display: block;
}
.reviewWrite__submitButton {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
border: 0 solid #cccccc;
color: #fff;
box-shadow: 0 -3px 0px 0px #00a2b1 inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
cursor: pointer;
width: 160px;
margin: 0 10px 0;
float: right;
}
.reviewWrite__submitButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.reviewWrite__submitButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.reviewWrite__submitButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.reviewWrite__submitButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.reviewWrite__submitButton.is-buttonCancel span {
color: #999999 !important;
}
.reviewWrite__submitButton.is-buttonCancel span::before {
color: #999999 !important;
}
.reviewWrite__submitButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.reviewWrite__submitButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.reviewWrite__submitButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.reviewWrite__submitButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.reviewWrite__submitButton.is-buttonCancel span {
color: #999999 !important;
}
.reviewWrite__submitButton.is-buttonCancel span::before {
color: #999999 !important;
}
.reviewWrite__backButton {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
width: 160px;
margin: 0 10px 0;
float: left;
}
.reviewWrite__backButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.reviewWrite__backButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.reviewWrite__backButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.reviewWrite__backButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.reviewWrite__backButton.is-buttonCancel span {
color: #999999 !important;
}
.reviewWrite__backButton.is-buttonCancel span::before {
color: #999999 !important;
}
.reviewWrite__shareBoxWrapper {
padding: 40px 70px 0;
min-width: 1024px;
width: 100%;
}
.reviewWrite__shareBox {
padding: 60px 40px;
box-sizing: border-box;
text-align: center;
}
.reviewWrite__shareTitle {
font-size: 20px;
}
.reviewWrite__shareSubTitle {
font-size: 14px;
font-weight: bold;
margin: 0 0 0 0;
float: left;
line-height: 60px;
}
.reviewWrite__shareText {
margin: 5px 0 0 0;
}
.reviewWrite__shareButtonBox {
height: 60px;
background-color: #f4f6f8;
border: 1px solid #dedede;
width: 290px;
margin: 35px auto 0;
border-radius: 30px;
padding: 0 0 0 30px;
}
.reviewWrite__shareButtonBox:after {
content: "";
clear: both;
display: block;
}
.reviewWrite__shareButton, .reviewWrite__shareButton--facebook, .reviewWrite__shareButton--twitter {
border-radius: 50%;
background-color: #3564a2;
box-shadow: inset 0px -4px 0px 0px rgba(0, 0, 0, 0.1);
height: 36px;
width: 36px;
line-height: 36px;
color: #fff;
font-weight: bold;
font-size: 16px;
padding: 0 0 0 0;
display: inline-block;
position: relative;
margin: 10px 5px 0;
}
.reviewWrite__shareButton::before, .reviewWrite__shareButton--facebook::before, .reviewWrite__shareButton--twitter::before {
content: "";
display: block;
text-indent: 0;
}
.reviewWrite__shareButton::before, .reviewWrite__shareButton--facebook::before, .reviewWrite__shareButton--twitter::before {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 1.1em;
line-height: 1;
font-size: 18px;
}
.reviewWrite__shareButton--twitter {
background-color: #1da1f2;
}
.reviewWrite__shareButton--twitter::before {
content: "";
display: block;
text-indent: 0;
}
.reviewWrite__caution {
margin: 20px 0 0 0;
text-align: center;
}
.reviewWrite__cautionLink {
color: #ab8e48;
font-size: 14px;
display: inline-block;
padding: 0 0 0 22px;
position: relative;
line-height: 20px;
}
.reviewWrite__cautionLink::before {
content: "";
display: block;
text-indent: 0;
}
.reviewWrite__cautionLink::before {
position: absolute;
left: 0;
top: -1px;
bottom: 0;
margin: auto;
height: 1.1em;
line-height: 1;
font-size: 16px;
}
.reviewWrite__spOnly {
display: none;
}
.reviewWrite__loading {
margin: 0 auto;
width: 64px;
height: 124px;
padding: 30px 0;
}
.reviewWrite__loadingBody {
color: #c3a358;
font-size: 64px;
text-indent: -9999em;
overflow: hidden;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: pageLoading 1.7s infinite ease;
animation: pageLoading 1.7s infinite ease;
}
@-webkit-keyframes starSelect {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
10% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
20% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
60% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes starSelect {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
10% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
20% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
60% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes starSelect--after {
0% {
opacity: 0;
}
59% {
opacity: 0;
}
60% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
70% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: scale(1.4);
transform: scale(1.4);
}
}
@keyframes starSelect--after {
0% {
opacity: 0;
}
59% {
opacity: 0;
}
60% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
70% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: scale(1.4);
transform: scale(1.4);
}
}
.modalBookshelf {
padding: 10px 40px;
box-sizing: border-box;
font-size: 14px;
text-align: center;
}
.modalBookshelf__contentBox {
display: inline-block;
width: 100%;
margin: auto;
padding: 20px 0;
text-align: left;
border-bottom: 1px solid #dedede;
}
.modalBookshelf__contentBox:after {
content: "";
clear: both;
display: block;
}
.modalBookshelf__contentBox:last-child {
border-bottom: 0;
}
.modalBookshelf__contentDetail {
display: inline-block;
width: 100%;
margin: auto;
padding: 0 0 10px;
text-align: left;
}
.modalBookshelf__contentDetail:after {
content: "";
clear: both;
display: block;
}
.modalBookshelf__textBox {
margin: 0 0 0 0;
float: left;
}
.modalBookshelf__contentReadBox {
text-align: left;
padding: 0;
}
.modalBookshelf__toggleBox {
float: right;
margin: 0 0 0 0;
height: 22px;
width: 60px;
position: relative;
}
.modalBookshelf__input {
border: 1px solid #cccccc;
border-radius: 8px;
background-color: #f9f9f9;
box-shadow: inset 0px 3px 4px 0px rgba(0, 0, 0, 0.15);
height: 40px;
line-height: 40px;
width: 100%;
margin: 10px 0 0 0;
padding: 0 10px;
}
.modalBookshelf__buttonBox {
margin: 30px 0 0 0;
}
.modalBookshelf__buttonBox:after {
content: "";
clear: both;
display: block;
}
.modalBookshelf__button {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
}
.modalBookshelf__button.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.modalBookshelf__button.is-buttonDisabled span {
color: #bbbbbb !important;
}
.modalBookshelf__button.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.modalBookshelf__button.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.modalBookshelf__button.is-buttonCancel span {
color: #999999 !important;
}
.modalBookshelf__button.is-buttonCancel span::before {
color: #999999 !important;
}
.modalBookshelf__button--active {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
}
.modalBookshelf__button--active.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.modalBookshelf__button--active.is-buttonDisabled span {
color: #bbbbbb !important;
}
.modalBookshelf__button--active.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.modalBookshelf__button--active.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.modalBookshelf__button--active.is-buttonCancel span {
color: #999999 !important;
}
.modalBookshelf__button--active.is-buttonCancel span::before {
color: #999999 !important;
}
.modalBookshelf__textDetail {
font-size: 12px;
}
.modalBookshelf__caution {
color: #b62626;
margin: 5px 0 0 0;
text-align: center;
}
.modalBookshelfItem {
padding: 20px 0 40px;
box-sizing: border-box;
font-size: 14px;
color: #1b2433;
text-align: center;
}
.modalBookshelfItem__contentBox {
position: relative;
margin: auto;
padding: 0 40px;
text-align: left;
}
.modalBookshelfItem__contentBox:after {
content: "";
clear: both;
display: block;
}
.modalBookshelfItem__titleBox {
display: inline-block;
width: -webkit-calc(100% - 110px);
width: calc(100% - 110px);
vertical-align: middle;
float: right;
}
.modalBookshelfItem__titleBox::before {
content: '';
width: 1px;
height: 0;
padding-bottom: 42%;
display: inline-block;
vertical-align: middle;
}
.modalBookshelfItem__titleBoxInner {
width: -webkit-calc(100% - 7px);
width: calc(100% - 7px);
display: inline-block;
vertical-align: middle;
}
.modalBookshelfItem__title {
font-size: 16px;
font-weight: bold;
margin: 0 0 10px;
word-wrap: break-word;
}
.modalBookshelfItem__text {
font-size: 14px;
color: #888888;
}
.modalBookshelfItem__imageBox {
width: 110px;
padding: 0 16px 0 0;
}
.modalBookshelfItem__imageWrapper {
position: relative;
margin: 0;
max-width: 145px;
height: 210px;
font-size: 0;
white-space: nowrap;
text-align: center;
max-width: 120px;
height: 174px;
}
.modalBookshelfItem__imageWrapper.js-imgLoading > * {
opacity: 0;
}
.modalBookshelfItem__imageWrapper.js-imgLoading .loadingIcon {
opacity: 1;
font-size: 10px;
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 1.2em;
height: 1.2em;
margin: auto;
text-indent: -9999em;
color: #d1d5d8;
background: #d1d5d8;
border-radius: 50%;
line-height: 1;
}
.modalBookshelfItem__imageWrapper.js-imgLoading .loadingIcon::before, .modalBookshelfItem__imageWrapper.js-imgLoading .loadingIcon::after {
position: absolute;
top: 0;
width: 1.2em;
height: 1.2em;
content: '';
background: #d1d5d8;
border-radius: 50%;
}
.modalBookshelfItem__imageWrapper.js-imgLoading .loadingIcon::before {
left: -2em;
}
.modalBookshelfItem__imageWrapper.js-imgLoading .loadingIcon::after {
left: 2em;
}
.modalBookshelfItem__imageWrapper::before {
content: '';
width: 1px;
height: 210px;
display: inline-block;
margin-left: -1px;
}
.modalBookshelfItem__imageWrapper::before {
height: 174px;
}
.modalBookshelfItem__imageWrapper::before {
height: 146px;
}
.modalBookshelfItem__image {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
display: inline-block;
min-width: 75%;
max-width: 100%;
max-height: 100%;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
}
.modalBookshelfItem__itemNoImage {
display: inline-block;
position: relative;
background: #f5f5f5 url(../materials/noimage.png) 0 0 no-repeat;
background-size: 100% 100%;
background-position: center bottom;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
width: 145px;
height: 0;
padding: 139% 0 0;
word-wrap: break-word;
white-space: normal;
line-height: 1.4;
width: 120px;
width: 100%;
}
.modalBookshelfItem__itemNoImage.is-adult {
font-size: 14px;
}
.modalBookshelfItem__itemNoImage.is-adult::before {
content: "";
display: block;
text-indent: 0;
}
.modalBookshelfItem__itemNoImage.is-adult div {
top: -webkit-calc(50% - 0);
top: calc(50% - 0);
padding: 10px 0 40px;
}
.modalBookshelfItem__itemNoImage.is-adult::before {
position: absolute;
display: inline-block;
left: 0;
right: 0;
top: 55px;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #c0c0c0;
font-size: 28px;
z-index: 1;
text-align: center;
}
.modalBookshelfItem__itemNoImage.is-adult {
width: 100%;
}
.modalBookshelfItem__itemNoImageInner {
position: absolute;
left: 5px;
right: 5px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #888;
background: #f5f5f5;
padding: 10px 0;
}
.modalBookshelfItem__noImageTitle {
font-size: 12px;
font-weight: bold;
padding: 0 0 5px;
max-height: 2.8em;
overflow: hidden;
}
.modalBookshelfItem__noImageAuthor {
font-size: 12px;
max-height: 2.8em;
overflow: hidden;
}
.modalBookshelfItem__link {
display: block;
}
.modalBookshelfItem__link:after {
content: "";
clear: both;
display: block;
}
.modalBookshelfItem__buttonBox {
margin: 20px 0 30px;
padding: 0 20px;
box-sizing: border-box;
font-size: 0;
letter-spacing: -0.08em;
}
.modalBookshelfItem__buttonBox:after {
content: "";
clear: both;
display: block;
}
.modalBookshelfItem__button {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
width: -webkit-calc(50% - 20px);
width: calc(50% - 20px);
display: inline-block;
margin: 0 10px;
white-space: nowrap;
}
.modalBookshelfItem__button.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.modalBookshelfItem__button.is-buttonDisabled span {
color: #bbbbbb !important;
}
.modalBookshelfItem__button.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.modalBookshelfItem__button.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.modalBookshelfItem__button.is-buttonCancel span {
color: #999999 !important;
}
.modalBookshelfItem__button.is-buttonCancel span::before {
color: #999999 !important;
}
.modalBookshelfItem__configBox {
margin-left: 150px;
text-align: left;
}
.modalBookshelfItem__configBox:after {
content: "";
clear: both;
display: block;
}
.modalBookshelfItem__textDetail {
font-size: 12px;
color: #888888;
margin: 10px 0 0;
}
.modalBookshelfItem__errorText {
margin: 10px 0 0;
text-align: center;
font-size: 12px;
color: #cc0000;
line-height: 1.6;
}
.reviewList {
color: #1b2433;
}
.reviewList__inner {
padding: 0 80px;
}
.reviewList__link {
color: #1b2433;
}
.reviewList__mainTitle {
margin: 50px 0 15px 80px;
font-size: 20px;
color: #1b2433;
}
.reviewList__switchBox {
width: 100%;
background-color: #fff;
border-top: 1px solid #dedede;
border-bottom: 1px solid #dedede;
margin: 5px 0 20px;
}
.reviewList__switchBox:after {
content: "";
clear: both;
display: block;
}
.reviewList__switchInner {
padding: 16px 70px 16px 0;
float: right;
}
.reviewList__switchList {
text-align: center;
font-size: 14px;
}
.reviewList__switchListItem, .reviewList__switchListItem--current {
display: inline-block;
padding: 0 22px;
border-left: 1px solid #dedede;
}
.reviewList__switchListItem:first-child, .reviewList__switchListItem--current:first-child {
border-left: 0px solid #dedede;
}
.reviewList__switchListItem--current .reviewList__switchListLink {
color: #bca450;
font-weight: bold;
}
.reviewList__title {
font-size: 20px;
font-weight: bold;
color: #182432;
margin: 0 0 25px;
}
.reviewList__score, .reviewList__score--small, .reviewList__score--large {
margin: 0 0 0;
font-size: 12px;
color: #182432;
position: relative;
height: 24px;
}
.reviewList__score:after, .reviewList__score--small:after, .reviewList__score--large:after {
content: "";
clear: both;
display: block;
}
.reviewList__score .reviewList__starList, .reviewList__score--small .reviewList__starList, .reviewList__score--large .reviewList__starList,
.reviewList__score .reviewList__starList--star1, .reviewList__score--small .reviewList__starList--star1, .reviewList__score--large .reviewList__starList--star1,
.reviewList__score .reviewList__starList--star2, .reviewList__score--small .reviewList__starList--star2, .reviewList__score--large .reviewList__starList--star2,
.reviewList__score .reviewList__starList--star3, .reviewList__score--small .reviewList__starList--star3, .reviewList__score--large .reviewList__starList--star3,
.reviewList__score .reviewList__starList--star4, .reviewList__score--small .reviewList__starList--star4, .reviewList__score--large .reviewList__starList--star4,
.reviewList__score .reviewList__starList--star5, .reviewList__score--small .reviewList__starList--star5, .reviewList__score--large .reviewList__starList--star5 {
position: absolute;
bottom: 0px;
font-size: 20px;
}
.reviewList__score--small {
position: relative;
margin: 0 0 8px;
height: 14px;
}
.reviewList__score--small .reviewList__starList,
.reviewList__score--small .reviewList__starList--star1,
.reviewList__score--small .reviewList__starList--star2,
.reviewList__score--small .reviewList__starList--star3,
.reviewList__score--small .reviewList__starList--star4,
.reviewList__score--small .reviewList__starList--star5 {
position: absolute;
bottom: 1px;
font-size: 18px;
left: -15px;
}
.reviewList__score--large {
position: absolute;
top: 50%;
right: 320px;
width: 200px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.reviewList__score--large .reviewList__starList,
.reviewList__score--large .reviewList__starList--star1,
.reviewList__score--large .reviewList__starList--star2,
.reviewList__score--large .reviewList__starList--star3,
.reviewList__score--large .reviewList__starList--star4,
.reviewList__score--large .reviewList__starList--star5 {
position: absolute;
top: 24px;
font-size: 24px;
left: -3px;
}
.reviewList__starItemTitle {
font-size: 16px;
}
.reviewList__scorePoint {
font-size: 28px;
font-weight: bold;
color: #1b2433;
}
.reviewList__scorePointText {
font-size: 12px;
font-weight: bold;
color: #1b2433;
}
.reviewList__scoreTextBox {
position: absolute;
top: 60px;
left: 0px;
line-height: 1;
}
.reviewList__scoreTextValue {
display: inline-block;
}
.reviewList__scoreTextReview {
display: inline-block;
position: relative;
top: -4px;
}
.reviewList__scoreBarBox {
width: 190px;
height: 10px;
position: absolute;
left: 80px;
}
.reviewList__scoreBar {
width: 190px;
height: 10px;
background-color: #fff;
position: relative;
}
.reviewList__scoreBarInner {
height: 10px;
background-color: #c2a359;
}
.reviewList__userIcon {
position: relative;
z-index: 2;
background: #ccc;
width: 40px;
height: 40px;
overflow: hidden;
border-radius: 50%;
display: inline-block;
}
.reviewList__userIconImage {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
-webkit-transition: all .5s ease;
transition: all .5s ease;
z-index: 0;
}
.reviewList__userIconImage.is-display {
opacity: 1;
z-index: 2;
}
.reviewList__likeBox {
position: absolute;
top: 86px;
right: 0;
}
.reviewList__starBox {
position: relative;
}
.reviewList__userName {
position: absolute;
top: 40px;
left: 50px;
font-size: 14px;
color: #1b2433;
max-width: -webkit-calc(100% - 50px);
max-width: calc(100% - 50px);
word-wrap: break-word;
}
.reviewList__list {
position: relative;
}
.reviewList__list:after {
content: "";
clear: both;
display: block;
}
.reviewList__list::before {
content: '';
position: absolute;
top: 0;
width: 100%;
height: 1px;
background-color: #eeeeee;
}
.reviewList__listItem {
border-bottom: 1px solid #eeeeee;
padding: 30px 0;
position: relative;
width: -webkit-calc(50% - 20px);
width: calc(50% - 20px);
float: left;
}
.reviewList__listItem:nth-child(2n) {
float: right;
}
.reviewList__reviewTitle {
font-size: 16px;
font-weight: bold;
margin: 12px 0 0;
word-wrap: break-word;
width: -webkit-calc(100% - 80px);
width: calc(100% - 80px);
}
.reviewList__reviewText {
font-size: 14px;
margin: 35px 0 10px;
word-wrap: break-word;
}
.reviewList__listDetailInner:after {
content: "";
clear: both;
display: block;
}
.reviewList__detailbuttonBox {
float: right;
}
.reviewList__date {
display: inline-block;
color: #888888;
font-size: 14px;
float: left;
padding: 2px 0 0;
}
.reviewList__edit {
display: inline-block;
margin: 0 10px 0 0;
}
.reviewList__delete {
display: inline-block;
margin: 0 10px 0 0;
}
.reviewList__violation {
display: inline-block;
}
.reviewList__violationText {
position: relative;
font-size: 12px;
line-height: 1;
display: inline-block;
color: #888888;
margin: 0 0 0 20px;
}
.reviewList__violationText::before {
content: "";
display: block;
text-indent: 0;
}
.reviewList__violationText::before {
position: absolute;
top: 30%;
left: -20px;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
margin: auto 0;
font-size: 16px;
width: 16px;
height: 16px;
color: #888888;
}
.reviewList__editText {
position: relative;
font-size: 12px;
line-height: 1;
display: inline-block;
color: #888888;
margin: 0 0 0 20px;
}
.reviewList__editText::before {
content: "";
display: block;
text-indent: 0;
}
.reviewList__editText::before {
position: absolute;
top: 30%;
left: -20px;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
margin: auto 0;
font-size: 16px;
width: 16px;
height: 16px;
color: #888888;
}
.reviewList__deleteText {
position: relative;
font-size: 12px;
line-height: 1;
display: inline-block;
color: #888888;
margin: 0 0 0 20px;
}
.reviewList__deleteText::before {
content: "";
display: block;
text-indent: 0;
}
.reviewList__deleteText::before {
position: absolute;
top: 30%;
left: -20px;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
margin: auto 0;
font-size: 16px;
width: 16px;
height: 16px;
color: #888888;
}
.reviewList__reviewButton {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
padding: 15px 24px 17px;
border-radius: 26px;
}
.reviewList__reviewButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.reviewList__reviewButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.reviewList__reviewButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.reviewList__reviewButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.reviewList__reviewButton.is-buttonCancel span {
color: #999999 !important;
}
.reviewList__reviewButton.is-buttonCancel span::before {
color: #999999 !important;
}
.reviewList__bottomButtonBox {
text-align: center;
margin: 40px 0 0;
}
.reviewList__bottomButton {
display: inline-block;
border: 1px solid #cccccc;
border-radius: 5px;
line-height: 48px;
height: 48px;
text-align: center;
position: relative;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #bda452;
font-size: 16px;
font-weight: bold;
padding: 0 40px;
margin: auto;
}
.reviewList__starList {
display: inline-block;
float: left;
margin: 0 5px 0 0;
font-size: 20px;
line-height: 1;
}
.reviewList__starList:after {
content: "";
clear: both;
display: block;
}
.reviewList__starItem {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
}
.reviewList__starItem::before {
content: "";
display: block;
text-indent: 0;
}
.reviewList__starItem::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.reviewList__starItem--on {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
color: #ffb349;
}
.reviewList__starItem--on::before {
content: "";
display: block;
text-indent: 0;
}
.reviewList__starItem--on::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.reviewList__starItem--half {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
}
.reviewList__starItem--half::before {
content: "";
display: block;
text-indent: 0;
}
.reviewList__starItem--half::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.reviewList__starItem--half::after {
content: "";
display: block;
text-indent: 0;
}
.reviewList__starItem--half::after {
color: #ffb349;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
right: 50%;
overflow: hidden;
}
.reviewList__starPoint {
display: inline-block;
font-size: 10px;
float: left;
line-height: 1;
position: relative;
top: 3px;
}
.reviewList__starNumber {
color: #1b2433;
font-size: 12px;
position: absolute;
left: 200px;
top: -7px;
}
.reviewList__like {
width: 30px;
height: 30px;
border: 1px solid #cdcdcd;
border-radius: 50%;
position: relative;
display: inline-block;
color: #c2a359;
line-height: 1;
cursor: pointer;
background-color: #fff;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
}
.reviewList__like::before {
content: "";
display: block;
text-indent: 0;
}
.reviewList__like::before {
position: absolute;
top: 48%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: auto 0;
height: 1.1em;
font-size: 20px;
}
.reviewList__like.is-mine {
pointer-events: none;
color: #bbbbbb;
background-color: #f5f5f5;
box-shadow: 0 -2px 0 0 transparent inset;
}
.reviewList__like.is-checked {
width: 30px;
height: 30px;
border: 1px solid #cdcdcd;
border-radius: 50%;
position: relative;
display: inline-block;
color: #c2a359;
line-height: 1;
cursor: pointer;
background-color: #fff;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #bbbbbb;
background-color: #f5f5f5;
box-shadow: 0 -2px 0 0 transparent inset;
}
.reviewList__like.is-checked::before {
content: "";
display: block;
text-indent: 0;
}
.reviewList__like.is-checked::before {
position: absolute;
top: 48%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: auto 0;
height: 1.1em;
font-size: 20px;
}
.reviewList__like.is-checked.is-mine {
pointer-events: none;
color: #bbbbbb;
background-color: #f5f5f5;
box-shadow: 0 -2px 0 0 transparent inset;
}
.reviewList__likeBalloon {
position: relative;
background: #f5f5f5;
border: 1px solid #cccccc;
border-radius: 5px;
font-size: 16px;
padding: 0px 8px;
display: inline-block;
color: #1b2433;
top: -10px;
margin: 0 0 0 5px;
}
.reviewList__likeBalloon::after {
right: 100%;
top: 50%;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-right-color: #f5f5f5;
border-width: 5px;
margin-top: -5px;
}
.reviewList__likeBalloon::before {
right: 100%;
top: 50%;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(204, 204, 204, 0);
border-right-color: #cccccc;
border-width: 7px;
margin-top: -7px;
}
.reviewList__itemBox {
width: 100%;
position: relative;
}
.reviewList__itemContentBox {
padding: 40px 0 10px 20px;
position: relative;
}
.reviewList__itemContentBox:after {
content: "";
clear: both;
display: block;
}
.reviewList__infoBox {
display: inline-block;
width: -webkit-calc(74% - 15px);
width: -webkit-calc(50% - 15px);
width: calc(50% - 15px);
margin: 5px 0 0 15px;
}
.reviewList__titleBox {
margin: 0 10px 0;
}
.reviewList__imageBox {
float: left;
width: 110px;
}
.reviewList__bookImage {
width: 100%;
}
.reviewList__itemNoImageWrapper {
width: 100px;
position: relative;
}
.reviewList__itemNoImage {
display: inline-block;
position: relative;
background: #f5f5f5 url(../materials/noimage.png) 0 0 no-repeat;
background-size: 100% 100%;
background-position: center bottom;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
width: 145px;
height: 0;
padding: 139% 0 0;
word-wrap: break-word;
white-space: normal;
line-height: 1.4;
width: 100%;
}
.reviewList__itemNoImage.is-adult {
font-size: 14px;
}
.reviewList__itemNoImage.is-adult::before {
content: "";
display: block;
text-indent: 0;
}
.reviewList__itemNoImage.is-adult div {
top: -webkit-calc(50% - 0);
top: calc(50% - 0);
padding: 10px 0 40px;
}
.reviewList__itemNoImage.is-adult::before {
position: absolute;
display: inline-block;
left: 0;
right: 0;
top: 55px;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #c0c0c0;
font-size: 28px;
z-index: 1;
text-align: center;
}
.reviewList__itemNoImageInner {
position: absolute;
left: 5px;
right: 5px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #888;
background: #f5f5f5;
padding: 10px 0;
}
.reviewList__noImageTitle {
font-size: 12px;
font-weight: bold;
padding: 0 0 5px;
max-height: 2.8em;
overflow: hidden;
}
.reviewList__noImageAuthor {
font-size: 12px;
max-height: 2.8em;
overflow: hidden;
}
.reviewList__bookTitle {
font-size: 18px;
word-wrap: break-word;
}
.reviewList__bookText {
font-size: 14px;
color: #1b2433;
margin: 5px 0 0;
}
.reviewList__imageWrapper {
overflow: hidden;
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
line-height: 0;
}
.reviewList__tabBox {
height: 58px;
box-sizing: border-box;
width: -webkit-calc(100% - 160px);
width: calc(100% - 160px);
border-top: 1px solid #dedede;
border-bottom: 1px solid #dedede;
margin: 2px 80px 0;
}
.reviewList__tabBox:after {
content: "";
clear: both;
display: block;
}
.reviewList__tabList {
float: right;
margin: 17px 0 0 0;
}
.reviewList__tabItem {
font-size: 14px;
color: #888;
float: left;
border-left: 1px solid #dedede;
line-height: 1;
padding: 5px 12px;
}
.reviewList__tabItem:first-child {
border-left: 0px solid #dedede;
}
.reviewList__tabItem:last-child {
padding: 5px 0 5px 12px;
}
.reviewList__tabItemLink, .reviewList__tabItemLink--current {
display: block;
color: #888;
}
.reviewList__tabItemLink--current {
color: #ab8e48;
pointer-events: none;
position: relative;
}
.reviewList__tabItemLink--current::after {
content: '';
position: absolute;
height: 2px;
width: 100%;
left: 0;
bottom: -8px;
background-color: #ab8e48;
}
.reviewList__itemList {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
position: relative;
box-sizing: border-box;
margin: 0 0 0 -40px;
}
.reviewList__itemList:after {
content: "";
clear: both;
display: block;
}
.reviewList__reviewListItem {
border-bottom: 1px solid #eeeeee;
margin: 0 0 0 40px;
padding: 30px 0;
position: relative;
float: left;
box-sizing: border-box;
width: -webkit-calc((100% - 80px) / 2);
width: calc((100% - 80px) / 2);
vertical-align: top;
}
.reviewList__listItemInner {
height: 100%;
}
.reviewList__smallStarBox {
position: absolute;
width: 300px;
top: 90px;
right: 24px;
}
.reviewList__reviewButtonBox {
display: inline-block;
margin: 10px 0 0;
}
.reviewList__pagerBox {
margin: 40px 0 0 0;
}
.reviewList__reviewTextMore {
display: none;
}
.reviewList__readMore {
color: #ab8e48;
position: relative;
cursor: pointer;
padding: 0 15px 0 0;
white-space: nowrap;
}
.reviewList__readMore::after {
content: '';
width: 0;
height: 0;
position: absolute;
right: 0;
top: 5px;
border: 5px solid transparent;
border-top: 8px solid rgba(171, 142, 72, 0.5);
}
.cmsList {
position: relative;
padding: 60px 0 0;
}
.cmsList_inner {
width: 100%;
position: relative;
overflow: hidden;
padding-bottom: 80px;
}
.cmsList__titleBox {
margin: 0 80px 40px 80px;
padding-top: 20px;
}
.cmsList__titleBox:after {
content: "";
clear: both;
display: block;
}
.cmsList__title {
font-size: 24px;
}
.cmsList__lead {
font-size: 14px;
color: #888888;
margin: 10px 0 0;
}
.cmsList__mainBox {
margin: 0 80px 0 80px;
}
.cmsList__itemList {
margin: 0 0 0 -40px;
}
.cmsList__itemListWide {
margin: 0 0 0 -32px;
}
.cmsList__item {
display: inline-block;
vertical-align: bottom;
width: -webkit-calc((100% - 32px)/7);
width: calc((100% - 32px)/7);
padding: 0 0 32px 32px;
}
.cmsList__itemBox {
float: left;
text-align: left;
font-size: 14px;
width: 100%;
padding: 0 0 0 140px;
line-height: 1.6em;
}
.cmsList__labelItem {
display: inline-block;
font-size: 12px;
line-height: 1;
color: #ab8e48;
border: 1px solid #c3a358;
padding: 4px 6px;
color: #bda450;
margin: 0 0 10px;
}
.cmsList__imageBox {
float: left;
padding: 0;
margin: 0 0 0 -100%;
width: 120px;
}
.cmsList__imageWrapper {
position: relative;
margin: 0;
max-width: 145px;
height: 210px;
font-size: 0;
white-space: nowrap;
text-align: center;
max-width: 120px;
height: 174px;
}
.cmsList__imageWrapper.js-imgLoading > * {
opacity: 0;
}
.cmsList__imageWrapper.js-imgLoading .loadingIcon {
opacity: 1;
font-size: 10px;
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 1.2em;
height: 1.2em;
margin: auto;
text-indent: -9999em;
color: #d1d5d8;
background: #d1d5d8;
border-radius: 50%;
line-height: 1;
}
.cmsList__imageWrapper.js-imgLoading .loadingIcon::before, .cmsList__imageWrapper.js-imgLoading .loadingIcon::after {
position: absolute;
top: 0;
width: 1.2em;
height: 1.2em;
content: '';
background: #d1d5d8;
border-radius: 50%;
}
.cmsList__imageWrapper.js-imgLoading .loadingIcon::before {
left: -2em;
}
.cmsList__imageWrapper.js-imgLoading .loadingIcon::after {
left: 2em;
}
.cmsList__imageWrapper::before {
content: '';
width: 1px;
height: 210px;
display: inline-block;
margin-left: -1px;
}
.cmsList__imageWrapper::before {
height: 174px;
}
.cmsList__itemNoImage {
display: inline-block;
position: relative;
background: #f5f5f5 url(../materials/noimage.png) 0 0 no-repeat;
background-size: 100% 100%;
background-position: center bottom;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
width: 145px;
height: 0;
padding: 139% 0 0;
word-wrap: break-word;
white-space: normal;
line-height: 1.4;
width: 120px;
}
.cmsList__itemNoImage.is-adult {
font-size: 14px;
}
.cmsList__itemNoImage.is-adult::before {
content: "";
display: block;
text-indent: 0;
}
.cmsList__itemNoImage.is-adult div {
top: -webkit-calc(50% - 0);
top: calc(50% - 0);
padding: 10px 0 40px;
}
.cmsList__itemNoImage.is-adult::before {
position: absolute;
display: inline-block;
left: 0;
right: 0;
top: 55px;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #c0c0c0;
font-size: 28px;
z-index: 1;
text-align: center;
}
.cmsList__itemNoImageInner {
position: absolute;
left: 5px;
right: 5px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #888;
background: #f5f5f5;
padding: 10px 0;
}
.cmsList__noImageTitle {
font-size: 12px;
font-weight: bold;
padding: 0 0 5px;
max-height: 2.8em;
overflow: hidden;
}
.cmsList__noImageAuthor {
font-size: 12px;
max-height: 2.8em;
overflow: hidden;
}
.cmsList__itemImage {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
display: inline-block;
min-width: 75%;
max-width: 100%;
max-height: 100%;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
margin: auto;
}
.cmsList__itemListImage {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
display: inline-block;
min-width: 75%;
max-width: 100%;
max-height: 100%;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
}
.cmsList__listBox {
display: inline-block;
margin: 0 0 50px 40px;
width: -webkit-calc((100% - 140px)/3);
width: calc((100% - 140px)/3);
vertical-align: top;
}
.cmsList__itemLink {
display: inline;
position: relative;
}
.cmsList__itemListLink {
display: inline;
position: relative;
}
.cmsList__itemTitle {
font-size: 14px;
font-weight: bold;
}
.cmsList__itemText {
color: #888888;
margin: 5px 0 0;
font-size: 0;
}
.cmsList__text {
color: #888;
font-size: 12px;
}
.cmsList__text .cmsList__itemListLink {
color: #888;
}
.cmsList__listLine {
border-top: 0;
border-bottom: 0;
}
.cmsList__priceBox {
margin: 10px 0 0;
margin: 5px 0 0;
}
.cmsList__price {
font-size: 18px;
color: #c01200;
position: relative;
}
.cmsList__price .cmsList__tax {
font-size: 12px;
}
.cmsList__tax {
color: #888;
font-size: 14px;
font-weight: normal;
}
.is-negative .cmsList__tax {
color: rgba(20, 35, 52, 0.4);
font-size: 8px;
margin: 5px 0 0;
}
.is-negative .cmsList__tax {
color: rgba(20, 35, 52, 0.4);
font-size: 8px;
margin: 5px 0 0;
}
.cmsList__button, .cmsList__button--iconCart {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
height: 36px;
line-height: 36px;
border-radius: 18px;
font-size: 13px;
font-weight: bold;
background-color: #ff9000;
box-shadow: 0 -2px 0 0 #e58100 inset;
color: #fff;
margin: 10px 0 0;
}
.cmsList__button--iconCart::before {
content: "";
display: block;
text-indent: 0;
}
.cmsList__button--iconCart::before {
position: relative;
display: inline-block;
top: 8px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 30px;
line-height: 0;
}
.cmsList__button--iconCartBlue {
display: inline-block;
text-align: center;
position: relative;
height: 34px;
line-height: 34px;
border-radius: 18px;
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 0 15px 0;
width: 80px;
box-shadow: 0 -2px 0 0 #00abbb inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
margin: 10px 0 0;
}
.cmsList__button--iconCartBlue::before {
content: "";
display: block;
text-indent: 0;
}
.cmsList__button--iconCartBlue::before {
position: relative;
display: inline-block;
top: 0px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 28px;
line-height: 1;
}
.cmsList__button--iconCartBlue.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.cmsList__button--iconCartBlue.is-buttonDisabled span {
color: #bbbbbb !important;
}
.cmsList__button--iconCartBlue.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.cmsList__button--iconCartBlue.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.cmsList__button--iconCartBlue.is-buttonCancel span {
color: #999999 !important;
}
.cmsList__button--iconCartBlue.is-buttonCancel span::before {
color: #999999 !important;
}
.cmsList__button--iconCartBlue::before {
content: "";
display: block;
text-indent: 0;
}
.cmsList__button--write {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
margin: 10px 0 0;
}
.cmsList__button--write.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.cmsList__button--write.is-buttonDisabled span {
color: #bbbbbb !important;
}
.cmsList__button--write.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.cmsList__button--write.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.cmsList__button--write.is-buttonCancel span {
color: #999999 !important;
}
.cmsList__button--write.is-buttonCancel span::before {
color: #999999 !important;
}
.cmsList__button--bookShelfAdd {
display: inline-block;
text-align: center;
position: relative;
height: 34px;
line-height: 34px;
border-radius: 18px;
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 0 15px 0;
width: 80px;
box-shadow: 0 -2px 0 0 #00abbb inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
margin: 10px 0 0;
}
.cmsList__button--bookShelfAdd::before {
content: "";
display: block;
text-indent: 0;
}
.cmsList__button--bookShelfAdd::before {
position: relative;
display: inline-block;
top: 0px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 28px;
line-height: 1;
}
.cmsList__button--bookShelfAdd.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.cmsList__button--bookShelfAdd.is-buttonDisabled span {
color: #bbbbbb !important;
}
.cmsList__button--bookShelfAdd.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.cmsList__button--bookShelfAdd.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.cmsList__button--bookShelfAdd.is-buttonCancel span {
color: #999999 !important;
}
.cmsList__button--bookShelfAdd.is-buttonCancel span::before {
color: #999999 !important;
}
.cmsList__button--bookShelfAdd::before {
content: "";
display: block;
text-indent: 0;
}
.cmsList__button--reservation {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
width: 80px;
font-size: 14px;
font-weight: bold;
padding: 9px 12px 9px;
margin: 10px 5px 0 0;
height: 34px;
vertical-align: bottom;
}
.cmsList__button--reservation.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.cmsList__button--reservation.is-buttonDisabled span {
color: #bbbbbb !important;
}
.cmsList__button--reservation.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.cmsList__button--reservation.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.cmsList__button--reservation.is-buttonCancel span {
color: #999999 !important;
}
.cmsList__button--reservation.is-buttonCancel span::before {
color: #999999 !important;
}
.cmsList__button--read {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
width: 120px;
font-size: 14px;
font-weight: bold;
padding: 9px 12px 9px;
margin: 10px 5px 0 0;
height: 34px;
vertical-align: bottom;
}
.cmsList__button--read.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.cmsList__button--read.is-buttonDisabled span {
color: #bbbbbb !important;
}
.cmsList__button--read.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.cmsList__button--read.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.cmsList__button--read.is-buttonCancel span {
color: #999999 !important;
}
.cmsList__button--read.is-buttonCancel span::before {
color: #999999 !important;
}
.cmsList__itemBadge {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
position: absolute;
left: -4px;
bottom: 10px;
height: 24px;
line-height: 24px;
color: #fff;
padding: 0 8px;
display: block;
background: #c01d20;
font-size: 12px;
font-weight: bold;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
white-space: nowrap;
z-index: 3;
}
.cmsList__itemBadge::before {
content: '';
position: absolute;
right: -6px;
width: 0;
height: 0;
top: 0;
border-style: solid;
border-width: 12px 7px 12px 0;
border-color: #c01d20 transparent #c01d20 #c01d20;
}
.cmsList__itemBadge::after {
content: '';
position: absolute;
right: -5px;
bottom: 0;
width: 5px;
height: 4px;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
}
.cmsList__itemBadge.is-goldBadge {
background: #d4b15c;
}
.cmsList__itemBadge.is-goldBadge::before {
border-color: #d4b15c transparent #d4b15c #d4b15c;
}
.cmsListTitle {
position: relative;
padding: 60px 0 0;
}
.cmsListTitle__titleBox {
margin: 0 80px 40px 80px;
padding-top: 20px;
}
.cmsListTitle__titleBox:after {
content: "";
clear: both;
display: block;
}
.cmsListTitle_inner {
width: 100%;
position: relative;
overflow: hidden;
padding-bottom: 80px;
}
.cmsListTitle__title {
font-size: 24px;
float: left;
}
.cmsListTitle__lead {
font-size: 14px;
color: #888888;
float: right;
}
.cmsListTitle__itemBox {
margin: 0 80px 0 80px;
}
.cmsListTitle__itemList {
margin: 0 0 0 -32px;
font-size: 0;
}
.cmsListTitle__item {
display: inline-block;
vertical-align: top;
width: -webkit-calc((100% - 32px)/7);
width: calc((100% - 32px)/7);
padding: 0 0 32px 32px;
}
.cmsListTitle__itemPanelBox {
padding: 15px 0 0;
}
.cmsListTitle__imageWrapper {
position: relative;
margin: 0;
max-width: 145px;
height: 210px;
font-size: 0;
white-space: nowrap;
text-align: center;
position: relative;
margin: auto;
}
.cmsListTitle__imageWrapper.js-imgLoading > * {
opacity: 0;
}
.cmsListTitle__imageWrapper.js-imgLoading .loadingIcon {
opacity: 1;
font-size: 10px;
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 1.2em;
height: 1.2em;
margin: auto;
text-indent: -9999em;
color: #d1d5d8;
background: #d1d5d8;
border-radius: 50%;
line-height: 1;
}
.cmsListTitle__imageWrapper.js-imgLoading .loadingIcon::before, .cmsListTitle__imageWrapper.js-imgLoading .loadingIcon::after {
position: absolute;
top: 0;
width: 1.2em;
height: 1.2em;
content: '';
background: #d1d5d8;
border-radius: 50%;
}
.cmsListTitle__imageWrapper.js-imgLoading .loadingIcon::before {
left: -2em;
}
.cmsListTitle__imageWrapper.js-imgLoading .loadingIcon::after {
left: 2em;
}
.cmsListTitle__imageWrapper::before {
content: '';
width: 1px;
height: 210px;
display: inline-block;
margin-left: -1px;
}
.cmsListTitle__imageWrapper::before {
content: '';
display: block;
padding-top: 150%;
}
.cmsListTitle__itemBadge {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
position: absolute;
left: -4px;
bottom: 10px;
height: 24px;
line-height: 24px;
color: #fff;
padding: 0 8px;
display: block;
background: #c01d20;
font-size: 12px;
font-weight: bold;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
white-space: nowrap;
z-index: 3;
}
.cmsListTitle__itemBadge::before {
content: '';
position: absolute;
right: -6px;
width: 0;
height: 0;
top: 0;
border-style: solid;
border-width: 12px 7px 12px 0;
border-color: #c01d20 transparent #c01d20 #c01d20;
}
.cmsListTitle__itemBadge::after {
content: '';
position: absolute;
right: -5px;
bottom: 0;
width: 5px;
height: 4px;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
}
.cmsListTitle__itemBadge.is-goldBadge {
background: #d4b15c;
}
.cmsListTitle__itemBadge.is-goldBadge::before {
border-color: #d4b15c transparent #d4b15c #d4b15c;
}
.cmsListTitle__itemNoImage {
display: inline-block;
position: relative;
background: #f5f5f5 url(../materials/noimage.png) 0 0 no-repeat;
background-size: 100% 100%;
background-position: center bottom;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
width: 145px;
height: 0;
padding: 139% 0 0;
word-wrap: break-word;
white-space: normal;
line-height: 1.4;
width: 100%;
height: 0;
padding-top: 139%;
position: absolute;
left: 0;
bottom: 0;
right: 0;
}
.cmsListTitle__itemNoImage.is-adult {
font-size: 14px;
}
.cmsListTitle__itemNoImage.is-adult::before {
content: "";
display: block;
text-indent: 0;
}
.cmsListTitle__itemNoImage.is-adult div {
top: -webkit-calc(50% - 0);
top: calc(50% - 0);
padding: 10px 0 40px;
}
.cmsListTitle__itemNoImage.is-adult::before {
position: absolute;
display: inline-block;
left: 0;
right: 0;
top: 55px;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #c0c0c0;
font-size: 28px;
z-index: 1;
text-align: center;
}
.cmsListTitle__itemNoImage.is-adult {
position: absolute;
}
.cmsListTitle__itemNoImageInner {
position: absolute;
left: 5px;
right: 5px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #888;
background: #f5f5f5;
padding: 10px 0;
}
.cmsListTitle__noImageTitle {
font-size: 12px;
font-weight: bold;
padding: 0 0 5px;
max-height: 2.8em;
overflow: hidden;
}
.cmsListTitle__noImageAuthor {
font-size: 12px;
max-height: 2.8em;
overflow: hidden;
}
.cmsListTitle__itemImage {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
display: inline-block;
min-width: 75%;
max-width: 100%;
max-height: 100%;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
position: absolute;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.cmsListTitle__itemImage.is-horizontal {
width: 100%;
}
.cmsListTitle__itemImage.is-vertical {
height: 100%;
width: auto;
}
.cmsListTitle__itemListImage {
display: block;
width: 100%;
}
.cmsListTitle__listBox {
display: inline-block;
margin: 0 0 50px 40px;
width: -webkit-calc((100% - 140px)/3);
width: calc((100% - 140px)/3);
vertical-align: top;
}
.cmsListTitle__itemLink {
display: inline;
position: relative;
}
.cmsListTitle__itemListLink {
display: inline;
position: relative;
display: inline-block;
}
.cmsListTitle__labelItem {
display: inline-block;
font-size: 12px;
line-height: 1;
color: #ab8e48;
border: 1px solid #c3a358;
padding: 4px 6px;
color: #bda450;
margin: 0 0 10px;
}
.cmsListTitle__itemTitle {
font-size: 14px;
font-weight: bold;
word-wrap: break-word;
}
.cmsListTitle__itemText {
color: #888888;
margin: 5px 0 0;
font-size: 0;
}
.cmsListTitle__text {
color: #888;
font-size: 12px;
}
.cmsListTitle__text .cmsListTitle__itemLink {
color: #888;
}
.cmsListTitle__listLine {
border-top: 0;
border-bottom: 0;
}
.cmsListTitle__priceBox {
margin: 10px 0 0;
margin: 5px 0 0;
}
.cmsListTitle__price {
font-size: 18px;
color: #c01200;
position: relative;
}
.cmsListTitle__price .cmsListTitle__tax {
font-size: 12px;
}
.cmsListTitle__tax {
color: #888;
font-size: 14px;
font-weight: normal;
}
.is-negative .cmsListTitle__tax {
color: rgba(20, 35, 52, 0.4);
font-size: 8px;
margin: 5px 0 0;
}
.is-negative .cmsListTitle__tax {
color: rgba(20, 35, 52, 0.4);
font-size: 8px;
margin: 5px 0 0;
}
.cmsListTitle__button {
display: inline-block;
text-align: center;
position: relative;
height: 34px;
line-height: 34px;
border-radius: 18px;
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 0 15px 0;
width: 80px;
box-shadow: 0 -2px 0 0 #00abbb inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
width: 100%;
margin: 10px 0 0;
}
.cmsListTitle__button::before {
content: "";
display: block;
text-indent: 0;
}
.cmsListTitle__button::before {
position: relative;
display: inline-block;
top: 0px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 28px;
line-height: 1;
}
.cmsListTitle__button.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.cmsListTitle__button.is-buttonDisabled span {
color: #bbbbbb !important;
}
.cmsListTitle__button.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.cmsListTitle__button.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.cmsListTitle__button.is-buttonCancel span {
color: #999999 !important;
}
.cmsListTitle__button.is-buttonCancel span::before {
color: #999999 !important;
}
.cmsListTitle__button--bookShelfAdd {
display: inline-block;
text-align: center;
position: relative;
height: 34px;
line-height: 34px;
border-radius: 18px;
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 0 15px 0;
width: 80px;
box-shadow: 0 -2px 0 0 #00abbb inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
width: 100%;
margin: 10px 0 0;
}
.cmsListTitle__button--bookShelfAdd::before {
content: "";
display: block;
text-indent: 0;
}
.cmsListTitle__button--bookShelfAdd::before {
position: relative;
display: inline-block;
top: 0px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 28px;
line-height: 1;
}
.cmsListTitle__button--bookShelfAdd.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.cmsListTitle__button--bookShelfAdd.is-buttonDisabled span {
color: #bbbbbb !important;
}
.cmsListTitle__button--bookShelfAdd.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.cmsListTitle__button--bookShelfAdd.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.cmsListTitle__button--bookShelfAdd.is-buttonCancel span {
color: #999999 !important;
}
.cmsListTitle__button--bookShelfAdd.is-buttonCancel span::before {
color: #999999 !important;
}
.cmsListTitle__button--bookShelfAdd::before {
content: "";
display: block;
text-indent: 0;
}
/*
#overview
searchResult
検索結果用
*/
.searchResult__inner {
width: 100%;
position: relative;
overflow: hidden;
padding-bottom: 80px;
}
.searchResult__heading, .searchResult__heading--series {
margin: 0 80px 40px 80px;
padding-top: 20px;
}
.searchResult__heading--series {
padding-top: 40px;
}
.searchResult__title {
margin-bottom: 24px;
font-weight: normal;
font-size: 17px;
width: -webkit-calc(100% - 120px);
width: calc(100% - 120px);
word-wrap: break-word;
}
.searchResult__title--strong {
font-weight: bold;
font-size: 25px;
margin-right: 10px;
}
.searchResult__listType {
float: right;
width: 120px;
height: 20px;
}
.searchResult__listBox {
text-align: right;
font-size: 0;
}
.searchResult__list {
position: relative;
display: inline-block;
padding: 2px 14px;
line-height: 1.1em;
font-size: 24px;
vertical-align: 3px;
}
.searchResult__list:first-child::before {
display: none;
}
.searchResult__list::before {
content: '';
position: absolute;
left: 0;
top: 8px;
bottom: 3px;
border-left: 1px dotted #ccc;
}
.searchResult__listButton, .searchResult__listButton--block, .searchResult__listButton--list {
display: block;
color: #dddee0;
}
.searchResult__listButton--block::before {
content: "";
display: block;
text-indent: 0;
}
.searchResult__listButton--block.is-current {
color: #8b9198;
}
.searchResult__listButton--list::before {
content: "";
display: block;
text-indent: 0;
}
.searchResult__listButton--list.is-current {
color: #8b9198;
}
.searchResult__sort {
background: #F4F6F8;
padding: 10px 0px 10px 20px;
overflow: hidden;
font-size: 15px;
position: relative;
}
.searchResult__sort--border {
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
padding: 15px 0px 15px 20px;
overflow: hidden;
font-size: 15px;
}
.searchResult__sortSelect {
position: absolute;
background: url(../materials/select.png) no-repeat 95% 50%;
line-height: 1.2;
padding: 0 40px 0 15px;
min-width: 200px;
height: 48px;
background-color: #fff;
border: 2px solid #eee;
top: 0;
left: 0;
}
.searchResult__sortBox {
float: right;
min-width: 200px;
font-size: 0px;
text-align: right;
}
.searchResult__sortType {
display: inline-block;
padding: 5px 12px;
line-height: 1.0;
border-right: 1px solid #aaa;
font-size: 14px;
}
.searchResult__sortType:last-child {
border-right: none;
}
.searchResult__sortButton {
color: #888;
}
.searchResult__sortButton.is-current {
color: #C3A358;
position: relative;
}
.searchResult__sortButton.is-current::after {
content: '';
position: absolute;
height: 2px;
width: 100%;
left: 0;
bottom: -8px;
background-color: #ab8e48;
}
.searchResult__mainColumn {
margin: 0 80px 0 400px;
}
.searchResult__mainColumn .recommendModule {
margin-left: -10px;
margin-right: -10px;
}
.searchResult__mainColumnInner {
float: right;
width: 100%;
}
.searchResult__subColumn {
position: relative;
float: left;
width: 260px;
margin: 0 0 0 80px;
z-index: 2;
}
.searchResult__noItem {
font-size: 20px;
color: #d5d8de;
text-align: center;
margin: 0 0 40px;
padding: 50px 0 200px;
}
.searchResult__noItem::before {
background-image: url(../materials/sprites.png);
background-position: -133px 0px;
width: 110px;
height: 110px;
background-size: 290px 251.5px;
content: '';
display: block;
margin: 0 auto 35px;
color: #e5e8ee;
}
.searchResult__bookShelfTitle {
margin-bottom: 24px;
font-weight: normal;
font-size: 16px;
}
.searchResult__bookShelfTitle--strong {
font-weight: bold;
font-size: 24px;
margin-right: 10px;
}
.searchResult__mainBox {
margin: 0 80px 0 80px;
}
.searchResult__noBookBox {
padding: 260px 0 160px;
text-align: center;
border-top: 1px solid #eeeeee;
}
.searchResult__noBookText {
position: relative;
top: 0;
left: 0;
color: #d5d8de;
font-size: 20px;
}
.searchResult__noBookText::before {
content: "";
display: block;
text-indent: 0;
}
.searchResult__noBookText::before {
position: relative;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
font-size: 140px;
color: #e5e8ee;
top: -70px;
left: 0;
}
.searchResult__setting {
color: #ab8e48;
font-size: 14px;
position: relative;
display: inline-block;
float: right;
top: 5px;
padding: 0 0 0 35px;
}
.searchResult__setting::before {
content: "";
display: block;
text-indent: 0;
}
.searchResult__setting::before {
color: #ceb354;
position: absolute;
display: inline-block;
top: -3px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 1.1em;
font-size: 30px;
line-height: 1;
}
.searchCategoryNav, .searchCategoryNav--col2 {
margin: 0 0 60px;
position: relative;
}
.searchCategoryNav__list {
display: block;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
font-size: 0;
padding-left: 80px;
}
.searchCategoryNav__item {
display: inline-block;
position: relative;
}
.searchCategoryNav__item:first-child .searchCategoryNav__categoryLink::before {
background-color: transparent;
}
.searchCategoryNav__link {
display: block;
text-align: center;
padding: 20px 30px;
font-weight: bold;
font-size: 16px;
color: #888;
}
.searchCategoryNav__link.is-current {
color: #c3a358;
}
.searchCategoryNav__link.is-current::before {
content: '';
position: absolute;
left: 0;
bottom: -1px;
right: 0;
height: 4px;
background: #c3a358;
}
.searchCategoryNav--col2 {
color: rgba(27, 36, 51, 0.5);
margin: 0 0 40px;
}
.searchCategoryNav--col2 .searchCategoryNav__link {
color: rgba(27, 36, 51, 0.5);
}
.searchCategoryNav--col2 .searchCategoryNav__link.is-current {
color: #c3a358;
}
.searchCategoryNav__inputBox {
position: absolute;
right: 70px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 390px;
}
.searchCategoryNav__inputBox:after {
content: "";
clear: both;
display: block;
}
.searchCategoryNav__searchForm {
border: 1px solid #cccccc;
border-radius: 6px;
height: 36px;
width: 260px;
float: right;
}
.searchCategoryNav__narrowDown {
position: relative;
float: left;
cursor: pointer;
padding: 0 0 0 35px;
font-size: 14px;
top: 6px;
}
.searchCategoryNav__narrowDown.is-current::before {
border-width: 0 5px 6px 5px !important;
border-color: transparent transparent #8b9198 transparent !important;
}
.searchCategoryNav__narrowDown::before {
position: absolute;
top: 0;
bottom: 0;
left: 12px;
margin: auto 0;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 6px 5px 0 5px;
border-color: #8b9198 transparent transparent transparent;
}
.searchCategoryNav__searchButton {
white-space: nowrap;
overflow: hidden;
text-indent: 120%;
position: absolute;
right: 0;
top: 0;
bottom: 0;
background: #8b9198;
width: 40px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
height: 36px;
}
.searchCategoryNav__searchButton::before {
content: "";
display: block;
text-indent: 0;
}
.searchCategoryNav__searchButton::before {
position: absolute;
left: 0;
top: 0;
right: 4px;
bottom: 4px;
margin: auto;
font-size: 26px;
height: 1em;
line-height: 1em;
color: #fff;
}
.searchCategoryNav__searchInput {
line-height: 1;
padding: 8px 13px;
font-size: 14px;
width: 230px;
box-sizing: border-box;
}
.searchCategoryNav__mainBox {
position: relative;
z-index: 1;
}
.searchCategoryNav__subArea {
background-color: #f4f6f8;
display: none;
}
.searchCategoryNav__subArea.is-show {
display: block;
}
.searchCategoryNav__subList {
display: block;
border-bottom: 1px solid #d4d4d4;
font-size: 0;
padding-left: 80px;
}
.searchCategoryNav__subList .searchCategoryNav__link.is-current::before {
bottom: 0px;
height: 2px;
}
.searchCategoryNav__subListCategory {
display: block;
font-size: 0;
padding-left: 80px;
}
.searchCategoryNav__categoryLink {
display: block;
text-align: center;
padding: 40px 30px;
font-weight: bold;
font-size: 14px;
color: #123141;
position: relative;
line-height: 1;
}
.searchCategoryNav__categoryLink::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 15px;
width: 1px;
background-color: #dedede;
}
/*
#styleguide
search result list
@detail
```
```
*/
.searchResultList, .searchResultList--wide {
position: relative;
margin: 0 0px 30px;
}
.searchResultList__title {
font-size: 20px;
margin: 0 10px 20px;
}
.searchResultList__list, .searchResultList__listWide {
position: relative;
font-size: 0;
margin: 0 -5px 0 -32px;
}
.searchResultList__item {
display: inline-block;
vertical-align: bottom;
text-align: center;
width: 25%;
margin: 0;
padding: 0 0 32px 32px;
}
@media screen and (min-width: 500px) and (max-width: 1151px) {
.searchResultList__item {
width: 25%;
}
}
@media screen and (min-width: 1052px) and (max-width: 1279px) {
.searchResultList__item {
width: 20%;
}
}
@media screen and (min-width: 1280px) and (max-width: 1439px) {
.searchResultList__item {
width: 16.66%;
}
}
@media screen and (min-width: 1440px) and (max-width: 1599px) {
.searchResultList__item {
width: 14.28%;
}
}
@media screen and (min-width: 1600px) and (max-width: 1759px) {
.searchResultList__item {
width: 12.5%;
}
}
@media screen and (min-width: 1760px) and (max-width: 1919px) {
.searchResultList__item {
width: 11.11%;
}
}
@media screen and (min-width: 1920px) {
.searchResultList__item {
width: 10%;
}
}
.searchResultList__itemLink {
display: block;
height: 210px;
}
.searchResultList__itemImageWrapper {
position: relative;
margin: 0;
max-width: 145px;
height: 210px;
font-size: 0;
white-space: nowrap;
text-align: center;
}
.searchResultList__itemImageWrapper.js-imgLoading > * {
opacity: 0;
}
.searchResultList__itemImageWrapper.js-imgLoading .loadingIcon {
opacity: 1;
font-size: 10px;
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 1.2em;
height: 1.2em;
margin: auto;
text-indent: -9999em;
color: #d1d5d8;
background: #d1d5d8;
border-radius: 50%;
line-height: 1;
}
.searchResultList__itemImageWrapper.js-imgLoading .loadingIcon::before, .searchResultList__itemImageWrapper.js-imgLoading .loadingIcon::after {
position: absolute;
top: 0;
width: 1.2em;
height: 1.2em;
content: '';
background: #d1d5d8;
border-radius: 50%;
}
.searchResultList__itemImageWrapper.js-imgLoading .loadingIcon::before {
left: -2em;
}
.searchResultList__itemImageWrapper.js-imgLoading .loadingIcon::after {
left: 2em;
}
.searchResultList__itemImageWrapper::before {
content: '';
width: 1px;
height: 210px;
display: inline-block;
margin-left: -1px;
}
.searchResultList__itemImage {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
display: inline-block;
min-width: 75%;
max-width: 100%;
max-height: 100%;
}
.searchResultList__itemImage.is-horizontal {
width: 100%;
}
.searchResultList__itemImage.is-vertical {
height: 100%;
width: auto;
}
.searchResultList .detailItem__priceBox, .searchResultList--wide .detailItem__priceBox {
width: auto;
}
.searchResultList__listWide .searchResultList__item {
display: inline-block;
vertical-align: bottom;
width: -webkit-calc(100% / 6);
width: calc(100% / 6);
padding: 0 0 32px 32px;
}
@media screen and (min-width: 1331px) and (max-width: 1504px) {
.searchResultList__listWide .searchResultList__item {
width: 16.66667%;
}
}
@media screen and (min-width: 1503px) and (max-width: 1676px) {
.searchResultList__listWide .searchResultList__item {
width: 14.28571%;
}
}
@media screen and (min-width: 1675px) and (max-width: 1848px) {
.searchResultList__listWide .searchResultList__item {
width: 12.5%;
}
}
@media screen and (min-width: 1847px) and (max-width: 2020px) {
.searchResultList__listWide .searchResultList__item {
width: 11.11111%;
}
}
@media screen and (min-width: 2019px) and (max-width: 2192px) {
.searchResultList__listWide .searchResultList__item {
width: 10%;
}
}
@media screen and (min-width: 2191px) and (max-width: 2364px) {
.searchResultList__listWide .searchResultList__item {
width: 9.09091%;
}
}
@media screen and (min-width: 2363px) and (max-width: 2536px) {
.searchResultList__listWide .searchResultList__item {
width: 8.33333%;
}
}
.searchResultList--wide .detailItem__list {
font-size: 0;
margin: 0 0 0 -60px;
}
.searchResultList--wide .detailItem__infoBoxCenter {
width: 50%;
}
.searchResultList--wide .detailItem__infoBoxCenter::before {
padding-bottom: 132%;
height: 0;
}
.searchResultList--wide .detailItem__listItem {
width: 33.3%;
margin: 0 0 50px 0;
padding: 0 0 0 40px;
box-sizing: border-box;
}
@media screen and (min-width: 1799px) and (max-width: 2200px) {
.searchResultList--wide .detailItem__listItem {
width: 25%;
}
}
@media screen and (min-width: 2199px) and (max-width: 2600px) {
.searchResultList--wide .detailItem__listItem {
width: 20%;
}
}
@media screen and (min-width: 2599px) and (max-width: 3000px) {
.searchResultList--wide .detailItem__listItem {
width: 16.66667%;
}
}
@media screen and (min-width: 2999px) and (max-width: 3400px) {
.searchResultList--wide .detailItem__listItem {
width: 14.28571%;
}
}
@media screen and (min-width: 3399px) and (max-width: 3800px) {
.searchResultList--wide .detailItem__listItem {
width: 12.5%;
}
}
/*
#styleguide
search result list
@detail
```
```
*/
.searchResultDetailList__list {
margin: 0 0 0 -40px;
font-size: 0;
}
.searchResultDetailList__list:after {
content: "";
clear: both;
display: block;
}
.searchResultDetailList__listItem {
line-height: 1;
display: inline-block;
margin: 0 0 50px 0;
padding: 0 0 0 40px;
width: 49.9%;
vertical-align: top;
width: 50%;
}
.searchResultDetailList__listItem:after {
content: "";
clear: both;
display: block;
}
.searchResultDetailList__listItemInner {
font-size: 14px;
}
.searchResultDetailList__listItemInner:after {
content: "";
clear: both;
display: block;
}
.searchResultDetailList__imageBox {
float: left;
padding: 0;
margin: 0 0 0 -100%;
width: 120px;
}
.searchResultDetailList__imageWrapper {
position: relative;
margin: 0;
max-width: 145px;
height: 210px;
font-size: 0;
white-space: nowrap;
text-align: center;
max-width: 120px;
height: 174px;
}
.searchResultDetailList__imageWrapper.js-imgLoading > * {
opacity: 0;
}
.searchResultDetailList__imageWrapper.js-imgLoading .loadingIcon {
opacity: 1;
font-size: 10px;
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 1.2em;
height: 1.2em;
margin: auto;
text-indent: -9999em;
color: #d1d5d8;
background: #d1d5d8;
border-radius: 50%;
line-height: 1;
}
.searchResultDetailList__imageWrapper.js-imgLoading .loadingIcon::before, .searchResultDetailList__imageWrapper.js-imgLoading .loadingIcon::after {
position: absolute;
top: 0;
width: 1.2em;
height: 1.2em;
content: '';
background: #d1d5d8;
border-radius: 50%;
}
.searchResultDetailList__imageWrapper.js-imgLoading .loadingIcon::before {
left: -2em;
}
.searchResultDetailList__imageWrapper.js-imgLoading .loadingIcon::after {
left: 2em;
}
.searchResultDetailList__imageWrapper::before {
content: '';
width: 1px;
height: 210px;
display: inline-block;
margin-left: -1px;
}
.searchResultDetailList__imageWrapper::before {
height: 174px;
}
.searchResultDetailList__image {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
display: inline-block;
min-width: 75%;
max-width: 100%;
max-height: 100%;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
}
.searchResultDetailList__itemNoImage {
display: inline-block;
position: relative;
background: #f5f5f5 url(../materials/noimage.png) 0 0 no-repeat;
background-size: 100% 100%;
background-position: center bottom;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
width: 145px;
height: 0;
padding: 139% 0 0;
word-wrap: break-word;
white-space: normal;
line-height: 1.4;
width: 120px;
}
.searchResultDetailList__itemNoImage.is-adult {
font-size: 14px;
}
.searchResultDetailList__itemNoImage.is-adult::before {
content: "";
display: block;
text-indent: 0;
}
.searchResultDetailList__itemNoImage.is-adult div {
top: -webkit-calc(50% - 0);
top: calc(50% - 0);
padding: 10px 0 40px;
}
.searchResultDetailList__itemNoImage.is-adult::before {
position: absolute;
display: inline-block;
left: 0;
right: 0;
top: 55px;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #c0c0c0;
font-size: 28px;
z-index: 1;
text-align: center;
}
.searchResultDetailList__itemNoImageInner {
position: absolute;
left: 5px;
right: 5px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #888;
background: #f5f5f5;
padding: 10px 0;
}
.searchResultDetailList__noImageTitle {
font-size: 12px;
font-weight: bold;
padding: 0 0 5px;
max-height: 2.8em;
overflow: hidden;
}
.searchResultDetailList__noImageAuthor {
font-size: 12px;
max-height: 2.8em;
overflow: hidden;
}
.searchResultDetailList__infoBox {
float: left;
text-align: left;
font-size: 14px;
width: 100%;
padding: 0 0 0 140px;
line-height: 1.6em;
}
.searchResultDetailList__title {
font-size: 16px;
color: #1d2334;
font-weight: bold;
word-wrap: break-word;
line-height: 1.6em;
}
.searchResultDetailList__text {
color: #888;
font-size: 12px;
}
.searchResultDetailList__text a {
color: #888;
}
.searchResultDetailList__text .searchResultDetailList__link {
display: inline-block;
}
.searchResultDetailList__link {
display: inline-block;
}
.searchResultDetailList__link:after {
content: "";
clear: both;
display: block;
}
.searchResultDetailList__starBox {
margin: 0 0 0;
}
.searchResultDetailList__starBox:after {
content: "";
clear: both;
display: block;
}
.searchResultDetailList__star {
margin: 6px 0 0;
}
.searchResultDetailList__star:after {
content: "";
clear: both;
display: block;
}
.searchResultDetailList__starList {
display: inline-block;
float: left;
margin: 0 5px 0 0;
font-size: 20px;
line-height: 1;
}
.searchResultDetailList__starList:after {
content: "";
clear: both;
display: block;
}
.searchResultDetailList__starItem {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
}
.searchResultDetailList__starItem::before {
content: "";
display: block;
text-indent: 0;
}
.searchResultDetailList__starItem::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.searchResultDetailList__starItem--on {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
color: #ffb349;
}
.searchResultDetailList__starItem--on::before {
content: "";
display: block;
text-indent: 0;
}
.searchResultDetailList__starItem--on::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.searchResultDetailList__starItem--half {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
}
.searchResultDetailList__starItem--half::before {
content: "";
display: block;
text-indent: 0;
}
.searchResultDetailList__starItem--half::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.searchResultDetailList__starItem--half::after {
content: "";
display: block;
text-indent: 0;
}
.searchResultDetailList__starItem--half::after {
color: #ffb349;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
right: 50%;
overflow: hidden;
}
.searchResultDetailList__starNumber {
display: inline-block;
font-size: 12px;
float: left;
line-height: 1;
position: relative;
top: 7px;
color: #888888;
}
.searchResultDetailList__priceBox {
margin: 10px 0 0;
}
.searchResultDetailList__priceStrike {
color: #888;
font-size: 14px;
}
.searchResultDetailList__price {
font-size: 18px;
color: #c01200;
position: relative;
}
.searchResultDetailList__price--original {
font-size: 18px;
color: #c01200;
position: relative;
color: rgba(20, 35, 52, 0.4);
font-size: 14px;
font-weight: normal;
display: inline-block;
}
.searchResultDetailList__tax {
color: #888;
font-size: 14px;
font-weight: normal;
}
.is-negative .searchResultDetailList__tax {
color: rgba(20, 35, 52, 0.4);
font-size: 8px;
margin: 5px 0 0;
}
.searchResultDetailList__ranking {
display: block;
font-size: 16px;
color: #1d2334;
padding: 0;
margin: -4px 0 0;
line-height: 26px;
height: 30px;
}
.searchResultDetailList__ranking--superior {
display: block;
font-size: 20px;
font-weight: bold;
color: #c3a358;
padding: 0;
margin: -4px 0 0;
line-height: 26px;
height: 30px;
}
.searchResultDetailList__ranking--superior::before {
content: "";
display: block;
text-indent: 0;
}
.searchResultDetailList__ranking--superior::before {
font-size: 32px;
display: inline-block;
vertical-align: -5px;
margin: -2px 1px 0 -2px;
}
.searchResultDetailList__itemBadge {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
position: absolute;
left: -4px;
bottom: 10px;
height: 24px;
line-height: 24px;
color: #fff;
padding: 0 8px;
display: block;
background: #c01d20;
font-size: 12px;
font-weight: bold;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
white-space: nowrap;
z-index: 3;
}
.searchResultDetailList__itemBadge::before {
content: '';
position: absolute;
right: -6px;
width: 0;
height: 0;
top: 0;
border-style: solid;
border-width: 12px 7px 12px 0;
border-color: #c01d20 transparent #c01d20 #c01d20;
}
.searchResultDetailList__itemBadge::after {
content: '';
position: absolute;
right: -5px;
bottom: 0;
width: 5px;
height: 4px;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
}
.searchResultDetailList__itemBadge.is-goldBadge {
background: #d4b15c;
}
.searchResultDetailList__itemBadge.is-goldBadge::before {
border-color: #d4b15c transparent #d4b15c #d4b15c;
}
.searchResultDetailList__button--iconCart {
display: inline-block;
text-align: center;
position: relative;
height: 34px;
line-height: 34px;
border-radius: 18px;
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 0 15px 0;
width: 80px;
box-shadow: 0 -2px 0 0 #00abbb inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
margin: 5px 0 0;
}
.searchResultDetailList__button--iconCart::before {
content: "";
display: block;
text-indent: 0;
}
.searchResultDetailList__button--iconCart::before {
position: relative;
display: inline-block;
top: 0px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 28px;
line-height: 1;
}
.searchResultDetailList__button--iconCart.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.searchResultDetailList__button--iconCart.is-buttonDisabled span {
color: #bbbbbb !important;
}
.searchResultDetailList__button--iconCart.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.searchResultDetailList__button--iconCart.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.searchResultDetailList__button--iconCart.is-buttonCancel span {
color: #999999 !important;
}
.searchResultDetailList__button--iconCart.is-buttonCancel span::before {
color: #999999 !important;
}
.searchResultDetailList__button--iconCart::before {
content: "";
display: block;
text-indent: 0;
}
.searchResultDetailList__button--bookShelfAdd {
display: inline-block;
text-align: center;
position: relative;
height: 34px;
line-height: 34px;
border-radius: 18px;
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 0 15px 0;
width: 80px;
box-shadow: 0 -2px 0 0 #00abbb inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
margin: 5px 0 0;
}
.searchResultDetailList__button--bookShelfAdd::before {
content: "";
display: block;
text-indent: 0;
}
.searchResultDetailList__button--bookShelfAdd::before {
position: relative;
display: inline-block;
top: 0px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 28px;
line-height: 1;
}
.searchResultDetailList__button--bookShelfAdd.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.searchResultDetailList__button--bookShelfAdd.is-buttonDisabled span {
color: #bbbbbb !important;
}
.searchResultDetailList__button--bookShelfAdd.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.searchResultDetailList__button--bookShelfAdd.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.searchResultDetailList__button--bookShelfAdd.is-buttonCancel span {
color: #999999 !important;
}
.searchResultDetailList__button--bookShelfAdd.is-buttonCancel span::before {
color: #999999 !important;
}
.searchResultDetailList__button--bookShelfAdd::before {
content: "";
display: block;
text-indent: 0;
}
.searchResultDetailList__button--reservation {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
width: 80px;
font-size: 14px;
font-weight: bold;
padding: 9px 12px 9px;
margin: 10px 5px 0 0;
height: 34px;
vertical-align: bottom;
}
.searchResultDetailList__button--reservation.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.searchResultDetailList__button--reservation.is-buttonDisabled span {
color: #bbbbbb !important;
}
.searchResultDetailList__button--reservation.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.searchResultDetailList__button--reservation.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.searchResultDetailList__button--reservation.is-buttonCancel span {
color: #999999 !important;
}
.searchResultDetailList__button--reservation.is-buttonCancel span::before {
color: #999999 !important;
}
.searchResultDetailList__button--read {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
width: 120px;
font-size: 14px;
font-weight: bold;
padding: 9px 12px 9px;
margin: 10px 5px 0 0;
height: 34px;
vertical-align: bottom;
}
.searchResultDetailList__button--read.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.searchResultDetailList__button--read.is-buttonDisabled span {
color: #bbbbbb !important;
}
.searchResultDetailList__button--read.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.searchResultDetailList__button--read.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.searchResultDetailList__button--read.is-buttonCancel span {
color: #999999 !important;
}
.searchResultDetailList__button--read.is-buttonCancel span::before {
color: #999999 !important;
}
.searchResultDetailList.is-tile {
position: relative;
margin: 0 0px 30px;
}
.searchResultDetailList.is-tile .searchResultDetailList__list {
position: relative;
font-size: 0;
margin: 0 -5px 0 -32px;
}
.searchResultDetailList.is-tile .searchResultDetailList__listItem {
display: inline-block;
vertical-align: bottom;
text-align: center;
width: 25%;
margin: 0;
padding: 0 0 32px 32px;
}
@media screen and (min-width: 500px) and (max-width: 1151px) {
.searchResultDetailList.is-tile .searchResultDetailList__listItem {
width: 25%;
}
}
@media screen and (min-width: 1052px) and (max-width: 1279px) {
.searchResultDetailList.is-tile .searchResultDetailList__listItem {
width: 20%;
}
}
@media screen and (min-width: 1280px) and (max-width: 1439px) {
.searchResultDetailList.is-tile .searchResultDetailList__listItem {
width: 16.66%;
}
}
@media screen and (min-width: 1440px) and (max-width: 1599px) {
.searchResultDetailList.is-tile .searchResultDetailList__listItem {
width: 14.28%;
}
}
@media screen and (min-width: 1600px) and (max-width: 1759px) {
.searchResultDetailList.is-tile .searchResultDetailList__listItem {
width: 12.5%;
}
}
@media screen and (min-width: 1760px) and (max-width: 1919px) {
.searchResultDetailList.is-tile .searchResultDetailList__listItem {
width: 11.11%;
}
}
@media screen and (min-width: 1920px) {
.searchResultDetailList.is-tile .searchResultDetailList__listItem {
width: 10%;
}
}
.searchResultDetailList.is-tile .searchResultDetailList__listItemInner {
padding: 0;
}
.searchResultDetailList.is-tile .searchResultDetailList__imageBox {
margin: 0;
float: none;
width: auto;
}
.searchResultDetailList.is-tile .searchResultDetailList__imageWrapper {
position: relative;
max-width: 145px;
height: 210px;
display: inline-block;
font-size: 0;
white-space: nowrap;
}
.searchResultDetailList.is-tile .searchResultDetailList__imageWrapper.js-imgLoading > * {
opacity: 0;
}
.searchResultDetailList.is-tile .searchResultDetailList__imageWrapper.js-imgLoading .loadingIcon {
opacity: 1;
font-size: 10px;
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 1.2em;
height: 1.2em;
margin: auto;
text-indent: -9999em;
color: #d1d5d8;
background: #d1d5d8;
border-radius: 50%;
line-height: 1;
}
.searchResultDetailList.is-tile .searchResultDetailList__imageWrapper.js-imgLoading .loadingIcon::before, .searchResultDetailList.is-tile .searchResultDetailList__imageWrapper.js-imgLoading .loadingIcon::after {
position: absolute;
top: 0;
width: 1.2em;
height: 1.2em;
content: '';
background: #d1d5d8;
border-radius: 50%;
}
.searchResultDetailList.is-tile .searchResultDetailList__imageWrapper.js-imgLoading .loadingIcon::before {
left: -2em;
}
.searchResultDetailList.is-tile .searchResultDetailList__imageWrapper.js-imgLoading .loadingIcon::after {
left: 2em;
}
.searchResultDetailList.is-tile .searchResultDetailList__imageWrapper::before {
content: '';
width: 1px;
height: 210px;
display: inline-block;
margin-left: -1px;
}
.searchResultDetailList.is-tile .searchResultDetailList__image {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
display: inline-block;
min-width: 75%;
max-width: 100%;
max-height: 100%;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
}
.searchResultDetailList.is-tile .searchResultDetailList__itemNoImage {
display: inline-block;
position: relative;
background: #f5f5f5 url(../materials/noimage.png) 0 0 no-repeat;
background-size: 100% 100%;
background-position: center bottom;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
width: 145px;
height: 0;
padding: 139% 0 0;
word-wrap: break-word;
white-space: normal;
line-height: 1.4;
width: 120px;
}
.searchResultDetailList.is-tile .searchResultDetailList__itemNoImage.is-adult {
font-size: 14px;
}
.searchResultDetailList.is-tile .searchResultDetailList__itemNoImage.is-adult::before {
content: "";
display: block;
text-indent: 0;
}
.searchResultDetailList.is-tile .searchResultDetailList__itemNoImage.is-adult div {
top: -webkit-calc(50% - 0);
top: calc(50% - 0);
padding: 10px 0 40px;
}
.searchResultDetailList.is-tile .searchResultDetailList__itemNoImage.is-adult::before {
position: absolute;
display: inline-block;
left: 0;
right: 0;
top: 55px;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #c0c0c0;
font-size: 28px;
z-index: 1;
text-align: center;
}
.searchResultDetailList.is-tile .searchResultDetailList__infoBox {
display: none;
}
/*
#overview
searchFilter
検索サイドメニュー
*/
.searchFilter {
position: relative;
}
.searchFilter__title {
font-size: 16px;
padding: 0 0 10px 0;
border-bottom: 1px solid #ddd;
margin-bottom: 30px;
font-weight: bold;
}
.searchFilter__cansel {
position: absolute;
right: 0;
top: 1px;
font-size: 14px;
background: none;
border: none;
color: #c3a358;
}
.searchFilter__heading {
font-size: 15px;
font-weight: bold;
margin-bottom: 10px;
}
.searchFilter__searchCategory {
margin: 0 0 20px 10px;
font-size: 14px;
}
.searchFilter__list {
margin-bottom: 10px;
}
.searchFilter__device {
width: 100%;
font-size: 15px;
margin-bottom: 20px;
}
.searchFilter__deviceEdit {
font-weight: normal;
text-align: left;
padding-bottom: 10px;
}
.searchFilter__deviceEditButton {
padding-bottom: 10px;
text-align: right;
}
.searchFilter__footer {
border-top: 1px solid #ddd;
padding: 20px 20px 0;
box-sizing: border-box;
}
.searchFilter__button {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
border: 0 solid #cccccc;
color: #fff;
box-shadow: 0 -3px 0px 0px #00a2b1 inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
cursor: pointer;
margin: auto;
}
.searchFilter__button.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.searchFilter__button.is-buttonDisabled span {
color: #bbbbbb !important;
}
.searchFilter__button.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.searchFilter__button.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.searchFilter__button.is-buttonCancel span {
color: #999999 !important;
}
.searchFilter__button.is-buttonCancel span::before {
color: #999999 !important;
}
.searchFilter__button.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.searchFilter__button.is-buttonDisabled span {
color: #bbbbbb !important;
}
.searchFilter__button.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.searchFilter__button.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.searchFilter__button.is-buttonCancel span {
color: #999999 !important;
}
.searchFilter__button.is-buttonCancel span::before {
color: #999999 !important;
}
.searchFilter__toggleName {
display: inline-block;
}
.searchFilter__toggleBox {
float: right;
}
/*
#styleguide
ページャー
@detail
```
```
*/
.pager {
margin: 10px 0 50px;
width: 100%;
box-sizing: border-box;
}
.pager__list {
position: relative;
font-size: 0;
text-align: center;
}
.pager__item {
display: inline-block;
position: relative;
width: 45px;
letter-spacing: 0;
}
.pager__link {
display: block;
height: 45px;
line-height: 45px;
background-color: #edeff3;
letter-spacing: normal;
text-align: center;
font-size: 15px;
}
.is-current .pager__link {
color: #fff;
background-color: #1d2334;
font-weight: bold;
}
.is-noLink .pager__link {
background-color: transparent;
}
/*
#styleguide
チェックボックス
@form
```
```
*/
.formItem__checkBoxLabel {
position: relative;
font-size: 14px;
padding: 0 0 0 0px;
line-height: 24px;
}
.formItem__checkBox {
opacity: 0;
display: block;
position: absolute;
top: 0;
left: 0;
}
.formItem__checkBox + .formItem__checkBoxIcon {
background-image: url(../materials/sprites.png);
background-position: -450px -230px;
width: 24px;
height: 24px;
position: relative;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
.formItem__checkBox:checked + .formItem__checkBoxIcon {
background-image: url(../materials/sprites.png);
background-position: -423px -359px;
width: 24px;
height: 24px;
position: relative;
display: inline-block;
}
.formItem__switchLabel {
position: relative;
font-size: 14px;
padding: 0 0 0 0px;
line-height: 24px;
}
.formItem__switch {
opacity: 0;
display: block;
position: absolute;
top: 0;
left: 0;
}
.formItem__switch + .formItem__switchIcon {
background-image: url(../materials/sprites.png);
background-position: -496px -241px;
width: 63px;
height: 30px;
position: relative;
display: inline-block;
vertical-align: middle;
}
.formItem__switch:checked + .formItem__switchIcon {
background-image: url(../materials/sprites.png);
background-position: -496px -201px;
width: 63px;
height: 30px;
position: relative;
display: inline-block;
}
.formItem__radioBoxLabel {
position: relative;
font-size: 11px;
padding: 0 0 0 25px;
line-height: 18px;
}
.formItem__radioButton {
opacity: 0;
display: block;
position: absolute;
top: 0;
left: 0;
}
.formItem__radioButton + .formItem__radioButtonIcon {
position: relative;
color: #888888;
display: inline-block;
width: 18px;
height: 18px;
}
.formItem__radioButton + .formItem__radioButtonIcon::before {
content: "";
display: block;
text-indent: 0;
}
.formItem__radioButton + .formItem__radioButtonIcon::before {
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: auto 0;
height: 1.1em;
font-size: 22px;
line-height: 1;
left: 8px;
top: 15px;
}
.formItem__radioButton:checked + .formItem__radioButtonIcon {
color: #bda553;
}
.formItem__radioButton:checked + .formItem__radioButtonIcon::before {
content: "";
display: block;
text-indent: 0;
}
.formItem__text {
border-radius: 10px;
border: 1px solid #cccccc;
box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.2) inset;
background-color: #f9f9f9;
height: 43px;
line-height: 42px;
padding: 0 10px;
box-sizing: border-box;
width: 100%;
}
.formItem__textArea {
width: 100%;
border-radius: 10px;
border: 1px solid #cccccc;
box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.2) inset;
background-color: #f9f9f9;
padding: 10px 10px;
box-sizing: border-box;
}
/*
#styleguide
footer bnr
@detail
```
```
*/
.footerBanner {
border-top: 1px solid #ddd;
padding-top: 70px;
}
.footerBanner__box {
overflow: hidden;
margin-left: -30px;
}
.footerBanner__list {
width: 25%;
float: left;
margin: 0 0 20px 0;
padding: 0 0 0 30px;
}
.footerBanner__comment {
font-size: 14px;
padding-top: 10px;
}
.footerBanner__image {
display: block;
width: 100%;
}
.footerBanner .recommendModule {
margin-left: -10px;
width: -webkit-calc(100% + 20px);
width: calc(100% + 20px);
}
.genreList {
font-size: 14px;
margin: 80px 0 0;
}
.genreList__inner {
width: 100%;
position: relative;
overflow: hidden;
padding-bottom: 100px;
}
.genreList__mainBox {
margin: 0 80px 0;
}
.genreList__boxList {
margin: 0 0 0 -40px;
}
.genreList__heading {
margin: 0 80px 40px;
}
.genreList__title {
font-size: 24px;
margin: 0 0 40px;
padding: 0 0 20px;
border-bottom: 1px solid #eee;
}
.genreList__boxList:after {
content: "";
clear: both;
display: block;
}
.genreList__boxItem {
float: left;
width: -webkit-calc((100% - 200px)/5);
width: calc((100% - 200px)/5);
margin: 0 0 0 40px;
}
.genreList__item, .genreList__item.is-open {
margin: 30px 0 0;
}
.genreList__item:first-child {
margin: 0;
}
.genreList__itemLink, .genreList__itemLink--noUnderLayer {
display: inline-block;
position: relative;
font-size: 14px;
font-weight: bold;
padding: 0 0 0 0;
}
.genreList__subItem {
padding: 0 0 0 20px;
}
.genreList__subItem--spOnly {
display: none;
}
.genreList__subItemLink {
color: #ab8e48;
display: inline-block;
margin: 15px 0 0;
}
.login {
background: #fff url("../materials/bg_login.jpg") center center no-repeat;
background-attachment: fixed;
background-size: cover;
padding: 0 0 65px;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
min-height: 100vh;
overflow: hidden;
position: relative;
}
.login__header {
position: relative;
}
.login__headerInner {
padding: 0 40px;
position: relative;
height: 72px;
}
.login__headerLogoWrapper, .login__headerLogoWrapper--senid {
display: block;
position: absolute;
left: 40px;
top: 20px;
width: 124px;
}
.login__headerLogoWrapper--senid {
top: 60px;
}
.login__headerLogoLink {
display: block;
}
.login__headerLogo {
display: block;
width: 100%;
}
.login__container {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
min-height: 700px;
}
.login__containerInner, .login__containerInner--noBorder {
position: absolute;
bottom: 50%;
left: 0;
right: 0;
width: 730px;
min-height: 350px;
margin: 0px auto 30px;
overflow: hidden;
-webkit-transform: translateY(50%);
transform: translateY(50%);
}
.login__containerInner:after, .login__containerInner--noBorder:after {
content: "";
clear: both;
display: block;
}
.login__containerInner::before, .login__containerInner--noBorder::before {
content: '';
position: absolute;
left: 50%;
bottom: 0;
bottom: 0;
background: #fff;
opacity: .15;
width: 1px;
height: 500px;
}
.login__containerInner--noBorder::before {
display: none;
}
.login__navigation {
position: absolute;
top: 32px;
right: 40px;
}
.login__navigationList {
display: block;
text-align: right;
font-size: 0;
white-space: nowrap;
}
.login__navigationItem, .login__navigationItem--big {
display: inline-block;
font-size: 14px;
margin: 0 0 0 30px;
}
.login__navigationLink, .login__navigationLink--big {
color: #fff;
}
.login__footerInner {
position: absolute;
height: 65px;
left: 0;
right: 0;
bottom: 0;
}
.login__footerLogoWrapper {
position: absolute;
left: 40px;
bottom: 25px;
width: 102px;
}
.login__footerLogoWrapper + .login__footerCopyrightWrapper {
left: 170px;
}
.login__footerLogoLink {
display: block;
}
.login__footerLogo {
display: block;
width: 100%;
}
.login__footerCopyrightWrapper {
position: absolute;
left: 40px;
bottom: 22px;
line-height: 0.9;
}
.login__footerCopyright {
color: #fff;
font-size: 10px;
opacity: .6;
}
.login__poweredBy {
position: absolute;
right: 40px;
bottom: 20px;
font-size: 0;
}
.login__poweredByText {
display: inline-block;
color: #fff;
font-size: 11px;
opacity: .6;
}
.login__poweredByLogo {
display: inline-block;
width: 68px;
margin: 0 0 0 5px;
}
.login__signinSony {
float: left;
width: 320px;
padding: 40px 0 20px;
}
.login__help {
padding: 20px 0 0;
}
.login__helpItem {
display: block;
text-align: center;
}
.login__helpLink {
color: rgba(255, 255, 255, 0.7);
font-size: 12px;
cursor: pointer;
}
.login__signinSonySenid {
width: 100%;
padding: 40px 0 0;
}
.login__signinOther {
width: 514px;
float: right;
padding: 30px 40px 0;
}
.login__signinSenId {
width: 100%;
margin: auto;
padding: 0px 50px 0;
}
.login__signinSenId .login__title {
text-align: center;
}
.login__otherId {
width: 320px;
float: right;
padding: 30px 0 0;
}
.login__noIdSenid {
width: 320px;
height: 400px;
float: right;
padding: 150px 0 0;
}
.login__title {
font-size: 16px;
letter-spacing: 0.05em;
margin: 0 0 25px;
color: #fff;
text-align: center;
}
.login__subTitle {
font-size: 16px;
letter-spacing: 0.05em;
line-height: 1;
color: #fff;
text-align: center;
}
.login__mainTitleSenid {
font-size: 16px;
letter-spacing: 0.05em;
margin: 0 0 15px;
color: #fff;
text-align: center;
}
.login__text {
float: left;
line-height: 48px;
font-size: 14px;
color: #fff;
font-weight: bold;
}
.login__storeLink {
font-size: 12px;
color: #fff;
}
.login__storeText {
font-size: 12px;
text-align: center;
margin: 0 0 15px;
}
.login__sineinBox {
padding: 25px 0;
border-top: 1px dotted rgba(255, 255, 255, 0.4);
}
.login__sineinBox:after {
content: "";
clear: both;
display: block;
}
.login__formTextBox {
float: right;
}
.login__button {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
border: 0 solid #cccccc;
color: #fff;
box-shadow: 0 -3px 0px 0px #00a2b1 inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
cursor: pointer;
width: 240px;
margin: 15px auto 0;
}
.login__button.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.login__button.is-buttonDisabled span {
color: #bbbbbb !important;
}
.login__button.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.login__button.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.login__button.is-buttonCancel span {
color: #999999 !important;
}
.login__button.is-buttonCancel span::before {
color: #999999 !important;
}
.login__button.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.login__button.is-buttonDisabled span {
color: #bbbbbb !important;
}
.login__button.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.login__button.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.login__button.is-buttonCancel span {
color: #999999 !important;
}
.login__button.is-buttonCancel span::before {
color: #999999 !important;
}
.login__button--other {
display: inline-block;
border: 1px solid #cccccc;
border-radius: 5px;
line-height: 48px;
height: 48px;
text-align: center;
position: relative;
background-color: #fff;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a28d42;
font-size: 16px;
font-weight: bold;
padding: 0 40px;
box-sizing: border-box;
border-radius: 24px;
font-size: 14px;
font-weight: bold;
padding: 0 10px;
width: 110px;
float: right;
}
.login__input--text {
display: block;
margin: auto;
width: 320px;
padding: 11px;
font-size: 14px;
background: rgba(255, 255, 255, 0.2);
border-radius: 5px;
margin-bottom: 15px;
box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.3) inset;
color: #fff;
}
.login__input--text::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.3);
}
.login__input--text::-moz-placeholder {
color: rgba(255, 255, 255, 0.3);
}
.login__input--text:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.3);
}
.login__input--text::placeholder {
color: rgba(255, 255, 255, 0.3);
}
.login__input--text:focus::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0);
}
.login__input--text:focus::-moz-placeholder {
color: rgba(255, 255, 255, 0);
}
.login__input--text:focus:-ms-input-placeholder {
color: rgba(255, 255, 255, 0);
}
.login__input--text:focus::placeholder {
color: rgba(255, 255, 255, 0);
}
.login__inputWrapper {
margin: auto;
width: 320px;
}
.login__inputWrapper.is-error {
position: relative;
}
.login__inputWrapper.is-error::before {
content: "";
display: block;
text-indent: 0;
}
.login__inputWrapper.is-error::before {
position: absolute;
top: 10px;
right: 14px;
margin: auto 0;
height: 1.5em;
font-size: 26px;
color: rgba(255, 255, 255, 0.3);
}
.login__idSave {
margin-bottom: 15px;
color: #fff;
text-align: center;
}
.login__center--spOnly {
display: none;
}
.login__link--text--help {
color: #bda452;
font-size: 14px;
display: inline-block;
margin: 10px 0 0;
}
.login__formBox {
width: 400px;
margin: auto;
}
.login__dialog {
padding: 40px 40px 30px;
}
.login__dialogTitle {
margin: 0 0 15px;
font-size: 14px;
font-weight: bold;
}
.login__dialogText {
font-size: 14px;
margin: 0 0 10px;
}
.login__footerList {
text-align: center;
margin: 25px 0 0;
}
.login__footerLink {
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
}
.login__sonyHeader {
height: 36px;
background-color: #000;
position: relative;
}
.login__sonyLogo {
position: absolute;
top: 10px;
right: 12px;
width: 72px;
}
.login__spOnly {
display: none;
}
.login__cautionBox {
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 4px;
width: 500px;
padding: 10px 10px 10px 50px;
margin: auto auto 25px;
}
.login__cautionBox.is-msid {
margin: 120px auto 0;
}
.login__cautionIcon {
font-size: 14px;
padding: 0 0 0 0;
position: relative;
color: rgba(255, 255, 255, 0.7);
line-height: 1.5;
}
.login__cautionIcon::before {
content: "";
display: block;
text-indent: 0;
}
.login__cautionIcon::before {
position: absolute;
top: -8px;
left: -33px;
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
margin: auto 0;
height: 1.5em;
font-size: 26px;
color: rgba(255, 255, 255, 0.7);
}
.login__cautionText, .login__cautionText--col2 {
width: 600px;
font-size: 12px;
margin: 25px auto 0;
text-align: center;
color: #fff;
}
.login__cautionText--col2 {
margin: 0 auto 0;
width: 100%;
}
.login__link {
color: #fff;
text-decoration: underline;
}
.mypageTop {
padding: 0 0 100px 0;
}
.mypageTop__heading {
background-image: url("../materials/bg_account.jpg");
background-position: center center;
background-repeat: repeat;
color: #fff;
height: 105px;
position: relative;
}
.mypageTop__inner {
position: absolute;
width: 1024px;
margin: 0 auto;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 50px;
}
.mypageTop__innerTextWrap {
position: absolute;
top: 50%;
left: 60px;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.mypageTop__innerProfileWrap {
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.mypageTop__userName {
display: inline-block;
vertical-align: middle;
font-size: 17px;
margin-right: 15px;
}
.mypageTop__editProfile {
display: inline-block;
vertical-align: middle;
width: 170px;
font-size: 15px;
text-align: center;
border: 1px solid #fff;
border-radius: 20px;
line-height: 1;
padding: 7px 10px;
color: #fff;
}
.mypageTop__userPhoto {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
-webkit-transition: all .5s ease;
transition: all .5s ease;
z-index: 0;
min-width: 50px;
min-height: 50px;
}
.mypageTop__userPhoto.is-display {
opacity: 1;
z-index: 2;
}
.mypageTop__userPhotoWrapper {
position: relative;
z-index: 2;
background: #ccc;
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
display: inline-block;
margin-right: 10px;
position: relative;
}
.mypageTop__container {
width: 1024px;
margin: 0 auto;
overflow: hidden;
padding: 80px 0 0 0;
}
.mypageTop__section {
float: left;
width: 510px;
padding: 0px 55px 30px;
}
.mypageTop__section:nth-child(2) {
border-left: 1px solid #eee;
padding: 16px 55px 20px;
}
.mypageTop__section:nth-child(4) {
border-right: 1px solid #eee;
padding-top: 40px;
padding-bottom: 0;
}
.mypageTop__section:nth-child(5) {
padding-bottom: 0;
padding-top: 40px;
}
.mypageTop__sectionLine {
height: 1px;
content: '';
width: 100%;
border-bottom: 1px solid #eee;
margin-bottom: 15px;
padding-top: 15px;
clear: left;
position: relative;
}
.mypageTop__sectionLine::before {
content: '';
width: 20px;
height: 5px;
position: absolute;
left: 50%;
bottom: -2px;
margin-left: -12px;
background: #fff;
}
.mypageTop__sectionTitle {
font-size: 20px;
margin: 0 0 20px;
padding: 0;
line-height: 1;
}
.mypageTop__pontTitle {
font-size: 20px;
line-height: 36px;
float: left;
}
.mypageTop__pointBox {
margin: 0 0 15px;
}
.mypageTop__pointBox:after {
content: "";
clear: both;
display: block;
}
.mypageTop__contentWrapper {
padding: 20px 20px;
background: #f4f6f8;
border: 1px solid #dedede;
border-radius: 5px;
margin-bottom: 10px;
}
.mypageTop__contentList {
margin-bottom: 10px;
}
.mypageTop__contentList:last-child {
margin: 0;
}
.mypageTop__pointTitle {
display: inline-block;
font-size: 14px;
width: 150px;
}
.mypageTop__limitDate {
font-size: 12px;
color: #cc0000;
text-align: right;
}
.mypageTop__colon {
display: inline-block;
font-size: 14px;
}
.mypageTop__point, .mypageTop__point--balance, .mypageTop__point--normal {
display: inline-block;
float: right;
font-size: 16px;
font-weight: bold;
}
.mypageTop__point--balance {
color: #ab8e48;
}
.mypageTop__point--normal {
font-size: 14px;
font-weight: normal;
}
.mypageTop__pointDetailButtonWrapper {
float: right;
}
.mypageTop__pointDetailButtonWrapper:after {
content: "";
clear: both;
display: block;
}
.mypageTop__pointDetailButtonWrapper .mypageTop__link--help {
position: relative;
top: 5px;
}
.mypageTop__pointDetailButton {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
}
.mypageTop__pointDetailButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.mypageTop__pointDetailButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.mypageTop__pointDetailButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.mypageTop__pointDetailButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.mypageTop__pointDetailButton.is-buttonCancel span {
color: #999999 !important;
}
.mypageTop__pointDetailButton.is-buttonCancel span::before {
color: #999999 !important;
}
.mypageTop__codeButton {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
padding: 7px 10px 8px 10px;
color: #fff;
border: 0px solid #cccccc;
box-shadow: 0 -2px 0 0 #00abbb inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.mypageTop__codeButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.mypageTop__codeButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.mypageTop__codeButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.mypageTop__codeButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.mypageTop__codeButton.is-buttonCancel span {
color: #999999 !important;
}
.mypageTop__codeButton.is-buttonCancel span::before {
color: #999999 !important;
}
.mypageTop__codeButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.mypageTop__codeButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.mypageTop__codeButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.mypageTop__codeButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.mypageTop__codeButton.is-buttonCancel span {
color: #999999 !important;
}
.mypageTop__codeButton.is-buttonCancel span::before {
color: #999999 !important;
}
.mypageTop__buttonList {
text-align: center;
margin: 20px 0 0;
}
.mypageTop__buttonListItem {
display: inline-block;
margin: 0 10px;
}
.mypageTop__limitPoint {
font-weight: bold;
font-size: 18px;
}
.mypageTop__rankTitle {
display: inline-block;
font-size: 14px;
font-weight: bold;
width: 150px;
}
.mypageTop__rank {
display: inline-block;
font-weight: bold;
}
.mypageTop__rank--regular {
color: #3eae90;
font-size: 16px;
font-weight: bold;
padding-left: 28px;
position: relative;
line-height: 1.5;
float: right;
}
.mypageTop__rank--bronze {
color: #d39272;
font-size: 16px;
font-weight: bold;
padding-left: 28px;
position: relative;
line-height: 1.5;
float: right;
}
.mypageTop__rank--silver {
color: #256b75;
font-size: 16px;
font-weight: bold;
padding-left: 28px;
position: relative;
line-height: 1.5;
float: right;
}
.mypageTop__rank--gold {
color: #cdb25b;
font-size: 16px;
font-weight: bold;
padding-left: 28px;
position: relative;
line-height: 1.5;
float: right;
}
.mypageTop__nextRank {
display: inline-block;
width: 100%;
padding: 10px 10px 12px 10px;
border-radius: 50px;
border: 1px solid #eee;
background: #fff;
line-height: 1;
font-size: 14px;
text-align: center;
position: relative;
z-index: 2;
}
.mypageTop__threePpointLeader {
margin-left: 10px;
}
.mypageTop__nextRankName, .mypageTop__nextRankName--regular, .mypageTop__nextRankName--bronze, .mypageTop__nextRankName--silver, .mypageTop__nextRankName--gold {
font-size: 18px;
font-weight: bold;
margin: 10px;
}
.mypageTop__nextRankName--regular {
color: #3eae90;
}
.mypageTop__nextRankName--bronze {
color: #c4946d;
}
.mypageTop__nextRankName--silver {
color: #256b75;
}
.mypageTop__nextRankName--gold {
color: #cdb25b;
}
.mypageTop__rankMessage {
text-align: center;
font-size: 14px;
line-height: 1.5;
margin-top: 15px;
}
.mypageTop__rankMessage--strong {
font-size: 16px;
color: #cc0000;
}
.mypageTop__rankName, .mypageTop__rankName--regular, .mypageTop__rankName--bronze, .mypageTop__rankName--silver, .mypageTop__rankName--gold {
font-size: 16px;
font-weight: bold;
}
.mypageTop__rankName--regular {
color: #3eae90;
}
.mypageTop__rankName--bronze {
color: #c4946d;
}
.mypageTop__rankName--silver {
color: #256b75;
}
.mypageTop__rankName--gold {
color: #cdb25b;
}
.mypageTop__link--help {
float: right;
color: #ab8e48;
font-size: 12px;
}
.mypageTop__link--help::after {
display: inline-block;
content: '';
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 9px;
height: 9px;
margin: 0 5px;
}
.mypageTop__menu {
border-top: 1px solid #eee;
padding: 0 0 0 10px;
margin-top: 30px;
}
.mypageTop__menuLink {
display: block;
line-height: 1;
padding: 20px 20px;
position: relative;
border-bottom: 1px solid #eee;
}
.mypageTop__menuLink::after {
background-image: url(../materials/sprites.png);
background-position: -569px -201px;
width: 11px;
height: 15px;
content: '';
width: 10px;
height: 15px;
display: inline-block;
position: absolute;
right: 20px;
top: 22px;
vertical-align: middle;
}
.mypageTop__menuNoticeNum {
width: 30px;
float: right;
color: #aaa;
text-align: right;
font-size: 12px;
margin-right: 25px;
margin-top: 3px;
line-height: 1;
}
.mypageTop__menuEdit {
padding: 20px;
}
.mypageTop__toggleBox {
float: right;
}
.mypageTop__menuEditSwitch {
float: right;
width: 80px;
border: 1px solid #aaa;
}
.mypageTop__noticeText {
font-size: 12px;
padding-left: 30px;
}
.modalMypageProfile {
padding: 40px 60px;
box-sizing: border-box;
font-size: 14px;
color: #1b2433;
text-align: center;
}
.modalMypageProfile__photoWrapper {
position: relative;
z-index: 2;
background: #ccc;
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
margin: auto;
background-size: cover;
background-color: #ccc;
background-position: center center;
background-repeat: no-repeat;
pointer-events: none;
}
.modalMypageProfile__userPhoto {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
-webkit-transition: all .5s ease;
transition: all .5s ease;
z-index: 0;
}
.modalMypageProfile__userPhoto.is-display {
opacity: 1;
z-index: 2;
}
.modalMypageProfile__inner {
position: relative;
}
.modalMypageProfile__file {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0;
cursor: pointer;
min-height: 150px;
}
.modalMypageProfile__file--dummy {
display: none;
}
.modalMypageProfile__change {
color: #ab8e48;
text-align: center;
margin: 20px auto 0;
display: inline-block;
position: relative;
}
.modalMypageProfile__inputBox {
margin: auto;
text-align: left;
}
.modalMypageProfile__itemName {
margin: 20px 0 0 0;
}
.modalMypageProfile__input {
border: 1px solid #cccccc;
border-radius: 8px;
background-color: #f9f9f9;
box-shadow: inset 0px 3px 4px 0px rgba(0, 0, 0, 0.15);
height: 40px;
line-height: 40px;
width: 320px;
margin: 10px 0 0 0;
padding: 11px;
}
.modalMypageProfile__buttonBox {
margin: 20px 0 0 0;
}
.modalMypageProfile__button {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
display: block;
margin: auto;
}
.modalMypageProfile__button.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.modalMypageProfile__button.is-buttonDisabled span {
color: #bbbbbb !important;
}
.modalMypageProfile__button.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.modalMypageProfile__button.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.modalMypageProfile__button.is-buttonCancel span {
color: #999999 !important;
}
.modalMypageProfile__button.is-buttonCancel span::before {
color: #999999 !important;
}
.modalMypageProfile__button--active {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
display: block;
margin: auto;
}
.modalMypageProfile__button--active.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.modalMypageProfile__button--active.is-buttonDisabled span {
color: #bbbbbb !important;
}
.modalMypageProfile__button--active.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.modalMypageProfile__button--active.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.modalMypageProfile__button--active.is-buttonCancel span {
color: #999999 !important;
}
.modalMypageProfile__button--active.is-buttonCancel span::before {
color: #999999 !important;
}
.modalMypageProfile__caution {
color: #b62626;
margin: 5px 0 0 0;
}
.modalMypagePoint {
color: #182432;
font-size: 14px;
padding: 40px 40px 60px;
}
.modalMypagePoint__currentBox {
background-color: #f4f6f8;
width: 400px;
padding: 40px 30px 30px;
margin: auto;
}
.modalMypagePoint__titleBox {
border-bottom: 1px solid #dedede;
padding: 0 0 20px;
}
.modalMypagePoint__titleBox:after {
content: "";
clear: both;
display: block;
}
.modalMypagePoint__title {
font-size: 16px;
float: left;
}
.modalMypagePoint__link {
float: right;
position: relative;
display: inline-block;
color: #ab8e48;
font-size: 12px;
padding: 0 20px 0 0;
}
.modalMypagePoint__link::before {
content: '';
width: 8px;
height: 1px;
background-color: #cccccc;
position: absolute;
top: 14px;
right: 0;
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
.modalMypagePoint__link::after {
content: '';
width: 8px;
height: 1px;
background-color: #cccccc;
position: absolute;
top: 9px;
right: 0;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
.modalMypagePoint__list {
padding: 10px 0 0 0;
}
.modalMypagePoint__list:after {
content: "";
clear: both;
display: block;
}
.modalMypagePoint__list + .modalMypagePoint__list {
padding: 0 0 0 0;
}
.modalMypagePoint__term {
float: left;
margin: 10px 0 0;
width: 150px;
line-height: 1.5;
}
.modalMypagePoint__description {
float: right;
font-size: 14px;
font-weight: bold;
margin: 10px 0 0;
width: 150px;
text-align: right;
word-break: break-all;
line-height: 1.5;
}
.modalMypagePoint__point, .modalMypagePoint__point--icon {
color: #ab8e48;
font-size: 16px;
font-weight: bold;
}
.modalMypagePoint__point--icon {
position: relative;
display: inline-block;
}
.modalMypagePoint__point--icon::before {
content: "";
display: block;
text-indent: 0;
}
.modalMypagePoint__point--icon::before {
position: absolute;
display: inline-block;
left: -27px;
top: -3px;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #ab8e48;
font-size: 30px;
}
.modalMypagePoint__balloonBoxInner {
position: relative;
}
.modalMypagePoint__balloonBoxInner:after {
content: "";
clear: both;
display: block;
}
.modalMypagePoint__balloonBoxInner::before {
position: absolute;
content: '+';
color: #eeeeee;
top: 50%;
left: 50%;
margin: auto;
font-size: 32px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.modalMypagePoint__balloonBox {
margin: 45px 0 0 0;
border-radius: 6px;
position: relative;
background: #ffffff;
border: 1px solid #dedede;
padding: 30px;
}
.modalMypagePoint__balloonBox::before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(222, 222, 222, 0);
border-bottom-color: #dedede;
border-width: 25px;
margin-left: -25px;
}
.modalMypagePoint__balloonBox::after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
border-width: 24px;
margin-left: -24px;
}
.modalMypagePoint__pointBox, .modalMypagePoint__pointBox--plus {
width: 300px;
float: left;
}
.modalMypagePoint__pointBox--plus {
position: relative;
}
.modalMypagePoint__pointBox + .modalMypagePoint__pointBox, .modalMypagePoint__pointBox--plus + .modalMypagePoint__pointBox, .modalMypagePoint__pointBox + .modalMypagePoint__pointBox--plus, .modalMypagePoint__pointBox--plus + .modalMypagePoint__pointBox--plus {
float: right;
}
.modalMypagePoint__date {
font-size: 12px;
}
.modalMypagePoint__pointText {
white-space: nowrap;
display: inline-block;
}
.cartSubColumn {
width: 400px;
float: right;
background-color: #f4f6f8;
position: relative;
z-index: 1;
border-left: 1px solid #dedede;
}
.cartSubColumn .recommendModule--row {
margin: 0 0 30px;
}
.cartMainColumn {
float: left;
width: -webkit-calc(100% - 400px);
width: calc(100% - 400px);
}
.cartMainColumn__inner {
padding: 70px 80px 50px;
width: 100%;
box-sizing: border-box;
}
.cartItem {
color: #1d2334;
font-size: 14px;
}
.cartItem + .cartItem {
margin: 65px 0 0;
}
.cartItem__title, .cartItem__title--zero {
font-size: 20px;
}
.cartItem__list {
margin: 20px 0 0;
}
.cartItem__listItem {
padding: 30px 0 30px;
border-bottom: 1px solid #eeeeee;
width: 100%;
position: relative;
}
.cartItem__listItem:after {
content: "";
clear: both;
display: block;
}
.cartItem__listItem:first-child {
border-top: 1px solid #eeeeee;
}
.cartItem__infoTextBox {
width: -webkit-calc(100% - 160px);
width: calc(100% - 160px);
display: inline-block;
vertical-align: middle;
}
.cartItem__infoBoxInner {
width: -webkit-calc(100% - 6px);
width: calc(100% - 6px);
display: inline-block;
vertical-align: middle;
}
.cartItem__infoBoxWrap {
width: -webkit-calc(100% - 150px);
width: calc(100% - 150px);
float: right;
position: relative;
top: 50%;
left: 150px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.cartItem__infoBox {
float: right;
width: -webkit-calc(100% - 142px);
width: calc(100% - 142px);
}
.cartItem__infoBox::before {
content: '';
left: 0;
height: 180px;
width: 1px;
display: inline-block;
vertical-align: middle;
}
.cartItem__deleteBox {
position: absolute;
top: -webkit-calc(50% + 20px);
top: calc(50% + 20px);
right: 0px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.cartItem__imageBox {
float: left;
width: 120px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.cartItem__imageWrapper {
position: relative;
margin: 0;
max-width: 145px;
height: 210px;
font-size: 0;
white-space: nowrap;
text-align: center;
max-width: 120px;
height: 174px;
}
.cartItem__imageWrapper.js-imgLoading > * {
opacity: 0;
}
.cartItem__imageWrapper.js-imgLoading .loadingIcon {
opacity: 1;
font-size: 10px;
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 1.2em;
height: 1.2em;
margin: auto;
text-indent: -9999em;
color: #d1d5d8;
background: #d1d5d8;
border-radius: 50%;
line-height: 1;
}
.cartItem__imageWrapper.js-imgLoading .loadingIcon::before, .cartItem__imageWrapper.js-imgLoading .loadingIcon::after {
position: absolute;
top: 0;
width: 1.2em;
height: 1.2em;
content: '';
background: #d1d5d8;
border-radius: 50%;
}
.cartItem__imageWrapper.js-imgLoading .loadingIcon::before {
left: -2em;
}
.cartItem__imageWrapper.js-imgLoading .loadingIcon::after {
left: 2em;
}
.cartItem__imageWrapper::before {
content: '';
width: 1px;
height: 210px;
display: inline-block;
margin-left: -1px;
}
.cartItem__imageWrapper::before {
height: 174px;
}
.cartItem__bookImage {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
display: inline-block;
min-width: 75%;
max-width: 100%;
max-height: 100%;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.cartItem__itemNoImage {
display: inline-block;
position: relative;
background: #f5f5f5 url(../materials/noimage.png) 0 0 no-repeat;
background-size: 100% 100%;
background-position: center bottom;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
width: 145px;
height: 0;
padding: 139% 0 0;
word-wrap: break-word;
white-space: normal;
line-height: 1.4;
width: 120px;
}
.cartItem__itemNoImage.is-adult {
font-size: 14px;
}
.cartItem__itemNoImage.is-adult::before {
content: "";
display: block;
text-indent: 0;
}
.cartItem__itemNoImage.is-adult div {
top: -webkit-calc(50% - 0);
top: calc(50% - 0);
padding: 10px 0 40px;
}
.cartItem__itemNoImage.is-adult::before {
position: absolute;
display: inline-block;
left: 0;
right: 0;
top: 55px;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #c0c0c0;
font-size: 28px;
z-index: 1;
text-align: center;
}
.cartItem__itemNoImageInner {
position: absolute;
left: 5px;
right: 5px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #888;
background: #f5f5f5;
padding: 10px 0;
}
.cartItem__noImageTitle {
font-size: 12px;
font-weight: bold;
padding: 0 0 5px;
max-height: 2.8em;
overflow: hidden;
}
.cartItem__noImageAuthor {
font-size: 12px;
max-height: 2.8em;
overflow: hidden;
}
.cartItem__bookTitle {
font-size: 16px;
font-weight: bold;
word-wrap: break-word;
}
.cartItem__auther {
font-size: 16px;
color: #888888;
margin: 0 0 0;
}
.cartItem__auther .cartItem__link {
color: #888888;
}
.cartItem__price {
font-size: 18px;
color: #c01200;
position: relative;
font-size: 24px;
margin: 10px 0 0;
}
.cartItem__tax {
display: inline-block;
color: rgba(27, 36, 51, 0.8);
font-size: 12px;
font-weight: normal;
}
.cartItem__buttonBox {
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin: -17px 0 0;
}
.cartItem__buyButton {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
}
.cartItem__buyButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.cartItem__buyButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.cartItem__buyButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.cartItem__buyButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.cartItem__buyButton.is-buttonCancel span {
color: #999999 !important;
}
.cartItem__buyButton.is-buttonCancel span::before {
color: #999999 !important;
}
.cartItem__deleteButton {
position: relative;
padding: 0 0 0 1.5em;
cursor: pointer;
letter-spacing: -.08em;
display: block;
width: 60px;
float: right;
margin: 15px 0 0;
color: #888888;
font-size: 14px;
}
.cartItem__deleteButton::before {
content: "";
display: block;
text-indent: 0;
}
.cartItem__deleteButton::before {
position: absolute;
display: inline-block;
left: 0;
top: -2px;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #888888;
font-size: 20px;
}
.cartItem__cartButton {
display: inline-block;
text-align: center;
position: relative;
height: 34px;
line-height: 34px;
border-radius: 18px;
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 0 15px 0;
width: 80px;
box-shadow: 0 -2px 0 0 #00abbb inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
width: 80px;
}
.cartItem__cartButton::before {
content: "";
display: block;
text-indent: 0;
}
.cartItem__cartButton::before {
position: relative;
display: inline-block;
top: 0px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 28px;
line-height: 1;
}
.cartItem__cartButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.cartItem__cartButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.cartItem__cartButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.cartItem__cartButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.cartItem__cartButton.is-buttonCancel span {
color: #999999 !important;
}
.cartItem__cartButton.is-buttonCancel span::before {
color: #999999 !important;
}
.cartItem__moreButtonBox {
margin: 40px 0 0;
text-align: center;
}
.cartItem__moreButton {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
width: 240px;
margin: auto;
}
.cartItem__moreButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.cartItem__moreButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.cartItem__moreButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.cartItem__moreButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.cartItem__moreButton.is-buttonCancel span {
color: #999999 !important;
}
.cartItem__moreButton.is-buttonCancel span::before {
color: #999999 !important;
}
.cartItem__download {
display: none;
}
.cartItem__zeroBox {
height: 500px;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
margin: 30px 0 0 0;
position: relative;
text-align: center;
}
.cartItem__zeroText {
font-size: 20px;
position: absolute;
color: #d5d8de;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.cartItem__zeroText::before {
content: "";
display: block;
text-indent: 0;
}
.cartItem__zeroText::before {
position: absolute;
display: inline-block;
right: 0;
left: 0;
top: -180px;
bottom: 0;
margin: auto 0;
line-height: 1;
color: #e5e8ee;
font-size: 150px;
}
.cartItem__invisibleBox {
display: none;
height: 0;
}
.cartCheckItem {
color: #1d2334;
font-size: 14px;
padding: 0 40px;
margin: 50px 0 0;
position: absolute;
top: 360px;
right: 0;
width: 400px;
}
.cartCheckItem__title {
font-size: 16px;
text-align: center;
}
.cartCheckItem__list {
border-top: 1px solid #dedede;
margin: 10px 0 0;
}
.cartCheckItem__listItem {
padding: 0 0 0 0;
margin: 20px 0 0;
width: 100%;
box-sizing: border-box;
position: relative;
}
.cartCheckItem__listItem:after {
content: "";
clear: both;
display: block;
}
.cartCheckItem__infoTextBox {
width: -webkit-calc(100% - 6px);
width: calc(100% - 6px);
display: inline-block;
vertical-align: middle;
}
.cartCheckItem__infoBox {
float: right;
width: -webkit-calc(100% - 98px);
width: calc(100% - 98px);
position: relative;
display: inline-block;
vertical-align: middle;
}
.cartCheckItem__infoBox::before {
content: '';
width: 1px;
height: 120px;
display: inline-block;
vertical-align: middle;
}
.cartCheckItem__imageBox {
float: left;
width: 80px;
}
.cartCheckItem__imageWrapper {
position: relative;
margin: 0;
max-width: 145px;
height: 210px;
font-size: 0;
white-space: nowrap;
text-align: center;
}
.cartCheckItem__imageWrapper.js-imgLoading > * {
opacity: 0;
}
.cartCheckItem__imageWrapper.js-imgLoading .loadingIcon {
opacity: 1;
font-size: 10px;
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 1.2em;
height: 1.2em;
margin: auto;
text-indent: -9999em;
color: #d1d5d8;
background: #d1d5d8;
border-radius: 50%;
line-height: 1;
}
.cartCheckItem__imageWrapper.js-imgLoading .loadingIcon::before, .cartCheckItem__imageWrapper.js-imgLoading .loadingIcon::after {
position: absolute;
top: 0;
width: 1.2em;
height: 1.2em;
content: '';
background: #d1d5d8;
border-radius: 50%;
}
.cartCheckItem__imageWrapper.js-imgLoading .loadingIcon::before {
left: -2em;
}
.cartCheckItem__imageWrapper.js-imgLoading .loadingIcon::after {
left: 2em;
}
.cartCheckItem__imageWrapper::before {
content: '';
width: 1px;
height: 210px;
display: inline-block;
margin-left: -1px;
}
.cartCheckItem__bookImage {
width: 100%;
}
.cartCheckItem__bookTitle {
font-size: 16px;
font-weight: bold;
}
.cartCheckItem__auther {
font-size: 14px;
margin: 5px 0 0;
color: #888888;
}
.cartCheckItem__buttonBox {
position: absolute;
right: 150px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.cartCheckItem__cartButton {
display: inline-block;
text-align: center;
position: relative;
height: 34px;
line-height: 34px;
border-radius: 18px;
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 0 15px 0;
width: 80px;
box-shadow: 0 -2px 0 0 #00abbb inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
width: 80px;
margin: 10px 0 0;
}
.cartCheckItem__cartButton::before {
content: "";
display: block;
text-indent: 0;
}
.cartCheckItem__cartButton::before {
position: relative;
display: inline-block;
top: 0px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 28px;
line-height: 1;
}
.cartCheckItem__cartButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.cartCheckItem__cartButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.cartCheckItem__cartButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.cartCheckItem__cartButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.cartCheckItem__cartButton.is-buttonCancel span {
color: #999999 !important;
}
.cartCheckItem__cartButton.is-buttonCancel span::before {
color: #999999 !important;
}
.cartCheckItem__star {
margin: 0 0 0;
}
.cartCheckItem__star:after {
content: "";
clear: both;
display: block;
}
.cartCheckItem__starList {
display: inline-block;
float: left;
margin: 0px 5px 0 0;
font-size: 20px;
line-height: 1;
}
.cartCheckItem__starList:after {
content: "";
clear: both;
display: block;
}
.cartCheckItem__starItem, .cartCheckItem__starItem--on {
position: relative;
float: left;
color: #cccccc;
}
.cartCheckItem__starItem::before, .cartCheckItem__starItem--on::before {
content: "";
display: block;
text-indent: 0;
}
.cartCheckItem__starItem::before, .cartCheckItem__starItem--on::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.cartCheckItem__starItem--on {
color: #ffb349;
}
.cartCheckItem__starNumber {
display: inline-block;
font-size: 12px;
float: left;
line-height: 1;
position: relative;
top: 8px;
color: #888888;
}
.cartAccounting {
color: #182432;
font-size: 14px;
padding: 0 40px;
margin: 60px 0 50px;
}
.cartAccounting__box {
border-radius: 6px;
background-color: #fff;
border: 1px solid #dedede;
padding: 30px 30px 15px;
box-sizing: border-box;
}
.cartAccounting__title {
font-size: 16px;
font-weight: bold;
}
.cartAccounting__subText {
font-size: 12px;
color: #888888;
margin: 16px 0 0;
}
.cartAccounting__subtotalList {
padding: 20px 0 15px;
}
.cartAccounting__subtotalList:after {
content: "";
clear: both;
display: block;
}
.cartAccounting__subtotalListBox + .cartAccounting__subtotalListBox {
border-top: 1px solid #eeeeee;
}
.cartAccounting__subtotalTerm {
float: left;
}
.cartAccounting__subtotalDescription, .cartAccounting__subtotalDescription--price {
color: #cc011b;
font-size: 16px;
font-weight: bold;
float: right;
}
.cartAccounting__subtotalDescription--price {
font-size: 20px;
}
.cartAccounting__tax {
display: inline-block;
color: rgba(27, 36, 51, 0.8);
font-size: 14px;
font-weight: normal;
}
.cartAccounting__buttonBox {
margin: 30px 0 0;
text-align: center;
}
.cartAccounting__button {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
border: 0 solid #cccccc;
color: #fff;
box-shadow: 0 -3px 0px 0px #00a2b1 inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
cursor: pointer;
width: 240px;
font-size: 16px;
margin: 0 auto;
}
.cartAccounting__button.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.cartAccounting__button.is-buttonDisabled span {
color: #bbbbbb !important;
}
.cartAccounting__button.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.cartAccounting__button.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.cartAccounting__button.is-buttonCancel span {
color: #999999 !important;
}
.cartAccounting__button.is-buttonCancel span::before {
color: #999999 !important;
}
.cartAccounting__button.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.cartAccounting__button.is-buttonDisabled span {
color: #bbbbbb !important;
}
.cartAccounting__button.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.cartAccounting__button.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.cartAccounting__button.is-buttonCancel span {
color: #999999 !important;
}
.cartAccounting__button.is-buttonCancel span::before {
color: #999999 !important;
}
.modalMypageMail {
padding: 40px;
box-sizing: border-box;
font-size: 14px;
color: #1b2433;
text-align: center;
}
.modalMypageMail__mailContentBox {
text-align: left;
border-bottom: 1px solid #dedede;
padding: 0 0 30px;
}
.modalMypageMail__inputBox {
text-align: left;
border-bottom: 1px solid #dedede;
padding: 30px 0;
}
.modalMypageMail__mailMagazineBox {
display: inline-block;
width: 365px;
padding: 30px 0;
border-bottom: 1px solid #dedede;
}
.modalMypageMail__mailAddress {
font-weight: bold;
word-break: break-all;
}
.modalMypageMail__textBox {
float: left;
}
.modalMypageMail__toggleBox {
float: right;
height: 22px;
width: 60px;
position: relative;
}
.modalMypageMail__input {
border: 1px solid #cccccc;
border-radius: 8px;
background-color: #f9f9f9;
box-shadow: inset 0px 3px 4px 0px rgba(0, 0, 0, 0.15);
height: 40px;
line-height: 40px;
width: 365px;
margin: 10px 0 0 0;
padding: 11px;
}
.modalMypageMail__input:-ms-input-placeholder {
color: #ccc;
}
.modalMypageMail__input:-webkit-input-placeholder {
color: #ccc;
}
.modalMypageMail__input:-moz-placeholder {
color: #ccc;
}
.modalMypageMail__buttonBox {
margin: 30px 0 0 0;
}
.modalMypageMail__buttonStyle {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
width: 240px;
display: block;
margin: auto;
-webkit-appearance: none;
}
.modalMypageMail__buttonStyle.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.modalMypageMail__buttonStyle.is-buttonDisabled span {
color: #bbbbbb !important;
}
.modalMypageMail__buttonStyle.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.modalMypageMail__buttonStyle.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.modalMypageMail__buttonStyle.is-buttonCancel span {
color: #999999 !important;
}
.modalMypageMail__buttonStyle.is-buttonCancel span::before {
color: #999999 !important;
}
.modalMypageMail__buttonStyle--blue {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
border: 0 solid #cccccc;
color: #fff;
box-shadow: 0 -3px 0px 0px #00a2b1 inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
cursor: pointer;
-webkit-appearance: none;
}
.modalMypageMail__buttonStyle--blue.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.modalMypageMail__buttonStyle--blue.is-buttonDisabled span {
color: #bbbbbb !important;
}
.modalMypageMail__buttonStyle--blue.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.modalMypageMail__buttonStyle--blue.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.modalMypageMail__buttonStyle--blue.is-buttonCancel span {
color: #999999 !important;
}
.modalMypageMail__buttonStyle--blue.is-buttonCancel span::before {
color: #999999 !important;
}
.modalMypageMail__buttonStyle--blue.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.modalMypageMail__buttonStyle--blue.is-buttonDisabled span {
color: #bbbbbb !important;
}
.modalMypageMail__buttonStyle--blue.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.modalMypageMail__buttonStyle--blue.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.modalMypageMail__buttonStyle--blue.is-buttonCancel span {
color: #999999 !important;
}
.modalMypageMail__buttonStyle--blue.is-buttonCancel span::before {
color: #999999 !important;
}
.modalMypageMail__buttonStyle--disable {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
width: 240px;
pointer-events: none;
display: block;
margin: auto;
-webkit-appearance: none;
}
.modalMypageMail__buttonStyle--disable span {
color: #bbbbbb !important;
}
.modalMypageMail__buttonStyle--disable span::before {
color: #bbbbbb !important;
}
.modalMypageMail__buttonStyle--cancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
-webkit-appearance: none;
}
.modalMypageMail__buttonStyle--cancel span {
color: #999999 !important;
}
.modalMypageMail__buttonStyle--cancel span::before {
color: #999999 !important;
}
.modalMypageMail__caution {
color: #b62626;
margin: 10px 0 0 0;
}
.modalMypageProductCode {
padding: 5px 0 40px;
box-sizing: border-box;
font-size: 14px;
color: #1b2433;
text-align: center;
}
.modalMypageProductCode__contentBox {
position: relative;
margin: auto;
padding: 0 100px 10px;
text-align: left;
}
.modalMypageProductCode__contentBox:after {
content: "";
clear: both;
display: block;
}
.modalMypageProductCode__titleBox {
display: inline-block;
width: -webkit-calc(82% - 6px);
width: calc(82% - 6px);
vertical-align: middle;
float: right;
}
.modalMypageProductCode__titleBox::before {
content: '';
width: 1px;
height: 0;
padding-bottom: 40%;
display: inline-block;
vertical-align: middle;
}
.modalMypageProductCode__titleBoxInner {
width: -webkit-calc(100% - 10px);
width: calc(100% - 10px);
display: inline-block;
vertical-align: middle;
}
.modalMypageProductCode__title {
font-size: 16px;
font-weight: bold;
}
.modalMypageProductCode__imageBox {
width: 100px;
position: absolute;
top: -webkit-calc(58% - 10px);
top: calc(58% - 10px);
-webkit-transform: translateY(-55%);
transform: translateY(-55%);
}
.modalMypageProductCode__imageWrapper {
position: relative;
margin: 0;
max-width: 145px;
height: 210px;
font-size: 0;
white-space: nowrap;
text-align: center;
max-width: 120px;
height: 174px;
}
.modalMypageProductCode__imageWrapper.js-imgLoading > * {
opacity: 0;
}
.modalMypageProductCode__imageWrapper.js-imgLoading .loadingIcon {
opacity: 1;
font-size: 10px;
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 1.2em;
height: 1.2em;
margin: auto;
text-indent: -9999em;
color: #d1d5d8;
background: #d1d5d8;
border-radius: 50%;
line-height: 1;
}
.modalMypageProductCode__imageWrapper.js-imgLoading .loadingIcon::before, .modalMypageProductCode__imageWrapper.js-imgLoading .loadingIcon::after {
position: absolute;
top: 0;
width: 1.2em;
height: 1.2em;
content: '';
background: #d1d5d8;
border-radius: 50%;
}
.modalMypageProductCode__imageWrapper.js-imgLoading .loadingIcon::before {
left: -2em;
}
.modalMypageProductCode__imageWrapper.js-imgLoading .loadingIcon::after {
left: 2em;
}
.modalMypageProductCode__imageWrapper::before {
content: '';
width: 1px;
height: 210px;
display: inline-block;
margin-left: -1px;
}
.modalMypageProductCode__imageWrapper::before {
height: 174px;
}
.modalMypageProductCode__image {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
display: inline-block;
min-width: 75%;
max-width: 100%;
max-height: 100%;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
}
.modalMypageProductCode__itemNoImage {
display: inline-block;
position: relative;
background: #f5f5f5 url(../materials/noimage.png) 0 0 no-repeat;
background-size: 100% 100%;
background-position: center bottom;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
width: 145px;
height: 0;
padding: 139% 0 0;
word-wrap: break-word;
white-space: normal;
line-height: 1.4;
width: 120px;
}
.modalMypageProductCode__itemNoImage.is-adult {
font-size: 14px;
}
.modalMypageProductCode__itemNoImage.is-adult::before {
content: "";
display: block;
text-indent: 0;
}
.modalMypageProductCode__itemNoImage.is-adult div {
top: -webkit-calc(50% - 0);
top: calc(50% - 0);
padding: 10px 0 40px;
}
.modalMypageProductCode__itemNoImage.is-adult::before {
position: absolute;
display: inline-block;
left: 0;
right: 0;
top: 55px;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #c0c0c0;
font-size: 28px;
z-index: 1;
text-align: center;
}
.modalMypageProductCode__itemNoImageInner {
position: absolute;
left: 5px;
right: 5px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #888;
background: #f5f5f5;
padding: 10px 0;
}
.modalMypageProductCode__noImageTitle {
font-size: 12px;
font-weight: bold;
padding: 0 0 5px;
max-height: 2.8em;
overflow: hidden;
}
.modalMypageProductCode__noImageAuthor {
font-size: 12px;
max-height: 2.8em;
overflow: hidden;
}
.modalMypageProductCode__itemlist {
border-top: 1px solid #dedede;
}
.modalMypageProductCode__listInnner {
position: relative;
margin: auto;
padding: 30px 100px;
border-bottom: 1px solid #dedede;
text-align: left;
}
.modalMypageProductCode__textBox {
width: 450px;
}
.modalMypageProductCode__itemTitle {
padding: 0 0 0;
}
.modalMypageProductCode__itemText {
font-size: 16px;
font-weight: bold;
}
.modalMypageProductCode__copyButton {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
position: absolute;
height: 30px;
right: 100px;
top: 0;
bottom: 0;
font-size: 14px;
margin: auto;
line-height: 1.2;
}
.modalMypageProductCode__copyButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.modalMypageProductCode__copyButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.modalMypageProductCode__copyButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.modalMypageProductCode__copyButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.modalMypageProductCode__copyButton.is-buttonCancel span {
color: #999999 !important;
}
.modalMypageProductCode__copyButton.is-buttonCancel span::before {
color: #999999 !important;
}
.modalMypageDeviceUse {
padding: 40px 0;
box-sizing: border-box;
font-size: 14px;
color: #1b2433;
text-align: center;
}
.modalMypageDeviceUse__contentTitleBox {
width: 480px;
margin: auto;
text-align: left;
}
.modalMypageDeviceUse__contentTitleBox:after {
content: "";
clear: both;
display: block;
}
.modalMypageDeviceUse__contentBox {
width: 480px;
margin: auto;
padding: 0 0 20px;
text-align: left;
}
.modalMypageDeviceUse__contentBox:after {
content: "";
clear: both;
display: block;
}
.modalMypageDeviceUse__mainTitle {
font-size: 15px;
color: #888888;
font-weight: bold;
margin: 0 0 40px;
}
.modalMypageDeviceUse__deviceText {
font-size: 14px;
height: 38px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 280px;
}
.modalMypageDeviceUse__title {
color: #888888;
}
.modalMypageDeviceUse__text {
color: #888888;
}
.modalMypageDeviceUse__deleteText {
float: left;
line-height: 28px;
}
.modalMypageDeviceUse__confirmLink {
color: #ab8e48;
font-size: 12px;
float: right;
}
.modalMypageDeviceUse__confirmLink::after {
display: inline-block;
content: '';
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 9px;
height: 9px;
margin: 0 5px;
}
.modalMypageDeviceUse__devicelist {
width: 480px;
margin: auto;
border-top: 1px solid #dedede;
}
.modalMypageDeviceUse__listInnner {
position: relative;
padding: 20px 0;
border-bottom: 1px solid #dedede;
text-align: left;
}
.modalMypageDeviceUse__listInnner:after {
content: "";
clear: both;
display: block;
}
.modalMypageDeviceUse__deviceBox {
display: table;
width: 480px;
background: #f4f6f8;
padding: 20px 20px;
}
.modalMypageDeviceUse__inputBox {
display: table-cell;
vertical-align: middle;
}
.modalMypageDeviceUse__buttonBox {
display: table-cell;
vertical-align: middle;
}
.modalMypageDeviceUse__deviceContentBox {
position: relative;
margin: 5px 0 0;
padding: 0 20px 0 0;
text-align: right;
}
.modalMypageDeviceUse__deviceContentBox:after {
content: "";
clear: both;
display: block;
}
.modalMypageDeviceUse__selectBoxButton {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
width: 90px;
cursor: pointer;
}
.modalMypageDeviceUse__selectBoxButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.modalMypageDeviceUse__selectBoxButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.modalMypageDeviceUse__selectBoxButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.modalMypageDeviceUse__selectBoxButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.modalMypageDeviceUse__selectBoxButton.is-buttonCancel span {
color: #999999 !important;
}
.modalMypageDeviceUse__selectBoxButton.is-buttonCancel span::before {
color: #999999 !important;
}
.modalMypageDeviceUse__cancelBoxButton {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
width: 110px;
margin-left: 5px;
cursor: pointer;
}
.modalMypageDeviceUse__cancelBoxButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.modalMypageDeviceUse__cancelBoxButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.modalMypageDeviceUse__cancelBoxButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.modalMypageDeviceUse__cancelBoxButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.modalMypageDeviceUse__cancelBoxButton.is-buttonCancel span {
color: #999999 !important;
}
.modalMypageDeviceUse__cancelBoxButton.is-buttonCancel span::before {
color: #999999 !important;
}
.modalMypageDeviceUse__itemText {
font-size: 16px;
font-weight: bold;
}
.modalMypageDeviceUse__editButton {
position: relative;
font-size: 12px;
line-height: 1;
display: inline-block;
color: #888888;
}
.modalMypageDeviceUse__editButton::before {
content: "";
display: block;
text-indent: 0;
}
.modalMypageDeviceUse__editButton::before {
position: absolute;
top: 30%;
left: -20px;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
margin: auto 0;
font-size: 16px;
width: 16px;
height: 16px;
color: #888888;
}
.modalMypageDeviceUse__buttonRight, .modalMypageDeviceUse__buttonRight--iconEdit, .modalMypageDeviceUse__buttonRight--iconEditYellow {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
cursor: pointer;
width: 90px;
float: right;
padding: 7px 10px 7px 26px;
}
.modalMypageDeviceUse__buttonRight.is-buttonDisabled, .is-buttonDisabled.modalMypageDeviceUse__buttonRight--iconEdit, .is-buttonDisabled.modalMypageDeviceUse__buttonRight--iconEditYellow {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.modalMypageDeviceUse__buttonRight.is-buttonDisabled span, .is-buttonDisabled.modalMypageDeviceUse__buttonRight--iconEdit span, .is-buttonDisabled.modalMypageDeviceUse__buttonRight--iconEditYellow span {
color: #bbbbbb !important;
}
.modalMypageDeviceUse__buttonRight.is-buttonDisabled span::before, .is-buttonDisabled.modalMypageDeviceUse__buttonRight--iconEdit span::before, .is-buttonDisabled.modalMypageDeviceUse__buttonRight--iconEditYellow span::before {
color: #bbbbbb !important;
}
.modalMypageDeviceUse__buttonRight.is-buttonCancel, .is-buttonCancel.modalMypageDeviceUse__buttonRight--iconEdit, .is-buttonCancel.modalMypageDeviceUse__buttonRight--iconEditYellow {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.modalMypageDeviceUse__buttonRight.is-buttonCancel span, .is-buttonCancel.modalMypageDeviceUse__buttonRight--iconEdit span, .is-buttonCancel.modalMypageDeviceUse__buttonRight--iconEditYellow span {
color: #999999 !important;
}
.modalMypageDeviceUse__buttonRight.is-buttonCancel span::before, .is-buttonCancel.modalMypageDeviceUse__buttonRight--iconEdit span::before, .is-buttonCancel.modalMypageDeviceUse__buttonRight--iconEditYellow span::before {
color: #999999 !important;
}
.modalMypageDeviceUse__buttonRight--iconEdit::before, .modalMypageDeviceUse__buttonRight--iconEditYellow::before {
content: "";
display: block;
text-indent: 0;
}
.modalMypageDeviceUse__buttonRight--iconEdit::before, .modalMypageDeviceUse__buttonRight--iconEditYellow::before {
position: absolute;
display: inline-block;
top: 4px;
margin: auto;
left: 18px;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 16px;
line-height: 1;
}
.modalMypageDeviceUse__buttonRight--iconEditYellow {
background: #fff;
border: 1px solid #cccccc;
box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.1);
}
.modalMypageDeviceUse__terminal {
display: inline-block;
color: #ab8e48;
padding: 0 0 0 18px;
position: relative;
line-height: 1.5;
margin: 0 40px 0 0;
cursor: pointer;
}
.modalMypageDeviceUse__terminal::before {
content: "";
display: block;
text-indent: 0;
}
.modalMypageDeviceUse__terminal::before {
position: absolute;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
margin: auto 0;
height: 1.1em;
font-size: 16px;
line-height: 1;
left: 0;
top: 0px;
}
.modalMypageDeviceUse__delete {
display: inline-block;
color: #ab8e48;
padding: 0 0 0 18px;
position: relative;
line-height: 1.5;
cursor: pointer;
}
.modalMypageDeviceUse__delete::before {
content: "";
display: block;
text-indent: 0;
}
.modalMypageDeviceUse__delete::before {
position: absolute;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
margin: auto 0;
height: 1.1em;
font-size: 16px;
line-height: 1;
left: 0;
top: 0px;
}
.modalMypageDeviceUse__formInputText {
background-color: #fff;
box-shadow: inset 0px 3px 4px 0px rgba(0, 0, 0, 0.15);
width: 330px;
height: 38px;
border-radius: 8px;
border: 1px solid #cccccc;
padding: 11px;
margin: 0 20px 0 0;
box-sizing: border-box;
}
.modalMypageDeviceUse__balloonBox {
display: none;
margin: 20px 0 0 0;
position: relative;
background: #ffffff;
border: 1px solid #dedede;
padding: 25px;
}
.modalMypageDeviceUse__balloonBox::before {
bottom: 100%;
right: 185px;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(222, 222, 222, 0);
border-bottom-color: #dedede;
border-width: 16px;
margin-left: -53px;
}
.modalMypageDeviceUse__balloonBox::after {
bottom: 100%;
right: 186px;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
border-width: 15px;
margin-left: -52px;
}
.modalMypageDeviceUse__balloonBoxError {
display: none;
margin: 20px 0 20px 0;
position: relative;
background: #ffffff;
border: 1px solid #dedede;
padding: 15px 20px;
}
.modalMypageDeviceUse__balloonBoxError::before {
bottom: 100%;
right: 70px;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(222, 222, 222, 0);
border-bottom-color: #dedede;
border-width: 16px;
margin-left: -53px;
}
.modalMypageDeviceUse__balloonBoxError::after {
bottom: 100%;
right: 71px;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
border-width: 15px;
margin-left: -52px;
}
.modalMypageDeviceUse__balloonBoxInner {
position: relative;
}
.modalMypageDeviceUse__balloonBoxInner:after {
content: "";
clear: both;
display: block;
}
.modalMypageDeviceUse__deviceDetailList {
margin: 0;
}
.modalMypageDeviceUse__deviceDetailList:after {
content: "";
clear: both;
display: block;
}
.modalMypageDeviceUse__deviceItem {
float: left;
}
.modalMypageDeviceUse__deviceContent {
float: right;
}
.modalMypageDeviceUse__errorBox {
display: none;
border: 1px solid #cc0000;
background: #fff0f0;
padding: 15px 20px;
margin: 20px 0 0;
border-radius: 6px;
}
.modalMypageDeviceUse__warning {
color: #cc0000;
text-align: center;
}
.modalMypageDeviceUse__messageBox {
padding: 50px 20px;
border-top: 1px solid #dedede;
}
.modalMypageDeviceUse__message {
font-size: 16px;
font-weight: bold;
}
.modalMypageDeauthorize {
padding: 40px 0;
box-sizing: border-box;
font-size: 14px;
color: #1b2433;
text-align: center;
}
.modalMypageDeauthorize__attestationBox {
border-bottom: 1px solid #dedede;
padding: 0px 40px 40px;
text-align: left;
}
.modalMypageDeauthorize__cancellationBox {
padding: 40px 40px 10px;
text-align: left;
}
.modalMypageDeauthorize__itemTitle {
font-size: 16px;
font-weight: bold;
margin: 0 0 30px;
}
.modalMypageDeauthorize__buttonBox {
margin: 30px 0 0 0;
}
.modalMypageDeauthorize__button {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
width: 240px;
margin: auto;
}
.modalMypageDeauthorize__button.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.modalMypageDeauthorize__button.is-buttonDisabled span {
color: #bbbbbb !important;
}
.modalMypageDeauthorize__button.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.modalMypageDeauthorize__button.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.modalMypageDeauthorize__button.is-buttonCancel span {
color: #999999 !important;
}
.modalMypageDeauthorize__button.is-buttonCancel span::before {
color: #999999 !important;
}
.modalMypageDeauthorize__button--active {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
width: 240px;
margin: auto;
}
.modalMypageDeauthorize__button--active.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.modalMypageDeauthorize__button--active.is-buttonDisabled span {
color: #bbbbbb !important;
}
.modalMypageDeauthorize__button--active.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.modalMypageDeauthorize__button--active.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.modalMypageDeauthorize__button--active.is-buttonCancel span {
color: #999999 !important;
}
.modalMypageDeauthorize__button--active.is-buttonCancel span::before {
color: #999999 !important;
}
.modalMypageDeauthorize__caution {
color: #b62626;
margin: 15px 0 0 0;
text-indent: -1em;
margin-left: 1em;
}
.mypageNotification {
position: relative;
margin: 0 80px 60px;
padding: 60px 0 0;
}
.mypageNotification__title {
font-size: 20px;
}
.mypageNotification__list {
margin: 40px 0;
border-top: 1px solid #eee;
}
.mypageNotification__icon, .mypageNotification__icon--color01, .mypageNotification__icon--color02, .mypageNotification__icon--color03, .mypageNotification__icon--color04 {
position: absolute;
left: 20px;
top: 0;
bottom: 0;
background-color: #fff;
font-size: 12px;
font-weight: bold;
margin: auto 0;
line-height: 27px;
height: 27px;
border-radius: 13px;
text-align: center;
width: 90px;
}
.mypageNotification__icon--color01 {
color: #7e6996;
border: 1px solid #7e6996;
}
.mypageNotification__icon--color02 {
color: #ca5880;
border: 1px solid #ca5880;
}
.mypageNotification__icon--color03 {
color: #4eaaaa;
border: 1px solid #4eaaaa;
}
.mypageNotification__icon--color04 {
color: #cda76b;
border: 1px solid #cda76b;
}
.mypageNotification__infoDate {
position: absolute;
left: 135px;
top: 0;
bottom: 0;
font-size: 14px;
height: 1.6em;
line-height: 1.6;
margin: auto 0;
}
.mypageNotification__infoText {
padding: 20px 40px 20px 230px;
font-size: 14px;
}
.mypageNotification__listBox {
position: relative;
border-bottom: 1px solid #eee;
}
.mypageNotification__noneBox {
padding: 150px 0 30px;
text-align: center;
border-top: 1px solid #eeeeee;
margin: 30px 0 0;
}
.mypageNotification__noneText {
position: relative;
top: 0;
left: 0;
color: #d5d8de;
font-size: 16px;
}
.mypageNotification__noneText::before {
content: "";
display: block;
text-indent: 0;
}
.mypageNotification__noneText::before {
position: relative;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
font-size: 100px;
color: #cbd1d7;
top: -50px;
left: 0;
text-align: center;
}
.mypageNotification__loadingWrapper {
position: relative;
height: 100px;
}
.mypageNotification__loading {
margin: 0 auto;
width: 64px;
height: 124px;
padding: 30px 0;
}
.mypageNotification__loadingBody {
color: #c3a358;
font-size: 64px;
text-indent: -9999em;
overflow: hidden;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: pageLoading 1.7s infinite ease;
animation: pageLoading 1.7s infinite ease;
position: absolute;
left: 50%;
margin: 0 0 0 -32px;
}
.mypageNotification__infoLink {
color: #ab8e48;
}
.mypageReview {
color: #182432;
font-size: 14px;
}
.mypageReview__inner {
padding: 60px 70px 0;
}
.mypageReview__titleBox {
height: 75px;
position: relative;
border-bottom: 1px solid #dedede;
}
.mypageReview__title {
font-size: 20px;
font-weight: bold;
margin: 0;
}
.mypageReview__referenceBox {
position: absolute;
top: 10px;
right: 0;
font-size: 14px;
white-space: nowrap;
}
.mypageReview__referenceBox::before {
content: "";
display: block;
text-indent: 0;
}
.mypageReview__referenceBox::before {
position: absolute;
top: -3px;
left: -28px;
margin: auto 0;
height: 1.1em;
font-size: 26px;
color: #1b2433;
}
.mypageReview__referenceNum {
position: relative;
font-size: 24px;
line-height: 1;
padding: 0 0 0 30px;
font-weight: bold;
}
.mypageReview__referenceNum::before {
content: ':';
position: absolute;
top: 12px;
left: 14px;
font-size: 14px;
font-weight: normal;
}
.mypageReview__likeBox {
position: absolute;
top: 0;
right: 0;
}
.mypageReview__like {
width: 30px;
height: 30px;
border: 1px solid #cdcdcd;
border-radius: 50%;
position: relative;
display: inline-block;
color: #c2a359;
line-height: 1;
cursor: pointer;
background-color: #fff;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
}
.mypageReview__like::before {
content: "";
display: block;
text-indent: 0;
}
.mypageReview__like::before {
position: absolute;
top: 48%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: auto 0;
height: 1.1em;
font-size: 20px;
}
.mypageReview__like.is-mine {
pointer-events: none;
color: #bbbbbb;
background-color: #f5f5f5;
box-shadow: 0 -2px 0 0 transparent inset;
}
.mypageReview__like.is-checked {
width: 30px;
height: 30px;
border: 1px solid #cdcdcd;
border-radius: 50%;
position: relative;
display: inline-block;
color: #c2a359;
line-height: 1;
cursor: pointer;
background-color: #fff;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #bbbbbb;
background-color: #f5f5f5;
box-shadow: 0 -2px 0 0 transparent inset;
}
.mypageReview__like.is-checked::before {
content: "";
display: block;
text-indent: 0;
}
.mypageReview__like.is-checked::before {
position: absolute;
top: 48%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: auto 0;
height: 1.1em;
font-size: 20px;
}
.mypageReview__like.is-checked.is-mine {
pointer-events: none;
color: #bbbbbb;
background-color: #f5f5f5;
box-shadow: 0 -2px 0 0 transparent inset;
}
.mypageReview__likeBalloon {
position: relative;
background: #f5f5f5;
border: 1px solid #cccccc;
border-radius: 5px;
font-size: 16px;
padding: 0px 8px;
display: inline-block;
color: #1b2433;
top: -10px;
margin: 0 0 0 5px;
}
.mypageReview__likeBalloon::after {
right: 100%;
top: 50%;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-right-color: #f5f5f5;
border-width: 5px;
margin-top: -5px;
}
.mypageReview__likeBalloon::before {
right: 100%;
top: 50%;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(204, 204, 204, 0);
border-right-color: #cccccc;
border-width: 7px;
margin-top: -7px;
}
.mypageReview__reviewItemList {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
}
.mypageReview__reviewItem {
padding: 40px 0 40px;
box-sizing: border-box;
border-bottom: 1px solid #dedede;
width: -webkit-calc(50% - 20px);
width: calc(50% - 20px);
display: inline-block;
margin: 0 20px 0 0;
position: relative;
}
.mypageReview__reviewItem:after {
content: "";
clear: both;
display: block;
}
.mypageReview__reviewItem:nth-child(2n) {
float: right;
margin: 0 0 0 20px;
}
.mypageReview__reviewItemBox {
width: 100%;
}
.mypageReview__reviewItemBox:after {
content: "";
clear: both;
display: block;
}
.mypageReview__reviewItemLink {
display: inline-block;
}
.mypageReview__reviewItemLink:after {
content: "";
clear: both;
display: block;
}
.mypageReview__imageWrapper {
position: relative;
margin: 0;
max-width: 145px;
height: 210px;
font-size: 0;
white-space: nowrap;
text-align: center;
width: 94px;
height: auto;
float: left;
}
.mypageReview__imageWrapper.js-imgLoading > * {
opacity: 0;
}
.mypageReview__imageWrapper.js-imgLoading .loadingIcon {
opacity: 1;
font-size: 10px;
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 1.2em;
height: 1.2em;
margin: auto;
text-indent: -9999em;
color: #d1d5d8;
background: #d1d5d8;
border-radius: 50%;
line-height: 1;
}
.mypageReview__imageWrapper.js-imgLoading .loadingIcon::before, .mypageReview__imageWrapper.js-imgLoading .loadingIcon::after {
position: absolute;
top: 0;
width: 1.2em;
height: 1.2em;
content: '';
background: #d1d5d8;
border-radius: 50%;
}
.mypageReview__imageWrapper.js-imgLoading .loadingIcon::before {
left: -2em;
}
.mypageReview__imageWrapper.js-imgLoading .loadingIcon::after {
left: 2em;
}
.mypageReview__imageWrapper::before {
content: '';
width: 1px;
height: 210px;
display: inline-block;
margin-left: -1px;
}
.mypageReview__imageWrapper::before {
display: none;
}
.mypageReview__imageWrapper .mypageReview__reviewItemLink {
display: block;
}
.mypageReview__bookImage {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
display: inline-block;
min-width: 75%;
max-width: 100%;
max-height: 100%;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
}
.mypageReview__itemNoImage {
display: inline-block;
position: relative;
background: #f5f5f5 url(../materials/noimage.png) 0 0 no-repeat;
background-size: 100% 100%;
background-position: center bottom;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
width: 145px;
height: 0;
padding: 139% 0 0;
word-wrap: break-word;
white-space: normal;
line-height: 1.4;
width: 100%;
height: 0;
padding-top: 139%;
}
.mypageReview__itemNoImage.is-adult {
font-size: 14px;
}
.mypageReview__itemNoImage.is-adult::before {
content: "";
display: block;
text-indent: 0;
}
.mypageReview__itemNoImage.is-adult div {
top: -webkit-calc(50% - 0);
top: calc(50% - 0);
padding: 10px 0 40px;
}
.mypageReview__itemNoImage.is-adult::before {
position: absolute;
display: inline-block;
left: 0;
right: 0;
top: 55px;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #c0c0c0;
font-size: 28px;
z-index: 1;
text-align: center;
}
.mypageReview__itemNoImageInner {
position: absolute;
left: 5px;
right: 5px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #888;
background: #f5f5f5;
padding: 10px 0;
}
.mypageReview__noImageTitle {
font-size: 12px;
font-weight: bold;
padding: 0 0 5px;
max-height: 2.8em;
overflow: hidden;
}
.mypageReview__noImageAuthor {
font-size: 12px;
max-height: 2.8em;
overflow: hidden;
}
.mypageReview__reviewTitle {
font-weight: bold;
padding: 0 75px 0 0;
word-wrap: break-word;
}
.mypageReview__reviewItemNameBox {
display: inline-block;
margin: 0 0 0 16px;
width: -webkit-calc(100% - 110px);
width: calc(100% - 110px);
vertical-align: middle;
}
.mypageReview__reviewItemNameBox::before {
content: '';
width: 1px;
padding-bottom: 140px;
display: inline-block;
}
.mypageReview__reviewItemNameBoxInner {
width: -webkit-calc(100% - 7px);
width: calc(100% - 7px);
display: inline-block;
vertical-align: middle;
position: relative;
padding: 0 25px 0 0;
}
.mypageReview__reviewItemName {
font-size: 16px;
font-weight: bold;
word-wrap: break-word;
}
.mypageReview__reviewAutherName {
font-size: 14px;
color: #888888;
}
.mypageReview__reviewAutherName .mypageReview__reviewItemLink {
color: #888888;
}
.mypageReview__reviewBox {
width: 100%;
margin: 24px 0 0 0;
position: relative;
padding: 0 0 30px;
}
.mypageReview__reviewText {
margin: 10px 0 0 0;
position: relative;
word-wrap: break-word;
}
.mypageReview__reviewText:after {
content: "";
clear: both;
display: block;
}
.mypageReview__reviewTextMore {
display: none;
}
.mypageReview__starBox {
display: block;
margin: 5px 0 0 0;
}
.mypageReview__starBox:after {
content: "";
clear: both;
display: block;
}
.mypageReview__starList {
display: inline-block;
float: left;
margin: 0 5px 0 0;
font-size: 20px;
line-height: 1;
}
.mypageReview__starList:after {
content: "";
clear: both;
display: block;
}
.mypageReview__starItem {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
}
.mypageReview__starItem::before {
content: "";
display: block;
text-indent: 0;
}
.mypageReview__starItem::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.mypageReview__starItem--on {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
color: #ffb349;
}
.mypageReview__starItem--on::before {
content: "";
display: block;
text-indent: 0;
}
.mypageReview__starItem--on::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.mypageReview__starItem--half {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
}
.mypageReview__starItem--half::before {
content: "";
display: block;
text-indent: 0;
}
.mypageReview__starItem--half::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.mypageReview__starItem--half::after {
content: "";
display: block;
text-indent: 0;
}
.mypageReview__starItem--half::after {
color: #ffb349;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
right: 50%;
overflow: hidden;
}
.mypageReview__readMore {
color: #ab8e48;
position: relative;
bottom: 0;
right: 0;
cursor: pointer;
padding: 0 0 0 0;
width: 90px;
box-sizing: border-box;
display: inline-block;
}
.mypageReview__readMore::after {
content: '';
width: 0;
height: 0;
position: absolute;
right: 0;
top: 7px;
border: 5px solid transparent;
border-top: 8px solid rgba(171, 142, 72, 0.5);
}
.mypageReview__date {
color: #888888;
font-size: 14px;
margin: 10px 0 0;
position: absolute;
bottom: 0;
left: 0;
}
.mypageReview__delete {
position: absolute;
bottom: 0px;
right: 0px;
}
.mypageReview__deleteText {
position: relative;
font-size: 12px;
line-height: 1;
display: inline-block;
color: #888888;
}
.mypageReview__deleteText::before {
content: "";
display: block;
text-indent: 0;
}
.mypageReview__deleteText::before {
position: absolute;
top: 30%;
left: -20px;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
margin: auto 0;
font-size: 16px;
width: 16px;
height: 16px;
color: #888888;
}
.mypageReview__edit {
position: absolute;
bottom: 0;
right: 64px;
}
.mypageReview__editText {
position: relative;
font-size: 12px;
line-height: 1;
display: inline-block;
color: #888888;
}
.mypageReview__editText::before {
content: "";
display: block;
text-indent: 0;
}
.mypageReview__editText::before {
position: absolute;
top: 30%;
left: -20px;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
margin: auto 0;
font-size: 16px;
width: 16px;
height: 16px;
color: #888888;
}
.mypageReview__pagerBox .pager {
margin: 60px 0 60px;
}
.mypageReview__noReview {
padding: 260px 0 160px;
text-align: center;
}
.mypageReview__noReviewText {
position: relative;
font-size: 20px;
color: #d5d8de;
}
.mypageReview__noReviewText::before {
content: "";
display: block;
text-indent: 0;
}
.mypageReview__noReviewText::before {
position: absolute;
top: -85px;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
margin: auto 0;
font-size: 120px;
color: #e5e8ee;
}
.mypageNotification {
position: relative;
margin: 0 80px 60px;
padding: 60px 0 0;
}
.mypageNotification__title {
font-size: 20px;
}
.mypageNotification__list {
margin: 40px 0;
border-top: 1px solid #eee;
}
.mypageNotification__icon, .mypageNotification__icon--color01, .mypageNotification__icon--color02, .mypageNotification__icon--color03, .mypageNotification__icon--color04 {
position: absolute;
left: 20px;
top: 0;
bottom: 0;
background-color: #fff;
font-size: 12px;
font-weight: bold;
margin: auto 0;
line-height: 27px;
height: 27px;
border-radius: 13px;
text-align: center;
width: 90px;
}
.mypageNotification__icon--color01 {
color: #7e6996;
border: 1px solid #7e6996;
}
.mypageNotification__icon--color02 {
color: #ca5880;
border: 1px solid #ca5880;
}
.mypageNotification__icon--color03 {
color: #4eaaaa;
border: 1px solid #4eaaaa;
}
.mypageNotification__icon--color04 {
color: #cda76b;
border: 1px solid #cda76b;
}
.mypageNotification__infoDate {
position: absolute;
left: 135px;
top: 0;
bottom: 0;
font-size: 14px;
height: 1.6em;
line-height: 1.6;
margin: auto 0;
}
.mypageNotification__infoText {
padding: 20px 40px 20px 230px;
font-size: 14px;
}
.mypageNotification__listBox {
position: relative;
border-bottom: 1px solid #eee;
}
.mypageNotification__noneBox {
padding: 150px 0 30px;
text-align: center;
border-top: 1px solid #eeeeee;
margin: 30px 0 0;
}
.mypageNotification__noneText {
position: relative;
top: 0;
left: 0;
color: #d5d8de;
font-size: 16px;
}
.mypageNotification__noneText::before {
content: "";
display: block;
text-indent: 0;
}
.mypageNotification__noneText::before {
position: relative;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
font-size: 100px;
color: #cbd1d7;
top: -50px;
left: 0;
text-align: center;
}
.mypageNotification__loadingWrapper {
position: relative;
height: 100px;
}
.mypageNotification__loading {
margin: 0 auto;
width: 64px;
height: 124px;
padding: 30px 0;
}
.mypageNotification__loadingBody {
color: #c3a358;
font-size: 64px;
text-indent: -9999em;
overflow: hidden;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: pageLoading 1.7s infinite ease;
animation: pageLoading 1.7s infinite ease;
position: absolute;
left: 50%;
margin: 0 0 0 -32px;
}
.mypageNotification__infoLink {
color: #ab8e48;
}
.mypageKeepList {
padding-bottom: 1px;
}
.mypageKeepList__inner {
padding: 60px 80px 0;
}
.mypageKeepList__listTitleBox {
margin: 0 0 0;
position: relative;
}
.mypageKeepList__listNoneTitleBox {
margin: 0 0 20px;
}
.mypageKeepList__listTitle {
font-size: 20px;
}
.mypageKeepList__listNoneBox, .mypageKeepList__listNoneBox--noBorder {
padding: 150px 0 100px;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
text-align: center;
}
.mypageKeepList__listNoneBox:after, .mypageKeepList__listNoneBox--noBorder:after {
content: "";
clear: both;
display: block;
}
.mypageKeepList__listNoneBox--noBorder {
border-top: 0px solid #eeeeee;
border-bottom: 0px solid #eeeeee;
}
.mypageKeepList__noneText {
position: relative;
top: 0;
left: 0;
color: #d5d8de;
font-size: 20px;
}
.mypageKeepList__noneText::before {
content: "";
display: block;
text-indent: 0;
}
.mypageKeepList__noneText::before {
position: relative;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
font-size: 120px;
color: #e5e8ee;
top: -85px;
left: 0;
}
.mypageKeepList__noneUser {
position: relative;
top: 0;
left: 0;
color: #cbd1d7;
font-size: 16px;
}
.mypageKeepList__noneUser::before {
content: "";
display: block;
text-indent: 0;
}
.mypageKeepList__noneUser::before {
position: relative;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
font-size: 120px;
color: #cbd1d7;
top: -65px;
left: 0;
}
.mypageKeepList__noneBook {
position: relative;
top: 0;
left: 0;
color: #cbd1d7;
font-size: 16px;
}
.mypageKeepList__noneBook::before {
content: "";
display: block;
text-indent: 0;
}
.mypageKeepList__noneBook::before {
position: relative;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
font-size: 120px;
color: #cbd1d7;
top: -55px;
left: 0;
}
.mypageKeepList__listIcon {
position: relative;
color: #e5e8ee;
}
.mypageKeepList__listIcon::before {
content: "";
display: block;
text-indent: 0;
}
.mypageKeepList__listIcon::before {
position: absolute;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
font-size: 70px;
top: 0;
left: 48%;
}
.mypageKeepList__listBox {
display: block;
margin: 40px 0 0;
}
.mypageKeepList__list {
margin: 0 0 0 -40px;
font-size: 0;
}
.mypageKeepList__list:after {
content: "";
clear: both;
display: block;
}
.mypageKeepList__listItem {
line-height: 1;
display: inline-block;
margin: 0 0 50px 0;
padding: 0 0 0 40px;
width: 49.9%;
vertical-align: top;
width: 33.3%;
}
.mypageKeepList__listItem:after {
content: "";
clear: both;
display: block;
}
.mypageKeepList__imageBox {
float: left;
padding: 0;
margin: 0 0 0 -100%;
width: 120px;
}
.mypageKeepList__imageWrapper {
position: relative;
margin: 0;
max-width: 145px;
height: 210px;
font-size: 0;
white-space: nowrap;
text-align: center;
max-width: 120px;
height: 174px;
margin: 0 0 8px;
}
.mypageKeepList__imageWrapper.js-imgLoading > * {
opacity: 0;
}
.mypageKeepList__imageWrapper.js-imgLoading .loadingIcon {
opacity: 1;
font-size: 10px;
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 1.2em;
height: 1.2em;
margin: auto;
text-indent: -9999em;
color: #d1d5d8;
background: #d1d5d8;
border-radius: 50%;
line-height: 1;
}
.mypageKeepList__imageWrapper.js-imgLoading .loadingIcon::before, .mypageKeepList__imageWrapper.js-imgLoading .loadingIcon::after {
position: absolute;
top: 0;
width: 1.2em;
height: 1.2em;
content: '';
background: #d1d5d8;
border-radius: 50%;
}
.mypageKeepList__imageWrapper.js-imgLoading .loadingIcon::before {
left: -2em;
}
.mypageKeepList__imageWrapper.js-imgLoading .loadingIcon::after {
left: 2em;
}
.mypageKeepList__imageWrapper::before {
content: '';
width: 1px;
height: 210px;
display: inline-block;
margin-left: -1px;
}
.mypageKeepList__imageWrapper::before {
height: 174px;
}
.mypageKeepList__image {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
display: inline-block;
min-width: 75%;
max-width: 100%;
max-height: 100%;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
}
.mypageKeepList__itemNoImage {
display: inline-block;
position: relative;
background: #f5f5f5 url(../materials/noimage.png) 0 0 no-repeat;
background-size: 100% 100%;
background-position: center bottom;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
width: 145px;
height: 0;
padding: 139% 0 0;
word-wrap: break-word;
white-space: normal;
line-height: 1.4;
width: 120px;
}
.mypageKeepList__itemNoImage.is-adult {
font-size: 14px;
}
.mypageKeepList__itemNoImage.is-adult::before {
content: "";
display: block;
text-indent: 0;
}
.mypageKeepList__itemNoImage.is-adult div {
top: -webkit-calc(50% - 0);
top: calc(50% - 0);
padding: 10px 0 40px;
}
.mypageKeepList__itemNoImage.is-adult::before {
position: absolute;
display: inline-block;
left: 0;
right: 0;
top: 55px;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #c0c0c0;
font-size: 28px;
z-index: 1;
text-align: center;
}
.mypageKeepList__itemNoImageInner {
position: absolute;
left: 5px;
right: 5px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #888;
background: #f5f5f5;
padding: 10px 0;
}
.mypageKeepList__noImageTitle {
font-size: 12px;
font-weight: bold;
padding: 0 0 5px;
max-height: 2.8em;
overflow: hidden;
}
.mypageKeepList__noImageAuthor {
font-size: 12px;
max-height: 2.8em;
overflow: hidden;
}
.mypageKeepList__infoBox {
float: left;
text-align: left;
font-size: 14px;
width: 100%;
padding: 0 0 0 140px;
line-height: 1.6em;
}
.mypageKeepList__discount {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
position: absolute;
left: -4px;
bottom: 10px;
height: 24px;
line-height: 24px;
color: #fff;
padding: 0 8px;
display: block;
background: #c01d20;
font-size: 12px;
font-weight: bold;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
white-space: nowrap;
z-index: 3;
}
.mypageKeepList__discount::before {
content: '';
position: absolute;
right: -6px;
width: 0;
height: 0;
top: 0;
border-style: solid;
border-width: 12px 7px 12px 0;
border-color: #c01d20 transparent #c01d20 #c01d20;
}
.mypageKeepList__discount::after {
content: '';
position: absolute;
right: -5px;
bottom: 0;
width: 5px;
height: 4px;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
}
.mypageKeepList__discount.is-goldBadge {
background: #d4b15c;
}
.mypageKeepList__discount.is-goldBadge::before {
border-color: #d4b15c transparent #d4b15c #d4b15c;
}
.mypageKeepList__title {
font-size: 16px;
font-weight: bold;
word-wrap: break-word;
}
.mypageKeepList__text {
color: #888;
font-size: 14px;
}
.mypageKeepList__text .mypageKeepList__link {
color: #888;
display: inline-block;
}
.mypageKeepList__link {
display: inline-block;
}
.mypageKeepList__link:after {
content: "";
clear: both;
display: block;
}
.mypageKeepList__priceBox {
margin: 10px 0 0;
margin: 0 0 0;
}
.mypageKeepList__price {
font-size: 18px;
color: #c01200;
position: relative;
}
.mypageKeepList__tax {
color: #888;
font-size: 14px;
font-weight: normal;
font-size: 12px;
}
.is-negative .mypageKeepList__tax {
color: rgba(20, 35, 52, 0.4);
font-size: 8px;
margin: 5px 0 0;
}
.is-negative .mypageKeepList__tax {
color: rgba(20, 35, 52, 0.4);
font-size: 8px;
margin: 5px 0 0;
}
.mypageKeepList__paymentBox {
width: 170px;
}
.mypageKeepList__delete {
position: relative;
font-size: 12px;
line-height: 1;
display: inline-block;
color: #888888;
margin: 0 0 0 20px;
}
.mypageKeepList__delete::before {
content: "";
display: block;
text-indent: 0;
}
.mypageKeepList__delete::before {
position: absolute;
top: 30%;
left: -20px;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
margin: auto 0;
font-size: 16px;
width: 16px;
height: 16px;
color: #888888;
}
.mypageKeepList__buttonRight, .mypageKeepList__buttonRight--iconBuy, .mypageKeepList__buttonRight--iconBuyBlue, .mypageKeepList__buttonRight--iconCart {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
height: 36px;
line-height: 36px;
border-radius: 18px;
font-size: 12px;
font-weight: bold;
background-color: #ff9000;
box-shadow: 0 -2px 0 0 #e58100 inset;
color: #fff;
margin: 10px 0 0;
}
.mypageKeepList__buttonRight--iconBuy::before, .mypageKeepList__buttonRight--iconBuyBlue::before {
content: "";
display: block;
text-indent: 0;
}
.mypageKeepList__buttonRight--iconBuy::before, .mypageKeepList__buttonRight--iconBuyBlue::before {
position: relative;
display: inline-block;
top: 7px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 28px;
line-height: 0;
}
.mypageKeepList__buttonRight--iconCart::before {
content: "";
display: block;
text-indent: 0;
}
.mypageKeepList__buttonRight--iconCart::before {
position: relative;
display: inline-block;
top: 7px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 28px;
line-height: 0;
}
.mypageKeepList__buttonRight--iconBuyBlue {
display: inline-block;
text-align: center;
position: relative;
height: 34px;
line-height: 34px;
border-radius: 18px;
font-size: 13px;
font-weight: bold;
color: #fff;
box-shadow: 0 -2px 0 0 #00abbb inset;
width: 150px;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
box-shadow: 0 -2px 0 0 #00abbb inset;
width: 150px;
background: #00a2d6;
/* Old browsers */
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a2d6', endColorstr='#00bcd0',GradientType=0 );
/* IE6-9 */
}
.mypageKeepList__buttonRight--iconBuyBlue::before {
content: "";
display: block;
text-indent: 0;
}
.mypageKeepList__buttonRight--iconBuyBlue::before {
position: relative;
display: inline-block;
top: 5px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 25px;
line-height: 0;
}
.mypageKeepList__buttonRight--iconBuyBlue.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.mypageKeepList__buttonRight--iconBuyBlue.is-buttonDisabled span {
color: #bbbbbb !important;
}
.mypageKeepList__buttonRight--iconBuyBlue.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.mypageKeepList__buttonRight--iconBuyBlue.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.mypageKeepList__buttonRight--iconBuyBlue.is-buttonCancel span {
color: #999999 !important;
}
.mypageKeepList__buttonRight--iconBuyBlue.is-buttonCancel span::before {
color: #999999 !important;
}
.mypageKeepList__buttonRight--iconBuyBlue::before {
content: "";
display: block;
text-indent: 0;
}
.mypageKeepList__buttonRight--iconBuyBlue::before {
position: relative;
display: inline-block;
top: 8px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 30px;
line-height: 0;
}
.mypageKeepList__buttonRight--iconBuyBlue.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.mypageKeepList__buttonRight--iconBuyBlue.is-buttonDisabled span {
color: #bbbbbb !important;
}
.mypageKeepList__buttonRight--iconBuyBlue.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.mypageKeepList__buttonRight--iconBuyBlue.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.mypageKeepList__buttonRight--iconBuyBlue.is-buttonCancel span {
color: #999999 !important;
}
.mypageKeepList__buttonRight--iconBuyBlue.is-buttonCancel span::before {
color: #999999 !important;
}
.mypageKeepList__buttonRight--iconCartBlue {
display: inline-block;
text-align: center;
position: relative;
height: 34px;
line-height: 34px;
border-radius: 18px;
font-size: 13px;
font-weight: bold;
color: #fff;
box-shadow: 0 -2px 0 0 #00abbb inset;
width: 150px;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
width: 150px;
}
.mypageKeepList__buttonRight--iconCartBlue::before {
content: "";
display: block;
text-indent: 0;
}
.mypageKeepList__buttonRight--iconCartBlue::before {
position: relative;
display: inline-block;
top: 5px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 25px;
line-height: 0;
}
.mypageKeepList__buttonRight--iconCartBlue.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.mypageKeepList__buttonRight--iconCartBlue.is-buttonDisabled span {
color: #bbbbbb !important;
}
.mypageKeepList__buttonRight--iconCartBlue.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.mypageKeepList__buttonRight--iconCartBlue.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.mypageKeepList__buttonRight--iconCartBlue.is-buttonCancel span {
color: #999999 !important;
}
.mypageKeepList__buttonRight--iconCartBlue.is-buttonCancel span::before {
color: #999999 !important;
}
.mypageKeepList__pagerBox .pager {
border-bottom: 1px solid #eeeeee;
margin: 40px 0 0;
padding: 0 0 80px;
}
.mypageKeepList--reservation .mypageKeepList__inner {
padding: 20px 80px 0;
}
.mypageKeepList__buttonConfiguration {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
margin: 10px 0 0;
}
.mypageKeepList__buttonConfiguration.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.mypageKeepList__buttonConfiguration.is-buttonDisabled span {
color: #bbbbbb !important;
}
.mypageKeepList__buttonConfiguration.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.mypageKeepList__buttonConfiguration.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.mypageKeepList__buttonConfiguration.is-buttonCancel span {
color: #999999 !important;
}
.mypageKeepList__buttonConfiguration.is-buttonCancel span::before {
color: #999999 !important;
}
.mypageKeepList__plan {
color: #b62626;
font-size: 14px;
}
.mypageKeepList__contract {
color: #888888;
font-size: 14px;
}
.mypageKeepList--auther .mypageKeepList__listItem {
margin: 0 0 0 40px;
border-bottom: 1px solid #dedede;
width: -webkit-calc(33.3% - 40px);
width: calc(33.3% - 40px);
padding: 0;
line-height: 1.6;
}
.mypageKeepList--auther .mypageKeepList__inner {
padding: 0 70px 0;
}
.mypageKeepList--auther .mypageKeepList__list {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.mypageKeepList--auther .mypageKeepList__listItemInner {
padding: 20px 30px;
display: block;
height: 100%;
width: 100%;
font-size: 0;
}
.mypageKeepList--auther .mypageKeepList__buttonConfiguration {
margin: 0 0 0;
font-weight: normal;
}
.mypageKeepList--auther + .mypageKeepList__pagerBox {
margin: 60px 0 0;
}
.mypageKeepList__auther {
font-size: 16px;
vertical-align: middle;
width: -webkit-calc(100% - 120px);
width: calc(100% - 120px);
display: inline-block;
vertical-align: middle;
font-weight: bold;
}
.mypageKeepList__buttonConfigurationBox {
display: inline-block;
vertical-align: middle;
width: 110px;
text-align: right;
}
.mypageKeepList--series .mypageKeepList__inner {
padding: 20px 70px 0;
}
.mypageKeepList--series .mypageKeepList__listItem {
width: 33.3%;
}
.mypageKeepList--series .mypageKeepList__buttonConfiguration {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
margin: 10px 0 0;
}
.mypageKeepList--series .mypageKeepList__buttonConfiguration.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.mypageKeepList--series .mypageKeepList__buttonConfiguration.is-buttonDisabled span {
color: #bbbbbb !important;
}
.mypageKeepList--series .mypageKeepList__buttonConfiguration.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.mypageKeepList--series .mypageKeepList__buttonConfiguration.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.mypageKeepList--series .mypageKeepList__buttonConfiguration.is-buttonCancel span {
color: #999999 !important;
}
.mypageKeepList--series .mypageKeepList__buttonConfiguration.is-buttonCancel span::before {
color: #999999 !important;
}
.mypageKeepList--series .mypageKeepList__infoBox {
position: relative;
}
.mypageKeepList--series .mypageKeepList__infoBox::before {
content: '';
width: 1px;
padding-bottom: 176px;
display: inline-block;
vertical-align: middle;
}
.mypageKeepList--series .mypageKeepList__infoBoxInner {
width: -webkit-calc(100% - 7px);
width: calc(100% - 7px);
display: inline-block;
vertical-align: middle;
}
.mypageKeepList--series + .mypageKeepList__pagerBox .pager {
margin: 0 0 0;
}
.mypageKeepList__dualButtonBox {
margin: 5px 0 0;
height: 34px;
display: inline-block;
border-radius: 50px;
overflow: hidden;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
box-shadow: 0 -2px 0 0 #00abbb inset;
}
.mypageKeepList__dualButtonBox:after {
content: "";
clear: both;
display: block;
}
.mypageKeepList__immediatelyButton {
position: relative;
display: inline-block;
text-align: center;
position: relative;
font-size: 12px;
font-weight: bold;
color: #fff;
line-height: 1;
padding: 11px 8px 12px 44px;
border-right: 1px solid rgba(0, 0, 0, 0.1);
width: 125px;
float: left;
box-sizing: border-box;
white-space: nowrap;
}
.mypageKeepList__immediatelyButton::before {
content: "";
display: block;
text-indent: 0;
}
.mypageKeepList__immediatelyButton::before {
position: absolute;
display: inline-block;
top: 14px;
left: 12px;
font-size: 30px;
line-height: 0;
}
.mypageKeepList__immediatelyButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.mypageKeepList__immediatelyButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.mypageKeepList__immediatelyButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.mypageKeepList__immediatelyButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.mypageKeepList__immediatelyButton.is-buttonCancel span {
color: #999999 !important;
}
.mypageKeepList__immediatelyButton.is-buttonCancel span::before {
color: #999999 !important;
}
.mypageKeepList__buyButton {
display: inline-block;
text-align: center;
position: relative;
height: 34px;
line-height: 34px;
border-radius: 18px;
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 0 15px 0;
width: 80px;
box-shadow: 0 -2px 0 0 #00abbb inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
margin: 0;
border: 0;
box-sizing: border-box;
box-shadow: 0 -2px 0 0 transparent inset;
background: none;
border-radius: 0px;
border-left: 1px solid rgba(255, 255, 255, 0.1);
width: 44px;
float: left;
padding: 0px 6px 0;
}
.mypageKeepList__buyButton::before {
content: "";
display: block;
text-indent: 0;
}
.mypageKeepList__buyButton::before {
position: relative;
display: inline-block;
top: 0px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 28px;
line-height: 1;
}
.mypageKeepList__buyButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.mypageKeepList__buyButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.mypageKeepList__buyButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.mypageKeepList__buyButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.mypageKeepList__buyButton.is-buttonCancel span {
color: #999999 !important;
}
.mypageKeepList__buyButton.is-buttonCancel span::before {
color: #999999 !important;
}
.mypageKeepList + .recommendModule {
margin-top: 40px;
position: relative;
}
.mypageKeepList + .recommendModule::before {
content: '';
position: absolute;
left: 10px;
right: 10px;
top: -40px;
border-top: 1px solid #eee;
}
.mypageKeepList + .recommendModule iframe {
position: relative;
}
.mypageKeepList__noticeBar {
background-color: #439fd9;
font-size: 14px;
text-align: center;
height: 40px;
line-height: 40px;
color: #fff;
margin: 20px 0 0;
}
.mypageKeepList__checkboxWrapper {
position: absolute;
right: 0;
top: 0;
display: inline-block;
}
.mypageCreditCardInfo {
color: #182432;
font-size: 14px;
}
.mypageCreditCardInfo__inner {
margin: 80px 0 100px;
}
.mypageCreditCardInfo__itemBox {
border-radius: 6px;
background-color: #f4f6f8;
border: 1px solid #dedede;
padding: 40px;
width: 560px;
margin: 0 auto 0;
}
.mypageCreditCardInfo__title {
font-size: 16px;
}
.mypageCreditCardInfo__tax {
font-size: 14px;
color: #182432;
font-weight: normal;
}
.mypageCreditCardInfo__mainTitle {
font-size: 16px;
margin: 0;
}
.mypageCreditCardInfo__contentBox, .mypageCreditCardInfo__contentBox--cardInfoBox, .mypageCreditCardInfo__contentBox--notWorking, .mypageCreditCardInfo__contentBox--title, .mypageCreditCardInfo__contentBox--noBorder {
position: relative;
padding: 0 0 0;
border-top: 1px solid #dedede;
}
.mypageCreditCardInfo__contentBox:first-child, .mypageCreditCardInfo__contentBox--cardInfoBox:first-child, .mypageCreditCardInfo__contentBox--notWorking:first-child, .mypageCreditCardInfo__contentBox--title:first-child, .mypageCreditCardInfo__contentBox--noBorder:first-child {
border-top: 0px;
}
.mypageCreditCardInfo__contentBox--cardInfoBox {
border-top: 0;
border-bottom: 1px solid #dedede;
}
.mypageCreditCardInfo__contentBox--notWorking .mypageCreditCardInfo__title {
color: #aaaaaa;
}
.mypageCreditCardInfo__contentBox--notWorking .mypageCreditCardInfo__radioIcon {
color: #aaaaaa;
}
.mypageCreditCardInfo__contentBox--notWorking .mypageCreditCardInfo__radioIcon::before {
border: 1px solid #cccccc;
background-color: #f9f9f9;
}
.mypageCreditCardInfo__contentBox--title {
border-top: 0px;
position: relative;
}
.mypageCreditCardInfo__contentBox--title::before {
content: '';
position: absolute;
top: 0;
left: -40px;
width: -webkit-calc(100% + 80px);
width: calc(100% + 80px);
height: 1px;
background: #dedede;
}
.mypageCreditCardInfo__contentBox--card {
padding: 0 0 0 0;
border-top: 1px solid #dedede;
}
.mypageCreditCardInfo__contentBox--noBorder {
border-top: 0px;
}
.mypageCreditCardInfo__contentBox--noBorder .mypageCreditCardInfo__cardBox {
margin: 0;
}
.mypageCreditCardInfo__cardBox {
margin: 20px 0 0 0;
}
.mypageCreditCardInfo__subtotal, .mypageCreditCardInfo__subPointTotal--checkBox {
position: absolute;
top: 0;
right: 0;
}
.mypageCreditCardInfo__subPointTotal {
position: absolute;
top: 25px;
right: 0;
}
.mypageCreditCardInfo__subPointTotal--checkBox {
top: -5px;
right: 0;
}
.mypageCreditCardInfo__price {
color: #cc011b;
font-size: 20px;
font-weight: bold;
}
.mypageCreditCardInfo__point {
color: #b08c4e;
font-size: 14px;
font-weight: bold;
}
.mypageCreditCardInfo__radio {
display: none;
}
.mypageCreditCardInfo__radio:checked + .mypageCreditCardInfo__radioIcon::before {
border: 1px solid #c2a359;
}
.mypageCreditCardInfo__radio:checked + .mypageCreditCardInfo__radioIcon::after {
width: 12px;
height: 12px;
border-radius: 50%;
background: #c2a359;
content: '';
position: absolute;
top: 4px;
bottom: 0;
left: 4px;
margin: 0 0 0 0;
}
.mypageCreditCardInfo__radioItem {
position: relative;
margin: 0 0 0 20px;
}
.mypageCreditCardInfo__radioIcon {
padding: 0 0 0 30px;
margin: 10px 0 0;
}
.mypageCreditCardInfo__radioIcon::before {
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #8b8b8b;
background: #fff;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: 0 0 0 0;
}
.mypageCreditCardInfo__radioLabel {
position: relative;
padding: 0;
}
.mypageCreditCardInfo__checkbox {
display: none;
}
.mypageCreditCardInfo__checkbox:checked + .mypageCreditCardInfo__checkboxIcon::before {
border: 1px solid #bda553;
}
.mypageCreditCardInfo__checkbox:checked + .mypageCreditCardInfo__checkboxIcon::after {
width: 7px;
height: 12px;
border-bottom: 2px solid #bda553;
border-right: 2px solid #bda553;
content: '';
position: absolute;
top: 3px;
bottom: 0;
left: 6px;
margin: 0 0 0 0;
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
}
.mypageCreditCardInfo__checkBoxWrapper {
width: 560px;
margin: 40px auto 0;
text-align: center;
}
.mypageCreditCardInfo__checkBoxWrapper .mypageCreditCardInfo__checkboxLabel {
display: inline-block;
}
.mypageCreditCardInfo__checkboxItem {
position: relative;
margin: 30px 0 0 0;
}
.mypageCreditCardInfo__checkboxIcon {
position: relative;
line-height: 20px;
padding: 0 0 0 30px;
}
.mypageCreditCardInfo__checkboxIcon::before {
width: 20px;
height: 20px;
border-radius: 2px;
border: 1px solid #888888;
background-color: #fff;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: 0 0 0 0;
}
.mypageCreditCardInfo__checkboxLabel {
position: relative;
}
.mypageCreditCardInfo__warning {
color: #cc0000;
}
.mypageCreditCardInfo__pointList:after {
content: "";
clear: both;
display: block;
}
.mypageCreditCardInfo__pointList + .mypageCreditCardInfo__pointList {
margin: 15px 0 0;
}
.mypageCreditCardInfo__pointText {
width: 153px;
float: left;
}
.mypageCreditCardInfo__pointTextBox {
float: left;
}
.mypageCreditCardInfo__pointWarning {
color: #cc0000;
margin: 5px 0 0;
}
.mypageCreditCardInfo__pointInputText {
background-color: #fff;
box-shadow: inset 0px 3px 4px 0px rgba(0, 0, 0, 0.15);
width: 240px;
height: 38px;
border-radius: 8px;
border: 1px solid #cccccc;
padding: 0 10px;
box-sizing: border-box;
margin: 5px 10px 0 0;
}
.mypageCreditCardInfo__formlist {
margin: 20px 0 0;
}
.mypageCreditCardInfo__formlist:after {
content: "";
clear: both;
display: block;
}
.mypageCreditCardInfo__formText {
width: 190px;
float: left;
line-height: 38px;
}
.mypageCreditCardInfo__security {
position: relative;
padding: 0 1em 0 0;
cursor: pointer;
letter-spacing: -0.08em;
}
.mypageCreditCardInfo__security::before {
content: "";
display: block;
text-indent: 0;
}
.mypageCreditCardInfo__security::before {
position: absolute;
display: inline-block;
right: -12px;
top: -2px;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #bdbdbd;
font-size: 24px;
}
.mypageCreditCardInfo__formTextBox {
float: left;
}
.mypageCreditCardInfo__formInputText, .mypageCreditCardInfo__formInputText--half, .mypageCreditCardInfo__formInputText--disable {
background-color: #fff;
box-shadow: inset 0px 3px 4px 0px rgba(0, 0, 0, 0.15);
width: 188px;
height: 38px;
border-radius: 8px;
border: 1px solid #cccccc;
padding: 0 10px;
box-sizing: border-box;
}
.mypageCreditCardInfo__formInputText--half {
width: 94px;
}
.mypageCreditCardInfo__formInputText--disable {
color: #888888;
background-color: #eeeeee;
box-shadow: inset 0px 3px 4px 0px transparent;
}
.mypageCreditCardInfo__cardTitleBox {
padding: 0 0 25px 0;
}
.mypageCreditCardInfo__cardTitleBox:after {
content: "";
clear: both;
display: block;
}
.mypageCreditCardInfo__cardlist {
border-top: 1px solid #dedede;
padding: 20px 0;
}
.mypageCreditCardInfo__cardlist:after {
content: "";
clear: both;
display: block;
}
.mypageCreditCardInfo__cardTitle, .mypageCreditCardInfo__cardTitle--up {
float: left;
}
.mypageCreditCardInfo__cardText, .mypageCreditCardInfo__cardText--down {
float: right;
color: #888888;
}
.mypageCreditCardInfo__topText {
text-align: right;
margin: 0 0 15px 0;
}
.mypageCreditCardInfo__cardUpdate {
position: relative;
color: #ab8e48;
padding: 0 16px 0 0;
margin: 0 0 0 20px;
}
.mypageCreditCardInfo__cardUpdate::after {
display: inline-block;
content: '';
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 9px;
height: 9px;
margin: 0 5px;
}
.mypageCreditCardInfo__cardButtonBox, .mypageCreditCardInfo__cardButtonBox--inner {
padding: 25px 0 0;
border-top: 1px solid #dedede;
}
.mypageCreditCardInfo__cardButtonBox--inner {
padding: 25px 0 0;
border-top: 0px solid #dedede;
}
.mypageCreditCardInfo__cardButton {
box-shadow: inset 0px -3px 0px 0px rgba(0, 0, 0, 0.1);
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
height: 48px;
line-height: 48px;
display: block;
text-align: center;
color: #ab8e48;
}
.mypageCreditCardInfo__cardButton + .mypageCreditCardInfo__cardButton {
margin: 20px 0 0 0;
}
.mypageCreditCardInfo__selectBox {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
width: 120px;
height: 38px;
border-radius: 8px;
border: 1px solid #cccccc;
padding: 0 10px;
box-sizing: border-box;
position: relative;
}
.mypageCreditCardInfo__selectBoxWrapper, .mypageCreditCardInfo__selectBoxWrapper--button {
position: relative;
width: 120px;
margin: 0 10px 0 0;
display: inline-block;
}
.mypageCreditCardInfo__selectBoxWrapper::after, .mypageCreditCardInfo__selectBoxWrapper--button::after {
background-image: url(../materials/sprites.png);
background-position: -279.5px -69px;
width: 8px;
height: 17px;
background-size: 290px 251.5px;
content: '';
position: absolute;
right: 10px;
top: 0;
bottom: 0;
margin: auto;
}
.mypageCreditCardInfo__buttonBox, .mypageCreditCardInfo__buttonBox--cal2 {
text-align: center;
margin: 30px 0 30px;
}
.mypageCreditCardInfo__buttonBox:after, .mypageCreditCardInfo__buttonBox--cal2:after {
content: "";
clear: both;
display: block;
}
.mypageCreditCardInfo__buttonBox--cal2 {
width: 350px;
margin: 30px auto 30px;
}
.mypageCreditCardInfo__buttonBox--cal2 .mypageCreditCardInfo__nextButton--active,
.mypageCreditCardInfo__buttonBox--cal2 .mypageCreditCardInfo__nextButton,
.mypageCreditCardInfo__buttonBox--cal2 .mypageCreditCardInfo__nextButton--active,
.mypageCreditCardInfo__buttonBox--cal2 .mypageCreditCardInfo__changeButton {
width: 240px;
margin: 0 15px;
}
.mypageCreditCardInfo__nextButton, .mypageCreditCardInfo__nextButton--active {
display: inline-block;
border: 1px solid #cccccc;
border-radius: 24px;
line-height: 48px;
height: 48px;
text-align: center;
position: relative;
font-size: 16px;
font-weight: bold;
background: #dddddd;
box-shadow: 0 -2px 0 0 #c6c6c6 inset;
color: #bbbbbb;
width: 260px;
margin: auto;
pointer-events: none;
float: right;
}
.mypageCreditCardInfo__nextButton--active {
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
box-shadow: 0 -2px 0 0 #00abbb inset;
color: #fff;
pointer-events: auto;
}
.mypageCreditCardInfo__changeButton {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
width: 240px;
margin: auto;
}
.mypageCreditCardInfo__changeButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.mypageCreditCardInfo__changeButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.mypageCreditCardInfo__changeButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.mypageCreditCardInfo__changeButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.mypageCreditCardInfo__changeButton.is-buttonCancel span {
color: #999999 !important;
}
.mypageCreditCardInfo__changeButton.is-buttonCancel span::before {
color: #999999 !important;
}
.mypageCreditCardInfo__editButton, .mypageCreditCardInfo__editButton--delete {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
width: 160px;
margin: auto;
float: left;
}
.mypageCreditCardInfo__editButton.is-buttonDisabled, .is-buttonDisabled.mypageCreditCardInfo__editButton--delete {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.mypageCreditCardInfo__editButton.is-buttonDisabled span, .is-buttonDisabled.mypageCreditCardInfo__editButton--delete span {
color: #bbbbbb !important;
}
.mypageCreditCardInfo__editButton.is-buttonDisabled span::before, .is-buttonDisabled.mypageCreditCardInfo__editButton--delete span::before {
color: #bbbbbb !important;
}
.mypageCreditCardInfo__editButton.is-buttonCancel, .is-buttonCancel.mypageCreditCardInfo__editButton--delete {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.mypageCreditCardInfo__editButton.is-buttonCancel span, .is-buttonCancel.mypageCreditCardInfo__editButton--delete span {
color: #999999 !important;
}
.mypageCreditCardInfo__editButton.is-buttonCancel span::before, .is-buttonCancel.mypageCreditCardInfo__editButton--delete span::before {
color: #999999 !important;
}
.mypageCreditCardInfo__editButton--delete {
float: right;
}
.mypageCreditCardInfo__selectBoxButton {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
font-weight: bold;
}
.mypageCreditCardInfo__selectBoxButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.mypageCreditCardInfo__selectBoxButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.mypageCreditCardInfo__selectBoxButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.mypageCreditCardInfo__selectBoxButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.mypageCreditCardInfo__selectBoxButton.is-buttonCancel span {
color: #999999 !important;
}
.mypageCreditCardInfo__selectBoxButton.is-buttonCancel span::before {
color: #999999 !important;
}
.mypageCreditCardInfo__paymentList, .mypageCreditCardInfo__paymentList--border {
margin: 10px 0 0;
}
.mypageCreditCardInfo__paymentList:after, .mypageCreditCardInfo__paymentList--border:after {
content: "";
clear: both;
display: block;
}
.mypageCreditCardInfo__paymentList:first-child, .mypageCreditCardInfo__paymentList--border:first-child {
margin: 0;
}
.mypageCreditCardInfo__paymentList--border {
border-bottom: 1px solid #dedede;
margin: 0 0 0;
padding: 15px 0 15px;
}
.mypageCreditCardInfo__paymentTerm, .mypageCreditCardInfo__paymentTerm--title {
float: left;
}
.mypageCreditCardInfo__paymentTerm--title {
font-weight: bold;
}
.mypageCreditCardInfo__confirmLink {
color: #ab8e48;
}
.mypageCreditCardInfo__paymentDescription, .mypageCreditCardInfo__paymentDescription--price {
float: right;
}
.mypageCreditCardInfo__paymentDescription--price {
font-size: 20px;
color: #cc0000;
font-weight: bold;
}
.mypageCreditCardInfo__annotationList {
margin: 30px 0 0 0;
}
.mypageCreditCardInfo__cardLogoBox {
text-align: left;
}
.mypageCreditCardInfo__annotationListItem {
margin: 10px 0 0 0;
position: relative;
padding: 0 0 0 1em;
}
.mypageCreditCardInfo__annotationListItem::before {
content: '';
position: absolute;
top: 10px;
left: 3px;
width: 3px;
height: 3px;
border-radius: 50%;
background-color: #182432;
}
.mypageCreditCardInfo__cardLogo {
margin: 10px auto 0;
width: 200px;
}
.mypageCreditCardInfo__slideDownBox {
margin: 20px 0 0 0;
}
.mypageCreditCardInfo__slideDownText, .mypageCreditCardInfo__slideDownText--caution {
margin: 10px 0 0 0;
}
.mypageCreditCardInfo__slideDownText--caution {
padding: 0 0 0 1em;
position: relative;
}
.mypageCreditCardInfo__slideDownText--caution::before {
position: absolute;
content: '※';
top: 0;
left: 0;
}
.mypageCreditCardInfo__moreButtonBox {
text-align: center;
margin: 20px 0 0 0;
}
.mypageCreditCardInfo__moreButton {
border: 1px solid #cccccc;
text-align: center;
position: relative;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
display: inline-block;
height: 34px;
line-height: 34px;
border-radius: 17px;
padding: 0 36px 0 20px;
position: relative;
width: auto;
color: #1b2433;
font-size: 14px;
background-color: #fff;
margin: auto;
cursor: pointer;
}
.mypageCreditCardInfo__moreButton::after {
background-image: url(../materials/sprites.png);
background-position: -182.5px -138px;
width: 13px;
height: 9px;
background-size: 290px 251.5px;
content: '';
position: absolute;
top: 12px;
right: 15px;
}
.mypageCreditCardInfo__slideDownListItem {
position: relative;
padding: 0 0 0 1em;
}
.mypageCreditCardInfo__slideDownListItem::before {
content: '';
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background-color: #182432;
top: 10px;
left: 3px;
}
.mypageCreditCardInfo__annotationBox {
width: 560px;
margin: 30px auto 0;
}
.mypageCreditCardInfo__warningBox {
border: 1px solid #cc0000;
background-color: #fff2f2;
padding: 24px;
color: #cc0000;
border-radius: 6px;
width: 560px;
margin: 40px auto -40px;
}
.mypageCreditCardInfo__warningTitle {
font-size: 14px;
font-weight: bold;
}
.mypageCreditCardInfo__warningText {
font-size: 12px;
}
.mypagePointDetail {
margin: 80px auto 110px;
width: 640px;
font-size: 16px;
}
.mypagePointDetail__titleBox:after {
content: "";
clear: both;
display: block;
}
.mypagePointDetail__title {
font-size: 20px;
float: left;
}
.mypagePointDetail__table {
border-collapse: collapse;
width: 100%;
margin: 20px 0 0;
}
.mypagePointDetail__tableHeader {
border: 1px solid #eeeeee;
padding: 20px;
background-color: #f4f6f8;
width: 50%;
text-align: left;
font-weight: normal;
}
.mypagePointDetail__tableData {
border: 1px solid #eeeeee;
padding: 20px;
width: 50%;
}
.mypagePointDetail__link {
float: right;
position: relative;
display: inline-block;
color: #ab8e48;
font-size: 12px;
padding: 0 20px 0 0;
cursor: pointer;
}
.mypagePointDetail__link::before {
content: '';
width: 8px;
height: 1px;
background-color: #cccccc;
position: absolute;
top: 14px;
right: 0;
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
.mypagePointDetail__link::after {
content: '';
width: 8px;
height: 1px;
background-color: #cccccc;
position: absolute;
top: 9px;
right: 0;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
.mypagePointDetail__caution {
font-size: 13px;
color: #888888;
margin: 20px 0 0;
}
.modalMypageCoupon {
padding: 40px 60px;
box-sizing: border-box;
font-size: 14px;
color: #1b2433;
text-align: center;
}
.modalMypageCoupon__inner {
position: relative;
}
.modalMypageCoupon__inputBox {
margin: auto;
text-align: left;
}
.modalMypageCoupon__input {
border: 1px solid #cccccc;
border-radius: 8px;
background-color: #f9f9f9;
box-shadow: inset 0px 3px 4px 0px rgba(0, 0, 0, 0.15);
height: 40px;
line-height: 40px;
width: 320px;
margin: 10px 0 0 0;
padding: 0 11px;
}
.modalMypageCoupon__buttonBox {
margin: 20px 0 0 0;
}
.modalMypageCoupon__button {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
display: block;
margin: auto;
}
.modalMypageCoupon__button.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.modalMypageCoupon__button.is-buttonDisabled span {
color: #bbbbbb !important;
}
.modalMypageCoupon__button.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.modalMypageCoupon__button.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.modalMypageCoupon__button.is-buttonCancel span {
color: #999999 !important;
}
.modalMypageCoupon__button.is-buttonCancel span::before {
color: #999999 !important;
}
.modalMypageCoupon__button--active {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
display: block;
margin: auto;
}
.modalMypageCoupon__button--active.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.modalMypageCoupon__button--active.is-buttonDisabled span {
color: #bbbbbb !important;
}
.modalMypageCoupon__button--active.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.modalMypageCoupon__button--active.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.modalMypageCoupon__button--active.is-buttonCancel span {
color: #999999 !important;
}
.modalMypageCoupon__button--active.is-buttonCancel span::before {
color: #999999 !important;
}
.modalMypageCoupon__caution {
color: #b62626;
margin: 5px 0 0 0;
}
.paymentBox {
color: #182432;
font-size: 14px;
}
.paymentBox__inner {
margin: 80px 0 100px;
}
.paymentBox__itemBox {
border-radius: 6px;
background-color: #f4f6f8;
border: 1px solid #dedede;
padding: 40px;
width: 560px;
margin: 0 auto 0;
}
.paymentBox__title {
font-size: 16px;
}
.paymentBox__tax {
font-size: 14px;
color: #888888;
font-weight: normal;
display: inline-block;
}
.paymentBox__tax2 {
font-size: 12px;
color: #1b2433;
font-weight: normal;
display: inline-block;
}
.paymentBox__mainTitle {
font-size: 16px;
margin: 0;
}
.paymentBox__contentBox, .paymentBox__contentBox--regist, .paymentBox__contentBox--notWorking, .paymentBox__contentBox--title, .paymentBox__contentBox--noBorder {
position: relative;
padding: 25px 0;
border-top: 1px solid #dedede;
}
.paymentBox__contentBox:first-child, .paymentBox__contentBox--regist:first-child, .paymentBox__contentBox--notWorking:first-child, .paymentBox__contentBox--title:first-child, .paymentBox__contentBox--noBorder:first-child {
border-top: 0px;
padding: 0 0 25px;
}
.paymentBox__contentBox:last-child, .paymentBox__contentBox--regist:last-child, .paymentBox__contentBox--notWorking:last-child, .paymentBox__contentBox--title:last-child, .paymentBox__contentBox--noBorder:last-child {
padding: 25px 0 0;
}
.paymentBox__contentBox.is-validation .paymentBox__warning, .is-validation.paymentBox__contentBox--regist .paymentBox__warning, .is-validation.paymentBox__contentBox--notWorking .paymentBox__warning, .is-validation.paymentBox__contentBox--title .paymentBox__warning, .is-validation.paymentBox__contentBox--noBorder .paymentBox__warning {
display: block;
}
.paymentBox__contentBox--regist {
padding: 25px 0 0;
}
.paymentBox__contentBox--regist::before {
content: '';
position: absolute;
bottom: -1px;
width: 100%;
height: 1px;
background-color: #dedede;
}
.paymentBox__contentBox--notWorking .paymentBox__title {
color: #aaaaaa;
}
.paymentBox__contentBox--notWorking .paymentBox__radioIcon {
color: #aaaaaa;
}
.paymentBox__contentBox--notWorking .paymentBox__radioIcon::before {
border: 1px solid #cccccc;
background-color: #f9f9f9;
}
.paymentBox__contentBox--title {
border-top: 0px;
position: relative;
}
.paymentBox__contentBox--title::before {
content: '';
position: absolute;
top: 0;
left: -40px;
width: -webkit-calc(100% + 80px);
width: calc(100% + 80px);
height: 1px;
background: #dedede;
}
.paymentBox__contentBox--card {
padding: 0 0 0 0;
border-top: 1px solid #dedede;
}
.paymentBox__contentBox--noBorder {
border-top: 0px;
}
.paymentBox__contentBox--noBorder .paymentBox__cardBox {
margin: 0;
}
.paymentBox__cardBox {
margin: 0 0 0 0;
}
.paymentBox__subtotal, .paymentBox__subPointTotal--checkBox {
position: absolute;
top: 0;
right: 0;
}
.paymentBox__subPointTotal {
position: absolute;
top: 25px;
right: 0;
}
.paymentBox__subPointTotal--checkBox {
top: -5px;
right: 0;
}
.paymentBox__price {
color: #cc011b;
font-size: 20px;
font-weight: bold;
}
.paymentBox__point {
color: #b08c4e;
font-size: 14px;
font-weight: bold;
}
.paymentBox__radio {
display: none;
}
.paymentBox__radio:checked + .paymentBox__radioIcon::before {
background-image: url(../materials/sprites.png);
background-position: -88px -445px;
width: 20px;
height: 20px;
}
.paymentBox__radio:disabled + .paymentBox__radioIcon {
color: #aaa;
}
.paymentBox__radio:disabled + .paymentBox__radioIcon::before {
background-image: url(../materials/sprites.png);
background-position: -118px -445px;
width: 20px;
height: 20px;
}
.paymentBox__radioItem {
position: relative;
margin: 0 0 0 20px;
}
.paymentBox__radioIcon {
padding: 0 0 0 30px;
margin: 10px 0 0;
position: relative;
}
.paymentBox__radioIcon::before {
background-image: url(../materials/sprites.png);
background-position: -148px -445px;
width: 20px;
height: 20px;
width: 20px;
height: 20px;
content: '';
position: absolute;
top: 2px;
bottom: 0;
left: 0;
margin: 0 0 0 0;
}
.paymentBox__radioLabel {
position: relative;
padding: 0;
}
.paymentBox__checkBoxWrapper {
width: 560px;
margin: 30px auto 0;
text-align: center;
}
.paymentBox__checkBoxWrapper .paymentBox__checkboxLabel {
display: inline-block;
}
.paymentBox__checkboxItem {
position: relative;
margin: 30px 0 0 0;
}
.paymentBox__checkboxIcon {
position: relative;
line-height: 20px;
padding: 0 0 0 30px;
}
.paymentBox__checkboxIcon::before {
top: -2px;
}
.paymentBox__checkboxIcon::after {
top: 1px !important;
}
.paymentBox__checkboxLabel {
position: relative;
}
.paymentBox__warning {
color: #cc0000;
display: none;
}
.paymentBox__warningIcon {
color: #cc0000;
position: relative;
font-size: 12px;
padding: 0 0 0 20px;
margin: 15px 0 0;
}
.paymentBox__warningIcon::before {
content: "";
display: block;
text-indent: 0;
}
.paymentBox__warningIcon::before {
position: absolute;
display: inline-block;
left: 0px;
top: 5px;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #cc0000;
font-size: 14px;
}
.paymentBox__warningIcon.is-disabled {
color: #aaa;
}
.paymentBox__warningIcon.is-disabled::before {
color: #aaa;
}
.paymentBox__pointList:after {
content: "";
clear: both;
display: block;
}
.paymentBox__pointList + .paymentBox__pointList {
margin: 15px 0 0;
}
.paymentBox__pointList.is-validation .paymentBox__pointWarning {
display: block;
}
.paymentBox__pointText {
width: 153px;
float: left;
}
.paymentBox__pointTextBox {
float: left;
}
.paymentBox__pointWarning {
color: #cc0000;
margin: 5px 0 0;
display: none;
}
.paymentBox__pointInputText {
background-color: #fff;
box-shadow: inset 0px 3px 4px 0px rgba(0, 0, 0, 0.15);
width: 240px;
height: 38px;
border-radius: 8px;
border: 1px solid #cccccc;
padding: 0 10px;
box-sizing: border-box;
margin: 5px 10px 0 0;
}
.paymentBox__formlist {
margin: 20px 0 0;
}
.paymentBox__formlist:after {
content: "";
clear: both;
display: block;
}
.paymentBox__formlist.is-validation .paymentBox__pointWarning {
display: block;
}
.paymentBox__formlist.is-validation select,
.paymentBox__formlist.is-validation input {
border: 1px solid #cc0000;
background-color: #fff2f2;
box-shadow: inset 0px 3px 4px 0px transparent;
}
.paymentBox__formText {
width: 190px;
float: left;
line-height: 38px;
}
.paymentBox__security {
position: relative;
padding: 0 1em 0 0;
cursor: pointer;
letter-spacing: -0.08em;
}
.paymentBox__security::before {
content: "";
display: block;
text-indent: 0;
}
.paymentBox__security::before {
position: absolute;
display: inline-block;
right: -12px;
top: -2px;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #bdbdbd;
font-size: 24px;
}
.paymentBox__formTextBox, .paymentBox__formTextBox--long {
float: left;
position: relative;
}
.paymentBox__formTextBox--long {
width: -webkit-calc(100% - 190px);
width: calc(100% - 190px);
}
.paymentBox__innerBox {
border-top: 1px solid #dedede;
margin: 30px 0 0 0;
padding: 30px 0 0 0;
}
.paymentBox__formInputText, .paymentBox__formInputText--half, .paymentBox__formInputText--disable, .paymentBox__formInputText--warning {
background-color: #fff;
box-shadow: inset 0px 3px 4px 0px rgba(0, 0, 0, 0.15);
width: 188px;
height: 38px;
border-radius: 8px;
border: 1px solid #cccccc;
padding: 0 10px;
box-sizing: border-box;
}
.paymentBox__formInputText--half {
width: 94px;
}
.paymentBox__formInputText--disable {
color: #888888;
background-color: #eeeeee;
box-shadow: inset 0px 3px 4px 0px transparent;
}
.paymentBox__formInputText--warning {
border: 1px solid #cc0000;
background-color: #fff2f2;
box-shadow: inset 0px 3px 4px 0px transparent;
}
.paymentBox__formInputLongText {
background-color: #fff;
box-shadow: inset 0px 3px 4px 0px rgba(0, 0, 0, 0.15);
width: 100%;
height: 38px;
border-radius: 8px;
border: 1px solid #cccccc;
padding: 0 10px;
box-sizing: border-box;
}
.paymentBox__cardTitleBox {
padding: 0 0 25px 0;
}
.paymentBox__cardTitleBox:after {
content: "";
clear: both;
display: block;
}
.paymentBox__cardlist {
border-top: 1px solid #dedede;
padding: 20px 0;
}
.paymentBox__cardlist:after {
content: "";
clear: both;
display: block;
}
.paymentBox__cardTitle, .paymentBox__cardTitle--up {
float: left;
}
.paymentBox__cardText, .paymentBox__cardText--down {
float: right;
}
.paymentBox__topText {
text-align: right;
margin: 0 0 15px 0;
}
.paymentBox__cardUpdate {
position: relative;
color: #ab8e48;
padding: 0 16px 0 0;
margin: 0 0 0 20px;
}
.paymentBox__cardUpdate::after {
background-image: url(../materials/sprites.png);
background-position: -13px -239.5px;
width: 8px;
height: 12px;
background-size: 290px 251.5px;
content: '';
position: absolute;
top: 3px;
bottom: 0;
right: 0;
margin: 0 auto;
}
.paymentBox__cardButtonBox, .paymentBox__cardButtonBox--inner {
padding: 25px 0 0;
border-top: 1px solid #dedede;
}
.paymentBox__cardButtonBox--inner {
padding: 25px 0 0;
border-top: 0px solid #dedede;
}
.paymentBox__cardButton {
display: inline-block;
border: 1px solid #cccccc;
border-radius: 5px;
line-height: 48px;
height: 48px;
text-align: center;
position: relative;
background-color: #fff;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a28d42;
font-size: 16px;
font-weight: bold;
padding: 0 40px;
box-sizing: border-box;
display: block;
font-weight: normal;
}
.paymentBox__cardButton + .paymentBox__cardButton {
margin: 20px 0 0 0;
}
.paymentBox__selectBox {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
width: 120px;
height: 38px;
border-radius: 8px;
border: 1px solid #cccccc;
padding: 0 10px;
box-sizing: border-box;
position: relative;
}
.paymentBox__selectBoxWrapper, .paymentBox__selectBoxWrapper--button {
position: relative;
width: 120px;
margin: 0 10px 0 0;
display: inline-block;
}
.paymentBox__selectBoxWrapper::after, .paymentBox__selectBoxWrapper--button::after {
background-image: url(../materials/sprites.png);
background-position: -279.5px -69px;
width: 8px;
height: 17px;
background-size: 290px 251.5px;
content: '';
position: absolute;
right: 10px;
top: 0;
bottom: 0;
margin: auto;
}
.paymentBox__buttonBox, .paymentBox__buttonBox--cal2 {
text-align: center;
margin: 30px 0 0;
}
.paymentBox__buttonBox--cal2 {
width: 560px;
margin: 30px auto 0;
}
.paymentBox__buttonBox--cal2 .paymentBox__nextButton--active,
.paymentBox__buttonBox--cal2 .paymentBox__nextButton,
.paymentBox__buttonBox--cal2 .paymentBox__nextButton--active,
.paymentBox__buttonBox--cal2 .paymentBox__changeButton {
width: 240px;
margin: 0 15px;
}
.paymentBox__nextButton, .paymentBox__nextButton--active {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
border: 0 solid #cccccc;
color: #fff;
box-shadow: 0 -3px 0px 0px #00a2b1 inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
cursor: pointer;
width: 240px;
display: inline-block;
margin: auto;
pointer-events: none;
float: right;
}
.paymentBox__nextButton.is-buttonDisabled, .is-buttonDisabled.paymentBox__nextButton--active {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.paymentBox__nextButton.is-buttonDisabled span, .is-buttonDisabled.paymentBox__nextButton--active span {
color: #bbbbbb !important;
}
.paymentBox__nextButton.is-buttonDisabled span::before, .is-buttonDisabled.paymentBox__nextButton--active span::before {
color: #bbbbbb !important;
}
.paymentBox__nextButton.is-buttonCancel, .is-buttonCancel.paymentBox__nextButton--active {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.paymentBox__nextButton.is-buttonCancel span, .is-buttonCancel.paymentBox__nextButton--active span {
color: #999999 !important;
}
.paymentBox__nextButton.is-buttonCancel span::before, .is-buttonCancel.paymentBox__nextButton--active span::before {
color: #999999 !important;
}
.paymentBox__nextButton.is-buttonDisabled, .is-buttonDisabled.paymentBox__nextButton--active {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.paymentBox__nextButton.is-buttonDisabled span, .is-buttonDisabled.paymentBox__nextButton--active span {
color: #bbbbbb !important;
}
.paymentBox__nextButton.is-buttonDisabled span::before, .is-buttonDisabled.paymentBox__nextButton--active span::before {
color: #bbbbbb !important;
}
.paymentBox__nextButton.is-buttonCancel, .is-buttonCancel.paymentBox__nextButton--active {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.paymentBox__nextButton.is-buttonCancel span, .is-buttonCancel.paymentBox__nextButton--active span {
color: #999999 !important;
}
.paymentBox__nextButton.is-buttonCancel span::before, .is-buttonCancel.paymentBox__nextButton--active span::before {
color: #999999 !important;
}
.paymentBox__nextButton--active {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
border: 0 solid #cccccc;
color: #fff;
box-shadow: 0 -3px 0px 0px #00a2b1 inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
cursor: pointer;
pointer-events: auto;
}
.paymentBox__nextButton--active.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.paymentBox__nextButton--active.is-buttonDisabled span {
color: #bbbbbb !important;
}
.paymentBox__nextButton--active.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.paymentBox__nextButton--active.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.paymentBox__nextButton--active.is-buttonCancel span {
color: #999999 !important;
}
.paymentBox__nextButton--active.is-buttonCancel span::before {
color: #999999 !important;
}
.paymentBox__nextButton--active.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.paymentBox__nextButton--active.is-buttonDisabled span {
color: #bbbbbb !important;
}
.paymentBox__nextButton--active.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.paymentBox__nextButton--active.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.paymentBox__nextButton--active.is-buttonCancel span {
color: #999999 !important;
}
.paymentBox__nextButton--active.is-buttonCancel span::before {
color: #999999 !important;
}
.paymentBox__changeButton {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
width: 240px;
display: inline-block;
margin: auto;
}
.paymentBox__changeButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.paymentBox__changeButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.paymentBox__changeButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.paymentBox__changeButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.paymentBox__changeButton.is-buttonCancel span {
color: #999999 !important;
}
.paymentBox__changeButton.is-buttonCancel span::before {
color: #999999 !important;
}
.paymentBox__selectBoxButton {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
font-weight: bold;
}
.paymentBox__selectBoxButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.paymentBox__selectBoxButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.paymentBox__selectBoxButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.paymentBox__selectBoxButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.paymentBox__selectBoxButton.is-buttonCancel span {
color: #999999 !important;
}
.paymentBox__selectBoxButton.is-buttonCancel span::before {
color: #999999 !important;
}
.paymentBox__paymentList, .paymentBox__paymentList--border {
margin: 10px 0 0;
}
.paymentBox__paymentList:after, .paymentBox__paymentList--border:after {
content: "";
clear: both;
display: block;
}
.paymentBox__paymentList:first-child, .paymentBox__paymentList--border:first-child {
margin: 0;
}
.paymentBox__paymentList--border {
border-bottom: 1px solid #dedede;
margin: 0 0 0;
padding: 15px 0 15px;
}
.paymentBox__paymentTerm, .paymentBox__paymentTerm--title, .purchaseHistory__paymentTerm--title {
float: left;
width: -webkit-calc(100% - 150px);
width: calc(100% - 150px);
}
.paymentBox__paymentTerm--title {
font-weight: bold;
}
.paymentBox__confirmLink {
color: #ab8e48;
}
.paymentBox__paymentDescription, .paymentBox__paymentDescription--price, .purchaseHistory__paymentDescription--totalFee {
float: right;
}
.paymentBox__paymentDescription--price {
font-size: 20px;
color: #cc0000;
font-weight: bold;
}
.paymentBox__annotationList {
margin: 30px 0 0 0;
}
.paymentBox__cardLogoBox {
text-align: left;
}
.paymentBox__annotationListItem {
margin: 10px 0 0 0;
position: relative;
padding: 0 0 0 1em;
}
.paymentBox__annotationListItem::before {
content: '';
position: absolute;
top: 10px;
left: 3px;
width: 3px;
height: 3px;
border-radius: 50%;
background-color: #182432;
}
.paymentBox__cardLogo {
margin: 10px auto 0;
width: 200px;
}
.paymentBox__slideDownContent {
display: none;
}
.paymentBox__slideDownBox {
margin: 20px 0 0 0;
}
.paymentBox__slideDownText, .paymentBox__slideDownText--caution {
margin: 10px 0 0 0;
}
.paymentBox__slideDownText--caution {
padding: 0 0 0 1em;
position: relative;
}
.paymentBox__slideDownText--caution::before {
position: absolute;
content: '※';
top: 0;
left: 0;
}
.paymentBox__moreButtonBox {
text-align: center;
margin: 20px 0 0 0;
}
.paymentBox__moreButton {
margin: 20px 0 0;
border: 1px solid #cccccc;
text-align: center;
position: relative;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
display: inline-block;
line-height: 1;
border-radius: 17px;
padding: 6px 34px 8px 13px;
position: relative;
width: auto;
color: #1b2433;
font-size: 14px;
cursor: pointer;
background-color: #fff;
margin: 0 0 0;
}
.paymentBox__moreButton::after {
content: '';
position: absolute;
right: 20px;
background-color: #cccccc;
width: 1px;
height: 11px;
top: 40%;
margin: 0 0 0 0;
-webkit-transform: rotate(-40deg) translateY(-50%);
transform: rotate(-40deg) translateY(-50%);
}
.paymentBox__moreButton::before {
content: '';
position: absolute;
right: 21px;
background-color: #cccccc;
width: 1px;
height: 11px;
top: 40%;
margin: 0 0 0 0;
-webkit-transform: rotate(40deg) translateY(-50%);
transform: rotate(40deg) translateY(-50%);
}
.paymentBox__slideDownListItem {
position: relative;
padding: 0 0 0 1em;
}
.paymentBox__slideDownListItem::before {
content: '';
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background-color: #182432;
top: 10px;
left: 3px;
}
.paymentBox__annotationBox {
width: 560px;
margin: 30px auto 0;
}
.paymentBox__automaticText {
font-size: 14px;
margin: 10px 0 0;
}
.paymentBox__automaticModalText {
color: #ab8e48;
font-size: 14px;
margin: 10px 0 0;
cursor: pointer;
}
.paymentBox__dialogInner {
padding: 30px;
}
.paymentBox__dialogListItem {
padding: 0 0 0 1.5em;
position: relative;
margin: 20px 0 0;
font-size: 14px;
}
.paymentBox__dialogListItem::before {
content: '※';
position: absolute;
top: 0;
left: 0em;
}
.paymentBox__dialogListItem:first-child {
margin: 0 0 0;
}
.paymentBox__warningBox {
border: 1px solid #cc0000;
background-color: #fff2f2;
padding: 24px;
color: #cc0000;
border-radius: 6px;
width: 560px;
margin: 40px auto -40px;
}
.paymentBox__warningTitle {
font-size: 14px;
font-weight: bold;
}
.paymentBox__warningText {
font-size: 12px;
}
.cardDialog {
color: #1d2334;
font-size: 14px;
padding: 30px;
}
.cardDialog__title {
font-size: 15px;
}
.cardDialog__text {
margin: 10px 0 0 0;
}
.cardDialog__imageBox {
text-align: center;
margin: 20px auto 0;
width: 215px;
}
.cardDialog__image {
width: 100%;
}
.cardDialog__caution {
color: #cc0000;
margin: 20px 0 0 0;
}
.paymentFinish {
color: #182432;
font-size: 14px;
}
.paymentFinish__inner {
margin: 80px 80px 40px;
}
.paymentFinish__title {
font-size: 20px;
text-align: center;
margin: 0 0 10px;
}
.paymentFinish__text {
font-size: 16px;
margin: 5px 0 0;
text-align: center;
}
.paymentFinish__subText {
margin: 0 0 0;
text-align: center;
color: #888888;
}
.paymentFinish__contentBox {
width: 720px;
margin: auto;
}
.paymentFinish__list {
margin: 45px 0 0;
width: 720px;
}
.paymentFinish__list:after {
content: "";
clear: both;
display: block;
}
.paymentFinish__listText {
width: 400px;
float: left;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute;
top: 50%;
}
.paymentFinish__buttonBox {
position: absolute;
top: 50%;
right: 20px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 230px;
float: right;
}
.paymentFinish__readButton {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
padding: 7px 10px 8px 10px;
color: #fff;
border: 0px solid #cccccc;
box-shadow: 0 -2px 0 0 #00abbb inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
display: inline-block;
padding: 7px 18px 9px 18px;
}
.paymentFinish__readButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.paymentFinish__readButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.paymentFinish__readButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.paymentFinish__readButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.paymentFinish__readButton.is-buttonCancel span {
color: #999999 !important;
}
.paymentFinish__readButton.is-buttonCancel span::before {
color: #999999 !important;
}
.paymentFinish__readButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.paymentFinish__readButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.paymentFinish__readButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.paymentFinish__readButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.paymentFinish__readButton.is-buttonCancel span {
color: #999999 !important;
}
.paymentFinish__readButton.is-buttonCancel span::before {
color: #999999 !important;
}
.paymentFinish__readTerminalButton {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
display: inline-block;
float: right;
padding: 6px 18px 8px 18px;
}
.paymentFinish__readTerminalButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.paymentFinish__readTerminalButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.paymentFinish__readTerminalButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.paymentFinish__readTerminalButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.paymentFinish__readTerminalButton.is-buttonCancel span {
color: #999999 !important;
}
.paymentFinish__readTerminalButton.is-buttonCancel span::before {
color: #999999 !important;
}
.paymentFinish__listItem {
min-height: 76px;
border-bottom: 1px solid #eeeeee;
padding: 0 20px;
position: relative;
}
.paymentFinish__listItem:first-child {
border-top: 1px solid #eeeeee;
}
.paymentFinish__bottomArea {
text-align: center;
margin: 30px 0 100px;
}
.paymentFinish__innerButtonArea {
text-align: center;
margin: 24px 0 0;
}
.paymentFinish__bottomButton, .paymentFinish__bottomButton--home {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
width: 240px;
display: inline-block;
text-align: center;
margin: 0 12px;
}
.paymentFinish__bottomButton.is-buttonDisabled, .is-buttonDisabled.paymentFinish__bottomButton--home {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.paymentFinish__bottomButton.is-buttonDisabled span, .is-buttonDisabled.paymentFinish__bottomButton--home span {
color: #bbbbbb !important;
}
.paymentFinish__bottomButton.is-buttonDisabled span::before, .is-buttonDisabled.paymentFinish__bottomButton--home span::before {
color: #bbbbbb !important;
}
.paymentFinish__bottomButton.is-buttonCancel, .is-buttonCancel.paymentFinish__bottomButton--home {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.paymentFinish__bottomButton.is-buttonCancel span, .is-buttonCancel.paymentFinish__bottomButton--home span {
color: #999999 !important;
}
.paymentFinish__bottomButton.is-buttonCancel span::before, .is-buttonCancel.paymentFinish__bottomButton--home span::before {
color: #999999 !important;
}
.paymentFinish__bottomButton--home {
font-weight: normal;
}
.paymentFinish__bottomButton--spOnly {
display: none;
}
.paymentFinish__nextButton {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
border: 0 solid #cccccc;
color: #fff;
box-shadow: 0 -3px 0px 0px #00a2b1 inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
cursor: pointer;
width: 240px;
display: inline-block;
margin: 0 12px;
}
.paymentFinish__nextButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.paymentFinish__nextButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.paymentFinish__nextButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.paymentFinish__nextButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.paymentFinish__nextButton.is-buttonCancel span {
color: #999999 !important;
}
.paymentFinish__nextButton.is-buttonCancel span::before {
color: #999999 !important;
}
.paymentFinish__nextButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.paymentFinish__nextButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.paymentFinish__nextButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.paymentFinish__nextButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.paymentFinish__nextButton.is-buttonCancel span {
color: #999999 !important;
}
.paymentFinish__nextButton.is-buttonCancel span::before {
color: #999999 !important;
}
.paymentFinish__br {
display: none;
}
.paymentFinish__infomationBox {
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
padding: 20px 0;
margin: 35px 0 0;
position: relative;
min-height: 120px;
}
.paymentFinish__infomationBox:after {
content: "";
clear: both;
display: block;
}
.paymentFinish__bookTitle {
float: left;
width: 310px;
font-size: 16px;
font-weight: bold;
box-sizing: border-box;
padding: 0 20px 0 0;
}
.paymentFinish__infomationList {
width: 408px;
float: left;
position: absolute;
left: 310px;
}
.paymentFinish__infomationList:after {
content: "";
clear: both;
display: block;
}
.paymentFinish__infomationTerm {
float: left;
width: 108px;
position: relative;
}
.paymentFinish__infomationTerm::after {
content: ':';
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto 0;
}
.paymentFinish__infomationDescription {
width: 300px;
float: left;
padding: 0 0 0 16px;
}
.paymentFinish + .recommendModule {
margin-top: 40px;
position: relative;
}
.paymentFinish + .recommendModule::before {
content: '';
position: absolute;
left: 10px;
right: 10px;
top: -40px;
border-top: 1px solid #eee;
}
.paymentFinish + .recommendModule iframe {
position: relative;
}
.readEnd__title {
font-size: 24px;
position: relative;
}
.readEnd__subText {
font-size: 14px;
margin: 15px 0 0;
}
.readEnd__subText--short {
width: 300px;
}
.readEnd__subTitle {
font-size: 20px;
font-weight: normal;
}
.readEnd__itemBox {
padding: 0 40px 0;
margin: 30px 0 0;
}
.readEnd__itemBox:after {
content: "";
clear: both;
display: block;
}
.readEnd__imageBox {
float: left;
padding: 0;
margin: 0 0 0 -100%;
width: 120px;
width: 240px;
}
.readEnd__imageBox .readEnd__link {
display: inline-block;
width: 100%;
}
.readEnd__imageWrapper {
position: relative;
margin: 0;
max-width: 145px;
height: 210px;
font-size: 0;
white-space: nowrap;
text-align: center;
max-width: none;
height: auto;
}
.readEnd__imageWrapper.js-imgLoading > * {
opacity: 0;
}
.readEnd__imageWrapper.js-imgLoading .loadingIcon {
opacity: 1;
font-size: 10px;
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 1.2em;
height: 1.2em;
margin: auto;
text-indent: -9999em;
color: #d1d5d8;
background: #d1d5d8;
border-radius: 50%;
line-height: 1;
}
.readEnd__imageWrapper.js-imgLoading .loadingIcon::before, .readEnd__imageWrapper.js-imgLoading .loadingIcon::after {
position: absolute;
top: 0;
width: 1.2em;
height: 1.2em;
content: '';
background: #d1d5d8;
border-radius: 50%;
}
.readEnd__imageWrapper.js-imgLoading .loadingIcon::before {
left: -2em;
}
.readEnd__imageWrapper.js-imgLoading .loadingIcon::after {
left: 2em;
}
.readEnd__imageWrapper::before {
content: '';
width: 1px;
height: 210px;
display: inline-block;
margin-left: -1px;
}
.readEnd__imageWrapper::before {
display: none;
}
.readEnd__image {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
display: inline-block;
min-width: 75%;
max-width: 100%;
max-height: 100%;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
}
.readEnd__recommendBoxWrapper {
margin: 30px 0 0;
}
.readEnd__itemInner {
margin: 20px 0 0;
background-color: #f4f6f8;
border: 1px solid #dedede;
border-radius: 6px;
padding: 30px;
}
.readEnd__itemInner:after {
content: "";
clear: both;
display: block;
}
.readEnd__infomationBox {
float: left;
text-align: left;
font-size: 14px;
width: 100%;
padding: 0 0 0 140px;
line-height: 1.6em;
padding: 0 0 0 270px;
}
.readEnd__infomationBox:after {
content: "";
clear: both;
display: block;
}
.readEnd__infomationBoxInner {
width: -webkit-calc(100% - 260px);
width: calc(100% - 260px);
float: left;
padding: 0 40px 0 0;
box-sizing: border-box;
}
.readEnd__infoBoxCenterInner {
width: -webkit-calc(100% - 7px);
width: calc(100% - 7px);
display: inline-block;
vertical-align: middle;
}
.readEnd__bookTitle {
font-size: 16px;
color: #1d2334;
font-weight: bold;
word-wrap: break-word;
line-height: 1.6em;
}
.readEnd__text {
color: #888;
font-size: 12px;
}
.readEnd__text a {
color: #888;
}
.readEnd__link {
display: inline-block;
}
.readEnd__link:after {
content: "";
clear: both;
display: block;
}
.readEnd__itemText {
color: #888;
font-size: 12px;
margin: 10px 0 0;
}
.readEnd__itemText a {
color: #888;
}
.readEnd__starBox {
margin: 0 0 0;
margin: 10px 0 0;
}
.readEnd__starBox:after {
content: "";
clear: both;
display: block;
}
.readEnd__star {
margin: 6px 0 0;
}
.readEnd__star:after {
content: "";
clear: both;
display: block;
}
.readEnd__starList {
display: inline-block;
float: left;
margin: 0 5px 0 0;
font-size: 20px;
line-height: 1;
}
.readEnd__starList:after {
content: "";
clear: both;
display: block;
}
.readEnd__starItem {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
}
.readEnd__starItem::before {
content: "";
display: block;
text-indent: 0;
}
.readEnd__starItem::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.readEnd__starItem--on {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
color: #ffb349;
}
.readEnd__starItem--on::before {
content: "";
display: block;
text-indent: 0;
}
.readEnd__starItem--on::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.readEnd__starItem--half {
position: relative;
float: left;
color: #cccccc;
margin: 0 1px;
}
.readEnd__starItem--half::before {
content: "";
display: block;
text-indent: 0;
}
.readEnd__starItem--half::before {
position: relative;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
}
.readEnd__starItem--half::after {
content: "";
display: block;
text-indent: 0;
}
.readEnd__starItem--half::after {
color: #ffb349;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
right: 50%;
overflow: hidden;
}
.readEnd__starNumber {
display: inline-block;
font-size: 12px;
float: left;
line-height: 1;
position: relative;
top: 7px;
color: #888888;
top: 5px;
}
.readEnd__priceBox {
width: 260px;
float: right;
}
.readEnd__priceStrike {
color: #888;
font-size: 14px;
color: #bbb;
}
.readEnd__price {
font-size: 18px;
color: #c01200;
position: relative;
}
.readEnd__price .readEnd__tax {
font-size: 12px;
}
.readEnd__price--original {
font-size: 18px;
color: #c01200;
position: relative;
color: rgba(20, 35, 52, 0.4);
font-size: 14px;
font-weight: normal;
display: inline-block;
font-weight: bold;
color: #bbb;
}
.readEnd__tax {
color: #888;
font-size: 14px;
font-weight: normal;
}
.is-negative .readEnd__tax {
color: rgba(20, 35, 52, 0.4);
font-size: 8px;
margin: 5px 0 0;
}
.readEnd__point {
font-size: 14px;
margin: 5px 0 0;
}
.readEnd__discount {
color: #fff;
background-color: #cc0000;
font-weight: bold;
padding: 3px 5px;
line-height: 1;
font-size: 12px;
position: relative;
top: -3px;
}
.readEnd__buttonBox {
background-color: #e9e8e7;
padding: 14px 0;
text-align: center;
}
.readEnd__button {
display: inline-block;
border: 1px solid #444444;
text-align: center;
position: relative;
line-height: 40px;
border-radius: 6px;
font-size: 16px;
font-weight: bold;
background: -webkit-linear-gradient(top, #797a75 0%, #54564f 100%);
background: linear-gradient(to bottom, #797a75 0%, #54564f 100%);
color: #fff;
margin: 0 30px 0;
width: 180px;
}
.readEnd__reviewButton {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
width: 170px;
margin: 0 auto 0;
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.readEnd__reviewButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.readEnd__reviewButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.readEnd__reviewButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.readEnd__reviewButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.readEnd__reviewButton.is-buttonCancel span {
color: #999999 !important;
}
.readEnd__reviewButton.is-buttonCancel span::before {
color: #999999 !important;
}
.readEnd__label {
margin: 0 0 10px;
}
.readEnd__labelItem {
display: inline-block;
height: 24px;
line-height: 24px;
color: #fff;
padding: 0 8px;
background: #d4b15c;
font-size: 12px;
font-weight: bold;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
position: relative;
margin: 0 18px 0 0;
}
.readEnd__labelItem::before {
content: '';
position: absolute;
right: -6px;
width: 0;
height: 0;
top: 0;
border-style: solid;
border-width: 12px 7px 12px 0;
border-color: #d4b15c transparent #d4b15c #d4b15c;
}
.readEnd__labelItem::after {
content: '';
position: absolute;
right: -5px;
bottom: 0;
width: 5px;
height: 4px;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
}
.readEnd__labelItem.is-redBadge {
background: #c00;
}
.readEnd__labelItem.is-redBadge::before {
border-color: #c00 transparent #c00 #c00;
}
.readEnd__endBox {
border-bottom: 1px solid #eeeeee;
width: -webkit-calc(100% - 80px);
width: calc(100% - 80px);
margin: auto;
}
.readEnd__endBoxInner {
text-align: left;
padding: 50px 20px 40px 100px;
position: relative;
background-color: #fff;
width: 600px;
margin: auto;
}
.readEnd__endBoxInner::before {
background-image: url(../materials/sprites.png);
background-position: -239px -315px;
width: 80px;
height: 93px;
content: '';
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.readEnd__infomationButtonBox {
padding: 0 0 0;
}
.readEnd__priceItemBox {
border-bottom: 1px solid #dedede;
padding: 0 0 20px;
margin-bottom: 20px;
}
.readEnd__infomationButton {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
border: 0 solid #cccccc;
color: #fff;
box-shadow: 0 -3px 0px 0px #00a2b1 inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
cursor: pointer;
margin: 15px 0 0;
}
.readEnd__infomationButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.readEnd__infomationButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.readEnd__infomationButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.readEnd__infomationButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.readEnd__infomationButton.is-buttonCancel span {
color: #999999 !important;
}
.readEnd__infomationButton.is-buttonCancel span::before {
color: #999999 !important;
}
.readEnd__infomationButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.readEnd__infomationButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.readEnd__infomationButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.readEnd__infomationButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.readEnd__infomationButton.is-buttonCancel span {
color: #999999 !important;
}
.readEnd__infomationButton.is-buttonCancel span::before {
color: #999999 !important;
}
.readEnd__infomationButton:first-child {
margin: 0;
}
.readEnd__cartIcon {
position: relative;
padding: 0 0 0 30px;
}
.readEnd__cartIcon::before {
content: "";
display: block;
text-indent: 0;
}
.readEnd__cartIcon::before {
position: absolute;
display: inline-block;
top: 6px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 30px;
line-height: 0;
}
.readEnd__beginnerIcon {
position: relative;
padding: 0 0 0 24px;
}
.readEnd__beginnerIcon::before {
content: "";
display: block;
text-indent: 0;
}
.readEnd__beginnerIcon::before {
position: absolute;
display: inline-block;
top: 8px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 24px;
line-height: 0;
}
.readEnd__bookShelfIcon {
position: relative;
padding: 0 0 0 24px;
}
.readEnd__bookShelfIcon::before {
content: "";
display: block;
text-indent: 0;
}
.readEnd__bookShelfIcon::before {
position: absolute;
display: inline-block;
top: 6px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 24px;
line-height: 0;
}
.readEnd__recommendBox {
padding: 50px 0 0;
display: block;
position: relative;
margin: 0;
box-sizing: content-box;
height: 270px;
}
.readEnd__recommendBox + .readEnd__recommendBox {
margin: 50px 0 0;
position: relative;
}
.readEnd__recommendBox + .readEnd__recommendBox::before {
content: '';
position: absolute;
left: 10px;
right: 10px;
top: 0;
border-top: 1px solid #eeeeee;
}
.modalGeneral {
display: block;
visibility: hidden;
z-index: -1;
}
.modalGeneral__overlay {
position: fixed;
line-height: 1.7;
background-color: rgba(14, 18, 24, 0.7);
z-index: 1100;
color: #fff;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: -500px;
opacity: 0;
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
}
.modalGeneral.is-show {
visibility: visible;
z-index: auto;
}
.modalGeneral.is-show .modalGeneral__overlay {
opacity: 1;
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
}
.modalGeneral.is-show .modalGeneral__inner {
opacity: 1;
pointer-events: auto;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s, -webkit-transform 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s, -webkit-transform 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s, transform 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s, transform 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s, -webkit-transform 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s;
}
.modalGeneral__inner {
width: 100%;
position: fixed;
left: 50%;
top: 100px;
bottom: 100px;
z-index: 1100;
opacity: 0;
-webkit-transform: translate3d(-50%, 15px, 0);
transform: translate3d(-50%, 15px, 0);
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s, -webkit-transform 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s, -webkit-transform 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s, transform 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s, transform 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s, -webkit-transform 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s;
pointer-events: none;
}
@media screen and (max-height: 500px) {
.modalGeneral__inner {
top: 10%;
bottom: 10%;
}
}
.modalGeneral__contentWrapper, .modalGeneral__contentWrapper--wide, .modalGeneral__contentWrapper--middle, .modalGeneral__contentWrapper--narrowMiddle, .modalGeneral__contentWrapper--smallMiddle, .modalGeneral__contentWrapper--confined, .modalGeneral__contentWrapper--narrow {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: 2px;
color: #1d2334;
font-size: 14px;
width: 440px;
margin: auto;
}
.modalGeneral__contentWrapper--wide {
width: 800px;
}
.modalGeneral__contentWrapper--middle {
width: 560px;
}
.modalGeneral__contentWrapper--narrowMiddle {
width: 520px;
}
.modalGeneral__contentWrapper--smallMiddle {
width: 460px;
}
.modalGeneral__contentWrapper--confined {
width: 420px;
}
.modalGeneral__contentBox, .modalGeneral__contentBox--titleOnly, .modalGeneral__contentBox--bg {
margin: 0 25px;
}
.modalGeneral__contentBox--titleOnly {
margin: 0 25px 50px;
}
.modalGeneral__contentBox--bg {
background-color: #fff;
}
.modalGeneral__contentTitle {
font-size: 15px;
padding: 25px 0 0;
}
.modalGeneral__contentTitle + .modal__contentText {
margin: 10px 0 0;
}
.modalGeneral__listItem {
border-top: 1px dotted #eeeeee;
padding: 18px 0;
}
.modalGeneral__listItem:first-child {
border-top: 0px dotted #eeeeee;
}
.modalGeneral__contentClose, .modalGeneral__contentClose--bg {
text-align: center;
color: #ab8e48;
padding: 15px 0;
border-top: 1px solid #eeeeee;
cursor: pointer;
}
.modalGeneral__contentClose--bg {
background: #fff;
}
.modalGeneral__imageWrapper {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background: #fff;
border: 10px solid #fff;
}
.modalGeneral__imageZoom {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
max-width: 100%;
max-height: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.modalGeneral__titleBox {
border-bottom: 1px solid #dedede;
position: relative;
background-color: #f4f6f8;
text-align: center;
pointer-events: auto;
}
.modalGeneral__title {
font-size: 16px;
padding: 20px 0;
}
.modalGeneral__closeButton {
white-space: nowrap;
overflow: hidden;
text-indent: 120%;
display: inline-block;
width: 30px;
height: 30px;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
right: 20px;
cursor: pointer;
}
.modalGeneral__closeButton::before {
content: "";
display: block;
text-indent: 0;
}
.modalGeneral__closeButton::before {
position: absolute;
display: inline-block;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #182432;
font-size: 24px;
}
.modalGeneral__imageZoomClose {
cursor: pointer;
position: absolute;
right: -10px;
top: -44px;
width: 30px;
height: 30px;
text-align: right;
}
.modalGeneral__imageZoomClose::before {
content: "";
display: block;
text-indent: 0;
}
.modalGeneral__imageZoomClose::before {
height: 1.1em;
line-height: 1;
color: #fff;
font-size: 24px;
}
.modalGeneral__content {
position: absolute;
left: 0;
right: 0;
top: 66px;
bottom: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
min-height: 100px;
}
.modalGeneral__contentInner {
background: #fff;
pointer-events: auto;
}
.modalGeneral__itemNoImageWrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.modalGeneral__itemNoImage {
display: inline-block;
position: relative;
background: #f5f5f5 url(../materials/noimage.png) 0 0 no-repeat;
background-size: 100% 100%;
background-position: center bottom;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
width: 145px;
height: 0;
padding: 139% 0 0;
word-wrap: break-word;
white-space: normal;
line-height: 1.4;
}
.modalGeneral__itemNoImage.is-adult {
font-size: 14px;
}
.modalGeneral__itemNoImage.is-adult::before {
content: "";
display: block;
text-indent: 0;
}
.modalGeneral__itemNoImage.is-adult div {
top: -webkit-calc(50% - 0);
top: calc(50% - 0);
padding: 10px 0 40px;
}
.modalGeneral__itemNoImage.is-adult::before {
position: absolute;
display: inline-block;
left: 0;
right: 0;
top: 55px;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #c0c0c0;
font-size: 28px;
z-index: 1;
text-align: center;
}
.modalGeneral__itemNoImageInner {
position: absolute;
left: 5px;
right: 5px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #888;
background: #f5f5f5;
padding: 10px 0;
}
.modalGeneral__noImageTitle {
font-size: 12px;
font-weight: bold;
padding: 0 0 5px;
max-height: 2.8em;
overflow: hidden;
}
.modalGeneral__noImageAuthor {
font-size: 12px;
max-height: 2.8em;
overflow: hidden;
}
.recentNewsDetail {
position: relative;
margin: 80px auto 60px;
width: 560px;
font-size: 14px;
color: #1b2433;
}
.recentNewsDetail__title {
font-size: 20px;
margin: 0 0 10px;
}
.recentNewsDetail__itemBox {
position: relative;
height: 30px;
}
.recentNewsDetail__titleBox {
padding: 0 0 20px;
border-bottom: 1px solid #dedede;
}
.recentNewsDetail__itemTag {
position: absolute;
left: 0;
top: 0;
bottom: 0;
color: #fff;
font-size: 12px;
margin: auto 0;
line-height: 26px !important;
height: 26px;
border-radius: 13px;
text-align: center;
background: #bbb;
width: 90px;
}
.recentNewsDetail__itemDate {
position: absolute;
left: 110px;
top: 0;
bottom: 0;
font-size: 14px;
height: 1.6em;
line-height: 1.6 !important;
margin: auto 0;
}
.recentNewsDetail__itemText {
padding: 20px 40px 20px 220px;
font-size: 14px;
}
.recentNewsDetail__contentBox {
padding: 30px 0 0 0;
}
.recentNewsDetail__buttonBox {
margin: 30px 0 0;
text-align: center;
}
.recentNewsDetail__button {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
width: 240px;
margin: auto;
}
.recentNewsDetail__button.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.recentNewsDetail__button.is-buttonDisabled span {
color: #bbbbbb !important;
}
.recentNewsDetail__button.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.recentNewsDetail__button.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.recentNewsDetail__button.is-buttonCancel span {
color: #999999 !important;
}
.recentNewsDetail__button.is-buttonCancel span::before {
color: #999999 !important;
}
.wysiwyg {
font-size: 16px;
}
.wysiwyg h2 {
font-size: 22px;
font-weight: bold;
}
.wysiwyg p {
line-height: 2;
}
.wysiwyg h3 {
position: relative;
padding: 0 0 0 1em;
line-height: 2;
}
.wysiwyg h3::before {
content: '';
position: absolute;
width: 12px;
height: 12px;
top: -3px;
bottom: 0;
left: 0;
margin: auto 0;
background-color: #1b2433;
}
.wysiwyg li {
position: relative;
padding: 0 0 0 1em;
line-height: 40px;
}
.wysiwyg li::before {
content: '';
position: absolute;
width: 2px;
height: 2px;
border-radius: 50%;
top: 18px;
left: 3px;
margin: auto 0;
background-color: #1b2433;
}
.wysiwyg ol li {
padding: 0 0 0 2em;
}
.wysiwyg ol li::before {
top: 0;
left: -3px;
width: 24px;
text-align: right;
color: #c2a359;
background-color: transparent;
font-weight: bold;
bottom: auto;
}
.wysiwyg ol li:nth-child(1)::before {
content: "1.";
}
.wysiwyg ol li:nth-child(2)::before {
content: "2.";
}
.wysiwyg ol li:nth-child(3)::before {
content: "3.";
}
.wysiwyg ol li:nth-child(4)::before {
content: "4.";
}
.wysiwyg ol li:nth-child(5)::before {
content: "5.";
}
.wysiwyg ol li:nth-child(6)::before {
content: "6.";
}
.wysiwyg ol li:nth-child(7)::before {
content: "7.";
}
.wysiwyg ol li:nth-child(8)::before {
content: "8.";
}
.wysiwyg ol li:nth-child(9)::before {
content: "9.";
}
.wysiwyg ol li:nth-child(10)::before {
content: "10.";
}
.wysiwyg ol li:nth-child(11)::before {
content: "11.";
}
.wysiwyg ol li:nth-child(12)::before {
content: "12.";
}
.wysiwyg ol li:nth-child(13)::before {
content: "13.";
}
.wysiwyg ol li:nth-child(14)::before {
content: "14.";
}
.wysiwyg ol li:nth-child(15)::before {
content: "15.";
}
.wysiwyg ol li:nth-child(16)::before {
content: "16.";
}
.wysiwyg ol li:nth-child(17)::before {
content: "17.";
}
.wysiwyg ol li:nth-child(18)::before {
content: "18.";
}
.wysiwyg ol li:nth-child(19)::before {
content: "19.";
}
.wysiwyg ol li:nth-child(20)::before {
content: "20.";
}
.wysiwyg ol li:nth-child(21)::before {
content: "21.";
}
.wysiwyg ol li:nth-child(22)::before {
content: "22.";
}
.wysiwyg ol li:nth-child(23)::before {
content: "23.";
}
.wysiwyg ol li:nth-child(24)::before {
content: "24.";
}
.wysiwyg ol li:nth-child(25)::before {
content: "25.";
}
.wysiwyg ol li:nth-child(26)::before {
content: "26.";
}
.wysiwyg ol li:nth-child(27)::before {
content: "27.";
}
.wysiwyg ol li:nth-child(28)::before {
content: "28.";
}
.wysiwyg ol li:nth-child(29)::before {
content: "29.";
}
.wysiwyg ol li:nth-child(30)::before {
content: "30.";
}
.wysiwyg a {
color: #c2a359;
}
.wysiwyg blockquote {
position: relative;
display: inline-block;
padding: 24px;
margin: 0 0 0 0;
line-height: 1.6em;
background: #f5f5f5;
}
.wysiwyg blockquote::before {
background-image: url(../materials/sprites.png);
background-position: -14px -222.5px;
width: 10px;
height: 10px;
background-size: 290px 251.5px;
content: '';
position: absolute;
top: 8px;
left: 8px;
}
.wysiwyg blockquote::after {
background-image: url(../materials/sprites.png);
background-position: -104px -222.5px;
width: 10px;
height: 10px;
background-size: 290px 251.5px;
content: '';
position: absolute;
bottom: 8px;
right: 8px;
}
.featureVisual {
font-size: 14px;
}
.featureVisual__contentWrapper {
position: relative;
padding: 50px 80px 30px;
background-color: #000;
overflow: hidden;
}
.featureVisual__contentBg {
position: absolute;
width: 100%;
z-index: 0;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
opacity: .7;
padding-bottom: 70%;
background-size: contain;
background-position: center;
}
.featureVisual__content {
position: relative;
z-index: 1;
}
.featureVisual__imageBox {
width: 300px;
margin: 0 35px 0 0;
display: inline-block;
font-size: 0;
}
.featureVisual__image {
width: 100%;
}
.featureVisual__infoBox {
font-size: 0;
width: -webkit-calc(100% - 350px);
width: calc(100% - 350px);
color: #fff;
display: inline-block;
vertical-align: top;
}
.featureVisual__title {
font-size: 20px;
font-weight: bold;
}
.featureVisual__date {
font-size: 14px;
margin: 10px 0 0 0;
}
.featureVisual__shareList {
margin: 10px 0 0 0;
}
.featureVisual__shareList:after {
content: "";
clear: both;
display: block;
}
.featureVisual__shareItem {
display: inline-block;
vertical-align: middle;
margin: 0 15px 0 0;
}
.featureVisual__shareItem .fb-like {
top: -9px;
}
.featureVisual__description {
font-size: 16px;
margin: 10px 0 0 0;
}
.featureSubColumn {
width: 320px;
float: right;
background-color: #f4f6f8;
position: relative;
z-index: 1;
}
.featureMainColumn {
float: left;
width: -webkit-calc(100% - 320px);
width: calc(100% - 320px);
}
.featureMainColumn__inner {
padding: 70px 80px 90px;
width: 100%;
box-sizing: border-box;
}
.featureMainColumn .wysiwyg {
margin: 20px 0 0;
}
.featureListItem {
font-size: 14px;
}
.featureListItem__list, .featureListItem__listParallel {
letter-spacing: 0;
font-size: 0;
}
.featureListItem__list:after, .featureListItem__listParallel:after {
content: "";
clear: both;
display: block;
}
.featureListItem__listParallel {
margin: 5px 0 0 -40px;
width: -webkit-calc(100% + 40px);
width: calc(100% + 40px);
}
.featureListItem__listParallel .featureListItem__listItem {
width: 20%;
padding: 0 0 0 40px;
margin: 20px 0 0 0;
font-size: 0;
}
.featureListItem__listParallel .featureListItem__imageBox {
float: none;
width: 100%;
}
.featureListItem__listParallel .featureListItem__infoBox {
float: none;
width: 100%;
margin: 15px 0 0 0;
}
.featureListItem__listParallel .featureListItem__itemNoImage {
position: absolute;
left: 0;
bottom: 0;
}
.featureListItem__listItem {
vertical-align: top;
display: inline-block;
width: -webkit-calc(50% - 5px);
width: calc(50% - 5px);
font-size: 0;
letter-spacing: normal;
line-height: 1.6;
margin: 25px 0 0;
padding: 0 25px 0 0;
box-sizing: border-box;
vertical-align: top;
}
.featureListItem__listItemInner:after {
content: "";
clear: both;
display: block;
}
.featureListItem__infoBox {
float: right;
width: -webkit-calc(100% - 140px);
width: calc(100% - 140px);
}
.featureListItem__itemImageWrapper {
position: relative;
width: 100%;
font-size: 0;
}
.featureListItem__itemImageWrapper.js-imgLoading > * {
opacity: 0;
}
.featureListItem__itemImageWrapper.js-imgLoading .loadingIcon {
opacity: 1;
font-size: 10px;
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 1.2em;
height: 1.2em;
margin: auto;
text-indent: -9999em;
color: #d1d5d8;
background: #d1d5d8;
border-radius: 50%;
line-height: 1;
}
.featureListItem__itemImageWrapper.js-imgLoading .loadingIcon::before, .featureListItem__itemImageWrapper.js-imgLoading .loadingIcon::after {
position: absolute;
top: 0;
width: 1.2em;
height: 1.2em;
content: '';
background: #d1d5d8;
border-radius: 50%;
}
.featureListItem__itemImageWrapper.js-imgLoading .loadingIcon::before {
left: -2em;
}
.featureListItem__itemImageWrapper.js-imgLoading .loadingIcon::after {
left: 2em;
}
.featureListItem__itemImageWrapper::before {
content: "";
display: block;
padding-top: 150%;
}
.featureListItem__image {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
display: inline-block;
min-width: 75%;
max-width: 100%;
max-height: 100%;
position: absolute;
left: 0;
bottom: 0;
right: 0;
margin: 0 auto;
}
.featureListItem__image.is-horizontal {
width: 100%;
}
.featureListItem__image.is-vertical {
height: 100%;
width: auto;
}
.featureListItem__imageBox {
float: left;
width: 120px;
margin: 0 20px 0 0;
}
.featureListItem__imageBox .featureListItem__link {
display: block;
}
.featureListItem__itemNoImage {
display: inline-block;
position: relative;
background: #f5f5f5 url(../materials/noimage.png) 0 0 no-repeat;
background-size: 100% 100%;
background-position: center bottom;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
width: 145px;
height: 0;
padding: 139% 0 0;
word-wrap: break-word;
white-space: normal;
line-height: 1.4;
width: 100%;
height: 0;
padding-top: 139%;
}
.featureListItem__itemNoImage.is-adult {
font-size: 14px;
}
.featureListItem__itemNoImage.is-adult::before {
content: "";
display: block;
text-indent: 0;
}
.featureListItem__itemNoImage.is-adult div {
top: -webkit-calc(50% - 0);
top: calc(50% - 0);
padding: 10px 0 40px;
}
.featureListItem__itemNoImage.is-adult::before {
position: absolute;
display: inline-block;
left: 0;
right: 0;
top: 55px;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #c0c0c0;
font-size: 28px;
z-index: 1;
text-align: center;
}
.featureListItem__itemNoImageInner {
position: absolute;
left: 5px;
right: 5px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #888;
background: #f5f5f5;
padding: 10px 0;
}
.featureListItem__noImageTitle {
font-size: 12px;
font-weight: bold;
padding: 0 0 5px;
max-height: 2.8em;
overflow: hidden;
}
.featureListItem__noImageAuthor {
font-size: 12px;
max-height: 2.8em;
overflow: hidden;
}
.featureListItem__link {
position: relative;
}
.featureListItem__labelList {
margin: 0 0 10px;
}
.featureListItem__labelList:after {
content: "";
clear: both;
display: block;
}
.featureListItem__labelItem {
display: inline-block;
font-size: 12px;
line-height: 1;
color: #ab8e48;
border: 1px solid #c3a358;
padding: 4px 6px;
color: #bda450;
margin: 0 5px 0 0;
}
.featureListItem__title {
font-size: 14px;
font-weight: bold;
}
.featureListItem__text {
color: #888888;
font-size: 12px;
margin: 5px 0 0;
}
.featureListItem__text .featureListItem__link {
color: #888888;
}
.featureListItem__priceBox {
margin: 5px 0 0;
}
.featureListItem__price {
font-size: 18px;
color: #c01200;
position: relative;
}
.featureListItem__tax {
color: #888;
font-size: 14px;
font-weight: normal;
font-size: 12px;
}
.is-negative .featureListItem__tax {
color: rgba(20, 35, 52, 0.4);
font-size: 8px;
margin: 5px 0 0;
}
.featureListItem__button {
display: inline-block;
text-align: center;
position: relative;
height: 34px;
line-height: 34px;
border-radius: 18px;
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 0 15px 0;
width: 80px;
box-shadow: 0 -2px 0 0 #00abbb inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
margin: 5px 0 0;
}
.featureListItem__button::before {
content: "";
display: block;
text-indent: 0;
}
.featureListItem__button::before {
position: relative;
display: inline-block;
top: 0px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 28px;
line-height: 1;
}
.featureListItem__button.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.featureListItem__button.is-buttonDisabled span {
color: #bbbbbb !important;
}
.featureListItem__button.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.featureListItem__button.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.featureListItem__button.is-buttonCancel span {
color: #999999 !important;
}
.featureListItem__button.is-buttonCancel span::before {
color: #999999 !important;
}
.featureListItem__button::before {
content: "";
display: block;
text-indent: 0;
}
.featureListItem__button--reservation {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
width: 80px;
font-size: 14px;
font-weight: bold;
padding: 9px 12px 9px;
margin: 10px 5px 0 0;
height: 34px;
vertical-align: bottom;
}
.featureListItem__button--reservation.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.featureListItem__button--reservation.is-buttonDisabled span {
color: #bbbbbb !important;
}
.featureListItem__button--reservation.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.featureListItem__button--reservation.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.featureListItem__button--reservation.is-buttonCancel span {
color: #999999 !important;
}
.featureListItem__button--reservation.is-buttonCancel span::before {
color: #999999 !important;
}
.featureListItem__button--read {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
width: 120px;
font-size: 14px;
font-weight: bold;
padding: 9px 12px 9px;
margin: 10px 5px 0 0;
height: 34px;
vertical-align: bottom;
}
.featureListItem__button--read.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.featureListItem__button--read.is-buttonDisabled span {
color: #bbbbbb !important;
}
.featureListItem__button--read.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.featureListItem__button--read.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.featureListItem__button--read.is-buttonCancel span {
color: #999999 !important;
}
.featureListItem__button--read.is-buttonCancel span::before {
color: #999999 !important;
}
.featureListItem__button--bookShelfAdd {
display: inline-block;
text-align: center;
position: relative;
height: 34px;
line-height: 34px;
border-radius: 18px;
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 0 15px 0;
width: 80px;
box-shadow: 0 -2px 0 0 #00abbb inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
white-space: nowrap;
overflow: hidden;
text-indent: 120%;
margin: 5px 0 0;
}
.featureListItem__button--bookShelfAdd::before {
content: "";
display: block;
text-indent: 0;
}
.featureListItem__button--bookShelfAdd::before {
position: relative;
display: inline-block;
top: 0px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 28px;
line-height: 1;
}
.featureListItem__button--bookShelfAdd.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.featureListItem__button--bookShelfAdd.is-buttonDisabled span {
color: #bbbbbb !important;
}
.featureListItem__button--bookShelfAdd.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.featureListItem__button--bookShelfAdd.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.featureListItem__button--bookShelfAdd.is-buttonCancel span {
color: #999999 !important;
}
.featureListItem__button--bookShelfAdd.is-buttonCancel span::before {
color: #999999 !important;
}
.featureListItem__button--bookShelfAdd::before {
content: "";
display: block;
text-indent: 0;
}
.featureListItem__buttonStyle {
display: inline-block;
text-align: center;
position: relative;
height: 34px;
line-height: 34px;
border-radius: 18px;
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 0 15px 0;
width: 80px;
box-shadow: 0 -2px 0 0 #00abbb inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
white-space: nowrap;
overflow: hidden;
text-indent: 120%;
margin: 5px 0 0;
}
.featureListItem__buttonStyle::before {
content: "";
display: block;
text-indent: 0;
}
.featureListItem__buttonStyle::before {
position: relative;
display: inline-block;
top: 0px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 28px;
line-height: 1;
}
.featureListItem__buttonStyle.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.featureListItem__buttonStyle.is-buttonDisabled span {
color: #bbbbbb !important;
}
.featureListItem__buttonStyle.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.featureListItem__buttonStyle.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.featureListItem__buttonStyle.is-buttonCancel span {
color: #999999 !important;
}
.featureListItem__buttonStyle.is-buttonCancel span::before {
color: #999999 !important;
}
.featureListItem__buttonStyle::before {
content: "";
display: block;
text-indent: 0;
}
.featureListItem__buttonStyle::before {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.featureListItem__buttonStyle--bookShelfAdd {
display: inline-block;
text-align: center;
position: relative;
height: 34px;
line-height: 34px;
border-radius: 18px;
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 0 15px 0;
width: 80px;
box-shadow: 0 -2px 0 0 #00abbb inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
white-space: nowrap;
overflow: hidden;
text-indent: 120%;
margin: 5px 0 0;
}
.featureListItem__buttonStyle--bookShelfAdd::before {
content: "";
display: block;
text-indent: 0;
}
.featureListItem__buttonStyle--bookShelfAdd::before {
position: relative;
display: inline-block;
top: 0px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 28px;
line-height: 1;
}
.featureListItem__buttonStyle--bookShelfAdd.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.featureListItem__buttonStyle--bookShelfAdd.is-buttonDisabled span {
color: #bbbbbb !important;
}
.featureListItem__buttonStyle--bookShelfAdd.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.featureListItem__buttonStyle--bookShelfAdd.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.featureListItem__buttonStyle--bookShelfAdd.is-buttonCancel span {
color: #999999 !important;
}
.featureListItem__buttonStyle--bookShelfAdd.is-buttonCancel span::before {
color: #999999 !important;
}
.featureListItem__buttonStyle--bookShelfAdd::before {
content: "";
display: block;
text-indent: 0;
}
.featureListItem__buttonStyle--bookShelfAdd::before {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.featureListItem__iconCart {
padding: 0 0 0 24px;
position: relative;
display: inline-block;
}
.featureListItem__iconCart::before {
content: "";
display: block;
text-indent: 0;
}
.featureListItem__iconCart::before {
position: absolute;
top: -15px;
left: 0px;
margin: auto 0;
height: 1.1em;
font-size: 30px;
color: #fff;
}
.featureListItem__discount {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
position: absolute;
left: -4px;
bottom: 10px;
height: 24px;
line-height: 24px;
color: #fff;
padding: 0 8px;
display: block;
background: #c01d20;
font-size: 12px;
font-weight: bold;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
white-space: nowrap;
z-index: 3;
}
.featureListItem__discount::before {
content: '';
position: absolute;
right: -6px;
width: 0;
height: 0;
top: 0;
border-style: solid;
border-width: 12px 7px 12px 0;
border-color: #c01d20 transparent #c01d20 #c01d20;
}
.featureListItem__discount::after {
content: '';
position: absolute;
right: -5px;
bottom: 0;
width: 5px;
height: 4px;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
}
.featureListItem__discount.is-goldBadge {
background: #d4b15c;
}
.featureListItem__discount.is-goldBadge::before {
border-color: #d4b15c transparent #d4b15c #d4b15c;
}
.featureListItem__priceStrike {
color: #888;
font-size: 14px;
}
.featureListItem__price--original {
font-size: 18px;
color: #c01200;
position: relative;
color: rgba(20, 35, 52, 0.4);
font-size: 14px;
font-weight: normal;
display: inline-block;
}
@media screen and (min-width: 1200px) and (max-width: 1400px) {
.featureListItem__listParallel .featureListItem__listItem {
width: 25%;
}
}
@media screen and (min-width: 1401px) and (max-width: 1700px) {
.featureListItem__listParallel .featureListItem__listItem {
width: 20%;
}
}
@media screen and (min-width: 1701px) and (max-width: 2000px) {
.featureListItem__listParallel .featureListItem__listItem {
width: 16.6%;
}
}
@media screen and (min-width: 2001px) and (max-width: 9999px) {
.featureListItem__listParallel .featureListItem__listItem {
width: 14.2%;
}
}
.featureRanking {
font-size: 14px;
}
.featureRanking__list {
letter-spacing: -.40em;
}
.featureRanking__list:after {
content: "";
clear: both;
display: block;
}
.featureRanking__item {
position: relative;
width: -webkit-calc(50% - 5px);
width: calc(50% - 5px);
display: inline-block;
vertical-align: top;
margin: 35px 0 0 0;
}
.featureRanking__item:after {
content: "";
clear: both;
display: block;
}
.featureRanking__item .featureRanking__text {
display: none;
}
.featureRanking__item .featureRanking__infoBoxInner {
width: -webkit-calc(100% - 17px);
width: calc(100% - 17px);
display: inline-block;
vertical-align: middle;
}
.featureRanking__item .featureRanking__rankNum {
padding: 0;
}
.featureRanking__item .featureRanking__rankNum::before {
font-size: 0;
padding: 0;
}
.featureRanking__item.is-upper {
padding: 30px 0 0 0;
margin: 30px 0 0 0;
width: 100%;
}
.featureRanking__item.is-upper .featureRanking__infoBox {
width: -webkit-calc(100% - 170px);
width: calc(100% - 170px);
}
.featureRanking__item.is-upper .featureRanking__infoBox::before {
content: '';
width: 1px;
height: 140px;
display: inline-block;
vertical-align: middle;
}
.featureRanking__item.is-upper .featureRanking__title {
font-size: 20px;
}
.featureRanking__item.is-upper .featureRanking__imageBox {
width: 150px;
}
.featureRanking__item.is-upper .featureRanking__text {
display: block;
}
.featureRanking__item.is-upper .featureRanking__rankNumWrapper {
position: absolute;
top: -5px;
left: 40px;
text-align: center;
}
.featureRanking__item.is-upper .featureRanking__rankNum {
font-size: 20px;
color: #ab8e48;
position: relative;
padding: 0 0 0 35px;
margin: 0 0 10px 0;
display: inline-block;
}
.featureRanking__item.is-upper .featureRanking__rankNum::before {
content: "";
display: block;
text-indent: 0;
}
.featureRanking__item.is-upper .featureRanking__rankNum::before {
position: absolute;
display: inline-block;
top: -5px;
bottom: 0;
left: 0;
margin: auto 4px auto 0;
height: 1.1em;
font-size: 30px;
line-height: 1;
}
.featureRanking__ListItem {
vertical-align: top;
display: inline-block;
width: -webkit-calc(50% - 5px);
width: calc(50% - 5px);
font-size: 0;
letter-spacing: normal;
line-height: 1.6;
margin: 25px 0 0;
padding: 0 25px 0 0;
box-sizing: border-box;
}
.featureRanking__listItemInner:after {
content: "";
clear: both;
display: block;
}
.featureRanking__infoBox {
float: right;
width: -webkit-calc(100% - 140px);
width: calc(100% - 140px);
}
.featureRanking__infoBox::before {
content: '';
position: relative;
display: inline-block;
height: 180px;
width: 1px;
vertical-align: middle;
}
.featureRanking__imageBox {
float: left;
width: 120px;
margin: 0 20px 0 0;
font-size: 0;
line-height: 0;
}
.featureRanking__imageBox .featureRanking__link {
display: block;
}
.featureRanking__link {
position: relative;
}
.featureRanking__image {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
display: inline-block;
min-width: 75%;
max-width: 100%;
max-height: 100%;
}
.featureRanking__image.is-horizontal {
width: 100%;
}
.featureRanking__image.is-vertical {
height: 100%;
width: auto;
}
.featureRanking__itemNoImage {
display: inline-block;
position: relative;
background: #f5f5f5 url(../materials/noimage.png) 0 0 no-repeat;
background-size: 100% 100%;
background-position: center bottom;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
width: 145px;
height: 0;
padding: 139% 0 0;
word-wrap: break-word;
white-space: normal;
line-height: 1.4;
width: 100%;
height: 0;
padding-top: 139%;
}
.featureRanking__itemNoImage.is-adult {
font-size: 14px;
}
.featureRanking__itemNoImage.is-adult::before {
content: "";
display: block;
text-indent: 0;
}
.featureRanking__itemNoImage.is-adult div {
top: -webkit-calc(50% - 0);
top: calc(50% - 0);
padding: 10px 0 40px;
}
.featureRanking__itemNoImage.is-adult::before {
position: absolute;
display: inline-block;
left: 0;
right: 0;
top: 55px;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #c0c0c0;
font-size: 28px;
z-index: 1;
text-align: center;
}
.featureRanking__itemNoImageInner {
position: absolute;
left: 5px;
right: 5px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #888;
background: #f5f5f5;
padding: 10px 0;
}
.featureRanking__noImageTitle {
font-size: 12px;
font-weight: bold;
padding: 0 0 5px;
max-height: 2.8em;
overflow: hidden;
}
.featureRanking__noImageAuthor {
font-size: 12px;
max-height: 2.8em;
overflow: hidden;
}
.featureRanking__discount {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
position: absolute;
left: -4px;
bottom: 10px;
height: 24px;
line-height: 24px;
color: #fff;
padding: 0 8px;
display: block;
background: #c01d20;
font-size: 12px;
font-weight: bold;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
z-index: 3;
}
.featureRanking__discount::before {
content: '';
position: absolute;
right: -6px;
width: 0;
height: 0;
top: 0;
border-style: solid;
border-width: 12px 7px 12px 0;
border-color: #c01d20 transparent #c01d20 #c01d20;
}
.featureRanking__discount::after {
content: '';
position: absolute;
right: -5px;
bottom: 0;
width: 5px;
height: 4px;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
}
.featureRanking__discount.is-goldBadge {
background: #d4b15c;
}
.featureRanking__discount.is-goldBadge::before {
border-color: #d4b15c transparent #d4b15c #d4b15c;
}
.featureRanking__title {
font-size: 16px;
font-weight: bold;
padding: 0;
}
.featureRanking__auther {
color: #888888;
font-size: 14px;
margin: 5px 0 0;
}
.featureRanking__auther .featureRanking__link {
color: #888888;
}
.featureRanking__text {
font-size: 16px;
margin: 15px 0 0;
}
.featureRanking__rankNum {
font-size: 20px;
color: #ab8e48;
position: relative;
padding: 0 0 0 35px;
margin: 0 0 10px 0;
display: inline-block;
font-weight: bold;
}
.featureRanking__readMoreText {
display: inline-block;
}
.featureRanking__readMore {
display: none;
color: #ab8e48;
position: relative;
bottom: 0;
right: 0;
cursor: pointer;
padding: 0 10px 0 0;
width: 96px;
box-sizing: border-box;
}
.featureRanking__readMore::after {
content: '';
width: 0;
height: 0;
position: absolute;
right: 0;
top: 8px;
border: 7px solid transparent;
border-top: 10px solid rgba(171, 142, 72, 0.5);
}
.featureRanking__threeDots {
display: none;
}
.featureRanking__cartButton {
display: inline-block;
text-align: center;
position: relative;
height: 34px;
line-height: 34px;
border-radius: 18px;
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 0 15px 0;
width: 80px;
box-shadow: 0 -2px 0 0 #00abbb inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
width: 96px;
margin: 5px 0 0;
}
.featureRanking__cartButton::before {
content: "";
display: block;
text-indent: 0;
}
.featureRanking__cartButton::before {
position: relative;
display: inline-block;
top: 0px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 28px;
line-height: 1;
}
.featureRanking__cartButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.featureRanking__cartButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.featureRanking__cartButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.featureRanking__cartButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.featureRanking__cartButton.is-buttonCancel span {
color: #999999 !important;
}
.featureRanking__cartButton.is-buttonCancel span::before {
color: #999999 !important;
}
.featureRanking__cartButton::before {
content: "";
display: block;
text-indent: 0;
}
.featureRanking__bookShelfButton {
display: inline-block;
text-align: center;
position: relative;
height: 34px;
line-height: 34px;
border-radius: 18px;
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 0 15px 0;
width: 80px;
box-shadow: 0 -2px 0 0 #00abbb inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
width: 96px;
margin: 5px 0 0;
}
.featureRanking__bookShelfButton::before {
content: "";
display: block;
text-indent: 0;
}
.featureRanking__bookShelfButton::before {
position: relative;
display: inline-block;
top: 0px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 28px;
line-height: 1;
}
.featureRanking__bookShelfButton.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.featureRanking__bookShelfButton.is-buttonDisabled span {
color: #bbbbbb !important;
}
.featureRanking__bookShelfButton.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.featureRanking__bookShelfButton.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.featureRanking__bookShelfButton.is-buttonCancel span {
color: #999999 !important;
}
.featureRanking__bookShelfButton.is-buttonCancel span::before {
color: #999999 !important;
}
.featureRanking__bookShelfButton::before {
content: "";
display: block;
text-indent: 0;
}
.featureRanking__priceBox {
margin: 10px 0 0;
margin: 5px 0 0;
}
.featureRanking__priceStrike {
color: #888;
font-size: 14px;
}
.featureRanking__price {
font-size: 18px;
color: #c01200;
position: relative;
}
.featureRanking__price .summaryItem__tax {
font-size: 12px;
}
.featureRanking__price--original {
font-size: 18px;
color: #c01200;
position: relative;
color: rgba(20, 35, 52, 0.4);
font-size: 14px;
font-weight: normal;
display: inline-block;
}
.featureRanking__tax {
color: #888;
font-size: 14px;
font-weight: normal;
}
.is-negative .featureRanking__tax {
color: rgba(20, 35, 52, 0.4);
font-size: 8px;
margin: 5px 0 0;
}
.is-negative .featureRanking__tax {
color: rgba(20, 35, 52, 0.4);
font-size: 8px;
margin: 5px 0 0;
}
.featureRanking__button--reservation {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
width: 80px;
font-size: 14px;
font-weight: bold;
padding: 9px 12px 9px;
margin: 10px 5px 0 0;
height: 34px;
vertical-align: bottom;
}
.featureRanking__button--reservation.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.featureRanking__button--reservation.is-buttonDisabled span {
color: #bbbbbb !important;
}
.featureRanking__button--reservation.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.featureRanking__button--reservation.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.featureRanking__button--reservation.is-buttonCancel span {
color: #999999 !important;
}
.featureRanking__button--reservation.is-buttonCancel span::before {
color: #999999 !important;
}
.featureRanking__button--read {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
width: 120px;
font-size: 14px;
font-weight: bold;
padding: 9px 12px 9px;
margin: 10px 5px 0 0;
height: 34px;
vertical-align: bottom;
}
.featureRanking__button--read.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.featureRanking__button--read.is-buttonDisabled span {
color: #bbbbbb !important;
}
.featureRanking__button--read.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.featureRanking__button--read.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.featureRanking__button--read.is-buttonCancel span {
color: #999999 !important;
}
.featureRanking__button--read.is-buttonCancel span::before {
color: #999999 !important;
}
.featureItem {
border-top: 1px solid #eeeeee;
padding: 35px 0 0;
margin: 35px 0 0 0;
}
.featureItem:first-child {
margin: 0 0 0 0;
padding: 0 0 0;
border-top: 0px solid #eeeeee;
}
.featureItem__title {
font-size: 22px;
font-weight: bold;
word-wrap: break-word;
}
.featureItem__lead {
font-size: 14px;
color: #888888;
margin: 10px 0 0;
}
.featureBlock__embedded {
margin: 20px 0 0 0;
text-align: center;
}
.featureBlock__bannerBox {
margin: 20px 0 0 0;
text-align: center;
}
.featureBlock__bannerText {
margin: 20px 0 0 0;
font-size: 16px;
}
.featureBlock__image {
width: auto;
max-width: 100%;
}
.featureBlock__imageTextBox {
margin: 25px 0 0 0;
}
.featureBlock__imageTextBox:after {
content: "";
clear: both;
display: block;
}
.featureBlock__imageTextBox .featureBlock__image {
float: left;
width: 300px;
margin: 0 20px 10px 0;
}
.featureBlock__imageTextBox.is-imageRight .featureBlock__image {
float: right;
width: 300px;
margin: 0 0 10px 20px;
}
.featureBlock__wrapperBlock {
border-radius: 6px;
background-color: #f4f6f8;
border: 1px solid #dedede;
padding: 30px;
box-sizing: border-box;
margin: 25px 0 0 0;
}
.featureBlock__wrapperBlock:after {
content: "";
clear: both;
display: block;
}
.featureBlock__introduceWrapper {
float: right;
width: -webkit-calc(100% - 260px);
width: calc(100% - 260px);
}
.featureBlock__introduceImageWrapper {
float: left;
width: 240px;
position: relative;
}
.featureBlock__itemNoImage {
display: inline-block;
position: relative;
background: #f5f5f5 url(../materials/noimage.png) 0 0 no-repeat;
background-size: 100% 100%;
background-position: center bottom;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
width: 145px;
height: 0;
padding: 139% 0 0;
word-wrap: break-word;
white-space: normal;
line-height: 1.4;
width: 100%;
height: 0;
padding-top: 139%;
}
.featureBlock__itemNoImage.is-adult {
font-size: 14px;
}
.featureBlock__itemNoImage.is-adult::before {
content: "";
display: block;
text-indent: 0;
}
.featureBlock__itemNoImage.is-adult div {
top: -webkit-calc(50% - 0);
top: calc(50% - 0);
padding: 10px 0 40px;
}
.featureBlock__itemNoImage.is-adult::before {
position: absolute;
display: inline-block;
left: 0;
right: 0;
top: 55px;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #c0c0c0;
font-size: 28px;
z-index: 1;
text-align: center;
}
.featureBlock__itemNoImageInner {
position: absolute;
left: 5px;
right: 5px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #888;
background: #f5f5f5;
padding: 10px 0;
}
.featureBlock__noImageTitle {
font-size: 12px;
font-weight: bold;
padding: 0 0 5px;
max-height: 2.8em;
overflow: hidden;
}
.featureBlock__noImageAuthor {
font-size: 12px;
max-height: 2.8em;
overflow: hidden;
}
.featureBlock__title {
font-size: 18px;
font-weight: bold;
word-wrap: break-word;
}
.featureBlock__text {
font-size: 16px;
}
.featureBlock__pickUpImageWrapper {
float: left;
width: 165px;
line-height: 1;
font-size: 0;
position: relative;
}
.featureBlock__pickUpImageWrapper .featureBlock__image {
width: 100%;
}
.featureBlock__pickUpWrapper {
float: right;
width: -webkit-calc(100% - 185px);
width: calc(100% - 185px);
}
.featureBlock__buttonStyle {
display: inline-block;
text-align: center;
position: relative;
height: 34px;
line-height: 34px;
border-radius: 18px;
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 0 15px 0;
width: 80px;
box-shadow: 0 -2px 0 0 #00abbb inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
margin: 5px 0 0;
}
.featureBlock__buttonStyle::before {
content: "";
display: block;
text-indent: 0;
}
.featureBlock__buttonStyle::before {
position: relative;
display: inline-block;
top: 0px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 28px;
line-height: 1;
}
.featureBlock__buttonStyle.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.featureBlock__buttonStyle.is-buttonDisabled span {
color: #bbbbbb !important;
}
.featureBlock__buttonStyle.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.featureBlock__buttonStyle.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.featureBlock__buttonStyle.is-buttonCancel span {
color: #999999 !important;
}
.featureBlock__buttonStyle.is-buttonCancel span::before {
color: #999999 !important;
}
.featureBlock__buttonStyle::before {
content: "";
display: block;
text-indent: 0;
}
.featureBlock__buttonStyle--bookShelfAdd {
display: inline-block;
text-align: center;
position: relative;
height: 34px;
line-height: 34px;
border-radius: 18px;
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 0 15px 0;
width: 80px;
box-shadow: 0 -2px 0 0 #00abbb inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
margin: 5px 0 0;
}
.featureBlock__buttonStyle--bookShelfAdd::before {
content: "";
display: block;
text-indent: 0;
}
.featureBlock__buttonStyle--bookShelfAdd::before {
position: relative;
display: inline-block;
top: 0px;
left: 0;
margin: 0 4px 0 0;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
height: 1.1em;
font-size: 28px;
line-height: 1;
}
.featureBlock__buttonStyle--bookShelfAdd.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.featureBlock__buttonStyle--bookShelfAdd.is-buttonDisabled span {
color: #bbbbbb !important;
}
.featureBlock__buttonStyle--bookShelfAdd.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.featureBlock__buttonStyle--bookShelfAdd.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.featureBlock__buttonStyle--bookShelfAdd.is-buttonCancel span {
color: #999999 !important;
}
.featureBlock__buttonStyle--bookShelfAdd.is-buttonCancel span::before {
color: #999999 !important;
}
.featureBlock__buttonStyle--bookShelfAdd::before {
content: "";
display: block;
text-indent: 0;
}
.featureBlock__iconCart {
position: relative;
display: inline-block;
padding: 0 0 0 30px;
}
.featureBlock__iconCart::before {
content: "";
display: block;
text-indent: 0;
}
.featureBlock__iconCart::before {
position: absolute;
top: -3px;
left: 0;
margin: auto 0;
height: 1.1em;
font-size: 30px;
color: #fff;
}
.featureBlock__priceBox {
margin: 5px 0 0;
}
.featureBlock__price {
font-size: 18px;
color: #c01200;
position: relative;
margin: 0;
}
.featureBlock__priceStrike {
color: #888;
font-size: 14px;
}
.featureBlock__price--original {
font-size: 18px;
color: #c01200;
position: relative;
color: rgba(20, 35, 52, 0.4);
font-size: 14px;
font-weight: normal;
display: inline-block;
}
.featureBlock__tax {
color: #888;
font-size: 14px;
font-weight: normal;
}
.is-negative .featureBlock__tax {
color: rgba(20, 35, 52, 0.4);
font-size: 8px;
margin: 5px 0 0;
}
.featureBlock__auther {
font-size: 14px;
color: #888;
}
.featureBlock__auther .featureBlock__pickUpLink {
color: #888;
}
.featureBlock__discount {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
position: absolute;
left: -4px;
bottom: 10px;
height: 24px;
line-height: 24px;
color: #fff;
padding: 0 8px;
display: block;
background: #c01d20;
font-size: 12px;
font-weight: bold;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
z-index: 3;
}
.featureBlock__discount::before {
content: '';
position: absolute;
right: -6px;
width: 0;
height: 0;
top: 0;
border-style: solid;
border-width: 12px 7px 12px 0;
border-color: #c01d20 transparent #c01d20 #c01d20;
}
.featureBlock__discount::after {
content: '';
position: absolute;
right: -5px;
bottom: 0;
width: 5px;
height: 4px;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
}
.featureBlock__discount.is-goldBadge {
background: #d4b15c;
}
.featureBlock__discount.is-goldBadge::before {
border-color: #d4b15c transparent #d4b15c #d4b15c;
}
.featureBlock__button--reservation {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
width: 80px;
font-size: 14px;
font-weight: bold;
padding: 9px 12px 9px;
margin: 10px 5px 0 0;
height: 34px;
vertical-align: bottom;
}
.featureBlock__button--reservation.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.featureBlock__button--reservation.is-buttonDisabled span {
color: #bbbbbb !important;
}
.featureBlock__button--reservation.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.featureBlock__button--reservation.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.featureBlock__button--reservation.is-buttonCancel span {
color: #999999 !important;
}
.featureBlock__button--reservation.is-buttonCancel span::before {
color: #999999 !important;
}
.featureBlock__button--read {
display: inline-block;
border: 1px solid #cccccc;
text-align: center;
position: relative;
line-height: 1;
border-radius: 17px;
padding: 7px 12px 7px;
border-radius: 50px;
font-size: 14px;
background-color: #ff9000;
margin: 0 0 0;
box-shadow: 0 -2px 0 0 #e5e5e5 inset;
color: #a78b48;
background-color: #fff;
font-weight: normal;
box-sizing: border-box;
width: 120px;
font-size: 14px;
font-weight: bold;
padding: 9px 12px 9px;
margin: 10px 5px 0 0;
height: 34px;
vertical-align: bottom;
}
.featureBlock__button--read.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.featureBlock__button--read.is-buttonDisabled span {
color: #bbbbbb !important;
}
.featureBlock__button--read.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.featureBlock__button--read.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.featureBlock__button--read.is-buttonCancel span {
color: #999999 !important;
}
.featureBlock__button--read.is-buttonCancel span::before {
color: #999999 !important;
}
.featureProductListSlider {
position: relative;
margin: 0;
}
.featureProductListSlider:hover .owl-prev,
.featureProductListSlider:hover .owl-next {
opacity: 1;
}
.featureProductListSlider:hover .owl-prev.disabled,
.featureProductListSlider:hover .owl-next.disabled {
opacity: .5;
}
.featureProductListSlider:hover .owl-nav.disabled {
display: none;
}
.featureProductListSlider .owl-prev {
opacity: 0;
position: absolute;
left: 10px;
top: 0;
bottom: 0;
width: 34px;
height: 100px;
margin: auto 0;
background: #fff;
cursor: pointer;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
}
.featureProductListSlider .owl-prev::before {
content: '';
position: absolute;
left: 5px;
top: 0;
bottom: 0;
margin: auto 0;
width: 24px;
height: 24px;
border-left: 2px solid #c3a358;
border-top: 2px solid #c3a358;
border-right: 2px solid transparent;
border-bottom: 2px solid transparent;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.featureProductListSlider .owl-prev::after {
position: absolute;
content: '';
left: -10px;
top: 0;
bottom: 0;
background: #fff;
width: 10px;
}
.featureProductListSlider .owl-next {
opacity: 0;
position: absolute;
right: 20px;
top: 0;
bottom: 0;
width: 34px;
height: 100px;
margin: auto 0;
background: #fff;
cursor: pointer;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
}
.featureProductListSlider .owl-next::before {
content: '';
position: absolute;
right: 5px;
top: 0;
bottom: 0;
margin: auto 0;
width: 24px;
height: 24px;
border-right: 2px solid #c3a358;
border-bottom: 2px solid #c3a358;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.featureProductListSlider .owl-next::after {
position: absolute;
content: '';
right: -10px;
top: 0;
bottom: 0;
background: #fff;
width: 10px;
}
.featureProductListSlider__title {
font-size: 20px;
margin: 0 10px 20px;
font-weight: bold;
}
.featureProductListSlider__list {
position: relative;
font-size: 0;
white-space: nowrap;
overflow: hidden;
padding: 0 0 0 0;
margin: 25px 0 0 -5px;
width: -webkit-calc(100% + 20px);
width: calc(100% + 20px);
}
.featureProductListSlider__list .owl-stage-outer {
overflow: hidden;
padding: 0 0 0 5px;
margin: 0 0 0 0;
width: -webkit-calc(100% - 20px);
width: calc(100% - 20px);
}
.featureProductListSlider__list .owl-stage-outer .featureProductListSlider__item {
width: auto;
display: block;
}
.featureProductListSlider__list .owl-item {
display: inline-block;
float: none;
vertical-align: top;
padding: 0 20px 0 0;
}
.featureProductListSlider .owl-prev,
.featureProductListSlider .owl-next {
top: -100px;
}
.featureProductListSlider__item {
display: inline-block;
vertical-align: top;
width: 145px;
margin: 0 32px 0 0;
position: relative;
font-size: 0;
letter-spacing: 0;
line-height: 1;
}
.featureProductListSlider__item:first-child {
margin-left: 0;
}
.featureProductListSlider__itemName {
font-size: 14px;
font-weight: bold;
margin: 15px 0 0;
word-wrap: break-word;
white-space: normal;
width: 145px;
line-height: 1.6em;
}
.featureProductListSlider__itemLink {
display: inline-block;
}
.featureProductListSlider__itemLink:after {
content: "";
clear: both;
display: block;
}
.featureProductListSlider__itemImageWrapper {
position: relative;
margin: 0;
max-width: 145px;
height: 210px;
font-size: 0;
white-space: nowrap;
text-align: center;
position: relative;
}
.featureProductListSlider__itemImageWrapper.js-imgLoading > * {
opacity: 0;
}
.featureProductListSlider__itemImageWrapper.js-imgLoading .loadingIcon {
opacity: 1;
font-size: 10px;
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 1.2em;
height: 1.2em;
margin: auto;
text-indent: -9999em;
color: #d1d5d8;
background: #d1d5d8;
border-radius: 50%;
line-height: 1;
}
.featureProductListSlider__itemImageWrapper.js-imgLoading .loadingIcon::before, .featureProductListSlider__itemImageWrapper.js-imgLoading .loadingIcon::after {
position: absolute;
top: 0;
width: 1.2em;
height: 1.2em;
content: '';
background: #d1d5d8;
border-radius: 50%;
}
.featureProductListSlider__itemImageWrapper.js-imgLoading .loadingIcon::before {
left: -2em;
}
.featureProductListSlider__itemImageWrapper.js-imgLoading .loadingIcon::after {
left: 2em;
}
.featureProductListSlider__itemImageWrapper::before {
content: '';
width: 1px;
height: 210px;
display: inline-block;
margin-left: -1px;
}
.featureProductListSlider__itemImage {
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
opacity: 1;
display: inline-block;
min-width: 75%;
max-width: 100%;
max-height: 100%;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
}
.featureProductListSlider__itemNoImage {
display: inline-block;
position: relative;
background: #f5f5f5 url(../materials/noimage.png) 0 0 no-repeat;
background-size: 100% 100%;
background-position: center bottom;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
width: 145px;
height: 0;
padding: 139% 0 0;
word-wrap: break-word;
white-space: normal;
line-height: 1.4;
height: 210px;
}
.featureProductListSlider__itemNoImage.is-adult {
font-size: 14px;
}
.featureProductListSlider__itemNoImage.is-adult::before {
content: "";
display: block;
text-indent: 0;
}
.featureProductListSlider__itemNoImage.is-adult div {
top: -webkit-calc(50% - 0);
top: calc(50% - 0);
padding: 10px 0 40px;
}
.featureProductListSlider__itemNoImage.is-adult::before {
position: absolute;
display: inline-block;
left: 0;
right: 0;
top: 55px;
bottom: 0;
margin: auto 0;
height: 1.1em;
line-height: 1;
color: #c0c0c0;
font-size: 28px;
z-index: 1;
text-align: center;
}
.featureProductListSlider__itemNoImageInner {
position: absolute;
left: 5px;
right: 5px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #888;
background: #f5f5f5;
padding: 10px 0;
}
.featureProductListSlider__noImageTitle {
font-size: 12px;
font-weight: bold;
padding: 0 0 5px;
max-height: 2.8em;
overflow: hidden;
}
.featureProductListSlider__noImageAuthor {
font-size: 12px;
max-height: 2.8em;
overflow: hidden;
}
.featureProductListSlider__moreLinkWrapper {
position: absolute;
top: 60px;
right: 0;
}
.featureProductListSlider__moreLink {
display: inline-block;
background: #c3a358;
padding: 2px 10px 0;
color: #fff;
border-radius: 19px;
border-bottom: 3px solid #ab8a3d;
}
.featureProductListSlider + .featureList {
padding: 50px 0 0;
}
.featureProductListSlider__prevSlideButton {
position: absolute;
left: 0;
top: -120px;
bottom: 0;
margin: auto 0;
width: 48px;
height: 120px;
background-color: rgba(255, 255, 255, 0.95);
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.6);
cursor: pointer;
}
.featureProductListSlider__prevSlideButton::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 40%;
margin: auto 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 22px;
height: 22px;
border-left: 1px solid #c3a359;
border-bottom: 1px solid #c3a359;
}
.featureProductListSlider__nextSlideButton {
position: absolute;
right: 0;
top: -120px;
bottom: 0;
margin: auto 0;
width: 48px;
height: 120px;
background-color: rgba(255, 255, 255, 0.95);
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.6);
cursor: pointer;
}
.featureProductListSlider__nextSlideButton::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 20%;
margin: auto 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 22px;
height: 22px;
border-top: 1px solid #c3a359;
border-right: 1px solid #c3a359;
}
.featureProductListSlider .loadingIcon {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
-webkit-transition: all .5s ease;
transition: all .5s ease;
z-index: 0;
}
.featureProductListSlider .loadingIcon.is-display {
opacity: 1;
z-index: 2;
}
.purchaseHistory {
padding: 40px 0 0;
color: #182432;
font-size: 14px;
width: 600px;
margin: 0 auto 0;
}
.purchaseHistory__title, .purchaseHistory__title--none {
font-size: 16px;
margin: 0 20px;
}
.purchaseHistory__title--none {
margin: 0 0;
}
.purchaseHistory__inner {
margin: 30px 20px 30px;
}
.purchaseHistory__inner--none {
margin: 20px 0 30px;
}
.purchaseHistory__contentBox {
position: relative;
margin: 0 50px;
padding: 25px 0;
border-bottom: 1px solid #dedede;
}
.purchaseHistory__contentBox:last-child {
border-bottom: 0;
}
.purchaseHistory__itemBoxWrapper {
border-bottom: 1px solid #dedede;
margin: 0 0 50px;
}
.purchaseHistory__itemBox {
padding: 0;
width: 100%;
margin: 0 auto 0;
border: 1px solid #dedede;
background: #f4f6f8;
}
.purchaseHistory__itemDetailBox {
display: none;
padding: 0;
width: 100%;
border-left: 1px solid #dedede;
border-right: 1px solid #dedede;
background: #f4f6f8;
}
.purchaseHistory__paymentDate {
font-size: 16px;
font-weight: bold;
}
.purchaseHistory__confirmItemBox {
position: relative;
padding: 20px 0;
border-bottom: 1px solid #dedede;
border-left: 1px solid #dedede;
border-right: 1px solid #dedede;
border-bottom: 1px solid #dedede;
background-color: #f4f6f8;
cursor: pointer;
}
.purchaseHistory__confirmItem {
position: relative;
padding: 20px 0;
border-left: 1px solid #dedede;
border-right: 1px solid #dedede;
background-color: #f4f6f8;
cursor: pointer;
}
.purchaseHistory__confirmItem.is-active {
border-bottom: none;
border-top: 1px solid #dedede;
}
.purchaseHistory__confirmItem.is-active .purchaseHistory__items::after {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
vertical-align: -2px;
}
.purchaseHistory__items {
text-align: center;
}
.purchaseHistory__items::after {
display: inline-block;
content: '';
border-bottom: 1px solid #1d2334;
border-right: 1px solid #1d2334;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 10px;
height: 10px;
margin: 0 0 0 10px;
vertical-align: 3px;
}
.purchaseHistory__contentDetailBox {
display: table;
padding: 20px 0px;
margin: 0 50px;
border-bottom: 1px solid #dedede;
line-height: 1.8;
width: -webkit-calc((100% - 100px)/1);
width: calc((100% - 100px)/1);
}
.purchaseHistory__contentDetailBox:last-child {
border-bottom: 0;
}
.purchaseHistory__detailLeftBox {
display: table-cell;
width: 80%;
}
.purchaseHistory__detailRightBox {
display: table-cell;
vertical-align: middle;
width: 20%;
text-align: right;
}
.purchaseHistory__detailTitileText {
font-size: 13px;
font-weight: bold;
}
.purchaseHistory__detailText {
color: #888888;
}
.purchaseHistory__detailIitemPrice {
font-size: 13px;
}
.purchaseHistory__paymentList {
margin: 10px 0 0;
}
.purchaseHistory__paymentList:after {
content: "";
clear: both;
display: block;
}
.purchaseHistory__paymentList:first-child {
margin: 0;
}
.purchaseHistory__paymentTerm {
float: left;
}
.purchaseHistory__paymentTerm--title {
font-weight: bold;
}
.purchaseHistory__paymentDescription {
float: right;
}
.purchaseHistory__paymentDescription--totalFee {
font-size: 20px;
color: #cc0000;
font-weight: bold;
}
.purchaseHistory__paymentPrice {
float: right;
}
.purchaseHistory__confirmLink {
position: relative;
top: 0;
left: 0;
bottom: 0;
color: #ab8e48;
font-size: 12px;
cursor: pointer;
}
.purchaseHistory__confirmLink::after {
display: inline-block;
content: '';
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 9px;
height: 9px;
margin: 0 5px;
}
.purchaseHistory__pagerBox .pager {
margin: 0 0 100px;
}
.purchaseHistory__pagerBox {
margin: 50px 0 0;
}
.purchaseHistory__noneBox {
padding: 50px 0;
margin: 20px 0 70px;
border-top: 1px solid #dedede;
border-bottom: 1px solid #dedede;
text-align: center;
}
.purchaseHistory__noneText {
font-size: 14px;
font-weight: bold;
}
.purchaseHistory__infomationText {
font-size: 14px;
text-align: center;
}
.subRecommend {
padding: 50px 40px 40px;
color: #182432;
}
.subRecommend__title {
border-bottom: 1px solid #dedede;
font-size: 16px;
font-weight: bold;
padding: 0 0 15px 0;
text-align: center;
}
.subRecommend__item {
margin: 25px 0 0 0;
}
.subRecommend__itemImageWrapper {
width: 240px;
margin: auto;
}
.subRecommend__itemImage {
width: 100%;
}
.subRecommend__itemText {
margin: 5px auto 0;
font-size: 14px;
width: 240px;
}
.subRecommend__buttonWrapper {
display: none;
}
.subRecommend .display-pc {
display: block;
}
.subRecommend .display-sp {
display: none;
}
.subRecommend .display-tb {
display: none;
}
.dialog {
display: block;
visibility: hidden;
z-index: -1;
font-size: 14px;
}
.dialog.is-small .dialog__content {
min-height: 70px;
}
.dialog.is-small .dialog__inner, .dialog.is-small .dialog__inner--renewal {
top: 100px;
bottom: 100px;
}
@media screen and (max-height: 500px) {
.dialog.is-small .dialog__inner, .dialog.is-small .dialog__inner--renewal {
top: 10%;
bottom: 10%;
}
}
.dialog__overlay {
position: fixed;
line-height: 1.7;
background-color: rgba(14, 18, 24, 0.7);
color: #fff;
top: 0;
left: 0;
right: 0;
bottom: -200px;
opacity: 0;
z-index: 1200;
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
}
.dialog.is-show {
visibility: visible;
z-index: auto;
}
.dialog.is-show .dialog__overlay {
opacity: 1;
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s;
}
.dialog.is-show .dialog__inner, .dialog.is-show .dialog__inner--renewal {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s, -webkit-transform 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s, -webkit-transform 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s, transform 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s, transform 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s, -webkit-transform 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s;
}
.dialog__inner, .dialog__inner--renewal {
display: block;
width: 440px;
max-width: 440px;
position: fixed;
left: 0;
top: 80px;
right: 0;
bottom: 100px;
margin: 0 auto;
z-index: 1200;
opacity: 0;
-webkit-transform: translate(0, 15px, 0), translateY(-50%);
transform: translate(0, 15px, 0), translateY(-50%);
-webkit-transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s, -webkit-transform 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s, -webkit-transform 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s, transform 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s;
transition: opacity 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0s, transform 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s, -webkit-transform 0.24s cubic-bezier(0.55, 0, 0.1, 1) 0.24s;
}
@media screen and (max-height: 500px) {
.dialog__inner, .dialog__inner--renewal {
top: 10%;
bottom: 10%;
}
}
.dialog__inner--renewal {
width: 450px;
}
.dialog__inner--renewal .dialog__content {
overflow: hidden;
min-height: auto;
max-height: none;
border-radius: 8px;
padding: 0 0 30px;
min-height: 436px;
}
.dialog__inner.is-viewerSelect, .is-viewerSelect.dialog__inner--renewal {
width: 520px;
max-width: 520px;
}
.dialog__contentWrapper, .dialog__contentWrapper--bgWhite {
position: absolute;
padding: 0 0 55px;
width: 100%;
}
.dialog__contentWrapper--bgWhite {
background-color: #fff;
}
.dialog__contentWrapper--bgWhite .dialog__content {
margin-bottom: 20px;
}
.dialog__contentBox, .dialog__contentBox--titleOnly {
margin: 0 25px;
}
.dialog__contentBox--titleOnly {
margin: 25px 25px 25px;
}
.dialog__contentTitle {
font-size: 15px;
padding: 0 0 0;
}
.dialog__contentButtonWrapper, .dialog__contentButtonWrapper--single, .dialog__contentButtonWrapper--double {
position: absolute;
left: 0;
right: 0;
bottom: 0;
text-align: center;
border-top: 1px solid #eeeeee;
font-size: 0;
height: 55px;
background: #fff;
border-radius: 0 0 4px 4px;
}
.dialog__contentButtonWrapper--single .dialog__contentButton {
display: block;
}
.dialog__contentButtonWrapper--double .dialog__contentButton {
display: inline-block;
width: 50%;
}
.dialog__contentButton {
display: block;
cursor: pointer;
color: #ab8e48;
line-height: 55px;
font-size: 15px;
position: relative;
}
.dialog__contentButton + .dialog__contentButton::before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 1px;
background: #eee;
}
.dialog__content {
border-radius: 4px 4px 0 0;
background: #fff;
color: #1d2334;
font-size: 14px;
overflow-y: auto;
min-height: 100px;
-webkit-overflow-scrolling: touch;
}
.dialog__textBox {
padding: 20px 20px 0;
}
.dialog__text {
margin: 10px 0 0;
}
.dialog__list {
margin: 10px 0 0;
}
.dialog__innerBox {
padding: 20px;
}
.error {
color: #182432;
font-size: 14px;
}
.error__inner {
margin: 90px 0 100px;
width: 100%;
padding: 0 20px;
box-sizing: borer-box;
text-align: center;
}
.error__inner--simple {
margin: 0 0 0;
width: 100%;
padding: 0 20px;
box-sizing: borer-box;
text-align: center;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.error__mark {
color: #ccd1d7;
width: 100px;
height: 100px;
margin: auto;
position: relative;
display: inline-block;
}
.error__mark::before {
content: "";
display: block;
text-indent: 0;
}
.error__mark::before {
position: absolute;
left: 50%;
top: 50%;
margin: auto;
height: 1.1em;
line-height: 1;
font-size: 100px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.error__404 {
color: #ccd1d7;
width: 120px;
height: 140px;
margin: auto;
position: relative;
display: inline-block;
}
.error__404::before {
content: "";
display: block;
text-indent: 0;
}
.error__404::before {
position: absolute;
left: 50%;
top: 50%;
margin: auto;
height: 1.1em;
line-height: 1;
font-size: 140px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.error__title {
font-size: 24px;
margin: 30px 0 0;
}
.error__inner02 {
margin: 80px auto 100px;
max-width: 700px;
}
.error__errorTitle02 {
font-size: 20px;
margin: 30px 0 0;
text-align: center;
}
.error__errorTitle02 + .error__text {
margin: 30px 0 0;
}
.error__errorTitle03 {
font-size: 16px;
margin: 30px 0 0;
}
.error__arrowLink {
color: #ab8e48;
position: relative;
margin: 10px 0 0;
display: inline-block;
}
.error__arrowLink::before {
content: '';
position: absolute;
width: 10px;
height: 1px;
background-color: #ab8e48;
top: 15px;
right: -12px;
-webkit-transform: translate(0, -50%) rotate(-30deg);
transform: translate(0, -50%) rotate(-30deg);
}
.error__arrowLink::after {
content: '';
position: absolute;
width: 10px;
height: 1px;
background-color: #ab8e48;
top: 10px;
right: -12px;
-webkit-transform: translate(0, -50%) rotate(30deg);
transform: translate(0, -50%) rotate(30deg);
}
.error__text {
font-size: 16px;
margin: 10px 0 0 0;
}
.error__buttonBox {
margin: 30px 0 0 0;
text-align: center;
}
.error__button {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
width: 240px;
margin: 0 10px;
display: inline-block;
}
.error__button.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.error__button.is-buttonDisabled span {
color: #bbbbbb !important;
}
.error__button.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.error__button.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.error__button.is-buttonCancel span {
color: #999999 !important;
}
.error__button.is-buttonCancel span::before {
color: #999999 !important;
}
.error__caution {
color: #b62626;
margin: 30px 0 0 0;
font-size: 14px;
}
.error__wrapper {
position: relative;
height: -webkit-calc(100vh - 136px);
height: calc(100vh - 136px);
}
.error__wrapper .error__inner {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: 0;
width: 100%;
padding: 0 20px;
box-sizing: borer-box;
text-align: center;
}
.error__contentsWrapper {
width: 100%;
position: relative;
height: 100%;
min-height: 100vh;
}
.error__bold {
font-weight: bold;
}
.staticLayout__mainInner {
position: relative;
padding: 0 0 0;
}
.staticLayout__mainInner:after {
content: "";
clear: both;
display: block;
}
.staticLayout__mainInner::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 320px;
background: #f4f6f8;
border-right: 1px solid #dedede;
}
.staticLayout__mainInner.is-single::before {
background: none;
border-right: 0px solid #dedede;
}
.staticLayout__mainInner.is-single .staticLayout__mainColumn {
width: 100%;
max-width: 1024px;
margin: auto;
float: none;
}
.staticLayout__mainColumn {
float: right;
width: -webkit-calc(100% - 320px);
width: calc(100% - 320px);
overflow-x: hidden;
box-sizing: border-box;
}
.staticLayout__mainColumnInner {
padding: 0 80px;
}
.staticLayout__subColumn {
position: relative;
float: left;
width: 320px;
margin: 0 -320px 0 0;
z-index: 2;
padding: 35px 20px 0;
}
.staticHelpSelect {
color: #1b2433;
margin: 0;
}
.staticHelpSelect__inner {
max-width: 1024px;
margin: 76px auto 50px;
}
.staticHelpSelect__title {
font-size: 24px;
font-weight: normal;
text-align: center;
font-weight: bold;
}
.staticHelpSelect__lead {
font-size: 14px;
text-align: center;
margin: 10px 0 0;
}
.staticHelpSelect__helpList {
margin: 30px 0 0 -30px;
}
.staticHelpSelect__helpList:after {
content: "";
clear: both;
display: block;
}
.staticHelpSelect__helpItem {
padding: 0 0 30px 30px;
width: 33.33%;
float: left;
}
.staticHelpSelect__helpLink {
display: block;
border-radius: 10px;
border: 1px solid #cccccc;
padding: 110px 20px 10px;
box-sizing: border-box;
text-align: left;
color: #ab8e48;
position: relative;
box-shadow: inset 0px -3px 0px 0px rgba(0, 0, 0, 0.1);
}
.staticHelpSelect__accountIcon::before {
content: "";
display: block;
text-indent: 0;
}
.staticHelpSelect__accountIcon::before {
position: absolute;
left: 24px;
top: 50%;
margin: auto;
height: 1.1em;
line-height: 1;
font-size: 80px;
color: #666666;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.staticHelpSelect__cardIcon::before {
content: "";
display: block;
text-indent: 0;
}
.staticHelpSelect__cardIcon::before {
position: absolute;
left: 24px;
top: 50%;
margin: auto;
height: 1.1em;
line-height: 1;
font-size: 90px;
color: #666666;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.staticHelpSelect__deviceIcon::before {
content: "";
display: block;
text-indent: 0;
}
.staticHelpSelect__deviceIcon::before {
position: absolute;
left: 30px;
top: 50%;
margin: auto;
height: 1.1em;
line-height: 1;
font-size: 80px;
color: #666666;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.staticHelpSelect__pointIcon::before {
content: "";
display: block;
text-indent: 0;
}
.staticHelpSelect__pointIcon::before {
position: absolute;
left: 30px;
top: 50%;
margin: auto;
height: 1.1em;
line-height: 1;
font-size: 70px;
color: #666666;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.staticHelpSelect__reservationIcon::before {
content: "";
display: block;
text-indent: 0;
}
.staticHelpSelect__reservationIcon::before {
position: absolute;
left: 24px;
top: 50%;
margin: auto;
height: 1.1em;
line-height: 1;
font-size: 90px;
color: #666666;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.staticHelpSelect__authenticationIcon::before {
content: "";
display: block;
text-indent: 0;
}
.staticHelpSelect__authenticationIcon::before {
position: absolute;
left: 30px;
top: 50%;
margin: auto;
height: 1.1em;
line-height: 1;
font-size: 70px;
color: #666666;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.staticHelpSelect__spOnly {
display: none;
}
.staticHelpSelect__helpText {
width: 100%;
box-sizing: border-box;
font-weight: bold;
position: absolute;
top: 50%;
left: 110px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.staticQuestion {
color: #1b2433;
font-size: 14px;
}
.staticQuestion.is-survey .staticQuestion__sideInner {
padding: 50px 0 0;
}
.staticQuestion__inner {
max-width: 1024px;
margin: auto;
padding: 70px 0 80px;
border-top: 1px solid #eeeeee;
}
.staticQuestion__sideInner {
margin: auto;
padding: 50px 0 50px;
}
.staticQuestion__sideInner .staticQuestion__title {
font-size: 22px;
text-align: left;
font-weight: bold;
}
.staticQuestion__sideInner .staticQuestion__listWrapper {
margin: 15px 0 0;
}
.staticQuestion__title {
font-size: 24px;
font-weight: bold;
text-align: center;
}
.staticQuestion__title02 {
font-size: 16px;
}
.staticQuestion__lead {
font-size: 14px;
text-align: center;
margin: 10px 0 0;
}
.staticQuestion__listWrapper {
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
margin: 30px 0 0;
}
.staticQuestion__listWrapper + .staticQuestion__title02 {
margin: 30px 0 0 0;
}
.staticQuestion__list {
border-bottom: 1px solid #cccccc;
}
.staticQuestion__term {
padding: 20px 80px 20px 28px;
position: relative;
cursor: pointer;
}
.staticQuestion__term::before {
content: "";
display: block;
text-indent: 0;
}
.staticQuestion__term::before {
position: absolute;
right: 30px;
top: 50%;
margin: auto;
height: 1.1em;
line-height: 1;
font-size: 20px;
color: #dedede;
-webkit-transform: translate(0, -50%) rotate(0deg);
transform: translate(0, -50%) rotate(0deg);
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.staticQuestion__term.is-open::before {
-webkit-transform: translate(0, -50%) rotate(180deg);
transform: translate(0, -50%) rotate(180deg);
}
.staticQuestion__description {
display: none;
background-color: #f5f5f5;
padding: 30px 28px;
}
.staticQuestion__link {
color: #ab8e48;
}
.staticQuestion__link.is-current {
font-weight: bold;
color: #182432;
}
.staticQuestion__arrowLink {
color: #ab8e48;
position: relative;
margin: 30px 0 0;
display: inline-block;
}
.staticQuestion__arrowLink::after {
content: '';
position: absolute;
width: 10px;
height: 1px;
background-color: #ab8e48;
top: 10px;
right: -12px;
-webkit-transform: translate(0, -50%) rotate(30deg);
transform: translate(0, -50%) rotate(30deg);
}
.staticQuestion__arrowLink::before {
content: '';
position: absolute;
width: 10px;
height: 1px;
background-color: #ab8e48;
top: 15px;
right: -12px;
-webkit-transform: translate(0, -50%) rotate(-30deg);
transform: translate(0, -50%) rotate(-30deg);
}
.staticQuestion__buttonWrapper {
text-align: center;
margin: 30px 0 0;
}
.staticQuestion__button {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
display: inline-block;
width: 280px;
}
.staticQuestion__button.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.staticQuestion__button.is-buttonDisabled span {
color: #bbbbbb !important;
}
.staticQuestion__button.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.staticQuestion__button.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.staticQuestion__button.is-buttonCancel span {
color: #999999 !important;
}
.staticQuestion__button.is-buttonCancel span::before {
color: #999999 !important;
}
.staticQuestion__selectList {
margin: 30px 0 40px;
}
.staticQuestion__selectList:after {
content: "";
clear: both;
display: block;
}
.staticQuestion__selectListLink {
display: inline-block;
padding: 0 20px;
line-height: 32px;
border: 1px solid #dedede;
border-radius: 16px;
color: #ab8e48;
}
.staticQuestion__selectListLink.is-current {
color: #182432;
background-color: #f4f6f8;
border: 1px solid #f4f6f8;
}
.staticQuestion__selectListItem {
float: left;
margin: 0 16px 16px 0;
display: inline-block;
}
.staticQuestion__text {
margin: 25px 0 0;
}
.staticQuestion__text--center {
margin: 25px 0 0;
text-align: center;
}
.staticQuestion__borderInner {
border-top: 1px solid #eeeeee;
padding: 50px 0 50px;
}
.staticQuestion__title03 {
font-size: 20px;
}
.staticQuestion__title04 {
font-size: 22px;
text-align: center;
}
.staticQuestion__buttonLeftWrapper {
margin: 30px 0 0;
}
.staticQuestion__buttonWrapper {
text-align: center;
}
.staticQuestion__buttonReturn {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
width: 240px;
display: inline-block;
}
.staticQuestion__buttonReturn.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.staticQuestion__buttonReturn.is-buttonDisabled span {
color: #bbbbbb !important;
}
.staticQuestion__buttonReturn.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.staticQuestion__buttonReturn.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.staticQuestion__buttonReturn.is-buttonCancel span {
color: #999999 !important;
}
.staticQuestion__buttonReturn.is-buttonCancel span::before {
color: #999999 !important;
}
.staticSubMenu {
font-size: 14px;
}
.staticSubMenu__inner {
padding: 10px 30px 30px;
}
.staticSubMenu__title {
font-size: 16px;
margin: 0 0 10px;
}
.staticSubMenu__list {
padding: 0 0 0 16px;
font-size: 14px;
}
.staticSubMenu__listItem {
margin: 10px 0 0;
font-size: 16px;
}
.staticSubMenu__link {
color: #ab8e48;
}
.staticSubMenu__link.is-current {
color: #182432;
font-weight: bold;
}
.staticSubMenu__subList {
padding: 0 0 0 36px;
position: relative;
}
.staticSubMenu__subList::before {
content: '';
position: absolute;
top: 0;
left: 16px;
width: 4px;
height: 100%;
background-color: #e4e7ea;
}
.staticSubMenu__subLink {
color: #ab8e48;
}
.staticSubMenu__subLink.is-current {
color: #182432;
font-weight: normal;
}
.staticSubMenu__subListItem {
margin: 10px 0 0;
font-size: 14px;
}
.staticContactForm {
color: #1b2433;
font-size: 14px;
}
.staticContactForm.is-survey .staticContactForm__formBox, .staticContactForm.is-survey .staticContactForm__formBox--noBorder {
margin: 0;
padding: 0;
}
.staticContactForm.is-survey .staticContactForm__formBox:first-child::after, .staticContactForm.is-survey .staticContactForm__formBox--noBorder:first-child::after {
display: none;
}
.staticContactForm.is-survey .staticContactForm__term {
width: 100%;
float: none;
}
.staticContactForm.is-survey .staticContactForm__subTitle {
margin: 20px 0 0;
}
.staticContactForm.is-survey .staticContactForm__description {
width: 100%;
float: none;
}
.staticContactForm.is-survey .staticContactForm__link {
color: #c3a358;
}
.staticContactForm.is-survey .staticContactForm__textForm, .staticContactForm.is-survey .staticContactForm__textForm--short {
margin: 10px 0 0;
}
.staticContactForm.is-survey .staticContactForm__textarea {
margin: 10px 0 0;
}
.staticContactForm__inner {
margin: 0 0 100px;
padding: 0 0;
position: relative;
}
.staticContactForm__confirmInner {
margin: 0 0 100px;
padding: 0 30px;
position: relative;
}
.staticContactForm__formBox, .staticContactForm__formBox--noBorder {
border-top: 1px solid #eeeeee;
padding: 30px 0;
}
.staticContactForm__formBox:first-child, .staticContactForm__formBox--noBorder:first-child {
border-top: 0px solid #eeeeee;
position: relative;
}
.staticContactForm__formBox:first-child::after, .staticContactForm__formBox--noBorder:first-child::after {
content: '';
position: absolute;
top: 0;
width: 9999px;
height: 1px;
background: #eeeeee;
}
.staticContactForm__formBox--noBorder:first-child::after {
background: transparent;
}
.staticContactForm__title {
font-size: 16px;
}
.staticContactForm__subTitle {
font-size: 16px;
}
.staticContactForm__subTitle .staticContactForm__caution {
display: inline-block;
margin: 0 0 0 10px;
}
.staticContactForm__confirmTitle {
font-size: 16px;
}
.staticContactForm__sectionTitle {
font-size: 16px;
font-weight: normal;
}
.staticContactForm__subText {
color: #888;
font-size: 12px;
}
.staticContactForm__caution {
color: #cc0000;
display: inline-block;
}
.staticContactForm__list {
margin: 20px 0 0;
font-size: 0;
}
.staticContactForm__list:after {
content: "";
clear: both;
display: block;
}
.staticContactForm__term {
width: 250px;
float: left;
clear: both;
font-size: 14px;
}
.staticContactForm__description {
width: -webkit-calc(100% - 250px);
width: calc(100% - 250px);
float: left;
font-size: 14px;
}
.staticContactForm__description .staticContactForm__caution {
margin: 10px 0 0;
}
.staticContactForm__confirmList {
margin: 20px 0 0;
}
.staticContactForm__confirmList:after {
content: "";
clear: both;
display: block;
}
.staticContactForm__confirmTerm {
width: 250px;
float: left;
clear: both;
}
.staticContactForm__confirmDescription {
width: -webkit-calc(100% - 250px);
width: calc(100% - 250px);
float: left;
}
.staticContactForm__confirmDescription .staticContactForm__caution {
margin: 10px 0 0;
}
.staticContactForm__textForm, .staticContactForm__textForm--short {
width: 100%;
line-height: 38px;
border-radius: 8px;
padding: 0 10px;
border: 1px solid #cccccc;
box-shadow: inset 0px 3px 4px 0px rgba(0, 0, 0, 0.15);
box-sizing: border-box;
}
.staticContactForm__textForm--short {
max-width: 160px;
width: -webkit-calc(50% - 54px);
width: calc(50% - 54px);
}
.staticContactForm__textForm--short + .staticContactForm__inputItemName {
margin: 0 0 0 24px;
}
.staticContactForm__inputItemName {
width: 40px;
line-height: 38px;
display: inline-block;
}
.staticContactForm__selectBox {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
width: 100%;
max-width: 410px;
height: 38px;
border-radius: 8px;
border: 1px solid #cccccc;
padding: 0 10px;
box-sizing: border-box;
position: relative;
}
.staticContactForm__selectBoxWrapper {
position: relative;
width: 100%;
max-width: 410px;
margin: 0 10px 0 0;
display: inline-block;
}
.staticContactForm__selectBoxWrapper::after {
background-image: url(../materials/sprites.png);
background-position: -279.5px -69px;
width: 8px;
height: 17px;
background-size: 290px 251.5px;
content: '';
position: absolute;
right: 10px;
top: 0;
bottom: 0;
margin: auto;
}
.staticContactForm__textarea {
width: 100%;
border-radius: 8px;
padding: 0 10px;
border: 1px solid #cccccc;
box-shadow: inset 0px 3px 4px 0px rgba(0, 0, 0, 0.15);
box-sizing: border-box;
}
.staticContactForm__buttonWrapper {
text-align: center;
margin: 20px 0 0;
}
.staticContactForm__buttonWrapper:after {
content: "";
clear: both;
display: block;
}
.staticContactForm__button {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
border: 0 solid #cccccc;
color: #fff;
box-shadow: 0 -3px 0px 0px #00a2b1 inset;
background: -webkit-linear-gradient(top, #00a2d6 0%, #00bcd0 100%);
background: linear-gradient(to bottom, #00a2d6 0%, #00bcd0 100%);
cursor: pointer;
width: 240px;
display: inline-block;
}
.staticContactForm__button.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.staticContactForm__button.is-buttonDisabled span {
color: #bbbbbb !important;
}
.staticContactForm__button.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.staticContactForm__button.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.staticContactForm__button.is-buttonCancel span {
color: #999999 !important;
}
.staticContactForm__button.is-buttonCancel span::before {
color: #999999 !important;
}
.staticContactForm__button.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.staticContactForm__button.is-buttonDisabled span {
color: #bbbbbb !important;
}
.staticContactForm__button.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.staticContactForm__button.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.staticContactForm__button.is-buttonCancel span {
color: #999999 !important;
}
.staticContactForm__button.is-buttonCancel span::before {
color: #999999 !important;
}
.staticContactForm__button--return {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
width: 240px;
display: inline-block;
float: left;
}
.staticContactForm__button--return.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.staticContactForm__button--return.is-buttonDisabled span {
color: #bbbbbb !important;
}
.staticContactForm__button--return.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.staticContactForm__button--return.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.staticContactForm__button--return.is-buttonCancel span {
color: #999999 !important;
}
.staticContactForm__button--return.is-buttonCancel span::before {
color: #999999 !important;
}
.staticContactForm__button--normal {
line-height: 1;
font-size: 16px;
display: block;
border: 1px solid #cccccc;
border-radius: 24px;
text-align: center;
position: relative;
box-shadow: 0 -3px 0 0 #e5e5e5 inset;
color: #a28d42;
font-weight: bold;
padding: 15px 10px 17px;
width: 100%;
background-color: #fff;
width: 240px;
display: inline-block;
}
.staticContactForm__button--normal.is-buttonDisabled {
background: #eaedf0 !important;
color: #bbbbbb !important;
border: 1px solid #cccccc !important;
box-shadow: 0 -3px 0px 0px transparent inset !important;
pointer-events: none;
}
.staticContactForm__button--normal.is-buttonDisabled span {
color: #bbbbbb !important;
}
.staticContactForm__button--normal.is-buttonDisabled span::before {
color: #bbbbbb !important;
}
.staticContactForm__button--normal.is-buttonCancel {
background: #eef2f5 !important;
border: 1px solid #cccccc !important;
color: #999999 !important;
box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.1) inset !important;
}
.staticContactForm__button--normal.is-buttonCancel span {
color: #999999 !important;
}
.staticContactForm__button--normal.is-buttonCancel span::before {
color: #999999 !important;
}
.staticContactForm__buttonListItem {
flaot: left;
}
.staticContactForm__buttonListItem.is-right {
float: right;
}
.staticContactForm__buttonList {
width: 510px;
margin: auto;
}
.staticContactForm__buttonList:after {
content: "";
clear: both;
display: block;
}
.staticText {
color: #1b2433;
font-size: 14px;
}
.staticText__inner {
margin: auto;
padding: 50px 0 0;
}
.staticText__title {
font-size: 22px;
}
.staticText__title02 {
font-size: 16px;
padding: 0 10px;
border-left: 3px solid #000;
line-height: 20px;
}
.staticText__title03 {
font-size: 14px;
margin: 30px 0 0;
}
.staticText__title03 + .staticText__text {
margin: 5px 0 0;
}
.staticText__text {
margin: 5px 0 0;
}
.staticText__imageText {
margin: 25px 0 0;
}
.staticText__link {
color: #b08c4e;
}
.staticText__arrowLink {
color: #b08c4e;
padding: 0 20px 0 0;
position: relative;
margin: 5px 0 0;
display: inline-block;
}
.staticText__arrowLink::before {
content: '';
position: absolute;
top: 10px;
right: 0px;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
margin: auto 0;
width: 8px;
height: 1px;
background-color: #cfcfcf;
}
.staticText__arrowLink::after {
content: '';
position: absolute;
top: 15px;
right: 0px;
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
margin: auto 0;
width: 8px;
height: 1px;
background-color: #cfcfcf;
}
.staticText__contentBox {
padding: 30px 0;
border-bottom: 1px solid #eeeeee;
border-top: 1px solid #eeeeee;
}
.staticText__contentBox:first-child {
border-top: 0px solid #eeeeee;
}
.staticText__contentBox.is-noBorder {
border-bottom: 0px solid #eeeeee;
border-top: 0px solid #eeeeee;
}
.staticText__contentInnerBox {
padding: 0 0 0 25px;
}
.staticText__caution {
color: #888888;
}
.staticText__staticBox ol {
margin: 1em 0;
padding-left: 2em;
list-style-type: decimal;
}
.staticText__staticBox ol li {
list-style-type: decimal;
}
.staticText__staticBox ul {
margin: 1em 0;
padding-left: 2em;
list-style-type: disc;
}
.staticText__staticBox ul li {
list-style-type: disc;
}
.staticText__tabList {
border-bottom: 1px solid #eee;
padding: 0 0 35px 0;
margin: 20px 0 0;
}
.staticText__tabList:after {
content: "";
clear: both;
display: block;
}
.staticText__tabListItem {
float: left;
margin: 0 16px 0 0;
}
.staticText__tabListLink {
color: #ab8e48;
border: 1px solid #eee;
border-radius: 17px;
line-height: 34px;
padding: 0 16px;
display: inline-block;
}
.staticText__table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin: 20px 0 0;
}
.staticText__table .is-type2 .staticText__tableHeader {
width: 12%;
height: 3em;
}
.staticText__table .is-type2 .staticText__tableData {
height: 3em;
}
.staticText__thead .staticText__tableData {
font-weight: bold;
}
.staticText__tableHeader {
height: 4em;
padding: 10px;
border: 1px solid #CCCCCC;
text-align: left;
vertical-align: middle;
font: inherit;
}
.staticText__tableData {
height: 4em;
padding: 10px;
border: 1px solid #CCCCCC;
text-align: center;
}
.staticText__tableNumber {
font-size: 14px;
font-weight: bold;
color: #ab8e48;
}
.staticText__textOrenge {
color: #ff4d00;
}
.staticText__bgBronze {
background-color: #fdf2e9;
}
.staticText__bgSilver {
background-color: #f7f7f7;
}
.staticText__bgGold {
background-color: #fbf7e4;
}
.staticText__bgGold {
background-color: #fbf7e4;
}
.staticText__centerImage {
text-align: center;
margin: 15px 0 0;
}
.staticText__centerImage img {
max-width: 100%;
}
.staticText__leftImage {
text-align: left;
margin: 15px 0 0;
}
.staticText__leftImage img {
max-width: 100%;
}
.staticText__agreementBox dt {
font-size: 14px;
margin: 30px 0 0;
font-weight: bold;
}
.staticText__agreementBox dd {
margin: 5px 0 0;
}
.staticText__agreementBox ol {
margin-left: 24px;
}
.staticText__agreementBox ol.typeNone li {
list-style-type: none;
text-indent: -1.5em;
}
.staticText__agreementBox ol li {
list-style-type: decimal;
margin-top: 10px;
}
.staticText__smallList {
margin: 30px 0 0;
}
.staticText__smallListItem {
font-size: 12px;
}
.staticText__textBox {
margin: 30px 0 0;
}
.staticText__textBox .staticText__caution {
margin: 10px 0 0;
}
.staticModal {
font-size: 12px;
}
.staticModal__inner {
padding: 10px 40px 40px;
}
.staticModal__text, .staticModal__text--noIndent {
text-indent: 1em;
margin: 24px 0 0;
}
.staticModal__text--noIndent {
text-indent: 0em;
}
.staticModal__title {
margin: 24px 0 0;
font-size: 12px;
}
.renewal {
color: #182432;
font-size: 14px;
}
.renewal__inner {
margin: 120px auto;
text-align: center;
max-width: 1024px;
padding: 0 20px;
box-sizing: border-box;
}
.renewal__image {
margin: auto;
width: 100%;
}
.renewal__title {
width: 770px;
text-align: center;
margin: auto;
}
.renewal__text {
font-size: 16px;
line-height: 1.8;
margin: 5px 0 0;
}
.renewal__lead {
margin: 30px 0 0;
font-size: 24px;
}
.renewal__cautionBox {
padding: 15px;
background-color: #f9f9f9;
border: 1px solid #eeeeee;
border-radius: 4px;
text-align: left;
width: 800px;
margin: 36px auto 0;
box-sizing: border-box;
}
.renewal__cautionListItem {
color: #666666;
font-size: 12px;
position: relative;
padding: 0 0 0 20px;
line-height: 1.5;
margin: 5px 0 0;
}
.renewal__cautionListItem:before {
content: '※';
position: absolute;
left: 0;
}
.renewal__time {
display: inline-block;
margin: 0 5px;
}
.renewal__spOnly {
display: none;
}