/* Minification failed. Returning unminified contents.
(2402,10): run-time error CSS1035: Expected colon, found '0'
 */
#mainContentsCreate {
    margin: 0 0 54px 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}
#mainContentsLastPreview {
    margin: 0 0 54px 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}
#mainContentsLogin {
    margin: 54px 180px 86px;
}

/* Checkbox Button */
input[type=checkbox], input[type=radio] {
  display: none;
}
.radio, .checkbox {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  padding: 4px 0 0 42px;
  border-radius: 6px;
  color:#fff;
  background-color: transparent;
  font-size:16px;
  vertical-align: middle;
  cursor: pointer;
}
.osMac .radio,
.osMac .checkbox {
    letter-spacing:-1px;
}
.radio:after,
.checkbox:after {
  position: absolute;
  top: 50%;
  left: 15px;
  display: block;
  margin-top: -10px;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  content: '';
}
.checkbox:before {
  position: absolute;
  top: 50%;
  left: 21px;
  display: block;
  margin-top: -7px;
  width: 5px;
  height: 9px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  content: '';
  opacity: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.radio:before {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 50%;
  left: 20px;
  display: block;
  margin-top: -5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #01916d;
  content: '';
  opacity: 0;
}
input[type=radio]:checked + .radio:before {
  opacity: 1;
}
input[type=checkbox]:checked + .checkbox:before {
  opacity: 1;
}

/***************** 模様替えエリア *****************/
.makeOverArea {
    position: absolute;
    top: 14px;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    height: 120px;
}
.makeOverArea > .roomChangeArea,
.makeOverArea > .wallpaperChangeArea {
    display: flex;
    justify-content: center;
    position:relative;
}
.makeOverArea > .wallpaperChangeArea {
    margin-top: 10px;
}
.roomChangeArea > .roomChangeLabelArea,
.wallpaperChangeArea > .wallpaperChangeLabelArea {
    text-align: right;
    padding:4px 0 0 0;
}
.roomChangeArea > .roomChoicesArea,
.wallpaperChangeArea > .wallpaperChoicesArea {
    display: flex;
    list-style: none;
    margin-right:24px;
}
.roomChangeArea > .roomChoicesArea > .roomChoices,
.wallpaperChangeArea > .wallpaperChoicesArea > .wallpaperChoices {
    margin-left: 12px;
    cursor: pointer;
}
.roomChangeArea > .roomChoicesArea > .roomChoices:first-child,
.wallpaperChangeArea > .wallpaperChoicesArea > .wallpaperChoices:first-child {
    margin-left: 0;
}
.roomChangeLabel,
.wallpaperChangeLabel {
    font-size: 16px;
    color: #fff;
    margin-right:24px;
}
.osMac .roomChangeLabel,
.osMac .wallpaperChangeLabel {
    letter-spacing: -1px;
}
.wallpaperRadioButton {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    border: 3px solid #ccc;
    background-color: #00ffff;
    transition: border ease 200ms;
}
input[type=radio]:checked + label.wallpaperRadioButton {
    border: 3px solid #dd621c;
}
/*仕上がり確認拡縮ボタン*/
.zoomBtnArea {
    position:absolute;
    top:-5px;
    right:2%;
    display:block;
    width: 35px;
    height: 35px;
}
@media screen and (max-width: 1350px) {
    .zoomBtnArea {
        right: 5px;
    }
}
.zoomButton {
    display:block;
    width: 100%;
    height: 100%;
    background-color: #01916d;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60%;
    background-image: url(../common-img/img/svg/btn_icon_viewzoom.svg);
}
    .zoomButton.checked {
        background-image: url(../common-img/img/svg/btn_icon_viewthumb.svg);
    }
/***************** 商品サイズ選択画面 *****************/
.productSizeArea {
    position: absolute;
    width: calc(100% - 19px);
    top: 97px;
    left: 19px;
    bottom: 0;
}
.trialMode .productSizeArea {
    bottom: 230px;
}
.productSizeScrollArea {
    width: calc(100% - 6px);
    height: 100%;
    overflow-y: auto;
}
.productSizeList {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}
.productSizeListItem {
    position: relative;
    width: 378px;
    height: 76px;
    margin: 7px;
    border: 1px solid #e4f0ef;
    background-color: #01916d;
}
    .productSizeListItem.selected {
        border: 1px solid #01916d;
        background-color: #fff;
    }
.productSizeLabelArea {
    position: absolute;
    top: 14px;
    left: 16px;
}
.productSizeLabelArea > .productSizeLabel {
    font-size: 16px;
    color: #fff;
}
    .productSizeLabelArea > .productSizeLabel > p {
        font-weight: bold;
        margin: 20px 0 0 0;
    }
.productSizeListItem.selected .productSizeLabel {
    color: #01916d;
}
.productPriceLabelArea {
    position: absolute;
    bottom: 14px;
    right: 16px;
    margin: auto;
    text-align: right;
}
.productPriceLabelArea > .productPriceLabel {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
}
.productSizeListItem.selected .productPriceLabel {
    color: #01916d;
}

/***************** サービス説明エリア(テストプリント・講評サービス) *****************/
.serviceMsgArea {
    font-size: 16px;
    display: none;
    position: absolute;
    bottom: 40px;
    left: 33px;
    width: 354px;
    height: 160px;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 10px;
    background-color: #808080;
    font-size: 16px;
    color: #fff;
    line-height: 22px;
}
body.osMac .serviceMsgArea {
    padding: 20px 10px;
}
.trialMode .serviceMsgArea {
    display: block;
}

/***************** フチ、後加工選択画面 *****************/
.afterProcessingSelectArea,
.borderSelectArea,
.changesSelectArea {
    position: absolute;
    margin: 0 0 0 26px;
    width: calc(100% - 26px);
    top: 97px;
    left: 0;
    bottom: 0;
}
.afterProcessingSelectScrollArea,
.borderSelectScrollArea,
.changesSelectScrollArea {
    width: calc(100% - 6px);
    height: 100%;
    overflow-y: auto;
}
.afterProcessingSelectList,
.borderSelectList,
.changesSelectList {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}
.afterProcessingSelectListItem,
.borderSelectListItem {
    width: 220px;
    height: 76px;
    margin: 7px;
    border: 1px solid #e4f0ef;
    background-color: #01916d;
}
    .afterProcessingSelectListItem.selected,
    .borderSelectListItem.selected {
        border: 1px solid #01916d;
        background-color: #fff;
    }
.borderSelectListItem {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}
.afterProcessingSelectListItem {
    position: relative;
    width: 360px;
    height: 140px;
    padding: 1rem;
}
.borderColorLabelArea {
    width: 180px;
    text-align: center;
}
.borderColorLabel {
    font-size: 2.8rem;
    color: #fff;
}
.borderSelectListItem.selected .borderColorLabel {
    color: #01916d;
}
.afterProcessingItemNameArea {
    position: absolute;
    top: 1.6rem;
    left: 2rem;
}
    .afterProcessingItemNameArea > .afterProcessingItemName {
        font-size: 2.2rem;
        color: #fff;
    }
.afterProcessingSelectListItem.selected .afterProcessingItemName {
    color: #01916d;
}
.afterProcessingItemPriceArea {
    position: absolute;
    right: 2rem;
    top: 1.6rem;
}
    .afterProcessingItemPriceArea > .afterProcessingItemPrice {
        font-size: 2.4rem;
        font-weight: bold;
        color: #fff;
    }
.afterProcessingSelectListItem.selected .afterProcessingItemPrice {
    color: #01916d;
}
.afterProcessingItemDescriptionArea {
    position: absolute;
    top: 6rem;
    left: 1.6rem;
    right: 1.6rem;
}
    .afterProcessingItemDescriptionArea > .afterProcessingItemDescription {
        font-size: 1.6rem;
        line-height:1.2;
        color: #fff;
    }
.afterProcessingSelectListItem.selected .afterProcessingItemDescription {
    color: #01916d;
}
.changesSelectListItem {
    width: 354px;
    height: 76px;
    margin: 7px;
}
.changesItemButton {
    display: inline-block;
    width: 100%;
    height: 100%;
    border:solid 1px #e4f0ef;
    box-sizing:border-box;
    background-color: #01916d;
    padding: 0 0 0 150px;
    font-size: 22px;
    text-align:left;
    color: #fff;
    background-image: url("");
    background-position: 30px;
    background-repeat: no-repeat;
    background-size: 100px;
}
.changesItemButton:active {
    background-color: #016950;
}
#afterProcessing-button {
    background-image: url("../common-img/img/svg/icn_prev_proc.svg");
}
#border-button {
    background-image: url("../common-img/img/svg/icn_prev_frame.svg");
    background-position: 24px;
}
.changesItemButton.selected {
    border: 1px solid #01916d;
    background-color: #fff;
    color: #01916d;
}
    .changesItemButton.selected#afterProcessing-button {
        background-image: url("../common-img/img/svg/icn_prev_proc_selected.svg");
    }
    .changesItemButton.selected#border-button {
        background-image: url("../common-img/img/svg/icn_prev_frame_selected.svg");
    }

/** プレビュー画面のポップアップ **/
.popupConfirmSettings {
  position: absolute;
  width: 70%;
  max-width: 1200px;
  height: 80%;
  max-height: 800px;
  top: -22px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  padding: 0 0 55px 0;
  background-color: #ffffff;
  border: 1px solid #01916d;
  color: #333333;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow:0 0 20px #666;
}

/******* オプション写真選択ガイド *******/
.optionNavigationArea {
  position: absolute;
  margin: auto;
  right: 10px;
  top: 10px;
}
.optionNavigataionMessageArea {
  margin: auto;
  position: relative;
  text-align: center;
}
.optionNavigataionMessage {
    font-size: 1.6rem;
    color: #ffffff;
}
body.osMac .optionNavigataionMessage {
    font-size: 1.2rem;
}

/******* 見切れ警告 *******/
#expiresImageWarnZone {
  position: absolute;
  font-size:14px;
  line-height: 1.2;
  color: #fff;
  transition: 300ms right ease;
  top: 30px;
  left: 0;
  width: 740px;
}
body.osMac #expiresImageWarnZone {
    letter-spacing: -1.2px;
    font-size: 13px
}
#expiresImageWarnImg {
  display: inline-block;
  width: 18px;
  height: 18px;
  color: #800000;
}
#expiresImageWarn {
  vertical-align: text-top;
}

/*　通常注文中のリンクボタンの制御 */
#serviceSwitchReviewButton {
    margin-left: 10px;
}

#serviceSwitchTestButton {
    margin-left: 0px;
}
.paperSelectArea {
    position: absolute;
    margin:0 0 0 19px;
    width: calc(100% - 19px);
    top: 97px;
    left: 0;
    bottom: 0;
}
.paperSelectScrollArea {
    width: calc(100% - 6px);
    height: 100%;
    overflow-y: auto;
}
.paperSelectList {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}
.paperSelectListItem {
    position: relative;
    width: 508px;
    height: 140px;
    margin: 7px;
    border: 1px solid #e4f0ef;
    background-color: #01916d;
    padding:14px 16px;
    box-sizing:border-box;
}
    .paperSelectListItem.selected {
        border: 1px solid #01916d;
        background-color: #fff;
    }
.paperItemNameArea {
    position: absolute;
    top: 14px;
    left: 16px;
}
    .paperItemNameArea > .paperItemName {
        font-size: 22px;
        color: #fff;
    }
.paperSelectListItem.selected .paperItemName {
    color: #01916d;
}
.paperItemPriceArea {
    position: absolute;
    right: 16px;
    top: 14px;
}
    .paperItemPriceArea > .paperItemPrice {
        font-size: 24px;
        font-weight: bold;
        color: #fff;
    }
.paperSelectListItem.selected .paperItemPrice {
    color: #01916d;
}
.paperItemDescriptionArea {
    position: absolute;
    top: 60px;
    left: 16px;
    right: 16px;
}
    .paperItemDescriptionArea > .paperItemDescription {
        font-size: 16px;
        color: #fff;
        line-height: 1.2;
    }
.paperSelectListItem.selected .paperItemDescription {
    color: #01916d;
}
.uploadBg {
    background-color: #dde7de;
}
#mainContents {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  flex-flow: column nowrap;
  margin: 0 20px 54px 20px;
}
#headerAreaUpload {
    padding: 19px 30px 0 30px;
}
#headerCaption {
	color: rgb(118, 118, 118);
    /*font-size: 3rem;*/
    font-size: 2.5rem;
}
    #headerCaption.uploadHeaderCaption {
        height: 34px;
        font-size: 24px;
        color: #01916d;
        font-weight: bold;
        border-bottom: solid 1px #01916d;
    }
#readImageSourceArea {
  position: relative;
  width: 100%;
  height:100%;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  flex-flow: column nowrap;
}
#readImageSourceCaptionArea {
	padding: 0 3rem 0;
}
#readImageSourceCaption {
    font-size: 16px;
    line-height:1.2;
    color:#666;
    margin:10px 0 0 0;
}
#xCameraDiscountCaption {
    font-size: 14px;
    line-height: 1.2;
    color: #666;
    margin: 10px 0 0 0;
}
#xCameraDiscountCaption > span {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4;
}
#imgSrcGrpZone {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%)translateY(-50%);
    width: 60%;
    height: 30%;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
}
.imgSrcGrp {
    position: relative;
    width: 100%;
    height: 100%;
}
.ddArea {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    border: dashed 4px #fff;
    border-radius:20px;
    box-sizing:border-box;
}
.ddArea:hover{
    background-color:rgba(0,0,0,0.1);
}
.ddMsgArea {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.ddIcon {
    display: block;
    width: auto;
    height: 70px;
    margin: auto;
}
.ddMsg {
    font-size: 24px;
    color: #a8a8a8;
    text-align: center;
}
.imgSrcBtnZone {
    position: absolute;
    bottom: -68px;
    display: flex;
    justify-content:center;
    width: 100%;
    height: 38px;
    margin: auto;
}
.imgSrcMsg {
    color: #666;
    font-size: 16px;
    text-align: left;
    line-height: 38px;
}
:nth-child(4).imgSrc ~ .imgSrc .imgSrcBtnZone {
    top: 0px;
    bottom: 25%;
}
.imgSrcBtn {
    background-color: #01916d;
    border: solid 1px #e4f0ef;
    width: 168px;
    height: 38px;
    margin: 0 0 0 20px;
}
.imgSrcBtn:active {
    background-color: #016950;
}
.anmEffect .imgSrcBtn,
.imgSrcBtn.anmEffect {
	z-index: 10;
    animation-name: anmEffect;
    animation-duration: 600ms;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    -webkit-animation-name: anmEffect;
    -webkit-animation-duration: 600ms;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
}
@-webkit-keyframes anmEffect {
  0% {
    box-shadow: 0px 0px 1px 1px rgba(237, 156, 156, 0.4);
  }
  30% {
    box-shadow: 0px 0px 50px 20px rgba(237, 156, 156, 0.6);
  }
  100% {
    box-shadow: 0px 0px 50px 50px rgba(237, 156, 156, 0);
  }
}
@keyframes anmEffect {
  0% {
    box-shadow: 0px 0px 1px 1px rgba(237, 156, 156, 0.4);
  }
  30% {
    box-shadow: 0px 0px 50px 20px rgba(237, 156, 156, 0.6);
  }
  100% {
    box-shadow: 0px 0px 50px 50px rgba(237, 156, 156, 0);
  }
}
.tapEffect.imgSrcBtn {
	z-index: 100;
    animation-name: cardinalTapEffect;
    animation-duration: 600ms;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    -webkit-animation-name: cardinalTapEffect;
    -webkit-animation-duration: 600ms;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
}
.imgSrcTitleZone {
    position: absolute;
    width: 100%;
	left: 0px;
    top: 10%;
}
.imgSrcTitle {
    font-size: 16px;
    text-align: center;
    color: #fff;
}
sup {
	font-size: 1.3rem;
    vertical-align: super;
}
.imgSrcCaptionZone {
    position: absolute;
    width: 100%;
	left: 0px;
    bottom: 5%;
}
.imgSrcCaption {
	width: 100%;
    height: 100%;
    text-align: center;
    line-height: 1.3em;
    font-size: 1.3rem;
}
#scrollbarArea {
    position: absolute;
    display: -webkit-flex;
    display: flex;
    width: 40px;
    height: 100%;
    right: 0px;
    align-items: center;
    -webkit-align-items: center;
	flex-flow:column nowrap;
    -webkit-flex-flow: column nowrap;
    box-sizing: border-box;
}
#preScrollImageArea {
    width: 30px;
    height: 15px;
	margin: 10px 0px;
    order: 1;
    -webkit-order: 1;
}
#preScrollImageArea > * {
    display: block;
    width: 0px;
    height: 0px;
    margin: 0px auto;
    border-image: none;
	border-width: medium 9px 15px;
    border-style: none solid solid;
    border-color: currentColor transparent rgba(0, 0, 0, 0.6);
}
#commodityInputListScrollbarArea {
    position: relative;
    width: 10px;
    margin: 0px 15px;
	background: none;
    border: currentColor;
    border-image: none;
    -webkit-flex: 1 1 auto;
    flex:1 1 auto;
    order: 2;
    -webkit-order: 2;
}
#commodityInputListScrollbarArea > * {
    position: absolute;
    width: 10px;
    height: 120px;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.6);
	border-radius: 5px;
}
#nextScrollImageArea {
    width: 30px;
    height: 15px;
	margin: 10px 0px;
    order: 3;
    -webkit-order: 3;
}
#nextScrollImageArea > * {
    display: block;
    width: 0px;
    height: 0px;
    margin: 0px auto;
    border-image: none;
	border-width: 15px 9px medium;
    border-style: solid solid none;
    border-color: rgba(0, 0, 0, 0.6) transparent currentColor;
}
.uploadConfirmArea {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
	background: none;
    z-index: 19;
}
.uploadConfirmArea * {
    -webkit-backface-visibility: visible;
	backface-visibility: visible;
}
.uploadConfirmBtnLeftArea {
    width: calc(50% - 1.5px);
    display: flex;
    justify-content: flex-end;
}
.uploadConfirmBtnRightArea {
    width: calc(50% - 1.5px);
    display: flex;
    justify-content: space-between;
}
#updatedPicCaption {
    padding-left: 20px;
}
.uploadConfirmBackgroundArea {
    position: absolute;
    left: -9999px;
    top: -9999px;
    right: -9999px;
    bottom: -9999px;
	margin: auto;
    opacity: 0.5;
    background-color: rgb(51, 51, 51);
}
.uploadConfirmZone {
    position: absolute;
    display: -webkit-flex;
    display: flex;
    overflow: hidden;
    width: 70%;
    min-width: 550px;
    height: 90%;
    top: -22px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    color: rgb(51, 51, 51);
    border: 1px solid #01916d;
    border-image: none;
    box-sizing: border-box;
    background-color: rgb(255, 255, 255);
    flex-direction: column;
    -webkit-flex-direction: column;
    box-shadow: 0 0 20px #666;
}
.uploadConfirmContentsZone {
    display: -webkit-flex;
    display: flex;
	height: 100%;
    flex-direction: column;
    -webkit-flex-direction: column;
}
.uploadConfirmCaption {
    height: 66px;
    text-align: left;
    color: rgb(118, 118, 118);
    line-height: 1.7em;
    font-size: 2rem;
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    padding: 18px 0 0 24px;
    box-sizing: border-box;
}
.uploadScheduledQuantityCaption {
	height: 1.7em;
    color: #666;
    font-size: 2rem;
}
.uploadScheduledQuantityColon {
    height: 1.7em;
    padding: 0px;
    margin-bottom: 1.5rem;
    color: #666;
    font-size: 2rem;
}
.uploadScheduledQuantity {
	height: 1.7em;
    color: #01916d;
    font-size: 2rem;
    font-weight:bold;
}
.uploadScheduledQuantityCaption2 {
    height: 1.7em;
    color: #666;
    font-size: 2rem;
}
.uploadConfirmDisplay {
    position: relative;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
	flex:1 1 1px;
    -webkit-flex: 1 1 1px;
    flex-direction: column;
    -webkit-flex-direction: column;
}
#uploadFileListHeader {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    height:40px;
    min-height: 20px;
	padding: 10px 50px;
    box-sizing:border-box;
    color: rgb(255, 255, 255);
    font-size: 18px;
    background-color: #01916d;
}
#tableHeaderUploadFileName {
    width: 60%;
}
#tableHeaderUploadProprietyCap {
    width: 40%;
    text-align:center;
    letter-spacing:-1px;
}
.dragAndDropUploadArea {
    position: relative;
    width: 90%;
    height: calc(100% - 142px);
    border: 3px dashed #999;
    margin: 0px auto;
}
.ddDistributionArea {
    position: absolute;
    width: 100%;
    height: 60%;
    top:20%;
}
.uploadIconArea {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
}
.uploadIcon {
    width: 100%;
    height: 70%;
}
.dispCaptionArea {
    position: absolute;
    width: 100%;
    bottom: 0;
    font-size: 32px;
    color: #333;
    text-align: center;
}
.uploadFileList {
    color: #666;
    overflow: auto;
    width: 100%;
    height: 100%;
    margin-bottom: 56px;
    font-size: 18px;
    border-radius: 0px 0px 10px 10px;
    flex: 1 1 1px;
    -webkit-flex: 1 1 1px;
}
.uploadFileList > li {
    background-color: rgb(252, 252, 252);
}
.uploadFileList > li:nth-of-type(2n-1) {
	background-color: #dce9ef;
}
.uploadFiles {
    position: relative;
    display: -webkit-flex;
    display: flex;
    height: 40px;
	padding: 10px 50px 6px 50px;
    box-sizing:border-box;
}
.tableUploadFileNameAreaGrp {
    height: 100%;
    overflow: hidden;
    width:60%;
}
.tableUploadProprietyCapAreaGrp {
    width: 40%;
    display: flex;
    justify-content: center;
}
.tableUploadFileNameArea {
	left: 2.5rem;
    position: absolute;
}
.tableUploadFileName {
	height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1em;
    white-space: nowrap;
}
.tableUploadProprietyCapArea {
    position: absolute;
	right: 50%;
}
.tableUploadFileProprietyCap {
    display: inline;
    text-overflow: ellipsis;
	overflow: hidden;
    white-space: nowrap;
}
.tableUploadFileProprietyAlertText {
    display: inline;
	font-size: 1.8rem;
}
body.osMac .tableUploadFileProprietyAlertText {
    display: inline;
	font-size: 1.6rem;
}
.osMac .tableUploadFileProprietyAlertText {
	letter-spacing: -0.15em;
}
.notAccepted.tableUploadProprietyCapAreaGrp {
	color: red;
}
.uploadConfirmScrlArea {
    position: absolute;
    display: -webkit-flex;
    display: flex;
    width: 40px;
    height: calc(100% - 4em);
    top: 4em;
    right: 1rem;
    align-items: center;
    -webkit-align-items: center;
	flex-flow:column nowrap;
    -webkit-flex-flow: column nowrap;
    box-sizing: border-box;
}
.uploadConfirmUpScrlBtnZone {
    position: relative;
    width: 46px;
    height: 46px;
	margin: 10px 0px;
    order: 1;
    -webkit-order: 1;
}
.uploadConfirmUpScrlBtnZone > button {
    width: 46px;
    height: 46px;
    border-radius: 7px;
	background-position: center;
    background-image: url("../common-img/img/svg/btn_icon_scroll_up.svg");
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.6);
}
.uploadConfirmScrlBarZone {
    position: relative;
    width: 28px;
    margin: 0px 15px;
	background: none;
    border: currentColor;
    border-image: none;
    flex:1 1 auto;
    -webkit-flex: 1 1 auto;
    order: 2;
    -webkit-order: 2;
}
.uploadConfirmScrlBarZone > * {
    position: absolute;
    width: 10px;
    height: 120px;
    top: 0px;
	border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.6);
}
.uploadConfirmScrlBar {
	width: 28px;
    min-height: 28px;
}
.scrollBarBtn {
	width: 100%;
    height: 100%;
}
.uploadConfirmDownScrlBtnZone {
    position: relative;
    width: 46px;
    height: 46px;
	margin: 10px 0px;
    order: 3;
    -webkit-order: 3;
}
.uploadConfirmDownScrlBtnZone > button {
    width: 46px;
    height: 46px;
    border-radius: 7px;
	background-position: center;
    background-image: url("../common-img/img/svg/btn_icon_scroll_down.svg");
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.6);
}
.uploadConfirmBtnArea {
    position: absolute;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    height: 56px;
    left: 0px;
    bottom: 0px;
    background-color: #fff;
    align-items: flex-end;
    -webkit-align-items: flex-end;
    flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    box-sizing: border-box;
    border-top: 1px solid #01916d;
}
.browserIE .uploadConfirmBtnArea {
	z-index: 10;
}
.uploadConfirmCancel {
	display: inline-block;
}
.uploadConfirmCancelBtn {
    position: relative;
    display: block;
    min-width: 180px;
    height: 56px;
    padding: 0 0 0 35px;
    color: #01916d;
    font-family: "Meiryo UI", "���C���I", "�q���M�m�p�S Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    font-size: 2rem;
    line-height: 1;
    border-image: none;
    background-color: transparent;
    background-size: 36px;
    background-repeat: no-repeat;
    background-position: 10px center;
    background-image: url("../common-img/img/svg/icn_cancel_green.svg");
    transition: 200ms;
    -webkit-transition: all 200ms ease;
}
.anmEffect .uploadConfirmCancelBtn {
	z-index: 10;
    animation-name: anmEffect;
    animation-duration: 600ms;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    -webkit-animation-name: anmEffect;
    -webkit-animation-duration: 600ms;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
}
.anmEffect.uploadConfirmCancelBtn {
	z-index: 10;
    animation-name: anmEffect;
    animation-duration: 600ms;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    -webkit-animation-name: anmEffect;
    -webkit-animation-duration: 600ms;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
}
.uploadConfirmExeUpload {
    display: inline-block;
}
.uploadConfirmExeUploadBtn {
    display: block;
    position: relative;
    min-width: 180px;
    height: 56px;
	padding: 0 0 0 35px;
    color: rgb(255, 255, 255);
    line-height: 1.8rem;
    font-family: "Meiryo UI", "���C���I", "�q���M�m�p�S Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    font-size: 2rem;
    background-color: #01916d;
    background-size: 36px;
    background-repeat: no-repeat;
    background-position: 10px center;
    background-image: url("../common-img/img/svg/icn_upload.svg");
    transition: 200ms;
    -webkit-transition: all 200ms ease;
}
    .uploadConfirmExeUploadBtn:active {
        background-color: #016950;
    }
.anmEffect .uploadConfirmExeUploadBtn {
	z-index: 10;
    animation-name: anmEffect;
    animation-duration: 600ms;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    -webkit-animation-name: anmEffect;
    -webkit-animation-duration: 600ms;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
}
.anmEffect.uploadConfirmExeUploadBtn {
	z-index: 10;
    animation-name: anmEffect;
    animation-duration: 600ms;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    -webkit-animation-name: anmEffect;
    -webkit-animation-duration: 600ms;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
}
.uploadConfirmAddImage {
	display: inline-block;
}
.uploadConfirmAddImageBtn {
    position: relative;
    display: block;
    min-width: 180px;
    height: 56px;
    padding: 0 0 0 30px;
    color: #01916d;
    line-height: 56px;
    font-family: "Meiryo UI", "���C���I", "�q���M�m�p�S Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    font-size: 2rem;
    border-image: none;
    background-color: transparent;
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: 10px center;
    background-image: url("../common-img/img/svg/icn_add_photo.svg");
    transition: 200ms;
    -webkit-transition: all 200ms ease;
}
.anmEffect .uploadConfirmAddImageBtn {
	z-index: 10;
    animation-name: anmEffect;
    animation-duration: 600ms;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    -webkit-animation-name: anmEffect;
    -webkit-animation-duration: 600ms;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
}
.anmEffect.uploadConfirmAddImageBtn {
	z-index: 10;
    animation-name: anmEffect;
    animation-duration: 600ms;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    -webkit-animation-name: anmEffect;
    -webkit-animation-duration: 600ms;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
}
.duringUploadArea {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
	background: none;
    z-index: 19;
}
.duringUploadArea * {
	backface-visibility: visible;
    -webkit-backface-visibility: visible;
}
.duringUploadBackgroundArea {
    position: absolute;
    left: -9999px;
    top: -9999px;
    right: -9999px;
    bottom: -9999px;
	margin: auto;
    opacity: 0.5;
    background-color: rgb(51, 51, 51);
}
.duringUploadDisplayArea {
    position: absolute;
    width: 70%;
    min-width: 550px;
    max-width: 800px;
    height: 70%;
    max-height: 400px;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 130px;
    padding: 0% 1%;
    margin: auto;
    border: 1px solid #01916d;
    border-image: none;
    color: #666;
    background-color: rgb(255, 255, 255);
    box-sizing: border-box;
    box-shadow: 0 0 20px #666;
}
.waitImageArea {
    position: absolute;
    width: 90%;
    left: 0px;
    top: 12rem;
    right: 0px;
    bottom: 20rem;
	margin: auto;
}
.waitImage {
    position: absolute;
    width: 96px;
    height: 96px;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    background-image: url("../common-img/img/loadIcon.png");
    background-repeat: no-repeat;
    background-size: 100%;
	background-position: center;
    animation-name: nowLoadingEffect;
    -webkit-animation-name: nowLoadingEffect;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}
.waitCaptionInfoArea {
	padding: 3rem;
    font-size: 1.8rem;
}
.waitCaption {
	text-align: center;
    line-height: 1.5em;
    font-size: 2.5rem;
}
.progressbarReadCancelButtonArea {
    position: absolute;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    left: 0px;
    bottom: 0px;
    -webkit-flex-flow: row wrap;
	flex-flow:row wrap;
    -webkit-justify-content: center;
    justify-content: center;
}
.progressbarArea {
    position: relative;
    width: 50%;
    height: 15px;
    border-radius: 10px;
    margin-bottom: 70px;
    background-color: rgba(0, 0, 0, 0.05);
}
.progressbarReceive {
    position: absolute;
    top: 0px;
    width: 0px;
    height: 15px;
    bottom: 0px;
    margin: auto;
    border-radius: 10px;
    background: #01916d;
    transition: width 100ms;
}
.readBtnArea {
    display: -webkit-flex;
    display: flex;
    height: 56px;
	border-top:solid 1px #01916d;
    background-color: #fff;
    -webkit-flex: 1 1 100%;
    flex:1 1 100%;
    -webkit-align-self: center;
    align-self: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.browserIE .readBtnArea {
	z-index: 10;
}
.readBtnZone {
    height: 100%;
}
.readBtn {
    display: block;
    min-width: 240px;
    height: inherit;
    padding: 0 0 0 35px;
    color: #01916d;
    line-height: 2.3rem;
    font-family: "Meiryo UI", "���C���I", "�q���M�m�p�S Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    font-size: 2.5rem;
    border-image: none;
    background-color: transparent;
    background-size: 36px;
    background-repeat: no-repeat;
    background-position: 5px center;
    background-image: url("../common-img/img/svg/icn_cancel_green.svg");
    transition: 200ms;
    -webkit-transition: all 200ms ease;
    letter-spacing:-1px;
}
.anmEffect .readBtn {
	z-index: 10;
    animation-name: anmEffect;
    animation-duration: 600ms;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    -webkit-animation-name: anmEffect;
    -webkit-animation-duration: 600ms;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
}
.anmEffect.readBtn {
	z-index: 10;
    animation-name: anmEffect;
    animation-duration: 600ms;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    -webkit-animation-name: anmEffect;
    -webkit-animation-duration: 600ms;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
}
.anmEffect .readBtn {
	z-index: 10;
    animation-name: anmEffect;
    animation-duration: 600ms;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    -webkit-animation-name: anmEffect;
    -webkit-animation-duration: 600ms;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
}
.anmEffect.readBtn {
	z-index: 10;
    animation-name: anmEffect;
    animation-duration: 600ms;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    -webkit-animation-name: anmEffect;
    -webkit-animation-duration: 600ms;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
}
.fileUploadFailureConfirmArea {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
	background: none;
    z-index: 19;
}
.fileUploadFailureConfirmArea * {
	backface-visibility: visible;
    -webkit-backface-visibility: visible;
}
.fileUploadFailureConfirmBackgroundArea {
    position: absolute;
    left: -9999px;
    top: -9999px;
    right: -9999px;
    bottom: -9999px;
	margin: auto;
    opacity: 0.5;
    background-color: rgb(51, 51, 51);
}
.fileUploadFailureConfirmZone {
    position: absolute;
    width: 57%;
    min-width: 600px;
    max-width: 800px;
    height: auto;
    min-height: 220px;
    max-height: 70%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: auto;
    padding: 25px;
    background-color: #ffffff;
    border: 1px solid #01916d;
    color: #666;
    box-sizing: border-box;
    overflow: hidden;
}
.fileUploadFailurContentsZone {
	height: 100%;
    margin-bottom: 55px;
}
.fileUploadFailureConfirmCaptionZone {
    text-align: left;
    color: rgb(118, 118, 118);
    line-height: 1.2em;
    font-size: 2.2rem;
    box-sizing: border-box;
    margin: 0 0 25px 0;
}
.osMac .fileUploadFailureConfirmCaption {
    font-size: 2.0rem;
}
.fileUploadFailureConfirmTitle {
	height: 1.7em;
    color: rgb(118, 118, 118);
    font-size: 4rem;
}
.fileUploadFailureDisplay {
    position: relative;
    width: 100%;
    height: 84%;
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    box-sizing: border-box;
    max-height: 250px;
    overflow: auto;
}
.fileUploadFailureFileList {
    overflow: hidden;
    width: 95%;
    height: 100%;
    font-size: 2rem;
	border-radius: 10px;
    flex:1 1 auto;
    -webkit-flex: 1 1 auto;
}
.fileUploadFailureFileList > li {
    height: 2.5rem;
	padding: 1.25rem;
    text-indent: 1.25rem;
    background-color: rgb(252, 252, 252);
}
.fileUploadFailureFileList > li:nth-of-type(2n-1) {
	background-color: rgb(242, 242, 242);
}
.fileUploadFailureFiles {
    position: relative;
    height: 1.2em !important;
	padding: 1.25rem !important;
    line-height: 35px;
}
.tableUploaFailuredFileNameAreaGrp {
	height: 100%;
    overflow: hidden;
}
.tableUploadFailureFileName {
	height: 100%;
    line-height: 1em;
    white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
}
.fileUploadFailureScrlArea {
    position: absolute;
    display: -webkit-flex;
    display: flex;
    width: 40px;
    height: 100%;
    top: 0px;
    right: 1rem;
    align-items: center;
    -webkit-align-items: center;
	flex-flow:column nowrap;
    -webkit-flex-flow: column nowrap;
    box-sizing: border-box;
}
.fileUploadFailureUpScrlBtnZone {
    position: relative;
    width: 46px;
    height: 46px;
	margin: 10px 0px;
    order: 1;
    -webkit-order: 1;
}
.fileUploadFailureUpScrlBtnZone > div {
    width: 46px;
    height: 46px;
    border-radius: 7px;
	background-position: center;
    background-image: url("../common-img/img/svg/btn_icon_scroll_up.svg");
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.6);
}
.fileUploadFailureScrlBarZone {
    position: relative;
    width: 28px;
    margin: 0px 15px;
    border: currentColor;
    border-image: none;
	background: none;
    flex:1 1 auto;
    -webkit-flex: 1 1 auto;
    order: 2;
    -webkit-order: 2;
}
.fileUploadFailureScrlBarZone > * {
    position: absolute;
    width: 10px;
    height: 120px;
    top: 0px;
	border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.6);
}
.fileUploadFailureScrlBar {
	width: 28px;
    min-height: 28px;
}
.scrollBarBtn {
	width: 100%;
    height: 100%;
}
.fileUploadFailureDownScrlBtnZone {
    position: relative;
    width: 46px;
    height: 46px;
	margin: 10px 0px;
    order: 3;
    -webkit-order: 3;
}
.fileUploadFailureDownScrlBtnZone > div {
    width: 46px;
    height: 46px;
    border-radius: 7px;
	background-position: center;
    background-image: url("../common-img/img/svg/btn_icon_scroll_down.svg");
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.6);
}
.fileUploadFailureBtnArea {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 54px;
    background-color: #fff;
    border-top: 1px solid #01916d;
    text-align: center;
}
.fileUploadFailureOkBtnArea {
    height: 100%;
}
.fileUploadFailureOkBtn {
    display: block;
    min-width: 180px;
    height: inherit;
    line-height: 1;
    outline: none;
    background-color: #01916d;
    color: #fff;
    padding: 0 0 0 40px;
    background-image: url(../common-img/img/svg/icn_check.svg);
    background-position: 20px;
    background-size: 40px;
    background-repeat: no-repeat;
}
.uploadLimitConfirmArea {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
	background: none;
    z-index: 19;
}
.uploadLimitConfirmArea * {
	backface-visibility: visible;
    -webkit-backface-visibility: visible;
}
.uploadLimitConfirmBackgroundArea {
    position: absolute;
    left: -9999px;
    top: -9999px;
    right: -9999px;
    bottom: -9999px;
	margin: auto;
    opacity: 0.5;
    background-color: rgb(51, 51, 51);
}
.uploadLimitConfirmZone {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    position: absolute;
    width: 920px;
    min-width: 450px;
    height: 70%;
    min-height: 570px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 2rem 2.5rem 100px 2.5rem;
    margin: auto;
    background-color: #ffffff;
    border: 1px solid #01916d;
    color: #333333;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 0 20px #666;
}
.uploadLimitConfirmContentsZone {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    padding: 0% 1%;
    padding: 2.5rem;
    margin: 1rem 0;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    flex-direction: column;
    -webkit-flex-direction: column;
    color: #333333;
    font-size: 2.2rem;
    box-sizing: border-box;
    background-color: #dce9ef;
}
.uploadLimitConfirmTitleZone {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 1.7em;
    padding: 0 1.5em 0 0.2em;
    font-size: 2.5rem;
    color: #767676;
    box-sizing: border-box;
}
.uploadLimitConfirmTitle {
    padding-left: 0.5em;
}
.uploadLimitConfirmContents {
    font-size: 2rem;
}
.okBtnArea {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 54px;
    background-color: #fff;
    border-top: 1px solid #01916d;
    text-align: center;
}
.okBtnZone {
    height: 100%;
}
.uploadLimitConfirmOkBtn {
    display: block;
    min-width: 180px;
    height: inherit;
    line-height: 1;
    outline: none;
    background-color: #01916d;
    color: #fff;
    padding: 0 0 0 40px;
    background-image: url(../common-img/img/svg/icn_check.svg);
    background-position: 20px;
    background-size: 40px;
    background-repeat: no-repeat;
}
.uploadConfirmArea {
	transition:none;
    -webkit-transition: none;
}
.fileUploadFailureConfirmArea {
	transition:none;
    -webkit-transition: none;
}
.duringUploadArea {
	transition:none;
    -webkit-transition: none;
}
.none.uploadConfirmArea {
	opacity: 1 !important;
    animation-name: hidePopupArea;
    animation-duration: 200ms;
    animation-iteration-count: 1;
    -webkit-animation-name: hidePopupArea;
    -webkit-animation-duration: 200ms;
    -webkit-animation-iteration-count: 1;
}
.none.fileUploadFailureConfirmArea {
	opacity: 1 !important;
    animation-name: hidePopupArea;
    animation-duration: 200ms;
    animation-iteration-count: 1;
    -webkit-animation-name: hidePopupArea;
    -webkit-animation-duration: 200ms;
    -webkit-animation-iteration-count: 1;
}
.none.duringUploadArea {
	opacity: 1 !important;
    animation-name: hidePopupArea;
    animation-duration: 200ms;
    animation-iteration-count: 1;
    -webkit-animation-name: hidePopupArea;
    -webkit-animation-duration: 200ms;
    -webkit-animation-iteration-count: 1;
}
.uploadConfirmBackgroundArea {
	transition:opacity 200ms;
    -webkit-transition: 200ms opacity ease;
}
.fileUploadFailureConfirmBackgroundArea {
	transition:opacity 200ms;
    -webkit-transition: 200ms opacity ease;
}
.duringUploadBackgroundArea {
	transition:opacity 200ms;
    -webkit-transition: 200ms opacity ease;
}
.none .uploadConfirmBackgroundArea {
	opacity: 0 !important;
}
.none .fileUploadFailureConfirmBackgroundArea {
	opacity: 0 !important;
}
.none .duringUploadBackgroundArea {
	opacity: 0 !important;
}
.uploadConfirmZone {
	transition:200ms;
    -webkit-transition: all 200ms ease;
}
.fileUploadFailureConfirmZone {
	transition:200ms;
    -webkit-transition: all 200ms ease;
}
.duringUploadDisplayArea {
	transition:200ms;
    -webkit-transition: all 200ms ease;
}
.none .uploadConfirmZone {
	opacity: 0 !important;
    transform: scale(0) !important;
    -webkit-transform: scale(0);
}
.none .fileUploadFailureConfirmZone {
	opacity: 0 !important;
    transform: scale(0) !important;
    -webkit-transform: scale(0);
}
.none .duringUploadDisplayArea {
	opacity: 0 !important;
    transform: scale(0) !important;
    -webkit-transform: scale(0);
}

#mainContents {
  margin: 54px 180px 86px 180px;
}
/*
 * Login��ʗp
 */
#headerAreaLogin {
    width: 100%;
  max-width: 1244px;
  font-size: 2.5rem;
  /*padding: 0 3rem 0 3rem;*/
  margin: auto;
  margin-top:34px;
  color: #767676;
}

#headerCaption {
    line-height:1.2em;
}

.loginDisplayArea {
  height: calc(100% - 15.5rem);
  padding-top: 1.5rem;
  padding-left: 1.0rem;
  padding-right: 1.0rem;
  overflow:auto;
}
/**
 *   ���O�C�������́A���߂ė��p������G���A�̃u���b�N
 */
.guestUseOperationArea,
.userAuthenticationOperationArea,
.firstUseOperationArea {
  position: relative;
  max-width: 1200px;
  margin: auto;
  padding: 2rem;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background-color: rgba(242, 242, 242, 0.8);
}
.guestUseOperationArea,
.firstUseOperationArea {
  margin-top: 1.5rem;
}
.guestUseOperationArea {
    border:none;
    background-color:transparent;
    line-height:1.4;
}
.guestUseOperationArea.ul,ol{
    list-style:none;
}
.guestText li em{
    float:left;
}

.guestCaption {
    display:block;
    overflow:auto;
    zoom:1;
}
.guestSecurity{
    display:block;
    overflow:auto;
    zoom:1;
    float:left;
}
.guestLinkArea {
    width: 100%;
    height:20px;
    margin:5px;
    font-size:1.5rem;
    background-image:url("../common-img/img/svg/btn_icon_nextImage.svg");
    background-position:left;
    background-size:1.2%;
    background-position:10px 7px;
    padding-left:25px;
    background-repeat: no-repeat;
    margin-bottom:10px;
    
}
#guestLink,
#guestSSL{
  color: #2271e8;
}
#guestLink:hover,
#guestSSL:hover {
    color: #65a3ff;
}

/**
 *   ���[�U�[�����̓]�[��
 */
.userInfoInputZone {
  width: 76%;
  margin-left: 7%;
  /*float: left;*/
}
.passwordInputZone {
  margin-top: 25px;
}
.inputZoneGroup {
  min-width: 450px;
  width: 99%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  box-sizing: border-box;
}
.inputGroup {
  border: none;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3) inset;
  display: inline-block;
  padding: 0 0.2rem;
  height: 5rem;
  outline: none;
  border: 2px solid #ccc;
  border-radius: 10px;
  background-color: #ffffff;
  box-sizing: border-box;
  text-align: left;
  font-size: 1.5rem;
  font-family: "Meiryo UI", "���C���I", "�q���M�m�p�S Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  padding: 0 1.5rem;
  height: 37px;
  min-width: 240px;
  max-width: 940px;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
.inputGroup:focus {
  background-color: rgba(227, 251, 181, 0.8);
}
.inputGroup::selection {
  background-color: rgba(97, 144, 8, 0.8) !important;
  color: #ffffff;
}
.inputGroup::-moz-selection {
  background-color: rgba(97, 144, 8, 0.8) !important;
  color: #ffffff;
}
.inputLabelText {
  font-size: 16px;
  margin-bottom: 10px;
}
.userAuthenticationOperationArea {
  font-size: 1.575rem;
  /*
  @media screen and (max-width: 1280px) {
    font-size: @baseFontSize;
  }
  @media screen and (min-width: 1281px) and (max-width: 1600px) {
    font-size: @baseFontSize*@ratio1;
  }
  @media screen and (min-width: 1601px) {
    font-size: @baseFontSize*@ratio2;
  }
  @media screen and (max-height: 900px) {
    font-size: @baseFontSize;
  }
  */
}
#forgotPasswordButton {
  color: #2271e8;
}
#forgotPasswordButton:hover {
  color: #65a3ff;
}
#forgotPasswordButton::after {
  content: "";
  display: inline-block;
  background-image: url("../common-img/img/svg/icon_textlink.svg");
  height: 2rem;
  width: 2rem;
  background-size: contain;
  margin-left: 1rem;
}
#forgotPasswordButton:hover::after {
  background-image: url("../common-img/img/svg/icon_textlink_hover.svg");
}
.forgotPasswordZone > .userInfoText {
  margin-bottom: 0rem;
}
.firstUseOperationCaption {
  font-size: 1.575rem;
  color:red;
  /*
  @media screen and (max-width: 1280px) {
    font-size: @baseFontSize;
  }
  @media screen and (min-width: 1281px) and (max-width: 1600px) {
    font-size: @baseFontSize*@ratio1;
  }
  @media screen and (min-width: 1601px) {
    font-size: @baseFontSize*@ratio2;
  }
  @media screen and (max-height: 900px) {
    font-size: @baseFontSize;
  }
  */
}
.firstUseOperationText {
  font-size: 1.575rem;
  /*
  @media screen and (max-width: 1280px) {
    font-size: @baseFontSize;
  }
  @media screen and (min-width: 1281px) and (max-width: 1600px) {
    font-size: @baseFontSize*@ratio1;
  }
  @media screen and (min-width: 1601px) {
    font-size: @baseFontSize*@ratio2;
  }
  @media screen and (max-height: 900px) {
    font-size: @baseFontSize;
  }
  */
  letter-spacing: -0.1px;
  line-height: 1.7em;
}
.loginButtonZone {
    position: absolute;
    top: calc(114px + 2rem);
    right: 25px;
  /*padding-top: 123px;*/
}
.loginButton {
  padding: 0.6rem;
  line-height: 1.8rem;
  /*min-width: 140px;*/
  width: 140px;
  outline: none;
  border-radius: 10px;
  font-size: 2rem;
  font-family: "Meiryo UI", "���C���I", "�q���M�m�p�S Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  transition: all 200ms ease;
  -webkit-transition: all 200ms ease;
  background-color: rgba(113, 168, 9, 0.8);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  color: #ffffff;
  /*width: 3rem;*/
  height: 37px;
  font-size: 1.8rem;
  background-color: #3177e0;
  /*margin-left: 15px;*/
}
.anmEffect .loginButton,
.loginButton.anmEffect {
  -webkit-animation-name: anmEffect;
  animation-name: anmEffect;
  -webkit-animation-duration: 600ms;
  animation-duration: 600ms;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  z-index: 10;
}
@-webkit-keyframes anmEffect {
  0% {
    box-shadow: 0px 0px 1px 1px rgba(190, 246, 84, 0.4);
  }
  30% {
    box-shadow: 0px 0px 50px 20px rgba(190, 246, 84, 0.6);
  }
  100% {
    box-shadow: 0px 0px 50px 50px rgba(190, 246, 84, 0);
  }
}
@keyframes anmEffect {
  0% {
    box-shadow: 0px 0px 1px 1px rgba(190, 246, 84, 0.4);
  }
  30% {
    box-shadow: 0px 0px 50px 20px rgba(190, 246, 84, 0.6);
  }
  100% {
    box-shadow: 0px 0px 50px 50px rgba(190, 246, 84, 0);
  }
}
.forgotPasswordZone {
  width: 80%;
  margin: auto;
  margin-top: 2rem;
  margin-left: 7%;
}
.firstUseCaptionZone {
  margin-bottom: 1.5rem;
}
.firstUseMessageZone {
  width: 86%;
  margin: auto;
}
.yahooIDUseMessageZone {
    width: 86%;
    margin-top:5px;
    font-size: 1.575rem;
    letter-spacing: -0.1px;
    line-height: 1.3em;
}
.yahooIDUseMessageZone img {
    width:36px;
    vertical-align:bottom;
    margin-right:10px;
}

.firstUseButtonZone {
  position: absolute;
  right: 25px;
  bottom: 25px;
}
.firstUseOperationButton {
  padding: 0.8rem;
  line-height: 1.8rem;
  min-width: 140px;
  outline: none;
  border-radius: 10px;
  font-size: 2rem;
  font-family: "Meiryo UI", "���C���I", "�q���M�m�p�S Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  transition: all 200ms ease;
  -webkit-transition: all 200ms ease;
  background-color: rgba(113, 168, 9, 0.8);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  color: #ffffff;
  height: 100%;
  float: right;
  background-color: #dd621c;
  display: inline-block;
  font-size: 1.8rem;
}
.anmEffect .firstUseOperationButton,
.firstUseOperationButton.anmEffect {
  -webkit-animation-name: anmEffect;
  animation-name: anmEffect;
  -webkit-animation-duration: 600ms;
  animation-duration: 600ms;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  z-index: 10;
}
@-webkit-keyframes anmEffect {
  0% {
    box-shadow: 0px 0px 1px 1px rgba(190, 246, 84, 0.4);
  }
  30% {
    box-shadow: 0px 0px 50px 20px rgba(190, 246, 84, 0.6);
  }
  100% {
    box-shadow: 0px 0px 50px 50px rgba(190, 246, 84, 0);
  }
}
@keyframes anmEffect {
  0% {
    box-shadow: 0px 0px 1px 1px rgba(190, 246, 84, 0.4);
  }
  30% {
    box-shadow: 0px 0px 50px 20px rgba(190, 246, 84, 0.6);
  }
  100% {
    box-shadow: 0px 0px 50px 50px rgba(190, 246, 84, 0);
  }
}

/* ../js/effect のJSで使用するCSS */
#optionalCanvasWrapper_forEffect,
#optionalCanvas_forEffect{
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
}
.baseElementHide_forEffect{
	display: none;
}
/* for replace effect */
.photoMovingState_forEffect .focusFrameHide_forEffect{
    opacity: 0;
    transition: opacity 0s 0s;
}
.itemHide_forEffect{
	background-color: #fff;
	position: absolute;
	pointer-events: none;
	margin: 0!important;
}
#fromItemImage_forEffect{
	opacity: 0.33;
	pointer-events: none;
}
.temporaryHiddenFrame_forEffect{
    opacity: 0;
    /* animation parameter: フォーカス枠をフェードアウト */
    transition: opacity 0.3s;
}
.temporaryHiddenPhoto_forEffect{
    display: none;
}
#replaceAnimationPhotoArea_forEffect{
    position:absolute;
    opacity: 0.75;
    pointer-events: none;
}
#replaceAnimationPhotoArea_forEffect.byList{
    z-index: 1;
}
#replaceAnimationPhotoArea_forEffect.byList .movingCloneItem_forEffect{
}
.cloneImage_forEffect{
    position: absolute;
    top: 0;
    left: 0;
}
.cloneImage_forEffect.fromItemClone_forEffect{
  /* animation parameter: 移動元アイテムの移動中クローン移動時間　*/
  -webkit-animation-duration: 600ms;
}
.cloneImage_forEffect.toItemClone_forEffect{
  /* animation parameter: 移動先アイテムの移動中クローン移動時間　*/
  -webkit-animation-duration: 600ms;
}
.cloneImage_forEffect.fromItemClone2_forEffect{
  /* animation parameter: 移動元アイテムの移動中クローン2（縦横比が大きく異なる場合のみ表示）移動時間　*/
  -webkit-animation-duration: 600ms;
}
.cloneImage_forEffect.toItemClone2_forEffect{
  /* animation parameter: 移動先アイテムの移動中クローン2（縦横比が大きく異なる場合のみ表示）移動時間　*/
  -webkit-animation-duration: 600ms;
}
body.hasPageEditAnimation_forEffect .arrangeElement,
body.hasPageEditAnimation_forEffect .frameElement,
body.hasPageEditAnimation_forEffect .imageDrawCanvas{
    /* animation parameter: フォーカス枠および写真のフェードイン時間　*/
    transition: opacity 0.3s;
}
#replaceAnimationThumbnailArea_forEffect{
    position: absolute;
    top: 0;
    left: 0;
    pointer-events:none;
}
/* for replace by list effect */
.pictureReplaceState_forEffect{
    position: absolute;
    /* animation parameter: リスト上のサムネイルをページ上に移動する時の、transformとフェードアウト（不使用アニメーション）　*/
    transition: transform 0.7s, opacity 0.5s;
}
.hiddenOriginalItem_forEffect{
  opacity: 0;
}
.appearOriginalItem_forEffect{
  opacity: 1;
  /* animation parameter: リスト上のサムネイルがページ上に現れる　*/
  transition: opacity 0.3s 0.5s;
}
.movingCloneItem_forEffect{
 -webkit-animation-name: movingCloneItemAnm;
 /* animation parameter: リスト上のサムネイル（のクローン）をページ上に移動（不使用アニメーション）　*/
 -webkit-animation-duration: 500ms
}
#layouts.replacingByList_forEffect{
  overflow: visible;
}
.hrznLayout #domLayerzone #newPhotoFadeInMask_forEffect{
	position: absolute;
	background-color: #fff;
	margin: 0;
	right: auto;
	bottom: auto;
	/* animation parameter: リスト上のサムネイルがページ上に現れる　*/
	-webkit-animation: fadeInMask_anm 0.6s;
}
@-webkit-keyframes fadeInMask_anm {
    /* animation parameter: リスト上のサムネイルがページ上に現れる　*/
	0% {opacity:1}
	50% {opacity:1}
	100% {opacity:0}
}
 
/* for float effect */
#shadowDomArea_forEffect{
  position:absolute;
  /* animation parameter: ドロップシャドウDOMを上にずらす時間　*/
  transition: transform 0.3s, opacity 0.3s;
}
#notFloatPhotoClone_forEffect{
	pointer-events: none;
	z-index: 0;
}
.shadowDomAreaHide_forEffect{
	opacity 0;
	transition: opacity 0.3s;
}
.frameShadow_forEffect{
  background-color: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.6);
  position: absolute;
  border-radius: 4px;
}
.frameShadow_forEffect:after{
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background-color: #fff;
  /* animation parameter: ドロップシャドウDOMを上にずらす時間距離　*/
  top: -5px;
}
.photoCanvasFloatingStyle_forEffect{
  transform: translateY(-5px);
  transition: all 0.3s;
}
body.hasPageEditAnimation_forEffect #imageDrawArea{
  transition: all 0.3s;
  box-shadow: none;
}
body.hasPageEditAnimation_forEffect .imageDrawArea:not(:first-child){
  /* photoCanvasFloatingStyleByFilter_forEffect用設定*/
  /*-webkit-filter: drop-shadow(0px 6px 4px rgba(0, 0, 0, 0.0));*/
}
body.hasPageEditAnimation_forEffect .photoCanvasFloatingStyleByFilter_forEffect/*:not(:first-child)*/{
  -webkit-filter: drop-shadow(0px 6px 4px rgba(0, 0, 0, 0.4));
  /* animation parameter: ドロップシャドウフィルタ関連　*/
  transform: translateY(-5px);
  transition: transform 0.3s, -webkit-filter 0.3s;
}
.floatingItemArea_forEffect{
  /* animation parameter: ドロップシャドウフィルタ関連　*/
  -webkit-filter: drop-shadow(0px 6px 4px rgba(0, 0, 0, 0.4));
  transform: translateY(-5px);
  transition: transform 0.3s, -webkit-filter 0.3s;
}
body.hasPageEditAnimation_forEffect .frameFloatingStyle_forEffect{
  /* animation parameter: フロートエフェクト時の枠ずらし　*/
  transform: translateY(-5px);
  transition: all 0.3s;
  border-image: url("img/svg/border_stamp.svg") 7 round;
}
/* for small thumbnail */
#smallThumbnailArea_forEffect{
  position: absolute;
  pointer-events: none;
  opacity: 0.75;
  z-index: 100;
}
#smallThumbnailArea_forEffect *{
  pointer-events: none;
}
.smallThumbnailHanged_forEffect #smallThumbnailArea_forEffect{
  opacity: 1;
}
#smallThumbnailArea_forEffect.hiddenBeforeClear_forEffect{
    opacity: 0;
    /* animation parameter: 小サムネイルのフェードアウト　*/
    transition: opacity 0.5s;
}
#smallThumbnail_forEffect{
  position: absolute;
  z-index: 1;
  transition: transform 0.3s 0.1s, opacity 0.3s 0.1s;
  /* animation parameter: 小サムネイル出現時のフェードイン時間　*/
  -webkit-animation-duration: 300ms;
}
#smallThumbnail_forEffect.hanging{
  /* animation parameter: 小サムネイルを上に吊り上げる時の、ディレイ　*/
  -webkit-animation-delay: 250ms;
}
#smallThumbnail_forEffect.replacing{
  -webkit-animation-duration: 300ms!important;
}
#layouts[class~=smallThumbnailExist_forEffect]{
    overflow: visible;
}
/* for frame highlight */
.frameElement[class~=highlight_forEffect]{
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
    background: rgba(255, 255, 255, 0.5);
}
.imageDrawCanvas[class~=highlight_forEffect]{
    opacity: 0.75; 
}
/* for page change effect */
#pageChangeGraphicArea_forEffect{
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
}
#domLayerzone[class~=pageChangingState_forEffect] > div:first-child{
    box-shadow: none;
}
#eventHandlingArea[class~=hidden_forEffect],
.imageDrawArea[class~=hidden_forEffect]{
    opacity: 0;
    pointer-events:none;
}
#hidingPageWrapper_forEffect,
#newPageWrapper_forEffect{
    position: absolute;
    top: 0;
    left: 0;
}
#hidingPageWrapper_forEffect img,
#newPageWrapper_forEffect img{
    position: absolute;
    top: 0;
    left: 0;
}
#hidingPageWrapper_forEffect img:first-child{
}
#leftDummyPage_forEffect,
#rightDummyPage_forEffect{
    position: absolute;
}
.imageDrawCanvas[class~=pageChangeState_forEffect]{
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
}
.smallThumbnailHanged_forEffect #layoutDisplayAreaList{
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s;
}
#pagingAnimationArea_forEffect{
  position:relative;
  height:100%;
  left:45%;
  right:0;
  overflow: hidden;
}
.fadeOutAnimationArea_forEffect{
  opacity: 0;
  /* animation parameter: ページ送りアニメーション時フェードアウト　*/
  transition: opacity 0.3s;
}
body:not(.thumbMain) #pagingAnimationArea_forEffect{
  left: 165px;
}
#pageImgContainer_forEffect{
  display:inline-flex;
  position:absolute;
}
#pageImgContainer_forEffect.nextPageAnime_forEffect{
  flex-direction:row;
}
.pageImgWrapper_forEffect{
  width:857px;
  height:609px;
  margin-left:100px;
  background:white;
  box-shadow:0 1px 2px rgba(0, 0, 0, 0.8);
  position: relative;
}
.invisibleAtInit_forEffect{
    /* animation parameter: ページ移動アニメーション表示開始時のフェードイン　*/
    -webkit-animation-name: invisibleAtInit;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 0.3s;
}
@-webkit-keyframes invisibleAtInit {
    /* animation parameter: ページ移動アニメーション表示開始時のフェードイン　*/
    0% {opacity:0}
    100% {opacity:1}
}
#pageImgContainer_forEffect > li:first-child{
  margin-left:0;
}
.pageImgWrapper_forEffect > img{
  width: 100%;
  height: 100%;
}
.zoomOutPages_forEffect{
  /* animation parameter: ページ移動アニメーション中、ページ縮小　*/
  transition:all 0.3s linear;
}
.zoomInPages_forEffect{
  /* animation parameter: ページ移動アニメーション中、ページ拡大　*/
  transition:all 0.3s linear;
}
.moving_forEffect{
  /* animation parameter: ページ移動アニメーション中、移動　*/
  transition:all 0.4s linear;
}
.fadeout_forEffect #domLayerzone {
  opacity: 0;
}
.fadein_forEffect #domLayerzone {
  opacity: 1;
}
/* frame border style */
.hasPageEditAnimation_forEffect .frameElement{
  transform: translateY(0);
}
.hasPageEditAnimation_forEffect .frameElement:not(.frameFloatingStyle_forEffect){
  border-image: none;
}
.hasPageEditAnimation_forEffect .arrangeElement{
  border-image: url("img/svg/border_stamp.svg") 7 round;
}
.replacingFocusedFrame_forEffect{
  display: block!important;
  transition: none!important;
}
.replacingFocusedFrame_forEffect button{
  pointer-events: none;
  display: none;
}
.replacingFocusedFrame_forEffect .arrangeElementReplaceButton{
  display: block;
  opacity: 0.6;
}
.arrangeElement.replacingFocusedFrame_forEffect{
  border-image: none;
}
/* paging button style */
.photoMovingState_forEffect #switchLeftPageButton:not(.disable){
  -webkit-animation-name: pagingButtonEnhanceForLeft;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(0,.5,.5,1);
  -webkit-animation-direction:alternate;
  -webkit-animation-duration: 0.5s;
}
.photoMovingState_forEffect #switchRightPageButton:not(.disable){
  -webkit-animation-name: pagingButtonEnhanceForRight;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(0,.5,.5,1);
  -webkit-animation-direction:alternate;
  -webkit-animation-duration: 0.5s;
}
@-webkit-keyframes pagingButtonEnhanceForLeft {
  /* animation parameter: ページ送りボタンの点滅　*/
  0% {
    opacity:1;
    left:0px;
    right:0px;
  }
  100% {
    opacity:0.2;
    left:20px;
    right:-20px;
  }
}
@-webkit-keyframes pagingButtonEnhanceForRight {
  /* animation parameter: ページ送りボタンの点滅　*/
  0% {
    opacity:1;
    left:0px;
    right:0px;
  }
  100% {
    opacity:0.2;
    left:-20px;
    right:20px;
  }
}

/* current page capture */
.currentPagesPhotoCapture_forEffect{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.hiddenCurrentPageImg{
	opacity: 0;
}
/* torn down photo */
#tornDownedPhoto_forEffect{
	position: absolute;
	left: 0;
	top: 0;
	background-color: #fff;
	z-index: 1;
	pointer-events: none;
	opacity: 0.5;
}
/* blink photo */
#blinkPhotoImage_forEffect{
	position: absolute;
	pointer-events: none;
	z-index: 0;
	/* animation parameter: 移動した写真の点滅（不使用アニメーション）　*/
	-webkit-animation-name: photoBlinkAtPhotoMoveEnd;
	-webkit-animation-iteration-count: 5;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 0.5s;
}
@-webkit-keyframes photoBlinkAtPhotoMoveEnd {
    /* animation parameter: 移動した写真の点滅（不使用アニメーション）　*/
	0% {opacity:1}
	50% {opacity:0}
	100% {opacity:1}
}
/* UI for thumbnail on page top */
#focusFrameAreaOnPageTop{
	display: none;
	opacity: 0;
	/* animation parameter: 釣りあげられた小サムネイルのフレーム枠フェードイン　*/
	transition: opacity 0.3s;
	z-index: 200;
	position: absolute;
}
#focusFrameAreaOnPageTop[class~=focusFrameOnPageTopVisible]{
	display: block;
	opacity: 1;
}
.preloadImageBox_forEffect,
.preloadImageContent_forEffect{
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    display: none;
}
#preloadImageBox_forEffect{
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    overflow: hidden;
    opacity: 0;
}
.arrangeElementMoveToOtherButtonZone,
.arrangeElementMoveCancelButtonZone{
	/*　仮スタイル　*/
	position: absolute;
	bottom: -10px;
	box-sizing: border-box;
	width: 100%;
}
.arrangeElementMoveToOtherButtonZone button,
.arrangeElementMoveCancelButtonZone button{
	/*　仮スタイル　*/
	display: block;
	font-size: 2rem;
	padding: 0.1em 0.3em 0.2em 0.3em;
	position: absolute;
	bottom: 0;
	border-radius: 5px;
	box-sizing: border-box;
}
.arrangeElementMoveToOtherButtonZone button{
	/*　仮スタイル　*/
	border: 2px solid #fff;
	background-color: #dd621c;
	color: #ffffff;
	right: -50px;
}
.arrangeElementMoveToOtherButtonZone button:before{
	/*　仮スタイル　*/
	display: inline-block;
	width: 19px;
	height: 20px;
	margin-left: -1px;
	content: "";
	background-image: url("img/svg/btn_icon_down_arrow.svg");
	background-repeat: no-repeat;
	vertical-align: middle;
}
.arrangeElementMoveCancelButtonZone button{
	/*　仮スタイル　*/
	border: 2px solid #dd621c;
	background-color: #fff;
	color: #dd621c;
	left: -50px;
}
#domLayerzone{
	/*　仮スタイル　*/
	height: auto;
	position: static;
}

.SSimulationPanelShadow0 {
    box-shadow: 3px 3px 8px -0px #777;
}
.SSimulationPanelShadow90 {
    box-shadow: 3px -3px 8px -0px #777;
}
.SSimulationPanelShadow180 {
    box-shadow: -3px -3px 8px -0px #777;
}
.SSimulationPanelShadow270 {
    box-shadow: -3px 3px 8px -0px #777;
}

/* ページ追加ボタン関連 */
.hasPageEditAnimation_forEffect #pageTargetArea{
	left: -8px;
}
.hasPageEditAnimation_forEffect.thumbMain #pageTargetArea{
	left: 0;
}
.hasPageEditAnimation_forEffect #pagePrevTargetButton{
	left: calc(50% - 420px);
}
.hasPageEditAnimation_forEffect #pageNextTargetButton{
	right: calc(50% - 420px);
}
@media screen and (min-height: 1200px) {
  .hasPageEditAnimation_forEffect #pagePrevTargetButton{
    left: calc(50% - 465px);
  }
  .hasPageEditAnimation_forEffect #pageNextTargetButton{
    right: calc(50% - 465px);
  }
}
@media screen and (max-width: 1600px) {
  .hasPageEditAnimation_forEffect #pagePrevTargetButton{
    left: calc(50% - 322px);
  }
  .hasPageEditAnimation_forEffect #pageNextTargetButton{
    right: calc(50% - 380px);
  }
}
@media screen and (max-width: 1280px) {
  .hasPageEditAnimation_forEffect #pagePrevTargetButton{
    left: calc(50% - 216px);
  }
  .hasPageEditAnimation_forEffect #pageNextTargetButton{
    right: calc(50% - 330px);
  }
}



@-webkit-keyframes movingCloneItemAnm{
  0% {
    left: 0;
    opacity: 1;
    transform: scale(1);
  }
  20% {
    left: 0;
    opacity: 1;
  }
  40% {
    transform: scale(0.75);
    
  }
  100% {
    left: 0;
    opacity: 0;
    transform: scale(0.75);
  }
}

/*******************************
 *ページ編集画面DOMツリー用(1280×1024)CSS
 * *****************************/
#prevButton {
  margin-right: 5px;
}
#footerHelpCaption {
  padding: 0;
  margin:8px 0;
  min-width: 38px;
  height:38px;
  background-color:#dce9ef;
}
/*************** 編集画面 関数・プロパティ **************/
/* 操作ボタンエリア */
/* スタンプ表示エリア */
/*  */
._trimmingAreaLine {
  top: 0;
  margin: 0 5%;
  width: 100%;
}
/**************** メインコンテンツエリア設定 ***************/
#mainContentsEdit {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  overflow: hidden;
}
#line1,
#line2,
#line3,
#line4 {
  margin: 0 5%;
  top: 0;
}
hr {
  position: relative;
  height: 0px;
  top: 30px;
  margin: 1% 10%;
  border-bottom: #ffffff solid 1px;
}
/**************** サムネイル(一覧)表示エリア設定 ***************/
#thumbnailArea {
  position: absolute;
  width: 528px;
  top: 0;
  left: 0;
  bottom: 86px;
  background: none;
  background-color: rgba(0, 0, 0, 0.5);
  transition: 300ms all ease;
}
#thumbnailContentsArea {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  padding-right: 30px;
  height: 100%;
}
/* サムネイルヘッダーエリア */
#thumbnailHeaderArea {
  margin: 0 0 0 26px;
  width: calc(100% - 26px);
  height: 10%;
  position: relative;
}
/* 読み込み画像情報標示エリア */
#readPicInfoArea {
  position: absolute;
  height: 1em;
  top: 0;
  bottom: 0;
  padding: 15px 0;
  margin: auto;
  color: #ffffff;
  font-size: 20px;
}
body.osMac #readPicInfoArea {
    letter-spacing:-1.1px;
}
#readPicInfo {
  width: 100%;
  height: 100%;
  text-align: center;
}

/* 小サムネイル表示ボタン領域 */
#swithcSmallThumbnailButtonZone {
  position: absolute;
  width: 90px;
  height: 38px;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 90px;
}
#switchSmallThumbnailButton {
    background-image: url("../common-img/img/svg/icn_thumb_s_green.svg");
    background-position: 45px;
    background-size: 40px;
    background-repeat: no-repeat;
}
.switchThumbnailButton {
  position:relative;
  min-width: 0;
  width: 100%;
  height: 100%;
  outline: none;
  transition: none;
  border:1px solid #e4f0ef;
  background-color: #dce9ef;
  cursor: pointer;
}
    .switchThumbnailButton > span {
        position:absolute;
        top:0;
        right:0;
        display:none;
        width:38px;
        height:38px;
        background-image: url("../common-img/img/svg/icn_check.svg");
        background-position: center 5px;
        background-size: 24px;
        background-repeat: no-repeat;
    }
#switchSmallThumbnailButton > span {
    top: 0;
    right: 50px;
}
.anmEffect .switchThumbnailButton,
.switchThumbnailButton.anmEffect {
  -webkit-animation-name: anmEffect;
  -moz-animation-name: anmEffect;
  -ms-animation-name: anmEffect;
  animation-name: anmEffect;
  -webkit-animation-duration: 600ms;
  -moz-animation-duration: 600ms;
  -ms-animation-duration: 600ms;
  animation-duration: 600ms;
  -webkit-animation-timing-function: ease-out;
  -moz-animation-timing-function: ease-out;
  -ms-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-iteration-count: 1;
  z-index: 10;
}
@-webkit-keyframes anmEffect {
  0% {
    box-shadow: 0px 0px 1px 1px rgba(190, 246, 84, 0.4);
  }
  30% {
    box-shadow: 0px 0px 50px 20px rgba(190, 246, 84, 0.6);
  }
  100% {
    box-shadow: 0px 0px 50px 50px rgba(190, 246, 84, 0);
  }
}
@keyframes anmEffect {
  0% {
    box-shadow: 0px 0px 1px 1px rgba(190, 246, 84, 0.4);
  }
  30% {
    box-shadow: 0px 0px 50px 20px rgba(190, 246, 84, 0.6);
  }
  100% {
    box-shadow: 0px 0px 50px 50px rgba(190, 246, 84, 0);
  }
}
.selected .switchThumbnailButton,
.switchThumbnailButton.selected {
  background-color: #dd621c;
}
.switchThumbnailButton.selected::after {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  top: -6px;
  left: -10px;
  color: #ffffff;
  background-image: url("../common-img/img/svg/selected_btn_icon_checked.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #dd621c;
  border-radius: 50%;
  border: 2px solid #ffffff;
}
/* 大サムネイル表示ボタン領域 */
#swithcBigThumbnailButtonZone {
  position: absolute;
  width: 90px;
  height: 38px;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
#switchBigThumbnailButton {
  background-image: url("../common-img/img/svg/icn_thumb_l_green.svg");
  background-position: 10px;
  background-size: 40px;
  background-repeat: no-repeat;
}
#swithcSmallThumbnailButtonZone.disable,
#swithcBigThumbnailButtonZone.disable {
    opacity: 1 !important;
}

    #swithcSmallThumbnailButtonZone.disable > .switchThumbnailButton,
    #swithcBigThumbnailButtonZone.disable > .switchThumbnailButton {
        background-color: #01916d;
    }
#swithcBigThumbnailButtonZone.disable > #switchBigThumbnailButton {
    background-image: url("../common-img/img/svg/icn_thumb_l.svg");
}
    #swithcSmallThumbnailButtonZone.disable > #switchSmallThumbnailButton {
        background-image: url("../common-img/img/svg/icn_thumb_s.svg");
    }

    #swithcSmallThumbnailButtonZone.disable > .switchThumbnailButton > span,
    #swithcBigThumbnailButtonZone.disable > .switchThumbnailButton > span {
        display: block;
    }
#statusExplainArea {
  width: calc(100% +  40px);
  height: 0;
  color: #ffffff;
  font-size: 1.6rem;
}
#statusExplainZone {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
}
#similerIconExplainZone {
  margin: 0 10px;
}
#similerIconExplainImg {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url("../common-img/img/svg/status_icon_similar.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
#similerIconExplain {
  vertical-align: text-top;
}
#recommendIconExplainZone {
  margin: 0 10px;
}
#recommendIconExplainImg {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url("../common-img/img/svg/status_icon_recom.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
#recommendIconExplain {
  vertical-align: text-top;
}
#lossIconExplainZone {
  position: absolute;
  color: #fff;
  transition: 300ms right ease;
  top: 10px;
  left: 0;
}
#lossIconExplainImg {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("../common-img/img/svg/status_icon_caution.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
}
body.osMac #lossIconExplainImg {
  width: 13px;
  height: 13px;
}
#lossIconExplain {
  vertical-align: text-top;
  font-size:14px;
  padding: 0 0 0 16px;
}
body.osMac #lossIconExplain {
    letter-spacing: -1.2px;
    font-size: 13px;
}
#editIconExplainZone {
  margin: 0 10px;
  display: none;
}
#editIconExplainImg {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url("../common-img/img/svg/status_icon_edited_free.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
#editIconExplain {
  vertical-align: text-top;
}

#guideZone {
  position: absolute;
  color: #333333;
  transition: 300ms right ease;
  top: 1%;
  /*right: -90%;*/
  left: 0;
}
#guideExplain {
  vertical-align: text-top;
  font-weight:bold;
  font-size:x-large;
}
#guideRePrint{
 vertical-align: text-top;
 font-weight:bold;
 font-size:x-large;
}

/* サムネイル表示領域設定 */
#thumbnailDisplayArea {
  position: absolute;
  top: 10%;
  bottom: 0px;
  right: 6px;
  left: 31px;
  overflow: hidden;
  font-size:medium;
}

/* メディア確認中画面表示エリア */
/* サムネイル表示領域設定 */
#thumbnailPicZone {
  height: 100%;
  overflow: hidden;
  position: absolute;
  left: 0;
}
.zoomViewMode #thumbnailPicZone {
  position: relative;
  top: 0;
  bottom: 20%;
  margin: auto;
  width: 100%;
  white-space: nowrap;
}
#thumbnailPicZone2 {
  height: 100%;
  overflow: hidden;
  position: absolute;
  right: 0;
  left: 1%;
  top: calc(100% - 100px);
  background-color: #4c4c4c;
  opacity: 0.9;
  transition: 500ms top cubic-bezier(0.085, 0.29, 0.245, 0.985);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border: 2px solid #fff;
  z-index: 6;
}

.openNonselectiveCategory #thumbnailPicZone2 {
  top: 0%;
  opacity: 1;
}
.thumbnailPicCaptionZone {
  color: #ffffff;
  font-size: 2.1rem;
}
dt.thumbnailPicCaption {
  display: inline-block;
  height: 1em;
  margin-left: 12.5rem;
  color: #ffffff;
  padding: 1.4em 0;
}
.yAType dt.thumbnailPicCaption {
  display: none;
}
dd.thumbnailPicCaption {
  display: inline-block;
  height: 1em;
  padding: 1em 0;
  color: #ffffff;
  font-size: 2.5rem;
}
/*
@media screen and (max-width: 1280px) {
  dd.thumbnailPicCaption {
    font-size: 2.5rem;
  }
}
@media screen and (min-width: 1281px) and (max-width: 1600px) {
  dd.thumbnailPicCaption {
    font-size: 3rem;
  }
}
@media screen and (min-width: 1601px) {
  dd.thumbnailPicCaption {
    font-size: 3.25rem;
  }
}
@media screen and (max-height: 900px) {
  dd.thumbnailPicCaption {
    font-size: 2.5rem;
  }
}
*/
.thumbnailPicCaptionForYA {
  display: none;
  height: 1em;
  margin-left: 12.5rem;
  padding: 1em 0;
  color: #ffffff;
}
@media screen and (max-width: 1280px) {
  .thumbnailPicCaptionForYA {
    font-size: 2.5rem;
  }
}
@media screen and (min-width: 1281px) and (max-width: 1600px) {
  .thumbnailPicCaptionForYA {
    font-size: 3rem;
  }
}
@media screen and (min-width: 1601px) {
  .thumbnailPicCaptionForYA {
    font-size: 3.25rem;
  }
}
@media screen and (max-height: 900px) {
  .thumbnailPicCaptionForYA {
    font-size: 2.5rem;
  }
}
.yAType .thumbnailPicCaptionForYA {
  display: inline-block;
}
#thumbnailPics {
  position: relative;
  top: 0px;
  height: 100%;
  overflow: hidden;
  background: none;
  border: none;
}
.zoomViewMode #thumbnailPics {
  margin: 0;
}
#thumbnailPics2 {
  position: relative;
  top: 0px;
  height: calc(100% - 90px);
  overflow: hidden;
  background: none;
  border: none;
}
.microThumbnailViewMode #thumbnailPics2 {
  margin-left: 30px;
}
.thumbnailViewMode #infiniteScroll,
.thumbnailViewMode #infiniteScroll2 {
    height: 100%;
    overflow: auto;
}
.zoomViewMode #infiniteScroll,
.zoomViewMode #infiniteScroll2 {
  overflow-x: auto;
  overflow-y: auto;
  height:100%;
}
.content-wrapper, .content-wrapper2 {
  line-height: 0px;
  font-size: 0px;
  overflow: hidden;
  padding-bottom: 20px;
}
.yAType .microThumbnailViewMode .content-wrapper {
  padding-top: 20px;
}
.yAType .thumbnailViewMode .content-wrapper {
  padding-top: 20px;
}

/*
@media screen and (max-width: 1280px) {
  .zoomViewMode .content-wrapper {
    padding-top: 150px;
  }
}
@media screen and (min-width: 1601px) and (max-height: 1020px) {
  .zoomViewMode .content-wrapper {
    padding-top: 80px;
  }
}
*/
.yAType .thumbnailPicsListitem {
  clear: left;
  padding-top: 2rem;
}
.yAType .zoomViewMode .thumbnailPicsListitem {
  float: left;
  clear: none;
}
.microThumbnailViewMode .thumbnailPicsListitem {
  clear: left;
  padding-top: 2rem;
}
.thumbCategoryLabel {
  display: block;
  font-size: 2.5rem;
  color: #fff;
  height: 1em;
  line-height: 1em;
  margin: 0 2rem;
  padding: 0.3em;
  background-color: rgba(0, 0, 0, 0.5);
}
.yAType .thumbCategoryDate {
  float: right;
  font-size: 2rem;
  padding-left: 2rem;
  margin-right: 3rem;
}
.microThumbnailViewMode .thumbCategoryDate {
  display: block;
  float: left;
  font-size: 2rem;
}
.yAType .microThumbnailViewMode .thumbCategoryDate {
  float: right;
}
.thumbnailPic {
  position: relative;
  float: left;
  background: none;
  border: none;
  width: 132px;
  height: 132px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  margin: 12px;
}
    .thumbnailPic.checkedItem,
    .thumbnailPic.selectedItem.itemSelected {
        background-color: #dce9ef;
    }
.zoomViewMode .thumbnailPic {
  width: 444px;
  height: 444px;
}
.yAType .thumbnailViewMode .thumbnailPic.last {
  margin-bottom: 50px;
}
.yAType .thumbnailViewMode .thumbnailPic.first {
  clear: left;
}
.thumbnailViewMode .microThumbnailCategory,
.zoomViewMode .microThumbnailCategory {
  display: none;
}
.thumbnailCategory {
  display: none;
  position: absolute;
  top: -1.5em;
  font-size: 2rem;
  color: #ffffff;
}
@media screen and (max-width: 1280px) {
  .thumbnailCategory {
    width: 300%;
  }
}
@media screen and (min-width: 1281px) and (max-width: 1600px) {
  .thumbnailCategory {
    width: 300%;
  }
}
@media screen and (min-width: 1601px) {
  .thumbnailCategory {
    width: 400%;
  }
}
.yAType .thumbnailViewMode .thumbnailCategory {
  display: block;
}
.microThumbnailViewMode .thumbnailCategory,
.zoomViewMode .thumbnailCategory {
  display: none;
}
.picZone {
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  background-size: 25% 25%;
}
.microThumbnailViewMode .picZone {
  display: block;
  top: 2px;
  left: 2px;
  width: 100%;
  height: 100%;
}
.zoomViewMode .picZone {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(1);
  transform: scale(1);
}
@media screen and (max-width: 1280px) {
  .zoomViewMode .picZone::after {
    top: 83px;
    left: 73px;
  }
}
@media screen and (min-width: 1281px) and (max-width: 1600px) {
  .zoomViewMode .picZone::after {
    top: 110px;
    left: 100px;
  }
}
@media screen and (min-width: 1601px) {
  .zoomViewMode .picZone::after {
    top: 128px;
    left: 124px;
  }
}
.selectedItem .picZone::after,
.checkedItem .picZone::after {
  -webkit-transform: scale(1);
  transform: scale(1);
}
.microThumbnailViewMode .selectedItem .picZone::after,
.microThumbnailViewMode .checkedItem .picZone::after {
  display: none;
}
.imgControlZone {
  position: relative;
  -webkit-transition: 250ms margin ease-out, 200ms -webkit-transform ease-out, 200ms box-shadow ease-out;
  transition: 200ms all ease-out;
  box-sizing: border-box;
  /*-webkit-transform: rotate3d(0, 0, 1, 0deg);*/
  /*-webkit-transform-origin: 50% 50%;*/
}
.imgControlZone.undealImage {
  -webkit-transform: scale(0.45);
  transform: scale(0.45);
}
.imgControlZone.undealImage::before {
  display: none;
}
.imgControlZone::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: 200ms all ease;
  z-index: -1;
  box-shadow: 0 15px 17px rgba(0, 0, 0, 0.45);
}
.microThumbnailViewMode .imgControlZone::before {
  display: none;
}
.imgControlZone.imgAnmA::before {
  box-shadow: 15px 0 17px rgba(0, 0, 0, 0.45) !important;
}
.imgControlZone.imgAnmB::before {
  box-shadow: 0 -15px 17px rgba(0, 0, 0, 0.45) !important;
}
.imgControlZone.imgAnmC::before {
  box-shadow: -15px 0 17px rgba(0, 0, 0, 0.45) !important;
}
.thumbnailViewMode .checkedItem .imgControlZone::before,
.zoomViewMode .checkedItem .imgControlZone::before {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}
.thumbnailViewMode .checkedItem .imgControlZone.imgAnmA::before,
.zoomViewMode .checkedItem .imgControlZone.imgAnmA::before {
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.8) !important;
}
.thumbnailViewMode .checkedItem .imgControlZone.imgAnmB::before,
.zoomViewMode .checkedItem .imgControlZone.imgAnmB::before {
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.8) !important;
}
.thumbnailViewMode .checkedItem .imgControlZone.imgAnmC::before,
.zoomViewMode .checkedItem .imgControlZone.imgAnmC::before {
  box-shadow: -1px 0 2px rgba(0, 0, 0, 0.8) !important;
}
.imgControlZone.imHere::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-animation-name: imHereEffect;
  -webkit-animation-timing-function: cubic-bezier(0, 0.465, 0.2, 0.71);
  -webkit-animation-duration: 1.7s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 0.3s;
  top: 10px;
  z-index: -1;
}
.imgControlZone.imHere.imgAnmA::after {
  top: 0px;
  left: 10px;
}
.imgControlZone.imHere.imgAnmB::after {
  top: -10px;
}
.imgControlZone.imHere.imgAnmC::after {
  top: 0px;
  left: -10px;
}
.microThumbnailViewMode .imgControlZone.imHere::after {
  display: none;
}
.div_pic {
  margin: auto;
  text-align: center;
  -webkit-transition: 200ms all ease;
  transition: 200ms all ease;
}
.checkedItem .picFrame {
  position: relative;
  top: 10px;
}
.checkedItem .imgAnmA .picFrame {
  top: auto;
  left: 10px;
}
.checkedItem .imgAnmB .picFrame {
  top: -10px;
}
.checkedItem .imgAnmC .picFrame {
  top: auto;
  left: -10px;
}
.checkedItem .div_pic {
  margin: 0;
}
.checkedItem .imgAnmA .div_pic {
  margin: 0;
  top: auto;
  left: 10px;
}
.checkedItem .imgAnmB .div_pic {
  margin: 0;
  top: -10px;
}
.checkedItem .imgAnmC .div_pic {
  margin: 0;
  top: auto;
  left: -10px;
}
.pic {
  position: relative;
  background: none;
  border: none;
  transition: 200ms all ease;
  /*transform: translateY(-50%);*/
}
.thumbnailViewMode .pic {
    max-width: 108px;
    max-height: 108px;
}
.zoomViewMode .pic {
  max-width: 396px;
  max-height: 396px;
}
.exchangeableItem .pic {
    border: 5px solid #fff000;
}
/* サムネイル画像描画領域 */
#thumbnailPicZone .mCSB_scrollTools_vertical {
    bottom: 10px;
    right: 10px;
    /*20150212 Step3Mantis5652*/
    -webkit-tap-highlight-color: transparent;
}
#thumbnailPicZone2 .mCSB_scrollTools_vertical {
  bottom: 10px;
  right: 10px;
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal {
  height: 24px;
}
@media screen and (max-width: 1280px) {
  .zoomViewMode .mCSB_scrollTools.mCSB_scrollTools_horizontal {
    bottom: 160px;
  }
}
@media screen and (min-width: 1281px) and (max-width: 1600px) {
  .zoomViewMode .mCSB_scrollTools.mCSB_scrollTools_horizontal {
    bottom: 130px;
  }
}
@media screen and (min-width: 1601px) {
  .zoomViewMode .mCSB_scrollTools.mCSB_scrollTools_horizontal {
    bottom: 130px;
  }
}
@media screen and (min-width: 1281px) and (max-width: 1600px) and (min-height: 1081px) {
  .zoomViewMode .mCSB_scrollTools.mCSB_scrollTools_horizontal {
    bottom: 160px;
  }
}
@media screen and (min-width: 1601px) and (min-height: 1081px) {
  .zoomViewMode .mCSB_scrollTools.mCSB_scrollTools_horizontal {
    bottom: 160px;
  }
}
@media screen and (max-height: 900px) {
  .zoomViewMode .mCSB_scrollTools.mCSB_scrollTools_horizontal {
    bottom: 130px;
  }
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {
  top: -80px;
  margin: 0 220px;
}
.zoomViewMode .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,
.zoomViewMode .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {
  top: 0;
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft.disable,
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight.disable {
  opacity: 0.5;
  pointer-events: none;
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 14px;
  margin: 3px auto;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer {
  top: -70px;
  margin: 0 10px;
}
@media screen and (max-height: 900px) and (min-width: 1281px) {
  .mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer {
    top: -40px;
  }
}
.mCSB_horizontal.mCSB_inside > .mCSB_container {
  height: 100%;
}
.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-right: 46px;
}
/* 画像一覧 選択画像枚数表示ゾーン(シャッフルプリント以外) */
.orderNumZone {
  /*display: none;*/
}
/* 画像一覧 チェックゾーン(シャッフルプリントの場合) */
.thumbnailCheckZone {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 24px;
  height: 24px;
  -webkit-transform: scale(0);
  transform: scale(0);
  transition: 200ms all ease;
}
.checkedItem .thumbnailCheckZone {
  -webkit-transform: scale(1);
  transform: scale(1);
}
.microThumbnailViewMode .thumbnailCheckZone {
  display: none;
}

.thumbnailCheck {
  display: block;
  width: 100%;
  height: 100%;
  border: solid 1px #e4f0ef;
  background-color: #01916d;
  color: #ffffff;
  transition: 200ms margin ease;
}
.thumbnailCheck > span {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("../common-img/img/svg/icn_check.svg");
    background-position: center;
    background-size: 24px;
    background-repeat: no-repeat;
}

/* サムネイル回転ボタンゾーン */
.thumbnailRotateButtonZone {
  position: absolute;
  height: 38px;
  width: 38px;
  bottom: -5px;
  right: 38px;
  transition: all 200ms ease;
  z-index: 5;
  -webkit-transform: scale(0);
  transform: scale(0);
}
/*
@media screen and (max-width: 1280px) {
  .thumbnailRotateButtonZone {
    bottom: 6px;
    left: 16px;
  }
}
@media screen and (min-width: 1281px) and (max-width: 1600px) {
  .thumbnailRotateButtonZone {
    bottom: 20px;
    left: 30px;
  }
}
@media screen and (min-width: 1601px) {
  .thumbnailRotateButtonZone {
    bottom: 17px;
    left: 27px;
  }
}
*/
.microThumbnailViewMode .thumbnailRotateButtonZone {
  display: none;
}
.itemSelected .thumbnailRotateButtonZone,
.selectedItem .thumbnailRotateButtonZone {
  -webkit-transform: scale(1);
  transform: scale(1);
}
.thumbnailRotateButton {
  background-image: url("../common-img/img/svg/icn_rotate_90_r.svg");
  background-position: center 0px;
  background-size: 22px;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  border: solid 1px #e4f0ef;
  background-color: #01916d;
  display: block;
  font-size:12px;
  color:#fff;
  padding: 15px 0 0 0;
  box-sizing:border-box;
  transition: 200ms -webkit-transform ease;
  transition: 200ms transform ease;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.thumbnailRotateButton:active {
    background-color: #016950;
}
.thumbnailRotateButtonZone.disable {
    opacity: 1 !important;
}
    .thumbnailRotateButtonZone.disable > .thumbnailRotateButton {
        background-color: #808080;
        border: solid 1px #cdcdcd;
        color: #cdcdcd;
        background-image: url("../common-img/img/svg/icn_rotate_90_r_disable.svg");
    }
.itemSelected .thumbnailRotateButton,
.selectedItem .thumbnailRotateButton {
  -webkit-transform: scale(1);
  transform: scale(1);
}
/* サムネイル超拡大ボタンゾーン */
.thumbnailZoomButtonZone {
  position: absolute;
  height: 32px;
  width: 32px;
  transition: all 200ms ease;
}
@media screen and (max-width: 1280px) {
  .thumbnailZoomButtonZone {
    bottom: 6px;
    right: 16px;
  }
}
@media screen and (min-width: 1281px) and (max-width: 1600px) {
  .thumbnailZoomButtonZone {
    bottom: 20px;
    right: 30px;
  }
}
@media screen and (min-width: 1601px) {
  .thumbnailZoomButtonZone {
    bottom: 17px;
    right: 27px;
  }
}
.microThumbnailViewMode .thumbnailZoomButtonZone {
  display: none;
}
@media screen and (max-width: 1280px) {
  .zoomViewMode .thumbnailZoomButtonZone {
    bottom: 80px;
    right: 90px;
  }
}
@media screen and (min-width: 1281px) and (max-width: 1600px) {
  .zoomViewMode .thumbnailZoomButtonZone {
    bottom: 105px;
    right: 115px;
  }
}
@media screen and (min-width: 1601px) {
  .zoomViewMode .thumbnailZoomButtonZone {
    bottom: 123px;
    right: 132px;
  }
}
.thumbnailZoomButton {
  background-image: url("../common-img/img/svg/selected_btn_icon_zoom.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  background-size: 60%;
  border: 2px solid #dd621c;
  border-radius: 50%;
  display: block;
  transition: 200ms -webkit-transform ease;
  -webkit-transform: scale(0);
}
.itemSelected .thumbnailZoomButton,
.selectedItem .thumbnailZoomButton {
  -webkit-transform: scale(1);
}
.zoomViewMode .itemSelected .thumbnailZoomButton,
.zoomViewMode .selectedItem .thumbnailZoomButton {
  -webkit-transform: scale(1.5);
}
/* サムネイル追加ボタンゾーン */
.thumbnailAddButtonZone {
  position: absolute;
  transition: all 200ms ease;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.microThumbnailViewMode .thumbnailAddButtonZone {
  display: none;
}
.thumbnailViewMode .thumbnailAddButtonZone {
  bottom: 46px;
  right: 10px;
}
.zoomViewMode .thumbnailAddButtonZone {
  top: 180px;
  right: 50px;
}
@media screen and (max-width: 1280px) {
  .content-wrapper2 .thumbnailAddButtonZone {
    top: 46px;
    right: 10px;
  }
}
@media screen and (max-width: 1280px) {
  .zoomViewMode .content-wrapper2 .thumbnailAddButtonZone {
    top: 150px;
    right: 50px;
  }
}
@media screen and (min-width: 1281px) and (max-width: 1600px) {
  .zoomViewMode .content-wrapper2 .thumbnailAddButtonZone {
    top: 170px;
    right: 80px;
  }
}
@media screen and (min-width: 1601px) {
  .zoomViewMode .content-wrapper2 .thumbnailAddButtonZone {
    top: 200px;
    right: 100px;
  }
}
.itemSelected .thumbnailAddButtonZone,
.selectedItem .thumbnailAddButtonZone {
  -webkit-transform: scale(1);
  transform: scale(1);
}
.thumbnailAddButton {
  display: block;
  padding: 1.4em 0.5em 0.3em 0.5em;
  background-image: url("../common-img/img/svg/btn_icon_plus.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 59% -0.1em;
  background-size: 1.7em;
  background-color: #dd621c;
  font-size: 1.2rem;
  line-height: 1em;
  color: #ffffff;
  border: 2px solid #fff;
  border-radius: 5px;
  box-sizing: border-box;
  min-width: 40px;
  transition: 200ms -webkit-transform ease;
  transition: 200ms transform ease;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.itemSelected .thumbnailAddButton,
.selectedItem .thumbnailAddButton {
  -webkit-transform: scale(1);
  transform: scale(1);
}
.zoomViewMode .itemSelected .thumbnailAddButton,
.zoomViewMode .selectedItem .thumbnailAddButton {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  font-size: 1.13rem;
}
/* サムネイル入替ボタンゾーン */
.thumbnailReplaceButtonZone {
  position: absolute;
  transition: all 200ms ease;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.microThumbnailViewMode .thumbnailReplaceButtonZone {
  display: none;
}
.thumbnailReplaceButtonZone {
    width: 38px;
    height: 38px;
}
.thumbnailViewMode .thumbnailReplaceButtonZone {
    bottom: -5px;
    right: -5px;
}
.zoomViewMode .thumbnailReplaceButtonZone {
    bottom: -5px;
    right: -5px;
}
@media screen and (max-width: 1280px) {
  .content-wrapper2 .thumbnailReplaceButtonZone {
    top: 85px;
    right: 10px;
  }
}
@media screen and (max-width: 1280px) {
  .zoomViewMode .content-wrapper2 .thumbnailReplaceButtonZone {
    top: 210px;
    right: 50px;
  }
}
@media screen and (min-width: 1281px) and (max-width: 1600px) {
  .zoomViewMode .content-wrapper2 .thumbnailReplaceButtonZone {
    top: 230px;
    right: 80px;
  }
}
@media screen and (min-width: 1601px) {
  .zoomViewMode .content-wrapper2 .thumbnailReplaceButtonZone {
    top: 260px;
    right: 100px;
  }
}
.itemSelected .thumbnailReplaceButtonZone,
.selectedItem .thumbnailReplaceButtonZone {
  -webkit-transform: scale(1);
  transform: scale(1);
}
.thumbnailReplaceButton {
  display: block;
  width:100%;
  height:100%;
  background-image: url("../common-img/img/svg/icn_exchange.svg");
  background-repeat: no-repeat;
  background-position: center 0px;
  background-size: 22px;
  border: solid 1px #e4f0ef;
  background-color: #01916d;
  font-size: 12px;
  color: #fff;
  padding: 15px 0 0 0;
  box-sizing: border-box;
  transition: 200ms -webkit-transform ease;
  transition: 200ms transform ease;
  -webkit-transform: scale(0);
  transform: scale(0);
}
    .thumbnailReplaceButton:active {
        background-color: #016950;
    }
.thumbnailReplaceButtonZone.disable {
    opacity:1 !important;
}
    .thumbnailReplaceButtonZone.disable > .thumbnailReplaceButton {
        background-color: #808080;
        border: solid 1px #cdcdcd;
        color: #cdcdcd;
        background-image: url("../common-img/img/svg/icn_exchange_disable.svg");
    }
.itemSelected .thumbnailReplaceButton,
.selectedItem .thumbnailReplaceButton {
  -webkit-transform: scale(1);
  transform: scale(1);
}
/* 状態表示アイコン領域 */
.indicateIconZone {
  position: absolute;
  /*top: -27px;*/
  /*right: -25px;*/
  top:-10px;
  right:0;
  width: 160px;
  height: 18px;
  text-align: right;
  border: none;
  padding-right: 3px;
  transition: 200ms margin ease;
}
.indicateIconZone > * {
  transition: 200ms all ease;
}
.checkedItem .indicateIconZone {
  margin-top: 10px;
}
.imgAnmA .indicateIconZone {
  -webkit-transform: rotate(-90deg) translate(0px, -200px);
  -webkit-transform-origin: right bottom;
  top: -22px;
  left: 27px;
}
.checkedItem .imgAnmA .indicateIconZone {
  margin-top: 0;
  margin-left: 10px;
  transition: 200ms margin-left ease;
}
.imgAnmB .indicateIconZone {
  -webkit-transform: rotate(-180deg);
  -webkit-transform-origin: center bottom;
  left: -3px;
  bottom: -10px;
  top: auto;
}
.checkedItem .imgAnmB .indicateIconZone {
  margin-top: 0;
  margin-bottom: 10px;
  transition: 200ms margin-bottom ease;
}
.imgAnmC .indicateIconZone {
  -webkit-transform: rotate(-270deg);
  -webkit-transform-origin: right bottom;
  bottom: -4px;
  top: auto;
  right: -12px;
}
.checkedItem .imgAnmC .indicateIconZone {
  margin-top: 0;
  margin-right: 10px;
  transition: 200ms margin-right ease;
}
.indicateIcon {
  background-image: url("../common-img/img/sample_TBD.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  float: right;
  width: 18px;
  height: 18px;
  margin-left: 2px;
  margin-top: 3px;
}
.indicateIcon.none {
  display: none;
}
/* サムネイル各種アイコン設定 */
.editIconZone {
  background-image: url("../common-img/img/svg/status_icon_edited.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.editedIcon {
  background-image: url("../common-img/img/svg/status_icon_edited.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.freeEditedIcon {
  background-image: url("../common-img/img/svg/status_icon_edited_free.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.payEditedIcon {
  background-image: url("../common-img/img/svg/status_icon_edited.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.similerIcon {
  background-image: url("../common-img/img/svg/status_icon_similar.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.recommendIcon {
  background-image: url("../common-img/img/svg/status_icon_recom.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.smallAlertIcon {
  background-image: url("../common-img/img/svg/status_icon_caution.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.extendAlertIcon {
  background-image: url("../common-img/img/svg/status_icon_caution.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.panoramaAlertIcon {
  background-image: url("../common-img/img/svg/status_icon_hv.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
/* 類似アイコン設定 */
.leftSemilerIconZone {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: -2px;
  height: 19px;
  width: 20px;
}
.microThumbnailViewMode .leftSemilerIconZone {
  display: none;
}
.leftSemilerIcon {
  height: 100%;
  width: 100%;
  background-image: url("../common-img/img/svg/status_icon_similar_chain.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 100%;
  background-size: 180%;
}
.rightSemilerIconZone {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: -2px;
  height: 19px;
  width: 20px;
}
.microThumbnailViewMode .rightSemilerIconZone {
  display: none;
}
.rightSemilerIcon {
  height: 100%;
  width: 100%;
  background-image: url("../common-img/img/svg/status_icon_similar_chain.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 0%;
  background-size: 180%;
}
/* サムネイル画面のスクロール設定 */
/**************** レイアウト表示エリア設定 ***************/
#layoutArea {
  position: absolute;
  top: 0;
  bottom: 86px;
  background: none;
  z-index: 1;
  transition: 300ms all ease;
  right: 0;
  left: 528px;
}
#layoutContentsArea {
  position: relative;
  height: 100%;
}
#layoutKeepEmptyArea {
  display: none !important;
}
/* レイアウト表示領域設定 */
#layoutDisplayArea {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
}
/*
@media screen and (max-width: 1280px) {
  #layoutDisplayArea {
    bottom: 110px;
  }
}
@media screen and (max-height: 900px) {
  #layoutDisplayArea {
    bottom: 110px;
  }
}
*/
#layoutDisplayAreaLabel {
  position: absolute;
}
#layoutDisplayAreaContent {
  position: relative;
  width: 100%;
  height: 100%;
}
#layoutDisplayAreaContent > * {
  transition: 300ms all ease;
}
/* レイアウトページ 編集ボタン領域設定 */
#layoutDisplayAreaList {
  position: absolute;
  bottom: 86%;
  display: -webkit-flex;
  display: flex;
  z-index: 10;
  right: 280px;
  left: 17%;
}
.thumbMain #layoutDisplayAreaList {
  right: 210px;
  left: 14.5%;
}
.editCategorySelected #layoutDisplayAreaList {
  right: 280px;
  left: 17%;
}
.editCategorySelected.editMain #layoutDisplayAreaList {
  right: 230px;
  left: 24%;
}
.layoutDisplayAreaListitem {
  height: 100%;
  margin-left: 10px;
}
.layoutDisplayAreaListitem.addPageListItem {
  -webkit-align-self: flex-start;
  align-self: flex-start;
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto;
}
.layoutDisplayAreaListitem.addPageListItem button::before {
  background-image: url("../common-img/img/svg/btn_icon_add_page.svg");
}
.layoutDisplayAreaListitem.deletePicsListItem {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}
.layoutDisplayAreaListitem.deletePicsListItem button::before {
  background-image: url("../common-img/img/svg/btn_icon_delete_pics.svg");
}
.layoutDisplayAreaListitem.deletePageListItem {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}
.layoutDisplayAreaListitem.deletePageListItem button::before {
  background-image: url("../common-img/img/svg/btn_icon_delete_page.svg");
}
.layoutDisplayAreaListitem button {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.1rem;
  padding-top: 0.8rem;
  line-height: 1.8rem;
  min-width: 140px;
  outline: none;
  border-radius: 10px;
  font-size: 2rem;
  font-family: "Meiryo UI", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  transition: all 200ms ease;
  background-color: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  transition: none;
  position: relative;
  height: 67px;
  padding-left: 5rem;
  line-height: 1.2em;
}
.anmEffect .layoutDisplayAreaListitem button,
.layoutDisplayAreaListitem button.anmEffect {
  -webkit-animation-name: anmEffect;
  -webkit-animation-duration: 600ms;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-iteration-count: 1;
  z-index: 10;
}
@-webkit-keyframes anmEffect {
  0% {
    box-shadow: 0px 0px 1px 1px rgba(190, 246, 84, 0.4);
  }
  30% {
    box-shadow: 0px 0px 50px 20px rgba(190, 246, 84, 0.6);
  }
  100% {
    box-shadow: 0px 0px 50px 50px rgba(190, 246, 84, 0);
  }
}
.selected .layoutDisplayAreaListitem button,
.layoutDisplayAreaListitem button.selected {
  background-color: #dd621c;
}
.layoutDisplayAreaListitem button::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 7px;
  display: block;
  width: 39px;
  height: 39px;
  background-position: left center;
  background-size: 39px;
  background-repeat: no-repeat;
}
.layoutDisplayAreaListitem button#insertPageModeBtn.selected {
  background-color: #dd621c;
  color: #ffffff;
}
.layoutDisplayAreaListitem button#insertPageModeBtn.selected::after {
  content: "";
  display: block;
  position: absolute;
  top: -12px;
  left: -12px;
  width: 24px;
  height: 24px;
  background-image: url("../common-img/img/svg/selected_btn_icon_checked.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #dd621c;
  border-radius: 50%;
  color: #ffffff;
  border: 2px solid #ffffff;
}
/* レイアウト領域設定 */
#layoutZone {
    position: relative;
    height: 100%;
    margin: 0 144px 0 22px;
}
#layouts {
  width: 100%;
  height: 100%;
  position: relative;
}
/* レイアウト設定 */
.layout {
  position: relative;
  width: 100% !important;
  height: 100%;
  transition: 300ms all ease;
}
.elementButton {
  width: 30%;
  height: 30%;
}
#selectorParentGroup > .selected {
  border-image: url("../common-img/img/svg/border_stamp.svg") 7 round;
  border-width: 7px;
}
#selectorParentGroup > .selected > .elementRotateButton {
  width: 32px;
  height: 32px;
  background-color: #ffffff;
  background-size: 70% !important;
  border: 2px solid #dd621c;
  border-radius: 50%;
  display: block;
  background-position: center center;
  background-image: url("../common-img/img/svg/btn_icon_dragable.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  right: -22px;
  bottom: -22px;
}
#selectorParentGroup > .selected > .elementDeleteButton {
  width: 32px;
  height: 32px;
  background-color: #ffffff;
  background-size: 70% !important;
  border: 2px solid #dd621c;
  border-radius: 50%;
  display: block;
  background-position: center center;
  background-image: url("../common-img/img/svg/btn_icon_delete.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: -22px;
  right: -22px;
}
#selectorParentGroup > div {
  box-sizing: border-box;
}
/* *************** レイアウトの設定 ************** */
.layoutBaseZone {
  position: absolute;
  top: 140px;
  right: 0;
  bottom: 88px;
  left: 0;
  margin: auto;
  background: none;
}
#domLayerzone {
  position: absolute;
  top: 16%;
  right: 2%;
  bottom: 20%;
  left: 1%;
}
.hrznLayout #domLayerzone > div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
/*
.layoutBaseImage{
    ._centerArrange(true,true);
    max-width: 100%;
    max-height: 100%;
  .hrznLayout & {
  }
  .vrtclLayout &{
    box-shadow: 0 1px 2px rgba(0,0,0,0.8);
  }
}
*/
.layoutContentZone {
  position: absolute;
  top: 16%;
  background: none;
  margin: auto;
}
.hrznLayout .layoutContentZone {
  right: 2%;
  bottom: 20%;
  left: 1%;
}
.vrtclLayout .layoutContentZone {
  right: 17%;
  bottom: 7%;
  left: 16%;
}
.frameElement {
  position: absolute;
  border-image: url("../common-img/img/svg/border_display_area.svg") 7 round;
  border-width: 7px;
  border-image-outset: sides;
  box-sizing: border-box;
}
.selectTemplateCaptionZone {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  font-size: 3.3rem;
  text-align: center;
  height: 2em;
  padding: 2em;
}
.layoutContentCanvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  background: none;
}
.svgcanvasJS {
  position: absolute;
  top: 16%;
  right: 17%;
  bottom: 7%;
  left: 16%;
  margin: auto;
  background: none;
}
.svgcanvasJS svg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}
.eventHandlingAreaC {
  position: absolute;
  top: 16%;
  right: 2%;
  bottom: 20%;
  left: 1%;
  margin: auto;
  background: none;
}
.tempDispArea {
  position: absolute;
  top: 16%;
  right: 2%;
  bottom: 20%;
  left: 1%;
  margin: auto;
  background: none;
}
.tempDispCanvas {
  max-width: 100%;
  max-height: 100%;
  background: none;
}
.tempSelectArea {
  position: absolute;
  top: 16%;
  right: 2%;
  bottom: 20%;
  left: 1%;
  margin: auto;
  background: none;
}
.tempSelectCanvas {
  max-width: 100%;
  max-height: 100%;
  background: none;
}
.imageDrawCanvas {
  max-width: 100%;
  max-height: 100%;
  background: none;
  background-color:#333333;
}
#guideArea {
  position: absolute;
  top: 0;
  left: 20%;
  width: 60%;
  height: 100%;
  background: none;
}
#guide {
  width: 100%;
  height: 100%;
  background: none;
}
#guaranteeArea {
  position: absolute;
}
.svgcontentJS {
  width: 100%;
  height: 100%;
  background: none;
}
/* レイアウト領域設定 */
#pages {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  /* 見切れ範囲の調整 */
  /* 表示確認用設定 */
  width: 760px;
  height: 100%;
}
.thumbMain #pages {
  /* 表示確認用設定 */
  width: 640px;
}
.editCategorySelected #pages {
  /* 表示確認用設定 */
  width: 760px;
}
.editCategorySelected.editMain #pages {
  /* 表示確認用設定 */
  width: 640px;
}
#pagesLabel {
  position: absolute;
  text-indent: -9999px;
}
#pagesContent {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: 300ms all ease;
  /* 上下左右位置の調整 */
  /* 表示確認用設定 */
  top: -3%;
  left: -5%;
}
.thumbMain #pagesContent {
  /* 表示確認用設定 */
  top: 5%;
  left: 8%;
}
.editCategorySelected #pagesContent {
  /* 表示確認用設定 */
  top: -3%;
  left: -5%;
}
.editCategorySelected.editMain #pagesContent {
  /* 表示確認用設定 */
  top: 5%;
  left: 1%;
}
#pagesList {
  height: 100%;
  /* 表示確認用設定 */
  display: flex;
  flex-wrap: nowrap;
  /* 表示確認用設定 */
  width: 5000px;
}
/* 表示確認用設定 */
.pagesListitem {
  flex: 0 0 auto;
  box-sizing: border-box;
  /* 表示確認用設定 */
  padding: 10px 20px;
  position: relative;
  top: 28%;
  -webkit-transform: scale(1);
  transition: 300ms -webkit-transform ease-in-out;
  /* 表示確認用設定 */
}
.thumbMain .pagesListitem {
  /* 表示確認用設定 */
  height: 420px;
}
.editCategorySelected .pagesListitem {
  /* 表示確認用設定 */
  height: 500px;
}
.editCategorySelected.editMain .pagesListitem {
  /* 表示確認用設定 */
  height: 420px;
}
.pagesListitem.loadingImage::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background-image: url("../common-img/img/loadIcon.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 96px;
  height: 96px;
  -webkit-animation-name: nowLoadingEffect;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes nowLoadingEffect {
  0% {
    -webkit-transform: rotate(0deg);
  }
  12.5% {
    -webkit-transform: rotate(0deg);
  }
  12.6% {
    -webkit-transform: rotate(45deg);
  }
  25% {
    -webkit-transform: rotate(45deg);
  }
  25.1% {
    -webkit-transform: rotate(90deg);
  }
  37.5% {
    -webkit-transform: rotate(90deg);
  }
  37.6% {
    -webkit-transform: rotate(135deg);
  }
  50% {
    -webkit-transform: rotate(135deg);
  }
  50.1% {
    -webkit-transform: rotate(180deg);
  }
  62.5% {
    -webkit-transform: rotate(180deg);
  }
  62.6% {
    -webkit-transform: rotate(225deg);
  }
  75% {
    -webkit-transform: rotate(225deg);
  }
  75.1% {
    -webkit-transform: rotate(270deg);
  }
  87.5% {
    -webkit-transform: rotate(270deg);
  }
  87.6% {
    -webkit-transform: rotate(315deg);
  }
  100% {
    -webkit-transform: rotate(315deg);
  }
}
.replaceModeOutOfPageMode .pagesListitem {
  -webkit-transform: scale(0.75);
}
.page {
  position: relative;
  background-color: #fff;
  transition: 300ms all ease;
  /* 表示確認用設定 */
  width: 720px;
  height: 480px;
}
.thumbMain .page {
  /* 表示確認用設定 */
  width: 600px;
  height: 400px;
}
.editCategorySelected .page {
  /* 表示確認用設定 */
  width: 720px;
  height: 480px;
}
.editCategorySelected.editMain .page {
  /* 表示確認用設定 */
  width: 600px;
  height: 400px;
}
.loadingImage .page::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background-color: rgba(255, 255, 255, 0.8);
}
.pageLabel {
  text-indent: -9999px;
}
.pageContent {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
/*講評サービス領域指定canvas*/
.pageEditCanvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/**************** 固定ボタン表示エリア設定 ***************/
/* 変更履歴操作ボタン領域設定 */
#operationControlZone {
  position: absolute;
  right: 22px;
  bottom: 108px;
  width: 100px;
  height: 81px;
  transition: all 300ms ease;
  z-index: 10;
}
#undoButtonZone {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 38px;
  background: none;
}
#undoButton {
  min-width: 140px;
  outline: none;
  font-size: 3rem;
  font-family: "Meiryo UI", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  transition: all 200ms ease;
  border:1px solid #e4f0ef;
  background-color: #01916d;
  color: #ffffff;
  transition: none;
  background-image: url("../common-img/img/svg/icn_undo.svg");
  background-position: 5px center;
  background-size: 30px;
  background-repeat: no-repeat;
  font-size: 1.3rem;
  min-width: 0;
  padding: 0 0 0 25px;
  width: 100%;
  height: 100%;
}
body.osMac #undoButton {
  font-size: 10pt;
}
.anmEffect #undoButton,
#undoButton.anmEffect {
  -webkit-animation-name: anmEffect;
  -webkit-animation-duration: 600ms;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-iteration-count: 1;
  z-index: 10;
}
@-webkit-keyframes anmEffect {
  0% {
    box-shadow: 0px 0px 1px 1px rgba(190, 246, 84, 0.4);
  }
  30% {
    box-shadow: 0px 0px 50px 20px rgba(190, 246, 84, 0.6);
  }
  100% {
    box-shadow: 0px 0px 50px 50px rgba(190, 246, 84, 0);
  }
}
#undoButton:active {
  background-color: #016950;
}
#redoButtonZone {
  position: absolute;
  top: 43px;
  left: 0;
  width: 100%;
  height: 38px;
  background: none;
}
#redoButton {
  min-width: 140px;
  outline: none;
  font-size: 3rem;
  font-family: "Meiryo UI", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  transition: all 200ms ease;
  border:1px solid #e4f0ef;
  background-color: #01916d;
  color: #ffffff;
  transition: none;
  background-image: url("../common-img/img/svg/icn_redo.svg");
  background-position: 5px center;
  background-size: 30px;
  background-repeat: no-repeat;
  font-size: 1.3rem;
  min-width: 0;
  padding: 0 0 0 25px;
  width: 100%;
  height: 100%;
}
body.osMac #redoButton {
  font-size: 10pt;
}
.anmEffect #redoButton,
#redoButton.anmEffect {
  -webkit-animation-name: anmEffect;
  -webkit-animation-duration: 600ms;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-iteration-count: 1;
  z-index: 10;
}
@-webkit-keyframes anmEffect {
  0% {
    box-shadow: 0px 0px 1px 1px rgba(190, 246, 84, 0.4);
  }
  30% {
    box-shadow: 0px 0px 50px 20px rgba(190, 246, 84, 0.6);
  }
  100% {
    box-shadow: 0px 0px 50px 50px rgba(190, 246, 84, 0);
  }
}
#redoButton:active {
  background-color: #016950;
}
/* 内接モードボタン */
.previewBottomBtnControlZone {
    position: absolute;
    bottom: 22px;
    left:50%;
    transform:translateX(-50%);
    width: 100%;
    max-width: 600px;
    height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.previewBottomBtnControlZone >:first-of-type {
    margin-right:auto;
}

.fitModeBtnZone {
    width: 110px;
    height: 38px;
    background: none;
    margin: 0 5px;
}

.fitModeBtn {
    outline: none;
    font-family: "Meiryo UI", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    border: 1px solid #01916d;
    background-color: #dce9ef;
    color: #01916d;
    font-size: 11pt;
    min-width: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-image: none;
    background-position: 6px;
    background-size: 24px;
    background-repeat: no-repeat;
}

.anmEffect .fitModeBtn,
.fitModeBtn.anmEffect {
    -webkit-animation-name: anmEffect;
    -webkit-animation-duration: 600ms;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
    z-index: 10;
}

@-webkit-keyframes anmEffect {
    0% {
        box-shadow: 0px 0px 1px 1px rgba(190, 246, 84, 0.4);
    }

    30% {
        box-shadow: 0px 0px 50px 20px rgba(190, 246, 84, 0.6);
    }

    100% {
        box-shadow: 0px 0px 50px 50px rgba(190, 246, 84, 0);
    }
}

.selected .fitModeBtn,
.fitModeBtn.selected {
    color: #fff;
    border: 1px solid #fff;
    background-color: #01916d;
}
    .selected .fitModeBtn:active {
        background-color: #016950;
    }
/*******************************
 * ポップアップ系画面エリア設定
 * ***************************** */
#popupArea {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none;
  z-index: 20;
}
#popupArea * {
  /*20140527 表示の乱れが頻発するため設定*/
  -webkit-backface-visibility: visible;
}
/* ポップアップ背景設定 */
#popupBackground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #333333;
  opacity: 0.5;
}

/***************** ポップアップアニメーション設定 *****************/
#popupArea,
#noCartInfoArea {
  -webkit-transition: none;
}
#popupArea.none,
#noCartInfoArea.none {
  -webkit-animation-name: hidePopupArea;
  -webkit-animation-duration: 200ms;
  -webkit-animation-iteration-count: 1;
}
@-webkit-keyframes hidePopupArea {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  99% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0);
  }
}
#popupBackground,
#noCartInfoBg {
  -webkit-transition: 200ms opacity ease;
}
.none #popupBackground,
.none #noCartInfoBg {
  opacity: 0 !important;
}
#autoSelectArea,
#smartLayoutWaitingArea,
#confirmArea,
#alertConfirmArea,
#editConfirmArea,
#rotateDirectionSelectArea,
#editProcessTipsArea,
#frameOutAlertArea,
#spineTitleAlertArea,
#colorAdjustChargeConfirmArea,
#effectChargeConfirmArea,
#commentChargeConfirmArea,
#sheetEffectConfirmArea,
#frameBuriedAllConfirmArea,
#editInformationPictureCanceledConfirmArea,
#titleInputArea,
#deletePicsConfirmArea,
#cantBeUndoConfirmArea,
#pageAddedConfirmArea,
#pageDeleteionConfirmArea,
#commentEditPopupArea {
  -webkit-transition: all 200ms ease;
}
#autoSelectArea.none,
#smartLayoutWaitingArea.none,
#confirmArea.none,
#alertConfirmArea.none,
#editConfirmArea.none,
#rotateDirectionSelectArea.none,
#editProcessTipsArea.none,
#frameOutAlertArea.none,
#spineTitleAlertArea.none,
#colorAdjustChargeConfirmArea.none,
#effectChargeConfirmArea.none,
#commentChargeConfirmArea.none,
#sheetEffectConfirmArea.none,
#frameBuriedAllConfirmArea.none,
#editInformationPictureCanceledConfirmArea.none,
#titleInputArea.none,
#deletePicsConfirmArea.none,
#cantBeUndoConfirmArea.none,
#pageAddedConfirmArea.none,
#pageDeleteionConfirmArea.none,
#commentEditPopupArea.none {
  opacity: 0 !important;
  -webkit-transform: scale(0) !important;
}
#noCartInfoZone {
  -webkit-transition: all 200ms ease;
}
.none #noCartInfoZone {
  opacity: 0 !important;
  -webkit-transform: scale(0) !important;
}
#cartInfoArea {
  -webkit-transition: none;
}
#cartInfoArea.none {
  -webkit-animation-name: hidePopupArea;
  -webkit-animation-duration: 200ms;
  -webkit-animation-iteration-count: 1;
}
@-webkit-keyframes hidePopupArea {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  99% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0);
  }
}
#cartInfoZone {
  -webkit-transition: all 200ms ease;
  -webkit-transform-origin: 100% 0;
  -webkit-transform: translate(0, 0) scale(1);
}
.none #cartInfoZone {
  opacity: 0 !important;
  -webkit-transform: scale(0) !important;
  -webkit-transform: translate(11%, -5%) scale(0) !important;
}
/* TODO 仕様変更に伴うCSS変更 ADSL追加箇所 ここから▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
/* 取扱いできない画像メッセージ設定 */
.unDealMessageZone {
  position: absolute;
  top: 60%;
  left: 10%;
  width: 80%;
  text-align: center;
  font-size: 1.3rem;
  color: #333333;
  text-shadow: 0 0 1px #fff,
               0 0 1px #fff,
               0 0 1px #fff;
}
/* TODO 仕様変更に伴うCSS変更 ADSL追加箇所 ここまで▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/
/***************** フッターアニメーション設定 *****************/
#footerInfoArea #totalAmount.numChangeEffect,
#footerInfoArea #selectedPicCount.numChangeEffect,
#footerInfoArea #orderCount.numChangeEffect {
  -webkit-animation-name: numChangeEffect;
  -webkit-animation-duration: 400ms;
  -webkit-animation-timing-function: ease;
  -webkit-animation-iteration-count: 1;
}
@-webkit-keyframes numChangeEffect {
  0% {
    -webkit-transform: scale(1);
  }
  50% {
    -webkit-transform: scale(2);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
#mCSB_container {
  padding-top: 20px;
}
/* 画面モード切替時のアニメーション対応 */
#thumbnailFadeArea {
    width: 100%;
    height: 88%;
    position: absolute;
    top: 12%;
    bottom: 130px;
    border: none;
    overflow: hidden;
    background-color: #808080;
    display: none;
}
@media screen and (max-width: 1280px) {
  #thumbnailFadeArea {
    bottom: 110px;
  }
}
@media screen and (max-height: 900px) {
  #thumbnailFadeArea {
    bottom: 110px;
  }
}
#thumbnailFadeArea::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
#thumbnailFadeArea.fadeOutClass {
  -webkit-animation-name: fadeOutKeyFrames;
  -webkit-animation-duration: 300ms;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-iteration-count: 1;
}
#thumbnailFadeArea.fadeInClass {
  -webkit-animation-name: fadeInKeyFrames;
  -webkit-animation-duration: 300ms;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-iteration-count: 1;
}
@-webkit-keyframes fadeOutKeyFrames {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fadeInKeyFrames {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes balloonEffect {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  48% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.showSmartLayoutWaitingArea #tipsZone {
  position: absolute;
  top: 0;
  left: 0;
}


.printablearea {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-style: solid;
    border-color: rgba(255, 255, 0, 0.3);
}
.vignettingArea {
    position: absolute;
    box-sizing: border-box;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.3);
    pointer-events: none;
}

.resolutionWarnIconArea {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
}
.frameRotateA .resolutionWarnIconArea{
    right: auto;
    left: 6px;
    transform: rotate(270deg);
}
.frameRotateB .resolutionWarnIconArea{
    top: auto;
    right: auto;
    bottom: 6px;
    left: 6px;
    transform: rotate(180deg);
}
.frameRotateC .resolutionWarnIconArea{
    top: auto;
    bottom: 6px;
    transform: rotate(90deg);
}
.resolutionWarnIcon {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url("../common-img/img/svg/status_icon_caution.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.picDateAreaForThumb {
  display: none;
  position: absolute;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 1.3rem;
  z-index: 1;
  width: 90px;
  left: 0;
  right: 0;
  top: 100%;
  margin: auto;
  text-align: center;
}
.checkedItem .picDateAreaForThumb {
  top: calc(100% +  10px);
}
.appearPicDate .thumbnailViewMode .picDateAreaForThumb,
.appearPicDate .zoomViewMode .picDateAreaForThumb {
  display: block;
}
.undealImage .picDateAreaForThumb {
  display: none!important;
}
.imgAnmA .picDateAreaForThumb {
  top: 0;
  bottom: 0;
  left: calc(100% + -27.5px);
  -webkit-transform: rotate3d(0, 0, 1, -90deg);
  transform: rotate3d(0, 0, 1, -90deg);
}
.checkedItem .imgAnmA .picDateAreaForThumb {
  left: calc(100% + -17.5px);
}
.imgAnmB .picDateAreaForThumb {
  top: -35px;
  -webkit-transform: rotate3d(0, 0, 1, -180deg);
  transform: rotate3d(0, 0, 1, -180deg);
}
.checkedItem .imgAnmB .picDateAreaForThumb {
  top: -45px;
}
.imgAnmC .picDateAreaForThumb {
  top: 0;
  right: auto;
  bottom: 0;
  left: -62.5px;
  -webkit-transform: rotate3d(0, 0, 1, -270deg);
  transform: rotate3d(0, 0, 1, -270deg);
}
.checkedItem .imgAnmC .picDateAreaForThumb {
  left: -72.5px;
}
.picDateForThumb {
  color: #ffffff;
  height: 30px;
  line-height: 30px;
  width: 100%;
}
.picDateAreaForPreview {
  display: none;
  position: absolute;
  height: 35px;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 1.3rem;
  z-index: 1;
  width: 90px;
  left: -999px;
  right: -999px;
  bottom: 0;
  margin: auto;
  text-align: center;
}
.checkedItem .picDateAreaForPreview {
  top: calc(100% +  10px);
}
.appearPicDate .picDateAreaForPreview,
.appearPicDate .picDateAreaForPreview {
  display: block;
}
.undealImage .picDateAreaForPreview {
  display: none!important;
}
.picDateForPreview {
  color: #ffffff;
  height: 35px;
  line-height: 35px;
  width: 100%;
}
#dateControlFooterArea {
  position: absolute;
  /*right: -143px;*/
  left: -140px;
  top: 330px;
  /*bottom: 200px;*/
  transition: opacity 300ms ease;
  /*20150212 Step3Mantis5652*/
  -webkit-tap-highlight-color: transparent;
}
/*
@media screen and (max-width: 1280px) {
  #dateControlFooterArea {
    bottom: 210px;
  }
  #dateControlFooterArea #dateControlPrintBtnZone {
    margin-top: 15px;
  }
}
@media screen and (max-height: 900px) {
  #dateControlFooterArea {
    bottom: 185px;
  }
  #dateControlFooterArea #dateControlPrintBtnZone {
    margin-top: 10px;
  }
}
*/
.editCategorySelected #dateControlFooterArea {
  /* 2014/12/23 ii-ogura 解像度対応 画面右編集エリア選択時は非表示 にした*/
  display: none;
}
#dateControlIndicateBtnZone {
  margin: 10px;
  width: 100px;
  height: 50px;
}
#dateControlIndicateBtn {
  position: relative;
  padding: 0.8rem;
  padding-top: 0.6rem;
  line-height: 1.4rem;
  min-width: 140px;
  outline: none;
  border-radius: 10px;
  font-size: 1.6rem;
  font-family: "Meiryo UI", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  transition: all 200ms ease;
  background-color: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  transition: none;
  width: 100%;
  height: 100%;
  min-width: 0;
}
body.osMac #dateControlIndicateBtn {
  font-size: 1.2rem;
}
.anmEffect #dateControlIndicateBtn,
#dateControlIndicateBtn.anmEffect {
  -webkit-animation-name: anmEffect;
  -webkit-animation-duration: 600ms;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-iteration-count: 1;
  z-index: 10;
}
@-webkit-keyframes anmEffect {
  0% {
    box-shadow: 0px 0px 1px 1px rgba(190, 246, 84, 0.4);
  }
  30% {
    box-shadow: 0px 0px 50px 20px rgba(190, 246, 84, 0.6);
  }
  100% {
    box-shadow: 0px 0px 50px 50px rgba(190, 246, 84, 0);
  }
}
.selected #dateControlIndicateBtn,
#dateControlIndicateBtn.selected {
  background-color: #dd621c;
}
.selected #dateControlIndicateBtn:after {
  content: "";
  display: block;
  position: absolute;
  top: -16px;
  left: -16px;
  width: 32px;
  height: 32px;
  background-image: url("../common-img/img/svg/selected_btn_icon_checked.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #dd621c;
  border-radius: 50%;
  color: #ffffff;
  border: 2px solid #ffffff;
}
#dateControlPrintBtnZone {
  width: 100px;
  height: 50px;
  margin: 10px;
}
#dateControlPrintBtn {
  position: relative;
  padding: 0.8rem;
  padding-top: 0.6rem;
  line-height: 1.4rem;
  min-width: 140px;
  outline: none;
  border-radius: 10px;
  font-size: 1.6rem;
  font-family: "Meiryo UI", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  transition: all 200ms ease;
  background-color: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  transition: none;
  width: 100%;
  height: 100%;
  min-width: 0;
}
body.osMac #dateControlPrintBtn {
  font-size: 1.2rem;
}
.anmEffect #dateControlPrintBtn,
#dateControlPrintBtn.anmEffect {
  -webkit-animation-name: anmEffect;
  -webkit-animation-duration: 600ms;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-iteration-count: 1;
  z-index: 10;
}
@-webkit-keyframes anmEffect {
  0% {
    box-shadow: 0px 0px 1px 1px rgba(190, 246, 84, 0.4);
  }
  30% {
    box-shadow: 0px 0px 50px 20px rgba(190, 246, 84, 0.6);
  }
  100% {
    box-shadow: 0px 0px 50px 50px rgba(190, 246, 84, 0);
  }
}
.selected #dateControlPrintBtn,
#dateControlPrintBtn.selected {
  background-color: #dd621c;
}
.selected #dateControlPrintBtn:after {
  content: "";
  display: block;
  position: absolute;
  top: -16px;
  left: -16px;
  width: 32px;
  height: 32px;
  background-image: url("../common-img/img/svg/selected_btn_icon_checked.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #dd621c;
  border-radius: 50%;
  color: #ffffff;
  border: 2px solid #ffffff;
}
#mCSB_2_container {
  padding-bottom: 120px;
}
.bookSpineShadow {
  position: absolute;
  pointer-events: none;
  /******** JSにて直接指定いただきたい箇所 ここから ********/
  width: 857px;
  height: 609px;
  /******** JSにて直接指定いただきたい箇所 ここまで ********/
}
.bookSpineShadowContent {
  position: absolute;
  /******** JSにて直接指定いただきたい箇所 ここから ********/
  width: 32px;
  height: 609px;
  top: 0;
  left: 405px;
  /******** JSにて直接指定いただきたい箇所 ここまで ********/
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3) inset, 0 0 15px rgba(255, 255, 255, 0.3) inset;
  pointer-events: none;
}
.bookSpineShadowContent::before,
.bookSpineShadowContent::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 255px;
  pointer-events: none;
}
.bookSpineShadowContent::before {
  right: 100%;
  box-shadow: -20px 0 15px -15px rgba(0, 0, 0, 0.2) inset, -25px 0 25px -25px rgba(255, 255, 255, 0.5) inset;
}
.bookSpineShadowContent::after {
  left: 100%;
  box-shadow: 20px 0 15px -15px rgba(0, 0, 0, 0.2) inset;
}
.bookGutterShadow {
  position: absolute;
  /******** JSにて直接指定いただきたい箇所 ここから ********/
  width: 0;
  height: 609px;
  /******** JSにて直接指定いただきたい箇所 ここまで ********/
  pointer-events: none;
}
.bookGutterShadow::before,
.bookGutterShadow::after {
  content: "";
  position: absolute;
  display: block;
  width: 50%;
  height: 100%;
  min-width: 255px;
  pointer-events: none;
}
.bookGutterShadow::before {
  right: 50%;
  box-shadow: -20px 0 15px -15px rgba(0, 0, 0, 0.3) inset;
}
.bookGutterShadow::after {
  left: 50%;
  box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.5) inset, 25px 0 25px -10px rgba(255, 255, 255, 0.3) inset;
}

/******* 選択フレームコントロール *******/
.selectBorderDeleteButtonZone {
  position: absolute;
  width: 25px;
  height: 25px;
  top: -14px;
  right: -14px;
}
.selectComment {
  top: -25px;
  right: -25px;
}
.selectBorderDeleteButton {
  position: relative;
  width: 100%;
  height: 100%;
  border: 2px solid #dd621c;
  border-radius: 50%;
  background-color: #fff;
  background-image: url("../common-img/img/svg/btn_icon_delete.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
  box-sizing:border-box;
}
.selectBorderTrimmingButtonZone {
    display: block;
    width: 110px;
    height: 38px;
    margin: 0 0 0 5px;
}
.selectBorderTrimmingButton {
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 11pt;
    border: 1px solid #e4f0ef;
    background-color: #01916d;
    background-image: url("../common-img/img/svg/icn_edit.svg");
    background-position: 10px;
    background-repeat: no-repeat;
    background-size: 30px;
    padding: 0 0 0 20px;
    box-sizing: border-box;
}
    .selectBorderTrimmingButton:active {
        background-color: #016950;
    }
.selectBorderStampRotateButtonZone {
  position: absolute;
  width: 25px;
  height: 25px;
  bottom: -14px;
  right: -14px;
}
.selectBorderStampRotateButton {
  position: relative;
  width: 100%;
  height: 100%;
  border: 2px solid #dd621c;
  border-radius: 50%;
  background-color: #fff;
  background-image: url("../common-img/img/svg/btn_icon_dragable.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
  box-sizing:border-box;
}
.selectBorderReplaceButtonZone {
    display: block;
    width: 120px;
    height: 38px;
    margin: 0 5px;
}
.selectBorderReplaceButton {
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 11pt;
  border: 1px solid #e4f0ef;
  background-color: #01916d;
  background-image: url("../common-img/img/svg/icn_exchange.svg");
  background-position: 6px;
  background-repeat: no-repeat;
  background-size: 30px;
  padding: 0 0 0 30px;
  box-sizing:border-box;
}
    .selectBorderReplaceButton:active {
        background-color: #016950;
    }
.selectBorderPictureRotateButtonZone {
  display:block;
  width: 110px;
  height: 38px;
  margin: 0 95px 0 0;
}
.selectBorderPictureRotateButton {
  width: 100%;
  height: 100%;
  color:#fff;
  font-size:11pt;
  border: 1px solid #e4f0ef;
  background-color: #01916d;
  background-image: url("../common-img/img/svg/icn_rotate_90_r.svg");
  background-position: 5px;
  background-repeat: no-repeat;
  background-size: 30px;
  padding:0 0 0 30px;
  box-sizing:border-box;
}
    .selectBorderPictureRotateButton:active {
        background-color: #016950;
    }
.selectBorderCommentEditButtonZone {
  position: absolute;
  width: 50px;
  height: 26px;
  bottom: -26px;
  right: -50px;
}
.selectBorderCommentEditButton {
  position: relative;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 11pt;
  border: 2px solid #fff;
  border-radius: 3px;
  background-color: #dd621c;
  box-sizing:border-box;
}

/******* 戻る確認ダイアログ *******/
#cancelConfirmArea .none {
  display: none;
}
#textInputArea {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background: none;
  z-index: 20000;
  background-color:rgba(0,0,0,0.3);
}
#textInputZone,
#textConfirmZone {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  position: absolute;
  min-width: 550px;
  max-width: 900px;
  width: 70%;
  /*min-height: 420px;*/
  height: 420px;
  top: 0;
  right: 0;
  bottom: 86px;
  left: 0;
  padding: 2rem 2.5rem 100px 2.5rem;
  margin: auto;
  border-radius: 10px;
  background-color: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.2);
  color: #333333;
  overflow: hidden;
  box-sizing: border-box;
}
#textInputContentsZone {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding: 0% 1%;
  margin-top: 6.5rem;
  margin-bottom: 1rem;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  flex-direction: column;
  -webkit-flex-direction: column;
  color: #333333;
  font-size: 2.8rem;
  /*border-radius: 10px;*/
  /*border: 2px solid rgba(0, 0, 0, 0.2);*/
  /*background-color: rgba(186, 241, 248, 0.3);*/
  box-sizing: border-box;
}
#textConfirmContentsZone {
  width: 100%;
  height: 100%;
  padding: 0% 1%;
  color: #333333;
  font-size: 2.8rem;
  box-sizing: border-box;
}
#textInputCaptionZone {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  position: absolute;
  top: 2.5rem;
  left: 2.5rem;
  width: 100%;
  height: 3rem;
  padding: 0 1.5em 0 0.2em;
  color: #767676;
  box-sizing: border-box;
}
#textConfirmCaptionZone {
  width: 100%;
  height: 6.5rem;
  padding: 0 1.5em 0 0.2em;
  color: #767676;
  box-sizing: border-box;
}
#textInputCaption,
#textConfirmCaption {
  font-size: 2.4rem;
  padding-left: 0.5em;
}
#textInputCaption > .inputTextLimit {
  font-size: 1.4rem;
  color: #f00;
}
#commentConfirmArea {
  width: 100%;
  height: calc(100% - 6.5rem);
  text-align: center;
}
#commentConfirmImage {
    max-width: 100%;
    max-height: 100%;
    border: 1px solid #ccc;
}
#cancelConfirmImageZone {
  position: relative;
  flex: 1 1 50%;
}
#cancelConfirmImage {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}
#cancelConfirmDummyZone {
  position: relative;
  flex: 1 1 50%;
}
#textInputFormZone {
  width: 100%;
  flex: 0 0 auto;
}
#controlBtnArea {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  flex: 0 0 auto;
  padding: 1.5rem 0;
}
#controlLeftBtnZone {
  width: 280px;
  height: 60px;
  margin: 0 1rem;
  -webkit-order: 1;
  order: 1;
}
#controlRightBtnZone {
  width: 280px;
  height: 60px;
  margin: 0 1rem;
  -webkit-order: 2;
  order: 2;
}
#controlLeftBtn, #controlRightBtn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 1rem;
  line-height: 2.8rem;
  outline: none;
  border-radius: 10px;
  font-size: 2.8rem;
  font-family: "Meiryo UI", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  transition: all 200ms ease;
  background-color: #999;
  color: #ffffff;
}
.rotateAlert #controlLeftBtn {
  background-position: 1rem center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../common-img/img/svg/btn_icon_rotate_minus90deg.svg");
  background-size: 48px;
  padding-left: 60px;
}
.rotateAlert #controlRightBtn {
  background-position: 1rem center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../common-img/img/svg/btn_icon_rotate_90deg.svg");
  background-size: 48px;
  padding-left: 60px;
}
#textInputDecideCancelBtnArea,
#textConfirmDecideCancelBtnArea {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  position: absolute;
  height: 80px;
  right: -3rem;
  left: -3rem;
  bottom: 0;
  background-color: rgba(113, 168, 9, 0.8);
}
#textInputDecideBtnZone,
#textConfirmDecideBtnZone {
  min-width: 140px;
  height: 60px;
  margin: 0 1rem;
  -webkit-order: 2;
  order: 2;
}
#textInputDecideBtn,
#textConfirmDecideBtn {
  display: block;
  min-width: 140px;
  height: 100%;
  padding: 1.3rem;
  padding-top: 0.8rem;
  line-height: 2.3rem;
  outline: none;
  border-radius: 10px;
  font-size: 2.5rem;
  font-family: "Meiryo UI", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  transition: all 200ms ease;
  background-color: transparent;
  color: #ffffff;
  border: 3px solid #ffffff;
}
.anmEffect #textInputDecideBtn,
#textInputDecideBtn.anmEffect,
.anmEffect #textConfirmDecideBtn,
#textConfirmDecideBtn.anmEffect {
  -webkit-animation-name: anmEffect;
  -webkit-animation-duration: 600ms;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-iteration-count: 1;
  z-index: 10;
}
@-webkit-keyframes anmEffect {
  0% {
    box-shadow: 0px 0px 1px 1px rgba(190, 246, 84, 0.4);
  }
  30% {
    box-shadow: 0px 0px 50px 20px rgba(190, 246, 84, 0.6);
  }
  100% {
    box-shadow: 0px 0px 50px 50px rgba(190, 246, 84, 0);
  }
}
#textInputCancelBtnZone,
#textConfirmCancelBtnZone {
  min-width: 140px;
  height: 60px;
  margin: 0 1rem;
  -webkit-order: 1;
  order: 1;
}
#textInputCancelBtn,
#textConfirmCancelBtn {
  display: block;
  min-width: 140px;
  height: 100%;
  padding: 1.3rem;
  padding-top: 0.8rem;
  line-height: 2.3rem;
  outline: none;
  border-radius: 10px;
  font-size: 2.5rem;
  font-family: "Meiryo UI", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  transition: all 200ms ease;
  background-color: transparent;
  color: #ffffff;
  border: 3px solid #ffffff;
}
.anmEffect #textInputCancelBtn,
#textInputCancelBtn.anmEffect,
.anmEffect #textConfirmCancelBtn,
#textConfirmCancelBtn.anmEffect {
  -webkit-animation-name: anmEffect;
  -webkit-animation-duration: 600ms;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-iteration-count: 1;
  z-index: 10;
}
@-webkit-keyframes anmEffect {
  0% {
    box-shadow: 0px 0px 1px 1px rgba(190, 246, 84, 0.4);
  }
  30% {
    box-shadow: 0px 0px 50px 20px rgba(190, 246, 84, 0.6);
  }
  100% {
    box-shadow: 0px 0px 50px 50px rgba(190, 246, 84, 0);
  }
}

/*::: 画像追加ボタン :::*/
#addImageButton {
  float: left;
  height: 100%;
}
#addImageButton > button#addCaption {
    box-shadow:none;
}

.stampBorder {
  position: absolute;
  margin-top: -2px;
  margin-left: -2px;
  border: 3px solid rgb(127, 176, 33);
  pointer-events: none;
  z-index: 6002;
}
.contentBorder {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: -2px;
  right: -2px;
  border: 3px dashed #dd621c;
}
.contentImageArea {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
  pointer-events: none;
}
.stampImage, .commentImage {
  max-height: 100%;
  max-width: 100%;
}

/******* ページ移動・追加ガイド *******/
.pageMoveNavigationArea {
  position: absolute;
  width: 40%;
  max-width: 600px;
  top: 85%;
  left: 0;
  right: 0;
  bottom: auto;
  margin: auto;
}
body.osMac .pageMoveNavigationArea {
  width: 36%;
}
@media screen and (max-width: 1280px) {
  .pageMoveNavigationArea {
    top: 76%;
  }
}
@media screen and (max-height: 900px) {
  .pageMoveNavigationArea {
    top: 86%;
  }
}
@media screen and (max-width: 1600px) and (min-height: 1200px) {
  .pageMoveNavigationArea {
    top: 78%;
  }
}
@media screen and (min-width: 1920px) and (max-height: 1080px) {
  .pageMoveNavigationArea {
    top: 87%;
  }
}
@media screen and (min-width: 1920px) and (min-height: 1200px) {
  .pageMoveNavigationArea {
    top: 83.5%;
  }
}
.moveNavigataionMessageArea {
  position: relative;
  background: #ccc;
  width: 100%;
  height: 6rem;
  padding: 1rem;
  padding-top: 1.8rem;
  margin: auto;
  background: #e5d6d9;
  text-align: center;
  border: 3px solid #dd621c;
  border-radius: 10px;
  box-sizing: border-box;
}
.moveNavigataionMessage {
  font-size: 1.6rem;
  color: #9c0d0d;
  line-height: 1.8rem;
}
body.osMac .moveNavigataionMessage {
  font-size: 1.2rem;
}
.leftBalloon:after,
.leftBalloon:before {
  top: 50%;
  left: -20px;
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.leftBalloon:after {
  border-top: 9px solid transparent;
  border-right: 18px solid #e5d6d9;
  border-bottom: 9px solid transparent;
  margin-top: -9px;
  margin-left: 2px;
}
.leftBalloon:before {
  border-top: 12px solid transparent;
  border-right: 23px solid #dd621c;
  border-bottom: 12px solid transparent;
  margin-top: -12px;
  margin-left: -3px;
}
.rightBalloon:after,
.rightBalloon:before {
  top: 50%;
  right: -20px;
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.rightBalloon:after {
  border-top: 9px solid transparent;
  border-left: 18px solid #e5d6d9;
  border-bottom: 9px solid transparent;
  margin-top: -9px;
  margin-right: 2px;
}
.rightBalloon:before {
  border-top: 12px solid transparent;
  border-left: 23px solid #dd621c;
  border-bottom: 12px solid transparent;
  margin-top: -12px;
  margin-right: -3px;
}
/******* 入れ替え写真選択ガイド *******/
.replacePicSelectNavigationArea {
  position: absolute;
  width: 220px;
  height: 6rem;
  top: 8%;
  left:0;
  right: 0;
  bottom: auto;
  margin: auto;
}
@media screen and (max-height: 900px) {
  .replacePicSelectNavigationArea {
    top: 4%;
  }
}
@media screen and (max-height: 800px) {
  .replacePicSelectNavigationArea {
    top: 3%;
  }
}
@media screen and (min-height: 1000px) {
  .replacePicSelectNavigationArea {
    top: 12%;
  }
}
@media screen and (min-width: 1280px) and (min-height: 900px) {
  .replacePicSelectNavigationArea {
    top: 5%;
  }
}
@media screen and (min-width: 1600px) and (min-height: 1200px) {
  .replacePicSelectNavigationArea {
    top: 8%;
  }
}
.setLayout.replacePicSelectNavigationArea {
  top: 8%;
  right: 10%;
}
.replaceNavigataionMessageArea {
  position: relative;
  width: 220px;
  height: 6rem;
  padding: 1rem;
  margin: auto;
  background: #dce9ef;
  text-align: center;
  border: 3px solid #ff0;
  border-radius: 30px;
  box-sizing: border-box;
}
.replaceNavigataionMessage {
    font-size: 1.6rem;
    color: #01916d;
}
body.osMac .replaceNavigataionMessage {
    font-size: 1.2rem;
}
.replaceNavigataionMessageArea:after, .replaceNavigataionMessageArea:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.replaceNavigataionMessageArea:after {
  border-top: 18px solid #dce9ef;
  border-right: 9px solid transparent;
  border-left: 9px solid transparent;
  margin-left: -9px;
}
 
.replaceNavigataionMessageArea:before {
  border-top: 23px solid #ff0;
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  margin-left: -12px;
}

/*** 入れ替え写真表示エリア ***/
.replacePicDispArea {
  position: absolute;
  width: 130px;
  height: 130px;
  top: 2%;
  bottom: auto;
  left:0;
  right: 0;
  margin: auto;
  text-align: center;
  background-color: transparent;
}
@media screen and (max-height: 899px) {
  .replacePicDispArea {
    width: 100px;
    height: 100px;
    top: 3%;
  }
}
@media screen and (min-height: 900px) {
  .replacePicDispArea {
    top: 6%;
  }
}
.replaceImageContainer {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  padding: 0;
  margin: auto;
  margin-top: 50%;
  transform: translateY(-50%);
}
.replacePic {
  max-width: 120px;
  max-height: 120px;
  background-color: transparent;
  border: 3px solid #dd621c;
}
@media screen and (max-height: 899px) {
  .replacePic {
    max-width: 100px;
    max-height: 100px;
  }
}
.replaceCancelButtonArea {
  position: absolute;
  width: 70px;
  height: 26px;
  bottom: -15px;
  left: -30px;
}
body.osMac .replaceCancelButtonArea {
  width: 80px;
}
.replaceCancelButton {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 11pt;
  color: #dd621c;
  border: 2px solid #dd621c;
  background-color: #fff;
}
body.osMac .replaceCancelButton {
  font-size: 10pt;
}
.replaceAddButtonArea {
  position: absolute;
  width: 60px;
  height: 26px;
  bottom: -15px;
  right: -30px;
}
.replaceAddButton {
  position: relative;
  width: 100%;
  height: 100%;
  padding-left: 18px;
  font-size: 11pt;
  color: #fff;
  border: 2px solid #fff;
  background-color: #dd621c;
  background-image: url("../common-img/img/svg/picture_add.svg");
  background-position: 4px center;
  background-size: 14px;
  background-repeat: no-repeat;
  -webkit-box-shadow: none;
  box-shadow: none;
}
body.osMac .replaceAddButton {
  font-size: 10pt;
}

/* 確認ポップアップ（外接・内接説明エリア） */
#cancelConfirmFittingWarnZone {
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    margin-top: 10px;
    position: relative;
    flex: 1 1 50%;
}
#cancelConfirmFittingWarnTitle {
    margin: 1%;
}
#cancelConfirmFittingWarnImage {
    margin: 20px 27.6% auto;
    max-width: 45%;
    max-height: 45%;
}
#cancelConfirmFittingWarnText {
    margin: 1%;
    line-height: 1.3;
}
body.osMac #cancelConfirmFittingWarnZone {
    font-size: 2.0rem;
}

#candidateImg {
    top:0px;
    left:0px;
    width:0px;
    height:0px;
    pointer-events: none;
    display:none
}
#templateImageArea{
    display:none;
}
/*******************************
 *   編集画面DOMツリー用(1280×1024)CSS
 * *****************************/
@-webkit-keyframes invertAnmForBg {
  0% {
    background-color: rgba(0, 0, 0, 0);
  }
  100% {
    background-color: rgba(0, 0, 0, 0.85);
  }
}
@-moz-keyframes invertAnmForBg {
  0% {
    background-color: rgba(0, 0, 0, 0);
  }
  100% {
    background-color: rgba(0, 0, 0, 0.85);
  }
}
@-ms-keyframes invertAnmForBg {
  0% {
    background-color: rgba(0, 0, 0, 0);
  }
  100% {
    background-color: rgba(0, 0, 0, 0.85);
  }
}
@keyframes invertAnmForBg {
  0% {
    background-color: rgba(0, 0, 0, 0);
  }
  100% {
    background-color: rgba(0, 0, 0, 0.85);
  }
}
@-webkit-keyframes invertAnmForFunctionArea {
  0% {
    background-color: rgba(0, 0, 0, 0.5);
  }
  100% {
    background-color: rgba(255, 255, 255, 0.5);
  }
}
@-moz-keyframes invertAnmForFunctionArea {
  0% {
    background-color: rgba(0, 0, 0, 0.5);
  }
  100% {
    background-color: rgba(255, 255, 255, 0.5);
  }
}
@-ms-keyframes invertAnmForFunctionArea {
  0% {
    background-color: rgba(0, 0, 0, 0.5);
  }
  100% {
    background-color: rgba(255, 255, 255, 0.5);
  }
}
.trimmingBody {
    background-color: #808080;
}
._pnInvisible {
  display: none;
}
._pnBlushSelectArea {
  padding-bottom: 0;
}
/* *************** 編集画面　関数・プロパティ ************** */
/* 操作ボタンエリア */
/* スタンプ表示エリア */
/*1行あたり表示ボタン数の調整*/
/*ボタン上下間隔の調整*/
/*ボタンサイズの調整*/
/*ボタンに対する表示画像サイズの調整*/
._trimmingAreaLine {
  top: 0;
  margin: 0 5%;
  width: 100%;
}
/* *************** メインコンテンツエリア設定 ************** */
#mainContentsTrimming {
  display: flex;
  margin: 20px 0 110px 24px;
  background-color: transparent;
  box-shadow: none;
}
#line1,
#line3,
#line4 {
  margin: 0 5%;
  top: 0;
}
/* ***************  画像編集エリア設定  ************** */
#printAreaCaptionZone {
  position: absolute;
  width: 100%;
  text-align: center;
  top: -3.5rem;
  z-index: 10;
}
@media screen and (max-width: 1280px) {
  #printAreaCaptionZone {
    font-size: 2rem;
  }
}
@media screen and (min-width: 1281px) and (max-width: 1600px) {
  #printAreaCaptionZone {
    font-size: 2.4rem;
  }
}
@media screen and (min-width: 1601px) {
  #printAreaCaptionZone {
    font-size: 2.6rem;
  }
}
@media screen and (max-height: 900px) {
  #printAreaCaptionZone {
    font-size: 2rem;
  }
}
#trimmingEditArea {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
}
.exifInfoArea {
    position:absolute;
    top:0;
    left:0;
    display: flex;
    width: 100%;
    height: 30px;
}
.exifInfoIcon {
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 10px 0 0;
    background-image: url(../common-img/img/svg/icon_exif.svg);
    background-position: center;
    background-size: 30px;
    background-repeat: no-repeat;
}
.exifInfoText {
    width: calc(100% - 40px);
    text-align: left;
    font-size: 16px;
    color: #fff;
    display: flex;
    align-items: center;
}
#trimmingDisplayArea {
  position: relative;
  top: 40px;
  height: calc(100% -  40px);
  flex: 1 1 30%;
  margin: 0 auto;
}
.correctionOrderSelected #trimmingDisplayArea {
    height: calc(100% - 94px);
}
.trimmingImageArea {
    display: inline-block;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%)translateY(-50%);
    transform: translateX(-50%)translateY(-50%);
}
.trimmingImageDrawArea {
    width: auto;
    height: auto;
    pointer-events: auto;
    margin: auto;
    background-color: #fff;

    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    pointer-events: none;
}

.trimmingMode .trimmingImageDrawArea {
    pointer-events: auto;
}

.trimmingMode #selectTrimmingArea {
    pointer-events: none;
}

.trimmingCautionIconArea {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    z-index:1;
    pointer-events: none;
}
.trimmingAreaRotateA{
    right: auto;
    left: 10px;
    transform: rotate(270deg);
}
.trimmingAreaRotateB{
    top: auto;
    right: auto;
    bottom: 10px;
    left: 10px;
    transform: rotate(180deg);
}
.trimmingAreaRotateC{
    top: auto;
    bottom: 10px;
    transform: rotate(90deg);
}
.trimmingCautionIconArea > span.trimmingCautionIcon {
  display: block;
  width: inherit;
  height: inherit;
  background-image: url("../common-img/img/svg/status_icon_caution.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}
#guideArea {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: none;
}
/*アスペクト設定プレビューエリア*/
.aspectCanvas {
    display: none;
}
.aspectSettingPreviewArea {
    pointer-events: none;
    display: none;
}
.aspectSettingPreviewPosArea {
    display: none;
}
.aspectSettingPreviewBtn {
    pointer-events: none;
    display: none;
}

.selectEditAreaItem {
    position: absolute;
}
    .selectEditAreaItem.editDiv {
        width: 70%;
        height: 20%;
        background-color: rgb(255,0,0);
        color: rgb(255,255,255);
        display: none;
        margin-left: 3px;
        margin-top: 3px;
        min-width: 70px;
        min-height: 70px;
    }
    .selectEditAreaItem.editImg {
        width: 100%;
        height: 100%;
    }
/**************** 操作ボタンエリア設定 ***************/
#controlButtonArea {
  position: relative;
  width: 0;
  height: 0;
  right: 0;
  box-sizing: border-box;
  border: solid 4px #fff;
  background-color: #414141;
  color: #ffffff;
  transition: 300ms opacity ease;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  transform: scale(0);
  opacity: 0;
}
.editMain #controlButtonArea {
  width: 268px;
  height: 100%;
  opacity: 1;
  transform: scale(1);
  margin: 0 0 0 40px;
}
#closePanelBtnZone {
  position: absolute;
  top: -4px;
  margin: auto;
  height: 80px;
  left: -20px;
  width: 20px;
  z-index: 2;
  background-color:#fff;
}
#closePanelBtn {
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 1;
  background-image: url(../common-img/img/svg/icn_palette_close.svg);
  background-position:center;
  background-repeat:no-repeat;
  background-size:16px;
}
.thumbMain #closePanelBtn {
  opacity: 0;
}
/**************** トリミング機能操作ボタンエリア設定 ***************/
#trimmingButtonArea {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow: auto;
}
/**************** トリミング機能_上部_回転機能操作ボタンエリア設定 ***************/
/*画像だけ回転エリア*/
#rotateSettingArea,
#zoomSettingArea,
#shiftSettingArea,
#aspectSettingArea,
#guideSettingArea,
#allDeleteBtnArea{
  font-size: 2rem;
  color: #fff;
  position: relative;
  width: auto;
  height: auto;
  padding: 14px 0 14px 40px;
  box-sizing: border-box;
  display: block;
}
#aspectSettingArea {
    display: none;
    width: 260px;
    padding: 14px 40px 14px 40px;
}
.aspectSelectPulldown {
    -webkit-appearance: none;
    position: relative;
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    border: solid 1px #fff;
    border-radius: 0px;
    padding: 0 6px;
    background-color: #fff;
    font-size: 14px;
    color: #000;
    letter-spacing: -1px;
    cursor: pointer;
    margin: 0;
    background-image: url(../common-img/img/svg/btn_icon_pulldown.svg);
    background-position: right;
    background-repeat: no-repeat;
    background-size: 30px;
}
    .aspectSelectPulldown::-ms-expand {
        display: none;
    }
    .aspectSelectPulldown > option {
        font-size: 14px;
        color: #000;
    }
    .aspectSelectPulldown > option:disabled {
        color: #b3b3b3;
    }
#allDeleteBtnArea {
    padding: 20px 0 14px 16px;
}
#rotateAdjustCaptionZone,
#zoomAdjustCaptionZone,
#aspectAdjustCaptionZone,
#shiftSettingCaptionZone,
#guideBtnCaptionZone {
    width: 100%;
    height: 30px;
}
#guideBtnCaptionZone {
    display:flex;
}
#rotateAdjustCaption,
#zoomAdjustCaption,
#aspectAdjustCaption,
#shiftSettingCaption,
#guideBtnCaption {
    display:block;
    text-align: left;
    font-size: 16px;
}
.guideBtnCaptionIcon {
    margin: 0 5px;
    display: block;
    width: 20px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../common-img/img/svg/icn_guide.svg);
}
#rotateAdjustButtonArea {
  width: 100%;
  height: auto;
  display: flex;
}
#add90DegreeZone {
    margin: 0 9px 0 0;
}
#sub90DegreeZone {
    margin: 0 10px 0 0;
}
#add1DegreeZone {
    margin: 0 9px 0 0;
}
#sub1DegreeZone {
    margin: 0;
}
#add90DegBtn,
#sub90DegBtn,
#add1DegBtn,
#sub1DegBtn {
  display:block;
  margin:auto;
  width:38px;
  height:38px;
  border:solid 1px #e4f0ef;
  background-color:#01916d;
  background-position:center;
  background-repeat:no-repeat;
  background-size:34px;
}
.anmEffect #add90DegBtn,
.anmEffect #sub90DegBtn,
.anmEffect #add1DegBtn,
.anmEffect #sub1DegBtn,
#add90DegBtn.anmEffect,
#sub90DegBtn.anmEffect,
#add1DegBtn.anmEffect,
#sub1DegBtn.anmEffect {
  -webkit-animation-name: anmEffect;
  -webkit-animation-duration: 600ms;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-iteration-count: 1;
  z-index: 10;
}
@-webkit-keyframes anmEffect {
  0% {
    box-shadow: 0px 0px 1px 1px rgba(190, 246, 84, 0.4);
  }
  30% {
    box-shadow: 0px 0px 50px 20px rgba(190, 246, 84, 0.6);
  }
  100% {
    box-shadow: 0px 0px 50px 50px rgba(190, 246, 84, 0);
  }
}
#add90DegBtn:active,
#sub90DegBtn:active,
#add1DegBtn:active,
#sub1DegBtn:active {
  background-color: #016950;
}
#add90DegBtn {
  background-image: url("../common-img/img/svg/icn_rotate_90_r.svg");
}
#add1DegBtn {
    background-image: url("../common-img/img/svg/icn_rotate_1_r.svg");
}
#sub90DegBtn {
  background-image: url("../common-img/img/svg/icn_rotate_90_l.svg");
}
#sub1DegBtn {
    background-image: url("../common-img/img/svg/icn_rotate_1_l.svg");
}
.smallBtnCapZone {
  text-align: center;
  margin-top: 0.5rem;
  /*font-size: 1.7rem;*/
}
.smallBtnCap {
  font-size: 1.4rem;
}
/**************** トリミング機能_上部_拡大機能操作ボタンエリア設定 ***************/
#trimmingAreaLine2 {
  top: 0;
  margin: auto;
  width: 234px;
}
#zoomAdjustButtonArea {
    display: flex;
}
#add5PerZone,
#sub5PerZone {
    position: relative;
    width: 104px;
    height: 100%;
}
#add5PerBtn,
#sub5PerBtn {
  width: 50px;
  height: 38px;
  border:solid 1px #e4f0ef;
  background-color: #01916d;
  background-size: 46px;
  background-repeat: no-repeat;
  background-position: center;
}
.anmEffect #add5PerBtn,
.anmEffect #sub5PerBtn,
#add5PerBtn.anmEffect,
#sub5PerBtn.anmEffect {
  -webkit-animation-name: anmEffect;
  -webkit-animation-duration: 600ms;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-iteration-count: 1;
  z-index: 10;
}
@-webkit-keyframes anmEffect {
  0% {
    box-shadow: 0px 0px 1px 1px rgba(190, 246, 84, 0.4);
  }
  30% {
    box-shadow: 0px 0px 50px 20px rgba(190, 246, 84, 0.6);
  }
  100% {
    box-shadow: 0px 0px 50px 50px rgba(190, 246, 84, 0);
  }
}
#add5PerBtn:active,
#sub5PerBtn:active {
  background-color: #016950;
}
#add5PerBtn {
  background-image: url("../common-img/img/svg/icn_zoom_l.svg");
}
#sub5PerBtn {
  background-image: url("../common-img/img/svg/icn_zoom_s.svg");
}
.add5PerBtnCapZone,
.sub5PerBtnCapZone {
    position: absolute;
    top: 50%;
    left: 60px;
    transform: translateY(-50%);
}
.sub5PerBtnCapZone {
    right: 5px;
}
.add5PerCap,
.sub5PerCap {
    font-size: 16px;
    color: #fff;
}
/**************** トリミング機能_下部操作エリア設定 ***************/
/**************** トリミング機能_下部_移動エリア設定 ***************/
#shiftSettingBtnZone {
    position: relative;
    width: 140px;
    height: 48px;
}
.shiftButton {
  position: absolute;
  border:solid 1px #e4f0ef;
  background-size: 30px;
  background-color: #01916d;
  background-repeat: no-repeat;
  background-position: center;
}
.anmEffect .shiftButton,
.shiftButton.anmEffect {
  -webkit-animation-name: anmEffect;
  -webkit-animation-duration: 600ms;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-iteration-count: 1;
  z-index: 10;
}
@-webkit-keyframes anmEffect {
  0% {
    box-shadow: 0px 0px 1px 1px rgba(190, 246, 84, 0.4);
  }
  30% {
    box-shadow: 0px 0px 50px 20px rgba(190, 246, 84, 0.6);
  }
  100% {
    box-shadow: 0px 0px 50px 50px rgba(190, 246, 84, 0);
  }
}
.shiftButton:active {
  background-color: #016950;
}
#upButton {
  top:0;
  left:38px;
  width: calc(100% - 76px);
  height: 24px;
  background-image: url("../common-img/img/svg/icn_move_u.svg");
}
.anmEffect #upButton,
#upButton.anmEffect {
  -webkit-animation-name: anmEffect;
  -webkit-animation-duration: 600ms;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-iteration-count: 1;
  z-index: 10;
}
@-webkit-keyframes anmEffect {
  0% {
    box-shadow: 0px 0px 1px 1px rgba(190, 246, 84, 0.4);
  }
  30% {
    box-shadow: 0px 0px 50px 20px rgba(190, 246, 84, 0.6);
  }
  100% {
    box-shadow: 0px 0px 50px 50px rgba(190, 246, 84, 0);
  }
}
#leftButton {
    top: 0;
    left: 0;
    width: 38px;
    height: 100%;
    background-image: url("../common-img/img/svg/icn_move_l.svg");
}
.anmEffect #leftButton,
#leftButton.anmEffect {
  -webkit-animation-name: anmEffect;
  -webkit-animation-duration: 600ms;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-iteration-count: 1;
  z-index: 10;
}
@-webkit-keyframes anmEffect {
  0% {
    box-shadow: 0px 0px 1px 1px rgba(190, 246, 84, 0.4);
  }
  30% {
    box-shadow: 0px 0px 50px 20px rgba(190, 246, 84, 0.6);
  }
  100% {
    box-shadow: 0px 0px 50px 50px rgba(190, 246, 84, 0);
  }
}
#rightButton {
    top: 0;
    right: 0;
    width: 38px;
    height: 100%;
    background-image: url("../common-img/img/svg/icn_move_r.svg");
}
.anmEffect #rightButton,
#rightButton.anmEffect {
  -webkit-animation-name: anmEffect;
  -webkit-animation-duration: 600ms;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-iteration-count: 1;
  z-index: 10;
}
@-webkit-keyframes anmEffect {
  0% {
    box-shadow: 0px 0px 1px 1px rgba(190, 246, 84, 0.4);
  }
  30% {
    box-shadow: 0px 0px 50px 20px rgba(190, 246, 84, 0.6);
  }
  100% {
    box-shadow: 0px 0px 50px 50px rgba(190, 246, 84, 0);
  }
}
#downButton {
    top: 24px;
    left: 38px;
    width: calc(100% - 76px);
    height: 24px;
    background-image: url("../common-img/img/svg/icn_move_d.svg");
}
.anmEffect #downButton,
#downButton.anmEffect {
  -webkit-animation-name: anmEffect;
  -webkit-animation-duration: 600ms;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-iteration-count: 1;
  z-index: 10;
}
@-webkit-keyframes anmEffect {
  0% {
    box-shadow: 0px 0px 1px 1px rgba(190, 246, 84, 0.4);
  }
  30% {
    box-shadow: 0px 0px 50px 20px rgba(190, 246, 84, 0.6);
  }
  100% {
    box-shadow: 0px 0px 50px 50px rgba(190, 246, 84, 0);
  }
}
#shiftSettingBottomCaption{
    font-size:14px;
    color:#fff;
    margin:10px 0;
    letter-spacing: -1px;
}
/* ガイド表示ボタン設定 */
#guideBtnZone {
    width: 140px;
    height: 38px;
}
.guideRadioGroup {
    display:flex;
    width:100%;
    height:100%;
}
.guideRadioGroup > input[type=radio] {
    display: none;
}
.guideBtn {
    display: block;
    width: 50%;
    height: 100%;
    line-height: 34px;
    font-size: 16px;
    color: #01916d;
    padding: 0 0 0 34px;
    box-sizing: border-box;
    border: solid 1px #e4f0ef;
    background-color: #dce9ef;
    background-image: none;
    background-position: 5px;
    background-repeat: no-repeat;
    background-size: 24px;
}
.guideBtn.disable {
    color: #fff;
}
    .guideBtn.guideBtnRight {
        padding: 0 0 0 8px;
        background-position: 42px;
    }
input[type=radio]:checked + .guideBtn {
    color: #fff;
    background-color: #01916d;
    background-image: url(../common-img/img/svg/icn_check_small.svg);
}
#allDeleteBtnZone {
    width: 236px;
    height: 38px;
}
#allDeleteBtn {
    display: block;
    width: 100%;
    height: 100%;
    line-height:36px;
    text-align:center;
    font-size:16px;
    color:#fff;
    padding:0 0 0 40px;
    box-sizing:border-box;
    border: solid 1px #e4f0ef;
    background-color: #01916d;
    background-image: url(../common-img/img/svg/icn_reset.svg);
    background-position: 20px;
    background-size: 30px;
    background-repeat: no-repeat;
}
.anmEffect #allDeleteBtn,
#allDeleteBtn.anmEffect {
  -webkit-animation-name: anmEffect;
  -webkit-animation-duration: 600ms;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-iteration-count: 1;
  z-index: 10;
}
@-webkit-keyframes anmEffect {
  0% {
    box-shadow: 0px 0px 1px 1px rgba(190, 246, 84, 0.4);
  }
  30% {
    box-shadow: 0px 0px 50px 20px rgba(190, 246, 84, 0.6);
  }
  100% {
    box-shadow: 0px 0px 50px 50px rgba(190, 246, 84, 0);
  }
}
#allDeleteBtn:active {
  background-color: #016950;
}

/**************** 色調選択エリア ***************/
#effectButtonArea {
    width: 100%;
    height: 100%;
    padding: 14px 5px 14px 10px;
    box-sizing: border-box;
}
.effectSelectMsg {
    display: block;
    width: 100%;
    height: 40px;
    font-size: 14px;
    color: #fff;
    text-align: left;
    line-height: 1.4;
}
#effectListArea {
    display: block;
    width: 100%;
    height: calc(100% - 70px);
    overflow-x: hidden;
    overflow-y: auto;
}
    #effectListArea > ul > li {
        position: relative;
    }
.effectButton {
    position: relative;
    display: block;
    width: -webkit-calc(100% - 5px);
    width: calc(100% - 5px);
    height: 120px;
    margin: 10px 0;
    background-color: #01916d;
    border: solid 1px #e4f0ef;
    border-radius: 0px;
    font-size: 14px;
    color: #fff;
    text-align: left;
    padding: 20px 10px 10px 10px;
    box-sizing: border-box;
    line-height: 1.2;
}
    .effectButton > span {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: 30px;
        font-size: 18px;
        color: #fff;
        font-weight: bold;
        text-align: center;
        line-height: 30px;
        border-bottom: solid 1px #fff;
    }
/*Macの字崩れ調整*/
.osMac .effectSelectMsg,
.osMac .effectButton {
    letter-spacing: -1px;
}
    .osMac .effectButton > span {
        letter-spacing: -1.2px;
    }
.effectSelectedMark {
    display: none;
    position: absolute;
    top: 0px;
    left: 10px;
    width: 30px;
    height: 30px;
    background-image: url(../common-img/img/svg/icn_check_green.svg);
    background-position: center;
    background-size: 26px;
    background-repeat: no-repeat;
}
.selected .effectButton {
    border: solid 1px #01916d;
    background-color: #fff;
    color: #01916d;
}
    .selected .effectButton > span {
        color: #01916d;
        border-bottom: solid 1px #01916d;
    }
.selected .effectSelectedMark {
    display:block;
}
.effectSelectbottomArea {
    display: block;
    width: 100%;
    height: 30px;
    position: relative;
}
.effectSelectLink {
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    text-decoration: underline;
    position: absolute;
    bottom: 0;
    right: 5px;
}
/**************** 機能選択エリア設定 ***************/
.functions {
    position: absolute;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}
/* 機能選択エリア　下部設定 */
#downFunctionArea {
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 100%;
  height: 6rem;
}
.fnSmallBtnZone {
  width: 5.5rem;
  height: 5.5rem;
}
.fnSmallBtn {
  padding: 1.6rem;
  padding-top: 1.2rem;
  line-height: 2.8rem;
  min-width: 140px;
  outline: none;
  font-size: 3rem;
  font-family: "Meiryo UI", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  transition: all 200ms ease;
  color: #ffffff;
  transition: none;
  min-width: 0;
  padding: 31px 0 0 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  background-position: top;
  background-size: 65%;
  font-size: 1.2rem;
}
.anmEffect .fnSmallBtn,
.fnSmallBtn.anmEffect {
  -webkit-animation-name: anmEffect;
  -webkit-animation-duration: 600ms;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-iteration-count: 1;
  z-index: 10;
}
@-webkit-keyframes anmEffect {
  0% {
    box-shadow: 0px 0px 1px 1px rgba(190, 246, 84, 0.4);
  }
  30% {
    box-shadow: 0px 0px 50px 20px rgba(190, 246, 84, 0.6);
  }
  100% {
    box-shadow: 0px 0px 50px 50px rgba(190, 246, 84, 0);
  }
}
.selected .fnSmallBtn,
.fnSmallBtn.selected {
  background-color: #dd621c;
}
/**************** 固定ボタン表示エリア設定 ***************/
/* 変更履歴操作ボタン領域設定 */
#trimmingOperationControlZone {
  position: absolute;
  width: 90px;
  height: 81px;
  bottom: 0;
  right: 22px;
  transition: 250ms right ease;
  z-index: 10;
}
#trimmingUndoButtonZone {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 38px;
}
#trimmingUndoButton {
  width: 100%;
  height: 100%;
  line-height: 38px;
  border: solid 1px #e4f0ef;
  border-radius: 0px;
  background-color: #01916d;
  background-image: url(../common-img/img/svg/icn_undo.svg); 
  background-position: 2px;
  background-repeat: no-repeat;
  background-size: 28px;
  padding: 0 0 0 24px;
  box-sizing: border-box;
  font-size: 14px;
  color: #fff;
}
#trimmingRedoButtonZone {
  position: absolute;
  top: 43px;
  width: 100%;
  height: 38px;
}
#trimmingRedoButton {
  width: 100%;
  height: 100%;
  line-height: 38px;
  border: solid 1px #fff;
  border-radius: 0px;
  background-color: #01916d;
  background-image: url(../common-img/img/svg/icn_redo.svg); 
  background-position: 2px;
  background-repeat: no-repeat;
  background-size: 28px;
  padding: 0 0 0 24px;
  box-sizing: border-box;
  font-size: 14px;
  color: #fff;
}
    #trimmingUndoButton.disable {
        opacity: 1 !important;
        border: solid 1px #cdcdcd;
        background-color: #808080;
        background-image: url(../common-img/img/svg/icn_undo_disable.svg);
        color: #cdcdcd;
    }
    #trimmingRedoButton.disable {
        opacity: 1 !important;
        border: solid 1px #cdcdcd;
        background-color: #808080;
        background-image: url(../common-img/img/svg/icn_redo_disable.svg);
        color: #cdcdcd;
    }
/**************** 編集機能表示エリア設定 ***************/
.trimmingFunctionAreaWrapper {
  position: relative;
  top: -20px;
  flex: 0 0 124px;
  height: calc(100% + 44px);
  pointer-events:none;
}
#trimmingFunctionArea {
    position: absolute;
    width: 0;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 130px;
    background-color: #414141;
}
@media screen and (max-width: 1281px) {
  #trimmingFunctionArea {
    bottom: 110px;
  }
}
.trimmingEditCategorySelected #trimmingFunctionArea {
  right: 0;
  width: 96px;
}
#trimmingFunctionButtonArea {
  position: absolute;
  top: 60px;
  right: 0;
  width: 124px;
  height: calc(100% - 60px);
}
.trimmingFnCategories {
    display: block;
    width: 100%;
    height: 100%;
}
.trimmingFnCategory {
    display: block;
    width: 100%;
    height: 100%;
}
.openCategory.trimmingFnCategory dt > button {
  background-color: #dd621c;
}
.trimmingFnCategorySeletedIconArea {
  display: none;
  background-image: url("../common-img/img/sample_TBD.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: cover;
  width: 60px;
  height: 60px;
  position: absolute;
  top: -50px;
  left: 90px;
}
.openCategory .trimmingFnCategorySeletedIconArea {
  display: block;
}
.trimmingFnCategoryIcon {
  display: block;
  width: 100%;
  height: 100%;
  margin: auto;
}
#trimmingFnCategory1 .trimmingFnCategoryIconArea,
#trimmingFnCategory1 .trimmingFnCategorySeletedIconArea {
  background-image: url("../common-img/img/svg/category_icon_adjustment.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
#trimmingFnCategory2 .trimmingFnCategoryIconArea,
#trimmingFnCategory2 .trimmingFnCategorySeletedIconArea {
  background-image: url("../common-img/img/svg/category_icon_decoration.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
#trimmingFnCategory3 .trimmingFnCategoryIconArea,
#trimmingFnCategory3 .trimmingFnCategorySeletedIconArea {
  background-image: url("../common-img/img/svg/category_icon_text.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
#trimmingFnCategory4 .trimmingFnCategoryIconArea,
#trimmingFnCategory4 .trimmingFnCategorySeletedIconArea {
  background-image: url("../common-img/img/svg/category_icon_template.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.trimmingFnBtnArea {
    margin: 0 0 16px 0;
}
#effectFnButtonArea.trimmingFnBtnArea {
    margin: 94px 0 16px 0;
}
.fnBtn {
    display: block;
    width: 90px;
    height: 78px;
    box-sizing: border-box;
    padding: 50px 0 0 0;
    margin: 0 22px 16px auto;
    background-color: #01916d;
    border: solid 1px #e4f0ef;
    cursor: pointer;
    font-size: 14px;
    text-align: center;
    letter-spacing: -1px;
    color: #fff;
    pointer-events: auto;
}
.selected .fnBtn {
    border: solid 1px #fff;
    background-color: #fff;
    width: 100%;
    color: #01916d;
}
#fnBtn1 {
  background-image: url("../common-img/img/svg/icn_trim.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 80px;
  background-position: top;
  background-position: center -10px;
}
.selected #fnBtn1 {
    background-image: url("../common-img/img/svg/icn_trim_green.svg");
}
#fnBtn2 {
  background-image: url("../common-img/img/svg/icn_color.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 80px;
  background-position: center -10px;
}
.selected #fnBtn2 {
    background-image: url("../common-img/img/svg/icn_color_green.svg");
}
/**************** 自動補正指示設定 ***************/
.autoEffectSelect {
    display: none;
    transform: scale(0);
    opacity: 0;
    width:100%;
    height:100%;
}
.autoEffectFnBtn {
    background-image: url(../common-img/img/svg/icn_color.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-size: 120px;
    background-position: center -15px;
}
.selected .autoEffectFnBtn {
    background-image: url(../common-img/img/svg/icn_color_green.svg);
}
.autoEffectOrderCloseBtn {
    position: absolute;
    bottom: 24px;
    right: 22px;
    width: 90px;
    height: 38px;
    line-height: 36px;
    text-align: center;
    border: solid 1px #e4f0ef;
    background-color: #01916d;
    font-size: 16px;
    color: #fff;
}
/*コンテンツ*/
.autoEffectTabLabel {
    width: 100%;
    height: 30px;
    background-color: #fff;
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #01916d;
    line-height: 26px;
    position: relative;
}
.autoEffectTabLabelIcon {
    width: 26px;
    height: 26px;
    display: block;
    position: absolute;
    top: 0;
    left: 10px;
    background-image: url(../common-img/img/svg/icn_check_green.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.autoEffectScrollArea {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 100%;
    margin:10px 0;
    height: calc(100% - 50px);
    overflow: auto;
    padding: 5px;
    box-sizing: border-box;
}
.autoEffectList {
    position: relative;
    display: block;
    width: 100.5px;
    height: 157.5px;
    background-color: rgba(255,255,255,0.5);
    margin: 5px;
}
    .autoEffectList.selected {
        background-color: #dce9ef;
    }
.autoEffectTmb {
    display:block;
    margin:auto;
    width:90%;
    height:127.5px;
    background-position: center 25px;
    background-size: contain;
    background-repeat: no-repeat;
}
.autoEffectTmbLabel {
    font-size: 14px;
    color: #444;
    text-align: center;
    line-height: 30px;
    width: 100%;
    height: 30px;
}
.autoEffectSelectedMarkPos {
    display:none;
    position: absolute;
    top: -5px;
    left: -5px;
}
.autoEffectList.selected > .autoEffectSelectedMarkPos {
    display: block;
}
.autoEffectSelectedMark {
    position:relative;
    width: 26px;
    height: 26px;
    display: block;
    border-radius: 4px;
    background-color: #01916d;
}
.autoEffectSelectedMarkIcon {
    position: absolute;
    top: -5px;
    right: -10px;
    width:100%;
    height:100%;
    background-image: url(../common-img/img/svg/icn_check.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
/**************** プルダウン補正指示設定 ***************/
.effectSelect {
    display: none;
    transform: scale(0);
    opacity: 0;
    width: 100%;
    height: 100%;
}
.effectFnBtn {
    background-image: url(../common-img/img/svg/icn_color.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-size: 80px;
    background-position: center -10px;
}
.selected .effectFnBtn {
    background-image: url(../common-img/img/svg/icn_color_green.svg);
}
.correctionOrderCloseBtn {
    position: absolute;
    bottom: 24px;
    right: 22px;
    width: 90px;
    height: 38px;
    line-height: 36px;
    text-align: center;
    border: solid 1px #e4f0ef;
    background-color:#01916d;
    font-size: 16px;
    color: #fff;
    pointer-events:auto;
}

/*コンテンツ*/
.orderArea {
    display: block;
    width: 100%;
    height: 439px;
}
.orderStep {
    position: absolute;
    left: 14px;
    display: block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: left;
    font-size: 16px;
}
    .orderStep.firstStep {
        top: 37px;
    }
    .orderStep.secondStep {
        top: 107px;
    }
    .orderStep.thirdStep {
        top: 269px;
    }
.orderContentArea {
    display: block;
    width: 100%;
    height: calc(100% - 439px);
    background-color: #141414;
    padding: 10px;
    box-sizing: border-box;
}
.orderAreaLabel {
    display: block;
    width: 100%;
    height: 30px;
    line-height: 26px;
    text-align: center;
    font-size:14px;
    color:#01916d;
    font-weight:bold;
    background-color:#fff;
    position:relative;
}
.orderArea {
    display: block;
    width: 100%;
    height: calc(100% - 30px);
    overflow-x: hidden;
    overflow-y: auto;
}
.orderAreaLabelIcon {
    width: 26px;
    height: 26px;
    display: block;
    position: absolute;
    top: 0;
    left: 10px;
    background-image: url(../common-img/img/svg/icn_check_green.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.orderSelectArea {
    display: block;
    width: 100%;
    height: auto;
    padding: 0 24px;
    box-sizing: border-box;
}
    .orderSelectArea > form {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        height: auto;
        padding: 10px 0;
        box-sizing: border-box;
        border-bottom: solid 1px #000;
    }
    .orderSelectArea > form:first-of-type {
        padding: 10px 0 0 0;
    }
.orderSelectPulldownLabel {
    display: block;
    width: 100%;
    height: 14px;
    font-size: 14px;
    color: #fff;
    text-align: left;
    line-height: 14px;
    margin: 0 0 10px 0;
}
    .orderSelectPulldownLabel.areaType {
        width: 65px;
        margin: 0;
        height: 30px;
        line-height: 30px;
    }
.orderSelectAreaSelectBtnArea {
    margin: 10px auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 152px;
    height: 152px;
    box-sizing: border-box;
    border: solid 1px #fff;
}
.orderSelectAreaSelectBtn {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border: solid 1px #fff;
    color: #fff;
    background-color: #01916d;
    background-position: center 6px;
    background-repeat: no-repeat;
    background-size: 22px;
}
    .orderSelectAreaSelectBtn > span {
        position: absolute;
        bottom: 6px;
        left: 50%;
        transform: translateX(-50%);
        display: inline-block;
        width: auto;
        height: auto;
        word-break: keep-all;
        font-size: 10px;
        text-align: center;
        letter-spacing: -0.5px;
    }
    .orderSelectAreaSelectBtn.selected {
        background-color: #fff;
        color: #01916d;
    }
    .orderSelectAreaSelectBtn.quartering {
        width: 75px;
        height: 75px;
        background-size: 30px;
        background-position: center 12px;
    }
        .orderSelectAreaSelectBtn.quartering > span {
            bottom: 10px;
            font-size: 12px;
        }
    .orderSelectAreaSelectBtn.leftTop {
        background-image: url(../common-img/img/svg/icn_area_lefttop.svg);
    }
    .orderSelectAreaSelectBtn.disable.leftTop {
        background-image: url(../common-img/img/svg/icn_area_disableLefttop.svg);
    }
    .orderSelectAreaSelectBtn.selected.leftTop {
        background-image: url(../common-img/img/svg/icn_area_selectLefttop.svg);
    }
    .orderSelectAreaSelectBtn.centerTop {
        background-image: url(../common-img/img/svg/icn_area_centertop.svg);
    }
    .orderSelectAreaSelectBtn.disable.centerTop {
        background-image: url(../common-img/img/svg/icn_area_disableCentertop.svg);
    }
    .orderSelectAreaSelectBtn.selected.centerTop {
        background-image: url(../common-img/img/svg/icn_area_selectCentertop.svg);
    }
    .orderSelectAreaSelectBtn.rightTop {
        background-image: url(../common-img/img/svg/icn_area_righttop.svg);
    }
    .orderSelectAreaSelectBtn.disable.rightTop {
        background-image: url(../common-img/img/svg/icn_area_disableRighttop.svg);
    }
    .orderSelectAreaSelectBtn.selected.rightTop {
        background-image: url(../common-img/img/svg/icn_area_selectRighttop.svg);
    }
    .orderSelectAreaSelectBtn.left {
        background-image: url(../common-img/img/svg/icn_area_left.svg);
    }
    .orderSelectAreaSelectBtn.disable.left {
        background-image: url(../common-img/img/svg/icn_area_disableLeft.svg);
    }
    .orderSelectAreaSelectBtn.selected.left {
        background-image: url(../common-img/img/svg/icn_area_selectLeft.svg);
    }
    .orderSelectAreaSelectBtn.center {
        background-image: url(../common-img/img/svg/icn_area_center.svg);
    }
    .orderSelectAreaSelectBtn.disable.center {
        background-image: url(../common-img/img/svg/icn_area_disableCenter.svg);
    }
    .orderSelectAreaSelectBtn.selected.center {
        background-image: url(../common-img/img/svg/icn_area_selectCenter.svg);
    }
    .orderSelectAreaSelectBtn.right {
        background-image: url(../common-img/img/svg/icn_area_right.svg);
    }
    .orderSelectAreaSelectBtn.disable.right {
        background-image: url(../common-img/img/svg/icn_area_disableRight.svg);
    }
    .orderSelectAreaSelectBtn.selected.right {
        background-image: url(../common-img/img/svg/icn_area_selectRight.svg);
    }
    .orderSelectAreaSelectBtn.leftBottom {
        background-image: url(../common-img/img/svg/icn_area_leftBottom.svg);
    }
    .orderSelectAreaSelectBtn.disable.leftBottom {
        background-image: url(../common-img/img/svg/icn_area_disableLeftbottom.svg);
    }
    .orderSelectAreaSelectBtn.selected.leftBottom {
        background-image: url(../common-img/img/svg/icn_area_selectLeftbottom.svg);
    }
    .orderSelectAreaSelectBtn.centerBottom {
        background-image: url(../common-img/img/svg/icn_area_centerbottom.svg);
    }
    .orderSelectAreaSelectBtn.disable.centerBottom {
        background-image: url(../common-img/img/svg/icn_area_disableCenterbottom.svg);
    }
    .orderSelectAreaSelectBtn.selected.centerBottom {
        background-image: url(../common-img/img/svg/icn_area_selectCenterbottom.svg);
    }
    .orderSelectAreaSelectBtn.rightBottom {
        background-image: url(../common-img/img/svg/icn_area_rightbottom.svg);
    }
    .orderSelectAreaSelectBtn.disable.rightBottom {
        background-image: url(../common-img/img/svg/icn_area_disableRightbottom.svg);
    }
    .orderSelectAreaSelectBtn.selected.rightBottom {
        background-image: url(../common-img/img/svg/icn_area_selectRightbottom.svg);
    }
    .orderSelectAreaSelectBtn.leftHalf {
        background-image: url(../common-img/img/svg/icn_area_lefthalf.svg);
    }
    .orderSelectAreaSelectBtn.disable.leftHalf {
        background-image: url(../common-img/img/svg/icn_area_disableLefthalf.svg);
    }
    .orderSelectAreaSelectBtn.selected.leftHalf {
        background-image: url(../common-img/img/svg/icn_area_selectLefthalf.svg);
    }
    .orderSelectAreaSelectBtn.rightHalf {
        background-image: url(../common-img/img/svg/icn_area_righthalf.svg);
    }
    .orderSelectAreaSelectBtn.disable.rightHalf {
        background-image: url(../common-img/img/svg/icn_area_disableRighthalf.svg);
    }
    .orderSelectAreaSelectBtn.selected.rightHalf {
        background-image: url(../common-img/img/svg/icn_area_selectRighthalf.svg);
    }
    .orderSelectAreaSelectBtn.upperHalf {
        background-image: url(../common-img/img/svg/icn_area_upperhalf.svg);
    }
    .orderSelectAreaSelectBtn.disable.upperHalf {
        background-image: url(../common-img/img/svg/icn_area_disableUpperhalf.svg);
    }
    .orderSelectAreaSelectBtn.selected.upperHalf {
        background-image: url(../common-img/img/svg/icn_area_selectUpperhalf.svg);
    }
    .orderSelectAreaSelectBtn.lowerHalf {
        background-image: url(../common-img/img/svg/icn_area_lowerhalf.svg);
    }
    .orderSelectAreaSelectBtn.disable.lowerHalf {
        background-image: url(../common-img/img/svg/icn_area_disableLowerhalf.svg);
    }
    .orderSelectAreaSelectBtn.selected.lowerHalf {
        background-image: url(../common-img/img/svg/icn_area_selectLowerhalf.svg);
    }
/*プルダウン*/
.orderSelectPulldown {
    -webkit-appearance: none;
    position: relative;
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    border: solid 1px #fff;
    border-radius: 0px;
    padding: 0 4px;
    background-color: #fff;
    font-size: 14px;
    color: #000;
    letter-spacing: -1px;
    cursor: pointer;
    margin: 0 6px;
    background-image: url(../common-img/img/svg/btn_icon_pulldown.svg);
    background-position: right;
    background-repeat: no-repeat;
    background-size: 30px;
}
    .orderSelectPulldown.areaType {
        width: calc(100% - 77px);
    }
    .orderSelectPulldown::-ms-expand {
        display: none;
    }
.orderSelectPulldown > option {
    font-size: 14px;
    color: #000;
}
    .orderSelectPulldown > option:disabled {
        color: #b3b3b3;
    }
/*チェックボックス*/
.orderSelectRelyArea {
    display: block;
    width: auto;
    height: 20px;
    margin: 10px 6px;
}
.orderSelectRelyText {
    position: relative;
    display: block;
    height: 100%;
    line-height: 19px;
    padding-left: 25px;
    font-size: 14px;
    cursor: pointer;
}
    .orderSelectRelyText::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 19px;
        height: 19px;
        box-sizing: border-box;
        border: 1px solid #e4f0ef;
        background-color: #dce9ef;
    }
input[type="checkbox"]:checked + .orderSelectRelyText::after {
    content: "";
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    width: 17px;
    height: 17px;
    background-color: #01916d;
    background-image: url(../common-img/img/svg/icn_check.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
/*スライドバー*/
.orderSelectLevelSelectArea{
    margin: 0 6px;
    display:block;
    width:100%;
    height:40px;
}
    .orderSelectLevelSelectArea.disable {
        background-color: transparent !important;
        opacity: 0.7 !important;
        pointer-events: none !important;
    }

.orderSelectSlideItemArea {
    display: flex;
    flex-wrap:wrap;
    width: calc(100% - 10px);
    height: 6px;
    margin:20px auto 0;
}
.orderSelectPointArea {
    display: block;
    height: 100%;
    width: 2px;
}
.orderSelectPoint {
    position: relative;
    display: block;
    width: 2px;
    height: 100%;
    background-color:#fff;
}
.orderSelectPointLabel {
    position: absolute;
    top:-18px;
    left:50%;
    transform:translateX(-50%);
    display: inline-block;
    word-break:keep-all;
    width: 70px;
    height: auto;
    font-size: 12px;
    text-align: center;
    letter-spacing:-1px;
    color:#fff;
}
.orderSelectLevelSelectArea.disable .orderSelectPointLabel {
    opacity: 0.7;
}
.orderSelectSliderBar{
    width:calc(100% - 10px);
    height:2px;
    background-color:#fff;
    margin:0 auto;
}
input[type="range"] {
    -webkit-appearance: none;
    display:block;
    height: 10px;
    width: 100%;
    background-color:transparent;
}
    input[type="range"]:focus {
        outline:none;
    }
    input[type="range"]::-ms-tooltip /*IE対応*/ {
        display: none;
    }
    input[type="range"]::-ms-track /*IE対応*/ {
        border: none;
        height: 0;
    }
    input[type="range"]::-ms-fill-lower,
    input[type="range"]::-ms-fill-upper /*IE,Edge対応*/ {
        opacity: 0;
        height: 0;
    }
    input[type="range"]::-moz-range-thumb /*Firefox対応*/ {
        display: block;
        width: 12px;
        height: 10px;
        border: none;
        border-radius: 0;
        background-color: transparent;
        background-image: url(../common-img/img/svg/icon_sliderThumb.svg);
        background-repeat: no-repeat;
        background-position: top;
        background-size: 12px;
    }
    input[type="range"]::-ms-thumb /*IE対応*/ {
        display: block;
        width: 12px;
        height: 10px;
        border: none;
        background-color: transparent;
        background-image: url(../common-img/img/svg/icon_sliderThumb.svg);
        background-repeat: no-repeat;
        background-position: top;
        background-size: 12px;
    }
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        display: block;
        width: 12px;
        height: 10px;
        background-image: url(../common-img/img/svg/icon_sliderThumb.svg);
        background-repeat: no-repeat;
        background-position: top;
        background-size: 12px;
    }
/*補正指示削除・追加ボタン*/
.orderDecideArea {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
    width: 100%;
    height: calc(100% - 597px);
    min-height: 98px;
    margin: auto;
    padding: 0 30px 18px 30px;
    box-sizing: border-box;
}
.orderDeleteBtn,.orderAddBtn {
    width: 100%;
    height: 30px;
    line-height: 28px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    border: 1px solid #e4f0ef;
    background-color: #01916d;
    margin: 10px 0 0 0;
}

/* ガイド表示ボタン設定 */
/*画像だけ回転エリア*/
.orderSelectGuideArea {
    display: block;
    width: calc(100% - 48px);
    height: auto;
    margin: auto;
    box-sizing: border-box;
    padding: 10px 0;
}
.orderSelectGuideBtnCaptionZone {
    display: flex;
    width: auto;
    height: 14px;
    margin: 0 0 10px 0;
}
.orderSelectGuideBtnCaption {
    display: block;
    text-align: left;
    font-size: 14px;
    color: #fff;
    line-height: 14px;
}
.orderSelectGuideBtnZone {
    width: calc(100% - 12px);
    height: 30px;
    margin:auto;
}
.orderSelectGuideRadioGroup {
    display: flex;
    width: 100%;
    height: 100%;
}
    .orderSelectGuideRadioGroup > input[type=radio] {
        display: none;
    }
.orderSelectGuideBtn {
    display: block;
    width: 50%;
    height: 100%;
    line-height: 29px;
    font-size: 14px;
    text-align:center;
    color: #01916d;
    padding: 0 0 0 40px;
    box-sizing: border-box;
    border: solid 1px #e4f0ef;
    background-color: #dce9ef;
    background-image: none;
    background-position: 10px;
    background-repeat: no-repeat;
    background-size: 20px;
}
    .orderSelectGuideBtn.orderSelectGuideBtnRight {
        padding: 0 40px 0 0;
        background-position: 90%;
    }
input[type=radio]:checked + .orderSelectGuideBtn {
    color: #fff;
    background-color: #01916d;
    background-image: url(../common-img/img/svg/icn_check_small.svg);
}

/* 分割表示ボタン設定 */
.orderSelectSpritArea {
    display: block;
    width: 100%;
    height: auto;
    padding: 14px 14px 28px 14px;
    box-sizing: border-box;
}

.orderSelectSpritBtnCaptionZone {
    display: flex;
    width: auto;
    height: 14px;
    margin: 0 6px 10px 6px;
}

.orderSelectSpritBtnCaption {
    display: block;
    text-align: left;
    font-size: 14px;
    color: #fff;
    line-height: 14px;
}

.orderSelectSpritBtnCaptionIcon {
    display: block;
    width: 30px;
    height: 100%;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    /*background-image: url(../common-img/img/svg/icn_guide.svg);*/
}

.orderSelectSpritAreaBtnZone {
    margin: 0 6px;
    width: calc(100% - 12px);
    height: 38px;
}

.orderSelectSpritRadioGroup {
    display: flex;
    width: 100%;
    height: 100%;
}

    .orderSelectSpritRadioGroup > input[type=radio] {
        display: none;
    }

.orderSelectSpritBtn {
    display: block;
    width: 50%;
    height: 100%;
    line-height: 34px;
    font-size: 16px;
    color: #01916d;
    padding: 0 0 0 70px;
    box-sizing: border-box;
    border: solid 1px #e4f0ef;
    background-color: #dce9ef;
    background-image: none;
    background-position: 20px;
    background-repeat: no-repeat;
    background-size: 24px;
}

    .orderSelectSpritBtn.orderSelectSpritBtnRight {
        padding: 0 0 0 30px;
        background-position: 80px;
    }

input[type=radio]:checked + .orderSelectSpritBtn {
    color: #fff;
    background-color: #01916d;
    background-image: url(../common-img/img/svg/icn_check_small.svg);
}

@media screen and (max-height: 680px) {
    .orderArea {
        height: calc(100% - 24px);
    }
    .orderContentArea {
        height: calc(100% - 383px);
    }
    .orderAreaLabel{
        height:24px;
        line-height:20px;
    }
    .orderAreaLabelIcon{
        width:22px;
        height:22px;
    }
    .orderStep.firstStep {
        top: 29px;
    }
    .orderStep.secondStep {
        top: 88px;
    }
    .orderStep.thirdStep {
        top: 234px;
    }
    .orderSelectArea > form {
        padding: 22px 0 10px 0;
    }
    .orderSelectPulldownLabel.editArea {
        height: 28px;
        line-height: 28px;
    }
    .orderSelectPulldown {
        height: 28px;
    }
    .orderDecideArea {
        padding: 0 20px 18px 20px;
    }
    .orderDecideBtn {
        height: 28px;
        line-height: 26px;
    }
    .orderSelectGuideArea {
        display: block;
        width: 100%;
        height: auto;
        padding: 10px 14px 20px 14px;
        box-sizing: border-box;
    }
    .orderSelectGuideBtnZone {
        height: 34px;
    }
    .orderSelectGuideBtn {
        line-height: 32px;
    }
}

/*表示制御*/
#trimmingFnCategory2,
#trimmingFnCategory3,
.correctionOrderSelected #footerArea,
.autoEffectOrderSelected #footerArea,
.correctionOrderSelected #trimmingOperationControlZone,
.autoEffectOrderSelected #trimmingOperationControlZone,
.correctionOrderSelected #trimmingFnCategory1,
.autoEffectOrderSelected #trimmingFnCategory1 {
    display: none;
}
.correctionOrderSelected #mainContentsTrimming,
.autoEffectOrderSelected #mainContentsTrimming {
    margin: 20px 0px 56px 24px;
}
.correctionOrderSelected #trimmingFnCategory2,
.autoEffectOrderSelected #trimmingFnCategory3 {
    display: block;
}
.correctionOrderSelected [data-correction-order-type="effectSelect"] > .effectSelect,
.autoEffectOrderSelected [data-autoEffect-order-type="autoEffectSelect"] > .autoEffectSelect {
    display: block;
    transform: scale(1);
    opacity: 1;
}
.reprintMode .pageEditPrevBtn, /*編集画面の戻る*/
.reprintMode #addImageButton, /*画像追加*/
.reprintMode #saveButton, /*保存*/
.reprintMode #thumbnailPic, /*非選択のアップロード画像*/
.reprintMode #fitModeBtn, /*内接モード*/
.reprintMode #operationControlZone, /*元に戻す・やり直す*/
.reprintMode .selectBorderReplaceButtonZone, /*入替*/
.reprintMode .selectBorderPictureRotateButtonZone, /*回転*/
.reprintMode .changesSelectList /*フチ・後加工他*/ {
    display: none;
}
    .reprintMode .thumbnailPic.checkedItem {
        display: block;
    }

/* 店頭注文ならリメイクオーダーでも保存ボタン表示 */
.reprintMode.storeMode #saveButton /*保存*/ {
    display: initial;
}

.storeMode .afterProcessingItemPriceArea,
.storeMode .afterProcessingItemPrice,
.storeMode .paperItemPriceArea,
.storeMode .paperItemPrice,
.storeMode .productPriceLabelArea,
.storeMode .productPriceLabel,
.storeMode #totalAmountCaption,
.storeMode #totalAmount
{
    display: none;
}
/*注文とカートボタンの大きさを逆にする*/
.storeOrderBtn {
    min-width: 160px !important;
    height: 100% !important;
    font-size: 2.5rem !important;
    margin: 0 !important;
    transition: none !important;
}
.storeCartBtn {
    min-width: 110px;
    height: 38px;
    padding: 0 20px 0 0 !important;
    background-position: 80px !important;
    background-size: 20px !important;
    margin: 8px 8px 8px 3px;
    font-size: 18px !important;
    transition: none !important;
}
/*注文完了POP*/
.storeOrderCompletePopup {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background: none;
    z-index: 20001;
}
.storeOrderCompletePopupZone {
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    position: absolute;
    width: 707px;
    height: 953px;
    max-height: 95%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 5px 44px 78px 44px;
    margin: auto;
    background-color: #ffffff;
    border: 1px solid #01916d;
    color: #333333;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 0 20px #666;
}
.storeOrderCompletePopupCaptionZone {
    position: relative;
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 22px;
    color: #767676;
    text-align: center;
}
.storeOrderCompletePopupScrollArea{
    display: block;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 0 0 1px 0;
}
.storeOrderCompletePopupContentsZone {
    display: flex;
    width: 100%;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    flex-direction: column;
    -webkit-flex-direction: column;
    font-size: 14px;
    color: #000;
    letter-spacing: -1px;
    box-sizing: border-box;
    background-color: #fff;
    border: solid 1px #000;
    border-top: none;
}
.custumerReceiptLogo {
    display: block;
    width: 100%;
    height: 106px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("../common-img/img/custumerReceptLogo.png");
}
.receiptContentTopArea {
    display: block;
    width: 100%;
    height: 70px;
    box-sizing: border-box;
    padding: 20px;
}
.custumerReceipt {
    display: block;
    width: 100px;
    height: 100%;
    line-height: 24px;
    box-sizing: border-box;
    border: solid 2px #000;
    font-size: 16px;
    text-align: center;
}
.receiptContentCostumerNameArea{
    display: block;
    width: 100%;
    height: 20px;
    line-height: 20px;
    text-decoration:underline;
    box-sizing: border-box;
    padding: 0 30px;
}
.receiptContentMsg {
    display: block;
    width: 100%;
    height: auto;
    line-height: 20px;
    box-sizing: border-box;
    padding: 20px 30px;
}
.receiptContentOrderNumberArea {
    display: flex;
    width: 100%;
    height: 30px;
    line-height: 30px;
    box-sizing: border-box;
    padding: 0 30px;
}
.receiptContentOrderDateArea,
.receiptContentCustumerContactArea,
.receiptContenDeliveryDateArea {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    height: 30px;
    line-height: 30px;
    box-sizing: border-box;
    padding: 0 30px;
}
.receiptContentOrderContentArea {
    display: block;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 0 20px 20px 20px;
}
.receiptContentStoreMarkArea {
    display: block;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 0 20px 20px 20px;
}
.orderNumberLabel,
.orderDateLabel {
    display: block;
    width: 80px;
    height: 100%;
}
.orderContentLabel,
.storeMarkLabel {
    display: block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    box-sizing: border-box;
    padding: 0 10px;
}
.orderNumber {
    display: block;
    width: calc(100% - 80px);
    height: 100%;
}
.orderContent {
    margin: auto;
    display: flex;
    width: 100%;
    height: 250px;
    box-sizing: border-box;
    padding: 10px 20px;
    border: solid 2px #000;
}
.storeMark {
    display: block;
    width: 100%;
    height: 122px;
    box-sizing: border-box;
    border: solid 2px #000;
}
.orderItemPos {
    display: inline-block;
    width: 100%;
    height: 100%;
}
.orderItemArea{
    display: flex;
    justify-content: flex-start;
    width: 100%;
    height: 24px;
    line-height: 24px;
}
.orderItemLabel {
    display: block;
    width: 65px;
    height: 100%;
    text-align: right;
    flex: 0 0 auto;
}
.orderCommentArea {
    display: block;
    width: 100%;
}
.orderCommentLabel {
    display: block;
    width: 100%;
    height: 24px;
    line-height: 24px;
    text-align: left;
}
.orderComment {
    line-height:20px;
}
.storeOrderCompletePopupChangeCancelBtnArea {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 57px;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #fff;
    border-top: 1px solid #01916d;
}
.storeOrderCompletePopupChangeBtnZone {
  width: 180px;
  height: 100%;
  margin: 0 20px;
  -webkit-order: 2;
  order: 2;
}
.storeOrderCompletePopupChangeBtn,
.receiptPrintBtn{
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 0 0 30px;
  line-height: 57px;
  outline: none;
  font-size: 2.5rem;
  font-family: "Meiryo UI", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  transition: all 200ms ease;
  background-color: #01916d;
  color: #fff;
  background-position: 16px;
  background-size: 30px;
  background-repeat: no-repeat;
}
.storeOrderCompletePopupChangeBtn{
  background-image: url("../common-img/img/svg/icn_check.svg");
}
.receiptPrintBtn{
  background-image: url("../common-img/img/svg/icn_print.svg");
}
.storeOrderCompletePopupChangeBtn:active,
.receiptPrintBtn:active{
    background-color: #016950;
}
.anmEffect .storeOrderCompletePopupChangeBtn,
.storeOrderCompletePopupChangeBtn.anmEffect,
.anmEffect .receiptPrintBtn,
.receiptPrintBtn.anmEffect{
  -webkit-animation-name: anmEffect;
  -webkit-animation-duration: 600ms;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-iteration-count: 1;
  z-index: 10;
}
@-webkit-keyframes anmEffect {
  0% {
    box-shadow: 0px 0px 1px 1px rgba(190, 246, 84, 0.4);
  }
  30% {
    box-shadow: 0px 0px 50px 20px rgba(190, 246, 84, 0.6);
  }
  100% {
    box-shadow: 0px 0px 50px 50px rgba(190, 246, 84, 0);
  }
}
@media print {
    #commonHeaderArea,
    #popupTertiaryArea,
    #commonFooterArea,
    #popupWaitArea,
    #greenLine,
    #popupTertiaryGenericArea,
    #mainContentsAreaCreate,
    #saveOperationPopup,
    #footerArea,
    #commentPopup,
    #popupTertiaryGenericArea,
    #grayoutArea,
    #cancelConfirmArea,
    .storeOrderCompletePopupCaptionZone,
    .storeOrderCompletePopupChangeCancelBtnArea {
        display: none;
    }
    .storeOrderCompletePopupZone {
        page: pagename;
        width: 100%;
        height: 100%;
        border: none;
        box-shadow: none;
        padding: 20px 80px;
        -webkit-print-color-adjust: exact;
    }
    .storeOrderCompletePopupScrollArea {
        width: calc(100% - 90px);
    }
    .custumerReceiptLogo {
        height: 200px;
    }
    .storeOrderCompletePopupContentsZone {
        margin: 0;
        font-size: 22px;
    }
    .receiptContentTopArea {
        height: 130px;
        padding: 40px;
    }
    .custumerReceipt {
        width: 180px;
        line-height: 46px;
        font-size: 28px;
    }
    .receiptContentCostumerNameArea {
        height: 40px;
        line-height: 40px;
        padding: 0 50px;
    }
    .receiptContentMsg {
        line-height: 36px;
        padding: 30px 50px;
    }
    .receiptContentOrderNumberArea,
    .receiptContentOrderDateArea,
    .receiptContentCustumerContactArea,
    .receiptContenDeliveryDateArea {
        height: 60px;
        line-height: 60px;
        padding: 0 50px;
    }
    .receiptContentStoreMarkArea{
        padding: 0 40px 40px 40px;
    }
    .orderNumberLabel,
    .orderDateLabel {
        width: 130px;
    }
    .orderNumber {
        width: calc(100% - 130px);
    }
    .receiptContentOrderContentArea {
        padding: 0 40px 40px 40px;
    }
    .orderContentLabel, .storeMarkLabel {
        height: 60px;
        line-height: 60px;
        padding: 0 10px;
    }
    .orderContent{
        height: 450px;
        padding: 20px 39px;
    }
    .orderItemArea,
    .orderCommentLabel {
        height: 44px;
        line-height: 44px;
    }
    .orderItemLabel{
        width: 105px;
    }
    .orderComment {
        line-height: 36px;
    }
    .storeMark{
        height: 160px;
    }
}
@page pagename {
    size: A4 portrait;
}
@page {
    margin: 0;
}
.testPrintMode #selectedPhotographicPaperCaption, /*フッターの印画紙情報*/
.testPrintMode #selectedPhotographicPaper, /*フッターの印画紙情報*/
.testPrintMode #xCameraDiscountCaption, /*アップロード画面Xカメラ割引文言*/
.testPrintMode .selectBorderPictureRotateButton, /*編集画面の回転*/
.testPrintMode .fitModeBtn, /*編集画面の内接*/
.testPrintMode .selectBorderReplaceButton, /*編集画面の入れ替え*/
.testPrintMode .thumbnailRotateButton, /*編集画面のサムネイル回転*/
.testPrintMode .thumbnailReplaceButton, /*編集画面のサムネイル入れ替えボタン*/
.testPrintMode .selectBorderTrimmingButton, /*編集画面の編集ボタン*/
.testPrintMode #undoButton, /*編集画面の元に戻す*/
.testPrintMode #redoButton, /*編集画面のやり直す*/
.testPrintMode #trimmingFnBtnArea2, /*トリミング画面の色調補正*/
.testPrintMode .printablearea,
.testPrintMode .vignettingArea {
    display: none;
}
.testPrintMode .serviceMsgArea,
.testPrintMode #templateImageArea, /*テンプレート画像エリア*/
.testPrintMode #quantityCaption,
.testPrintMode #quantity {
    display: block;
}

.testPrintMode .thumbnailPic.checkedItem {
    background-color: transparent;
}
.testPrintMode .thumbnailPic.checkedItem .picZone {
    border: solid 2px #dce9ef;
    box-sizing: border-box;
}
.testPrintMode .thumbnailPic.previewItem {
    background-color: #dce9ef;
}

.testPrintMode .copyGuardImage {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
}

/*　テストプリント中のリンクボタンの制御 */
.testPrintMode #serviceSwitchReviewButton {
    margin-left: 10px;
}


/*サイズ選択ボタンエリア調整*/
.testPrintMode .previewContentsArea > .settingsArea,
.reviewMode .previewContentsArea > .settingsArea {
    width: 419px;
}
@media screen and (min-width: 2300px) {
    .testPrintMode .previewContentsArea > .settingsArea,
    .reviewMode .previewContentsArea > .settingsArea {
        width: 419px;
    }
}

.reviewMode #selectedPhotographicPaperCaption, /*フッターの印画紙情報*/
.reviewMode #selectedPhotographicPaper, /*フッターの印画紙情報*/
.reviewMode #xCameraDiscountCaption, /*アップロード画面Xカメラ割引文言*/
.reviewMode .selectBorderPictureRotateButton, /*編集画面の回転*/
.reviewMode .fitModeBtn, /*編集画面の内接*/
.reviewMode .selectBorderReplaceButton, /*編集画面の入れ替え*/
.reviewMode .thumbnailRotateButton, /*編集画面のサムネイル回転*/
.testPrintMode .thumbnailReplaceButton, /*編集画面のサムネイル入れ替えボタン*/
.reviewMode #undoButton, /*編集画面の元に戻す*/
.reviewMode #redoButton, /*編集画面のやり直す*/
.reviewMode #trimmingFnBtnArea2, /*トリミング画面の色調補正*/
.reviewMode #rotateSettingArea, /*トリミング角度の調整*/
.reviewMode #zoomSettingArea, /*トリミング拡縮*/
.reviewMode #shiftSettingArea, /*トリミング移動*/
.reviewMode #trimmingAreaLine2:first-of-type, /*トリミング区切り線1番目*/
.reviewMode #trimmingAreaLine2:nth-of-type(2), /*トリミング区切り線2番目*/
.reviewMode .printablearea,
.reviewMode .vignettingArea {
    display: none;
}
.reviewMode .serviceMsgArea,
.reviewMode #aspectSettingArea,
.reviewMode #quantityCaption,
.reviewMode #quantity {
    display: block;
}

/* 講評サービスの時は余白を詰める */
.reviewMode #serviceSwitchReviewButton {
    margin-left: 0px;
}

/*アスペクト設定プレビューエリア*/
.reviewMode .aspectCanvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.reviewMode .aspectSettingPreviewArea {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.reviewMode .aspectSettingPreviewPosArea {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.reviewMode .aspectSettingPreviewBtn {
    position: absolute;
    z-index: 2;
    display: block;
    width: 30px;
    height: 30px;
    border: none;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: auto;
}

    .reviewMode .aspectSettingPreviewBtn.leftTop {
        top: -15px;
        left: -15px;
        background-image: url(../common-img/img/svg/btn_icon_aspectSettingPreviewLeftTop.svg);
    }

    .reviewMode .aspectSettingPreviewBtn.centerTop {
        top: -15px;
        left: 50%;
        transform: translateX(-50%);
        background-image: url(../common-img/img/svg/btn_icon_aspectSettingPreviewCenterTop.svg);
    }

    .reviewMode .aspectSettingPreviewBtn.rightTop {
        top: -15px;
        right: -15px;
        background-image: url(../common-img/img/svg/btn_icon_aspectSettingPreviewRightTop.svg);
    }

    .reviewMode .aspectSettingPreviewBtn.left {
        top: 50%;
        left: -15px;
        transform: translateY(-50%);
        background-image: url(../common-img/img/svg/btn_icon_aspectSettingPreviewLeft.svg);
    }

    .reviewMode .aspectSettingPreviewBtn.right {
        top: 50%;
        right: -15px;
        transform: translateY(-50%);
        background-image: url(../common-img/img/svg/btn_icon_aspectSettingPreviewRight.svg);
    }

    .reviewMode .aspectSettingPreviewBtn.leftBottom {
        bottom: -15px;
        left: -15px;
        background-image: url(../common-img/img/svg/btn_icon_aspectSettingPreviewLeftBottom.svg);
    }

    .reviewMode .aspectSettingPreviewBtn.centerBottom {
        bottom: -15px;
        left: 50%;
        transform: translateX(-50%);
        background-image: url(../common-img/img/svg/btn_icon_aspectSettingPreviewCenterBottom.svg);
    }

    .reviewMode .aspectSettingPreviewBtn.rightBottom {
        bottom: -15px;
        right: -15px;
        background-image: url(../common-img/img/svg/btn_icon_aspectSettingPreviewRightBottom.svg);
    }

.reviewMode .trimmingImageDrawArea {
    pointer-events: auto;
    background-color: transparent;
}

.reviewMode .thumbnailPic.checkedItem {
    background-color: transparent;
}
.reviewMode .thumbnailPic.checkedItem .picZone {
    border: solid 2px #dce9ef;
    box-sizing: border-box;
}
.reviewMode .thumbnailPic.previewItem {
    background-color: #dce9ef;
}

/*　講評サービス中のリンクボタンの制御 */
.reviewMode #serviceSwitchTestButton {
    margin-left: 10px;
}




/*価格変更*/
.xCameraModePrice #totalAmount {
    text-decoration:line-through;
}

#discountTotalAmount {
    display: none;
    margin: 0 0 0 6px;
}

.xCameraModePrice #discountTotalAmount {
    display: block;
}

.storeMode.xCameraModePrice #discountTotalAmount {
    display: none;
}

/*スキン変更*/
.xCameraModeSkin #commonHeader,
.xCameraModeSkin #footerArea {
    background-color: #000;
}
.xCameraModeSkin .commonHeaderButton {
    color: #dce9ef;
}
.xCameraModeSkin .footerInfo {
    color: #35fddc;
}
.xCameraModeSkin #commonFooter {
    background-color: #000;
    border-top: solid 1px #35fddc;
}
.xCameraModeSkin .copyrightText,
.xCameraModeSkin .footerLink,
.xCameraModeSkin .logoText {
    color: #fff;
}
.xCameraModeSkin #prevCaption {
    background-image: url(../common-img/img/svg/icn_arrow_prev_xCameraColor.svg);
    background-color: #000;
    color: #dce9ef;
}
.xCameraModeSkin #cancelButtonCaption {
    background-image: url(../common-img/img/svg/icn_cancel_xCameraColor.svg);
    background-color: #000;
    color: #dce9ef;
}
.xCameraModeSkin #footerInfoArea {
    color: #dce9ef;
}
/* テンプレート選択画面キャプション表示領域設定 */
#headerCaption {
  font-size: 21px;
  color:#fff;
}